/* =========================================================
   funwithcopy · Paper: warm paper, magazine serif
   ========================================================= */

:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  --r:20px; --r-sm:12px;
  --wrap:1240px;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}

/* ---------- tokens ---------- */
:root{
  --bg:#f3efe6; --bg2:#ebe5d8; --card:#fbf8f2; --card2:#f6f1e7;
  --ink:#1b1915; --ink2:#3a352d; --muted:#6e665a; --line:rgba(27,25,21,.13);
  --accent:#c2502a; --accent-ink:#fff; --warm:#b8860b; --neg:#b3243b;
  --display:"Fraunces",Georgia,serif; --body:Inter,Helvetica,Arial,sans-serif;
  --dw:500; --dtrack:-.03em; --dstyle:normal; --accent-style:italic;
  --shadow:0 30px 60px -35px rgba(60,40,20,.35);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;transition:background .5s var(--ease-out),color .5s var(--ease-out);overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .3 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:8px;z-index:200}
.skip:focus{left:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------- type ---------- */
.eyebrow{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;display:flex;align-items:center;gap:10px}
.sec-title{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:clamp(38px,5.6vw,76px);line-height:1.02;margin:0 0 20px;max-width:16ch}
.sec-sub{font-size:19px;line-height:1.55;color:var(--ink2);max-width:58ch;margin:0}
.sec-head{margin-bottom:64px}
.accent-text{color:var(--accent);font-style:var(--accent-style)}
h3{font-family:var(--display);font-weight:var(--dw);letter-spacing:calc(var(--dtrack) * .6)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;background:var(--ink);color:var(--bg);font:600 15px/1 var(--body);text-decoration:none;transition:transform .2s var(--ease-out),background .2s,color .2s;border:1px solid var(--ink)}
.btn:hover{transform:translateY(-2px);background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-sm{padding:10px 16px;font-size:14px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 32px;transition:background .3s,backdrop-filter .3s,transform .4s var(--ease-out)}
.nav.solid{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav.hide{transform:translateY(-100%)}
.logo{font:800 22px/1 var(--display);letter-spacing:-.04em;text-decoration:none}
.logo-dot{color:var(--accent)}
.nav nav{display:flex;gap:26px}
.nav nav a{font-size:14px;text-decoration:none;color:var(--ink2);position:relative}
.nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;background:var(--accent);transition:right .25s var(--ease-out)}
.nav nav a:hover::after,.nav nav a.on::after{right:0}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70}
.progress i{display:block;height:100%;width:0;background:var(--accent)}


/* ---------- cursor ---------- */
.cur{position:fixed;inset:0;pointer-events:none;z-index:999;display:none;opacity:0;transition:opacity .3s}
.cur.live{opacity:1}
.has-cursor .cur{display:block}
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor label{cursor:none}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;border-radius:50%;will-change:transform}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--accent);transition:width .2s,height .2s,margin .2s,border-radius .2s,opacity .2s}
.cur-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid color-mix(in srgb,var(--ink) 45%,transparent);display:grid;place-items:center;transition:width .3s var(--ease-out),height .3s var(--ease-out),margin .3s var(--ease-out),background .3s,border-color .3s,border-radius .3s}
.cur-label{font:600 12px var(--body);color:var(--accent-ink);opacity:0;white-space:nowrap;transition:opacity .2s}
.cur.is-link .cur-ring{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:var(--accent)}
.cur.is-label .cur-ring{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--accent);border-color:var(--accent)}
.cur.is-label .cur-label{opacity:1}
.cur.is-label .cur-dot{opacity:0}
/* over reading text the cursor becomes a blinking caret: a content designer's cursor */
.cur.is-text .cur-dot{width:2px;height:24px;margin:-12px 0 0 -1px;border-radius:1px;animation:blink 1s steps(1) infinite}
.cur.is-text .cur-ring{width:10px;height:10px;margin:-5px 0 0 -5px;opacity:0}
.cur.is-down .cur-ring{transform-origin:center;scale:.8}
/* paper cursor: ink blot */
.cur-dot{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--ink)}
.cur.is-text .cur-dot{width:2px;height:26px;margin:-13px 0 0 -1px;background:var(--accent)}
.cur-trail{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--accent);pointer-events:none}
@keyframes blink{50%{opacity:0}}

/* ---------- HERO ---------- */
.hero{height:420vh;position:relative}
.hero-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;width:100%}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero-h1{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:clamp(64px,10.5vw,168px);line-height:.9;margin:0 0 28px}
.hero-h1>span{display:block}
.h1-a{color:var(--muted)}
.h1-a{font-style:italic;font-weight:300}
.morph{color:var(--accent);font-style:var(--accent-style);display:inline-block}
.morph .sc{opacity:.55;color:var(--ink2)}
.h1-dot{color:var(--ink)}
.hero-line{position:relative;height:1.5em;font:500 clamp(18px,1.8vw,24px)/1.5 var(--body);margin:0 0 18px;color:var(--ink)}
.hero-line span{position:absolute;left:0;top:0;opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.hero-line span.on{opacity:1;transform:none}
.hero-sub{color:var(--ink2);font-size:17px;max-width:52ch;margin:0 0 32px}
.hero-sub b{color:var(--ink);font-weight:600}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.scroll-hint{position:absolute;bottom:84px;left:32px;display:flex;align-items:center;gap:12px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.scroll-hint i{width:60px;height:1px;background:var(--line);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:translateX(-100%);animation:hint 2s var(--ease-io) infinite}
@keyframes hint{60%,100%{transform:translateX(100%)}}

/* specimen */
.specimen{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-height:420px;padding:0 0 22px;overflow:hidden}
.spec-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);font:500 12px var(--mono);color:var(--muted)}
.spec-dots{display:flex;gap:6px}.spec-dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.spec-stage{margin-left:auto;color:var(--accent)}
.spec{position:absolute;inset:52px 22px 52px;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);pointer-events:none}
.spec.on{opacity:1;transform:none}
.spec-k{font:500 12px var(--mono);color:var(--muted);margin:6px 0 18px}
.spec-copy{font:500 22px/1.35 var(--display);letter-spacing:-.01em;margin:0 0 14px}
.spec-copy del{color:var(--muted);text-decoration-color:var(--neg);text-decoration-thickness:2px}
.spec-copy.ins{font-size:34px;font-weight:var(--dw);letter-spacing:var(--dtrack);color:var(--ink)}
.spec-copy.ins::before{content:"";display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--accent);margin-right:12px;vertical-align:middle}
.spec-note{font-size:14px;color:var(--ink2);border-left:2px solid var(--accent);padding-left:12px;margin-top:22px}
.tok-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tok{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;background:var(--card2);display:grid;gap:2px}
.tok span{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.tok b{font:600 14px var(--mono)}
.tok em{font-style:normal;font-size:13px;color:var(--ink2)}
.spec-code{font:500 15px/1.65 var(--mono);margin:0;color:var(--ink2);white-space:pre}
.spec-code i{font-style:normal;color:var(--accent)}
.spec-code s{text-decoration:none;color:var(--ink)}
.spec-code u{text-decoration:none;color:var(--warm)}
.spec-steps{position:absolute;bottom:20px;left:22px;right:22px;display:flex;gap:6px}
.spec-steps i{flex:1;height:3px;border-radius:2px;background:var(--line);transition:background .3s}
.spec-steps i.on{background:var(--accent)}

/* bubbles (shared) */
.bubble{max-width:92%;padding:14px 16px;border-radius:18px;font-size:15px;line-height:1.5;margin-bottom:10px}
.bubble.user{margin-left:auto;background:var(--ink);color:var(--bg);border-bottom-right-radius:6px;width:fit-content}
.bubble.bot{background:var(--card2);border:1px solid var(--line);border-bottom-left-radius:6px}
.lab{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--accent);color:var(--accent-ink);font:700 11px var(--mono);margin-right:6px;vertical-align:1px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips span,.chips button{font-size:13px;padding:7px 12px;border-radius:999px;border:1px solid var(--accent);color:var(--accent)}

/* ---------- PROOF ---------- */
.proof{padding:40px 0 90px;border-bottom:1px solid var(--line)}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{border-top:1px solid var(--line);padding-top:18px}
.stat b{display:block;font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:clamp(44px,5vw,72px);line-height:1}
.stat span{display:block;color:var(--muted);font-size:14px;margin-top:10px;max-width:22ch}
.logos{display:flex;flex-wrap:wrap;gap:12px 40px;align-items:center;margin-top:56px;font:600 20px var(--display);letter-spacing:-.02em;color:var(--muted)}
.tag-pill{font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:6px 12px;border-radius:999px}

/* ---------- STATEMENT ---------- */
.statement{padding:160px 0}
.big-statement{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:clamp(34px,4.6vw,68px);line-height:1.08;margin:0;max-width:20ch}
.big-statement em{font-style:var(--accent-style);color:var(--accent)}
.big-statement .w{opacity:.14;transition:opacity .4s}
.big-statement .w.lit{opacity:1}

/* ---------- WORK ---------- */
.work{padding:60px 0 120px}
.cases{display:grid;gap:28px}
.case{display:grid;grid-template-columns:1fr 1.15fr;gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;text-decoration:none;color:inherit;min-height:440px;position:relative;transition:border-color .3s,transform .5s var(--ease-out)}
.case:nth-child(even){grid-template-columns:1.15fr 1fr}
.case:nth-child(even) .case-art{order:-1}
.case:hover{border-color:var(--accent)}
.case-info{padding:40px 40px 36px;display:flex;flex-direction:column}
.case-meta{display:flex;gap:10px;align-items:center;font:500 12px var(--mono);color:var(--muted);letter-spacing:.04em;margin-bottom:22px}
.case-meta b{color:var(--accent);font-weight:500}
.case-num{font:500 12px var(--mono);color:var(--muted)}
.case h3{font-size:clamp(26px,2.6vw,38px);line-height:1.08;margin:0 0 16px}
.case p{color:var(--ink2);margin:0 0 24px;max-width:46ch}
.case-crafts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:auto}
.case-crafts span,.chip{font:500 11px var(--mono);padding:5px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink2)}
.case-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-top:28px;margin-top:28px;border-top:1px solid var(--line)}
.metric b{display:block;font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:44px;line-height:1;color:var(--ink)}
.metric span{font-size:13px;color:var(--muted)}
.mtype{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:3px 7px;border-radius:4px;margin-left:6px;vertical-align:2px;background:var(--bg2);color:var(--muted)}
.mtype.Result{color:var(--accent)}
.mtype.Estimate{color:var(--warm)}
.read{font-weight:600;font-size:14px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.read i{display:inline-block;transition:transform .3s var(--ease-out);font-style:normal}
.case:hover .read i{transform:translateX(6px)}
.case-art{position:relative;background:var(--bg2);overflow:hidden;display:grid;place-items:center;padding:36px}
.case-art img{width:100%;height:100%;object-fit:contain;border-radius:var(--r-sm);transition:transform .8s var(--ease-out);background:#fff}
.case:hover .case-art img{transform:scale(1.03)}
.case-art .par{will-change:transform;width:100%}

/* generated art */
.art{width:100%;max-width:440px}
.art-chat .bubble{font-size:14px}
.art-chat .tag{font:500 10px var(--mono);color:var(--muted);display:block;margin:12px 0 6px}
.art-personas{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:18px}
.pcard .av{width:44px;height:44px;border-radius:50%;background:var(--accent);margin-bottom:12px;display:grid;place-items:center;font:700 16px var(--display);color:var(--accent-ink)}
.pcard b{display:block;font-size:15px}.pcard span{font-size:12px;color:var(--muted);display:block;margin-top:4px;line-height:1.4}
.pcard .fear{margin-top:10px;font-size:12px;padding:6px 8px;border-radius:6px;background:var(--bg2);color:var(--ink2)}
.link-line{width:46px;height:2px;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 10px);animation:dash 1s linear infinite;background-size:20px 2px}
@keyframes dash{to{background-position:20px 0}}
.art-bars{display:grid;gap:22px}
.bar-row span{font:500 12px var(--mono);color:var(--muted);display:flex;justify-content:space-between;margin-bottom:8px}
.bar-row span b{color:var(--ink);font-size:14px}
.bar-row i{display:block;height:44px;border-radius:var(--r-sm);background:var(--line);transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease-out)}
.bar-row.win i{background:var(--accent)}
.in .bar-row i{transform:scaleX(var(--s))}
.art-note{font-size:13px;color:var(--ink2);border-left:2px solid var(--accent);padding-left:10px}
.art-merge svg{width:100%;height:auto}
.art-merge path{fill:none;stroke-width:3;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 2s var(--ease-out)}
.in .art-merge path{stroke-dashoffset:0}
.art-variants{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.art-variants div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;font-size:11px;line-height:1.35;color:var(--ink2);min-height:90px}
.art-variants div.win{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.art-variants div b{display:block;font:500 9px var(--mono);color:var(--muted);text-transform:uppercase;margin-bottom:6px}
.art-system{display:grid;gap:8px}
.art-system div{display:flex;gap:8px}
.art-system span{flex:1;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);font:500 11px var(--mono);text-align:center}
.art-system span.core{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.art-big{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:96px;line-height:1;color:var(--accent);text-align:center}
.art-big small{display:block;font:500 13px var(--mono);letter-spacing:0;color:var(--muted);margin-top:12px}

/* more */
.more-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin:110px 0 28px}
.more-head h3{font-size:36px;margin:0}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--ink2);transition:all .2s}
.filters button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mini{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--card);text-decoration:none;display:flex;flex-direction:column;gap:12px;min-height:240px;transition:border-color .3s,transform .3s var(--ease-out),opacity .3s}
.mini:hover{border-color:var(--accent);transform:translateY(-3px)}
.mini.out{display:none}
.mini .case-meta{margin:0}
.mini h4{font:var(--dw) 21px/1.18 var(--display);letter-spacing:calc(var(--dtrack)*.5);margin:0}
.mini .metric{margin-top:auto}
.mini .metric b{font-size:30px}

/* ---------- TALK ---------- */
.talk{padding:140px 0;background:#0d100f;color:#eef3f0;position:relative;overflow:hidden;--ink:#eef3f0;--ink2:#c9d3cf;--muted:#8c9a95;--line:rgba(255,255,255,.1);--card:#161b1a;--card2:#1c2220;--bg2:#141817}
.talk{background:#1b1915;--accent:#f08a5d;--accent-ink:#1b1915;--card:#25221d;--card2:#2c2822;--line:rgba(255,255,255,.12)}
.talk .btn{background:var(--ink);color:#0d100f;border-color:var(--ink)}
.talk .btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.talk .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.talk-top{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;margin-bottom:110px}
.talk-title{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:clamp(56px,8.4vw,128px);line-height:.92;margin:0 0 24px}
.talk-sub{font-size:19px;color:var(--ink2);max-width:46ch;margin:0 0 30px}
.talk-ctas{display:flex;gap:12px;flex-wrap:wrap}
.stage-card{margin:0;transform:perspective(1000px) rotateY(-8deg) rotateX(4deg);transition:transform .8s var(--ease-out)}
.stage-card:hover{transform:none}
.stage-screen{aspect-ratio:16/9;border-radius:22px;background:#253437;padding:7% 8%;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 40px 100px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);position:relative;overflow:hidden}
.stage-screen::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 0%,rgba(166,253,226,.18),transparent 55%)}
.stage-screen p{font:800 clamp(28px,3.4vw,48px)/1.02 "Inter Tight",sans-serif;letter-spacing:-.045em;color:#fff;margin:0}
.stage-event{font:600 11px var(--mono);letter-spacing:.14em;color:#a6fde2}
.stage-speaker{font-size:13px;color:#a8b8b8}
.stage-card figcaption{margin-top:14px}

.coldopen{border:1px solid var(--line);border-radius:var(--r);padding:48px;background:var(--card);margin-bottom:110px}
.co-q{font:var(--dw) clamp(24px,3vw,40px)/1.15 var(--display);letter-spacing:calc(var(--dtrack)*.6);margin:0 0 28px}
.co-q span{display:block;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.co-toggle{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--bg2);margin-bottom:24px}
.co-toggle button{padding:10px 18px;border-radius:999px;font-size:14px;color:var(--ink2)}
.co-toggle button[aria-selected="true"]{background:var(--ink);color:#0d100f}
.co-ans{position:relative;min-height:150px}
.co-ans p{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .5s,transform .5s var(--ease-out);transform:translateY(10px);max-width:64ch}
.co-ans p.on{opacity:1;transform:none}
.co-robot{font:500 20px/1.6 var(--mono);color:var(--muted)}
.co-human{font-size:22px;line-height:1.55;color:var(--ink)}
.co-reveal{margin:24px 0 0;padding-top:24px;border-top:1px solid var(--line);font-size:19px;color:var(--ink2)}
.co-reveal b{color:var(--accent);font-weight:600}

.anatomy{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;margin-bottom:110px}
.anat-intro h3{font-size:clamp(28px,3vw,42px);line-height:1.08;margin:0 0 16px}
.anat-intro p{color:var(--ink2);margin:0 0 28px}
.anat-detail{border-left:2px solid var(--accent);padding:6px 0 6px 18px;min-height:110px}
.anat-detail b{display:block;font-family:var(--display);font-size:22px;margin-bottom:6px}
.anat-detail span{color:var(--ink2)}
.anat-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.anat-list li{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);transition:all .3s var(--ease-out);cursor:default}
.anat-list li b{font:600 20px var(--display);letter-spacing:-.02em}
.anat-list li span{font:500 12px var(--mono);color:var(--muted)}
.anat-list li.on,.anat-list li:hover{border-color:var(--accent);transform:translateX(8px);background:var(--card2)}
.anat-list li.on b{color:var(--accent)}
.anat-list li:last-child{position:relative}
.spines{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:40px}
.spines blockquote{margin:0;padding:32px;border-radius:var(--r);border:1px solid var(--line);font:var(--dw) clamp(22px,2.4vw,32px)/1.15 var(--display);letter-spacing:calc(var(--dtrack)*.6)}
.spines blockquote:nth-child(2),.spines blockquote:nth-child(3){background:var(--card)}
.blueprint-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:28px 32px;border-radius:var(--r);background:var(--accent);color:var(--accent-ink)}
.blueprint-row span{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-right:12px}
.blueprint-row b{font:var(--dw) 26px var(--display);letter-spacing:-.02em}
.blueprint-row i{font-style:normal;opacity:.5}

/* ---------- GENERATOR ---------- */
.gen{padding:140px 0}
.gen-box{display:grid;grid-template-columns:340px 1fr;border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;box-shadow:var(--shadow)}
.gen-controls{padding:28px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:26px;background:var(--card2)}
.gen-label{display:block;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.gen-qs{display:grid;gap:6px}
.gen-qs button{text-align:left;padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--line);font-size:14px;line-height:1.35;color:var(--ink2);transition:all .2s;background:var(--card)}
.gen-qs button small{display:block;font:500 10px var(--mono);color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
.gen-qs button[aria-pressed="true"]{border-color:var(--accent);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:var(--r-sm);background:var(--bg2)}
.seg button{padding:10px;border-radius:calc(var(--r-sm) - 2px);font-weight:600;font-size:14px;color:var(--ink2);line-height:1.2}
.seg button small{display:block;font-weight:400;font-size:11px;color:var(--muted);margin-top:3px}
.seg button[aria-checked="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 0 var(--line),0 0 0 1px var(--line)}
.seg button[data-mode="structure"][aria-checked="true"]{color:var(--accent)}
.switch{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2);cursor:pointer}
.switch input{position:absolute;opacity:0}
.switch span{width:38px;height:22px;border-radius:999px;background:var(--line);position:relative;transition:background .2s;flex:none}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--ink);transition:transform .25s var(--ease-out)}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span::after{transform:translateX(16px);background:var(--accent-ink)}
.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.gen-run{justify-content:center;margin-top:auto}
.gen-stage{padding:28px 32px;display:grid;grid-template-rows:auto 1fr auto;gap:22px;min-height:560px}
.pipeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pipeline li{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;opacity:.35;transition:opacity .3s,border-color .3s,background .3s}
.pipeline li b{display:block;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pipeline li span{display:block;font-size:13px;margin-top:4px;min-height:1.3em;color:var(--ink)}
.pipeline li.on{opacity:1;border-color:var(--accent)}
.pipeline li.on b{color:var(--accent)}
.pipeline.off li{opacity:.25;filter:grayscale(1)}
.pipeline.off li span{text-decoration:line-through;color:var(--muted)}
.chat{display:flex;flex-direction:column;justify-content:flex-start}
.chat .bubble.bot{font-size:16.5px;max-width:100%;min-height:80px}
.typed .seg-i{transition:background .3s,box-shadow .3s;border-radius:4px}
.lens .typed .seg-i{background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent)}
.typed .lab{display:none}
.lens .typed .lab{display:inline-grid}
.typed.vibes{font-family:var(--body);color:var(--ink2)}
.typed .jargon{color:var(--neg);text-decoration:underline wavy;text-underline-offset:3px}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--accent);vertical-align:-3px;margin-left:2px;animation:blink 1s steps(1) infinite}
#genChips{min-height:34px}
#genChips span{opacity:0;transform:translateY(6px);transition:all .3s var(--ease-out)}
#genChips span.on{opacity:1;transform:none}
.gen-meter{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;padding-top:18px;border-top:1px solid var(--line);align-items:start}
.budget{font:500 13px var(--mono);color:var(--muted)}
.budget i{display:block;height:6px;border-radius:3px;background:var(--line);margin-top:10px;overflow:hidden}
.budget b{display:block;height:100%;width:0;background:var(--accent);transition:width .2s,background .2s}
.budget b.over{background:var(--neg)}
.evals{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.evals li{font-size:13px;display:flex;gap:8px;align-items:center;color:var(--ink2);opacity:0;transform:translateY(4px);transition:all .3s var(--ease-out)}
.evals li.on{opacity:1;transform:none}
.evals li i{font-style:normal;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.evals li.pass i{background:var(--accent);color:var(--accent-ink)}
.evals li.fail i{background:var(--neg);color:#fff}
.gen-foot{font-size:13px;color:var(--muted);margin-top:16px}

/* ---------- LEAD ---------- */
.lead{padding:140px 0;border-top:1px solid var(--line)}
.stack{display:grid;gap:4px;margin-bottom:90px}
.stack-row{display:grid;grid-template-columns:260px 1fr 300px;gap:24px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.stack-row span{font:600 16px var(--display)}
.stack-row i{height:10px;border-radius:5px;background:var(--line);position:relative;overflow:hidden}
.stack-row i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--accent);border-radius:5px;transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease-out)}
.stack.in .stack-row i::after{transform:scaleX(1)}
.stack.in .stack-row:nth-child(2) i::after{transition-delay:.08s}.stack.in .stack-row:nth-child(3) i::after{transition-delay:.16s}.stack.in .stack-row:nth-child(4) i::after{transition-delay:.24s}.stack.in .stack-row:nth-child(5) i::after{transition-delay:.32s}.stack.in .stack-row:nth-child(6) i::after{transition-delay:.4s}
.stack-row em{font-style:normal;font-size:14px;color:var(--muted)}
.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:80px}
.pr{padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);display:flex;flex-direction:column}
.pr-n{font:500 12px var(--mono);color:var(--accent)}
.pr h3{font-size:24px;line-height:1.1;margin:14px 0 12px}
.pr p{font-size:15px;color:var(--ink2);margin:0 0 16px}
.pr-proof{margin-top:auto!important;padding-top:16px;border-top:1px dashed var(--line);color:var(--ink)!important;font-weight:500}
.leadership-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.lp b{font:var(--dw) 32px var(--display);letter-spacing:var(--dtrack);color:var(--accent)}
.lp p{color:var(--ink2);font-size:15px;margin:10px 0 0}

/* ---------- WORDS ---------- */
.words{padding:140px 0;background:var(--bg2)}
.quote-feature{position:relative;margin-bottom:56px}
.qf-track{position:relative;min-height:300px}
.qf{position:absolute;inset:0;opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);pointer-events:none}
.qf.on{opacity:1;transform:none;pointer-events:auto}
.qf p{font:var(--dw) clamp(26px,3.4vw,46px)/1.18 var(--display);letter-spacing:calc(var(--dtrack)*.7);margin:0 0 24px;max-width:28ch}
.qf p{font-weight:400;font-style:italic}
.qf p::before{content:"“";color:var(--accent)}
.qf p::after{content:"”";color:var(--accent)}
.qf cite{font-style:normal;font-size:15px;color:var(--muted)}
.qf cite b{color:var(--ink);font-weight:600}
.qf-nav{display:flex;align-items:center;gap:16px;margin-top:24px}
.qf-nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);font-size:18px;transition:all .2s}
.qf-nav button:hover{background:var(--ink);color:var(--bg)}
#qfCount{font:500 13px var(--mono);color:var(--muted)}
.quote-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.qg{padding:20px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);font-size:14px;color:var(--ink2);text-align:left;transition:border-color .2s,transform .3s var(--ease-out)}
.qg:hover,.qg.on{border-color:var(--accent);transform:translateY(-3px)}
.qg b{display:block;color:var(--ink);font-size:13px;margin-top:10px}

/* ---------- ABOUT ---------- */
.about{padding:140px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.about-me{display:flex;gap:22px;align-items:flex-start;margin-bottom:28px}
.about-me img{width:96px;height:96px;border-radius:50%;flex:none;object-fit:cover;filter:grayscale(.2)}
.about-me p{margin:0;color:var(--ink2);font-size:17px}
.creds{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:8px}
.creds li{font-size:13px;padding:7px 12px;border-radius:999px;border:1px solid var(--line)}
.timeline{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.timeline li{padding:0 0 36px 32px;position:relative}
.timeline li::before{content:"";position:absolute;left:-6px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.timeline li:first-child::before{background:var(--accent)}
.timeline span{font:500 12px var(--mono);color:var(--muted)}
.timeline b{display:block;font:var(--dw) 26px var(--display);letter-spacing:var(--dtrack);margin:6px 0 2px}
.timeline em{font-style:normal;color:var(--accent);font-size:14px;font-weight:500}
.timeline p{margin:8px 0 0;color:var(--ink2);font-size:15px}

/* ---------- CONTACT ---------- */
.contact{padding:160px 0 140px;border-top:1px solid var(--line)}
.contact-title{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:clamp(56px,9vw,150px);line-height:.95;margin:0 0 48px}
.morph-hover{color:var(--accent);font-style:var(--accent-style);display:inline-block;transition:transform .5s var(--ease-out)}
.morph-hover:hover{transform:skewX(-8deg)}
.contact-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:80px}
.foot{font-size:13px;color:var(--muted);padding-bottom:60px}

/* ---------- TODO placeholders ---------- */
.todo{display:block;font:500 12px var(--mono);color:#a87400;background:rgba(255,196,0,.08);border:1px dashed rgba(200,150,0,.55);border-radius:8px;padding:10px 12px;margin-top:16px}
.talk .todo{color:#ffd166}
.todo::before{content:"TO ADD · "}
.hide-todos .todo{display:none!important}
.todo-link::after{content:" ·  " attr(data-todo);font:500 10px var(--mono);color:#c99400}
.hide-todos .todo-link::after{content:none}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ---------- CASE STUDY PAGE ---------- */
#casepage{padding:130px 0 120px}
.cs-back{font:500 13px var(--mono);color:var(--muted);text-decoration:none;display:inline-flex;gap:8px;margin-bottom:40px}
.cs-back:hover{color:var(--accent)}
.cs-hero h1{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:clamp(42px,6vw,92px);line-height:1;margin:0 0 28px;max-width:18ch}
.cs-lede{font-size:21px;color:var(--ink2);max-width:58ch;margin:0 0 40px}
.cs-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:56px}
.cs-facts span{display:block;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.cs-facts p{margin:0;font-size:15px}
.cs-cover{border-radius:var(--r);overflow:hidden;background:var(--bg2);padding:48px;margin-bottom:80px;display:grid;place-items:center;min-height:360px;border:1px solid var(--line)}
.cs-cover img{max-height:620px;width:auto;border-radius:var(--r-sm);background:#fff}
.cs-outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:96px}
.cs-outcomes div{padding:28px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.cs-outcomes b{display:block;font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:clamp(40px,4.4vw,64px);line-height:1;color:var(--accent);margin-bottom:12px}
.cs-outcomes p{margin:0;color:var(--ink2);font-size:15px}
.cs-sec{display:grid;grid-template-columns:240px 1fr;gap:48px;padding:56px 0;border-top:1px solid var(--line)}
.cs-sec h2{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:6px 0 0;position:sticky;top:100px;align-self:start}
.cs-sec .body{font-size:19px;line-height:1.65;max-width:62ch}
.cs-sec .body p{margin:0 0 16px}
.cs-role{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cs-role div{padding:22px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card)}
.cs-role b{display:block;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:10px}
.cs-role p{margin:0;font-size:15px;color:var(--ink2)}
.opts{display:grid;gap:10px;max-width:none}
.opt{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:20px 22px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);align-items:start}
.opt .v{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:5px 10px;border-radius:999px;justify-self:start}
.opt.Chosen{border-color:var(--accent)}
.opt.Chosen .v{background:var(--accent);color:var(--accent-ink)}
.opt.Considered .v{background:color-mix(in srgb,var(--warm) 18%,transparent);color:var(--warm)}
.opt.Avoid .v{background:color-mix(in srgb,var(--neg) 14%,transparent);color:var(--neg)}
.opt.Avoid b{text-decoration:line-through;text-decoration-color:var(--neg)}
.opt b{display:block;font:600 18px var(--display);margin-bottom:4px}
.opt p{margin:0;font-size:15px;color:var(--ink2)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;padding:16px 0 16px 56px;position:relative;border-bottom:1px solid var(--line);font-size:18px}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:18px;font:500 13px var(--mono);color:var(--accent)}
.cs-figs{display:grid;gap:40px;padding:56px 0;border-top:1px solid var(--line)}
.cs-figs figure{margin:0}
.cs-figs .imgwrap{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,4vw,48px);display:grid;place-items:center}
.cs-figs img{border-radius:var(--r-sm);background:#fff;max-height:760px;width:auto}
.cs-figs figcaption{font-size:14px;color:var(--muted);margin-top:12px}
.cs-quote{font:var(--dw) clamp(28px,3.6vw,52px)/1.1 var(--display);letter-spacing:var(--dtrack);margin:0;padding:72px 0;border-top:1px solid var(--line);max-width:22ch}
.cs-quote::before{content:"“";color:var(--accent)}.cs-quote::after{content:"”";color:var(--accent)}
.cs-next{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:80px}
.cs-next a{padding:28px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;background:var(--card);transition:border-color .2s}
.cs-next a:hover{border-color:var(--accent)}
.cs-next span{font:500 11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.cs-next b{display:block;font:var(--dw) 22px/1.2 var(--display);margin-top:8px}
.cs-next a:last-child{text-align:right}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav nav{display:none}
  .hero-grid,.talk-top,.anatomy,.about-grid{grid-template-columns:1fr}
  .specimen{display:none}
  .case,.case:nth-child(even){grid-template-columns:1fr}
  .case:nth-child(even) .case-art{order:0}
  .case-art{min-height:300px}
  .more-grid{grid-template-columns:1fr 1fr}
  .principles,.leadership-proof,.quote-grid{grid-template-columns:1fr 1fr}
  .gen-box{grid-template-columns:1fr}
  .gen-controls{border-right:0;border-bottom:1px solid var(--line)}
  .stack-row{grid-template-columns:1fr 1fr}.stack-row em{display:none}
  .cs-sec{grid-template-columns:1fr;gap:16px}.cs-sec h2{position:static}
  .cs-role,.cs-outcomes{grid-template-columns:1fr}
}
@media (max-width:680px){
  .wrap{padding:0 20px}
  .nav{padding:14px 20px}
  .proof-grid,.more-grid,.principles,.leadership-proof,.quote-grid,.spines,.cs-facts,.cs-next{grid-template-columns:1fr 1fr}
  .more-grid,.principles,.spines,.cs-next{grid-template-columns:1fr}
  .pipeline{grid-template-columns:repeat(3,1fr)}
  .gen-meter,.evals{grid-template-columns:1fr}
  .coldopen{padding:28px}.co-ans{min-height:240px}
  .opt{grid-template-columns:1fr;gap:10px}
  .scroll-hint{display:none}
  .hero{height:auto}.hero-pin{position:relative;height:auto;min-height:100vh;padding:120px 0 80px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .big-statement .w{opacity:1}
}

/* ---------- locked cases ---------- */
.art-lock{display:grid;justify-items:center;gap:12px;text-align:center}
.art-lock span{font-size:64px;line-height:1;color:var(--accent)}
.art-lock small{font:500 12px var(--mono);color:var(--muted)}
.lock-tag{font:500 12px var(--mono);color:var(--muted);margin-top:auto}
.lock-form{max-width:560px;padding:32px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:96px}
.lock-form label{display:block;font-weight:600;margin-bottom:10px}
.lock-row{display:flex;gap:10px;flex-wrap:wrap}
.lock-row input{flex:1 1 220px;min-width:0;padding:13px 16px;font:500 15px var(--mono);color:var(--ink);background:var(--bg);border:1px solid var(--muted);border-radius:var(--r-sm)}
.lock-row input[aria-invalid="true"]{border-color:var(--neg)}
.lock-row .btn:disabled{opacity:.6;cursor:progress;transform:none}
.lock-help{font-size:14px;color:var(--ink2);margin:14px 0 0}
.lock-err{font-size:14px;color:var(--neg);margin:10px 0 0}
.lock-err:empty{display:none}

/* =========================================================
   Emergent "Paper" theme: warm white, acid yellow, Fraunces
   ========================================================= */
:root{
  --bg:#faf8f5; --bg2:#f3efe8; --card:#ffffff; --card2:#faf8f5;
  --ink:#1c1917; --ink2:#44403c; --muted:#57534e; --line:#e7e3dc;
  --acid:#ffe600; --dark:#141210;
  --accent:#b45309; --accent-ink:#fff; --warm:#b45309; --neg:#b3243b;
  --display:"Fraunces",Georgia,serif; --body:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --dw:400; --dtrack:-.025em; --r:24px; --r-sm:12px;
  --shadow:0 24px 60px -30px rgba(28,25,23,.28);
}
body::after{display:none}
.reveal{opacity:1}
.wrap,.nav{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
.nav{background:rgba(250,248,245,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{display:inline-flex;align-items:center;gap:10px;font:700 15px var(--body);letter-spacing:-.01em}
.logo-star{display:grid;place-items:center;width:28px;height:28px;background:var(--acid);border-radius:8px;font-size:16px;color:var(--ink)}
.logo-url{font:400 11px var(--mono);color:var(--muted)}
.btn{font-weight:600;font-size:14px;padding:14px 28px}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn-ghost:hover{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.eyebrow{color:var(--accent);letter-spacing:.14em}
.accent-text,.morph,.morph-hover{color:var(--ink);font-style:normal}
.accent-text,.morph-hover{background:var(--acid);padding:0 .14em;border-radius:3px;display:inline-block;transform:rotate(-1deg)}
.big-statement em{color:var(--ink);font-style:normal;background:linear-gradient(transparent 55%,var(--acid) 55%)}
.h1-a{font-style:normal;font-weight:400}
.h1-dot{display:none}
.morph{background:var(--acid);padding:0 .12em;border-radius:3px;transform:rotate(-1deg)}
.morph::after{content:"";display:inline-block;width:.07em;height:.8em;background:var(--ink);margin-left:.05em;vertical-align:-.04em;animation:blink 1s steps(1) infinite}
.star{position:absolute;top:-8%;right:-6%;width:min(46vw,620px);opacity:.9;pointer-events:none;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-copy,.specimen{position:relative;z-index:1}
.specimen{transform:rotate(2deg);background:#fff}
.spec-copy mark{background:var(--acid);color:var(--ink);padding:2px 6px;display:inline-block;transform:rotate(-.6deg)}
.spec-copy del{text-decoration-color:#dc2626;text-decoration-thickness:2px}
.mtype{font-style:normal;white-space:nowrap}
.proof-grid .stat{border-left:3px solid var(--acid);padding-left:18px}
.stat span{max-width:26ch}
.tag-pill{color:var(--ink);background:var(--acid);border-color:var(--acid)}
.cur-dot{background:var(--ink)}

/* selected work: bento */
.cases{grid-template-columns:repeat(12,1fr);gap:24px}
.bcard{grid-column:span 6;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;transition:transform .3s var(--ease-out),box-shadow .3s}
.bcard:nth-child(4n+1),.bcard:nth-child(4n){grid-column:span 7}
.bcard:nth-child(7){grid-column:1/-1}
.bcard:nth-child(4n+2),.bcard:nth-child(4n+3){grid-column:span 5}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.bcard:hover .read i{transform:translateX(4px)}
.bthumb,.athumb{position:relative;background:var(--bg2);display:grid;place-items:center;overflow:hidden}
.bthumb{height:300px}
.athumb{height:170px;border-radius:14px;margin-bottom:6px}
.bthumb img,.athumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.bthumb .art,.athumb .art{padding:20px;transform:scale(.9)}
.athumb .art-lock span{font-size:38px}
.bnum{position:absolute;right:16px;top:8px;font:400 44px var(--display);color:#fff;mix-blend-mode:difference}
.binfo{padding:28px;display:flex;flex-direction:column;gap:10px;flex:1}
.binfo .case-meta{margin:0}
.binfo h3{font-size:clamp(22px,2.2vw,30px);line-height:1.14;margin:0;text-wrap:balance}
.binfo p{margin:0;color:var(--ink2);font-size:15px}
.binfo .case-foot{margin-top:auto;padding-top:18px}
.acard{border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 20px;background:var(--card);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;transition:transform .25s var(--ease-out),border-color .25s}
a.acard:hover{transform:translateY(-3px);border-color:var(--ink)}
.acard.out{display:none}
.acard .case-meta{margin:0}
.acard h4{font:400 20px/1.18 var(--display);letter-spacing:-.015em;margin:0}
.acard .metric{margin-top:auto}
.acard .metric b{font-size:26px}
.akick{font:500 12px var(--mono);color:var(--muted);margin:auto 0 0}
.acard.stub{background:transparent;border-style:dashed}
.lock-tag{font-size:12px;color:var(--muted)}

/* dark band */
.talk{background:var(--dark);--bg:#141210;--ink:#faf8f5;--ink2:#d6d3d1;--muted:#a8a29e;--accent:#ffe600;--accent-ink:#141210;--card:#1e1b17;--card2:#26221d;--line:rgba(255,255,255,.13)}
.talk .accent-text{color:#141210}
.talk .eyebrow{color:var(--accent)}
.stage-screen{background:#1e1b17}
.stage-screen::after{background:radial-gradient(circle at 80% 0%,rgba(255,230,0,.16),transparent 55%)}
.stage-screen p{font:400 clamp(28px,3.4vw,48px)/1.04 var(--display);letter-spacing:-.025em}
.stage-event{color:var(--acid)}
.talk .btn{background:var(--acid);border-color:var(--acid);color:#141210}
.talk .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.about-me img{filter:none}

/* live-site case pages */
.cs-facts{grid-auto-flow:column;grid-auto-columns:1fr;grid-template-columns:none}
.cs-outcomes.one{display:block;border-top:0;padding:28px 0}
.cs-outcomes.one b{font:400 clamp(44px,6vw,80px)/1 var(--display);letter-spacing:-.03em;background:var(--acid);padding:0 .12em;border-radius:3px;display:inline-block;transform:rotate(-1deg)}
.cs-outcomes.one p{margin:12px 0 0;color:var(--ink2)}
.lv{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.lv li{padding-left:22px;position:relative}
.lv li::before{content:"✱";position:absolute;left:0;color:var(--accent);font-size:12px;top:3px}
.lq{margin:16px 0 0;padding:4px 0 4px 16px;border-left:3px solid var(--acid);font:400 19px/1.35 var(--display)}
.cs-gal{padding:56px 0;border-top:1px solid var(--line)}
.cs-gal h2{font:400 clamp(28px,3vw,40px) var(--display);letter-spacing:-.02em;margin:0 0 24px}
.cs-gal small{font:500 12px var(--mono);color:var(--muted);letter-spacing:0;margin-left:8px}
.gallery{columns:3 240px;column-gap:16px}
.gitem{display:block;width:100%;padding:0;margin:0 0 16px;break-inside:avoid;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;cursor:zoom-in;transition:transform .2s var(--ease-out)}
.gitem:hover{transform:translateY(-3px)}
.gitem img{width:100%;height:auto}
#lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;overflow:hidden}
#lightbox[open]{display:grid;place-items:center}
#lightbox::backdrop{background:rgba(20,18,16,.9)}
#lightbox img{max-width:min(92vw,1200px);max-height:88vh;border-radius:12px;background:#fff}
#lightbox button{position:fixed;width:48px;height:48px;border-radius:50%;background:#faf8f5;color:#141210;font-size:20px;z-index:2}
.lb-x{top:max(20px,env(safe-area-inset-top,0px));right:max(20px,env(safe-area-inset-right,0px))}
.lb-p{left:max(20px,env(safe-area-inset-left,0px));top:calc(50% - 24px)}
.lb-n{right:max(20px,env(safe-area-inset-right,0px));top:calc(50% - 24px)}
@media (prefers-reduced-motion:reduce){.star,.morph::after{animation:none}}
@media (max-width:980px){.cs-facts{grid-auto-flow:row;grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .wrap,.nav{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .bcard,.bcard:nth-child(n){grid-column:1/-1}
  .bthumb{height:220px}
  .logo-url{display:none}
  .star{width:62vw;top:0;right:-16%;opacity:.55}
  .gallery{columns:2 140px}
  .proof-grid{grid-template-columns:1fr 1fr}
}

/* polish */
.h1-a{color:var(--ink);opacity:1}
.star{opacity:1}
.bnum{top:12px;right:12px;font:500 12px var(--mono);color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:4px 10px;border-radius:999px;mix-blend-mode:normal}
.bthumb .art-lock small,.athumb .art-lock small{display:none}
.cs-outcomes.one{background:transparent;border:0;padding-left:0}
.cs-outcomes.one b{color:var(--ink)}
.bthumb .art{max-width:440px}
.bar-row span{display:flex;justify-content:space-between}
.bthumb img.fit,.athumb img.fit{object-fit:contain}
.bthumb img.mid,.athumb img.mid{object-position:center}
.cfig{margin:22px 0 0}
.cfig button{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;cursor:zoom-in}
.cfig img{width:100%;height:auto;display:block}
.cfig figcaption{font-size:13px;color:var(--muted);margin-top:8px}
#lightbox.single .lb-p,#lightbox.single .lb-n{display:none}
.cs-sec .body{max-width:none}
.cs-sec .body>p,.cs-sec .body>.lv,.cs-sec .body>.lq{max-width:62ch}

/* =========== multi-page + about =========== */
.nav nav a[aria-current="page"]{color:var(--ink);font-weight:600}
#casepage{padding-top:110px}
.workpage{padding-top:140px}
.allwork{display:flex;justify-content:center;margin-top:56px}
.stat strong{display:block;font-weight:600;font-size:17px;margin-top:12px}
.stat span{margin-top:4px}
.proof .eyebrow{margin-bottom:28px}
.sitefoot{padding:96px 0 48px;border-top:1px solid var(--line);margin-top:48px}
.sf-t{font:400 clamp(36px,5vw,64px)/1.1 var(--display);letter-spacing:-.025em;margin:0 0 28px}
.sitefoot .foot{margin-top:40px;font-size:13px;color:var(--muted)}
/* zoom scroll */
.zoom{height:520vh;position:relative}
.z-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;background:var(--bg)}
.z-star{position:absolute;right:6%;bottom:-14%;width:min(52vw,640px);stroke:#dfddd8;will-change:transform;pointer-events:none}
.z-top,.z-hint{position:absolute;left:0;right:0;text-align:center;font:500 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink2);margin:0}
.z-top{top:88px}.z-hint{bottom:32px}
.z-rail{position:absolute;left:clamp(16px,8vw,120px);top:24%;height:46%;width:3px;background:var(--line);border-radius:3px}
.z-rail i{display:block;width:100%;height:0;background:var(--acid);border-radius:3px}
.z-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 max(24px,env(safe-area-inset-left,0px));pointer-events:none}
.z-eye{font:500 13px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 20px}
.z-word{font:400 clamp(64px,13vw,190px)/1 var(--display);letter-spacing:-.035em;margin:0 0 24px;will-change:transform;transform-origin:center}
.z-word span{position:relative;display:inline-block}
.z-sub{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--ink2);max-width:40ch;margin:0}
.z-stage.strike .z-word span::after{content:"";position:absolute;left:-3%;top:52%;height:.06em;width:106%;background:#e5484d;transform:scaleX(var(--strike,0));transform-origin:left}
.z-stage.mark .z-word span{background:linear-gradient(var(--acid),var(--acid)) no-repeat 0 62%/calc(var(--strike,0)*100%) 62%;padding:0 .08em}
.z-static .zoom{height:auto}
.z-static .z-pin{position:static;height:auto;padding:120px 0;display:block}
.z-static .z-stage{position:static;padding-block:48px}
.z-static .z-star,.z-static .z-rail,.z-static .z-hint{display:none}
.z-static .z-top{position:static}
/* about */
.about-solo{max-width:1000px}
.about{padding:96px 0 40px}
.about-me{display:flex;gap:24px;align-items:flex-start;margin-top:32px;font-size:19px;line-height:1.6;color:var(--ink2)}
.about-me img{width:128px;height:128px}
.about-me p{margin:0;max-width:62ch}
.creds{list-style:none;padding:0;margin:32px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.creds li{padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px}
.road{padding:96px 0}
.roadlist{list-style:none;margin:40px 0 0;padding:0}
.roadlist li{display:grid;grid-template-columns:240px 1fr;gap:32px;padding:36px 0;border-top:1px solid var(--line)}
.roadlist span{font:500 14px var(--mono);color:var(--accent);padding-top:10px}
.roadlist h3{font:400 clamp(26px,3vw,38px)/1.15 var(--display);letter-spacing:-.02em;margin:0 0 10px}
.roadlist mark{background:linear-gradient(var(--acid),var(--acid)) no-repeat 0 50%/0 100%;color:inherit;transition:background-size .35s var(--ease-out)}
.roadlist li:hover mark{background-size:100% 100%}
.roadlist p{margin:0;color:var(--ink2);font-size:17px;max-width:68ch}
.influence{padding:40px 0 110px}
.infgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.inf{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:32px}
.inf p:last-child{margin:0;font-size:17px;line-height:1.55}
@media (max-width:760px){.roadlist li{grid-template-columns:1fr;gap:8px}.infgrid{grid-template-columns:1fr}.about-me{flex-direction:column}.z-rail{left:10px}}
@media (max-width:980px){.nav nav{display:none}}
.bthumb .bar-row i,.athumb .bar-row i{transform:scaleX(var(--s))}
.bthumb .art-merge path,.athumb .art-merge path{stroke-dashoffset:0}

/* =========== round 5 =========== */
.hero{height:auto}
.hero-pin{position:relative;height:auto;min-height:calc(100vh - 40px);padding:110px 0 64px}
.spec-copy.ins::before{display:none}
.spec-copy.ins{font-size:clamp(20px,2vw,26px)}
.talk{padding:96px 0}
.talk-top{grid-template-columns:1fr 1.05fr;align-items:center;gap:56px;margin-bottom:0}
.talk-title{font-size:clamp(44px,5.4vw,84px);line-height:1.04;margin:0 0 20px}
.talk-sub{font-size:18px;margin:0 0 20px;max-width:52ch}
.talk .accent-text{white-space:nowrap}
.talk-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.talk-chips span{font:500 12px var(--mono);padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink2)}
.talkcover{position:relative;display:block;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.8);transition:transform .3s var(--ease-out)}
.talkcover:hover{transform:translateY(-4px)}
.talkcover img{width:100%;display:block}
.play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--acid);display:grid;place-items:center;transition:transform .25s var(--ease-out);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.play svg{width:40px;fill:#141210}
.talkcover:hover .play{transform:scale(1.1)}
.talk .coldopen{margin-top:72px}
.gen{padding:96px 0}
.bthumb{height:380px;background:var(--bg2)}
.athumb{height:240px}
.bthumb img.fit,.athumb img.fit{object-fit:contain;object-position:center;padding:0}
.lockpill{position:absolute;left:12px;top:12px;z-index:2;font:500 11px var(--mono);background:rgba(255,255,255,.92);color:#1c1917;padding:5px 10px;border-radius:999px}
.icover{position:absolute;inset:0;background:#141210;color:#faf8f5;display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,5%,48px);gap:8px;text-align:left}
.icover .ic-k{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#ffe600}
.icover b{font:400 clamp(44px,6vw,88px)/1 var(--display);letter-spacing:-.03em;color:#ffe600}
.icover small{font-size:clamp(14px,1.4vw,18px);line-height:1.35;color:#faf8f5;max-width:30ch}
.icover em{font:500 12px var(--mono);font-style:normal;color:#d6d3d1;margin-top:10px;line-height:1.5}
.athumb .icover b{font-size:44px}.athumb .icover small{font-size:13px}.athumb .icover em{font-size:10px}
.lock-cover{position:relative;height:clamp(260px,34vw,420px);border-radius:var(--r);overflow:hidden;margin-bottom:28px}
.lock-cover .art{max-width:none;width:100%}
.cs-cover .icover{position:relative;min-height:360px}
.cs-cover:has(.icover){padding:0}
.cs-livecover{display:flex;justify-content:center;background:var(--bg2);border-radius:var(--r);padding:24px;margin-bottom:32px}
.cs-livecover img{max-height:520px;width:auto;border-radius:12px}
.cs-livecover.wide{padding:0;overflow:hidden}.cs-livecover.wide img{width:100%;max-height:none;border-radius:0}
.about{padding:96px 0 60px}
.aboutlink{margin-top:24px}
.about-solo{padding-top:60px}
@media (max-width:980px){.talk-top{grid-template-columns:1fr}.bthumb{height:300px}.talk .accent-text{white-space:normal}}
.bthumb img,.athumb img{position:absolute;inset:0}

/* verbatim case pages */
.cs-sublede{font-size:17px;color:var(--muted);max-width:62ch;margin:-20px 0 32px}
.vb{max-width:820px;margin:0 auto;padding:40px 0 72px;font-size:18px;line-height:1.65;color:var(--ink2)}
.vb h2{font:400 clamp(24px,2.6vw,34px)/1.2 var(--display);letter-spacing:-.015em;color:var(--ink);margin:48px 0 14px;text-wrap:balance}
.vb h2 strong{font-weight:inherit}
.vb p{margin:0 0 14px}
.vb strong{color:var(--ink);font-weight:600}
.vb a{color:var(--accent)}
.vb ul{margin:0 0 16px;padding-left:22px}
.vb ul ul{margin:8px 0 0}
.vb li{margin-bottom:8px}
.vb li::marker{color:var(--accent)}
.vfig{margin:28px 0}
.vbtn{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;cursor:zoom-in}
.vbtn img{width:100%;height:auto;display:block}
.vfig figcaption{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.4}
.vrow{display:flex;gap:16px;align-items:flex-start;margin:28px 0}
.vrow .vfig{flex:1 1 0;min-width:0;margin:0}
.lock-cover img,.bthumb img,.athumb img{background:#fff}
.lock-cover img.fit{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cs-cover img.fit{width:100%;height:auto;display:block}
.bthumb:has(img.fit),.athumb:has(img.fit){background:var(--bg2)}
.bthumb img.fit,.athumb img.fit{background:transparent}
@media (max-width:600px){.vrow{flex-direction:column}.nav nav{display:none}}
@media (max-width:980px){.nav nav{display:flex;overflow-x:auto;gap:16px;font-size:13px;max-width:52vw}.logo-url{display:none}}
.btn-sm{white-space:nowrap}
.nav nav{scrollbar-width:none}
.nav nav::-webkit-scrollbar{display:none}
@media (max-width:600px){.nav{gap:10px}.nav nav{display:flex;flex:1;min-width:0;max-width:none}.logo-name{display:none}.btn-sm{padding:8px 12px;font-size:13px}}

.goals{display:grid;gap:28px}
.goal h3{font:400 24px/1.2 var(--display);margin:0 0 10px}
.goal-t{font-weight:600;color:var(--ink);margin:12px 0 4px!important}
.story{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;max-width:820px;margin:32px auto 0;padding:16px 20px;background:var(--card);border:1px solid var(--line);border-radius:16px;font-size:15px}
.story-l{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);width:100%}
.story i{font-style:normal;color:var(--muted)}
.story a{color:var(--ink)}
.story-on{background:var(--acid);padding:2px 8px;border-radius:4px;font-weight:600}
.story-next{display:block;max-width:820px;margin:0 auto 56px;padding:28px 32px;background:var(--dark);color:#faf8f5;border-radius:20px;text-decoration:none;transition:transform .25s var(--ease-out)}
.story-next:hover{transform:translateY(-3px)}
.story-next span{display:block;font:500 12px var(--mono);letter-spacing:.08em;color:var(--acid);margin-bottom:8px}
.story-next b{font:400 clamp(24px,3vw,36px)/1.15 var(--display)}

/* round 8 */
.sec-title .accent-text{margin-top:.16em}
.vvideo{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#141210;margin:20px 0 10px}
.vvideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vvlink{font-size:15px}

/* round 9 */
.heroeye{gap:14px}
.headshot{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid var(--acid);flex:none}
.morph{transition:color .08s linear}
.morph.swap{color:transparent}
.hero-line span{transition:none;transform:none}
.hero-line span.on{transition:opacity .16s ease-out}
.spec{transition:none;transform:none}
.spec.on{transition:opacity .16s ease-out}
.statement{padding:110px 0}
.big-statement{max-width:none;font-size:clamp(38px,6.7vw,104px);line-height:1.06}