/* Conservative responsive layer — fine-tune per-section live on staging. */
.sec img,.post-body img,.final img,article img{max-width:100%;height:auto}
@media (max-width:768px){
  .wrap{padding-left:22px;padding-right:22px}
  /* Align the fixed nav bar's gutter to .wrap so the logo/hamburger line up
     with section content on phones. nav#nav (1,1,0) beats per-page #nav base. */
  nav#nav,nav#nav.scrolled{padding-left:22px;padding-right:22px}
}
@media (max-width:600px){
  .wrap{padding-left:16px;padding-right:16px}
  nav#nav,nav#nav.scrolled{padding-left:16px;padding-right:16px}
  [class*="grid"]:not(.mega-grid){grid-template-columns:1fr !important}
  .cta-row{flex-wrap:wrap}
  .cta-row > *{flex:1 1 100%;text-align:center}
  body{overflow-x:hidden}
}

/* ---- Reduced-motion guard (global; theme shipped without one) ----
   Honour the OS setting without trapping content that relies on entrance
   animations: forwards keyframes jump to their visible end-state instead of
   being disabled, and reveal-on-scroll content is forced visible. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
}

/* ---- Hero TYPE: unified with the homepage hero via the shared :root tokens
   (one source of truth). header.ac-hero out-specifies the per-page .ac-hero base,
   so every page's hero heading/sub/accent now matches the homepage at every width.
   Computed H1 (clamp(2.2rem,1.5rem+2.3vw,4rem)): 390->35px, 768->41.7px,
   1024->47.6px, 1366->55.4px, 1920->64px. ("chips" = the serves-line.) */
header.ac-hero h1{ font-size:var(--hero-h1); line-height:1.12; }
header.ac-hero h1 em{ font-size:var(--hero-em); }
header.ac-hero .sub{ font-size:var(--hero-sub); }
header.ac-hero .servesline{ font-size:clamp(.82rem, 0.74rem + 0.35vw, .92rem); }

/* ---- Hero LAYOUT relaxation (mobile/tablet, <=860) ----
   Relax the forced 100vh so the bottom-aligned hero can't overlap the logo or
   overflow; clear the fixed nav with top padding. (Type is fluid, above.) */
@media (max-width:860px){
  .hero-unit{ min-height:0; }
  header.ac-hero{ min-height:auto; }
  header.ac-hero .inner{ padding-top:108px; padding-bottom:48px; }
  header.ac-hero .crumb{ margin-bottom:18px; }
  header.ac-hero h1{ margin-bottom:16px; }
  header.ac-hero .sub{ margin-bottom:14px; }
  header.ac-hero .servesline{ line-height:1.5; }
  header.ac-hero .cta-row{ margin-top:22px; gap:12px; }
}

/* ---- Homepage hero stat band (2009 / Triple ISO / In-house): reduce on phone
   so it is not oversized at narrow widths. Size only; copy unchanged. ---- */
@media (max-width:600px){
  .hero-meta{ gap:26px; }
  .hero-meta .n{ font-size:1.15rem; }
  .hero-meta .t{ font-size:0.66rem; }

  /* ---- Phone hero (item C): the hero fills the first 100dvh so the stat band
     (.stats) drops BELOW the fold, revealed on scroll. Overrides the <=860
     relaxation above (0,2,0 beats header.ac-hero 0,1,1). Desktop hero-unit
     unchanged. dvh, not vh, so the mobile URL bar doesn't clip it. */
  .hero-unit > .ac-hero{ min-height:100dvh; }

  /* Darken the hero image so the white hero text clears AA. The bottom ~half
     (where the bottom-aligned text sits) reaches >=0.6 overlay alpha, which gives
     >=4.5:1 for #fff even over a pure-white image region. header.ac-hero .scrim
     (0,2,1) out-specifies the per-page .ac-hero .scrim (0,2,0). */
  header.ac-hero .scrim{
    background: linear-gradient(180deg, rgba(17,13,9,0) 0%, rgba(17,13,9,.6) 50%, rgba(17,13,9,.88) 100%);
  }
}

/* ---- Tablet / laptop band (861-1400): type step-down + hero full-bleed ----
   Slots ABOVE the <=860 relaxation and BELOW big screens (>1400); both untouched
   (non-overlapping widths, so this band never co-applies with <=860 or <=600).
   Part A (type): the per-page and service sheets load AFTER this file, so an equal
   specificity would lose; each selector carries a body/extra-class prefix to sit
   strictly above its base (the standing lesson). Bases that live in style.css load
   BEFORE this file and are overridden at equal specificity.
   Part B (hero): mirror the phone rule. Release the shared 100vh so the hero image
   (already inset:0 with object-fit cover) fills its own viewport and the stat band
   reflows below. Only the 18 .hero-unit templates match. Scrim + crop kept as-is. */
@media (min-width:861px) and (max-width:1400px){
  /* Part B: base .hero-unit lives in style.css (loads first), so equal specificity wins */
  .hero-unit{ min-height:0; }
  .hero-unit > .ac-hero{ min-height:100svh; flex:0 0 auto; }   /* 100svh per service.css:15; .stats then flows below */

  /* Part A: (a,b,c) specificity of each selector vs its base noted inline */
  /* Coherent display-h2 heading scale: ceilings preserve the desktop rank
     (final/filter 3.6 > section-head/photoband 3.4 > sec-head 3.2 > proof-text 3.1
     > oli/diff 3.0 > calm 2.8 > domain h3 2.7), roughly 25pct down, with
     equal-desktop selectors clustered to equal in-band clamps. section.final h2
     uses the same 0,1,2 form as style.css:471 so it beats the 27 per-page .final h2
     forks; all others body-prefixed to 0,1,2 to out-specify their 0,1,1 bases. */
  section.final h2{ font-size:clamp(2.05rem, 3.2vw, 2.7rem); }     /* desktop 3.6; wins style.css:471 by load order + .final forks by spec */
  body .filter h2{ font-size:clamp(2.05rem, 3.2vw, 2.7rem); }      /* desktop 3.6 */
  body .section-head h2{ font-size:clamp(2rem, 3vw, 2.6rem); }     /* desktop 3.4 */
  body .photoband h2{ font-size:clamp(2rem, 3vw, 2.6rem); }        /* desktop 3.4 */
  body .sec-head h2{ font-size:clamp(1.95rem, 2.9vw, 2.5rem); }    /* desktop 3.2; re-tuned up from 1.6/2.4/2.2 so it re-clusters (had dropped below the display tier) */
  body .proof-text h2{ font-size:clamp(1.9rem, 2.85vw, 2.45rem); } /* desktop 3.1 */
  body .oli h2{ font-size:clamp(1.9rem, 2.7vw, 2.4rem); }          /* desktop 3.0 */
  body .diff h2{ font-size:clamp(1.9rem, 2.7vw, 2.4rem); }         /* desktop 3.0 */
  body .calm h2{ font-size:clamp(1.8rem, 2.6vw, 2.25rem); }        /* desktop 2.8 (8 of 9 forks); normalizes page-smart 3.0 to the calm tier */
  body .domain h3{ font-size:clamp(1.7rem, 2.45vw, 2.1rem); }      /* desktop 2.7 sub-tier */
  /* Coverage gap-fill: three same-tier mirrors surfaced by the homepage/FAQ audit (2026-07-02). */
  body .faq h2{ font-size:clamp(1.95rem, 2.9vw, 2.5rem); }             /* = sec-head tier (base 3.2); matches .sec-head exactly */
  body .member h2{ font-size:clamp(2rem, 3vw, 2.6rem); }               /* = section-head tier (base 3.4) */
  body .labband .lb-txt h2{ font-size:clamp(1.65rem, 2.35vw, 2.05rem); } /* smallest, just under .domain h3 (base 2.6); 0,2,2 beats base 0,2,1 */
  /* Group A: remaining per-page section-h2 vocab from the full sweep (2026-07-02). Rungs reuse the
     existing ladder by base cap; only base 2.5 and base 2.4 are new (verified strictly rank-preserving). */
  body .stakes h2{ font-size:clamp(1.95rem, 2.9vw, 2.5rem); }      /* base 3.2 */
  body .close h2{ font-size:clamp(1.95rem, 2.9vw, 2.5rem); }       /* base 3.0-3.2 varies, stepped to the larger */
  body .people h2{ font-size:clamp(1.95rem, 2.9vw, 2.5rem); }      /* base 2.6-3.2 varies, stepped to the larger */
  body .next h2{ font-size:clamp(1.9rem, 2.7vw, 2.4rem); }         /* base 3.0 (= oli/diff rung) */
  body .mirror h2{ font-size:clamp(1.7rem, 2.45vw, 2.1rem); }      /* base 2.7 (= domain-h3 rung) */
  body .levels h2{ font-size:clamp(1.7rem, 2.45vw, 2.1rem); }      /* base 2.7 */
  body .data h2{ font-size:clamp(1.65rem, 2.35vw, 2.05rem); }      /* base 2.6 (= labband rung) */
  body .why h2{ font-size:clamp(1.65rem, 2.35vw, 2.05rem); }       /* base 2.6 */
  body .reserved h2{ font-size:clamp(1.65rem, 2.35vw, 2.05rem); }  /* base 2.6 */
  body .reach h2{ font-size:clamp(1.6rem, 2.3vw, 2rem); }          /* base 2.5 (NEW rung) */
  body .group-head h2{ font-size:clamp(1.55rem, 2.2vw, 1.9rem); }  /* base 2.4 (NEW rung, smallest h2) */
  /* Group B: scoped .sec-head variants out-specify body .sec-head h2 (base 0,2,1 > 0,1,2), so mirror at 0,2,2 */
  body .proofs .sec-head h2{ font-size:clamp(1.95rem, 2.9vw, 2.5rem); }    /* base 3.2 */
  body .evidence .sec-head h2{ font-size:clamp(1.8rem, 2.6vw, 2.25rem); }  /* base 2.8 (= calm rung) */
  body .authors .sec-head h2{ font-size:clamp(1.65rem, 2.35vw, 2.05rem); } /* base 2.6 (= labband rung) */
  body .dial .score{ font-size:3.2rem; }                        /* 0,2,1 beats base 0,2,0; 6rem read as 96px on laptop */
  body .cap h3{ font-size:1.35rem; }                            /* 0,1,2 beats 0,1,1 */
  body .svc h3{ font-size:1.15rem; }                            /* 0,1,2 beats 0,1,1 */
  /* Group C: uncovered h3 with base >=1.6rem (fixed rem, monotonic, all kept below the smallest
     h2 rung so no tier inversion; base 1.7 -> 1.35 matches the existing cap h3). */
  body .feature .panel h3{ font-size:1.45rem; }                 /* base 2.1; 0,2,2 beats base 0,2,1 */
  body .specialist h3{ font-size:1.4rem; }                      /* base 1.9 */
  body .layer h3{ font-size:1.35rem; }                          /* base 1.7 (= cap h3) */
  body .proof h3{ font-size:1.35rem; }                          /* base 1.7 (1.55 fork also steps down) */
  body .tie h3{ font-size:1.35rem; }                            /* base 1.7 */
  body .ftest h3{ font-size:1.35rem; }                          /* base 1.7 */
  body .prod-card h3{ font-size:1.35rem; }                      /* base 1.7 */
  body .reason h3{ font-size:1.3rem; }                          /* base 1.65 (1.6 fork too) */
  body .idx-band h3{ font-size:1.3rem; }                        /* base 1.6 */
  body .mult-head h3{ font-size:1.3rem; }                       /* base 1.6 */
  body .next-card h3{ font-size:1.3rem; }                       /* base 1.6 */
  body .lead-prose p{ font-size:1.02rem; }                      /* 0,1,2 beats 0,1,1 */
  body .node .name{ font-size:1.05rem; }                        /* 0,2,1 beats base 0,2,0 */
  .stats .stat .n{ font-size:1.7rem; }                          /* 0,3,0 beats base 0,2,0 (service fixed 2.1rem + page clamp) */
  .oli .num{ font-size:2.6rem; }                                /* 0,2,0 equals base, but base is style.css (loads first): wins */
}