/* =============================================================
   Laura Eckert — Portfolio
   Design Engineer · hand-coded static site
   ============================================================= */

/* ---------- Fonts ---------- */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&family=Pinyon+Script&display=swap");

/* ---------- Tokens ---------- */
:root {
  /* dark-first site palette */
  --bg: #121212;
  --text: #F2F1EC;
  --muted: #8C8C84;
  --accent: #FC3802;
  --accent-2: #94FEBC;
  --surface: #1A1A18;
  --line: rgba(242, 241, 236, 0.12);

  /* Scroll-driven canvas darkening (work → shipped). JS sets --stage-shade
     (0–~85) on :root; --canvas is the dark-mixed page/section background so the
     whole stack darkens as one field — no lighter beam leaking between layers. */
  --stage-shade: 0;
  --canvas: color-mix(in srgb, var(--bg), #000 calc(var(--stage-shade) * 1%));

  --ink: #121212;
  --ink-deep: #000000;
  --on-ink: #F2F1EC;
  --hero-ink: #15171A;
  --hero-surface: #121212;
  --hero-cream: #F0EDE6;
  --hero-text-top: #FFFFFF;
  --hero-text-bottom: var(--hero-ink);
  --hero-bloom-top: var(--accent-2);
  --hero-bloom-bottom: var(--hero-cream);
  --hero-split-y: clamp(300px, 42vh, 460px);
  --hero-gradient: linear-gradient(180deg, var(--accent-2) 0%, color-mix(in srgb, var(--accent-2) 50%, var(--accent) 50%) 52%, var(--accent) 100%);
  --hero-gradient-band: linear-gradient(180deg, var(--accent-2) 0%, color-mix(in srgb, var(--accent-2) 50%, var(--accent) 50%) 55%, var(--accent) 100%);

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-script: "Pinyon Script", cursive;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --margin: 80px;
  --header-h: 64px;
  --frame-bottom: 26px;
  --frame-x: max(0px, calc(50% - var(--maxw) / 2));
  --guide-x: var(--frame-x);
  --inset-x: calc(var(--guide-x) + var(--margin));
  --gutter: 24px;
  --section-gap: 180px;
  --section-pad: 80px;
  --maxw: 1440px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease: var(--ease-out);
  --dur: 0.28s;
  --hover: 0.16s;

  /* spacing scale (base 4) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-14: 56px; --space-16: 64px;

  /* radius scale (by nesting level) */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;

  /* elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(242, 241, 236, 0.04);
  --shadow-2: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(242, 241, 236, 0.06);
  --shadow-glow: 0 16px 40px color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-glow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 12px 36px color-mix(in srgb, var(--accent) 20%, transparent);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Placeholder media (swap with real <img>/<video>) ---------- */
.ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface));
  color: var(--muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
}
/* Services preview panels — light stage on dark page (reference layout) */
.svc-item__media .ph {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.24), transparent 62%),
    linear-gradient(150deg, #eceae4, #d8d6d0);
  color: #1A1A1A;
}
.ph--full { position: absolute; inset: 0; }
.story-open__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-portrait__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background-color: var(--bg);
  color-scheme: dark;
}
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 { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.64;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background 0.4s ease, color 0.4s ease;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
a, button, input, textarea { transition: color var(--hover) var(--ease), border-color var(--hover) var(--ease), background-color var(--hover) var(--ease), box-shadow var(--hover) var(--ease); }

::selection { background: var(--accent); color: #fff; }

/* Keyboard focus — overrides custom-cursor's cursor:none */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
body.has-custom-cursor a:focus-visible, body.has-custom-cursor button:focus-visible { cursor: auto; }

/* Lock scroll while preloader curtain is up */
body.is-loading { overflow: hidden; height: 100vh; }

/* Visually-hidden (accessible labels) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Tabular figures for animated/data numbers */
.cs-bignum, .cs-metric__num, .contact__email, .mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .cursorx, .cursorx-frame, .grain-overlay, .atmosphere__canvas { display: none !important; }
  .atmosphere__fallback { opacity: 0 !important; }
  body.mood-base .atmosphere__fallback { opacity: 0.2 !important; }
}

/* ---------- Typography helpers ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 0.9; letter-spacing: 0.012em; text-transform: uppercase; text-wrap: balance; }

.label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}

.mono { font-family: var(--font-mono); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--margin); }

.section { padding-block: var(--section-pad); }
.section + .section { margin-top: calc(var(--section-gap) - var(--section-pad)); }
.section.services { padding-bottom: 0; }

.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }

/* =============================================================
   Custom cursor
   ============================================================= */
/* Reticle de precisão — branco + mix-blend difference => inverte no fundo */
.cursorx,
.cursorx-frame {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 12000;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0;
}

/* --- reticle que segue o mouse --- */
.cursorx {
  width: 0;
  height: 0;
  will-change: transform;
  transition: opacity 0.3s var(--ease);
}
.cursorx__cross,
.cursorx__scroll {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  transition: transform 0.28s var(--ease), opacity 0.25s var(--ease);
}
.cursorx__cross line,
.cursorx__scroll line { stroke: #fff; stroke-width: 1; }
.cursorx__cross .cursorx__dot { fill: #fff; }

.cursorx__ripple {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border: 1px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.35);
  opacity: 0;
  pointer-events: none;
}
.cursorx__ripple.is-pulse {
  animation: cursorx-ripple 0.55s var(--ease) forwards;
}

@keyframes cursorx-ripple {
  0%   { opacity: 0.55; transform: translate(-50%, -50%) scale(0.35); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.6); }
}

.cursorx__readout {
  position: absolute;
  left: 14px;
  top: 8px;
  font: 500 9px/1.2 var(--font-mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.cursorx__label {
  position: absolute;
  left: 17px;
  top: -22px;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

@keyframes cursorx-bob {
  0%, 100% { transform: translate(-50%, -56%); }
  50%      { transform: translate(-50%, -44%); }
}

/* --- estados --- */
.cursorx.is-rest .cursorx__scroll  { opacity: 0; }
.cursorx.is-press .cursorx__cross  { transform: translate(-50%, -50%) scale(0.97); }
.cursorx.is-hover .cursorx__cross  { opacity: 0; }
.cursorx.is-hover .cursorx__readout { opacity: 0; visibility: hidden; }
.cursorx.is-hover .cursorx__scroll { opacity: 0; }
.cursorx.is-hover .cursorx__label  { opacity: 1; transform: translateY(0); }

.cursorx.is-scroll .cursorx__cross   { opacity: 0; }
.cursorx.is-scroll .cursorx__readout { opacity: 0; }
.cursorx.is-scroll .cursorx__scroll  { opacity: 1; animation: cursorx-bob 1.1s var(--ease) infinite; }
.cursorx.is-scroll .cursorx__label   { opacity: 1; transform: translateY(0); }

/* While the MyStory bento is in its built/dwell state, the #apps-scoped
   [data-apps-coord] HUD owns the coordinate readout. Suppress ONLY the
   redundant coordinate text + label + frame chrome so the two readouts don't
   overlap — the reticle itself (.cursorx with its cross/dot/ripple) stays
   visible and tracking, so the user always has a cursor in the bento.
   !important overrides the inline opacity the cursor sets on mousemove. */
body.is-bento-dwell .cursorx__readout,
body.is-bento-dwell .cursorx__label,
body.is-bento-dwell .cursorx-frame {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.is-bento-dwell .cursorx__readout,
  body.is-bento-dwell .cursorx__label,
  body.is-bento-dwell .cursorx-frame { transition: none; }
}

/* --- brackets que travam na bounding box --- */
.cursorx-frame {
  width: 0;
  height: 0;
  transition: opacity 0.2s var(--ease);
}
.cursorx-frame__c {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1px solid #fff;
}
.cursorx-frame__c--tl { left: 0;  top: 0;    border-right: 0; border-bottom: 0; }
.cursorx-frame__c--tr { right: 0; top: 0;    border-left: 0;  border-bottom: 0; }
.cursorx-frame__c--bl { left: 0;  bottom: 0; border-right: 0; border-top: 0; }
.cursorx-frame__c--br { right: 0; bottom: 0; border-left: 0;  border-top: 0; }
.cursorx-frame.is-on { opacity: 1; }

body.has-custom-cursor { cursor: none; }
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor [data-cursor] { cursor: none; }
.is-magnetic {
  transition: translate 0.22s var(--ease), transform 0.18s var(--ease);
  will-change: translate;
}
.is-magnetic:active { transform: scale(0.97); }
@media (hover: none), (max-width: 768px) {
  .cursorx, .cursorx-frame { display: none; }
  body.has-custom-cursor { cursor: auto; }
}

/* =============================================================
   Scroll progress
   ============================================================= */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 85%, #fff 15%), color-mix(in srgb, var(--accent) 55%, #fff 45%));
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent);
  z-index: 1000;
  transition: width 0.08s linear;
}

/* =============================================================
   Header — Cossistant-style: full-width bg + framed container
   ============================================================= */
.header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--header-h);
}
.header__backdrop {
  position: absolute; inset: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: background 0.7s var(--ease), border-color 0.7s var(--ease), backdrop-filter 0.5s var(--ease);
}
.header.is-scrolled .header__backdrop {
  backdrop-filter: blur(14px) saturate(1.2);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}
body.mood-base .header.is-scrolled .header__backdrop {
  background: color-mix(in srgb, var(--hero-surface) 86%, transparent);
}
.header__frame {
  position: relative;
  width: auto;
  max-width: var(--maxw);
  height: 100%;
  margin-inline: auto;
  background: var(--bg);
  border-inline: 1px dashed var(--line);
  transition: background 0.7s var(--ease), border-color 0.7s var(--ease);
}
.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  padding-inline: var(--margin);
}
.header__logo { justify-self: start; }
.header__nav { justify-self: center; }
.header__end { justify-self: end; }
.header__dash {
  position: absolute; left: 50%; bottom: 0;
  width: 100vw; height: 0;
  transform: translateX(-50%);
  border-top: 1px dashed var(--line);
  pointer-events: none;
  transition: border-color 0.7s var(--ease);
}

/* Header bg + lines follow scroll-driven section mood */
body.mood-base .header__backdrop,
body.mood-base .header__frame { background: var(--hero-surface); }
body.mood-base .header { color: var(--text); }
body.mood-base .header__backdrop { border-bottom-color: color-mix(in srgb, var(--text) 12%, transparent); }
body.mood-base .header__frame { border-inline-color: color-mix(in srgb, var(--text) 14%, transparent); }
body.mood-base .header__dash { border-top-color: color-mix(in srgb, var(--text) 14%, transparent); }

body.mood-surface .header__backdrop,
body.mood-surface .header__frame { background: var(--bg); }

body.mood-tint .header__backdrop,
body.mood-tint .header__frame { background: color-mix(in srgb, var(--accent) 4%, var(--bg)); }

body.mood-deep .header__backdrop,
body.mood-deep .header__frame { background: var(--bg); }
body.mood-deep .header { color: var(--on-ink); }
body.mood-deep .header__backdrop { border-bottom-color: color-mix(in srgb, var(--on-ink) 14%, transparent); }
body.mood-deep .header__frame { border-inline-color: color-mix(in srgb, var(--on-ink) 14%, transparent); }
body.mood-deep .header__dash { border-top-color: color-mix(in srgb, var(--on-ink) 14%, transparent); }
body.mood-deep .header__nav a:hover,
body.mood-deep .header__contact:hover { color: var(--accent); }
.header__logo {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(15px, 1.3vw, 19px); line-height: 0.92; letter-spacing: 0.01em;
}
.header__nav { display: flex; gap: clamp(20px, 3.5vw, 64px); align-items: center; }
.header__nav a {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(12px, 1vw, 15px); letter-spacing: 0.04em;
  color: inherit;
  position: relative;
  opacity: 0.72;
  transition: color 0.28s var(--ease), opacity 0.28s var(--ease), transform 0.22s var(--ease);
}
.header__nav a .nav-bracket {
  display: inline-block;
  transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
  opacity: 0.55;
}
.header__nav a:hover,
.header__nav a.is-active { opacity: 1; color: var(--accent); }
.header__nav a:hover .nav-bracket,
.header__nav a.is-active .nav-bracket { opacity: 1; }
.header__nav a:hover .nav-bracket:first-child,
.header__nav a.is-active .nav-bracket:first-child { transform: translateX(-3px); }
.header__nav a:hover .nav-bracket:last-child,
.header__nav a.is-active .nav-bracket:last-child { transform: translateX(3px); }
.header__nav a.is-active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -6px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
}
.header__end { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); }
.header__clock {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, currentColor 52%, transparent);
  white-space: nowrap;
}
@media (max-width: 980px) {
  .header__clock { display: none; }
}
.header__contact {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(12px, 1vw, 15px); letter-spacing: 0.04em;
  position: relative; transition: color 0.3s ease;
}
.header__contact::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 100%;
  background: currentColor; transition: width 0.3s var(--ease);
}
.header__contact:hover { color: var(--accent); }
.header__contact span { display: inline-block; transition: transform 0.3s var(--ease); }
.header__contact:hover span { transform: translate(2px, -2px); }
.header__contact:active { transform: scale(0.97); }


@media (max-width: 860px) {
  :root { --header-h: 56px; --margin: 20px; }
  .header__inner {
    display: flex;
    justify-content: space-between;
  }
  .header__nav { display: none; }
  .header__end { gap: 14px; }
}

/* =============================================================
   Preloader
   ============================================================= */
.preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: grid; place-items: center;
  text-align: center;
  clip-path: inset(0 0 0 0);
}
.preloader::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.04;
  pointer-events: none;
  mix-blend-mode: soft-light;
}
.preloader__inner { position: relative; z-index: 1; }
.preloader.is-done { pointer-events: none; }
.preloader__pct {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-bottom: clamp(20px, 4vh, 36px);
  font-variant-numeric: tabular-nums;
}
.preloader__pct span {
  display: inline-block;
  min-width: 3ch;
  text-align: right;
}
.preloader__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 8vw, 88px); letter-spacing: -0.03em; }
.preloader__name span { display: inline-block; opacity: 0; transform: translateY(10px); }
.preloader__role { margin-top: 12px; font-size: 16px; color: var(--muted); letter-spacing: 1px; opacity: 0; }

/* =============================================================
   Reveal utility
   ============================================================= */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
[data-stagger] > * { opacity: 0; transform: translateY(12px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
[data-stagger].is-in > * { opacity: 1; transform: none; }
.js-motion .section {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  will-change: opacity, transform;
}
.js-motion .section.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* =============================================================
   Atmosphere + film grain
   ============================================================= */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.atmosphere__canvas,
.atmosphere__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.atmosphere__canvas,
.atmosphere__fallback {
  opacity: 0;
  transition: opacity 0.5s ease;
}
body.mood-base .atmosphere__canvas { opacity: 0.14; }
body.mood-base .atmosphere.is-fallback .atmosphere__fallback { opacity: 0.22; }
.atmosphere.is-fallback .atmosphere__canvas { opacity: 0; }
.atmosphere__fallback {
  background:
    radial-gradient(95% 75% at 12% 0%, color-mix(in srgb, var(--accent) 22%, #dffaec 78%), transparent 72%),
    radial-gradient(75% 66% at 86% 8%, color-mix(in srgb, var(--accent) 14%, #ffe6dd 86%), transparent 74%),
    linear-gradient(180deg, #fbfaf5 0%, #f7f6ef 60%, #faf9f4 100%);
}
.grain-overlay {
  position: fixed;
  inset: -60%;
  pointer-events: none;
  z-index: 2;
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: soft-light;
  animation: grain 42s steps(10) infinite;
}
body.mood-base .grain-overlay {
  opacity: 0.06;
  mix-blend-mode: soft-light;
}

/* =============================================================
   Hero → Work burn transition (short scroll seam only)
   ============================================================= */
.burn-bridge {
  position: relative;
  height: calc(100svh + var(--burn-scroll, 32vh));
  margin-top: -1px;
  z-index: 20;
  pointer-events: none;
}
.burn-bridge__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.burn-bridge__canvas {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.25s var(--ease);
}
.burn-bridge.is-complete .burn-bridge__sticky {
  opacity: 0;
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .burn-bridge { display: none; height: 0; }
  .section.work { margin-top: 0; }
}

.section.work {
  margin-top: calc(-100svh - var(--burn-scroll, 32vh));
  position: relative;
  z-index: 10;
  background: var(--bg);
  color: var(--on-ink);
  padding: 0;
}

/* =============================================================
   Hero
   ============================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  padding: clamp(120px, 16vh, 180px) var(--margin) 48px;
  isolation: isolate;
  overflow: hidden;
  background: var(--hero-gradient-band);
  color: var(--text);
}
/* Split backdrop — dark top + colored gradient band */
.hero__split {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.hero__split-top {
  position: absolute; inset: 0 0 auto;
  height: var(--hero-split-y);
  background: var(--hero-surface);
}
.hero__split-top::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 16%, transparent) 0.55px, transparent 0.55px);
  background-size: 5px 5px;
  opacity: 0.45;
  mix-blend-mode: soft-light;
}
.hero__split-bottom {
  position: absolute; inset: auto 0 0;
  top: var(--hero-split-y);
  background: var(--hero-gradient-band);
}
.hero__grain {
  position: absolute; inset: 0; z-index: 1;
  height: var(--hero-split-y);
  opacity: 0.05; pointer-events: none;
  background-image: var(--grain);
  animation: grain 60s steps(10) infinite;
  mix-blend-mode: soft-light;
}
@keyframes grain {
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-2%,-3%)} 30%{transform:translate(3%,-2%)}
  50%{transform:translate(-1%,2%)} 70%{transform:translate(2%,1%)} 90%{transform:translate(-3%,1%)}
}

/* Giant headline — Design + Engineer on one line, split at the fold */
.hero__head-wrap {
  position: absolute; z-index: 3; pointer-events: none;
  left: var(--margin); right: var(--margin);
  top: calc(var(--hero-split-y) - clamp(52px, 7.5vh, 92px));
}
.hero__index {
  position: absolute; top: -1.7em; left: 0;
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(10px, 0.85vw, 13px); letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 45%, transparent);
}
.hero__head {
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: baseline; gap: 0.2em;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  line-height: 0.82; letter-spacing: 0.018em;
}
.hero__head-word {
  display: block; white-space: nowrap;
  font-size: clamp(40px, 10.2vw, 152px);
  text-shadow: none;
  /* Poster inversion — accent on dark top, cream on gradient bottom */
  color: transparent;
  background-image: linear-gradient(
    to bottom,
    var(--hero-text-top) 0,
    var(--hero-text-top) var(--hero-split-y),
    var(--hero-text-bottom) var(--hero-split-y),
    var(--hero-text-bottom) 100%
  );
  background-attachment: fixed;
  -webkit-background-clip: text;
  background-clip: text;
}
.hero__head-word--design,
.hero__head-word--engineer {
  align-self: auto;
  margin: 0;
}

/* Based in ... — anchored to a measurement hairline */
.hero__based {
  position: absolute; z-index: 4;
  top: clamp(118px, 15vh, 182px); right: var(--margin);
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(10px, 1vw, 13px); letter-spacing: 0.22em;
  text-transform: uppercase; white-space: nowrap;
  color: color-mix(in srgb, currentColor 55%, transparent);
  display: inline-flex; align-items: center; gap: 12px;
}
.hero__based::before {
  content: ""; width: 30px; height: 1px;
  background: color-mix(in srgb, currentColor 30%, transparent);
}

/* Disciplines — numbered index */
.hero__services {
  position: absolute; z-index: 3;
  top: calc(var(--hero-split-y) + clamp(28px, 5vh, 72px)); left: var(--margin);
  display: grid; gap: 6px;
  counter-reset: disc;
}
.hero__services li {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(18px, 2.2vw, 34px); line-height: 1.04; letter-spacing: 0.016em;
  display: flex; align-items: baseline; gap: 16px;
  color: color-mix(in srgb, var(--hero-cream) 88%, var(--hero-ink));
}
.hero__services li::before {
  content: counter(disc, decimal-leading-zero);
  counter-increment: disc;
  font-family: var(--font-mono); font-weight: 600;
  font-size: 0.32em; letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--hero-cream) 70%, var(--hero-ink));
  transform: translateY(-0.4em);
}

/* Intro paragraph */
.hero__intro {
  position: absolute; z-index: 3;
  left: var(--margin); bottom: clamp(52px, 11vh, 120px);
  max-width: 40ch; text-align: left;
  font-family: var(--font-mono); font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.7; letter-spacing: 0.04em; text-transform: uppercase;
  color: color-mix(in srgb, var(--hero-cream) 68%, transparent);
}

/* Recent work cue */
.hero__recent {
  position: absolute; z-index: 3; right: var(--margin); bottom: 36px;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(15px, 1.5vw, 22px); letter-spacing: 0.05em;
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--hero-cream);
}
.hero__recent::before {
  content: ""; width: 34px; height: 1px;
  background: color-mix(in srgb, var(--hero-cream) 42%, transparent);
  transition: width 0.3s var(--ease);
}
.hero__recent:hover::before { width: 52px; }
.hero__recent span { display: inline-block; transition: transform 0.3s var(--ease); }
.hero__recent:hover span { transform: translate(3px, 3px); }
.hero__recent:active { transform: scale(0.97); }

/* Hero entrance — orchestrated reveal after preloader */
.js-motion .hero:not(.is-entered) .hero__index,
.js-motion .hero:not(.is-entered) .hero__head-word,
.js-motion .hero:not(.is-entered) .hero__based,
.js-motion .hero:not(.is-entered) .hero__services li,
.js-motion .hero:not(.is-entered) .hero__intro,
.js-motion .hero:not(.is-entered) .hero__recent {
  opacity: 0;
  transform: translateY(clamp(16px, 2.5vh, 28px));
}
.js-motion .hero.is-entered .hero__index,
.js-motion .hero.is-entered .hero__head-word,
.js-motion .hero.is-entered .hero__based,
.js-motion .hero.is-entered .hero__services li,
.js-motion .hero.is-entered .hero__intro,
.js-motion .hero.is-entered .hero__recent {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.75s var(--ease-out),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-motion .hero.is-entered .hero__head-word--design { transition-delay: 0.06s; }
.js-motion .hero.is-entered .hero__head-word--engineer { transition-delay: 0.12s; }
.js-motion .hero.is-entered .hero__index { transition-delay: 0s; }
.js-motion .hero.is-entered .hero__based { transition-delay: 0.22s; }
.js-motion .hero.is-entered .hero__services li:nth-child(1) { transition-delay: 0.28s; }
.js-motion .hero.is-entered .hero__services li:nth-child(2) { transition-delay: 0.34s; }
.js-motion .hero.is-entered .hero__services li:nth-child(3) { transition-delay: 0.40s; }
.js-motion .hero.is-entered .hero__intro { transition-delay: 0.46s; }
.js-motion .hero.is-entered .hero__recent { transition-delay: 0.52s; }

/* Mobile: stack everything */
@media (max-width: 860px) {
  .hero {
    --hero-split-y: clamp(220px, 36vh, 320px);
    min-height: 100svh;
    padding: 108px 20px 56px;
    overflow: hidden;
  }
  .hero__head-wrap {
    position: absolute; left: 20px; right: 20px; width: auto;
    top: calc(var(--hero-split-y) - clamp(40px, 6.5vh, 72px));
  }
  .hero__head {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.14em;
  }
  .hero__head-word {
    font-size: clamp(36px, 11vw, 88px);
    white-space: nowrap;
  }
  .hero__index { top: -1.2em; left: 50%; transform: translateX(-50%); }
  .hero__based {
    position: absolute; top: clamp(88px, 12vh, 120px); right: 20px;
    margin-top: 0; letter-spacing: 0.2em;
  }
  .hero__services {
    position: absolute; left: 20px; right: 20px;
    top: calc(var(--hero-split-y) + clamp(24px, 6vh, 48px));
    margin-top: 0; justify-items: center;
  }
  .hero__intro {
    position: absolute; left: 20px; right: 20px; bottom: 72px;
    margin-top: 0; max-width: none; text-align: center;
  }
  .hero__recent {
    position: absolute; left: 50%; bottom: 24px;
    transform: translateX(-50%); margin-top: 0;
  }
  .hero__recent:active { transform: translateX(-50%) scale(0.97); }
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px; border-radius: 100px;
  font-size: 15px; font-weight: 500;
  transition: transform var(--hover) var(--ease-out), background var(--hover) var(--ease-out), color var(--hover) var(--ease-out), border-color var(--hover) var(--ease-out), box-shadow var(--hover) var(--ease-out);
}
.btn--solid { background: var(--text); color: var(--bg); }
.btn--ghost { border: 1px solid var(--line); }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
  .btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
}

.scroll-hint {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: grid; place-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  animation: hint 2.4s ease-in-out infinite;
}
@keyframes hint { 0%,100%{opacity:0.3;transform:translate(-50%,0)} 50%{opacity:0.8;transform:translate(-50%,6px)} }

/* =============================================================
   Section heading
   ============================================================= */
.sec-head { margin-bottom: 56px; }
.sec-head__title { font-size: clamp(24px, 4vw, 36px); margin-top: 12px; letter-spacing: 0.016em; line-height: 0.92; }
.sec-head__sub { color: var(--muted); margin-top: 8px; max-width: 440px; }

/* =============================================================
   Selected Work
   ============================================================= */
/* Selected Work — pinned 3D card-stack on a dark canvas */
.work .label { color: color-mix(in srgb, var(--on-ink) 60%, transparent); }
.work .sec-head__title { color: var(--on-ink); }
.work .chip { border-color: color-mix(in srgb, var(--on-ink) 22%, transparent); color: color-mix(in srgb, var(--on-ink) 78%, transparent); }

.works-pin { position: relative; height: 340vh; }
.works-stage { position: sticky; top: 0; height: 100vh; overflow: hidden;
  /* Mockup full size; panel sits below — only sill overlaps image base */
  --works-float-top: clamp(108px, 16vh, 152px);
  --works-media-h: 56vh;
  --works-media-w: min(1040px, 88vw);
  --works-sill-h: clamp(260px, 38vh, 420px);
  --works-body-h: clamp(280px, 32vh, 380px);
  --works-body-pad-top: clamp(72px, 11vh, 120px);
  --works-media-overlap: clamp(8px, 1.5vh, 24px);
  --works-body-top: calc(var(--works-float-top) + var(--works-media-h) - var(--works-media-overlap));
  --works-shadow: 0 28px 72px rgba(0, 0, 0, 0.62), 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(242, 241, 236, 0.05);
}


.works-stage__rail {
  position: absolute; z-index: 4;
  left: max(14px, calc(var(--guide-x) / 2));
  top: 50%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: clamp(12px, 1.15vw, 14px);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1;
  color: color-mix(in srgb, var(--on-ink) 58%, transparent);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.works-stage__head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  padding: 110px var(--margin) 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
}

.works-stage__display {
  position: absolute; z-index: 1;
  left: var(--guide-x); right: var(--guide-x);
  top: clamp(148px, 20vh, 200px);
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: center;
  gap: 0.24em;
  margin: 0;
  padding: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(64px, 10vw, 180px);
  text-transform: uppercase; line-height: 1; letter-spacing: 0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--on-ink) 26%, transparent);
  pointer-events: none; user-select: none;
  will-change: transform, opacity;
  transform-origin: center top;
}
.works-counter { font-family: var(--font-mono); font-size: 14px; color: color-mix(in srgb, var(--on-ink) 55%, transparent); letter-spacing: 1px; }
.works-counter__cur { color: var(--accent); }

/* Per-case structural panel — slides top-to-bottom as one rigid block */
.proj__panel {
  position: absolute; z-index: 1;
  top: calc(var(--works-body-top) - var(--works-sill-h));
  left: var(--guide-x); right: var(--guide-x);
  transform: translateY(0);
  display: grid; grid-template-rows: var(--works-sill-h) minmax(var(--works-body-h), auto);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-ink) 6%, transparent);
  pointer-events: none;
  transform-origin: center top;
  backface-visibility: hidden;
  will-change: transform;
}
.proj__panel-sill {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #121110;
}
/* Colorful mesh shader — Mitra-style blurred atmosphere per case */
.proj__panel-sill::before {
  content: "";
  position: absolute;
  inset: -45%;
  background:
    radial-gradient(ellipse 58% 72% at 22% 42%, var(--mesh-a, #e8b896) 0%, transparent 58%),
    radial-gradient(ellipse 52% 68% at 78% 38%, var(--mesh-b, #8eb4d4) 0%, transparent 54%),
    radial-gradient(ellipse 64% 80% at 52% 68%, var(--mesh-c, #d4956a) 0%, transparent 56%),
    radial-gradient(ellipse 40% 55% at 88% 72%, var(--mesh-d, #f0ddd0) 0%, transparent 52%),
    linear-gradient(128deg, var(--mesh-base-a, #c9a07a) 0%, var(--mesh-base-b, #7a9cb8) 52%, var(--mesh-base-c, #b88462) 100%);
  filter: blur(32px) saturate(1.2);
  transform: scale(1.12);
  will-change: transform;
}
/* Ordered-dither canvas (Caret-style) — over the smooth mesh, under the sheen */
.proj__sill-dither {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.proj__panel-sill::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 38%, rgba(0, 0, 0, 0.22) 100%),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 55%);
}
.proj[data-card="0"] { --mesh-a: #7ec8be; --mesh-b: #e8a882; --mesh-c: #5a9fd4; --mesh-d: #f2d4bc; --mesh-base-a: #6ab0a8; --mesh-base-b: #d4956a; --mesh-base-c: #4a88b0; }
.proj[data-card="1"] { --mesh-a: #e8a0b8; --mesh-b: #9ab8e0; --mesh-c: #d4848a; --mesh-d: #f0d0c8; --mesh-base-a: #c87898; --mesh-base-b: #88a8d0; --mesh-base-c: #b87078; }
.proj[data-card="2"] { --mesh-a: #fc9860; --mesh-b: #94d4b0; --mesh-c: #e87848; --mesh-d: #f8dcc0; --mesh-base-a: #e07040; --mesh-base-b: #78c0a0; --mesh-base-c: #d06030; }
.proj__panel-body {
  display: grid; grid-template-columns: 1fr 1px 1fr;
  min-height: var(--works-body-h);
}
.proj__panel-divider { background: var(--line); }
.proj__panel-col {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: var(--works-body-h);
  padding: var(--works-body-pad-top) clamp(28px, 4.5vw, 56px) clamp(24px, 3.2vw, 40px);
  gap: clamp(10px, 1.4vh, 16px);
}
.proj__panel-col--meta {
  align-items: flex-start; justify-content: flex-end;
}
.proj__panel-col--meta .chips { margin-top: 0; }
.proj__panel-col--meta .proj__cta {
  align-self: flex-start;
  margin-top: 0;
  pointer-events: none;
  border-color: color-mix(in srgb, var(--on-ink) 28%, transparent);
  color: var(--on-ink);
}
.proj:hover .proj__cta {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}
/* Work-in-progress cards — inner case not published yet */
.proj--wip { cursor: default; }
.proj__cta--wip {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  border-color: color-mix(in srgb, var(--on-ink) 20%, transparent);
  color: color-mix(in srgb, var(--on-ink) 55%, transparent);
}
.proj--wip:hover .proj__cta--wip {
  border-color: color-mix(in srgb, var(--on-ink) 20%, transparent);
  color: color-mix(in srgb, var(--on-ink) 55%, transparent);
  transform: none;
}
.proj__panel .proj__title {
  font-size: clamp(40px, 7.2vw, 96px);
  line-height: 0.88;
  margin-left: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.proj__panel .proj__initial { display: none; }
.proj__panel .proj__problem {
  font-size: clamp(13px, 1.25vw, 15px);
  line-height: 1.55;
  max-width: 34ch;
  color: color-mix(in srgb, var(--on-ink) 62%, transparent);
}
.proj__panel .proj__year {
  margin-top: clamp(12px, 2vh, 18px);
  font-size: 13px;
}

.works { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.proj {
  position: absolute; inset: 0;
  transform-origin: center center; backface-visibility: hidden;
  will-change: opacity;
  pointer-events: none;
}
/* Front layer — image card with scroll transform */
.proj__float {
  position: absolute; z-index: 2;
  top: var(--works-float-top);
  left: 50%; width: var(--works-media-w);
  transform: translateX(-50%);
  transform-origin: center center; backface-visibility: hidden;
  will-change: transform;
  pointer-events: auto;
}
.proj__head { margin-bottom: 0; }
.proj__title { position: relative; display: inline-block; color: var(--on-ink); font-size: clamp(36px, 6.5vw, 88px); line-height: 0.88; margin-left: 0; }
.proj__initial { display: none; }
.proj__media { position: relative; overflow: hidden; border-radius: var(--r-lg); width: 100%; aspect-ratio: 16 / 9; max-height: 56vh; margin-inline: auto; box-shadow: var(--works-shadow); }
.work .proj__img.ph {
  background: linear-gradient(155deg, #1c1a18 0%, #121110 100%);
  color: color-mix(in srgb, var(--on-ink) 42%, transparent);
}
.proj:hover .proj__media { box-shadow: 0 36px 88px rgba(0, 0, 0, 0.68), 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(242, 241, 236, 0.07); }
.proj__img { position: absolute; inset: 0; }
.proj__img,
.proj__media picture,
.cs-hero__media picture {
  position: absolute;
  inset: 0;
  display: block;
}
.proj__img,
.cs-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* --- Banner reveal: soft radial mask bloom on the colored sill (behind the mock; mock stays clean) --- */
.work .proj__panel-sill {
  --reveal: 1;
  -webkit-mask-image: radial-gradient(125% 155% at 50% 45%, #000 0%, #000 56%, transparent 100%);
          mask-image: radial-gradient(125% 155% at 50% 45%, #000 0%, #000 56%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: calc(var(--reveal) * 175%) calc(var(--reveal) * 210%);
          mask-size: calc(var(--reveal) * 175%) calc(var(--reveal) * 210%);
  will-change: mask-size;
}
.proj__problem { font-size: clamp(14px, 1.45vw, 18px); max-width: 38ch; line-height: 1.55; color: color-mix(in srgb, var(--on-ink) 76%, transparent); }
.proj__year { font-family: var(--font-mono); font-size: 14px; color: color-mix(in srgb, var(--on-ink) 50%, transparent); margin-top: auto; }
.preloader__name { text-transform: uppercase; }

/* Static fallback (mobile + reduced-motion): no pin, normal stack */
.work--static .works-pin { height: auto; }
.work--static .works-stage { position: static; height: auto; overflow: visible; padding: 120px 0 40px; }
.work--static .works-stage__head { position: static; padding: 0 var(--margin) 48px; display: flex; justify-content: space-between; }
.work--static .works-stage__display {
  position: static;
  justify-content: center;
  padding: 0 var(--margin) clamp(40px, 8vh, 72px);
  color: transparent;
}
.work--static .works-stage__rail {
  position: static; transform: none; writing-mode: horizontal-tb;
  font-size: clamp(24px, 4vw, 36px); letter-spacing: 0.016em;
  color: var(--on-ink); padding: 0 var(--margin) 8px;
}
.work--static .works { position: static; inset: auto; display: flex; flex-direction: column; gap: 0; padding-inline: var(--guide-x); pointer-events: auto; }
.work--static .proj { position: static; inset: auto; transform: none; opacity: 1; width: auto; margin-bottom: clamp(100px, 14vh, 160px); }
.work--static .proj:last-child { margin-bottom: 0; }
.work--static .works-stage {
  --works-body-top: auto;
  --works-media-h: none;
  --works-sill-h: 0px;
  --works-body-h: auto;
}
.work--static .proj__panel { position: relative; top: auto; left: auto; right: auto; transform: none !important; grid-template-rows: auto; }
.work--static .proj__panel-sill { display: none; }
.work--static .proj__float { position: relative; top: auto; left: auto; width: min(1040px, 100%); margin: clamp(-16vh, -130px, -70px) auto clamp(40px, 6vh, 72px); transform: none !important; }
.work--static .proj__panel .proj__title { font-size: clamp(40px, 7.2vw, 96px); margin-left: 0; }
.work--static .proj__panel .proj__problem { font-size: clamp(14px, 1.45vw, 18px); color: color-mix(in srgb, var(--on-ink) 76%, transparent); }
.work--static .proj__media { max-height: 56vh; }
.work--static .proj__panel-body { display: block; padding-top: clamp(200px, 42vw, 360px); }
.work--static .proj__panel-divider { display: none; }
.work--static .proj__panel-col--copy { padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.work--static .proj__panel-col--meta { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
@media (max-width: 768px) {
  .works-pin { height: auto; }
  .works-stage { position: static; height: auto; overflow: visible; padding: 100px 0 40px; }
  .works-stage__rail {
    position: static; transform: none; writing-mode: horizontal-tb;
    font-size: clamp(22px, 6vw, 30px); letter-spacing: 0.04em;
    color: var(--on-ink); padding: 0 20px 8px;
  }
  .works-stage__head { position: static; padding: 0 20px 40px; }
  .works-stage__display {
    position: static;
    justify-content: center;
    padding: 0 20px clamp(32px, 6vh, 56px);
    font-size: clamp(56px, 16vw, 96px);
  }
  .works { position: static; inset: auto; display: flex; flex-direction: column; gap: 0; padding: 0 var(--guide-x); pointer-events: auto; }
  .proj { position: static; inset: auto; transform: none !important; opacity: 1 !important; margin-bottom: clamp(80px, 12vh, 140px); }
  .proj:last-child { margin-bottom: 0; }
  .proj__panel { position: relative; top: auto; left: auto; right: auto; transform: none !important; grid-template-rows: auto; }
  .proj__panel-sill { display: none; }
  .proj__float { position: relative; top: auto; left: auto; width: 100%; margin: -88px auto 48px; transform: none !important; }
  .proj__panel .proj__title { font-size: clamp(36px, 10vw, 52px); }
  .proj__panel-body { grid-template-columns: 1fr; }
  .proj__panel-divider { display: none; }
  .proj__panel-col--copy { border-bottom: 1px solid var(--line); }
  .proj__panel-col--meta { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .proj__media { max-height: none; }
}
.case-card { display: block; position: relative; }
.case-card__media {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  aspect-ratio: 16 / 9; background: var(--bg);
  box-shadow: var(--shadow-1); transition: box-shadow 0.4s var(--ease);
}
.case-card:hover .case-card__media { box-shadow: var(--shadow-2); }
.case-card__media img, .case-card__media video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.case-card__media video { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; }
.case-card:hover .case-card__media img { transform: scale(1.03); }
.case-card:hover .case-card__media video { opacity: 1; }
.case-card { transition: transform 0.4s var(--ease); }
.case-card:hover { transform: translateY(-4px); }
.case-card__meta { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 24px; gap: 24px; flex-wrap: wrap; }
.case-card__name { font-size: clamp(24px, 3vw, 30px); }
.case-card__problem { color: var(--muted); max-width: 400px; margin-top: 10px; }
.case-card__year { color: var(--muted); font-size: 14px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.chip {
  font-size: 12px; letter-spacing: 0.3px;
  padding: 5px 12px; border-radius: 100px;
  border: 1px solid var(--line); color: var(--muted);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.case-card__cta { margin-top: 20px; font-size: 15px; color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s ease, transform 0.3s var(--ease); }
.case-card:hover .case-card__cta { opacity: 1; transform: none; }

/* Featured (single, hero) case */
.case-card--featured .case-card__media { aspect-ratio: 16 / 8; box-shadow: var(--shadow-2); }
.case-card--featured .case-card__year {
  position: absolute; top: 20px; right: 20px;
  padding: 6px 14px; border-radius: 100px; font-size: 13px;
  background: color-mix(in srgb, var(--bg) 75%, transparent); backdrop-filter: blur(8px);
}
.case-card--featured .case-card__meta { align-items: flex-end; margin-top: 32px; }
.case-card--featured .case-card__name { font-size: clamp(40px, 6vw, 64px); margin-top: 12px; }
.case-card--featured .case-card__problem { font-size: clamp(18px, 2.2vw, 22px); max-width: 520px; margin-top: 14px; }
.case-card--featured .case-card__cta { opacity: 1; transform: none; font-size: 17px; }
@media (max-width: 768px) { .case-card--featured .case-card__media { aspect-ratio: 4 / 3; } }

/* =============================================================
   Shipped — bento grid
   ============================================================= */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gutter); }
.bento__item {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  grid-column: span 2;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.bento__item--lg { grid-column: span 3; }
.bento__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-2), var(--accent-glow); }
.bento__shot { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.bento__body { padding: 20px 22px; }
.bento__name { font-size: 20px; }
.bento__copy { color: var(--muted); font-size: 15px; margin-top: 6px; }
.bento__overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 0 22px;
  background: linear-gradient(to top, color-mix(in srgb, var(--accent) 90%, transparent) 0%, color-mix(in srgb, var(--accent) 52%, transparent) 38%, transparent 72%);
  color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.35);
  opacity: 0; transition: opacity 0.35s ease; font-weight: 600; letter-spacing: 0.2px;
}
.bento__item:hover .bento__overlay { opacity: 1; }
@media (max-width: 1024px){ .bento{ grid-template-columns: repeat(2,1fr);} .bento__item,.bento__item--lg{ grid-column: span 1; } }
@media (max-width: 768px){ .bento{ grid-template-columns: 1fr; } }

/* =============================================================
   App Craft
   ============================================================= */
.app-race-section {
  position: relative;
  padding: 0;
  min-height: 1800vh;
  margin-top: 0 !important;
  background: #10100f;
}
.app-race {
  position: relative;
  height: 1800vh;
  background: #10100f;
}
.app-race__pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  overflow: hidden;
  background: #10100f;
}
.app-race__field {
  position: absolute;
  inset: -50%;
  z-index: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  transform: translate3d(0, 0, var(--bg-z, 0px)) scale(var(--bg-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}
.app-race__dots {
  position: absolute;
  inset: 0;
  background-color: transparent;
  background-image: radial-gradient(circle, rgba(242, 241, 236, 0.16) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 var(--dot-y, 0px);
}
.app-race__dots--far {
  opacity: 0.42;
  background-size: 36px 36px;
  background-image: radial-gradient(circle, rgba(242, 241, 236, 0.1) 1px, transparent 1px);
  background-position: 0 var(--dot-y-far, 0px);
  transform: translateZ(-180px) scale(1.18);
}
.app-race__dots--near {
  opacity: 1;
  transform: translateZ(40px) scale(0.94);
}
.app-race__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1200px;
  perspective-origin: 50% 46%;
  /* Finale — whole scene scales out into a centered card (Block 2).
     Opaque bg + raised z so the card occludes the flanking words. */
  background: #10100f;
  z-index: 5;
  transform-origin: 50% 50%;
  transform: scale(calc((1 - var(--shift, 0) * 0.58) * (1 + var(--bframe, 0) * 0.34) * (1 + var(--cardout, 0) * 0.7)));
  border-radius: calc(var(--shift, 0) * 16px);
  border: calc(var(--shift, 0) * 2px) solid rgba(242, 241, 236, calc(var(--shift, 0) * 0.5 * (1 - var(--cardout, 0))));
  box-shadow: 0 calc(var(--shift, 0) * 46px) calc(var(--shift, 0) * 90px) rgba(0, 0, 0, calc(var(--shift, 0) * 0.62));
  opacity: calc(1 - var(--cardout, 0));
  filter: blur(calc(var(--cardout, 0) * 16px));
  will-change: transform, opacity, filter;
}
.app-race__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: radial-gradient(ellipse 74% 70% at 50% 48%, transparent 40%, rgba(16, 16, 15, 0.68) 100%);
}
.app-race__stamp {
  position: absolute;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(140px, 33vw, 520px);
  line-height: 0.82;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(242, 241, 236, 0.08);
  user-select: none;
  pointer-events: none;
}
.app-race__stamp--apps {
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%) scale(calc(1 + var(--race, 0) * 0.04));
  opacity: calc((0.55 + var(--race, 0) * 0.45) * (1 - var(--split, 0)));
  filter: blur(calc((1 - var(--race, 0)) * 2px));
}
.app-race__stamp--kriax {
  left: calc(var(--inset-x) + 1vw);
  top: 14vh;
  font-size: clamp(96px, 22vw, 380px);
  opacity: calc(var(--names, 0) * 0.92 * (1 - var(--shift, 0)));
  transform: translateY(calc(24px - var(--names, 0) * 24px));
}
.app-race__stamp--mia {
  right: calc(var(--inset-x) + 1vw);
  bottom: 10vh;
  font-size: clamp(96px, 22vw, 380px);
  opacity: calc(var(--names, 0) * 0.92 * (1 - var(--shift, 0)));
  transform: translateY(calc(-24px + var(--names, 0) * 24px));
}

/* Finale handoff — "My" / "Story" fly in from the sides + bottom (Block 3).
   These live in .app-race__pin OUTSIDE .app-race__stage, so they do NOT
   shrink with the card; they flank it. Driven by --shift (My) / --shift2 (Story). */
.app-race__stamp--my,
.app-race__stamp--story {
  top: 50%;
  z-index: 4;            /* below the memory deck (z-10) so it reads as architecture behind */
  font-size: clamp(72px, 13vw, 240px);
  color: rgba(242, 241, 236, 0.94);
  filter: blur(calc(var(--recede, 0) * 7px)) brightness(calc(1 - var(--recede, 0) * 0.72));
  will-change: transform, opacity, filter;
}
.app-race__stamp--my {
  left: 5vw;
  opacity: calc(var(--shift, 0) * (1 - var(--recede, 0) * 0.86));
  transform: translate(
      calc((var(--shift, 0) - 1) * 60vw),
      calc(-50% + (1 - var(--shift, 0)) * 32vh - var(--recede, 0) * 4vh)
    ) scale(calc(1 - var(--recede, 0) * 0.28));
}
.app-race__stamp--story {
  right: 5vw;
  opacity: calc(var(--shift2, 0) * (1 - var(--recede, 0) * 0.86));
  transform: translate(
      calc((1 - var(--shift2, 0)) * 60vw),
      calc(-50% + (1 - var(--shift2, 0)) * 32vh - var(--recede, 0) * 4vh)
    ) scale(calc(1 - var(--recede, 0) * 0.28));
}
.app-racer {
  --x: 0px;
  --y: 0px;
  --z: 0px;
  --r: 0deg;
  --s: 1;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: min(42vw, 560px);
  aspect-ratio: 19.5 / 9;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;
  transform: translate3d(calc(-50% + var(--x)), calc(-50% + var(--y)), var(--z)) rotate(var(--r)) scale(var(--s));
  filter: drop-shadow(0 calc(18px + var(--race, 0) * 22px) calc(32px + var(--race, 0) * 28px) rgba(0, 0, 0, 0.55));
  opacity: calc(0.72 + var(--race, 0) * 0.28);
}
.app-racer--kriax { z-index: 5; }
.app-racer--mia { z-index: 6; }
.phone {
  background: #080808;
  border: 2px solid rgba(242, 241, 236, 0.62);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-2);
}
.phone--race {
  width: 100%;
  height: 100%;
  border-radius: clamp(28px, 3.6vw, 54px);
  padding: clamp(9px, 1vw, 14px);
}
.phone--race::before,
.phone--race::after {
  content: "";
  position: absolute;
  z-index: 4;
  background: #050505;
  pointer-events: none;
}
.phone--race::before {
  top: 50%;
  left: clamp(6px, 0.8vw, 12px);
  right: auto;
  width: clamp(14px, 2.6vw, 34px);
  height: 38%;
  border-radius: 0 18px 18px 0;
  transform: translateY(-50%);
}
.phone--race::after {
  top: 50%;
  left: clamp(17px, 3.3vw, 46px);
  right: auto;
  width: clamp(5px, 0.8vw, 10px);
  height: clamp(5px, 0.8vw, 10px);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: clamp(-13px, -1.8vw, -22px) 0 0 #050505;
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: clamp(21px, 2.7vw, 42px);
  background:
    linear-gradient(180deg, #99e1ee 0%, #b8f0f8 52%, #e9f5ec 100%);
}
.phone__screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.2), transparent 28%, transparent 72%, rgba(255,255,255,0.16)),
    var(--grain);
  mix-blend-mode: soft-light;
  opacity: 0.24;
  pointer-events: none;
}
.phone__sun {
  position: absolute;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  left: 11%;
  top: 14%;
  background: rgba(255, 255, 255, 0.28);
  filter: blur(8px);
}
.phone__building {
  position: absolute;
  bottom: 11%;
  height: 46%;
  background:
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(0,0,0,0.22) 17px 19px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 12px, rgba(0,0,0,0.22) 13px 16px),
    linear-gradient(135deg, #dd6c42, #a33b28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.phone__building--a {
  left: 8%;
  width: 40%;
  transform: skewY(-2deg);
}
.phone__building--b {
  left: 40%;
  width: 36%;
  height: 62%;
  background:
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(0,0,0,0.28) 17px 19px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.16) 0 12px, rgba(0,0,0,0.38) 13px 16px),
    linear-gradient(135deg, #252832, #14161b);
}
.phone__screen--kriax .phone__building--a {
  left: 26%;
  width: 30%;
  height: 68%;
}
.phone__screen--kriax .phone__building--b {
  left: 54%;
  width: 27%;
  height: 80%;
  background:
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(0,0,0,0.26) 17px 19px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 12px, rgba(0,0,0,0.22) 13px 16px),
    linear-gradient(135deg, #e88157, #b9472d);
}
.app-race__labels {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.app-race__label {
  position: absolute;
  width: min(340px, 32vw);
  opacity: calc(var(--labels, 0) * (1 - var(--shift, 0)));
  transform: translateY(calc(18px - var(--labels, 0) * 18px));
  transition: opacity 0.2s linear, transform 0.2s linear;
}
.app-race__label--kriax {
  left: calc(var(--inset-x) + 3vw);
  top: calc(14vh + clamp(96px, 22vw, 380px) * 0.72);
  text-align: left;
  max-width: min(340px, 34vw);
  transform: translate(calc(var(--shift, 0) * -42vw), calc(18px - var(--labels, 0) * 18px));
}
.app-race__label--mia {
  right: calc(var(--inset-x) + 3vw);
  bottom: calc(10vh + clamp(96px, 22vw, 380px) * 0.62);
  text-align: right;
  max-width: min(340px, 34vw);
  transform: translate(calc(var(--shift, 0) * 42vw), calc(18px - var(--labels, 0) * 18px));
}
.app-race__index {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(242, 241, 236, 0.44);
}
.app-block__type {
  color: rgba(242, 241, 236, 0.58);
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.55;
  margin-top: 0;
}
.app-block__tag { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--accent); }
.app-race--static,
.no-js .app-race-section {
  min-height: auto;
  padding-block: var(--section-pad);
}
.app-race--static .app-race,
.no-js .app-race {
  height: auto;
}
.app-race--static .app-race__pin,
.no-js .app-race__pin {
  position: relative;
  min-height: 100vh;
}
.app-race--static .app-racer--mia {
  --x: 0px;
  --y: 0px;
  left: auto;
  right: calc(var(--inset-x) + 2vw);
  top: auto;
  bottom: 8vh;
  --r: -76deg;
}
.app-race--static .app-racer--kriax {
  --x: 0px;
  --y: 0px;
  left: calc(var(--inset-x) + 2vw);
  top: 14vh;
  --r: 26deg;
}
.app-race--static .app-race__stamp--apps,
.no-js .app-race__stamp--apps,
.app-race--static .app-race__stamp--my,
.app-race--static .app-race__stamp--story,
.no-js .app-race__stamp--my,
.no-js .app-race__stamp--story { display: none; }
/* Static fallback: drop the appended transition viewport */
.app-race--static.app-race-section,
.no-js .app-race-section { min-height: 100vh; }
.app-race--static .app-race,
.no-js .app-race { height: auto; }
.app-race--static .app-race__stamp--kriax,
.app-race--static .app-race__stamp--mia,
.no-js .app-race__stamp--kriax,
.no-js .app-race__stamp--mia { opacity: 0.92; transform: none; }
.app-race--static .app-race__labels,
.no-js .app-race__labels { --labels: 1; }
@media (max-width: 860px) {
  .app-race-section,
  .app-race { min-height: auto; height: auto; }
  .app-race__pin {
    position: relative;
    min-height: auto;
    padding-bottom: var(--space-16);
  }
  .app-race__stage {
    position: relative;
    min-height: 760px;
    margin-top: var(--space-8);
  }
  .app-racer {
    width: min(78vw, 460px);
  }
  .app-racer--mia {
    left: auto;
    right: 6vw;
    top: auto;
    bottom: 80px;
    --x: 0px;
    --y: 0px;
    --r: -74deg;
  }
  .app-racer--kriax {
    left: 6vw;
    top: 100px;
    --x: 0px;
    --y: 0px;
    --r: 22deg;
  }
  .app-race__labels { --labels: 1; }
  .app-race__stamp--apps { display: none; }
  .app-race__stamp--kriax,
  .app-race__stamp--mia { opacity: 0.92; transform: none; }
  .app-race__label {
    width: min(72vw, 320px);
  }
  .app-race__label--kriax {
    left: var(--margin);
    top: 72px;
    bottom: auto;
  }
  .app-race__label--mia {
    right: var(--margin);
    bottom: 72px;
    top: auto;
  }
  .app-block__type { font-size: 14px; }
}

/* =============================================================
   My Story
   ============================================================= */
/* 04 — About Me · pinned portrait + scrolling acts */
.story { position: relative; }
.story-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 96px); align-items: start; margin-top: 8px; }

/* Pinned portrait — swaps + recolours as the acts scroll */
.story-portrait { position: sticky; top: 14vh; align-self: start; }
.story-portrait__frame { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-2); }
.story-portrait__frame .ph { opacity: 0; transition: opacity 0.7s var(--ease), filter 0.7s var(--ease); }
.story-portrait__frame .ph.is-active { opacity: 1; }
.story-portrait__frame [data-step-img="1"] { filter: grayscale(1) contrast(1.04); }
.story-portrait__frame [data-step-img="2"] { filter: grayscale(0.45) saturate(1.05); }
.story-portrait__frame [data-step-img="3"] { filter: none; }
.story-portrait__cap { position: relative; margin-top: 18px; min-height: 26px; }
.story-cap { position: absolute; inset: 0; font-size: 14px; color: var(--muted); opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.story-cap.is-active { opacity: 1; transform: none; }
.story-cap b { font-family: var(--font-mono); font-weight: 600; color: var(--accent); margin-right: 8px; }

/* Scrolling acts */
.story-acts { display: flex; flex-direction: column; }
.story-act { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; }
.story-act__no { font-family: var(--font-display); font-size: clamp(56px, 9vw, 110px); line-height: 0.9; color: transparent; -webkit-text-stroke: 1.5px var(--line); margin-bottom: 4px; }
.act__title { font-size: clamp(28px, 4vw, 48px); margin-bottom: 20px; }
.act__text { color: var(--text); font-size: clamp(17px, 1.6vw, 19px); max-width: 46ch; }

/* Thesis climax — her positioning line, pulled out as the payoff */
.story-thesis { max-width: 1000px; margin: clamp(90px, 14vh, 180px) auto clamp(48px, 9vh, 110px); text-align: center; }
.story-thesis__line { font-family: var(--font-display); font-size: clamp(30px, 5vw, 68px); line-height: 1.04; letter-spacing: -0.01em; }
.story-thesis__line em { font-style: normal; color: var(--accent); }
.story-thesis__punch { font-family: var(--font-script); color: var(--accent); font-size: clamp(44px, 8vw, 104px); line-height: 1; margin-top: 6px; }

/* Act 01 — pinned opening scene: centered text, scattered images, one zooms on scroll (--p driven by JS, 0→1) */
.story-open { position: relative; height: 640vh; }

/* Static fallback (reduced-motion / touch / no-js) — clean stacked memory gallery */
.memory--static {
  position: static; perspective: none; padding: clamp(48px, 9vh, 120px) 0;
  display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 8vh, 96px);
}
.memory--static .memory__card {
  position: relative; left: auto; top: auto;
  transform: rotateZ(var(--tilt, 0deg)); opacity: 1; width: min(78vw, 560px);
}
.memory--static .memory__print { filter: none; }
.memory--static .memory__grade { opacity: 0.5; }
.memory--static .memory__light { opacity: 0.35; }
.memory--static .memory__cap { opacity: 1; }
.no-js .story-open { height: auto; }
.no-js .story-open__stage { position: relative; height: auto; }
.story-open__stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  --fan: 0; --p: 0;
}
.story-open__stage::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 11%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: calc(0.28 * (1 - var(--p, 0) * 1.4));
  mask-image: radial-gradient(ellipse 88% 78% at 50% 46%, #000 24%, transparent 100%);
}
.story-open__scene { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform, opacity; transform-origin: 50% 50%; z-index: 2; }
.story-open__center {
  position: relative; z-index: 4; text-align: center; max-width: 560px; padding: 0 24px;
  --center-in: clamp(0, (var(--fan, 0) - 0.22) / 0.78, 1);
  opacity: calc(var(--center-in) * (1 - var(--p, 0) * 1.7));
  transform: translateY(calc((1 - var(--center-in)) * 22px)) scale(calc(0.94 + var(--center-in) * 0.06 - var(--p, 0) * 0.12));
  will-change: opacity, transform;
}
.story-open__center .story-act__no { display: inline-block; }

/* Oversized section typography — visible first, fades as cards spread */
/* MY STORY — matched to the #apps card finale (left/right 5vw, vertically centered),
   then recedes into the dark as architecture as --recede goes 0 → 1. --out fades it
   fully under the bento at the end. */
.story-open__stamp {
  position: absolute; top: 50%; z-index: 3; pointer-events: none; user-select: none;
  --recede: 0; --out: 0;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(72px, 13vw, 240px); line-height: 0.82; letter-spacing: 0.015em;
  color: rgba(242, 241, 236, 0.94);
  opacity: calc((1 - var(--recede) * 0.84) * (1 - var(--out)));
  filter: blur(calc(var(--recede) * 7px)) brightness(calc(1 - var(--recede) * 0.72));
  will-change: opacity, transform, filter;
}
.story-open__stamp--my {
  left: 5vw;
  transform: translateY(calc(-50% - var(--recede) * 4vh)) scale(calc(1 - var(--recede) * 0.28));
}
.story-open__stamp--story {
  right: 5vw; text-align: right;
  transform: translateY(calc(-50% - var(--recede) * 4vh)) scale(calc(1 - var(--recede) * 0.28));
}

/* ===== Memory as depth ===== */
.story-open__stage.is-memory {
  background:
    radial-gradient(125% 100% at 50% 38%, #15110d 0%, #0b0807 62%, #070605 100%);
}
.story-open__stage.is-memory::before { opacity: 0; }      /* drop the old dot grid */

/* --- Phone -> story bridge (opens after the apps zoom-out settles) ---------- */
.story-bridge {
  position: absolute; inset: 0; z-index: 8;
  pointer-events: none;
  transform-style: preserve-3d;
  perspective: 1180px;
  perspective-origin: 50% 50%;
}
/* the host phone — one of the framed concept phones stays as the holder; its
   SCREEN becomes the gallery. (The two concept phones peel to their corners
   and vanish; driven in JS.) */
.story-bridge__phone {
  position: absolute; left: 50%; top: 50%;
  width: clamp(150px, 15vw, 212px); aspect-ratio: 9 / 19;
  border-radius: clamp(26px, 2.4vw, 38px);
  background: #0b0b0a;
  border: 1px solid rgba(247, 242, 235, 0.14);
  box-shadow:
    0 60px 120px -38px rgba(0, 0, 0, 0.9),
    0 10px 30px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(0, 0, 0, 0.6);
  opacity: calc(var(--b-phone, 0) * (1 - var(--b-exit, 0)));
  transform:
    translate(-50%, calc(-50% + (1 - var(--b-phone, 0)) * 42vh + var(--b-exit, 0) * 16vh))
    scale(calc((0.74 + var(--b-phone, 0) * 0.26) * (1 - var(--b-exit, 0) * 0.18)));
}
/* black device screen — pure black plate; the gallery escapes it and blooms
   to full-stage as the coverflow arrives (see .story-bridge__gallery). */
.story-bridge__screen {
  position: absolute; inset: 6px; border-radius: inherit; overflow: hidden;
  background:
    radial-gradient(130% 100% at 50% 0%, #1b1a18 0%, transparent 58%),
    linear-gradient(162deg, #0d0d0c 0%, #060605 100%);
}
/* the first memory (2006) lives in the phone screen — the only photo shown
   before the deck's coverflow; the leap copy grows out of it (camera push). */
.story-bridge__screen-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.story-bridge__glint {
  position: absolute; inset: 6px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.14) 0%, transparent 22%, transparent 100%);
  mix-blend-mode: screen; opacity: 0.5;
}
/* the gallery — a full-stage curved coverflow (VK-Fest). It blooms out of the
   phone into the whole frame: centre photo flat + forward, the rest fan out to
   left/right, rotated on Y and receding into depth. Not clipped by anything. */
.story-bridge__gallery {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  opacity: var(--b-ticker, 0);
}
.story-bridge__shot {
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: clamp(150px, 16.5vw, 250px); aspect-ratio: 3 / 4;
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(247, 242, 235, 0.12);
  background: #0a0807;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.92), 0 8px 24px rgba(0, 0, 0, 0.5);
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--x, 0px) - (1 - var(--in, 1)) * 30vw), 0px, calc(var(--z, 0px) - (1 - var(--in, 1)) * 12vw))
    rotateY(calc(var(--ang, 0deg) + (1 - var(--in, 1)) * 26deg));
  opacity: calc(var(--b-ticker, 0) * (1 - var(--b-exit, 0)) * var(--in, 1));
  backface-visibility: hidden;
}
/* concave coverflow wall — left cards face right, right cards face left, all
   receding into depth toward the edges; centre sits nearest and flat. */
.story-bridge__shot:nth-child(1) { --x: -42vw; --z: -32vw; --ang: 66deg;  }
.story-bridge__shot:nth-child(2) { --x: -28vw; --z: -17vw; --ang: 46deg;  }
.story-bridge__shot:nth-child(3) { --x: -14.5vw; --z: -6vw; --ang: 24deg; }
.story-bridge__shot:nth-child(4) { --x: 0vw;   --z: 0vw;   --ang: 0deg;   }
.story-bridge__shot:nth-child(5) { --x: 14.5vw; --z: -6vw; --ang: -24deg; }
.story-bridge__shot:nth-child(6) { --x: 28vw;  --z: -17vw; --ang: -46deg; }
.story-bridge__shot:nth-child(7) { --x: 42vw;  --z: -32vw; --ang: -66deg; }
.story-bridge__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the centre photo (2006) is the largest — near the camera, flat + forward */
.story-bridge__shot--center {
  width: clamp(210px, 23vw, 340px); aspect-ratio: 3 / 4; z-index: 5;
  box-shadow: 0 60px 130px -34px rgba(0, 0, 0, 0.95), 0 10px 30px rgba(0, 0, 0, 0.55);
}
/* the leap hero — a free copy of the 2006 photo OUTSIDE the screen; hidden
   until the hand-off, then it breaks out and grows onto deck card #1 (no inner
   perspective to distort it). Its transform is written by JS. */
.story-bridge__leap {
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: clamp(210px, 23vw, 340px); aspect-ratio: 3 / 4;
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(247, 242, 235, 0.16);
  background: #0a0807;
  box-shadow: 0 44px 96px -30px rgba(0, 0, 0, 0.92);
  transform: translate(-50%, -50%);
  opacity: 0; z-index: 30;
}
.story-bridge__leap img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* promote to its own layer only while the bridge is live (narrow will-change) */
.story-bridge.is-live .story-bridge__shot,
.story-bridge.is-live .story-bridge__leap,
.story-bridge.is-live .story-bridge__phone { will-change: transform, opacity; }
/* static / reduced-motion / compact: bridge is suppressed, deck falls back to its stack */
.app-race--static .story-bridge,
.no-js .story-bridge { display: none; }

.memory {
  position: absolute; inset: 0; z-index: 4;
  transform-style: preserve-3d;
  perspective: 1500px; perspective-origin: 50% 48%;
  pointer-events: none;
}
.memory__card {
  --scale: 0.3; --blur: 16px; --op: 0; --lit: 0; --bright: 0.32; --gradeop: 0;
  --cf-x: 0px; --cf-y: 0px; --cf-rot: 0deg;
  position: absolute; left: 50%; top: 47%;
  width: min(40vw, 560px);
  transform: translate(-50%, -50%) translate(var(--cf-x), var(--cf-y)) rotateZ(var(--cf-rot)) scale(var(--scale));
  opacity: var(--op);
  will-change: transform, opacity;
}
/* Coverflow gallery — pure photos, no captions/labels. */
.app-race__pin .memory__cap { display: none; }
.memory__print {
  position: relative; margin: 0; border-radius: 5px; overflow: hidden;
  border: 1px solid rgba(247, 242, 235, 0.16);
  background: #0a0807;
  box-shadow:
    0 48px 130px -34px rgba(0, 0, 0, 0.88),
    0 6px 22px rgba(0, 0, 0, 0.6),
    0 0 100px -24px var(--grade, #caa);
  filter: blur(var(--blur)) brightness(var(--bright));
  will-change: filter;
}
.memory__print img {
  display: block; width: 100%; height: auto; max-height: 64vh; object-fit: cover;
}
/* inner print sheen + faint curl */
.memory__print::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 14%, transparent 86%, rgba(0, 0, 0, 0.22) 100%);
}
/* colour temperature of the memory */
.memory__grade {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--grade, #caa); mix-blend-mode: soft-light;
  opacity: var(--gradeop, 0);
}
/* the raking light that finds the photo at center */
.memory__light {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(var(--light, 120deg),
    rgba(255, 250, 242, 0.6) 0%, rgba(255, 250, 242, 0.1) 30%, transparent 58%);
  opacity: var(--lit, 0);
}
.memory__cap {
  position: absolute; left: 50%; bottom: -2.7em; transform: translateX(-50%);
  display: flex; gap: 0.8em; align-items: baseline; white-space: nowrap;
  opacity: var(--lit, 0);
}
.memory__year {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.22em;
  color: var(--grade, #caa);
}
.memory__line {
  font-family: var(--font-display); font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: 0.01em; color: rgba(247, 242, 235, 0.88);
}
/* shared organic grain over the dark room */
.memory__grain {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Memory deck lives inside the #apps pin now — above the receded MY STORY + dissolved card. */
.app-race__pin .memory { z-index: 10; }
.app-race__pin .memory__grain { z-index: 12; }

/* Memory #7 — flip card: front (2022) → back (Design Engineer), then hands to the bento. */
.memory__card--flip { perspective: 1600px; }
.memory__flip {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  transform-style: preserve-3d;
  transform: rotateY(var(--mflip, 0deg)) rotateX(calc(var(--cy, 0) * -1.6deg)) rotateZ(calc(var(--cx, 0) * 1.2deg));
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .memory__flip { transform: rotateY(var(--mflip, 0deg)); }
}
.memory__card--flip .memory__face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  filter: none;
}
.memory__card--flip .memory__face--back { transform: rotateY(180deg); }
.memory__card--flip .memory__face img {
  width: 100%; height: 100%; object-fit: cover; display: block; max-height: none;
  transition: filter 0.6s var(--ease);
}
/* the portrait warms to full colour when the visitor leans in */
.memory__card--flip:hover .memory__face img { filter: saturate(1.15) brightness(1.05); }

/* ===== #story = bento landing (de-pinned; the pin now lives entirely in #apps) ===== */
.story-open--landing { height: 100vh; min-height: 680px; position: relative; }
.story-open--landing .story-open__stage {
  position: relative; top: auto; height: 100%; overflow: visible; background: none;
}
.story-open--landing .story-open__stage::before { opacity: 0; }
.story-open--landing .story-open__act.story-bento { opacity: 1; pointer-events: auto; }
.story-open--landing .sbento { opacity: 1; }
.sbento__slot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.6s var(--ease); }

/* Photo wall — polaroids scattered on a table, birds-eye view */
.story-open__scatter {
  position: absolute; inset: 0; z-index: 3;
  perspective: 1400px; perspective-origin: 50% 42%;
}
.story-open__img {
  position: absolute; width: clamp(92px, 9.5vw, 156px);
  --fan-i: clamp(0, calc((var(--fan, 0) - var(--stagger, 0) * 0.42) / 0.58), 1);
  --fan-inv: calc(1 - var(--fan-i));
  --pile-k: 0.38;
  --lift: calc(var(--fan-i) * 1);
  opacity: calc(1 - var(--p, 0) * 1.9);
  transform:
    translate3d(calc(var(--dx, 0px) * var(--fan-inv)), calc(var(--dy, 0px) * var(--fan-inv)), calc(var(--fan-inv) * 8px))
    rotate(calc(var(--rot, 0deg) + var(--rotp, 0deg) * var(--fan-inv)))
    scale(calc((1 - var(--p, 0) * 0.14) * (0.88 + var(--lift) * 0.12 + var(--fan-inv) * var(--pile-k))));
  transform-style: preserve-3d;
  transition: filter .45s var(--ease), translate .45s var(--ease), scale .45s var(--ease);
  will-change: opacity, transform;
}
.story-open__img .polaroid {
  position: relative; width: 100%;
  padding: clamp(5px, 0.55vw, 9px) clamp(5px, 0.55vw, 9px) clamp(16px, 1.6vw, 26px);
  background: linear-gradient(165deg, #FAF7F2 0%, #EDE8DF 100%);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 2px 2px rgba(0, 0, 0, 0.08),
    calc(3px + var(--lift) * 2px) calc(5px + var(--lift) * 4px) calc(8px + var(--lift) * 6px) rgba(0, 0, 0, 0.18),
    calc(6px + var(--lift) * 4px) calc(12px + var(--lift) * 8px) calc(24px + var(--lift) * 12px) rgba(0, 0, 0, 0.22);
  transform: rotateX(calc(4deg - var(--lift) * 2deg));
  transform-style: preserve-3d;
}
.story-open__img .polaroid__photo {
  aspect-ratio: 1 / 1; width: 100%; border-radius: 1px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, #3D342E), #2A2520);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.story-open__img .polaroid__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story-open__img .polaroid__photo.ph {
  font-size: 0; color: transparent; letter-spacing: 0;
}
.story-open__img .polaroid__label {
  margin: clamp(5px, 0.6vw, 8px) 0 0; padding: 0 2px;
  font-family: var(--font-script); font-size: clamp(11px, 1.05vw, 15px);
  line-height: 1.1; color: #3A3530; text-align: center;
  opacity: 1;
  transform: translateY(calc((1 - var(--lift)) * 2px));
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.story-open__img[data-card-year]::before {
  content: attr(data-card-year);
  position: absolute; top: clamp(7px, 0.7vw, 11px); right: clamp(8px, 0.8vw, 12px); z-index: 2;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em;
  color: var(--accent); opacity: 0; transition: opacity .35s var(--ease);
  pointer-events: none;
}
.story-open__img.is-lit {
  z-index: 7; translate: 0 -10px; scale: 1.08;
  filter: brightness(1.06);
}
.story-open__img.is-lit .polaroid {
  box-shadow:
    0 0 0 1px rgba(252, 56, 2, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 4px 8px rgba(0, 0, 0, 0.12),
    6px 14px 28px rgba(0, 0, 0, 0.28),
    0 0 32px rgba(252, 56, 2, 0.12);
}
.story-open__img.is-lit[data-card-year]::before { opacity: 1; }
.story-open__img.is-dim { filter: blur(0.5px) brightness(.72) saturate(.85); }

/* === Year ruler — minimalist left index for Act 01 === */
.story-ruler {
  position: absolute; z-index: 6; top: 50%; left: clamp(14px, 3vw, 40px);
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: clamp(2px, 0.55vh, 6px);
  font-family: var(--font-mono); font-size: clamp(10px, 0.78vw, 12px);
  line-height: 1; letter-spacing: 0.04em;
  opacity: calc(var(--fan, 0) * (1 - var(--p, 0) * 2.2)); /* fades in with the spread, out on zoom */
  will-change: opacity;
}
.story-ruler__year {
  appearance: none; background: none; border: 0; margin: 0; padding: 2px 0;
  font: inherit; letter-spacing: inherit; text-align: left; color: var(--muted);
  opacity: 0.34; cursor: pointer; position: relative; transform-origin: left center;
  transition: color .35s var(--ease), opacity .35s var(--ease),
    transform .35s var(--ease), letter-spacing .35s var(--ease);
}
.story-ruler__year--off { opacity: 0.13; cursor: default; pointer-events: none; }
.story-ruler__year:not(.story-ruler__year--off)::before {
  content: ""; position: absolute; left: -12px; top: 50%; width: 7px; height: 1px;
  background: var(--accent); transform: translateY(-50%) scaleX(0);
  transform-origin: left center; transition: transform .35s var(--ease);
}
.story-ruler__year.is-hot {
  color: var(--accent); opacity: 1; transform: scale(1.15); letter-spacing: 0.12em;
}
.story-ruler__year.is-hot::before { transform: translateY(-50%) scaleX(1); }
.story-ruler.is-engaged .story-ruler__year:not(.is-hot):not(.story-ruler__year--off) {
  opacity: 0.18;
}

/* ring of cards — corners kept for MY / Story type; center clear for act copy */
.story-open__img--1  { top: 14%;  left: 14%;   --rot: -11deg; }
.story-open__img--2  { top: 8%;   left: 32%;   --rot: 7deg; }
.story-open__img--3  { top: 10%;  right: 30%;  --rot: -5deg; }
.story-open__img--4  { top: 16%;  right: 12%;  --rot: 9deg; }
.story-open__img--5  { top: 42%;  left: 10%;   --rot: 8deg; }
.story-open__img--6  { top: 40%;  right: 8%;   --rot: -9deg; }
.story-open__img--7  { bottom: 18%; left: 14%; --rot: 5deg; }
.story-open__img--8  { bottom: 22%; left: 34%; --rot: -6deg; }
.story-open__img--9  { bottom: 20%; right: 32%; --rot: 7deg; }
.story-open__img--10 { bottom: 14%; right: 14%; --rot: -10deg; }

/* the "picked" card (School fair) stays anchored; the SCENE scales into it (JS). It never fades and
   straightens out as the camera arrives, so it reads as the portrait coming to rest. */
.story-open__img--8 {
  z-index: 4;
  opacity: calc(1 - var(--p, 0) * 1.9);
  transform:
    translate3d(calc(var(--dx, 0px) * var(--fan-inv)), calc(var(--dy, 0px) * var(--fan-inv)), calc(var(--fan-inv) * 8px))
    rotate(calc(var(--rot, 0deg) * (1 - var(--p, 0)) + var(--rotp, 0deg) * var(--fan-inv)))
    scale(calc(0.88 + var(--lift) * 0.12 + var(--fan-inv) * var(--pile-k)));
}
.story-open__img--8 .polaroid { transform: rotateX(calc(4deg - var(--lift) * 2deg - var(--p, 0) * 4deg)); }

/* Native, crisp portrait the zoom hands off to — holds in place; crossfades process -> professional.
   Lives at full size (scale 1) so text/edges stay sharp, matching the act-03 card quality. */
.story-open__portrait {
  position: absolute; z-index: 5;
  /* Memory #7 — centered like the other prints; rises then flips into the bento. */
  width: min(42vw, 560px); aspect-ratio: 1 / 1; max-width: 560px;
  left: calc(50% - min(21vw, 280px)); top: calc(47% - min(21vw, 280px)); right: auto;
  border-radius: 5px;
  box-shadow: 0 48px 130px -34px rgba(0, 0, 0, 0.88), 0 6px 22px rgba(0, 0, 0, 0.6);
  opacity: var(--pf, 0); will-change: opacity, transform, filter;
  perspective: 1600px;
  overflow: hidden;
}
.story-open__portrait .story-portrait__face { border-radius: 5px; }
/* 3D flip — the card rotates on Y (0→180deg, JS-driven via --flip) so its back face
   (professional) faces us by the time it lands in the bento. backface-visibility hides
   whichever face is turned away; no opacity crossfade needed. */
.story-portrait__flip {
  position: absolute; inset: 0; border-radius: 0;
  transform-style: preserve-3d; transform: rotateY(var(--flip, 0deg));
  will-change: transform;
}
.story-portrait__face {
  position: absolute; inset: 0; border-radius: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.story-portrait__face--back { transform: rotateY(180deg); }
.story-open__portrait [data-pimg] { opacity: 1; }
.story-open__portrait [data-pimg="process"] { filter: none; }
.story-open__cap { position: absolute; left: 0; bottom: -34px; height: 26px; width: 100%; }
.story-open__cap-line {
  position: absolute; inset: 0; font-size: 14px; color: var(--muted);
  opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.story-open__cap-line.is-on { opacity: 1; transform: none; }
.story-open__cap-line b { font-family: var(--font-mono); font-weight: 600; color: var(--accent); margin-right: 8px; }

/* Act text — stacked in the right column */
.story-open__act {
  position: absolute; z-index: 5; top: 13vh; left: calc(50% + 3vw); width: 40vw; max-width: 560px;
  opacity: 0; transform: translateY(24px); pointer-events: none;
  transition: opacity 0.6s var(--ease); /* transform is scroll-driven (follow-scroll) — no lag */
}
.story-open__act.is-on { opacity: 1; transform: none; }
.story-open__act .story-act__no { display: block; }

/* Act 02 bento — the portrait card travels into .sbento__slot (center-top) */
.story-open__act.story-bento {
  top: var(--header-h); bottom: var(--frame-bottom);
  left: var(--guide-x); right: var(--guide-x);
  width: auto; max-width: none; transform: none;
  opacity: 1; pointer-events: none;
  z-index: 3; /* below the portrait (z-4) so the travelled photo sits ON the surface, not behind it */
}
.story-bento.is-built { pointer-events: auto; }
/* Once built, the bento sits above the receded MY STORY architecture (z-4), the
   stage (z-5) and the memory grain (z-12). The travelled portrait card (z-2300)
   still lands ON TOP, filling the slot. */
.app-race__pin .story-bento.is-built { z-index: 13; }

.sbento {
  display: grid; height: 100%;
  grid-template-columns: repeat(3, 1fr) 2.1fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-template-areas:
    "main     main     main     photoCol"
    "work     work     work     photoCol"
    "edu      award    tools    photoCol";
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 0;
  align-items: stretch;
}
.sbento > * { background: var(--bg); }

/* left / top — the statement */
.sbento__main {
  position: relative;
  grid-area: main; padding: 40px 44px 36px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  gap: 24px; min-height: 0;
}
/* Live telemetry HUD — anchored in the corner, value tracks the real cursor */
.sbento__coord {
  position: absolute; top: 40px; right: 44px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--muted); pointer-events: none;
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.sbento__coord::before { content: "+"; margin-right: 7px; opacity: 0.7; }
.sbento__coord.is-on { opacity: 0.5; }
.sbento__main-copy { display: flex; flex-direction: column; align-items: flex-start; }
.sbento__resume {
  position: relative;
  display: inline-flex; flex-direction: column; gap: 2px; margin-top: auto;
  padding: 12px 16px; min-width: 148px;
  background: var(--text); color: var(--bg); text-decoration: none;
  transition: transform 0.4s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.sbento__resume-t { font-size: 14px; color: inherit; font-weight: 500; line-height: 1.25; }
.sbento__resume-s { font-size: 11px; color: color-mix(in srgb, var(--bg) 72%, transparent); }
.sbento__resume-s span { display: inline-block; will-change: transform; }
.sbento__resume:hover { transform: translateY(-2px); background: var(--accent); color: #fff; }
.sbento__resume:hover .sbento__resume-s { color: color-mix(in srgb, #fff 72%, transparent); }
/* the download arrow keeps nudging while hovered */
.sbento__resume:hover .sbento__resume-s span { animation: resume-bounce 0.8s var(--ease) infinite; }
@keyframes resume-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
/* hover-revealed format/pages sublabel, floating just above the button */
.sbento__resume::after {
  content: "PDF · A4 · 2 pages";
  position: absolute; left: 16px; bottom: calc(100% + 6px);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em;
  color: var(--muted); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.sbento__resume:hover::after { opacity: 0.5; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .sbento__resume:hover .sbento__resume-s span { animation: none; }
}
.sbento__eyebrow {
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
}
.sbento__statement {
  font-family: var(--font-body); font-weight: 600; text-transform: none;
  font-size: clamp(28px, 3.1vw, 44px); line-height: 1.06; letter-spacing: -0.025em;
  color: var(--text); margin-bottom: 16px; text-wrap: balance;
}
/* The accent is a clip window for the morphing role word. The glow rides on a
   drop-shadow filter (not text-shadow) so overflow:hidden doesn't crop it. */
.sbento__accent {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  color: var(--accent);
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.10));
  transition: filter 0.4s var(--ease);
}
.sbento__statement:hover .sbento__accent { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.16)); }
.sbento__accent-word {
  display: inline-block;
  white-space: nowrap;
  will-change: transform, opacity;
}
/* one-shot vertical morph between roles */
.sbento__accent-word.is-exit {
  transform: translateY(-100%); opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.sbento__accent-word.is-enter-start {
  transform: translateY(100%); opacity: 0;
  transition: none;
}
.sbento__accent-word.is-enter {
  transform: translateY(0); opacity: 1;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
/* a role lit transiently by the morph mirrors the hover/now treatment */
.work-htl__item.is-lit .work-htl__idx,
.work-htl__item.is-lit .work-htl__label { color: var(--accent); }
.work-htl__item.is-lit .work-htl__dot {
  transform: scale(1.2);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--bg));
}
@media (prefers-reduced-motion: reduce) {
  .sbento__accent-word { transition: none !important; }
}
.sbento__lead {
  font-family: var(--font-body); font-size: clamp(14px, 1.1vw, 16px); line-height: 1.55;
  color: var(--muted); max-width: 38ch;
}

/* right column — portrait slot + 2-up film strip, rows locked to bento grid */
.sbento__photo-col {
  position: relative;
  grid-area: photoCol;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
  min-height: 0;
  gap: 0;
  background: transparent;
  overflow: hidden;
}
/* Light bleeds from the photo column left into the dark grid; a soft vertical
   gradient replaces the hard ruler line at the column seam. */
.sbento__photo-col::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 70%, transparent), transparent 18px),
    radial-gradient(130% 85% at 0% 50%, rgba(255, 255, 255, 0.03), transparent 62%);
}
.sbento__slot {
  position: relative;
  grid-row: 1 / 3;
  min-height: 0;
  background: var(--surface);
  border-radius: 0;
  overflow: hidden;
}
/* soft seam at the slot's lower edge so the colour candids read as bleeding up
   from behind the portrait rather than butting a hard line */
.sbento__slot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--surface), transparent);
}
.sbento__slot:hover img { filter: saturate(1.15) brightness(1.05); }
.sbento__gallery {
  grid-row: 3;
  width: 100%;
  min-height: 0;
  margin-top: -10px; /* candids creep up behind the slot's soft seam */
  overflow: hidden;
  padding: 0;
  background: var(--bg);
}
.photo-ticker {
  height: 100%;
  overflow: hidden;
  position: relative;
  container-type: inline-size;
}
.photo-ticker__track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: stretch;
  will-change: transform;
  animation: photo-ticker 52s linear infinite;
}
.photo-ticker:hover .photo-ticker__track,
.photo-ticker:hover .photo-ticker__strip { animation-play-state: paused; }
@keyframes photo-ticker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.photo-ticker__strip {
  display: flex;
  height: 100%;
  align-items: stretch;
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
.photo-ticker__strip li {
  height: 100%;
  flex: 0 0 calc(50cqi - 0.5px);
  width: calc(50cqi - 0.5px);
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0;
  transition: border-radius 0.4s var(--ease);
}
.photo-ticker__strip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
  transition: transform 0.4s var(--ease), filter 0.4s var(--ease);
}
.photo-ticker__strip li:hover { border-radius: 6px; }
.photo-ticker__strip li:hover img { transform: scale(1.05); filter: saturate(1.08); }
@media (prefers-reduced-motion: reduce) {
  .photo-ticker__track { animation: none; overflow-x: auto; width: 100%; max-width: 100%; }
  .photo-ticker__strip + .photo-ticker__strip { display: none; }
}

/* left / bottom — quiet tech-specs under a hairline */
/* spec cells — each a filled square in the grid, divided by the ruler lines */
.spec--edu    { grid-area: edu; }
.spec--award  { grid-area: award; }
.spec--tools  { grid-area: tools; overflow: visible; }
.spec--work {
  grid-area: work;
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px 32px 22px;
  min-height: 0;
}
.spec--work .spec__label { margin-bottom: 0; flex: none; }
/* Career progression rail — past → present, engineered/transit-map feel */
.work-htl {
  list-style: none; margin: 0; padding: 0;
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  align-content: center;
  position: relative;
  --htl-idx: 15px;
  --htl-year: 20px;
  --htl-track: 30px;
  --htl-line: calc(var(--htl-idx) + var(--htl-year) + var(--htl-track) / 2);
}
/* one continuous rail spanning first→last node centre, fading past→present.
   It draws left→right as the dwell is scrubbed (--bento 0→1); fully drawn by default. */
.work-htl::before {
  content: ""; position: absolute; z-index: 0;
  top: var(--htl-line); left: 12.5%; right: 12.5%; height: 2px;
  transform: translateY(-50%) scaleX(var(--bento, 1));
  transform-origin: left center;
  transition: transform 0.6s var(--ease);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 24%, var(--line)),
    var(--accent));
}
.work-htl__item {
  position: relative; z-index: 1;
  display: grid;
  grid-template-rows: var(--htl-idx) var(--htl-year) var(--htl-track) auto;
  justify-items: center;
  padding: 0 12px;
  min-width: 0;
}
/* vertical guide dropping from node to label — on hover + always for "now" */
.work-htl__item::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: var(--htl-line); height: clamp(28px, 100%, 96px); width: 1px;
  background: linear-gradient(color-mix(in srgb, var(--accent) 60%, transparent), transparent);
  transform: translateX(-50%) scaleY(0); transform-origin: top center;
  opacity: 0; transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}
.work-htl__item:hover::before,
.work-htl__item--now::before { opacity: 1; transform: translateX(-50%) scaleY(1); }
/* "ongoing" line trailing the current role — a dashed SVG whose stroke keeps
   marching right: the unwritten future */
.work-htl__future {
  position: absolute; z-index: 0;
  top: var(--htl-line); left: calc(50% + 12px); right: 4px; height: 2px;
  transform: translateY(-50%);
  overflow: visible; pointer-events: none;
}
.work-htl__future line {
  stroke: color-mix(in srgb, var(--accent) 45%, transparent);
  stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round;
  animation: htl-future 1.4s linear infinite;
}
@keyframes htl-future { to { stroke-dashoffset: -10; } }
.work-htl__idx {
  display: flex; align-items: center; justify-content: center;
  height: var(--htl-idx);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 65%, transparent);
  transition: color 0.3s var(--ease);
}
.work-htl__item:hover .work-htl__idx { color: var(--muted); }
.work-htl__item--now .work-htl__idx { color: var(--accent); }
.work-htl__year {
  display: flex; align-items: flex-end; justify-content: center;
  height: var(--htl-year);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--muted);
}
.work-htl__item--now .work-htl__year { color: var(--accent); font-weight: 600; }
.work-htl__node {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: var(--htl-track);
  position: relative; z-index: 1;
}
/* each node lights when the scrubbed dwell (--bento) crosses its threshold */
.work-htl__item { --htl-t: 0; }
.work-htl__item:nth-child(1) { --htl-t: 0.04; }
.work-htl__item:nth-child(2) { --htl-t: 0.32; }
.work-htl__item:nth-child(3) { --htl-t: 0.60; }
.work-htl__item:nth-child(4) { --htl-t: 0.86; }
.work-htl__dot {
  --htl-lit: clamp(0, (var(--bento, 1) - var(--htl-t)) * 14, 1);
  width: 13px; height: 13px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) calc(var(--htl-lit) * 70%), var(--bg));
  border: 2px solid color-mix(in srgb, var(--accent) calc(40% + var(--htl-lit) * 55%), var(--line));
  box-sizing: border-box;
  transition: transform 0.4s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
/* Draw-on-build: once the bento is built/being read, the timeline completes
   regardless of exact scroll depth. The driver may still scrub --bento for
   subtle motion, but the RESTING (read) state is always a fully-drawn rail +
   all dots lit. These override the partial scrub values; the var(--bento, 1)
   fallback still covers the no-JS case. Higher specificity beats the inline
   --bento on the bento element (which can't reach a pseudo-element anyway). */
.story-bento.is-built .work-htl::before {
  transform: translateY(-50%) scaleX(1);
}
.story-bento.is-built .work-htl__dot { --htl-lit: 1; }
/* stagger the light-up left→right so it still reads as a draw-in */
.story-bento.is-built .work-htl__item:nth-child(1) .work-htl__dot { transition-delay: 0.10s; }
.story-bento.is-built .work-htl__item:nth-child(2) .work-htl__dot { transition-delay: 0.20s; }
.story-bento.is-built .work-htl__item:nth-child(3) .work-htl__dot { transition-delay: 0.30s; }
.story-bento.is-built .work-htl__item:nth-child(4) .work-htl__dot { transition-delay: 0.40s; }
.work-htl__item:hover .work-htl__dot {
  transform: scale(1.2);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--bg));
}
/* current role — filled core, slightly enlarged, with glow + live pulse halo */
.work-htl__item--now .work-htl__dot {
  width: 14px; height: 14px;
  background: var(--accent); border-color: var(--accent);
  transform: scale(1.2);
  box-shadow: var(--shadow-glow);
}
.work-htl__item--now .work-htl__node::before {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  animation: htl-pulse 2.6s var(--ease) infinite;
}
@keyframes htl-pulse {
  0%   { transform: scale(0.9); opacity: 0.85; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
.work-htl__body {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 12px; width: 100%; max-width: 19ch;
  text-align: center;
}
.work-htl__label {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(13px, 1.05vw, 15px); line-height: 1.25;
  letter-spacing: -0.01em; color: var(--text);
  text-wrap: balance;
  transition: color 0.3s var(--ease);
}
.work-htl__item:hover .work-htl__label,
.work-htl__item--now .work-htl__label { color: var(--accent); }
.work-htl__note {
  font-size: 11.5px; line-height: 1.45; color: var(--muted);
  text-wrap: balance;
}
@media (prefers-reduced-motion: reduce) {
  .work-htl__item--now .work-htl__node::before,
  .work-htl__future line { animation: none; }
  .work-htl::before { transform: translateY(-50%); transition: none; }
  /* instant full state — no staggered draw-in */
  .story-bento.is-built .work-htl::before { transform: translateY(-50%) scaleX(1); }
  .story-bento.is-built .work-htl__dot { transition: none; transition-delay: 0s; }
}
/* Bottom bento row — slightly tighter than default, not crushed */
.sbento .spec--edu,
.sbento .spec--award,
.sbento .spec--tools {
  padding: 22px 24px 20px;
  min-height: 0;
}
.sbento .spec--edu .spec__label,
.sbento .spec--award .spec__label,
.sbento .spec--tools .spec__label {
  margin-bottom: 14px;
  font-size: 11px;
}
.sbento .spec--edu .spec__list,
.sbento .spec--award .spec__list { gap: 12px; }
.sbento .spec--edu .spec__t,
.sbento .spec--award .spec__t { font-size: 14px; line-height: 1.25; }
.sbento .spec--edu .spec__s,
.sbento .spec--award .spec__s { font-size: 12px; line-height: 1.35; }
.sbento .spec--edu .spec__yr,
.sbento .spec--award .spec__yr { font-size: 11.5px; }
.sbento .spec--tools .spec__label { margin-bottom: 8px; }
.sbento .spec--tools .tool-wheel { min-height: 132px; flex: 1; }
.sbento .spec--tools .tool-wheel__stage { inset: 0 20px 0 2px; }
.sbento .spec--tools .tool-wheel__icon { width: 30px; height: 30px; }
.sbento .spec--tools .tool-wheel__label { font-size: 13.5px; }
.sbento .spec--tools .tool-wheel__band { right: 20px; height: 36px; }
.spec { padding: 30px; transition: background 0.3s var(--ease); }
.spec:hover { background: var(--surface); }
.spec__label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px;
}
.spec__label::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex: none; }
.spec__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.spec__list li { display: flex; flex-direction: column; gap: 2px; }
.spec__yr { font-size: 12px; color: var(--accent); font-weight: 500; }
.spec__t  { font-size: 15px; color: var(--text); line-height: 1.25; }
.spec__s  { font-size: 12.5px; color: var(--muted); }
/* Tools — arc wheel: icon + name along the curve, rail on the right */
.spec--tools {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.spec--tools .spec__label { margin-bottom: 14px; flex: none; }
/* iOS-style picker wheel — legible horizontal rows on a 3D cylinder,
   a hairline selection band, and edge fades. */
.tool-wheel {
  position: relative;
  flex: 1;
  min-height: 210px;
  margin: 0;
  cursor: grab;
  touch-action: none;
  outline: none;
  overflow: hidden;
  perspective: 640px;
  perspective-origin: 7% 50%; /* pivot magnification at the icon column so icons never clip left */
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 62%, transparent 100%);
}
.tool-wheel::-webkit-scrollbar { display: none; }
.tool-wheel.is-dragging { cursor: grabbing; }
.tool-wheel__stage {
  position: absolute;
  inset: 0 22px 0 2px;
  transform-style: preserve-3d;
}
.tool-wheel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
}
.tool-wheel__item {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  flex-direction: row;
  white-space: nowrap;
  backface-visibility: hidden;
  transform-origin: center center;
  transform:
    translateY(-50%)
    rotateX(var(--tw-rotx, 0deg))
    translateZ(var(--tw-z, 104px));
  opacity: var(--tw-opacity, 0.72);
  will-change: transform, opacity;
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
}
.tool-wheel__item.is-active { z-index: 3; opacity: 1; }
.tool-wheel__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1;
  padding: 2px 0;
  transition: color 0.28s var(--ease), font-weight 0.28s var(--ease);
}
.tool-wheel__item.is-active .tool-wheel__label {
  color: var(--text);
  font-weight: 600;
}
/* Selection plate — centred highlight framing the active row, iOS-picker honest */
.tool-wheel__band {
  position: absolute;
  left: 0;
  right: 22px;
  top: 50%;
  height: 38px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}
/* Right-edge scroll affordance — a thin track with a moving thumb */
.tool-wheel__scroll {
  position: absolute;
  right: 0;
  top: 8%;
  bottom: 8%;
  width: 2px;
  background: var(--line);
  pointer-events: none;
  z-index: 2;
}
.tool-wheel__thumb {
  position: absolute;
  left: -1px;
  width: 4px;
  height: 22%;
  top: var(--tw-thumb-y, 0%);
  background: var(--text);
  opacity: 0.55;
  transition: top 0.3s var(--ease);
}
.tool-wheel.is-dragging .tool-wheel__thumb { transition: none; }
.tool-wheel__icon {
  order: -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  flex: none;
  filter: grayscale(1) brightness(0.5);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), filter 0.3s var(--ease);
}
/* desaturated until focused — colour returns on hover or when selected */
.tool-wheel__item:hover .tool-wheel__icon,
.tool-wheel__item.is-active .tool-wheel__icon {
  filter: grayscale(0) brightness(1);
}
.tool-wheel__icon svg { width: 18px; height: 18px; display: block; flex: none; }
.tool-wheel__icon--figma svg { width: 14px; height: 20px; }
.tool-wheel__icon--figma { background: #1a1a1a; border-color: color-mix(in srgb, #F24E1E 24%, var(--line)); }
.tool-wheel__icon--framer { background: #001a33; border-color: color-mix(in srgb, #0099FF 30%, var(--line)); }
.tool-wheel__icon--github { background: #161616; color: #f5f5f5; }
.tool-wheel__icon--vercel { background: #111; color: #f5f5f5; }
.tool-wheel__icon--vercel svg { width: 15px; height: 15px; }
.tool-wheel__icon--sketch { background: #1a1408; border-color: color-mix(in srgb, #FDB300 28%, var(--line)); }
.tool-wheel__icon--sketch svg { width: 16px; height: 16px; }
.tool-wheel__icon--aftereffects {
  background: linear-gradient(180deg, #2b1067 0%, #160638 100%);
  border-color: color-mix(in srgb, #9999FF 35%, var(--line));
  color: #d8ccff;
}
.tool-wheel__icon--photoshop {
  background: linear-gradient(180deg, #103d66 0%, #082238 100%);
  border-color: color-mix(in srgb, #31A8FF 35%, var(--line));
  color: #b8e4ff;
}
.tool-wheel__icon--blender { background: #1a1208; border-color: color-mix(in srgb, #E87D0D 30%, var(--line)); }
.tool-wheel__mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.tool-wheel__item.is-active .tool-wheel__icon {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
}
@media (max-width: 768px) {
  .tool-wheel { min-height: 240px; }
  .tool-wheel__stage { inset: 0 22px 0 2px; }
  .tool-wheel__band { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-wheel__item,
  .tool-wheel__label,
  .tool-wheel__icon,
  .tool-wheel__thumb { transition: none !important; }
}

/* Caption fades out as the card enters the bento */
.story-open__cap { opacity: calc(1 - var(--t, 0) * 2); }

/* Assemble — surface and content settle in calmly (reversible on scrub).
   Only opacity on .sbento so the slot never shifts and the portrait FLIP stays exact. */
.sbento { opacity: 0; transition: opacity 0.7s var(--ease); }
.story-bento.is-built .sbento { opacity: 1; }

/* Bottom-row spec cells lift in with an incremental stagger once the bento is built */
.sbento .spec--edu,
.sbento .spec--award,
.sbento .spec--tools {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.story-bento.is-built .spec--edu   { opacity: 1; transform: none; transition-delay: 0s; }
.story-bento.is-built .spec--award { opacity: 1; transform: none; transition-delay: 0.15s; }
.story-bento.is-built .spec--tools { opacity: 1; transform: none; transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .sbento .spec--edu,
  .sbento .spec--award,
  .sbento .spec--tools { opacity: 1; transform: none; transition: none; }
}

/* cells don't transform — opacity-only fade keeps the ruler gaps crisp */
@media (max-width: 768px){
  /* static wall on touch — no pin / scrub */
  .story-open { height: auto; }
  .story-open__stage { position: static; height: auto; min-height: 88vh; padding: 12vh 0; }
  .story-open__stamp { font-size: clamp(56px, 22vw, 120px); opacity: 1; --stamp-out: 1; }
  .story-open__center { --center-in: 1; opacity: 1; transform: none; }
  .story-open__stage::before { opacity: 0.28; }
  .story-open__stamp--my { top: 64px; left: 20px; }
  .story-open__stamp--story { bottom: 24px; right: 20px; }
  .story-open__img { width: 28vw; --fan-inv: 0; --lift: 1; }
  .story-open__img .polaroid { transform: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22); }
  .story-open__img--2, .story-open__img--9 { display: none; }
  .story-open__img--1  { top: 4%;  left: 3%; }
  .story-open__img--3  { top: 3%;  right: 4%; }
  .story-open__img--4  { top: 16%; right: 2%; }
  .story-open__img--5  { top: 40%; left: -4%; }
  .story-open__img--6  { top: 38%; right: -4%; }
  .story-open__img--7  { bottom: 5%; left: 4%; }
  .story-open__img--8  { bottom: 4%; left: 30%; }
  .story-open__img--10 { bottom: 6%; right: 4%; }
  .story-open__portrait { position: relative; top: auto; left: auto; width: 78vw; max-width: none; margin: 8vh auto 48px; opacity: 1; }
  .story-open__cap { position: relative; bottom: auto; margin-top: 10px; }
  .story-open__act { position: relative; top: auto; left: auto; width: auto; opacity: 1; transform: none; pointer-events: auto; }
  .story-open__act[data-act="03"] { margin-top: 10vh; }
  .story-open__act.story-bento { position: relative; top: auto; left: auto; transform: none; width: 100%; margin-top: 8vh; }
  .sbento { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "main" "work" "edu" "award" "tools" "photoCol"; gap: 1px; opacity: 1 !important; }
  .sbento__photo-col { display: flex; flex-direction: column; grid-template-rows: none; grid-row: auto; }
  .sbento__slot { grid-row: auto; }
  .sbento__gallery { grid-row: auto; flex: 0 0 min(42vw, 220px); min-height: 120px; }
  .photo-ticker__strip li { flex: 0 0 calc(50cqi - 0.5px); width: calc(50cqi - 0.5px); }
  .spec--work { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; min-height: 220px; padding: 22px 20px 26px; }
  .spec--work::-webkit-scrollbar { display: none; }
  .work-htl {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    min-width: 580px;
  }
  .sbento__main { opacity: 1 !important; transform: none !important; transition: none; padding: 30px 22px; }
  .spec { padding: 26px 22px; }
  .sbento__slot { display: none; }
  .story-open__cap { opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .story-open { height: auto; }
  .story-open__stage { position: static; height: auto; min-height: 86vh; padding: 12vh 0; }
  .story-open__center, .story-open__img { opacity: 1; transform: rotate(var(--rot, 0deg)); --fan-inv: 0; --lift: 1; }
  .story-open__portrait { position: relative; top: auto; left: auto; width: 78vw; max-width: none; margin: 8vh auto 48px; opacity: 1; }
  .story-open__cap { position: relative; bottom: auto; margin-top: 10px; }
  .story-open__act { position: relative; top: auto; left: auto; width: auto; opacity: 1; transform: none; }
  .story-open__portrait [data-pimg="process"] { opacity: 1; }
}

@media (max-width: 768px){
  .story-grid { grid-template-columns: 1fr; gap: 24px; }
  .story-portrait { position: sticky; top: 72px; z-index: 2; background: var(--bg); padding-bottom: 14px; }
  .story-portrait__frame { aspect-ratio: 3 / 2; max-height: 32vh; margin-inline: auto; }
  .story-cap { text-align: center; }
  .story-act { min-height: 64vh; }
  .act__text { max-width: none; }
}

.badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.badge-pill { font-size: 13px; padding: 8px 16px; border-radius: 100px; border: 1px solid var(--line); color: var(--muted); }

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
.quote { position: relative; padding: 32px 28px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.quote::before { content:"\201C"; position:absolute; top:0; left:16px; font-family: var(--font-display); font-size: 80px; line-height:1; color: var(--accent); opacity: 0.08; }
.quote__text { position: relative; font-size: 16px; }
.quote__by { margin-top: 16px; font-size: 13px; color: var(--muted); }
@media (max-width: 768px){ .quotes{ grid-template-columns: 1fr; } }

.logos { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: center; margin-top: 56px; }
.logos img, .logos span { filter: grayscale(1); opacity: 0.5; transition: filter 0.3s ease, opacity 0.3s ease; font-family: var(--font-display); font-weight:500; font-size: 22px; color: var(--muted); }
.logos img:hover, .logos span:hover { filter: grayscale(0); opacity: 1; color: var(--text); }

/* =============================================================
   Contact
   ============================================================= */
.contact { text-align: center; }
.contact__title { font-size: clamp(40px, 7vw, 64px); }
.contact__sub { color: var(--muted); margin-top: 16px; }
.contact__email { display: inline-block; margin-top: 28px; font-family: var(--font-mono); font-size: 20px; position: relative; }
.contact__email::after { content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.contact__email:hover::after { transform: scaleX(1); }
.contact__socials { display: flex; gap: 20px; justify-content: center; margin-top: 24px; }
.contact__socials a { color: var(--muted); transition: color 0.3s ease; }
.contact__socials a:hover { color: var(--accent); }
.contact__socials svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.contact__meta { margin-top: 32px; font-size: 14px; color: var(--muted); }

.form { max-width: 520px; margin: 56px auto 0; text-align: left; display: grid; gap: 18px; }
.form input, .form textarea {
  width: 100%; padding: 14px 16px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  font: inherit; font-size: 15px; transition: border-color 0.3s ease;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.form textarea { min-height: 120px; resize: vertical; }
.form button { justify-self: start; }
.form__success { display:none; align-items:center; gap:8px; color: var(--accent); font-weight:500; }
.form.is-sent .form__success { display: flex; }

/* =============================================================
   Footer
   ============================================================= */
/* ---------- Footer — the sign-off ---------- */
/* Reveal: the page slides up to uncover the pinned footer behind it */
.page-stage { --burn-scroll: 20vh; position: relative; z-index: 1; background-color: var(--canvas); }

/* Every standard section inherits the dark canvas (hero keeps its own).
   --stage-shade (0 by default) is a scroll-driven percentage of black mixed
   into the canvas — shared across all visible sections so the work→shipped
   darkening reads as one uniform field, with no seam at the section boundary. */
.page-stage > .section:not(.hero) {
  background-color: var(--canvas);
  color: var(--text);
}

/* Full-width dashed section dividers (Cossistant-style) */
.page-stage > .section {
  position: relative;
}
.page-stage > .section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(100vw, var(--maxw));
  height: 0;
  transform: translateX(-50%);
  border-top: 1px dashed var(--line);
  pointer-events: none;
}
.page-stage > .section[data-mood="deep"]::before {
  border-color: color-mix(in srgb, var(--on-ink) 16%, transparent);
}

/* Technical margin guides — vertical rules only; horizontals from header__dash + footer */
.guides { position: fixed; inset: 0; z-index: 850; pointer-events: none; transition: opacity 0.5s var(--ease); }
.signoff-active .guides { opacity: 0; }
.guides__frame {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  height: 100%;
  margin-inline: auto;
}
.guides__v {
  position: absolute;
  top: var(--header-h);
  bottom: var(--frame-bottom);
  width: 0;
}
.guides__v--l { left: 0; border-left: 1px dashed var(--line); }
.guides__v--r { right: 0; border-right: 1px dashed var(--line); }
.guides__sq {
  position: absolute; width: 5px; height: 5px;
  border: 1px dashed color-mix(in srgb, var(--text) 28%, transparent);
  background: var(--bg);
}
.guides__sq--tl { left: 0; top: var(--header-h); transform: translate(-50%, -50%); }
.guides__sq--tr { right: 0; top: var(--header-h); transform: translate(50%, -50%); }
@media (max-width: 768px) {
  .guides__sq { display: none; }
}
 .footer {
  --footer-line: color-mix(in srgb, var(--on-ink) 14%, transparent);
  --footer-dim: color-mix(in srgb, var(--on-ink) 52%, transparent);
  --footer-bg: #161616;
  color: var(--on-ink);
}

/* Statement + index panel — scrolls inside page-stage, lifts to reveal the monument */
.footer-panel {
  margin-top: clamp(64px, 10vw, 120px);
  background: #181818;
  color: var(--on-ink);
  --footer-line: color-mix(in srgb, var(--on-ink) 14%, transparent);
  --footer-dim: color-mix(in srgb, var(--on-ink) 52%, transparent);
  border-top: 1px dashed var(--footer-line);
}

.footer__frame {
  max-width: var(--maxw);
  margin-inline: auto;
}

/* ---------- Zone A — the invitation ---------- */
.footer__pitch {
  position: relative;
  padding: clamp(44px, 7vw, 104px) clamp(24px, 4vw, var(--margin)) clamp(40px, 5vw, 76px);
  border-bottom: 1px dashed var(--footer-line);
  overflow: clip;
}
/* The invitation copy sits above the bloom */
.footer__pitch > :not(.footer__pitch-flower) {
  position: relative;
  z-index: 1;
}
/* Big warm flower bloom, anchored to the right and bled to the frame edge
   so the technical guide line cuts across it */
.footer__pitch-flower {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(-1 * clamp(24px, 4vw, var(--margin)));
  width: clamp(340px, 60%, 920px);
  z-index: 0;
  display: block;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.9s var(--ease);
  /* Feather top / bottom / left; keep the right edge solid so the guide line
     slices the bloom with a crisp vertical cut. */
  -webkit-mask-image: radial-gradient(150% 118% at 74% 50%, #000 74%, transparent 100%);
  mask-image: radial-gradient(150% 118% at 74% 50%, #000 74%, transparent 100%);
}
.footer__pitch-flower.is-ready { opacity: 1; }

/* Deeper, larger bloom layered behind — anchored low-right, bleeding off the
   bottom and right so the divider + guide lines clip it. Creates overlap depth. */
.footer__pitch-flower--deep {
  top: auto;
  bottom: calc(-1 * clamp(40px, 8vw, 130px));
  right: calc(-1 * clamp(24px, 4vw, var(--margin)) - 3vw);
  width: clamp(440px, 82%, 1180px);
  height: clamp(420px, 128%, 1040px);
  z-index: 0;
  -webkit-mask-image: radial-gradient(135% 120% at 60% 42%, #000 58%, transparent 100%);
  mask-image: radial-gradient(135% 120% at 60% 42%, #000 58%, transparent 100%);
}

.footer__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 44px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--footer-dim);
}
.footer__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-2);
  animation: footerPulse 2.6s var(--ease) infinite;
}
@keyframes footerPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 11px transparent; }
}

.footer__statement {
  max-width: 16ch;
  margin: 0 0 clamp(28px, 3vw, 48px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 8vw, 128px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--on-ink);
}
.footer__statement em {
  font-style: normal;
  color: var(--accent);
}

.footer__email {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45ch;
  font-family: var(--font-mono);
  font-size: clamp(17px, 2.4vw, 34px);
  letter-spacing: 0.01em;
  color: var(--on-ink);
  padding-bottom: 6px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s var(--ease), color 0.3s var(--ease);
}
.footer__email:hover {
  color: var(--accent);
  background-size: 100% 2px;
}
.footer__email-arrow {
  font-size: 0.66em;
  transition: transform 0.4s var(--ease);
}
.footer__email:hover .footer__email-arrow {
  transform: translate(4px, -4px);
}

/* ---------- Zone B — the index ---------- */
.footer__index {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  border-bottom: 1px dashed var(--footer-line);
}
.footer__col {
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, var(--margin));
  border-right: 1px dashed var(--footer-line);
}
.footer__col:last-child { border-right: 0; }

.footer__col-head {
  margin: 0 0 clamp(16px, 2vw, 26px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--footer-dim);
}

.footer__links {
  display: grid;
  gap: clamp(8px, 1vw, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__links a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 30px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--on-ink);
  transition: color 0.25s var(--ease), transform 0.35s var(--ease);
}
.footer__links a:hover {
  color: var(--accent);
  transform: translateX(7px);
}

.footer__located {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.75;
  color: var(--footer-dim);
}
.footer__clock { color: var(--on-ink); }

/* ---------- Social icons (useAnimations · Lottie, hover play/reverse) ---------- */
.footer__socials { display: flex; flex-wrap: wrap; gap: 12px; }
.footer__col .ua-btn {
  position: relative;
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--on-ink) 5%, transparent);
  border: 1px dashed var(--footer-line);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.footer__col .ua-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-3px);
}
.ua-icon { width: 22px; height: 22px; display: block; --ua-stroke: color-mix(in srgb, var(--on-ink) 82%, transparent); }
.ua-btn:hover .ua-icon { --ua-stroke: #fff; }
.ua-icon svg path { stroke: var(--ua-stroke); transition: stroke 0.3s ease; }
.ua-icon svg path.ua-fill { stroke: none; fill: var(--ua-stroke); transition: fill 0.3s ease; }
.ua-tag {
  position: absolute; bottom: calc(100% + 11px); left: 50%;
  transform: translate(-50%, 6px); transform-origin: 50% 100%;
  padding: 5px 11px; border-radius: 7px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em;
  background: var(--on-ink); color: var(--ink-deep);
  opacity: 0; pointer-events: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.ua-tag::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--on-ink);
}
.ua-btn:hover .ua-tag, .ua-btn:focus-visible .ua-tag { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Sticky reveal — ECKERT monument + flower bloom ---------- */
.footer--reveal {
  position: sticky;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  min-height: 0;
  background: var(--signoff-bg);
  color: var(--on-ink);
  --signoff-bg: #161616;
  --footer-line: color-mix(in srgb, var(--on-ink) 14%, transparent);
  --footer-dim: color-mix(in srgb, var(--on-ink) 52%, transparent);
  border-top: 1px dashed var(--footer-line);
}
.footer--reveal .footer__frame {
  min-height: 0;
  background: var(--signoff-bg);
  display: flex;
  flex-direction: column;
}

.footer__mask {
  position: relative;
  flex: 0 0 auto;
  overflow: clip;
  background: var(--signoff-bg, #161616);
  border-bottom: 1px dashed var(--footer-line);
}

.footer__flower {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.8s var(--ease);
}
.footer__flower.is-ready { opacity: 1; }

.footer__wordmark-cell {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: end center;
  padding-top: clamp(30px, 5vw, 68px);
  overflow: clip;
  pointer-events: none;
}
.footer__wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(56px, 16.5vw, 260px);
  font-weight: 400;
  line-height: 0.74;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  color: color-mix(in srgb, var(--on-ink) 44%, transparent);
  transform: translateY(120%);
  transition: transform 1.05s var(--ease-out);
  will-change: transform;
}
.footer--reveal.is-revealed .footer__wordmark {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .footer__wordmark { transition: none; transform: translateY(0); }
}
.footer__reg {
  position: absolute;
  top: clamp(20px, 4vw, 48px);
  right: clamp(24px, 3vw, var(--margin));
  z-index: 4;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: 0.12em;
  color: var(--footer-dim);
  pointer-events: none;
}

.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px clamp(24px, 3vw, var(--margin));
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--footer-dim);
}
.footer__copy { margin: 0; }
.footer__top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--footer-dim);
  transition: color 0.25s var(--ease);
}
.footer__top span { transition: transform 0.35s var(--ease); }
.footer__top:hover { color: var(--accent-2); }
.footer__top:hover span { transform: translateY(-3px); }

@media (max-width: 768px) {
  .footer__index { grid-template-columns: 1fr; }
  .footer__col {
    border-right: 0;
    border-bottom: 1px dashed var(--footer-line);
  }
  .footer__col:last-child { border-bottom: 0; }
  .footer__statement { max-width: 100%; font-size: clamp(40px, 13vw, 84px); }
  .footer--reveal { min-height: 0; }
  .footer__wordmark { font-size: clamp(34px, 16vw, 120px); }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 12px; }
}

.to-top {
  position: fixed; right: 28px; bottom: 28px; z-index: 800;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--text); color: var(--bg);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s var(--ease);
}
.to-top { box-shadow: var(--shadow-2); }
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top:active { transform: scale(0.94); }
.to-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* =============================================================
   Video modal
   ============================================================= */
.modal {
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal__box { width: min(90vw, 960px); aspect-ratio: 16/9; background: #000; border-radius: var(--r-lg); overflow: hidden; transform: scale(0.97); transition: transform 0.28s var(--ease-out); box-shadow: var(--shadow-2); }
.modal__close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.modal.is-open .modal__box { transform: none; }
.modal__close { position: absolute; top: 24px; right: 24px; color: #fff; font-size: 28px; }
.modal__placeholder { width:100%; height:100%; display:grid; place-items:center; color:#fff; opacity:0.6; font-size:14px; letter-spacing:1px; }

/* =============================================================
   Case study pages
   ============================================================= */
.cs-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--line); z-index: 1000; }
.cs-progress__bar { height: 100%; width: 0; background: var(--accent); transition: width 0.1s linear; }

.cs-back {
  position: fixed; top: 24px; left: var(--margin); z-index: 900;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; padding: 8px 16px; border-radius: 100px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(10px); border: 1px solid var(--line);
  transition: border-color 0.3s ease;
}
.cs-back:hover { border-color: var(--accent); }
@media (max-width: 768px){ .cs-back{ left: 20px; } }

/* scene wrapper */
.scene { padding-block: 120px; }
.scene .wrap { position: relative; }

/* 1 — hero */
.cs-hero { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding-top: 100px; }
.cs-hero__media { position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; margin-top: 48px; }
.cs-hero__media .ph {
  filter: blur(20px);
  transform: scale(1.05);
  animation: unblur 1.2s var(--ease) forwards;
}
.cs-hero__media img {
  animation: hero-media-in 0.9s var(--ease) both;
}
@keyframes hero-media-in {
  from { opacity: 0; transform: scale(1.012); }
  to { opacity: 1; transform: none; }
}
@keyframes unblur { to { filter: blur(0); transform: scale(1); } }
.cs-hero__name { font-size: clamp(48px, 10vw, 110px); }
.cs-hero__result { font-size: clamp(20px, 3vw, 28px); color: var(--muted); max-width: 640px; margin-top: 16px; }
.cs-hero__meta { display: flex; gap: 40px; margin-top: 28px; flex-wrap: wrap; }
.cs-hero__meta div span { display: block; }
.cs-hero__meta .label { margin-bottom: 4px; }

/* 2 — challenge */
.cs-split { display: grid; grid-template-columns: 3fr 2fr; gap: 64px; align-items: center; }
.cs-split__text { font-size: clamp(20px, 2.6vw, 26px); }
.cs-bignum { font-family: var(--font-display); font-weight: 500; font-size: clamp(64px, 12vw, 140px); color: var(--accent); line-height: 1; }
@media (max-width: 768px){ .cs-split{ grid-template-columns: 1fr; gap: 32px; } }

/* 3 — discovery */
.cs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cs-card { padding: 32px 28px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); }
.cs-card h3 { font-size: 20px; margin-bottom: 10px; }
.cs-card p { color: var(--muted); font-size: 15px; }
@media (max-width: 768px){ .cs-cards{ grid-template-columns: 1fr; } }

/* 4 — sticky decisions */
.cs-sticky { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.cs-sticky__steps > [data-step] { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.cs-sticky__steps h3 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 16px; }
.cs-sticky__steps p { color: var(--muted); max-width: 420px; }
.cs-sticky__media { position: sticky; top: 15vh; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.cs-sticky__media picture,
.cs-sticky__media [data-step-img] {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.5s ease;
}
.cs-sticky__media picture.is-active,
.cs-sticky__media [data-step-img].is-active { opacity: 1; }
.cs-sticky__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block;
}
@media (max-width: 768px){ .cs-sticky{ grid-template-columns: 1fr; } .cs-sticky__media{ position: relative; top: 0; } .cs-sticky__media picture, .cs-sticky__media [data-step-img]{ position: relative; opacity: 1; } }

/* 5 — process horizontal */
.cs-rail { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; }
.cs-rail::-webkit-scrollbar { height: 6px; }
.cs-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 100px; }
.cs-rail__item { flex: 0 0 70%; max-width: 560px; scroll-snap-align: center; }
.cs-rail__item .ph { aspect-ratio: 4/3; border-radius: 12px; }
.cs-rail__cap { color: var(--muted); font-size: 14px; margin-top: 12px; }
@media (max-width: 768px){ .cs-rail__item{ flex-basis: 85%; } }

/* 6 — final design */
.cs-final { position: relative; }
.cs-final__media { aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; }

/* 7 — build split */
.cs-build { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.cs-build .ph { aspect-ratio: 4/3; border-radius: 12px; }
.cs-build__badge { display:inline-block; margin-top: 20px; font-size: 13px; padding: 8px 16px; border-radius: 100px; background: var(--accent); color:#fff; }
@media (max-width: 768px){ .cs-build{ grid-template-columns: 1fr; } }

/* 8 — impact */
.cs-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 56px; }
.cs-metric__num { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 6vw, 64px); color: var(--accent); }
.cs-metric__label { color: var(--muted); font-size: 14px; margin-top: 6px; }
.cs-impact__quote { font-size: clamp(22px, 3vw, 30px); font-family: var(--font-display); font-weight: 500; max-width: 760px; margin: 32px 0; }
@media (max-width: 768px){ .cs-metrics{ grid-template-columns: 1fr; } }

/* next case */
.cs-next { border-top: 1px solid var(--line); }
.cs-next a { display: flex; justify-content: space-between; align-items: center; padding-block: 56px; }
.cs-next__name { font-size: clamp(32px, 6vw, 64px); font-family: var(--font-display); font-weight: 500; transition: color 0.3s ease; }
.cs-next a:hover .cs-next__name { color: var(--accent); }

/* shared case-study media */
.cs-final__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block;
}
.cs-lead {
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--muted);
  max-width: 720px;
  line-height: 1.55;
}
.cs-lead strong { color: var(--text); font-weight: 500; }

.cs-rail__frame {
  aspect-ratio: 4/3; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
}
.cs-rail__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cs-rail__frame--swatch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 24px;
}
.cs-swatch {
  border-radius: 8px; background: var(--sw);
  border: 1px solid color-mix(in srgb, var(--sw) 70%, #fff 30%);
}
.cs-rail__frame--type {
  display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 32px;
}
.cs-type-sample { display: block; }
.cs-type-sample--display { font-size: 36px; font-weight: 500; letter-spacing: -0.02em; }
.cs-type-sample--body { font-size: 14px; color: var(--muted); }
.cs-type-sample--mono { font-family: var(--font-mono); font-size: 28px; color: #B45309; }

.cs-build__frame {
  aspect-ratio: 4/3; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
}
.cs-build__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* =============================================================
   Case study — Akrus brand layer
   ============================================================= */
body[data-case="akrus"] {
  --cs-accent: #C45A72;
  --cs-accent-soft: color-mix(in srgb, #9A102F 18%, transparent);
  --cs-mesh-a: #7ec8be;
  --cs-mesh-b: #e8a882;
  --cs-mesh-c: #9A102F;
  --cs-mesh-d: #f2d4bc;
}
body[data-case="akrus"] .cs-progress__bar,
body[data-case="akrus"] .cs-bignum,
body[data-case="akrus"] .cs-metric__num { color: var(--cs-accent); }
body[data-case="akrus"] .cs-back:hover { border-color: var(--cs-accent); }
body[data-case="akrus"] .cs-next a:hover .cs-next__name { color: var(--cs-accent); }
body[data-case="akrus"] .cs-build__badge { background: var(--cs-accent); }

body[data-case="akrus"] .cs-hero { position: relative; overflow: clip; }
body[data-case="akrus"] .cs-hero__ambient {
  position: absolute; inset: -20% -10% 40%;
  background:
    radial-gradient(ellipse 58% 72% at 22% 42%, var(--cs-mesh-a) 0%, transparent 58%),
    radial-gradient(ellipse 52% 68% at 78% 38%, var(--cs-mesh-b) 0%, transparent 54%),
    radial-gradient(ellipse 64% 80% at 52% 68%, var(--cs-mesh-c) 0%, transparent 56%),
    radial-gradient(ellipse 40% 55% at 88% 72%, var(--cs-mesh-d) 0%, transparent 52%);
  opacity: 0.14;
  filter: blur(60px);
  pointer-events: none;
}
body[data-case="akrus"] .cs-hero__media {
  border: 1px solid color-mix(in srgb, var(--cs-accent) 25%, var(--line));
  box-shadow: 0 24px 80px color-mix(in srgb, var(--cs-accent) 12%, transparent);
}

body[data-case="akrus"] .cs-thesis {
  position: relative;
  padding-block: 140px;
}
body[data-case="akrus"] .cs-thesis::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 0%, var(--cs-accent-soft) 50%, transparent 100%);
  pointer-events: none;
}
body[data-case="akrus"] .cs-thesis__quote {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 500;
  line-height: 1.25;
  max-width: 900px;
  margin: 24px 0 0;
  padding-left: 28px;
  border-left: 3px solid var(--cs-accent);
}

body[data-case="akrus"] .cs-discard {
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--cs-accent) 35%, var(--line));
  background: color-mix(in srgb, var(--cs-accent) 6%, var(--surface));
  max-width: 420px;
}
body[data-case="akrus"] .cs-discard__tag {
  display: inline-block;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-accent);
  margin-bottom: 6px;
}
body[data-case="akrus"] .cs-discard p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

body[data-case="akrus"] .cs-sticky__panel {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 65% at 100% 100%, rgba(249, 71, 99, 0.18) 0%, transparent 55%),
    radial-gradient(80% 50% at 0% 75%, rgba(254, 166, 135, 0.2) 0%, transparent 60%),
    linear-gradient(180deg, #faf6f2 0%, #fcf1e7 100%);
}
body[data-case="akrus"] .cs-sticky__panel-inner {
  width: min(88%, 340px);
  padding: 28px 24px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(36, 28, 26, 0.1);
  box-shadow: 0 12px 40px rgba(36, 28, 26, 0.08);
  color: #241C1A;
}
body[data-case="akrus"] .cs-sticky__panel-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #177F9B;
  margin-bottom: 12px;
}
body[data-case="akrus"] .cs-sticky__panel-text {
  font-size: 14px;
  line-height: 1.5;
  color: #5D4D48;
  margin: 0 0 16px;
}
body[data-case="akrus"] .cs-sticky__panel-cta {
  font-size: 13px;
  font-weight: 500;
  color: #241C1A;
}
/* =============================================================
   Scroll-driven background moods (guides attention, not a toggle)
   ============================================================= */
body { transition: background-color 0.7s var(--ease), color 0.7s var(--ease); }

/* base = default --bg (no class needed) */
/* moods paint the page-stage too, since it sits opaque above body for the footer reveal */
/* moods paint the page-stage; dark-first with subtle section shifts */
body.mood-surface, body.mood-surface .page-stage { background-color: var(--canvas); }
body.mood-tint, body.mood-tint .page-stage { background-color: color-mix(in srgb, var(--accent) 3%, var(--canvas)); }

body.mood-deep { background-color: var(--canvas); color: var(--on-ink); }
body.mood-deep .page-stage { background-color: var(--canvas); }
body.mood-deep .label,
body.mood-deep .contact__sub,
body.mood-deep .contact__meta { color: color-mix(in srgb, var(--on-ink) 60%, transparent); }
body.mood-deep .contact__email { color: var(--on-ink); }
body.mood-deep .form input,
body.mood-deep .form textarea {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
  color: var(--on-ink);
}
body.mood-deep .form input::placeholder,
body.mood-deep .form textarea::placeholder { color: color-mix(in srgb, var(--on-ink) 45%, transparent); }
body.mood-deep .btn--solid { background: var(--accent); color: #fff; }
body.mood-deep .contact__socials a { color: color-mix(in srgb, var(--on-ink) 60%, transparent); }
body.mood-deep .contact__socials a:hover { color: var(--accent); }

/* featured case media: accent glow on hover (depth) */
.case-card--featured:hover .case-card__media { box-shadow: var(--shadow-2), var(--shadow-glow); }

/* =============================================================
   Services — horizontal accordion
   ============================================================= */
.services__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--gutter); margin-bottom: 48px;
}
.services__title { font-size: clamp(56px, 11vw, 160px); line-height: 0.85; margin-top: 8px; }
.services__index { font-size: clamp(14px, 1.4vw, 20px); color: var(--muted); letter-spacing: 1px; }

.svc-row {
  display: flex; align-items: stretch;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.svc-item {
  flex: 1 1 0; min-width: 0;
  border-left: 1px solid var(--line);
  transition: flex-grow 0.5s var(--ease);
}
.svc-item:first-child { border-left: 0; }
.svc-item.is-open { flex-grow: 6.5; }

/* header bar — clickable, always visible */
.svc-item__bar {
  display: flex; width: 100%; text-align: left;
  flex-direction: column; align-items: flex-start; gap: 28px;
  padding: 36px 28px 32px;
  transition: color 0.3s ease;
}
.svc-item__no { font-size: 14px; color: var(--muted); }
.svc-item__title {
  font-size: clamp(18px, 1.7vw, 24px); line-height: 1; letter-spacing: 0.01em;
  transition: color 0.3s ease;
}
.svc-item__slash { display: none; color: var(--accent); margin-right: 12px; }
.svc-item:not(.is-open) .svc-item__bar:hover .svc-item__title { color: var(--accent); }

/* when open: number left, title right with // marker */
.svc-item.is-open .svc-item__bar {
  flex-direction: row; align-items: baseline; justify-content: space-between;
  gap: var(--gutter); padding-bottom: 8px;
}
.svc-item.is-open .svc-item__no { font-size: clamp(28px, 3vw, 40px); color: var(--text); font-family: var(--font-display); }
.svc-item.is-open .svc-item__title { font-size: clamp(22px, 2.4vw, 34px); }
.svc-item.is-open .svc-item__slash { display: inline; }

/* body — hidden until open; fades in after the column has room (no mid-animation squish/pop) */
.svc-item__body { display: none; }
.svc-item.is-open .svc-item__body {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  grid-template-areas: "list media" "desc media";
  gap: 28px 48px;
  padding: 24px 28px 44px;
  animation: svcReveal 0.45s var(--ease) 0.1s both;
}
@keyframes svcReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.svc-list { grid-area: list; align-self: start; }
.svc-list li {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(16px, 1.5vw, 22px); line-height: 1.5; letter-spacing: 0.01em;
}
.svc-list li::before { content: "/ "; color: var(--accent); }
.svc-item__media { grid-area: media; align-self: stretch; aspect-ratio: 4 / 3; overflow: hidden; }
.svc-item__desc {
  grid-area: desc; align-self: end; max-width: 46ch;
  font-size: 13px; line-height: 1.7; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--text);
}

/* mood: services sits on --surface; keep borders subtle */
body.mood-surface .svc-row { border-color: color-mix(in srgb, var(--text) 12%, transparent); }

/* tablet/mobile: stack vertically, vertical accordion */
@media (max-width: 860px) {
  .services__head { flex-direction: column; }
  .svc-row { flex-direction: column; border-bottom: 0; }
  .svc-item { border-left: 0; border-bottom: 1px solid var(--line); }
  .svc-item.is-open { flex-grow: 0; }
  .svc-item__bar { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; padding: 24px 4px; }
  .svc-item.is-open .svc-item__bar { padding: 24px 4px 8px; }
  .svc-item.is-open .svc-item__body {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "list" "desc";
    gap: 24px; padding: 8px 4px 32px;
  }
}

/* ============================================================
   Case study modal (Shipped) — split stage + detail panel
   ============================================================ */
.cmodal {
  position: fixed; inset: 0; z-index: 11000;
  display: grid; place-items: center; padding: 24px;
  visibility: hidden; opacity: 0;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.cmodal.is-open { visibility: visible; opacity: 1; transition: opacity 0.4s var(--ease); }
body.modal-open { overflow: hidden; }

.cmodal__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, #000 62%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.cmodal__dialog {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.95fr);
  width: min(1240px, 100%); height: min(760px, calc(100vh - 48px));
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  overflow: hidden; box-shadow: var(--shadow-2);
  transform: translateY(12px) scale(0.97); opacity: 0;
  transition: transform 0.28s var(--ease-out), opacity 0.28s var(--ease-out);
}
.cmodal.is-open .cmodal__dialog { transform: none; opacity: 1; }

/* ---- Stage (colored mock side) ---- */
.cmodal__stage {
  position: relative; overflow: hidden;
  background: var(--stage, linear-gradient(135deg, var(--accent), #2a2a2a));
}
.cmodal__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.18), transparent 60%);
}
.cmodal__track { display: flex; height: 100%; transition: transform 0.28s var(--ease-out); }
.cmodal__track.is-instant { transition: none; }
.cmodal__scene {
  position: relative; flex: 0 0 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: 56px 64px;
}
.cmodal__cap {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(255,255,255,0.78);
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(4px);
}

/* Browser-style mock frame */
.cmodal__mock {
  width: 100%; max-width: 560px; aspect-ratio: 16 / 11;
  border-radius: 12px; overflow: hidden;
  background: #fff; box-shadow: 0 30px 70px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
}
.cmodal__mock-bar {
  flex: 0 0 30px; display: flex; align-items: center; gap: 7px;
  padding: 0 14px; background: #f3f3f0; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cmodal__mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d9d9d4; }
.cmodal__mock-bar i:nth-child(1) { background: #f0625a; }
.cmodal__mock-bar i:nth-child(2) { background: #f3bd4e; }
.cmodal__mock-bar i:nth-child(3) { background: #58c14a; }
.cmodal__mock-body { flex: 1; display: flex; min-height: 0; }
.cmodal__mock-side {
  flex: 0 0 26%; padding: 14px 12px; display: flex; flex-direction: column; gap: 9px;
  background: #fafafa; border-right: 1px solid rgba(0,0,0,0.05);
}
.cmodal__mock-side span { height: 8px; border-radius: 4px; background: rgba(0,0,0,0.07); }
.cmodal__mock-side span:first-child { width: 60%; background: var(--mockc, var(--accent)); opacity: 0.85; }
.cmodal__mock-main { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 11px; }
.cmodal__mock-hero { height: 34%; border-radius: 8px; background: var(--mockc, var(--accent)); opacity: 0.16; }
.cmodal__mock-row { display: flex; gap: 10px; }
.cmodal__mock-row b { flex: 1; height: 46px; border-radius: 7px; background: rgba(0,0,0,0.06); display: block; }
.cmodal__mock-line { height: 8px; border-radius: 4px; background: rgba(0,0,0,0.08); }
.cmodal__mock-line.is-short { width: 55%; }

/* Stage nav + dots */
.cmodal__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28);
  color: #fff; backdrop-filter: blur(4px);
  transition: background 0.2s ease, transform 0.2s var(--ease);
}
.cmodal__nav:hover { background: rgba(255,255,255,0.3); }
.cmodal__nav:active { transform: translateY(-50%) scale(0.97); }
.cmodal__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cmodal__nav--prev { left: 18px; }
.cmodal__nav--next { right: 18px; }
.cmodal__dots {
  position: absolute; left: 0; right: 0; bottom: 18px;
  display: flex; gap: 8px; justify-content: center;
}
.cmodal__dots button {
  width: 7px; height: 7px; border-radius: 50%; cursor: pointer; padding: 0;
  background: rgba(255,255,255,0.4); border: none; transition: width 0.3s var(--ease), background 0.3s ease;
}
.cmodal__dots button.is-active { width: 22px; border-radius: 4px; background: #fff; }

/* ---- Detail panel ---- */
.cmodal__panel {
  display: flex; flex-direction: column; gap: 26px;
  padding: 30px 32px; overflow-y: auto;
  background: var(--bg); border-left: 1px solid var(--line);
}
.cmodal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cmodal__title { font-family: var(--font-display); font-size: 30px; line-height: 1.05; letter-spacing: 0.5px; }
.cmodal__actions { display: flex; gap: 8px; flex-shrink: 0; }
.cmodal__icon {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease);
}
.cmodal__icon:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.cmodal__icon[hidden] { display: none; }
.cmodal__icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cmodal__meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cmodal__meta dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.cmodal__meta dd { font-size: 15px; font-weight: 500; }
.cmodal__tag {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}

.cmodal__subhead { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.cmodal__overview { font-size: 15px; line-height: 1.65; color: var(--text); }
.cmodal__list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.cmodal__list li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.5; color: color-mix(in srgb, var(--text) 88%, transparent); }
.cmodal__list li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--accent);
}

/* Responsive */
@media (max-width: 900px) {
  .cmodal { padding: 0; }
  .cmodal__dialog {
    grid-template-columns: 1fr; grid-template-rows: minmax(0, 0.95fr) minmax(0, 1.05fr);
    width: 100%; height: 100vh; height: 100dvh; border-radius: 0; border: none;
  }
  .cmodal__scene { padding: 40px 32px; }
  .cmodal__panel { border-left: none; border-top: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  .cmodal, .cmodal__dialog, .cmodal__track, .cmodal__nav, .cmodal__icon, .cmodal__dots button { transition: none; }
}

/* ============================================================
   Bento card mocks — unique mesh header + device preview
   ============================================================ */
.bento__shot--mock {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--surface);
}
.bento__shot--mock::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 80% at 50% 0%, rgba(255,255,255,0.28), transparent 62%);
}
.bento__device {
  position: absolute; left: 50%; bottom: -16%; transform: translateX(-50%);
  width: 74%; max-width: 460px; border-radius: 12px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column;
  box-shadow: 0 26px 54px rgba(20,10,18,0.24), 0 2px 8px rgba(20,10,18,0.12);
  transition: transform 0.45s var(--ease);
}
.bento__item:hover .bento__device { transform: translateX(-50%) translateY(-10px); }
.bento__item--lg .bento__device { width: 62%; bottom: -14%; }
.bento__device-bar {
  flex: 0 0 26px; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  background: #f3f3f0; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.bento__device-bar i { width: 8px; height: 8px; border-radius: 50%; background: #dcdcd6; }
.bento__device-bar i:nth-child(1) { background: #f0625a; }
.bento__device-bar i:nth-child(2) { background: #f3bd4e; }
.bento__device-bar i:nth-child(3) { background: #58c14a; }
.bento__device-body { display: flex; min-height: 0; }
.bento__device-side {
  flex: 0 0 24%; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px;
  background: #fafafa; border-right: 1px solid rgba(0,0,0,0.05);
}
.bento__device-side span { height: 7px; border-radius: 4px; background: rgba(0,0,0,0.07); }
.bento__device-side span:first-child { width: 65%; background: var(--mc, var(--accent)); opacity: 0.85; }
.bento__device-main { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.bento__device-hero { height: 52px; border-radius: 8px; background: var(--mc, var(--accent)); opacity: 0.16; }
.bento__device-row { display: flex; gap: 9px; }
.bento__device-row b { flex: 1; height: 38px; border-radius: 6px; background: rgba(0,0,0,0.06); }
.bento__device-line { height: 7px; border-radius: 4px; background: rgba(0,0,0,0.08); }
.bento__device-line.is-short { width: 55%; }

@media (prefers-reduced-motion: reduce) { .bento__device { transition: none; } }

/* ============================================================
   Empty placeholder mocks — no inner content
   ============================================================ */
.bento__device {
  aspect-ratio: 16 / 11;
  background: linear-gradient(150deg, #ffffff, #f1f1ec);
  border: 1px solid rgba(0,0,0,0.05);
}
.cmodal__mock {
  background: linear-gradient(150deg, #ffffff, #eeeeea);
  border: 1px solid rgba(0,0,0,0.05);
}
/* Pink hover mask removed — keep only the device lift + cursor cue */
.bento__overlay { display: none; }





/* ============================================================
   SHOWROOM — pinned, scroll-driven WebGL curved-screen wall (#shipped)
   The section pins; scrolling spins the cylinder to present each
   project. Full-bleed shader-gradient atmosphere; meta on the right.
   ============================================================ */

.showroom-section {
  position: relative;
  padding: 0;
  background: transparent;
  color: var(--on-ink);
}
.showroom__pin { background: transparent; }
.showroom { position: static; }
.showroom-section.is-scrolly .showroom { height: 520vh; } /* +100vh lane for horizontal exit → apps */

/* Horizontal slide exit — both panels move together R→L */
body.is-section-sliding { overflow-x: clip; }

.section-slide-viewport {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
body.is-section-sliding .section-slide-viewport {
  visibility: visible;
  pointer-events: auto;
}

.section-slide-viewport__panel {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  will-change: transform;
  background: var(--bg);
}
.section-slide-viewport__panel--exit { z-index: 2; }
.section-slide-viewport__panel--enter {
  z-index: 1;
  left: 100vw;
}

/* entering section must be visible during the handoff (reveal would hide it) */
.section-slide-viewport__panel--enter .reveal,
.section-slide-viewport__panel--enter [data-stagger] > * {
  opacity: 1 !important;
  transform: none !important;
}
.section-slide-viewport__panel--exit .showroom__pin {
  position: relative;
  top: auto;
  height: 100vh;
  cursor: grab;
}
.section-slide-viewport__panel--enter > .section {
  min-height: 100vh;
  height: auto;
  margin: 0 !important;
  padding-block: var(--section-pad);
  overflow: visible;
  opacity: 1 !important;
  transform: none !important;
}

.apps-slide-spacer { width: 100%; pointer-events: none; }
.showroom-pin-spacer { height: 100vh; pointer-events: none; }

#apps.is-handoff-complete {
  opacity: 1 !important;
  transform: none !important;
}
#apps.is-handoff-complete .reveal,
#apps.is-handoff-complete [data-stagger] > * {
  opacity: 1 !important;
  transform: none !important;
}

.showroom__pin {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex; align-items: center;
  cursor: grab;
  touch-action: pan-y;
}
.showroom__pin.is-grabbing { cursor: grabbing; }

/* feature #11 — ambient world tint: the active project's smoothed light colour
   (written to :root every frame as --showroom-tint-r/g/b) bleeds into the black
   around the drum. Sits behind the transparent canvas so it fills the negative
   space, never the drum; fades to clear so the section edges stay true black.
   Fallback 255s render a near-invisible neutral glow before the loop runs. */
.showroom__pin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 40% 50%,
    rgba(var(--showroom-tint-r, 255), var(--showroom-tint-g, 255), var(--showroom-tint-b, 255), 0.06),
    transparent 70%
  );
}

.showroom__canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block;
  pointer-events: auto;
}

.showroom__overlay {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}

.showroom__stamp {
  position: absolute;
  left: calc(var(--inset-x) + var(--space-4));
  bottom: calc(var(--frame-bottom) + var(--space-6));
  margin: 0;
  padding-right: var(--space-4);
  max-width: calc(100% - (var(--inset-x) + var(--space-4)) * 2);
  font-family: var(--font-display);
  font-size: clamp(80px, 17vw, 240px);
  line-height: 0.82;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  /* feature #6 — SHIPPED is the farthest wall of the scene: pushed to the back
     with a permanent softening blur, a near-vanishing opacity, and a soft-light
     blend so it fuses into the dark room instead of sitting as flat type. The
     --parallax-x drift (slower than the drum) already places it in depth; these
     just finish it as the most distant layer. */
  color: color-mix(in srgb, var(--on-ink) 6%, transparent);
  mix-blend-mode: soft-light;
  filter: blur(1px);
  pointer-events: none;
  user-select: none;
  transform: translate3d(var(--parallax-x, 0px), 0, 0);
  will-change: transform;
}

.showroom__meta {
  pointer-events: auto;
  position: absolute;
  top: calc(var(--header-h) + clamp(12px, 3vh, 36px));
  right: calc(var(--inset-x) + var(--space-4));
  padding-left: var(--space-4);
  width: min(22rem, calc(100% - (var(--inset-x) + var(--space-4)) * 2));
  display: flex;
  flex-direction: column;
  text-align: left;
  perspective: 900px;            /* depth for the title's Z-swap (feature #1) */
}
.showroom__count {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  color: rgba(242, 241, 236, 0.45);
  margin-bottom: var(--space-3);
}
.showroom__count [data-count-cur] { color: var(--accent); font-size: 13px; }
.showroom__count-sep { margin: 0 4px; opacity: 0.45; }

/* feature #8 — living progress ruler. A thin bar under the counter fills
   (active+1)/N in the active project's smoothed hue (--showroom-tint-*, the same
   light the world tint uses). Width + colour ease so a project change reads as a
   deliberate advance, not a jump. --showroom-active/-total are written to :root
   by the render loop; fallbacks render a sane first frame before the loop runs. */
:root { --showroom-active: 0; --showroom-total: 5; }
.showroom__rule {
  position: relative;
  width: min(11rem, 100%);
  height: 2px;
  margin-bottom: var(--space-3);
  border-radius: 2px;
  background: rgba(242, 241, 236, 0.12);
  overflow: hidden;
}
.showroom__rule-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc((var(--showroom-active) + 1) / var(--showroom-total) * 100%);
  border-radius: inherit;
  background: rgb(
    var(--showroom-tint-r, 230),
    var(--showroom-tint-g, 230),
    var(--showroom-tint-b, 230)
  );
  box-shadow: 0 0 10px rgba(
    var(--showroom-tint-r, 230),
    var(--showroom-tint-g, 230),
    var(--showroom-tint-b, 230), 0.5
  );
  transition: width 0.6s cubic-bezier(.16, 1, .3, 1), background-color 0.4s ease;
}

/* counter flip: the digits live in an overflow-hidden window; on swap the old
   value slides up and out while the new value rises from below. */
.showroom__count-flip {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1em;
  vertical-align: bottom;
  min-width: 2ch;
}
.showroom__count-val {
  display: inline-block;
  will-change: transform, opacity;
}
.showroom__count-val.is-in   { position: absolute; left: 0; top: 0; transform: translateY(100%); opacity: 0; }
.showroom__count-val.is-cur  { position: relative; transform: translateY(0); opacity: 1;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease); }
.showroom__count-val.is-out  { position: absolute; left: 0; top: 0; transform: translateY(-100%); opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease); }
/* Title swap (feature #1): --showroom-swap-t is written to :root every frame
   from the showroom's damped rotation. 1 = active panel centred (title forward,
   sharp, lit in the project hue); 0 = plate mid-turn (title receded in Z,
   blurred, dimmed). The title therefore lives in the same Z-space as the plate. */
:root { --showroom-swap-t: 1; }

.showroom__name {
  --t: var(--showroom-swap-t, 1);
  --showroom-accent: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(40px, 4.8vw, 72px);
  line-height: 0.88; color: var(--on-ink);
  text-transform: uppercase; letter-spacing: 0.02em;
  transform: translate3d(0, 0, calc((1 - var(--t)) * -80px));
  filter: blur(calc((1 - var(--t)) * 6px));
  opacity: calc(0.18 + 0.82 * var(--t));
  transform-style: preserve-3d;
  will-change: transform, filter, opacity;
  text-shadow:
    0 0 calc(2px + 22px * var(--t)) color-mix(in srgb, var(--showroom-accent) calc(38% * var(--t)), transparent),
    0 2px 12px rgba(0, 0, 0, 0.42);
}
/* words stay atomic; each letter rises + fades on change, --ci staggers it ~30ms */
.showroom__name-word { display: inline-block; }
.showroom__name-ch {
  display: inline-block;
  animation: showroomCharIn 0.6s var(--ease) both;
  animation-delay: calc(var(--ci, 0) * 30ms);
}
@keyframes showroomCharIn {
  from { opacity: 0; transform: translateY(110%); }
  to   { opacity: 1; transform: translateY(0); }
}
.showroom__copy {
  color: rgba(242, 241, 236, 0.72);
  margin-top: var(--space-4);
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.45;
  max-width: 32ch;
}
.showroom__chips {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--accent); margin-top: var(--space-3);
}
/* copy + chips keep the opacity crossfade; the counter is excluded here because
   feature #8 gives it its own vertical flip (.showroom__count-val). */
.showroom__copy, .showroom__chips {
  /* feature #14-tail — the meta column swaps in depth: at rest the text sits at
     Z 0; the outgoing recedes to translate3d(0,0,-40px) + blur, so the swap reads
     as the plate pulling into the room, and the incoming settles forward from that
     depth as .is-swapping releases. --showroom-meta.perspective (900px) supplies
     the Z. Driven off the is-swapping state syncMeta already toggles. */
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), filter 0.32s var(--ease);
  will-change: transform, filter;
}
.showroom.is-swapping .showroom__copy,
.showroom.is-swapping .showroom__chips {
  opacity: 0; transform: translate3d(0, 0, -40px); filter: blur(3px);
}
/* feature #10 — metric anchor. Sits in the bottom-right dead space opposite the
   SHIPPED stamp; mono / small-caps / dim so it reads as a quiet result line, not
   a headline. Shares the copy+chips crossfade (opacity + translateY) so a project
   swap moves it in the same beat. .is-empty hides it when neither metric nor year
   resolves to a real value (placeholder tokens stay invisible). */
.showroom__metric {
  pointer-events: none;
  position: absolute;
  right: calc(var(--inset-x) + var(--space-4));
  bottom: calc(var(--frame-bottom) + var(--space-6));
  margin: 0;
  max-width: min(20rem, calc(100% - (var(--inset-x) + var(--space-4)) * 2));
  text-align: right;
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 1.4px;
  font-variant-caps: all-small-caps;
  text-transform: lowercase;
  color: rgba(242, 241, 236, 0.6);
  /* feature #14-tail — the metric recedes in Z on swap like the copy/chips. It's
     a leaf whose containing block is .showroom (no perspective there), so the
     foreshortening is baked into its own transform via perspective() rather than
     a parent perspective — keeps the depth local and touches no other layer. */
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), filter 0.32s var(--ease);
  will-change: transform, filter;
}
.showroom.is-swapping .showroom__metric {
  opacity: 0; transform: perspective(800px) translate3d(0, 0, -40px); filter: blur(3px);
}
.showroom__metric.is-empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .showroom__name { transform: none; filter: none; opacity: 1; }
  .showroom__name-ch { animation: none; }
  /* feature #8 — bar still fills proportionally, but jumps; no flip */
  .showroom__rule-fill { transition: none; }
  .showroom__count-val { transition: none; transform: none; }
  /* feature #10 — value updates in place, no fade/slide */
  .showroom__metric { transition: none; transform: none; filter: none; }
  /* feature #14-tail — no Z-recede / blur churn on swap; text just cuts */
  .showroom__copy, .showroom__chips { transition: none; will-change: auto; }
  .showroom.is-swapping .showroom__copy,
  .showroom.is-swapping .showroom__chips { transform: none; filter: none; }
  .showroom.is-swapping .showroom__metric { transform: none; filter: none; }
}

.showroom__nav { display: flex; align-items: center; gap: var(--space-3); margin-top: clamp(24px, 4vh, 44px); }
.showroom__arrow {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(244,238,247,0.22); color: #fff;
  cursor: pointer; backdrop-filter: blur(4px);
  /* feature #9 — with the permanent "drag · scroll · click" hint removed, the
     arrows carry the affordance themselves: a designed grow + one micro-bounce
     on hover/focus (spring peak past the rest scale, then settle), and a clear
     focus-visible ring for keyboard. The custom cursor label stays primary. */
  transform: scale(1);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
  will-change: transform;
}
.showroom__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.showroom__arrow:hover,
.showroom__arrow:focus-visible {
  border-color: var(--accent); color: var(--accent);
  background: rgba(255,255,255,0.07);
  animation: showroomArrowPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.showroom__arrow:active { transform: scale(1.02); }
.showroom__arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* grow to a peak (~1.12) then settle ~2px larger than rest — the backout easing
   above gives the settle its spring; keeping the final frame at 1.04 makes the
   grown state persist while hovered. */
@keyframes showroomArrowPop {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.12); }
  100% { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  /* feature #9 — no spring bounce; hover/focus still reads as a subtle, instant
     grown state (color + a flat 2px scale), and the focus-visible ring stays. */
  .showroom__arrow { will-change: auto; }
  .showroom__arrow:hover,
  .showroom__arrow:focus-visible { animation: none; transform: scale(1.04); }
}

.showroom__fallback { list-style: none; margin: 0; padding: 0;
  position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; white-space: nowrap; }
.no-js .showroom__canvas,
.showroom.is-failed .showroom__canvas { display: none; }
.no-js .showroom-section,
.showroom-section:has(.showroom.is-failed) { height: auto; }
.no-js .showroom__pin,
.showroom-section:has(.showroom.is-failed) .showroom__pin { position: static; height: auto; }
.no-js .showroom__fallback,
.showroom.is-failed .showroom__fallback {
  position: static; clip: auto; clip-path: none; height: auto; width: auto; overflow: visible;
  display: grid; gap: var(--space-3); margin: var(--space-8) 0; padding: 0 var(--margin);
}
.no-js .showroom__fallback a,
.showroom.is-failed .showroom__fallback a { color: #fff; font-family: var(--font-display); font-size: 28px; text-transform: uppercase; }

@media (max-width: 860px) {
  .showroom-section.is-scrolly .showroom { height: 440vh; }
  .showroom__stamp {
    font-size: clamp(56px, 24vw, 112px);
    left: calc(var(--inset-x) + var(--space-3));
    bottom: calc(var(--frame-bottom) + var(--space-4));
    padding-right: var(--space-3);
  }
  .showroom__meta {
    top: calc(var(--header-h) + var(--space-4));
    right: calc(var(--inset-x) + var(--space-3));
    left: calc(var(--inset-x) + var(--space-3));
    padding-left: var(--space-3);
    width: auto;
  }
  .showroom__name { font-size: clamp(36px, 11vw, 56px); }
  .showroom__metric {
    right: calc(var(--inset-x) + var(--space-3));
    bottom: calc(var(--frame-bottom) + var(--space-4));
  }
}

@media (prefers-reduced-motion: reduce) {
  .work .proj__panel-sill { --reveal: 1; will-change: auto; }
}

/* =============================================================
   i18n — dual-node language visibility
   ============================================================= */
html[data-lang="en"] [data-lang="pt"],
html[data-lang="pt"] [data-lang="en"] { display: none !important; }

/* ---------- Language toggle control ---------- */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--muted); cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.lang-toggle:hover { border-color: color-mix(in srgb, var(--cs-accent, var(--accent)) 50%, var(--line)); }
.lang-toggle__opt { transition: color 0.25s var(--ease); }
.lang-toggle__opt.is-active { color: var(--text); }
.lang-toggle__sep { width: 1px; height: 11px; background: var(--line); }
.cs-lang {
  position: fixed; top: 22px; right: 22px; z-index: 1001;
}
@media (max-width: 768px){ .cs-lang{ top: 16px; right: 16px; } }

/* =============================================================
   AKRUS — immersive case layer
   Editorial system on the dark canvas; wine + teal + warm accents.
   ============================================================= */
body[data-case="akrus"] {
  --cs-read: #9E9D95;         /* muted body base */
  --cs-wine: #9A102F;
  --cs-rose: #C45A72;
  --cs-teal: #177F9B;
  --cs-warm: #E8A882;
}
body[data-case="akrus"] .scene { padding-block: clamp(72px, 11vw, 150px); }

.cs-link {
  color: var(--text);
  text-decoration: none;
  background-image: linear-gradient(var(--cs-rose), var(--cs-rose));
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  padding-bottom: 1px;
  transition: color 0.3s var(--ease), background-size 0.3s var(--ease);
}
.cs-link:hover { color: var(--cs-rose); background-size: 100% 100%; background-image: linear-gradient(color-mix(in srgb, var(--cs-rose) 14%, transparent), color-mix(in srgb, var(--cs-rose) 14%, transparent)); }

/* ---------- Hero ---------- */
body[data-case="akrus"] .cs-hero__inner { display: flex; flex-direction: column; align-items: flex-start; }
.cs-mark { color: var(--cs-rose); font-size: 20px; margin-bottom: 20px; opacity: 0.9; }
.cs-hero__eyebrow { font-family: var(--font-mono); letter-spacing: 0.14em; }
body[data-case="akrus"] .cs-hero__name {
  font-family: var(--font-body);
  font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(60px, 13vw, 168px); line-height: 0.92;
  margin-top: 14px;
}
.cs-hero__lede {
  font-size: clamp(21px, 3.1vw, 34px); line-height: 1.32;
  font-weight: 400; color: var(--text);
  max-width: 20ch; margin-top: 24px; letter-spacing: -0.01em;
}
.cs-hero__lede em { font-style: italic; color: var(--cs-rose); }
body[data-case="akrus"] .cs-hero__meta { gap: clamp(28px, 5vw, 56px); margin-top: 40px; }
.cs-hero__meta > div span:not(.label) { font-size: 14px; color: var(--text); max-width: 30ch; display: block; }
body[data-case="akrus"] .cs-hero__media {
  width: 100%; aspect-ratio: 16/9; margin-top: 56px; border-radius: 18px; overflow: hidden;
}
body[data-case="akrus"] .cs-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* traction ticker */
.cs-ticker {
  width: 100%; margin-top: 40px; padding-block: 16px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cs-ticker__track {
  display: inline-flex; gap: 48px; white-space: nowrap;
  animation: cs-ticker 32s linear infinite; will-change: transform;
}
.cs-ticker__track span { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--muted); }
.cs-ticker__track b { font-family: var(--font-mono); color: var(--text); font-weight: 500; }
.cs-ticker__track i { font-style: normal; }
@keyframes cs-ticker { to { transform: translateX(-50%); } }
.cs-ticker:hover .cs-ticker__track { animation-play-state: paused; }

/* ---------- Metadata block ---------- */
.cs-meta { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.cs-meta__row {
  display: grid; grid-template-columns: 200px 1fr; gap: 40px;
  padding-block: 26px; border-bottom: 1px solid var(--line); align-items: baseline;
}
.cs-meta__row p { color: var(--text); font-size: clamp(15px, 1.8vw, 18px); line-height: 1.5; margin: 0; }
@media (max-width: 768px){ .cs-meta__row{ grid-template-columns: 1fr; gap: 8px; padding-block: 20px; } }

/* ---------- Chapter: two-column titled section ---------- */
.cs-chapter__grid { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: clamp(40px, 7vw, 96px); align-items: start; }
.cs-chapter__aside { position: sticky; top: clamp(80px, 16vh, 160px); }
.cs-chapter__aside .label { color: var(--cs-rose); }
.cs-chapter__title {
  font-family: var(--font-body); font-weight: 500; letter-spacing: -0.02em;
  text-transform: none; text-wrap: balance;
  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.06; margin-top: 14px; color: var(--text);
}
@media (max-width: 900px){
  .cs-chapter__grid{ grid-template-columns: 1fr; gap: 28px; }
  .cs-chapter__aside{ position: static; }
}

/* reading-highlight prose */
.cs-read { max-width: 62ch; }
.cs-read p { color: var(--cs-read); font-size: clamp(17px, 1.9vw, 21px); line-height: 1.62; margin: 0 0 1.15em; letter-spacing: -0.005em; }
.cs-read p:last-child { margin-bottom: 0; }
.cs-read .hl { color: color-mix(in srgb, var(--cs-read) 100%, transparent); transition: color 0.6s var(--ease); }
.cs-read .hl.is-lit { color: var(--text); }
.cs-read--tradeoff { margin-top: 32px; padding-left: 22px; border-left: 2px solid color-mix(in srgb, var(--cs-rose) 55%, var(--line)); }
.cs-kognus { color: var(--cs-teal); font-weight: 500; }

/* pull statement */
.cs-statement { margin-top: clamp(56px, 9vw, 120px); }
.cs-statement p {
  font-family: var(--font-body); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(28px, 5.2vw, 66px); line-height: 1.08; max-width: 18ch;
  color: color-mix(in srgb, var(--text) 40%, var(--bg));
}
.cs-statement__accent { color: var(--text); }
body[data-case="akrus"] .cs-statement__accent { color: var(--text); }
.cs-statement p em { font-style: normal; }

/* ---------- Corrosion viz ---------- */
.cs-corrosion { margin: 40px 0 0; display: grid; gap: 18px; }
.cs-corrosion__row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.cs-corrosion__tag { font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.04em; }
.cs-corrosion__tag--fade { color: var(--muted); }
.cs-corrosion__tag--hold { color: var(--cs-teal); }
.cs-corrosion__bar { height: 12px; border-radius: 100px; background: var(--surface); overflow: hidden; position: relative; }
.cs-corrosion__bar span { position: absolute; inset: 0; width: 100%; transform-origin: left; border-radius: 100px; }
.cs-corrosion__bar--fade span { background: linear-gradient(90deg, var(--cs-wine), color-mix(in srgb, var(--cs-wine) 30%, transparent)); }
.cs-corrosion__bar--hold span { background: linear-gradient(90deg, var(--cs-teal), color-mix(in srgb, var(--cs-teal) 55%, var(--cs-warm))); }
.cs-corrosion.is-in .cs-corrosion__bar--fade span { animation: cs-erode 2.6s var(--ease-out) forwards; }
.cs-corrosion.is-in .cs-corrosion__bar--hold span { animation: cs-hold 2.6s var(--ease-out) forwards; }
@keyframes cs-erode { 0%{ transform: scaleX(1); opacity: 1; } 100%{ transform: scaleX(0.58); opacity: 0.5; } }
@keyframes cs-hold { 0%{ transform: scaleX(0.4); opacity: 0.6; } 100%{ transform: scaleX(1); opacity: 1; } }
.cs-cap { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.5; max-width: 60ch; }

/* language pair */
.cs-langpair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.cs-langpair__item { padding: 20px 22px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); position: relative; }
.cs-langpair__mark { position: absolute; top: 16px; right: 18px; font-size: 14px; }
.cs-langpair__item--kill .cs-langpair__mark { color: var(--cs-wine); }
.cs-langpair__item--keep .cs-langpair__mark { color: var(--cs-teal); }
.cs-langpair__word { display: block; font-size: clamp(18px, 2.4vw, 24px); font-weight: 500; letter-spacing: -0.01em; }
.cs-langpair__item--kill .cs-langpair__word { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--cs-wine); }
.cs-langpair__item--keep .cs-langpair__word { color: var(--text); }
.cs-langpair__note { display: block; font-size: 12px; font-family: var(--font-mono); color: var(--muted); margin-top: 10px; }
@media (max-width: 620px){ .cs-langpair{ grid-template-columns: 1fr; } }

/* ---------- Cartography map ---------- */
.cs-map { margin: 40px 0 0; }
.cs-map__plane {
  position: relative; aspect-ratio: 16/10; border-radius: 16px;
  border: 1px solid var(--line); background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 25% 100%,
    var(--surface);
  overflow: hidden;
}
.cs-map__axis { position: absolute; font-size: 11px; font-family: var(--font-mono); color: var(--muted); letter-spacing: 0.04em; }
.cs-map__axis--x { bottom: 12px; left: 16px; }
.cs-map__axis--y { top: 16px; left: 12px; writing-mode: vertical-rl; transform: rotate(180deg); }
.cs-map__cloud {
  position: absolute; inset: 30% 34% 20% 14%;
  background:
    radial-gradient(circle at 20% 60%, var(--muted) 0 2px, transparent 2px) 0 0/22px 26px,
    radial-gradient(circle at 70% 30%, var(--muted) 0 1.5px, transparent 2px) 6px 10px/30px 22px;
  opacity: 0.34; filter: blur(0.2px);
}
.cs-map__void {
  position: absolute; top: 12%; right: 8%; width: 30%; height: 40%;
  border: 1px dashed color-mix(in srgb, var(--cs-rose) 50%, var(--line)); border-radius: 12px;
  opacity: 0; transform: scale(0.94); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.cs-map__voidlabel { position: absolute; top: -10px; left: 12px; font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cs-rose); background: var(--surface); padding: 0 6px; }
.cs-map__akrus {
  position: absolute; top: 22%; right: 15%;
  padding: 6px 14px; border-radius: 100px; background: var(--cs-wine); color: #fff;
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--cs-wine) 45%, transparent);
  opacity: 0; transform: translateY(10px) scale(0.9); transition: opacity 0.6s var(--ease) 0.35s, transform 0.6s var(--ease-out) 0.35s;
}
.cs-map.is-in .cs-map__void { opacity: 1; transform: scale(1); }
.cs-map.is-in .cs-map__akrus { opacity: 1; transform: translateY(0) scale(1); }

/* ---------- Pattern cards ---------- */
.cs-pattern { position: relative; margin-top: 28px; padding: 28px 30px 28px 68px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.cs-pattern__idx { position: absolute; top: 28px; left: 26px; font-family: var(--font-mono); font-size: 13px; color: var(--cs-rose); }
.cs-pattern h3 { font-family: var(--font-body); text-transform: none; line-height: 1.15; font-size: clamp(18px, 2.2vw, 23px); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 12px; color: var(--text); }
.cs-pattern p { color: var(--cs-read); font-size: 16px; line-height: 1.55; margin: 0; }
.cs-pattern p .hl { color: var(--text); }
.cs-pattern--kognus { border-color: color-mix(in srgb, var(--cs-teal) 30%, var(--line)); background: color-mix(in srgb, var(--cs-teal) 5%, var(--surface)); }
.cs-pattern--kognus .cs-pattern__idx { color: var(--cs-teal); }
@media (max-width: 620px){ .cs-pattern{ padding: 24px 22px 24px 22px; } .cs-pattern__idx{ position: static; display: block; margin-bottom: 8px; } }

/* ---------- Versus (Option A / B) ---------- */
.cs-versus { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; }
.cs-versus__card { padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.cs-versus__card--kill { opacity: 0.72; }
.cs-versus__tag { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.cs-versus__card--kill .cs-versus__tag { color: var(--cs-wine); }
.cs-versus__card--keep .cs-versus__tag { color: var(--cs-teal); }
.cs-versus__demo { position: relative; height: 150px; border-radius: 12px; margin: 14px 0; display: grid; place-content: center; text-align: center; overflow: hidden; }
.cs-versus__demo--vanity { background: linear-gradient(135deg, #2a1418, #1c1012); }
.cs-versus__demo--calm { background: linear-gradient(180deg, #faf6f2, #f1e7df); }
.cs-versus__big { font-family: var(--font-mono); font-size: clamp(22px, 3vw, 30px); color: #fff; font-weight: 500; }
.cs-versus__rank { display: block; font-size: 12px; color: var(--cs-rose); margin-top: 6px; }
.cs-versus__confetti { position: absolute; top: 10px; left: 14px; font-size: 18px; filter: grayscale(0.2); opacity: 0.8; }
.cs-versus__card--kill::after { content: "✕"; position: absolute; top: 14px; right: 18px; color: var(--cs-wine); font-size: 18px; }
.cs-versus__label { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: #8a756c; }
.cs-versus__dots { display: block; font-size: 28px; letter-spacing: 4px; color: #241C1A; margin-top: 8px; }
.cs-versus__reveal { display: block; font-size: 11px; color: #177F9B; margin-top: 8px; }
.cs-versus__card p { color: var(--cs-read); font-size: 15px; line-height: 1.5; margin: 0; }
.cs-versus__card--keep p { color: var(--text); }
@media (max-width: 620px){ .cs-versus{ grid-template-columns: 1fr; } }

/* ---------- Brand rules ---------- */
.cs-rules { margin-top: 36px; padding: 24px 26px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--cs-rose) 32%, var(--line)); background: color-mix(in srgb, var(--cs-rose) 4%, transparent); }
.cs-rules__label { display: block; font-size: 12px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cs-rose); margin-bottom: 16px; }
.cs-rules ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 20px; }
.cs-rules li { position: relative; padding-left: 20px; font-size: 14px; color: var(--text); }
.cs-rules li::before { content: "—"; position: absolute; left: 0; color: var(--cs-rose); }
@media (max-width: 620px){ .cs-rules ul{ grid-template-columns: 1fr 1fr; } }

/* ---------- Dual language switch ---------- */
.cs-dual { margin-top: 36px; }
.cs-dual__switch { position: relative; display: inline-flex; gap: 4px; padding: 4px; border-radius: 100px; border: 1px solid var(--line); background: var(--surface); }
.cs-dual__btn { position: relative; z-index: 1; border: 0; background: transparent; color: var(--muted); padding: 8px 20px; border-radius: 100px; font-size: 13px; font-weight: 500; cursor: pointer; transition: color 0.3s var(--ease); font-family: var(--font-body); }
.cs-dual__btn.is-active { color: var(--text); }
.cs-dual__thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; border-radius: 100px; background: color-mix(in srgb, var(--cs-rose) 22%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cs-rose) 40%, var(--line)); transition: transform 0.4s var(--ease-out), width 0.4s var(--ease-out); }
.cs-dual__stage { position: relative; margin-top: 16px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb, var(--cs-wine) 8%, var(--surface)), var(--surface)); overflow: hidden; min-height: 190px; }
.cs-dual__face { position: absolute; inset: 0; padding: 32px 34px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease-out); }
.cs-dual__face.is-active { opacity: 1; transform: none; pointer-events: auto; position: relative; }
.cs-dual__eyebrow { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--cs-rose); margin-bottom: 12px; }
.cs-dual__face[data-dual-face="inv"] .cs-dual__eyebrow { color: var(--cs-teal); }
.cs-dual__hero { font-size: clamp(20px, 2.8vw, 30px); font-weight: 500; letter-spacing: -0.015em; color: var(--text); line-height: 1.2; margin: 0; }
.cs-dual__sub { font-size: 15px; color: var(--cs-read); margin: 12px 0 0; }

/* vocabulary table */
.cs-vocab { margin-top: 32px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cs-vocab__row { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 20px; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 14px; align-items: baseline; }
.cs-vocab__row:last-child { border-bottom: 0; }
.cs-vocab__row--head { background: var(--surface); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.cs-vocab__row--head span:nth-child(2) { color: var(--cs-rose); }
.cs-vocab__row--head span:nth-child(3) { color: var(--cs-teal); }
.cs-vocab__k { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.cs-vocab__row span { color: var(--text); }
@media (max-width: 720px){ .cs-vocab__row{ grid-template-columns: 1fr; gap: 6px; } .cs-vocab__row--head{ display: none; } .cs-vocab__k{ color: var(--cs-rose); } }

/* glossary + stamp */
.cs-glossary { display: grid; grid-template-columns: 1fr 1fr auto; gap: 20px; margin-top: 32px; align-items: start; }
.cs-glossary__col { padding: 20px 22px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.cs-glossary__h { display: block; font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; }
.cs-glossary__col--banned .cs-glossary__h { color: var(--cs-wine); }
.cs-glossary__col--ok .cs-glossary__h { color: var(--cs-teal); }
.cs-glossary__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs-glossary__col--banned li { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--cs-wine) 70%, transparent); font-size: 15px; }
.cs-glossary__col--ok li { color: var(--text); font-size: 15px; }
.cs-stamp { display: flex; flex-direction: column; gap: 12px; width: 200px; padding: 22px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--cs-teal) 30%, var(--line)); background: color-mix(in srgb, var(--cs-teal) 6%, transparent); }
.cs-stamp__ring { display: grid; place-content: center; width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--cs-teal); color: var(--cs-teal); font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.05em; }
.cs-stamp__text { font-size: 13px; line-height: 1.5; color: var(--cs-read); }
@media (max-width: 860px){ .cs-glossary{ grid-template-columns: 1fr 1fr; } .cs-stamp{ grid-column: 1 / -1; width: auto; flex-direction: row; align-items: center; } }
@media (max-width: 560px){ .cs-glossary{ grid-template-columns: 1fr; } }

/* ---------- Moat ---------- */
.cs-moat { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; margin: 40px 0 0; }
.cs-moat__entity { padding: 26px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-align: center; display: flex; flex-direction: column; gap: 8px; }
.cs-moat__flag { font-size: 26px; }
.cs-moat__name { font-size: 17px; font-weight: 500; color: var(--text); }
.cs-moat__desc { font-size: 13px; color: var(--muted); font-family: var(--font-mono); }
.cs-moat__link { display: grid; place-items: center; width: 72px; }
.cs-moat__link span { display: block; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--cs-rose) 0 6px, transparent 6px 12px); }
@media (max-width: 620px){ .cs-moat{ grid-template-columns: 1fr; gap: 12px; } .cs-moat__link{ width: auto; height: 40px; transform: rotate(90deg); } }

.cs-why { margin-top: 28px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cs-why__row { display: grid; grid-template-columns: 1.2fr 1.4fr auto; gap: 20px; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 14px; align-items: center; }
.cs-why__row:last-child { border-bottom: 0; }
.cs-why__row--head { background: var(--surface); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.cs-why__row span { color: var(--text); }
.cs-why__time { font-family: var(--font-mono); color: var(--cs-rose); white-space: nowrap; }
@media (max-width: 720px){ .cs-why__row{ grid-template-columns: 1fr; gap: 6px; } .cs-why__row--head{ display: none; } }

.cs-timing { position: relative; margin-top: 32px; padding: 22px 26px 22px 30px; border-left: 2px solid var(--cs-rose); background: linear-gradient(90deg, color-mix(in srgb, var(--cs-rose) 8%, transparent), transparent 70%); border-radius: 0 14px 14px 0; }
.cs-timing__dot { position: absolute; left: -7px; top: 28px; width: 12px; height: 12px; border-radius: 50%; background: var(--cs-rose); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cs-rose) 25%, transparent); }
.cs-timing__date { display: inline-block; font-family: var(--font-mono); font-size: 12px; color: var(--cs-rose); letter-spacing: 0.06em; margin-bottom: 8px; }
.cs-timing__text { display: block; font-size: 16px; line-height: 1.55; color: var(--cs-read); }
.cs-timing__text b { color: var(--text); font-weight: 500; }

/* ---------- Animated flow ---------- */
.cs-flow { display: flex; align-items: flex-start; justify-content: center; gap: 0; flex-wrap: wrap; margin: 40px 0 0; padding: 40px 0; }
.cs-flow__node { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease-out); }
.cs-flow__node.is-on { opacity: 1; transform: none; }
.cs-flow__pin { display: grid; place-content: center; min-width: 84px; height: 84px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--cs-rose) 40%, var(--line)); background: var(--surface); font-family: var(--font-mono); font-size: 15px; color: var(--text); padding: 0 14px; }
.cs-flow__pin--mid { border-radius: 100px; border-color: color-mix(in srgb, var(--cs-teal) 50%, var(--line)); color: var(--cs-teal); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cs-teal) 8%, transparent); }
.cs-flow__cap { font-size: 12px; color: var(--muted); max-width: 14ch; }
.cs-flow__wire { flex: 1 1 60px; min-width: 60px; max-width: 130px; height: 84px; display: flex; align-items: center; }
.cs-flow__wire span { display: block; width: 100%; height: 2px; background: linear-gradient(90deg, var(--cs-rose), var(--cs-teal)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); }
.cs-flow__wire.is-on span { transform: scaleX(1); }
.cs-flow figcaption { flex-basis: 100%; text-align: center; margin-top: 28px; }
@media (max-width: 620px){
  .cs-flow{ flex-direction: column; align-items: center; }
  .cs-flow__wire{ width: 2px; min-width: 0; height: 40px; flex: 0 0 40px; }
  .cs-flow__wire span{ width: 2px; height: 100%; transform: scaleY(0); transform-origin: top; }
  .cs-flow__wire.is-on span{ transform: scaleY(1); }
}

/* ---------- Before / after ---------- */
.cs-ba { --ba-pos: 52%; position: relative; margin-top: 36px; aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); user-select: none; cursor: ew-resize; }
.cs-ba__pane { position: absolute; inset: 0; }
.cs-ba__pane--after { clip-path: inset(0 0 0 var(--ba-pos)); }
.cs-ba__pane--after img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cs-ba__pane--before { clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
.cs-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--ba-pos); width: 44px; transform: translateX(-50%); background: transparent; border: 0; cursor: ew-resize; z-index: 3; }
.cs-ba__handle::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--text); opacity: 0.9; }
.cs-ba__handle span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: var(--text); color: var(--bg); display: grid; place-content: center; box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.cs-ba__handle span::before { content: "⇄"; font-size: 16px; }
.cs-ba.is-dragging { cursor: ew-resize; }

/* labelled placeholders */
.cs-ph { position: relative; display: grid; place-content: center; background: var(--surface); overflow: hidden; }
.cs-ph--dense { width: 100%; height: 100%; background: linear-gradient(135deg, #1f1416, #181012); }
.cs-ph__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 20px; position: absolute; inset: 0; opacity: 0.5; }
.cs-ph__grid i { background: color-mix(in srgb, var(--cs-wine) 22%, var(--surface)); border-radius: 6px; border: 1px solid var(--line); }
.cs-ph__label { position: absolute; top: 12px; left: 14px; z-index: 2; font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); background: color-mix(in srgb, var(--bg) 70%, transparent); padding: 3px 8px; border-radius: 4px; }
.cs-ph__label--good { color: var(--cs-teal); }
.cs-ph__arrow { position: relative; z-index: 2; font-size: 13px; color: var(--cs-rose); font-family: var(--font-mono); background: color-mix(in srgb, var(--bg) 82%, transparent); padding: 6px 12px; border-radius: 6px; }
.cs-ph--video { aspect-ratio: 4/3; border-radius: 12px; display: grid; place-content: center; gap: 12px; text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--cs-wine) 14%, var(--surface)), var(--surface)); }
.cs-ph__play { display: grid; place-content: center; width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; border: 1px solid var(--line); color: var(--text); font-size: 15px; }

/* code snippet frame */
.cs-rail__frame--code { display: grid; align-content: center; padding: 24px; background: #0e0e0d; border: 1px solid var(--line); }
.cs-rail__frame--code pre { margin: 0; overflow-x: auto; }
.cs-rail__frame--code code { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--text); white-space: pre; }
.cs-code__c { color: var(--muted); }
.cs-code__p { color: var(--cs-teal); }

/* ---------- Evidence ---------- */
.cs-evi__lede { max-width: 62ch; margin-top: 18px; color: var(--cs-read); font-size: clamp(16px, 1.9vw, 20px); line-height: 1.55; }
.cs-metrics--wide { grid-template-columns: repeat(4, 1fr); margin-top: 44px; margin-bottom: 44px; }
@media (max-width: 860px){ .cs-metrics--wide{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .cs-metrics--wide{ grid-template-columns: 1fr; } }
.cs-evi__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
body[data-case="akrus"] .cs-evi__cards .cs-card h3,
body[data-case="akrus"] .cs-card h3 { font-family: var(--font-body); text-transform: none; letter-spacing: -0.01em; line-height: 1.2; font-weight: 500; font-size: 18px; color: var(--text); }
@media (max-width: 860px){ .cs-evi__cards{ grid-template-columns: 1fr; } }

/* ---------- Closing ---------- */
.cs-close { padding-block: clamp(80px, 14vw, 180px); }
.cs-close__quote {
  font-family: var(--font-body); font-weight: 500; letter-spacing: -0.02em;
  text-transform: none; text-wrap: balance;
  font-size: clamp(28px, 5vw, 60px); line-height: 1.1; max-width: 20ch;
  margin: 24px 0 0; color: var(--text);
}
.cs-close__coda { margin-top: 40px; max-width: 60ch; color: var(--cs-read); font-size: clamp(16px, 1.9vw, 19px); line-height: 1.6; }

/* ---------- Open tension — the contradiction I hold ---------- */
.cs-tension { padding-block: clamp(96px, 16vw, 210px); }
.cs-tension__q {
  font-family: var(--font-body); font-weight: 500; letter-spacing: -0.02em;
  text-transform: none; text-wrap: balance;
  font-size: clamp(30px, 5.4vw, 62px); line-height: 1.08; max-width: 19ch;
  margin: 22px 0 0; color: color-mix(in srgb, var(--text) 84%, var(--bg));
}
.cs-tension__q em { font-style: normal; color: var(--cs-rose); }
.cs-tension__coda {
  margin-top: 48px; max-width: 58ch; color: var(--cs-read);
  font-size: clamp(16px, 1.9vw, 19px); line-height: 1.62;
}
.cs-tension__coda strong { color: var(--text); font-weight: 500; }

/* ---------- Product screenshot moment (light frames break the dark text rhythm) ---------- */
.cs-shot__head { margin-bottom: clamp(22px, 3.5vw, 40px); max-width: 56ch; }
.cs-shot__title {
  font-family: var(--font-body); font-weight: 500; letter-spacing: -0.02em;
  text-transform: none; text-wrap: balance; margin-top: 14px;
  font-size: clamp(24px, 3.2vw, 42px); line-height: 1.08; color: var(--text);
}
.cs-shot__frame {
  border-radius: clamp(12px, 1.4vw, 18px); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.72);
  background: var(--surface); margin: 0;
}
.cs-shot__frame img { width: 100%; height: auto; display: block; }
.cs-shot__cap { margin-top: 18px; max-width: 64ch; color: var(--cs-read); font-size: clamp(14px, 1.6vw, 16px); line-height: 1.55; }
.cs-shot__cap b { color: var(--text); font-weight: 500; }
.cs-shot__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 22px); }
@media (max-width: 860px){ .cs-shot__grid{ grid-template-columns: 1fr; } }

/* chapter layout variant — single column, no sticky aside (breaks the repeated two-col shell) */
.cs-chapter--center .cs-chapter__grid { grid-template-columns: 1fr; gap: clamp(24px, 3.5vw, 44px); }
.cs-chapter--center .cs-chapter__aside { position: static; max-width: 34ch; }
.cs-chapter--center .cs-chapter__title { font-size: clamp(30px, 4.4vw, 54px); }
.cs-chapter--center .cs-chapter__body { max-width: 76ch; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cs-ticker__track { animation: none; }
  .cs-corrosion.is-in .cs-corrosion__bar span { animation: none; }
  .cs-corrosion__bar--fade span { transform: scaleX(0.58); opacity: 0.5; }
  .cs-flow__node, .cs-map__void, .cs-map__akrus, .cs-read .hl { transition: none; }
}