/* ══ Picture Lock, the agency page (11 Oct 2026) ══════════════════════════════════════════════════════════════════════
   Owner, 5:27pm: "make the website WHITE for sure and really sick ... the 24/7 help, onboarding flows, talk about how AI
   runs it and why it's GOOD and how they pay not as much ... make it appeal to YC a bit ... the ENGINE IS KEY".

   The type is the selling page's own: Newsreader (light) for display, Geist for reading, Geist Mono for labels and code.
   The ground is white, alternating with one cool grey; the ink is the brand's near-black; the one accent is the brand's
   gold. The colour on the page is the videos'.

   HOW IT STAYS TRUE. Every number, price, credit and list of videos sits between <!-- agency:NAME --> markers and is written
   by build_agency.py from the code or from a file a job wrote. The sentences are in the present only where the thing was
   found working in the code on 11 Oct, and say "you'll" of the rest.

   Plain CSS and vanilla JS ports of open components, each credited where it is drawn:
     bento grid ......... Aceternity UI (Manu Arora; free for personal and commercial use)   the cells of "why" and "the engine"
     animated beam ...... Magic UI (MIT)            the light on the lines of the engine's drawing
     number ticker ...... Magic UI (MIT)            the counted numbers roll into place once
     border beam ........ Magic UI (MIT)            one light on the edge of the stage in "watch it work", and nowhere else
     animated tabs ...... Motion Primitives, "Animated Background" (MIT)   the line that fills under the step that is playing
   Not used: a marquee of reels. There are four real videos; a marquee would have to repeat them to move. (The wall of LOOKS on
   the Motion page is a marquee, and only because there are sixteen different looks: see "round four" at the foot of this sheet.)
   One sheet and one script (agency.css, agency.js) serve all seven pages; the bar, the nav and the footer are stamped into each
   page by build_agency.py, so they cannot drift.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#FFFFFF; --alt:#F4F6F8; --ink:#121211; --grey:#55534E; --faint:#6C6963; --line:#E4E7EA; --line-2:#CED3D8;
  --gold:#A8782C; --gold-ink:#7D5718; --gold-lit:#E3B56E; --ok:#1F7A4C; --no:#B4441F; --night:#0E0E0D;
  --e:cubic-bezier(0.23,1,0.32,1); --e-io:cubic-bezier(0.77,0,0.175,1);
  --gut:clamp(20px,4.2vw,56px);
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Newsreader","PL Serif Fallback","Iowan Old Style","Palatino Linotype",Georgia,serif;
}
/* (Widths of text are in em, never ch: a ch is the width of the face's own "0", so it changed when the web font arrived and
   moved every line break with it. Geist's ch is 0.663em.) */
/* While the web fonts load, the words are set in a local face scaled to the same width (measured in a browser, 11 Oct 2026:
   Newsreader Light is 96.5% of Georgia's width, its italic 86.9% of Georgia Italic's, Geist 102.3% of Arial's). So a heading
   breaks in the same place before and after the swap, and nothing under it jumps. */
@font-face{font-family:"PL Serif Fallback";src:local("Georgia");size-adjust:96.5%;font-style:normal}
@font-face{font-family:"PL Serif Fallback";src:local("Georgia Italic"),local("Georgia-Italic");size-adjust:86.9%;font-style:italic}
@font-face{font-family:"PL Sans Fallback";src:local("Arial");size-adjust:102.3%}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16.5px/1.6 Geist,"PL Sans Fallback","Helvetica Neue",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
h1,h2,h3,p,figure,blockquote{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:300;text-wrap:balance}
h1{font-size:clamp(46px,7.6vw,116px);line-height:.95;letter-spacing:-.038em}
h2{font-size:clamp(34px,4.6vw,64px);line-height:1;letter-spacing:-.03em}
h3{font-size:clamp(23px,2.1vw,29px);line-height:1.14;letter-spacing:-.02em}
h1 em,h2 em{font-style:italic;font-weight:300}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--gut)}
section{padding-block:clamp(84px,10vw,152px)}
section[id]{scroll-margin-top:92px}
@media (max-width:920px){section[id]{scroll-margin-top:150px}}
.alt{background:var(--alt)}
.sub{color:var(--grey);font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.6;max-width:30.5em}
.fine{margin-top:16px;color:var(--faint);font-size:13px;line-height:1.55}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--gold)}
.num{font-variant-numeric:lining-nums tabular-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

/* a section's head: the heading, and the paragraph set low and to the right of it */
.head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px clamp(28px,6vw,96px);align-items:end}
@media (max-width:860px){.head{grid-template-columns:minmax(0,1fr)}}

/* buttons: a pill, and the arrow in its own circle */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 22px;border:0;border-radius:999px;font:500 15px/1 Geist,"PL Sans Fallback",system-ui,sans-serif;cursor:pointer;white-space:nowrap;
  transition:transform .14s var(--e),background-color .18s var(--e),box-shadow .18s var(--e)}
.btn:active{transform:scale(0.97)}
.btn-d{background:var(--ink);color:#fff;padding:7px 7px 7px 22px}
.btn-d .ar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);transition:transform .2s var(--e)}
.btn-o{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);background:#fff}
.btn-s{padding:10px 16px;font-size:14px}
.btn-d.btn-s{padding:10px 16px}
.duo{display:flex;flex-wrap:wrap;gap:10px}
@media (hover:hover) and (pointer:fine){.btn-d:hover{background:#000}.btn-d:hover .ar{transform:translate(2px,-2px)}.btn-o:hover{box-shadow:inset 0 0 0 1px var(--ink)}}

/* a plate in a tray: the shell holds the hairline and the padding, the plate holds the thing (concentric corners) */
.tray{padding:7px;border-radius:32px;background:rgba(18,18,17,.035);box-shadow:inset 0 0 0 1px rgba(18,18,17,.06)}
.plate{position:relative;border-radius:25px;background:#fff;box-shadow:inset 0 0 0 1px rgba(18,18,17,.06),0 1px 0 rgba(255,255,255,.9) inset,0 28px 56px -36px rgba(24,36,52,.3)}

/* ── the bar and the nav ──────────────────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:50;padding-top:14px}
.bar{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:26px;height:56px;padding:0 9px 0 20px;border-radius:999px;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);box-shadow:inset 0 0 0 1px var(--line),0 14px 30px -22px rgba(24,36,52,.35)}
@media (max-width:1256px){.bar{margin-inline:var(--gut)}}
.brand{display:inline-flex;align-items:center;gap:9px;font:600 15.5px/1 Geist,"PL Sans Fallback",system-ui,sans-serif;letter-spacing:-.03em;white-space:nowrap}
.brand .glyph{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--ink);color:#fff;font:500 9.5px/1 var(--mono);letter-spacing:-.04em}
/* the page you are on carries a small gold mark under its link (stamped by build_agency.py, so it needs no script) */
.set{position:relative;display:flex;gap:4px;margin-left:8px}
.set a{padding:10px 11px;border-radius:999px;font-size:14px;color:var(--grey);transition:color .15s var(--e),transform .13s var(--e)}
.set a:active{transform:scale(.97)}
.set a[aria-current]{position:relative;color:var(--ink)}
.set a[aria-current]::after{content:"";position:absolute;left:50%;bottom:3px;width:14px;height:2px;margin-left:-7px;border-radius:2px;background:var(--gold)}
@media (hover:hover) and (pointer:fine){.set a:hover{color:var(--ink)}}
.bar .sp{margin-left:auto}
/* on a narrow screen the links sit under the name inside the pill, on as many lines as they need: a phone still has the whole nav */
@media (max-width:920px){
  .bar{height:auto;flex-wrap:wrap;gap:0 10px;padding:8px 9px 4px 16px;border-radius:26px}
  .set{order:3;flex:0 0 100%;margin:4px 0 0 -8px;gap:0;flex-wrap:wrap}
  .set a{flex:none;padding:8px 9px 10px;font-size:13.5px}
}
@media (max-width:480px){.bar .w-lg{display:none}.bar{padding-left:16px}}

/* ── hero ─────────────────────────────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(48px,6.4vw,96px) clamp(56px,7vw,104px)}
.hero-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px clamp(28px,5vw,80px);align-items:end}
.hero .sub{color:var(--ink);max-width:26.52em}
.hero .duo{margin-top:26px}
.soon{display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;padding:7px 14px 7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);
  font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.soon i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(168,120,44,.16)}
/* the player: the real narrated film, muted until asked, with its own readout under the picture */
.player{margin-top:clamp(36px,4.6vw,64px)}
.player .plate{background:var(--night);overflow:hidden;border-radius:25px}
.screen{position:relative;aspect-ratio:16/9;background:#050505}
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.snd{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:10px 15px 10px 12px;border:0;border-radius:999px;background:rgba(14,14,13,.74);color:#fff;
  font:500 13px/1 Geist,"PL Sans Fallback",system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:transform .13s var(--e),background-color .17s var(--e)}
.snd:active{transform:scale(0.97)}
.snd:focus-visible{outline-color:#fff}
.snd .w{opacity:.35;transition:opacity .17s var(--e)}
.snd[aria-pressed="true"] .w{opacity:1}
@media (hover:hover) and (pointer:fine){.snd:hover{background:rgba(14,14,13,.92)}}
.readout{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 20px 15px;color:rgba(243,240,233,.62);font:500 10.5px/1.2 var(--mono);letter-spacing:.15em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.readout q{flex:1 1 auto;text-align:center;font:italic 300 clamp(15px,1.4vw,20px)/1.2 var(--serif);letter-spacing:0;text-transform:none;color:#F3F0E9;quotes:"\201C" "\201D"}
.readout q:empty{visibility:hidden}
.readout span{flex:0 0 auto;min-width:10em}
.readout span:last-child{text-align:right}
.player-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:14px;padding-inline:10px;color:var(--faint);font-size:13px}
@media (max-width:860px){.hero-top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.readout span:first-child{display:none}.readout q{text-align:left}.readout span{min-width:0}}
@media (prefers-reduced-motion:no-preference){
  .hero-top>*,.player{animation:rise .7s var(--e) backwards}
  .hero-top>:nth-child(2){animation-delay:.08s}.player{animation-delay:.16s}
}
@keyframes rise{from{transform:translateY(14px)}}

/* ── the work: one card a job ─────────────────────────────────────────────────────────────── */
.cases{display:grid;gap:clamp(18px,2.4vw,30px);margin-top:clamp(36px,4.4vw,60px)}
.case{padding:7px;border-radius:34px;background:rgba(18,18,17,.035);box-shadow:inset 0 0 0 1px rgba(18,18,17,.06)}
.case-in{display:grid;gap:clamp(18px,2.2vw,28px);padding:clamp(18px,2.2vw,30px) clamp(20px,2.8vw,40px) clamp(22px,2.8vw,38px);border-radius:27px;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(18,18,17,.06),0 28px 56px -36px rgba(24,36,52,.3)}
.case-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.case-k span{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink)}
.case-k i{font:400 11.5px/1 var(--mono);font-style:normal;color:var(--faint)}
.case-k .j{margin-left:auto}
/* the three frames share one height, so their widths are in the true proportion of the files: 16, 9 and 5.06 by 9 */
.trio-files{display:grid;grid-template-columns:16fr 9fr 5.0625fr;gap:clamp(14px,1.6vw,20px);align-items:start;padding:5px}
.trio-files figure{min-width:0}
.lk-core{position:relative;border-radius:18px;overflow:hidden;background:#0A0A09;box-shadow:0 0 0 1px rgba(18,18,17,.1),0 0 0 5px rgba(18,18,17,.04),0 22px 40px -24px rgba(24,36,52,.5)}
.lk-core video{display:block;width:100%;height:auto}
.case .snd{left:10px;bottom:10px;padding:8px 12px 8px 10px;font-size:12.5px}
.trio-files figcaption{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:14px 4px 0}
.trio-files figcaption b{font:500 13.5px/1.2 Geist,"PL Sans Fallback",system-ui,sans-serif}
.trio-files figcaption span{font:400 11px/1.3 var(--mono);color:var(--faint)}
.case-say{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px clamp(24px,5vw,88px);align-items:start}
.case-ask span,.case-ans span{display:block;margin-bottom:11px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.case-ask q{display:block;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(22px,2.3vw,31px);line-height:1.2;letter-spacing:-.014em;quotes:"\201C" "\201D";text-wrap:balance}
.case-ans{color:var(--grey);font-size:15.5px;line-height:1.55;max-width:29.17em}
.case-lines{grid-column:1/-1;list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.case-lines li{display:grid;gap:8px;align-content:start;min-width:0}
.case-lines img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:9px;background:#151514}
.case-lines .t{font:500 10.5px/1 var(--mono);letter-spacing:.12em;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.case-lines q{font-family:var(--serif);font-style:italic;font-weight:300;font-size:16.5px;line-height:1.28;quotes:"\201C" "\201D"}
.case-lines .more{grid-column:1/-1;font:400 11.5px/1.4 var(--mono);color:var(--faint)}
.case-score{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 34px;margin:0;padding-top:16px;border-top:1px solid var(--line)}
.case-score div{display:flex;align-items:baseline;gap:10px}
.case-score dt{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.case-score dd{margin:0;font-size:14px}
.work-by{margin-top:22px;max-width:57.02em;color:var(--grey);font-size:13.5px;line-height:1.55}
@media (max-width:860px){
  .case-say{grid-template-columns:minmax(0,1fr)}.case-k .j{margin-left:0}
  .case-lines{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:calc(clamp(20px,2.8vw,40px)*-1);padding:0 clamp(20px,2.8vw,40px) 4px;scrollbar-width:none}
  .case-lines::-webkit-scrollbar{display:none}
  .case-lines li{flex:0 0 58%;scroll-snap-align:start}.case-lines .more{flex:0 0 46%;align-self:center}
}
@media (max-width:760px){.trio-files{grid-template-columns:9fr 5.0625fr}.trio-files figure:first-child{grid-column:1/-1}}
@media (max-width:560px){.case{border-radius:28px;padding:5px}.case-in{border-radius:23px;padding:18px 16px 16px}}

/* ── around the clock: one example day ────────────────────────────────────────────────────── */
.clock-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,7vw,120px);align-items:start}
.clock-say{position:sticky;top:120px}
.clock-say .sub{margin-top:22px}
.eg{display:inline-block;margin-top:24px;padding:8px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.day{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.day li{display:grid;grid-template-columns:124px minmax(0,1fr);gap:4px 24px;padding:22px 0;border-bottom:1px solid var(--line)}
.day time{white-space:nowrap}
.day time{font:400 clamp(22px,2vw,28px)/1.1 var(--serif);font-weight:300;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.day b{display:block;font:500 16.5px/1.35 Geist,"PL Sans Fallback",system-ui,sans-serif;letter-spacing:-.01em}
.day span{display:block;margin-top:4px;color:var(--grey);font-size:14.5px;line-height:1.5}
.day .you time{color:var(--gold-ink)}
@media (max-width:860px){.clock-in{grid-template-columns:minmax(0,1fr)}.clock-say{position:static}.day li{grid-template-columns:minmax(0,1fr);gap:6px}}

/* bento grid: cells of unequal width, each a plate in a tray (a plain-CSS port of Aceternity UI's Bento Grid) */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-top:clamp(36px,4.4vw,60px)}
.bn{grid-column:span 6;min-width:0;padding:7px;border-radius:32px;background:rgba(18,18,17,.035);box-shadow:inset 0 0 0 1px rgba(18,18,17,.06)}
.bn-in{position:relative;height:100%;padding:clamp(22px,2.6vw,36px);border-radius:25px;background:#fff;box-shadow:inset 0 0 0 1px rgba(18,18,17,.06),0 28px 56px -38px rgba(24,36,52,.28)}
.bn-5{grid-column:span 5}.bn-7{grid-column:span 7}
.bn p{margin-top:13px;color:var(--grey);font-size:15.5px;line-height:1.6}
.bn .fine{font-size:13px;color:var(--faint)}
.step-n,.bn-k{display:block;margin-bottom:16px;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.panel{margin-top:22px;padding:6px 16px;border-radius:16px;background:var(--alt);box-shadow:inset 0 0 0 1px var(--line)}
.rows{list-style:none;margin:0;padding:0}
.rows li{padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.4}
.rows li:last-child{border-bottom:0}
/* a client's notes, and what was understood from each line */
.brain-rows{list-style:none;margin:0;padding:0}
.brain-rows li{display:grid;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);align-items:baseline;gap:4px 10px;padding:12px 0;border-bottom:1px solid var(--line)}
.brain-rows li:last-child{border-bottom:0}
.brain-rows li::before{content:"";grid-column:2;grid-row:1;justify-self:center;align-self:center;width:14px;height:1px;background:var(--gold)}
.brain-rows q{grid-column:1;grid-row:1;font-family:var(--serif);font-style:italic;font-weight:300;font-size:17px;line-height:1.3;quotes:"\201C" "\201D"}
.brain-rows span{grid-column:3;grid-row:1;font:400 12px/1.45 var(--mono);color:var(--gold-ink)}
/* the stages of a job, in the code's own order: our own checks are the lit ones */
.rail{list-style:none;margin:0;padding:10px 0;display:flex;flex-wrap:wrap;gap:5px}
.rail li{padding:5px 8px;border-radius:6px;background:#fff;font:400 11px/1 var(--mono);color:var(--faint);box-shadow:inset 0 0 0 1px var(--line)}
.rail li.on{color:#fff;background:var(--ink);box-shadow:none}
.chips{list-style:none;margin:0;padding:10px 0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:9px 14px;border-radius:999px;background:#fff;font:500 13.5px/1 Geist,"PL Sans Fallback",system-ui,sans-serif;box-shadow:inset 0 0 0 1px var(--line-2)}
.chips.acts li:first-child{background:var(--ink);color:#fff;box-shadow:none}
.panel-k{display:block;padding:12px 0 2px;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.bn-quote{margin:20px 0 0;padding:0 0 0 18px;border-left:1px solid var(--gold);font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(19px,1.7vw,23px);line-height:1.34}
.same-big{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 22px;margin-top:22px!important;padding-top:20px;border-top:1px solid var(--line)}
.same-big b{font-family:var(--serif);font-weight:300;font-size:clamp(44px,5vw,72px);line-height:.95;letter-spacing:-.03em;color:var(--ink);white-space:nowrap;font-variant-numeric:lining-nums}
.same-big span{font-size:15px;line-height:1.5;color:var(--grey)}
.bn-ask{display:grid;gap:9px;margin-top:20px!important}
.bn-ask span{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.bn-ask q{font-family:var(--serif);font-style:italic;font-weight:300;font-size:21px;line-height:1.25;color:var(--ink);quotes:"\201C" "\201D"}
.bn-scroll{margin-top:16px;overflow-x:auto;scrollbar-width:thin}
.bn-report{width:100%;min-width:430px;border-collapse:collapse;font-size:13.5px}
.bn-report th,.bn-report td{padding:10px 10px 10px 0;border-top:1px solid var(--line);text-align:left;font-weight:400;vertical-align:baseline}
.bn-report thead th{border-top:0;padding-top:0;font:500 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.bn-report td{font:400 12.5px/1.4 var(--mono);color:var(--grey);font-variant-numeric:tabular-nums;white-space:nowrap}
.bn-report td:last-child{text-align:right;padding-right:0}
.bn-report td span{display:inline-block;padding:4px 8px;border-radius:999px;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ok);background:rgba(31,122,76,.1)}
.bn-report .no th,.bn-report .no td{color:var(--no)}
.bn-report .no td span{color:#fff;background:var(--no)}
.bn-verdict q{color:var(--ink);quotes:"\201C" "\201D"}
.bn-verdict b{font-weight:500;color:var(--no)}
.bn-verdict .z{color:var(--ink)}
.kept{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.kept li{padding:8px 12px;border-radius:999px;font-size:13.5px;line-height:1;box-shadow:inset 0 0 0 1px var(--line-2)}
.looks{display:flex;gap:8px;margin-top:20px}
.looks img{width:64px;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:10px;background:#151514;box-shadow:0 0 0 1px rgba(18,18,17,.1)}
@media (max-width:980px){.bn,.bn-5,.bn-7{grid-column:1/-1}}
@media (max-width:560px){.bn{border-radius:26px;padding:5px}.bn-in{border-radius:21px;padding:22px 18px}
  .brain-rows li{grid-template-columns:minmax(0,1fr);gap:6px}.brain-rows li::before{display:none}.brain-rows q,.brain-rows span{grid-column:1;grid-row:auto}
  .bn-report{min-width:0;font-size:13px}.bn-report td{white-space:normal;font-size:11.5px}.bn-report th,.bn-report td{padding-right:8px}.bn-report td span{padding:4px 6px}
  .same-big{grid-template-columns:minmax(0,1fr)}}

/* ── the engine underneath ────────────────────────────────────────────────────────────────── */
/* animated beam: a light that travels each line from what you send, through the engine, to what comes back (a plain-SVG port of
   Magic UI's Animated Beam, MIT: the light is a gradient whose two ends are moved along the line). The lines are drawn in a box
   of 100 by 100 stretched over the drawing, so they meet the labels at any width; with "reduce motion" on only the lines are drawn. */
.pipe{position:relative;display:grid;grid-template-columns:1fr 1.2fr 1fr 1.2fr 1fr 1.2fr 1fr;align-items:stretch;height:190px;margin-top:clamp(36px,4.6vw,64px)}
.pipe-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pipe-lines path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.pipe-base path{stroke:var(--line-2)}
.pipe-run path{stroke-width:1.75;stroke-linecap:round}
.pipe-v{display:none}
.pipe-col{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-rows:repeat(3,1fr);align-items:center}
.pipe-in{grid-column:1}.pipe-hub{grid-column:3}.pipe-out{grid-column:5}.pipe-end{grid-column:7}
.pipe-col li,.pipe-end{display:flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:8px 12px;border-radius:999px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2),0 10px 20px -16px rgba(24,36,52,.4);font:500 13.5px/1.15 Geist,"PL Sans Fallback",system-ui,sans-serif;text-align:center}
.pipe-hub{position:relative;align-self:center;display:grid;justify-items:center;gap:10px;padding:20px 12px;border-radius:24px;background:var(--ink);color:#fff;box-shadow:0 0 0 6px rgba(18,18,17,.05),0 30px 50px -28px rgba(24,36,52,.6)}
.pipe-hub .glyph{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff;color:var(--ink);font:500 14px/1 var(--mono);letter-spacing:-.04em}
.pipe-hub b{font:500 14px/1 Geist,"PL Sans Fallback",system-ui,sans-serif;letter-spacing:-.01em}
.pipe-end{position:relative;align-self:center;flex-direction:column;gap:3px;min-height:74px;border-radius:22px}
.pipe-end b{font-family:var(--serif);font-weight:300;font-size:30px;line-height:1;font-variant-numeric:lining-nums}
.pipe-end span{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.pipe .sh{display:block;flex:none;border-radius:2.5px;box-shadow:inset 0 0 0 1.5px var(--gold)}
.sh-t{width:8px;height:14px}.sh-s{width:12px;height:12px}.sh-w{width:18px;height:10px}
@media (max-width:760px){
  .pipe{grid-template-columns:minmax(0,1fr);grid-template-rows:44px 36px 44px 36px 44px 36px 44px;height:auto}
  .pipe-h{display:none}.pipe-v{display:block}
  .pipe-col{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .pipe-in{grid-column:1;grid-row:1}.pipe-hub{grid-column:1;grid-row:3}.pipe-out{grid-column:1;grid-row:5}.pipe-end{grid-column:1;grid-row:7}
  .pipe-col li{min-height:44px;padding:6px 6px;font-size:12.5px}
  .pipe-hub{justify-self:center;display:flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 6px;border-radius:999px}
  .pipe-hub .glyph{width:32px;height:32px;border-radius:50%}
  .pipe-end{justify-self:center;flex-direction:row;gap:8px;min-height:44px;height:44px;padding:0 18px;border-radius:999px}
  .pipe-end b{font-size:22px}
}
.engine .bn-in{display:grid;align-content:space-between;gap:26px;min-height:230px}
.engine .bn b.num{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(56px,7vw,104px);line-height:1;letter-spacing:-.04em}
.engine .bn p{margin:0;max-width:23.87em;color:var(--ink);font-size:16.5px;line-height:1.5}
.engine .bn .how{margin-top:10px;max-width:none;font:400 11.5px/1.5 var(--mono);color:var(--faint)}
.bn-looks{grid-column:1/-1}
.engine .bn-looks .bn-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;min-height:0}
.engine .bn-looks p{max-width:39.78em}
.bn-looks .looks{margin:0}
.counted{margin-top:20px;color:var(--faint);font-size:13px}
/* number ticker: a count rolls into place once, digit by digit, when it comes on screen (after Magic UI's Number Ticker, MIT;
   drawn as columns moved by transform, so no figure is ever half written). The script wraps the digits only at that moment:
   with no script, or before then, the number is simply printed. */
.tk,.tk em{font-style:normal}
.tk{display:inline-flex;vertical-align:bottom}
.tk-d{display:inline-block;height:1em;line-height:1;overflow:hidden}
.tk-d>em{display:block;transform:translateY(0);transition:transform .5s var(--e) calc(var(--n)*40ms)}
.tk-d>em>i{display:block;height:1em;line-height:1;font-style:normal}
.tk.in .tk-d>em{transform:translateY(-75%)}

/* border beam: a short light that walks the edge of the price (a plain-CSS port of Magic UI's Border Beam, MIT). The mask leaves
   only the 1px border visible; the light is a square moved along the frame's own outline. Used here and nowhere else. */
.beam{position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(transparent,transparent),linear-gradient(#000,#000);-webkit-mask-clip:padding-box,border-box;-webkit-mask-composite:source-in;
          mask:linear-gradient(transparent,transparent),linear-gradient(#000,#000);mask-clip:padding-box,border-box;mask-composite:intersect}
.beam::after{content:"";position:absolute;width:170px;aspect-ratio:1;background:linear-gradient(to left,var(--gold),rgba(168,120,44,.5) 34%,transparent);
  offset-path:rect(0 auto auto 0 round 150px);offset-distance:0%;animation:beam 9s linear infinite}
@keyframes beam{to{offset-distance:100%}}
@supports not (offset-path:rect(0 auto auto 0 round 1px)){.beam{display:none}}
@media (max-width:900px){.price-in{grid-template-columns:minmax(0,1fr)}}

/* the motion-graphics film: a tall player beside its own lines */
.mg-in{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;padding:5px}
.mg-play .lk-core{max-width:300px}
.mg-say p{margin-top:14px;color:var(--grey);font-size:15.5px;line-height:1.6;max-width:34.48em}
.mg-lines{list-style:none;margin:22px 0 0;padding:0;counter-reset:mg;border-top:1px solid var(--line)}
.mg-lines li{counter-increment:mg;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-weight:300;font-size:clamp(19px,1.7vw,23px);line-height:1.25}
.mg-lines li::before{content:counter(mg,decimal-leading-zero);font:500 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--gold-ink)}
.bn-mg{grid-column:1/-1}
.bn-mg .bn-in{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:center}
.bn-mg .snd{left:10px;bottom:10px;padding:8px 12px 8px 10px;font-size:12.5px}
@media (max-width:700px){.mg-in{grid-template-columns:minmax(0,1fr)}.mg-play .lk-core{max-width:260px}.bn-mg .bn-in{grid-template-columns:minmax(0,1fr)}.bn-mg .mg-play{max-width:200px}}

/* ── for builders ─────────────────────────────────────────────────────────────────────────── */
.api-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:center}
.api-say h2{font-size:clamp(32px,3.8vw,52px)}
.api-say .sub{margin-top:20px}
.api-price{margin-top:16px;font-family:var(--serif);font-weight:300;font-size:clamp(21px,2vw,26px);line-height:1.3;max-width:15.6em}
.api-say .duo{margin-top:26px}
.term{min-width:0;padding:6px;border-radius:26px;background:var(--night);box-shadow:0 34px 60px -34px rgba(24,36,52,.7)}
.term-bar{display:flex;align-items:center;gap:6px;padding:10px 14px 12px}
.term-bar i{width:9px;height:9px;border-radius:50%;background:rgba(243,240,233,.18)}
.term-bar span{margin-left:10px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#908C84}
.way-code{margin:0;padding:18px 20px;border-radius:20px 20px 6px 6px;background:#171716;box-shadow:inset 0 0 0 1px rgba(243,240,233,.07);font:400 12.5px/1.7 var(--mono);color:#E8E6E1;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
.way-code code{font:inherit}
.way-reply{margin-top:4px;border-radius:6px 6px 20px 20px;color:#B3AFA6}
.way-code .c{color:#908C84}.way-code .s{color:#E3B56E}.way-code .k{color:#F3F0E9}
@media (max-width:900px){.api-in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.way-code{font-size:11.5px;padding:15px 14px}}

/* ── the close and the footer ─────────────────────────────────────────────────────────────── */
.close{padding-block:clamp(96px,12vw,180px)}
.close-in{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:24px clamp(28px,6vw,96px);align-items:end}
.close h2{font-size:clamp(40px,5.6vw,84px);line-height:.98;letter-spacing:-.034em}
.close .sub{margin-bottom:24px}
footer{padding-block:56px 44px;background:var(--alt);box-shadow:inset 0 1px 0 var(--line)}
.foot{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:30px}
.foot p{margin-top:12px;max-width:19.89em;color:var(--faint);font-size:13.5px;line-height:1.55}
.foot h3{margin-bottom:12px;font:500 10.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.foot nav a{display:block;padding:5px 0;color:var(--grey);font-size:14px;transition:color .15s var(--e)}
@media (hover:hover) and (pointer:fine){.foot nav a:hover{color:var(--ink)}}
/* the credits (owner, 12 Oct, 8:26am: the long paragraph "looks poor"): one plain line that is always there, and a quiet control
   that opens the rest. A native <details>, so it opens with no script, from the keyboard and for a screen reader; every credit is
   still the page's own text. The panel opens FROM the control (its corner), on transform and opacity, in 220ms; it is the last
   thing in the footer, so opening it moves nothing that is on screen. */
.credit{--pt:22px;position:relative;margin-top:40px;padding-top:var(--pt);border-top:1px solid var(--line-2);color:var(--faint);font-size:12.5px;line-height:1.6;min-width:0}
.credit>p{max-width:none;padding-right:200px}
.cr summary{position:absolute;right:0;top:calc(var(--pt) - 9px);display:inline-flex;align-items:center;gap:9px;padding:9px 2px 9px 12px;cursor:pointer;list-style:none;color:var(--grey);font:500 12.5px/1.6 Geist,"PL Sans Fallback",system-ui,sans-serif;-webkit-user-select:none;user-select:none;transition:transform .14s var(--e),color .15s var(--e)}
.cr summary::-webkit-details-marker{display:none}
.cr summary span{text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1px;text-underline-offset:4px}
.cr summary::after{content:"";flex:none;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--e)}
.cr[open] summary::after{transform:translateY(1px) rotate(225deg)}
.cr[open] summary{color:var(--ink)}
.cr summary:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.cr summary:hover{color:var(--ink)}.cr-panel a:hover{color:var(--ink);text-decoration-color:var(--ink)}}
.cr-panel{margin-top:20px;padding:clamp(20px,2.6vw,34px);border-radius:24px;background:#fff;box-shadow:inset 0 0 0 1px rgba(18,18,17,.07),0 0 0 6px rgba(18,18,17,.025),0 30px 60px -44px rgba(24,36,52,.4);color:var(--grey);font-size:12.5px;line-height:1.55;overflow-wrap:anywhere;transform-origin:100% 0}
.cr[open] .cr-panel{animation:cr-open .22s var(--e)}
@keyframes cr-open{from{opacity:0;transform:translateY(-6px) scale(.985)}}
@keyframes cr-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.cr[open] .cr-panel{animation:cr-fade .2s var(--e)!important}}
.cr-say{list-style:none;margin:0;padding:0 0 20px;display:grid;gap:6px;border-bottom:1px solid var(--line);color:var(--ink);font-size:14px;line-height:1.5}
.cr-groups{columns:2;column-gap:clamp(28px,4vw,56px);padding-top:22px}
.cr-g{break-inside:avoid;padding-bottom:22px}
.cr-g:last-child{padding-bottom:0}
.cr-g h4{margin:0 0 9px;font:500 10.5px/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--gold-ink)}
.cr-g ul{list-style:none;margin:0;padding:0}
.cr-g li{padding:3px 0}
.cr-of{margin:9px 0 1px;color:var(--ink);font-weight:500}
.cr-panel a{color:var(--grey);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:color .15s var(--e)}
@media (max-width:700px){
  .credit>p{padding-right:0}
  .cr summary{position:relative;right:auto;top:auto;margin:6px 0 -4px -12px}
  .cr-panel{margin-top:12px;border-radius:20px;transform-origin:0 0}
  .cr-groups{columns:1}
}
@media (max-width:900px){.close-in{grid-template-columns:minmax(0,1fr)}.foot{grid-template-columns:repeat(2,minmax(0,1fr))}.foot>div:first-child{grid-column:1/-1}}

/* entrances: a thing rises 12px into place when it comes on screen. Transform only, so nothing on this page is ever invisible:
   not in a link preview, not in a still, not when the script fails. */
.armed[data-r]{transform:translateY(12px)}
.armed[data-r].in{transform:none;transition:transform .5s var(--e)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .armed[data-r]{transform:none}html{scroll-behavior:auto}
  .pipe-run{display:none}
}

/* ══ round two (11 Oct, 6pm): six pages, a product stage, services, the client's side, early access ═══════════════════ */
.page-head{padding-block:clamp(56px,7vw,112px) clamp(36px,4.4vw,64px)}
.page-head h1{font-size:clamp(42px,6.2vw,92px)}
.page-head .sub{margin-top:24px;max-width:37.13em}
.grp{display:flex;align-items:baseline;gap:14px;margin:clamp(40px,5vw,72px) 0 0;padding-bottom:14px;border-bottom:1px solid var(--line-2);font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.grp i{font-style:normal;letter-spacing:.06em;text-transform:none;color:var(--faint)}
.grp+.cases{margin-top:clamp(18px,2.2vw,28px)}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font:500 15px/1 Geist,"PL Sans Fallback",system-ui,sans-serif;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:6px;
  transition:text-decoration-color .17s var(--e),transform .13s var(--e)}
.more:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.more:hover{text-decoration-color:var(--ink)}}
.band{padding-block:clamp(56px,7vw,104px)}

/* the hero's cascade: the wide film behind, the tall motion-graphics reel in front of it. On a phone they stack. */
.player{position:relative;margin-bottom:clamp(40px,6vw,88px)}
.hero-tall{position:absolute;z-index:2;left:clamp(18px,3.4vw,44px);bottom:clamp(-72px,-5vw,-36px);width:clamp(170px,19vw,236px)}
.hero-tall .tray{padding:6px;border-radius:30px;background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1px rgba(18,18,17,.08),0 34px 60px -24px rgba(8,12,20,.65)}
.hero-tall .lk-core{border-radius:24px;box-shadow:none}
.hero-tall .snd{left:8px;bottom:8px;padding:7px 11px 7px 9px;font-size:12px}
.hero-tall p{display:grid;gap:2px;margin:12px 0 0 6px;font-size:12.5px;line-height:1.3;color:var(--faint)}
.hero-tall p b{font-weight:500;color:var(--ink)}
.player.has-tall .readout{padding-left:calc(clamp(18px,3.4vw,44px) + clamp(170px,19vw,236px) + 26px)}
.player.has-tall #filmsnd{left:auto;right:16px}
.player.has-tall .player-cap{padding-left:calc(clamp(18px,3.4vw,44px) + clamp(170px,19vw,236px) + 16px)}
@media (max-width:760px){
  .hero-tall{position:static;width:min(62%,230px);margin:18px auto 0}
  .player.has-tall .readout,.player.has-tall .player-cap{padding-left:20px}.player.has-tall .player-cap{padding-left:10px}
  .player{margin-bottom:0}
}

/* the landing page's work: three large cards and almost no words */
.wk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-top:clamp(30px,3.6vw,48px)}
.wk-c{position:relative;grid-column:span 8;min-width:0;padding:7px;border-radius:32px;background:rgba(18,18,17,.035);box-shadow:inset 0 0 0 1px rgba(18,18,17,.06)}
.wk-c .lk-core{border-radius:25px;box-shadow:0 26px 50px -30px rgba(24,36,52,.5)}
.wk-tall{grid-column:span 4;grid-row:span 2}
.wk-tall .lk-core,.wk-tall .lk-core video{height:100%}.wk-tall .lk-core video{object-fit:cover}
.wk-c figcaption{position:absolute;left:22px;top:22px;display:flex;align-items:center;gap:10px;padding:8px 13px;border-radius:999px;background:rgba(14,14,13,.72);color:#fff;font:500 12.5px/1 Geist,"PL Sans Fallback",system-ui,sans-serif;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.wk-c figcaption i{font:400 11px/1 var(--mono);font-style:normal;color:rgba(255,255,255,.72)}
.wk-c .snd{left:22px;bottom:22px}
@media (max-width:860px){.wk-c,.wk-tall{grid-column:1/-1;grid-row:auto}.wk-tall{max-width:340px;justify-self:center;width:100%}}

/* ── watch it work: one run for the sample café, five steps that play in turn ─────────────── */
.stage{margin-top:clamp(30px,3.6vw,48px)}
.stage .plate{overflow:hidden}
.stage-tabs{list-style:none;margin:0;padding:8px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;border-bottom:1px solid var(--line)}
.stage-tabs button{position:relative;appearance:none;width:100%;border:0;background:transparent;cursor:pointer;display:grid;gap:5px;padding:14px 16px 18px;border-radius:16px;text-align:left;color:var(--faint);
  transition:background-color .18s var(--e),color .18s var(--e),transform .13s var(--e)}
.stage-tabs button:active{transform:scale(.97)}
.stage-tabs b{font:500 15.5px/1.1 Geist,"PL Sans Fallback",system-ui,sans-serif;letter-spacing:-.01em;color:var(--grey)}
.stage-tabs span{font:400 11px/1.3 var(--mono);letter-spacing:.02em}
.stage-tabs button.on{background:var(--alt)}.stage-tabs button.on b{color:var(--ink)}
/* the line under a step: it fills while that step is on, by transform alone (after Motion Primitives' Animated Background, MIT) */
.stage-tabs i{position:absolute;left:16px;right:16px;bottom:8px;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.stage-tabs i::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}
.stage.js .stage-tabs button.on i::after{animation:fill var(--dwell,7s) linear forwards}
.stage.js.hold .stage-tabs button.on i::after{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}
@media (hover:hover) and (pointer:fine){.stage-tabs button:not(.on):hover b{color:var(--ink)}}
.pane{padding:clamp(22px,3vw,40px);border-top:1px solid var(--line)}
.pane:first-child{border-top:0}
.stage.js .pane{border-top:0;min-height:430px}
.stage.js .pane[hidden]{display:none}
.stage.js .pane.on{animation:pane-in .22s var(--e)}
@keyframes pane-in{from{opacity:.4;transform:translateY(6px)}}
.pane-h{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.pane-h span{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--gold-ink)}
.pane-h i{margin-left:auto;font:400 11.5px/1 var(--mono);font-style:normal;color:var(--faint)}
.pane-q span,.pane-a span{display:block;margin-bottom:9px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.pane-q q{display:block;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(21px,2.1vw,28px);line-height:1.22;quotes:"\201C" "\201D"}
.pane-a{margin-top:16px;max-width:57.02em;color:var(--grey);font-size:15.5px;line-height:1.6}
.pane-a b{font-weight:500;color:var(--ink)}
.pane .panel-k{padding-top:22px}
.rail-t li{display:inline-flex;align-items:baseline;gap:7px;background:var(--alt)}
.rail-t li i{font-style:normal;color:var(--gold-ink)}.rail-t li.on i{color:rgba(255,255,255,.7)}
.pane-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pane-list li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:4px 22px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5}
.pane-list b{font:500 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.pane-list span{color:var(--ink)}
.pane-list span i{font-style:normal;font-size:13.5px;color:var(--faint)}
.pane-a>span{margin-bottom:9px}
.steer{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-top:20px;padding-inline:10px;color:var(--grey);font-size:15px}
.steer b{font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
@media (max-width:860px){.stage-tabs{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}.stage-tabs button{padding:12px 12px 16px}.stage-tabs i{left:12px;right:12px}
  .pane-list li{grid-template-columns:minmax(0,1fr)}.stage.js .pane{min-height:0}.pane-h i{display:none}}
@media (prefers-reduced-motion:reduce){.stage-tabs i{display:none}}

/* ── the four services ────────────────────────────────────────────────────────────────────── */
.svc{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;margin-top:clamp(30px,3.6vw,48px)}
.svc-now .bn-in{display:grid;align-content:space-between;gap:26px}
.svc-pix{display:flex;gap:10px}
.svc-pix img{flex:1 1 0;min-width:0;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:14px;background:#151514;box-shadow:0 0 0 1px rgba(18,18,17,.1)}
.svc-next{display:grid;gap:14px}
.svc-next .bn{grid-column:auto}
.svc-next .bn-in{background:transparent;box-shadow:inset 0 0 0 1px rgba(18,18,17,.07)}
.tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--faint)}
.tag.now{color:var(--ok)}.tag.now::before{background:var(--ok);box-shadow:0 0 0 4px rgba(31,122,76,.14)}
.svc .bn{grid-column:auto}
@media (max-width:900px){.svc{grid-template-columns:minmax(0,1fr)}}
.deep{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);padding-block:clamp(36px,4.6vw,64px);border-top:1px solid var(--line-2)}
.deep h2{font-size:clamp(30px,3.4vw,46px)}
.deep p{margin-top:14px;color:var(--grey);max-width:39.78em}
.deep ul{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.deep li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px}
@media (max-width:860px){.deep{grid-template-columns:minmax(0,1fr)}}

/* ── why this beats an agency: five lines ─────────────────────────────────────────────────── */
.five{list-style:none;margin:clamp(30px,3.6vw,48px) 0 0;padding:0;counter-reset:five;border-top:1px solid var(--ink)}
.five li{counter-increment:five;display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,1fr);gap:6px 28px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.five li::before{content:counter(five,decimal-leading-zero);font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--gold-ink)}
.five b{font-family:var(--serif);font-weight:300;font-size:clamp(23px,2.4vw,32px);line-height:1.14;letter-spacing:-.02em}
.five span{color:var(--grey);font-size:15.5px;line-height:1.55}
@media (max-width:760px){.five li{grid-template-columns:36px minmax(0,1fr)}.five span{grid-column:2}}

/* the engine as one band of numbers on the landing page */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(30px,3.6vw,48px);border-top:1px solid var(--ink)}
.nums div{padding:22px 22px 0 0}
.nums div+div{padding-left:22px;border-left:1px solid var(--line-2)}
.nums b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(44px,5.4vw,80px);line-height:1;letter-spacing:-.04em;font-variant-numeric:lining-nums}
.nums span{display:block;margin-top:12px;color:var(--grey);font-size:14.5px;line-height:1.5;max-width:17.24em}
@media (max-width:760px){.nums{grid-template-columns:repeat(2,minmax(0,1fr))}.nums div:nth-child(3){padding-left:0;border-left:0}.nums div:nth-child(n+3){margin-top:22px;border-top:1px solid var(--line-2)}}
.less{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px clamp(28px,6vw,96px);align-items:end}
.less-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.less-list li{padding:16px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.5}
@media (max-width:860px){.less{grid-template-columns:minmax(0,1fr)}}

/* ── the client's side: three previews, drawn in the page's own parts ─────────────────────── */
.pre-k{display:inline-block;padding:8px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.views{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);margin-top:clamp(30px,3.6vw,48px);align-items:start}
.view{min-width:0}
.view-col{display:grid;gap:22px;min-width:0}
.view-col .pre-k{justify-self:start;margin:0}
.view-k{display:block;margin:0 0 12px 8px;font:500 11px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.view-k i{font-style:normal;letter-spacing:.04em;text-transform:none;color:var(--faint)}
.plate.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;background:var(--alt)}
.plate.shots img{width:100%;height:auto;border-radius:16px;box-shadow:0 0 0 1px rgba(18,18,17,.08),0 18px 34px -24px rgba(24,36,52,.45)}
.view .plate{padding:18px}
.ui-bar{display:flex;align-items:center;gap:6px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--faint)}
.ui-bar i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}.ui-bar span{margin-left:8px}
.ui-q{font-family:var(--serif);font-weight:300;font-size:22px;line-height:1.2;letter-spacing:-.015em}
.ui-hint{margin-top:8px;color:var(--faint);font-size:13px;line-height:1.45}
.ui-field{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--alt);box-shadow:inset 0 0 0 1px var(--line);font-size:14.5px;line-height:1.45}
.ui-card{margin-top:14px;padding:14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line-2)}
.ui-card b{display:block;margin-bottom:6px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ui-card p{font-size:14px;line-height:1.5;color:var(--ink)}
.ui-wait{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:start}
.ui-wait img{width:88px;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:10px;background:#151514}
.ui-wait q{display:block;font-family:var(--serif);font-style:italic;font-weight:300;font-size:16px;line-height:1.3;quotes:"\201C" "\201D"}
.ui-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--grey)}
.ui-row b{font-weight:500;color:var(--ink)}
.view .chips{padding:12px 0 2px}.view .chips li{padding:8px 11px;font-size:12.5px}
.ui-msg{max-width:92%;margin-top:10px;padding:11px 13px;border-radius:14px 14px 14px 4px;background:var(--alt);font-size:14px;line-height:1.5}
.ui-msg.me{margin-left:auto;border-radius:14px 14px 4px 14px;background:var(--ink);color:#fff}
@media (max-width:900px){.views{grid-template-columns:minmax(0,1fr)}}
.about-film{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:center}
.about-film figcaption{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--grey);max-width:26.52em}
.about-film figcaption b{display:block;margin-bottom:8px;font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.6vw,36px);line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
.about-film .snd{left:10px;bottom:10px;padding:8px 12px 8px 10px;font-size:12.5px}
@media (max-width:700px){.about-film{grid-template-columns:minmax(0,1fr)}.about-film .lk-core{max-width:240px}}
.mg-looks{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
.mg-looks li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:3px 20px;padding:13px 0;border-bottom:1px solid var(--line)}
.mg-looks span{grid-row:span 2;font:500 11px/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.mg-looks b{font-family:var(--serif);font-weight:300;font-size:21px;line-height:1.2}
.mg-looks i{font-style:normal;font-size:14px;line-height:1.5;color:var(--grey)}
@media (max-width:560px){.mg-looks li{grid-template-columns:minmax(0,1fr)}.mg-looks span{grid-row:auto}}

/* ── early access: the letter, written on the page ────────────────────────────────────────── */
.access{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:start}
.access .rows{margin-top:24px;border-top:1px solid var(--line)}
.form .plate{padding:clamp(22px,3vw,40px)}
.form label{display:block;margin-top:16px;font:500 13px/1 Geist,"PL Sans Fallback",system-ui,sans-serif}
.form label:first-of-type{margin-top:0}
.form .two label{margin-top:16px}
.form label i{font-style:normal;font-weight:400;color:var(--faint)}
.form input{display:block;width:100%;margin-top:8px;padding:13px 14px;border:0;border-radius:12px;background:var(--alt);box-shadow:inset 0 0 0 1px var(--line-2);font:400 16px/1.3 Geist,"PL Sans Fallback",system-ui,sans-serif;color:var(--ink);
  transition:box-shadow .15s var(--e)}
.form input:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--ink)}
.form input[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--no)}
.form .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.form .btn{margin-top:22px}
.form-says{margin-top:14px;min-height:1.5em;font-size:14px;line-height:1.5;color:var(--grey)}
.form-says.bad{color:var(--no)}
.faq{margin-top:clamp(30px,3.6vw,48px);border-top:1px solid var(--ink)}
.faq div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:6px 40px;padding:20px 0;border-bottom:1px solid var(--line)}
.faq dt{font-family:var(--serif);font-weight:300;font-size:22px;line-height:1.2}
.faq dd{margin:0;color:var(--grey);font-size:15.5px;line-height:1.6}
@media (max-width:860px){.access{grid-template-columns:minmax(0,1fr)}.faq div{grid-template-columns:minmax(0,1fr)}.form .two{grid-template-columns:minmax(0,1fr)}}
.limits{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.limits li{padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--grey)}
.limits b{display:block;font:500 10.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}

/* the landing page is the short one: its sections sit closer together than a subpage's */
.home section{padding-block:clamp(48px,4.6vw,66px)}
.home .hero{padding-block:clamp(32px,3.4vw,48px) clamp(40px,4vw,56px)}
.home .hero h1{font-size:clamp(44px,6.6vw,100px)}
/* 12 Oct 2026: his headline is "The future of agencies"; the old headline sits under it as the second line. */
/* 12 Oct 2026: YC's request, quoted with its source, straight under the hero. */
.said{padding-block:clamp(40px,5vw,84px) clamp(64px,8vw,120px)}
.said-fig{margin:0;max-width:1000px}
.said blockquote{margin:0}
.said-lead{margin:0 0 clamp(18px,2vw,28px);max-width:36em;font-size:clamp(16.5px,1.35vw,19px);line-height:1.55;color:var(--grey)}
.said-big{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.3vw,62px);line-height:1.08;letter-spacing:-.018em;text-wrap:balance}
.said-ours{margin:clamp(18px,2vw,26px) 0 0;font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(22px,2.4vw,34px);line-height:1.15}
@media (hover:hover) and (pointer:fine){.said-by a:hover{text-decoration-color:var(--ink)}}
/* 12 Oct 2026, the owner: "this looks like AI slop". The first screen had the machine-made set: a pill badge over the headline, a
   faint grid behind it, two buttons, and every section rising as it came in. The badge and the grid are gone, the second button
   is a plain link and the launch state is a sentence. ⚠️ THE GRID AND THE RISE STAY: I took those out too and the owner said at
   once "I like grids and everything rising as scroll". They are his taste, not slop. Only the badge and the second button went. */
.lnk{align-self:center;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:5px;text-decoration-thickness:1px;padding:8px 2px;transition:transform .14s var(--e)}
.lnk:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.lnk:hover{text-decoration-color:var(--ink)}}
.state{margin:18px 0 0;font-size:14px;color:var(--faint)}
.h1-under{margin:clamp(12px,1.5vw,22px) 0 0;font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.5vw,36px);line-height:1.15;letter-spacing:-.012em;color:var(--grey);text-wrap:balance}
.home .player{margin-top:clamp(28px,3vw,40px);margin-bottom:0}
.home .close{padding-block:clamp(56px,6vw,84px)}
.home h2{font-size:clamp(30px,3.9vw,54px)}
.home .head .sub{font-size:16px}
/* on the landing page the two pieces stand side by side: the clips on top, an arrow down, the finished video under them */
.home .ios{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,36px);margin-top:28px;align-items:end}
.home .io{grid-template-columns:minmax(0,1fr);gap:12px}
.home .io-strip,.home .io-strip.many{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.home .io-strip img{border-radius:7px}
.home .io-arrow{justify-self:center;width:40px;height:40px;transform:rotate(90deg)}
.home .io-arrow svg{width:26px}
.home .io-k{margin-bottom:10px}
.home .screen{aspect-ratio:2.3/1}
.two-up{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.two-up .five li{grid-template-columns:40px minmax(0,1fr)}
.two-up .five span{grid-column:2}
.two-up .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
.two-up .nums div:nth-child(3){padding-left:0;border-left:0}
.two-up .nums div:nth-child(n+3){margin-top:22px;border-top:1px solid var(--line-2)}
.two-up .nums div{padding-bottom:6px}
@media (max-width:900px){.two-up,.home .ios{grid-template-columns:minmax(0,1fr)}}
.home .shot,.home .stage,.home .nums,.home .five,.home .svc4{margin-top:28px}
.home .stage.js .pane{min-height:372px}
.home .five li{padding:16px 0}
.home .five b{font-size:clamp(21px,2vw,26px)}
.home footer{padding-block:40px 32px}

/* ══ round three (11 Oct, 6:40pm): less text, more to look at ═════════════════════════════════════════════════════════ */
.links{display:flex;flex-wrap:wrap;gap:6px 34px;margin:0}
/* what went in, an arrow, what came back */
.ios{display:grid;gap:clamp(18px,2.4vw,30px);margin-top:clamp(30px,3.6vw,48px)}
.io{display:grid;grid-template-columns:minmax(0,4fr) 64px minmax(0,7fr);align-items:center;gap:0 clamp(10px,1.6vw,22px)}
.io-k{display:block;margin-bottom:12px;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.io-k b{font:300 28px/1 var(--serif);letter-spacing:-.02em;text-transform:none;color:var(--ink);margin-right:8px;font-variant-numeric:lining-nums}
.io-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.io-strip.many{grid-template-columns:repeat(3,minmax(0,1fr))}
.io-strip img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:#151514;box-shadow:0 0 0 1px rgba(18,18,17,.08)}
.io-arrow{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff;color:var(--gold-ink);box-shadow:inset 0 0 0 1px var(--line-2),0 14px 26px -18px rgba(24,36,52,.5)}
.io-out .tray{padding:7px;border-radius:30px}
.io-out .lk-core{border-radius:23px;box-shadow:0 26px 50px -30px rgba(24,36,52,.55)}
.io-out .snd{left:14px;bottom:14px}
.io-out figcaption{display:flex;align-items:baseline;gap:12px;padding:14px 8px 0}
.io-out figcaption b{font-family:var(--serif);font-weight:300;font-size:24px;letter-spacing:-.02em}
.io-out figcaption i{font:400 11.5px/1 var(--mono);font-style:normal;color:var(--faint)}
.io-strip.row{grid-template-columns:repeat(auto-fill,minmax(clamp(72px,8vw,104px),1fr))}
.case-in-strip{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 22px;padding:0 5px}
.case-in-strip .io-k{margin:0;white-space:nowrap}
@media (max-width:860px){
  .io{grid-template-columns:minmax(0,1fr);gap:14px}
  .io-strip,.io-strip.many{grid-template-columns:repeat(4,minmax(0,1fr))}
  .io-arrow{justify-self:center;width:44px;height:44px;transform:rotate(90deg)}
  .case-in-strip{grid-template-columns:minmax(0,1fr)}
}
/* a real screen, framed */
.shot{margin-top:clamp(30px,3.6vw,48px)}
.shot .plate{overflow:hidden;border-radius:25px}
.shot img,.shot-in img{display:block;width:100%;height:auto}
.plate.shot-in{overflow:hidden;padding:0}
@media (max-width:700px){.shot .plate{max-width:390px;margin-inline:auto}}
/* the four services, as one row */
.svc4{list-style:none;margin:clamp(30px,3.6vw,48px) 0 26px;padding:0;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;border-top:1px solid var(--ink)}
.svc4 li{padding:22px 22px 4px 0}
.svc4 li+li{padding-left:22px;border-left:1px solid var(--line-2)}
.svc4 b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(19px,1.7vw,23px);line-height:1.25;letter-spacing:-.015em}
.svc4 li:not(.now) b{color:var(--grey)}
.svc4 .now b{font-size:clamp(23px,2.2vw,30px)}
@media (max-width:860px){.svc4{grid-template-columns:minmax(0,1fr)}.svc4 li,.svc4 li+li{padding:18px 0;border-left:0;border-bottom:1px solid var(--line)}}
/* the Motion page: films large, then the style board */
.mfs{display:grid;gap:clamp(18px,2.4vw,30px)}
.mf{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,6vw,96px);align-items:center;padding:clamp(18px,2.4vw,32px);border-radius:34px;background:#fff;box-shadow:inset 0 0 0 1px rgba(18,18,17,.06),0 28px 56px -36px rgba(24,36,52,.3)}
.mf.flip .tray{order:2}
.mf .tray{padding:7px;border-radius:32px}
.mf .lk-core{border-radius:25px}
.mf h3{font-size:clamp(30px,3.6vw,52px);line-height:1.02;letter-spacing:-.03em}
.mf .mg-lines{margin-top:22px}
@media (max-width:760px){.mf{grid-template-columns:minmax(0,1fr)}.mf .tray{max-width:300px}.mf.flip .tray{order:0}}
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 14px;margin-top:clamp(30px,3.6vw,48px)}
.tile .lk-core{aspect-ratio:9/16;border-radius:16px;box-shadow:0 0 0 1px rgba(18,18,17,.1),0 18px 30px -22px rgba(24,36,52,.5)}
.tile .lk-core video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile figcaption{padding:10px 4px 0;font:500 13px/1.2 Geist,"PL Sans Fallback",system-ui,sans-serif}
@media (max-width:980px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.home .head .sub{max-width:25.19em}

/* on a phone the five links fit one line under the name */
@media (max-width:480px){.set{flex-wrap:nowrap;justify-content:space-between;margin:2px 0 0 -6px}.set a{padding:8px 6px 10px;font-size:12.5px;letter-spacing:-.01em}}
@media (max-width:920px){section[id]{scroll-margin-top:120px}}


/* ══ round four (11 Oct, evening): depth, one dark band a page, and motion tied to the scroll ═══════════════════════════
   Owner, 7:34pm: "this site can be SICK ... use the 21st.dev stuff ... those cool transition packages and little add-ons to
   a website to make it alive and cool and professionally done". More plain-CSS and vanilla-JS ports of open components
   (found through 21st.dev, taken from each author's own source), each credited where it is drawn:
     container scroll .... Aceternity UI (Manu Arora; free for personal and commercial use)   the player lies back, and stands up as the page is scrolled
     vertical cut reveal . fancy (Daniel Petho, MIT)          a page's first heading rises into place a word at a time
     grid pattern ........ Magic UI (MIT)                     the faint grid behind a page's first heading
     text reveal ......... Magic UI (MIT)                     the closing heading lights up word by word with the scroll
     marquee ............. Magic UI (MIT)                     the wall of looks, two rows drifting opposite ways
     animated beam ....... Magic UI (MIT)                     the light on the one solid line of the services drawing
     animated list ....... Magic UI (MIT)                     the rows of a step arrive one after another
     spotlight ........... Motion Primitives (ibelick, MIT)   a soft light follows the pointer over a dark cell
     tilt ................ Motion Primitives (ibelick, MIT)   a framed video or screen leans a few degrees toward the pointer
     magnetic ............ Motion Primitives (ibelick, MIT)   the main button leans toward the pointer
   No rival's page was copied: not its words, its layout or its pictures.
   HOW IT MOVES. Only transform and opacity change (the SVG beams are the one stated exception). What is tied to the scroll is a
   CSS scroll timeline (animation-timeline), so it costs the main thread nothing and can never be janky script; where a browser
   has none, with "reduce motion" on, and in a still, each thing simply stands in its finished place. Nothing is hidden waiting
   for a script. */
:root{--e-d:cubic-bezier(0.32,0.72,0,1);--n-ink:#F3F0E9;--n-grey:#A9A59D;--n-faint:#8A867E;--n-line:rgba(243,240,233,.11);--u:calc((min(1200px,100vw) - 2*var(--gut))/100)}
body{font-optical-sizing:auto}
p{text-wrap:pretty}

/* page to page: the browser cross-fades the page and carries the bar and the gold mark across (View Transitions; a browser
   without them simply loads the page) */
@view-transition{navigation:auto}
body>header{view-transition-name:pl-bar}
::view-transition-old(root){animation:vt-out .16s var(--e) both}
::view-transition-new(root){animation:vt-in .28s var(--e) both}
::view-transition-group(pl-mark){animation-duration:.28s;animation-timing-function:var(--e-io)}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* the nav's gold mark: one real element. It slides under the link the pointer is on, and back. */
.set a{position:relative}
.set a[aria-current]::after{display:none}
.set .mk{position:absolute;left:50%;bottom:3px;width:14px;height:2px;margin-left:-7px;border-radius:2px;background:var(--gold);pointer-events:none;view-transition-name:pl-mark;
  transition:transform .24s var(--e),opacity .18s var(--e)}
.set .mk.off{opacity:0}
.set.hov .mk.off{opacity:1}

/* the main button: a lit top edge, an arrow that leaves by the corner as a second one arrives, and a lean toward the pointer */
.btn-d{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 22px -14px rgba(18,18,17,.7)}
.btn-d .ar{position:relative;overflow:hidden}
.btn-d .ar svg{transition:transform .22s var(--e)}
.btn-d .ar::after{content:"";position:absolute;inset:0;transform:translate(-110%,110%);transition:transform .22s var(--e);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9l6-6M4.2 3H9v4.8' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50%/12px 12px no-repeat}
@media (hover:hover) and (pointer:fine){.btn-d:hover .ar{transform:none}.btn-d:hover .ar svg{transform:translate(110%,-110%)}.btn-d:hover .ar::after{transform:none}}
.mag{display:inline-flex;transition:transform .2s var(--e)}

/* ── a page's first screen ──────────────────────────────────────────────────────────────────── */
.hero,.page-head{position:relative;isolation:isolate}
.hero-bg,.page-head::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.8;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;background-position:50% -1px;
  -webkit-mask-image:radial-gradient(64% 70% at 50% 0%,#000,transparent 76%);mask-image:radial-gradient(64% 70% at 50% 0%,#000,transparent 76%)}
.cut .cw{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.12em .09em .17em;margin:-.12em -.09em -.17em}
.cut .cw>*{display:inline-block}
@media (prefers-reduced-motion:no-preference){.cut .cw>*{animation:cut .72s var(--e) backwards;animation-delay:calc(40ms + var(--i)*55ms)}}
@keyframes cut{from{transform:translateY(112%)}}
.soon i{position:relative}
.soon i::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 1px var(--gold);opacity:0}
@media (prefers-reduced-motion:no-preference){.soon i::after{animation:ping 2.6s var(--e) infinite}}
@keyframes ping{from{opacity:.7;transform:scale(.5)}70%,to{opacity:0;transform:scale(1.5)}}
/* the player: a warm light behind it, a lit top edge, a deep shadow; and (container scroll) it lies back a little at the top of
   the page and stands up as the page is scrolled */
.player{perspective:1800px}
.player::before{content:"";position:absolute;inset:-6% -5% -12%;z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 50% 58%,rgba(168,120,44,.17),transparent 72%)}
.player .tray{position:relative;background:rgba(18,18,17,.05)}
.player .plate{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(18,18,17,.6),0 3px 6px rgba(8,12,20,.18),0 26px 44px -20px rgba(8,12,20,.5),0 80px 100px -56px rgba(8,12,20,.6)}
@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){
  .home .player .tray{animation:settle linear both;animation-timeline:scroll(root block);animation-range:0px 480px}
}}
@keyframes settle{from{transform:rotateX(11deg) scale(.95)}to{transform:none}}

/* ── the one dark band a page ───────────────────────────────────────────────────────────────── */
.night{position:relative;isolation:isolate;overflow:clip;margin:clamp(8px,1vw,14px) clamp(6px,1vw,14px);border-radius:clamp(26px,3.2vw,44px);background:var(--night);color:var(--n-ink)}
.night::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(56% 42% at 50% 0%,rgba(227,181,110,.14),transparent 72%),radial-gradient(42% 36% at 100% 100%,rgba(104,128,176,.11),transparent 70%)}
.night::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.night h2,.night h3{color:#fff}
.night .eyebrow{color:var(--gold-lit)}.night .eyebrow::before{background:var(--gold-lit)}
.night .sub{color:var(--n-grey)}
.night .fine,.night .counted{color:var(--n-faint)}
.night .more{color:var(--n-ink);text-decoration-color:rgba(243,240,233,.3)}
.night :focus-visible{outline-color:#fff}
.night .tray{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.night .lk-core{box-shadow:0 0 0 1px rgba(243,240,233,.14),0 30px 60px -24px #000}
.night .io-k{color:var(--n-faint)}
.night .tag{color:var(--n-faint)}.night .tag::before{box-shadow:inset 0 0 0 1.5px var(--n-faint)}
.night .tag.now{color:#7BE0A6}.night .tag.now::before{background:#7BE0A6;box-shadow:0 0 0 4px rgba(123,224,166,.16)}
@media (hover:hover) and (pointer:fine){.night .more:hover{text-decoration-color:#fff}}
/* spotlight: a soft light under the pointer (the script moves it by transform; without one it is never drawn) */
.lit{position:relative;overflow:hidden}
.spot{position:absolute;left:0;top:0;z-index:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .25s var(--e);
  background:radial-gradient(closest-side,rgba(227,181,110,.17),transparent)}
.lit:hover>.spot{opacity:1}
.lit>:not(.spot):not(.beam){position:relative;z-index:1}
/* tilt */
[data-tilt]{transition:transform .22s var(--e)}

/* ── watch it work, on the dark band ────────────────────────────────────────────────────────── */
.stage-in{position:relative;border-radius:30px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.022));
  box-shadow:inset 0 0 0 1px rgba(243,240,233,.1),inset 0 1px 0 rgba(255,255,255,.1),0 60px 100px -60px #000}
.night .beam::after{width:220px;background:linear-gradient(to left,var(--gold-lit),rgba(227,181,110,.5) 34%,transparent)}
.night .stage-tabs{border-bottom-color:var(--n-line)}
.night .stage-tabs button{color:var(--n-faint)}
.night .stage-tabs b{color:var(--n-grey)}
.night .stage-tabs button.on{background:rgba(255,255,255,.06)}.night .stage-tabs button.on b{color:#fff}
.night .stage-tabs i{background:rgba(243,240,233,.13)}
.stage-tabs i::after{background:linear-gradient(90deg,var(--gold),var(--gold-lit))}
/* the progress beam: the steps already played keep their line full, so the five lines read as one rail filling left to right */
.stage.js .stage-tabs li.done i::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.night .stage-tabs button:not(.on):hover b{color:#fff}}
.stage-body{display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);align-items:start}
.stage-mon{padding:clamp(22px,3vw,40px) 0 clamp(22px,3vw,40px) clamp(22px,3vw,40px)}
.stage-mon .lk-core{border-radius:22px;box-shadow:0 0 0 1px rgba(243,240,233,.16),0 0 0 6px rgba(243,240,233,.045),0 34px 60px -22px #000}
.stage-mon figcaption{display:grid;gap:5px;margin-top:16px;font:500 13px/1.3 Geist,"PL Sans Fallback",system-ui,sans-serif;color:var(--n-ink)}
.stage-mon figcaption i{font:400 11px/1.3 var(--mono);font-style:normal;color:var(--n-faint)}
.night .pane{border-top-color:var(--n-line)}
.night .pane-h span{color:var(--gold-lit)}.night .pane-h i{color:var(--n-faint)}
.night .pane-q span,.night .pane-a span,.night .panel-k{color:var(--n-faint)}
.night .pane-q q{color:#fff}
.night .pane-a{color:var(--n-grey)}.night .pane-a b{color:#fff}
.night .pane-list,.night .pane-list li{border-color:var(--n-line)}
.night .pane-list b{color:var(--gold-lit)}.night .pane-list span{color:var(--n-ink)}.night .pane-list span i{color:var(--n-faint)}
.night .rail li{background:rgba(255,255,255,.055);color:var(--n-grey);box-shadow:inset 0 0 0 1px var(--n-line)}
.night .rail li.on{background:var(--gold-lit);color:#121211;box-shadow:none}
.night .rail-t li i{color:var(--gold-lit)}.night .rail-t li.on i{color:rgba(18,18,17,.7)}
.night .bn-report th,.night .bn-report td{border-top-color:var(--n-line)}
.night .bn-report th{color:var(--n-ink)}.night .bn-report thead th{color:var(--n-faint)}.night .bn-report td{color:var(--n-grey)}
.night .bn-report td span{color:#7BE0A6;background:rgba(123,224,166,.13)}
.night .steer{color:var(--n-grey)}.night .steer b{color:var(--gold-lit)}
/* animated list: the rows of the step that has just come on arrive one after another (the script numbers them) */
.stage.js .pane.on .pane-list li,.stage.js .pane.on .rail li,.stage.js .pane.on .bn-report tbody tr{animation:arrive .3s var(--e) backwards;animation-delay:calc(90ms + var(--k,0)*36ms)}
@keyframes arrive{from{opacity:0;transform:translateY(8px)}}
@media (max-width:860px){.stage-body{grid-template-columns:minmax(0,1fr)}
  .stage-mon{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:center;padding:20px 20px 0}.stage-mon .lk-core{border-radius:14px}.stage-mon figcaption{margin:0}}
@media (max-width:560px){.stage-in{border-radius:24px}}

/* ── the four services round the engine ─────────────────────────────────────────────────────── */
.sys{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:1fr 1fr;gap:clamp(14px,1.8vw,22px) clamp(44px,8vw,120px);margin:clamp(30px,3.6vw,48px) 0 26px}
.sys-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sys-lines path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.sys-base path{stroke:var(--line-2)}
.sys-base path.soon{stroke-dasharray:2 6;stroke-linecap:round}
.sys-run path{stroke-width:2;stroke-linecap:round}
.sys-hub{position:relative;z-index:1;grid-column:2;grid-row:1/3;align-self:center;display:grid;justify-items:center;gap:9px;padding:26px 24px 22px;border-radius:28px;background:var(--ink);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 7px rgba(18,18,17,.05),0 34px 54px -28px rgba(24,36,52,.65)}
.sys-hub .glyph{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#fff;color:var(--ink);font:500 15px/1 var(--mono);letter-spacing:-.04em}
.sys-hub b{font:500 15px/1 Geist,"PL Sans Fallback",system-ui,sans-serif;letter-spacing:-.01em}
.sys-hub i{font:500 9.5px/1 var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.58);white-space:nowrap}
.sys-node{position:relative;z-index:1;display:grid;align-content:center;padding:clamp(18px,2vw,26px);border-radius:24px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.sys-node .tag{margin-bottom:12px}
.sys-node b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(19px,1.75vw,24px);line-height:1.22;letter-spacing:-.015em;color:var(--grey)}
.sys-node h3{font-size:clamp(21px,2vw,27px);color:var(--grey)}
.sys-node p{margin-top:10px;color:var(--faint);font-size:15px;line-height:1.55}
.sys-node.now{background:#fff;box-shadow:inset 0 0 0 1px rgba(168,120,44,.55),0 0 0 6px rgba(168,120,44,.07),0 26px 46px -30px rgba(24,36,52,.55)}
.sys-node.now b,.sys-node.now h3{color:var(--ink)}.sys-node.now b{font-size:clamp(22px,2.1vw,29px)}.sys-node.now p{color:var(--grey)}
.n1{grid-column:1;grid-row:1}.n2{grid-column:3;grid-row:1}.n3{grid-column:1;grid-row:2}.n4{grid-column:3;grid-row:2}
.dfy{display:block;margin-top:14px;font:500 10.5px/1 var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.dfy-top{font-weight:500;color:var(--ink);white-space:nowrap}
.night .sys-base path{stroke:rgba(243,240,233,.24)}
.night .sys-hub{background:var(--n-ink);color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 0 0 7px rgba(243,240,233,.06),0 40px 70px -30px #000}
.night .sys-hub .glyph{background:var(--ink);color:#fff}.night .sys-hub i{color:rgba(18,18,17,.6)}
.night .sys-node{background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--n-line)}
.night .sys-node h3,.night .sys-node b{color:var(--n-grey)}.night .sys-node p{color:var(--n-faint)}
.night .sys-node.now{background:#1A1917;box-shadow:inset 0 0 0 1px rgba(227,181,110,.6),0 0 0 6px rgba(227,181,110,.07),0 30px 60px -30px #000}
.night .sys-node.now h3,.night .sys-node.now b{color:#fff}.night .sys-node.now p{color:var(--n-grey)}
.night .dfy{color:var(--gold-lit)}
.night .sys{margin-top:0}
@media (max-width:760px){
  .sys{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:22px}
  .sys-lines{display:none}
  .sys-hub{grid-column:1;grid-row:auto;justify-self:center;display:flex;align-items:center;gap:10px;padding:7px 18px 7px 7px;border-radius:999px}
  .sys-hub .glyph{width:34px;height:34px;border-radius:50%}.sys-hub i{display:none}
  .sys-node,.n1,.n2,.n3,.n4{grid-column:1;grid-row:auto}
  .sys-node::before{content:"";position:absolute;left:50%;bottom:100%;height:22px;border-left:1px dashed var(--line-2)}
  .sys-node.now::before{border-left:2px solid var(--gold);margin-left:-.5px}
  .night .sys-node::before{border-left-color:rgba(243,240,233,.3)}.night .sys-node.now::before{border-left-color:var(--gold-lit)}
}
@media (prefers-reduced-motion:reduce){.sys-run{display:none}}

/* ── the dashboard, feature by feature ───────────────────────────────────────────────────────
   One list of six: the whole screen, then five parts of it. Every picture is a 2x or 3x photograph drawn at no more than its
   natural size (the widths below are caps, never stretches), so it is sharp on any screen.
   AS WRITTEN (no script, "reduce motion", a browser that cannot): a plain list, the whole screen first and the five parts in a
   row of cards under it. On a phone: a row of phone screens you swipe with a thumb, each in a phone's frame.
   WITH THE SCRIPT, on a wide screen, the list is drawn one of three ways (data-show):
     b  one screen, one idea at a time (the one the pages use): the frame stays where it is while you scroll; it steps back a
        little and one part at a time is lifted out in front of it, with its line beside it. After Aceternity UI's Sticky Scroll
        Reveal (Manu Arora; free for personal and commercial use): a sticky stage and the step that is in view.
     a  a scroll stack: each card stays as the next slides up over it and the one beneath settles back (after fancy's Stacking
        Cards, Daniel Petho, MIT: position sticky, and a scale tied to the scroll).
     c  a rail: press or point at a line and its part is lifted out; left alone it moves on (after Motion Primitives' Animated
        Background, MIT, as on the stage of "watch it work").
   Natural scroll speed throughout: nothing is held, and the wheel is never taken. Transform and opacity only. */
.show{position:relative;margin:clamp(30px,3.6vw,48px) 0 0}
.show-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(22px,2.6vw,36px) clamp(12px,1.6vw,22px)}
.st{min-width:0;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:16px}
.st-all{grid-column:1/-1}
.st-cap{display:grid;gap:6px;align-content:start}
.st-cap i{font:500 10.5px/1 var(--mono);font-style:normal;letter-spacing:.14em;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.st-cap b{font-family:var(--serif);font-weight:300;font-size:clamp(19px,1.7vw,23px);line-height:1.18;letter-spacing:-.018em}
.st-cap span{color:var(--grey);font-size:14px;line-height:1.5}
.st-pic{display:grid;place-items:center}
.st:not(.st-all) .st-pic{height:clamp(200px,22vw,300px);padding:12px;border-radius:22px;background:var(--alt);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.st:not(.st-all) .wide,.st:not(.st-all) .lift{display:grid;place-items:center;height:100%;min-height:0}
.st .lift img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 0 0 1px rgba(18,18,17,.08),0 14px 26px -18px rgba(24,36,52,.5)}
.st-all .st-pic{display:block}
.dev-in{border-radius:18px;overflow:hidden;background:#FBFAF8;box-shadow:0 0 0 1px rgba(18,18,17,.1),0 0 0 7px rgba(18,18,17,.035),0 3px 8px rgba(24,36,52,.06),0 60px 100px -50px rgba(24,36,52,.55)}
.dev-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#fff;box-shadow:inset 0 -1px 0 var(--line)}
.dev-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.dev-bar span{margin-left:10px;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.dev-screen img{display:block;width:100%;height:auto}
.ph{padding:8px;border-radius:40px;background:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 1px rgba(18,18,17,.5),0 3px 8px rgba(24,36,52,.12),0 40px 60px -30px rgba(24,36,52,.6)}
.ph img{display:block;width:100%;height:auto;border-radius:32px}
.show figcaption{display:flex;align-items:center;gap:10px;margin-top:clamp(22px,2.6vw,34px);font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.show figcaption::before{content:"";flex:none;width:18px;height:1px;background:var(--line-2)}
.show-rail{display:flex;gap:6px}
.show-rail i{width:22px;height:2px;border-radius:2px;background:var(--line-2);transition:background-color .25s var(--e)}
.show-rail i.on{background:var(--gold)}
@media (min-width:701px){.st .ph{display:none}}
@media (min-width:701px) and (max-width:1000px){.show-list{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* b: one screen, one idea at a time */
.show.pin{height:calc(100vh + var(--steps,6)*var(--step,56vh));margin-top:0}
.show.pin .show-list{position:sticky;top:0;height:100vh;grid-template-columns:minmax(0,300px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:0 clamp(28px,5vw,80px);align-items:center;padding:88px 0 56px}
.show.pin .st{display:contents}
.show.pin .st-cap,.show.pin .st-all .st-cap{display:grid;grid-area:1/1;gap:12px;opacity:0;transform:translateY(14px);transition:opacity .3s var(--e),transform .5s var(--e)}
.show.pin .st.on .st-cap{opacity:1;transform:none}
.show.pin .st-cap b{font-size:clamp(30px,3.2vw,44px);line-height:1.04;letter-spacing:-.028em}
.show.pin .st-cap span{font-size:17px;line-height:1.55;max-width:26em}
.show.pin .st-pic,.show.pin .st:not(.st-all) .st-pic{grid-area:1/2;display:grid;place-items:center;height:100%;min-height:0;padding:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.show.pin .st-all .st-pic{transition:opacity .4s var(--e),transform .6s var(--e)}
.show.pin .st-all .wide{width:100%}
.show.pin.back .st-all .st-pic{opacity:.3;transform:scale(.95)}
.show.pin .st:not(.st-all) .st-pic{opacity:0;transform:translateY(26px) scale(.97);transition:opacity .3s var(--e),transform .55s var(--e);pointer-events:none}
.show.pin .st.on:not(.st-all) .st-pic{opacity:1;transform:none}
.show.pin .lift img{max-height:min(640px,calc(100vh - 190px));border-radius:22px;box-shadow:0 0 0 1px rgba(18,18,17,.09),0 0 0 7px rgba(18,18,17,.03),0 4px 10px rgba(24,36,52,.08),0 60px 90px -40px rgba(24,36,52,.6)}
.show.pin .st-pic{position:relative;z-index:1}
.show.pin .st:not(.st-all) .st-pic{z-index:2}
.show.pin .show-rail{position:absolute;left:0;bottom:60px}
/* the label of the group stays in sight for the whole walk (the script copies the caption's words into the stage; the caption itself is kept for a screen reader) */
.show-note{position:absolute;right:0;bottom:56px;margin:0;font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.show.pin figcaption{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.home .show.pin{--step:46vh}

/* a: the scroll stack */
.show.stack .show-list{display:block}
.show.stack .st{position:sticky;top:calc(92px + var(--i)*12px);display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;margin-bottom:26px;min-height:min(600px,calc(100vh - 190px));padding:clamp(24px,3vw,44px);border-radius:32px;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(18,18,17,.07),0 -18px 40px -30px rgba(24,36,52,.35),0 30px 60px -40px rgba(24,36,52,.4);transform-origin:50% 0}
.show.stack .st-cap,.show.stack .st-all .st-cap{display:grid;gap:12px}
.show.stack .st-cap b{font-size:clamp(28px,3vw,40px);line-height:1.05;letter-spacing:-.026em}
.show.stack .st-cap span{font-size:16.5px}
.show.stack .st:not(.st-all) .st-pic{height:min(500px,calc(100vh - 290px));background:var(--alt)}
.show.stack .st-dim{position:absolute;inset:0;border-radius:inherit;background:var(--ink);opacity:0;pointer-events:none}

/* c: the rail you press */
.show.press .show-list{grid-template-columns:minmax(0,320px) minmax(0,1fr);grid-template-rows:repeat(6,auto) 1fr;gap:0 clamp(28px,5vw,80px);align-items:start;min-height:640px}
.show.press .st{display:contents}
.show.press .st-cap,.show.press .st-all .st-cap{display:grid;grid-column:1;gap:4px;padding:16px 0 18px;border-top:1px solid var(--line);cursor:pointer;position:relative}
.show.press .st-cap span{display:none}
.show.press .st.on .st-cap span{display:block}
.show.press .st-cap b{color:var(--grey);transition:color .2s var(--e)}
.show.press .st.on .st-cap b{color:var(--ink)}
.show.press .st-cap::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}
.show.press .st.on .st-cap::after{animation:fill var(--dwell,6s) linear forwards}
.show.press.hold .st.on .st-cap::after{animation-play-state:paused}
.show.press .st-pic,.show.press .st:not(.st-all) .st-pic{grid-column:2;grid-row:1/-1;display:grid;place-items:center;height:640px;padding:0;background:none;box-shadow:none;border-radius:0;overflow:visible;opacity:0;transform:scale(.98);transition:opacity .28s var(--e),transform .4s var(--e);pointer-events:none}
.show.press .st.on .st-pic{opacity:1;transform:none;pointer-events:auto}
.show.press .st-all .wide{width:100%}
.show.press .lift img{max-height:600px;border-radius:22px;box-shadow:0 0 0 1px rgba(18,18,17,.09),0 0 0 7px rgba(18,18,17,.03),0 50px 80px -40px rgba(24,36,52,.6)}

/* on a phone: six phone screens in a row for the thumb. Each is a real 2x screen in a phone's frame, wide enough to read; the
   row snaps, the next one shows at the edge so the row says "swipe", and the six short lines under it show where you are. */
@media (max-width:700px){
  .show .st .wide,.show .st:not(.st-all) .wide{display:none}
  .show-list{display:flex;gap:16px;margin-inline:calc(var(--gut)*-1);padding:8px var(--gut) 10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .show-list::-webkit-scrollbar{display:none}
  .st,.st-all{flex:0 0 min(78vw,318px);scroll-snap-align:center;gap:18px}
  .st-all .st-cap{display:grid}
  .st .st-pic,.st:not(.st-all) .st-pic{display:block;height:auto;padding:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
  .st-cap b{font-size:23px}.st-cap span{font-size:15px}
  .show-rail{justify-content:center;margin-top:16px}
  .show figcaption{margin-top:18px}
}
@keyframes drift-a{from{transform:translateY(30px)}to{transform:translateY(-30px)}}
/* a real screen in a plate (the How page): at its own size, never stretched */
.plate.shot-in{display:grid;place-items:center;padding:clamp(16px,2.4vw,30px);background:var(--alt)}
.plate.shot-in img{width:auto;max-width:100%;height:auto;border-radius:20px;box-shadow:0 0 0 1px rgba(18,18,17,.08),0 24px 40px -26px rgba(24,36,52,.5)}

/* ── clips in, video out (the landing page): a light runs down the line between them ────────── */
.home .io-arrow{position:relative;width:2px;height:46px;border-radius:2px;background:var(--line-2);box-shadow:none;overflow:hidden;transform:none}
.home .io-arrow svg{display:none}
.home .io-arrow::after{content:"";position:absolute;left:0;top:0;width:100%;height:60%;background:linear-gradient(transparent,var(--gold));transform:translateY(-110%)}
@media (prefers-reduced-motion:no-preference){.home .io.in .io-arrow::after{animation:drop 2.4s var(--e-io) infinite}}
@keyframes drop{from{transform:translateY(-110%)}to{transform:translateY(180%)}}

/* ── the Motion page: the films, then the wall of looks ─────────────────────────────────────── */
.night .mf{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px var(--n-line),inset 0 1px 0 rgba(255,255,255,.08)}
.night .mg-lines,.night .mg-lines li{border-color:var(--n-line)}
.night .mg-lines li{color:var(--n-ink)}.night .mg-lines li::before{color:var(--gold-lit)}
.mf-for{margin-top:12px;font:400 12px/1.5 var(--mono);color:var(--faint)}
.night .mf-for{color:var(--n-faint)}
.night #looks{margin-top:clamp(64px,8vw,120px)}
/* marquee: each row is written twice and moved by half its own width, so it loops without a seam. Pointing at a row holds it. */
.wall{position:relative;display:grid;gap:16px;margin-top:clamp(30px,3.6vw,48px)}
.wall::before,.wall::after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:9%;pointer-events:none}
.wall::before{left:0;background:linear-gradient(90deg,var(--night),transparent)}
.wall::after{right:0;background:linear-gradient(270deg,var(--night),transparent)}
.wall-row{overflow:hidden}
.wall-track{display:flex;gap:16px;width:max-content;padding-block:6px 4px}
.wall .tile{flex:none;width:clamp(148px,15.4vw,212px);margin:0}
.night .tile figcaption{color:var(--n-grey)}
.night .tile .lk-core{box-shadow:0 0 0 1px rgba(243,240,233,.14),0 20px 34px -22px #000}
@media (prefers-reduced-motion:no-preference){
  .wall-track{animation:wall var(--dur,74s) linear infinite}
  .wall-row.rev .wall-track{animation-direction:reverse}
  .wall.away .wall-track{animation-play-state:paused}
}
@media (hover:hover) and (pointer:fine){.wall-row:hover .wall-track{animation-play-state:paused}}
@keyframes wall{to{transform:translateX(calc(-50% - 8px))}}
@media (prefers-reduced-motion:reduce){.wall::before,.wall::after{display:none}.wall-row{overflow-x:auto;scrollbar-width:thin}.wall-track{padding-inline:var(--gut)}.wall .tile[aria-hidden]{display:none}}

/* ── the How page: the phone's screens, and the day on the dark band ────────────────────────── */
.plate.shots{align-items:start;gap:clamp(12px,2vw,26px);padding:clamp(16px,2.4vw,30px)}
.plate.shots img{border-radius:22px;box-shadow:0 0 0 1px rgba(18,18,17,.12),0 0 0 6px #fff,0 0 0 7px rgba(18,18,17,.1),0 28px 44px -26px rgba(24,36,52,.55)}
.plate.shots img:last-child{margin-top:clamp(18px,3vw,44px)}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference) and (min-width:901px){
  .plate.shots img:last-child{animation:drift-a linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
}}
.night .day{position:relative;border-top-color:rgba(243,240,233,.4)}
.night .day li{border-bottom-color:var(--n-line)}
.night .day time,.night .day b{color:#fff}
.night .day span{color:var(--n-grey)}
.night .day .you time{color:var(--gold-lit)}
.night .eg{color:var(--n-grey);box-shadow:inset 0 0 0 1px var(--n-line)}
/* the progress beam down the day: a line that grows with the scroll */
.night .day::before{content:"";position:absolute;left:-18px;top:0;bottom:0;width:2px;border-radius:2px;background:linear-gradient(var(--gold-lit),var(--gold));transform-origin:50% 0}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .night .day::before{animation:grow linear both;animation-timeline:view();animation-range:entry 30% cover 62%}
}}
@keyframes grow{from{transform:scaleY(0)}}
@media (max-width:860px){.night .day::before{left:-10px}}

/* ── the engine, on the dark band ───────────────────────────────────────────────────────────── */
.night .pipe-col li,.night .pipe-end{background:#1A1A18;color:var(--n-ink);box-shadow:inset 0 0 0 1px var(--n-line),0 14px 24px -16px #000}
.night .pipe-hub{background:var(--n-ink);color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 0 0 6px rgba(243,240,233,.06),0 30px 50px -28px #000}
.night .pipe-hub .glyph{background:var(--ink);color:#fff}
.night .pipe-base path{stroke:rgba(243,240,233,.22)}
.night .pipe-end span{color:var(--n-grey)}
.night .pipe .sh{box-shadow:inset 0 0 0 1.5px var(--gold-lit)}
.night .bn{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.night .bn-in{background:#151514;box-shadow:inset 0 0 0 1px rgba(243,240,233,.08),inset 0 1px 0 rgba(255,255,255,.07)}
.night .bn p{color:var(--n-grey)}
.night.engine .bn p{color:var(--n-ink)}.night.engine .bn .how{color:var(--n-faint)}
.night .bn-k{color:var(--gold-lit)}
.night .bn b.num{color:#fff}
.night .looks img{box-shadow:0 0 0 1px rgba(243,240,233,.16)}
.night.engine{padding-top:clamp(56px,7vw,104px)}
.night .pipe{margin-top:0}
.engine .bn b.num,.nums b,.same-big b,.io-k b{font-variant-numeric:lining-nums tabular-nums}

/* ── the closing heading: its words light up with the scroll (text reveal) ──────────────────── */
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .reveal .rv{animation:lit linear both;animation-timeline:view();animation-range:cover calc(6% + var(--i)*2.4%) cover calc(20% + var(--i)*2.4%)}
}}
@keyframes lit{from{opacity:.14}}

/* the services page: the three stills stand under the heading of what it does today */
.deep .svc-pix{margin-top:22px;max-width:340px}
.deep .more{margin-top:20px}

/* the closing heading holds two lines at every width; the dark band of the services drawing needs no head room; the bar stays
   white over a dark band */
.close h2{font-size:clamp(36px,4.5vw,60px)}
.home .close h2{font-size:clamp(34px,4.2vw,56px)}
.close-in{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
@media (max-width:900px){.close-in{grid-template-columns:minmax(0,1fr)}}
#system{padding-block:clamp(40px,5.4vw,84px)}
#system .sys{margin-bottom:0}
.bar{background:rgba(255,255,255,.93)}


/* ── round four, second half (owner, 8:33pm: the living pieces run through every page, not only the top) ──────────────
   a note in the "you'll" voice (what is being built), set apart from what is done today */
.note{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:26px 0 0;padding:14px 18px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--grey);font-size:15.5px;line-height:1.5;max-width:46em}
.note .tag{margin:0;flex:none}
.note+.links{margin-top:22px}
.deep .note{margin:22px 0 4px}
/* spotlight on the light cells too: a faint warm light under the pointer (the same script, a quieter colour) */
.lit:not(.night .lit)>.spot{background:radial-gradient(closest-side,rgba(168,120,44,.11),transparent)}
.bn-in.lit,.case-in.lit,.form .plate.lit{overflow:hidden}
/* animated list, outside the stage: the rows of a list rise one after another when the list comes on screen (the script arms
   them; transform only, so no row is ever hidden) */
.armed[data-ri]{transform:translateY(14px)}
.armed[data-ri].in{transform:none;transition:transform .5s var(--e) calc(var(--ri)*55ms)}
/* the terminal on the engine page: the reply arrives a beat after the order */
@media (prefers-reduced-motion:no-preference){.term.in .way-reply{animation:arrive .32s var(--e) .45s backwards}}
/* a framed video leans; its sound button stays flat on it */
.io-out .tray,.mf .tray,.about-film .lk-core{will-change:auto}

/* the caption under the player: its second line, on the day the engine gathering clips has been proven */
.cap-more{flex:1 1 100%;margin-top:4px;color:var(--ink)}
.cap-more a{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;white-space:nowrap}
/* the Motion page with more than three films: two stand large with their lines, the rest stand in a row under them */
.mf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(16px,2.4vw,30px);margin-top:6px}
.mfc{min-width:0}
.mfc .tray{padding:7px;border-radius:30px}
.mfc .lk-core{border-radius:23px}
.mfc .lk-core video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.mfc h3{margin-top:18px;font-size:clamp(22px,2vw,27px)}
.mfc .io-k{margin:10px 0 0;line-height:1.5}
.mfc .snd{left:12px;bottom:12px;padding:8px 12px 8px 10px;font-size:12.5px}
@media (max-width:560px){.mf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.mfc h3{font-size:19px}.mfc .tray{padding:5px;border-radius:22px}.mfc .lk-core{border-radius:17px}}

/* How it works: the interview's two screens stand alone now (the dashboard has its own walk under them) */
.views{grid-template-columns:minmax(0,1fr)}
.view-a{max-width:640px}

/* ── the interview: a laptop in a workplace, a call on its screen (owner, 9:23pm and 9:52pm) ──
   A real photograph of a laptop on a desk (from the engine's own verified library, CC0), and on its display a live call: the
   interviewer's tile, the client's own tile with the camera off, and the question being asked as a caption. The call is HTML
   laid onto the display where it was measured in the photograph (--sx --sy --sw --sh), so it stays sharp at any size. Beside it
   the client's brain, a row arriving for each answer. ⚠️ The interviewer's tile is a neutral silhouette until an AI-generated
   presenter is approved (build_agency.py, "THE AVATAR SLOT"): no face is drawn that is not known to be one.
   AS WRITTEN (no script): the picture, the questions in a short list under it, every row in place. With "reduce motion": a
   still, the first question as the caption. WITH THE SCRIPT the caption changes on a slow timer and the bullets write themselves
   (animated list, after Magic UI, MIT); pointing at it holds it. Transform and opacity only. */
.iv{position:relative;margin-top:clamp(30px,3.6vw,48px)}
.scene{position:relative;margin:0;border-radius:32px;overflow:hidden;container-type:inline-size;background:#EFEFED;box-shadow:inset 0 0 0 1px rgba(18,18,17,.06),0 0 0 7px rgba(18,18,17,.03),0 50px 90px -50px rgba(24,36,52,.5)}
.scene-bg{display:block;width:100%;height:auto}
.call{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);border-radius:.45cqw;overflow:hidden;background:#0C0C0B}
.call::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;pointer-events:none;background:linear-gradient(transparent,rgba(8,8,7,.84))}
.call-main{position:absolute;inset:0}
.call-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sil{position:absolute;inset:0;background:linear-gradient(180deg,#ECE6DB,#D6CCBC)}
.sil{display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.sil i{flex:none;width:20%;aspect-ratio:1;margin-bottom:3%;border-radius:50%;background:#BCB1A0}
.sil b{flex:none;width:52%;aspect-ratio:2/1.1;border-radius:50% 50% 0 0/88% 88% 0 0;background:#BCB1A0}
.call .iv-who{position:absolute;z-index:1;left:3.2%;top:5.5%;display:inline-flex;align-items:center;gap:.55cqw;padding:.5cqw .8cqw;border-radius:999px;background:rgba(14,14,13,.72);color:#fff;font:500 max(7.5px,.86cqw)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.call .iv-who::before{content:"";width:.5cqw;height:.5cqw;min-width:4px;min-height:4px;border-radius:50%;background:var(--gold-lit)}
.call-self{position:absolute;z-index:1;right:3.2%;top:5.5%;width:17%;aspect-ratio:4/3;display:grid;place-items:center;border-radius:.5cqw;background:#1F1F1D;color:#CFCBC2;font:500 max(9px,1.25cqw)/1 Geist,"PL Sans Fallback",system-ui,sans-serif;letter-spacing:.04em;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.iv-qs{list-style:none;margin:0;padding:16px 22px 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 28px;background:#fff;counter-reset:q}
.iv-qs li{font-size:13.5px;line-height:1.45;color:var(--grey)}
.iv-intro{margin:16px 0 0;max-width:46em;font-size:13.5px;line-height:1.55;color:var(--faint)}
.iv-intro q{quotes:"\201C" "\201D"}
/* with the script (or as a still): the question sits on the laptop's display as the call's caption */
.iv.live .iv-qs,.iv.still .iv-qs{position:absolute;z-index:2;left:calc(var(--sx) + 1.5cqw);bottom:calc(100% - var(--sy) - var(--sh) + 1.5cqw);width:calc(var(--sw) - 3cqw);display:block;padding:0;background:none}
.iv.live .iv-qs li,.iv.still .iv-qs li{display:none;font:500 clamp(11px,1.92cqw,22px)/1.24 Geist,"PL Sans Fallback",system-ui,sans-serif;letter-spacing:-.012em;color:#fff}
.iv.live .iv-qs li.on,.iv.still .iv-qs li.on{display:block}
.iv-brain{display:grid;align-content:start;margin-top:14px;padding:clamp(18px,2.2vw,28px);border-radius:26px;background:#fff;box-shadow:inset 0 0 0 1px rgba(18,18,17,.07),0 0 0 7px rgba(18,18,17,.03),0 40px 70px -40px rgba(24,36,52,.5)}
.iv-brain .panel-k{padding:0 0 12px}
.iv-brain .panel-k i{font-style:normal;letter-spacing:.04em;text-transform:none}
.iv-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.iv-rows li{display:grid;grid-template-columns:minmax(0,92px) minmax(0,1fr);gap:4px 14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.45}
.iv-rows b{font:500 10px/1.8 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.iv-end{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px}
.iv-yes{display:inline-flex;padding:11px 18px;border-radius:999px;background:var(--ink);color:#fff;font:500 14px/1 Geist,"PL Sans Fallback",system-ui,sans-serif}
.iv-done{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ok)}
.iv-done::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(31,122,76,.14)}
.iv-three{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 34px;font-family:var(--serif);font-weight:300;font-size:clamp(20px,1.9vw,26px);letter-spacing:-.016em}
.iv-three li:nth-child(n+2){color:var(--grey)}
/* on a wide screen the brain stands in the picture, over the books at the right of the desk */
@media (min-width:1001px){
  .iv-brain{position:absolute;z-index:3;right:clamp(14px,2vw,26px);top:50%;width:min(33.5%,372px);margin:0;transform:translateY(-50%)}
  .iv:not(.live):not(.still) .iv-qs{grid-template-columns:minmax(0,1fr);padding-right:40%}   /* as written: the list keeps clear of the brain's card */
}
/* on a phone the scene is one call tile in a phone's frame: the same interviewer, the same caption */
@media (max-width:700px){
  .scene{container-type:normal;max-width:330px;margin-inline:auto;padding:8px;border-radius:40px;background:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 40px 60px -30px rgba(24,36,52,.6)}
  .scene-bg{display:none}
  .call{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:9/15;border-radius:32px}
  .call .iv-who{left:16px;top:18px;gap:7px;padding:7px 11px;font-size:10px}
  .call .iv-who::before{width:6px;height:6px}
  .call-self{right:16px;top:16px;width:74px;border-radius:12px;font-size:15px}
  .sil i{width:36%}.sil b{width:92%}
  .iv-qs{grid-template-columns:minmax(0,1fr);background:none;padding:14px 14px 10px}
  .iv-qs li{color:#CFCBC2}
  .iv.live .iv-qs,.iv.still .iv-qs{left:26px;right:26px;width:auto;bottom:34px}
  .iv.live .iv-qs li,.iv.still .iv-qs li{font-size:21px}
  .iv-brain{border-radius:26px}.iv-rows li{grid-template-columns:minmax(0,1fr);gap:2px}
}
.sys-proof{margin-top:14px;font-size:14px}
/* ── two more, from the second shortlist of 21st.dev (11 Oct, 9:40pm) ─────────────────────────
   morphing dialog (after the Morphing Dialog on 21st.dev by patrick-xin, MIT; written here in plain CSS and script): press a
   look on the wall and its tile grows into the film, then closes back into its tile. A real <dialog>, so Escape and the
   backdrop close it and the keyboard stays inside it. The growing is a FLIP: one transform from the tile's place to the
   middle of the screen. With "reduce motion" on it simply opens.
   streaming text (after Spectrum UI's Streaming Text by arihantcodes, Apache License 2.0; written here in plain CSS and script):
   the interviewer's question arrives a word at a time, as speech does. No cursor, no sources: only the order of arrival. */
.wall .tile{cursor:pointer}
.wall .tile .lk-core{transition:transform .14s var(--e)}
.wall .tile:active .lk-core{transform:scale(.97)}
.wall .tile:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:18px}
.morph{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}
.morph::backdrop{background:transparent}
.morph-bg{position:absolute;inset:0;background:rgba(8,8,7,.78)}
.morph-stage{position:absolute;inset:0;margin:auto;height:min(86vh,820px);max-width:calc(100vw - 32px);aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#0A0A09;transform-origin:0 0;box-shadow:0 0 0 1px rgba(243,240,233,.16),0 60px 120px -30px #000}
.morph-stage video{display:block;width:100%;height:100%;object-fit:cover}
.morph-name{position:absolute;left:14px;bottom:14px;padding:9px 14px;border-radius:999px;background:rgba(14,14,13,.74);color:#fff;font:500 13px/1 Geist,"PL Sans Fallback",system-ui,sans-serif;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.morph-x{position:absolute;right:12px;top:12px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(14,14,13,.74);color:#fff;font:400 20px/1 Geist,system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:transform .13s var(--e)}
.morph-x:active{transform:scale(.97)}
.morph-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.iv.live .iv-qs li.on .w{display:inline-block;animation:stream .3s var(--e) backwards;animation-delay:calc(var(--w)*46ms)}}
@keyframes stream{from{opacity:0;transform:translateY(5px)}}

/* ══ third pass (11 Oct, 10:14pm to 10:18pm) ════════════════════════════════════════════════════════════════════════
   THE FLOW (owner: "this isn't all we do, and make this a sick flow in itself"): the path a business travels as one line with one
   light. The light (animated beam, after Magic UI, MIT, here as one element moved by transform) travels node to node; the line
   behind it fills; the node it reaches opens its real panel under the line. It plays by itself, slowly; pointing at it or putting
   the keyboard in it holds it; pressing a node sends the light there. On a phone the line stands upright and the light runs
   down it. As written (no script, "reduce motion"): every step listed, each with its panel. */
.flow-rail{position:relative;padding:26px 18px 4px;border-bottom:1px solid var(--n-line)}
.flow-line{position:absolute;left:calc(18px + (100% - 36px)/22);right:calc(18px + (100% - 36px)/22);top:36px;height:2px;border-radius:2px;background:rgba(243,240,233,.14)}
.flow-line i{position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-lit));transform-origin:0 50%;transform:scaleX(0);transition:transform .7s var(--e-io)}
.flow-line b{position:absolute;left:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:#FBE3B5;box-shadow:0 0 0 4px rgba(227,181,110,.22),0 0 22px 6px rgba(227,181,110,.5);transition:transform .7s var(--e-io)}
.stage:not(.js) .flow-line b{display:none}
.flow-rail .stage-tabs{position:relative;padding:0;border:0;gap:0;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none}
.flow-rail .stage-tabs button,.flow-rail .nx>span{display:grid;justify-items:center;align-content:start;gap:12px;width:100%;padding:6px 2px 14px;border-radius:12px;background:none;text-align:center}
.flow-rail .stage-tabs button::before,.flow-rail .nx>span::before{content:"";width:10px;height:10px;border-radius:50%;background:#2B2A27;box-shadow:0 0 0 1px rgba(243,240,233,.34);transition:background-color .2s var(--e),transform .2s var(--e)}
.flow-rail .stage-tabs b{font:500 13px/1.15 Geist,"PL Sans Fallback",system-ui,sans-serif;letter-spacing:-.005em;color:var(--n-faint);transition:color .2s var(--e)}
.flow-rail .stage-tabs button span{display:none}
.night .flow-rail .stage-tabs button.on{background:none}
.flow-rail li.done button::before{background:var(--gold)}
.flow-rail button.on::before{background:var(--gold-lit);transform:scale(1.3)}
.flow-rail button.on b,.flow-rail li.done b{color:#fff}
.flow-rail .nx{opacity:.5}
.flow-rail .nx em{margin-top:-7px;font:500 9px/1 var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--n-faint)}
.flow-rail .nx.now{opacity:1}.flow-rail .nx.now>span::before{background:#7BE0A6}.flow-rail .nx.now em{color:#7BE0A6}
@media (hover:hover) and (pointer:fine){.flow-rail .stage-tabs button:not(.on):hover b{color:#fff}}
@media (max-width:860px){
  .flow-rail{padding:14px 16px 10px}
  .flow-line{left:20px;right:auto;top:30px;bottom:30px;width:2px;height:auto}
  .flow-line i{background:linear-gradient(var(--gold),var(--gold-lit));transform-origin:50% 0;transform:scaleY(0)}
  .flow-line b{left:-5px;top:-6px}
  .flow-rail .stage-tabs{grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}
  .flow-rail .stage-tabs button,.flow-rail .nx>span{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;gap:14px;padding:9px 0;text-align:left}
  .flow-rail .stage-tabs b{font-size:15px}
  .flow-rail .nx>span{grid-template-columns:auto auto minmax(0,1fr)}
  .flow-rail .nx em{margin:0}
}

/* THE INTERVIEWER SPEAKS, AND THE BRAIN IS FED. A small sound meter by the badge moves only while a question is arriving. For each
   answer a point of light leaves the call and lands in the brain as a new row (the script moves it by transform); the header
   counts up; "This is right" pulses once; then the stored state. On a phone, and as a still, every row is simply in place. */
.meter{display:inline-flex;align-items:flex-end;gap:2px;height:.85em;margin-left:.25em}
.meter i{width:2px;height:100%;border-radius:1px;background:var(--gold-lit);transform:scaleY(.25);transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){.iv.speaking .meter i{animation:meter .42s var(--e-io) infinite alternate}.iv.speaking .meter i:nth-child(2){animation-delay:.14s}.iv.speaking .meter i:nth-child(3){animation-delay:.28s}}
@keyframes meter{to{transform:scaleY(1)}}
.iv-brain .panel-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.iv-count{margin-left:auto;font-style:normal;letter-spacing:.08em;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.iv-rows li b::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--ok);vertical-align:1px}
.iv-token{position:absolute;z-index:4;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#FBE3B5;box-shadow:0 0 0 4px rgba(227,181,110,.28),0 0 16px 4px rgba(227,181,110,.55);pointer-events:none;opacity:0}
@media (prefers-reduced-motion:no-preference){.iv.live .iv-yes.pulse{animation:pulse .5s var(--e)}}
@keyframes pulse{40%{transform:scale(1.07)}}

/* TYPE IT, SEND IT, WATCH IT ARRIVE (owner, 10:18pm). The cafe's real request types itself into a composer with its six clips
   attached; Send presses; the names of the stages its job passed through tick by (sped up, and it says so); the finished video
   resolves in with the line the app answered. Then it rests and begins again; pointing at it or putting the keyboard in it holds
   it. As written (no script, "reduce motion"): the request, the stages, the result, all in place. The typing is after Spectrum
   UI's Streaming Text (arihantcodes, Apache License 2.0), the ticking stages after Magic UI's Animated List (MIT); both written
   here in plain CSS and script. Transform and opacity only (and the two colours of a stage's chip). */
.cmp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.6fr) minmax(0,1.15fr);gap:clamp(12px,1.6vw,20px);align-items:stretch;margin-top:28px}
.cmp-box,.cmp-making{padding:clamp(16px,2vw,24px);border-radius:26px;background:#fff;box-shadow:inset 0 0 0 1px rgba(18,18,17,.07),0 0 0 6px rgba(18,18,17,.03),0 30px 50px -36px rgba(24,36,52,.4)}
.cmp-box{display:grid;align-content:start;gap:14px;transition:opacity .25s var(--e),transform .25s var(--e)}
.cmp .panel-k{padding:0}.cmp .panel-k i{font-style:normal;letter-spacing:.04em;text-transform:none}
.cmp-clips{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin:0}
.cmp-clips img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:#151514}
.cmp-say{margin:0;padding:14px 16px;border-radius:16px;background:var(--alt);box-shadow:inset 0 0 0 1px var(--line);min-height:6.4em}
.cmp-say q{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(18px,1.7vw,22px);line-height:1.28;quotes:"\201C" "\201D"}
.cmp-send{justify-self:end;display:inline-flex;align-items:center;gap:10px;padding:6px 6px 6px 18px;border-radius:999px;background:var(--ink);color:#fff;font:500 14px/1 Geist,"PL Sans Fallback",system-ui,sans-serif;transition:transform .14s var(--e)}
.cmp-send .ar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14)}
.cmp-making{display:grid;align-content:start;gap:12px;transition:opacity .25s var(--e)}
.cmp-stages{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.cmp-stages li{padding:5px 8px;border-radius:6px;background:var(--alt);font:400 11px/1 var(--mono);color:var(--grey);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .18s var(--e),color .18s var(--e)}
.cmp-out{margin:0;display:grid;align-content:start;gap:12px;transition:opacity .28s var(--e),transform .28s var(--e)}
.cmp-out .lk-core{border-radius:22px}
.cmp-out .snd{left:12px;bottom:12px;padding:8px 12px 8px 10px;font-size:12.5px}
.cmp-out figcaption{font-size:14.5px;line-height:1.5}
.cmp-out figcaption span{display:block;margin-bottom:6px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.cmp-out figcaption i{display:block;margin-top:6px;font:400 11.5px/1.3 var(--mono);font-style:normal;color:var(--faint)}
.cmp.live .cmp-say .c{opacity:0}
.cmp.live.typed .cmp-say .c{opacity:1;transition:opacity .01s linear calc(var(--c)*26ms)}
.cmp.live.pressed .cmp-send{transform:scale(.97)}
.cmp.live.sent .cmp-box{opacity:.55;transform:scale(.985)}
.cmp.live .cmp-making{opacity:.4}.cmp.live.sent .cmp-making{opacity:1}
.cmp.live .cmp-stages li.done{background:var(--ink);color:#fff;box-shadow:none}
.cmp.live .cmp-out{opacity:0;transform:translateY(12px)}.cmp.live.arrived .cmp-out{opacity:1;transform:none}
@media (max-width:900px){.cmp{grid-template-columns:minmax(0,1fr)}.cmp-say{min-height:0}}

/* the landing page: the film's own strip lies in one row under the composer; and the page is shorter (owner's note: about seven
   screens at 1440): less air between sections, a shorter walk through the dashboard, a narrower interview scene */
.home .ios{grid-template-columns:minmax(0,1fr);margin-top:18px}
.home .io.io-row{grid-template-columns:minmax(0,1fr) 46px minmax(0,1.2fr);align-items:center;gap:0 clamp(12px,2vw,26px)}
.home .io-row .io-arrow{width:46px;height:2px}
.home .io-row .io-arrow::after{width:60%;height:100%;background:linear-gradient(90deg,transparent,var(--gold));transform:translateX(-110%)}
@media (prefers-reduced-motion:no-preference){.home .io-row.in .io-arrow::after{animation:run 2.4s var(--e-io) infinite}}
@keyframes run{from{transform:translateX(-110%)}to{transform:translateX(180%)}}
@media (max-width:860px){.home .io.io-row{grid-template-columns:minmax(0,1fr);gap:12px}.home .io-row .io-arrow{width:2px;height:40px;justify-self:center}
  .home .io-row .io-arrow::after{width:100%;height:60%;background:linear-gradient(transparent,var(--gold));transform:translateY(-110%)}
  .home .io-row.in .io-arrow::after{animation-name:drop}}
.home section{padding-block:clamp(34px,3.2vw,46px)}
.home .show.pin{--step:20vh}
.home .stage.js .pane{min-height:0}

/* a step of the flow that has not run yet is a hollow node; and the landing page's last tightenings */
.flow-rail li.later button::before{background:transparent}
.flow-rail li.later.done button::before,.flow-rail li.later button.on::before{background:var(--gold-lit)}
.home .show.pin{--step:12vh}
.home .close{padding-block:clamp(40px,4vw,56px)}
.home .hero{padding-block:clamp(26px,2.8vw,40px) clamp(28px,3vw,40px)}
.home .cmp{margin-top:22px}
.home footer{padding-block:32px 26px}
.home .credit{--pt:16px;margin-top:26px}

/* the brain's card stands inside the picture's height on a wide screen: its rows are set a size smaller there */
@media (min-width:1001px){
  .iv-brain{padding:20px 22px}
  .iv-rows li{grid-template-columns:minmax(0,80px) minmax(0,1fr);gap:4px 10px;padding:8px 0;font-size:12.5px;line-height:1.42}
  .iv-end{margin-top:12px}.iv-yes{padding:9px 16px;font-size:13px}.iv-done{font-size:12.5px}
}
/* the three services still to come are dimmed by colour, not by opacity: nothing on the page is ever part-hidden */
.flow-rail .nx{opacity:1}
.flow-rail .nx b{color:#6E6B65}
.flow-rail .nx>span::before{background:transparent;box-shadow:0 0 0 1px rgba(243,240,233,.22)}
.flow-rail .nx.now b{color:#fff}

/* the interviewer is a still (owner's own, 10:43pm): honest life, no faked speech. It pushes in a touch and settles with each
   question (3%, so it is never drawn beyond its own pixels on a 2x screen); a ring and the sound meter move only while the caption
   is arriving; a webcam's soft vignette lies over it. The face itself is never moved or warped. On a phone the picture keeps
   its own shape at the top of the call, with the caption under it. */
.iv{max-width:936px;margin-inline:auto}   /* at this width the laptop's display is 378 by 236: with the 3% push-in it asks 2x for 779 by 486 of the picture's 832 by 486 pixels, never more */
.call-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.call-main::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 120% at 50% 40%,transparent 52%,rgba(8,8,7,.42))}
.call-main::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--gold-lit);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .iv.live .call-pic.push{animation:push 2.8s var(--e) backwards}
  .iv.speaking .call-main::after{animation:ring 1.2s var(--e-io) infinite alternate}
}
@keyframes push{from{transform:scale(1.03)}}
@keyframes ring{from{opacity:.15}to{opacity:.75}}
@media (max-width:700px){
  .call{aspect-ratio:auto;display:flex;flex-direction:column;min-height:0;padding-bottom:22px}
  .call-main{position:relative;inset:auto;flex:none;width:100%;aspect-ratio:832/486;overflow:hidden}
  .call::after{display:none}
  .call-self{position:static;align-self:flex-end;margin:14px 16px 0 0;width:64px}
  .iv.live .iv-qs,.iv.still .iv-qs{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:-58px 96px 0 30px;min-height:4.4em;display:block}
  .iv.live .iv-qs li,.iv.still .iv-qs li{font-size:19px}
}

/* THE BRAIN WRITES ITSELF, AND IS NEVER EMPTY (owner, 12 Oct, 8:22am: "see the white space here: add bullet points typing
   themselves out on a 5 second loop"). The card was written one answer at a time and took fifteen seconds to fill, so most of
   the time it was a white panel. Now all six bullets stand in it from the start, each with its small label: what is still to be
   written is drawn as a soft bar IN THE EXACT PLACE OF ITS WORDS (the words are there, set clear), and the writing runs down the
   card, a bullet after a bullet, in about five seconds; the count steps from 1 to 6 as each lands; a small drawn cursor presses
   "Add to brain" ONCE (scale 0.97, one ripple of the accent) and the stored line shows; it rests two seconds, clears, and runs
   again. Because the bars are the words, no line ever moves and the card never changes height. Pointing at it or putting the
   keyboard in it holds it where it is. The interviewer's caption keeps its own slower time. As written (no script, "reduce
   motion"): six bullets, "6 of 6 learned", the stored line. Typing is text changing; what MOVES is transform and opacity. */
.iv-brain{display:flex;flex-direction:column}
.iv-yes{position:relative}
.iv-rows li>span{transition:opacity .16s var(--e)}
.iv-rows.out li>span{opacity:0}
/* 12 Oct 2026: the brain's words arrive by fading in over their own bars (see agency.js). Opacity only. With no script or with
   reduced motion the card is printed whole: these rules need .live, which the script sets only when it will run. */
.iv-rows .bw{position:relative;display:inline-block}
.iv.live .iv-rows .bw::before{content:"";position:absolute;left:0;right:0;top:calc(54% - 3.5px);height:7px;border-radius:4px;background:var(--line);opacity:1;transition:opacity .24s var(--e)}
.iv.live .iv-rows .bw-t{opacity:0;transition:opacity .24s var(--e)}
.iv.live .iv-rows .bw.on::before{opacity:0}
.iv.live .iv-rows .bw.on .bw-t{opacity:1}
.iv.live .iv-rows b{color:var(--faint);transition:color .2s var(--e)}
.iv.live .iv-rows b::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.iv.live .iv-rows li.now b{color:var(--ink)}
.iv.live .iv-rows li.in b{color:var(--gold-ink)}
.iv.live .iv-rows li.in b::before{background:var(--ok);box-shadow:none;animation:landed .3s var(--e)}
@keyframes landed{from{transform:scale(.6)}}
.iv.live .iv-yes::after{content:"";position:absolute;inset:-4px;border-radius:inherit;box-shadow:0 0 0 2px var(--gold-lit);opacity:0;pointer-events:none}
.iv.live .iv-yes{cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .14s var(--e)}
.iv.live .iv-yes:active{transform:scale(.97)}
.iv.live .iv-yes:focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px}
.iv-yes.hit{animation:press .3s var(--e)}
.iv-yes.hit::after{animation:ripple .45s var(--e)}
@keyframes press{30%{transform:scale(.97)}}
@keyframes ripple{from{opacity:.85;transform:scale(.94)}to{opacity:0;transform:scale(1.14)}}
.iv.live .iv-end{margin-top:auto;padding-top:14px}
.iv.live .iv-end .iv-done{opacity:0;transition:opacity .3s var(--e)}
.iv.live .iv-end .iv-done.in{opacity:1}
.iv-cursor{position:absolute;z-index:5;left:0;top:0;width:18px;height:18px;margin:-2px 0 0 -3px;opacity:0;pointer-events:none;transition:transform .38s var(--e-io),opacity .2s var(--e);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M2.5 1.5l12 6.8-5 1.3-2.4 4.9z' fill='%23121211' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat}

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE DASHBOARD, AS A STACK OF COLOURED CARDS (owner, 12 Oct, 8:22am: "it's like layered cards that roll onto each other, as you
   scroll one stacks on the other, and they are like coloured cards"). build_agency.py dash_stack() writes six cards.
   AS WRITTEN (no script, "reduce motion"): a plain list of coloured cards, one under another, every picture in its place.
   WITH THE SCRIPT (.stk.on): every card is the same height and position:sticky, each a step lower than the one before, so the
   top edge of every earlier card stays in view as a stepped stack; the next card comes up over it at the speed of the scroll
   (nothing is held, nothing is taken over), and each card beneath draws back to between 0.97 and 0.94: one passive scroll
   listener, read once a frame, writing transform only. The cards leave together with the end of the list: no jump.

   THE COLOURS (owner, later that morning: "make the colours more professional and bolder and make it look more crisp"): deep
   and plain, dark and light by turns so every stepped edge is obvious against the next, and against the white page.
                 the card   its title        its line          its number        (contrast against the card)
     navy        #14213D    #FFFFFF 16.0     #C9D4EA 10.7      #E3B56E  8.4
     bone        #EFE8D8    #14130F 15.2     #4A4638  7.7      #7D5718  5.3
     forest      #1C3F31    #FFFFFF 11.6     #CFE3D6  8.7      #E3B56E  6.2
     ochre       #DDA53A    #17120A  8.4     #3D2F0E  5.9      #3D2F0E  5.9      (the gold number does not read on ochre: it is ink)
     oxblood     #8C3322    #FFFFFF  8.0     #F6DCD3  6.2      #F3CF98  5.4      (a lighter gold, for the red)
     black       #0F0F0E    #FFFFFF 19.2     #D2CEC5 12.2      #E3B56E 10.1
   CRISP: every card has a one-pixel edge and a hairline of light along its top, drawn OVER what is in it, so a picture that runs
   to the card's foot never eats the edge. Only the card on top casts a shadow, and a tight one; the cards beneath are not
   dimmed (the colours do that work, and a dark wash made them muddy). Pictures are drawn at their own size or smaller, on a
   one-pixel edge with a short shadow. Nothing is blurred. On the dark cards the line of text is light, not grey, and a touch
   wider set.
   WHAT IS IN A CARD (.sk-art): one thing to look at, placed by hand: see build_agency.py STACK. A piece (.p1 to .p4) rises a few
   pixels into place the first time its card comes up (the script adds .in; 260ms; transform only; nothing is ever hidden).
   --c the card, --t its words, --m its quieter words, --k its number, --edge its one-pixel edge, --hi the light on its top.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.stk{position:relative;margin:clamp(26px,3.2vw,40px) 0 0;--top:92px;--step:14px;--gap:30px;--pad:clamp(26px,3.6vw,52px);--r:clamp(28px,3vw,40px);
  --h:clamp(440px,min(calc(100vh - var(--top) - (var(--n,6) - 1)*var(--step) - 30px),77vh),700px)}
.stk figcaption{display:flex;align-items:center;gap:10px;margin-bottom:clamp(20px,2.4vw,30px);font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.stk figcaption::before{content:"";flex:none;width:18px;height:1px;background:var(--line-2)}
.stk-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.sk{position:relative;min-width:0;border-radius:var(--r)}
.sk-navy{--c:#14213D;--t:#FFFFFF;--m:#C9D4EA;--k:#E3B56E;--edge:rgba(255,255,255,.18);--hi:rgba(255,255,255,.3)}
.sk-bone{--c:#EFE8D8;--t:#14130F;--m:#4A4638;--k:#7D5718;--edge:rgba(20,19,15,.2);--hi:#FFFFFF}
.sk-forest{--c:#1C3F31;--t:#FFFFFF;--m:#CFE3D6;--k:#E3B56E;--edge:rgba(255,255,255,.18);--hi:rgba(255,255,255,.3)}
.sk-ochre{--c:#DDA53A;--t:#17120A;--m:#3D2F0E;--k:#3D2F0E;--edge:rgba(23,18,10,.3);--hi:rgba(255,255,255,.6)}
.sk-oxblood{--c:#8C3322;--t:#FFFFFF;--m:#F6DCD3;--k:#F3CF98;--edge:rgba(255,255,255,.2);--hi:rgba(255,255,255,.32)}
.sk-black{--c:#0F0F0E;--t:#FFFFFF;--m:#D2CEC5;--k:#E3B56E;--edge:rgba(255,255,255,.22);--hi:rgba(255,255,255,.34)}
.sk-in{position:relative;display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);gap:clamp(22px,3vw,44px);height:100%;min-width:0;padding:var(--pad);border-radius:inherit;overflow:hidden;background:var(--c);color:var(--t)}
.sk-in::after{content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 var(--hi),inset 0 0 0 1px var(--edge)}
.sk-cap{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-width:0}
.sk-k{display:inline-flex;align-items:center;gap:12px;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--m)}
.sk-k i{font-style:normal;color:var(--k);font-variant-numeric:tabular-nums}
.sk-k i::after{content:"";display:inline-block;width:22px;height:1px;margin-left:12px;vertical-align:middle;background:currentColor;opacity:.6}
.sk h3{font-size:clamp(30px,3.5vw,48px);line-height:1.03;letter-spacing:-.03em;color:var(--t);max-width:9.5em}
.sk-cap p{margin-top:16px;max-width:21em;color:var(--m);font-size:clamp(15.5px,1.25vw,17.5px);line-height:1.5}
/* set for the dark: light words on a dark ground read thinner than they are, so the title takes the regular cut and a touch
   more room, and the line beneath it is set a touch wider */
.sk-navy h3,.sk-forest h3,.sk-oxblood h3,.sk-black h3{font-weight:400;letter-spacing:-.024em}
.sk-navy .sk-cap p,.sk-forest .sk-cap p,.sk-oxblood .sk-cap p,.sk-black .sk-cap p{letter-spacing:.006em}

/* what is in a card: a box the pieces are placed in. As written it has a height of its own; in the stack it has the card's. */
.sk-art{position:relative;min-width:0;height:clamp(400px,42vw,560px)}
.sk-art .fr,.sk-art .shot,.sk-art .slip,.sk-art .cap,.sk-art .tagline{position:absolute;margin:0}
.sk-art .slip{margin:auto}          /* with inset:0 and its own size: the middle of the box, with no transform spent on it */
.fr{display:block;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#0B0B0A;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.14),0 16px 22px -16px rgba(0,0,0,.6)}
.fr img,.fr video{display:block;width:100%;height:100%;object-fit:cover}
.fr video{position:absolute;inset:0;opacity:0}
.fr video.live{opacity:1}
.fr>i{position:absolute;left:10px;top:10px;padding:6px 9px;border-radius:999px;background:rgba(11,11,10,.82);color:#fff;font:500 9.5px/1 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.shot{display:block}
.shot img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 0 0 1px rgba(11,11,10,.22),0 16px 22px -16px rgba(0,0,0,.55)}
/* 1 a video, waiting: the reel's own frame, and the waiting video's own card from the dashboard */
.a-approve .p1{left:1%;top:1%;width:min(47%,290px);rotate:-3deg}
.a-approve .p2{right:0;bottom:0;z-index:2;width:min(52%,318px)}
/* 2 ask for a change: one film, made twice, and the words that were added between */
.a-change .p1{left:3%;top:0;width:min(38%,236px);rotate:-4deg}
.a-change .p3{right:3%;bottom:0;width:min(38%,236px);rotate:3deg}
.slip{inset:0;z-index:2;display:grid;gap:8px;width:max-content;max-width:74%;height:max-content;padding:16px 20px 18px;border-radius:16px;background:#FFFFFF;color:#14130F;rotate:-1.5deg;box-shadow:0 0 0 1px rgba(20,19,15,.2),0 14px 20px -14px rgba(0,0,0,.5)}
.slip span{font:500 9.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#4A4638}
.slip q{quotes:"\201C" "\201D";font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1;letter-spacing:-.024em}
/* 3 a caption for each platform: three of the captions it wrote, fanned */
.cap{width:min(66%,372px);padding:20px 22px 22px;border-radius:18px;background:#FBF9F3;color:#14130F;font-size:17.5px;line-height:1.42;letter-spacing:-.006em;box-shadow:0 0 0 1px rgba(11,11,10,.3),0 14px 20px -14px rgba(0,0,0,.6)}
.cap em{display:block;margin-top:10px;font:500 11px/1.5 var(--mono);font-style:normal;letter-spacing:.02em;color:#2C5E49}
.cap span{display:flex;align-items:center;gap:8px;margin-bottom:12px;font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#1C3F31}
.cap span::before{content:"";width:7px;height:7px;border-radius:50%;background:#1C3F31}
.a-captions .p1{left:0;top:7%;rotate:-5deg}
.a-captions .p2{left:17%;top:31%;z-index:2;rotate:2deg}
.a-captions .p3{right:0;top:55%;z-index:3;rotate:6deg}
/* 4 what is coming up: the week its planner returned, on a week's line, and the dashboard's own panel */
.week{list-style:none;position:absolute;left:0;right:0;top:4%;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:2px solid #17120A}
.week li{position:relative;padding-top:14px}
.week b{padding-left:14px}
.week li::before{content:"";position:absolute;left:0;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px #17120A}
.week li.has::before{background:#17120A}
.week b{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#17120A}
.week li.has::after{content:"";position:absolute;left:4px;top:4px;width:2px;height:var(--drop,46px);background:#17120A}
.week p{position:absolute;z-index:1;left:0;top:var(--drop,46px);width:clamp(160px,31cqw,204px);margin:0;padding:15px 16px 17px;border-radius:16px;background:#FFFDF6;color:#17120A;font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.2;letter-spacing:-.014em;box-shadow:0 0 0 1px rgba(23,18,10,.34),0 12px 18px -14px rgba(23,18,10,.7)}
/* four notes in two rows, each under its own day; the second row may lie over the corner of the panel's picture */
.week{z-index:3}
.week li:nth-child(1) p{rotate:-2deg}
.week li:nth-child(2){--drop:186px}
.week li:nth-child(2) p{left:-56px;rotate:1.5deg}
.week li:nth-child(3) p{left:16px;rotate:1.5deg}
.week li:nth-child(4){--drop:186px}
.week li:nth-child(4) p{left:-22px;rotate:-1.5deg}
.a-captions .p2:last-child{left:auto;right:0;top:44%}          /* two captions, not three: the second takes the far side */
.a-coming-up{container-type:inline-size}
.a-coming-up .p4{right:0;bottom:0;z-index:2;width:min(54%,336px)}          /* a picture of the screen is never turned: its small type stays sharp */
/* 5 it keeps your brand: what the stored brain holds, as chips, beside the last frame of the reel, which is its end line */
.chips{list-style:none;position:absolute;left:0;top:0;bottom:0;width:62%;margin:0;padding:0;display:flex;flex-wrap:wrap;align-content:center;gap:10px}
.chips li{display:inline-flex;align-items:center;gap:10px;padding:12px 17px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:16.5px;line-height:1.2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.chips b{font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#FCEDE7}
.chips i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.5)}
.chips .chip-name{flex:0 0 auto;margin-bottom:4px;padding:13px 24px 16px;background:#FFF8F0;color:#1B0F0B;font-family:var(--serif);font-size:clamp(28px,2.9vw,40px);letter-spacing:-.022em;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.chips .chip-end{background:#FFF8F0;color:#1B0F0B;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.chips .chip-end b{color:#6B2618}
.chips .chip-no{background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.chips s{text-decoration-thickness:1.5px}
.a-brand .p2{right:0;top:3%;width:min(37%,240px);rotate:3deg}
/* 6 somewhere to ask: the Ask panel, large, and its own tag as type */
.tagline{left:0;top:0;width:40%;font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.4vw,46px);line-height:1.02;letter-spacing:-.028em;color:#fff}
.tagline em{display:block;font-style:italic;color:#E3B56E}
.a-ask .p2{right:0;top:0;width:min(58%,368px)}

/* the stack itself */
@media (min-height:600px){
  .stk.on .stk-list{display:flow-root}
  /* each card's foot margin is a step longer than the next card's, so every card meets the end of the list at the same moment:
     the finished stack rests for a moment, steps and all, and then leaves in one piece (no card is gathered up early, no jump) */
  .stk.on .sk{position:sticky;top:calc(var(--top) + var(--i)*var(--step));height:var(--h);margin-bottom:calc(var(--gap) + (var(--n,6) - 1 - var(--i))*var(--step));transform-origin:50% 0;will-change:transform}
  .stk.on .sk::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .2s var(--e);
    box-shadow:0 -10px 16px -12px rgba(8,10,14,.55),0 22px 26px -22px rgba(8,10,14,.5)}          /* the shadow of the card on top, and of no other */
  .stk.on .sk.top::before{opacity:1}
  .stk.on .sk-art{height:auto;min-height:0}
  .stk.on .sk-art .p1,.stk.on .sk-art .p2,.stk.on .sk-art .p3,.stk.on .sk-art .p4,.stk.on .week,.stk.on .chips{transition:translate .26s var(--e)}
  .stk.on .sk-art .p2,.stk.on .chips{transition-delay:.04s}
  .stk.on .sk-art .p3,.stk.on .sk-art .p4{transition-delay:.08s}
  .stk.on .sk:not(.in) .p1,.stk.on .sk:not(.in) .p2,.stk.on .sk:not(.in) .p3,.stk.on .sk:not(.in) .p4,.stk.on .sk:not(.in) .week,.stk.on .sk:not(.in) .chips{translate:0 14px}
}
@media (max-width:920px){.stk{--top:114px}}          /* the bar is two rows tall from here down */
@media (max-width:900px){
  .stk{--pad:clamp(20px,4.6vw,36px)}
  .sk-in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:22px}
  .sk-cap{gap:20px}
  .sk-art{height:440px}
}
/* a phone: the same six, each with its picture, placed again for a narrow card; a picture may run off the card's foot */
@media (max-width:700px){
  .stk{--top:112px;--step:8px;--gap:18px;--pad:20px;--r:30px;--h:clamp(430px,calc(100svh - var(--top) - (var(--n,6) - 1)*var(--step) - 14px),640px)}
  .sk-in{gap:18px;padding-bottom:0}
  .sk h3{font-size:30px}
  .sk-cap{gap:14px}
  .sk-cap p{margin-top:10px;font-size:15.5px}
  .sk-art{height:400px}
  .a-approve .p1{left:0;top:0;width:54%;rotate:-3deg}
  .a-approve .p2{right:0;top:13%;bottom:auto;width:74%}
  .a-change .p1{left:0;width:47%}
  .a-change .p3{right:0;bottom:auto;top:24%;width:47%}
  .slip{max-width:88%;padding:13px 16px 15px}
  .slip q{font-size:30px}
  .cap{width:80%;font-size:14.5px;padding:14px 16px 16px}
  .a-captions .p1{top:0}.a-captions .p2{left:auto;right:0;top:31%}.a-captions .p3{right:auto;left:4%;top:62%}
  .week{top:8px}
  .week p,.week li:nth-child(2) p,.week li:nth-child(3) p{top:38px;left:0;width:72cqw;font-size:16px;rotate:none}
  .week li:nth-child(2) p{top:126px;left:-4cqw;rotate:1deg}
  .week li:nth-child(3) p{top:226px;left:-14cqw;rotate:-1deg}
  .week li:nth-child(1) p{rotate:-1.5deg}
  .week li:nth-child(4) p{top:322px;left:-40cqw;rotate:1deg}
  .a-captions .p2:last-child{top:44%}
  .a-coming-up .p4{display:none}          /* four notes fill a narrow card: the panel's picture is left to the wider screens */
  .chips{position:relative;z-index:2;width:100%;gap:7px;align-content:start}          /* the chips lie over the frame where they meet, so none is hidden */
  .chips li{padding:8px 12px;font-size:13.5px}
  .chips .chip-name{font-size:24px;padding:9px 16px 11px}
  .a-brand .p2{right:0;top:auto;bottom:-70px;width:38%}
  .tagline{display:none}
  .a-ask .p2{right:0;left:0;top:0;width:100%}
}
@media (max-width:700px) and (max-height:699px){.stk.on .stk-list{display:grid}.stk.on .sk{position:relative;top:auto;height:auto;margin-bottom:0}.stk.on .sk-art{height:400px}}

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE INTERVIEWER, AS A CALL (owner, 12 Oct: "make it an actual AI interviewer person look, and they should be real; don't add
   the questions below as that makes it look cheap"). The laptop on a desk is gone, and so is every list of questions: the scene
   is the call window itself (build_agency.py interview()). Her picture fills the window; a plate names her "AI interviewer"
   with an "AI" tag that never leaves; the captions hold ONE sentence, one of the interview's own questions, changing every few
   seconds as the script streams the next one in (transform and opacity; with "reduce motion" or no script the first stands
   still); a small meter moves while a caption arrives; the client's own tile is a blank one with initials; the controls are
   drawn, not buttons. The brain is the window's side panel. The window is marked "Preview": the call is not built yet.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.iv{max-width:none}
.vc{display:grid;gap:10px;margin:0;padding:10px;border-radius:30px;background:#121211;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 0 7px rgba(18,18,17,.04),0 44px 70px -46px rgba(24,36,52,.7)}
.vc-bar{display:flex;align-items:center;gap:7px;padding:5px 8px 3px;color:#B9B5AC;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.vc-bar i{width:9px;height:9px;border-radius:50%;background:#3A3936}
.vc-bar span{margin-left:8px}
.vc-bar b{margin-left:auto;padding:5px 9px;border-radius:999px;font-weight:500;color:var(--gold-lit);box-shadow:inset 0 0 0 1px rgba(227,181,110,.5)}
.vc-stage{display:grid;align-content:start;gap:10px;min-width:0}
.vc-main{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#0B0B0A}
.vc-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.vc-main::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(transparent 52%,rgba(8,8,7,.82));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.vc-who{position:absolute;z-index:2;left:12px;top:12px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:rgba(14,14,13,.8);color:#fff;font:500 12.5px/1 Geist,"PL Sans Fallback",system-ui,sans-serif;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.vc-ai{padding:5px 7px;border-radius:999px;background:var(--gold-lit);color:#17120A;font:500 9.5px/1 var(--mono);letter-spacing:.08em}
.vc-self{position:absolute;z-index:2;right:12px;top:12px;width:clamp(72px,15%,112px);aspect-ratio:4/3;display:grid;place-items:center;border-radius:12px;background:#1F1F1D;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.vc-self b{display:grid;place-items:center;width:42%;aspect-ratio:1;border-radius:50%;background:#383733;color:#E9E6DF;font:500 clamp(10px,1.05vw,13px)/1 Geist,"PL Sans Fallback",system-ui,sans-serif;letter-spacing:.04em}
.vc-self i{position:absolute;left:7px;bottom:6px;font:500 8.5px/1 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#D2CEC5}
.vc-cap{position:absolute;z-index:2;left:14px;right:14px;bottom:14px;display:flex;align-items:flex-start;gap:10px;min-height:2.52em;margin:0;color:#fff;font:500 clamp(17px,1.8vw,23px)/1.26 Geist,"PL Sans Fallback",system-ui,sans-serif;letter-spacing:-.012em}
.vc-cc{flex:none;margin-top:.22em;padding:4px 6px;border-radius:5px;background:#fff;color:#17120A;font:500 9.5px/1 var(--mono);letter-spacing:.08em}
.vc-says{min-width:0}
.vc-says .q{display:none}
.vc-says .q.on{display:block}
.vc-ctl{display:flex;justify-content:center;gap:10px;padding:2px 0 4px}
.vc-ctl span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#262523;color:#E9E6DF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.vc-ctl svg{width:19px;height:19px}
.vc-ctl .lit{background:#E9E6DF;color:#17120A}
.vc-ctl .end{width:60px;border-radius:999px;background:#B4341F;color:#fff;box-shadow:none}
.vc .iv-brain{margin:0;border-radius:20px;box-shadow:none}
@media (prefers-reduced-motion:no-preference){.iv.live .vc-says .q.on .w{display:inline-block;animation:stream .3s var(--e) backwards;animation-delay:calc(var(--w)*46ms)}}
@media (min-width:1001px){
  .vc{grid-template-columns:minmax(0,1.62fr) minmax(300px,1fr);padding:12px;gap:12px}
  .vc-bar{grid-column:1/-1}
  .vc-main{aspect-ratio:832/486}
  .vc .iv-brain{position:relative;right:auto;top:auto;width:auto;transform:none}
  .vc-stage{align-content:space-between}
  /* the side panel is as tall as the call: its bullets are set larger and further apart there, so the panel is full and not a white column */
  .vc .iv-brain{padding:22px 24px}
  .vc .iv-rows li{grid-template-columns:minmax(0,92px) minmax(0,1fr);gap:4px 14px;padding:13px 0;font-size:14px;line-height:1.45}
  .vc .iv-end{margin-top:auto;padding-top:16px}
}

/* THE LIBRARY, REACH FIRST, and what a client gets in plain words (owner, 12 Oct: "what happened to the millions we have access
   to here", and "no need to say 132 tools and about the code"). build_agency.py library_says(). The figures are plain text: they
   do not roll, so they read and copy as written. */
.reach{display:grid;gap:12px;max-width:52em}
.reach-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin:0}
.reach-n i{flex:0 0 100%;font:500 10.5px/1 var(--mono);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.reach-n b{font-family:var(--serif);font-weight:300;font-size:clamp(46px,6.4vw,88px);line-height:.94;letter-spacing:-.036em;white-space:nowrap;color:var(--ink)}
.reach-n span{flex:1 1 12em;max-width:17em;color:var(--ink);font-size:clamp(16px,1.4vw,19px);line-height:1.38}
.reach .reach-2{margin:0;max-width:none;color:var(--grey);font-size:15.5px;line-height:1.5}
.reach-2 b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.reach .reach-src{margin:0;max-width:none;color:var(--faint);font-size:12.5px;line-height:1.5}
.eng{margin-top:clamp(28px,3.4vw,44px)}
.gets{list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:24px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 30px;border-top:1px solid var(--line-2)}
.gets b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(20px,1.8vw,24px);line-height:1.15;letter-spacing:-.016em}
.gets span{display:block;margin-top:7px;color:var(--grey);font-size:14.5px;line-height:1.5}
@media (max-width:760px){.gets{grid-template-columns:minmax(0,1fr)}}
.engine .bn .say{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.7vw,38px);line-height:1.04;letter-spacing:-.026em;color:var(--ink)}
.bn-reach{grid-column:1/-1}
/* on the engine page the cells are dark: the same words, set light */
.engine .bn .say,.engine .reach-n b,.engine .reach-n span,.engine .reach-2 b{color:#fff}
.engine .reach-n i{color:var(--gold-lit)}
.engine .reach .reach-2{color:#CFCBC2}
.engine .bn-reach .bn-in{min-height:0}


/* 12 Oct 2026: with the badge gone the headline sat against the nav; the first screen gets its own top room. */
.home .hero{padding-block-start:clamp(40px,5.2vw,84px)}

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   13 Oct 2026, the owner, reading the live site.
   THE REQUEST ("make this look a bit better ... lots of text, make it engaging somehow"): the two quoted sentences keep every
   word. The three things the first one names as wrong with agencies are struck through once as the band arrives; the words of
   the second light up with the scroll (the closing heading's text reveal) and its two answers are set in gold; who said it
   stands in a card beside it, not in a grey line under it; and "our answer" carries a way on.
   EVERYTHING IT DOES ("remove this [What it does today] ... it does everything ... add all the goods ... cool UI for this"):
   twelve cards on a grid of twelve columns (build_agency.py goods()), each a white card set in a soft tray.
   Only transform and opacity move. With "reduce motion" on, nothing moves and the strikes are simply drawn.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.said-fig{max-width:none}
.said-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,272px);gap:clamp(24px,4vw,64px);align-items:end}
.said-lead{max-width:34em}
.said-big em{font-style:italic;color:var(--gold-ink)}
.pain{position:relative;color:var(--ink);white-space:nowrap}
.pain::after{content:"";position:absolute;left:-2px;right:-2px;top:56%;height:1.5px;border-radius:1px;background:var(--no);transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--e-io);transition-delay:calc(.35s + var(--i)*.08s)}
.said-lead.in .pain::after{transform:scaleX(1)}
.said-card{padding:6px;border-radius:24px;background:rgba(18,18,17,.035);box-shadow:inset 0 0 0 1px rgba(18,18,17,.05)}
.said-card-in{display:grid;justify-items:start;padding:20px 20px 18px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px rgba(18,18,17,.06),0 18px 30px -26px rgba(24,36,52,.45)}
.said-face{display:grid;place-items:center;width:44px;height:44px;margin-bottom:14px;border-radius:50%;background:var(--ink);color:#F3F0E9;font:500 13px/1 Geist,"PL Sans Fallback",system-ui,sans-serif;letter-spacing:.04em}
.said-who{display:grid;gap:3px;margin:0}
.said-who b{font-weight:500;font-size:16px;line-height:1.2}
.said-who span{font-size:14px;color:var(--faint)}
.said-src{margin:10px 0 0;font-size:13.5px;line-height:1.45;color:var(--grey)}
.said-link{display:inline-flex;gap:6px;margin-top:14px;font:500 13.5px/1 Geist,"PL Sans Fallback",system-ui,sans-serif;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:5px}
.said-ours{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(26px,3vw,44px);padding-top:clamp(18px,2vw,26px);box-shadow:inset 0 1px 0 var(--line)}
.said-ours .btn{font-style:normal}
@media (max-width:860px){.said-grid{grid-template-columns:minmax(0,1fr)}.said-card{max-width:340px}}
@media (prefers-reduced-motion:reduce){.pain::after{transition:none}}

.goods-head{max-width:760px;margin-bottom:clamp(28px,3.6vw,52px)}
.goods-head .sub{margin-top:18px;color:var(--grey)}
.goods{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.good{grid-column:span 4;display:flex;padding:6px;border-radius:26px;background:rgba(18,18,17,.04);box-shadow:inset 0 0 0 1px rgba(18,18,17,.05);transition:transform .22s var(--e)}
.good.s5{grid-column:span 5}
.good.s7{grid-column:span 7}
.good-in{position:relative;flex:1;display:flex;flex-direction:column;min-width:0;min-height:clamp(196px,17vw,240px);padding:clamp(18px,1.8vw,26px);border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px rgba(18,18,17,.06),0 18px 30px -26px rgba(24,36,52,.45);overflow:hidden}
.good-k{display:flex;align-items:center;gap:10px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.good-k b{font-weight:500;color:var(--gold-ink)}
.good h3{order:2;margin:auto 0 0;padding-top:26px;font-size:clamp(22px,2vw,28px)}
.good p{order:3;margin:10px 0 0;max-width:31em;font-size:15px;line-height:1.5;color:var(--grey)}
.good-pix,.good-chips,.good-rule{order:1;margin-top:18px}
.good-pix{display:flex;align-items:center}
.good-pix img{display:block;height:auto;border-radius:10px;box-shadow:0 0 0 1px rgba(18,18,17,.08),0 14px 22px -14px rgba(18,18,17,.5)}
.good-pix.row{gap:7px}
.good-pix.row img{width:clamp(38px,3.6vw,50px);border-radius:7px}
.good-chips{display:flex;flex-wrap:wrap;gap:6px}
.good-chips i{padding:8px 12px;border-radius:999px;background:var(--alt);box-shadow:inset 0 0 0 1px var(--line);font:500 12.5px/1 Geist,"PL Sans Fallback",system-ui,sans-serif;font-style:normal;color:var(--ink)}
.good-rule{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px;align-self:flex-start;padding:11px 14px;border-radius:12px;background:var(--night);color:#F3F0E9;font:400 12.5px/1.45 var(--mono)}
.good-rule i{font-style:normal;color:var(--gold-lit)}
.good-rule b{font-weight:400;color:var(--gold-lit)}
/* the two cards whose picture stands beside the words, not above them */
.good.pix-stills .good-in,.good.pix-film .good-in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;column-gap:clamp(14px,2vw,28px)}
.good.pix-stills .good-k,.good.pix-film .good-k{grid-column:1;grid-row:1}
.good.pix-stills h3,.good.pix-film h3{grid-column:1;grid-row:2;align-self:end}
.good.pix-stills p,.good.pix-film p{grid-column:1;grid-row:3}
.good.pix-stills .good-pix,.good.pix-film .good-pix{grid-column:2;grid-row:1/4;align-self:center;margin:0 clamp(4px,1vw,14px) 0 0}
.good-pix.fan img{width:clamp(62px,6.2vw,90px)}
.good-pix.fan img:nth-child(1){transform:rotate(-7deg) translateY(8px)}
.good-pix.fan img:nth-child(2){position:relative;z-index:1;margin-inline:-16px;transform:translateY(-6px)}
.good-pix.fan img:nth-child(3){transform:rotate(7deg) translateY(8px)}
.good-pix.one img{width:clamp(72px,7vw,102px);border-radius:12px;transform:rotate(4deg)}
.goods.plain .good-in{min-height:clamp(168px,14vw,200px)}
.goods-more{display:flex;flex-wrap:wrap;gap:8px 28px;margin:clamp(20px,2.4vw,32px) 0 0}
.goods-more .more{margin-top:0}
@media (hover:hover) and (pointer:fine){.good:hover{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.good{transition:none}.good:hover{transform:none}}
@media (max-width:980px){
  .goods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .good,.good.s5,.good.s7{grid-column:span 1}
  .good:first-child,.good:last-child{grid-column:span 2}
}
@media (max-width:600px){
  .goods{grid-template-columns:minmax(0,1fr)}
  .good,.good.s5,.good.s7,.good:first-child,.good:last-child{grid-column:span 1}
  .good-in,.goods.plain .good-in{min-height:0}
  .good.pix-film .good-pix{display:none}
  .good.pix-stills .good-in{display:flex}
  .good.pix-stills .good-pix{margin:18px 0 0 16px}
}

/* ── the motion page, 13 Oct 2026 ─────────────────────────────────────────────────────────────────────────────────────────────
   THE WALL ("the same coffee reels ... in sync ... make it eye candy"): the rows lean, each at its own pace (build_agency.py
   WALL_PACE), and each tile is on its own frame (agency.js). The lean is a transform on the row, on wide screens only.
   A LOOK FROM A REFERENCE and HOOKS FROM WHAT WINS (build_agency.py motion_know()): two rows of words beside a card. In the
   first card the nine things measured tick on one after another as the card arrives; nothing is hidden before that. */
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
  .wall{padding-block:clamp(14px,2vw,30px);overflow:hidden}
  .wall-row{transform:rotate(-2.2deg) scale(1.04)}
}
@media (hover:hover) and (pointer:fine){.wall .tile:hover .lk-core{transform:scale(1.035)}}
.wall .tile:active .lk-core{transform:scale(.97)}

.know{display:grid;gap:clamp(72px,9vw,140px)}
.know-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,6vw,92px);align-items:center}
.know-row.flip .know-say{order:2}
.know-say h2{font-size:clamp(32px,4vw,56px)}
.know-say .sub{margin-top:20px;color:var(--grey);max-width:33em}
.know-three{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0}
.know-three li{padding:9px 14px;border-radius:999px;background:var(--alt);box-shadow:inset 0 0 0 1px var(--line);font-size:14px}
.know-n{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:28px 0 0;padding-top:20px;box-shadow:inset 0 1px 0 var(--line);max-width:33em}
.know-n span{display:grid;gap:6px;font-size:14px;line-height:1.4;color:var(--grey)}
.know-n b{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.6vw,50px);line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.ref,.hk{margin:0;padding:7px;border-radius:30px;background:rgba(18,18,17,.04);box-shadow:inset 0 0 0 1px rgba(18,18,17,.05)}
.ref-in,.hk-in{border-radius:23px;background:#fff;box-shadow:inset 0 0 0 1px rgba(18,18,17,.06),0 30px 50px -36px rgba(24,36,52,.5)}
.ref-k{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.ref-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(12px,1.6vw,22px);align-items:center;padding:clamp(16px,2vw,26px)}
.ref-src,.ref-out{display:grid;gap:10px;justify-items:start}
.ref-frame{position:relative;display:block;width:100%;aspect-ratio:9/16;border-radius:14px;background:repeating-linear-gradient(135deg,#ECEFF2 0 10px,#F6F8FA 10px 20px);box-shadow:inset 0 0 0 1px var(--line-2)}
.ref-frame b{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--ink)}
.ref-frame b::after{content:"";position:absolute;left:13px;top:10px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}
.ref-link{font:400 11.5px/1.3 var(--mono);color:var(--faint)}
.ref-out .lk-core{width:100%;aspect-ratio:9/16;border-radius:14px;box-shadow:0 0 0 1px rgba(18,18,17,.1),0 18px 30px -20px rgba(24,36,52,.55)}
.ref-out .lk-core video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ref-meter{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ref-meter li{position:relative;display:grid;gap:1px;padding:7px 0 7px 20px;border-bottom:1px solid var(--line)}
.ref-meter li::before{content:"";position:absolute;left:2px;top:13px;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(31,122,76,.14)}
.ref-meter b{font-weight:500;font-size:13px;line-height:1.3}
.ref-meter span{font-size:11.5px;line-height:1.35;color:var(--faint)}
.ref.armed .ref-meter li::before{opacity:.25;transform:scale(.6);transition:opacity .2s var(--e),transform .2s var(--e);transition-delay:calc(.25s + var(--i)*.07s)}
.ref.armed.in .ref-meter li::before{opacity:1;transform:none}
.hk-in{display:grid;gap:14px;padding:clamp(18px,2.2vw,30px)}
.hk-shapes{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.hk-shapes li{display:grid;gap:8px;padding:14px 16px;border-radius:14px;background:var(--alt);box-shadow:inset 0 0 0 1px var(--line)}
.hk-shapes i,.hk-line i{justify-self:start;font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.hk-shapes p{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(18px,1.7vw,23px);line-height:1.3}
.hk-shapes mark{padding:1px 8px 2px;border-radius:7px;background:rgba(227,181,110,.26);box-shadow:inset 0 0 0 1px rgba(168,120,44,.3);color:var(--gold-ink);font:500 .62em/1.6 var(--mono);letter-spacing:.02em;vertical-align:.14em;white-space:nowrap}
.hk-line{display:grid;gap:8px;margin:0;padding:16px 18px;border-radius:14px;background:var(--night);color:#F3F0E9}
.hk-line i{color:var(--gold-lit)}
.hk-line q{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2.2vw,30px);line-height:1.18;quotes:"\201C" "\201D"}
.hk-line span{font-size:12.5px;line-height:1.4;color:#A9A59C}
.hk-fams{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0}
.hk-fams i{padding:7px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font:500 11.5px/1 Geist,"PL Sans Fallback",system-ui,sans-serif;font-style:normal;color:var(--grey)}
@media (max-width:900px){
  .know-row{grid-template-columns:minmax(0,1fr)}
  .know-row.flip .know-say{order:0}
}
@media (max-width:560px){
  .ref-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ref-meter{grid-column:1/-1;order:3}
}
@media (prefers-reduced-motion:reduce){.ref.armed .ref-meter li::before{opacity:1;transform:none;transition:none}}

/* ── 13 Oct 2026, 5:52pm ─────────────────────────────────────────────────────────────────────────────────────────────────────
   THE ENGINE'S DRAWING, WHOLE ("way more complex than shown here ... same style, just bigger"): what you give it, the engines
   inside it, what comes back (build_agency.py engine_map()). The columns are 15%, 58% and 15% of the drawing with 6% between,
   because the lines are drawn in a box of 100 by 100 stretched over it and must meet the columns' edges. A light walks through
   the engines one at a time (opacity on a ring over each card, nothing else moves).
   A PICTURE ON EVERY CARD ("can't be plain text for half: BORING"): an icon in each card's corner, and a small drawing on the
   cards that had words alone. Only transform and opacity move, and nothing moves with "reduce motion" on. */
.ic{display:block;width:18px;height:18px;flex:none}
.mill{position:relative;display:grid;grid-template-columns:15% 58% 15%;justify-content:space-between;align-items:stretch;margin-top:clamp(36px,4.6vw,64px)}
.mill .pipe-base path{stroke:rgba(243,240,233,.17)}
.mill-col{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:1fr;align-items:center}
.mill-col li{display:flex;align-items:center;gap:9px;min-height:42px;padding:8px 12px;border-radius:14px;background:#1B1B19;box-shadow:inset 0 0 0 1px var(--n-line);color:var(--n-ink);font-size:13px;line-height:1.25}
.mill-col .ic{width:16px;height:16px;color:var(--gold-lit)}
.mill-core{position:relative;padding:7px;border-radius:32px;background:rgba(243,240,233,.045);box-shadow:inset 0 0 0 1px var(--n-line)}
.mill-core-in{height:100%;padding:clamp(16px,1.8vw,24px);border-radius:25px;background:#161615;box-shadow:inset 0 0 0 1px rgba(243,240,233,.09),0 44px 80px -44px #000}
.mill-h{display:flex;align-items:center;gap:11px;margin:0}
.mill-h .glyph{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#F3F0E9;color:var(--ink);font:500 13px/1 var(--mono);letter-spacing:-.04em}
.mill-h b{font:500 15px/1 Geist,"PL Sans Fallback",system-ui,sans-serif;color:#fff;white-space:nowrap}
.mill-h i{margin-left:auto;font:500 10.5px/1 var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--n-faint)}
.mill-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0 0;padding:0}
.mill-grid li{position:relative;display:grid;gap:4px;align-content:start;padding:13px 12px 12px;border-radius:14px;background:rgba(243,240,233,.04);box-shadow:inset 0 0 0 1px rgba(243,240,233,.09)}
.mill-grid li::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(227,181,110,.07);box-shadow:inset 0 0 0 1px var(--gold-lit),0 0 24px -6px rgba(227,181,110,.55);opacity:0;pointer-events:none}
.mill-grid .ic{width:19px;height:19px;margin-bottom:6px;color:var(--gold-lit)}
.mill-grid b{font:500 13.5px/1.2 Geist,"PL Sans Fallback",system-ui,sans-serif;color:#fff}
.mill-grid span{font-size:11.5px;line-height:1.35;color:var(--n-grey)}
@keyframes mill-lit{0%,12%,100%{opacity:0}3%,7%{opacity:1}}
@media (prefers-reduced-motion:no-preference){.mill-grid li::after{animation:mill-lit 6.4s linear infinite;animation-delay:calc(var(--i)*.4s)}}
@media (max-width:980px){
  .mill{grid-template-columns:minmax(0,1fr);gap:14px}
  .mill-lines{display:none}
  .mill-col{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
  .mill-col li{min-height:38px;border-radius:999px}
  .mill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.good-k{width:100%}
.good-ic{display:grid;place-items:center;width:34px;height:34px;margin:-6px -4px -6px auto;border-radius:11px;background:var(--alt);box-shadow:inset 0 0 0 1px var(--line);color:var(--gold-ink)}
.good-ic .ic{width:17px;height:17px}
.good-hook,.mini-post,.mini-site,.mini-call,.mini-list,.mini-mail,.mini-ver{order:1;margin-top:18px}
.good-hook{align-self:flex-start;padding:12px 14px;border-radius:12px;background:var(--alt);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--serif);font-weight:300;font-size:19px;line-height:1.3}
.good-hook mark{padding:1px 8px 2px;border-radius:7px;background:rgba(227,181,110,.26);box-shadow:inset 0 0 0 1px rgba(168,120,44,.3);color:var(--gold-ink);font:500 .62em/1.6 var(--mono);vertical-align:.14em;white-space:nowrap}
.mini-post{display:flex;align-items:flex-end;gap:8px}
.mini-post img{display:block;width:auto;height:74px;object-fit:cover;border-radius:8px;box-shadow:0 0 0 1px rgba(18,18,17,.08),0 12px 18px -12px rgba(18,18,17,.5)}
.mini-post img:nth-child(1){aspect-ratio:4/5}.mini-post img:nth-child(2){aspect-ratio:1;height:58px}.mini-post img:nth-child(3){aspect-ratio:9/16}
.mini-site{display:grid;gap:6px;width:min(100%,250px);padding:0 0 10px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2),0 12px 20px -16px rgba(18,18,17,.45);overflow:hidden}
.mini-site b{display:flex;gap:4px;padding:7px 9px;background:var(--alt);box-shadow:inset 0 -1px 0 var(--line)}
.mini-site b i{width:5px;height:5px;border-radius:50%;background:var(--line-2)}
.mini-site em{display:block;height:34px;margin:4px 9px 0;border-radius:6px;background:linear-gradient(120deg,#E3B56E,#B4441F)}
.mini-site u{display:block;height:5px;margin-inline:9px;border-radius:3px;background:var(--line)}
.mini-site u+u{width:46%}
.mini-site s{display:block;width:54px;height:14px;margin:2px 9px 0;border-radius:999px;background:var(--ink)}
.mini-call{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;padding:9px 16px 9px 9px;border-radius:999px;background:var(--night);color:#F3F0E9}
.mini-call .ic{box-sizing:content-box;width:15px;height:15px;padding:8px;border-radius:50%;background:var(--ok);color:#fff}
.mini-call b{display:flex;align-items:center;gap:3px;height:22px}
.mini-call b i{width:3px;height:100%;border-radius:2px;background:var(--gold-lit)}
.mini-call b i:nth-child(odd){height:55%}.mini-call b i:nth-child(3n){height:82%}.mini-call b i:nth-child(5n){height:36%}
@keyframes call-bar{50%{transform:scaleY(.25)}}
@media (prefers-reduced-motion:no-preference){.mini-call b i{animation:call-bar 1.1s var(--e-io) infinite;animation-delay:calc(var(--i)*-.13s)}}
.mini-list{display:grid;gap:7px;width:min(100%,230px)}
.mini-list i{position:relative;display:block;height:26px;border-radius:9px;background:var(--alt);box-shadow:inset 0 0 0 1px var(--line)}
.mini-list i::before{content:"";position:absolute;left:8px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--line-2)}
.mini-list i::after{content:"";position:absolute;right:9px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(31,122,76,.14)}
.mini-list i:nth-child(3)::after{background:var(--gold-lit);box-shadow:0 0 0 3px rgba(227,181,110,.22)}
.mini-mail{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;align-items:center;width:min(100%,230px);padding:12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2),0 12px 20px -16px rgba(18,18,17,.45)}
.mini-mail .ic{grid-row:1/3;width:16px;height:16px;padding:8px;box-sizing:content-box;border-radius:10px;background:var(--alt);color:var(--gold-ink)}
.mini-mail b{height:6px;width:70%;border-radius:3px;background:var(--ink)}
.mini-mail i{height:5px;border-radius:3px;background:var(--line)}
.mini-mail i+i{grid-column:1/-1;width:82%}
.mini-ver{display:flex;gap:6px}
.mini-ver i{padding:8px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font:500 12px/1 var(--mono);font-style:normal;color:var(--faint)}
.mini-ver i.on{background:var(--ink);box-shadow:none;color:#fff}

/* the interview's take-away (13 Oct 2026, 6:04pm: "a concept and plan to take away ... a FREE ROADMAP ... before they join us"):
   four cards under the call, each with the cards' own icon tile (build_agency.py take_away()). */
.iv-take{margin-top:clamp(22px,2.6vw,34px)}
.iv-take-k{display:block;margin-bottom:12px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.iv-take ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,14px);margin:0;padding:0}
.iv-take li{display:grid;gap:6px;align-content:start;padding:18px 18px 20px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px rgba(18,18,17,.07),0 0 0 6px rgba(18,18,17,.03),0 20px 34px -28px rgba(24,36,52,.5)}
.iv-take .good-ic{margin:0 0 8px}
.iv-take b{font-family:var(--serif);font-weight:300;font-size:clamp(20px,1.8vw,24px);line-height:1.15;letter-spacing:-.016em}
.iv-take li>span:last-child{font-size:14px;line-height:1.5;color:var(--grey)}
@media (max-width:900px){.iv-take ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.iv-take ul{grid-template-columns:minmax(0,1fr)}}