/* =====================================================================
   AQUARAIL No.1 — brand site
   Mobile-first · white + water-blue · no external requests at runtime
   ===================================================================== */

/* ---------- tokens ---------- */
:root{
  --white:#fff;
  --sky:#eef7fd;
  --sky-2:#e0f0fb;
  --ink:#08192a;
  --ink-2:#33526e;
  --ink-3:#6b8499;
  --navy:#062a4d;
  --navy-2:#041e39;
  --blue:#0f6fc1;
  --blue-d:#0a4f92;
  --aqua:#26b2e6;
  --aqua-l:#7fd8f5;
  --wa:#1faa54;

  --line:rgba(8,42,77,.10);
  --line-2:rgba(8,42,77,.16);
  --shadow-s:0 1px 2px rgba(6,42,77,.05), 0 4px 14px -6px rgba(6,42,77,.10);
  --shadow-m:0 2px 6px rgba(6,42,77,.05), 0 18px 40px -18px rgba(6,42,77,.20);
  --shadow-l:0 30px 70px -30px rgba(6,42,77,.32), 0 4px 14px rgba(6,42,77,.05);

  --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:32px;

  --f-disp:'Outfit',ui-sans-serif,system-ui,'Segoe UI',Helvetica,Arial,sans-serif;
  --f-body:'Manrope',ui-sans-serif,system-ui,'Segoe UI',Helvetica,Arial,sans-serif;

  --wrap:1200px;
  --pad:clamp(16px,4.4vw,40px);
  --sec-y:clamp(64px,9vw,128px);
  --nav-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font:400 clamp(15.5px,.35vw + 14.6px,17.5px)/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
[hidden]{display:none !important}
h1,h2,h3,h4,p,dl,dd,figure,ol,ul,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-inline-size:0}
legend{padding:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
b,strong{font-weight:700}
em{font-style:italic}
address{font-style:normal}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{inline-size:1.15em;block-size:1.15em;flex:none;fill:currentColor}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.01em}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:4px}
::selection{background:var(--aqua-l);color:var(--navy)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#c9dcea;border-radius:99px;border:3px solid #fff}
::-webkit-scrollbar-thumb:hover{background:#a8c6dd}

.skip{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:200;padding:10px 16px;background:var(--navy);color:#fff;border-radius:99px;transform:translateY(-160%);transition:transform .2s}
.skip:focus{transform:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:800;letter-spacing:-.022em;line-height:1.02;text-wrap:balance}
h2{font-size:clamp(1.72rem,1.1rem + 2.9vw,3.1rem)}
h3{font-size:clamp(1.16rem,.95rem + .8vw,1.45rem);letter-spacing:-.015em;line-height:1.15}
h4{font-size:1.1rem}
.sec-head{max-width:62ch;margin-inline:auto;text-align:center}
.sec-eyebrow{font:700 .72rem/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-block-end:14px}
.sec-eyebrow-light{color:var(--aqua-l)}
.sec-lead{margin-block-start:14px;color:var(--ink-2);font-size:clamp(1rem,.94rem + .3vw,1.14rem);text-wrap:pretty}
section[id]{scroll-margin-top:calc(var(--nav-h) + 10px)}
.js .nav-sentinel{block-size:0}

/* ---------- buttons ---------- */
.btn{--bg:transparent;--fg:var(--ink);--bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:13px 22px;min-block-size:46px;border-radius:99px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font:700 .875rem/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-align:center;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s,color .2s,border-color .2s,filter .2s;
  will-change:transform;-webkit-tap-highlight-color:transparent}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primary{--bg:linear-gradient(180deg,#1a86d8,#0b57a4 78%);--fg:#fff;box-shadow:0 8px 20px -10px rgba(11,87,164,.7),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-primary:hover{filter:saturate(1.1) brightness(1.05);box-shadow:0 14px 30px -12px rgba(11,87,164,.65),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-ghost{--bg:rgba(255,255,255,.72);--fg:var(--navy);--bd:rgba(8,42,77,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-ghost:hover{--bd:rgba(8,42,77,.34);background:#fff}
.btn-dark{--bg:var(--navy);--fg:#fff;box-shadow:0 8px 20px -12px rgba(6,42,77,.8)}
.btn-dark:hover{background:#0a3c6d}
.btn-wa{--bg:var(--wa);--fg:#fff;box-shadow:0 8px 20px -12px rgba(31,170,84,.9)}
.btn-wa:hover{filter:brightness(1.06)}
.btn-line{--bg:transparent;--fg:var(--navy);--bd:rgba(8,42,77,.22)}
.btn-line:hover{background:rgba(8,42,77,.05)}
.btn-sm{padding:9px 16px;min-block-size:44px;font-size:.83rem}
.btn-lg{padding:17px 30px;min-block-size:54px;font-size:.95rem;letter-spacing:.07em}
.btn-block{inline-size:100%}

/* ---------- nav ---------- */
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:90;background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  border-block-end:1px solid transparent;transition:border-color .3s,background-color .3s,box-shadow .3s}
.nav.is-stuck{border-block-end-color:var(--line);box-shadow:0 6px 24px -18px rgba(6,42,77,.5);background:rgba(255,255,255,.9)}
.nav-inner{display:flex;align-items:center;gap:16px;block-size:var(--nav-h);max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.brand{display:inline-flex;align-items:center;gap:10px;min-inline-size:0}
/* the brand's own lockup, extracted from the supplied artwork */
.brand-lockup{display:block;inline-size:auto;block-size:40px;flex:none}
.brand-mark{display:none;inline-size:auto;block-size:34px;flex:none}
/* the lockup image is the wordmark now — no sibling text rules to keep in sync */
.brand img{pointer-events:none;-webkit-user-select:none;user-select:none}
.nav-links{margin-inline-start:auto;display:flex;align-items:center;gap:2px}
.nav-links a:not(.btn){padding:9px 13px;border-radius:99px;font-weight:600;font-size:.9rem;color:var(--ink-2);transition:color .2s,background-color .2s}
.nav-links a:not(.btn):hover{color:var(--navy);background:rgba(8,42,77,.055)}
.nav-links a.is-active:not(.btn){color:var(--blue);background:rgba(38,178,230,.13)}
.nav-cta-inline{display:none}
.nav-actions{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.nav-cta{white-space:nowrap}
.nav-progress{block-size:2px;background:linear-gradient(90deg,var(--aqua),var(--blue));transform:scaleX(0);transform-origin:0 50%;opacity:0;transition:opacity .3s}
.nav.is-stuck .nav-progress{opacity:1}
.burger{display:none;inline-size:44px;block-size:44px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;padding:0;place-items:center;flex:none}
.burger span{display:block;inline-size:18px;block-size:2px;border-radius:2px;background:var(--navy);margin:3px auto;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.scrim{position:fixed;inset:0;z-index:85;background:rgba(6,32,60,.4);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
.scrim.is-on{opacity:1}

/* ---------- hero ---------- */
.hero{position:relative;background:
  radial-gradient(120% 70% at 50% 0%,#ffffff 0%,#f2fafe 38%,var(--sky) 72%,var(--sky-2) 100%)}
.hero-stage{position:relative;--hero-h:240vh;block-size:var(--hero-h)}
.hero-sticky{position:sticky;inset-block-start:0;block-size:100vh;block-size:100svh;overflow:hidden;isolation:isolate}
.bottle-canvas{position:absolute;inset:0;inline-size:100%;block-size:100%;z-index:2;touch-action:pan-y}
.hero-poster{position:absolute;inset:0;z-index:2;display:none;place-items:center;padding-block-start:clamp(150px,26vh,250px)}
.poster-svg{inline-size:auto;block-size:min(58vh,520px);filter:drop-shadow(0 40px 60px rgba(6,42,77,.22))}
.hero-overlay{position:absolute;inset:0;z-index:3;display:grid;grid-template-rows:auto 1fr auto;
  padding:calc(var(--nav-h) + clamp(14px,3vh,34px)) var(--pad) clamp(16px,3vh,30px);pointer-events:none;text-align:center}
.hero-overlay a,.hero-overlay button{pointer-events:auto}
.hero-top{display:grid;grid-row:1;justify-items:center;gap:clamp(8px,1.4vh,16px)}
.hero-logo{display:block;inline-size:auto;block-size:clamp(44px,5vw,72px);margin:0 auto 14px;
  filter:drop-shadow(0 12px 26px rgba(255,255,255,.75))}
.sheet-logo{display:none}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:var(--blue);
  background:rgba(255,255,255,.8);border:1px solid rgba(38,178,230,.32);padding:7px 14px;border-radius:99px;box-shadow:var(--shadow-s)}
.eyebrow .ico{inline-size:.95em;block-size:.95em;color:var(--aqua)}
.hero-title{font-size:clamp(2.3rem,3.1vw + 1.5rem,5.6rem);letter-spacing:-.035em;
  background:linear-gradient(180deg,#0a3a68 0%,#08294a 55%,#0d5c9e 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-title em{font-style:normal;font-weight:700;font-size:.52em;letter-spacing:.01em;color:var(--blue);
  -webkit-text-fill-color:var(--blue);padding-inline-start:.18em}
.hero-tagline{font-family:var(--f-disp);font-weight:500;font-size:clamp(1rem,.86rem + .6vw,1.42rem);color:var(--ink-2);letter-spacing:.01em}
.hero-note{font-size:.78rem;font-weight:600;letter-spacing:.055em;text-transform:uppercase;color:var(--ink-3)}
.dot{inline-size:7px;block-size:7px;flex:none;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 0 rgba(38,178,230,.6);animation:pulse 2.6s infinite}
.hero-bottom{display:grid;grid-row:3;align-self:end;justify-items:center;gap:clamp(12px,2.2vh,22px)}
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.scroll-cue{display:inline-flex;align-items:center;gap:9px;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.scroll-cue .ico{inline-size:15px;block-size:15px;animation:bob 2.4s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}
.hero-reveal{position:absolute;inset-inline:var(--pad);inset-block-end:clamp(96px,15vh,150px);display:grid;justify-items:center;gap:12px;
  /* CSS owns the pre-JS state: the reveal block is hidden until the scrub
     (or the static fallback) sets visibility:inline-visible on it */
  opacity:0;visibility:hidden;transform:translateY(26px);will-change:opacity,transform}
.reveal-word{font-family:var(--f-disp);font-weight:800;font-size:clamp(2rem,1.1rem + 4.4vw,4.3rem);letter-spacing:.02em;line-height:.95;
  background:linear-gradient(180deg,#0d6bb8 0%,#07325e 60%,#0a5aa0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 26px rgba(255,255,255,.9)) drop-shadow(0 2px 2px rgba(255,255,255,.85))}
.reveal-sub{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;font-size:.8rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--navy);
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 18px rgba(255,255,255,.85)}
.reveal-sub i{display:block;inline-size:26px;block-size:2px;border-radius:2px;background:var(--aqua);flex:none}
.reveal-sub span{min-inline-size:0;overflow-wrap:anywhere;max-inline-size:100%}
.hero-fade{position:absolute;inset-block-end:-1px;inset-inline:0;block-size:120px;background:linear-gradient(180deg,rgba(238,247,253,0),var(--sky) 60%,#fff);pointer-events:none}

/* droplet film over hero */
.hero-drops{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-drops i{position:absolute;display:block;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(180,225,247,.5) 42%,rgba(120,190,225,0) 70%);
  box-shadow:inset 0 -1px 2px rgba(255,255,255,.7);animation:drift linear infinite}
/* vertical drift only: a sideways push would put a particle's own box past the
   stage edge (it is clipped, but it makes the layout geometry untidy) */
@keyframes drift{0%{transform:translate3d(0,14px,0) scale(.94);opacity:0}12%{opacity:.85}88%{opacity:.7}100%{transform:translate3d(0,-120px,0) scale(1.06);opacity:0}}

/* ---------- generic section shells ---------- */
.wave{position:absolute;inset-block-start:-1px;inset-inline:0;inline-size:100%;block-size:clamp(34px,5vw,58px);z-index:1}
section{position:relative}
.sec-pad{padding-block:var(--sec-y)}

/* ---------- paths ---------- */
.paths{padding-block:var(--sec-y) calc(var(--sec-y) * .8);background:var(--sky)}
.path-grid{display:grid;gap:20px;margin-block-start:clamp(28px,4vw,48px)}
.path-card{position:relative;padding:clamp(24px,3.4vw,38px);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-m);overflow:hidden;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.path-card::after{content:"";position:absolute;inset-block-end:-40%;inset-inline-end:-18%;inline-size:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(38,178,230,.16),rgba(38,178,230,0) 65%);pointer-events:none}
.path-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-l)}
.path-card-alt{background:linear-gradient(165deg,var(--navy),#083b6b 60%,#0a4a86);color:#eaf6ff;border-color:rgba(255,255,255,.1)}
.path-card-alt p,.path-card-alt .path-list{color:rgba(234,246,255,.8)}
.path-card-alt .path-icon{background:rgba(255,255,255,.1);color:var(--aqua-l)}
.path-card-alt .path-list b{color:#fff}
.path-icon{inline-size:52px;block-size:52px;border-radius:16px;display:grid;place-items:center;background:rgba(38,178,230,.13);color:var(--blue);margin-block-end:18px}
.path-icon .ico{inline-size:26px;block-size:26px}
.path-card h3{margin-block-end:10px}
.path-card p{color:var(--ink-2)}
.path-list{display:grid;gap:9px;margin-block:20px 26px;font-size:.94rem;color:var(--ink-2)}
.path-list li{display:flex;align-items:flex-start;gap:10px}
.path-list .ico{color:var(--aqua);margin-block-start:3px}
.path-card-alt .path-list .ico{color:var(--aqua-l)}

/* ---------- products ---------- */
.products{padding-block:calc(var(--sec-y) + 20px) var(--sec-y);background:#fff}
.prod-grid{display:grid;gap:24px;margin-block-start:clamp(30px,4.5vw,54px)}
.prod-card{position:relative;display:grid;border-radius:var(--r-xl);background:linear-gradient(180deg,#f7fcff,#fff 60%);
  border:1px solid var(--line);box-shadow:var(--shadow-m);overflow:hidden;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.prod-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-l)}
.prod-view{position:relative;block-size:clamp(300px,44vh,430px);
  background:radial-gradient(70% 60% at 50% 62%,rgba(255,255,255,.9),rgba(214,240,252,.7) 55%,rgba(190,228,247,.55));cursor:grab;touch-action:pan-y}
.prod-view:active{cursor:grabbing}
.prod-canvas-box{position:absolute;inset:0}
.prod-canvas-box canvas{inline-size:100%;block-size:100%}
.prod-tag{position:absolute;inset-block-start:16px;inset-inline-start:16px;z-index:2;padding:7px 14px;border-radius:99px;
  background:rgba(255,255,255,.86);border:1px solid rgba(38,178,230,.3);color:var(--blue-d);
  font:800 .78rem/1 var(--f-disp);letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(6px)}
.prod-body{padding:clamp(22px,3vw,34px);display:grid;gap:14px;align-content:start;border-block-start:1px solid var(--line)}
.prod-body p{color:var(--ink-2);font-size:.98rem}
.spec{display:grid;gap:8px;padding-block:14px;border-block:1px dashed var(--line-2)}
.spec>div{display:flex;justify-content:space-between;gap:16px;font-size:.9rem}
.spec dt{color:var(--ink-3);font-weight:600}
.spec dd{font-weight:700;color:var(--navy);text-align:end}
.prod-note{max-width:56ch;margin:clamp(26px,3.4vw,40px) auto 0;display:flex;gap:10px;align-items:flex-start;justify-content:center;
  text-align:center;color:var(--ink-3);font-size:.9rem}
.prod-note .ico{color:var(--aqua);margin-block-start:3px}

/* ---------- buyer / forms ---------- */
.buyer{padding-block:var(--sec-y);background:linear-gradient(180deg,var(--sky) 0%,#fff 65%)}
.split{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
.split-copy .sec-eyebrow,.split-copy .sec-lead{margin-block-start:0}
.split-copy h2{margin-block:14px 0}
.split-copy .sec-lead{margin-block:14px 0}
.tick-list{display:grid;gap:14px;margin-block:24px 28px}
.tick-list li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2);font-size:.97rem}
.tick-list .ico{inline-size:20px;block-size:20px;padding:3px;border-radius:7px;background:rgba(38,178,230,.16);color:var(--blue-d);margin-block-start:2px}
.tick-list b{color:var(--ink)}
.mini-cta{display:flex;flex-wrap:wrap;gap:10px}

.form-card{position:relative;padding:clamp(20px,3.4vw,38px);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-l);overflow:hidden}
.form-card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:3px;
  background:linear-gradient(90deg,var(--aqua),var(--blue) 45%,var(--navy));opacity:.9}
.form-title{font-size:clamp(1.3rem,1.05rem + .9vw,1.7rem)}
.form-sub{margin-block:8px 22px;color:var(--ink-3);font-size:.92rem}
form.enq{display:grid;gap:16px}
.grid-2{display:grid;gap:16px}
.field{display:grid;gap:8px;min-width:0}
.field label,.field legend{font-weight:700;font-size:.86rem;letter-spacing:.02em;color:var(--navy)}
.req{color:#d1436a}
.opt{color:var(--ink-3);font-weight:600;font-size:.8em;letter-spacing:.02em}
input[type=text],input[type=tel],input[type=number],input[type=email],textarea,select{
  inline-size:100%;padding:13px 15px;min-block-size:48px;border-radius:var(--r-s);border:1px solid var(--line-2);background:#fbfdff;
  color:var(--ink);transition:border-color .2s,box-shadow .2s,background-color .2s;font-size:.97rem}
textarea{min-block-size:88px;resize:vertical;line-height:1.55}
input:hover,textarea:hover,select:hover{border-color:rgba(8,42,77,.3)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(38,178,230,.18)}
input::placeholder,textarea::placeholder{color:#9fb6c7}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#d1436a;background:#fff6f8;box-shadow:0 0 0 4px rgba(209,67,106,.12)}
.err:empty{display:none}
.err{color:#c22a52;font-size:.8rem;font-weight:600}
.phone-wrap{position:relative;display:flex;align-items:center}
.phone-wrap .dial{position:absolute;inset-inline-start:14px;font-weight:700;color:var(--ink-3);font-size:.9rem;pointer-events:none}
.phone-wrap input{padding-inline-start:46px}
.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;padding:5px;border-radius:14px;background:var(--sky);border:1px solid var(--line)}
.seg{position:relative;display:grid;place-items:center;cursor:pointer}
.seg input{position:absolute;inset:0;opacity:0;cursor:pointer}
.seg span{display:grid;place-items:center;inline-size:100%;min-block-size:40px;padding:0 8px;border-radius:10px;font-weight:700;font-size:.9rem;
  color:var(--ink-2);transition:background-color .25s var(--ease),color .25s,box-shadow .25s;text-align:center}
.seg input:checked+span{background:#fff;color:var(--blue-d);box-shadow:var(--shadow-s)}
.seg input:focus-visible+span{outline:2.5px solid var(--blue);outline-offset:2px}
.qty{display:grid;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{padding:8px 15px;min-block-size:38px;border-radius:99px;border:1px solid var(--line-2);background:#fff;cursor:pointer;
  font-weight:700;font-size:.85rem;color:var(--ink-2);transition:transform .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease)}
.chips button:hover{border-color:var(--aqua);color:var(--blue-d);transform:translateY(-1px)}
.chips button.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.stepper{display:flex;align-items:stretch;gap:6px}
.stepper button{inline-size:48px;flex:none;border-radius:var(--r-s);border:1px solid var(--line-2);background:#fff;font-size:1.35rem;line-height:1;
  cursor:pointer;color:var(--navy);transition:all .2s;display:grid;place-items:center}
.stepper button:hover{background:var(--sky);border-color:var(--aqua)}
.stepper input{flex:1 1 auto;min-inline-size:0;text-align:center;font-weight:800;font-family:var(--f-disp);letter-spacing:.02em}
.stepper select{flex:0 1 auto;inline-size:auto;min-inline-size:120px;font-size:.86rem;font-weight:600;background:#fff}
.stepper-wide{flex-wrap:wrap}
.form-fine{font-size:.76rem;color:var(--ink-3);line-height:1.5;text-align:center}

/* dark form variant */
.form-card-dark{background:linear-gradient(170deg,#0a3765,#062a4d 55%,#041e39);border-color:rgba(255,255,255,.13);color:#e8f4ff;
  box-shadow:0 40px 80px -40px rgba(2,20,40,.85),inset 0 1px 0 rgba(255,255,255,.09)}
.form-card-dark::before{background:linear-gradient(90deg,var(--aqua-l),rgba(127,216,245,.15))}
.form-card-dark .form-title{color:#fff}
.form-card-dark .form-sub,.form-card-dark .form-fine{color:#dceefc}
.form-card-dark .form-sub a{color:var(--aqua-l);text-decoration:underline;text-underline-offset:3px}
.form-card-dark .field label,.form-card-dark .field legend{color:#fff;font-weight:700}
.form-card-dark input,.form-card-dark textarea,.form-card-dark select{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);color:#fff;font-weight:600}
.form-card-dark input::placeholder,.form-card-dark textarea::placeholder{color:#cfe8fa;opacity:1}
.form-card-dark input:focus,.form-card-dark textarea:focus,.form-card-dark select:focus{background:rgba(255,255,255,.1);border-color:var(--aqua-l);box-shadow:0 0 0 4px rgba(38,178,230,.22)}
.form-card-dark select option{color:#08192a}
.form-card-dark .segmented{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.form-card-dark .seg span{color:#f2faff}
.form-card-dark .seg input:checked+span{background:rgba(255,255,255,.14);color:#fff}
.form-card-dark .chips button{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);color:#fff;font-weight:700}
.form-card-dark .chips button:hover{border-color:var(--aqua-l);color:#fff;background:rgba(255,255,255,.12)}
.form-card-dark .chips button.is-on{background:var(--aqua);border-color:var(--aqua);color:#04263f}
.form-card-dark .stepper button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.form-card-dark .stepper button:hover{background:rgba(255,255,255,.14)}
.form-card-dark .phone-wrap .dial{color:#eaf6ff;font-weight:700}
.form-card-dark .btn-primary{background:linear-gradient(180deg,#3ec7f2,#1785cc 80%);color:#04263f}
.form-card-dark .err{color:#ffb3c6}
.form-card-dark .req{color:#ff9db8}
.form-card-dark .opt{color:#cfe8fa}

/* success panel */
.success{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;
  padding:clamp(22px,4vw,44px);overflow:auto;background:linear-gradient(180deg,#fff,#eef7fd);
  animation:popIn .5s var(--ease-out) both}
/* "safe" alignment: if the message ever ends up taller than the card it scrolls
   from the top instead of being clipped at both ends by the card's overflow */
.success{align-content:safe center;justify-content:safe center}
/* belt and braces: a revealed panel keeps the card tall enough to hold it, even
   before the script has measured anything */
.form-card:has(.success:not([hidden])){min-block-size:min(360px, 70vh)}
.form-card-dark .success{background:linear-gradient(180deg,#083155,#041e39)}
@keyframes popIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.success-mark{inline-size:66px;block-size:66px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(160deg,#3ec7f2,#0b57a4);box-shadow:0 16px 34px -14px rgba(11,87,164,.8)}
.success-mark .ico{inline-size:32px;block-size:32px}
.success h4{font-size:clamp(1.15rem,1rem + .7vw,1.6rem);max-width:24ch}
.success .success-note{color:var(--ink-2);font-size:.9rem;max-width:44ch}
.form-card-dark .success .success-note{color:rgba(232,244,255,.72)}
.success-actions{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-block-start:4px}
.success-actions .btn{font-size:.85rem;min-block-size:44px;padding:11px 18px}
/* the call action has to read as a button, on the white card and on the navy one */
.btn-call{background:var(--navy);color:#fff;border:1px solid var(--navy)}
.btn-call:hover{background:#0a4b8c;border-color:#0a4b8c;transform:translateY(-1px)}
.btn-call .ico{color:#8fd7f4}
.form-card-dark .btn-call{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);color:#fff}
.form-card-dark .btn-call:hover{background:rgba(255,255,255,.2)}
.btn-soft{background:rgba(38,178,230,.13);color:var(--blue-d);border:1px solid rgba(38,178,230,.3)}
.btn-soft:hover{background:rgba(38,178,230,.22)}
.form-card-dark .btn-soft{background:rgba(255,255,255,.1);color:#dff3ff;border-color:rgba(255,255,255,.2)}

/* ---------- distributor ---------- */
.dist{padding-block:calc(var(--sec-y) + 20px) var(--sec-y);background:
  linear-gradient(180deg,var(--navy) 0%,#052947 45%,#062f53 100%);color:#e8f4ff;overflow:hidden}
.dist::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 40% at 80% 12%,rgba(38,178,230,.2),transparent 70%),radial-gradient(50% 40% at 6% 92%,rgba(15,111,193,.24),transparent 72%)}
.dist .wrap{position:relative;z-index:1}
.dist-head{max-width:66ch;margin-inline:auto;text-align:center}
.dist-head h2{color:#fff;margin-block-start:12px}
.dist-head .sec-lead{color:#e6f3ff;margin-block-start:16px}
.dist-grid{display:grid;gap:clamp(24px,3.4vw,44px);margin-block-start:clamp(34px,5vw,64px);align-items:start}
.dist-side{padding:clamp(4px,1vw,10px)}
.dist-side h3{color:#fff;margin-block-end:22px}
.dist-list{display:grid;gap:20px;margin-block-end:34px}
.dist-list li{display:flex;gap:16px;align-items:flex-start}
.dist-list li>span{flex:none;font:800 .78rem/1 var(--f-disp);letter-spacing:.06em;color:var(--aqua-l);
  padding:9px 10px;border-radius:10px;background:rgba(127,216,245,.1);border:1px solid rgba(127,216,245,.22)}
.dist-list b{display:block;color:#fff;font-size:1rem}
.dist-list p{color:#e2f1ff;font-size:.92rem;margin-block-start:4px}
.dist-card{padding:22px;border-radius:var(--r-l);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12)}
.dist-card-k{font:700 .68rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--aqua-l);margin-block:16px 6px}
.dist-card-k:first-child{margin-block-start:0}
.dist-card-v{color:#fff;font-size:.95rem;line-height:1.55;font-weight:600}

/* ---------- about ---------- */
.about{padding-block:var(--sec-y);background:linear-gradient(180deg,#fff,#f4fbff)}
.about-grid{display:grid;gap:clamp(28px,4vw,60px);align-items:center}
.about-copy h2{margin-block:14px 0}
.about-copy p+p{margin-block-start:16px;color:var(--ink-2)}
.about-copy .sec-lead{margin-block:14px 0}
.about-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-block-start:30px}
.fact{padding:16px 18px;border-radius:var(--r-m);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-s)}
.fact-k{font:700 .66rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.fact-v{font-family:var(--f-disp);font-weight:700;font-size:1.02rem;color:var(--navy);margin-block-start:8px;line-height:1.25}
.about-visual{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-l);margin:0;background:var(--sky)}
.about-visual img{inline-size:100%;block-size:auto;aspect-ratio:16/10;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.about-visual:hover img{transform:scale(1.04)}
.about-visual figcaption{position:absolute;inset-block-end:0;inset-inline:0;padding:44px 20px 18px;color:#fff;
  font:700 .82rem/1.3 var(--f-body);letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(180deg,rgba(4,30,57,0),rgba(4,26,50,.55) 45%,rgba(3,20,40,.88))}

/* ---------- contact ---------- */
.contact{padding-block:calc(var(--sec-y) + 20px) var(--sec-y);background:#fff}
.contact-grid{display:grid;gap:clamp(20px,3vw,34px);margin-block-start:clamp(30px,4vw,52px);align-items:start}
.contact-actions{display:grid;gap:14px}
.tap-btn{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r-l);background:linear-gradient(180deg,#fff,#f6fbfe);
  border:1px solid var(--line);box-shadow:var(--shadow-s);transition:transform .3s var(--ease-out),box-shadow .3s,border-color .3s;min-block-size:76px}
.tap-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:rgba(38,178,230,.45)}
.tap-ico{inline-size:46px;block-size:46px;flex:none;border-radius:14px;display:grid;place-items:center;background:rgba(38,178,230,.14);color:var(--blue-d)}
.tap-ico .ico{inline-size:22px;block-size:22px}
.tap-btn-wa .tap-ico{background:rgba(31,170,84,.14);color:var(--wa)}
.tap-text{display:grid;gap:3px;min-width:0}
.tap-text b{font-family:var(--f-disp);font-size:1.05rem;letter-spacing:-.01em}
.tap-text span{color:var(--ink-3);font-size:.9rem;overflow-wrap:anywhere}
.tap-arrow{margin-inline-start:auto;color:var(--ink-3);transition:transform .3s var(--ease),color .3s}
.tap-btn:hover .tap-arrow{transform:translateX(4px);color:var(--blue)}
.contact-card{padding:clamp(22px,3vw,32px);border-radius:var(--r-xl);background:linear-gradient(170deg,#0a3765,#062a4d);color:#e8f4ff;
  box-shadow:var(--shadow-l);position:relative;overflow:hidden}
.contact-card::after{content:"";position:absolute;inset-block-start:-30%;inset-inline-start:-10%;inline-size:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(38,178,230,.28),transparent 65%)}
.contact-card h3{color:#fff;position:relative}
.contact-card address{margin-block:14px 0;line-height:1.7;color:rgba(232,244,255,.84);position:relative}
.contact-card address b{color:#fff}
.lic{position:relative;margin-block:20px;padding-block:14px;border-block:1px solid rgba(255,255,255,.14);display:flex;gap:8px;flex-wrap:wrap;font-size:.9rem;color:rgba(232,244,255,.6)}
.lic b{color:var(--aqua-l);font-weight:700}
.contact-row{position:relative;display:flex;flex-wrap:wrap;gap:10px}
.contact-row .btn-line{color:#dff3ff;border-color:rgba(255,255,255,.22)}
.contact-row .btn-line:hover{background:rgba(255,255,255,.1)}
.social-link{white-space:nowrap}
.social-mark{inline-size:24px;block-size:24px;flex:none;display:grid;place-items:center;border-radius:7px;color:#fff}
.social-mark .ico{inline-size:16px;block-size:16px}
.social-mark-facebook{background:#1877f2}
.social-mark-instagram{background:linear-gradient(135deg,#feda75,#fa7e1e 32%,#d62976 62%,#962fbf 82%,#4f5bd5)}
.contact-row .social-link{gap:8px;padding-inline:12px}
.contact-row .social-link:hover{border-color:rgba(127,216,245,.55);background:rgba(255,255,255,.12)}

/* ---------- footer ---------- */
.foot{background:linear-gradient(180deg,#04213d,#020f1f);color:rgba(232,244,255,.72);padding-block:clamp(44px,6vw,72px) calc(clamp(30px,4vw,44px) + env(safe-area-inset-bottom))}
.foot-grid{display:grid;gap:clamp(26px,3vw,34px)}
/* the lockup is navy-on-white artwork, so dark panels carry it on a light plate */
.foot-plate{display:inline-block;padding:13px 17px;border-radius:16px;background:#fff;
  box-shadow:0 12px 30px rgba(2,18,36,.30),0 0 0 1px rgba(255,255,255,.5)}
.foot-plate img{display:block;inline-size:auto;block-size:clamp(44px,4.6vw,58px)}
.foot-tag{margin-block-start:10px;font-family:var(--f-disp);font-weight:500;font-size:1.02rem;color:rgba(232,244,255,.86)}
.foot-now{display:inline-flex;align-items:center;gap:9px;margin-block-start:16px;padding:7px 14px;border-radius:99px;
  background:rgba(38,178,230,.13);border:1px solid rgba(38,178,230,.3);color:var(--aqua-l);font:700 .72rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(38,178,230,.55)}70%{box-shadow:0 0 0 10px rgba(38,178,230,0)}100%{box-shadow:0 0 0 0 rgba(38,178,230,0)}}
.foot h3{font:700 .72rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:rgba(232,244,255,.45);margin-block-end:16px}
.foot-links,.foot-contact{display:grid;gap:11px;align-content:start;font-size:.94rem}
.foot-links a{transition:color .2s,transform .2s;width:fit-content}
.foot-links a:hover{color:#fff;transform:translateX(3px)}
.foot-contact{gap:12px}
.foot-contact a{width:fit-content;overflow-wrap:anywhere}
.foot-contact a:hover{color:#fff}
.foot-contact .btn{margin-block-start:6px}
.foot-social{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:2px}
.foot-social .social-link{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;padding:7px 10px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.07);color:#fff;font:700 .82rem/1 var(--f-body);transition:transform .2s var(--ease),background-color .2s,border-color .2s}
.foot-social .social-link:hover{transform:translateY(-1px);background:rgba(255,255,255,.13);border-color:rgba(127,216,245,.55);color:#fff}
.foot-addr{font-size:.94rem;line-height:1.7}
.foot-lic{margin-block-start:14px;color:rgba(232,244,255,.5);font-size:.84rem}
.foot-lic span{color:rgba(232,244,255,.8)}
.foot-bar{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center;
  margin-block-start:clamp(30px,4vw,44px);padding-block-start:22px;border-block-start:1px solid rgba(255,255,255,.1);font-size:.82rem;color:rgba(232,244,255,.5)}

/* ---------- mobile action bar ---------- */
.mobile-bar{position:fixed;inset-block-end:0;inset-inline:0;z-index:80;display:none;gap:8px;padding:8px var(--pad) calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-block-start:1px solid var(--line);
  transform:translateY(120%);transition:transform .4s var(--ease)}
.mobile-bar.is-on{transform:none}
/* In the thank-you state its own WhatsApp and Call actions replace this bar. */
html.form-success-open .mobile-bar{transform:translateY(120%);pointer-events:none}
.mb{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-block-size:46px;border-radius:14px;font-weight:800;font-size:.85rem;
  transition:filter .2s,transform .2s}
.mb .ico{inline-size:18px;block-size:18px}
.mb-call{background:var(--navy);color:#fff}
.mb-wa{background:var(--wa);color:#fff}
.mb-enq{background:rgba(38,178,230,.16);color:var(--blue-d);border:1px solid rgba(38,178,230,.35)}
.mb:active{transform:scale(.97)}

/* ---------- reveals ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal][data-reveal-delay="1"]{transition-delay:.1s}
.js [data-reveal][data-reveal-delay="2"]{transition-delay:.2s}


/* ---------- toast ---------- */
.toast{position:fixed;inset-inline:16px;inset-block-end:calc(16px + env(safe-area-inset-bottom));z-index:120;margin-inline:auto;width:fit-content;
  max-inline-size:min(480px,calc(100% - 32px));padding:12px 18px;border-radius:99px;background:rgba(6,32,60,.95);color:#eaf6ff;
  font:600 .86rem/1.35 var(--f-body);text-align:center;box-shadow:var(--shadow-l);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(14px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
.toast.is-on{opacity:1;transform:none}
.toast a{color:var(--aqua-l);text-decoration:underline}

/* ---------- fallbacks ---------- */
html.menu-open,html.menu-open body{overflow:hidden}
.bottle-static .bottle-canvas{display:none}
.bottle-static .hero-poster{display:grid}
.bottle-static .hero-reveal{opacity:1;transform:none;visibility:visible}
.bottle-static .scroll-cue,.bottle-static .hero-drops{display:none}
.bottle-static .hero-stage{--hero-h:auto}
.bottle-static .hero-sticky{position:static;block-size:auto;min-block-size:100svh;padding-block:calc(var(--nav-h) + 12px) 40px}
.bottle-static .hero-overlay{position:static;padding:0}
.bottle-static .hero-poster{position:static;inset:auto;padding-block:18px}
.prod-canvas-box.no-3d{display:grid;place-items:center;padding:10px}
.poster-mini{block-size:88%;max-block-size:420px;inline-size:auto;filter:drop-shadow(0 24px 34px rgba(6,42,77,.18))}
/* the static tiles must keep the same honest scale the WebGL pair uses:
   1.715 / 1.885 of the 1 litre body height */
.prod-canvas-box[data-bottle-view="half"] .poster-mini{block-size:80%}
/* the lead sentence must not promise live WebGL when there is none */
.static-note{display:none}
.bottle-static .live-note{display:none}
.bottle-static .static-note{display:inline}
.form-fine a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
noscript+p,form+noscript p{margin-block-start:12px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  html{scroll-padding-block-end:calc(74px + env(safe-area-inset-bottom))}
  /* Keep iOS from zooming the page when a form control receives focus. */
  input[type=text],input[type=tel],input[type=number],input[type=email],textarea,select,.stepper select{font-size:16px}
  .seg span{min-block-size:44px}
  .chips button{min-block-size:44px;padding-inline:16px}
  .success-actions .btn{min-block-size:44px}
  .nav-cta{display:none}
  .burger{display:grid}
  .nav-links{position:fixed;inset-block-start:0;inset-inline-end:0;z-index:88;inline-size:min(100%,360px);block-size:100dvh;
    margin-inline-start:0;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;
    padding:calc(var(--nav-h) + 20px) 20px 32px;background:rgba(255,255,255,.98);backdrop-filter:blur(18px);
    border-inline-start:1px solid var(--line);box-shadow:-20px 0 60px -20px rgba(6,42,77,.35);
    transform:translateX(101%);transition:transform .45s var(--ease);overflow-y:auto}
  .nav-links.is-open{transform:none}
  .nav-links a:not(.btn){padding:15px 16px;font-size:1.05rem;font-weight:700;border-radius:14px;
    opacity:0;transform:translateX(18px);transition:opacity .4s var(--ease),transform .4s var(--ease),background-color .2s}
  .nav-links.is-open a:not(.btn){opacity:1;transform:none}
  .nav-links.is-open a:not(.btn):nth-child(1){transition-delay:.06s}
  .nav-links.is-open a:not(.btn):nth-child(2){transition-delay:.1s}
  .nav-links.is-open a:not(.btn):nth-child(3){transition-delay:.14s}
  .nav-links.is-open a:not(.btn):nth-child(4){transition-delay:.18s}
  .nav-links.is-open a:not(.btn):nth-child(5){transition-delay:.22s}
  .nav-links.is-open a:not(.btn):nth-child(6){transition-delay:.26s}
  .nav-links .btn{margin-block-start:18px;width:100%;min-block-size:52px}
  .mobile-bar{display:flex}
  .foot{padding-block-end:calc(clamp(84px,22vw,120px) + env(safe-area-inset-bottom))}
  .hero-stage{--hero-h:205vh}
}
@media (max-width:900px){
  .sheet-logo{display:block;inline-size:min(70%,214px);block-size:auto;align-self:flex-start;margin:0 0 20px}
}
@media (min-width:901px){
  :root{--nav-h:74px}
  .nav-links{gap:6px}
  .nav-links a:not(.btn):hover{transform:none}
}
@media (min-width:600px){
  .grid-2{grid-template-columns:1fr 1fr}
  .path-grid{grid-template-columns:1fr 1fr}
  .prod-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:960px){
  /* Keep enquiry fields comfortably wide on tablets and narrow laptop windows. */
  .split{grid-template-columns:1fr 1.05fr}
  .dist-grid{grid-template-columns:.82fr 1.18fr}
  .contact-grid{grid-template-columns:1.15fr .85fr}
  .foot-grid{grid-template-columns:1.5fr .8fr .95fr 1.1fr}
  .about-grid{grid-template-columns:1.06fr .94fr}
  .hero-title{font-size:clamp(3.4rem,4.4vw + 1.7rem,6rem)}
}
@media (max-width:380px){
  :root{--pad:14px}
  .brand-lockup{display:none}
  .brand-mark{display:block}
  .hero-logo{block-size:clamp(48px,17vw,64px)}
  .btn-lg{padding:14px 20px;font-size:.92rem}
  .prod-view{block-size:270px}
  .about-facts{grid-template-columns:1fr}
  .reveal-word{font-size:1.9rem}
  .hero-title{font-size:2.1rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js [data-reveal]{opacity:1;transform:none}
  .hero-drops,.scroll-cue .ico,.foot-now .dot{animation:none !important}
  .btn:hover,.path-card:hover,.prod-card:hover,.tap-btn:hover{transform:none}
}

/* ---------- print ---------- */
@media print{
  .nav,.mobile-bar,.hero-stage,.bottle-canvas,.prod-view,.hero-fade,.wave{display:none !important}
  body{color:#000}
  .form-card,.dist,.foot{background:#fff !important;color:#000 !important}
}