/* ==========================================================================
   QUEWIN HUMAN — "Ember Noir"
   Flair (craft, motion) and Focus (reading, evidence) in one stylesheet.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Matte darks */
  --noir: #0A0A0B;
  --graphite: #121214;
  --carbon: #1B1B1E;
  --slate: #26262A;
  --line: rgba(236, 233, 227, .10);
  --line-strong: rgba(236, 233, 227, .20);
  /* Text */
  --bone: #ECE9E3;
  --ash: #9A958D;
  --smoke: #5E5A55;
  /* The splash */
  --ember: #FF5A1F;
  --ember-soft: #FF8A5B;
  --ember-deep: #C2410C;
  --ember-glow: rgba(255, 90, 31, .35);
  /* Atmosphere (never for text) */
  --violet: #7B4DFF;
  --violet-glow: rgba(123, 77, 255, .28);
  --magenta: #FF2E7A;
  --slice: linear-gradient(115deg, #FF5A1F 0%, #FF2E7A 50%, #7B4DFF 100%);

  /* Brand-neutral defaults (overridden by [data-brand]) */
  --accent: var(--ember);
  --accent-ink: var(--ember-soft);
  --tint: var(--graphite);

  /* Type */
  --f-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-mega: clamp(88px, 19vw, 360px);
  --fs-display: clamp(44px, 7vw, 120px);
  --fs-h3: clamp(26px, 3vw, 44px);
  --fs-serif: clamp(32px, 4.5vw, 72px);
  --fs-body-l: clamp(18px, 1.3vw, 20px);

  /* Space */
  --gutter: clamp(16px, 4vw, 64px);
  --gap: clamp(12px, 1.6vw, 24px);
  --section: clamp(96px, 14vh, 192px);
  --maxw: 1440px;
  --nav-h: 72px;

  /* Shape */
  --r-chip: 4px;
  --r-btn: 10px;
  --r-card: 16px;
  --r-browser: 22px;
  --r-phone: 44px;
  --shadow-float: 0 30px 80px rgba(0, 0, 0, .55);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-hover: .25s;

  --grain: .05;
}

[data-brand="bmw"]      { --accent: #1C69D4; --accent-ink: #8FB4EA; --tint: #0E1726; }
[data-brand="mini"]     { --accent: #006583; --accent-ink: #6FC2D8; --tint: #0B1D22; }
[data-brand="motorrad"] { --accent: #FFFFFF; --accent-ink: #FFFFFF; --tint: #16171A; }
[data-brand="research"] { --accent: var(--ember); --accent-ink: var(--ember-soft); --tint: #151110; }
[data-brand="ai"]       { --accent: var(--violet); --accent-ink: #B9A2FF; --tint: #120F1C; }

/* Focus mode = the light, quiet version of the site (Quewin, 14 Oct): off-white "office light", charcoal text,
   blue as the one accent, no grain, no video. Flair keeps every token above. */
html.is-calm {
  color-scheme: light;
  --noir: #F4F2EE;
  --graphite: #ECE9E4;
  --carbon: #FFFFFF;
  --slate: #DCD8D1;
  --line: rgba(28, 28, 30, .10);
  --line-strong: rgba(28, 28, 30, .20);
  --bone: #1C1C1E;
  --ash: #5C5852;
  --smoke: #8C877F;
  --ember: #1957C7;
  --ember-soft: #1957C7;
  --ember-deep: #123F94;
  --ember-glow: rgba(25, 87, 199, .22);
  --violet: #5B3FD6;
  --violet-glow: rgba(91, 63, 214, .12);
  --slice: linear-gradient(115deg, #1957C7, #5B3FD6);
  --accent: var(--ember);
  --accent-ink: var(--ember);
  --tint: #E6E3DD;
  --shadow-float: 0 24px 60px rgba(28, 28, 30, .12);
  --grain: 0;
}
html.is-calm [data-brand="bmw"]      { --accent: #1C69D4; --accent-ink: #1C69D4; --tint: #E3EAF5; }
html.is-calm [data-brand="mini"]     { --accent: #006583; --accent-ink: #006583; --tint: #E0ECEF; }
html.is-calm [data-brand="motorrad"] { --accent: #1C1C1E; --accent-ink: #1C1C1E; --tint: #E8E6E2; }
html.is-calm [data-brand="research"] { --accent: var(--ember); --accent-ink: var(--ember); --tint: #ECE7E1; }
html.is-calm [data-brand="ai"]       { --accent: var(--violet); --accent-ink: var(--violet); --tint: #ECE8F6; }

/* Lenis 1.1.13 (inlined from dist/lenis.css to avoid a render-blocking request) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped, html.is-modal { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* the hidden attribute always wins over a component's display (it lost to display: grid on 20 Oct) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--noir); color-scheme: dark; }
html:not(.lenis) { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--noir);
  color: var(--bone);
  font: 400 17px/1.6 var(--f-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: italic; }
strong { font-weight: 600; }
::selection { background: var(--ember); color: var(--noir); }

:focus-visible { outline: 2px solid var(--ember-soft); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 12px 18px; background: var(--ember); color: var(--noir); font-weight: 600; border-radius: var(--r-btn); text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 16px; }

.mono { font-family: var(--f-mono); font-size: 12.5px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; }
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.eyebrow { color: var(--ash); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 10px; height: 6px; background: var(--accent); transform: skewX(-30deg); }
[data-mode="flair"] .eyebrow::before, .eyebrow.ember::before { background: var(--ember); }
.h2 { font-size: var(--fs-display); font-weight: 700; line-height: .92; letter-spacing: -.035em; text-wrap: balance; }
.h2 .serif, .h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--ember); }
.lead { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.45; color: var(--bone); max-width: 36ch; text-wrap: pretty; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(32px, 5vw, 64px); }
.section-head__aside { max-width: 44ch; color: var(--ash); }

/* Grain */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: var(--grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); transition: opacity .6s; }
body[data-mode="focus"] { --grain: 0; }
html.is-calm body { --grain: .025; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .grain { animation: grain 1.2s steps(6) infinite; }
}
@keyframes grain { 0%,100% { transform: translate(0,0) } 20% { transform: translate(-3%,2%) } 40% { transform: translate(2%,-3%) } 60% { transform: translate(-2%,-1%) } 80% { transform: translate(3%,3%) } }

/* ---------- 3. Buttons, chips ---------- */
.btn { --h: 52px; position: relative; display: inline-flex; align-items: center; gap: 12px; height: var(--h); padding: 0 24px; border-radius: var(--r-btn); font: 500 16px/1 var(--f-sans); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; overflow: hidden; isolation: isolate; transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover), box-shadow var(--t-hover); }
.btn--sm { --h: 44px; padding: 0 18px; font-size: 15px; }
.btn--primary { background: var(--ember); color: var(--noir); }
.btn--primary:hover { box-shadow: 0 0 60px var(--ember-glow); }
.btn--primary:active { background: var(--ember-deep); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--bone); }
.btn--ghost:hover { border-color: rgba(236,233,227,.5); }
.btn--pill { --h: 40px; padding: 0 18px; border-radius: 999px; background: var(--ember); color: var(--noir); font-size: 14px; }
/* Dimension-slice sheen on hover */
.btn::before { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-30deg); z-index: -1; transition: left .6s var(--ease-out); }
.btn:hover::before { left: 130%; }
.btn--ghost::before { background: linear-gradient(90deg, transparent, rgba(255,90,31,.25), transparent); }
/* Label stays still on hover (Quewin, 13 Oct: the text roll read as a bug); the magnetic pull moves the whole button */
.btn__roll { position: relative; display: inline-block; line-height: 1.2; }
.btn__meta { font-size: 11px; opacity: .7; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font: 400 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-chip); color: var(--bone); }
.chips--ember li { border-color: rgba(255,90,31,.35); }
.chips--accent li { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--bone); }

.chip-btn, .tool-btn, .seg button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); font: 500 14px/1 var(--f-sans); color: var(--bone); background: transparent; transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.chip-btn:hover, .tool-btn:hover, .seg button:hover { border-color: rgba(236,233,227,.45); }
.chip-btn[aria-pressed="true"], .seg button[aria-pressed="true"], .tool-btn[aria-pressed="true"] { background: var(--bone); color: var(--noir); border-color: var(--bone); }
.tool-btn--close { border-color: var(--line-strong); }
.tool-btn .mono { font-size: 10.5px; color: var(--ash); }
.tool-btn[aria-pressed="true"] .mono { color: var(--smoke); }
.seg { display: inline-flex; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; margin-bottom: 20px; }
.seg button { min-height: 38px; border: 0; }

/* ---------- 4. Preloader ---------- */
.preloader { display: none; }
html.js .preloader { animation: preloader-failsafe .5s 5s forwards; position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--noir); color: var(--bone); }
html.js.is-loaded .preloader { pointer-events: none; }
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; } }
.preloader__mark { width: 64px; color: var(--ember); }
.preloader__name { font: 800 clamp(28px, 4vw, 48px)/1 var(--f-sans); letter-spacing: -.04em; text-transform: uppercase; }
.preloader__count { color: var(--ash); font-variant-numeric: tabular-nums; }
.preloader__bar { width: min(240px, 60vw); height: 1px; background: var(--line); overflow: hidden; }
.preloader__bar span { display: block; height: 100%; width: 100%; background: var(--ember); transform: scaleX(0); transform-origin: left; }

/* ---------- 5. Nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-inline: var(--gutter); background: linear-gradient(to bottom, rgba(10,10,11,.82), rgba(10,10,11,0)); transition: transform .45s var(--ease-out), background .4s; }
.nav.is-solid { background: rgba(10,10,11,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav__brand { font: 800 15px/1 var(--f-sans); letter-spacing: -.01em; text-transform: uppercase; text-decoration: none; justify-self: start; padding: 10px 0; }
.nav__links { justify-self: end; display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.nav__links > a:not(.btn) { font-size: 15px; text-decoration: none; color: var(--ash); transition: color var(--t-hover); padding: 10px 0; }
.nav__links > a:not(.btn):hover { color: var(--bone); }
.nav__links > a { white-space: nowrap; }
.nav__cv-icon { display: inline-block; margin-left: 6px; transition: transform var(--t-hover); }
@media (max-width: 1023px) { .nav__cv-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* tablet: "CV ↓" (the full label stays for screen readers) */
.nav__cv:hover .nav__cv-icon { transform: translateY(2px); }
.nav__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: transparent; }
.nav__progress span { display: block; height: 100%; background: var(--ember); transform-origin: left; transform: scaleX(0); }

.mode-chip { height: 32px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); display: inline-flex; align-items: center; gap: 10px; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; background: rgba(10,10,11,.5); transition: border-color var(--t-hover), background var(--t-hover); position: relative; }
.mode-chip::after { content: ""; position: absolute; inset: -8px 0; } /* 44px tap target */
.mode-chip:hover { border-color: rgba(236,233,227,.45); }
.mode-chip__dot { width: 10px; height: 7px; background: var(--ember); transform: skewX(-30deg); box-shadow: 0 0 12px var(--ember-glow); transition: background .4s, box-shadow .4s; }
body[data-mode="focus"] .mode-chip__dot, .mode-chip[aria-pressed="true"] .mode-chip__dot { background: var(--bone); box-shadow: none; }
.mode-chip[aria-pressed="true"] { border-color: var(--bone); }
.mode-toast { position: fixed; left: 50%; top: calc(var(--nav-h) + 8px); z-index: 99; transform: translate(-50%, -8px); max-width: min(560px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 12px; background: var(--carbon); border: 1px solid var(--line); color: var(--bone); font-size: 15px; text-align: center; opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s var(--ease-out); }
.mode-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 767px) {
  .nav { grid-template-columns: auto 1fr auto; gap: 10px; --nav-h: 64px; }
  .nav__brand { font-size: 13px; }
  .mode-chip { justify-self: end; }
  .nav__links > a:not(.btn) { display: none; }
  .btn--pill { --h: 36px; padding: 0 14px; font-size: 13px; }
}

/* ---------- 6. Cursor ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.js.has-cursor .cursor { display: block; position: fixed; inset: 0; z-index: 150; pointer-events: none; }
  html.js.has-cursor body, html.js.has-cursor a, html.js.has-cursor button { cursor: none; }
  /* dialogs render in the top layer, above the custom cursor, so they get the native one */
  html.js.has-cursor dialog[open] { cursor: auto; }
  html.js.has-cursor dialog[open] :is(a, button, [role="button"]) { cursor: pointer; }
}
.cursor__dot, .cursor__ring { position: fixed; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cursor__dot { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--ember); }
.cursor__ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid rgba(255,90,31,.6); display: grid; place-items: center; transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background .3s, opacity .3s; }
.cursor.is-label .cursor__ring { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--ember); border-color: var(--ember); }
.cursor__label { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--noir); opacity: 0; transition: opacity .2s; }
.cursor.is-label .cursor__label { opacity: 1; }
.cursor__dot { transition: background .2s; }
.cursor.is-on-accent .cursor__dot { background: #FFFFFF; }
.cursor.is-on-accent .cursor__ring { border-color: rgba(255,255,255,.85); }
body[data-mode="focus"] .cursor__ring { opacity: 0; }
body[data-mode="focus"] .cursor__dot { background: var(--bone); width: 8px; height: 8px; margin: -4px 0 0 -4px; }

/* ---------- 7. Hero ---------- */
.hero { position: relative; background: var(--noir); }
html.js.motion .hero { height: 300vh; }
@media (max-width: 767px) { html.js.motion .hero { height: 220vh; } }
.hero__pin { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
html.js.motion .hero__pin { position: sticky; top: 0; }
.seq { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__seq { opacity: 0; }
html.js.motion .hero__seq { opacity: 1; }
.hero__label, .hero__hint { position: absolute; z-index: 5; color: var(--ash); opacity: 0; }
html.js.motion .hero__label, html.js.motion .hero__hint { opacity: 1; }
.hero__label { top: calc(var(--nav-h) + 12px); left: var(--gutter); }
/* The one instruction on the first screen: in the display type, raised off the bottom edge, and always moving a little,
   so it is read, and it says the page is a journey you scroll through (Quewin, 29 Oct) */
.hero__hint { left: 0; right: 0; bottom: clamp(72px, 15svh, 170px); width: max-content; max-width: calc(100% - 2 * var(--gutter)); margin-inline: auto; display: grid; justify-items: center; gap: 10px; text-align: center; color: var(--bone); pointer-events: none; }
.hero__hint-main { margin: 0; font: 600 clamp(24px, 2.8vw, 44px)/1.1 var(--f-sans); letter-spacing: -.025em; text-wrap: balance;
  background: linear-gradient(100deg, var(--bone) 40%, var(--ember-soft) 50%, var(--bone) 60%) 100% 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__hint-main em { font: italic 400 1.14em/1 var(--f-serif); letter-spacing: -.005em; color: var(--ember); }
.hero__hint-sub { margin: 0; font-size: clamp(11px, .85vw, 13px); letter-spacing: .16em; color: var(--ash); }
.hero__hint-arrow { display: grid; justify-items: center; margin-top: 6px; }
.hero__hint-arrow i { width: 13px; height: 13px; margin-top: -5px; border-right: 2px solid var(--ember); border-bottom: 2px solid var(--ember); transform: rotate(45deg); opacity: .15; }
html.js.motion .hero__hint { animation: hint-bob 2.8s ease-in-out infinite; }
html.js.motion .hero__hint-main { animation: hint-shine 4.2s ease-in-out 1.6s infinite; }
html.js.motion .hero__hint-arrow i { animation: hint-chevron 1.5s ease-in-out infinite; }
.hero__hint-arrow i:nth-child(2) { animation-delay: .18s !important; }
.hero__hint-arrow i:nth-child(3) { animation-delay: .36s !important; }
/* it rises in, line by line, once the preloader has gone */
html.js.motion .hero__hint > * { opacity: 0; translate: 0 18px; }
html.js.motion.is-loaded .hero__hint > * { opacity: 1; translate: 0 0; transition: opacity .9s var(--ease-out), translate .9s var(--ease-out); }
html.js.motion.is-loaded .hero__hint > :nth-child(1) { transition-delay: .55s; }
html.js.motion.is-loaded .hero__hint > :nth-child(2) { transition-delay: .7s; }
html.js.motion.is-loaded .hero__hint > :nth-child(3) { transition-delay: .85s; }
@keyframes hint-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 7px; } }
@keyframes hint-shine { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0% 0; } } /* 100 % → 0 %: the 3×-wide gradient always covers the line */
@keyframes hint-chevron { 0%, 100% { opacity: .15; } 35% { opacity: 1; } 70% { opacity: .15; } }
/* while the clip and the build play, a small pill says there is more, and how far the page has come */
.hero__keep { position: absolute; z-index: 5; left: 0; right: 0; bottom: 28px; width: max-content; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-radius: 999px; background: rgba(10,10,11,.6); border: 1px solid var(--line-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 11px; letter-spacing: .14em; color: var(--bone); opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.motion) .hero__keep { display: none; }
.hero__keep::after { content: "↓"; color: var(--ember); }
html.js.motion .hero__keep::after { animation: hint-bob 1.4s ease-in-out infinite; }
.hero__keep-bar { width: 72px; height: 2px; border-radius: 2px; background: rgba(236,233,227,.18); overflow: hidden; }
.hero__keep-bar > span { display: block; height: 100%; background: var(--ember); transform-origin: 0 50%; transform: scaleX(0); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 0 var(--ember-glow); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,90,31,.5) } 100% { box-shadow: 0 0 0 14px rgba(255,90,31,0) } }

.hero__screen { position: absolute; inset: 0; z-index: 2; overflow: hidden; }
.hero__ui { position: absolute; inset: 0; width: 100vw; height: 100%; overflow: hidden; background: var(--noir); transform-origin: 0 0; }
/* no will-change on .hero__ui: Chrome would keep its raster scale from the small laptop state */

.hero__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background:
  radial-gradient(38% 46% at 50% 62%, rgba(255,90,31,.36), rgba(255,90,31,0) 70%),
  radial-gradient(40% 34% at 50% 26%, var(--violet-glow), rgba(123,77,255,0) 72%); }
.hero__slices { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.slice { position: absolute; left: 50%; top: 50%; height: 3.6vw; min-height: 22px; background: var(--slice); transform: translate(-50%, -50%) rotate(-30deg) skewX(-30deg); translate: var(--slide-x, 0) var(--slide-y, 0); opacity: .9; border-radius: 2px; }
.slice--1 { width: 54vw; margin-top: -14svh; margin-left: -2vw; }
.slice--2 { width: 34vw; height: 1.4vw; min-height: 10px; margin-top: -2svh; margin-left: 9vw; opacity: .75; }
.slice--3 { width: 22vw; height: .7vw; min-height: 6px; margin-top: -25svh; margin-left: -12vw; opacity: .6; }
.sparkle { position: absolute; width: 18px; fill: var(--bone); opacity: .85; }
.sparkle--1 { left: 31%; top: 30%; width: 22px; }
.sparkle--2 { right: 33%; top: 22%; width: 14px; fill: var(--ember-soft); }
.sparkle--3 { right: 28%; top: 46%; width: 10px; }
.dotgrid { position: absolute; right: calc(var(--gutter) + 8vw); top: 52%; width: 120px; height: 80px; background-image: radial-gradient(rgba(236,233,227,.35) 1.2px, transparent 1.3px); background-size: 12px 12px; opacity: .6; }

.hero__bar { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gutter); opacity: 0; }
html.js.motion .hero__bar { opacity: 1; }
html.js.motion.hero-done .hero__bar { opacity: 0; transition: opacity .4s; }
.hero__bar-brand { font: 800 15px/1 var(--f-sans); text-transform: uppercase; }
.hero__bar-links { display: flex; gap: 22px; align-items: center; }
.hero__bar-links i { width: 42px; height: 6px; border-radius: 3px; background: var(--slate); }
.hero__bar-links b { width: 96px; height: 34px; border-radius: 999px; background: var(--ember); }

.hero__steps { position: absolute; z-index: 4; top: calc(var(--nav-h) + 8px); left: 0; right: 0; width: max-content; margin-inline: auto; display: flex; gap: 6px; font-size: 10px; color: var(--ash); }
.hero__steps li { min-width: 72px; padding-top: 8px; border-top: 2px solid var(--slate); }
.hero__steps li.is-done { border-color: var(--bone); }
.hero__steps li.is-done::before { content: "✓ "; color: var(--ember-soft); }
.hero__steps li.is-current { border-color: var(--ember); color: var(--bone); }

.hero__name { --fs-mega: clamp(80px, 15.5vw, 300px); position: absolute; left: 0; right: 0; bottom: 6svh; margin: 0; font: 800 var(--fs-mega)/.82 var(--f-sans); letter-spacing: -.05em; text-transform: uppercase; color: var(--bone); pointer-events: none; }
.hero__line { display: block; position: relative; white-space: nowrap; }
.hero__line--front { z-index: 3; margin-left: -1.2vw; }
/* "Quewin" ghosts out from about "WIN" so the portrait shows through (the surname already sits behind it) */
@media (min-width: 900px) {
  .hero__line--front { width: fit-content; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 48%, rgba(0,0,0,.52) 68%, rgba(0,0,0,.56) 100%); mask-image: linear-gradient(90deg, #000 0%, #000 48%, rgba(0,0,0,.52) 68%, rgba(0,0,0,.56) 100%); } /* never below ~50 %: the N must stay readable */
}
/* Intro over the opening frame of Scene 1 (an empty wall until the laptop slides in) */
.hero__intro { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 0 var(--gutter) 12svh; text-align: center; pointer-events: none; }
.hero__intro-mark { width: clamp(64px, 6.5vw, 104px); height: auto; color: var(--ember); margin-bottom: 6px; filter: drop-shadow(0 0 32px rgba(255,90,31,.35)); }
.hero__intro-kicker { color: var(--ash); }
.hero__intro-title { margin: 0; font: 700 clamp(40px, 6.4vw, 104px)/.98 var(--f-sans); letter-spacing: -.035em; color: var(--bone); text-wrap: balance; }
.hero__intro-title em { font: italic 400 1.06em/1 var(--f-serif); letter-spacing: -.01em; color: var(--ember); }
html:not(.motion) .hero__intro { display: none; }
.hero__line--back { z-index: 1; text-align: right; margin-right: -1.6vw; }
/* the H of HUMAN starts exactly under the N of QUEWIN: 3.089em into the word (measured), at any desktop width */
@media (min-width: 900px) { .hero__line--back { text-align: left; margin-right: 0; margin-left: calc(-1.2vw + 3.089em); } }
.hero__portrait { --ph: min(88svh, 64vw); position: absolute; z-index: 2; left: calc(50% - var(--ph) * .375); top: calc(var(--nav-h) + 1svh); height: var(--ph); width: calc(var(--ph) * .75); margin: 0; pointer-events: none;
  /* bottom + right-edge fades are baked into the image alpha (_build/process-photos.mjs) */ }
.hero__portrait img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: contrast(1.06); }
.hero__roles { position: absolute; z-index: 4; left: var(--gutter); top: 26svh; display: grid; gap: 10px; color: var(--ash); }
.hero__roles li::before { content: "— "; color: var(--ember); }
.hero__pitch { position: absolute; z-index: 4; right: var(--gutter); top: 22svh; width: min(400px, 30vw); display: grid; gap: 28px; }
.hero__tagline { font: 400 clamp(30px, 2.9vw, 46px)/1.05 var(--f-serif); color: var(--bone); letter-spacing: -.01em; }
.hero__tagline em { color: var(--ember); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__meta { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: 18px; display: flex; justify-content: space-between; gap: 16px; color: var(--ash); font-size: 11px; }
.hero__cursor { position: absolute; z-index: 6; width: 26px; left: 0; top: 0; fill: var(--ember); stroke: var(--noir); stroke-width: 1; opacity: 0; pointer-events: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.hero__notes { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.hero__notes li { position: absolute; left: 0; top: 0; padding: 4px 8px; font-size: 10px; color: var(--ember-soft); background: rgba(10,10,11,.85); border: 1px solid rgba(255,90,31,.4); border-radius: 4px; opacity: 0; white-space: nowrap; }
.is-selected { outline: 1px solid var(--ember) !important; outline-offset: 4px; }

/* Portrait-orientation hero (phones, tablets) */
@media (max-aspect-ratio: 1/1), (max-width: 899px) {
  .hero__name { --fs-mega: clamp(64px, 22vw, 200px); top: calc(var(--nav-h) + 9svh); bottom: auto; display: block; }
  .hero__line--front { text-align: center; margin: 0; }
  .hero__line--back { position: absolute; left: 0; right: 0; top: 47svh; text-align: center; margin: 0; }
  .hero__portrait { --ph: min(58svh, 120vw); bottom: auto; top: calc(var(--nav-h) + 13svh); }
  .hero__roles { top: calc(var(--nav-h) + 2svh); left: 0; right: 0; padding: 0 var(--gutter); display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; font-size: 10px; }
  .hero__roles li::before { content: ""; }
  .hero__roles li + li::before { content: "· "; color: var(--ember); }
  .hero__pitch { left: var(--gutter); right: var(--gutter); top: auto; bottom: calc(52px + 2svh); width: auto; gap: 18px; text-align: center; justify-items: center; }
  .hero__tagline { font-size: clamp(28px, 7.4vw, 44px); }
  .hero__ctas { justify-content: center; }
  .hero__meta { justify-content: center; bottom: 14px; font-size: 10px; }
  .hero__meta > span:last-child { display: none; }
  .hero__steps { display: none; }
  .slice--1 { width: 110vw; height: 7vw; margin-top: -12svh; }
  .slice--2 { width: 70vw; height: 3vw; margin-left: 14vw; margin-top: -2svh; }
  .slice--3 { width: 40vw; height: 1.6vw; margin-top: -22svh; margin-left: -22vw; }
  .sparkle--1 { left: 12%; top: 26%; } .sparkle--2 { right: 12%; top: 18%; } .sparkle--3 { right: 10%; top: 42%; }
  .dotgrid { right: 6vw; top: 36%; width: 72px; height: 60px; }
  .hero__glow { background: radial-gradient(60% 34% at 50% 44%, rgba(255,90,31,.34), rgba(255,90,31,0) 70%), radial-gradient(60% 24% at 50% 22%, var(--violet-glow), rgba(123,77,255,0) 72%); }
}
/* phones: the role on its own row, the employer and the creative side below it */
@media (max-width: 599px) {
  .hero__roles { column-gap: 10px; letter-spacing: .06em; }
  .hero__roles li:first-child { flex-basis: 100%; text-align: center; }
  .hero__roles li:nth-child(2)::before { content: ""; }
}
@media (max-width: 359px) { .hero__roles { column-gap: 8px; font-size: 9px; letter-spacing: .04em; } }
@media (max-width: 767px) {
  .hero__meta > span:first-child { display: none; }
  .hero__ctas .btn { --h: 48px; padding: 0 18px; font-size: 15px; }
  .hero__hint { bottom: 12svh; gap: 8px; }
  .hero__hint-sub { font-size: 10px; letter-spacing: .12em; }
  .hero__keep { bottom: 22px; }
}
@media (max-height: 640px) and (max-width: 767px) {
  .hero__tagline { display: none; }
}

/* ---------- 8. Manifesto ---------- */
.manifesto { position: relative; background: var(--noir); }
html.js.motion .manifesto { height: 150vh; }
.manifesto__pin { min-height: 100svh; display: grid; align-content: center; gap: 40px; padding: var(--section) var(--gutter); max-width: var(--maxw); margin-inline: auto; }
html.js.motion .manifesto__pin { position: sticky; top: 0; height: 100svh; padding-block: 0; }
.manifesto__text { font-size: clamp(40px, 6.4vw, 108px); font-weight: 700; line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.manifesto__text > span { display: block; }
.manifesto__l2 { margin-top: .12em; }
.craft { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--ember); }
html.js.motion .manifesto__text .w { color: #77726B; } /* pre-fill state, still ≥ 3:1 for large text */
html.js.motion .manifesto .craft { background: linear-gradient(90deg, var(--ember) 0 50%, #77726B 50% 100%); background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.manifesto__copy { max-width: 60ch; color: var(--ash); font-size: var(--fs-body-l); }
.manifesto__sig { color: var(--bone); }

/* ---------- 9. Stats ---------- */
.stats { background: var(--graphite); border-block: 1px solid var(--line); overflow: hidden; }
.stats__viewport { overflow: hidden; }
.stats__track { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { display: grid; gap: 6px; padding: clamp(28px, 4vw, 48px) var(--gutter); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat__num { font: 800 clamp(48px, 6vw, 96px)/1 var(--f-sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat__num .last { color: var(--ember); }
.stat__label { color: var(--ash); font-size: 15px; max-width: 24ch; }
@media (min-width: 900px) {
  html.js.motion .stats__track { display: flex; width: max-content; }
  html.js.motion .stat { border-bottom: 0; min-width: 380px; padding-block: 48px; }
}
@media (max-width: 899px) { .stats__track { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .stat { padding-inline: 14px; } .stat__num { font-size: 44px; } }

/* ---------- 10. Pillars ---------- */
.pillars { background: var(--noir); }
.pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: clamp(40px, 6vw, 80px); perspective: 1400px; }
.pillar { position: relative; min-height: 520px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: linear-gradient(180deg, var(--carbon), var(--graphite)); display: flex; flex-direction: column; gap: 10px; transition: transform .45s var(--ease-out), border-color .3s, box-shadow .45s; transform-style: preserve-3d; }
.pillar { transition: translate .45s var(--ease-out), border-color .3s, box-shadow .45s; }
.pillar:hover { translate: 0 -8px; border-color: var(--line-strong); box-shadow: var(--shadow-float); }
.pillar__no { color: var(--ash); transition: color .3s; margin-top: auto; }
.pillar:hover .pillar__no { color: var(--ember); }
.pillar__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.pillar__lead { font: 400 24px/1.15 var(--f-serif); font-style: italic; color: var(--bone); }
.pillar__text { color: var(--ash); font-size: 15.5px; line-height: 1.6; }
.pillar__art { height: 170px; border-radius: 12px; background: var(--noir); border: 1px solid var(--line); position: relative; overflow: hidden; margin-bottom: 18px; }
/* eye-tracking dot */
.mini-screen { position: absolute; inset: 22px 34px; border-radius: 6px; border: 1px solid var(--line-strong); padding: 14px; display: grid; gap: 8px; align-content: start; }
.mini-screen i { height: 6px; border-radius: 3px; background: var(--slate); }
.mini-screen i:nth-child(1) { width: 60%; } .mini-screen i:nth-child(2) { width: 85%; } .mini-screen i:nth-child(3) { width: 40%; height: 18px; border-radius: 4px; background: rgba(255,90,31,.35); }
.gaze { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: rgba(255,90,31,.55); box-shadow: 0 0 24px var(--ember); left: 20%; top: 30%; }
.pillar:hover .gaze { animation: gaze 2.4s var(--ease-io) infinite; }
@keyframes gaze { 0% { left: 18%; top: 20% } 25% { left: 66%; top: 28% } 50% { left: 30%; top: 52% } 75% { left: 22%; top: 72% } 100% { left: 18%; top: 20% } }
/* wireframe → component */
.wire, .comp { position: absolute; left: 50%; top: 50%; width: 170px; height: 92px; margin: -46px 0 0 -85px; border-radius: 10px; display: grid; gap: 8px; padding: 14px; align-content: start; transition: opacity .5s, transform .6s var(--ease-out); }
.wire { border: 1px dashed var(--ash); }
.wire i, .comp i { height: 6px; border-radius: 3px; } .wire i { background: var(--smoke); } .wire i:nth-child(2) { width: 70%; }
.wire b { height: 20px; width: 60%; border: 1px dashed var(--ash); border-radius: 6px; }
.comp { background: var(--carbon); border: 1px solid var(--line-strong); opacity: 0; transform: translateY(14px) scale(.96); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.comp i { background: var(--bone); } .comp i:nth-child(2) { width: 70%; background: var(--ash); }
.comp b { height: 20px; width: 60%; background: var(--ember); border-radius: 6px; }
.pillar:hover .wire { opacity: 0; transform: scale(.94); }
.pillar:hover .comp { opacity: 1; transform: none; }
/* develop */
.frame { position: absolute; inset: 24px 40px; border-radius: 8px; border: 1px solid var(--line-strong); overflow: hidden; background: repeating-linear-gradient(45deg, var(--slate) 0 10px, var(--carbon) 10px 20px); }
.still { position: absolute; inset: 0; background: radial-gradient(60% 70% at 70% 40%, rgba(255,90,31,.9), rgba(255,90,31,0) 60%), radial-gradient(50% 60% at 25% 75%, rgba(123,77,255,.6), rgba(123,77,255,0) 70%), linear-gradient(180deg, #1a1412, #0a0a0b); opacity: 0; filter: blur(14px); transition: opacity 1.2s var(--ease-out), filter 1.4s var(--ease-out); }
.pillar:hover .still { opacity: 1; filter: blur(0); }
@media (max-width: 899px) { .pillars__grid { grid-template-columns: 1fr; } .pillar { min-height: 0; } }

/* ---------- 11. About ---------- */
.about { background: var(--noir); overflow: hidden; }
.about__titlewrap { position: relative; height: clamp(160px, 24vw, 380px); margin-bottom: clamp(24px, 4vw, 48px); }
.about__block { position: absolute; left: 50%; top: -10%; width: clamp(64px, 9vw, 150px); height: 130%; background: var(--ember); transform: translateX(-50%); }
.about__word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 800 clamp(96px, 22vw, 380px)/.8 var(--f-sans); letter-spacing: -.05em; text-transform: uppercase; white-space: nowrap; }
.about__word--outline { color: transparent; -webkit-text-stroke: 1.5px rgba(236,233,227,.55); margin-top: -.08em; margin-left: -.06em; }
.about__word--solid { color: var(--bone); mix-blend-mode: normal; margin-top: .08em; margin-left: .06em; }

.fan { position: relative; height: clamp(380px, 46vw, 620px); max-width: 1200px; margin: 0 auto clamp(48px, 8vw, 120px); }
.fan__card { position: absolute; left: 50%; top: 50%; width: clamp(200px, 22vw, 320px); aspect-ratio: 3 / 4; margin: 0; border-radius: var(--r-card); border: 1px solid var(--line); overflow: hidden; background: var(--carbon); box-shadow: var(--shadow-float); transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: flex-end; touch-action: pan-y; }
.fan__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fan__card figcaption { position: relative; padding: 20px; font: 600 20px/1.15 var(--f-sans); letter-spacing: -.01em; }
.fan__card figcaption .mono { display: block; margin-bottom: 8px; color: var(--ember-soft); font-weight: 400; font-size: 11px; }
.fan__card figcaption small { font-weight: 400; color: var(--ash); font-size: 14px; }
.fan__card--blueprint { background: linear-gradient(160deg, #13151a, #0c0d10); color: rgba(143,180,234,.6); }
.blueprint { position: absolute; inset: 8% 8% 34%; width: 84%; height: 58%; }
.fan__card--badge { background: radial-gradient(80% 60% at 50% 30%, rgba(255,90,31,.22), transparent 70%), var(--carbon); }
.badge-seal { position: absolute; left: 50%; top: 34%; width: 52%; transform: translate(-50%, -50%); color: var(--ember-soft); }
.fan__card--dcs { background: linear-gradient(170deg, #121a2a, var(--carbon)); }
.mini-stepper { position: absolute; left: 20px; right: 20px; top: 36%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.mini-stepper li { height: 4px; border-radius: 2px; background: var(--slate); }
.mini-stepper li.done { background: var(--bone); }
.mini-stepper li.cur { background: var(--ember); }
/* Desktop fan: the DCS card sits right of centre, so its caption hugs the right edge (the centre card overlaps its left side) */
@media (min-width: 768px) { html.motion .fan__card--dcs figcaption { text-align: right; } }
@media (hover: hover) and (min-width: 768px) { html.motion .fan__card { cursor: grab; } }
/* Static fan (no JS / calm): a neat row */
html:not(.motion) .fan { height: auto; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--gutter) 24px; max-width: none; }
html:not(.motion) .fan__card { position: relative !important; left: auto !important; top: auto !important; transform: none !important; flex: 0 0 clamp(220px, 60vw, 280px); scroll-snap-align: center; } /* !important: switching to Focus at runtime leaves the animation's inline transforms */
/* centred when the row fits; when it doesn't, auto margins fall to 0 and it still scrolls from the first card (Quewin, 29 Oct) */
html:not(.motion) .fan > :first-child { margin-left: auto; }
html:not(.motion) .fan > :last-child { margin-right: auto; }
@media (max-width: 767px) {
  .fan { height: auto !important; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--gutter) 24px; margin-bottom: 48px; }
  .fan__card { position: relative !important; left: auto !important; top: auto !important; transform: none !important; flex: 0 0 72vw; scroll-snap-align: center; }
}

.about__body { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 32px; }
.about__body > .eyebrow, .about__body > .h2 { grid-column: 1 / -1; }
.about__body > .lead { grid-column: 1 / 8; grid-row: 3; }
.timeline { grid-column: 1 / 8; grid-row: 4; position: relative; margin-top: 24px; border-left: 1px solid var(--line-strong); }
.timeline li { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 14px 0 14px 28px; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 22px; width: 11px; height: 11px; border-radius: 50%; background: var(--noir); border: 1px solid var(--ash); transition: background .4s, border-color .4s, box-shadow .4s; }
.timeline li.is-lit::before { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 18px var(--ember-glow); }
.timeline__year { color: var(--ash); padding-top: 4px; }
.timeline__text { color: var(--bone); }
.about__para { grid-column: 9 / 13; grid-row: 3; align-self: end; color: var(--ash); font-size: var(--fs-body-l); }
.toolbelt { grid-column: 9 / 13; grid-row: 4; align-self: start; display: grid; gap: 14px; margin-top: 40px; }
.toolbelt__label { color: var(--ash); }
.toolbelt .chips + .toolbelt__label { margin-top: 26px; }
@media (max-width: 899px) { .about__body > * { grid-column: 1 / -1 !important; grid-row: auto !important; } }

/* ---------- 12. Scenes ---------- */
.scene { position: relative; background: var(--noir); }
html.js.motion .scene { height: 250vh; }
@media (max-width: 767px) { html.js.motion .scene { height: 170vh; } }
/* Scene 3 → contact: the video ends at 80 % of the section and the contact slides up over its fade to black (Quewin, 14 Oct) */
html.js.motion .scene--invite { height: 220vh; }
html.js.motion .scene--invite + .contact { position: relative; z-index: 2; margin-top: -60vh; background: linear-gradient(to bottom, rgba(10,10,11,0), rgba(10,10,11,.85) 28vh, var(--noir) 40vh); }
@media (max-width: 767px) { html.js.motion .scene--invite { height: 160vh; } html.js.motion .scene--invite + .contact { margin-top: -42vh; } }
.scene__pin { position: relative; height: 100svh; min-height: 520px; overflow: hidden; }
html.js.motion .scene__pin { position: sticky; top: 0; }
.scene__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 50%); }
html.js.motion .scene__poster { display: none; }
.scene__overlay { position: absolute; inset: 0; z-index: 2; padding: calc(var(--nav-h) + 6svh) var(--gutter) 10svh; display: grid; align-content: end; pointer-events: none; background: linear-gradient(to top, rgba(10,10,11,.7), rgba(10,10,11,0) 55%); }
.scene__line { font: 700 clamp(40px, 6.6vw, 112px)/.95 var(--f-sans); letter-spacing: -.035em; max-width: 14ch; text-wrap: balance; }
.scene__line em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--ember); letter-spacing: -.01em; }
html.js.motion .scene__line { position: absolute; left: var(--gutter); bottom: 12svh; opacity: 0; }
html:not(.motion) .scene__line + .scene__line { margin-top: 16px; }
.scene__line--center { max-width: none; }
html.js.motion .scene__line--center { inset: 0; display: grid; place-content: center; text-align: center; padding-inline: var(--gutter); }
html:not(.motion) .scene { min-height: 0; }
html:not(.motion) .scene__pin { height: 70svh; }
/* Scene 2 → Work: the Work intro sits on the laptop screen (affine map of the screen in the last frame), builds, then zooms to full screen */
.scene__screen { position: absolute; inset: 0; z-index: 3; visibility: hidden; pointer-events: none; }
.scene__screen-ui { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; overflow: hidden; }
.scene__screen-ui { background: var(--graphite); box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08); }
.scene__window-bar { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 52px; display: flex; align-items: center; gap: 18px; padding: 0 20px; background: var(--carbon); border-bottom: 1px solid var(--line); }
.scene__window-bar .browser__url { max-width: 520px; margin-inline: auto; transform: translateX(-30px); }
.scene__screen-ui > .work__intro, .scene__screen-ui > .stack { position: relative; z-index: 1; }
html.js.motion .scene__screen-ui .pcard { position: relative; top: auto; } /* the copy of the first card on the laptop never sticks */
.scene--invite .scene__overlay { background: radial-gradient(70% 60% at 50% 50%, rgba(10,10,11,.0), rgba(10,10,11,.6)); }

/* ---------- 13. Focus areas: work, archive, testimonials ---------- */
.work, .archive, .evolution, .testimonials { background: var(--graphite); }
.archive + .evolution { padding-top: 0; }

/* Stacked project cards */
/* The Work section opens with the heading at the top and the first card right below it, on the page, after the nav's
   Work link and on the laptop in Scene 2 (a copy of the intro and the first card, so the hand-off matches exactly) (Quewin, 29 Oct) */
.work__intro { display: flex; flex-direction: column; justify-content: center; }
html.js.motion .work.section { padding-top: 0; }
html.js.motion .work__intro { padding-block: calc(var(--nav-h) + clamp(40px, 8vh, 88px)) clamp(32px, 5vh, 56px); justify-content: flex-start; }
html.js.motion .scene--builder { z-index: 1; }
html.js.motion .scene--builder + .work { margin-top: -100svh; z-index: 0; } /* sits under the pinned scene; both scroll away aligned */
html.js.motion .scene--builder.is-past { visibility: hidden; } /* past the hand-off the real page shows on its own (its first card sticks; the copy can't); the whole section, or its background would still cover the page */
.stack { position: relative; padding-inline: var(--gutter); max-width: var(--maxw); margin-inline: auto; display: grid; gap: 28px; }
.pcard { --pad: clamp(24px, 3.4vw, 48px); position: relative; min-height: min(85vh, 820px); border-radius: 24px; border: 1px solid var(--line); background: var(--noir); overflow: hidden; display: grid; grid-template-columns: 5fr 7fr; transform-origin: 50% 0; }
html.js.motion .pcard { position: sticky; top: calc(var(--nav-h) + 12px); }
.pcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.pcard__text { padding: var(--pad); display: flex; flex-direction: column; gap: 18px; z-index: 1; }
.pcard__outcome { color: var(--ash); font-size: 17px; max-width: 42ch; }
.pcard__shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 3; }
.pcard__phones { display: flex; gap: clamp(12px, 2vw, 28px); align-items: flex-start; justify-content: center; }
.pcard__phones .phone { width: clamp(150px, 15vw, 230px); }
.pcard__phones .phone:nth-child(2) { margin-top: 48px; }
.browser .browser__view--dark { background: var(--noir); }
.pcard__kind { color: var(--accent-ink); }
.pcard__title { font-size: clamp(32px, 3.6vw, 60px); font-weight: 700; line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.pcard__title span { display: block; font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--ash); font-size: .72em; margin-top: 10px; line-height: 1.1; }
.pcard__metric { font: 800 clamp(40px, 4.4vw, 72px)/1 var(--f-sans); letter-spacing: -.04em; margin-top: auto; }
.pcard__metric small { display: block; font: 400 14px/1.4 var(--f-sans); letter-spacing: 0; color: var(--ash); margin-top: 6px; }
.pcard__tldr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.pcard__tldr dt { font: 400 11px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ash); margin-bottom: 4px; }
.pcard__tldr dd { margin: 0; font-size: 14px; line-height: 1.4; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pcard__tags li { font: 400 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-chip); color: var(--ash); }
.pcard__cta { align-self: flex-start; }
.pcard__cta::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* whole card clickable */
.pcard__visual { position: relative; background: var(--tint); display: grid; place-items: center; padding: var(--pad); overflow: hidden; }
.pcard__visual::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(70% 60% at 70% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); pointer-events: none; }
.pcard__visual > * { position: relative; z-index: 1; }
.pcard__visual .browser { width: 100%; max-width: 760px; transform: rotate(-1.2deg); }
.pcard__visual .browser__view { aspect-ratio: 16 / 11; }
.pcard__visual .browser__view img { transition: transform 1.6s var(--ease-out); }
/* the preview scroll runs only while the pointer is on the screen, so passing over a card keeps its top in view (Quewin, 16 Oct) */
@media (hover: hover) {
  .pcard__visual .browser:hover .browser__view img { transform: translateY(-12%); }
  .pcard__phones .phone { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
  .pcard__phones .phone:hover { transform: translateY(-14px) scale(1.03); box-shadow: 0 44px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.14); }
}
.pcard[data-kind="ai"] .pcard__visual { background: radial-gradient(70% 70% at 60% 40%, rgba(123,77,255,.25), transparent 70%), radial-gradient(50% 50% at 30% 80%, rgba(255,90,31,.2), transparent 70%), #120F1C; }
@media (max-width: 899px) {
  .pcard { grid-template-columns: 1fr; min-height: 0; position: relative !important; top: auto !important; }
  .pcard__visual { order: -1; padding: 20px; }
  .pcard__tldr { grid-template-columns: 1fr; }
}
/* Teaser cards (Quewin, 29 Oct): User Research and This website aren't live yet. The visual dims behind an "in progress"
   panel, the button becomes a status (as in the DCS navigation chapter), and nothing on the card reacts like a link */
.pcard--soon .pcard__visual > :not(.pcard__soon) { filter: saturate(.55) brightness(.5); pointer-events: none; }
html.is-calm .pcard--soon .pcard__visual > :not(.pcard__soon) { filter: saturate(.4); opacity: .4; }
.pcard__soon { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; width: min(440px, calc(100% - 40px)); display: grid; justify-items: start; gap: 10px; padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--line-strong); border-radius: 20px; background: color-mix(in srgb, var(--noir) 74%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: var(--shadow-float); }
html.is-calm .pcard__soon { background: color-mix(in srgb, var(--carbon) 90%, transparent); } /* crisp on the light cards and on This website's dark one */
.pcard__soon p { margin: 0; }
.pcard__soon-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); font-size: 11px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; }
.pcard__soon-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pcard__soon-line { font: 700 clamp(28px, 2.6vw, 40px)/1.04 var(--f-sans); letter-spacing: -.03em; color: var(--bone); text-wrap: balance; }
.pcard__soon-sub { color: var(--ash); font-size: 15px; line-height: 1.45; }
/* a loading bar with no number: work is under way, without pretending to know how far */
.pcard__soon-bar { position: relative; display: block; width: 100%; height: 4px; margin-top: 8px; border-radius: 4px; background: var(--line-strong); overflow: hidden; }
.pcard__soon-bar i { position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 16px); opacity: .7; }
html.js.motion .pcard__soon-bar i { right: auto; width: 38%; background: var(--accent); opacity: 1; animation: soon-bar 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
html.js.motion .pcard__soon-pill i { animation: soon-pulse 1.8s ease-out infinite; }
@keyframes soon-bar { from { transform: translateX(-100%); } to { transform: translateX(265%); } }
@keyframes soon-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } to { box-shadow: 0 0 0 9px transparent; } }

/* Browser + phone frames */
.browser { border-radius: var(--r-browser); background: var(--carbon); border: 1px solid var(--line-strong); overflow: hidden; box-shadow: var(--shadow-float); }
.browser__chrome { height: 40px; display: flex; align-items: center; gap: 14px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--carbon); }
.browser__lights { display: flex; gap: 7px; flex: 0 0 auto; }
.browser__lights i { width: 11px; height: 11px; border-radius: 50%; background: var(--slate); }
.browser__lights i:nth-child(1) { background: #FF5F57; } .browser__lights i:nth-child(2) { background: #FEBC2E; } .browser__lights i:nth-child(3) { background: #28C840; }
.browser__url { flex: 1 1 auto; min-width: 0; height: 26px; border-radius: 999px; background: var(--slate); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; color: var(--ash); text-transform: none; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 14px; }
.browser__view { position: relative; overflow: hidden; background: #fff; }
.browser__view img { width: 100%; height: auto; }
.phone { position: relative; border-radius: var(--r-phone); background: #050506; padding: 10px; box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(255,255,255,.08); }
.phone__view { border-radius: calc(var(--r-phone) - 10px); overflow: hidden; background: #fff; aspect-ratio: 9 / 19.5; position: relative; }
.phone__view img { width: 100%; height: auto; }

/* Archive */
/* Filters: a label, then pills, above the window; the same control as the Evolution steps (Quewin, 16 Oct) */
.filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 18px; }
.filter-row__label { color: var(--ash); margin: 0; flex: 0 0 auto; }
.pill-filter { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; min-width: 0; max-width: 100%; }
.pill-filter::-webkit-scrollbar { display: none; }
.pill-filter button { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 14px; transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover); }
.pill-filter button:hover { border-color: var(--ash); }
.pill-filter button[aria-pressed="true"] { background: var(--bone); color: var(--noir); border-color: var(--bone); }
/* six archives (27 Oct: Trade-In split in two): the pills wrap instead of scrolling sideways, so none hides off-screen on a phone */
.archive .pill-filter, .vslider .pill-filter { flex-wrap: wrap; } /* the Three generations steps too (27 Oct) */
.archive__browser { position: relative; }
.archive__canvas { position: relative; min-height: 520px; padding: 72px clamp(16px, 2.4vw, 32px) 56px; background: #0A0A0B; } /* one brand at a time, on black (Quewin, 13–14 Oct) */
.archive__canvas::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(236,233,227,.08) 1px, transparent 1.2px); background-size: 24px 24px; pointer-events: none; opacity: .5; }
.archive__hint { position: absolute; z-index: 5; left: 50%; top: 18px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(10,10,11,.8); border: 1px solid var(--line-strong); color: var(--bone); pointer-events: none; white-space: nowrap; }
/* Always a grid: the steps in reading order, left to right (the Scatter canvas was removed on 16 Oct) */
.archive__cards { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 18px; align-items: start; }
.archive__canvas[data-tab="mobile"] .archive__cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.acard { position: relative; width: 100%; padding: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; border-radius: 12px; overflow: hidden; background: var(--carbon); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px rgba(0,0,0,.45); text-align: left; transition: box-shadow .3s, opacity .4s; }
.acard:hover { box-shadow: 0 26px 60px rgba(0,0,0,.6); }
.acard.is-dim { display: none; }
.acard__bar { display: flex; gap: 5px; align-items: center; height: 18px; padding: 0 8px; background: var(--carbon); border-bottom: 1px solid var(--line); }
.acard__bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--slate); }
.acard__img { display: block; width: 100%; aspect-ratio: 1.6; object-fit: cover; object-position: top; background: #fff; }
.acard--tall .acard__img { aspect-ratio: .8; }
/* mobile screens: a phone frame, like the User Research card */
.acard--phone { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.acard--phone:hover { box-shadow: none; }
.acard__phone { display: block; width: min(100%, 176px); margin-inline: auto; padding: 6px; border-radius: 24px; background: #050506; box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.1); transition: box-shadow .3s; }
.acard--phone:hover .acard__phone { box-shadow: 0 26px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.16); }
.acard--phone .acard__img { aspect-ratio: 9 / 19.5; border-radius: 18px; }
.acard--phone .acard__cap { width: min(100%, 176px); margin-inline: auto; padding: 10px 2px 0; }
.acard__cap { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; font: 400 10px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ash); }
.acard__cap b { color: var(--bone); font-weight: 500; }
.acard__no { font-style: normal; color: var(--ember-soft); margin-right: 4px; }
.acard__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; margin-top: 2px; }
@media (max-width: 767px) {
  .archive__canvas { min-height: 0; padding: 56px 0 40px; }
  .archive__cards { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 8px; }
  .acard { flex: 0 0 72vw; scroll-snap-align: center; }
  .acard--tall { flex-basis: 46vw; }
  .acard--phone { flex-basis: 40vw; }
  .archive__hint { top: 14px; font-size: 10px; }
}

/* Testimonials */
.testimonials { position: relative; }
.testimonials__count { color: var(--ash); font-size: 14px; }
/* Paged with arrows (Quewin, 14 Oct: not scroll-driven); every quote keeps its full height */
.testimonials__ctrl { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.quotes__nav { display: flex; gap: 10px; }
.q-arrow { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--ember); color: var(--bone); background: transparent; font: 400 22px/1 var(--f-sans); display: grid; place-items: center; transition: background var(--t-hover), border-color var(--t-hover), color var(--t-hover), opacity var(--t-hover); }
.q-arrow:hover:not(:disabled) { background: var(--ember); color: var(--noir); border-color: var(--ember); }
.q-arrow:disabled { opacity: .3; cursor: default; }
@media (max-width: 767px) { .testimonials .section-head { align-items: flex-end; } .q-arrow { width: 48px; height: 48px; } }
.quotes { position: relative; display: flex; align-items: flex-start; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; --qpad: min(36px, var(--gutter)); margin-inline: calc(-1 * var(--qpad)); } /* the slides get 36px of room each side for the hanging quote mark and the avatar ring */
.quotes::-webkit-scrollbar { display: none; }
.quote { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 1fr; gap: 28px; padding: 6px var(--qpad) 20px; }
.quote__text { font: 400 clamp(28px, 3.2vw, 50px)/1.1 var(--f-serif); font-style: italic; letter-spacing: -.01em; color: var(--bone); max-width: 38ch; text-wrap: pretty; }
.quote__text::before { content: "“"; color: var(--ember); }
@media (min-width: 900px) { .quote__text::before { margin-left: -.42em; } }
.quote__by { display: flex; align-items: center; gap: 16px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--carbon); box-shadow: 0 0 0 1px var(--ember); font: 500 15px/1 var(--f-mono); letter-spacing: .04em; color: var(--bone); flex: 0 0 auto; }
.quote__name { font-weight: 600; }
.quote__role { color: var(--ash); font-size: 15px; }
.quote__more { color: var(--ash); max-width: 72ch; font-size: 16px; }

/* ---------- 14. Contact + footer ---------- */
.contact { background: var(--noir); overflow: hidden; }
.contact__glow { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 40%, rgba(255,90,31,.16), transparent 70%); pointer-events: none; }
.contact__wrap { position: relative; display: grid; gap: 28px; justify-items: start; }
.contact__title { font-size: clamp(48px, 8vw, 136px); font-weight: 700; line-height: .92; letter-spacing: -.04em; max-width: 13ch; text-wrap: balance; }
.contact__title em { color: var(--ember); }
.contact__sub { color: var(--ash); max-width: 52ch; font-size: var(--fs-body-l); }
.contact__email { display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.contact__email a { font: 600 clamp(min(28px, 7.8vw), 5.2vw, 80px)/1.1 var(--f-sans); letter-spacing: -.03em; text-decoration: none; position: relative; word-break: break-all; }
.contact__email a span { background: linear-gradient(var(--ember), var(--ember)) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease-out); padding-bottom: 4px; }
.contact__email a:hover span, .contact__email a:focus-visible span { background-size: 100% 2px; }
/* a click opens the visitor's mail app, and the hint says so (touch screens say "Tap") */
.contact__hint { color: var(--ash); font-size: clamp(11px, .9vw, 13px); transition: color var(--t-hover); }
.contact__email:has(a:hover, a:focus-visible) .contact__hint { color: var(--ember); }
.contact__hint-tap { display: none; }
@media (hover: none) { .contact__hint-click { display: none; } .contact__hint-tap { display: inline; } }
.contact__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.contact__meta { display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--ash); margin-top: 20px; font-size: 11px; }
.contact__studio, .footer__studio { display: flex; align-items: center; gap: 14px; color: var(--ash); font-size: 15px; }
.qh { width: 34px; height: auto; color: var(--bone); flex: 0 0 auto; }
.contact__studio strong { color: var(--bone); font-weight: 600; }

.footer { position: relative; background: var(--noir); border-top: 1px solid var(--line); padding-top: 72px; overflow: hidden; }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr 2fr auto; gap: 32px; }
.footer__label { color: var(--ash); margin-bottom: 14px; }
.footer__cols ul { display: grid; gap: 6px; }
.footer__cols a { text-decoration: none; color: var(--bone); display: inline-block; padding: 6px 0; }
.footer__cols a:hover { color: var(--ember-soft); }
.footer__colophon p:not(.footer__label) { color: var(--ash); max-width: 48ch; font-size: 15px; }
.footer__top { justify-self: end; }
.footer__cols a.tool-btn { display: inline-flex; padding: 0 22px; min-height: 48px; white-space: nowrap; } /* the column link style was stripping the button's side padding */
.footer__legal { margin-top: 56px; display: grid; gap: 10px; color: var(--ash); font-size: 13px; }
.footer__legal p { max-width: 90ch; }
.footer__mega { margin-top: 48px; font: 800 clamp(40px, 13.2vw, 260px)/.78 var(--f-sans); letter-spacing: -.05em; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(236,233,227,.4); text-align: center; margin-bottom: -.12em; user-select: none; }
.footer__mega .ch { transition: color .5s var(--ease-out), -webkit-text-stroke-color .5s; display: inline-block; }
.footer__mega .ch.is-lit { color: var(--bone); -webkit-text-stroke-color: var(--bone); }
@media (max-width: 899px) { .footer__cols { grid-template-columns: 1fr 1fr; } .footer__colophon { grid-column: 1 / -1; } .footer__top { justify-self: start; } }

/* ---------- 15. Toast ---------- */

/* ---------- 16. Dialogs ---------- */
dialog { padding: 0; border: 0; color: var(--bone); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(10,10,11,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.is-sheet-open { overflow: hidden; }
#main, .footer { transition: transform .9s var(--ease-out), filter .9s; transform-origin: 50% 30vh; }
body.is-sheet-open #main { transform: scale(.96); filter: brightness(.5); }

.sheet { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; margin: 0; background: transparent; overflow: hidden; }
.sheet::backdrop { background: rgba(10,10,11,.5); }
.sheet__inner { position: absolute; inset: 12px 12px 0; border-radius: 24px 24px 0 0; background: var(--sheet-bg, var(--graphite)); border: 1px solid var(--line); border-bottom: 0; display: grid; grid-template-rows: auto 1fr; overflow: hidden; transition: background .6s; }
@media (max-width: 767px) { .sheet__inner { inset: 0; border-radius: 0; } }
.sheet__inner { grid-template-columns: minmax(0, 1fr); } /* the widest child (the 720 px comparison table) must never widen the panel: on phones it pushed the case study off-screen (fixed 20 Oct) */
.sheet__head { position: relative; display: flex; align-items: center; gap: 16px; padding: 12px clamp(16px, 2.6vw, 32px); border-bottom: 1px solid var(--line); background: rgba(18,18,20,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 3; }
.sheet__title { flex: 1 1 auto; min-width: 0; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet__actions { display: flex; gap: 8px; flex: 0 0 auto; }
.sheet__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.sheet__progress span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.sheet__scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet__content { padding: clamp(32px, 6vw, 96px) clamp(16px, 4vw, 64px) 120px; max-width: 1440px; margin-inline: auto; }
@media (max-width: 767px) { .sheet__actions .tool-btn:first-child { display: none; } }

/* Case study */
.cs { font-size: var(--fs-body-l); line-height: 1.65; }
.cs-hero { max-width: 1100px; margin-bottom: clamp(32px, 5vw, 64px); }
.cs-kind { color: var(--accent-ink); margin-bottom: 18px; }
.cs-title { font-size: clamp(40px, 6vw, 100px); font-weight: 700; line-height: .95; letter-spacing: -.035em; text-wrap: balance; }
.cs-meta { color: var(--ash); margin-top: 22px; text-transform: none; letter-spacing: .02em; font-size: 13px; }
.tldr { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; background: var(--carbon); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 var(--r-card) var(--r-card) 0; margin-bottom: clamp(48px, 7vw, 96px); max-width: 1100px; }
.tldr > div { padding: 22px 26px; border-bottom: 1px solid var(--line); }
.tldr > div:nth-child(odd) { border-right: 1px solid var(--line); }
.tldr > div:last-child { grid-column: 1 / -1; border-bottom: 0; border-right: 0; }
.tldr dt { font: 400 11.5px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 6px; }
.tldr dd { margin: 0; font-size: 17px; line-height: 1.55; }
@media (max-width: 767px) { .tldr { grid-template-columns: 1fr; } .tldr > div:nth-child(odd) { border-right: 0; } }
/* Story summary (DCS, 20 Oct): problem → role + scope → what changed → two result tiles with counting numbers */
.tldr--story { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tldr--story > div, .tldr--story > div:nth-child(odd), .tldr--story > div:last-child { grid-column: auto; border-right: 0; border-bottom: 1px solid var(--line); }
.tldr--story > div.tldr__wide { grid-column: 1 / -1; } /* div.class: outranks the reset above, which includes :nth-child */
.tldr--story > div.tldr__l { border-right: 1px solid var(--line); }
.tldr--story .tldr__problem dd { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.45; letter-spacing: -.01em; max-width: 54ch; }
.tldr__chips { margin-top: 4px; }
.tldr--story > div.tldr__metric { border-bottom: 0; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.tldr__num { display: block; font: 800 clamp(44px, 5vw, 72px)/1 var(--f-sans); letter-spacing: -.04em; color: var(--bone); margin-top: 4px; font-variant-numeric: tabular-nums; }
.tldr__num small { font-size: .38em; font-weight: 600; letter-spacing: -.01em; color: var(--ash); margin-left: 4px; }
.tldr__unit { display: block; font-size: 17px; font-weight: 600; margin-top: 10px; }
.tldr__aside { font-weight: 400; color: var(--ash); }
.tldr__note { display: block; color: var(--ash); font-size: 15.5px; line-height: 1.55; margin-top: 8px; max-width: 46ch; }
@media (max-width: 767px) {
  .tldr--story { grid-template-columns: 1fr; }
  .tldr--story > div.tldr__l { border-right: 0; }
  .tldr--story > div.tldr__metric:not(:last-child) { border-bottom: 1px solid var(--line); }
}
.cs-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cs-nav { position: sticky; top: 24px; display: grid; gap: 2px; }
.cs-nav a { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 8px; text-decoration: none; color: var(--ash); font-size: 14.5px; line-height: 1.3; transition: color .2s, background .2s; }
.cs-nav a .mono { font-size: 10.5px; color: var(--ash); min-width: 18px; }
.cs-nav a:hover { color: var(--bone); }
.cs-nav a[aria-current="true"] { color: var(--bone); background: var(--carbon); }
.cs-nav a[aria-current="true"] .mono { color: var(--accent-ink); }
@media (max-width: 899px) {
  .cs-body { grid-template-columns: 1fr; }
  .cs-nav { top: 0; z-index: 2; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * clamp(16px, 4vw, 64px)); padding: 10px clamp(16px, 4vw, 64px); background: var(--sheet-bg, var(--graphite)); border-bottom: 1px solid var(--line); }
  .cs-nav::-webkit-scrollbar { display: none; }
  .cs-nav a { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; min-height: 40px; align-items: center; }
  .cs-nav a .mono { display: none; }
}
.cs-chapters { min-width: 0; display: grid; gap: clamp(72px, 10vw, 140px); }
.cs-ch { scroll-margin-top: 24px; display: grid; gap: 24px; }
.cs-ch > p, .cs-ch > ul:not(.chips):not(.doubts):not(.constraints):not(.outcome):not(.checklist):not(.takes):not(.refs), .cs-ch > ol:not(.evo):not(.barriers):not(.team-steps):not(.workflow):not(.thread) { max-width: 68ch; }
@media (max-width: 899px) { .cs-ch { scroll-margin-top: 72px; } }
.cs-no { color: var(--accent-ink); }
.cs-h { font-size: var(--fs-h3); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; max-width: 28ch; text-wrap: balance; }
.cs-h__lead { color: var(--accent-ink); } /* the chapter topic ("The challenge:") reads first */
.cs-sub { color: var(--ash); font-size: 16px; }
.cs-link a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid currentColor; }
.cs a:not(.btn):not(.tool-btn) { color: var(--accent-ink); }
.cs-title[tabindex="-1"]:focus { outline: none; } /* focused on open for screen readers, not a control */
.cs h4 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 6px; }

/* DCS 01: what the customer asks (speech bubbles), then what the checkout has to handle (cards with icons) */
/* Subsections (.cs-block): label → optional lead sentence → content. More air above than between elements (24px),
   much less than between chapters, the same in every chapter of every case study (Quewin, 20 Oct) */
.cs { --cs-block-space: clamp(20px, 3.2vw, 44px); }
.cs-block { display: grid; gap: 16px; margin-top: var(--cs-block-space); } /* not .cs-sub: that is the small helper line */
.cs-block__label { margin: 0; color: var(--accent-ink); }
.cs-block > p:not(.cs-block__label) { max-width: 68ch; }
.cs-bridge { margin-top: var(--cs-block-space); } /* a chapter's closing line into the next one: the same air as a subsection */
.doubts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.doubts li { font: 400 clamp(22px, 2.2vw, 32px)/1.15 var(--f-serif); font-style: italic; padding: 18px 22px; border: 1px solid var(--line); border-radius: 20px 20px 20px 4px; background: var(--carbon); }
.constraints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.constraints li { background: var(--graphite); padding: 22px 20px; display: grid; gap: 6px; align-content: start; } /* align-content: the description used to drift away from its title */
.constraints__icon { width: 38px; height: 38px; padding: 8px; margin-bottom: 8px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.constraints strong { font-size: 18px; line-height: 1.3; }
.constraints span { color: var(--ash); font-size: 15px; line-height: 1.5; }
@media (max-width: 767px) { .doubts, .constraints { grid-template-columns: 1fr; } }

/* DCS 02: how the role grew, three stages joined by arrows (down the page on phones) */
.role-arc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.role-arc li { position: relative; padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--carbon); display: grid; gap: 10px; align-content: start; font-size: 16px; line-height: 1.6; }
.role-arc__when { margin: 0; color: var(--accent-ink); }
.role-arc li:not(:last-child)::after { content: "→"; position: absolute; z-index: 1; right: -18px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 400 13px/1 var(--f-sans); color: var(--accent-ink); background: var(--graphite); border: 1px solid var(--line); }
@media (max-width: 899px) {
  .role-arc { grid-template-columns: 1fr; }
  .role-arc li:not(:last-child)::after { right: auto; top: auto; left: 50%; bottom: -18px; transform: translateX(-50%) rotate(90deg); }
}

/* DCS 02: how a feature moved through DCS. An HTML timeline of phase buttons (--lc 0–1 draws the line in,
   script.js); hover = orange, selected = the accent (blue in DCS); the selected phase opens in a speech-bubble
   panel below, its caret under the phase. Phones: a vertical stepper, the panel opens under the tapped phase. */
/* a one-line how-to under a subsection label, for anything interactive (orange marker = "you can select this") */
.cs-hint { display: flex; align-items: flex-start; gap: 10px; margin: -4px 0 4px; color: var(--ash); font-size: 15px; line-height: 1.5; }
.cs-block > p.cs-hint:not(.cs-block__label) { max-width: none; } /* one line on wide screens: outranks the 68ch reading width for paragraphs */
.cs-hint__icon, .cs-hint__info { margin-top: 2.25px; } /* (22.5px line − 18px icon) / 2: level with the first line, also when the text wraps */
.cs-hint__icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ember); }
.cs-hint__icon::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ember); }
html:not(.js) .cs-hint { display: none; }
.cs-hint + .cs-hint { margin-top: -10px; } /* a how-to and its follow-up read as one note */
.cs-hint__info { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ash); display: grid; place-items: center; font: 600 11px/1 var(--f-serif); font-style: italic; color: var(--ash); } /* information, not an action: neutral, not orange */
.lifecycle { --vertical: 0; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 6px 0 4px; }
.lifecycle::before { content: ""; position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 18px; height: 2px; background: var(--accent-ink); opacity: .7; transform-origin: left; transform: scaleX(var(--lc, 1)); }
.lifecycle li { position: relative; display: grid; justify-items: center; align-content: start; }
.lifecycle__step { display: grid; justify-items: center; align-content: start; gap: 14px; width: 100%; padding: 2px 6px 8px; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; border-radius: 12px; }
.lifecycle__dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--graphite); border: 2px solid var(--accent-ink); transition: transform .3s var(--ease-out), background .3s, border-color .3s, box-shadow .3s; }
.lifecycle__label { font: 500 15px/1.35 var(--f-sans); color: var(--ash); max-width: 13ch; transition: color .3s; }
.lifecycle__step:hover .lifecycle__dot, .lifecycle__step:focus-visible .lifecycle__dot { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 30%, var(--graphite)); box-shadow: 0 0 0 7px color-mix(in srgb, var(--ember) 16%, transparent); transform: scale(1.15); }
.lifecycle__step:hover .lifecycle__label, .lifecycle__step:focus-visible .lifecycle__label { color: var(--ember-soft); }
.lifecycle__step[aria-pressed="true"] .lifecycle__dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 24%, transparent); transform: scale(1.25); }
.lifecycle__step[aria-pressed="true"] .lifecycle__label { color: var(--bone); font-weight: 600; }
.lifecycle__step:focus-visible { outline-offset: 2px; }
/* the panel: a speech bubble whose caret sits under the selected phase */
.flow-panel { --caret-x: 8.33%; position: relative; margin-top: 12px; padding: 24px 26px 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--carbon); }
.flow-panel__caret { position: absolute; top: -9px; left: var(--caret-x); width: 16px; height: 16px; margin-left: -8px; background: var(--carbon); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); transition: left .45s var(--ease-out); }
.flow-panel__nav { position: absolute; top: 18px; right: 18px; display: flex; gap: 8px; }
.q-arrow--sm { width: 40px; height: 40px; font-size: 17px; }
html:not(.js) .flow-panel__caret, html:not(.js) .flow-panel__nav { display: none; }
.flow-phase { display: grid; gap: 14px; }
.flow-phase[hidden] { display: none; } /* display: grid would otherwise override the hidden attribute */
html:not(.js) .flow-phase + .flow-phase { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); } /* no JS: every phase, one after another */
.flow-phase__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; padding-right: 104px; }
.flow-phase__title { margin: 0; font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; letter-spacing: -.01em; }
.flow-phase__count { margin: 0; color: var(--ash); }
.flow-phase__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.flow-phase__k { margin: 0 0 6px; color: var(--accent-ink); }
.flow-phase__cols p:not(.flow-phase__k) { margin: 0; font-size: 16.5px; line-height: 1.6; }
.flow-phase .chips { margin-top: 4px; }
@media (max-width: 699px) {
  .lifecycle { --vertical: 1; grid-template-columns: 1fr; gap: 4px; padding: 0; }
  .lifecycle::before { left: 13px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; transform-origin: top; transform: scaleY(var(--lc, 1)); }
  .lifecycle li { justify-items: stretch; }
  .lifecycle__step { grid-template-columns: 28px 1fr; justify-items: start; align-items: center; gap: 14px; min-height: 48px; padding: 6px 0; text-align: left; }
  .lifecycle__dot { justify-self: center; }
  .lifecycle__label { max-width: none; }
  .lifecycle li > .flow-panel { margin: 4px 0 12px 42px; padding: 20px 18px 22px; } /* opens under the tapped phase, right of the line */
  .flow-panel__caret { left: 22px; }
  .flow-panel__nav { top: 14px; right: 14px; }
  .flow-phase__head { padding-right: 96px; min-height: 40px; align-items: center; }
  .flow-phase__title { display: none; } /* the phase name is right above, on the tapped step */
  .flow-phase__cols { grid-template-columns: 1fr; }
}
.cs .chips li { line-height: 1.4; padding-block: 7px; } /* long chips wrap on phones: their lines must not touch */
.badges { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--carbon); }
.badges__title { font: 400 22px/1.2 var(--f-serif); font-style: italic; margin-bottom: 18px; }
.badges__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); padding: 6px; }
/* light tiles in both modes (the Titans and DCS marks are dark); the logo sits inside with even margins (it used to overflow the tile and the panel) */
.badges__row li { position: relative; aspect-ratio: 1; background: #EFECE6; border: 1px solid rgba(28,28,30,.06); border-radius: 14px; transform: rotate(var(--r, -3deg)); transition: transform .4s var(--ease-out); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.badges__row li:nth-child(2) { --r: 2.5deg; } .badges__row li:nth-child(3) { --r: -1.5deg; } .badges__row li:nth-child(4) { --r: 3deg; }
.badges__row li:hover { transform: rotate(0) translateY(-4px); }
.badges__row img { position: absolute; inset: 17%; width: 66%; height: 66%; object-fit: contain; }
@media (max-width: 599px) { .badges__row { grid-template-columns: repeat(2, 1fr); } }

/* Shots (figures filled from the manifest) */
.shot { margin: 0; display: grid; gap: 10px; min-width: 0; }
.shot figcaption { font: 400 11.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ash); }
.shot .browser__view { aspect-ratio: var(--crop, 1.6) ; cursor: zoom-in; }
.shot .browser__view img { position: absolute; left: 0; top: 0; transform: translateY(calc(var(--offset, 0) * -100%)); }
.shot .browser__chrome { height: 26px; gap: 8px; padding: 0 10px; }
.shot .browser__lights i { width: 8px; height: 8px; }
.shot .browser__url { height: 16px; font-size: 9.5px; }
.shot .browser { border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.shot .phone { --r-phone: 34px; padding: 7px; cursor: zoom-in; max-width: 280px; }
.shot--thumb { max-width: 100%; }
/* small screens that open larger say so on hover (Quewin, 21 Oct): the orange "you can select this" ring, a small lift
   (never bigger) and an expand badge; on touch screens the badge always shows. The whole frame opens it (script.js). */
.shot--thumb .browser, .shot--thumb .phone { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.shot--thumb .browser__chrome { cursor: zoom-in; }
.shot--thumb .browser__view::after, .shot--thumb .phone__view::after { content: ""; position: absolute; z-index: 1; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 8px; background: rgba(10,10,11,.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ECE9E3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5M19 5l-6 6M10 19H5v-5M5 19l6-6'/%3E%3C/svg%3E") center / 16px no-repeat; opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s var(--ease-out); pointer-events: none; }
@media (hover: hover) {
  .shot--thumb .browser:hover, .shot--thumb .phone:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--ember), 0 24px 56px rgba(0,0,0,.5); }
  html.is-calm .shot--thumb .browser:hover, html.is-calm .shot--thumb .phone:hover { box-shadow: 0 0 0 2px var(--ember), 0 18px 40px rgba(28,28,30,.18); }
  .shot--thumb .browser:hover .browser__view::after, .shot--thumb .phone:hover .phone__view::after { opacity: 1; transform: none; }
}
.shot--thumb .browser__view:focus-visible::after, .shot--thumb .phone:focus-visible .phone__view::after { opacity: 1; transform: none; }
@media (hover: none) { .shot--thumb .browser__view::after, .shot--thumb .phone__view::after { opacity: .9; transform: none; } }
.shot--inline { max-width: 760px; }
.shot--inline-phone { max-width: 260px; }
.shot .plain { border-radius: 18px; overflow: hidden; cursor: zoom-in; }
.shot.is-brand { padding: 14px; border-radius: 18px; background: var(--tint); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s; }
@media (hover: hover) { .shot.is-brand:hover, .shot.is-brand:focus-within { transform: translateY(-6px) scale(1.025); box-shadow: 0 26px 60px rgba(0,0,0,.45); } } /* lifts: it opens larger */
html.is-calm .shot.is-brand:hover { box-shadow: 0 18px 40px rgba(28,28,30,.16); }

.brand-run { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.duo--small { max-width: 900px; }
.duo--phones { grid-template-columns: repeat(2, minmax(0, 240px)); }
@media (max-width: 767px) { .brand-run, .duo { grid-template-columns: 1fr; } .duo--phones { grid-template-columns: repeat(2, 1fr); } }

.barriers { display: grid; gap: 14px; counter-reset: b; }
.barriers li { counter-increment: b; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, .9fr); gap: 24px; align-items: center; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--carbon); }
.barrier__q { font: 400 clamp(24px, 2.4vw, 34px)/1.1 var(--f-serif); font-style: italic; }
.barrier__q::before { content: counter(b, decimal-leading-zero); display: block; font: 400 11px/1 var(--f-mono); color: var(--accent-ink); margin-bottom: 10px; font-style: normal; letter-spacing: .08em; }
.barriers dl { display: grid; gap: 4px; font-size: 15.5px; line-height: 1.5; }
.barriers dt { font: 400 10.5px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ash); margin-top: 8px; }
.barriers dd { margin: 0; }
@media (max-width: 899px) { .barriers li { grid-template-columns: 1fr; } }

/* DCS 07: five cards, one thread: making progress visible (Quewin, 22 Oct). Rows line up across the cards (subgrid):
   progress bar · screen · toggle · title · text. Each card's bar fills like the real mobile stepper ("2/5"). */
.nav-story { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: 16px; padding-top: 6px; }
.nav-story > li { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 12px; align-content: start; min-width: 0; }
.nav-step { grid-row: 1; display: flex; align-items: center; gap: 10px; margin: 0; font-size: 11px; color: var(--accent-ink); }
.nav-step__bars { display: flex; flex: 1; gap: 3px; max-width: 120px; }
.nav-step__bars i { flex: 1; height: 3px; border-radius: 2px; background: var(--line-strong); }
.nav-step__bars i.is-done { background: var(--accent); }
.nav-story .shot, .nav-shots { grid-row: 2; }
.nav-story .phone { max-width: 200px; }
.nav-toggle { grid-row: 3; justify-self: start; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--ember) 70%, transparent); background: transparent; color: var(--bone); font: 500 13.5px/1 var(--f-sans); cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.nav-toggle:hover, .nav-toggle:focus-visible { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 18%, transparent); } /* orange: you can press this */
.nav-toggle.is-on { border-color: var(--accent); background: var(--accent); color: #fff; } /* the accent: the state you chose */
.nav-story h4 { grid-row: 4; margin: 6px 0 0; }
.nav-story li > p:not(.nav-step) { grid-row: 5; color: var(--ash); font-size: 15px; line-height: 1.5; }
@media (max-width: 1100px) { /* a rail: cards side by side, scrolled sideways (snap) */
  .nav-story { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 60vw); overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 2px 12px; }
  .nav-story > li { scroll-snap-align: start; }
}

.compare { --cmp-ink: #0A0A0B; --cmp-paper: #ECE9E3; position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-strong); aspect-ratio: 16 / 10; user-select: none; touch-action: pan-y; background: #fff; } /* fixed colours: the handle and labels sit on white screens in both modes (Focus used to turn them white on white) */
.compare img { position: absolute; left: 0; top: 0; width: 100%; height: auto; pointer-events: none; }
.compare__b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 44px; margin-left: -22px; display: grid; place-items: center; cursor: ew-resize; z-index: 2; }
.compare__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--cmp-ink); }
.compare__handle span { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--cmp-ink); color: var(--cmp-paper); display: grid; place-items: center; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: transform .25s var(--ease-out), box-shadow .25s; }
/* the knob invites a drag: a small lift and the orange "you can move this" halo, as on the Evolution slider (Quewin, 21 Oct) */
.compare__handle { cursor: grab; outline: none; } .compare__handle.is-dragging { cursor: grabbing; }
@media (hover: hover) { .compare__handle:hover span { transform: scale(1.1); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ember) 32%, transparent), 0 6px 20px rgba(0,0,0,.4); } }
.compare__handle:focus-visible span { transform: scale(1.1); box-shadow: 0 0 0 3px var(--cmp-paper), 0 0 0 7px var(--ember); }
.compare__handle.is-dragging span { transform: scale(1.04); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ember) 32%, transparent), 0 6px 20px rgba(0,0,0,.4); }
.compare__label { position: absolute; top: 12px; z-index: 1; padding: 6px 10px; border-radius: 6px; background: rgba(10,10,11,.85); color: var(--cmp-paper); font: 400 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.compare__label--a { left: 12px; } .compare__label--b { right: 12px; }

/* DCS 08: a window you resize (Quewin, 22 Oct). The toolbar picks a device and a brand; the frame morphs from phone to
   tablet to browser window (sizes set by script.js) and the checkout inside reflows by container queries. */
.vp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.vp-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.vp-seg button { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--ember) 55%, transparent); background: transparent; color: var(--bone); font: 500 13.5px/1 var(--f-sans); cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.vp-seg button:hover, .vp-seg button:focus-visible { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 18%, transparent); }
.vp-seg button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.vp-readout { margin: 0; min-width: 15ch; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ash); font-variant-numeric: tabular-nums; }
.vp-stage { position: relative; margin-top: 10px; min-height: 240px; }
.vp-note { margin: 4px 0 0; max-width: 72ch; color: var(--ash); font-size: 13px; line-height: 1.5; } /* the recreation says what it is */
.vp-device { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; overflow: hidden; background: #0c0c0d; box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(255,255,255,.08); }
.vp-chrome { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 0 12px; overflow: hidden; background: #1d1d20; }
.vp-chrome .browser__lights i { width: 8px; height: 8px; }
.vp-chrome__url { flex: 1; max-width: 360px; margin: 0 auto; padding: 3px 0; border-radius: 999px; background: #2a2a2e; color: #9a958d; font-size: 10px; text-align: center; text-transform: none; letter-spacing: 0; }
.vp-screen { position: relative; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: #fff; scrollbar-width: none; }
.vp-screen::-webkit-scrollbar { display: none; }
.vp-sizer { position: relative; }
.vp-page { position: absolute; left: 0; top: 0; transform-origin: 0 0; container: vp / inline-size; pointer-events: none; user-select: none; }
/* the handle: a grip on the window's right edge (orange halo = you can move this), as on the Evolution slider */
.vp-handle { position: absolute; top: 0; width: 28px; display: grid; place-items: center; cursor: ew-resize; touch-action: none; outline: none; }
.vp-handle span { position: relative; display: grid; place-items: center; width: 14px; height: 64px; border-radius: 999px; background: var(--bone); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bone) 12%, transparent), 0 6px 18px rgba(0,0,0,.4); transition: transform .25s var(--ease-out), box-shadow .25s; }
.vp-handle span::before { content: ""; width: 6px; height: 14px; background: linear-gradient(var(--noir) 0 2px, transparent 2px 6px, var(--noir) 6px 8px, transparent 8px 12px, var(--noir) 12px 14px); opacity: .55; }
@media (hover: hover) { .vp-handle:hover span { transform: scale(1.12); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ember) 32%, transparent), 0 6px 18px rgba(0,0,0,.4); } }
.vp-handle:focus-visible span { transform: scale(1.12); box-shadow: 0 0 0 3px var(--graphite), 0 0 0 6px var(--ember); }
.vp-handle.is-dragging span { transform: scale(1.05); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ember) 32%, transparent), 0 6px 18px rgba(0,0,0,.4); }
.vp.is-hinting .vp-handle span { animation: vp-hint 1.3s var(--ease-out) 3; }
@keyframes vp-hint { 0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ember) 10%, transparent), 0 6px 18px rgba(0,0,0,.4); } 50% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--ember) 34%, transparent), 0 6px 18px rgba(0,0,0,.4); } }

/* what shaped it: five short facts in the section 01 card language (information, not controls) */
.vp-influences { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.vp-influences li { display: grid; gap: 6px; align-content: start; padding: 20px 18px; background: var(--graphite); }
.vp-influences strong { font-size: 16px; line-height: 1.3; }
.vp-influences span { color: var(--ash); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 1100px) { .vp-influences { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vp-influences li:last-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .vp-influences { grid-template-columns: 1fr; } }

/* ---- the rebuilt checkout page (virtual px; the frame scales it). Values from the design tokens in the DCS Figma file
   (26 Oct): the phone and tablet frames use the S type scale, the desktop frame the XL scale and two columns. The three
   brands re-theme the same components through these tokens. Typefaces are open stand-ins: BMW Type Next → Inter Tight,
   MINI Serif → Source Serif 4, MINI Sans → Inter, BMW Motorrad → Montserrat (the brand fonts are licensed to BMW Group). */
.vpp {
  --ink: #262626; --muted: #666; --label: #666; --line: #8e8e8e; --rule: #666; --hair: #bbb; --track-off: #8e8e8e;
  --pri: #1c69d4; --sec-bg: transparent; --sec-ink: #262626; --sec-line: #262626; --nav-on: #1c69d4; --track: #262626;
  --bw: 1px; --sel-bw: 1px; --field-bw: 1px; --check-bw: 2px; --check-line: #8e8e8e; --radio-bw: 2px; --head-bw: 1px; --head-line: #bbb;
  --r-card: 4px; --r-field: 3px; --r-btn: 3px; --r-check: 3px;
  --note-bg: #f2f2f2; --note-line: #8e8e8e; --note-left: 1px; --note-icon: #262626;
  --f-head: 'Inter Tight', system-ui, sans-serif; --w-head: 300; --case-head: none; --case-card: none;
  --f-body: 'Inter Tight', system-ui, sans-serif; --w-body: 300; --w-act: 500; --w-bold: 700; --case-act: none;
  /* S scale (phone, tablet) */
  --h2: 28px/40px; --h3: 24px/34px; --sub: 19px/28px; --sub2: 17px/26px; --b1: 16px/26px; --b2: 14px/22px; --act: 14px/22px; --disc: 12px/16px; --lab: 12px/24px;
  --pad: 24px; --stack: 24px; --logos: 30px;
  background: #fff; color: var(--ink); font: var(--w-body) var(--b2) var(--f-body); letter-spacing: 0; text-align: left;
}
.vpp[data-brand="mini"] {
  --ink: #000; --muted: #555; --label: #000; --line: #7a7a7a; --rule: #000; --hair: #b4b4b4; --track-off: #b4b4b4;
  --pri: #006583; --sec-bg: #000; --sec-ink: #fff; --sec-line: #000; --nav-on: #006583; --track: #006583;
  --check-bw: 1px; --check-line: #000; --radio-bw: 1px; --r-card: 8px; --r-field: 999px; --r-btn: 999px; --r-check: 4px;
  --note-bg: #deeff4; --note-line: #006583; --note-left: 4px; --note-icon: #006583; --head-line: #b4b4b4;
  --f-head: 'Source Serif 4', Georgia, serif; --w-head: 700; --case-head: uppercase; --case-card: uppercase;
  --f-body: 'Inter', system-ui, sans-serif; --w-body: 400; --w-act: 500; --w-bold: 700; --h2: 24px/32px;
}
.vpp[data-brand="motorrad"] {
  --ink: #16171a; --muted: #5d5e61; --label: #16171a; --line: #16171a; --rule: #16171a; --hair: #16171a; --track-off: #b4b4b5;
  --pri: #16171a; --sec-line: #16171a; --sec-ink: #16171a; --track: #16171a;
  --bw: 2px; --sel-bw: 2px; --field-bw: 2px; --check-line: #16171a; --head-bw: 2px; --head-line: #16171a;
  --r-card: 0; --r-field: 0; --r-btn: 0; --r-check: 0;
  --note-bg: #f7f7f7; --note-line: #16171a; --note-left: 2px; --note-icon: #16171a;
  --f-head: 'Montserrat', system-ui, sans-serif; --w-head: 800; --case-head: uppercase;
  --f-body: 'Montserrat', system-ui, sans-serif; --w-body: 400; --w-act: 500; --w-bold: 700; --case-act: uppercase; --h2: 22px/28px;
}
.vpp p, .vpp h1, .vpp h2, .vpp h3, .vpp h4, .vpp dl, .vpp dd, .vpp ul { margin: 0; padding: 0; letter-spacing: 0; } /* the case study's own h4/p styles stay out of the recreation */
.vpp ul { list-style: none; }
.vpp hr { width: 100%; height: 0; margin: 0; border: 0; border-top: 1px solid var(--hair); }
.vpp-ic { display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vpp-ic--info { width: 20px; height: 20px; vertical-align: -5px; margin-left: 4px; }
img.vpp-ic--img { width: 20px; height: 20px; object-fit: contain; }
.vpp-wide { display: none; }
/* type roles */
.vpp .vpp-h2 { font: var(--w-head) var(--h2) var(--f-head); text-transform: var(--case-head); }
.vpp .vpp-h3 { font: var(--w-head) var(--h3) var(--f-head); }
.vpp .vpp-sub { font: var(--w-head) var(--sub) var(--f-head); }
.vpp .vpp-sub2 { font: var(--w-head) var(--sub2) var(--f-head); }
.vpp .vpp-b1 { font: var(--w-body) var(--b1) var(--f-body); }
.vpp .vpp-b2 { font: var(--w-body) var(--b2) var(--f-body); }
.vpp .vpp-disc { font: var(--w-body) var(--disc) var(--f-body); }
.vpp[data-brand="mini"] .vpp-card .vpp-sub, .vpp[data-brand="mini"] .vpp-model { text-transform: var(--case-card); }
/* header */
.vpp-head { display: flex; align-items: center; gap: 16px; height: 69px; padding: 0 var(--pad); border-bottom: var(--head-bw) solid var(--head-line); }
.vpp[data-brand="mini"] .vpp-head, .vpp[data-brand="motorrad"] .vpp-head { height: 72px; }
.vpp-logo { height: 36px; width: auto; }
.vpp[data-brand="mini"] .vpp-logo { height: 26px; }
.vpp[data-brand="motorrad"] .vpp-logo { height: 30px; margin-left: auto; }
.vpp-head__tools { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.vpp[data-brand="motorrad"] .vpp-head__tools { margin-left: 0; }
.vpp-menu { margin-left: -10px; font: 700 14px/24px var(--f-body); }
.vpp-nav { align-self: stretch; gap: 8px; margin-left: 8px; }
.vpp-nav span { position: relative; display: flex; align-items: center; padding: 0 8px; font: 400 16px/26px var(--f-body); color: var(--muted); }
.vpp-nav span.is-on { color: var(--ink); }
.vpp-nav span.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--nav-on); }
.vpp[data-brand="mini"] .vpp-nav span { font-size: 18px; line-height: 24px; color: var(--ink); }
/* stepper: "4/6" and six tracks on a phone or tablet, six named steps on a desktop (one list, restyled) */
.vpp-steps { padding: 16px var(--pad); }
.vpp-steps__now { font: var(--w-body) var(--b2) var(--f-body); }
.vpp-steps ol { display: flex; align-items: flex-end; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.vpp-steps li { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vpp-steps li::after { content: ""; height: 4px; background: linear-gradient(to top, var(--track-off) 1px, transparent 1px); } /* a 4px track wrapper with the line at its foot, so every label sits on one line */
.vpp-steps li.is-done::after, .vpp-steps li.is-now::after { background: var(--track); }
.vpp-steps__label { display: none; }
/* vehicle cart bar (phone, tablet) */
.vpp-bar { position: relative; padding: 16px var(--pad) 0; background: linear-gradient(#fff, #c9c9c9); }
.vpp-bar__row { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.vpp-bar p { display: grid; font: var(--w-bold) var(--b2) var(--f-body); }
.vpp-bar__car { height: 70px; width: auto; max-width: 135px; object-fit: contain; }
.vpp-bar__open { display: flex; justify-content: center; height: 28px; }
/* main column */
.vpp-main { display: flex; flex-direction: column; gap: var(--stack); padding: 32px var(--pad) 0; }
.vpp-pay { display: grid; gap: 16px; }
.vpp-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 14px 64px 14px 20px; border: var(--bw) solid var(--line); border-radius: var(--r-card); font: var(--w-body) var(--b2) var(--f-body); }
.vpp-opt.is-on { border: var(--sel-bw) solid var(--ink); }
.vpp-opt__logos { display: flex; align-items: center; }
.vpp-pay-cards { height: var(--logos); width: auto; }
.vpp-pay-badge { height: var(--logos); width: auto; }
.vpp-radio { position: absolute; right: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%; border: var(--radio-bw) solid var(--line); }
img.vpp-radio { border: 0; }
.vpp-section { display: flex; flex-direction: column; gap: 16px; }
.vpp-section > .vpp-disc { margin-top: -4px; }
.vpp-form { display: grid; gap: 16px; }
.vpp-pair { display: grid; gap: 16px; }
.vpp-field { display: grid; }
.vpp-field__label { padding-bottom: 4px; font: var(--w-body) var(--lab) var(--f-body); color: var(--label); }
.vpp-field__box { display: flex; align-items: center; height: 52px; padding: 0 20px; border: var(--field-bw) solid var(--line); border-radius: var(--r-field); font: var(--w-body) var(--b2) var(--f-body); color: #666; }
.vpp-field__hint { padding-top: 4px; font: var(--w-body) var(--disc) var(--f-body); color: var(--muted); }
.vpp-check { display: flex; align-items: flex-start; gap: 12px; font: var(--w-body) var(--b1) var(--f-body); }
.vpp-check i { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px; border: var(--check-bw) solid var(--check-line); border-radius: var(--r-check); }
.vpp-note { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; background: var(--note-bg); border: 1px solid var(--note-line); border-left-width: var(--note-left); font: var(--w-body) var(--b2) var(--f-body); }
.vpp[data-brand="motorrad"] .vpp-note { border-width: 2px; }
.vpp-note .vpp-ic--info { width: 24px; height: 24px; margin: 0; vertical-align: 0; color: var(--note-icon); }
.vpp-note p { flex: 1; }
.vpp-actions { display: grid; gap: 16px; }
.vpp-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: var(--r-btn); font: var(--w-act) var(--act) var(--f-body); text-transform: var(--case-act); }
.vpp-btn--sec { background: var(--sec-bg); color: var(--sec-ink); border: var(--bw) solid var(--sec-line); }
.vpp-btn--sec .vpp-ic { position: absolute; left: 24px; }
.vpp-btn--pri { background: var(--pri); color: #fff; }
.vpp-lock { display: flex; align-items: center; gap: 4px; font: var(--w-body) var(--disc) var(--f-body); }
.vpp-lock img.vpp-ic--img { width: 24px; height: 24px; }
/* below the form on a phone or tablet: the dealer and help (the desktop puts them beside the form) */
.vpp-side { display: none; }
.vpp-after { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; padding: 32px var(--pad) 56px; border-top: 1px solid var(--rule); }
.vpp-dealer__logo { width: 50px; height: 50px; object-fit: contain; object-position: left center; }
.vpp[data-brand="mini"] .vpp-dealer__logo { width: 72px; }
.vpp-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.vpp-link { display: inline-flex; align-items: center; gap: 4px; font: var(--w-act) var(--act) var(--f-body); }
.vpp-link .vpp-ic { width: 20px; height: 20px; }
.vpp-dealer .vpp-disc { line-height: 18px; }
.vpp-after hr { margin: 16px 0; border-top-color: var(--rule); }
/* desktop: header navigation, six named steps, the form beside the cart cards (XL scale, two columns) */
@container vp (min-width: 1024px) {
  .vpp { --h2: 45px/62px; --h3: 34px/48px; --sub: 25px/38px; --sub2: 22px/34px; --b1: 19px/30px; --b2: 16px/26px; --act: 16px/26px; --pad: 64px; --stack: 32px; --logos: 36px; }
  .vpp[data-brand="mini"] { --h2: 40px/48px; }
  .vpp[data-brand="motorrad"] { --h2: 34px/42px; }
  .vpp-wide { display: inline-flex; }
  img.vpp-wide { display: inline; }
  .vpp-narrow { display: none; }
  .vpp-head { height: 83px; padding: 0 var(--pad); }
  .vpp[data-brand="mini"] .vpp-head { height: 72px; }
  .vpp[data-brand="motorrad"] .vpp-head { height: 87px; }
  .vpp-logo { height: 52px; }
  .vpp[data-brand="mini"] .vpp-logo { height: 32px; }
  .vpp[data-brand="motorrad"] .vpp-logo { height: 36px; }
  .vpp-nav { display: flex; }
  .vpp-steps, .vpp-body { box-sizing: border-box; max-width: 1436px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
  .vpp-steps { padding-top: 48px; padding-bottom: 48px; }
  .vpp-steps__now { display: none; }
  .vpp-steps ol { margin: 0; }
  .vpp-steps__label { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px 0 4px; font: 400 16px/26px var(--f-body); color: var(--muted); white-space: nowrap; overflow: hidden; }
  .vpp-steps li.is-done .vpp-steps__label, .vpp-steps li.is-now .vpp-steps__label { color: var(--ink); }
  .vpp-steps__no { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; }
  .vpp-steps__no .vpp-ic { width: 14px; height: 14px; stroke-width: 2; }
  .vpp[data-brand="mini"] .vpp-steps li.is-done .vpp-steps__no { width: 18px; height: 18px; border-radius: 50%; background: #000; color: #fff; }
  .vpp[data-brand="mini"] .vpp-steps li.is-done .vpp-steps__no .vpp-ic { width: 12px; height: 12px; stroke-width: 2.6; }
  .vpp-bar, .vpp-after { display: none; }
  .vpp-body { display: grid; grid-template-columns: minmax(0, 1fr) 414px; gap: 64px; align-items: start; padding-bottom: 72px; }
  .vpp-main { padding: 0; }
  .vpp-pay { gap: 24px; }
  .vpp-opt { padding: 24px 72px 24px 24px; min-height: 84px; }
  .vpp-pair { grid-template-columns: 1fr 1fr; gap: 24px; }
  .vpp-field--half { width: calc(50% - 12px); }
  .vpp-note { padding: 12px 24px; }
  .vpp-section { gap: 16px; }
  .vpp-actions { display: flex; gap: 24px; margin-top: 0; }
  .vpp-btn { width: 256px; }
  .vpp-side { display: grid; gap: 32px; }
  .vpp-card { display: flex; flex-direction: column; gap: 24px; border: var(--bw) solid var(--line); border-radius: var(--r-card); overflow: hidden; }
  .vpp-card--cart { gap: 16px; }
  .vpp-card__tile { display: block; width: 100%; height: auto; }
  .vpp-card--cart > .vpp-card__pad:not(.vpp-card__price) { padding: 0 24px; }
  .vpp-card__pad { padding: 24px; }
  .vpp-card__price { display: flex; flex-direction: column; gap: 16px; padding-top: 0; }
  .vpp-model { font: var(--w-head) var(--sub) var(--f-head); }
  .vpp-model span { display: block; color: #777; }
  .vpp-rows { display: grid; gap: 16px; font: var(--w-body) var(--b2) var(--f-body); }
  .vpp-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
  .vpp-row dd { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
  .vpp-row dd .vpp-ic--info { margin: 0; }
  .vpp-rule { padding-top: 16px; border-top: 1.1px solid var(--rule); display: grid; gap: 8px; }
  .vpp-rows--bold { font-weight: var(--w-bold); }
  .vpp-foot { font: var(--w-body) var(--disc) var(--f-body); color: var(--muted); }
  .vpp-foot sup { margin-right: 6px; }
  .vpp-list { display: grid; font: var(--w-body) var(--b2) var(--f-body); }
  .vpp-card .vpp-sub2 + .vpp-list, .vpp-card .vpp-sub2 + .vpp-b2 { margin-top: -8px; }
  .vpp-card .vpp-links { gap: 16px; }
  .vpp-card.vpp-dealer { gap: 16px; }
  .vpp-card.vpp-dealer .vpp-h3 { font: var(--w-head) var(--sub) var(--f-head); }
}
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 200px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.rail > * { scroll-snap-align: start; }
.rail--desktop { grid-auto-columns: minmax(260px, 340px); }
.rail::-webkit-scrollbar { height: 6px; } .rail::-webkit-scrollbar-thumb { background: var(--slate); border-radius: 3px; }

/* DCS 09 Outcome, the payoff (Quewin, 23 Oct): achievement → human validation → reflection. 100,000+ is the hero card
   (a soft accent glow, a number sized to its card); the supporting results sit beside it in a 2 × 2. The numbers count up
   once (data-cs-count, Flair only). Information, not controls: on hover a card only lifts and its border takes the accent. */
.outcome { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.outcome__card { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--carbon) 70%, var(--slate)); transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s; }
.outcome__card--hero { grid-column: 1 / span 2; grid-row: 1 / span 2; justify-content: flex-end; gap: 10px; padding: clamp(24px, 3vw, 36px); container-type: inline-size; overflow: hidden; isolation: isolate;
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%), color-mix(in srgb, var(--carbon) 70%, var(--slate)); }
.outcome__kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 auto; padding-bottom: 18px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); } /* "Impact", as in the summary card */
.outcome__kicker::before { content: ""; width: 44px; height: 3px; border-radius: 2px; background: var(--accent); } /* the accent line */
.outcome__num { display: block; font: 800 clamp(40px, 4vw, 60px)/1 var(--f-sans); letter-spacing: -.04em; color: var(--bone); font-variant-numeric: tabular-nums; white-space: nowrap; }
.outcome__card--hero .outcome__num { font-size: clamp(56px, 22cqi, 136px); letter-spacing: -.05em; }
.outcome__plus { color: var(--accent-ink); }
.outcome__num small { font-size: .4em; font-weight: 600; letter-spacing: -.01em; color: var(--ash); margin-left: 4px; }
.outcome__label { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--bone); }
.outcome__card--hero .outcome__label { font-size: clamp(19px, 1.8vw, 24px); }
.outcome__label sup { font-size: .7em; color: var(--accent-ink); }
.outcome__note { font-size: 14.5px; line-height: 1.45; color: var(--ash); }
.outcome__foot { margin-top: auto; padding-top: 8px; font-size: 12px; line-height: 1.4; color: var(--ash); }
@media (hover: hover) {
  .outcome__card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 20px 48px rgba(0,0,0,.35); }
  .outcome__card--hero:hover { border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); background: radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 64%), color-mix(in srgb, var(--carbon) 70%, var(--slate)); }
  html.is-calm .outcome__card:hover { box-shadow: 0 16px 36px rgba(28,28,30,.12); }
}
@media (max-width: 899px) { .outcome { grid-template-columns: repeat(2, minmax(0, 1fr)); } .outcome__card--hero { grid-column: 1 / -1; grid-row: auto; min-height: 0; } }
/* after the numbers the page settles: more air before the testimonial, and most before the last line */
.outcome__quote { margin-top: clamp(32px, 6vw, 88px); }
.cs-final { margin-top: clamp(48px, 8vw, 128px); padding-top: 32px; position: relative; }
.cs-final::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 2px; background: var(--accent); }
.cs-final p { margin: 0; max-width: 26ch; text-wrap: balance; font: 400 clamp(30px, 3.6vw, 54px)/1.12 var(--f-serif); font-style: italic; color: var(--bone); } /* ch of its own size: two lines per sentence on a desktop */
.cs-final p + p { margin-top: 10px; color: var(--accent-ink); }
.cs-final--long p + p { max-width: 34ch; } /* a longer last sentence (Trade-In): wider, so it ends in three or four lines, not five */
.pull { padding: 28px 0 28px 28px; border-left: 3px solid var(--accent); }
.pull p { font: 400 clamp(28px, 3vw, 44px)/1.12 var(--f-serif); font-style: italic; max-width: 30ch; }
.pull footer { margin-top: 14px; color: var(--ash); font-size: 15px; }
.reflection { font: 400 clamp(28px, 3.2vw, 48px)/1.12 var(--f-serif); font-style: italic; max-width: 30ch !important; color: var(--bone); }
.reflection em { color: var(--accent-ink); }


/* Version slider */
.vslider { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.vslider > *, .vs__body > * { min-width: 0; } /* the pill rows scroll inside; they must never widen the page */
.vslider .filter-row { margin-bottom: 0; }
.vs__stage { position: relative; }
.vs__frame { position: relative; }
.vs__frame .browser__view { height: clamp(360px, 56vh, 640px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.vs__layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s .5s; transform: scale(.985); }
.vs__layer.is-active { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.vs__img { position: relative; }
.vs__img img { width: 100%; height: auto; display: block; }
.vs__empty { height: 100%; display: grid; place-content: center; text-align: center; color: #5E5A55; background: #F4F3F1; font-size: 16px; padding: 24px; }
.pin { position: absolute; z-index: 2; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: var(--ember); color: var(--noir); font: 600 13px/1 var(--f-mono); display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(255,90,31,.25), 0 8px 18px rgba(0,0,0,.35); transition: transform .2s; }
.pin::after { content: ""; position: absolute; inset: -6px; } /* 44px target */
.pin:hover, .pin[aria-expanded="true"] { transform: scale(1.12); }
.vs__notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vs__note { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--carbon); font-size: 15px; line-height: 1.5; transition: border-color .25s, background .25s; }
.vs__note b { width: 24px; height: 24px; border-radius: 50%; background: var(--ember); color: var(--noir); font: 600 12px/24px var(--f-mono); text-align: center; }
.vs__note.is-hot { border-color: var(--ember); background: #221713; }
@media (max-width: 899px) { .vs__notes { grid-template-columns: 1fr; } }
.vs__track { position: relative; height: 74px; margin-inline: 40px; touch-action: pan-y; } /* room for the end labels, which centre on their dots */
.vs__rail { position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--line-strong); }
.vs__fill { position: absolute; left: 0; top: 22px; height: 2px; background: var(--ember); width: calc(var(--p, 1) * 50%); }
.vs__stop { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 19px; min-width: 44px; min-height: 44px; font: 400 11.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ash); padding-top: 14px; }
.vs__stop::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--graphite); border: 2px solid var(--ash); }
.vs__stop.is-active { color: var(--bone); }
.vs__stop.is-active::before, .vs__stop.is-passed::before { border-color: var(--ember); background: var(--ember); }
.vs__stop:nth-of-type(1) { left: 0; } .vs__stop:nth-of-type(2) { left: 50%; } .vs__stop:nth-of-type(3) { left: 100%; }
.vs__thumb { position: absolute; top: 9px; left: calc(var(--p, 1) * 50%); width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: var(--bone); box-shadow: 0 0 0 6px rgba(236,233,227,.12), 0 6px 18px rgba(0,0,0,.4); cursor: grab; touch-action: none; }
.vs__thumb:active { cursor: grabbing; }
html:not(.has-cursor) .vs__frame .browser__view { cursor: ns-resize; } /* Flair shows the "Scroll" cursor here */
/* Home Evolution: the slider is a vertical timeline beside the page (Earlier on top), with its how-to next to it.
   Since 27 Oct (round 2) the page starts on the section's left edge, under the step filter, and the timeline stands to its right */
.vs__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.vs__side { display: grid; gap: 14px; align-content: start; }
.vs__side-label { color: var(--ash); margin: 0; }
/* 27 Oct: the how-to speaks the case studies' hint language (orange marker = something to do); one line per version says what changed */
.vs__hints { display: grid; gap: 8px; }
.vs__hints .cs-hint { margin: 0; font-size: 14.5px; }
.vs__stop-text { display: grid; gap: 7px; justify-items: inherit; }
.vs__stop-line { display: none; font: 400 14px/1.45 var(--f-sans); letter-spacing: 0; text-transform: none; color: var(--ash); transition: color .25s; }
.vs__now { margin: -4px 0 4px; color: var(--bone); font-size: 15.5px; line-height: 1.5; } /* phones: the chosen version's line, under the track */
.vs__tap { display: none !important; }
@media (max-width: 899px) { html.js .vs__tap { display: flex !important; } }
/* an empty version explains itself (Trade-In didn't exist in Earlier) and offers the way on */
.vs__empty-title { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: #1C1C1E; }
.vs__empty p { max-width: 40ch; margin-inline: auto; line-height: 1.5; }
.vs__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px; margin-top: 18px !important; }
.vs__empty-btn { min-height: 44px; padding: 0 18px; border-radius: var(--r-btn); border: 1px solid #1C1C1E; color: #1C1C1E; font: 500 15px/1 var(--f-sans); transition: border-color .25s, color .25s, transform .25s var(--ease-out); }
.vs__empty-btn:hover, .vs__empty-btn:focus-visible { border-color: var(--ember); color: var(--ember-deep); transform: translateY(-2px); }
.vs__empty-link { color: #1C1C1E; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.vs__empty-link:hover { color: var(--ember-deep); }
/* phones: the zoom badge says the page opens full screen (the same badge as the case-study thumbnails) */
.vs__zoom { display: none; }
@media (max-width: 899px) {
  .vs__zoom { display: block; position: absolute; z-index: 3; top: 50px; right: 10px; width: 30px; height: 30px; border-radius: 8px; background: rgba(10,10,11,.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ECE9E3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5M19 5l-6 6M10 19H5v-5M5 19l6-6'/%3E%3C/svg%3E") center / 16px no-repeat; opacity: .9; pointer-events: none; }
}
@media (min-width: 900px) {
  .vs__body { grid-template-columns: minmax(0, 1fr) 220px; gap: clamp(24px, 3.4vw, 56px); align-items: start; }
  .vs__body > .vs__stage { grid-column: 1; grid-row: 1; }
  .vs__side { grid-column: 2; grid-row: 1; padding-top: 52px; } /* starts level with the page, under the window's address bar */
  .vs__side .vs__track { --vs-vertical: 1; height: 300px; width: auto; margin: 8px 0 92px; touch-action: none; } /* room under Current for its line */
  .vs__side .vs__rail { left: 21px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .vs__side .vs__fill { left: 21px; top: 0; width: 2px; height: calc(var(--p, 1) * 50%); }
  .vs__side .vs__stop { left: 0; top: 0; transform: translateY(-7px); grid-auto-flow: column; justify-items: start; align-items: start; gap: 16px; padding: 0 0 0 15px; font-size: 12px; text-align: left; } /* the dot sits on the line; the name and its line read down from it */
  .vs__side .vs__stop-name { line-height: 14px; }
  .vs__side .vs__stop-line { display: block; width: 158px; }
  .vs__side .vs__stop.is-active .vs__stop-line { color: var(--bone); }
  .vs__side .vs__thumb::before { transform: rotate(90deg); } /* the grip lies across a vertical track */
  .vs__now { display: none; }
  .vs__side .vs__stop:nth-of-type(1) { top: 0; } .vs__side .vs__stop:nth-of-type(2) { top: 50%; } .vs__side .vs__stop:nth-of-type(3) { top: 100%; }
  .vs__side .vs__thumb { left: 7px; top: calc(var(--p, 1) * 50%); margin: -15px 0 0; }
  .vslider--plain .vs__frame .browser__view { height: clamp(460px, 74vh, 860px); }
}

/* DCS 03 · Evolution explorer (.evo-explorer): hotspots on the welcome page of each version (orange = selectable, accent = selected),
   a spotlight around the selected area, the version track drives the story below (Quewin, 20 Oct) */
.evo__track { margin: 4px 40px 0; }
/* the version track speaks section 02's language: orange on hover, the accent for the chosen path; the handle has a grip and lifts */
/* the home's Three generations slider (.vslider) speaks the same language since 27 Oct */
:is(.evo__track, .vslider .vs__track) .vs__fill { background: var(--accent); }
:is(.evo__track, .vslider .vs__track) .vs__stop { cursor: pointer; transition: color .25s; }
:is(.evo__track, .vslider .vs__track) .vs__stop::before { transition: transform .25s var(--ease-out), background .25s, border-color .25s, box-shadow .25s; }
:is(.evo__track, .vslider .vs__track) .vs__stop.is-active::before, :is(.evo__track, .vslider .vs__track) .vs__stop.is-passed::before { border-color: var(--accent); background: var(--accent); }
:is(.evo__track, .vslider .vs__track) .vs__stop:hover, :is(.evo__track, .vslider .vs__track) .vs__stop:focus-visible { color: var(--ember-soft); }
:is(.evo__track, .vslider .vs__track) .vs__stop:hover::before, :is(.evo__track, .vslider .vs__track) .vs__stop:focus-visible::before { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 35%, var(--graphite)); transform: scale(1.3); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ember) 16%, transparent); }
:is(.evo__track, .vslider .vs__track) .vs__thumb { display: grid; place-items: center; transition: transform .25s var(--ease-out), box-shadow .25s; }
:is(.evo__track, .vslider .vs__track) .vs__thumb::before { content: ""; width: 10px; height: 12px; background: linear-gradient(90deg, var(--noir) 0 2px, transparent 2px 4px, var(--noir) 4px 6px, transparent 6px 8px, var(--noir) 8px 10px); opacity: .5; } /* grip: something to hold */
:is(.evo__track, .vslider .vs__track) .vs__thumb:hover, :is(.evo__track, .vslider .vs__track) .vs__thumb:focus-visible { transform: scale(1.14); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ember) 32%, transparent), 0 6px 18px rgba(0,0,0,.4); }
:is(.evo__track, .vslider .vs__track) .vs__thumb:active { transform: scale(1.04); }
.vslider .vs__stop:hover .vs__stop-line { color: var(--bone); }
/* the pointer into the case study, after the slider */
.evolution .evo-more { margin-top: clamp(40px, 5vw, 64px); } /* subsection-level air above the card (.cs-more's own margin needs .cs, so it was 0 here) */
.evo-more .cs-more__title { font-size: 21px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.evo-explorer .vs__frame .browser__view { height: clamp(380px, 58vh, 640px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.evo-img { position: relative; overflow: hidden; }
.evo-img img { display: block; width: 100%; height: auto; }
.evo-box { position: absolute; z-index: 2; border: 2px solid var(--accent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, transparent); box-shadow: 0 0 0 200vmax rgba(10,10,11,.34); pointer-events: none; opacity: 0; transition: opacity .4s, left .5s var(--ease-out), top .5s var(--ease-out), width .5s var(--ease-out), height .5s var(--ease-out); }
.evo-box.is-on { opacity: 1; }
.evo-spot { position: absolute; z-index: 3; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; font: 600 14px/1 var(--f-mono); color: #fff; background: color-mix(in srgb, var(--ember) 74%, transparent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ember) 20%, transparent), 0 6px 16px rgba(0,0,0,.25); opacity: .72; cursor: pointer; transition: transform .3s var(--ease-out), opacity .3s, background .3s, box-shadow .3s; }
.evo-spot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ember) 60%, transparent); animation: spot-pulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes spot-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
.evo-spot:hover, .evo-spot:focus-visible { opacity: 1; transform: scale(1.18); background: var(--ember); box-shadow: 0 0 0 7px color-mix(in srgb, var(--ember) 26%, transparent), 0 8px 20px rgba(0,0,0,.3); }
.evo-spot[aria-pressed="true"] { opacity: 1; transform: scale(1.22); background: var(--accent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 30%, transparent), 0 10px 24px rgba(0,0,0,.35); }
.evo-spot[aria-pressed="true"]::after { animation: none; opacity: 0; }
html.is-calm .evo-spot::after { animation: none; opacity: 0; }
/* the story panel */
.evo__panel { display: grid; gap: 16px; margin-top: 16px; padding: 22px 26px 26px; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 16px; background: var(--carbon); }
.evo__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.evo__tabs { display: flex; gap: 8px; }
.evo__tabs button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ember) 70%, transparent); background: transparent; color: var(--bone); font: 600 13px/1 var(--f-mono); cursor: pointer; transition: background .25s, border-color .25s, color .25s, transform .25s; }
.evo__tabs button:hover, .evo__tabs button:focus-visible { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 22%, transparent); transform: scale(1.06); }
.evo__tabs button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.evo-story { display: grid; gap: 14px; }
.evo-story__title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.015em; }
.evo-story__k { margin: 0 0 6px; color: var(--accent-ink); }
.evo-story__v p:not(.evo-story__k) { margin: 0; max-width: 72ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; }
.evo-story__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px 36px; padding-top: 16px; border-top: 1px solid var(--line); }
.evo-story__cols p:not(.evo-story__k) { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ash); }
.evo-story__cols p:not(.evo-story__k) + p { margin-top: 10px; }
.evo-story__solved { display: grid; gap: 6px; font-size: 16px; line-height: 1.5; }
.evo-story__solved li { position: relative; padding-left: 26px; }
.evo-story__solved li::before { content: "✓"; position: absolute; left: 2px; top: 0; line-height: inherit; color: var(--accent-ink); font-weight: 700; } /* on the first line, also when the text wraps */
.cs-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } /* previous / next buttons under a story */
@media (max-width: 767px) {
  .evo-explorer .vs__frame .browser__view { height: clamp(320px, 52vh, 480px); }
  .evo__panel { padding: 18px 18px 22px; }
  .evo-story__cols { grid-template-columns: 1fr; }
  .evo-spot { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 12px; }
}

/* DCS 04 · Personal Data: the problem (scope chips) → three versions (version cards, scenario chips, viewer, story) →
   the constraint (annotated screen) → the lesson (quote) (Quewin, 20 Oct) */
/* the summary is information, so it looks like section 01's cards (icon, heading, plain list), never like chips */
.pd-scope { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pd-scope__card { display: grid; gap: 8px; align-content: start; padding: 22px 20px; background: var(--graphite); }
.pd-scope__icon { width: 38px; height: 38px; padding: 8px; margin-bottom: 6px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pd-scope__title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.pd-scope__list { display: grid; gap: 6px; font-size: 15px; line-height: 1.45; color: var(--ash); }
.pd-scope__list li { position: relative; padding-left: 14px; }
.pd-scope__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); opacity: .7; }
.pd-versions { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pd-version { position: relative; display: grid; gap: 6px; align-content: start; padding: 16px 18px 18px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--carbon); color: var(--bone); text-align: left; cursor: pointer; font: inherit; transition: border-color .25s, background .25s, transform .25s var(--ease-out); }
.pd-version:not(:last-child)::after { content: "→"; position: absolute; z-index: 1; right: -19px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 400 13px/1 var(--f-sans); color: var(--accent-ink); background: var(--graphite); border: 1px solid var(--line); pointer-events: none; }
.pd-version__no { color: var(--ash); }
.pd-version__title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.pd-version:hover, .pd-version:focus-visible { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 8%, var(--carbon)); transform: translateY(-2px); }
.pd-version:hover .pd-version__no { color: var(--ember-soft); }
.pd-version[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--carbon)); }
.pd-version[aria-pressed="true"] .pd-version__no { color: var(--accent-ink); }
.pd-stage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 36px); align-items: start; } /* the story card starts level with the page viewer */
.pd-viewer { display: grid; gap: 12px; min-width: 0; }
.pd-scenarios { flex-wrap: wrap; overflow: visible; margin-top: 6px; }
.pd-scenarios button { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.pd-browser .browser__chrome { position: relative; }
.pd-zoom { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-strong); background: transparent; color: var(--bone); font-size: 15px; line-height: 1; cursor: zoom-in; transition: border-color .25s, color .25s; }
.pd-zoom:hover, .pd-zoom:focus-visible { border-color: var(--ember); color: var(--ember-soft); }
.pd-view { height: clamp(420px, 62vh, 640px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pd-view img { display: block; width: 100%; height: auto; }
.pd-caption { margin: 0; color: var(--ash); font-size: 15px; line-height: 1.5; min-height: 3em; }
.pd-panel { display: grid; gap: 16px; padding: 22px 24px 24px; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 16px; background: var(--carbon); }
.pd-story { display: grid; gap: 10px; }
.pd-story__title { display: grid; gap: 4px; margin: 0; font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.pd-story__no { color: var(--accent-ink); font-size: 12px; font-weight: 400; }
.pd-story__intro { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--bone); }
.pd-story__k { margin: 8px 0 0; color: var(--accent-ink); }
.pd-list { display: grid; gap: 6px; font-size: 15.5px; line-height: 1.5; color: var(--ash); }
.pd-list li { position: relative; padding-left: 22px; }
.pd-list li::before { content: "✓"; position: absolute; left: 1px; top: 0; color: var(--accent-ink); font-weight: 700; }
.pd-list--still li::before { content: "–"; color: var(--ash); }
.pd-key { margin: 8px 0 0; padding: 14px 16px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--accent) 8%, transparent); font: 400 clamp(19px, 1.6vw, 22px)/1.35 var(--f-serif); font-style: italic; color: var(--bone); }
/* the constraint: the new-customer screen with numbered callouts */
.pd-annot { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 36px); align-items: start; margin-top: 8px; }
.pd-annot__view { height: clamp(360px, 52vh, 560px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pd-annot__img { position: relative; }
.pd-annot__img img { display: block; width: 100%; height: auto; }
.pd-pin { position: absolute; z-index: 2; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--f-mono); color: #fff; background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 26%, transparent), 0 6px 16px rgba(0,0,0,.3); cursor: default; transition: transform .3s var(--ease-out), background .3s, box-shadow .3s, opacity .3s; }
.pd-pin.is-hot { transform: scale(1.35); background: var(--ember); box-shadow: 0 0 0 9px color-mix(in srgb, var(--ember) 28%, transparent), 0 10px 24px rgba(0,0,0,.35); z-index: 3; }
.pd-annot.is-pointing .pd-pin:not(.is-hot):not(.pd-pin--legend) { opacity: .45; } /* the others step back */
.pd-annot__legend { display: grid; gap: 8px; }
.pd-annot__legend li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid transparent; border-radius: 12px; font-size: 16px; line-height: 1.55; color: var(--ash); cursor: default; transition: background .3s, border-color .3s, color .3s; }
.pd-annot__legend li:hover, .pd-annot__legend li.is-hot { color: var(--bone); background: color-mix(in srgb, var(--ember) 8%, transparent); border-color: color-mix(in srgb, var(--ember) 45%, transparent); }
.pd-annot__legend li.is-hot .pd-pin--legend, .pd-annot__legend li:hover .pd-pin--legend { background: var(--ember); }
.pd-pin--legend { position: static; margin: 0; width: 26px; height: 26px; font-size: 12px; box-shadow: none; }
/* the lesson */
.pd-takeaway, .cs-takeaway { margin: var(--cs-block-space) 0 0; padding: clamp(22px, 3vw, 36px) 0 clamp(22px, 3vw, 36px) clamp(18px, 2.4vw, 32px); border-left: 3px solid var(--accent); max-width: 46ch; }
.pd-takeaway p, .cs-takeaway p { margin: 0; font: 400 clamp(22px, 2.3vw, 32px)/1.3 var(--f-serif); font-style: italic; color: var(--bone); }
.pd-takeaway p + p, .cs-takeaway p + p { margin-top: 14px; color: var(--accent-ink); }
/* a pointer to a deeper case study at the end of a chapter: a card with a question, one line and one action */
.cs-more { margin-top: var(--cs-block-space); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; padding: clamp(20px, 2.6vw, 30px); border: 1px solid var(--line); border-radius: 16px; background: var(--carbon); }
.cs-more__text { display: grid; gap: 6px; max-width: 58ch; }
.cs-more__title { margin: 0; }
.cs-more__text p { color: var(--ash); font-size: 16px; line-height: 1.55; }
.cs-more__soon { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); } /* a status, not a dead button: the case study isn't live yet */
.cs-more__soon svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--accent-ink); stroke-width: 1.6; stroke-linecap: round; }
.cs-more__cta { max-width: 100%; height: auto; min-height: var(--h); padding-block: 10px; white-space: normal; } /* a long label may wrap on a phone instead of widening the page */
@media (max-width: 1099px) { .pd-stage, .pd-annot { grid-template-columns: 1fr; } }
@media (max-width: 1099px) { .pd-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .pd-scope { grid-template-columns: 1fr; }
  .pd-versions { gap: 8px; }
  .pd-version { padding: 12px 12px 14px; }
  .pd-version__title { font-size: 14px; }
  .pd-version:not(:last-child)::after { display: none; }
  .pd-view { height: clamp(360px, 56vh, 520px); }
  .pd-panel { padding: 18px 18px 20px; }
}

/* Trade-In 04 · Many ways in, one answer: five routes on the left, the summary and the estimate on the right, lines drawn
   between them by the script from the live layout. Orange = hover (the line too), accent = selected; Summary and Estimate
   light every line, because every route meets there. (Quewin, 27 Oct) */
.routes__map { position: relative; display: grid; grid-template-columns: minmax(0, 236px) minmax(56px, 1fr) auto; align-items: center; margin-top: 4px; }
.routes__list { display: grid; gap: 10px; }
.routes__hub { grid-column: 3; display: flex; align-items: center; }
.route { display: grid; gap: 4px; align-content: center; min-height: 56px; padding: 10px 16px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--carbon); color: var(--bone); text-align: left; font: inherit; cursor: pointer; transition: border-color .25s, background .25s, transform .25s var(--ease-out); }
.route__name { font-size: 16.5px; font-weight: 600; line-height: 1.2; }
.route__tag { font-size: 11px; line-height: 1.2; color: var(--ash); }
.route--hub { min-width: 156px; }
.route:hover, .route:focus-visible { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 8%, var(--carbon)); transform: translateY(-2px); }
.route:hover .route__tag, .route:focus-visible .route__tag { color: var(--ember-soft); }
.route.is-path { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); } /* on the selected route's way to the answer */
.route[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--carbon)); }
.route[aria-pressed="true"] .route__tag { color: var(--accent-ink); }
.routes__join { flex: 0 0 auto; width: 32px; height: 2.5px; background: var(--accent); }
.routes__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.routes__line, .routes__lit { fill: none; stroke-linecap: round; }
.routes__line { stroke: var(--line-strong); stroke-width: 1.5; transition: stroke .25s, opacity .25s; }
.routes__line.is-dim { opacity: .5; }
.routes__line.is-hover { stroke: var(--ember); stroke-width: 2; opacity: 1; }
.routes__lit { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.routes__lit.is-on { stroke-dashoffset: 0; transition: stroke-dashoffset .7s var(--ease-out); } /* draws from the route to the summary; switching off is instant */
html.is-calm .routes__lit.is-on { transition: none; }
.routes__stage { margin-top: 12px; }
.routes__viewer { display: grid; gap: 12px; min-width: 0; }
.routes__view { height: clamp(340px, 52vh, 520px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; }
.routes__view img { display: block; width: 160%; max-width: none; height: auto; margin-left: -6%; } /* closer in on the form: the standalone pages keep their content in the left half */
.cs-ch .seg { justify-self: start; } /* a grid item: keep the toggle its own width */
.routes__p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ash); }
@media (max-width: 767px) {
  .routes__map { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 124px); }
  .routes__list { gap: 8px; }
  .route { min-height: 50px; padding: 8px 12px; }
  .route__name { font-size: 15px; }
  .route__tag { font-size: 10px; }
  .route--hub { min-width: 0; width: 100%; }
  .routes__hub { flex-direction: column; align-items: stretch; }
  .routes__join { width: 2.5px; height: 22px; align-self: center; }
  .routes__view { height: clamp(300px, 46vh, 400px); }
}

/* Trade-In 05 · the same journey in two contexts (the old Before / after): checkout or standalone × start page or estimate */
.ti-swap__controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px clamp(28px, 4vw, 48px); } /* two controls, two dimensions (Quewin, 29 Oct): each labelled, with room between them */
.ti-swap__group { display: grid; gap: 8px; justify-items: start; }
.ti-swap__k { margin: 0; font-size: 11px; color: var(--ash); }
.ti-swap__controls .seg { margin: 0; }
.ti-swap__controls .pill-filter { padding: 4px 0; } /* as tall as the segmented control beside it, so both sit on one line */
.ti-swap .pd-stage { margin-top: 4px; }
.ti-swap__view { aspect-ratio: 1; cursor: zoom-in; }
.ti-swap__view img { position: absolute; left: -1%; top: 0; width: 112%; max-width: none; } /* a little closer in, the same for all four pages so they compare fairly */
.ti-swap .pd-panel { gap: 18px; }
.ti-changes { display: grid; gap: 10px; counter-reset: change; }
.ti-changes li { position: relative; padding: 12px 14px 12px 52px; border: 1px solid transparent; border-radius: 12px; font-size: 15.5px; line-height: 1.55; color: var(--ash); transition: background .3s, border-color .3s, color .3s; }
.ti-changes li::before { counter-increment: change; content: counter(change); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--f-mono); color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.ti-changes strong { color: var(--bone); font-weight: 600; }
.ti-changes li.is-hot { color: var(--bone); background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } /* the change you are looking at */

/* Trade-In 03 · four versions of the step (27 Oct): four version cards; where the step sat is told in each story and shown on its screens (28 Oct) */
.ti-grow .pd-versions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ti-grow .pd-view { overflow-x: hidden; }
.ti-grow .pd-view img { width: 160%; max-width: none; margin-left: -5%; } /* closer in on the Trade-In section: the checkout keeps it in the left half */
.ti-grow .pd-view img[src*="free-text"] { width: 100%; margin-left: 0; } /* a cut-out of the form, not a page */
/* the BMW / MINI switch (Quewin, 28 Oct) lives on the browser bar, because it changes the screen, not the story */
.pd-brand { flex: 0 0 auto; display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--slate); }
.pd-brand button { min-height: 24px; padding: 0 10px; border-radius: 999px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .08em; color: var(--ash); transition: background var(--t-hover), color var(--t-hover); }
.pd-brand button:hover { color: var(--ember-soft); }
.pd-brand button[aria-pressed="true"] { background: var(--bone); color: var(--noir); }
.ti-grow .browser__url { display: block; line-height: 26px; } /* a block, so a long URL ends in an ellipsis instead of being cut at both ends */
@media (max-width: 767px) { .ti-grow .browser__lights { display: none; } .ti-grow .browser__chrome { gap: 10px; padding: 0 10px; } } /* room for the URL beside the switch */
@media (max-width: 1099px) { .ti-grow .pd-versions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ti-grow .pd-version::after { display: none; } }

/* Trade-In 06 · beyond the core journey (29 Oct): two compact stories, each with a kicker. The Eco-Bonus as two moments, the
   skeleton loaders played on the real exports, and a fact that opens on demand */
.ti-beyond { display: grid; gap: clamp(56px, 6vw, 80px); }
.ti-beyond__item { display: grid; gap: 14px; min-width: 0; }
.ti-beyond__item > p, .ti-skel__text > p { margin: 0; max-width: 68ch; }
.ti-beyond__k { color: var(--accent-ink); font-size: 11px; }
.ti-beyond__item > .ti-beyond__k + .ti-beyond__h, .ti-skel__text > .ti-beyond__k + .ti-beyond__h { margin-top: -8px; } /* the kicker belongs to its heading */
.ti-beyond__h { margin: 0; font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; line-height: 1.3; color: var(--bone); }
/* two moments, the idea told upfront and brought back at the estimate; the arrow between them is the journey */
.ti-moments { --mg: clamp(44px, 5vw, 72px); list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mg); }
.ti-moment { position: relative; display: grid; gap: 12px; align-content: start; min-width: 0; }
.ti-moment__k { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 11px; color: var(--bone); }
.ti-moment__k::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); }
.ti-moment__note { margin: 0; max-width: 44ch; font-size: 14.5px; line-height: 1.45; color: var(--ash); }
.ti-moment .shot .browser__view img { width: 150%; left: -4%; max-width: none; } /* closer in: the start page keeps its content in the left half */
.ti-moment--wide .shot .browser__view img { width: 140%; left: -6%; } /* the estimate and the suggestion side by side */
.ti-moment + .ti-moment::before { content: "→"; position: absolute; left: calc(var(--mg) / -2); top: 46%; transform: translate(-50%, -50%); font: 300 26px/1 var(--f-sans); color: var(--accent-ink); }
@media (max-width: 767px) {
  .ti-moments { grid-template-columns: 1fr; --mg: 48px; }
  .ti-moment + .ti-moment::before { content: "↓"; left: 0; top: calc(var(--mg) / -2); transform: translateY(-50%); }
}
.ti-skel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.ti-skel__text { display: grid; gap: 14px; }
.ti-skel__demo { display: grid; gap: 12px; min-width: 0; }
.ti-skel__view { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.ti-skel__view img { position: absolute; left: -4%; top: 0; width: 150%; max-width: none; height: auto; transition: opacity .45s var(--ease-out); } /* closer in, on the form */
.ti-skel__bones { opacity: 0; }
.ti-skel.is-loading .ti-skel__bones { opacity: 1; }
.ti-skel.is-loading .ti-skel__page { opacity: 0; }
.ti-skel__view::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.8) 50%, transparent 60%) 0 0 / 260% 100% no-repeat; transition: opacity .3s; }
.ti-skel.is-loading .ti-skel__view::after { opacity: 1; animation: ti-shine 1.3s linear infinite; } /* the shimmer: light passing over the grey shapes */
@keyframes ti-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ti-skel.is-loading .ti-skel__view::after { animation: none; opacity: 0; } }
.ti-skel__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ti-skel__bar .pd-caption { min-height: 0; font-size: 14px; }
/* the fact (Quewin, 29 Oct): one line, the story behind it on demand. Opening it plays a skeleton of its own: the text's lines
   held as grey bars for a moment, then filled in. A dashed outline, so it reads as an aside, not a card to select */
.ti-fact { display: grid; gap: 8px; margin: 6px 0 0; padding: 16px 18px 12px; border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--line-strong)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 7%, var(--carbon)); font-size: 15px; line-height: 1.55; color: var(--ash); }
.ti-fact p { margin: 0; }
.ti-fact > p:not(.ti-fact__k) { color: var(--bone); }
.ti-fact__k { display: flex; align-items: center; gap: 8px; color: var(--accent-ink); font-size: 11px; }
.ti-fact__bone { width: 16px; height: 16px; fill: currentColor; transition: transform .6s var(--ease-out); }
.ti-fact.is-open .ti-fact__bone { transform: rotate(180deg); }
.ti-fact__more span { border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color .5s var(--ease-out); }
.ti-fact.is-loading .ti-fact__more span { color: transparent; background: linear-gradient(100deg, var(--slate) 35%, color-mix(in srgb, var(--bone) 14%, var(--slate)) 50%, var(--slate) 65%) 0 0 / 300% 100%; animation: ti-shine 1s linear infinite; }
.ti-fact__toggle { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone); transition: color var(--t-hover); }
.ti-fact__plus { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); font: 400 14px/1 var(--f-sans); transition: transform .35s var(--ease-out), border-color var(--t-hover); }
.ti-fact__toggle:hover { color: var(--ember-soft); }
.ti-fact__toggle:hover .ti-fact__plus { border-color: var(--ember); }
.ti-fact__toggle[aria-expanded="true"] .ti-fact__plus { transform: rotate(45deg); }
@media (max-width: 899px) { .ti-skel { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .ti-skel__view { aspect-ratio: 3 / 4; } .ti-skel__view img { left: 0; width: 100%; } }
/* Trade-In 07 · Outcome (29 Oct): the statement, then the three chapters as information cards, each with a small drawing of
   where Trade-In stood. The accent glow grows card by card, as Trade-In did. Hover only lifts, in the accent, as in DCS */
.cs-ch > .ti-statement { max-width: 46ch; font-size: clamp(19px, 1.75vw, 24px); line-height: 1.45; color: var(--bone); text-wrap: pretty; }
.ti-arc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ti-arc__card { --glow: 8%; position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 24px 24px 26px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) var(--glow), transparent), transparent 62%), color-mix(in srgb, var(--carbon) 70%, var(--slate)); font-size: 16px; line-height: 1.55; transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s; }
.ti-arc__card:nth-child(2) { --glow: 15%; }
.ti-arc__card:nth-child(3) { --glow: 26%; }
.ti-arc__card p { margin: 0; }
.ti-arc__k { color: var(--accent-ink); font-size: 11px; }
.ti-arc__glyph { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 0 8px; overflow: visible; }
.ti-arc__glyph .g-line { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.ti-arc__glyph .g-faint { stroke-dasharray: 3 5; }
.ti-arc__glyph .g-out { fill: none; stroke: var(--accent); stroke-width: 2; }
.ti-arc__glyph .g-dot { fill: var(--graphite); stroke: var(--ash); stroke-width: 1.5; }
.ti-arc__glyph .g-acc { fill: var(--accent); transition: filter .4s; }
.ti-arc__glyph .g-in { fill: #fff; }
.ti-arc__glyph .g-ring { fill: none; stroke: var(--accent); stroke-width: 2; }
.ti-arc__glyph .g-halo { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1; stroke-dasharray: 2 4; }
/* Flair: once the cards come in, each drawing draws itself, card by card: the lines first, then Trade-In pops into place.
   The lines go by a class, not [pathLength]: Chrome doesn't restyle SVG children for a mixed-case attribute selector */
.ti-arc__card:nth-child(2) { --i: 1; }
.ti-arc__card:nth-child(3) { --i: 2; }
.ti-arc__glyph * { transform-box: fill-box; transform-origin: center; }
.ti-arc.is-armed .ti-arc__glyph .g-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.ti-arc.is-armed .ti-arc__glyph :is(.g-acc, .g-in, .g-dot, .g-ring, .g-halo, .g-faint) { opacity: 0; transform: scale(.4); }
.ti-arc.is-in .ti-arc__glyph .g-draw { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-out) calc(var(--i, 0) * .18s + .25s); }
.ti-arc.is-in .ti-arc__glyph :is(.g-acc, .g-in, .g-dot, .g-ring, .g-halo, .g-faint) { opacity: 1; transform: none; transition: opacity .35s, transform .7s cubic-bezier(.34, 1.56, .64, 1), filter .4s; transition-delay: calc(var(--i, 0) * .18s + .7s), calc(var(--i, 0) * .18s + .7s), 0s; }
.ti-arc.is-in .ti-arc__glyph .g-in { transition-delay: calc(var(--i, 0) * .18s + .9s), calc(var(--i, 0) * .18s + .9s), 0s; }
@media (hover: hover) and (pointer: fine) {
  .ti-arc__card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 20px 48px rgba(0,0,0,.35); }
  .ti-arc__card:hover .g-acc { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); }
  html.is-calm .ti-arc__card:hover { box-shadow: 0 16px 36px rgba(28,28,30,.12); }
}
@media (max-width: 899px) { .ti-arc { grid-template-columns: 1fr; } .ti-arc__glyph { max-width: 180px; margin-bottom: 12px; } }
.nowrap { white-space: nowrap; }

/* Side-scrolling rows (Quewin, 27 Oct): the side with more to see fades out, and a mouse resting there glides the row along
   (edgeScroll in script.js). No mask at all while nothing is hidden, so nothing is clipped. */
@property --fade-l { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; }
[data-edge].has-more-l, [data-edge].has-more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); transition: --fade-l .35s var(--ease-out), --fade-r .35s var(--ease-out); }
[data-edge].has-more-l { --fade-l: clamp(40px, 9%, 110px); }
[data-edge].has-more-r { --fade-r: clamp(40px, 9%, 110px); }
:root [data-edge].is-gliding { scroll-snap-type: none; } /* above the rows’ own snapping rules */

/* Research */
.method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.method > div { background: var(--graphite); padding: 18px; }
.method dt { font: 400 11px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); margin-bottom: 6px; }
.method dd { margin: 0; font-size: 16px; }
@media (max-width: 767px) { .method { grid-template-columns: 1fr; } }
.thread { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.thread li { position: relative; padding: 18px 10px 0 0; border-top: 2px solid var(--line-strong); font-size: 13.5px; line-height: 1.35; color: var(--ash); }
.thread li::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--graphite); border: 2px solid var(--ash); }
.thread li .mono { display: block; color: var(--bone); margin-bottom: 4px; font-size: 11px; }
.thread li.win { color: var(--bone); border-color: var(--ember); }
.thread li.win::before { background: var(--ember); border-color: var(--ember); }
@media (max-width: 899px) { .thread { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 150px; overflow-x: auto; padding-top: 8px; } }
.qfr { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.qfr > div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; background: var(--carbon); padding: 18px 20px; }
.qfr dt { font: 400 11px/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); }
.qfr dd { margin: 0; font-size: 16.5px; line-height: 1.55; }
@media (max-width: 767px) { .qfr > div { grid-template-columns: 1fr; gap: 4px; } }
.win-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; background: var(--ember); color: var(--noir); font: 600 10.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; margin-right: 6px; vertical-align: 2px; }

/* This site */
.workflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; counter-reset: w; }
.workflow li { position: relative; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--carbon); font-weight: 600; font-size: 17px; display: grid; gap: 6px; align-content: start; }
.workflow li .mono { color: var(--accent-ink); font-weight: 400; }
.workflow li small { font-weight: 400; color: var(--ash); font-size: 14px; }
@media (max-width: 767px) { .workflow { grid-template-columns: repeat(2, 1fr); } }
.refs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.refs li { display: grid; gap: 8px; font: 400 11px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ash); }
.refs img { border-radius: 10px; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; filter: grayscale(.2); }
@media (max-width: 767px) { .refs { grid-template-columns: repeat(3, 1fr); } }
.locks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.locks > div { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--carbon); font-size: 15.5px; line-height: 1.55; }
.locks .mono { color: var(--accent-ink); margin-bottom: 8px; }
@media (max-width: 767px) { .locks { grid-template-columns: 1fr; } }
.scene-cmp { display: grid; gap: 14px; margin-bottom: 36px; }
.scene-cmp__head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.scene-cmp__head h4 { margin: 0; }
.scene-cmp__row { display: grid; grid-template-columns: .55fr 1fr 1fr; gap: 12px; align-items: start; }
.scene-cmp__row figure { margin: 0; display: grid; gap: 8px; }
.scene-cmp__row img { border-radius: 10px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--carbon); }
.scene-cmp__row figure:first-child img { aspect-ratio: 3 / 4; }
.scene-cmp__row figcaption { font: 400 11px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ash); }
.placeholder-frame { aspect-ratio: 16 / 9; border-radius: 10px; border: 1px dashed var(--line-strong); display: grid; place-content: center; text-align: center; color: var(--ash); font: 400 11px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding: 12px; }
@media (max-width: 767px) { .scene-cmp__row { grid-template-columns: 1fr 1fr; } .scene-cmp__row figure:first-child { grid-column: 1 / -1; max-width: 50%; } }
.prompts { display: grid; gap: 12px; }
.prompt { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--carbon); display: grid; gap: 10px; }
.prompt .mono { color: var(--accent-ink); }
.prompt p:not(.mono) { font: 400 14.5px/1.6 var(--f-mono); color: var(--bone); }
.prompt p.neg { color: var(--ash); font-size: 13px; }
.takes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.takes li { display: grid; gap: 8px; }
.takes img { border-radius: 10px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; filter: saturate(.85); }
.takes .why { font-size: 14.5px; line-height: 1.45; }
.takes .why b { display: inline-block; font: 600 10.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--noir); background: var(--ember-soft); padding: 2px 6px; border-radius: 4px; margin-right: 6px; }
.takes .meta { font: 400 10.5px/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ash); }
.checklist { display: flex; flex-wrap: wrap; gap: 8px; }
.checklist li { padding: 12px 16px 12px 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--carbon); position: relative; font-size: 15.5px; }
.checklist li::before { content: "✓"; position: absolute; left: 16px; color: var(--accent-ink); }
.notes { display: grid; gap: 14px; max-width: 76ch; }
.notes li { padding-left: 18px; border-left: 2px solid var(--line-strong); font-size: 16.5px; }

/* Preview + lightbox */
.preview { position: fixed; inset: 0; width: 100vw; height: 100dvh; background: transparent; margin: 0; }
.preview__inner { position: absolute; inset: clamp(12px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; }
.preview__browser { display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.preview__scroll { overflow-y: auto; background: #fff; min-height: 0; overscroll-behavior: contain; }
.preview__scroll img { width: 100%; height: auto; }
.preview__side { background: var(--graphite); border: 1px solid var(--line); border-radius: var(--r-browser); padding: 24px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.preview__side > * { flex-shrink: 0; } /* long copy scrolls the panel; nothing gets squashed (the case-study button shrank to 0 px on phones, 27 Oct) */
.preview__meta { color: var(--accent-ink); }
.preview__title { font-size: 28px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.preview__caption { color: var(--bone); font-size: 16px; }
.preview__label { color: var(--ash); margin-top: 8px; }
.preview__what { color: var(--ash); font-size: 15.5px; }
.preview__block[hidden], .preview__fact[hidden] { display: none; }
.preview__fact + .preview__fact { margin-top: -4px; }
.preview__fact { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--carbon); }
.preview__fact .preview__label { margin-top: 0; color: var(--accent-ink); }
.preview__fact p:last-child { color: var(--bone); font-size: 15px; line-height: 1.5; }
.preview__nav { display: flex; gap: 8px; margin-top: auto; }
.preview__close { align-self: flex-start; }
.preview.is-phone .preview__browser { justify-self: center; width: min(400px, 100%, calc((100dvh - 2 * clamp(12px, 3vw, 40px)) / 2.05)); grid-template-rows: minmax(0, 1fr); padding: 12px; border: 0; border-radius: 48px; background: #050506; box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(255,255,255,.1); }
.preview.is-phone .preview__browser .browser__chrome { display: none; }
.preview.is-phone .preview__scroll { border-radius: 36px; scrollbar-width: none; }
.preview.is-phone .preview__scroll::-webkit-scrollbar { display: none; }
@media (max-width: 899px) { .preview__inner { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; inset: 8px; } .preview__side { max-height: 44vh; padding: 18px; } .preview__title { font-size: 22px; } }
/* Full testimonial */
.quote__cta { margin-top: -6px; }
.tdialog { width: min(760px, calc(100vw - 24px)); max-height: min(86dvh, 900px); margin: auto; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-browser); background: var(--graphite); color: var(--bone); box-shadow: var(--shadow-float); }
.tdialog__panel { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: inherit; }
.tdialog__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(18px, 3vw, 32px); border-bottom: 1px solid var(--line); }
.tdialog__head .eyebrow { margin: 0; }
.tdialog__scroll { overflow-y: auto; overscroll-behavior: contain; padding: clamp(22px, 4vw, 44px) clamp(18px, 4vw, 48px) clamp(26px, 4vw, 44px); }
.tdialog__body { display: grid; gap: 1em; font: 400 clamp(17px, 1.5vw, 19px)/1.6 var(--f-sans); color: var(--bone); max-width: 62ch; }
.tdialog__body p:first-child::before { content: "“"; color: var(--ember); font: italic 400 1.6em/0 var(--f-serif); vertical-align: -.25em; margin-right: .08em; }
.tdialog__by { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ash); font-size: 15px; line-height: 1.6; }
.tdialog__by strong { color: var(--bone); font-weight: 600; font-size: 17px; }
.tdialog__source { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.lightbox { position: fixed; inset: 0; width: 100vw; height: 100dvh; margin: 0; background: rgba(10,10,11,.94); }
.lightbox__scroll { position: absolute; inset: 64px 0 40px; overflow: auto; display: grid; justify-items: center; overscroll-behavior: contain; }
.lightbox__scroll img { width: min(1200px, 94vw); height: auto; border-radius: 8px; }
.lightbox__scroll img.is-phone { width: min(420px, 90vw); }
.lightbox__close { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--carbon); }
.lightbox__cap { position: absolute; left: 16px; right: 140px; top: 22px; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* phones (27 Oct): desktop screens open zoomed in and pan both ways; the toggle takes the caption's place */
.lightbox__zoom { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--carbon); }
.lightbox__zoom[hidden] { display: none; }
.lightbox.has-zoom .lightbox__cap { display: none; }
.lightbox.is-zoomed .lightbox__scroll { justify-items: start; }
.lightbox.is-zoomed .lightbox__scroll img:not(.is-phone) { width: 900px; max-width: none; border-radius: 0; }

/* ---------- 17. Reveals & calm mode ---------- */
html.js.motion [data-reveal] { opacity: 0; }
html.js.motion [data-reveal].is-in { opacity: 1; }
html.is-calm *, html.is-calm *::before, html.is-calm *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
html.is-calm .pillar:hover, html.is-calm .badges__row li { transform: none; }
html.is-calm .slice, html.is-calm .sparkle { transition: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; scroll-behavior: auto !important; }
}

/* content-visibility for far-below-the-fold sections */
.footer { content-visibility: auto; contain-intrinsic-size: auto 700px; }
.noscript-list { display: grid; gap: 12px; padding: 0 var(--gutter); font-size: 22px; }

/* SplitText line masks: leave room for descenders */
.h2 > div, .contact__title > div, .cs-title > div { padding-bottom: .14em; margin-bottom: -.14em; }

/* ---------- Focus mode (light) overrides for hard-coded dark surfaces ---------- */
html.is-calm .nav { background: linear-gradient(to bottom, rgba(244,242,238,.92), rgba(244,242,238,0)); }
html.is-calm .nav.is-solid { background: rgba(244,242,238,.88); box-shadow: 0 1px 0 var(--line); }
html.is-calm .hero__slices, html.is-calm .hero__glow { display: none; } /* Focus: name, photo and the message only */
html.is-calm .about__word--outline { -webkit-text-stroke-color: rgba(28,28,30,.35); }
html.is-calm .about__titlewrap { margin-bottom: clamp(40px, 5vw, 80px); }

/* Focus mode: the video interludes become a calm text + photo row (Flair keeps the scroll-driven video) */
.scene__photo { display: none; }
html.is-calm .scene { height: auto; background: var(--noir); }
html.is-calm .scene__pin { position: relative; height: auto; min-height: 0; overflow: visible; max-width: var(--maxw); margin: 0 auto; padding: clamp(72px, 10vh, 140px) var(--gutter); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
html.is-calm .scene canvas, html.is-calm .scene__poster, html.is-calm .scene__screen { display: none !important; }
html.is-calm .scene__overlay { position: static; padding: 0; background: none; display: block; }
html.is-calm .scene__line { position: static; opacity: 1 !important; visibility: visible !important; transform: none !important; color: var(--bone); text-align: left; display: block; padding: 0; font-size: clamp(36px, 4.4vw, 76px); max-width: 16ch; }
html.is-calm .scene__line--center { inset: auto; }
html.is-calm .scene__photo { display: block; order: 2; margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-float); }
html.is-calm .scene__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { html.is-calm .scene__pin { grid-template-columns: 1fr; } html.is-calm .scene__photo { max-width: 420px; } }
html.is-calm .mode-chip { background: var(--carbon); color: var(--bone); box-shadow: 0 1px 2px rgba(28,28,30,.06); }
html.is-calm .mode-chip:hover { border-color: rgba(28,28,30,.4); }
html.is-calm .mode-chip[aria-pressed="true"] .mode-chip__dot { background: var(--ember); }
html.is-calm .archive__canvas { background: var(--graphite); }
html.is-calm .archive__canvas::before { background-image: radial-gradient(rgba(28,28,30,.12) 1px, transparent 1.2px); }
html.is-calm .archive__hint { background: rgba(255,255,255,.9); }
html.is-calm .acard { box-shadow: 0 10px 28px rgba(28,28,30,.10); }
html.is-calm .acard__phone { background: #1C1C1E; }
html.is-calm .sheet__head { background: rgba(244,242,238,.9); }
html.is-calm .sheet::backdrop, html.is-calm .preview::backdrop { background: rgba(28,28,30,.35); }