/* Reggae Royalty shared styles (generated from the single-page design). */
:root{
    --sky-1:#2a95d3; --sky-2:#4aa5dc; --sky-3:#63b4e5; --sky-4:#86c8ef; --sky-5:#b4e0f7; --sky-wash:#eaf6fd;
    --cream:#fff8ec;
    --ink:#10222b;
    --ink-soft:#50626b;
    --sun:#ffd42a;
    --c-pineapple:#d0621f;
    --c-citrus:#161719;
    --c-mango:#bf1d27;
    --c-guava:#1f7a38;
    --font:'Montserrat', Helvetica, Arial, sans-serif;
    --gutter:clamp(16px,4vw,56px);
    --ease-out:cubic-bezier(.2,.8,.2,1);
    --ease-pop:cubic-bezier(.34,1.5,.5,1);
  }
  *{box-sizing:border-box;}
  html.lenis, html.lenis body{height:auto;}
  .lenis.lenis-smooth{scroll-behavior:auto !important;}
  .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
  .lenis.lenis-stopped{overflow:hidden;}
  html.gate-open, html.gate-open body{overflow:hidden !important; overscroll-behavior:none;}
  html, body{overflow-x:hidden; overflow-x:clip;}
  body{margin:0; font-family:var(--font); color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased;}
  img{max-width:100%; display:block;}
  a{color:inherit;}
  .wrap{max-width:1320px; margin:0 auto; padding:0 var(--gutter);}
  .btn{
    position:relative; overflow:hidden;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font:800 15px/1 var(--font); letter-spacing:.04em; text-transform:uppercase; text-decoration:none; cursor:pointer;
    padding:18px 30px; border-radius:999px; border:0;
    transition:transform .25s var(--ease-pop), box-shadow .25s ease, background .2s;
  }
  .btn::after{ /* shine sweep on hover */
    content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-20deg);
    transition:left .6s ease;
  }
  .btn:hover{transform:translateY(-3px) scale(1.03);}
  .btn:hover::after{left:120%;}
  .btn:focus-visible{outline:3px solid var(--sun); outline-offset:3px;}
  .btn svg{width:18px; height:18px; flex:none;}
  .btn-white{background:#fff; color:var(--sky-1); box-shadow:0 16px 34px -16px rgba(8,50,80,.6);}
  .btn-line{color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);}
  .btn-line:hover{background:rgba(255,255,255,.15);}
  .btn-ink{background:var(--ink); color:#fff;}
  .btn-sky{background:var(--sky-1); color:#fff; box-shadow:0 16px 34px -16px rgba(42,149,211,.9);}
  .sec-kicker{margin:0 0 10px; font-weight:800; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--sky-1);}
  .sec-title{margin:0; font-weight:900; text-transform:uppercase; font-size:clamp(34px,5.4vw,78px); line-height:.94; letter-spacing:-.02em;}
  .sec-lead{margin:16px 0 0; color:var(--ink-soft); font-size:clamp(15px,1.3vw,18px); line-height:1.6; max-width:54ch;}
  .center{text-align:center;} .center .sec-lead{margin-left:auto; margin-right:auto;}

  /* ============ MOTION SYSTEM ============ */
  /* scroll reveals: hidden only when JS runs and motion is allowed */
  html.js:not(.rm) [data-r]{opacity:0; transition:opacity .8s ease, transform 1s var(--ease-out); transition-delay:var(--d,0s);}
  html.js:not(.rm) [data-r="up"]{transform:translateY(56px);}
  html.js:not(.rm) [data-r="left"]{transform:translateX(-90px);}
  html.js:not(.rm) [data-r="right"]{transform:translateX(90px);}
  html.js:not(.rm) [data-r="pop"]{transform:scale(.4) rotate(-18deg); transition-timing-function:ease, var(--ease-pop);}
  html.js:not(.rm) [data-r="rise"]{transform:translateY(160px) rotate(-12deg); transition-duration:.8s, 1.2s; transition-timing-function:ease, var(--ease-pop);}
  html.js:not(.rm) [data-r].in{opacity:1; transform:none;}

  /* hero entrance: plays once the gate is passed (body.go) */
  html.js:not(.rm) [data-in]{opacity:0;}
  html.js:not(.rm) body.go [data-in]{animation:var(--a,in-up) var(--t,.9s) var(--e,var(--ease-out)) var(--d,0s) both;}
  @keyframes in-up{from{opacity:0; transform:translateY(34px);} to{opacity:1; transform:none;}}
  @keyframes in-rise{0%{opacity:0; transform:translateY(220px) scale(.9);} 40%{opacity:1;} 100%{opacity:1; transform:none;}}
  @keyframes in-pop{0%{opacity:0; transform:scale(.2) rotate(-40deg);} 100%{opacity:1; transform:none;}}
  @keyframes in-word{0%{opacity:0; transform:translateY(.45em) rotate(5deg) scale(.92);} 100%{opacity:1; transform:none;}}
  @keyframes bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);}}
  @keyframes floaty{0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-18px) rotate(7deg);}}
  @keyframes sway{0%{transform:translateX(-4vw);} 100%{transform:translateX(4vw);}}
  @keyframes spin{to{transform:rotate(360deg);}}
  @keyframes tick{to{transform:translateX(-50%);}}

  /* fizz: carbonation bubbles (spawned by JS into any [data-fizz]) */
  .fizz{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
  .fizz i{position:absolute; bottom:-24px; left:var(--x); width:var(--s); height:var(--s); border-radius:50%; opacity:0;
    background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(255,255,255,.28) 38%, rgba(255,255,255,.06) 70%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
    animation:rise var(--t) linear var(--dl) infinite;}
  @keyframes rise{
    0%{transform:translate(0,0); opacity:0;}
    8%{opacity:var(--o,.85);}
    30%{transform:translate(var(--dx),-30vh);}
    60%{transform:translate(calc(var(--dx) * -1),-62vh);}
    90%{opacity:calc(var(--o,.85) * .8);}
    100%{transform:translate(var(--dx),-100vh); opacity:0;}
  }
  body.playing .fizz i{animation-duration:calc(var(--t) * .6);}

  /* magnetic buttons */
  .btn, .nav-ig{transition:transform .25s var(--ease-pop), box-shadow .25s ease, background .2s, translate .35s var(--ease-out);}

  /* ============ NAV ============ */
  .nav{position:fixed; z-index:60; inset:0 0 auto 0; transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s;}
  .nav .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:20px; padding-bottom:20px; transition:padding .35s ease;}
  .nav.scrolled{background:rgba(42,149,211,.92); backdrop-filter:blur(10px); box-shadow:0 10px 30px -18px rgba(8,50,80,.6);}
  .nav.scrolled .wrap{padding-top:10px; padding-bottom:10px;}
  .nav-logo img{height:clamp(36px,3.4vw,48px); width:auto; transition:height .35s ease;}
  .nav.scrolled .nav-logo img{height:38px;}
  .nav-links{display:flex; align-items:center; gap:clamp(12px,2.2vw,30px);}
  .nav-links a{color:#fff; text-decoration:none; font-weight:800; font-size:13.5px; letter-spacing:.07em; text-transform:uppercase; position:relative;}
  .nav-links a.u::after{content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px; background:var(--sun); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out);}
  .nav-links a.u:hover::after{transform:scaleX(1);}
  .nav-ig{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6); transition:transform .3s var(--ease-pop);}
  .nav-ig:hover{transform:rotate(-10deg) scale(1.1);}
  .nav-ig svg{width:18px; height:18px;}
  @media (max-width:860px){ .nav-links .hide-sm{display:none;} }

  /* ============ HERO ============ */
  .hero{
    position:relative; overflow:hidden; isolation:isolate; text-align:center;
    background:linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 28%, var(--sky-3) 55%, var(--sky-4) 78%, var(--sky-5) 100%);
    padding-top:clamp(104px,11vw,132px);
  }
  .clouds{position:absolute; inset:0; z-index:0; pointer-events:none;}
  .cloud{position:absolute;}
  .cloud img{width:100%; animation:sway var(--s,40s) ease-in-out var(--sd,0s) infinite alternate;}
  .cl-1{width:clamp(220px,28vw,460px); left:-6%; top:7%; opacity:.95;}
  .cl-2{width:clamp(200px,24vw,400px); right:-5%; top:20%; opacity:.9;}
  .cl-3{width:clamp(180px,22vw,360px); left:6%; top:52%; opacity:.85;}
  .cl-4{width:clamp(140px,15vw,260px); right:16%; top:4%; opacity:.6; filter:blur(1px);}
  .cl-5{width:clamp(220px,26vw,440px); right:4%; top:56%; opacity:.85;}
  .cl-6{width:clamp(120px,12vw,200px); left:30%; top:38%; opacity:.45; filter:blur(2px);}
  .hero-copy{position:relative; z-index:2;}
  .kicker{margin:0 0 14px; color:#fff; font-weight:800; font-size:13px; letter-spacing:.26em; text-transform:uppercase;}
  .headline{
    margin:0 auto; color:#fff; font-weight:900; text-transform:uppercase;
    font-size:clamp(46px,7.3vw,124px); line-height:.94; letter-spacing:-.025em;
    text-shadow:0 10px 40px rgba(8,50,80,.22);
  }
  @media (min-width:900px){ .headline{white-space:nowrap;} }
  .ch{display:inline-block;}
  .headline:hover .ch{animation:jump .7s var(--ease-pop) calc(var(--i) * .035s) both;}
  body.playing .headline .ch{animation:jump .8s ease-in-out calc(var(--i) * .06s) infinite;}
  @keyframes jump{0%,100%{transform:none;} 40%{transform:translateY(-.16em) rotate(-5deg);} 70%{transform:translateY(.03em);}}
  .hw{display:inline-block; vertical-align:top;}
  .hw > span{display:inline-block;}
  .hero-sub{margin:18px auto 0; max-width:48ch; color:#fff; font-weight:600; font-size:clamp(15px,1.3vw,19px); line-height:1.55; text-shadow:0 2px 14px rgba(8,50,80,.25);}
  .hero-ctas{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:26px;}

  .stage{position:relative; z-index:1; margin:clamp(6px,1.5vw,20px) auto 0; width:min(1180px,100%); height:clamp(380px,56vh,640px);}
  .layer{position:absolute; inset:0; will-change:translate;}
  .stage::after{
    content:""; position:absolute; left:24%; right:24%; bottom:7%; height:9%; z-index:0;
    background:radial-gradient(50% 50% at 50% 50%, rgba(10,50,80,.3), transparent 70%); filter:blur(6px);
  }
  .it{position:absolute;}
  .it img{display:block;}
  /* cans */
  .cw{height:var(--h); bottom:10%;}
  .cw img{height:100%; width:auto; max-width:none; filter:drop-shadow(0 26px 26px rgba(8,40,70,.35)); animation:bob 5.5s ease-in-out var(--bd,0s) infinite; transition:scale .45s var(--ease-pop), translate .45s var(--ease-pop);}
  .h-guava    {--h:80%; left:26.5%; rotate:-11deg; z-index:3; --bd:-1s;}
  .h-pineapple{--h:94%; left:36.5%; rotate:-4deg;  z-index:5; --bd:-2.5s;}
  .h-mango    {--h:90%; left:49.5%; rotate:5deg;   z-index:4; --bd:-.5s;}
  .h-citrus   {--h:80%; left:60.5%; rotate:12deg;  z-index:3; --bd:-3.5s;}
  /* fruit */
  .fw img{width:100%; filter:drop-shadow(0 18px 22px rgba(8,40,70,.28)); animation:floaty var(--fs,7s) ease-in-out var(--fd,0s) infinite;}
  .fw.h{height:var(--h);} .fw.h img{height:100%; width:auto;}
  .x-pine   {--h:62%; left:12%; bottom:15%; rotate:-10deg; --fs:9s;}
  .x-hib    {width:11%; left:14%; top:0;  --fd:-2s;}
  .x-hib img{filter:blur(1.2px) drop-shadow(0 18px 22px rgba(8,40,70,.25));}
  .x-guava  {width:10%; right:13%; top:5%; rotate:18deg; --fd:-4s; --fs:8s;}
  .x-lime   {width:21%; left:3%; bottom:0; --fs:8.5s; --fd:-1s;}
  .x-mango  {width:23%; right:3%; bottom:0; --fs:9.5s; --fd:-3s;}

  /* info strip */
  .strip{position:relative; z-index:8; margin-top:-46px; padding:0 var(--gutter);}
  .strip-card{display:grid; grid-template-columns:repeat(3,1fr); max-width:940px; margin:0 auto; background:#fff; border-radius:24px; padding:24px 10px; box-shadow:0 30px 60px -30px rgba(8,50,80,.45);}
  .strip-cell{text-align:center; padding:0 8px; position:relative;}
  .strip-cell + .strip-cell::before{content:""; position:absolute; left:0; top:12%; bottom:12%; width:1px; background:#e7eef2;}
  .strip-big{font-weight:900; text-transform:uppercase; font-size:clamp(15px,2vw,26px); line-height:1.1;}
  .strip-small{margin-top:4px; font-weight:600; color:var(--ink-soft); font-size:clamp(11px,1.2vw,14px);}
  .s1 .strip-big{color:var(--c-guava);} .s2 .strip-big{color:var(--c-mango);} .s3 .strip-big{color:#d69e12;}

  /* ============ TICKER ============ */
  .ticker{margin-top:clamp(56px,7vw,90px); background:var(--sun); color:var(--ink); overflow:hidden; transform:rotate(-1.5deg); box-shadow:0 12px 0 rgba(0,0,0,.05);}
  .ticker-track{display:flex; width:max-content; animation:tick 34s linear infinite;}
  .ticker:hover .ticker-track{animation-play-state:paused;}
  .ticker span{display:flex; align-items:center; gap:28px; padding:18px 14px; font-weight:900; font-size:clamp(16px,1.9vw,26px); letter-spacing:.01em; text-transform:uppercase; white-space:nowrap;}
  .ticker span::after{content:"✦"; font-size:.8em;}

  /* ============ FLAVOUR JOURNEY ============ */
  /* default = stacked colour cards (mobile, reduced motion, no JS). Desktop gets the pinned, scroll-scrubbed stage (.fj-live). */
  .journey{padding:clamp(70px,8vw,110px) 0 clamp(30px,4vw,50px);}
  .journey .head{margin-bottom:clamp(34px,4vw,56px);}
  .fj-stage{position:relative;}
  .fj-stage > .fizz, .fj-dots{display:none;}
  .fj-panel{
    --c:var(--c-pineapple); --k:0; --ak:0;
    position:relative; overflow:hidden; isolation:isolate; color:#fff; background:var(--c);
    width:calc(100% - 2*var(--gutter)); max-width:1320px; margin:0 auto clamp(18px,2vw,26px);
    border-radius:clamp(24px,3vw,40px);
    display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
    min-height:clamp(520px,44vw,660px);
  }
  .fj-num{position:absolute; right:-1vw; top:-3vw; z-index:-1; pointer-events:none; font-weight:900; line-height:.8; letter-spacing:-.06em; font-size:clamp(170px,26vw,420px); color:rgba(255,255,255,.08);}
  .fj-visual{position:relative; height:100%; min-height:inherit;}
  .fj-can{position:absolute; left:0; right:0; margin:0 auto; width:fit-content; height:84%; bottom:7%; z-index:3; rotate:-6deg;}
  .fj-can img{height:100%; width:auto; max-width:none; filter:drop-shadow(0 34px 34px rgba(0,0,0,.35));
    animation:bob 6s ease-in-out infinite; translate:var(--mx,0px) var(--my,0px); rotate:var(--mr,0deg);
    transition:translate .7s var(--ease-out), rotate .7s var(--ease-out);}
  .fj-fruit{position:absolute; z-index:4;}
  .fj-fruit.back{z-index:1;}
  .fj-fruit img{width:100%; filter:drop-shadow(0 20px 24px rgba(0,0,0,.3)); animation:floaty var(--fs,8s) ease-in-out var(--fd,0s) infinite;}
  .fj-fruit.blur img{filter:blur(2px) drop-shadow(0 20px 24px rgba(0,0,0,.3));}
  .fj-fruit.hgt img{height:100%; width:auto;}
  .fj-copy{padding:clamp(34px,5vw,70px) clamp(26px,5vw,72px) clamp(34px,5vw,70px) clamp(10px,2vw,20px);}
  .fj-idx{font-weight:800; font-size:13px; letter-spacing:.24em; text-transform:uppercase; opacity:.8; margin:0 0 14px;}
  .badge{display:inline-block; font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:9px 14px; border-radius:999px; background:#fff; color:var(--c);}
  .fj-copy h3{margin:18px 0 0; font-weight:900; text-transform:uppercase; font-size:clamp(36px,5vw,84px); line-height:.92; letter-spacing:-.025em;}
  .fj-copy .desc{margin:18px 0 0; font-size:clamp(16px,1.4vw,19px); line-height:1.55; max-width:36ch; opacity:.95;}
  .notes{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; list-style:none;}
  .notes li{font-weight:700; font-size:13px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);}
  .fj-copy .fr{margin:20px 0 0; font-size:13.5px; font-style:italic; line-height:1.5; opacity:.85; max-width:44ch;}
  .thc{margin:14px 0 0; display:inline-block; font-weight:800; font-size:14px; padding:12px 16px; border-radius:14px; background:rgba(0,0,0,.18);}
  .thc span{display:block; font-weight:600; font-size:12px; opacity:.88; margin-top:3px;}
  .fj-panel.citrus .badge{background:var(--sun); color:var(--ink);}
  .fj-panel.citrus h3{color:var(--sun);}
  /* per-flavour fruit placement (+ fly-out direction for the pinned stage) */
  .pine .fa{height:72%; right:4%; bottom:14%; rotate:12deg; --fx:24vw; --fy:-34vh;}
  .pine .fb{width:36%; left:2%; bottom:3%; rotate:-8deg; --fx:-34vw; --fy:-12vh;}
  .citrus .fa{width:26%; right:6%; top:6%; rotate:-14deg; --fx:30vw; --fy:-30vh;}
  .citrus .fa img{scale:-1 1;}
  .citrus .fb{width:40%; left:0; bottom:3%; --fx:-34vw; --fy:-10vh;}
  .mango .fa{width:28%; left:6%; top:8%; rotate:-18deg; --fx:-30vw; --fy:-34vh;}
  .mango .fb{width:44%; right:-2%; bottom:3%; --fx:34vw; --fy:-10vh;}
  .guava .fa{width:27%; right:6%; top:5%; rotate:14deg; --fx:30vw; --fy:-34vh;}
  .guava .fb{width:42%; left:-2%; bottom:3%; --fx:-34vw; --fy:-10vh;}
  .guava .fc{width:18%; right:4%; bottom:10%; rotate:-16deg; --fx:30vw; --fy:10vh;}
  .flav-note{max-width:900px; margin:clamp(24px,3vw,36px) auto 0; padding:0 var(--gutter); text-align:center; color:var(--ink-soft); font-size:13px; line-height:1.65;}
  @media (max-width:899px){
    .fj-panel{grid-template-columns:1fr; min-height:0;}
    .fj-visual{height:clamp(340px,82vw,460px); min-height:0;}
    .fj-copy{padding:6px 26px 34px;}
    .fj-num{font-size:44vw; top:-4vw;}
  }
  /* pinned, scroll-scrubbed stage (desktop) */
  @media (min-width:900px){
    .journey.fj-live .fj-track{height:calc(var(--n) * 100vh);}
    .journey.fj-live .fj-stage{position:sticky; top:0; height:100vh; overflow:hidden; isolation:isolate; background:var(--bg, #d0621f);}
    .journey.fj-live .fj-stage > .fizz{display:block; z-index:1;}
    .journey.fj-live .fj-panel{position:absolute; inset:0; z-index:2; width:auto; max-width:none; margin:0; border-radius:0; background:none; min-height:0; overflow:visible;
      grid-template-columns:1.1fr 1fr; gap:3vw; padding:70px 13vw 20px 4vw; pointer-events:none;}
    .journey.fj-live .fj-panel.on{pointer-events:auto;}
    .journey.fj-live .fj-visual{height:min(82vh,780px); min-height:0;}
    .journey.fj-live .fj-can{translate:0 calc(var(--k) * -90vh); rotate:calc(var(--k) * -26deg - 6deg); scale:calc(1 - var(--ak) * .22);}
    .journey.fj-live .fj-fruit{translate:calc(var(--k) * var(--fx)) calc(var(--k) * var(--fy)); opacity:calc(1 - var(--ak) * 1.4);}
    .journey.fj-live .fj-copy{padding:0; translate:0 calc(var(--k) * -140px); opacity:calc(1 - var(--ak) * 2.8);}
    .journey.fj-live .fj-num{left:3vw; right:auto; top:auto; bottom:-4vw; font-size:28vw; translate:calc(var(--k) * -34vw) 0; opacity:calc(1 - var(--ak) * 2);}
    .journey.fj-live .fj-dots{display:flex; position:absolute; right:clamp(18px,3vw,44px); top:50%; translate:0 -50%; z-index:6; flex-direction:column; align-items:flex-end; gap:16px;}
  }
  .fj-dot{display:flex; align-items:center; gap:12px; background:none; border:0; padding:4px 0; color:#fff; cursor:pointer; font:800 11px var(--font); letter-spacing:.14em; text-transform:uppercase; opacity:.6; transition:opacity .3s;}
  .fj-dot span{max-width:0; overflow:hidden; white-space:nowrap; transition:max-width .45s var(--ease-out);}
  .fj-dot i{width:11px; height:11px; border-radius:50%; box-shadow:inset 0 0 0 2px #fff; transition:transform .35s var(--ease-pop), background .3s;}
  .fj-dot:hover, .fj-dot.on{opacity:1;}
  .fj-dot:hover span, .fj-dot.on span{max-width:220px;}
  .fj-dot.on i{background:#fff; transform:scale(1.35);}
  .fj-dot:focus-visible{outline:2px solid #fff; outline-offset:4px;}

  /* ============ STORE LOCATOR ============ */
  .stores{padding:clamp(40px,5vw,60px) 0 clamp(60px,7vw,90px);}
  .loc{
    width:calc(100% - 2*var(--gutter)); max-width:1320px; margin:0 auto;
    border-radius:clamp(24px,3vw,40px); overflow:hidden;
    background:linear-gradient(160deg, var(--sky-1), var(--sky-3)); color:#fff;
    display:grid; grid-template-columns:minmax(320px,440px) 1fr; gap:clamp(14px,2vw,24px);
    padding:clamp(16px,2vw,24px);
  }
  .loc-panel{background:#fff; color:var(--ink); border-radius:26px; padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; min-height:0;}
  .loc-panel .sec-title{font-size:clamp(30px,3.4vw,46px);}
  .loc-count{margin:10px 0 0; color:var(--ink-soft); font-weight:600; font-size:15px;}
  .loc-count b{color:var(--sky-1);}
  .loc-controls{display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:20px;}
  .loc-controls input, .loc-controls select{
    width:100%; min-width:0; font:600 15px var(--font); color:var(--ink);
    border:2px solid #e3ecf1; border-radius:14px; padding:14px 16px; background:#fff; transition:border-color .2s;
  }
  .loc-controls input:focus, .loc-controls select:focus{outline:none; border-color:var(--sky-1);}
  .loc-controls select{grid-column:1 / -1;}
  .geo{font:800 13px var(--font); letter-spacing:.04em; text-transform:uppercase; border:0; border-radius:14px; padding:0 16px; background:var(--sky-wash); color:var(--sky-1); cursor:pointer; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:background .2s;}
  .geo:hover{background:#d6eefb;}
  .geo svg{width:16px; height:16px;}
  .loc-list{margin-top:16px; overflow:auto; max-height:430px; border-top:1px solid #eef2f5; scrollbar-width:thin;}
  .lc{display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid #eef2f5; padding:14px 6px; cursor:pointer; font-family:var(--font); color:var(--ink); transition:background .2s;}
  .lc:hover, .lc.active{background:var(--sky-wash);}
  .lc-name{font-weight:800; font-size:15px; display:flex; justify-content:space-between; gap:10px;}
  .lc-dist{flex:none; font-weight:800; font-size:12px; color:var(--sky-1);}
  .lc-addr{margin-top:3px; color:var(--ink-soft); font-size:13.5px; line-height:1.4;}
  .lc-dir{display:inline-block; margin-top:6px; font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--sky-1); text-decoration:none;}
  .lc-dir:hover{text-decoration:underline;}
  .loc-empty{padding:24px 6px; color:var(--ink-soft); font-weight:600;}
  .loc-map{position:relative; z-index:0; isolation:isolate; border-radius:26px; overflow:hidden; min-height:560px; background:var(--sky-5);}  /* keeps Leaflet's high z-indexes below the nav */
  #map{position:absolute; inset:0;}
  .map-wait{position:absolute; inset:0; display:grid; place-items:center; color:var(--sky-1); font-weight:800;}
  .leaflet-tile-pane{filter:saturate(.75) brightness(1.04);}
  .rr-pin{width:18px; height:18px; border-radius:50%; background:var(--c-mango); border:3px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,.35); transition:transform .25s var(--ease-pop);}
  .rr-pin.active{transform:scale(1.6); background:var(--c-pineapple);}
  .rr-me{width:18px; height:18px; border-radius:50%; background:var(--sky-1); border:3px solid #fff; box-shadow:0 0 0 8px rgba(42,149,211,.25);}
  .leaflet-popup-content{font-family:var(--font); font-size:13px;}
  .leaflet-popup-content b{font-weight:800;}
  @media (max-width:900px){ .loc{grid-template-columns:1fr;} .loc-map{min-height:360px; order:-1;} .loc-list{max-height:360px;} }

  /* ============ STORY ============ */
  .story{padding:clamp(60px,7vw,100px) 0;}
  .story-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,5vw,80px); align-items:center;}
  .badge-spin{position:relative; width:min(420px,80vw); aspect-ratio:1; margin:0 auto;}
  .badge-spin svg.ring{position:absolute; inset:0; width:100%; height:100%; animation:spin 22s linear infinite;}
  .badge-spin .disc{position:absolute; inset:17%; border-radius:50%; background:var(--sky-1); display:grid; place-items:center; box-shadow:0 30px 60px -30px rgba(8,50,80,.6);}
  .badge-spin .disc svg{width:46%; height:auto; color:#fff;}
  .badge-spin .can-peek{position:absolute; height:62%; right:-7%; bottom:-8%; rotate:14deg; filter:drop-shadow(0 24px 24px rgba(8,40,70,.35)); animation:bob 6s ease-in-out infinite;}
  .story p.body{margin:20px 0 0; font-size:clamp(16px,1.45vw,20px); line-height:1.65; max-width:52ch;}
  .story .tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
  .story .tags span{font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:10px 16px; border-radius:999px; background:var(--ink); color:#fff;}
  .story .tags span:nth-child(2){background:var(--c-mango);} .story .tags span:nth-child(3){background:var(--c-guava);}
  @media (max-width:860px){ .story-grid{grid-template-columns:1fr;} .badge-spin{width:min(300px,68vw); margin-bottom:10px;} .badge-spin .can-peek{height:58%; right:-12%; bottom:-6%;} }

  /* ============ JOIN ============ */
  .join{
    width:calc(100% - 2*var(--gutter)); max-width:1320px; margin:0 auto;
    border-radius:clamp(24px,3vw,40px); overflow:hidden;
    background:linear-gradient(180deg, var(--sky-1), var(--sky-4)); color:#fff;
    display:grid; grid-template-columns:1fr 1fr; align-items:center;
  }
  .join-photo{width:100%; height:100%; object-fit:cover; min-height:520px; transition:transform 1.2s var(--ease-out);}
  .join:hover .join-photo{transform:scale(1.04);}
  .join-media{overflow:hidden; height:100%;}
  .join-copy{padding:clamp(34px,5vw,72px);}
  .join-copy .sec-kicker{color:#fff;}
  .join-copy p{margin:18px 0 0; font-size:clamp(15px,1.3vw,18px); line-height:1.6; max-width:40ch;}
  .join-copy .btn{margin-top:28px;}
  .handle{font-weight:800; margin-top:14px!important;}
  @media (max-width:860px){ .join{grid-template-columns:1fr;} .join-photo{min-height:0; height:auto; aspect-ratio:1200/1250;} }

  /* ============ OUTRO ============ */
  .outro{
    position:relative; overflow:hidden; isolation:isolate; text-align:center;
    margin-top:clamp(70px,8vw,110px);
    background:linear-gradient(180deg, var(--sky-1), var(--sky-4));
    padding:clamp(70px,8vw,110px) var(--gutter) 0;
  }
  .outro .clouds{z-index:-1;}
  .outro .kicker{margin-bottom:12px;}
  .outro h2{margin:0; color:#fff; font-weight:900; text-transform:uppercase; font-size:clamp(40px,8vw,130px); line-height:.92; letter-spacing:-.025em; text-shadow:0 10px 40px rgba(8,50,80,.2);}
  .outro-cans{display:flex; justify-content:center; align-items:flex-end; gap:clamp(8px,2vw,30px); margin-top:clamp(30px,4vw,50px); height:clamp(220px,30vw,400px);}
  .outro-cans img{height:100%; width:auto; filter:drop-shadow(0 26px 26px rgba(8,40,70,.35)); animation:bob 5s ease-in-out infinite; translate:0 18%;}
  .outro-cans img:nth-child(1){animation-delay:-1s; rotate:-6deg;} .outro-cans img:nth-child(2){animation-delay:-2.2s; rotate:-2deg;}
  .outro-cans img:nth-child(3){animation-delay:-.4s; rotate:3deg;} .outro-cans img:nth-child(4){animation-delay:-3.1s; rotate:7deg;}

  /* ============ FOOTER ============ */
  .footer{background:var(--ink); color:rgba(255,255,255,.72); padding:clamp(56px,6vw,80px) 0 0; position:relative; z-index:2;}
  .foot-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(36px,5vw,70px);}
  .foot-logo{height:50px; width:auto;}
  .foot-tag{margin:14px 0 0; color:#fff; font-weight:900; text-transform:uppercase; letter-spacing:.02em;}
  .foot-links{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px;}
  .foot-links a{color:#fff; text-decoration:none; font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase;}
  .foot-links a:hover{color:var(--sun);}
  .legal{margin:18px 0 0; font-size:12.5px; line-height:1.7; max-width:60ch;}
  .legal b{color:#fff;}
  .news h4{margin:0 0 6px; color:#fff; font-size:22px; font-weight:900; text-transform:uppercase;}
  .news p{margin:0 0 16px; font-size:14px; line-height:1.5;}
  .news form{display:flex; flex-wrap:wrap; gap:10px;}
  .news input{flex:1 1 220px; min-width:0; border:0; border-radius:999px; padding:17px 20px; font:600 15px var(--font); color:var(--ink);}
  .news input:focus{outline:3px solid var(--sun); outline-offset:1px;}
  .news-msg{min-height:1.2em; margin:12px 0 0; font-size:13px; font-weight:700; color:var(--sun);}
  .foot-bottom{margin-top:clamp(40px,5vw,60px); border-top:1px solid rgba(255,255,255,.12); padding:20px 0; font-size:12px;}
  .foot-bottom .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;}
  @media (max-width:760px){ .foot-grid{grid-template-columns:1fr;} }

  /* ============ BACK TO TOP ============ */
  #toTop{position:fixed; right:18px; bottom:18px; z-index:70; width:56px; height:56px; border-radius:50%; border:0; padding:0; cursor:pointer;
    display:grid; place-items:center; background:var(--sun); color:var(--ink); box-shadow:0 14px 30px -14px rgba(8,40,70,.6);
    opacity:0; transform:translateY(24px) scale(.8); pointer-events:none;
    transition:opacity .35s ease, transform .45s var(--ease-pop);}
  #toTop.show{opacity:1; transform:none; pointer-events:auto;}
  #toTop:hover{transform:translateY(-4px) scale(1.06);}
  #toTop:focus-visible{outline:3px solid var(--sky-1); outline-offset:3px;}
  #toTop svg.arrow{width:22px; height:22px; transition:transform .35s var(--ease-pop);}
  #toTop:hover svg.arrow{transform:translateY(-3px);}
  #toTop svg.ring{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg);}
  #toTop svg.ring circle{fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:round; stroke-dasharray:163.4; stroke-dashoffset:var(--off,163.4); opacity:.85;}
  @media (max-width:600px){ #toTop{width:50px; height:50px; right:14px; bottom:14px;} }

  /* ============ SOUND TOGGLE ============ */
  body.playing .hero .cw img{animation-duration:.8s;}
  body.playing .outro-cans img{animation-duration:.8s;}
  body.playing .fw img{animation-duration:1.6s;}
  #sound{position:fixed; left:18px; bottom:18px; z-index:70; height:48px; padding:0 16px 0 14px; border-radius:999px; border:0; cursor:pointer;
    display:flex; align-items:center; gap:10px; background:#fff; color:var(--ink); font:800 12px var(--font); letter-spacing:.08em; text-transform:uppercase;
    box-shadow:0 14px 30px -14px rgba(8,40,70,.55); transition:transform .3s var(--ease-pop);}
  #sound:hover{transform:translateY(-2px) scale(1.04);}
  #sound .bars{display:flex; gap:3px; align-items:flex-end; height:16px;}
  #sound .bars i{width:3px; height:5px; background:var(--sky-1); border-radius:2px;}
  #sound.on{background:var(--sun);}
  #sound.on .bars i{background:var(--ink); animation:eq .9s ease-in-out infinite;}
  #sound.on .bars i:nth-child(2){animation-delay:.15s} #sound.on .bars i:nth-child(3){animation-delay:.3s} #sound.on .bars i:nth-child(4){animation-delay:.45s}
  @keyframes eq{0%,100%{height:4px} 50%{height:16px}}
  @media (max-width:600px){ #sound .lbl{display:none;} #sound{padding:0 14px;} }

  /* ============ AGE GATE ============ */
  #gate{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; overflow:hidden;
    background:linear-gradient(180deg, var(--sky-1), var(--sky-4)); transition:opacity .6s ease, visibility .6s ease;}
  #gate.hide{opacity:0; visibility:hidden; pointer-events:none;}
  html.age-ok #gate{display:none;}
  #gate .gcloud{position:absolute; opacity:.9; pointer-events:none;}
  #gate .gcloud img{width:100%; animation:sway 30s ease-in-out infinite alternate;}
  .gate-card{position:relative; width:min(460px,100%); background:#fff; border-radius:30px; text-align:center;
    padding:clamp(28px,5vw,44px) clamp(22px,5vw,40px); box-shadow:0 40px 90px -40px rgba(8,40,70,.6);
    animation:in-pop .8s var(--ease-pop) both;}
  #gate.hide .gate-card{transform:scale(.9) translateY(20px); transition:transform .5s ease;}
  .gate-card img{height:54px; width:auto; margin:0 auto 22px;}
  .gate-title{margin:0; font-weight:900; text-transform:uppercase; font-size:clamp(26px,5vw,36px); line-height:1.02;}
  .gate-sub{margin:12px 0 0; color:var(--ink-soft); font-size:14.5px; line-height:1.55;}
  .gcheck{display:flex; align-items:center; justify-content:center; gap:12px; margin:24px 0 0; cursor:pointer; font-weight:700; font-size:15px;}
  .gcheck input{appearance:none; -webkit-appearance:none; margin:0; flex:none; cursor:pointer; width:24px; height:24px; border-radius:7px; border:2px solid var(--sky-1); position:relative; transition:background .15s, transform .3s var(--ease-pop);}
  .gcheck input:checked{background:var(--sky-1); transform:scale(1.12);}
  .gcheck input:checked::after{content:""; position:absolute; left:7px; top:3px; width:6px; height:11px; border:solid #fff; border-width:0 3px 3px 0; transform:rotate(45deg);}
  .gcheck input:focus-visible{outline:3px solid var(--sun); outline-offset:3px;}
  .gcheck.warn{color:var(--c-mango); animation:shake .4s;}
  .gcheck.warn input{border-color:var(--c-mango);}
  @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
  #gateYes{width:100%; margin-top:22px;}
  #gateNo{margin-top:14px; background:none; border:0; color:var(--ink-soft); text-decoration:underline; font:600 13px var(--font); cursor:pointer;}
  .gate-fine{margin:22px 0 0; color:#8397a2; font-size:11.5px; line-height:1.6;}

  /* ============ MOBILE TOUCH TARGETS ============ */
  @media (max-width:760px){
    .nav-links a.u:not(.hide-sm){display:inline-flex; align-items:center; min-height:44px; padding:0 4px;}
    .foot-links{gap:4px 18px;}
    .foot-links a{display:inline-flex; align-items:center; min-height:44px;}
    .lc-dir{display:inline-flex; align-items:center; min-height:40px; margin-top:0;}
    .strip-small{font-size:12px;}
    .nav-logo{display:inline-flex; align-items:center; min-height:44px;}
  }

  /* ============ MOBILE HERO ============ */
  @media (max-width:700px){
    .stage{height:clamp(330px,98vw,420px);}
    .h-guava{left:12%;} .h-pineapple{left:29%;} .h-mango{left:48%;} .h-citrus{left:64%;}
    .x-pine{display:none;}
    .x-lime{width:30%; left:-4%;}
    .x-mango{width:32%; right:-4%;}
    .x-hib{width:17%; left:2%;}
    .x-guava{width:16%; right:2%; top:0;}
    .cl-1{top:4%;} .cl-2{top:14%;} .cl-6{display:none;}
    .strip-card{padding:18px 4px;}
  }

  @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important; transition:none!important;} html{scroll-behavior:auto;} }

  /* ===== multi-page additions ===== */
  .page-hero{position:relative; overflow:hidden; color:#fff; padding:clamp(130px,16vw,190px) 0 clamp(50px,6vw,80px);
    background:linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 55%, var(--sky-3) 100%); isolation:isolate;}
  .page-hero .clouds{z-index:-1;}
  .page-hero .sec-kicker{color:#fff; opacity:.9;}
  .page-hero h1{text-shadow:0 2px 24px rgba(10,60,100,.25); margin:0; font-weight:900; text-transform:uppercase; font-size:clamp(40px,7vw,104px); line-height:.92; letter-spacing:-.02em;}
  .page-hero p.lead{text-shadow:0 1px 14px rgba(10,60,100,.55); font-weight:600; margin:18px 0 0; font-size:clamp(16px,1.5vw,20px); line-height:1.6; max-width:56ch; opacity:.95;}
  body.solid-nav .nav{background:rgba(42,149,211,.96); box-shadow:0 10px 30px -18px rgba(8,50,80,.6);}
  .nav-links a[aria-current="page"]{text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px;}

  .teasers{padding:clamp(60px,7vw,100px) 0;}
  .teasers .grid{display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));}
  .teaser{position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:320px; padding:28px; border-radius:28px;
    color:#fff; text-decoration:none; overflow:hidden; isolation:isolate; transition:transform .35s var(--ease-pop);}
  .teaser:hover{transform:translateY(-6px);}
  .teaser:focus-visible{outline:3px solid var(--sun); outline-offset:4px;}
  .teaser h2{margin:0; font-weight:900; text-transform:uppercase; font-size:clamp(28px,2.6vw,40px); line-height:.95;}
  .teaser p{margin:10px 0 0; font-size:15px; line-height:1.5; opacity:.95; max-width:32ch;}
  .teaser .go{margin-top:16px; font-weight:800; font-size:14px; letter-spacing:.08em; text-transform:uppercase;}
  .teaser img{position:absolute; z-index:-1; pointer-events:none;}
  .t-flav{background:var(--c-pine, #d0621f);} .t-flav img{width:44%; right:4%; top:6%; rotate:8deg;}
  .t-stores{background:var(--sky-1);} .t-stores img{width:70%; right:-14%; top:-6%; opacity:.9;}
  .t-story{background:var(--ink);} .t-story img{width:40%; right:6%; top:8%; rotate:-8deg;}
  .t-join{background:var(--c-guava, #1f7a38);} .t-join img{width:42%; right:4%; top:6%; rotate:6deg;}

  .store-dir{padding:0 0 clamp(60px,7vw,90px);}
  .store-dir h2{margin:0 0 6px; font-weight:900; text-transform:uppercase; font-size:clamp(26px,3vw,40px);}
  .store-dir .note{margin:0 0 26px; color:var(--ink-soft); font-size:15px;}
  .store-dir .cities{columns:3 280px; column-gap:40px;}
  .store-dir .city{break-inside:avoid; margin:0 0 22px;}
  .store-dir h3{margin:0 0 8px; font-size:14px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--sky-1);}
  .store-dir ul{list-style:none; margin:0; padding:0;}
  .store-dir li{margin:0 0 10px; font-size:15px; line-height:1.45;}
  .store-dir li b{display:block; font-weight:800;}

  .join-page{padding:clamp(50px,6vw,80px) 0;}
  .signup{max-width:620px; margin:clamp(40px,5vw,70px) auto 0; text-align:center; padding:0 var(--gutter);}
  .signup h2{margin:0; font-weight:900; text-transform:uppercase; font-size:clamp(28px,3.4vw,46px);}
  .signup p{color:var(--ink-soft); line-height:1.6;}
  .signup form{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px;}
  .signup input{flex:1 1 260px; min-height:52px; padding:0 18px; border-radius:999px; border:2px solid var(--sky-1); font:inherit; font-size:16px;}

  .nf{min-height:100vh; display:grid; place-items:center; text-align:center; padding:140px var(--gutter) 80px;}
  .nf .big{font-weight:900; font-size:clamp(90px,18vw,220px); line-height:.85; margin:0;}
  .nf .ctas{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:26px;}