/* ============================================================
   Takshak Parmar — portfolio design system
   Palette: sumi ink on near-black, vermilion accent
   ============================================================ */


/* ================================================================
   TYPE SCALE — 2026-09-25. One scale for the whole site.
   Every font-size in this file now resolves to one of these steps.
   Fixed steps for reading sizes, fluid steps for headings.
   label 11 (uppercase, tracked) · caption 13 · small 15 · body 17 · lede 20
   h4 20→24 · h3 26→38 · h2 34→58 · h1 44→88 · display 56→120
   ================================================================ */
:root {
  --t-label: 11px;
  --t-caption: 13px;
  --t-small: 15px;
  --t-body: 17px;
  --t-lede: 20px;
  --t-h4: clamp(20px, 1.8vw, 24px);
  --t-h3: clamp(26px, 2.9vw, 38px);
  --t-h2: clamp(34px, 4.3vw, 58px);
  --t-h1: clamp(44px, 6.3vw, 88px);
  --t-display: clamp(56px, 8.6vw, 120px);
}

/* ---------- FONTS — self-hosted, single origin ----------
   The site used to load two cross-origin font stylesheets. Measured live on
   2026-07-31 they were the SLOWEST resources on the site — 495ms and 411ms,
   against a next-slowest of 169ms — for about 1KB of transfer between them.
   The time was connection setup, and it was render-blocking. Worse, those
   stylesheets only THEN revealed the .woff2 URLs on a third and fourth origin:
   two sequential cross-origin round trips before text could paint.

   Everything now comes from this origin. No DNS, no TLS handshake, no third
   party, nothing to rotate or go offline, and no request to Google or Fontshare
   from a visitor's browser — which is also the privacy-correct answer for a
   site that deliberately ships no cookie banner.

   These files are subset and re-compressed from the vendors' own originals:
     - latin-1, plus EXACTLY the higher codepoints this site actually uses,
       derived by scanning every page rather than guessed. That matters: the
       stock Google latin subset omits U+2192, so the 89 arrow glyphs on this
       site were silently falling back to a system font. They render in Inter
       now.
     - Inter is instanced to opsz=14 and clamped to the 300-600 weight range
       this site uses, so ONE variable file serves all four weights at 37KB —
       smaller than the 47KB Google served, with better coverage.
     - hinting, DSIG/MATH/SVG tables and unused layout features dropped.

   Total: 95KB across five files, from one origin, down from 130KB across two.

   To regenerate after a design change that needs new glyphs, re-run pyftsubset
   against the vendor originals with the unicode list recorded in CHANGELOG
   v0.147. Licences for all three families sit beside the fonts. */

/* General Sans — display face */
@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/general-sans-regular-latin.woff2") format("woff2");
}
@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/general-sans-medium-latin.woff2") format("woff2");
}
@font-face {
  font-family: "General Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/general-sans-semibold-latin.woff2") format("woff2");
}

/* Inter — body face. One variable file covers 300-600. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/inter-variable-latin.woff2") format("woff2");
}

/* Instrument Serif — italic accent words only */
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
}

:root {
  --canvas: #080809;
  --ink: #F5F2EB;
  --gray: #8A8A85;
  --shu: #C31537;
  --shu-text: #F7225B;
  --hairline: rgba(245,242,235,.10);
  --display: "General Sans", "Inter", sans-serif;
  --sans: "Inter", -apple-system, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  background: var(--canvas); color: var(--ink);
  font-family: var(--sans); font-weight: 300;
  /* `clip` hides horizontal overflow WITHOUT making body a scroll container,
     which is what `hidden` does — and a scroll container here silently breaks
     every position:sticky stage in the short case-study views. `hidden` stays
     as the fallback for browsers without `clip`. */
  overflow-x: hidden; overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--shu); color: var(--ink); }
/* `height: auto` is load-bearing, not decoration. Every <img> now ships intrinsic
   width/height attributes so the browser can reserve the right box before the
   file arrives (no cumulative layout shift on these long, lazy-loaded pages).
   Without `height: auto` those same attributes would fix the rendered height at
   the intrinsic pixel value and squash every scaled image. Rules that set an
   explicit height (.strip .cell img, .ovp-media img, …) are more specific and
   still win. */
img, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }

/* Every clip on this site is ambient: muted, looping, decorative. None of them
   carry a `controls` attribute, but WebKit still paints its own start-playback
   badge over any video it decided not to autoplay — iOS Low Power Mode and
   Safari's autoplay throttle both trigger it, and a grey play triangle sitting
   on a product demo reads as broken. Suppress the whole native control layer.
   If a video is ever added that a visitor is meant to start themselves, give it
   `class="has-controls"` and it keeps its chrome. */
video:not(.has-controls)::-webkit-media-controls,
video:not(.has-controls)::-webkit-media-controls-panel,
video:not(.has-controls)::-webkit-media-controls-play-button,
video:not(.has-controls)::-webkit-media-controls-overlay-play-button,
video:not(.has-controls)::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0 !important;
  pointer-events: none !important;
}
video:not(.has-controls) { pointer-events: none; }

#page { transform-origin: 50% 40vh; }

/* ---------- Grain ---------- */
.grain {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  pointer-events: none; z-index: 90; opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Progress rail + wanderer ---------- */
.rail { position: fixed; top: 0; left: 0; right: 0; height: 7px; z-index: 100; background: transparent; }
.rail::before { content: ""; position: absolute; inset: 3px 0; background: rgba(245,242,235,.05); }
.rail-fill {
  position: relative; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: url("../media/brand/sumi-brush-v1.png") left center / max(1400px, 100vw) 100% no-repeat;
  filter: brightness(0) saturate(100%) invert(28%) sepia(53%) saturate(2425%) hue-rotate(328deg) brightness(77%) contrast(96%);
  box-shadow: inset 0 -2px 0 rgba(195,21,55,.2);
}
.rail-walker { position: fixed; top: -6px; left: 0; z-index: 101; width: 20px; height: 24px; margin-left: -10px; opacity: .94; overflow: visible; transition: transform .2s ease; }
.rail-walker.reverse { transform: scaleX(-1); }
.rail-walker .walker-body { transform-origin: 50% 96%; }
.rail-walker.walking .walker-body { animation: walkerBob .55s ease-in-out infinite; }
.rail-walker.walking .w-leg-b { animation: walkerLegB .55s ease-in-out infinite; transform-origin: 50% 0; transform-box: fill-box; }
.rail-walker.walking .w-leg-f { animation: walkerLegF .55s ease-in-out infinite; transform-origin: 50% 0; transform-box: fill-box; }
@keyframes walkerBob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-1px) rotate(1deg); } }
@keyframes walkerLegB { 0%,100% { transform: rotate(18deg); } 50% { transform: rotate(-14deg); } }
@keyframes walkerLegF { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(18deg); } }

/* ---------- Nav ---------- */
nav.glassnav {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 80; display: flex; align-items: center; gap: 26px;
  padding: 10px 22px; border-radius: 999px;
  background: rgba(245,242,235,.028);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(245,242,235,.09);
  box-shadow: inset 0 1px 0 rgba(245,242,235,.10), 0 12px 40px rgba(0,0,0,.45);
  white-space: nowrap;
}
nav.glassnav .mark { display: flex; align-items: center; text-decoration: none; }
nav.glassnav .mark img {
  width: 34px; height: 34px; object-fit: contain; display: block;
  /* local mark.svg is transparent ink — no blend hack needed */
}
nav.glassnav a:not(.mark) { color: var(--gray); text-decoration: none; font-size: var(--t-caption); letter-spacing: .04em; transition: color .25s ease; }
nav.glassnav a:not(.mark):hover, nav.glassnav a.active { color: var(--ink); }

/* ---------- Type helpers ---------- */
.kicker { font-size: var(--t-label); letter-spacing: .28em; text-transform: uppercase; color: var(--gray); margin-bottom: 22px; }
.kicker .no { color: var(--shu-text); margin-right: 10px; }
.display, h1, h2.display, .stat .big, .days-title, .hl-scene h3, .casehero h1, .casehero h2, .chapter h3, .overlay h4, .outro h2, .wcard h3, .act h3, .results .big, .quote p, .next-link .t {
  font-family: var(--display); font-weight: 500; letter-spacing: -0.025em;
}

/* ============ HERO (home) ============ */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.scene { position: absolute; inset: 0; }
.scene .heroVid {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05) brightness(.9);
}
.scene svg.mist { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene .wash { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.1) 30%, rgba(10,10,11,.15) 60%, var(--canvas) 100%),
  radial-gradient(130% 100% at 50% 40%, transparent 45%, rgba(10,10,11,.55) 100%);
}
.hero-copy {
  position: relative; z-index: 10; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 0 24px;
}
h1 {
  font-size: clamp(46px, 7.2vw, 108px); line-height: 1.02; max-width: 14ch;
  letter-spacing: -0.035em; text-wrap: balance;
  text-shadow: 0 2px 40px rgba(10,10,11,.7);
}
h1 .w, .wsplit .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
h1 .w > span, .wsplit .w > span { display: inline-block; transform: translateY(112%); }
h1 em {
  font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400;
  color: var(--shu); letter-spacing: -0.01em;
}
.hero-sub { margin-top: 26px; color: var(--gray); font-size: var(--t-small); letter-spacing: .06em; opacity: 0; }
.hero-sub b { color: var(--ink); font-weight: 500; }
.hero-eyebrow {
  color: var(--shu-text); font-size: var(--t-small); font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; margin-bottom: 26px;
  text-shadow: 0 1px 24px rgba(10,10,11,.7); opacity: 0;
  animation: heroEyebrowIn .9s cubic-bezier(.2,.8,.2,1) .45s forwards;
}
.hero-line {
  margin-top: 30px; color: rgba(245,242,235,.86); font-size: var(--t-h4);
  line-height: 1.35; letter-spacing: -.01em; max-width: 22ch;
  text-shadow: 0 1px 26px rgba(10,10,11,.6); opacity: 0;
  animation: heroEyebrowIn 1s cubic-bezier(.2,.8,.2,1) .95s forwards;
}
.hero-line em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; color: var(--shu); }
@keyframes heroEyebrowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-eyebrow, .hero-line { animation: none; opacity: 1; } }
.scroll-hint { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 10; color: var(--gray); font-size: var(--t-label); letter-spacing: .3em; text-transform: uppercase; opacity: 0; }
.scroll-hint::after { content: ""; display: block; width: 1px; height: 34px; margin: 12px auto 0; background: linear-gradient(var(--gray), transparent); animation: drip 2.2s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ============ INK → DATA ============ */
.inkdata { position: relative; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.inkdata canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.inkdata-copy { position: relative; z-index: 5; text-align: center; padding: 0 24px; }
.inkdata h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; font-size: var(--t-h2); line-height: 1.14; max-width: 24ch; }
.inkdata h2 .chaos { color: var(--gray); }
.inkdata h2 .order { color: var(--ink); }

/* ============ PROOF — receipts with a story line ============ */
.proof { padding: 14vh 8vw 16vh; display: grid; grid-template-columns: repeat(3, minmax(0, 330px)); justify-content: space-between; gap: 6vw; max-width: 1280px; margin: 0 auto; }
.proof .kicker { grid-column: 1 / -1; text-align: center; margin-bottom: 10px; }
.stat::before { content: ""; display: block; width: 30px; height: 2px; border-radius: 2px; background: rgba(195,21,55,.65); margin-bottom: 20px; }
.stat .story { color: var(--gray); font-size: var(--t-label); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 14px; }
.stat .big { font-size: clamp(42px, 5.2vw, 74px); line-height: 1; white-space: nowrap; }
.stat .big .accent { color: var(--shu); }
.stat p { margin-top: 14px; color: var(--gray); font-size: var(--t-small); line-height: 1.6; max-width: 28ch; }
.stat p b { color: var(--ink); font-weight: 500; }
/* Provenance line: where the numbers above came from. Small, but it is the
   difference between a claim and a piece of evidence. */
.proof-note { grid-column: 1 / -1; max-width: 74ch; margin: clamp(40px,5vh,62px) auto 0; text-align: center;
  color: var(--gray); font-size: var(--t-caption); line-height: 1.75; text-wrap: pretty; }

/* ============ SELECTED WORK — separated rows ============ */
.worklist { max-width: 1280px; margin: 0 auto; padding: 8vh 8vw 14vh; }
.worklist .kicker { margin-bottom: 44px; text-align: center; }
.work-grid { display: flex; flex-direction: column; gap: 44px; }
.wcard {
  position: relative; text-decoration: none; color: var(--ink); cursor: pointer;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 6vw; align-items: center;
  padding: 56px 52px; border-radius: 26px;
  border: 1px solid rgba(245,242,235,.08);
  background: rgba(245,242,235,.012);
  transition: background .45s cubic-bezier(.2,.8,.2,1), border-color .45s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.wcard:hover { background: rgba(245,242,235,.028); border-color: rgba(245,242,235,.16); transform: translateY(-4px); }
.wcard .tag { font-size: var(--t-label); letter-spacing: .26em; text-transform: uppercase; color: var(--gray); display: flex; align-items: center; gap: 10px; }
.wcard .tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--shu); }
.wcard h3 { font-size: var(--t-h3); line-height: 1.12; margin: 18px 0 14px; }
.wcard .desc { color: var(--gray); font-size: var(--t-small); line-height: 1.7; max-width: 44ch; }
.wcard .go { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-caption); letter-spacing: .06em; color: var(--gray); transition: color .3s ease; }
.wcard .go .arr { display: inline-block; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.wcard:hover .go { color: var(--ink); }
.wcard:hover .go .arr { transform: translateX(6px); }
.miniviz { position: relative; height: 120px; display: flex; flex-direction: column; justify-content: center; }
.mv-bar { position: relative; height: 2px; background: rgba(245,242,235,.10); border-radius: 2px; }
.mv-bar .f { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--ink); border-radius: 2px; }
.mv-bar .g { position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%; transform: translate(-50%,-50%); background: rgba(245,242,235,.22); }
.mv-caption { display: flex; justify-content: space-between; margin-top: 16px; font-size: var(--t-caption); letter-spacing: .08em; color: var(--gray); }
.mv-caption .hot { color: var(--shu); }
.mv-caption .n { font-family: var(--display); font-size: var(--t-lede); color: var(--ink); }
.mv-ledger { width: 100%; height: 74px; overflow: visible; }
.mv-ledger .led { stroke: rgba(245,242,235,.35); stroke-width: 1.2; fill: none; }
.mv-ledger .led-hot { stroke: var(--shu); stroke-width: 1.6; fill: none; }
.mv-form { display: flex; flex-direction: column; gap: 7px; }
.mv-form i { height: 8px; border-radius: 3px; background: rgba(245,242,235,.13); display: block; }
.mv-form i.keep { background: rgba(195,21,55,.55); }

/* ============ HIGHLIGHTS (narrative scenes) ============ */
.highlights { position: relative; }
.highlights-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.highlights-stage > .kicker { position: absolute; top: 10vh; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap; }
.hl-scene { position: absolute; inset: 0; opacity: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
.hl-glyph { width: 88px; height: 88px; margin-bottom: 36px; overflow: visible; }
.hl-glyph path, .hl-glyph circle, .hl-glyph line, .hl-glyph rect { stroke: rgba(245,242,235,.85); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.hl-glyph .hot { stroke: var(--shu); }
.hl-scene h3 { font-size: clamp(32px, 5vw, 62px); line-height: 1.1; }
.hl-scene p { margin-top: 20px; color: var(--gray); font-size: var(--t-small); line-height: 1.7; max-width: 46ch; }
.hl-receipt {
  margin-top: 30px; display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-radius: 999px;
  background: rgba(245,242,235,.03);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(245,242,235,.10);
  color: var(--gray); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase;
}
.hl-receipt b { color: var(--ink); font-weight: 500; letter-spacing: .06em; }
.hl-receipt::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--shu); }
.hl-dots { position: absolute; bottom: 8vh; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.hl-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(245,242,235,.18); transition: background .3s ease, transform .3s ease; }
.hl-dots i.on { background: var(--shu); transform: scale(1.3); }

/* ============ CASE HERO + TLDR ============ */
.casehero { min-height: 84vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16vh 24px 5vh; position: relative; }
.ch-inner { width: min(100%, 980px); max-width: 980px; margin-inline: auto; }
.casehero h1, .casehero h2 { font-size: clamp(42px, 7vw, 92px); line-height: 1.04; letter-spacing: -.028em; }
.ch-lede { margin: 24px auto 0; color: var(--gray); font-size: var(--t-body); line-height: 1.7; max-width: 54ch; }
.tldr {
  width: 100%; box-sizing: border-box; margin: 48px auto 0; display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: 20px; padding: 26px 8px;
  background: rgba(245,242,235,.028);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 rgba(245,242,235,.10), 0 20px 60px rgba(0,0,0,.4);
}
.tldr .t { padding: 4px 18px; display: flex; flex-direction: column; gap: 8px; }
.tldr .t + .t { border-left: 1px solid rgba(245,242,235,.09); }
.tldr .l { font-size: var(--t-caption); letter-spacing: .22em; color: var(--gray); }
.tldr .v { font-size: var(--t-small); font-weight: 500; line-height: 1.45; }
.tldr .v.hot { color: var(--shu); }

/* ============ 48 DAYS scene ============ */
.days { position: relative; }
.days-stage { height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.ghosts { position: absolute; inset: 0; pointer-events: none; }
.ghost { position: absolute; color: var(--gray); opacity: 0; font-size: var(--t-caption); letter-spacing: .02em; white-space: nowrap; }
.ghost.sheet {
  width: 300px; height: 68px; border: 1px solid var(--gray); border-radius: 4px;
  background:
    linear-gradient(var(--gray) 1px, transparent 1px) 0 0/100% 17px,
    linear-gradient(90deg, var(--gray) 1px, transparent 1px) 0 0/60px 100%;
}
.days-copy { text-align: center; position: relative; z-index: 5; padding: 0 24px; width: min(860px, 92vw); }
.days-title { font-size: clamp(54px, 9vw, 132px); line-height: 1; letter-spacing: -.03em; }
.days-title .num { display: inline-block; min-width: 2ch; text-align: right; }
.days-title .unit { color: var(--gray); }
.days-status { margin-top: 18px; height: 20px; color: var(--gray); font-size: var(--t-small); letter-spacing: .04em; }
.days-status .sys { color: var(--ink); }
.bar-wrap { margin-top: 54px; position: relative; }
.bar-track { height: 2px; background: rgba(245,242,235,.10); border-radius: 2px; position: relative; }
.bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--ink); border-radius: 2px; }
.bar-fill.shu { background: var(--shu); box-shadow: 0 0 18px rgba(195,21,55,.5); }
.gates { position: absolute; inset: 0; }
.gate { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--canvas); border: 1px solid rgba(245,242,235,.35); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.gate.lit { background: var(--gray); border-color: var(--gray); }
.gate.stalled { background: var(--shu); border-color: var(--shu); box-shadow: 0 0 14px rgba(195,21,55,.7); }
.punch { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 24px; opacity: 0; pointer-events: none; }
.punch p { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; font-size: var(--t-h3); line-height: 1.3; color: var(--ink); max-width: 24ch; }
.punch p em { font-style: normal; color: var(--gray); }
.resolve { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; opacity: 0; pointer-events: none; padding: 0 24px; }
.resolve .bar-wrap2 { width: min(560px, 84vw); }
.approve-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 34px; border-radius: 999px;
  background: rgba(245,242,235,.032);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(245,242,235,.14);
  box-shadow: inset 0 1px 0 rgba(245,242,235,.12), 0 16px 44px rgba(0,0,0,.5);
  color: var(--ink); font-size: var(--t-small); font-weight: 500; letter-spacing: .02em;
  opacity: 0; transform: scale(.85);
}
.approve-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--shu); }
.resolve .after { color: var(--gray); font-size: var(--t-small); letter-spacing: .08em; opacity: 0; }
.resolve .after b { color: var(--ink); font-weight: 500; }

/* ============ PRODUCT REEL (marquee) ============ */
.reel { padding: 8vh 0 2vh; overflow: hidden; }
.reel .kicker { text-align: center; margin-bottom: 38px; }
.reel-row { overflow: hidden; margin-bottom: 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.reel-track { display: flex; gap: 22px; width: max-content; will-change: transform; }
.reel-item {
  width: clamp(240px, 26vw, 400px); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--hairline); background: #101012; flex: none;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.reel-item video, .reel-item img { width: 100%; display: block; filter: saturate(.95); }
.reel .figcap { text-align: center; margin-top: 20px; }

/* ============ PILL ROW — consistent Apple-style placement ============ */
.pill-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 64px; }
.pill-row .glass-pill { margin-top: 0; }

/* ============ CASE BODY: acts / chapters / media ============ */
.act { max-width: 1280px; margin: 0 auto; padding: 12vh 8vw; }
.act.narrow { max-width: 900px; }
.act h3 { font-size: var(--t-h2); line-height: 1.12; max-width: 20ch; }
.act .lede { margin-top: 20px; color: var(--gray); font-size: var(--t-small); line-height: 1.8; max-width: 62ch; }
.act .lede b, .act .lede strong { color: var(--ink); font-weight: 500; }
.act .lede + .lede { margin-top: 14px; }
.figcap { color: var(--gray); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; margin-top: 14px; }

.mediaframe {
  border-radius: 18px; border: 1px solid var(--hairline); background: #101012;
  box-shadow: 0 40px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(245,242,235,.06);
  overflow: hidden;
}
.mediaframe.tilt { transform: perspective(1200px) rotateY(-5deg) rotateX(1.5deg); }
.mediaframe .titlebar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid rgba(245,242,235,.06); }
.mediaframe .titlebar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(245,242,235,.14); }
.mediaframe img, .mediaframe video { width: 100%; filter: saturate(.96) contrast(1.02); }

.chapter-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 6vw; align-items: center; }
.chapter-grid.flip { grid-template-columns: 1.15fr 1fr; }
.chapter-grid .metric { margin-top: 34px; display: flex; align-items: baseline; gap: 14px; }
.chapter-grid .metric .n { font-family: var(--display); font-weight: 500; font-size: var(--t-h3); color: var(--shu); letter-spacing: -.02em; }
.chapter-grid .metric .l { color: var(--gray); font-size: var(--t-caption); letter-spacing: .04em; }
.feat { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.chapter-grid--tight .feat { margin-top: 0; }
.feat .f { position: relative; padding-left: 30px; color: var(--gray); font-size: var(--t-small); line-height: 1.65; }
.feat .f::before { content: "—"; color: var(--shu); position: absolute; left: 0; top: 0; }
.feat .f b { color: var(--ink); font-weight: 500; }

/* Excel hell stack */
.stack-stage { height: 100vh; height: 100svh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.stack-stage .sheet-img {
  position: absolute; width: min(680px, 74vw); border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(245,242,235,.14); box-shadow: 0 30px 80px rgba(0,0,0,.6);
  opacity: 0;
}
.stack-stage .sheet-img img { width: 100%; filter: saturate(.85) contrast(1.02) brightness(.94); }
.stack-note {
  position: absolute; z-index: 6; padding: 8px 16px; border-radius: 999px;
  background: rgba(195,21,55,.14); border: 1px solid rgba(195,21,55,.5); color: var(--shu-text);
  font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; opacity: 0; white-space: nowrap;
}
.stack-title { position: absolute; z-index: 7; text-align: center; padding: 0 24px; opacity: 0; }
.stack-title h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; font-size: var(--t-h2); }
.stack-title p { margin-top: 14px; color: var(--gray); font-size: var(--t-small); }

/* Results — short vermilion tick instead of full hairline */
.results { max-width: 1280px; margin: 0 auto; padding: 14vh 8vw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5vw 4vw; }
.results .kicker { grid-column: 1 / -1; }
.results .r::before { content: ""; display: block; width: 30px; height: 2px; border-radius: 2px; background: rgba(195,21,55,.65); margin-bottom: 18px; }
.results .big { font-size: var(--t-h3); line-height: 1.05; }
.results .big.hot { color: var(--shu); }
.results p { margin-top: 10px; color: var(--gray); font-size: var(--t-caption); line-height: 1.55; }
.results .spark { margin-top: 14px; height: 3px; border-radius: 3px; background: rgba(245,242,235,.07); overflow: hidden; }
.results .spark i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; border-radius: 3px; background: linear-gradient(90deg, var(--shu), rgba(195,21,55,.25)); }

/* Quotes */
.quotes { max-width: 900px; margin: 0 auto; padding: 6vh 8vw 16vh; display: flex; flex-direction: column; gap: 8vh; }
.quote { border-left: 2px solid var(--shu); padding-left: 28px; }
.quote p { font-size: var(--t-h4); line-height: 1.5; font-weight: 400; letter-spacing: -.01em; }
.quote .who { margin-top: 14px; color: var(--gray); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; }

/* Gallery / archive strip */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.strip .cell { border-radius: 12px; overflow: hidden; border: 1px solid rgba(245,242,235,.08); background: #101012; transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s ease; }
.strip .cell:hover { transform: translateY(-4px); border-color: rgba(245,242,235,.2); }
.strip .cell img { width: 100%; height: 200px; object-fit: cover; object-position: top; filter: saturate(.9); }
.strip.wide { grid-template-columns: repeat(2, 1fr); }
.strip.wide .cell img { height: 300px; }

/* Before / after slider */
.ba { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--hairline); margin-top: 44px; user-select: none; }
.ba img { width: 100%; display: block; pointer-events: none; }
.ba .after-img { position: absolute; inset: 0; overflow: hidden; }
.ba .after-img img { height: 100%; object-fit: cover; object-position: left top; }
.ba .handle { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--shu); cursor: ew-resize; }
.ba .handle::after {
  content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20,20,22,.55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(245,242,235,.2); color: var(--ink); font-size: var(--t-small);
}
.ba .balabel { position: absolute; top: 14px; font-size: var(--t-caption); letter-spacing: .2em; padding: 6px 12px; border-radius: 999px; background: rgba(10,10,11,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--gray); }
.ba .balabel.l { left: 14px; } .ba .balabel.r { right: 14px; }

/* Form wall (PNC) */
.wall-stage { height: 100vh; height: 100svh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.wall { display: grid; grid-template-columns: repeat(4, minmax(120px, 170px)); gap: 12px 20px; padding: 0 24px; }
.wall i { height: 10px; border-radius: 4px; background: rgba(245,242,235,.14); display: block; }
.wall i.keep { background: rgba(195,21,55,.6); }
.wall-title { position: absolute; z-index: 6; text-align: center; opacity: 0; padding: 0 24px; }
.wall-title h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; font-size: var(--t-h2); }
.wall-title p { margin-top: 14px; color: var(--gray); font-size: var(--t-small); }

/* Glass pill + overlay */
.glass-pill {
  margin-top: 44px; display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 24px; border-radius: 999px; cursor: pointer;
  background: rgba(245,242,235,.032);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(245,242,235,.12);
  box-shadow: inset 0 1px 0 rgba(245,242,235,.12), 0 16px 44px rgba(0,0,0,.45);
  color: var(--ink); font-size: var(--t-small); letter-spacing: .02em;
  transition: background .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
  user-select: none;
}
.glass-pill:hover { background: rgba(245,242,235,.09); transform: translateY(-2px); }
.glass-pill .plus { width: 24px; height: 24px; border-radius: 50%; background: var(--shu); display: grid; place-items: center; font-size: var(--t-small); line-height: 1; color: var(--ink); font-weight: 500; flex: none; }
.overlay-veil { position: fixed; inset: 0; z-index: 150; background: rgba(10,10,11,.55); opacity: 0; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.overlay {
  position: fixed; z-index: 160; left: 50%; top: 50%;
  width: min(760px, 92vw); max-height: 82vh; overflow: auto;
  transform: translate(-50%, -50%);
  border-radius: 28px; padding: 44px 46px;
  background: rgba(20,20,22,.42);
  -webkit-backdrop-filter: blur(48px) saturate(1.7); backdrop-filter: blur(48px) saturate(1.7);
  border: 1px solid rgba(245,242,235,.13);
  box-shadow: inset 0 1px 0 rgba(245,242,235,.14), 0 60px 140px rgba(0,0,0,.7);
  display: none; opacity: 0;
}
.overlay h4 { font-size: var(--t-h3); margin-bottom: 6px; }
.overlay .sub { color: var(--gray); font-size: var(--t-caption); letter-spacing: .06em; margin-bottom: 28px; }
.overlay .lede { color: var(--gray); font-size: var(--t-small); line-height: 1.75; margin-bottom: 30px; max-width: 56ch; }
.overlay .lede b { color: var(--ink); font-weight: 500; }
.overlay .ostats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 32px; }
.overlay .ostat { border-top: 1px solid rgba(245,242,235,.12); padding-top: 14px; }
.overlay .ostat .n { font-family: var(--display); font-weight: 500; font-size: var(--t-h3); line-height: 1; letter-spacing: -.02em; }
.overlay .ostat .n em { font-style: normal; color: var(--shu); }
.overlay .ostat .l { margin-top: 8px; color: var(--gray); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; }
.overlay .figure { position: relative; border-radius: 16px; margin-bottom: 10px; background: rgba(245,242,235,.03); border: 1px solid rgba(245,242,235,.08); overflow: hidden; }
.overlay .figure img { width: 100%; }
.overlay .figcap { margin-bottom: 34px; margin-top: 12px; }
.overlay .item { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(245,242,235,.08); }
.overlay .item .ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(245,242,235,.06); border: 1px solid rgba(245,242,235,.08); display: grid; place-items: center; font-family: var(--display); font-size: var(--t-body); color: var(--shu-text); }
.overlay .item h5 { font-weight: 500; font-size: var(--t-small); margin-bottom: 5px; }
.overlay .item p { color: var(--gray); font-size: var(--t-caption); line-height: 1.65; }
.overlay .ostrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; }
.overlay .ostrip .cell { border-radius: 12px; overflow: hidden; border: 1px solid rgba(245,242,235,.08); }
.overlay .ostrip .cell img { width: 100%; height: 150px; object-fit: cover; object-position: top; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.overlay .ostrip .cell:hover img { transform: scale(1.05); }
.overlay .figure--framed { padding-top: 34px; }
.overlay .figure--framed::before { content: ""; position: absolute; top: 13px; left: 16px; width: 8px; height: 8px; border-radius: 50%; background: rgba(245,242,235,.16); box-shadow: 14px 0 0 rgba(245,242,235,.16), 28px 0 0 rgba(245,242,235,.16); }
.overlay .figure--framed img { border-top: 1px solid rgba(245,242,235,.06); }
.overlay .oquote { border-left: 2px solid var(--shu); padding: 4px 0 4px 22px; margin: 34px 0 8px; }
.overlay .oquote p { font-size: var(--t-body); line-height: 1.55; }
.overlay .oquote .who { margin-top: 12px; color: var(--gray); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; }
.overlay .close { position: sticky; top: 0px; float: right; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(245,242,235,.14); background: rgba(245,242,235,.06); color: var(--gray); display: grid; place-items: center; cursor: pointer; font-size: var(--t-small); transition: color .25s ease, background .25s ease; z-index: 5; }
.overlay .close:hover { color: var(--ink); background: rgba(245,242,235,.12); }

/* Next project link */
.next-link { position: relative; display: block; text-decoration: none; color: var(--ink); text-align: center; padding: 16vh 24px 18vh; }
.next-link::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1280px, 84vw); height: 1px; background: rgba(245,242,235,.22); transform: translateX(-50%); }
.next-link .k { color: var(--gray); font-size: var(--t-label); letter-spacing: .28em; text-transform: uppercase; }
.next-link .t { display: block; margin-top: 18px; font-size: clamp(34px, 5vw, 72px); line-height: 1.08; transition: color .3s ease; }
.next-link:hover .t { color: var(--shu); }

/* ============ OUTRO / SOCIALS ============ */
.outro { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10vh 24px; position: relative; overflow: hidden; }
.outro h2 { font-size: clamp(40px, 6vw, 88px); line-height: 1.1; }
.socials { margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.spill {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: 999px; text-decoration: none;
  background: rgba(245,242,235,.032);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(245,242,235,.12);
  box-shadow: inset 0 1px 0 rgba(245,242,235,.10), 0 14px 40px rgba(0,0,0,.4);
  color: var(--ink); font-size: var(--t-small); letter-spacing: .02em;
  transition: background .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.spill:hover { background: rgba(245,242,235,.08); transform: translateY(-3px); border-color: rgba(245,242,235,.22); }
.spill svg { width: 15px; height: 15px; stroke: var(--gray); fill: none; stroke-width: 1.6; transition: stroke .3s ease; }
.spill:hover svg { stroke: var(--shu); }
.fine { margin-top: 60px; color: var(--gray); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; }

/* ============ LIGHTBOX ============ */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; padding: 4vh 4vw;
  background: rgba(10,10,11,.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; cursor: zoom-out;
}
.lightbox img,
.lightbox .lb-video { max-width: 94vw; max-height: 90vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 40px 120px rgba(0,0,0,.8); }
/* Only one of the two is ever populated; JS toggles which. */
.lightbox .lb-video { display: none; }
/* The product reels become interactive, so they need the same hover and focus
   affordance as every other zoomable piece of media on the site.
   `video:not(.has-controls) { pointer-events: none }` near the top of this file
   makes every decorative clip click-through so it never steals a scroll or a
   caption click. Any clip main.js has promoted to .zoomable is NOT decorative —
   it is a button — so it must take pointer events back, or the lightbox handler
   bound to it can never fire. This was the reason the section 05 product reels
   on the Amazon overviews looked zoomable and did nothing. */
video.zoomable { pointer-events: auto; }
.relay-rack figure video.zoomable,
.tool-rack figure video.zoomable,
.ovp-media video.zoomable,
.ovp-media img.zoomable { cursor: zoom-in; transition: opacity .3s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.relay-rack figure video.zoomable:hover,
.tool-rack figure video.zoomable:hover,
.ovp-media video.zoomable:hover,
.ovp-media img.zoomable:hover { opacity: .9; }
.lightbox .lb-hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: var(--gray); font-size: var(--t-label); letter-spacing: .22em; text-transform: uppercase; }
.zoomable { cursor: zoom-in; }

/* ============ OUTRO extras ============ */
.outro .pre { color: var(--gray); font-size: var(--t-small); letter-spacing: .06em; margin-bottom: 18px; }
.outro .stroke { width: min(320px, 60vw); height: 12px; margin-bottom: 34px; overflow: visible; }
.outro .stroke path { stroke: var(--shu); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.outro .reply { margin-top: 22px; color: var(--gray); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; }

/* ============ 404 ============ */
.lost { height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
.lost h1 { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; font-size: clamp(34px, 5vw, 64px); }
.lost p { margin-top: 16px; color: var(--gray); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .chapter-grid, .chapter-grid.flip { grid-template-columns: 1fr; gap: 44px; }
  .mediaframe.tilt { transform: none; }
}
@media (max-width: 760px) {
  nav.glassnav { gap: 16px; padding: 9px 16px; }
  .proof { grid-template-columns: 1fr; gap: 46px; padding: 12vh 10vw; }
  .wcard { grid-template-columns: 1fr; gap: 34px; padding: 38px 26px; }
  .work-grid { gap: 26px; }
  .tldr { grid-template-columns: 1fr 1fr; gap: 18px 0; padding: 22px 4px; }
  .tldr .t:nth-child(3) { border-left: none; }
  .results { grid-template-columns: 1fr 1fr; }
  .strip { grid-template-columns: 1fr 1fr; }
  .strip.wide { grid-template-columns: 1fr; }
  .overlay { padding: 34px 26px; border-radius: 22px; }
  .overlay .ostats, .overlay .ostrip { grid-template-columns: 1fr; gap: 14px; }
  .ghost.sheet { width: 210px; height: 52px; }
  .highlights-stage > .kicker { top: 7vh; }
  .wall { grid-template-columns: repeat(3, minmax(80px, 110px)); gap: 10px 14px; }
  .act { padding: 12vh 8vw; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint::after { animation: none; }
}

/* ============================================================
   v0.7 — receipts alignment, accessibility, motion resilience
   ============================================================ */
/* Receipts: consistent number baselines across the three columns */
.proof { align-items: start; }
.stat { display: flex; flex-direction: column; }
.stat .story { min-height: 2.9em; line-height: 1.4; }
.stat .big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }

/* Visible keyboard focus (was missing) */
a:focus-visible, .wcard:focus-visible, .spill:focus-visible, .glass-pill:focus-visible,
a.reel-item:focus-visible, .zoomable:focus-visible, button:focus-visible, [tabindex]:focus-visible,
.skip-link:focus {
  outline: 2px solid var(--shu); outline-offset: 3px; border-radius: 10px;
}
.zoomable:focus-visible { outline-offset: 2px; }

/* Skip-to-content link */
.skip-link {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%) translateY(-160%);
  z-index: 120; padding: 10px 18px; border-radius: 999px;
  background: rgba(20,20,22,.72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(245,242,235,.16); color: var(--ink); font-size: var(--t-caption);
  text-decoration: none; letter-spacing: .04em; transition: transform .2s ease;
}
.skip-link:focus { transform: translateX(-50%) translateY(0); }

/* Reel items as links + reduced-motion horizontal gallery */
a.reel-item { text-decoration: none; color: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .reel-row { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .reel-track { gap: 16px; }
}

/* ============================================================
   v0.10 — shared case-study components: journal/suite line,
   stage tags, finding→response→verification cards
   ============================================================ */
.journey { max-width: 1180px; margin: 0 auto; padding: 12vh 8vw 8vh; }
.journey > .lede { margin: 18px 0 0; color: var(--gray); font-size: var(--t-small); line-height: 1.8; max-width: 60ch; }
.journey > .lede b { color: var(--ink); font-weight: 500; }
.jline { position: relative; margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); }
.jline.jline--4 { grid-template-columns: repeat(4, 1fr); }
.jsvg { position: absolute; left: 0; right: 0; top: 26px; width: 100%; height: 44px; overflow: visible; pointer-events: none; }
.jsvg .jbase { stroke: rgba(245,242,235,.14); stroke-width: 2; fill: none; }
.jsvg .jhot { stroke: var(--shu); stroke-width: 2; fill: none; stroke-linecap: round; }
.jstage { position: relative; padding-top: 74px; text-align: center; padding-inline: 10px; }
.jstage .dot { position: absolute; top: 22px; left: 50%; transform: translate(-50%,-50%); width: 13px; height: 13px; border-radius: 50%; background: var(--canvas); border: 2px solid var(--gray); transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; z-index: 2; }
.jstage.on .dot { background: var(--shu); border-color: var(--shu); box-shadow: 0 0 16px rgba(195,21,55,.6); }
.jstage .sc { font-size: var(--t-label); letter-spacing: .24em; text-transform: uppercase; color: var(--shu-text); }
.jstage h4 { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; font-size: var(--t-lede); margin-top: 8px; }
.jstage p { color: var(--gray); font-size: var(--t-caption); line-height: 1.6; margin-top: 8px; max-width: 30ch; margin-inline: auto; }
.jstage .arrowform { color: var(--gray); font-size: var(--t-caption); letter-spacing: .05em; margin-top: 10px; }
.jstage .arrowform b { color: var(--ink); font-weight: 500; }

.stage-tag { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gray); }
.stage-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--shu); box-shadow: 0 0 10px rgba(195,21,55,.6); }
.stage-tag b { color: var(--ink); font-weight: 500; letter-spacing: .1em; }

.frv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.frv .card { border: 1px solid var(--hairline); border-radius: 16px; padding: 26px 24px; background: rgba(245,242,235,.012); }
.frv .card .step { font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--shu-text); }
.frv .card .fnd { font-family: var(--display); font-weight: 500; font-size: var(--t-body); line-height: 1.3; margin: 12px 0 14px; }
.frv .card .row { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(245,242,235,.07); font-size: var(--t-caption); line-height: 1.55; color: var(--gray); }
.frv .card .row .lab { color: var(--ink); font-weight: 500; min-width: 96px; }
@media (max-width: 900px) {
  .jline, .jline.jline--4 { grid-template-columns: 1fr; gap: 40px; }
  .jsvg { display: none; }
  .jstage { padding-top: 0; }
  .jstage .dot { display: none; }
  .frv { grid-template-columns: 1fr; }
}

/* ============================================================
   v0.11 — feedback polish: numbering, ink strokes, overlays,
   plus icon, logo contrast, animated FRV timeline
   ============================================================ */
/* kicker: replace running numbers with a quiet vermilion rule */
.kicker .no.rule { display: inline-block; margin-right: 14px; vertical-align: middle; }
.kicker .no.rule::before { content: ""; display: inline-block; width: 20px; height: 1.5px; background: var(--shu); vertical-align: middle; opacity: .85; }

/* logo reads on ANY background (thin dark edge shows on light) */
nav.glassnav .mark img { filter: drop-shadow(0 0 1px rgba(10,10,11,.55)) drop-shadow(0 1px 2px rgba(10,10,11,.35)); }

/* glass-pill plus — CSS-drawn, perfectly centered everywhere */
.glass-pill .plus { position: relative; font-size: 0; }
.glass-pill .plus::before, .glass-pill .plus::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--ink); border-radius: 1px; }
.glass-pill .plus::before { width: 11px; height: 1.6px; transform: translate(-50%, -50%); }
.glass-pill .plus::after { width: 1.6px; height: 11px; transform: translate(-50%, -50%); }

/* overlay close — sticky & always reachable while scrolling (float breaks sticky) */
.overlay .close { position: sticky; top: 0; float: none; margin: 0 0 -22px auto; z-index: 6; }

/* ink-brush strokes: rougher, weightier than a hairline */
.jsvg .jhot { stroke-width: 3.4; }
.jsvg .jbase { stroke-width: 3; opacity: .9; }
.outro .stroke path { stroke-width: 3.4; }

/* ===== animated Finding → Response → Verification ===== */
.frv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.frv .card { position: relative; border: 1px solid var(--hairline); border-radius: 16px; padding: 30px 26px 28px; background: rgba(245,242,235,.012); transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s ease, background .4s ease; }
.frv .card:hover { transform: translateY(-5px); border-color: rgba(245,242,235,.18); background: rgba(245,242,235,.03); }
.frv .steps { position: relative; padding-left: 28px; }
.frv .steps::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 10px; width: 2px; border-radius: 2px; background: rgba(245,242,235,.10); }
.frv .steps .fill { position: absolute; left: 5px; top: 8px; width: 2px; height: 0; border-radius: 2px; background: var(--shu); box-shadow: 0 0 10px rgba(195,21,55,.45); }
.frv .step { position: relative; padding-bottom: 20px; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.frv.anim .step { opacity: 0; transform: translateY(10px); }
.frv.anim .step.lit { opacity: 1; transform: none; }
.frv .step:last-child { padding-bottom: 0; }
.frv .step .node { position: absolute; left: -28px; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--canvas); border: 2px solid var(--gray); display: grid; place-items: center; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.frv .step.lit { opacity: 1; transform: none; }
.frv .step.lit .node { border-color: var(--shu); background: var(--shu); box-shadow: 0 0 12px rgba(195,21,55,.55); }
.frv .step.step-find.lit .node { background: var(--gray); border-color: var(--gray); box-shadow: none; }
.frv .step .lab { font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gray); transition: color .3s ease; }
.frv .step.lit .lab { color: var(--shu); }
.frv .step.step-find.lit .lab { color: var(--gray); }
.frv .step .cap { font-family: var(--display); font-weight: 500; font-size: var(--t-body); line-height: 1.32; margin-top: 6px; color: var(--ink); }
.frv .step p { color: var(--gray); font-size: var(--t-caption); line-height: 1.58; margin-top: 6px; }
.frv .step .node .ck { width: 8px; height: 8px; display: block; pointer-events: none; }
.frv .step .node .ck path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .frv { grid-template-columns: 1fr; } }
/* reduced motion: everything resolved */
@media (prefers-reduced-motion: reduce) {
  .frv .step { opacity: 1; transform: none; }
  .frv .steps .fill { height: calc(100% - 18px); }
}

/* ============================================================
   v0.12 — real brush strokes, adaptive enso logo
   ============================================================ */
:root { --shu-deep: #C31537; }

/* adaptive enso logo — masked shape, tone flips with the background under the nav */
nav.glassnav .mark .enso {
  display: block; width: 34px; height: 34px;
  background-color: var(--ink);
  -webkit-mask: url("../media/brand/enso.png") center / contain no-repeat;
  mask: url("../media/brand/enso.png") center / contain no-repeat;
  transition: background-color .55s ease;
}
nav.glassnav.nav-light .mark .enso { background-color: #0A0A0B; }

/* brush connective line (journey / suite) */
.jline .jbrush { position: absolute; left: 0; right: 0; top: 18px; height: 26px; pointer-events: none; }
.jline .jbrush span { position: absolute; inset: 0;
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat; }
.jline .jbrush .base { background: rgba(245,242,235,.16); }
.jline .jbrush .fill { background: var(--shu-deep); }
.jline .jbrush.anim .fill { clip-path: inset(0 100% 0 0); }

/* brush underline (outro "make it simple") */
.brush-underline { position: relative; width: min(340px, 62vw); height: 16px; margin: 0 auto 34px; }
.brush-underline .fill { position: absolute; inset: 0; background: var(--shu-deep);
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat; }
.brush-underline.anim .fill { clip-path: inset(0 100% 0 0); }
@media (prefers-reduced-motion: reduce) { .jline .jbrush.anim .fill, .brush-underline.anim .fill { clip-path: none; } }

/* ============================================================
   v0.13 — "The proof": finding → response → enso seal
   (replaces the FRV card timeline)
   ============================================================ */
.pv { margin-top: 40px; }
.pv-row { display: grid; grid-template-columns: 1fr 56px 1fr 176px; gap: 30px; align-items: center; padding: 46px 0; border-top: 1px solid var(--hairline); }
.pv-row:first-child { border-top: none; }
.pv-lab { display: block; font-size: var(--t-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gray); margin-bottom: 12px; }
.pv-find p, .pv-resp p { font-family: var(--display); font-weight: 500; font-size: var(--t-lede); line-height: 1.32; letter-spacing: -.01em; }
.pv-find p { color: var(--gray); }              /* muted problem */
.pv-resp .pv-lab { color: var(--shu); }
.pv-resp p { color: var(--ink); }               /* ink solution */
.pv-mid { position: relative; height: 16px; }
.pv-mid .pv-brush { position: absolute; inset: 0; background: var(--shu-deep);
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat; }
.pv-seal { text-align: center; }
.pv-seal .seal { position: relative; width: 74px; height: 74px; margin: 0 auto 10px; }
.pv-seal .ring { position: absolute; inset: 0; background: var(--shu);
  -webkit-mask: url("../media/brand/enso.png") center / contain no-repeat;
  mask: url("../media/brand/enso.png") center / contain no-repeat; }
.pv-seal .chk { position: absolute; width: 30px; height: 30px; left: 50%; top: 52%; transform: translate(-50%, -50%); }
.pv-seal .chk path { fill: none; stroke: var(--shu); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pv-seal .vf { font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--shu-text); display: block; }
.pv-seal .nt { font-size: var(--t-caption); color: var(--gray); line-height: 1.5; margin-top: 8px; display: block; }
/* hidden initial state only when JS will animate */
.pv.anim .pv-find, .pv.anim .pv-resp, .pv.anim .pv-seal { opacity: 0; }
@media (max-width: 900px) {
  .pv-row { grid-template-columns: 1fr; gap: 16px; padding: 34px 0; text-align: left; }
  .pv-mid { display: none; }
  .pv-seal { text-align: left; } .pv-seal .seal { margin-left: 0; }
}

/* ============================================================
   v0.16 — background-adaptive enso brandmark (mix-blend)
   ============================================================ */
.brandmark { position: fixed; top: 18px; left: 26px; z-index: 85; width: 44px; height: 44px; display: block; }
.brandmark img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: difference; }
.brandmark:focus-visible { outline: 2px solid var(--shu); outline-offset: 5px; border-radius: 8px; }
@media (max-width: 760px) { .brandmark { top: 13px; left: 16px; width: 38px; height: 38px; } }

/* ============================================================
   v0.17 — living sumi-e hero, dual-tone enso, brush language,
   research-to-decision narratives, and richer micro-motion
   ============================================================ */

/* The new hero uses a real ink-wash painting as its foundation.
   Motion lives in separate mist, water, and character planes. */
.hero .sumi { display: none; }
.hero-paint { position: absolute; inset: 0; overflow: hidden; background: #d7d3cb; }
.hero-art {
  position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.92); transform: scale(1.02);
  transform-origin: 50% 54%; will-change: transform;
}
.hero-atmosphere { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-mist-plane {
  position: absolute; left: -18%; width: 136%; height: 19%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(245,242,235,.78) 0%, rgba(245,242,235,.34) 43%, transparent 73%);
  filter: blur(22px); mix-blend-mode: screen; will-change: transform, opacity;
}
.hero-mist-plane.m1 { top: 33%; opacity: .34; animation: mistPassA 24s cubic-bezier(.45,0,.55,1) infinite alternate; }
.hero-mist-plane.m2 { top: 49%; opacity: .26; animation: mistPassB 31s cubic-bezier(.45,0,.55,1) infinite alternate; }
.hero-mist-plane.m3 { top: 63%; opacity: .18; filter: blur(30px); animation: mistPassA 38s cubic-bezier(.45,0,.55,1) infinite alternate-reverse; }
@keyframes mistPassA { from { transform: translate3d(-5%,0,0) scaleX(.96); } to { transform: translate3d(7%,6px,0) scaleX(1.04); } }
@keyframes mistPassB { from { transform: translate3d(6%,-4px,0) scaleX(1.03); } to { transform: translate3d(-7%,5px,0) scaleX(.97); } }

.hero-water-breath { position: absolute; left: 16%; right: 4%; top: 69%; height: 12%; opacity: .26; filter: blur(.3px); }
.hero-water-breath i { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 1px; background: linear-gradient(90deg, transparent, rgba(10,10,11,.46), transparent); transform-origin: center; animation: waterBreath var(--d) cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes waterBreath { from { transform: scaleX(.72); opacity: .2; } to { transform: scaleX(1.08); opacity: .62; } }

.wanderer-path { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); }
.wanderer-crossing { position: absolute; left: -10vw; bottom: 5.2%; width: clamp(58px, 7.2vw, 108px); animation: endlessCrossing 42s cubic-bezier(.42,0,.58,1) -10s infinite; will-change: transform, opacity; }
.wanderer-step { position: relative; animation: inkStep 1.45s cubic-bezier(.37,0,.63,1) infinite; transform-origin: 50% 100%; }
.wanderer-figure { width: 100%; filter: grayscale(1) contrast(1.26) brightness(.66); opacity: .92; }
.wanderer-reflection { position: absolute; left: 12%; top: 91%; width: 76%; transform: scaleY(-.72); transform-origin: 50% 0; filter: grayscale(1) blur(1.3px); opacity: .09; -webkit-mask-image: linear-gradient(#000, transparent 76%); mask-image: linear-gradient(#000, transparent 76%); }
.step-ripple { position: absolute; left: 45%; bottom: 2%; width: 34px; height: 5px; border: 1px solid rgba(10,10,11,.28); border-radius: 50%; opacity: 0; animation: stepRipple 1.45s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes endlessCrossing { 0% { transform: translate3d(0,0,0); opacity: 0; } 5% { opacity: .92; } 48% { transform: translate3d(58vw,-1.2vh,0); opacity: .92; } 95% { opacity: .92; } 100% { transform: translate3d(122vw,.4vh,0); opacity: 0; } }
@keyframes inkStep { 0%,100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-3px) rotate(.7deg); } }
@keyframes stepRipple { 0%,30% { transform: translate(-50%,0) scaleX(.35); opacity: 0; } 48% { opacity: .24; } 100% { transform: translate(-50%,0) scaleX(1.7); opacity: 0; } }
.hero-ink-fleck { position: absolute; width: 3px; height: 2px; border-radius: 50%; background: rgba(10,10,11,.35); filter: blur(.2px); animation: inkWind var(--d) cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes inkWind { from { transform: translate3d(0,0,0) rotate(0); opacity: .08; } to { transform: translate3d(42px,-12px,0) rotate(80deg); opacity: .42; } }
.hero-paint-wash { position: absolute; inset: 0; background: radial-gradient(ellipse 42% 34% at 50% 48%, rgba(245,242,235,.26), transparent 68%), linear-gradient(180deg, rgba(10,10,11,.08), transparent 24%, transparent 70%, var(--canvas) 100%); pointer-events: none; }
.hero--wanderer h1 { color: #11110f; text-shadow: 0 1px 28px rgba(245,242,235,.72); }
.hero--wanderer h1 em { color: #34322e; }
.hero--wanderer .hero-sub, .hero--wanderer .scroll-hint { color: rgba(10,10,11,.78); }
.hero--wanderer .hero-sub b { color: #11110f; }
.hero--wanderer .scroll-hint::after { background: linear-gradient(rgba(10,10,11,.55), transparent); }

/* Dual artwork layers cross-fade instead of relying on a blend mode.
   The surrounding glass keeps the mark readable on textured passages. */
.brandmark {
  border-radius: 999px; padding: 7px; width: 50px; height: 50px;
  background: rgba(245,242,235,.035); border: 1px solid rgba(245,242,235,.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(245,242,235,.12), 0 12px 38px rgba(0,0,0,.26);
}
.brandmark .enso-mode { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); object-fit: contain; mix-blend-mode: normal; transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1); }
.brandmark .enso-light { opacity: 1; }
.brandmark .enso-dark { opacity: 0; filter: invert(1); transform: rotate(-4deg) scale(.96); }
.brandmark.on-light { background: rgba(10,10,11,.035); border-color: rgba(10,10,11,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 38px rgba(10,10,11,.12); }
.brandmark.on-light .enso-light { opacity: 0; transform: rotate(4deg) scale(.96); }
.brandmark.on-light .enso-dark { opacity: 1; transform: rotate(0) scale(1); }
nav.glassnav.nav-light { background: rgba(245,242,235,.31); border-color: rgba(10,10,11,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 12px 36px rgba(10,10,11,.12); }
nav.glassnav.nav-light a:not(.mark) { color: rgba(10,10,11,.76); }
nav.glassnav.nav-light a:not(.mark):hover, nav.glassnav.nav-light a.active { color: #0A0A0B; }

/* Brushwork replaces diagrammatic straight strokes in the places that carry story. */
.results .spark i, .kicker .no.rule::before {
  background: var(--shu-deep);
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
}
.results .spark { height: 8px; background: transparent; }
.results .spark i { border-radius: 0; }
.kicker .no.rule::before { width: 26px; height: 5px; }
.kicker .no.rule { transform-origin: 0 50%; }

/* Research becomes design law: small kinetic diagrams explain each decision. */
.decision-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.decision-card { position: relative; min-height: 300px; padding: 26px; border-radius: 18px; border: 1px solid var(--hairline); background: rgba(245,242,235,.014); overflow: hidden; transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s ease, background .4s ease; }
.decision-card:hover { transform: translateY(-5px); border-color: rgba(245,242,235,.2); background: rgba(245,242,235,.028); }
.decision-card .dc-no { color: var(--shu-text); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; }
.decision-card h4 { font-family: var(--display); font-weight: 500; letter-spacing: -.02em; font-size: var(--t-lede); margin-top: 14px; }
.decision-card p { color: var(--gray); font-size: var(--t-caption); line-height: 1.7; margin-top: 10px; }
.decision-viz { position: relative; height: 86px; margin-top: 24px; }
.decision-viz i { position: absolute; display: block; transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .7s ease, background .5s ease, border-color .5s ease; }
.decision-viz.nodes i { width: 9px; height: 9px; border-radius: 50%; background: rgba(245,242,235,.2); left: var(--x); top: var(--y); }
.decision-card.is-active .decision-viz.nodes i { transform: translate(calc(50% - var(--x)), calc(42px - var(--y))); background: var(--shu); box-shadow: 0 0 12px rgba(195,21,55,.45); }
.decision-viz.layers i { left: 50%; top: 50%; width: calc(42px + var(--n) * 18px); height: calc(22px + var(--n) * 10px); border: 1px solid rgba(245,242,235,.2); border-radius: 8px; transform: translate(-50%,-50%) translateY(calc(var(--n) * 5px)); }
.decision-card.is-active .decision-viz.layers i { border-color: rgba(195,21,55,.66); transform: translate(-50%,-50%) translateY(calc(var(--n) * -7px)); }
.decision-viz.flow::before { content:""; position:absolute; left:8%; right:8%; top:50%; height:10px; background:var(--shu-deep); -webkit-mask:url("../media/brand/brush-line.png") center/100% 100% no-repeat; mask:url("../media/brand/brush-line.png") center/100% 100% no-repeat; clip-path:inset(0 100% 0 0); transition:clip-path 1.15s cubic-bezier(.2,.8,.2,1); }
.decision-viz.flow i { top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--canvas); border: 2px solid var(--gray); left: var(--x); }
.decision-card.is-active .decision-viz.flow::before { clip-path: inset(0); }
.decision-card.is-active .decision-viz.flow i { background: var(--shu); border-color: var(--shu); box-shadow: 0 0 12px rgba(195,21,55,.5); }

/* The proof reads as a sequence: signal, response, stamped evidence. */
.pv-row { opacity: .54; transform: scale(.985); transition: opacity .55s ease, transform .6s cubic-bezier(.2,.8,.2,1), background .5s ease; border-radius: 18px; padding-inline: 22px; }
.pv-row.is-active { opacity: 1; transform: scale(1); background: linear-gradient(90deg, rgba(245,242,235,.018), transparent); }
.pv-seal .seal::after { content:""; position:absolute; inset:-9px; border:1px solid rgba(195,21,55,.25); border-radius:50%; opacity:0; transform:scale(.7); }
.pv-row.is-active .pv-seal .seal::after { animation: sealEcho 1.15s cubic-bezier(.2,.8,.2,1) .9s both; }
@keyframes sealEcho { 0% { opacity:0; transform:scale(.72); } 35% { opacity:.65; } 100% { opacity:0; transform:scale(1.35); } }

@media (max-width: 900px) {
  .decision-grid { grid-template-columns: 1fr; }
  .decision-card { min-height: 250px; }
}
@media (max-width: 760px) {
  .brandmark { top: 13px; left: 16px; width: 44px; height: 44px; padding: 6px; }
  .brandmark .enso-mode { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
  .hero-art { inset: 0; width: 100%; height: 100%; object-position: 47% center; }
  .wanderer-crossing { width: 62px; bottom: 6.5%; animation-duration: 32s; }
  .hero-water-breath { left: 4%; right: 0; }
  .pv-row { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mist-plane, .hero-water-breath i, .wanderer-crossing, .wanderer-step, .step-ripple, .hero-ink-fleck { animation: none !important; }
  .wanderer-crossing { left: 18%; opacity: .9; }
  .decision-card .decision-viz.nodes i { transform: translate(calc(50% - var(--x)), calc(42px - var(--y))); background: var(--shu); }
  .decision-viz.flow::before { clip-path: inset(0); }
  .pv-row { opacity: 1; transform: none; }
}

/* ============================================================
   v0.18 — original film restored, central adaptive enso,
   visible live brushwork, editorial case-study composition,
   and project-specific research narratives
   ============================================================ */

/* Original moving sumi-e film. The rejected still-wanderer layers remain
   inert so the hero video source can later be swapped without a rebuild. */
.hero-paint, .hero .sumi { display: none !important; }
.scene .heroVid { display: block; filter: contrast(1.05) brightness(.9); }
.hero h1 { color: var(--ink); text-shadow: 0 2px 40px rgba(10,10,11,.72); }
.hero h1 em,
.hero-heading-accent { color: var(--shu); }
.hero .hero-sub, .hero .scroll-hint { color: var(--gray); }
.hero .hero-sub b { color: var(--ink); }
.hero .scroll-hint::after { background: linear-gradient(var(--gray), transparent); }

/* The enso belongs to the centered navigation object. Its mask changes ink
   color smoothly when the navigation crosses an explicitly light scene. */
.brandmark { display: none !important; }
nav.glassnav { gap: 23px; padding: 7px 22px 7px 10px; transition: background .55s cubic-bezier(.2,.8,.2,1), border-color .55s ease, box-shadow .55s ease; }
nav.glassnav .mark { width: 38px; height: 38px; justify-content: center; border-radius: 50%; }
nav.glassnav .mark .enso { width: 32px; height: 32px; background-color: var(--ink); transition: background-color .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1); }
nav.glassnav.nav-light .mark .enso { background-color: var(--canvas); transform: rotate(-4deg); }
nav.glassnav .mark:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }

/* The progress rail is finalized in the core rail rules above. */

/* One reusable, unmistakably visible calligraphy stroke. White is the
   default on the dark canvas; vermilion is reserved for the home invitation. */
.live-brush { position: relative; pointer-events: none; }
.live-brush > .base, .live-brush > .fill {
  position: absolute; inset: 0;
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
}
.live-brush > .base { background: rgba(245,242,235,.14); }
.live-brush > .fill { background: var(--ink); }
.live-brush.brush-primary > .fill { background: var(--shu); }
.live-brush.anim > .fill { clip-path: inset(0 100% 0 0); }

.kicker .no.rule::before,
.stat::before,
.results .r::before {
  border: 0; border-radius: 0; background: var(--ink);
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
}
.kicker .no.rule::before { width: 30px; height: 7px; opacity: .88; }
.stat::before, .results .r::before { width: 42px; height: 8px; opacity: .82; }
.results .spark { height: 8px; background: transparent; }
.results .spark i { background: var(--ink); border-radius: 0; -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat; mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat; }
.brush-underline { width: min(390px, 68vw); height: 24px; margin-bottom: 38px; }
.brush-underline .base, .brush-underline .fill { position: absolute; inset: 0; }
.jline .jbrush .fill { background: var(--ink); }
.jline .jbrush .base { background: rgba(245,242,235,.14); }
.pv-mid .pv-brush { background: var(--ink); }
.pv-row { border-top: 0; position: relative; }
.pv-row + .pv-row::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 7px; background: rgba(245,242,235,.28); -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat; mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat; }

/* About timeline — a white vertical brush physically draws down the page. */
.timeline-brush { position: absolute; left: calc(8vw + 2px); top: 5vh; bottom: 9vh; width: 16px; }
.timeline-brush > .base, .timeline-brush > .fill,
.ledger-spine > .base, .ledger-spine > .fill {
  -webkit-mask-image: url("../media/brand/brush-vertical.svg"); mask-image: url("../media/brand/brush-vertical.svg");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.timeline-brush.anim > .fill { clip-path: inset(0 0 100% 0); }
.timeline-brush > .fill { filter: drop-shadow(0 0 5px rgba(245,242,235,.28)); }

/* Editorial rhythm: transition sections are centered and spacious; product
   chapters remain asymmetric because their job is explanation beside proof. */
.act { padding-block: clamp(110px, 15vh, 190px); }
.act--centered { max-width: 1320px; text-align: center; padding-block: clamp(140px, 18vh, 220px); }
.act--centered > .kicker, .act--centered > h3, .act--centered > .lede { margin-left: auto; margin-right: auto; }
.act--centered > h3 { max-width: 18ch; text-wrap: balance; }
.act--centered > .lede { max-width: 68ch; font-size: var(--t-body); line-height: 1.85; text-wrap: pretty; }
.act--centered .decision-grid, .act--centered .pv { text-align: left; }
.chapter-grid { gap: clamp(54px, 7vw, 112px); }
.journey { padding-block: clamp(130px, 17vh, 210px); }
.journey > h3.display { font-size: clamp(32px, 4.4vw, 64px) !important; line-height: 1.05 !important; max-width: 16ch !important; text-wrap: balance; }

/* Shared card shell, distinct project-native visual languages. */
.decision-grid { gap: 22px; margin-top: 64px; }
.decision-card { min-height: 340px; padding: 30px; }
.decision-viz { height: 104px; margin-top: 28px; }

/* Talent: one portable profile changes shape, reveals depth, then enables action. */
.viz-talent-profile .profile-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 74px; height: 44px; border-radius: 10px; display: grid; place-items: center; border: 1px solid rgba(245,242,235,.25); color: var(--ink); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; z-index: 2; background: var(--canvas); }
.viz-talent-profile .shape { border: 1px solid rgba(245,242,235,.18); border-radius: 7px; left: 50%; top: 50%; opacity: .35; }
.viz-talent-profile .page { width: 52px; height: 68px; }
.viz-talent-profile .card { width: 76px; height: 42px; }
.viz-talent-profile .flyout { width: 36px; height: 58px; }
.viz-talent-profile .compact { width: 34px; height: 25px; }
.decision-card.is-active .viz-talent-profile .page { transform: translate(-128%,-48%); opacity: 1; border-color: var(--shu); }
.decision-card.is-active .viz-talent-profile .card { transform: translate(30%,-115%); opacity: 1; }
.decision-card.is-active .viz-talent-profile .flyout { transform: translate(130%,10%); opacity: 1; }
.decision-card.is-active .viz-talent-profile .compact { transform: translate(-130%,92%); opacity: 1; }
.viz-talent-depth { display: grid; align-content: center; gap: 7px; }
.viz-talent-depth i { position: relative; inset: auto; width: 100%; height: 25px; border: 1px solid rgba(245,242,235,.14); border-radius: 7px; transform: scaleX(.66); transform-origin: left; }
.viz-talent-depth i b { font-style: normal; font-size: var(--t-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); padding-left: 10px; line-height: 23px; }
.decision-card.is-active .viz-talent-depth i { transform: scaleX(1); border-color: rgba(245,242,235,.3); }
.decision-card.is-active .viz-talent-depth i:nth-child(1) { border-color: var(--shu); }
.viz-talent-action { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; align-items: center; }
.viz-talent-action span { position: relative; z-index: 2; padding: 10px 5px; border-radius: 999px; border: 1px solid rgba(245,242,235,.16); background: var(--canvas); text-align: center; color: var(--gray); font-size: var(--t-label); letter-spacing: .15em; text-transform: uppercase; }
.viz-talent-action .action-brush { position: absolute; left: 8%; right: 8%; top: 47%; height: 12px; background: var(--ink); -webkit-mask: url("../media/brand/brush-line.png") center/100% 100% no-repeat; mask: url("../media/brand/brush-line.png") center/100% 100% no-repeat; clip-path: inset(0 100% 0 0); }
.decision-card.is-active .viz-talent-action .action-brush { clip-path: inset(0); transition: clip-path 1.1s cubic-bezier(.2,.8,.2,1); }
.decision-card.is-active .viz-talent-action span:last-of-type { color: var(--ink); border-color: var(--shu); }

/* Finance: business language becomes ledger structure and validated policy. */
.viz-finance-translate { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 8px; }
.business-facts { display: grid; gap: 5px; }
.business-facts i { position: relative; inset: auto; padding: 6px 8px; border: 1px solid rgba(245,242,235,.15); border-radius: 6px; color: var(--gray); font-size: var(--t-caption); font-style: normal; transform: translateX(-9px); opacity: .25; }
.journal-entry { display: grid; grid-template-columns: 20px 1fr; gap: 5px; align-items: center; }
.journal-entry b { color: var(--shu-text); font-size: var(--t-caption); }
.journal-entry i { position: relative; inset: auto; height: 6px; background: rgba(245,242,235,.18); border-radius: 4px; transform: scaleX(.2); transform-origin: left; }
.translate-mark { color: var(--gray); opacity: .35; }
.decision-card.is-active .business-facts i { transform: none; opacity: 1; }
.decision-card.is-active .journal-entry i { transform: scaleX(1); }
.viz-finance-ledger { display: grid; align-content: center; gap: 8px; }
.viz-finance-ledger div { display: flex; justify-content: space-between; padding: 9px 10px; border-radius: 6px; background: rgba(245,242,235,.035); color: var(--gray); font-size: var(--t-caption); }
.viz-finance-ledger div b { color: var(--ink); font-weight: 500; }
.viz-finance-ledger .ledger-balance { position: relative; inset: auto; height: 9px; background: var(--ink); -webkit-mask: url("../media/brand/brush-line.png") center/100% 100% no-repeat; mask: url("../media/brand/brush-line.png") center/100% 100% no-repeat; transform: scaleX(0); transform-origin: left; }
.decision-card.is-active .viz-finance-ledger .ledger-balance { transform: scaleX(1); }
.viz-finance-rule { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.rule-code { display: grid; gap: 8px; }
.rule-code i { position: relative; inset: auto; height: 6px; border-radius: 3px; background: rgba(245,242,235,.18); width: 80%; }
.rule-code i:nth-child(2) { width: 55%; }
.rule-state { color: var(--shu-text); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; }
.rule-check { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--shu); color: var(--ink); opacity: 0; transform: scale(.5); }
.decision-card.is-active .rule-state { opacity: 0; }
.decision-card.is-active .rule-check { opacity: 1; transform: scale(1); transition: opacity .3s .6s, transform .5s cubic-bezier(.2,.8,.2,1) .6s; }

/* PNC: fields filter, decisions pace, and state crosses devices. */
.viz-pnc-filter { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px 12px; align-content: center; }
.viz-pnc-filter i { position: relative; inset: auto; height: 8px; border-radius: 4px; background: rgba(245,242,235,.17); }
.decision-card.is-active .viz-pnc-filter i:not(.keep) { opacity: .08; transform: scaleX(.3); }
.decision-card.is-active .viz-pnc-filter i.keep { background: var(--shu); transform: scaleX(1.08); }
.viz-pnc-pace { display: grid; grid-template-columns: 24px 1fr 24px 1fr 24px; align-items: start; gap: 5px; padding-top: 10px; }
.viz-pnc-pace span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(245,242,235,.25); color: var(--gray); font-size: var(--t-caption); }
.viz-pnc-pace > i { position: relative; inset: auto; height: 7px; margin-top: 8px; background: var(--ink); -webkit-mask: url("../media/brand/brush-line.png") center/100% 100% no-repeat; mask: url("../media/brand/brush-line.png") center/100% 100% no-repeat; transform: scaleX(0); transform-origin: left; }
.viz-pnc-pace .pace-question { position: absolute; left: 15%; right: 15%; bottom: 5px; height: 29px; border-radius: 8px; border: 1px solid rgba(245,242,235,.16); transform: translateY(8px); opacity: .2; }
.decision-card.is-active .viz-pnc-pace > i { transform: scaleX(1); }
.decision-card.is-active .viz-pnc-pace span { border-color: var(--shu); color: var(--ink); }
.decision-card.is-active .viz-pnc-pace .pace-question { transform: none; opacity: 1; }
.viz-pnc-handoff { display: grid; grid-template-columns: 1.4fr 46px .55fr; align-items: center; gap: 10px; }
.screen-wide, .screen-phone { border: 1px solid rgba(245,242,235,.2); border-radius: 7px; padding: 10px; display: grid; gap: 6px; }
.screen-phone { height: 82px; border-radius: 10px; }
.screen-wide i, .screen-phone i { position: relative; inset: auto; height: 5px; border-radius: 3px; background: rgba(245,242,235,.2); }
.handoff-brush { height: 10px; background: var(--ink); -webkit-mask: url("../media/brand/brush-line.png") center/100% 100% no-repeat; mask: url("../media/brand/brush-line.png") center/100% 100% no-repeat; clip-path: inset(0 100% 0 0); }
.decision-card.is-active .handoff-brush { clip-path: inset(0); transition: clip-path 1s cubic-bezier(.2,.8,.2,1); }
.decision-card.is-active .screen-phone { border-color: var(--shu); transform: translateY(-3px); }

/* Finance uses a vertical ledger transformation, not the talent suite line. */
.journey--ledger { max-width: 1100px; }
.ledger-thread { position: relative; margin-top: 72px; padding-left: 92px; display: grid; gap: 28px; }
.ledger-spine { position: absolute; left: 20px; top: 10px; bottom: 10px; width: 16px; }
.ledger-spine.anim > .fill { clip-path: inset(0 0 100% 0); }
.ledger-stage { position: relative; display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px 44px; padding: 30px 32px; border-radius: 18px; border: 1px solid var(--hairline); background: rgba(245,242,235,.014); }
.ledger-node { position: absolute; left: -71px; top: 50%; width: 14px; height: 14px; transform: translate(-50%,-50%); border-radius: 50%; border: 2px solid var(--gray); background: var(--canvas); }
.ledger-stage.on .ledger-node { background: var(--shu); border-color: var(--shu); box-shadow: 0 0 16px rgba(195,21,55,.55); }
.ledger-stage .sc { color: var(--shu-text); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; }
.ledger-stage h4 { grid-column: 1; font-family: var(--display); font-weight: 500; font-size: var(--t-h4); letter-spacing: -.02em; }
.ledger-stage p { grid-column: 1; color: var(--gray); font-size: var(--t-caption); line-height: 1.65; }
.ledger-mini { grid-column: 2; grid-row: 1 / span 3; align-self: center; min-height: 90px; border-radius: 12px; border: 1px solid rgba(245,242,235,.09); padding: 16px; background: rgba(10,10,11,.45); }
.ledger-mini.facts { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.ledger-mini.facts i { font-style: normal; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(245,242,235,.14); color: var(--gray); font-size: var(--t-caption); }
.ledger-mini.balance, .ledger-mini.entry { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-content: center; color: var(--gray); font-size: var(--t-caption); }
.ledger-mini.balance b { color: var(--ink); }
.ledger-mini.entry b { color: var(--shu); }
.ledger-mini.entry i { height: 6px; border-radius: 3px; background: rgba(245,242,235,.2); }
.ledger-mini.entry span { grid-column: 1/-1; color: var(--ink); text-align: right; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .14em; }

/* PNC uses a branching application conversation. */
.journey--application { max-width: 1180px; }
.application-path { position: relative; margin-top: 68px; display: grid; grid-template-columns: repeat(3,1fr); gap: 34px; }
.application-brush { position: absolute; left: 6%; right: 6%; top: 24px; height: 14px; }
.application-path article { position: relative; z-index: 2; padding-top: 72px; text-align: center; }
.application-path article > span { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--canvas); border: 1px solid var(--shu); color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .1em; }
.application-path h4 { font-family: var(--display); font-weight: 500; font-size: var(--t-lede); }
.application-path p { margin: 10px auto 0; color: var(--gray); font-size: var(--t-caption); line-height: 1.65; max-width: 28ch; }

/* Long lending screens read as an editorial gallery, not five unbounded pages.
   Every image still opens at full size through the shared lightbox. */
.mstrip .cell img { width: 100%; height: clamp(380px, 46vw, 560px); object-fit: cover; object-position: top; }

@media (max-width: 900px) {
  .act, .act--centered, .journey { padding-block: 105px; }
  .decision-card { min-height: 310px; }
  .ledger-thread { padding-left: 58px; }
  .ledger-spine { left: 12px; }
  .ledger-node { left: -39px; }
  .ledger-stage { grid-template-columns: 1fr; }
  .ledger-mini { grid-column: 1; grid-row: auto; }
  .application-path { grid-template-columns: 1fr; gap: 34px; }
  .application-brush { left: 11px; top: 20px; bottom: 20px; width: 16px; height: auto; }
  .application-brush > .base, .application-brush > .fill { -webkit-mask-image: url("../media/brand/brush-vertical.svg"); mask-image: url("../media/brand/brush-vertical.svg"); }
  .application-brush.anim > .fill { clip-path: inset(0 0 100% 0); }
  .application-path article { padding: 0 0 0 64px; text-align: left; }
  .application-path article > span { left: 0; top: 0; transform: none; }
  .application-path p { margin-left: 0; }
}
@media (max-width: 760px) {
  nav.glassnav { gap: 17px; padding-right: 17px; }
  nav.glassnav .mark { width: 34px; height: 34px; }
  nav.glassnav .mark .enso { width: 29px; height: 29px; }
  .timeline-brush { left: calc(8vw - 3px); width: 16px; }
  .pv-row + .pv-row::before { left: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-brush.anim > .fill, .timeline-brush.anim > .fill, .ledger-spine.anim > .fill, .application-brush.anim > .fill { clip-path: none !important; }
  .business-facts i, .journal-entry i, .ledger-balance, .rule-check, .viz-pnc-filter i, .viz-pnc-pace > i, .pace-question, .handoff-brush { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ============================================================
   v0.19 — no-mask visibility fallback
   Critical brand and brush marks render as real image layers so they remain
   visible in browsers that drop external CSS masks.
   ============================================================ */

/* Real enso artwork, two explicit layers, cross-faded by nav-light. */
nav.glassnav .mark .enso {
  position: relative; display: block; width: 40px; height: 40px;
  background: none !important; -webkit-mask: none !important; mask: none !important;
  filter: none !important; transform: none;
}
nav.glassnav .mark .enso::before,
nav.glassnav .mark .enso::after {
  content: ""; position: absolute; inset: 0;
  background: url("../media/brand/enso.png") center / contain no-repeat;
  transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1);
}
nav.glassnav .mark .enso::before { opacity: 1; }
nav.glassnav .mark .enso::after { opacity: 0; filter: invert(1); transform: rotate(-5deg) scale(.94); }
nav.glassnav .mark .enso::before { filter: drop-shadow(0 0 5px rgba(245,242,235,.28)); }
nav.glassnav.nav-light .mark .enso::before { opacity: 0; transform: rotate(5deg) scale(.94); }
nav.glassnav.nav-light .mark .enso::after { opacity: 1; transform: none; }

/* Horizontal brush artwork. Clip-path still provides the live hand-drawn
   reveal, but the visible mark itself is now the PNG—not a CSS mask. */
.live-brush > .base,
.live-brush > .fill,
.jline .jbrush span {
  background-color: transparent !important;
  background-image: url("../media/brand/brush-line.png") !important;
  background-position: center !important; background-size: 100% 100% !important; background-repeat: no-repeat !important;
  -webkit-mask: none !important; mask: none !important;
}
.live-brush > .base { opacity: .18; }
.live-brush > .fill { opacity: 1; }
.live-brush.brush-primary > .fill {
  filter: brightness(0) saturate(100%) invert(28%) sepia(53%) saturate(2425%) hue-rotate(328deg) brightness(77%) contrast(96%);
}

/* Actual vertical SVG artwork for About, Finance, and mobile PNC. */
.timeline-brush > .base, .timeline-brush > .fill,
.ledger-spine > .base, .ledger-spine > .fill {
  background-image: url("../media/brand/brush-vertical.svg") !important;
  -webkit-mask: none !important; mask: none !important;
}

/* Decorative and narrative strokes that previously relied only on masks. */
.kicker .no.rule::before,
.stat::before,
.results .r::before,
.results .spark i,
.pv-mid .pv-brush,
.pv-row + .pv-row::before,
.viz-talent-action .action-brush,
.viz-finance-ledger .ledger-balance,
.viz-pnc-pace > i,
.handoff-brush {
  background-color: transparent !important;
  background-image: url("../media/brand/brush-line.png") !important;
  background-position: center !important; background-size: 100% 100% !important; background-repeat: no-repeat !important;
  -webkit-mask: none !important; mask: none !important;
}
.kicker .no.rule::before { width: 36px; height: 10px; }
.stat::before, .results .r::before { width: 54px; height: 11px; }
.pv-mid { height: 20px; }
.pv-mid .pv-brush { filter: none; }
.brush-underline { height: 28px; }

nav.glassnav .mark { width: 44px; height: 44px; }

@media (max-width: 760px) {
  nav.glassnav .mark { width: 38px; height: 38px; }
  nav.glassnav .mark .enso { width: 35px; height: 35px; }
}

@media (max-width: 900px) {
  .application-brush > .base, .application-brush > .fill {
    background-image: url("../media/brand/brush-vertical.svg") !important;
    -webkit-mask: none !important; mask: none !important;
  }
}

/* ============================================================
   v0.20 — flying-white ink system + tailored proof scenes
   ============================================================ */

/* A quieter mark inside the central glass pill. */
nav.glassnav .mark { width: 36px; height: 36px; justify-content: center; }
nav.glassnav .mark .enso { width: 30px; height: 30px; }

/* One generated, hand-made flying-white stroke now supplies every drawn line. */
.live-brush > .base,
.live-brush > .fill,
.jline .jbrush span,
.kicker .no.rule::before,
.stat::before,
.results .r::before,
.results .spark i,
.pv-mid .pv-brush,
.pv-row + .pv-row::before,
.viz-talent-action .action-brush,
.viz-finance-ledger .ledger-balance,
.viz-pnc-pace > i,
.handoff-brush {
  background-color: transparent !important;
  background-image: url("../media/brand/sumi-brush-v1.png") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  -webkit-mask: none !important; mask: none !important;
}
.timeline-brush > .base, .timeline-brush > .fill,
.ledger-spine > .base, .ledger-spine > .fill,
.application-brush > .base, .application-brush > .fill {
  background-color: transparent !important;
  background-image: url("../media/brand/sumi-brush-vertical-v1.png") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  -webkit-mask: none !important; mask: none !important;
}

/* Section labels use one hierarchy: eyebrow, brush, headline. */
.stage-tag { gap: 0; }
.stage-tag::before { display: none !important; }
.journey--ledger > .kicker,
.journey--application > .kicker { display: flex; justify-content: center; text-align: center; }
.journey--ledger > h3,
.journey--ledger > .lede,
.journey--application > h3,
.journey--application > .lede { margin-left: auto; margin-right: auto; text-align: center; }
.journey--ledger > h3,
.journey--application > h3 { max-width: 18ch; }
.journey--ledger > .lede,
.journey--application > .lede { max-width: 70ch; }
.ledger-node { display: none !important; }

/* Finance testing pairs a shorter claim with the adoption outcome. */
.adoption-heading {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(28px,5vw,76px);
  align-items: end; max-width: 930px; margin: 0 auto 28px; text-align: left;
}
.adoption-heading h3 { margin: 0; max-width: 12ch; }
.adoption-measure { min-width: 190px; padding: 0 0 7px 22px; border-left: 1px solid rgba(245,242,235,.14); }
.adoption-measure b { display: block; color: var(--shu); font-family: var(--display); font-size: var(--t-h2); font-weight: 500; letter-spacing: -.04em; line-height: .9; }
.adoption-measure span { display: block; margin-top: 10px; color: var(--gray); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; }

/* Proof is shown through project-specific product behavior, never a repeated seal. */
.pv-seal { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.proof-viz {
  position: relative; min-height: 76px; margin: 0 auto 14px; padding: 12px;
  border: 1px solid rgba(245,242,235,.11); border-radius: 14px;
  background: linear-gradient(145deg, rgba(245,242,235,.055), rgba(245,242,235,.015));
  overflow: hidden;
}
.pv-seal .vf { color: var(--ink); }

/* Talent: progressive profile depth, redundant status, keyboard order. */
.proof-profile { width: 126px; }
.proof-profile i { position: absolute; width: 73px; height: 46px; border: 1px solid rgba(245,242,235,.24); border-radius: 8px; background: rgba(10,10,11,.72); transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.proof-profile i:nth-child(1) { left: 12px; top: 16px; }
.proof-profile i:nth-child(2) { left: 25px; top: 12px; }
.proof-profile i:nth-child(3) { left: 40px; top: 8px; }
.pv-row.is-active .proof-profile i:nth-child(1) { transform: translate(-5px,5px); }
.pv-row.is-active .proof-profile i:nth-child(3) { transform: translate(7px,-3px); }
.proof-status { width: 132px; display: grid; gap: 8px; align-content: center; }
.proof-status i { padding: 6px 9px; border: 1px solid rgba(245,242,235,.16); border-radius: 6px; color: var(--ink); font-size: var(--t-caption); font-style: normal; letter-spacing: .1em; text-align: left; }
.proof-status i::before { content: ""; display: inline-block; width: 11px; height: 2px; margin-right: 8px; vertical-align: middle; background: var(--ink); }
.proof-focus { width: 132px; display: flex; align-items: center; justify-content: space-between; }
.proof-focus::before { content: ""; position: absolute; left: 24px; right: 24px; top: 50%; height: 1px; background: rgba(245,242,235,.16); }
.proof-focus i { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(245,242,235,.28); border-radius: 6px; background: var(--canvas); color: var(--ink); font-size: var(--t-caption); font-style: normal; }

/* Finance: balanced ledger, explicit state, upstream rule validation. */
.proof-balance { width: 150px; display: grid; align-content: center; gap: 8px; }
.proof-balance span { display: flex; justify-content: space-between; color: var(--gray); font-size: var(--t-caption); letter-spacing: .06em; }
.proof-balance b { color: var(--ink); font-weight: 500; }
.proof-balance::after { content: ""; height: 6px; background: url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.2,.8,.2,1) .15s; }
.pv-row.is-active .proof-balance::after { clip-path: inset(0); }
.proof-states { width: 150px; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; align-content: center; }
.proof-states i { padding: 7px 3px; border: 1px solid rgba(245,242,235,.14); border-radius: 5px; color: var(--gray); font-size: var(--t-caption); font-style: normal; text-align: center; }
.proof-states i:last-child { color: var(--ink); border-color: rgba(245,242,235,.38); }
.proof-rule { width: 150px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; align-content: center; }
.proof-rule i { height: 6px; border-radius: 0; background: rgba(245,242,235,.22); transform: scaleX(.3); transform-origin: left; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.proof-rule i:nth-child(2) { grid-column: span 2; }
.proof-rule span { grid-column: 1/-1; margin-top: 7px; color: var(--ink); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; }
.pv-row.is-active .proof-rule i { transform: scaleX(1); }

/* Lending: conditional fields, humane pacing, responsive handoff. */
.proof-fields { width: 140px; display: grid; align-content: center; gap: 7px; }
.proof-fields i { height: 10px; border: 1px solid rgba(245,242,235,.19); border-radius: 4px; transform-origin: top; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.proof-fields i:nth-child(2) { width: 72%; }
.proof-fields i:nth-child(3) { width: 46%; opacity: .18; }
.pv-row.is-active .proof-fields i:nth-child(3) { opacity: 0; transform: scaleY(0); }
.proof-pace { width: 150px; display: grid; gap: 7px; align-content: center; }
.proof-pace span { position: relative; padding-left: 30px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .08em; text-align: left; }
.proof-pace span::before { content: attr(data-step); position: absolute; left: 0; top: 0; width: 20px; color: rgba(245,242,235,.38); font-size: var(--t-caption); letter-spacing: .08em; }
.proof-pace span:last-child { color: var(--ink); }
.proof-responsive { width: 148px; height: 82px; }
.proof-responsive i { position: absolute; display: block; border: 1px solid rgba(245,242,235,.26); background: rgba(10,10,11,.55); transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.desktop-proof { left: 17px; top: 17px; width: 82px; height: 46px; border-radius: 5px; }
.mobile-proof { right: 15px; top: 11px; width: 29px; height: 56px; border-radius: 7px; }
.pv-row.is-active .desktop-proof { transform: translateX(-4px); }
.pv-row.is-active .mobile-proof { transform: translateX(4px); }

@media (max-width: 760px) {
  nav.glassnav .mark { width: 33px; height: 33px; }
  nav.glassnav .mark .enso { width: 27px; height: 27px; }
  .adoption-heading { grid-template-columns: 1fr; text-align: center; }
  .adoption-heading h3 { margin-inline: auto; }
  .adoption-measure { min-width: 0; padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(245,242,235,.14); }
  .pv-seal { text-align: left; }
  .proof-viz { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .proof-balance::after { clip-path: inset(0) !important; }
  .proof-rule i, .proof-fields i, .proof-profile i, .proof-responsive i { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* ============================================================
   v0.21 — annotated visual polish pass
   ============================================================ */

/* Give the moving painting the same tactile surface as the rest of the site. */
.hero .scene::after {
  content: ""; position: absolute; inset: -8%; z-index: 5; pointer-events: none;
  opacity: .045; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.9'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* Overlap the first act with the film's black wash so the edit dissolves. */
.inkdata { margin-top: -14vh; height: 114vh; z-index: 6; }
.inkdata::before {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 28vh;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,11,0) 0%, rgba(10,10,11,.62) 42%, var(--canvas) 86%);
}

/* Kicker hierarchy: vermilion lives in the brush; label copy stays quiet. */
.kicker .no.rule::before {
  filter: brightness(0) saturate(100%) invert(28%) sepia(53%) saturate(2425%) hue-rotate(328deg) brightness(77%) contrast(96%);
}

/* The connected-suite premise is an editorial interlude, not a left chapter. */
.journey--suite > .kicker { display: flex; justify-content: center; text-align: center; }
.journey--suite > h3,
.journey--suite > .lede { margin-left: auto; margin-right: auto; text-align: center; }
.journey--suite > .lede { max-width: 70ch; }

/* Waypoints emerge only when the live brush reaches them. */
.jstage .dot {
  opacity: 0;
  transform: translate(-50%,-50%) scale(.08);
  transition: opacity .32s ease, transform .48s cubic-bezier(.2,.8,.2,1), background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.jstage.on .dot { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* Keep the informative animated spark; remove the redundant upper stroke. */
.results .r::before { display: none !important; }

/* The whole central pill—not just the enso—cross-fades with the scene below. */
nav.glassnav a:not(.mark) {
  color: rgba(245,242,235,.84);
  transition: color .55s cubic-bezier(.2,.8,.2,1), opacity .55s cubic-bezier(.2,.8,.2,1);
}
nav.glassnav.nav-light {
  background: rgba(245,242,235,.16);
  border-color: rgba(10,10,11,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 40px rgba(10,10,11,.16);
}
nav.glassnav.nav-light a:not(.mark) { color: rgba(10,10,11,.68); }
nav.glassnav.nav-light a:not(.mark):hover,
nav.glassnav.nav-light a.active { color: var(--canvas); }

@media (max-width: 760px) {
  .inkdata { margin-top: -10vh; height: 110vh; }
  .inkdata::before { height: 22vh; }
}

@media (prefers-reduced-motion: reduce) {
  .jstage .dot { opacity: 1; transform: translate(-50%,-50%) scale(1); transition: none; }
}

/* ============================================================
   v0.22 — editorial ratio + adoption evidence pass
   ============================================================ */

/* Research-law intros keep their scale without becoming poster-sized. */
.act--research-laws { padding-block: clamp(120px, 16vh, 190px); }
.act--research-laws > h3 {
  max-width: 16ch; font-size: clamp(36px, 4.35vw, 66px); line-height: 1.06;
  text-wrap: balance;
}
.act--research-laws > .lede {
  max-width: 74ch; margin-top: 30px; font-size: var(--t-small); line-height: 1.75;
  text-wrap: pretty;
}

/* Finance research/product chapters give evidence more room and copy less. */
.chapter-grid--media-led {
  grid-template-columns: minmax(310px, .78fr) minmax(520px, 1.22fr);
  gap: clamp(54px, 7vw, 112px); align-items: start;
}
.chapter-grid--media-led .editorial-copy h3 {
  max-width: 12ch; font-size: var(--t-h2); line-height: 1.08;
  text-wrap: balance;
}
.chapter-grid--media-led .editorial-copy .lede {
  max-width: 48ch; font-size: var(--t-small); line-height: 1.72;
}
.chapter-grid--media-led .mediaframe { margin-top: 8px; }
.act--media-led > .pill-row { margin-top: 52px; }

/* Finding → response needs one directional brush, not a second row divider. */
.pv-row + .pv-row::before { display: none !important; }

/* Explicit hero state makes the contrast change unmistakable, then the
   sampler returns the pill to light ink over the dark case-study canvas. */
nav.glassnav a:not(.mark) { color: rgba(245,242,235,.94); }
nav.glassnav.nav-light {
  background: rgba(245,242,235,.30);
  border-color: rgba(10,10,11,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 12px 42px rgba(10,10,11,.18);
}
nav.glassnav.nav-light a:not(.mark) { color: rgba(10,10,11,.88); }

/* Adoption becomes a compact evidence moment: curve and number resolve together. */
.adoption-section .adoption-heading {
  grid-template-columns: minmax(0, .9fr) minmax(300px, 420px);
  align-items: center; max-width: 1080px; gap: clamp(46px, 7vw, 104px); margin-bottom: 22px;
}
.adoption-section .adoption-heading h3 { max-width: 10ch; font-size: clamp(42px, 5vw, 76px); line-height: 1.02; }
.adoption-measure {
  position: relative; width: 100%; min-width: 0; min-height: 190px; padding: 0;
  border-left: 0; overflow: hidden;
}
.adoption-chart { width: 100%; height: 148px; overflow: visible; }
.adoption-grid { fill: none; stroke: rgba(245,242,235,.075); stroke-width: 1; }
.adoption-curve { fill: none; stroke: var(--shu); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(195,21,55,.32)); }
.adoption-point { fill: var(--shu); transform-origin: center; filter: drop-shadow(0 0 7px rgba(195,21,55,.55)); }
.adoption-value { position: absolute; right: 0; bottom: 0; text-align: right; }
.adoption-value b { font-size: clamp(42px, 5vw, 72px); }
.adoption-value b .adoption-count {
  display: inline; margin: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: none;
}
.adoption-value > span { margin-top: 8px; }
.adoption-section > .adoption-summary {
  max-width: 72ch; margin: 28px auto 0; font-size: var(--t-small); line-height: 1.75; text-align: center;
}
.adoption-section > .pv { margin-top: 74px; }

@media (max-width: 900px) {
  .chapter-grid--media-led { grid-template-columns: 1fr; gap: 42px; }
  .chapter-grid--media-led .editorial-copy h3 { max-width: 15ch; }
  .chapter-grid--media-led .editorial-copy .lede { max-width: 62ch; }
  .adoption-section .adoption-heading { grid-template-columns: 1fr; text-align: center; }
  .adoption-section .adoption-heading h3 { margin-inline: auto; }
  .adoption-measure { max-width: 430px; margin-inline: auto; padding: 0; border-top: 0; }
}

@media (max-width: 560px) {
  .act--research-laws > h3 { font-size: var(--t-h2); }
  .adoption-measure { min-height: 170px; }
  .adoption-chart { height: 128px; }
}

@media (prefers-reduced-motion: reduce) {
  .adoption-curve { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .adoption-point { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   v0.23 — Finance composition + contrast refinement
   ============================================================ */

/* Keep the opening navigation unmistakably legible over the pale painting,
   including the instant before the background sampler starts. */
nav.glassnav.nav-light {
  background: rgba(245,242,235,.64);
  border-color: rgba(10,10,11,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 12px 42px rgba(10,10,11,.22);
}
nav.glassnav.nav-light a:not(.mark) { color: rgba(10,10,11,.96); }
nav.glassnav.nav-light .mark .enso::before { opacity: 0 !important; }
nav.glassnav.nav-light .mark .enso::after {
  opacity: 1 !important; transform: none !important;
  filter: invert(1) contrast(1.45) drop-shadow(0 1px 1px rgba(10,10,11,.18));
}

/* Editorial statements should read as statements, not multi-line posters. */
.act--research-laws > h3 { max-width: 13ch; }
.journey--ledger > h3 {
  max-width: 15ch; font-size: clamp(38px, 5vw, 70px); line-height: 1.04;
  text-wrap: balance;
}

/* Fulcrum: concise thesis beside the primary product moment, then let the
   three capabilities occupy the full canvas instead of trailing one column. */
.act--fulcrum .chapter-grid--media-led {
  grid-template-columns: minmax(280px, .66fr) minmax(600px, 1.34fr);
  gap: clamp(48px, 6vw, 92px); align-items: center;
}
.act--fulcrum .editorial-copy h3 { max-width: 11ch; }
.act--fulcrum .editorial-copy .lede { max-width: 46ch; }
.act--fulcrum .mediaframe { margin-top: 0; }
.feature-band {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin-top: clamp(38px, 5vw, 64px);
}
.feature-band .f {
  position: relative; min-height: 150px; padding: 24px 24px 22px;
  border: 1px solid rgba(245,242,235,.10); border-radius: 18px;
  background: linear-gradient(145deg, rgba(245,242,235,.052), rgba(245,242,235,.012));
  overflow: hidden;
}
.feature-band .f::after {
  content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 6px;
  background: url("../media/brand/sumi-brush-v1.png") center / 100% 100% no-repeat;
  opacity: .42; transform: scaleX(1); transform-origin: left;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.feature-band.anim .f::after { transform: scaleX(0); }
.feature-band.anim .f:nth-child(2)::after { transition-delay: .12s; }
.feature-band.anim .f:nth-child(3)::after { transition-delay: .24s; }
.feature-band.anim.is-active .f::after { transform: scaleX(1); }
.feature-band .f > span {
  display: block; margin-bottom: 24px; color: var(--shu-text); font-size: var(--t-caption);
  letter-spacing: .18em;
}
.feature-band .f b { display: block; color: var(--ink); font-size: var(--t-small); font-weight: 600; }
.feature-band .f p { margin-top: 8px; color: var(--gray); font-size: var(--t-caption); line-height: 1.62; }
.act--fulcrum > .strip { margin-top: 30px; }

/* Verification stays scannable: the evidence visual leads, supporting copy
   no longer competes with the project chapter headings. */
.pv-row { padding-block: 38px; }
.pv-find p, .pv-resp p {
  font-size: var(--t-lede); line-height: 1.42;
}

@media (max-width: 900px) {
  .act--fulcrum .chapter-grid--media-led { grid-template-columns: 1fr; gap: 38px; }
  .act--fulcrum .editorial-copy h3 { max-width: 13ch; }
  .feature-band { grid-template-columns: 1fr; }
  .feature-band .f { min-height: 0; }
}

@media (max-width: 560px) {
  nav.glassnav.nav-light { background: rgba(245,242,235,.72); }
  .journey--ledger > h3 { font-size: var(--t-h2); }
  .feature-band .f { padding: 21px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-band .f::after { transform: scaleX(1); transition: none; }
}

/* ============================================================
   v0.24 — project-specific cinematic outcomes
   ============================================================ */

.outcome-eyebrow,
.outcome-step > span,
.finance-outcome-beats article > span,
.pnc-outcome-beats article > span {
  display: block; color: var(--shu-text); font-size: var(--t-label); letter-spacing: .2em;
  text-transform: uppercase;
}

/* Talent — one transfer request collapses from eight gates to one action. */
.outcome-cinema--talent { padding: clamp(120px, 16vh, 180px) 8vw; overflow: clip; }
.outcome-cinema--talent .outcome-sticky { max-width: 1280px; margin: 0 auto; }
.outcome-scene-head { margin-bottom: clamp(44px, 7vh, 76px); }
.talent-outcome-layout {
  display: grid; grid-template-columns: minmax(290px, .72fr) minmax(560px, 1.28fr);
  gap: clamp(52px, 7vw, 108px); align-items: center;
}
.outcome-copy-stack { display: grid; gap: 72px; }
.outcome-step h3 {
  margin-top: 15px; max-width: 12ch; font-family: var(--display); font-size: clamp(38px, 4.4vw, 66px);
  font-weight: 500; line-height: 1.03; letter-spacing: -.035em; text-wrap: balance;
}
.outcome-step p { margin-top: 22px; max-width: 44ch; color: var(--gray); font-size: var(--t-small); line-height: 1.75; }
.talent-machine {
  position: relative; min-height: 590px; border: 1px solid rgba(245,242,235,.11); border-radius: 28px;
  background: radial-gradient(circle at 52% 40%, rgba(245,242,235,.055), transparent 45%), rgba(245,242,235,.014);
  box-shadow: inset 0 1px 0 rgba(245,242,235,.055), 0 34px 90px rgba(0,0,0,.26); overflow: hidden;
}
.talent-machine::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.transfer-chip {
  position: absolute; z-index: 2; left: 34px; top: 30px; display: flex; align-items: center; gap: 11px;
  color: var(--ink); font-size: var(--t-caption); letter-spacing: .08em;
}
.transfer-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--shu); box-shadow: 0 0 14px rgba(195,21,55,.5); }
.talent-clock { position: absolute; z-index: 2; top: 92px; }
.talent-clock strong { display: block; font-family: var(--display); font-size: clamp(56px, 7vw, 104px); font-weight: 500; letter-spacing: -.06em; line-height: .88; }
.talent-clock span { display: block; margin-top: 10px; color: var(--gray); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; }
.talent-clock--legacy { left: 34px; }
.talent-clock--legacy strong { color: var(--ink); }
.talent-clock--fast { right: 34px; text-align: right; }
.talent-clock--fast strong { color: var(--shu); font-size: clamp(46px, 5.8vw, 84px); }
.approval-track { position: absolute; z-index: 2; left: 34px; right: 34px; top: 270px; height: 58px; }
.approval-ink { position: absolute; left: 0; right: 0; top: 25px; height: 12px; background: url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; opacity: .55; }
.approval-track i {
  position: absolute; left: calc(3% + var(--n) * 13.4%); top: 20px; width: 17px; height: 17px;
  border: 2px solid var(--shu); border-radius: 50%; background: var(--canvas); box-shadow: 0 0 0 5px rgba(10,10,11,.9), 0 0 18px rgba(195,21,55,.24);
}
.approval-caption {
  position: absolute; z-index: 2; left: 34px; right: 34px; top: 331px; display: grid; grid-template-columns: repeat(8,1fr);
  color: rgba(245,242,235,.38); font-size: var(--t-caption); letter-spacing: .06em; text-align: center;
}
.approval-action {
  position: absolute; z-index: 3; left: 50%; top: 270px; width: 178px; height: 58px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 22px; border-radius: 999px;
  background: rgba(245,242,235,.92); color: var(--canvas); box-shadow: 0 18px 44px rgba(0,0,0,.36);
  font-size: var(--t-caption); letter-spacing: .06em;
}
.approval-action b { padding: 10px 14px; border-radius: 999px; background: var(--shu); color: var(--ink); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; }
.talent-impact {
  position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 28px; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
}
.talent-impact div { min-height: 112px; padding: 18px; border: 1px solid rgba(245,242,235,.08); border-radius: 14px; background: rgba(10,10,11,.48); }
.talent-impact strong { display: block; color: var(--ink); font-family: var(--display); font-size: var(--t-h4); font-weight: 500; letter-spacing: -.03em; }
.talent-impact span { display: block; margin-top: 8px; color: var(--gray); font-size: var(--t-caption); line-height: 1.5; }
.outcome-cinema--talent.is-animated { height: 340vh; padding-block: 0; }
.outcome-cinema--talent.is-animated .outcome-sticky {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center;
}
.outcome-cinema--talent.is-animated .outcome-copy-stack { position: relative; min-height: 360px; display: block; }
.outcome-cinema--talent.is-animated .outcome-step { position: absolute; inset: 0; }
.outcome-voice { max-width: 1160px; margin: 0 auto; padding: clamp(70px, 10vh, 120px) 8vw clamp(120px, 16vh, 190px); text-align: center; }
.outcome-voice blockquote p { font-family: var(--display); font-size: var(--t-h2); line-height: 1.18; letter-spacing: -.03em; text-wrap: balance; }
.outcome-voice cite { display: block; margin-top: 25px; color: var(--shu-text); font-size: var(--t-label); font-style: normal; letter-spacing: .2em; text-transform: uppercase; }
.outcome-footnote { max-width: 66ch; margin: 50px auto 0; color: var(--gray); font-size: var(--t-caption); line-height: 1.7; }
.outcome-voice > .pill-row { margin-top: 48px; }

/* Finance — the product outcome behaves like a month-end close. */
.outcome-finance { max-width: 1280px; margin: 0 auto; padding: clamp(120px, 16vh, 190px) 8vw 6vh; }
.outcome-finance-intro { max-width: 900px; margin: 0 auto clamp(70px, 10vh, 120px); text-align: center; }
.outcome-finance-intro .kicker { justify-content: center; }
.outcome-finance-intro h3 { margin-top: 25px; font-family: var(--display); font-size: clamp(44px, 6vw, 82px); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.outcome-finance-intro p { max-width: 68ch; margin: 28px auto 0; color: var(--gray); font-size: var(--t-small); line-height: 1.75; }
.finance-outcome-grid { display: grid; grid-template-columns: minmax(440px, .94fr) minmax(390px, 1.06fr); gap: clamp(70px, 9vw, 132px); align-items: start; }
.finance-ledger-wrap { position: sticky; top: 15vh; }
.finance-ledger {
  position: relative; padding: 28px; border: 1px solid rgba(245,242,235,.13); border-radius: 24px;
  background: linear-gradient(145deg, rgba(245,242,235,.052), rgba(245,242,235,.01));
  box-shadow: inset 0 1px 0 rgba(245,242,235,.06), 0 32px 90px rgba(0,0,0,.26); overflow: hidden;
}
.finance-ledger::before {
  content: ""; position: absolute; left: 28px; right: 28px; top: 67px; height: 7px;
  background: url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; opacity: .38;
}
.finance-ledger-head { display: flex; justify-content: space-between; padding-bottom: 28px; color: var(--ink); font-size: var(--t-label); letter-spacing: .13em; text-transform: uppercase; }
.finance-ledger-head b { color: var(--shu); font-weight: 500; }
.finance-ledger-row { display: grid; grid-template-columns: 1fr 72px auto; gap: 15px; align-items: center; padding: 21px 0; border-bottom: 1px solid rgba(245,242,235,.08); }
.finance-ledger-row span { color: var(--gray); font-size: var(--t-caption); }
.finance-ledger-row > i { height: 4px; background: rgba(245,242,235,.09); border-radius: 9px; overflow: hidden; }
.finance-ledger-row > i::after { content: ""; display: block; width: 100%; height: 100%; background: var(--shu); transform: scaleX(.28); transform-origin: left; transition: transform .85s cubic-bezier(.2,.8,.2,1); }
.finance-ledger-row b { color: rgba(245,242,235,.46); font-size: var(--t-label); font-weight: 500; letter-spacing: .11em; text-transform: uppercase; }
.finance-adoption-line { display: grid; grid-template-columns: 1fr 120px auto; gap: 15px; align-items: center; padding: 28px 0; }
.finance-adoption-line > span { color: var(--gray); font-size: var(--t-caption); }
.finance-adoption-line > div { height: 7px; border-radius: 9px; background: rgba(245,242,235,.08); overflow: hidden; }
.finance-adoption-line > div i { display: block; width: 100%; height: 100%; background: var(--shu); border-radius: inherit; transform: scaleX(.18); transform-origin: left; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.finance-adoption-line strong { color: var(--shu); font-family: var(--display); font-size: var(--t-h3); font-weight: 500; letter-spacing: -.04em; }
.finance-adoption-line em { font-style: normal; }
.finance-balance { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; border-top: 1px solid rgba(245,242,235,.14); }
.finance-balance span { color: var(--gray); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; }
.finance-balance b { color: rgba(245,242,235,.36); font-family: var(--display); font-size: var(--t-h4); font-weight: 500; }
.finance-ledger[data-step="1"] .finance-ledger-row > i::after,
.finance-ledger[data-step="2"] .finance-ledger-row > i::after { transform: scaleX(1); }
.finance-ledger[data-step="1"] .finance-ledger-row b,
.finance-ledger[data-step="2"] .finance-ledger-row b { color: var(--ink); }
.finance-ledger[data-step="1"] .finance-adoption-line > div i,
.finance-ledger[data-step="2"] .finance-adoption-line > div i { transform: scaleX(.9); }
.finance-ledger[data-step="2"] .finance-balance b { color: var(--shu); text-shadow: 0 0 18px rgba(195,21,55,.28); }
.finance-outcome-beats article { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: 1; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.finance-outcome-beats h4 { max-width: 14ch; margin-top: 16px; font-family: var(--display); font-size: var(--t-h2); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.finance-outcome-beats p { max-width: 44ch; margin-top: 21px; color: var(--gray); font-size: var(--t-small); line-height: 1.75; }
.outcome-finance.is-animated .finance-outcome-beats article { opacity: .3; transform: translateY(16px); }
.outcome-finance.is-animated .finance-outcome-beats article.is-current { opacity: 1; transform: none; }
.finance-impact { max-width: 1280px; margin: 0 auto; padding: 9vh 8vw 16vh; display: grid; grid-template-columns: .88fr 110px 1.12fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.finance-impact-statement > span { color: var(--shu-text); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; }
.finance-impact-statement strong { display: block; margin-top: 15px; color: var(--ink); font-family: var(--display); font-size: clamp(66px, 8vw, 118px); font-weight: 500; line-height: .88; letter-spacing: -.06em; }
.finance-impact-statement p { margin-top: 13px; color: var(--gray); font-size: var(--t-small); }
.finance-impact-thread { position: relative; height: 190px; }
.finance-impact-thread::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 12px; transform: translateX(-50%); background: url("../media/brand/sumi-brush-vertical-v1.png") center/100% 100% no-repeat; opacity: .5; }
.finance-impact-thread i { position: absolute; left: 50%; width: 9px; height: 9px; transform: translate(-50%,-50%) scale(1); border-radius: 50%; background: var(--shu); box-shadow: 0 0 13px rgba(195,21,55,.5); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.finance-impact-thread i:nth-child(1) { top: 10%; }.finance-impact-thread i:nth-child(2) { top: 50%; }.finance-impact-thread i:nth-child(3) { top: 90%; }
.finance-impact.anim .finance-impact-thread i { transform: translate(-50%,-50%) scale(0); }
.finance-impact.anim.is-visible .finance-impact-thread i { transform: translate(-50%,-50%) scale(1); }
.finance-impact.is-visible .finance-impact-thread i:nth-child(2) { transition-delay: .14s; }.finance-impact.is-visible .finance-impact-thread i:nth-child(3) { transition-delay: .28s; }
.finance-impact-pair { display: grid; gap: 32px; }
.finance-impact-pair div { display: grid; grid-template-columns: minmax(100px,.55fr) 1fr; gap: 26px; align-items: baseline; padding-bottom: 26px; border-bottom: 1px solid rgba(245,242,235,.1); }
.finance-impact-pair strong { color: var(--ink); font-family: var(--display); font-size: clamp(38px, 4.6vw, 66px); font-weight: 500; letter-spacing: -.04em; }
.finance-impact-pair span { color: var(--gray); font-size: var(--t-caption); line-height: 1.55; }

/* PNC — the application sheds weight, then carries state across screens. */
.outcome-pnc { max-width: 1280px; margin: 0 auto; padding: clamp(120px, 16vh, 190px) 8vw 7vh; }
.outcome-pnc-intro { max-width: 920px; margin: 0 auto clamp(74px, 11vh, 126px); text-align: center; }
.outcome-pnc-intro .kicker { justify-content: center; }
.outcome-pnc-intro h3 { margin-top: 24px; font-family: var(--display); font-size: clamp(42px, 5.8vw, 80px); font-weight: 500; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.outcome-pnc-intro p { max-width: 68ch; margin: 28px auto 0; color: var(--gray); font-size: var(--t-small); line-height: 1.75; }
.pnc-outcome-grid { display: grid; grid-template-columns: minmax(500px, 1.08fr) minmax(350px, .92fr); gap: clamp(68px, 9vw, 132px); align-items: start; }
.pnc-demo-wrap { position: sticky; top: 11vh; min-height: 700px; }
.pnc-demo { position: relative; min-height: 680px; }
.pnc-form-card {
  position: absolute; z-index: 2; inset: 0 auto auto 0; width: min(100%, 610px); padding: 24px; border-radius: 24px;
  border: 1px solid rgba(245,242,235,.13); background: linear-gradient(145deg, rgba(245,242,235,.055), rgba(245,242,235,.012));
  box-shadow: 0 32px 90px rgba(0,0,0,.26); transition: opacity .65s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.pnc-form-head { display: flex; justify-content: space-between; padding-bottom: 20px; color: var(--ink); font-size: var(--t-caption); letter-spacing: .1em; }
.pnc-form-head b { color: var(--shu-text); font-size: var(--t-label); font-weight: 500; text-transform: uppercase; }
.pnc-progress { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 18px 0 23px; border-top: 1px solid rgba(245,242,235,.08); }
.pnc-progress::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 9px; background: rgba(245,242,235,.08); }
.pnc-progress i { position: absolute; left: 0; top: 8px; width: 100%; height: 4px; border-radius: 9px; background: var(--shu); transform: scaleX(.32); transform-origin: left; transition: transform .85s cubic-bezier(.2,.8,.2,1); }
.pnc-progress span { color: rgba(245,242,235,.44); font-size: var(--t-caption); letter-spacing: .08em; text-align: center; }
.pnc-question { margin-top: 9px; padding: 14px 15px; border: 1px solid rgba(245,242,235,.09); border-radius: 11px; overflow: hidden; transition: opacity .45s ease, transform .65s cubic-bezier(.2,.8,.2,1); }
.pnc-question span { display: block; color: var(--gray); font-size: var(--t-caption); }
.pnc-question b { display: block; margin-top: 7px; color: var(--ink); font-size: var(--t-caption); font-weight: 500; }
.pnc-question--conditional b { color: rgba(245,242,235,.34); }
.pnc-next-state { display: flex; justify-content: space-between; align-items: center; margin-top: 19px; padding-top: 18px; border-top: 1px solid rgba(245,242,235,.1); opacity: .3; transition: opacity .5s ease; }
.pnc-next-state span { color: var(--gray); font-size: var(--t-caption); }
.pnc-next-state b { padding: 9px 14px; border-radius: 999px; background: var(--shu); color: var(--ink); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; }
.pnc-handoff { position: absolute; z-index: 3; inset: 38px 0 auto 0; min-height: 590px; opacity: 0; pointer-events: none; transition: opacity .65s ease; }
.outcome-pnc.is-animated .pnc-handoff { opacity: 0; }
.pnc-desktop-shot { position: absolute; left: 0; top: 74px; width: 82%; border: 1px solid rgba(245,242,235,.14); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.48); transform: translateX(-5%) scale(.94); transition: transform .85s cubic-bezier(.2,.8,.2,1); }
.pnc-phone-shot { position: absolute; z-index: 2; right: 0; top: 18px; width: 29%; border: 5px solid #18181a; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.58); transform: translate(28%,28%) rotate(3deg) scale(.82); transition: transform .95s cubic-bezier(.2,.8,.2,1); }
.pnc-desktop-shot img, .pnc-phone-shot img { display: block; width: 100%; }
.pnc-demo[data-step="1"] .pnc-question--conditional { opacity: .05; transform: translateX(18px) scale(.96); }
.pnc-demo[data-step="1"] .pnc-progress i { transform: scaleX(.66); }
.pnc-demo[data-step="1"] .pnc-next-state { opacity: 1; }
.pnc-demo[data-step="2"] .pnc-form-card { opacity: .12; transform: translateX(-12%) scale(.82); }
.pnc-demo[data-step="2"] .pnc-handoff { opacity: 1; }
.pnc-demo[data-step="2"] .pnc-desktop-shot { transform: translateX(0) scale(1); }
.pnc-demo[data-step="2"] .pnc-phone-shot { transform: translate(0,0) rotate(0) scale(1); }
.pnc-outcome-beats article { min-height: 74vh; display: flex; flex-direction: column; justify-content: center; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.pnc-outcome-beats h4 { max-width: 13ch; margin-top: 16px; font-family: var(--display); font-size: var(--t-h2); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.pnc-outcome-beats p { max-width: 43ch; margin-top: 21px; color: var(--gray); font-size: var(--t-small); line-height: 1.75; }
.outcome-pnc.is-animated .pnc-outcome-beats article { opacity: .3; transform: translateY(16px); }
.outcome-pnc.is-animated .pnc-outcome-beats article.is-current { opacity: 1; transform: none; }
.pnc-live { max-width: 1180px; margin: 0 auto clamp(120px, 16vh, 190px); padding: clamp(42px, 6vw, 74px); border: 1px solid rgba(245,242,235,.11); border-radius: 28px; background: linear-gradient(145deg, rgba(245,242,235,.05), rgba(245,242,235,.012)); text-align: center; }
.pnc-live-mark { display: flex; justify-content: center; align-items: center; gap: 14px; color: var(--shu); }
.pnc-live-mark span { width: 10px; height: 10px; border-radius: 50%; background: var(--shu); box-shadow: 0 0 0 0 rgba(195,21,55,.35); animation: livePulse 2.4s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(195,21,55,.4); } 65%,100% { box-shadow: 0 0 0 14px rgba(195,21,55,0); } }
.pnc-live-mark strong { font-size: var(--t-label); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.pnc-live-copy h3 { max-width: 17ch; margin: 25px auto 0; font-family: var(--display); font-size: clamp(38px, 5vw, 68px); font-weight: 500; line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.pnc-live-copy p { max-width: 66ch; margin: 27px auto 0; color: var(--gray); font-size: var(--t-small); line-height: 1.75; }
.pnc-live-ribbon { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
.pnc-live-ribbon span { padding: 10px 15px; border: 1px solid rgba(245,242,235,.11); border-radius: 999px; color: var(--ink); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; }
.pnc-live .pill-row { margin-top: 40px; }

@media (max-width: 1000px) {
  .talent-outcome-layout { grid-template-columns: minmax(260px,.72fr) minmax(470px,1.28fr); gap: 42px; }
  .talent-impact { grid-template-columns: repeat(2,1fr); }
  .talent-machine { min-height: 670px; }
  .finance-outcome-grid, .pnc-outcome-grid { gap: 54px; }
}

@media (max-width: 900px) {
  .outcome-cinema--talent.is-animated { height: auto; padding-block: 120px; }
  .outcome-cinema--talent.is-animated .outcome-sticky { position: static; height: auto; display: block; }
  .outcome-cinema--talent.is-animated .outcome-copy-stack { min-height: 0; display: grid; }
  .outcome-cinema--talent.is-animated .outcome-step { position: static; opacity: 1 !important; transform: none !important; visibility: visible !important; }
  .talent-outcome-layout, .finance-outcome-grid, .pnc-outcome-grid { grid-template-columns: 1fr; }
  .talent-machine { min-height: 650px; }
  .finance-ledger-wrap, .pnc-demo-wrap { position: static; }
  .finance-outcome-beats, .pnc-outcome-beats { display: grid; gap: 66px; margin-top: 70px; }
  .finance-outcome-beats article, .pnc-outcome-beats article { min-height: 0; opacity: 1 !important; transform: none !important; }
  .finance-impact { grid-template-columns: 1fr; text-align: center; }
  .finance-impact-thread { height: 80px; }
  .finance-impact-thread::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 12px; transform: translateY(-50%); background-image: url("../media/brand/sumi-brush-v1.png"); }
  .finance-impact-thread i { top: 50% !important; left: var(--x); }
  .finance-impact-thread i:nth-child(1) { --x:10%; }.finance-impact-thread i:nth-child(2) { --x:50%; }.finance-impact-thread i:nth-child(3) { --x:90%; }
  .finance-impact-pair { max-width: 620px; margin-inline: auto; text-align: left; }
  .pnc-demo-wrap, .pnc-demo { min-height: 680px; }
}

@media (max-width: 620px) {
  .outcome-cinema--talent, .outcome-finance, .outcome-pnc { padding-inline: 6vw; }
  .talent-machine { min-height: 720px; }
  .talent-clock--legacy { left: 22px; }.talent-clock--fast { right: 22px; }
  .approval-track { left: 20px; right: 20px; top: 265px; }
  .approval-caption { display: none; }
  .approval-action { top: 340px; }
  .talent-impact { left: 18px; right: 18px; bottom: 18px; }
  .finance-ledger { padding: 22px 18px; }
  .finance-ledger::before { left: 18px; right: 18px; }
  .finance-ledger-row { grid-template-columns: 1fr auto; }.finance-ledger-row > i { display: none; }
  .finance-adoption-line { grid-template-columns: 1fr auto; }.finance-adoption-line > div { grid-column: 1/-1; grid-row: 2; }
  .finance-impact-pair div { grid-template-columns: 1fr; gap: 7px; text-align: center; }
  .pnc-demo-wrap, .pnc-demo { min-height: 580px; }
  .pnc-form-card { padding: 18px; }
  .pnc-desktop-shot { width: 88%; }.pnc-phone-shot { width: 34%; }
  .pnc-live { margin-inline: 5vw; padding-inline: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .approval-track i, .approval-action, .talent-impact > div,
  .finance-ledger-row > i::after, .finance-adoption-line > div i, .finance-balance b,
  .pnc-question, .pnc-progress i, .pnc-form-card, .pnc-handoff, .pnc-desktop-shot, .pnc-phone-shot,
  .finance-impact-thread i { transition: none !important; }
  .pnc-live-mark span { animation: none; }
}

/* ============================================================
   v0.25 — cinematic About narrative
   ============================================================ */

.about-hero { min-height: 100svh; display: grid; align-items: center; padding: 120px 8vw 80px; overflow: clip; }
.about-hero-grid { width: 100%; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(420px,.92fr); gap: clamp(62px,8vw,126px); align-items: center; }
.about-hero-copy h1 { max-width: 10.5ch; margin-top: 28px; font-family: var(--display); font-size: clamp(58px,7vw,104px); font-weight: 500; line-height: .98; letter-spacing: -.055em; text-wrap: balance; }
.about-hero-copy > p { max-width: 59ch; margin-top: 30px; color: var(--gray); font-size: var(--t-body); line-height: 1.78; }
.about-portrait-stage { position: relative; min-height: 590px; display: grid; place-items: center; }
.about-portrait-stage::before { content: ""; position: absolute; inset: 9% 2% 12%; border: 1px solid rgba(245,242,235,.09); border-radius: 34px; background: linear-gradient(150deg,rgba(245,242,235,.045),rgba(245,242,235,.008)); box-shadow: inset 0 1px 0 rgba(245,242,235,.06),0 38px 100px rgba(0,0,0,.32); }
.about-portrait-wash { position: absolute; z-index: 1; left: -2%; right: -4%; top: 48%; height: 34px; transform: rotate(-4deg); background: url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; opacity: .2; }
/* The portrait is a standing CUT-OUT with a transparent background, not a
   rectangular photo. So: no border-radius, no object-fit cover, and it is
   aligned to the BOTTOM of the stage so he stands on the glass panel rather
   than floating in the middle of it. The image's own alpha already dissolves
   at the hem, so there is no hard crop line to hide. */
.about-portrait {
  position: relative; z-index: 2; display: block;
  width: auto; height: clamp(420px, 46vw, 560px);
  max-width: 100%;
  object-fit: contain; object-position: 50% 100%;
  align-self: end;
  filter: saturate(.92) contrast(1.03);
  /* grounds him against the panel instead of looking pasted on */
  -webkit-filter: drop-shadow(0 26px 44px rgba(0,0,0,.55));
  filter: saturate(.92) contrast(1.03) drop-shadow(0 26px 44px rgba(0,0,0,.55));
}
.portrait-note { position: absolute; z-index: 3; min-width: 170px; padding: 13px 16px; border: 1px solid rgba(245,242,235,.13); border-radius: 16px; background: rgba(20,20,22,.42); -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4); box-shadow: 0 18px 45px rgba(0,0,0,.3); }
.portrait-note span { display: block; color: var(--shu-text); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; }
.portrait-note b { display: block; margin-top: 6px; color: var(--ink); font-size: var(--t-caption); font-weight: 500; }
.portrait-note--one { left: -3%; top: 19%; }.portrait-note--two { right: -3%; bottom: 18%; }

.about-premise { max-width: 1280px; margin: 0 auto; padding: clamp(130px,18vh,220px) 8vw; text-align: center; }
.about-premise > .kicker { justify-content: center; }
.about-premise > h2 { max-width: 14ch; margin: 28px auto 0; font-family: var(--display); font-size: clamp(48px,6.5vw,88px); font-weight: 500; line-height: 1; letter-spacing: -.05em; text-wrap: balance; }
.about-premise > p { max-width: 66ch; margin: 30px auto 0; color: var(--gray); font-size: var(--t-body); line-height: 1.8; }
.about-method { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: clamp(56px,8vh,90px); text-align: left; }
.about-method > div { position: relative; min-height: 210px; padding: 25px; border: 1px solid rgba(245,242,235,.1); border-radius: 20px; background: linear-gradient(145deg,rgba(245,242,235,.045),rgba(245,242,235,.009)); overflow: hidden; }
.about-method > div::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 7px; background: url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; opacity: .42; transform: scaleX(1); transform-origin: left; }
.about-method.anim > div::after { transform: scaleX(0); }.about-method.anim.is-active > div::after { transform: scaleX(1); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.about-method.anim.is-active > div:nth-child(2)::after { transition-delay: .13s; }.about-method.anim.is-active > div:nth-child(3)::after { transition-delay: .26s; }
.about-method span { color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .17em; }
.about-method b { display: block; margin-top: 29px; color: var(--ink); font-family: var(--display); font-size: var(--t-h4); font-weight: 500; letter-spacing: -.02em; }
.about-method p { margin-top: 12px; color: var(--gray); font-size: var(--t-caption); line-height: 1.65; }

.career-narrative { max-width: 1280px; margin: 0 auto; padding: clamp(120px,16vh,190px) 8vw; }
.career-heading { max-width: 820px; margin: 0 auto clamp(70px,10vh,120px); text-align: center; }
.career-heading .kicker { justify-content: center; }.career-heading h2 { margin-top: 26px; font-family: var(--display); font-size: clamp(48px,6vw,82px); font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.career-heading p { max-width: 62ch; margin: 27px auto 0; color: var(--gray); font-size: var(--t-small); line-height: 1.75; }
.career-layout { display: grid; grid-template-columns: minmax(430px,1.04fr) minmax(390px,.96fr); gap: clamp(72px,9vw,132px); align-items: start; }
.career-role { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: 1; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.career-narrative.is-animated .career-role { opacity: .28; transform: translateY(16px); }.career-narrative.is-animated .career-role.is-current { opacity: 1; transform: none; }
.career-no { color: var(--shu-text); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; }
.career-when { margin-top: 20px; color: var(--gray); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; }
.career-role h3 { max-width: 14ch; margin-top: 13px; font-family: var(--display); font-size: var(--t-h2); font-weight: 500; line-height: 1.07; letter-spacing: -.035em; text-wrap: balance; }
.career-role p { max-width: 48ch; margin-top: 20px; color: var(--gray); font-size: var(--t-small); line-height: 1.75; }
.career-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }.career-chips span { padding: 7px 11px; border: 1px solid rgba(245,242,235,.1); border-radius: 999px; color: var(--ink); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; }
.career-stage-wrap { position: sticky; top: 14vh; }
.career-stage { position: relative; min-height: 570px; border: 1px solid rgba(245,242,235,.11); border-radius: 28px; background: radial-gradient(circle at 50% 43%,rgba(245,242,235,.06),transparent 45%),rgba(245,242,235,.012); box-shadow: inset 0 1px 0 rgba(245,242,235,.055),0 34px 90px rgba(0,0,0,.26); overflow: hidden; }
.career-stage::after { content: ""; position: absolute; left: 32px; right: 32px; bottom: 26px; height: 7px; background: url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; opacity: .28; }
.career-stage-head { position: absolute; z-index: 4; left: 28px; right: 28px; top: 25px; display: flex; justify-content: space-between; color: var(--gray); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; }.career-stage-head b { color: var(--shu); font-weight: 500; }
.career-panel { position: absolute; inset: 76px 28px 42px; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; transform: translateY(20px) scale(.98); pointer-events: none; transition: opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1); }
.career-stage[data-role="0"] .career-panel--kellton,.career-stage[data-role="1"] .career-panel--talent,.career-stage[data-role="2"] .career-panel--finance,.career-stage[data-role="3"] .career-panel--pnc { opacity: 1; transform: none; }
.career-panel > strong { position: relative; z-index: 2; color: var(--ink); font-family: var(--display); font-size: var(--t-h3); font-weight: 500; letter-spacing: -.03em; }.career-panel > small { position: relative; z-index: 2; margin-top: 9px; color: var(--shu-text); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; }
.focus-orbit { position: absolute; left: 50%; top: 42%; width: 280px; height: 280px; transform: translate(-50%,-50%); border: 1px solid rgba(245,242,235,.1); border-radius: 50%; }
.focus-orbit::before,.focus-orbit::after { content: ""; position: absolute; border: 1px solid rgba(245,242,235,.1); border-radius: 50%; }.focus-orbit::before { inset: 42px; }.focus-orbit::after { inset: 86px; border-color: rgba(195,21,55,.4); }
.focus-orbit i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--shu); box-shadow: 0 0 13px rgba(195,21,55,.45); }.focus-orbit i:nth-child(1){left:18px;top:122px}.focus-orbit i:nth-child(2){right:44px;top:40px}.focus-orbit i:nth-child(3){right:20px;bottom:62px}
.focus-orbit span,.focus-orbit b,.focus-orbit em { position: absolute; color: var(--ink); font-style: normal; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; }.focus-orbit span{left:50%;top:50%;transform:translate(-50%,-50%);color:var(--shu);font-size: var(--t-lede)}.focus-orbit b{left:22%;top:25%;font-weight:400}.focus-orbit em{right:16%;bottom:27%}
.career-transfer { position: absolute; left: 2%; right: 2%; top: 24%; height: 220px; }.career-transfer > span { position: absolute; left: 0; top: 0; color: var(--ink); font-family: var(--display); font-size: var(--t-h2); letter-spacing: -.04em; }.career-transfer > div { position: absolute; left: 0; right: 0; top: 90px; height: 40px; background: url("../media/brand/sumi-brush-v1.png") center/100% 12px no-repeat; }.career-transfer i { position: absolute; left: calc(var(--n,0)*13%); top: 12px; width: 13px; height: 13px; border: 1px solid var(--shu); border-radius: 50%; background: var(--canvas); }.career-transfer i:nth-child(1){--n:0}.career-transfer i:nth-child(2){--n:1}.career-transfer i:nth-child(3){--n:2}.career-transfer i:nth-child(4){--n:3}.career-transfer i:nth-child(5){--n:4}.career-transfer i:nth-child(6){--n:5}.career-transfer i:nth-child(7){--n:6}.career-transfer i:nth-child(8){--n:7}.career-transfer > b { position: absolute; right: 0; bottom: 20px; color: var(--shu); font-family: var(--display); font-size: var(--t-h2); font-weight: 500; letter-spacing: -.05em; }
.career-ledger { position: absolute; left: 5%; right: 5%; top: 19%; padding: 20px; border: 1px solid rgba(245,242,235,.11); border-radius: 18px; }.career-ledger div { display: grid; grid-template-columns: 82px 1fr; gap: 16px; align-items: center; padding: 15px 0; border-bottom: 1px solid rgba(245,242,235,.08); }.career-ledger span { color: var(--gray); font-size: var(--t-caption); }.career-ledger i { height: 4px; background: var(--shu); transform: scaleX(.3); transform-origin: left; transition: transform .8s cubic-bezier(.2,.8,.2,1); }.career-stage[data-role="2"] .career-ledger i { transform: scaleX(1); }.career-ledger b { display: block; margin-top: 18px; color: var(--shu); font-family: var(--display); font-size: var(--t-h3); font-weight: 500; text-align: right; }
.career-form { position: absolute; inset: 12% 4% auto; height: 300px; }.career-form > div { position: absolute; left: 0; top: 20px; width: 72%; padding: 18px; border: 1px solid rgba(245,242,235,.11); border-radius: 17px; }.career-form i { display: block; width: 100%; height: 12px; margin: 10px 0; border: 1px solid rgba(245,242,235,.14); border-radius: 4px; transition: opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1); }.career-stage[data-role="3"] .career-form i:nth-child(3),.career-stage[data-role="3"] .career-form i:nth-child(4){opacity:.08;transform:translateX(18px) scale(.94)}.career-form > span { position: absolute; right: 2%; top: 0; width: 30%; height: 210px; border: 5px solid #18181a; border-radius: 22px; background: rgba(245,242,235,.055); transform: translate(18px,28px) rotate(3deg); transition: transform .8s cubic-bezier(.2,.8,.2,1); }.career-stage[data-role="3"] .career-form > span { transform:none; }.career-form > b { position: absolute; right: 8%; bottom: 15px; color: var(--shu-text); font-size: var(--t-label); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }

.about-thread { max-width: 1280px; margin: 0 auto; padding: clamp(140px,19vh,230px) 8vw; text-align: center; }
.about-thread > .kicker { justify-content: center; }.about-thread > h2 { margin-top: 26px; font-family: var(--display); font-size: clamp(52px,7vw,96px); font-weight: 500; line-height: .98; letter-spacing: -.055em; }.about-thread > p { margin-top: 26px; color: var(--gray); font-size: var(--t-small); }
.about-thread-track { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: clamp(72px,10vh,120px); padding-top: 38px; }
.about-thread-brush { position: absolute; left: 0; right: 0; top: 0; height: 16px; }.about-thread-brush span { display: block; width: 100%; height: 100%; background: url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; transform-origin: left; }
.about-thread-step span { display: block; color: var(--ink); font-family: var(--display); font-size: var(--t-h4); letter-spacing: -.02em; }.about-thread-step small { display: block; margin-top: 9px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .08em; }
.about-thread.anim .about-thread-step { opacity: 0; transform: translateY(14px); }.about-thread.anim.is-active .about-thread-step { opacity: 1; transform: none; transition: opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1); }.about-thread.anim.is-active .about-thread-step:nth-child(3){transition-delay:.13s}.about-thread.anim.is-active .about-thread-step:nth-child(4){transition-delay:.26s}.about-thread.anim.is-active .about-thread-step:nth-child(5){transition-delay:.39s}
.about-outro { min-height: 74vh; }

/* ---------- availability line (about hero) ----------
   `align-items: center` was centring the dot against the WHOLE text block, so
   the moment the sentence wrapped to two lines the dot floated into the gap
   between them. The dot has to sit on the FIRST line, whatever the wrap, so it
   aligns to the start and is then nudged down by half the leading:
   (line box − dot) / 2, expressed in em so it tracks any font-size change.
   The résumé and home versions of this line carry the same fix. */
.about-avail {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 26px; color: rgba(245,242,235,.52);
  font-size: var(--t-caption); line-height: 1.6; text-wrap: pretty;
}
.about-avail .ha-dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  margin-top: calc((1.6em - 6px) / 2);
  background: var(--shu); animation: availPulse 2.6s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) { .about-avail .ha-dot { animation: none; } }

/* ---------- the title-vs-work note in the current role ---------- */
.career-aside {
  margin-top: 18px; padding: 15px 18px;
  border-left: 2px solid var(--shu);
  background: rgba(245,242,235,.022); border-radius: 0 12px 12px 0;
  color: var(--gray); font-size: var(--t-caption); line-height: 1.75;
}
.career-aside b { color: var(--ink); font-weight: 500; }

/* ---------- leadership: the primary claim ----------
   Larger type, four wide cards, full section weight. Deliberately outranks the
   mentorship block below it — the owner is asking for staff/principal IC work,
   and the leadership he wants evidenced is vision, cross-functional programmes,
   executive influence and client work, not headcount. */
.about-lead { max-width: 1280px; margin: 0 auto; padding: clamp(120px,16vh,200px) 8vw 0; text-align: center; }
.about-lead > .kicker { justify-content: center; }
.about-lead > h2 {
  max-width: 16ch; margin: 26px auto 0; font-family: var(--display);
  font-size: clamp(44px,5.8vw,80px); font-weight: 500; line-height: 1;
  letter-spacing: -.05em; text-wrap: balance;
}
.about-lead-lede { max-width: 64ch; margin: 28px auto 0; color: var(--gray); font-size: var(--t-small); line-height: 1.8; }
.about-lead-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 16px;
  margin-top: clamp(56px,8vh,86px); text-align: left;
}
.about-lead-grid article {
  position: relative; padding: 30px 28px 28px;
  border: 1px solid rgba(245,242,235,.11); border-radius: 20px;
  background: linear-gradient(145deg,rgba(245,242,235,.05),rgba(245,242,235,.01));
}
.about-lead-grid .al-no {
  display: block; margin-bottom: 14px;
  color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .22em;
}
.about-lead-grid b {
  display: block; min-height: calc(2 * 1.24em); color: var(--ink); font-family: var(--display);
  font-size: var(--t-h4); font-weight: 500; letter-spacing: -.025em; line-height: 1.24;
}
.about-lead-grid p { margin-top: 13px; color: var(--gray); font-size: var(--t-small); line-height: 1.78; }
.about-lead-grid em { font-style: normal; font-weight: 500; color: var(--ink); }

/* ---------- mentorship: deliberately the quieter block ---------- */
.about-mentor { max-width: 1280px; margin: 0 auto; padding: clamp(96px,12vh,150px) 8vw 0; text-align: center; }
.about-mentor > .kicker { justify-content: center; }
.about-mentor > h2 {
  max-width: 18ch; margin: 22px auto 0; font-family: var(--display);
  font-size: var(--t-h2); font-weight: 500; line-height: 1.04;
  letter-spacing: -.04em; text-wrap: balance;
}
.about-mentor-lede { max-width: 60ch; margin: 22px auto 0; color: var(--gray); font-size: var(--t-small); line-height: 1.78; }
.about-mentor-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 16px;
  margin-top: clamp(40px,5.5vh,62px); text-align: left;
}
.about-mentor-grid--three { grid-template-columns: repeat(3,1fr); }
.about-mentor-note {
  max-width: 60ch; margin: 30px auto 0;
  color: var(--gray); font-size: var(--t-caption); line-height: 1.75; text-wrap: pretty;
}
.about-mentor-grid article {
  position: relative; padding: 28px 26px 26px;
  border: 1px solid rgba(245,242,235,.1); border-radius: 20px;
  background: linear-gradient(145deg,rgba(245,242,235,.042),rgba(245,242,235,.008));
}
.about-mentor-grid .am-no {
  display: block; margin-bottom: 14px;
  color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .22em;
}
.about-mentor-grid b {
  display: block; min-height: calc(2 * 1.28em); color: var(--ink); font-family: var(--display);
  font-size: var(--t-h4); font-weight: 500; letter-spacing: -.02em; line-height: 1.28;
}
.about-mentor-grid p { margin-top: 12px; color: var(--gray); font-size: var(--t-small); line-height: 1.78; }

/* ---------- first ninety days ---------- */
.about-start { max-width: 1280px; margin: 0 auto; padding: clamp(120px,16vh,200px) 8vw 0; text-align: center; }
.about-start > .kicker { justify-content: center; }
.about-start > h2 {
  max-width: 18ch; margin: 26px auto 0; font-family: var(--display);
  font-size: clamp(42px,5.6vw,76px); font-weight: 500; line-height: 1;
  letter-spacing: -.05em; text-wrap: balance;
}
.about-start-lede { max-width: 62ch; margin: 28px auto 0; color: var(--gray); font-size: var(--t-small); line-height: 1.8; }
.about-start-list {
  list-style: none; margin: clamp(56px,8vh,86px) auto 0; padding: 0;
  max-width: 860px; text-align: left;
}
.about-start-list li {
  position: relative; padding: 26px 0 26px 22px;
  border-top: 1px solid rgba(245,242,235,.09);
}
.about-start-list li::before {
  content: ""; position: absolute; left: 0; top: 34px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--shu);
}
.about-start-list .as-when {
  display: block; margin-bottom: 9px;
  color: var(--gray); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
}
.about-start-list b {
  display: block; color: var(--ink); font-family: var(--display);
  font-size: var(--t-h4); font-weight: 500; letter-spacing: -.025em;
}
.about-start-list p { margin-top: 11px; color: var(--gray); font-size: var(--t-small); line-height: 1.8; }

@media (max-width: 1000px) {
  .about-mentor-grid--three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .about-lead-grid,
  .about-mentor-grid,
  .about-mentor-grid--three { grid-template-columns: 1fr; }
  .about-avail { justify-content: center; text-align: left; }
}

@media (max-width: 980px) {
  .about-hero-grid { grid-template-columns: 1fr; }.about-hero-copy { text-align: center; }.about-hero-copy h1,.about-hero-copy > p { margin-inline: auto; }.about-hero-copy .kicker { justify-content: center; }.about-portrait-stage { min-height: 540px; max-width: 620px; width: 100%; margin: 0 auto; }
  .career-layout { grid-template-columns: 1fr; }.career-stage-wrap { position: static; order: -1; }.career-stage { min-height: 520px; max-width: 620px; margin: 0 auto; }.career-roles { display: grid; gap: 76px; margin-top: 80px; }.career-role { min-height: 0; opacity: 1 !important; transform: none !important; }.career-narrative.is-animated .career-role { opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .about-hero { padding-inline: 6vw; }.about-hero-copy h1 { font-size: clamp(46px,13vw,66px); }.about-portrait-stage { min-height: 470px; }.about-portrait { height: 410px; }.portrait-note { min-width: 145px; }.portrait-note--one { left: 0; }.portrait-note--two { right: 0; }
  .about-method { grid-template-columns: 1fr; }.about-method > div { min-height: 0; }
  .career-narrative,.about-premise,.about-thread { padding-inline: 6vw; }.career-stage { min-height: 470px; }.career-panel { inset-inline: 20px; }.focus-orbit { width: 235px; height: 235px; }.career-transfer > span { font-size: var(--t-h3); }.career-transfer > b { font-size: var(--t-h2); }
  .about-thread-track { grid-template-columns: 1fr; gap: 34px; padding-top: 28px; }.about-thread-brush { left: 50%; right: auto; top: 0; bottom: 0; width: 12px; height: auto; transform: translateX(-50%); }.about-thread-brush span { background-image: url("../media/brand/sumi-brush-vertical-v1.png"); }.about-thread-step { position: relative; z-index: 1; padding: 13px; background: rgba(10,10,11,.82); }
}
@media (prefers-reduced-motion: reduce) {
  .about-method > div::after,.career-role,.career-panel,.career-ledger i,.career-form i,.career-form > span,.about-thread-step,.about-thread-brush span { transition: none !important; animation: none !important; }
  .about-method.anim > div::after { transform: scaleX(1); }.about-thread.anim .about-thread-step { opacity: 1; transform: none; }
}

/* ============================================================
   v0.26 — adaptive liquid-glass material study
   ============================================================ */

:root {
  --glass-dark-fill: rgba(18,18,20,.34);
  --glass-light-fill: rgba(245,242,235,.54);
  --glass-edge: rgba(245,242,235,.18);
  --glass-radius: 25px;
}

/* The navigation is the true functional glass layer: highly adaptive,
   compact, and always floating above rather than competing with content. */
nav.glassnav {
  isolation: isolate;
  background: var(--glass-dark-fill);
  border-color: rgba(245,242,235,.16);
  -webkit-backdrop-filter: blur(32px) saturate(1.55) brightness(1.04);
  backdrop-filter: blur(32px) saturate(1.55) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.035),
    0 1px 1px rgba(255,255,255,.035),
    0 16px 48px rgba(0,0,0,.38),
    0 3px 12px rgba(0,0,0,.24);
}
nav.glassnav::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 95% at 18% -22%, rgba(255,255,255,.22), transparent 43%),
    linear-gradient(102deg, rgba(255,255,255,.055), transparent 30% 70%, rgba(255,255,255,.045));
  opacity: .78;
}
nav.glassnav::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(0,0,0,.15);
}
nav.glassnav > * { position: relative; z-index: 1; }
nav.glassnav.nav-light {
  background: var(--glass-light-fill);
  border-color: rgba(10,10,11,.28);
  -webkit-backdrop-filter: blur(34px) saturate(1.32) brightness(1.02);
  backdrop-filter: blur(34px) saturate(1.32) brightness(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(10,10,11,.09),
    0 1px 1px rgba(255,255,255,.24),
    0 16px 48px rgba(10,10,11,.18),
    0 3px 12px rgba(10,10,11,.12);
}
nav.glassnav.nav-light::before { opacity: .48; }

/* These narrative cards are intentionally the only large content surfaces
   using the material. A quiet ambient field beneath them gives the glass
   something to pick up without introducing rainbow/chromatic effects. */
.decision-grid {
  position: relative;
  isolation: isolate;
}
.decision-grid::before,
.decision-grid::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 44%;
  height: 76%;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(62px);
}
.decision-grid::before {
  left: -6%;
  top: 7%;
  background: radial-gradient(circle, rgba(245,242,235,.12), transparent 69%);
  opacity: .54;
}
/* This bloom used to be vermilion. Its job — giving the glass a second light
   source to sample — is right, but its colour was not: sized 44%×76% and
   anchored to the bottom-right, its centre lands squarely behind the THIRD
   card, and `.decision-card` is a glass panel with `saturate(1.38)`, which
   amplifies whatever it samples. The result was a saturated crimson bloom that
   read as sitting inside card 03 while cards 01 and 02 stayed clean. Worst on
   Finance, where that card's diagram is only a few thin bars and there is
   nothing to compete with it, but present on Talent and PNC too.
   Neutral now, and a touch dimmer than its partner so the two still read as
   two light sources rather than a symmetrical pair. The lighting design is
   unchanged; only the stain is gone. */
.decision-grid::after {
  right: -7%;
  bottom: -9%;
  background: radial-gradient(circle, rgba(245,242,235,.10), transparent 68%);
  opacity: .42;
}
.decision-card {
  --glass-x: 50%;
  --glass-y: 24%;
  position: relative;
  z-index: 1;
  border-radius: var(--glass-radius);
  border-color: var(--glass-edge);
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(245,242,235,.022) 38%, rgba(10,10,11,.075) 74%),
    rgba(22,22,24,.25);
  -webkit-backdrop-filter: blur(30px) saturate(1.38) brightness(1.04);
  backdrop-filter: blur(30px) saturate(1.38) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.19),
    inset 1px 0 0 rgba(255,255,255,.065),
    inset 0 -1px 0 rgba(255,255,255,.035),
    inset -1px 0 0 rgba(0,0,0,.28),
    0 1px 1px rgba(255,255,255,.025),
    0 28px 78px rgba(0,0,0,.30),
    0 8px 24px rgba(0,0,0,.22);
  transition: transform .62s cubic-bezier(.2,.8,.2,1);
}
.decision-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1px;
  border-radius: calc(var(--glass-radius) - 1px);
  pointer-events: none;
  background:
    radial-gradient(110% 72% at 18% -10%, rgba(255,255,255,.16), transparent 48%),
    linear-gradient(104deg, rgba(255,255,255,.045), transparent 27% 72%, rgba(255,255,255,.026));
  opacity: .82;
}
.decision-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.16), rgba(245,242,235,.045) 33%, transparent 70%);
  opacity: 0;
  transform: translate3d(calc(var(--glass-x) - 95px), calc(var(--glass-y) - 95px), 0);
  will-change: transform, opacity;
  transition: opacity .38s ease;
}
.decision-card > * { position: relative; z-index: 2; }
.decision-card:hover {
  transform: translateY(-6px) scale(1.004);
  border-color: var(--glass-edge);
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(245,242,235,.022) 38%, rgba(10,10,11,.075) 74%),
    rgba(22,22,24,.25);
}
.decision-card.glass-reactive:hover::after { opacity: .78; }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  nav.glassnav { background: rgba(18,18,20,.94); }
  nav.glassnav.nav-light { background: rgba(245,242,235,.94); }
  .decision-card { background: rgba(20,20,22,.96); }
}

@media (prefers-reduced-transparency: reduce) {
  nav.glassnav { background: rgba(18,18,20,.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
  nav.glassnav.nav-light { background: rgba(245,242,235,.94); }
  .decision-card { background: rgba(20,20,22,.95); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .decision-grid::before,.decision-grid::after { display: none; }
}
@media (prefers-contrast: more) {
  nav.glassnav,.decision-card { border-color: rgba(245,242,235,.42); }
  nav.glassnav.nav-light { border-color: rgba(10,10,11,.55); }
}
@media (prefers-reduced-motion: reduce) {
  .decision-card,.decision-card::after { transition: none !important; }
  .decision-card:hover { transform: none; }
  .decision-card::after { display: none; }
}

/* ============================================================
   v0.27 — recruiter skim, visible authorship, accessible glass
   ============================================================ */
.glass-pill, .overlay .close { font: inherit; appearance: none; -webkit-appearance: none; }
.glass-pill { text-align: left; }
.glass-pill--link { text-decoration: none; }
.glass-pill .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--shu); box-shadow: 0 0 0 5px rgba(195,21,55,.12); flex: none; }
.overlay[aria-hidden="true"] { visibility: hidden; }
.overlay[aria-hidden="false"] { visibility: visible; }
.overlay .close { padding: 0; }
[id] { scroll-margin-top: 132px; }

/* A compact hiring-manager path before the long-form narrative. */
.case-compass {
  max-width: 1280px; margin: 0 auto; padding: clamp(56px,8vh,96px) 6vw clamp(90px,12vh,144px);
}
.case-compass-head { display: grid; grid-template-columns: minmax(190px,.45fr) minmax(420px,1.55fr); gap: clamp(30px,6vw,88px); align-items: end; }
.case-compass-head .kicker { margin: 0; }
.case-compass-head h2 { max-width: 18ch; font-family: var(--display); font-size: clamp(34px,4.8vw,66px); font-weight: 500; line-height: 1.03; letter-spacing: -.04em; text-wrap: balance; }
.case-compass-grid { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 48px; }
.case-compass-grid::before { content:""; position:absolute; inset:12% 5%; z-index:0; border-radius:50%; background:radial-gradient(circle,rgba(245,242,235,.09),transparent 70%); filter:blur(45px); pointer-events:none; }
/* The viz strip is absolutely positioned against the bottom of the card, so it
   is out of flow and the copy above it knows nothing about it. Long body text
   therefore ran straight through the graphic — visible first on Finance, but
   latent on all four. These two custom properties are the single source of
   truth for the strip's geometry: .compass-viz positions itself from them, and
   the card reserves exactly that much padding plus a clear gap. Change the
   strip height in one place and the reservation follows. */
.case-compass-grid article {
  --viz-h: 46px;      /* height of the graphic strip */
  --viz-inset: 28px;  /* its distance from the card's bottom edge */
  --viz-gap: 24px;    /* minimum clear space between copy and graphic */
  position: relative; z-index: 1; min-height: 330px; overflow: hidden;
  padding: clamp(24px,3vw,38px);
  padding-bottom: calc(var(--viz-h) + var(--viz-inset) + var(--viz-gap));
  border: 1px solid rgba(245,242,235,.13); border-radius: 26px;
  background: linear-gradient(145deg,rgba(255,255,255,.065),rgba(245,242,235,.018) 42%,rgba(10,10,11,.09)),rgba(20,20,22,.24);
  -webkit-backdrop-filter: blur(30px) saturate(1.35); backdrop-filter: blur(30px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 28px 78px rgba(0,0,0,.25);
}
.case-compass-grid article::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(90% 60% at 15% -8%,rgba(255,255,255,.14),transparent 55%); }
.case-compass-grid article > span { position:relative; color:var(--shu); font-size: var(--t-label); letter-spacing:.18em; text-transform:uppercase; }
/* The headline reservation aligns the three paragraphs in a row with each
   other: without it, a two-line headline next to a three-line one starts its
   body copy higher and the row reads ragged.
   ►► main.js OWNS THIS AT RUNTIME. It measures the three headlines and
      reserves exactly the tallest, because how many lines a headline wraps to
      depends on the face, the viewport and the copy — none of which a
      stylesheet can count. Two attempts to hard-code it here were both a line
      too generous, which reads as dead air under every headline on the page.
   The --head-lines values below are the no-JavaScript fallback ONLY, and are
   deliberately conservative: too much reservation is untidy, too little
   overlaps the paragraph. Do not tune them to fix a spacing complaint — if
   spacing looks wrong with JS running, the bug is in the measuring pass. */
.case-compass-grid article { --head-lines: 3; }
.case-compass-grid strong { position:relative; display:block; max-width:16ch; min-height:calc(var(--head-lines, 3) * 1.12em); margin-top:24px; font-family:var(--display); font-size: var(--t-h3); font-weight:500; line-height:1.12; letter-spacing:-.03em; text-wrap:balance; }
.case-pnc .case-compass-grid article,
.case-anchor .case-compass-grid article { --head-lines: 2; }
.case-compass-grid p { position:relative; max-width:36ch; margin-top:17px; color:var(--gray); font-size: var(--t-caption); line-height:1.7; }
.case-compass .pill-row { margin-top: 36px; }
.compass-viz { position:absolute; left:30px; right:30px; bottom:var(--viz-inset,28px); height:var(--viz-h,46px); }
.compass-viz i { display:block; }
.compass-viz--gates,.compass-viz--fields { display:flex; align-items:center; gap:8px; }
.compass-viz--gates::before,.compass-viz--fields::before { content:""; position:absolute; left:0; right:0; top:50%; height:5px; transform:translateY(-50%); background:url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; opacity:.32; }
.compass-viz--gates i { position:relative; width:11px; height:11px; border:1px solid var(--shu); border-radius:50%; background:var(--canvas); }
.compass-viz--fields { align-items:flex-end; }
.compass-viz--fields i { position:relative; width:15%; height:8px; border:1px solid rgba(245,242,235,.19); border-radius:4px; }
.compass-viz--fields i:nth-child(2),.compass-viz--fields i:nth-child(5) { border-color:var(--shu); transform:translateY(-13px); }
.compass-viz--thread { display:flex; align-items:center; justify-content:space-between; }
.compass-viz--thread::before { content:""; position:absolute; left:0; right:0; top:50%; height:7px; transform:translateY(-50%) scaleX(.22); transform-origin:left; background:url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; opacity:.7; animation:compassDraw 3.8s cubic-bezier(.2,.8,.2,1) infinite; }
.compass-viz--thread i { position:relative; width:9px; height:9px; border-radius:50%; background:var(--shu); box-shadow:0 0 13px rgba(195,21,55,.38); }
.compass-viz--rise { display:flex; align-items:flex-end; gap:7px; }
.compass-viz--rise i { width:19%; height:calc(12px + var(--n,1) * 7px); border-radius:4px 4px 0 0; background:rgba(245,242,235,.13); transform-origin:bottom; animation:compassRise 3.4s cubic-bezier(.2,.8,.2,1) infinite; }
.compass-viz--rise i:nth-child(2){--n:2;animation-delay:.08s}.compass-viz--rise i:nth-child(3){--n:3;animation-delay:.16s}.compass-viz--rise i:nth-child(4){--n:4;background:var(--shu);animation-delay:.24s}
.compass-viz--ledger { display:grid; gap:7px; align-content:center; }
.compass-viz--ledger i { height:4px; background:rgba(245,242,235,.12); border-radius:4px; transform-origin:left; }
.compass-viz--ledger i:nth-child(3) { background:var(--shu); transform-origin:left; animation:compassLedger 3.6s cubic-bezier(.2,.8,.2,1) infinite; }
.compass-viz--approval { display:flex; align-items:center; gap:14px; }
.compass-viz--approval::before { content:""; position:absolute; left:0; right:0; top:50%; height:6px; transform:translateY(-50%); background:url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; opacity:.35; }
.compass-viz--approval i { position:relative; width:18px; height:18px; border-radius:50%; background:var(--shu); box-shadow:0 0 0 7px rgba(195,21,55,.12); }
.compass-viz--approval span { position:relative; margin-left:auto; padding:8px 13px; border:1px solid rgba(245,242,235,.14); border-radius:999px; color:var(--ink); font-size: var(--t-label); letter-spacing:.14em; text-transform:uppercase; }
@keyframes compassDraw { 0%,14%{transform:translateY(-50%) scaleX(.12);opacity:.2} 55%,82%{transform:translateY(-50%) scaleX(1);opacity:.75} 100%{transform:translateY(-50%) scaleX(.12);opacity:.2} }
@keyframes compassRise { 0%,18%{transform:scaleY(.15);opacity:.24} 54%,82%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(.15);opacity:.24} }
@keyframes compassLedger { 0%,14%{transform:scaleX(.12);opacity:.2} 55%,82%{transform:scaleX(1);opacity:.9} 100%{transform:scaleX(.12);opacity:.2} }

/* Finance leadership readout: clearly presented as synthesis, not testimony. */
.leadership-perspective { max-width:1180px; margin:0 auto; padding:clamp(70px,10vh,120px) 7vw; }
.leadership-perspective > h3 { max-width:14ch; margin-top:20px; font-family:var(--display); font-size:clamp(40px,5.5vw,72px); font-weight:500; line-height:1.04; letter-spacing:-.04em; }
.leadership-perspective-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:48px; }
.leadership-perspective blockquote { min-height:270px; display:flex; align-items:flex-end; padding:clamp(28px,4vw,48px); border:1px solid rgba(245,242,235,.13); border-radius:26px; background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(245,242,235,.015)),rgba(20,20,22,.24); -webkit-backdrop-filter:blur(30px) saturate(1.35); backdrop-filter:blur(30px) saturate(1.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 28px 70px rgba(0,0,0,.25); }
.leadership-perspective blockquote p { font-family:var(--display); font-size: var(--t-h3); line-height:1.2; letter-spacing:-.025em; text-wrap:balance; }
.perspective-note { max-width:72ch; margin-top:22px; color:var(--gray); font-size: var(--t-caption); line-height:1.65; letter-spacing:.06em; }

/* PNC deep dive and mobile sequence. */
.constraint-map { display:grid; grid-template-columns:1fr 40px 1fr 40px 1fr; align-items:center; gap:8px; margin:34px 0; }
.constraint-map > div { min-height:120px; display:flex; flex-direction:column; justify-content:center; padding:20px; border:1px solid rgba(245,242,235,.11); border-radius:16px; background:rgba(245,242,235,.025); }
.constraint-map .constraint-core { border-color:rgba(195,21,55,.5); }
.constraint-map span { color:var(--shu); font-size: var(--t-label); letter-spacing:.16em; text-transform:uppercase; }
.constraint-map b { margin-top:12px; color:var(--ink); font-size: var(--t-caption); font-weight:500; line-height:1.5; }
.constraint-map > i { height:2px; background:var(--line-soft); border-radius:2px; opacity:.68; }
.mobile-story { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(520px,1.28fr); gap:clamp(28px,5vw,72px); align-items:start; margin-top:52px; }
.mobile-story .cell { overflow:hidden; border:1px solid rgba(245,242,235,.12); border-radius:22px; background:#101012; box-shadow:0 28px 80px rgba(0,0,0,.28); }
.mobile-story img { display:block; width:100%; object-fit:cover; object-position:top; }
.mobile-focus .cell { max-width:360px; }
.mobile-focus img { height:clamp(520px,58vw,760px); }
.mobile-story span { display:block; margin-top:16px; color:var(--shu); font-size: var(--t-label); letter-spacing:.16em; text-transform:uppercase; }
.mobile-story p { max-width:32ch; margin-top:10px; color:var(--gray); font-size: var(--t-caption); line-height:1.65; }
.mobile-sequence { display:grid; grid-template-columns:repeat(2,1fr); gap:24px 16px; }
.mobile-sequence img { height:clamp(280px,30vw,410px); }
.mobile-sequence > div:nth-child(2),.mobile-sequence > div:nth-child(4) { transform:translateY(46px); }
.pnc-proof-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:40px; }
.pnc-proof-grid div { min-height:116px; padding:20px; border:1px solid rgba(245,242,235,.1); border-radius:16px; background:rgba(245,242,235,.022); text-align:left; }
.pnc-proof-grid strong { display:block; color:var(--ink); font-family:var(--display); font-size: var(--t-h3); font-weight:500; letter-spacing:-.03em; }
.pnc-proof-grid span { display:block; margin-top:9px; color:var(--gray); font-size: var(--t-caption); line-height:1.5; }

/* Sticky scenes respect the central navigation's real footprint. */
@media (min-width:901px) {
  .finance-ledger-wrap,.pnc-demo-wrap { top:132px; }
  .outcome-cinema--talent.is-animated .outcome-sticky { box-sizing:border-box; padding-top:96px; }
}
@media (max-width:900px) {
  .case-compass-head { grid-template-columns:1fr; }
  .case-compass-grid { grid-template-columns:1fr; }
  .case-compass-grid article { min-height:300px; }
  /* one column: the headlines are no longer side by side, so reserving a
     shared height aligns nothing and only pads the short ones. main.js hands
     the reservation back here when it sees a single track. */
  .case-compass-grid strong { min-height:0; }
  .leadership-perspective-grid { grid-template-columns:1fr; }
  .mobile-story { grid-template-columns:1fr; }
  .mobile-focus { display:grid; grid-template-columns:minmax(220px,.7fr) 1fr; gap:0 24px; align-items:end; }
  .mobile-focus .cell { grid-row:1/4; }
  .pnc-proof-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px) {
  .case-compass { padding-inline:6vw; }
  .case-compass-head h2 { font-size: var(--t-h3); }
  .mobile-focus { display:block; }
  .mobile-focus .cell { max-width:none; }
  .mobile-sequence { grid-template-columns:1fr 1fr; gap:18px 10px; }
  .mobile-sequence > div:nth-child(2),.mobile-sequence > div:nth-child(4) { transform:translateY(24px); }
  .constraint-map { grid-template-columns:1fr; }
  .constraint-map > i { width:2px; height:28px; margin:auto; background:var(--line-soft); }
}
@media (prefers-reduced-transparency:reduce) {
  .case-compass-grid article,.leadership-perspective blockquote { background:rgba(20,20,22,.96); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (prefers-reduced-motion:reduce) {
  .compass-viz--thread::before,.compass-viz--rise i,.compass-viz--ledger i:nth-child(3) { animation:none!important; transform:none; opacity:.7; }
  .compass-viz--thread::before { transform:translateY(-50%) scaleX(1); }
}

/* ============================================================
   v0.28 — precise case alignment + distinct Talent evidence
   ============================================================ */
.casehero .ch-inner { display:flex; flex-direction:column; align-items:center; }
.casehero .kicker,.casehero h1,.casehero h2,.casehero .ch-lede { text-align:center; }
.casehero h1,.casehero h2 { width:fit-content; max-width:min(14ch,100%); margin-inline:auto; }
.casehero .kicker,.casehero .tldr { align-self:stretch; }
.casehero .tldr .t { align-items:center; text-align:center; }

/* The suite's vermilion waypoints now sit in the wet ink itself. */
.journey--suite .jline .jbrush { top:14px; height:36px; overflow:hidden; }
.journey--suite .jline .jbrush .base { opacity:.07; }
.journey--suite .jline .jbrush .fill {
  clip-path:none;
  transform:scaleX(1);
  transform-origin:left center;
  will-change:transform;
}
.journey--suite .jline .jbrush.anim .fill {
  clip-path:none;
  transform:scaleX(0);
}
.journey--suite .jstage .dot { top:32px; width:14px; height:14px; border-width:2px; }
.journey--suite .jstage.on .dot { box-shadow:0 0 0 5px rgba(195,21,55,.1),0 0 18px rgba(195,21,55,.62); }

/* Talent leadership deep dive — one UX thread through four kinds of work. */
.talent-lead-viz { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:32px 0 26px; padding-top:30px; }
.talent-lead-thread { position:absolute; left:4%; right:4%; top:39px; height:2px; transform-origin:left; background:var(--line-soft); border-radius:2px; opacity:.68; animation:talentLeadDraw 4.6s cubic-bezier(.2,.8,.2,1) infinite; }
.talent-lead-viz article { position:relative; min-height:138px; padding:42px 16px 18px; border:1px solid rgba(245,242,235,.1); border-radius:16px; background:rgba(245,242,235,.022); text-align:center; }
.talent-lead-viz article::before { content:""; position:absolute; left:50%; top:8px; width:13px; height:13px; transform:translateX(-50%); border-radius:50%; background:var(--shu); box-shadow:0 0 0 5px rgba(10,10,11,.86),0 0 15px rgba(195,21,55,.42); }
.talent-lead-viz article > span { color:var(--shu); font-size: var(--t-caption); letter-spacing:.14em; }
.talent-lead-viz article b { display:block; margin-top:9px; color:var(--ink); font-family:var(--display); font-size: var(--t-body); font-weight:500; }
.talent-lead-viz article small { display:block; margin-top:7px; color:var(--gray); font-size: var(--t-caption); line-height:1.5; }

/* Talent research deep dive — field signals condense into shared laws. */
.talent-research-viz { position:relative; min-height:280px; margin:30px 0 14px; padding:30px; overflow:hidden; border:1px solid rgba(245,242,235,.1); border-radius:18px; background:radial-gradient(circle at 50% 34%,rgba(245,242,235,.045),transparent 48%),rgba(245,242,235,.018); }
.research-signal-cloud { width:min(420px,90%); margin:0 auto; display:grid; grid-template-columns:repeat(6,1fr); gap:16px 24px; }
.research-signal-cloud i { width:7px; height:7px; justify-self:center; border-radius:50%; background:rgba(245,242,235,.48); opacity:.28; animation:researchSignal 3.8s ease-in-out infinite; }
.research-signal-cloud i:nth-child(3n) { background:var(--shu); }
.research-signal-cloud i:nth-child(2n) { animation-delay:.16s; }.research-signal-cloud i:nth-child(4n) { animation-delay:.32s; }
.research-synthesis-brush { width:min(520px,92%); height:2px; margin:28px auto 0; transform-origin:left; background:var(--line-soft); border-radius:2px; opacity:.68; animation:researchResolve 3.8s cubic-bezier(.2,.8,.2,1) infinite; }
.research-law-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:520px; margin:16px auto 0; }
.research-law-row span { padding:10px 8px; border:1px solid rgba(195,21,55,.36); border-radius:999px; color:var(--ink); font-size: var(--t-label); letter-spacing:.14em; text-align:center; text-transform:uppercase; animation:researchLaw 3.8s cubic-bezier(.2,.8,.2,1) infinite; }
.research-law-row span:nth-child(2){animation-delay:.08s}.research-law-row span:nth-child(3){animation-delay:.16s}
@keyframes talentLeadDraw { 0%,12%{transform:scaleX(.08);opacity:.18} 55%,84%{transform:scaleX(1);opacity:.68} 100%{transform:scaleX(.08);opacity:.18} }
@keyframes researchSignal { 0%,100%{opacity:.2;transform:scale(.7)} 45%,72%{opacity:.85;transform:scale(1)} }
@keyframes researchResolve { 0%,16%{transform:scaleX(.08);opacity:.16} 58%,84%{transform:scaleX(1);opacity:.72} 100%{transform:scaleX(.08);opacity:.16} }
@keyframes researchLaw { 0%,35%{opacity:.25;transform:translateY(8px)} 60%,88%{opacity:1;transform:none} 100%{opacity:.25;transform:translateY(8px)} }

/* Three leader voices unfold as evidence—not as a row of generic cards. */
.outcome-voice--talent { max-width:1320px; padding-inline:clamp(24px,7vw,92px); }
.outcome-voice--talent > .kicker { text-align:center; }
.talent-voice-heading { max-width:900px; margin:0 auto; text-align:center; }
.talent-voice-heading h3 { font-family:var(--display); font-size:clamp(42px,6vw,78px); font-weight:500; line-height:1.02; letter-spacing:-.045em; text-wrap:balance; }
.talent-voice-heading p { max-width:58ch; margin:24px auto 0; color:var(--gray); font-size: var(--t-small); line-height:1.75; }
.talent-voice-sequence { margin-top:clamp(80px,12vh,150px); text-align:left; }
.talent-voice { position:relative; min-height:72vh; display:grid; grid-template-columns:minmax(0,1.32fr) minmax(280px,.68fr); gap:clamp(54px,9vw,132px); align-items:center; padding:clamp(84px,12vh,150px) 0; }
.talent-voice + .talent-voice::before { content:""; position:absolute; left:0; right:0; top:0; height:10px; background:url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; opacity:.24; }
.talent-voice:nth-child(even) .talent-voice-copy { grid-column:2; }
.talent-voice:nth-child(even) .talent-voice-viz { grid-column:1; grid-row:1; }
.talent-voice-label { display:flex; align-items:center; gap:13px; color:var(--shu); font-size: var(--t-label); letter-spacing:.2em; line-height:1.5; text-transform:uppercase; }
.talent-voice-label span { display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(195,21,55,.5); border-radius:50%; letter-spacing:0; }
.outcome-voice .talent-voice blockquote { margin-top:30px; }
.outcome-voice .talent-voice blockquote p { max-width:19ch; font-size: var(--t-h2); line-height:1.13; }
.outcome-voice .talent-voice cite { margin-top:28px; line-height:1.5; }
.talent-voice-viz { position:relative; width:100%; min-height:320px; overflow:hidden; }

/* Profile: disconnected signals resolve into one live record. */
.talent-voice-viz--profile { display:grid; place-items:center; }
.talent-voice-viz--profile::before { content:""; position:absolute; inset:18%; border-radius:50%; background:radial-gradient(circle,rgba(245,242,235,.08),transparent 68%); filter:blur(18px); }
.talent-voice-viz--profile i { position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:50%; background:var(--gray); opacity:.32; transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))); }
.talent-voice-viz--profile span { position:relative; width:132px; height:94px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(245,242,235,.22); border-radius:18px; background:rgba(245,242,235,.025); }
.talent-voice-viz--profile span::before { content:""; position:absolute; inset:-42px; border:1px solid rgba(245,242,235,.08); border-radius:26px; }
.talent-voice-viz--profile b { color:var(--ink); font-family:var(--display); font-size: var(--t-h3); font-weight:500; letter-spacing:-.03em; }
.talent-voice-viz--profile small { margin-top:7px; color:var(--shu); font-size: var(--t-caption); letter-spacing:.18em; }
.talent-voice--profile.is-active .talent-voice-viz i { animation:voiceProfileResolve 1.35s cubic-bezier(.2,.8,.2,1) both; }
.talent-voice--profile.is-active .talent-voice-viz span { animation:voiceProfilePulse .72s cubic-bezier(.2,.8,.2,1) .78s both; }

/* Fluid: eight gates collapse into one explicit action. */
.talent-voice-viz--fluid { display:flex; flex-direction:column; justify-content:center; }
.voice-fluid-gates { position:relative; display:flex; align-items:center; justify-content:space-between; padding:0 12px; }
.voice-fluid-gates::before { content:""; position:absolute; left:12px; right:12px; top:50%; height:15px; transform:translateY(-50%); background:url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; opacity:.36; }
.voice-fluid-gates i { position:relative; width:12px; height:12px; border:2px solid var(--gray); border-radius:50%; background:var(--canvas); }
.voice-fluid-action { align-self:flex-end; display:flex; align-items:center; gap:18px; margin:48px 4px 0; padding:13px 16px 13px 22px; border:1px solid rgba(245,242,235,.18); border-radius:999px; }
.voice-fluid-action b { color:var(--ink); font-size: var(--t-caption); font-weight:500; letter-spacing:.1em; }
.voice-fluid-action span { padding:8px 13px; border-radius:999px; background:var(--shu); color:var(--ink); font-size: var(--t-label); letter-spacing:.12em; text-transform:uppercase; }
.talent-voice-viz--fluid > strong { align-self:flex-end; margin:22px 10px 0 0; color:var(--shu); font-family:var(--display); font-size:clamp(42px,5vw,68px); font-weight:500; letter-spacing:-.045em; }
.talent-voice--fluid.is-active .voice-fluid-gates i { animation:voiceGateCollapse .75s cubic-bezier(.4,0,.2,1) calc(var(--n)*.07s) both; }
.talent-voice--fluid.is-active .voice-fluid-action,.talent-voice--fluid.is-active .talent-voice-viz--fluid > strong { animation:voiceActionResolve .72s cubic-bezier(.2,.8,.2,1) .68s both; }

/* Rise: the disparity draws first; the action follows it. */
.talent-voice-viz--rise { display:flex; flex-direction:column; justify-content:center; gap:25px; padding:0 4px; }
.talent-voice-viz--rise > div { display:grid; grid-template-columns:1fr auto; gap:10px 20px; align-items:end; }
.talent-voice-viz--rise span { color:var(--gray); font-size: var(--t-label); letter-spacing:.14em; text-transform:uppercase; }
.talent-voice-viz--rise b { color:var(--ink); font-family:var(--display); font-size: var(--t-h3); font-weight:500; }
.talent-voice-viz--rise i { grid-column:1/-1; height:10px; transform:scaleX(0); transform-origin:left; background:url("../media/brand/sumi-brush-v1.png") left center/100% 100% no-repeat; opacity:.78; }
.talent-voice-viz--rise > div:nth-child(2) i { filter:sepia(1) saturate(5) hue-rotate(330deg); }
.talent-voice-viz--rise > strong { align-self:flex-end; margin-top:14px; padding:13px 18px; border:1px solid rgba(195,21,55,.5); border-radius:999px; color:var(--ink); font-size: var(--t-label); font-weight:500; letter-spacing:.13em; text-transform:uppercase; opacity:0; transform:translateY(12px); }
.talent-voice-viz--rise > strong em { color:var(--shu); font-style:normal; }
.talent-voice--rise.is-active .talent-voice-viz--rise i { animation:voiceRatioDraw 1.05s cubic-bezier(.2,.8,.2,1) both; }
.talent-voice--rise.is-active .talent-voice-viz--rise > div:nth-child(2) i { animation-delay:.16s; }
.talent-voice--rise.is-active .talent-voice-viz--rise > strong { animation:voiceActionResolve .7s cubic-bezier(.2,.8,.2,1) .88s both; }

@keyframes voiceProfileResolve { from{opacity:.24;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.75)} to{opacity:.06;transform:translate(-50%,-50%) scale(.25)} }
@keyframes voiceProfilePulse { from{opacity:.25;transform:scale(.82)} to{opacity:1;transform:scale(1)} }
@keyframes voiceGateCollapse { from{opacity:1;transform:scale(1)} to{opacity:.08;transform:scale(.18)} }
@keyframes voiceActionResolve { from{opacity:0;transform:translateY(14px) scale(.94)} to{opacity:1;transform:none} }
@keyframes voiceRatioDraw { from{transform:scaleX(0)} to{transform:scaleX(var(--bar))} }
.outcome-cinema--talent.is-animated { height:280vh; }

@media (max-width:900px) {
  .outcome-cinema--talent.is-animated { height:auto; }
  .talent-lead-viz { grid-template-columns:repeat(2,1fr); }
  .talent-lead-thread { display:none; }
  .talent-voice { min-height:0; grid-template-columns:1fr; gap:46px; padding-block:90px; }
  .talent-voice:nth-child(even) .talent-voice-copy,.talent-voice:nth-child(even) .talent-voice-viz { grid-column:auto; grid-row:auto; }
  .talent-voice-viz { min-height:260px; }
  .outcome-voice .talent-voice blockquote p { max-width:23ch; }
}
@media (max-width:620px) {
  .talent-lead-viz { grid-template-columns:1fr; }
  .research-signal-cloud { gap:14px; }
  .research-law-row { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .talent-lead-thread,.research-signal-cloud i,.research-synthesis-brush,.research-law-row span { animation:none!important; opacity:1; transform:none; }
  .talent-lead-thread,.research-synthesis-brush { transform:scaleX(1); }
  .talent-voice-viz--profile i { opacity:.08; transform:translate(-50%,-50%) scale(.25); }
  .talent-voice-viz--profile span,.voice-fluid-action,.talent-voice-viz--fluid > strong,.talent-voice-viz--rise > strong { opacity:1; transform:none; }
  .voice-fluid-gates i { opacity:.08; transform:scale(.18); }
  .talent-voice-viz--rise i { transform:scaleX(var(--bar)); }
}
@media (prefers-reduced-transparency:reduce) {
  .talent-voice-viz--profile span { background:#141416; }
}

/* ================================================================
   v0.30 — contextual glass + project-specific miniature narratives
   ================================================================ */

/* A case-study choice arrives as a compact control, then reveals its label. */
.case-talent .pill-row.pill-dynamic,
.case-finance .pill-row.pill-dynamic,
.case-pnc .pill-row.pill-dynamic {
  opacity:0;
  transform:translateY(16px) scaleX(.16) scaleY(.84);
  transform-origin:center;
  pointer-events:none;
  transition:opacity .22s ease calc(var(--pill-index,0) * .08s),transform .72s cubic-bezier(.2,.8,.2,1) calc(var(--pill-index,0) * .08s),background .3s ease,box-shadow .4s ease;
}
.case-talent .pill-row.pill-dynamic.pill-visible,
.case-finance .pill-row.pill-dynamic.pill-visible,
.case-pnc .pill-row.pill-dynamic.pill-visible { opacity:1; transform:none; pointer-events:auto; }
.pill-label { display:inline-block; }
.pill-dynamic .pill-label { opacity:0; transform:translateX(-10px); transition:opacity .36s ease .25s,transform .48s cubic-bezier(.2,.8,.2,1) .25s; }
.pill-dynamic.pill-visible .pill-label { opacity:1; transform:none; }
.pill-dynamic .plus,.pill-dynamic .live-dot { opacity:0; transform:scale(0); transition:opacity .22s ease .14s,transform .48s cubic-bezier(.2,.8,.2,1) .14s; }
.pill-dynamic.pill-visible .plus,.pill-dynamic.pill-visible .live-dot { opacity:1; transform:scale(1); }
.pill-visible .glass-pill:hover { transform:translateY(-2px) scale(1.01); }

/* Shared stage: a quiet schematic inside the larger liquid-glass overlay. */
.pill-story { position:relative; min-height:286px; margin:30px 0 18px; padding:28px; overflow:hidden; border:1px solid rgba(245,242,235,.1); border-radius:22px; background:radial-gradient(circle at 50% 45%,rgba(245,242,235,.052),transparent 52%),rgba(245,242,235,.018); }
.pill-story::after { display:none; }

/* Finance — field evidence converges into an operational model. */
.pill-story--finance-fieldwork { display:grid; grid-template-columns:1fr 1.35fr 1fr; align-items:center; gap:26px; }
.fieldwork-sources { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.fieldwork-sources span,.language-facts span { padding:10px 8px; border:1px solid rgba(245,242,235,.13); border-radius:999px; color:var(--gray); font-size: var(--t-label); letter-spacing:.14em; text-align:center; text-transform:uppercase; }
.fieldwork-brush { height:2px; transform:scaleX(.06); transform-origin:left; background:var(--line-soft); border-radius:2px; opacity:.68; }
.fieldwork-model { display:grid; place-items:center; align-content:center; width:150px; height:150px; justify-self:center; border:1px solid rgba(195,21,55,.42); border-radius:50%; opacity:.18; transform:scale(.76); }
.fieldwork-model b { color:var(--ink); font-family:var(--display); font-size: var(--t-h2); font-weight:500; line-height:1; }
.fieldwork-model span { color:var(--gray); font-size: var(--t-caption); letter-spacing:.08em; }
.fieldwork-model i { width:48px; height:2px; margin:13px 0 9px; background:none; background-color:var(--line-soft); border-radius:2px; opacity:.68; }
.fieldwork-model small { color:var(--shu); font-size: var(--t-caption); letter-spacing:.16em; }
.overlay[aria-hidden="false"] .fieldwork-sources span { animation:pillChipArrive .55s cubic-bezier(.2,.8,.2,1) both; }
.overlay[aria-hidden="false"] .fieldwork-sources span:nth-child(2){animation-delay:.08s}.overlay[aria-hidden="false"] .fieldwork-sources span:nth-child(3){animation-delay:.16s}.overlay[aria-hidden="false"] .fieldwork-sources span:nth-child(4){animation-delay:.24s}
.overlay[aria-hidden="false"] .fieldwork-brush { animation:pillBrushDraw .9s cubic-bezier(.2,.8,.2,1) .35s both; }
.overlay[aria-hidden="false"] .fieldwork-model { animation:pillResolve .72s cubic-bezier(.2,.8,.2,1) 1s both; }

/* Finance — familiar business facts translate into governed accounting. */
.pill-story--finance-language { display:grid; grid-template-columns:1fr .72fr 1.22fr; align-items:center; gap:30px; }
.language-facts { display:grid; gap:12px; }
.language-translator { display:grid; place-items:center; gap:12px; color:var(--shu); font-size: var(--t-label); letter-spacing:.16em; text-transform:uppercase; }
.language-translator i { width:100%; height:2px; transform:scaleX(.06); transform-origin:left; background:var(--line-soft); border-radius:2px; opacity:.68; }
.language-entry { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:24px; border:1px solid rgba(245,242,235,.13); border-radius:18px; opacity:.2; transform:translateX(18px); }
.language-entry span { color:var(--ink); font-family:var(--display); font-size: var(--t-lede); }
.language-entry i { height:1px; background:rgba(245,242,235,.18); }
.language-entry strong { grid-column:1/-1; justify-self:end; margin-top:11px; color:var(--shu); font-size: var(--t-label); font-weight:500; letter-spacing:.17em; text-transform:uppercase; }
.overlay[aria-hidden="false"] .language-facts span { animation:pillChipArrive .52s cubic-bezier(.2,.8,.2,1) both; }
.overlay[aria-hidden="false"] .language-facts span:nth-child(2){animation-delay:.1s}.overlay[aria-hidden="false"] .language-facts span:nth-child(3){animation-delay:.2s}
.overlay[aria-hidden="false"] .language-translator i { animation:pillBrushDraw .85s cubic-bezier(.2,.8,.2,1) .32s both; }
.overlay[aria-hidden="false"] .language-translator b { animation:pillLabelArrive .5s ease .75s both; }
.overlay[aria-hidden="false"] .language-entry { animation:pillResolveX .72s cubic-bezier(.2,.8,.2,1) .95s both; }

/* Finance — three role-specific products join one controlled thread. */
.pill-story--finance-platform { display:grid; grid-template-columns:repeat(3,1fr); align-content:center; gap:18px; padding-bottom:84px; }
.platform-thread { position:absolute; left:9%; right:9%; top:48%; height:2px; transform:scaleX(.05); transform-origin:left; background:var(--line-soft); border-radius:2px; opacity:.68; }
.platform-node { position:relative; display:grid; place-items:center; min-height:112px; padding:18px; border:1px solid rgba(245,242,235,.13); border-radius:18px; background:rgba(10,10,11,.76); opacity:.22; transform:translateY(14px); }
.platform-node span { position:absolute; left:14px; top:12px; color:var(--shu); font-size: var(--t-caption); letter-spacing:.14em; }
.platform-node b { color:var(--ink); font-family:var(--display); font-size: var(--t-lede); font-weight:500; }
.platform-node small { color:var(--gray); font-size: var(--t-label); letter-spacing:.16em; text-transform:uppercase; }
.platform-resolve { position:absolute; left:50%; bottom:25px; transform:translate(-50%,10px) scale(.88); display:flex; align-items:baseline; gap:12px; opacity:0; }
.platform-resolve strong { color:var(--ink); font-family:var(--display); font-size: var(--t-h4); font-weight:500; }
.platform-resolve small { color:var(--shu); font-size: var(--t-caption); letter-spacing:.16em; }
.overlay[aria-hidden="false"] .platform-thread { animation:pillBrushDraw 1.15s cubic-bezier(.2,.8,.2,1) .18s both; }
.overlay[aria-hidden="false"] .platform-node { animation:pillNodeResolve .58s cubic-bezier(.2,.8,.2,1) both; }
.overlay[aria-hidden="false"] .platform-node:nth-of-type(2){animation-delay:.42s}.overlay[aria-hidden="false"] .platform-node:nth-of-type(3){animation-delay:.62s}.overlay[aria-hidden="false"] .platform-node:nth-of-type(4){animation-delay:.82s}
.overlay[aria-hidden="false"] .platform-resolve { animation:pillResolveCenter .62s cubic-bezier(.2,.8,.2,1) 1.25s both; }

/* PNC — progressive disclosure keeps every rule while reducing visible burden. */
.pill-story--pnc-logic { display:grid; grid-template-columns:1fr .75fr 1fr; align-items:center; gap:28px; padding-bottom:56px; }
.logic-fields { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.logic-fields i { height:30px; border:1px solid rgba(245,242,235,.14); border-radius:8px; background:rgba(245,242,235,.025); }
.logic-fields i.keep { border-color:rgba(195,21,55,.5); }
.logic-filter { display:flex; align-items:center; justify-content:center; gap:13px; color:var(--gray); font-size: var(--t-label); letter-spacing:.12em; text-transform:uppercase; }
.logic-filter b { color:var(--shu); font-size: var(--t-body); }
.logic-path { display:grid; gap:11px; }
.logic-path i { height:30px; border:1px solid rgba(195,21,55,.42); border-radius:999px; opacity:.16; transform:translateX(14px); }
.logic-path strong { justify-self:end; color:var(--shu); font-size: var(--t-label); font-weight:500; letter-spacing:.16em; text-transform:uppercase; opacity:0; }
.logic-foundation { position:absolute; left:8%; right:8%; bottom:20px; padding-top:12px; border-top:1px solid rgba(245,242,235,.16); color:var(--gray); font-size: var(--t-caption); letter-spacing:.17em; text-align:center; }
.overlay[aria-hidden="false"] .logic-fields i:not(.keep) { animation:pncFieldRecede .5s ease .3s both; }
.overlay[aria-hidden="false"] .logic-fields i.keep { animation:pncFieldKeep .58s cubic-bezier(.2,.8,.2,1) .48s both; }
.overlay[aria-hidden="false"] .logic-filter { animation:pillLabelArrive .48s ease .76s both; }
.overlay[aria-hidden="false"] .logic-path i { animation:pillResolveX .5s cubic-bezier(.2,.8,.2,1) both; }
.overlay[aria-hidden="false"] .logic-path i:nth-child(1){animation-delay:.88s}.overlay[aria-hidden="false"] .logic-path i:nth-child(2){animation-delay:.98s}.overlay[aria-hidden="false"] .logic-path i:nth-child(3){animation-delay:1.08s}.overlay[aria-hidden="false"] .logic-path i:nth-child(4){animation-delay:1.18s}
.overlay[aria-hidden="false"] .logic-path strong { animation:pillLabelArrive .5s ease 1.42s both; }

/* PNC — the sprint is drawn as a repeating decision rhythm. */
.pill-story--pnc-sprints { display:grid; grid-template-columns:repeat(4,1fr); align-content:center; gap:12px; padding-bottom:82px; }
.sprint-brush { position:absolute; left:8%; right:8%; top:48%; height:2px; transform:scaleX(.06); transform-origin:left; background:var(--line-soft); border-radius:2px; opacity:.68; }
.sprint-node { position:relative; z-index:1; display:grid; place-items:center; min-height:92px; border:1px solid rgba(245,242,235,.13); border-radius:50%; background:rgba(10,10,11,.82); opacity:.18; transform:scale(.78); }
.sprint-node span { color:var(--shu); font-size: var(--t-caption); letter-spacing:.12em; }
.sprint-node b { color:var(--ink); font-size: var(--t-caption); font-weight:500; letter-spacing:.08em; }
.sprint-count { position:absolute; left:50%; bottom:24px; transform:translate(-50%,10px); display:flex; align-items:baseline; gap:12px; opacity:0; white-space:nowrap; }
.sprint-count strong { color:var(--ink); font-family:var(--display); font-size: var(--t-h3); font-weight:500; }
.sprint-count small { color:var(--shu); font-size: var(--t-caption); letter-spacing:.15em; }
.overlay[aria-hidden="false"] .sprint-brush { animation:pillBrushDraw 1.05s cubic-bezier(.2,.8,.2,1) .2s both; }
.overlay[aria-hidden="false"] .sprint-node { animation:pillResolve .52s cubic-bezier(.2,.8,.2,1) both; }
.overlay[aria-hidden="false"] .sprint-node:nth-of-type(2){animation-delay:.36s}.overlay[aria-hidden="false"] .sprint-node:nth-of-type(3){animation-delay:.52s}.overlay[aria-hidden="false"] .sprint-node:nth-of-type(4){animation-delay:.68s}.overlay[aria-hidden="false"] .sprint-node:nth-of-type(5){animation-delay:.84s}
.overlay[aria-hidden="false"] .sprint-count { animation:pillResolveCenter .58s cubic-bezier(.2,.8,.2,1) 1.2s both; }

/* PNC — delivery stays a living loop rather than a downstream handoff. */
.pill-story--pnc-delivery { --orbit-distance:155px; --orbit-start:120px; min-height:330px; }
.delivery-orbit { position:absolute; left:50%; top:50%; width:230px; height:230px; margin:-115px; border:1px solid rgba(245,242,235,.13); border-radius:50%; opacity:.25; }
.delivery-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.8); display:grid; place-items:center; width:126px; height:126px; border:1px solid rgba(195,21,55,.48); border-radius:50%; opacity:.2; }
.delivery-core b { color:var(--ink); font-family:var(--display); font-size: var(--t-body); font-weight:500; }
.delivery-core small { color:var(--shu); font-size: var(--t-caption); letter-spacing:.14em; }
.pill-story--pnc-delivery > span { position:absolute; left:50%; top:50%; width:82px; margin:-16px -41px; padding:9px 5px; border:1px solid rgba(245,242,235,.13); border-radius:999px; background:var(--canvas); color:var(--gray); font-size: var(--t-label); letter-spacing:.1em; text-align:center; text-transform:uppercase; opacity:.18; transform:rotate(var(--a)) translateX(var(--orbit-distance)) rotate(calc(-1 * var(--a))) scale(.78); }
.overlay[aria-hidden="false"] .delivery-orbit { animation:pncOrbitArrive .9s cubic-bezier(.2,.8,.2,1) .2s both; }
.overlay[aria-hidden="false"] .delivery-core { animation:pncCoreArrive .68s cubic-bezier(.2,.8,.2,1) 1.08s both; }
.overlay[aria-hidden="false"] .pill-story--pnc-delivery > span { animation:pncOrbitNode .56s cubic-bezier(.2,.8,.2,1) both, orbitPulse .7s ease both; }
.overlay[aria-hidden="false"] .pill-story--pnc-delivery > span:nth-of-type(1){animation-delay:.42s,1.62s}.overlay[aria-hidden="false"] .pill-story--pnc-delivery > span:nth-of-type(2){animation-delay:.54s,1.8s}.overlay[aria-hidden="false"] .pill-story--pnc-delivery > span:nth-of-type(3){animation-delay:.66s,1.98s}.overlay[aria-hidden="false"] .pill-story--pnc-delivery > span:nth-of-type(4){animation-delay:.78s,2.16s}.overlay[aria-hidden="false"] .pill-story--pnc-delivery > span:nth-of-type(5){animation-delay:.9s,2.34s}

/* PNC — code-native production and responsive specification miniatures. */
.micro-frame,.micro-cell { min-height:100%; }
.pnc-production-viz,.pnc-spec-viz { position:relative; width:100%; height:100%; min-height:220px; overflow:hidden; border-radius:inherit; background:radial-gradient(circle at 68% 42%,rgba(195,21,55,.08),transparent 42%),#101012; }
.overlay-schematic { margin:30px 0 12px; border:1px solid rgba(245,242,235,.1); border-radius:22px; }
.production-top { display:flex; gap:7px; padding:17px; border-bottom:1px solid rgba(245,242,235,.1); }
.production-top i { width:7px; height:7px; border-radius:50%; background:var(--gray); opacity:.35; }
.production-copy { position:absolute; left:9%; top:28%; width:34%; display:grid; gap:12px; }
.production-copy i { height:7px; transform:scaleX(0); transform-origin:left; border-radius:99px; background:rgba(245,242,235,.22); }
.production-copy i:nth-child(2){width:78%}.production-copy i:nth-child(3){width:58%}
.production-panel { position:absolute; right:8%; top:27%; width:40%; padding:20px; border:1px solid rgba(245,242,235,.13); border-radius:16px; opacity:.18; transform:translateY(18px); }
.production-panel span { display:block; height:31px; margin-bottom:11px; border:1px solid rgba(245,242,235,.13); border-radius:8px; }
.production-panel b { display:block; width:78px; margin-left:auto; padding:9px; border-radius:999px; background:var(--shu); color:var(--ink); font-size: var(--t-caption); font-weight:500; text-align:center; }
.pnc-production-viz > strong { position:absolute; right:8%; bottom:11%; color:var(--shu); font-size: var(--t-label); font-weight:500; letter-spacing:.17em; text-transform:uppercase; opacity:0; transform:translateY(10px); }
.overlay[aria-hidden="false"] .pnc-production-viz .production-copy i { animation:pncLineDraw .62s cubic-bezier(.2,.8,.2,1) .3s both; }
.overlay[aria-hidden="false"] .pnc-production-viz .production-copy i:nth-child(2){animation-delay:.4s}
.overlay[aria-hidden="false"] .pnc-production-viz .production-copy i:nth-child(3){animation-delay:.5s}
.overlay[aria-hidden="false"] .pnc-production-viz .production-panel { animation:pillResolveY .7s cubic-bezier(.2,.8,.2,1) .7s both; }
.overlay[aria-hidden="false"] .pnc-production-viz > strong { animation:pillLabelArrive .52s ease 1.3s both; }
.pnc-spec-viz { display:grid; grid-template-columns:1.2fr .65fr .55fr; align-items:center; gap:15px; padding:24px; }
.spec-desktop,.spec-phone { display:grid; gap:8px; padding:14px; border:1px solid rgba(245,242,235,.14); border-radius:12px; opacity:.22; transform:translateY(12px); }
.spec-desktop { min-height:100px; }.spec-phone { min-height:126px; align-content:center; }
.spec-desktop i,.spec-phone i { height:8px; border-radius:99px; background:rgba(245,242,235,.16); }
.spec-brush { height:2px; transform:scaleX(.05); transform-origin:left; background:var(--line-soft); border-radius:2px; opacity:.68; }
.pnc-spec-viz > span { position:absolute; left:50%; bottom:18px; transform:translate(-50%,8px); color:var(--shu); font-size: var(--t-label); letter-spacing:.15em; text-transform:uppercase; opacity:0; white-space:nowrap; }
.overlay[aria-hidden="false"] .pnc-spec-viz .spec-desktop { animation:pillResolveY .6s cubic-bezier(.2,.8,.2,1) .3s both; }
.overlay[aria-hidden="false"] .pnc-spec-viz .spec-brush { animation:pillBrushDraw .8s cubic-bezier(.2,.8,.2,1) .7s both; }
.overlay[aria-hidden="false"] .pnc-spec-viz .spec-phone { animation:pillResolveY .6s cubic-bezier(.2,.8,.2,1) 1.2s both; }
.overlay[aria-hidden="false"] .pnc-spec-viz > span { animation:pillResolveCenter .5s cubic-bezier(.2,.8,.2,1) 1.7s both; }

@keyframes pillChipArrive { from{opacity:.12;transform:translateY(10px) scale(.92)} to{opacity:1;transform:none} }
@keyframes pillBrushDraw { from{opacity:.12;transform:scaleX(.05)} to{opacity:.68;transform:scaleX(1)} }
@keyframes pillResolve { from{opacity:.16;transform:scale(.76)} to{opacity:1;transform:scale(1)} }
@keyframes pillResolveX { from{opacity:.16;transform:translateX(18px)} to{opacity:1;transform:none} }
@keyframes pillResolveY { from{opacity:.16;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes pillResolveCenter { from{opacity:0;transform:translate(-50%,10px) scale(.88)} to{opacity:1;transform:translate(-50%,0) scale(1)} }
@keyframes pillNodeResolve { from{opacity:.18;transform:translateY(14px) scale(.92)} to{opacity:1;transform:none} }
@keyframes pillLabelArrive { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes pncFieldRecede { from{opacity:1;transform:scale(1)} to{opacity:.06;transform:scale(.72)} }
@keyframes pncFieldKeep { from{opacity:.35;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
@keyframes pncOrbitArrive { from{opacity:0;transform:scale(.72)} to{opacity:.42;transform:scale(1)} }
@keyframes pncCoreArrive { from{opacity:.2;transform:translate(-50%,-50%) scale(.8)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
@keyframes pncOrbitNode { from{opacity:.18;transform:rotate(var(--a)) translateX(var(--orbit-start)) rotate(calc(-1 * var(--a))) scale(.78)} to{opacity:1;transform:rotate(var(--a)) translateX(var(--orbit-distance)) rotate(calc(-1 * var(--a))) scale(1)} }
@keyframes orbitPulse { 0%,100%{box-shadow:0 0 0 rgba(195,21,55,0)} 50%{box-shadow:0 0 16px rgba(195,21,55,.45);border-color:rgba(195,21,55,.6)} }
@keyframes pncLineDraw { from{transform:scaleX(0)} to{transform:scaleX(1)} }

@media (max-width:760px) {
  .pill-story { min-height:320px; padding:22px; }
  .pill-story--finance-fieldwork,.pill-story--finance-language,.pill-story--pnc-logic { grid-template-columns:1fr; gap:18px; }
  .fieldwork-sources { grid-template-columns:repeat(4,1fr); }
  .fieldwork-model { width:122px; height:122px; }
  .language-facts { grid-template-columns:repeat(3,1fr); }
  .language-translator i,.fieldwork-brush { width:60%; margin:auto; }
  .pill-story--finance-platform { grid-template-columns:1fr; padding-bottom:72px; }
  .platform-thread { top:19%; bottom:22%; left:50%; right:auto; width:22px; height:auto; transform-origin:top; background-size:100% 100%; }
  .platform-node { min-height:66px; }
  .logic-fields { grid-template-columns:repeat(6,1fr); }
  .logic-path { grid-template-columns:repeat(4,1fr); }
  .logic-path strong { grid-column:1/-1; }
  .pill-story--pnc-sprints { grid-template-columns:repeat(2,1fr); padding-bottom:76px; }
  .sprint-node { min-height:72px; border-radius:18px; }
  .delivery-orbit { width:180px; height:180px; margin:-90px; }
  .pill-story--pnc-delivery { --orbit-distance:125px; --orbit-start:98px; }
  .pnc-spec-viz { grid-template-columns:1fr .42fr .65fr; }
}
@media (max-width:520px) {
  .fieldwork-sources,.language-facts { grid-template-columns:repeat(2,1fr); }
  .pill-story--pnc-delivery { min-height:300px; }
  .delivery-core { width:106px; height:106px; }
  .pill-story--pnc-delivery { --orbit-distance:105px; --orbit-start:82px; }
  .pill-story--pnc-delivery > span { width:68px; margin-inline:-34px; font-size: var(--t-caption); }
  .sprint-count { align-items:center; flex-direction:column; gap:3px; }
  .pnc-spec-viz { padding:16px; gap:9px; }
}
@media (prefers-reduced-motion:reduce) {
  .pill-dynamic,.pill-dynamic .glass-pill,.pill-dynamic .pill-label,.pill-dynamic .plus,.pill-dynamic .live-dot { opacity:1!important; transform:none!important; transition:none!important; }
  .pill-story *,.pnc-production-viz *,.pnc-spec-viz * { animation:none!important; }
  .fieldwork-brush,.language-translator i,.platform-thread,.sprint-brush,.spec-brush { opacity:.68; transform:scaleX(1); }
  .fieldwork-model,.language-entry,.platform-node,.logic-path i,.sprint-node,.delivery-core,.production-panel,.spec-desktop,.spec-phone { opacity:1; transform:none; }
  .platform-resolve,.sprint-count,.pnc-spec-viz > span { opacity:1; transform:translate(-50%,0); }
  .logic-path strong,.pnc-production-viz > strong { opacity:1; transform:none; }
  .logic-fields i:not(.keep) { opacity:.06; transform:scale(.72); }
  .logic-fields i.keep { opacity:1; transform:none; }
  .delivery-orbit { opacity:.42; transform:none; }
  .pill-story--pnc-delivery > span { opacity:1; }
  .production-copy i { transform:scaleX(1); }
}

/* ================================================================
   v0.33 — homepage thesis, compact transfer receipt, fuller outro ink
   ================================================================ */
.proof .stat .big {
  font-size:clamp(40px,4.6vw,66px);
  letter-spacing:-.045em;
}
.stat .big.big--transfer {
  flex-wrap:nowrap;
  gap:0 clamp(6px,.7vw,10px);
  white-space:nowrap;
}
.outro .brush-underline { width:min(410px,72vw); height:clamp(84px,7.5vw,96px); margin-bottom:24px; }

/* ================================================================
   v0.36 — Talent scale, longitudinal research, and leader evidence
   ================================================================ */

/* Keep the 60-second story legible: text owns the upper field, proof the lower. */
.case-talent .case-compass-head h2 { max-width:none; }
.case-talent .case-compass-head h2 > span { white-space:nowrap; }
/* talent 60-sec: short metric headings, kept to one line */
/* The base rule reserves three lines under every compass headline so that the
   paragraphs line up across cards whose headlines wrap to different depths.
   Talent's headlines are `white-space: nowrap` — they are single-line by
   construction, all three of them — so that reservation was pure dead air:
   roughly sixty pixels of nothing between each headline and its paragraph,
   in all three boxes. One line is all these need, and one line still aligns
   the three paragraphs with each other. */
/* Talent's headlines are `white-space: nowrap` — single-line by construction,
   all three of them — so one line is the correct reservation here. */
.case-talent .case-compass-grid strong { max-width:none; white-space:nowrap; text-wrap:normal; font-size: var(--t-h4); }
/* Talent used to hard-code `padding-bottom: 132px` against the base rule's
   calculated 98px (strip + inset + clear gap), which left it with 34px more
   room under its body copy than any other case study, and put its graphic
   strip somewhere no other page's sits. Its pills measure ~26px, so the
   shared 46px strip holds them with air to spare; the bespoke number is gone
   and Talent now derives its reservation from the same two variables as
   Finance, PNC and Anchor. */
.case-talent .case-compass-grid article { --head-lines: 1; min-height:330px; }
.compass-viz--talent-scale { display:grid; grid-template-columns:auto 1fr auto 1fr auto; gap:9px; align-items:center; }
.compass-viz--talent-scale span { position:relative; z-index:1; padding:8px 9px; border:1px solid rgba(245,242,235,.15); border-radius:999px; background:rgba(10,10,11,.82); color:var(--gray); font-size: var(--t-label); letter-spacing:.1em; text-align:center; text-transform:uppercase; white-space:nowrap; }
.compass-viz--talent-scale span:last-child { border-color:rgba(195,21,55,.52); color:var(--ink); }
.compass-viz--talent-scale i { height:8px; transform:scaleX(.08); transform-origin:left; background:url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; opacity:.22; animation:talentCompassRoute 4s cubic-bezier(.2,.8,.2,1) infinite; }
.compass-viz--talent-scale i:nth-of-type(2) { animation-delay:.32s; }
.compass-viz--talent-lead { display:flex; align-items:center; justify-content:space-between; }
.compass-viz--talent-lead i { position:absolute; left:2%; right:2%; top:50%; z-index:0; height:9px; transform:translateY(-50%) scaleX(.08); transform-origin:left; background:url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; opacity:.22; animation:talentCompassLeadRoute 4s cubic-bezier(.2,.8,.2,1) infinite; }
.compass-viz--talent-lead span { position:relative; z-index:1; display:grid; place-items:center; min-width:48px; padding:8px 6px; border:1px solid rgba(245,242,235,.14); border-radius:999px; background:rgba(10,10,11,.9); color:var(--gray); font-size: var(--t-label); letter-spacing:.08em; text-transform:uppercase; animation:talentCompassStage 4s cubic-bezier(.2,.8,.2,1) infinite; }
.compass-viz--talent-lead span:nth-child(2){animation-delay:.14s}.compass-viz--talent-lead span:nth-child(3){animation-delay:.28s}.compass-viz--talent-lead span:nth-child(4){animation-delay:.42s;color:var(--ink);border-color:rgba(195,21,55,.5)}
@keyframes talentCompassRoute { 0%,14%{transform:scaleX(.08);opacity:.18} 54%,82%{transform:scaleX(1);opacity:.72} 100%{transform:scaleX(.08);opacity:.18} }
@keyframes talentCompassLeadRoute { 0%,14%{transform:translateY(-50%) scaleX(.08);opacity:.18} 54%,82%{transform:translateY(-50%) scaleX(1);opacity:.72} 100%{transform:translateY(-50%) scaleX(.08);opacity:.18} }
@keyframes talentCompassStage { 0%,20%,100%{opacity:.42;transform:scale(.92)} 48%,80%{opacity:1;transform:scale(1)} }

/* Problem: organizational volume surrounds the route one employee had to cross. */
.talent-problem-intro { display:grid; grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr); gap:clamp(54px,7vw,108px); align-items:center; max-width:1380px; }
.talent-problem-copy h3 { max-width:15ch; }
.talent-scale-viz { position:relative; min-height:520px; overflow:hidden; border:1px solid rgba(245,242,235,.11); border-radius:28px; background:radial-gradient(circle at 50% 52%,rgba(195,21,55,.08),transparent 34%),linear-gradient(145deg,rgba(245,242,235,.045),rgba(245,242,235,.012)); }
.scale-volume { position:absolute; left:28px; right:28px; top:28px; z-index:3; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.scale-volume span { padding:12px 8px; border:1px solid rgba(245,242,235,.1); border-radius:13px; color:var(--gray); font-size: var(--t-label); letter-spacing:.1em; text-align:center; text-transform:uppercase; opacity:.2; transform:translateY(12px); }
.scale-volume b { display:block; margin-bottom:5px; color:var(--ink); font-family:var(--display); font-size: var(--t-lede); font-weight:500; letter-spacing:-.03em; }
.scale-system-field { position:absolute; inset:116px 38px 98px; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(5,1fr); gap:12px; opacity:.55; }
.scale-system-field i { align-self:center; justify-self:center; width:16px; height:16px; border:1px solid rgba(245,242,235,.16); border-radius:5px; opacity:.08; transform:scale(.68); }
.scale-system-field i:nth-child(3n) { border-radius:50%; }.scale-system-field i:nth-child(5n) { border-color:rgba(195,21,55,.42); }
.scale-route { position:absolute; left:50%; top:52%; z-index:4; width:min(390px,76%); transform:translate(-50%,-50%); padding:22px 24px; border:1px solid rgba(245,242,235,.16); border-radius:20px; background:rgba(10,10,11,.92); box-shadow:0 24px 60px rgba(0,0,0,.38); text-align:center; opacity:.2; }
.scale-route > span { display:inline-block; color:var(--ink); font-size: var(--t-label); letter-spacing:.14em; text-transform:uppercase; }
.scale-route > div { position:relative; display:flex; justify-content:space-between; margin:22px 0 17px; }
.scale-route > div::before { content:""; position:absolute; left:0; right:0; top:50%; height:12px; transform:translateY(-50%) scaleX(.06); transform-origin:left; background:url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; opacity:.32; }
.scale-route > div i { position:relative; width:11px; height:11px; border:2px solid var(--gray); border-radius:50%; background:var(--canvas); opacity:.24; transform:scale(.7); }
.scale-route strong { color:var(--shu); font-size: var(--t-label); font-weight:500; letter-spacing:.15em; text-transform:uppercase; }
.scale-waste { position:absolute; right:28px; bottom:24px; z-index:3; display:flex; align-items:baseline; gap:9px; opacity:0; transform:translateY(10px); }
.scale-waste b { color:var(--shu); font-family:var(--display); font-size: var(--t-h3); font-weight:500; letter-spacing:-.04em; }
.scale-waste span { color:var(--gray); font-size: var(--t-label); letter-spacing:.14em; text-transform:uppercase; }
.talent-scale-viz.is-active .scale-volume span { animation:talentScaleMetric .6s cubic-bezier(.2,.8,.2,1) both; }
.talent-scale-viz.is-active .scale-volume span:nth-child(2){animation-delay:.08s}.talent-scale-viz.is-active .scale-volume span:nth-child(3){animation-delay:.16s}.talent-scale-viz.is-active .scale-volume span:nth-child(4){animation-delay:.24s}
.talent-scale-viz.is-active .scale-system-field i { animation:talentSystemAppear .58s cubic-bezier(.2,.8,.2,1) both; }
.talent-scale-viz.is-active .scale-system-field i:nth-child(3n){animation-delay:.1s}.talent-scale-viz.is-active .scale-system-field i:nth-child(4n){animation-delay:.2s}.talent-scale-viz.is-active .scale-system-field i:nth-child(5n){animation-delay:.3s}
.talent-scale-viz.is-active .scale-route { animation:talentRouteCard .68s cubic-bezier(.2,.8,.2,1) .48s both; }
.talent-scale-viz.is-active .scale-route > div::before { animation:talentRouteDraw .95s cubic-bezier(.2,.8,.2,1) .92s both; }
.talent-scale-viz.is-active .scale-route > div i { animation:talentGateArrive .42s cubic-bezier(.2,.8,.2,1) both; }
.talent-scale-viz.is-active .scale-route > div i:nth-child(1){animation-delay:1s}.talent-scale-viz.is-active .scale-route > div i:nth-child(2){animation-delay:1.08s}.talent-scale-viz.is-active .scale-route > div i:nth-child(3){animation-delay:1.16s}.talent-scale-viz.is-active .scale-route > div i:nth-child(4){animation-delay:1.24s}.talent-scale-viz.is-active .scale-route > div i:nth-child(5){animation-delay:1.32s}.talent-scale-viz.is-active .scale-route > div i:nth-child(6){animation-delay:1.4s}.talent-scale-viz.is-active .scale-route > div i:nth-child(7){animation-delay:1.48s}.talent-scale-viz.is-active .scale-route > div i:nth-child(8){animation-delay:1.56s}
.talent-scale-viz.is-active .scale-waste { animation:talentWasteArrive .58s cubic-bezier(.2,.8,.2,1) 1.75s both; }
@keyframes talentScaleMetric { from{opacity:.16;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes talentSystemAppear { from{opacity:.04;transform:scale(.65)} to{opacity:.48;transform:scale(1)} }
@keyframes talentRouteCard { from{opacity:.18;transform:translate(-50%,calc(-50% + 18px)) scale(.92)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
@keyframes talentRouteDraw { from{opacity:.15;transform:translateY(-50%) scaleX(.06)} to{opacity:.58;transform:translateY(-50%) scaleX(1)} }
@keyframes talentGateArrive { from{opacity:.2;transform:scale(.6)} to{opacity:1;transform:scale(1)} }
@keyframes talentWasteArrive { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* Research: show a longitudinal learning loop, not an abstract dot cloud. */
.talent-research-viz--loop { min-height:370px; display:flex; flex-direction:column; justify-content:center; gap:34px; }
.research-cycle-track { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:min(600px,94%); margin:0 auto; }
.research-cycle-track i { position:absolute; left:5%; right:5%; top:50%; z-index:0; height:8px; transform:translateY(-50%) scaleX(.06); transform-origin:left; background:url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; opacity:.14; }
.research-cycle-track span { position:relative; z-index:1; justify-self:center; padding:8px 11px; border:1px solid rgba(245,242,235,.13); border-radius:999px; background:var(--canvas); color:var(--gray); font-size: var(--t-label); letter-spacing:.13em; text-transform:uppercase; opacity:.2; transform:scale(.86); }
.research-field-loop { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:12px; }
.research-field-loop > div { min-height:112px; display:grid; align-content:center; justify-items:center; padding:14px 9px; border:1px solid rgba(245,242,235,.12); border-radius:16px; opacity:.18; transform:translateY(12px); }
.research-field-loop > div span { color:var(--shu); font-size: var(--t-caption); letter-spacing:.14em; }
.research-field-loop > div b { margin-top:8px; color:var(--ink); font-family:var(--display); font-size: var(--t-body); font-weight:500; }
.research-field-loop > div small { margin-top:5px; color:var(--gray); font-size: var(--t-caption); }
.research-field-loop > i { width:38px; height:12px; transform:scaleX(.06); transform-origin:left; background:url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; opacity:.16; }
.research-role-row { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.research-role-row span { padding:7px 10px; border:1px solid rgba(195,21,55,.3); border-radius:999px; color:var(--gray); font-size: var(--t-label); letter-spacing:.1em; text-transform:uppercase; opacity:.2; }
.overlay[aria-hidden="false"] .research-cycle-track i { animation:researchCycleDraw 1.1s cubic-bezier(.2,.8,.2,1) .25s both; }
.overlay[aria-hidden="false"] .research-cycle-track span { animation:researchCycleNode .5s cubic-bezier(.2,.8,.2,1) both; }
.overlay[aria-hidden="false"] .research-cycle-track span:nth-child(1){animation-delay:.32s}.overlay[aria-hidden="false"] .research-cycle-track span:nth-child(2){animation-delay:.48s}.overlay[aria-hidden="false"] .research-cycle-track span:nth-child(3){animation-delay:.64s}.overlay[aria-hidden="false"] .research-cycle-track span:nth-child(4){animation-delay:.8s}
.overlay[aria-hidden="false"] .research-field-loop > div { animation:researchFieldNode .55s cubic-bezier(.2,.8,.2,1) both; }
.overlay[aria-hidden="false"] .research-field-loop > div:nth-of-type(1){animation-delay:.65s}.overlay[aria-hidden="false"] .research-field-loop > div:nth-of-type(2){animation-delay:.88s}.overlay[aria-hidden="false"] .research-field-loop > div:nth-of-type(3){animation-delay:1.11s}.overlay[aria-hidden="false"] .research-field-loop > div:nth-of-type(4){animation-delay:1.34s}
.overlay[aria-hidden="false"] .research-field-loop > i { animation:researchFieldDraw .55s cubic-bezier(.2,.8,.2,1) both; }
.overlay[aria-hidden="false"] .research-field-loop > i:nth-of-type(1){animation-delay:.78s}.overlay[aria-hidden="false"] .research-field-loop > i:nth-of-type(2){animation-delay:1.01s}.overlay[aria-hidden="false"] .research-field-loop > i:nth-of-type(3){animation-delay:1.24s}
.overlay[aria-hidden="false"] .research-role-row span { animation:researchRoleArrive .45s cubic-bezier(.2,.8,.2,1) 1.58s both; }
@keyframes researchCycleDraw { from{opacity:.12;transform:translateY(-50%) scaleX(.06)} to{opacity:.65;transform:translateY(-50%) scaleX(1)} }
@keyframes researchFieldDraw { from{opacity:.12;transform:scaleX(.06)} to{opacity:.65;transform:scaleX(1)} }
@keyframes researchCycleNode { from{opacity:.18;transform:scale(.86)} to{opacity:1;transform:scale(1)} }
@keyframes researchFieldNode { from{opacity:.16;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes researchRoleArrive { from{opacity:.16;transform:translateY(7px)} to{opacity:1;transform:none} }

/* Leader evidence: smaller quotes, balanced columns, and a literal live-profile flow. */
.talent-voice { min-height:60vh; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(48px,7vw,100px); padding:clamp(70px,9vh,120px) 0; }
.outcome-voice .talent-voice blockquote p { max-width:28ch; font-size: var(--t-h3); line-height:1.22; letter-spacing:-.025em; }
.talent-voice-viz--profile { display:grid; grid-template-columns:1fr .62fr 1fr; gap:18px; align-items:center; padding:18px; }
.talent-voice-viz--profile::before { inset:12%; }
.voice-profile-sources { display:grid; gap:10px; }
.talent-voice-viz--profile .voice-profile-sources span { position:static; width:auto; height:auto; display:block; padding:9px 10px; border:1px solid rgba(245,242,235,.13); border-radius:999px; background:rgba(10,10,11,.74); color:var(--gray); font-size: var(--t-label); letter-spacing:.1em; text-align:center; text-transform:uppercase; opacity:.18; transform:translateX(-12px); }
.talent-voice-viz--profile .voice-profile-sources span::before { content:none; }
.voice-profile-brush { height:20px; transform:scaleX(.06); transform-origin:left; background:url("../media/brand/sumi-brush-v1.png") center/100% 100% no-repeat; opacity:.14; }
.voice-profile-live { min-height:132px; display:grid; place-items:center; align-content:center; padding:16px; border:1px solid rgba(195,21,55,.45); border-radius:20px; background:rgba(245,242,235,.022); opacity:.18; transform:scale(.82); }
.voice-profile-live small { margin:0; color:var(--gray); font-size: var(--t-label); letter-spacing:.13em; text-transform:uppercase; }
.voice-profile-live b { margin-top:10px; color:var(--ink); font-family:var(--display); font-size: var(--t-h3); font-weight:500; }
.voice-profile-live em { margin-top:8px; color:var(--shu); font-size: var(--t-label); font-style:normal; letter-spacing:.14em; text-transform:uppercase; }
.talent-voice--profile.is-active .voice-profile-sources span { animation:voiceSourceArrive .48s cubic-bezier(.2,.8,.2,1) both; }
.talent-voice--profile.is-active .voice-profile-sources span:nth-child(2){animation-delay:.08s}.talent-voice--profile.is-active .voice-profile-sources span:nth-child(3){animation-delay:.16s}.talent-voice--profile.is-active .voice-profile-sources span:nth-child(4){animation-delay:.24s}.talent-voice--profile.is-active .voice-profile-sources span:nth-child(5){animation-delay:.32s}
.talent-voice--profile.is-active .voice-profile-brush { animation:voiceProfileBrush .85s cubic-bezier(.2,.8,.2,1) .42s both; }
.talent-voice--profile.is-active .voice-profile-live { animation:voiceProfileLive .7s cubic-bezier(.2,.8,.2,1) 1.05s both; }
@keyframes voiceSourceArrive { from{opacity:.16;transform:translateX(-12px)} to{opacity:1;transform:none} }
@keyframes voiceProfileBrush { from{opacity:.12;transform:scaleX(.06)} to{opacity:.68;transform:scaleX(1)} }
@keyframes voiceProfileLive { from{opacity:.18;transform:scale(.82)} to{opacity:1;transform:scale(1)} }

@media (max-width:980px) {
  .talent-problem-intro { grid-template-columns:1fr; }
  .talent-problem-copy h3 { max-width:20ch; }
  .talent-scale-viz { min-height:500px; }
}
@media (max-width:760px) {
  .case-talent .case-compass-head h2 > span { white-space:normal; }
  .case-talent .case-compass-grid article { min-height:340px; }
  .research-field-loop { grid-template-columns:1fr 18px 1fr; }
  .research-field-loop > i { width:18px; }
  .research-field-loop > div:nth-of-type(3),.research-field-loop > div:nth-of-type(4) { margin-top:8px; }
  .talent-voice-viz--profile { grid-template-columns:1fr; }
  .voice-profile-brush { width:56%; margin:auto; }
  .voice-profile-live { width:min(230px,84%); justify-self:center; }
}
@media (max-width:560px) {
  .talent-scale-viz { min-height:540px; }
  .scale-volume { grid-template-columns:repeat(2,1fr); }
  .scale-system-field { inset:176px 24px 95px; gap:8px; }
  .scale-system-field i { width:12px; height:12px; }
  .scale-route { top:57%; width:84%; padding-inline:16px; }
  .research-cycle-track { grid-template-columns:repeat(2,1fr); }
  .research-cycle-track i { display:none; }
  .research-field-loop { grid-template-columns:1fr; }
  .research-field-loop > i { width:42%; height:10px; margin:auto; transform-origin:center; }
  .talent-research-viz--loop { min-height:720px; }
}
@media (prefers-reduced-motion:reduce) {
  .compass-viz--talent-scale i,.compass-viz--talent-lead i,.compass-viz--talent-lead span { animation:none!important; opacity:1; transform:none; }
  .compass-viz--talent-scale i { transform:scaleX(1)!important; }
  .compass-viz--talent-lead i { transform:translateY(-50%) scaleX(1)!important; }
  .scale-volume span,.scale-system-field i,.scale-route,.scale-route > div i,.scale-waste,.research-cycle-track span,.research-field-loop > div,.research-role-row span,.voice-profile-sources span,.voice-profile-live { animation:none!important; opacity:1!important; transform:none!important; }
  .scale-route { transform:translate(-50%,-50%)!important; }
  .scale-route > div::before,.research-cycle-track i,.research-field-loop > i,.voice-profile-brush { animation:none!important; opacity:.65; transform:scaleX(1); }
  .research-cycle-track i { transform:translateY(-50%) scaleX(1); }
}

/* ================================================================
   v0.37 — consistent two-line 60-second summaries
   ================================================================ */

.case-compass-head {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(20px,3vw,30px);
  text-align:center;
}
.case-compass-head .kicker {
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.case-compass-head h2,
.case-talent .case-compass-head h2 {
  width:100%;
  max-width:none;
  margin-inline:auto;
  font-size:clamp(38px,4.7vw,64px);
  line-height:1.02;
}
.case-compass-head h2 > span,
.case-talent .case-compass-head h2 > span {
  display:inline-block;
  white-space:nowrap;
}

@media (max-width:620px) {
  .case-compass-head { align-items:flex-start; text-align:left; }
  .case-compass-head .kicker { justify-content:flex-start; font-size: var(--t-caption); letter-spacing:.18em; }
  .case-compass-head h2,
  .case-talent .case-compass-head h2 { font-size: var(--t-h3); }
  .case-compass-head h2 > span,
  .case-talent .case-compass-head h2 > span { white-space:normal; }
}

/* ================================================================
   v0.40 — owner-direction pass: deeper canvas, restrained ink,
   uniform product reel, refined glass sheets, once-only motion,
   ultrawide + legibility floor
   ================================================================ */

/* 1 · Deeper black canvas */
:root {
  --canvas: #080809;
  --line-soft: rgba(245,242,235,.20);
  --line-strong: rgba(245,242,235,.52);
}

/* 2 · Product reel — one calm row of identical frames */
.reel { padding: 13vh 0 5vh; }
.reel .kicker { text-align: center; margin-bottom: 40px; }
.reel-item {
  position: relative; width: clamp(280px, 26vw, 420px); aspect-ratio: 16 / 10;
  border-radius: 16px; overflow: hidden; border: 1px solid var(--hairline);
  background: #0e0e10; box-shadow: 0 24px 60px rgba(0,0,0,.45);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s ease;
}
.reel-item:hover, .reel-item:focus-visible { transform: translateY(-4px); border-color: rgba(245,242,235,.22); }
.reel-item video { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: saturate(.95); }
.reel-tag {
  position: absolute; left: 12px; bottom: 12px; padding: 7px 13px; border-radius: 999px;
  background: rgba(10,10,11,.55); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(245,242,235,.14); color: var(--ink);
  font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.reel-item:hover .reel-tag, .reel-item:focus-visible .reel-tag { opacity: 1; transform: none; }
@media (hover: none) { .reel-tag { opacity: 1; transform: none; } }
.reel .figcap { text-align: center; margin-top: 26px; }

/* 3 · Restrained ink: data lines are clean lines; the brush stays
      reserved for the signature narrative strokes (kicker rule, stat
      tick, suite/journey threads, About thread, outro underline). */
.results .spark { height: 4px; background: rgba(245,242,235,.07); border-radius: 4px; }
.results .spark i {
  background-image: none !important;
  background: linear-gradient(90deg, var(--shu), rgba(195,21,55,.3)) !important;
  height: 100%; border-radius: 4px;
}
.pv-mid { height: 2px; }
.pv-mid .pv-brush { background-image: none !important; background: linear-gradient(90deg, transparent, var(--line-strong), transparent) !important; height: 2px; border-radius: 2px; }
.viz-talent-action .action-brush,
.viz-finance-ledger .ledger-balance,
.viz-pnc-pace > i,
.handoff-brush {
  background-image: none !important; background-color: var(--line-strong) !important;
  height: 2px !important; border-radius: 2px;
}
.approval-ink { background: none !important; height: 2px !important; top: 30px !important; background-color: var(--line-soft) !important; opacity: 1; }
.compass-viz--gates::before, .compass-viz--fields::before, .compass-viz--approval::before,
.compass-viz--thread::before,
.compass-viz--talent-scale i, .compass-viz--talent-lead i {
  background-image: none !important; background-color: var(--line-soft) !important;
  height: 1.5px !important; border-radius: 2px;
}
.talent-lead-thread { background: none !important; background-color: var(--line-soft) !important; height: 2px !important; top: 43.5px !important; opacity: 1; }
.research-cycle-track i, .research-field-loop > i { background-image: none !important; background-color: var(--line-soft) !important; height: 1.5px !important; border-radius: 2px; }
.voice-profile-brush, .fieldwork-brush, .language-translator i, .sprint-brush, .spec-brush { background-image: none !important; background-color: var(--line-soft) !important; height: 2px !important; border-radius: 2px; }
.platform-thread { background-image: none !important; background-color: var(--line-soft) !important; height: 2px !important; border-radius: 2px; }
@media (max-width: 760px) { .platform-thread { width: 2px !important; height: auto !important; } }
.voice-fluid-gates::before { background-image: none !important; background-color: var(--line-soft) !important; height: 2px !important; border-radius: 2px; }
.talent-voice-viz--rise i {
  background-image: none !important; background-color: rgba(245,242,235,.75) !important;
  height: 8px !important; border-radius: 4px; opacity: 1;
}
.talent-voice-viz--rise > div:nth-child(2) i { background-color: var(--shu) !important; filter: none !important; }
.proof-balance::after { background: linear-gradient(90deg, var(--shu), rgba(195,21,55,.25)) !important; height: 2px !important; border-radius: 2px; }
.finance-ledger::before { background: none !important; height: 1px !important; background-color: rgba(245,242,235,.12) !important; opacity: 1; }
.finance-impact-thread::before { background: none !important; width: 1.5px !important; background-color: var(--line-soft) !important; opacity: 1; }
@media (max-width: 900px) { .finance-impact-thread::before { width: auto !important; height: 1.5px !important; background-image: none !important; background-color: var(--line-soft) !important; } }
.career-transfer > div { background-image: none !important; background: none !important; }
.career-transfer > div::before { content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 2px; border-radius: 2px; background: var(--line-soft); }
.career-stage::after, .feature-band .f::after, .about-method > div::after {
  background-image: none !important; background-color: rgba(195,21,55,.5) !important;
  height: 2px !important; border-radius: 2px; opacity: 1;
}
.pill-story::after { display: none; }
.about-portrait-wash { display: none; }
.scale-route > div::before { background-image: none !important; background-color: var(--line-soft) !important; height: 1.5px !important; border-radius: 2px; }
.talent-voice + .talent-voice::before { background-image: none !important; background-color: rgba(245,242,235,.12) !important; height: 1px !important; opacity: 1; }

/* 4 · Motion resolves once, then rests (no perpetual loops) */
@keyframes drawLineOnce { from { transform: scaleX(.08); opacity: .2; } to { transform: scaleX(1); opacity: 1; } }
@keyframes drawLineOnceMid { from { transform: translateY(-50%) scaleX(.08); opacity: .2; } to { transform: translateY(-50%) scaleX(1); opacity: 1; } }
@keyframes riseOnce { from { transform: scaleY(.15); opacity: .24; } to { transform: scaleY(1); opacity: 1; } }
.compass-viz--thread::before, .compass-viz--ledger i:nth-child(3),
.compass-viz--rise i, .compass-viz--talent-scale i, .compass-viz--talent-lead i,
.compass-viz--talent-lead span, .talent-lead-thread { animation: none !important; }
/* Resting state = NOT YET DRAWN, because the reveal now re-arms (see the
   micro-diagram observer in main.js). These used to rest fully drawn, which
   was correct while the animation fired once and never again — but with a
   replay, a diagram that rests drawn has to snap backwards to empty before it
   can draw itself, in full view of the reader. Resting undrawn means arriving
   at a card is always the same motion, in the same direction.
   The pills are deliberately NOT part of this: they carry the actual words, so
   they rest fully legible and only ever get a settle, never a fade from
   nothing. Reduced motion re-resolves all of this below. */
.compass-viz--rise i { transform: scaleY(.15); opacity: .24; }
.compass-viz--thread::before, .compass-viz--talent-lead i { transform: translateY(-50%) scaleX(.08); opacity: .2; }
.compass-viz--talent-scale i, .compass-viz--ledger i:nth-child(3) { transform: scaleX(.08); opacity: .2; }
.compass-viz--talent-lead span { opacity: 1; transform: none; }
.talent-lead-thread { transform: scaleX(.08); }
.in-view .compass-viz--thread::before, .in-view.compass-viz--thread::before { animation: drawLineOnceMid 1.1s cubic-bezier(.2,.8,.2,1) .2s both !important; }
.compass-viz--rise.in-view i { animation: riseOnce .9s cubic-bezier(.2,.8,.2,1) both !important; }
.compass-viz--rise.in-view i:nth-child(2){animation-delay:.08s !important}.compass-viz--rise.in-view i:nth-child(3){animation-delay:.16s !important}.compass-viz--rise.in-view i:nth-child(4){animation-delay:.24s !important}
.compass-viz--ledger.in-view i:nth-child(3) { animation: drawLineOnce 1s cubic-bezier(.2,.8,.2,1) .2s both !important; }
.compass-viz--talent-scale.in-view i { animation: drawLineOnce 1s cubic-bezier(.2,.8,.2,1) both !important; }
.compass-viz--talent-scale.in-view i:nth-of-type(2) { animation-delay: .25s !important; }
.compass-viz--talent-lead.in-view i { animation: drawLineOnceMid 1.1s cubic-bezier(.2,.8,.2,1) both !important; }
.talent-lead-viz.in-view .talent-lead-thread { animation: drawLineOnce 1.2s cubic-bezier(.2,.8,.2,1) .15s both !important; }

/* --- Talent's two compass diagrams: give the motion something to move ---
   Both of these draw a connecting line and then rest. That worked when the
   line was an 8–9px sumi brush; the later flattening pass above rewrote every
   brush strip to `height: 1.5px` in a faint grey, and a 1.5px hairline growing
   from 8% to 100% is not perceptible at card scale. Box 3 was never flattened
   (its bars are bars, not lines), which is why it alone still read as moving.
   The line was also the *only* thing moving: the pills carry an infinite
   `talentCompassStage` pulse in the base rules, but the one-shot pass killed
   it with `animation: none` and never gave it a resolve-once replacement.
   So: the connector gets back enough weight to be seen, and the pills — the
   substantial elements in both boxes — now arrive in sequence along it. */
/* The pills dip and settle rather than fading up from nothing. They hold the
   words — "1 move", "8 approvals", "Research", "Ship" — so a replay must never
   take them to zero, and an interrupted replay must never strand them there. */
@keyframes compassStageInOnce {
  from { opacity: .45; transform: translateY(4px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.compass-viz--talent-scale i,
.compass-viz--talent-lead i { height: 2px !important; }
.compass-viz--talent-scale.in-view i,
.compass-viz--talent-lead.in-view i { background-color: var(--line-strong, rgba(245,242,235,.28)) !important; }
/* the pills settle in reading order, just behind the line that connects them */
.compass-viz--talent-scale.in-view span,
.compass-viz--talent-lead.in-view span {
  animation: compassStageInOnce .5s cubic-bezier(.2,.8,.2,1) both;
}
.compass-viz--talent-scale.in-view span:nth-of-type(2) { animation-delay: .3s; }
.compass-viz--talent-scale.in-view span:nth-of-type(3) { animation-delay: .6s; }
.compass-viz--talent-lead.in-view span:nth-of-type(2) { animation-delay: .18s; }
.compass-viz--talent-lead.in-view span:nth-of-type(3) { animation-delay: .36s; }
.compass-viz--talent-lead.in-view span:nth-of-type(4) { animation-delay: .54s; }

/* 5 · Glass sheets (overlays) — quieter, more Apple */
.overlay {
  width: min(800px, 94vw); max-height: 86vh;
  border-radius: 32px; padding: 46px 50px 44px;
  background: rgba(14,14,16,.52);
  -webkit-backdrop-filter: blur(56px) saturate(1.8); backdrop-filter: blur(56px) saturate(1.8);
  border: 1px solid rgba(245,242,235,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 70px 160px rgba(0,0,0,.72);
  scrollbar-width: thin; scrollbar-color: rgba(245,242,235,.18) transparent;
}
.overlay::-webkit-scrollbar { width: 5px; }
.overlay::-webkit-scrollbar-thumb { background: rgba(245,242,235,.16); border-radius: 5px; }
.overlay .close {
  width: 38px; height: 38px; font-size: var(--t-small);
  background: rgba(245,242,235,.07); border-color: rgba(245,242,235,.16);
  transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.overlay .close:hover { transform: rotate(90deg); }
.overlay .sub {
  padding-bottom: 22px; margin-bottom: 30px;
  border-bottom: 1px solid rgba(245,242,235,.1);
}
.overlay h4 { font-size: var(--t-h3); letter-spacing: -.03em; padding-right: 52px; }
.overlay .item { padding: 20px 0; }
.overlay .item .ic { border-radius: 14px; background: rgba(245,242,235,.05); }
.overlay .ostat .n { font-size: var(--t-h3); }
.overlay-veil { background: rgba(5,5,6,.6); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
@media (max-width: 760px) { .overlay { padding: 34px 26px; border-radius: 24px; } }

/* 6 · Micro-interactions */
nav.glassnav a:not(.mark) { position: relative; }
nav.glassnav a:not(.mark)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1.5px;
  border-radius: 2px; background: var(--shu); opacity: 1;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
nav.glassnav a:not(.mark):hover::after,
nav.glassnav a:not(.mark):focus-visible::after,
nav.glassnav a.active::after { transform: scaleX(1); }
.glass-pill:active, .spill:active { transform: translateY(0) scale(.97); }
.wcard:active { transform: translateY(-2px) scale(.996); }
.ba .handle::after { transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease; }
.ba .handle:hover::after, .ba:focus-visible .handle::after { transform: translate(-50%,-50%) scale(1.12); border-color: rgba(245,242,235,.45); }
.ba:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }

/* Lightbox: visible close + caption */
.lightbox .lb-close {
  position: absolute; top: 22px; right: 22px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(245,242,235,.2); background: rgba(20,20,22,.6);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--ink); font-size: var(--t-small); display: grid; place-items: center; cursor: pointer;
  transition: background .25s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.lightbox .lb-close:hover { background: rgba(245,242,235,.14); transform: rotate(90deg); }
.lightbox .lb-cap {
  position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%);
  max-width: 70ch; padding: 8px 16px; border-radius: 999px;
  background: rgba(10,10,11,.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--ink); font-size: var(--t-caption); letter-spacing: .02em; text-align: center;
}
.lightbox .lb-cap:empty { display: none; }

/* 7 · Legibility floor: nothing meaningful below 10px, nothing dimmer than .55 */
.approval-caption { font-size: var(--t-caption); color: rgba(245,242,235,.58); }
.proof-states i, .proof-balance span, .proof-pace span, .proof-pace span::before { font-size: var(--t-caption); }
.scale-volume span, .scale-waste span, .research-role-row span,
.research-field-loop > div small, .research-field-loop > div span,
.compass-viz--talent-scale span, .compass-viz--talent-lead span,
.voice-profile-live small, .voice-profile-live em,
.talent-voice-viz--profile .voice-profile-sources span,
.portrait-note span, .career-no, .pnc-progress span,
.pill-story--pnc-delivery > span, .sprint-node span,
.platform-node span, .platform-node small, .platform-resolve small,
.fieldwork-sources span, .language-facts span, .language-entry strong,
.fieldwork-model span, .fieldwork-model small, .logic-filter,
.logic-path strong, .logic-foundation, .delivery-core small,
.sprint-count small, .pnc-form-head b, .pnc-question span,
.production-panel b, .pnc-production-viz > strong, .pnc-spec-viz > span,
.scale-route strong, .scale-route > span { font-size: var(--t-caption); }
.pnc-progress span { color: rgba(245,242,235,.6); }
.approval-track i { box-shadow: 0 0 0 5px var(--canvas), 0 0 18px rgba(195,21,55,.24); }

/* 8 · Small-viewport hardening */
@media (max-width: 560px) {
  .ghost:not(.sheet) { display: none; }
  .stack-note { font-size: var(--t-caption); padding: 6px 11px; }
}

/* 9 · Ultrawide (≥1800px): let the composition breathe wider, capped */
@media (min-width: 1800px) {
  .act, .act--centered, .journey, .worklist, .proof, .results, .quotes,
  .case-compass, .outcome-finance, .outcome-pnc, .career-narrative,
  .about-premise, .about-thread, .finance-impact, .leadership-perspective,
  .pnc-live, .outcome-voice, .talent-problem-intro,
  .outcome-cinema--talent .outcome-sticky, .about-hero-grid { max-width: 1520px; }
  .work-grid { gap: 56px; }
  .wcard { padding: 64px 60px; }
  .reel-item { width: 440px; }
  .tldr { max-width: 1080px; margin-inline: auto; }
  .casehero .ch-inner { max-width: 1080px; }
}
@media (min-width: 2300px) {
  .hero .heroVid { object-position: center 40%; }
  .act, .worklist, .proof, .case-compass, .outcome-voice { max-width: 1680px; }
}

/* 10 · Motion-safety for everything new */
@media (prefers-reduced-motion: reduce) {
  .reel-item, .reel-tag, .overlay .close, .lightbox .lb-close,
  nav.glassnav a:not(.mark)::after, .ba .handle::after,
  .overlay .ostrip .cell img, .rail-walker { transition: none !important; }
  .overlay .ostrip .cell:hover img { transform: none; }
  .rail-walker .walker-body, .rail-walker .w-leg-b, .rail-walker .w-leg-f { animation: none !important; }
  .reel-tag { opacity: 1; transform: none; }
  .in-view .compass-viz--thread::before, .compass-viz--rise.in-view i,
  .compass-viz--ledger.in-view i:nth-child(3), .compass-viz--talent-scale.in-view i,
  .compass-viz--talent-lead.in-view i, .talent-lead-viz.in-view .talent-lead-thread,
  .compass-viz--talent-scale.in-view span,
  .compass-viz--talent-lead.in-view span { animation: none !important; }
  /* The resting state above is now the UNDRAWN one, so reduced motion has to
     resolve every diagram explicitly — otherwise "no animation" would mean
     "never drawn" rather than "already drawn". These must stay !important and
     must stay after the resting rules. */
  .compass-viz--rise i { transform: scaleY(1) !important; opacity: 1 !important; }
  .compass-viz--thread::before,
  .compass-viz--talent-lead i { transform: translateY(-50%) scaleX(1) !important; opacity: 1 !important; }
  .compass-viz--talent-scale i,
  .compass-viz--ledger i:nth-child(3) { transform: scaleX(1) !important; opacity: 1 !important; }
  .talent-lead-thread { transform: scaleX(1) !important; opacity: 1 !important; }
  .compass-viz--talent-scale span,
  .compass-viz--talent-lead span { opacity: 1 !important; transform: none !important; }
}

/* v0.40b · Finance readout cards (synthesized statements, unmistakably non-quote) */
.perspective-note--lead { margin: 18px 0 0; font-size: var(--t-caption); color: var(--gray); letter-spacing: .04em; }
.readout-card {
  min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px;
  padding: clamp(28px, 4vw, 44px); border: 1px solid rgba(245,242,235,.13); border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(245,242,235,.014)), rgba(20,20,22,.24);
  -webkit-backdrop-filter: blur(30px) saturate(1.35); backdrop-filter: blur(30px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 28px 70px rgba(0,0,0,.25);
}
.readout-card span { color: var(--shu-text); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; }
.readout-card p { font-family: var(--display); font-weight: 500; font-size: var(--t-h3); line-height: 1.24; letter-spacing: -.02em; text-wrap: balance; }

/* v0.40c · About: method glyphs + Kellton AI-first leadership panel */
.method-glyph { width: 66px; height: 66px; margin: 6px auto 12px; overflow: visible; display: block; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.method-glyph path, .method-glyph circle, .method-glyph line { stroke: rgba(245,242,235,.8); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.method-glyph .hot { stroke: var(--shu); }
.about-method > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 34px; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease; }
.about-method b { margin-top: 4px; }
/* icons: centred, larger, no numbers, no bottom sumi line, gentle hover */
.about-method > div::after { content: none; }
.about-method > div:hover { transform: translateY(-5px); border-color: rgba(245,242,235,.22); }
.about-method > div:hover .method-glyph { transform: scale(1.09) rotate(-2deg); }
@media (prefers-reduced-motion: reduce) {
  .about-method > div, .method-glyph { transition: none !important; }
  .about-method > div:hover .method-glyph { transform: none; }
}

.kellton-ai { position: absolute; inset: 10% 8% 24%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.ka-signal { display: flex; flex-direction: column; align-items: center; gap: 0; }
.ka-signal span {
  padding: 8px 14px; border: 1px solid rgba(245,242,235,.16); border-radius: 999px;
  background: rgba(10,10,11,.8); color: var(--gray); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase;
}
.ka-signal i { display: block; width: 1.5px; height: 34px; background: var(--line-soft); transform: scaleY(0); transform-origin: top; }
.ka-core { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.ka-core b { position: relative; z-index: 2; color: var(--ink); font-family: var(--display); font-size: var(--t-lede); font-weight: 500; letter-spacing: .02em; }
.ka-ring { position: absolute; inset: 0; border: 1px solid rgba(245,242,235,.22); border-radius: 50%; opacity: 0; transform: scale(.6); }
.ka-ring.r2 { inset: -18px; border-color: rgba(195,21,55,.4); }
.ka-fan { position: relative; width: min(300px, 88%); height: 34px; }
.ka-fan i { position: absolute; top: 0; left: 50%; width: 1.5px; height: 100%; background: var(--line-soft); transform-origin: top; transform: scaleY(0); }
.ka-fan i:nth-child(1) { rotate: 32deg; }
.ka-fan i:nth-child(3) { rotate: -32deg; }
.ka-branches { display: flex; gap: 10px; }
.ka-branches span {
  padding: 9px 13px; border: 1px solid rgba(245,242,235,.13); border-radius: 999px;
  color: var(--gray); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase;
  background: rgba(10,10,11,.72); opacity: 0; transform: translateY(8px);
}
.ka-branches span:last-child { color: var(--ink); border-color: rgba(195,21,55,.5); }
/* choreography: everything resolves once when the Kellton chapter is on stage */
.career-stage[data-role="0"] .ka-signal i { transition: transform .5s cubic-bezier(.2,.8,.2,1) .35s; transform: scaleY(1); }
.career-stage[data-role="0"] .ka-ring.r1 { transition: opacity .5s ease .7s, transform .7s cubic-bezier(.2,.8,.2,1) .7s; opacity: 1; transform: scale(1); }
.career-stage[data-role="0"] .ka-ring.r2 { transition: opacity .5s ease .9s, transform .8s cubic-bezier(.2,.8,.2,1) .9s; opacity: 1; transform: scale(1); }
.career-stage[data-role="0"] .ka-fan i { transition: transform .45s cubic-bezier(.2,.8,.2,1) 1.15s; transform: scaleY(1); }
.career-stage[data-role="0"] .ka-branches span { transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); opacity: 1; transform: none; }
.career-stage[data-role="0"] .ka-branches span:nth-child(1) { transition-delay: 1.35s; }
.career-stage[data-role="0"] .ka-branches span:nth-child(2) { transition-delay: 1.47s; }
.career-stage[data-role="0"] .ka-branches span:nth-child(3) { transition-delay: 1.59s; }
@media (max-width: 700px) {
  .kellton-ai { inset: 8% 5% 26%; }
  .ka-fan { height: 26px; }
  .ka-branches span { padding: 8px 10px; font-size: var(--t-caption); }
}
@media (prefers-reduced-motion: reduce) {
  .ka-signal i, .ka-fan i { transform: scaleY(1) !important; transition: none !important; }
  .ka-ring { opacity: 1 !important; transform: scale(1) !important; transition: none !important; }
  .ka-branches span { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ================================================================
   v0.41 — Round 2: editorial alignment, paired lending journey,
   overlay schematics, and compact Kellton stage
   ================================================================ */

/* Full-width artifact moments follow the centered editorial rule while
   keeping the artifact itself full-width and interactive. */
.act--artifact-centered > .kicker { justify-content: center; text-align: center; }
.act--artifact-centered > h3,
.act--artifact-centered > .lede { max-width: 72ch; margin-left: auto; margin-right: auto; text-align: center; }
.act--artifact-centered > h3 { max-width: 18ch; }

/* The two code-native schematics now explain behavior inside overlays. */
.overlay-schematic {
  height: 240px; min-height: 240px; margin: 30px 0;
  border: 1px solid rgba(245,242,235,.12); border-radius: 20px;
}

/* PNC desktop + mobile journey: one stable frame system across four steps. */
.act--paired-journey { max-width: 1280px; }
.act--paired-journey > .lede { max-width: 72ch; }
.act--paired-journey > .lede + .lede { margin-top: 14px; }
.pnc-paired-journey { display: grid; gap: clamp(82px, 11vh, 132px); margin-top: clamp(68px, 9vh, 106px); }
.paired-step {
  display: grid; grid-template-columns: minmax(150px,.24fr) minmax(0,1fr);
  gap: clamp(28px,4vw,58px); align-items: center;
}
.paired-step--reverse { grid-template-columns: minmax(0,1fr) minmax(150px,.24fr); }
.paired-step--reverse .paired-step-copy { grid-column: 2; grid-row: 1; }
.paired-step--reverse .paired-frames { grid-column: 1; grid-row: 1; }
.paired-step-copy span { color: var(--shu-text); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; }
.paired-step-copy h4 { margin-top: 13px; color: var(--ink); font-family: var(--display); font-size: var(--t-h3); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; }
.paired-step-copy p { margin-top: 14px; color: var(--gray); font-size: var(--t-caption); line-height: 1.7; }
.paired-frames { display: grid; grid-template-columns: minmax(0,1fr) 260px; align-items: center; min-width: 0; }
.paired-step--reverse .paired-frames { grid-template-columns: 260px minmax(0,1fr); }
.paired-step--reverse .paired-desktop { grid-column: 2; grid-row: 1; }
.paired-step--reverse .paired-phone-cluster { grid-column: 1; grid-row: 1; margin-left: 0; margin-right: -42px; }
.paired-desktop { grid-column: 1; grid-row: 1; min-width: 0; }
.paired-desktop img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: top; }
.paired-phone-cluster {
  position: relative; z-index: 2; grid-column: 2; grid-row: 1;
  width: 260px; min-height: 340px; display: flex; align-items: center; justify-content: center;
  margin-left: -42px;
}
.paired-phone {
  width: 148px; height: 320px; padding: 7px;
  overflow: hidden; border: 1px solid rgba(245,242,235,.2); border-radius: 25px;
  background: #171719; box-shadow: 0 28px 70px rgba(0,0,0,.42);
}
.paired-phone img { width: 100%; height: 100%; border-radius: 18px; object-fit: cover; object-position: top; }
.paired-phone-cluster--double .paired-phone + .paired-phone { margin-left: -62px; transform: translateY(30px); }

@media (max-width: 900px) {
  .paired-step, .paired-step--reverse { grid-template-columns: 1fr; gap: 30px; }
  .paired-step--reverse .paired-step-copy, .paired-step--reverse .paired-frames { grid-column: 1; grid-row: auto; }
  .paired-step--reverse .paired-step-copy { order: 0; }
  .paired-step--reverse .paired-frames { order: 1; }
}
@media (max-width: 620px) {
  .act--artifact-centered > .kicker,
  .act--artifact-centered > h3,
  .act--artifact-centered > .lede { text-align: center; }
  .paired-frames, .paired-step--reverse .paired-frames { grid-template-columns: minmax(0,1fr) 124px; }
  .paired-step--reverse .paired-desktop { grid-column: 1; }
  .paired-step--reverse .paired-phone-cluster { grid-column: 2; margin-right: 0; margin-left: -28px; }
  .paired-phone-cluster { width: 124px; min-height: 252px; margin-left: -28px; }
  .paired-phone { width: 104px; height: 232px; padding: 5px; border-radius: 19px; }
  .paired-phone img { border-radius: 14px; }
  .paired-phone-cluster--double .paired-phone + .paired-phone { margin-left: -74px; transform: translate(18px,24px); }
  .paired-desktop img { aspect-ratio: 4 / 3; }
  .overlay-schematic { height: 220px; min-height: 220px; }
}

/* Reserve the career caption as a separate zone at every stage height. */
.kellton-ai { inset: 8% 8% 32%; }
.ka-signal i { height: 24px; }
.ka-core { width: 80px; height: 80px; }
.ka-fan { height: 24px; }
@media (max-width: 700px) {
  .kellton-ai { inset: 6% 4% 34%; }
  .ka-core { width: 72px; height: 72px; }
  .ka-fan { height: 20px; }
  .ka-branches { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .paired-step, .paired-frames, .paired-phone, .paired-phone-cluster,
  .paired-phone-cluster--double .paired-phone + .paired-phone { opacity: 1 !important; transition: none !important; animation: none !important; }
}

/* ================================================================
   v0.43 — case emblems: contained, high-fidelity opening marks
   above the kicker (replaces the removed v0.42 full-bleed sigils)
   ================================================================ */
.case-emblem {
  height: clamp(110px, 14vh, 160px);
  margin: 0 auto clamp(22px, 3.5vh, 34px);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.case-emblem svg { height: 100%; width: auto; max-width: 86vw; overflow: visible; display: block; }
.casehero--emblem { padding-top: max(92px, 10vh); }

/* --- PNC emblem: pages leave the stack, rise, and drift like leaves --- */
.case-emblem--pnc { position: relative; width: min(300px, 70vw); overflow: hidden; }
.case-emblem--pnc .em-stack { position: absolute; left: 50%; bottom: 6px; width: 34px; height: 14px; transform: translateX(-50%); }
.case-emblem--pnc .em-base {
  position: absolute; left: 0; right: 0; height: 42px; bottom: 0;
  border: 1px solid rgba(245,242,235,.28); border-radius: 4px;
  background: #0d0d0f;
  clip-path: inset(calc(100% - 14px) 0 0 0 round 0 0 4px 4px);
}
.case-emblem--pnc .em-base.b2 { transform: translate(-3px, -4px) rotate(-2deg); opacity: .55; }
.case-emblem--pnc .em-base.b3 { transform: translate(3px, -8px) rotate(2deg); opacity: .3; }
.em-riser { position: absolute; left: 50%; bottom: 14px; margin-left: -15px; animation: emRise var(--d, 6.4s) cubic-bezier(.45,.05,.35,1) var(--delay, 0s) infinite; opacity: 0; will-change: transform, opacity; }
.em-riser--1 { --d: 6.8s; --delay: -1.2s; --dx: -34px; }
.em-riser--2 { --d: 7.6s; --delay: -3.6s; --dx: 26px; }
.em-riser--3 { --d: 7.2s; --delay: -5.8s; --dx: -10px; }
.em-page {
  position: relative; width: 30px; height: 40px;
  border: 1px solid rgba(245,242,235,.38); border-radius: 3px 8px 3px 3px;
  background: linear-gradient(160deg, rgba(245,242,235,.09), rgba(245,242,235,.02));
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
  animation: emSway 2.7s ease-in-out infinite alternate;
}
.em-page::before {
  content: ""; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px;
  border-left: 1px solid rgba(245,242,235,.38); border-bottom: 1px solid rgba(245,242,235,.38);
  border-radius: 0 0 0 3px; background: rgba(245,242,235,.10);
}
.em-page::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 14px; height: 1.5px;
  background: rgba(245,242,235,.32);
  box-shadow: 0 6px 0 rgba(245,242,235,.22), 0 12px 0 rgba(245,242,235,.14);
}
.em-page--shu { border-color: rgba(195,21,55,.65); }
.em-page--shu::before { border-color: rgba(195,21,55,.65); background: rgba(195,21,55,.18); }
.em-page--shu::after { background: rgba(195,21,55,.5); box-shadow: 0 6px 0 rgba(195,21,55,.32), 0 12px 0 rgba(195,21,55,.18); }
@keyframes emRise {
  0%   { transform: translate(0, 0) scale(.82); opacity: 0; }
  10%  { opacity: 1; }
  55%  { transform: translate(calc(var(--dx) * .6), -74px) scale(.94); opacity: .85; }
  100% { transform: translate(var(--dx), -138px) scale(1); opacity: 0; }
}
@keyframes emSway { from { transform: rotate(-6deg) translateX(-2px); } to { transform: rotate(6deg) translateX(2px); } }

@media (max-width: 620px) {
  .case-emblem { height: clamp(96px, 12vh, 130px); }
  .casehero--emblem { padding-top: max(84px, 9vh); }
}
@media (prefers-reduced-motion: reduce) {
  .em-riser { animation: none; opacity: 1; bottom: auto; }
  .em-riser--1 { top: 26%; margin-left: -52px; }
  .em-riser--2 { top: 12%; margin-left: 10px; }
  .em-riser--3 { top: 42%; margin-left: 34px; }
  .em-page { animation: none; }
  .em-riser--1 .em-page { transform: rotate(-5deg); }
  .em-riser--3 .em-page { transform: rotate(4deg); }
  .case-emblem--finance .em-horizon { opacity: .4; }
}

/* ================================================================
   v0.45 — quieter About scale + standardized PNC editorial intros
   ================================================================ */

/* The About page returns to the original site's editorial proportion:
   a modest portrait beside readable copy, with headings that support the
   story instead of consuming the full viewport. */
.about-hero-grid { grid-template-columns: minmax(0,1.16fr) minmax(360px,.84fr); }
.about-hero-copy h1 { font-size: clamp(46px,4.8vw,70px); line-height: 1.02; letter-spacing: -.042em; }
.about-portrait-stage { min-height: 560px; }
.about-portrait-stage::before { inset: 9% 6% 12%; }
.about-portrait { width: auto; height: clamp(420px, 42vw, 520px); max-width: 100%; }
.about-premise > h2 { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -.04em; }
.career-heading h2 { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -.04em; }
.career-role h3 { font-size: var(--t-h3); line-height: 1.11; letter-spacing: -.028em; }
.career-panel > strong { font-size: var(--t-h3); }
.about-thread > h2 { font-size: clamp(40px,4.5vw,62px); line-height: 1.03; letter-spacing: -.042em; }
.about-thread-step span { font-size: var(--t-h4); }
.about-outro h2 { font-size: clamp(40px,4.5vw,62px); }

/* Paper-to-production and responsive introductions now use the same
   centered editorial lockup as Before / After. Their artifacts retain
   their existing full-width composition below the copy. */
.act--centered-intro > .kicker { justify-content: center; text-align: center; }
.act--centered-intro > h3,
.act--centered-intro > .lede { max-width: 72ch; margin-left: auto; margin-right: auto; text-align: center; }
.act--centered-intro > h3 { max-width: 18ch; }

/* Keep the Research heading anchored directly beneath its kicker instead
   of vertically centering it against an oversized journey-map image. */
.pnc-research-grid {
  grid-template-columns: minmax(0,1.12fr) minmax(360px,.88fr);
  gap: clamp(42px,6vw,82px);
  align-items: start;
}
.pnc-research-grid .mediaframe { width: 100%; max-width: 380px; justify-self: end; }

@media (max-width: 980px) {
  .about-hero-grid { grid-template-columns: 1fr; }
  .about-portrait-stage { min-height: 520px; max-width: 520px; }
  .pnc-research-grid { grid-template-columns: 1fr; gap: 42px; }
  .pnc-research-grid .mediaframe { max-width: 420px; justify-self: center; }
}

@media (max-width: 700px) {
  .about-hero-copy h1 { font-size: var(--t-h2); }
  .about-portrait-stage { min-height: 460px; }
  .about-portrait-stage::before { inset: 9% 5% 12%; }
  .about-portrait { width: auto; height: clamp(330px, 56vw, 430px); max-width: 88%; }
  .about-premise > h2,.career-heading h2 { font-size: var(--t-h2); }
  .career-role h3 { font-size: var(--t-h3); }
  .about-thread > h2,.about-outro h2 { font-size: var(--t-h2); }
}

/* ================================================================
   v0.46 — Apple-calibrated chapter rhythm + seamless About intro
   ================================================================ */

/* Apple product chapters pair a display headline at roughly four times the
   body size with compact leading, a 0.4–0.5em copy gap, and a narrower body
   measure. These two PNC feature intros now share the exact scale used by the
   page's 60-second-read headline without disturbing their artifact layouts. */
.case-pnc .act--centered-intro > h3 {
  max-width: 18ch;
  font-size: clamp(38px,4.7vw,64px);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.case-pnc .act--centered-intro > .lede {
  max-width: 62ch;
  font-size: var(--t-body);
  line-height: 1.72;
  text-wrap: pretty;
}
.case-pnc .act--centered-intro > h3 + .lede { margin-top: clamp(26px,2.5vw,36px); }
.case-pnc .act--centered-intro > .lede + .lede { margin-top: clamp(14px,1.2vw,18px); }
.case-pnc .act--centered-intro > .mat-row,
.case-pnc .act--centered-intro > .pnc-paired-journey { margin-top: clamp(64px,8vh,96px); }

/* The original homepage introduced Takshak with one quiet Memoji on the left
   and copy on the right. Crop the portrait video to its circular content,
   feather the edge, and screen-blend pure black into the near-black canvas so
   the source rectangle disappears. */
.about-hero {
  min-height: 100svh;
  padding: clamp(118px,15vh,166px) 8vw clamp(100px,13vh,148px);
}
.about-hero-grid {
  max-width: 1180px;
  grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr);
  gap: clamp(64px,8vw,118px);
}
.about-portrait-stage {
  grid-column: 1;
  grid-row: 1;
  min-height: 360px;
}
.about-hero-copy { grid-column: 2; grid-row: 1; }
.about-hero-copy h1 { max-width: 11ch; margin-top: 0; }
.about-hero-copy > p { margin-top: clamp(26px,2.4vw,34px); }
.about-portrait-stage::before,.about-portrait-wash,.portrait-note { display: none; }
/* The circular mask here was built for the square Memoji clip. A standing
   figure cropped to a circle loses the whole body and cuts the head oddly, so
   the phone layout keeps the same standing cut-out, just smaller. */
.about-portrait {
  width: auto;
  height: clamp(340px, 62vw, 440px);
  max-width: 86%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: saturate(.92) contrast(1.03) drop-shadow(0 18px 30px rgba(0,0,0,.5));
}

/* One section rhythm across About: related copy stays close; the next content
   group gets a larger, repeatable interval. */
.about-premise,.career-narrative,.about-thread { padding-block: clamp(112px,15vh,184px); }
.about-premise > h2,.career-heading h2,.about-thread > h2 { margin-top: 0; }
.about-premise > p,.career-heading p,.about-thread > p { margin-top: clamp(24px,2.2vw,30px); }
.about-method { margin-top: clamp(52px,7vh,76px); }
.career-heading { margin-bottom: clamp(64px,9vh,104px); }
.about-thread-track { margin-top: clamp(58px,8vh,88px); }

@media (max-width: 980px) {
  .about-hero { padding-block: clamp(118px,15vh,150px) clamp(90px,12vh,120px); }
  .about-hero-grid { grid-template-columns: 1fr; gap: clamp(54px,8vh,76px); }
  .about-hero-copy,.about-portrait-stage { grid-column: 1; grid-row: auto; }
  /* taller than the Memoji era: a standing figure needs vertical room */
  .about-portrait-stage { min-height: 470px; max-width: 420px; }
}

@media (max-width: 700px) {
  .about-hero { min-height: auto; padding-top: 118px; padding-bottom: 88px; }
  .about-hero-grid { gap: 50px; }
  .about-portrait-stage { min-height: 420px; }
  .about-premise,.career-narrative,.about-thread { padding-block: clamp(92px,13vh,128px); }
}

@media (max-width: 620px) {
  .case-pnc .act--centered-intro > h3 { font-size: var(--t-h3); }
}

/* ================================================================
   v0.47 — portrait framing, footer anchoring, and editorial polish
   ================================================================ */

/* Restore the requested desktop order: introduction first, portrait second.
   The portrait keeps its native 9:16 frame so the head and waving hand remain
   visible; black pixels still blend into the canvas without a hard rectangle. */
.about-hero-grid { grid-template-columns: minmax(0,1.28fr) minmax(280px,.72fr); }
.about-hero-copy { grid-column: 1; grid-row: 1; }
.about-portrait-stage {
  grid-column: 2;
  grid-row: 1;
  min-height: 520px;
  overflow: visible;
}
/* FINAL word on the portrait — this block is last in the file and wins.
   Written for the standing cut-out photograph that replaced the Memoji clip.
   `mix-blend-mode: lighten` is deliberately GONE: it suited a bright Memoji on
   dark canvas, but it dissolves a dark suit into the background. Sized by
   HEIGHT so the figure scales as a figure; aligned to the bottom of the stage
   so he stands on the glass panel rather than hovering inside it. */
.about-portrait {
  width: auto;
  height: clamp(430px, 44vw, 570px);
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: 50% 100%;
  align-self: end;
  border-radius: 0;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
  filter: saturate(.92) contrast(1.03) drop-shadow(0 26px 44px rgba(0,0,0,.55));
}

/* Keep the closing contact moment spacious; the semantic footer now follows
   it as its own final page region. */
.outro { padding-bottom: clamp(112px,14vh,150px); }

/* The PNC problem label and headline share a centered lockup; long-form copy
   keeps its more readable left alignment below. */
.case-pnc .act--problem-intro > .kicker { justify-content: center; text-align: center; }
.case-pnc .act--problem-intro > h3 {
  max-width: 18ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}
.case-pnc .act--problem-intro > .lede { margin-inline: auto; text-align: left; }

/* A quieter project title keeps the hierarchy on the section label. */
.next-link .t { font-size: var(--t-h2); }

@media (max-width: 980px) {
  .about-hero-grid { grid-template-columns: 1fr; }
  .about-hero-copy,.about-portrait-stage { grid-column: 1; grid-row: auto; }
  .about-portrait-stage { min-height: 500px; }
  .about-portrait { width: auto; height: clamp(360px, 52vw, 470px); max-width: 88%; }
}

@media (max-width: 700px) {
  .about-portrait-stage { min-height: 460px; }
  .about-portrait { width: auto; height: clamp(330px, 58vw, 420px); max-width: 86%; }
  .next-link .t { font-size: var(--t-h3); }
}

/* ================================================================
   v0.48 — one semantic footer on every public page
   ================================================================ */
.site-footer {
  min-height: 82px;
  display: grid;
  place-items: center;
  padding: 26px 24px;
  text-align: center;
}
.site-footer p {
  color: var(--gray);
  font-size: var(--t-label);
  line-height: 1.5;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.lost { height: auto; min-height: calc(100svh - 82px); }

/* ============================================================
   Private-work gate (soft, client-side) — Talent & Finance
   ============================================================ */
html.gated { overflow: hidden; }
/* full-viewport opaque cover — hides the case study behind an on-brand veil.
   Unique class (pgate) to avoid colliding with the .gate loader dot above. */
.pgate {
  position: fixed; inset: 0; z-index: 9999; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    radial-gradient(120% 78% at 50% 6%, rgba(195,21,55,.07) 0%, transparent 52%),
    radial-gradient(90% 60% at 50% 104%, rgba(245,242,235,.035) 0%, transparent 60%),
    var(--canvas);
  opacity: 1; transition: opacity .55s cubic-bezier(.2,.8,.2,1);
}
/* giant faint ensō watermark behind the card */
.pgate::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(680px, 116vw); height: min(680px, 116vw);
  background: url("../media/brand/enso.png") center / contain no-repeat;
  opacity: .045;
}
.pgate.open { opacity: 0; pointer-events: none; }
.pgate-back {
  position: absolute; top: 22px; left: 24px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gray); font-size: var(--t-caption); letter-spacing: .04em; text-decoration: none;
  transition: color .25s ease;
}
.pgate-back:hover { color: var(--ink); }
.pgate-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pgate-card {
  position: relative; z-index: 1;
  width: min(440px, 100%); text-align: center;
  border: 1px solid rgba(245,242,235,.12); border-radius: 24px;
  background: linear-gradient(150deg, rgba(245,242,235,.05), rgba(245,242,235,.012));
  -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(245,242,235,.08), 0 40px 100px rgba(0,0,0,.5);
  padding: clamp(32px, 5vw, 50px) clamp(24px, 4vw, 42px);
}
.pgate-card .kicker { justify-content: center; margin-bottom: 20px; }
.pgate-h {
  font-family: var(--display); font-weight: 500; letter-spacing: -.025em;
  font-size: var(--t-h3); line-height: 1.12; color: var(--ink);
}
.pgate-sub { margin-top: 14px; color: var(--gray); font-size: var(--t-small); line-height: 1.65; }
.pgate-form { margin-top: 26px; display: flex; gap: 10px; }
.pgate-input {
  flex: 1; min-width: 0; padding: 13px 18px; border-radius: 999px;
  background: rgba(245,242,235,.04); border: 1px solid rgba(245,242,235,.16);
  color: var(--ink); font-family: var(--body); font-size: var(--t-small); letter-spacing: .02em;
  transition: border-color .25s ease, background .25s ease;
}
.pgate-input::placeholder { color: var(--gray); }
.pgate-input:focus { outline: none; border-color: var(--shu); background: rgba(245,242,235,.06); }
.pgate-btn {
  padding: 13px 24px; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--canvas); border: 1px solid var(--ink);
  font-family: var(--body); font-weight: 500; font-size: var(--t-caption); letter-spacing: .04em;
  transition: transform .2s ease, opacity .2s ease;
}
.pgate-btn:hover { opacity: .88; }
.pgate-btn:active { transform: scale(.97); }
.pgate-btn:focus-visible, .pgate-request:focus-visible, .pgate-back:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }
.pgate-err { margin-top: 14px; color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .02em; }
.pgate-request {
  display: inline-block; margin-top: 22px; color: var(--gray);
  font-size: var(--t-caption); letter-spacing: .06em; text-decoration: none;
  border-bottom: 1px solid var(--gray); padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.pgate-request:hover { color: var(--ink); border-color: var(--ink); }
.pgate.shake .pgate-card { animation: gateShake .38s cubic-bezier(.36,.07,.19,.97); }
@keyframes gateShake {
  10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); }
  30%,50%,70% { transform: translateX(-5px); } 40%,60% { transform: translateX(5px); }
}
@media (max-width: 460px) { .pgate-form { flex-direction: column; } .pgate-back { top: 16px; left: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .pgate { transition: none; } .pgate.shake .pgate-card { animation: none; }
}

/* ================================================================
   v0.54 — Receipts distributed across the Selected Work measure
   ================================================================ */
.proof {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(44px,5vw,96px);
}
.proof .stat:nth-child(2) { justify-self: start; text-align: left; }
.proof .stat:nth-child(3) { justify-self: stretch; text-align: center; }
.proof .stat:nth-child(4) { justify-self: stretch; text-align: right; }
.proof .stat:nth-child(3)::before { margin-right: auto; margin-left: auto; }
.proof .stat:nth-child(4)::before { margin-left: auto; }
.proof .stat:nth-child(3) .big { justify-content: center; }
.proof .stat:nth-child(4) .big { justify-content: flex-end; }
.proof .stat:nth-child(3) p { margin-right: auto; margin-left: auto; }
.proof .stat:nth-child(4) p { margin-left: auto; }

@media (max-width: 760px) {
  .proof { grid-template-columns: 1fr; gap: 46px; }
  .proof .stat:nth-child(2),
  .proof .stat:nth-child(3),
  .proof .stat:nth-child(4) { justify-self: stretch; text-align: left; }
  .proof .stat:nth-child(3)::before,
  .proof .stat:nth-child(4)::before,
  .proof .stat:nth-child(3) p,
  .proof .stat:nth-child(4) p { margin-right: 0; margin-left: 0; }
  .proof .stat:nth-child(3) .big,
  .proof .stat:nth-child(4) .big { justify-content: flex-start; }
}

/* ================================================================
   v0.55 — responsive experience, accessible motion + mobile editorial
   ================================================================ */

/* Keep the primary crimson for marks, surfaces, and large display text;
   use the contrast-safe text token where the accent carries small copy. */
:is(
  .kicker .no, .mv-caption .hot, .tldr .v.hot, .jstage .sc,
  .frv .card .step, .frv .step.lit .lab, .pv-resp .pv-lab,
  .pv-seal .vf, .decision-card .dc-no, .journal-entry b,
  .rule-state, .ledger-stage .sc, .ledger-mini.entry b,
  .stack-note, .overlay .item .ic, .application-path article > span,
  .feature-band .f > span, .outcome-eyebrow, .outcome-step > span,
  .finance-outcome-beats article > span, .pnc-outcome-beats article > span,
  .outcome-voice cite, .finance-impact-statement > span,
  .finance-ledger-head b, .pnc-form-head b, .pnc-live-mark strong,
  .portrait-note span, .about-method span, .career-no,
  .career-stage-head b, .career-panel > small, .career-form > b,
  .case-compass-grid article > span, .constraint-map span,
  .mobile-story span, .talent-lead-viz article > span,
  .talent-voice-label, .talent-voice-viz--profile small,
  .talent-voice-viz--rise > strong em,
  .fieldwork-model small, .language-translator, .language-entry strong,
  .platform-node span, .platform-resolve small, .logic-filter b, .logic-path strong,
  .sprint-node span, .sprint-count small, .delivery-core small,
  .pnc-production-viz > strong, .pnc-spec-viz > span,
  .scale-route strong, .research-field-loop > div span,
  .voice-profile-live em, .readout-card span, .paired-step-copy span,
  .pgate-err
) { color: var(--shu-text); }

/* Low-opacity light labels fell below 4.5:1 on the near-black canvas.
   The shared gray token remains subdued while clearing AA for normal text. */
.proof-pace span::before,
.approval-caption,
.finance-ledger-row b,
.finance-balance b,
.pnc-question--conditional b { color: var(--gray); }

/* Comfortable hit areas without materially changing the desktop nav silhouette. */
nav.glassnav { gap: 18px; padding: 6px 14px; max-width: calc(100vw - 20px); }
nav.glassnav a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
nav.glassnav a:not(.mark) { min-width: 44px; padding-inline: 3px; }
nav.glassnav .mark { width: 44px; height: 44px; }
.overlay .close, .lightbox .lb-close { width: 44px; height: 44px; }
.pgate-back, .pgate-request { min-height: 44px; padding-inline: 8px; display: inline-flex; align-items: center; justify-content: center; }
.pgate-back { margin: -8px; }
.pgate-btn { min-height: 44px; }

/* Hero copy remains readable over both dark and pale frames of the film. */
.hero .hero-sub {
  color: rgba(245,242,235,.76);
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.9);
}
.hero .hero-sub b { text-shadow: 0 1px 4px rgba(0,0,0,.95); }

/* Static resolutions for very short screens preserve meaning without a clipped pin. */
.highlights-stage.is-compact-stage { height: auto; min-height: 0; display: block; overflow: visible; padding: 86px 0 54px; }
.highlights-stage.is-compact-stage > .kicker { position: static; transform: none; text-align: center; margin-bottom: 20px; }
.highlights-stage.is-compact-stage .hl-scene { min-height: 310px; }
.highlights-stage.is-compact-stage .hl-dots { display: none; }
.days-stage.is-compact-stage { min-height: 340px; height: 100svh; }
.days-stage.is-compact-stage .days-copy, .days-stage.is-compact-stage .punch { opacity: 0 !important; }
.days-stage.is-compact-stage .resolve { opacity: 1 !important; gap: 22px; }
.wall-stage.is-compact-stage { min-height: 340px; height: 100svh; }

@media (max-width: 760px) {
  nav.glassnav { gap: 2px; padding: 4px 8px; }
  nav.glassnav a:not(.mark) { padding-inline: 2px; }
  .act--centered > .lede,
  .act--centered-intro > .lede,
  .case-pnc .act--centered-intro > .lede { text-align: left; text-wrap: pretty; }
  .about-hero-copy > p { max-width: 34ch; text-align: left; }
  .overlay .lede { text-align: left; }
  .reel-row { scroll-snap-type: x proximity; scrollbar-width: none; }
  .reel-row::-webkit-scrollbar { display: none; }
  .reel-item { scroll-snap-align: center; }
}

@media (max-width: 360px) {
  nav.glassnav { max-width: calc(100vw - 12px); }
  nav.glassnav a:not(.mark) { min-width: 44px; padding-inline: 4px; font-size: var(--t-caption); letter-spacing: .015em; }
  nav.glassnav .mark { width: 44px; min-width: 44px; }
  .overlay { width: calc(100vw - 16px); padding-inline: 20px; }
}

@media (max-width: 960px) and (max-height: 620px) {
  nav.glassnav { top: 8px; }
  .short-stage .hl-glyph { display: none; }
  .short-stage .hl-scene { padding-block: 66px 34px !important; }
  .short-stage .hl-scene h3 { font-size: var(--t-h3); }
  .short-stage .hl-scene p { margin-top: 12px; line-height: 1.5; max-width: 62ch; }
  .short-stage .hl-receipt { margin-top: 14px; }
  .short-stage .highlights-stage > .kicker { top: 72px; }
  .short-stage .hl-dots { bottom: 14px; }
  .days-title { font-size: clamp(48px, 12vh, 82px); }
  .bar-wrap { margin-top: 28px; }
  .resolve { gap: 20px; }
  .wall { gap-block: 7px; }
}

/* ================================================================
   v0.65 — unified #C31537 Home accents
   ================================================================ */

/* Proximity groups the mark with the first destination; asymmetric padding
   optically balances the wider Contact label at the opposite edge. */
nav.glassnav {
  gap: 16px;
  padding: 6px 24px 6px 10px;
}
nav.glassnav .mark { margin-right: -8px; }
nav.glassnav a:not(.mark) { padding-inline: 4px; }

/* The deeper crimson serves large type and graphic roles; a lighter
   same-family crimson keeps small accent copy AA-readable. */
body.home {
  --shu-deep: #C31537;
  --shu: #C31537;
  --shu-text: #F7225B;
}
body.case-anchor {
  --shu-deep: #C31537;
  --shu: #C31537;
}
body.home .hero-copy {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}
body.home .hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: rgba(245,242,235,.86);
  margin-bottom: clamp(22px, 2.8vh, 30px);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}
body.home .hero-eyebrow i {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--shu);
}
body.home .hero h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(48px, 6.7vw, 96px);
  line-height: .96;
  letter-spacing: -.045em;
}
body.home .hero-heading-line {
  display: block;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(16px);
  animation: heroHeadingIn 1.05s cubic-bezier(.2,.8,.2,1) .58s forwards;
}
body.home .hero-heading-line + .hero-heading-line {
  animation-delay: .72s;
}
body.home .hero h1 em,
body.home .hero-heading-accent { color: var(--shu); }
@keyframes heroHeadingIn {
  to { opacity: 1; transform: none; }
}
body.home .hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(26px, 3.2vh, 36px);
  color: rgba(245,242,235,.7);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
  text-shadow: 0 1px 20px rgba(0,0,0,.9);
  opacity: 0;
  animation: heroEyebrowIn 1s cubic-bezier(.2,.8,.2,1) 1.05s forwards;
}
body.home .hero-meta i {
  display: block;
  width: 30px;
  height: 1px;
  background: var(--shu);
}
/* Availability line: the one thing a recruiter needs that the rest of the hero
   does not say. Lands after the meta line so it reads as a footnote, not a plea. */
body.home .hero-avail {
  display: flex;
  /* See .about-avail: the dot sits on the first line, not in the wrap gap. */
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
  color: rgba(245,242,235,.5);
  font-size: var(--t-caption);
  font-weight: 400;
  letter-spacing: .012em;
  line-height: 1.6;
  text-transform: none;
  text-shadow: 0 1px 20px rgba(0,0,0,.9);
  text-wrap: pretty;
  opacity: 0;
  animation: heroEyebrowIn 1s cubic-bezier(.2,.8,.2,1) 1.25s forwards;
}
body.home .hero-avail .ha-dot {
  flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  margin-top: calc((1.6em - 6px) / 2);
  background: var(--shu);
  box-shadow: 0 0 0 0 rgba(203,74,58,.55);
  animation: availPulse 2.6s ease-out infinite;
}
@keyframes availPulse {
  0%   { box-shadow: 0 0 0 0 rgba(203,74,58,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(203,74,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(203,74,58,0); }
}
@media (prefers-reduced-motion: reduce) {
  body.home .hero-avail .ha-dot { animation: none; }
}

body.home .inkdata h2 {
  max-width: 30ch;
  font-size: var(--t-h3);
  line-height: 1.2;
  text-wrap: balance;
}
body.home .inkdata h2 .chaos { color: rgba(245,242,235,.58); }
body.home .inkdata h2 .order { color: var(--ink); }
body.home .mv-form i.keep { background: rgba(195,21,55,.58); }
body.home .kicker .no.rule::before,
body.home .live-brush.brush-primary > .fill {
  filter: brightness(0) saturate(100%) invert(28%) sepia(53%) saturate(2425%) hue-rotate(328deg) brightness(77%) contrast(96%);
}

@media (max-width: 760px) {
  nav.glassnav { gap: 2px; padding: 4px 12px 4px 6px; }
  nav.glassnav .mark { margin-right: -2px; }
  nav.glassnav a:not(.mark) { padding-inline: 2px; }
  body.home .hero-copy {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
  }
  body.home .hero-eyebrow { gap: 8px; margin-bottom: 20px; font-size: var(--t-caption); letter-spacing: .1em; line-height: 1.5; }
  body.home .hero-eyebrow i { width: 14px; }
  body.home .hero h1 { max-width: none; font-size: var(--t-h3); line-height: .99; }
  body.home .hero-meta { gap: 10px; font-size: var(--t-caption); letter-spacing: .13em; }
  body.home .hero-meta i { width: 20px; }
  body.home .hero-avail { max-width: 30ch; margin-inline: auto; margin-top: 13px; font-size: var(--t-caption); line-height: 1.55; }
  body.home .inkdata h2 { max-width: 25ch; font-size: var(--t-h3); line-height: 1.25; }
}

@media (max-width: 360px) {
  nav.glassnav { padding-right: 10px; }
  body.home .hero-eyebrow { font-size: var(--t-caption); letter-spacing: .08em; }
  body.home .hero-meta { font-size: var(--t-caption); letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  body.home .hero-heading-line { animation: none; opacity: 1; transform: none; }
  body.home .hero-meta { animation: none; opacity: 1; }
  body.home .hero-avail { animation: none; opacity: 1; transform: none; }
}

/* The short story reuses the deep-dive TL;DR glass strip so switching reading
   depth changes the amount of detail, not the visual language of project scope. */
.story-scope.tldr { width: min(920px, 100%); margin-top: clamp(22px, 2.8vh, 30px); }
.casehero .tldr { display: flex; }
.casehero .tldr .t {
  flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; text-align: center;
  padding-inline: clamp(10px, 1.2vw, 18px);
}
.casehero .tldr .l { flex: 0 0 auto; white-space: nowrap; }
.casehero .tldr .v {
  min-width: 0; font-size: var(--t-small);
  white-space: nowrap;
}
.story-scope.tldr dt, .story-scope.tldr dd { margin: 0; }
@media (max-width: 760px) {
  .casehero .tldr { flex-wrap: wrap; gap: 0; }
  .casehero .tldr .t { flex: 1 1 max-content; min-width: min(100%, 145px); }
  .casehero .tldr .v { font-size: var(--t-caption); }
}

/* ================================================================
   v0.68 — confident About headings + accessible typography
   ================================================================ */

@media (min-width: 981px) {
  /* Sized to the hard breaks, 2026-08-01. The heading carries two <br>s that
     set its intended three-line shape, so the only thing that can go wrong is
     a segment too wide for the column — and the longest, "making the complex",
     measures 8.45em. At clamp(54px, 5.5vw, 82px) that came to 693px against a
     680px column and wrapped, giving four lines on every desktop width below
     about 1900. The clamp now stays under the column across 1024–2200 with
     room to spare, and the ch cap is gone: with explicit breaks it could only
     ever fight the column for control of the same line. */
  .about-hero-copy h1 {
    max-width: none;
    font-size: clamp(48px, 4.6vw, 72px);
    line-height: 1;
    letter-spacing: -.05em;
  }
  .about-premise > h2 {
    max-width: 18ch;
    font-size: clamp(54px, 5vw, 76px);
    line-height: 1.01;
    letter-spacing: -.045em;
  }
}

@media (min-width: 701px) and (max-width: 980px) {
  .about-hero-copy h1 {
    max-width: 15ch;
    font-size: clamp(56px, 7.5vw, 68px);
  }
  .about-premise > h2 {
    max-width: 18ch;
    font-size: clamp(52px, 6.8vw, 64px);
  }
}

/* ================================================================
   v0.69 — editorial heading measures + clearer global controls
   ================================================================ */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

/* Research label, finding, and evidence now share one top-aligned composition. */
.case-talent .talent-research-grid {
  grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr);
  gap: clamp(48px, 6vw, 88px);
  align-items: start;
}
.case-talent .talent-research-copy .kicker { margin-bottom: 24px; }
.case-talent .talent-research-copy h3 { max-width: 16ch; }
.case-talent .talent-research-act .mediaframe {
  width: 100%;
  max-width: 560px;
  margin-top: 0;
  justify-self: end;
}

/* Wide screens should use their available measure before breaking a display line. */
@media (min-width: 981px) {
  .casehero h1,
  .casehero h2 { max-width: min(18ch, 100%); }
  .act--research-laws > h3,
  .chapter-grid--media-led .editorial-copy h3,
  .act--fulcrum .editorial-copy h3,
  .adoption-section .adoption-heading h3,
  .outcome-step h3,
  .finance-outcome-beats h4,
  .pnc-outcome-beats h4,
  .career-role h3,
  .leadership-perspective > h3,
  .talent-problem-copy h3 {
    max-width: 18ch;
  }
}

@media (max-width: 900px) {
  .case-talent .talent-research-grid { grid-template-columns: 1fr; gap: 42px; }
  .case-talent .talent-research-act .mediaframe {
    max-width: 680px;
    justify-self: center;
  }
}

/* ================================================================
   v0.74 — mobile homepage editorial alignment
   ================================================================ */
@media (max-width: 760px) {
  /* Keep the thesis comfortably inside the animated ink field. */
  body.home .inkdata-copy {
    width: 100%;
    padding-inline: clamp(24px, 8vw, 34px);
  }
  body.home .inkdata h2 {
    width: 100%;
    max-width: 17ch;
    margin-inline: auto;
    font-size: var(--t-h4);
    line-height: 1.28;
    text-wrap: balance;
  }

  /* On a single-column phone layout, the impact reads as one centered story. */
  body.home .proof .stat:nth-child(n+2) {
    align-items: center;
    justify-self: stretch;
    text-align: center;
  }
  body.home .proof .stat:nth-child(n+2)::before {
    margin-right: auto;
    margin-left: auto;
  }
  body.home .proof .stat:nth-child(n+2) .big {
    justify-content: center;
  }
  body.home .proof .stat:nth-child(n+2) p {
    margin-right: auto;
    margin-left: auto;
  }
}

/* ================================================================
   v0.75 — restore full mobile navigation proportions
   ================================================================ */
@media (max-width: 760px) {
  nav.glassnav {
    gap: 16px;
    padding: 6px 24px 6px 10px;
  }
  nav.glassnav .mark { margin-right: -8px; }
  nav.glassnav a:not(.mark) {
    padding-inline: 4px;
    font-size: var(--t-caption);
    letter-spacing: .04em;
  }
}

/* ================================================================
   v0.77 — mobile case-study heading and primary-media order
   ================================================================ */
@media (max-width: 760px) {
  /* Center only the editorial lockups; supporting paragraphs stay left-aligned. */
  .case-talent .talent-research-copy .kicker,
  .case-talent .talent-research-copy h3,
  .case-finance .ledger-copy .kicker,
  .case-finance .ledger-copy h3,
  .case-finance .finance-research-act > .kicker,
  .case-finance .finance-research-act .editorial-copy h3 {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
  .case-finance .ledger-copy h3 {
    width: 100%;
    max-width: 18ch !important;
  }

  /* Fluid and Abacus: heading → primary animation → explanatory copy. */
  .chapter-grid--mobile-primary-after-heading {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .chapter-grid--mobile-primary-after-heading > .chapter-copy {
    display: contents;
  }
  .chapter-grid--mobile-primary-after-heading > .chapter-copy > * {
    order: 3;
  }
  .chapter-grid--mobile-primary-after-heading > .chapter-copy > h3 {
    order: 1;
    margin: 0;
  }
  .chapter-grid--mobile-primary-after-heading > .chapter-primary-media {
    order: 2;
    margin-top: 26px;
  }
  .chapter-grid--mobile-primary-after-heading > .chapter-copy > .lede {
    margin-top: 28px;
  }
}

/* ================================================================
   v0.78 — vertical suite journey and stable mobile media flow
   ================================================================ */
@media (max-width: 760px) {
  /* The four connected products read top-to-bottom on a phone. */
  .case-talent .journey--suite .jline.jline--4 {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 50px;
  }
  .case-talent .journey--suite .jline .jbrush {
    display: block;
    top: 10px;
    right: auto;
    bottom: 12px;
    left: 1px;
    width: 20px;
    height: auto;
  }
  .case-talent .journey--suite .jline .jbrush span {
    background-image: url("../media/brand/sumi-brush-vertical-v1.png") !important;
    background-position: center !important;
    background-size: 100% 100% !important;
  }
  .case-talent .journey--suite .jline .jbrush.anim .fill {
    clip-path: none;
    transform: scaleX(1) scaleY(0);
    transform-origin: center top;
  }
  .case-talent .journey--suite .jstage {
    min-height: 150px;
    padding: 8px 0 42px 54px;
    text-align: left;
  }
  .case-talent .journey--suite .jstage:last-child {
    min-height: 0;
    padding-bottom: 8px;
  }
  .case-talent .journey--suite .jstage .dot {
    display: block;
    top: 18px;
    left: 11px;
  }
  .case-talent .journey--suite .jstage p {
    margin-right: 0;
    margin-left: 0;
  }

  /* A wider measure gives the Fulcrum thesis fewer, more natural line breaks. */
  .case-finance .act--fulcrum .editorial-copy h3 {
    width: 100%;
    max-width: 19ch;
  }

  /* Mobile chapters need a static media position after their headings. */
  .chapter-grid--mobile-primary-after-heading > .chapter-primary-media {
    position: relative;
    z-index: 1;
    margin-top: 28px;
    transform: none !important;
  }
  .chapter-grid--mobile-primary-after-heading > .chapter-copy > .lede {
    position: relative;
    z-index: 2;
    margin-top: 30px;
  }
  .chapter-grid--mobile-primary-after-heading > .chapter-copy > .feat {
    margin-top: 26px;
  }
  .chapter-grid--mobile-primary-after-heading > .chapter-copy > .metric {
    margin-top: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-talent .journey--suite .jline .jbrush.anim .fill {
    transform: none !important;
  }
}

/* ================================================================
   v0.79 — mobile hero typography proportions
   ================================================================ */
@media (max-width: 700px) {
  /* Let the About statement form longer, calmer lines than the byline. */
  .about-hero-copy h1 {
    width: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    font-size: var(--t-h3);
    line-height: 1.05;
    letter-spacing: -.045em;
    text-wrap: balance;
  }
  .about-hero-copy h1 .about-hero-break { display: none; }
  .about-hero-copy > p {
    width: 100%;
    max-width: 42ch;
    margin-right: auto;
    margin-left: auto;
    line-height: 1.72;
    text-wrap: pretty;
  }
}

@media (max-width: 760px) {
  /* Give the homepage hero a little more presence without losing its two lines. */
  body.home .hero-copy { padding-inline: 12px; }
  body.home .hero h1 {
    width: 100%;
    font-size: var(--t-h2);
    line-height: 1;
    letter-spacing: -.052em;
  }
  body.home .hero-heading-line { white-space: normal; }
  body.home .hero-eyebrow {
    font-size: var(--t-caption);
    letter-spacing: .11em;
  }
  body.home .hero-meta {
    font-size: var(--t-caption);
    letter-spacing: .13em;
  }
}

@media (max-width: 360px) {
  body.home .hero h1 { font-size: var(--t-h2); }
  body.home .hero-eyebrow { font-size: var(--t-caption); }
  body.home .hero-meta { font-size: var(--t-caption); }
}

/* ================================================================
   v0.83 — responsive motion and rendering performance
   ================================================================ */

/* Keep the grain without allocating a four-viewport fixed layer. */
.grain {
  inset: 0;
  width: auto;
  height: auto;
  background-size: 192px 192px;
}

/* The progress figure now moves on the compositor instead of changing left. */
.rail-walker {
  left: 0;
  transform: translate3d(var(--rail-x, 0px), 0, 0);
}
.rail-walker.reverse {
  transform: translate3d(var(--rail-x, 0px), 0, 0) scaleX(-1);
}
.rail-walker.walking { will-change: transform; }

/* Ambient CSS motion runs only while its scene is near the viewport. */
.hero:not(.motion-near) *,
.hero:not(.motion-near) *::before,
.hero:not(.motion-near) *::after,
.case-emblem--pnc:not(.motion-near) *,
.case-emblem--pnc:not(.motion-near) *::before,
.case-emblem--pnc:not(.motion-near) *::after,
.case-emblem--finance:not(.motion-near) *,
.case-emblem--finance:not(.motion-near) *::before,
.case-emblem--finance:not(.motion-near) *::after,
.case-compass-grid article:not(.motion-near) *,
.case-compass-grid article:not(.motion-near) *::before,
.case-compass-grid article:not(.motion-near) *::after,
.pnc-live-mark:not(.motion-near) span,
.ctx-dot:not(.motion-near),
.ctx-dot:not(.motion-near)::after {
  animation-play-state: paused !important;
}

/* Faster feedback: interactions settle quickly while narrative motion keeps
   its own authored timing. */
nav.glassnav,
nav.glassnav a,
nav.glassnav a::after,
.glass-pill,
.spill,
.wcard,
.reel-item,
.strip .cell,
.ctx-ico,
.ctx-ico svg,
.overlay .close,
.lightbox .lb-close {
  transition-duration: .22s !important;
}
a, button, [role="button"], .ba {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Dialogs arrive as short composited sheets. Lower blur and an opaque-enough
   fill avoid repainting the entire page during the interaction. */
.overlay {
  background: rgba(14,14,16,.84);
  -webkit-backdrop-filter: blur(26px) saturate(1.45);
  backdrop-filter: blur(26px) saturate(1.45);
}
.overlay[aria-hidden="false"] { will-change: transform, opacity; }
.overlay[aria-hidden="true"] { will-change: auto; }
.overlay-veil {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Keep the depth of desktop glass while reducing the live blur radius on
   surfaces that stay onscreen or repeat in grids. */
nav.glassnav {
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}
nav.glassnav.nav-light {
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
}
.tldr,
.glass-pill,
.spill,
.portrait-note,
.decision-card,
.case-compass-grid article,
.readout-card {
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
.overlay {
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  backdrop-filter: blur(20px) saturate(1.35);
}

/* The first impression should become readable immediately. */
body.home .hero-heading-line {
  animation-duration: .68s;
  animation-delay: .12s;
}
body.home .hero-heading-line + .hero-heading-line { animation-delay: .22s; }
body.home .hero-meta {
  animation-duration: .58s;
  animation-delay: .5s;
}

/* Desktop keeps the wide two-line lockup; phones use an intentional,
   balanced three-line composition instead of relying on word wrapping. */
body.home .hero-heading-layout { display: block; }
body.home .hero-heading-mobile { display: none; }
@media (max-width: 760px) {
  body.home .hero-heading-desktop { display: none; }
  body.home .hero-heading-mobile { display: block; }
  body.home .hero-heading-mobile .hero-heading-line { white-space: nowrap; }
  body.home .hero-heading-mobile .hero-heading-line:nth-child(2) { animation-delay: .22s; }
  body.home .hero-heading-mobile .hero-heading-line:nth-child(3) { animation-delay: .32s; }
}

/* Mobile and touch hardware keep one live navigation filter; repeated content
   surfaces switch to opaque fills to protect the scroll pipeline. */
@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .tldr,
  .hl-receipt,
  .approve-btn,
  .glass-pill,
  .spill,
  .reel-tag,
  .portrait-note,
  .decision-card,
  .case-compass-grid article,
  .leadership-perspective blockquote,
  .readout-card,
  .ctx-form {
    background-color: rgba(18,18,20,.92) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .overlay {
    background: rgba(14,14,16,.95);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .overlay-veil {
    background: rgba(5,5,6,.78);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .decision-grid::before,
  .decision-grid::after,
  .case-compass-grid::before { filter: none; opacity: .22; }
  .mediaframe img,
  .mediaframe video,
  .reel-item img,
  .reel-item video,
  .strip .cell img { filter: none; }
}

/* ================================================================
   v0.92 — seamless home edge, calmer hero nav, touch-stable comparison
   ================================================================ */

/* Keep 44px touch targets while reducing the mobile pill's visible height,
   spacing, type, and mark by roughly fifteen percent. */
@media (max-width: 760px) {
  nav.glassnav {
    top: max(10px, calc(env(safe-area-inset-top, 0px) + 6px));
    gap: 5px;
    padding: 1px 7px;
  }
  nav.glassnav .mark {
    width: 44px;
    height: 44px;
    margin-right: 0;
  }
  nav.glassnav .mark .enso { width: 26px; height: 26px; }
  nav.glassnav a:not(.mark) {
    min-width: 44px;
    padding-inline: 1px;
    font-size: var(--t-caption);
    letter-spacing: .025em;
  }
}
@media (max-width: 360px) {
  nav.glassnav { gap: 3px; padding-inline: 4px; }
  nav.glassnav a:not(.mark) { font-size: var(--t-caption); letter-spacing: .01em; }
}

/* Reveal a fixed, full-size image instead of resizing it with the divider. */
.ba {
  --ba-position: 50%;
  cursor: ew-resize;
  touch-action: pan-y;
}
.ba .after-img {
  width: 100%;
  -webkit-clip-path: inset(0 calc(100% - var(--ba-position)) 0 0);
  clip-path: inset(0 calc(100% - var(--ba-position)) 0 0);
}
.ba .after-img img {
  width: 100%;
  max-width: none;
}
.ba .handle { left: var(--ba-position); pointer-events: none; }
.ba .balabel { pointer-events: none; }
.ba.is-dragging .handle::after {
  transform: translate(-50%,-50%) scale(1.08);
  border-color: rgba(245,242,235,.48);
}

/* ================================================================
   v0.94 — fluid navigation and elastic page edges
   ================================================================ */

/* Preserve the platform's standard rubber-band gesture. The extension above
   each page matches its opening surface, so elasticity never exposes a
   separate black strip. */
html, body { overscroll-behavior-y: auto; }
html { background-color: var(--canvas); }
body { position: relative; }
body::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -128px;
  height: 128px;
  pointer-events: none;
  background: var(--canvas);
}
/* Layout values ease across the phone breakpoint instead of snapping. */
nav.glassnav {
  transition-property: background-color, border-color, box-shadow, -webkit-backdrop-filter, backdrop-filter, gap, padding, top, max-width !important;
  transition-duration: .42s !important;
  transition-timing-function: cubic-bezier(.2,.8,.2,1) !important;
}
nav.glassnav::before {
  transition: opacity .42s cubic-bezier(.2,.8,.2,1) !important;
}
nav.glassnav .mark {
  transition: width .42s cubic-bezier(.2,.8,.2,1), height .42s cubic-bezier(.2,.8,.2,1), margin-right .42s cubic-bezier(.2,.8,.2,1) !important;
}
nav.glassnav .mark .enso {
  transition: width .42s cubic-bezier(.2,.8,.2,1), height .42s cubic-bezier(.2,.8,.2,1), opacity .3s ease, transform .42s cubic-bezier(.2,.8,.2,1) !important;
}
nav.glassnav a:not(.mark) {
  transition: color .22s ease, font-size .42s cubic-bezier(.2,.8,.2,1), letter-spacing .42s cubic-bezier(.2,.8,.2,1), padding .42s cubic-bezier(.2,.8,.2,1), min-width .42s cubic-bezier(.2,.8,.2,1) !important;
}

/* ================================================================
   v0.95 — protected-page reveal, true hero extension, optical nav rhythm
   ================================================================ */

/* A 16px field prevents Safari's focus zoom; coarse pointers wait for a
   deliberate tap instead of opening the keyboard during page load. */
.pgate-input { font-size: var(--t-body); }

/* Equal anchor boxes created unequal gaps between the visible words. On
   phones, size anchors to their content and give each the same side padding.
   The mark uses the same visible inset while a transparent expansion retains
   its full 44px touch target. */
@media (max-width: 760px) {
  nav.glassnav .mark {
    width: 34px;
    min-width: 34px;
    height: 44px;
  }
  nav.glassnav .mark::after {
    content: "";
    position: absolute;
    inset: 0 -5px;
  }
  nav.glassnav a:not(.mark) {
    min-width: 0;
    padding-inline: 4px;
  }
}

/* ================================================================
   v0.96 — one canvas, true mobile glass, one optical spacing unit
   ================================================================ */

/* All six horizontal intervals—two edge insets plus four item gaps—derive
   from the same responsive value. Link boxes hug their visible content, so
   font metrics cannot silently add a second, unequal spacing layer. */
@media (max-width: 760px) {
  nav.glassnav {
    --nav-optical-space: clamp(11px, 3.4vw, 14px);
    gap: var(--nav-optical-space);
    /* Subtract the one-pixel border so the visible edge-to-item distance
       exactly matches the item-to-item gap. */
    padding: 2px calc(var(--nav-optical-space) - 1px);
  }
  nav.glassnav .mark {
    width: 26px;
    min-width: 26px;
    height: 44px;
  }
  nav.glassnav .mark .enso { width: 26px; height: 26px; }
  nav.glassnav .mark::after {
    inset: 0 -9px;
  }
  nav.glassnav a:not(.mark) {
    min-width: 0;
    padding-inline: 0;
    font-size: var(--t-caption);
    letter-spacing: .025em;
  }
}

/* ================================================================
   v0.104 — ANCHOR case study (Kellton) + home pursuit miniviz
   Additive only. New selectors; no existing rule is modified.
   ================================================================ */

/* ---------- emblem: fragments assembling under a seal ---------- */
.case-emblem--anchor svg { width: 100%; height: 100%; }
.case-emblem--anchor .em-a-frag {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  transform: translate(var(--fx, 0px), var(--fy, 0px)) rotate(var(--fr, 0deg)) scale(.8);
  transition: opacity .8s ease, transform 1.15s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--n, 0) * .07s);
}
.case-emblem--anchor.is-in .em-a-frag { opacity: .5; transform: none; }
.case-emblem--anchor .em-a-page { opacity: 0; transition: opacity .7s ease .55s; }
.case-emblem--anchor.is-in .em-a-page { opacity: 1; }
.case-emblem--anchor .em-a-seal {
  opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(1.7);
  transition: opacity .35s ease 1.05s, transform .55s cubic-bezier(.2,.8,.2,1) 1.05s;
}
.case-emblem--anchor.is-in .em-a-seal { opacity: 1; transform: none; }

/* ---------- compass minivizzes ---------- */
.compass-viz--anchor-dq { display: flex; align-items: flex-end; gap: 5px; height: 40px; }
.compass-viz--anchor-dq i { flex: 1; height: 60%; border-radius: 3px; background: rgba(245,242,235,.14); }
.compass-viz--anchor-dq i.bad { height: 100%; background: rgba(195,21,55,.6); }
.compass-viz--anchor-frame { display: grid; gap: 6px; height: 40px; align-content: center; }
.compass-viz--anchor-frame i { height: 5px; border-radius: 3px; background: rgba(245,242,235,.14); transform-origin: 0 50%; }
.compass-viz--anchor-frame i:nth-child(2) { width: 78%; }
.compass-viz--anchor-frame i:nth-child(3) { width: 52%; background: rgba(195,21,55,.55); }
.compass-viz--anchor-capacity { display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.compass-viz--anchor-capacity i { flex: 1; border-radius: 2px; background: rgba(245,242,235,.16); height: calc(38% + var(--h, 0) * 6%); }
.compass-viz--anchor-capacity i.add { background: rgba(195,21,55,.62); }

/* ---------- the 72-hour deadline scene ---------- */
.deadline { position: relative; }
.deadline-stage {
  height: 100vh; height: 100svh; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dl-frags { position: absolute; inset: 0; pointer-events: none; }
.dl-frags span {
  position: absolute; padding: 7px 12px; border-radius: 8px;
  border: 1px solid rgba(245,242,235,.09); background: rgba(245,242,235,.022);
  color: var(--gray); font-size: var(--t-caption); letter-spacing: .06em; white-space: nowrap;
  opacity: 0; transform: translateY(14px);
}
.dl-copy { position: relative; z-index: 5; text-align: center; width: min(760px, 92vw); padding: 0 24px; }
.dl-clock {
  font-family: var(--display); font-weight: 500; letter-spacing: -.03em;
  font-size: clamp(46px, 8vw, 118px); line-height: 1; font-variant-numeric: tabular-nums;
}
.dl-clock .lbl { display: block; margin-bottom: 16px; font-family: var(--body); font-size: var(--t-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gray); }
.dl-status { margin-top: 20px; min-height: 22px; color: var(--gray); font-size: var(--t-small); letter-spacing: .04em; }
.dl-doc {
  width: min(420px, 78vw); margin: 34px auto 0; padding: 16px; border-radius: 12px;
  border: 1px solid rgba(245,242,235,.1); background: rgba(245,242,235,.016); text-align: left;
}
.dl-doc .sec { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.dl-doc .sec:last-child { margin-bottom: 0; }
.dl-doc .sec b { width: 34px; flex: none; color: var(--gray); font-family: var(--display); font-size: var(--t-caption); font-weight: 500; letter-spacing: .04em; }
.dl-doc .sec .track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: rgba(245,242,235,.08); }
.dl-doc .sec .track i { position: absolute; inset: 0; border-radius: 3px; background: rgba(245,242,235,.32); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.dl-doc .sec .cap { position: absolute; top: -4px; bottom: -4px; width: 1px; background: rgba(245,242,235,.28); right: 12%; }
.dl-doc .sec.over i { background: var(--shu); }
.dl-doc .sec.over .cap { background: var(--shu); box-shadow: 0 0 8px rgba(195,21,55,.7); }
.dl-dq {
  position: absolute; left: 0; right: 0; bottom: 13%; width: max-content;
  max-width: min(560px, 88vw); margin-inline: auto; transform: translateY(10px);
  z-index: 8; opacity: 0; padding: 12px 20px; border-radius: 10px;
  border: 1px solid rgba(195,21,55,.35); background: rgba(195,21,55,.07);
  color: var(--gray); font-size: var(--t-caption); letter-spacing: .05em; text-align: center;
}
.dl-dq b { color: var(--shu); font-weight: 500; }
.dl-punch { position: absolute; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; padding: 0 24px; opacity: 0; pointer-events: none; background: var(--canvas); }
.dl-punch p { font-family: var(--display); font-weight: 500; letter-spacing: -.025em; font-size: var(--t-h2); line-height: 1.24; max-width: 20ch; text-align: center; }
/* Opaque, otherwise the deadline clock and document bleed through the resolve
   as the punch fades out underneath it. */
.dl-resolve { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 0 24px; opacity: 0; pointer-events: none; background: var(--canvas); }
.dl-seal { position: relative; width: 84px; height: 84px; }
.dl-seal svg { width: 100%; height: 100%; }
.dl-remaining { font-family: var(--display); font-size: var(--t-h2); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dl-remaining span { color: var(--gray); font-size: .42em; letter-spacing: .16em; text-transform: uppercase; display: block; margin-top: 12px; }
.dl-resolve .line { color: var(--gray); font-size: var(--t-small); line-height: 1.7; max-width: 34ch; text-align: center; }
.dl-resolve .line b { color: var(--ink); font-weight: 500; }

/* ---------- the six failure modes ---------- */
.anchor-six { max-width: 1280px; margin: 0 auto; padding: 10vh 8vw 4vh; }
.anchor-six h3 { max-width: 20ch; }
.anchor-six .lede { max-width: 62ch; margin-top: 18px; }
.six-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }
.six-grid article {
  padding: 24px; border-radius: 16px; border: 1px solid var(--hairline);
  background: rgba(245,242,235,.014); transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s ease;
}
.six-grid article:hover { transform: translateY(-4px); border-color: rgba(245,242,235,.18); }
/* `article > span`, never a bare descendant selector. These rules style the
   01-06 numeral badge, and a loose `.six-grid span` also captured the inline
   glossary term nested in card 04 — rendering the word "unpaid" as a 30px
   vermilion circle sitting behind the sentence. Any span added inside a card
   would hit the same trap. */
.six-grid article > span { color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .2em; }
.six-grid b { display: block; margin-top: 14px; font-family: var(--display); font-size: var(--t-body); font-weight: 500; letter-spacing: -.02em; }
.six-grid p { margin-top: 10px; color: var(--gray); font-size: var(--t-caption); line-height: 1.7; }
.six-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.six-stats div { border-top: 1px solid rgba(245,242,235,.12); padding-top: 16px; }
.six-stats strong { display: block; font-family: var(--display); font-size: var(--t-h3); font-weight: 500; letter-spacing: -.025em; }
.six-stats strong.hot { color: var(--shu); }
.six-stats em { display: block; margin-top: 9px; color: var(--gray); font-size: var(--t-label); font-style: normal; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; }

/* ---------- design-law vizzes ---------- */
.viz-anchor-conform { display: grid; align-content: center; gap: 7px; }
.viz-anchor-conform i { height: 6px; border-radius: 3px; background: rgba(245,242,235,.16); transform-origin: 0 50%; }
.viz-anchor-conform i.spill { background: rgba(195,21,55,.65); transform: scaleX(1.34); }
.viz-anchor-conform .limit { position: absolute; top: 6%; bottom: 6%; right: 12%; width: 1px; background: rgba(195,21,55,.55); }
.decision-card.is-active .viz-anchor-conform i.spill { transform: scaleX(1); background: rgba(245,242,235,.4); }
.decision-card.is-active .viz-anchor-conform .limit { background: rgba(245,242,235,.3); }

.viz-anchor-source { display: grid; align-content: center; gap: 9px; }
.viz-anchor-source .blk { height: 18px; border-radius: 6px; border: 1px solid rgba(245,242,235,.18); background: rgba(245,242,235,.04); }
.viz-anchor-source .meta { display: grid; gap: 6px; opacity: 0; transform: translateY(-6px); transition: opacity .55s ease .15s, transform .6s cubic-bezier(.2,.8,.2,1) .15s; }
.viz-anchor-source .meta i { height: 5px; border-radius: 3px; background: rgba(245,242,235,.13); }
.viz-anchor-source .meta i:first-child { width: 66%; background: rgba(195,21,55,.55); }
.viz-anchor-source .meta i:nth-child(2) { width: 46%; }
.decision-card.is-active .viz-anchor-source .blk { border-color: var(--shu); }
.decision-card.is-active .viz-anchor-source .meta { opacity: 1; transform: none; }

.viz-anchor-return { display: grid; place-items: center; }
.viz-anchor-return .ring { width: 68px; height: 68px; border-radius: 50%; border: 1px solid rgba(245,242,235,.18); border-top-color: var(--shu); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.viz-anchor-return .score { position: absolute; font-family: var(--display); font-size: var(--t-small); color: var(--gray); opacity: 0; transition: opacity .5s ease .5s, color .5s ease .5s; }
.decision-card.is-active .viz-anchor-return .ring { transform: rotate(300deg); }
.decision-card.is-active .viz-anchor-return .score { opacity: 1; color: var(--ink); }

/* ---------- the decisions that paid ---------- */
.ledger-decisions { max-width: 1280px; margin: 0 auto; padding: 12vh 8vw 6vh; }
.ledger-decisions > h3 { max-width: 18ch; margin-top: 8px; }
.ledger-decisions > .lede { max-width: 58ch; margin-top: 18px; }
.ld-grid { position: relative; display: grid; gap: 14px; margin-top: 54px; }
.ld-grid::before {
  content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(195,21,55,.5), rgba(195,21,55,.06));
  transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.4s cubic-bezier(.2,.8,.2,1);
}
.ld-grid.is-active::before { transform: scaleY(1); }
.ld-card {
  position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 24px;
  padding: 26px 28px; border-radius: 18px; border: 1px solid var(--hairline);
  background: rgba(245,242,235,.014); transition: border-color .4s ease, background .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.ld-card:hover { border-color: rgba(245,242,235,.2); background: rgba(245,242,235,.026); transform: translateY(-3px); }
.ld-no {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  border: 1px solid rgba(195,21,55,.3); background: rgba(195,21,55,.07);
  font-family: var(--display); font-size: var(--t-body); font-weight: 500; color: var(--shu-text);
}
.ld-card h4 { font-family: var(--display); font-weight: 500; font-size: var(--t-h4); letter-spacing: -.025em; }
.ld-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
.ld-rows > div span { display: block; color: var(--gray); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; }
.ld-rows > div p { margin-top: 9px; color: var(--gray); font-size: var(--t-caption); line-height: 1.68; }
.ld-rows > div p b { color: var(--ink); font-weight: 500; }
.ld-out {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(245,242,235,.08);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px;
}
.ld-out em { font-style: normal; font-family: var(--display); font-size: var(--t-h4); font-weight: 500; letter-spacing: -.025em; color: var(--shu); }
.ld-out p { color: var(--gray); font-size: var(--t-caption); line-height: 1.65; max-width: 62ch; }
.ld-out p b { color: var(--ink); font-weight: 500; }

/* ---------- outcome machine ---------- */
.outcome-anchor { position: relative; padding: clamp(96px, 14vh, 160px) 0 clamp(40px, 6vh, 72px); overflow: clip; }
.outcome-anchor .outcome-sticky { max-width: 1280px; margin: 0 auto; padding: 0 8vw; }
.anchor-outcome-layout { display: grid; gap: clamp(46px, 7vh, 82px); margin-top: 8px; }
.outcome-anchor .outcome-copy-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
.outcome-anchor .outcome-step h3 { font-size: var(--t-h4); }
.outcome-anchor .outcome-step p { margin-top: 16px; font-size: var(--t-small); }
@media (max-width: 900px) {
  .outcome-anchor .outcome-copy-stack { grid-template-columns: 1fr; gap: 40px; }
}
.anchor-machine {
  position: relative; padding: 34px; border-radius: 22px;
  border: 1px solid rgba(245,242,235,.1);
  background: radial-gradient(circle at 50% 30%, rgba(245,242,235,.05), transparent 60%), rgba(245,242,235,.016);
}
.am-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.am-row > span { width: 96px; flex: none; color: var(--gray); font-size: var(--t-label); letter-spacing: .13em; text-transform: uppercase; }
.am-bar { position: relative; flex: 1; height: 10px; border-radius: 5px; background: rgba(245,242,235,.07); overflow: hidden; }
.am-bar i { position: absolute; inset: 0; border-radius: 5px; transform-origin: 0 50%; }
.am-bar i.old { background: rgba(245,242,235,.3); }
.am-bar i.new { background: var(--shu); }
.am-row > b { width: 74px; flex: none; text-align: right; font-family: var(--display); font-size: var(--t-small); font-weight: 500; font-variant-numeric: tabular-nums; }
.am-seal { display: flex; align-items: center; gap: 14px; margin: 26px 0 24px; padding-top: 22px; border-top: 1px solid rgba(245,242,235,.08); }
.am-seal .mark { width: 46px; height: 46px; flex: none; opacity: 0; transform: scale(1.6); transition: opacity .4s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.am-seal.on .mark { opacity: 1; transform: none; }
.am-seal .mark svg { width: 100%; height: 100%; }
.am-seal p { color: var(--gray); font-size: var(--t-caption); line-height: 1.6; }
.am-seal p b { color: var(--ink); font-weight: 500; }
.am-impact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.am-impact div { border-top: 1px solid rgba(245,242,235,.1); padding-top: 14px; }
.am-impact strong { display: block; font-family: var(--display); font-size: var(--t-h4); font-weight: 500; letter-spacing: -.025em; }
.am-impact div:first-child strong { color: var(--shu); }
.am-impact span { display: block; margin-top: 7px; color: var(--gray); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; }

/* ---------- voice ---------- */
.outcome-voice--anchor { max-width: 1320px; padding-inline: clamp(24px, 7vw, 92px); }
.outcome-voice--anchor > .kicker { text-align: center; }
.anchor-voice-heading { text-align: center; margin-bottom: 68px; }
.anchor-voice-heading h3 { font-family: var(--display); font-size: var(--t-h2); font-weight: 500; line-height: 1.12; letter-spacing: -.03em; }
.anchor-voice-heading p { margin-top: 18px; color: var(--gray); font-size: var(--t-small); line-height: 1.7; }
.anchor-voice-sequence { display: grid; gap: clamp(48px, 7vh, 92px); }
.anchor-voice { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 70px); align-items: center; text-align: left; }
.anchor-voice:nth-child(even) { grid-template-columns: .9fr 1.1fr; }
.anchor-voice:nth-child(even) .anchor-voice-copy { order: 2; }
.anchor-voice-label { color: var(--shu-text); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; }
.anchor-voice-label span { color: var(--gray); margin-right: 8px; }
.anchor-voice blockquote { margin-top: 26px; }
.anchor-voice blockquote p { font-family: var(--display); font-size: var(--t-h3); line-height: 1.26; letter-spacing: -.025em; text-wrap: balance; }
.anchor-voice cite { display: block; margin-top: 22px; color: var(--shu-text); font-size: var(--t-label); font-style: normal; letter-spacing: .2em; text-transform: uppercase; }
.anchor-voice-viz {
  position: relative; min-height: 210px; padding: 26px; border-radius: 20px;
  border: 1px solid rgba(245,242,235,.1); background: rgba(245,242,235,.016);
  display: grid; align-content: center; gap: 12px;
}
.avv-track { position: relative; height: 3px; border-radius: 3px; background: rgba(245,242,235,.1); }
.avv-track i { position: absolute; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--canvas); border: 2px solid rgba(245,242,235,.28); left: var(--x); }
.avv-track i.on { border-color: var(--shu); background: var(--shu); box-shadow: 0 0 10px rgba(195,21,55,.55); }
.avv-legend { display: flex; justify-content: space-between; color: var(--gray); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; }
.avv-legend b { color: var(--ink); font-weight: 500; }
.avv-fade { color: var(--gray); font-size: var(--t-caption); line-height: 1.6; opacity: .45; }
.avv-page { display: grid; gap: 6px; }
.avv-page i { height: 6px; border-radius: 3px; background: rgba(245,242,235,.15); }
.avv-page i.full { background: rgba(245,242,235,.34); }
.avv-page i.blocked { background: rgba(195,21,55,.6); width: 62%; }
.avv-state { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--gray); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; }
.avv-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--shu); box-shadow: 0 0 9px rgba(195,21,55,.6); }
.avv-cite { display: grid; gap: 8px; }
.avv-cite > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 9px; border: 1px solid rgba(245,242,235,.1); background: rgba(245,242,235,.02); }
.avv-cite span { color: var(--gray); font-size: var(--t-caption); letter-spacing: .06em; }
.avv-cite b { font-family: var(--display); font-size: var(--t-caption); font-weight: 500; }
.avv-band { position: relative; height: 26px; margin-top: 6px; }
.avv-band .rail2 { position: absolute; left: 0; right: 0; top: 12px; height: 2px; background: rgba(245,242,235,.1); }
.avv-band .span { position: absolute; top: 8px; height: 10px; left: 26%; right: 26%; border-radius: 5px; background: rgba(195,21,55,.35); border: 1px solid rgba(195,21,55,.55); }

/* ---------- impact ---------- */
.anchor-impact { max-width: 1080px; margin: 0 auto; padding: 4vh 8vw 16vh; text-align: center; }
.anchor-impact-statement span { display: block; color: var(--gray); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; }
.anchor-impact-statement strong { display: block; margin-top: 20px; font-family: var(--display); font-size: clamp(66px, 12vw, 168px); font-weight: 500; line-height: .92; letter-spacing: -.045em; color: var(--shu); }
.anchor-impact-statement p { margin-top: 18px; color: var(--gray); font-size: var(--t-small); letter-spacing: .04em; }
.anchor-impact-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 620px; margin: 60px auto 0; }
.anchor-impact-pair div { border-top: 1px solid rgba(245,242,235,.12); padding-top: 18px; }
.anchor-impact-pair strong { display: block; font-family: var(--display); font-size: var(--t-h3); font-weight: 500; letter-spacing: -.03em; }
.anchor-impact-pair span { display: block; margin-top: 10px; color: var(--gray); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- media placeholder, until real screens land ---------- */
.media-pending {
  position: relative; display: grid; place-items: center; gap: 10px;
  min-height: 260px; padding: 30px; text-align: center;
  border: 1px dashed rgba(245,242,235,.16); border-radius: 12px;
  background: repeating-linear-gradient(135deg, rgba(245,242,235,.018) 0 10px, transparent 10px 20px);
}
.media-pending b { font-family: var(--display); font-size: var(--t-small); font-weight: 500; color: var(--gray); letter-spacing: -.01em; }
.media-pending span { color: var(--gray); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.strip .cell .media-pending { min-height: 200px; border: 0; border-radius: 0; }

/* ---------- home: pursuit-capacity miniviz ---------- */
.mv-pursuits { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 74px; }
.mv-pursuits i { flex: 1; border-radius: 2px; background: rgba(245,242,235,.22); height: calc(42% + var(--h, 0) * 5%); transform-origin: 50% 100%; }
.mv-pursuits i.add { background: var(--shu); transform: scaleY(0); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .six-grid { grid-template-columns: repeat(2, 1fr); }
  .anchor-outcome-layout { grid-template-columns: 1fr; }
  .ld-rows { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 760px) {
  .six-grid { grid-template-columns: 1fr; }
  .six-stats { grid-template-columns: repeat(2, 1fr); }
  .am-impact { grid-template-columns: repeat(2, 1fr); }
  .anchor-impact-pair { grid-template-columns: 1fr; }
  .ld-card { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px; }
  .ld-grid::before { display: none; }
  .anchor-voice, .anchor-voice:nth-child(even) { grid-template-columns: 1fr; }
  .anchor-voice:nth-child(even) .anchor-voice-copy { order: 0; }
  .dl-frags span { font-size: var(--t-caption); padding: 5px 9px; }
  .dl-doc { width: min(340px, 86vw); }
}

/* ---------- reduced motion: resolve every anchor scene ---------- */
@media (prefers-reduced-motion: reduce) {
  .case-emblem--anchor .em-a-frag,
  .case-emblem--anchor .em-a-page,
  .case-emblem--anchor .em-a-seal { opacity: 1; transform: none; transition: none; }
  .case-emblem--anchor .em-a-frag { opacity: .5; }
  .dl-frags span { opacity: 1; transform: none; }
  .dl-dq { opacity: 1; transform: none; }
  .dl-punch, .dl-resolve { position: relative; inset: auto; opacity: 1; background: none; margin-top: 40px; }
  .deadline-stage { height: auto; padding: 14vh 0; gap: 30px; }
  .ld-grid::before { transform: scaleY(1); }
  .am-seal .mark { opacity: 1; transform: none; }
  .mv-pursuits i.add { transform: none; }
  .viz-anchor-source .meta { opacity: 1; transform: none; }
}

/* ================================================================
   v0.105 — ANCHOR: AI anatomy section, wireframe placeholders,
   deadline-scene density fixes. Additive only.
   ================================================================ */

/* ---------- wireframes: neutral, deliberate, not "pending" ---------- */
.wf {
  display: grid; gap: 9px; align-content: start;
  padding: 16px; min-height: 236px; background: #101014;
}
.wf i, .wf b, .wf u { display: block; border-radius: 3px; background: rgba(245,242,235,.13); }
.wf b { background: rgba(245,242,235,.24); }
.wf u { background: rgba(195,21,55,.55); }
.wf .wf-top { display: flex; align-items: center; gap: 8px; padding-bottom: 11px; border-bottom: 1px solid rgba(245,242,235,.07); }
.wf .wf-top i { height: 7px; flex: 1; }
.wf .wf-top b { height: 7px; width: 62px; flex: none; }
.wf .wf-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wf .wf-tiles > div { padding: 10px 9px; border-radius: 6px; background: rgba(245,242,235,.035); display: grid; gap: 7px; }
.wf .wf-tiles i { height: 5px; width: 70%; }
.wf .wf-tiles b { height: 11px; width: 44%; }
.wf .wf-tiles u { height: 11px; width: 44%; }
.wf .wf-rows { display: grid; gap: 7px; }
.wf .wf-rows > div { display: flex; align-items: center; gap: 9px; }
.wf .wf-rows > div > i:first-child { height: 6px; width: 26px; flex: none; }
.wf .wf-rows > div > i:last-child, .wf .wf-rows > div > u:last-child { height: 6px; flex: 1; }
.wf .wf-cols { display: grid; grid-template-columns: 62px 1fr 78px; gap: 12px; }
.wf .wf-cols > div { display: grid; gap: 7px; align-content: start; }
.wf .wf-cols i { height: 6px; }
.wf .wf-meter { position: relative; height: 7px; border-radius: 4px; background: rgba(245,242,235,.09); overflow: hidden; }
.wf .wf-meter u { position: absolute; right: 0; top: 0; bottom: 0; width: 12%; border-radius: 0 4px 4px 0; }
.wf .wf-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 88%; border-radius: 4px 0 0 4px; background: rgba(245,242,235,.3); }
.wf .wf-big { height: 26px; width: 46%; background: rgba(245,242,235,.28); border-radius: 4px; }
.wf .wf-band { position: relative; height: 9px; border-radius: 5px; background: rgba(245,242,235,.08); }
.wf .wf-band u { position: absolute; left: 27%; right: 27%; top: 0; bottom: 0; border-radius: 5px; }
.wf-label { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-top: 1px solid rgba(245,242,235,.07); color: var(--gray); font-size: var(--t-label); letter-spacing: .13em; text-transform: uppercase; }
.wf-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(245,242,235,.28); flex: none; }
.strip .cell .wf { min-height: 200px; }
.strip.wide .cell .wf { min-height: 300px; }

/* ---------- AI ANATOMY ---------- */
.ai-anatomy { max-width: 1280px; margin: 0 auto; padding: 13vh 8vw 4vh; }
.ai-anatomy > h3 { max-width: 19ch; margin-top: 8px; }
.ai-anatomy > .lede { max-width: 60ch; margin-top: 18px; }

/* the autonomy lanes */
.ai-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.ai-lane {
  position: relative; padding: 26px 22px 24px; border-radius: 18px;
  border: 1px solid var(--hairline); background: rgba(245,242,235,.014); overflow: hidden;
}
.ai-lane--never { border-color: rgba(195,21,55,.3); background: rgba(195,21,55,.035); }
.ai-lane-head { display: grid; gap: 9px; padding-bottom: 20px; border-bottom: 1px solid rgba(245,242,235,.08); }
.ai-lane-head span { color: var(--gray); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; }
.ai-lane--never .ai-lane-head span { color: var(--shu); }
.ai-lane-head b { font-family: var(--display); font-size: var(--t-h4); font-weight: 500; letter-spacing: -.025em; }
.ai-lane-head em { font-style: normal; color: var(--gray); font-size: var(--t-caption); line-height: 1.6; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ai-chip {
  padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(245,242,235,.14);
  background: rgba(245,242,235,.03); color: var(--gray); font-size: var(--t-caption); letter-spacing: .01em;
  white-space: nowrap;
}
.ai-lane--never .ai-chip { border-color: rgba(195,21,55,.34); color: rgba(245,242,235,.75); }
.ai-lane-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(245,242,235,.08); color: var(--gray); font-size: var(--t-caption); line-height: 1.65; }
.ai-lane-foot b { color: var(--ink); font-weight: 500; }

/* the routing ledger */
.ai-routing { margin-top: 60px; padding: 32px; border-radius: 20px; border: 1px solid var(--hairline); background: rgba(245,242,235,.014); }
.ai-routing h4 { font-family: var(--display); font-size: var(--t-h4); font-weight: 500; letter-spacing: -.025em; }
.ai-routing > p { margin-top: 12px; max-width: 62ch; color: var(--gray); font-size: var(--t-caption); line-height: 1.7; }
.ai-split { display: flex; height: 46px; margin-top: 30px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(245,242,235,.1); }
.ai-split > div { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: var(--t-caption); letter-spacing: .06em; transform-origin: 0 50%; overflow: hidden; white-space: nowrap; }
.ai-split .small { flex: 0 0 85%; background: rgba(245,242,235,.07); color: var(--gray); }
.ai-split .large { flex: 0 0 15%; background: rgba(195,21,55,.24); color: var(--ink); border-left: 1px solid rgba(195,21,55,.5); }
.ai-split b { font-family: var(--display); font-weight: 500; font-size: var(--t-small); color: var(--ink); }
.ai-route-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 22px; }
.ai-route-legend > div span { display: block; color: var(--gray); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; }
.ai-route-legend > div p { margin-top: 10px; color: var(--gray); font-size: var(--t-caption); line-height: 1.68; }
.ai-cost { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(245,242,235,.08); }
.ai-cost strong { font-family: var(--display); font-size: var(--t-h3); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ai-cost strong.hot { color: var(--shu); }
.ai-cost .arrow { color: var(--gray); font-size: var(--t-lede); }
.ai-cost p { color: var(--gray); font-size: var(--t-caption); line-height: 1.65; max-width: 46ch; }
.ai-cost p b { color: var(--ink); font-weight: 500; }

/* when the model is wrong */
.ai-wrong { margin-top: 60px; }
.ai-wrong > .kicker { margin-bottom: 26px; }
.ai-wrong-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ai-fail {
  position: relative; padding: 26px 24px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--hairline); background: rgba(245,242,235,.014);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s ease;
}
.ai-fail:hover { transform: translateY(-4px); border-color: rgba(245,242,235,.2); }
.ai-fail-when span { color: var(--shu-text); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; }
.ai-fail-when b { display: block; margin-top: 13px; font-family: var(--display); font-size: var(--t-body); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.ai-fail-when p { margin-top: 10px; color: var(--gray); font-size: var(--t-caption); line-height: 1.68; }
.ai-fail-rule {
  position: relative; height: 1px; margin: 22px 0; background: rgba(245,242,235,.1);
}
.ai-fail-rule::after {
  content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%;
  background: var(--shu); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.ai-fail.is-on .ai-fail-rule::after { transform: scaleX(1); }
.ai-fail-built span { color: var(--gray); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; }
.ai-fail-built p { margin-top: 12px; color: var(--gray); font-size: var(--t-caption); line-height: 1.7; }
.ai-fail-built p b { color: var(--ink); font-weight: 500; }

/* ---------- deadline scene: density + overlap guards ---------- */
.dl-clock .lbl { line-height: 1.4; }
.dl-clock { font-variant-numeric: tabular-nums; }
@media (max-height: 780px) {
  .dl-clock { font-size: clamp(38px, 6.5vw, 76px); }
  .dl-doc { margin-top: 22px; padding: 13px; }
  .dl-doc .sec { margin-bottom: 8px; }
  .dl-dq { bottom: 7%; padding: 10px 16px; }
}
@media (max-height: 620px) {
  .dl-doc { display: none; }
  .dl-status { margin-top: 14px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .ai-lanes { grid-template-columns: 1fr; }
  .ai-wrong-grid { grid-template-columns: 1fr; }
  .ai-route-legend { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 760px) {
  .ai-routing { padding: 24px 20px; }
  .ai-split { height: 40px; }
  .ai-split .small, .ai-split .large { font-size: var(--t-caption); }
  .am-row > span { width: 74px; font-size: var(--t-caption); }
  .am-row > b { width: 58px; font-size: var(--t-caption); }
  .wf { min-height: 190px; padding: 13px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ai-chip { transform: none !important; opacity: 1 !important; }
  .ai-fail .ai-fail-rule::after { transform: scaleX(1); }
}

/* ================================================================
   v0.106 — ANCHOR format fixes. Three base-rule conflicts.

   1. `.decision-viz i` sets position:absolute for the older node/layer/flow
      vizzes. My anchor vizzes lay their <i> out in flow, and never reset it,
      so every bar stacked at the same point. Reset explicitly.
   2. `.anchor-six`, `.ai-anatomy` and `.ledger-decisions` are not `.act`,
      so `.act h3` and `.act .lede` never reached them. Their headings and
      ledes were rendering at browser defaults in the wrong family and size.
   3. `.compass-viz` is 46px in the base. Three anchor variants overrode it
      to 40px, so they sat lower than the same element on the other cases.
   ================================================================ */

/* --- 1. flow layout inside the anchor decision vizzes --- */
.viz-anchor-conform i,
.viz-anchor-source .blk,
.viz-anchor-source .meta,
.viz-anchor-source .meta i { position: static; }
.viz-anchor-conform,
.viz-anchor-source { align-content: center; }

/* --- 2. heading and lede typography for the non-.act sections --- */
.anchor-six > h3,
.ai-anatomy > h3,
.ledger-decisions > h3 {
  font-family: var(--display); font-weight: 500; letter-spacing: -.025em;
  font-size: var(--t-h2); line-height: 1.12; text-wrap: balance;
}
.anchor-six > .lede,
.ai-anatomy > .lede,
.ledger-decisions > .lede {
  margin-top: 20px; color: var(--gray); font-size: var(--t-small); line-height: 1.8;
}
.anchor-six > .lede b,
.ai-anatomy > .lede b,
.ledger-decisions > .lede b { color: var(--ink); font-weight: 500; }

/* match the vertical rhythm of .act so section spacing is uniform */
.anchor-six { padding: clamp(110px, 15vh, 190px) 8vw clamp(40px, 6vh, 70px); }
.ai-anatomy { padding: clamp(110px, 15vh, 190px) 8vw clamp(40px, 6vh, 70px); }
.ledger-decisions { padding: clamp(110px, 15vh, 190px) 8vw clamp(50px, 7vh, 90px); }

/* --- 3. compass viz height back to the shared 46px --- */
.compass-viz--anchor-dq,
.compass-viz--anchor-frame,
.compass-viz--anchor-capacity { height: 46px; }

/* --- consistency pass: stat and label scales aligned to the base idioms --- */
.six-stats strong { font-size: var(--t-h3); letter-spacing: -.03em; }
.six-stats em { font-size: var(--t-caption); }
.six-grid b { font-size: var(--t-lede); }
.ai-fail-when b { font-size: var(--t-lede); }
.ld-card h4 { font-size: var(--t-h4); }
.ai-routing h4 { font-size: var(--t-h4); }
.ai-lane-head b { font-size: var(--t-h4); }
.ai-lane-head em,
.ai-lane-foot,
.ai-route-legend > div p,
.ai-fail-built p,
.ld-rows > div p { font-size: var(--t-caption); line-height: 1.7; }
.six-grid p,
.ai-fail-when p { font-size: var(--t-caption); line-height: 1.7; }

/* small-label scale, shared by every new eyebrow */
.six-grid article > span,
.ai-lane-head span,
.ai-route-legend > div span,
.ai-fail-when span,
.ai-fail-built span,
.ld-rows > div span,
.anchor-voice-label { font-size: var(--t-caption); letter-spacing: .18em; }

/* --- guard: the AI lanes must not clip a chip at rest --- */
.ai-lane { min-height: 340px; display: flex; flex-direction: column; }
.ai-chips { flex: 1; align-content: flex-start; }

@media (max-width: 1000px) {
  .ai-lane { min-height: 0; }
}

/* --- v0.106b: eyebrow labels onto the site's two existing scales.
   10px + .18em for eyebrows, 11.5px for captions (matching .figcap). --- */
.am-row > span,
.am-impact span,
.avv-legend,
.avv-state { font-size: var(--t-caption); letter-spacing: .16em; }
.wf-label { font-size: var(--t-caption); letter-spacing: .1em; }
.six-stats em,
.anchor-impact-pair span { font-size: var(--t-caption); letter-spacing: .1em; }

/* --- v0.106c: the 15% routing segment is too narrow for a word on phones.
   Drop the labels, keep the percentages. --- */
@media (max-width: 620px) {
  .ai-split > div { font-size: 0; }
  .ai-split b { font-size: var(--t-caption); }
}

/* ================================================================
   v0.107 — ANCHOR strip band raised to 280px.

   The mockups exposed a bad assumption in the 200px band. With a
   56px product top bar, 200px fits a header plus two or three table
   rows, which is not enough to show a table doing anything. 280px
   clears a header plus five rows and keeps the strip rhythm close to
   the other case studies. Scoped to .case-anchor so the Amazon and
   PNC strips are untouched.
   ================================================================ */
.case-anchor .strip .cell img,
.case-anchor .strip .cell video { height: 280px; object-fit: cover; object-position: top; }
.case-anchor .strip.wide .cell img,
.case-anchor .strip.wide .cell video { height: 380px; }
.case-anchor .strip .cell .wf { min-height: 280px; }
.case-anchor .strip.wide .cell .wf { min-height: 380px; }

@media (max-width: 760px) {
  .case-anchor .strip .cell img,
  .case-anchor .strip .cell video,
  .case-anchor .strip .cell .wf { height: auto; min-height: 210px; }
}

/* ================================================================
   v0.108 — ANCHOR responsive geometry + shorter hour-only deadline.

   The suite collapses to one column at 900px, so its connective brush
   must turn with it. The deadline fragments also need dedicated edge
   bands once the viewport is too narrow to leave a safe side gutter.
   ================================================================ */
@media (max-width: 900px) {
  .case-anchor .journey--suite .jline.jline--4 {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 50px;
  }
  .case-anchor .journey--suite .jline .jbrush {
    display: block;
    top: 10px;
    right: auto;
    bottom: 12px;
    left: 1px;
    width: 20px;
    height: auto;
  }
  .case-anchor .journey--suite .jline .jbrush span {
    background-image: url("../media/brand/sumi-brush-vertical-v1.png") !important;
    background-position: center !important;
    background-size: 100% 100% !important;
  }
  .case-anchor .journey--suite .jline .jbrush.anim .fill {
    clip-path: none;
    transform: scaleX(1) scaleY(0);
    transform-origin: center top;
  }
  .case-anchor .journey--suite .jstage {
    min-height: 150px;
    padding: 8px 0 42px 54px;
    text-align: left;
  }
  .case-anchor .journey--suite .jstage:last-child {
    min-height: 0;
    padding-bottom: 8px;
  }
  .case-anchor .journey--suite .jstage .dot {
    display: block;
    top: 18px;
    left: 11px;
  }
  .case-anchor .journey--suite .jstage p {
    margin-right: 0;
    margin-left: 0;
  }

  /* With no side gutter, decorative fragments occupy only the clear
     bands above and below the central clock/document composition. */
  .case-anchor .dl-frags span:nth-child(1) { top: 11% !important; left: 4% !important; }
  .case-anchor .dl-frags span:nth-child(2) { top: 19% !important; right: 4% !important; }
  .case-anchor .dl-frags span:nth-child(3) { top: 27% !important; left: 3% !important; }
  .case-anchor .dl-frags span:nth-child(6) { top: 74% !important; left: 3% !important; }
  .case-anchor .dl-frags span:nth-child(7) { top: 84% !important; right: 5% !important; }
  .case-anchor .dl-frags span:nth-child(4),
  .case-anchor .dl-frags span:nth-child(5),
  .case-anchor .dl-frags span:nth-child(8) { display: none; }
}

/* ================================================================
   v0.109 — ANCHOR Apple-calibrated hierarchy + collision repairs.

   Important numerals remain atomic; supporting labels reflow around
   them. Decorative card graphics participate in layout instead of
   occupying the same absolute layer as body copy. The AI chapter gets
   a distinct full-width operating-system surface so it reads as the
   differentiator rather than another set of feature cards.
   ================================================================ */

/* 60-second read: keep every mini-visual in document flow. */
.case-anchor .case-compass-grid article {
  display: flex;
  min-height: 380px;
  flex-direction: column;
}
.case-anchor .case-compass-grid p { margin-bottom: 26px; }
.case-anchor .case-compass-grid .compass-viz {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  flex: none;
  margin-top: auto;
}

/* Comparison figures are one semantic unit; labels may wrap beside them. */
.case-anchor .chapter-grid .metric { flex-wrap: wrap; }
.case-anchor .chapter-grid .metric .n {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.case-anchor .chapter-grid .metric .l {
  min-width: min(100%, 18ch);
  flex: 1 1 18ch;
  line-height: 1.5;
}

/* The vermilion rule is a connector between markers, not ink through them. */
.case-anchor .ld-grid::before { left: 54px; }
.case-anchor .ld-no {
  position: relative;
  z-index: 1;
  background: linear-gradient(rgba(195,21,55,.08), rgba(195,21,55,.08)), #101012;
}

/* AI operating system: one chapter-sized world, one unified decision surface. */
.case-anchor .ai-anatomy {
  position: relative;
  max-width: none;
  margin-top: clamp(70px, 9vh, 120px);
  padding: clamp(110px, 15vh, 190px) 0 clamp(110px, 15vh, 190px);
  overflow: clip;
  border-top: 1px solid rgba(245,242,235,.11);
  border-bottom: 1px solid rgba(245,242,235,.11);
  background:
    radial-gradient(75% 46% at 14% 16%, rgba(195,21,55,.14), transparent 62%),
    radial-gradient(62% 52% at 88% 72%, rgba(245,242,235,.065), transparent 68%),
    linear-gradient(180deg, #0d0d10 0%, #111115 46%, #0a0a0c 100%);
  isolation: isolate;
}
.case-anchor .ai-anatomy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  background-image:
    linear-gradient(rgba(245,242,235,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,242,235,.035) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000, transparent 78%);
  mask-image: radial-gradient(circle at 50% 42%, #000, transparent 78%);
}
.case-anchor .ai-intro,
.case-anchor .ai-lanes,
.case-anchor .ai-routing,
.case-anchor .ai-wrong {
  width: min(1280px, 84vw);
  margin-right: auto;
  margin-left: auto;
}
.case-anchor .ai-intro {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  gap: clamp(34px, 7vw, 104px);
  align-items: end;
}
.case-anchor .ai-signature {
  position: relative;
  display: flex;
  min-height: 300px;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(26px, 3vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(245,242,235,.14);
  border-radius: 32px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.015) 48%),
    rgba(8,8,9,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 44px 110px rgba(0,0,0,.32);
}
.case-anchor .ai-signature::after {
  content: "";
  position: absolute;
  right: -28%;
  bottom: -36%;
  width: 80%;
  aspect-ratio: 1;
  border: 1px solid rgba(195,21,55,.42);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(195,21,55,.18);
}
.case-anchor .ai-signature span {
  font-family: var(--display);
  font-size: clamp(110px, 14vw, 190px);
  font-weight: 500;
  line-height: .72;
  letter-spacing: -.09em;
  color: var(--ink);
}
.case-anchor .ai-signature em {
  position: relative;
  z-index: 1;
  color: var(--shu-text);
  font-size: var(--t-label);
  font-style: normal;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.case-anchor .ai-intro-copy .kicker { margin: 0 0 26px; }
.case-anchor .ai-intro-copy h3 {
  max-width: 12ch;
  font-family: var(--display);
  font-size: clamp(46px, 6.9vw, 92px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.case-anchor .ai-intro-copy .lede {
  max-width: 58ch;
  margin-top: 28px;
  color: var(--gray);
  font-size: var(--t-body);
  line-height: 1.8;
}
.case-anchor .ai-intro-copy .lede b { color: var(--ink); font-weight: 500; }
.case-anchor .ai-lanes {
  gap: 0;
  margin-top: clamp(64px, 8vh, 100px);
  overflow: hidden;
  border: 1px solid rgba(245,242,235,.13);
  border-radius: 30px;
  background: rgba(8,8,10,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 110px rgba(0,0,0,.24);
}
.case-anchor .ai-lane {
  min-height: 390px;
  padding: clamp(28px, 3vw, 40px);
  border: 0;
  border-radius: 0;
  background: transparent;
}
.case-anchor .ai-lane + .ai-lane { border-left: 1px solid rgba(245,242,235,.1); }
.case-anchor .ai-lane--never {
  background: linear-gradient(180deg, rgba(195,21,55,.075), rgba(195,21,55,.025));
}
.case-anchor .ai-routing {
  margin-top: 28px;
  padding: clamp(30px, 4vw, 54px);
  border-radius: 30px;
  background: rgba(8,8,10,.56);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.case-anchor .ai-wrong { margin-top: clamp(74px, 10vh, 120px); }
.case-anchor .ai-fail { border-radius: 24px; background: rgba(8,8,10,.42); }

/* The financial figure is an explicit estimate, with its method attached. */
.case-anchor .anchor-impact-pair {
  grid-template-columns: repeat(3, 1fr);
  max-width: 900px;
}
.case-anchor .anchor-impact-method {
  max-width: 66ch;
  margin: 26px auto 0;
  color: var(--gray);
  font-size: var(--t-caption);
  line-height: 1.65;
  letter-spacing: .03em;
}

@media (max-width: 1000px) {
  .case-anchor .ai-intro { grid-template-columns: 1fr; }
  .case-anchor .ai-signature { min-height: 230px; }
  .case-anchor .ai-lane { min-height: 0; }
  .case-anchor .ai-lane + .ai-lane {
    border-top: 1px solid rgba(245,242,235,.1);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .case-anchor .case-compass-grid article { min-height: 0; }
  .case-anchor .chapter-grid .metric {
    display: grid;
    gap: 8px;
  }
  .case-anchor .chapter-grid .metric .n { font-size: var(--t-h3); }
  .case-anchor .ai-anatomy { padding-block: 96px; }
  .case-anchor .ai-intro,
  .case-anchor .ai-lanes,
  .case-anchor .ai-routing,
  .case-anchor .ai-wrong { width: min(88vw, 620px); }
  .case-anchor .ai-signature {
    min-height: 190px;
    border-radius: 26px;
  }
  .case-anchor .anchor-impact-pair { grid-template-columns: 1fr; }
  .case-anchor .ai-intro-copy h3 { font-size: var(--t-h3); }
  .case-anchor .ai-lanes,
  .case-anchor .ai-routing { border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .case-anchor .ai-anatomy::before { opacity: .16; }
}

/* ================================================================
   v0.110 — ANCHOR editorial fields, soft AI transition, decision log.

   The page now groups related information with rhythm, scale, shared
   planes, and dividers. Content cards no longer need a rounded border
   around every idea. Product mockups and interactive glass controls
   keep their containers because those boundaries carry meaning.
   ================================================================ */

/* One editorial triptych instead of three isolated summary cards. */
.case-anchor .case-compass-grid {
  gap: 0;
  border-top: 1px solid rgba(245,242,235,.13);
  border-bottom: 1px solid rgba(245,242,235,.13);
}
.case-anchor .case-compass-grid::before { display: none; }
.case-anchor .case-compass-grid article {
  min-height: 370px;
  padding: clamp(30px, 3.5vw, 46px);
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.case-anchor .case-compass-grid article::before { display: none; }
.case-anchor .case-compass-grid article + article {
  border-left: 1px solid rgba(245,242,235,.11);
}

/* Six failures read as evidence notes, not six interchangeable cards. */
.case-anchor .six-grid {
  gap: 0 clamp(34px, 5vw, 72px);
}
.case-anchor .six-grid article {
  position: relative;
  padding: 30px 0 38px 52px;
  border: 0;
  border-top: 1px solid rgba(245,242,235,.12);
  border-radius: 0;
  background: none;
  transition: none;
}
.case-anchor .six-grid article:hover {
  border-color: rgba(245,242,235,.12);
  transform: none;
}
.case-anchor .six-grid article > span {
  position: absolute;
  top: 31px;
  left: 0;
  color: rgba(195,21,55,.76);
}
.case-anchor .six-grid b { margin-top: 0; }

/* Research laws share a single plane and use dividers for comparison. */
.case-anchor .decision-grid {
  gap: 0;
  border-top: 1px solid rgba(245,242,235,.13);
  border-bottom: 1px solid rgba(245,242,235,.13);
}
.case-anchor .decision-grid::before,
.case-anchor .decision-grid::after { display: none; }
.case-anchor .decision-card {
  min-height: 340px;
  padding: 38px clamp(28px, 3vw, 44px);
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transition: none;
}
.case-anchor .decision-card + .decision-card {
  border-left: 1px solid rgba(245,242,235,.11);
}
.case-anchor .decision-card::before,
.case-anchor .decision-card::after { display: none; }
.case-anchor .decision-card:hover {
  border-color: transparent;
  background: none;
  transform: none;
}

/* AI fades through a neutral ink field; no colored glow or tech grid. */
.case-anchor .ai-anatomy {
  margin-top: 0;
  padding-top: clamp(190px, 24vh, 280px);
  padding-bottom: clamp(190px, 24vh, 280px);
  border: 0;
  background: #0d0d0f;
}
.case-anchor .ai-anatomy::before,
.case-anchor .ai-anatomy::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  left: 0;
  height: clamp(190px, 24vh, 280px);
  pointer-events: none;
  opacity: 1;
  background-size: auto;
  -webkit-mask-image: none;
  mask-image: none;
}
.case-anchor .ai-anatomy::before {
  top: 0;
  background: linear-gradient(180deg, var(--canvas), rgba(8,8,9,.84) 25%, rgba(13,13,15,0));
}
.case-anchor .ai-anatomy::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--canvas), rgba(8,8,9,.84) 25%, rgba(13,13,15,0));
}
.case-anchor .ai-anatomy > * {
  position: relative;
  z-index: 1;
}

/* A consequence boundary replaces the generic AI monogram card. */
.case-anchor .ai-boundary-figure {
  position: relative;
  min-height: 360px;
  padding: 8px 0 0;
}
.case-anchor .aib-axis {
  display: flex;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(245,242,235,.14);
  color: var(--gray);
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.case-anchor .aib-field {
  position: relative;
  display: grid;
  min-height: 280px;
  grid-template-columns: 1fr 34px 1fr;
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
}
.case-anchor .aib-tier {
  display: grid;
  gap: 3px;
}
.case-anchor .aib-tier b {
  font-family: var(--display);
  font-size: clamp(38px, 4.6vw, 62px);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.055em;
}
.case-anchor .aib-tier span {
  color: var(--gray);
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.case-anchor .aib-tier--act {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}
.case-anchor .aib-tier--draft {
  z-index: 2;
  grid-column: 1 / 4;
  grid-row: 2;
  justify-self: center;
  padding: 8px 16px 10px;
  background: #0d0d0f;
  text-align: center;
}
.case-anchor .aib-tier--commit {
  grid-column: 3;
  grid-row: 3;
  align-self: start;
  justify-self: end;
  text-align: right;
}
.case-anchor .aib-tier--commit b { color: var(--shu); }
.case-anchor .aib-boundary {
  position: relative;
  display: grid;
  grid-column: 2;
  grid-row: 1 / 4;
  height: 100%;
  place-items: center;
}
.case-anchor .aib-boundary i {
  width: 15px;
  height: 102%;
  background: var(--shu);
  transform: rotate(8deg) scaleY(.96);
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
}
.case-anchor .aib-boundary em {
  position: absolute;
  bottom: 14px;
  left: 50%;
  color: rgba(195,21,55,.78);
  font-size: var(--t-label);
  font-style: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-42%) rotate(90deg);
  transform-origin: 0 50%;
}
.case-anchor .ai-boundary-figure > p {
  padding-top: 15px;
  border-top: 1px solid rgba(245,242,235,.14);
  color: var(--gray);
  font-size: var(--t-caption);
  letter-spacing: .04em;
}

/* AI details become an editorial field with dividers, not nested cards. */
.case-anchor .ai-lanes {
  overflow: visible;
  border: 0;
  border-top: 1px solid rgba(245,242,235,.14);
  border-bottom: 1px solid rgba(245,242,235,.14);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.case-anchor .ai-lane {
  padding: clamp(34px, 3.5vw, 50px);
  background: none;
}
.case-anchor .ai-lane--never { background: none; }
.case-anchor .ai-routing {
  padding: clamp(46px, 6vw, 76px) 0;
  border: 0;
  border-bottom: 1px solid rgba(245,242,235,.14);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.case-anchor .ai-wrong-grid {
  gap: 0;
  border-top: 1px solid rgba(245,242,235,.14);
  border-bottom: 1px solid rgba(245,242,235,.14);
}
.case-anchor .ai-fail {
  padding: clamp(32px, 3vw, 44px);
  border: 0;
  border-radius: 0;
  background: none;
  transition: none;
}
.case-anchor .ai-fail + .ai-fail {
  border-left: 1px solid rgba(245,242,235,.1);
}
.case-anchor .ai-fail:hover {
  border-color: transparent;
  transform: none;
}

/* Decisions become an editorial log with a sticky index and open pages. */
.case-anchor .ledger-decisions {
  max-width: 1380px;
  padding-top: clamp(150px, 19vh, 230px);
}
.case-anchor .ld-grid {
  display: grid;
  grid-template-columns: minmax(150px, .24fr) minmax(0, 1fr);
  gap: clamp(44px, 7vw, 108px);
  margin-top: clamp(70px, 9vh, 110px);
}
.case-anchor .ld-grid::before { display: none; }
.case-anchor .ld-index {
  position: sticky;
  top: 126px;
  align-self: start;
}
.case-anchor .ld-index > span {
  display: block;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(245,242,235,.14);
  color: var(--gray);
  font-size: var(--t-label);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.case-anchor .ld-index ol {
  position: relative;
  display: grid;
  gap: 18px;
  margin-top: 24px;
  padding-left: 0;
  list-style: none;
}
.case-anchor .ld-index ol::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 12px;
  width: 1px;
  background: rgba(195,21,55,.5);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 1.3s cubic-bezier(.2,.8,.2,1);
}
.case-anchor .ld-grid.is-active .ld-index ol::before { transform: scaleY(1); }
.case-anchor .ld-index li {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: baseline;
}
.case-anchor .ld-index li::before {
  content: "";
  position: absolute;
  top: .48em;
  left: 8px;
  z-index: 1;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #0d0d0f;
  border: 1px solid rgba(195,21,55,.7);
}
.case-anchor .ld-index b {
  color: transparent;
  font-size: 1px;
}
.case-anchor .ld-index em {
  color: var(--gray);
  font-size: var(--t-caption);
  font-style: normal;
  letter-spacing: .04em;
}
.case-anchor .ld-sequence {
  min-width: 0;
  border-top: 1px solid rgba(245,242,235,.16);
}
.case-anchor .ld-card {
  display: grid;
  grid-template-columns: minmax(76px, .13fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 58px);
  padding: clamp(54px, 7vh, 82px) 0 clamp(68px, 9vh, 104px);
  border: 0;
  border-bottom: 1px solid rgba(245,242,235,.14);
  border-radius: 0;
  background: none;
  transition: none;
}
.case-anchor .ld-card:hover {
  border-color: rgba(245,242,235,.14);
  background: none;
  transform: none;
}
.case-anchor .ld-no {
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: clamp(46px, 5.5vw, 76px);
  line-height: .85;
  letter-spacing: -.06em;
  color: rgba(195,21,55,.38);
}
.case-anchor .ld-card h4 {
  max-width: 24ch;
  font-size: var(--t-h3);
  line-height: 1.06;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.case-anchor .ld-rows {
  gap: clamp(20px, 3vw, 38px);
  margin-top: 36px;
}
.case-anchor .ld-rows > div {
  padding-top: 14px;
  border-top: 1px solid rgba(245,242,235,.09);
}
.case-anchor .ld-out {
  display: grid;
  grid-template-columns: minmax(140px, .34fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 54px);
  align-items: start;
  margin-top: 38px;
  padding-top: 28px;
  border-top-color: rgba(195,21,55,.3);
}
.case-anchor .ld-out em {
  font-size: var(--t-h3);
  line-height: 1;
}

@media (max-width: 1000px) {
  .case-anchor .decision-card + .decision-card {
    border-top: 1px solid rgba(245,242,235,.11);
    border-left: 0;
  }
  .case-anchor .ai-fail + .ai-fail {
    border-top: 1px solid rgba(245,242,235,.1);
    border-left: 0;
  }
}

@media (max-width: 900px) {
  .case-anchor .ld-grid { grid-template-columns: 1fr; }
  .case-anchor .ld-index { display: none; }
}

@media (max-width: 760px) {
  .case-anchor .case-compass-grid article + article {
    border-top: 1px solid rgba(245,242,235,.11);
    border-left: 0;
  }
  .case-anchor .case-compass-grid article {
    min-height: 0;
    padding-block: 34px;
  }
  .case-anchor .six-grid article { padding-left: 46px; }
  .case-anchor .ai-anatomy {
    padding-top: 150px;
    padding-bottom: 150px;
  }
  .case-anchor .ai-anatomy::before,
  .case-anchor .ai-anatomy::after { height: 170px; }
  .case-anchor .ai-boundary-figure { min-height: 320px; }
  .case-anchor .aib-field { min-height: 236px; }
  .case-anchor .aib-tier b { font-size: var(--t-h2); }
  .case-anchor .ai-lane + .ai-lane {
    border-top: 1px solid rgba(245,242,235,.1);
    border-left: 0;
  }
  .case-anchor .ai-routing { padding-inline: 0; }
  .case-anchor .ld-grid { margin-top: 56px; }
  .case-anchor .ld-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-block: 48px 64px;
  }
  .case-anchor .ld-no { font-size: var(--t-h2); }
  .case-anchor .ld-out { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .case-anchor .ld-index ol::before { transform: scaleY(1); }
}

/* ================================================================
   v0.113 — ANCHOR lacquer cards, authority aperture, live ledger.

   Contained information returns as quiet material surfaces: concentric
   radii, inset edge light, deep separation, and a small sumi seal.
   The model-routing ledger remains intentionally unchanged.
   ================================================================ */

/* Shared content material: solid enough for long-form reading, with
   depth coming from edges and shadow instead of conspicuous gradients. */
.case-anchor .case-compass-grid,
.case-anchor .decision-grid {
  gap: clamp(14px, 1.6vw, 22px);
  border: 0;
}
.case-anchor .case-compass-grid article,
.case-anchor .decision-card,
.case-anchor .six-grid article,
.case-anchor .ai-fail {
  overflow: hidden;
  border: 1px solid rgba(245,242,235,.105);
  background: rgba(245,242,235,.026);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 24px 70px rgba(0,0,0,.2);
}

/* 60-second read: three substantial lacquer panels, still using the
   collision-proof flex layout introduced in v0.109. */
.case-anchor .case-compass-grid article {
  min-height: 392px;
  padding: clamp(30px, 3.3vw, 44px);
  border-radius: 28px;
}
.case-anchor .case-compass-grid article + article { border-left: 1px solid rgba(245,242,235,.105); }
.case-anchor .case-compass-grid article::before {
  display: block;
  inset: 0 22px auto;
  height: 1px;
  background: rgba(255,255,255,.13);
}
.case-anchor .case-compass-grid article::after,
.case-anchor .decision-card::after,
.case-anchor .six-grid article::after,
.case-anchor .ai-fail::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  width: 22px;
  height: 22px;
  border-top: 1px solid rgba(195,21,55,.52);
  border-right: 1px solid rgba(195,21,55,.52);
  border-radius: 0 9px 0 0;
  pointer-events: none;
}

/* Evidence notes: compact individual objects with an inset number seal. */
.case-anchor .six-grid {
  gap: clamp(14px, 1.6vw, 22px);
}
.case-anchor .six-grid article {
  min-height: 190px;
  padding: 30px 26px 32px 72px;
  border-radius: 22px;
}
.case-anchor .six-grid article:hover {
  border-color: rgba(245,242,235,.16);
  background: rgba(245,242,235,.035);
}
.case-anchor .six-grid article > span {
  top: 28px;
  left: 26px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(195,21,55,.34);
  border-radius: 50%;
  background: rgba(195,21,55,.055);
  font-size: var(--t-caption);
  letter-spacing: .08em;
}

/* The research laws remain easy to compare, but each now feels like a
   considered product surface rather than a table cell. */
.case-anchor .decision-card {
  min-height: 360px;
  border-radius: 28px;
}
.case-anchor .decision-card + .decision-card { border-left: 1px solid rgba(245,242,235,.105); }
.case-anchor .decision-card::before {
  display: block;
  inset: auto 30px 24px;
  width: auto;
  height: 1px;
  background: rgba(245,242,235,.07);
  opacity: 1;
}
.case-anchor .decision-card:hover {
  border-color: rgba(245,242,235,.17);
  background: rgba(245,242,235,.035);
}

@media (hover: hover) and (pointer: fine) {
  .case-anchor .case-compass-grid article,
  .case-anchor .decision-card,
  .case-anchor .six-grid article,
  .case-anchor .ai-fail {
    transition:
      transform .5s cubic-bezier(.2,.75,.2,1),
      border-color .5s ease,
      background-color .5s ease,
      box-shadow .5s ease;
  }
  .case-anchor .case-compass-grid article:hover,
  .case-anchor .decision-card:hover,
  .case-anchor .six-grid article:hover,
  .case-anchor .ai-fail:hover {
    transform: translateY(-4px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.1),
      inset 0 -1px 0 rgba(0,0,0,.28),
      0 34px 88px rgba(0,0,0,.28);
  }
}

/* AI hero: a working authority aperture rather than a diagram label.
   All animated properties are transforms and opacity. */
.case-anchor .ai-gate-figure {
  position: relative;
  min-height: 370px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(245,242,235,.12);
  border-radius: 30px;
  background: rgba(5,5,7,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 34px 90px rgba(0,0,0,.28);
}
.case-anchor .ai-gate-figure::before {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  width: 26px;
  height: 26px;
  border-top: 1px solid rgba(195,21,55,.62);
  border-right: 1px solid rgba(195,21,55,.62);
  border-radius: 0 10px 0 0;
}
.case-anchor .agf-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(245,242,235,.1);
  color: var(--gray);
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.case-anchor .agf-system {
  position: relative;
  min-height: 260px;
}
.case-anchor .agf-intake {
  position: absolute;
  top: 24px;
  bottom: 28px;
  left: 0;
  width: 27%;
}
.case-anchor .agf-intake::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 52%;
  height: 1px;
  background: rgba(245,242,235,.12);
  transform: translateY(-50%);
}
.case-anchor .agf-intake i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 1;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(245,242,235,.48);
  border-radius: 50%;
  background: #111114;
  box-shadow: 0 0 0 4px rgba(245,242,235,.025);
}
.case-anchor .agf-intake i:nth-child(3n+1) { border-color: rgba(195,21,55,.74); }
.case-anchor .agf-aperture {
  position: absolute;
  top: 18px;
  bottom: 22px;
  left: 31%;
  display: grid;
  width: 20px;
  place-items: center;
}
.case-anchor .agf-aperture i {
  width: 7px;
  height: 100%;
  background: var(--shu);
  transform: scaleY(1);
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
}
.case-anchor .agf-aperture span {
  position: absolute;
  bottom: 12px;
  left: 16px;
  color: rgba(195,21,55,.72);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: 0 50%;
}
.case-anchor .agf-route {
  position: absolute;
  right: 0;
  left: 38%;
  height: 58px;
}
.case-anchor .agf-route--act { top: 20px; }
.case-anchor .agf-route--draft { top: 101px; }
.case-anchor .agf-route--commit { top: 182px; }
.case-anchor .agf-trace {
  position: absolute;
  top: 28px;
  right: 116px;
  left: 0;
  height: 1px;
  background: rgba(245,242,235,.22);
  transform-origin: left center;
}
.case-anchor .agf-route--draft .agf-trace { background: rgba(245,242,235,.15); }
.case-anchor .agf-route--commit .agf-trace {
  right: 142px;
  background: rgba(195,21,55,.26);
}
.case-anchor .agf-trace i {
  position: absolute;
  top: -4px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(245,242,235,.6);
  border-radius: 50%;
  background: #0b0b0d;
}
.case-anchor .agf-trace i:nth-child(1) { left: 18%; }
.case-anchor .agf-trace i:nth-child(2) { left: 54%; }
.case-anchor .agf-trace i:nth-child(3) { left: 84%; }
.case-anchor .agf-route--draft .agf-trace i { border-color: rgba(245,242,235,.4); }
.case-anchor .agf-route--commit .agf-trace i { border-color: rgba(195,21,55,.62); }
.case-anchor .agf-stop {
  position: absolute;
  top: 20px;
  right: 135px;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(195,21,55,.78);
  border-radius: 4px;
  background: rgba(195,21,55,.12);
  transform: rotate(45deg);
}
.case-anchor .agf-route-copy {
  position: absolute;
  top: 6px;
  right: 0;
  display: grid;
  width: 106px;
  grid-template-columns: 1fr auto;
  gap: 1px 8px;
  align-items: baseline;
}
.case-anchor .agf-route-copy b {
  font-family: var(--display);
  font-size: var(--t-lede);
  font-weight: 500;
  letter-spacing: -.035em;
}
.case-anchor .agf-route-copy span {
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--t-caption);
}
.case-anchor .agf-route--commit .agf-route-copy b,
.case-anchor .agf-route--commit .agf-route-copy span { color: var(--shu); }
.case-anchor .agf-route-copy em {
  grid-column: 1 / -1;
  color: var(--gray);
  font-size: var(--t-label);
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.case-anchor .ai-gate-figure > p {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  border-top: 1px solid rgba(245,242,235,.1);
  color: var(--gray);
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.case-anchor .ai-gate-figure > p b {
  color: var(--ink);
  font-weight: 500;
}

/* Autonomy is one inset instrument panel; model routing below it is
   deliberately untouched because that presentation is owner-approved. */
.case-anchor .ai-lanes {
  overflow: hidden;
  border: 1px solid rgba(245,242,235,.11);
  border-radius: 30px;
  background: rgba(5,5,7,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.42),
    0 30px 90px rgba(0,0,0,.22);
}
.case-anchor .ai-lane {
  padding: clamp(34px, 3.5vw, 48px);
  background: transparent;
}
.case-anchor .ai-lane + .ai-lane { border-left: 1px solid rgba(245,242,235,.09); }
.case-anchor .ai-lane--never { background: rgba(195,21,55,.025); }
.case-anchor .ai-wrong-grid {
  gap: clamp(14px, 1.6vw, 22px);
  border: 0;
}
.case-anchor .ai-fail {
  position: relative;
  padding: clamp(30px, 3vw, 42px);
  border-radius: 24px;
}
.case-anchor .ai-fail + .ai-fail { border-left: 1px solid rgba(245,242,235,.105); }
.case-anchor .ai-fail:hover {
  border-color: rgba(245,242,235,.16);
  background: rgba(245,242,235,.035);
}

/* Decision index: align its first marker with the first decision and
   turn the rail into a live scroll-correlated progress instrument. */
.case-anchor .ld-grid {
  --ld-progress: 0;
  --ld-step: 0;
  align-items: start;
}
.case-anchor .ld-index {
  padding-top: 0;
}
.case-anchor .ld-index > span {
  height: 55px;
  padding: 0;
  border-top: 1px solid rgba(245,242,235,.16);
  border-bottom: 0;
  line-height: 55px;
}
.case-anchor .ld-index ol {
  gap: 0;
  margin-top: 0;
}
.case-anchor .ld-index li {
  min-height: 43px;
  align-items: center;
  opacity: .42;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.75,.2,1);
}
.case-anchor .ld-index ol::before {
  top: 17px;
  bottom: 17px;
  left: 12px;
  background: rgba(245,242,235,.12);
  transform: none;
  transition: none;
}
.case-anchor .ld-index ol::after {
  content: "";
  position: absolute;
  top: 17px;
  bottom: 17px;
  left: 12px;
  width: 1px;
  background: var(--shu);
  transform: scaleY(var(--ld-progress));
  transform-origin: 50% 0;
  will-change: transform;
}
.case-anchor .ld-index li::before {
  top: 50%;
  background: #0d0d0f;
  border-color: rgba(245,242,235,.28);
  transform: translateY(-50%) scale(.78);
  transition:
    transform .35s cubic-bezier(.2,.75,.2,1),
    background-color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}
.case-anchor .ld-index li.is-past,
.case-anchor .ld-index li.is-current { opacity: 1; }
.case-anchor .ld-index li.is-past::before {
  border-color: var(--shu);
  background: var(--shu);
}
.case-anchor .ld-index li.is-current {
  transform: translateX(4px);
}
.case-anchor .ld-index li.is-current::before {
  border-color: var(--shu);
  background: #0d0d0f;
  box-shadow: 0 0 0 5px rgba(195,21,55,.12);
  transform: translateY(-50%) scale(1.08);
}
.case-anchor .ld-index li.is-current em { color: var(--ink); }
.case-anchor .ld-sequence,
.case-anchor .ld-index > span { border-top-color: rgba(245,242,235,.16); }
.case-anchor .ld-out {
  grid-template-columns: minmax(210px, .36fr) minmax(0, 1fr);
}
.case-anchor .ld-out em {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1000px) {
  .case-anchor .decision-card + .decision-card,
  .case-anchor .ai-fail + .ai-fail {
    border-top: 1px solid rgba(245,242,235,.105);
    border-left: 1px solid rgba(245,242,235,.105);
  }
  .case-anchor .ai-lane + .ai-lane {
    border-top: 1px solid rgba(245,242,235,.09);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .case-anchor .case-compass-grid,
  .case-anchor .decision-grid { gap: 14px; }
  .case-anchor .case-compass-grid article {
    min-height: 0;
    border-radius: 24px;
  }
  .case-anchor .case-compass-grid article + article {
    border-top: 1px solid rgba(245,242,235,.105);
    border-left: 1px solid rgba(245,242,235,.105);
  }
  .case-anchor .six-grid { gap: 14px; }
  .case-anchor .six-grid article {
    min-height: 0;
    padding: 27px 24px 29px 66px;
    border-radius: 20px;
  }
  .case-anchor .six-grid article > span {
    top: 25px;
    left: 23px;
  }
  .case-anchor .decision-card { min-height: 0; border-radius: 24px; }
  .case-anchor .ai-gate-figure {
    min-height: 350px;
    padding: 20px;
    border-radius: 26px;
  }
  .case-anchor .agf-system { min-height: 245px; }
  .case-anchor .agf-route--act { top: 14px; }
  .case-anchor .agf-route--draft { top: 91px; }
  .case-anchor .agf-route--commit { top: 168px; }
  .case-anchor .agf-route { left: 35%; }
  .case-anchor .agf-aperture { left: 29%; }
  .case-anchor .agf-route-copy { width: 102px; }
  .case-anchor .agf-trace { right: 112px; }
  .case-anchor .agf-route--commit .agf-trace { right: 134px; }
  .case-anchor .agf-stop { right: 128px; }
  .case-anchor .ai-lanes { border-radius: 24px; }
  .case-anchor .ai-wrong-grid { gap: 14px; }
  .case-anchor .ai-fail { border-radius: 22px; }
  .case-anchor .ai-fail + .ai-fail {
    border-top: 1px solid rgba(245,242,235,.105);
    border-left: 1px solid rgba(245,242,235,.105);
  }
  .case-anchor .ld-out { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .case-anchor .agf-intake { width: 23%; }
  .case-anchor .agf-aperture { left: 25%; }
  .case-anchor .agf-route { left: 31%; }
  .case-anchor .agf-route-copy { width: 86px; }
  .case-anchor .agf-route-copy b { font-size: var(--t-body); }
  .case-anchor .agf-route-copy span { font-size: var(--t-caption); }
  .case-anchor .agf-trace { right: 94px; }
  .case-anchor .agf-route--commit .agf-trace { right: 108px; }
  .case-anchor .agf-stop { right: 101px; }
  .case-anchor .ai-gate-figure > p {
    font-size: var(--t-caption);
    letter-spacing: .06em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-anchor .ld-index ol::after { transform: scaleY(1); }
  .case-anchor .ld-index li,
  .case-anchor .ld-index li::before {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .case-anchor .agf-aperture i,
  .case-anchor .agf-intake i,
  .case-anchor .agf-route,
  .case-anchor .agf-trace,
  .case-anchor .agf-trace i,
  .case-anchor .agf-stop {
    opacity: 1;
    transform: none;
  }
}

/* ================================================================
   v0.114 — ANCHOR failure cascade, living AI handoff, ledger repair.
   ================================================================ */

/* The corner seal from v0.113 read as a decorative arc. Remove it;
   depth now comes only from the material edge and shadow. */
.case-anchor .case-compass-grid article::after,
.case-anchor .decision-card::after,
.case-anchor .six-grid article::after,
.case-anchor .ai-fail::after {
  display: none;
}

/* The deadline result names the gain, and the complete metric block is
   optically centered regardless of label width. */
.case-anchor .dl-remaining {
  display: grid;
  width: min(620px, 100%);
  place-items: center;
  margin-inline: auto;
  text-align: center;
  line-height: .92;
}
.case-anchor .dl-remaining span {
  max-width: 30ch;
  margin: 14px auto 0;
  line-height: 1.5;
  text-align: center;
}

/* Six symptoms become one causal sequence. The center thread is live
   scroll progress; alternating evidence preserves reading rhythm. */
.case-anchor .failure-cascade {
  --fc-progress: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr);
  gap: 0;
  margin-top: clamp(64px, 9vh, 104px);
}
.case-anchor .failure-cascade .fc-thread {
  position: absolute;
  top: 38px;
  bottom: 38px;
  left: 50%;
  width: 1px;
  background: rgba(245,242,235,.1);
  transform: translateX(-50%);
  pointer-events: none;
}
.case-anchor .failure-cascade .fc-thread i {
  position: absolute;
  inset: 0;
  background: var(--shu);
  transform: scaleY(var(--fc-progress));
  transform-origin: 50% 0;
  will-change: transform;
}
.case-anchor .failure-cascade article {
  position: relative;
  display: grid;
  min-height: clamp(158px, 18vh, 196px);
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr);
  align-items: start;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.case-anchor .failure-cascade article:hover {
  border-color: transparent;
  background: none;
  box-shadow: none;
  transform: none;
}
.case-anchor .failure-cascade article::before,
.case-anchor .failure-cascade article::after { display: none; }
.case-anchor .failure-cascade article > span {
  position: relative;
  top: auto;
  left: auto;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  grid-column: 2;
  grid-row: 1;
  place-items: center;
  justify-self: center;
  border: 1px solid rgba(245,242,235,.17);
  border-radius: 50%;
  background: var(--canvas);
  color: var(--gray);
  font-family: var(--display);
  font-size: var(--t-caption);
  letter-spacing: .08em;
  transition:
    color .38s ease,
    border-color .38s ease,
    background-color .38s ease,
    box-shadow .38s ease,
    transform .45s cubic-bezier(.2,.75,.2,1);
}
.case-anchor .failure-cascade .fc-copy {
  position: relative;
  width: min(100%, 430px);
  padding: 22px 0 34px;
  border-top: 1px solid rgba(245,242,235,.13);
  opacity: .62;
  transition: opacity .42s ease;
}
.case-anchor .failure-cascade article:nth-of-type(odd) .fc-copy {
  grid-column: 1;
  justify-self: end;
  padding-right: clamp(10px, 2vw, 28px);
  text-align: right;
}
.case-anchor .failure-cascade article:nth-of-type(even) .fc-copy {
  grid-column: 3;
  padding-left: clamp(10px, 2vw, 28px);
}
.case-anchor .failure-cascade .fc-copy b {
  display: block;
  max-width: 24ch;
  margin-top: 0;
  font-size: var(--t-h4);
  line-height: 1.13;
}
.case-anchor .failure-cascade article:nth-of-type(odd) .fc-copy b,
.case-anchor .failure-cascade article:nth-of-type(odd) .fc-copy p {
  margin-left: auto;
}
.case-anchor .failure-cascade .fc-copy p {
  max-width: 42ch;
  margin-top: 12px;
  font-size: var(--t-caption);
  line-height: 1.72;
}
.case-anchor .failure-cascade article.is-past .fc-copy,
.case-anchor .failure-cascade article.is-current .fc-copy { opacity: 1; }
.case-anchor .failure-cascade article.is-past > span {
  border-color: rgba(195,21,55,.72);
  background: var(--shu);
  color: var(--ink);
}
.case-anchor .failure-cascade article.is-current > span {
  border-color: var(--shu);
  color: var(--ink);
  box-shadow: 0 0 0 7px rgba(195,21,55,.11);
  transform: scale(1.08);
}
.case-anchor .failure-cascade article.is-current .fc-copy::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 48px;
  height: 2px;
  background: var(--shu);
}
.case-anchor .failure-cascade article:nth-of-type(odd).is-current .fc-copy::after { right: 0; }
.case-anchor .failure-cascade article:nth-of-type(even).is-current .fc-copy::after { left: 0; }

/* A living overlap replaces the routing diagram. Capability can occupy
   both circles; the copy makes clear that accountability cannot. */
.case-anchor .ai-handoff-figure {
  position: relative;
  min-height: 370px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(245,242,235,.12);
  border-radius: 30px;
  background: rgba(5,5,7,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 34px 90px rgba(0,0,0,.28);
}
.case-anchor .aih-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(245,242,235,.1);
  color: var(--gray);
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.case-anchor .aih-head em {
  color: rgba(245,242,235,.54);
  font-style: normal;
}
.case-anchor .aih-stage {
  position: relative;
  min-height: 260px;
}
.case-anchor .aih-ring {
  position: absolute;
  width: min(190px, 64%);
  aspect-ratio: 1;
  border: 1px solid rgba(245,242,235,.15);
  border-radius: 50%;
  transform-origin: 50% 50%;
}
.case-anchor .aih-ring--model {
  top: 34px;
  left: 0;
  border-color: rgba(245,242,235,.19);
}
.case-anchor .aih-ring--human {
  top: 68px;
  right: 0;
  border-color: rgba(195,21,55,.34);
}
.case-anchor .aih-ring i {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(245,242,235,.5);
  border-radius: 50%;
  background: #0b0b0d;
}
.case-anchor .aih-ring i:nth-child(1) { top: -4px; left: 50%; }
.case-anchor .aih-ring i:nth-child(2) { top: 28%; right: 2px; }
.case-anchor .aih-ring i:nth-child(3) { bottom: 6%; left: 24%; }
.case-anchor .aih-ring i:nth-child(4) { top: 45%; left: -4px; }
.case-anchor .aih-ring--human i { border-color: rgba(195,21,55,.58); }
.case-anchor .aih-zone {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 1px;
}
.case-anchor .aih-zone span {
  font-family: var(--display);
  font-size: var(--t-h3);
  line-height: 1;
  letter-spacing: -.04em;
}
.case-anchor .aih-zone b {
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: .04em;
}
.case-anchor .aih-zone em {
  color: var(--gray);
  font-size: var(--t-label);
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.case-anchor .aih-zone--act {
  top: 102px;
  left: 31px;
}
.case-anchor .aih-zone--draft {
  top: 128px;
  left: 50%;
  align-items: center;
  text-align: center;
  transform: translateX(-50%);
}
.case-anchor .aih-zone--draft span { color: var(--ink); }
.case-anchor .aih-zone--commit {
  right: 23px;
  bottom: 22px;
  text-align: right;
}
.case-anchor .aih-zone--commit span,
.case-anchor .aih-zone--commit b { color: var(--shu); }
.case-anchor .aih-owner {
  position: absolute;
  z-index: 2;
  color: rgba(245,242,235,.42);
  font-size: var(--t-caption);
  letter-spacing: .18em;
}
.case-anchor .aih-owner--model { top: 52px; left: 31px; }
.case-anchor .aih-owner--human { right: 22px; bottom: 7px; color: rgba(195,21,55,.62); }
.case-anchor .aih-handoff-dot {
  position: absolute;
  top: 44px;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(245,242,235,.8);
  border-radius: 50%;
  background: #0b0b0d;
  box-shadow: 0 0 0 5px rgba(245,242,235,.045);
  transform: translateX(-50%);
}
.case-anchor .aih-stop {
  position: absolute;
  top: -20px;
  right: 2px;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(195,21,55,.8);
  border-radius: 4px;
  background: rgba(195,21,55,.13);
  transform: rotate(45deg);
}
.case-anchor .ai-handoff-figure > p {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  border-top: 1px solid rgba(245,242,235,.1);
  color: var(--gray);
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.case-anchor .ai-handoff-figure > p b {
  color: var(--ink);
  font-weight: 500;
}

/* Lock the active rail marker to the axis. Only its label shifts. */
.case-anchor .ld-index li.is-current { transform: none; }
.case-anchor .ld-index em {
  display: block;
  transition: color .35s ease, transform .35s cubic-bezier(.2,.75,.2,1);
}
.case-anchor .ld-index li.is-current em { transform: translateX(4px); }

/* Every decision result uses the same two-column anatomy. Explicit
   min-widths and zeroed margins prevent inherited flex wrapping and
   keep the explanation anchored to one consistent start line. */
.case-anchor .ld-card > div:last-child { min-width: 0; }
.case-anchor .ld-rows {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.case-anchor .ld-rows > div { min-width: 0; }
.case-anchor .ld-rows > div p { margin-right: 0; margin-bottom: 0; }
.case-anchor .ld-out {
  display: grid;
  grid-template-columns: minmax(210px, .36fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
  margin-top: 38px;
  padding-top: 28px;
}
.case-anchor .ld-out em {
  display: block;
  min-width: 0;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}
.case-anchor .ld-out p {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 3px 0 0;
}

@media (max-width: 900px) {
  .case-anchor .failure-cascade {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .case-anchor .failure-cascade .fc-thread {
    left: 26px;
    transform: none;
  }
  .case-anchor .failure-cascade article {
    min-height: 170px;
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .case-anchor .failure-cascade article > span {
    grid-column: 1;
  }
  .case-anchor .failure-cascade article:nth-of-type(odd) .fc-copy,
  .case-anchor .failure-cascade article:nth-of-type(even) .fc-copy {
    grid-column: 2;
    justify-self: stretch;
    padding-right: 0;
    padding-left: 18px;
    text-align: left;
  }
  .case-anchor .failure-cascade article:nth-of-type(odd) .fc-copy b,
  .case-anchor .failure-cascade article:nth-of-type(odd) .fc-copy p {
    margin-left: 0;
  }
  .case-anchor .failure-cascade article:nth-of-type(odd).is-current .fc-copy::after,
  .case-anchor .failure-cascade article:nth-of-type(even).is-current .fc-copy::after {
    right: auto;
    left: 18px;
  }
}

@media (max-width: 760px) {
  .case-anchor .failure-cascade { margin-top: 58px; }
  .case-anchor .failure-cascade article { min-height: 186px; }
  .case-anchor .failure-cascade .fc-copy {
    width: 100%;
    padding-top: 18px;
  }
  .case-anchor .failure-cascade .fc-copy b { font-size: var(--t-lede); }
  .case-anchor .ai-handoff-figure {
    min-height: 350px;
    padding: 20px;
    border-radius: 26px;
  }
  .case-anchor .aih-stage { min-height: 245px; }
  .case-anchor .aih-ring--model { top: 30px; }
  .case-anchor .aih-ring--human { top: 62px; }
  .case-anchor .aih-zone--act { top: 90px; left: 25px; }
  .case-anchor .aih-zone--draft { top: 116px; }
  .case-anchor .aih-zone--commit { right: 17px; bottom: 19px; }
  .case-anchor .aih-owner--model { top: 46px; left: 25px; }
  .case-anchor .aih-owner--human { right: 17px; }
  .case-anchor .ai-handoff-figure > p {
    font-size: var(--t-caption);
    letter-spacing: .06em;
  }
  .case-anchor .ld-rows { grid-template-columns: 1fr; }
  .case-anchor .ld-out {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 30px;
    padding-top: 23px;
  }
  .case-anchor .ld-out p { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .case-anchor .failure-cascade .fc-thread i { transform: scaleY(1); }
  .case-anchor .failure-cascade .fc-copy,
  .case-anchor .failure-cascade article > span,
  .case-anchor .aih-ring,
  .case-anchor .aih-handoff-dot,
  .case-anchor .aih-stop,
  .case-anchor .ld-index em {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .case-anchor .ld-index li::before { transform: translateY(-50%); }
}

/* ==========================================================================
   ANCHOR v0.115 — AI authority ledger
   Replaces the abstract overlapping fields with a compact working instrument.
   Rectangular work slips resolve against one consequence axis, using the same
   line-draw and settle motion language as the page's research/design scenes.
   ========================================================================== */
.case-anchor .ai-contract-figure {
  position: relative;
  min-height: 380px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(245,242,235,.13);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(245,242,235,.052), rgba(245,242,235,.012) 58%),
    #0b0b0d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 28px 62px rgba(0,0,0,.3);
}
.case-anchor .aic-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(245,242,235,.1);
  color: var(--gray);
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.case-anchor .aic-head em {
  color: rgba(245,242,235,.54);
  font-style: normal;
}
.case-anchor .aic-stage {
  position: relative;
  min-height: 260px;
}
.case-anchor .aic-incoming {
  position: absolute;
  top: 33px;
  bottom: 24px;
  left: 0;
  width: 29%;
}
.case-anchor .aic-incoming span {
  position: absolute;
  display: block;
  width: max-content;
  padding: 5px 7px 4px;
  border: 1px solid rgba(245,242,235,.12);
  border-radius: 3px;
  background: rgba(245,242,235,.035);
  color: rgba(245,242,235,.54);
  font-size: var(--t-label);
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
  will-change: transform, opacity;
}
.case-anchor .aic-incoming span:nth-child(1) { top: 4px; left: 2px; }
.case-anchor .aic-incoming span:nth-child(2) { top: 43px; right: 1px; }
.case-anchor .aic-incoming span:nth-child(3) { top: 86px; left: 9px; }
.case-anchor .aic-incoming span:nth-child(4) { top: 133px; right: 3px; }
.case-anchor .aic-incoming span:nth-child(5) { top: 177px; left: 0; }
.case-anchor .aic-spine {
  position: absolute;
  top: 25px;
  bottom: 24px;
  left: 33%;
  width: 2px;
  background: rgba(245,242,235,.08);
}
.case-anchor .aic-spine i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--shu);
  box-shadow: 0 0 14px rgba(195,21,55,.2);
  transform-origin: 50% 0;
  will-change: transform;
}
.case-anchor .aic-gate {
  position: absolute;
  z-index: 3;
  left: calc(33% - 5px);
  width: 12px;
  height: 12px;
  border: 2px solid #0b0b0d;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(245,242,235,.42);
  will-change: transform, opacity;
}
.case-anchor .aic-gate--act { top: 49px; }
.case-anchor .aic-gate--draft {
  top: 125px;
  background: #0b0b0d;
}
.case-anchor .aic-gate--commit {
  top: 201px;
  background: var(--shu);
  box-shadow: 0 0 0 1px rgba(195,21,55,.65);
}
.case-anchor .aic-row {
  position: absolute;
  right: 0;
  left: 39%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 58px;
  padding: 9px 0 9px 18px;
  border-top: 1px solid rgba(245,242,235,.12);
  will-change: transform, opacity;
}
.case-anchor .aic-row > i {
  position: absolute;
  top: -1px;
  right: 0;
  left: -10%;
  height: 1px;
  background: rgba(245,242,235,.44);
  transform-origin: 0 50%;
  will-change: transform;
}
.case-anchor .aic-row--act { top: 34px; }
.case-anchor .aic-row--draft { top: 110px; }
.case-anchor .aic-row--commit {
  top: 186px;
  border-color: rgba(195,21,55,.28);
}
.case-anchor .aic-row--commit > i { background: rgba(195,21,55,.7); }
.case-anchor .aic-row div {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.case-anchor .aic-row b {
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--t-caption);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .055em;
  white-space: nowrap;
}
.case-anchor .aic-row em {
  overflow: hidden;
  color: var(--gray);
  font-size: var(--t-label);
  font-style: normal;
  line-height: 1.25;
  letter-spacing: .1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.case-anchor .aic-row strong {
  padding-left: 8px;
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.case-anchor .aic-row--commit b,
.case-anchor .aic-row--commit strong { color: var(--shu); }
.case-anchor .aic-axis-label {
  position: absolute;
  left: calc(33% + 12px);
  color: var(--gray);
  font-size: var(--t-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(90deg);
  transform-origin: 0 50%;
}
.case-anchor .aic-axis-label--top { top: 25px; }
.case-anchor .aic-axis-label--bottom {
  bottom: 14px;
  color: rgba(195,21,55,.58);
}
.case-anchor .ai-contract-figure > p {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  border-top: 1px solid rgba(245,242,235,.1);
  color: var(--gray);
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.case-anchor .ai-contract-figure > p b {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 760px) {
  .case-anchor .ai-contract-figure {
    min-height: 350px;
    padding: 20px;
    border-radius: 26px;
  }
  .case-anchor .aic-stage { min-height: 235px; }
  .case-anchor .aic-incoming {
    top: 23px;
    bottom: 16px;
    width: 27%;
  }
  .case-anchor .aic-incoming span:nth-child(1) { top: 5px; }
  .case-anchor .aic-incoming span:nth-child(2) { top: 39px; }
  .case-anchor .aic-incoming span:nth-child(3) { top: 77px; }
  .case-anchor .aic-incoming span:nth-child(4) { top: 116px; }
  .case-anchor .aic-incoming span:nth-child(5) { top: 156px; }
  .case-anchor .aic-spine {
    top: 20px;
    bottom: 19px;
    left: 30%;
  }
  .case-anchor .aic-gate { left: calc(30% - 5px); }
  .case-anchor .aic-gate--act { top: 42px; }
  .case-anchor .aic-gate--draft { top: 109px; }
  .case-anchor .aic-gate--commit { top: 176px; }
  .case-anchor .aic-row {
    left: 36%;
    min-height: 52px;
    padding-left: 14px;
  }
  .case-anchor .aic-row--act { top: 30px; }
  .case-anchor .aic-row--draft { top: 97px; }
  .case-anchor .aic-row--commit { top: 164px; }
  .case-anchor .aic-row strong { font-size: var(--t-h4); }
  .case-anchor .aic-axis-label { display: none; }
  .case-anchor .ai-contract-figure > p {
    font-size: var(--t-caption);
    letter-spacing: .055em;
  }
}

@media (max-width: 380px) {
  .case-anchor .aic-incoming span {
    padding-right: 5px;
    padding-left: 5px;
    font-size: var(--t-caption);
  }
  .case-anchor .aic-row { left: 35%; padding-left: 12px; }
  .case-anchor .aic-row b { font-size: var(--t-caption); }
  .case-anchor .aic-row em { font-size: var(--t-caption); letter-spacing: .07em; }
  .case-anchor .aic-row strong { font-size: var(--t-lede); }
}

@media (prefers-reduced-motion: reduce) {
  .case-anchor .aic-incoming span,
  .case-anchor .aic-spine i,
  .case-anchor .aic-gate,
  .case-anchor .aic-row,
  .case-anchor .aic-row > i {
    opacity: 1;
    transform: none;
  }
}

/* ================================================================
   v0.108 — ANCHOR live product frames.

   The screens and loops are real HTML documents, not images, so they
   are embedded in iframes. That is deliberate isolation rather than a
   workaround: they carry their own :root variables, their own font
   stack and one !important, and this project has already lost two
   rounds to base-rule collisions. An iframe cannot collide.

   .anc-shot scales a 1440x900 document down to the container width.
   Click opens it full size in .anc-lightbox.
   ================================================================ */
.anc-shot {
  position: relative; width: 100%; aspect-ratio: 1440 / 900;
  overflow: hidden; background: #0E0E12; cursor: zoom-in;
  border: 0; padding: 0; display: block;
}
.anc-shot iframe {
  width: 1440px; height: 900px; border: 0; display: block;
  transform: scale(var(--anc-s, 0.28)); transform-origin: 0 0;
  pointer-events: none;
  opacity: 1; transition: opacity .5s ease;
}
/* Frames are separate documents and assemble in a visible beat or two. The
   veil is applied by script only (never in markup), so a no-JavaScript
   reader still sees every frame — it just does not get the fade. */
.anc-shot.is-loading iframe { opacity: 0; }
.anc-shot.is-loading::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, transparent 20%, rgba(245,242,235,.035) 50%, transparent 80%),
    #0E0E12;
  background-size: 220% 100%, auto;
  background-position: 120% 0, 0 0;
}
/* The sweep is a background-position animation, which repaints on the main
   thread — so it is granted only to frames actually fetching, never to all
   forty at rest. .is-waking is added the moment a frame starts loading. */
.anc-shot.is-loading.is-waking::before { animation: ancWait 1.9s ease-in-out infinite; }
@keyframes ancWait {
  0%   { background-position: 120% 0, 0 0; }
  100% { background-position: -60% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .anc-shot.is-loading.is-waking::before { animation: none; }
  .anc-shot iframe { transition: none; }
}
/* the iframe swallows pointer events, so the button surface sits above it */
.anc-shot::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(245,242,235,.07);
  transition: box-shadow .35s ease, background .35s ease;
}
.anc-shot:hover::after { box-shadow: inset 0 0 0 1px rgba(245,242,235,.22); }
.anc-shot:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }
.anc-shot .anc-zoom {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  padding: 5px 9px; border-radius: 6px;
  background: rgba(8,8,9,.72); backdrop-filter: blur(6px);
  color: var(--gray); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease;
}
.anc-shot:hover .anc-zoom, .anc-shot:focus-visible .anc-zoom { opacity: 1; transform: none; }

/* inside a .mediaframe the frame is the whole media, so no crop chrome */
.mediaframe .anc-shot { cursor: zoom-in; }
.strip .cell .anc-shot { border-radius: 0; }

/* ---------- lightbox ---------- */
.anc-lightbox {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; padding: 4vh 4vw;
  background: rgba(8,8,9,.9); backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0; transition: opacity .38s cubic-bezier(.2,.8,.2,1);
}
.anc-lightbox.is-open { display: flex; }
.anc-lightbox.is-shown { opacity: 1; }
.anc-lightbox-stage {
  position: relative; width: 1440px; height: 900px; flex: none;
  transform: scale(var(--anc-ls, 1)); transform-origin: center center;
  border-radius: 10px; overflow: hidden; background: #0E0E12;
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
}
.anc-lightbox-stage iframe { width: 1440px; height: 900px; border: 0; display: block; }
.anc-lightbox-cap {
  position: fixed; left: 0; right: 0; bottom: 22px; text-align: center;
  color: var(--gray); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase;
}
.anc-lightbox-close {
  position: fixed; top: 20px; right: 22px; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(245,242,235,.14); background: rgba(245,242,235,.04);
  color: var(--ink); font-size: var(--t-small); cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
}
.anc-lightbox-close:hover { background: rgba(245,242,235,.1); border-color: rgba(245,242,235,.3); }

/* the strip band from v0.107 applies to images; live frames use their own ratio */
.case-anchor .strip .cell .anc-shot,
.case-anchor .strip.wide .cell .anc-shot { height: auto; min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  .anc-lightbox, .anc-shot::after, .anc-shot .anc-zoom { transition: none; }
}

/* ================================================================
   v0.109 — ANCHOR: the autonomy line replaces the three lanes,
   plus subgrid alignment for the failure cards.
   ================================================================ */

/* the AI section heading sits a step below the page's section scale */
.ai-anatomy > h3 { font-size: var(--t-h3)!important; max-width: 22ch; }

/* ---------- the autonomy line ----------
   Rebuilt without `display: contents`. The bands are ordinary flex rows, so
   the vermilion rule can be anchored to the band it actually belongs to
   rather than to the midpoint of the whole figure. */
.ai-line { margin-top: 48px; display: grid; gap: 0; }
.ai-line-band {
  position: relative;
  display: grid; grid-template-columns: 190px 1fr; gap: 26px; align-items: start;
  padding: 22px 0;
}
.ai-line-band--drafts { padding: 26px 0; }
.ai-line-band--drafts::before,
.ai-line-band--drafts::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(195,21,55,.18), var(--shu) 26%, var(--shu) 74%, rgba(195,21,55,.18));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.15s cubic-bezier(.2,.8,.2,1);
}
.ai-line-band--drafts::before { top: 0; }
.ai-line-band--drafts::after { bottom: 0; transition-delay: .12s; }
.ai-line.is-on .ai-line-band--drafts::before,
.ai-line.is-on .ai-line-band--drafts::after { transform: scaleX(1); }

.ai-line-label { color: var(--gray); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; line-height: 1.7; text-align: right; }
.ai-line-label b { display: block; margin-bottom: 6px; color: var(--ink); font-weight: 500; font-size: var(--t-caption); letter-spacing: .1em; }
.ai-line-band--drafts .ai-line-label b { color: var(--shu); }
.ai-line-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-line-chips span {
  padding: 8px 14px; border-radius: 999px; font-size: var(--t-caption); white-space: nowrap;
  border: 1px solid rgba(245,242,235,.14); background: rgba(245,242,235,.03); color: var(--gray);
  opacity: 0; transform: translateY(9px);
  transition: opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--n, 0) * 50ms);
}
.ai-line.is-on .ai-line-chips span { opacity: 1; transform: none; }
.ai-line-band--drafts .ai-line-chips span { border-color: rgba(195,21,55,.45); color: var(--ink); }
.ai-line-band--never .ai-line-chips span { border-style: dashed; color: rgba(245,242,235,.6); }

.ai-line-foot {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(245,242,235,.08);
}
.ai-line-foot div span { display: block; color: var(--gray); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; }
.ai-line-foot div p { margin-top: 9px; color: var(--gray); font-size: var(--t-caption); line-height: 1.68; }
.ai-line-foot div p b { color: var(--ink); font-weight: 500; }

/* ---------- failure cards: align the rule and the response across all three ---------- */
@supports (grid-template-rows: subgrid) {
  .ai-wrong-grid { grid-template-rows: auto auto auto; }
  .ai-fail { grid-row: span 3; display: grid; grid-template-rows: subgrid; gap: 0; }
  .ai-fail-rule { margin: 22px 0; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-line-rule { transform: scaleX(1); }
  .ai-line-chips span { opacity: 1; transform: none; }
}


/* ---------- v0.110: autonomy line responsive + section heading scale ---------- */
.ai-intro-copy h3 { font-size: var(--t-h3); max-width: 20ch; }
@media (max-width: 900px) {
  .ai-line-band { grid-template-columns: 1fr; gap: 12px; }
  .ai-line-label { text-align: left; }
  .ai-line-foot { grid-template-columns: 1fr; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-line-band--drafts::before, .ai-line-band--drafts::after { transform: scaleX(1); }
  .ai-line-chips span { opacity: 1; transform: none; }
}

/* ================================================================
   v0.110 — ANCHOR: containers size to the frame, not the other way round.

   A live frame reports its own aspect ratio, which for the artifacts is
   nothing like 16:10. The containers were still holding image-era fixed
   heights, so the frame sat in a box it could not fill and left dead space.
   Everything below lets the container take the frame's height.
   ================================================================ */

/* the window chrome wraps whatever it holds */
.mediaframe:has(.anc-shot) { height: auto; }
.mediaframe .anc-shot { display: block; width: 100%; height: auto; }

/* overlay thumbnails: no 150px image crop, follow the frame */
.overlay .ostrip .cell:has(.anc-shot) { height: auto; }
.overlay .ostrip--anchor { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.overlay .ostrip--anchor .cell { background: #0E0E12; }
.overlay .ostrip--anchor .anc-shot { border-radius: 12px; }
.overlay .figure--framed:has(.anc-shot) { background: #0E0E12; }
.overlay .figure--framed .anc-shot { border-radius: 16px; }

/* strip cells: the v0.107 fixed band was for images; frames carry their own ratio */
.case-anchor .strip .cell:has(.anc-shot),
.case-anchor .strip.wide .cell:has(.anc-shot) { height: auto; }
.case-anchor .strip .cell .anc-shot { height: auto; min-height: 0; aspect-ratio: auto; }

/* Fallback for engines without :has() — the frames still size themselves,
   these rules only stop a stale fixed height fighting them. */
.mediaframe .anc-shot,
.overlay .ostrip .anc-shot,
.strip .cell .anc-shot { max-height: none; }

@media (max-width: 760px) {
  .overlay .ostrip--anchor { grid-template-columns: 1fr; }
}

/* ================================================================
   v0.111 — ANCHOR: the autonomy line gets its gutter back.

   Under .case-anchor the AI section is deliberately full-bleed:
   `max-width: none` with zero horizontal padding, so it can carry an
   edge-to-edge background band. Its children each supply their own
   gutter via `width: min(1280px, 84vw)`. That list named .ai-lanes,
   which no longer exists — .ai-line replaced it and inherited nothing,
   so it ran the full width of the window and clipped.
   ================================================================ */
.case-anchor .ai-line {
  position: relative; z-index: 1;
  width: min(1280px, 84vw);
  margin: clamp(64px, 8vh, 100px) auto 0;
  padding: clamp(26px, 3.2vw, 44px);
  border: 1px solid rgba(245,242,235,.13);
  border-radius: 30px;
  background: rgba(8,8,10,.48);
}
/* rows divide inside the card rather than running to the window edge */
.case-anchor .ai-line-band + .ai-line-band { border-top: 1px solid rgba(245,242,235,.07); }
.case-anchor .ai-line-band--drafts { border-top: 0 !important; }
.case-anchor .ai-line-band--never { border-top: 0 !important; }

/* the heading, one step down as asked — this needs to beat
   `.case-anchor .ai-intro-copy h3`, which sets 92px at the top end */
.case-anchor .ai-intro-copy h3 { font-size: clamp(34px, 4.6vw, 62px); max-width: 14ch; }

@media (max-width: 900px) {
  .case-anchor .ai-line { padding: 22px; border-radius: 22px; }
}

/* ================================================================
   v0.113 — ANCHOR review fixes
   ================================================================ */

/* ---- 1. centred section heads: the problem, and the decisions ---- */
.case-anchor .anchor-six > .kicker,
.case-anchor .anchor-six > h3,
.case-anchor .anchor-six > .lede,
.case-anchor .ledger-decisions > .kicker,
.case-anchor .ledger-decisions > h3,
.case-anchor .ledger-decisions > .lede {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.case-anchor .anchor-six > .kicker,
.case-anchor .ledger-decisions > .kicker { display: block; }

/* ---- 2. live frames: clip reliably, and stop the corner biting content ----
   A transformed iframe is not dependably clipped to an ancestor's
   border-radius, so the corners were cutting into the UI. clip-path does
   clip transformed content, and a smaller radius keeps the bite off the
   product chrome. */
.case-anchor .strip .cell { border-radius: 10px; }
.anc-shot { clip-path: inset(0 round 10px); }
.mediaframe .anc-shot { clip-path: inset(0 round 0); }
.overlay .ostrip--anchor .anc-shot,
.overlay .figure--framed .anc-shot { clip-path: inset(0 round 12px); }

/* ---- 3. the routing cost line, vertically centred ---- */
.case-anchor .ai-cost,
.ai-cost {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 20px;
}
.ai-cost strong { line-height: 1; }
.ai-cost .arrow { line-height: 1; transform: translateY(-1px); }
.ai-cost p { align-self: center; margin: 0; }
@media (max-width: 760px) {
  .case-anchor .ai-cost, .ai-cost { grid-template-columns: auto auto auto; }
  .ai-cost p { grid-column: 1 / -1; }
}

/* ---- 4. the decisions outcome line ----
   It was a two-column grid with a nowrap display number in a 210px track.
   "40 min → 4 min" at 42px is wider than that, so it spilled over the
   sentence beside it, and the sentence started at a different x on every
   card. Stacked instead: number, then sentence, both on the same edge. */
.case-anchor .ld-out {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start;
}
.case-anchor .ld-out em {
  display: block;
  white-space: nowrap;
  font-size: var(--t-h3);
  line-height: 1;
  margin: 0;
}
.case-anchor .ld-out p {
  margin: 0; padding: 0;
  max-width: 68ch;
  font-size: var(--t-small); line-height: 1.7;
}

/* ---- 5. the three quotes, a step down ---- */
.anchor-voice blockquote p { font-size: var(--t-h4); line-height: 1.34; }
.case-anchor .anchor-voice blockquote p { font-size: var(--t-h4); line-height: 1.34; }

/* ================================================================
   v0.114 — ANCHOR review round
   ================================================================ */

/* ---- 1. the decisions head goes back to the left ---- */
.case-anchor .ledger-decisions > .kicker,
.case-anchor .ledger-decisions > h3,
.case-anchor .ledger-decisions > .lede {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* ---- 2. the routing cost as a stat callout ----
   A single left-aligned run of number, arrow, number, sentence read as a
   sentence with two big words in it. Grouping the pair, labelling each
   side and setting the copy across a rule makes it read as a result. */
.ai-cost,
.case-anchor .ai-cost {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(22px, 3vw, 46px);
  align-items: center;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(245,242,235,.08);
}
.ai-cost-pair {
  display: flex; align-items: flex-end; gap: clamp(14px, 1.6vw, 22px);
  padding-right: clamp(22px, 3vw, 46px);
  border-right: 1px solid rgba(245,242,235,.1);
}
.ai-cost-fig { display: grid; gap: 8px; }
.ai-cost-fig span {
  color: var(--gray); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
}
.ai-cost-fig strong {
  font-family: var(--display); font-weight: 500; line-height: 1;
  font-size: var(--t-h2); letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.ai-cost-fig--after strong { color: var(--shu); }
.ai-cost-arrow {
  font-style: normal; color: var(--gray); font-size: var(--t-body); line-height: 1;
  padding-bottom: 6px;
}
.ai-cost p {
  margin: 0; max-width: 54ch;
  color: var(--gray); font-size: var(--t-caption); line-height: 1.7;
}
.ai-cost p b { color: var(--ink); font-weight: 500; }
@media (max-width: 860px) {
  .ai-cost, .case-anchor .ai-cost { grid-template-columns: 1fr; gap: 22px; }
  .ai-cost-pair { padding-right: 0; border-right: 0; padding-bottom: 20px; border-bottom: 1px solid rgba(245,242,235,.1); }
}

/* ---- 3. the media-and-copy acts: breathe under the kicker, align at the top ----
   `.chapter-grid` centres its columns, so a tall live frame beside shorter
   copy left the copy floating at mid height and the frame hard up against
   the kicker above it. */
.case-anchor .chapter-grid--anchor {
  margin-top: clamp(30px, 4vh, 46px);
  align-items: start;
}
.case-anchor .chapter-grid--anchor .chapter-copy > h3:first-child { margin-top: -6px; }

/* ---- 5. the hero seal, a step smaller (geometry changed in the SVG too) ---- */
.case-emblem--anchor .em-a-seal { transform-origin: 230px 128px; }

/* ================================================================
   v0.115 — ANCHOR: metric under the media, media dropped to the heading

   The metric used to sit at the end of the copy column, which left a tall
   gap under the live frame. It is now a direct child of the grid, placed
   in the media's column on row two. Direct child on purpose: the mobile
   reorder targets `> .chapter-primary-media`, so wrapping the frame in a
   column div would have silently broken it.
   ================================================================ */
.case-anchor .chapter-grid--media-left,
.case-anchor .chapter-grid--media-right {
  grid-template-rows: auto auto;
  align-items: start;
}
.case-anchor .chapter-grid--media-left > .chapter-primary-media { grid-column: 1; grid-row: 1; }
.case-anchor .chapter-grid--media-left > .chapter-copy { grid-column: 2; grid-row: 1 / span 2; }
.case-anchor .chapter-grid--media-left > .metric { grid-column: 1; grid-row: 2; }

.case-anchor .chapter-grid--media-right > .chapter-copy { grid-column: 1; grid-row: 1 / span 2; }
.case-anchor .chapter-grid--media-right > .chapter-primary-media { grid-column: 2; grid-row: 1; }
.case-anchor .chapter-grid--media-right > .metric { grid-column: 2; grid-row: 2; }

.case-anchor .chapter-grid--anchor > .metric {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(245,242,235,.1);
}

/* drop the frame to sit on the heading's cap line rather than its line box */
.case-anchor .chapter-grid--anchor > .chapter-primary-media { margin-top: 14px; }

@media (max-width: 900px) {
  .case-anchor .chapter-grid--media-left > .chapter-primary-media,
  .case-anchor .chapter-grid--media-left > .chapter-copy,
  .case-anchor .chapter-grid--media-left > .metric,
  .case-anchor .chapter-grid--media-right > .chapter-primary-media,
  .case-anchor .chapter-grid--media-right > .chapter-copy,
  .case-anchor .chapter-grid--media-right > .metric {
    grid-column: auto; grid-row: auto;
  }
  .chapter-grid--mobile-primary-after-heading > .metric { order: 4; }
  .case-anchor .chapter-grid--anchor > .chapter-primary-media { margin-top: 26px; }
}

/* ---- the three quotes read the same way round ----
   The even row mirrored itself, so the middle quote put its copy on the
   right and its figure on the left while the other two did the opposite. */
.anchor-voice:nth-child(even) { grid-template-columns: 1.1fr .9fr; }
.anchor-voice:nth-child(even) .anchor-voice-copy { order: 0; }
.anchor-voice { align-items: center; }

/* ================================================================
   v0.116 — ANCHOR: metric tucked under its frame, Learn strip pulled up
   ================================================================ */

/* The rule above the figure read as a section divider and pushed the
   number away from the frame it belongs to. Removed; the number now sits
   close enough to read as a caption on the frame. */
.case-anchor .chapter-grid--anchor > .metric {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}
.case-anchor .chapter-grid--anchor > .metric .n { font-size: var(--t-h3); }

/* Learn had no metric, so its second grid row sat empty under the frame
   and pushed the screenshot strip down. The placement class is off that
   act now; this trims the remaining gap on all three. */
.case-anchor .act > .strip { margin-top: clamp(26px, 3.4vh, 40px); }
.case-anchor .act > .strip + .strip { margin-top: 14px; }

@media (max-width: 900px) {
  .case-anchor .chapter-grid--anchor > .metric { margin-top: 20px; }
}

/* ================================================================
   v0.117 — ANCHOR: metric hugs its frame (row-spanning removed)

   v0.115 placed the metric by grid coordinates with the copy spanning
   both rows. CSS grid distributes a spanning item's height across every
   row it covers, so a tall copy column inflated row one — stranding the
   frame at the top of it with dead space beneath, then the metric at the
   top of an equally inflated row two. That is the gap in the screenshot.

   The frame and its metric now share one flex column, so the metric sits
   in normal flow directly under the frame. The mobile reorder rule is
   updated for the new wrapper rather than left to silently miss it.
   ================================================================ */
.chapter-media-col { display: flex; flex-direction: column; align-self: start; min-width: 0; }

/* the coordinate placement from v0.115 is no longer needed */
.case-anchor .chapter-grid--media-left,
.case-anchor .chapter-grid--media-right { grid-template-rows: auto; align-items: start; }
.case-anchor .chapter-grid--media-left > .chapter-media-col { grid-column: 1; grid-row: 1; }
.case-anchor .chapter-grid--media-left > .chapter-copy { grid-column: 2; grid-row: 1; }
.case-anchor .chapter-grid--media-right > .chapter-copy { grid-column: 1; grid-row: 1; }
.case-anchor .chapter-grid--media-right > .chapter-media-col { grid-column: 2; grid-row: 1; }

.case-anchor .chapter-media-col > .metric {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}
.case-anchor .chapter-media-col > .metric .n { font-size: var(--t-h3); }
.case-anchor .chapter-grid--anchor > .chapter-media-col { margin-top: 14px; }

/* the shared mobile reorder targeted `> .chapter-primary-media`, which is
   now a grandchild — the wrapper takes its place in the order */
@media (max-width: 900px) {
  .chapter-grid--mobile-primary-after-heading > .chapter-media-col {
    order: 2;
    margin-top: 26px;
  }
  .case-anchor .chapter-grid--media-left > .chapter-media-col,
  .case-anchor .chapter-grid--media-left > .chapter-copy,
  .case-anchor .chapter-grid--media-right > .chapter-media-col,
  .case-anchor .chapter-grid--media-right > .chapter-copy {
    grid-column: auto; grid-row: auto;
  }
  .case-anchor .chapter-media-col > .metric { margin-top: 18px; }
}

/* ============================================================
   READING DEPTH — one case study, three lengths
   The deep dive is the default and the only view present without
   JavaScript. The two short views are authored as scrollytelling:
   sticky stages driven by a scroll-progress custom property (--p,
   0 → 1) and a discrete beat index, both written by main.js. No
   ScrollTrigger — a hidden view measures as zero and would spend
   its reveals before anyone saw them.
   ============================================================ */
.depth-boot #page { opacity: 0; }
#page { transition: opacity .28s ease; }
[data-depth-view][hidden] { display: none !important; }
.sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ============================================================================
   ACCESSIBILITY SAFETY NETS — added 2026-07-30 after a full audit.
   ============================================================================

   1. REDUCED MOTION CATCH-ALL.
   Every animation on this site already has a hand-written reduced-motion
   fallback, and GSAP is guarded in JS. This is the net underneath that, so a
   future animation cannot ship without one. Durations collapse rather than
   being set to `none`, because several transitions here are load-bearing —
   the depth-view swap and the overlay open/close both rely on a transition
   ending — and `animation: none` would strand elements mid-state.

   2. TOUCH TARGETS.
   WCAG 2.5.8 (AA) requires 24x24 CSS px. Everything already cleared that, but
   several controls sat in the 28-40px range, which is uncomfortable on a phone
   even when it is technically conformant. These bring the small ones up toward
   the 44px comfort target without changing their visual size, using padding
   and min-height rather than resizing the visible chrome.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   3. THE TABLET BLOWOUT BAND (901px - 1048px).
   Four two-column grids carried px minimums in minmax() that summed to more
   than the content box at those widths, and they only collapsed to one column
   at 900px. Between 901 and ~1048px they therefore overflowed — and because
   body uses `overflow-x: clip`, that overflow produced no scrollbar: the
   right-hand column was simply cut off with no way to reach it.
   **1024px — iPad landscape — sits inside three of the four bands.**

   Worst offenders and the viewport each actually needed:
     .act--fulcrum .chapter-grid--media-led  880px min -> needed 1048px
     .pnc-outcome-grid                       850px min -> needed 1012px
     .finance-outcome-grid                   830px min ->  needed 988px
     .chapter-grid--media-led                830px min ->  needed 988px
     .mobile-story                     780px + 5vw gap ->  needed 1000px

   Fixed by relaxing the track minimums to 0 in that band while keeping the fr
   proportions, so the two-column composition survives instead of collapsing
   early. `min-width: 0` on the children is required with it — grid items
   default to `min-width: auto`, which is the actual cause of grid blowout. */
@media (max-width: 1080px) {
  .chapter-grid--media-led { grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); }
  .act--fulcrum .chapter-grid--media-led { grid-template-columns: minmax(0,.66fr) minmax(0,1.34fr); }
  .pnc-outcome-grid { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); }
  .finance-outcome-grid { grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr); }
  .mobile-story { grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); }
  .chapter-grid--media-led > *,
  .pnc-outcome-grid > *,
  .finance-outcome-grid > *,
  .mobile-story > * { min-width: 0; }
}

.dd-opt { min-height: 40px; }
.ctx-direct-row { min-height: 44px; }
.anc-lightbox-close { min-width: 44px; min-height: 44px; }
.cv-contact-icon { min-width: 44px; min-height: 44px; }
/* .term is deliberately NOT enlarged. It sits inline inside running prose, and
   WCAG 2.5.8 exempts inline targets for exactly this reason — any attempt to
   pad it to 44px either wrecks the line box or floats an invisible overlay
   across the lines above and below, which would swallow taps on neighbouring
   links. Left as an inline affordance with cursor:help and a dotted underline. */

/* ---------- confidentiality / provenance note ----------
   Used where a case study is published in sanitized form, or where the
   interface frames are faithful rebuilds rather than production captures.
   Says so once, plainly, near the top — so a reviewer never has to wonder. */
.conf-note {
  max-width: 62ch; margin: 34px auto 0; padding: 15px 20px;
  border: 1px solid rgba(245,242,235,.10); border-radius: 14px;
  background: rgba(245,242,235,.022);
  color: var(--gray); font-size: var(--t-caption); line-height: 1.72; text-align: left;
}
.conf-note b { color: var(--ink); font-weight: 500; }
.conf-note .cn-label {
  display: block; margin-bottom: 7px;
  color: var(--shu-text); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
}
@media (max-width: 560px) { .conf-note { margin-inline: 4px; padding: 14px 16px; font-size: var(--t-caption); } }

/* Slim variant for the story hero, where the full note was a fourth block of
   prose above the fold. The complete version still runs in overview and deep. */
.conf-note--slim {
  max-width: none; width: auto; display: inline-block;
  margin: 26px auto 0; padding: 8px 15px; border-radius: 999px;
  color: var(--gray); font-size: var(--t-caption); line-height: 1.55; text-align: center;
}
@media (max-width: 560px) { .conf-note--slim { display: block; max-width: 34ch; border-radius: 14px; } }

/* ---------- the switcher in each hero ---------- */
.depth-switch { margin-top: 44px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ds-label { color: var(--gray); font-size: var(--t-label); letter-spacing: .24em; text-transform: uppercase; }
.ds-track {
  position: relative; display: inline-flex; padding: 5px; border-radius: 999px;
  background: rgba(245,242,235,.03);
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(245,242,235,.10);
  box-shadow: inset 0 1px 0 rgba(245,242,235,.10), 0 14px 40px rgba(0,0,0,.45);
}
.ds-opt {
  position: relative; appearance: none; -webkit-appearance: none; cursor: pointer;
  font: inherit; color: var(--gray); background: transparent; border: 0;
  padding: 11px 22px 10px; border-radius: 999px; text-align: center;
  display: flex; flex-direction: column; gap: 4px; min-width: 116px;
  transition: color .3s ease, background .35s cubic-bezier(.2,.8,.2,1);
}
.ds-opt b { font-family: var(--display); font-weight: 500; font-size: var(--t-small); letter-spacing: -.015em; }
.ds-opt span { font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; opacity: .72; }
.ds-opt:hover { color: var(--ink); background: rgba(245,242,235,.05); }
.ds-opt.is-on { color: var(--ink); background: rgba(245,242,235,.085); box-shadow: inset 0 1px 0 rgba(245,242,235,.14); }
.ds-opt.is-on span { color: var(--shu-text); opacity: 1; }
.ds-opt:active { transform: scale(.975); }

/* ---------- the floating dock, once the hero is behind you ---------- */
.depth-dock {
  position: fixed; left: 50%; bottom: 22px; z-index: 78;
  transform: translate(-50%, 22px); opacity: 0; visibility: hidden;
  transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1), visibility .4s;
}
.depth-dock.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.modal-open .depth-dock { opacity: 0 !important; visibility: hidden !important; }
.dd-track {
  display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(16,16,18,.62);
  -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  border: 1px solid rgba(245,242,235,.11);
  box-shadow: 0 16px 44px rgba(0,0,0,.6);
}
.dd-opt {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  color: var(--gray); background: transparent; border: 0;
  padding: 8px 16px; border-radius: 999px; font-size: var(--t-caption); letter-spacing: .06em;
  transition: color .28s ease, background .3s ease;
}
.dd-opt:hover { color: var(--ink); background: rgba(245,242,235,.06); }
.dd-opt.is-on { color: var(--ink); background: rgba(245,242,235,.10); }

/* ---------- the exit ramp at the end of every version ---------- */
.depth-exit { text-align: center; padding: 12vh 8vw 2vh; }
.depth-exit > p {
  font-family: var(--display); font-weight: 500; letter-spacing: -.025em;
  font-size: var(--t-h3); color: var(--ink); max-width: 24ch; margin-inline: auto;
}
.depth-exit-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.depth-exit-row .glass-pill { margin-top: 0; }

/* ---------- lite reveal + the scroll-progress stage ---------- */
.kicker .no.rule-lite { display: inline-block; margin-right: 14px; vertical-align: middle; transform-origin: 0 50%; }
.kicker .no.rule-lite::before {
  content: ""; display: inline-block; width: 26px; height: 5px; vertical-align: middle;
  background: var(--shu-deep, var(--shu));
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
}
[data-lite] > * { opacity: 0; transform: translateY(24px); transition: opacity .66s cubic-bezier(.2,.8,.2,1), transform .72s cubic-bezier(.2,.8,.2,1); }
[data-lite].lite-in > * { opacity: 1; transform: none; }
[data-lite].lite-in > *:nth-child(2) { transition-delay: .07s; }
[data-lite].lite-in > *:nth-child(3) { transition-delay: .14s; }
[data-lite].lite-in > *:nth-child(4) { transition-delay: .21s; }

/* The one primitive both short views are built on. --p runs 0 → 1 as the
   track passes the viewport; the stage inside stays put while it does. */
[data-lite-track] { --p: 0; position: relative; }
.lt-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}

/* ============================================================
   VIEW 01 — THE STORY (90 sec)
   Rhythm borrowed from the references: a small label, one large
   line, one short sentence, and a large moving thing.
   ============================================================ */

/* --- hero: ledger rules breathing under the type --- */
.story-hero { position: relative; overflow: hidden; }
.story-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.story-hero-bg .shb-rules {
  position: absolute; inset: -10% -5%;
  -webkit-mask: radial-gradient(120% 90% at 50% 44%, #000 20%, transparent 78%);
  mask: radial-gradient(120% 90% at 50% 44%, #000 20%, transparent 78%);
  animation: shbDrift 34s ease-in-out infinite alternate;
}
.story-hero-bg .shb-rules::before,
.story-hero-bg .shb-rules::after { content: ""; position: absolute; inset: 0; }
@keyframes shbDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-42px,-26px,0); } }

/* ------------------------------------------------------------------
   v0.123 — each case study gets its own hero texture.
   One shared grid behind four different stories read as a template.
   Each field below is drawn from the thing the case is actually about,
   so the hero already says something before the type does. All four are
   pure gradients on the same two spans: no new assets, no extra nodes.
   ------------------------------------------------------------------ */

/* Finance · a constellation of separate legal companies, faintly wired
   together. Two dot scales for near and far entities, plus a slack net
   of diagonals standing in for the transactions between them. */
.case-finance .story-hero-bg .shb-rules {
  background-image:
    radial-gradient(circle, rgba(245,242,235,.5) 0 1.6px, transparent 1.7px),
    radial-gradient(circle, rgba(245,242,235,.2) 0 1.1px, transparent 1.2px);
  background-size: 178px 152px, 89px 76px;
  background-position: 22px 14px, 0 0;
}
.case-finance .story-hero-bg .shb-rules::before {
  background-image:
    repeating-linear-gradient(31deg, rgba(245,242,235,.07) 0 1px, transparent 1px 178px),
    repeating-linear-gradient(-24deg, rgba(245,242,235,.05) 0 1px, transparent 1px 226px);
}

/* Talent · a crowd. A fine dot field a million people deep, densest at
   the centre and thinning to nothing at the edges, drifting upward. */
.case-talent .story-hero-bg .shb-rules {
  inset: -18% -8%;
  background-image: radial-gradient(circle, rgba(245,242,235,.5) 0 1.1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask: radial-gradient(58% 62% at 50% 46%, #000 0%, rgba(0,0,0,.35) 46%, transparent 82%);
  mask: radial-gradient(58% 62% at 50% 46%, #000 0%, rgba(0,0,0,.35) 46%, transparent 82%);
  animation: shbSwarm 46s linear infinite;
}
.case-talent .story-hero-bg .shb-rules::before {
  background-image: radial-gradient(circle, rgba(245,242,235,.22) 0 1.6px, transparent 1.7px);
  background-size: 104px 104px; background-position: 13px 31px;
}
@keyframes shbSwarm { from { transform: translate3d(0,0,0); } to { transform: translate3d(-26px,-52px,0); } }

/* PNC · the wall. A stack of question rows, staggered like a form that
   never ends, dissolving as it falls away from the eye. */
/* One mask layer, not two. mask-composite:intersect did not hold here, so
   the rows ran to both edges and shouted over the type; the vignette is a
   single radial now and the rows are quieter. */
.case-pnc .story-hero-bg .shb-rules {
  background-image:
    repeating-linear-gradient(180deg, rgba(245,242,235,.055) 0 6px, transparent 6px 33px);
  -webkit-mask: radial-gradient(96% 86% at 50% 46%, #000 10%, transparent 72%);
  mask: radial-gradient(96% 86% at 50% 46%, #000 10%, transparent 72%);
  animation: shbFall 40s ease-in-out infinite alternate;
}
/* two soft gutters punched through the rows, so it reads as a column of
   fields rather than ruled paper */
.case-pnc .story-hero-bg .shb-rules::after {
  background-image:
    linear-gradient(90deg, transparent 30%, #080809 38%, #080809 43%, transparent 51%),
    linear-gradient(90deg, transparent 64%, #080809 72%, #080809 77%, transparent 85%);
}
@keyframes shbFall { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-30px,0); } }

/* Anchor · a page with a rulebook attached. Prose lines held inside a
   page-shaped block, with a vermilion margin rule down its left edge and
   tick marks counting the pages off beside it.

   v0.129 — the ruled block used to sit dead-centre (left:50%, translateX(-42%))
   with a line every 17px, which put horizontal rules straight through the body
   copy and read as strikethrough. Same failure PNC hit and fixed above. The
   page now sits OFF to the right as an object beside the type rather than
   under it, the rule pitch is looser, the contrast is down, and a scrim
   guarantees clean ground behind the words regardless of viewport. */
.case-anchor .story-hero-bg .shb-rules {
  inset: 0; animation: none;
  -webkit-mask: none; mask: none;
}
.case-anchor .story-hero-bg .shb-rules::before {
  left: auto; right: -4%; top: 8%; bottom: 8%;
  width: min(460px, 34vw); transform: none;
  background-image:
    repeating-linear-gradient(180deg, rgba(245,242,235,.05) 0 1px, transparent 1px 26px),
    linear-gradient(90deg, rgba(195,21,55,.26) 0 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%;
  background-position: 0 0, 44px 0;
  -webkit-mask: linear-gradient(180deg, transparent, #000 20%, #000 60%, transparent 94%);
  mask: linear-gradient(180deg, transparent, #000 20%, #000 60%, transparent 94%);
}
.case-anchor .story-hero-bg .shb-rules::after {
  left: auto; right: -4%; top: 8%; bottom: 8%;
  width: min(460px, 34vw); transform: none;
  background-image: repeating-linear-gradient(180deg, rgba(245,242,235,.17) 0 1px, transparent 1px 78px);
  background-size: 12px 100%; background-repeat: no-repeat; background-position: 12px 0;
  -webkit-mask: linear-gradient(180deg, transparent, #000 24%, #000 56%, transparent 90%);
  mask: linear-gradient(180deg, transparent, #000 24%, #000 56%, transparent 90%);
  animation: shbPage 26s ease-in-out infinite alternate;
}
@keyframes shbPage { from { transform: translateY(0); } to { transform: translateY(-30px); } }
/* The scrim. Sits above the texture and below .ch-inner (z-index 3), so the
   copy always has quiet ground under it however the page reflows. */
.case-anchor .story-hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  /* Sits over the copy block and falls away by ~58% height. That falloff was
     originally tuned so the vermilion brush thread still read underneath it;
     the thread was removed 2026-07-31, but the shape is still the right one
     for its actual job, which is keeping quiet ground under the headline. */
  background:
    radial-gradient(70% 54% at 46% 40%, rgba(8,8,9,.96) 0%, rgba(8,8,9,.88) 45%, rgba(8,8,9,.45) 72%, transparent 90%);
}
/* Below the fold on narrow screens the page has nowhere to go, so it steps
   aside entirely rather than crowding a single-column hero. */
@media (max-width: 900px) {
  .case-anchor .story-hero-bg .shb-rules::before,
  .case-anchor .story-hero-bg .shb-rules::after { opacity: .45; right: -22%; }
}
.story-hero .ch-inner { position: relative; z-index: 3; }
.casehero--story h1 { max-width: 15ch; }
.casehero--story h1 em {
  font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400;
  color: var(--shu-text); letter-spacing: -.01em;
}
.casehero--story .ch-lede { max-width: 46ch; }
/* Emphasis inside a lede reads as ink weight, not a second typeface. Instrument
   Serif is reserved for display-size accent words (see the h1 rule above). */
.casehero--story .ch-lede em { font-style: normal; font-weight: 500; color: var(--ink); }
/* The falling-ink scroll cue. Started life in the story hero; v0.130 put it in
   all three depth heroes, each carrying that view's own measured length, so the
   commitment you are making is stated once more at the moment you start
   scrolling. The overview and deep heroes carry more furniture above it (a jump
   index, a stat row, a hint line), so they get a little more air. */
.story-scrollcue { margin-top: 42px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--gray); }
.casehero--overview .story-scrollcue,
.casehero--emblem .story-scrollcue { margin-top: 50px; }
/* Set by main.js when the cue would land below the fold, where "scroll" is
   advice you can only read by having already scrolled. */
.story-scrollcue.cue-belowfold { display: none; }
.story-scrollcue span { font-size: var(--t-label); letter-spacing: .28em; text-transform: uppercase; }
.story-scrollcue i {
  width: 1px; height: 44px; background: linear-gradient(180deg, transparent, rgba(245,242,235,.5), transparent);
  animation: cueFall 2.4s ease-in-out infinite;
}
@keyframes cueFall { 0%,100% { transform: scaleY(.35); transform-origin: 50% 0; opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* --- shared stage furniture --- */
.lt-head { position: relative; z-index: 4; padding: 0 8vw; max-width: 1280px; margin: 0 auto; width: 100%; }
.lt-head .kicker { margin-bottom: 16px; }
.lt-h {
  font-family: var(--display); font-weight: 500; letter-spacing: -.035em;
  font-size: clamp(30px, 4.4vw, 62px); line-height: 1.04; text-wrap: balance; max-width: 18ch;
}
.lt-h b { font-weight: 500; color: var(--shu-text); }
.lt-beats { position: relative; margin-top: 20px; min-height: 4.6em; max-width: 44ch; }
.lt-beats p {
  position: absolute; inset: 0; color: var(--gray); font-size: var(--t-small); line-height: 1.75;
  opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.lt-beats p.is-on { opacity: 1; transform: none; }

/* --- pull quotes: the two lines worth stopping for --- */
.story-pull { padding: clamp(90px, 16vh, 200px) 8vw; text-align: center; }
.story-pull p {
  margin-inline: auto; max-width: 26ch;
  font-family: var(--display); font-weight: 500; letter-spacing: -.035em;
  font-size: clamp(28px, 4.6vw, 64px); line-height: 1.1; text-wrap: balance;
}
.story-pull p em {
  font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400;
  color: var(--shu-text); letter-spacing: -.01em;
}
.story-pull--rule { position: relative; }
.story-pull--rule::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(680px, 70vw); height: 5px;
  transform: translateX(-50%) scaleX(0); transform-origin: 50% 50%;
  background: var(--shu-deep);
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  transition: transform 1.1s cubic-bezier(.3,.8,.3,1);
}
.story-pull--rule.lite-in::before { transform: translateX(-50%) scaleX(1); }

/* ============ SCENE 01 · the web of Amazon's own companies ============ */
.track-web { height: 240vh; }
.track-web .lt-stage { justify-content: flex-start; padding-top: clamp(90px, 14vh, 150px); }
.web-field { position: absolute; inset: 0; z-index: 1; }
.web-field svg { width: 100%; height: 100%; }
.web-field .wf-link {
  fill: none; stroke: rgba(245,242,235,.26); stroke-width: 1.1; stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - var(--o)) * 7), 1));
}
.web-field .wf-link--hot { stroke: rgba(195,21,55,.75); stroke-width: 1.6; }
.web-field .wf-node {
  fill: rgba(245,242,235,.62);
  opacity: clamp(0, calc((var(--p) - var(--o)) * 12), 1);
  transform: scale(clamp(.3, calc((var(--p) - var(--o)) * 12), 1));
  transform-origin: center; transform-box: fill-box;
}
.web-field .wf-node--hot { fill: var(--shu); }
.web-field .wf-label {
  fill: var(--gray); font-family: var(--sans); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase;
  opacity: clamp(0, calc((var(--p) - var(--o)) * 9), .9);
}
.web-tally {
  position: absolute; left: 8vw; bottom: clamp(40px, 8vh, 90px); z-index: 4;
  display: flex; align-items: flex-end; gap: 18px;
  opacity: clamp(0, calc((var(--p) - .34) * 6), 1);
}
.web-tally b {
  font-family: var(--display); font-weight: 500; letter-spacing: -.045em; line-height: .84;
  font-size: clamp(64px, 12vw, 168px); color: var(--ink);
}
.web-tally b i { font-style: normal; color: var(--shu-text); }
.web-tally span { color: var(--gray); font-size: var(--t-caption); line-height: 1.5; max-width: 17ch; padding-bottom: .7em; }

/* ============ SCENE 02 · the ledger, matched by hand ============ */
.track-desk { height: 285vh; }
.track-desk .lt-stage { justify-content: flex-start; padding-top: clamp(84px, 12vh, 130px); }
.desk-book {
  position: relative; z-index: 2; margin-top: clamp(26px, 4vh, 48px);
  padding: 0 8vw; max-width: 1280px; width: 100%; margin-inline: auto;
  -webkit-mask: linear-gradient(180deg, #000 62%, transparent 99%);
  mask: linear-gradient(180deg, #000 62%, transparent 99%);
}
.desk-row {
  display: grid; grid-template-columns: minmax(0,1.5fr) 96px minmax(0,1fr) 106px;
  align-items: center; gap: 16px; padding: 9px 0;
  border-bottom: 1px solid rgba(245,242,235,.07);
  opacity: clamp(0, calc((var(--p) - var(--o)) * 24), 1);
}
.desk-row > s { text-decoration: none; color: var(--gray); font-size: var(--t-caption); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-row > s b { color: rgba(245,242,235,.5); font-weight: 400; margin: 0 7px; }
/* Real figures stay off a public page; the ledger reads without them. */
.desk-row .dr-amt { display: flex; align-items: center; justify-content: flex-end; gap: 5px; text-decoration: none; color: rgba(245,242,235,.34); font-size: var(--t-caption); }
.desk-row .dr-amt i { display: block; width: 54px; height: 8px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(245,242,235,.24) 0 5px, transparent 5px 9px); }
.desk-row--off .dr-amt i { background: repeating-linear-gradient(90deg, rgba(195,21,55,.6) 0 5px, transparent 5px 9px); }
.desk-row .dr-tie { position: relative; height: 6px; }
.desk-row .dr-tie::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(245,242,235,.5);
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  transform: scaleX(clamp(0, calc((var(--p) - var(--o) - .012) * 34), 1)); transform-origin: 0 50%;
}
.desk-row--off .dr-tie::before { background: var(--shu-deep); transform: scaleX(clamp(0, calc((var(--p) - var(--o) - .012) * 34), .42)); }
.desk-row .dr-flag {
  justify-self: start; font-size: var(--t-caption); letter-spacing: .18em; color: var(--shu-text);
  border: 1px solid rgba(195,21,55,.45); border-radius: 3px; padding: 3px 6px;
  opacity: clamp(0, calc((var(--p) - var(--o) - .04) * 20), 1);
}
.desk-slips { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.desk-slip {
  position: absolute; padding: 12px 15px; border-radius: 10px;
  border: 1px solid rgba(245,242,235,.14); background: rgba(18,18,20,.94);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 22px 54px rgba(0,0,0,.62); max-width: 260px;
}
.desk-slip b { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t-caption); letter-spacing: -.01em; }
.desk-slip span { display: block; margin-top: 5px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .07em; }
.desk-slip--mail {
  right: 7vw; top: 34%;
  opacity: clamp(0, calc((var(--p) - .42) * 9), 1);
  transform: rotate(2.6deg) translateY(calc(26px - clamp(0px, calc((var(--p) - .42) * 240px), 26px)));
}
.desk-slip--policy {
  right: 13vw; top: 52%;
  opacity: clamp(0, calc((var(--p) - .52) * 9), 1);
  transform: rotate(-2.2deg) translateY(calc(26px - clamp(0px, calc((var(--p) - .52) * 240px), 26px)));
}
.desk-clockline {
  position: absolute; left: 8vw; right: 8vw; bottom: clamp(34px, 7vh, 76px); z-index: 4;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  opacity: clamp(0, calc((var(--p) - .66) * 8), 1);
}
.desk-clockline .dcl-l span { display: block; color: var(--gray); font-size: var(--t-caption); letter-spacing: .26em; }
.desk-clockline .dcl-l b {
  display: block; margin-top: 8px; font-family: var(--display); font-weight: 500;
  font-size: clamp(34px, 5.4vw, 74px); letter-spacing: -.04em; line-height: .9; color: var(--shu-text);
}
.desk-clockline .dcl-r { color: var(--gray); font-size: var(--t-caption); line-height: 1.6; max-width: 26ch; text-align: right; }

/* ============ SCENE 03 · what it was costing ============ */
.track-stakes { height: 240vh; }
.track-stakes .lt-stage { justify-content: center; }
.track-stakes .lt-head { text-align: center; }
.stakes-rotor { position: relative; padding: 0 8vw; max-width: 1280px; margin-inline: auto; width: 100%; min-height: 46vh; }
.stakes-rotor article {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  opacity: 0; transform: translateY(26px); transition: opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.stakes-rotor article.is-on { opacity: 1; transform: none; }
.stakes-rotor b {
  font-family: var(--display); font-weight: 500; letter-spacing: -.05em; line-height: .86;
  font-size: clamp(74px, 15vw, 230px); color: var(--ink);
}
.stakes-rotor b em { font-style: normal; font-size: .52em; vertical-align: .34em; color: var(--shu-text); }
.stakes-rotor b.is-word { font-size: clamp(48px, 9vw, 140px); letter-spacing: -.04em; color: var(--shu-text); }
.stakes-rotor p { margin: 30px auto 0; color: var(--gray); font-size: var(--t-body); line-height: 1.65; max-width: 34ch; }
.stakes-rail { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(40px, 8vh, 84px); display: flex; gap: 10px; z-index: 4; }
.stakes-rail i { width: 46px; height: 3px; border-radius: 3px; background: rgba(245,242,235,.14); transition: background .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); transform-origin: 0 50%; }
.stakes-rail i.is-on { background: var(--shu); transform: scaleY(1.8); }

/* ============ SCENE 04 · the three tools ============ */
.track-tools { height: 265vh; }
.track-tools .lt-stage { justify-content: center; gap: clamp(22px, 4vh, 46px); }
.tool-rack {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 22px); padding: 0 8vw; max-width: 1280px; margin-inline: auto; width: 100%;
}
.tool-rack figure {
  position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(245,242,235,.09);
  background: #0C0C0E; opacity: .26; transform: scale(.93) translateY(10px); filter: saturate(.5);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1), filter .6s ease, border-color .5s ease;
}
.tool-rack figure.is-on { opacity: 1; transform: none; filter: none; border-color: rgba(245,242,235,.24); }
.tool-rack figure::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(195,21,55,0); transition: box-shadow .6s ease;
}
.tool-rack figure.is-on::after { box-shadow: inset 0 0 0 1px rgba(195,21,55,.4); }
.tool-rack video { width: 100%; height: clamp(150px, 26vh, 260px); object-fit: cover; object-position: top; display: block; }
.tool-copy { position: relative; z-index: 3; padding: 0 8vw; max-width: 1280px; margin-inline: auto; width: 100%; min-height: 12.5em; }
.tool-copy article {
  position: absolute; left: 8vw; right: 8vw; top: 0;
  opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .62s cubic-bezier(.2,.8,.2,1);
}
.tool-copy article.is-on { opacity: 1; transform: none; }
.tool-copy span { display: block; color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .2em; }
.tool-copy h3 {
  margin-top: 14px; font-family: var(--display); font-weight: 500; letter-spacing: -.032em;
  font-size: var(--t-h3); line-height: 1.08; max-width: 20ch; text-wrap: balance;
}
.tool-copy p { margin-top: 14px; color: var(--gray); font-size: var(--t-small); line-height: 1.72; max-width: 52ch; }

/* ============ SCENE 05 · the choice at eleven at night ============ */
.track-fork { height: 195vh; }
.fork-field { position: absolute; inset: 0; z-index: 1; }
.fork-field svg { width: 100%; height: 100%; }
.fork-field .ff-path {
  fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - .16) * 2.6), 1));
}
.fork-field .ff-path--old { stroke: rgba(245,242,235,.2); }
.fork-field .ff-path--new { stroke: rgba(245,242,235,.2); transition: stroke .8s ease; }
.track-fork[data-late="1"] .ff-path--new { stroke: rgba(195,21,55,.85); }
.fork-cap { position: absolute; z-index: 3; text-align: center; opacity: clamp(0, calc((var(--p) - .58) * 6), 1); }
.fork-cap b { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t-lede); letter-spacing: -.02em; }
.fork-cap span { display: block; margin-top: 7px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .06em; }
.fork-cap--old { left: 11%; bottom: 13%; }
.fork-cap--new { right: 11%; bottom: 13%; }
.fork-cap--new b { color: var(--shu-text); }
.fork-ask { position: relative; z-index: 4; padding: 0 8vw; max-width: 1280px; margin-inline: auto; width: 100%; text-align: center; }
.fork-ask .kicker { justify-content: center; }
.fork-ask q {
  display: block; margin-inline: auto; max-width: 20ch; quotes: none;
  font-family: var(--display); font-weight: 500; letter-spacing: -.038em;
  font-size: clamp(30px, 5vw, 76px); line-height: 1.06; text-wrap: balance;
}
.fork-ask p { margin: 26px auto 0; color: var(--gray); font-size: var(--t-small); line-height: 1.75; max-width: 52ch; }

/* ============ SCENE 06 · what happened ============ */
.story-result { padding: clamp(100px, 16vh, 190px) 8vw clamp(60px, 9vh, 110px); max-width: 1280px; margin-inline: auto; }
.story-result .lt-h { max-width: none; margin-top: 4px; }
.result-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3.4vw, 56px); margin-top: 46px; align-items: start; }
.result-wall article { position: relative; padding-top: 26px; }
.result-wall article::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: rgba(245,242,235,.3); transform: scaleX(0); transform-origin: 0 50%;
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  transition: transform 1s cubic-bezier(.3,.8,.3,1);
}
.result-wall.is-active article::before { transform: scaleX(1); }
.result-wall.is-active article:nth-child(2)::before { transition-delay: .16s; }
.result-wall.is-active article:nth-child(3)::before { transition-delay: .32s; }
.result-wall article.hot::before { background: var(--shu-deep); }
/* One type size for every figure, vermilion included: the accent carries the
   emphasis, so the numerals stay on a single scale and their captions all
   start on the same line. nowrap keeps that true at any viewport. */
.result-wall b {
  display: block; font-family: var(--display); font-weight: 500; letter-spacing: -.045em; line-height: .92;
  font-size: clamp(40px, 5vw, 78px); white-space: nowrap;
}
.result-wall article.hot b { color: var(--shu-text); }
.result-wall b em { font-style: normal; }
.result-wall p { margin-top: 20px; color: var(--gray); font-size: var(--t-caption); line-height: 1.72; max-width: 27ch; }
.story-note {
  margin-top: clamp(52px, 8vh, 92px); padding-top: 30px; border-top: 1px solid var(--hairline);
  color: rgba(245,242,235,.84); font-size: var(--t-lede); line-height: 1.68; max-width: 54ch;
}
.story-note b { color: var(--ink); font-weight: 500; }

/* ============================================================
   VIEW 02 — THE OVERVIEW (3 min)
   A readout, not an essay: spec blocks, diagrams and meters
   carrying the load that paragraphs were carrying before.
   ============================================================ */
.casehero--overview h1 { max-width: 15ch; }
.ov-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 38px; }
.ov-index a {
  text-decoration: none; color: var(--gray); font-size: var(--t-caption); letter-spacing: .1em;
  padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(245,242,235,.10);
  background: rgba(245,242,235,.02); transition: color .28s ease, border-color .3s ease, background .3s ease;
}
.ov-index a:hover { color: var(--ink); border-color: rgba(245,242,235,.26); background: rgba(245,242,235,.055); }
.ov-index a b { color: var(--shu-text); font-weight: 400; margin-right: 8px; }

.ov-act { max-width: 1280px; margin: 0 auto; padding: clamp(78px, 11vh, 140px) 8vw; scroll-margin-top: 96px; }
.ov-head { max-width: 62ch; }
.ov-head h2 {
  font-family: var(--display); font-weight: 500; letter-spacing: -.034em;
  font-size: var(--t-h2); line-height: 1.08; text-wrap: balance;
}
.ov-lede { margin-top: 18px; color: var(--gray); font-size: var(--t-small); line-height: 1.8; max-width: 56ch; }

/* --- the spec block --- */
.ov-spec { border-top: 1px solid rgba(245,242,235,.18); margin-top: 8px; }
.ov-spec > div {
  display: grid; grid-template-columns: minmax(150px, .5fr) 2fr; gap: clamp(16px, 4vw, 60px);
  padding: 19px 6px; border-bottom: 1px solid var(--hairline); align-items: baseline;
  transition: background .35s ease, padding-left .4s cubic-bezier(.2,.8,.2,1);
}
.ov-spec > div:hover { background: rgba(245,242,235,.022); padding-left: 14px; }
.ov-spec span { color: var(--gray); font-size: var(--t-caption); letter-spacing: .24em; }
.ov-spec b {
  font-family: var(--display); font-weight: 500; letter-spacing: -.02em;
  font-size: var(--t-lede); line-height: 1.35;
}
.ov-spec b.hot { color: var(--shu-text); }

/* --- before → after, as a diagram rather than a paragraph --- */
.ov-shift { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(18px, 3.4vw, 48px); align-items: center; margin-top: 46px; }
.ov-shift-side span { display: block; color: var(--gray); font-size: var(--t-caption); letter-spacing: .24em; margin-bottom: 18px; }
.ov-shift-side i {
  display: block; font-style: normal; padding: 12px 16px; margin-bottom: 8px; border-radius: 10px;
  border: 1px solid var(--hairline); background: rgba(245,242,235,.016);
  font-size: var(--t-caption); line-height: 1.4; color: var(--gray);
  opacity: 0; transform: translateX(-14px);
  transition: opacity .55s ease, transform .66s cubic-bezier(.2,.8,.2,1), color .5s ease, border-color .5s ease;
}
.ov-shift.is-active .ov-shift-side i { opacity: 1; transform: none; }
.ov-shift-side i:nth-child(3) { transition-delay: .06s; }
.ov-shift-side i:nth-child(4) { transition-delay: .12s; }
.ov-shift-side i:nth-child(5) { transition-delay: .18s; }
.ov-shift-side i:nth-child(6) { transition-delay: .24s; }
.ov-shift-after span { color: var(--shu-text); }
.ov-shift-after i { transform: translateX(14px); }
.ov-shift.is-active .ov-shift-after i { color: var(--ink); border-color: rgba(195,21,55,.34); background: rgba(195,21,55,.05); }
.ov-shift-after i:nth-child(2) { transition-delay: .3s; }
.ov-shift-after i:nth-child(3) { transition-delay: .36s; }
.ov-shift-after i:nth-child(4) { transition-delay: .42s; }
.ov-shift-after i:nth-child(5) { transition-delay: .48s; }
.ov-shift-after i:nth-child(6) { transition-delay: .54s; }
.ov-shift-mid { position: relative; width: clamp(46px, 7vw, 96px); height: 6px; }
.ov-shift-mid::before {
  content: ""; position: absolute; inset: 0; background: var(--shu-deep);
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.3,.8,.3,1) .24s;
}
.ov-shift.is-active .ov-shift-mid::before { transform: scaleX(1); }
.ov-assignment { margin-top: clamp(38px, 5vh, 58px); color: var(--gray); font-size: var(--t-small); line-height: 1.8; max-width: 74ch; }
.ov-assignment b { color: var(--ink); font-weight: 500; }

/* --- owned / shaped / with, as a manifest --- */
.ov-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); margin-top: 48px; }
.ovc-tag { display: flex; align-items: center; gap: 12px; color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .2em; padding-bottom: 16px; border-bottom: 1px solid rgba(245,242,235,.16); }
.ovc-tag em { font-style: normal; color: var(--gray); margin-left: auto; letter-spacing: .1em; }
.ov-columns ol { list-style: none; counter-reset: ovc; }
.ov-columns li {
  counter-increment: ovc; position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid var(--hairline);
  color: var(--gray); font-size: var(--t-caption); line-height: 1.58;
  opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.ov-columns.is-active li { opacity: 1; transform: none; }
.ov-columns.is-active li:nth-child(2) { transition-delay: .07s; }
.ov-columns.is-active li:nth-child(3) { transition-delay: .14s; }
.ov-columns.is-active li:nth-child(4) { transition-delay: .21s; }
.ov-columns.is-active li:nth-child(5) { transition-delay: .28s; }
/* A drawn tick rather than a number: the list reads as a manifest, not an essay. */
.ov-columns li::before {
  content: ""; width: 14px; height: 5px; margin-top: 7px; background: rgba(245,242,235,.34);
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.3,.8,.3,1), background .5s ease;
}
.ov-columns.is-active li::before { transform: scaleX(1); }
.ov-columns li:hover::before { background: var(--shu); }
.ov-columns li b { grid-column: 2; display: block; color: var(--ink); font-family: var(--display); font-weight: 500; font-size: var(--t-small); letter-spacing: -.018em; line-height: 1.28; }
.ov-columns li span { grid-column: 2; display: block; margin-top: 6px; }
.ov-columns li:hover { color: rgba(245,242,235,.86); }

/* ================================================================
   AT A GLANCE, AS A MOSAIC OF FACTS
   Replaces the label/value spec list and the before/after column
   pair. Same facts, carried by magnitude and micro-diagram instead
   of by sentences. Every tile is inert decoration plus one number.
   ================================================================ */
.ov-mosaic {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.1vw, 16px); margin-top: clamp(30px, 4vh, 46px);
}
.ov-mosaic--map { grid-template-columns: repeat(6, 1fr); }
.ovm {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 12px; min-height: 186px; padding: clamp(20px, 2vw, 30px);
  border: 1px solid rgba(245,242,235,.055); border-radius: clamp(16px, 1.7vw, 24px); overflow: hidden;
  background: rgba(245,242,235,.026);
  box-shadow: inset 0 1px 0 rgba(245,242,235,.045);
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1), border-color .4s ease, background .4s ease;
}
.ov-mosaic.is-active .ovm { opacity: 1; transform: none; }
.ov-mosaic.is-active .ovm:nth-child(2) { transition-delay: .05s; }
.ov-mosaic.is-active .ovm:nth-child(3) { transition-delay: .1s; }
.ov-mosaic.is-active .ovm:nth-child(4) { transition-delay: .15s; }
.ov-mosaic.is-active .ovm:nth-child(5) { transition-delay: .2s; }
.ov-mosaic.is-active .ovm:nth-child(6) { transition-delay: .25s; }
.ov-mosaic.is-active .ovm:nth-child(7) { transition-delay: .3s; }
.ov-mosaic.is-active .ovm:nth-child(8) { transition-delay: .35s; }
.ov-mosaic.is-active .ovm:nth-child(9) { transition-delay: .4s; }
.ovm:hover { border-color: rgba(245,242,235,.13); background: rgba(245,242,235,.042); }
.ovm--hero, .ovm--wide, .ovm--2 { grid-column: span 2; }
.ovm--3 { grid-column: span 3; }
.ovm--4 { grid-column: span 4; }
.ovm--hero { min-height: 222px; }
/* The micro-diagrams are absolutely positioned, so the text they sit
   beside has to be lifted out of their paint order explicitly. */
.ovm figcaption, .ovm > b, .ovm-bars, .ovm-span, .ovm-orbit { position: relative; z-index: 1; }
.ovm figcaption {
  color: var(--gray); font-size: var(--t-caption); letter-spacing: .22em; line-height: 1.6;
}
.ovm > b {
  font-family: var(--display); font-weight: 500; color: var(--ink);
  font-size: var(--t-h2); letter-spacing: -.04em; line-height: .92;
}
.ovm > b.hot { color: var(--shu-text); }
.ovm-alt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the hero tile: two bars, one long, one almost gone */
.ovm--hero { justify-content: center; gap: clamp(16px, 2vw, 26px); }
.ovm-bars { display: flex; flex-direction: column; gap: 14px; }
.ovmb { display: flex; align-items: center; gap: 14px; }
.ovmb-fill {
  display: block; height: 10px; border-radius: 2px; flex: none;
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(.22,.9,.24,1);
}
.ovmb-fill--before { width: 68%; background: rgba(245,242,235,.22); }
.ovmb-fill--after { width: 3.5%; min-width: 12px; background: var(--shu); transition-delay: .45s; }
.ov-mosaic.is-active .ovmb-fill { transform: scaleX(1); }
.ovmb span { color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em; white-space: nowrap; }
.ovmb span.hot { color: var(--shu-text); }

/* 1M+ employees: a field of people, not a sentence about them */
.ovm-field {
  position: absolute; inset: 0 0 auto 0; height: 74px; opacity: .3; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(245,242,235,.9) .9px, transparent 1px);
  background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}

/* 40 -> 1 and 8 -> 1: many marks resolving into one */
.ovm-arrow { display: flex; align-items: baseline; gap: 10px; }
.ovm-arrow s { text-decoration: none; color: var(--gray); font-size: .42em; }
.ovm-converge, .ovm-gates {
  position: absolute; top: clamp(18px, 1.7vw, 26px); right: clamp(18px, 1.7vw, 26px);
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: 4px; width: 74px; pointer-events: none;
}
.ovm-converge i, .ovm-gates i {
  width: 5px; height: 5px; border-radius: 1px; background: rgba(245,242,235,.24);
  opacity: 0; transform: scale(.4);
  transition: opacity .5s ease, transform .5s ease;
}
.ov-mosaic.is-active .ovm-converge i, .ov-mosaic.is-active .ovm-gates i { opacity: 1; transform: none; }
.ovm-converge em, .ovm-gates em {
  width: 9px; height: 9px; border-radius: 50%; background: var(--shu); margin-left: 6px;
  opacity: 0; transform: scale(.2); transition: opacity .5s ease .5s, transform .6s cubic-bezier(.2,1.4,.4,1) .5s;
}
.ov-mosaic.is-active .ovm-converge em, .ov-mosaic.is-active .ovm-gates em { opacity: 1; transform: none; }
.ovm-gates { width: 94px; }
.ovm-gates i { width: 5px; height: 14px; border-radius: 2px; }
.ovm-gates em { margin-left: 8px; }

/* the role tile: a span, drawn */
.ovm--wide { justify-content: center; gap: 18px; }
.ovm-role { font-size: var(--t-h3)!important; }
.ovm-span { display: flex; align-items: center; gap: 12px; }
.ovm-span > span { color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em; white-space: nowrap; }
.ovm-rail { position: relative; flex: 1; height: 1px; background: rgba(245,242,235,.18); display: flex; align-items: center; justify-content: space-between; }
.ovm-rail s {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink); text-decoration: none;
  opacity: 0; transform: scale(.3); transition: opacity .4s ease, transform .5s cubic-bezier(.2,1.4,.4,1);
  transition-delay: calc(var(--n) * .09s + .2s);
}
.ov-mosaic.is-active .ovm-rail s { opacity: 1; transform: none; }
.ovm-rail s:first-child, .ovm-rail s:last-child { width: 9px; height: 9px; background: var(--shu); }

/* four products around one record */
.ovm-orbit { position: relative; width: 100%; height: 150px; }
.ovm-orbit::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border: 1px solid rgba(245,242,235,.14); border-radius: 50%;
}
.ovm-orbit em {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-style: normal; color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .18em; line-height: 1.5; text-align: center;
}
.ovm-orbit i {
  position: absolute; left: 50%; top: 50%; font-style: normal;
  color: var(--gray); font-size: var(--t-caption); letter-spacing: .18em; white-space: nowrap;
  transform: rotate(var(--a)) translateX(58px) rotate(calc(-1 * var(--a))) translate(-50%, -50%) scale(.9);
  opacity: 0; transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.ov-mosaic.is-active .ovm-orbit i {
  opacity: 1;
  transform: rotate(var(--a)) translateX(58px) rotate(calc(-1 * var(--a))) translate(-50%, -50%);
}

/* four seasonal cycles */
.ovm--aside { padding-right: 150px; }
.ovm--aside .ovm-seasons { position: absolute; right: clamp(18px, 1.7vw, 26px); top: 50%; width: 96px; height: 96px; margin-top: -48px; }
.ovm-seasons::before {
  content: ""; position: absolute; inset: 0; border: 1px dashed rgba(245,242,235,.16); border-radius: 50%;
}
.ovm-seasons i {
  position: absolute; left: 50%; top: 50%; font-style: normal; color: var(--gray);
  font-size: var(--t-caption); letter-spacing: .14em;
  transform: rotate(var(--a)) translateX(38px) rotate(calc(-1 * var(--a))) translate(-50%, -50%);
}

/* ---- micro-motion inside the tiles ----
   Every loop below is transform/opacity only, runs at a low frequency so
   it reads as ambience rather than activity, and is gated behind
   .is-active so a tile in a hidden depth view is never animating. The
   reduced-motion block at the end of this file stops all of them. */
@keyframes ovmSweep { 0%, 62% { transform: translateX(-110%); } 88%, 100% { transform: translateX(430%); } }
@keyframes ovmTwinkle { 0%, 100% { opacity: .16; } 50% { opacity: .46; } }
@keyframes ovmWave { 0%, 70%, 100% { opacity: .24; } 22% { opacity: .78; } }
@keyframes ovmBreathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes ovmSpin { to { transform: rotate(360deg); } }
@keyframes ovmRun { 0%, 8% { transform: translateX(0); } 62%, 74% { transform: translateX(100%); } 100% { transform: translateX(0); } }
@keyframes ovmRipple { 0% { transform: translate(-50%, -50%) scale(.28); opacity: .55; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes ovmSlideIn { 0%, 10% { transform: translateX(-26px); opacity: .2; } 55%, 100% { transform: translateX(0); opacity: .75; } }
@keyframes ovmRise { 0%, 100% { transform: scaleY(.24); } 45%, 60% { transform: scaleY(1); } }
@keyframes ovmHop { 0%, 26% { transform: translateX(0); } 33%, 59% { transform: translateX(var(--hop, 44px)); } 66%, 92% { transform: translateX(calc(var(--hop, 44px) * 2)); } 100% { transform: translateX(0); } }

.ov-mosaic.is-active .ovmb-fill--before::after {
  content: ""; position: absolute; inset: 0; width: 34%; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(245,242,235,.5), transparent);
  animation: ovmSweep 7s ease-in-out infinite 1.4s;
}
.ovmb-fill { position: relative; overflow: hidden; }
.ov-mosaic.is-active .ovm-field { animation: ovmTwinkle 6.5s ease-in-out infinite; }
.ov-mosaic.is-active .ovm-converge i { animation: ovmWave 4.6s ease-in-out infinite; }
.ov-mosaic.is-active .ovm-converge i:nth-child(8n+2) { animation-delay: .12s; }
.ov-mosaic.is-active .ovm-converge i:nth-child(8n+3) { animation-delay: .24s; }
.ov-mosaic.is-active .ovm-converge i:nth-child(8n+4) { animation-delay: .36s; }
.ov-mosaic.is-active .ovm-converge i:nth-child(8n+5) { animation-delay: .48s; }
.ov-mosaic.is-active .ovm-converge i:nth-child(8n+6) { animation-delay: .6s; }
.ov-mosaic.is-active .ovm-converge i:nth-child(8n+7) { animation-delay: .72s; }
.ov-mosaic.is-active .ovm-converge i:nth-child(8n+8) { animation-delay: .84s; }
.ov-mosaic.is-active .ovm-gates i { animation: ovmWave 4.2s ease-in-out infinite; }
.ov-mosaic.is-active .ovm-gates i:nth-child(2) { animation-delay: .1s; }
.ov-mosaic.is-active .ovm-gates i:nth-child(3) { animation-delay: .2s; }
.ov-mosaic.is-active .ovm-gates i:nth-child(4) { animation-delay: .3s; }
.ov-mosaic.is-active .ovm-gates i:nth-child(5) { animation-delay: .4s; }
.ov-mosaic.is-active .ovm-gates i:nth-child(6) { animation-delay: .5s; }
.ov-mosaic.is-active .ovm-gates i:nth-child(7) { animation-delay: .6s; }
.ov-mosaic.is-active .ovm-gates i:nth-child(8) { animation-delay: .7s; }
.ov-mosaic.is-active .ovm-converge em, .ov-mosaic.is-active .ovm-gates em { animation: ovmBreathe 4.4s ease-in-out infinite 1.1s; }
/* The runner is a full-width strip minus the dot's own diameter, so a
   plain translateX(0 → 100%) lands the dot exactly on the far end of a
   rail whose pixel width CSS never gets to know. */
.ovm-rail::after {
  content: ""; position: absolute; left: 0; top: 50%; width: calc(100% - 9px); height: 9px; margin-top: -4.5px;
  background: radial-gradient(circle 4.5px at 4.5px 50%, var(--shu) 96%, transparent 100%);
  opacity: 0; pointer-events: none;
}
.ov-mosaic.is-active .ovm-rail::after { opacity: .9; animation: ovmRun 8s cubic-bezier(.5,0,.5,1) infinite 1.2s; }
.ovm-orbit::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -42px 0 0 -3px;
  border-radius: 50%; background: var(--shu); transform-origin: 3px 42px;
}
.ov-mosaic.is-active .ovm-orbit::after { animation: ovmSpin 14s linear infinite; }
.ov-mosaic.is-active .ovm-orbit em { animation: ovmBreathe 5.4s ease-in-out infinite; }
.ov-mosaic.is-active .ovm-seasons::before { animation: ovmSpin 42s linear infinite; }

/* ---- the senior-scope map: same bento, glyph on top ---- */
/* v0.135 — these tiles are the only .ovm variant carrying BOTH a caption and a
   body paragraph, and they used to inherit `margin-top: auto` on the caption.
   That pushed caption+body to the bottom as a group, so the top edge of the
   caption landed wherever the body's height left it — and bodies here run from
   109 to 218 characters. Result: nothing lined up across a row.

   Fixed by anchoring the stack to the top instead. The glyph is already a fixed
   62px, and reserving two lines for the caption means the body paragraph starts
   at the same y in every tile of a row, whether the caption wraps or not.
   Measured caption lengths across all four case studies are 14-42 characters,
   which is one or two lines at every breakpoint — so two lines is the right
   reservation. A rare three-line caption still only pushes its own body.

   v0.136 — the reservation initially left a visible hole between a one-line
   caption and its paragraph. `align-items: flex-end` bottom-anchors the caption
   inside its reserved band, so the slack moves ABOVE the caption, next to the
   glyph, where there is already breathing room — and the title sits tight to
   its text. Safe because the numeral <i> was removed from these captions in
   v0.127, so there is no baseline relationship left to preserve. */
.ovm--map { justify-content: flex-start; gap: 11px; min-height: 214px; }
/* CHANGED v0.152 — was `align-items: flex-end`.
   The two-line reserve above keeps the PARAGRAPHS level across a row whichever
   way it is set. What flex-end did was push a one-line heading down to the
   bottom of that reserved band, so in a row where one card's heading wraps to
   two lines and its neighbours' do not, the wrapped one starts a line higher
   and the headings read as ragged — reported on the PNC "senior scope" row,
   where "Making compliance a collaborator" is the longest caption on the page
   and wraps first as the viewport narrows.
   flex-start aligns the heading TOPS across the row, and because the band is
   still reserved the paragraphs stay level too. The cost is that a one-line
   heading now sits a little further from its own paragraph, which is the
   trade the original flex-end was buying; a ragged row of headings is the
   more visible fault of the two. */
.ovm--map figcaption {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 0;
  min-height: calc(2 * 1.22em);
  font-family: var(--display); font-weight: 500; color: var(--ink);
  font-size: var(--t-body); letter-spacing: -.022em; line-height: 1.22;
}
.ovm--map figcaption i { font-style: normal; color: rgba(245,242,235,.3); font-family: var(--sans); font-size: var(--t-caption); letter-spacing: .18em; }
/* The two-line reserve above is a blunt instrument: it keeps a row level when
   one caption wraps, but when EVERY caption in a row is one line it leaves a
   dead line of space between each heading and its paragraph.

   Subgrid fixes both at once. Each card spans three parent rows — glyph,
   caption, body — so cards sharing a visual row share those tracks, and the
   caption band is sized to the tallest caption IN THAT ROW: no dead space when
   all are one line, still perfectly level when one wraps to two. The reserve is
   released here because the shared track now does that job.

   Wrapped in @supports so browsers without subgrid keep the reserve and today's
   rendering exactly. */
@supports (grid-template-rows: subgrid) {
  .ov-mosaic--map .ovm--map {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 11px;
    align-content: start;
  }
  .ov-mosaic--map .ovm--map figcaption { min-height: 0; }
}
.ovm--map p { position: relative; z-index: 1; color: var(--gray); font-size: var(--t-caption); line-height: 1.62; }
.ovg { position: relative; z-index: 1; height: 62px; }
.ovg s { text-decoration: none; }

.ovg-seed em, .ovg-seed s {
  position: absolute; left: 31px; top: 50%; border-radius: 50%; transform: translate(-50%, -50%);
}
.ovg-seed em { width: 9px; height: 9px; background: var(--shu); }
.ovg-seed s { width: 58px; height: 58px; border: 1px solid rgba(245,242,235,.3); opacity: 0; }
.is-active .ovg-seed s { animation: ovmRipple 4.8s ease-out infinite; }
.is-active .ovg-seed s:nth-child(2) { animation-delay: 1.6s; }
.is-active .ovg-seed s:nth-child(3) { animation-delay: 3.2s; }

.ovg-converge { display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.ovg-converge s { display: block; width: 46px; height: 2px; border-radius: 2px; background: rgba(245,242,235,.34); opacity: .2; }
.is-active .ovg-converge s { animation: ovmSlideIn 5.2s ease-in-out infinite; }
.is-active .ovg-converge s:nth-child(2) { animation-delay: .18s; }
.is-active .ovg-converge s:nth-child(3) { animation-delay: .36s; }
.is-active .ovg-converge s:nth-child(4) { animation-delay: .54s; }
.ovg-converge em { position: absolute; left: 62px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--shu); }
.is-active .ovg-converge em { animation: ovmBreathe 5.2s ease-in-out infinite 1s; }

.ovg-rings { display: flex; align-items: center; }
.ovg-rings s { width: 40px; height: 40px; border: 1px solid rgba(245,242,235,.3); border-radius: 50%; margin-right: -16px; opacity: .3; }
.is-active .ovg-rings s { animation: ovmWave 5s ease-in-out infinite; }
.is-active .ovg-rings s:nth-child(2) { animation-delay: .3s; }
.is-active .ovg-rings s:nth-child(3) { animation-delay: .6s; }
.is-active .ovg-rings s:nth-child(4) { animation-delay: .9s; border-color: rgba(247,34,91,.6); }

.ovg-pitch { display: flex; align-items: flex-end; gap: 8px; }
.ovg-pitch s { display: block; width: 12px; height: 52px; border-radius: 3px; background: rgba(245,242,235,.24); transform-origin: 50% 100%; transform: scaleY(.24); }
.is-active .ovg-pitch s { animation: ovmRise 5.6s cubic-bezier(.3,.8,.3,1) infinite; }
.is-active .ovg-pitch s:nth-child(2) { animation-delay: .16s; }
.is-active .ovg-pitch s:nth-child(3) { animation-delay: .32s; }
.is-active .ovg-pitch s:nth-child(4) { animation-delay: .48s; background: var(--shu); }

.ovg-focus { display: flex; align-items: center; gap: 14px; }
.ovg-focus s { display: block; width: 30px; height: 30px; border-radius: 7px; background: rgba(245,242,235,.1); }
.ovg-focus em {
  position: absolute; left: -4px; top: 50%; width: 38px; height: 38px; margin-top: -19px;
  border: 1.5px solid var(--shu-text); border-radius: 10px; --hop: 44px;
}
.is-active .ovg-focus em { animation: ovmHop 6.4s cubic-bezier(.4,0,.2,1) infinite; }

/* ================================================================
   PER-CASE-STUDY TILE VOCABULARIES
   The bento chrome is shared; the diagram inside each tile is not.
   Talent gets bars, orbits and seasons. Finance gets ledger cells,
   a relationship web and a product stack. PNC gets form rows, sprint
   ticks and a fixed regulatory frame. Anchor gets an autonomy line, a
   closed loop and a cost collapse. Nothing is reused across two cases.
   ================================================================ */

/* ---- Amazon Finance ---- */
.ovm-cells {
  position: absolute; inset: 0 0 auto 0; height: 124px; z-index: 0;
  display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 19px; gap: 4px;
  padding: clamp(20px, 2vw, 30px) clamp(20px, 2vw, 30px) 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
}
.ovm-cells i { border: 1px solid rgba(245,242,235,.14); border-radius: 3px; opacity: .5; }
.ov-mosaic.is-active .ovm-cells i { animation: ovmWave 6s ease-in-out infinite; }
.ov-mosaic.is-active .ovm-cells i:nth-child(8n+2) { animation-delay: .1s; }
.ov-mosaic.is-active .ovm-cells i:nth-child(8n+3) { animation-delay: .2s; }
.ov-mosaic.is-active .ovm-cells i:nth-child(8n+4) { animation-delay: .3s; }
.ov-mosaic.is-active .ovm-cells i:nth-child(8n+5) { animation-delay: .4s; }
.ov-mosaic.is-active .ovm-cells i:nth-child(8n+6) { animation-delay: .5s; }
.ov-mosaic.is-active .ovm-cells i:nth-child(8n+7) { animation-delay: .6s; }
.ov-mosaic.is-active .ovm-cells i:nth-child(8n+8) { animation-delay: .7s; }
.ovm-cells i:nth-child(4n+3) { background: rgba(195,21,55,.16); border-color: rgba(247,34,91,.26); }

.ovm-tenths { position: relative; z-index: 1; display: flex; gap: 5px; }
.ovm-tenths i { flex: 1; height: 5px; border-radius: 3px; background: rgba(245,242,235,.14); }
.ovm-tenths i:not(:last-child) { background: var(--shu); }
.ov-mosaic.is-active .ovm-tenths i:not(:last-child) { animation: ovmBreathe 4.8s ease-in-out infinite; }
.ov-mosaic.is-active .ovm-tenths i:nth-child(2) { animation-delay: .08s; }
.ov-mosaic.is-active .ovm-tenths i:nth-child(3) { animation-delay: .16s; }
.ov-mosaic.is-active .ovm-tenths i:nth-child(4) { animation-delay: .24s; }
.ov-mosaic.is-active .ovm-tenths i:nth-child(5) { animation-delay: .32s; }
.ov-mosaic.is-active .ovm-tenths i:nth-child(6) { animation-delay: .4s; }
.ov-mosaic.is-active .ovm-tenths i:nth-child(7) { animation-delay: .48s; }
.ov-mosaic.is-active .ovm-tenths i:nth-child(8) { animation-delay: .56s; }
.ov-mosaic.is-active .ovm-tenths i:nth-child(9) { animation-delay: .64s; }

.ovm-web { position: absolute; top: clamp(20px, 2vw, 30px); right: clamp(20px, 2vw, 30px); width: 92px; height: 74px; }
.ovm-web s, .ovm-web em { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(245,242,235,.42); }
.ovm-web em { width: 9px; height: 9px; background: var(--shu); left: 42px; top: 33px; }
.ovm-web s:nth-child(1) { left: 2px;  top: 6px; }
.ovm-web s:nth-child(2) { left: 34px; top: 0; }
.ovm-web s:nth-child(3) { left: 78px; top: 12px; }
.ovm-web s:nth-child(4) { left: 86px; top: 52px; }
.ovm-web s:nth-child(5) { left: 52px; top: 68px; }
.ovm-web s:nth-child(6) { left: 12px; top: 60px; }
.ovm-web s:nth-child(7) { left: 0;    top: 34px; }
.ov-mosaic.is-active .ovm-web s { animation: ovmWave 5.4s ease-in-out infinite; }
.ov-mosaic.is-active .ovm-web s:nth-child(2) { animation-delay: .2s; }
.ov-mosaic.is-active .ovm-web s:nth-child(3) { animation-delay: .4s; }
.ov-mosaic.is-active .ovm-web s:nth-child(4) { animation-delay: .6s; }
.ov-mosaic.is-active .ovm-web s:nth-child(5) { animation-delay: .8s; }
.ov-mosaic.is-active .ovm-web s:nth-child(6) { animation-delay: 1s; }
.ov-mosaic.is-active .ovm-web s:nth-child(7) { animation-delay: 1.2s; }
.ov-mosaic.is-active .ovm-web em { animation: ovmBreathe 4.4s ease-in-out infinite; }

.ovm-stack { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.ovm-stack i, .ovm-stack em {
  font-style: normal; padding: 7px 12px; border-radius: 6px;
  font-size: var(--t-caption); letter-spacing: .2em; color: var(--gray);
  border: 1px solid rgba(245,242,235,.12); background: rgba(245,242,235,.03);
}
.ovm-stack i { width: 62%; }
.ovm-stack i:nth-child(2) { width: 74%; margin-left: 8%; }
.ovm-stack i:nth-child(3) { width: 62%; margin-left: 16%; }
.ovm-stack em { margin-top: 4px; color: var(--shu-text); border-color: rgba(247,34,91,.34); background: rgba(195,21,55,.07); }
.ov-mosaic.is-active .ovm-stack i { animation: ovmSlideIn 6s ease-in-out infinite; }
.ov-mosaic.is-active .ovm-stack i:nth-child(2) { animation-delay: .2s; }
.ov-mosaic.is-active .ovm-stack i:nth-child(3) { animation-delay: .4s; }

.ovm--aside .ovm-roles { position: absolute; right: clamp(20px, 2vw, 30px); top: 50%; display: flex; gap: 7px; margin-top: -14px; }
.ovm-roles i { width: 9px; height: 28px; border-radius: 5px 5px 3px 3px; background: rgba(245,242,235,.2); }
.ov-mosaic.is-active .ovm-roles i { animation: ovmWave 5.4s ease-in-out infinite; }
.ov-mosaic.is-active .ovm-roles i:nth-child(2) { animation-delay: .14s; }
.ov-mosaic.is-active .ovm-roles i:nth-child(3) { animation-delay: .28s; }
.ov-mosaic.is-active .ovm-roles i:nth-child(4) { animation-delay: .42s; }
.ov-mosaic.is-active .ovm-roles i:nth-child(5) { animation-delay: .56s; }
.ov-mosaic.is-active .ovm-roles i:nth-child(6) { animation-delay: .7s; }
.ov-mosaic.is-active .ovm-roles i:nth-child(7) { animation-delay: .84s; }
.ov-mosaic.is-active .ovm-roles i:nth-child(8) { animation-delay: .98s; }
.ov-mosaic.is-active .ovm-roles i:nth-child(9) { animation-delay: 1.12s; }

/* ---- PNC Lending ---- */
.ovm-form {
  position: absolute; inset: 0 0 auto 0; height: 118px; z-index: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(20px, 2vw, 30px) clamp(20px, 2vw, 30px) 0;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
.ovm-form i { height: 9px; border-radius: 3px; background: rgba(245,242,235,.14); width: 62%; }
.ovm-form i:nth-child(even) { width: 44%; }
.ovm-form i:nth-child(3n) { width: 74%; }
.ovm-form i:nth-child(3n+1) { background: rgba(195,21,55,.4); }
.ov-mosaic.is-active .ovm-form i { animation: ovmWave 6.4s ease-in-out infinite; }
.ov-mosaic.is-active .ovm-form i:nth-child(3n+1) { animation: none; opacity: 1; }
.ov-mosaic.is-active .ovm-form i:nth-child(2) { animation-delay: .1s; }
.ov-mosaic.is-active .ovm-form i:nth-child(3) { animation-delay: .2s; }
.ov-mosaic.is-active .ovm-form i:nth-child(5) { animation-delay: .3s; }
.ov-mosaic.is-active .ovm-form i:nth-child(6) { animation-delay: .4s; }
.ov-mosaic.is-active .ovm-form i:nth-child(8) { animation-delay: .5s; }
.ov-mosaic.is-active .ovm-form i:nth-child(9) { animation-delay: .6s; }
.ov-mosaic.is-active .ovm-form i:nth-child(11) { animation-delay: .7s; }
.ov-mosaic.is-active .ovm-form i:nth-child(12) { animation-delay: .8s; }

.ovm-sprint { position: relative; z-index: 1; display: flex; gap: 4px; align-items: flex-end; }
.ovm-sprint i { flex: 1; height: 16px; border-radius: 2px; background: rgba(245,242,235,.18); transform-origin: 50% 100%; }
.ovm-sprint i:nth-child(3n) { height: 26px; background: var(--shu); }
.ov-mosaic.is-active .ovm-sprint i:nth-child(3n) { animation: ovmRise 5.2s cubic-bezier(.3,.8,.3,1) infinite; }
.ov-mosaic.is-active .ovm-sprint i:nth-child(6) { animation-delay: .26s; }
.ov-mosaic.is-active .ovm-sprint i:nth-child(9) { animation-delay: .52s; }
.ov-mosaic.is-active .ovm-sprint i:nth-child(12) { animation-delay: .78s; }
.ov-mosaic.is-active .ovm-sprint i:nth-child(15) { animation-delay: 1.04s; }

.ovm-widths { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 12px; }
.ovm-widths i {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  border: 1px solid rgba(245,242,235,.16); border-radius: 6px; padding: 8px;
}
.ovm-widths .ovw-a { width: 128px; height: 78px; }
.ovm-widths .ovw-b { width: 74px;  height: 66px; }
.ovm-widths .ovw-c { width: 40px;  height: 56px; }
.ovm-widths s { display: block; height: 5px; border-radius: 2px; background: rgba(245,242,235,.24); }
.ovm-widths .ovw-c s { background: var(--shu); }
.ov-mosaic.is-active .ovm-widths i { animation: ovmWave 6s ease-in-out infinite; }
.ov-mosaic.is-active .ovm-widths .ovw-b { animation-delay: .24s; }
.ov-mosaic.is-active .ovm-widths .ovw-c { animation-delay: .48s; }

.ovm--aside .ovm-frame {
  position: absolute; right: clamp(20px, 2vw, 30px); top: 50%; width: 108px; height: 76px; margin-top: -38px;
  border: 1.5px solid rgba(245,242,235,.26); border-radius: 8px;
}
.ovm-frame em {
  position: absolute; left: 8px; top: 8px; width: 34px; height: 26px;
  border-radius: 4px; background: rgba(195,21,55,.5);
}
.ov-mosaic.is-active .ovm-frame em { animation: ovmRoam 9s cubic-bezier(.45,0,.45,1) infinite; }

.ovm-lanes { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.ovm-lanes i {
  font-style: normal; padding: 7px 12px; border-radius: 999px;
  font-size: var(--t-caption); letter-spacing: .18em; color: var(--gray);
  border: 1px solid rgba(245,242,235,.12); background: rgba(245,242,235,.03);
}
.ovm-lanes em { width: 11px; height: 11px; border-radius: 50%; background: var(--shu); margin-left: 4px; }
.ov-mosaic.is-active .ovm-lanes i { animation: ovmWave 5.6s ease-in-out infinite; }
.ov-mosaic.is-active .ovm-lanes i:nth-child(2) { animation-delay: .18s; }
.ov-mosaic.is-active .ovm-lanes i:nth-child(3) { animation-delay: .36s; }
.ov-mosaic.is-active .ovm-lanes i:nth-child(4) { animation-delay: .54s; }
.ov-mosaic.is-active .ovm-lanes em { animation: ovmBreathe 4.6s ease-in-out infinite; }

/* ---- Kellton Anchor ---- */
.ovm-capacity {
  position: absolute; inset: 0 0 auto 0; height: 104px; z-index: 0;
  display: flex; flex-direction: column; gap: 7px;
  padding: clamp(20px, 2vw, 30px) clamp(20px, 2vw, 30px) 0;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
.ovm-capacity i {
  height: 6px; border-radius: 3px; background: rgba(245,242,235,.16);
  transform-origin: 0 50%; transform: scaleX(.62);
}
.ovm-capacity i:nth-child(3n+1) { background: rgba(195,21,55,.45); }
.ov-mosaic.is-active .ovm-capacity i { animation: ovmStretch 6.2s cubic-bezier(.3,.8,.3,1) infinite; }
.ov-mosaic.is-active .ovm-capacity i:nth-child(2) { animation-delay: .1s; }
.ov-mosaic.is-active .ovm-capacity i:nth-child(3) { animation-delay: .2s; }
.ov-mosaic.is-active .ovm-capacity i:nth-child(4) { animation-delay: .3s; }
.ov-mosaic.is-active .ovm-capacity i:nth-child(5) { animation-delay: .4s; }
.ov-mosaic.is-active .ovm-capacity i:nth-child(6) { animation-delay: .5s; }
.ov-mosaic.is-active .ovm-capacity i:nth-child(7) { animation-delay: .6s; }
.ov-mosaic.is-active .ovm-capacity i:nth-child(8) { animation-delay: .7s; }

.ovm-tally {
  position: absolute; inset: 0 0 auto 0; height: 86px; z-index: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;
  padding: clamp(20px, 2vw, 30px) clamp(20px, 2vw, 30px) 0;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
.ovm-tally i { height: 16px; border-radius: 2px; background: rgba(245,242,235,.13); }
.ov-mosaic.is-active .ovm-tally i { animation: ovmWave 5.8s ease-in-out infinite; }
.ov-mosaic.is-active .ovm-tally i:nth-child(6n+2) { animation-delay: .12s; }
.ov-mosaic.is-active .ovm-tally i:nth-child(6n+3) { animation-delay: .24s; }
.ov-mosaic.is-active .ovm-tally i:nth-child(6n+4) { animation-delay: .36s; }
.ov-mosaic.is-active .ovm-tally i:nth-child(6n+5) { animation-delay: .48s; }
.ov-mosaic.is-active .ovm-tally i:nth-child(6n+6) { animation-delay: .6s; }

.ovm--aside .ovm-vbars {
  position: absolute; right: clamp(20px, 2vw, 30px); bottom: clamp(20px, 2vw, 30px);
  display: flex; align-items: flex-end; gap: 14px; height: 92px;
}
.ovm-vbars i { display: block; width: 26px; border-radius: 4px 4px 2px 2px; transform-origin: 50% 100%; }
.ovm-vbars .ovv-was { height: 92px; background: rgba(245,242,235,.16); }
.ovm-vbars .ovv-now { height: 27px; background: var(--shu); }
.ov-mosaic.is-active .ovm-vbars i { animation: ovmRise 6.4s cubic-bezier(.3,.8,.3,1) infinite; }
.ov-mosaic.is-active .ovm-vbars .ovv-now { animation-delay: .4s; }

.ovm-autonomy { position: relative; z-index: 1; display: flex; align-items: stretch; gap: 6px; }
.ovm-autonomy i {
  flex: 1; font-style: normal; padding: 14px 12px; border-radius: 8px; text-align: center;
  font-size: var(--t-caption); letter-spacing: .2em; border: 1px solid rgba(245,242,235,.12);
}
.ovm-autonomy .ova-act    { color: var(--ink);  background: rgba(245,242,235,.07); }
.ovm-autonomy .ova-draft  { color: var(--gray); background: rgba(245,242,235,.035); }
.ovm-autonomy .ova-never  { color: var(--shu-text); border-color: rgba(247,34,91,.34); background: rgba(195,21,55,.08); }
.ovm-autonomy em {
  position: absolute; left: 0; bottom: -9px; width: 33.33%; height: 2px; border-radius: 2px; background: var(--shu);
}
.ov-mosaic.is-active .ovm-autonomy em { animation: ovmShift 8s cubic-bezier(.4,0,.2,1) infinite; }

.ovm-loop4 { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: center; }
.ovm-loop4 i {
  font-style: normal; padding: 13px 10px; border-radius: 8px; text-align: center;
  font-size: var(--t-caption); letter-spacing: .2em; color: var(--gray);
  border: 1px solid rgba(245,242,235,.12); background: rgba(245,242,235,.03);
}
/* Same width-agnostic runner trick as the role rail. */
.ovm-loop4 em {
  position: absolute; left: 0; bottom: -10px; width: 100%; height: 1px; background: rgba(245,242,235,.14);
}
.ovm-loop4 em::after {
  content: ""; position: absolute; left: 0; top: -4px; width: calc(100% - 9px); height: 9px;
  background: radial-gradient(circle 4.5px at 4.5px 50%, var(--shu) 96%, transparent 100%);
}
.ov-mosaic.is-active .ovm-loop4 em::after { animation: ovmRun 11s cubic-bezier(.5,0,.5,1) infinite; }
.ov-mosaic.is-active .ovm-loop4 i { animation: ovmWave 6.6s ease-in-out infinite; }
.ov-mosaic.is-active .ovm-loop4 i:nth-child(2) { animation-delay: .3s; }
.ov-mosaic.is-active .ovm-loop4 i:nth-child(3) { animation-delay: .6s; }
.ov-mosaic.is-active .ovm-loop4 i:nth-child(4) { animation-delay: .9s; }

@keyframes ovmStretch { 0%, 100% { transform: scaleX(.62); } 48%, 62% { transform: scaleX(1); } }
@keyframes ovmRoam {
  0%, 12% { transform: translate(0, 0); }
  30%, 42% { transform: translate(58px, 0); }
  58%, 70% { transform: translate(58px, 34px); }
  84%, 92% { transform: translate(0, 34px); }
  100% { transform: translate(0, 0); }
}
@keyframes ovmShift { 0%, 22% { transform: translateX(0); } 38%, 60% { transform: translateX(100%); } 74%, 92% { transform: translateX(200%); } 100% { transform: translateX(0); } }

/* ---- senior-scope glyphs, three more sets ---- */
.ovg-emerge s, .ovg-emerge em { position: absolute; }
.ovg-emerge s { width: 5px; height: 5px; border-radius: 50%; background: rgba(245,242,235,.4); }
.ovg-emerge s:nth-child(1) { left: 4px;  top: 6px; }
.ovg-emerge s:nth-child(2) { left: 46px; top: 2px; }
.ovg-emerge s:nth-child(3) { left: 60px; top: 44px; }
.ovg-emerge s:nth-child(4) { left: 10px; top: 50px; }
.ovg-emerge em { left: 18px; top: 16px; width: 34px; height: 30px; border: 1px solid var(--shu-text); border-radius: 5px; }
.is-active .ovg-emerge s { animation: ovmWave 5s ease-in-out infinite; }
.is-active .ovg-emerge s:nth-child(2) { animation-delay: .25s; }
.is-active .ovg-emerge s:nth-child(3) { animation-delay: .5s; }
.is-active .ovg-emerge s:nth-child(4) { animation-delay: .75s; }
.is-active .ovg-emerge em { animation: ovmBreathe 5s ease-in-out infinite 1s; }

.ovg-layers { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ovg-layers s, .ovg-layers em { display: block; height: 8px; border-radius: 3px; }
.ovg-layers s { width: 54px; background: rgba(245,242,235,.24); transform: translateX(14px); }
.ovg-layers s:nth-child(2) { transform: translateX(7px); }
.ovg-layers s:nth-child(3) { transform: translateX(0); }
.ovg-layers em { width: 62px; background: var(--shu); }
.is-active .ovg-layers s { animation: ovmAlign 5.4s cubic-bezier(.3,.8,.3,1) infinite; }
.is-active .ovg-layers s:nth-child(2) { animation-delay: .14s; }
.is-active .ovg-layers s:nth-child(3) { animation-delay: .28s; }

.ovg-merge s, .ovg-merge em { position: absolute; border-radius: 2px; }
.ovg-merge s { left: 0; width: 34px; height: 3px; background: rgba(245,242,235,.3); }
.ovg-merge s:nth-child(1) { top: 12px; }
.ovg-merge s:nth-child(2) { top: 30px; }
.ovg-merge s:nth-child(3) { top: 48px; }
.ovg-merge em { left: 46px; top: 24px; width: 15px; height: 15px; border-radius: 50%; background: var(--shu); }
.is-active .ovg-merge s { animation: ovmSlideIn 5.6s ease-in-out infinite; }
.is-active .ovg-merge s:nth-child(2) { animation-delay: .16s; }
.is-active .ovg-merge s:nth-child(3) { animation-delay: .32s; }
.is-active .ovg-merge em { animation: ovmBreathe 5.6s ease-in-out infinite .8s; }

.ovg-target s, .ovg-target em { position: absolute; left: 31px; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.ovg-target s { width: 56px; height: 56px; border: 1px solid rgba(245,242,235,.22); }
.ovg-target s:nth-child(2) { width: 32px; height: 32px; }
.ovg-target em { width: 10px; height: 10px; background: var(--shu); }
.is-active .ovg-target em { animation: ovmLand 5.2s cubic-bezier(.3,.9,.3,1) infinite; }

.ovg-grain { display: flex; align-items: center; gap: 4px; }
.ovg-grain s { display: block; width: 3px; height: 40px; border-radius: 2px; background: rgba(245,242,235,.22); }
.ovg-grain em { position: absolute; left: 0; top: 6px; width: 22px; height: 50px; border: 1px solid var(--shu-text); border-radius: 4px; }
.is-active .ovg-grain em { animation: ovmScan 7s cubic-bezier(.4,0,.4,1) infinite; }

.ovg-bounds s, .ovg-bounds em { position: absolute; }
.ovg-bounds s { left: 0; top: 4px; width: 92px; height: 54px; border: 1.5px solid rgba(245,242,235,.26); border-radius: 6px; }
.ovg-bounds em { left: 6px; top: 10px; width: 30px; height: 20px; border-radius: 3px; background: rgba(195,21,55,.55); }
.is-active .ovg-bounds em { animation: ovmRoamSm 8s cubic-bezier(.45,0,.45,1) infinite; }

.ovg-atoms { display: grid; grid-template-columns: repeat(3, 16px); gap: 6px; align-content: center; }
.ovg-atoms s { display: block; width: 16px; height: 16px; border-radius: 4px; background: rgba(245,242,235,.2); }
.ovg-atoms s:nth-child(5) { background: var(--shu); }
.is-active .ovg-atoms s { animation: ovmWave 5.4s ease-in-out infinite; }
.is-active .ovg-atoms s:nth-child(2) { animation-delay: .1s; }
.is-active .ovg-atoms s:nth-child(3) { animation-delay: .2s; }
.is-active .ovg-atoms s:nth-child(4) { animation-delay: .3s; }
.is-active .ovg-atoms s:nth-child(5) { animation-delay: .4s; }
.is-active .ovg-atoms s:nth-child(6) { animation-delay: .5s; }

.ovg-loop s, .ovg-loop em { position: absolute; }
.ovg-loop s { left: 4px; top: 3px; width: 52px; height: 52px; border: 1px dashed rgba(245,242,235,.28); border-radius: 50%; }
.ovg-loop em { left: 26px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--shu); transform-origin: 4.5px 29px; }
.is-active .ovg-loop em { animation: ovmSpin 7s linear infinite; }

.ovg-metro { display: flex; align-items: center; gap: 8px; }
.ovg-metro s { display: block; width: 3px; height: 20px; border-radius: 2px; background: rgba(245,242,235,.24); transform-origin: 50% 50%; }
.ovg-metro s:nth-child(even) { background: rgba(247,34,91,.65); }
.is-active .ovg-metro s { animation: ovmTick 4.8s ease-in-out infinite; }
.is-active .ovg-metro s:nth-child(2) { animation-delay: .12s; }
.is-active .ovg-metro s:nth-child(3) { animation-delay: .24s; }
.is-active .ovg-metro s:nth-child(4) { animation-delay: .36s; }
.is-active .ovg-metro s:nth-child(5) { animation-delay: .48s; }
.is-active .ovg-metro s:nth-child(6) { animation-delay: .6s; }
.is-active .ovg-metro s:nth-child(7) { animation-delay: .72s; }
.is-active .ovg-metro s:nth-child(8) { animation-delay: .84s; }

.ovg-live s, .ovg-live em { position: absolute; left: 22px; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.ovg-live em { width: 12px; height: 12px; background: var(--shu); }
.ovg-live s { width: 46px; height: 46px; border: 1px solid rgba(247,34,91,.5); opacity: 0; }
.is-active .ovg-live s { animation: ovmRipple 3.6s ease-out infinite; }
.is-active .ovg-live s:nth-child(2) { animation-delay: 1.8s; }

.ovg-dig { display: flex; align-items: flex-end; gap: 5px; }
.ovg-dig s { display: block; width: 7px; height: 34px; border-radius: 2px; background: rgba(245,242,235,.16); }
.ovg-dig em { position: absolute; left: 0; bottom: 0; width: 13px; height: 52px; border-radius: 3px; background: var(--shu); }
.is-active .ovg-dig em { animation: ovmSeek 7.4s cubic-bezier(.4,0,.4,1) infinite; }

.ovg-zones { display: flex; align-items: center; gap: 4px; }
.ovg-zones s { display: block; width: 26px; height: 26px; border-radius: 5px; }
.ovg-zones s:nth-child(1) { background: rgba(245,242,235,.28); }
.ovg-zones s:nth-child(2) { background: rgba(245,242,235,.13); }
.ovg-zones s:nth-child(3) { background: rgba(195,21,55,.42); }
.ovg-zones em { position: absolute; left: 0; bottom: 8px; width: 26px; height: 2px; border-radius: 2px; background: var(--shu); }
.is-active .ovg-zones em { animation: ovmStep3 7.2s cubic-bezier(.4,0,.2,1) infinite; }

.ovg-drop { display: flex; align-items: flex-end; gap: 12px; }
.ovg-drop s { display: block; width: 20px; border-radius: 4px 4px 2px 2px; transform-origin: 50% 100%; }
.ovg-drop s:nth-child(1) { height: 54px; background: rgba(245,242,235,.2); }
.ovg-drop s:nth-child(2) { height: 16px; background: var(--shu); }
.is-active .ovg-drop s { animation: ovmRise 5.8s cubic-bezier(.3,.8,.3,1) infinite; }
.is-active .ovg-drop s:nth-child(2) { animation-delay: .35s; }

.ovg-strike s, .ovg-strike em { position: absolute; }
.ovg-strike s { left: 0; top: 10px; width: 62px; height: 40px; border: 1px solid rgba(245,242,235,.26); border-radius: 6px; }
.ovg-strike em { left: -4px; top: 29px; width: 70px; height: 2px; background: var(--shu); transform-origin: 0 50%; transform: scaleX(0); }
.is-active .ovg-strike em { animation: ovmSlash 5.4s cubic-bezier(.3,.9,.3,1) infinite; }

.ovg-stamp { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ovg-stamp s { display: block; height: 6px; border-radius: 3px; background: rgba(245,242,235,.2); width: 68px; }
.ovg-stamp s:nth-child(2) { width: 50px; }
.ovg-stamp s:nth-child(3) { width: 58px; }
.ovg-stamp em {
  position: absolute; right: 4px; top: 50%; width: 26px; height: 26px; margin-top: -13px;
  border: 1.5px solid var(--shu-text); border-radius: 50%;
}
.is-active .ovg-stamp em { animation: ovmStampIn 5.6s cubic-bezier(.3,1.3,.4,1) infinite; }

@keyframes ovmAlign { 0%, 100% { transform: translateX(14px); } 46%, 62% { transform: translateX(0); } }
@keyframes ovmLand { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -180%) scale(.7); } 58% { transform: translate(-50%, -50%) scale(1.25); } }
@keyframes ovmScan { 0%, 10% { transform: translateX(0); } 50%, 62% { transform: translateX(58px); } 100% { transform: translateX(0); } }
@keyframes ovmRoamSm {
  0%, 12% { transform: translate(0, 0); }
  30%, 42% { transform: translate(50px, 0); }
  58%, 70% { transform: translate(50px, 24px); }
  84%, 92% { transform: translate(0, 24px); }
  100% { transform: translate(0, 0); }
}
@keyframes ovmTick { 0%, 100% { transform: scaleY(.5); opacity: .4; } 40% { transform: scaleY(1); opacity: 1; } }
@keyframes ovmSeek { 0%, 10% { transform: translateX(0); } 46%, 58% { transform: translateX(48px); } 100% { transform: translateX(0); } }
@keyframes ovmStep3 { 0%, 20% { transform: translateX(0); } 36%, 56% { transform: translateX(30px); } 72%, 90% { transform: translateX(60px); } 100% { transform: translateX(0); } }
@keyframes ovmSlash { 0%, 30% { transform: scaleX(0); } 52%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes ovmStampIn { 0%, 34% { transform: scale(.2); opacity: 0; } 52%, 88% { transform: scale(1); opacity: 1; } 100% { transform: scale(.2); opacity: 0; } }

.ov-pull {
  margin-top: clamp(34px, 4.6vh, 54px); max-width: 30ch;
  font-family: var(--display); font-weight: 500; color: var(--gray);
  font-size: var(--t-h4); letter-spacing: -.028em; line-height: 1.28; text-wrap: balance;
}
.ov-pull b { color: var(--ink); font-weight: 500; }

/* ================================================================
   SCOPE OF THE ROLE, AS A BOARD
   Fifteen items reduced to fifteen short tokens in three lanes.
   The sentence for each one lives in a single readout panel and is
   summoned on hover, focus or tap. With JavaScript off the panel
   stays hidden and every description renders inline, so nothing is
   lost to a failed enhancement.
   ================================================================ */
.ov-board { margin-top: clamp(30px, 4vh, 48px); }
.scb-hint { display: none; color: var(--gray); font-size: var(--t-caption); letter-spacing: .22em; margin-bottom: 22px; }
.ov-board.is-enhanced .scb-hint { display: block; }
.scb-lane {
  display: grid; grid-template-columns: minmax(120px, 168px) 1fr;
  gap: clamp(14px, 2vw, 30px); align-items: start;
  padding: 20px 0; border-top: 1px solid var(--hairline);
}
.scb-lane:last-of-type { border-bottom: 1px solid var(--hairline); }
.scb-tag {
  display: flex; align-items: baseline; gap: 10px; padding-top: 9px;
  color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .2em;
}
.scb-tag em { font-style: normal; color: var(--gray); letter-spacing: .1em; }
.scb-lane ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.scb-lane li {
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.ov-board.is-active .scb-lane li { opacity: 1; transform: none; }
.ov-board.is-active .scb-lane li:nth-child(2) { transition-delay: .05s; }
.ov-board.is-active .scb-lane li:nth-child(3) { transition-delay: .1s; }
.ov-board.is-active .scb-lane li:nth-child(4) { transition-delay: .15s; }
.ov-board.is-active .scb-lane li:nth-child(5) { transition-delay: .2s; }
.scb-lane button {
  display: flex; align-items: baseline; gap: 9px; text-align: left; cursor: default;
  padding: 11px 15px; border: 1px solid var(--hairline); border-radius: 999px;
  background: transparent; color: var(--gray); font: inherit; font-size: var(--t-caption); line-height: 1.3;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.scb-lane button i { font-style: normal; color: rgba(245,242,235,.3); font-size: var(--t-caption); letter-spacing: .1em; }
.scb-lane button u { text-decoration: none; }
/* Unenhanced: the short token is redundant, the full title and sentence carry it. */
.scb-lane button u { display: none; }
.ov-board.is-enhanced .scb-lane button { cursor: pointer; }
.ov-board.is-enhanced .scb-lane button u { display: inline; }
.ov-board.is-enhanced .scb-lane button b,
.ov-board.is-enhanced .scb-lane button span { display: none; }
.scb-lane button b { color: var(--ink); font-family: var(--display); font-weight: 500; font-size: var(--t-small); letter-spacing: -.018em; }
.scb-lane button span { display: block; }
.ov-board:not(.is-enhanced) .scb-lane button {
  display: grid; grid-template-columns: 20px 1fr; border-radius: 4px; padding: 14px 0; border: 0;
  border-bottom: 1px solid var(--hairline); width: 100%;
}
.ov-board:not(.is-enhanced) .scb-lane ul { display: block; }
.ov-board:not(.is-enhanced) .scb-lane button span { grid-column: 2; margin-top: 5px; font-size: var(--t-caption); line-height: 1.58; }
.scb-lane button:hover, .scb-lane button:focus-visible, .scb-lane button.is-on {
  color: var(--ink); border-color: rgba(247,34,91,.42); background: rgba(195,21,55,.07); outline: none;
}
.scb-lane button.is-on i, .scb-lane button:hover i { color: var(--shu-text); }
.scb-readout {
  display: grid; grid-template-columns: minmax(120px, 168px) 1fr;
  gap: clamp(14px, 2vw, 30px); align-items: start;
  margin-top: 26px; min-height: 96px;
}
.scb-readout[hidden] { display: none; }
.scb-readout em {
  grid-column: 1; font-style: normal; color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em; padding-top: 6px;
}
.scb-readout b {
  grid-column: 2; font-family: var(--display); font-weight: 500; color: var(--ink);
  font-size: var(--t-h4); letter-spacing: -.028em; line-height: 1.2;
}
.scb-readout p {
  grid-column: 2; margin-top: 10px; color: var(--gray); font-size: var(--t-small); line-height: 1.7; max-width: 60ch;
}
.scb-readout.is-swapping b, .scb-readout.is-swapping p { opacity: 0; transform: translateY(6px); }
.scb-readout b, .scb-readout p { transition: opacity .28s ease, transform .32s cubic-bezier(.2,.8,.2,1); }

@media (max-width: 900px) {
  .ov-mosaic, .ov-mosaic--map { grid-template-columns: repeat(2, 1fr); }
  .ovm--hero, .ovm--wide, .ovm--2, .ovm--3 { grid-column: span 2; }
  .ovm { min-height: 148px; }
  .ovm--map { min-height: 190px; }
  .ovm--aside { padding-right: clamp(18px, 1.7vw, 26px); }
  .ovm--aside .ovm-seasons { position: relative; right: auto; top: auto; margin: 6px auto 0; }
  .scb-lane, .scb-readout { grid-template-columns: 1fr; }
  .scb-tag { padding-top: 0; }
  .scb-readout em { grid-column: 1; }
  .scb-readout b, .scb-readout p { grid-column: 1; }
}
@media (max-width: 560px) {
  .ov-mosaic, .ov-mosaic--map { grid-template-columns: 1fr; }
  .ovm--hero, .ovm--wide, .ovm--2, .ovm--3 { grid-column: span 1; }
  .ovm-orbit { height: 132px; }
  .scb-lane ul { display: block; }
  .scb-lane li + li { margin-top: 8px; }
  .scb-lane button { width: 100%; }
}

/* --- how I work: sticky, one move at a time, each with its own diagram --- */
.track-moves { height: 340vh; }
.track-moves .lt-stage { justify-content: center; }
.moves-stage {
  display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(30px, 5vw, 80px);
  align-items: center; padding: 0 8vw; max-width: 1280px; margin-inline: auto; width: 100%;
}
.moves-left { position: relative; }
.moves-ticks { display: flex; gap: 8px; margin: 26px 0 30px; }
.moves-ticks i { width: 38px; height: 3px; border-radius: 3px; background: rgba(245,242,235,.14); transform-origin: 0 50%; transition: background .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.moves-ticks i.is-on { background: var(--shu); transform: scaleY(2); }
.moves-copy { position: relative; min-height: 15em; }
.moves-copy article { position: absolute; inset: 0; opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .62s cubic-bezier(.2,.8,.2,1); }
.moves-copy article.is-on { opacity: 1; transform: none; }
.moves-copy em { font-style: normal; color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .2em; }
.moves-copy h3 {
  margin-top: 14px; font-family: var(--display); font-weight: 500; letter-spacing: -.032em;
  font-size: var(--t-h3); line-height: 1.08; max-width: 17ch; text-wrap: balance;
}
.moves-copy p { margin-top: 16px; color: var(--gray); font-size: var(--t-small); line-height: 1.78; max-width: 48ch; }
.moves-copy p b { color: var(--ink); font-weight: 500; }

.moves-viz { position: relative; aspect-ratio: 1 / 1; max-height: 58vh; border-radius: 22px; border: 1px solid var(--hairline); background: rgba(245,242,235,.014); overflow: hidden; }
.mv { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.mv.is-on { opacity: 1; }

/* 01 · nothing to copy — a sweep that finds nothing, then one ink mark */
.mv-copy .mvc-frame { position: absolute; inset: 22%; border: 1px dashed rgba(245,242,235,.18); border-radius: 12px; }
.mv-copy .mvc-scan { position: absolute; top: 22%; bottom: 22%; left: 22%; width: 2px; background: linear-gradient(180deg, transparent, rgba(245,242,235,.45), transparent); }
.mv-copy.is-on .mvc-scan { animation: mvcScan 2.6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes mvcScan { 0% { left: 22%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 78%; opacity: 0; } }
.mv-copy .mvc-empty { position: absolute; top: 14%; left: 0; right: 0; text-align: center; color: var(--gray); font-size: var(--t-caption); letter-spacing: .24em; }
.mv-copy .mvc-dot { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--shu); transform: scale(0); }
.mv-copy.is-on .mvc-dot { animation: mvcDot 2.6s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes mvcDot { 0%,42% { transform: scale(0); } 58% { transform: scale(1.35); } 72%,100% { transform: scale(1); } }
.mv-copy .mvc-ring { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; border: 1px solid rgba(195,21,55,.6); transform: scale(0); opacity: 0; }
.mv-copy.is-on .mvc-ring { animation: mvcRing 2.6s ease-out infinite; }
@keyframes mvcRing { 0%,50% { transform: scale(1); opacity: 0; } 62% { opacity: .9; } 100% { transform: scale(5.4); opacity: 0; } }

/* 02 · shared model — scatter snaps into nine aligned roles */
.mv-model .mvm-dot {
  position: absolute; width: 7px; height: 7px; border-radius: 50%; background: rgba(245,242,235,.42);
  left: var(--sx); top: var(--sy);
  transition: left .95s cubic-bezier(.2,.8,.2,1), top .95s cubic-bezier(.2,.8,.2,1), background .6s ease, border-radius .8s ease, width .9s ease;
  transition-delay: calc(var(--i) * .045s);
}
.mv-model.is-on .mvm-dot { left: var(--tx); top: var(--ty); width: 30px; border-radius: 3px; background: rgba(245,242,235,.6); }
.mv-model.is-on .mvm-dot:nth-child(3n+1) { background: var(--shu); }
.mv-model .mvm-cap { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; color: var(--gray); font-size: var(--t-caption); letter-spacing: .24em; }

/* 03 · architecture — one entry passes three gates */
.mv-arch .mva-gate {
  position: absolute; left: 18%; right: 18%; height: 46px; border-radius: 8px;
  border: 1px solid rgba(245,242,235,.16); background: rgba(245,242,235,.02);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em;
  transition: border-color .5s ease, color .5s ease, background .5s ease;
}
.mv-arch .mva-gate:nth-of-type(1) { top: 20%; }
.mv-arch .mva-gate:nth-of-type(2) { top: 44%; }
.mv-arch .mva-gate:nth-of-type(3) { top: 68%; }
.mv-arch.is-on .mva-gate { animation: mvaLit 3.6s ease-in-out infinite; }
.mv-arch.is-on .mva-gate:nth-of-type(2) { animation-delay: .5s; }
.mv-arch.is-on .mva-gate:nth-of-type(3) { animation-delay: 1s; }
@keyframes mvaLit {
  0%,10% { border-color: rgba(245,242,235,.16); color: var(--gray); background: rgba(245,242,235,.02); }
  22%,44% { border-color: rgba(195,21,55,.6); color: var(--ink); background: rgba(195,21,55,.07); }
  70%,100% { border-color: rgba(245,242,235,.16); color: var(--gray); background: rgba(245,242,235,.02); }
}
.mv-arch .mva-token { position: absolute; left: 50%; top: 12%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 2px; background: var(--shu); box-shadow: 0 0 14px rgba(195,21,55,.55); }
.mv-arch.is-on .mva-token { animation: mvaFall 3.6s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes mvaFall { 0% { top: 10%; opacity: 0; } 8% { opacity: 1; } 30% { top: 42%; } 55% { top: 66%; } 82% { top: 88%; opacity: 1; } 100% { top: 90%; opacity: 0; } }

/* 04 · behaviour — what people said vs what people did */
.mv-behave { display: flex; flex-direction: column; justify-content: center; gap: 34px; padding: 0 16%; }
.mv-behave .mvb-row span { display: block; color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em; margin-bottom: 12px; }
.mv-behave .mvb-bar { height: 10px; border-radius: 6px; background: rgba(245,242,235,.07); overflow: hidden; }
.mv-behave .mvb-bar i { display: block; height: 100%; border-radius: 6px; background: rgba(245,242,235,.34); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.3,.8,.3,1); }
.mv-behave.is-on .mvb-bar i { transform: scaleX(1); }
.mv-behave .mvb-row--did .mvb-bar i { background: var(--shu); transition-delay: .34s; }
.mv-behave .mvb-row--did span { color: var(--shu-text); }
.mv-behave .mvb-val { margin-top: 12px; font-family: var(--display); font-weight: 500; font-size: var(--t-lede); letter-spacing: -.03em; }

/* --- range: a spectrum, then the artifacts --- */
.ov-spectrum { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin-top: 46px; }
.ov-spectrum > span { color: var(--gray); font-size: var(--t-caption); letter-spacing: .22em; white-space: nowrap; }
.ovsp-bar { display: flex; gap: 4px; align-items: center; }
.ovsp-bar i {
  flex: 1; height: 5px; border-radius: 3px; background: rgba(245,242,235,.11);
  transform: scaleY(.6); transform-origin: 50% 50%;
  transition: background .5s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--n) * .07s);
}
.ov-spectrum.is-active .ovsp-bar i { background: var(--shu); transform: scaleY(1); }
.ov-spectrum.is-active .ovsp-bar i:nth-child(-n+2) { background: rgba(245,242,235,.6); }
.ov-evidence { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.ov-evidence .cell {
  position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(245,242,235,.08); background: #101012;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.ov-evidence .cell:hover { transform: translateY(-5px); border-color: rgba(245,242,235,.24); }
.ov-evidence .cell img { width: 100%; height: 172px; object-fit: cover; object-position: top; filter: saturate(.85) brightness(.86); transition: filter .45s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.ov-evidence .cell:hover img { filter: saturate(1) brightness(1); transform: scale(1.03); }
.ov-evidence figcaption {
  position: absolute; inset: auto 0 0 0; padding: 34px 14px 13px;
  background: linear-gradient(180deg, transparent, rgba(8,8,9,.92) 46%);
  color: rgba(245,242,235,.9); font-size: var(--t-caption); line-height: 1.4;
}
.ov-evidence figcaption span { display: block; margin-bottom: 5px; color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .2em; }

/* --- the products, at a size you can actually read ---
   This section is titled "the products" and, until 2026-08-01, the products
   were the smallest thing on it: a three- or four-up card grid whose media box
   was 228x151 with object-fit:cover, so a 1280px-wide screen recording was
   cropped to a strip and scaled to roughly a sixth. A hiring manager could see
   that the work was dense and could read none of it.

   Now one product per row, screen beside copy, alternating sides. The media
   takes the larger column (~600px rather than 228px: 2.6x linear, near 7x
   area) and object-fit:contain, so nothing is ever cropped — the source
   recordings run 1.40 to 1.77 aspect and no single ratio would suit them all.
   For Anchor the vertical order also reads truer: Read, Build, Price, Learn is
   a loop, and a stack shows sequence where a row of cards showed four peers. */
/* No rail. The horizontal version threaded a row of peer cards together and
   earned its place; carried down the side of a stack it threaded nothing, and
   a brush texture masked to 5px by twelve hundred loses all its grain and
   renders as a hard vermilion line — an unexplained mark beside the work.
   Each row is self-contained and the numbered labels carry the sequence. */
.ov-products {
  position: relative; display: grid; grid-template-columns: 1fr;
  gap: clamp(26px, 4.4vh, 56px); margin-top: 56px;
}
/* minmax(0, …) on both tracks, NOT a bare fr. An fr track's automatic minimum
   is its content, and .anc-shot wraps a 1440px iframe — with a bare fr the
   track refused to shrink and Anchor's frames overflowed a 946px card to
   1458px. Anything placed in these columns must be free to shrink. */
.ov-products article {
  position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px);
  border-radius: 18px; border: 1px solid var(--hairline); overflow: hidden;
  background: rgba(245,242,235,.016);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s ease;
}
/* alternate which side the screen sits on, so the stack does not march */
.ov-products article:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr); }
.ov-products article:nth-child(even) .ovp-media { order: 2; }
/* The per-card dot is gone. Its job was to mark a card's position on a
   HORIZONTAL rail above a row; against a vertical rail beside a full-width row
   it marked nothing, and because the card starts inside the rail's padding it
   rendered as a small vermilion circle floating beside the screenshot. The
   rail alone carries the thread now; sequence lives in the numbered labels. */
.ov-products article:hover { transform: translateY(-4px); border-color: rgba(245,242,235,.2); }

.ovp-media {
  position: relative; background: #0C0C0E; align-self: stretch; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* A flex item's automatic minimum size is its content, so the 1440px iframe
   inside .anc-shot refused to shrink and pushed the box past the card. Every
   child here must be allowed to come down to the column width. */
.ovp-media > * { min-width: 0; max-width: 100%; }
/* Height follows the artwork, bounded at both ends. A floor stops a wide, short
   clip from collapsing; a ceiling stops a tall one from running away — PNC's
   mobile capture is 375x1725, and at column width with no cap it drove a single
   row to 2023px and broke the section. object-fit:contain because these sources
   run 0.22 to 1.77 aspect and no one ratio suits them. */
.ovp-media video,
.ovp-media img {
  width: 100%; height: auto;
  min-height: clamp(200px, 22vw, 300px); max-height: clamp(300px, 34vw, 460px);
  object-fit: contain; object-position: center; filter: saturate(.92); display: block;
}
/* Anchor's frames are whole documents scaled to their container by .anc-shot,
   which sets its own height from the frame's reported size, so they take the
   room rather than a fit rule. flex-basis 100% + min-width 0 pins the button to
   the column instead of to the 1440px document it contains. */
.ovp-media .anc-shot { flex: 1 1 100%; width: 100%; min-width: 0; align-self: center; }

.ovp-copy { padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2.2vw, 30px); }
.ov-products article > .ovp-copy > span { display: block; color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .17em; }
.ov-products h3 { margin-top: 13px; font-family: var(--display); font-weight: 500; font-size: var(--t-h4); line-height: 1.2; letter-spacing: -.026em; }
.ov-products p { margin-top: 12px; margin-bottom: 20px; color: var(--gray); font-size: var(--t-small); line-height: 1.72; }
.ov-products .ovp-copy > b { display: block; padding-top: 15px; border-top: 1px solid var(--hairline); color: var(--gray); font-size: var(--t-caption); font-weight: 400; letter-spacing: .1em; line-height: 1.5; }

/* --- outcomes, weighted rather than evenly spaced --- */
.ov-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(34px, 4vh, 52px) clamp(20px, 3vw, 46px); margin-top: 40px; align-items: start; }
.ov-outcomes > div { position: relative; padding-top: 24px; }
.ov-outcomes > div::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: rgba(245,242,235,.28); transform: scaleX(0); transform-origin: 0 50%;
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  transition: transform .95s cubic-bezier(.3,.8,.3,1);
}
.ov-outcomes.is-active > div::before { transform: scaleX(1); }
.ov-outcomes.is-active > div:nth-child(2)::before { transition-delay: .12s; }
.ov-outcomes.is-active > div:nth-child(3)::before { transition-delay: .24s; }
.ov-outcomes.is-active > div:nth-child(4)::before { transition-delay: .36s; }
.ov-outcomes.is-active > div:nth-child(5)::before { transition-delay: .48s; }
.ov-outcomes > div.hot::before { background: var(--shu-deep); }
.ov-outcomes b { display: block; font-family: var(--display); font-weight: 500; letter-spacing: -.042em; font-size: var(--t-h2); line-height: .98; white-space: nowrap; }
.ov-outcomes > div.hot b { color: var(--shu-text); }
.ov-outcomes b em { font-style: normal; }
.ov-outcomes span { display: block; margin-top: 14px; color: var(--gray); font-size: var(--t-caption); line-height: 1.6; max-width: 24ch; }
.ov-honest {
  margin-top: clamp(40px, 5vh, 64px); padding-top: 26px; border-top: 1px solid var(--hairline);
  color: rgba(245,242,235,.82); font-size: var(--t-body); line-height: 1.75; max-width: 64ch;
}

/* ============ CRAFT PLATE ============
   One real shipped screen per case study, at full fidelity, zoomable, with the
   decisions that produced it called out beside it. Everything else on these
   pages argues about systems and outcomes; this is the section that lets a
   designer judge the actual craft — density, hierarchy, type, states.
   ===================================== */
/* Bottom padding matters here: the next-link rule follows immediately, and with
   `0` the divider sat almost on top of the last line of the notes. */
.craft { max-width: 1280px; margin: 0 auto; padding: clamp(90px,12vh,150px) 8vw clamp(76px,10vh,124px); }
.craft-head { max-width: 68ch; }
.craft-head h2 {
  margin-top: 22px; font-family: var(--display); font-weight: 500;
  font-size: clamp(34px,4.4vw,60px); line-height: 1.02; letter-spacing: -.045em; text-wrap: balance;
}
.craft-head > p { margin-top: 20px; color: var(--gray); font-size: var(--t-small); line-height: 1.8; }
/* v0.135 — the plate used to be a 1.55fr / 1fr side-by-side, which never
   aligned: the screen and the four notes are different natural heights, so one
   column always ran short and the notes floated against nothing. The screen is
   also the whole point of this section and a 1.55fr column was starving it.
   Now the screen runs full width and the notes sit beneath it as an even row of
   four, which lines up by construction at every viewport. */
.craft-body { margin-top: clamp(40px,5.5vh,66px); }
.craft-shot {
  position: relative; margin: 0; border: 1px solid rgba(245,242,235,.12); border-radius: 16px;
  background: rgba(245,242,235,.02); overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.45);
}
/* These are tall product screens. Cap the window so one plate cannot swallow
   the page, and let the lightbox show the whole thing — the crop is from the
   top, so the screen still reads as a screen rather than a detail. */
.craft-shot img {
  display: block; width: 100%; height: auto;
  max-height: min(760px, 76vh); object-fit: cover; object-position: top center;
  cursor: zoom-in;
}
.craft-shot .craft-zoom {
  position: absolute; right: 12px; top: 12px; z-index: 2; pointer-events: none;
  padding: 6px 10px; border-radius: 7px;
  background: rgba(8,8,9,.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--gray); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease;
}
.craft-shot:hover .craft-zoom { opacity: 1; transform: none; }
/* Anchor's frames are 1440x900 documents scaled by .anc-shot, so the plate
   hands sizing to that system rather than stretching the iframe itself. */
.craft-shot--anc .anc-shot { border-radius: 0; }
.craft-shot figcaption {
  padding: 12px 16px; border-top: 1px solid rgba(245,242,235,.09);
  color: var(--gray); font-size: var(--t-label); letter-spacing: .13em; text-transform: uppercase;
}
.craft-notes {
  display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(18px,2.2vw,32px);
  margin: clamp(30px,3.6vh,44px) 0 0; padding: 0; list-style: none;
}
.craft-notes li { list-style: none; padding: 20px 0 0; border-top: 1px solid rgba(245,242,235,.14); }
.craft-notes .cn-k { display: block; margin-bottom: 9px; color: var(--shu-text); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; }
/* Two lines reserved so the body copy starts level across the row of four,
   whether a given heading wraps or not. See the note on .ovm--map figcaption —
   same failure, same remedy, applied to every repeated-card group on the site. */
.craft-notes b { display: block; min-height: calc(2 * 1.38em); color: var(--ink); font-size: var(--t-small); font-weight: 500; line-height: 1.38; letter-spacing: -.01em; }
.craft-notes p { margin-top: 9px; color: var(--gray); font-size: var(--t-caption); line-height: 1.72; }
@media (max-width: 1080px) { .craft-notes { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px)  { .craft-notes { grid-template-columns: 1fr; } }

/* Provenance: how each outcome number was measured, and by whom. Deliberately
   quiet — it exists so a sceptical reader can stop being sceptical. */
.ov-prov {
  margin-top: 30px; max-width: 74ch;
  color: var(--gray); font-size: var(--t-caption); line-height: 1.75; text-wrap: pretty;
}
.ov-prov b { color: rgba(245,242,235,.7); font-weight: 500; }
/* Screen provenance, STORY VIEW ONLY. The overview and deep views already open
   with `.conf-note`, which says this and more ("faithful rebuilds of shipped
   screens rather than production captures"); duplicating it inside those views
   was redundant and has been removed. The story view has no conf-note, so this
   is the one place the frames would otherwise go unexplained. Reuses .ov-prov
   so it reads as the same class of statement as the metric provenance
   elsewhere — a footnote a reader can trust, not a disclaimer. */
.anc-prov { margin-top: 0; margin-bottom: 26px; }
.story-screens .anc-prov { margin-inline: auto; text-align: center; }

/* --- "what I'd do differently" ---------------------------------------------
   Every case study on this site resolves into a win, and a staff or principal
   reviewer probes hard for the opposite: an arc with no failure in it reads as
   managed, or as work done where being wrong was never expensive. This section
   is the answer, so it is styled to be READ, not skimmed past — full-width
   measure, body copy at the same size as the main narrative, no card chrome
   that would let the eye treat it as an aside. It is not an apology, and the
   type should not whisper like one. Self-contained so the same markup drops
   into both the overview and the deep view without inheriting either shell. */
/* 96px matches .ov-act, so the jump-nav chip lands this section at the same
   height as every other one rather than inheriting the global [id] 132px. */
.wrongs { max-width: 1180px; margin: 0 auto; padding: clamp(78px, 9vh, 122px) 8vw; scroll-margin-top: 96px; }
.wrongs-head { max-width: 62ch; }
.wrongs-head h2 {
  margin-top: 22px;
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.035em;
}
.wrongs-head > p { margin-top: 18px; color: var(--gray); font-size: var(--t-small); line-height: 1.78; text-wrap: pretty; }
.wrongs-list { margin-top: 52px; list-style: none; border-top: 1px solid rgba(245,242,235,.16); }
.wrongs-list li {
  display: grid; grid-template-columns: 46px minmax(210px, .8fr) 2fr; gap: clamp(16px, 3vw, 46px);
  padding: 30px 6px; border-bottom: 1px solid var(--hairline); align-items: start;
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .62s cubic-bezier(.2,.8,.2,1);
}
.wrongs-list.is-active li { opacity: 1; transform: none; }
.wrongs-list.is-active li:nth-child(2) { transition-delay: .09s; }
.wrongs-list.is-active li:nth-child(3) { transition-delay: .18s; }
.wrongs-list i {
  font-style: normal; color: var(--shu-text);
  font-size: var(--t-caption); letter-spacing: .1em; padding-top: 5px;
}
.wrongs-list b {
  color: var(--ink); font-family: var(--display); font-weight: 500;
  font-size: var(--t-lede); line-height: 1.32; letter-spacing: -.015em;
}
.wrongs-list p { color: var(--gray); font-size: var(--t-small); line-height: 1.76; max-width: 64ch; }
.wrongs-list p em { font-style: normal; color: rgba(245,242,235,.8); }
@media (max-width: 900px) {
  .wrongs { padding-inline: 7vw; }
  .wrongs-list li { grid-template-columns: 34px 1fr; gap: 12px 16px; padding: 26px 2px; }
  .wrongs-list p { grid-column: 2; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .wrongs-list li { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- seniority signals --- */
.ov-signals { margin-top: 46px; border-top: 1px solid rgba(245,242,235,.16); }
.ov-signals > div {
  position: relative; display: grid; grid-template-columns: 46px minmax(190px, .74fr) 2.1fr; gap: clamp(16px, 3vw, 46px);
  padding: 28px 6px; border-bottom: 1px solid var(--hairline); align-items: start;
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .62s cubic-bezier(.2,.8,.2,1), background .35s ease;
}
.ov-signals.is-active > div { opacity: 1; transform: none; }
.ov-signals.is-active > div:nth-child(2) { transition-delay: .09s; }
.ov-signals.is-active > div:nth-child(3) { transition-delay: .18s; }
.ov-signals.is-active > div:nth-child(4) { transition-delay: .27s; }
.ov-signals.is-active > div:nth-child(5) { transition-delay: .36s; }
.ov-signals > div:hover { background: rgba(245,242,235,.022); }
.ov-signals i { font-style: normal; color: rgba(245,242,235,.26); font-size: var(--t-caption); letter-spacing: .1em; padding-top: 4px; }
.ov-signals > div:hover i { color: var(--shu-text); }
.ov-signals span { color: var(--ink); font-family: var(--display); font-weight: 500; font-size: var(--t-body); letter-spacing: -.022em; line-height: 1.3; }
.ov-signals p { color: var(--gray); font-size: var(--t-small); line-height: 1.76; max-width: 62ch; }

/* ============================================================
   READING DEPTH — responsive
   ============================================================ */
@media (max-width: 1024px) {
  .ov-evidence { grid-template-columns: repeat(2, 1fr); }
  .result-wall { grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.6vw, 36px); }
  .ov-outcomes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  /* Sticky stages stop being stages: they become ordinary stacked sections,
     which reads better on a phone than a pinned scene fighting the URL bar. */
  .story-track, .ov-track { height: auto !important; }
  .lt-stage { position: static; height: auto; min-height: 0; padding: clamp(76px, 11vh, 120px) 0; overflow: visible; }
  .lt-beats { min-height: 0; }
  .lt-beats p { position: static; opacity: 1; transform: none; margin-top: 12px; }

  .track-web .lt-stage { padding-top: clamp(76px, 11vh, 120px); }
  .web-field { position: relative; inset: auto; height: 46vh; min-height: 280px; margin-top: 30px; }
  .web-field .wf-link, .web-field .wf-node, .web-field .wf-label { --o: 0; }
  .web-tally { position: relative; left: auto; bottom: auto; margin: 30px 8vw 0; opacity: 1; }
  .web-tally b { font-size: clamp(58px, 19vw, 110px); }

  .desk-book { margin-top: 26px; -webkit-mask: none; mask: none; }
  /* Progress-driven reveals need a tall track to breathe; once the stage is
     static the rows simply read as a finished ledger. */
  .desk-row { grid-template-columns: minmax(0,1.4fr) 76px minmax(0,.9fr) 84px; gap: 12px; opacity: 1; }
  .desk-row .dr-tie::before { transform: scaleX(1); }
  .desk-row--off .dr-tie::before { transform: scaleX(.42); }
  .desk-row .dr-flag { opacity: 1; }
  .desk-row > s { font-size: var(--t-caption); }
  .desk-slips { position: relative; inset: auto; display: flex; flex-wrap: wrap; gap: 12px; padding: 26px 8vw 0; }
  .desk-slip { position: static; opacity: 1; transform: none !important; max-width: none; flex: 1 1 220px; }
  .desk-clockline { position: relative; left: auto; right: auto; bottom: auto; opacity: 1; flex-direction: column; align-items: flex-start; padding: 32px 8vw 0; }
  .desk-clockline .dcl-r { text-align: left; }

  .stakes-rotor { min-height: 0; }
  .stakes-rotor article { position: static; opacity: 1; transform: none; padding: 34px 0; border-top: 1px solid var(--hairline); }
  .stakes-rotor article:first-child { border-top: 0; }
  .stakes-rotor b { font-size: clamp(58px, 20vw, 120px); }
  .stakes-rotor b.is-word { font-size: clamp(38px, 13vw, 82px); }
  .stakes-rotor p { margin-top: 20px; max-width: none; }
  .stakes-rail { display: none; }

  .tool-rack { grid-template-columns: 1fr; gap: 0; }
  .tool-rack figure { opacity: 1; transform: none; filter: none; border-color: rgba(245,242,235,.14); margin-top: 34px; }
  .tool-rack figure::after { box-shadow: none; }
  .tool-copy { min-height: 0; }
  .tool-copy article { position: static; left: auto; right: auto; opacity: 1; transform: none; margin-top: 18px; }
  /* On phones each tool reads as its own block: video, then its words. */
  .track-tools .lt-stage { display: block; }

  .fork-field { position: relative; inset: auto; height: 40vh; min-height: 240px; margin-top: 34px; }
  .fork-cap { position: static; opacity: 1; text-align: left; padding: 0 8vw; margin-top: 18px; }
  .fork-ask q { max-width: none; }

  .result-wall { grid-template-columns: 1fr; }
  .result-wall p { max-width: none; }

  .moves-stage { grid-template-columns: 1fr; gap: 30px; }
  .moves-copy { min-height: 0; }
  .moves-copy article { position: static; opacity: 1; transform: none; padding: 30px 0; border-top: 1px solid var(--hairline); }
  .moves-copy article:first-child { border-top: 0; }
  .moves-viz { display: none; }
  .moves-ticks { display: none; }

  .ov-columns { grid-template-columns: 1fr; }
  /* the stack collapses to screen-over-copy */
  .ov-products article,
  .ov-products article:nth-child(even) { grid-template-columns: 1fr; gap: 0; }
  .ov-products article:nth-child(even) .ovp-media { order: 0; }
  .ovp-media video, .ovp-media img { min-height: 0; max-height: 62vh; }
  .ov-shift { grid-template-columns: 1fr; gap: 26px; }
  .ov-shift-mid { width: 100%; height: 6px; justify-self: center; }
  .ov-shift-after i { transform: translateX(-14px); }
  .ov-signals > div { grid-template-columns: 34px 1fr; }
  .ov-signals p { grid-column: 2; margin-top: 10px; }
  .ov-spec > div { grid-template-columns: 1fr; gap: 8px; }
  .depth-exit { padding-top: 9vh; }
}
@media (max-width: 620px) {
  .ds-track { flex-direction: column; width: min(320px, 88vw); border-radius: 22px; }
  .ds-opt { flex-direction: row; justify-content: space-between; align-items: center; border-radius: 16px; min-width: 0; padding: 13px 18px; }
  .ds-opt span { font-size: var(--t-caption); }
  .depth-dock { bottom: 14px; }
  .dd-opt { padding: 8px 13px; font-size: var(--t-caption); }
  .lt-head, .desk-book, .stakes-rotor, .tool-rack, .tool-copy, .fork-ask, .moves-stage { padding-inline: 6vw; }
  .desk-slips, .desk-clockline, .web-tally, .fork-cap { padding-inline: 6vw; margin-inline: 0; }
  .story-result, .ov-act, .story-pull { padding-inline: 6vw; }
  .desk-row { grid-template-columns: minmax(0,1.5fr) 60px minmax(0,.7fr); gap: 10px; }
  .desk-row .dr-flag { display: none; }
  .desk-row .dr-amt i { width: 34px; }
  .ov-evidence, .ov-outcomes { grid-template-columns: 1fr; }
  .depth-exit-row { flex-direction: column; align-items: center; }
}
@media (max-width: 620px), (prefers-reduced-transparency: reduce) {
  .ds-track, .dd-track { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20,20,22,.96); }
}

/* Reduced motion: every stage collapses to a plain, complete, static read. */
@media (prefers-reduced-motion: reduce) {
  #page { transition: none; }
  .story-track, .ov-track { height: auto !important; }
  .lt-stage { position: static; height: auto; min-height: 0; padding: clamp(76px, 11vh, 130px) 0; overflow: visible; }
  [data-lite] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .story-hero-bg .shb-rules, .story-hero-bg .shb-rules::before, .story-hero-bg .shb-rules::after,
  .story-scrollcue i,
  .mv-copy .mvc-scan, .mv-copy .mvc-dot, .mv-copy .mvc-ring, .mv-arch .mva-gate, .mv-arch .mva-token { animation: none !important; }
  .mv-copy .mvc-dot { transform: scale(1); }
  .story-pull--rule::before, .result-wall article::before, .ov-outcomes > div::before,
  .ov-shift-mid::before { transform: scaleX(1) !important; transition: none !important; }
  .story-pull--rule::before { transform: translateX(-50%) scaleX(1) !important; }
  .web-field .wf-link { stroke-dashoffset: 0 !important; }
  .web-field .wf-node { opacity: 1 !important; transform: none !important; }
  .web-field .wf-label { opacity: .9 !important; }
  .web-tally, .desk-clockline, .fork-cap, .desk-slip { opacity: 1 !important; transform: none !important; }
  .desk-row { opacity: 1 !important; }
  .desk-row .dr-tie::before { transform: scaleX(1) !important; }
  .desk-row--off .dr-tie::before { transform: scaleX(.42) !important; }
  .desk-row .dr-flag { opacity: 1 !important; }
  .fork-field .ff-path { stroke-dashoffset: 0 !important; }
  .lt-beats p, .stakes-rotor article, .tool-copy article, .moves-copy article, .mv {
    position: static; opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .lt-beats { min-height: 0; }
  .lt-beats p + p { margin-top: 10px; }
  .stakes-rotor, .tool-copy, .moves-copy { min-height: 0; }
  .stakes-rotor article, .moves-copy article { padding: 30px 0; border-top: 1px solid var(--hairline); }
  .tool-rack figure { opacity: 1 !important; transform: none !important; filter: none !important; }
  .moves-viz { display: none; }
  .ov-columns li, .ov-signals > div, .ov-shift-side i { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ovm, .ovm-converge i, .ovm-gates i, .ovm-converge em, .ovm-gates em,
  .ovm-rail s, .scb-lane li, .scb-readout b, .scb-readout p {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .ovmb-fill { transform: scaleX(1) !important; transition: none !important; }
  /* Every ambient loop inside a bento tile stops dead. */
  .ovm *, .ovm *::before, .ovm *::after, .ovm::before, .ovm::after { animation: none !important; }
  .ovm-rail::after { opacity: 0 !important; }
  .ovg-seed s { opacity: .3 !important; }
  .ovg-seed s:nth-child(2), .ovg-seed s:nth-child(3) { display: none; }
  .ovg-converge s { opacity: .75 !important; transform: none !important; }
  .ovg-rings s { opacity: .5 !important; }
  .ovg-pitch s { transform: scaleY(1) !important; }
  .ovg-strike em { transform: scaleX(1) !important; }
  .ovg-layers s { transform: none !important; }
  .ovg-live s { opacity: .5 !important; }
  .ovg-live s:nth-child(2) { display: none; }
  .ovm-capacity i { transform: scaleX(1) !important; }
  .ovm-loop4 em::after, .ovm-rail::after { display: none; }
  .ovm-orbit i {
    opacity: 1 !important; transition: none !important;
    transform: rotate(var(--a)) translateX(78px) rotate(calc(-1 * var(--a))) translate(-50%, -50%) !important;
  }
  .ovsp-bar i { background: var(--shu) !important; transform: none !important; transition: none !important; }
  .ov-evidence .cell img { filter: saturate(.9) brightness(.95); }
  .moves-ticks, .stakes-rail { display: none; }
}

/* ============================================================
   LIGHTBOX AS A GALLERY
   Images that sit side by side are one set; the lightbox steps
   through them with arrows, arrow keys or a swipe.
   ============================================================ */
.lightbox .lb-arrow,
.anc-lightbox .lb-arrow {
  position: absolute; top: 50%; margin-top: -26px; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(245,242,235,.18); background: rgba(20,20,22,.6);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--ink); cursor: pointer; display: none; place-items: center; z-index: 4;
  transition: background .25s ease, border-color .25s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.lightbox.has-set .lb-arrow { display: grid; }
.lightbox .lb-arrow svg,
.anc-lightbox .lb-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lightbox .lb-arrow:hover,
.anc-lightbox .lb-arrow:hover { background: rgba(245,242,235,.14); border-color: rgba(245,242,235,.34); }
.lightbox .lb-prev,
.anc-lightbox .lb-prev { left: max(14px, 2.4vw); }
.lightbox .lb-next,
.anc-lightbox .lb-next { right: max(14px, 2.4vw); }
.lightbox .lb-prev:hover,
.anc-lightbox .lb-prev:hover { transform: translateX(-3px); }
.lightbox .lb-next:hover,
.anc-lightbox .lb-next:hover { transform: translateX(3px); }
.lightbox .lb-count {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em;
}
.lightbox .lb-count:empty { display: none; }
.lightbox img { cursor: zoom-out; }
.lightbox.has-set img { max-width: min(94vw, calc(100vw - 168px)); cursor: default; }
@media (max-width: 620px) {
  .lightbox .lb-arrow { width: 44px; height: 44px; margin-top: -22px; }
  .lightbox.has-set img { max-width: 92vw; max-height: 74vh; }
  .lightbox .lb-prev { left: 8px; }
  .lightbox .lb-next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox .lb-arrow { transition: none; }
  .lightbox .lb-prev:hover, .lightbox .lb-next:hover { transform: none; }
}

/* ============================================================
   AMAZON TALENT — the short versions
   This case is about TIME and SCALE, so its scenes are built on
   distance travelled and quantity, where Finance's were built on
   a ledger balancing. Shared chrome (.lt-*, .depth-*, .ov-*) is
   reused; every scene below is specific to this project.
   ============================================================ */

/* --- 01 · a package moves faster than a person --- */
.track-race { height: 240vh; }
.track-race .lt-stage { justify-content: flex-start; padding-top: clamp(84px, 12vh, 130px); }
.race-lanes { position: relative; z-index: 2; margin-top: clamp(30px, 5vh, 58px); padding: 0 8vw; max-width: 1280px; width: 100%; margin-inline: auto; }
.race-lane { position: relative; padding: clamp(26px, 4vh, 48px) 0; border-top: 1px solid var(--hairline); }
.race-lane:last-child { border-bottom: 1px solid var(--hairline); }
.race-lane > span { display: block; color: var(--gray); font-size: var(--t-caption); letter-spacing: .24em; }
.race-track { position: relative; height: 46px; margin-top: 20px; }
.race-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(245,242,235,.14); }
.race-gate {
  position: absolute; top: 50%; width: 2px; height: 15px; margin-top: -7.5px; border-radius: 2px;
  background: rgba(245,242,235,.22); left: var(--x);
}
/* Each gate lights only once the request has actually reached it. */
.race-gate::after {
  content: ""; position: absolute; inset: -2px -1px; border-radius: 3px; background: var(--shu);
  box-shadow: 0 0 10px rgba(195,21,55,.5);
  opacity: clamp(0, calc((var(--p) - var(--o)) * 22), 1);
}
.race-dot {
  position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 22px rgba(245,242,235,.35);
}
/* The package clears its lane in the first third; the person is still going. */
.race-lane--parcel .race-dot { left: clamp(0%, calc(var(--p) * 320%), 100%); }
.race-lane--person .race-dot { left: clamp(0%, calc((var(--p) - .06) * 112%), 100%); background: var(--shu); box-shadow: 0 0 22px rgba(195,21,55,.5); }
.race-verdict {
  position: absolute; right: 0; bottom: clamp(26px, 4vh, 48px);
  font-family: var(--display); font-weight: 500; letter-spacing: -.04em; line-height: .9;
  font-size: clamp(30px, 4.4vw, 68px); white-space: nowrap;
}
.race-lane--parcel .race-verdict { opacity: clamp(0, calc((var(--p) - .3) * 8), 1); }
.race-lane--person .race-verdict { color: var(--shu-text); opacity: clamp(0, calc((var(--p) - .82) * 10), 1); }
.race-note { margin-top: 26px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .04em; }

/* --- 02 · one move, eight approvals, forty systems --- */
.track-systems { height: 255vh; }
.track-systems .lt-stage { justify-content: flex-start; padding-top: clamp(84px, 12vh, 130px); }
.sys-field { position: absolute; inset: auto 0 6%; z-index: 1; height: 56%; }
.sys-field svg { width: 100%; height: 100%; }
.sys-field .sf-tile { fill: rgba(245,242,235,.045); stroke: rgba(245,242,235,.10); stroke-width: 1; }
.sys-field .sf-tile--on {
  fill: rgba(195,21,55,.14); stroke: rgba(195,21,55,.55);
  opacity: clamp(.35, calc(.35 + (var(--p) - var(--o)) * 9), 1);
}
.sys-field .sf-route {
  fill: none; stroke: var(--shu); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - .2) * 1.9), 1));
}
.sys-tally {
  position: absolute; right: 8vw; top: 30%; z-index: 4; text-align: right;
  opacity: clamp(0, calc((var(--p) - .3) * 7), 1);
}
.sys-tally b { display: block; font-family: var(--display); font-weight: 500; letter-spacing: -.045em; font-size: clamp(46px, 7vw, 108px); line-height: .88; color: var(--shu-text); }
.sys-tally span { display: block; margin-top: 12px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .18em; }

/* --- 03 · one person, then a million (ink bloom) --- */
.track-bloom { height: 215vh; }
.bloom-field {
  position: absolute; inset: 0; z-index: 1;
  background-image: radial-gradient(circle, rgba(245,242,235,.5) 1.4px, transparent 1.6px);
  background-size: 22px 22px; background-position: center;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 calc(var(--p) * 78%), transparent calc(var(--p) * 78% + 90px));
  mask: radial-gradient(circle at 50% 50%, #000 calc(var(--p) * 78%), transparent calc(var(--p) * 78% + 90px));
}
.bloom-seed {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--shu); z-index: 2;
  box-shadow: 0 0 24px rgba(195,21,55,.55);
}
.track-bloom .lt-stage { justify-content: center; text-align: center; }
.track-bloom .lt-head { text-align: center; }
.track-bloom .lt-h { max-width: 22ch; margin-inline: auto; }
.track-bloom .lt-beats { margin-inline: auto; }
.bloom-tally { position: relative; z-index: 4; margin-top: clamp(30px, 5vh, 56px); opacity: clamp(0, calc((var(--p) - .34) * 6), 1); }
.bloom-tally b { display: block; font-family: var(--display); font-weight: 500; letter-spacing: -.05em; font-size: clamp(46px, 8vw, 128px); line-height: .88; }
.bloom-tally span { display: block; margin-top: 16px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em; }
.bloom-sites { position: absolute; left: 0; right: 0; bottom: clamp(38px, 7vh, 84px); z-index: 4; text-align: center; color: var(--gray); font-size: var(--t-caption); line-height: 1.6; opacity: clamp(0, calc((var(--p) - .62) * 7), 1); }
.bloom-sites b { color: var(--ink); font-weight: 500; }

/* --- 04 · four products, one record travelling between them --- */
.track-relay { height: 300vh; }
.track-relay .lt-stage { justify-content: center; gap: clamp(20px, 3.4vh, 40px); }
.relay-rack { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 18px); padding: 0 8vw; max-width: 1280px; margin-inline: auto; width: 100%; }
.relay-rack figure {
  position: relative; border-radius: 14px; overflow: hidden; border: 1px solid rgba(245,242,235,.09);
  background: #0C0C0E; opacity: .24; transform: scale(.94) translateY(8px); filter: saturate(.45);
  transition: opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1), filter .55s ease, border-color .5s ease;
}
.relay-rack figure.is-on { opacity: 1; transform: none; filter: none; border-color: rgba(195,21,55,.42); }
.relay-rack video { width: 100%; height: clamp(126px, 21vh, 210px); object-fit: cover; object-position: top; display: block; }
.relay-rack figcaption { padding: 12px 14px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .18em; }
.relay-rack figure.is-on figcaption { color: var(--ink); }
.relay-rail { position: relative; z-index: 3; height: 2px; margin: 0 8vw; max-width: 1280px; margin-inline: auto; width: calc(100% - 16vw); background: rgba(245,242,235,.12); }
.relay-rail i {
  position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--shu); box-shadow: 0 0 18px rgba(195,21,55,.6);
  left: clamp(0%, calc((var(--p) - .1) * 132%), 100%);
}
.relay-rail::after {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; background: var(--shu);
  width: clamp(0%, calc((var(--p) - .1) * 132%), 100%);
}

/* --- 05 · the gap Rise made visible --- */
.track-gap { height: 205vh; }
.track-gap .lt-stage { justify-content: center; }
.gap-bars { position: relative; z-index: 2; padding: 0 8vw; max-width: 1280px; margin-inline: auto; width: 100%; margin-top: clamp(28px, 4vh, 50px); }
.gap-row { display: grid; grid-template-columns: minmax(140px, .34fr) 1fr auto; gap: clamp(16px, 3vw, 40px); align-items: center; padding: clamp(16px, 2.6vh, 28px) 0; border-bottom: 1px solid var(--hairline); }
.gap-row > span { color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em; }
.gap-bar { position: relative; height: 12px; border-radius: 7px; background: rgba(245,242,235,.06); overflow: hidden; }
.gap-bar i {
  position: absolute; inset: 0; border-radius: 7px; transform-origin: 0 50%;
  transform: scaleX(clamp(0, calc((var(--p) - var(--o)) * 3.4), var(--w)));
  background: rgba(245,242,235,.42);
}
.gap-row--few .gap-bar i { background: var(--shu); }
.gap-row > b { font-family: var(--display); font-weight: 500; letter-spacing: -.04em; font-size: var(--t-h2); line-height: .9; }
.gap-row--few > b { color: var(--shu-text); }
.gap-quote {
  position: relative; z-index: 3; margin: clamp(30px, 5vh, 56px) 8vw 0; max-width: 1280px; margin-inline: auto;
  padding: 0 8vw; opacity: clamp(0, calc((var(--p) - .6) * 6), 1);
}
.gap-quote q { display: block; quotes: none; color: rgba(245,242,235,.9); font-size: var(--t-lede); line-height: 1.62; max-width: 56ch; }
.gap-quote cite { display: block; margin-top: 14px; font-style: normal; color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em; }

/* --- overview · four move diagrams, all Talent-specific --- */
.tv-seasons .tvs-ring { position: absolute; inset: 22%; border-radius: 50%; border: 1px dashed rgba(245,242,235,.16); }
.tv-seasons .tvs-node {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  display: grid; place-items: center; color: var(--gray); font-size: var(--t-caption); letter-spacing: .16em;
  border: 1px solid rgba(245,242,235,.16); background: rgba(8,8,9,.9);
  transform: rotate(var(--a)) translateY(-28%) rotate(calc(-1 * var(--a)));
  transition: border-color .5s ease, color .5s ease;
}
.tv-seasons.is-on .tvs-node { animation: tvsLit 4.4s ease-in-out infinite; }
.tv-seasons.is-on .tvs-node:nth-of-type(2) { animation-delay: 1.1s; }
.tv-seasons.is-on .tvs-node:nth-of-type(3) { animation-delay: 2.2s; }
.tv-seasons.is-on .tvs-node:nth-of-type(4) { animation-delay: 3.3s; }
@keyframes tvsLit { 0%,6% { border-color: rgba(245,242,235,.16); color: var(--gray); } 14%,24% { border-color: var(--shu); color: var(--ink); } 40%,100% { border-color: rgba(245,242,235,.16); color: var(--gray); } }
.tv-seasons .tvs-cap { position: absolute; left: 0; right: 0; top: 50%; margin-top: -10px; text-align: center; color: var(--gray); font-size: var(--t-caption); letter-spacing: .22em; }

.tv-vocab { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 16%; }
.tv-vocab i {
  display: block; font-style: normal; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(245,242,235,.14);
  color: var(--gray); font-size: var(--t-caption); letter-spacing: .04em; background: rgba(245,242,235,.02);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .7s ease, border-color .6s ease, color .6s ease;
  transition-delay: calc(var(--i) * .09s);
}
.tv-vocab.is-on i:not(.tvv-one) { transform: translateY(calc(var(--d) * 1px)) scale(.94); opacity: .18; }
.tv-vocab .tvv-one { border-color: rgba(195,21,55,.55); color: var(--ink); background: rgba(195,21,55,.06); }
.tv-vocab.is-on .tvv-one { transform: scale(1.03); }

.tv-shapes .tvsh-unit {
  position: absolute; left: 50%; top: 50%; border-radius: 8px; border: 1px solid rgba(245,242,235,.3);
  background: rgba(245,242,235,.05); transform: translate(-50%,-50%);
}
.tv-shapes.is-on .tvsh-unit { animation: tvshMorph 5.2s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes tvshMorph {
  0%,14% { width: 46%; height: 62%; border-color: rgba(245,242,235,.3); }
  22%,36% { width: 54%; height: 30%; border-color: var(--shu); }
  44%,58% { width: 26%; height: 58%; border-color: rgba(245,242,235,.3); }
  66%,80% { width: 40%; height: 18%; border-color: var(--shu); }
  90%,100% { width: 46%; height: 62%; border-color: rgba(245,242,235,.3); }
}
.tv-shapes .tvsh-cap { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; color: var(--gray); font-size: var(--t-caption); letter-spacing: .22em; }

.tv-spec .tvsp-frame { position: absolute; inset: 24% 22%; border: 1px solid rgba(245,242,235,.22); border-radius: 6px; }
.tv-spec .tvsp-line { position: absolute; background: var(--shu); transform-origin: 0 50%; transform: scaleX(0); transition: transform .8s cubic-bezier(.3,.8,.3,1); }
.tv-spec.is-on .tvsp-line { transform: scaleX(1); }
.tv-spec .tvsp-line:nth-of-type(2) { transition-delay: .18s; }
.tv-spec .tvsp-line:nth-of-type(3) { transition-delay: .36s; }
.tv-spec .tvsp-line--a { left: 22%; right: 22%; top: 16%; height: 1px; }
.tv-spec .tvsp-line--b { left: 22%; right: 52%; top: 84%; height: 1px; }
.tv-spec .tvsp-line--c { left: 14%; top: 24%; bottom: 24%; width: 1px; transform-origin: 50% 0; transform: scaleY(0); }
.tv-spec.is-on .tvsp-line--c { transform: scaleY(1); }
.tv-spec .tvsp-tag { position: absolute; color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .16em; }
.tv-spec .tvsp-tag--a { top: 8%; left: 22%; }
.tv-spec .tvsp-tag--b { bottom: 8%; left: 22%; }
.tv-spec .tvsp-cap { position: absolute; left: 0; right: 0; bottom: 46%; text-align: center; color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em; }

/* ============================================================
   PNC LENDING — the short versions
   Deliberately quieter than the two Amazon cases. This story is
   one anxious person and a federal form, not scale or speed, so
   the scenes trade big numerals for negative space and a single
   held moment.
   ============================================================ */

/* --- 01 · the wall of questions, and the few that were yours --- */
.track-wall { height: 260vh; }
.track-wall .lt-stage { justify-content: flex-start; padding-top: clamp(80px, 11vh, 124px); }
.wall-field {
  position: absolute; inset: auto 0 0; z-index: 1; height: 62%;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 14px;
  padding: 0 8vw; align-content: start;
  -webkit-mask: linear-gradient(180deg, #000 68%, transparent 98%);
  mask: linear-gradient(180deg, #000 68%, transparent 98%);
}
.wall-q {
  --dim: clamp(.06, calc(1 - (var(--p) - .46) * 4), 1);
  opacity: var(--dim);
  transition: opacity .2s linear;
}
.wall-q span { display: block; height: 5px; width: 62%; border-radius: 3px; background: rgba(245,242,235,.26); }
.wall-q i { display: block; margin-top: 7px; height: 21px; border-radius: 5px; border: 1px solid rgba(245,242,235,.13); background: rgba(245,242,235,.02); }
.wall-q--keep { opacity: 1; }
.wall-q--keep span { background: rgba(245,242,235,.62); }
.wall-q--keep i { border-color: rgba(245,242,235,.28); transition: border-color .6s ease, background .6s ease; }
.track-wall[data-late="1"] .wall-q--keep i { border-color: rgba(195,21,55,.5); background: rgba(195,21,55,.05); }
.wall-count {
  position: absolute; right: 8vw; top: 22%; z-index: 4; text-align: right;
  opacity: clamp(0, calc((var(--p) - .58) * 7), 1);
}
.wall-count b { display: block; font-family: var(--display); font-weight: 500; letter-spacing: -.04em; font-size: clamp(34px, 4.6vw, 68px); line-height: .92; color: var(--shu-text); }
.wall-count span { display: block; margin-top: 11px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .18em; }

/* --- 02 · the held moment: one field, one doubt --- */
.track-doubt { height: 200vh; }
.track-doubt .lt-stage { justify-content: center; align-items: center; text-align: center; }
.doubt-ask {
  font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400;
  color: var(--ink); font-size: clamp(26px, 4.4vw, 62px); line-height: 1.16; letter-spacing: -.012em;
  max-width: 18ch; margin-inline: auto;
  opacity: clamp(0, calc((var(--p) - .3) * 5), 1);
  transform: translateY(calc(18px - clamp(0px, calc((var(--p) - .3) * 90px), 18px)));
}
.doubt-field {
  position: relative; width: min(420px, 74vw); margin: clamp(40px, 7vh, 92px) auto 0;
  opacity: clamp(.35, calc(.35 + var(--p) * 2), 1);
}
.doubt-field span { display: block; color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em; text-align: left; }
.doubt-field .df-box {
  position: relative; margin-top: 13px; height: 52px; border-radius: 8px;
  border: 1px solid rgba(245,242,235,.2); background: rgba(245,242,235,.02);
}
.doubt-field .df-caret { position: absolute; left: 17px; top: 50%; width: 1.5px; height: 20px; margin-top: -10px; background: var(--shu); animation: dfBlink 1.15s steps(1) infinite; }
@keyframes dfBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.doubt-note {
  margin: clamp(38px, 6vh, 76px) auto 0; color: var(--gray); font-size: var(--t-small);
  line-height: 1.78; max-width: 46ch;
  opacity: clamp(0, calc((var(--p) - .62) * 5), 1);
}

/* --- 03 · what could not be deleted --- */
.track-ground { height: 215vh; }
.track-ground .lt-stage { justify-content: center; }
.ground-stack { position: relative; z-index: 2; margin: clamp(30px, 5vh, 56px) auto 0; padding: 0 8vw; max-width: 1280px; width: 100%; }
.ground-surface { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.ground-surface i {
  display: block; font-style: normal; padding: 9px 14px; border-radius: 999px; font-size: var(--t-caption);
  border: 1px solid rgba(245,242,235,.14); color: var(--gray); background: rgba(245,242,235,.02);
  transform: translateY(calc(var(--r) * 1px));
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
  transition-delay: calc(var(--i) * .05s);
}
.track-ground[data-late="1"] .ground-surface i { transform: none; }
.ground-slab {
  position: relative; border-radius: 10px; padding: 17px 20px; margin-top: 8px;
  border: 1px solid rgba(245,242,235,.13); background: rgba(245,242,235,.028);
  color: var(--gray); font-size: var(--t-caption); letter-spacing: .22em;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.ground-slab b { color: rgba(245,242,235,.72); font-weight: 400; letter-spacing: .1em; font-size: var(--t-caption); }
.ground-slab--core { border-color: rgba(195,21,55,.4); background: rgba(195,21,55,.06); color: var(--shu-text); }
.ground-cap { margin-top: 24px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .04em; }

/* --- 04 · one decision at a time, on the device it happened on --- */
.track-pace { height: 300vh; }
.track-pace .lt-stage { justify-content: center; }
.pace-stage { display: grid; grid-template-columns: 1fr auto; gap: clamp(30px, 5vw, 84px); align-items: center; padding: 0 8vw; max-width: 1280px; margin-inline: auto; width: 100%; }
.pace-phone {
  position: relative; width: clamp(220px, 24vw, 300px); aspect-ratio: 9 / 19;
  border-radius: 32px; border: 1px solid rgba(245,242,235,.16); background: #0C0C0E; overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,.6);
}
.pace-phone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .5s ease; }
.pace-phone img.is-on { opacity: 1; }
/* The five steps crossfade in one place, so they have to share a box — but
   they used to do it with `position:absolute; inset:0` against .pace-steps
   itself, whose first in-flow child is the "WHAT IT LOOKS LIKE NOW" kicker.
   Every card was therefore pinned to the top of the container and printed
   straight over that heading. A three-row grid gives the stack its own row:
   the cards all occupy row 2 / column 1, so they still overlap each other and
   still size the row to the tallest of them, while the kicker above and the
   dots below stay in ordinary flow. No absolute positioning, no magic
   offset to keep in sync with the heading's height. */
.pace-steps {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(11em, auto) auto;
  align-content: start;
}
.pace-steps > .kicker { grid-row: 1; }
.pace-steps > .pace-dots { grid-row: 3; }
.pace-steps article {
  grid-row: 2; grid-column: 1; align-self: start;
  opacity: 0; transform: translateY(14px);
  transition: opacity .48s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.pace-steps article.is-on { opacity: 1; transform: none; }
.pace-steps em { font-style: normal; color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .2em; }
.pace-steps h3 { margin-top: 13px; font-family: var(--display); font-weight: 500; letter-spacing: -.032em; font-size: var(--t-h3); line-height: 1.1; max-width: 18ch; }
.pace-steps p { margin-top: 13px; color: var(--gray); font-size: var(--t-small); line-height: 1.76; max-width: 44ch; }
.pace-dots { display: flex; gap: 7px; margin-top: 28px; }
.pace-dots i { width: 24px; height: 3px; border-radius: 3px; background: rgba(245,242,235,.14); transition: background .4s ease; }
.pace-dots i.is-on { background: var(--shu); }

/* --- 05 · before and after, wiped by the scroll rather than dragged --- */
.track-wipe { height: 225vh; }
.track-wipe .lt-stage { justify-content: center; }
.wipe-frame {
  position: relative; margin: clamp(26px, 4vh, 50px) auto 0; width: min(1000px, 84vw);
  border-radius: 14px; overflow: hidden; border: 1px solid rgba(245,242,235,.12); background: #101012;
}
.wipe-frame img { display: block; width: 100%; }
.wipe-frame .wipe-after {
  position: absolute; inset: 0; overflow: hidden;
  width: clamp(0%, calc((var(--p) - .18) * 172%), 100%);
}
.wipe-frame .wipe-after img { position: absolute; left: 0; top: 0; width: min(1000px, 84vw); max-width: none; }
.wipe-frame .wipe-edge {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--shu);
  left: clamp(0%, calc((var(--p) - .18) * 172%), 100%);
  opacity: clamp(0, calc((var(--p) - .18) * 8), 1);
}
.wipe-tags { display: flex; justify-content: space-between; width: min(1000px, 84vw); margin: 16px auto 0; color: var(--gray); font-size: var(--t-caption); letter-spacing: .22em; }
.wipe-tags b { color: var(--shu-text); font-weight: 400; }

/* --- 06 · it is live, and someone is in it right now --- */
.story-live { padding: clamp(96px, 15vh, 180px) 8vw clamp(56px, 8vh, 100px); max-width: 1280px; margin-inline: auto; }
.story-live-mark { display: inline-flex; align-items: center; gap: 12px; color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .24em; }
.story-live-mark i { width: 9px; height: 9px; border-radius: 50%; background: var(--shu); box-shadow: 0 0 0 5px rgba(195,21,55,.13); animation: liveBeat 2.4s ease-in-out infinite; }
@keyframes liveBeat { 0%,100% { box-shadow: 0 0 0 5px rgba(195,21,55,.13); } 50% { box-shadow: 0 0 0 11px rgba(195,21,55,.04); } }
.story-live h2 { margin-top: 26px; font-family: var(--display); font-weight: 500; letter-spacing: -.036em; font-size: clamp(30px, 4.4vw, 62px); line-height: 1.06; max-width: 20ch; text-wrap: balance; }
.story-live p { margin-top: 24px; color: rgba(245,242,235,.82); font-size: var(--t-body); line-height: 1.72; max-width: 52ch; }
.story-live-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px); margin-top: clamp(46px, 7vh, 84px); }
.story-live-proof > div { position: relative; padding-top: 22px; }
.story-live-proof > div::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: rgba(245,242,235,.28);
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.3,.8,.3,1);
}
.story-live-proof.is-active > div::before { transform: scaleX(1); }
.story-live-proof.is-active > div:nth-child(2)::before { transition-delay: .12s; }
.story-live-proof.is-active > div:nth-child(3)::before { transition-delay: .24s; }
.story-live-proof.is-active > div:nth-child(4)::before { transition-delay: .36s; }
.story-live-proof b { display: block; font-family: var(--display); font-weight: 500; letter-spacing: -.035em; font-size: var(--t-h3); line-height: .96; white-space: nowrap; }
.story-live-proof span { display: block; margin-top: 13px; color: var(--gray); font-size: var(--t-caption); line-height: 1.6; max-width: 22ch; }

/* --- overview · four move diagrams, all PNC-specific --- */
.pv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14% 12%; align-content: center; }
.pv-split > div > span { display: block; color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em; margin-bottom: 12px; }
.pv-split i {
  display: block; font-style: normal; padding: 8px 11px; margin-bottom: 7px; border-radius: 6px; font-size: var(--t-caption);
  border: 1px solid rgba(245,242,235,.14); color: var(--gray); background: rgba(245,242,235,.02);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i) * .09s);
}
.pv-split .pvs-keep span { color: var(--shu-text); }
.pv-split.is-on .pvs-keep i { border-color: rgba(195,21,55,.45); color: var(--ink); }
.pv-split.is-on .pvs-drop i { opacity: .12; transform: translateY(16px) scale(.94); }

.pv-branch .pvb-node { position: absolute; left: 50%; top: 16%; width: 58px; height: 26px; margin-left: -29px; border-radius: 6px; border: 1px solid rgba(245,242,235,.28); display: grid; place-items: center; color: var(--gray); font-size: var(--t-caption); letter-spacing: .14em; }
.pv-branch svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pv-branch .pvb-path { fill: none; stroke: rgba(245,242,235,.18); stroke-width: 1.4; stroke-linecap: round; }
.pv-branch .pvb-path--on { stroke: var(--shu); stroke-dasharray: 1; stroke-dashoffset: 1; }
.pv-branch.is-on .pvb-path--on { animation: pvbDraw 3.4s ease-in-out infinite; }
@keyframes pvbDraw { 0%,8% { stroke-dashoffset: 1; } 40%,74% { stroke-dashoffset: 0; } 96%,100% { stroke-dashoffset: 1; } }
.pv-branch .pvb-leaf { position: absolute; bottom: 16%; width: 66px; height: 26px; margin-left: -33px; border-radius: 6px; border: 1px solid rgba(245,242,235,.14); display: grid; place-items: center; color: var(--gray); font-size: var(--t-caption); letter-spacing: .12em; transition: border-color .5s ease, color .5s ease; }
.pv-branch .pvb-leaf--a { left: 22%; }
.pv-branch .pvb-leaf--b { left: 50%; }
.pv-branch .pvb-leaf--c { left: 78%; }
.pv-branch.is-on .pvb-leaf--b { border-color: rgba(195,21,55,.55); color: var(--ink); }

.pv-fidelity { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; align-items: center; padding: 0 12%; }
.pv-fidelity > div { border-radius: 7px; border: 1px solid rgba(245,242,235,.14); padding: 10px 8px; min-height: 92px; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.pv-fidelity i { display: block; height: 4px; border-radius: 3px; background: rgba(245,242,235,.16); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.3,.8,.3,1), background .5s ease; }
.pv-fidelity.is-on i { transform: scaleX(1); }
.pv-fidelity > div:nth-child(2) i { transition-delay: .16s; }
.pv-fidelity > div:nth-child(3) i { transition-delay: .32s; }
.pv-fidelity > div:nth-child(4) i { transition-delay: .48s; }
.pv-fidelity.is-on > div:nth-child(4) i { background: var(--shu); }
.pv-fidelity > div > b { display: block; margin-top: 6px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .16em; font-weight: 400; }
.pv-fidelity.is-on > div:nth-child(4) > b { color: var(--shu-text); }

.pv-cadence { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 0 14%; }
.pv-cadence .pvc-line { display: flex; gap: 4px; align-items: flex-end; height: 46px; }
.pv-cadence .pvc-line i { flex: 1; border-radius: 2px; background: rgba(245,242,235,.2); height: 40%; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .5s cubic-bezier(.3,.8,.3,1), background .4s ease; transition-delay: calc(var(--i) * .05s); }
.pv-cadence.is-on .pvc-line i { transform: scaleY(1); }
.pv-cadence .pvc-line i.test { background: var(--shu); height: 100%; }
.pv-cadence .pvc-key { display: flex; justify-content: space-between; color: var(--gray); font-size: var(--t-caption); letter-spacing: .16em; }
.pv-cadence .pvc-key b { color: var(--shu-text); font-weight: 400; }

/* ============================================================
   TALENT + PNC SHORT VIEWS — responsive and reduced motion
   Same contract as Finance: below 900px and under reduced
   motion every stage becomes an ordinary stacked section and
   every progress-driven reveal resolves to its finished state.
   ============================================================ */
@media (max-width: 900px) {
  .track-race, .track-systems, .track-bloom, .track-relay, .track-gap,
  .track-wall, .track-doubt, .track-ground, .track-pace, .track-wipe { height: auto !important; }

  .race-lanes { margin-top: 28px; }
  .race-track { height: 34px; }
  .race-verdict { position: static; margin-top: 18px; opacity: 1 !important; font-size: var(--t-h2); }
  .race-lane--parcel .race-dot { left: 100%; }
  .race-lane--person .race-dot { left: 100%; }
  .race-gate::after { opacity: 1; }

  .sys-field { position: relative; inset: auto; height: 40vh; min-height: 240px; margin-top: 28px; }
  .sys-field .sf-tile--on { opacity: 1; }
  .sys-field .sf-route { stroke-dashoffset: 0; }
  .sys-tally { position: relative; right: auto; top: auto; text-align: left; padding: 28px 8vw 0; opacity: 1; }

  .bloom-field { -webkit-mask: none; mask: none; opacity: .5; }
  .bloom-tally, .bloom-sites { opacity: 1; }
  .bloom-sites { position: relative; bottom: auto; margin-top: 30px; padding: 0 8vw; }

  .relay-rack { grid-template-columns: repeat(2, 1fr); }
  .relay-rack figure { opacity: 1; transform: none; filter: none; }
  .relay-rail { display: none; }

  .gap-row { grid-template-columns: 1fr auto; }
  .gap-bar { grid-column: 1 / -1; order: 3; margin-top: 12px; }
  .gap-bar i { transform: scaleX(var(--w)); }
  .gap-quote { opacity: 1; padding: 0; margin-top: 32px; }

  .wall-field { position: relative; inset: auto; height: auto; grid-template-columns: repeat(2, 1fr); margin-top: 28px; -webkit-mask: none; mask: none; }
  .wall-q { opacity: .2; }
  .wall-q--keep { opacity: 1; }
  .wall-count { position: relative; right: auto; top: auto; text-align: left; padding: 28px 8vw 0; opacity: 1; }

  .doubt-ask, .doubt-note, .doubt-field { opacity: 1 !important; transform: none !important; }
  .ground-surface i { transform: none; }
  .story-live-proof { grid-template-columns: repeat(2, 1fr); }

  .pace-stage { grid-template-columns: 1fr; gap: 30px; }
  .pace-phone { width: min(240px, 62vw); margin-inline: auto; order: -1; }
  /* the crossfade becomes an ordinary stacked list, so the shared grid row
     that makes the cards overlap has to be released as well */
  .pace-steps { min-height: 0; display: block; }
  .pace-steps article { position: static; grid-row: auto; opacity: 1; transform: none; padding: 26px 0; border-top: 1px solid var(--hairline); }
  .pace-steps article:first-child { border-top: 0; }
  .pace-dots { display: none; }

  .wipe-frame .wipe-after { width: 50%; }
  .wipe-frame .wipe-edge { left: 50%; opacity: 1; }

  .moves-viz .tv-seasons, .moves-viz .tv-vocab, .moves-viz .tv-shapes, .moves-viz .tv-spec,
  .moves-viz .pv-split, .moves-viz .pv-branch, .moves-viz .pv-fidelity, .moves-viz .pv-cadence { display: none; }
}
@media (max-width: 620px) {
  .race-lanes, .sys-tally, .bloom-sites, .gap-bars, .wall-count, .pace-stage, .story-live { padding-inline: 6vw; }
  .wall-field { grid-template-columns: 1fr; padding-inline: 6vw; }
  .relay-rack { grid-template-columns: 1fr; padding-inline: 6vw; }
  .story-live-proof { grid-template-columns: 1fr; }
  .ground-stack { padding-inline: 6vw; }
}
@media (prefers-reduced-motion: reduce) {
  .track-race, .track-systems, .track-bloom, .track-relay, .track-gap,
  .track-wall, .track-doubt, .track-ground, .track-pace, .track-wipe { height: auto !important; }
  .race-dot { left: 100% !important; }
  .race-verdict { position: static; opacity: 1 !important; margin-top: 18px; }
  .race-gate::after { opacity: 1 !important; }
  .sys-field .sf-tile--on { opacity: 1 !important; }
  .sys-field .sf-route { stroke-dashoffset: 0 !important; }
  .sys-tally, .bloom-tally, .bloom-sites, .gap-quote, .wall-count { opacity: 1 !important; }
  .bloom-field { -webkit-mask: none !important; mask: none !important; }
  .relay-rack figure { opacity: 1 !important; transform: none !important; filter: none !important; }
  .relay-rail i { left: 100% !important; }
  .relay-rail::after { width: 100% !important; }
  .gap-bar i { transform: scaleX(var(--w)) !important; transition: none !important; }
  .wall-q { opacity: .16 !important; }
  .wall-q--keep { opacity: 1 !important; }
  .doubt-ask, .doubt-note, .doubt-field { opacity: 1 !important; transform: none !important; }
  .doubt-field .df-caret { animation: none !important; }
  .ground-surface i { transform: none !important; transition: none !important; }
  .pace-steps article, .pace-phone img, .mv { position: static; opacity: 1 !important; transform: none !important; }
  .pace-phone img { position: absolute; }
  .pace-phone img:not(:first-of-type) { opacity: 0 !important; }
  .pace-steps { min-height: 0; display: block; }
  .pace-steps article { grid-row: auto; padding: 26px 0; border-top: 1px solid var(--hairline); }
  .wipe-frame .wipe-after { width: 50% !important; }
  .wipe-frame .wipe-edge { left: 50% !important; opacity: 1 !important; }
  .story-live-mark i { animation: none !important; }
  .story-live-proof > div::before { transform: scaleX(1) !important; transition: none !important; }
  .tv-seasons .tvs-node, .tv-shapes .tvsh-unit, .pv-branch .pvb-path--on { animation: none !important; }
  .tv-vocab i, .tv-spec .tvsp-line, .pv-split i, .pv-fidelity i, .pv-cadence .pvc-line i { transition: none !important; }
  .tv-spec .tvsp-line { transform: scaleX(1) !important; }
  .tv-spec .tvsp-line--c { transform: scaleY(1) !important; }
  .pv-fidelity i { transform: scaleX(1) !important; }
  .pv-cadence .pvc-line i { transform: scaleY(1) !important; }
}

/* Talent ships four products rather than three. Both counts now stack, so the
   --four modifier no longer needs to re-cut the grid; it only holds back the
   heading a touch because Talent's product names run longer. */
.ov-products--four h3 { font-size: var(--t-lede); }

/* PNC's "one journey, two widths" row uses stills rather than clips. */
.ovp-media img { filter: saturate(.92); display: block; }

/* --- full-page captures (PNC) ---
   PNC's stills are not viewport crops, they are whole scrolling pages: 1440x1329,
   1440x1629, and a 375x1725 phone. Contained whole in a row-height box they came
   out at a third scale surrounded by dead plate, and the phone came out a 100px
   sliver. A full-page capture carries its meaning at the top — the bottom of
   every one of these is footer and legal boilerplate — so they are anchored to
   the top and allowed to run off the bottom of the frame instead of shrinking. */
.ov-products--pageshots .ovp-media img {
  height: 100%; min-height: clamp(300px, 30vw, 430px); max-height: clamp(300px, 30vw, 430px);
  object-fit: cover; object-position: center top;
}
/* The phone is shown as a phone: held to a phone's width on the plate rather
   than stretched across a column built for a desktop screen. Its own width, not
   the column's, is what makes the interface legible. */
.ovp-media--phone { padding: 0 clamp(12px, 2vw, 28px); }
.ov-products--pageshots .ovp-media--phone img {
  width: min(298px, 100%); margin: 0 auto; border-radius: 10px;
}
/* and its column gives back the width it does not need, rather than framing the
   phone in dead plate. The copy takes the difference. */
.ov-products article:has(.ovp-media--phone) { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr); }
.ov-products article:nth-child(even):has(.ovp-media--phone) { grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); }

/* ============================================================
   KELLTON ANCHOR — the short versions
   The other three cases are about operations. This one is about
   an AI product, so its scenes are built on authority, cost and
   restraint: what the model was allowed to do, and what it cost
   to let it. Stays behind the passphrase gate.
   ============================================================ */

/* --- 01 · the countdown, and the anticlimax at the end of it --- */
.track-clock { height: 265vh; }
.track-clock .lt-stage { justify-content: center; }
.clock-stage { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: clamp(30px, 5vw, 80px); align-items: center; padding: 0 8vw; max-width: 1280px; margin-inline: auto; width: 100%; }
.clock-face { position: relative; text-align: right; }
.clock-face b {
  display: none; font-family: var(--display); font-weight: 500; letter-spacing: -.05em; line-height: .88;
  font-size: clamp(44px, 7.6vw, 122px); font-variant-numeric: tabular-nums;
}
.clock-face b.is-on { display: block; }
.clock-face b.is-zero { color: var(--shu-text); }
.clock-face span { display: block; margin-top: 16px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .26em; }
.clock-doc {
  position: relative; margin-top: clamp(24px, 4vh, 44px); border-radius: 8px;
  border: 1px solid rgba(245,242,235,.16); background: rgba(245,242,235,.02);
  min-height: clamp(150px, 24vh, 230px); overflow: hidden;
}
.clock-doc i {
  position: absolute; font-style: normal; padding: 6px 11px; border-radius: 5px; font-size: var(--t-caption);
  border: 1px solid rgba(245,242,235,.16); background: rgba(20,20,22,.94); color: var(--gray);
  left: var(--x); top: var(--y); transform: rotate(var(--r)) translateY(calc(34px - clamp(0px, calc((var(--p) - var(--o)) * 340px), 34px)));
  opacity: clamp(0, calc((var(--p) - var(--o)) * 11), 1);
}
/* v0.123 — the verdict was the one block in this scene without the
   scene's own container, so its rule and its text ran to the viewport
   edge while the heading above sat at 8vw. Same box as .lt-head and
   .clock-stage now; the rule is a pseudo-element so it starts and stops
   with the text rather than with the padding. */
.clock-verdict {
  position: relative; z-index: 2;
  width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 8vw;
  margin-top: clamp(22px, 3.5vh, 40px);
  opacity: clamp(0, calc((var(--p) - .8) * 9), 1);
}
.clock-verdict::before {
  content: ""; display: block; height: 1px; margin-bottom: 20px;
  background: rgba(195,21,55,.35);
}
.clock-verdict b { display: block; color: var(--shu-text); font-family: var(--display); font-weight: 500; font-size: var(--t-h4); letter-spacing: -.022em; }
.clock-verdict span { display: block; margin-top: 11px; color: var(--gray); font-size: var(--t-caption); line-height: 1.65; max-width: 52ch; }

/* --- 02 · a chronic complaint becomes four numbers --- */
.track-count { height: 235vh; }
.track-count .lt-stage { justify-content: center; }
.count-stage { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: clamp(30px, 5vw, 74px); align-items: center; padding: 0 8vw; max-width: 1280px; margin-inline: auto; width: 100%; margin-top: clamp(26px, 4vh, 48px); }
.count-stack { position: relative; width: clamp(120px, 15vw, 190px); height: clamp(150px, 22vh, 220px); }
.count-stack i {
  position: absolute; left: 0; right: 0; height: 12px; border-radius: 3px;
  border: 1px solid rgba(245,242,235,.14); background: rgba(245,242,235,.03);
  top: calc(var(--i) * 13px);
  transform: translateX(calc((1 - clamp(0, calc(var(--p) * 2.4), 1)) * var(--dx) * 1px)) scaleY(clamp(.4, calc(1 - var(--p) * .7), 1));
  opacity: clamp(.18, calc(1 - var(--p) * 1.1), 1);
}
.count-stack span { position: absolute; left: 0; bottom: -30px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em; }
.count-nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); }
.count-nums > div { border-top: 1px solid rgba(245,242,235,.14); padding-top: 18px; opacity: clamp(0, calc((var(--p) - var(--o)) * 9), 1); }
.count-nums b { display: block; font-family: var(--display); font-weight: 500; letter-spacing: -.04em; font-size: var(--t-h2); line-height: .94; white-space: nowrap; }
.count-nums b.hot { color: var(--shu-text); }
.count-nums span { display: block; margin-top: 11px; color: var(--gray); font-size: var(--t-caption); line-height: 1.55; max-width: 26ch; }

/* --- 03 · the autonomy line: consequence up, authority down --- */
.track-autonomy { height: 300vh; }
.track-autonomy .lt-stage { justify-content: center; }
.auto-stage { position: relative; z-index: 2; padding: 0 8vw; max-width: 1280px; margin-inline: auto; width: 100%; margin-top: clamp(24px, 4vh, 46px); }
.auto-axes { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 18px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em; }
.auto-axes b { color: var(--shu-text); font-weight: 400; }
.auto-tier {
  display: grid; grid-template-columns: 92px 1fr minmax(160px, .8fr); gap: clamp(14px, 2.4vw, 34px);
  align-items: center; padding: clamp(15px, 2.4vh, 26px) 0; border-top: 1px solid var(--hairline);
  opacity: clamp(.22, calc(.22 + (var(--p) - var(--o)) * 8), 1);
}
.auto-tier:last-of-type { border-bottom: 1px solid var(--hairline); }
.auto-tier > b { font-family: var(--display); font-weight: 500; letter-spacing: -.04em; font-size: var(--t-h3); line-height: .92; }
.auto-tier .at-bar { position: relative; height: 10px; border-radius: 6px; background: rgba(245,242,235,.06); overflow: hidden; }
.auto-tier .at-bar i { position: absolute; inset: 0; border-radius: 6px; transform-origin: 0 50%; transform: scaleX(clamp(0, calc((var(--p) - var(--o)) * 3), var(--w))); background: rgba(245,242,235,.42); }
.auto-tier .at-what { color: var(--gray); font-size: var(--t-caption); line-height: 1.55; }
.auto-tier .at-what em { display: block; font-style: normal; color: var(--ink); font-size: var(--t-caption); letter-spacing: .2em; margin-bottom: 7px; }
.auto-tier--act > b { color: var(--ink); }
.auto-tier--act .at-bar i { background: rgba(245,242,235,.55); }
.auto-tier--draft .at-bar i { background: rgba(245,242,235,.3); }
.auto-tier--never > b { color: var(--shu-text); }
.auto-tier--never .at-bar i { background: var(--shu); }
.auto-tier--never .at-what em { color: var(--shu-text); }
.auto-rule { margin-top: clamp(26px, 4vh, 46px); color: rgba(245,242,235,.84); font-size: var(--t-body); line-height: 1.72; max-width: 58ch; opacity: clamp(0, calc((var(--p) - .74) * 7), 1); }
.auto-rule b { color: var(--ink); font-weight: 500; }

/* --- 04 · the most popular thing we built, deleted --- */
.track-kill { height: 250vh; }
.track-kill .lt-stage { justify-content: center; }
/* This scene is pinned to one viewport and now holds a real 16:10 screen,
   whose height is its width times 900/1440. So the screen column is sized
   against the height left over after the heading, the nav pill and the
   depth dock have taken theirs, rather than against the width available.
   Sizing it by width is what pushed the kicker off the top of the stage
   and slid the last line under the dock. */
.kill-stage {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0, 210px) auto minmax(0, calc((100vh - 545px) * 1.55));
  grid-template-columns: minmax(0, 210px) auto minmax(0, calc((100svh - 545px) * 1.55));
  justify-content: center; gap: clamp(16px, 2.4vw, 38px); align-items: center;
  padding: 0 8vw; max-width: 1280px; margin-inline: auto; width: 100%;
  margin-top: clamp(16px, 2.2vh, 28px);
}
/* two lines rather than three, which is the cheapest 60px in the scene */
.track-kill .lt-h { max-width: 30ch; }
.kill-chat { display: flex; flex-direction: column; gap: 9px; opacity: clamp(.12, calc(1 - (var(--p) - .34) * 3), 1); transform: scale(clamp(.9, calc(1 - (var(--p) - .34) * .3), 1)); transform-origin: 50% 50%; }
.kill-chat i {
  display: block; font-style: normal; padding: 10px 13px; border-radius: 12px; font-size: var(--t-caption);
  border: 1px solid rgba(245,242,235,.14); color: var(--gray); background: rgba(245,242,235,.025);
  max-width: 84%;
}
.kill-chat i:nth-child(even) { align-self: flex-end; border-radius: 12px 12px 4px 12px; }
.kill-chat > span { margin-top: 6px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em; }
.kill-arrow { position: relative; width: clamp(40px, 6vw, 84px); height: 6px; }
.kill-arrow::before {
  content: ""; position: absolute; inset: 0; background: var(--shu-deep);
  -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat;
  transform: scaleX(clamp(0, calc((var(--p) - .3) * 4), 1)); transform-origin: 0 50%;
}
/* v0.123 — the right-hand side used to be an abstract rectangle with three
   invented chips on it, which asked the reader to take the claim on trust.
   It is the real workspace now, with the three things that carry the
   argument named underneath it. Claiming you moved the intelligence out of
   the chat box only counts if the reader can see where it went. */
.kill-real {
  margin: 0; opacity: clamp(0, calc((var(--p) - .26) * 4), 1);
  border-radius: 14px; border: 1px solid rgba(245,242,235,.09); background: #0C0C0E;
  padding-bottom: clamp(11px, 1.6vh, 16px);
  /* The scene is pinned to one viewport, and the frame's height is its
     width times 900/1440. Capping the width against viewport height is
     what keeps the screen plus its three notes inside the stage on a
     laptop as well as on a large monitor. */
  /* same reason as .ss-cell: a grid item's automatic minimum is its
     min-content, and the min-content in here is a 1440px iframe. The
     desktop track says minmax(0,...) so it was safe there and blew out
     the moment the mobile query handed it a plain 1fr. */
  max-width: 100%; min-width: 0; overflow: hidden;
}
.kill-real { padding: 9px 9px 0; }
.kill-real .anc-shot { width: 100%; margin: 0; border-radius: 5px; clip-path: inset(0 round 5px); }
.kill-real figcaption { padding: 0 5px; margin-top: clamp(10px, 1.4vh, 15px); }
.kill-real .kr-tag { display: block; color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .2em; }
.kill-real .kr-points {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px);
}
.kill-real .kr-points li { padding-top: 8px; border-top: 1px solid var(--hairline); }
.kill-real .kr-points b { display: block; color: var(--ink); font-family: var(--display); font-weight: 500; font-size: var(--t-caption); line-height: 1.22; letter-spacing: -.012em; }
.kill-real .kr-points span { display: block; margin-top: 4px; color: var(--gray); font-size: var(--t-caption); line-height: 1.45; }

/* --- 05 · the invoice attached to the architecture --- */
.track-econ { height: 250vh; }
.track-econ .lt-stage { justify-content: center; }
.econ-pair { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 70px); padding: 0 8vw; max-width: 1280px; margin-inline: auto; width: 100%; margin-top: clamp(28px, 4.5vh, 54px); }
.econ-cell { border-top: 1px solid rgba(245,242,235,.16); padding-top: 22px; }
.econ-cell > span { display: block; color: var(--gray); font-size: var(--t-caption); letter-spacing: .22em; }
.econ-swap { display: flex; align-items: baseline; gap: clamp(12px, 2vw, 26px); margin-top: 18px; }
.econ-swap b { font-family: var(--display); font-weight: 500; letter-spacing: -.045em; font-size: clamp(30px, 4.2vw, 66px); line-height: .9; white-space: nowrap; }
.econ-swap .econ-from { color: var(--gray); opacity: clamp(.2, calc(1 - (var(--p) - .34) * 2.4), 1); text-decoration: line-through; text-decoration-color: rgba(195,21,55,.6); }
.econ-swap .econ-to { color: var(--shu-text); opacity: clamp(0, calc((var(--p) - .38) * 6), 1); }
.econ-cell--reach .econ-swap .econ-to { color: var(--ink); }
.econ-cell p { margin-top: 18px; color: var(--gray); font-size: var(--t-caption); line-height: 1.7; max-width: 30ch; }
.econ-note { margin: clamp(28px, 4vh, 50px) 8vw 0; max-width: 1280px; margin-inline: auto; padding: 0 8vw; color: rgba(245,242,235,.84); font-size: var(--t-body); line-height: 1.72; opacity: clamp(0, calc((var(--p) - .68) * 7), 1); }
.econ-note b { color: var(--ink); font-weight: 500; }

/* --- overview · four move diagrams, all Anchor-specific --- */
.av-count { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 18%; }
.av-count .avc-pile { display: flex; flex-direction: column; gap: 3px; }
.av-count .avc-pile i { display: block; height: 5px; border-radius: 2px; background: rgba(245,242,235,.16); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .6s ease; transition-delay: calc(var(--i) * .05s); }
.av-count.is-on .avc-pile i { transform: scaleX(.24); opacity: .3; }
.av-count .avc-nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.av-count .avc-nums b { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t-body); letter-spacing: -.03em; color: var(--shu-text); opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.4s + var(--i) * .09s); }
.av-count.is-on .avc-nums b { opacity: 1; transform: none; }

.av-tiers { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 16%; }
.av-tiers > div { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; }
.av-tiers b { font-family: var(--display); font-weight: 500; font-size: var(--t-small); letter-spacing: -.03em; color: var(--gray); }
.av-tiers i { display: block; height: 8px; border-radius: 5px; background: rgba(245,242,235,.4); transform-origin: 0 50%; transform: scaleX(0); transition: transform .8s cubic-bezier(.3,.8,.3,1); }
.av-tiers.is-on i { transform: scaleX(var(--w)); }
.av-tiers > div:nth-child(2) i { transition-delay: .18s; }
.av-tiers > div:nth-child(3) i { transition-delay: .36s; }
.av-tiers > div:last-child b { color: var(--shu-text); }
.av-tiers > div:last-child i { background: var(--shu); }
.av-tiers > span { margin-top: 8px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em; text-align: center; }

.av-frame { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 0 12%; }
.av-frame .avf-chat i { display: block; height: 13px; border-radius: 7px; background: rgba(245,242,235,.12); margin-bottom: 6px; transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.av-frame .avf-chat i:nth-child(2) { width: 76%; margin-left: auto; }
.av-frame.is-on .avf-chat i { opacity: .1; transform: scale(.9); }
.av-frame .avf-arrow { width: 26px; height: 5px; background: var(--shu-deep); -webkit-mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat; mask: url("../media/brand/brush-line.png") center / 100% 100% no-repeat; transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.3,.8,.3,1) .2s; }
.av-frame.is-on .avf-arrow { transform: scaleX(1); }
.av-frame .avf-doc { position: relative; border: 1px solid rgba(245,242,235,.18); border-radius: 5px; padding: 12px 10px 24px; min-height: 96px; }
.av-frame .avf-doc i { display: block; height: 4px; border-radius: 2px; background: rgba(245,242,235,.18); margin-bottom: 6px; }
/* v0.123 — the page budget is the whole point of this move, so the
   diagram carries the real meter and the real reading rather than a
   generic chip. The screen it is drawn from is further down the page. */
.av-frame .avf-doc .avf-meter { display: block; height: 4px; border-radius: 2px; margin-top: 11px; background: rgba(245,242,235,.1); overflow: hidden; }
.av-frame .avf-doc .avf-meter em { display: block; height: 100%; background: var(--shu); transform: scaleX(.34); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.2,.8,.2,1) .35s; }
.av-frame.is-on .avf-doc .avf-meter em { transform: scaleX(.94); }
.av-frame .avf-doc b { position: absolute; right: 6px; bottom: 6px; font-size: var(--t-caption); letter-spacing: .12em; color: var(--shu-text); border: 1px solid rgba(195,21,55,.5); border-radius: 3px; padding: 3px 5px; opacity: 0; transition: opacity .6s ease .5s; font-weight: 400; }
.av-frame.is-on .avf-doc b { opacity: 1; }

.av-econ { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 0 18%; }
.av-econ > div > span { display: block; color: var(--gray); font-size: var(--t-caption); letter-spacing: .18em; margin-bottom: 10px; }
.av-econ .ave-bar { height: 9px; border-radius: 5px; background: rgba(245,242,235,.07); overflow: hidden; }
.av-econ .ave-bar i { display: block; height: 100%; border-radius: 5px; background: rgba(245,242,235,.34); transform-origin: 0 50%; transform: scaleX(1); transition: transform 1s cubic-bezier(.3,.8,.3,1); }
.av-econ.is-on .ave-cost .ave-bar i { transform: scaleX(.3); }
.av-econ.is-on .ave-reach .ave-bar i { transform: scaleX(1); background: var(--shu); }
.av-econ .ave-reach .ave-bar i { transform: scaleX(.2); }
.av-econ .ave-val { display: flex; justify-content: space-between; margin-top: 9px; font-family: var(--display); font-weight: 500; font-size: var(--t-caption); letter-spacing: -.02em; color: var(--gray); }
.av-econ.is-on .ave-val b { color: var(--shu-text); }

@media (max-width: 900px) {
  .track-clock, .track-count, .track-autonomy, .track-kill, .track-econ { height: auto !important; }
  .clock-stage, .count-stage { grid-template-columns: 1fr; gap: 30px; }
  .kill-stage { grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 30px; }
  .clock-face { text-align: left; }
  .clock-doc i { opacity: 1; transform: rotate(var(--r)); }
  .clock-verdict, .auto-rule, .econ-note { opacity: 1; }
  .count-stack { width: 100%; height: 130px; }
  .count-stack i { transform: none; opacity: 1; }
  .count-nums > div { opacity: 1; }
  .auto-tier { grid-template-columns: 78px 1fr; opacity: 1; }
  .auto-tier .at-what { grid-column: 1 / -1; }
  .auto-tier .at-bar i { transform: scaleX(var(--w)); }
  .kill-chat { opacity: .3; transform: none; }
  .kill-arrow { width: 100%; }
  .kill-arrow::before { transform: scaleX(1); }
  .kill-real { opacity: 1; max-width: none; }
  .kill-real .kr-points { grid-template-columns: 1fr; gap: 0; }
  .kill-real .kr-points li + li { margin-top: 9px; }
  .econ-pair { grid-template-columns: 1fr; }
  .econ-swap .econ-from { opacity: .35; }
  .econ-swap .econ-to { opacity: 1; }
  .econ-note { padding-inline: 0; margin-inline: 8vw; }
  .moves-viz .av-count, .moves-viz .av-tiers, .moves-viz .av-frame, .moves-viz .av-econ { display: none; }
}
@media (max-width: 620px) {
  .clock-stage, .count-stage, .auto-stage, .kill-stage, .econ-pair,
  .clock-verdict, .story-screens { padding-inline: 6vw; }
  .econ-note { margin-inline: 6vw; }
  .count-nums { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .track-clock, .track-count, .track-autonomy, .track-kill, .track-econ { height: auto !important; }
  .clock-doc i { opacity: 1 !important; transform: rotate(var(--r)) !important; }
  .clock-verdict, .auto-rule, .econ-note, .count-nums > div, .auto-tier, .kill-real { opacity: 1 !important; }
  .count-stack i { transform: none !important; opacity: 1 !important; }
  .auto-tier .at-bar i { transform: scaleX(var(--w)) !important; }
  .kill-chat { opacity: .3 !important; transform: none !important; }
  .kill-arrow::before { transform: scaleX(1) !important; }
  .econ-swap .econ-from { opacity: .35 !important; }
  .econ-swap .econ-to { opacity: 1 !important; }
  .av-count .avc-pile i, .av-count .avc-nums b, .av-tiers i, .av-frame .avf-chat i,
  .av-frame .avf-arrow, .av-frame .avf-doc b, .av-econ .ave-bar i,
  .av-frame .avf-doc .avf-meter em { transition: none !important; }
  .av-frame .avf-doc .avf-meter em { transform: scaleX(.94) !important; }
  .av-tiers i { transform: scaleX(var(--w)) !important; }
  .av-frame .avf-arrow { transform: scaleX(1) !important; }
  .av-count .avc-nums b { opacity: 1 !important; transform: none !important; }
  .av-frame .avf-doc b { opacity: 1 !important; }
}

/* Anchor's screens are live HTML mockups, so the range strip captions sit
   under the frame rather than over it, and its viewer gets the same
   prev/next gallery behaviour as the image lightbox. */
.ov-evidence--anc .cell { display: flex; flex-direction: column; background: #0C0C0E; }
.ov-evidence--anc .anc-shot { width: 100%; border-radius: 0; }
.ov-evidence--anc figcaption { position: static; background: none; padding: 14px 15px 16px; border-top: 1px solid var(--hairline); }
.ov-products--four .ovp-media .anc-shot { width: 100%; border-radius: 0; }
.anc-lightbox-arrow { display: none; }
.anc-lightbox.has-set .anc-lightbox-arrow { display: grid; }
.anc-lightbox-count {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  color: var(--gray); font-size: var(--t-caption); letter-spacing: .2em; z-index: 4;
}
.anc-lightbox-count:empty { display: none; }

/* ================================================================
   v0.123 — HOW ANCHOR'S LIVE SCREENS ARE PRESENTED

   Two separate problems were reading as one. First, the frames sat
   flush inside rounded containers, so the container's radius took a
   bite out of the product chrome and the screen looked cropped.
   Second, eight 1440x900 screens in a four-column grid gave each of
   them about 260px, at which point a data-dense UI is a grey smudge.

   The fix for the first is a matte: the screen keeps its own small
   radius and sits inset from the card, so the card's curve never
   touches it. The fix for the second is fewer columns.
   ================================================================ */

/* --- 1. the matte. The card is chrome around the screen, not a crop.
   THE MATTE IS PADDING ON THE CARD, NEVER MARGIN OR width:auto ON THE
   FRAME. .anc-shot is a <button>, and a button's auto width is
   shrink-to-fit even at display:block, so it would resolve against the
   1440px iframe it contains and blow the grid apart. Leave width:100%.
   Scoped to the two short views: the full read is deliberately untouched. */
.case-anchor .ov-evidence--anc .cell,
.case-anchor .ss-cell,
.case-anchor .ov-products--four .ovp-media { padding: 9px; }
.case-anchor .ov-evidence--anc .cell,
.case-anchor .ss-cell { padding-bottom: 0; }
.case-anchor .ov-evidence--anc .anc-shot,
.case-anchor .ss-cell .anc-shot,
.case-anchor .ov-products--four .ovp-media .anc-shot {
  width: 100%; margin: 0; border-radius: 5px; clip-path: inset(0 round 5px);
}
.case-anchor .ov-evidence--anc figcaption { padding: 13px 6px 14px; }

/* --- 2. room to read. Eight screens two up rather than four up.
   align-items:start because these artifacts report different natural
   heights, and stretching them to a common row height leaves a shorter
   card enclosing a block of dead space under its own caption. --- */
.ov-evidence--anc { grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1024px) { .ov-evidence--anc { grid-template-columns: 1fr; } }

/* The four surfaces were the smallest frames on the page. Two up was an
   improvement on four up; the stack replaces both, and gives each screen the
   larger of two columns rather than a share of a row. The ink rail comes back
   with it — it reads down a stack where it could not read across a wrapped
   grid — so the numbered labels and the thread now agree instead of the labels
   carrying the sequence alone. */
.case-anchor .ov-products--four { margin-top: 40px; }

/* ================================================================
   v0.123 — THE STORY VIEW ENDS ON THE PRODUCT

   The 90-second read closed on a results wall with no product in it,
   which is a strange way to finish a case about a thing that was
   built. Four live frames, in the order the work happens.
   ================================================================ */
.story-screens {
  position: relative; z-index: 2; width: 100%; max-width: 1280px;
  margin: 0 auto; padding: clamp(80px, 12vh, 140px) 8vw clamp(20px, 3vh, 40px);
}
.story-screens .lt-h { max-width: 20ch; margin-top: 4px; }
.story-screens .ss-lede { margin-top: 14px; color: var(--gray); font-size: var(--t-caption); line-height: 1.7; max-width: 42ch; }
.ss-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: clamp(26px, 4vh, 46px); }
/* min-width:0 and overflow:hidden are load-bearing, not decoration. A grid
   item's automatic minimum is its min-content width, and the min-content
   here is a 1440px iframe, so without both the track refuses to shrink and
   the row runs off the page. */
.ss-cell {
  margin: 0; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: 14px; border: 1px solid rgba(245,242,235,.08); background: #0C0C0E;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.ss-cell:hover { transform: translateY(-4px); border-color: rgba(245,242,235,.2); }
.ss-cell figcaption {
  padding: 13px 15px 15px; margin-top: 9px; border-top: 1px solid var(--hairline);
  color: var(--gray); font-size: var(--t-caption); line-height: 1.6;
}
.ss-cell figcaption span { display: block; margin-bottom: 5px; color: var(--shu-text); font-size: var(--t-caption); letter-spacing: .2em; }
@media (max-width: 1024px) { .ss-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .story-screens { padding-inline: 6vw; } }
@media (prefers-reduced-motion: reduce) {
  .ss-cell { transition: none; }
  .ss-cell:hover { transform: none; }
}

/* ================================================================
   PLAIN-LANGUAGE GLOSSARY TERMS  —  [data-term]
   A term wears a faint dotted underline; hover, focus or tap opens a
   small glass card with a one-line plain definition. The card is a
   single element appended to <body> and positioned by main.js, so it
   can never be clipped by an overlay's `overflow:auto` or by any
   `overflow:hidden` scene container. Reusable on every case study.
   ================================================================ */
.term {
  font: inherit; color: var(--ink); background: none; border: 0;
  padding: 0; margin: 0; text-align: inherit; cursor: help;
  border-bottom: 1px dotted rgba(245,242,235,.34);
  text-decoration: none;
  transition: border-color .28s cubic-bezier(.2,.8,.2,1), color .28s ease;
}
.term:hover, .term:focus-visible, .term.is-open { border-bottom-color: rgba(245,242,235,.72); }
.term:focus-visible { outline: 1px solid rgba(245,242,235,.4); outline-offset: 3px; border-radius: 2px; }
/* Inside gray prose the term is already the brightest thing on the line,
   so it needs no extra weight — kanso, not emphasis. */
.lede .term, .ov-honest .term, .ovm .term, p .term { font-weight: inherit; }

.term-pop {
  position: fixed; z-index: 210; left: 0; top: 0;
  width: max-content; max-width: min(300px, calc(100vw - 32px));
  padding: 14px 17px 15px; border-radius: 14px;
  background: rgba(20,20,22,.52);
  -webkit-backdrop-filter: blur(32px) saturate(1.6); backdrop-filter: blur(32px) saturate(1.6);
  border: 1px solid rgba(245,242,235,.14);
  box-shadow: inset 0 1px 0 rgba(245,242,235,.13), 0 26px 64px rgba(0,0,0,.62);
  opacity: 0; pointer-events: none;
  transform: translate3d(var(--tp-x, 0px), calc(var(--tp-y, 0px) + 5px), 0);
  transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1);
}
.term-pop.is-on { opacity: 1; transform: translate3d(var(--tp-x, 0px), var(--tp-y, 0px), 0); }
.term-pop em {
  display: block; font-style: normal; color: var(--shu-text);
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 7px;
}
.term-pop span { display: block; color: var(--ink); font-size: var(--t-caption); line-height: 1.62; font-weight: 300; }
.term-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 760px) {
  .term-pop { padding: 12px 15px 13px; max-width: calc(100vw - 24px); }
  .term-pop span { font-size: var(--t-caption); }
}
@media (prefers-reduced-motion: reduce) {
  .term, .term-pop { transition: none; }
  .term-pop { transform: translate3d(var(--tp-x, 0px), var(--tp-y, 0px), 0); }
}

/* ================================================================
   ORIENTATION FOR READERS WITH NO CONTEXT
   Three primitives, each tuned to a reading depth:
     .plain-note   one-sentence plain-language aside (any depth)
     .ov-primer    the compact "start here" grid (overview)
     .case-setup   the full setup section (deep dive)
   Shared by every case study.
   ================================================================ */

/* ---- .plain-note — a single sentence in the reader's own language ---- */
.plain-note {
  position: relative; margin-top: clamp(22px, 3.4vh, 34px);
  padding: 2px 0 2px 20px; max-width: 58ch;
  border-left: 1px solid rgba(245,242,235,.16);
}
.plain-note em {
  display: block; font-style: normal; color: var(--shu-text);
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 8px;
}
.plain-note p { color: var(--gray); font-size: var(--t-caption); line-height: 1.72; }
.plain-note p b, .plain-note p strong { color: var(--ink); font-weight: 500; }
.plain-note--center { margin-inline: auto; }
.plain-note--wide { max-width: 66ch; }

/* ---- story hero: one line telling a stranger what they are reading ---- */
.story-primer {
  margin-top: clamp(24px, 3.6vh, 36px); padding-top: 20px; max-width: 56ch;
  border-top: 1px solid rgba(245,242,235,.12);
  color: var(--gray); font-size: var(--t-caption); line-height: 1.74;
}
.story-primer b { color: var(--ink); font-weight: 500; }

/* ---- the four-product legend, shared by overview + deep dive ---- */
/* auto-fit, not repeat(4): Finance has three products and PNC has four
   question types. A fixed four-track grid leaves Finance with a dead
   quarter-width gap on the right. auto-fit collapses the empty track and
   lets the real cards absorb the space. */
.name-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 26px; }
.name-legend article {
  padding: 17px 18px 18px; border-radius: 14px;
  background: rgba(245,242,235,.026);
  border: 1px solid rgba(245,242,235,.08);
}
.name-legend b {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: var(--t-body); letter-spacing: -.02em; color: var(--ink);
}
.name-legend i {
  display: block; margin-top: 6px; font-style: normal; color: var(--shu-text);
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
}
.name-legend p { margin-top: 11px; color: var(--gray); font-size: var(--t-caption); line-height: 1.66; }

/* ---- overview: the "start here" strip, unnumbered on purpose ---- */
.ov-primer { max-width: 1280px; margin: 0 auto; padding: clamp(54px, 7vh, 92px) 8vw 0; scroll-margin-top: 96px; }
.ov-primer .kicker { margin-bottom: 20px; }
.ov-primer h2 {
  font-family: var(--display); font-weight: 500; font-size: var(--t-h3);
  line-height: 1.12; letter-spacing: -.03em; max-width: 26ch; text-wrap: balance;
}
.ov-primer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.ov-primer-grid article {
  padding: 22px 22px 24px; border-radius: 16px;
  background: rgba(245,242,235,.022);
  border: 1px solid rgba(245,242,235,.075);
}
.ov-primer-grid article > span:first-child {
  display: block; color: var(--shu-text); font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
}
.ov-primer-grid p { margin-top: 15px; color: var(--gray); font-size: var(--t-caption); line-height: 1.72; }
.ov-primer-grid p b { color: var(--ink); font-weight: 500; }

/* ---- deep dive: the full setup section ---- */
.case-setup { max-width: 1280px; margin: 0 auto; padding: clamp(70px, 10vh, 130px) 8vw 0; }
.case-setup h3 {
  font-family: var(--display); font-weight: 500; font-size: var(--t-h3);
  line-height: 1.1; letter-spacing: -.035em; max-width: 22ch; text-wrap: balance;
}
.case-setup .lede { margin-top: 20px; color: var(--gray); font-size: var(--t-small); line-height: 1.8; max-width: 62ch; }
.case-setup .lede b { color: var(--ink); font-weight: 500; }
.case-setup .lede + .lede { margin-top: 14px; }
.setup-who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; }
.setup-who div { padding: 18px 20px 20px 0; border-top: 1px solid rgba(245,242,235,.12); }
.setup-who b { display: block; color: var(--ink); font-size: var(--t-caption); font-weight: 500; }
.setup-who span { display: block; margin-top: 9px; color: var(--gray); font-size: var(--t-caption); line-height: 1.64; }
.case-setup .pill-row { margin-top: 8px; }

/* ---- glossary overlay: a two-column definition list ---- */
/* A grid, not CSS columns: columns would run the whole alphabet down the
   left side first, so a reader scrolling this modal would reach W before B.
   A grid flows left-to-right, row by row, which is how a list is read. */
.overlay .oglossary { margin-top: 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 34px; }
.overlay .oglossary > div {
  padding: 15px 0 16px;
  border-top: 1px solid rgba(245,242,235,.08);
}
.overlay .oglossary b { display: block; color: var(--ink); font-size: var(--t-caption); font-weight: 500; }
.overlay .oglossary p { margin-top: 7px; color: var(--gray); font-size: var(--t-caption); line-height: 1.62; }
.overlay .oglossary p em { font-style: italic; color: rgba(245,242,235,.72); }

@media (max-width: 1024px) {
  .name-legend { grid-template-columns: repeat(2, 1fr); }
  .ov-primer-grid { grid-template-columns: 1fr; }
  .setup-who { grid-template-columns: repeat(2, 1fr); }
  .setup-who div { padding-right: 18px; }
}
@media (max-width: 760px) {
  .name-legend { grid-template-columns: 1fr; gap: 10px; }
  .setup-who { grid-template-columns: 1fr; }
  .overlay .oglossary { grid-template-columns: 1fr; }
  .plain-note { padding-left: 16px; }
}

/* A term can land inside prose whose own spans are styled as blocks — metric
   labels, captions, eyebrows. Whatever it lands in, it stays inline text.
   Equal specificity to those container rules, declared later, so it wins. */
span.term {
  display: inline; margin: 0; max-width: none; color: var(--ink);
  font-size: inherit; font-family: inherit; letter-spacing: inherit;
  text-transform: none; line-height: inherit;
}

/* A quiet band for a single plain-language aside, used between story scenes.
   It lives outside any sticky stage on purpose: .lt-stage is a fixed-height
   100vh scene with overflow:hidden, and one extra paragraph inside it is
   enough to clip the payoff on a short laptop. */
.story-aside { max-width: 1280px; margin-inline: auto; padding: clamp(40px, 7vh, 84px) 8vw 0; }
.story-aside .plain-note { margin-top: 0; }
@media (max-width: 620px) { .story-aside { padding-inline: 6vw; } }

/* The story hero centres everything, so the primer centres with it. */
.casehero .story-primer { align-self: center; text-align: center; }

/* ================================================================
   FIX: stacked scroll-swapped copy layers must not swallow the pointer
   Every one of these patterns absolutely positions its beats on top of
   each other and cross-fades them with .is-on. Without a pointer-events
   rule, all beats stay hit-testable, so the LAST beat in DOM order sits
   over the whole stack and eats hover for the earlier ones — which broke
   the glossary tooltips in the overview's "How I led" section (beats 01
   and 02 were unreachable, 04 was on top). Only the visible beat should
   be interactive.
   ================================================================ */
.moves-copy article,
.tool-copy article,
.stakes-rotor article,
.pace-steps article,
.lt-beats p { pointer-events: none; }
.moves-copy article.is-on,
.tool-copy article.is-on,
.stakes-rotor article.is-on,
.pace-steps article.is-on,
.lt-beats p.is-on { pointer-events: auto; }
/* Below 900px these stacks become ordinary stacked sections, so everything
   is visible and everything must be interactive again. */
@media (max-width: 900px) {
  .moves-copy article,
  .tool-copy article,
  .stakes-rotor article,
  .pace-steps article,
  .lt-beats p { pointer-events: auto; }
}

/* FIX: pin the rule under every product card to one baseline.
   `margin-top:auto` already pushes the label to the bottom of the card, but
   a label that wraps to two lines is 16px taller, so its border-top sat
   16px higher than a one-line neighbour's. Reserving two lines' height
   makes the rules line up whatever the copy does. */
/* 50px = 15px padding-top + two lines of 11px/1.5 text, rounded up. Because
   the value is a floor applied to every label, all of them settle at exactly
   this height and the rules land on one line — the 1px drift a calc() in em
   left behind is gone. The font-size and line-height above are both fixed,
   so a px floor is safe here. */
/* Superseded 2026-08-01: the cards were columns in a row, so their rules had to
   agree on a baseline. In the stack each product owns its own row and there is
   no neighbouring rule to line up with, so the floor only added dead space. */
.ov-products .ovp-copy > b { min-height: 0; }

/* ================================================================
   CENTRED SECTION HEADS  (owner direction 2026-07-29)
   Section kickers, headings and their ledes centre; the content blocks
   beneath them stay left-aligned, which is the same split the existing
   `.act--centered` already uses for `.decision-grid`. Two layouts are
   deliberately excluded because their asymmetry is structural, not a
   default: `.case-compass-head` (a two-column head by design) and
   `.moves-stage` / `.lt-head` (copy that sits beside a diagram).
   ================================================================ */
.ov-act > .kicker,
.ov-primer > .kicker,
.case-setup > .kicker { text-align: center; }
.ov-head { max-width: 62ch; margin-inline: auto; text-align: center; }
.ov-head h2 { margin-inline: auto; }
.ov-head .ov-lede { margin-inline: auto; }
.ov-pull { margin-inline: auto; text-align: center; }
.ov-honest { margin-inline: auto; text-align: center; }
  .ov-prov { margin-inline: auto; text-align: center; }

.ov-primer { text-align: center; }
.ov-primer h2 { margin-inline: auto; }
.ov-primer .ov-primer-grid,
.ov-primer .name-legend { text-align: left; }

.case-setup { text-align: center; }
.case-setup h3 { margin-inline: auto; }
.case-setup > .lede { margin-inline: auto; }
.case-setup .setup-facts,
.case-setup .setup-who,
.case-setup .name-legend { text-align: left; }
/* Inside a centred section the aside drops its left rule entirely: a short
   block floating mid-page with a vertical rule down one side reads as a
   mis-indent. It becomes a centred footnote under a hairline instead. */
.case-setup .plain-note,
.ov-primer .plain-note {
  margin-inline: auto; text-align: center; max-width: 62ch;
  border-left: 0; border-top: 1px solid rgba(245,242,235,.14);
  padding: 22px 0 0;
}
.case-setup .pill-row,
.ov-primer .pill-row { justify-content: center; }

/* ---- .setup-facts: the context, as three scannable facts ----------------
   This replaces what used to be three long centred paragraphs in the setup
   sections. Same information, but nothing here is a wall of prose: a
   numeral, a label, one sentence. */
.setup-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); margin-top: clamp(34px, 5vh, 56px); }
.setup-facts > div { position: relative; padding-top: 20px; border-top: 1px solid rgba(245,242,235,.14); }
.setup-facts em {
  display: block; font-style: normal; color: var(--shu-text);
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 12px;
}
.setup-facts p { color: var(--gray); font-size: var(--t-small); line-height: 1.74; }
.setup-facts p b { color: var(--ink); font-weight: 500; }

@media (max-width: 1024px) { .setup-facts { grid-template-columns: 1fr; gap: 0; }
  .setup-facts > div { padding: 20px 0 22px; }
}

/* ================================================================
   FIX 1 · Finance story: the ledger scene on short windows
   `.lt-stage` is a sticky box exactly one viewport tall with
   overflow:hidden, but `.desk-book` is a fixed 474px — its height comes
   from the row count, not the screen. On a tall window the overflow is
   harmless because the ledger is masked to fade out over its last 38%,
   so the clipped part is already invisible. Below roughly 900px of
   window height the cut starts landing where the ledger is still opaque,
   and by 700px it slices through a fully legible row while the clock and
   caption collide with rows above it.
   Fix: compress the scene as the window shortens so the ledger always
   finishes inside the stage and the fade can do its job. Width-gated to
   901px+ because below that the stage is already static and auto-height.
   ================================================================ */
@media (min-width: 901px) and (max-height: 940px) {
  .track-desk .lt-stage { padding-top: clamp(56px, 7vh, 84px); }
  .desk-book { margin-top: clamp(14px, 2.2vh, 28px); }
  .desk-row { padding: 6px 0; }
  .desk-clockline { bottom: clamp(26px, 5vh, 56px); }
}
@media (min-width: 901px) and (max-height: 820px) {
  .track-desk .lt-stage { padding-top: clamp(44px, 5.5vh, 64px); }
  .track-desk .lt-h { font-size: var(--t-h3); }
  .track-desk .lt-beats { min-height: 4.2em; }
  .desk-book { margin-top: clamp(10px, 1.6vh, 18px); }
  .desk-row { padding: 3px 0; }
  .desk-row > s, .desk-row .dr-amt { font-size: var(--t-caption); }
}
@media (min-width: 901px) and (max-height: 700px) {
  /* Past this point the rows cannot shrink further without becoming
     illegible, so the tail of the ledger goes instead. The scene reads on
     density, and eleven rows still carry that. */
  .desk-row:nth-child(n+12) { display: none; }
  .track-desk .lt-beats { min-height: 3.6em; }
}

/* ================================================================
   FIX 2 · Anchor's story headline is a full two-clause sentence, not a
   three-word phrase like the other three. At the shared display size it
   ran to four lines and 384px, swallowing the hero.
   ================================================================ */
.case-anchor .casehero--story h1 { font-size: var(--t-h2); max-width: 24ch; }

/* ================================================================
   FIX 3 · Talent's hero swarm was densest exactly where the type sits
   The dot field is the motif for a million-person workforce, but its
   mask peaked at the centre (#000 at 0%), putting the brightest, tightest
   dots directly behind the headline, lede and primer. Inverting it opens
   a clear well for the type and pushes the swarm into a halo around it —
   which also reads better: the crowd parts around the sentence. Dot alpha
   comes down too, since they no longer need to survive a mask fade.
   ================================================================ */
.case-talent .story-hero-bg .shb-rules {
  background-image: radial-gradient(circle, rgba(245,242,235,.38) 0 1.1px, transparent 1.2px);
  -webkit-mask: radial-gradient(64% 68% at 50% 46%, transparent 0%, transparent 30%, rgba(0,0,0,.42) 54%, rgba(0,0,0,.9) 74%, transparent 97%);
  mask: radial-gradient(64% 68% at 50% 46%, transparent 0%, transparent 30%, rgba(0,0,0,.42) 54%, rgba(0,0,0,.9) 74%, transparent 97%);
}
.case-talent .story-hero-bg .shb-rules::before {
  background-image: radial-gradient(circle, rgba(245,242,235,.16) 0 1.6px, transparent 1.7px);
}

/* Anchor's hero field is a ruled page, which is exactly right for a case
   study about documents — so it should not get Talent's punched-out well;
   a page with a hole in it stops reading as a page. Instead it moves
   further back. Shrinking the headline (above) exposed more of this field
   behind the lede and primer, where the rules, the tick marks and the
   vermilion margin line were all crossing live text. */
.case-anchor .story-hero-bg .shb-rules::before {
  background-image:
    repeating-linear-gradient(180deg, rgba(245,242,235,.042) 0 1px, transparent 1px 17px),
    linear-gradient(90deg, rgba(195,21,55,.18) 0 1px, transparent 1px);
}
.case-anchor .story-hero-bg .shb-rules::after {
  background-image: repeating-linear-gradient(180deg, rgba(245,242,235,.12) 0 1px, transparent 1px 68px);
}

/* Same short-window problem as the Finance ledger, in the two video-rack
   scenes: a fixed media row plus a fixed copy block that together need more
   than a short viewport gives them. Compress rather than clip. */
@media (min-width: 901px) and (max-height: 860px) {
  .track-relay .lt-stage, .track-tools .lt-stage { gap: clamp(12px, 2vh, 24px); }
  .relay-rack figure video, .relay-rack figure img { max-height: 26vh; }
  .tool-rack figure video { max-height: 26vh; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .track-relay .lt-h, .track-tools .lt-h { font-size: var(--t-h3); }
  .track-relay .lt-stage, .track-tools .lt-stage { gap: clamp(8px, 1.4vh, 16px); }
  .relay-rack figure video, .relay-rack figure img,
  .tool-rack figure video { max-height: 20vh; }
  /* NOT `.tool-copy { min-height: 0 }` — its beats are position:absolute
     inset:0, so collapsing the container drops them out of the stage and
     makes the overflow worse, not better. The container's min-height IS
     the beats' height. */
}

/* Anchor's autonomy scene overshoots a short viewport by a few pixels,
   which shaves the last line of the rule underneath the three tiers. */
@media (min-width: 901px) and (max-height: 760px) {
  .auto-stage { margin-top: clamp(12px, 2vh, 24px); }
  .auto-tier { padding-block: clamp(9px, 1.6vh, 16px); }
  .auto-rule { margin-top: clamp(14px, 2.4vh, 26px); }
}

/* ================================================================
   Story heroes: let the field dissolve into the next section
   `.story-hero` clips its background field at the hero's bottom edge,
   which drew a dead-straight horizontal line across the full width —
   dots above, nothing below. A bottom fade on the field container means
   the texture runs out before the clip can cut it.
   `no-repeat` and an explicit 100% 100% size are load-bearing: mask-repeat
   defaults to `repeat`, and the case-specific fields deliberately overflow
   this box (Talent's swarm sits at inset:-18% -8%), so a tiled mask would
   stamp a second fade band across them.
   ================================================================ */
.story-hero-bg {
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 54%, transparent 93%) center / 100% 100% no-repeat;
  mask: linear-gradient(180deg, #000 0%, #000 54%, transparent 93%) center / 100% 100% no-repeat;
}

/* ================================================================
   Finance hero, reworked
   The motif is right — Amazon as a constellation of separate legal
   companies, faintly wired to each other — but it was drawn as loose dots
   with the wiring almost invisible, and its mask peaked dead centre, so
   the brightest nodes landed on the kicker and the headline.
   Two changes: the network now actually reads as a network (two node
   scales plus slack diagonal wiring between them), and it parts around
   the type the way Talent's swarm does, so the constellation frames the
   sentence instead of sitting behind it.
   ================================================================ */
.case-finance .story-hero-bg .shb-rules {
  background-image:
    repeating-linear-gradient(23deg, rgba(245,242,235,.055) 0 1px, transparent 1px 168px),
    repeating-linear-gradient(-17deg, rgba(245,242,235,.04) 0 1px, transparent 1px 214px),
    radial-gradient(circle, rgba(245,242,235,.42) 0 1.7px, transparent 1.8px),
    radial-gradient(circle, rgba(245,242,235,.16) 0 1.1px, transparent 1.2px);
  background-size: auto auto, auto auto, 178px 152px, 89px 76px;
  background-position: 0 0, 0 0, 22px 14px, 0 0;
  -webkit-mask: radial-gradient(68% 72% at 50% 44%, transparent 0%, transparent 29%, rgba(0,0,0,.4) 54%, rgba(0,0,0,.92) 76%, transparent 98%);
  mask: radial-gradient(68% 72% at 50% 44%, transparent 0%, transparent 29%, rgba(0,0,0,.4) 54%, rgba(0,0,0,.92) 76%, transparent 98%);
}
/* A few brighter nodes so the constellation has weight where it is densest. */
.case-finance .story-hero-bg .shb-rules::before {
  background-image: radial-gradient(circle, rgba(245,242,235,.3) 0 2.1px, transparent 2.2px);
  background-size: 291px 247px; background-position: 61px 38px;
}

/* ================================================================
   WORK DROPDOWN  ·  nav.glassnav .navdrop
   The nav pill is the most heavily overridden component on the site —
   `nav.glassnav a:not(.mark)` sets colour, font-size, a 44px tap minimum
   and a sliding underline, and there is a light mode that samples the
   content beneath the pill. Every rule below is written at
   `nav.glassnav .navdrop-panel …` (0,3,1) so it beats those without
   !important, and the light mode is handled explicitly rather than
   inherited by accident.
   ================================================================ */
.navdrop { position: relative; display: flex; align-items: center; }

/* The trigger stays a real link — it still navigates to the work list. */
nav.glassnav .navdrop-trigger { display: inline-flex; align-items: center; gap: 6px; }
.navdrop-caret {
  width: 7px; height: 7px; margin-top: -2px; flex: none;
  border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor;
  transform: rotate(45deg) scale(.82); opacity: .5;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}
.navdrop.is-open .navdrop-caret { transform: rotate(-135deg) scale(.82) translate(-1px,-1px); opacity: .95; }

/* ---- the panel ---- */
.navdrop-panel {
  position: absolute; top: 100%; left: 50%; z-index: 5;
  margin-top: 15px; width: max-content; min-width: 262px;
  padding: 9px; border-radius: 18px;
  /* Denser than the overlays on purpose. An overlay always sits on top of a
     darkening veil; this hangs directly over whatever the page happens to be
     showing — including the homepage's bright ink-wash hero, where the site's
     own headline was reading straight through the glass at .52. */
  background: rgba(14,14,16,.95);
  -webkit-backdrop-filter: blur(34px) saturate(1.5); backdrop-filter: blur(34px) saturate(1.5);
  border: 1px solid rgba(245,242,235,.14);
  box-shadow: inset 0 1px 0 rgba(245,242,235,.12), 0 28px 70px rgba(0,0,0,.7);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity .24s ease, transform .34s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s;
}
/* The 15px gap between pill and panel would drop the hover on the way
   down, so the panel carries an invisible bridge across it. */
.navdrop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -17px; height: 17px; }

.navdrop.is-open > .navdrop-panel,
.navdrop:focus-within > .navdrop-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0); transition-delay: 0s;
}
@media (hover: hover) and (pointer: fine) {
  .navdrop:hover > .navdrop-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, 0); transition-delay: 0s;
  }
}

/* ---- rows ---- */
nav.glassnav .navdrop-panel a {
  display: block; min-width: 0; min-height: 0; padding: 9px 13px 10px;
  border-radius: 11px; text-align: left; white-space: nowrap;
  font-size: var(--t-caption); letter-spacing: 0; color: var(--ink);
  transition: background .22s ease;
}
nav.glassnav .navdrop-panel a::after { content: none; } /* kill the nav underline */
nav.glassnav .navdrop-panel a:hover,
nav.glassnav .navdrop-panel a:focus-visible { background: rgba(245,242,235,.07); color: var(--ink); }
nav.glassnav .navdrop-panel a:focus-visible { outline: 1px solid rgba(245,242,235,.36); outline-offset: -1px; }
nav.glassnav .navdrop-panel .navdrop-item b {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: var(--t-small); letter-spacing: -.02em; line-height: 1.2;
}
nav.glassnav .navdrop-panel .navdrop-item span {
  display: block; margin-top: 3px; color: var(--gray);
  font-size: var(--t-label); letter-spacing: .17em; text-transform: uppercase;
}
/* The page you are already on, marked the way the site marks anything
   current: a vermilion tick in the margin, not a filled row. */
nav.glassnav .navdrop-panel a[aria-current="page"] { background: rgba(245,242,235,.05); }
nav.glassnav .navdrop-panel a[aria-current="page"] b { position: relative; }
nav.glassnav .navdrop-panel a[aria-current="page"] b::before {
  content: ""; position: absolute; left: -9px; top: .48em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--shu);
}
nav.glassnav .navdrop-panel .navdrop-all {
  margin-top: 5px; padding-top: 13px; border-top: 1px solid rgba(245,242,235,.1);
  border-radius: 0 0 11px 11px; color: var(--gray); font-size: var(--t-caption); letter-spacing: .04em;
}
nav.glassnav .navdrop-panel .navdrop-all:hover { color: var(--ink); background: transparent; }
.navdrop-panel .navdrop-all em { font-style: normal; color: var(--shu-text); margin-left: 4px; }

/* ---- light mode: the pill samples what is under it, the panel follows ---- */
nav.glassnav.nav-light .navdrop-panel {
  background: rgba(245,242,235,.93);
  border-color: rgba(10,10,11,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 24px 60px rgba(10,10,11,.22);
}
nav.glassnav.nav-light .navdrop-panel a { color: #0A0A0B; }
nav.glassnav.nav-light .navdrop-panel a:hover,
nav.glassnav.nav-light .navdrop-panel a:focus-visible { background: rgba(10,10,11,.06); color: #0A0A0B; }
nav.glassnav.nav-light .navdrop-panel .navdrop-item span { color: rgba(10,10,11,.56); }
nav.glassnav.nav-light .navdrop-panel a[aria-current="page"] { background: rgba(10,10,11,.05); }
nav.glassnav.nav-light .navdrop-panel .navdrop-all { color: rgba(10,10,11,.62); border-top-color: rgba(10,10,11,.12); }
nav.glassnav.nav-light .navdrop-panel .navdrop-all:hover { color: #0A0A0B; }

/* ---- small screens: the pill is tight, so the panel becomes a centred
   sheet under the nav rather than hanging off one item ---- */
@media (max-width: 620px) {
  /* `nav.glassnav > *` sets position:relative on every child at (0,1,1), so a
     bare `.navdrop` selector loses and the panel stayed anchored to the Work
     item — which sits left of centre in the pill, pushing the panel off the
     left edge of a phone. This has to out-specify that rule. */
  nav.glassnav .navdrop { position: static; }
  .navdrop-panel {
    left: 50%; top: calc(100% + 10px); margin-top: 0;
    width: min(300px, calc(100vw - 24px)); min-width: 0;
  }
  nav.glassnav .navdrop-panel a { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .navdrop-panel, .navdrop-caret { transition: opacity .01s linear, visibility 0s; transform: translate(-50%, 0); }
  .navdrop-caret { transform: rotate(45deg) scale(.82); }
  .navdrop.is-open .navdrop-caret { transform: rotate(-135deg) scale(.82); }
}

/* Escape has to win over `:hover` and `:focus-within`, both of which are
   (0,3,0) like this rule — so it is declared last in the sheet. */
nav.glassnav .navdrop.is-dismissed > .navdrop-panel {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -6px);
}

/* Same no-backdrop-filter and reduced-transparency fallbacks the nav pill
   already carries, extended to the dropdown. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .navdrop-panel { background: rgba(16,16,18,.98); }
  nav.glassnav.nav-light .navdrop-panel { background: rgba(245,242,235,.98); }
}
@media (prefers-reduced-transparency: reduce) {
  .navdrop-panel { background: rgba(16,16,18,.98); -webkit-backdrop-filter: none; backdrop-filter: none; }
  nav.glassnav.nav-light .navdrop-panel { background: rgba(245,242,235,.98); }
}
@media (prefers-contrast: more) {
  .navdrop-panel { border-color: rgba(245,242,235,.42); }
  nav.glassnav.nav-light .navdrop-panel { border-color: rgba(10,10,11,.55); }
}

/* ============================================================================
   MOBILE READING SCALE — added 2026-07-30
   ============================================================================

   The problem this solves: body copy ran at 12–14.5px on phones, because it
   used the same values as desktop with no mobile step, while display headings
   sat at their clamp() floors of 42–52px. That produced a hierarchy ratio of up
   to 4:1 inside a 328px-wide column. On a wide screen a 3–4x ratio reads as
   confident restraint; in a narrow column it reads as a shout followed by a
   whisper, and the whisper is the part you are asking a hiring manager to read
   for six minutes.

   The reference points:
     - Apple ships body at 17px / 1.47 with a touch of negative tracking.
     - The 2026 long-form standard is 17–18px on phones.
     - Research puts the ideal mobile measure at 30–50 characters per line.
     - Apple does not interpolate one type scale across breakpoints; it moves
       between two scales with different RATIOS, because a narrow column needs
       a gentler hierarchy than a wide one.

   So this block does two things at once, which is the whole point:
     body copy goes UP   (13–14.5px  ->  16–17px)
     display type comes DOWN (42–52px -> 33–38px)
   Ratio lands at roughly 2.1:1 instead of 4:1. Measure stays inside 30–50 CPL
   because raising the size on a fixed-width column moves it toward the middle
   of that band, not past it.

   Line-height falls as size rises — 1.8 is correct at 14px and too airy at
   17px, where it starts to break the paragraph into stripes.

   Everything here is one block at the end of the cascade, so it can be deleted
   in one piece if any of it is wrong.
   ========================================================================= */
@media (max-width: 620px) {

  /* ---- 1. PRIMARY READING COPY — the long stretches ---- */
  .lede,
  .about-premise > p,
  .about-lead-lede,
  .about-start-lede,
  .about-mentor-lede,
  .ov-honest,
  .story-note {
    font-size: var(--t-body);
    line-height: 1.62;
    letter-spacing: -0.003em;
    text-wrap: pretty;
  }
  .ch-lede,
  .lt-beats p {
    font-size: var(--t-body);
    line-height: 1.6;
    text-wrap: pretty;
  }

  /* ---- 2. CARD AND TILE BODY — read in short bursts, so slightly tighter ---- */
  .craft-notes p,
  .about-lead-grid p,
  .about-mentor-grid p,
  .about-start-list p,
  .ovm--map p,
  .case-compass-grid p,
  .hl-scene p,
  .stat p,
  .wcard .desc,
  .career-role p {
    font-size: var(--t-body);
    line-height: 1.66;
    text-wrap: pretty;
  }

  /* ---- 3. SMALL PRINT — provenance, notes, disclosures ----
     Still lifted off 11.5–12.5px, which was below comfortable reading on a
     phone even for secondary text. */
  .proof-note,
  .ov-prov,
  .conf-note,
  .about-mentor-note,
  .figcap {
    font-size: var(--t-small);
    line-height: 1.7;
  }
  .conf-note--slim { font-size: var(--t-caption); line-height: 1.6; }

  /* ---- 4. DISPLAY TYPE — down, so the ratio narrows ---- */
  .about-thread > h2 { font-size: var(--t-h3); line-height: 1.06; letter-spacing: -.04em; }
  .about-premise > h2 { font-size: var(--t-h3); line-height: 1.06; letter-spacing: -.04em; }
  .about-lead > h2 { font-size: var(--t-h3); line-height: 1.08; letter-spacing: -.035em; }
  .about-start > h2 { font-size: var(--t-h3); line-height: 1.08; letter-spacing: -.035em; }
  .casehero h1,
  .casehero h2 { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.03em; }
  .craft-head h2,
  .case-compass-head h2 { font-size: var(--t-h3); line-height: 1.12; letter-spacing: -.03em; }
  .about-mentor > h2 { font-size: var(--t-h3); line-height: 1.14; letter-spacing: -.03em; }
  .hl-scene h3 { font-size: var(--t-h3); line-height: 1.14; }
  .lt-h { font-size: var(--t-h4); line-height: 1.18; }
  .about-hero-copy h1 { font-size: var(--t-h3); line-height: 1.06; letter-spacing: -.04em; }

  /* ---- 5. SUB-HEADS INSIDE CARDS — lifted with the body they sit on ----
     The two/three-line reservations these carry on desktop are dropped here.
     Every one of these grids is a single column at phone width, so there are no
     siblings left to align with — the reservation would just be a hole between
     each heading and its own paragraph, which is the exact defect it was added
     to fix on wide screens. */
  .craft-notes b { font-size: var(--t-body); line-height: 1.34; min-height: 0; }
  .about-lead-grid b { font-size: var(--t-lede); line-height: 1.24; min-height: 0; }
  .about-mentor-grid b { font-size: var(--t-lede); line-height: 1.26; min-height: 0; }
  .case-compass-grid strong { font-size: var(--t-h4); line-height: 1.16; min-height: 0; max-width: none; }
  /* The map mosaic is still TWO columns between 561 and 620px, so its caption
     keeps the reservation here and only drops it below 560px, where it finally
     becomes a single column and has nothing left to align against. */
  .ovm--map figcaption { font-size: var(--t-body); line-height: 1.24; min-height: calc(2 * 1.24em); }

  /* ---- 6. VERTICAL RHYTHM ----
     Spacing was tuned against 13px text. At 16–17px the same gaps read as
     cramped, so the intervals scale with the type rather than staying fixed.
     Section padding comes down slightly at the same time: with larger type the
     page is already longer, and 16vh of empty space between sections on a phone
     is scrolling with nothing in it. */
  .about-lead,
  .about-mentor,
  .about-start,
  .about-premise,
  .about-thread,
  .craft { padding-top: clamp(72px, 10vh, 104px); }
  .craft { padding-bottom: clamp(60px, 8vh, 88px); }

  .about-lead-lede,
  .about-start-lede,
  .about-mentor-lede { margin-top: 20px; }
  .about-lead > h2,
  .about-mentor > h2,
  .about-start > h2,
  .craft-head h2 { margin-top: 18px; }

  .about-lead-grid,
  .about-mentor-grid { gap: 14px; margin-top: 34px; }
  .about-lead-grid article,
  .about-mentor-grid article { padding: 24px 22px; }
  .about-lead-grid article { border: 0; }
  .about-lead-grid p,
  .about-mentor-grid p { margin-top: 11px; }

  .craft-notes { gap: 0; margin-top: 30px; }
  .craft-notes li { padding: 22px 0; }
  .craft-notes li:last-child { padding-bottom: 4px; }
  .craft-notes p { margin-top: 8px; }

  .about-start-list li { padding: 24px 0 24px 20px; }
  .about-start-list p { margin-top: 10px; }
  .about-start-list b { font-size: var(--t-lede); line-height: 1.24; }

  .ovm--map { gap: 13px; }
  .case-compass-grid p { margin-top: 14px; }
  .stat p { margin-top: 12px; max-width: none; }
  .proof-note { margin-top: 38px; }

  /* Kickers are the one thing that should NOT grow — they are labels, not
     reading, and enlarging them would compete with the headings they announce. */
  .kicker { margin-bottom: 14px; }
}

/* Very narrow phones: hold the reading size, give back the gutters instead.
   Shrinking type on a 320px screen is the wrong trade — the text is the point,
   the margins are not. */
/* Below 560px the map mosaic is finally one column, so the caption reservation
   becomes dead space and comes off. */
@media (max-width: 560px) {
  .ovm--map figcaption { min-height: 0; }
}

@media (max-width: 380px) {
  .about-lead, .about-mentor, .about-start, .about-premise, .craft { padding-inline: 6vw; }
  .about-lead-grid article, .about-mentor-grid article { padding: 22px 18px; }
  .about-thread > h2 { font-size: var(--t-h3); }
  .about-premise > h2 { font-size: var(--t-h3); }
  .about-hero-copy h1 { font-size: var(--t-h3); }
}

/* ============================================================================
   MOBILE REVEAL — the paired CSS for armMobileReveal() in main.js
   ============================================================================
   Two classes, set by JS:
     .mr-armed  the pre-state, applied only once the observer exists — so if
                JavaScript never runs, nothing is ever hidden. This is the same
                no-JS contract the rest of the site keeps.
     .mr-in     the resolved state.
   Transform and opacity only, so the whole thing stays on the compositor and
   never triggers layout. The duration is the element's own, not the scroll's:
   that is the entire difference between this and the pinned desktop version.
   ========================================================================= */
@media (max-width: 820px) {
  /* The class is chained to itself to reach specificity (0,2,0). Several of the
     targets — .lt-beats p, .stakes-rotor article and friends — already carry
     `opacity: 1` from the 900px flattening block at (0,1,1), and would
     otherwise win. Chaining beats them without resorting to !important, which
     would then have to be repeated on every future override. */
  .mr-armed.mr-armed {
    /* Some compact-stage fallbacks carry inline opacity/transform values and
       some first beats use a more-specific `.is-on` selector. These states are
       correct after arrival but must not outrank the observer's pre-state. */
    opacity: 0 !important;
    transform: translate3d(0, 18px, 0) !important;
    transition: opacity .5s cubic-bezier(.2,.8,.2,1),
                transform .62s cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
  }
  .mr-in.mr-in {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }
  /* The stacked stages need real separation once they are no longer a pinned
     sequence — on desktop each panel had a whole viewport to itself. */
  .highlights-stage.is-compact-stage .hl-scene,
  .days-stage.is-compact-stage > *,
  .stack-stage.is-compact-stage > *,
  .wall-stage.is-compact-stage > * { margin-block: 0; }
  .highlights-stage.is-compact-stage {
    padding: 64px 0 40px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .highlights-stage.is-compact-stage .hl-scene {
    min-height: 0;
    padding: 30px 24px !important;
    border-top: 1px solid rgba(245,242,235,.09);
  }
  .highlights-stage.is-compact-stage .hl-scene:first-of-type { border-top: 0; }
  .highlights-stage.is-compact-stage .hl-glyph { margin-bottom: 16px; }
  .highlights-stage.is-compact-stage .hl-receipt { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mr-armed.mr-armed { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ============================================================================
   SCOPE BOARD ON TOUCH — the un-enhanced list, styled properly
   ============================================================================
   main.js skips `is-enhanced` below 820px, so these fall to the `:not(...)`
   rules that render each description inline under its own item. Those rules
   were written as a no-JS safety net and had never been designed for — this
   makes the fallback a first-class mobile layout rather than a bare one.
   ========================================================================= */
@media (max-width: 820px) {
  .ov-board:not(.is-enhanced) .scb-lane {
    display: block;
    padding-bottom: 4px;
  }
  .ov-board:not(.is-enhanced) .scb-tag {
    padding-top: 0;
    margin-bottom: 14px;
    font-size: var(--t-caption);
  }
  .ov-board:not(.is-enhanced) .scb-lane ul { display: block; margin: 0; padding: 0; }
  .ov-board:not(.is-enhanced) .scb-lane li { list-style: none; }
  .ov-board:not(.is-enhanced) .scb-lane button {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: baseline;
    width: 100%;
    padding: 16px 0;
    border: 0;
    border-top: 1px solid rgba(245,242,235,.09);
    border-radius: 0;
    background: none;
    text-align: left;
    cursor: default;
  }
  .ov-board:not(.is-enhanced) .scb-lane li:first-child button { border-top: 0; }
  .ov-board:not(.is-enhanced) .scb-lane button i {
    grid-column: 1;
    color: var(--shu-text);
    font-style: normal;
    font-size: var(--t-caption);
    letter-spacing: .1em;
  }
  /* The short label `u` is the chip text; the long label `b` is the readout
     title. With the readout gone, the long one is the better heading. */
  .ov-board:not(.is-enhanced) .scb-lane button u { display: none; }
  .ov-board:not(.is-enhanced) .scb-lane button b {
    display: block;
    grid-column: 2;
    color: var(--ink);
    font-family: var(--display);
    font-weight: 500;
    font-size: var(--t-body);
    line-height: 1.3;
    letter-spacing: -.02em;
  }
  .ov-board:not(.is-enhanced) .scb-lane button span {
    grid-column: 2;
    margin-top: 8px;
    color: var(--gray);
    font-size: var(--t-small);
    line-height: 1.66;
    text-wrap: pretty;
  }
  /* No hover state on a surface that cannot be hovered, and no selected state
     when nothing is selectable. */
  .ov-board:not(.is-enhanced) .scb-lane button:hover,
  .ov-board:not(.is-enhanced) .scb-lane button.is-on {
    background: none;
    border-color: rgba(245,242,235,.09);
    color: inherit;
  }
  .ov-board:not(.is-enhanced) .scb-readout { display: none; }
  .ov-board:not(.is-enhanced) .scb-hint { display: none; }
}

/* ============================================================================
   "AT A GLANCE" BENTO ON A PHONE
   ============================================================================
   The mosaic collapsed to a single column at 560px, which turned nine tiles
   into nine full-width cards — five of them a single number each, and two of
   them wordless diagrams. Nine screens of scrolling to read five numbers, and
   the numbers lost the one thing they were arranged to do: be compared.

   So the phone keeps TWO columns. Numbers sit next to each other where they can
   be scanned; anything carrying a sentence or a diagram spans the full width.
   That is the same logic as the desktop bento, just at half the column count —
   which is what makes it read as the same design rather than a fallback.

   Scoped away from .ov-mosaic--map, whose tiles each carry a body paragraph and
   genuinely do need one column.
   ========================================================================= */
@media (max-width: 560px) {
  .ov-mosaic:not(.ov-mosaic--map) {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  /* Anything with a sentence, a role label or a diagram takes the full row. */
  .ov-mosaic:not(.ov-mosaic--map) .ovm--hero,
  .ov-mosaic:not(.ov-mosaic--map) .ovm--wide,
  .ov-mosaic:not(.ov-mosaic--map) .ovm--aside,
  .ov-mosaic:not(.ov-mosaic--map) .ovm--4,
  .ov-mosaic:not(.ov-mosaic--map) .ovm--3 { grid-column: span 2; }

  /* Compact by default; the hero keeps its presence. */
  .ov-mosaic:not(.ov-mosaic--map) .ovm { min-height: 124px; padding: 18px 16px; }
  .ov-mosaic:not(.ov-mosaic--map) .ovm--hero { min-height: 178px; padding: 22px 20px; }
  .ov-mosaic:not(.ov-mosaic--map) .ovm--wide { min-height: 150px; }

  /* The number is the content of these tiles, so it should not shrink with the
     tile. The caption underneath is the label, and stays quiet. */
  .ov-mosaic:not(.ov-mosaic--map) .ovm > b {
    font-size: var(--t-h3);
    line-height: 1;
    letter-spacing: -.03em;
  }
  .ov-mosaic:not(.ov-mosaic--map) .ovm--hero > b { font-size: var(--t-h2); }
  .ov-mosaic:not(.ov-mosaic--map) .ovm figcaption {
    font-size: var(--t-caption);
    line-height: 1.5;
    letter-spacing: .1em;
  }
  .ov-mosaic:not(.ov-mosaic--map) .ovm--wide figcaption,
  .ov-mosaic:not(.ov-mosaic--map) .ovm--hero figcaption { font-size: var(--t-caption); }

  /* The decorative diagrams are the reason several tiles were tall. At this
     size they read as texture rather than information — the caption is doing
     the work — so they are given a fixed short band instead of a share of the
     tile, and the tile stops being mostly empty. */
  .ov-mosaic:not(.ov-mosaic--map) .ovm-tally,
  .ov-mosaic:not(.ov-mosaic--map) .ovm-span,
  .ov-mosaic:not(.ov-mosaic--map) .ovm-orbit,
  .ov-mosaic:not(.ov-mosaic--map) .ovm-bars { max-height: 46px; overflow: hidden; }
}

/* ============================================================================
   PNC SHORT STORY — mobile editorial pass, 2026-07-30
   ============================================================================
   The desktop question wall and phone sequence are progress-driven scenes.
   Their original mobile fallback technically reflowed, but it did not edit:
   54 abstract fields became one 2,900px column, while five changing phone
   screens occupied one viewport and then disappeared before four of their
   explanations. These rules preserve the evidence while giving it a phone-
   native reading order.
   ========================================================================= */
@media (max-width: 900px) {
  /* Treat the five production screens like Apple's mobile highlight strips:
     every state is available, the next one peeks in, and horizontal movement
     is orthogonal to the page's ordinary vertical reading flow. */
  .case-pnc [data-depth-view="story"] .pace-stage { padding-inline: 0; }
  .case-pnc [data-depth-view="story"] .pace-phone {
    position: relative;
    display: flex;
    gap: 12px;
    width: 100%;
    aspect-ratio: auto;
    margin: 0;
    padding: 4px 6vw 18px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 6vw;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .case-pnc [data-depth-view="story"] .pace-phone::-webkit-scrollbar { display: none; }
  .case-pnc [data-depth-view="story"] .pace-phone img,
  .case-pnc [data-depth-view="story"] .pace-phone img:not(:first-of-type) {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: auto;
    height: clamp(300px, 52vh, 440px);
    aspect-ratio: 9 / 19;
    object-fit: cover;
    object-position: top;
    opacity: 1 !important;
    border: 1px solid rgba(245,242,235,.15);
    border-radius: 22px;
    background: #0C0C0E;
    box-shadow: 0 22px 54px rgba(0,0,0,.46);
    scroll-snap-align: start;
  }
  .case-pnc [data-depth-view="story"] .pace-steps { padding-inline: 6vw; }
}

@media (max-width: 620px) {
  /* Three compact columns retain the feeling of "everything" without asking
     the reader to cross three empty-feeling screens of decorative fields. */
  .case-pnc [data-depth-view="story"] .wall-field {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 9px;
    padding-inline: 6vw;
  }
  .case-pnc [data-depth-view="story"] .wall-q span { height: 3px; }
  .case-pnc [data-depth-view="story"] .wall-q i { height: 14px; margin-top: 5px; }

  /* Four short proof points are a comparison, not four separate chapters. */
  .case-pnc [data-depth-view="story"] .story-live-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 16px;
  }
  .case-pnc [data-depth-view="story"] .story-live-proof span { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .case-pnc [data-depth-view="story"] .pace-phone { scroll-behavior: auto; }
  .case-pnc [data-depth-view="story"] .pace-phone img { transition: none !important; }
}

/* ============================================================================
   v0.178 — reader-first routes, global motion control, humane About note
   ============================================================================ */

/* A deliberately quiet, site-wide control: glass enough to belong to Sumi,
   compact enough not to become another navigation destination. */
.motion-toggle {
  position: fixed;
  z-index: 86;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(245,242,235,.14);
  border-radius: 999px;
  color: rgba(245,242,235,.78);
  background: rgba(8,8,9,.68);
  box-shadow: inset 0 1px 0 rgba(245,242,235,.08), 0 10px 34px rgba(0,0,0,.26);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  font: 500 var(--t-label)/1 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}
.motion-toggle:hover { color: var(--ink); border-color: rgba(245,242,235,.24); background: rgba(18,18,20,.78); }
.gated .motion-toggle { z-index: 10010; }
.motion-toggle:active { transform: scale(.97); }
.motion-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.motion-toggle-icon { position: relative; display: inline-flex; gap: 3px; width: 12px; height: 12px; align-items: center; justify-content: center; }
.motion-toggle-icon i { display: block; width: 2px; height: 10px; border-radius: 2px; background: var(--shu-text); transition: transform .24s ease, opacity .18s ease; }
.motion-toggle[data-paused="true"] .motion-toggle-icon { display: block; }
.motion-toggle[data-paused="true"] .motion-toggle-icon i:first-child {
  position: absolute;
  inset: 1px auto auto 2px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--shu-text);
  border-radius: 0;
  background: transparent;
}
.motion-toggle[data-paused="true"] .motion-toggle-icon i:last-child { opacity: 0; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.motion-paused { scroll-behavior: auto; }

/* Personal without becoming scrapbook-like: one calm editorial interruption
   between the introduction and the work philosophy. */
/* Centred, matching the .about-premise / .about-thread pattern already used on
   this page — kicker and heading centred, copy in a measured column beneath.
   Was a two-column grid; the heading never had enough words to hold its own
   column, which is what left the gap and then the overlap. */
.about-human {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(64px,8vw,104px) 6vw;
  text-align: center;
}
/* Sized to match .about-premise and .career-heading rather than the 76px this
   used to run at, and `min(...,100%)` keeps it inside the section at any width
   — `ch` measures against the FONT, not the container, which is how an earlier
   two-column version ended up wider than its own column. Leading is 1.03, not
   the .98 it was: at .98 the descender in "Japanese" met the line beneath. */
.about-human .kicker { justify-content: center; }
.about-human h2 { max-width: min(17ch, 100%); margin: 22px auto 0; font-size: clamp(38px,4.4vw,62px); line-height: 1.03; letter-spacing: -.04em; text-wrap: balance; }
.about-human h2 em { font-family: "Instrument Serif", serif; font-weight: 400; color: var(--shu-text); }
.about-human-copy { max-width: 64ch; margin: clamp(30px,3.4vw,44px) auto 0; text-align: left; }
.about-human-copy > p { color: rgba(245,242,235,.74); font-size: var(--t-body); line-height: 1.78; }
/* The section runs to two paragraphs now, so they need separating. */
.about-human-copy > p + p { margin-top: 20px; }
/* Titles (Seven Samurai, Malazan) are set in the body italic. Instrument
   Serif italic is reserved for single accent words in headings — using it
   here would make a book title look like a display flourish. */
.about-human-copy p i { font-family: inherit; font-style: italic; color: rgba(245,242,235,.88); }
/* The notes row (Seattle / photography / reading / coffee) was removed 2026-07-31:
   it turned a short personal aside into a spec sheet. The section is heading +
   copy only now. */
/* fosistoria.com is the one link in this section — underlined so it reads as
   somewhere to go rather than emphasis. */
.about-human-copy p a {
  color: inherit; text-decoration: underline;
  text-decoration-color: rgba(245,242,235,.32); text-underline-offset: 4px;
  transition: color .25s ease, text-decoration-color .25s ease;
}
.about-human-copy p a:hover,
.about-human-copy p a:focus-visible { color: var(--shu-text); text-decoration-color: var(--shu-text); }

/* Anchor overview, section 07: the lower row has a mix of one- and two-line
   headings. Let each card's body follow its heading at the same measured gap
   instead of reserving a blank caption line for the row. */
.case-anchor #ov-signals .ovm--2 { display: flex; gap: 11px; }
.case-anchor #ov-signals .ovm--2 figcaption { min-height: 0; }

/* Final readability pass: raise only interface/meta copy that readers need to
   decode; tiny marks inside decorative diagrams keep their original scale. */
.career-stage-head,
.case-compass-grid article > span,
.constraint-map span,
.mobile-story span,
.talent-lead-viz article > span,
.talent-voice-label,
.fieldwork-model small,
.language-translator,
.language-entry strong,
.platform-node span,
.platform-resolve small,
.logic-path strong,
.sprint-node span,
.sprint-count small,
.delivery-core small,
.pnc-production-viz > strong,
.pnc-spec-viz > span,
.research-field-loop > div span { color: var(--shu-text); font-size: max(11px, .6875rem); }
.ds-opt span { font-size: var(--t-caption); }

@media (max-width: 760px) {
  nav.glassnav a:not(.mark) { font-size: var(--t-caption); }
  .about-human { padding: 64px 6vw; }
  .about-human h2 { max-width: min(13ch, 100%); }
  .about-human-copy { max-width: 100%; }
  .motion-toggle { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); min-height: 44px; padding-inline: 11px 12px; }
  .motion-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ov-mosaic:not(.ov-mosaic--map) .ovm figcaption,
  .ov-mosaic:not(.ov-mosaic--map) .ovm--wide figcaption,
  .ov-mosaic:not(.ov-mosaic--map) .ovm--hero figcaption { font-size: var(--t-caption); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-toggle, .motion-toggle-icon i { transition: none; }
}

/* ================================================================
   BUILT, NOT JUST DRAWN  (home)

   "Prototypes in code" became a written requirement in staff and
   principal product-design postings during 2025–26. The site had the
   strongest possible evidence for it — itself — and never claimed it.

   Reformatted twice on 2026-08-01 (owner). First from a copy + receipt
   list, which argued the point in a list when the page already makes it,
   to a centred column. Then to this: copy ranged left, a drawn layout on
   the right. The graphic earns the space the list did not, because it
   shows the thing being described rather than listing it. Sits above
   HOW I LEAD so the claim lands before the leadership panels.
   ================================================================ */
.builtwith { max-width: 1280px; margin: 0 auto; padding: 10vh 8vw 6vh; }
.builtwith-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 84px); align-items: center;
}
.builtwith .kicker { margin-bottom: 24px; }
.builtwith h2 {
  font-family: var(--display); font-weight: 500; letter-spacing: -.034em;
  font-size: var(--t-h2); line-height: 1.06; text-wrap: balance;
}
.builtwith h2 em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; color: var(--shu); }
.builtwith-copy p { margin-top: 22px; color: var(--gray); font-size: var(--t-small); line-height: 1.8; max-width: 52ch; }

/* --- the drawn layout --- */
.builtwith-stage { position: relative; width: 100%; }
.bw-draw { width: 100%; height: auto; display: block; overflow: visible; }
.bw-draw [class^="bw-"] { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bw-frame { stroke: rgba(245,242,235,.30); stroke-width: 1.4; }
.bw-rule  { stroke: rgba(245,242,235,.20); stroke-width: 1.2; }
.bw-rule--foot { stroke: rgba(245,242,235,.12); }
.bw-dot   { stroke: rgba(245,242,235,.26); stroke-width: 1.2; }
.bw-block { stroke: rgba(245,242,235,.24); stroke-width: 1.3; }
.bw-line  { stroke: rgba(245,242,235,.16); stroke-width: 1.2; }
.bw-hot   { stroke: var(--shu); stroke-width: 1.8; }

/* The caret is the only thing that keeps moving: the hand that drew the rest,
   still sitting at the end of the last line. Positioned in percentages so it
   tracks the SVG's viewBox as the stage scales. */
.bw-caret {
  position: absolute; left: 35.9%; top: 78.3%; width: 1.5px; height: 5.4%;
  background: var(--shu); opacity: 0; transform: translateY(-50%);
  animation: bwCaret 1.15s steps(1) infinite; animation-delay: 1.1s;
}
@keyframes bwCaret { 0%, 49% { opacity: .9; } 50%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .bw-caret { animation: none; opacity: .9; }
}
@media (max-width: 900px) {
  .builtwith { padding: 7vh 6vw 4vh; }
  .builtwith-grid { grid-template-columns: 1fr; gap: 36px; }
  .builtwith-copy p { max-width: none; }
  .builtwith-stage { max-width: 440px; }
}

/* ================================================================
   REFINEMENT LAYER — 2026-09-25
   Loads last on purpose. Type floors, chrome that stays out of the
   content's way, and the provenance line on product recordings.
   ================================================================ */

/* --- type floors: reading text never drops to caption size --- */
.overlay p, .overlay li, .overlay .sub { font-size: var(--t-small); line-height: 1.6; }
.overlay p.lede { font-size: var(--t-body); }
.ov-primer article p, .ovm p { font-size: var(--t-small); line-height: 1.6; }
.provenance-note {
  margin: 14px 0 0; max-width: 62ch;
  font-size: var(--t-caption); line-height: 1.55; color: var(--gray);
}
.ov-head .provenance-note { margin-inline: auto; text-align: center; }

/* --- anchors land below the nav, never under it --- */
[id] { scroll-margin-top: 104px; }

/* --- a quiet scrim under the nav: content fades out beneath it
       instead of colliding with the pill --- */
.nav-scrim {
  position: fixed; inset: 0 0 auto 0; height: 112px; z-index: 89;
  pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, rgba(8,8,9,.94) 0%, rgba(8,8,9,.78) 38%, rgba(8,8,9,0) 100%);
  transition: opacity .5s cubic-bezier(.2,.8,.2,1);
}
html.is-scrolled .nav-scrim { opacity: 1; }
.gated .nav-scrim { display: none; }

/* --- one floating object at the bottom, not two ---
   On case studies the motion control lives inside the depth dock.
   Elsewhere it is a compact 44px icon. Both tuck away while you
   scroll down and return when you scroll up or stop. */
.dd-track .motion-toggle {
  position: static; min-width: 34px; min-height: 34px; width: 34px; height: 34px;
  padding: 0; margin-left: 4px; justify-content: center; gap: 0;
  border: 0; border-left: 1px solid rgba(245,242,235,.12); border-radius: 0 999px 999px 0;
  background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.motion-toggle .motion-toggle-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
body > .motion-toggle { padding: 0; width: 44px; justify-content: center; gap: 0; }
body > .motion-toggle, .depth-dock {
  transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1), visibility .45s;
}
html.is-tucked body > .motion-toggle { opacity: 0; transform: translateY(14px); pointer-events: none; }
html.is-tucked .depth-dock.is-visible { opacity: 0; transform: translate(-50%, 18px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-scrim, body > .motion-toggle, .depth-dock { transition: none; }
}

/* --- the live hero (hero-valley.js) ---
   .hero-pin holds the scene and the copy. With the live hero the section
   grows to give the camera a journey, and the pin keeps the frame still
   while it travels. Without it, everything behaves exactly as before. */
.hero-pin { position: relative; height: 100%; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s cubic-bezier(.2,.8,.2,1); }
html.hero-3d .hero { height: 230vh; height: 230svh; overflow: visible; --hp: 0; }
html.hero-3d .hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
html.hero-3d-ready .hero-canvas { opacity: 1; }
html.hero-3d-ready .scene .heroVid { opacity: 0; transition: opacity 1.4s ease; }
html.hero-3d .hero-copy {
  opacity: clamp(0, calc(1 - var(--hp) * 3.4), 1);
  transform: translate3d(0, calc(var(--hp) * -90px), 0);
  will-change: opacity, transform;
}
html.hero-3d .scroll-hint { opacity: clamp(0, calc(1 - var(--hp) * 8), 1) !important; }
html.hero-3d .hero-pin::after {
  content: ""; position: absolute; inset: 0; z-index: 11; pointer-events: none;
  background: var(--canvas);
  opacity: clamp(0, calc((var(--hp) - .72) / .28), 1);
}
/* the copy arrives as the ink settles, not before it */
html.hero-3d .hero-copy > * { animation: heroSettle 1.6s cubic-bezier(.2,.8,.2,1) both; }
html.hero-3d .hero-copy > :nth-child(1) { animation-delay: 1.1s; }
html.hero-3d .hero-copy > :nth-child(2) { animation-delay: 1.35s; }
html.hero-3d .hero-copy > :nth-child(3) { animation-delay: 1.8s; }
html.hero-3d .hero-copy > :nth-child(4) { animation-delay: 1.95s; }
@keyframes heroSettle { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
/* the live hero is lighter than the film, so its wash can be too */
html.hero-3d .scene .wash {
  background:
    radial-gradient(80% 55% at 50% 42%, rgba(10,10,11,.56) 0%, rgba(10,10,11,.22) 48%, transparent 72%),
    linear-gradient(180deg, rgba(10,10,11,.12) 0%, transparent 18%, transparent 58%, rgba(10,10,11,.42) 82%, var(--canvas) 100%) !important;
}

/* --- signature scenes (scenes.js) ---
   One continuous scene per case study inside the "How I led" stage.
   The classic diagrams stay in the markup behind data-viz="classic". */
.moves-viz[data-viz="signature"] > .mv { display: none !important; }
.moves-viz[data-viz="signature"] {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(245,242,235,.028), transparent 70%),
    rgba(245,242,235,.012);
}
.sig-scene { position: absolute; inset: 0; display: grid; place-items: center; }
.sig-canvas { display: block; }
.sig-cap {
  position: absolute; left: 0; right: 0; bottom: 20px; margin: 0; padding: 0 28px;
  text-align: center; font-size: var(--t-caption); line-height: 1.45; color: var(--gray);
  opacity: 0; transform: translateY(6px);
  transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.sig-cap.is-in { opacity: 1; transform: none; }
.sig-evidence {
  position: absolute; inset: 9% 13% 16%; margin: 0;
  opacity: 0; transform: scale(.97);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1) .15s, transform 1.1s cubic-bezier(.2,.8,.2,1) .15s;
}
.sig-evidence.is-on { opacity: 1; transform: none; }
.sig-evidence.focus-shot { position: absolute; }
@media (max-width: 900px) {
  .moves-stage > .moves-viz[data-viz="signature"] {
    display: grid; order: -1; width: 100%; max-width: 520px; margin: 0 auto 8px;
    aspect-ratio: 1 / 1; max-height: none;
  }
}

/* --- focus shots: a screen on a dark, paper-grained mat that pushes in
       to the one region that matters, holds, and pulls back out.
       No annotations; the camera move does the pointing. --- */
.focus-shot {
  position: relative; overflow: hidden; border-radius: 14px;
  background: #0f0e10;
  box-shadow: inset 0 0 0 1px rgba(245,242,235,.07), 0 30px 80px -30px rgba(0,0,0,.6);
  padding: 12px;
}
.focus-shot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit;
  opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .96  0 0 0 0 .95  0 0 0 0 .92  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.focus-shot::after {
  content: ""; position: absolute; inset: 12px; pointer-events: none; z-index: 1; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(8,8,9,.35), inset 0 -40px 60px -30px rgba(8,8,9,.25);
}
.focus-shot img, .focus-shot video {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: 6px;
  filter: brightness(.9) contrast(1.03);
  transform-origin: calc(var(--fx, .5) * 100%) calc(var(--fy, .5) * 100%);
  will-change: transform;
}
.focus-shot.is-live img, .focus-shot.is-live video { animation: focusPush 11s cubic-bezier(.65,0,.35,1) infinite; }
.sig-evidence.focus-shot img { animation-play-state: paused; }
.sig-evidence.is-on.focus-shot img { animation: focusPush 11s cubic-bezier(.65,0,.35,1) .9s infinite; }
@keyframes focusPush {
  0%, 14% { transform: scale(1); }
  40%, 72% { transform: scale(var(--fs, 2)); }
  94%, 100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .focus-shot img, .focus-shot video, .sig-evidence.is-on.focus-shot img { animation: none !important; }
  .sig-cap, .sig-evidence { transition: none; }
}

/* --- depth switch as a morph (View Transitions) ---
   The case title and the reading-depth control carry across the swap;
   everything else dissolves with a short lift. */
::view-transition-old(root) { animation: vtOut .42s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: vtIn .62s cubic-bezier(.2,.8,.2,1) .06s both; }
::view-transition-group(case-title) { animation-duration: .66s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
::view-transition-group(case-switch) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
@keyframes vtOut { to { opacity: 0; transform: translateY(-10px) scale(.995); filter: blur(4px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
[data-depth-view]:not([hidden]) h1 { view-transition-name: case-title; }
[data-depth-view]:not([hidden]) .depth-switch { view-transition-name: case-switch; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* --- Talent: the network, live (talent-network.js) --- */
.track-network { height: 260vh; }
.track-network .lt-stage { justify-content: flex-end; }
.net-scene { position: absolute; inset: 0; }
.net-scene canvas { display: block; width: 100%; height: 100%; }
.net-scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--canvas) 0%, transparent 16%, transparent 58%, rgba(8,8,9,.86) 88%, var(--canvas) 100%);
}
.net-copy { position: relative; z-index: 2; width: min(1180px, 100% - 12vw); margin: 0 auto; padding-bottom: clamp(48px, 9vh, 96px); }
.net-copy h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.03em; max-width: 18ch; margin-top: 16px; text-wrap: balance; }
.net-copy h2 em { font-style: normal; color: var(--ink); }
.net-copy h2 em.net-hot { color: var(--shu-text); }
.net-lines { display: grid; }
.net-line { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.net-line.is-on { opacity: 1; transform: none; }
.track-network:not([data-beat]) .net-line[data-beat="0"] { opacity: 1; transform: none; }
.net-legend { display: flex; gap: 22px; margin-top: 22px; font-size: var(--t-caption); color: var(--gray); }
.net-legend span { display: inline-flex; align-items: center; gap: 9px; }
.net-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .8; }
.net-dot--hot { background: var(--shu); opacity: 1; box-shadow: 0 0 0 3px rgba(195,21,55,.18); }
@media (max-width: 900px) {
  .track-network { height: auto !important; }
  .track-network .lt-stage { position: relative; min-height: 92svh; justify-content: flex-end; }
  .net-copy { width: auto; padding-inline: 6vw; }
}
@media (prefers-reduced-motion: reduce) {
  .net-line { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .net-lines { display: block; }
  .net-line { opacity: 1; transform: none; }
  .net-line + .net-line { margin-top: 18px; }
}
@media (max-width: 700px) {
  html.hero-3d .scene .wash {
    background:
      radial-gradient(120% 55% at 50% 50%, rgba(10,10,11,.62) 0%, rgba(10,10,11,.3) 50%, transparent 78%),
      linear-gradient(180deg, rgba(10,10,11,.2) 0%, transparent 20%, transparent 60%, rgba(10,10,11,.5) 84%, var(--canvas) 100%) !important;
  }
}