/* ---- self-hosted fonts ----
   Previously loaded from Google. Self-hosting means the type renders even if
   Google Fonts is blocked or slow, removes a third-party request, and lets the
   design be exported reliably. 8 files, ~100 KB total. */
@font-face{font-family:"Fredoka";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/fredoka-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Fredoka";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/fredoka-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300;font-display:swap;
  src:url("fonts/figtree-latin-300-normal.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/figtree-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/figtree-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/figtree-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/dm-mono-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/dm-mono-latin-500-normal.woff2") format("woff2");}

@property --shimmer{syntax:"<angle>";initial-value:0deg;inherits:false;}

:root{
  --logo-cream:url("images/logo-mark-cream.png");
  --void:#06080E;
  --void-2:#0C1018;
  --panel:#111621;
  --cream:#F3EFE6;
  --cream-dim:#A8AEBC;
  --orange:#D9761F;
  --orange-lo:#E8A05A;
  --blue:#3B5FA8;
  --line:rgba(243,239,230,.14);
  /* electric violet — the CTA colour, and the only violet on the page.
     Berry moved to indigo and the cursor light to cyan so this one owns it. */
  --signal:#B14BFF;
  --signal-lo:#D49BFF;
  --signal-hi:#8A2CD6;
  --signal-ink:#1B0533;
  --max:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--void);color:var(--cream);
  font-family:"Figtree",system-ui,sans-serif;font-size:17px;line-height:1.65;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
/* ---- the sky ---- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;}
.sky canvas{display:block;width:100%;height:100%;}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 42%, transparent 42%, rgba(6,8,14,.55) 100%);}

/* ---- the photographed sphere ---- */
.hero{position:relative;overflow:hidden;}
/* a body passing the corner: mostly out of frame, only its limb in shot */
.planet{position:absolute;top:-50%;right:-11%;width:min(56vw,660px);
  box-shadow:0 0 130px 24px rgba(217,118,31,.16), 0 0 60px 8px rgba(59,95,168,.14);
  will-change:transform;aspect-ratio:1/1;
  border-radius:50%;overflow:hidden;z-index:0;
  opacity:0;animation:planetIn 1.8s ease-out 1.2s forwards;}
.planet img{width:108%;height:108%;object-fit:cover;position:absolute;top:-4%;left:-4%;
  animation:turn 420s linear infinite;transform-origin:50% 50%;}
/* limb darkening + a rim of light: makes a flat crop read as a sphere */
/* light falls from upper-right, so the limb nearest the page darkens away */
.planet::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at var(--lx,74%) var(--ly,20%), rgba(255,248,236,.22), transparent 42%),
    radial-gradient(circle at calc(var(--lx,74%) - 10%) calc(var(--ly,20%) + 12%),
                    transparent 16%, rgba(6,8,14,.30) 48%, rgba(6,8,14,.62) 70%,
                    rgba(6,8,14,.90) 88%, rgba(6,8,14,.99) 100%);
  box-shadow:inset 0 0 80px 26px rgba(6,8,14,.62);}
@keyframes planetIn{to{opacity:.88;}}
@keyframes planetInSm{to{opacity:.78;}}
@keyframes turn{to{transform:rotate(-360deg);}}
#heroOrb{position:relative;z-index:2;}

.closer{position:relative;z-index:1;padding-top:78px;margin-bottom:-2px;}
/* the old caption rule is superseded by .transmission below */
.closer .cap{display:block;text-align:center;color:rgba(243,239,230,.52);margin-bottom:26px;}
.horizon{position:relative;z-index:1;height:clamp(230px,32vw,440px);overflow:hidden;line-height:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 78%,rgba(0,0,0,.35));
          mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 78%,rgba(0,0,0,.35));}
.horizon img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;display:block;opacity:.95;}
/* the footer sits on the planet, so it gets its own scrim for legibility */
.foot{background:linear-gradient(to bottom, rgba(6,8,14,.90), var(--void) 34%);}

@media (prefers-reduced-motion:reduce){
  .planet{opacity:.88;animation:none;transform:none;}
  .planet img{animation:none;}
  .planet img{animation:none;}
}
/* ---- cursor glow ----
   Cool only. The mark is the warmest thing on the page and stays that way; a
   blue-violet field makes it read hotter by contrast instead of competing.
   Blended with `screen` so it adds light to the void rather than painting over it. */
.cursor-glow{position:fixed;top:0;left:0;width:1250px;height:1250px;
  margin:-625px 0 0 -625px;pointer-events:none;z-index:0;
  mix-blend-mode:screen;opacity:0;transition:opacity .8s ease;
  will-change:transform;
  /* deliberately faint. At full strength this lifted the whole ground to a
     blue-grey; the point is a suggestion of light, not a lit room. */
  background:radial-gradient(circle,
    rgba(var(--glow-core,59,95,168),.62) 0%,
    rgba(var(--glow-core,59,95,168),.34) 20%,
    rgba(var(--glow-core,59,95,168),.16) 38%,
    rgba(var(--glow-edge,26,44,104),.07) 56%,
    transparent 74%);}
.cursor-glow.on{opacity:1;}
/* no cursor to follow on touch, and it is motion, so it sits out of both */
@media (pointer:coarse){.cursor-glow{display:none;}}
@media (prefers-reduced-motion:reduce){.cursor-glow{display:none;}}

/* ---- intro stagger ---- */
.intro>*{opacity:0;transform:translateY(20px);
  animation:rise .95s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes rise{to{opacity:1;transform:none;}}

/* ---- scroll reveal ---- */
.rv{opacity:0;transform:translateY(30px);
  transition:opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1);}
.rv.in{opacity:1;transform:none;}

/* ---- orbit dividers ---- */
.orbit{position:relative;z-index:1;height:70px;margin:0;pointer-events:none;}
.orbit + section.hairline{border-top:none;}
.orbit svg{display:block;width:100%;height:100%;overflow:visible;}
.orbit path{fill:none;stroke:var(--orange);stroke-width:1.1;opacity:.34;
  stroke-dasharray:var(--l);stroke-dashoffset:var(--l);
  transition:stroke-dashoffset 1.8s cubic-bezier(.3,.7,.2,1);}
.orbit.in path{stroke-dashoffset:0;}

@media (prefers-reduced-motion:reduce){
  .intro>*{opacity:1;transform:none;animation:none;}
  .rv{opacity:1;transform:none;}
  .orbit path{stroke-dashoffset:0;transition:none;}
}
h1,h2,h3,h4{font-family:"Fredoka",system-ui,sans-serif;font-weight:600;line-height:1.02;letter-spacing:-0.02em;margin:0;}
.mono{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;}
a{color:inherit;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;position:relative;z-index:1;}
.band{padding:110px 0;position:relative;z-index:1;}
.hairline{border-top:1px solid var(--line);}
:focus-visible{outline:2px solid var(--orange-lo);outline-offset:3px;}

/* ---- logo ---- */
.mark{background-image:var(--logo-cream);background-size:contain;background-repeat:no-repeat;background-position:center;}
.lockup{display:flex;align-items:center;gap:12px;text-decoration:none;}
.lockup .mark{width:42px;height:42px;flex:none;}
.lockup .nm{font-family:"Fredoka",sans-serif;font-weight:600;font-size:23px;
  letter-spacing:-.015em;line-height:1;color:var(--cream);display:block;}
.lockup .sb{font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--cream-dim);margin-top:4px;display:block;}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:60;background:rgba(6,8,14,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav .wrap{display:flex;align-items:center;gap:30px;height:76px;}
.nav .lockup{margin-right:auto;}
.nav .btn-signal{padding:12px 20px;white-space:nowrap;}
.nav .btn-signal .short{display:none;}
@media(max-width:560px){
  .nav .btn-signal .full{display:none;}
  .nav .btn-signal .short{display:inline;}
  .nav .btn-signal{padding:11px 16px;}
}
.navlinks{display:flex;gap:28px;}
.navlinks a{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--cream-dim);transition:color .18s;}
.navlinks a:hover{color:var(--orange-lo);}
@media(max-width:900px){.navlinks{display:none;}}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;padding:14px 24px;text-decoration:none;border-radius:999px;border:1px solid var(--orange);color:var(--cream);background:transparent;cursor:pointer;transition:background .2s,color .2s,transform .2s;}
.btn:hover{background:var(--orange);color:#160D03;transform:translateY(-1px);}
.btn-fill{background:var(--orange);color:#160D03;}
.btn-fill:hover{background:var(--orange-lo);border-color:var(--orange-lo);}
.btn-quiet{border-color:var(--line);color:var(--cream-dim);}
.btn-quiet:hover{background:var(--cream);border-color:var(--cream);color:var(--void);}

/* ---- hero ---- */
.hero{padding:96px 0 84px;}
.hero .wrap{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;}
.hero h1{font-size:clamp(46px,7.4vw,92px);}
.hero h1 .glow{color:var(--orange-lo);}
.hero .lede{font-size:20px;color:var(--cream-dim);max-width:30em;margin:28px 0 36px;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px;}
.chip{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-dim);border:1px solid var(--line);border-radius:999px;padding:8px 15px;}
.orb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:400px;}
.orb-stage{width:100%;}
.orb-cap{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);text-align:center;color:var(--cream-dim);white-space:nowrap;}
@media(max-width:920px){.hero{padding:56px 0 64px;}
  .planet{top:-13%;right:-34%;width:74vw;opacity:0;animation:planetInSm 1.8s ease-out 1.2s forwards;}.hero .wrap{grid-template-columns:1fr;gap:20px;}
  .orb-stage{min-height:250px;order:-1;}.orb-stack{max-width:270px;}
  .orb-cap{bottom:-2px;font-size:9px;}}

.scr path{fill:none;stroke-linecap:round;}
.scr .ring{transform-box:view-box;transform-origin:50% 50%;
  animation-name:spin;animation-timing-function:linear;animation-iteration-count:infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.draw path{stroke-dasharray:var(--arc) var(--per);stroke-dashoffset:var(--per);
  animation:draw 2.4s cubic-bezier(.3,.7,.2,1) forwards;animation-delay:var(--d);}
@keyframes draw{to{stroke-dashoffset:0;}}
#heroOrb{transition:transform 1.2s ease;}
.p-art svg{transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s;
  filter:drop-shadow(0 0 7px var(--sku)) drop-shadow(0 0 18px var(--sku));}
.p:hover .p-art svg{transform:scale(1.06);}
#doneOrb{width:92px;height:92px;margin:0 auto 18px;display:block;overflow:visible;
  clip-path:circle(0% at 50% 50%);transition:clip-path 1.4s cubic-bezier(.5,.05,.2,1);}
#doneOrb.bloom{clip-path:circle(75% at 50% 50%);}
@media (prefers-reduced-motion:reduce){
  .scr .ring{animation:none;}
  .draw path{animation:none;stroke-dashoffset:0;}
  #doneOrb{clip-path:none;transition:none;}
}

/* ---- luminescence ----
   A blurred copy of the identical mark sits under the crisp one and is blended
   with `screen`, so overlapping strokes add light instead of paint. Both layers
   are built from the same seed, so every ring matches and turns in lockstep. */
.orb-stack{position:relative;width:100%;max-width:440px;margin:0 auto;}
.orb-stack > svg{display:block;width:100%;height:auto;overflow:visible;}
.orb-glow{position:absolute;inset:0;pointer-events:none;
  filter:blur(5px) saturate(1.3) brightness(1.1);
  mix-blend-mode:screen;opacity:.42;
  animation:breathe 11s ease-in-out infinite;}
/* the light the mark casts into the space around it */
.orb-stack::before{content:"";position:absolute;inset:-22%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(232,160,90,.07),rgba(217,118,31,.04) 42%,transparent 70%);}
@keyframes breathe{0%,100%{opacity:.72;}50%{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .orb-glow{animation:none;}
}

/* ---- the lineup ----
   Four identical black pouches, one glow each. Placed straight after the hero so
   the abstract mark gets a concrete payoff before any flavour detail arrives.
   The shots' own backgrounds sit within a few points of the page ground, so the
   edges are masked off and the bags float rather than sitting in four boxes. */
.lineup{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1220px;margin:0 auto;}
.bag{position:relative;text-align:center;}
.bag img{width:100%;height:auto;display:block;
  -webkit-mask-image:radial-gradient(ellipse 60% 64% at 50% 47%, #000 26%, rgba(0,0,0,.72) 58%, transparent 92%);
          mask-image:radial-gradient(ellipse 60% 64% at 50% 47%, #000 26%, rgba(0,0,0,.72) 58%, transparent 92%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);}
.bag img{filter:saturate(1) brightness(1);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease;}
.bag:hover img{transform:translateY(-10px) scale(1.04);filter:saturate(1.12) brightness(1.14);}
.bag .nm{display:block;margin-top:-18px;font-family:"DM Mono",monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim);transition:color .3s;}
.bag:hover .nm{color:var(--accent);}
.lineup .bag{opacity:0;transform:translateY(26px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);}
.lineup.in .bag{opacity:1;transform:none;}
.lineup.in .bag:nth-child(1){transition-delay:0s}
.lineup.in .bag:nth-child(2){transition-delay:.12s}
.lineup.in .bag:nth-child(3){transition-delay:.24s}
.lineup.in .bag:nth-child(4){transition-delay:.36s}
@media(max-width:820px){.lineup{grid-template-columns:1fr 1fr;gap:0;}}
@media (prefers-reduced-motion:reduce){
  .lineup .bag{opacity:1;transform:none;}
  .bag:hover img{transform:none;}
}

/* ---- flavour grid ----
   The artwork is a single composition — fruit above, product below — and is
   never cropped or split. Every flavour image shares the same proportions so
   the grid stays even as the range grows. */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:46px;max-width:880px;margin:0 auto;}
.fcard{background:rgba(17,22,33,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border:1px solid var(--line);border-radius:22px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s;}
.fcard:hover{transform:translateY(-4px);border-color:var(--accent,var(--orange));}
.fcard .shot{position:relative;overflow:hidden;}
.fcard .shot img{width:100%;height:auto;display:block;}
.fcard .body{padding:22px 24px 6px;flex:1;}
.fcard .kind{font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent,var(--orange-lo));}
/* flavour names run in DM Mono 400. It is wider than Fredoka at the same
   measure, so the sizes come down and the leading opens up. */
.fcard h3{font-family:"DM Mono",ui-monospace,monospace;font-weight:400;
  font-size:clamp(17px,1.75vw,21px);line-height:1.25;letter-spacing:.01em;
  margin:12px 0 11px;}
.fcard .desc{font-family:"DM Mono",ui-monospace,monospace;font-weight:400;
  color:var(--cream-dim);font-size:13px;line-height:1.7;margin:0;}
.fspec{display:grid;grid-template-columns:1fr;gap:0;padding:0 24px;margin-top:18px;}
.fspec .sr{display:flex;justify-content:space-between;gap:12px;padding:10px 0;
  border-top:1px solid var(--line);font-family:"DM Mono",monospace;font-size:11.5px;}
.fspec .sr .k{color:var(--cream-dim);letter-spacing:.06em;text-transform:uppercase;
  font-size:9.5px;padding-top:2px;}
.fspec .sr .v{text-align:right;}
.fcard .buy{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:18px 24px 24px;}
.fcard .buy .btn-fill{background:var(--accent,var(--orange));border-color:var(--accent,var(--orange));}
@media(max-width:900px){.fgrid{grid-template-columns:1fr;gap:34px;max-width:460px;}}
@media(max-width:560px){
  /* two spec columns squeeze the labels into two lines; one column reads cleanly */
  .fspec{grid-template-columns:1fr;}
  .fcard .body{padding:22px 22px 6px;}
  .fspec{padding:0 22px;}
  .fcard .buy{padding:20px 22px 24px;}
  .fcard .buy .btn{width:100%;justify-content:center;}
}

/* ---- recipe ---- */
.recipe{border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:rgba(12,16,24,.60);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
.rrow{display:grid;grid-template-columns:1.5fr .7fr 2.4fr;gap:20px;padding:16px 26px;
  border-top:1px solid var(--line);align-items:baseline;}
.rrow:first-child{border-top:none;background:rgba(217,118,31,.07);}
.rrow .ing{font-family:"Figtree",sans-serif;font-weight:500;font-size:15.5px;}
.rrow .pct{font-family:"DM Mono",monospace;font-size:13px;color:var(--orange-lo);}
.rrow .why{font-size:14.5px;color:var(--cream-dim);}
.rrow.head span{font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-dim);}
@media(max-width:720px){.rrow{grid-template-columns:1fr;gap:5px;padding:15px 20px;}
  .rrow.head{display:none;}}

.twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;}
.box{border:1px solid var(--line);border-radius:18px;padding:28px 26px;
  background:rgba(12,16,24,.60);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
.box h4{font-size:19px;margin:0 0 14px;}
.box p{margin:0;font-size:15px;color:var(--cream-dim);}
.box .warn{color:var(--orange-lo);}
.nrow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-top:1px solid var(--line);font-family:"DM Mono",monospace;font-size:12.5px;}
.nrow:first-of-type{border-top:none;}
.nrow .k{color:var(--cream-dim);font-size:11px;letter-spacing:.05em;text-transform:uppercase;}
.fine{margin-top:16px;font-size:12px;color:var(--cream-dim);opacity:.8;line-height:1.5;}
@media(max-width:760px){.twocol{grid-template-columns:1fr;}}

/* ---- section heads ---- */
.shd{max-width:var(--max);margin:0 auto 52px;padding:0 28px;}
.shd .mono{color:var(--orange-lo);display:block;margin-bottom:18px;}
.shd h2{font-size:clamp(32px,4.4vw,52px);max-width:15em;}
.shd p{color:var(--cream-dim);max-width:34em;margin:18px 0 0;font-size:17px;}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.st{background:rgba(12,16,24,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:18px;padding:28px 24px 30px;}
.st .n{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.16em;color:var(--orange-lo);}
.st h3{font-size:21px;margin:20px 0 10px;}
.st p{margin:0;font-size:15px;color:var(--cream-dim);}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.steps{grid-template-columns:1fr;}}

/* ---- signup ---- */
.signup{position:relative;z-index:1;}
.su-box{max-width:var(--max);margin:0 auto;padding:0 28px;}
.su-in{background:linear-gradient(150deg, rgba(17,22,33,.66), rgba(12,16,24,.60));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:26px;padding:52px 48px;display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:start;position:relative;overflow:hidden;}
.su-orb{filter:drop-shadow(0 0 10px rgba(177,75,255,.45));position:absolute;left:-140px;bottom:-160px;width:400px;opacity:.16;pointer-events:none;}
.su-copy{position:relative;z-index:2;}
.su-copy h2{font-size:clamp(28px,3.6vw,42px);}
.su-copy p{color:var(--cream-dim);margin:18px 0 0;font-size:16px;}
form{position:relative;z-index:2;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field{margin-bottom:14px;}
label{display:block;font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:8px;}
input,select,textarea{
  width:100%;background:rgba(6,8,14,.66);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;color:var(--cream);font-family:"Figtree",sans-serif;font-size:15px;font-weight:300;
  transition:border-color .18s;
}
input:focus,select:focus,textarea:focus{border-color:var(--orange);outline:none;}
textarea{resize:vertical;min-height:88px;}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cream-dim) 50%),linear-gradient(135deg,var(--cream-dim) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px;background-repeat:no-repeat;}
select option{background:var(--panel);color:var(--cream);}
.err{color:#F08A6E;font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.08em;margin-top:7px;display:none;}
.field.bad input{border-color:#F08A6E;}
.field.bad .err{display:block;}
.consent{display:flex;gap:11px;align-items:flex-start;margin:6px 0 20px;}
.consent input{width:17px;height:17px;flex:none;margin-top:3px;accent-color:var(--orange);}
.consent span{font-size:13px;color:var(--cream-dim);line-height:1.5;}
.done{display:none;text-align:center;padding:44px 20px;}
.done.on{display:block;}
.done h3{font-size:28px;color:var(--orange-lo);margin-bottom:12px;}
.done p{color:var(--cream-dim);margin:0;}
form.off{display:none;}
@media(max-width:900px){.su-in{grid-template-columns:1fr;gap:34px;padding:40px 26px;}.frow{grid-template-columns:1fr;}}

.hero .eyebrow{color:var(--orange-lo);margin-bottom:26px;}
/* the deck carries the idea; the headline just opens the door */
.hero .deck{font-family:"Fredoka",sans-serif;font-weight:500;
  font-size:clamp(21px,2.5vw,30px);line-height:1.15;letter-spacing:-.01em;
  color:var(--orange-lo);margin:20px 0 0;}
.hero .lede{margin-top:20px;}
/* violet marks every route to the form, ghosted here so it doesn't outrank the primary */
/* secondary: the same material, thinner — frosted rather than solid pearl */
.btn-signal-ghost{
  position:relative;isolation:isolate;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.34);
  color:var(--cream);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 0 26px -10px rgba(177,75,255,.5);
  transition:background .22s ease, box-shadow .22s ease, transform .14s ease;
}
.btn-signal-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 0 34px -8px rgba(177,75,255,.7);}
.btn-signal-ghost:active{transform:translateY(2px);}

/* ---- send a signal ----
   One raised surface on a page of flat ones. Inputs are recessed, the button is
   proud, the panel floats on its own light — a small, consistent depth language
   used nowhere else, so the form reads as the thing to do. */
.signal-wrap{position:relative;}
.signal-wrap::before{content:"";position:absolute;inset:-8% -4% -14%;pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 50% 55%, rgba(177,75,255,.22), transparent 70%);
  filter:blur(18px);}
.su-in{
  background:
    linear-gradient(180deg, rgba(177,75,255,.10), rgba(177,75,255,0) 42%),
    linear-gradient(150deg, rgba(23,30,44,.90), rgba(9,13,20,.88));
  border:1px solid rgba(177,75,255,.34);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -1px 0 rgba(0,0,0,.5) inset,
    0 28px 60px -22px rgba(0,0,0,.9),
    0 0 90px -30px rgba(177,75,255,.55);
}
.su-copy h2 .sig{color:var(--signal-lo);}
.su-copy .lead{color:#C3CBD6;font-size:17px;}

/* recessed fields */
.signal-wrap input,.signal-wrap select,.signal-wrap textarea{
  background:rgba(3,6,11,.62);
  border:1px solid rgba(243,239,230,.10);
  box-shadow:0 2px 7px rgba(0,0,0,.55) inset, 0 1px 0 rgba(255,255,255,.05);
}
.signal-wrap input:focus,.signal-wrap select:focus,.signal-wrap textarea:focus{
  border-color:var(--signal);
  box-shadow:0 2px 7px rgba(0,0,0,.5) inset, 0 0 0 3px rgba(177,75,255,.22);
}
.signal-wrap label{color:#9FB2BC;}
.signal-wrap .consent input{accent-color:var(--signal);}

/* ---- the wordmark ----
   Set in Fredoka, the same face as the headings, rather than the extracted logo
   lettering. Lowercase, matching how it reads on the pouch. */
.lockup .sb{margin-top:5px;}
.eyebrow-wm{font-family:"Fredoka",system-ui,sans-serif;font-weight:600;
  font-size:34px;line-height:1;letter-spacing:-.02em;
  color:var(--orange-lo);margin-bottom:26px;}
@media(max-width:560px){.eyebrow-wm{font-size:28px;}}


/* ---- compass ----
   Not a button. North, east and west are ticks; only south is drawn as a
   heading, so the object says "this way" before you read a word of it. */
.compass{display:inline-flex;align-items:flex-start;gap:18px;margin-top:30px;
  text-decoration:none;color:var(--cream-dim);}
.compass svg{width:64px;height:auto;overflow:visible;flex:none;transition:filter .3s;}
.compass .ring{fill:none;stroke:rgba(243,239,230,.30);stroke-width:1;}
.compass .ring.inner{fill:none;stroke:rgba(243,239,230,.14);stroke-width:1;stroke-dasharray:2 6;}
.compass .tick{stroke:rgba(243,239,230,.34);stroke-width:1.2;stroke-linecap:round;}
.compass .hub{fill:var(--orange-lo);stroke:none;}
.compass .south line,.compass .south path{
  stroke:var(--orange);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;}
.compass .south{animation:bearing 2.8s ease-in-out infinite;}
@keyframes bearing{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}
.compass .lbl{color:var(--cream-dim);transition:color .25s;letter-spacing:.16em;margin-top:25px;}
.compass:hover .lbl{color:var(--orange-lo);}
.compass:hover .south line,.compass:hover .south path{stroke:var(--orange-lo);}
.compass:hover .ring{stroke:rgba(243,239,230,.5);}
.compass:hover svg{filter:drop-shadow(0 0 12px rgba(217,118,31,.45));}
@media (prefers-reduced-motion:reduce){.compass .south{animation:none;}}

/* pearl button — a material rather than a colour.
   White body, light coming off the top edge, a faint iridescent sheen across it,
   and the violet living only in the glow it casts on the page around it. */
.btn-signal{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#FAF8FC 40%,#E9E5F0 100%);
  border:1px solid rgba(255,255,255,.85);
  color:#17141C;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 3px rgba(96,64,140,.28),
    0 8px 18px -8px rgba(0,0,0,.85),
    0 0 30px -6px rgba(177,75,255,.42);
  transition:transform .14s ease, box-shadow .2s ease, filter .2s ease;
}
/* the sheen. negative z-index puts it over the button's own background but
   under the label, so the text stays crisp. */
/* the face: a soft pearl sheen sitting over the white body */
.btn-signal::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:
    radial-gradient(120% 90% at 30% -20%, rgba(255,255,255,.9), transparent 60%),
    linear-gradient(112deg,
      rgba(177,75,255,.20) 0%,
      rgba(110,200,255,.14) 20%,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,.34) 52%,
      rgba(255,255,255,0) 66%,
      rgba(233,161,58,.18) 100%);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}

/* the edge: a coloured specular that travels all the way round the object.
   A conic gradient rotated by --shimmer, masked to a hairline ring so only the
   rim catches it — the light moves, the button doesn't. */
.btn-signal::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:conic-gradient(from var(--shimmer),
    rgba(255,255,255,0)      0deg,
    rgba(177,75,255,.95)    28deg,
    rgba(110,200,255,.95)   58deg,
    rgba(255,255,255,1)     78deg,
    rgba(233,161,58,.95)   100deg,
    rgba(255,255,255,0)    150deg,
    rgba(255,255,255,0)    360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:trace 4.5s linear infinite;
  pointer-events:none;
}
@keyframes trace{to{--shimmer:360deg;}}
.btn-signal:hover::after{animation-duration:1.6s;}
.btn-signal:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 3px rgba(96,64,140,.24),
    0 12px 24px -8px rgba(0,0,0,.85),
    0 0 44px -4px rgba(177,75,255,.62);
}
.btn-signal:hover::before{transform:translateX(5%);}
.btn-signal:active{
  transform:translateY(2px);
  box-shadow:
    inset 0 2px 5px rgba(96,64,140,.35),
    0 4px 10px -6px rgba(0,0,0,.8),
    0 0 22px -6px rgba(177,75,255,.4);
}

/* the callout that carries the invitation earlier */
.callout{max-width:1160px;margin:0 auto;padding:34px 38px;border-radius:22px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  background:linear-gradient(140deg, rgba(177,75,255,.12), rgba(177,75,255,.02));
  border:1px solid rgba(177,75,255,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 24px 50px -26px rgba(0,0,0,.9);}
.callout p{margin:0;font-size:19px;color:var(--cream);}
.callout p span{color:var(--signal-lo);}
.callout .sub{display:block;font-size:14.5px;color:var(--cream-dim);margin-top:6px;}
@media(max-width:700px){.callout{padding:26px 24px;}.callout .btn{width:100%;justify-content:center;}}

@media (prefers-reduced-motion:reduce){
  .btn-signal,.btn-signal:hover,.btn-signal:active{transform:none;transition:none;}
  .btn-signal::after{animation:none;}
}

/* ---- wholesale ---- */
.ws{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.ws h2{font-size:clamp(30px,4vw,46px);margin-bottom:18px;}
.ws p{color:var(--cream-dim);margin:0 0 30px;}
.wl{list-style:none;padding:0;margin:0;font-family:"DM Mono",monospace;font-size:11.5px;letter-spacing:.05em;}
.wl li{padding:14px 0;border-top:1px solid var(--line);color:var(--cream-dim);}
.wl li:last-child{border-bottom:1px solid var(--line);}
@media(max-width:860px){.ws{grid-template-columns:1fr;gap:34px;}}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line);padding:60px 0 40px;position:relative;z-index:1;}
.foot .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;}
.foot h4{font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--cream-dim);margin:0 0 16px;font-weight:400;}
.foot ul{list-style:none;padding:0;margin:0;font-size:15px;}
.foot li{padding:6px 0;}
.foot a{text-decoration:none;color:var(--cream);}
.foot a:hover{color:var(--orange-lo);}
.disc{margin-top:48px;padding-top:26px;border-top:1px solid var(--line);font-size:12px;line-height:1.65;color:var(--cream-dim);max-width:72em;}
@media(max-width:860px){.foot .wrap{grid-template-columns:1fr 1fr;}}
/* ---- eyebrows ----
   The small mono labels that sit above a heading, all raised 30%. Scoped to
   eyebrow positions only — nav links, chips, spec rows and batch captions use
   the same face but aren't eyebrows and keep their sizes. */
.shd .mono,
.hero .eyebrow,
.su-copy .mono,
.ws .mono{font-size:14.3px;letter-spacing:.15em;}
.fcard .kind{font-size:12.4px;}
.st .n{font-size:13px;}
.bag .nm{font-size:13px;}
.foot h4{font-size:12.4px;}
.rrow.head span{font-size:12.4px;}


/* ============================================================
   ADDED FOR THE CHOCOLATE CATEGORY
   ============================================================ */

/* ---- product family doors (home) ---- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1100px;margin:0 auto;}
.door{position:relative;display:block;text-decoration:none;border-radius:24px;overflow:hidden;
  background:rgba(17,22,33,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid var(--line);transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s;}
.door:hover{transform:translateY(-5px);border-color:var(--accent,var(--orange));}
.door .art{aspect-ratio:16/10;overflow:hidden;background:#0A0D14;
  display:flex;align-items:center;justify-content:center;}
.door .art img{width:100%;height:100%;object-fit:cover;display:block;}
.door .art .ph{color:var(--cream-dim);font-family:"DM Mono",monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:20px;opacity:.5;}
.door .body{padding:26px 28px 30px;}
.door .kind{font-family:"DM Mono",monospace;font-size:12.4px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent,var(--orange-lo));}
.door h3{font-size:clamp(24px,2.4vw,31px);margin:12px 0 10px;color:var(--cream);}
.door p{margin:0 0 18px;color:var(--cream-dim);font-size:15.5px;}
.door .go{display:inline-flex;align-items:center;gap:9px;font-family:"DM Mono",monospace;
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent,var(--orange-lo));}
.door .go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;
  transition:transform .25s;}
.door:hover .go svg{transform:translateX(5px);}
@media(max-width:860px){.doors{grid-template-columns:1fr;}}

/* ---- family divider on the products page ---- */
.family{position:relative;z-index:1;padding:74px 0 0;}
.family .wrap{max-width:var(--max);}
.family-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--line);}
.family-hd h2{font-size:clamp(34px,5vw,58px);}
.family-hd .mono{color:var(--accent,var(--orange-lo));display:block;margin-bottom:16px;font-size:14.3px;}
.family-hd p{margin:0;max-width:30em;color:var(--cream-dim);font-size:16px;}

/* ---- format blocks (dots / bars) ---- */
.formats{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.fmt{background:rgba(17,22,33,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s;}
.fmt:hover{transform:translateY(-4px);border-color:var(--accent,var(--orange));}
.fmt .shot{aspect-ratio:1/1;overflow:hidden;background:#0A0D14;
  display:flex;align-items:center;justify-content:center;}
.fmt .shot img{width:100%;height:100%;object-fit:cover;display:block;}
.fmt .shot .ph{color:var(--cream-dim);font-family:"DM Mono",monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:24px;opacity:.45;line-height:1.8;}
.fmt .body{padding:24px 26px 6px;flex:1;}
.fmt .kind{font-family:"DM Mono",monospace;font-size:12.4px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent,var(--orange-lo));}
.fmt h3{font-size:clamp(23px,2.2vw,29px);margin:12px 0 10px;}
.fmt .desc{color:var(--cream-dim);font-size:14.5px;margin:0;}
.fmt .buy{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:18px 26px 24px;}
.fmt .buy .btn-fill{background:var(--accent,var(--orange));border-color:var(--accent,var(--orange));}
@media(max-width:860px){.formats{grid-template-columns:1fr;}}
@media(max-width:560px){
  .fmt .body{padding:20px 20px 4px;} .fmt .fspec{padding:0 20px;}
  .fmt .buy{padding:16px 20px 20px;} .fmt .buy .btn{width:100%;justify-content:center;}
}

/* placeholder tiles, so the shape is reviewable before the artwork lands */
.ph-tile{border:1px dashed var(--line);border-radius:14px;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;}


/* ---- format panels: three shots, then the four flavours ---- */
.fmt-panel{background:rgba(17,22,33,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid var(--line);border-radius:24px;overflow:hidden;margin-bottom:26px;}
.fmt-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}
.fmt-shots .tile{aspect-ratio:1/1;background:#0A0D14;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;text-align:center;padding:18px;overflow:hidden;}
.fmt-shots .tile img{width:100%;height:100%;object-fit:cover;display:block;}
.fmt-shots .tile .ph-lbl{font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent,var(--orange-lo));opacity:.85;}
.fmt-shots .tile .ph-sub{font-size:12.5px;color:var(--cream-dim);opacity:.6;max-width:20ch;line-height:1.45;}
.fmt-body{display:grid;grid-template-columns:.92fr 1.08fr;gap:38px;padding:30px 32px 32px;}
.fmt-body .kind{font-family:"DM Mono",monospace;font-size:12.4px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent,var(--orange-lo));}
.fmt-body h3{font-size:clamp(24px,2.4vw,32px);margin:12px 0 10px;}
.fmt-body .desc{color:var(--cream-dim);font-size:15px;margin:0 0 20px;}
.fmt-body .fspec{padding:0;margin:0 0 20px;grid-template-columns:1fr;}
.fmt-body .buy{padding:0;display:flex;gap:9px;flex-wrap:wrap;}
.fmt-body .buy .btn-fill{background:var(--accent,var(--orange));border-color:var(--accent,var(--orange));}

/* ---- the four flavours ---- */
.flavs h4{font-family:"DM Mono",monospace;font-size:12.4px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-dim);margin:0 0 14px;font-weight:400;}
.flav{padding:13px 0;border-top:1px solid var(--line);}
.flav .nm{font-family:"DM Mono",ui-monospace,monospace;font-weight:400;
  font-size:15px;line-height:1.3;letter-spacing:.01em;color:var(--cream);}
.flav .note{font-family:"DM Mono",ui-monospace,monospace;font-weight:400;
  font-size:12.5px;line-height:1.65;color:var(--cream-dim);margin:5px 0 0;}
.flav .badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.badge{font-family:"DM Mono",monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;border:1px solid var(--line);color:var(--cream-dim);}
.badge.ok{border-color:rgba(243,239,230,.24);}
/* declarable allergens get their own colour — they are not a style detail */
.badge.allergen{border-color:rgba(229,51,78,.55);color:#F4899B;background:rgba(229,51,78,.10);}
@media(max-width:900px){.fmt-body{grid-template-columns:1fr;gap:28px;padding:26px 24px 28px;}}
@media(max-width:640px){.fmt-shots{grid-template-columns:1fr;}.fmt-shots .tile{aspect-ratio:16/9;}}


/* ============================================================
   MOBILE NAVIGATION
   Below 900px the link row was hidden and nothing replaced it. With one page
   that was survivable — you scrolled. Across five pages it stranded anyone on
   a phone, so the links move into a panel behind a toggle.
   ============================================================ */
.navtoggle{display:none;align-items:center;justify-content:center;
  width:42px;height:42px;margin-left:14px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  cursor:pointer;padding:0;flex:none;}
.navtoggle:hover{background:rgba(255,255,255,.12);}
.navtoggle span{display:block;width:17px;height:1.5px;background:var(--cream);
  border-radius:2px;position:relative;transition:transform .28s ease, opacity .2s ease;}
.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0;
  width:17px;height:1.5px;background:var(--cream);border-radius:2px;
  transition:transform .28s ease, top .28s ease;}
.navtoggle span::before{top:-6px;} .navtoggle span::after{top:6px;}
.navtoggle[aria-expanded="true"] span{background:transparent;}
.navtoggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.navtoggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

.navpanel{position:fixed;left:0;right:0;top:76px;z-index:58;
  background:#06080E;
  border-bottom:1px solid var(--line);
  padding:10px 28px 26px;
  opacity:0;transform:translateY(-10px);pointer-events:none;
  transition:opacity .24s ease, transform .24s cubic-bezier(.2,.7,.2,1);
  max-height:calc(100vh - 76px);overflow-y:auto;display:none;}
.navpanel.open{opacity:1;transform:none;pointer-events:auto;}
.navpanel a{display:block;padding:17px 2px;border-bottom:1px solid var(--line);
  font-family:"DM Mono",monospace;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);text-decoration:none;}
.navpanel a:last-of-type{border-bottom:none;}
.navpanel a[aria-current="page"]{color:var(--orange-lo);}
/* the panel's link styles would otherwise repaint the button's label cream on
   pearl, which is unreadable — restore the button's own treatment */
.navpanel a.btn{margin-top:20px;width:100%;justify-content:center;
  display:inline-flex;padding:16px 24px;border-bottom:none;
  color:var(--signal-ink);font-size:12px;letter-spacing:.15em;}
body.nav-open{overflow:hidden;}
/* dims the page behind the panel so the two never read as one surface */
.navscrim{position:fixed;inset:76px 0 0;z-index:54;background:rgba(3,5,9,.72);
  opacity:0;pointer-events:none;transition:opacity .24s ease;display:none;}
.navscrim.open{opacity:1;pointer-events:auto;}
@media(max-width:900px){.navscrim{display:block;}}

/* which page you are on */
.navlinks a[aria-current="page"]{color:var(--orange-lo);}

@media(max-width:900px){
  .navtoggle{display:inline-flex;}
  .navpanel{display:block;}
  /* the header CTA moves into the panel so the bar stays uncluttered */
  .nav .wrap > .btn-signal{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .navpanel{transition:none;} .navtoggle span,.navtoggle span::before,.navtoggle span::after{transition:none;}
}


/* ---- shared flavour grid ----
   The four flavours are common to both formats, so they are listed once here
   rather than repeated inside each format panel. */
.flavgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.flavcard{background:rgba(17,22,33,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid var(--line);border-radius:18px;padding:24px 22px 22px;
  transition:border-color .25s,transform .25s cubic-bezier(.2,.7,.2,1);}
.flavcard:hover{border-color:var(--accent,var(--orange));transform:translateY(-3px);}
.flavcard .nm{font-family:"DM Mono",ui-monospace,monospace;font-weight:400;
  font-size:15px;line-height:1.3;letter-spacing:.01em;color:var(--cream);}
.flavcard .note{font-family:"DM Mono",ui-monospace,monospace;font-weight:400;
  font-size:12.5px;line-height:1.65;color:var(--cream-dim);margin:9px 0 0;}
.flavcard .badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;}
@media(max-width:1180px){.flavgrid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:1000px){.flavgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.flavgrid{grid-template-columns:1fr;}}

/* with the flavour list gone, the panel body is name and copy against specs */
.fmt-body{grid-template-columns:1.05fr .95fr;}


/* with the flavour list moved out, the body no longer needs two columns —
   the specs spread across instead of stacking in a half-empty grid */
.fmt-body{display:block;padding:28px 32px 30px;}
.fmt-body .desc{max-width:62ch;}
.fmt-body .fspec{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;
  margin:22px 0 0;padding:0;}
.fmt-body .buy{margin-top:24px;}
@media(max-width:760px){
  .fmt-body{padding:24px 22px 26px;}
  .fmt-body .fspec{grid-template-columns:1fr;}
  .fmt-body .buy .btn{width:100%;justify-content:center;}
}


/* ---- door call to action ----
   Styled as a button but it stays a <span>: the whole card is already an <a>,
   and nesting a button or a second anchor inside a link is invalid and breaks
   keyboard navigation. The card remains one large, single target. */
.door .meta{display:block;font-family:"DM Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);
  margin:0 0 16px;padding-top:16px;border-top:1px solid var(--line);}
.door .go{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"DM Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;padding:15px 26px;border-radius:999px;
  background:var(--accent,var(--orange));color:#120A02;
  border:1px solid var(--accent,var(--orange));
  box-shadow:0 8px 20px -10px rgba(0,0,0,.9);
  transition:transform .22s cubic-bezier(.2,.7,.2,1), filter .22s, box-shadow .22s;}
.door:hover .go{filter:brightness(1.08);transform:translateY(-1px);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.95);}
.door .go svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;}
@media(max-width:560px){.door .go{width:100%;}}


/* ---- prices ---- */
.fspec .sr .v.price{color:var(--accent,var(--orange-lo));font-size:14px;}

/* ---- bundles ---- */
.bundles{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.bundle{background:rgba(17,22,33,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid var(--line);border-radius:22px;padding:30px 30px 32px;
  transition:border-color .25s,transform .25s cubic-bezier(.2,.7,.2,1);}
.bundle:hover{border-color:var(--orange);transform:translateY(-3px);}
.bundle .bt{font-family:"DM Mono",ui-monospace,monospace;font-size:12.4px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange-lo);}
.bundle h3{font-size:clamp(21px,2.1vw,27px);margin:12px 0 10px;}
.bundle p{margin:0 0 22px;color:var(--cream-dim);font-size:15px;}
.bprice{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:22px;
  padding-top:18px;border-top:1px solid var(--line);}
.bprice .now{font-family:"Fredoka",sans-serif;font-weight:600;font-size:34px;
  line-height:1;color:var(--cream);}
.bprice .was{font-family:"DM Mono",ui-monospace,monospace;font-size:14px;
  color:var(--cream-dim);text-decoration:line-through;}
.bprice .save{font-family:"DM Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-lo);
  border:1px solid rgba(232,160,90,.45);border-radius:999px;padding:5px 11px;}
@media(max-width:820px){.bundles{grid-template-columns:1fr;}}
@media(max-width:560px){.bundle{padding:24px 22px 26px;}.bundle .btn{width:100%;justify-content:center;}}


/* ---- where to buy ---- */
.emptystate{max-width:760px;margin:0 auto;text-align:center;padding:52px 40px 54px;
  border:1px dashed var(--line);border-radius:24px;
  background:linear-gradient(160deg, rgba(217,118,31,.06), rgba(217,118,31,.01));}
.emptystate .mono{color:var(--orange-lo);display:block;margin-bottom:18px;font-size:14.3px;}
.emptystate h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:18px;}
.emptystate p{color:var(--cream-dim);margin:0 auto;max-width:44em;}
.es-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;}

.stockistlist .region{margin-bottom:44px;}
.stockistlist .region h3{font-size:clamp(21px,2.2vw,28px);margin:0 0 6px;}
.stockistlist .region h3 + .slist{border-top:1px solid var(--line);}
.slist{list-style:none;padding:0;margin:0;}
.stockist{display:grid;grid-template-columns:1.1fr 1.4fr .8fr;gap:26px;align-items:start;
  padding:20px 4px;border-bottom:1px solid var(--line);}
.stockist .sname{font-family:"DM Mono",ui-monospace,monospace;font-size:15px;
  letter-spacing:.01em;color:var(--cream);}
.stockist .saddr{font-family:"DM Mono",ui-monospace,monospace;font-size:12.5px;
  line-height:1.7;color:var(--cream-dim);}
.stockist .scarries{font-family:"DM Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--orange-lo);
  border:1px solid rgba(232,160,90,.35);border-radius:999px;padding:6px 12px;justify-self:start;}
@media(max-width:760px){
  .stockist{grid-template-columns:1fr;gap:8px;}
  .emptystate{padding:40px 24px 42px;}
  .es-actions .btn{width:100%;justify-content:center;}
}

/* the nav gained a fifth link — give it room before the mobile breakpoint */
@media(max-width:1180px) and (min-width:901px){
  .navlinks{gap:20px;}
  .navlinks a{font-size:10.5px;letter-spacing:.10em;}
}


/* ---- wholesale cases ---- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.case{background:rgba(17,22,33,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .25s,transform .25s cubic-bezier(.2,.7,.2,1);}
.case:hover{border-color:var(--orange);transform:translateY(-4px);}
.case .cimg{aspect-ratio:1/1;overflow:hidden;background:#0A0D14;}
.case .cimg img{width:100%;height:100%;object-fit:cover;display:block;}
.case .cbody{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1;}
.case .ckind{font-family:"DM Mono",ui-monospace,monospace;font-size:12.4px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--orange-lo);}
.case h3{font-size:clamp(21px,2.1vw,26px);margin:11px 0 18px;}
.crow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;
  border-top:1px solid var(--line);font-family:"DM Mono",ui-monospace,monospace;font-size:12.5px;}
.crow .k{color:var(--cream-dim);font-size:10px;letter-spacing:.1em;text-transform:uppercase;}
.crow .v.big{font-family:"Fredoka",sans-serif;font-weight:600;font-size:28px;
  line-height:1;color:var(--cream);}
.crow .v.margin{color:var(--orange-lo);}
.case .btn{margin-top:auto;padding-top:14px;margin-top:22px;width:100%;justify-content:center;}
@media(max-width:960px){.cases{grid-template-columns:1fr;max-width:460px;margin:0 auto;}}


/* ============================================================
   HERO — orb raised and bled right (desktop only)
   Scoped above 920px so the stacked mobile hero is untouched:
   there the orb sits above the copy and must stay centred.
   ============================================================ */
@media(min-width:921px){
  .hero{padding:66px 0 40px;}
  /* align the orb to the top of the row rather than the middle of the whole
     column, so it rises to meet the headline instead of sinking below it */
  .hero .wrap{align-items:start;}
  .orb-stage{min-height:0;padding-top:6px;margin-right:-7%;}
  .orb-stack{max-width:520px;margin:0 0 0 auto;}
  .orb-cap{bottom:-14px;}
  .hero .lede{margin:22px 0 30px;}
  .hero .chips{margin-top:22px;}
  .compass{margin-top:22px;}
}


/* ============================================================
   MOBILE HERO — the mark was eating the fold
   At 270px the orb plus its caption filled roughly 60% of the
   first screen before a single word appeared.
   ============================================================ */
@media(max-width:920px){
  .orb-stage{min-height:190px;}
  .orb-stack{max-width:200px;}
  .orb-cap{bottom:-4px;font-size:8.5px;letter-spacing:.13em;}
  .hero{padding:44px 0 56px;}
  .hero .wrap{gap:14px;}
}

/* ============================================================
   BUTTON HOVER — violet, and it should look lit rather than filled
   Two shadows do the work: a tight ring that reads as the edge
   catching light, and a wide soft bloom that reads as the light
   falling on the page around it.
   ============================================================ */
:root{
  --hov:#B14BFF;
  --hov-lo:#C97BFF;
  --hov-hi:#8A2CD6;
  --hov-ink:#170328;
}

/* the base rule turned every button orange on hover — that is what
   this replaces, so the more specific rules below inherit violet */
.btn:hover{
  background:linear-gradient(180deg, var(--hov-lo), var(--hov) 52%, var(--hov-hi));
  border-color:var(--hov-lo);
  color:var(--hov-ink);
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(201,123,255,.45),
    0 10px 26px -8px rgba(177,75,255,.75),
    0 0 44px -6px rgba(177,75,255,.55);
}
.btn:active{transform:translateY(1px);
  box-shadow:0 0 0 1px rgba(201,123,255,.4), 0 4px 12px -6px rgba(177,75,255,.6);}

.btn-fill:hover{
  background:linear-gradient(180deg, var(--hov-lo), var(--hov) 52%, var(--hov-hi));
  border-color:var(--hov-lo);
  color:var(--hov-ink);
}

/* the outline button lights from within rather than filling solid */
.btn-quiet:hover{
  background:rgba(177,75,255,.12);
  border-color:var(--hov);
  color:#E4C6FF;
  box-shadow:
    0 0 26px -6px rgba(177,75,255,.6),
    inset 0 0 20px -8px rgba(177,75,255,.75);
}

/* per-product buttons keep their flavour colour at rest, violet on hover */
.fcard .buy .btn-fill:hover,
.fmt .buy .btn-fill:hover,
.fmt-body .buy .btn-fill:hover,
.case .btn-fill:hover,
.bundle .btn-fill:hover{
  background:linear-gradient(180deg, var(--hov-lo), var(--hov) 52%, var(--hov-hi));
  border-color:var(--hov-lo);
}

/* the door CTA glows without losing its family accent underneath */
.door:hover .go{
  background:linear-gradient(180deg, var(--hov-lo), var(--hov) 52%, var(--hov-hi));
  border-color:var(--hov-lo);
  color:var(--hov-ink);
  filter:none;
  box-shadow:
    0 0 0 1px rgba(201,123,255,.45),
    0 12px 28px -8px rgba(177,75,255,.75),
    0 0 46px -6px rgba(177,75,255,.5);
}

@media (prefers-reduced-motion:reduce){
  .btn:hover,.btn:active,.door:hover .go{transform:none;}
}


/* ============================================================
   HOVER, SOFTENED
   The solid violet fill was reading as paint. Translucent over the
   starfield with a blur behind it reads as light instead — the page
   shows through, and the bloom does the work.
   Text flips to pale violet: dark ink needs a solid fill to sit on,
   and there isn't one any more.
   ============================================================ */
.btn:hover,
.btn-fill:hover,
.fcard .buy .btn-fill:hover,
.fmt .buy .btn-fill:hover,
.fmt-body .buy .btn-fill:hover,
.case .btn-fill:hover,
.bundle .btn-fill:hover,
.door:hover .go{
  background:linear-gradient(180deg,
    rgba(201,123,255,.30),
    rgba(177,75,255,.22) 55%,
    rgba(138,44,214,.18));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-color:rgba(201,123,255,.55);
  color:#EBD4FF;
  box-shadow:
    0 0 0 1px rgba(201,123,255,.22),
    0 10px 26px -12px rgba(177,75,255,.5),
    0 0 40px -12px rgba(177,75,255,.42);
}
.btn-quiet:hover{
  background:rgba(177,75,255,.09);
  border-color:rgba(177,75,255,.5);
  color:#E0C2FF;
  box-shadow:
    0 0 22px -10px rgba(177,75,255,.45),
    inset 0 0 18px -10px rgba(177,75,255,.5);
}
.btn:active{box-shadow:0 0 0 1px rgba(201,123,255,.3), 0 4px 10px -8px rgba(177,75,255,.4);}


/* ---- page label ----
   Mirrors the packaging hierarchy: descriptor above the wordmark, the way
   "PEACH SUPERNOVA" sits above "interstellar" on the pouch. Interior pages
   carry it; the homepage doesn't, because it isn't in a family. */
.pagelabel{display:block;font-size:14.3px;letter-spacing:.22em;
  color:var(--cream-dim);margin-bottom:14px;}
@media(max-width:560px){.pagelabel{font-size:12.5px;letter-spacing:.18em;margin-bottom:10px;}}


/* ============================================================
   GUMMY FLAVOURS — full-width rows
   Was a 2-up grid: 417px cards, 415px square image stacked on a
   tall text column, 897px per card and a 38-character measure.
   Now one row per flavour, image left, content right — the same
   wide horizontal rhythm the chocolate panels use.
   ============================================================ */
@media(min-width:901px){
  .fgrid{grid-template-columns:1fr;max-width:none;gap:26px;}
  .fcard{
    display:grid;
    grid-template-columns:380px 1fr;
    grid-template-rows:auto auto 1fr;
    align-items:start;
  }
  .fcard .shot{grid-column:1;grid-row:1 / -1;aspect-ratio:auto;height:100%;}
  .fcard .shot img{height:100%;object-fit:cover;}
  .fcard .body{grid-column:2;padding:30px 34px 0;}
  .fcard .desc{max-width:64ch;}
  .fcard .fspec{grid-column:2;grid-template-columns:1fr 1fr;gap:0 34px;
    padding:0 34px;margin-top:22px;}
  .fcard .buy{grid-column:2;padding:22px 34px 30px;}
  .fcard h3{font-size:clamp(19px,1.9vw,23px);}
}


/* ============================================================
   EYEBROWS, LARGER
   14.3px -> 18px on desktop. Tested: 18px is exactly where the
   longest label ("How it's made · chocolate", 25 characters)
   begins wrapping to two lines at 390px, so mobile holds at 15px.
   The secondary tier moves less, so card labels stay clearly
   below the flavour names they sit above.
   ============================================================ */
.shd .mono,
.hero .eyebrow,
.pagelabel,
.su-copy .mono,
.ws .mono{font-size:18px;letter-spacing:.17em;}
.pagelabel{letter-spacing:.20em;}

.fcard .kind,
.fmt-body .kind,
.door .kind,
.case .ckind,
.bundle .bt,
.foot h4,
.rrow.head span,
.flavs h4{font-size:14px;}
.st .n,
.bag .nm{font-size:14.5px;}

@media(max-width:640px){
  .shd .mono,.hero .eyebrow,.pagelabel,.su-copy .mono,.ws .mono{
    font-size:15px;letter-spacing:.16em;}
  .fcard .kind,.fmt-body .kind,.door .kind,.case .ckind,
  .bundle .bt,.foot h4,.rrow.head span,.flavs h4{font-size:12.5px;}
  .st .n,.bag .nm{font-size:13px;}
}


/* ---- compass, centred and enlarged ----
   Moved out of the left column so it sits under both, where a scroll cue
   belongs. Label beneath rather than beside, so the whole thing is symmetrical
   about the arrow. */
.hero .wrap.compass-wrap{display:flex;justify-content:center;
  margin-top:6px;grid-template-columns:none;gap:0;}
.compass-wrap .compass{flex-direction:column;align-items:center;gap:7px;margin-top:0;}
.compass-wrap .compass svg{width:82px;}
.compass-wrap .compass .lbl{margin-top:0;font-size:14px;letter-spacing:.20em;}
@media(max-width:920px){
  .hero .wrap.compass-wrap{margin-top:10px;}
  .compass-wrap .compass svg{width:68px;}
  .compass-wrap .compass .lbl{font-size:12.5px;}
}


/* ============================================================
   FINAL TRANSMISSION
   A message found at the edge of the universe rather than a call
   to action. Real text in the DOM; the script splits it into
   per-character spans for the sweep and keeps an unsplit copy for
   screen readers. Opacity and text-shadow only, so nothing reflows.
   ============================================================ */
.transmission{
  position:relative;
  display:block;
  margin:0 auto 26px;
  padding:78px 24px;              /* the generous dark field it sits in */
  max-width:44ch;
  text-align:center;
  font-family:"DM Mono",ui-monospace,monospace;
  font-weight:400;
  font-size:13px;
  line-height:2.4;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--cream);
  opacity:1;
}
.transmission .sr{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

/* words keep their integrity so the line wraps between words, not letters */
.transmission .w{display:inline-block;white-space:nowrap;}
.transmission .ch{
  display:inline-block;
  opacity:.14;                    /* the low-contrast resting state */
  will-change:opacity;
}
.transmission.lit .ch{
  animation:tx-lit .85s cubic-bezier(.32,.72,.28,1) forwards;
  animation-delay:calc(var(--i) * 34ms);
}
@keyframes tx-lit{
  0%  {opacity:.14; text-shadow:none;}
  42% {opacity:1;   text-shadow:0 0 16px var(--c), 0 0 5px var(--c);}
  100%{opacity:.70; text-shadow:0 0 12px rgba(243,239,230,.16);}
}

/* the point of light that carries the signal across */
.transmission .spark{
  position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;
  border-radius:50%;opacity:0;pointer-events:none;
  background:#D8B6FF;
  box-shadow:0 0 16px 5px rgba(177,75,255,.5);
}
.transmission.lit .spark{animation:tx-spark 1.85s cubic-bezier(.36,.1,.3,1) forwards;}
@keyframes tx-spark{
  0%   {opacity:0;   left:2%;  background:#C88BFF; box-shadow:0 0 14px 4px rgba(177,75,255,.55);}
  8%   {opacity:.95;}
  35%  {            background:#7FA0E8; box-shadow:0 0 15px 5px rgba(59,95,168,.55);}
  65%  {            background:#F0BE8A; box-shadow:0 0 16px 5px rgba(232,160,90,.5);}
  88%  {opacity:.85; background:#F7F2E8; box-shadow:0 0 18px 6px rgba(243,239,230,.42);}
  100% {opacity:0;  left:98%; background:#F7F2E8;}
}

/* two or three stars catch the light as it leaves */
.transmission .tstar{position:absolute;border-radius:50%;background:#F3EFE6;
  opacity:.10;pointer-events:none;padding:0;border:0;}
.transmission .tstar1{width:2.5px;height:2.5px;right:2%;  top:38%;}
.transmission .tstar2{width:2px;  height:2px;  right:-1%; top:60%;}
.transmission .tstar3{width:1.6px;height:1.6px;right:5%;  top:70%;}
.transmission.lit .tstar{animation:tx-star 1.1s ease-out forwards;}
.transmission.lit .tstar1{animation-delay:1.62s;}
.transmission.lit .tstar2{animation-delay:1.74s;}
.transmission.lit .tstar3{animation-delay:1.68s;}
@keyframes tx-star{
  0%  {opacity:.10; box-shadow:none;}
  22% {opacity:.95; box-shadow:0 0 9px 2px rgba(243,239,230,.55);}
  100%{opacity:.24; box-shadow:0 0 5px 1px rgba(243,239,230,.14);}
}

@media(max-width:640px){
  .transmission{font-size:11.5px;letter-spacing:.30em;padding:56px 18px;
    max-width:26ch;line-height:2.5;}
}

/* reduced motion: the whole message fades in, no travelling light */
@media (prefers-reduced-motion:reduce){
  .transmission .ch{opacity:.14;}
  .transmission.lit .ch{animation:none;opacity:.72;
    transition:opacity .7s ease;text-shadow:0 0 12px rgba(243,239,230,.14);}
  .transmission .spark{display:none;}
  .transmission.lit .tstar{animation:none;opacity:.22;}
}


/* each sentence holds together, so the line breaks between them
   rather than mid-phrase on a narrow screen */
.pagelabel span{display:inline-block;}


/* ============================================================
   BRAND LINE
   Same scale and treatment as the final transmission, pinned to the
   top-left corner of the hero. It runs the same light sweep, then keeps
   a slow resting glow rather than settling flat.
   ============================================================ */
.hero-tag{padding-top:6px;padding-bottom:0;}
.brandline{
  position:relative;
  display:inline-block;
  margin:0;
  font-family:"DM Mono",ui-monospace,monospace;
  font-weight:400;
  font-size:13px;
  line-height:1.9;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--cream);
}
.brandline .sr{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.brandline .w{display:inline-block;white-space:nowrap;}
.brandline .ch{display:inline-block;opacity:.14;will-change:opacity;}
.brandline.lit .ch{
  animation:tx-lit .85s cubic-bezier(.32,.72,.28,1) forwards;
  animation-delay:calc(var(--i) * 30ms);
}
.brandline .spark{
  position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;
  border-radius:50%;opacity:0;pointer-events:none;background:#D8B6FF;
  box-shadow:0 0 14px 4px rgba(177,75,255,.5);
}
.brandline.lit .spark{animation:tx-spark 1.6s cubic-bezier(.36,.1,.3,1) forwards;}
.brandline .tstar{display:none;}   /* the corner has the real starfield behind it */

/* the resting glow — begins once the sweep has passed */
.brandline.rest.lit{animation:brand-rest 7s ease-in-out 1.9s infinite alternate;}
@keyframes brand-rest{
  from{filter:drop-shadow(0 0 3px rgba(232,160,90,.16));}
  to  {filter:drop-shadow(0 0 11px rgba(232,160,90,.40));}
}

/* the hero starts higher now that the line has its own row */
@media(min-width:921px){ .hero{padding-top:22px;} .hero-tag{padding-top:10px;} }
@media(max-width:920px){ .hero{padding-top:16px;} }
@media(max-width:640px){
  .brandline{font-size:11.5px;letter-spacing:.28em;}
}
@media (prefers-reduced-motion:reduce){
  .brandline.rest.lit{animation:none;filter:drop-shadow(0 0 7px rgba(232,160,90,.26));}
  .brandline .spark{display:none;}
  .brandline.lit .ch{animation:none;opacity:.72;transition:opacity .7s ease;}
}


/* the longer chip copy needs a slightly tighter pill to stay on one row */
.chips{gap:8px;}
.chip{letter-spacing:.09em;padding:8px 13px;}
@media(max-width:640px){.chip{font-size:9.5px;letter-spacing:.07em;padding:7px 11px;}}


/* ============================================================
   CART
   Provider-agnostic: every button carries data-sku / data-name /
   data-price / data-unit, so wiring a checkout provider later is a
   mapping job rather than a rebuild.
   ============================================================ */

/* --- flavour picker on the chocolate panels --- */
.picker{margin:22px 0 0;}
.pk-label{display:block;font-family:"DM Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:11px;}
.fl-row{display:flex;gap:8px;flex-wrap:wrap;}
.fl{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cream-dim);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:9px 15px;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;}
.fl:hover{color:var(--cream);border-color:rgba(201,123,255,.5);}
.fl[aria-checked="true"]{color:var(--cream);border-color:var(--accent,var(--orange));
  background:rgba(201,138,75,.14);}

/* --- nav cart button --- */
.cartbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin-left:10px;border-radius:12px;flex:none;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--line);padding:0;
  transition:background .2s,border-color .2s;}
.cartbtn:hover{background:rgba(255,255,255,.12);border-color:rgba(201,123,255,.5);}
.cartbtn svg{width:19px;height:19px;fill:none;stroke:var(--cream);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;}
.cartcount{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--orange);color:#160D03;
  font-family:"DM Mono",ui-monospace,monospace;font-size:10px;line-height:18px;
  text-align:center;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s;}
.cartbtn.has .cartcount{opacity:1;transform:none;}

/* --- drawer --- */
.cart-scrim{position:fixed;inset:0;z-index:90;background:rgba(3,5,9,.72);
  opacity:0;transition:opacity .3s ease;}
.cart-scrim.open{opacity:1;}
.cart{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:92;
  background:#080B12;border-left:1px solid var(--line);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .36s cubic-bezier(.2,.7,.2,1);}
.cart.open{transform:none;}
.cart-hd{display:flex;align-items:center;justify-content:space-between;
  padding:24px 26px;border-bottom:1px solid var(--line);}
.cart-hd .mono{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim);}
.cart-x{width:36px;height:36px;border-radius:10px;background:transparent;border:1px solid var(--line);
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.cart-x:hover{border-color:rgba(201,123,255,.5);}
.cart-x span{position:relative;width:13px;height:1.4px;background:var(--cream);
  transform:rotate(45deg);display:block;}
.cart-x span::after{content:"";position:absolute;inset:0;background:var(--cream);
  transform:rotate(-90deg);}
.cart-body{flex:1;overflow-y:auto;padding:8px 26px;}
.cart-empty{color:var(--cream-dim);font-size:14px;padding:44px 0;text-align:center;}
.ci{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--line);}
.ci-img{width:62px;height:62px;border-radius:10px;overflow:hidden;background:#0A0D14;}
.ci-img img{width:100%;height:100%;object-fit:cover;display:block;}
.ci-nm{font-family:"DM Mono",ui-monospace,monospace;font-size:13px;color:var(--cream);line-height:1.4;}
.ci-var{font-family:"DM Mono",ui-monospace,monospace;font-size:11px;color:var(--cream-dim);
  margin-top:5px;line-height:1.6;}
.ci-qty{display:flex;align-items:center;gap:9px;margin-top:11px;}
.ci-qty button{width:24px;height:24px;border-radius:7px;background:transparent;
  border:1px solid var(--line);color:var(--cream);cursor:pointer;font-size:14px;line-height:1;padding:0;}
.ci-qty button:hover{border-color:rgba(201,123,255,.5);}
.ci-qty .n{font-family:"DM Mono",ui-monospace,monospace;font-size:12px;min-width:16px;text-align:center;}
.ci-price{font-family:"DM Mono",ui-monospace,monospace;font-size:13px;color:var(--cream);}
.ci-rm{display:block;margin-top:10px;background:none;border:0;padding:0;cursor:pointer;
  font-family:"DM Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cream-dim);}
.ci-rm:hover{color:#F4899B;}
.cart-ft{padding:22px 26px 26px;border-top:1px solid var(--line);}
.cart-sum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
.cart-sum .mono{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim);}
.cart-total{font-family:"Fredoka",sans-serif;font-weight:600;font-size:28px;color:var(--cream);}
.cart-ft .fine{margin:0 0 18px;}
.cart-go{width:100%;justify-content:center;}
.cart-go[disabled]{opacity:.4;pointer-events:none;}
body.cart-open{overflow:hidden;}

/* --- bundle picker --- */
.bp-scrim{position:fixed;inset:0;z-index:94;background:rgba(3,5,9,.76);
  opacity:0;transition:opacity .3s ease;}
.bp-scrim.open{opacity:1;}
.bundlepick{position:fixed;left:50%;top:50%;z-index:96;width:min(680px,calc(100% - 32px));
  max-height:min(84vh,760px);overflow:auto;
  transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;
  background:#080B12;border:1px solid var(--line);border-radius:22px;padding:26px 28px 24px;
  transition:opacity .28s ease, transform .28s cubic-bezier(.2,.7,.2,1);}
.bundlepick.open{opacity:1;transform:translate(-50%,-50%);pointer-events:auto;}
.bp-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.bp-hd .mono{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-lo);}
.bp-note{color:var(--cream-dim);font-size:14px;margin:0 0 20px;}
.bp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.bp-item{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;
  background:rgba(17,22,33,.6);border:1px solid var(--line);border-radius:14px;
  padding:12px 10px;cursor:pointer;transition:border-color .2s,transform .2s;}
.bp-item:hover{transform:translateY(-2px);border-color:rgba(201,123,255,.5);}
.bp-item[aria-pressed="true"]{border-color:var(--orange);background:rgba(217,118,31,.12);}
.bp-item img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:9px;display:block;}
.bp-item .nm{font-family:"DM Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cream-dim);line-height:1.5;}
.bp-item[aria-pressed="true"] .nm{color:var(--cream);}
.bp-ft{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.bp-ft .mono{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);}
.bp-ft .btn[disabled]{opacity:.4;pointer-events:none;}
@media(max-width:620px){.bp-grid{grid-template-columns:repeat(2,1fr);}}

@media (prefers-reduced-motion:reduce){
  .cart,.cart-scrim,.bundlepick,.bp-scrim{transition:none;}
  .bp-item:hover{transform:none;}
}


/* honeypot — hidden from people, visible to bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.box .fine a, .foot a[href^="mailto"]{color:var(--orange-lo);}


/* ---- footer columns ----
   <details> so the columns collapse on small screens. Open by default, so
   with JavaScript off every link is still reachable. Above 760px the
   disclosure behaviour is switched off entirely and they read as plain
   columns. */
.fcol{border:0;}
.fcol > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:12px;}
.fcol > summary::-webkit-details-marker{display:none;}
.fcol > summary h4{margin:0;}
.fcol > summary::after{content:"";width:8px;height:8px;flex:none;
  border-right:1.4px solid var(--cream-dim);border-bottom:1.4px solid var(--cream-dim);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s ease;}
.fcol[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px);}
@media(min-width:761px){
  .fcol > summary{cursor:default;pointer-events:none;}
  .fcol > summary::after{display:none;}
}
@media(max-width:760px){
  .fcol{border-top:1px solid var(--line);padding:6px 0;}
  .fcol > summary{padding:12px 0;}
  .fcol ul{padding-bottom:8px;}
}


/* accordions in a two-column grid jostle each other when one expands */
@media(max-width:760px){
  .foot .wrap:first-of-type{grid-template-columns:1fr;gap:0;}
  .foot .wrap:first-of-type > div:first-child{margin-bottom:22px;}
}


/* bundle picker: an explicit remove control, since there is no right-click on touch */
.bp-cell{position:relative;}
.bp-item{width:100%;}
.bp-item[disabled]{opacity:.35;pointer-events:none;}
.bp-less{position:absolute;top:-7px;right:-7px;width:26px;height:26px;border-radius:50%;
  background:#1B1020;border:1px solid rgba(201,123,255,.55);color:#E4C6FF;cursor:pointer;
  font-size:15px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;}
.bp-less:hover{background:#2A1636;}
/* display:flex above beats the browser default for [hidden] */
.bp-less[hidden]{display:none;}
@media(max-width:620px){.bp-less{width:30px;height:30px;top:-9px;right:-9px;}}


/* touch targets: the flavour pills were 33px tall, under the 44px floor */
@media(hover:none),(max-width:760px){
  .fl{padding:14px 17px;font-size:11.5px;}
  .ci-qty button{width:34px;height:34px;font-size:16px;}
  .ci-rm{padding:6px 0;}
}


/* on the contact page the hero already introduces the form, so the card
   drops its copy column and runs full width */
.contact-form .su-in{grid-template-columns:1fr;}
.contact-form .su-in > form{max-width:640px;}