/* Base: reset, type, nav, buttons, shared bottle/bubble primitives. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 0; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--forest-950); color: var(--cream);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6; overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.012em; line-height: .92; }
em { font-style: normal; color: var(--lime); }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 3px; }
.light :focus-visible, [data-nav="light"] :focus-visible { outline-color: var(--forest-800); }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--lime); color: var(--forest-800); padding: 10px 16px; font-weight: 800; border-radius: var(--radius); }
.skip-link:focus { top: 12px; }
.noscript, .file-warning { position: fixed; z-index: 300; left: 0; right: 0; bottom: 0; padding: 14px var(--gutter); background: var(--lime); color: var(--forest-800); font-weight: 700; }
.file-warning[hidden] { display: none; }

/* ---------- wordmark (typographic version of the existing site's logo lock-up) ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 900; font-size: 30px; letter-spacing: -.03em; line-height: .8; color: inherit; }
.wordmark small { display: block; font: 700 9px var(--font-body); letter-spacing: .32em; margin-top: 7px; }
.wordmark__mark { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--forest-800); border: 2px solid var(--forest-800); font: 400 26px var(--font-mark); letter-spacing: 0; padding-bottom: 2px; }
.wordmark--lg { font-size: 44px; } .wordmark--lg .wordmark__mark { width: 58px; height: 58px; font-size: 36px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 28px; color: var(--cream);
  transition: background .4s var(--ease-out), color .4s, transform .5s var(--ease-out), box-shadow .4s;
}
.nav__brand { margin-right: auto; display: inline-flex; border-radius: 6px; }
.nav__links { display: flex; gap: 30px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav__links a { position: relative; padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.nav__links a:hover::after, .nav__links a:focus-visible::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); }
.nav[data-nav-theme="light"] { color: var(--forest-800); }
.nav[data-nav-theme="light"] .wordmark__mark { background: var(--forest-800); color: var(--lime); border-color: var(--forest-800); }
.nav.is-solid { background: rgba(7, 22, 15, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav.is-solid[data-nav-theme="light"] { background: rgba(245, 242, 230, .85); }
.nav__toggle { display: none; width: 46px; height: 46px; border: 1px solid currentColor; background: transparent; border-radius: 50%; position: relative; }
.nav__toggle span { position: absolute; left: 13px; right: 13px; height: 2px; background: currentColor; transition: transform .35s var(--ease-out), top .35s; }
.nav__toggle span:first-child { top: 18px; } .nav__toggle span:last-child { top: 26px; }
.nav__toggle[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 18px; padding: 15px 20px; border-radius: var(--radius); border: 0; font: 800 12px var(--font-body); letter-spacing: .12em; text-transform: uppercase; transition: background .25s, color .25s, box-shadow .25s; will-change: transform; }
.btn span { font-size: 16px; line-height: 1; transition: transform .3s var(--ease-out); }
.btn:hover span { transform: translate(3px, -3px); }
.btn--lime { background: var(--lime); color: var(--forest-800); }
.btn--lime:hover { background: #fff; }
.btn--forest { background: var(--forest-800); color: #fff; }
.btn--forest:hover { background: var(--forest-950); }
.btn--lg { padding: 20px 28px; font-size: 13px; }
.text-link { font-weight: 700; font-size: 13px; letter-spacing: .06em; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.nav__cta { margin-left: 4px; }

.eyebrow { display: flex; align-items: center; gap: 12px; font: 800 11px var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--lime); margin-bottom: 18px; }
.eyebrow--dark { color: var(--forest-800); }
.line { display: inline-block; width: 28px; height: 2px; background: currentColor; }
.fine-print { color: rgba(245, 242, 230, .6); font-size: 12px; margin-top: 22px; }
.fine-print--dark { color: var(--muted); }

.round-btn { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; display: grid; place-items: center; transition: background .25s, color .25s, transform .25s; flex: none; }
.round-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.round-btn:hover { background: var(--lime); color: var(--forest-800); border-color: var(--lime); }
.round-btn:active { transform: scale(.94); }

/* ---------- fizz canvas ---------- */
.fizz-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- bottle primitive (image + silhouette-masked sweep + condensation) ---------- */
.bottle { position: relative; height: 100%; aspect-ratio: var(--bottle-ar, 0.38); margin: 0 auto; }
.bottle__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
.bottle__cond, .bottle__sweep {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: var(--bottle-img); mask-image: var(--bottle-img);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.bottle__cond { opacity: var(--cond2, .8); }
.bottle__sweep { background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .0) 42%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 58%, transparent 62%); background-size: 300% 100%; background-position: 160% 0; mix-blend-mode: screen; opacity: 0; }
.bottle__floor { position: absolute; left: 50%; bottom: -4%; width: 150%; height: 14%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); filter: blur(6px); }

@media (max-width: 900px) {
  :root { --nav-h: 66px; }
  .nav { gap: 12px; }
  .nav__toggle { display: block; }
  .nav__cta { display: none; }
  .nav__links { position: fixed; inset: 0; padding: calc(var(--nav-h) + 24px) var(--gutter) 40px; background: var(--forest-950); color: var(--cream); flex-direction: column; gap: 6px; font-size: 38px; font-family: var(--font-display); font-weight: 900; letter-spacing: -.01em; justify-content: center; clip-path: circle(0 at calc(100% - 44px) 38px); visibility: hidden; transition: clip-path .7s var(--ease-io), visibility 0s .7s; z-index: -1; }
  .nav__links a::after { display: none; }
  .nav__links.is-open { clip-path: circle(150% at calc(100% - 44px) 38px); visibility: visible; transition: clip-path .7s var(--ease-io), visibility 0s; }
  .nav.menu-open { color: var(--cream); background: transparent; backdrop-filter: none; }
  .nav.menu-open .wordmark__mark { background: var(--lime); color: var(--forest-800); }
}

/* ---------- reduced motion: transitions off; sticky/scrubbed scenes become stacked layouts (see sections.css .rm) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}