/* Final mobile corrections requested for the supplied reference images. */
@media (max-width:650px){
  /* The compact desktop bar must not become a fixed bottom header on phones. */
  html body #header.compact{display:none!important;pointer-events:none!important}

  /* Section 2 heading stays compact and locked to two lines. */
  html body #solutions .s2-intro h2{font-size:clamp(30px,8.2vw,34px)!important;line-height:.98!important;letter-spacing:-.04em!important;white-space:normal!important}
  html body #solutions .s2-intro h2 .s2-title-main,
  html body #solutions .s2-intro h2 em{display:block!important;white-space:nowrap!important}
  html body #solutions .s2-intro{margin-bottom:28px!important}

  /* Preserve the approved card dimensions and keep the mobile stack animated by scroll. */
  html body #solutions .s2-stack{padding-bottom:18vh!important;overflow:visible!important}
  html body #solutions .s2-card,
  html body #solutions .s2-card:nth-child(n){position:sticky!important;height:clamp(438px,118vw,488px)!important;min-height:0!important;margin-bottom:18px!important;grid-template-columns:1fr!important;grid-template-rows:51% 49%!important;top:82px!important;transform-origin:50% 9%!important;overflow:hidden!important}
  html body #solutions .s2-card:nth-child(2){top:92px!important}
  html body #solutions .s2-card:nth-child(3){top:102px!important}
  html body #solutions .s2-card:nth-child(4){top:112px!important}
  html body #solutions .s2-card:nth-child(5){top:122px!important;margin-bottom:0!important}
  html body #solutions .s2-card .s2-copy{padding:14px 18px!important;min-height:0!important}
  html body #solutions .s2-card .s2-copy h3{font-size:clamp(25px,7vw,30px)!important;line-height:.98!important;margin:12px 0 8px!important}
  html body #solutions .s2-card .s2-copy>p{font-size:11px!important;line-height:1.4!important}
  html body #solutions .s2-card .s2-media{min-height:0!important;height:100%!important;border-radius:0 0 22px 22px!important}
  /* Any replacement image remains fully visible and contained inside the media box. */
  html body #solutions .s2-card .s2-media>img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important;background:var(--card-end)!important}
  /* On mobile the image is below the copy, so the color fade follows that direction. */
  html body #solutions .s2-card{background:linear-gradient(180deg,var(--card-start) 0%,var(--card-start) 38%,var(--card-mid) 70%,var(--card-end) 100%)!important}

  /* Section 3 heading is smaller; card widths/heights remain unchanged. */
  html body #industries .s3-left h2{font-size:clamp(33px,8.8vw,38px)!important;line-height:.96!important;letter-spacing:-.045em!important}
  html body #industries .s3-left h2 span,
  html body #industries .s3-left h2 em{white-space:nowrap!important}

  /* Match the desktop card-entry feel on mobile with a slow, staggered reveal. */
  html body .s3-scroll.s3-mobile-motion .s3-service-card{opacity:0!important;transform:translate3d(28px,24px,0)!important;transition:opacity 1s ease,transform 1.15s cubic-bezier(.16,1,.3,1),box-shadow .4s!important}
  html body .s3-scroll.s3-mobile-motion .s3-service-card:nth-child(even){transform:translate3d(-28px,24px,0)!important}
  html body .s3-scroll.s3-mobile-motion .s3-service-card.mobile-visible,
  html body .s3-scroll.s3-mobile-motion .s3-service-card:nth-child(even).mobile-visible{opacity:1!important;transform:none!important}

  /* Hero image moved into the lower highlighted panel; the stat card overlaps its lower edge. */
  html body #top .hero-art{position:relative!important;height:405px!important;min-height:405px!important;margin-top:-68px!important;overflow:visible!important}
  html body #top .hero-art .portrait{left:31%!important;right:auto!important;top:17%!important;width:69%!important;height:54%!important;transform:none!important;border-radius:28px 10px!important;overflow:hidden!important}
  html body #top .hero-art .portrait img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:52% center!important}
  html body #top .hero-art .portrait span,html body #top .hero-art .portrait b{font-size:5px!important}
  html body #top .hero-art .quote,
  html body #top .hero-art .readers,
  html body #top .hero-art .roas{display:none!important}
  html body #top .hero-art .impressions{left:34%!important;right:auto!important;top:auto!important;bottom:19%!important;width:116px!important;z-index:7!important}
}
@media (max-width:380px){
  html body #top .hero-art{margin-top:-54px!important}
  html body #top .hero-art .portrait{left:28%!important;width:72%!important}
  html body #top .hero-art .impressions{left:31%!important;width:110px!important}
}
@media (prefers-reduced-motion:reduce){
  html body .s3-scroll.s3-mobile-motion .s3-service-card,
  html body .s3-scroll.s3-mobile-motion .s3-service-card.mobile-visible{opacity:1!important;transform:none!important;transition:none!important}
}

/* Repeatable desktop scroll-scrub for the Why section. The values are driven
   from scroll position, not a one-shot IntersectionObserver animation. */
html body .s4-why.s4-scroll-scrub{
  --s4-scrub-opacity:1;
  --s4-scrub-image-x:0px;
  --s4-scrub-copy-x:0px;
}
@media (min-width:951px){
  html body .s4-why.s4-scroll-scrub .s4-visual.s4-reveal{
    opacity:var(--s4-scrub-opacity)!important;
    transform:translate3d(var(--s4-scrub-image-x),0,0)!important;
    transition:none!important;
    will-change:transform,opacity!important;
  }
  html body .s4-why.s4-scroll-scrub .s4-copy{
    opacity:var(--s4-scrub-opacity)!important;
    transform:translate3d(var(--s4-scrub-copy-x),0,0)!important;
    transition:none!important;
    will-change:transform,opacity!important;
  }
  html body .s4-why.s4-scroll-scrub .s4-copy .s4-reveal{
    opacity:1!important;
    transform:none!important;
  }
}

@media (max-width:650px){
  /* Keep the small metric card on the lower-left edge of the hero image. */
  html body #top .hero-art .impressions{left:28%!important}
}
@media (max-width:380px){
  html body #top .hero-art .impressions{left:26%!important}
}

/* Final heading and hero sizing pass from the supplied mobile references. */
@media (max-width:650px){
  /* Resources heading: two balanced lines. */
  html body #resources .s6-case-head h2{
    font-size:clamp(29px,8.2vw,33px)!important;
    line-height:.98!important;
    letter-spacing:-.055em!important;
    white-space:normal!important;
  }
  html body #resources .s6-case-head h2 em{white-space:nowrap!important}

  /* Active capability title: two lines without changing card dimensions. */
  html body #resources .s6-case.active .s6-case-content{
    width:86%!important;
  }
  html body #resources .s6-case.active .s6-case-content h3{
    max-width:100%!important;
    font-size:clamp(18px,5.15vw,21px)!important;
    line-height:1.02!important;
    letter-spacing:-.045em!important;
  }

  /* Hero highlighted image now fills the full highlighted rectangle. */
  html body #top .hero-art .portrait{
    left:18%!important;
    width:82%!important;
    top:17%!important;
    height:60%!important;
  }
  html body #top .hero-art .impressions{
    left:42%!important;
    bottom:12%!important;
    width:100px!important;
  }

  /* Why-section heading: two lines at the supplied mobile width. */
  html body #company .s4-copy h2{
    font-size:clamp(29px,8.2vw,33px)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
  }
  html body #company .s4-copy h2 em{white-space:nowrap!important}
}
@media (max-width:380px){
  html body #top .hero-art .portrait{left:15%!important;width:85%!important}
  html body #top .hero-art .impressions{left:38%!important;width:96px!important}
}

@media (max-width:650px){
  /* Keep the Resources title on exactly two lines: first line includes “to”. */
  html body #resources .s6-case-head h2{font-size:clamp(25px,7vw,29px)!important;line-height:1!important}
}

@media (max-width:650px){
  html body section#resources.s6-video-cards .s6-case-head h2{
    font-size:clamp(25px,7vw,29px)!important;
    line-height:1!important;
    letter-spacing:-.055em!important;
    white-space:normal!important;
  }
  html body section#resources.s6-video-cards .s6-case-head h2 em{white-space:nowrap!important}
}

/* Two service-card image height fix: enlarge the first two media panels on
   desktop so their artwork fills the available card height. Mobile sizing is
   intentionally left unchanged. */
@media (min-width:651px){
  html body section#solutions.s2-solutions .s2-card:nth-child(1) .s2-media>img,
  html body section#solutions.s2-solutions .s2-card:nth-child(2) .s2-media>img{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:scale(1.14)!important;
    transform-origin:center center!important;
    mix-blend-mode:normal!important;
  }
}