/* Stocklark Kitchen. Tokens from DesignMD "Citrus" + "Confetti" (see DESIGN.md). */
@font-face{font-family:"Fraunces";src:url(../fonts/fraunces.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  /* Citrus colour tokens (hex fallback, oklch override below) */
  --c-primary:#52b23b;--c-secondary:#f38300;--c-on-brand:#0d140b;
  --c-ink:#1e2b17;--c-muted:#516049;
  --c-base:#fbfdf4;--c-raised:#fff;--c-sunken:#f2f5e8;--c-border:#dce0d2;
  --c-success:#139948;--c-danger:#d73337;--c-warning:#e49900;--c-info:#0089ca;
  --c-tomato:#ff6a4d;--c-lemon:#ffd84d;--c-sky:#58c7f2;--c-grape:#b79cff;
  /* radius, spacing, shadow */
  --r-sm:.625rem;--r-md:1rem;--r-lg:1.5rem;--r-xl:2rem;--r-full:9999px;
  --sp:.25rem;
  --sh-sm:0 2px 6px rgba(30,43,23,.1);--sh-md:0 10px 28px rgba(30,43,23,.14);--sh-lg:0 24px 60px rgba(30,43,23,.18);
  /* motion: Citrus 200ms, Confetti spring easings */
  --t-base:200ms;--t-med:420ms;--t-slow:800ms;
  --spring:cubic-bezier(.34,1.5,.6,1);--spring-soft:cubic-bezier(.34,1.3,.64,1);--ease-out:cubic-bezier(.16,1,.3,1);
  /* type */
  --f-display:"Fredoka","Nunito",system-ui,sans-serif;--f-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-sm:.875rem;--fs-base:1rem;--fs-lg:1.3rem;--fs-xl:1.7rem;--fs-2xl:2.3rem;--fs-3xl:3.1rem;
  --lh-tight:1.12;--lh-normal:1.55;
  --wrap:1280px;--gut:clamp(1.1rem,4vw,2.5rem);
}
@supports (color:oklch(0 0 0)){:root{
  --c-primary:oklch(.68 .18 140);--c-secondary:oklch(.72 .18 60);--c-on-brand:oklch(.18 .02 140);
  --c-ink:oklch(.27 .04 135);--c-muted:oklch(.47 .04 135);
  --c-base:oklch(.99 .012 120);--c-sunken:oklch(.965 .018 120);--c-border:oklch(.9 .02 120);
  --c-success:oklch(.6 .16 150);--c-danger:oklch(.58 .2 25);--c-warning:oklch(.74 .16 75);--c-info:oklch(.6 .14 240);
  --sh-sm:0 2px 6px oklch(.27 .04 135/.1);--sh-md:0 10px 28px oklch(.27 .04 135/.14);--sh-lg:0 24px 60px oklch(.27 .04 135/.2);
}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--c-base);color:var(--c-ink);font:400 var(--fs-base)/var(--lh-normal) var(--f-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4,p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--c-secondary);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:10000;background:var(--c-ink);color:#fff;padding:.7rem 1rem;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.display,.h2,.h3,.h4{font-family:var(--f-display);font-weight:700;line-height:var(--lh-tight);letter-spacing:-.015em}
.display{font-size:clamp(2.6rem,7vw,6rem);line-height:.98;letter-spacing:-.03em}
.display em{font-style:normal;color:var(--c-secondary)}
.h2{font-size:clamp(2rem,4.6vw,3.6rem)}
.h3{font-size:var(--fs-xl)}
.h4{font-size:var(--fs-lg);margin:2rem 0 .8rem}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--c-muted);max-width:34em}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font:700 .85rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);margin-bottom:1.2rem}
.eyebrow .dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--c-primary);animation:pulse 2s var(--spring) infinite}
@keyframes pulse{50%{transform:scale(1.6);opacity:.5}}
.sec{padding:clamp(4rem,9vw,8rem) 0}
.sec-head{margin-bottom:clamp(1.8rem,4vw,3.2rem)}
.sec-head.row{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;flex-wrap:wrap}
.center{text-align:center}.center .lead{margin-inline:auto}
.page-head{padding:clamp(2.5rem,6vw,5rem) 0 clamp(1.2rem,3vw,2.5rem)}
.small-note{padding:0 0 3rem;color:var(--c-muted);font-size:var(--fs-sm)}
.prose p{margin:0 0 1em;max-width:40em}

/* Buttons: chunky pills with a pressed shadow (Citrus/Confetti) */
.btn{--bg:var(--c-primary);--fg:var(--c-on-brand);--sd:color-mix(in srgb,var(--bg) 62%,#000);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9em 1.7em;border-radius:var(--r-full);font:600 1rem/1 var(--f-display);letter-spacing:.01em;background:var(--bg);color:var(--fg);box-shadow:0 5px 0 var(--sd);transition:transform var(--t-med) var(--spring),box-shadow var(--t-med) var(--spring),background var(--t-base);will-change:transform;position:relative;white-space:nowrap}
.btn:hover{--bg:color-mix(in srgb,var(--c-primary) 90%,#fff)}
.btn:active,.btn.is-press{transform:translateY(4px) scale(1.04,.92)!important;box-shadow:0 1px 0 var(--sd)}
.btn-pri{--bg:var(--c-primary)}
.btn-ghost{--bg:var(--c-raised);--fg:var(--c-ink);--sd:var(--c-ink);box-shadow:0 5px 0 var(--sd),inset 0 0 0 2px var(--c-ink)}
.btn-ghost:hover{--bg:var(--c-lemon)}
.btn-sm{padding:.65em 1.2em;font-size:.92rem;box-shadow:0 4px 0 var(--sd)}
.btn-lg{padding:1.05em 2em;font-size:1.1rem}

/* Header */
.site-header{position:sticky;top:0;z-index:100;view-transition-name:hdr;transition:background var(--t-med),box-shadow var(--t-med)}
.site-header.is-scrolled{background:color-mix(in srgb,var(--c-base) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--c-border)}
.bar{display:flex;align-items:center;gap:2rem;padding:.9rem 0}
.brand{display:flex;align-items:center;gap:.6rem;font:700 1.3rem/1 var(--f-display);letter-spacing:-.01em}
.brand .mark{width:2.1rem;height:2.1rem;transition:transform var(--t-slow) var(--spring)}
.brand:hover .mark{transform:rotate(-24deg) scale(1.15)}
.brand em{font-style:normal;color:var(--c-secondary)}
.nav{display:flex;gap:.3rem;margin-left:auto}
.nav a{position:relative;padding:.55rem 1rem;border-radius:var(--r-full);font:600 1rem/1 var(--f-display);transition:background var(--t-base),transform var(--t-med) var(--spring)}
.nav a:hover{background:var(--c-sunken);transform:translateY(-2px) rotate(-2deg)}
.nav a[aria-current]{background:var(--c-ink);color:#fff}
.burger{display:none;margin-left:auto;width:2.8rem;height:2.8rem;border-radius:50%;background:var(--c-lemon);position:relative;z-index:130}
.burger span{position:absolute;left:30%;width:40%;height:3px;border-radius:3px;background:var(--c-ink);transition:transform var(--t-med) var(--spring),opacity var(--t-base)}
.burger span:nth-child(1){top:33%}.burger span:nth-child(2){top:48%}.burger span:nth-child(3){top:63%}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(5.3px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-5.3px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:120;background:var(--c-primary);display:grid;place-items:center;clip-path:circle(0 at calc(100% - 2.6rem) 2.6rem);transition:clip-path .7s var(--ease-out);visibility:hidden}
.mnav.is-open{clip-path:circle(150% at calc(100% - 2.6rem) 2.6rem);visibility:visible}
.mnav nav{display:grid;gap:1rem;text-align:center}
.mnav a:not(.btn){font:700 clamp(2.4rem,11vw,4rem)/1 var(--f-display);opacity:0;transform:translateY(30px) rotate(3deg);transition:opacity .4s,transform .6s var(--spring);transition-delay:calc(var(--k)*70ms + 200ms)}
.mnav .btn{opacity:0;transition:opacity .4s calc(var(--k)*70ms + 200ms);justify-self:center;margin-top:1rem;--bg:var(--c-ink);--fg:#fff;--sd:#000}
.mnav.is-open a:not(.btn){opacity:1;transform:none}.mnav.is-open .btn{opacity:1}

/* Custom cursor (fine pointers only, enabled by JS) */
.cursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;display:none}
html.has-cursor .cursor{display:block}
html.has-cursor body,html.has-cursor a,html.has-cursor button{cursor:none}
html.has-cursor input,html.has-cursor textarea{cursor:text}
.cursor-dot{position:fixed;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--c-ink);transform:translate3d(var(--cx,-100px),var(--cy,-100px),0)}
.cursor-ring{position:fixed;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;border:2px solid var(--c-ink);display:grid;place-items:center;transform:translate3d(var(--rx,-100px),var(--ry,-100px),0) scale(var(--rs,1));transition:background var(--t-base),border-color var(--t-base),width var(--t-med) var(--spring),height var(--t-med) var(--spring),left var(--t-med) var(--spring),top var(--t-med) var(--spring)}
.cursor-ring b{font:700 .72rem/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity var(--t-base);color:var(--c-ink)}
.cursor.is-link .cursor-ring{background:color-mix(in srgb,var(--c-secondary) 35%,transparent);border-color:var(--c-secondary);--rs:1.5}
.cursor.is-card .cursor-ring{width:84px;height:84px;left:-42px;top:-42px;background:var(--c-lemon);border-color:var(--c-ink)}
.cursor.is-card .cursor-ring b{opacity:1}
.cursor.is-down .cursor-ring{--rs:.8}

/* Page transition (fallback overlay when View Transitions unsupported) */
.pt{position:fixed;inset:0;z-index:9998;background:var(--pt-c,var(--c-primary));pointer-events:none;clip-path:circle(0 at var(--px,50%) var(--py,50%))}
.pt.is-in{clip-path:circle(150% at var(--px,50%) var(--py,50%));transition:clip-path .55s cubic-bezier(.7,0,.3,1);pointer-events:auto}
.pt.is-start{clip-path:circle(150% at var(--px,50%) var(--py,50%))}
.pt.is-out{clip-path:circle(0 at var(--px,50%) var(--py,50%));transition:clip-path .7s cubic-bezier(.7,0,.3,1)}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .5s cubic-bezier(.5,0,1,1) both}
::view-transition-new(root){animation:vt-in .8s var(--ease-out) both}
@keyframes vt-out{to{transform:translateY(-3%) scale(.97);opacity:.0}}
@keyframes vt-in{from{clip-path:circle(0% at 50% 100%)}to{clip-path:circle(150% at 50% 100%)}}
::view-transition-group(prod-img){animation-duration:.7s;animation-timing-function:var(--spring-soft)}
.pdp .gal-slide[data-slide="0"]{view-transition-name:prod-img}

/* Hero */
.hero{position:relative;padding:clamp(1.5rem,4vw,3rem) 0 clamp(5rem,9vw,8rem);overflow:clip}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hb{position:absolute;border-radius:50%;filter:blur(2px)}
.hb1{width:38vw;height:38vw;max-width:560px;max-height:560px;left:-12vw;top:-8vw;background:color-mix(in srgb,var(--c-lemon) 70%,transparent)}
.hb2{width:30vw;height:30vw;max-width:440px;max-height:440px;right:-8vw;top:12%;background:color-mix(in srgb,var(--c-primary) 28%,transparent)}
.hb3{width:18vw;height:18vw;max-width:260px;max-height:260px;left:38%;bottom:-6%;background:color-mix(in srgb,var(--c-tomato) 26%,transparent)}
.dots{position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--c-ink) 14%,transparent) 1.6px,transparent 1.8px);background-size:28px 28px;mask-image:linear-gradient(180deg,#000,transparent 70%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center}
.hero-h{font-size:clamp(3rem,8vw,7.2rem);margin:.2rem 0 1.4rem;max-width:8.5em}
.hero-cta{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap}
.word{display:inline-block;white-space:nowrap}
.ch{display:inline-block;will-change:transform;transform-origin:50% 100%}
.js [data-kinetic] .ch{opacity:0}
.js [data-split] .ch{opacity:0}
.js [data-fade]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out) var(--d,.3s),transform .9s var(--spring-soft) var(--d,.3s)}
.js.ready [data-fade]{opacity:1;transform:none}
.hero-stage{position:relative;aspect-ratio:1;width:100%;max-width:640px;justify-self:end;--mx:0;--my:0}
.stage-blob{position:absolute;inset:6%;background:var(--bc,var(--c-lemon));border-radius:58% 42% 55% 45%/48% 56% 44% 52%;animation:morph 11s ease-in-out infinite;transition:background .9s var(--ease-out);box-shadow:inset -18px -22px 0 rgba(0,0,0,.06)}
@keyframes morph{0%,100%{border-radius:58% 42% 55% 45%/48% 56% 44% 52%;transform:rotate(0)}33%{border-radius:42% 58% 40% 60%/58% 42% 58% 42%;transform:rotate(6deg)}66%{border-radius:50% 50% 62% 38%/40% 62% 38% 60%;transform:rotate(-5deg)}}
.rot{position:absolute;inset:12%;transform:translate3d(calc(var(--mx)*14px),calc(var(--my)*14px),0)}
.rot-item{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(40px) scale(.5) rotate(-22deg);transition:opacity .35s,transform .9s var(--spring);pointer-events:none}
.rot-item img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(30,43,23,.22));animation:bob 5.5s ease-in-out infinite}
.rot-item.is-on{opacity:1;transform:none}
.rot-item.is-off{opacity:0;transform:translateY(-70px) scale(.6) rotate(24deg);transition:opacity .35s,transform .6s cubic-bezier(.6,-.3,.8,.5)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2.5deg)}}
.rot-shadow{position:absolute;left:25%;right:25%;bottom:-4%;height:7%;border-radius:50%;background:rgba(30,43,23,.22);filter:blur(10px);animation:shadow 5.5s ease-in-out infinite}
@keyframes shadow{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(.78);opacity:.55}}
.float{position:absolute;width:24%;--dp:0;transform:translate3d(calc(var(--mx)*var(--dp)*1px),calc(var(--my)*var(--dp)*1px),0);transition:transform .25s linear}
.float-in{display:block;animation:pop .9s var(--spring) both;animation-delay:var(--fd,.9s)}
.float-in img{animation:bob var(--fb,6s) ease-in-out infinite;filter:drop-shadow(0 12px 12px rgba(30,43,23,.2))}
.float-sh{position:absolute;left:18%;right:18%;bottom:-6%;height:8%;border-radius:50%;background:rgba(30,43,23,.2);filter:blur(7px)}
.f1{left:-2%;top:6%;--fd:.9s;--fb:6.2s}.f2{right:-1%;top:0;width:17%;--fd:1.05s;--fb:5.1s}.f3{left:0;bottom:6%;width:22%;--fd:1.2s;--fb:7s}.f4{right:0;bottom:8%;width:24%;--fd:1.35s;--fb:5.7s}
@keyframes pop{from{opacity:0;transform:scale(.2) rotate(-40deg)}to{opacity:1;transform:none}}
.rot-next{position:absolute;right:4%;bottom:42%;width:3.2rem;height:3.2rem;border-radius:50%;background:var(--c-ink);color:#fff;display:grid;place-items:center;transition:transform var(--t-med) var(--spring);z-index:3}
.rot-next:hover{transform:scale(1.18) rotate(12deg)}
.scroll-cue{position:absolute;left:50%;bottom:1.4rem;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:.4rem;font:700 .7rem/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:var(--c-muted)}
.scroll-cue i{width:2px;height:2.2rem;background:linear-gradient(var(--c-ink),transparent);animation:cue 1.8s var(--ease-out) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* Marquee bands */
.band{position:relative;overflow:hidden;white-space:nowrap;background:var(--c-secondary);color:var(--c-ink);padding:1.1rem 0;margin:-1.4rem -4vw;transform:rotate(-2deg);z-index:2;box-shadow:0 8px 0 var(--c-ink)}
.band-b{background:var(--c-primary);transform:rotate(1.6deg);margin-top:2rem;margin-bottom:2rem}
.band.slim{padding:.7rem 0;margin:2rem -4vw 1rem}
.band-track{display:flex;align-items:center;gap:2rem;width:max-content;font:700 clamp(2.2rem,5.4vw,4.4rem)/1 var(--f-display);text-transform:uppercase;letter-spacing:-.01em;padding-left:2rem}
.band.slim .band-track{font-size:clamp(1.6rem,3.4vw,2.6rem)}
.band-track span:nth-of-type(even){color:transparent;-webkit-text-stroke:2px var(--c-ink)}
.band-track .mark{width:1em;height:1em;animation:spin 8s linear infinite}
.band-track i{display:block;width:clamp(3.2rem,6vw,5rem);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.55);padding:.35rem;transform:rotate(-8deg)}
.band-track i:nth-of-type(even){transform:rotate(9deg)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:no-preference){.band-track{animation:marq 40s linear infinite}.band-b .band-track{animation-direction:reverse}}
@keyframes marq{to{transform:translateX(-50%)}}

/* Reveal masks */
.js .reveal-clip{clip-path:inset(100% 0 0 0 round var(--r-lg));transition:clip-path .95s var(--ease-out) calc(var(--i,0)*80ms)}
.js .reveal-clip.is-in{clip-path:inset(-40% -10% -10% -10% round var(--r-lg))}

/* Category tiles */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.cat-tile{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-lg);padding:1.2rem;background:color-mix(in srgb,var(--cc) 34%,#fff);overflow:hidden;transition:transform var(--t-med) var(--spring),box-shadow var(--t-med);transform-style:preserve-3d}
.cat-tile::before{content:"";position:absolute;width:85%;aspect-ratio:1;left:7%;top:8%;border-radius:50%;background:color-mix(in srgb,var(--cc) 70%,#fff);transition:transform .8s var(--spring)}
.cat-tile:hover{box-shadow:var(--sh-md);transform:translateY(-6px) rotate(-1deg)}
.cat-tile:hover::before{transform:scale(1.12)}
.cat-img{position:absolute;inset:8% 8% 24%;display:grid;place-items:center;transition:transform .7s var(--spring)}
.cat-img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 12px rgba(30,43,23,.22))}
.cat-tile:hover .cat-img{transform:scale(1.14) rotate(-7deg) translateY(-4px)}
.cat-n{position:absolute;left:1rem;top:1rem;z-index:2;min-width:2.2rem;height:2.2rem;padding:0 .6rem;border-radius:var(--r-full);background:var(--c-ink);color:#fff;font:700 .9rem/2.2rem var(--f-display);text-align:center}
.cat-t{position:absolute;left:1.2rem;right:4rem;bottom:1.1rem;font:700 clamp(1.15rem,2vw,1.6rem)/1.05 var(--f-display);letter-spacing:-.01em}
.cat-arrow{position:absolute;right:1rem;bottom:1rem;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--c-ink);color:#fff;display:grid;place-items:center;font-size:1.2rem;transition:transform var(--t-med) var(--spring)}
.cat-tile:hover .cat-arrow{transform:rotate(-45deg) scale(1.15)}

/* Sticky story */
.story{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;width:min(100% - var(--gut)*2,var(--wrap));margin:2rem auto 0;position:relative}
.story-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center}
.story-stage{position:relative;width:100%;aspect-ratio:1/1;max-height:84vh;border-radius:var(--r-xl);background:var(--sbg);transition:background .9s var(--ease-out);overflow:hidden;box-shadow:var(--sh-md)}
.story-blob{position:absolute;inset:14%;border-radius:50%;background:rgba(255,255,255,.55);animation:morph 12s ease-in-out infinite}
.set{position:absolute;inset:0;pointer-events:none}
.set-i{position:absolute;display:block;width:44%;opacity:0;transform:translateY(80px) scale(.5) rotate(-20deg);transition:opacity .4s,transform .9s var(--spring)}
.set-i img{width:100%;filter:drop-shadow(0 16px 14px rgba(30,43,23,.25));animation:bob 6s ease-in-out infinite}
.set-i0{left:28%;top:24%;width:46%;z-index:2}.set-i1{left:4%;top:8%;width:34%}.set-i2{right:3%;bottom:6%;width:36%}
.set-i1 img{animation-delay:-2s}.set-i2 img{animation-delay:-4s}
.set.is-on .set-i{opacity:1;transform:none}
.set.is-on .set-i0{transition-delay:.05s}.set.is-on .set-i1{transition-delay:.18s}.set.is-on .set-i2{transition-delay:.3s}
.set:not(.is-on) .set-i{transition-duration:.35s}
.story-count{position:absolute;left:1.4rem;bottom:1.1rem;font:700 2.6rem/1 var(--f-display);display:flex;align-items:baseline;gap:.3rem;color:var(--c-ink);z-index:3}
.story-count span{font-size:1rem;opacity:.5}
.story-steps{padding-bottom:10vh}
.step{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:1rem;max-width:30rem;opacity:.28;transform:translateX(16px);transition:opacity .5s,transform .7s var(--spring-soft)}
.step.is-on{opacity:1;transform:none}
.step .h2{font-size:clamp(2.2rem,4.4vw,3.8rem)}
.step p:not(.eyebrow){color:var(--c-muted);font-size:1.15rem}
.step .btn{align-self:flex-start;margin-top:.6rem}

/* Product cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem 1.2rem}
.card{position:relative;transform-origin:50% 50%}
.card.is-hidden{display:none}
.card-link{display:block;perspective:900px}
.card-media{position:relative;display:block;aspect-ratio:1;border-radius:var(--r-lg);background:color-mix(in srgb,var(--cc) 26%,#fff);overflow:hidden;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--spring),box-shadow var(--t-med);transform-style:preserve-3d;will-change:transform}
.card:hover .card-media{box-shadow:var(--sh-md)}
.card-media.is-tilting{transition:transform .08s linear,box-shadow var(--t-med)}
.card-blob{position:absolute;inset:14%;border-radius:50%;background:color-mix(in srgb,var(--cc) 55%,#fff);transition:transform .9s var(--spring)}
.card:hover .card-blob{transform:scale(1.22)}
.card-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:circle(0% at 100% 100%);transition:clip-path .75s var(--spring-soft);z-index:1}
.card.scene-on .card-scene{clip-path:circle(150% at 100% 100%)}
.card-cut{position:absolute;inset:9%;display:grid;place-items:center;z-index:2;transition:transform .8s var(--spring),inset .6s var(--spring);transform:translateZ(30px)}
.card-cut img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 12px rgba(30,43,23,.22))}
.card:hover .card-cut{transform:translateZ(46px) scale(1.1) rotate(-4deg)}
.card.scene-on .card-cut{inset:50% auto auto 4%;width:42%;height:42%;transform:translateZ(46px) rotate(-6deg)}
.card.scene-on .card-cut img{filter:drop-shadow(0 8px 0 #fff) drop-shadow(0 8px 12px rgba(0,0,0,.35))}
.card-shadow{position:absolute;left:28%;right:28%;bottom:7%;height:5%;border-radius:50%;background:rgba(30,43,23,.2);filter:blur(8px);z-index:0;transition:transform .6s var(--spring),opacity .4s}
.card:hover .card-shadow{transform:scale(.7);opacity:.5}
.card.scene-on .card-shadow{opacity:0}
.card-body{display:block;padding:.9rem .3rem 0}
.chip-mini{display:inline-block;font:700 .7rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;padding:.38rem .65rem;border-radius:var(--r-full);background:color-mix(in srgb,var(--cc,var(--c-primary)) 38%,#fff);margin-bottom:.5rem}
.chip-mini.big{font-size:.8rem;padding:.5rem .85rem}
.card h3{font:700 1.15rem/1.15 var(--f-display);letter-spacing:-.005em}
.card p{color:var(--c-muted);font-size:.93rem;margin-top:.25rem}
.card-enq{position:absolute;right:.7rem;top:.7rem;z-index:5;padding:.5rem .9rem;border-radius:var(--r-full);background:var(--c-ink);color:#fff;font:600 .85rem/1 var(--f-display);opacity:0;transform:translateY(-8px) scale(.8);transition:opacity var(--t-base),transform var(--t-med) var(--spring),background var(--t-base)}
.card:hover .card-enq,.card:focus-within .card-enq{opacity:1;transform:none}
.card-enq:hover{background:var(--c-secondary);color:var(--c-ink)}
@media (hover:none){.card-enq{opacity:1;transform:none}}
.js .grid .card{opacity:0;transform:translateY(34px) scale(.94);transition:opacity .6s,transform .8s var(--spring-soft)}
.js .grid .card.is-in{opacity:1;transform:none;transition-delay:calc(var(--col,0)*70ms)}
.js .grid .card.is-in.flipping{transition:none}
.sk-fallback .grid .card{opacity:1!important;transform:none!important}

/* Shop filters */
.filters{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:1rem;position:sticky;top:4.1rem;z-index:50;padding:.7rem 0;background:linear-gradient(var(--c-base) 75%,transparent)}
.chips{display:flex;gap:.55rem;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:var(--r-full);background:var(--c-raised);box-shadow:inset 0 0 0 2px var(--c-border);font:600 .95rem/1 var(--f-display);transition:transform var(--t-med) var(--spring),background var(--t-base),box-shadow var(--t-base)}
.chip::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--cc)}
.chip small{font:700 .75rem/1 var(--f-display);opacity:.6}
.chip:hover{transform:translateY(-3px) rotate(-3deg);box-shadow:inset 0 0 0 2px var(--cc)}
.chip.is-on{background:var(--cc);box-shadow:0 4px 0 var(--c-ink),inset 0 0 0 2px var(--c-ink);color:var(--c-on-brand);transform:translateY(-2px)}
.chip.is-on::before{background:var(--c-ink)}
.chip.wiggle{animation:wiggle .6s var(--spring)}
@keyframes wiggle{0%{transform:rotate(0)}20%{transform:rotate(-8deg) scale(1.1)}45%{transform:rotate(6deg) scale(1.1)}70%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
.search input{width:min(100%,19rem);padding:.75rem 1.1rem;border-radius:var(--r-full);border:2px solid var(--c-border);background:var(--c-raised);font:600 .95rem var(--f-body);transition:border-color var(--t-base),box-shadow var(--t-med) var(--spring),width var(--t-med)}
.search input:focus{outline:0;border-color:var(--c-secondary);box-shadow:0 0 0 5px color-mix(in srgb,var(--c-secondary) 25%,transparent)}
.count{color:var(--c-muted);margin:.4rem 0 1.4rem;font-weight:700}
.count b{font-family:var(--f-display);color:var(--c-ink)}
.empty{padding:4rem 0;text-align:center;font:600 1.3rem var(--f-display);color:var(--c-muted)}

/* PDP */
.pdp{padding-top:1rem;padding-bottom:3rem}
.crumbs{display:flex;gap:.6rem;flex-wrap:wrap;font-weight:700;font-size:var(--fs-sm);color:var(--c-muted);margin-bottom:1.5rem}
.crumbs a:hover{color:var(--c-secondary)}.crumbs b{color:var(--c-ink)}
.pdp-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
.gallery{position:sticky;top:5.5rem}
.gal-stage{position:relative;aspect-ratio:1;border-radius:var(--r-xl);background:color-mix(in srgb,var(--cc) 26%,#fff);overflow:hidden;perspective:1000px}
.gal-blob{position:absolute;inset:12%;border-radius:50%;background:color-mix(in srgb,var(--cc) 55%,#fff);animation:morph 10s ease-in-out infinite}
.gal-slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .4s;transform:translate3d(calc(var(--tx,0)*1px),calc(var(--ty,0)*1px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));pointer-events:none}
.gal-slide.is-on{opacity:1;pointer-events:auto}
.gal-slide:first-of-type{padding:9%}
.gal-slide .gal-img,.gal-slide img{width:100%;height:100%;object-fit:contain}
.gal-slide:first-of-type img{filter:drop-shadow(0 22px 18px rgba(30,43,23,.25));animation:bob 6s ease-in-out infinite}
.gal-scene{clip-path:circle(0% at 50% 50%);opacity:1!important;transition:clip-path .8s var(--ease-out);z-index:2}
.gal-scene.is-on{clip-path:circle(75% at 50% 50%)}
.gal-scene img{object-fit:cover}
.gal-shadow{position:absolute;left:30%;right:30%;bottom:8%;height:4.5%;border-radius:50%;background:rgba(30,43,23,.22);filter:blur(10px);animation:shadow 6s ease-in-out infinite}
.thumbs{display:flex;gap:.8rem;margin-top:1rem}
.thumb{width:4.6rem;aspect-ratio:1;border-radius:var(--r-md);background:color-mix(in srgb,var(--cc) 26%,#fff);overflow:hidden;box-shadow:inset 0 0 0 3px transparent;transition:transform var(--t-med) var(--spring),box-shadow var(--t-base)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:hover{transform:translateY(-4px) rotate(-4deg)}
.thumb.is-on{box-shadow:inset 0 0 0 3px var(--c-ink)}
.pdp-h{font-size:clamp(2.2rem,4.6vw,4rem);margin:.9rem 0 .6rem}
.pdp-tag{font:600 1.3rem/1.3 var(--f-display);color:var(--c-secondary);margin-bottom:1.1rem}
.pdp-desc{color:var(--c-muted);font-size:1.1rem;max-width:36em}
.ticks{display:grid;gap:.7rem}
.ticks li{display:flex;gap:.75rem;align-items:flex-start;font-weight:700}
.ticks svg{flex:0 0 1.5rem;width:1.5rem;height:1.5rem;margin-top:.1rem}
.js .ticks li{opacity:0;transform:translateX(-18px);transition:opacity .5s,transform .7s var(--spring);transition-delay:calc(var(--i,0)*90ms)}
.js .ticks.is-in li,.js .ticks li.is-in{opacity:1;transform:none}
.ticks.small li{font-weight:600;color:var(--c-muted)}
.specs{display:grid;border-radius:var(--r-md);overflow:hidden;box-shadow:inset 0 0 0 2px var(--c-border);background:var(--c-raised)}
.specs div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:.8rem 1rem}
.specs div+div{border-top:2px dashed var(--c-border)}
.specs dt{font:700 .85rem/1.4 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.specs dd{font-weight:700}
.avail{margin-top:1.1rem;padding:.9rem 1.1rem;border-radius:var(--r-md);background:var(--c-sunken);font-weight:600}
.avail b{font-family:var(--f-display);margin-right:.4rem}
.pdp-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.related{background:var(--c-sunken);border-radius:var(--r-xl) var(--r-xl) 0 0}

/* About / contact */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.about-copy{padding:2rem;border-radius:var(--r-lg);background:var(--c-raised);box-shadow:var(--sh-sm)}
.about-copy p{margin-top:1rem;color:var(--c-muted);font-size:1.1rem}
.about-cards{display:grid;gap:1rem}
.about-card{padding:1.5rem;border-radius:var(--r-lg);background:color-mix(in srgb,var(--cc) 35%,#fff)}
.about-card h3{font:700 1.4rem/1.1 var(--f-display);margin-bottom:.4rem}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:2rem;align-items:start}
.contact-side{padding:2rem;border-radius:var(--r-lg);background:var(--c-lemon)}
.contact-side p{margin:.8rem 0 1.2rem}
.contact-side .ticks.small li{color:var(--c-ink)}
.form{display:grid;gap:1.1rem;padding:2rem;border-radius:var(--r-lg);background:var(--c-raised);box-shadow:var(--sh-md)}
.f{display:grid;gap:.4rem}
.f span{font:700 .9rem var(--f-display);letter-spacing:.04em}.f em{font-style:normal;color:var(--c-muted);font-weight:500}
.f input,.f textarea{width:100%;padding:.9rem 1.1rem;border-radius:var(--r-md);border:2px solid var(--c-border);background:var(--c-base);font:600 1rem var(--f-body);transition:border-color var(--t-base),box-shadow var(--t-med) var(--spring),transform var(--t-med) var(--spring)}
.f input:focus,.f textarea:focus{outline:0;border-color:var(--c-secondary);box-shadow:0 0 0 5px color-mix(in srgb,var(--c-secondary) 25%,transparent);transform:translateY(-2px)}
.f input.bad,.f textarea.bad{border-color:var(--c-danger);animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}60%{transform:translateX(5px)}}
.hp{position:absolute;left:-9999px}
.notice{padding:.9rem 1.1rem;border-radius:var(--r-md);font-weight:700}
.notice.ok{background:color-mix(in srgb,var(--c-success) 20%,#fff)}.notice.bad{background:color-mix(in srgb,var(--c-danger) 16%,#fff)}
.cta-box{text-align:center;padding:clamp(2.5rem,7vw,5.5rem) 1.2rem;border-radius:var(--r-xl);background:var(--c-primary);display:grid;justify-items:center;gap:1.2rem;position:relative;overflow:hidden}
.cta-box::before,.cta-box::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.22)}
.cta-box::before{width:22rem;height:22rem;left:-8rem;top:-9rem}.cta-box::after{width:15rem;height:15rem;right:-4rem;bottom:-7rem;background:color-mix(in srgb,var(--c-lemon) 55%,transparent)}
.cta-box>*{position:relative;z-index:1}
.cta-box .eyebrow,.cta-box .lead{color:var(--c-on-brand)}
.cta-box .btn{--bg:var(--c-ink);--fg:#fff;--sd:#000}

/* Footer */
.site-footer{background:var(--c-ink);color:#e9f1df;padding:clamp(3rem,7vw,5.5rem) 0 2rem;margin-top:0;overflow:hidden}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr;gap:3rem;align-items:end}
.foot-word{font:700 clamp(3rem,9.5vw,8.6rem)/.92 var(--f-display);letter-spacing:-.035em;color:var(--c-primary)}
.foot-word .ch{transition:transform .5s var(--spring),color .3s}
.foot-word .ch:hover{transform:translateY(-.14em) rotate(-8deg);color:var(--c-lemon)}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.foot-cols h4{font:700 .8rem var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--c-lemon);margin-bottom:.8rem}
.foot-cols a{display:block;padding:.2rem 0;color:#e9f1df;transition:transform var(--t-med) var(--spring),color var(--t-base)}
.foot-cols a:hover{color:var(--c-lemon);transform:translateX(5px)}
.foot-note{margin-top:3rem;padding-top:1.4rem;border-top:2px dashed rgba(255,255,255,.2);color:#b5c4a8;font-size:var(--fs-sm);max-width:62em}

/* Confetti bits */
.confetti{position:fixed;left:0;top:0;z-index:9990;width:.7rem;height:.7rem;border-radius:2px;pointer-events:none}

/* Scroll-driven (progressive enhancement) */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero-stage{animation:stage-out linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .hb1{animation:hb1 linear both;animation-timeline:scroll(root);animation-range:0 120vh}
    .hb2{animation:hb2 linear both;animation-timeline:scroll(root);animation-range:0 120vh}
    .hero-copy{animation:copy-out linear both;animation-timeline:scroll(root);animation-range:0 80vh}
  }
}
@keyframes stage-out{to{transform:translateY(-9vh) scale(.9) rotate(4deg)}}
@keyframes hb1{to{transform:translate(8vw,24vh) scale(1.3)}}
@keyframes hb2{to{transform:translate(-6vw,-14vh) scale(.8)}}
@keyframes copy-out{to{transform:translateY(-6vh);opacity:.2}}

/* Responsive */
@media (max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .nav,.nav-cta{display:none}.burger{display:block}
  .hero-grid{grid-template-columns:1fr}.hero-stage{justify-self:center;max-width:460px}
  .story{grid-template-columns:1fr;gap:0}
  .story-pin{top:3.8rem;height:min(46vh,24rem);z-index:5}
  .story-stage{max-height:100%;aspect-ratio:auto;height:100%}
  .step{min-height:78vh;max-width:none;padding:1rem 0}
  .pdp-grid,.about-grid,.contact-grid,.foot-top{grid-template-columns:1fr}
  .gallery{position:static}
  .filters{top:3.8rem}
}
@media (max-width:700px){
  .grid{grid-template-columns:repeat(2,1fr);gap:1rem .7rem}.cat-grid{grid-template-columns:repeat(2,1fr)}
  .card h3{font-size:1rem}.card p{display:none}
  .chips{flex-wrap:nowrap;overflow-x:auto;padding:.4rem 0 .6rem;scrollbar-width:none;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);width:calc(100% + var(--gut)*2)}
  .chip{flex:0 0 auto}
  .search{width:100%}.search input{width:100%}
  .specs div{grid-template-columns:1fr;gap:.2rem}
  .scroll-cue{display:none}
  .band{margin-inline:-8vw}
}

/* Reduced motion: everything static */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-fade],.js .grid .card,.js .ticks li,.js .reveal-clip,.js [data-kinetic] .ch,.js [data-split] .ch{opacity:1!important;transform:none!important;clip-path:none!important}
  .rot-item{transform:none}.rot-item:not(.is-on){display:none}
  .set-i{opacity:1;transform:none}.set:not(.is-on){display:none}
  .step{opacity:1;transform:none}
  @view-transition{navigation:none}
}
.sk-fallback [data-fade],.sk-fallback .reveal-clip,.sk-fallback [data-kinetic] .ch,.sk-fallback [data-split] .ch,.sk-fallback .ticks li{opacity:1!important;transform:none!important;clip-path:none!important}