/* home-v2.css
   Ported verbatim from project-docs/design/homepage-v2.html (approved mockup).
   Values are copied, not approximated. Do not restyle without updating the mockup.
   Additions after the PORT ADDITIONS marker: skip link, filter fade, asset-aware
   screenshot frames. Nothing above that marker was changed.
*/
:root{
  --black:#0A0A0A;--panel:#131313;--paper:#FAF9F5;
  --acid:#E9FF5C;--acid-h:#D4FF2E;
  --gray:#6B6B6B;--gray-s:#A8A8A8;
  --ld:rgba(250,249,245,.12);--ll:rgba(10,10,10,.12);
  --sans:'Poppins',sans-serif;--mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--black);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;position:relative}
@media(max-width:600px){.wrap{padding:0 20px}}
h1,h2,h3{font-weight:600;letter-spacing:-0.025em;line-height:1.12}
.h2{font-size:var(--h2)}
.lead{color:var(--gray);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.72}
.dark{background:var(--black);color:var(--paper)}
.warm{background:#F4F2EA;color:var(--black)}
.dark .lead{color:var(--gray-s)}
.grain{position:relative}
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
section{position:relative;padding:140px 0}
@media(max-width:768px){section{padding:96px 0}}

/* chapter ritual */
.ch-head{position:relative;margin-bottom:56px}
.ghost{position:absolute;top:-.55em;right:0;font-weight:700;font-size:clamp(4.5rem,8vw,8rem);line-height:1;color:transparent;-webkit-text-stroke:1px currentColor;opacity:.08;pointer-events:none;user-select:none}
.dark .ghost{opacity:.12;-webkit-text-stroke:1px var(--paper);}
.light-ghost{-webkit-text-stroke:1px var(--black)}
.ovl{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
.ovl::before{content:"";width:24px;height:1px;background:currentColor}
.dark .ovl{color:var(--acid)}
section:not(.dark) .ovl{color:var(--gray)}
.ch-head .h2{max-width:640px}
.ch-split{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:start}
@media(max-width:960px){.ch-split{grid-template-columns:1fr;gap:24px;align-items:start}}

/* signal line */
.sig{position:absolute;left:24px;top:0;bottom:0;width:1.5px;background:var(--ll)}
.dark .sig{background:var(--ld)}
.sig i{position:absolute;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;border:1.5px solid var(--black);background:var(--paper);top:148px}
.dark .sig i{border-color:var(--acid);background:var(--black)}
.sig i.on{background:var(--black)}
.dark .sig i.on{background:var(--acid)}
@media(max-width:1100px){.sig{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:15px;padding:15px 28px;border-radius:100px;text-decoration:none;transition:transform .18s,background .18s;cursor:pointer;border:1px solid transparent}
.btn-acid{background:var(--acid);color:var(--black)}
.btn-acid:hover{background:var(--acid-h);transform:translateY(-2px)}
.btn-black{background:var(--black);color:var(--paper)}
.btn-black:hover{transform:translateY(-2px)}
.btn-ghd{border-color:var(--ld);color:var(--paper)}
.btn-ghd:hover{border-color:var(--paper)}
.btn .ar{transition:transform .18s}
.btn:hover .ar{transform:translateX(4px)}
.tlink{font-weight:600;font-size:15px;color:inherit;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
section:not(.dark) a:focus-visible,section:not(.dark) button:focus-visible{outline-color:var(--black)}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{animation:none!important;transition:none!important}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;background:var(--paper);border-bottom:1px solid var(--ll)}
.nav-in{max-width:1200px;margin:0 auto;padding:0 32px;height:70px;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:700;font-size:16px;text-decoration:none;color:var(--black);display:flex;align-items:center;gap:8px}
.logo b{color:var(--black)}
.logo .mk{width:18px;height:14px;background:linear-gradient(135deg,var(--acid) 0 50%,var(--black) 50% 100%);clip-path:polygon(0 100%,50% 0,100% 100%)}
.nlinks{display:flex;gap:30px;align-items:center}
.nlinks a{text-decoration:none;color:var(--black);font-size:14px;font-weight:500;opacity:.75}
.nlinks a:hover{opacity:1}
.nav .btn{padding:11px 22px;font-size:14px}
@media(max-width:900px){.nlinks{display:none}}

/* 01 hero */
.hero{padding:140px 0 0}
.hero-g{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
@media(max-width:960px){.hero-g{grid-template-columns:1fr;gap:48px}.hero{padding-top:110px}}
.hero h1{font-size:var(--h1)}
.hero h1 .ln{display:block;opacity:0;transform:translateY(26px);animation:hin .7s forwards}
.hero h1 .ln:nth-child(2){animation-delay:.09s}
.hero h1 .ln:nth-child(3){animation-delay:.18s}
@keyframes hin{to{opacity:1;transform:none}}
.hero .sub{font-weight:600;color:var(--acid);font-size:clamp(1rem,1.6vw,1.25rem);margin:16px 0 18px;letter-spacing:-0.02em}
.hero .lead{max-width:520px}
.hero-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.ledger{border-top:1px solid var(--ld);margin-top:92px;display:grid;grid-template-columns:repeat(4,1fr)}
.ledger>div{padding:26px 20px 26px 0;border-right:1px solid var(--ld)}
.ledger>div:last-child{border-right:0}
.ledger b{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(1.25rem,2vw,1.7rem);color:var(--acid);letter-spacing:-0.01em}
.ledger small{font-family:var(--mono);font-size:11px;color:var(--gray-s);letter-spacing:.08em;text-transform:uppercase;line-height:1.5;display:block;margin-top:6px}
@media(max-width:860px){.ledger{grid-template-columns:1fr 1fr}.ledger>div:nth-child(2){border-right:0}}
@media(max-width:520px){.ledger{grid-template-columns:1fr}.ledger>div{border-right:0;border-bottom:1px solid var(--ld)}}
.sch svg{width:100%;height:auto;display:block}
.sl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;fill:var(--paper);opacity:.85}
.ss{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;fill:#A8A8A8}
.sln{stroke:rgba(250,249,245,.22);stroke-width:1.2;fill:none}
.slp{stroke:var(--acid);stroke-width:1.6;fill:none;stroke-dasharray:60 620;stroke-dashoffset:680;animation:pl 5.5s linear infinite}
@keyframes pl{to{stroke-dashoffset:0}}
.snd{fill:var(--black);stroke:rgba(250,249,245,.35);stroke-width:1.2}
.snl{stroke:var(--acid)}
.sdt{fill:var(--acid)}
.stg{font-family:var(--mono);font-size:10px;letter-spacing:.12em;fill:var(--acid)}
.tick{border-top:1px solid var(--ld);border-bottom:1px solid var(--ld);overflow:hidden;padding:16px 0;margin-top:64px}
.tick-t{display:flex;gap:52px;white-space:nowrap;width:max-content;animation:tk 40s linear infinite}
.tick span{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-s)}
.tick b{color:var(--acid);font-weight:400}
@keyframes tk{to{transform:translateX(-50%)}}

/* 02 journey */
.rail{position:relative;margin-top:24px}
.rail-line{position:absolute;top:5px;left:0;right:0;height:1.5px;background:var(--ll)}
.rail-fill{position:absolute;top:5px;left:0;height:1.5px;background:var(--black);width:0;transition:width 1.8s cubic-bezier(.4,0,.2,1)}
.rail.go .rail-fill{width:100%}
.rail-n{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;position:relative}
.rn{padding-top:0}
.rn i{display:block;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--black);background:var(--paper);margin-bottom:16px;transition:background .3s}
.rail.go .rn i{background:var(--black)}
.rn em{font-family:var(--mono);font-style:normal;font-size:10.5px;color:var(--gray);letter-spacing:.06em;display:block}
.rn b{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:4px}
.rail.go .rn i{transition-delay:calc(var(--i)*.18s)}
@media(max-width:860px){.rail-line,.rail-fill{display:none}.rail-n{grid-template-columns:1fr 1fr}.rn{display:flex;gap:12px;align-items:baseline}.rn i{margin:0}}
@media(max-width:520px){.rail-n{grid-template-columns:1fr}}

/* 03 about */
.ab-g{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}
@media(max-width:960px){.ab-g{grid-template-columns:1fr;gap:44px}}
.folio{aspect-ratio:4/5;background:var(--black);border-radius:18px;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid var(--ll)}
.folio span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--acid);text-transform:uppercase}
.folio .chip{position:absolute;right:-14px;bottom:34px;background:var(--black);border:1px solid rgba(233,255,92,.5);color:var(--paper);padding:14px 18px;border-radius:12px}
.folio .chip b{font-family:var(--mono);color:var(--acid);font-size:1.3rem;display:block}
.folio .chip small{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--gray-s);text-transform:uppercase}
.ab-lead{font-size:1.32rem;font-weight:500;color:var(--black);line-height:1.55;margin-bottom:18px;letter-spacing:-0.01em}
.ab-g p+p{margin-top:14px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 30px}
.tags span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:6px 13px;border:1px solid var(--ll);border-radius:100px;color:var(--gray)}

/* 04 experience */
.exp-rail{border-top:1.5px solid var(--ll);display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-top:0;margin-top:48px}
.exp{padding-top:30px;position:relative}
.exp::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:var(--black)}
.exp .yr{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--gray);text-transform:uppercase;display:block;margin-bottom:14px}
.exp h3{font-size:var(--h3);margin-bottom:10px}
.exp p{color:var(--gray);font-size:14.5px;line-height:1.65}
@media(max-width:960px){.exp-rail{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.exp-rail{grid-template-columns:1fr;border-top:0;border-left:1.5px solid var(--ll);padding-left:28px;gap:40px}.exp::before{left:-34px;top:6px}.exp{padding-top:0}}

/* 05 capabilities */
.cap{display:grid;grid-template-columns:90px 1.15fr 1.5fr 40px;gap:28px;align-items:center;padding:38px 20px;border-top:1px solid var(--ll);text-decoration:none;color:var(--black);transition:background .25s,color .25s}
.cap:last-of-type{border-bottom:1px solid var(--ll)}
.cap .gn{font-weight:700;font-size:2.2rem;color:transparent;-webkit-text-stroke:1px var(--black);opacity:.35;line-height:1;transition:opacity .25s}
.cap h3{font-size:var(--h3);letter-spacing:-0.02em}
.cap p{color:var(--gray);font-size:14.5px;line-height:1.6;max-width:520px}
.cap .tg{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.cap .tg span{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;padding:5px 11px;border:1px solid var(--ll);border-radius:100px;color:var(--gray)}
.cap .ar2{font-size:20px;transition:transform .25s;justify-self:end}
.cap:hover{background:var(--black);color:var(--paper)}
.cap:hover p{color:var(--gray-s)}
.cap:hover .gn{-webkit-text-stroke-color:var(--acid);opacity:.8}
.cap:hover .tg span{border-color:var(--ld);color:var(--gray-s)}
.cap:hover .ar2{transform:translateX(6px);color:var(--acid)}
@media(max-width:860px){.cap{grid-template-columns:1fr;gap:12px;padding:30px 14px}.cap .ar2{display:none}.cap .gn{font-size:2rem}}

/* 06 models */
.mod-g{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
@media(max-width:960px){.mod-g{grid-template-columns:1fr}}
.mod{border:1px solid var(--ld);background:var(--panel);padding:38px 30px 34px;position:relative;border-radius:0}
.mod .tab{position:absolute;top:-15px;left:24px;background:var(--panel);border:1px solid var(--ld);border-bottom-color:var(--panel);padding:6px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--acid)}
.mod h3{font-size:var(--h3);margin-bottom:10px}
.mod>p{color:var(--gray-s);font-size:14.5px;line-height:1.65;margin-bottom:22px}
.mod h4{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;color:var(--gray-s);text-transform:uppercase;margin:20px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--ld)}
.mod ul{list-style:none}
.mod li{font-size:14px;color:var(--paper);padding:4px 0 4px 16px;position:relative}
.mod li::before{content:"–";position:absolute;left:0;color:var(--acid)}
.ww{margin-top:64px;border-top:1px solid var(--ld);padding-top:26px;display:flex;gap:32px;flex-wrap:wrap;align-items:baseline}
.ww em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.14em;color:var(--gray-s);text-transform:uppercase}
.ww span{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--paper)}

/* browser frame */
.bf{border:1px solid var(--ld);border-radius:12px;overflow:hidden;background:var(--panel)}
.bf .bar{display:flex;gap:6px;padding:11px 14px;border-bottom:1px solid var(--ld)}
.bf .bar i{width:8px;height:8px;border-radius:50%;background:var(--ld)}
.bf .ph{min-height:260px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--gray);text-transform:uppercase;padding:20px;text-align:center}
section:not(.dark) .bf{background:#f1efe8;border-color:var(--ll)}
section:not(.dark) .bf .bar{border-color:var(--ll)}
section:not(.dark) .bf .bar i{background:var(--ll)}
.cap-l{font-family:var(--mono);font-size:11px;color:var(--gray);letter-spacing:.06em;margin-top:12px}
.dark .cap-l{color:var(--gray-s)}

/* 07 & 08 features */
.ft-g{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start;margin-top:24px}
.ft-g.flip{grid-template-columns:.95fr 1.05fr}
@media(max-width:960px){.ft-g,.ft-g.flip{grid-template-columns:1fr;gap:40px}}
.big-metric{border-top:2px solid var(--acid);padding-top:22px;margin-bottom:22px}
.big-metric b{font-family:var(--mono);font-weight:500;font-size:clamp(2rem,3.6vw,3.2rem);color:var(--acid);letter-spacing:-0.02em;display:block}
.big-metric small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--gray-s);text-transform:uppercase;display:block;margin-top:8px;line-height:1.6}
.spec{margin:26px 0;width:100%}
.spec div{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:10px 0;border-bottom:1px solid var(--ld);font-size:14px}
.spec em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.12em;color:var(--gray-s);text-transform:uppercase;padding-top:3px}
.hlist{list-style:none;columns:2;gap:28px;margin:20px 0 28px}
.hlist li{font-size:14px;color:var(--paper);padding:4px 0 4px 16px;position:relative;break-inside:avoid}
.hlist li::before{content:"–";position:absolute;left:0;color:var(--acid)}
@media(max-width:520px){.hlist{columns:1}}
.trio{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ld);border-bottom:1px solid var(--ld);margin:26px 0}
.trio div{padding:20px 16px 20px 0;border-right:1px solid var(--ld)}
.trio div:last-child{border-right:0}
.trio b{font-family:var(--mono);font-weight:500;font-size:1.7rem;color:var(--acid);display:block}
.trio small{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--gray-s);text-transform:uppercase}
.pq{border-left:2px solid var(--acid);padding:6px 0 6px 20px;color:var(--paper);font-size:15px;margin:24px 0 30px;max-width:480px}

/* 09 paid */
.camp{border:1px solid var(--ld);background:var(--panel);border-radius:18px;padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;margin-top:28px}
.camp.flip .med{order:-1}
.camp .kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--acid);text-transform:uppercase;display:block;margin-bottom:12px}
.camp h3{font-size:var(--h3);margin-bottom:10px}
.camp p{color:var(--gray-s);font-size:14.5px;line-height:1.65;margin-bottom:18px}
.camp .tg{display:flex;flex-wrap:wrap;gap:7px}
.camp .tg span{font-family:var(--mono);font-size:10px;letter-spacing:.05em;padding:5px 11px;border:1px solid var(--ld);border-radius:100px;color:var(--gray-s)}
.camp .bf .ph{background-image:linear-gradient(var(--ld) 1px,transparent 1px),linear-gradient(90deg,var(--ld) 1px,transparent 1px);background-size:24px 24px;background-position:center}
@media(max-width:860px){.camp{grid-template-columns:1fr}.camp.flip .med{order:0}}

/* 10 work grid */
.filts{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 44px}
.filts button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:9px 18px;border-radius:100px;border:1px solid var(--black);background:transparent;color:var(--black);cursor:pointer;transition:background .2s,color .2s}
.filts button.on,.filts button:hover{background:var(--black);color:var(--paper)}
.wg{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:960px){.wg{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.wg{grid-template-columns:1fr}}
.wk{text-decoration:none;color:var(--black);display:flex;flex-direction:column;transition:transform .25s}
.wk:hover{transform:translateY(-4px)}
.wk .bf .ph{min-height:170px}
.wk .kick{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--gray);text-transform:uppercase;margin:16px 0 6px}
.wk h3{font-size:var(--h3);margin-bottom:6px}
.wk p{color:var(--gray);font-size:13.5px;line-height:1.6;flex:1}
.wk .loc{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--gray);text-transform:uppercase;margin-top:12px}
.wk .prep{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;border:1px dashed var(--ll);border-radius:100px;padding:4px 10px;color:var(--gray);margin-top:10px;text-transform:uppercase;align-self:flex-start}

/* 11 process */
.pr-g{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:64px;position:relative}
.pr-g::before{content:"";position:absolute;top:52px;left:0;right:0;height:1px;background:var(--ll)}
.pr{position:relative;padding-top:0}
.pr .gn2{font-weight:700;font-size:clamp(3.5rem,6vw,6rem);line-height:1;color:transparent;-webkit-text-stroke:1px var(--black);opacity:.1;display:block}
.pr h3{font-size:var(--h3);margin:-24px 0 10px;position:relative}
.pr p{color:var(--gray);font-size:14px;line-height:1.65}
@media(max-width:960px){.pr-g{grid-template-columns:1fr 1fr}.pr-g::before{display:none}}
@media(max-width:560px){.pr-g{grid-template-columns:1fr}}

/* 12 proof */
.pw{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:12px}
@media(max-width:960px){.pw{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.pw{grid-template-columns:1fr}}
.pf{border:1px solid var(--ld);background:var(--panel);border-radius:14px;padding:18px;transition:transform .25s,border-color .25s}
.pf:hover{transform:translateY(-4px);border-color:rgba(233,255,92,.4)}
.pf .bf{border-radius:8px}
.pf .bf .ph{min-height:150px}
.pf .arc{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--ld);padding:14px 0 8px;margin-bottom:8px}
.pf .arc em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--acid);text-transform:uppercase}
.pf .arc span{font-family:var(--mono);font-size:10px;color:var(--gray-s)}
.pf h3{font-size:var(--h3);margin-bottom:5px}
.pf p{color:var(--gray-s);font-size:13px;line-height:1.6}

/* 13 faq */
.faq{border-top:1px solid var(--ll);margin-top:8px}
.fi{border-bottom:1px solid var(--ll)}
.fi button{width:100%;background:none;border:0;display:grid;grid-template-columns:64px 1fr 32px;gap:16px;align-items:center;padding:24px 4px;cursor:pointer;text-align:left;font-family:var(--sans)}
.fi .qn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--gray)}
.fi h3{font-size:var(--h3);font-weight:600;letter-spacing:-0.01em}
.fi .pm{font-size:20px;font-weight:400;justify-self:end;transition:transform .2s;color:var(--black)}
.fi.open .pm{transform:rotate(45deg)}
.fi .ans{max-height:0;overflow:hidden;transition:max-height .3s ease}
.fi.open .ans{max-height:300px}
.fi .ans p{padding:0 4px 26px 80px;color:var(--gray);font-size:14.5px;line-height:1.7;border-left:2px solid transparent}
.fi.open .ans p{border-left-color:var(--black);margin-left:78px;padding-left:20px;padding-bottom:26px}
@media(max-width:640px){.fi button{grid-template-columns:1fr 28px}.fi .qn{display:none}.fi .ans p,.fi.open .ans p{margin-left:0;padding-left:16px}}

/* 14 cta */
.cta-g{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:start}
@media(max-width:960px){.cta-g{grid-template-columns:1fr;gap:44px}}
.cta-g h2{font-size:var(--h2);margin-bottom:20px;position:relative}
.pulse{position:absolute;left:-40px;top:18px;width:10px;height:10px;border-radius:50%;background:var(--acid);animation:pu 1.8s infinite}
@keyframes pu{0%{box-shadow:0 0 0 0 rgba(233,255,92,.5)}70%{box-shadow:0 0 0 14px rgba(233,255,92,0)}100%{box-shadow:0 0 0 0 rgba(233,255,92,0)}}
@media(max-width:1100px){.pulse{display:none}}
.cl{width:100%}
.cl div{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--ld);font-size:14px}
.cl em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.14em;color:var(--gray-s);text-transform:uppercase;padding-top:3px}
.cl a{color:var(--acid);text-decoration:none}
.foot{border-top:1px solid var(--ld);padding:38px 0;background:var(--black);color:var(--paper)}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.foot nav{display:flex;gap:24px}
.foot a{color:var(--gray-s);text-decoration:none;font-size:13.5px}
.foot a:hover{color:var(--paper)}
.foot span{font-family:var(--mono);font-size:11.5px;color:var(--gray-s)}

/* ══ PORT ADDITIONS ══════════════════════════════════════════ */

/* skip to content */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--black);color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:12px 18px;border-radius:0 0 8px 0;text-decoration:none}
.skip:focus{left:0}

/* work grid filtering, 200ms fade and reflow */
.wk{transition:transform .25s,opacity .2s}
.wk.out{opacity:0;pointer-events:none}
.wk[hidden]{display:none}
/* cards with no case study page yet are not links */
.wk-static{cursor:default}
.wk-static:hover{transform:none}

/* real screenshots render inside the browser frame when the asset exists */
.bf .shot{display:block;width:100%;height:auto}

/* real portrait fills the folio without changing its 4/5 footprint */
.folio-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:18px;z-index:0}
.folio .chip{z-index:1}

/* Horizontal scroll containment. The mockup sets overflow-x:hidden on body only,
   which does not stop the viewport scrolling in Chrome when an off-canvas panel
   sits outside the frame. Clip on the root fixes it with no visual change. */
html{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}

/* typography pass: chapter header margin on mobile */
@media(max-width:768px){.ch-head{margin-bottom:40px}}

/* ── global rule: nothing sits flush against a divider ──────────
   Any cell to the right of a vertical rule takes 28px of left padding,
   16px on mobile. Applied to every bordered grid on the page. */
.ledger>div{padding:26px 20px 26px 28px}
.ledger>div:first-child{padding-left:0}
.trio div{padding:20px 16px 20px 28px}
.trio div:first-child{padding-left:0}
.spec div{grid-template-columns:110px 1fr;gap:28px}
.cl div{grid-template-columns:120px 1fr;gap:28px}
.mod{padding-left:30px}
@media(max-width:860px){
  .ledger>div{padding-left:16px}
  .ledger>div:nth-child(odd){padding-left:0}
}
@media(max-width:600px){
  .ledger{grid-template-columns:1fr}
  .ledger>div,.ledger>div:nth-child(odd){padding-left:0}
  .trio div{padding-left:16px}
  .trio div:first-child{padding-left:0}
  .spec div,.cl div{gap:16px}
}

/* ── global rule: split chapter headers top-align, and the right column
   starts level with the H2 rather than the overline.
   Overline row measures 19px tall plus 18px margin, so 37px, plus 8px
   to match the H2 line box. Measured, not guessed. */
.ch-split{align-items:start}
.ch-split>*:nth-child(2){padding-top:45px}
@media(max-width:960px){.ch-split>*:nth-child(2){padding-top:0}}

/* Placeholder asset paths are long unbroken tokens, they must wrap on narrow screens */
.bf .ph{word-break:break-word;overflow-wrap:anywhere}

/* Contact ledger stacks on narrow screens, the email address cannot wrap inside
   a fixed label column without pushing the layout past the viewport */
@media(max-width:600px){
  .cl div{grid-template-columns:1fr;gap:4px;padding:12px 0}
  .cl a,.cl span{overflow-wrap:anywhere}
}

/* Inline links inside body copy. Without this the browser default paints them
   blue, or purple once visited. Acid on dark, ink on light, never both. */
.lead a:not([class]), p a:not([class]), li a:not([class]), dd a:not([class]){
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;
  transition:opacity .18s}
.lead a:not([class]):hover, p a:not([class]):hover,
li a:not([class]):hover, dd a:not([class]):hover{opacity:.7}
section:not(.dark) .lead a:not([class]), section:not(.dark) p a:not([class]),
section:not(.dark) li a:not([class]), section:not(.dark) dd a:not([class]){
  color:var(--black);border-bottom-color:rgba(10,10,10,.4)}
.dark .lead a:not([class]), .dark p a:not([class]),
.dark li a:not([class]), .dark dd a:not([class]){
  color:var(--acid);border-bottom-color:rgba(233,255,92,.45)}

/* Screenshots inside the browser frame. The chrome supplies the branding, the
   image sits flush inside it with no rounding of its own and a hairline
   separator under the bar so light screenshots do not bleed into it. */
.bf .shot{display:block;width:100%;height:auto;border:0;border-radius:0;background:var(--paper)}
.bf:has(.shot){background:var(--panel)}
section:not(.dark) .bf:has(.shot){background:#f1efe8}
.wk .bf .shot,.ab-pj .bf .shot{aspect-ratio:16/9;object-fit:cover;object-position:top center}
.pf .bf .shot{aspect-ratio:16/10;object-fit:contain;object-position:center;background:#fff}

/* Featured case study on black gets the same thin panel border as the paid
   campaign cards below it, so the dark sections read as one family. */
.dark .ft-g{border:1px solid var(--ld);border-radius:18px;padding:34px}
@media(max-width:960px){.dark .ft-g{padding:26px}}
@media(max-width:600px){.dark .ft-g{padding:20px;border-radius:14px}}

/* ── screenshot lightbox ───────────────────────────────────────
   Any image inside a browser frame opens full size on click. Applies to
   every current and future screenshot, no per image markup needed. */
.bf .shot{cursor:zoom-in}
.bf .shot:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
section:not(.dark) .bf .shot:focus-visible{outline-color:var(--black)}