/* J3C. Concept: your team's day is an edit; we cut the manual clips. See DESIGN.md. */
@font-face { font-family: Satoshi; font-weight: 400; font-display: swap; src: url(/assets/303206dc8b-KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff2) format("woff2"); }
@font-face { font-family: Satoshi; font-weight: 500; font-display: swap; src: url(/assets/2f3cfb7ef8-7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff2) format("woff2"); }

:root {
  --ground: #0b0a09;
  --panel: #141210;
  --ink: #efe9de;
  --muted: #958e83;
  --line: rgb(239 233 222 / 0.12);
  --line-2: rgb(239 233 222 / 0.22);
  --clip: #2b2723;
  --tally: #f56a42;
  --craft: #6b92ff;
  --curtain: #000;

  --sans: Satoshi, ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display: clamp(52px, 8.4vw, 132px);
  --display-2: clamp(40px, 5.2vw, 80px);

  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --in-out: cubic-bezier(0.87, 0, 0.13, 1);
  --margin: max(clamp(24px, 5.5vw, 88px), calc((100vw - 1400px) / 2));
  --bar: 72px;

  color-scheme: dark;
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ground); }
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
b, em { font: inherit; }
:focus-visible { outline: 2px solid var(--tally); outline-offset: 3px; border-radius: 2px; }
[id] { scroll-margin-top: var(--bar); }

.mono { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: 12px; z-index: 50; padding: 8px 12px; background: var(--ink); color: var(--ground); border-radius: 6px; translate: 0 -200%; }
.skip:focus-visible { translate: none; }

.display { font-size: var(--display); line-height: 0.9; font-weight: 500; letter-spacing: -0.045em; }
.display-2 { font-size: var(--display-2); line-height: 0.92; font-weight: 500; letter-spacing: -0.04em; }
/* the mask is tall enough for descenders (g, y, p); the slide-in distance clears it */
.line { display: block; overflow: clip; padding-bottom: 0.22em; margin-bottom: -0.22em; }
.line > span { display: block; text-wrap: balance; }
.display .line:first-child > span { margin-left: -0.06em; }
.kicker { font-family: var(--mono); font-size: 13px; font-weight: 400; line-height: 16px; color: var(--muted); }

/* Buttons: a wipe, like a cut, fills them on hover */
.btn {
  position: relative; isolation: isolate; overflow: clip; display: inline-flex; align-items: center; height: 52px; padding: 0 24px;
  border-radius: 10px; background: var(--tally); color: #170c07; font-size: 16px; font-weight: 500; white-space: nowrap;
  transition: color 0.45s var(--out), scale 0.16s var(--out);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); clip-path: inset(0 100% 0 0); transition: clip-path 0.55s var(--out); }
.btn:focus-visible::before { clip-path: inset(0); }
.btn:active { scale: 0.97; }
.btn-sm { height: 36px; padding: 0 14px; border-radius: 8px; font-size: 14px; }
@media (hover: hover) { .btn:hover::before { clip-path: inset(0); } }

/* Nav: the playhead line draws under the link */
.draw { padding: 2px 4px; margin: -2px -4px; border-radius: 3px; background: linear-gradient(var(--tally) 0 0) left bottom / 0% 1.5px no-repeat, linear-gradient(rgb(245 106 66 / 0.16) 0 0) left / 0% 100% no-repeat; transition: background-size 0.45s var(--out), color 0.3s; }
.draw[aria-current] { background-size: 100% 1.5px, 0% 100%; }
.draw:focus-visible { background-size: 100% 1.5px, 100% 100%; color: var(--ink); }
@media (hover: hover) { .draw:hover { background-size: 100% 1.5px, 100% 100%; color: var(--ink); } }

/* Bar */
.bar {
  view-transition-name: bar;
  position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 32px; height: var(--bar); padding-inline: var(--margin);
  background: rgb(11 10 9 / 0.82); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px);
}
.logo { position: relative; display: inline-flex; align-items: center; min-height: 44px; }
.logo img { width: 60px; height: auto; }
.logo::after { content: ""; position: absolute; inset: auto 0 4px; height: 1.5px; background: var(--tally); clip-path: inset(0 100% 0 0); transition: clip-path 0.45s var(--out); }
.logo:focus-visible::after { clip-path: inset(0); }
@media (hover: hover) { .logo:hover::after { clip-path: inset(0); } }
.bar-nav { display: flex; gap: 28px; margin-left: auto; font-size: 15px; color: var(--muted); }
.bar-nav a:hover, .bar-nav a:focus-visible { color: var(--ink); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line-2); cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; top: 48px; display: grid; min-width: 220px; padding: 8px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; transform-origin: top right; }
.menu-panel a { padding: 10px 12px; border-radius: 8px; font-size: 16px; }
.menu-panel a:hover { background: var(--clip); }
.menu[open] .menu-panel { animation: drop 0.24s var(--out); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }

/* Hero: a sticky stage; the timeline plays as you scroll through it */
.hero { position: relative; height: 240svh; }
.hero-stage { position: sticky; top: 0; height: 100svh; min-height: 640px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: calc(var(--bar) + 72px) var(--margin) 48px; overflow: clip; }
.hero-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.hero-top h1 { grid-area: 1 / 1 / 2 / -1; }
.hero-side { grid-area: 1 / 9 / 2 / -1; align-self: end; display: grid; gap: 28px; justify-items: start; padding-bottom: 0.4vw; }
.lede { font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 22rem; }

.timeline { --name: 136px; position: relative; padding-top: 28px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ruler, .tracks li { display: grid; grid-template-columns: var(--name) minmax(0, 1fr); gap: 16px; }
.ruler { height: 28px; border-bottom: 1px solid var(--line); }
.ruler-hours { position: relative; }
.ruler-hours i { position: absolute; bottom: 8px; left: calc(var(--h) / 720 * 100%); translate: -50% 0; font-style: normal; font-size: 12px; color: var(--muted); }
.ruler-hours i:first-child { translate: 0 0; }
.ruler-hours i:last-child { translate: -100% 0; }
.ruler-hours .narrow { display: none; }
.ruler-hours::before { content: ""; position: absolute; inset: auto 0 -1px; height: 6px; background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px calc(100% / 12)); }
.tracks li { height: clamp(56px, 8.5svh, 76px); align-items: center; border-bottom: 1px solid var(--line); }
.track-name { font-size: 12px; color: var(--muted); }
.lane { position: relative; height: clamp(40px, 6svh, 52px); }
.clip {
  --l: clamp(0, (var(--p) * 720 - var(--s)) / var(--d), 1);
  position: absolute; inset-block: 0; left: calc(var(--s) / 720 * 100%); width: calc(var(--d) / 720 * 100%);
  border-radius: 4px; outline: 1px dashed var(--line-2); outline-offset: -1px; font-family: var(--sans);
}
.clip-manual {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 12px;
  background: var(--clip); border-radius: 4px; font-size: 13px; white-space: nowrap; overflow: hidden;
  clip-path: inset(0 0 0 calc(var(--l) * 100%));
}
.clip-manual b { overflow: hidden; text-overflow: ellipsis; }
.clip-manual em { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.clip-auto { position: absolute; left: 0; right: 0; bottom: 5px; height: 3px; border-radius: 2px; background: var(--tally); clip-path: inset(0 calc((1 - var(--l)) * 100%) 0 0); }
.clip-freed { position: absolute; left: 12px; right: 12px; top: 50%; translate: 0 calc(-50% - 2px); font-size: 15px; font-weight: 500; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: clamp(0, (var(--l) - 0.55) * 3, 1); }
.short { display: none; }
.playhead { position: absolute; top: 0; bottom: 44px; left: calc(var(--name) + 16px); right: 0; container-type: inline-size; pointer-events: none; }
.playhead-line { position: absolute; top: 0; bottom: 0; left: 0; width: 1.5px; background: var(--tally); translate: calc(var(--p) * 100cqw) 0; }
.playhead-line b { position: absolute; top: 0; left: 6px; translate: calc(var(--p) * (-100% - 12px)) 0; padding: 1px 6px; border-radius: 3px; background: var(--tally); color: #170c07; font-family: var(--mono); font-size: 11px; line-height: 16px; }
.playhead-line::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 5px; background: var(--tally); }
.timeline figcaption { display: flex; justify-content: space-between; gap: 24px; padding-top: 16px; font-size: 12px; line-height: 16px; color: var(--muted); }
.hint { color: var(--ink); }

/* Statement */
.statement { padding: 200px var(--margin) 200px; }
.statement-text { text-wrap: balance; max-width: 20ch; font-size: clamp(32px, 4.2vw, 64px); line-height: 1.08; font-weight: 500; letter-spacing: -0.035em; }
.statement-text .w { color: var(--muted); }
.js .statement-text .w { opacity: 0.32; color: var(--ink); }
.marked { position: relative; display: inline-block; white-space: nowrap; }
.marked svg { position: absolute; left: -7%; top: -24%; width: 114%; height: 152%; overflow: visible; pointer-events: none; }
.marked path { fill: none; stroke: var(--tally); stroke-width: 1.3; stroke-linecap: round; }
.js .marked path { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* Problems: an index of large rows */
.problems { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 96px var(--margin) 200px; }
.problems .kicker { grid-column: 1 / 4; }
.problems-lede { grid-column: 4 / 10; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.problem-rows { grid-column: 1 / -1; margin-top: 80px; border-top: 1px solid var(--line); }
.problem-rows li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; padding-block: 44px; border-bottom: 1px solid var(--line); }
.row-title { grid-column: 1 / 8; font-size: clamp(36px, 4.6vw, 72px); line-height: 1; font-weight: 500; letter-spacing: -0.045em; }
.problem-rows p { grid-column: 9 / -1; max-width: 24rem; color: var(--muted); padding-bottom: 6px; }

/* The cut: one scroll driver sets three phases. --a assembles the edit (clips drop onto a tilting plane),
   --p sweeps the blade (grey clips trim to a line of light, kept work lifts and lights), --z resolves
   (the camera settles, the lines join into one running thread). Without the script it holds one frame mid-cut. */
.cut { --a: 1; --p: 0.62; --z: 0; --f: 0; --x: calc(var(--p) * 108 - 4); position: relative; }
.cut.is-live { height: 360svh; }
.cut-stage {
  position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: clip; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-content: start;
  padding: calc(var(--bar) + 56px) var(--margin) 0;
}
/* The floor light: warm under the deck, faded to the page black at the bottom so the next section starts without an edge. */
.cut-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 50% at 50% 78%, rgb(245 106 66 / calc((var(--p) * 0.5 + var(--z) * 0.5) * 0.16)), transparent 70%), radial-gradient(120% 65% at 50% 82%, #1b1714, var(--ground) 62%);
  mask-image: linear-gradient(#000 58%, transparent 100%);
}
.cut h2 { position: relative; z-index: 1; grid-column: 1 / 9; font-size: clamp(36px, 4.4vw, 68px); line-height: 1; text-wrap: balance; }
.cut h2 > span { display: block; }
.cut-keep { color: var(--craft); --k: clamp(0, (var(--p) - 0.42) * 6, 1); opacity: var(--k); translate: 0 calc((1 - var(--k)) * 0.3em); filter: blur(calc((1 - var(--k)) * 6px)); }

.cut-view { position: absolute; inset: auto 0 0; height: 70%; perspective: 1200px; perspective-origin: 50% -20%; mask-image: linear-gradient(transparent, #000 20%, #000 78%, transparent); }
.deck {
  position: absolute; inset: 14% -5% 2%; display: grid; align-content: center; gap: 22px; container-type: inline-size; transform-style: preserve-3d; transform-origin: 50% 70%;
  transform:
    translateY(calc((1 - var(--a)) * 10%))
    rotateX(calc(64deg - var(--a) * 18deg - var(--p) * 4deg - var(--z) * 14deg))
    rotateZ(calc(-7deg + var(--a) * 4deg + var(--z) * 3deg))
    scale(calc(1.3 - var(--a) * 0.2 - var(--z) * 0.06));
}
.rows { display: grid; gap: 14px; transform-style: preserve-3d; }
.rows li { position: relative; height: clamp(34px, 5.2svh, 54px); transform-style: preserve-3d; }

/* A clip. Grey is repeat work; .k is work that needs a person. */
.rows i {
  --k: clamp(0, (var(--a) * 1.8 - var(--r) * 0.1 - var(--s) * 0.006) / 0.5, 1);
  --l: clamp(0, (var(--x) - var(--s)) / var(--d), 1);
  --hot: clamp(0, min(var(--l) * 14, (1 - var(--l)) * 14), 1);
  position: absolute; inset-block: 0; left: calc(var(--s) * 1%); width: calc(var(--d) * 1% - 8px); transform-style: preserve-3d;
  opacity: var(--k); transform: translateZ(calc((1 - var(--k)) * 160px));
}
.rows i::before {
  content: ""; position: absolute; inset: 0; border-radius: 6px;
  background:
    linear-gradient(90deg, transparent calc(var(--l) * 100% - 1px), rgb(255 190 160 / calc(var(--hot) * 0.95)) calc(var(--l) * 100%), rgb(245 106 66 / calc(var(--hot) * 0.5)) calc(var(--l) * 100% + 3px), transparent calc(var(--l) * 100% + 22px)),
    linear-gradient(#3d3833, #27231f 55%, #1d1a17);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.1), inset 0 0 0 1px rgb(239 233 222 / 0.04);
  clip-path: inset(-20px 0 -20px calc(var(--l) * 100%) round 6px);
}
.rows i::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #ffb08f, var(--tally) 30%);
  box-shadow: 0 0 14px rgb(245 106 66 / 0.65), 0 0 2px #ffd6c4; clip-path: inset(-20px calc((1 - var(--l)) * 100%) -20px 0);
}
.rows b {
  position: absolute; inset: 0; display: flex; align-items: center; padding-inline: 12px; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: #b7afa3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; clip-path: inset(0 0 0 calc(var(--l) * 100%)); opacity: calc(1 - var(--l) * 0.6);
}
/* Kept work: it lifts off the plane and lights up as the blade passes. */
.rows .k::before {
  background: linear-gradient(#eee7db, #bdb5a8); opacity: calc(0.16 + var(--l) * 0.8); clip-path: none;
  transform: translateZ(calc(var(--l) * 22px)); box-shadow: 0 0 calc(var(--l) * 40px) rgb(107 146 255 / 0.35), 0 calc(var(--l) * 2px) 0 rgb(107 146 255 / calc(var(--l) * 0.9)), inset 0 1px #fff;
}
.rows .k::after { left: 6%; right: 6%; bottom: -10px; height: 18px; border-radius: 50%; background: rgb(107 146 255 / 0.55); box-shadow: none; filter: blur(8px); opacity: calc(var(--l) * 0.7); clip-path: none; }
.rows .k b { color: #2a2420; clip-path: none; opacity: calc(0.25 + var(--l) * 0.75); transform: translateZ(calc(var(--l) * 22px + 1px)); }

/* After the sweep the lines join into one thread that runs under the kept work. */
.thread { position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; background: var(--tally); opacity: 0.55; box-shadow: 0 0 10px rgb(245 106 66 / 0.5); clip-path: inset(0 calc((1 - var(--z)) * 100%) 0 0); }
.flare {
  position: absolute; left: 0; bottom: -18px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; translate: calc(var(--x) * 1cqw) 0;
  background: radial-gradient(circle, #fff 0 8%, rgb(255 180 140 / 0.9) 18%, rgb(245 106 66 / 0.35) 45%, transparent 70%);
  opacity: var(--f); transition: opacity 0.18s var(--out); transform: translateZ(2px);
}
.flare::before, .flare::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 2px; background: #ffd2bd; box-shadow: 0 0 6px var(--tally); }
.flare::before { translate: calc(-6px - (sin(var(--x) * 41deg) + 1) * 12px) calc(-4px - (cos(var(--x) * 29deg) + 1) * 9px); }
.flare::after { translate: calc(-4px - (cos(var(--x) * 53deg) + 1) * 16px) calc((sin(var(--x) * 37deg)) * 10px); }

.plane-ruler { position: relative; height: 24px; margin-top: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); border-top: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.plane-ruler span { position: absolute; top: 8px; left: calc(var(--h) / 720 * 100%); translate: -50% 0; }
.plane-ruler span:first-child { translate: 0 0; } .plane-ruler span:last-child { translate: -100% 0; }
.auto-tag { position: absolute; left: 9%; top: -8px; font-family: var(--mono); font-size: 12px; color: var(--tally); opacity: var(--z); translate: calc((1 - var(--z)) * -16px) 0; }

/* The blade: a line of light on the plane with a glowing edge that stands up from it. */
.blade { position: absolute; inset: 0 auto 30px 0; width: 3px; margin-left: -1.5px; border-radius: 2px; transform-style: preserve-3d; translate: calc(var(--x) * 1cqw) 0;
  background: linear-gradient(#ffd2bd, var(--tally)); box-shadow: 0 0 18px 2px rgb(245 106 66 / 0.85), 0 0 70px 6px rgb(245 106 66 / 0.3); opacity: calc(1 - var(--z)); }
.blade::before { content: ""; position: absolute; inset: 0 100% 0 auto; width: 16cqw; background: linear-gradient(90deg, transparent, rgb(245 106 66 / 0.08)); }
.blade-wall { position: absolute; left: 0; top: 0; bottom: 0; width: 120px; transform-origin: 0 50%; transform: rotateY(-90deg); background: linear-gradient(90deg, rgb(245 106 66 / 0.55), rgb(245 106 66 / 0.12) 40%, transparent); }
.blade-time { position: absolute; top: -34px; left: 50%; translate: -50% 0; padding: 2px 7px; border-radius: 4px; background: var(--tally); color: #170c07; font-family: var(--mono); font-size: 12px; line-height: 18px; transform: rotateX(-40deg); transform-origin: 50% 100%; }

/* What we make: four capability cards. Each art plays its own small demo of the skill, scrubbed by --q as the card scrolls in. */
.caps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 200px var(--margin) 80px; }
.caps-head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 32px; margin-bottom: 56px; }
.caps-head .kicker { grid-column: 1 / -1; }
.caps-head .display-2 { grid-column: 1 / 8; }
.caps-lede { grid-column: 9 / -1; align-self: end; max-width: 26rem; color: var(--muted); font-size: 18px; }
.cap-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.cap { --q: 1; display: grid; align-content: start; gap: 12px; padding: 10px 10px 32px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
.cap-auto, .cap-motion { grid-column: span 7; }
/* Orange is automation; the design cards wear the craft blue. */
.cap-ux, .cap-web, .cap-motion { --tally: var(--craft); }
.cap-ux, .cap-web { grid-column: span 5; }
.cap h3 { margin-top: 20px; padding-inline: 22px; font-size: 26px; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }
.cap p { padding-inline: 22px; color: var(--muted); max-width: 34rem; }
.cap .tags { margin-top: 8px; font-family: var(--mono); font-size: 12px; line-height: 18px; color: var(--ink); opacity: 0.7; }
.caps-note { grid-column: 1 / -1; margin-top: 16px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.cap-art { position: relative; height: 280px; overflow: clip; border-radius: 12px; background: var(--ground); border: 1px solid var(--line); display: grid; place-items: center; }
/* each step of a demo reads its own slice of --q */
.cap-art [style*="--o"] { --e: clamp(0, (var(--q) * 1.6 - var(--o) * 0.14) / 0.5, 1); }

/* AI automation: an inquiry travels the chain and the assistant logs each step */
.chain { display: flex; align-items: center; width: min(86%, 560px); margin-top: -60px; }
.chain .node { position: relative; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel); font-size: 14px; white-space: nowrap; transition: border-color 0.3s, color 0.3s; }
.chain .n2 { border-color: rgb(245 106 66 / calc(0.25 + clamp(0, (var(--q) - 0.35) * 4, 1) * 0.75)); box-shadow: 0 0 calc(clamp(0, (var(--q) - 0.35) * 4, 1) * 28px) rgb(245 106 66 / 0.25); }
.chain .n3 { border-color: rgb(245 106 66 / calc(0.25 + clamp(0, (var(--q) - 0.8) * 5, 1) * 0.75)); }
.wire2 { position: relative; flex: 1; height: 1px; margin-inline: 8px; background: var(--line-2); }
.wire2 i { position: absolute; inset: -1px auto -1px 0; width: 100%; background: var(--tally); clip-path: inset(0 calc((1 - var(--w)) * 100%) 0 0); }
.wire2 i::after { content: ""; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ffd2bd; box-shadow: 0 0 12px var(--tally); clip-path: none; }
.wire2:nth-of-type(2) i { --w: clamp(0, var(--q) * 2.4, 1); }
.wire2:nth-of-type(4) i { --w: clamp(0, var(--q) * 2.4 - 1.2, 1); }
.log { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; display: grid; grid-template-columns: repeat(2, auto); gap: 8px 28px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.log li { display: flex; align-items: center; gap: 8px; opacity: var(--e); translate: 0 calc((1 - var(--e)) * 8px); }
.log li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tally); }

/* Product & UX: a wireframe fills in to a finished screen */
.ui { position: relative; width: 240px; height: 230px; padding: 18px; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: 18px 12px 1fr 36px; gap: 10px 12px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-2); }
.ui-el { position: relative; border-radius: 4px; outline: 1px dashed rgb(239 233 222 / calc(0.3 - var(--e) * 0.3)); outline-offset: 2px; }
.ui-el::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--fill, var(--clip)); clip-path: inset(0 calc((1 - var(--e)) * 100%) 0 0 round 4px); }
.ui-avatar { grid-row: 1 / 3; border-radius: 50%; --fill: linear-gradient(135deg, color-mix(in srgb, var(--tally) 55%, #fff), var(--tally)); }
.ui-title { --fill: #e9e2d6; width: 70%; }
.ui-line { --fill: #4a443e; width: 90%; }
.ui-chart { grid-column: 1 / -1; display: flex; align-items: end; gap: 8px; padding: 8px; outline-color: rgb(239 233 222 / calc(0.3 - var(--e) * 0.3)); }
.ui-chart::before { background: rgb(239 233 222 / 0.04); }
.ui-chart i { position: relative; flex: 1; height: calc(var(--v) * var(--e) * 100%); border-radius: 3px 3px 1px 1px; background: #5d564e; }
.ui-chart i:nth-child(4) { background: var(--tally); }
.ui-btn { grid-column: 1 / -1; display: grid; place-items: center; font-size: 13px; font-weight: 500; --fill: var(--tally); isolation: isolate; }
.ui-btn::before { z-index: -1; }
.ui-btn { color: rgb(6 16 42 / var(--e)); }

/* Websites: a page snaps onto its grid */
.browser { width: min(84%, 300px); height: 220px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-2); overflow: clip; }
.dots { display: block; height: 26px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 14px 13px, #4a443e 3px, transparent 3.5px), radial-gradient(circle at 26px 13px, #4a443e 3px, transparent 3.5px), radial-gradient(circle at 38px 13px, #4a443e 3px, transparent 3.5px); }
.page { position: relative; height: calc(100% - 26px); padding: 18px; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 22px 10px 22px 1fr; gap: 8px; }
.cols { position: absolute; inset: 18px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--tally) 9%, transparent) 0 calc((100% - 40px) / 6), transparent 0 calc((100% - 40px) / 6 + 8px)); opacity: calc(1 - clamp(0, (var(--q) - 0.75) * 4, 1) * 0.8); }
.blk { position: relative; border-radius: 4px; opacity: var(--e); translate: calc((1 - var(--e)) * 40px) calc((1 - var(--e)) * -12px); }
.b-head { grid-column: 1 / 5; background: #e9e2d6; }
.b-sub { grid-column: 1 / 4; background: #4a443e; }
.b-cta { grid-column: 1 / 3; background: var(--tally); }
.b-img { grid-column: 1 / -1; background: linear-gradient(120deg, #2b2723, #3b342e); }

/* Motion: the curve this site moves on, drawn and run */
.curve { width: 62%; max-width: 300px; overflow: visible; margin-left: -18%; }
.axis-l { fill: none; stroke: var(--line-2); }
.ease-ghost { fill: none; stroke: var(--line-2); stroke-dasharray: 3 4; }
.ease { fill: none; stroke: var(--tally); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--q)); }
.ease-dot { fill: color-mix(in srgb, var(--tally) 30%, #fff); filter: drop-shadow(0 0 6px var(--tally)); }
.slide { position: absolute; right: 9%; top: 50%; width: 18px; height: 150px; translate: 0 -55%; border-left: 1px dashed var(--line-2); }
.slide-box { position: absolute; left: -12px; top: 0; width: 24px; height: 24px; border-radius: 6px; background: var(--tally); translate: 0 calc((1 - var(--y, 1)) * 126px); box-shadow: 0 0 20px color-mix(in srgb, var(--tally) 40%, transparent); }
.curve-name { position: absolute; left: 22px; bottom: 18px; }

/* The thread stage (script only): one pinned frame, copy on the left, the line of light on the right. */
.caps.is-live .cap-grid { display: none; }
.tstage { grid-column: 1 / -1; height: 420svh; }
.tstage-in { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding-top: var(--bar); }
.tcopy { grid-column: 1 / 5; display: grid; }
.tcopy li { grid-area: 1 / 1; display: grid; align-content: start; gap: 14px; }
.tcopy h3 { font-size: clamp(32px, 3.4vw, 52px); line-height: 1.02; font-weight: 500; letter-spacing: -0.035em; }
.tcopy p:not(.mono) { color: var(--muted); max-width: 26rem; }
.tcopy .tags { font-family: var(--mono); font-size: 12px; line-height: 18px; color: var(--ink); opacity: 0.7; }
.tart { --thread: var(--tally); position: relative; grid-column: 6 / -1; aspect-ratio: 3 / 2; }
.tart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tline, .tglow { fill: none; stroke: var(--thread); stroke-linecap: round; stroke-linejoin: round; }
.tline { stroke-width: 2.2; stroke-dasharray: 1; }
.tglow { stroke-width: 6; opacity: 0.55; }
.tspark { fill: #fff; filter: drop-shadow(0 0 6px var(--thread)) drop-shadow(0 0 14px var(--thread)); }
.tlab { position: absolute; left: calc(var(--x) / 600 * 100%); top: calc(var(--y) / 400 * 100%); translate: -50% -50%; font-size: clamp(11px, 1vw, 14px); white-space: nowrap; opacity: 0; color: var(--ink); }
.tlab-hero { font-weight: 500; }
.tlab-mono { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.tlab-fill { padding: 2px 8px; border-radius: 4px; color: var(--ground); background: var(--thread); font-size: clamp(10px, 0.9vw, 13px); font-weight: 500; }
.trail { position: absolute; left: 0; bottom: 40px; display: flex; gap: 28px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.trail li { display: flex; align-items: center; gap: 8px; transition: color 0.3s; }
.trail li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: background-color 0.3s, scale 0.3s var(--out); }
.trail li.is-on { color: var(--ink); }
.trail li.is-on::before { background: var(--tally); scale: 1.4; }
.trail li:nth-child(n+2).is-on::before { background: var(--craft); }

/* Process: pinned title, scrolling steps */
.process { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 200px var(--margin) 200px; }
.process-head { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--bar) + 48px); display: grid; gap: 24px; }
.process-head p { max-width: 24rem; color: var(--muted); }
.steps { grid-column: 7 / -1; display: grid; gap: 32px; }
.step { display: grid; gap: 24px; padding: 8px 8px 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.step-copy { display: grid; gap: 8px; padding-inline: 20px; }
.step h3 { font-size: 26px; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }
.step-copy p:last-child { color: var(--muted); }
.step-art { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 200px; padding: 24px; border-radius: 8px; background: var(--ground); border: 1px solid var(--line); }
.checklist p { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--muted); }
.checklist .icon { width: 20px; height: 20px; padding: 3px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--tally); }
.checklist p:nth-child(2) { --n: 1; } .checklist p:nth-child(3) { --n: 2; } .checklist p:nth-child(4) { --n: 3; }
.js .checklist .icon path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.3s var(--out) calc(0.3s + var(--n, 0) * 0.14s); }
.js .is-in .checklist .icon path { stroke-dashoffset: 0; }
.flow { flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center; gap: 0; }
.node { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--panel); font-size: 14px; white-space: nowrap; }
.node-accent { border-color: var(--tally); }
.wire { flex: 1; min-width: 16px; height: 2px; overflow: visible; }
.wire path { fill: none; stroke: var(--tally); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.js .wire path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.5s var(--in-out) 0.3s; }
.js .wire ~ .wire path { transition-delay: 0.7s; }
.js .is-in .wire path { stroke-dashoffset: 0; }
.flow-tools { flex-basis: 100%; margin-top: 20px; text-align: center; }
.upkeep p { display: flex; align-items: center; gap: 12px; height: 40px; font-size: 15px; color: var(--muted); border-bottom: 1px solid var(--line); }
.upkeep p:last-child { border: 0; }
.upkeep .mono { margin-left: auto; }
.dot { width: 8px; height: 8px; border-radius: 4px; background: var(--tally); }
.dot-quiet { background: var(--muted); }

/* Scenes: letterboxed frames that open like a cut */
.scenes { padding: 40px 0 120px; }
.scenes .kicker { padding-inline: var(--margin); margin-bottom: 40px; }
.scene { display: grid; padding: 16px var(--margin); }
.scene-frame {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-content: start; row-gap: 16px;
  padding: clamp(28px, 4vw, 64px) clamp(24px, 4.4vw, 72px) clamp(32px, 4.4vw, 72px); border-radius: 20px; background: var(--panel); border: 1px solid var(--line);
}
.js .scene-frame { clip-path: inset(var(--slit, 0%) 0 var(--slit, 0%) 0 round 20px); }
.slate { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; margin-bottom: 32px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.scene-figure { grid-column: 1 / 7; grid-row: 2; display: flex; align-items: baseline; gap: 0.12em; font-size: clamp(80px, 11vw, 176px); line-height: 0.84; font-weight: 500; letter-spacing: -0.055em; color: var(--tally); font-variant-numeric: tabular-nums; margin-left: -0.05em; }
.scene-figure small { font-size: 0.24em; letter-spacing: -0.02em; color: var(--ink); }
.scene-figure-text { font-size: clamp(64px, 8.4vw, 132px); }
.cut-arrow { font-size: 0.6em; color: var(--muted); }
.scene-unit { grid-column: 1 / 7; grid-row: 3; font-family: var(--mono); font-size: 13px; color: var(--muted); margin-bottom: 56px; }
.timeline-mini { --name: 96px; grid-column: 7 / -1; grid-row: 2 / 4; align-self: end; margin-bottom: 48px; }
.timeline-mini .tracks li { height: 64px; border-bottom: 0; }
.timeline-mini .short { display: inline; }
.scene h3 { grid-column: 1 / 6; font-size: clamp(24px, 2.3vw, 34px); text-wrap: balance; line-height: 1.1; font-weight: 500; letter-spacing: -0.025em; }
.logline { grid-column: 7 / 12; color: var(--muted); }
.more { grid-column: 7 / 12; justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-weight: 500; }
.more span { padding: 2px 4px; margin: -2px -4px; border-radius: 3px; background: linear-gradient(var(--tally) 0 0) left bottom / 100% 1.5px no-repeat, linear-gradient(rgb(245 106 66 / 0.3) 0 0) left / 0% 100% no-repeat; transition: background-size 0.45s var(--out); }
.more .icon { color: var(--tally); transition: translate 0.35s var(--out); }
@media (hover: hover) { .more:hover .icon { translate: 6px 0; } .more:hover span { background-size: 100% 1.5px, 100% 100%; } }
.more:focus-visible .icon { translate: 6px 0; }
.more:focus-visible span { background-size: 100% 1.5px, 100% 100%; }

/* FAQ */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 160px var(--margin) 200px; }
.faq h2 { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--bar) + 48px); }
.faq-list { grid-column: 6 / -1; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 76px; padding-block: 22px; font-size: 18px; line-height: 1.35; cursor: pointer; list-style: none; transition: translate 0.4s var(--out); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--muted); transition: rotate 0.35s var(--out), color 0.3s; }
.faq details[open] summary .icon { rotate: 45deg; color: var(--tally); }
.faq details p { max-width: 40rem; padding-bottom: 28px; color: var(--muted); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.4s var(--out), content-visibility 0.4s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
@media (hover: hover) { .faq summary:hover { translate: 6px 0; } .faq summary:hover .icon { color: var(--ink); } }

/* End card and credits */
.endcard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; min-height: 80svh; padding: 160px var(--margin) 120px; }
.endcard h2 { grid-column: 1 / 9; }
.endcard-side { grid-column: 9 / -1; display: grid; gap: 24px; justify-items: start; padding-bottom: 12px; }
.endcard-side p { color: var(--muted); font-size: 18px; max-width: 26rem; }
.credits { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding: 32px var(--margin) 40px; border-top: 1px solid var(--line); }
.credits-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; color: var(--muted); }
.credits-nav a { padding-block: 6px; }
.credits-nav a:hover, .credits-nav a:focus-visible { color: var(--ink); }

/* Case pages */
.case-hero { padding: calc(var(--bar) + 120px) var(--margin) 120px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; align-items: end; }
.case-hero .slate { margin: 0; }
.case-hero h1 { grid-column: 1 / 8; max-width: 14ch; }
.case-hero .case-figures { grid-column: 8 / -1; padding: 0; }
.case-figures { display: flex; flex-wrap: wrap; gap: 24px 48px; margin: 0; }
.case-figures div { display: grid; gap: 8px; min-width: 200px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.case-figures dt { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.case-figures dd { margin: 0; font-size: clamp(44px, 4.8vw, 76px); line-height: 0.9; font-weight: 500; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.case-figures div:first-child dd { color: var(--tally); }
.case-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px 24px; padding: 120px var(--margin) 160px; border-top: 1px solid var(--line); }
.case-body h2 { grid-column: 1 / 4; }
.case-body p { grid-column: 5 / 12; max-width: 38rem; font-size: 20px; line-height: 1.55; }
.next { display: grid; gap: 16px; padding: 140px var(--margin) 160px; border-top: 1px solid var(--line); }
.next a { justify-self: start; display: inline-flex; align-items: baseline; gap: 0.2em; max-width: 18ch; }
.next a > span { padding-bottom: 0.12em; background: linear-gradient(var(--tally) 0 0) left bottom / 0% 3px no-repeat; transition: background-size 0.6s var(--out); }
.next .icon { width: 0.6em; height: 0.6em; flex: none; align-self: center; color: var(--tally); transition: translate 0.4s var(--out); }
@media (hover: hover) { .next a:hover > span { background-size: 100% 3px; } .next a:hover .icon { translate: 0.15em 0; } }
.next a:focus-visible > span { background-size: 100% 3px; }
.lost { min-height: 100svh; display: grid; align-content: center; gap: 32px; padding: var(--bar) var(--margin) 64px; }
.lost .btn { justify-self: start; }
.lost p:not(.slate) { color: var(--muted); max-width: 28rem; font-size: 19px; }

/* Result charts: emphasis form. Grey is before, orange is with J3C; the after bar is cut from the before length. */
.result { display: grid; gap: 40px; padding: 120px var(--margin) 140px; border-top: 1px solid var(--line); }
.chart { --before: #6b645b; display: grid; gap: 24px; max-width: 980px; }
.chart figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.chart-title { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.02em; }
.chart-unit, .chart-note { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.chart-legend { display: flex; gap: 20px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.key { display: inline-flex; align-items: center; gap: 8px; }
.key::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--before); }
.key-after::before { background: var(--tally); }
.bars { display: grid; gap: 28px; }
.bar-row, .axis { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; gap: 20px; align-items: center; }
.bar-label { font-size: 15px; color: var(--muted); }
.bar-track { display: grid; gap: 2px; }
.bar-hit { position: relative; display: block; padding-block: 3px; outline-offset: 1px; cursor: default; }
.cbar { display: block; height: 16px; border-radius: 4px; background: var(--before); clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0 round 4px); }
.cbar-after { background: var(--tally); }
.bar-value { font-family: var(--mono); font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.bar-value b { color: var(--ink); font-weight: 500; }
.bar-value i { font-style: normal; color: var(--tally); }
.axis { margin-top: -12px; }
.axis-ticks { position: relative; height: 24px; border-top: 1px solid var(--line-2); }
.axis-ticks i { white-space: nowrap; position: absolute; top: 6px; left: calc(var(--t) * 100%); translate: -50% 0; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.axis-ticks i:first-child { translate: 0 0; } .axis-ticks i:last-child { translate: -100% 0; }
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 2; padding: 6px 10px; border-radius: 6px;
  background: var(--ink); color: var(--ground); font-family: var(--mono); font-size: 12px; white-space: nowrap; pointer-events: none;
  opacity: 0; translate: 0 4px; transition: opacity 0.16s ease, translate 0.2s var(--out);
}
[data-tip]:focus-visible::after { opacity: 1; translate: none; }
@media (hover: hover) { [data-tip]:hover::after { opacity: 1; translate: none; } .bar-hit:hover .cbar { filter: brightness(1.15); } }
.year { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, 12px); grid-auto-columns: 12px; gap: 3px; justify-content: start; padding-top: 4px; width: max-content; outline-offset: 6px; }
.year i { border-radius: 2px; background: var(--tally); }
.year-total { font-size: clamp(40px, 5vw, 72px); line-height: 1; font-weight: 500; letter-spacing: -0.04em; }
.year-total b { color: var(--tally); font-weight: 500; }
.js .chart .cbar { clip-path: inset(0 100% 0 0 round 4px); }
.js .chart.is-cut .cbar-before { clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0 round 4px); transition: clip-path 0.9s var(--out); }
.js .chart.is-cut .cbar-after { clip-path: inset(0 calc((1 - var(--from)) * 100%) 0 0 round 4px); transition: clip-path 0.9s var(--out) 0.12s; }
.js .chart.is-in .cbar-after { clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0 round 4px); transition: clip-path 0.9s var(--in-out); }
.js .chart .year i { background: var(--line-2); transition: background-color 0.3s ease calc(var(--i) * 4ms); }
.js .chart.is-in .year i { background: var(--tally); }

/* Case page: the team's own lane, and a call to action */
.day-after { display: grid; gap: 40px; padding: 120px var(--margin) 140px; border-top: 1px solid var(--line); }
.timeline-solo .tracks li { height: 96px; }
.timeline-solo .lane { height: 56px; }
.case-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; margin: 0 var(--margin) 140px; padding: clamp(28px, 3.6vw, 56px); border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.case-cta p { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }

/* Entrances (only with the script; without it everything is visible) */
.js [data-reveal] { opacity: 0; translate: 0 24px; transition: opacity 0.9s var(--out), translate 0.9s var(--out); }
.js [data-reveal].is-in { opacity: 1; translate: none; }
.js [data-lines] .line > span { translate: 0 135%; transition: translate 1.1s var(--out); transition-delay: calc(var(--i, 0) * 0.08s); }
.js [data-lines].is-in .line > span { translate: none; }
.js [data-lines] .line:nth-child(2) { --i: 1; }
.js [data-lines] .line:nth-child(3) { --i: 2; }
/* The first screen assembles in CSS from the first paint, without waiting on scripts. */
.js :is(.hero, .case-hero, .lost) [data-lines] .line > span { translate: none; transition: none; animation: line-in 1.1s var(--out) both calc(0.05s + var(--i, 0) * 0.08s); }
.js [data-intro] { animation: rise 0.8s var(--out) both 0.25s; }
.js .timeline { animation: wipe 1.2s var(--in-out) both 0.2s; }
@keyframes line-in { from { translate: 0 135%; } }
@keyframes rise { from { opacity: 0.01; translate: 0 16px; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -20px 0 0); } }

/* Page transition: the letterbox closes, the next page opens from the slit */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.7s var(--in-out) both dim; }
::view-transition-new(root) { animation: 0.7s var(--in-out) both wipe-in; }
@keyframes dim { to { opacity: 0.4; } }
::view-transition-group(*) { animation-duration: 0.7s; animation-timing-function: var(--in-out); }
::view-transition-old(bar) { display: none; }
::view-transition-new(bar) { animation: none; }
@keyframes wipe-in { from { clip-path: inset(0 0 0 100%); } }

/* Tablet and phone */
@media (max-width: 1024px) {
  .bar-nav { display: none; }
  .bar .btn-sm { margin-left: auto; }
  .hero-top h1, .hero-side { grid-area: auto; grid-column: 1 / -1; padding-top: 0; }
  .process-head, .faq h2 { position: static; }
  .process-head, .steps, .faq h2, .faq-list, .problems .kicker, .problems-lede { grid-column: 1 / -1; }
  .scene h3, .logline, .more, .scene-figure, .scene-unit, .timeline-mini { grid-column: 1 / -1; grid-row: auto; }
  .timeline-mini { margin-bottom: 8px; }
  .case-hero h1, .case-hero .case-figures { grid-column: 1 / -1; }
  .endcard h2, .endcard-side { grid-column: 1 / -1; }
  .cut h2 { grid-column: 1 / -1; }
  .caps-head .display-2, .caps-lede { grid-column: 1 / -1; }
  .cap-auto, .cap-motion, .cap-ux, .cap-web { grid-column: 1 / -1; }
  .tstage-in { align-content: center; row-gap: 28px; }
  .tcopy, .tart { grid-column: 1 / -1; }
  .tcopy { min-height: 15.5rem; align-content: end; }
}
@media (max-width: 640px) {
  .cut.is-live { height: 300svh; }
  .cut-stage { padding-top: calc(var(--bar) + 32px); min-height: 0; }
  .cut-view { height: 64%; }
  .deck { inset-inline: -45%; }
  .rows { gap: 10px; }
  .rows b { font-size: 11px; padding-inline: 8px; }
  .auto-tag { left: 30%; }
  :root { --margin: 20px; --bar: 60px; --display: clamp(44px, 12.4vw, 64px); --display-2: clamp(40px, 12vw, 56px); }
  body { font-size: 16px; }
  .bar { gap: 12px; }
  .bar .btn-sm { display: none; }
  .menu { display: block; margin-left: auto; }
  .hero { height: 200svh; }
  .hero-stage { padding-top: calc(var(--bar) + 24px); padding-bottom: 20px; gap: 24px; min-height: 0; }
  .hero-side { gap: 20px; }
  .lede { font-size: 17px; }
  .timeline { --name: 0px; }
  .track-name { padding-left: 20px; }
  .ruler-hours, .lane { margin-left: 16px; }
  .playhead { left: 16px; }
  .statement-text { font-size: 30px; }
  .ruler, .tracks li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ruler > span:first-child { display: none; }
  .ruler-hours .wide { display: none; }
  .ruler-hours .narrow { display: block; }
  .tracks li { height: auto; padding-block: 8px; }
  .lane { height: 32px; }
  .clip-manual { padding-inline: 8px; font-size: 12px; }
  .clip-manual em { display: none; }
  .clip-freed { left: 6px; right: 4px; font-size: 12px; }
  .long { display: none; } .short { display: inline; }
  .playhead { left: 0; bottom: 64px; }
  .timeline figcaption { flex-direction: column; gap: 4px; }
  .statement { padding-block: 112px; }
  .problems, .process, .faq { gap: 16px; padding-block: 96px 112px; }
  .caps { padding-block: 112px 48px; gap: 16px; }
  .caps-head { margin-bottom: 24px; row-gap: 20px; }
  .cap-grid { gap: 16px; }
  .cap-art { height: 240px; }
  .cap h3, .cap p { padding-inline: 12px; }
  .chain .node { padding: 8px 10px; font-size: 12px; }
  .log { grid-template-columns: auto; width: max-content; }
  .tstage { height: 380svh; }
  .tcopy h3 { font-size: 32px; }
  .trail { bottom: 20px; gap: 12px; font-size: 10px; white-space: nowrap; }
  .tlab-mono { font-size: 9px; }
  .problem-rows { margin-top: 32px; }
  .problem-rows li { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 24px; }
  .row-title, .problem-rows p { grid-column: 1 / -1; }
  .row-title { font-size: 36px; }
  .scene { min-height: 0; padding: 12px var(--margin); }
  .scene-frame { padding: 24px 20px 28px; }
  .slate { margin-bottom: 16px; font-size: 12px; }
  .slate-extra { display: none; }
  .timeline-mini { --name: 0px; }
  .lost { min-height: 0; align-content: start; padding-top: calc(var(--bar) + 48px); }
  .scene-unit { margin-bottom: 24px; }
  .step-art { min-height: 180px; padding: 20px; }
  .step-copy { padding-inline: 12px; }
  .node { padding: 6px 8px; font-size: 13px; }
  .faq summary { font-size: 17px; }
  .endcard { min-height: 0; padding-block: 96px 64px; }
  .case-hero { padding-top: calc(var(--bar) + 48px); }
  .case-body { gap: 16px; }
  .case-body h2, .case-body p { grid-column: 1 / -1; }
  .case-body p { font-size: 18px; margin-bottom: 24px; }
  .case-figures { gap: 24px; padding-bottom: 64px; }
  .bar-row, .axis { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .axis > span:first-child, .axis > span:last-child { display: none; }
  .bar-value { text-align: left; }
  .year { grid-template-rows: repeat(10, 10px); grid-auto-columns: 10px; }
}

/* Reduced motion: no scrub, no movement; everything is in its finished state */
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero-stage { position: relative; }
  .hint { display: none; }
  .js [data-reveal], .js [data-intro], .js [data-lines] .line > span { opacity: 1; translate: none; transition: none; animation: none; }
  .js .timeline { clip-path: none; animation: none; }
  .js .statement-text .w { opacity: 1; }
  .js .marked path, .js .wire path, .js .checklist .icon path { stroke-dashoffset: 0; transition: none; }
  .js .chart .cbar-before, .js .chart .cbar-after { clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0 round 4px); transition: none; }
  .js .chart .year i { background: var(--tally); transition: none; }
  .js .scene-frame { clip-path: none; }
  .btn, .btn::before, .draw, .more span, .more .icon, .faq summary, .next .icon { transition: none; }
  .faq summary:hover { translate: none; }
  .menu[open] .menu-panel { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}