/* Final responsive composition layer. Content and component behaviour stay in
   their original templates; no document-level clipping is used to fix overflow. */
:root { --device-gutter:clamp(1rem,3.5vw,3rem) }
main :where(h1,h2,h3,h4) { overflow-wrap:break-word }
main :where(img,video,iframe) { max-width:100% }
main :where(input,select,textarea) { min-width:0;max-width:100% }
main :where([class$="__grid"],[class$="-grid"],[class$="__layout"]) > * { min-width:0 }
.svcx .svcx-h4 { overflow-wrap:anywhere }

/* Newsletter and navigation columns must be allowed to shrink independently. */
body > footer .footer-top { grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr)) minmax(0,1.2fr) }
body > footer :is(.footer-top > *, .footer-newsletter, .footer-newsletter input) { min-width:0 }
body > footer .footer-col a { overflow-wrap:anywhere }
body > footer .footer-newsletter input { width:100% }
body > footer .footer-newsletter button { flex-shrink:0 }
body > footer .footer-inner { max-width:1400px }

/* Keep the Services opening on its intended dark surface before JS is ready. */
html[data-theme] .svc-exp .sx-hero { background:#060b0d!important }
.sx-hero__inner > * { min-width:0 }
/* Transparent navigation over a media hero needs light controls in either theme. */
html[data-theme] body:has(main [data-design-surface="media"]:first-child):not(.mobile-menu-open) #nav:not(.scrolled):not(:has(.nav-item.open)) {
  --nav-ink:#e3f7f5;--nav-accent:#67e8ed;
}

@media (max-width:1080px) {
  html[data-theme] body #nav { padding-inline:max(16px,env(safe-area-inset-left))!important }
  html[data-theme] body #nav .nav-inner { gap:12px }
  html[data-theme] body #nav #navLogo { width:clamp(112px,18vw,148px)!important;flex:0 0 clamp(112px,18vw,148px)!important }
  html[data-theme] body #nav .nav-actions { gap:10px;margin-right:0 }
  html[data-theme] body #nav .hamburger { flex:0 0 44px;width:44px;min-width:44px;height:44px;padding:10px }
  .mobile-menu { max-height:100dvh;overscroll-behavior:contain }
  .mobile-menu-inner { padding-bottom:max(28px,env(safe-area-inset-bottom));min-width:0 }
  .mobile-menu :is(a,button) { min-height:44px }
  html[data-theme] body #mobileMenu .mobile-accordion.open :is(.mobile-accordion-panel,.mobile-industries-panel) { max-height:none!important;overflow:visible!important }
  body > footer .footer-top { grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem }
  body > footer .footer-brand { grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:3rem }
  body > footer .footer-brand > p { grid-column:1 }
  body > footer .footer-newsletter { grid-column:2;grid-row:2;align-self:start }
  /* Tablet keeps the product illustration alongside the introduction. */
  .sx-hero { padding-top:7rem;padding-bottom:3rem }
  .sx-hero__inner { grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:1.5rem }
  .sx-hero__visual { order:0;height:clamp(260px,38vw,380px) }
  .sx-hero__copy { --type-hero:clamp(2.5rem,5.8vw,4rem) }
}

/* Mid-sized screens get readable two-column cards and shorter media, rather
   than an early switch to an oversized single-column desktop composition. */
@media (min-width:621px) and (max-width:1024px) {
  .sx-cards__grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .sx-card[data-span] { --span:1 }
  .industry-directory__grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .industry-overview__grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem }
  .ab-principles-v4__layout { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2rem }
  .ab-principles-v4__layout > figure { height:420px;position:sticky;top:5rem }
  .ab-why-v4__grid,.ab-partnership-v4__grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem }
  .ab-why-v4__media { grid-column:1/-1;height:360px }
  .ab-intro-v4__media { height:400px }
  .proof-card { grid-template-columns:minmax(0,.45fr) minmax(0,1fr);gap:1.5rem }
  .proof-card footer { grid-column:2 }
}

@media (max-width:620px) {
  :root {
    --type-gutter:clamp(1rem,4.5vw,1.5rem);
    --type-hero:clamp(2.2rem,9.5vw,3.8rem);
    --type-section:clamp(1.9rem,7.5vw,2.8rem);
    --type-subsection:clamp(1.3rem,5vw,1.8rem);
    --type-section-gap:2rem;
  }
  html[data-theme] body #nav .nav-inner { gap:8px }
  main :is(input,select,textarea) { font-size:16px!important }
  main :is(.btn,.industry-button) { min-height:44px;max-width:100%;white-space:normal;text-align:center }
  body > footer { padding:3rem var(--type-gutter) 1.5rem }
  body > footer .footer-top { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1.75rem 1.25rem;margin-bottom:2rem }
  body > footer .footer-brand { display:block }
  body > footer .footer-col:last-child { grid-column:1/-1 }
  body > footer .footer-col a { display:flex;align-items:center;min-height:44px;margin:0;padding-block:.4rem;line-height:1.45 }
  body > footer .footer-newsletter { gap:.4rem }
  body > footer .footer-newsletter input { padding:.7rem .65rem;font-size:16px }
  body > footer .footer-newsletter button { min-height:44px;padding:.7rem .8rem }
  body > footer .footer-social a { min-width:44px;min-height:44px;display:grid;place-items:center }
  /* Lead with the proposition, then a compact illustration. */
  .sx-hero__inner { grid-template-columns:minmax(0,1fr);gap:1.5rem }
  .sx-hero__copy { --type-hero:clamp(2.2rem,9.5vw,3.8rem) }
  .sx-hero__visual { height:clamp(190px,52vw,270px);width:100%;max-width:420px;justify-self:center }
  .sx-hero__lead { margin:1.1rem 0 1.5rem }
  .sx-hero__index { margin-top:1.5rem }
  .sx-actions { gap:.75rem }
  .sx-stack__grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem }
  .sx-tech { flex-wrap:wrap;gap:.65rem;padding:1rem }
  .sx-tech__name { font-size:.9rem }
  .resource-archive :is(.ed-hero--blog,.ed-hero--work) .ed-hero__inner { padding-inline:0;min-height:0 }
  .resource-archive :is(.ed-hero--blog,.ed-hero--work),.faq-page .faq-hero { min-height:0 }
  .faq-page .faq-hero__grid { min-height:0;padding-block:6.5rem 2.5rem }
  .resource-archive .ed-hero__content { padding-inline:0 }
  .cap-hero { min-height:0 }
  .cap-hero__inner { padding-block:6.5rem 3rem }
  .cap-hero h1 { font-size:clamp(2.3rem,10.5vw,4rem) }
  .cap-eyebrow { margin-top:1.75rem }
  .cap-detail__grid { gap:2rem }
  .cap-detail li { grid-template-columns:2rem minmax(0,1fr);gap:.65rem }
  .ab-intro-v4__media,.ab-principles-v4__layout > figure,.ab-why-v4__media { height:auto;aspect-ratio:4/3;min-height:0 }
  .ed-cta { min-height:0 }
  .ed-cta__content { padding-block:4rem }
  .editorial-page .ed-section { padding-block:clamp(3.5rem,12vw,5rem) }
  .editorial-page .ed-hero { height:auto;min-height:min(740px,100svh) }
  .editorial-page .ed-hero__inner { min-height:inherit;padding-top:7rem;padding-bottom:3rem }
  .ed-story__media,.team-leader figure,.culture-bts__main,.proof-trust__visual figure { height:auto;aspect-ratio:4/3 }
  .culture-bts__detail { height:auto;aspect-ratio:3/2 }
  .process-step__visual { height:auto;min-height:240px;aspect-ratio:4/3 }
  .case-library .resource-section-head > p { display:block }
  .industry-index-hero__note { display:block }
  .industry-tile { aspect-ratio:3/4 }
  .industry-tile__body { padding:1rem .75rem }
  .industry-card,.industry-solution { aspect-ratio:auto;min-height:220px }
  .industry-solution h3 { margin-top:2.5rem }
  /* Related services become a native swipe rail with a visible next-card edge.
     Keyboard focus still scrolls each original link into view. */
  .svcx .svcx-related .service-related-grid {
    display:grid;grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:86%;gap:1rem;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:0;padding-bottom:1rem;
    scrollbar-width:thin;align-items:stretch;
  }
  .svcx .svcx-related .service-related-card,
  .svcx .svcx-related .service-related-card:last-child:nth-child(odd) { grid-column:auto!important;min-width:0;scroll-snap-align:start }
  .svcx .svcx-related .service-related-card-media { height:auto;aspect-ratio:16/10 }
  .svcx .svcx-related .service-related-card-body { gap:.65rem;padding:1rem }
  .svcx .svcx-related .service-related-card-arrow { flex-shrink:0 }
  /* Preserve the full service names instead of tiny, truncated modal labels. */
  .hs-sheet .hs-subrow-name { font-size:.9rem;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4 }
  .hs-sheet .hs-subrow { min-height:48px }
  .hs-sheet .hs-sheet-summary { font-size:.9rem;line-height:1.6 }
  .hs-sheet .hs-sheet-cta { min-height:44px;font-size:.8rem }
  .industry-directory__grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media (min-width:380px) and (max-width:620px) {
  .team-roster__grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem }
  .team-life__grid,.process-workflow__grid { grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:180px;gap:.75rem }
  .team-life__grid figure:first-child,.process-workflow__grid figure:first-child { grid-column:1/-1;grid-row:span 2 }
}

@media (max-width:400px) {
  .hs-sheet .hs-sheet-list { grid-template-columns:minmax(0,1fr) }
  .industry-directory__grid { gap:1px }
  .industry-tile__body strong { font-size:1rem }
}

/* Landscape phones retain a comfortable reading size and let content determine
   height. Large minimum hero heights and sticky rails are unhelpful here. */
@media (max-height:500px) and (max-width:1080px) {
  .mobile-menu-inner { padding-top:72px }
  .ed-hero,.ed-hero__inner,.faq-page .faq-hero,.faq-page .faq-hero__grid,.cap-hero { min-height:0!important }
  .cap-hero__inner { padding-block:6rem 2.5rem }
  .sx-hero { padding-block:6rem 2.5rem }
  .industry-expertise__layout > .industry-section-head,.ab-principles-v4__layout > figure { position:static }
}

@media (hover:none) {
  .industry-tile__body { transform:none }
  .industry-tile__body > span { opacity:1 }
  .sx-card__more,.sx-ind__desc { grid-template-rows:1fr;opacity:1;margin-top:.7rem }
}

@media (min-width:1920px) {
  :root { --type-grid-max:1400px;--type-hero:6.5rem;--type-section:4.25rem }
  .sx-hero__visual { max-height:500px }
  .ab-intro-v4__media,.ab-why-v4__media { max-height:680px }
}

@media (prefers-reduced-motion:reduce) {
  .service-related-grid { scroll-behavior:auto!important }
}