/* ============================================================
   LAGUNITAS — UNLIMITED RELEASE IPA
   ============================================================ */
@font-face{font-family:'AntonFallback';src:local('Impact');size-adjust:104%}

:root{
  --paper:#efede3;
  --paper-2:#e7e4d6;
  --paper-3:#dedaca;
  --ink:#16130f;
  --ink-60:rgba(22,19,15,.6);
  --ink-35:rgba(22,19,15,.35);
  --ink-14:rgba(22,19,15,.14);
  --red:#8f2226;
  --red-hi:#a52b2c;
  --red-btn:#a5201f;
  --red-deep:#5f1214;
  --gold:#c08a3e;

  --f-disp:'Anton','AntonFallback',Impact,sans-serif;
  --f-ui:'Archivo',system-ui,sans-serif;
  --f-slab:'Bitter',Georgia,serif;
  --f-hand:'Caveat',cursive;

  --pad:clamp(16px,2.5vw,40px);
  --rail:clamp(44px,4.4vw,66px);
  --pad-l:calc(var(--rail) + clamp(16px,5.3vw,78px));
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f-ui);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* FIX: sirf body{overflow:hidden} mobile/touch browsers (Safari/Chrome)
   par scroll ko poori tarah lock nahi karta — touch-scroll leak ho
   kar loader/curtain ke doraan hi bottle-journey ko premature scroll
   value de deta tha, jis se bottle apni asal hero position se hat kar
   neeche/tilted "settle" ho jati thi (mobile/tablet par tilted bottle
   bug ki yeh asal wajah thi). Ab html+body dono lock karte hain aur
   touch-action:none se touch-scroll bhi poori tarah rok dete hain. */
html.is-loading{overflow:hidden;height:100%}
body.is-loading{overflow:hidden;height:100vh;touch-action:none;overscroll-behavior:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--red);color:var(--paper)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ══════════ PAPER GRAIN + VIGNETTE ══════════ */
.grain,.vignette{position:fixed;inset:-60px;pointer-events:none;z-index:90}
.grain{
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' seed='11'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23g)' opacity='.42'/></svg>");
  background-size:260px 260px;
  will-change:transform;
}
.vignette{
  z-index:89;mix-blend-mode:multiply;opacity:.75;
  background:radial-gradient(120% 90% at 50% 42%,transparent 45%,rgba(120,104,78,.16) 78%,rgba(84,70,48,.34) 100%);
}

/* ══════════ DISTRESSED / LETTERPRESS TYPE ══════════ */
.grain-type{
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' seed='5'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/><feComponentTransfer><feFuncA type='table' tableValues='0 .55 1 1 1'/></feComponentTransfer></filter><rect width='340' height='340' filter='url(%23n)'/></svg>");
  mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' seed='5'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/><feComponentTransfer><feFuncA type='table' tableValues='0 .55 1 1 1'/></feComponentTransfer></filter><rect width='340' height='340' filter='url(%23n)'/></svg>");
  -webkit-mask-size:340px 340px;mask-size:340px 340px;
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
}

/* ══════════ SPLIT-TEXT PRIMITIVES ══════════ */
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>b{display:block;font-weight:inherit}
.ch{display:inline-block;will-change:transform}
.wd{display:inline-block;white-space:nowrap}

.eyebrow{
  display:flex;align-items:center;gap:.7em;
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-60);
}
.eyebrow i{display:block;width:clamp(28px,4vw,58px);height:1px;background:var(--ink-35)}

.h2{
  font-family:var(--f-disp);font-weight:400;
  font-size:clamp(38px,7.4vw,124px);line-height:.87;
  letter-spacing:-.008em;text-transform:uppercase;color:var(--ink);
}
.h2--sm{font-size:clamp(30px,4.6vw,74px)}
.lead{font-size:clamp(15px,1.15vw,18px);line-height:1.62;color:var(--ink-60);max-width:46ch}
.lnk{
  position:relative;font-size:10px;font-weight:700;letter-spacing:.19em;
  color:var(--red);padding-bottom:2px;
}
.lnk::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform-origin:0 50%;transition:transform .5s var(--e-out)}
.lnk:hover::after{transform:scaleX(0)}

/* ══════════ PRELOADER ══════════ */
.loader{
  position:fixed;inset:0;z-index:120;background:var(--paper);
  display:grid;place-content:center;justify-items:center;gap:26px;
  padding:var(--pad);
}
.loader__mark{text-align:center}
.loader__word{
  display:block;font-family:var(--f-slab);font-weight:900;
  font-size:clamp(30px,5.4vw,74px);letter-spacing:.06em;color:var(--red);
}
.loader__word .ch{opacity:0}
.loader__sub{
  display:block;margin-top:10px;font-size:10px;font-weight:600;
  letter-spacing:.34em;color:var(--ink-35);
}
.loader__track{width:min(320px,52vw);height:2px;background:var(--ink-14);overflow:hidden}
.loader__track i{display:block;width:100%;height:100%;background:var(--red);transform:scaleX(0);transform-origin:0 50%}
.loader__count{font-family:var(--f-disp);font-size:13px;letter-spacing:.1em;color:var(--ink-60)}
.loader__count em{font-style:normal;font-size:9px;margin-left:2px}
.loader__tag{
  position:absolute;bottom:var(--pad);left:50%;transform:translateX(-50%);
  font-size:9px;font-weight:600;letter-spacing:.4em;color:var(--ink-35);
}

/* ══════════ CURTAIN WIPE ══════════ */
.curtain{position:fixed;inset:0;z-index:119;display:flex;pointer-events:none}
.curtain i{flex:1 1 20%;background:var(--red);transform:scaleY(0);transform-origin:50% 100%}

/* ══════════ CUSTOM CURSOR ══════════ */
.cursor{
  position:fixed;top:0;left:0;z-index:200;pointer-events:none;
  width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid var(--red);border-radius:50%;
  opacity:0;mix-blend-mode:multiply;
  will-change:transform;
}
.cursor i{
  position:absolute;inset:0;margin:auto;width:4px;height:4px;border-radius:50%;
  background:var(--red);
}
.cursor.is-on{opacity:1}
.cursor.is-hot{background:var(--red);border-color:var(--red)}
.cursor.is-hot i{background:var(--paper)}
@media (hover:none),(max-width:820px){.cursor{display:none}}

/* ══════════ LEFT RAIL ══════════ */
.rail{
  position:fixed;top:0;left:0;bottom:0;width:var(--rail);z-index:70;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--pad) + 4px) 0 var(--pad);gap:16px;
  border-right:1px solid var(--ink-14);
  mix-blend-mode:multiply;
}
.rail__burger{width:26px;height:14px;position:relative;flex:none}
.rail__burger span{
  position:absolute;left:0;height:1.5px;width:100%;background:var(--ink);
  transition:transform .55s var(--e-out),opacity .3s,width .55s var(--e-out);
}
.rail__burger span:nth-child(1){top:0}
.rail__burger span:nth-child(2){top:6.2px;width:70%}
.rail__burger span:nth-child(3){top:12.5px}
.rail__burger:hover span:nth-child(2){width:100%}
body.menu-open .rail__burger span:nth-child(1){transform:translateY(6.2px) rotate(45deg)}
body.menu-open .rail__burger span:nth-child(2){opacity:0;transform:scaleX(0)}
body.menu-open .rail__burger span:nth-child(3){transform:translateY(-6.3px) rotate(-45deg)}
body.menu-open .rail__burger span{background:var(--paper)}
body.menu-open .rail{border-color:rgba(239,237,227,.16)}
.rail__icon{width:22px;height:22px;flex:none;color:var(--ink);transition:transform .4s var(--e-out)}
.rail__icon:hover{transform:scale(1.14)}
.rail__icon svg{width:100%;height:100%}
body.menu-open .rail__icon{color:var(--paper)}
.rail__scroll{
  margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:9px;font-weight:600;letter-spacing:.3em;color:var(--ink-35);
}
.rail__scroll span{writing-mode:vertical-rl}
.rail__scroll i{display:block;width:1px;height:52px;background:var(--ink-14);position:relative;overflow:hidden}
.rail__scroll i::after{
  content:'';position:absolute;inset:0;background:var(--red);
  animation:railRun 2.4s var(--e-io) infinite;
}
@keyframes railRun{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ── fixed chrome inverted over dark sections ── */
.rail,.rail__scroll,.rail__scroll i,.hdr,.logo__word,.logo__sub{
  transition:color .5s var(--e-out),background-color .5s var(--e-out),border-color .5s var(--e-out);
}
body.on-dark .hdr,body.on-dark .rail{mix-blend-mode:normal}
body.on-dark .rail{border-color:rgba(239,237,227,.16)}
body.on-dark .rail__burger span{background:var(--paper)}
body.on-dark .rail__icon{color:var(--paper)}
body.on-dark .rail__scroll{color:rgba(239,237,227,.42)}
body.on-dark .rail__scroll i{background:rgba(239,237,227,.18)}
body.on-dark .logo__word{color:var(--paper)}
body.on-dark .logo__sub{color:rgba(239,237,227,.42)}
body.on-dark .hdr__nav a{color:rgba(239,237,227,.62)}
body.on-dark .hdr__nav a:hover{color:var(--paper)}

/* ══════════ HEADER ══════════ */
.hdr{
position:absolute;top:0;left:0;right:0;z-index:75;
display:flex;align-items:center;gap:24px;
padding:calc(var(--pad) - 4px) var(--pad) 0 var(--pad-l);
mix-blend-mode:multiply;
}
.logo{flex:none;line-height:1}
.logo__word{
  display:block;font-family:var(--f-slab);font-weight:900;
  font-size:clamp(15px,1.42vw,21px);letter-spacing:.13em;color:var(--red);
}
.logo__sub{
  display:block;margin-top:3px;padding-left:.16em;
  font-size:7.5px;font-weight:600;letter-spacing:.44em;color:var(--ink-35);
}
.hdr__nav{
 opacity:1;          /* pehle 0 tha — ab hamesha dikhega */
  pointer-events:auto;
  transform:none;
  margin:0 auto;display:flex;gap:clamp(16px,2.6vw,40px);
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transition:opacity .55s var(--e-out),transform .55s var(--e-out);
}
.hdr.is-stuck .hdr__nav,.hdr__nav:focus-within{opacity:1;pointer-events:auto;transform:none}
.hdr__nav a{position:relative;padding-bottom:3px;color:var(--ink-60)}
.hdr__nav a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--e-out)}
.hdr__nav a:hover{color:var(--ink)}
.hdr__nav a:hover::after{transform:scaleX(1)}
.hdr>.btn{margin-left:auto}

/* ══════════ BUTTONS ══════════ */
.btn{
  position:relative;flex:none;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  padding:8px 13px 7px;border-radius:2px;
}
.btn span{position:relative;z-index:2;display:block}
.btn::before,.btn::after{content:'';position:absolute;inset:0;z-index:1}
.btn--buy{color:#fff;background:var(--red-btn)}
.btn--buy::after{background:var(--ink);transform:translateY(101%);transition:transform .58s var(--e-out)}
.btn--buy:hover::after{transform:translateY(0)}
.btn--ink{color:#fff;background:var(--ink)}
.btn--ink::after{background:var(--red);transform:translateY(101%);transition:transform .58s var(--e-out)}
.btn--ink:hover::after{transform:translateY(0)}
.btn--lg{padding:15px 30px 14px;font-size:11px;letter-spacing:.22em;border-radius:2px}
.btn--ghost{
  align-self:flex-start;color:var(--ink);border:1px solid var(--ink-35);
  padding:14px 26px 13px;font-size:10px;background:transparent;
}
.btn--ghost::after{background:var(--red);transform:translateY(101%);transition:transform .58s var(--e-out)}
.btn--ghost:hover{color:#fff;border-color:var(--red)}
.btn--ghost:hover::after{transform:translateY(0)}

/* ══════════ FULLSCREEN MENU ══════════ */
.menu{position:fixed;inset:0;z-index:72;visibility:hidden}
.menu.is-open{visibility:visible}
.menu__bg{position:absolute;inset:0;background:var(--red-deep);clip-path:inset(0 0 100% 0)}
.menu__inner{
  position:relative;height:100%;display:grid;align-content:center;
  grid-template-columns:1fr auto;gap:clamp(24px,5vw,90px);
  padding:0 var(--pad) 0 calc(var(--rail) + clamp(20px,5vw,90px));
  color:var(--paper);
}
.menu__list li{overflow:hidden}
.menu__list a{
  display:flex;align-items:baseline;gap:clamp(10px,1.6vw,22px);
  font-family:var(--f-disp);font-size:clamp(38px,8.2vw,124px);line-height:1.02;
  text-transform:uppercase;letter-spacing:-.01em;
  transform:translateY(110%);
}
.menu__list a::before{
  content:attr(data-i);flex:none;
  font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.16em;
  color:rgba(239,237,227,.42);transform:translateY(-.62em);
}
.menu__list a>span{
  position:relative;display:block;
  background:linear-gradient(var(--paper),var(--paper)) 0 100%/0 2px no-repeat;
  transition:background-size .6s var(--e-out),opacity .4s;
}
.menu__list a:hover>span{background-size:100% 2px}
.menu__list:hover a:not(:hover)>span{opacity:.42}
.menu__side{align-self:end;max-width:270px;opacity:0;padding-bottom:6px}
.menu__label{font-size:9.5px;font-weight:600;letter-spacing:.34em;color:rgba(239,237,227,.5)}
.menu__copy{margin-top:14px;font-size:14px;line-height:1.6;color:rgba(239,237,227,.82)}
.menu__socials{display:flex;gap:14px;margin-top:22px}
.menu__socials a{font-size:10px;font-weight:700;letter-spacing:.18em;padding-bottom:2px;border-bottom:1px solid rgba(239,237,227,.3)}
.menu__socials a:hover{border-color:var(--paper)}
@media (max-width:860px){
  .menu__inner{grid-template-columns:1fr;align-content:center;gap:34px}
  .menu__side{max-width:none}
}

/* ══════════ HERO ══════════ */
.hero{
  position:relative;
  min-height:130vh;
  min-height:130svh;
  padding:0 var(--pad) clamp(24px,4vh,44px) var(--pad-l);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:1fr auto;
  align-items:end;
  overflow:hidden;
}
.hero__title{
  position:absolute;left:50%;top:clamp(18%,24vh,32%);transform:translateX(-50%);
  width:min(72vw,1080px);
  font-family:var(--f-disp);font-weight:400;
  font-size:clamp(54px,12.6vw,206px);line-height:.855;
  text-align:center;text-transform:uppercase;letter-spacing:-.014em;
  color:var(--red);z-index:2;pointer-events:none;
}
.hero__title .ln>b{display:inline-block;white-space:nowrap;transform-origin:50% 100%}

/* — bottle — */
.hero__bottle{
  --btl-h:86vh;
  --btl-x:50%;
  position:absolute;left:var(--btl-x);bottom:8vh;
  height:var(--btl-h);
  transform:translateX(-50%);
  z-index:60;pointer-events:none;
}
.hero__bottle img{
  width:auto;height:100%;
  filter:drop-shadow(-16px 30px 38px rgba(74,52,26,.32)) drop-shadow(0 5px 10px rgba(74,52,26,.22));
  will-change:transform;
}

/* — wax seal — */
.seal{
  position:absolute;left:42%;top:24%;transform:translate(-50%,-50%);
  width:clamp(64px,6.9vw,104px);aspect-ratio:1/1;z-index:4;
  color:var(--ink);pointer-events:none;
}
.seal svg{width:100%;height:100%;overflow:visible}
.seal__ring{fill:var(--paper);stroke:currentColor;stroke-width:2.4}
.seal__ring--in{fill:none;stroke-width:1;stroke-dasharray:1.5 4}
.seal__txt{
  font-family:var(--f-ui);font-size:15px;font-weight:700;letter-spacing:.14em;
  fill:currentColor;
}
.seal__dog{fill:currentColor}

/* — bottom-left meta — */
.hero__meta{
  grid-column:1;grid-row:2;position:relative;z-index:1;min-width:0;
  max-width:min(46%,560px);
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(10px,1.4vh,16px);
}
.script{
  font-family:var(--f-hand);font-size:clamp(19px,1.66vw,27px);font-weight:600;
  color:var(--ink);
}
.hero__sub{
  font-family:var(--f-disp);font-weight:400;
  font-size:clamp(30px,5.6vw,88px);line-height:.86;
  text-transform:uppercase;letter-spacing:-.006em;color:var(--ink);
}
.hero__copy{font-size:13px;line-height:1.6;color:var(--ink-60);max-width:44ch}

/* — bottom-right spec boxes — */
.specs{
  grid-column:2;grid-row:2;position:relative;z-index:5;
  display:flex;flex-direction:column;gap:clamp(8px,1.1vh,12px);
  width:clamp(260px,27.5vw,400px);
}
.spec{
  width:100%;
  border:1px solid var(--ink-35);
  padding:clamp(10px,.95vw,14px) clamp(11px,1.05vw,16px) clamp(10px,1vw,15px);
  background:rgba(239,237,227,.34);backdrop-filter:blur(2px);
}
.spec__hd{display:flex;align-items:baseline;gap:9px;padding-bottom:9px;border-bottom:1px solid var(--ink-14)}
.spec__hd strong{font-size:11px;font-weight:700;letter-spacing:.2em}
.spec__hd span{font-size:8.5px;font-weight:500;letter-spacing:.16em;color:var(--ink-35);text-transform:uppercase}
.spec__row{display:flex;align-items:flex-start;gap:clamp(10px,1.1vw,16px);padding-top:10px}
.spec__num{
  flex:none;display:flex;align-items:flex-start;
  font-family:var(--f-disp);font-size:clamp(30px,3vw,46px);line-height:.8;
  letter-spacing:-.02em;color:var(--ink);
}
.spec__num em{font-style:normal;font-size:.42em;margin-top:.12em;margin-left:1px}
.spec__txt{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.spec__txt p{font-size:10px;line-height:1.5;color:var(--ink-60)}

/* ══════════ MARQUEE STRIP ══════════ */
.strip{
  margin-top: 30px;
  position:relative;z-index:6;overflow:hidden;
  background:var(--red);color:var(--paper);
  border-top:1px solid rgba(22,19,15,.2);border-bottom:1px solid rgba(22,19,15,.2);
  padding:clamp(9px,1vw,15px) 0;
}
.strip__track{display:flex;width:max-content;will-change:transform}
.strip__track span{
  display:flex;align-items:center;flex:none;
  font-family:var(--f-disp);font-size:clamp(15px,1.5vw,25px);
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
}
.strip__track i{font-style:normal;font-size:.5em;opacity:.6;padding:0 clamp(14px,1.7vw,30px);transform:translateY(-.12em)}

/* ══════════ SECTION SHELL ══════════ */
.brew,.nums{padding:clamp(64px,10vh,140px) var(--pad) clamp(56px,9vh,120px) var(--pad-l)}

/* ══════════ THE BREW ══════════ */
.brew__grid{
  margin-top:clamp(26px,4vh,52px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(28px,5vw,84px);align-items:center;
}
.brew__copy{display:flex;flex-direction:column;gap:clamp(18px,2.4vh,30px)}
.notes{display:flex;flex-direction:column;border-top:1px solid var(--ink-14)}
.notes li{
  display:flex;align-items:baseline;gap:16px;
  padding:13px 2px;border-bottom:1px solid var(--ink-14);
  transition:padding-left .5s var(--e-out),color .4s;
}
.notes li:hover{padding-left:12px}
.notes b{flex:none;width:74px;font-size:9.5px;font-weight:700;letter-spacing:.2em;color:var(--red)}
.notes span{font-size:13.5px;color:var(--ink-60)}
.brew__shot{position:relative;display:grid;place-items:center;padding:clamp(18px,3vw,44px)}
.brew__shot::before{
  content:'';position:absolute;inset:0;
  border:1px solid var(--ink-14);
  background:
    linear-gradient(var(--paper-2),var(--paper-2)) padding-box,
    radial-gradient(70% 55% at 50% 40%,rgba(192,138,62,.2),transparent 70%);
}
.brew__shot img{position:relative;height:clamp(280px,46vh,520px);width:auto;filter:drop-shadow(-12px 22px 30px rgba(74,52,26,.3))}
.brew__shot figcaption{
  position:absolute;left:0;bottom:-1px;transform:translateY(100%);
  display:flex;align-items:center;gap:9px;padding-top:11px;
  font-size:9.5px;font-weight:600;letter-spacing:.2em;color:var(--ink-35);
}
.brew__shot figcaption b{font-family:var(--f-disp);font-size:15px;letter-spacing:0;color:var(--red)}

/* ══════════ TASTING COLLAGE (splat notes) ══════════ */
.taste{position:relative;overflow:hidden;
  padding:clamp(30px,6vh,80px) var(--pad) clamp(50px,9vh,120px) var(--pad-l)}
.taste__stage{position:relative;min-height:clamp(540px,92vh,960px)}
.taste__splat{position:absolute;will-change:transform}
.taste__splat svg{display:block;width:100%;height:auto}
.splat__txt{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;
  padding:19%;text-align:center;color:var(--paper);
}
.splat__t{font-family:var(--f-disp);font-weight:400;
  font-size:clamp(15px,1.55vw,25px);line-height:1;letter-spacing:.05em;text-transform:uppercase}
.splat__p{font-size:10.5px;line-height:1.55;color:rgba(239,237,227,.86)}
.taste__splat--1{left:10%;top:0;width:clamp(190px,23vw,320px);rotate:-8deg}
.taste__splat--2{left:25%;top:42%;width:clamp(160px,19vw,260px);rotate:12deg}
.taste__splat--3{left:60%;top:24%;width:clamp(230px,27vw,380px);rotate:-10deg}
.taste__bottle{
  position:absolute;left:48%;top:50%;translate:-50% -50%;
  height:clamp(360px,70vh,660px);z-index:2;
}
.taste__bottle img{height:100%;width:auto;
  filter:drop-shadow(-14px 26px 32px rgba(74,52,26,.32))}
.taste__glass{position:absolute;left:1%;bottom:2%;width:clamp(120px,13vw,190px);rotate:-16deg}
.taste__glass svg{display:block;width:100%;height:auto;
  filter:drop-shadow(-10px 18px 24px rgba(74,52,26,.28))}

/* ══════════ NUMBERS ══════════ */
.nums__grid{
  margin-top:clamp(28px,4.5vh,58px);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink-14);
}
.num{
  padding:clamp(20px,3vh,36px) clamp(10px,1.4vw,22px) clamp(18px,2.6vh,30px) 0;
  border-bottom:1px solid var(--ink-14);
}
.num+.num{border-left:1px solid var(--ink-14);padding-left:clamp(14px,1.8vw,28px)}
.num b{
  display:flex;align-items:flex-start;
  font-family:var(--f-disp);font-weight:400;
  font-size:clamp(40px,5.6vw,92px);line-height:.82;letter-spacing:-.022em;
  color:var(--red);
}
.num b em{font-style:normal;font-size:.34em;margin-top:.2em;margin-left:2px;color:var(--ink-35)}
.num>span{
  display:block;margin-top:12px;
  font-size:9.5px;font-weight:600;letter-spacing:.2em;color:var(--ink-60);
}

/* — pull quote — */
.pull{
  margin-top:clamp(48px,8vh,110px);text-align:center;
  font-family:var(--f-disp);font-weight:400;
  font-size:clamp(30px,5.5vw,92px);line-height:.92;
  text-transform:uppercase;letter-spacing:-.012em;color:var(--ink);
}
.pull cite{
  display:block;margin-top:clamp(18px,2.6vh,30px);
  font-family:var(--f-ui);font-size:9.5px;font-style:normal;font-weight:600;
  letter-spacing:.28em;color:var(--ink-35);
}

/* ══════════ FOOTER ══════════ */
.ftr{
  position:relative;overflow:hidden;background:var(--paper-2);
  border-top:1px solid var(--ink-14);
  padding:clamp(48px,7vh,92px) var(--pad) clamp(16px,2.4vh,26px) var(--pad-l);
}
.ftr__top{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  gap:clamp(22px,3vw,50px);align-items:start;
}
.ftr__k{font-size:9px;font-weight:700;letter-spacing:.3em;color:var(--ink-35);margin-bottom:12px}
.ftr__col p{font-size:13.5px;line-height:1.62;color:var(--ink-60)}
.ftr__col a:hover{color:var(--red)}
.ftr__soc{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.ftr__soc a{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--ink-60);padding-bottom:2px;border-bottom:1px solid transparent}
.ftr__soc a:hover{color:var(--red);border-color:var(--red)}
.ftr__word{
  margin:clamp(38px,6vh,74px) 0 clamp(10px,1.6vh,18px);
  line-height:.78;overflow:hidden;
}
.ftr__word b{
  display:block;font-family:var(--f-disp);font-weight:400;
  font-size:clamp(56px,15.6vw,250px);letter-spacing:-.018em;
  color:var(--red);white-space:nowrap;
}
.ftr__base{
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  padding-top:clamp(12px,1.8vh,20px);border-top:1px solid var(--ink-14);
  font-size:9px;font-weight:600;letter-spacing:.2em;color:var(--ink-35);
}
.ftr__base a{margin-left:auto}
.ftr__base a:hover{color:var(--red)}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1180px) and (min-width:1081px){
  .hero__title{width:min(80vw,940px)}
  .specs{width:clamp(230px,26vw,360px)}
}
@media (max-width:1080px){
  .brew__grid{grid-template-columns:1fr;gap:34px}
  .brew__shot{order:-1}
  .nums__grid{grid-template-columns:repeat(2,1fr)}
  .num:nth-child(3){border-left:0;padding-left:0}
  .ftr__top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ── tablet (portrait/landscape, ~700–1024px) ──
   desktop ke hero grid ko tang hone se pehle hi thoda room dete hain,
   is se bottle/seal/specs squeeze nahi hote iPad jaise widths par */
@media (max-width:1024px) and (min-width:861px){
  :root{--rail:52px}
  .hero__title{width:min(84vw,760px);font-size:clamp(52px,10.6vw,150px)}
  /* FIX: pehle sirf --btl-h badla jata tha, "bottom" desktop wala
     (4vh) hi reh jata — is se bottle .hero (130svh) ke bilkul
     neeche anchor hoti thi, jabke .hero__title upar (~24vh) par
     hai. Result: default view me bottle title se bohot neeche,
     disconnect ho kar dikhti thi (ya iPad range 861px se bahar
     hone par dikhti hi nahi thi). Ab bottle ko "top" se anchor
     kiya hai taake woh hamesha title ke upar/sath overlap kare —
     jaisa desktop par design me intend hai — hero ki total height
     se independent. */
  .hero__bottle{
    --btl-h:62vh;
    top:18vh;bottom:auto;
  }
  .specs{width:clamp(220px,30vw,320px)}
  .hero__meta{max-width:min(50%,520px)}
}
@media (max-width:860px){
  :root{--rail:40px}
  /* pehle .hero ki height fixed 130svh thi jabke andar ka content
     (title + meta + 3 spec cards) us se zyada jagah maang leta tha —
     result: hero__title (jo position:absolute hai) neeche flow ho
     rahe hero__meta/.specs ke upar overlap/mix ho jata tha (mobile
     par overflow:hidden hone ki wajah se yeh clip/mix hoke dikhta).

     NOTE: min-height ko "auto" karna GHALTI thi — is se hero itna
     chhota ho gaya ke .hero__bottle (jo absolute + bottom-anchored
     hai, 78svh height) upar se hi clip ho kar (overflow:hidden ki
     wajah se) ghayab/adhoora dikhne laga, aur bottle-journey ki
     "rest" position bhi is chhoti hui height ke hisab se ghalat
     measure hui — isi se bottle bohot neeche/gayab hoke scroll par
     jaa rahi thi. Ab min-height wapas ek generous fixed value par
     rakha (thoda aur badha diya, 130 → 148svh) taake bottle ko
     poori jagah mile, aur sirf row-1 (title area) ke liye minmax
     minimum guarantee ki — is se overlap bhi fix hota hai aur
     bottle ki jagah bhi barqarar rehti hai. */
  .hero{
    grid-template-columns:1fr;
    grid-template-rows:minmax(46vh,1fr) auto auto;
    grid-template-rows:minmax(46svh,1fr) auto auto;
    gap:16px;
    min-height:148vh;
    min-height:148svh;
  }
  .hero__title{top:16.5%;width:88vw;font-size:clamp(46px,15.4vw,110px)}
  /* FIX: pehle bottle .hero (148svh — bohot lamba, kyunke neeche
     meta+specs bhi stack hoti hain) ke "bottom" se anchor thi.
     Us lambi height ki wajah se bottle document me bohot neeche
     ja kar baithti thi — default (bina scroll) view me sirf uska
     upar wala hissa hi kabhi kabhi jhalakta, brand-name/title ke
     sath koi overlap nahi hota tha, aur pehli scroll par hi woh
     bohot bara "jump" leti thi (kyunke uski asal "rest" position
     viewport se bohot door thi). Ab "top" se anchor kiya hai —
     isi se woh hero ki total height se independent ho kar hamesha
     title ke upar/sath sahi jagah (default state me hi) dikhti
     hai, jaisa desktop design me hai — aur scroll journey bhi
     ek sahi, nazdeeki "rest" point se shuru hoti hai (isi se
     thori si scroll par ziada neeche "jump" hona bhi khatam
     ho jata hai). */
 .hero__bottle{
  --btl-h:56vh;
  --btl-h:56svh;
  --btl-x:50%;
  position:absolute;left:var(--btl-x);top:20vh;top:20svh;bottom:auto;
  height:var(--btl-h);
  transform:translateX(-50%);
  z-index:60;pointer-events:none;
}
  .seal{left:22%;top:20.5%;width:60px}
  .hero__meta{grid-column:1;grid-row:2;max-width:none}
  /* specs ko 3 full-width stacked cards ki jagah 2-up grid banaya —
     isi extra height ki wajah se title overlap ho raha tha */
  .specs{
    grid-column:1;grid-row:3;width:100%;
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
  }
  .specs .spec:last-child{grid-column:1/-1}
  .hdr__nav{display:none}
  .taste__stage{min-height:auto;display:flex;flex-direction:column;align-items:center;gap:34px}
  .taste__splat{position:static;width:min(76%,320px)}
  .taste__splat--1{order:1}
  .taste__bottle{order:2;position:static;translate:none;height:50vh;height:50svh}
  .taste__splat--2{order:3}
  .taste__splat--3{order:4}
  .taste__glass{order:5;position:static;width:120px}
  .ftr__base a{margin-left:0;width:100%}
  /* year-round range: park slot ki jagah wrap hone par bhi
     properly reserved rahe taake bottle journey wahan sahi
     tarah "park" ho sake (order desktop jaisa hi rehta hai) */
  .range__row{row-gap:56px}
}
@media (max-width:520px){
  .nums__grid{grid-template-columns:1fr}
  .num+.num{border-left:0;padding-left:0}
  .ftr__top{grid-template-columns:1fr}
  .hero__bottle{--btl-h:50vh;--btl-h:50svh}
  .hero__title{font-size:clamp(38px,14.5vw,80px)}
  .range__row{gap:30px 20px}
}
@media (max-width:360px){
  .hero__title{width:94vw}
  :root{--pad:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .grain{display:none}
}





/* ══════════ YEAR ROUND (package range) ══════════ */
.range{
  padding:clamp(56px,9vh,120px) var(--pad) clamp(64px,10vh,140px) var(--pad-l);
  text-align:center;
}
.range__hd{display:flex;flex-direction:column;align-items:center;gap:8px}
.range__script{
  font-family:var(--f-hand);font-weight:600;
  font-size:clamp(17px,1.5vw,24px);color:var(--ink);
}
.range__title{
  font-family:var(--f-disp);font-weight:400;
  font-size:clamp(40px,6.4vw,108px);line-height:.9;
  text-transform:uppercase;letter-spacing:.01em;color:var(--ink);
}
.range__row{
  margin-top:clamp(34px,6vh,72px);
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(22px,4.5vw,80px);
}
.range__item{display:flex;flex-direction:column;align-items:center;gap:16px}
.range__art{
  position:relative;
  height:clamp(150px,26vh,260px);
  display:flex;align-items:flex-end;justify-content:center;
}
.range__art::after{           /* zameen ka saya */
  content:'';position:absolute;left:50%;bottom:-10px;translate:-50% 0;
  width:112%;height:14px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(22,19,15,.26),transparent 72%);
}
.range__art img,.range__art svg{
  position:relative;height:100%;width:auto;
  transition:transform .6s var(--e-out);
}
.range__item:hover .range__art img,
.range__item:hover .range__art svg{transform:translateY(-10px)}
.range__art--tap{height:clamp(120px,20vh,200px)}
.range__art--can{height:clamp(110px,18vh,180px)}
.range__art--can16{height:clamp(140px,23vh,230px)}
.range__cap{
  display:flex;flex-direction:column;gap:3px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);
}
.range__cap b{font-weight:700;letter-spacing:.18em;color:var(--ink)}
@media (max-width:860px){
  .range__row{flex-wrap:wrap;justify-content:center;gap:36px 28px}
  .range__art{height:clamp(140px,24vh,220px)}
  .range__art--tap{height:clamp(110px,18vh,170px)}
  .range__art--can{height:clamp(100px,16vh,160px)}
  .range__art--can16{height:clamp(130px,21vh,210px)}
}