/* ================================================================
   MEDIA INITIATION — HOME PAGE ONLY FIXES
   Fix 1: Services sticky scroll (left fixed, right scrolls)
   Fix 2: Case Studies full-width header + side-by-side cards
   NOTHING ELSE IS CHANGED
   ================================================================ */

/* ────────────────────────────────────────────────────────────
   FIX 1: SERVICES — STICKY LEFT, SCROLLING RIGHT
   ──────────────────────────────────────────────────────────── */

/* Outer wrapper: flex row, items start at top */
.services_component {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 4rem !important;
  width: 100% !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  position: relative !important;
}

/* LEFT side: sticky — stays in place while right scrolls */
.services_content {
  width: 40% !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 100px !important;
  align-self: flex-start !important;
  z-index: 2 !important;
  overflow: visible !important;
}

/* Fix the sticky heading inside left panel */
.services_content .heading-style-h3 {
  position: static !important;
  width: 100% !important;
  font-size: 1.6rem !important;
  line-height: 1.4 !important;
}

/* RIGHT side: normal scroll, items stack vertically */
.services_items {
  flex: 1 !important;
  width: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3rem !important;
  min-width: 0 !important;
}

/* Each service card */
.services_item {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

/* Service image */
.services_img-wrap {
  aspect-ratio: 3 / 2 !important;
  border-radius: 1rem !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}

.services_img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Service info text */
.services_item-infos {
  padding: 0.5rem 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

/* ────────────────────────────────────────────────────────────
   FIX 2: CASE STUDIES — Full-width header + 2 large cards
   ──────────────────────────────────────────────────────────── */

/* Section wrapper */
.case-studies-section .container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Header block: heading + description full width, left aligned */
.case-studies-header {
  padding: 0 40px 3rem 40px !important;
  max-width: 700px !important;
}

.case-studies-header .heading {
  font-size: clamp(2.75rem, 8vw, 3.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  margin-bottom: 1rem !important;
  text-align: left !important;
  color: #fff !important;
}

.case-studies-header .medium-text {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  text-align: left !important;
  color: rgba(255,255,255,0.6) !important;
  margin: 0 !important;
}

/* Two cards side by side, full page width */
.case-studies-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  width: 100% !important;
}

/* Each case study card */
.case-study-card {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* Image wrapper fills card */
.case-study-img-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  display: block !important;
}

/* The actual image */
.case-study-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.case-study-card:hover .case-study-img {
  transform: scale(1.04) !important;
}

/* Dark overlay that appears on top of image */
.case-study-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(0,0,0,0.7) 100%
  ) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 2rem !important;
  pointer-events: none !important;
}

/* LEARN > MORE button bottom-left */
.case-study-learn-more {
  color: #fff !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  align-self: flex-start !important;
}

.case-study-learn-more span {
  color: #ff6b00 !important;
  font-size: 1.3rem !important;
  margin: 0 4px !important;
}

/* ── MOBILE: stack cards vertically ── */
@media screen and (max-width: 767px) {
  .services_component {
    flex-direction: column !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 2rem !important;
  }

  .services_content {
    width: 100% !important;
    position: static !important;
  }

  .services_items {
    width: 100% !important;
  }

  .case-studies-header {
    padding: 0 16px 2rem 16px !important;
  }

  .case-studies-grid {
    grid-template-columns: 1fr !important;
  }

  .case-study-img-wrap {
    aspect-ratio: 4 / 3 !important;
  }
}

/* ── TABLET ── */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .services_component {
    flex-direction: column !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .services_content {
    width: 100% !important;
    position: static !important;
  }

  .case-studies-header {
    padding: 0 24px 2rem 24px !important;
  }
}

/* ================================================================
   GLOBAL FIXES — apply at every screen size (not breakpoint-gated)
   These fix sections that look broken on laptop/desktop widths
   that fall outside the original Webflow breakpoints (992–1439px
   and 1920px+), without affecting the contact form's .split layout
   ================================================================ */

/* "Your Trusted Digital Marketing Agency" stats section.
   Scoped with :has() so the contact form's .split is untouched. */
.split:has(.div-block-25) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 1.5rem !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

.split:has(.div-block-25) > div,
.split:has(.div-block-25) .div-block-25 {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
}

.split:has(.div-block-25) .heading-13 {
  font-size: clamp(1.6rem, 3vw, 2.6rem) !important;
  line-height: 1.35 !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
}

.split:has(.div-block-25) .title {
  text-align: center !important;
  width: 100% !important;
  font-size: clamp(0.85rem, 1.1vw, 1rem) !important;
  letter-spacing: 0.12em !important;
}
/* ================================================================
   MOBILE HERO FIX — Phone screen only
   Root cause: display:inline on h1 + zero padding + max-width:none
   causes text to overflow left and get clipped
   ================================================================ */

@media screen and (max-width: 767px) {

  /* Stop the entire page from overflowing left */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Hero section: fix the -100px margin pushing content behind navbar */
  .section_intro {
    margin-top: 0 !important;
    padding-top: 90px !important;
    margin-bottom: 40px !important;
  }

  /* Container: restore left/right padding (was set to 0) */
  .padding-global-6 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  /* Container width: was set to auto/none — constrain it */
  .container-medium-2 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Intro component and content: full width, no overflow */
  .intro_component {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    align-items: flex-start !important;
  }

  .intro_content {
    width: 100% !important;
    max-width: 100% !important;
    align-items: flex-start !important;
  }

  /* Intro texts: constrain max-width (was none) */
  .intro_texts {
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  /* THE MAIN FIX: display-inline h1
     Was: display:inline; font-size:50px — causes left clipping
     Fix: display:block; responsive font size; full width */
  .display-inline {
    display: block !important;
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: 1.2 !important;
    width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    text-align: left !important;
  }

  /* Hide decorative side images that push layout */
  .intro_image-1,
  .intro_image-2 {
    display: none !important;
  }

  /* Small inline images (fanned photos) */
  .intro_images-min-wrap {
    display: flex !important;
  }

  /* Services on mobile: single column stacked */
  .services_component {
    flex-direction: column !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    gap: 1.5rem !important;
  }

  .services_content {
    width: 100% !important;
    position: static !important;
    top: auto !important;
  }

  .services_items {
    width: 100% !important;
  }

  /* Case studies: stack vertically on mobile */
  .case-studies-header {
    padding: 0 1rem 1.5rem 1rem !important;
  }

  .case-studies-grid {
    grid-template-columns: 1fr !important;
  }
}

@media screen and (max-width: 479px) {

  .section_intro {
    margin-top: 0 !important;
    padding-top: 80px !important;
    margin-bottom: 30px !important;
  }

  .padding-global-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    width: 100% !important;
  }

  .display-inline {
    font-size: clamp(1.8rem, 7.5vw, 2.5rem) !important;
  }
}