/* ═══════════════════════════════════════════════════════════════════
   SCOOP & CO.
   Single-page premium ice cream site.

   Contents
     1.  Tokens (:root)          <- change the whole theme here
     2.  Reset & base
     3.  Typography primitives
     4.  Buttons, links, chrome
     5.  Cursor, grain, toast
     6.  Preloader
     7.  Header / nav
     8.  Carrier (the travelling cone)
     9.  Hero
     10. Flavors
     11. Boxes / pints / builder
     12. Story
     13. Gallery / quotes
     14. Order
     15. Footer
     16. Responsive
     17. Reduced motion & print
   ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. TOKENS ─────────────────────────────────────────────────── */
:root{
  /* Palette */
  --cocoa:        #2A1613;
  --espresso:     #1A0F0D;
  --cream:        #FBEFE0;
  --cream-deep:   #F3E1CB;
  --cream-warm:   #F7E6D2;
  /* Sampled from the backdrop of hero-build.mp4 so the hero can match it */
  --hero-haze:    #D8B498;
  --blush:        #F4A9B8;
  --blush-soft:   #FBD9E0;
  --pistachio:    #9DBE8D;
  --pistachio-soft:#D8E6CF;
  --caramel:      #E0A458;
  --caramel-soft: #F2D8B0;
  --mango:        #E9C24B;

  /* Semantic */
  --bg:           var(--cream);
  --ink:          var(--cocoa);
  --ink-soft:     #63423A;   /* 7.4:1 on cream  */
  --ink-faint:    #7C5C4E;   /* 5.2:1 on cream, the floor for small caps */
  --rule:         rgba(42, 22, 19, .14);
  --rule-strong:  rgba(42, 22, 19, .28);
  --on-dark:      #F6E9DA;
  --on-dark-soft: #B9A497;

  /* Per-section accent, re-pointed by [data-tint] */
  --accent:       var(--caramel);

  /* Type */
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-mega:  clamp(3.6rem, 11.5vw, 12rem);
  --fs-h1:    clamp(2.8rem, 7.2vw, 7.4rem);
  --fs-h2:    clamp(2.2rem, 5vw, 4.6rem);
  --fs-h3:    clamp(1.35rem, 2.2vw, 2rem);
  --fs-lede:  clamp(1.02rem, 1.25vw, 1.28rem);
  --fs-body:  1rem;
  --fs-micro: .72rem;

  --leading-tight: .92;
  --leading-body:  1.62;
  --tracking-micro: .16em;

  /* Space (deliberately uneven so the rhythm is not a metronome) */
  --s-2: .875rem;
  --s-3: 1.5rem;
  --s-4: 2.25rem;
  --s-5: 3.5rem;
  --s-6: 5.5rem;
  --s-7: 9rem;

  --gutter: clamp(1.25rem, 4.5vw, 5rem);
  --maxw: 96rem;

  /* Motion */
  --e-out:   cubic-bezier(.16,1,.3,1);       /* ease-out-expo-ish */
  --t-fast:  .18s;
  --t-mid:   .34s;

  --radius:    2px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* Layering scale */
  --z-carrier: 20;
  --z-header: 40;
  --z-menu: 45;
  --z-toast: 55;
  --z-cursor: 70;
  --z-preloader: 90;
}

/* Section tints. Each section re-points --accent so gradients,
   underlines and hover states shift as you travel down the page. */
[data-tint="cocoa"]     { --accent: var(--cocoa); }
[data-tint="blush"]     { --accent: #E0748E; }
[data-tint="pistachio"] { --accent: #6E9159; }
[data-tint="caramel"]   { --accent: #C4813B; }
[data-tint="mango"]     { --accent: #C79A1E; }
[data-tint="cream"]     { --accent: #6B4E36; }
[data-tint="espresso"]  { --accent: var(--caramel); }


/* ─── 2. RESET & BASE ───────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

html, body{ margin:0; padding:0; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:var(--leading-body);
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-loading{ overflow:hidden; height:100vh; }
body.menu-open{ overflow:hidden; }

img,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; }
a{ color:inherit; text-decoration:none; }
input,textarea,select{ font:inherit; color:inherit; }
figure{ margin:0; }
dl,dd{ margin:0; }

::selection{ background:var(--accent); color:var(--cream); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.svg-defs{ position:absolute; width:0; height:0; pointer-events:none; }

/* Focus: visible, on brand, never removed */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* Lenis */
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }


/* ─── 3. TYPOGRAPHY PRIMITIVES ──────────────────────────────────── */
.eyebrow{
  font-family:var(--font-ui);
  font-size:var(--fs-micro);
  font-weight:500;
  letter-spacing:var(--tracking-micro);
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 var(--s-3);
  display:flex; align-items:baseline; gap:.6em;
}
.eyebrow span{ color:var(--accent); font-variant-numeric:tabular-nums; }
.eyebrow--light{ color:var(--on-dark-soft); }

.section-title{
  font-family:var(--font-display);
  font-optical-sizing:auto;
  font-variation-settings:"SOFT" 12,"WONK" 1;
  font-size:var(--fs-h2);
  font-weight:500;
  line-height:.98;
  letter-spacing:-.022em;
  margin:0;
}
.section-title em,
.hero__title em,
.builder__title em,
.footer__news em{
  font-style:italic;
  font-weight:400;
  font-variation-settings:"SOFT" 60,"WONK" 1;
  color:var(--accent);
}
.section-title--light{ color:var(--on-dark); }

.section-lede{
  font-size:var(--fs-lede);
  color:var(--ink-soft);
  max-width:34ch;
  margin:var(--s-3) 0 0;
}

/* Line masks for reveal animations */
.line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.line__in{ display:block; will-change:transform; }
.reveal-line{ overflow:hidden; }


/* ─── 4. BUTTONS, LINKS, CHROME ─────────────────────────────────── */
.btn{
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6em;
  padding:.85em 1.6em;
  border-radius:var(--radius-pill);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:.86rem;
  font-weight:500;
  letter-spacing:.02em;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:color var(--t-mid) var(--e-out), background var(--t-mid) var(--e-out);
}
.btn::before{
  content:""; position:absolute; inset:0;
  background:var(--accent);
  transform:translate3d(0,101%,0);
  transition:transform .5s var(--e-out);
  z-index:-1;
}
.btn:hover::before,.btn:focus-visible::before{ transform:translate3d(0,0,0); }
.btn:hover{ color:var(--cream); }
.btn--lg{ padding:1.05em 2.1em; font-size:.94rem; }
.btn--light{ --btn-bg: var(--cream); --btn-fg: var(--espresso); }
.btn--light:hover{ color:var(--espresso); }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }
.btn[disabled]::before{ display:none; }
.btn__label{ position:relative; z-index:1; }
.btn__icon{ position:relative; z-index:1; width:15px; height:15px; flex:none; }

.link-underline{
  position:relative;
  display:inline-block;
  cursor:pointer;
  font-size:.9rem;
  padding-bottom:.15em;
}
.link-underline::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .5s var(--e-out);
}
.link-underline:hover::after,.link-underline:focus-visible::after{
  transform:scaleX(1); transform-origin:0 50%;
}


/* ─── 5. CURSOR, GRAIN, TOAST ───────────────────────────────────── */
.grain{
  position:fixed; inset:-50%;
  z-index:var(--z-toast);
  pointer-events:none;
  opacity:.32;
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  will-change:transform;
  animation:grainShift 5s steps(6) infinite;
}
@keyframes grainShift{
  0%  { transform:translate3d(0,0,0); }
  20% { transform:translate3d(-3%,2%,0); }
  40% { transform:translate3d(2%,-3%,0); }
  60% { transform:translate3d(-2%,-2%,0); }
  80% { transform:translate3d(3%,1%,0); }
  100%{ transform:translate3d(0,0,0); }
}

.cursor{
  position:fixed; top:0; left:0;
  width:0; height:0;
  z-index:var(--z-cursor);
  pointer-events:none;
  opacity:0;
  mix-blend-mode:difference;
}
.cursor__dot,.cursor__ring{
  position:absolute; top:0; left:0;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform,width,height;
}
.cursor__dot{ width:7px; height:7px; background:var(--cream); }
.cursor__ring{
  width:42px; height:42px;
  border:1px solid rgba(251,239,224,.55);
  transition:width .4s var(--e-out), height .4s var(--e-out),
             border-color .3s var(--e-out), border-radius .5s var(--e-out);
}
.cursor.is-hover .cursor__ring{
  width:74px; height:74px;
  border-color:rgba(251,239,224,.9);
  border-radius:48% 52% 44% 56% / 56% 44% 56% 44%;
}
.cursor.is-hover .cursor__dot{ opacity:0; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

.toast{
  position:fixed; left:50%; bottom:2rem;
  transform:translate(-50%,140%);
  z-index:var(--z-toast);
  background:var(--espresso); color:var(--on-dark);
  padding:.8rem 1.4rem;
  border-radius:var(--radius-pill);
  font-size:.82rem; letter-spacing:.01em;
  box-shadow:0 18px 40px -18px rgba(26,15,13,.7);
  pointer-events:none;
  opacity:0;
}


/* ─── 6. PRELOADER ──────────────────────────────────────────────── */
.preloader{
  position:fixed; inset:0;
  z-index:var(--z-preloader);
  display:grid; place-items:center;
  overflow:hidden;
}
.preloader__curtain{
  position:absolute; inset:0;
  z-index:1;
  background:var(--cream);
  transform-origin:50% 0%;
  pointer-events:none;
}
.preloader__inner{
  position:relative;
  z-index:2;
  text-align:center;
  padding:0 var(--gutter);
  width:100%;
}
.preloader__word{
  font-family:var(--font-display);
  font-size:clamp(2.6rem,9vw,7.5rem);
  font-weight:500;
  font-variation-settings:"SOFT" 20,"WONK" 1;
  letter-spacing:-.03em;
  line-height:1;
  margin:0;
  color:var(--cocoa);
}
.pl-line{ display:flex; justify-content:center; overflow:hidden; padding-bottom:.08em; }
/* Start state is applied by GSAP (yPercent), not CSS: a CSS percentage
   translate is parsed into pixels and the tween would be a no-op. */
.pl-char{ display:inline-block; will-change:transform; }
.pl-char--amp{ font-style:italic; color:var(--caramel); margin:0 .18em; }

.preloader__flavors{
  position:relative;
  height:2.6em;
  margin-top:var(--s-3);
  font-family:var(--font-ui);
  font-size:clamp(.8rem,1.5vw,1rem);
  letter-spacing:var(--tracking-micro);
  text-transform:uppercase;
}
.pl-flavor{
  position:absolute; inset:0;
  display:grid; place-items:center;
  opacity:0;
  color:var(--ink-soft);
}
.preloader__meta{
  position:absolute; z-index:2;
  left:var(--gutter); right:var(--gutter); bottom:2.2rem;
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:var(--fs-micro); letter-spacing:var(--tracking-micro);
  text-transform:uppercase; color:var(--ink-faint);
}
.preloader__count{ font-variant-numeric:tabular-nums; font-size:1rem; color:var(--cocoa); }
.preloader__skip{
  position:absolute; z-index:3;
  right:var(--gutter); top:2rem;
  font-size:var(--fs-micro); letter-spacing:var(--tracking-micro);
  text-transform:uppercase; color:var(--ink-faint);
  cursor:pointer;
  transition:color var(--t-fast) var(--e-out);
}
.preloader__skip:hover{ color:var(--cocoa); }
.preloader.is-done{ pointer-events:none; }


/* ─── 7. HEADER ─────────────────────────────────────────────────── */
.header{
  position:fixed; top:0; left:0; right:0;
  z-index:var(--z-header);
  padding:clamp(1rem,2.4vw,1.9rem) var(--gutter);
  pointer-events:none;
}
.header__bar{
  pointer-events:auto;
  max-width:var(--maxw);
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3);
  padding:.55rem .6rem .55rem .9rem;
  border-radius:var(--radius-pill);
  background:rgba(251,239,224,0);
  border:1px solid transparent;
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  will-change:transform;
}
.header.is-condensed .header__bar{
  background:rgba(251,239,224,.72);
  border-color:rgba(42,22,19,.1);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 14px 34px -22px rgba(42,22,19,.55);
}
.header.is-hidden{ transform:translate3d(0,-120%,0); }
.header{ transition:transform .55s var(--e-out); }

.logo{ display:flex; align-items:center; gap:.6rem; cursor:pointer; }
.logo__mark{ width:26px; height:26px; fill:var(--ink); flex:none; }
.logo__type{
  font-family:var(--font-display);
  font-size:clamp(1.1rem,1.9vw,1.45rem);
  font-weight:500;
  font-variation-settings:"SOFT" 18,"WONK" 1;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.logo__type em{ font-style:italic; color:var(--caramel); }

.nav{ display:flex; gap:clamp(.9rem,2vw,2rem); }
.nav__link{
  position:relative;
  font-size:.82rem; letter-spacing:.04em;
  color:var(--ink-soft);
  padding:.35em 0;
  cursor:pointer;
  transition:color var(--t-fast) var(--e-out);
}
.nav__link span{ position:relative; display:inline-block; }
.nav__link span::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--e-out);
}
.nav__link:hover,.nav__link.is-active{ color:var(--ink); }
.nav__link:hover span::after,.nav__link.is-active span::after{
  transform:scaleX(1); transform-origin:0 50%;
}

.header__actions{ display:flex; align-items:center; gap:.6rem; }
.cart{
  position:relative;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .85rem .5rem .7rem;
  border-radius:var(--radius-pill);
  border:1px solid var(--rule);
  cursor:pointer;
  transition:border-color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
}
.cart:hover{ border-color:var(--rule-strong); background:rgba(42,22,19,.04); }
.cart__icon{ width:18px; height:18px; fill:currentColor; }
.cart__count{ font-size:.78rem; font-variant-numeric:tabular-nums; min-width:1ch; }

.burger{ display:none; width:40px; height:40px; cursor:pointer; position:relative; }
.burger span{
  position:absolute; left:10px; width:20px; height:1.5px; background:var(--ink);
  transition:transform .4s var(--e-out), opacity .3s var(--e-out);
}
.burger span:first-child{ top:17px; }
.burger span:last-child{ top:23px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0;
  z-index:var(--z-menu);
  background:var(--cream);
  display:grid; place-items:center;
}
/* [hidden] must beat the display above, or the panel covers the page */
.mobile-menu[hidden]{ display:none; }
.mobile-menu nav{ display:grid; gap:var(--s-2); text-align:center; }
.mobile-menu__call{
  font-family:var(--font-ui) !important;
  font-size:1rem !important;
  letter-spacing:var(--tracking-micro) !important;
  text-transform:uppercase;
  color:var(--accent);
  margin-top:var(--s-3);
}
.mobile-menu a{
  font-family:var(--font-display);
  font-size:clamp(2rem,9vw,3.4rem);
  font-weight:500;
  font-variation-settings:"SOFT" 24,"WONK" 1;
  letter-spacing:-.02em;
  opacity:0;
}


/* ─── 8. CARRIER (travelling cone) ──────────────────────────────── */
.carrier{
  position:fixed; top:0; left:0;
  width:340px;              /* JS overrides via Flip.fit */
  aspect-ratio:4/5;
  z-index:var(--z-carrier);
  pointer-events:none;
  visibility:hidden;        /* revealed once Flip.fit has positioned it */
  will-change:transform;
}
/* No frame, no shadow, no inner vignette. The hero background is matched
   to this clip's own backdrop and the edges are feathered, so the cone
   reads as sitting on the page instead of inside a rectangle. The card
   look it needs on landing comes from #slot-1-still underneath, which
   has faded up to full before the carrier is pulled. */
.carrier__inner{
  position:relative;
  width:100%; height:100%;
  overflow:hidden;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:
    linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.carrier__video{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.02);
}


/* ─── 9. HERO ───────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(6.5rem,15vh,10rem) var(--gutter) var(--s-5);
  overflow:hidden;
  background:linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
}
.hero__particles{ position:absolute; inset:0; pointer-events:none; }
.hero__particles i{
  position:absolute;
  width:6px; height:6px; border-radius:50%;
  background:var(--cocoa);
  opacity:.12;
  will-change:transform;
}

.hero__grid{
  position:relative;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  /* The middle column is capped by viewport HEIGHT too, so the cone
     never runs off the bottom of a short laptop screen. */
  grid-template-columns:1fr clamp(240px,30vw,46vh) 1fr;
  align-items:center;
  gap:clamp(1.5rem,4vw,4rem);
}
.hero__col--left{ justify-self:start; }
.hero__col--right{ justify-self:end; max-width:30ch; }

.hero__title{
  font-family:var(--font-display);
  font-size:var(--fs-h1);
  font-weight:500;
  font-variation-settings:"SOFT" 14,"WONK" 1;
  line-height:var(--leading-tight);
  letter-spacing:-.035em;
  margin:0;
}
.hero__title .line--alt{ padding-left:.4em; }

.hero__stage{ position:relative; display:grid; place-items:center; }
/* The haze is sampled straight from hero-build.mp4's own backdrop, so the
   page colour behind the cone equals the colour inside the frame and the
   frame edges dissolve. It is anchored to the stage rather than to the
   viewport, so it keeps hugging the cone at every screen size, and fades
   back to cream well before it reaches the copy either side. */
.hero__stage::before{
  content:"";
  position:absolute;
  left:-72%; right:-72%; top:-32%; bottom:-26%;
  background:radial-gradient(closest-side ellipse at 50% 50%,
    var(--hero-haze) 0 66%, transparent 100%);
  pointer-events:none;
}
.hero__slot{ width:100%; aspect-ratio:4/5; }
.hero__fallback{
  display:none;
  width:100%; height:100%; object-fit:cover;
  /* Same feather as the carrier, so the reduced-motion hero blends into
     the haze exactly like the animated one does. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:
    linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.hero__plinth{
  position:absolute; bottom:-6%; left:50%;
  width:76%; height:26px;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(42,22,19,.3), transparent 70%);
  filter:blur(6px);
}

.hero__lede{ font-size:var(--fs-lede); color:var(--ink-soft); margin:0 0 var(--s-3); }
.hero__cta{ display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; }
.hero__facts{
  display:flex; gap:var(--s-3); flex-wrap:wrap;
  margin-top:var(--s-4);
  padding-top:var(--s-3);
  border-top:1px solid var(--rule);
}
/* Darker than the page default: these sit on the haze, where the usual
   faint tone only reaches 3.1:1. This clears 5:1 even at its deepest. */
.hero__facts dt{
  font-size:var(--fs-micro); letter-spacing:var(--tracking-micro);
  text-transform:uppercase; color:#5A3A31;
}
.hero__facts dd{
  font-family:var(--font-display); font-size:1.15rem; font-weight:500;
  font-variation-settings:"SOFT" 30,"WONK" 0;
}

.hero__scrollcue{
  position:absolute; left:50%; bottom:1.6rem;
  transition:opacity .45s var(--e-out);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:var(--fs-micro); letter-spacing:var(--tracking-micro);
  text-transform:uppercase; color:#5A3A31;
}
/* Beats GSAP's inline opacity, which is what the entrance timeline sets */
.hero__scrollcue.is-gone{ opacity:0 !important; }
.hero__scrollcue-rail{
  position:relative; width:1px; height:46px;
  background:var(--rule-strong); overflow:hidden;
}
.hero__scrollcue-rail i{
  position:absolute; top:0; left:0; width:100%; height:40%;
  background:var(--cocoa);
  animation:railDrop 2.2s var(--e-out) infinite;
}
@keyframes railDrop{
  0%{ transform:translateY(-120%); } 60%,100%{ transform:translateY(280%); }
}


/* ─── 10. FLAVORS ───────────────────────────────────────────────── */
.flavors{
  position:relative;
  padding:var(--s-7) var(--gutter) var(--s-6);
  background:linear-gradient(180deg, var(--cream-deep) 0%, var(--blush-soft) 55%, var(--cream) 100%);
}
.flavors__head{
  max-width:var(--maxw); margin:0 auto var(--s-6);
  display:grid; gap:var(--s-2);
}
.flavors__rail{
  max-width:var(--maxw); margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.4vw,2.4rem);
  align-items:start;
}

.fcard{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
}
.fcard__media{
  position:relative;
  width:100%; aspect-ratio:4/5;
  border-radius:var(--radius-lg);
  overflow:hidden;
  /* Reads as a designed tile while card 01 waits for the cone to land */
  background:
    radial-gradient(80% 60% at 50% 88%, rgba(42,22,19,.07), transparent 70%),
    linear-gradient(158deg, var(--cream-warm) 0%, var(--cream-deep) 100%);
  box-shadow:0 40px 80px -55px rgba(42,22,19,.65);
}
.fcard__media img,.fcard__media video{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform .9s var(--e-out);
}
.fcard:hover .fcard__media img,.fcard:hover .fcard__media video{ transform:scale(1.07); }
#slot-1{
  background:
    radial-gradient(80% 62% at 50% 46%, var(--hero-haze) 0%, transparent 72%),
    linear-gradient(158deg, var(--cream-warm) 0%, var(--cream-deep) 100%);
}
.fcard__still{ opacity:0; }        /* revealed at the end of the Flip hand-off */
.fcard--handed .fcard__still{ opacity:1; }

.fcard__body{ padding:var(--s-3) 0 0; }
.fcard__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-2);
  padding-bottom:.6rem; border-bottom:1px solid var(--rule);
}
.fcard__name{
  font-family:var(--font-display);
  font-size:var(--fs-h3); font-weight:500;
  font-variation-settings:"SOFT" 16,"WONK" 1;
  letter-spacing:-.02em; margin:0;
}
.fcard__name em{ font-style:italic; font-variation-settings:"SOFT" 60,"WONK" 1; }
.fcard__price{
  font-family:var(--font-display); font-size:1.05rem;
  font-variant-numeric:tabular-nums; color:var(--ink-soft);
}
.fcard__note{ font-size:.92rem; color:var(--ink-soft); margin:var(--s-2) 0 var(--s-3); max-width:32ch; }

.add{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.5rem .95rem .5rem .55rem;
  border:1px solid var(--rule);
  border-radius:var(--radius-pill);
  font-size:.8rem; letter-spacing:.03em;
  cursor:pointer;
  transition:border-color var(--t-mid) var(--e-out), background var(--t-mid) var(--e-out), color var(--t-mid) var(--e-out);
}
.add__plus{
  display:grid; place-items:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--ink); color:var(--cream);
  transition:transform .5s var(--e-out), background var(--t-mid) var(--e-out);
}
.add__plus svg{ width:11px; height:11px; }
.add:hover{ border-color:var(--ink); background:var(--ink); color:var(--cream); }
.add:hover .add__plus{ transform:rotate(90deg); background:var(--accent); }
.add.is-added .add__plus{ background:var(--accent); }


/* ─── 11. BOXES / PINTS / BUILDER ───────────────────────────────── */
.boxes{
  position:relative;
  background:var(--espresso);
  color:var(--on-dark);
  padding:var(--s-7) 0 var(--s-7);
  overflow:hidden;
}
.boxes__head{
  max-width:var(--maxw); margin:0 auto var(--s-5);
  padding:0 var(--gutter);
}

.pinrail{ position:relative; overflow:hidden; }
.pinrail__track{
  display:flex; gap:clamp(1rem,2.2vw,2rem);
  padding:0 var(--gutter);
  width:max-content;
  will-change:transform;
}
.pint{
  width:clamp(290px,33vw,470px);
  flex:none;
}
/* Landscape frame matched exactly to the 16:9 source, so nothing is
   cropped at all. These are wide scenes: two pints, a bowl, a hand and
   a scoop. A portrait crop cut them in half. */
.pint__media{
  aspect-ratio:16/9;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#241713;
}
.pint__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--e-out), filter .6s var(--e-out);
  filter:saturate(.92);
}
.pint:hover .pint__media img{ transform:scale(1.06); filter:saturate(1.05); }
.pint__meta{ padding-top:var(--s-3); position:relative; }
.pint__no{
  font-size:var(--fs-micro); letter-spacing:var(--tracking-micro);
  color:var(--caramel); font-variant-numeric:tabular-nums;
}
.pint__meta h3{
  font-family:var(--font-display); font-size:1.5rem; font-weight:500;
  font-variation-settings:"SOFT" 20,"WONK" 1;
  margin:.2rem 0 .3rem; letter-spacing:-.02em;
}
.pint__meta p{ margin:0; font-size:.86rem; color:var(--on-dark-soft); }
.pint__price{
  position:absolute; right:0; top:var(--s-3);
  font-family:var(--font-display); font-size:1.1rem;
  color:var(--caramel);
}
.pinrail__progress{
  max-width:var(--maxw);
  margin:var(--s-4) auto 0;
  padding:0 var(--gutter);
}
.pinrail__progress i{
  display:block; height:1px; width:0%;
  background:var(--caramel);
  box-shadow:0 0 0 0 var(--caramel);
}
.pinrail__progress{ position:relative; }
.pinrail__progress::before{
  content:""; position:absolute;
  left:var(--gutter); right:var(--gutter); top:0;
  height:1px; background:rgba(246,233,218,.16);
}

.builder{
  max-width:var(--maxw);
  margin:var(--s-7) auto 0;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4.5rem);
  align-items:center;
}
.builder__visual{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#241713;
  aspect-ratio:16/9;
}
.builder__video{ width:100%; height:100%; object-fit:cover; }
/* Scroll-driven readout sitting on the video */
.builder__readout{
  position:absolute; left:1.3rem; right:1.3rem; bottom:1.1rem;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-2); flex-wrap:wrap;
  pointer-events:none;
  /* Own stacking context, so the scrim below sits above the video
     rather than dropping behind it */
  isolation:isolate;
  z-index:2;
}
.builder__readout::before{
  content:""; position:absolute; inset:-2.5rem -1.3rem -1.1rem;
  background:linear-gradient(0deg, rgba(20,12,10,.55), transparent);
  z-index:-1;
}
.builder__count{
  display:flex; align-items:baseline; gap:.35rem;
  font-family:var(--font-display);
  font-size:2.6rem; line-height:1; color:var(--cream);
  text-shadow:0 4px 24px rgba(0,0,0,.5);
  font-variant-numeric:tabular-nums;
  will-change:transform;
}
.builder__count small{
  font-family:var(--font-ui); font-size:.72rem;
  letter-spacing:var(--tracking-micro); text-transform:uppercase;
  opacity:.75;
}
.builder__stage{
  margin:0;
  font-size:var(--fs-micro);
  letter-spacing:var(--tracking-micro);
  text-transform:uppercase;
  color:var(--cream);
  text-shadow:0 2px 18px rgba(0,0,0,.6);
  will-change:transform;
}

.builder__title{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,3.2vw,3rem);
  font-weight:500;
  font-variation-settings:"SOFT" 14,"WONK" 1;
  letter-spacing:-.025em; line-height:1;
  margin:0 0 var(--s-2);
  color:var(--on-dark);
}
.builder__lede{ color:var(--on-dark-soft); margin:0 0 var(--s-4); max-width:38ch; }
.builder__chips{ display:flex; flex-wrap:wrap; gap:.55rem; }
.chip{
  position:relative;
  padding:.55rem 1rem;
  border:1px solid rgba(246,233,218,.22);
  border-radius:var(--radius-pill);
  font-size:.82rem; color:var(--on-dark);
  cursor:pointer;
  transition:border-color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.chip::before{
  content:""; display:inline-block;
  width:8px; height:8px; border-radius:50%;
  margin-right:.5rem; vertical-align:1px;
  background:var(--chip-dot,var(--caramel));
}
.chip[data-theme="cream"]    { --chip-dot:#F4E4C8; }
.chip[data-theme="mango"]    { --chip-dot:#E9C24B; }
.chip[data-theme="blush"]    { --chip-dot:#F4A9B8; }
.chip[data-theme="cocoa"]    { --chip-dot:#7A4A38; }
.chip[data-theme="pistachio"]{ --chip-dot:#9DBE8D; }
.chip[data-theme="caramel"]  { --chip-dot:#E0A458; }
.chip:hover{ border-color:rgba(246,233,218,.55); }
.chip.is-on{ background:var(--cream); color:var(--espresso); border-color:var(--cream); }
.chip[disabled]{ opacity:.35; cursor:not-allowed; }

.builder__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3); flex-wrap:wrap;
  margin-top:var(--s-4); padding-top:var(--s-3);
  border-top:1px solid rgba(246,233,218,.16);
}
.builder__price-label{
  display:block;
  font-size:var(--fs-micro); letter-spacing:var(--tracking-micro);
  text-transform:uppercase; color:var(--on-dark-soft);
}
.builder__price-value{
  font-family:var(--font-display); font-size:2rem;
  font-variant-numeric:tabular-nums; color:var(--caramel);
}
.builder__hint{
  margin:var(--s-2) 0 0;
  font-size:.8rem; color:var(--on-dark-soft);
}


/* ─── 12. STORY ─────────────────────────────────────────────────── */
.story{
  position:relative;
  padding:var(--s-7) var(--gutter);
  background:linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 40%, var(--cream) 100%);
}
.story__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
}
.story__sticky{
  position:sticky; top:14vh;
  align-self:start;
}
.story__frame{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  /* Matched to the footage. A portrait crop sliced the pints in two. */
  aspect-ratio:16/9;
  background:var(--cream-deep);
  box-shadow:0 60px 100px -70px rgba(42,22,19,.8);
}
.story__video{ width:100%; height:100%; object-fit:cover; }
.story__caption{
  position:absolute; left:1rem; bottom:1rem; right:1rem;
  font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream);
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
/* Both drift shots are cones, which is why they can stay square */
.story__drift{
  position:absolute;
  width:27%; aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radius-lg);
  box-shadow:0 30px 60px -40px rgba(42,22,19,.7);
  will-change:transform;
}
/* Both sit on the right so they never cover the caption, bottom left */
.story__drift--1{ top:-18%; right:-9%; }
.story__drift--2{ bottom:-24%; right:14%; width:21%; }

.story__steps{ padding-top:var(--s-3); }

/* Four days, drawn as a timeline. Nothing here is dimmed: the live step
   is marked by its dot and the filling spine, not by making the other
   three unreadable. */
.story__list{
  --spine-x:14px;
  --story-gutter:3.5rem;
  --marker:30px;
  position:relative;
  padding-left:var(--story-gutter);
  margin-top:var(--s-4);
}
.story__spine{
  position:absolute; left:calc(var(--spine-x) - 1px);
  top:1.9rem; bottom:2.2rem; width:2px;
  background:var(--rule);
  border-radius:2px;
  overflow:hidden;
}
.story__spine i{
  display:block; width:100%; height:100%;
  background:var(--accent);
  transform:scaleY(0); transform-origin:50% 0%;
  will-change:transform;
}

.step{
  position:relative;
  padding:var(--s-4) 0;
  border-bottom:1px solid var(--rule);
}
.step:last-of-type{ border-bottom:0; }

.step__no{
  position:absolute;
  left:calc(var(--spine-x) - var(--story-gutter) - var(--marker) / 2);
  top:calc(var(--s-4) - 2px);
  width:var(--marker); height:var(--marker);
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--rule-strong);
  background:var(--cream);
  font-family:var(--font-display);
  font-size:.95rem; font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
  transition:background .45s var(--e-out), color .45s var(--e-out),
             border-color .45s var(--e-out), transform .45s var(--e-out);
}
.step__day{
  display:block;
  font-size:var(--fs-micro); letter-spacing:var(--tracking-micro);
  text-transform:uppercase;
  color:var(--ink-faint);
  transition:color .45s var(--e-out);
}
.step h3{
  font-family:var(--font-display);
  font-size:var(--fs-h3); font-weight:500;
  font-variation-settings:"SOFT" 18,"WONK" 1;
  letter-spacing:-.02em;
  line-height:1.12;
  margin:.3rem 0 .55rem;
  color:#452B24;                       /* 8.3:1 on cream */
  transition:color .45s var(--e-out);
}
.step p{
  margin:0;
  color:var(--ink-soft);
  font-size:1.02rem;
  line-height:1.72;
  max-width:52ch;
}

.step.is-live .step__no{
  background:var(--accent); border-color:var(--accent);
  color:var(--cream);
  transform:scale(1.08);
}
.step.is-live .step__day{ color:var(--accent); }
.step.is-live h3{ color:var(--ink); }

.counters{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--s-3);
  margin-top:var(--s-5);
}
.counter__num{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.9rem,3.4vw,3rem);
  font-weight:500;
  font-variation-settings:"SOFT" 24,"WONK" 0;
  font-variant-numeric:tabular-nums;
  line-height:1;
  color:var(--ink);
}
.counter__label{
  display:block; margin-top:.4rem;
  font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint);
}


/* ─── 13. GALLERY / QUOTES ──────────────────────────────────────── */
.gallery{
  position:relative;
  padding:var(--s-7) 0 var(--s-6);
  background:linear-gradient(180deg, var(--cream) 0%, var(--blush-soft) 70%, var(--cream-warm) 100%);
  overflow:hidden;
}
.gallery__head{
  max-width:var(--maxw); margin:0 auto var(--s-5);
  padding:0 var(--gutter);
}
.marquee{ display:grid; gap:clamp(.7rem,1.4vw,1.2rem); }
.marquee__row{ display:flex; gap:clamp(.7rem,1.4vw,1.2rem); width:max-content; will-change:transform; }
.marquee__set{ display:flex; gap:clamp(.7rem,1.4vw,1.2rem); }
/* Frame shape follows the subject. Cones are vertical and survive a
   square or portrait crop; bowls, pints and trays are wide and need a
   landscape frame or they get sliced. */
.shot{
  position:relative;
  width:clamp(180px,20vw,300px);
  aspect-ratio:1;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--cream-deep);
  flex:none;
}
.shot--tall{ aspect-ratio:4/5; }                                   /* cones */
.shot--wide{ aspect-ratio:16/9;  width:clamp(280px,32vw,460px); }  /* scenes */
.shot--pano{ aspect-ratio:9/4;   width:clamp(340px,40vw,600px); }  /* the trio */
.shot img,.shot video{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--e-out), filter .6s var(--e-out);
}
.shot:hover img,.shot:hover video{ transform:scale(1.07); }

.quotes{
  max-width:56rem;
  margin:var(--s-6) auto 0;
  padding:0 var(--gutter);
  text-align:center;
}
.quotes__viewport{ position:relative; min-height:13rem; }
.quote{
  position:absolute; inset:0;
  margin:0;
  opacity:0; visibility:hidden;
}
.quote.is-active{ opacity:1; visibility:visible; }
.quote p{
  font-family:var(--font-display);
  font-size:clamp(1.25rem,2.5vw,2rem);
  font-weight:400; font-style:italic;
  font-variation-settings:"SOFT" 50,"WONK" 1;
  line-height:1.25; letter-spacing:-.02em;
  margin:0 0 var(--s-3);
}
.quote cite{
  font-style:normal; font-size:.82rem; letter-spacing:.03em; color:var(--ink-soft);
}
.quote cite span{ display:block; color:var(--ink-faint); font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase; margin-top:.25rem; }

.quotes__nav{
  display:flex; align-items:center; justify-content:center; gap:var(--s-3);
  margin-top:var(--s-4);
}
.qbtn{
  width:40px; height:40px;
  display:grid; place-items:center;
  border:1px solid var(--rule); border-radius:50%;
  cursor:pointer;
  transition:border-color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
}
.qbtn:hover{ border-color:var(--ink); background:rgba(42,22,19,.05); }
.qbtn svg{ width:16px; height:16px; }
.quotes__dots{ display:flex; gap:.5rem; }
.qdot{
  width:6px; height:6px; border-radius:50%;
  background:var(--rule-strong); cursor:pointer;
  transition:background var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.qdot.is-on{ background:var(--accent); transform:scale(1.4); }


/* ─── 14. ORDER ─────────────────────────────────────────────────── */
.order{
  position:relative;
  padding:var(--s-7) var(--gutter) var(--s-6);
  background:linear-gradient(180deg, var(--cream-warm) 0%, var(--caramel-soft) 45%, var(--cream) 100%);
  overflow:hidden;
}
.order__melt{
  position:relative;
  max-width:var(--maxw); margin:0 auto var(--s-7);
  text-align:center;
}
.order__title{
  font-family:var(--font-display);
  font-size:var(--fs-mega);
  font-weight:500;
  font-variation-settings:"SOFT" 10,"WONK" 1;
  line-height:.86; letter-spacing:-.045em;
  margin:0;
  position:relative; z-index:2;
}
.order__title em{ font-style:italic; font-variation-settings:"SOFT" 70,"WONK" 1; color:var(--accent); }

/* ── Melting type ──────────────────────────────────────────────────
   .melt hugs the headline so the drip layer can hang off its real
   baseline. The goo filter merges each drip with its own droplet so
   they read as running sugar rather than as bars. */
.melt{ position:relative; display:inline-block; color:var(--accent); }
.melt--cream{ color:var(--cream); display:block; }
.melt .drips{
  position:absolute; left:0; right:0; top:100%;
  height:170px;
  filter:url(#goo);
  pointer-events:none;
  z-index:1;
}
.drip{
  position:absolute; top:-12px;
  width:22px; height:38px;
  border-radius:0 0 46% 46% / 0 0 34% 34%;
  background:currentColor;
  transform-origin:50% 0%;
  will-change:transform;
}
.drip::after{
  content:""; position:absolute; left:50%; bottom:-9px;
  width:19px; height:19px; border-radius:50%;
  background:currentColor; transform:translateX(-50%);
}
/* Uneven placement and width, because real melt is not on a grid */
.drips .drip:nth-child(1){ left:7%;  width:18px; }
.drips .drip:nth-child(2){ left:19%; width:26px; }
.drips .drip:nth-child(3){ left:31%; width:16px; }
.drips .drip:nth-child(4){ left:44%; width:24px; }
.drips .drip:nth-child(5){ left:57%; width:19px; }
.drips .drip:nth-child(6){ left:70%; width:28px; }
.drips .drip:nth-child(7){ left:82%; width:17px; }
.drips .drip:nth-child(8){ left:92%; width:22px; }

.order__grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,.7fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
}
.order__shot{
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#fff;
}
.order__shot img{ width:100%; height:auto; }

.order__form{ display:grid; gap:var(--s-3); }
.field{ display:grid; gap:.4rem; border:0; padding:0; margin:0; min-width:0; }
.field label,.field legend{
  font-size:var(--fs-micro); letter-spacing:var(--tracking-micro);
  text-transform:uppercase; color:var(--ink-soft);
  padding:0;
}
.field input,.field textarea{
  width:100%;
  padding:.85rem 1rem;
  background:rgba(255,255,255,.55);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  transition:border-color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
  resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-faint); }
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); background:#fff;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
.field.has-error input,.field.has-error textarea{ border-color:#B3452F; }
.field__error{ font-size:.76rem; color:#B3452F; min-height:1em; }

.radios{ display:flex; gap:var(--s-3); flex-wrap:wrap; }
.radio{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.9rem; }
.radio input{ accent-color:var(--accent); width:16px; height:16px; }

.order__status{ font-size:.85rem; color:var(--accent); min-height:1.4em; margin:0; }

.order__info{ display:grid; gap:var(--s-3); }
.order__info h3{
  font-size:var(--fs-micro); letter-spacing:var(--tracking-micro);
  text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 .35rem; font-weight:500;
}
.order__info p{ margin:0; font-size:.94rem; color:var(--ink-soft); }


/* ─── 15. FOOTER ────────────────────────────────────────────────── */
.footer{
  position:relative;
  background:var(--espresso);
  color:var(--on-dark);
  padding:0 var(--gutter) var(--s-3);
  overflow:hidden;
}

/* ── Melt edge ─────────────────────────────────────────────────────
   The cream section above runs over the top of the footer. Sized by
   aspect ratio, not a fixed height, so the drips keep their shape at
   every width instead of being squashed thin on a phone. */
.footer__melt{
  position:relative;
  margin:0 calc(-1 * var(--gutter));
  line-height:0;
  pointer-events:none;
}
.footer__melt svg{
  display:block; width:100%; height:auto;
  fill:var(--cream);
}

/* ── Flavor ribbon ─────────────────────────────────────────────── */
.ribbon{
  position:relative; z-index:2;
  margin:0 calc(-1 * var(--gutter)) var(--s-6);
  padding:.85rem 0;
  border-bottom:1px solid rgba(246,233,218,.12);
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ribbon__track{ display:flex; width:max-content; will-change:transform; }
.ribbon__set{ display:flex; align-items:center; }
.ribbon__set span{
  font-family:var(--font-display);
  font-size:clamp(1rem,1.6vw,1.35rem);
  font-weight:500;
  font-variation-settings:"SOFT" 30,"WONK" 1;
  letter-spacing:-.01em;
  white-space:nowrap;
  padding:0 1.1rem;
  color:var(--on-dark);
}
.ribbon__set i{
  width:9px; height:9px; border-radius:50%;
  background:var(--ribbon-dot,var(--caramel));
  flex:none;
}
.ribbon__set span[data-theme="cocoa"]     { color:#C99A7E; }
.ribbon__set span[data-theme="blush"]     { color:var(--blush); }
.ribbon__set span[data-theme="pistachio"] { color:var(--pistachio); }
.ribbon__set span[data-theme="cream"]     { color:#F4E4C8; }
.ribbon__set span[data-theme="mango"]     { color:var(--mango); }
.ribbon__set span[data-theme="caramel"]   { color:var(--caramel); }

/* ── Today's board ─────────────────────────────────────────────── */
.board{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto var(--s-6);
}
.board__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-3); flex-wrap:wrap;
  padding-bottom:var(--s-3);
  border-bottom:1px solid rgba(246,233,218,.16);
}
.board__head h2{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,2.4vw,2.1rem);
  font-weight:500;
  font-variation-settings:"SOFT" 18,"WONK" 1;
  letter-spacing:-.025em;
  margin:0;
  color:var(--on-dark);
}
.board__head p{ margin:0; font-size:.86rem; color:var(--on-dark-soft); }

.board__list{
  list-style:none; margin:var(--s-3) 0 0; padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.5rem clamp(1rem,2.4vw,2.5rem);
}
.board__item{
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem 0;
  border-bottom:1px solid rgba(246,233,218,.09);
  font-size:.95rem;
}
.board__dot{
  width:12px; height:12px; border-radius:50%;
  flex:none;
  background:var(--board-dot,var(--caramel));
  box-shadow:0 0 0 3px rgba(246,233,218,.06);
}
.board__item[data-theme="cocoa"]     { --board-dot:#7A4A38; }
.board__item[data-theme="blush"]     { --board-dot:var(--blush); }
.board__item[data-theme="pistachio"] { --board-dot:var(--pistachio); }
.board__item[data-theme="cream"]     { --board-dot:#F4E4C8; }
.board__item[data-theme="mango"]     { --board-dot:var(--mango); }
.board__item[data-theme="caramel"]   { --board-dot:var(--caramel); }
/* Menu-board leader between the flavor and its price */
.board__name{
  display:flex; align-items:baseline; gap:.6rem;
  flex:1; min-width:0;
  color:var(--on-dark);
  white-space:nowrap;
}
.board__name::after{
  content:""; flex:1;
  border-bottom:1px dotted rgba(246,233,218,.28);
  transform:translateY(-.25em);
}
.board__price{
  font-family:var(--font-display); font-size:1rem;
  color:var(--caramel); font-variant-numeric:tabular-nums;
}
.board__item.is-out{ opacity:.55; }
.board__item.is-out .board__name{ text-decoration:line-through; text-decoration-thickness:1px; }
.board__item.is-out .board__price{
  font-family:var(--font-ui); font-size:var(--fs-micro);
  letter-spacing:var(--tracking-micro); text-transform:uppercase;
  color:var(--on-dark-soft);
}

/* ── Contact card ──────────────────────────────────────────────── */
.footer__contact{
  margin-top:var(--s-5);
  padding-top:var(--s-3);
  border-top:1px solid rgba(246,233,218,.16);
}
.footer__contact h3{
  font-size:var(--fs-micro); letter-spacing:var(--tracking-micro);
  text-transform:uppercase; color:var(--on-dark-soft);
  margin:0 0 .6rem; font-weight:500;
}
.footer__tel{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-display);
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  font-weight:500;
  font-variation-settings:"SOFT" 22,"WONK" 1;
  letter-spacing:-.02em;
  color:var(--cream);
  transition:color var(--t-mid) var(--e-out);
}
.footer__tel svg{ width:22px; height:22px; flex:none; color:var(--caramel); }
.footer__tel:hover{ color:var(--caramel); }
.footer__contact p{ margin:.6rem 0 0; font-size:.9rem; color:var(--on-dark-soft); }

.order__tel{ font-family:var(--font-display); font-size:1.25rem; color:var(--ink); }
.footer__gradient{
  position:absolute; inset:-20% -20% auto -20%;
  height:120%;
  z-index:1;
  background:
    radial-gradient(40% 40% at 20% 30%, rgba(224,164,88,.28), transparent 70%),
    radial-gradient(40% 40% at 75% 20%, rgba(244,169,184,.22), transparent 70%),
    radial-gradient(40% 45% at 50% 80%, rgba(157,190,141,.18), transparent 70%);
  filter:blur(30px);
  will-change:transform;
  pointer-events:none;
}
.footer__top{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,5rem);
}
.footer__news h2{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,2.8vw,2.5rem);
  font-weight:500;
  font-variation-settings:"SOFT" 16,"WONK" 1;
  letter-spacing:-.025em; line-height:1.05;
  margin:0 0 var(--s-3);
}
.footer__news em{ color:var(--caramel); }
.news{ position:relative; display:flex; align-items:center; gap:.5rem; max-width:26rem; }
.news input{
  flex:1;
  padding:.9rem 1rem;
  background:rgba(246,233,218,.06);
  border:1px solid rgba(246,233,218,.2);
  border-radius:var(--radius-pill);
  color:var(--on-dark);
}
.news input::placeholder{ color:rgba(185,164,151,.8); }
.news input:focus{ outline:none; border-color:var(--caramel); background:rgba(246,233,218,.1); }
.news button{
  width:46px; height:46px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--caramel); color:var(--espresso);
  cursor:pointer;
  transition:transform var(--t-mid) var(--e-out), background var(--t-mid) var(--e-out);
}
.news button:hover{ transform:translateX(3px); background:var(--cream); }
.news button svg{ width:20px; height:20px; }
.news__status{
  position:absolute; left:0; bottom:-1.6rem;
  font-size:.76rem; color:var(--caramel);
}

.footer__cols{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3);
}
.footer__cols h3{
  font-size:var(--fs-micro); letter-spacing:var(--tracking-micro);
  text-transform:uppercase; color:var(--on-dark-soft);
  margin:0 0 var(--s-2); font-weight:500;
}
.footer__cols a{ display:block; margin-bottom:.45rem; color:var(--on-dark); opacity:.85; }
.footer__cols a:hover{ opacity:1; }

.footer__wordmark{
  position:relative;
  /* Bottom margin has to clear the longest drip, or the melt runs into
     the copyright rule. */
  max-width:var(--maxw); margin:var(--s-6) auto var(--s-6);
  text-align:center;
}
.footer__word{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(3rem,15vw,13rem);
  font-weight:500;
  font-variation-settings:"SOFT" 8,"WONK" 1;
  letter-spacing:-.05em; line-height:.85;
  color:var(--cream);
  position:relative; z-index:2;
}
.footer__base{
  position:relative;
  max-width:var(--maxw); margin:var(--s-5) auto 0;
  padding-top:var(--s-3);
  border-top:1px solid rgba(246,233,218,.16);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3); flex-wrap:wrap;
}
.footer__base p{ margin:0; font-size:.78rem; color:var(--on-dark-soft); }

/* ── Built by OSTech Apps ──────────────────────────────────────────
   The mark sits on a cream chip rather than being recoloured: half of
   it is a deep purple that would disappear against the espresso. */
.ostech{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.35rem .7rem .35rem .35rem;
  border:1px solid rgba(246,233,218,.14);
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:border-color var(--t-mid) var(--e-out), background var(--t-mid) var(--e-out);
}
.ostech:hover{ border-color:rgba(246,233,218,.34); background:rgba(246,233,218,.05); }
.ostech__chip{
  display:grid; place-items:center;
  width:30px; height:30px; flex:none;
  border-radius:calc(var(--radius-lg) + 2px);
  background:var(--cream);
  transition:transform var(--t-mid) var(--e-out);
}
.ostech__chip img{ width:22px; height:auto; }
.ostech:hover .ostech__chip{ transform:rotate(-6deg) scale(1.06); }
.ostech__text{
  font-size:.78rem; letter-spacing:.02em;
  color:var(--on-dark-soft);
  white-space:nowrap;
}
.ostech__text strong{ font-weight:500; color:var(--on-dark); }
.ostech__ig{
  width:16px; height:16px; flex:none;
  color:var(--on-dark-soft);
  transition:color var(--t-mid) var(--e-out);
}
.ostech:hover .ostech__ig{ color:var(--caramel); }
.totop{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--on-dark); cursor:pointer;
}
.totop svg{ width:16px; height:16px; transition:transform .5s var(--e-out); }
.totop:hover svg{ transform:translateY(-4px); }


/* ─── 16. RESPONSIVE ────────────────────────────────────────────── */
@media (max-width:1180px){
  .order__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .order__info{ grid-column:1 / -1; grid-template-columns:repeat(3,1fr); }
}

@media (max-width:1024px){
  :root{ --s-7:6.5rem; --s-6:4.5rem; }

  .nav{ display:none; }
  .burger{ display:block; }

  .hero{ padding-top:calc(var(--s-6) + 3rem); }
  .hero__grid{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    gap:var(--s-4);
  }
  .hero__col--left,.hero__col--right{ justify-self:center; max-width:44ch; }
  .hero__title .line--alt{ padding-left:0; }
  .hero__cta{ justify-content:center; }
  .hero__facts{ justify-content:center; }
  .hero__stage{ width:min(62vw,340px); order:-1; }

  .flavors__rail{ grid-template-columns:1fr 1fr; }
  .flavors__rail .fcard:last-child{ grid-column:1 / -1; max-width:52%; margin:0 auto; }

  .builder{ grid-template-columns:1fr; }
  .board__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .story__grid{ grid-template-columns:1fr; }
  .story__sticky{ position:relative; top:0; max-width:34rem; }
  .story__drift{ display:none; }
  .counters{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:720px){
  :root{
    --s-7:5rem; --s-6:3.5rem; --s-5:2.5rem;
    --fs-body:1rem;
  }
  body{ font-size:16px; }

  .header{ padding:.75rem var(--gutter); }
  .header__bar{ padding:.5rem .5rem .5rem .75rem; }
  .header .btn{ display:none; }

  .hero{ min-height:auto; padding-bottom:var(--s-6); }
  .hero__stage{ width:min(78vw,300px); }
  .hero__scrollcue{ display:none; }
  .hero__facts{ gap:var(--s-2) var(--s-3); }

  /* .fcard__media keeps 4/5 at every breakpoint: the carrier shares that
     ratio, so Flip.fit can scale it uniformly instead of distorting it. */
  .flavors__rail{ grid-template-columns:1fr; gap:var(--s-5); }
  .flavors__rail .fcard:last-child{ grid-column:auto; max-width:none; }
  .flavors__rail .fcard{ max-width:26rem; margin:0 auto; width:100%; }

  .pinrail__track{ gap:1rem; }
  .pint{ width:70vw; }

  /* Stack the scoop count and the stage caption, or they collide */
  .builder__readout{ flex-direction:column; align-items:flex-start; gap:.15rem; }
  .builder__count{ font-size:2.1rem; }

  .order__grid{ grid-template-columns:1fr; }
  .order__info{ grid-template-columns:1fr; }
  /* Shorter base height scales every drip down proportionally, because
     the JS sets scaleY relative to this. */
  .melt .drips{ height:110px; }
  .drip{ width:15px; height:25px; }
  .drip::after{ width:13px; height:13px; bottom:-6px; }

  .footer__top{ grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:repeat(2,1fr); gap:var(--s-3) var(--s-2); }
  .board__list{ grid-template-columns:1fr; }
  .board__head{ display:block; }
  .board__head p{ margin-top:.4rem; }
  .ribbon{ margin-bottom:var(--s-5); }
  .footer__base{ justify-content:flex-start; gap:var(--s-2) var(--s-3); }
  .ostech{ order:-1; }   /* credit first, then copyright, then back to top */

  .counters{ gap:var(--s-2) var(--s-3); }
  .quotes__viewport{ min-height:17rem; }
}

@media (max-width:420px){
  .shot{ width:64vw; }
  .shot--tall{ width:60vw; }
  .shot--wide{ width:82vw; }
  .shot--pano{ width:90vw; }
}


/* ─── 17. REDUCED MOTION & PRINT ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .grain{ animation:none; }
  .cursor{ display:none; }
  .preloader{ display:none; }
  .carrier{ display:none; }
  .hero__fallback{ display:block; }   /* stands in for the travelling cone */
  .fcard__still{ opacity:1; }
  .hero__scrollcue{ display:none; }
  .story__sticky{ position:relative; top:0; }
  .step{ opacity:1; }
  .line__in{ transform:none !important; }
  .pl-char{ transform:none; }
}

@media print{
  .header,.cursor,.grain,.preloader,.carrier,.toast,.hero__scrollcue{ display:none !important; }
  body{ background:#fff; color:#000; }
}