/* ============================================================
   7Blue Natural Drinking Water — Nayagara International (Pvt) Ltd
   Design system + home page
   ============================================================ */

/* ---------- 0. FONTS (self-hosted, latin subset) ----------
   Served from our own origin: no DNS + TLS handshake to
   fonts.googleapis.com and fonts.gstatic.com on the critical path. */
@font-face{
  font-family:"Manrope";
  font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../assets/fonts/manrope-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Serif";
  font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Serif";
  font-style:italic;font-weight:400;font-display:swap;
  src:url("../assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- 1. TOKENS ---------- */
:root{
  /* brand blues, sampled from the SLS 894 product label + logo mark */
  --brand:      #0030AC;   /* label blue — primary */
  --brand-deep: #001F72;
  --brand-ink:  #041B3D;
  --brand-lit:  #2C6BE0;
  --aqua:       #57A1DE;   /* logo gradient, deep end */
  --aqua-soft:  #8FC3DB;
  --mist:       #B6D6E5;   /* logo gradient, pale end */

  --paper:  #EFF6FC;   /* pale blue ground — never plain white */
  --paper-2:#DDECF8;
  --paper-3:#CFE3F4;
  --line:   #DCE8F1;

  --ink:    #0A1B33;
  --ink-2:  #45607C;
  --ink-3:  #7B93A9;

  /* logo gradient — deliberately more saturated than the flat brand blues
     so the mark reads as the brightest thing in the header */
  --logo-a: #0B4FD8;
  --logo-b: #2E86E8;
  --logo-c: #7FCBF2;

  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif:"Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 56px);
  --r: 14px;
  --r-lg: 22px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --hdr-h: 84px;

  /* lineup: height of the tallest bottle (19L). everything scales from it */
  --lh: clamp(175px, min(34vw, 34svh), 420px);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd,fieldset,legend{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
fieldset{border:0;min-width:0}
a{color:inherit;text-decoration:none}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 12px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(15px,.42vw + 14px,17px);
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand);color:#fff;padding:12px 20px;border-radius:0 0 8px 0}
.skip:focus{left:0}

:where(a,button,input,select,textarea,.bottle):focus-visible{
  outline:2px solid var(--brand-lit);outline-offset:3px;border-radius:4px;
}

/* ---------- 3. PRIMITIVES ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mist);
}
.eyebrow span{font-weight:400;opacity:.7}
.eyebrow--dark{color:var(--brand-lit)}
.eyebrow--light{color:rgba(255,255,255,.72)}

.h2{
  font-size:clamp(31px,4.4vw,58px);
  font-weight:250;
  letter-spacing:-.025em;
  line-height:1.08;
  color:var(--brand-ink);
  margin-top:16px;
}
.h2--light{color:#fff}
.h3{font-size:clamp(22px,2.2vw,30px);font-weight:400;letter-spacing:-.02em;line-height:1.2;color:var(--brand-ink)}
.h3--light{color:#fff}
.lede{
  margin-top:20px;max-width:60ch;
  font-size:clamp(16px,1.1vw,19px);font-weight:350;color:var(--ink-2);line-height:1.68;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:100px;
  font-size:14px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--sm{padding:10px 18px;font-size:13px}
.btn--wide{width:100%}
.btn--solid{background:var(--brand);color:#fff;box-shadow:0 6px 20px -8px rgba(0,48,172,.7)}
.btn--solid:hover{background:var(--brand-deep);box-shadow:0 12px 26px -10px rgba(0,48,172,.8)}
.btn--onblue{background:#fff;color:var(--brand);box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
.btn--onblue:hover{background:var(--mist);color:var(--brand-deep)}
.btn--line{border:1px solid rgba(255,255,255,.42);color:#fff;backdrop-filter:blur(6px);background:rgba(255,255,255,.06)}
.btn--line:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.75)}
.btn--ghost{color:rgba(255,255,255,.9)}
.btn--ghost:hover{color:#fff}

.pill{
  display:inline-block;vertical-align:middle;margin-left:10px;
  padding:4px 11px;border-radius:100px;
  background:var(--brand);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}

/* placeholder tile — used until real photography lands */
.ph{
  position:relative;width:100%;height:100%;min-height:150px;
  display:grid;place-items:center;
  border-radius:var(--r);
  background:
    linear-gradient(135deg,var(--paper-3),#fff 55%,var(--paper-3)),
    var(--paper-2);
  border:1px dashed var(--line);
  overflow:hidden;
}
.ph::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 20% 0%,rgba(87,161,222,.16),transparent 60%);
}
.ph span{
  position:relative;z-index:1;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- 4. LOGO ----------
   The supplied mark is the wordmark only, with the mountains genuinely knocked
   out (transparent), so it sits on any background. The strapline underneath is
   live text — crisp at any size, and it recolours with the header. */
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:0 0 auto}
.logo__mark{width:clamp(112px,11.8vw,146px);height:auto}
.logo__sub{
  font-size:clamp(7.4px,.62vw,8.6px);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  color:rgba(255,255,255,.9);
  transition:color .4s var(--ease);
  padding-left:2px;
}
.hdr.is-stuck .logo__sub{color:var(--brand)}
.logo__mark--ft{width:158px}
.logo__sub--ft{color:rgba(255,255,255,.62);font-size:8.6px}

/* first-visit sound cue */
.sndcue{
  position:fixed;left:var(--gut);bottom:22px;z-index:95;
  display:flex;align-items:center;gap:2px;
  padding:5px 6px 5px 5px;border-radius:100px;
  background:rgba(4,20,62,.86);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 18px 40px -18px rgba(0,10,40,.8);
  color:#fff;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.sndcue.is-in{opacity:1;transform:none}
.sndcue[hidden]{display:none}
.sndcue__go{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px 9px 12px;border-radius:100px;
  font-size:13px;font-weight:500;color:#fff;white-space:nowrap;
  transition:background .3s var(--ease);
}
.sndcue__go:hover{background:rgba(255,255,255,.12)}
.sndcue__bars{display:flex;align-items:center;gap:2.5px;height:14px}
.sndcue__bars i{
  display:block;width:2.5px;border-radius:2px;background:var(--mist);
  animation:eq .9s ease-in-out infinite alternate;
}
.sndcue__bars i:nth-child(1){height:6px;animation-delay:-.15s}
.sndcue__bars i:nth-child(2){height:12px;animation-delay:-.45s}
.sndcue__bars i:nth-child(3){height:8px;animation-delay:-.30s}
.sndcue__bars i:nth-child(4){height:4px;animation-delay:-.60s}
.sndcue__x{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  color:rgba(255,255,255,.6);transition:color .3s var(--ease),background .3s var(--ease);
}
.sndcue__x:hover{color:#fff;background:rgba(255,255,255,.12)}
@media (max-width:560px){
  .sndcue{left:12px;right:12px;bottom:14px;justify-content:space-between}
  .sndcue__go{font-size:12.5px}
}

/* ---------- 5. HEADER ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),backdrop-filter .4s var(--ease);
}
.hdr__in{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut);
  height:var(--hdr-h);display:flex;align-items:center;gap:clamp(16px,3vw,46px);
}
.hdr.is-stuck{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(4,27,61,.5);
}

.nav{display:flex;gap:clamp(14px,2.2vw,32px);margin-left:auto}
.nav a{
  position:relative;white-space:nowrap;font-size:14px;font-weight:500;color:rgba(255,255,255,.88);
  transition:color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1.5px;
  background:currentColor;transition:right .35s var(--ease);
}
.nav a:hover::after,.nav a.is-active::after{right:0}
.hdr.is-stuck .nav a{color:var(--ink-2)}
.hdr.is-stuck .nav a:hover,.hdr.is-stuck .nav a.is-active{color:var(--brand)}

.hdr__act{display:flex;align-items:center;gap:10px;margin-left:clamp(8px,2vw,26px)}
.hdr.is-stuck .btn--ghost{color:var(--ink-2)}
.hdr.is-stuck .btn--ghost:hover{color:var(--brand)}

/* ambient sound toggle */
.snd{
  width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;
  border-radius:50%;color:#fff;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.snd:hover{background:rgba(255,255,255,.12)}
.hdr.is-stuck .snd{color:var(--brand-ink)}
.hdr.is-stuck .snd:hover{background:var(--paper-3)}
.snd__bars{display:flex;align-items:center;gap:2.5px;height:15px}
.snd__bars i{
  display:block;width:2.5px;border-radius:2px;background:currentColor;
  opacity:.6;transition:height .3s var(--ease),opacity .3s var(--ease);
}
/* resting state reads as a level meter, not four dots */
.snd__bars i:nth-child(1){height:6px}
.snd__bars i:nth-child(2){height:12px}
.snd__bars i:nth-child(3){height:8px}
.snd__bars i:nth-child(4){height:4px}
.snd.is-on .snd__bars i{opacity:1;animation:eq .9s ease-in-out infinite alternate}
.snd.is-on .snd__bars i:nth-child(1){animation-delay:-.15s}
.snd.is-on .snd__bars i:nth-child(2){animation-delay:-.45s}
.snd.is-on .snd__bars i:nth-child(3){animation-delay:-.30s}
.snd.is-on .snd__bars i:nth-child(4){animation-delay:-.60s}
@keyframes eq{from{height:3px}to{height:15px}}
@media (prefers-reduced-motion:reduce){.snd.is-on .snd__bars i{animation:none;height:9px}}

.burger{display:none;width:40px;height:40px;position:relative;border-radius:50%}
.burger span{
  position:absolute;left:10px;width:20px;height:1.6px;background:#fff;border-radius:2px;
  transition:transform .35s var(--ease),opacity .2s var(--ease);
}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
.hdr.is-stuck .burger span{background:var(--brand-ink)}
.burger[aria-expanded="true"] span{background:var(--brand-ink)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* mobile nav */
.mobnav{
  position:fixed;inset:var(--hdr-h) 0 0;z-index:99;
  background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
  padding:26px var(--gut) calc(26px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:space-between;
  animation:mobIn .35s var(--ease);
}
.mobnav[hidden]{display:none}
.bdetail[hidden]{display:none}
@keyframes mobIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mobnav nav{display:flex;flex-direction:column}
.mobnav nav a{
  padding:18px 0;border-bottom:1px solid var(--line);
  font-size:22px;font-weight:300;letter-spacing:-.02em;color:var(--brand-ink);
}
.mobnav__foot{display:grid;gap:14px;justify-items:center;padding-top:24px}
.mobnav__tel{font-size:15px;font-weight:600;color:var(--brand)}
body.is-locked{overflow:hidden}

/* ---------- 6. HERO ---------- */
.hero{
  position:relative;isolation:isolate;
  min-height:100svh;
  display:grid;grid-template-rows:1fr auto;
  padding-top:calc(var(--hdr-h) + clamp(16px,3svh,38px));
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:-2;background:linear-gradient(178deg,#00246E 0%,#0B3BA8 34%,#1A63CE 70%,#4E9BDD 100%)}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s var(--ease);
}
.hero__video.is-ready{opacity:.84}

/* CSS falls: renders on its own until real footage is dropped in */
.hero__falls{position:absolute;inset:0;overflow:hidden;transition:opacity .9s var(--ease)}
.hero.has-video .hero__falls{opacity:0}
.hero__falls .fall{
  position:absolute;top:-10%;bottom:16%;
  background-image:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.00) 0px,
    rgba(255,255,255,.22) 34px,
    rgba(255,255,255,.03) 96px,
    rgba(255,255,255,.26) 150px,
    rgba(255,255,255,.00) 220px);
  background-size:100% 220px;
  filter:blur(7px);
  opacity:.55;
  -webkit-mask-image:
    linear-gradient(to right,transparent,#000 26%,#000 74%,transparent),
    linear-gradient(to bottom,transparent,#000 14%,#000 58%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent,#000 26%,#000 74%,transparent),
    linear-gradient(to bottom,transparent,#000 14%,#000 58%,transparent);
  mask-composite:intersect;
  animation:fall 4.6s linear infinite;
  will-change:background-position;
}
.f1{left:3%;width:26%;animation-duration:4.2s}
.f2{left:29%;width:38%;top:-14%;bottom:12%;animation-duration:5.4s;animation-delay:-1.4s;opacity:.68}
.f3{left:66%;width:31%;animation-duration:4.9s;animation-delay:-2.6s}
@keyframes fall{from{background-position-y:0}to{background-position-y:220px}}

.hero__falls .mist{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.40),rgba(255,255,255,0) 68%);
  filter:blur(34px);animation:drift 15s ease-in-out infinite alternate;
}
.m1{left:-4%;bottom:4%;width:52vw;height:34vh}
.m2{left:30%;bottom:-8%;width:56vw;height:42vh;animation-delay:-5s}
.m3{right:-6%;bottom:0%;width:44vw;height:30vh;animation-delay:-9s}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1);opacity:.45}to{transform:translate3d(0,-24px,0) scale(1.14);opacity:.8}}

.hero__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 82% at 50% 108%,rgba(150,215,255,.30),transparent 62%),
    linear-gradient(101deg,rgba(0,20,62,.74) 0%,rgba(0,22,68,.62) 24%,rgba(0,26,76,.34) 42%,rgba(0,30,84,.10) 58%,transparent 72%),
    linear-gradient(to bottom,rgba(0,22,68,.66) 0%,rgba(0,26,76,.26) 18%,rgba(0,34,92,.04) 38%,rgba(0,30,86,.30) 60%,rgba(0,24,70,.70) 82%,rgba(0,20,58,.92) 100%),
    radial-gradient(130% 100% at 50% 50%,transparent 48%,rgba(0,16,52,.34) 100%);
}

/* copy recedes while a bottle card is open, so the card can sit over it cleanly */
.hero.is-inspecting .hero__copy{opacity:.2;filter:blur(1.5px)}
/* dotted blue screen-tone — printed-halftone texture over the footage,
   getting denser toward the bottom so the bottle shelf keeps its contrast */
.hero__dots{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(2,20,72,.28) 1px,transparent 1.35px);
  background-size:4px 4px;
  background-position:0 0;
}
/* same pitch AND same phase as the layer above — a second grid at a different
   size beats against the first and the overlaps read as crosses, not dots */
.hero__dots::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(0,13,50,.62) 1.15px,transparent 1.5px);
  background-size:4px 4px;
  background-position:0 0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 40%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 40%,#000 100%);
}

.hero__body{
  position:relative;z-index:2;
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  align-self:center;
  padding-bottom:clamp(12px,2svh,26px);
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  align-items:center;
  gap:clamp(20px,4vw,64px);
}
.hero__copy{
  min-width:0;
  transition:opacity .26s var(--ease),filter .26s var(--ease);
}

/* with the stage taking the right half, the headline has a narrower column
   to live in — scale it to that column, not to the whole hero */
@media (min-width:981px){
  .hero .hero__h1{font-size:clamp(38px,min(4.3vw,8.2svh),62px)}
  .hero .hero__sub{max-width:46ch}
}

/* ---------- 6b. HERO PRODUCT STAGE ---------- */
.stage{
  position:relative;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:11px;
}
.stage__frame{
  position:relative;width:100%;
  height:clamp(230px,38svh,440px);
}
/* soft pool of light the product stands in */
.stage__frame::before{
  content:"";position:absolute;left:50%;bottom:-6%;translate:-50% 0;
  width:74%;aspect-ratio:1.9;border-radius:50%;
  background:radial-gradient(ellipse,rgba(140,200,255,.20),rgba(140,200,255,0) 68%);
  filter:blur(6px);
}
/* absolutely placed against a frame with a definite height, so the
   percentage max-height actually resolves (a grid/flex auto track makes
   it cyclic and the image falls back to its intrinsic size) */
.stage__img{
  position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:auto;height:auto;
  filter:drop-shadow(0 26px 34px rgba(0,12,45,.55));
  opacity:0;transform:translateY(18px) scale(.97);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  pointer-events:none;
}
.stage__img.is-on{opacity:1;transform:none}
/* mostly uniform so every product gets real presence, with just enough
   variation that the big formats still read as the big ones */
.stage__img[data-id="19l"]        {max-height:100%}
.stage__img[data-id="5l"]         {max-height:89%}
.stage__img[data-id="1500ml"]     {max-height:87%}
.stage__img[data-id="750ml-glass"]{max-height:84%}
.stage__img[data-id="1000ml"]     {max-height:83%}
.stage__img[data-id="500ml-glass"]{max-height:80%}
.stage__img[data-id="330ml-glass"]{max-height:74%}
.stage__img[data-id="500ml"]      {max-height:79%}

.stage__cap{
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  min-height:44px;
}
.stage__kind{
  font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.stage__name{
  font-size:clamp(16px,1.5vw,21px);font-weight:300;letter-spacing:-.02em;color:#fff;
}
.stage__cap.is-swap .stage__kind,.stage__cap.is-swap .stage__name{opacity:0}
.stage__kind,.stage__name{transition:opacity .3s var(--ease)}

/* the shelf bottle currently on stage gets a quiet nod */
.lineup:not(.has-active) .bottle.is-cued img{
  filter:drop-shadow(0 18px 26px rgba(0,12,45,.5)) drop-shadow(0 0 26px rgba(140,200,255,.28));
}
.hero__h1{
  margin-top:14px;
  font-size:clamp(40px,min(7.4vw,12svh),100px);
  font-weight:200;letter-spacing:-.038em;line-height:.98;color:#fff;
  text-shadow:0 2px 40px rgba(0,10,40,.35);
  max-width:15ch;
}
.hero__h1 em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.01em;
  background:linear-gradient(96deg,#fff 8%,var(--mist) 58%,var(--aqua-soft) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{
  margin-top:clamp(12px,1.7svh,18px);max-width:56ch;
  font-size:clamp(15px,1.05vw,18px);font-weight:350;line-height:1.66;
  color:rgba(255,255,255,.84);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,2.4svh,28px)}

/* ---------- 7. BOTTLE LINEUP ---------- */
.lineup-wrap{
  position:relative;z-index:3;
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:0 var(--gut) clamp(24px,3.6svh,44px);
}
.lineup{
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(6px,1.6vw,28px);
  height:var(--lh);
}
/* PET and glass read as two separate families, split by a hairline */
.lineup__grp{
  position:relative;
  display:flex;align-items:flex-end;
  gap:clamp(6px,1.4vw,24px);
  height:100%;
}
.lineup__grp:hover .lineup__split{
  align-self:stretch;width:1px;flex:0 0 auto;
  margin-inline:clamp(14px,3.2vw,54px);
  background:linear-gradient(to top,rgba(255,255,255,.30),rgba(255,255,255,.04) 70%,transparent);
}
.lineup__line{
  height:1px;margin-top:14px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.30) 18%,rgba(255,255,255,.30) 82%,transparent);
}

.bottle{
  position:relative;display:block;flex:0 0 auto;height:100%;
  padding:0;
  transition:transform .5s var(--ease),opacity .4s var(--ease),filter .4s var(--ease);
  transform-origin:bottom center;
}
.bottle img{
  height:100%;width:auto;
  filter:drop-shadow(0 18px 26px rgba(0,12,45,.5));
  transition:filter .45s var(--ease);
  pointer-events:none;
}
/* per-product true-scale heights, normalised to the 19L can */
.bottle[data-id="19l"]         {height:100%}
.bottle[data-id="5l"]          {height:78%}
.bottle[data-id="1500ml"]      {height:65.3%}
.bottle[data-id="750ml-glass"] {height:58.2%}
.bottle[data-id="1000ml"]      {height:56.1%}
.bottle[data-id="500ml-glass"] {height:48.0%}
.bottle[data-id="500ml"]       {height:44.9%}
.bottle[data-id="330ml-glass"] {height:41%}

/* contact shadow on the shelf line */
.bottle::before{
  content:"";position:absolute;left:50%;bottom:-6px;translate:-50% 0;
  width:118%;height:16px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,10,40,.55),transparent 70%);
  opacity:.85;transition:opacity .4s var(--ease),width .5s var(--ease);
}
.bottle__tag{
  position:absolute;left:50%;bottom:-30px;translate:-50% 4px;
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;white-space:nowrap;
  opacity:0;transition:opacity .35s var(--ease),translate .35s var(--ease);
}

/* dim siblings while one is active */
.lineup.has-active .bottle{opacity:.32;filter:saturate(.55) brightness(.85)}
.lineup .bottle.is-active{
  z-index:7;
  opacity:1;filter:none;
  transform:translateY(-14px) scale(1.045);
}
.lineup .bottle.is-active img{filter:drop-shadow(0 26px 34px rgba(0,12,45,.62)) drop-shadow(0 0 34px rgba(140,200,255,.34))}
.lineup .bottle.is-active::before{opacity:.35;width:100%}
.lineup .bottle.is-active .bottle__tag{opacity:1;translate:-50% 0}

/* detail card */
.bdetail{
  position:absolute;z-index:6;
  width:min(300px,calc(100vw - 2*var(--gut)));
  padding:16px 18px 15px;
  max-height:100%;overflow:hidden;
  border-radius:var(--r-lg);
  background:
    linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05)),
    linear-gradient(rgba(4,20,62,.90),rgba(3,16,54,.86));
  border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:0 30px 60px -28px rgba(0,10,40,.85);
  color:#fff;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .34s var(--ease),transform .34s var(--ease);
}
.bdetail.is-on{opacity:1;transform:none;pointer-events:auto}
.bdetail__kind{
  display:inline-block;padding:4px 10px;border-radius:100px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.bdetail__name{margin-top:9px;font-size:21px;font-weight:300;letter-spacing:-.03em;line-height:1.12}
.bdetail__desc{
  margin-top:7px;font-size:12.5px;line-height:1.48;color:rgba(255,255,255,.78);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.bdetail__specs{margin-top:11px;padding-top:11px;border-top:1px solid rgba(255,255,255,.18);display:grid;gap:5px}
.bdetail__specs div{display:flex;justify-content:space-between;gap:14px;font-size:12px}
.bdetail__specs dt{color:rgba(255,255,255,.6)}
.bdetail__specs dd{font-weight:600;text-align:right}
.bdetail__cta{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:12px;font-weight:700;letter-spacing:.02em;color:#fff;
}
.bdetail__cta span{transition:transform .3s var(--ease)}
.bdetail__cta:hover span{transform:translateX(4px)}

/* ---------- 8. TRUST BAR ---------- */
.trust{background:var(--brand-ink);color:#fff}
.trust__in{
  max-width:var(--wrap);margin-inline:auto;padding:clamp(26px,4vw,40px) var(--gut);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,3vw,40px);
}
.trust__in li{display:grid;gap:3px}
.trust strong{font-size:clamp(19px,2vw,26px);font-weight:300;letter-spacing:-.02em;color:var(--mist)}
.trust span{font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.45}

/* supporting image inside a light section */
.secfig{
  margin:clamp(28px,4vw,48px) 0 0;
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 26px 54px -34px rgba(4,27,61,.5);
}
.secfig img{width:100%;height:clamp(180px,26vw,340px);object-fit:cover;object-position:center 45%}

/* ---------- 9. SECTIONS ---------- */
.sec{
  padding:clamp(64px,10vw,132px) 0;position:relative;isolation:isolate;
  /* skip layout/paint for sections that are still off screen */
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}
.sec--tint{background:var(--paper-2)}

/* ── Section patterns ───────────────────────────────────────────
   A different water motif per section, all pure CSS — no image requests.
   Kept deliberately faint: these are texture, not decoration, and the
   product renders have to stay the loudest thing on the page.
   Tune the whole system with the opacity values below.            */

.sec:not(.sec--blue)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.78) 55%,rgba(0,0,0,.5) 100%);
  mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.78) 55%,rgba(0,0,0,.5) 100%);
}

/* Photographic section backgrounds. These are deliberately high-key images —
   at low opacity behind body text, anything with dark areas turns to mud.
   Each one replaces that section's CSS motif rather than stacking on it. */

/* Product Range — shallow stream over pale stones */
#range::before{
  opacity:1;
  background-image:url("../assets/gfx/sec-stream.webp");
  background-size:cover;background-position:center top;
}

/* Quality & Facility — a wide waterfall through soft mist */
#quality::before{
  opacity:1;
  background-image:url("../assets/gfx/sec-falls.webp");
  background-size:cover;background-position:center 30%;
}

/* Our Story — a dawn lake, run dark with white type over it. This is the one
   section that flips: the founder's quote and the origin story carry better on
   a real landscape than on white, and the dark ground gives the page a pause
   between the two light sections. */
#story{
  color:#fff;
  background-image:
    linear-gradient(178deg,rgba(3,16,44,.74) 0%,rgba(3,16,44,.70) 38%,rgba(2,11,32,.86) 100%),
    url("../assets/gfx/sec-story.webp");
  background-size:auto, cover;
  background-position:center, center 35%;
  background-repeat:no-repeat, no-repeat;
}
/* the motif layer and the aqua bloom are both for light grounds */
#story::before,#story::after{display:none}

#story .eyebrow--dark{color:var(--mist)}
#story .h2{color:#fff}
#story .story__attr{color:#fff}
#story .story__attr span{color:rgba(255,255,255,.62)}
#story .story__body p{color:rgba(255,255,255,.82)}
#story .story__body p:first-child{color:#fff}

/* one soft aqua bloom per light section, to keep the white from going flat */
.sec:not(.sec--blue)::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-12%;top:4%;width:48%;aspect-ratio:1.1;border-radius:50%;
  background:radial-gradient(circle,rgba(87,161,222,.16),rgba(87,161,222,0) 66%);
}
.sec--tint::after{left:-14%;right:auto;top:auto;bottom:2%;width:52%}
.sec:not(.sec--blue)::after{opacity:.8}
/* Contact sits on deep water, with the brand gradient over it kept heavy
   enough that the form fields and their placeholders stay legible. The dot
   screen is the hero's, so the page opens and closes on the same texture. */
.sec--blue{
  color:#fff;
  background-image:
    linear-gradient(158deg,rgba(0,29,108,.84) 0%,rgba(0,45,164,.74) 52%,rgba(8,66,172,.82) 100%),
    url("../assets/gfx/deep-water.webp");
  background-size:auto, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
.sec--blue::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(0,14,52,.40) 1px,transparent 1.35px);
  background-size:4px 4px;
}
.sec__head{max-width:760px}

/* group */
.grp{margin-top:clamp(44px,6vw,78px)}
.grp__head{max-width:66ch;margin-bottom:clamp(24px,3vw,40px)}
.grp__head p{margin-top:12px;color:var(--ink-2);font-weight:350}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fff,#F2F8FD);
  overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.card:hover{transform:translateY(-5px);border-color:var(--mist);box-shadow:0 26px 48px -30px rgba(4,27,61,.55)}
.card__img{
  height:clamp(180px,20vw,250px);
  display:flex;align-items:flex-end;justify-content:center;
  padding:22px 22px 6px;
  background:radial-gradient(70% 62% at 50% 34%,rgba(87,161,222,.13),transparent 70%);
}
.card__img img{
  max-height:calc(100% * var(--s,1));height:auto;width:auto;object-fit:contain;
  filter:drop-shadow(0 14px 20px rgba(4,27,61,.20));
  transition:transform .5s var(--ease);
}
.card:hover .card__img img{transform:translateY(-5px) scale(1.03)}
.card__img .ph{min-height:0;height:100%;width:100%;align-self:stretch}
.card__body{padding:0 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card__body h4{font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--brand-ink)}
.card__body p{font-size:14px;color:var(--ink-2);font-weight:350;line-height:1.55}
.spec{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px}
.spec li{
  padding:4px 10px;border-radius:100px;background:var(--paper-3);color:var(--brand);
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.card--wide{grid-column:span 2}
.card--wide .card__img{height:clamp(200px,22vw,270px)}
.card--pending{background:var(--paper-2)}

.card[data-s]{--s:1}
.card[data-s="500ml"]{--s:.74}
.card[data-s="1000ml"]{--s:.82}
.card[data-s="1500ml"]{--s:.92}
.card[data-s="5l"]{--s:1}
.card[data-s="330ml-glass"]{--s:.70}
.card[data-s="500ml-glass"]{--s:.84}
.card[data-s="750ml-glass"]{--s:1}

/* private label */
.pl{
  margin-top:clamp(44px,6vw,78px);
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(24px,4vw,56px);
  padding:clamp(30px,4.5vw,60px);
  border-radius:calc(var(--r-lg) + 8px);
  background:linear-gradient(150deg,var(--brand-deep),var(--brand) 58%,#1657C8);
  color:#fff;overflow:hidden;position:relative;
}
.pl::after{
  content:"";position:absolute;right:-12%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 65%);pointer-events:none;
}
.pl__txt p{margin-top:14px;max-width:52ch;color:rgba(255,255,255,.8);font-weight:350}
.pl__txt .btn{margin-top:26px}
.pl__art{
  position:relative;z-index:1;
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(10px,2vw,26px);
  height:clamp(190px,22vw,290px);
}
/* explicit max-heights against a definite parent height: a percentage height
   on a flex item whose track is auto-sized is cyclic, and the image silently
   falls back to its intrinsic size */
.pl__art img{
  max-height:100%;height:auto;width:auto;
  filter:drop-shadow(0 20px 30px rgba(0,10,40,.5));
}
.pl__art img:nth-child(1){max-height:80%}
.pl__art img:nth-child(2){max-height:100%}
.pl__art img:nth-child(3){max-height:88%}

/* process */
.proc{
  margin-top:clamp(40px,5vw,68px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,30px);
}
.proc li{
  padding:26px 22px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.82);border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.proc li:hover{transform:translateY(-4px);box-shadow:0 22px 44px -30px rgba(4,27,61,.5)}
.proc__n{
  display:block;font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--aqua);margin-bottom:14px;
}
.proc h4{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--brand-ink);margin-bottom:8px}
.proc p{font-size:14px;color:var(--ink-2);font-weight:350;line-height:1.55}

.facts{margin-top:clamp(20px,2.6vw,32px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,30px)}
.facts__card{
  padding:clamp(24px,3vw,36px);border-radius:var(--r-lg);
  background:var(--brand-ink);color:#fff;
}
.facts__card:last-child{background:rgba(255,255,255,.82);color:var(--ink);border:1px solid var(--line)}
.facts__card h4{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
.facts__card:first-child h4{color:var(--mist)}
.facts__card:last-child h4{color:var(--brand-ink)}
.tally{display:grid;gap:12px;margin-top:4px}
.tally li{display:flex;gap:12px;align-items:baseline}
.tally b{
  flex:0 0 auto;min-width:62px;
  font-size:21px;font-weight:300;letter-spacing:-.02em;color:var(--mist);
}
.tally span{font-size:13.5px;font-weight:350;line-height:1.5;color:rgba(255,255,255,.74)}
.facts__card p{font-size:14.5px;font-weight:350;line-height:1.62;color:rgba(255,255,255,.72)}
.facts__card:last-child p{color:var(--ink-2)}

/* story */
.story{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:start}
.story__side{position:sticky;top:calc(var(--hdr-h) + 40px)}
.story__side .h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,44px);line-height:1.16;letter-spacing:-.015em}
.story__attr{margin-top:26px;font-size:14px;font-weight:600;color:var(--brand)}
.story__attr span{font-weight:400;color:var(--ink-3);font-size:13px}
.story__body{display:grid;gap:20px;max-width:66ch}
.story__body p{color:var(--ink-2);font-weight:350;font-size:clamp(15px,1.05vw,17.5px);line-height:1.72}
.story__body p:first-child{color:var(--ink);font-size:clamp(17px,1.3vw,20px);font-weight:350}

/* contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,76px);align-items:start}
.contact__lede{margin-top:20px;max-width:46ch;color:rgba(255,255,255,.78);font-weight:350}
.contact__list{margin-top:34px;display:grid;gap:18px}
.contact__list li{display:grid;gap:3px;padding-top:16px;border-top:1px solid rgba(255,255,255,.2)}
.contact__k{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.contact__v{font-size:clamp(17px,1.6vw,21px);font-weight:400;letter-spacing:-.015em;transition:color .3s var(--ease)}
a.contact__v:hover{color:var(--mist)}
.contact__v--plain{font-size:15px;font-weight:350;line-height:1.5;color:rgba(255,255,255,.85)}

.form{
  padding:clamp(24px,3.4vw,40px);border-radius:calc(var(--r-lg) + 6px);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(18px);
  display:grid;gap:16px;
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:grid;gap:7px}
.fld>span,.fld legend>span{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.fld i{color:var(--mist);font-style:normal;margin-left:2px}
.fld input,.fld select,.fld textarea{
  width:100%;padding:13px 15px;border-radius:11px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:15px;font-weight:400;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.fld textarea{resize:vertical;min-height:96px}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.42)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.16);
}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fld select option{color:var(--ink);background:#fff}
.fld[aria-invalid="true"] input,.fld[aria-invalid="true"] select{border-color:#FFB4A8;background:rgba(255,120,100,.12)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips span{
  display:block;padding:8px 14px;border-radius:100px;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);
  font-size:12.5px;font-weight:500;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.chips label:hover span{border-color:rgba(255,255,255,.5)}
.chips input:checked+span{background:#fff;color:var(--brand);border-color:#fff;font-weight:700}
.chips input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}

/* honeypot — off-screen, never focusable */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{font-size:12px;color:rgba(255,255,255,.55);text-align:center}
.form__msg{font-size:13.5px;font-weight:500;text-align:center;min-height:0}
.form__msg.ok{color:#BFF3D2}
.form__msg.err{color:#FFC4B8}

/* ---------- 10. FOOTER ---------- */
.ft{
  position:relative;isolation:isolate;overflow:hidden;
  content-visibility:auto;contain-intrinsic-size:auto 620px;
  background:var(--brand-ink);color:#fff;
}
/* deep-water ground, plus a horizon of peaks echoing the label motif */
.ft::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(110% 80% at 8% -10%,rgba(0,48,172,.60),transparent 58%),
    radial-gradient(90% 80% at 95% 105%,rgba(87,161,222,.28),transparent 62%),
    linear-gradient(to bottom,rgba(4,27,61,0),rgba(2,12,34,.92));
}
.ft::after{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;
  height:clamp(140px,18vw,240px);pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='240' viewBox='0 0 1200 240' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23B6D6E5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath stroke-opacity='.12' stroke-width='1.4' d='M0 190 L120 132 L188 168 L268 110 L360 178 L452 122 L536 172 L628 104 L712 160 L806 114 L900 176 L992 128 L1080 170 L1200 120'/%3E%3Cpath stroke-opacity='.2' stroke-width='1.4' d='M0 228 L96 178 L170 210 L262 160 L348 214 L440 168 L520 218 L614 162 L700 208 L792 166 L884 216 L978 172 L1074 212 L1200 168'/%3E%3C/g%3E%3C/svg%3E") bottom center / 100% 100% no-repeat,
    repeating-linear-gradient(to bottom,transparent 0 3px,rgba(182,214,229,.05) 3px 4px);
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent 100%);
  mask-image:linear-gradient(to top,#000 30%,transparent 100%);
}

/* ---- closing call to action ---- */
.ft__cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(20px,4vw,48px);
  padding-top:clamp(44px,6vw,72px);padding-bottom:clamp(34px,4.5vw,52px);
  border-bottom:1px solid rgba(255,255,255,.13);
}
.ft__cta-txt{min-width:0}
.ft__cta h2{
  font-size:clamp(26px,3.4vw,42px);font-weight:250;letter-spacing:-.025em;
  line-height:1.1;color:#fff;
}
.ft__cta p{
  margin-top:12px;max-width:46ch;
  font-size:15px;font-weight:350;line-height:1.6;color:rgba(255,255,255,.66);
}
.ft__cta-act{display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);flex-wrap:wrap}
.ft__tel{display:grid;gap:2px}
.ft__tel span{
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.ft__tel strong{
  font-size:clamp(19px,1.7vw,23px);font-weight:400;letter-spacing:-.015em;color:#fff;
  transition:color .3s var(--ease);
}
.ft__tel:hover strong{color:var(--mist)}

/* ---- columns ---- */
.ft__in{
  display:grid;
  grid-template-columns:1.5fr .85fr .95fr 1fr;
  gap:clamp(24px,4vw,54px);
  padding-top:clamp(38px,5vw,58px);
  padding-bottom:clamp(34px,4vw,54px);
}
.ft__brand .logo__mark--ft{width:158px}
.ft__addr{margin-top:16px;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.6)}
.ft__addr strong{color:#fff;font-weight:600}
.ft__badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.ft__badges li{
  padding:4px 11px;border-radius:100px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.75);
}

.ft__col{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.ft__col h3{
  margin-bottom:5px;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mist);
}
.ft__col a{
  font-size:14px;color:rgba(255,255,255,.68);
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.ft__col a:hover{color:#fff;transform:translateX(3px)}
/* the contact column stacks a label over each value */
.ft__col--contact a{display:grid;gap:1px}
.ft__col--contact a span{
  font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.ft__col--contact a{font-size:15.5px;color:#fff}
.ft__col--contact a:hover{color:var(--mist)}

.ft__bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  padding-top:22px;padding-bottom:28px;border-top:1px solid rgba(255,255,255,.13);
}
.ft__bar p{font-size:12px;color:rgba(255,255,255,.45)}

/* ============================================================
   11. RESPONSIVE
   ============================================================ */
/* short desktop viewports (laptops, 720–820px tall): keep the whole hero,
   copy + shelf + detail card, above the fold */
@media (max-height:820px) and (min-width:721px){
  :root{--lh:clamp(165px,min(30vw,29svh),330px)}
  .hero__h1{font-size:clamp(38px,min(6.4vw,10.6svh),82px)}
  .hero__sub{font-size:15px;margin-top:14px}
  .hero__cta{margin-top:20px}
}
@media (max-height:760px) and (min-width:721px){
  .bdetail__desc{-webkit-line-clamp:2}
}

@media (max-width:1080px){
  .ft__in{grid-template-columns:1.4fr 1fr 1fr;gap:32px}
  .ft__col--contact{grid-column:2 / -1}
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .card--wide{grid-column:span 2}
  .proc{grid-template-columns:repeat(2,1fr)}
}

/* the sound toggle costs 44px of header, so hand over to the burger sooner
   and drop the phone button before the nav is forced to wrap */
@media (max-width:1120px){
  .hdr__act .btn--ghost{display:none}
}

@media (max-width:980px){
  .hero__body{grid-template-columns:1fr}
  .stage{display:none}
  .nav{display:none}
  .burger{display:block}
  .hdr__act .btn--sm span{display:none}
  .hdr__act .btn--ghost{padding:10px}
  .story{grid-template-columns:1fr;gap:26px}
  .story__side{position:static}
  .contact{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .pl{grid-template-columns:1fr}
  .pl__art{order:-1;height:clamp(160px,32vw,220px)}
}

@media (max-width:720px){
  .ft__in{grid-template-columns:1fr 1fr;gap:30px 24px}
  .ft__brand{grid-column:1 / -1}
  .ft__col--contact{grid-column:1 / -1}
  .ft__cta{flex-direction:column;align-items:flex-start}
  .ft__cta-act{width:100%;justify-content:space-between}
  :root{--hdr-h:76px}
  .hdr__act .btn--solid{padding:9px 15px;font-size:12.5px}
  .trust__in{grid-template-columns:1fr 1fr;gap:22px 18px}
  .cards,.cards--4{grid-template-columns:1fr 1fr}
  .card--wide{grid-column:span 2}
  .card--wide .card__body p{font-size:13.5px}
  .form__row{grid-template-columns:1fr}

  /* lineup becomes a swipeable shelf */
  .hero{min-height:auto;padding-bottom:8px}
  .hero__body{padding-block:clamp(40px,10vh,90px) 30px}
  .lineup-wrap{padding-inline:0}
    :root{--lh:clamp(205px,52vw,320px)}
  /* the shelf scrolls, so hint at it with a soft edge fade */
  .lineup-wrap{position:relative}
  .lineup-wrap::after{
    content:"";position:absolute;right:0;bottom:0;width:38px;height:100%;
    pointer-events:none;
    background:linear-gradient(to left,rgba(0,17,52,.55),transparent);
  }
  /* each bottle gets a 44px-wide touch area without changing how it looks */
  .bottle{min-width:44px;padding-inline:7px}
  .lineup{
    justify-content:flex-start;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;
    padding:0 var(--gut) 4px;
    gap:20px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .lineup::-webkit-scrollbar{display:none}
  .bottle{scroll-snap-align:center}
  .lineup__line{margin-inline:var(--gut)}
  .bdetail{position:static!important;width:auto;margin:20px var(--gut) 0;transform:none}
  .bdetail:not(.is-on){display:none}
  .lineup .bottle.is-active{transform:translateY(-6px) scale(1.03)}
}

@media (max-width:560px){
  /* header collapses to logo + menu; the quote CTA lives inside the menu */
  .hdr__act .btn{display:none}
  .burger{margin-left:auto}
  .eyebrow{letter-spacing:.14em;font-size:10px}
  }

/* phones: cards go horizontal — a stack of tall cards with a small bottle
   floating in a large empty box wastes most of the scroll */
@media (max-width:560px){
  .cards,.cards--4{grid-template-columns:1fr;gap:10px}
  .card{flex-direction:row;align-items:center}
  .card--wide{grid-column:span 1}
  .card__img{
    height:auto;align-self:stretch;
    flex:0 0 108px;width:108px;
    padding:16px 6px;align-items:center;
  }
  .card__img img{max-height:calc(158px * var(--s,1))}
  .card--wide .card__img{height:auto}
  .card__body{padding:16px 18px 16px 4px;gap:6px}
  .card__body h4{font-size:17px}
  .card__body p{font-size:13.5px}
  .spec{padding-top:8px;gap:5px}
  .spec li{font-size:10px;padding:3px 8px}

  /* comfortable tap targets on the link lists */
  .ft__nav a,.ft__meta a{padding:9px 0}
  .ft__nav,.ft__meta{gap:2px}
  .contact__list a.contact__v{display:inline-block;padding:6px 0}
}

@media (max-width:460px){
  .proc{grid-template-columns:1fr}
}