/* ==========================================================================
   GOLI SODA — 90's CHILL  |  design system
   ========================================================================== */

:root {
  --ink: #04120A;
  --deep: #061A10;
  --deep-2: #0A2617;
  --green-900: #062B15;
  --green-700: #0E5A2B;
  --green-500: #2E9B3C;
  --lime: #D9B96A;            /* champagne gold accent (was lime green) */
  --lime-bright: #F0D89A;     /* light gold highlight */
  --gold: #D9B96A;
  --gold-bright: #F0D89A;
  --gold-deep: #B3924A;
  --gold-soft: rgba(217, 185, 106, .25);
  --cream: #FFF7DE;
  --sand: #F0E3BC;
  --amber: #FFC53D;
  --red: #E4342F;

  --key: #8BC91E;
  --key2: #D8F14A;
  --world-ink: #04120A;

  --font-display: 'Outfit', 'Space Grotesk', system-ui, sans-serif;
  --font-impact: 'Anton', 'Archivo Black', 'Haettenschweiler', 'Arial Narrow', Impact, sans-serif;
  --font-alt: 'Archivo Black', 'Anton', Impact, sans-serif;
  --font-body: 'Space Grotesk', 'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;

  --nav-h: 74px;
  --pad: clamp(20px, 5vw, 88px);
  --radius: 22px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* film grain over the entire site */
body::after {
  content: '';
  position: fixed; inset: -50%;
  z-index: 9998;
  pointer-events: none;
  opacity: .05;
  background-image: repeating-conic-gradient(#fff 0% 25%, #000 0% 50%);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  animation: grainShift 1.1s steps(4) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(2%, 1%); }
}

/* premium ambient backdrop: a slow-drifting gold/green aurora + soft vignette
   framing, sitting just under the grain so every section — regardless of its
   own background — reads with the same cohesive, expensive atmosphere */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 9997;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 16% -8%, rgba(240, 216, 154, .12), transparent 62%),
    radial-gradient(48% 38% at 90% 6%, rgba(46, 155, 60, .10), transparent 64%),
    radial-gradient(60% 46% at 50% 106%, rgba(0, 0, 0, .5), transparent 62%),
    radial-gradient(150% 105% at 50% 50%, transparent 52%, rgba(0, 0, 0, .4) 100%);
  mix-blend-mode: soft-light;
  animation: auroraDrift 28s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { opacity: .82; transform: translate3d(0, 0, 0); }
  50%  { opacity: 1;   transform: translate3d(-1.4%, 1.1%, 0); }
  100% { opacity: .88; transform: translate3d(1.1%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

/* slim gold-tinted scrollbar for a more considered, premium chrome */
html { scrollbar-width: thin; scrollbar-color: rgba(217, 185, 106, .45) rgba(4, 18, 10, .4); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(4, 18, 10, .4); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  border-radius: 999px; border: 2px solid rgba(4, 18, 10, .4); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); background-clip: padding-box; }

/* ------------------------------------------------------------ scroll rig */
#scroll-content {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  will-change: transform;
  z-index: 2;
}
#scroll-spacer { pointer-events: none; }

/* ------------------------------------------------------------ typography */
.kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--lime);
  display: flex; align-items: center; gap: 14px;
}
.kicker::before {
  content: ''; width: 34px; height: 2px; background: currentColor; opacity: .7;
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin: 0;
}
.d-xxl { font-size: clamp(52px, 11.2vw, 178px); }
.d-xl  { font-size: clamp(42px, 7.6vw, 116px); }
.d-lg  { font-size: clamp(32px, 5.2vw, 74px); }
.d-md  { font-size: clamp(24px, 3.2vw, 44px); }

.stroke-text {
  color: transparent;
  -webkit-text-stroke: 2px var(--cream);
  paint-order: stroke fill;
}
.lime { color: var(--lime); }
.cream { color: var(--cream); }

.lede {
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.62;
  color: rgba(255, 247, 222, .74);
  max-width: 48ch;
}

/* torn-paper / rough underline used on section headings */
.rough-under { position: relative; display: inline-block; }
.rough-under::after {
  content: '';
  position: absolute; left: -2%; right: -2%; bottom: -.14em; height: .16em;
  background: var(--lime);
  clip-path: polygon(0 40%, 5% 0, 14% 55%, 26% 8%, 38% 62%, 52% 12%, 64% 58%, 78% 6%, 90% 52%, 100% 18%, 100% 100%, 0 100%);
  opacity: .95;
}

/* ------------------------------------------------------------- reveal fx */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease), transform 1.05s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal].is-in { transform: none; }
[data-delay="1"] { transition-delay: .09s; }
[data-delay="2"] { transition-delay: .18s; }
[data-delay="3"] { transition-delay: .27s; }
[data-delay="4"] { transition-delay: .36s; }
[data-delay="5"] { transition-delay: .45s; }
[data-delay="6"] { transition-delay: .54s; }

/* split-line headline reveal */
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.15s var(--ease);
}
.is-in .line-mask > span,
.line-mask.is-in > span { transform: none; }
.line-mask:nth-child(2) > span { transition-delay: .10s; }
.line-mask:nth-child(3) > span { transition-delay: .20s; }

/* ---------------------------------------------------------------- buttons */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--ease), color .35s, box-shadow .5s var(--ease);
  will-change: transform;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--lime);
  transition: transform .55s var(--ease);
}
.btn::before { background: linear-gradient(105deg, var(--gold-bright) 0%, var(--gold) 52%, var(--gold-deep) 100%); }
.btn--primary { color: #241A06; box-shadow: 0 14px 44px -14px rgba(217, 185, 106, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn--primary:hover { box-shadow: 0 22px 58px -14px rgba(217, 185, 106, .75), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn--primary:hover::before { transform: scale(1.06); }

.btn--ghost {
  color: var(--cream);
  border: 1.5px solid var(--gold-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, .04);
}
.btn--ghost::before { background: linear-gradient(105deg, var(--gold-bright) 0%, var(--gold) 60%, var(--gold-deep) 100%); transform: translateY(101%); }
.btn--ghost:hover { color: #241A06; border-color: var(--gold); }
.btn--ghost:hover::before { transform: none; }

.btn--pop {
  color: var(--ink);
  box-shadow: 0 0 0 0 rgba(228, 255, 87, .6);
}
.btn--pop::before { background: linear-gradient(105deg, var(--amber), var(--lime-bright) 60%, var(--lime)); }
.btn--pop:hover { animation: popPulse 1.1s var(--ease) infinite; }
@keyframes popPulse {
  0% { box-shadow: 0 0 0 0 rgba(228, 255, 87, .5); }
  100% { box-shadow: 0 0 0 26px rgba(228, 255, 87, 0); }
}
.btn .btn-ico {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .16);
  flex: none;
}
.btn .btn-ico svg { width: 12px; height: 12px; }

.magnetic { will-change: transform; }

/* ------------------------------------------------------------------- nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 clamp(14px, 3vw, 34px);
  transition: transform .55s var(--ease), background .5s, border-color .5s;
  border-bottom: 1px solid transparent;
}
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4, 18, 10, .82), rgba(4, 18, 10, .3));
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  opacity: 0;
  transition: opacity .5s;
}
.nav.is-stuck::before { opacity: 1; }
.nav.is-stuck { border-color: transparent; }
.nav.is-hidden { transform: translateY(-100%); }
.nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 185, 106, .5) 20%, rgba(217, 185, 106, .5) 80%, transparent);
  opacity: 0; transition: opacity .5s;
}
.nav.is-stuck::after { opacity: 1; }

.nav-logo { display: flex; align-items: center; gap: 12px; flex: none; }
.nav-logo img {
  width: 60px; height: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .6));
  transition: transform .6s var(--ease);
}
.nav-logo:hover img { transform: rotate(-5deg) scale(1.06); }

.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-link {
  position: relative;
  isolation: isolate;
  padding: 10px 18px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: rgba(255, 247, 222, .68);
  /* the desktop nav stays transparent until scrolled (.is-stuck) so the
     hero photo reads full-bleed underneath it — but the photo's own
     bottle cap is bright white right where "FLAVOURS"/"WHY GOLI SODA?"
     sit, and pale nav text nearly disappears against it. A drop shadow
     keeps the links legible over any part of the photo without needing
     a permanent backdrop (which would dull the full-bleed look). */
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65), 0 1px 3px rgba(0, 0, 0, .55);
  transition: color .45s var(--ease), letter-spacing .45s var(--ease), text-shadow .45s var(--ease);
  white-space: nowrap;
}
.nav-link::before {
  content: '';
  position: absolute; inset: 2px 3px; z-index: -1;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(217, 185, 106, .18), rgba(217, 185, 106, .03));
  border: 1px solid rgba(217, 185, 106, 0);
  opacity: 0; transform: scale(.82);
  transition: opacity .45s var(--ease), transform .45s var(--ease), border-color .45s var(--ease);
}
.nav-link::after {
  content: ''; position: absolute; left: 18px; right: 18px; bottom: 6px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 0 12px rgba(217, 185, 106, .55);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.nav-link:hover { color: var(--cream); letter-spacing: .22em; }
.nav-link:hover::before { opacity: 1; transform: scale(1); border-color: rgba(217, 185, 106, .3); }
.nav-link:hover::after, .nav-link.is-active::after { transform: none; }
.nav-link.is-active {
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(217, 185, 106, .45);
}
.nav-link.is-active::before {
  opacity: 1; transform: scale(1);
  border-color: rgba(217, 185, 106, .32);
  background: linear-gradient(120deg, rgba(217, 185, 106, .24), rgba(217, 185, 106, .05));
}

.nav-tools { display: flex; align-items: center; gap: 10px; margin-left: 18px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 247, 222, .2);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(10px);
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.icon-btn::before {
  content: '';
  position: absolute; inset: -1px; z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gold-bright), transparent 28%, var(--gold) 58%, transparent 88%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  animation: iconSpin 3.2s linear infinite;
  animation-play-state: paused;
}
.icon-btn:hover {
  background: rgba(217, 185, 106, .14);
  border-color: var(--gold);
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 14px 30px -14px rgba(217, 185, 106, .6);
}
.icon-btn:hover::before { opacity: .6; animation-play-state: running; }
.icon-btn svg { width: 17px; height: 17px; transition: transform .5s var(--ease); }
.icon-btn:hover svg { transform: rotate(-8deg) scale(1.08); }
.icon-btn .bars { display: none; }
@keyframes iconSpin { to { transform: rotate(360deg); } }

.cart-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px;
  background: var(--lime); color: var(--ink);
  font-size: 10px; font-weight: 800; line-height: 19px; text-align: center;
  transform: scale(0);
  transition: transform .45s var(--ease);
}
.cart-count.is-on { transform: scale(1); }

.sound-wave { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.sound-wave i {
  width: 2px; background: var(--cream); height: 4px; display: block;
  transition: height .2s;
}
.is-sound-on .sound-wave i { animation: eq .9s ease-in-out infinite alternate; background: var(--lime); }
.is-sound-on .sound-wave i:nth-child(2) { animation-delay: .15s; }
.is-sound-on .sound-wave i:nth-child(3) { animation-delay: .3s; }
.is-sound-on .sound-wave i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { from { height: 3px; } to { height: 14px; } }

.nav-burger { display: grid; }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 899;
  background: linear-gradient(160deg, #04150C, #0B2E18 60%, #04150C);
  display: flex; flex-direction: column; justify-content: center;
  padding: 100px var(--pad) 60px;
  clip-path: circle(0% at calc(100% - 46px) 38px);
  transition: clip-path .8s var(--ease);
  pointer-events: none;
}
.drawer.is-open { clip-path: circle(155% at calc(100% - 46px) 38px); pointer-events: auto; }
#drawerLinks { counter-reset: drawerItem; }
.drawer a {
  counter-increment: drawerItem;
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-display);
  font-size: clamp(34px, 9vw, 62px);
  text-transform: uppercase;
  line-height: 1.06;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 247, 222, .1);
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .6s var(--ease), color .3s, border-color .3s;
}
.drawer a::before {
  content: counter(drawerItem, decimal-leading-zero);
  flex: none;
  font-family: var(--font-body);
  font-size: clamp(10px, 1.6vw, 13px); font-weight: 700; letter-spacing: .1em;
  color: rgba(217, 185, 106, .5);
  transition: color .3s;
}
.drawer a::after {
  content: '→';
  margin-left: auto; flex: none;
  font-size: clamp(16px, 3vw, 26px);
  color: var(--gold);
  opacity: 0; transform: translateX(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.drawer a:last-of-type { border-bottom: none; }
.drawer.is-open a { opacity: 1; transform: none; }
.drawer a:nth-child(1) { transition-delay: .16s; }
.drawer a:nth-child(2) { transition-delay: .22s; }
.drawer a:nth-child(3) { transition-delay: .28s; }
.drawer a:nth-child(4) { transition-delay: .34s; }
.drawer a:nth-child(5) { transition-delay: .40s; }
.drawer a:nth-child(6) { transition-delay: .46s; }
.drawer a:hover { color: var(--lime); border-color: rgba(217, 185, 106, .3); }
.drawer a:hover::before { color: var(--lime); }
.drawer a:hover::after { opacity: 1; transform: none; }
.drawer .drawer-foot {
  margin-top: 42px; font-size: 12px; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(255, 247, 222, .45);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.drawer .drawer-admin {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(217, 185, 106, .35);
  background: rgba(217, 185, 106, .06);
  opacity: 1; transform: none;
  color: var(--cream);
  transition: border-color .4s var(--ease), background .4s var(--ease), color .3s, transform .4s var(--ease);
}
.drawer .drawer-admin svg { width: 13px; height: 13px; flex: none; }
.drawer .drawer-admin:hover {
  border-color: var(--gold); background: rgba(217, 185, 106, .16);
  color: var(--gold-bright); transform: translateY(-2px);
}
@media (max-width: 640px) {
  /* the desktop drawer leans into an oversized, editorial 34-62px display
     face — great full-bleed on a big screen, but on a phone it reads as
     one giant wall of letters. Drop it to a compact, numbered list that
     fits comfortably with room to breathe. */
  .drawer { padding: 132px var(--pad) 40px; justify-content: flex-start; }
  .drawer a {
    font-size: clamp(21px, 7vw, 26px);
    letter-spacing: .01em;
    gap: 12px;
    padding: 14px 0;
  }
  .drawer a::before { font-size: 10px; }
  .drawer a::after { font-size: 15px; opacity: .5; transform: none; }
  .drawer .drawer-foot { margin-top: 28px; gap: 14px; }
  .drawer .drawer-foot span { font-size: 10px; letter-spacing: .18em; flex-basis: 100%; }
}

/* ---------------------------------------------------------------- layout */
.section {
  position: relative;
  padding: clamp(90px, 12vh, 170px) var(--pad);
}
.section-head { max-width: 1500px; margin: 0 auto clamp(40px, 6vw, 76px); }
.wrap { max-width: 1500px; margin: 0 auto; }

/* =========================================================== HERO ======= */
.hero { position: relative; }
.hero__top {
  position: relative;
  min-height: 92svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: calc(var(--nav-h) + 24px) var(--pad) 40px;
  background: radial-gradient(120% 90% at 50% 46%, #1A5B2A 0%, #0A3419 42%, #04150C 78%);
}
.hero__gl {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
/* still full-bleed photo hero — no canvas, no parallax, no motion.
   NO cropping, at any width, ever. Every earlier version of this rule
   used object-fit:cover with some fixed/viewport-relative height,
   which always meant slicing the image down to fit a box — and no
   single crop position is safe at every aspect ratio the photo gets
   displayed at, since the badge + "THE TASTE OF TIMELESS JOY" headline
   sit in the left third and the bottle cap sits right at the top. So:
   full width, height auto (natural aspect) on whichever photo is
   showing — the entire photo, badge, headline and lede text included,
   always renders completely, at every viewport size. Nothing is ever
   cut off top, bottom, left or right.

   Two different source photos, not one photo reused: the mobile shot
   is a dedicated portrait crop (853x1843, close to an actual phone's
   own aspect ratio) so it fills the first screen edge-to-edge; the
   desktop shot is the wide landscape version. Exactly one is in the
   DOM's flow at a time — display:none removes the other from layout
   entirely, so its aspect ratio can't affect the container's height. */
.hero__top--photo { height: auto; min-height: 0; padding: 0; display: block; background: #04150C; }
.hero__photo { display: block; width: 100%; height: auto; }
.hero__photo--desktop { display: none; }
@media (min-width: 900px) {
  .hero__photo--mobile { display: none; }
  .hero__photo--desktop { display: block; }
}

/* the photo itself always carries the full headline/lede baked in (see
   above), so the separate live-text repeat is never needed and stays
   hidden — kept only so the markup/CSS can be revived if a future crop
   ever hides the text again. */
.hero__tagline { display: none; }
.hero__vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(102deg, rgba(3, 12, 7, .78) 0%, rgba(3, 12, 7, .46) 34%, transparent 58%),
    radial-gradient(64% 54% at 62% 44%, transparent 40%, rgba(3, 14, 8, .42) 100%),
    linear-gradient(180deg, rgba(3, 14, 8, .5) 0%, transparent 22%, transparent 62%, rgba(3, 14, 8, .92) 100%);
}
.hero__inner {
  position: relative; z-index: 5;
  width: 100%; max-width: 1500px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 30px;
  align-items: center;
}
.hero__inner.is-centered {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  padding: 26px 0 6px;
}
.hero__inner.is-centered .hero__copy { max-width: 820px; }
.hero__inner.is-centered .hero__cta { justify-content: center; }
.hero__inner.is-centered .hero__stats { justify-content: center; }
.hero__copy { max-width: 640px; }
.hero__title { margin: 22px 0 0; font-family: var(--font-impact); letter-spacing: .02em; }
.hero__title .l1 { display: block; font-size: .42em; letter-spacing: .01em; color: rgba(255, 247, 222, .9); text-shadow: 0 4px 26px rgba(2, 8, 4, .55); }
.hero__title .l2 { display: block; font-size: .72em; letter-spacing: .005em; color: var(--lime); text-shadow: 0 4px 30px rgba(2, 8, 4, .6), 0 1px 3px rgba(2, 8, 4, .5); }
.hero__title .l3 { display: block; letter-spacing: .005em; color: rgba(255, 247, 222, .96); text-shadow: 0 4px 26px rgba(2, 8, 4, .55); }
.hero__lede { margin: 26px 0 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

/* quick trust stats under the hero CTAs */
.hero__stats {
  display: flex; flex-wrap: wrap; gap: 30px;
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid rgba(255, 247, 222, .14);
}
.hero__stats .hs-item { display: flex; flex-direction: column; gap: 3px; }
.hero__stats .hs-n { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); color: var(--lime); line-height: 1; }
.hero__stats .hs-l { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 247, 222, .56); }

/* --------------------------------------------------------- hero wordmark */
.hero__wordmark {
  position: relative; z-index: 5; overflow: hidden;
  background: #04150C; padding: 54px var(--pad) 26px; text-align: center;
}
.hero__wordmark::before, .hero__wordmark::after {
  content: ''; position: absolute; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 185, 106, .35) 50%, transparent);
}
.hero__wordmark::before { top: 0; }
.hero__wordmark::after { bottom: 0; }
.wm-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 80% at 50% 50%, rgba(217, 185, 106, .16), transparent 72%),
    radial-gradient(16% 60% at 50% 50%, rgba(240, 216, 154, .14), transparent 70%);
}
.wm-leaf {
  position: absolute; top: 50%; width: clamp(90px, 11vw, 160px); height: clamp(90px, 11vw, 160px);
  color: var(--gold, #D9B96A); opacity: .1; z-index: 0; pointer-events: none;
}
.wm-leaf--l { left: clamp(-10px, 2vw, 40px); transform: translateY(-54%) rotate(-18deg); }
.wm-leaf--r { right: clamp(-10px, 2vw, 40px); transform: translateY(-46%) rotate(162deg) scaleX(-1); }
@media (max-width: 900px) { .wm-leaf { display: none; } }
.wm-frame {
  position: relative; z-index: 2; width: 100%; max-width: 620px; height: auto; display: inline-block;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55)) drop-shadow(0 0 30px rgba(217, 185, 106, .18));
}
@media (max-width: 640px) {
  /* was rendering almost as tall as the whole hero photo above it —
     it's a decorative accent, not a second hero, so it should read
     small on a phone screen where every scroll of height matters */
  .hero__wordmark { padding: 22px var(--pad) 14px; }
  .wm-frame { max-width: 210px; }
}
.wm-bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.wm-bubbles span {
  position: absolute; bottom: -20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 247, 222, .55), rgba(217, 185, 106, .05) 70%);
  opacity: 0; animation: wmRise 7s ease-in infinite;
}
.wm-bubbles span:nth-child(1) { left: 14%; width: 7px; height: 7px; animation-delay: .2s; }
.wm-bubbles span:nth-child(2) { left: 26%; width: 4px; height: 4px; animation-delay: 2.1s; }
.wm-bubbles span:nth-child(3) { left: 40%; width: 5px; height: 5px; animation-delay: 4.4s; }
.wm-bubbles span:nth-child(4) { right: 36%; width: 4px; height: 4px; animation-delay: 1.2s; }
.wm-bubbles span:nth-child(5) { right: 22%; width: 6px; height: 6px; animation-delay: 3.3s; }
.wm-bubbles span:nth-child(6) { right: 12%; width: 4px; height: 4px; animation-delay: 5.5s; }
@keyframes wmRise {
  0% { transform: translateY(0) scale(.8); opacity: 0; }
  12% { opacity: .8; }
  85% { opacity: .35; }
  100% { transform: translateY(-150px) scale(1.15); opacity: 0; }
}

/* ---------------------------------------------------- hero flavour strip */
.hero__flavours { position: relative; z-index: 5; padding: 64px var(--pad) 8px; background: #04150C; }
.hf-head { max-width: 620px; margin-bottom: 36px; }
.hf-head h2 { margin: 14px 0 16px; }
.hf-viewall {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream); border-bottom: 1px solid rgba(255, 247, 222, .3); padding-bottom: 4px;
  transition: color .3s, border-color .3s;
}
.hf-viewall svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.hf-viewall:hover { color: var(--lime); border-color: var(--lime); }
.hf-viewall:hover svg { transform: translateX(4px); }

.hf-row { position: relative; display: flex; align-items: center; gap: 6px; }
.hf-cards {
  flex: 1; min-width: 0; display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
  scrollbar-width: none;
}
.hf-cards::-webkit-scrollbar { display: none; }
.hf-card {
  position: relative; display: block; border-radius: 20px; overflow: hidden;
  flex: 0 0 auto; width: clamp(180px, 15.5vw, 224px); scroll-snap-align: start;
  aspect-ratio: 3 / 4; background: linear-gradient(165deg, var(--hf-key, #123), var(--hf-key2, #345));
  transition: transform .5s var(--ease);
}
.hf-card:hover { transform: translateY(-6px); }
.hf-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.hf-card:hover img { transform: scale(1.07); }
.hf-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, 0) 68%); pointer-events: none; }
.hf-card__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 15px 15px 17px; z-index: 2; }
.hf-card__label h4 { font-family: var(--font-display); font-size: 17px; letter-spacing: .01em; margin: 0 0 4px; color: var(--lime-bright); text-transform: uppercase; text-shadow: 0 1px 12px rgba(217, 185, 106, .5); }
.hf-card__label span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  font-size: 10.5px; line-height: 1.42; color: rgba(255, 247, 222, .88);
}

.hf-arrow {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: rgba(2, 16, 10, .72); border: 1.5px solid rgba(255, 247, 222, .22); color: var(--cream);
  transition: border-color .3s, color .3s, transform .3s var(--ease); z-index: 4;
}
.hf-arrow:hover { border-color: var(--lime); color: var(--lime); }
.hf-arrow svg { width: 17px; height: 17px; }

/* ----------------------------------------------------- hero feature strip */
.hero__features { position: relative; z-index: 5; padding: 30px var(--pad) 56px; background: #04150C; }
.hfeat-panel {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255, 247, 222, .14); border-radius: 20px; overflow: hidden;
  background: rgba(255, 255, 255, .02);
}
.hfeat { display: flex; align-items: center; gap: 14px; padding: 22px 22px; border-right: 1px solid rgba(255, 247, 222, .12); }
.hfeat:last-child { border-right: none; }
.hfeat__icon {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: rgba(217, 185, 106, .12); color: var(--lime);
}
.hfeat__icon svg { width: 19px; height: 19px; }
.hfeat h5 { margin: 0 0 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--lime); }
.hfeat p { margin: 0; font-size: 12px; line-height: 1.4; color: rgba(255, 247, 222, .58); }

.scroll-hint {
  position: absolute; left: 22px; top: 50%; z-index: 6;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  display: flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255, 247, 222, .5);
}
.scroll-hint i {
  width: 1px; height: 40px; background: linear-gradient(var(--lime), transparent);
  display: block; animation: hintDrop 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes hintDrop { 0%, 100% { transform: scaleY(.4); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }

.hero__dots {
  position: absolute; right: 26px; top: 50%; transform: translateY(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 11px;
}
.hero__dots .hd-num {
  font-family: var(--font-body); font-weight: 700; font-size: 10px;
  letter-spacing: .18em; color: rgba(255, 247, 222, .5);
}
.hero__dots .hd-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 247, 222, .32); }
.hero__dots .hd-dot.is-active { width: 8px; height: 8px; background: var(--lime); box-shadow: 0 0 0 4px rgba(217, 185, 106, .18); }

.hero__ticker {
  position: relative; z-index: 6;
  border-top: 1px solid rgba(217, 185, 106, .18);
  border-bottom: 1px solid rgba(217, 185, 106, .18);
  background: rgba(4, 18, 10, .5);
  backdrop-filter: blur(8px);
  overflow: hidden;
  padding: 11px 0;
}
.ticker-track { display: flex; gap: 44px; width: max-content; animation: tickerRun 26s linear infinite; }
.ticker-track span {
  font-family: var(--font-display);
  font-size: 14px; letter-spacing: .14em;
  color: rgba(255, 247, 222, .5);
  display: flex; align-items: center; gap: 44px;
  white-space: nowrap;
}
.ticker-track span::after { content: '✦'; color: var(--lime); font-size: 11px; }
@keyframes tickerRun { to { transform: translateX(-50%); } }

/* ============================================== FLAVOUR UNIVERSE ======== */
.universe {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #04150C;
  --key: #8BC91E;
  --key2: #D8F14A;
}
.universe__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; cursor: grab; }
.universe__gl.is-grabbing { cursor: grabbing; }
.universe__grad {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 18, 10, .8) 0%, transparent 18%, transparent 58%, rgba(4, 18, 10, .9) 100%),
    radial-gradient(70% 60% at 50% 50%, transparent 46%, rgba(3, 12, 7, .55) 100%);
}
.universe__ui {
  position: relative; z-index: 4;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--nav-h) + 20px) var(--pad) 28px;
  pointer-events: none;
}
.universe__ui > * { pointer-events: auto; }

.uni-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.uni-count {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1;
  color: var(--key2);
}
.uni-count small { font-size: .38em; color: rgba(255, 247, 222, .45); letter-spacing: .1em; }
.uni-world {
  text-align: right;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255, 247, 222, .6);
  max-width: 220px;
}

.uni-mid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.uni-headline { max-width: 420px; }
.uni-headline h3 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.6vw, 88px);
  line-height: .88;
  margin: 0;
  text-transform: uppercase;
}
.uni-headline h3 .a { color: var(--cream); display: block; }
.uni-headline h3 .b { color: var(--key2); display: block; }
.uni-headline p { color: rgba(255, 247, 222, .72); margin: 18px 0 0; max-width: 34ch; }
.uni-headline .uni-tag {
  display: inline-block; margin-top: 20px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--key2); color: var(--key2);
  font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
}
.uni-spacer { width: min(38vw, 460px); height: 10px; }

.uni-right { justify-self: end; display: grid; gap: 10px; }
.uni-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px 9px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 247, 222, .14);
  background: rgba(4, 18, 10, .38);
  backdrop-filter: blur(12px);
  font-size: 11px; letter-spacing: .18em; font-weight: 700; text-transform: uppercase;
  color: rgba(255, 247, 222, .55);
  transition: color .35s, border-color .35s, background .35s, transform .5s var(--ease);
  cursor: pointer;
}
.uni-chip img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; opacity: .55; transition: opacity .35s, transform .5s var(--ease); }
.uni-chip:hover { color: var(--cream); border-color: rgba(255, 247, 222, .4); transform: translateX(-6px); }
.uni-chip.is-active { color: var(--ink); background: var(--key2); border-color: var(--key2); transform: translateX(-10px); }
.uni-chip.is-active img { opacity: 1; transform: scale(1.06); }

.uni-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.uni-arrows { display: flex; gap: 10px; }
.uni-arrow {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 247, 222, .26);
  background: rgba(4, 18, 10, .35);
  backdrop-filter: blur(12px);
  transition: background .35s, border-color .35s, transform .5s var(--ease), color .3s;
}
.uni-arrow:hover { background: var(--key2); color: var(--ink); border-color: var(--key2); transform: scale(1.08); }
.uni-arrow svg { width: 17px; height: 17px; }

.uni-progress { flex: 1; max-width: 420px; height: 2px; background: rgba(255, 247, 222, .16); position: relative; }
.uni-progress i { position: absolute; inset: 0 auto 0 0; background: var(--key2); transition: width .8s var(--ease); }

.uni-hint {
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255, 247, 222, .42);
  display: flex; align-items: center; gap: 10px;
}
.uni-hint kbd {
  border: 1px solid rgba(255, 247, 222, .28);
  border-radius: 5px; padding: 3px 7px;
  font-family: var(--font-body); font-size: 10px;
}

/* ============================================== ENTER THE 90s =========== */
.nineties { background: linear-gradient(180deg, #04150C, #071F12 50%, #04150C); }
.nineties__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: start;
}
.era-col { display: flex; flex-direction: column; gap: 14px; }
.era-nav-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 4px;
}
.era-nav-label {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 247, 222, .42);
}
.era-counter {
  font-family: var(--font-display);
  font-size: 20px; letter-spacing: .04em; color: var(--lime);
}
.era-counter small { color: rgba(255, 247, 222, .4); font-family: var(--font-body); font-size: 12px; }
.era-nav { display: grid; gap: 6px; position: relative; }
.era-btn {
  display: flex; align-items: baseline; gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: background .45s, border-color .45s, transform .55s var(--ease);
  text-align: left;
  width: 100%;
}
.era-btn:hover { background: rgba(255, 255, 255, .04); }
.era-btn.is-active { background: rgba(217, 185, 106, .1); border-color: rgba(217, 185, 106, .35); transform: translateX(8px); }
.era-btn .yr {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1;
  color: rgba(255, 247, 222, .34);
  transition: color .4s;
  flex: none;
}
.era-btn.is-active .yr { color: var(--lime); }
.era-btn .lbl { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 247, 222, .5); }
.era-btn.is-active .lbl { color: var(--cream); }
.era-hint {
  margin: 0; padding: 0 4px;
  font-size: 13px; color: rgba(255, 247, 222, .4);
}

.era-stage {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(217, 185, 106, .16);
  min-height: clamp(400px, 56vh, 620px);
  background: #061A10;
  isolation: isolate;
}
.era-scene { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
.era-scene.is-active { opacity: 1; }
.era-scene canvas { width: 100%; height: 100%; display: block; }
.era-copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: clamp(22px, 3vw, 42px);
  background: linear-gradient(0deg, rgba(4, 18, 10, .95), transparent);
}
.era-copy h4 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 42px); margin: 0 0 10px; text-transform: uppercase; }
.era-copy p { margin: 0; color: rgba(255, 247, 222, .72); max-width: 52ch; }
.era-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.era-fact {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(217, 185, 106, .28);
  background: rgba(217, 185, 106, .08);
  font-size: 12px; letter-spacing: .03em;
  color: var(--cream);
  white-space: nowrap;
}
.era-objects { position: absolute; inset: 0; z-index: 2; }
.era-obj {
  position: absolute;
  font-size: clamp(30px, 4vw, 54px);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .5));
  opacity: 0; transform: translateY(30px) scale(.8);
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.era-scene.is-active .era-obj { opacity: 1; transform: none; }
.era-obj:nth-child(1) { transition-delay: .1s; }
.era-obj:nth-child(2) { transition-delay: .2s; }
.era-obj:nth-child(3) { transition-delay: .3s; }
.era-obj:nth-child(4) { transition-delay: .4s; }
.era-obj:nth-child(5) { transition-delay: .5s; }
.era-obj:nth-child(6) { transition-delay: .6s; }

.nineties__punch {
  margin-top: clamp(50px, 7vw, 96px);
  text-align: center;
}
.nineties__punch h3 {
  font-family: var(--font-display);
  font-size: clamp(38px, 8vw, 128px);
  line-height: .88; margin: 0; text-transform: uppercase;
}
.nineties__punch .b { color: var(--lime); }
.nineties__punch-sub {
  margin: 18px 0 0;
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: .03em;
  color: rgba(255, 247, 222, .55);
}
.nineties__punch-cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: clamp(22px, 3vw, 34px);
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid rgba(217, 185, 106, .4);
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream);
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.nineties__punch-cta:hover { border-color: var(--gold); background: rgba(217, 185, 106, .1); transform: translateY(-2px); }
.nineties__punch-cta svg { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.nineties__punch-cta:hover svg { transform: translateX(3px); }

/* ================================================== QUIZ =============== */
.quiz {
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(217, 185, 106, .08), transparent 60%),
    linear-gradient(180deg, #04150C, #071E13);
}
.quiz__card {
  max-width: 880px; margin: 0 auto;
  border-radius: 28px;
  border: 1px solid rgba(217, 185, 106, .2);
  background: rgba(6, 26, 16, .72);
  backdrop-filter: blur(20px);
  padding: clamp(26px, 4vw, 54px);
  position: relative; overflow: hidden;
  min-height: 460px;
}
.quiz__bar { height: 3px; background: rgba(255, 247, 222, .12); border-radius: 3px; overflow: hidden; margin-bottom: 30px; }
.quiz__bar i { display: block; height: 100%; background: var(--lime); width: 0; transition: width .7s var(--ease); }
.quiz__step { position: absolute; inset: auto; opacity: 0; pointer-events: none; }
.quiz__q { font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 50px); text-transform: uppercase; margin: 0 0 28px; line-height: .95; }
.quiz__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.quiz__opt {
  padding: 22px 18px; border-radius: 16px;
  border: 1px solid rgba(255, 247, 222, .16);
  background: rgba(255, 255, 255, .03);
  text-align: left;
  transition: border-color .4s, background .4s, transform .5s var(--ease);
}
.quiz__opt:hover { border-color: var(--lime); background: rgba(217, 185, 106, .1); transform: translateY(-4px); }
.quiz__opt .emoji { font-size: 28px; display: block; margin-bottom: 10px; }
.quiz__opt .t { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }
.quiz__result { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 30px; align-items: center; }
.quiz__result img { border-radius: 18px; }

/* ================================================== MEMORY WALL ========
   "Moments in a Bottle" — adapted to the site's own palette/fonts:
   --mw-yellow/--mw-lime/--mw-ink read the brand's gold accents & cream ink,
   --mw-fdisp/--mw-fround/--mw-fbody read the brand's impact/hand/body fonts. */
.wall {
  background: linear-gradient(180deg, #071E13, #04150C);
  --mw-yellow: var(--amber);
  --mw-lime: var(--lime);
  --mw-ink: var(--cream);
  --mw-soft: rgba(255, 247, 222, .7);
  --mw-paper: #F6EEDA;
  --mw-caption: #2A2016;
  --mw-photo: #241F16;
  --mw-fdisp: var(--font-impact);
  --mw-fround: var(--font-hand);
  --mw-fbody: var(--font-body);
  overflow-x: clip;
}
.gs-mw__wrap { width: 100%; max-width: 1240px; margin-inline: auto; }
.gs-mw__head { text-align: center; margin-bottom: clamp(30px, 4vw, 48px); }
.gs-mw__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mw-fbody); font-weight: 700; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--mw-yellow);
}
.gs-mw__eyebrow::before, .gs-mw__eyebrow::after {
  content: "\00BB"; font-size: 15px; line-height: 1; color: var(--mw-lime); opacity: .85;
}
.gs-mw__title {
  font-family: var(--mw-fdisp); font-weight: 400; font-size: clamp(34px, 4.6vw, 60px);
  line-height: .92; letter-spacing: .012em; text-transform: uppercase; text-wrap: balance;
  color: var(--mw-ink); text-shadow: 0 6px 0 rgba(0, 0, 0, .34), 0 14px 34px rgba(0, 0, 0, .5);
  margin: 14px 0 12px;
}
.gs-mw__title em { font-style: normal; color: var(--mw-yellow); }
.gs-mw__sub { color: var(--mw-soft); font-size: 14.6px; line-height: 1.72; max-width: 540px; margin: 0 auto; }

.gs-mw__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gs-mw__card {
  position: relative; margin: 0; padding: 10px 10px 18px;
  display: flex; flex-direction: column;
  background: var(--mw-paper); border-radius: 4px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(26px) rotate(var(--tilt, 0deg));
  transition: opacity .7s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.gs-mw__card.is-in {
  opacity: 1; transform: rotate(var(--tilt, 0deg));
  transition-delay: var(--delay, 0s), var(--delay, 0s), 0s;
}
.gs-mw__card.is-in:hover, .gs-mw__card.is-in:focus-within {
  transform: rotate(0deg) scale(1.06); box-shadow: 0 24px 54px rgba(0, 0, 0, .75);
  transition-delay: 0s; z-index: 5;
}
.gs-mw__photo { position: relative; aspect-ratio: 6 / 5; background: var(--mw-photo); border-radius: 2px; overflow: hidden; margin-bottom: 14px; }
.gs-mw__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: contrast(1.03) saturate(1.04); }
.gs-mw__photo.is-empty::after {
  content: attr(data-label); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px;
  font-family: var(--mw-fbody); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .4); background: linear-gradient(160deg, #4A4436, #211F19);
}
.gs-mw__photo.is-empty img { display: none; }
.gs-mw__caption {
  text-align: center; padding: 0 6px;
  font-family: var(--mw-fround); font-weight: 600; font-size: 18px; color: var(--mw-caption); line-height: 1.25;
}
@media (max-width: 900px) { .gs-mw__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px) {
  .gs-mw__grid { grid-template-columns: 1fr; gap: 22px; }
  .gs-mw__card { max-width: 320px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-mw__card { opacity: 1; transform: rotate(var(--tilt, 0deg)); transition: none; }
  .gs-mw__card.is-in:hover, .gs-mw__card.is-in:focus-within { transform: rotate(0deg); }
}

/* ================================================== ARCADE ============= */
.arcade { background: #04150C; }
.arcade__frame {
  border-radius: 26px;
  border: 1px solid rgba(217, 185, 106, .2);
  background: linear-gradient(160deg, rgba(10, 38, 23, .9), rgba(4, 18, 10, .9));
  overflow: hidden;
}
.arcade__tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 10px; border-bottom: 1px solid rgba(217, 185, 106, .16); }
.arcade__tab {
  padding: 12px 20px; border-radius: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 247, 222, .55);
  transition: background .35s, color .35s;
}
.arcade__tab:hover { color: var(--cream); background: rgba(255, 255, 255, .05); }
.arcade__tab.is-active { background: var(--lime); color: var(--ink); }
.arcade__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.arcade__screen { position: relative; aspect-ratio: 16/9; background: #02100A; }
.arcade__screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.arcade__scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.arcade__side { padding: 26px; border-left: 1px solid rgba(217, 185, 106, .16); display: grid; align-content: start; gap: 18px; }
.arcade__score { font-family: var(--font-display); font-size: 54px; line-height: 1; color: var(--lime); }
.arcade__lbl { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: rgba(255, 247, 222, .5); }
.arcade__board { display: grid; gap: 8px; }
.arcade__row { display: flex; justify-content: space-between; font-size: 12px; padding: 8px 0; border-bottom: 1px dashed rgba(255, 247, 222, .14); }
.arcade__row b { color: var(--lime); font-weight: 700; }
.arcade__overlay {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; text-align: center;
  background: rgba(2, 16, 10, .82);
  backdrop-filter: blur(6px);
  transition: opacity .5s;
}
.arcade__overlay.is-hidden { opacity: 0; pointer-events: none; }
.arcade__overlay h4 { font-family: var(--font-display); font-size: clamp(24px, 3.6vw, 46px); margin: 0 0 8px; text-transform: uppercase; }
.arcade__overlay p { margin: 0 0 22px; color: rgba(255, 247, 222, .66); font-size: 13px; }

/* ================================================== CART FLY ANIMATION == */
.fly-bottle {
  position: fixed; z-index: 950; pointer-events: none;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lime), rgba(217, 185, 106, 0) 68%);
  display: grid; place-items: center;
}
.fly-bottle img { width: 46px; height: 46px; object-fit: contain; }

/* ================================================== FIND GOLI ========== */
.find { background: #04150C; }
.find__grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(26px, 4vw, 60px); align-items: start; }
.find__search {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgba(255, 247, 222, .2);
  border-radius: 999px; padding: 6px 6px 6px 20px;
  background: rgba(255, 255, 255, .04);
  transition: border-color .4s;
}
.find__search:focus-within { border-color: var(--lime); }
.find__search input {
  flex: 1; background: none; border: 0; outline: none; color: var(--cream);
  font-family: var(--font-body); font-size: 14px; padding: 12px 0;
}
.find__search input::placeholder { color: rgba(255, 247, 222, .38); }
@media (max-width: 640px) {
  /* under 16px, iOS Safari zooms the whole page in on focus — jarring
     on a search box the user taps immediately on entering the section */
  .find__search input { font-size: 16px; }
}
.find__search button { width: 44px; height: 44px; border-radius: 50%; background: var(--lime); color: var(--ink); display: grid; place-items: center; }
.store-list { margin-top: 22px; display: grid; gap: 8px; max-height: 380px; overflow-y: auto; padding-right: 6px; }
.store-list::-webkit-scrollbar { width: 4px; }
.store-list::-webkit-scrollbar-thumb { background: rgba(217, 185, 106, .4); border-radius: 4px; }
.store {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .03);
  transition: border-color .35s, background .35s, transform .5s var(--ease);
  cursor: pointer;
  text-align: left; width: 100%;
}
.store:hover, .store.is-active { border-color: var(--lime); background: rgba(217, 185, 106, .1); transform: translateX(6px); }
.store .nm { font-weight: 700; font-size: 13px; }
.store .ct { font-size: 11px; color: rgba(255, 247, 222, .5); letter-spacing: .1em; text-transform: uppercase; }
.store .km { font-size: 11px; color: var(--lime); flex: none; }

.map-wrap {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid rgba(217, 185, 106, .18);
  background: radial-gradient(70% 70% at 50% 40%, rgba(14, 90, 45, .3), rgba(4, 18, 10, .9));
  overflow: hidden;
  aspect-ratio: 4/3.5;
}
.map-wrap svg { width: 100%; height: 100%; display: block; }
.map-dot { fill: rgba(217, 185, 106, .22); transition: fill .5s; }
.map-marker { cursor: pointer; }
.map-marker circle.pin { fill: var(--lime); }
.map-marker circle.halo { fill: none; stroke: var(--lime); opacity: .7; transform-origin: center; }
.map-marker.is-active circle.pin { fill: #fff; }
.map-label {
  position: absolute; z-index: 3;
  padding: 8px 14px; border-radius: 999px;
  background: var(--lime); color: var(--ink);
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  transform: translate(-50%, -160%);
  opacity: 0; transition: opacity .4s;
  pointer-events: none; white-space: nowrap;
}
.map-label.is-on { opacity: 1; }

/* ================================================== FINALE ============= */
.finale {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  background: #020905;
  text-align: center;
  padding: 120px var(--pad);
}
.finale__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.finale__veil {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(52% 46% at 50% 52%, transparent 30%, rgba(2, 9, 5, .92) 100%);
}
.finale__inner { position: relative; z-index: 3; }
.finale__line {
  font-family: var(--font-display);
  font-size: clamp(38px, 9vw, 132px);
  line-height: .92; text-transform: uppercase; margin: 0;
  opacity: 0; transform: translateY(30px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.finale__line.is-on { opacity: 1; transform: none; }
.finale__line.b { color: var(--lime); }
.finale__mark {
  margin: 42px 0 34px;
  opacity: 0; transform: scale(.9);
  transition: opacity 1s var(--ease) .2s, transform 1.2s var(--ease) .2s;
}
.finale__mark.is-on { opacity: 1; transform: none; }
.finale__mark img { width: clamp(120px, 15vw, 190px); margin: 0 auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .8)); }
.finale__mark p { font-size: 11px; letter-spacing: .42em; text-transform: uppercase; color: rgba(255, 247, 222, .55); margin: 16px 0 0; }

/* ================================================== FOOTER ============= */
.footer {
  position: relative;
  background: #020905;
  border-top: 1px solid rgba(217, 185, 106, .18);
  padding: clamp(52px, 7vw, 86px) var(--pad) 34px;
}
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, .8fr)); gap: 40px; max-width: 1500px; margin: 0 auto; }
.footer__brand img { width: 96px; }
.footer__brand p { margin: 18px 0 0; color: rgba(255, 247, 222, .55); max-width: 34ch; font-size: 13.5px; }
.footer h5 { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--lime); margin: 0 0 18px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer li a { font-size: 13px; color: rgba(255, 247, 222, .65); transition: color .3s, padding-left .4s var(--ease); display: inline-block; }
.footer li a:hover { color: var(--lime); padding-left: 6px; }
.footer__band {
  max-width: 1500px; margin: clamp(46px, 6vw, 76px) auto 0;
  padding-top: 26px; border-top: 1px solid rgba(255, 247, 222, .1);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 247, 222, .4);
}
.footer__admin { color: rgba(255, 247, 222, .28); transition: color .3s; }
.footer__admin:hover { color: var(--lime); }
.footer__big {
  font-family: var(--font-display);
  font-size: clamp(28px, 8.4vw, 132px);
  line-height: .9;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(217, 185, 106, .3);
  margin: clamp(30px, 4vw, 60px) 0 0;
  text-transform: uppercase;
  user-select: none;
}

/* ============================================= OUR COLLECTION =========== */
.collection { background: linear-gradient(180deg, #04150C, #071C11); }
.coll__row { display: flex; align-items: center; }
.coll__cards {
  width: 100%; display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.coll-card {
  position: relative;
  border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4.25;
  background: linear-gradient(165deg, var(--cc-key, #123), var(--cc-key2, #345));
  display: flex; flex-direction: column; padding: 14px;
  isolation: isolate;
  border: 1px solid transparent;
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.coll-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(217, 185, 106, 0);
  transition: box-shadow .5s var(--ease);
}
.coll-card:hover {
  transform: translateY(-8px);
  border-color: rgba(217, 185, 106, .45);
  box-shadow: 0 26px 54px -20px rgba(217, 185, 106, .4), 0 8px 24px -10px rgba(0, 0, 0, .5);
}
.coll-card.is-new { border-color: rgba(217, 185, 106, .35); }
.coll-card__new {
  position: absolute; top: 12px; right: -32px; z-index: 3;
  transform: rotate(38deg); transform-origin: center;
  background: linear-gradient(120deg, var(--gold-bright, #F0D89A), var(--gold, #D9B96A));
  color: #241A06; font-family: var(--font-display); font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 34px; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.coll-card__media { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 14px; margin: 0 0 8px; background: rgba(0, 0, 0, .12); }
.coll-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .6s var(--ease); }
.coll-card__media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 -32px 40px -30px rgba(0, 0, 0, .4); pointer-events: none; }
.coll-card:hover .coll-card__media img { transform: scale(1.06); }
.coll-card .coll-icon { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(255, 255, 255, .28); }
.coll-card .coll-icon svg { width: 46%; height: 46%; }
.coll-card__info {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: rgba(3, 17, 10, .58);
  border: 1px solid rgba(255, 247, 222, .1);
}
.coll-card__info h4 { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; letter-spacing: .02em; margin: 0; color: var(--lime-bright); text-transform: uppercase; text-shadow: 0 1px 10px rgba(217, 185, 106, .45); }
.coll-card__tag { display: none; }
.coll-card__price { flex: none; font-family: var(--font-display); font-size: 14.5px; font-weight: 700; letter-spacing: .01em; color: var(--lime); }
.coll-card__add {
  margin-top: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px; border-radius: 999px; background: rgba(4, 21, 12, .5);
  border: 1px solid rgba(255, 247, 222, .3); color: var(--cream);
  font: inherit; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  transition: background .3s, border-color .3s, color .3s; cursor: pointer;
}
.coll-card__add svg { width: 11px; height: 11px; flex: none; }
.coll-card__add:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.coll__foot { text-align: center; margin-top: 40px; font-size: 13.5px; color: rgba(255, 247, 222, .58); }
.coll__foot a { color: var(--lime); font-weight: 700; border-bottom: 1px solid rgba(217, 185, 106, .4); padding-bottom: 2px; }

.pet-badge { display: flex; justify-content: center; margin-top: 52px; }
.pet-badge img {
  width: min(230px, 42vw); height: auto;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .55));
  transition: transform .5s var(--ease);
}
.pet-badge img:hover { transform: scale(1.04) rotate(-1deg); }
@media (max-width: 640px) {
  .pet-badge { margin-top: 36px; }
  .pet-badge img { width: min(170px, 52vw); }
}

.pet-tagline { margin-top: 22px; text-align: center; display: grid; gap: 4px; }
.pet-tagline__line {
  display: block; font-family: var(--font-impact); text-transform: uppercase;
  letter-spacing: .015em; font-size: clamp(21px, 3vw, 36px); line-height: 1.15;
  color: var(--cream);
  text-shadow: 0 4px 26px rgba(0, 0, 0, .5);
}
.pet-tagline__line .lime { text-shadow: 0 4px 30px rgba(217, 185, 106, .45); }
.pet-tagline__script {
  display: block; font-family: var(--font-hand); font-weight: 700;
  font-size: clamp(22px, 3vw, 34px); color: var(--gold-bright);
  margin-top: 2px;
}
@media (max-width: 640px) {
  .pet-tagline { margin-top: 16px; }
}

.pet-promo { margin-top: 52px; }
.pet-promo img {
  display: block; width: 100%; height: auto; border-radius: 22px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .65);
  border: 1px solid rgba(217, 185, 106, .18);
}
@media (max-width: 640px) {
  .pet-promo { margin-top: 36px; }
  .pet-promo img { border-radius: 14px; }
}

/* ==================================================== OUR STORY ========= */
.story { background: linear-gradient(180deg, #071C11, #04150C); }
.story__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.story h2 { font-family: var(--font-body); font-weight: 600; letter-spacing: -.01em; line-height: 1.14; }
.story__paras { margin-top: 22px; display: grid; gap: 15px; }
.story__paras p { margin: 0; font-size: 15px; line-height: 1.72; color: rgba(255, 247, 222, .68); max-width: 56ch; }
.story__quote {
  border-radius: 24px; border: 1px solid rgba(217, 185, 106, .22);
  background: rgba(217, 185, 106, .05);
  padding: clamp(28px, 3.4vw, 44px); text-align: left;
}
.story__quote blockquote {
  margin: 0 0 16px; font-family: var(--font-hand); font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.3; color: var(--lime);
}
.story__quote cite { font-style: normal; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 247, 222, .5); }
.story__chips { margin-top: clamp(50px, 6vw, 78px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.story-chip { display: grid; gap: 8px; padding: 20px 4px; border-top: 1px solid rgba(255, 247, 222, .16); }
.story-chip h5 { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--cream); }
.story-chip p { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 247, 222, .56); }

/* ================================================= WHY GOLI SODA ======== */
.why { background: #04150C; }
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.why-card {
  border-radius: 20px; border: 1px solid rgba(255, 247, 222, .12);
  background: linear-gradient(170deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  padding: 26px 24px; transition: border-color .4s, transform .5s var(--ease);
}
.why-card:hover { border-color: var(--lime); transform: translateY(-6px); }
.why-card .wc-icon {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(217, 185, 106, .12); color: var(--lime); margin-bottom: 16px;
}
.why-card .wc-icon svg { width: 21px; height: 21px; }
.why-card h4 { font-family: var(--font-display); font-size: 18px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .01em; }
.why-card p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255, 247, 222, .58); }

/* ==================================================== HOW IT'S MADE ===== */
.process { background: linear-gradient(180deg, #04150C, #071C11); }
.process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.proc-card {
  position: relative; border-radius: 20px; border: 1px solid rgba(255, 247, 222, .12);
  background: linear-gradient(170deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  padding: 30px 24px 26px; transition: border-color .4s, transform .5s var(--ease), box-shadow .5s var(--ease);
  overflow: hidden;
}
.proc-card::after {
  content: ''; position: absolute; right: -18px; top: -18px; width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 185, 106, .16), transparent 70%); pointer-events: none;
}
.proc-card:hover {
  border-color: rgba(217, 185, 106, .5); transform: translateY(-6px);
  box-shadow: 0 26px 50px -26px rgba(217, 185, 106, .35);
}
.proc-card__n {
  display: block; font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: .04em; color: var(--gold); margin-bottom: 16px;
}
.proc-card h4 { font-family: var(--font-display); font-size: 17px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .01em; color: var(--cream); }
.proc-card p { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255, 247, 222, .58); }

/* ================================================= GOLI SODA VS. REST === */
.compare { background: #04150C; }
.compare .display { font-family: var(--font-impact); letter-spacing: .01em; }
.compare .display .lime { text-shadow: 0 4px 30px rgba(217, 185, 106, .3); }
.cmp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.6vw, 30px); align-items: start; }
.cmp-card {
  position: relative; border-radius: 26px; padding: clamp(26px, 3vw, 38px) clamp(22px, 2.8vw, 32px);
  border: 1px solid rgba(255, 247, 222, .12); background: rgba(255, 255, 255, .025);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.cmp-card--good {
  border-color: rgba(217, 185, 106, .5);
  background: linear-gradient(170deg, rgba(217, 185, 106, .1), rgba(217, 185, 106, .015));
  box-shadow: 0 30px 60px -30px rgba(217, 185, 106, .35);
  transform: translateY(-6px) scale(1.015);
}
.cmp-card--good:hover { transform: translateY(-10px) scale(1.015); }
.cmp-card--bad { opacity: .82; }
.cmp-card--bad:hover { transform: translateY(-4px); border-color: rgba(255, 247, 222, .2); }
.cmp-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 247, 222, .12); }
.cmp-card--good .cmp-card__head { border-bottom-color: rgba(217, 185, 106, .28); }
.cmp-card__badge {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lime); color: var(--ink);
}
.cmp-card__badge svg { width: 19px; height: 19px; }
.cmp-card__head h3 {
  flex: 1; margin: 0; font-family: var(--font-impact); font-size: clamp(19px, 2vw, 24px);
  letter-spacing: .015em; text-transform: uppercase;
}
.cmp-card--good .cmp-card__head h3 { color: var(--lime); }
.cmp-card--bad .cmp-card__head h3 { color: rgba(255, 247, 222, .5); }
.cmp-card__tag {
  flex: none; font-family: var(--font-impact); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: var(--lime); border-radius: 999px; padding: 5px 12px;
}
.cmp-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.cmp-point {
  display: flex; align-items: flex-start; gap: 14px; padding: 13px 4px;
  border-bottom: 1px solid rgba(255, 247, 222, .07);
}
.cmp-point:last-child { border-bottom: none; }
.cmp-point__ic {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  margin-top: 1px;
}
.cmp-point__ic svg { width: 12px; height: 12px; }
.cmp-point__ic--good { background: var(--lime); color: var(--ink); }
.cmp-point__ic--bad { background: rgba(228, 52, 47, .28); color: rgba(255, 247, 222, .75); }
.cmp-point__body { display: flex; flex-direction: column; gap: 2px; }
.cmp-point__label { font-family: var(--font-impact); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 247, 222, .4); }
.cmp-point__val { font-size: 14px; line-height: 1.4; }
.cmp-card--good .cmp-point__val { color: var(--cream); font-weight: 600; }
.cmp-card--bad .cmp-point__val { color: rgba(255, 247, 222, .48); font-style: italic; }

/* ==================================================== QUESTIONS, ANSWERED */
.faq { background: linear-gradient(180deg, #071C11, #04150C); }
.faq__grid, #faqList { display: grid; gap: 12px; max-width: 800px; margin: 0 auto; }
.faq-item {
  border-radius: 16px; border: 1px solid rgba(255, 247, 222, .12);
  background: rgba(255, 255, 255, .03); overflow: hidden; transition: border-color .35s;
}
.faq-item:hover { border-color: rgba(217, 185, 106, .3); }
.faq-item.is-open { border-color: rgba(217, 185, 106, .5); background: rgba(217, 185, 106, .04); }
.faq-item__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; background: none; border: none; cursor: pointer; text-align: left;
  font: inherit; font-family: var(--font-display); font-size: 14.5px; letter-spacing: .01em;
  text-transform: uppercase; color: var(--cream);
}
.faq-item__q svg {
  flex: none; width: 18px; height: 18px; color: var(--lime); transition: transform .4s var(--ease);
}
.faq-item.is-open .faq-item__q svg { transform: rotate(135deg); }
.faq-item__a {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease);
}
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a-inner { overflow: hidden; min-height: 0; }
.faq-item__a p { margin: 0; padding: 0 24px 22px; font-size: 13.5px; line-height: 1.65; color: rgba(255, 247, 222, .62); max-width: 62ch; }

/* ============================================= CONTACT / LOCATIONS ====== */
.contact { background: linear-gradient(180deg, #04150C, #071C11); }
.contact__grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(24px, 4vw, 44px); align-items: start; }
.factory__list { display: grid; gap: 18px; }
.factory-card {
  border-radius: 20px; border: 1px solid rgba(255, 247, 222, .14);
  background: rgba(255, 255, 255, .03); padding: 26px 28px;
}
.factory-card h4 { font-family: var(--font-display); font-size: 19px; margin: 0 0 12px; text-transform: uppercase; color: var(--lime); }
.factory-card address { font-style: normal; font-size: 13.5px; line-height: 1.75; color: rgba(255, 247, 222, .68); margin: 0 0 14px; }
.factory-card a.phone {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; color: var(--cream); border-bottom: 1px solid rgba(255, 247, 222, .3); padding-bottom: 2px;
  transition: color .3s, border-color .3s;
}
.factory-card a.phone:hover { color: var(--lime); border-color: var(--lime); }
.contact__card {
  border-radius: 20px; border: 1px solid rgba(217, 185, 106, .22);
  background: rgba(217, 185, 106, .05); padding: 28px 26px;
  display: grid; gap: 20px; align-self: stretch;
}
.contact__row { display: grid; gap: 4px; }
.contact__row .cr-l { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 247, 222, .5); }
.contact__row .cr-v { font-size: 14.5px; font-weight: 700; color: var(--cream); }
.contact__row a.cr-v { color: var(--lime); }

/* ================================================== REQUEST A QUOTE ===== */
.quote__panel {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: .78fr 1.22fr;
  border-radius: 28px; overflow: hidden; position: relative; isolation: isolate;
  border: 1px solid rgba(217, 185, 106, .22);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .65), 0 0 0 1px rgba(217, 185, 106, .05) inset;
  background: linear-gradient(180deg, rgba(255, 255, 255, .015), rgba(255, 255, 255, 0));
}
.quote__panel::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(217, 185, 106, .55), rgba(217, 185, 106, .06) 40%, rgba(217, 185, 106, .3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

.quote__intro {
  position: relative; padding: clamp(30px, 4vw, 48px) clamp(26px, 3.4vw, 40px);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(217, 185, 106, .16), transparent 60%),
    linear-gradient(165deg, rgba(4, 21, 12, .92), rgba(6, 26, 16, .96));
  display: flex; flex-direction: column;
}
.quote__mark {
  font-family: Georgia, 'Times New Roman', serif; font-size: 84px; line-height: .6;
  color: var(--gold-bright); opacity: .85;
  text-shadow: 0 8px 30px rgba(217, 185, 106, .35);
  margin-bottom: 6px;
}
.quote__intro-lead {
  font-family: var(--font-display); font-size: clamp(17px, 1.7vw, 20px); font-weight: 600;
  line-height: 1.45; color: var(--cream); letter-spacing: -.005em;
  margin: 0 0 26px;
}
.quote__points { list-style: none; margin: 0 0 auto; padding: 0; display: grid; gap: 14px; }
.quote__points li {
  display: flex; align-items: center; gap: 11px;
  font-size: 13.5px; color: rgba(255, 247, 222, .82); font-weight: 500;
}
.quote__points svg {
  width: 20px; height: 20px; flex: none; padding: 4px; box-sizing: border-box;
  border-radius: 50%; color: var(--ink);
  background: linear-gradient(150deg, var(--gold-bright), var(--gold) 70%);
  box-shadow: 0 4px 14px -4px rgba(217, 185, 106, .6);
}
.quote__divider { height: 1px; margin: 30px 0 20px; background: linear-gradient(90deg, rgba(217, 185, 106, .35), transparent 75%); }
.quote__contact-hint { font-size: 12.5px; color: rgba(255, 247, 222, .5); }
.quote__contact-hint a { color: var(--lime); font-weight: 700; border-bottom: 1px solid rgba(217, 185, 106, .4); padding-bottom: 1px; }
.quote__contact-hint a:hover { border-color: var(--lime); }

.quote__card {
  padding: clamp(28px, 4vw, 46px);
  background: rgba(4, 15, 9, .55);
}
.quote__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 4px; }
.q-label { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 247, 222, .5); margin: 16px 0 8px; }
.quote__grid .q-label { margin-top: 0; }
.quote__card input, .quote__card select, .quote__card textarea {
  width: 100%; background: rgba(4, 21, 12, .55); border: 1px solid rgba(255, 247, 222, .16);
  border-radius: 12px; padding: 13px 15px; color: var(--cream);
  font-family: var(--font-body); font-size: 13.5px; outline: none;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.quote__card input::placeholder, .quote__card textarea::placeholder { color: rgba(255, 247, 222, .35); }
.quote__card select { appearance: none; cursor: pointer; }
.quote__card input:focus, .quote__card select:focus, .quote__card textarea:focus {
  border-color: var(--gold); background: rgba(4, 21, 12, .78);
  box-shadow: 0 0 0 3px rgba(217, 185, 106, .14);
}
.quote__card textarea { resize: vertical; }
.quote__card .btn { margin-top: 24px; width: 100%; justify-content: center; }
.quote__card .btn svg { width: 15px; height: 15px; flex: none; }

@media (max-width: 900px) {
  .quote__panel { grid-template-columns: 1fr; }
  .quote__intro { padding-bottom: 26px; }
  .quote__points { margin-bottom: 24px; }
  .quote__divider { display: none; }
}
@media (max-width: 780px) {
  .quote__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .quote__grid { grid-template-columns: 1fr; }
  /* iOS Safari auto-zooms the whole page on focus for any input under
     16px — jarring on a form this long. Bump to 16px only on mobile so
     the desktop layout keeps its tighter, more compact field sizing. */
  .quote__card input, .quote__card select, .quote__card textarea { font-size: 16px; }
}

/* ================================================== LOADER ============= */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: #04150C;
  display: grid; place-items: center;
  transition: opacity .8s var(--ease), visibility .8s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__inner { text-align: center; width: min(320px, 76vw); }
.loader__inner img { width: 116px; margin: 0 auto 26px; animation: loaderPulse 2s ease-in-out infinite; }
@keyframes loaderPulse { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.06) rotate(2deg); } }
.loader__bar { height: 2px; background: rgba(255, 247, 222, .16); overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 0; background: var(--lime); transition: width .4s; }
.loader__txt { margin-top: 16px; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: rgba(255, 247, 222, .5); }

/* -------------------------------------------------- WhatsApp FAB -------- */
.wa-fab {
  position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 860;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  color: #241A06;
  background: linear-gradient(150deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow: 0 14px 34px -10px rgba(217, 185, 106, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), opacity .3s var(--ease);
}
.wa-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 20px 42px -10px rgba(217, 185, 106, .85), inset 0 1px 0 rgba(255, 255, 255, .35); }
/* pinned to the corner, these sit on top of whatever card or list row is
   scrolling through that spot — fading them out while actively scrolling
   (see src/ui/fabs.js) keeps them from hiding an "Add to Cart" button or
   blocking its tap target; they snap back the moment scrolling settles. */
.wa-fab.is-scroll-fade, .call-fab.is-scroll-fade { opacity: .28; pointer-events: none; }
.wa-fab__ring {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(217, 185, 106, .55);
  animation: waFabPulse 2.6s var(--ease) infinite;
  pointer-events: none;
}
@keyframes waFabPulse {
  0% { box-shadow: 0 0 0 0 rgba(217, 185, 106, .55); }
  70% { box-shadow: 0 0 0 16px rgba(217, 185, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 185, 106, 0); }
}
@media (max-width: 640px) {
  /* stacked vertically, the two FABs eat a ~130px-tall strip of screen-
     fixed space that ends up covering card text, form fields and quiz
     options as the page scrolls underneath. Side by side on one row
     instead keeps the footprint to a single button's height. */
  .wa-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab__ring { animation: none; }
}

/* -------------------------------------------------- Call FAB ------------ */
.call-fab {
  position: fixed; right: 24px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 860;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--cream);
  background: linear-gradient(150deg, #1E3B26 0%, #123018 60%, #0B2010 100%);
  border: 1.5px solid rgba(217, 185, 106, .55);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), opacity .3s var(--ease);
}
.call-fab:hover { transform: translateY(-3px) scale(1.05); border-color: rgba(217, 185, 106, .9); box-shadow: 0 16px 32px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .1); }
@media (max-width: 640px) {
  .call-fab {
    right: 76px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 44px; height: 44px;
  }
}

/* ================================================== TOAST ============== */
.toast-wrap { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 960; display: grid; gap: 8px; }
.toast {
  padding: 13px 22px; border-radius: 999px;
  background: rgba(4, 18, 10, .9);
  border: 1px solid var(--lime);
  backdrop-filter: blur(14px);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  animation: toastIn .5s var(--ease);
}
@keyframes toastIn { from { opacity: 0; transform: translateY(20px); } }

/* ================================================== RESPONSIVE ========= */
@media (max-width: 1180px) {
  /* every nav link still shows inline — logo + sound/cart/hamburger
     stay on row one, the link list drops to its own horizontally-
     scrollable row underneath. The hamburger stays visible here too,
     since it's the only way to reach the admin button in its drawer. */
  .nav { flex-wrap: wrap; height: auto; min-height: var(--nav-h); padding-top: 12px; padding-bottom: 10px; row-gap: 8px; }
  /* two rows of nav sitting over a full-bleed hero photo needs its own
     backdrop at all times, not just once scrolled (.is-stuck) — otherwise
     the link row reads directly on top of the hero headline underneath */
  .nav::before { opacity: 1; }
  /* the two-row nav's frosted blur was sitting right on top of the bottle
     cap at the very top of the hero photo, making it read as hazy instead
     of crisp. Push the photo below the nav (~124px) with margin — not
     padding, which would eat into the height:100% image's own box and
     shrink the crop again — instead of running it full-bleed underneath;
     the cap stays sharp and the nav gets a solid dark strip to sit on,
     which reads cleaner than the blur did anyway. */
  .hero__top--photo { margin-top: 124px; }
  .nav-logo { order: 1; }
  .nav-tools { order: 2; margin-left: auto; }
  .nav-links {
    order: 3; flex-basis: 100%; width: 100%; margin-left: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 0 2px 2px;
    /* the link row runs wider than the screen with no scrollbar to hint
       that — fading both edges signals "there's more this way" so
       "WHY GOLI SODA?" and "CONTACT" don't just look cut off. */
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { padding: 8px 14px; font-size: 10.5px; flex: none; }
  .nav-burger { display: grid; width: 38px; height: 38px; }
  .nav-burger svg { width: 15px; height: 15px; }
  .hero__inner { grid-template-columns: 1fr; gap: 0; }
  .hero__copy { max-width: none; }
  .nineties__grid { grid-template-columns: 1fr; }
  .era-nav { grid-template-columns: repeat(5, 1fr); display: grid; }
  .era-btn { flex-direction: column; gap: 4px; align-items: flex-start; }
  .arcade__stage { grid-template-columns: 1fr; }
  .arcade__side { border-left: 0; border-top: 1px solid rgba(217, 185, 106, .16); }
  .find__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .uni-mid { grid-template-columns: 1fr; }
  .uni-spacer { display: none; }
  .uni-right { justify-self: start; grid-auto-flow: column; overflow-x: auto; }
  .uni-chip { flex-direction: column; gap: 6px; padding: 8px; font-size: 9px; }
  .uni-chip.is-active, .uni-chip:hover { transform: none; }
  .hf-card { width: min(42vw, 210px); }
  .coll__cards { grid-template-columns: repeat(3, 1fr); }
  .hfeat-panel { grid-template-columns: repeat(2, 1fr); }
  .hfeat { border-right: 1px solid rgba(255, 247, 222, .12); border-bottom: 1px solid rgba(255, 247, 222, .12); }
  .hfeat:nth-child(2n) { border-right: none; }
  .story__grid { grid-template-columns: 1fr; }
  .story__chips { grid-template-columns: repeat(2, 1fr); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .contact__grid { grid-template-columns: 1fr; }
  .process__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  :root { --nav-h: 64px; }
  .nav-logo img { width: 48px; }
  .hero__top { padding-bottom: 70px; }
  /* the padding-bottom above is for the non-photo gradient hero variant;
     the full-bleed photo hero must stay at padding:0 or its height:100%
     image loses that much height and stops covering the container. */
  .hero__top.hero__top--photo { padding-bottom: 0; }
  .hero__cta .btn { flex: 1; justify-content: center; padding: 15px 18px; font-size: 11px; }
  .scroll-hint, .hero__dots { display: none; }
  .hero__stats { gap: 22px; }
  .hf-card { width: min(58vw, 240px); }
  .coll__cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .hfeat-panel { grid-template-columns: 1fr; }
  .hfeat { border-right: none; border-bottom: 1px solid rgba(255, 247, 222, .12); }
  .hfeat:last-child { border-bottom: none; }
  .story__chips { grid-template-columns: 1fr 1fr; }
  .why__grid { grid-template-columns: 1fr; }
  .quiz__result { grid-template-columns: 1fr; }
  .uni-headline p { display: none; }
  .universe__ui { padding-bottom: 20px; }
  .uni-bottom { flex-wrap: wrap; }
  .uni-progress { order: 3; max-width: none; width: 100%; }
  .uni-hint { display: none; }
  .footer__grid { grid-template-columns: 1fr; }
  .process__grid { grid-template-columns: 1fr; }
  .cmp-cards { grid-template-columns: 1fr; }
  .cmp-card--good { transform: none; }
  .cmp-card--good:hover { transform: translateY(-4px); }
  .faq-item__q { padding: 17px 18px; font-size: 13px; }
  .faq-item__a p { padding: 0 18px 18px; }
}

@media (max-width: 520px) {
  .era-nav { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #scroll-content { position: static; transform: none !important; }
  body::after { animation: none; }
}

/* =============================================== HERITAGE GOLD — accents */
.gold-text {
  color: transparent;
  background: linear-gradient(100deg, #F4E2B0 0%, var(--gold) 45%, #A8823B 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #04110A; }
::-webkit-scrollbar-thumb { background: #3A3320; border-radius: 8px; border: 2px solid #04110A; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }