/* v16 case-study template (all four cases). Load after tokens.css, chrome.css and mission.css.
   Page order: .cs-hero, .cs-sig (the one signature object, a dark .m-scene stage), .cs-body (contents + numbered sections), .cs-next, .m-contact. */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; }
/* width-matched fallback for Onest (measured: Onest runs about 5% wider than Arial), so the swap does not reflow the hero */
@font-face { font-family: "Onest Fallback"; src: local("Arial"), local("Helvetica"), local("Arimo"); size-adjust: 105%; }
:root { --sans: "Onest", "Onest Fallback", ui-sans-serif, system-ui, sans-serif; }

/* ---------- hero: crumbs, eyebrow chip, title, lede, flight manifest ---------- */
.cs-hero { position: relative; padding: 112px var(--gut) var(--sp5); overflow: hidden; }
.cs-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(48% 80% at 76% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%); }
.cs-hero > .wrap { position: relative; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sp3); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }
.cs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: var(--sp4) var(--sp8); align-items: end; }
.cs-hero .m-eyebrow { margin-bottom: var(--sp2); }
.h1 { margin: 0; font: 400 clamp(40px, 5vw, 74px)/1.02 var(--sans); letter-spacing: -.045em; text-wrap: balance; view-transition-name: case-title; }
.lede { margin: var(--sp3) 0 0; max-width: 60ch; font-size: var(--t-lead); line-height: 1.62; color: var(--ink-2); font-weight: 300; }
.manifest { margin: 0; padding: 6px 20px 10px; border-radius: var(--r-lg); view-transition-name: case-meta; }
.manifest div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); }
.manifest div:first-child { border-top: 0; }
.manifest dt { font: 500 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.manifest dd { margin: 0; font-size: 14.5px; line-height: 1.4; }
.cs-note { display: flex; align-items: center; gap: 10px; margin: var(--sp4) 0 0; padding: 11px 16px; max-width: 780px; border-radius: var(--r-md); border: 1px dashed var(--line-2); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.cs-note svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-width: 1.5; }

/* ---------- signature stage: one dark viewport, stacked by default, pinned on desktop (kit pin) ---------- */
.cs-sig { position: relative; padding: 0 var(--gut) var(--sp8); }
.cs-stage { position: relative; max-width: var(--maxw); margin: 0 auto; border-radius: var(--r-xl); border: 1px solid var(--line); overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 70% at 62% 40%, #0c1530 0%, #060914 55%, #03050c 100%); }
:root[data-theme="light"] .cs-stage { border-color: rgba(11, 13, 18, .14); box-shadow: 0 30px 60px -36px rgba(15, 20, 30, .45); }
.cs-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask: radial-gradient(75% 70% at 55% 45%, #000 15%, transparent 80%); mask: radial-gradient(75% 70% at 55% 45%, #000 15%, transparent 80%); }
.cs-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(1px 1px at 8% 18%, #b9c0cc, transparent), radial-gradient(1px 1px at 27% 66%, #8b94a4, transparent), radial-gradient(1.3px 1.3px at 46% 12%, #eef1f6, transparent), radial-gradient(1px 1px at 63% 48%, #8b94a4, transparent), radial-gradient(1px 1px at 79% 83%, #b9c0cc, transparent), radial-gradient(1.2px 1.2px at 91% 29%, #b9c0cc, transparent); background-size: 360px 280px; opacity: .35; }
.cs-draw { position: relative; height: var(--sig-h, 440px); }
.cs-svg, .cs-lead { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.cs-lead { pointer-events: none; }
.cs-head { position: relative; z-index: 2; padding: 22px 22px 0; max-width: 380px; }
.cs-head .m-eyebrow > span { border-color: rgba(159, 183, 255, .45); }
.cs-head .m-eyebrow b { font-weight: 500; color: var(--accent); }
.cs-head h3 { margin: 12px 0 0; font: 400 24px/1.12 var(--sans); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.cs-head p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); font-weight: 300; min-height: 3.1em; }
@container (max-width: 759.98px) { .cs-stage:not(.wide) .cs-head p { min-height: 4.65em; } }
.cs-hud { position: relative; z-index: 2; padding: 0 22px 20px; }
.cs-rail { margin-top: 14px; }
.cs-rail.m-rail > li { font-size: 10px; }
.cs-stage .m-readout { display: none; }
.cs-cards { list-style: none; margin: 0; padding: 0 22px 22px; display: grid; gap: 10px; position: relative; z-index: 3; }
.cs-cards .m-callout { transition: border-color .35s, opacity .35s; }
.cs-cards .m-callout.hot { border-color: color-mix(in srgb, var(--m-hl) 70%, transparent); }
.cs-cards .m-callout-k b { color: var(--m-hl); font-weight: 500; }
.cs-stage .ruler { position: absolute; z-index: 2; }
/* phones: a vertical rail picks the step; only the current step's card shows */
.cs-stage.narrow .cs-cards { grid-template-areas: 'c'; }
.cs-stage.narrow .cs-cards .m-callout { grid-area: c; align-self: start; }
.cs-stage.narrow .cs-cards .m-callout:not(.hot) { visibility: hidden; }
.cs-stage.narrow .cs-rail.m-rail--v { margin-top: 4px; gap: 14px; }
.cs-stage.narrow .cs-rail.m-rail--v > li { font-size: 10.5px; }

/* wide stage: driven by a container query on .cs-sig (same 760 px break JS uses), so the layout is right before case.js runs (no layout shift) */
@container (min-width: 760px) {
  .cs-stage:not(.narrow) { height: var(--stage-h, 680px); }
  .cs-stage:not(.narrow) .cs-draw { position: absolute; inset: 0; height: auto; }
  .cs-stage:not(.narrow) .cs-head { position: absolute; left: 26px; top: 24px; padding: 0; width: 360px; }
  .cs-stage:not(.narrow) .cs-hud { position: absolute; left: 26px; right: 250px; bottom: 22px; padding: 0; }
  .cs-stage:not(.narrow) .m-readout { display: grid; z-index: 2; }
  .cs-stage:not(.narrow) .cs-cards { position: absolute; inset: 0; padding: 0; display: block; pointer-events: none; }
  .cs-stage:not(.narrow) .cs-cards .m-callout { position: absolute; left: 0; top: 0; width: var(--cw, 250px); pointer-events: auto; opacity: var(--o, 0); will-change: transform, opacity; }
  .cs-stage:not(.narrow) .cs-cards .m-callout.off { opacity: 0; pointer-events: none; }
}
.m-pinned > .cs-stage.m-pin-stage { height: calc(100vh - var(--m-pin-top, 74px) - 14px); }

/* SVG schematic linework, shared by every case (dark scene values in both themes) */
.cs-svg text { font-family: var(--mono); fill: #8b94a4; font-size: 10px; letter-spacing: .08em; }
.cs-svg .t-name { font-family: var(--sans); font-size: 14px; letter-spacing: -.01em; fill: #eef1f6; font-weight: 500; }
.cs-svg .t-lab { fill: #b9c0cc; text-transform: uppercase; }
.cs-svg .t-hi { fill: var(--m-hl); }
.cs-svg .t-warm { fill: #e9b98c; }
.cs-svg .ln { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1.2; }
.cs-svg .ln-hi { fill: none; stroke: var(--m-hl); stroke-width: 1.5; }
.cs-svg .ln-dash { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 1; stroke-dasharray: 3 5; }
.cs-svg .node { fill: rgba(13, 17, 26, .82); stroke: rgba(255, 255, 255, .18); stroke-width: 1; }
.cs-svg .node.on { stroke: var(--m-hl); fill: rgba(22, 30, 54, .9); }
.cs-svg .glow { filter: drop-shadow(0 0 6px var(--m-hl)); }
.cs-svg .pulse { fill: var(--m-hl); filter: drop-shadow(0 0 5px var(--m-hl)); }
.cs-svg .warm { fill: #e9b98c; }

/* ---------- body: sticky contents + numbered sections ---------- */
.cs-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp8); padding: 0 var(--gut); }
.toc { position: sticky; top: 96px; align-self: start; padding-top: var(--sp8); }
.toc-k { margin: 0 0 var(--sp2); font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: flex; gap: 10px; padding: 8px 0 8px 14px; margin-left: -1px; border-left: 1px solid transparent; text-decoration: none; font-size: 13.5px; color: var(--ink-2); transition: color .25s, border-color .25s; }
.toc a span { font: 500 10.5px/1.7 var(--mono); color: var(--muted); }
.toc a:hover { color: var(--ink); }
.toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--accent); }
.toc a[aria-current="true"] span { color: var(--accent); }
.cs-main { min-width: 0; max-width: 960px; }
.cs-sec { padding: var(--sp10) 0 var(--sp4); border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.cs-sec:first-child { border-top: 0; padding-top: var(--sp8); }
.cs-main .h2 { max-width: 22ch; }
.cs-p { margin: var(--sp3) 0 0; max-width: 62ch; font-size: 18px; line-height: 1.66; color: var(--ink-2); font-weight: 300; }
.cs-p b { color: var(--ink); font-weight: 500; }
.pub { color: var(--ink); font-weight: 400; }

/* numbered steps (the work), in a row with a top rule */
.cs-steps { list-style: none; margin: var(--sp5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border-top: 1px solid var(--line-2); counter-reset: st; }
.cs-steps li { position: relative; padding: 22px 20px 4px 0; margin-right: 20px; border-right: 1px solid var(--line); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); font-weight: 300; }
.cs-steps li:last-child { border-right: 0; margin-right: 0; }
.cs-steps li::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 1px solid var(--accent); }
.cs-steps b { display: block; margin-bottom: 8px; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.cs-steps b span { color: var(--muted); margin-right: 8px; }

/* proof tiles: the stated results, never derived */
.cs-proof { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--sp2); margin-top: var(--sp5); }
.cs-proof > div { padding: 22px 22px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); }
:root[data-theme="light"] .cs-proof > div { box-shadow: var(--shadow); }
.cs-proof b { display: block; font: 300 clamp(34px, 3.4vw, 48px)/1 var(--sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.cs-proof span { display: block; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-2); font-weight: 300; }
.cs-proof .hl b { color: var(--accent); }
.cs-src { margin: var(--sp3) 0 0; font: 400 11px/1.55 var(--mono); color: var(--muted); }

/* what I learned: one takeaway, set large */
.cs-learn { margin: var(--sp4) 0 0; padding: 0 0 0 22px; border-left: 2px solid var(--accent); max-width: 40ch; font: 300 clamp(22px, 2.2vw, 30px)/1.35 var(--sans); letter-spacing: -.025em; color: var(--ink); text-wrap: pretty; }
.cs-learn + .cs-p { margin-top: var(--sp3); }

/* tools: chip + what it was for */
.cs-tools { list-style: none; margin: var(--sp4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cs-tools li { padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); font-weight: 300; }
:root[data-theme="light"] .cs-tools li { box-shadow: var(--shadow); }
.cs-tools b { display: block; margin-bottom: 4px; font: 500 12px/1.3 var(--mono); color: var(--ink); }

/* next case */
.cs-next { padding: var(--sp6) var(--gut) var(--sp8); }
.next { position: relative; display: grid; gap: 8px; padding: 28px 96px 28px 32px; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--bg-2); text-decoration: none; transition: border-color .3s, transform .5s var(--ease); }
.next:hover { border-color: var(--accent); transform: translateY(-3px); }
:root[data-theme="light"] .next { box-shadow: var(--shadow); }
.nx-k { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nx-t { font-size: clamp(26px, 3vw, 38px); letter-spacing: -.035em; line-height: 1.1; }
.nx-d { max-width: 56ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); font-weight: 300; }
.nx-a { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); font-size: 28px; color: var(--accent); transition: transform .5s var(--ease-out); }
.next:hover .nx-a { transform: translate(6px, -50%); }
.back { margin: var(--sp3) 0 0; font-size: 14px; }
.back a { color: var(--ink-2); text-decoration: none; }
.back a:hover { color: var(--ink); }

@media (max-width: 1180px) {
  .cs-body { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
  .cs-grid { grid-template-columns: 1fr; align-items: start; }
  .manifest { max-width: 560px; }
}
@media (max-width: 860px) {
  .cs-hero { padding: 96px 16px var(--sp4); }
  .cs-sig { padding: 0 12px var(--sp6); }
  .cs-body, .cs-next { padding-left: 16px; padding-right: 16px; }
  .cs-sec { padding: var(--sp8) 0 var(--sp3); }
  .cs-p { font-size: 16.5px; }
  .cs-steps, .cs-proof { grid-template-columns: 1fr; }
  .cs-proof { gap: 10px; }
  .cs-proof > div { display: flex; align-items: baseline; gap: 14px; padding: 16px 18px; }
  .cs-proof b { flex: none; font-size: 30px; }
  .cs-proof span { margin: 0; }
  .cs-steps { border-top: 0; }
  .cs-steps li { border-right: 0; margin-right: 0; padding: 16px 0 16px 22px; border-left: 1px solid var(--line-2); }
  .cs-steps li::before { left: -4px; top: 21px; }
  .manifest div { grid-template-columns: 80px minmax(0, 1fr); }
  .next { padding: 22px 56px 22px 22px; }
  .nx-a { right: 20px; }
}
@media (max-width: 600px) {
  .cs-rail.m-rail > li { font-size: 8.5px; letter-spacing: .03em; padding-right: 4px; }
}

/* No layout shift (Opus, Oct 7): reserve the wide stage height and the pinned scroll length in CSS before case.js runs.
   The container is the signature section's content box, which is the stage's width (stage max-width aside). */
.cs-sig { container-type: inline-size; }
@container (min-width: 760px) { .cs-stage:not(.narrow) { height: var(--stage-h, 680px); } }
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .cs-sig[data-pin] { height: var(--pin-len); }
  .cs-sig[data-pin] > .cs-stage { position: sticky; top: var(--m-pin-top, 74px); height: calc(100vh - var(--m-pin-top, 74px) - 14px); }
}