/* ==========================================================================
   SPOOKY  launch site
   One yellow brand. Navy and cocoa do the talking, red marks the protein bar, cream keeps it warm.
   Motion: GSAP + ScrollTrigger + Lenis. Everything below reads fine without JS.
   ========================================================================== */
:root{
  --navy:#001A35; --navy-2:#0A2747; --navy-3:#12345C; --cream:#FBEFD9; --paper:#FDF7EC;
  --gold:#FDBE21; --red:#C8141E; --cocoa:#3B1A0B; --choc:#3B1A0B; --navy-c:#0E2F57;
  --ink:#001A35; --ink-soft:#3A4A63; --soft:#C9D2E1; --line:rgba(0,26,53,.14); --line-l:rgba(251,239,217,.16);
  --f:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fd:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --gutL:max(clamp(20px,4vw,56px), env(safe-area-inset-left,0px));
  --gutR:max(clamp(20px,4vw,56px), env(safe-area-inset-right,0px));
  --max:1440px; --ease:cubic-bezier(.22,1,.36,1); --r:28px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0; background:var(--cream); color:var(--ink); font-family:var(--f); font-weight:400; font-size:18px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px}
::selection{background:var(--gold); color:var(--navy)}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding-left:var(--gutL); padding-right:var(--gutR)}
.disp{font-family:var(--fd); font-weight:800; line-height:.9; letter-spacing:-.005em; margin:0; text-wrap:balance}
.h2{font-size:clamp(48px,7.4vw,124px)}
.h3{font-size:clamp(34px,4vw,60px)}
.lead{font-size:clamp(19px,1.55vw,23px); font-weight:500; line-height:1.48; max-width:32em; margin:0}
p{max-width:38em}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:14px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 22px}
.eyebrow svg{width:14px; height:14px; fill:currentColor}
.spark{fill:currentColor}
.line{display:block}

svg.ic{width:1.1em; height:1.1em; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
/* grain: a whisper of print texture on the dark sections */
.grain{position:relative; isolation:isolate}
.grain::after{content:none; display:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- buttons ---------- */
.btn{position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 28px; border-radius:999px; border:0; cursor:pointer;
  font-weight:700; font-size:17px; text-decoration:none; background:var(--navy); color:var(--cream); white-space:nowrap; will-change:transform}
.btn-t{display:inline-block; overflow:hidden; height:1.25em; line-height:1.25}
.btn-t>span{display:block; text-shadow:0 1.25em 0 currentColor; transition:transform .55s var(--ease)}
.btn:hover .btn-t>span,.btn:focus-visible .btn-t>span{transform:translateY(-1.25em)}
.btn .arr{width:18px; height:18px; transition:transform .45s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-gold{background:var(--gold); color:var(--navy)}
.btn-cream{background:var(--cream); color:var(--navy)}
.btn-ghost{background:transparent; box-shadow:inset 0 0 0 2px currentColor; color:inherit}
.tlink{display:inline-flex; align-items:center; gap:10px; font-weight:700; text-decoration:none; padding:12px 0; position:relative}
.tlink::after{content:""; position:absolute; left:0; right:0; bottom:8px; height:2px; background:currentColor; transform-origin:right; transform:scaleX(1); transition:transform .5s var(--ease)}
.tlink:hover::after{transform-origin:left; animation:uline .7s var(--ease)}
@keyframes uline{0%{transform:scaleX(1); transform-origin:right}49%{transform:scaleX(0); transform-origin:right}50%{transform:scaleX(0); transform-origin:left}100%{transform:scaleX(1); transform-origin:left}}

/* ---------- header ---------- */
.hd{position:fixed; z-index:60; top:0; left:0; right:0; padding:14px var(--gutR) 0 var(--gutL); padding-top:max(14px, env(safe-area-inset-top,0px)); transition:transform .6s var(--ease); pointer-events:none}
.hd-bar{pointer-events:auto; max-width:calc(var(--max) - 40px); margin:0 auto; display:flex; align-items:center; gap:28px; min-height:68px; padding:0 10px 0 22px; border-radius:999px; color:var(--hd-ink, var(--cream)); transition:background .45s ease, box-shadow .45s ease, color .45s ease}
body[data-hd="navy"]{--hd-ink:var(--navy)}
body[data-hd="navy"] .hd:not(.is-solid) .btn-gold{background:var(--navy); color:var(--cream)}
.hd.is-solid .hd-bar{background:rgba(251,239,217,.84); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); box-shadow:0 10px 40px -12px rgba(0,26,53,.35), inset 0 0 0 1px rgba(0,26,53,.06); color:var(--navy)}
.hd.is-hidden{transform:translateY(-130%)}
.hd-logo{display:block; flex:none}
.hd-logo img{height:44px; width:auto}
.hd-nav{display:flex; gap:6px; margin-left:auto; align-items:center}
.hd-nav a{position:relative; text-decoration:none; font-weight:650; font-size:16px; padding:10px 14px; border-radius:999px; transition:background .3s}
.hd-nav a:hover{background:rgba(127,127,127,.14)}
.hd-nav a[aria-current="page"]::after{content:""; position:absolute; left:50%; bottom:3px; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:currentColor}
.hd .btn{min-height:48px; padding:0 22px; font-size:16px}
.hd-menu{display:none; margin-left:auto; align-items:center; gap:10px; min-height:48px; padding:0 18px; border-radius:999px; border:0; background:var(--navy); color:var(--cream); font-weight:700; cursor:pointer}
.hd-menu i{display:block; width:18px; height:2px; background:currentColor; box-shadow:0 -5px 0 currentColor, 0 5px 0 currentColor}
@media (max-width:1180px){ .hd-nav,.hd .btn{display:none} .hd-menu{display:inline-flex} .hd-logo img{height:38px} .hd-bar{min-height:60px; padding-left:16px; padding-right:6px} }

/* full-screen menu */
.menu{position:fixed; inset:0; z-index:80; background:var(--navy); color:var(--cream); display:flex; flex-direction:column; padding:max(18px, env(safe-area-inset-top,0px)) var(--gutR) max(28px, env(safe-area-inset-bottom,0px)) var(--gutL); visibility:hidden; clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease), visibility 0s .8s}
.menu.is-open{visibility:visible; clip-path:inset(0 0 0 0); transition:clip-path .8s var(--ease)}
.menu-top{display:flex; align-items:center; justify-content:space-between; min-height:60px}
.menu-top img{height:38px; width:auto}
.menu-close{min-height:48px; padding:0 20px; border-radius:999px; border:0; background:var(--cream); color:var(--navy); font-weight:700; cursor:pointer}
.menu-links{margin:auto 0; display:flex; flex-direction:column}
.menu-links a{display:flex; align-items:baseline; justify-content:space-between; gap:20px; text-decoration:none; padding:10px 0; border-bottom:1px solid var(--line-l); overflow:hidden}
.menu-links b{font-family:var(--fd); font-weight:800; font-size:clamp(52px,14vw,120px); line-height:.95; transition:color .3s}
.menu-links span{font-weight:600; color:var(--soft)}
.menu-links a:hover b{color:var(--gold)}
.menu .btn{align-self:flex-start; margin-top:28px}

/* ---------- cursor ---------- */
.cursor{position:fixed; z-index:300; left:0; top:0; pointer-events:none; display:none; opacity:0}
.has-cursor .cursor{display:block}
.cursor-ring{position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; border:1.5px solid rgba(0,26,53,.55); display:grid; place-items:center; transition:width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background .3s, border-color .3s}
.cursor-dot{position:absolute; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--navy)}
.cursor-label{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); opacity:0; transition:opacity .2s}
.cursor.on-dark .cursor-ring{border-color:rgba(251,239,217,.6)} .cursor.on-dark .cursor-dot{background:var(--cream)}
.cursor.is-link .cursor-ring{width:64px; height:64px; margin:-32px 0 0 -32px; background:rgba(253,190,33,.22); border-color:transparent}
.cursor.is-label .cursor-ring{width:104px; height:104px; margin:-52px 0 0 -52px; background:var(--gold); border-color:transparent}
.cursor.is-label .cursor-label{opacity:1}
.cursor.is-label .cursor-dot{opacity:0}

/* ---------- loader & page curtain ---------- */
.loader{position:fixed; inset:0; z-index:250; background:var(--navy); color:var(--cream); display:none; place-items:center}
.first-visit .loader{display:grid}
.rm .loader{display:none!important}
.loader-moon{position:absolute; width:min(52vmin,440px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 36% 32%, #FFE08A, var(--gold) 52%, #E39A00); box-shadow:0 0 120px 30px rgba(253,190,33,.28); transform:scale(0)}
.loader-logo{position:relative; width:min(62vw,520px); height:auto; opacity:0}
.loader-count{position:absolute; left:var(--gutL); bottom:max(28px, env(safe-area-inset-bottom,0px)); font-family:var(--fd); font-weight:800; font-size:clamp(64px,10vw,140px); line-height:.8}
.loader-note{position:absolute; right:var(--gutR); bottom:max(34px, env(safe-area-inset-bottom,0px)); font-weight:600; color:var(--soft)}
.curtain{position:fixed; inset:0; z-index:240; pointer-events:none; display:grid}
.curtain i{grid-area:1/1; transform:scaleY(0); transform-origin:bottom}
.curtain .c1{background:var(--gold)} .curtain .c2{background:var(--cream)} .curtain .c3{background:var(--red)} .curtain .c4{background:var(--cocoa)} .curtain .c5{background:var(--navy); display:grid; place-items:center}
.curtain .c5 img{width:min(46vw,360px); height:auto}
.is-entering .curtain i{transform:scaleY(1)}

/* ---------- HOME: hero ---------- */
.hero{position:relative; height:100svh; min-height:680px; background:radial-gradient(120% 90% at 72% 40%, #0A2E58 0%, var(--navy) 55%, #000C1C 100%); color:var(--cream); overflow:hidden}
.hero-gl{position:absolute; inset:0; z-index:0}
.hero-gl canvas{display:block; width:100%!important; height:100%!important}
.moon-anchor{position:absolute; z-index:0; right:calc(var(--gutR) + 13vw); top:20%; width:min(30vw,500px); aspect-ratio:1; margin-right:max(0px, calc((100vw - var(--max))/2)); border-radius:50%; pointer-events:none; opacity:0}
.no-webgl .moon-anchor,.no-gsap .moon-anchor{opacity:1; background:radial-gradient(circle at 36% 32%, #FFE08A, var(--gold) 52%, #E39A00); box-shadow:0 0 140px 40px rgba(253,190,33,.25)}
.hero-inner{position:relative; z-index:2; height:100%; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center; padding-top:90px}
.hero-title{font-size:clamp(68px,8.4vw,164px); color:#FFFFFF}
.hero-title .w2{display:block; color:var(--gold)}
.hero-copy .lead{color:#D6DDE9; margin-top:30px; max-width:25em}
.hero-cta{display:flex; align-items:center; gap:22px 28px; margin-top:38px; flex-wrap:wrap}
.hero-cta .tlink{color:var(--cream)}
.hero-prods{position:relative; height:min(80vh,780px); justify-self:stretch; margin-right:-2vw}
.hp-item{position:absolute; will-change:transform}
.hp-item img{width:100%; height:auto; filter:drop-shadow(0 40px 50px rgba(0,0,0,.45)); will-change:transform}
.hp-whey{width:38%; left:4%; bottom:15%; z-index:2; rotate:-4deg}
.hp-cereal{width:42%; left:55%; bottom:13%; z-index:1; rotate:5deg}
.hp-shake{width:24%; left:37%; bottom:7%; z-index:4}
.hp-bar{width:44%; left:-2%; bottom:1%; z-index:5; rotate:-9deg}
.hp-jar{width:17%; left:70%; bottom:3%; z-index:5; rotate:4deg}
.hero-plinth{position:absolute; left:8%; right:2%; bottom:3%; height:9%; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent); z-index:1}
.hero-foot{position:absolute; z-index:3; left:0; right:0; bottom:0; padding-bottom:max(26px, env(safe-area-inset-bottom,0px))}
.hero-foot .wrap{display:flex; justify-content:space-between; align-items:flex-end; gap:20px}
.scroll-cue{display:flex; align-items:center; gap:14px; font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--soft)}
.scroll-cue i{position:relative; display:block; width:2px; height:46px; background:rgba(251,239,217,.22); overflow:hidden}
.scroll-cue i::after{content:""; position:absolute; left:0; top:-50%; width:100%; height:50%; background:var(--gold); animation:cue 2.2s var(--ease) infinite}
@keyframes cue{to{top:100%}}
.clock{text-decoration:none; color:inherit; display:flex; align-items:center; gap:14px; padding:10px 18px 10px 12px; border-radius:999px; background:rgba(251,239,217,.08); box-shadow:inset 0 0 0 1px var(--line-l); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.clock-dot{width:34px; height:34px; border-radius:50%; background:var(--gold); display:grid; place-items:center}
.clock-dot svg{width:16px; height:16px; fill:var(--navy)}
.clock small{display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); font-weight:700}
.clock b{display:block; font-size:16px; line-height:1.25}
@media (max-width:900px){
  .hero{height:auto; min-height:100svh}
  .hero-inner{grid-template-columns:1fr; align-content:start; padding-top:max(108px, calc(env(safe-area-inset-top,0px) + 96px)); padding-bottom:120px}
  .hero-title{font-size:clamp(56px,16.5vw,120px)}
  .hero-prods{height:auto; aspect-ratio:1/0.92; margin-top:18px; order:2}
  .moon-anchor{right:auto; left:50%; margin:0 0 0 -34vw; width:68vw; top:auto; bottom:calc(150px + 26vw)}
  .hero-foot .scroll-cue{display:none}
  .hero-foot .wrap{justify-content:flex-start}
}

/* ---------- ticker ---------- */
.ticker{position:relative; height:clamp(230px,22vw,320px); background:var(--cream); overflow:hidden; display:grid; place-items:center}
.band{position:absolute; left:-6%; right:-6%; top:50%; display:flex; align-items:center; overflow:hidden; white-space:nowrap; height:clamp(70px,6.6vw,100px); margin-top:calc(clamp(70px,6.6vw,100px) / -2)}
.band-a{background:var(--gold); color:var(--navy); rotate:-3deg; z-index:2; box-shadow:0 18px 40px -20px rgba(0,26,53,.45)}
.band-b{background:var(--navy); color:#FFFFFF; rotate:3deg; z-index:1}
.track{display:flex; align-items:center; flex:none; will-change:transform}
.track span{display:inline-flex; align-items:center; gap:clamp(22px,2.4vw,40px); padding-right:clamp(22px,2.4vw,40px); font-family:var(--fd); font-weight:900; font-size:clamp(30px,3.6vw,54px); line-height:1; text-transform:uppercase; letter-spacing:.02em}
.track em{font-style:normal; display:block; line-height:1; padding-top:.06em; text-box:trim-both cap alphabetic}
.track svg{width:.5em; height:.5em; flex:none; display:block}
.band-a svg{fill:var(--navy)} .band-b svg{fill:var(--gold)}

/* ---------- manifesto ---------- */
.manifesto{padding-block:clamp(110px,14vw,200px)}
.manifesto .eyebrow{color:var(--ink-soft)}
.mani{font-family:var(--fd); font-weight:800; font-size:clamp(44px,6.4vw,112px); line-height:.98; letter-spacing:-.01em; margin:0; max-width:15em; text-wrap:pretty}
.mani em{font-style:normal; position:relative; white-space:nowrap; display:inline-block; padding:0 .08em; margin:0 -.04em; z-index:0}
.mani em::before{content:""; position:absolute; z-index:-1; left:0; right:0; top:.16em; bottom:.02em; border-radius:.16em; background:var(--hl); transform:scaleX(var(--s,1)); transform-origin:left}
.js-motion .mani em::before{--s:0; transition:transform .9s var(--ease)}
.js-motion .mani em.on::before{--s:1}
.mani .e1{--hl:var(--gold)} .mani .e2{--hl:var(--red); color:var(--cream)} .mani .e3{--hl:var(--navy); color:var(--cream)}
.mani-foot{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-top:64px; flex-wrap:wrap}
.mani-foot p{margin:0; color:var(--ink-soft)}
.mini-row{display:flex; gap:14px}
.mini-row span{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:15px}

/* ---------- pinned hours ---------- */
.hours-pin{position:relative; background:#E7B33D}
.hp-stage{position:relative; height:100svh; min-height:560px; overflow:hidden; background:#E7B33D; color:var(--navy)}
.hp-pics{position:absolute; inset:0}
.hp-pic{position:absolute; inset:0; margin:0; overflow:hidden}
.hp-pic img{width:100%; height:100%; object-fit:contain; object-position:100% 100%; -webkit-mask-image:linear-gradient(to right, transparent 0, #000 22%); mask-image:linear-gradient(to right, transparent 0, #000 22%)}
.js-motion .hp-pic + .hp-pic{clip-path:inset(100% 0 0 0)}
.hp-copy{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center; pointer-events:none}
.hp-copy a{pointer-events:auto}
.hp-pre{display:block; font-family:var(--fd); font-weight:700; font-size:clamp(24px,2.5vw,38px); line-height:1.1; margin:0 0 6px}
.hp-title{margin:0}
.hp-words{position:relative; display:block; height:.98em; overflow:hidden; font-family:var(--fd); font-weight:800; font-size:clamp(84px,12.5vw,220px); line-height:.98; letter-spacing:-.015em; width:5em}
.hp-word{position:absolute; left:0; top:0; display:block; white-space:nowrap}
.hp-links{position:relative; height:52px; margin-top:22px}
.hp-links a{position:absolute; left:0; top:0}
.js-motion .hp-links a + a{opacity:0; visibility:hidden}
.hp-progress{position:absolute; z-index:3; left:var(--gutL); right:var(--gutR); bottom:max(28px, env(safe-area-inset-bottom,0px)); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; max-width:860px; margin:0; padding:0; list-style:none; font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase}
.hp-progress li{display:flex; flex-direction:column; gap:10px}
.hp-progress i{display:block; height:3px; background:rgba(0,26,53,.2); border-radius:3px; overflow:hidden}
.hp-progress i b{display:block; height:100%; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left}
.no-js-motion .hp-progress{display:none}
@media (max-width:760px){
  .hp-pics{top:auto; height:54%}
  .hp-pic img{object-position:50% 100%; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16%); mask-image:linear-gradient(to bottom, transparent 0, #000 16%)}
  .hp-copy{justify-content:flex-start; padding-top:max(104px, calc(env(safe-area-inset-top,0px) + 92px)); bottom:54%}
  .hp-words{font-size:clamp(72px,21vw,120px)}
  .hp-progress{bottom:auto; top:calc(46% - 34px); font-size:12px}
}

/* ---------- lineup cards ---------- */
.lineup{padding-block:clamp(120px,13vw,190px) clamp(110px,12vw,170px); background:var(--cream)}
.lineup-head{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; align-items:end; margin-bottom:clamp(90px,10vw,150px)}
.lineup-head .lead{color:var(--ink-soft)}
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,30px)}
.card{display:block; text-decoration:none; color:var(--navy); perspective:1100px}
.card-in{position:relative; aspect-ratio:3/3.9; border-radius:var(--r); transform-style:preserve-3d; will-change:transform; transition:box-shadow .5s}
.card:hover .card-in{box-shadow:0 40px 70px -30px rgba(0,26,53,.55)}
.card-bg{position:absolute; inset:0; border-radius:var(--r); overflow:hidden; background:var(--cc)}
.card-num{position:absolute; left:50%; top:46%; translate:-50% -50%; font-family:var(--fd); font-weight:900; font-size:clamp(150px,17vw,300px); line-height:.8; color:transparent; -webkit-text-stroke:2px rgba(0,26,53,.28); white-space:nowrap; letter-spacing:-.03em}
.card-wave{position:absolute; left:-2%; right:-2%; bottom:-1px; width:104%; height:34%; fill:var(--navy)}
.card-prod{position:absolute; left:50%; bottom:30%; width:var(--pw,52%); translate:-50% 0; transform:translateZ(70px); filter:drop-shadow(0 30px 34px rgba(0,26,53,.38)); pointer-events:none}
.card-extra{position:absolute; width:26%; right:9%; bottom:27%; transform:translateZ(110px); filter:drop-shadow(0 18px 20px rgba(0,26,53,.35)); pointer-events:none}
.card-meta{position:absolute; left:26px; right:26px; bottom:22px; color:var(--cream); transform:translateZ(40px); display:flex; justify-content:space-between; align-items:flex-end; gap:14px}
.card-meta b{display:block; font-family:var(--fd); font-weight:800; font-size:clamp(28px,2.4vw,38px); line-height:1}
.card-meta div span{display:block; margin-top:6px; font-size:16px; color:var(--soft)}
.card-meta .card-go{flex:none; width:52px; height:52px; border-radius:50%; background:var(--cc); color:var(--navy); display:grid; place-items:center; transition:transform .5s var(--ease)}
.card-go svg{width:20px; height:20px}
.card:hover .card-go{transform:rotate(-45deg) scale(1.08)}
.c-gold{--cc:var(--gold)} .c-red{--cc:var(--red)} .c-navy{--cc:var(--navy-c)} .c-cocoa{--cc:var(--cocoa)}
.c-red .card-num,.c-navy .card-num,.c-cocoa .card-num{-webkit-text-stroke-color:rgba(251,239,217,.34)}
.c-navy .card-go,.c-cocoa .card-go,.c-red .card-go{background:var(--gold)}
.card-prod{--pw:80%; bottom:27%}
.c-cocoa .card-prod{--pw:66%}
.card-num small{font-size:.32em; letter-spacing:.02em; -webkit-text-stroke-width:1.5px; margin-left:.06em}
@media (max-width:980px){ .lineup-head{grid-template-columns:1fr} .cards{grid-template-columns:1fr; max-width:520px; margin:0 auto; gap:80px} }

/* ---------- trick ---------- */
.trick{background:var(--paper); padding-block:clamp(110px,12vw,180px) 0; overflow:hidden}
.trick-head{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px; align-items:end}
.trick-head p{margin:0}
.trick-head .lead + p{margin-top:20px; color:var(--ink-soft)}
.trick-media{position:relative; margin-top:clamp(64px,7vw,110px); padding-bottom:clamp(110px,12vw,180px)}
.trick-frame{margin:0 auto; width:100%; overflow:hidden; border-radius:var(--r); will-change:clip-path}
.trick-frame img{width:100%; aspect-ratio:1376/768; object-fit:cover; will-change:transform}
.badge{position:absolute; z-index:4; width:clamp(118px,12vw,176px); aspect-ratio:1; border-radius:50%; background:var(--navy); color:var(--cream); display:grid; place-items:center}
.badge svg.ring{position:absolute; inset:0; width:100%; height:100%; animation:spin 18s linear infinite}
.badge text{font-family:var(--f); font-weight:800; font-size:15px; letter-spacing:.12em; text-transform:uppercase; fill:currentColor}
.badge .core{width:34%; height:34%; fill:var(--gold)}
.badge .core-t{position:relative; font-family:var(--fd); font-weight:800; font-size:clamp(30px,3vw,44px); line-height:1; color:var(--gold)}
@keyframes spin{to{rotate:360deg}}
.rm .badge svg.ring{animation:none}
.trick .badge{right:max(var(--gutR), calc((100vw - var(--max))/2 + 40px)); top:-6%}
@media (max-width:900px){ .trick-head{grid-template-columns:1fr; gap:28px} .trick .badge{top:-60px} }

/* ---------- out after dark (horizontal) ---------- */
.night{position:relative; background:var(--navy); color:var(--cream); overflow:hidden}
.night::before{content:""; position:absolute; left:0; top:0; width:2px; height:2px; border-radius:50%; box-shadow:1326px 154px #FBEFD9,1617px 666px #FBEFD9,197px 74px #FBEFD9,2194px 96px #FBEFD9,1497px 596px #FBEFD9,237px 519px #FBEFD9,879px 38px #FBEFD9,352px 444px #FBEFD9,1712px 71px #FBEFD9,985px 92px #FBEFD9,2257px 434px #FBEFD9,242px 579px #FBEFD9,507px 228px #FBEFD9,2387px 63px #FBEFD9,2363px 599px #FBEFD9,1624px 50px #FBEFD9,905px 47px #FBEFD9,2280px 136px #FBEFD9,1186px 429px #FBEFD9,590px 553px #FBEFD9,482px 584px #FBEFD9,1263px 573px #FBEFD9,740px 105px #FBEFD9,2382px 584px #FBEFD9,769px 381px #FBEFD9,399px 560px #FBEFD9,257px 577px #FBEFD9,244px 633px #FBEFD9,843px 508px #FBEFD9,2177px 437px #FBEFD9,1286px 476px #FBEFD9,2398px 464px #FBEFD9,1481px 306px #FBEFD9,1017px 184px #FBEFD9,999px 83px #FBEFD9,2352px 307px #FBEFD9,2151px 506px #FBEFD9,1406px 459px #FBEFD9,1179px 623px #FBEFD9,299px 120px #FBEFD9,2096px 428px #FBEFD9,675px 350px #FBEFD9,622px 500px #FBEFD9,1727px 40px #FBEFD9,317px 571px #FBEFD9,2347px 321px #FBEFD9,1393px 358px #FBEFD9,2034px 593px #FBEFD9,1868px 70px #FBEFD9,383px 276px #FBEFD9,1941px 680px #FBEFD9,266px 62px #FBEFD9,1268px 662px #FBEFD9,2367px 697px #FBEFD9,1825px 291px #FBEFD9,1580px 684px #FBEFD9,1421px 23px #FBEFD9,1891px 363px #FBEFD9,688px 625px #FBEFD9,479px 505px #FBEFD9,241px 223px #FBEFD9,1177px 132px #FBEFD9,1014px 407px #FBEFD9,1601px 508px #FBEFD9,330px 170px #FBEFD9,1839px 411px #FBEFD9,2250px 284px #FBEFD9,560px 440px #FBEFD9,2253px 285px #FBEFD9,1701px 367px #FBEFD9; opacity:.55; animation:tw 4s ease-in-out infinite alternate}
.night::after{content:""; position:absolute; left:0; top:0; width:2px; height:2px; border-radius:50%; box-shadow:104px 72px rgba(253,190,33,.8),851px 628px rgba(253,190,33,.8),1541px 152px rgba(253,190,33,.8),1033px 355px rgba(253,190,33,.8),1491px 485px rgba(253,190,33,.8),503px 118px rgba(253,190,33,.8),1999px 477px rgba(253,190,33,.8),1967px 495px rgba(253,190,33,.8),1277px 87px rgba(253,190,33,.8),590px 104px rgba(253,190,33,.8),1403px 271px rgba(253,190,33,.8),1960px 165px rgba(253,190,33,.8),2114px 23px rgba(253,190,33,.8),840px 540px rgba(253,190,33,.8),1481px 150px rgba(253,190,33,.8),2224px 27px rgba(253,190,33,.8),2163px 305px rgba(253,190,33,.8),372px 267px rgba(253,190,33,.8),2123px 375px rgba(253,190,33,.8),684px 364px rgba(253,190,33,.8),912px 545px rgba(253,190,33,.8),2218px 514px rgba(253,190,33,.8),1350px 651px rgba(253,190,33,.8),913px 627px rgba(253,190,33,.8),799px 245px rgba(253,190,33,.8),1641px 232px rgba(253,190,33,.8),818px 530px rgba(253,190,33,.8),2018px 364px rgba(253,190,33,.8),118px 28px rgba(253,190,33,.8),1144px 483px rgba(253,190,33,.8),1061px 198px rgba(253,190,33,.8),1410px 457px rgba(253,190,33,.8),1431px 373px rgba(253,190,33,.8),329px 225px rgba(253,190,33,.8),418px 232px rgba(253,190,33,.8),1925px 201px rgba(253,190,33,.8),1383px 209px rgba(253,190,33,.8),1976px 639px rgba(253,190,33,.8),7px 490px rgba(253,190,33,.8),1409px 658px rgba(253,190,33,.8); opacity:.4; animation:tw 5.5s ease-in-out infinite alternate-reverse}
@keyframes tw{from{opacity:.15} to{opacity:.7}}
.night-pin{position:relative; z-index:1; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:120px 90px}
.night-track{display:flex; align-items:center; gap:clamp(22px,2.6vw,40px); padding-left:var(--gutL); padding-right:var(--gutR); width:max-content; will-change:transform}
.night-intro{flex:none; width:min(80vw,520px); padding-right:3vw}
.night-intro .lead{color:var(--soft); margin-top:22px}
.night-hint{display:inline-flex; align-items:center; gap:12px; margin-top:34px; font-weight:700; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
.night-hint svg{width:22px; height:22px}
.nc{flex:none; margin:0; position:relative}
.nc .nc-ph{overflow:hidden; border-radius:22px; height:var(--h,62vh)}
.nc img{height:100%; width:100%; object-fit:cover}
.nc.p{--h:min(64vh,640px)} .nc.p .nc-ph{aspect-ratio:896/1200}
.nc.s .nc-ph{aspect-ratio:1; --h:min(50vh,500px)}
.nc.l .nc-ph{aspect-ratio:1376/768; --h:min(52vh,520px)}
.nc.m .nc-ph{aspect-ratio:1200/896; --h:min(54vh,540px)}
.nc.d{align-self:flex-end} .nc.u{align-self:flex-start}
.nc figcaption{display:flex; gap:14px; align-items:baseline; margin-top:16px; font-size:17px; color:#E6EBF3}
.nc figcaption b{font-family:var(--fd); font-weight:800; color:var(--gold); font-size:22px}
.night-bar{position:absolute; left:var(--gutL); right:var(--gutR); bottom:40px; height:2px; background:var(--line-l); z-index:2}
.night-bar i{display:block; height:100%; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left}
@media (max-width:900px){
  .night-pin{min-height:0; padding-block:110px 80px}
  .night-track{width:auto; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:16px; align-items:flex-start; scrollbar-width:none}
  .night-track::-webkit-scrollbar{display:none}
  .night-intro{width:82vw}
  .nc,.night-intro{scroll-snap-align:start}
  .night-hint{display:none}
  .nc .nc-ph{height:auto!important; width:min(78vw,380px)}
  .nc.l .nc-ph{width:min(86vw,520px)}
  .nc img,.nc.p img,.nc.s img,.nc.l img,.nc.m img{width:100%; height:100%}
  .nc.m .nc-ph{width:min(86vw,520px)}
  .nc.d,.nc.u{align-self:auto}
  .night-bar{display:none}
}

/* ---------- finale ---------- */
.finale{background:var(--cream); padding-block:clamp(100px,10vw,150px)}
.finale-frame{position:relative; overflow:hidden; will-change:clip-path}
.finale-frame img{width:100%; height:auto}

/* ---------- footer ---------- */
.ft{position:relative; isolation:isolate; background:var(--navy); color:var(--cream); overflow:hidden; min-height:100svh; display:flex; flex-direction:column}
.ft-sky{position:absolute; inset:0; z-index:-2}
.ft-sky img{width:100%; height:100%; object-fit:cover; object-position:50% 100%}
.ft-stars{position:absolute; inset:0; z-index:-1; pointer-events:none}
.ft-stars::before,.ft-stars::after{content:""; position:absolute; left:0; top:0; width:2px; height:2px; border-radius:50%}
.ft-stars::before{box-shadow:1326px 154px #FBEFD9,1617px 666px #FBEFD9,197px 74px #FBEFD9,2194px 96px #FBEFD9,1497px 596px #FBEFD9,237px 519px #FBEFD9,879px 38px #FBEFD9,352px 444px #FBEFD9,1712px 71px #FBEFD9,985px 92px #FBEFD9,2257px 434px #FBEFD9,242px 579px #FBEFD9,507px 228px #FBEFD9,2387px 63px #FBEFD9,2363px 599px #FBEFD9,1624px 50px #FBEFD9,905px 47px #FBEFD9,2280px 136px #FBEFD9,1186px 429px #FBEFD9,590px 553px #FBEFD9,482px 584px #FBEFD9,1263px 573px #FBEFD9,740px 105px #FBEFD9,2382px 584px #FBEFD9,769px 381px #FBEFD9,399px 560px #FBEFD9,257px 577px #FBEFD9,244px 633px #FBEFD9,843px 508px #FBEFD9,2177px 437px #FBEFD9,1286px 476px #FBEFD9,2398px 464px #FBEFD9,1481px 306px #FBEFD9,1017px 184px #FBEFD9,999px 83px #FBEFD9,2352px 307px #FBEFD9,2151px 506px #FBEFD9,1406px 459px #FBEFD9,1179px 623px #FBEFD9,299px 120px #FBEFD9,2096px 428px #FBEFD9,675px 350px #FBEFD9,622px 500px #FBEFD9,1727px 40px #FBEFD9,317px 571px #FBEFD9,2347px 321px #FBEFD9,1393px 358px #FBEFD9,2034px 593px #FBEFD9,1868px 70px #FBEFD9,383px 276px #FBEFD9,1941px 680px #FBEFD9,266px 62px #FBEFD9,1268px 662px #FBEFD9,2367px 697px #FBEFD9,1825px 291px #FBEFD9,1580px 684px #FBEFD9,1421px 23px #FBEFD9,1891px 363px #FBEFD9,688px 625px #FBEFD9,479px 505px #FBEFD9,241px 223px #FBEFD9,1177px 132px #FBEFD9,1014px 407px #FBEFD9,1601px 508px #FBEFD9,330px 170px #FBEFD9,1839px 411px #FBEFD9,2250px 284px #FBEFD9,560px 440px #FBEFD9,2253px 285px #FBEFD9,1701px 367px #FBEFD9; animation:tw 3.6s ease-in-out infinite alternate}
.ft-stars::after{box-shadow:1558px 236px rgba(253,190,33,.9),618px 84px rgba(253,190,33,.9),721px 154px rgba(253,190,33,.9),950px 674px rgba(253,190,33,.9),955px 12px rgba(253,190,33,.9),1986px 603px rgba(253,190,33,.9),746px 269px rgba(253,190,33,.9),1154px 4px rgba(253,190,33,.9),596px 429px rgba(253,190,33,.9),2189px 378px rgba(253,190,33,.9),2319px 326px rgba(253,190,33,.9),514px 527px rgba(253,190,33,.9),221px 467px rgba(253,190,33,.9),2290px 401px rgba(253,190,33,.9),1630px 408px rgba(253,190,33,.9),1614px 106px rgba(253,190,33,.9),1972px 649px rgba(253,190,33,.9),1640px 63px rgba(253,190,33,.9),780px 68px rgba(253,190,33,.9),855px 451px rgba(253,190,33,.9),664px 112px rgba(253,190,33,.9),1392px 615px rgba(253,190,33,.9),215px 104px rgba(253,190,33,.9),0px 580px rgba(253,190,33,.9),619px 549px rgba(253,190,33,.9),415px 372px rgba(253,190,33,.9); animation:tw 5s ease-in-out infinite alternate-reverse}
.ft-main{position:relative; padding-top:clamp(120px,12vw,180px)}
.ft-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(48px,6vw,110px)}
.ft-pill{display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; border-radius:999px; background:rgba(251,239,217,.08); box-shadow:inset 0 0 0 1px var(--line-l); font-weight:700; font-size:14px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:28px}
.ft-pill i{width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(253,190,33,.6); animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(253,190,33,0)} 100%{box-shadow:0 0 0 0 rgba(253,190,33,0)}}
.ft h2{font-size:clamp(60px,8.4vw,150px); color:var(--cream)}
.ft h2 .g{color:var(--gold)}
.ft-lead{color:#D3DAE6; margin-top:26px}
form.join{display:flex; gap:10px; margin-top:38px; max-width:600px; padding:8px; border-radius:999px; background:rgba(251,239,217,.1); box-shadow:inset 0 0 0 1px rgba(251,239,217,.24); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
form.join input{flex:1 1 auto; min-width:0; min-height:54px; border:0; border-radius:999px; background:transparent; padding:0 20px; font:inherit; font-size:18px; color:var(--cream)}
form.join input::placeholder{color:#AEB9CB}
form.join input:focus{outline:none}
form.join:focus-within{box-shadow:inset 0 0 0 2px var(--gold)}
.joined{font-weight:700; font-size:22px; margin:38px 0 0; color:var(--gold)}
.fine{font-size:15px; margin:14px 0 0 8px; color:#AEB9CB}
.ft-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 32px; align-content:start; padding-top:12px}
.ft-cols h3{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#AEB9CB; margin:0 0 16px; font-weight:700}
.ft-cols ul{list-style:none; margin:0; padding:0}
.ft-cols li a{display:inline-flex; align-items:center; gap:12px; text-decoration:none; font-weight:700; font-size:clamp(20px,1.7vw,26px); padding:6px 0; transition:transform .4s var(--ease), color .3s}
.ft-cols li a:hover{transform:translateX(6px); color:var(--gold)}
.ft-cols li a i{width:10px; height:10px; border-radius:50%; background:var(--dot,var(--cream))}
.ft-cols .wide{grid-column:1/-1}
.ft-cols p{margin:0; color:#D3DAE6}
.ft-base{position:relative; margin-top:auto; padding-top:80px}
.ft-row{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid var(--line-l); font-size:15px; color:#E3E8F1; text-shadow:0 1px 12px rgba(0,26,53,.6)}
.totop{display:inline-flex; align-items:center; gap:10px; border:0; background:none; cursor:pointer; font-weight:700; color:var(--cream); padding:10px 0}
.totop span{width:40px; height:40px; border-radius:50%; background:var(--cream); color:var(--navy); display:grid; place-items:center; transition:transform .45s var(--ease)}
.totop:hover span{transform:translateY(-4px)}
.totop svg{width:18px; height:18px}
.ft-logo{position:relative; overflow:hidden; padding:clamp(18px,3vw,40px) 0 0; margin-bottom:calc(-1 * clamp(10px,2.4vw,40px))}
.ft-logo img{width:100%; height:auto; will-change:transform}
@media (max-width:900px){ .ft-grid{grid-template-columns:1fr} form.join{flex-direction:column; border-radius:28px} form.join .btn{width:100%} }

/* ---------- reveal helpers (initial states only when motion is on) ---------- */
.js-motion [data-reveal]{opacity:0; transform:translateY(40px)}
.js-motion .reveal-img{clip-path:inset(100% 0 0 0)}
.reveal-img{overflow:hidden; margin:0; border-radius:var(--r)}
.reveal-img img{width:100%; will-change:transform}
.js-motion .split-hide{visibility:hidden}

/* ---------- PRODUCT PAGES ---------- */
.ph{position:relative; min-height:100svh; overflow:hidden; background:var(--pc); color:var(--navy); display:flex; flex-direction:column}
.ph.t-gold{--pc:var(--gold)} .ph.t-red{--pc:var(--red); color:var(--cream)} .ph.t-navy{--pc:var(--navy); color:var(--cream)} .ph.t-cocoa{--pc:var(--cocoa); color:var(--cream)}
.ph-marq{position:absolute; left:0; right:0; top:50%; translate:0 -58%; z-index:0; display:flex; overflow:hidden; pointer-events:none}
.ph-marq .track span{font-size:clamp(130px,19vw,330px); color:transparent; -webkit-text-stroke:2px rgba(0,26,53,.22); gap:4vw; padding-right:4vw}
.ph.t-red .ph-marq .track span,.ph.t-navy .ph-marq .track span,.ph.t-cocoa .ph-marq .track span{-webkit-text-stroke-color:rgba(251,239,217,.26)}
.ph-marq svg{fill:rgba(0,26,53,.18)} .ph.t-red .ph-marq svg,.ph.t-navy .ph-marq svg,.ph.t-cocoa .ph-marq svg{fill:rgba(251,239,217,.22)}
.ph-grid{position:relative; z-index:2; flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr); align-items:end; gap:32px; padding-top:130px; padding-bottom:max(48px, env(safe-area-inset-bottom,0px))}
.ph-left .kind{font-weight:700; font-size:15px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 16px}
.ph h1{font-size:clamp(58px,6.4vw,116px)}
.ph-stage{position:relative; align-self:stretch; display:flex; align-items:flex-end; justify-content:center; min-height:62vh}
.ph-stage img{position:relative; height:auto; filter:drop-shadow(0 50px 50px rgba(0,26,53,.35)); will-change:transform}
.ph-shadow{position:absolute; left:18%; right:18%; bottom:-2%; height:7%; border-radius:50%; background:radial-gradient(closest-side, rgba(0,26,53,.42), transparent)}
.ph-main{width:min(100%,560px); z-index:2}
.ph.bar .ph-main{width:min(100%,460px)}
.ph.minis .ph-main{width:min(100%,380px)}
.ph-x1,.ph-x2{position:absolute!important; z-index:3}
.ph.bar .ph-x1{width:74%; left:-14%; bottom:3%; rotate:-9deg}
.ph.minis .ph-x1{width:42%; right:-14%; bottom:2%}
.ph.minis .ph-x2{width:44%; left:-16%; bottom:18%; rotate:-14deg}
.claim{display:flex; align-items:flex-end; gap:14px; margin:0 0 22px}
.claim b{font-family:var(--fd); font-weight:900; font-size:clamp(90px,9vw,160px); line-height:.78; letter-spacing:-.02em}
.claim b small{font-size:.5em}
.claim span{font-weight:700; font-size:19px; line-height:1.15; padding-bottom:6px}
.ph-right .lead{max-width:24em}
.ph-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:30px}
.soon{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px}
.soon i{width:8px; height:8px; border-radius:50%; background:currentColor; animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.ph.t-red .btn,.ph.t-navy .btn,.ph.t-cocoa .btn{background:var(--gold); color:var(--navy)}
.ph .badge{right:var(--gutR); top:120px; background:var(--navy)}
@media (max-width:1100px){ .ph-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .ph-stage{grid-column:2; grid-row:1 / span 2} .ph-right{grid-column:1} }
@media (max-width:760px){
  .ph-grid{grid-template-columns:1fr; padding-top:max(110px, calc(env(safe-area-inset-top,0px) + 96px)); gap:20px}
  .ph-stage{grid-column:auto; grid-row:auto; min-height:0; height:62vw; max-height:440px; margin:18px 0 14px}
  .ph .ph-stage img.ph-main{height:100%; width:auto; max-width:none}
  .ph .badge{display:none}
  .ph-marq{top:46%}
}

.taste{padding-block:clamp(110px,12vw,180px)}
.taste-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,100px); align-items:center}
.taste .lead{margin-top:24px}
.facts{margin:40px 0 0; padding:0; list-style:none; max-width:32em}
.facts li{position:relative; display:flex; justify-content:space-between; gap:20px; padding:16px 0; font-size:18px}
.facts li::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); transform-origin:left}
.js-motion .facts li::after{transform:scaleX(0); transition:transform 1s var(--ease)}
.js-motion .facts.on li::after{transform:scaleX(1)}
.facts li:first-child::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--line)}
.facts li span:last-child{font-weight:800; text-align:right}
.note{font-size:15px; color:var(--ink-soft); margin-top:16px}
@media (max-width:900px){ .taste-grid{grid-template-columns:1fr} }

.bleed{position:relative; background:var(--bb,var(--cream)); padding-block:var(--bp,0)}
.bleed-frame{position:relative; margin:0 auto; width:fit-content; max-width:100%; overflow:hidden; border-radius:var(--br,0); will-change:clip-path}
.bleed-frame img{display:block; width:auto; height:auto; max-width:100%; max-height:min(92svh,1000px); will-change:transform}
.bleed.framed{--bp:clamp(40px,5vw,80px); --br:var(--r)}

.wild{padding-block:clamp(110px,12vw,180px)}
.wild-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap}
.wild-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,48px); margin-top:clamp(56px,6vw,90px); align-items:start}
.wild-grid figure{margin:0}
.wild-grid figure:nth-child(2){margin-top:clamp(60px,10vw,160px)}
.wild-grid .reveal-img img{height:auto}
.wild-grid.one{grid-template-columns:minmax(0,1fr)}
.wild-grid.one figure:nth-child(2){margin-top:0}
.wild-grid.one .reveal-img img{aspect-ratio:1200/896}
.wild figcaption{margin-top:16px; color:var(--ink-soft); display:flex; gap:12px}
.wild figcaption b{color:var(--navy)}
@media (max-width:760px){ .wild-grid{grid-template-columns:1fr} .wild-grid figure:nth-child(2){margin-top:0} }

.more{padding-block:clamp(110px,11vw,170px); background:var(--paper)}
.more .cards{grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1240px; margin:clamp(56px,6vw,90px) auto 0}
@media (max-width:1000px){ .more .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .more .cards{grid-template-columns:1fr; gap:80px} }

/* ---------- STORY ---------- */
.s-hero{position:relative; min-height:100svh; display:flex; align-items:center; padding-block:150px 110px; overflow:hidden}
.s-hero h1{font-size:clamp(66px,10.5vw,190px); max-width:7.4em; position:relative; z-index:2}
.s-hero .serious{position:relative; display:inline-block}
.s-hero .scribble{position:absolute; left:-2%; width:104%; bottom:-.12em; height:.34em; overflow:visible; pointer-events:none}
.s-hero .scribble path{fill:none; stroke:var(--red); stroke-width:9; stroke-linecap:round}
.s-hero .lead{margin-top:36px; position:relative; z-index:2; color:var(--ink-soft)}
.s-float{position:absolute; z-index:1; height:auto; filter:drop-shadow(0 30px 30px rgba(0,26,53,.25)); will-change:transform; pointer-events:none}
.sf1{width:clamp(110px,11vw,190px); right:7vw; top:18%; rotate:9deg}
.sf2{width:clamp(170px,17vw,300px); right:20vw; bottom:9%; rotate:-14deg}
.sf3{width:clamp(80px,7vw,120px); right:4vw; bottom:16%}
@media (max-width:900px){ .sf1{top:auto; bottom:6%; right:6vw; width:90px} .sf2{right:auto; left:6vw; bottom:4%; width:170px} .sf3{display:none} .s-hero{padding-bottom:220px} }

.chapters{position:relative; background:var(--cream); color:var(--navy); transition:background .7s ease, color .7s ease}
.chapters.is-navy{background:var(--navy); color:var(--cream)}
.ch-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,100px)}
.ch-media{position:relative}
.ch-sticky{position:sticky; top:0; height:100svh; display:flex; align-items:center}
.ch-frame{position:relative; width:100%; aspect-ratio:4/5; max-height:76svh}
.ch-pic{position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center}
.ch-pic img{width:auto; height:auto; max-width:100%; max-height:100%; border-radius:var(--r)}
.js-motion .ch-pic + .ch-pic{clip-path:inset(100% 0 0 0)}
.ch-count{position:absolute; left:0; top:calc(100% + 16px); z-index:3; padding:8px 14px; border-radius:999px; background:var(--cream); color:var(--navy); font-weight:800; font-size:15px}
.ch{min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:12vh}
.ch .num{font-weight:800; font-size:15px; letter-spacing:.14em; margin:0 0 22px; opacity:.6}
.ch .lead{margin-top:26px}
.ch p:not(.lead):not(.num){margin-top:20px; opacity:.8}
.ch .inline{display:none}
@media (max-width:900px){
  .ch-grid{grid-template-columns:1fr} .ch-media{display:none}
  .ch{min-height:0; padding-block:80px 40px}
  .ch .inline{display:block; margin:0 0 36px}
  .chapters{transition:none}
}
@media (max-width:900px){
  .ch[data-tone="navy"]{background:var(--navy); color:var(--cream); box-shadow:0 0 0 100vmax var(--navy); clip-path:inset(0 -100vmax)}
}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important} }
html:not(.js-motion) .hp-pic:not(:first-child), html:not(.js-motion) .hp-word:not(:first-child), html:not(.js-motion) .hp-links a:not(:first-child){display:none}
.ch-frame{aspect-ratio:1/1.08}
.ch-count{background:var(--navy); color:var(--cream)}
.chapters.is-navy .ch-count{background:var(--cream); color:var(--navy)}
.hero-foot .wrap{justify-content:flex-end}
.totop{text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px}

.hero-title,.ft h2{color:#FFFFFF}
.hp-words{letter-spacing:-.01em}
.hero-title .word{white-space:nowrap}

/* ---------- v3: four aisles ---------- */
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards.four .card-in{aspect-ratio:3/4.3}
.cards.four .card-num{font-size:clamp(120px,12vw,230px)}
@media (max-width:1180px){ .cards.four{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:900px; margin:0 auto; gap:30px} }
@media (max-width:640px){ .cards.four{grid-template-columns:1fr; max-width:460px; gap:40px} }
@media (max-width:980px){ .lineup .cards.four{gap:30px} }

.aisle .ph-stage{min-height:60vh}
.aisle .claim span{max-width:9em}
@media (max-width:760px){ .aisle .ph-stage{height:auto; max-height:none; margin:10px 0 6px} .aisle .ph-stage img.ph-main{height:auto; width:100%; max-width:420px} }
@media (max-width:900px){ .hp-bar{left:2%; width:44%} .hp-whey{left:8%} .hp-cereal{left:52%} }

.prods{padding-block:clamp(90px,10vw,150px) clamp(40px,5vw,80px)}
.prods-head{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; align-items:end; margin-bottom:clamp(40px,5vw,80px)}
.prods-head .lead{color:var(--ink-soft)}
.prod{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(48px,7vw,120px); align-items:center; padding-block:clamp(70px,8vw,120px); border-top:1px solid var(--line); scroll-margin-top:90px}
.prod:nth-child(even) .prod-media{order:2}
.prod-media{position:relative}
.prod-media .reveal-img img{aspect-ratio:4/5; object-fit:cover; object-position:var(--op,50% 50%)}
.prod-pack{position:absolute; z-index:2; width:var(--pw,36%); right:-7%; bottom:-7%; height:auto; filter:drop-shadow(0 30px 34px rgba(0,26,53,.38)); pointer-events:none; will-change:transform}
.prod:nth-child(even) .prod-pack{right:auto; left:-7%}
.prod .num{font-weight:800; font-size:15px; letter-spacing:.14em; margin:0 0 18px; color:var(--ink-soft)}
.prod h2{font-size:clamp(46px,5.6vw,96px)}
.prod .kind{font-weight:700; font-size:15px; letter-spacing:.12em; text-transform:uppercase; margin:16px 0 0; color:var(--ink-soft)}
.prod .claim{margin:30px 0 0}
.prod .claim b{font-size:clamp(76px,7vw,124px)}
.prod .lead{margin-top:26px}
.prod .facts{margin-top:30px}
@media (max-width:900px){
  .prods-head{grid-template-columns:1fr}
  .prod{grid-template-columns:1fr; gap:48px}
  .prod:nth-child(even) .prod-media{order:0}
  .prod-pack,.prod:nth-child(even) .prod-pack{right:-2%; left:auto; bottom:-6%; width:var(--pwm,34%)}
}
.contact-ph{opacity:.9}

/* pinned panels v3.1: no letterboxing, no seam, no bleed-through between panels */
.hp-pic{background:var(--pbg)}
.hp-pic img{position:absolute; right:0; bottom:0; width:auto; height:100%; max-width:none; object-fit:cover; transform-origin:100% 100%}
@media (min-width:761px) and (max-aspect-ratio:8/5){
  .hp-pic{background:var(--pbgm)}
  .hp-pic img{height:min(100%, calc(100vw * 0.6255)); -webkit-mask-image:linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 4%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 4%); mask-composite:intersect}
}
@media (max-width:760px){
  .hp-pic{background:var(--pbgm)}
  .hp-pic img{-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16%); mask-image:linear-gradient(to bottom, transparent 0, #000 16%)}
}