/* ==================================================================
   JUICE*EJ — cinematic scroll site
   Off-black ground, one juice colour per section as the only accent.
   Black-on-colour or white-on-black. No gradients as decoration,
   no glassmorphism.
   ================================================================== */

:root{
  --bg:#0A0A0A;
  --bg-tint:#0A0A0A;          /* bg crossfades toward the live juice colour */
  --ink:#F4F3F0;
  --ink-dim:#8C8A85;
  --rule:#1E1E1E;

  --accent:#70DF04;           /* live accent: brand green, or the juice colour in THE LINEUP */
  --accent-text:#70DF04;      /* accessible variant for small text on dark, computed at runtime */

  --display:'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --label:'Archivo Narrow', 'Helvetica Neue', Arial, sans-serif;
  --body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --rail:clamp(44px, 5vw, 74px);
  --pad:clamp(20px, 5vw, 80px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg-tint);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background-color .1s linear;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--accent); color:#000; }

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:100;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__logo{ width:clamp(110px,15vw,170px); height:auto; }
.rail__mark span{ color:var(--accent); }
.loader__bar{ width:min(240px,50vw); height:1px; background:#242424; overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0%; background:var(--accent); }
.loader__pct{
  font-family:var(--label); font-size:11px; letter-spacing:.28em; color:var(--ink-dim);
}

/* ---------- persistent vertical logotype rail ---------- */
.rail{
  position:fixed; top:0; left:0; bottom:0; width:var(--rail);
  z-index:40; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:26px; gap:18px;
  border-right:1px solid var(--rule);
  mix-blend-mode:normal;
}
.rail__mark{
  font-family:var(--display);
  font-size:clamp(15px,1.5vw,20px);
  letter-spacing:.14em;
  writing-mode:vertical-rl;
  transform:rotate(180deg);           /* reads bottom-to-top, as on the label */
  color:var(--ink);
}
.rail__line{ width:1px; height:clamp(50px,9vh,110px); background:var(--accent); }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:var(--rail); right:0; z-index:45;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad) 18px clamp(14px,2vw,28px);
  transition:transform .45s var(--ease);
}
.nav.is-hidden{ transform:translateY(-110%); }
.nav__mark{ display:block; line-height:0; text-decoration:none; }
.nav__mark img{ width:clamp(38px,4vw,52px); height:auto; }
.nav__links{ display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); }
.nav__links a{
  font-family:var(--label); font-weight:600; font-size:11px;
  letter-spacing:.2em; text-decoration:none; color:var(--ink-dim);
  transition:color .3s;
}
.nav__links a:hover{ color:var(--ink); }
.nav__cta{
  color:#000 !important; background:var(--accent);
  padding:9px 16px; transition:background-color .4s linear;
}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--label); font-weight:600; font-size:11px;
  letter-spacing:.28em; color:var(--accent-text); margin:0 0 22px;
}
.line{ display:block; overflow:hidden; }
.line .ch{ display:inline-block; will-change:transform; }

.seq{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; background:#000;
}

/* ================= 1. HERO ================= */
.hero{ height:400vh; position:relative; }   /* loop the range, then the 360 takes over */
.hero__sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
}
.hero__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 45%, transparent 35%, rgba(0,0,0,.72) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 26%, transparent 62%, rgba(0,0,0,.85) 100%);
}
/* Bottom left: the thesis. The logo lockup is gone; type carries it. */
.hero__copy{
  position:absolute; left:calc(var(--rail) + var(--pad));
  bottom:clamp(46px,7vh,74px);
  max-width:min(620px,44vw);
}
.hero__title{
  font-family:var(--display); margin:0;
  font-size:clamp(34px, 5.4vw, 78px);
  line-height:.9; letter-spacing:.005em; text-transform:uppercase;
}
.hero__sub{
  font-family:var(--label); font-weight:500; font-size:11px;
  letter-spacing:.26em; color:var(--ink-dim); margin:16px 0 0;
}
.hero__scroll{
  position:absolute; right:var(--pad); bottom:clamp(46px,7vh,74px);
  font-family:var(--label); font-size:10px; letter-spacing:.3em; color:var(--ink-dim);
  display:flex; align-items:center; gap:12px;
}
.hero__scroll span{ width:34px; height:1px; background:var(--accent); display:block; }

/* ---------------- THE RANGE ----------------
   An endless carousel. Every bottle is on screen, the active one
   forward and sharp, the rest falling back out of focus. It wraps, so
   the far edges fade out and there is no seam. Positions are computed
   from the array, so any number of flavours arranges itself. */
.range{ position:absolute; inset:0; }

/* The active flavour's colour, bloomed behind the group. A radial
   gradient, not a blurred block: a CSS filter here rasterises into a
   bounded layer and its edge shows through whenever the parent's
   opacity is mid-fade. */
.range__field{
  position:absolute; left:50%; top:44%;
  width:min(1400px,116vw); height:min(1000px,98vh);
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, var(--accent) 0%, transparent 68%);
  opacity:0; pointer-events:none; will-change:opacity;
}
.range__row{ position:absolute; inset:0; }
/* the slot carries the arrival and handover fades, the img carries the
   wrap fade, so two writers never fight over one opacity */
/* The bottle FILLS the band between the top type row and the headline,
   rather than being a fixed height. A fixed height leaves dead space
   above the caps on a short window and crowds the type on a tall one. */
.range__slot{
  position:absolute; left:50%;
  top:clamp(168px,22vh,244px);
  bottom:clamp(104px,16vh,182px);
  opacity:0;
}
.range__slot img{
  height:100%; width:auto; display:block;
  transform-origin:bottom center; cursor:pointer;
}

/* top left: position in the range, set like a page number */
.range__count{
  position:absolute; left:calc(var(--rail) + var(--pad)); top:clamp(84px,12vh,124px);
  display:flex; align-items:center; gap:12px; opacity:0;
}
.range__num{
  font-family:var(--display); font-size:clamp(26px,3vw,40px); line-height:1;
  color:var(--accent-text); font-variant-numeric:tabular-nums;
}
.range__rule{ width:clamp(20px,3vw,44px); height:1px; background:var(--rule); display:block; }
.range__total{
  font-family:var(--label); font-size:12px; letter-spacing:.2em; color:var(--ink-dim);
  font-variant-numeric:tabular-nums;
}

/* top right: set the way the bottle's own label is set */
.range__meta{
  position:absolute; right:var(--pad); top:clamp(84px,12vh,124px);
  text-align:right; pointer-events:none; opacity:0;
  max-width:min(300px,30vw);
}
.range__name{
  font-family:var(--display); margin:0;
  font-size:clamp(20px,2.6vw,36px); line-height:1;
  letter-spacing:.01em; text-transform:uppercase; color:var(--accent-text);
}
.range__kind{
  font-family:var(--body); font-style:italic; font-size:12px;
  color:var(--ink-dim); margin:7px 0 14px;
}
.range__ing{
  list-style:none; margin:0; padding:0;
  font-family:var(--label); font-weight:600; font-size:11px;
  letter-spacing:.22em; line-height:2; color:var(--ink);
}

.range__arrow{
  position:absolute; top:46%; transform:translateY(-50%);
  width:clamp(44px,4vw,58px); height:clamp(44px,4vw,58px);
  display:grid; place-items:center; cursor:pointer; touch-action:manipulation;
  background:transparent; border:1px solid var(--rule);
  border-radius:50%; color:var(--ink); opacity:0;
  transition:border-color .25s, color .25s;
}
.range__arrow:hover{ border-color:var(--accent); color:var(--accent); }
.range__arrow:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.range__arrow--prev{ left:clamp(12px,2.2vw,34px); }
.range__arrow--next{ right:clamp(12px,2.2vw,34px); }
.range__arrow svg{
  width:40%; height:40%; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:square;
}

/* centre of the top row, between the counter and the label caption:
   counter left, position centre, flavour right, then the bottles below */
.range__ticks{
  position:absolute; left:50%; transform:translateX(-50%);
  top:clamp(104px,13.6vh,142px);
  display:flex; justify-content:center; gap:7px; opacity:0;
}
/* the visible mark is a 20px hairline, but the tappable box is a full
   44px tall so it clears the minimum touch target */
.range__ticks button{
  width:32px; height:44px; padding:0; border:0; background:none;
  cursor:pointer; touch-action:manipulation; position:relative;
}
.range__ticks button::after{
  content:''; position:absolute; left:6px; right:6px; top:50%;
  height:2px; margin-top:-1px; background:#2A2A2A; transition:background-color .45s;
}
.range__ticks button.is-on::after{ background:var(--accent); }
.range__ticks button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ================= 2. PRESS ================= */
.press{ padding:clamp(90px,16vh,190px) var(--pad) clamp(90px,16vh,190px) calc(var(--rail) + var(--pad)); }
.press__inner{ max-width:1180px; margin:0 auto; }
.press__title{
  font-family:var(--display); margin:0 0 clamp(34px,5vw,60px);
  font-size:clamp(34px,7vw,104px); line-height:.94; text-transform:uppercase;
}
.press__body{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(20px,3vw,54px); max-width:920px;
}
.press__body p{ margin:0; color:#B9B7B2; font-size:clamp(15px,1.15vw,17px); line-height:1.65; }
.press__stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px; margin:clamp(46px,7vw,86px) 0 0;
  background:var(--rule); border:1px solid var(--rule);
}
.press__stats > div{ background:var(--bg-tint); padding:22px 20px; transition:background-color .1s linear; }
.press__stats dt{
  font-family:var(--label); font-weight:700; font-size:10px;
  letter-spacing:.22em; color:var(--accent-text); margin-bottom:9px;
}
.press__stats dd{ margin:0; font-size:15px; color:var(--ink); }

/* ================= 3. MACRO ================= */
.macro{ height:300vh; position:relative; }
.macro__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
.macro__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.30) 46%, transparent 72%);
}
.macro__callouts{
  position:absolute; inset:0;
  padding-left:calc(var(--rail) + var(--pad)); padding-right:var(--pad);
  display:flex; align-items:center;
}
.callout{
  position:absolute; margin:0; max-width:min(400px,42vw); opacity:0;
}
.callout h3{
  font-family:var(--display); font-size:clamp(24px,3.4vw,50px);
  margin:0 0 12px; letter-spacing:.01em; color:var(--accent-text);
}
.callout p{ margin:0; color:#C6C4BF; font-size:clamp(14px,1.05vw,16px); line-height:1.6; max-width:34ch; }

/* ================= 4. LINEUP ================= */
.lineup{ position:relative; }        /* height set from JS = 100vh * count */
.lineup__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }

.lineup__head{
  position:absolute; top:clamp(74px,11vh,104px);
  left:calc(var(--rail) + var(--pad)); right:var(--pad); z-index:3;
  display:flex; justify-content:space-between; align-items:baseline;
}
.lineup__head .eyebrow{ margin:0; }
.lineup__count{
  font-family:var(--label); font-weight:700; font-size:11px;
  letter-spacing:.22em; color:var(--ink-dim); margin:0;
}
.lineup__count span:first-child{ color:var(--accent-text); }
.lineup__count i{ font-style:normal; margin:0 5px; }

.lineup__stage{ position:absolute; inset:0; }

.panel{
  position:absolute; inset:0;
  display:grid; align-items:stretch;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(20px,4vw,70px);
  padding:clamp(96px,13vh,132px) var(--pad) clamp(48px,7vh,84px) calc(var(--rail) + var(--pad));
  opacity:0; pointer-events:none;
}
.panel.is-active{ pointer-events:auto; }

/* bottle side */
.panel__shot{
  position:relative; min-height:0; min-width:0;
  display:flex; align-items:flex-end; justify-content:center;
}
.panel__glow{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:150%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle closest-side, var(--accent) 0%, transparent 72%);
  opacity:.22;
}
/* the bottle fills the column without ever overflowing it */
.panel__bottle{
  position:relative; width:100%; height:82%;
  object-fit:contain; object-position:center bottom;
}
/* mirrored plinth reflection, built from the same cutout */
.panel__reflect{
  position:absolute; bottom:0; left:0; width:100%; height:18%;
  transform:scaleY(-1);
  object-fit:contain; object-position:center top;
  opacity:.20; pointer-events:none;
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 88%);
  mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 88%);
}

/* copy side — mirrors the physical label hierarchy */
.panel__copy{ max-width:520px; align-self:center; min-height:0; }
.panel__name{
  font-family:var(--display);
  font-size:clamp(28px,4.1vw,62px); line-height:.92;
  margin:0 0 6px; text-transform:uppercase; color:var(--accent);
}
.panel__kind{
  font-family:var(--label); font-weight:400; font-size:clamp(12px,1vw,16px);
  letter-spacing:.02em; color:var(--ink-dim); margin:0 0 clamp(16px,2.2vw,26px);
}
.panel__group + .panel__group{ margin-top:clamp(14px,2vw,24px); }
.panel__gtitle{
  font-family:var(--label); font-weight:600; font-size:10px;
  letter-spacing:.26em; color:var(--ink-dim);
  margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--rule);
}
.panel__list{ list-style:none; margin:0; padding:0; }
.panel__list li{
  font-family:var(--label); font-weight:700;
  font-size:clamp(12px,1.15vw,17px); letter-spacing:.05em;
  line-height:1.42; text-transform:uppercase; color:var(--ink);
}
.panel__list--benefit li{ color:var(--accent-text); }
.panel__meta{
  margin:clamp(16px,2.2vw,26px) 0 0; padding-top:12px; border-top:1px solid var(--rule);
  font-family:var(--label); font-size:11px; letter-spacing:.2em; color:var(--ink-dim);
  display:flex; gap:18px; flex-wrap:wrap;
}

/* progress ticks */
.lineup__ticks{
  position:absolute; right:var(--pad); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:9px; z-index:3;
}
.tick{ width:20px; height:2px; background:#2A2A2A; transition:background-color .4s, width .4s; }
.tick.is-on{ background:var(--accent); width:34px; }

/* ================= 5. SHOTS — own product tier ================= */
.shots{ height:250vh; position:relative; }
.shots__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
.shots__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.35) 52%, transparent 78%);
}
.shots__copy{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding-left:calc(var(--rail) + var(--pad)); padding-right:var(--pad);
  max-width:min(680px,62vw);
}
.shots__tier{
  font-family:var(--label); font-weight:600; font-size:11px; letter-spacing:.28em;
  color:var(--accent-text); margin:0 0 18px;
}
.shots__name{
  font-family:var(--display); font-size:clamp(32px,5.6vw,88px); line-height:.92;
  margin:0 0 10px; text-transform:uppercase; color:var(--accent);
}
.shots__kind{
  font-family:var(--label); font-size:clamp(13px,1.1vw,17px); color:var(--ink-dim);
  margin:0 0 clamp(22px,3vw,34px);
}
.shots__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(18px,3vw,40px); }

/* ================= 6. ASSEMBLY ================= */
.assembly{ height:300vh; position:relative; }
.assembly__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
.assembly__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 30%, transparent 55%, rgba(0,0,0,.9) 100%);
}
.assembly__copy{
  position:absolute; left:calc(var(--rail) + var(--pad)); right:var(--pad);
  bottom:clamp(64px,11vh,120px);
}
.assembly__title{
  font-family:var(--display); margin:0;
  font-size:clamp(30px,6.6vw,102px); line-height:.94; text-transform:uppercase;
}
.assembly__sub{
  font-family:var(--label); font-size:clamp(13px,1.2vw,18px);
  letter-spacing:.04em; color:var(--ink-dim); margin:18px 0 0;
}

/* ================= 7. ORDER ================= */
.order{
  padding:clamp(90px,16vh,190px) var(--pad) clamp(80px,12vh,140px) calc(var(--rail) + var(--pad));
  border-top:1px solid var(--rule);
}
.order__inner{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,96px); align-items:start;
}
.order__title{
  font-family:var(--display); margin:0 0 26px;
  font-size:clamp(32px,5.6vw,86px); line-height:.94; text-transform:uppercase;
}
.order__note{ color:#B9B7B2; max-width:44ch; margin:0 0 30px; line-height:1.65; }
.order__where{
  font-style:normal; display:flex; flex-direction:column; gap:5px;
  font-family:var(--label); font-size:13px; letter-spacing:.05em; color:var(--ink-dim);
}
.order__where a{ color:var(--accent-text); text-decoration:none; }
.order__where a:hover{ text-decoration:underline; }

/* form */
.form{ display:flex; flex-direction:column; gap:22px; }
.form__hp{
  position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.field{ display:flex; flex-direction:column; gap:9px; }
.field label{
  font-family:var(--label); font-weight:700; font-size:10px;
  letter-spacing:.24em; color:var(--ink-dim);
}
.field label i{ color:var(--accent-text); font-style:normal; }
.field input, .field textarea{
  width:100%; background:transparent; color:var(--ink);
  border:0; border-bottom:1px solid #2C2C2C;
  padding:12px 0; font-family:var(--body); font-size:16px;
  border-radius:0; transition:border-color .3s;
}
.field textarea{ resize:vertical; min-height:104px; line-height:1.55; }
.field input::placeholder, .field textarea::placeholder{ color:#565450; }
.field input:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--accent); }
.field.is-bad input, .field.is-bad textarea{ border-bottom-color:#E0523C; }
.field__err{
  margin:0; min-height:14px; font-family:var(--label); font-size:11px;
  letter-spacing:.06em; color:#E0523C;
}
.btn{
  align-self:flex-start; margin-top:6px;
  font-family:var(--label); font-weight:700; font-size:12px; letter-spacing:.24em;
  background:var(--accent); color:#000; border:0;
  padding:16px 34px; cursor:pointer;
  transition:background-color .4s linear, opacity .3s;
}
.btn:hover{ opacity:.86; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.form__status{
  margin:0; min-height:20px; font-family:var(--label); font-size:13px; letter-spacing:.04em;
}
.form__status.is-ok{ color:var(--accent-text); }
.form__status.is-bad{ color:#E0523C; }

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--rule);
  padding:44px var(--pad) 52px calc(var(--rail) + var(--pad));
  display:flex; flex-direction:column; gap:9px;
}
.foot__logo{ width:clamp(58px,7vw,84px); height:auto; margin-bottom:6px; }
.foot p{ margin:0; font-family:var(--label); font-size:12px; letter-spacing:.1em; color:var(--ink-dim); }
.foot__fine{ color:#5C5A56 !important; }

/* ==================================================================
   MOBILE — everything degrades to a stacked vertical layout
   ================================================================== */
@media (max-width:900px){
  .order__inner{ grid-template-columns:1fr; }
}

@media (max-width:768px){
  :root{ --rail:0px; }

  .rail{ display:none; }
  .nav{ left:0; padding-left:var(--pad); }
  .nav__links{ gap:14px; }
  .nav__links a:not(.nav__cta){ display:none; }

  .hero{ height:330vh; }
  /* on a phone the four corners collapse to a single stack:
     counter and label caption above, bottles, ticks, then the headline */
  .hero__copy{ left:var(--pad); right:var(--pad); bottom:34px; max-width:none; }
  .hero__title{ font-size:clamp(30px,9vw,46px); }
  .hero__sub{ margin-top:10px; font-size:10px; letter-spacing:.2em; }
  .hero__scroll{ display:none; }

  /* A phone cannot hold four corners of type AND nine bottles, so the
     hero becomes one centred column: counter, flavour, bottle, ticks,
     headline. The carousel shows the one in focus with its neighbours
     running off both edges, rather than nine slivers. */
  .range__count{ left:0; right:0; top:8.5vh; justify-content:center; }
  .range__num{ font-size:24px; }

  .range__meta{
    left:var(--pad); right:var(--pad); top:13.5vh;
    text-align:center; max-width:none;
  }
  .range__name{ font-size:clamp(19px,5.6vw,28px); }
  .range__kind{ margin:4px 0 7px; font-size:11px; }
  /* the label's stacked list becomes one wrapped line: seven ingredients
     stacked would eat half the screen */
  .range__ing{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:0 12px; font-size:10px; letter-spacing:.16em; line-height:1.7;
  }

  .range__slot{ top:31vh; bottom:25vh; }
  .range__slot img{ height:100%; }

  .range__arrow{ top:52%; bottom:auto; transform:translateY(-50%); width:44px; height:44px; }
  .range__arrow--prev{ left:10px; }
  .range__arrow--next{ right:10px; }

  /* nine targets cannot all be 44px wide on a 375px screen, so the
     height carries the touch target and the width narrows */
  .range__ticks{ top:auto; bottom:18.5vh; gap:5px; }
  .range__ticks button{ width:30px; }
  .range__ticks button::after{ left:5px; right:5px; }

  .press, .order, .foot{ padding-left:var(--pad); }

  .macro{ height:260vh; }
  .macro__scrim{ background:linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.9) 100%); }
  .macro__callouts{ padding-left:var(--pad); align-items:flex-end; padding-bottom:14vh; }
  .callout{ max-width:none; right:var(--pad); }

  /* LINEUP: bottle above, label copy stacked beneath */
  .panel{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) auto;
    gap:16px;
    padding:clamp(96px,14vh,120px) var(--pad) 40px;
    align-items:stretch;
  }
  .panel__shot{ min-height:0; align-items:center; }
  .panel__bottle{ height:100%; }
  .panel__reflect{ display:none; }
  .panel__copy{ max-width:none; }
  .panel__name{ font-size:clamp(26px,8vw,44px); }
  .panel__groups{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .panel__group + .panel__group{ margin-top:0; }
  .panel__meta{ font-size:10px; gap:12px; }
  .lineup__ticks{ display:none; }
  .lineup__head{ top:clamp(64px,9vh,84px); left:var(--pad); }

  .shots{ height:220vh; }
  .shots__copy{ max-width:none; padding-left:var(--pad); justify-content:flex-end; padding-bottom:12vh; }
  .shots__scrim{ background:linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.92) 100%); }
  .shots__grid{ grid-template-columns:1fr 1fr; gap:16px; }

  .assembly{ height:250vh; }
  .assembly__copy{ left:var(--pad); }
}

@media (max-width:420px){
  .panel__groups{ grid-template-columns:1fr; }
  .shots__grid{ grid-template-columns:1fr; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .hero{ height:100vh; }
  .macro,.shots,.assembly{ height:100vh; }
}