/* Kaizen — Proof Sheet. Tokens first; nothing below uses a raw colour. */
@font-face{font-family:"Geist";src:url(fonts/geist.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  /* near-black carries a little violet (the brand's ink), bone carries warmth */
  --bg:#0b0a0d; --bg-raised:#121115; --bg-sunken:#060507;
  --ink:#ebe8e1; --ink-strong:#fff; --muted:rgb(235 232 225 / .62); --faint:rgb(235 232 225 / .52);
  --line:rgb(235 232 225 / .14); --line-strong:rgb(235 232 225 / .38);
  --red:#ff2d3d; --red-ink:#ff6a75;                   /* the ONE accent: grease pencil */
  --invert-bg:#ebe8e1; --invert-fg:#0b0a0d;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif","Times New Roman",serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --nav-h:52px; --rail:56px; --gut:clamp(20px,4vw,56px); --pr:var(--gut);
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.4,0,.2,1);
  --d1:120ms; --d2:220ms; --d3:480ms;
  color-scheme:dark;
}
[data-theme=light]{
  --bg:#e9e6df; --bg-raised:#f3f1ec; --bg-sunken:#dcd8cf;
  --ink:#0f0e11; --ink-strong:#000; --muted:rgb(15 14 17 / .68); --faint:rgb(15 14 17 / .62);
  --line:rgb(15 14 17 / .16); --line-strong:rgb(15 14 17 / .42);
  --red:#e5202f; --red-ink:#c20f1d;
  --invert-bg:#0f0e11; --invert-fg:#ebe8e1;
  color-scheme:light;
}
html[data-ruler]{--pr:calc(var(--gut) + var(--rail) - 14px)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;touch-action:manipulation}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
i{font-style:normal}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
.skip{position:fixed;left:12px;top:-60px;z-index:300;background:var(--invert-bg);color:var(--invert-fg);padding:10px 14px;font:500 13px var(--sans)}
.skip:focus{top:12px}

/* ───────── type ───────── */
.hud{font:500 11px/1.35 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.hud i{display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;margin:0 .9em;vertical-align:middle}
.hud b{font-weight:500;color:var(--ink)}
.display{font:560 clamp(2.5rem,5.8vw,5.6rem)/.98 var(--sans);letter-spacing:-.045em;max-width:15ch;text-wrap:balance}
.display em,.hero-h1 em,.w-em,.peek h2 em{font:400 1.1em/.9 var(--serif);letter-spacing:-.02em;font-style:italic}
.lede{font-size:clamp(1rem,1.25vw,1.2rem);color:var(--muted);max-width:52ch;text-wrap:pretty}
.link{display:inline-flex;align-items:center;gap:.4em;border-bottom:1px solid var(--line-strong);padding-bottom:1px;transition:border-color var(--d2),color var(--d2)}
.link{position:relative}
.link::before{content:"";position:absolute;inset:-6px -2px}
.link:hover{border-color:var(--red);color:var(--ink-strong)}

/* ───────── controls ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 22px;border:1px solid var(--line-strong);font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:background var(--d2),color var(--d2),border-color var(--d2),transform var(--d2) var(--ease)}
.btn-solid{background:var(--invert-bg);color:var(--invert-fg);border-color:var(--invert-bg)}
.btn-solid:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn-ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn-sm{min-height:36px;padding:0 14px;font-size:10px}
.chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border:1px solid var(--line);font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color var(--d2),background var(--d2),border-color var(--d2)}
.chip span{opacity:.6}
.chip:hover{color:var(--ink);border-color:var(--line-strong)}
.chip.is-on{background:var(--invert-bg);color:var(--invert-fg);border-color:var(--invert-bg)}
.icon-btn{width:44px;height:100%;display:grid;place-items:center;color:var(--ink);border-left:1px solid var(--line);transition:background var(--d2)}
.icon-btn:hover{background:var(--line)}
.i-moon{display:none}
[data-theme=light] .i-sun{display:none}
[data-theme=light] .i-moon{display:block}

/* ───────── nav ───────── */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:1px solid var(--line)}
.nav::before{content:"";position:absolute;inset:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:-1}
.nav-in{height:100%;display:flex;align-items:stretch}
.nav-mark{display:grid;place-items:center;width:var(--nav-h);border-right:1px solid var(--line);color:var(--ink)}
.nav-links{display:flex;align-items:stretch;flex:1}
.nav-links>a,.nav-dd>a{display:flex;align-items:center;gap:6px;padding:0 18px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color var(--d2)}
.nav-links>a:hover,.nav-dd>a:hover{color:var(--ink)}
.nav-links .chip{height:auto;border:0;margin:11px 10px;padding:0 10px;color:var(--muted)}
.nav-links .chip.is-on{color:var(--invert-fg)}
.nav-links>a[aria-current=true]{color:var(--ink)}
.nav-dd{position:relative;display:flex}
.dd{position:absolute;left:0;top:100%;min-width:260px;background:var(--bg-raised);border:1px solid var(--line);border-top:0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--d2),transform var(--d2) var(--ease),visibility 0s var(--d2)}
.nav-dd:hover .dd,.nav-dd:focus-within .dd{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dd a,.dd button{display:flex;justify-content:space-between;width:100%;padding:13px 16px;font:500 12px/1 var(--sans);color:var(--ink);border-top:1px solid var(--line);text-align:left}
.dd a span{font:500 11px var(--mono);color:var(--faint)}
.dd a:hover,.dd button:hover{background:var(--ink);color:var(--bg)}
.dd-head{padding:12px 16px;color:var(--faint);display:flex;justify-content:space-between}
.dd-head b{color:var(--ink)}
.nav-dd-end .dd{left:auto;right:0}
.dd a b,.sheet-sub b{font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red-ink)}
.dd a:hover b{color:inherit}
.nav-end{display:flex;align-items:stretch;margin-left:auto}
.nav-wa{display:flex;align-items:center;gap:9px;padding:0 18px;border-left:1px solid var(--line);font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:background var(--d2),color var(--d2)}
.nav-wa svg{flex:none;transition:color var(--d2),transform var(--d3) var(--ease)}
.nav-wa:hover{background:var(--line)}
.nav-wa:hover svg{color:var(--red-ink);transform:scale(1.12)}
.nav-cta{min-height:0;height:100%;border:0;border-left:1px solid var(--line)}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:6px;padding:0 15px}
.nav-burger span{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform var(--d2) var(--ease)}
.nav-burger[aria-expanded=true] span:first-child{transform:translateY(3.7px) rotate(45deg)}
.nav-burger[aria-expanded=true] span:last-child{transform:translateY(-3.7px) rotate(-45deg)}
.sheet-menu{position:fixed;inset:var(--nav-h) 0 0 0;z-index:55;background:var(--bg);display:flex;flex-direction:column;padding:24px var(--gut);gap:2px;overflow:auto}
.sheet-menu[hidden]{display:none}
.sheet-menu>*{flex:none}
.sheet-menu a{font:560 clamp(2rem,9vw,3rem)/1.15 var(--sans);letter-spacing:-.04em;padding:8px 0;border-bottom:1px solid var(--line)}
.sheet-menu .btn{margin-top:24px;font-size:12px;letter-spacing:.14em;border-bottom:0;letter-spacing:.14em}
.sheet-menu .btn.sheet-wa{margin-top:10px;border-bottom:1px solid var(--line-strong)}
.sheet-sub{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin-top:22px;border-top:1px solid var(--line-strong)}
.sheet-menu .sheet-sub a{font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:15px 0;display:flex;justify-content:space-between;gap:8px;align-items:center}

/* ───────── reveal ───────── */
.js [data-reveal]:not(.is-in){opacity:0;transform:translateY(26px);filter:blur(8px)}
.js [data-reveal]{transition:opacity .9s var(--ease) var(--rd,0s),transform .9s var(--ease) var(--rd,0s),filter .9s var(--ease) var(--rd,0s)}
@keyframes kz-failsafe{to{opacity:1;transform:none;filter:none}}
.js:not(.kz-ok) [data-reveal]{animation:kz-failsafe 0s 3.5s forwards}

/* ───────── section scaffolding ───────── */
section{position:relative}
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding:14px var(--pr) 14px var(--gut);border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--faint);position:relative}
.bar>span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}   /* a label too long for a phone trims, never widens the page */
.bar>span:last-child{margin-left:auto}
.bar::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--line-strong);transform:scaleX(var(--draw,1));transform-origin:left}
.js .bar[data-choreo]:not(.is-in){--draw:0}
.js .bar[data-choreo]{transition:--draw 1s}
.bar[data-choreo]::after{transition:transform .9s var(--ease)}
.sec-head{padding:clamp(56px,9vw,128px) var(--pr) clamp(40px,6vw,80px) var(--gut);display:grid;gap:22px}
.sec-head-tight{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(20px,3vw,40px);gap:14px}

/* ───────── hero ───────── */
.hero{min-height:calc(100svh - var(--nav-h));display:grid;place-items:center;overflow:hidden;isolation:isolate}
.field,.field-fallback{position:absolute;inset:0;z-index:0}
.field canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.field-fallback{display:none;background:var(--bg) url(img/plate-2.webp) center/cover;opacity:.5}
.no-gl .field-fallback{display:block}
.hero-scrim{position:absolute;left:50%;top:50%;width:min(1180px,104vw);height:min(840px,98%);transform:translate(-50%,-50%);z-index:1;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--bg) 93%,transparent) 34%,color-mix(in srgb,var(--bg) 62%,transparent) 66%,transparent)}
.edge{position:absolute;left:0;right:0;z-index:2;white-space:nowrap;overflow:hidden;color:var(--faint);font-size:9.5px;padding:6px 0;pointer-events:none;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 72%,transparent)}
.edge-track{display:flex;width:max-content}
.edge-top{top:0}
.edge>*{flex:none}
.edge span{padding:0}
.edge{animation:none}
.hero-copy{position:relative;z-index:5;width:min(960px,100%);padding:clamp(40px,8vh,96px) var(--gut);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
.hero-copy a,.hero-copy button{pointer-events:auto}
.hero-eyebrow{color:var(--muted);margin-bottom:clamp(10px,2vh,24px)}
.wordmark{font:400 clamp(5.4rem,19vw,17.5rem)/.8 var(--serif);letter-spacing:-.035em;color:var(--ink-strong);white-space:nowrap;user-select:none;padding-bottom:.02em}
.wm-l{display:inline-block;will-change:transform,opacity}
.wm-stamp{display:inline-block;width:.125em;height:.125em;margin-left:.05em;background:var(--red);transform-origin:50% 100%}
.hero-h1{font:560 clamp(1.5rem,3.1vw,2.7rem)/1.08 var(--sans);letter-spacing:-.04em;margin-top:clamp(14px,2.6vh,30px);max-width:22ch;text-wrap:balance}
.hero-sub{margin-top:14px;color:var(--muted);max-width:56ch;font-size:clamp(.95rem,1.15vw,1.08rem);text-wrap:pretty}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:clamp(18px,3vh,32px)}
.hero-proof{margin-top:clamp(18px,3vh,30px);color:var(--muted);background:color-mix(in srgb,var(--bg) 70%,transparent);padding:7px 14px}
.hero-hint{position:absolute;z-index:5;left:50%;bottom:16px;transform:translateX(-50%);color:var(--muted);white-space:nowrap;pointer-events:none;transition:opacity .6s;background:color-mix(in srgb,var(--bg) 78%,transparent);padding:7px 12px;border:1px solid var(--line)}
.hint-touch{display:none}
@media (hover:none){.hint-fine{display:none}.hint-touch{display:inline}}

.lens{position:absolute;left:0;top:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .4s;--lr:300px}
.lens.is-on{opacity:1}
.lens-ring{position:absolute;left:calc(var(--lr)/-2);top:calc(var(--lr)/-2);width:var(--lr);height:var(--lr);border:1px solid color-mix(in srgb,var(--ink) 45%,transparent);border-radius:50%}
.lens-ring::before,.lens-ring::after{content:"";position:absolute;background:color-mix(in srgb,var(--ink) 55%,transparent)}
.lens-ring::before{left:50%;top:-5px;width:1px;height:10px}
.lens-ring::after{left:50%;bottom:-5px;width:1px;height:10px}
.lens-tick{position:absolute;left:-3px;top:calc(var(--lr)/-2 - 3px);width:6px;height:6px;background:var(--red)}
.lens-cap{position:absolute;left:calc(var(--lr)/2 + 12px);top:-9px;padding:5px 9px;background:var(--invert-bg);color:var(--invert-fg);white-space:nowrap;opacity:0;transition:opacity .25s;font-size:10px}
.lens-cap.is-on{opacity:1}

.peek{position:absolute;z-index:7;left:var(--gut);bottom:56px;width:min(380px,calc(100% - 2*var(--gut)));background:color-mix(in srgb,var(--bg-raised) 94%,transparent);border:1px solid var(--line-strong);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform-origin:0 100%;animation:peek-in .5s var(--ease) both;pointer-events:auto}
.peek[hidden]{display:none}
@keyframes peek-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.peek-x{position:absolute;right:0;top:0;width:36px;height:36px;font-size:22px;line-height:36px;color:var(--ink);z-index:2;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.peek-img{background:var(--bg-sunken);max-height:38vh;overflow:hidden;display:grid;place-items:center}
.peek-img img{max-height:38vh;width:100%;object-fit:contain}
.peek-body{padding:16px 18px 18px;display:grid;gap:6px;text-align:left}
.peek-no{color:var(--red-ink)}
.peek h2{font:560 1.5rem/1.1 var(--sans);letter-spacing:-.035em}
.peek-sub{color:var(--muted);font-size:.9rem}
.peek-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ───────── shelf ───────── */
.shelf{padding-bottom:clamp(64px,9vw,128px)}
.filters{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;padding:0 var(--pr) 22px var(--gut)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips.plat{padding-left:22px;border-left:1px solid var(--line)}
.count{margin-left:auto;color:var(--faint)}
.grid{display:grid;grid-auto-flow:row dense;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:0 var(--pr) 0 var(--gut)}
.cell-fill{background:var(--bg)}
.fill-ask{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;height:100%;min-height:140px;padding:16px;color:var(--faint);transition:color var(--d2),background var(--d2)}
.fill-ask b{font:500 1.05rem/1.2 var(--sans);letter-spacing:-.02em;color:var(--muted);max-width:16ch}
.fill-ask:hover{background:var(--bg-raised)}.fill-ask:hover b{color:var(--ink)}
.cell{background:var(--bg);display:flex;flex-direction:column;min-width:0;position:relative;transition:background var(--d2)}
.cell[hidden]{display:none}
.cell:hover{background:var(--bg-raised)}
.cell-feat{grid-column:span 2;grid-row:span 2}
.cell-bar{display:flex;justify-content:space-between;padding:11px 16px;color:var(--faint);border-bottom:1px solid var(--line)}
.cell-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-sunken)}
.cell-feat .cell-media{aspect-ratio:auto;flex:1;min-height:300px}
.cell-feat .cell-media img{object-position:var(--focus,50% 0)}
#app-poster-maker{--focus:0 0}
.cell-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:filter .7s var(--ease),transform 1.2s var(--ease)}
@media (hover:hover){
  .cell-media:not(.is-icon) img{filter:grayscale(1) contrast(1.06) brightness(.92)}
  .cell:hover .cell-media:not(.is-icon) img,.cell:focus-within .cell-media:not(.is-icon) img{filter:none;transform:scale(1.035)}
}
.cell-media.is-icon{display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--ink) 10%,transparent),transparent 62%),var(--bg-sunken)}
.cell-media.is-icon img{position:static;width:clamp(72px,38%,128px);height:auto;object-fit:contain;filter:drop-shadow(0 12px 22px rgb(0 0 0 / .45))}
.cell-tag{position:absolute;left:12px;bottom:12px;padding:5px 8px;background:var(--invert-bg);color:var(--invert-fg);font-size:9.5px}
.cell-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1 0 auto}
.cell-feat .cell-body{flex:none}
.cell-feat .cell-body p{min-height:calc(2em * 1.45)}
.cell-body h3{font:560 1.18rem/1.12 var(--sans);letter-spacing:-.03em}
.cell-feat .cell-body h3{font-size:clamp(1.6rem,2.4vw,2.3rem)}
.cell-body p{color:var(--muted);font-size:.9rem;line-height:1.45;text-wrap:pretty}
.cell-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.cell.is-soon{opacity:.55}
.cell.is-soon:hover{opacity:.9}
.soon{color:var(--faint);padding:10px 0}
.cell.is-found{outline:2px solid var(--red);outline-offset:-2px;z-index:2}
.shelf-foot{display:flex;gap:14px;justify-content:space-between;padding:18px var(--pr) 0 var(--gut);color:var(--faint)}
.shelf-foot a{color:var(--ink);display:inline-flex;gap:8px;align-items:center;border-bottom:1px solid var(--line-strong)}

/* ───────── work: the strip ───────── */
.work{height:auto}
.work-pin{display:flex;flex-direction:column;min-height:100svh;padding-bottom:36px;overflow:hidden}
.work-pin .bar{flex:none}
.work .sec-head{flex:none}
.strip-vp{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;align-items:flex-start}
.strip{display:flex;gap:clamp(18px,2.4vw,36px);padding:8px var(--pr) 8px var(--gut);will-change:transform;align-items:stretch}
.fr{flex:0 0 clamp(290px,31vw,500px);display:flex;flex-direction:column;background:var(--bg-raised);border:1px solid var(--line);transition:border-color var(--d2)}
.fr:hover{border-color:var(--line-strong)}
.fr-edge{position:relative;display:flex;justify-content:space-between;padding:19px 12px 7px;color:var(--faint);font-size:9px;background:var(--bg-sunken)}
.fr-edge::before{content:"";position:absolute;left:0;right:0;top:6px;height:6px;background:repeating-linear-gradient(90deg,var(--bg) 0 9px,transparent 9px 20px);opacity:.9}
.fr-edge-b{padding:7px 12px 18px}
.fr-edge-b::before{top:auto;bottom:6px}
.fr-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-sunken)}
.fr-shot img,.fr-long{position:absolute;inset:0;width:100%;height:100%}
.fr-shot img{object-fit:cover;object-position:top}
.fr-long{opacity:0;background:var(--bg-sunken);overflow:hidden;transition:opacity .35s}
.fr-long img{position:absolute;left:0;top:0;width:100%;height:auto;transform:translateY(0);transition:transform var(--pan-t,8s) cubic-bezier(.45,.05,.4,1)}
.fr:hover .fr-long,.fr:focus-within .fr-long{opacity:1}
.fr:hover .fr-long img,.fr:focus-within .fr-long img{transform:translateY(calc(var(--pan,0) * -1px))}
.fr figcaption{padding:16px 16px 18px;display:grid;gap:7px;justify-items:start;align-content:start;flex:1}
.fr h3{font:560 1.25rem/1.1 var(--sans);letter-spacing:-.03em}
.fr p{color:var(--muted);font-size:.9rem;line-height:1.45;text-wrap:pretty}
.fr .link{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.strip-hint{flex:none;padding:12px var(--pr) 0 var(--gut);color:var(--faint)}

/* ───────── method ───────── */
.method{height:380svh}
.method-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;overflow:hidden}
.method-grid{flex:1;min-height:0;display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,64px);padding:clamp(24px,4vh,48px) var(--pr) 28px var(--gut);align-items:center}
.method .display{font-size:clamp(2rem,3.9vw,4rem);max-width:13ch;margin-bottom:clamp(18px,3vh,36px)}
.steps{display:grid;border-top:1px solid var(--line)}
.step{padding:14px 0;border-bottom:1px solid var(--line);opacity:.34;transition:opacity .5s var(--ease)}
.step.is-on{opacity:1}
.step .hud{color:var(--faint);display:block;margin-bottom:6px}
.step.is-on .hud{color:var(--red-ink)}
.step h3{font:560 clamp(1.1rem,1.6vw,1.5rem)/1.15 var(--sans);letter-spacing:-.03em}
.step p{color:var(--muted);font-size:.95rem;max-width:44ch;display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease);overflow:hidden}
.step p{max-height:0;opacity:0;transition:max-height .6s var(--ease),opacity .5s,margin .5s}
.step.is-on p{max-height:9em;opacity:1;margin-top:8px}
.plates{position:relative;aspect-ratio:3/2;width:100%;max-height:calc(100svh - 190px);justify-self:end;background:var(--bg-sunken);overflow:hidden;border:1px solid var(--line)}
.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;clip-path:inset(0 0 100% 0);filter:blur(14px) grayscale(1);transform:scale(1.06);transition:clip-path 1.1s var(--ease),opacity .6s,filter 1.2s var(--ease),transform 1.6s var(--ease)}
.plate.is-on{opacity:1;clip-path:inset(0);filter:none;transform:none}
.plate-no{position:absolute;left:14px;bottom:12px;padding:5px 8px;background:var(--invert-bg);color:var(--invert-fg);font-size:10px;z-index:3}

/* ───────── principle ───────── */
.principle{padding-bottom:clamp(72px,12vw,180px);overflow:hidden}
.statement{padding:clamp(56px,9vw,140px) var(--pr) 0 var(--gut);font:560 clamp(2.5rem,9vw,9.6rem)/.98 var(--sans);letter-spacing:-.055em;max-width:14ch;text-wrap:balance}
.statement .w{opacity:.14;transition:opacity .35s var(--ease-io)}
.statement .w.is-lit{opacity:1}
.statement .w-em{font-size:1.14em}
.circled{position:relative;display:inline-block}
.grease{position:absolute;left:-7%;top:-16%;width:114%;height:132%;overflow:visible;pointer-events:none}
.grease path{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}

/* ───────── log ───────── */
.log{padding-bottom:clamp(64px,9vw,128px)}
.log-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,80px);padding:clamp(48px,7vw,104px) var(--pr) 0 var(--gut)}
.log-stats{display:grid;gap:clamp(28px,5vw,64px);align-content:start}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.stats>div{padding:16px 16px 0 0;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.stats>div+div{padding-left:16px}
.stats>div:last-child{border-right:0}
.stats dt{color:var(--faint)}
.stats dd{font:400 clamp(3rem,6vw,5.6rem)/1 var(--serif);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:78px 1fr auto;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);position:relative;transition:padding var(--d3) var(--ease),background var(--d2)}
.row time{color:var(--faint)}
.row-names{font:500 clamp(1rem,1.5vw,1.3rem)/1.3 var(--sans);letter-spacing:-.02em}
.row-names>span{white-space:nowrap}
.row-names i{display:inline-block;width:4px;height:4px;background:var(--red);margin:0 .35em 0 .7em;transform:translateY(-.15em)}
.row-n{color:var(--faint)}
.row:hover{padding-left:12px;background:var(--bg-raised)}

/* ───────── start ───────── */
.start{padding-bottom:clamp(72px,10vw,150px);overflow:hidden;isolation:isolate}
.start-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(28px,5vw,88px);padding:clamp(48px,7vw,104px) var(--pr) 0 var(--gut);align-items:start}
.start header{display:grid;gap:22px}
.form{display:grid;gap:30px;background:var(--bg-raised);padding:clamp(18px,2.4vw,32px);border:1px solid var(--line)}
.start-fig{margin-top:clamp(12px,2vw,28px);border:1px solid var(--line);background:var(--bg-sunken);max-width:560px}
.start-fig img{width:100%;height:auto;filter:grayscale(1) contrast(1.04);transition:filter .8s var(--ease)}
.start-fig:hover img{filter:none}
.start-fig figcaption{padding:9px 12px;color:var(--faint);border-top:1px solid var(--line)}
.more{display:flex;justify-content:center;padding:28px var(--pr) 0 var(--gut)}
.more[hidden]{display:none}
.circles{--cpx:clamp(10px,2.4vw - 8px,20px);border:0;padding:0;margin:0 0 0 calc(-1 * var(--cpx));display:flex;flex-wrap:wrap;gap:12px 14px;min-width:0}
.circles legend{padding:0 0 0 var(--cpx);margin-bottom:16px;color:var(--faint);float:left;width:100%}
.circ{position:relative;cursor:pointer}
.circ input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.circ>span{position:relative;display:inline-block;padding:12px var(--cpx);font:500 .95rem/1 var(--sans);letter-spacing:-.01em;color:var(--muted);transition:color var(--d2)}
.circ:hover>span{color:var(--ink)}
.circ input:checked+span{color:var(--ink-strong)}
.circ input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.circ svg{position:absolute;left:-7px;top:-6px;width:calc(100% + 14px);height:calc(100% + 12px);overflow:visible;pointer-events:none}
.circ path{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;transition:stroke-dashoffset .55s var(--ease)}
.circ input:checked+span path{stroke-dashoffset:0}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px}
.f{display:grid;gap:8px}
.f-wide{grid-column:1/-1}
.f .hud{color:var(--faint)}
.f .hud em{font-style:normal;opacity:.7;margin-left:.6em;letter-spacing:.1em}
.f input,.f textarea{font:400 1.05rem/1.4 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line-strong);padding:8px 0;border-radius:0;resize:vertical;transition:border-color var(--d2)}
.f input:focus,.f textarea:focus{outline:0;border-color:var(--red)}
.f input::placeholder,.f textarea::placeholder{color:var(--faint)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-end{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.form-alt{color:var(--faint)}
.form-alt a{color:var(--ink);border-bottom:1px solid var(--line-strong)}
.form-msg{flex-basis:100%;min-height:1.4em;color:var(--muted);font-size:.9rem}
.form-msg.is-ok{color:var(--ink)}
.form-msg.is-err{color:var(--red-ink)}

/* ───────── services ───────── */
.svc{padding-bottom:clamp(56px,8vw,112px)}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 var(--pr) 0 var(--gut);background:var(--line);border:1px solid var(--line)}
.svc-col{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:14px;align-content:start;padding:clamp(18px,2vw,28px);background:var(--bg);transition:background var(--d3)}   /* subgrid: the 5 rows line up across columns even when a heading wraps */
.svc-col:hover{background:var(--bg-raised)}
.svc-no{color:var(--faint)}
.svc-col h3{font:560 clamp(1.4rem,2vw,1.9rem)/1.05 var(--sans);letter-spacing:-.035em}
.svc-col>p{color:var(--muted);font-size:.95rem;text-wrap:pretty}
.svc-col ul{border-top:1px solid var(--line)}
.svc-col li{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font:500 .98rem/1.25 var(--sans);letter-spacing:-.01em;transition:padding var(--d3) var(--ease)}
.svc-col li .hud{color:var(--faint);font-size:10px;flex:none;width:2ch}
.svc-col li:hover{padding-left:8px}
.svc-col .link{align-self:end;justify-self:start;padding-top:6px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.svc-foot{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;padding:18px var(--pr) 0 var(--gut);color:var(--faint)}
.svc-foot a{display:inline-flex;align-items:center;gap:7px;color:var(--ink);border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:border-color var(--d2)}
.svc-foot a:hover{border-color:var(--red)}

/* ───────── footer ───────── */
.foot{border-top:1px solid var(--line);padding-right:var(--pr)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:0}
.foot-grid>div{min-width:0}
.foot-grid>div{padding:28px 24px 36px var(--gut);border-right:1px solid var(--line);display:grid;gap:10px;align-content:start}
.foot-grid>div:last-child{border-right:0}
.foot-grid h3{color:var(--faint);margin-bottom:6px}
.foot-grid a{color:var(--muted);font-size:.95rem;overflow-wrap:anywhere;transition:color var(--d2)}
.foot-grid a:hover{color:var(--ink)}
.foot-brand p{color:var(--muted);max-width:30ch}
.foot-brand .nav-mark{border:0;width:auto;justify-content:start}
.foot-end{display:flex;justify-content:space-between;gap:16px;padding:14px 0 14px var(--gut);border-top:1px solid var(--line);color:var(--faint)}

/* ───────── player ───────── */
.player{position:fixed;inset:0;z-index:200;background:#000;display:flex;flex-direction:column;animation:peek-in .45s var(--ease) both}
.player[hidden]{display:none}
.player-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;height:46px;padding:0 0 0 16px;background:var(--bg-raised);border-bottom:1px solid var(--line-strong);color:var(--muted);flex:none}
.player-now{display:flex;align-items:center;gap:10px}
.player-now i{width:7px;height:7px;background:var(--red);animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.player-now b{color:var(--ink)}
.player-btns{display:flex;align-items:stretch;height:100%}
.player-btns a,.player-btns button{display:flex;align-items:center;gap:10px;padding:0 16px;border-left:1px solid var(--line);color:var(--ink);transition:background var(--d2)}
.player-btns a:hover,.player-btns button:hover{background:var(--ink);color:var(--bg)}
kbd{font:500 10px var(--mono);padding:2px 5px;border:1px solid var(--line-strong)}
.player iframe{flex:1;width:100%;border:0;background:#000}

/* ───────── ruler (film edge) ───────── */
.ruler{position:fixed;right:0;top:var(--nav-h);bottom:0;width:var(--rail);z-index:45;pointer-events:none}
.ruler[hidden]{display:none}
.ruler canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:auto;cursor:ns-resize}
.ruler::before{content:"";position:absolute;inset:0 0 0 -18px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bg) 80%,transparent) 60%);pointer-events:none}
.ruler-labels{position:absolute;right:calc(var(--rail) + 62px);top:0;bottom:0;width:240px;pointer-events:none}
.ruler-labels a{position:absolute;right:0;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);white-space:nowrap;transition:color var(--d2),opacity var(--d2);pointer-events:none;opacity:0;transform:translateY(-50%)}
.ruler.is-map .ruler-labels a{opacity:1;pointer-events:auto}
.ruler:not(.is-map) .ruler-labels a{opacity:0!important;pointer-events:none!important}
.ruler-labels a.is-cur{color:var(--ink)}
.ruler.is-map .ruler-labels a{background:color-mix(in srgb,var(--bg) 92%,transparent);padding:4px 6px}
.ruler.is-map .ruler-labels a:hover{color:var(--ink-strong)}
.ruler-needle{position:absolute;right:0;top:0;width:var(--rail);height:0;pointer-events:none}
.ruler-needle i{position:absolute;right:0;top:0;width:30px;height:2px;background:var(--red);transform:translateY(-1px)}
.ruler-needle b{position:absolute;right:34px;top:0;transform:translateY(-50%);font:500 10.5px/1 var(--mono);letter-spacing:.08em;color:var(--red-ink);background:color-mix(in srgb,var(--bg) 92%,transparent);padding:3px 5px}

/* ───────── inner pages (Services, About, Mev AI, 404): ArtCraft's inner-page frame ─────────
   a framed column (hairlines a half-gutter outside the content, crosshairs where each section bar crosses them),
   section bars that stick under the nav while their section scrolls, one italic word per headline */
.pg{position:relative;--fx:calc(var(--gut) * .5);--fr:calc(var(--pr) - var(--gut) * .5)}
.pg::before{content:"";position:absolute;top:0;bottom:0;left:var(--fx);right:var(--fr);border-left:1px solid var(--line);border-right:1px solid var(--line);pointer-events:none}
.pg .bar{position:sticky;top:var(--nav-h);z-index:5;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pg .bar::before{content:"";position:absolute;top:-6px;left:calc(var(--fx) - 5px);right:calc(var(--fr) - 5px);height:11px;pointer-events:none;
  background:linear-gradient(var(--line-strong),var(--line-strong)) left 0 top 5px/11px 1px no-repeat,linear-gradient(var(--line-strong),var(--line-strong)) left 5px top 0/1px 11px no-repeat,
    linear-gradient(var(--line-strong),var(--line-strong)) right 0 top 5px/11px 1px no-repeat,linear-gradient(var(--line-strong),var(--line-strong)) right 5px top 0/1px 11px no-repeat}
.pg-sec{padding-bottom:clamp(56px,8vw,112px)}
.pg-head{padding:clamp(64px,10vw,150px) var(--pr) clamp(40px,6vw,80px) var(--gut);display:grid;gap:22px;align-content:start}
.pg-sec-head{padding:clamp(48px,7vw,104px) var(--pr) clamp(28px,4vw,48px) var(--gut);display:grid;gap:18px;align-content:start}
.display-s{font-size:clamp(2rem,4.2vw,3.8rem);max-width:18ch}
.pg-body{color:var(--muted);max-width:58ch;text-wrap:pretty}
.pg-head-center{justify-items:center;text-align:center}
.pg-head-center .display{max-width:16ch}
.pg-head-center .lede{max-width:56ch}
/* splits: the split owns the gutters, its children don't */
.pg-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:end;padding:0 var(--pr) 0 var(--gut)}
.pg-split>.pg-sec-head,.pg-split>.pg-head{padding-left:0;padding-right:0}
.pg-split>:not(header){margin-bottom:clamp(28px,4vw,48px)}
.pg-split-hero{align-items:center}
.pg-split-hero>.pg-plate{margin:clamp(40px,6vw,80px) 0}
.pg-split-even{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.pg-split-even>:not(header){margin-top:clamp(48px,7vw,104px)}
.pg-split-plate{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.pg-split-plate .display-s{margin-bottom:22px}
/* jump links under the services hero */
.pg-jump{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 var(--pr) clamp(40px,6vw,72px) var(--gut);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.pg-jump-a{display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:end;padding:18px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background var(--d2)}
.pg-jump-a .hud{grid-column:1/-1;color:var(--faint)}
.pg-jump-a b{font:560 clamp(1.1rem,1.5vw,1.4rem)/1.1 var(--sans);letter-spacing:-.03em}
.pg-jump-a svg{color:var(--faint);transition:transform var(--d3) var(--ease),color var(--d2)}
.pg-jump-a:hover{background:var(--bg-raised)}
.pg-jump-a:hover svg{transform:translateX(4px);color:var(--red-ink)}
/* hairline card grids: borders on the cells, so a short last row never leaves a grey hole */
.pg-grid{display:grid;margin:0 var(--pr) 0 var(--gut);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.pg-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pg-cell{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2vw,28px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg);transition:background var(--d3);min-width:0}
.pg-cell:hover{background:var(--bg-raised)}
.pg-cell-top{display:flex;justify-content:space-between;gap:12px;color:var(--faint);padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.pg-cell h3{font:560 clamp(1.25rem,1.7vw,1.6rem)/1.1 var(--sans);letter-spacing:-.03em}
.pg-cell>p{color:var(--muted);font-size:.97rem;text-wrap:pretty}
.pg-cell-foot{margin-top:auto;padding-top:10px;color:var(--faint)}
.pg-cell-foot a{color:var(--ink);border-bottom:1px solid var(--line-strong);transition:border-color var(--d2);white-space:nowrap}   /* a client name never splits across lines */
.pg-cell-foot a:hover{border-color:var(--red)}
.pg-cell-foot.hud{line-height:1.9}
.ticks{display:grid;gap:7px}
.ticks li{position:relative;padding-left:18px;font-size:.95rem;color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--line-strong)}
.pg-plan h3{font-size:clamp(1.6rem,2.4vw,2.2rem)}
.pg-terms{margin-top:auto;display:grid}
.pg-terms div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.pg-terms dt{color:var(--faint)}
.pg-cert.is-new .pg-cell-top span:last-child{color:var(--red-ink)}
.pg-cell-foot code{font:inherit;text-transform:none;letter-spacing:.06em;color:var(--ink)}   /* credential IDs are case-sensitive */
.pg-sub{display:flex;justify-content:space-between;gap:12px;margin:clamp(32px,4vw,56px) var(--pr) 14px var(--gut);color:var(--faint);font-weight:500}
.pg-note{padding:18px var(--pr) 0 var(--gut);color:var(--faint);line-height:1.8}
.pg-split .pg-note,.pg-sec-head .pg-note{padding-left:0;padding-right:0}
.pg-note a{color:var(--ink);border-bottom:1px solid var(--line-strong)}
.pg-note a:hover{border-color:var(--red)}
.pg-tags{display:flex;flex-wrap:wrap;gap:8px}
.pg-tags li{border:1px solid var(--line);padding:8px 11px;color:var(--muted)}
/* plates and figures */
.pg-plate{border:1px solid var(--line);background:var(--bg-sunken);min-width:0}
.pg-plate img{width:100%;height:auto}
.pg-plate figcaption{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-top:1px solid var(--line);color:var(--faint)}
.pg-plate-wide{margin:0 var(--pr) 0 var(--gut)}
.pg-top .pg-plate-wide{margin-bottom:clamp(48px,7vw,96px)}
.pg-sec .pg-plate-wide{margin-top:clamp(40px,6vw,72px)}
.pg-plate-tall img{max-height:78vh;object-fit:cover}
.pg-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pg-shots figure{border:1px solid var(--line);background:var(--bg-sunken);min-width:0}
.pg-shots img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;object-position:top;filter:grayscale(1) contrast(1.04);transition:filter .6s var(--ease)}
.pg-shots figure:hover img{filter:none}
.pg-shots figcaption{padding:7px 9px;color:var(--faint);border-top:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-clients{border:1px solid var(--line)}
.pg-clients>p{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--faint)}
.pg-clients ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-clients li{display:grid;gap:3px;padding:10px 14px;border-bottom:1px solid var(--line);min-width:0}
.pg-clients li:nth-child(odd){border-right:1px solid var(--line)}
.pg-clients li:nth-last-child(-n+1){border-bottom:0}
.pg-clients a{font:500 .98rem/1.25 var(--sans);letter-spacing:-.01em;transition:color var(--d2)}
.pg-clients a:hover{color:var(--red-ink)}
.pg-clients .hud{color:var(--faint);font-size:10px}
/* steps (the loop) */
.pg-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 var(--pr) 0 var(--gut);border-top:1px solid var(--line)}
.pg-steps li{display:grid;gap:8px;align-content:start;padding:20px 20px 0 0;border-right:1px solid var(--line)}
.pg-steps li+li{padding-left:20px}
.pg-steps li:last-child{border-right:0}
.pg-steps .hud{color:var(--red-ink)}
.pg-steps h3{font:560 clamp(1.2rem,1.6vw,1.5rem)/1.1 var(--sans);letter-spacing:-.03em}
.pg-steps p{color:var(--muted);font-size:.95rem}
.stats.pg-stats{grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(32px,4vw,56px) var(--pr) 0 var(--gut)}
.pg-stats dd span{font:inherit}
/* terminal panels (agent log, voice, security) */
.pg-term{border:1px solid var(--line);background:var(--bg-sunken);min-width:0}
.pg-term-bar{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);color:var(--faint)}
.pg-term-bar .is-on{color:var(--red-ink);display:inline-flex;align-items:center;gap:7px}
.pg-term-bar .is-on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
.pg-log li{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:10px 14px;border-bottom:1px dashed var(--line)}
.pg-log li:last-child{border-bottom:0}
.pg-log b{color:var(--ink)}
.pg-log span{color:var(--muted);text-transform:none;letter-spacing:.02em}
.pg-log .is-ok b{color:var(--red-ink)}
.pg-term-foot{padding:10px 14px;border-top:1px solid var(--line);color:var(--faint);line-height:1.7}
.pg-chat li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:14px;border-bottom:1px solid var(--line)}
.pg-chat b{color:var(--faint);padding-top:3px}
.pg-chat p{color:var(--muted)}
.pg-chat .is-mev p{color:var(--ink)}
.pg-chat-btns{grid-column:2;display:flex;gap:6px}
.pg-chat-btns span{border:1px solid var(--line-strong);padding:5px 10px;color:var(--muted)}
.pg-chat-btns .is-on{background:var(--invert-bg);color:var(--invert-fg);border-color:var(--invert-bg)}
.pg-undo{margin-left:8px;color:var(--faint);border-bottom:1px solid var(--line-strong)}
.pg-code{margin:0;padding:16px 14px;font:400 12.5px/1.7 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted)}
.pg-code .ln{color:var(--faint);margin-right:14px}
.pg-code s{color:var(--faint)}
.pg-code b{color:var(--ink);font-weight:500}
.pg-code em{display:block;font-style:normal;color:var(--red-ink)}
.pg-checks li{display:flex;justify-content:space-between;gap:16px;padding:9px 14px;border-top:1px solid var(--line)}
.pg-checks span{color:var(--muted);text-transform:none;letter-spacing:.02em}
.pg-checks b{color:var(--faint);flex:none}
.pg-checks b.fix{color:var(--red-ink)}
/* feature lists */
.pg-feats{display:grid;border-top:1px solid var(--line)}
.pg-feats li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.pg-feats .hud{color:var(--faint);padding-top:4px}
.pg-feats h3{font:560 1.12rem/1.2 var(--sans);letter-spacing:-.02em;margin-bottom:4px}
.pg-feats p{color:var(--muted);font-size:.95rem}
.pg-feats-big h3{font-size:clamp(1.25rem,1.7vw,1.6rem)}
.pg-rules{margin:0 var(--pr) 0 var(--gut)}
.pg-rules .pg-sub{margin-left:0;margin-right:0}
.pg-rules .pg-note{padding-left:0;padding-right:0}
/* product hero (Mev) */
.pg-appicon{width:104px;height:104px}
.pg-badge{display:inline-flex;align-items:center;gap:10px;color:var(--muted)}
.pg-badge b{background:var(--red);color:#fff;padding:4px 7px}
.pg-cta{display:flex;flex-wrap:wrap;gap:12px}
.pg-head-center .pg-cta{justify-content:center}
.pg-specs{display:flex;flex-wrap:wrap;justify-content:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:14px}
.pg-specs div{display:grid;gap:6px;padding:12px 20px;border-right:1px solid var(--line)}
.pg-specs div:last-child{border-right:0}
.pg-specs dt{color:var(--faint)}
.pg-specs dd{color:var(--ink)}
.pg-statement{font:500 clamp(1.5rem,2.8vw,2.6rem)/1.2 var(--sans);letter-spacing:-.03em;padding:clamp(48px,7vw,104px) var(--pr) clamp(28px,4vw,48px) var(--gut);max-width:38ch;text-wrap:balance}
.pg-statement em{font:400 1.1em/1 var(--serif);font-style:italic;color:var(--red-ink)}
.pg-routes .pg-q{font:500 1.05rem/1.4 var(--sans);color:var(--ink)}
.pg-read{color:var(--faint)}
.pg-legs{display:flex;flex-wrap:wrap;gap:6px}
.pg-legs li{border:1px solid var(--line-strong);padding:6px 8px;color:var(--ink)}
.pg-legs .off{border-style:dashed;border-color:var(--line);color:var(--faint);text-decoration:line-through;text-decoration-color:var(--red)}
.pg-legs em{font-style:normal;text-decoration:none;display:inline-block;margin-left:6px;color:var(--faint);text-transform:none;letter-spacing:.02em}
.pg-routes .pg-cell-foot{font-size:.95rem;color:var(--muted)}
.pg-big{font:400 clamp(5rem,12vw,10rem)/.85 var(--serif);letter-spacing:-.04em}
.pg-big span{color:var(--red-ink)}
.pg-bars h3{color:var(--faint);margin:18px 0 6px}
.pg-bars h3:first-child{margin-top:0}
.pg-bar-row{display:grid;grid-template-columns:150px 1fr 70px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.pg-bar-row span{color:var(--muted);font-size:.95rem}
.pg-bar-row i{height:10px;background:var(--line-strong);transform:scaleX(var(--w));transform-origin:left}
.pg-bar-row.is-mev i{background:var(--red)}
.pg-bar-row.is-mev span{color:var(--ink)}
.pg-bar-row b{font:500 13px var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.pg-bars .pg-note{padding:16px 0 0}
.pg-next .pg-grid{margin:clamp(48px,7vw,104px) 0 0}
.mev-form{display:grid;gap:14px}
.mev-form .btn{justify-self:start}
/* 404 */
.pg-nf{min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column}
.nf-frame{flex:1;display:grid;grid-template-rows:auto 1fr auto;margin:clamp(24px,4vw,56px) var(--pr) clamp(24px,4vw,56px) var(--gut);border:1px solid var(--line-strong)}
.nf-edge{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;color:var(--faint);border-bottom:1px solid var(--line)}
.nf-edge:last-child{border-bottom:0;border-top:1px solid var(--line)}
.nf-body{display:grid;justify-items:center;align-content:center;gap:22px;text-align:center;padding:clamp(40px,8vw,96px) 20px}
.nf-body .display{max-width:14ch}
.nf-body .pg-cta{justify-content:center}
.pg-nf .bar{position:relative;top:auto}
/* nav: where you are */
.dd a[aria-current=page]{background:var(--line)}

/* ───────── responsive ───────── */
@media (max-width:1280px){
  .nav-wa span{display:none}
  .nav-wa{padding:0 15px}
}
@media (max-width:1200px){
  .pg-grid-4,.pg-jump{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats.pg-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats.pg-stats>div:nth-child(3){padding-left:0}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nav-links>a,.nav-dd>a{padding:0 12px}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1099px){
  html[data-ruler]{--pr:var(--gut)}
  .ruler{display:none}
}
@media (max-width:900px){
  .pg-split,.pg-split-even,.pg-split-plate{grid-template-columns:minmax(0,1fr);align-items:start}
  .pg-split>:not(header){margin-top:0}
  .pg-split-hero>.pg-plate{margin-top:0}
  .pg-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-steps li:nth-child(2){border-right:0}
  .pg-steps li:nth-child(3){padding-left:0}
  .pg-steps li:nth-child(n+3){border-top:1px solid var(--line);margin-top:20px}
  .pg-plate-tall img{max-height:60vh}
  .nav-links,.nav-cta{display:none}
  .nav-wa{width:44px;padding:0;justify-content:center}
  .nav-burger{display:flex}
  .nav-end{flex:1;justify-content:flex-end}
  .nav-mark{border-right:0}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cell-feat{grid-column:span 2;grid-row:auto}
  .cell-feat .cell-media{aspect-ratio:16/10;min-height:0}
  .method{height:auto}
  .method-pin{position:static;height:auto;overflow:visible}
  .method-grid{grid-template-columns:1fr;align-items:start;padding-top:36px}
  .method .display{max-width:14ch}
  .step{opacity:1}
  .step p{max-height:none;opacity:1;margin-top:8px}
  .step .hud{color:var(--red-ink)}
  .plates{max-height:none;display:grid;gap:12px;aspect-ratio:auto;border:0;background:none;overflow:visible}
  .plate{position:relative;inset:auto;opacity:1;clip-path:none;filter:none;transform:none;aspect-ratio:3/2;border:1px solid var(--line)}
  .plate-no{display:none}
  .log-grid,.start-grid{grid-template-columns:1fr}
  .strip-vp{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .strip-vp::-webkit-scrollbar{display:none}
  .strip{transform:none!important;padding-bottom:16px}
  .fr{scroll-snap-align:center;flex-basis:82vw}
  .work-pin{min-height:0}
  .strip-hint .hud,.strip-hint{display:none}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid>div{border-bottom:1px solid var(--line);border-right:0}
  .foot-page{border-right:1px solid var(--line)!important}
  .foot-talk{order:1;grid-column:1/-1}
  .foot-page{order:2}.foot-shelf{order:3}
  .foot-studio{order:4;grid-column:1/-1}
  .foot-brand{grid-column:1/-1}
  .peek{bottom:44px}
}
@media (max-width:560px){
  .pg-grid-2,.pg-grid-3,.pg-grid-4,.pg-jump{grid-template-columns:minmax(0,1fr)}
  .pg-shots{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pg-shots figure:last-child{display:none}
  .pg-clients ul{grid-template-columns:minmax(0,1fr)}
  .pg-clients li:nth-child(odd){border-right:0}
  .pg-log li{grid-template-columns:minmax(0,1fr);gap:2px}
  .pg-bar-row{grid-template-columns:96px 1fr 58px}
  .pg-specs div{flex:1 1 40%;border-bottom:1px solid var(--line)}
  .pg-steps{grid-template-columns:minmax(0,1fr)}
  .pg-steps li,.pg-steps li+li{padding:16px 0 0;border-right:0}
  .pg-steps li+li{border-top:1px solid var(--line);margin-top:16px}
  .stats.pg-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-chat li{grid-template-columns:minmax(0,1fr);gap:4px}
  .pg-chat-btns{grid-column:1}
  .wordmark{font-size:clamp(5.4rem,29vw,9rem)}
  .hero-scrim{width:120vw;height:100%;background:radial-gradient(closest-side,color-mix(in srgb,var(--bg) 94%,transparent) 40%,color-mix(in srgb,var(--bg) 70%,transparent) 72%,transparent)}
  .grid{grid-template-columns:minmax(0,1fr)}
  .svc-grid{grid-template-columns:minmax(0,1fr)}
  .cell-feat{grid-column:auto}
  .fields{grid-template-columns:1fr}
  .stats dd{font-size:2.8rem}
  .row{grid-template-columns:62px 1fr auto}
  .chips.plat{padding-left:0;border-left:0}
  .count{margin-left:0;flex-basis:100%}
  .hero-eyebrow{font-size:10px}
  .hero-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;font-size:10px}
  .shelf-foot{flex-direction:column}
  .foot-end{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js [data-reveal]:not(.is-in){opacity:1;transform:none;filter:none}
  .statement .w{opacity:1}
}
@media (hover:none){.cell-media:not(.is-icon) img{filter:none}}

/* ───────── late additions ───────── */
@media (min-width:901px){
  .method-pin{top:var(--nav-h);height:calc(100svh - var(--nav-h))}
  .work-pin{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));min-height:0;padding-bottom:20px}
}
.hero.is-over{cursor:pointer}
.edge span{padding:0 0}
@media (prefers-reduced-motion:no-preference){.edge-track{animation:edge-run 120s linear infinite}}
@keyframes edge-run{to{transform:translateX(-50%)}}