/* Studio Blueprint · story v2 · "the founder's desk, scanned" */
:root{--ink:#0A0A0A;--ink-2:#3A3A3A;--ink-3:#6B6B6B;--rule:#E6E6E6;--yel:#FFF200;--note:#FFF27A;--blue:#1D3FB8;--red:#D8261C;
--disp:'Bricolage Grotesque',sans-serif;--tw:'Special Elite',monospace;--biro:'Reenie Beanie',cursive;
--hard:1px 2px 0 rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.05);--hard2:2px 3px 0 rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.07);
--fib:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--gut:clamp(18px,4.4vw,64px)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{background:#fff;color:var(--ink);font:400 18px/1.5 var(--disp);font-variation-settings:"opsz" 14;-webkit-font-smoothing:antialiased;overflow-x:clip}
.page{max-width:1480px;margin:0 auto;padding:0 var(--gut)}a{color:inherit}
.h1,.h2,.h3{font-family:var(--disp);font-weight:700;letter-spacing:-.035em;font-variation-settings:"opsz" 96,"wdth" 75}
.h1{font-size:clamp(46px,8.1vw,128px);line-height:.86}.h1 span{display:block;white-space:nowrap}.h1 .i2{margin-left:-.04em}
.h2{font-size:clamp(40px,5.6vw,88px);line-height:.9;max-width:11em}
.h3{font-size:clamp(26px,2.4vw,36px);line-height:.98;letter-spacing:-.025em;font-variation-settings:"opsz" 48,"wdth" 85}
.hl{background:linear-gradient(transparent 12%,var(--yel) 12% 88%,transparent 88%);color:inherit;padding:0 .06em;margin:0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lede{font-size:clamp(18px,1.45vw,21px);line-height:1.38;color:var(--ink-2);max-width:27em}
.tw{font-family:var(--tw);font-weight:400;letter-spacing:.02em}.biro{font-family:var(--biro);color:var(--blue);font-weight:400;line-height:.95}
.fn{font-size:12px;color:var(--ink-3)}
.btn{display:inline-block;background:var(--ink);color:#fff;padding:18px 26px 17px;font:700 16px var(--disp);letter-spacing:-.01em;text-decoration:none;border:0;cursor:pointer;box-shadow:3px 3px 0 var(--yel)}
.btn:hover{box-shadow:5px 5px 0 var(--yel);translate:-2px -2px}
.lnk{font-weight:600;font-size:16px;text-decoration:none;background:linear-gradient(var(--yel),var(--yel)) no-repeat 0 92%/100% .42em}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.ctas{display:flex;gap:30px;align-items:center;flex-wrap:wrap;margin-top:30px}
.prog{position:fixed;top:0;left:0;right:0;height:6px;background:var(--yel);transform-origin:0 50%;transform:scaleX(0);z-index:9}
@supports (animation-timeline:scroll()){.prog{animation:prog linear both;animation-timeline:scroll(root)}}@keyframes prog{to{transform:scaleX(1)}}
nav{display:flex;align-items:center;height:78px;gap:30px}nav .logo{font:800 22px var(--disp);letter-spacing:-.04em;font-variation-settings:"wdth" 75;margin-right:auto;text-decoration:none}
nav a{font-size:15px;color:var(--ink);text-decoration:none}nav .btn{padding:11px 18px;font-size:14px;box-shadow:none}
/* paper */
.note,.card,.sheet,.pola{position:relative;transform:rotate(var(--r,0deg));background-image:var(--fib)}
.note{background-color:var(--note);padding:26px 18px 22px;font:400 34px/.95 var(--biro);color:var(--blue);box-shadow:var(--hard)}
.card{background-color:#fff;padding:30px 18px 20px;font:400 33px/.95 var(--biro);color:var(--blue);box-shadow:var(--hard2);
 background-image:var(--fib),linear-gradient(90deg,transparent 26px,rgba(216,38,28,.35) 26px 27px,transparent 27px),repeating-linear-gradient(transparent 0 25px,rgba(29,63,184,.16) 25px 26px);background-position:0 0,0 0,0 10px}
.card.ain,.card.list{font:inherit;color:var(--ink);background-image:var(--fib)}
.sheet{background-color:#fff;box-shadow:var(--hard2)}
.tp{position:absolute;top:-12px;width:88px;height:26px;background:rgba(240,240,232,.72);background-image:var(--fib);box-shadow:0 1px 0 rgba(0,0,0,.08);transform:rotate(var(--t,-5deg));clip-path:polygon(2% 0,98% 6%,100% 30%,97% 55%,100% 100%,3% 96%,0 70%,3% 40%)}
.tp.a{left:14%}.tp.b{right:12%}.tp.c{left:40%}
small.tw{display:block;font-size:12px;color:var(--ink-3);margin-bottom:10px}
.mk{fill:none;stroke-linecap:round;stroke-linejoin:round;overflow:visible;pointer-events:none}
.dr{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.5,0,.2,1) .2s}.done .dr{stroke-dashoffset:0}
.cw{position:relative;display:inline-block;white-space:nowrap}.cw svg{position:absolute;left:-14%;top:-14%;width:128%;height:128%}
.wrap{position:relative;width:100%;aspect-ratio:var(--w)/var(--h)}.wall{position:absolute;left:0;top:0;width:calc(var(--w)*1px);height:calc(var(--h)*1px);transform-origin:0 0;transform:scale(var(--s,1))}
.ch{position:relative}
/* 1 hero: type across full width, collage overlaps */
.hero{padding:34px 0 40px;min-height:calc(100svh - 78px)}
.hero-low{display:grid;grid-template-columns:.62fr 1fr;gap:40px;margin-top:-6px;align-items:start}
.hero-copy{padding-top:56px}
.hero-art{margin-right:calc(var(--gut)*-1.4);margin-top:34px}
.plane{position:absolute;inset:0;will-change:transform}
.deck{position:absolute;left:10px;top:20px;width:320px;padding:30px 26px 24px}.deck b{display:block;font:700 30px/.95 var(--disp);letter-spacing:-.03em;font-variation-settings:"wdth" 75,"opsz" 48;margin-bottom:16px}
.deck ul{list-style:none;font-size:15px}.deck li{padding:6px 0;border-top:1px solid var(--rule)}
.grid{position:absolute;left:300px;top:96px;width:380px;padding:26px 22px 20px}
.grid table{width:100%;border-collapse:collapse;font:14px var(--tw)}.grid th{font-size:11px;text-align:left;color:var(--ink-3);padding:4px 0;font-weight:400}.grid td{padding:8px 0;border-top:1px dashed #cfcfcf}.grid s{color:var(--red)}
.hero-art .note{position:absolute}
.b1{left:470px;top:392px;font-size:38px;transform:rotate(-6deg)}
.hero-art .fn{margin:0 0 0 12px}
/* 2 tension */
.tension{display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;padding:150px 0 110px}.tension .lede{margin-top:26px}
.qs{position:relative;display:flex;flex-wrap:wrap;gap:34px 26px;align-content:flex-start;padding-top:40px}
.qs>div{translate:0 var(--y);font-size:38px;min-height:130px}
.rv{opacity:0;margin-top:40px;transition:opacity .5s ease calc(var(--i)*.12s),margin .7s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.12s)}.in .rv,.done .rv{opacity:1;margin-top:0}
/* 3 cost */
.cost{padding:90px 0 130px;margin-left:12%}.cost .h2{margin-bottom:46px}.cost ol{list-style:none;max-width:1040px}
.cost-l{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:center;padding:24px 0;border-top:2px solid var(--ink)}
.cs{font:600 clamp(26px,2.6vw,40px)/1.05 var(--disp);letter-spacing:-.025em;font-variation-settings:"wdth" 85}
.st{background:linear-gradient(var(--red),var(--red)) no-repeat 0 56%/0% 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1s cubic-bezier(.5,0,.2,1) .2s}.cost-l.in .st,.done .st{background-size:100% 3px}
.fix{font-size:clamp(34px,3vw,44px);opacity:0;transition:opacity .5s ease 1s;transform:rotate(-2deg)}.cost-l.in .fix,.done .fix{opacity:1}
/* 4 peak */
.peak{height:320vh}.pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:.78fr 1.22fr;gap:30px;align-items:center}
.caps{position:relative;margin-top:28px;min-height:5em}.cap{position:absolute;inset:0 auto auto 0;font:500 24px/1.2 var(--disp);max-width:17em;opacity:0;transition:opacity .4s}
.peak[data-c="0"] .c0,.peak[data-c="1"] .c1,.peak[data-c="2"] .c2{opacity:1}
.pk-copy .fn{margin-top:14px}.pk-art{max-width:760px;width:100%;justify-self:end;margin-right:calc(var(--gut)*-.6)}
.pn{position:absolute;will-change:transform;font-size:30px;min-height:96px}
.plab{position:absolute;font-size:44px;opacity:var(--lab,0)}
.pk-ink{position:absolute;inset:0;width:640px;height:640px}.pk-ink path{stroke-dasharray:1;stroke-dashoffset:var(--ln,1)}.pk-ink .pr{stroke-dashoffset:var(--rg,1)}
.core{position:absolute;left:250px;top:312px;font:800 30px var(--disp);letter-spacing:-.03em;font-variation-settings:"wdth" 75;opacity:var(--rgo,0);background:var(--yel);padding:0 6px;transform:rotate(-2deg)}
/* 5 solution */
.solution{padding:120px 0 40px}.sol-h{max-width:12em;margin-left:-.04em}.sgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}
.step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;max-width:26em;opacity:.22;transition:opacity .35s}.step.on{opacity:1}.step p{color:var(--ink-2);margin-top:12px}
.sstick{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.sfig{position:relative;width:100%;height:640px}.sfig .sheet{position:absolute;padding:28px 26px 22px;transition:opacity .5s,translate .7s cubic-bezier(.2,.8,.2,1)}
.s1{left:0;top:30px;width:330px}.s2{right:10px;top:0;width:290px}.s3{left:110px;top:250px;width:540px}
.s2,.s3{opacity:0;translate:0 50px}.sfig[data-on="1"] .s2,.sfig[data-on="2"] .s2,.sfig[data-on="2"] .s3{opacity:1;translate:0 0}
.s1 dl{display:grid;grid-template-columns:84px 1fr;gap:8px 12px;font-size:15px;margin-bottom:10px}.s1 dd{display:flex;gap:10px;align-items:center;font-family:var(--tw)}.s1 dd i{height:12px;background:var(--yel);display:block;max-width:60%}
.s2 strong,.ckg strong{font:700 56px/1 var(--disp);letter-spacing:-.04em;font-variation-settings:"wdth" 75}.s2 strong em,.ckg em{font:400 15px var(--disp);font-style:normal;color:var(--ink-3);letter-spacing:0}.s2 p{margin-top:10px}.s2 b{font:700 26px var(--disp)}
.ckh{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-3);padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:16px}.ckh b{color:var(--ink)}
.ckg{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:14px}.s3 ul{list-style:none;font-size:15px;margin-bottom:12px}.s3 li{display:flex;justify-content:space-between;padding:7px 0;border-top:1px dashed #cfcfcf}.s3 li em{font:400 26px var(--biro);color:var(--blue);line-height:.8}
.sn{position:absolute;right:20px;bottom:24px;font-size:44px;transform:rotate(-5deg);opacity:0;transition:opacity .4s .4s}.sfig[data-on="2"] .sn{opacity:1}
/* 6 ai */
.ai{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:110px 0 150px}.ai-copy .lede{margin-top:24px}
.ain{font-size:22px;line-height:1.4;padding:40px 36px 30px;max-width:600px;justify-self:end}.ain p{margin-bottom:24px}.ain .fn{margin:22px 0 0}.aib{display:flex;gap:26px;align-items:center}
.stamp{position:absolute;right:-30px;bottom:-40px;width:230px;height:126px;transform:rotate(-7deg)}.stamp svg{width:100%;height:100%}.stamp span{position:absolute;left:42%;top:34px;font-size:44px;color:var(--red)}
/* 7 proof */
.proof{padding:60px 0 140px}.proof .lede{margin:22px 0 70px}
.fds{display:grid;grid-template-columns:1.1fr 1fr;gap:70px}.fd{display:grid;grid-template-columns:270px 1fr;gap:34px;align-items:start}.fd:nth-child(2){margin-top:130px}
.pola{background-color:#fff;padding:12px 12px 0;box-shadow:var(--hard2)}.ph{aspect-ratio:1;background:#E9E9E9;background-image:var(--fib);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.ph span{font:800 70px var(--disp);color:#BDBDBD;font-variation-settings:"wdth" 75}.ph small{font-size:11px;color:var(--ink-3)}
.pola figcaption{padding:8px 4px 12px;font-size:40px;text-align:center}
.role{font-size:13px;color:var(--ink-3);margin:6px 0 12px}.fd p{color:var(--ink-2)}
.flag{margin-top:14px;font-size:12px;background:var(--yel);display:inline-block;padding:4px 8px;color:var(--ink)!important}
/* 8 close */
.close{padding:110px 0 120px}.cl-h{max-width:9em;font-size:clamp(46px,7vw,112px)}
.picker{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:start;margin-top:50px;margin-left:16%}
.list{padding:34px 30px 26px}.opts{display:flex;flex-direction:column}
.opt{display:flex;gap:16px;align-items:center;text-align:left;font:600 22px/1.2 var(--disp);letter-spacing:-.015em;background:none;border:0;border-top:1px dashed #cfcfcf;padding:15px 0;cursor:pointer;color:var(--ink)}
.box{flex:none;width:30px;height:30px;border:2px solid var(--ink)}.box svg{width:100%;height:100%;opacity:0}.opt[aria-pressed="true"] .box svg{opacity:1}.opt[aria-pressed="true"] .box path{stroke-dashoffset:0}
.opt[aria-pressed="true"]{background:linear-gradient(transparent 20%,var(--yel) 20% 80%,transparent 80%) no-repeat 46px 0/calc(100% - 46px) 100%}
.answer{padding:40px 28px 30px;margin-top:70px}.ans{font-size:38px;margin-bottom:26px}.ans b{font-weight:400;text-decoration:underline;text-decoration-thickness:2px}
footer{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding:56px 0;border-top:2px solid var(--ink);font-size:15px}
footer .logo{font:800 24px var(--disp);letter-spacing:-.04em;font-variation-settings:"wdth" 75;text-decoration:none;display:block;margin-bottom:10px}footer p{color:var(--ink-2);margin-bottom:8px}footer b{display:block;margin-bottom:10px}footer div>a{display:block;color:var(--ink-2);text-decoration:none;margin-bottom:6px}
/* reduced motion / static */
.done .peak{height:auto;padding:100px 0}.done .pin{position:static;height:auto}.done .caps{min-height:0}.done .cap{position:static;opacity:1;margin-bottom:8px}
.done .sstick{position:static;height:auto}.done .step{min-height:0;opacity:1;padding:20px 0}.done .s2,.done .s3,.done .sn{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
@media(max-width:860px){
 nav{height:66px}.hm{display:none}
 .h1{font-size:clamp(40px,11.4vw,64px);line-height:.9}.h1 span{white-space:normal}
 .hero{min-height:0;padding:16px 0 50px}.hero-low{grid-template-columns:minmax(0,1fr);gap:22px}.hero-copy{padding-top:22px}.hero-art{margin:6px -6px 0 0}
 .tension,.ai,.sgrid,.pin{grid-template-columns:minmax(0,1fr)}.tension{padding:90px 0 70px;gap:20px}.qs{gap:28px 14px;padding-top:24px}.qs>div{font-size:30px;min-height:100px;width:calc(50% - 8px)!important;translate:0 calc(var(--y)*.4)}
 .cost{margin-left:0;padding:60px 0 80px}.cost-l{grid-template-columns:minmax(0,1fr);gap:4px}.fix{font-size:32px}
 .pin{gap:10px;align-content:center}.pk-copy .h2{font-size:40px}.caps{margin-top:10px;min-height:2.8em}.cap{font-size:18px}.pk-copy .fn{display:none}.pk-art{margin:0}
 .solution{padding:80px 0 30px}.sgrid{gap:10px}.sstick{position:static;height:auto;padding-top:16px}.step{min-height:0!important;opacity:1;padding:16px 0}
 .sfig{height:700px}.sfig .s2,.sfig .s3,.sfig .sn{opacity:1!important;translate:0 0!important}.s1{width:230px;padding:22px 16px}.s2{width:205px;padding:22px 16px;right:0;top:150px}.s3{left:4px;top:380px;width:calc(100% - 8px);padding:22px 16px}.s2 strong,.ckg strong{font-size:40px}.sn{bottom:-12px;font-size:36px}
 .ai{padding:70px 0 110px;gap:40px}.ain{padding:34px 20px 26px;font-size:19px}.stamp{right:-6px;bottom:-62px;width:180px;height:100px}.stamp span{font-size:34px;top:26px}
 .proof{padding:40px 0 90px}.proof .lede{margin-bottom:46px}.fds{grid-template-columns:minmax(0,1fr);gap:60px}.fd{grid-template-columns:minmax(0,1fr);gap:22px}.fd:nth-child(2){margin-top:0}.pola{width:74%}.fd:nth-child(2) .pola{margin-left:auto}
 .close{padding:70px 0 80px}.picker{grid-template-columns:minmax(0,1fr);margin:30px 0 0;gap:30px}.list{padding:30px 18px 20px}.opt{font-size:19px}.answer{margin-top:0}.ans{font-size:32px}
 footer{grid-template-columns:1fr 1fr;gap:26px}footer>div:first-child{grid-column:1/-1}}
/* ---- paper motion ---- */
.mo .fly:not(.flying){opacity:0}
.flying{animation:slap var(--fdur,700ms) cubic-bezier(.2,.7,.25,1) var(--fd,0ms) both}
@keyframes slap{0%{opacity:0;translate:var(--fx) var(--fy);rotate:var(--fr);box-shadow:14px 22px 0 rgba(0,0,0,.06)}
 62%{opacity:1;translate:calc(var(--fx)*-.018) 3px;rotate:calc(var(--fr)*-.12);box-shadow:0 0 0 rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.06)}
 80%{translate:calc(var(--fx)*.006) -2px;rotate:calc(var(--fr)*.04);box-shadow:3px 5px 0 rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.05)}
 100%{opacity:1;translate:0 0;rotate:0deg}}
.mo .fly .tp{opacity:0;scale:1.25}.mo .fly.landed .tp{animation:stick .32s cubic-bezier(.3,1.4,.5,1) forwards}.mo .fly.landed .tp.b{animation-delay:.12s}
@keyframes stick{from{opacity:0;scale:1.25}to{opacity:1;scale:1}}
.mo .sw{background-size:0% 100%;background-repeat:no-repeat;transition:background-size .7s cubic-bezier(.6,0,.25,1) var(--sd,.2s)}.mo .sw.swiped{background-size:100% 100%}
.mo svg.in .dr{stroke-dashoffset:0}
