/* =========================================================
   Pulp-up — Frozen Fruit Pulp
   Brand palette + type per Pulp Up Brand Kit
   ========================================================= */

:root{
  /* Brand palette (exact, from brand kit) */
  --gold:      #FFA900;
  --gold-lt:   #FBC334;
  --avo:       #07980C;
  --avo-lt:    #02BC68;
  --berry:     #E10D1E;
  --berry-lt:  #FA4238;
  --violet:    #7F4FE7;
  --violet-lt: #A284FC;
  --custard:   #181A1B;
  /* Hero/loader ground — deliberately deeper than --avo so white body
     text clears 4.5:1 (--avo only holds ~3.8:1). */
  --hero:      #067D0A;
  --hero-lt:   #2ECC40;

  /* Neutrals */
  --cream:  #FFF8EC;
  --ink:    #171207;
  --ink-sf: #3B3125;

  /* Type */
  --display: 'Fredoka', ui-rounded, system-ui, sans-serif;
  --body:    'Nunito', ui-rounded, system-ui, sans-serif;

  /* Rhythm */
  --pad: clamp(1.25rem, 5vw, 5rem);
  --r:   clamp(18px, 2vw, 32px);
  --nav-h: 6rem; /* safe clearance for the fixed nav — see anchor targets below */

  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
html.is-scrolled body{ background:#3D372C; } /* ≈ the stuck nav's dark glass over the page */
main{ background:var(--cream); }

body{
  margin:0;
  /* iOS 26 Safari tints the status bar and toolbar glass from the <body>
     background, so the body carries the colour that should sit behind them
     (hero green at the top, the nav's dark glass once it's stuck — main.js
     toggles .is-scrolled) and <main> carries the page's cream. */
  background:var(--hero);
  transition:background-color .35s var(--ease);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  line-height:1.6;
  /* `clip` (not `hidden`) — `hidden` makes body a scroll container and
     silently breaks position:sticky in the flavours section */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--gold); color:var(--ink); }

/* Two-tone ring (white + dark halo) so keyboard focus reads against
   every background on the page, including the light Mango/Avocado/
   Tender-Coconut flood and the dark hero/footer surfaces. */
:focus-visible{
  outline:2.5px solid #fff;
  outline-offset:3px;
  box-shadow:0 0 0 5.5px rgba(23,18,7,.55);
}

/* =========================================================
   CUSTOM CURSOR
   ========================================================= */
.cursor{
  position:fixed; top:0; left:0; z-index:10000;
  pointer-events:none; mix-blend-mode:difference;
  opacity:0;
}
.cursor.is-live{ opacity:1; }
.cursor__dot{
  position:absolute; top:0; left:0;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; background:#fff;
}
.cursor__ring{
  position:absolute; top:0; left:0;
  width:38px; height:38px; margin:-19px 0 0 -19px;
  border-radius:50%; border:1.5px solid #fff;
  transform:scale(1);
  transition:transform .35s var(--ease), border-color .35s;
}
.cursor.is-active .cursor__ring{ transform:scale(.368); }
.cursor.is-hover .cursor__ring{ transform:scale(1.684); }
.cursor.is-hidden{ opacity:0; }
@media (hover:none), (pointer:coarse){ .cursor{ display:none; } }

/* Grain overlay — gives the flat brand colours some tooth */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9998;
  opacity:.16; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ SHARED TYPE ============ */
.h2{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.2rem,1.4rem + 4.2vw,5.4rem);
  line-height:.98;
  letter-spacing:-.02em;
  margin:0 0 1rem;
}
.body{ margin:0 0 1.1rem; max-width:46ch; color:var(--ink-sf); }

/* ============ BUTTONS ============ */
.btn{
  --bg:var(--ink); --fg:var(--cream);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--display); font-weight:600;
  font-size:1rem; letter-spacing:-.01em;
  padding:.95em 1.7em;
  border-radius:100px;
  background:var(--bg); color:var(--fg);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .3s;
}
.btn:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 14px 34px -12px rgba(0,0,0,.5); will-change:transform; }
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform:translateX(-120%);
  pointer-events:none;
}
.btn:hover::after{ transform:translateX(120%); transition:transform .85s var(--ease); }
.btn--ghost{ --bg:transparent; --fg:currentColor; box-shadow:inset 0 0 0 2px currentColor; }
.btn--ghost:hover{ box-shadow:inset 0 0 0 2px currentColor, 0 14px 34px -14px rgba(0,0,0,.35); }
.btn--lg{ font-size:clamp(1rem,.9rem + .6vw,1.4rem); padding:1.05em 2em; }

/* =========================================================
   LOADER
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:var(--hero);
  isolation:isolate; overflow:hidden;
}
.loader::before{ z-index:-1; }
/* fast colour wash behind the watermark: three viewport-sized gradients that
   crossfade on a loop. Opacity-only and unblurred, so it costs next to nothing
   and can't stall the logo pour (a blurred spinning layer did, in Safari).
   Gold and light mint stay out so the white mark stays legible on it. */
.loader__wash{ position:absolute; inset:0; z-index:-2; }
.loader__wash i{
  position:absolute; inset:0; opacity:0;
  animation:loaderWash 2.4s linear infinite; will-change:opacity;
}
.loader__wash i:nth-child(1){ background:linear-gradient(135deg, var(--violet), var(--hero) 55%, var(--avo)); }
.loader__wash i:nth-child(2){ background:linear-gradient(225deg, var(--berry), var(--hero) 55%, var(--violet)); animation-delay:-.8s; }
.loader__wash i:nth-child(3){ background:linear-gradient(315deg, var(--avo), var(--hero) 50%, var(--berry)); animation-delay:-1.6s; }
@keyframes loaderWash{ 0%{ opacity:0 } 20%,33%{ opacity:.85 } 53%,100%{ opacity:0 } }
.loader__inner{ display:grid; justify-items:center; gap:1.6rem; }
/* the wordmark as stacked full-canvas parts (assets/brand/logo-parts) that
   main.js pours together; hidden until then so the finished mark never flashes */
.loader__logo{ position:relative; width:min(46vw,300px); aspect-ratio:1080/400; }
.loader__goo{ position:absolute; inset:0; }
.loader__goo img{ position:absolute; left:0; top:0; width:100%; height:100%; }
.js .loader__goo img{ opacity:0; }
@media (prefers-reduced-motion:reduce){ .js .loader__goo img{ opacity:1; } }
.loader__bar{ width:min(46vw,300px); height:4px; border-radius:99px; background:rgba(255,255,255,.28); overflow:hidden; }
.loader__bar span{
  display:block; height:100%; width:100%; background:#fff; border-radius:99px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.loader__pct{
  font-family:var(--display); font-weight:500; font-size:.8rem;
  letter-spacing:.14em; color:rgba(255,255,255,.75);
  font-variant-numeric:tabular-nums;
}
.loader.is-done{ transform:translateY(-101%); transition:transform 1s var(--ease); }

/* =========================================================
   SCROLL PROGRESS
   ========================================================= */
.progress{
  position:fixed; top:0; left:0; z-index:901;
  height:3px; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--hero-lt));
  transform-origin:left;
}

/* =========================================================
   SECTION-TRANSITION VEIL
   Masks anchor-nav jumps with a short curtain wipe so moving
   between sections reads as a beat, not a passive scroll.
   ========================================================= */
.veil{
  position:fixed; inset:0; z-index:9997;
  display:none; place-items:center;
  background:var(--ink);
  transform:scaleY(0); transform-origin:bottom;
}
.veil img{ width:min(28vw,140px); opacity:0; transform:scale(.7); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  /* max() keeps the usual --pad gutter on notch-free devices and only
     grows it for the sensor housing / rounded corner in landscape */
  padding:max(.9rem, env(safe-area-inset-top)) max(var(--pad), env(safe-area-inset-right)) .9rem max(var(--pad), env(safe-area-inset-left));
  transition:background .4s var(--ease), backdrop-filter .4s;
  color:#fff;
}
.nav.is-stuck{
  background:rgba(23,18,7,.82);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
}
/* the same glass carried up behind iOS Safari's translucent status bar, so
   the clock sits on one continuous bar instead of page content scrolling by */
.nav::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:120px;
  background:inherit;
  -webkit-backdrop-filter:inherit; backdrop-filter:inherit;
  transition:inherit;
  pointer-events:none;
}
.nav__logo{ display:inline-flex; align-items:center; min-height:44px; }
.nav__logo img{ width:clamp(96px,10vw,132px); }
.nav__right{ display:flex; align-items:center; gap:clamp(.9rem,2vw,2rem); }
.nav__links{ display:flex; align-items:center; gap:clamp(.9rem,2vw,2rem); font-family:var(--display); font-weight:500; font-size:.95rem; }
/* padding (not min-height+flex) so the enlarged 44px hit area stays
   symmetric around the text instead of pushing the underline away from it */
.nav__links a{ position:relative; padding:.8rem 0; opacity:.9; transition:opacity .25s; }
.nav__links a:hover{ opacity:1; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:.8rem; height:2px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
/* current-section tracking (scrollspy, set in main.js) */
.nav__links a.is-current{ opacity:1; }
.nav__links a.is-current::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;
  background:var(--gold); color:var(--ink);
  padding:.6em 1.25em; border-radius:99px; font-weight:600;
  transition:transform .4s var(--ease), background .3s;
}
.nav__cta:hover{ transform:translateY(-2px); background:var(--gold-lt); }

/* Burger toggle — hidden on desktop, drives the mobile slide-down panel */
.nav__burger{
  display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:44px; height:44px; margin:-.3em -.5em -.3em 0;
}
.nav__burger span{
  display:block; width:20px; height:2px; border-radius:2px;
  background:currentColor;
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.nav.is-open .nav__burger{ color:#fff; }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:640px){
  .nav__burger{ display:flex; }
  .nav__links{
    position:fixed; inset:0 0 auto 0; z-index:-1;
    flex-direction:column; align-items:stretch; gap:0;
    padding:calc(var(--nav-h) + .5rem) max(var(--pad), env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left));
    background:rgba(23,18,7,.97); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    transform:translateY(-100%);
    /* hidden once it has slid out — otherwise it shows through iOS Safari's
       translucent status bar (and its links stay tabbable while closed) */
    visibility:hidden;
    transition:transform .5s var(--ease), visibility 0s linear .5s;
  }
  .nav.is-open .nav__links{ transform:translateY(0); visibility:visible; transition:transform .5s var(--ease), visibility 0s; }
  .nav__links a{
    padding:1.1em .2rem; font-size:1.15rem;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .nav__links a::after{ display:none; } /* underline hover doesn't apply to a full-width row */
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  padding:clamp(5rem,10vh,7rem) var(--pad) 2.5rem;
  display:flex; align-items:center;
  background:var(--hero);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
/* Oversized, cropped wordmark watermark — the Brand Book puts this behind
   every solid colour field (cover, colour tiles, section dividers), so the
   loader and the flavour flood carry it too. */
.hero::before,
.loader::before,
.flavours__bg::before{
  content:"";
  position:absolute; inset:auto -10% -22% -10%;
  height:78%;
  background:url("../assets/brand/logo-white.png") no-repeat center/contain;
  opacity:.07;
  pointer-events:none;
}
.hero::before{ z-index:-2; }
.hero__blobs{ position:absolute; inset:0; z-index:-1; }

.blob{
  position:absolute; border-radius:50%;
  filter:blur(50px); opacity:.5;
  will-change:transform; /* drifts continuously via GSAP once the page loads */
}
.blob--1{ width:44vw; height:44vw; background:var(--hero-lt); top:-14%; right:-10%; opacity:.4; }
.blob--2{ width:34vw; height:34vw; background:var(--violet); bottom:-16%; left:-8%; opacity:.38; }
.blob--3{ width:26vw; height:26vw; background:var(--gold); top:38%; left:44%; opacity:.16; }

/* Poster composition: type edge-to-edge, product centred beneath */
.hero__poster{
  position:relative; z-index:2;
  width:100%; max-width:1700px; margin-inline:auto;
  display:grid; justify-items:center;
  text-align:center;
}
.hero__title{
  font-family:var(--display); font-weight:600;
  line-height:.82;
  letter-spacing:-.035em;
  margin:0;
  width:100%;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; transform:translateY(105%); }
/* the big line is sized to run very nearly edge-to-edge */
.hero__title .line{ font-size:clamp(2rem,1rem + 5.2vw,5.6rem); }
/* -.03em reads cleaner than the old -.055em at this size — craft floor
   caps tracking at -.04em, and -.02 to -.03em is the sweet spot past that. */
.hero__title .line--xl{ font-size:clamp(3.6rem,.4rem + 12.6vw,13rem); letter-spacing:-.03em; }
/* --gold on --berry is ~2.6:1, below the 3:1 floor for large text —
   --gold-lt (already in the brand kit, otherwise only used for the nav
   CTA hover) clears it at ~3:1 without introducing a new colour. */
.hero__title .line--xl > span{ color:var(--gold-lt); }

/* micro-labels spread beneath the headline */
.hero__labels{
  width:100%;
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; flex-wrap:wrap;
  margin:.55rem 0 0;
  font-family:var(--display); font-weight:500;
  /* floor raised to clear the ~11px functional-text minimum (was .62rem ≈ 10px) */
  font-size:clamp(.72rem,.64rem + .3vw,.9rem);
  letter-spacing:.24em; text-transform:uppercase;
  opacity:.9;
}
.hero__labels span{ position:relative; padding-right:1.4rem; }
.hero__labels span:last-child{ padding-right:0; }
.hero__labels span::after{ content:"·"; position:absolute; right:.55rem; opacity:.6; }
.hero__labels span:last-child::after{ content:none; }
@media (max-width:640px){
  .hero__labels{ justify-content:center; gap:.5rem 1.2rem; }
  /* dot separators assume a single row; wrapped mobile rows use the gap instead */
  .hero__labels span{ padding-right:0; }
  .hero__labels span::after{ content:none; }
}

.hero__actions{
  display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center;
  margin-top:.5rem;
  position:relative; z-index:4;   /* must sit above the tub that rises behind it */
}
.hero__actions .btn--solid{ --bg:var(--gold); --fg:var(--ink); }
.hero__actions .btn--ghost{ color:#fff; }

/* Product + stickers — pulled up so the tub overlaps the type */
.hero__product{
  position:relative;
  display:grid; place-items:center;
  width:min(100%,700px);
  margin:clamp(-2rem,-2.4vw,-.75rem) 0 0;
  perspective:1000px;
}
.hero__tubwrap{
  width:min(48%,296px);
}
.hero__tub{
  width:100%;
  animation:float 7s ease-in-out infinite;
  will-change:transform;
}
@keyframes float{ 0%,100%{ transform:translateY(-10px) rotate(-1deg) } 50%{ transform:translateY(14px) rotate(1.5deg) } }

/* Starburst badge */
.burst{
  position:absolute; right:2%; bottom:6%;
  width:clamp(92px,11vw,148px); aspect-ratio:1;
  display:grid; place-items:center;
  color:var(--ink);
  animation:spinSlow 22s linear infinite;
}
.burst::before{
  content:""; position:absolute; inset:0;
  background:var(--gold);
  /* 14-point sunburst, computed as alternating outer/inner radius vertices */
  clip-path:polygon(
    50.00% 0.00%, 58.46% 12.95%, 71.69% 4.95%, 73.69% 20.29%,
    89.09% 18.83%, 84.24% 33.51%, 98.75% 38.87%, 88.00% 50.00%,
    98.75% 61.13%, 84.24% 66.49%, 89.09% 81.17%, 73.69% 79.71%,
    71.69% 95.05%, 58.46% 87.05%, 50.00% 100.00%, 41.54% 87.05%,
    28.31% 95.05%, 26.31% 79.71%, 10.91% 81.17%, 15.76% 66.49%,
    1.25% 61.13%, 12.00% 50.00%, 1.25% 38.87%, 15.76% 33.51%,
    10.91% 18.83%, 26.31% 20.29%, 28.31% 4.95%, 41.54% 12.95%
  );
}
.burst b{
  position:relative; z-index:1;
  font-family:var(--display); font-weight:600;
  font-size:clamp(.66rem,.58rem + .34vw,.92rem);
  line-height:1.12; text-align:center; text-transform:uppercase;
  letter-spacing:.03em;
  animation:spinSlowBack 22s linear infinite;
}
@keyframes spinSlow{ to{ rotate:360deg } }
@keyframes spinSlowBack{ to{ rotate:-360deg } }
/* smaller + tucked into the corner so it clears the tub's own footprint
   once the tub grows proportionally larger on narrow viewports */
@media (max-width:640px){
  .burst{ right:0; bottom:0; width:clamp(72px,20vw,92px); }
}

.sticker{
  position:absolute;
  font-family:var(--display); font-weight:600;
  font-size:clamp(.7rem,.62rem + .3vw,.95rem);
  line-height:1.05; text-align:center; text-transform:lowercase;
  padding:1em 1.2em; border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:#fff; color:var(--berry);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.4);
}
/* rotate as its own CSS property (not `transform`) so a JS hover-scale
   can drive `transform` independently without clobbering the tilt */
.sticker--a{ top:4%;  left:1%;  color:var(--berry);  rotate:-14deg; animation:bob 5s ease-in-out infinite; }
.sticker--b{ top:26%; right:3%; color:var(--violet); rotate:11deg;  animation:bob 6.2s ease-in-out infinite .4s; }
.sticker--c{ bottom:12%; left:4%; color:var(--avo);  rotate:7deg;   animation:bob 5.6s ease-in-out infinite .8s; }
@keyframes bob{ 0%,100%{ translate:0 0 } 50%{ translate:0 -12px } }
@media (max-width:760px){ .sticker--b{ display:none; } }

.hero__scroll{
  position:absolute; left:50%; bottom:1rem; translate:-50% 0;
  display:grid; justify-items:center; gap:.4rem; z-index:5;
  mix-blend-mode:soft-light;
  font-family:var(--display); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; opacity:.75;
}
.hero__scroll svg{ width:20px; height:33px; fill:none; stroke:currentColor; stroke-width:1.6; }
.hero__scroll circle{ fill:currentColor; stroke:none; animation:wheel 2s var(--ease) infinite; }
@keyframes wheel{ 0%{ transform:translateY(0); opacity:1 } 70%{ transform:translateY(13px); opacity:0 } 100%{ transform:translateY(0); opacity:0 } }

@media (max-width:900px){
  .hero{ min-height:auto; padding-bottom:4rem; }
  .hero__tubwrap{ width:min(62%,260px); }
  .hero__scroll{ display:none; }
  /* .hero__product's negative top margin pulls it up to overlap the
     headline on desktop by design, but at this width that same overlap
     reaches into the CTA row — sticker--a (top:4%) ends up half-covered
     by "Meet the flavours" (.hero__actions sits at z-index:4, above
     .hero__product's z-index:auto). Push it down clear of the buttons. */
  .sticker--a{ top:20%; }
}

/* =========================================================
   MARQUEE
   ========================================================= */
/* Background photo is the Brand Book's own street-poster shot of these
   exact taglines — a dark tint keeps the scrolling text legible while
   the poster colours still read as texture underneath. */
.marquee{
  background:
    linear-gradient(rgba(23,18,7,.84), rgba(23,18,7,.84)),
    url("../assets/lifestyle/poster-wall.jpg") center/cover;
  color:var(--cream);
  padding:1.1rem 0; overflow:hidden;
  border-block:3px solid var(--ink);
}
.marquee__track{
  display:flex; align-items:center; gap:2rem;
  width:max-content;
  animation:slide 34s linear infinite;
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.1rem,.9rem + 1.1vw,2.1rem);
  letter-spacing:-.01em; white-space:nowrap;
}
.marquee__track i{ color:var(--gold); font-style:normal; }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* Anchor targets reachable from the nav — guarantees clearance under the
   fixed nav even if a scroll lands here by a path main.js doesn't drive
   (native hash jump, browser scroll restore, scrollIntoView fallback). */
#story, #flavours, #ways, #contact{ scroll-margin-top:var(--nav-h); }

/* =========================================================
   STORY
   ========================================================= */
.story{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,6rem); align-items:center;
  padding:clamp(4.5rem,10vw,9rem) var(--pad);
  max-width:1500px; margin-inline:auto;
}
.story__media{ position:relative; }
.story__imgwrap{
  border-radius:var(--r); overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 34px 70px -34px rgba(23,18,7,.55);
}
.story__imgwrap img{ width:100%; height:100%; object-fit:cover; }

.story__badge{
  position:absolute; right:-4%; bottom:-5%;
  width:clamp(104px,13vw,158px); aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:50%; background:var(--avo); color:#fff;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.5);
}
.story__badge svg{ position:absolute; inset:0; width:100%; height:100%; animation:spin 18s linear infinite; }
.story__badge text{ font-family:var(--display); font-size:9.4px; font-weight:600; letter-spacing:.09em; fill:#fff; }
.story__badge b{ font-size:clamp(1.5rem,2.4vw,2.2rem); }
@keyframes spin{ to{ transform:rotate(360deg) } }

.story__facts{ list-style:none; margin:2.4rem 0 0; padding:0; display:grid; gap:.1rem; }
.story__facts li{
  padding:1.05rem 0; border-top:1.5px solid rgba(23,18,7,.14);
}
.story__facts li:last-child{ border-bottom:1.5px solid rgba(23,18,7,.14); }
.story__facts span{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.05rem,1rem + .3vw,1.25rem); letter-spacing:-.01em;
}

@media (max-width:880px){
  .story{ grid-template-columns:1fr; }
  /* the clamp()'s 4.5rem floor reads as a bare empty band right after
     the marquee at narrow widths — tighten just the top on mobile */
  .story{ padding-top:2.75rem; }
  /* full-width 4:5 runs taller than the viewport once stacked — go landscape */
  .story__imgwrap{ aspect-ratio:4/3; }
  .story__badge{ right:4%; bottom:-8%; }
}

/* =========================================================
   FLAVOURS — pinned colour flood
   ========================================================= */
.flavours{ position:relative; }
.flavours__sticky{
  position:sticky; top:0;
  height:100vh; overflow:hidden;
  display:grid; place-items:center;
  color:#fff;
  transition:color .4s var(--ease);
}
/* Mango, Avocado and Tender Coconut are light enough that white text
   fails WCAG AA (down to 1.9:1) — swap to ink for those three flavours. */
.flavours__sticky.is-light{ color:var(--ink); }
.flavours__bg{
  position:absolute; inset:0;
  background:var(--gold);
  transition:background .75s var(--ease);
}
.flavours__bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 55% at 50% 42%, rgba(255,255,255,.2), transparent 70%);
}
/* cream bleed that ramps in as the pin approaches its end, so the
   handoff to the next (cream) section doesn't cut abruptly */
.flavours__fade{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:var(--cream); opacity:0;
}
.flavours__inner{
  position:relative; z-index:2;
  width:100%; max-width:1400px;
  padding:clamp(4.5rem,9vh,6rem) var(--pad) clamp(1.5rem,4vh,3rem);
  /* min-height:0 overrides the grid-item default (content height), so on short
     viewports the stage row shrinks the tub instead of pushing the note and
     dots below the pinned frame */
  height:100%; min-height:0;
  display:grid;
  grid-template-rows:auto auto 1fr auto auto;
  justify-items:center; align-content:center;
  gap:clamp(.4rem,1.6vh,1rem);
  text-align:center;
}
.flavours__label{ font-family:var(--display); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; opacity:.9; }
.flavours__count b{ font-size:1.05rem; }

.flavours__name{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.6rem,1rem + 9vw,9rem);
  line-height:.9; letter-spacing:-.035em;
  margin:0;
  text-wrap:balance;
}

.flavours__stage{
  position:relative;
  width:100%; height:100%;
  min-height:0;
  display:grid; place-items:center;
}

.flavours__fallback{ grid-area:1/1; display:grid; grid-template:minmax(0,1fr) / minmax(0,1fr); place-items:center; width:100%; height:100%; min-height:0; }
.flavours__fallback img{
  grid-area:1/1;
  max-height:100%; width:auto; max-width:min(88vw,420px);
  object-fit:contain;
  opacity:0; transform:translateY(38px) scale(.9) rotate(-6deg);
  transition:opacity .6s var(--ease), transform .75s var(--ease);
}
.flavours__fallback img.is-active{ opacity:1; transform:translateY(0) scale(1) rotate(0); }

.flavours__note{ display:grid; gap:.4rem; max-width:52ch; }
.flavours__note p{ margin:0; font-size:clamp(.95rem,.9rem + .3vw,1.2rem); opacity:.95; transition:opacity .4s; }
.flavours__qty{ font-family:var(--display); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; opacity:.7; }
/* dimmed opacity loses too much contrast against the lighter floods — read at full strength there */
.flavours__sticky.is-light .flavours__label,
.flavours__sticky.is-light .flavours__qty{ opacity:1; }

.flavours__dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; }
.flavours__dots button{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:44px;
  font-family:var(--display); font-weight:500; font-size:.8rem;
  padding:.5em 1em; border-radius:99px;
  background:rgba(255,255,255,.14);
  transition:background .3s, transform .3s var(--ease);
}
.flavours__dots button span{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.5; transition:opacity .3s, transform .3s; }
.flavours__dots button:hover{ background:rgba(255,255,255,.26); transform:translateY(-2px); }
.flavours__dots button[aria-selected="true"]{ background:#fff; color:var(--ink); }
.flavours__dots button[aria-selected="true"] span{ opacity:1; transform:scale(1.3); }

@media (max-width:640px){
  .flavours__dots button{ font-size:.72rem; padding:.45em .8em; }
}

/* =========================================================
   WAYS
   ========================================================= */
.ways{ padding:clamp(4.5rem,10vw,9rem) 0; }
.ways__head{ padding-inline:var(--pad); max-width:1500px; margin:0 auto clamp(2rem,4vw,3.5rem); }
.ways__head .h2{ max-width:16ch; }

.ways__rail{
  display:flex; gap:clamp(1rem,2vw,1.75rem);
  padding-inline:var(--pad);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:1.5rem;
  /* the custom pointerdown/pointermove drag competes with iOS Safari's
     own text-selection callout and vertical-scroll gesture recognizer
     on a long-press-drag; both would otherwise interrupt the drag */
  touch-action:pan-x;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
.ways__rail::-webkit-scrollbar{ display:none; }
/* mandatory snap rejects any scrollLeft that isn't a snap point — the
   JS-driven discoverability nudge suspends snapping for its duration */
.ways__rail.is-nudging{ scroll-snap-type:none; }

.way{
  scroll-snap-align:start;
  flex:0 0 clamp(250px,26vw,340px);
  background:var(--c); color:#fff;
  border-radius:var(--r);
  padding:clamp(1.5rem,2.2vw,2.2rem);
  min-height:clamp(300px,34vw,400px);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.way::before{
  content:""; position:absolute; right:-28%; top:-28%;
  width:74%; aspect-ratio:1; border-radius:50%;
  background:rgba(255,255,255,.13);
  transition:transform .7s var(--ease);
}
.way:hover{ transform:translateY(-12px); box-shadow:0 28px 54px -22px rgba(0,0,0,.45); will-change:transform; }
.way:hover::before{ transform:scale(1.5); }
/* gold/avo/avo-lt are too light for white text at AA body contrast (same
   three colours already marked `light:true` in js/flavours.js) — ink reads
   correctly against all three instead. */
.way--light{ color:var(--ink); }
.way h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,1.2rem + 1vw,2.2rem); line-height:1; margin:0 0 .7rem; letter-spacing:-.02em; }
.way p{ margin:0; opacity:.94; font-size:.97rem; }
.way__time{
  margin-top:auto; align-self:flex-start;
  font-family:var(--display); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.5em 1em; border-radius:99px; background:rgba(255,255,255,.2);
}

/* =========================================================
   BAND
   ========================================================= */
.band{ position:relative; min-height:88svh; display:grid; place-items:center; overflow:hidden; isolation:isolate; }
.band__img{ position:absolute; inset:-12% 0; z-index:-1; }
.band__img img{ width:100%; height:100%; object-fit:cover; }
.band::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(7,30,8,.72), rgba(7,30,8,.5) 45%, rgba(7,30,8,.82)); }

.band__overlay{ color:#fff; text-align:center; padding:clamp(4rem,9vw,7rem) var(--pad); width:100%; max-width:1300px; }
.band__title{ font-family:var(--display); font-weight:600; font-size:clamp(2.2rem,1.2rem + 5vw,6rem); line-height:.95; letter-spacing:-.03em; margin:0 0 clamp(2rem,4vw,3.5rem); }
.band__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.5vw,2rem); }
.band__stats > div{ display:grid; justify-items:center; gap:.2rem; }
.band__stats b{ font-family:var(--display); font-weight:600; font-size:clamp(2rem,1.1rem + 3.6vw,4.4rem); line-height:1; letter-spacing:-.03em; color:var(--gold); }
.band__stats i{ font-style:normal; font-family:var(--display); font-size:clamp(1rem,1.6vw,1.7rem); color:var(--gold); margin-top:-.6em; }
.band__stats span{ font-size:.85rem; letter-spacing:.06em; opacity:.86; text-align:center; }
.band__stats > div{ grid-template-areas:"n u" "l l"; grid-template-columns:auto auto; align-items:baseline; justify-content:center; }
.band__stats b{ grid-area:n; } .band__stats i{ grid-area:u; } .band__stats span{ grid-area:l; }
@media (max-width:720px){ .band__stats{ grid-template-columns:repeat(2,1fr); row-gap:2rem; } }

/* =========================================================
   SPLIT
   ========================================================= */
.split{
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(1rem,2vw,1.75rem);
  padding:clamp(4rem,9vw,8rem) var(--pad);
  max-width:1500px; margin-inline:auto;
}
.split__stack{ display:grid; gap:clamp(1rem,2vw,1.75rem); }
.split__card{ position:relative; margin:0; border-radius:var(--r); overflow:hidden; }
.split__card img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.split__card:hover img{ transform:scale(1.06); }
.split__card--tall img{ min-height:clamp(360px,52vw,660px); }
.split__stack .split__card img{ height:clamp(170px,24vw,320px); }
.split__card figcaption{
  position:absolute; left:1rem; bottom:1rem;
  font-family:var(--display); font-weight:500; font-size:.85rem;
  padding:.55em 1.1em; border-radius:99px;
  background:rgba(255,248,236,.92); color:var(--ink);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
@media (max-width:820px){
  .split{ grid-template-columns:1fr; }
  /* same clamp-floor gap as .story — a bare cream band between the
     dark band photo above and the violet footer below at this width */
  .split{ padding-top:2.75rem; padding-bottom:2.75rem; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--violet); color:#fff;
  padding:clamp(4.5rem,10vw,8rem) var(--pad) 2rem;
  text-align:center;
}
.foot__blobs span{ position:absolute; border-radius:50%; filter:blur(60px); z-index:-1; will-change:transform; }
.foot__blobs span:first-child{ width:40vw; height:40vw; background:var(--violet-lt); top:-18%; left:-8%; opacity:.6; }
.foot__blobs span:last-child{ width:32vw; height:32vw; background:var(--berry-lt); bottom:-14%; right:-6%; opacity:.35; }

.foot__top{ display:grid; justify-items:center; gap:1rem; max-width:900px; margin-inline:auto; }
.foot__title{ font-family:var(--display); font-weight:600; font-size:clamp(2.4rem,1.2rem + 6vw,7rem); line-height:.92; letter-spacing:-.035em; margin:0; perspective:700px; }
.foot__sub{ margin:0; opacity:.9; font-size:clamp(1rem,.95rem + .3vw,1.25rem); }
.foot__top .btn--solid{ --bg:#fff; --fg:var(--violet); margin-top:.6rem; }

.foot__mark{ margin:clamp(3rem,7vw,5.5rem) 0 clamp(1.5rem,3vw,2.5rem); }
.foot__mark img{ width:min(88%,900px); margin-inline:auto; }

/* pack-label details — full white, since the dimmed footer text drops under 4.5:1 on violet */
.foot__legal{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.4rem 2.5rem;
  margin:0 0 clamp(1.75rem,3vw,2.5rem);
  font-style:normal; font-size:.84rem; line-height:1.6; text-align:left;
}
.foot__label{
  display:block; margin-bottom:.3rem;
  font-family:var(--display); font-weight:600; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
}
/* inline padding grows the tap target to ~44px without moving the text off the other columns' baseline */
.foot__legal a{ padding-block:.9rem; transition:opacity .25s; }
.foot__legal a:hover{ opacity:.65; }
@media (max-width:640px){ .foot__legal{ text-align:center; } }

.foot__bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:1.6rem; border-top:1.5px solid rgba(255,255,255,.24);
  font-size:.84rem; opacity:.86;
}
.foot__social{ display:flex; gap:1.4rem; margin-block:-.75rem; }
.foot__social a{ display:inline-flex; align-items:center; padding-block:.75rem; transition:opacity .25s; }
.foot__social a:hover{ opacity:.65; }

/* =========================================================
   REVEAL STATES (JS adds .is-in)
   ========================================================= */
[data-reveal]{ opacity:0; transform:translateY(26px); }
[data-reveal].is-in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }

[data-reveal-words] .w{ display:inline-block; overflow:hidden; vertical-align:top; }
[data-reveal-words] .w > span{ display:inline-block; transform:translateY(105%); }

[data-reveal-chars] .c{ display:inline-block; overflow:hidden; }
[data-reveal-chars] .c > span{ display:inline-block; transform:translateY(105%) rotateX(-50deg); opacity:0; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .hero__title .line > span,[data-reveal-words] .w > span{ transform:none !important; }
  [data-reveal-chars] .c > span{ transform:none !important; opacity:1 !important; }
}