/* Kai Surf Co. · Bricolage Grotesque for display, Geist for text. */
@font-face{font-family:Bricolage;src:url(fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:Geist;src:url(fonts/geist-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
 --ink:#0f2a36;--mute:#4f6873;--line:rgba(15,42,54,.12);--paper:#fff;--card:#fff;
 --sky1:#9fd8f0;--sky2:#e8f7fb;--sea1:#38b2c8;--sea2:#1f8fb3;--sand1:#f2e3c6;--sand2:#e3cc9f;
 --sun:#ffd166;--btn:#0d4f6e;--btnt:#fff;--accent:#ff6f4f;
 --disp:Bricolage,"Helvetica Neue",Arial,sans-serif;--sans:Geist,system-ui,sans-serif;
 --pad:clamp(16px,5vw,64px);--ease:cubic-bezier(.23,1,.32,1);color-scheme:light}
[data-theme=night]{
 --ink:#eef6f8;--mute:#9fb6be;--line:rgba(238,246,248,.14);--paper:#0b1a24;--card:#122634;
 --sky1:#07121d;--sky2:#14304a;--sea1:#123c55;--sea2:#0a2738;--sand1:#5d5242;--sand2:#3e362b;
 --sun:#f3efe2;--btn:#f2e3c6;--btnt:#0b1a24;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.6 var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;transition:background-color 500ms ease,color 500ms ease}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:1;margin:0}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--card);padding:8px 12px}
.kicker{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border:0;border-radius:999px;background:var(--btn);color:var(--btnt);font:600 15px var(--sans);text-decoration:none;cursor:pointer;transition:transform 200ms var(--ease),background-color 200ms}
.btn:active{transform:scale(.97)}
.btn.ghost{background:rgba(255,255,255,.75);color:#0f2a36;backdrop-filter:blur(6px)}
.btn.wide{width:100%}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* header */
.top{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;gap:16px;padding:calc(10px + env(safe-area-inset-top)) max(var(--pad),env(safe-area-inset-right)) 10px max(var(--pad),env(safe-area-inset-left));transition:background-color 300ms,box-shadow 300ms}
.top.solid{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 22px var(--disp);letter-spacing:-.03em;color:#0f2a36}
.top.solid .brand,[data-theme=night] .brand{color:var(--ink)}
.brand svg{width:34px;height:34px}
.brand .logo-board>g{fill:currentColor}
.nav{display:flex;gap:24px;margin-left:auto}
.nav a{text-decoration:none;font-weight:500;font-size:15px;color:#0f2a36}
.top.solid .nav a,[data-theme=night] .nav a{color:var(--ink)}
.tools{display:flex;gap:8px;align-items:center}
.mode,.bag-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;border:1px solid rgba(15,42,54,.2);background:rgba(255,255,255,.7);color:#0f2a36;cursor:pointer}
[data-theme=night] .mode,[data-theme=night] .bag-btn{background:rgba(255,255,255,.08);border-color:var(--line);color:var(--ink)}
.mode svg,.bag-btn svg{grid-area:1/1;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:opacity 300ms,transform 400ms var(--ease)}
.mode-moon{opacity:0;transform:rotate(-60deg) scale(.6)}
[data-theme=night] .mode-sun{opacity:0;transform:rotate(60deg) scale(.6)}
[data-theme=night] .mode-moon{opacity:1;transform:none}
.count{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;line-height:19px;text-align:center}
.bump{animation:bump 450ms var(--ease)}@keyframes bump{40%{transform:scale(1.18)}}
@media (max-width:700px){.nav{display:none}.tools{margin-left:auto}}

/* hero: full-bleed sunset photo, title in the clear sky */
.hero{position:relative;min-height:min(94svh,980px);display:flex;flex-direction:column;align-items:center;overflow:hidden;background:#7fbfdd}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 900ms ease}
.hero-day{object-position:50% 45%}
/* the photo rides with the surfer: a slow swell at rest, a pan along the wave and a push towards the surfer as you scroll (--p, 0 to 1, set in app.js) */
.hero-ride{position:absolute;inset:0;--ox:47%;--oy:62%;transform-origin:var(--ox) var(--oy);animation:swell 9s ease-in-out infinite alternate}
.hero-ride .hero-img{transform-origin:var(--ox) var(--oy);transform:translate3d(calc(var(--p,0) * 5%),calc(var(--p,0) * 40%),0) scale(calc(1.04 + var(--p,0) * .22));will-change:transform}
@keyframes swell{from{transform:translate3d(-.8%,.6%,0) scale(1)}to{transform:translate3d(.8%,-.6%,0) scale(1.035)}}
.hero-copy{transform:translate3d(0,calc(var(--p,0) * -60px),0);opacity:calc(1 - var(--p,0) * 1.4)}.hero-night{object-position:50% 30%;opacity:0}
[data-theme=night] .hero-night{opacity:1}[data-theme=night] .hero-day{opacity:0}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,0) 45%);transition:background 600ms}
[data-theme=night] .hero::after{background:linear-gradient(rgba(8,18,30,.62),rgba(8,18,30,.35) 55%,rgba(8,18,30,.55))}
.hero-copy{position:relative;z-index:1;text-align:center;padding:calc(92px + env(safe-area-inset-top)) var(--pad) 0;max-width:900px}
.hero .kicker{color:#0d4f6e}[data-theme=night] .hero .kicker{color:#f6dcb4}
.title{font-size:clamp(58px,10vw,132px);font-weight:800;letter-spacing:-.055em;line-height:.88;color:#1d1a17}
[data-theme=night] .title{color:#fbf1e1}
.lead{margin:18px auto 0;max-width:34em;font-size:clamp(16px,2vw,19px);color:#12384a}
[data-theme=night] .lead{color:#f0dcc4}
.cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.hero .btn{background:#1d1a17;color:#fff}.hero .btn.ghost{background:rgba(255,255,255,.7);color:#1d1a17}
[data-theme=night] .hero .btn{background:#fbf1e1;color:#1d1a17}
.top:not(.solid) .brand,.top:not(.solid) .nav a{color:#1d1a17}
[data-theme=night] .top:not(.solid) .brand,[data-theme=night] .top:not(.solid) .nav a{color:#fbf1e1}
@media (max-width:700px){.hero-day{object-position:74% 50%}.hero-ride{--ox:50%;--oy:52%}.hero-night{object-position:50% 50%}.hero-copy{padding-top:calc(100px + env(safe-area-inset-top))}}

/* photo section */
.drive{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,72px);max-width:1280px;margin:0 auto;padding:clamp(24px,4vw,48px) max(var(--pad),env(safe-area-inset-right)) clamp(64px,9vw,120px) max(var(--pad),env(safe-area-inset-left))}
.drive-pic{margin:0;border-radius:26px;overflow:hidden;aspect-ratio:4/5;background:#e9eef0}
.drive-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block}
.drive-copy h2{font-size:clamp(40px,5.5vw,68px)}
.drive-copy p:not(.kicker){margin:16px 0 26px;max-width:28em;color:var(--mute);font-size:17px}
@media (max-width:760px){.drive{grid-template-columns:1fr}}

/* gallery */
.gallery{max-width:1280px;margin:0 auto;padding:0 max(var(--pad),env(safe-area-inset-right)) clamp(64px,9vw,120px) max(var(--pad),env(safe-area-inset-left))}
.gal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gal li{border-radius:22px;overflow:hidden;aspect-ratio:3/4;background:#e6f3f6}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 900ms var(--ease)}
@media (hover:hover){.gal li:hover img{transform:scale(1.04)}}
@media (max-width:900px){.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--pad));padding:0 var(--pad) 6px;scrollbar-width:none}.gal::-webkit-scrollbar{display:none}.gal li{flex:0 0 72%;scroll-snap-align:start}}

/* sections */
.head{max-width:620px;margin-bottom:32px}
.head h2{font-size:clamp(40px,6vw,72px)}
.head p:last-child{margin:12px 0 0;color:var(--mute)}
.boards,.how{padding:clamp(64px,9vw,120px) max(var(--pad),env(safe-area-inset-right)) clamp(64px,9vw,120px) max(var(--pad),env(safe-area-inset-left));max-width:1280px;margin:0 auto}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--pad));padding:0 var(--pad) 8px;gap:12px;scrollbar-width:none}.cards::-webkit-scrollbar{display:none}.card{flex:0 0 78%;scroll-snap-align:start}}
.card{display:flex;flex-direction:column;border-radius:22px;background:var(--card);box-shadow:0 1px 0 var(--line),0 20px 40px -30px rgba(15,42,54,.35);overflow:hidden}
.card-pic{height:300px;display:grid;place-items:center;background:var(--paper);border-bottom:1px solid var(--line)}
.card-pic .board-svg{height:86%;width:auto;filter:drop-shadow(0 14px 12px rgba(60,40,10,.22));transform:rotate(-8deg);transition:transform 500ms var(--ease)}
@media (hover:hover){.card:hover .board-svg{transform:rotate(-2deg) translateY(-6px)}}
.card-body{display:flex;flex-direction:column;gap:4px;padding:18px 18px 20px;flex:1}
.card-kind{margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.card h3{font-size:30px}
.card-desc{margin:4px 0 0;color:var(--mute);font-size:15px}
.card-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px}
.card-price{font-weight:600}
.card .btn{min-height:42px;padding:0 18px;font-size:14px}

/* builder */
.build{background:var(--paper);padding:clamp(56px,8vw,110px) 0}
.build-grid{max-width:1280px;margin:0 auto;padding:0 max(var(--pad),env(safe-area-inset-right)) 0 max(var(--pad),env(safe-area-inset-left));display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:899px){.build-grid{grid-template-columns:1fr}}
.stage{position:relative;margin:0;border-radius:26px;overflow:hidden;aspect-ratio:1/1;background:#fff;box-shadow:inset 0 0 0 1px var(--line);touch-action:pan-y}
@media (min-width:900px){.stage{position:sticky;top:84px}}
@media (max-width:899px){.stage{aspect-ratio:4/5;max-height:72svh;width:100%}}
[data-theme=night] .stage{background:radial-gradient(ellipse 75% 65% at 50% 40%,#1d3647,#122634 75%,#0e1f2a)}
.stage::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 700ms var(--ease);background:linear-gradient(#8fd2ee,#d7f1fa 55%,#f3ead6)}
[data-theme=night] .stage::before{background:linear-gradient(#06111b,#173550 55%,#2b3a44)}
.stage.on-beach::before{opacity:1}
.stage canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;opacity:0;transition:opacity 700ms var(--ease)}
.stage.is3d canvas{opacity:1}.stage.grab canvas{cursor:grabbing}
.stage-fallback{position:absolute;inset:0;z-index:1;display:grid;place-items:center;transition:opacity 500ms}
.stage-fallback .board-svg{height:82%;width:auto;transform:rotate(-12deg);filter:drop-shadow(0 22px 18px rgba(15,42,54,.25))}
.stage.is3d .stage-fallback{opacity:0}
.beach-btn{position:absolute;z-index:2;top:14px;left:14px;min-height:38px;padding:0 16px;border:1px solid rgba(15,42,54,.18);border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);color:#0f2a36;font:600 13px var(--sans);cursor:pointer;transition:background-color 250ms,color 250ms}
.beach-btn[aria-pressed=true]{background:#0d4f6e;border-color:#0d4f6e;color:#fff}
.drag-hint{position:absolute;z-index:2;bottom:14px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#4f6873;pointer-events:none;opacity:0;transition:opacity 400ms}
.stage.is3d .drag-hint{opacity:.8}.stage.on-beach .drag-hint{color:#0f2a36}
.opts .head{margin-bottom:8px}
.lab{display:block;margin:20px 0 8px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.lab span{color:var(--ink)}.lab em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:500 14px var(--sans);cursor:pointer;transition:background-color 200ms,color 200ms,border-color 200ms}
.chip[aria-pressed=true]{background:var(--btn);border-color:var(--btn);color:var(--btnt)}
.swatches{display:flex;flex-wrap:wrap;gap:6px}
.sw{width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;display:grid;place-items:center;cursor:pointer}
.sw i{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(15,42,54,.18);transition:transform 200ms var(--ease)}
.sw[aria-pressed=true] i{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.sw.none i{background:linear-gradient(135deg,transparent 46%,#c0392b 46% 54%,transparent 54%),var(--card)}
.stickers{display:flex;flex-wrap:wrap;gap:8px}
.stk{width:48px;height:48px;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--card);display:grid;place-items:center;cursor:pointer;transition:border-color 200ms,box-shadow 200ms}
.stk img{width:40px;height:40px;filter:drop-shadow(0 2px 3px rgba(15,42,54,.22));transition:transform 200ms var(--ease)}
.stk[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.stk[aria-pressed=true] img{transform:scale(1.1) rotate(-6deg)}
@media (max-width:420px){.stickers{gap:6px}.stk{width:44px;height:44px;border-radius:12px}.stk img{width:36px;height:36px}}
.name-in{width:100%;height:50px;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:600 17px var(--disp);letter-spacing:.08em;text-transform:uppercase}
.buy{display:grid;gap:12px;margin-top:24px}
.price{margin:0;font:700 26px var(--disp);letter-spacing:-.02em}.price span{font:400 14px var(--sans);color:var(--mute);letter-spacing:0}
.note{min-height:1.4em;margin:10px 0 0;font-size:14px;color:var(--mute)}

/* how */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.steps li{padding:24px;border-radius:22px;background:var(--card);box-shadow:0 1px 0 var(--line)}
.steps span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sun);color:#0f2a36;font:700 18px var(--disp);margin-bottom:16px}
.steps h3{font-size:26px}.steps p{margin:6px 0 0;color:var(--mute)}
.how-cta{margin:32px 0 0}

/* footer */
.foot{padding:56px max(var(--pad),env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left));text-align:center;background:var(--paper);border-top:1px solid var(--line)}
.foot-word{margin:0;font:800 clamp(64px,14vw,170px)/.9 var(--disp);letter-spacing:-.06em;color:var(--ink);opacity:.9}
.foot-note{margin:16px 0 0;font-size:14px;color:var(--mute)}

/* bag */
.scrim{position:fixed;inset:0;z-index:30;background:rgba(5,20,28,.4);opacity:0;transition:opacity 300ms}.scrim.on{opacity:1}
.drawer{position:fixed;z-index:31;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--paper);box-shadow:-20px 0 60px rgba(5,20,28,.2);transform:translateX(100%);transition:transform 420ms var(--ease)}
.drawer.on{transform:none}
.drawer-in{display:flex;flex-direction:column;height:100%;padding:calc(16px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom))}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:30px}
.x{width:44px;height:44px;border:0;background:none;font-size:30px;color:var(--ink);cursor:pointer}
.lines{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.line-pic{height:96px;border-radius:12px;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center}
.line-pic .board-svg{height:84%;width:auto}
.line h4{margin:0;font:700 18px var(--disp)}.line p{margin:2px 0 0;font-size:13px;color:var(--mute)}
.qty{display:flex;align-items:center;gap:6px}.qty button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.empty{color:var(--mute)}
.drawer-foot{padding-top:16px;display:grid;gap:10px}
.total{display:flex;justify-content:space-between;margin:0;font-size:18px}
.demo{margin:0;text-align:center;font-size:12px;color:var(--mute)}
.toast{position:fixed;z-index:40;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);margin:0;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;opacity:0;pointer-events:none;transition:opacity 300ms,transform 300ms var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* size guide */
.fit{max-width:1280px;margin:0 auto;padding:0 max(var(--pad),env(safe-area-inset-right)) clamp(64px,9vw,120px) max(var(--pad),env(safe-area-inset-left))}
.fit-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(24px,4vw,48px);border-radius:28px;background:var(--card);box-shadow:0 1px 0 var(--line),0 30px 60px -40px rgba(15,42,54,.4)}
.fit .head{margin-bottom:20px}.fit .head h2{font-size:clamp(34px,4.6vw,56px)}
.fit-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:18px}.fit-row .lab{margin:0}
.fit-row output{font:700 20px var(--disp);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.fit-range{width:100%;height:44px;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.fit-range::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:var(--line)}
.fit-range::-moz-range-track{height:6px;border-radius:6px;background:var(--line)}
.fit-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--btn);border:4px solid var(--card);box-shadow:0 0 0 1px var(--line),0 4px 10px rgba(15,42,54,.25)}
.fit-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--btn);border:4px solid var(--card);box-shadow:0 0 0 1px var(--line)}
.fit-range:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.fit-scale{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.fit-scale li{padding:10px;border-radius:12px;border:1px solid var(--line);font-size:13px;line-height:1.3;color:var(--mute);transition:background-color 250ms,color 250ms,border-color 250ms}
.fit-scale b{display:block;color:var(--ink);font-weight:600}
.fit-scale li.on{background:var(--btn);border-color:var(--btn);color:rgba(255,255,255,.8)}.fit-scale li.on b{color:#fff}
.fit-note{margin:14px 0 0;font-size:14px;color:var(--mute)}
.fit-out{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px;align-items:center}
.fit-pic{height:320px;display:grid;place-items:center}
.fit-pic .board-svg{height:100%;width:auto;filter:drop-shadow(0 16px 14px rgba(60,40,10,.22));transform:rotate(-8deg);animation:fitIn 600ms var(--ease)}
@keyframes fitIn{from{opacity:0;transform:rotate(-14deg) translateY(16px)}}
.fit-res h3{font-size:clamp(30px,3.4vw,40px);margin:4px 0 6px}
.fit-res .card-row{flex-wrap:wrap}.fit-res .card-price{white-space:nowrap}.fit-res .btn{white-space:nowrap}
.fit-also{margin:12px 0 0;font-size:14px;color:var(--mute)}
@media (max-width:900px){.fit-grid{grid-template-columns:minmax(0,1fr)}.fit-pic{height:240px}}
@media (max-width:480px){.fit-scale{grid-template-columns:repeat(2,minmax(0,1fr))}.fit-out{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}.fit-pic{height:200px}}
/* how your board is made: sticky drawing on the left, steps scroll past on the right */
.made{max-width:1280px;margin:0 auto;padding:clamp(64px,9vw,120px) max(var(--pad),env(safe-area-inset-right)) clamp(32px,5vw,64px) max(var(--pad),env(safe-area-inset-left))}
.made-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:start}
.made-stage{position:sticky;top:calc(84px + env(safe-area-inset-top));height:min(72svh,660px);border-radius:26px;background:var(--card);border:1px solid var(--line);overflow:hidden}
.made-art{position:absolute;inset:0 0 44px}
.made-layer{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.96) rotate(-2deg);transition:opacity 600ms var(--ease),transform 800ms var(--ease)}
.made-layer.on{opacity:1;transform:none}
.made-svg{height:92%;width:auto;max-width:92%;filter:drop-shadow(0 18px 18px rgba(60,40,10,.16))}
.made-sheen{animation:sheen 3.2s var(--ease) infinite}
@keyframes sheen{from{transform:skewX(-18deg) translateX(0)}to{transform:skewX(-18deg) translateX(260%)}}
.made-count{position:absolute;left:22px;bottom:14px;margin:0;font:500 13px var(--sans);letter-spacing:.14em;color:var(--mute)}.made-count b{color:var(--ink);font-weight:700}
.made-bar{position:absolute;left:110px;right:22px;bottom:21px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.made-bar i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(.1667);transition:transform 600ms var(--ease)}
.made-steps{list-style:none;margin:0;padding:0}
.made-step{min-height:62svh;display:flex;flex-direction:column;justify-content:center;opacity:.32;transition:opacity 500ms var(--ease)}
.made-step.on{opacity:1}
.made-step span{font:700 14px var(--sans);letter-spacing:.14em;color:var(--accent)}
.made-step h3{margin:10px 0 12px;font:700 clamp(30px,3.6vw,44px)/1.05 var(--disp);letter-spacing:-.03em;color:var(--ink)}
.made-step p{margin:0;max-width:30em;font-size:17px;line-height:1.6;color:var(--mute)}
@media (max-width:860px){.made-grid{grid-template-columns:minmax(0,1fr);gap:0}.made-stage{top:calc(64px + env(safe-area-inset-top));height:44svh;z-index:2}.made-step{min-height:52svh;padding-top:24px}}
@media (prefers-reduced-motion:reduce){.fit-pic .board-svg{animation:none}.made-layer{transition:opacity 200ms;transform:none}.made-sheen{animation:none}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.drawer,.toast,.scrim{transition:none}.hero-ride{animation:none}.hero-ride .hero-img,.hero-copy{transform:none;opacity:1}}