/* ============================================================================
   D-2 SHARED COMPONENTS — extracted from the approved homepage (Checkpoint 2 WU0)
   so all pages reuse one system. Paths are CSS-relative (fonts/ resolves under
   _shared/ regardless of page depth). See COMPONENT_INVENTORY.md.
   Load order: base.css → components.css (components win where they overlap).
   ============================================================================ */

@font-face{ font-family:'Museo Sans Rounded'; src:url('fonts/museo-100.woff2') format('woff2'); font-weight:100; font-style:normal; font-display:swap; }
@font-face{ font-family:'Museo Sans Rounded'; src:url('fonts/museo-300.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Museo Sans Rounded'; src:url('fonts/museo-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Museo Sans Rounded'; src:url('fonts/museo-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Museo Sans Rounded'; src:url('fonts/museo-900.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
/* Metric-matched fallback behind Museo Sans Rounded — eliminates font-swap CLS by giving the fallback
   (Arial) Museo's line-box (ascent 94% / descent 26% / line-gap 0%) + per-weight width BEFORE the webfont
   loads. Affects only the pre-swap frame; once Museo loads it renders unchanged. Metrics measured from
   Museo 2026-06-24 (fontBoundingBox 940/260 at 1000em; size-adjust = museo/arial advance per weight). */
@font-face{ font-family:'Museo Fallback'; src:local('Arial'); font-weight:300; ascent-override:94%; descent-override:26%; line-gap-override:0%; size-adjust:100%; }
@font-face{ font-family:'Museo Fallback'; src:local('Arial'); font-weight:500; ascent-override:94%; descent-override:26%; line-gap-override:0%; size-adjust:101.49%; }
@font-face{ font-family:'Museo Fallback'; src:local('Arial Bold'),local('Arial'); font-weight:700; ascent-override:94%; descent-override:26%; line-gap-override:0%; size-adjust:96.64%; }
@font-face{ font-family:'Museo Fallback'; src:local('Arial Bold'),local('Arial'); font-weight:900; ascent-override:94%; descent-override:26%; line-gap-override:0%; size-adjust:98.85%; }

/* ============================================================================
   Direction D-2 — "The Right Choice, Unboxed"
   The AMBER THREAD: originates BEHIND the hero headline's white period, draws
   DOWN as ONE unbroken path, constructs every charcoal element, SPLITS into a
   two-sided inset frame around the disciplines board and rejoins, and the page
   is BOOKENDED by mirrored charcoal trapezoids (left at THE EDGE, right at the
   vouch). One cursor glow stays attached across every section.
   ============================================================================ */
:root{
  --red:#ED202D; --offwhite:#F4F1EE;
  --charcoal:#323132; --charcoal-2:#272528; --amber:var(--human-amber);
  --ink-dot:#1a1a1a;
}
body{ background:var(--charcoal); font-family:'Museo Sans Rounded','Museo Fallback','Trebuchet MS','Lucida Grande',Arial,sans-serif; }
.vh{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

.stage{ position:relative; overflow:hidden; width:100%; min-height:100vh; scroll-margin-top:72px; }
.red-field{ background:var(--red); }

.display{ font-weight:900; line-height:.86; letter-spacing:-.026em; }
.colossal{ font-size:clamp(3rem,9vw,9rem); }
.huge{ font-size:clamp(2.4rem,7vw,6.5rem); }
.num{ font-family:inherit; font-variant-numeric:tabular-nums; }
.ghostnum{ font-weight:100; }
.sub-red{ color:#fff; font-weight:700; font-size:clamp(1.18rem,1.7vw,1.55rem); line-height:1.32; }
.tiny{ font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:3px solid #fff; outline-offset:3px; border-radius:2px; }
.cta-solid:focus-visible{ outline-color:var(--charcoal); }

.anim .stamp, .anim [data-par]{ opacity:0; }
.stamp{ will-change:transform; }
[data-par]{ will-change:transform; }

.cta-solid{ display:inline-block; background:#fff; color:var(--charcoal); font-weight:700; text-decoration:none; }
.cta-solid:hover{ background:var(--offwhite); }

/* ---- AMBER THREAD (decorative, non-text) — main spine + the disciplines mirror branch ---- */
.thread{ position:absolute; top:0; left:0; z-index:0; pointer-events:none; overflow:hidden; }
.thread-line{ fill:none; stroke:var(--amber); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.thread-dot{ fill:var(--amber); }

/* ---- CONSTRUCTED element: transparent -> amber outline draws -> fills charcoal -> content ---- */
.cbox{ position:relative; z-index:1; background:transparent; }
.cbox .cfill{ position:absolute; inset:0; z-index:0; background:var(--charcoal); opacity:1; transition:opacity .3s ease; }
.cbox .bx{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:visible; }
.cbox .bx rect, .cbox .bx path{ fill:none; stroke:var(--amber); stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:0; }
.cbox > .cbody, .cbox > .cbody *{ position:relative; z-index:2; }
.anim .cbox .cfill{ opacity:0; }
.anim .cbox .bx rect, .anim .cbox .bx path{ stroke-dashoffset:1; }
.anim .cbox .creveal{ opacity:0; }

/* ---- page-wide cursor GLOW: top layer (z90, under the nav only) so it stays attached
        over EVERY section incl. cards; soft-light + low opacity keeps text AA under it. ---- */
.cursor-glow{ position:fixed; left:0; top:0; z-index:90; width:50vmax; height:50vmax;
  margin-left:-25vmax; margin-top:-25vmax; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.35), rgba(255,255,255,0) 72%);
  mix-blend-mode:soft-light; opacity:0; transition:opacity .45s ease; will-change:transform;
  transform:translate3d(var(--gx,-9999px), var(--gy,-9999px), 0); }
.cursor-glow.on{ opacity:1; }

/* Beat 0 — header */
body .site-nav{ background:transparent; border-bottom-color:transparent; padding:1.05rem 5vw; gap:1.1rem; z-index:100; }
/* CANONICAL glass nav — the single scrolled-state winner. Consolidates the three competing rules
   (base.css geometry + this rule + the flagships' page-local override). The BLUR is the locked glass
   character; the .72 black pour is AA-tuned over real footage (dark, bright-white, mid-tone) — the
   bright-case binding is JRM's white WELCOME band (white-behind composites to rgb(71) → #fff links
   9.29:1, vs the rejected .25 at 4.93:1). Replaces the opaque grey site-wide. V5 Phase A 2026-06-24. */
body .site-nav.scrolled{ background:rgba(0,0,0,.72); border-bottom-color:rgba(255,255,255,.10); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ body .site-nav.scrolled{ background:rgba(0,0,0,.82); } }
.site-nav .wordmark .glyphs path{ fill:#fff; }
body .site-nav .nav-home{ opacity:0; pointer-events:none; transition:opacity .35s ease; }
body .site-nav.nav-wm-on .nav-home{ opacity:1; pointer-events:auto; }
body .nav-links a{ color:#fff; opacity:1; font-size:1.18rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
/* link hover: keep FULL-opacity white (faded white-on-red drops below AA) — underline cue */
body .nav-links a:not(.nav-cta):hover, body .nav-links a:not(.nav-cta):focus-visible{ color:#fff; opacity:1; text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:2px; }
body .nav-links a.nav-cta{ background:#fff; color:var(--charcoal); border-radius:0; font-size:1.18rem; font-weight:700; padding:.5em 1.05em; letter-spacing:.01em; text-transform:none; }
body .site-nav.scrolled .nav-links a.nav-cta{ background:var(--red); color:#fff; }
/* CTA hover is a deliberate, perceptible change in BOTH states and never collides label↔fill:
   non-sticky (rest white/charcoal) -> LIGHTS UP red with a WHITE label; sticky (rest red/white)
   -> brightens. White-on-red is AA-large at 1.18rem/700. */
body .site-nav:not(.scrolled) .nav-links a.nav-cta:hover{ background:var(--red); color:#fff; opacity:1; filter:none; }
body .site-nav.scrolled .nav-links a.nav-cta:hover{ background:var(--red); color:#fff; opacity:1; filter:brightness(1.12); }
@media (max-width:1040px){ body .nav-links a:not(.nav-cta){ display:none; } }
/* hold the CTA at 1.18rem (18.88px) on small screens: scrolled it is white-on-red,
   AA only as LARGE text — trim padding (not size) to fit. */
@media (max-width:560px){ body .nav-links a.nav-cta{ font-size:1.18rem; padding:.42em .8em; } }
@media (prefers-reduced-motion: reduce){ body .site-nav .nav-home{ transition:none; } }

/* ── V5 long-take rail (shared spine: scroll-progress + playback scrub = ONE rail). Consumed via
   DV.initLongTake (thread-origin.js). Namespaced .lt-* so it never collides with the frozen flagships'
   inline .spine. .lt-scroller height is page-local (set per page to the reel length). 2026-06-24. ── */
.lt-film{ position:sticky; top:0; height:100vh; overflow:hidden; }
.lt-spine{ position:fixed; right:clamp(16px,3.4vw,48px); top:15vh; bottom:13vh; width:2px; z-index:60; }
.lt-spine .lt-hit{ position:absolute; left:-13px; right:-13px; top:-10px; bottom:-10px; cursor:pointer; }
.lt-spine .lt-track{ position:absolute; inset:0; background:rgba(212,163,116,.20); }
.lt-spine .lt-fill{ position:absolute; left:0; top:0; width:100%; height:0; background:var(--amber); }
.lt-spine .lt-seed{ position:absolute; left:50%; top:0; width:12px; height:12px; border-radius:50%; background:var(--amber); transform:translate(-50%,-50%); box-shadow:0 0 0 4px rgba(212,163,116,.16); }
.lt-spine .lt-dot{ position:absolute; left:50%; top:0; width:15px; height:15px; border-radius:50%; background:var(--amber); transform:translate(-50%,-50%); box-shadow:0 0 0 5px rgba(212,163,116,.16); cursor:grab; }
.lt-spine .lt-toggle{ position:absolute; left:50%; top:-42px; transform:translateX(-50%); width:38px; height:38px; border-radius:50%; border:1px solid rgba(212,163,116,.4); background:rgba(22,21,26,.72); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .2s,background .2s; }
.lt-spine .lt-toggle:hover,.lt-spine .lt-toggle:focus-visible{ border-color:var(--amber); background:rgba(22,21,26,.92); outline:none; }
.lt-spine .lt-toggle .lt-pa{ display:none; } .lt-spine.playing .lt-toggle .lt-pl{ display:none; } .lt-spine.playing .lt-toggle .lt-pa{ display:inline; }
@media (max-width:740px){ .lt-spine{ right:12px; } }
@media (prefers-reduced-motion:reduce){ .lt-spine .lt-toggle{ display:none; } }
/* Nav wordmark DRAW-IN — INNER PAGES ONLY (added by DV.injectNav({wordmarkOnLoad:true}) / DV.drawNavWordmark()).
   The homepage never gets `.draw-in` (its hero wordmark carries the mark), so these rules are inert there. */
@keyframes navWmDraw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
.nav-home.draw-in .pen-sweep{ stroke-dashoffset:1; animation:navWmDraw 1.5s cubic-bezier(.45,0,.15,1) .15s forwards; }
@media (prefers-reduced-motion: reduce){ .nav-home.draw-in .pen-sweep{ animation:none !important; stroke-dashoffset:0; } }

/* Beat 1 — HERO. The amber thread originates BEHIND the white period (.hp). */
.hero{ display:block; }
.hero .wm-stage{ position:absolute; z-index:3; top:14vh; left:5vw; width:min(320px,48vw); }
.hero .wm-stage .wordmark{ width:100%; overflow:visible; }
.hero .wm-stage .glyphs path{ fill:#fff; }
.hero .wm-stage .nib{ fill:var(--ink-dot); }
.hero h1{ position:absolute; z-index:2; top:31%; left:5vw; width:92vw; color:#fff; }
.hero h1 .l1{ display:block; }
.hero h1 .l2{ display:block; margin-left:.7em; }
/* the period IS the thread's seed — the amber line grows straight out of its bottom; no
   separate origin dot. Invisible at rest (line undrawn); emerges as the line draws on scroll. */
.hero h1 .hp{ position:relative; z-index:2; color:#fff; }
.hero .sub{ position:absolute; z-index:3; right:5vw; bottom:17vh; max-width:30ch; text-align:right; }
.hero .cue{ position:absolute; z-index:3; left:5vw; bottom:6vh; color:#fff; font-weight:700; font-size:1.2rem; letter-spacing:.04em; display:inline-flex; align-items:center; gap:.6em; }
.hero .cue .bar{ width:42px; height:4px; background:var(--amber); }

/* Inner-page hero — pages without the animated hero wordmark (Capabilities/Partnerships/Work/About):
   content as a left-aligned stack + a staggered .stamp reveal (motion). Reduced-motion shows it
   static (no .anim). Graduated from Capabilities route-local to shared baseline. */
.hero.inner{ position:relative; display:flex; flex-direction:column; justify-content:center; padding:15vh 5vw 11vh; min-height:84vh; }
.hero.inner h1, .hero.inner .sub, .hero.inner .cue{ position:static; }
.hero.inner h1{ width:auto; max-width:17ch; } .hero.inner .l2{ margin-left:0; }
.hero.inner .sub{ text-align:left; max-width:46ch; margin-top:1.9rem; } .hero.inner .cue{ margin-top:2.4rem; }
.hero.inner .stamp{ transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1); will-change:transform; }
.anim .hero.inner .stamp{ transform:translateY(30px); }
.hero.inner .sub.stamp{ transition-delay:.08s; } .hero.inner .cue.stamp{ transition-delay:.16s; }
.hero.inner.revealed .stamp{ opacity:1; transform:none; }

/* Beat 2 — THE EDGE (left-anchored charcoal trapezoid; thread traces its angled clip). */
.edge{ background:var(--red); display:flex; align-items:center; }
.edge .shard{ position:relative; z-index:2; width:min(92vw,1180px); padding:11vh 7vw 11vh 5vw;
  background:transparent; clip-path:polygon(0 0, 100% 0, calc(100% - 9vw) 100%, 0 100%); }
.edge .shard .cfill{ background:var(--charcoal); }
.edge .kick{ color:var(--offwhite); opacity:.6; }
.edge .big{ margin-top:1.3rem; color:var(--offwhite); max-width:15ch; }
.edge .big .amber{ color:var(--amber); }
.edge .note{ margin-top:2.2rem; max-width:46ch; color:var(--offwhite); opacity:.85; font-weight:300; line-height:1.6; font-size:clamp(1rem,1.3vw,1.16rem); }
.edge .ghost{ position:absolute; z-index:1; right:-2vw; top:50%; color:#fff; opacity:.10; font-weight:100; font-size:clamp(8rem,26vw,22rem); letter-spacing:-.04em; pointer-events:none; }

/* Beat 3 — WORK as evidence. Descending diagonal: 2025 -> 2024 -> 2023 reads top to
   bottom so the thread flows chronologically (junction 2024->2023 visibly connects). */
.work{ padding:13vh 0 13vh; min-height:auto; }
.work .whead{ position:relative; z-index:3; color:#fff; padding:0 5vw; max-width:18ch; }
.work .wsub{ position:relative; z-index:3; color:#fff; font-weight:700; font-size:1.2rem; padding:.8rem 5vw 0; max-width:40ch; }
.reel{ position:relative; margin-top:8vh; padding:0 5vw; display:grid; grid-template-columns:repeat(12,1fr); gap:2.4rem 2vw; }
.unit{ text-decoration:none; display:block; }
.unit.u1{ grid-column:1 / span 6; grid-row:1; }
.unit.u2{ grid-column:7 / span 6; grid-row:2; }
.unit.u3{ grid-column:2 / span 6; grid-row:3; }
.unit .cbody{ display:block; padding:1.4rem 1.4rem 1.7rem; }
/* real thumbnail in the 4:3 slot (top-aligned to show the homepage hero); the year
   is a small AA-safe badge overlaid on it (white on solid charcoal = 12.95:1). */
.unit .wc-shot{ display:block; position:relative; aspect-ratio:4/3; margin:1.1rem 1.1rem 0; background:var(--charcoal-2); outline:1px solid rgba(212,163,116,.35); outline-offset:-6px; overflow:hidden; }
.unit .wc-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; display:block; }
.unit .wc-year{ position:absolute; z-index:2; left:0; bottom:0; color:#fff; background:var(--charcoal); font-weight:700; font-size:.88rem; letter-spacing:.06em; padding:.34em .7em; line-height:1; }
/* ---- thumbnail RESTING treatment unifies the three into a curated set; hover (pointer) or
   in-view (.inview, touch) BLOOMS to full color. Swap data-thumb-treat on <body>:
   grayscale | charcoal-duotone (default) | red-duotone | full-color. Overlay sits UNDER the
   year badge (z2) -> badge AA (white on solid charcoal) holds in every treatment. ---- */
.unit .wc-img{ transition:filter .5s ease; }
.unit .wc-shot::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .5s ease; }
[data-thumb-treat="grayscale"] .wc-img{ filter:grayscale(1) contrast(1.03); }
[data-thumb-treat="charcoal-duotone"] .wc-img{ filter:grayscale(1) contrast(1.08) brightness(.9); }
[data-thumb-treat="charcoal-duotone"] .wc-shot::after{ background:var(--charcoal); mix-blend-mode:multiply; opacity:.42; }
[data-thumb-treat="red-duotone"] .wc-img{ filter:grayscale(1) contrast(1.1); }
[data-thumb-treat="red-duotone"] .wc-shot::after{ background:var(--red); mix-blend-mode:screen; opacity:.4; }
.unit:hover .wc-img, .unit.inview .wc-img{ filter:none; }
.unit:hover .wc-shot::after, .unit.inview .wc-shot::after{ opacity:0; }
@media (prefers-reduced-motion: reduce){ .unit .wc-img, .unit .wc-shot::after{ transition:none; } }
.unit .nm{ display:block; margin-top:.2rem; color:var(--offwhite); font-size:clamp(1.4rem,2.2vw,1.95rem); font-weight:700; line-height:1.06; }
.unit .sc{ display:block; margin-top:.5rem; color:var(--amber); opacity:.95; }
.unit .hk{ display:block; margin-top:.8rem; color:var(--offwhite); opacity:.85; font-weight:300; line-height:1.55; font-size:.98rem; }
.unit:hover .bx rect, .unit:focus-visible .bx rect{ stroke-width:2.5; }
.unit:hover .nm{ color:#fff; }
.work .wmore{ position:relative; z-index:3; display:inline-block; margin:5vh 5vw 0; color:#fff; font-size:1.2rem; font-weight:700; text-decoration:none; border-bottom:4px solid var(--amber); padding-bottom:.12em; }

/* Beat 4 — SIX DISCIPLINES (charcoal). The thread SPLITS into an inset amber frame
   down both sides and rejoins at bottom-centre. Reduced-motion: static frame. */
.depths{ background:var(--charcoal-2); padding:14vh 0; min-height:auto; }
.depths .dframe{ display:none; position:absolute; left:28px; right:28px; top:28px; bottom:28px; z-index:0; pointer-events:none; border-left:1.5px solid var(--amber); border-right:1.5px solid var(--amber); }
.depths .dhead{ position:relative; z-index:1; color:var(--offwhite); padding:0 5vw; margin-bottom:5vh; }
.mani{ position:relative; z-index:1; }
.mrow{ position:relative; display:block; padding:2.1rem 6vw; text-decoration:none; border-top:1px solid rgba(244,241,238,.12); }
.mani .mrow:last-child{ border-bottom:1px solid rgba(244,241,238,.12); }
.mrow .gn{ position:absolute; z-index:0; top:50%; transform:translateY(-50%); color:#fff; opacity:.05; font-weight:100; font-size:clamp(5rem,14vw,13rem); line-height:.7; pointer-events:none; }
.mrow .cn{ position:relative; z-index:1; color:var(--offwhite); font-weight:700; font-size:clamp(1.7rem,4vw,3rem); line-height:1.04; letter-spacing:-.016em; }
.mrow .cn .depth{ margin-left:.6em; color:var(--amber); font-weight:700; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; vertical-align:middle; }
.mrow .claim{ position:relative; z-index:1; display:block; margin-top:.7rem; color:var(--offwhite); opacity:.78; font-weight:300; font-size:clamp(.98rem,1.3vw,1.15rem); line-height:1.5; max-width:54ch; }
.mrow.r1{ padding-left:5vw; }   .mrow.r1 .gn{ right:-2vw; left:auto; }
.mrow.r2{ padding-left:22vw; }  .mrow.r2 .gn{ left:-3vw; right:auto; }
.mrow.r3{ padding-left:9vw; }   .mrow.r3 .gn{ right:-2vw; left:auto; }
.mrow.r4{ padding-left:26vw; }  .mrow.r4 .gn{ left:-3vw; right:auto; }
.mrow.r5{ padding-left:6vw; }   .mrow.r5 .gn{ right:-2vw; left:auto; }
.mrow.r6{ padding-left:22vw; }  .mrow.r6 .gn{ left:-3vw; right:auto; }
.mrow:hover .cn, .mrow:focus-visible .cn{ color:#fff; outline:none; }
.depths .dmore{ position:relative; z-index:1; display:inline-block; margin:5vh 5vw 0; color:var(--offwhite); font-size:1.05rem; font-weight:700; text-decoration:none; border-bottom:3px solid var(--amber); padding-bottom:.1em; }
/* .dframe retired — under reduced-motion the real thread draws the disciplines frame static */

/* Beat 5 — ABSORPTION (the fork: two CTA paths + proof). */
.absorb{ display:block; min-height:auto; padding:13vh 0 12vh; }
.absorb .averdict{ position:relative; z-index:2; color:#fff; padding:0 5vw; width:90vw; max-width:24ch; }
.atrio{ position:relative; margin-top:7vh; padding:0 5vw; display:grid; grid-template-columns:repeat(12,1fr); gap:2rem 2.2vw; align-items:stretch; }
.absorb .ac{ text-decoration:none; display:block; }
.absorb .ac .cbody{ display:flex; flex-direction:column; gap:.4rem; padding:1.7rem 1.6rem; height:100%; }
.absorb .ac.direct{ grid-column:1 / span 6; }
.absorb .ac.partner{ grid-column:7 / span 6; }
.absorb .ac.valid{ grid-column:1 / span 12; margin-top:1.2rem; }
.ac .bq{ display:inline-flex; align-items:center; gap:.5em; color:var(--amber); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }
.ac .bq::before{ content:""; width:.7em; height:.7em; flex:none; background:var(--amber); }
/* two CO-EQUAL red-button CTAs (same answer: both lead to Deevoted) — but each persona owns its
   identity: direct (brand-build) = RED top-keyline + red marker + off-white eyebrow; partner
   (team-extend) = AMBER top-keyline + amber marker + amber eyebrow (the human thread). */
.absorb .ac.direct .cbody{ border-top:4px solid var(--red); }
.absorb .ac.partner .cbody{ border-top:4px solid var(--amber); }
.absorb .ac.direct .bq{ color:var(--offwhite); }
.absorb .ac.direct .bq::before{ background:var(--red); }
.ac .cgo{ align-self:flex-start; margin-top:1.2rem; display:inline-flex; align-items:center; gap:.6em; background:var(--red); color:#fff; font-weight:700; font-size:1.2rem; padding:.7em 1.25em; line-height:1.1; transition:transform .2s ease, filter .2s ease; }
.ac .cgo .arr{ transition:transform .2s ease; }
.ac:hover .cgo, .ac:focus-visible .cgo{ filter:brightness(1.1); transform:translateY(-3px); }
.ac:hover .cgo .arr, .ac:focus-visible .cgo .arr{ transform:translateX(5px); }
.ac:hover .bx rect, .ac:focus-visible .bx rect{ stroke-width:2.5; }
.ac.valid .bl{ color:var(--offwhite); font-weight:300; font-size:clamp(1.05rem,1.5vw,1.22rem); line-height:1.5; }
.ac.valid .bl b{ font-weight:700; color:#fff; }
/* the agency/partner-persona callout reads as its OWN element: darker charcoal-2
   surface + a bold amber human-thread keyline down the left edge (amber/charcoal-2
   6.72:1; off-white/charcoal-2 13.5:1 — AA fine), set apart from the two red-CTA paths. */
.absorb .ac.valid .cfill{ background:var(--charcoal-2); }
.absorb .ac.valid .cbody{ border-left:5px solid var(--amber); padding-left:1.7rem; }
.absorb .ac.valid .bq{ font-size:.84rem; }

/* Beat 6 — THE VOUCH. A RIGHT-anchored charcoal trapezoid that MIRRORS the EDGE
   shard (bookends the page); thread-constructed like every charcoal element. */
.vouch{ display:flex; justify-content:flex-end; align-items:center; padding:13vh 0 12vh; }
.vouch .qmark{ position:absolute; z-index:1; top:3vh; left:2vw; color:#fff; opacity:.15; font-weight:100; font-size:clamp(12rem,28vw,26rem); line-height:.7; pointer-events:none; }
.vshard{ position:relative; z-index:2; width:min(92vw,1180px); padding:12vh 5vw 12vh 16vw;
  background:transparent; clip-path:polygon(9vw 0, 100% 0, 100% 100%, 0 100%); }
.vshard .cfill{ background:var(--charcoal); }
.vouch blockquote{ position:relative; z-index:2; max-width:46ch; }
.vouch .vq{ color:#fff; font-weight:900; font-size:clamp(1.9rem,4.2vw,3.4rem); line-height:1.1; letter-spacing:-.016em; }
.vouch .src{ display:inline-block; margin-top:2.2rem; background:var(--charcoal-2); color:var(--offwhite); padding:.7rem 1.1rem; font-size:.86rem; font-weight:700; }

/* Beat 7 — THE VERDICT (red), tight to the vouch. */
.verdict{ display:block; min-height:64vh; padding:6vh 0 10vh; }
.verdict h2{ position:relative; z-index:2; padding:0 5vw; width:90vw; color:#fff; }
.verdict h2 .vl1, .verdict h2 .vl2{ display:block; }    /* control the break — no "it." widow */
.verdict .amark{ position:relative; z-index:2; display:block; margin:2.6rem 5vw 0; width:84px; height:6px; background:var(--amber); }
.verdict .vgo{ position:relative; z-index:2; display:inline-block; margin:1.8rem 5vw 0; font-size:1.3rem; padding:.85em 1.6em; }

/* RESPONSIVE */
@media (max-width:820px){
  .stage{ min-height:auto; }
  .hero{ display:block; padding:13vh 6vw 9vh; min-height:auto; }
  .hero .wm-stage, .hero h1, .hero .sub, .hero .cue{ position:static; }
  .hero .wm-stage{ width:min(280px,56vw); margin-bottom:2.2rem; }
  .hero h1{ width:auto; }
  .hero h1 .l2{ margin-left:0; }
  .hero .sub{ text-align:left; max-width:34ch; margin-top:1.8rem; }
  .hero .cue{ margin-top:2rem; }
  .edge{ display:block; }
  .edge .shard{ width:100%; clip-path:none; padding:12vh 6vw; }
  .edge .ghost{ display:none; }
  .work{ padding:11vh 0 12vh; }
  .reel{ display:flex; flex-direction:column; gap:3rem; }
  .unit.u1,.unit.u2,.unit.u3{ margin-top:0; }
  .unit .wc-shot{ aspect-ratio:16/9; }
  .depths{ padding:12vh 0; }
  .depths .dframe{ left:14px; right:14px; }
  .mrow, .mrow.r1,.mrow.r2,.mrow.r3,.mrow.r4,.mrow.r5,.mrow.r6{ padding-left:6vw; padding-right:6vw; }
  .mrow .gn{ left:auto !important; right:6vw !important; opacity:.05; }
  .absorb{ padding:11vh 0 12vh; }
  .atrio{ display:flex; flex-direction:column; gap:1.6rem; }
  .absorb .ac.direct,.absorb .ac.partner,.absorb .ac.valid{ margin-top:0; }
  .absorb .averdict{ width:auto; }
  .vouch{ display:block; padding:12vh 6vw 10vh; }
  .vshard{ width:100%; clip-path:none; padding:12vh 6vw; }
  .vouch .qmark{ font-size:clamp(10rem,36vw,15rem); }
  .vouch blockquote{ max-width:none; }
  .verdict{ padding:4vh 0 11vh; }
  .verdict h2{ width:auto; }
}
@media (max-width:480px){
  .colossal{ font-size:clamp(2.7rem,13vw,4.4rem); }
  .huge{ font-size:clamp(2.2rem,10vw,3.4rem); }
}
@media (prefers-reduced-motion: reduce){
  .cursor-glow{ display:none !important; }   /* the THREAD stays present, drawn static (no scroll draw, no dot) */
}