@font-face{font-family:"Helvetica Neue";src:url("assets/fonts/HelveticaNeue-Roman.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:url("assets/fonts/HelveticaNeue-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:url("assets/fonts/HelveticaNeue-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:url("assets/fonts/HelveticaNeue-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Legitima";src:url("assets/fonts/Legitima-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Legitima";src:url("assets/fonts/Legitima-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Cupine";src:url("assets/fonts/Cupine-Regular.otf") format("opentype"),url("assets/fonts/Cupine-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cupine";src:url("assets/fonts/Cupine-Italic.otf") format("opentype"),url("assets/fonts/Cupine-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
:root{
  --cacao:#2F130C; --oat:#EFDFCA; --white:#fff;
  --forest:#1B2C1E; --red:#943327; --honey:#E9BB4F; --orange:#D1612C;
  --head:"Cupine",Georgia,serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --accent:"Legitima",Georgia,serif;
  --pad:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--oat);color:var(--cacao);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
em{font-family:var(--accent);font-style:italic;font-weight:400}
h1,h2,h3,.statement-big,.story-col .big,.tone-big,.end-big,.hero-title{font-family:var(--sans);font-weight:500}
.hd{font-family:var(--head);font-weight:400;font-style:normal;text-transform:uppercase;letter-spacing:.01em}
.bold{font-weight:700;color:var(--honey)}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
h1,h2,h3{font-weight:500;line-height:1}
.label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;opacity:.7;margin-bottom:18px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* NAV */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);mix-blend-mode:difference;color:#fff}
.nav-mark img{height:26px;width:auto}
.nav nav{display:flex;gap:28px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.nav nav a:hover{opacity:.6}
@media(max-width:860px){.nav nav{display:none}}

/* HERO */
.hero{height:260vh;background:var(--cacao);color:var(--oat);position:relative}
.hero-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-eyebrow{position:absolute;top:84px;left:0;right:0;text-align:center;opacity:.7;transition:opacity .3s}
.hero-title{position:relative;z-index:3;text-align:center;font-size:clamp(56px,13vw,210px);line-height:.92;letter-spacing:-.01em;mix-blend-mode:difference;color:#fff;pointer-events:none;transform:scale(calc(1 - var(--p,0)*.15));opacity:clamp(0, calc(1.6 - var(--p,0)*2.2), 1)}
.hero-title .line{display:block;overflow:hidden;padding:.02em 0}
.hero-title .line>span{display:block;transform:translateY(105%);animation:rise 1.2s var(--ease) forwards}
.hero-title .line:nth-child(2)>span{animation-delay:.12s}
.hero-title .hd{font-size:1.05em;display:block}
@keyframes rise{to{transform:none}}
.hero-media{position:absolute;z-index:2;left:50%;top:50%;width:calc(22vw + (100vw - 22vw)*var(--p,0));height:calc(30vh + (100vh - 30vh)*var(--p,0));transform:translate(-50%,-50%);overflow:hidden;border-radius:calc(18px*(1 - var(--p,0)))}
.hero-media .slot{width:100%;height:100%;aspect-ratio:auto}
.scroll-cue{position:absolute;bottom:28px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:calc(.7 - var(--p,0)*2);z-index:3;color:#fff;mix-blend-mode:difference}

/* SLOTS */
.slot{position:relative;overflow:hidden;background:var(--oat);aspect-ratio:16/9;margin:0}
.slot img,.slot video{width:100%;height:100%;object-fit:cover}
.slot[data-fit="contain"] img{object-fit:contain}
.slot.ratio-4x5{aspect-ratio:4/5}
.slot.phone{aspect-ratio:9/16;border-radius:26px}
.slot .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;color:var(--cacao);background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(47,19,12,.07) 14px 28px),var(--oat)}
.slot .ph .play{width:54px;height:54px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:16px}
.slot .ph p{font-size:12px;letter-spacing:.06em;max-width:36ch;opacity:.8}
.dark .slot .ph,.dark-block .slot .ph,.hero .slot .ph{background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(239,223,202,.07) 14px 28px),var(--cacao);color:var(--oat)}
.slot.is-video{cursor:pointer}
.slot .sound{position:absolute;right:14px;bottom:14px;z-index:2;font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:rgba(47,19,12,.7);color:var(--white);border:0;border-radius:99px;padding:8px 12px;cursor:pointer;backdrop-filter:blur(6px)}
.hero .slot[data-need]::after{display:none}

/* SECTION HEADS */
section{position:relative}
.section-head{padding:0 var(--pad)}
.section-head h2{font-size:clamp(44px,8vw,132px);letter-spacing:-.03em;font-weight:500}
.section-head h2 em{font-size:1.06em}
.lead{padding:0 var(--pad);font-size:clamp(20px,2.2vw,32px);line-height:1.3;max-width:34em;font-weight:400}
.caption-line{padding:28px var(--pad) 0;font-size:15px;max-width:60ch}
.caption-line b{font-weight:600}

/* META */
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:36px var(--pad);border-bottom:1px solid rgba(47,19,12,.2);font-size:15px}
.meta .label{margin-bottom:6px}
@media(max-width:760px){.meta{grid-template-columns:1fr 1fr}}

/* STORY */
.story{padding:clamp(80px,12vw,180px) var(--pad)}
.story-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,64px)}
.story-col p{font-size:16px;max-width:42ch}
.story-col .big{font-size:clamp(24px,3vw,44px);line-height:1.12;letter-spacing:-.02em;max-width:18em}
.story-col .big em{font-size:1.1em}
@media(max-width:900px){.story-grid{grid-template-columns:1fr}}

/* STATEMENT */
.statement{padding:clamp(80px,12vw,180px) var(--pad);overflow:hidden}
.statement--yellow{background:var(--honey)}
.statement-inner{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.statement-big{font-size:clamp(34px,5.6vw,92px);line-height:1;letter-spacing:-.03em;font-weight:500}
.statement-big em{font-size:1.08em}
.statement-img{aspect-ratio:3/4;background:transparent}
.statement-img .ph{background:none;border:1.5px dashed rgba(47,19,12,.4)}
@media(max-width:860px){.statement-inner{grid-template-columns:1fr}}

/* BEFORE AFTER */
.ba{padding:clamp(80px,12vw,180px) 0 clamp(60px,8vw,120px)}
.ba-grid{display:grid;grid-template-columns:1fr 60px 1fr;gap:20px;align-items:center;padding:60px var(--pad) 0;max-width:1300px;margin:0 auto}
.ba-arrow{font-size:44px;text-align:center}
.ba-card .cap{margin-top:14px;font-size:14px}
.ba-card .cap span{display:inline-block;margin-right:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor;border-radius:99px;padding:3px 10px}
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);padding:clamp(60px,8vw,120px) var(--pad) 0}
.reason{border-top:1px solid var(--cacao);padding-top:20px}
.reason b{font-size:12px;letter-spacing:.14em}
.reason h3{font-size:clamp(24px,2.4vw,34px);margin:18px 0 12px;letter-spacing:-.02em}
.reason p{font-size:15px;max-width:38ch}
@media(max-width:860px){.ba-grid{grid-template-columns:1fr}.ba-arrow{transform:rotate(90deg)}.reasons{grid-template-columns:1fr}}

/* DARK */
.dark{background:var(--cacao);color:var(--oat);padding:clamp(80px,12vw,180px) 0}
.logo-stage{display:grid;grid-template-columns:minmax(240px,1fr) auto auto;gap:clamp(30px,5vw,100px);align-items:center;padding:clamp(60px,8vw,120px) var(--pad) 40px}
.logo-big img{height:clamp(300px,42vw,560px);width:auto}
.logo-copy p{font-size:clamp(18px,1.8vw,26px);line-height:1.35;max-width:30em;margin-bottom:18px}
.tags{list-style:none;display:flex;gap:10px;margin-top:28px}
.tags li{border:1px solid currentColor;border-radius:99px;padding:6px 16px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:860px){.logo-stage{grid-template-columns:1fr;justify-items:start}}

.marquee{overflow:hidden;white-space:nowrap;border-block:1px solid rgba(239,223,202,.25);padding:20px 0;margin:50px 0}
.marquee-track{display:inline-flex;gap:60px;animation:marq 32s linear infinite;font-family:var(--head);font-size:clamp(40px,7vw,110px);text-transform:uppercase}
.marquee-track span:nth-child(even){font-family:var(--accent);font-style:italic;text-transform:none;color:var(--honey)}
@keyframes marq{to{transform:translateX(-50%)}}

.palette{display:grid;grid-template-columns:repeat(7,1fr);height:clamp(260px,34vw,460px);margin:0 var(--pad)}
.sw{background:var(--c);color:var(--t);padding:18px;display:flex;flex-direction:column;justify-content:flex-end;transition:flex .5s var(--ease);font-size:13px}
.sw b{font-weight:600;font-size:15px}
.sw i{font-style:normal;opacity:.7}
.palette .sw:first-child{outline:1px solid rgba(239,223,202,.35);outline-offset:-1px}
@media(max-width:760px){.palette{grid-template-columns:repeat(4,1fr);height:auto}.sw{aspect-ratio:1}}
.type{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);padding:clamp(60px,8vw,120px) var(--pad) 0}
.type-card{border-top:1px solid rgba(239,223,202,.3);padding-top:18px}
.type-card .label{margin-bottom:28px}
.type-card p{margin-bottom:16px;min-height:120px}
.type-card small{opacity:.6}
.t-head{text-transform:uppercase;font-family:var(--head);font-size:clamp(40px,5vw,76px);line-height:1}
.t-helv{font-size:clamp(18px,1.8vw,26px);line-height:1.3}
.t-serif{font-family:var(--accent);font-size:clamp(44px,5vw,76px);line-height:1;color:var(--honey)}
@media(max-width:860px){.type{grid-template-columns:1fr}}

/* TONE */
.tone{background:var(--forest);color:var(--oat);padding:clamp(80px,12vw,180px) var(--pad)}
.tone-big{font-size:clamp(40px,7.5vw,128px);letter-spacing:-.03em;margin-bottom:clamp(50px,7vw,110px);font-weight:500}
.tone-big em{color:var(--honey);font-size:1.06em}
.tone-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px)}
.tone-cols>div{border-top:1px solid rgba(239,223,202,.3);padding-top:18px}
.tone-cols h3{font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;font-weight:500;opacity:.8}
.tone-cols p{font-size:18px;line-height:1.35;max-width:30ch}
@media(max-width:860px){.tone-cols{grid-template-columns:1fr}}

/* PACKAGING / WORLD / APPS */
.packaging,.world,.apps{padding:clamp(80px,12vw,180px) 0 0}
.full{width:100%;margin-top:clamp(50px,7vw,100px)}
.full.slot{aspect-ratio:2400/1062}
.flavors{display:grid;grid-template-columns:repeat(3,1fr)}
.flavor{background:var(--f);color:var(--oat);padding:clamp(24px,3vw,48px) var(--pad);display:flex;flex-direction:column;justify-content:space-between;min-height:220px}
.flavor h3{font-size:clamp(22px,2.6vw,38px);letter-spacing:-.02em}
.flavor p{font-size:13px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
@media(max-width:760px){.flavors{grid-template-columns:1fr}.flavor{min-height:120px}}
.diptych{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.diptych .slot{aspect-ratio:2400/1062}
.boxes .slot{aspect-ratio:16/9}
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:clamp(50px,7vw,100px)}
@media(max-width:760px){.diptych,.boxes{grid-template-columns:1fr}}

.world .lead{margin-top:40px}
.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:clamp(50px,7vw,100px)}
.photo-grid .slot{aspect-ratio:2400/1062}
.photo-grid .wide{grid-column:span 2}
.film-block{background:var(--cacao);color:var(--oat);margin-top:clamp(80px,12vw,180px);padding:clamp(80px,10vw,150px) 0}
.film-block .full:first-of-type{margin-top:50px}
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,3vw,40px);padding:clamp(50px,7vw,100px) var(--pad) 0;max-width:1200px;margin:0 auto}
.film-block .caption-line{max-width:none;margin:0 auto;max-width:1200px;padding-left:var(--pad)}
@media(max-width:760px){.photo-grid,.phones{grid-template-columns:1fr}.photo-grid .wide{grid-column:auto}.phones .phone{max-width:300px;margin:auto}}

.app-block{display:grid;grid-template-columns:.8fr 1.6fr;gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(50px,7vw,100px) var(--pad) 0}
.app-block.rev{grid-template-columns:1.6fr .8fr}
.app-block.rev .app-text{order:2}
.app-text h3{font-size:clamp(30px,3.6vw,56px);letter-spacing:-.025em;margin-bottom:16px}
.app-text p{max-width:30ch}
.merch{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.merch .slot{aspect-ratio:1/1}
.oog{margin-top:clamp(60px,8vw,120px);display:grid;gap:6px}
.oog .full{margin-top:0}
@media(max-width:860px){.app-block,.app-block.rev{grid-template-columns:1fr}.app-block.rev .app-text{order:0}}

/* FUTURE */
.future{background:var(--honey);padding:clamp(80px,12vw,180px) var(--pad)}
.future h2{font-size:clamp(44px,8vw,132px);letter-spacing:-.03em;max-width:12em}
.future h2 em{font-size:1.06em}
.future .lead{padding:40px 0 0}
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(50px,7vw,100px)}
.road>div{border-top:1.5px solid var(--cacao);padding-top:18px}
.road b{font-family:var(--head);font-weight:400;font-size:clamp(28px,3vw,44px)}
.road p{margin-top:12px;max-width:26ch}
@media(max-width:760px){.road{grid-template-columns:1fr}}

.end{background:var(--cacao);color:var(--oat);text-align:center;padding:clamp(100px,16vw,260px) var(--pad) 40px}
.end-big{font-size:clamp(48px,12vw,190px);line-height:.95}
.end-big .hd{color:var(--honey);display:block}
.end-sub{margin-top:clamp(60px,10vw,160px);font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}

/* REVEAL */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.slot.reveal{transform:translateY(40px) scale(.985)}
.slot.reveal.in{transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.marquee-track{animation:none}.hero-title .line>span{animation:none;transform:none}}


/* v2 additions */
.slot.ratio-1x1{aspect-ratio:1/1}
.slot[data-pos] img{object-position:var(--pos)}
.lockups{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 var(--pad);margin-top:clamp(50px,7vw,100px)}
.lk{position:relative;aspect-ratio:4/3;display:grid;place-items:center;padding:12%}
.lk img{max-width:100%;max-height:100%;width:auto;height:auto}
.lk-v img{max-height:100%;height:100%}
.lk-wide{grid-column:span 4;aspect-ratio:21/6;padding:3%}
.lk-wide img{max-height:100%}
.lk img.mult{mix-blend-mode:multiply}
.lk span{position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.65;color:var(--cacao)}
.lk[style*="943327"] span,.lk[style*="1B2C1E"] span{color:var(--oat)}
@media(max-width:760px){.lockups{grid-template-columns:1fr 1fr}.lk-wide{grid-column:span 2;aspect-ratio:16/8}}
.icons{padding:clamp(60px,8vw,120px) var(--pad) 0}
.icon-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,3vw,40px)}
.icon-grid img{width:100%;aspect-ratio:1;object-fit:contain;opacity:.92}
@media(max-width:760px){.icon-grid{grid-template-columns:repeat(3,1fr)}}
.flavors{gap:0}
.flavor{position:relative;padding:0;display:block;min-height:0;background:var(--cacao);overflow:hidden}
.flavor img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s var(--ease)}
.flavor:hover img{transform:scale(1.04)}
.flavor figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2.4vw,36px) clamp(18px,2.4vw,36px);background:linear-gradient(transparent,rgba(47,19,12,.75));color:var(--oat)}
.photo-grid .slot{aspect-ratio:4/3}
.photo-grid .wide{aspect-ratio:2400/1000}
.merch-head{grid-template-columns:1fr}
.merch{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:clamp(40px,5vw,70px) 0 0}
.merch .slot{aspect-ratio:4/3}
.oog{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.oog .slot{aspect-ratio:4/3}
.oog .wide{grid-column:span 2;aspect-ratio:2400/1000}
@media(max-width:760px){.merch{grid-template-columns:1fr}.oog{grid-template-columns:1fr}.oog .wide{grid-column:auto}}
.lockups{grid-template-columns:repeat(4,minmax(0,1fr))}
.lk{min-width:0}
.lk img{width:100%;height:auto;object-fit:contain}
.lk-v img{width:auto;height:100%;max-width:100%}
@media(max-width:760px){.lockups{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* FUTURE PRODUCTS */
.fp{background:var(--forest);color:var(--oat)}
.fp-open{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.fp-open-img{aspect-ratio:auto;height:100%;min-height:60vh}
.fp-open-text{padding:clamp(60px,8vw,140px) var(--pad);display:flex;flex-direction:column;justify-content:center;gap:24px}
.fp-open-text h2{font-size:clamp(48px,8vw,128px);letter-spacing:-.03em}
.fp-open-text h2 em{color:var(--honey);font-size:1.06em}
.fp-open-text .lead{padding:0}
.badge{align-self:flex-start;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--honey);color:var(--honey);border-radius:99px;padding:6px 14px}
@media(max-width:860px){.fp-open{grid-template-columns:1fr}.fp-open-img{aspect-ratio:1/1;height:auto}}
.fp-product{padding:clamp(80px,12vw,180px) var(--pad) 0}
.fp-head{display:grid;grid-template-columns:auto 1fr;gap:6px 28px;align-items:end;margin-bottom:clamp(30px,5vw,70px)}
.fp-head b{grid-row:span 3;font-family:var(--head);font-weight:400;font-size:clamp(60px,10vw,160px);line-height:.8;color:var(--honey)}
.fp-head h3{font-size:clamp(40px,6.5vw,104px);letter-spacing:-.03em}
.fp-head h3 em{color:var(--honey)}
.fp-head p{font-size:clamp(15px,1.4vw,19px);opacity:.8;max-width:42ch}
.fp-head .fp-line{font-family:var(--accent);font-style:italic;font-size:clamp(24px,2.4vw,36px);opacity:1;margin-top:6px}
.fp-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.fp-mosaic .slot{aspect-ratio:1/1;background:rgba(239,223,202,.08)}
.fp-mosaic .hero-sq{grid-column:span 2;grid-row:span 2}
.fp-mosaic .duo{grid-column:span 2}
.fp-mosaic .duo{aspect-ratio:2/1}
.fp-product.rev .fp-mosaic{grid-auto-flow:row dense}
.fp-product.rev .fp-mosaic .hero-sq{grid-column:3 / span 2;grid-row:1 / span 2}
@media(max-width:760px){.fp-mosaic{grid-template-columns:1fr 1fr}.fp-mosaic .hero-sq,.fp-product.rev .fp-mosaic .hero-sq{grid-column:span 2;grid-row:span 2}.fp-mosaic .duo{aspect-ratio:1/1;grid-column:span 1}.fp-head{grid-template-columns:1fr}.fp-head b{grid-row:auto}}
.fp-family{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(80px,12vw,180px) var(--pad) 0}
.fp-family h3{font-size:clamp(34px,5vw,80px);letter-spacing:-.03em;margin-bottom:20px}
.fp-family h3 em{color:var(--honey)}
.fp-family p{max-width:38ch;font-size:clamp(16px,1.5vw,20px);opacity:.85}
@media(max-width:860px){.fp-family{grid-template-columns:1fr}}
.fp .full{margin-top:clamp(80px,12vw,180px)}
.fp-next{padding:clamp(80px,10vw,150px) var(--pad) clamp(80px,12vw,180px)}
.fp-ghosts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ghost{border:1.5px dashed rgba(239,223,202,.35);aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:space-between;padding:20px;border-radius:6px;transition:border-color .4s,background .4s}
.ghost:hover{border-color:var(--honey);background:rgba(233,187,79,.08)}
.ghost b{font-family:var(--head);font-weight:400;font-size:clamp(32px,4vw,60px);opacity:.5}
.ghost p{font-size:13px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
@media(max-width:760px){.fp-ghosts{grid-template-columns:1fr}}
.fp .ph{background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(239,223,202,.07) 14px 28px),var(--forest);color:var(--oat)}

.slot.ratio-tall{aspect-ratio:1771/2000;max-width:620px;justify-self:end;width:100%}

/* LOGO ANIMATION (animator's frame sequence, scrubbed by scroll, over oat) */
.build{position:relative;height:340vh}
.build-stage{position:sticky;top:0;height:100vh;background:var(--oat);overflow:hidden}
#buildCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.build-stage.done @media(prefers-reduced-motion:reduce){.build{height:auto}.build-stage{position:relative;height:min(100vh,860px)}}

/* equal lockup tiles */
.lockups{grid-template-columns:repeat(4,minmax(0,1fr))}
.lk{aspect-ratio:3/4;padding:0;display:grid;place-items:center}
.lk img{width:78%;height:auto;max-height:none}
.lk-v img{width:auto;height:76%;max-width:80%}
.lk-wide{grid-column:span 4;aspect-ratio:21/6;padding:3%}
.lk-wide img{width:auto;height:100%;max-width:100%}
@media(max-width:760px){.lockups{grid-template-columns:repeat(2,minmax(0,1fr))}.lk-wide{grid-column:span 2;aspect-ratio:16/8}}
.lockups .lk:not(.lk-wide){aspect-ratio:3/4;height:auto;min-height:0;overflow:hidden}
.lockups .lk:not(.lk-wide) img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.lockups .lk:not(.lk-wide):not(.lk-v) img{width:78%;height:auto}
.lockups .lk-v img{height:78%;width:auto;max-width:none}

/* trio cutouts */
.trio{display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,3vw,56px);padding:clamp(60px,8vw,120px) var(--pad) clamp(40px,6vw,90px)}
.trio img{width:clamp(110px,24vw,360px);height:auto;filter:drop-shadow(0 28px 34px rgba(47,19,12,.28));transition:transform .7s var(--ease),opacity 1s var(--ease)}
.trio img:nth-child(2){transform:translateY(-4vw)}
.trio img.reveal{transform:translateY(60px)}
.trio img.reveal.in{transform:none}
.trio img:nth-child(2).reveal.in{transform:translateY(-4vw)}
.trio img:nth-child(2).reveal{transition-delay:.12s}.trio img:nth-child(3).reveal{transition-delay:.24s}
.trio img:hover{transform:translateY(-14px)!important}
/* shelf */
.shelf{background:var(--cacao);color:var(--oat);margin-top:clamp(70px,10vw,150px);padding:clamp(70px,10vw,150px) 0 clamp(70px,9vw,130px)}
.shelf-head{padding:0 var(--pad);margin-bottom:clamp(40px,6vw,90px);max-width:1200px}
.shelf-head h3{font-size:clamp(40px,7.4vw,120px);letter-spacing:-.03em;line-height:.98;margin-bottom:28px}
.shelf-head h3 em{color:var(--honey)}
.shelf-head p{font-size:clamp(17px,1.7vw,24px);max-width:36em;opacity:.85}
.shelf-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.shelf-fig{margin:0}
.shelf-fig .slot{aspect-ratio:4/3}
.shelf-fig figcaption{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;padding:20px var(--pad) 0}
.shelf-fig figcaption b{font-size:clamp(28px,3.4vw,52px);color:var(--honey)}
.shelf-fig figcaption span{font-size:clamp(14px,1.2vw,17px);opacity:.85;max-width:30em}
@media(max-width:760px){.shelf-grid{grid-template-columns:1fr}}
/* v: marquee all caps, films at native 16:9 */
.marquee-track span:nth-child(even){font-family:var(--head);font-style:normal;text-transform:uppercase;color:var(--honey)}
.full.slot.film{aspect-ratio:16/9}

.shelf-videos{padding:clamp(60px,8vw,120px) var(--pad) 0}
.shelf-vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.4vw,36px);max-width:1100px;margin:0 auto}
.shelf-vgrid .phone{background:var(--cacao)}
@media(max-width:760px){.shelf-vgrid{grid-template-columns:1fr;max-width:320px}}

/* PLAY */
.play{background:var(--red);color:var(--oat);padding:clamp(80px,12vw,180px) 0 clamp(60px,8vw,120px);overflow:hidden}
.play-head{padding:0 var(--pad)}
.play-head h2{font-size:clamp(44px,8vw,128px);letter-spacing:-.03em;max-width:12em}
.play-head h2 em{color:var(--honey);font-size:1.06em}
.play-head .lead{padding:28px 0 0;max-width:30em}
.play-stage{position:relative;height:clamp(620px,86vh,820px);margin-top:clamp(30px,5vw,70px);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.play-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.play-lines line{stroke:var(--oat);stroke-width:1.5;stroke-dasharray:3 7;opacity:.55;transition:stroke .4s,opacity .4s}
.play-lines line.on{stroke:var(--honey);stroke-dasharray:none;stroke-width:3;opacity:1}
.play-core{position:absolute;left:50%;top:50%;width:clamp(120px,16vw,200px);aspect-ratio:1;border-radius:50%;border:0;background:var(--oat);display:grid;place-items:center;transform:translate(-50%,-50%);cursor:default;transition:background .5s,transform .5s var(--ease);z-index:2}
.play-core img{width:62%;height:auto}
.play-stage.won .play-core{background:var(--honey);transform:translate(-50%,-50%) scale(1.25)}
.pnode{position:absolute;left:0;top:0;z-index:3;display:grid;gap:2px;max-width:clamp(150px,19vw,230px);padding:14px 20px;border:1.5px solid var(--oat);border-radius:28px;background:var(--red);color:var(--oat);font-size:clamp(14px,1.3vw,18px);line-height:1.2;text-align:center;cursor:grab;will-change:transform;transition:background .35s,color .35s,border-color .35s,box-shadow .35s}
.pnode.drag{cursor:grabbing;box-shadow:0 18px 30px rgba(47,19,12,.35);z-index:6}
.pnode .q{font-weight:500}
.pnode .a{display:none;font-family:var(--accent);font-style:italic;font-size:1.18em}
.pnode.yes{background:var(--honey);color:var(--cacao);border-color:var(--honey)}
.pnode.yes .q{display:none}
.pnode.yes .a{display:block}
.play-hud{position:absolute;left:var(--pad);top:0;display:flex;gap:18px;align-items:center;z-index:4}
.play-count{font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.play-count b{font-family:var(--head);font-weight:400;font-size:2.2em;vertical-align:-.1em;color:var(--honey);margin-right:4px}
.play-reset{font:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:var(--oat);color:var(--cacao);border:0;border-radius:99px;padding:10px 18px;cursor:pointer}
.play-win{position:absolute;left:0;right:0;bottom:2%;text-align:center;font-size:clamp(30px,5.4vw,84px);line-height:1;color:var(--honey);opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s var(--ease);pointer-events:none;z-index:5}
.play-stage.won .play-win{opacity:1;transform:none}
.chip{position:absolute;top:-30px;width:var(--s);height:var(--s);background:var(--cacao);border-radius:18%;z-index:7;pointer-events:none;box-shadow:inset 0 0 0 calc(var(--s)*.09) rgba(239,223,202,.18)}
@media(prefers-reduced-motion:reduce){.chip{display:none}}

/* Auge-style display: framed media, portrait pair + wide */
.am{--g:clamp(12px,2.2vw,26px);background:var(--cacao);padding:var(--g);display:grid;gap:var(--g);margin-top:clamp(50px,7vw,100px)}
.am-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--g)}
.am .slot{background:var(--cacao)}
.am-pair .slot{aspect-ratio:4/5}
.am .am-wide{aspect-ratio:16/9;margin:0}
.am .slot img{transform:scale(1.12);will-change:transform}
@media(max-width:760px){.am-pair{grid-template-columns:1fr}}
.am-pair .slot img{transform:scale(1.04)}

/* totes + out-of-home in framed layout */
.am-totes{margin-top:clamp(30px,4vw,60px);gap:var(--g)}
.am-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g)}
.am-grid3 .slot{aspect-ratio:3/2}
@media(max-width:760px){.am-grid3{grid-template-columns:1fr 1fr}.am-oog{grid-template-columns:1fr}.am-oog .am-bb,.am-oog .am-p1,.am-oog .am-p2,.am-oog .am-p3{grid-column:1;grid-row:auto;aspect-ratio:4/3}}
.am-grid3 .slot img,.am-oog .slot img{transform:scale(1.03)}

/* OOH: wide video, square pair, wide */
.am-oog{grid-template-columns:1fr 1fr;grid-template-rows:auto;margin-top:var(--g)}
.am-oog .slot{position:relative}
.am-oog .slot img{position:absolute;inset:0;width:100%;height:100%}
.am-oog .am-bb{grid-column:1 / span 2;aspect-ratio:16/9}
.am-oog .am-p1,.am-oog .am-p2{aspect-ratio:1/1}
.am-oog .am-p3{grid-column:1 / span 2;aspect-ratio:16/8}
@media(max-width:760px){.am-oog{grid-template-columns:1fr}.am-oog .am-bb,.am-oog .am-p1,.am-oog .am-p2,.am-oog .am-p3{grid-column:1;aspect-ratio:4/3}}
/* interlude band */
.interlude{background:var(--cacao)}
.interlude .slot{aspect-ratio:21/9;background:var(--cacao)}
@media(max-width:760px){.interlude .slot{aspect-ratio:4/3}}

/* cafe signs */
.am-cafe{margin-top:clamp(30px,4vw,60px)}
.am-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--g)}
.am-grid2 .slot{aspect-ratio:3/2}
.am-grid2 .slot img{transform:scale(1.02)}
@media(max-width:760px){.am-grid2{grid-template-columns:1fr}}

/* future products 03/04 */
.fp-wide{display:grid;gap:6px}
.fp-wide .slot{aspect-ratio:16/9;background:rgba(239,223,202,.08)}
.fp-wide .wide2{aspect-ratio:2752/1290}
/* THE BAR */
.bar{background:var(--oat);padding:clamp(80px,12vw,180px) var(--pad) clamp(80px,10vw,150px)}
.bar-head h2{font-size:clamp(44px,8vw,128px);letter-spacing:-.03em;max-width:12em}
.bar-head h2 em{color:var(--red);font-size:1.06em}
.bar-head .lead{padding:28px 0 0;max-width:30em}
.bar-stage{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(24px,5vw,80px);align-items:center;margin-top:clamp(40px,6vw,90px)}
.bar-side{display:grid;gap:18px;justify-items:start}
.bar-count{font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.bar-count b{font-family:var(--head);font-weight:400;font-size:clamp(48px,6vw,92px);vertical-align:-.1em;color:var(--red);margin-right:6px}
.bar-hint{font-family:var(--accent);font-style:italic;font-size:clamp(22px,2.2vw,32px)}
.bar-reset{font:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:var(--cacao);color:var(--oat);border:0;border-radius:99px;padding:11px 20px;cursor:pointer}
.bar-wrap{position:relative;height:min(78vh,860px);aspect-ratio:760/1683}
.bar-under,.bar-top{position:absolute;inset:0;display:grid}
.bar-tile{display:grid;place-items:center;padding:8%;text-align:center;font-family:var(--accent);font-style:italic;font-size:clamp(18px,2.2vw,34px);line-height:1.05;color:var(--cacao)}
.bar-tile span{opacity:0;transform:translateY(8px) scale(.96);transition:opacity .5s .15s,transform .5s .15s var(--ease)}
.bar-tile.on span{opacity:1;transform:none}
.bar-tile{border:1.5px dashed rgba(47,19,12,.25);border-radius:6px;margin:1.5%}
.bar-cell{background-repeat:no-repeat;border:0;padding:0;cursor:pointer;transition:transform .55s var(--ease),opacity .45s;filter:drop-shadow(0 8px 10px rgba(47,19,12,.28));will-change:transform}
.bar-cell:hover{transform:translateY(-5px) rotate(-.6deg)}
.bar-cell.gone{opacity:0;pointer-events:none;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.9)}
.bar-styles{display:grid;gap:10px;justify-items:start}
.bar-styles button{font:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid var(--cacao);background:transparent;color:var(--cacao);border-radius:99px;padding:10px 18px;cursor:pointer;transition:background .3s,color .3s}
.bar-styles button[aria-selected="true"]{background:var(--cacao);color:var(--oat)}
.bar-win{text-align:center;margin-top:clamp(30px,5vw,70px);font-size:clamp(34px,6vw,96px);line-height:1;color:var(--red);opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s var(--ease)}
.bar.won .bar-win{opacity:1;transform:none}
@media(max-width:860px){.bar-stage{grid-template-columns:1fr;justify-items:center}.bar-side,.bar-styles{justify-items:center;grid-auto-flow:column}.bar-styles{grid-auto-flow:row;grid-template-columns:1fr 1fr}.bar-wrap{height:min(70vh,560px)}}

/* bar section: compact so the win line is visible */
.bar{padding:clamp(60px,8vw,110px) var(--pad) clamp(50px,6vw,90px)}
.bar-stage{margin-top:clamp(24px,3vw,44px)}
.bar-wrap{height:min(54vh,520px)}
.bar-win{margin-top:clamp(14px,2vw,28px);font-size:clamp(30px,5vw,72px)}
@media(max-width:860px){.bar-wrap{height:min(48vh,420px)}}
.bar-tile{font-size:clamp(13px,1.55vw,22px);padding:4%}

/* inline logo in headings */
.logo-inline{display:inline-block;height:.74em;width:auto;fill:currentColor;margin:0 .06em;vertical-align:baseline;overflow:visible}
.logo-inline path{transform-box:fill-box;transform-origin:50% 100%;opacity:0;transform:translateY(32%) scale(.86);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.in .logo-inline path,.logo-inline.in path{opacity:1;transform:none}
.logo-inline path:nth-child(1){transition-delay:.15s}
.logo-inline path:nth-child(2){transition-delay:.30s}
.logo-inline path:nth-child(3){transition-delay:.45s}
@media(prefers-reduced-motion:reduce){.logo-inline path{opacity:1;transform:none;transition:none}}

/* chocolate square in the statement section */
.statement-inner{align-items:center}
.choc-wrap{display:grid;place-items:center;padding:clamp(10px,2vw,30px)}
.choc{display:block;width:min(100%,440px);height:auto;transform:rotate(-5deg);will-change:transform,clip-path;
  clip-path:inset(0 0 100% 0)}
.choc-wrap.in .choc{animation:chocIn 1.9s cubic-bezier(.2,.75,.15,1) .15s both,chocFloat 7s ease-in-out 2.2s infinite}
@keyframes chocIn{
  0%{clip-path:inset(-4% -6% 100% -6%);transform:translateY(-90px) rotate(-17deg) scale(.9)}
  45%{clip-path:inset(-4% -6% 38% -6%)}
  100%{clip-path:inset(-8% -8% -22% -8%);transform:translateY(0) rotate(-5deg) scale(1)}
}
@keyframes chocFloat{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-3.5deg) translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.choc{clip-path:none;transform:rotate(-5deg)}.choc-wrap.in .choc{animation:none}}
@media(max-width:860px){.choc{width:min(78%,360px)}}

.fp-head h3 .logo-inline{height:.72em;margin-right:.08em}
.section-head h2 .logo-inline{height:.76em}

/* before / after: the new bar is scaled and placed to match the old bar's size and position */
.ba-after img{transform:translate(2.5%,-1.05%) scale(1.275);transform-origin:50% 50%}
.ba-grid{grid-template-columns:1fr 132px 1fr}
.ba-arrow{display:grid;place-items:center;font-size:0}

@media(max-width:860px){.ba-grid{grid-template-columns:1fr}.ba-arrow{transform:none}.ba-arrow-svg{transform:rotate(90deg)}}

/* before / after: a drop of chocolate falls on the old bar, covers it, drains away and leaves the new bar */
.ba-stage{position:relative;height:260vh}
.ba-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px var(--pad) 20px}
.ba-wrap{position:relative;width:min(620px,88vw,calc(100vh - 230px));aspect-ratio:1/1}
.ba-wrap .slot{position:absolute;inset:0;aspect-ratio:auto;margin:0}
.ba-choc{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:5}
.ba-cap{margin-top:22px;font-size:14px;text-align:center;transition:opacity .35s}
.ba-cap span{display:inline-block;margin-right:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor;border-radius:99px;padding:3px 10px}
.ba-cap i{font-style:normal}
.ba-cap.swap{opacity:0}
.ba-stage.final{height:auto}.ba-stage.final .ba-sticky{position:static;height:auto;padding-top:clamp(50px,6vw,90px)}
@media(max-width:640px){.ba-cap{font-size:12px}}
.ba-after img{transform:translate(2.5%,-1.05%) scale(1.275);transform-origin:50% 50%}
.ba-grid{grid-template-columns:1fr 132px 1fr}
.ba-arrow{display:grid;place-items:center;font-size:0}

@media(max-width:860px){.ba-grid{grid-template-columns:1fr}.ba-arrow{transform:none}.ba-arrow-svg{transform:rotate(90deg)}}


/* logo construction diagram: the cacao pod inside the TCB square, next to the resulting C */
.logo-diagram{display:flex;align-items:center;gap:clamp(14px,3vw,40px);margin-top:clamp(28px,4vw,52px)}
.logo-diagram svg{width:clamp(140px,19vw,260px);height:auto;overflow:visible}
.ld-line{fill:none;stroke:currentColor;stroke-width:1.6;vector-effect:non-scaling-stroke}
.ld-guide{opacity:.7}
.ld-pod{stroke-width:2}
@media(max-width:860px){.logo-diagram svg{width:clamp(120px,38vw,220px)}}

.logo-copy{align-self:stretch;display:flex;flex-direction:column;justify-content:flex-start}
.logo-copy p{max-width:21em;font-size:clamp(17px,1.5vw,22px)}
.logo-copy .tags{margin-top:auto}
.logo-stage>.logo-diagram{margin:0}
.logo-stage{--lh:clamp(300px,min(80vh,52vw),780px)}
.logo-big img{height:var(--lh)}
/* the diagram's square is exactly the size of the C in the stacked TCB (C = 171.73 of 579.45 units tall), and sits level with it */
.logo-stage>.logo-diagram svg{width:calc(var(--lh) * .2964 * 443.65 / 380.28);height:auto;overflow:visible}
.logo-stage>.logo-diagram.reveal{transition-delay:.15s}
.ld-line{stroke-width:1.2}.ld-pod{stroke-width:1.2}

/* identity: the stacked TCB stands level with the headline, text + construction diagram sit beside it */
.id-top{position:relative;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(240px,1fr) auto auto;column-gap:clamp(30px,5vw,100px);padding:0 var(--pad)}
.id-top>.section-head{grid-column:1 / 3;grid-row:1;padding:0}
.id-top .logo-stage{display:contents}
.id-top .logo-copy{grid-column:1;grid-row:2;align-self:stretch;padding:var(--copy-pt,clamp(40px,5vw,80px)) 0 0}
.id-top .logo-diagram{grid-column:2;grid-row:2;align-self:start;margin-top:var(--dg-mt,0px)}
.id-top .logo-big{grid-column:3;grid-row:1 / 3;align-self:start;margin-top:var(--logo-mt,0px)}
@media(max-width:860px){.id-top{grid-template-columns:1fr}.id-top>.section-head,.id-top .logo-copy,.id-top .logo-diagram,.id-top .logo-big{grid-column:1;grid-row:auto}.id-top .logo-big{margin-top:30px}}
.logo-big img{display:block}
@media(max-width:860px){.id-top .logo-diagram{margin-top:30px}}

/* new merch + stationery mockups (still frames, no parallax) */
.am-still .slot img{transform:none}
.am-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g)}
.am-grid4 .slot{aspect-ratio:4/5}
.am-grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--g)}
.am-grid5.tees .slot{aspect-ratio:4/5}
.am-grid5.bottles .slot{aspect-ratio:3/4}
.am-caps{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g)}
.am-caps .slot{width:calc((100% - 3 * var(--g)) / 4);aspect-ratio:3/4}
.am-band{display:grid;grid-template-columns:1fr 1.5fr;gap:var(--g)}
.am-band .slot:first-child{aspect-ratio:3/4}
.am-band .slot:last-child{height:100%}
.am-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g)}
.am-cards .slot{aspect-ratio:16/10}
.am-cards .slot.wide{grid-column:1 / -1;aspect-ratio:16/8}
.am-stamp{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--g)}
.am-stamp .slot{grid-column:span 2;aspect-ratio:4/5}
.am-stamp .slot.wide2{grid-column:span 3;aspect-ratio:16/9}
@media(max-width:860px){
  .am-grid4,.am-grid5{grid-template-columns:repeat(2,1fr)}
  .am-caps .slot{width:calc((100% - var(--g)) / 2)}
  .am-band{grid-template-columns:1fr}.am-band .slot:last-child{height:auto;aspect-ratio:16/10}
  .am-cards{grid-template-columns:1fr}.am-cards .slot,.am-cards .slot.wide{grid-column:auto;aspect-ratio:16/10}
  .am-stamp{grid-template-columns:1fr 1fr}.am-stamp .slot{grid-column:span 1}.am-stamp .slot.wide2{grid-column:1 / -1}
}

.lk-wide .sig{height:100%;width:auto;max-width:100%;display:block}

/* the pack film runs edge to edge: no oat bands above or below it */
.full.slot.film{margin-top:0}
.full.slot.film + .shelf{margin-top:0}

/* hero: a typographic teaser that melts "The Conscious Bar" into "Rebrand"; nothing of the new bar is shown yet */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#heroMelt{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease}
#heroMelt.on{opacity:1}
.hero-eyebrow{z-index:3}
.scroll-cue{mix-blend-mode:normal;color:var(--oat)}

/* colourway switchers: a full-bleed photo and nothing but the colour dots, bottom right */
.am.cw{padding:0;background:none;gap:0;margin-top:0}
.cw-stage{position:relative;overflow:hidden;margin:0;width:100%;height:clamp(460px,100svh,1100px);background:var(--cacao);cursor:pointer}
.cw-ph{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.cw-ph.on{opacity:1}
.cw-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cw-ph .cw-bg{display:none;filter:blur(46px) saturate(1.1);transform:scale(1.25)}
.cw-ph.contain .cw-bg{display:block}
.cw-ph.contain .cw-fg{object-fit:contain}
.cw-sw{position:absolute;right:clamp(18px,3vw,44px);bottom:clamp(18px,3vw,40px);display:flex;gap:clamp(7px,.8vw,11px);z-index:3}
.cw-dot{width:clamp(22px,2vw,30px);height:clamp(22px,2vw,30px);border-radius:50%;background:var(--c);border:0;cursor:pointer;padding:0;box-shadow:0 0 0 1.2px rgba(255,255,255,.8),0 2px 10px rgba(0,0,0,.26);transition:transform .3s var(--ease),box-shadow .3s ease}
.cw-dot:hover{transform:scale(1.1)}
.cw-dot.on{box-shadow:0 0 0 1.5px rgba(0,0,0,.35),0 0 0 3.5px #fff,0 2px 12px rgba(0,0,0,.3)}
.cw-dot:focus-visible{outline:2px solid var(--honey);outline-offset:5px}
@media(max-width:760px){.cw-stage{height:min(100svh,125vw)}}
@media(prefers-reduced-motion:reduce){.cw-ph{transition:none}}

/* the explanatory copy now sits on the mockup itself */
.cw-stage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 0% 0%,rgba(20,8,4,.74),rgba(20,8,4,0) 74%)}
.cw-copy{position:absolute;z-index:2;left:var(--pad);top:clamp(96px,13vh,150px);max-width:min(520px,64vw);color:var(--oat);pointer-events:none;text-shadow:0 1px 18px rgba(20,8,4,.35)}
.cw-copy .label{display:block;margin-bottom:12px;opacity:.85}
.cw-copy h3{font-size:clamp(30px,4vw,64px);letter-spacing:-.025em;line-height:1.02;margin-bottom:16px}
.cw-copy p{max-width:30ch;font-size:clamp(14px,1.2vw,18px);opacity:.92}
@media(max-width:760px){.cw-copy{top:84px;max-width:86vw}}

/* the kraft-box stamp mockup runs edge to edge, flush with the switcher above and the next section below */
.cw-full{width:100%;margin:0;aspect-ratio:16/9;max-height:100svh;background:var(--cacao)}
.cw-full img{width:100%;height:100%;object-fit:cover}