/* ==========================================================================
   VOLUME AUSTRALIA — drinkvolume.com
   Design system + components. Dark base, tinted per product.
   ========================================================================== */

@font-face{font-family:"Volume Expanded";src:url("../fonts/Volume-Expanded-ExtraBold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Volume Expanded";src:url("../fonts/Volume-Expanded-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Volume Normal";src:url("../fonts/Volume-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* Brand palette (unchanged from the current site) */
  --black:#000;
  --charcoal:#161717;
  --charcoal-2:#1b1b1b;
  --mid-charcoal:#292a2b;
  --white:#fff;
  --off-white:#f0f2f4;
  --ice:#a7d1e7;          /* vodka / primary accent */
  --lilac:#daa7e7;        /* gin accent */
  --royal:#22326f;
  --wildberry:#a1509e;
  --indigo:#412e88;
  --sea:#395462;
  --teal:#3fb7b2;

  /* Product tints — drive the hero + page wash */
  --tint-vodka-a:#1f6f9a; --tint-vodka-b:#3ec3b8;
  --tint-gin-a:#7b2d9e;   --tint-gin-b:#d76aa8;
  --tint-a:var(--tint-vodka-a); --tint-b:var(--tint-vodka-b);
  --accent:var(--ice);

  /* Type */
  --f-display:"Volume Expanded","Montserrat",system-ui,sans-serif;
  --f-body:"Volume Normal","Montserrat",system-ui,sans-serif;

  /* Layout */
  --gutter:clamp(20px,5vw,80px);
  --max:1440px;
  --nav-h:84px;
  --r-pill:999px;
  --r-card:24px;

  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur:.7s;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--charcoal);color:var(--white);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ice);color:var(--charcoal)}

/* Page wash — a slow-moving product-coloured glow behind everything */
.wash{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(60vw 60vw at 15% 10%, color-mix(in oklab,var(--tint-a) 42%,transparent), transparent 60%),
    radial-gradient(55vw 55vw at 85% 90%, color-mix(in oklab,var(--tint-b) 32%,transparent), transparent 60%),
    radial-gradient(40vw 30vw at 70% 20%, color-mix(in oklab,var(--lilac) 14%,transparent), transparent 70%);
  transition:background 1.4s var(--ease-io);
  opacity:.9;
}
.wash::after{ /* film grain */
  content:"";position:absolute;inset:-50%;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
main{position:relative;z-index:1}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,.display{font-family:var(--f-display);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:.005em;margin:0}
h1,.h1{font-size:clamp(2.6rem,6.2vw,6rem)}
h2,.h2{font-size:clamp(2rem,4.4vw,3.9rem)}
h3,.h3{font-size:clamp(1.25rem,2.2vw,1.8rem)}
h4,.h4{font-size:1rem;letter-spacing:.06em}
.h-light{font-weight:400}
p{margin:0 0 1em}
.lead{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.65;color:rgba(255,255,255,.86)}
.muted{color:rgba(255,255,255,.62)}
.eyebrow{
  font-family:var(--f-display);font-weight:400;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:.7em;margin-bottom:1.2rem;
}
.eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--tint-b),var(--accent));box-shadow:0 0 12px var(--accent)}
.outline{-webkit-text-stroke:1px rgba(255,255,255,.55);color:transparent}
.accent{color:var(--accent)}
:root{--neon-grad:linear-gradient(100deg,var(--ice) 0%,#c4bde9 40%,var(--lilac) 65%,var(--wildberry) 100%)}
.grad-text,.neon{padding-right:.06em;background:var(--neon-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px color-mix(in oklab,var(--lilac) 40%,transparent))}
.neon-rule{height:2px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--ice) 25%,var(--lilac) 60%,var(--wildberry) 80%,transparent);box-shadow:0 0 24px color-mix(in oklab,var(--lilac) 55%,transparent),0 0 60px color-mix(in oklab,var(--teal) 35%,transparent)}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.container{width:min(var(--max),100% - var(--gutter)*2);margin-inline:auto}
.section{padding-block:clamp(72px,10vw,150px)}
.section--tight{padding-block:clamp(48px,6vw,90px)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,36px)}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
.center{text-align:center}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  --bg:var(--ice);--fg:var(--charcoal);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1rem 2.1rem;border-radius:var(--r-pill);
  font-family:var(--f-display);font-weight:400;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg);background:var(--bg);isolation:isolate;overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),color .3s;
  will-change:transform;
}
.btn::before{ /* liquid fill on hover */
  content:"";position:absolute;inset:0;z-index:-1;background:var(--white);
  transform:translateY(101%);border-radius:50% 50% 0 0 / 30% 30% 0 0;
  transition:transform .55s var(--ease-out),border-radius .55s var(--ease-out);
}
.btn:hover::before{transform:translateY(0);border-radius:0}
.btn{box-shadow:0 0 0 0 transparent,0 0 22px -6px color-mix(in oklab,var(--bg) 85%,transparent)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px -10px color-mix(in oklab,var(--bg) 90%,transparent),0 0 34px -4px color-mix(in oklab,var(--bg) 80%,transparent)}
.btn--ghost{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--gin{--bg:var(--lilac)}
.btn--ghost{--bg:transparent;--fg:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.btn--ghost::before{background:var(--white)}
.btn--ghost:hover{color:var(--charcoal);box-shadow:inset 0 0 0 1px var(--white)}
.btn--sm{padding:.7rem 1.4rem;font-size:.7rem}
.btn .arrow{width:1em;height:1em;transition:transform .4s var(--ease-out)}
.btn:hover .arrow{transform:translate(3px,-3px)}
.link{
  display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  position:relative;padding-bottom:.35em;
}
.link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform-origin:right;transform:scaleX(1);transition:transform .5s var(--ease-out)}
.link:hover::after{transform:scaleX(0);transform-origin:left;animation:underline .6s var(--ease-out) forwards}
@keyframes underline{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .5s,backdrop-filter .5s,transform .6s var(--ease-out),height .4s;
}
.site-header.is-scrolled{background:color-mix(in oklab,var(--charcoal) 72%,transparent);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);height:68px}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:14px}
.brand__bird{width:30px;height:auto;transition:transform .6s var(--ease-out)}
.brand:hover .brand__bird{transform:rotate(-8deg) translateY(-2px)}
.brand__logo{height:28px;width:auto}
.brand__tag{display:none}
.nav{display:flex;align-items:center;gap:8px}
.nav__links{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.nav__links a{
  display:inline-block;padding:.6rem .7rem;border-radius:var(--r-pill);white-space:nowrap;
  font-family:var(--f-display);font-weight:400;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  opacity:.8;transition:opacity .3s,background .3s;
}
.nav__links a:hover,.nav__links a[aria-current="page"]{opacity:1;background:rgba(255,255,255,.08);box-shadow:inset 0 -2px 0 var(--accent),0 6px 18px -8px var(--accent)}
@media (max-width:1200px){.nav__links{display:none}}
.nav__cta{display:flex;gap:8px;margin-left:8px}
.nav__cta .btn{padding:.65rem 1.3rem;font-size:.66rem}
@media (max-width:520px){.nav__cta .btn--ghost{display:none}}
.burger{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;transition:background .3s}
.burger:hover{background:rgba(255,255,255,.08)}
.burger span{display:block;width:20px;height:1.5px;background:#fff;margin:3px 0;transition:transform .4s var(--ease-out),opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

/* Full-screen menu */
.menu{
  position:fixed;inset:0;z-index:49;background:color-mix(in oklab,var(--charcoal) 92%,transparent);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  clip-path:circle(0 at calc(100% - 40px) 40px);transition:clip-path .8s var(--ease-io);
  display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;gap:clamp(24px,4vh,48px);padding:var(--nav-h) var(--gutter) 40px;
  overflow-y:auto;overscroll-behavior:contain;visibility:hidden;
}
.menu>*{min-width:0}
.menu.is-open{clip-path:circle(150% at calc(100% - 40px) 40px);visibility:visible}
.menu__list{list-style:none;margin:0;padding:0;align-self:safe center}
.menu__list li{overflow:hidden}
.menu__list a{
  display:block;font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.8rem,4.4vw,3.4rem);line-height:1.12;white-space:nowrap;
  transform:translateY(110%);transition:transform .8s var(--ease-out),color .3s;
}
.menu.is-open .menu__list a{transform:translateY(0)}
.menu__list li:nth-child(1) a{transition-delay:.10s}.menu__list li:nth-child(2) a{transition-delay:.15s}.menu__list li:nth-child(3) a{transition-delay:.20s}.menu__list li:nth-child(4) a{transition-delay:.25s}.menu__list li:nth-child(5) a{transition-delay:.30s}.menu__list li:nth-child(6) a{transition-delay:.35s}.menu__list li:nth-child(7) a{transition-delay:.40s}.menu__list li:nth-child(8) a{transition-delay:.45s}
.menu__list a:hover{color:var(--accent);-webkit-text-stroke:0}
.menu__list a span{display:inline-block;font-weight:400;font-size:.35em;vertical-align:top;margin:.6em 0 0 .6em;opacity:.5;letter-spacing:.2em}
.menu__aside{padding-top:clamp(20px,3vh,32px);border-top:1px solid rgba(255,255,255,.12);opacity:0;transform:translateY(20px);transition:opacity .6s .4s,transform .6s .4s var(--ease-out)}
.menu.is-open .menu__aside{opacity:1;transform:none}
.menu__aside p{color:rgba(255,255,255,.7);max-width:38ch}
.menu__aside .social{margin-top:1.2rem}
@media (max-width:700px){.menu__list a{white-space:normal}}

/* --------------------------------------------------------------------------
   HERO — the product switcher (the concept from the reference video)
   -------------------------------------------------------------------------- */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden;
  padding:calc(var(--nav-h) + 10px) 0 48px;
}
.hero__glow{ /* product-coloured spotlight behind the bottle */
  position:absolute;left:50%;top:52%;width:min(80vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,color-mix(in oklab,var(--tint-b) 42%,transparent),color-mix(in oklab,var(--tint-a) 18%,transparent) 45%,transparent 72%);
  filter:blur(20px);pointer-events:none;transition:background 1.2s var(--ease-io);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}
.hero__word{ /* giant outlined product name behind the bottle */
  position:absolute;left:50%;top:46%;transform:translate(-50%,-52%);
  width:100%;text-align:center;pointer-events:none;user-select:none;
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;line-height:.86;
  font-size:clamp(3.6rem,9.6vw,10rem);letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in oklab,var(--tint-b) 80%,white);
  filter:drop-shadow(0 0 14px color-mix(in oklab,var(--tint-b) 70%,transparent)) drop-shadow(0 0 40px color-mix(in oklab,var(--tint-a) 50%,transparent));
  transition:-webkit-text-stroke-color 1.2s var(--ease-io),filter 1.2s var(--ease-io);
}
.hero__word .line{display:block;overflow:hidden}
.hero__word .line > span{display:block;transform:translateY(105%);transition:transform 1s var(--ease-out)}
.hero__word.is-in .line > span{transform:translateY(0)}
.hero__word .line:nth-child(2) > span{transition-delay:.08s}
.hero__word .fill{ /* soft filled duplicate for depth */
  position:absolute;inset:0;color:rgba(255,255,255,.035);-webkit-text-stroke:0;
  transform:translateY(6px);filter:blur(1px);
}

.hero__stage{position:relative;height:min(60svh,640px);display:grid;place-items:center;z-index:2;margin-bottom:-6svh}
.hero__bottle{
  position:absolute;height:100%;width:auto;aspect-ratio:701/1800;
  opacity:0;transform:translateY(30px) rotate(3deg) scale(.96);
  transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out);
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.6));
  will-change:transform;
}
.hero__bottle.is-active{opacity:1;transform:none}
.hero__bottle.is-leaving{opacity:0;transform:translateY(-30px) rotate(-3deg) scale(.96)}
.hero__bottle img{height:100%;width:100%;max-width:none;object-fit:contain;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero__reflection{
  position:absolute;left:50%;bottom:-6%;width:60%;height:12%;transform:translateX(-50%);
  background:radial-gradient(closest-side,color-mix(in oklab,var(--tint-b) 45%,transparent),transparent);
  filter:blur(18px);opacity:.8;transition:background 1.2s var(--ease-io)
}

.hero__ui{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:24px}
.hero__meta{max-width:560px}
.hero__meta .eyebrow{margin-bottom:.6rem}
.hero__title{font-size:clamp(1.2rem,2.1vw,1.75rem);line-height:1.02}
.hero__title small{display:block;font-weight:400;font-size:.55em;letter-spacing:.08em;margin-top:.25em;opacity:.8}
.hero__price{font-family:var(--f-display);font-weight:400;font-size:.72rem;letter-spacing:.16em;margin-top:.7rem;opacity:.75}
.hero__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.1rem}
.hero__swap{position:relative;display:grid}
.hero__swap > *{grid-area:1/1;transition:opacity .6s var(--ease-out),transform .8s var(--ease-out)}
.hero__swap > *:not(.is-active){opacity:0;transform:translateY(12px);pointer-events:none}
.hero__dots{display:flex;gap:10px;justify-content:flex-end;align-items:center}
.hero__dot{
  width:54px;height:4px;border-radius:2px;background:rgba(255,255,255,.2);position:relative;overflow:hidden;cursor:pointer
}
.hero__dot::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--tint-a),var(--tint-b));box-shadow:0 0 12px var(--tint-b);transform:scaleX(0);transform-origin:left}
.hero__dot.is-active::after{animation:progress var(--hero-dur,6s) linear forwards}
.hero__dot.is-active.is-paused::after{animation-play-state:paused}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero__count{font-family:var(--f-display);font-size:.7rem;letter-spacing:.2em;opacity:.6;margin-right:8px}
.hero__scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  font-family:var(--f-display);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;opacity:.5;
  display:flex;flex-direction:column;align-items:center;gap:8px
}
.hero__scroll i{width:1px;height:36px;background:linear-gradient(#fff,transparent);animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero__tagline{
  position:absolute;top:calc(var(--nav-h) + 8px);left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--f-display);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;opacity:.55;white-space:nowrap
}
@media (max-width:900px){
  .hero{padding-bottom:70px}
  .hero__stage{height:min(50svh,500px);margin-bottom:0}
  .hero__bottle{height:94%}
  .hero__ui{grid-template-columns:1fr;gap:16px}
  .hero__dots{justify-content:flex-start}
  .hero__word{font-size:clamp(2.4rem,12.5vw,8rem)}
  .hero__tagline{display:none}
}

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */
.marquee{overflow:hidden;padding:18px 0;position:relative;border-block:1px solid transparent;border-image:linear-gradient(90deg,transparent,var(--ice) 30%,var(--lilac) 70%,transparent) 1;box-shadow:0 0 30px -10px color-mix(in oklab,var(--lilac) 50%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
  font-family:var(--f-display);font-weight:700;font-size:clamp(1rem,1.8vw,1.4rem);letter-spacing:.14em;text-transform:uppercase;
  padding:0 1.4em;white-space:nowrap;opacity:.85
}
.marquee__track span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--ice);filter:drop-shadow(0 0 8px color-mix(in oklab,var(--ice) 60%,transparent))}
.marquee__track i{align-self:center;width:8px;height:8px;border-radius:50%;background:var(--lilac);box-shadow:0 0 12px var(--lilac),0 0 24px var(--wildberry);flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* --------------------------------------------------------------------------
   Reveal-on-scroll
   -------------------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out);transition-delay:var(--d,0s)}
[data-reveal="left"]{transform:translateX(-40px)}
[data-reveal="right"]{transform:translateX(40px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal].is-in{opacity:1;transform:none}
.split-words .w{display:inline-block;overflow:hidden;vertical-align:top}
.split-words .w > span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease-out);transition-delay:calc(var(--i)*.045s)}
.split-words.is-in .w > span{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  [data-reveal],.split-words .w > span,.hero__word .line > span{opacity:1!important;transform:none!important;transition:none!important}
  .marquee__track,.hero__bottle img,.hero__glow,.wash::after{animation:none!important}
  html{scroll-behavior:auto}
}

/* --------------------------------------------------------------------------
   Sips & Sounds — kookaburra line-draw
   -------------------------------------------------------------------------- */
.bird-draw{width:min(100%,420px);margin-inline:auto;filter:drop-shadow(0 0 30px color-mix(in oklab,var(--tint-b) 40%,transparent))}
.bird-draw path,.bird-draw polyline,.bird-draw line,.bird-draw polygon{stroke-dasharray:var(--len,1400);stroke-dashoffset:var(--len,1400);transition:stroke-dashoffset 2.4s var(--ease-io)}
.bird-draw.is-in path,.bird-draw.is-in polyline,.bird-draw.is-in line,.bird-draw.is-in polygon{stroke-dashoffset:0}

/* --------------------------------------------------------------------------
   Deals bar — slim neon marquee (same treatment as the hero marquee)
   -------------------------------------------------------------------------- */
.marquee--deals{padding:12px 0;border-image:linear-gradient(90deg,transparent,var(--wildberry) 30%,var(--lilac) 70%,transparent) 1;box-shadow:0 0 34px -10px color-mix(in oklab,var(--wildberry) 60%,transparent)}
.marquee--deals .marquee__track{animation-duration:46s}
.marquee--deals .marquee__track span{font-size:clamp(.8rem,1.3vw,1rem);letter-spacing:.16em;padding:0 1.2em;opacity:.9}
.marquee--deals .marquee__track span:nth-of-type(even){-webkit-text-stroke:1px var(--lilac);filter:drop-shadow(0 0 8px color-mix(in oklab,var(--lilac) 70%,transparent))}
.marquee--deals .marquee__track span b{background:var(--neon-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;filter:drop-shadow(0 0 10px color-mix(in oklab,var(--ice) 55%,transparent))}
.marquee--deals .marquee__track i{background:var(--wildberry);box-shadow:0 0 12px var(--wildberry),0 0 24px var(--lilac)}

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */
.products{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,32px)}
@media (max-width:820px){.products{grid-template-columns:1fr}}
.pcard{
  --tint:var(--tint-vodka-b);--btn:var(--ice);
  position:relative;border-radius:var(--r-card);overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  padding:clamp(28px,3.5vw,48px);min-height:640px;display:flex;flex-direction:column;justify-content:space-between;
  transition:border-color .5s,transform .7s var(--ease-out);
  transform-style:preserve-3d;
}
.pcard--gin{--tint:var(--tint-gin-b);--btn:var(--lilac)}
.pcard::before{ /* glow that follows the cursor */
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in oklab,var(--tint) 34%,transparent),transparent 60%);
}
.pcard:hover::before{opacity:1}
.pcard:hover{border-color:color-mix(in oklab,var(--tint) 70%,transparent);box-shadow:0 0 0 1px color-mix(in oklab,var(--tint) 40%,transparent),0 0 60px -20px var(--tint)}
.pcard__word{
  position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);text-align:center;pointer-events:none;
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;line-height:.9;
  font-size:clamp(3.4rem,8vw,7.4rem);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.2);
  transition:transform .8s var(--ease-out),-webkit-text-stroke-color .5s;
}
.pcard:hover .pcard__word{-webkit-text-stroke-color:var(--tint);filter:drop-shadow(0 0 14px color-mix(in oklab,var(--tint) 70%,transparent));transform:translateY(-50%) scale(1.03)}
.pcard__bottle{position:absolute;left:50%;top:50%;height:66%;aspect-ratio:701/1800;width:auto;transform:translate(-50%,-52%);z-index:1;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6));transition:transform .9s var(--ease-out)}
.pcard:hover .pcard__bottle{transform:translate(-50%,-55%) scale(1.04) rotate(-2deg)}
.pcard__bottle img{height:100%;width:100%;max-width:none;object-fit:contain}
.pcard__top,.pcard__bottom{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pcard__bottom{align-items:flex-end}
.pcard__name{font-size:clamp(1.3rem,2vw,1.8rem);line-height:1}
.pcard__name small{display:block;font-weight:400;font-size:.6em;letter-spacing:.1em;opacity:.8;margin-top:.2em}
.pcard__price{font-family:var(--f-display);font-size:.85rem;letter-spacing:.14em;opacity:.8}
.pcard__notes{font-size:.9rem;color:rgba(255,255,255,.7);max-width:24ch}
.pcard .btn{--bg:var(--btn)}
.pcard .btn::before{background:var(--white)}

/* --------------------------------------------------------------------------
   Feature list (the concept's second beat: bottle left, benefits right)
   -------------------------------------------------------------------------- */
.features{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,110px);align-items:center}
@media (max-width:900px){.features{grid-template-columns:1fr}}
.features__visual{position:relative;display:grid;place-items:center;min-height:520px}
.features__visual img{height:min(70vh,640px);width:auto;aspect-ratio:701/1800;max-width:none;object-fit:contain;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6));position:relative;z-index:1}
.features__ring{position:absolute;width:min(70vw,520px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.12);
  animation:spin 40s linear infinite}
.features__ring::before{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 20px var(--accent)}
.features__ring--2{width:min(84vw,640px);animation-duration:70s;animation-direction:reverse;opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}
.feature{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:28px 0;border-top:1px solid rgba(255,255,255,.1)}
.feature:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.feature__n{font-family:var(--f-display);font-size:.7rem;letter-spacing:.2em;color:var(--accent);padding-top:.5em;text-shadow:0 0 12px var(--accent)}
.feature h3{margin-bottom:.4em}
.feature p{color:rgba(255,255,255,.7);margin:0;max-width:48ch}

/* --------------------------------------------------------------------------
   Media blocks
   -------------------------------------------------------------------------- */
.media{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;background:#0d0d0d}
.media--wide{aspect-ratio:16/10}
.media--square{aspect-ratio:1}
.media img,.media video{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
.media--parallax img{transform:translateY(var(--py,0)) scale(1.15)}
.media__badge{position:absolute;left:20px;bottom:20px;padding:10px 16px;border-radius:var(--r-pill);background:rgba(0,0,0,.45);backdrop-filter:blur(10px);
  font-family:var(--f-display);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}
.media--reveal::after{content:"";position:absolute;inset:0;background:var(--charcoal);transform-origin:right;transition:transform 1.2s var(--ease-io);z-index:2}
.media--reveal.is-in::after{transform:scaleX(0)}
.media--reveal .media__badge{z-index:3}
.media--reveal img{transition:transform 1.6s var(--ease-out)}
.media--reveal.is-in img{transform:scale(1.02)}

/* --------------------------------------------------------------------------
   Foundation block
   -------------------------------------------------------------------------- */
.foundation{position:relative}
.foundation__logo{width:min(100%,380px);margin-bottom:1.6rem;filter:drop-shadow(0 0 30px rgba(161,80,158,.35))}
.foundation__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:2rem}
.stat{padding:16px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);border-top:2px solid var(--lilac);box-shadow:0 -10px 30px -20px var(--lilac)}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(.78rem,.92vw,1rem);line-height:1.1;overflow-wrap:anywhere}
.stat span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
@media (max-width:900px){.foundation__stats{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Cocktail rail (horizontal scroll) + cocktail cards
   -------------------------------------------------------------------------- */
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:8px var(--gutter) 24px;margin:0 calc(var(--gutter)*-1);scrollbar-width:none;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.ccard{
  flex:0 0 min(78vw,340px);scroll-snap-align:start;border-radius:var(--r-card);overflow:hidden;position:relative;aspect-ratio:3/4;
  background:#0d0d0d;isolation:isolate
}
.ccard img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.ccard:hover img{transform:scale(1.06)}
.ccard__body{position:absolute;inset:auto 0 0 0;padding:22px;background:linear-gradient(transparent,rgba(0,0,0,.85));}
.ccard__kind{font-family:var(--f-display);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.ccard h3{font-size:1.2rem}
.ccard p{font-size:.85rem;color:rgba(255,255,255,.75);margin:.5rem 0 0;max-height:0;overflow:hidden;transition:max-height .6s var(--ease-out),opacity .4s;opacity:0}
.ccard:hover p,.ccard:focus-within p{max-height:8em;opacity:1}
.cocktail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.cocktail-grid .ccard{flex:auto;aspect-ratio:3/4}
.cocktail-grid .ccard p{max-height:none;opacity:1}
.recipe{padding:28px;border-radius:var(--r-card);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.recipe ul{margin:.8rem 0 0;padding:0;list-style:none}
.recipe li{padding:.5rem 0;border-top:1px solid rgba(255,255,255,.08);font-size:.95rem}
.recipe li:first-child{border-top:0}

/* --------------------------------------------------------------------------
   CTA banner
   -------------------------------------------------------------------------- */
.cta{
  position:relative;border-radius:calc(var(--r-card) + 8px);overflow:hidden;padding:clamp(40px,7vw,100px) clamp(24px,5vw,80px);text-align:center;
  background:radial-gradient(80% 120% at 50% 120%,color-mix(in oklab,var(--tint-a) 55%,transparent),transparent),rgba(255,255,255,.03);
  border:1px solid color-mix(in oklab,var(--tint-b) 45%,transparent);box-shadow:0 0 80px -30px var(--tint-b),inset 0 0 120px -60px var(--tint-a)
}
.cta h2{font-size:clamp(1.5rem,6.2vw,4.6rem);text-wrap:balance}
.cta p{max-width:56ch;margin-inline:auto}

/* --------------------------------------------------------------------------
   Forms (Netlify)
   -------------------------------------------------------------------------- */
.form{display:grid;gap:22px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:640px){.form__row{grid-template-columns:1fr}}
.field{position:relative}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.3);color:#fff;
  padding:14px 0 10px;font:inherit;font-size:1rem;outline:none;transition:border-color .3s;border-radius:0;
}
.field textarea{min-height:140px;resize:vertical}
.field label{position:absolute;left:0;top:14px;font-family:var(--f-display);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;opacity:.55;pointer-events:none;transition:transform .3s var(--ease-out),opacity .3s}
.field input:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 12px 24px -20px var(--accent)}
.field input:focus + label,.field input:not(:placeholder-shown) + label,.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{transform:translateY(-16px) scale(.85);transform-origin:left;opacity:.8;color:var(--accent)}
.field i{position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.field input:focus ~ i,.field textarea:focus ~ i{transform:scaleX(1)}
.form__note{font-size:.78rem;opacity:.55}
.form-success{display:none;padding:22px;border-radius:16px;border:1px solid var(--accent);color:var(--accent);font-family:var(--f-display);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.form.is-done{display:none}
.form.is-done + .form-success{display:block}
.subscribe{display:flex;gap:10px;align-items:flex-end}
.subscribe .field{flex:1}
@media (max-width:520px){.subscribe{flex-direction:column;align-items:stretch}}

/* --------------------------------------------------------------------------
   Contact strip
   -------------------------------------------------------------------------- */
.contact-links{display:flex;gap:28px;flex-wrap:wrap;margin-top:1.5rem}
.contact-links a{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:.78rem;letter-spacing:.1em}
.contact-links svg{width:18px;height:18px;opacity:.7}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */
.faq{border-top:1px solid rgba(255,255,255,.12)}
.faq details{border-bottom:1px solid rgba(255,255,255,.12)}
.faq summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:24px 0;
  font-family:var(--f-display);font-size:clamp(.95rem,1.4vw,1.2rem);text-transform:uppercase;letter-spacing:.02em;
  transition:color .3s
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary .n{font-size:.7rem;letter-spacing:.2em;opacity:.5;font-weight:400}
.faq summary .plus{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;position:relative;transition:transform .5s var(--ease-out),background .3s}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;background:currentColor;width:12px;height:1.5px}
.faq summary .plus::after{transform:rotate(90deg);transition:transform .4s var(--ease-out)}
.faq details[open] summary .plus{background:rgba(255,255,255,.08)}
.faq details[open] summary .plus::after{transform:rotate(0)}
.faq .faq__body{padding:0 0 26px 54px;color:rgba(255,255,255,.72);max-width:70ch}
.faq details[open] .faq__body{animation:fadeup .6s var(--ease-out)}
@keyframes fadeup{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   Page hero (interior pages)
   -------------------------------------------------------------------------- */
.page-hero{padding:calc(var(--nav-h) + clamp(40px,8vw,110px)) 0 clamp(36px,5vw,70px);position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(2.6rem,7.2vw,7rem);line-height:.9;max-width:16ch}
.page-hero .sub{font-weight:400;display:block;font-size:.32em;letter-spacing:.12em;margin-top:.45em;opacity:.75}
.page-hero__bg{position:absolute;inset:0;z-index:-1;opacity:.35}
.page-hero__bg img,.page-hero__bg video{width:100%;height:100%;object-fit:cover}
.page-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,23,23,.3),var(--charcoal))}

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */
.product{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,90px);align-items:start}
@media (max-width:900px){.product{grid-template-columns:1fr}}
.product__visual{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;place-items:center;min-height:70vh;border-radius:var(--r-card);overflow:hidden;
  background:radial-gradient(60% 60% at 50% 60%,color-mix(in oklab,var(--tint-b) 30%,transparent),transparent 70%),rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08)}
.product__visual img{height:min(72vh,720px);width:auto;aspect-ratio:701/1800;max-width:none;object-fit:contain;filter:drop-shadow(0 40px 60px rgba(0,0,0,.65))}
.product__visual .pcard__word{top:50%}
.product__panel{padding-top:8px}
.product__title{font-size:clamp(2.4rem,4.5vw,4rem);line-height:.9}
.product__title small{display:block;font-weight:400;font-size:.42em;letter-spacing:.1em;margin-top:.3em;opacity:.8}
.product__price{font-family:var(--f-display);font-size:1.4rem;margin:1.2rem 0 .2rem}
.product__abv{font-family:var(--f-display);font-weight:400;font-size:.68rem;letter-spacing:.22em;opacity:.6}
.product__tagline{font-family:var(--f-display);font-weight:400;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;margin:1.6rem 0 1rem;color:var(--accent)}
.product__copy p{color:rgba(255,255,255,.8)}
.product__copy strong{color:#fff}
.buy{margin:1.8rem 0 1.4rem;min-height:64px}
/* Shopify Buy Button iframe host — the SDK injects an iframe here */
.buy .shopify-buy-frame{max-width:100%!important}
/* The site runs color-scheme:dark but the Shopify iframe document is light. Browsers paint an
   opaque white backdrop behind an iframe when the two schemes differ, boxing the Order button (and cart tab) in white. */
.shopify-buy-frame iframe{color-scheme:normal;background:transparent!important}
.spec{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:1.6rem}
.spec div{padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:14px;border-top:2px solid var(--accent);box-shadow:0 -10px 30px -20px var(--accent)}
.spec b{display:block;font-family:var(--f-display);font-size:.95rem}
.spec span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
@media (max-width:520px){.spec{grid-template-columns:1fr 1fr}}
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.gallery .media{aspect-ratio:auto;height:100%}
.gallery > :first-child{grid-row:span 2;aspect-ratio:1}
@media (max-width:820px){.gallery{grid-template-columns:1fr 1fr}.gallery > :first-child{grid-column:span 2;grid-row:auto}}

/* --------------------------------------------------------------------------
   Events / What's On
   -------------------------------------------------------------------------- */
.events{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.ecard{border-radius:var(--r-card);border:1px dashed rgba(255,255,255,.18);padding:28px;min-height:260px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(255,255,255,.02)}
.ecard__date{font-family:var(--f-display);font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.ecard h3{margin:.6rem 0 .4rem}

/* --------------------------------------------------------------------------
   Legal
   -------------------------------------------------------------------------- */
.legal{max-width:80ch}
.legal p,.legal li{color:rgba(255,255,255,.78);font-size:.98rem}
.legal strong{color:#fff;font-family:var(--f-display);font-weight:400;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;display:inline-block;margin-top:1.4em}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal h2{font-size:1.4rem;margin:2.4rem 0 .8rem}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer{position:relative;z-index:1;margin-top:clamp(60px,8vw,120px);border-top:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,transparent,rgba(0,0,0,.5))}
.site-footer .container{padding-block:clamp(48px,6vw,90px) 32px}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(32px,5vw,80px)}
@media (max-width:900px){.footer__top{grid-template-columns:1fr}}
.footer__logo{height:38px;width:auto;margin-bottom:1.4rem}
.footer__nav{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer__nav a{font-family:var(--f-display);font-weight:400;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75;display:inline-flex;gap:8px;align-items:center;transition:opacity .3s,transform .4s var(--ease-out)}
.footer__nav a:hover{opacity:1;transform:translateX(4px)}
.footer__h{font-family:var(--f-display);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;opacity:.5;margin-bottom:1.2rem}
.social{display:flex;gap:10px}
.social a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;transition:background .3s,transform .4s var(--ease-out),border-color .3s}
.social a:hover{background:var(--accent);color:var(--charcoal);transform:translateY(-3px);border-color:var(--accent);box-shadow:0 0 24px var(--accent)}
.social svg{width:16px;height:16px}
.footer__bottom{margin-top:clamp(36px,5vw,64px);padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--f-display);font-weight:400;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;opacity:.55;line-height:1.9}
.footer__bottom a{text-decoration:underline;text-underline-offset:3px}
.footer__giant{
  font-family:var(--f-display);font-weight:700;font-size:clamp(2.4rem,12.6vw,13rem);line-height:.8;text-transform:uppercase;text-align:center;
  background:var(--neon-grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.28;
  filter:drop-shadow(0 0 30px color-mix(in oklab,var(--lilac) 60%,transparent));margin:clamp(30px,5vw,60px) 0 -.12em;user-select:none;pointer-events:none
}

/* --------------------------------------------------------------------------
   Age gate
   -------------------------------------------------------------------------- */
.agegate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  background:rgba(10,10,10,.82);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);transition:opacity .6s,visibility .6s}
.agegate[hidden]{display:none}
.agegate.is-leaving{opacity:0;visibility:hidden}
.agegate__card{width:min(100%,520px);border-radius:28px;padding:clamp(28px,5vw,48px);text-align:center;
  background:linear-gradient(160deg,rgba(57,84,98,.55),rgba(22,23,23,.9));border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 100px rgba(0,0,0,.6);
  transform:translateY(20px);opacity:0;animation:cardin .9s var(--ease-out) .1s forwards}
@keyframes cardin{to{transform:none;opacity:1}}
.agegate__logo{height:42px;width:auto;margin:0 auto 1.4rem}
.agegate h2{font-size:.95rem;letter-spacing:.06em;line-height:1.35;margin:0 auto .7rem;max-width:30ch}
.agegate p{font-size:.85rem;line-height:1.55;color:rgba(255,255,255,.78);max-width:40ch;margin:0 auto 1em}
.agegate__choices{display:grid;gap:10px;margin-top:1.4rem}
.agegate__choices .btn{width:100%;font-size:.66rem;letter-spacing:.1em;padding:.95rem 1rem;white-space:nowrap}
.agegate small{display:block;margin-top:1.1rem;font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;opacity:.6;line-height:1.7;max-width:40ch;margin-inline:auto}
.agegate small a{text-decoration:underline;text-underline-offset:2px}
.agegate.is-denied .agegate__card{border-color:rgba(255,120,120,.35)}
.agegate__deny h2{color:#ffb4b4}
.agegate__deny{position:relative;padding-top:.4rem}
.agegate__back{position:absolute;left:0;top:-2.6rem;display:inline-flex;align-items:center;gap:6px;padding:8px 14px 8px 10px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.25);font-family:var(--f-display);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;transition:background .3s,border-color .3s}
.agegate__back svg{width:14px;height:14px}
.agegate__back:hover{background:rgba(255,255,255,.1);border-color:#fff}
.agegate__card{position:relative}
.agegate.is-denied .agegate__logo{margin-bottom:3.2rem}

/* --------------------------------------------------------------------------
   Page transition / loader
   -------------------------------------------------------------------------- */
.veil{position:fixed;inset:0;z-index:90;background:var(--charcoal);pointer-events:none;transform-origin:top;
  transition:transform .8s var(--ease-io)}
.veil.is-open{transform:scaleY(0)}
.veil.is-closing{transform-origin:bottom;transform:scaleY(1)}

/* --------------------------------------------------------------------------
   Cursor glow (desktop only)
   -------------------------------------------------------------------------- */
.cursor{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:50%;background:#fff;pointer-events:none;z-index:120;mix-blend-mode:difference;
  transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s;opacity:0}
.cursor.is-on{opacity:1}
.cursor.is-hover{width:56px;height:56px}
@media (hover:none){.cursor{display:none}}

/* Skip link */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:10px;z-index:200;padding:10px 16px;background:#fff;color:#000;border-radius:8px}
.skip:focus{left:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kookaburra: stroke draws first, then the gradient fill fades in */
.bird-draw path{fill-opacity:0;transition:stroke-dashoffset 2.6s var(--ease-io),fill-opacity 1.2s ease 1.9s}
.bird-draw.is-in path{fill-opacity:1}

.buy__fallback{display:inline-flex}
.buy.is-mounted .buy__fallback{display:none}

.neon.split-words{background:none;color:inherit}
.neon.split-words .w>span{background:var(--neon-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ==========================================================================
   FOUNDATION — replicates volumefoundation.org in the Volume palette
   ========================================================================== */
.fhero{position:relative;min-height:88svh;display:grid;align-items:center;overflow:hidden;padding:calc(var(--nav-h) + 40px) 0 60px;isolation:isolate;background:#000}
.fhero__media{position:absolute;inset:0;z-index:0;display:grid;place-items:center;pointer-events:none}
.fhero__media video,.fhero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:.95;filter:saturate(1.1)}
.fhero__media video{object-fit:contain;object-position:82% 50%;transform:scale(1.15);transform-origin:82% 50%}
@media (max-width:900px){.fhero__media video{object-position:50% 40%;opacity:.6}}
.fhero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,var(--charcoal) 100%),linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0) 55%)}
.fhero .container{position:relative;z-index:1}
.fhero h1{font-size:clamp(1.9rem,6.6vw,6.4rem);line-height:.92;max-width:14ch}
.fhero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.8rem}
.fhero__logo{width:min(64vw,300px);height:auto;margin-bottom:1.6rem}
@media (max-width:900px){.fhero{min-height:72svh}}

/* the model: scroll-scrubbed frame sequence (from volumefoundation.org) */
.scrub{position:relative;height:340svh}
.scrub__stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.scrub__stage canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;opacity:.95;will-change:transform}
.scrub__hud{position:absolute;left:var(--gutter);top:calc(var(--nav-h) + 12px);display:flex;gap:14px;align-items:baseline;font-family:var(--f-display);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;opacity:.7}
.scrub__hud b{font-weight:700;color:var(--accent)}
.scrub__caps{position:relative;width:min(100% - var(--gutter)*2,1100px);display:grid}
.scrub__cap{grid-area:1/1;opacity:0;transform:translateY(var(--y,28px));transition:none;max-width:520px;justify-self:start;padding:24px;border-radius:var(--r-card);background:color-mix(in oklab,var(--charcoal) 55%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.scrub__cap:nth-child(2){justify-self:end}
.scrub__cap .eyebrow{margin-bottom:.6rem}
.scrub__cap h3{font-size:clamp(1.7rem,3.6vw,3rem);line-height:.95;margin-bottom:.8rem}
.scrub__cap p{color:rgba(255,255,255,.78);margin:0;max-width:44ch}
.scrub__rail{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);width:2px;height:140px;background:rgba(255,255,255,.15);border-radius:2px}
.scrub__rail i{position:absolute;left:-2px;top:0;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.scrub__hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:var(--f-display);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;opacity:.6;display:flex;gap:10px;align-items:center;transition:opacity .4s}
.scrub__hint i{width:6px;height:6px;border-radius:50%;background:var(--wildberry);box-shadow:0 0 10px var(--wildberry);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.scrub{height:auto}.scrub__stage{position:relative;height:auto;padding:60px 0}.scrub__caps{gap:20px}.scrub__cap{grid-area:auto;opacity:1;transform:none;justify-self:stretch}.scrub__cap:nth-child(2){justify-self:stretch}.scrub__hint,.scrub__rail{display:none}}
@media (max-width:700px){.scrub__cap,.scrub__cap:nth-child(2){justify-self:stretch;max-width:none}}

/* programs */
.programs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
@media (max-width:900px){.programs{grid-template-columns:1fr}}
.program{padding:clamp(22px,2.6vw,36px);border-radius:var(--r-card);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);position:relative;overflow:hidden;transition:transform .6s var(--ease-out),border-color .4s;min-width:0}
.program::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 0%,color-mix(in oklab,var(--lilac) 22%,transparent),transparent 70%);opacity:0;transition:opacity .5s}
.program:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--lilac) 50%,transparent)}
.program:hover::before{opacity:1}
.program__n{font-family:var(--f-display);font-size:2.2rem;line-height:1;background:var(--neon-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:1rem}
.program h3{margin-bottom:.6rem;font-size:clamp(1.05rem,1.5vw,1.45rem);letter-spacing:.02em;overflow-wrap:anywhere}
.program p{color:rgba(255,255,255,.75);margin:0}

/* now playing */
.players{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:820px){.players{grid-template-columns:1fr}}
.player{border-radius:var(--r-card);border:1px solid rgba(255,255,255,.1);overflow:hidden;background:rgba(0,0,0,.35)}
.player__bar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--f-display);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase}
.eq{display:inline-flex;gap:3px;align-items:flex-end;height:14px}
.eq i{width:3px;background:var(--accent);border-radius:1px;animation:eq 1.1s ease-in-out infinite;box-shadow:0 0 8px var(--accent)}
.eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}.eq i:nth-child(4){animation-delay:.45s}.eq i:nth-child(5){animation-delay:.6s}
@keyframes eq{0%,100%{height:30%}50%{height:100%}}
.player__frame{width:100%;aspect-ratio:16/9;max-width:100%;display:grid;place-items:center;position:relative}
.player__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player__empty{text-align:center;padding:24px}
.player__empty .eyebrow{justify-content:center;margin-bottom:.5rem}
.player__empty .eyebrow{display:flex}
.player__empty b{display:block;font-family:var(--f-display);font-size:clamp(.9rem,1.8vw,1.4rem);text-transform:uppercase;letter-spacing:.04em;text-wrap:balance}
.player--sc .eq i{background:var(--wildberry);box-shadow:0 0 8px var(--wildberry)}

/* counters */
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.counters{grid-template-columns:1fr}}
.counter{min-width:0;padding:clamp(22px,2.6vw,34px);border-radius:var(--r-card);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.counter b{display:block;font-family:var(--f-display);font-size:clamp(2.2rem,4.4vw,4rem);line-height:1;padding-right:.1em;background:var(--neon-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.counter span{display:block;margin-top:.8rem;font-family:var(--f-display);font-weight:400;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;opacity:.65}

/* manifesto */
.manifesto{font-family:var(--f-display);font-size:clamp(1.15rem,2.4vw,2rem);line-height:1.3;text-transform:uppercase;letter-spacing:.01em;max-width:30ch}
.manifesto .neon{display:inline}

/* social row */
.socials{display:flex;flex-wrap:wrap;gap:10px}
.socials a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.18);font-family:var(--f-display);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;transition:background .3s,border-color .3s,transform .4s var(--ease-out)}
.socials a:hover{background:rgba(255,255,255,.08);border-color:var(--accent);transform:translateY(-2px)}
.socials svg{width:14px;height:14px}

/* ==========================================================================
   BUNDLE
   ========================================================================== */
.pcard--bundle{--tint:var(--lilac);--btn:var(--white)}
.pcard--bundle .pcard__bottle{display:flex;gap:0;height:62%;aspect-ratio:1402/1800;transform:translate(-50%,-52%)}
.pcard--bundle .pcard__bottle img{width:50%;flex:none}
.pcard--bundle .pcard__bottle img:first-child{transform:rotate(-8deg) translateX(14%)}
.pcard--bundle .pcard__bottle img:last-child{transform:rotate(8deg) translateX(-14%)}
.pcard--bundle .btn{--bg:#fff}
.pcard__tag{font-family:var(--f-display);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);background:var(--neon-grad);color:var(--charcoal);display:inline-block;margin-bottom:.6rem}
.products--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.products--3{grid-template-columns:1fr 1fr}.products--3 .pcard--bundle{grid-column:span 2}}
@media (max-width:820px){.products--3{grid-template-columns:1fr}.products--3 .pcard--bundle{grid-column:auto}}
.product__visual--bundle img{height:min(60vh,600px)}
.product__visual--bundle .pair{display:flex;align-items:center;justify-content:center}
.product__visual--bundle .pair img:first-child{transform:rotate(-8deg) translateX(12%)}
.product__visual--bundle .pair img:last-child{transform:rotate(8deg) translateX(-12%)}

/* ==========================================================================
   STOCKISTS
   ========================================================================== */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:.6rem 1.1rem;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.2);font-family:var(--f-display);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.chip:hover{border-color:#fff}
.chip.is-active{background:var(--accent);border-color:var(--accent);color:var(--charcoal);box-shadow:0 0 22px -4px var(--accent)}
.filters + .filters{margin-top:10px}
.filters--city .chip.is-active{background:var(--lilac);border-color:var(--lilac);box-shadow:0 0 22px -4px var(--lilac)}
.venues{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:2rem}
.venue{position:relative;padding:26px;border-radius:var(--r-card);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:14px;min-height:230px;overflow:hidden;transition:transform .6s var(--ease-out),border-color .4s;isolation:isolate}
.venue::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),color-mix(in oklab,var(--accent) 26%,transparent),transparent 60%)}
.venue:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--accent) 55%,transparent)}
.venue:hover::before{opacity:1}
.venue.is-hidden{display:none}
.venue__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.venue__type{font-family:var(--f-display);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.venue__city{font-family:var(--f-display);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;opacity:.55}
.venue h3{font-size:clamp(1.1rem,1.6vw,1.4rem)}
.venue p{margin:0;color:rgba(255,255,255,.72);font-size:.92rem;flex:1}
.venue__pours{display:flex;gap:6px;flex-wrap:wrap}
.venue__pours span{font-family:var(--f-display);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.18)}
.venue__pours .v{border-color:color-mix(in oklab,var(--ice) 70%,transparent);color:var(--ice)}
.venue__pours .g{border-color:color-mix(in oklab,var(--lilac) 70%,transparent);color:var(--lilac)}
.venue__links{display:flex;gap:16px;flex-wrap:wrap}
.venue__media{position:relative;margin:-26px -26px 0;aspect-ratio:3/2;overflow:hidden;background:#0d0d0d}
.venue__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease-out)}
.venue__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.75),transparent 55%);pointer-events:none}
.venue:hover .venue__media img{transform:scale(1.05)}
.venue__badge{position:absolute;left:14px;bottom:14px;z-index:1;font-family:var(--f-display);font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;padding:6px 11px;border-radius:var(--r-pill);background:rgba(10,10,10,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid color-mix(in oklab,var(--accent) 60%,transparent);color:#fff}
.venue__addr{font-style:normal;font-size:.8rem;opacity:.55;margin-top:-6px}
.venue--example{border-style:dashed}
.venue--example::after{content:"Example";position:absolute;right:16px;bottom:14px;font-family:var(--f-display);font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;opacity:.4}
.venues__empty{grid-column:1/-1;text-align:center;padding:60px 20px;opacity:.7;display:none}
.venues.is-empty .venues__empty{display:block}
.stock-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.stock-strip{grid-template-columns:1fr 1fr}}
.stock-strip .stat b{font-size:1rem;text-wrap:balance}

/* ---- responsive hardening: grid children may shrink below their content ---- */
.grid-2>*,.grid-3>*,.products>*,.features>*,.product>*,.footer__top>*,.counters>*,.programs>*,.players>*,.venues>*,.stock-strip>*,.foundation__stats>*,.spec>*{min-width:0}
h1,h2,h3{overflow-wrap:break-word}
.pcard--strip{min-height:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
.pcard--strip .pcard__name small{white-space:normal}
@media (max-width:700px){
  .pcard--strip{grid-template-columns:1fr;gap:16px;text-align:left}
  .pcard--strip .btn{justify-self:start}
  .hero__actions .btn{padding:.9rem 1.4rem;font-size:.72rem}
  .hero__word{top:40%}
  .page-hero h1{font-size:clamp(2.2rem,11vw,7rem)}
  .section{padding-block:64px}
  .products{gap:14px}
  .pcard{min-height:520px}
  .gallery{grid-template-columns:1fr}
  .gallery>:first-child{grid-column:auto}
  .spec{grid-template-columns:1fr 1fr}
  .footer__giant{margin-bottom:0}
  .filters{gap:6px}.chip{padding:.5rem .85rem;font-size:.58rem}
}
@media (max-width:1100px) and (min-width:701px){
  .hero__word{font-size:clamp(3rem,11vw,9rem)}
}
/* iPad / tablet: keep two-up product grid and comfortable gutters */
@media (min-width:701px) and (max-width:1024px){
  .product__visual{position:relative;top:auto;min-height:56vh}
  .features__visual{min-height:420px}
  .features__visual img{height:min(52vh,520px)}
}

.grid-2 h2,.features h2{font-size:clamp(1.8rem,3.5vw,3.3rem)}
.products--3 .pcard{padding:clamp(22px,2.4vw,32px)}
.products--3 .pcard__name{font-size:clamp(1.1rem,1.5vw,1.35rem)}
.products--3 .pcard__price{font-size:.72rem}
.products--3 .pcard__notes{font-size:.82rem;max-width:20ch}
.products--3 .pcard__word{font-size:clamp(3rem,6vw,5.4rem)}
.venues{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

/* landscape video boxes (foundation wave) */
.media--video{background:#000;aspect-ratio:16/9}
.media--video video{transform:none;object-fit:cover;mix-blend-mode:screen}
.wave-still{width:min(100%,360px);height:auto;margin-top:1.5rem;filter:drop-shadow(0 0 40px color-mix(in oklab,var(--wildberry) 45%,transparent))}
@media (max-width:900px){.wave-still{display:none}}
.agegate__logo{height:34px}
.brand__logo{height:22px}

/* --------------------------------------------------------------------------
   Signature drinks — the rumour
   -------------------------------------------------------------------------- */
.rumour{padding-block:0 clamp(28px,4vw,56px);margin-top:calc(-1 * clamp(16px,3vw,40px))}
.rumour__card{position:relative;overflow:hidden;border-radius:var(--r-card);padding:clamp(22px,3vw,36px) clamp(22px,3.4vw,44px);border:1px solid rgba(255,255,255,.1);max-width:920px;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(18px,3vw,40px);align-items:start;
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));box-shadow:0 0 60px -30px var(--lilac),inset 0 0 0 1px rgba(255,255,255,.02)}
.rumour__card::before{content:"\201C";position:absolute;right:clamp(8px,2vw,24px);top:-.12em;font-family:var(--f-display);font-size:clamp(6rem,12vw,10rem);line-height:1;color:transparent;-webkit-text-stroke:1px color-mix(in oklab,var(--lilac) 45%,transparent);pointer-events:none}
.rumour__card .eyebrow{margin-bottom:.6rem}
.rumour__card h2{font-size:clamp(1.25rem,2.2vw,1.9rem);max-width:14ch;margin:0}
.rumour__body{max-width:56ch;font-size:clamp(.92rem,1.05vw,1rem);line-height:1.55}
.rumour__body p{margin:0 0 .7rem}
.rumour__qa span{display:block;font-family:var(--f-display);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ice);margin-bottom:.1rem}
.rumour__qa{font-family:var(--f-display);font-size:clamp(.95rem,1.3vw,1.15rem);line-height:1.15}
.rumour__toast{margin-top:1rem!important;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.1)}
.rumour__toast strong{background:var(--neon-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
@media (max-width:760px){.rumour__card{grid-template-columns:1fr;gap:12px}}

/* --------------------------------------------------------------------------
   Headings fit their column on every screen size
   -------------------------------------------------------------------------- */
/* product names size to the panel, not the viewport (and beat the generic .page-hero h1 size) */
.product__panel{container-type:inline-size}
.page-hero .product__title{font-size:clamp(1.7rem,10cqi,4.4rem);max-width:none}
@media (max-width:700px){
  .page-hero h1:not(.product__title){font-size:clamp(1.5rem,7.8vw,7rem)}
}
/* small phones: long words ("investment", "supporting") stay inside the column */
@media (max-width:480px){
  h2,.h2,.grid-2 h2,.features h2{font-size:min(2rem,7.6vw)}
}
/* long URLs and email addresses wrap instead of pushing past the edge */
.legal p,.legal li,.legal a{overflow-wrap:anywhere}