/* Mobile corrections. The cinematic hero's scroll distance and reveal are preserved. */
@media (max-width: 1100px) {
  .nav-wrap > div > nav,
  .nav-wrap .btn-primary,
  .scroll-progress { display: none !important; }
  .nav-wrap > div { gap: 20px; padding-inline: 20px; }
  .nav-wrap .bgh-mark { flex-shrink: 0; }
}

@media (max-width: 980px) {
  .home-page .hero-sticky { padding: 104px 0 44px; }
  .home-page .hero-grid { min-width: 0; min-height: 0; padding: 0 20px 40px !important; }
  .home-page .hero-copy { width: 100%; min-width: 0; }
  .home-page .hero-headline { font-size: clamp(34px, 9vw, 60px) !important; line-height: 1.04; }
  .home-page .hero-sub { margin-top: 20px; font-size: 16px; line-height: 1.5; }
  .home-page .hero-cta { gap: 10px; margin-top: 24px; }
  .home-page .hero-cta .btn { min-height: 44px; padding: 12px 16px; font-size: 11px; letter-spacing: 0.04em; gap: 10px; }
  .home-page .hero-bg { transform: none; inset: 0; will-change: auto; }
  .home-page .hero-video { filter: none; transform: none; }
  .home-page .hero-noise { display: none; }
  .home-page .hero-copy { will-change: opacity, transform; }

  /* Grid children must be allowed to shrink instead of being clipped by overflow:hidden. */
  .brand-hero .brand-hero-content {
    padding: 112px 20px 44px;
    min-height: 100svh;
    height: auto;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  .brand-hero .brand-hero-content > div { min-width: 0; width: 100%; max-width: 100%; }
  .brand-hero .brand-hero-content h1 { font-size: clamp(40px, 11vw, 80px) !important; overflow-wrap: anywhere; }
  .brand-hero .brand-hero-content p { max-width: 100%; font-size: 16px; line-height: 1.55; }
  .brand-hero { height: auto; min-height: 100svh; }
  .brand-hero .brand-hero-content { position: relative; }
  .about-page-redesign .geo-layout { grid-template-columns: minmax(0, 1fr); }
  .about-page-redesign .geo-copy { min-width: 0; }
  .about-page-redesign .geo-copy h2 { overflow-wrap: anywhere; }
  .about-page-redesign .geo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* All factory stations stay reachable with native vertical touch scrolling. */
  .factory-tour { min-height: 0; height: auto; overflow: visible; }
  .factory-tour .tour-track { flex-direction: column; width: 100%; height: auto; transform: none !important; }
  .factory-tour .tour-station { width: 100%; flex: 0 0 auto; min-height: 420px; height: auto; }
  .factory-tour .tour-station > div { padding: 32px 20px; min-width: 0; }
  .factory-tour .tour-station h3 { font-size: clamp(32px, 8vw, 48px); overflow-wrap: anywhere; }

  /* One brief composited entrance, with shorter staggering on phones. */
  .motion-ready .about-animate { transition-duration: 420ms; will-change: auto; }
  .motion-ready .about-animate.about-scale { transform: translate3d(0, 14px, 0); }
  .motion-ready .about-animate.about-scale.is-visible { transform: none; }
  .reveal-up { transition-duration: 450ms; }
  .filmreveal-scene.is-static .filmreveal-clip { will-change: auto; }
  .glance-seal svg { animation: none; }
}

@media (max-width: 600px) and (max-height: 650px) {
  .home-page .hero-sticky { padding-top: 96px; padding-bottom: 20px; }
  .home-page .hero-grid { padding-bottom: 0 !important; }
  .home-page .hero-headline { font-size: 32px !important; }
  .home-page .hero-sub { margin-top: 14px; font-size: 14px; line-height: 1.45; }
  .home-page .hero-cta { margin-top: 18px; gap: 8px; }
  .home-page .hero-cta .btn { padding: 12px 14px; letter-spacing: 0.02em; }
}

@media (max-width: 1100px) {
  .mnav-panel {
    height: 100%;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: calc(76px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
  }
  .mnav-panel > * { flex-shrink: 0; }
  .mnav-links a { padding: 12px 0; font-size: 24px; min-height: 44px; }
  .mnav-cta { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .home-page .hero { min-height: 100svh; }
  .home-page .hero-sticky { position: relative; }
  .home-page .hero-copy, .home-page .hero-headline .word-inner,
  .reveal-up, .motion-ready .about-animate, .bigmask-line > span {
    opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important;
  }
}


/* ==========================================================================
   PHONE SYSTEM (v2)
   One gutter for every page. Bare text, section heads, card edges, buttons and
   the footer all start on the same left line (--m-gutter); text *inside* a card
   is inset by the card's own padding. Sections own no side padding of their own,
   so full-bleed backgrounds stay full-bleed and nothing double-indents.
   Everything below loads last and matches the specificity of the older
   per-section patches in styles.css, which it supersedes on phones.
   ========================================================================== */
:root { --m-gutter: 20px; }

/* Footer links asked for Fraunces, which is never loaded, so they rendered in Times. */
footer .ecosystem-logo { font-family: var(--font-body), Arial, sans-serif; }

@media (max-width: 768px) {
  /* ---- Landing page: scenes carry no side padding, wraps carry the gutter ---- */
  .home-page.home-page :is(
    .pillarsv4-scene, .ecosystem-advantage-scene, .capabilities-scene, .whyhscroll-scene,
    .ecogrid-scene, .certifications-scene, .partners-scene, .leadernew-scene, .inline-contact-scene
  ) { padding-inline: 0 !important; }

  .home-page.home-page :is(
    .pillarsv4-wrap, .ecogrid-wrap, .leadernew-wrap, .certifications-wrap, .partners-wrap,
    .inline-contact-wrap, .ecosystem-advantage-wrap, .glance-wrap
  ) { padding-inline: var(--m-gutter) !important; margin-inline: 0 !important; max-width: none !important; }

  .home-page.home-page .whyhscroll-track { padding-inline: var(--m-gutter) !important; }
  .home-page.home-page .partners-head { padding-inline: 0 !important; }

  /* ---- Footer ---- */
  footer.site-footer { padding-inline: var(--m-gutter); }
}

@media (max-width: 768px) {
  /* ---- Inner pages: same gutter ---- */
  .page-hero { padding-inline: var(--m-gutter) !important; }
  .section-pad.px-8 { padding-inline: var(--m-gutter); }   /* page.css's .section-pad shorthand wiped px-8, leaving text flush to the screen edge */
  .eco-journey .eco-journey-head { padding-inline: var(--m-gutter); margin-inline: 0; max-width: none; }
  .eco-journey .eco-track { padding-inline: var(--m-gutter); }

  /* ---- One reading line: headings and intros that were centred in an otherwise
          left-aligned page now start on the gutter like everything around them ---- */
  .home-page :is(.whyhscroll-head, .certifications-head, .partners-head),
  .home-page :is(.whyhscroll-headline, .whyhscroll-sub, .certifications-head > *, .partners-head > *),
  .about-page-redesign .story-intro, .about-page-redesign .story-intro :is(h2, p),
  .lead-hero :is(h1, p), .lead-hero .about-shell,
  .eco-journey-head, .eco-journey-head h2,
  .section-pad > div > .text-center, .section-pad > div > .text-center > *,
  .ct-hero :is(h1, p, .ct-hero-lede), .ct-hero .about-shell {
    text-align: left !important;
    margin-inline: 0 !important;
  }
  .home-page .whyhscroll-head, .home-page .certifications-head, .home-page .partners-head,
  .section-pad > div > .text-center { align-items: flex-start !important; justify-items: start !important; }
  .section-pad > div > .text-center .eyebrow { display: inline-flex; justify-content: flex-start; }
}

@media (max-width: 768px) {
}

@media (max-width: 768px) {
  /* About > geographic coverage: the 4-up desktop stat strip keeps its 20px side padding
     and dividers when it collapses, which indented every item after the first. Three
     compact columns keep the strip a strip. */
  .about-page-redesign .geo-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }
  .about-page-redesign .geo-stats div { padding: 0 12px; }
  .about-page-redesign .geo-stats div:first-child { padding-left: 0; }
  .about-page-redesign .geo-stats strong { font-size: 30px; }
  .about-page-redesign .geo-stats small { font-size: 13px; }

  /* Private label brief form: 40px padding inside a 350px card left ~230px for fields. */
  form.p-10 { padding: 28px 22px; }
}

@media (max-width: 768px) {
  /* Portraits were capped at 340px, leaving a wider margin on the right than the left. */
  .leader-profile figure, .leader-profile-reverse figure { max-width: none !important; width: 100%; justify-self: stretch !important; }
  .glance-intro { padding-right: 0; }
}

/* Private label hero: .page-hero::after is a z-index:1 gradient meant to sit over a
   background image. This page has no image and its copy wasn't positioned, so the
   gradient painted over the headline and dimmed it. */
.page-hero > div { position: relative; z-index: 2; }

@media (max-width: 768px) {
  .ct-hero .ct-hero-lede { margin-top: 18px !important; }
}


/* ==========================================================================
   PHONE MOTION
   Keep animation to opacity + transform (compositor-only), short, and without
   work that repaints content behind it on every scroll frame.
   ========================================================================== */
@media (max-width: 980px) {
  /* Landing-page reveals: `transition: all 1s` animated every property for a full second,
     and mobile.css's older duration override never won because the transition lives on .in. */
  .reveal-up { transform: translate3d(0, 22px, 0); }
  .reveal-up.in {
    transform: translate3d(0, 0, 0);
    transition: opacity 560ms var(--ease-out-soft), transform 560ms var(--ease-out-soft);
  }

  /* Inner-page reveals: stacked single-column content never benefits from a per-sibling
     stagger; it only made each block arrive up to ~360ms after it was already on screen. */
  .motion-ready .about-animate { transition-delay: 0ms !important; }

  /* The fixed bar re-blurred 22px of whatever scrolled under it on every frame. A near-opaque
     fill reads the same and costs nothing. */
  .nav-wrap { transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
  .nav-wrap.scrolled:not(.on-dark) {
    background: rgba(245, 239, 230, 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (max-width: 980px) {
  /* The stylesheet's resting blur(14px) on the hero copy was only ever cleared by GSAP
     animating it to 0; phones no longer animate a filter, so remove it outright. */
  .home-page .hero-copy { filter: none !important; }
}

@media (max-width: 768px) {
  /* Solutions sized its column as 90vw, so the gutter drifted with the device (16px at 320,
     21px at 414). Pin it to the shared gutter. */
  .sol-hero-inner, .sol-cap-inner, .sol-why-inner, .sol-close-inner {
    width: auto;
    margin-inline: var(--m-gutter);
  }
}

@media (max-width: 768px) {
  /* Hero headline -> lede gap collapsed to ~0 on the About and Products pages. */
  .about-hero .hero-copy h1 + .hero-lede,
  .biz-hero h1 + .biz-lede { margin-top: 18px; }
}

@media (max-width: 1100px) {
  .mnav-panel { padding-inline: var(--m-gutter); }
}

@media (min-width: 768px) and (max-width: 1099px) {
  /* Tailwind's md: switches the footer to 4 columns at 768px, which is wider than an iPad
     portrait screen and pushed the whole page ~14-24px past the viewport. */
  .site-footer .grid.md\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* "Our foundation" facts: icon, label and value are left-aligned on the heading's line
   (they were centred inside their columns, so nothing shared an edge with the title). */
.glance-fact { align-items: flex-start; text-align: left; }
.glance-fact .glance-ico { justify-items: start; }

@media (max-width: 768px) {
  /* Vision / Purpose / Mission cards: 34-42px of padding inside a 350px card left a narrow
     text column. Keep the card edge on the gutter and inset its content by 20px. */
  .about-page-redesign .purpose-card { padding: 24px 20px !important; }
  .about-page-redesign .purpose-card .card-icon { left: 20px !important; top: 24px !important; width: 52px !important; height: 52px !important; }
  .about-page-redesign .purpose-label { margin-left: 68px !important; min-height: 52px !important; }
  .about-page-redesign .purpose-card > a { left: 20px; }
}