/* ══════════════════════════════════════════════════════════════════════
   THE MOMENT — nine movements, nine different rules.
   No section here shares a layout, a motion, a colour or a typeface with
   the one before it. Read the §-markers in this sheet: each one is its own
   little machine.
   ══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:Clash;src:url(../fonts/clashdisplay-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Clash;src:url(../fonts/clashdisplay-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Clash;src:url(../fonts/clashdisplay-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/satoshi-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Anton;src:url(../fonts/anton-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Fraunces;src:url(../fonts/fraunces-var.woff2) format('woff2-variations');
  font-weight:100 900;font-display:swap}
@font-face{font-family:BarCon;src:url(../fonts/barlowcond-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:BarCon;src:url(../fonts/barlowcond-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:PMono;src:url(../fonts/plexmono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:PMono;src:url(../fonts/plexmono-500.woff2) format('woff2');font-weight:500;font-display:swap}

/* ── colour tokens ────────────────────────────────────────────────────
   Every colour in this sheet and in pages.css resolves through one of
   these, so the two palettes below are the whole of the theming. The
   -rgb pair exists because ~100 rules need the ground or the ink at an
   alpha; swapping the triplet flips all of them at once.
   Dark stays the default. Twelve near-identical greys were collapsed into
   the four --t steps to get here, so about twenty rules shifted by a few
   levels; the largest move was #b0aaa0 → --t3 in body copy. Nothing else
   about the dark ground changed. */
:root{
  --bg:#08090b;                 /* driven by JS, one colour world per movement */
  --fg:#f4efe7;
  --t1:#e6e0d6; --t2:#d6d0c5; --t3:#c9c3b8; --t4:#bab4a9;   /* muted text steps */
  --dim:#a8a196; --dimmer:#9c958a;
  --acc:#ff5c38; --on-acc:#08090b;          /* --on-acc reads ON an accent fill */
  --fg-rgb:239,234,226;                     /* hairlines, borders, subtle fills */
  --scrim-rgb:8,9,11;                       /* the weight laid over footage */
  --surface:#15161a; --surface-2:#1c1f26;   /* panels and video fallbacks */
  --fb-warm:#241a14;
  --top-bg:rgba(10,11,13,.92);
  --overlay:rgba(5,6,7,.97);
  --panel-glass:rgba(16,18,22,.95);
  /* decorative red — the drifting glows and the travelling rings */
  --glow-a:rgba(255,92,56,.16);
  --glow-b:rgba(232,64,44,.13);
  --ring:rgba(255,92,56,.4);

  --fs-micro:12.5px; --fs-lab:13.5px;
  --gut:clamp(18px,4vw,64px); --maxw:1560px; --nav-h:82px;
  --ez:cubic-bezier(.16,1,.3,1);
}
/* Both ramps run much closer to their ground than a muted scale usually
   would: everything read as grey rather than as text. The floor here is 8:1
   on the page and 6.4:1 on the darkest panel — the hierarchy is now carried
   by small steps between near-blacks instead of by fading toward the paper.
   The accent is #ad300d: 5.97:1 as text on the page, 4.80:1 on --surface-2,
   and white on it is 6.55:1. */
:root[data-theme="light"]{
  --bg:#f7f4ef;
  --fg:#121009;
  --t1:#1a1710; --t2:#221e15; --t3:#2b261b; --t4:#383223;
  --dim:#453e2d; --dimmer:#524a37;
  --acc:#ad300d; --on-acc:#ffffff;
  --fg-rgb:18,16,9;
  --scrim-rgb:247,244,239;
  --surface:#ece7de; --surface-2:#e2dcd1;
  --fb-warm:#e8d7c4;
  --top-bg:rgba(247,244,239,.92);
  --overlay:rgba(250,248,244,.97);
  --panel-glass:rgba(236,231,222,.95);
  /* Both glows carry the logo red here, and both are lifted: the same alpha
     that reads as a red glow on near-black washes out to pale pink on cream,
     which is exactly the light red that had to go. The ring goes solid. */
  --glow-a:rgba(255,92,56,.30);
  --glow-b:rgba(255,92,56,.22);
  --ring:#ff5c38;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);
  font-family:Satoshi,system-ui,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background 700ms linear;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--acc);color:var(--on-acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.lab{font-family:PMono,monospace;font-size:var(--fs-lab);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
/* on the hero it sits over moving footage, so it carries its own weight */
[data-scene="hero"] .lab{display:inline-flex;align-items:center;gap:clamp(10px,1.2vw,16px);
  font-size:clamp(13.5px,1.25vw,17px);letter-spacing:.2em;color:var(--t1);font-weight:500}
[data-scene="hero"] .lab::before{content:"";flex:none;width:clamp(24px,3.4vw,52px);height:2px;
  background:var(--acc)}
.skip{position:fixed;left:12px;top:-70px;z-index:300;background:var(--acc);color:var(--on-acc);
  padding:11px 18px;font-weight:700;transition:top 180ms}
.skip:focus{top:12px}

/* scene scaffold — a tall parent, a pinned stage inside it */
.scene{position:relative}
.pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;
  flex-direction:column;justify-content:center}
/* ── the movement label ───────────────────────────────────────────────
   Hidden on the pinned stages, and it stays hidden. Twice now it has been
   tried as a bar at the top of the section, and both times it landed on
   top of the copy: .pin centres its content vertically, so on a tall
   movement the text reaches up behind anything pinned to the top edge.
   The wayfinder at bottom-left already names the movement; the sections
   are separated by the rule below instead, which cannot overlap anything. */
.mvt{position:absolute;left:var(--gut);top:100px;z-index:20;display:flex;gap:12px;
  align-items:baseline;padding:7px 12px;background:rgba(var(--scrim-rgb),.94);
  backdrop-filter:blur(16px) saturate(.6);-webkit-backdrop-filter:blur(16px) saturate(.6);
  border-left:2px solid var(--acc)}
.mvt:not(.flat){display:none}
.mvt b{font-family:Anton,sans-serif;font-size:15px;letter-spacing:.06em;color:var(--acc)}
.mvt span{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--t2)}
/* the three unpinned sections have room for it inline, at the head of their
   own content, where nothing can be underneath it */
.mvt.flat{position:static;padding:0 0 12px;margin-bottom:clamp(20px,2.6vw,34px);
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-left:0;border-bottom:1px solid rgba(var(--fg-rgb),.12)}

/* ══ chrome ══ */
.top{position:fixed;inset:0 0 auto 0;z-index:100;pointer-events:none;
  background:var(--top-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(var(--fg-rgb),.16)}
.top-in{display:flex;align-items:center;height:82px;pointer-events:auto}
.mark{font-family:Clash,serif;font-weight:700;font-size:19px;letter-spacing:-.02em}
.mark i{color:var(--acc);font-style:normal}
.mark img{height:clamp(34px,3.2vw,48px);width:auto;display:block}
.top nav{margin-left:auto;display:flex;gap:20px;align-items:center}
.top nav a{position:relative;font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--t2);transition:color 200ms}
.top nav a:hover{color:var(--fg)}
/* the page you are on — accent plus a rule under it, so it reads without colour alone */
.top nav a[aria-current="page"]:not(.cta){color:var(--acc)}
.top nav a[aria-current="page"]:not(.cta)::after{content:"";position:absolute;
  left:0;right:0;bottom:-7px;height:2px;background:var(--acc)}
.top .cta{border:1px solid currentColor;padding:7px 14px;color:var(--acc)}
.top .cta:hover{background:var(--acc);color:var(--on-acc)}
@media(max-width:900px){.top nav a:not(.cta){display:none}}
/* movement counter, bottom-left, always tells you where you are */
/* This sits over live footage half the time, so it carries its own
   backdrop — at 16% on a moving video it simply disappeared. */
.where{position:fixed;left:var(--gut);bottom:14px;z-index:110;font-family:PMono,monospace;
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--t2);
  display:flex;gap:11px;align-items:center;pointer-events:none;
  padding:8px 13px;border:1px solid rgba(var(--fg-rgb),.22);
  background:rgba(var(--scrim-rgb),.94);backdrop-filter:blur(16px) saturate(.6);
  -webkit-backdrop-filter:blur(16px) saturate(.6)}
.where b{color:var(--acc);font-weight:500;min-width:2.2em}
.where .bar{width:92px;height:3px;background:rgba(var(--fg-rgb),.3);position:relative;flex:none}
.where .bar i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--acc)}
/* it is a wayfinder for the movements — the first screen does not need one */
.where.off{opacity:0;transform:translateY(10px)}
.where{transition:opacity var(--t2) var(--ez),transform var(--t2) var(--ez)}
@media(max-width:560px){.where span{display:none}.where{gap:9px}}

/* ═════ § I · ASSEMBLY ════════════════════════════════════════════════
   The headline does not fade in. It is in pieces, scattered and turned,
   and it flies together. Then the cursor can shove it around again.     */
[data-scene="hero"]{height:100svh}
[data-scene="hero"] .pin{justify-content:center;padding-top:clamp(94px,11vh,126px);
  padding-bottom:clamp(22px,4vh,52px)}
.h-bg{position:absolute;inset:0;z-index:0}
.h-bg video,.h-bg .fb{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.4) brightness(.7) contrast(1.04)}
/* no hero footage exists on the source site, so the backdrop is the gradient
   alone — the assembly, the type and the figures are untouched */
.h-sub{max-width:58ch;margin-top:12px;font-size:clamp(15px,1.4vw,18px);color:var(--t4);
  line-height:1.55}
.h-bg .fb{background:radial-gradient(120% 90% at 70% 20%,var(--fb-warm),transparent 60%),var(--bg)}
/* the copy sits at the bottom, so only the bottom needs to be held down */
.h-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(var(--scrim-rgb),.90) 0%,rgba(var(--scrim-rgb),.80) 45%,
      rgba(var(--scrim-rgb),.30) 72%,rgba(var(--scrim-rgb),.10) 100%),
    linear-gradient(180deg,rgba(var(--scrim-rgb),.34) 0%,rgba(var(--scrim-rgb),0) 30%,
      rgba(var(--scrim-rgb),0) 72%,rgba(var(--scrim-rgb),.46) 100%)}
.h-in{position:relative;z-index:3}
h1{margin:0;font-family:Clash,serif;font-weight:600;letter-spacing:-.035em;line-height:.92;
  font-size:clamp(32px,min(6.4vw,8.6vh),102px)}
.frag{display:inline-block;will-change:transform,opacity}
.h-deck{font-size:clamp(17px,1.8vw,26px);line-height:1.4;color:var(--t2);max-width:44ch;
  margin-top:24px;min-height:2.9em}
.h-deck .cur{display:inline-block;width:.5em;height:1em;background:var(--acc);
  vertical-align:-.13em;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.h-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;font-weight:700;
  font-size:15.5px;background:var(--acc);color:var(--on-acc);position:relative;overflow:hidden}
.btn span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;background:var(--fg);
  transform:translateY(101%);transition:transform 460ms var(--ez)}
.btn:hover::before{transform:none}
.btn-o{background:transparent;color:var(--fg);border:1px solid rgba(var(--fg-rgb),.28)}
.btn-o:hover{color:var(--on-acc);border-color:var(--fg)}
.h-foot{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:22px;padding-top:16px;
  border-top:1px solid rgba(var(--fg-rgb),.12);align-items:baseline}
.h-foot .fig{display:flex;gap:12px;align-items:center}
.h-foot .fig b{font-family:Anton,sans-serif;font-size:clamp(26px,3vw,40px);line-height:1;
  color:var(--fg)}
.h-foot .fig span{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--t3);max-width:19ch;line-height:1.28}
.h-trust{width:100%;font-size:14.6px;color:var(--dim);margin-top:4px}
.h-trust b{color:var(--fg);font-weight:500}
#trustSlot{display:inline-block;min-width:6.2em;text-align:left}
.h-trust .cur{display:inline-block;width:.08em;height:1em;background:var(--acc);
  vertical-align:-.12em;margin-left:-.34em;animation:blink 1s steps(2) infinite}

/* ═════ § II · THE SEA OF SAMENESS ════════════════════════════════════
   A field of identical, anonymous marks — every brand that looks like
   every other brand. Scroll, and ten of them break rank and say their
   name. The tagline is literal here, so the section is literal too.     */
[data-scene="sea"]{height:300vh}
[data-scene="sea"] .pin{justify-content:center}
.sea{position:absolute;inset:0;display:grid;align-content:center;justify-content:center;
  gap:1px;padding:74px var(--gut) 64px}
.sea .cell{aspect-ratio:16/9;display:grid;place-items:center;position:relative;
  border:1px solid rgba(var(--fg-rgb),.055)}
.sea .cell .same{width:clamp(15px,1.5vw,24px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(var(--fg-rgb),var(--sa,.2));transition:opacity 500ms linear}
.sea .cell .nm{position:absolute;font-family:Clash,serif;font-weight:600;
  font-size:clamp(14px,1.45vw,22px);letter-spacing:-.02em;white-space:nowrap;
  opacity:0;transform:scale(.8);color:var(--fg);
  transition:opacity 460ms var(--ez),transform 640ms var(--ez)}
.sea .cell.up{border-color:rgba(var(--fg-rgb),.26)}
.sea .cell.up .nm{opacity:1;transform:none}
.sea .cell.up .same{opacity:0}
.sea-scrim{position:absolute;inset:0;background:var(--bg);opacity:0;pointer-events:none}
.sea-say{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding-inline:var(--gut);opacity:0;pointer-events:none}
.sea-say p{font-family:Clash,serif;font-weight:600;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(26px,4.9vw,76px);max-width:17ch}
.sea-say em{font-style:normal;color:var(--acc)}
.sea-sub{font-family:Satoshi,sans-serif!important;font-weight:400!important;
  font-size:clamp(15px,1.5vw,20px)!important;line-height:1.5!important;letter-spacing:0!important;
  color:var(--t3);max-width:46ch!important;margin-top:22px}
.sea-sub b{color:var(--fg);font-weight:500}

/* ═════ § III · THE DISCIPLINES REEL ══════════════════════════════════
   Scroll goes sideways here. Six full screens, and every one of them is
   built by a different little machine — see the .m-* rules below.        */
[data-scene="reel"]{height:660vh}
[data-scene="reel"] .pin{display:block}
.reel{display:flex;height:100%;width:600vw;will-change:transform}
.pan{width:100vw;height:100%;position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(16px,3vw,54px);
  align-items:center;padding:86px var(--gut) 74px}
@media(max-width:880px){.pan{grid-template-columns:1fr;align-content:center;gap:18px}}
.pan>*{position:relative;z-index:2}
/* The number is the thing that tells you where you are in the six, so it
   leads and the word after it is a label, not a peer. It was all one weight
   in one colour, which read as a single dim string. */
.pan .no{display:inline-flex;align-items:baseline;gap:.5em;
  font-family:PMono,monospace;font-size:var(--fs-lab);letter-spacing:.16em;
  text-transform:uppercase;color:var(--t3);font-weight:500}
.pan .no b{color:var(--pc);font-weight:700;font-size:1.3em;letter-spacing:.06em}
.pan .no i{font-style:normal;color:var(--pc);opacity:.55}
.pan h2{font-family:Clash,serif;font-weight:600;letter-spacing:-.035em;line-height:.92;
  font-size:clamp(34px,6vw,88px);margin:12px 0 16px}
.pan p{font-size:clamp(15.5px,1.4vw,19px);color:var(--t2);max-width:40ch}
.pan .solves{margin-top:13px;font-size:clamp(14.5px,1.25vw,17px);color:var(--t3);max-width:44ch}
.pan .solves b{color:var(--pc);font-weight:500}
.pan .seein{margin-top:16px;font-family:PMono,monospace;font-size:var(--fs-micro);
  letter-spacing:.08em;text-transform:uppercase;color:var(--t3);max-width:44ch}
/* the accounts are the claim in that line — they take the colour, the rest
   of the sentence stays black so the line still reads as a sentence */
.pan .seein b{color:var(--pc);font-weight:500}
/* short viewports drop the explainer rather than overflow the panel */
@media(max-height:730px){.pan .solves{display:none}}
.pan ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pan li{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.07em;
  border:1px solid rgba(var(--fg-rgb),.2);padding:6px 12px;color:var(--t2)}
.stage{aspect-ratio:1;max-height:min(52vh,520px);width:100%;position:relative;
  border:1px solid rgba(var(--fg-rgb),.14);overflow:hidden}
@media(max-width:880px){.stage{max-height:26vh;aspect-ratio:auto;height:26vh}}

/* machine 1 — a mark drawing itself out of construction lines */
.m-draw svg{width:100%;height:100%}
.m-draw .grid{stroke:rgba(var(--fg-rgb),.16);stroke-width:.5}
.m-draw .ink{stroke:var(--pc);stroke-width:2.4;fill:none;stroke-linecap:square}
/* machine 2 — the naming machine: candidates flicker, one survives */
.m-name{display:grid;place-items:center;text-align:center;padding:18px}
.m-name b{font-family:Clash,serif;font-weight:700;font-size:clamp(24px,3.4vw,52px);
  letter-spacing:-.03em;line-height:1;display:block}
.m-name .rej{font-family:PMono,monospace;font-size:var(--fs-micro);color:var(--dimmer);
  margin-top:14px;letter-spacing:.1em;min-height:1.4em}
.m-name b.locked{color:var(--pc)}
/* machine 3 — a page assembling itself, block by block */
.m-build{padding:16px;display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(9px,1fr);gap:6px}
.m-build i{background:rgba(var(--fg-rgb),.1);opacity:0;transform:scaleY(.2);transform-origin:50% 100%}
.m-build i.on{opacity:1;transform:none;transition:all 320ms var(--ez)}
.m-build i.key{background:var(--pc)}
/* machine 4 — a column of press copy typing itself */
.m-type{padding:20px;font-family:PMono,monospace;font-size:13.6px;line-height:1.65;
  color:var(--t2);overflow:hidden}
.m-type .hd{font-family:BarCon,sans-serif;font-weight:600;font-size:19px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pc);margin-bottom:10px}
/* machine 5 — a live auction board */
.m-bid{padding:18px;display:flex;flex-direction:column;gap:9px;justify-content:center}
.m-bid .row{display:flex;gap:12px;align-items:baseline;font-family:PMono,monospace;
  font-size:13.8px;border-bottom:1px solid rgba(var(--fg-rgb),.1);padding-bottom:7px}
.m-bid .row b{margin-left:auto;color:var(--pc);font-weight:500}
.m-bid .tot{font-family:Anton,sans-serif;font-size:clamp(26px,3.4vw,46px);color:var(--fg);
  line-height:1;margin-top:8px}
/* machine 2b — the messaging architecture stacking up, flush left */
.m-arch{padding:20px;display:flex;flex-direction:column;justify-content:center;gap:13px}
.m-arch .ln{display:flex;align-items:center;gap:11px;opacity:0;transform:translateX(-14px);
  transition:opacity 420ms var(--ez),transform 420ms var(--ez)}
.m-arch .ln.on{opacity:1;transform:none}
.m-arch .ln i{width:17px;height:1px;background:var(--pc);flex:none}
.m-arch .ln span{font-size:15px;color:var(--t2)}
/* machine 4b — the accounts it has actually been placed on */
.m-place{display:grid;place-content:center;gap:14px;padding:18px;text-align:center}
.m-place .pl{font-family:Clash,serif;font-weight:600;font-size:clamp(17px,2vw,27px);
  letter-spacing:-.02em;opacity:0;transform:translateY(12px);
  transition:opacity 460ms var(--ez),transform 460ms var(--ez)}
.m-place .pl.on{opacity:1;transform:none;color:var(--pc)}
.m-place .cap{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dimmer);margin-bottom:6px}
/* machine 6b — the film archive by category */
.m-cats{padding:16px;display:flex;flex-direction:column;justify-content:center;gap:7px}
.m-cats .cat{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:center;
  font-family:PMono,monospace;font-size:var(--fs-micro)}
.m-cats .cat span{color:var(--t2)} .m-cats .cat b{color:var(--pc);font-weight:500}
.m-cats .cat i{grid-column:1/-1;height:6px;background:rgba(var(--fg-rgb),.1);position:relative}
.m-cats .cat i::after{content:"";position:absolute;left:0;top:0;height:100%;width:0;
  background:var(--pc);transition:width 620ms var(--ez)}
.m-cats .cat.on i::after{width:var(--w)}
/* machine 6 — an edit timeline with a running head */
.m-tl{padding:18px;display:flex;flex-direction:column;gap:8px;justify-content:center;position:relative}
.m-tl .trk{height:26px;background:rgba(var(--fg-rgb),.08);position:relative;overflow:hidden}
.m-tl .trk i{position:absolute;top:0;height:100%;background:rgba(var(--fg-rgb),.2)}
.m-tl .trk i.k{background:var(--pc)}
.m-tl .head{position:absolute;top:10px;bottom:10px;width:2px;background:var(--fg);left:0}
.m-tl .tc{font-family:PMono,monospace;font-size:var(--fs-lab);color:var(--pc);letter-spacing:.14em}

/* ═════ § IV · FOUR BEATS ═════════════════════════════════════════════
   Connection, Logic, Magic, Cause — one screen each, and each word moves
   by a rule that means what the word means.                              */
[data-scene="beats"]{height:420vh}
.beat{position:absolute;inset:0;display:grid;place-items:center;padding:90px var(--gut);
  text-align:center;opacity:0;pointer-events:none}
.beat.on{opacity:1}
.beat h2{font-family:Fraunces,serif;font-variation-settings:'wght' 500,'SOFT' 40;
  font-size:clamp(44px,11vw,168px);line-height:.86;letter-spacing:-.03em}
.beat p{max-width:52ch;margin:20px auto 0;font-size:clamp(15.5px,1.5vw,20px);color:var(--t3)}
.beat .num{font-family:PMono,monospace;font-size:var(--fs-lab);letter-spacing:.24em;
  color:var(--acc);display:block;margin-bottom:18px}
/* Connection — the word arrives in two halves that join */
.b1 .lf,.b1 .rt{display:inline-block}
/* Logic — letter by letter, in strict order, with a rule under it */
.b2 h2 i{font-style:normal;display:inline-block;opacity:0}
.b2 .rule{height:2px;background:var(--acc);margin:14px auto 0;width:0}
/* Magic — appears whole, and blooms */
.b3 h2{filter:blur(0)}
/* Cause — pushes outward, rings travel */
.b4 .ring{position:absolute;border:1px solid var(--ring);border-radius:50%;
  left:50%;top:50%;transform:translate(-50%,-50%)}

/* ═════ § V · THE NUMBERS ═════════════════════════════════════════════
   Nine case studies, and not one card. The number is the whole screen.  */
[data-scene="numbers"]{height:760vh}
.nbg{position:absolute;inset:0;z-index:0}
.nbg .sl{position:absolute;inset:0;opacity:0;transition:opacity 620ms linear}
.nbg .sl.on{opacity:.78}
.nbg .sl video,.nbg .sl .fb{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.28) brightness(.78)}
.nbg .sl .fb{background:var(--surface)}
/* the giant number is set left, so hold the left down and let the right run */
.nbg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--scrim-rgb),.86) 0%,rgba(var(--scrim-rgb),.58) 46%,rgba(var(--scrim-rgb),.2) 100%)}
@media(max-width:760px){.nbg::after{background:rgba(var(--scrim-rgb),.66)}}
.nfg{position:relative;z-index:3;display:flex;flex-direction:column;
  justify-content:center;height:100%}
/* same max-width and gutter as .wrap, so this movement lines up with the rest */
.nfg-in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.nfg .cl{font-family:PMono,monospace;font-size:clamp(13.5px,1.3vw,17px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--acc);margin-bottom:14px;font-weight:500}
.nfg .cl .cur{display:inline-block;width:.09em;height:1em;background:var(--acc);
  vertical-align:-.14em;margin-left:.12em;animation:blink 1s steps(2) infinite}
.nfg .big{font-family:Anton,sans-serif;line-height:.82;letter-spacing:-.02em;
  font-size:clamp(44px,9.4vw,148px);display:block}
.nfg .cn{font-family:Clash,serif;font-weight:600;font-size:clamp(22px,3vw,44px);
  letter-spacing:-.03em;margin-top:16px}
.nfg .cd{max-width:52ch;margin-top:14px;font-size:clamp(16px,1.45vw,20px);color:var(--t2)}
.nfg .tg{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:18px}
.nfg .tg span{font-family:PMono,monospace;font-size:var(--fs-lab);letter-spacing:.1em;
  text-transform:uppercase;color:var(--t2);border:1px solid rgba(var(--fg-rgb),.24);
  padding:5px 11px}
.ndots{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);z-index:5;
  display:grid;gap:9px}
@media(max-width:700px){.ndots{display:none}}
.ndots i{width:7px;height:7px;border:1px solid rgba(var(--fg-rgb),.35);border-radius:50%;
  transition:all 300ms var(--ez)}
.ndots i.on{background:var(--acc);border-color:var(--acc);transform:scale(1.5)}

/* ═════ § VI · THE PROJECTOR ══════════════════════════════════════════
   Twenty-one films as a physical strip. It tilts toward your cursor and
   it never stops running.                                                */
[data-scene="projector"]{padding-block:clamp(60px,8vw,120px);overflow:hidden;
  background:linear-gradient(180deg,transparent,rgba(var(--fg-rgb),.035) 22%,
    rgba(var(--fg-rgb),.035) 78%,transparent);
  border-block:1px solid rgba(var(--fg-rgb),.09)}
.proj-count{display:flex;align-items:baseline;gap:13px;margin-top:22px;flex-wrap:wrap}
.proj-count b{font-family:Anton,sans-serif;font-size:clamp(30px,4vw,54px);line-height:1;
  color:var(--acc);letter-spacing:-.02em}
.proj-count span{font-family:PMono,monospace;font-size:var(--fs-lab);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.proj{perspective:1400px;margin-top:clamp(26px,3.4vw,48px)}
.strip-o{transform-style:preserve-3d;transition:transform 500ms var(--ez)}
.strip{display:flex;gap:0;width:max-content;animation:run 88s linear infinite}
.proj:hover .strip{animation-play-state:paused}
@keyframes run{to{transform:translateX(-50%)}}
.sprock{height:16px;background:
  repeating-linear-gradient(90deg,transparent 0 12px,rgba(var(--fg-rgb),.34) 12px 22px);
  border-block:1px solid rgba(var(--fg-rgb),.22)}
.frm{width:clamp(206px,23vw,312px);flex:none;padding:10px;
  border-right:1px solid rgba(var(--fg-rgb),.14);position:relative;cursor:pointer;
  transition:background var(--t2) var(--ez)}
.frm:hover{background:rgba(var(--fg-rgb),.05)}
.frm .win{aspect-ratio:4/3;overflow:hidden;background:#111;position:relative}
.frm .win img,.frm .win .fb{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.28) brightness(.94);transition:filter 520ms var(--ez),transform 900ms var(--ez)}
.frm .win .fb{background:linear-gradient(150deg,var(--surface-2),var(--bg))}
.frm:hover .win img{filter:none;transform:scale(1.06)}
.frm b{display:block;font-size:16px;font-weight:700;line-height:1.22;margin-top:11px;
  color:var(--fg)}
.frm span{display:block;font-family:PMono,monospace;font-size:var(--fs-lab);
  color:var(--t4);margin-top:6px;letter-spacing:.05em;line-height:1.35}
.frm:hover span{color:var(--acc)}
.frm .play{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  background:rgba(var(--scrim-rgb),.16);transition:background 300ms var(--ez)}
.frm .play::before{content:"";width:clamp(38px,4vw,52px);aspect-ratio:1;border-radius:50%;
  background:rgba(var(--scrim-rgb),.55);border:1.5px solid rgba(var(--fg-rgb),.85);
  transition:background 300ms var(--ez),border-color 300ms var(--ez),transform 300ms var(--ez)}
.frm .play::after{content:"";position:absolute;width:0;height:0;
  border-left:14px solid var(--fg);border-top:9px solid transparent;
  border-bottom:9px solid transparent;margin-left:5px;transition:border-left-color 300ms}
.frm:hover .play{background:rgba(var(--scrim-rgb),.05)}
.frm:hover .play::before{background:var(--acc);border-color:var(--acc);transform:scale(1.08)}
.frm:hover .play::after{border-left-color:var(--on-acc)}
.strip.hold{animation-play-state:paused}
/* a phone gets the strip still: one row it swipes through, not 21 frames
   stacked into a ten-thousand-pixel column */
@media(max-width:760px){
  .strip-o{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .strip-o .strip{flex-wrap:nowrap;width:max-content}
  .frm{scroll-snap-align:start;width:72vw}
}
.proj-note{max-width:56ch;margin-top:12px;color:var(--t4);font-size:15px}

/* ── the film opens over the page, not inside the strip ─────────────── */
.lb{position:fixed;inset:0;z-index:220;background:var(--overlay);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:grid;place-items:center;padding:clamp(52px,5vw,74px) clamp(16px,4vw,56px);
  opacity:0;pointer-events:none;transition:opacity 320ms var(--ez)}
.lb.on{opacity:1;pointer-events:auto}
.lb-box{width:min(1200px,100%)}
.lb-frame{position:relative;aspect-ratio:16/9;background:#000;
  border:1px solid rgba(var(--fg-rgb),.2)}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-cap{display:flex;flex-wrap:wrap;gap:9px 26px;align-items:baseline;margin-top:18px}
.lb-cap b{font-family:Clash,serif;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(20px,2.3vw,32px);line-height:1.05}
.lb-cap span{font-family:PMono,monospace;font-size:var(--fs-lab);letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc)}
.lb-close{position:fixed;top:14px;right:14px;z-index:230;
  border:1px solid rgba(var(--fg-rgb),.3);padding:9px 15px;font-family:PMono,monospace;
  font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;
  background:var(--top-bg)}
.lb-close:hover{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}

/* ═════ § VII · EIGHT WEEKS ═══════════════════════════════════════════
   The marker holds still in the middle of the screen and the weeks walk
   past underneath it. You are not scrolling the page, you are scrubbing. */
[data-scene="weeks"]{height:420vh}
.wk-mark{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(var(--fg-rgb),.3);z-index:6}
.wk-mark::before{content:"";position:absolute;left:50%;top:calc(50% - 7px);width:13px;height:13px;
  background:var(--acc);transform:translateX(-50%) rotate(45deg)}
@media(max-width:760px){.wk-mark{left:24px}}
.wk-rail{display:flex;align-items:center;height:100%;width:max-content;will-change:transform}
.wk-st{width:min(78vw,660px);flex:none;padding-inline:clamp(20px,4vw,64px);opacity:.24;
  transition:opacity 420ms var(--ez)}
.wk-st.on{opacity:1}
/* same shape as the discipline number: the step leads, the weeks label it */
.wk-st .w{display:inline-flex;align-items:baseline;gap:.5em;
  font-family:PMono,monospace;font-size:var(--fs-lab);letter-spacing:.16em;
  text-transform:uppercase;color:var(--t3);font-weight:500;margin-bottom:16px}
.wk-st .w b{color:var(--acc);font-weight:700;font-size:1.3em;letter-spacing:.06em}
.wk-st .w i{font-style:normal;color:var(--acc);opacity:.55}
.wk-st h3{font-family:Clash,serif;font-weight:600;font-size:clamp(38px,7vw,104px);
  letter-spacing:-.04em;line-height:.9;margin-bottom:16px}
.wk-st p{font-size:clamp(15.5px,1.5vw,20px);color:var(--t3);max-width:38ch}
.wk-st .wk-dec{margin-top:14px;padding-top:12px;border-top:1px solid rgba(var(--fg-rgb),.16);
  font-family:PMono,monospace;font-size:clamp(14px,1.15vw,15.5px);letter-spacing:.02em;
  line-height:1.6;text-transform:none;color:var(--acc);font-weight:500;max-width:38ch;
  border-left:2px solid var(--acc);padding-left:14px;border-top:0;margin-top:16px}
.wk-prog{position:absolute;left:0;right:0;bottom:60px;height:1px;
  background:rgba(var(--fg-rgb),.14);z-index:5}
.wk-prog i{position:absolute;left:0;top:0;height:100%;background:var(--acc);width:0}

/* ═════ § VIII · THE OBJECTION ════════════════════════════════
   The objection and its answer used to stack, which left the right half of
   a very wide band empty and pushed each pair a screen apart. They sit side
   by side now: the objection is the claim, the answer is the reply, and you
   can read a pair without scrolling between the two halves.               */
[data-scene="strike"]{padding-block:clamp(60px,8vw,120px)}
.ob{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(18px,3vw,56px);align-items:start;
  padding-block:clamp(24px,3vw,44px);border-bottom:1px solid rgba(var(--fg-rgb),.12)}
.ob:first-of-type{border-top:1px solid rgba(var(--fg-rgb),.12)}

.ob-q{display:flex;gap:clamp(12px,1.4vw,20px);align-items:baseline}
.ob-no{flex:none;font-family:PMono,monospace;font-size:var(--fs-lab);letter-spacing:.14em;
  color:var(--acc);font-weight:500;padding-top:.35em}
.ob q{quotes:none;display:block;font-family:Clash,serif;font-weight:600;
  letter-spacing:-.03em;line-height:1.04;font-size:clamp(21px,2.9vw,40px);
  color:var(--dim);transition:color 520ms var(--ez)}
.ob.in q{color:var(--fg)}

.ob p{font-size:clamp(15.5px,1.3vw,18px);line-height:1.62;color:var(--t3);max-width:52ch;
  opacity:0;transform:translateY(8px);
  transition:opacity 520ms var(--ez) 160ms,transform 520ms var(--ez) 160ms}
.ob.in p{opacity:1;transform:none}

@media(max-width:900px){
  .ob{grid-template-columns:1fr;gap:14px}
  .ob p{max-width:62ch}
}
@media(prefers-reduced-motion:reduce),(max-width:760px){
  .ob q{color:var(--fg);transition:none}
  .ob p{opacity:1;transform:none;transition:none}
}
.dna{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:clamp(20px,2.6vw,40px)}
.dna h4{font-family:BarCon,sans-serif;font-weight:600;font-size:19px;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:9px;color:var(--acc)}
.dna p{font-size:15.6px;color:var(--t3)}
/* A CSS counter, so the numbering is right whatever order the questions are
   written in and nothing has to be typed into the markup. */
.qa{counter-reset:qa}
.qa details{border-bottom:1px solid rgba(var(--fg-rgb),.12);counter-increment:qa}
.qa summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;gap:16px;align-items:baseline;
  font-size:18px;font-weight:700;transition:color 200ms}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--acc)}
/* the question mark is already at the end of every question, so the slot in
   front of it is better spent telling you where you are in the list */
.qa summary::before{content:counter(qa,decimal-leading-zero);
  font-family:PMono,monospace;font-size:var(--fs-lab);font-weight:500;
  letter-spacing:.06em;color:var(--acc);flex:none;min-width:2.1em}
.qa summary::after{content:"+";margin-left:auto;font-family:PMono,monospace;color:var(--acc);
  transition:transform 380ms var(--ez)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa .ans{padding:0 0 20px 30px;max-width:72ch;color:var(--t3);font-size:16.2px}

/* ═════ § IX · THE ONLY BOX ═══════════════════════════════════════════ */
[data-scene="close"]{padding-block:clamp(60px,8vw,120px)}
.ct{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.84fr);gap:clamp(30px,4vw,72px);
  margin-top:clamp(26px,3.4vw,50px)}
@media(max-width:900px){.ct{grid-template-columns:1fr}}
.ct h2{font-family:Clash,serif;font-weight:600;font-size:clamp(30px,5.4vw,78px);
  letter-spacing:-.04em;line-height:.94}
.ct-pts{list-style:none;margin-top:26px;display:grid;gap:12px}
.ct-pts li{display:flex;gap:12px;font-size:16.4px;color:var(--t3)}
.ct-pts li::before{content:"→";color:var(--acc);flex:none}
.ct-info{margin-top:32px;padding-top:24px;border-top:1px solid rgba(var(--fg-rgb),.14);
  display:grid;gap:10px}
.ct-info a{font-family:Clash,serif;font-weight:600;font-size:clamp(20px,2.2vw,30px);
  letter-spacing:-.02em;width:fit-content;transition:color 200ms}
.ct-info a:hover{color:var(--acc)}
.ct-hours{font-family:PMono,monospace;font-size:var(--fs-micro);color:var(--dimmer);letter-spacing:.1em}
.form{border:1px solid rgba(var(--fg-rgb),.22);padding:clamp(22px,3vw,38px);position:relative}
.form .only{position:absolute;right:14px;top:-9px;background:var(--bg);padding-inline:8px;
  font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dimmer)}
.form h3{font-family:Clash,serif;font-weight:600;font-size:27px;letter-spacing:-.02em;margin-bottom:7px}
.form>p{font-size:14.8px;color:var(--dim);margin-bottom:22px}
.fld{margin-bottom:17px}
.fld label{display:block;font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.fld input,.fld select,.fld textarea{width:100%;background:transparent;border:0;
  border-bottom:1px solid rgba(var(--fg-rgb),.22);padding:10px 2px;color:var(--fg);
  font-family:Satoshi,sans-serif;font-size:16px;transition:border-color 300ms}
.fld textarea{resize:vertical;min-height:86px}
.fld select option{background:var(--surface);color:var(--fg)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--acc)}
.fld .hint{font-size:var(--fs-micro);color:var(--dimmer);margin-top:7px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form-note{font-size:var(--fs-micro);color:var(--dimmer);margin-top:15px;line-height:1.5}
.form-ok{display:none;margin-top:14px;padding:13px;border:1px solid var(--acc);
  color:var(--acc);font-size:15px}
.form-ok.on{display:block}
footer{border-top:1px solid rgba(var(--fg-rgb),.12);padding-block:clamp(40px,5vw,70px) 26px;
  margin-top:clamp(50px,6vw,90px)}
.ft{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,48px)}
@media(max-width:880px){.ft{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ft{grid-template-columns:1fr}}
.ft .em{font-family:Fraunces,serif;font-variation-settings:'wght' 400;font-size:clamp(21px,2.4vw,31px);
  line-height:1.14;letter-spacing:-.01em}
.ft p{font-size:15.4px;color:var(--t4);margin-top:14px;max-width:44ch}
.ft h5{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer);margin-bottom:14px}
.ft a{display:block;font-size:15.2px;color:var(--t3);padding:4px 0;transition:color 200ms}
.ft a:hover{color:var(--acc)}
.ft-bot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  margin-top:clamp(34px,4vw,58px);padding-top:20px;border-top:1px solid rgba(var(--fg-rgb),.08);
  font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.1em;color:var(--dimmer)}
.ft-bot nav{display:flex;gap:18px}
.ft-bot a:hover{color:var(--acc)}

/* ═════ THE FULL CASE ═════════════════════════════════════════════════
   Movement V shows one number per client, which is all that screen holds.
   The rest of the case lives here, and only exists once you ask for it.  */
.cs-open{margin-top:26px;display:inline-flex;width:fit-content;align-self:flex-start;
  align-items:center;gap:10px;padding:13px 24px;font-size:15.5px;font-weight:700;
  background:var(--acc);border:1px solid var(--acc);color:var(--on-acc);
  transition:all var(--t2) var(--ez)}
.cs-open:hover{background:transparent;color:var(--acc)}
.cs-ov{position:fixed;inset:0;z-index:200;background:rgba(var(--scrim-rgb),.97);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity 360ms var(--ez)}
.cs-ov.on{opacity:1;pointer-events:auto}
.cs-in{max-width:1080px;margin-inline:auto;padding:clamp(64px,8vw,104px) var(--gut) 90px}
.cs-close{position:fixed;top:14px;right:14px;z-index:210;border:1px solid rgba(var(--fg-rgb),.3);
  padding:9px 15px;font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;background:var(--top-bg)}
.cs-close:hover{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.cs-sector{font-family:PMono,monospace;font-size:var(--fs-lab);letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc)}
.cs-in h2{font-family:Clash,serif;font-weight:600;font-size:clamp(30px,5.4vw,74px);
  letter-spacing:-.04em;line-height:.96;margin:12px 0 16px}
.cs-about{max-width:62ch;font-size:clamp(16px,1.5vw,20px);color:var(--t3)}
.cs-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.cs-tags span{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.08em;
  border:1px solid rgba(var(--fg-rgb),.22);padding:5px 11px;color:var(--t2)}
.cs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:1px;background:rgba(var(--fg-rgb),.1);border:1px solid rgba(var(--fg-rgb),.1);
  margin:clamp(26px,3.4vw,44px) 0}
.cs-stats div{background:var(--bg);padding:20px 18px}
.cs-stats b{display:block;font-family:Anton,sans-serif;font-size:clamp(26px,3.4vw,44px);
  line-height:1;letter-spacing:-.02em;color:var(--acc)}
.cs-stats span{display:block;margin-top:8px;font-family:PMono,monospace;
  font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.cs-quad{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:clamp(22px,2.8vw,42px)}
.cs-quad h3{font-family:PMono,monospace;font-size:var(--fs-lab);letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);padding-bottom:9px;margin-bottom:13px;
  border-bottom:1px solid rgba(var(--fg-rgb),.14)}
.cs-quad ul{list-style:none;display:grid;gap:10px}
.cs-quad li{display:flex;gap:11px;font-size:15.6px;color:var(--t3)}
.cs-quad li::before{content:"—";color:var(--acc);flex:none}
.cs-foot{margin-top:clamp(26px,3.4vw,44px);padding-top:20px;
  border-top:1px solid rgba(var(--fg-rgb),.14);display:grid;gap:14px}
.cs-foot p{font-size:15.4px;color:var(--t4)}
.cs-foot b{color:var(--fg);font-weight:500}
.cs-svcs{display:flex;flex-wrap:wrap;gap:7px}
.cs-svcs i{font-style:normal;font-family:PMono,monospace;font-size:var(--fs-micro);
  letter-spacing:.08em;background:var(--acc);color:var(--on-acc);padding:5px 10px}

/* ── reduced motion: every scene stops being a scene ─────────────────── */
@media(prefers-reduced-motion:reduce),(max-width:760px){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    /* the staggers are delays, not durations — left alone, lists and marks
       still came in one after another as they scrolled into view */
    animation-delay:0s!important;transition-delay:0s!important}
  .scene{height:auto!important}
  .pin{position:static;height:auto;padding-block:60px}
  .reel,.wk-rail{width:auto;flex-direction:column;transform:none!important;gap:40px}
  .pan,.wk-st{width:auto;height:auto;opacity:1}
  /* the reel driver does not run, so each machine shows its finished state */
  .m-draw .ink{stroke-dashoffset:0!important}
  .m-arch .ln,.m-place .pl,.m-build i{opacity:1;transform:none}
  .m-place .pl{color:var(--pc)}
  .m-build i:nth-child(7n+1){background:var(--pc)}
  .m-bid .row{opacity:1!important}
  .m-cats .cat i::after{width:var(--w)}
  .beat{position:static;opacity:1;pointer-events:auto;padding-block:44px}
  .sea{position:static;padding-block:30px}
  .sea .cell:not([data-k]){display:none}
  .sea .cell .nm{opacity:1;transform:none}
  .sea .cell .same{display:none}
  .sea-scrim{display:none}
  .sea-say{position:static;opacity:1!important;padding-block:30px}
  .nbg .sl{display:none}
  .ob p{clip-path:none!important}
  .strip{animation:none;flex-wrap:wrap;width:auto}
  .strip .dup{display:none}
  .wk-mark,.ndots{display:none}
  .cs-ov,.lb{transition:none}
}
/* ══ § THEME ══════════════════════════════════════════════════════════
   Everything above resolves through the tokens, so this block only holds
   what a token cannot express: the footage treatment, which logo shows,
   and the toggle itself.                                              */

/* The scrims over footage are token-driven and go pale in light mode, so
   the footage under them has to come up to meet the dark text — left at
   brightness(.5) it stayed a dark smear behind ink-coloured type. */
:root[data-theme="light"] .bg-video video,:root[data-theme="light"] .bg-video .fb,
:root[data-theme="light"] .h-bg video,:root[data-theme="light"] .h-bg .fb,
:root[data-theme="light"] .pan-v video,:root[data-theme="light"] .pan-v .fb{
  filter:grayscale(.55) brightness(1.1) contrast(.92)}
:root[data-theme="light"] .pan-v{opacity:.5}

/* two marks, one per ground — the ink logo was already in assets/img */
.mark .lg-l{display:none}
:root[data-theme="light"] .mark .lg-d{display:none}
:root[data-theme="light"] .mark .lg-l{display:block}

/* the toggle sits with the nav and stays visible at every width */
.tt{margin-left:18px;flex:none;display:grid;place-items:center;width:36px;height:36px;
  border:1px solid rgba(var(--fg-rgb),.24);color:var(--t2);line-height:1;
  transition:color 200ms,border-color 200ms,background 200ms}
.tt:hover{color:var(--acc);border-color:var(--acc)}
.tt svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tt .i-sun{display:none}
:root[data-theme="light"] .tt .i-sun{display:block}
:root[data-theme="light"] .tt .i-moon{display:none}

/* --pc is the per-discipline accent. It resolves here rather than inline so
   the light ground can swap it: the dark reds run pale-to-deep, and on cream
   that order inverts, or the palest would vanish into the page. */
.pan{--pc:var(--pc-dark)}
:root[data-theme="light"] .pan{--pc:var(--pc-light)}

/* ── "still unsure?" — the WhatsApp line ──────────────────────────────
   The paragraph used to carry an inline #b0aaa0, which the token pass
   could not reach: on the cream ground it fell to about 1.9:1 and the
   sentence effectively disappeared. It reads off --t3 now, so it turns
   with the theme. The mark pings on a long loop — a signal going out,
   not a thing demanding attention. */
.wa-line{margin-top:26px;color:var(--t3)}
.wa{display:inline-flex;align-items:center;gap:9px;color:var(--acc);
  border-bottom:1px solid currentColor}
.wa-mk{position:relative;display:grid;place-items:center;width:21px;height:21px;flex:none}
.wa-mk svg{width:17px;height:17px;fill:currentColor;position:relative;z-index:1;
  transition:transform 300ms var(--ez)}
.wa-mk::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid currentColor;opacity:0;animation:waPing 3s ease-out infinite}
@keyframes waPing{
  0%   {transform:scale(.55);opacity:.75}
  60%  {transform:scale(1.45);opacity:0}
  100% {transform:scale(1.45);opacity:0}
}
.wa:hover .wa-mk svg{transform:rotate(-10deg) scale(1.08)}
@media(prefers-reduced-motion:reduce),(max-width:760px){
  .wa-mk::after{animation:none}
  .wa-mk svg{transition:none}
}

/* ══ § IX · THE CLOSE ═════════════════════════════════════════════════
   The right column used to hold a heading, one line and a button, and
   read as a mostly empty panel next to a full one. It now carries the
   three steps the box was implying, so both columns have weight.
   Shared by the seven pages that require inc/close.php and by the
   contact page, so every change here lands in all of them.            */

/* the icon set — inherits currentColor, so it turns with the theme */
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.ct-lede{max-width:52ch;margin-top:20px;font-size:clamp(16px,1.5vw,20px);color:var(--t3)}

/* left — the three promises, each with its own mark, dealt in on reveal */
.ct-pts li{display:flex;gap:13px;align-items:center;font-size:16.4px;color:var(--t3);
  opacity:0;transform:translateX(-12px);
  transition:opacity 520ms var(--ez),transform 520ms var(--ez)}
.ct-pts li::before{content:none}          /* the arrow is a drawn icon now */
.ct-pts .ic{color:var(--acc);transition:transform 320ms var(--ez)}
.ct-pts li:hover .ic{transform:scale(1.14) rotate(-6deg)}
.ct.in .ct-pts li{opacity:1;transform:none;transition-delay:calc(var(--i)*90ms + 160ms)}

/* left — contact rows, the mark leading each */
.ct-info a{display:inline-flex;align-items:center;gap:13px}
.ct-info .ic{color:var(--acc);transition:transform 320ms var(--ez)}
.ct-info a:hover .ic{transform:translateX(3px)}

/* right — what actually happens, on a rule that draws itself down */
.ct-steps{list-style:none;display:grid;gap:18px;margin:24px 0 28px;position:relative}
.ct-steps::before{content:"";position:absolute;left:16px;top:12px;bottom:12px;width:1px;
  background:rgba(var(--fg-rgb),.18);transform:scaleY(0);transform-origin:top;
  transition:transform 760ms var(--ez) 320ms}
.ct.in .ct-steps::before{transform:scaleY(1)}
.ct-steps li{display:flex;gap:15px;align-items:center;font-size:17.2px;color:var(--t3);
  opacity:0;transform:translateY(8px);
  transition:opacity 520ms var(--ez),transform 520ms var(--ez)}
.ct.in .ct-steps li{opacity:1;transform:none;transition-delay:calc(var(--i)*120ms + 420ms)}
.ct-steps b{flex:none;width:33px;height:33px;display:grid;place-items:center;border-radius:50%;
  font-family:PMono,monospace;font-size:13.5px;font-weight:500;color:var(--acc);
  border:1px solid rgba(var(--fg-rgb),.24);background:var(--bg)}

/* the button carries an arrow that leaves ahead of the cursor */
.ct-go{width:100%;justify-content:center}
.btn .ic{position:relative;z-index:2;transition:transform 340ms var(--ez)}
.btn:hover .ic{transform:translateX(5px)}

/* a staffed inbox, not an autoresponder — one dot, on a slow pulse */
.ct-live{display:flex;align-items:center;gap:11px;margin-top:18px;
  font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.1em;color:var(--dimmer)}
.ct-live i{position:relative;width:7px;height:7px;flex:none;border-radius:50%;background:var(--acc)}
.ct-live i::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid var(--acc);animation:ctPing 2.6s ease-out infinite}
@keyframes ctPing{
  0%   {transform:scale(1);opacity:.8}
  70%  {transform:scale(2.9);opacity:0}
  100% {transform:scale(2.9);opacity:0}
}
@media(prefers-reduced-motion:reduce),(max-width:760px){
  .ct-live i::after{animation:none}
  .ct-pts li,.ct-steps li{opacity:1;transform:none;transition:none}
  .ct-steps::before{transform:scaleY(1);transition:none}
}

/* ── the DNA, four drawn marks ────────────────────────────────────────
   It was four headings and four paragraphs in a row, which read as a
   footnote. Each line now opens with a mark that draws itself as the
   cell arrives, and the cell carries a rule that grows with it.      */
.dna>div{position:relative;padding-left:18px}
.dna>div::before{content:"";position:absolute;left:0;top:4px;width:2px;height:0;
  background:var(--acc);transition:height 640ms var(--ez)}
.dna>div.in::before{height:calc(100% - 8px);transition-delay:calc(var(--i,0)*70ms + 200ms)}

.dna-mk{width:50px;height:50px;display:block;margin-bottom:14px;overflow:visible}
.dna-mk .gd{stroke:rgba(var(--fg-rgb),.12);stroke-width:1;fill:none}
.dna-mk .rg{fill:none;stroke:rgba(var(--fg-rgb),.24);stroke-width:1.4}
.dna-mk .dr{fill:none;stroke:var(--acc);stroke-width:2.1;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1200ms var(--ez)}
.dna-mk .dot{fill:var(--acc);transform-box:fill-box;transform-origin:center;
  transform:scale(0);transition:transform 460ms var(--ez)}
.dna>div.in .dna-mk .dr{stroke-dashoffset:0;transition-delay:calc(var(--i,0)*70ms + 260ms)}
.dna>div.in .dna-mk .dot{transform:scale(1);transition-delay:calc(var(--i,0)*70ms + 820ms)}

.dna-no{display:block;font-family:PMono,monospace;font-size:var(--fs-micro);
  letter-spacing:.18em;color:var(--dimmer);margin-bottom:7px}
/* the mark answers the hover, so the whole cell reads as one object */
.dna>div:hover .dna-mk .dr{stroke-width:2.6}
.dna-mk .dr{transition:stroke-dashoffset 1200ms var(--ez),stroke-width 260ms var(--ez)}

@media(prefers-reduced-motion:reduce),(max-width:760px){
  .dna-mk .dr{stroke-dashoffset:0;transition:none}
  .dna-mk .dot{transform:scale(1);transition:none}
  .dna>div::before{height:calc(100% - 8px);transition:none}
}

/* ── the close panel, filled ──────────────────────────────────────────
   The grid stretches this panel to whichever column is taller, so any
   slack used to collect as dead space under the last element. Laying it
   out as a column and pushing the hours line to the end sends the slack
   above that line instead, whatever the two columns weigh. */
.ct-box{display:flex;flex-direction:column}
.ct-box .ct-live{margin-top:auto;padding-top:20px}

.ct-direct{margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(var(--fg-rgb),.14)}
.ct-or{display:block;font-family:PMono,monospace;font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin-bottom:14px}
/* in here these are a list of ways in, not the display-sized headline they
   are on the contact page, where they carry the column on their own */
.ct-box .ct-info{margin-top:0;padding-top:0;border-top:0;gap:12px}
.ct-box .ct-info a{font-family:Satoshi,sans-serif;font-weight:500;
  font-size:16.5px;letter-spacing:0}

/* the panel's own copy was set for a narrow sidebar; in this box it reads as
   body text and was sitting well under the size of everything around it */
.ct-box>p{font-size:16.6px;line-height:1.55;color:var(--t3)}
.ct-box .ct-info a{font-size:17.2px}
.ct-box .ct-live{font-size:var(--fs-lab)}
.ct-or{font-size:var(--fs-lab)}

/* ══ § BRANDS · the roster ════════════════════════════════════════════
   Type, not logo files. The sea scene already sets brand names as type,
   so this is the house treatment rather than a placeholder. When logo
   files arrive each <li> takes an <img> and nothing else moves. */
.broster{display:grid;gap:0}
.brow{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,4fr);
  gap:clamp(14px,2vw,40px);padding-block:clamp(18px,2.2vw,30px);
  border-top:1px solid rgba(var(--fg-rgb),.12)}
.brow:last-child{border-bottom:1px solid rgba(var(--fg-rgb),.12)}
.brow h3{font-family:PMono,monospace;font-size:var(--fs-lab);letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);font-weight:400;padding-top:4px}
.brow ul{list-style:none;display:flex;flex-wrap:wrap;gap:9px 0}
.brow li{font-family:Clash,serif;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(17px,1.7vw,23px);color:var(--t2);
  padding-right:18px;margin-right:18px;position:relative;
  transition:color 260ms var(--ez)}
/* a hairline between names rather than a comma, so the row reads as a set */
.brow li:not(:last-child)::after{content:"";position:absolute;right:0;top:.28em;bottom:.28em;
  width:1px;background:rgba(var(--fg-rgb),.22)}
.brow li:hover{color:var(--acc)}
@media(max-width:760px){
  .brow{grid-template-columns:1fr;gap:10px}
  .brow li{font-size:16.5px}
}

/* ══ § CRAFT PROOF ════════════════════════════════════════════════════
   The discipline card shape, reused — no new layout was needed. */
.craft{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,286px),1fr));
  gap:1px;background:rgba(var(--fg-rgb),.12);border:1px solid rgba(var(--fg-rgb),.12)}
.cft{background:var(--bg);padding:clamp(22px,2.4vw,32px);position:relative}
.cft-no{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.18em;
  color:var(--acc);display:block;margin-bottom:12px}
.cft h3{font-family:Clash,serif;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(19px,2vw,25px);margin-bottom:10px}
.cft p{font-size:15.6px;color:var(--t3);line-height:1.6}
/* the rule fills in as the card arrives, same gesture as the DNA cells */
.cft::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;
  background:var(--acc);transition:width 620ms var(--ez)}
.cft.in::before{width:100%;transition-delay:calc(var(--i,0)*70ms + 160ms)}
@media(prefers-reduced-motion:reduce),(max-width:760px){.cft::before{width:100%;transition:none}}

/* the two published addresses, under the ways in */
.ct-addr{list-style:none;display:grid;gap:12px;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(var(--fg-rgb),.12)}
.ct-addr li{display:grid;gap:2px}
.ct-addr b{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc);font-weight:400}
.ct-addr span{font-size:14.8px;color:var(--t4);line-height:1.5}
.ct-city{font-style:normal;font-family:PMono,monospace;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer);margin-left:7px}

/* ══ § MAP · the Delhi office, on the ground ══════════════════════════
   Google serves exactly one tile set on the keyless embed, and it is the
   light one — dropped on the dark ground untouched it is the brightest
   object on the page by a distance. The inversion below turns it to match
   the palette (hue-rotate puts the greens and blues back the right way
   round after invert flips them), and it comes off entirely in light
   theme, where the tiles already belong. */
.ct-map{margin-top:30px;padding-top:22px;
  border-top:1px solid rgba(var(--fg-rgb),.12)}
.ct-map-lab{display:flex;align-items:center;gap:9px;font-family:PMono,monospace;
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc);margin-bottom:13px}
.ct-map-lab .ic{width:16px;height:16px}

.ct-map-fr{position:relative;aspect-ratio:16/10;overflow:hidden;
  background:var(--surface);border:1px solid rgba(var(--fg-rgb),.16)}
.ct-map-fr iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  opacity:0;transition:opacity 760ms var(--ez)}
.ct-map-fr.on iframe{opacity:1}
:root:not([data-theme="light"]) .ct-map-fr iframe{
  filter:invert(1) hue-rotate(180deg) saturate(.78) brightness(.92) contrast(1.05)}

/* what sits there until the tiles arrive — a drawn mark on the surface
   colour, not a screenshot of somewhere we are not */
.ct-map-ph{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--acc);opacity:.55;transition:opacity 460ms var(--ez);
  background:
    linear-gradient(rgba(var(--fg-rgb),.05) 1px,transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg,rgba(var(--fg-rgb),.05) 1px,transparent 1px) 0 0/34px 100%}
.ct-map-ph .ic{width:30px;height:30px;animation:mapdrop 2.4s var(--ez) infinite}
.ct-map-fr.on .ct-map-ph{opacity:0;pointer-events:none}
@keyframes mapdrop{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce),(max-width:760px){.ct-map-ph .ic{animation:none}}

.ct-map-addr{margin-top:13px;font-size:14.8px;color:var(--t4);line-height:1.55}
.ct-map-go{display:inline-flex;align-items:center;gap:9px;margin-top:11px;
  font-family:PMono,monospace;font-size:var(--fs-lab);letter-spacing:.1em;
  text-transform:uppercase;color:var(--t1);border-bottom:1px solid rgba(var(--fg-rgb),.28);
  padding-bottom:3px;transition:color 280ms var(--ez),border-color 280ms var(--ez)}
.ct-map-go:hover{color:var(--acc);border-color:var(--acc)}
.ct-map-go .ic{width:16px;height:16px;transition:transform 320ms var(--ez)}
.ct-map-go:hover .ic{transform:translateX(4px)}
@media(max-width:760px){.ct-map-fr{aspect-ratio:4/3}}

/* the micro line the revised hero puts under the buttons */
.h-micro{margin-top:14px;font-family:PMono,monospace;font-size:var(--fs-lab);
  letter-spacing:.18em;text-transform:uppercase;color:var(--t1)}

/* ══ § TYPE · the display numerals ════════════════════════════════════
   Anton ships in one weight, 400. Five of these sit on a <b>, which the
   browser defaults to bold, so with no real bold to load it synthesised
   one — smearing every glyph outward. That is what made the figures look
   over-weight AND ran the characters into each other. Declaring the real
   weight stops the fake, and the negative tracking comes off with it. */
.mvt b,
.h-foot .fig b,
.m-bid .tot,
.nfg .big,
.proj-count b,
.cs-stats b,
.cstats b,
.case-figure .big{font-weight:400}
/* those five carried -.02em on top of the smear; a touch open now */
.nfg .big,
.proj-count b,
.cs-stats b,
.cstats b,
.case-figure .big{letter-spacing:.012em}
.h-foot .fig b,
.m-bid .tot{letter-spacing:.012em}

/* ══ § HEADER · nav and the call button ══════════════════════════════
   The links sat at --t2 and regular weight, which on the cream ground
   read as body copy rather than navigation. The call button was an
   outline among outlines and did not look like the one thing to press. */
.top nav a{font-weight:500;color:var(--t1)}
.top nav a:hover{color:var(--acc)}
/* the rule sweeps in from the left rather than just appearing */
.top nav a:not(.cta)::after{content:"";position:absolute;left:0;bottom:-7px;height:2px;
  width:0;background:var(--acc);transition:width 280ms var(--ez)}
.top nav a:not(.cta):hover::after{width:100%}
.top nav a[aria-current="page"]:not(.cta)::after{width:100%;right:auto}

.top .cta{background:var(--acc);border-color:var(--acc);color:var(--on-acc);
  font-weight:700;transition:background 240ms var(--ez),color 240ms var(--ez)}
.top .cta::after{content:none}
.top .cta:hover{background:transparent;color:var(--acc)}

/* ══ § CASE TAGS ══════════════════════════════════════════════════════
   They were three inert outlines carrying the only quick read of what
   the engagement actually was. Each now has its own mark, deals in on
   reveal, and lights to the accent when you go near it. */
.ctags{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.ctags span{display:inline-flex;align-items:center;gap:9px;
  padding:6px 13px;border:1px solid rgba(var(--fg-rgb),.22);
  color:var(--t2);cursor:default;
  opacity:0;transform:translateY(9px);
  transition:opacity 460ms var(--ez),transform 460ms var(--ez),
             color 240ms var(--ez),border-color 240ms var(--ez),background 240ms var(--ez)}
.ctags[data-rv].in span{opacity:1;transform:none;transition-delay:calc(var(--i)*80ms + 120ms)}
.ctags b{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.08em;
  text-transform:uppercase;font-weight:400}
.ctags .ic{width:15px;height:15px;color:var(--acc);
  transition:transform 380ms var(--ez)}
.ctags span:hover{color:var(--fg);border-color:var(--acc);
  background:rgba(var(--fg-rgb),.04)}
.ctags span:hover .ic{transform:rotate(-12deg) scale(1.18)}
@media(prefers-reduced-motion:reduce),(max-width:760px){
  .ctags span{opacity:1;transform:none;transition:none}
  .ctags .ic{transition:none}
}

/* ══ § LIGHT · the weight over footage ════════════════════════════════
   The scrims are token-driven, so the light ground reuses the alphas the
   dark one was tuned with — and those were tuned for pale text over dark
   footage, which is the opposite problem. Measured against a dark frame,
   the accent came out at 2.6:1 through the thinnest part of the gradient.
   That is the red that would not read.

   The answer is weight where the copy is, not weight everywhere: flat
   heavy values made the type safe and erased the footage. Copy sits in
   the left ~45%, which stays at .92+, and the open side drops to .14 so
   the frame is still a picture. */
:root[data-theme="light"] .h-bg::after{
  background:
    linear-gradient(90deg,rgba(var(--scrim-rgb),.96) 0%,rgba(var(--scrim-rgb),.92) 45%,
      rgba(var(--scrim-rgb),.38) 72%,rgba(var(--scrim-rgb),.14) 100%),
    linear-gradient(180deg,rgba(var(--scrim-rgb),.30) 0%,rgba(var(--scrim-rgb),0) 30%,
      rgba(var(--scrim-rgb),0) 72%,rgba(var(--scrim-rgb),.44) 100%)}
:root[data-theme="light"] .bg-video::after{
  background:linear-gradient(90deg,rgba(var(--scrim-rgb),.97) 0%,rgba(var(--scrim-rgb),.92) 44%,
    rgba(var(--scrim-rgb),.40) 76%,rgba(var(--scrim-rgb),.16) 100%)}
/* type on both edges of this one, so it keeps its cover — the panel
   opacity is what lets the footage through here */
:root[data-theme="light"] .pan-v::after{
  background:linear-gradient(90deg,rgba(var(--scrim-rgb),.95) 0%,rgba(var(--scrim-rgb),.90) 44%,
    rgba(var(--scrim-rgb),.84) 100%)}
@media(max-width:880px){
  :root[data-theme="light"] .pan-v::after{background:rgba(var(--scrim-rgb),.92)}
}
@media(max-width:760px){
  :root[data-theme="light"] .bg-video::after{background:rgba(var(--scrim-rgb),.92)}
}

/* ══ § THE BRAND LINE ═════════════════════════════════════════════════
   Truthful | Mindful | Thoughtful  ·  IDEAS PLENTIFUL

   Set the way the artwork sets it. The three qualities are the lead-in at
   reading size, divided by rules rather than full stops, and the payoff is
   the bigger voice with the star on its I. Previously all four sat at one
   size with a stop after each, which made "Ideas plentiful" the fourth item
   in a list instead of the line the other three are building towards.

   One row where it fits, wrapping to two where it does not. */
.bl{display:inline-flex;flex-wrap:wrap;align-items:baseline;
  gap:clamp(8px,1vw,16px) clamp(10px,1.4vw,20px)}
.bl-top{display:inline-flex;flex-wrap:wrap;align-items:center;
  gap:clamp(8px,1vw,15px);
  font-family:Satoshi,sans-serif;font-weight:400;letter-spacing:.01em;
  font-size:clamp(13px,1.15vw,16px);color:var(--t2);text-transform:none}
/* the divider is a drawn rule, not a pipe character — it stays the same
   weight whatever face is loaded */
.bl-top i{font-style:normal;flex:none;width:1px;height:1.1em;
  background:rgba(var(--fg-rgb),.34)}
.bl-w{opacity:0;transform:translateY(6px);
  transition:opacity 520ms var(--ez),transform 520ms var(--ez)}
[data-rv].in .bl-w{opacity:1;transform:none;transition-delay:calc(var(--i)*130ms)}

.bl-pay{position:relative;display:inline-block;
  font-family:Clash,serif;font-weight:600;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1;color:var(--fg);
  font-size:clamp(19px,2.5vw,32px);
  clip-path:inset(0 100% 0 0);transition:clip-path 760ms var(--ez) .45s}
[data-rv].in .bl-pay{clip-path:inset(0 0 0 0)}
/* the star sits over the I, as it does in the artwork; em-sized so it holds
   its place at every step of the clamp above */
.bl-star{position:absolute;left:-.05em;top:-.4em;width:.36em;height:.36em}
.bl-star svg{width:100%;height:100%;fill:var(--acc)}
.bl-star{opacity:0;transform:scale(.3) rotate(-90deg);
  transition:opacity 420ms var(--ez) .95s,transform 620ms var(--ez) .95s}
[data-rv].in .bl-star{opacity:1;transform:none}

/* the hero keeps its leading accent rule; the line sits beside it */
.h-micro{display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);flex-wrap:wrap}
.h-micro::before{content:"";flex:none;width:clamp(24px,3.4vw,52px);height:2px;
  background:var(--acc)}
/* the footer carries it as the sign-off, a step larger */
.site-foot .bl{margin-top:18px}
.site-foot .bl-pay{font-size:clamp(21px,2.8vw,36px)}

@media(prefers-reduced-motion:reduce),(max-width:760px){
  .bl-w,.bl-star{opacity:1;transform:none;transition:none}
  .bl-pay{clip-path:inset(0 0 0 0);transition:none}
}

/* The hero pin is a fixed 100svh with overflow hidden, so anything that does
   not fit is clipped off the top rather than pushed down — which is what the
   motto line did on a laptop. Trim the gaps before that can happen. */
@media(max-height:840px){
  .h-sub{font-size:15px;margin-top:10px}
  .h-acts{margin-top:16px}
  .h-micro{margin-top:11px}
  .h-foot{margin-top:16px;padding-top:12px}
  .h-trust{margin-top:2px}
}
@media(max-height:700px){
  .h-sub{display:none}
  [data-scene="hero"] .pin{padding-top:clamp(88px,10vh,110px)}
}

/* the reply promise is the only commitment in the hero, so it carries real
   weight rather than sitting at the same level as the client list beside it */
.h-trust .rep{font-weight:700}

/* ══ § FOOTER · the current ═══════════════════════════════════════════
   The footer had no ground of its own, so the page just stopped. It now
   carries the same drifting fields the scenes use, with one extra layer
   that moves on a very long loop — an ocean, which is the claim in the
   sentence printed on top of it. */
.site-foot{position:relative;overflow:hidden}
.site-foot>.wrap{position:relative;z-index:2}
.ft-bg{z-index:0}
/* the parallax fade-to-ground assumes a scene above and below; here there
   is only below, so it fades in from the top and holds at the bottom */
.ft-bg::after{background:linear-gradient(180deg,var(--bg) 0%,transparent 34%,
  rgba(var(--fg-rgb),.02) 100%)}
.ft-tide{position:absolute;inset:-30% -20%;
  background:
    radial-gradient(58% 42% at 22% 78%,var(--glow-a),transparent 68%),
    radial-gradient(48% 36% at 78% 30%,var(--glow-b),transparent 70%);
  animation:tide 34s ease-in-out infinite alternate;will-change:transform}
@keyframes tide{
  0%   {transform:translate3d(-3%,2%,0) scale(1)}
  50%  {transform:translate3d(2%,-2%,0) scale(1.06)}
  100% {transform:translate3d(4%,3%,0) scale(1.02)}
}
@media(prefers-reduced-motion:reduce),(max-width:760px){.ft-tide{animation:none}}

/* ══ § SECTION EDGES ══════════════════════════════════════════════════
   One hairline at .09 was the only thing separating a band from the next,
   which is invisible while you are moving. Each band now announces itself:
   the rule across the top is joined by an accent segment that draws in as
   the band arrives, and every other band sits on a faintly different
   ground so the change registers even at speed. */
.sec{position:relative}
.sec + .sec{border-top:0}
.sec + .sec::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(var(--fg-rgb),.13)}
.sec + .sec::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:var(--acc);transition:width 900ms var(--ez) 120ms}
.sec + .sec.sec-in::after{width:clamp(56px,7vw,132px)}

/* the alternating ground — authored .alt still wins where it is used */
.sec:nth-of-type(even):not(.alt){background:rgba(var(--fg-rgb),.028)}

/* Where one movement ends and the next begins. A rule and an accent segment
   that draws across it — no text, no panel, nothing that can sit on top of
   the copy the way a bar at the top of a pinned stage does. */
.scene + .scene::before,.scene + .sec::before,.sec + .scene::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(var(--fg-rgb),.18);z-index:9}
.scene + .scene::after,.scene + .sec::after,.sec + .scene::after{
  content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--acc);
  z-index:10;transition:width 900ms var(--ez) .15s}
.sec-in.scene::after,.sec-in.sec::after{width:clamp(60px,8vw,150px)}

@media(prefers-reduced-motion:reduce),(max-width:760px){
  .sec + .sec::after{width:clamp(56px,7vw,132px);transition:none}
}

/* the wayfinder is fixed bottom-left and the footer's legal line lands in
   exactly that spot, so it stands down once the footer is on screen */
.where.at-foot{opacity:0;transform:translateY(10px)}

/* ══ § VI · THE PROJECTOR HEAD ════════════════════════════════════════
   The band introduced an archive it never described, and everything sat
   in one narrow column with the right half empty. The index on the right
   is counted off films() in PHP, so it cannot drift from the strip. */
.proj-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(28px,4vw,72px);align-items:end}
.proj-h{font-family:Clash,serif;font-weight:600;font-size:clamp(30px,5.4vw,76px);
  letter-spacing:-.04em;line-height:.94;max-width:16ch}
.proj-lede{max-width:52ch;margin-top:16px;color:var(--t3);font-size:17px}

.proj-idx{border-left:1px solid rgba(var(--fg-rgb),.14);padding-left:clamp(18px,2.2vw,34px)}
.proj-idx h3{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);font-weight:400;margin-bottom:16px}
.proj-idx ul{list-style:none;display:grid;gap:9px}
.proj-idx li{position:relative;display:grid;grid-template-columns:1fr auto;
  align-items:baseline;gap:12px;padding-bottom:8px}
.proj-idx li span{font-size:14.6px;color:var(--t3)}
.proj-idx li b{font-family:PMono,monospace;font-size:var(--fs-lab);color:var(--acc);
  font-weight:500}
/* the bar is the count made visible — it grows from nothing as the band lands */
.proj-idx li i{position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--acc);
  opacity:.55;transition:width 820ms var(--ez)}
.proj-idx li::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:rgba(var(--fg-rgb),.12)}
.proj-idx li i{z-index:1}
.proj-idx[data-rv].in li i{width:var(--w)}
.proj-idx[data-rv].in li:nth-child(n) i{transition-delay:.15s}
.proj-idx>p{margin-top:16px;font-family:PMono,monospace;font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer)}

/* one column below the split, and the index stops being a sidebar */
@media(max-width:1000px){
  .proj-head{grid-template-columns:1fr;gap:clamp(24px,3.4vw,40px);align-items:start}
  .proj-idx{border-left:0;padding-left:0;padding-top:22px;
    border-top:1px solid rgba(var(--fg-rgb),.14)}
  .proj-idx ul{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
    column-gap:clamp(18px,3vw,40px)}
}
@media(prefers-reduced-motion:reduce),(max-width:760px){
  .proj-idx li i{width:var(--w);transition:none}
}

/* ══ § VI · THE REEL ══════════════════════════════════════════════════
   One film at full bleed under the strip. A facade, not an embed: the
   still is YouTube's own and the iframe is only built on click, by the
   same delegated [data-yt] handler the strip uses \u2014 which is what keeps
   the promise printed two paragraphs above it. */
/* svh, so a phone's collapsing address bar does not resize the band mid-scroll.
   The floor keeps it usable on a short landscape phone; the ceiling stops it
   swallowing a desktop screen whole. */
.reelx{position:relative;margin-top:clamp(30px,4vw,60px);width:100%;
  height:clamp(360px,72svh,760px);overflow:hidden;cursor:pointer;
  display:grid;place-items:center;isolation:isolate}
.reelx-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.25) brightness(.72) contrast(1.05);
  transform:scale(1.03);transition:transform 1.4s var(--ez),filter 700ms var(--ez)}
.reelx:hover .reelx-still{transform:scale(1.07);filter:grayscale(0) brightness(.78) contrast(1.05)}
/* the copy sits dead centre, so the weight is centred too rather than raked
   to one side the way the scene scrims are */
.reelx-scrim{position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 50% 50%,rgba(var(--scrim-rgb),.42) 0%,
    rgba(var(--scrim-rgb),.72) 60%,rgba(var(--scrim-rgb),.88) 100%)}


/* An iframe cannot be object-fit, so it is oversized past whichever edge is
   tight and pulled back to centre — the same result as cover, and the reason
   the reel is not letterboxed into a black band on a portrait phone.
   pointer-events:none so the click reaches .reelx and opens the lightbox. */
.reelx-vid{position:absolute;inset:0;z-index:0;overflow:hidden;
  opacity:0;transition:opacity 900ms var(--ez)}
.reelx-vid.on{opacity:1}
.reelx-vid iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78svh;border:0;
  pointer-events:none;filter:grayscale(.2) brightness(.74) contrast(1.05)}
/* the poster stays under it and shows until the frame fades in */
.reelx-still{z-index:0}
.reelx-in{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;
  padding-inline:var(--gut)}
.reelx-h{font-family:Clash,serif;font-weight:700;letter-spacing:-.035em;line-height:.92;
  font-size:clamp(30px,6.4vw,88px);color:var(--fg);text-transform:uppercase}
.reelx-meta{margin-top:16px;font-family:PMono,monospace;font-size:var(--fs-lab);
  letter-spacing:.18em;text-transform:uppercase;color:var(--t2)}

/* the badge turns slowly; the disc inside it is the actual play target */
.reelx-badge{position:relative;display:grid;place-items:center;
  width:clamp(112px,13vw,158px);aspect-ratio:1;margin-bottom:clamp(16px,2.4vw,34px)}
.reelx-badge svg{position:absolute;inset:0;width:100%;height:100%;
  animation:reelxSpin 22s linear infinite}
.reelx-badge text{font-family:PMono,monospace;font-size:9.4px;letter-spacing:.22em;
  text-transform:uppercase;fill:var(--fg)}
.reelx-badge i{width:34%;aspect-ratio:1;border-radius:50%;background:var(--acc);
  position:relative;transition:transform 420ms var(--ez)}
.reelx-badge i::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-left:13px solid var(--on-acc);border-top:9px solid transparent;
  border-bottom:9px solid transparent}
.reelx:hover .reelx-badge i{transform:scale(1.12)}
@keyframes reelxSpin{to{transform:rotate(360deg)}}

.reelx-corner{position:absolute;z-index:2;top:clamp(16px,2.4vw,34px);right:clamp(16px,2.4vw,34px);
  width:clamp(66px,7vw,96px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(var(--fg-rgb),.34);display:grid;place-items:center;
  font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg);transition:border-color 300ms,background 300ms}
.reelx:hover .reelx-corner{border-color:var(--acc);background:rgba(var(--fg-rgb),.06)}

/* the strip below, read as a filmstrip: one mark per playable film */
.reelx-bar{position:absolute;z-index:2;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:clamp(12px,2vw,26px);
  padding:clamp(12px,1.6vw,20px) var(--gut) clamp(14px,1.8vw,24px)}
.reelx-tc{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26ch}
.reelx-track{position:relative;flex:1;height:3px;background:rgba(var(--fg-rgb),.22)}
.reelx-track i{position:absolute;top:-2px;left:var(--x);width:10px;height:7px;
  background:var(--acc);transform:translateX(-50%);opacity:.9}
.reelx:focus-visible{outline:2px solid var(--acc);outline-offset:-4px}

@media(max-width:760px){
  .reelx{height:clamp(320px,58svh,470px)}
  .reelx-bar{gap:10px;padding-bottom:12px}
  .reelx-tc:last-child{display:none}
  .reelx-h{font-size:clamp(24px,7.4vw,38px)}
  .reelx-meta{margin-top:11px;font-size:var(--fs-micro);letter-spacing:.14em}
  .reelx-badge{width:clamp(84px,22vw,110px);margin-bottom:16px}
  .reelx-corner{display:none}
}
/* a phone held sideways has almost no height to give away */
@media(max-height:520px) and (orientation:landscape){
  .reelx{height:92svh}
  .reelx-badge{width:74px;margin-bottom:10px}
  .reelx-h{font-size:clamp(22px,5vw,34px)}
}
@media(prefers-reduced-motion:reduce),(max-width:760px){
  .reelx-badge svg{animation:none}
  .reelx-still{transition:none;transform:none}
}

/* ══ § THE STUDIO ═════════════════════════════════════════════════════
   Three ways to book, compared by a bar rather than by reading three
   paragraphs. This replaced a drawn floor plan: a plan needs room names
   and an area that nobody has confirmed yet, so it was six labelled boxes
   asserting things that might not be true. */
.studio{position:relative;overflow:hidden}
.studio>.wrap{position:relative;z-index:2}
.std-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(20px,3vw,56px);align-items:end;margin-bottom:clamp(30px,4vw,56px)}
.std-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(22px,3vw,52px);align-items:stretch}

.blks{display:grid;gap:1px;background:rgba(var(--fg-rgb),.12);
  border:1px solid rgba(var(--fg-rgb),.12);align-content:start}
.blk{position:relative;background:var(--bg);text-align:left;cursor:pointer;
  display:grid;gap:12px;padding:clamp(18px,2.2vw,28px);
  opacity:0;transform:translateY(10px);
  transition:opacity 520ms var(--ez),transform 520ms var(--ez),background 300ms var(--ez)}
.sec-in .blk{opacity:1;transform:none;transition-delay:calc(var(--i)*110ms + 200ms)}
.blk:hover{background:rgba(var(--fg-rgb),.045)}
.blk.on{background:rgba(var(--fg-rgb),.06)}
/* the live block keeps a rule down its edge, so it reads without colour alone */
.blk.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc)}

.blk-top{display:flex;align-items:baseline;gap:.7em}
.blk-top b{font-family:PMono,monospace;font-size:var(--fs-lab);letter-spacing:.14em;
  color:var(--acc);font-weight:500}
.blk-top em{font-style:normal;font-family:Clash,serif;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(19px,2.1vw,28px);color:var(--fg)}
.blk-meta{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dimmer)}

/* one working day, drawn. Several bars mean several days. */
.blk-bar{display:grid;gap:4px}
.blk-bar i{display:block;height:6px;width:0;background:rgba(var(--fg-rgb),.22);
  transition:width 760ms var(--ez),background 300ms var(--ez)}
.sec-in .blk-bar i{width:var(--w);transition-delay:calc(var(--i)*110ms + var(--d)*90ms + 460ms)}
.blk.on .blk-bar i{background:var(--acc)}

.std-side{display:flex;flex-direction:column;
  border-left:1px solid rgba(var(--fg-rgb),.14);padding-left:clamp(18px,2.2vw,32px)}
.bdet{display:none}
.bdet.on{display:block;animation:zIn 420ms var(--ez)}
@keyframes zIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bdet-no{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.2em;
  color:var(--acc);display:block;margin-bottom:9px}
.bdet h3{font-family:Clash,serif;font-weight:600;letter-spacing:-.025em;
  font-size:clamp(22px,2.6vw,34px);margin-bottom:11px}
.bdet p{font-size:16px;line-height:1.6;color:var(--t3);max-width:40ch}
.bdet ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.bdet li{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.07em;
  border:1px solid rgba(var(--fg-rgb),.22);padding:5px 10px;color:var(--t3)}
.std-cta{margin-top:auto;padding-top:clamp(22px,3vw,38px)}
.std-cta .btn{width:100%;justify-content:center}
.std-hint{margin-top:12px;font-family:PMono,monospace;font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer)}

@media(max-width:1000px){
  .std-head,.std-grid{grid-template-columns:1fr}
  .std-side{border-left:0;padding-left:0;padding-top:22px;
    border-top:1px solid rgba(var(--fg-rgb),.14)}
}
@media(prefers-reduced-motion:reduce),(max-width:760px){
  .blk{opacity:1;transform:none;transition:none}
  .blk-bar i{width:var(--w);transition:none}
  .bdet.on{animation:none}
}

/* ── the booking dialog ─────────────────────────────────────────────── */
.bk{position:fixed;inset:0;z-index:240;background:var(--overlay);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  overflow-y:auto;padding:clamp(16px,4vw,54px);
  opacity:0;pointer-events:none;transition:opacity 320ms var(--ez)}
.bk.on{opacity:1;pointer-events:auto}
.bk-box{max-width:680px;margin-inline:auto;position:relative;
  border:1px solid rgba(var(--fg-rgb),.22);background:var(--bg);
  padding:clamp(24px,3.4vw,44px)}
.bk-close{position:absolute;top:12px;right:12px;font-family:PMono,monospace;
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(var(--fg-rgb),.3);padding:7px 12px;color:var(--t3)}
.bk-close:hover{border-color:var(--acc);color:var(--acc)}
.bk-box h3{font-family:Clash,serif;font-weight:600;letter-spacing:-.03em;
  font-size:clamp(26px,3.4vw,40px);margin-bottom:10px}
.bk-lede{color:var(--t3);font-size:16.4px;line-height:1.55;margin-bottom:24px;max-width:52ch}
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:600px){.bk-row{grid-template-columns:1fr}}
.bk .btn{width:100%;justify-content:center;margin-top:6px}

/* ── the footer wordmark ──────────────────────────────────────────────
   Two stops on one gradient, clipped to the glyphs: the lower half is the
   live text colour, the upper half a hairline tint. The box is twice the
   height of the text, so sliding the background up fills the letters from
   the baseline as the footer lands. Deliberately smaller than a full-bleed
   wordmark — it signs the page off, it does not restate the whole brand. */
.wordmark{font-family:Clash,serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.04em;line-height:.84;
  font-size:clamp(34px,9.4vw,138px);
  margin:clamp(30px,4vw,60px) 0 -.1em;
  background:linear-gradient(to top,var(--fg) 50%,rgba(var(--fg-rgb),.13) 50%);
  background-size:100% 200%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:background-position 1100ms var(--ez)}
.wordmark.in{background-position:0 100%}
/* [data-rv] hides its target by default; this one only wants the .in class */
.wordmark[data-rv]{opacity:1;transform:none}
.wordmark[data-rv].in{animation:none}
@media(prefers-reduced-motion:reduce),(max-width:760px){
  .wordmark{background-position:0 100%;transition:none}
}

/* ══ § VII · THE EIGHT WEEKS, AS A TIMELINE ═══════════════════════════
   This was a 420vh pinned rail that dragged the four steps sideways past
   a fixed marker — you could only ever read one, it took four screens of
   scroll to get through, and on a phone it was a scroll-jack fighting the
   thumb. All four are on screen together now; the section is its own
   height and the scroll belongs to the visitor again. */
.scene.tl{height:auto;padding-block:clamp(60px,8vw,120px);position:relative}
.scene.tl>.wrap,.scene.tl .tl-wrap{position:relative;z-index:2}
.tl-h{max-width:14ch}

/* full bleed: a timeline that stops short of both edges leaves a dead strip
   down the right, and the four columns have to carry the whole band anyway */
.tl-wrap{padding-inline:var(--gut)}
.tl-line{position:relative;height:2px;background:rgba(var(--fg-rgb),.16);margin-bottom:2px}
.tl-fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--acc);opacity:.5}
.tl-play{position:absolute;top:-6px;left:0;width:3px;height:14px;background:var(--acc);
  transform:translateX(-1px)}

.tl-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(var(--fg-rgb),.12)}
.step{position:relative;isolation:isolate;background:var(--bg);
  display:flex;flex-direction:column;
  padding:clamp(20px,2.2vw,30px) clamp(16px,1.8vw,26px) clamp(26px,3vw,38px);
  opacity:.42;transition:opacity 620ms var(--ez),background 620ms var(--ez)}
/* once a column has lit it stays lit — see the latch in site.js */
.step.on{opacity:1;background:rgba(var(--fg-rgb),.045)}
/* the decision line sits on the floor of every column, so the four read as
   one band rather than four ragged ones of different heights */
.step-dec{margin-top:auto}
/* the mark sits behind the copy and only surfaces on the live column */
.step-art{position:absolute;right:clamp(12px,1.4vw,20px);top:clamp(12px,1.4vw,20px);
  z-index:-1;opacity:0;transform:scale(.9);
  transition:opacity 620ms var(--ez),transform 620ms var(--ez)}
.step-art .dna-mk{width:clamp(52px,5vw,78px);height:auto;margin:0}
.step.on .step-art{opacity:.5;transform:none}

.step-wk{display:inline-flex;align-items:baseline;gap:.5em;
  font-family:PMono,monospace;font-size:var(--fs-lab);letter-spacing:.16em;
  text-transform:uppercase;color:var(--t3);font-weight:500}
.step-wk b{color:var(--acc);font-weight:700;font-size:1.3em;letter-spacing:.06em}
.step-wk i{font-style:normal;color:var(--acc);opacity:.55}
.step h4{font-family:Clash,serif;font-weight:600;letter-spacing:-.03em;
  font-size:clamp(22px,2.4vw,36px);margin:12px 0 10px}
.step p{font-size:15.6px;line-height:1.6;color:var(--t3);max-width:34ch;padding-bottom:18px}
.step-dec{padding-left:12px;border-left:2px solid var(--acc);
  font-family:PMono,monospace;font-size:14px;line-height:1.6;
  color:var(--acc);font-weight:500;max-width:32ch}

/* four columns is two on a tablet and one on a phone — the steps are read in
   order either way, so nothing about the sequence is lost */
@media(max-width:1080px){
  .tl-steps{grid-template-columns:repeat(2,1fr)}
  .step{opacity:1}
}
@media(max-width:620px){
  .tl-steps{grid-template-columns:1fr}
  .step-art{position:static;opacity:.6;transform:none;display:block;margin-bottom:12px}
  .step p,.step-dec{max-width:none}
}
@media(prefers-reduced-motion:reduce),(max-width:760px){
  .step{opacity:1;transition:none}
  .step-art{opacity:.5;transform:none;transition:none}
}

/* ── the play marks, alive ────────────────────────────────────────────
   A ring goes out from the disc on a long loop, so the control reads as
   something you can press rather than a printed icon. */
.frm .play::before{transition:transform 320ms var(--ez),background 320ms var(--ez)}
.frm .play i{position:absolute;top:50%;left:50%;width:clamp(38px,4vw,52px);aspect-ratio:1;
  margin:calc(clamp(38px,4vw,52px) / -2) 0 0 calc(clamp(38px,4vw,52px) / -2);
  border-radius:50%;border:1px solid rgba(var(--fg-rgb),.7);opacity:0;
  animation:frmPing 3.2s ease-out infinite}
.frm:hover .play::before{transform:scale(1.12);background:var(--acc)}
@keyframes frmPing{
  0%   {transform:scale(.85);opacity:.65}
  70%  {transform:scale(1.7);opacity:0}
  100% {transform:scale(1.7);opacity:0}
}
/* the big corner mark turns, and its ring pulses out with it */
.reelx-corner{overflow:visible}
.reelx-corner::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid var(--acc);opacity:0;animation:reelxPing 3s ease-out infinite}
@keyframes reelxPing{
  0%   {transform:scale(1);opacity:.7}
  70%  {transform:scale(1.35);opacity:0}
  100% {transform:scale(1.35);opacity:0}
}

/* ── a frame plays where it sits ──────────────────────────────────────
   The strip already pauses under the pointer, so the frame you are on
   holds still and starts. pointer-events stay off the iframe, or the
   click would land on YouTube instead of opening the lightbox. */
.frm .win iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  z-index:2;pointer-events:none;opacity:0;transition:opacity 420ms var(--ez)}
.frm.live .win iframe{opacity:1}
.frm.live .play{opacity:0;transition:opacity 260ms var(--ez)}

@media(prefers-reduced-motion:reduce),(max-width:760px){
  .frm .play i,.reelx-corner::after{animation:none}
}

/* ── the timeline marks actually draw ─────────────────────────────────
   .dr paths sit at stroke-dashoffset:1 until something un-offsets them,
   and the only rule doing that was scoped to .dna>div.in. Inside a step
   that never matched, so every mark here was rendering as nothing but a
   faint grid — which is why the band looked bare. */
.step .dna-mk .dr{stroke-dashoffset:1}
.step.on .dna-mk .dr{stroke-dashoffset:0;transition-delay:calc(var(--i)*90ms + 220ms)}
.step.on .dna-mk .dot{transform:scale(1);transition-delay:calc(var(--i)*90ms + 700ms)}

/* ── and the column answers the pointer ───────────────────────────────
   A rule wipes across the top, the ground lifts, the number steps up and
   the mark comes forward and thickens. The playhead moves to whichever
   column you are on, so the line reads as a control, not a decoration. */
.step{cursor:default}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--acc);transform:scaleX(0);transform-origin:left;
  transition:transform 480ms var(--ez)}
.step:hover::before{transform:scaleX(1)}
.step:hover{background:rgba(var(--fg-rgb),.07)}
.step:hover .step-art{opacity:.95;transform:scale(1.06) rotate(-3deg)}
.step:hover .dna-mk .dr{stroke-width:2.8}
.step:hover .step-wk b{transform:translateY(-2px)}
.step-wk b{display:inline-block;transition:transform 320ms var(--ez)}
.step h4{transition:color 300ms var(--ez)}
.step:hover h4{color:var(--acc)}
/* the mark drifts a little on its own so the band is never completely still */
.step.on .step-art{animation:stepFloat 7s ease-in-out infinite alternate}
@keyframes stepFloat{to{transform:translateY(-6px)}}
.step:hover .step-art{animation:none}

@media(prefers-reduced-motion:reduce),(max-width:760px){
  .step .dna-mk .dr,.step.on .dna-mk .dr{stroke-dashoffset:0;transition:none}
  .step.on .dna-mk .dot{transform:scale(1);transition:none}
  .step.on .step-art{animation:none}
  .step::before{transition:none}
}

/* ══ § BANDS ══════════════════════════════════════════════════════════
   One divider, used everywhere, instead of each block bringing its own.
   That is what produced the double rule under the objections: the list
   closed with a border-bottom and the next block opened with a
   border-top, with its margin stranded between the two.

   A band states what it is, draws its own rule, and never touches the
   one above it. */
.band{position:relative;display:block;
  margin-top:clamp(48px,6vw,92px);padding-top:clamp(26px,3vw,42px);
  border-top:1px solid rgba(var(--fg-rgb),.14)}
/* the accent segment that says a new thing has started */
.band::before{content:"";position:absolute;left:0;top:-1px;height:3px;width:0;
  background:var(--acc);transition:width 820ms var(--ez)}
.band.band-in::before{width:clamp(52px,6vw,120px)}
.band-lab{display:flex;align-items:center;gap:10px;margin-bottom:clamp(18px,2.2vw,30px);
  font-family:PMono,monospace;font-size:var(--fs-lab);letter-spacing:.18em;
  text-transform:uppercase;color:var(--t3);font-weight:500}
.band-lab b{color:var(--acc);font-weight:400}

/* One heading shape for every band that opens with a statement. These were
   single columns with a display-size heading on the left and nothing at all
   on the right, on the widest bands on the page. */
.band-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(20px,3vw,64px);align-items:end;margin-bottom:clamp(30px,4vw,56px)}
.band-head h2{font-family:Clash,serif;font-weight:600;font-size:clamp(30px,5.4vw,76px);
  letter-spacing:-.04em;line-height:.94;max-width:15ch}
.band-head p{font-size:clamp(15.5px,1.4vw,18px);line-height:1.6;color:var(--t3);max-width:46ch}
@media(max-width:900px){
  .band-head{grid-template-columns:1fr;gap:16px;align-items:start}
}
@media(prefers-reduced-motion:reduce),(max-width:760px){
  .band::before{width:clamp(52px,6vw,120px);transition:none}
}

/* ══ § THE KAIROS MOMENT ══════════════════════════════════════════════
   Drawn in SVG, not placed as an image: sharp at any size, it turns with
   the theme, and the six words come off kairos_cycle() so the picture can
   never disagree with the list beside it.
   ══════════════════════════════════════════════════════════════════════ */
.kmx{position:relative;overflow:hidden}
.kmx>.wrap{position:relative;z-index:2}
.km-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(26px,4vw,70px);align-items:center}
@media(max-width:960px){.km-wrap{grid-template-columns:1fr}}

/* Two drawings of the same six words. The wide one has room for labels at
   three and nine o'clock; the narrow one gives that room by shrinking the
   ring instead of shrinking the type, so every word survives a phone. */
.km{width:100%;max-width:720px;margin-inline:auto}
.km-svg{display:block;width:100%;height:auto}
.km-wide{aspect-ratio:540/400}
.km-tight{aspect-ratio:620/560;display:none}
@media(max-width:860px){
  .km-wide{display:none}
  .km-tight{display:block}
  .km{max-width:460px}
}

.km-track{fill:none;stroke:rgba(var(--fg-rgb),.12);stroke-width:9}
.km-draw{fill:none;stroke:var(--fg);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transform:rotate(-90deg);transform-origin:var(--cx) var(--cy);
  transition:stroke-dashoffset 1600ms var(--ez) .2s}
[data-rv].in .km-draw{stroke-dashoffset:0}

/* font-size comes from the markup, in viewBox units, so each geometry sets
   its own — 15 where there is room, 27 where there is not */
.km-lbl{fill:var(--t2);font-family:Satoshi,sans-serif;font-weight:500;
  opacity:0;transition:opacity 520ms var(--ez),fill 240ms var(--ez)}
[data-rv].in .km-lbl{opacity:1;transition-delay:calc(var(--i)*140ms + 900ms)}
.km-lbl.lit{fill:var(--acc)}

/* only ever scale here — the parent group owns where it sits */
.km-star{fill:var(--acc);transform-box:fill-box;transform-origin:center;
  opacity:0;transform:scale(.4);
  transition:opacity 500ms var(--ez) .9s,transform 700ms var(--ez) .9s}
[data-rv].in .km-star{opacity:1;transform:scale(1)}

.km-arc{fill:none;stroke:var(--fg);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1100ms var(--ez) 1.3s}
[data-rv].in .km-arc{stroke-dashoffset:0}
.km-inner{fill:var(--t3);font-family:Satoshi,sans-serif;font-weight:500;
  opacity:0;transition:opacity 480ms var(--ez) 2.1s}
[data-rv].in .km-inner{opacity:1}

.km-h{font-family:Clash,serif;font-weight:600;letter-spacing:-.03em;line-height:1;
  font-size:clamp(26px,3.6vw,50px);margin-bottom:14px}
.km-lede{font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:var(--t3);max-width:46ch}
.km-lede b{color:var(--acc);font-weight:500}
.km-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:9px 22px;margin-top:24px;max-width:34ch}
.km-list li{display:flex;align-items:baseline;gap:11px;cursor:default;
  padding-bottom:7px;border-bottom:1px solid rgba(var(--fg-rgb),.12);
  transition:border-color 240ms var(--ez)}
.km-list li b{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  color:var(--acc);font-weight:500}
.km-list li span{font-size:15.6px;color:var(--t2);transition:color 240ms var(--ez)}
.km-list li:hover{border-color:var(--acc)}
.km-list li:hover span{color:var(--acc)}

.km-h{font-family:Clash,serif;font-weight:600;letter-spacing:-.03em;line-height:1;
  font-size:clamp(26px,3.6vw,50px);margin-bottom:14px}
.km-lede{font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:var(--t3);max-width:46ch}
.km-lede b{color:var(--acc);font-weight:500}
.km-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:9px 22px;margin-top:24px;max-width:34ch}
.km-list li{display:flex;align-items:baseline;gap:11px;cursor:default;
  padding-bottom:7px;border-bottom:1px solid rgba(var(--fg-rgb),.12);
  transition:border-color 240ms var(--ez)}
.km-list li b{font-family:PMono,monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  color:var(--acc);font-weight:500}
.km-list li span{font-size:15.6px;color:var(--t2);transition:color 240ms var(--ez)}
.km-list li:hover{border-color:var(--acc)}
.km-list li:hover span{color:var(--acc)}


@media(prefers-reduced-motion:reduce),(max-width:760px){
  .km-lbl,.km-inner{opacity:1;transition:none}
  .km-star{opacity:1;transform:scale(1);transition:none}
  .km-draw,.km-arc{stroke-dashoffset:0;transition:none}
}

/* ── the social marks, in their own colours ───────────────────────────
   Each network's own hue, but not its raw hex. Measured against both
   grounds, every one of the four falls under 4.5:1 in one theme or the
   other — LinkedIn blue disappears on the dark ground at 3.50, and
   Instagram, Facebook and YouTube all fail on the cream at 3.6–3.9.

   So each carries two values: lifted for the dark ground, deepened for
   the light one, hue held. Still recognisably theirs, and readable in
   both. Lowest of the eight is 5.13:1.                                  */
:root{
  --soc-instagram:#f4607c; --soc-facebook:#4e96f7;
  --soc-linkedin:#3b92e0;  --soc-youtube:#ff4a4a;
}
:root[data-theme="light"]{
  --soc-instagram:#c22b47; --soc-facebook:#0b5fcb;
  --soc-linkedin:#0a5aab;  --soc-youtube:#c50000;
}
.ic.si .f{fill:currentColor;stroke:none}
.ft-soc{display:grid;gap:3px;margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(var(--fg-rgb),.1)}
.ft-soc a{display:inline-flex;align-items:center;gap:11px;width:fit-content;
  color:var(--soc);transition:color 240ms var(--ez)}
.ft-soc a[data-soc="instagram"]{--soc:var(--soc-instagram)}
.ft-soc a[data-soc="facebook"] {--soc:var(--soc-facebook)}
.ft-soc a[data-soc="linkedin"] {--soc:var(--soc-linkedin)}
.ft-soc a[data-soc="youtube"]  {--soc:var(--soc-youtube)}
/* both the mark and the word carry it — currentColor does the work, so the
   icon needs no colour of its own */
.ft-soc .si{width:17px;height:17px;transition:transform 320ms var(--ez)}
.ft-soc a:hover .si{transform:translateY(-2px) scale(1.08)}
.ft-soc a:hover{filter:brightness(1.15)}
/* on the contact page the row sits inside .ct-info, whose links are set at
   display size — the socials are a secondary list there, not headlines */
.ct-soc{margin-top:18px;padding-top:16px}
.ct-info .ct-soc a{font-family:PMono,monospace;font-size:var(--fs-lab);
  letter-spacing:.06em;font-weight:400}