/* Hesper · cold-pressed orange juice landing page */

/* Fallback faces sized to match Figtree and Bricolage Grotesque, so text doesn't reflow
   when the web fonts arrive after the first paint. Bricolage changes width with size (optical
   sizing), so each width is tuned to the heading size it's used at: phone set first, desktop set (D) below. */
@font-face { font-family: 'Figtree Fallback'; font-weight: 1 549; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('LiberationSans'), local('Arimo'), local('Roboto'), local('Roboto-Regular'), local('Helvetica'); size-adjust: 100.1%; ascent-override: 94.9%; descent-override: 25.0%; line-gap-override: 0%; }
@font-face { font-family: 'Figtree Fallback'; font-weight: 550 1000; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Bold'); size-adjust: 95.5%; ascent-override: 99.5%; descent-override: 26.2%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Fallback'; font-weight: 1 1000; font-stretch: 50% 76.4%; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Bold'); size-adjust: 73.5%; ascent-override: 126.5%; descent-override: 36.7%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Fallback'; font-weight: 1 1000; font-stretch: 76.5% 79%; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Bold'); size-adjust: 78.2%; ascent-override: 118.9%; descent-override: 34.5%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Fallback'; font-weight: 1 1000; font-stretch: 79.1% 82.4%; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Bold'); size-adjust: 81.8%; ascent-override: 113.7%; descent-override: 33.0%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Fallback'; font-weight: 1 1000; font-stretch: 82.5% 92.4%; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Bold'); size-adjust: 87.2%; ascent-override: 106.7%; descent-override: 31.0%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Fallback'; font-weight: 1 1000; font-stretch: 92.5% 200%; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Bold'); size-adjust: 101.8%; ascent-override: 91.4%; descent-override: 26.5%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Fallback D'; font-weight: 1 1000; font-stretch: 50% 76.4%; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Bold'); size-adjust: 71.3%; ascent-override: 130.4%; descent-override: 37.9%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Fallback D'; font-weight: 1 1000; font-stretch: 76.5% 79%; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Bold'); size-adjust: 72.4%; ascent-override: 128.5%; descent-override: 37.3%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Fallback D'; font-weight: 1 1000; font-stretch: 79.1% 82.4%; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Bold'); size-adjust: 79.3%; ascent-override: 117.3%; descent-override: 34.0%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Fallback D'; font-weight: 1 1000; font-stretch: 82.5% 92.4%; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Bold'); size-adjust: 87.1%; ascent-override: 106.8%; descent-override: 31.0%; line-gap-override: 0%; }
@font-face { font-family: 'Bricolage Fallback D'; font-weight: 1 1000; font-stretch: 92.5% 200%; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Arimo Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Helvetica Bold'); size-adjust: 101.8%; ascent-override: 91.4%; descent-override: 26.5%; line-gap-override: 0%; }

:root {
  --ink: #12382B;
  --ink-2: #3E5248;
  --ink-3: #4A5E55;
  --muted: #A7B2A4;
  --line: #C8CFC4;
  --fruit: #FF6B1A;
  --fruit-hover: #FF8236;
  --pulp: #D9480F;
  --pulp-ink: #C2410C;
  --pith: #FFF9EF;
  --leaf: #DCE6D2;
  --display: 'Bricolage Grotesque', 'Bricolage Fallback', 'Arial Narrow', sans-serif;
  --body: 'Figtree', 'Figtree Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 3.4vw, 48px);
  --header-h: 96px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 1024px) {
  :root { --display: 'Bricolage Grotesque', 'Bricolage Fallback D', 'Arial Narrow', sans-serif; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pith) var(--grain);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, figure, dl, dd { margin: 0; }
:focus-visible { outline: 3px solid var(--fruit); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 60; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--pith); font-weight: 700; text-decoration: none; transition: top .2s; }
.skip:focus { top: 16px; }
html.menu-open { overflow: hidden; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- shared ---------- */
.eyebrow { font: 700 13px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--pulp-ink); }
.sec-head { text-align: center; }
.h-sec { margin-top: 14px; font: 800 clamp(34px, 4.2vw, 60px)/1 var(--display); font-stretch: 80%; letter-spacing: -.03em; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border: 0; border-radius: 999px;
  background: var(--fruit); color: var(--ink);
  font: 700 15px/1 var(--body); text-decoration: none; cursor: pointer;
  transition: background-color .2s, transform .2s var(--ease-out);
}
.btn svg { transition: transform .25s var(--ease-out); }
.btn:hover { background: var(--fruit-hover); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn-lg { min-height: 60px; padding: 0 32px; gap: 12px; font-size: 18px; }

.pills { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
.pill { display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border: 1.5px solid var(--ink); border-radius: 999px; font: 600 14px/1 var(--body); }
.pills-light .pill { padding: 10px 16px; border-color: #fff; }

u { text-decoration: underline; text-decoration-color: var(--fruit); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h); padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  color: var(--ink);
  transition: transform .5s var(--ease-out), background-color .35s, box-shadow .35s, height .35s, color .35s;
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-solid {
  height: 76px;
  background: rgba(255, 249, 239, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(18, 56, 43, .08);
}
.menu-btn {
  justify-self: start; display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
}
.menu-icon {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid currentColor;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: background-color .25s;
}
.menu-icon span { width: 16px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease-out); }
.menu-btn:hover .menu-icon { background: rgba(18, 56, 43, .08); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand span { font: 800 26px/1 var(--display); font-stretch: 85%; letter-spacing: -.02em; }
.header-cta { justify-self: end; }

/* menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 45;
  display: grid; align-content: center; gap: 48px;
  padding: 120px var(--gutter) 40px;
  background: var(--ink) var(--grain); color: var(--pith);
  visibility: hidden;
  clip-path: circle(0% at 70px 48px);
  transition: clip-path .7s cubic-bezier(.7, 0, .2, 1), visibility 0s .7s;
}
.menu-list { list-style: none; margin: 0 auto; padding: 0; width: min(1100px, 100%); counter-reset: m; }
.menu-list li { opacity: 0; transform: translateY(30px); transition: opacity .3s, transform .3s; }
.menu-list a {
  display: flex; align-items: baseline; gap: 20px; padding: 8px 0;
  border-bottom: 1px solid rgba(255, 249, 239, .14);
  font: 800 clamp(36px, min(6.4vw, 8svh), 92px)/1 var(--display); font-stretch: 75%; letter-spacing: -.035em;
  color: var(--pith); text-decoration: none; transition: color .2s, padding-left .3s var(--ease-out);
}
.menu-list a::before { counter-increment: m; content: counter(m, decimal-leading-zero); font: 700 14px/1 var(--body); letter-spacing: .1em; color: var(--fruit); }
.menu-list a:hover { color: var(--fruit); padding-left: 12px; }
.menu-foot { width: min(1100px, 100%); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 500 16px/1.4 var(--body); color: #D6E0D3; }
.menu-foot a { color: var(--pith); font-weight: 700; }

.menu-open .menu { visibility: visible; clip-path: circle(150% at 70px 48px); transition: clip-path .8s cubic-bezier(.7, 0, .2, 1); }
.menu-open .menu-list li { opacity: 1; transform: none; transition: opacity .5s calc(.25s + var(--i) * .05s), transform .7s var(--ease-out) calc(.25s + var(--i) * .05s); }
.menu-open .site-header { color: var(--pith); background: transparent; box-shadow: none; transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.menu-open .menu-icon span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-open .menu-icon span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.menu-open .menu-btn:hover .menu-icon { background: rgba(255, 249, 239, .1); }

/* story rail */
.rail { position: fixed; right: 44px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 22px; }
.rail a { display: flex; align-items: center; gap: 10px; font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; transition: color .3s; }
.rail i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); transition: background-color .3s, border-color .3s, box-shadow .3s; }
.rail a.is-done i { background: var(--ink); }
.rail a.is-active { color: var(--ink); }
.rail a.is-active i { background: var(--fruit); border-color: var(--fruit); box-shadow: 0 0 0 4px rgba(255, 107, 26, .25); }
.rail a:hover { color: var(--ink); }
.rail span { transition: opacity .3s, transform .3s var(--ease-out); }
.rail.is-compact span { opacity: 0; transform: translateX(8px); }
.rail.is-compact:hover span { opacity: 1; transform: none; }
.rail.on-dark a { color: rgba(255, 249, 239, .7); }
.rail.on-dark a.is-active, .rail.on-dark a:hover { color: var(--pith); }
.rail.on-dark i { border-color: var(--pith); }
.rail.on-dark a.is-done i { background: var(--pith); }
.rail.on-dark a.is-active i { border-color: var(--fruit); }
.menu-open .rail { opacity: 0; pointer-events: none; }

/* line-drawing companion: sits behind the cream sections */
.companion { position: fixed; right: 7vw; top: 58%; z-index: 0; width: 300px; height: 300px; margin-top: -150px; opacity: 0; visibility: hidden; pointer-events: none; }
.companion svg { width: 100%; height: 100%; transform: rotate(24deg); }

main, .site-footer { position: relative; }
/* not `main > section`: pinned sections get wrapped in a .pin-spacer */
main section { position: relative; z-index: 1; }

/* ---------- 01/02 scene ---------- */
.scene {
  --w: min(20.8vw, 33.3svh);
  --os: 1.12;  /* orange width, in units of the word size */
  --sq: .907;  /* where "squeezed." starts below "Just" */
  --fc: .86;   /* where the fruit's centre sits below "Just" */
  --wt: max(88px, calc((100svh - var(--w) * (var(--sq) + .8) - 207px) * .53));
  height: 100svh; min-height: 560px; overflow: hidden;
  background: linear-gradient(180deg, #FFF6DC 0%, #FFE6B8 52%, #FFD08F 100%);
}
.scene-valley { position: absolute; left: -3%; top: -2%; width: 106%; max-width: none; height: 118%; object-fit: cover; opacity: 0; }
.scene-warm { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgba(255, 222, 160, .55) 0%, rgba(255, 222, 160, .15) 45%, rgba(255, 222, 160, 0) 70%); }
.scene-hills {
  position: absolute; left: 0; bottom: -16.7%; width: 100%; height: 83%; object-fit: cover;
  mix-blend-mode: multiply; opacity: .85;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 25%, #000 62%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 25%, #000 62%);
}
.hero-title { position: absolute; inset: 0; pointer-events: none; font: 800 var(--w)/.8 var(--display); font-stretch: 75%; letter-spacing: -.045em; color: var(--ink); }
.w { position: absolute; left: 0; right: 0; text-align: center; white-space: nowrap; }
.w-just { top: var(--wt); z-index: 2; }
.w-squeezed { top: calc(var(--wt) + var(--w) * var(--sq)); z-index: 5; color: transparent; -webkit-text-stroke: clamp(1.5px, calc(var(--w) * .0083), 3px) var(--ink); }
.ch { display: inline-block; }
.scene-mist { position: absolute; left: 0; right: 0; top: 52%; height: 34%; z-index: 3; opacity: 0; background: linear-gradient(180deg, rgba(255, 246, 228, 0) 0%, rgba(255, 246, 228, .88) 50%, rgba(255, 246, 228, 0) 100%); }

.orange {
  position: absolute; z-index: 4;
  width: calc(var(--w) * var(--os));
  left: calc(50% - var(--w) * var(--os) * .381);
  top: calc(var(--wt) + var(--w) * var(--fc) - var(--w) * var(--os) * .7024);
  filter: drop-shadow(0 34px 40px rgba(130, 55, 0, .3));
  will-change: transform;
}
.orange, .orange-intro, .orange-spin, .orange-sway { transform-origin: 38.1% 64.8%; }
.orange-spin { transform: rotate(-10deg); }
.orange img { width: 100%; }

.scene-foliage {
  position: absolute; left: 0; top: 0; z-index: 6;
  width: 100%; height: max(112%, 66.7vw); max-width: none;
  object-fit: cover; object-position: 50% 0;
  transform: translateY(110vh);
  filter: drop-shadow(0 -10px 24px rgba(20, 40, 20, .25));
}
.leaf { position: absolute; pointer-events: none; max-width: none; }
.lf-1 { left: 16.4vw; top: 29.8%; width: max(36px, 4.44vw); filter: blur(2.5px); opacity: .9; z-index: 1; }
.lf-2 { left: 77.8vw; top: 18.9%; width: max(60px, 7.6vw); transform: rotate(-150deg); z-index: 1; }
.lf-3 { left: 22.9vw; top: 60%; width: max(48px, 5.8vw); transform: rotate(34deg); filter: blur(1px); z-index: 3; }
.lf-4 { left: 2.8vw; top: 72.2%; width: max(150px, 20.8vw); transform: rotate(-28deg); filter: blur(8px); z-index: 7; }
.lf-5 { left: 84vw; top: 66.7%; width: max(110px, 15.3vw); transform: rotate(140deg); filter: blur(6px); z-index: 7; }
.lf-6 { left: 20.8vw; top: 92%; width: max(70px, 8.3vw); transform: rotate(32deg); z-index: 7; }
.lf-7 { left: 75.7vw; top: 108%; width: max(130px, 18vw); transform: rotate(-150deg); filter: blur(6px); z-index: 7; }

.cap { position: absolute; z-index: 8; opacity: 0; visibility: hidden; color: var(--ink); }
.cap-a { left: 4.4vw; top: 21.8%; width: 360px; }
.cap-time { font: 800 clamp(64px, 8.3vw, 120px)/.85 var(--display); font-stretch: 75%; letter-spacing: -.03em; }
.cap-text { margin-top: 18px; font: 600 18px/1.4 var(--body); }
.cap-b { right: 8.3vw; top: 25.5%; width: 300px; text-align: right; }
.cap-eyebrow { font: 700 13px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.cap-big { margin-top: 14px; font: 800 clamp(30px, 3.05vw, 44px)/.95 var(--display); font-stretch: 80%; letter-spacing: -.02em; }

.hero-foot { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.hero-foot > * { pointer-events: auto; }
.hero-chips {
  position: absolute; left: 0; right: 0; z-index: 8;
  top: calc(var(--wt) + var(--w) * (var(--sq) + .8) + 56px);
  margin: 0; padding: 0 16px; list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px;
  font: 700 13px/1 var(--body); letter-spacing: .16em; text-transform: uppercase;
}
.hero-chips .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fruit); }
.hero-cue {
  position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content; z-index: 8;
  top: calc(var(--wt) + var(--w) * (var(--sq) + .8) + 134px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font: 600 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
}
.hero-cue svg { animation: cue 2.2s var(--ease-out) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }

/* ---------- 03 split ---------- */
.split {
  z-index: 2;
  min-height: 100svh;
  padding: 72px var(--gutter) 48px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: linear-gradient(180deg, var(--leaf) 0, rgba(220, 230, 210, 0) 220px);
}
.wave-top { position: absolute; left: 0; top: -59px; width: 100%; height: 60px; }
.split-fig { position: relative; width: clamp(200px, 20.5vw, 295px); aspect-ratio: 295 / 320; }
.split-halves, .split-whole { position: absolute; inset: 0; width: 100%; }
.split-halves { transform: rotate(-8deg); filter: drop-shadow(0 26px 30px rgba(150, 60, 0, .25)); }
.split-whole { opacity: 0; filter: drop-shadow(0 30px 34px rgba(130, 55, 0, .28)); }
.split-title { margin-top: 12px; font: 800 clamp(46px, 7.2vw, 104px)/.9 var(--display); font-stretch: 78%; letter-spacing: -.035em; }
.split-title em, .pour-text em { font-style: normal; color: var(--pulp); }
.split-copy { max-width: 640px; margin-top: 44px; }
.lead { font: 700 22px/1.45 var(--body); }
.split-copy p + p { margin-top: 16px; font: 400 18px/1.6 var(--body); color: var(--ink-2); }
.split .pills { margin-top: auto; padding-top: 44px; }

/* ---------- 04 branch to bottle ---------- */
.branch {
  --stack: clamp(220px, min(44svh, 78vw), 400px);
  height: 100svh; min-height: 640px;
  padding: 104px var(--gutter) 32px;
  display: flex; flex-direction: column; align-items: center;
}
.stack { position: relative; width: var(--stack); height: var(--stack); margin-top: clamp(24px, 4.4svh, 40px); flex: none; }
.stack-back, .stack-top { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; }
.stack-back img, .stage { width: 100%; height: 100%; object-fit: cover; }
.stack-back img { filter: brightness(.85); }
.b1 { transform: rotate(-5deg); box-shadow: 0 20px 40px rgba(40, 30, 10, .18); }
.b2 { transform: rotate(3.5deg); }
.stack-top { box-shadow: 0 24px 50px rgba(40, 30, 10, .25); background: #D9C9B2; }
.stage { position: absolute; inset: 0; }
.stack-divider { position: absolute; top: 0; bottom: 0; left: 100%; z-index: 6; width: 3px; margin-left: -1.5px; background: var(--pith); box-shadow: 0 0 12px rgba(0, 0, 0, .35); opacity: 0; }
.stack-cap { position: absolute; left: 16px; bottom: 16px; z-index: 7; padding: 8px 12px; white-space: nowrap; border-radius: 999px; background: var(--pith); font: 700 12px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }

.track { width: min(760px, 100% - 90px); margin-top: clamp(28px, 6svh, 56px); }
.track-bar { position: relative; height: 40px; }
.track-line { position: absolute; left: 0; right: 0; top: 19px; height: 2px; background: var(--line); }
.track-fill { position: absolute; left: 0; top: 18px; height: 4px; width: 0; border-radius: 2px; background: var(--fruit); }
.track-dot { position: absolute; top: 14px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--pith); border: 2px solid var(--muted); transition: background-color .25s, border-color .25s; }
.track-dot.is-reached { background: var(--fruit); border-color: var(--fruit); }
.track-handle { position: absolute; left: 0; top: -6px; z-index: 2; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; background: var(--ink); color: var(--pith); display: flex; align-items: center; justify-content: center; font: 800 18px/1 var(--display); box-shadow: 0 0 0 6px rgba(255, 107, 26, .25); }
.track-labels { position: relative; height: 44px; margin: 18px 0 0; padding: 0; list-style: none; font: 600 14px/1.25 var(--body); color: var(--ink-3); }
.track-labels li { position: absolute; transform: translateX(-50%); text-align: center; white-space: nowrap; transition: color .25s; }
.track-labels b { display: block; font-weight: 800; }
.track-labels li.is-done { color: var(--ink); }
.track-labels li.is-current { color: var(--pulp-ink); }

.never { margin-top: auto; padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; }
.never-title { font: 700 13px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.never ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font: 500 15px/1 var(--body); color: var(--ink-2); }
.never li { display: flex; align-items: center; gap: 7px; }

/* ---------- 05 nothing but oranges ---------- */
.oranges {
  --pt: 112px;
  --w: min(23.6vw, 440px);
  --nb: clamp(34px, 4.44vw, 64px);
  overflow: hidden; text-align: center;
  padding-top: var(--pt);
  background: linear-gradient(180deg, #FFF9EF 0%, #FFF0D2 45%, #FFE6BC 100%);
}
.o-hills {
  position: absolute; left: 0; top: 120px; width: 100%; height: 760px; object-fit: cover;
  mix-blend-mode: multiply; opacity: .7;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
}
.oranges-head { position: relative; z-index: 3; }
.oranges h2 { margin-top: 15px; }
.o-nb { display: block; font: 800 var(--nb)/1 var(--display); font-stretch: 80%; letter-spacing: -.03em; }
.o-word { display: block; margin-top: -4px; font: 800 var(--w)/.8 var(--display); font-stretch: 75%; letter-spacing: -.05em; color: var(--pulp); }
.o-art { position: absolute; left: 0; right: 0; top: calc(var(--pt) + 24px + var(--nb)); height: 0; z-index: 5; }
.o-tree { position: absolute; }
.o-tree img { width: 100%; filter: drop-shadow(0 10px 20px rgba(20, 40, 20, .2)); }
.o-tree .flip { transform: scaleX(-1); }
.t1 { left: -4.9vw; top: calc(var(--w) * .38); width: calc(var(--w) * 1.235); }
.t2 { left: 20.1vw; top: calc(var(--w) * .56); width: calc(var(--w) * 1.06); }
.t3 { left: 50vw; top: calc(var(--w) * .44); width: calc(var(--w) * 1.18); }
.t4 { left: 73.6vw; top: calc(var(--w) * .35); width: calc(var(--w) * 1.29); }
.o-foliage { position: absolute; left: 0; top: calc(var(--w) * .84); width: 100%; max-width: none; }
.o-dark { position: absolute; left: 0; right: 0; top: calc(var(--w) * 1.18); height: 2400px; background: linear-gradient(180deg, rgba(18, 56, 43, 0) 0, rgba(18, 56, 43, .8) 96px, rgba(18, 56, 43, .9) 300px); }
.oranges-copy { position: relative; z-index: 8; max-width: 800px; margin: calc(var(--w) * .55) auto 0; padding: 0 var(--gutter) 128px; color: #fff; }
.oranges-copy .lead { font-size: 24px; line-height: 1.4; }
.oranges-copy p + p { margin-top: 14px; font: 400 18px/1.55 var(--body); color: #E8F0E2; }
.oranges-copy .pills { margin-top: 24px; }
.wave-bottom { position: absolute; left: 0; bottom: -1px; z-index: 9; width: 100%; height: 60px; }

/* ---------- 06 cold-pressed ---------- */
.pressed {
  --pw: min(18.75vw, 30svh);
  --fig: min(23.6vw, 37.8svh);
  height: 100svh; min-height: 640px; overflow: hidden;
}
.pw { position: absolute; z-index: 2; display: grid; font: 800 var(--pw)/.8 var(--display); font-stretch: 75%; letter-spacing: -.045em; }
.pw span { grid-area: 1 / 1; white-space: nowrap; }
.pw span + span { visibility: hidden; }
.pw-out { left: 3.9vw; top: 11.6%; justify-items: start; color: transparent; -webkit-text-stroke: 2px var(--ink); }
.pw-solid { right: 2.8vw; top: 44.4%; justify-items: end; color: var(--pulp); }
.press-fig { position: absolute; z-index: 3; left: calc(50.7vw - var(--fig) / 2); top: calc(37.8% - var(--fig) / 2); width: var(--fig); height: var(--fig); }
.press-shadow { position: absolute; inset: 0; filter: drop-shadow(0 30px 34px rgba(130, 55, 0, .28)); }
.press-fruit { position: absolute; inset: 0; transform: rotate(-12deg); }
.pf-dome, .pf-face { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.pf-dome { clip-path: inset(50% 0 0 0); }
.pf-face { transform: scaleY(.4); }
.press-arrows { position: absolute; left: -76.47%; top: -2.94%; width: 241.2%; max-width: none; height: 129.4%; overflow: visible; pointer-events: none; }
.press-arrows .heat { animation: march 1.2s linear infinite; }
@keyframes march { to { stroke-dashoffset: -22; } }
.badge {
  position: absolute; z-index: 2;
  width: max(36px, calc(var(--fig) * .141)); height: max(36px, calc(var(--fig) * .141));
  border-radius: 50%; background: var(--fruit);
  display: flex; align-items: center; justify-content: center;
  font: 800 clamp(14px, calc(var(--fig) * .056), 20px)/1 var(--display);
}
.badge-heat { background: var(--pith); border: 1.5px solid var(--ink); }
.b-c { left: 2.35%; top: 12.9%; }
.b-k { left: 94.7%; top: 10.6%; }
.b-b9 { left: 109.4%; top: 81.8%; }
.b-h1 { left: -67.6%; top: 108.2%; }
.b-h2 { left: 147%; top: 12.9%; }
.press-copy { position: absolute; left: 0; right: 0; top: 73.8%; z-index: 6; width: min(700px, 100% - 32px); margin: 0 auto; display: grid; text-align: center; }
.press-copy p { grid-area: 1 / 1; font: 500 20px/1.6 var(--body); }
.press-copy p + p { visibility: hidden; }
.press-steps { position: absolute; left: 0; right: 0; bottom: 44px; z-index: 6; margin: 0; padding: 0 16px; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; font: 600 14px/1 var(--body); }
.press-steps li { display: flex; align-items: center; gap: 10px; color: var(--ink-3); transition: color .3s; }
.press-steps b { font-weight: 800; transition: color .3s; }
.press-steps i { width: 0; height: 3px; border-radius: 2px; background: var(--fruit); transition: width .45s var(--ease-out); }
.press-steps li.is-on { color: var(--ink); }
.press-steps li.is-on b { color: var(--pulp-ink); }
.press-steps li.is-on i { width: 48px; }

/* ---------- 07 pour ---------- */
.pour { padding: 104px var(--gutter) 120px; }
.pour-media { position: relative; max-width: 1340px; margin: 0 auto; }
.pour-crate { position: relative; aspect-ratio: 1340 / 430; overflow: hidden; border-radius: 4px; }
.pour-crate img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; object-position: 50% 58%; }
.pour-glass { position: relative; z-index: 3; width: min(560px, 78%); aspect-ratio: 560 / 350; margin: -15.2% auto 0; overflow: hidden; border-radius: 4px; background: #fff; box-shadow: 0 30px 60px rgba(60, 30, 0, .22); }
.pour-glass img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.pour-text { position: relative; z-index: 4; max-width: 1340px; margin: 36px auto 0; display: grid; grid-template-columns: 1fr min(560px, 78%) 1fr; }
.pour-text h2 { grid-column: 2; font: 800 clamp(38px, 3.9vw, 56px)/.98 var(--display); font-stretch: 80%; letter-spacing: -.03em; }
.pour-text p { grid-column: 3; max-width: 380px; padding: 6px 0 0 40px; font: 400 17px/1.6 var(--body); color: var(--ink-2); }

/* ---------- 08 steps ---------- */
.steps { padding: 112px var(--gutter) 72px; text-align: center; }
.steps-body { --fill: 0; position: relative; width: min(1080px, 100%); margin: 48px auto 0; }
.steps-line { position: absolute; left: 16.667%; right: 16.667%; top: 21px; height: 2px; background: var(--line); }
.steps-fill { position: absolute; left: 0; top: -2px; width: 100%; height: 6px; border-radius: 3px; background: var(--fruit); transform-origin: 0 50%; transform: scaleX(var(--fill)); }
.steps-drop { position: absolute; top: -11px; left: calc(var(--fill) * 100%); width: 20px; height: 26px; margin-left: -10px; }
.steps-list { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.step { --on: 1; display: flex; flex-direction: column; align-items: center; }
.step-n {
  position: relative; isolation: isolate; overflow: hidden;
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: var(--pith);
  display: flex; align-items: center; justify-content: center;
  font: 800 18px/1 var(--display);
  color: color-mix(in srgb, var(--pith) calc(var(--on) * 100%), var(--ink));
}
.step-n::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); opacity: var(--on); }
.js .step { --on: 0; }
.step img {
  margin-top: 22px; width: min(280px, 100%); aspect-ratio: 280 / 214; object-fit: cover; border-radius: 6px;
  opacity: calc(.55 + .45 * var(--on));
  filter: grayscale(calc(.5 - .5 * var(--on)));
  box-shadow: 0 18px 30px rgba(40, 30, 10, calc(.16 * var(--on)));
}
.step h3 { margin-top: 18px; font: 800 32px/1 var(--display); font-stretch: 80%; letter-spacing: -.02em; }
.step p { max-width: 280px; margin: 12px auto 0; font: 400 16px/1.55 var(--body); color: var(--ink-2); }
.step h3, .step p { opacity: calc(.72 + .28 * var(--on)); }
.equation { margin-top: 72px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 16px 30px; }
.eq-item { text-align: center; }
.eq-num { display: block; font: 800 72px/.9 var(--display); font-stretch: 78%; }
.eq-item small { display: block; margin-top: 8px; font: 700 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.eq-oranges .eq-num { color: var(--pulp); }
.eq-op { font: 300 48px/1.4 var(--body); }
.eq-total { padding: 16px 26px 14px; border-radius: 999px; background: var(--fruit); }
.eq-total .eq-num { font-size: 56px; }

/* ---------- 09 order ---------- */
.order {
  max-width: 1440px; margin: 0 auto;
  padding: 120px 80px 96px;
  display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 80px; align-items: start;
}
.bottle-fig {
  position: relative; aspect-ratio: 620 / 660; overflow: hidden; border-radius: 4px;
  background: #D9C9B2; container-type: inline-size;
}
.bf-blur { position: absolute; inset: -4.84cqw; width: calc(100% + 9.68cqw); max-width: none; height: calc(100% + 9.68cqw); object-fit: cover; filter: blur(18px); }
.bf-bottle {
  position: absolute; left: 6.45cqw; top: -16.13cqw; width: 87.1cqw; height: 130.65cqw; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.bf-tint {
  position: absolute; left: 6.45cqw; top: -16.13cqw; width: 87.1cqw; height: 130.65cqw;
  opacity: 0; transition: opacity .6s;
  -webkit-mask: url("data:image/png;base64,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") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAHCCAYAAABVM/SHAAANBElEQVR42u3dW68d513H8e/29ra3nYPPaRw5wYkTShKnLYKKVoAgAi6QeBu8AFR4AYiL3vAyEDdc0ktOioR6UyQEJBFqAoE0dSCnBkWOD/HeXMy42wRL9WEfZmZ9PtLSSqJEip+Z9Zvn+T+HKQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGpNE7Dw+2fbZXLD4bpvz+zPK7jcuMzwmu7WD/dwdWSf7qFj1VPj9/34rPr36qrgEljM12a1fo//7qHqTHVu/OvG//bZ8bO+D/+/J6uXxu/t+7i336n+ovpBdaW67tILLKYZRncLmu0H+PEfvks4HarOjp9D+/BnWh//XPfravVW9Y/V96rXqo+rm24TgcXBOVSdr16sLo9hdGgMmee+1Au63+HV2jj0O9z8Cui37+8b1ZvVX1V/WX1//GfMzGFNsJhe1e9Wv19dGv9+t4NmewIP17UH/P/eqL5WXRh7WD8YA0tNS2BxALNfa+OP8ZW79Jy2DzAsptZGm2OII7CYwHDp1vi9fUfIGPZblyWwmGxvYk19khZcrAUQWAACCxBYAAILQGABAgtAYAEILEBgAQgsdv862mZ1b+10sjquKQQWB+dsdbGdkwjsI+yuJzZsNpwZdl6TCCwOzrmGg/o2nEbwM4PrlB6WwOLgf4jrmqF7PV5GqAssDtC6YSACizn0FjbG4eA5zaGHJbCY+gtEjjQU3M9qkntyvKGO5Tx3gcUBDgldy3tz++1Cm5pCYMEcelgn77j31f4EFuRFFAgsQGCB7TkILNrvmgzZniOwaAazXtuKyPcUXCf7/2/IRmCxz+uKuDfHxtCyFktgkZXb1mIhsMg+QmuxBBb2Ea7gfX/CTKHAIvsIZzRT+KQmEVjs7/U76jo+UHA9NX4U3gUWORp56p5UeBdY7H9gPZujkXvAwvsJhXeBRftScD9Una4e1xy26Agspu6IwnEK7wKLmcwQblRnqkc0yUMX3g8ZUgss2peC+4YaTA9TeP+FhplWBBZ7/GO7pOD+UB5tmLR4VOgLLNrTFe6X1F8euo51dOxhaUeBxR7Xry5a4b4r9786lsBijz3SUHDf0BTqWAKLuazStsK9XaljXVTHEli0J/Ur0/G7O7w+Wr1cXfBGHYFFe7Kl5LJC8a7uGHi+eskQW2Cx+z2Cr1S/2LCtxBBmdzyhTQUWe+NMOwtGDV925yGg1yqw2KMf2OnqMU2xZ3VB52MJLHbph3Wy+lY7BWJDl3Z15vXyHac3aFuBxUNeq8vVbzW81ovdHRaebKhjPaFJBBYP72j1Sw2LHA1b9ma700sNM4aWiwgsHrIH8OUFjuy+p6uvtfNWaMNCgUW7s4XEj2n3Hwonxl7sU5pEYGF1+xyGhb88fiwbEVhYJzSLnuzPt/M2HT1ZgUVWYk/14bBZfbVhRwECiwcYDl5qZ6+bYcre2qi+WX27oV6ovQUW9+FU9WvVz2mKffNM9dvVeT1agcX9DVEuNKxuP3VHj4u97dUeqV6pXjDJIbC4v9A6P34EVdZkCSym/KR/bPzRWBdkTRYCq6kXf3+l+p3xx+Mpb02WwNIEk55e/1bDjJWTMA/GU2MvywNDYNG9vWjCq+gP7qFxbBySX9AkAgvDkTmc9/5C9fWsyRJY/MzV1rbiHPy1OF+9ak2WwMJ+tjn0so6OPSxrsgQWhoOzcCFrsgQW1v+4JgisZr/C+uue5nq9CKy5nCt+Sb2kKdYVv5q6osDi/ww9vpE3t0x15vb56qwmEVjsDAe/kXfjTb33661FAssPwg9iNvVFDxSBtfLONMxEGQ5Oe8juZasCKyczDEfyvurprReMwJrDa9J/tWF1u6Ca17AQgdUqTplfbpiJ8tSe17DQA0Zgrdw1uPMlqUx/WPicjekCaxWf2NsNK9q9JHV+PeLnrHoXWK3wqZZekjofZxsWkVr1LrDsUWMWq95fsOpdYDmoD3UsBNaEhxaXDC1Sx0JgTfwpvdZQB3nZTa+OhcCaus0xrJ7WFOpYCKyp3/CHGhYhHtMk6lgIrKk71rCUwTVIHQuBNeWnc+NQ8GU1kNSxEFhN/3SGlxtqIHb9q2MhsCZ9o29UFxvOwGLedayLAktgLd0jY1htGErM3uPVaT1lgbVk56sXqyNu8pZQeH/xjjoWAiszhEzV8S9dS71lgbU4627sRf2GTjiBVGC18AWH5zRHSzjPbHMcElpAKrAWOUN4JDNLS7uut0+MVXgXWIsdEmr7FN4RWFN9Ct/+rFeHNUlLK7yfUHgXWC2odrU1fp8eh4RH3NyL+h2dVHjfe5707csi0YvVY9Wthi05r7SzaJRlFd4/0CwCa86erf5gDKlbY3Bd1CyLLbz/i8K7wJrz0/fRMay+qUlahcL7a9XnmkMNa662xp7VnXUsUnhHD6sJntt+aryZ19zIK/F70gnQw2rO57a/2LDZGQuCEVimu7HlSmCx20cik03tCCxoYscG2VMosGbbviY2WrmDGe0pFFjN9a0qF7MNJ4f5IbCm71zeW5eaJQKr2Ux5r2sGEFiAwAKsuxNYsCrHzNjZILBgFsF1Sg9LYEEzmiU0UyiwAIEFILAABBYgsAAEFoDAAgQWgMACEFiAwAIQWAACCxBYAAILQGABAgtAYAEILEBgAQgsAIEFCCwAgQUgsACBBSCwAAQWILAABNYcbVe3NAMIrDn4oPq36ma1pjlWwpprLbDm6sPqnerGHT0ult2j/qS6qikE1hxtVV9ohpUIqrXqWvVmdUWTCCyYwwPqJ3pYAgtAYAECC0BgAQILaNfWYSGwYPKuNswSbmXdncDyxGXirlRvVJ9rCoGVdTlM3KfVf2kGgTVXVj6vjlvtbMVCYM1yKGhv2Wr5orquGQSW3fuAwAIEFoDAgqZdeEdgQVOvU95qWNawpTkEFjTxA/wOVZsmWAQWzKWX9XR1VFMILJjD9qsnquOaQ2DBHIaFRwwLBRbMyWFNILBgLlux7GwQWOA4IQRW+1Tb8G5CEFjN5XX17+R19SCwmsfr6n/YcDaWY3NBYE12KNgYVG+NwQUIrKZcgL05Dgk/0BwrM1OoFy2wmvtJlG7i1ehRu84CC0BgAQILQGABAgtAYAEILEBgAQgsAIEFCCwAgdXK7jPzVuC8/RmB1UwO8XurupFD/LLRHYE17R3871V/PX7b0Q8CqymfkXRj7GE5E2v5w8EtzSCwlnIz61kt+0Uj/1F9rjkEFkz9YXSl+m71qeYQWDB1N6v3DQkFVguqZZkhXDZhJbAW42r1SepY1mAhsGbgSvVmw2u/1gRX1mAhsCbew/qJYYPhIAKrGSwe3WqYQTLt3SIL7j9uWG+HwFqEa9Xr1buaYnHDwPerP64+0hwCqwW9EfiHY2jdNGO4yCUNiu4Ca1E+bnht/Q17Chf1MLp9LT2EBFZLm/a+7klsnR0CqxkU3m+MPayPNQkIrGZQ63i9oZa15YmcJQ0IrInXOn40htZ1TbKYh9CV8RuBtbhh4WcNx5B8pvDeUk5p+JPxW21SYC3O9bGH9aMv9bzQw0JgTW5YuNVw+ugbbvLUsBBYM/BhQ+H9mmGhsEJgNfE61rWxl/WhJjEcRGDN4UZ/YwwtyxtScEdgNYPlDW9km04zn0DRwxJYK7O84e2GM7KY73DQerp9tK4JOshi7Y3qmer56rAmmdVw8L3qOw2nyOph6WGtRGC9Xn1vfFIbFhoOIrCa+huh/zl7Cw0HEVgz8W71T+2sycLsIAKrqRbfP63+vvpXixANBxFYcxhefL/6O70sw0EySziTJ/Zmdbn6SmpZZgfRw5pBL+tvG95faMbQcBCBNWkfVf9Q/bemMBxEYDXxJQ639xe+7Q0skw2r9zI7KLD4qXeq17yQs6kt8L3WcErs29V/Gg6m6E6NQ41PqtPVpeqo3taBBtX1MaBer/6o+vOGdXNfaB4YHK5+o2GZwxdjYG2N3z57/7lVfd5w9M/fVK+OD49NIxI9LLrrEcqfjE/3Z6qzNkYfSI/qD6s/a6grfjQOA83cTuRsJqbndPWb1e9V364uVBuaZU/cGId671bfHb/fG/+5kBJY3EcP+Mnq18fgesawpL1YDPp+9afVj6sP9KYEFvd+PdbGUDoyfq9Xj1dnquOu2Z4MBf+nYQbwuqASWHRfy0zW7rLkZM01ay83oOtRAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADABP0vF9V3yXUrsgwAAAAASUVORK5CYII=") 0 0 / 100% 100% no-repeat;
}
.bf-tint-blood { background: #C8321E; mix-blend-mode: multiply; }
.bf-tint-ginger { background: #FFE9A6; mix-blend-mode: screen; }
.bottle-fig[data-blend="blood"] .bf-tint-blood { opacity: .85; }
.bottle-fig[data-blend="ginger"] .bf-tint-ginger { opacity: .5; }
.bf-label {
  position: absolute; left: 35.32cqw; top: 64.52cqw; width: 29.03cqw; height: 20.65cqw; padding-top: 3.55cqw;
  text-align: center; color: var(--ink);
  background: linear-gradient(90deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, 0) 18%, rgba(255, 255, 255, .18) 40%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .18) 100%), var(--pith);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.bf-label span { display: block; }
.bf-brand { font: 800 4.84cqw/1 var(--display); font-stretch: 85%; letter-spacing: -.02em; }
.bf-blend { margin-top: 1.61cqw; font: 700 1.45cqw/1 var(--body); letter-spacing: .16em; }
.bf-size { margin-top: 1.29cqw; font: 600 1.61cqw/1 var(--body); color: var(--ink-3); }
.bf-orange { position: absolute; left: 9.68cqw; top: 83.87cqw; width: 19.03cqw; filter: drop-shadow(0 14px 14px rgba(60, 30, 0, .35)); }
.bf-half { position: absolute; left: 70.97cqw; top: 83.87cqw; width: 22.58cqw; height: 22.58cqw; filter: drop-shadow(0 14px 14px rgba(60, 30, 0, .35)); }
.bf-half .pf-face { transform: scaleY(.36); }
.bottle-fig figcaption { position: absolute; left: 24px; bottom: 18px; padding: 8px 12px; border-radius: 999px; background: var(--pith); font: 700 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }

.order-panel { padding-top: 18px; }
.order-title { margin-top: 14px; font: 800 clamp(44px, 4.7vw, 68px)/.95 var(--display); font-stretch: 80%; letter-spacing: -.03em; }
.order-intro { max-width: 520px; margin-top: 18px; font: 400 18px/1.6 var(--body); color: var(--ink-2); }
.opt { margin: 26px 0 0; padding: 0; border: 0; min-width: 0; }
.opt:first-of-type { margin-top: 34px; }
.opt legend { padding: 0; font: 700 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.opt-row { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--ink);
  background: transparent; color: var(--ink); font: 600 16px/1 var(--body); cursor: pointer;
  transition: background-color .2s, color .2s;
}
.chip:has(i) { padding-left: 14px; }
.chip i { width: 18px; height: 18px; border-radius: 50%; background: var(--dot); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.chip:hover { background: rgba(18, 56, 43, .07); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--pith); }
.chip-size { min-width: 96px; }
.order-total { margin-top: 36px; padding-top: 26px; border-top: 1.5px solid var(--ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.price { display: flex; align-items: baseline; gap: 12px; font: 800 40px/1 var(--display); font-stretch: 85%; }
.price-was { font: 500 18px/1 var(--body); color: var(--ink-3); }
.price-was:empty { display: none; }
.summary { margin-top: 8px; font: 500 15px/1.4 var(--body); color: var(--ink-2); }
.order-note { min-height: 1.4em; margin-top: 14px; font: 600 15px/1.4 var(--body); color: var(--pulp-ink); }
.wholesale { margin-top: 6px; font: 500 15px/1.4 var(--body); }
.wholesale a { font-weight: 700; }
.wholesale a:hover { color: var(--pulp-ink); }

.facts { max-width: 1440px; margin: 0 auto; padding: 0 80px 120px; }
.facts h2 { font: 800 44px/1 var(--display); font-stretch: 80%; letter-spacing: -.02em; }
.facts dl { margin-top: 34px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.facts dl > div { border-top: 1.5px solid var(--ink); padding-top: 18px; }
.facts dt { font: 700 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--pulp-ink); }
.facts dd { margin-top: 12px; font: 400 16px/1.6 var(--body); }

/* ---------- footer ---------- */
.site-footer { z-index: 1; overflow: hidden; padding: 110px 80px 36px; background: var(--ink); color: var(--pith); }
.footer-leaves { position: absolute; left: 0; bottom: -420px; width: 100%; max-width: none; min-width: 1100px; opacity: .22; mix-blend-mode: luminosity; pointer-events: none; }
.wave-footer { position: absolute; left: 0; top: -1px; width: 100%; height: 60px; }
.footer-big { position: relative; font: 800 clamp(64px, 10.4vw, 150px)/.85 var(--display); font-stretch: 75%; letter-spacing: -.045em; }
.footer-big em { font-style: normal; color: #FF8A3D; }
.footer-row { position: relative; margin-top: 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.footer-links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 16px 32px; font: 600 16px/1 var(--body); }
.footer-links a { color: var(--pith); }
.footer-links a:hover { color: #FF8A3D; }
.footer-base { position: relative; margin-top: 64px; padding-top: 22px; border-top: 1px solid rgba(255, 249, 239, .3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font: 500 14px/1.4 var(--body); color: #D6E0D3; }
.footer-base a { color: #D6E0D3; }

/* reveal helper (JS adds the motion) */
.js [data-reveal] { opacity: 0; transform: translateY(28px); }

/* ---------- responsive ---------- */
@media (max-height: 780px) and (min-width: 761px) {
  .branch { --stack: clamp(220px, 38svh, 400px); padding-top: 84px; padding-bottom: 24px; }
  .stack { margin-top: 22px; }
  .track { margin-top: 26px; }
  .never { padding-top: 16px; }
}

@media (max-width: 1180px) {
  .order { padding: 110px 48px 88px; gap: 56px; }
  .facts { padding: 0 48px 110px; }
  .facts dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer { padding: 110px 48px 36px; }
}

@media (max-width: 1023px) {
  .rail, .companion { display: none; }
  .order { grid-template-columns: 1fr; max-width: 720px; }
  .bottle-fig { max-width: 620px; }
  .pour-text { grid-template-columns: 1fr; max-width: 640px; text-align: left; }
  .pour-text h2, .pour-text p { grid-column: 1; }
  .pour-text p { max-width: none; padding: 16px 0 0; }
  .b-h1, .b-h2, .press-arrows .heat, .press-arrows .heat-head { display: none; }
}

@media (max-width: 760px) {
  :root { --header-h: 72px; }
  .site-header { grid-template-columns: auto 1fr auto; gap: 8px; }
  .site-header.is-solid { height: 64px; }
  .brand { justify-self: center; }
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-icon { width: 42px; height: 42px; }
  .brand span { font-size: 23px; }
  .brand svg { width: 26px; height: 26px; }
  .header-cta { min-height: 42px; padding: 0 16px; font-size: 14px; gap: 6px; }

  .scene { --w: 23vw; --os: 1.45; --sq: 1.75; --fc: 1.3; --wt: max(112px, calc((100svh - var(--w) * 2.55 - 240px) * .42)); }
  .cap-a { left: 20px; right: 20px; top: 12%; width: auto; }
  .cap-time { font-size: 68px; }
  .cap-text { margin-top: 10px; font-size: 16px; }
  .cap-b { left: 20px; right: 20px; top: 12%; width: auto; }
  .cap-big { font-size: 32px; }
  .hero-chips { font-size: 11px; gap: 10px 14px; }
  .lf-1 { top: 22%; left: 8vw; }
  .lf-2 { top: 14%; left: 72vw; }

  .split { padding-top: 56px; }
  .lead { font-size: 19px; }
  .split-copy { margin-top: 28px; }
  .split-copy p + p { font-size: 16px; }
  .pill { font-size: 13px; }

  .branch { --stack: clamp(200px, min(40svh, 74vw), 340px); padding-top: 88px; }
  .track { width: calc(100% - 56px); }
  .track-labels { font-size: 11px; }
  .tl-name { display: none; }
  .track-handle { width: 44px; height: 44px; margin-left: -22px; top: -2px; font-size: 15px; }
  .never-title { width: 100%; text-align: center; font-size: 11px; }
  .never ul { font-size: 13px; gap: 8px 14px; }

  .oranges { --pt: 88px; --w: 27vw; }
  .oranges-copy { margin-top: calc(var(--w) * 1.1); padding-bottom: 104px; }
  .oranges-copy .lead { font-size: 20px; }
  .oranges-copy .lead br { display: none; }
  .oranges-copy p + p { font-size: 16px; }
  .t1 { left: -10vw; width: calc(var(--w) * 1.45); }
  .t2 { left: 16vw; width: calc(var(--w) * 1.2); }
  .t3 { left: 46vw; width: calc(var(--w) * 1.35); }
  .t4 { left: 70vw; width: calc(var(--w) * 1.45); }
  .o-foliage { width: 160%; left: -30%; }

  .pressed { --pw: 23vw; --fig: min(58vw, 34svh); }
  .pw-out { left: 16px; top: 13%; }
  .pw-solid { right: 16px; top: auto; bottom: 38%; }
  .press-fig { left: calc(50% - var(--fig) / 2); top: calc(42% - var(--fig) / 2); }
  .b-b9 { left: 88%; top: 86%; }
  .press-copy { top: 64%; }
  .press-copy p { font-size: 16px; line-height: 1.55; }
  .press-steps { bottom: 24px; gap: 10px 18px; font-size: 12px; }
  .press-steps li.is-on i { width: 24px; }

  .pour { padding: 88px 16px 40px; }
  .pour-crate { aspect-ratio: 4 / 3; }
  .pour-glass { width: 86%; margin-top: -30%; }
  .pour-text { margin-top: 28px; }

  .steps { padding: 96px 16px 64px; }
  .steps-line { display: none; }
  .steps-list { grid-template-columns: 1fr; gap: 56px; }
  .eq-num { font-size: 52px; }
  .eq-total .eq-num { font-size: 40px; }
  .eq-op { font-size: 34px; }
  .equation { gap: 12px 18px; margin-top: 56px; }

  .order { padding: 96px 16px 72px; gap: 40px; }
  .chip { padding: 0 16px; font-size: 15px; }
  .bottle-fig figcaption { left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 7px 10px; font-size: 10px; letter-spacing: .1em; }
  .chip-size { min-width: 80px; }
  .facts { padding: 0 16px 96px; }
  .facts h2 { font-size: 34px; }
  .facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .site-footer { padding: 96px 16px 28px; }
  .footer-row { margin-top: 40px; }
  .footer-base { margin-top: 48px; }
}

@media (max-width: 420px) {
  .facts dl { grid-template-columns: 1fr; }
  .header-cta svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cue svg, .press-arrows .heat { animation: none; }
  .menu, .menu-list li { transition: none !important; }
}