/* Royal Nectar Ventures — main stylesheet
   Mobile-first. Breakpoints: 375 (base), 640, 900, 1200, 1440. */

:root {
  --rum-white: #0066FF;
  --rum-dark:  #FF5500;
  --vodka:     #E8000D;
  --vodka-orange: #FFD600;
  --cranberry: #FF0080;
  --lime:      #00CC44;
  --gin:       #8800FF;

  --gold:      #C8860A;
  --gold-soft: #E7A829;
  --ink:       #080500;
  --ink-2:     #15100A;
  --cream:     #EBD9B0;
  --cream-2:   #FBF3DF;
  --body-on-cream: #3a2a10;
  --body-on-ink:   #a07840;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Outfit", system-ui, sans-serif;
  --font-script:  "Pinyon Script", "Playfair Display", serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);

  --nav-h: 66px;
  --max: 1440px;

  --kente:
    repeating-linear-gradient(
      90deg,
      var(--ink) 0 6px,
      var(--vodka-orange) 6px 24px,
      var(--vodka) 24px 40px,
      var(--ink) 40px 46px,
      var(--lime) 46px 64px,
      var(--vodka-orange) 64px 82px,
      var(--ink) 82px 88px,
      var(--rum-white) 88px 106px,
      var(--vodka) 106px 124px,
      var(--ink) 124px 130px,
      var(--cranberry) 130px 148px
    );
}

* { box-sizing: border-box; }

html {
  /* Anchor jumps (incl. cross-page links like index.html#story) clear the
     fixed nav instead of landing hidden underneath it. */
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.55;
  min-height: 100dvh;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--gold); color: var(--ink); }

/* ------------ Loading screen ------------ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms var(--ease-soft), visibility 0s linear 600ms;
}
.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 0 1.5rem;
  text-align: center;
}
.loader__antler {
  width: 72px;
  height: 72px;
  color: var(--gold);
  animation: loaderPulse 1.8s ease-in-out infinite;
}
.loader__wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.9rem);
  color: var(--cream);
  letter-spacing: 0.01em;
  line-height: 1;
}
.loader__tag {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--body-on-ink);
}
.loader__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(200, 134, 10, 0.12);
  overflow: hidden;
}
.loader__bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold) 55%, var(--vodka) 100%);
  transition: width 320ms var(--ease-soft);
}
@keyframes loaderPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.92); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .loader__antler { animation: none; }
}

/* ------------ Pre-animation visibility gate ------------
   Everything GSAP animates starts hidden in CSS so images/fonts can finish
   loading without a flash of unstyled content. `anim-ready` is added to the
   body once the preload promise resolves and GSAP has registered its tweens. */
body:not(.anim-ready) .nav__brand,
body:not(.anim-ready) .nav__links > a,
body:not(.anim-ready) .nav__dropdown,
body:not(.anim-ready) .nav__toggle,
body:not(.anim-ready) .hero { --hero-shield-opacity: 0; }
body:not(.anim-ready) .hero__eyebrow,
body:not(.anim-ready) .hero__title,
body:not(.anim-ready) .hero__sub,
body:not(.anim-ready) .hero__actions > *,
body:not(.anim-ready) .hero__media,
body:not(.anim-ready) .story__headline .word > span,
body:not(.anim-ready) .orbital__display,
body:not(.anim-ready) .orbital__stage,
body:not(.anim-ready) .tetra__content > *,
body:not(.anim-ready) .tetra-card,
body:not(.anim-ready) .products__head > *,
body:not(.anim-ready) .product__bottle,
body:not(.anim-ready) .product__text > *,
body:not(.anim-ready) .contact__inner > *,
body:not(.anim-ready) .footer__inner > *,
body:not(.anim-ready) .footer__kente {
  opacity: 0;
}

/* ------------ Will-change hints for every GSAP-animated element (rule 3). ------------ */
.nav__brand,
.nav__links > a,
.nav__dropdown,
.nav__toggle,
.hero__eyebrow,
.hero__title,
.hero__sub,
.hero__actions > *,
.hero__media,
.jerrys__head > *,
.jerrys__copy > *,
.jerrys__photo-bg,
.story__headline .word > span,
.orbital__display,
.orbital__stage,
.tetra__bg,
.tetra__content > *,
.tetra-card,
.products__head > *,
.product__bottle,
.product__text > *,
.contact__inner > *,
.footer__inner > *,
.footer__kente {
  will-change: transform, opacity;
}

/* ------------ Progress bar ------------ */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  background: rgba(8, 5, 0, 0.08);
  pointer-events: none;
}
.progress > span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold-soft), var(--gold) 40%, var(--vodka) 100%);
  will-change: transform;
}

/* ------------ Nav ------------ */
.nav {
  position: fixed;
  inset: 3px 0 auto 0;
  z-index: 55;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1rem, 2.5vw, 2rem);
  color: var(--cream);
  transition: background-color 520ms var(--ease-soft), color 520ms var(--ease-soft), border-color 520ms var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 5, 0, 0.45), rgba(8, 5, 0, 0));
  opacity: 0;
  transition: opacity 520ms var(--ease-soft);
  pointer-events: none;
}
body.is-scrolled .nav {
  background: rgba(8, 5, 0, 0.92);
  color: var(--cream);
  border-bottom-color: rgba(200, 134, 10, 0.25);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
body.is-scrolled .nav::before { opacity: 0; }

/* Light context (light heroes / light interior pages): ink text, transparent
   at the top, picking up a light translucent bar only once scrolled. */
body.is-nav-light .nav {
  color: var(--ink);
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.is-scrolled.is-nav-light .nav {
  background: rgba(245, 230, 200, 0.9);
  border-bottom-color: rgba(8, 5, 0, 0.12);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
body.is-nav-light .nav::before { opacity: 0; }
body.is-nav-light .nav__wordmark { color: var(--ink); }

/* Phones (our primary market) — backdrop-filter re-blurs the fixed nav and the
   collection glass card on every scroll frame, which janks weak GPUs. Drop the
   blur below 768px and compensate with a slightly more opaque background. */
@media (max-width: 768px) {
  body.is-scrolled .nav,
  body.is-nav-light .nav,
  body.is-scrolled.is-nav-light .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.is-scrolled .nav { background: rgba(8, 5, 0, 0.96); }
  body.is-nav-light .nav,
  body.is-scrolled.is-nav-light .nav { background: rgba(245, 230, 200, 0.97); }
  .orbital__heading {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(20, 14, 6, 0.9);
  }
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--gold);
  line-height: 1;
  transition: color 400ms var(--ease-soft);
}
.nav__antler {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  /* Dark-grey antler PNG → gold #C8860A tint */
  filter: brightness(0) saturate(100%) invert(60%) sepia(59%) saturate(745%) hue-rotate(5deg) brightness(88%) contrast(90%) drop-shadow(0 4px 10px rgba(200, 134, 10, 0.35));
  transition: transform 600ms var(--ease-soft), filter 400ms var(--ease-soft);
}
body.is-nav-light .nav__antler {
  /* Dark-grey antler → deep ink tint for light nav sections */
  filter: brightness(0) saturate(100%) drop-shadow(0 2px 6px rgba(8, 5, 0, 0.15));
}
.nav__brand:hover .nav__antler { transform: rotate(-8deg) scale(1.05); }
.nav__wordmark {
  display: inline;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.25rem);
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
}

.nav__links {
  display: none;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.nav__links > a:not(.nav__cta) {
  position: relative;
  padding: 0.5rem 0;
  color: inherit;
  transition: color 300ms var(--ease-soft);
}
.nav__links > a:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width 400ms var(--ease-soft);
}
.nav__links > a:not(.nav__cta):hover { color: var(--gold-soft); }
.nav__links > a:not(.nav__cta):hover::after { width: 100%; }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.55rem 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.92rem;
  font-weight: 600;
  transition: background-color 300ms var(--ease-soft), transform 300ms var(--ease-soft);
}
.nav__cta:hover { background: var(--gold-soft); transform: translateY(-1px); }
.nav__cta:active { transform: translateY(0) scale(0.98); }
.nav__cta-arrow {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  transition: transform 300ms var(--ease-soft);
}
.nav__cta:hover .nav__cta-arrow { transform: translateX(2px) rotate(-15deg); }

.nav__toggle {
  position: relative;
  width: 48px;
  height: 48px;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(245, 230, 200, 0.08);
  border: 1px solid rgba(245, 230, 200, 0.2);
  transition: background-color 300ms var(--ease-soft), border-color 300ms var(--ease-soft);
}
.nav__toggle > span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 420ms var(--ease-soft), width 420ms var(--ease-soft), opacity 260ms var(--ease-soft);
}
.nav__toggle > span:nth-child(2) { width: 14px; align-self: flex-end; margin-right: 14px; }
body.menu-open .nav__toggle > span:nth-child(1) { transform: translateY(4px) rotate(45deg); width: 20px; }
body.menu-open .nav__toggle > span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); width: 20px; margin-right: 14px; }

/* ------------ Mobile menu overlay ------------ */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 58;
  background: linear-gradient(160deg, var(--ink) 0%, #1a0d00 60%, var(--ink) 100%);
  color: var(--cream);
  opacity: 0;
  visibility: hidden;
  transition: opacity 520ms var(--ease-soft), visibility 0s linear 520ms;
  overflow: hidden;
}
body.menu-open .menu-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 520ms var(--ease-soft), visibility 0s linear 0s;
}
.menu-overlay__kente {
  position: absolute;
  inset: 0;
  background: var(--kente);
  opacity: 0.14;
  mix-blend-mode: screen;
  filter: saturate(1.3);
  pointer-events: none;
}
.menu-overlay__inner {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-h) + 2.5rem) clamp(1.5rem, 6vw, 4rem) 2.5rem;
}
.menu-overlay__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-soft) 120ms, transform 500ms var(--ease-soft) 120ms;
}
.menu-overlay__list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.menu-overlay__list a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 10vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--cream);
  position: relative;
  padding: 0.25rem 0;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 620ms var(--ease-soft), transform 620ms var(--ease-soft), color 300ms var(--ease-soft);
}
.menu-overlay__list a:hover { color: var(--gold-soft); }
.menu-overlay__list a::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.9;
  flex-shrink: 0;
  transition: transform 420ms var(--ease-soft);
}
.menu-overlay__list a:hover::before { transform: scale(1.4); }
body.menu-open .menu-overlay__eyebrow { opacity: 1; transform: translateY(0); }
body.menu-open .menu-overlay__list li:nth-child(1) a { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
body.menu-open .menu-overlay__list li:nth-child(2) a { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
body.menu-open .menu-overlay__list li:nth-child(3) a { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
.menu-overlay__foot {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.95rem;
  color: var(--cream-2);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-soft) 420ms, transform 600ms var(--ease-soft) 420ms;
}
.menu-overlay__foot a { color: inherit; }
.menu-overlay__foot a:hover { color: var(--gold-soft); }
body.menu-open .menu-overlay__foot { opacity: 1; transform: translateY(0); }

/* ------------ Shared atoms ------------ */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  --btn-ico-bg: var(--gold);
  --btn-ico-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.75rem 0.75rem 1.4rem;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background-color 360ms var(--ease-soft), color 360ms var(--ease-soft), transform 360ms var(--ease-soft);
  will-change: transform;
}
.btn__ico {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--btn-ico-bg);
  color: var(--btn-ico-fg);
  font-size: 1.05rem;
  transition: transform 360ms var(--ease-soft);
}
.btn:hover { transform: translateY(-1.5px); }
.btn:hover .btn__ico { transform: translate(2px, -1px) rotate(-10deg); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn--primary {
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  --btn-ico-bg: var(--gold);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  padding: 0.75rem 1.25rem;
  border: 1px solid currentColor;
}
.btn--ghost:hover { background: currentColor; color: var(--ink); }
[data-contrast="dark"] .btn--primary { --btn-bg: var(--ink); --btn-fg: var(--cream); --btn-ico-bg: var(--cream); --btn-ico-fg: var(--ink); }

.eyebrow,
.products__eyebrow,
.contact__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.products__eyebrow i,
.contact__eyebrow i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.72); opacity: 0.65; }
}

/* ------------ Hero (overlapping layout) ------------ */
.hero {
  --hero-shield-opacity: 1;
  position: relative;
  min-height: 100dvh;
  background: #080500;
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.hero__media {
  position: relative;
  width: 100%;
  height: 50vh;
  overflow: hidden;
  background: #080500;
  order: -1;
}
.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, #080500 100%);
}
.hero__copy {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1.4rem;
  padding: 2.5rem clamp(1.5rem, 5vw, 4rem) 3rem;
  max-width: 640px;
  margin: 0 auto;
}
.hero__eyebrow {
  font-family: var(--font-body);
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.hero__title em {
  font-style: italic;
  font-weight: 800;
  color: var(--gold);
}
.hero__sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--cream);
  opacity: 0.7;
  max-width: 42ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.hero__actions .btn--ghost {
  color: var(--gold);
  border-color: rgba(200, 134, 10, 0.6);
}
.hero__actions .btn--ghost:hover,
.hero__actions .btn--ghost:focus-visible {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

@media (min-width: 900px) {
  .hero {
    display: block;
  }
  /* Dark gradient shield behind text: solid left -> transparent right, 55% wide */
  .hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, #080500 0%, #080500 35%, rgba(8,5,0,0.85) 65%, transparent 100%);
    opacity: var(--hero-shield-opacity, 1);
    pointer-events: none;
    z-index: 2;
  }
  /* Video: 72% of viewport, anchored right (overlaps text zone at 28-55%) */
  .hero__media {
    position: absolute;
    top: 0;
    right: 0;
    width: 72%;
    height: 100%;
    order: 0;
    z-index: 1;
  }
  /* Soft left-edge bleed on video so it blends into the dark, no hard edge */
  .hero__media::after {
    background: linear-gradient(90deg, #080500 0%, rgba(8,5,0,0.45) 10%, transparent 28%);
  }
  /* Text column: absolute on left, overlaps video at the 35-55% zone */
  .hero__copy {
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    padding: calc(var(--nav-h) + 2rem) clamp(3rem, 5vw, 5rem) 3rem;
    align-items: flex-start;
    text-align: left;
    max-width: none;
    margin: 0;
    flex: initial;
  }
  .hero__actions {
    justify-content: flex-start;
  }
  .hero__sub {
    max-width: 38ch;
  }
}

/* ------------ Mr. Jerry's Espresso Martini ------------ */
/* ------------ Mr. Jerry's — ready-to-serve cocktail duo ------------
   One branded section presenting both cocktails (Espresso Martini + Midday
   Negroni) as a side-by-side diptych, halving the old two-section footprint. */
.jerrys {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #1E0E02;
  color: var(--cream);
  /* No horizontal padding — the photo columns run full-bleed to the edges. */
  padding: clamp(3rem, 7vh, 5.5rem) 0 clamp(3rem, 7vh, 5.5rem);
}
.jerrys__head {
  max-width: 720px;
  margin: 0 auto clamp(2rem, 4.5vw, 3.25rem);
  padding-inline: clamp(1.25rem, 4vw, 2rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1rem);
}
.jerrys__eyebrow {
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.jerrys__heading {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1rem + 3.2vw, 3.4rem);
  line-height: 1.02;
  color: var(--cream);
}
.jerrys__intro {
  margin: 0;
  font-family: var(--font-body);
  color: rgba(245, 230, 200, 0.74);
  font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.12rem);
  line-height: 1.6;
}
.jerrys__duo {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.5rem, 1vw, 0.9rem);
}
.jerrys__pour {
  display: flex;
  flex-direction: column;
  --accent: var(--gold);
}
.jerrys__pour--negroni { --accent: #C8420A; }
/* Wide 3:2 landscape (cocktail + angled bottle), full-bleed in its column. */
.jerrys__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.jerrys__photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.jerrys__pour--espresso .jerrys__photo-bg {
  background-image: url('../../public/images/backgrounds/jerrys-espresso-bottle.jpg');
}
.jerrys__pour--negroni .jerrys__photo-bg {
  background-image: url('../../public/images/backgrounds/jerrys-negroni-bottle.jpg');
}
/* Gentle bottom fade so the photo's lower edge melts into the brown before the copy. */
.jerrys__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 62%, rgba(30, 14, 2, 0.5) 86%, #1E0E02 100%);
  pointer-events: none;
}
.jerrys__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.5rem, 1vw, 0.8rem);
  /* Photo is full-bleed; inset only the copy so text isn't glued to the edge. */
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.25rem, 3vw, 2.5rem) 0;
}
.jerrys__tag {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 1.95rem);
  line-height: 1.05;
  color: var(--cream);
  padding-bottom: 0.5rem;
}
.jerrys__tag::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--accent);
}
.jerrys__abv {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.jerrys__desc {
  margin: 0;
  font-family: var(--font-body);
  color: rgba(245, 230, 200, 0.82);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  line-height: 1.6;
}
.jerrys__note {
  margin: 0.2rem 0 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(245, 230, 200, 0.74);
}
.jerrys__note strong { color: rgba(245, 230, 200, 0.92); font-weight: 700; }
.jerrys__cta {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
  --btn-ico-bg: var(--ink);
  --btn-ico-fg: var(--gold);
  align-self: flex-start;
  margin-top: clamp(0.6rem, 1.2vw, 1rem);
}
.jerrys__cta:hover { --btn-bg: var(--gold-soft); }

@media (max-width: 759px) {
  .jerrys__duo { grid-template-columns: 1fr; gap: clamp(2rem, 7vw, 3rem); }
  .jerrys__photo { aspect-ratio: 4 / 3; }
}

/* ------------ Story (text breaker) ------------ */
.story {
  position: relative;
  background: var(--cream);
  color: var(--ink);
  overflow: hidden;
  padding-bottom: clamp(3.5rem, 7vh, 6rem);
}
.story__inner {
  position: relative;
  padding: clamp(2rem, 3.5vw, 3.25rem) 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.story__headline {
  margin: 0;
  max-width: 1100px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.45rem, 0.9rem + 1.9vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 0.05em 0.28em;
}
.story__headline .word { display: inline-block; overflow: hidden; padding-bottom: 0.18em; }
.story__headline .word > span { display: inline-block; will-change: transform; }
.story__eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.75rem;
}
.story__rule {
  width: 64px;
  height: 2px;
  background: var(--gold);
  margin: 2.5rem auto 0;
  opacity: 0.7;
}
.story__body {
  max-width: 620px;
  margin: 2.25rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.story__body p {
  margin: 0;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.18rem);
  line-height: 1.7;
  color: rgba(8, 5, 0, 0.78);
}
.story__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 4rem);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}
.story__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.story__stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  line-height: 1;
  color: var(--ink);
}
.story__stat-label {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
}
.story__cta { margin: clamp(2.25rem, 4.5vw, 3.25rem) auto 0; }
.story__word--accent span {
  color: var(--gold);
  font-style: italic;
}
/* Section breaker variant: a cream interstitial bridging Mr. Jerry's craft to
   the Tetra everyday format. Sits between two dark sections, so balance the
   top/bottom padding and tighten the eyebrow into a compact band. */
.story--breaker { padding-top: clamp(1.5rem, 3vh, 2.5rem); }
.story--breaker .story__eyebrow { margin-bottom: 1.25rem; }

/* ------------ Orbital collection ------------ */
/* ------------ Marquee breaker (hero -> collection) ------------
   A slim, dark ticker between two dark sections. Thin gold hairlines and a
   faint warm sheen delimit it; the motion provides the rhythm. Kept dark and
   restrained to sit with the premium tone of the rest of the site. */
.marquee {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 50% 50%, rgba(200, 134, 10, 0.08), transparent 70%),
    #0b0805;
  color: var(--cream);
  padding: clamp(0.8rem, 1.9vh, 1.25rem) 0;
  border-top: 1px solid rgba(200, 134, 10, 0.30);
  border-bottom: 1px solid rgba(200, 134, 10, 0.30);
  isolation: isolate;
  z-index: 2;
}
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.marquee__item {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.82rem, 0.66rem + 0.85vw, 1.28rem);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 1.75rem;
  color: rgba(245, 230, 200, 0.85);
}
.marquee__item--accent {
  color: var(--gold);
  font-style: italic;
  font-weight: 600;
}
.marquee__sep {
  flex: 0 0 auto;
  color: var(--gold);
  opacity: 0.5;
  font-size: clamp(0.5rem, 0.3rem + 0.55vw, 0.8rem);
  transform: translateY(-0.1em);
}

.orbital {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #100b04;
  color: var(--cream);
  padding: clamp(2.25rem, 4.5vh, 3.75rem) 1.25rem clamp(3rem, 6vh, 4.5rem);
}
.orbital::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent 0%, transparent 35%, #100b04 75%, #100b04 100%),
    url('../../public/images/backgrounds/collection-bg.jpg') left center / cover no-repeat;
  z-index: 0;
  opacity: 0.9;
}
/* Collection meets the cream story breaker on a crisp edge (fading the dark
   marble to cream looked muddy), matching the site's other sharp section seams. */
.orbital__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
}
.orbital__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vh, 2.5rem) clamp(0.5rem, 1.5vw, 1.25rem);
  position: relative;
  z-index: 1;
}
.orbital__heading {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: rgba(20, 14, 6, 0.72);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 16px;
  border: 1px solid rgba(200, 134, 10, 0.25);
  box-shadow:
    0 20px 60px rgba(8, 5, 0, 0.18),
    0 4px 12px rgba(8, 5, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: 480px;
  margin-left: clamp(1rem, 2.5vw, 2.5rem);
  position: relative;
  z-index: 2;
}
.orbital__eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  color: #e0a93a;
  letter-spacing: -0.01em;
}
.orbital__display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.25rem, 1.2rem + 3vw, 3.75rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #f5ead2;
}
.orbital__lead {
  margin: 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.6;
  color: #c9b896;
  max-width: 380px;
  opacity: 0.9;
}
.orbital__hint {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #e0a93a;
  opacity: 0.7;
}
.orbital__stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 2rem;
  margin: 0.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(200, 134, 10, 0.22);
}
.orbital__stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.orbital__stat-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 1rem + 2vw, 2.75rem);
  line-height: 1;
  color: #f5ead2;
}
.orbital__stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c9b896;
  opacity: 0.8;
}
.orbital__cta {
  align-self: flex-start;
  margin-top: 0.5rem;
}
@media (min-width: 900px) {
  .orbital__layout {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
  }
}
.orbital__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(380px, 48vh, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.orbital__stage.is-dragging {
  cursor: grabbing;
}
.orbital__ring {
  position: relative;
  width: 100%;
  aspect-ratio: 1.6 / 1;
}
.orbital__now-showing {
  position: absolute;
  top: -5.5rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 3;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.9;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}
.orbital__bottle {
  position: absolute;
  top: 46%;
  left: 50%;
  width: clamp(210px, 25vw, 320px);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
.orbital__bottle img {
  width: 100%;
  height: 520px;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 14px 18px rgba(8, 5, 0, 0.45));
  transform-origin: bottom center;
  transition: none;
}

/* Per-bottle size normalisation — source PNGs are exported at different canvas
   ratios, so each gets a small scale nudge to land at roughly the same visual size. */
.orbital__bottle[data-target*="buccaneer"] img      { transform: scale(1.0); }
.orbital__bottle[data-target*="qe-vodka"] img       { transform: scale(1.05); }
.orbital__bottle[data-target*="georgievski"] img    { transform: scale(1.1); }
.orbital__bottle[data-target*="pink-mystique"] img  { transform: scale(1.0); }

/* Taller vodka bottles sit higher in the frame, so lift their hover name up a notch. */
.orbital__bottle[data-target*="georgievski"] .orbital__name,
.orbital__bottle[data-target*="qe-vodka"] .orbital__name { top: 8.5rem; }
.orbital__name,
.orbital__type {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 280ms var(--ease-soft);
  pointer-events: none;
  z-index: 3;
}
.orbital__name {
  top: 11rem;
  color: var(--accent, var(--gold));
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: clamp(0.68rem, 0.8vw, 0.8rem);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.orbital__type {
  display: none;
}
.orbital__bottle.is-hover {
  z-index: 4;
  filter: drop-shadow(0 10px 14px rgba(8, 5, 0, 0.5)) drop-shadow(0 0 8px var(--accent, rgba(200, 134, 10, 0.55)));
}
.orbital__bottle.is-hover .orbital__name,
.orbital__bottle.is-hover .orbital__type {
  opacity: 1;
}
.orbital__bottle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 8px;
  border-radius: 10px;
}

/* Prev/next arrows — mobile only (desktop uses the drag-to-rotate orbit). */
.orbital__arrow { display: none; }

/* Mobile — horizontal scroll-snap carousel (one bottle at a time) */
@media (max-width: 768px) {
  .orbital {
    padding: clamp(3.5rem, 8vh, 5rem) 0;
  }
  /* Arrows make the swipe affordance obvious, so the drag hint is redundant. */
  .orbital__now-showing { display: none; }
  /* Tighten the dark dead space below the carousel before the cream story. */
  .orbital { padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
  /* And trim the cream story breaker's padding so it isn't a tall white gap. */
  .story { padding-bottom: 0; }
  .story__inner { padding: clamp(2.5rem, 9vw, 4rem) 1.25rem clamp(2rem, 7vw, 3rem); }
  .orbital__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: var(--gold);
    color: #100b04;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(8, 5, 0, 0.45);
    -webkit-tap-highlight-color: transparent;
    transition: transform 160ms var(--ease-soft), background-color 160ms var(--ease-soft);
  }
  .orbital__arrow svg { width: 22px; height: 22px; display: block; }
  .orbital__arrow--prev { left: 0.75rem; }
  .orbital__arrow--next { right: 0.75rem; }
  .orbital__arrow:active { transform: translateY(-50%) scale(0.92); }
  .orbital__arrow:focus-visible {
    outline: 2px solid var(--cream);
    outline-offset: 3px;
  }
  /* The single grid column is minmax(auto, 1fr) by default, so the 80vw-wide
     carousel items force it (and the heading card) wider than the screen.
     Cap it at the container with minmax(0, 1fr) + min-width:0 on the items. */
  .orbital__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .orbital__heading,
  .orbital__stage {
    min-width: 0;
  }
  /* Keep the heading card inside the viewport — the desktop max-width + margin
     and the auto stats grid pushed it wider than a phone screen. Centre the
     content on mobile instead of the desktop left-alignment. */
  .orbital__heading {
    max-width: none;
    margin: 0 1rem;
    padding: clamp(1.5rem, 6vw, 2rem) clamp(1.25rem, 5vw, 1.6rem);
    align-items: center;
    text-align: center;
  }
  .orbital__lead { max-width: none; }
  .orbital__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .orbital__stat { align-items: center; }
  .orbital__cta { align-self: center; }
  .orbital__stage {
    height: auto;
    max-width: none;
    padding: 0;
    cursor: default;
    touch-action: auto;
    overflow: visible;
  }
  .orbital__ring {
    position: static;
    inset: auto;
    aspect-ratio: auto;
    display: flex;
    gap: 0;
    padding: 0 10vw;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 10vw;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .orbital__ring::-webkit-scrollbar { display: none; }
  .orbital__bottle {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 80vw;
    width: 80vw;
    min-height: 48px;
    padding: 1.5rem 1rem 1.5rem;
    margin: 0;
    transform: none !important;
    opacity: 1 !important;
    z-index: auto !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .orbital__bottle img {
    width: 100%;
    height: 320px;
    max-width: 240px;
    margin: 0 auto;
  }
  .orbital__name {
    top: 0.6rem;
    opacity: 1;
  }
  /* The desktop hover-name fix for the taller vodka bottles has higher
     specificity and was leaking onto mobile — pin it back to the top here. */
  .orbital__bottle[data-target*="georgievski"] .orbital__name,
  .orbital__bottle[data-target*="qe-vodka"] .orbital__name {
    top: 0.6rem;
  }
  .orbital__bottle.is-hover {
    filter: drop-shadow(0 8px 12px rgba(8, 5, 0, 0.5)) drop-shadow(0 0 7px var(--accent, rgba(200, 134, 10, 0.5)));
  }
}

/* ------------ Tetra Pak (homepage teaser — cinematic full-bleed hero) ------------
   Deliberately a third format, distinct from the Jerry's split and the
   Collection carousel: one photographic hero of the real cartons with an
   overlaid headline + CTA pointing to the full range. The catalogue grid
   below (.tetra__grid / .tetra-card) is kept for the tetra-pak.html page. */
.tetra {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(560px, 82vh, 820px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: #080500;
  color: var(--cream);
}
.tetra__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  z-index: 0;
  will-change: transform;
}
.tetra__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      #080500 0%,
      rgba(8, 5, 0, 0.82) 7%,
      rgba(8, 5, 0, 0.18) 24%,
      rgba(8, 5, 0, 0.55) 60%,
      rgba(8, 5, 0, 0.9) 85%,
      #080500 100%);
}
.tetra__content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  text-align: center;
  padding: clamp(3rem, 9vh, 5.5rem) 1.5rem clamp(3.5rem, 11vh, 6.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.3rem);
}
/* Soft spotlight behind the copy so the headline and sub separate cleanly from
   the busy cartons without hiding them. */
.tetra__content::before {
  content: "";
  position: absolute;
  inset: -10% -14%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 72% 76% at 50% 48%,
    rgba(8, 5, 0, 0.72) 0%,
    rgba(8, 5, 0, 0.5) 42%,
    rgba(8, 5, 0, 0) 80%);
}
.tetra__eyebrow {
  font-family: var(--font-body);
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.tetra__title {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--cream);
  font-size: clamp(2.6rem, 1rem + 7vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 6px 34px rgba(0, 0, 0, 0.55);
}
.tetra__title em {
  font-style: italic;
  color: #E5A93A;
}
.tetra__sub {
  font-family: var(--font-display);
  font-style: italic;
  color: rgba(248, 236, 210, 0.95);
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.5rem);
  line-height: 1.4;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}
.tetra__copy {
  margin: 0.3rem 0 0;
  font-family: var(--font-body);
  color: rgba(245, 230, 200, 0.9);
  font-size: clamp(0.98rem, 0.93rem + 0.35vw, 1.12rem);
  line-height: 1.65;
  max-width: 50ch;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}
.tetra__cta { margin-top: 0.6rem; }
.tetra__grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem clamp(4rem, 10vh, 7rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
  justify-items: stretch;
  position: relative;
}
.tetra__grid::before,
.tetra__grid::after {
  display: none;
}
.tetra-card {
  position: relative;
  width: 100%;
  background: var(--cream);
  border: 1px solid #C8860A;
  border-radius: 10px;
  box-shadow: 0 10px 26px -10px rgba(8, 5, 0, 0.28);
  padding: 0.85rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  text-align: center;
  gap: 0.4rem;
  overflow: hidden;
  isolation: isolate;
  height: clamp(320px, 46vh, 500px);
  box-sizing: border-box;
  transition:
    transform 420ms var(--ease-soft),
    box-shadow 420ms var(--ease-soft);
}
.tetra-card:hover,
.tetra-card:focus-within {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 22px 44px -16px rgba(0, 0, 0, 0.65),
    0 0 40px rgba(200, 134, 10, 0.55);
}
.tetra-card__visual {
  position: relative;
  width: 100%;
  flex: 0 0 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
}
.tetra-card__visual::before {
  display: none;
}
.tetra-card__visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  background: transparent;
  transition: transform 560ms var(--ease-soft);
}
.tetra-card:hover .tetra-card__visual img,
.tetra-card:focus-within .tetra-card__visual img {
  transform: translateY(-6px) rotate(-1.5deg);
}
.tetra-card__name {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3rem);
  line-height: 1.2;
  margin: 0;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tetra-card__type {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  color: var(--gold);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .tetra__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ------------ Products ------------ */
.products {
  background: var(--ink);
  color: var(--cream);
  position: relative;
}
.products__head {
  position: relative;
  padding: 6rem 1.25rem 3.5rem;
  text-align: center;
  max-width: none;
  margin: 0;
  background: var(--cream);
  color: var(--ink);
}
.products__head > * { max-width: 980px; margin-left: auto; margin-right: auto; }
.products__eyebrow { color: var(--gold); justify-content: center; display: inline-flex; }
.products__title {
  margin: 1rem auto 0.85rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 1rem + 7vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.products__title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 800;
}
.products__sub {
  color: var(--body-on-cream);
  max-width: 52ch;
  margin: 0 auto;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
}

.product {
  position: relative;
  min-height: 100dvh;
  padding: 6rem 1.25rem 5rem;
  background: var(--accent);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}
.product[data-contrast="dark"] { color: var(--ink); }
.product::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 70% at 85% 15%, rgba(255,255,255,0.18), transparent 60%),
    radial-gradient(60% 70% at 15% 95%, rgba(0,0,0,0.25), transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.product[data-contrast="dark"]::before {
  background:
    radial-gradient(55% 70% at 85% 15%, rgba(255,255,255,0.35), transparent 55%),
    radial-gradient(60% 70% at 15% 95%, rgba(0,0,0,0.14), transparent 60%);
}
.product__grid {
  position: relative;
  z-index: 3;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  align-items: center;
}

.product__text {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  order: 2;
}
.product__num {
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
}
.product__type {
  font-family: var(--font-script);
  font-size: clamp(1.55rem, 1.1rem + 2vw, 2.4rem);
  line-height: 1;
  color: var(--cream);
}
.product[data-contrast="dark"] .product__type { color: var(--accent-deep); }
.product__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.75rem, 1.4rem + 7vw, 6.75rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--cream);
  text-shadow: 0 4px 28px rgba(8, 5, 0, 0.18);
}
.product[data-contrast="dark"] .product__name { color: var(--ink); text-shadow: none; }
.product__name em { font-style: italic; color: var(--cream-2); font-weight: 800; }
.product[data-contrast="dark"] .product__name em { color: var(--accent-deep); }

.product__tag {
  margin: 0;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  font-weight: 500;
  opacity: 0.95;
}
.product__body {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  line-height: 1.55;
  opacity: 0.9;
}
.product__spec {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 1rem 0 0.6rem;
  border-top: 1px solid rgba(245, 230, 200, 0.3);
  border-bottom: 1px solid rgba(245, 230, 200, 0.3);
}
.product[data-contrast="dark"] .product__spec {
  border-top-color: rgba(8, 5, 0, 0.2);
  border-bottom-color: rgba(8, 5, 0, 0.2);
}
.product__spec > div {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(245, 230, 200, 0.18);
}
.product__spec > div:last-child { border-bottom: 0; }
.product[data-contrast="dark"] .product__spec > div { border-bottom-color: rgba(8, 5, 0, 0.12); }
.product__spec dt {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.7;
  align-self: center;
}
.product__spec dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
}
.product__cta { align-self: flex-start; }
.product[data-contrast="dark"] .product__cta { --btn-bg: var(--ink); --btn-fg: var(--cream); --btn-ico-bg: var(--cream); --btn-ico-fg: var(--ink); }

.product__visual {
  position: relative;
  height: clamp(360px, 60dvh, 680px);
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product__adinkra {
  position: absolute;
  inset: 50% 50% auto auto;
  transform: translate(50%, -50%);
  width: clamp(280px, 48vw, 520px);
  height: clamp(280px, 48vw, 520px);
  color: var(--accent-deep);
  opacity: 0.22;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
.product[data-contrast="dark"] .product__adinkra { color: var(--accent-deep); opacity: 0.18; }
.product__adinkra svg { width: 100%; height: 100%; }

.product__bottle {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}
.product__bottle img {
  max-height: 100%;
  max-width: 78%;
  filter: drop-shadow(0 40px 44px rgba(8, 5, 0, 0.55));
  animation: bottleFloat 9s ease-in-out infinite;
  transform-origin: 50% 70%;
}
.product[data-contrast="dark"] .product__bottle img { filter: drop-shadow(0 30px 40px rgba(8, 5, 0, 0.35)); }

/* ------------ XF — Xquizit Fizz (full-bleed cinematic video hero) ----------
   The homepage's loud, young counterpoint to the premium sections: a seamless
   looping product film of the cranberry + lemon cans fills the section, with
   the headline overlaid in the dark negative space. Teaser only — the full
   eight-flavour range lives on xf.html. */
.xf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #080500; /* matches the Tetra section above for a seamless seam */
  color: var(--cream);
}
/* Mobile-first: the film is a full-width banner stacked ABOVE the copy, so both
   cans read clearly and the headline sits on solid dark below — no text-over-
   cans. The desktop query below turns this into a full-bleed overlay. */
.xf__bg {
  position: relative;
  width: 100%;
  /* Tall portrait banner so the two cans fill the frame at full height and read
     big; the crop is biased onto the cans (the empty dark right is cut away). */
  aspect-ratio: 4 / 5;
  z-index: 0;
}
.xf__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 23% center;
}
/* Feather the banner's top into the dark Tetra section above and its bottom
   into the copy block below, so the cans rise out of the black and the text
   sits right on its lower edge with no hard seam or dead gap. */
.xf__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, #080500 0%, transparent 13%),
    linear-gradient(to top, #080500 0%, rgba(8, 5, 0, 0.7) 18%, transparent 42%);
}
/* The full-section directional scrim is a desktop-only overlay device. */
.xf__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: none;
}
.xf__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  margin-top: clamp(-5.5rem, -17vw, -3rem); /* lift the copy onto the banner's lower edge */
  display: flex;
  justify-content: center;
  padding: 0 1.25rem clamp(2.5rem, 9vw, 3.5rem);
}
.xf__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.7rem, 1.6vw, 1rem);
  max-width: 560px;
}
.xf__badge {
  align-self: center;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(229, 169, 58, 0.55);
  background: rgba(229, 169, 58, 0.14);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #E5A93A;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.xf__eyebrow {
  font-family: var(--font-body);
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.xf__title {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--cream);
  font-size: clamp(2.6rem, 1rem + 4.5vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
}
.xf__title em {
  font-style: italic;
  color: #E5A93A;
}
.xf__sub {
  font-family: var(--font-display);
  font-style: italic;
  color: rgba(245, 230, 200, 0.9);
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem);
  line-height: 1.4;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}
.xf__lead {
  margin: 0;
  font-family: var(--font-body);
  color: rgba(245, 230, 200, 0.8);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.08rem);
  line-height: 1.6;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}
.xf__cta { margin-top: 0.4rem; }

/* Desktop: full-bleed overlay — the film fills the section and the copy floats
   in the dark right-hand column. */
@media (min-width: 880px) {
  .xf { min-height: clamp(600px, 88vh, 880px); flex-direction: row; }
  /* Restore the covering background film + its directional scrim. */
  .xf__bg { position: absolute; inset: 0; aspect-ratio: auto; }
  .xf__bg::after { display: none; }
  .xf__video { height: 100%; object-position: center; }
  .xf__scrim {
    display: block;
    background:
      linear-gradient(to bottom, #080500 0%, rgba(8, 5, 0, 0.5) 8%, transparent 22%),
      linear-gradient(to right, transparent 0%, transparent 44%, rgba(10, 6, 8, 0.55) 68%, rgba(10, 6, 8, 0.86) 100%),
      linear-gradient(to top, rgba(10, 6, 8, 0.45) 0%, transparent 36%);
  }
  /* Widen the container + add right breathing room so the copy sits further
     into the dark right-hand space, better balancing the cans on the left. */
  .xf__inner {
    margin-top: 0;
    align-items: center;
    justify-content: flex-end;
    padding-block: 0;
    max-width: 1560px;
    padding-inline: clamp(1.5rem, 4vw, 3.25rem);
  }
  .xf__copy { align-items: flex-start; text-align: left; }
  .xf__badge { align-self: flex-start; }
}

/* ============ XF Cans page (xf.html) — loud neon range ============ */
.xfp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(560px, 90vh, 900px);
  display: flex;
  align-items: flex-start; /* copy lives in the upper dark space; the cans sit low in the film */
  background: #080500;
  color: var(--cream);
}
.xfp-hero__bg { position: absolute; inset: 0; z-index: 0; }
.xfp-hero__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 72%; }
.xfp-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Light "spotlight" just behind the text rows — enough to seat the copy on
       the bright cans (the text also carries its own shadow), not enough to
       drown the lineup. */
    radial-gradient(78% 46% at 50% 30%, rgba(8, 5, 0, 0.52) 0%, rgba(8, 5, 0, 0.22) 48%, transparent 72%),
    /* Gentle top darken for the headline + nav legibility. */
    linear-gradient(to bottom, rgba(8, 5, 0, 0.42) 0%, transparent 32%),
    /* Dissolve the video's bottom edge into the range section below (its exact
       #0a0608) so the hero flows into "The Range" with no hard seam — solid at
       the very bottom, easing off before it reaches the can labels. */
    linear-gradient(to top, #0a0608 0%, #0a0608 5%, rgba(10, 6, 8, 0.68) 16%, rgba(10, 6, 8, 0.3) 30%, transparent 46%);
}
.xfp-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(5.5rem, 17vh, 11rem) 1.25rem clamp(2.5rem, 8vh, 4.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.8rem, 2vw, 1.2rem);
}
.xfp-hero__eyebrow {
  font-family: var(--font-body);
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.xfp-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--cream);
  font-size: clamp(2.8rem, 1rem + 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 6px 36px rgba(0, 0, 0, 0.5);
}
.xfp-hero__title em { font-style: italic; color: #E5A93A; }
.xfp-hero__sub {
  font-family: var(--font-display);
  font-style: italic;
  color: rgba(245, 230, 200, 0.92);
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
  line-height: 1.4;
  margin: 0;
  max-width: 620px;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.9), 0 1px 4px rgba(0, 0, 0, 0.75);
}
.xfp-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 230, 200, 0.82);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9);
}
.xfp-hero__meta span { display: inline-flex; align-items: center; gap: 0.6rem; }
.xfp-hero__meta span + span::before {
  content: "";
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
  margin-right: 0.6rem;
}

/* Range grid */
.xfp {
  background:
    /* Glow sits well inside the section, not at the top edge, so the seam with
       the hero above stays a neutral #0a0608 on both sides. */
    radial-gradient(70% 50% at 50% 42%, rgba(216, 30, 91, 0.1), transparent 72%),
    #0a0608;
  color: var(--cream);
  padding: clamp(3rem, 8vh, 6rem) 1.25rem clamp(3.5rem, 10vh, 7rem);
}
.xfp__head {
  max-width: 760px;
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.xfp__eyebrow {
  font-family: var(--font-body);
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.xfp__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1rem + 3vw, 3.2rem);
  line-height: 1;
  margin: 0;
  color: var(--cream);
}
.xfp__lead {
  font-family: var(--font-body);
  color: rgba(245, 230, 200, 0.72);
  font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.1rem);
  line-height: 1.6;
  margin: 0;
}
.xfp__grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.8rem, 2vw, 1.5rem);
}
@media (min-width: 720px) {
  .xfp__grid { grid-template-columns: repeat(4, 1fr); }
}

.xfp-can {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(1.5rem, 3vw, 2.25rem) 1rem clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.28));
  border: 1px solid rgba(245, 230, 200, 0.1);
  transition: transform 320ms var(--ease-soft), border-color 320ms ease, box-shadow 320ms ease;
}
/* Per-flavour accent glow blooming from behind the can. */
.xfp-can::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 28% 0;
  height: 58%;
  background: radial-gradient(60% 60% at 50% 45%, var(--accent), transparent 70%);
  opacity: 0.16;
  filter: blur(14px);
  transition: opacity 320ms ease;
}
.xfp-can:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 30px -4px var(--accent);
}
.xfp-can:hover::before { opacity: 0.36; }
.xfp-can__visual {
  height: clamp(170px, 30vw, 240px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 1rem;
}
.xfp-can__visual img {
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5));
  transition: transform 420ms var(--ease-soft);
}
.xfp-can:hover .xfp-can__visual img { transform: translateY(-4px) scale(1.03); }
.xfp-can__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.3rem);
  line-height: 1.05;
  margin: 0;
  color: var(--cream);
}
.xfp-can__type {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.55rem;
  font-weight: 700;
}
.xfp-can__note {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(245, 230, 200, 0.62);
  margin: 0.5rem 0 0;
  line-height: 1.45;
}

/* Closing CTA band */
.xfp-cta {
  background: #080500;
  color: var(--cream);
  text-align: center;
  padding: clamp(3rem, 8vh, 5rem) 1.25rem;
}
.xfp-cta__inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.xfp-cta__eyebrow {
  font-family: var(--font-body);
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.xfp-cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1rem + 3vw, 3rem);
  line-height: 1.02;
  margin: 0;
}
.xfp-cta__title em { font-style: italic; color: #E5A93A; }
.xfp-cta__sub {
  font-family: var(--font-body);
  color: rgba(245, 230, 200, 0.7);
  margin: 0;
  line-height: 1.6;
}

/* ------------ Contact ------------ */
.contact {
  position: relative;
  padding: 6rem 1.25rem 6.5rem;
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.contact::before {
  content: "";
  position: absolute;
  inset: -20% -20% auto auto;
  width: 80vw;
  height: 80vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(closest-side, rgba(200, 134, 10, 0.35), transparent 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.contact::after {
  content: "";
  position: absolute;
  inset: auto auto -30% -20%;
  width: 70vw;
  height: 70vw;
  max-width: 700px;
  max-height: 700px;
  background: radial-gradient(closest-side, rgba(136, 0, 255, 0.35), transparent 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.contact__inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact__eyebrow { color: var(--gold); }
.contact__headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 1.3rem + 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.contact__headline em { font-style: italic; color: var(--gold-soft); font-weight: 800; }
.contact__body { max-width: 56ch; color: var(--body-on-ink); margin: 0; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); }

.contact__mail {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem 1rem 1.5rem;
  margin: 0.75rem 0 0.5rem;
  border-radius: 999px;
  background: rgba(245, 230, 200, 0.07);
  border: 1px solid rgba(245, 230, 200, 0.22);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 0.95rem + 0.8vw, 1.6rem);
  letter-spacing: -0.005em;
  transition: background 360ms var(--ease-soft), border-color 360ms var(--ease-soft), transform 360ms var(--ease-soft);
  word-break: break-word;
}
.contact__mail:hover {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.contact__mail-ico {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  flex-shrink: 0;
  transition: transform 360ms var(--ease-soft), background 360ms var(--ease-soft);
}
.contact__mail:hover .contact__mail-ico { background: var(--ink); color: var(--gold); transform: translate(4px, -2px) rotate(-12deg); }

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 0.75rem;
  border-top: 1px solid rgba(245, 230, 200, 0.14);
  padding-top: 1.5rem;
}
.contact__grid > div { display: flex; flex-direction: column; gap: 0.3rem; }
.contact__label { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--body-on-ink); }
.contact__line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 0.95rem + 0.5vw, 1.3rem);
  transition: color 300ms var(--ease-soft);
}
.contact__line:hover { color: var(--gold-soft); }

/* ------------ Footer ------------ */
.footer {
  background: var(--ink-2);
  color: var(--cream-2);
  position: relative;
  overflow: hidden;
}
.footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.25rem 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.footer__logo {
  width: clamp(132px, 20vw, 184px);
  /* The PNG carries ~25% empty canvas above the antler; crop tight to the mark
     so the footer doesn't open with a big dead gap. */
  aspect-ratio: 1.18;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center 58%;
  /* Dark-grey antler PNG → gold #C8860A tint */
  filter: brightness(0) saturate(100%) invert(60%) sepia(59%) saturate(745%) hue-rotate(5deg) brightness(88%) contrast(90%) drop-shadow(0 12px 20px rgba(200, 134, 10, 0.25));
}
.footer__tag {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  color: var(--gold-soft);
}
.footer__grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
  text-align: left;
  border-top: 1px solid rgba(245, 230, 200, 0.1);
  padding-top: 2rem;
}
.footer__col { display: flex; flex-direction: column; gap: 0.45rem; }
.footer__col h4 {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.footer__col a, .footer__col p { color: var(--body-on-ink); margin: 0; font-size: 0.95rem; }
.footer__col a { transition: color 300ms var(--ease-soft); }
.footer__col a:hover { color: var(--gold-soft); }
.footer__small { margin-top: 1.5rem; font-size: 0.78rem; color: var(--body-on-ink); letter-spacing: 0.04em; }
.footer__copy { margin: 0; font-size: 0.78rem; color: var(--body-on-ink); opacity: 0.8; letter-spacing: 0.04em; }
.footer__kente {
  height: 14px;
  background: var(--kente);
  opacity: 0.95;
}

/* ------------ Gold button variant ------------ */
.btn--gold {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
  --btn-ico-bg: var(--ink);
  --btn-ico-fg: var(--gold);
}
.btn--gold:hover { background: var(--gold-soft); }

/* ------------ Collection hero (products page) ------------ */
.collection-hero {
  position: relative;
  min-height: 60vh;
  padding: calc(var(--nav-h) + 3.5rem) 1.25rem 4rem;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(200, 134, 10, 0.18), transparent 55%),
    radial-gradient(120% 90% at 80% 100%, rgba(136, 0, 255, 0.22), transparent 55%),
    var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.collection-hero__kente {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  background: var(--kente);
  background-size: 100% auto;
  filter: saturate(1.2);
  z-index: 2;
  opacity: 0.95;
}
.collection-hero__kente--left  { left: 0; }
.collection-hero__kente--right { right: 0; transform: scaleX(-1); }
.collection-hero__inner {
  position: relative;
  z-index: 3;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.collection-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.collection-hero__eyebrow i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(200, 134, 10, 0.18);
  animation: pulse 2.2s ease-in-out infinite;
}
.collection-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--cream);
  font-size: clamp(3rem, 1.4rem + 9vw, 7.5rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.collection-hero__title em {
  font-style: italic;
  color: var(--gold-soft);
  font-weight: 800;
}
.collection-hero__sub {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--cream-2);
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.7rem);
  max-width: 36ch;
}

/* ------------ Premium bottles grid ------------ */
.premium {
  background: var(--cream);
  color: var(--ink);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.premium__head {
  text-align: center;
  padding: calc(var(--nav-h) + clamp(2rem, 5vh, 3rem)) 1.25rem clamp(2rem, 5vh, 3rem);
  max-width: 920px;
  margin: 0 auto;
}
.premium__eyebrow {
  font-family: var(--font-body);
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 1rem;
}
.premium__title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--ink);
  font-size: clamp(2.4rem, 1rem + 6.5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.premium__title em {
  font-style: italic;
  color: var(--gold);
  font-weight: 800;
}
.premium__sub {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--body-on-cream);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  max-width: 48ch;
  margin: 0 auto;
}
.premium__grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem clamp(4rem, 10vh, 7rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 2vw, 1.75rem);
  align-items: stretch;
}

.premium-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  background: var(--accent, var(--ink));
  color: var(--cream);
  box-shadow: 0 18px 40px -22px rgba(8, 5, 0, 0.45);
  min-height: 460px;
  scroll-margin-top: calc(var(--nav-h) + 1rem);
  transition:
    transform 420ms var(--ease-soft),
    box-shadow 420ms var(--ease-soft);
}
.premium-card[data-contrast="dark"] { color: var(--ink); }
.premium-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 85% 12%, rgba(255, 255, 255, 0.2), transparent 60%),
    radial-gradient(60% 70% at 15% 95%, rgba(0, 0, 0, 0.28), transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.premium-card[data-contrast="dark"]::before {
  background:
    radial-gradient(60% 70% at 85% 12%, rgba(255, 255, 255, 0.38), transparent 55%),
    radial-gradient(60% 70% at 15% 95%, rgba(0, 0, 0, 0.12), transparent 60%);
}
.premium-card:hover,
.premium-card:focus-within {
  transform: translateY(-6px);
  box-shadow:
    0 30px 60px -24px rgba(8, 5, 0, 0.55),
    0 0 0 1px rgba(200, 134, 10, 0.28);
}
.premium-card__visual {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  height: clamp(240px, 34vh, 320px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 0.5rem;
}
.premium-card__visual img {
  max-width: 75%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45));
  transition: transform 560ms var(--ease-soft);
}
.premium-card:hover .premium-card__visual img,
.premium-card:focus-within .premium-card__visual img {
  transform: translateY(-6px) rotate(-1.4deg) scale(1.02);
}
.premium-card__body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.4rem 1.5rem;
  text-align: center;
}
.premium-card__type {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.85;
}
.premium-card[data-contrast="dark"] .premium-card__type { color: var(--accent-deep); opacity: 1; }
.premium-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 0.9rem + 1.2vw, 1.85rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.premium-card[data-contrast="dark"] .premium-card__name { color: var(--ink); }
.premium-card__tag {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  line-height: 1.3;
  opacity: 0.9;
}
.premium-card[data-contrast="dark"] .premium-card__tag { color: var(--accent-deep); opacity: 1; }
.premium-card__cta {
  align-self: flex-start;
  margin-top: auto;
}

@media (min-width: 640px) {
  .premium__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .premium__grid { grid-template-columns: repeat(4, 1fr); }
  .premium__head { padding: clamp(5rem, 10vh, 8rem) 2rem clamp(2.5rem, 6vh, 4rem); }
  .premium__grid { padding: 0 2rem clamp(5rem, 10vh, 8rem); }
}

/* ------------ Contact CTA (products page) ------------ */
.contact-cta {
  position: relative;
  padding: clamp(4.5rem, 10vh, 7rem) 1.25rem clamp(5rem, 12vh, 8rem);
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.contact-cta::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 70vw;
  height: 70vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(closest-side, rgba(200, 134, 10, 0.35), transparent 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.contact-cta::after {
  content: "";
  position: absolute;
  inset: auto auto -25% -20%;
  width: 60vw;
  height: 60vw;
  max-width: 640px;
  max-height: 640px;
  background: radial-gradient(closest-side, rgba(136, 0, 255, 0.3), transparent 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.contact-cta__inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.contact-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.contact-cta__eyebrow i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(200, 134, 10, 0.18);
  animation: pulse 2.2s ease-in-out infinite;
}
.contact-cta__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 1.1rem + 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.contact-cta__title em {
  font-style: italic;
  color: var(--gold-soft);
  font-weight: 800;
}
.contact-cta__sub {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--cream-2);
  opacity: 0.9;
  font-size: clamp(1rem, 0.9rem + 0.55vw, 1.35rem);
  max-width: 48ch;
}
.contact-cta__actions {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

/* ------------ Breakpoints ------------ */
@media (min-width: 640px) {
  .products__head { padding: 7rem 2rem 4rem; }
  .product { padding: 7rem 2rem 6rem; }
  .contact { padding: 7rem 2rem; }
  .footer__inner { padding: 5rem 2rem 2.5rem; }
  .product__visual { height: clamp(420px, 65dvh, 740px); }

  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product__spec { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 0; }
  .product__spec > div {
    border-bottom: 0;
    border-right: 1px solid rgba(245, 230, 200, 0.22);
    padding: 0.35rem 1rem 0.35rem 0;
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .product[data-contrast="dark"] .product__spec > div { border-right-color: rgba(8, 5, 0, 0.2); }
  .product__spec > div:last-child { border-right: 0; }
}

@media (min-width: 900px) {
  .nav__toggle { display: none; }
  .nav__antler { width: 96px; height: 96px; }
  .nav__links { display: inline-flex; }

  .products__head { padding: 9rem 3rem 5rem; }
  .product { padding: 8rem 3rem 7rem; }
  .product__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
  .product__text { order: 1; }
  .product__visual { order: 2; height: clamp(520px, 72dvh, 780px); }
  .product:nth-of-type(even) .product__text { order: 2; }
  .product:nth-of-type(even) .product__visual { order: 1; }
  .product:nth-of-type(even) .product__adinkra { inset: 50% auto auto 50%; transform: translate(-50%, -50%); }

  .contact { padding: 9rem 3rem 10rem; }
  .footer__inner { padding: 6rem 3rem 3rem; }
}

@media (min-width: 1200px) {
  .products__head { padding: 10rem 4rem 6rem; }
  .product { padding: 10rem 4rem 8rem; }
  .contact { padding: 10rem 4rem 12rem; }
  .footer__inner { padding: 7rem 4rem 3rem; }
}

@media (min-width: 1440px) {
  .product__name { font-size: 7.25rem; }
}

/* ------------ Line-split heading wrappers (spec entrance) ------------ */
.split-word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  vertical-align: top;
  line-height: inherit;
}
.split-word__inner {
  display: inline-block;
  will-change: transform, opacity;
  backface-visibility: hidden;
  line-height: inherit;
}

/* ------------ will-change hints for animated elements ------------ */
.hero__eyebrow,
.hero__title,
.hero__sub,
.hero__actions > *,
.hero__media,
.jerrys__head > *,
.jerrys__copy > *,
.jerrys__photo-bg,
.story__headline .word > span,
.orbital__display,
.orbital__stage,
.tetra__bg,
.tetra__content > *,
.tetra-card,
.products__head > *,
.product__bottle,
.product__text > *,
.contact__inner > *,
.collection-hero__eyebrow,
.collection-hero__title,
.collection-hero__sub,
.collection-hero__kente,
.premium__head > *,
.premium-card,
.contact-cta__inner > *,
.footer__inner > *,
.footer__kente {
  will-change: transform, opacity;
}

/* ------------ Reduced motion ------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .product__bottle img { animation: none !important; transform: none !important; }
  .loader__antler { animation: none !important; }
  /* Show every element the pre-anim gate would have hidden, at full opacity. */
  body .nav__brand,
  body .nav__links > a,
  body .nav__dropdown,
  body .nav__toggle,
  body .hero__eyebrow,
  body .hero__title,
  body .hero__sub,
  body .hero__actions > *,
  body .hero__media,
  body .story__headline .word > span,
  body .orbital__display,
  body .orbital__stage,
  body .tetra__content > *,
  body .tetra-card,
  body .products__head > *,
  body .product__bottle,
  body .product__text > *,
  body .contact__inner > *,
  body .collection-hero__eyebrow,
  body .collection-hero__title,
  body .collection-hero__sub,
  body .collection-hero__kente,
  body .premium__head > *,
  body .premium-card,
  body .contact-cta__inner > *,
  body .jerrys__head > *,
  body .jerrys__copy > *,
  body .footer__inner > *,
  body .footer__kente,
  body .split-word__inner {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Section transition gradients
   Each section has a bottom fade into the next section's colour.
   80px height. No top fades. .story (text breaker) intentionally has none.
   ========================================================================== */

/* Story (cream) -> espresso: solid brown top so the cream edge stays crisp */
.jerrys:first-of-type::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, #1E0E02 0%, transparent 100%);
  pointer-events: none;
  z-index: 3;
}
/* Espresso -> negroni: both brown, so no bottom fade — they read as a
   mirrored pair (image flips side, accent colour changes). */


/* .tetra -> .contact / .contact-cta (dark) */
.tetra::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent 0%, #080500 100%);
  pointer-events: none;
  z-index: 2;
}

/* .collection-hero -> .premium (products page, dark -> cream) */
.collection-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent 0%, var(--cream) 100%);
  pointer-events: none;
  z-index: 2;
}

/* ------------ Product hero (individual product pages) ------------ */
.product-hero {
  position: relative;
  min-height: 100vh;
  background: var(--accent, var(--ink));
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
  padding-top: 90px;
  display: flex;
  flex-direction: column;
}
.product-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(0,0,0,0.45) 0%, transparent 65%),
    radial-gradient(ellipse at 30% 50%, rgba(0,0,0,0.35) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
}
.product-hero__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(2rem, 5vh, 4rem) clamp(1.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
.product-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-hero__visual::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 40%, transparent 70%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}
.product-hero__bottle {
  position: relative;
  z-index: 1;
  max-width: 80%;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.5)) drop-shadow(0 0 80px rgba(255,255,255,0.1));
}
.product-hero__text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.product-hero__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.85;
}
.product-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 1rem + 5.5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.product-hero__tagline {
  margin: 0;
  font-style: italic;
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem);
  color: var(--cream);
  opacity: 0.95;
}
.product-hero__body {
  margin: 0;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--cream);
  opacity: 0.85;
  max-width: 480px;
}
.product-hero__facts {
  list-style: none;
  padding: 1.25rem 0;
  margin: 0.5rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1.5rem;
  border-top: 1px solid rgba(245,230,200,0.2);
  border-bottom: 1px solid rgba(245,230,200,0.2);
}
.product-hero__facts li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.product-hero__facts span {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.6;
}
.product-hero__facts strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--cream);
}
.product-hero__cta {
  align-self: flex-start;
  margin-top: 0.5rem;
}
.product-hero__back {
  font-size: 0.85rem;
  color: var(--cream);
  opacity: 0.7;
  text-decoration: none;
  transition: opacity 250ms;
  margin-top: 0.5rem;
}
.product-hero__back:hover { opacity: 1; }

@media (min-width: 900px) {
  .product-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

/* Prev/next navigation between product pages */
.product-nav {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(2rem, 5vh, 3.5rem);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.product-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--cream);
  opacity: 0.75;
  transition: opacity 250ms;
}
.product-nav__link:hover { opacity: 1; }
.product-nav__link--next { text-align: right; }
.product-nav__dir {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
}
.product-nav__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

/* ------------ Catalog (products.html grid) ------------ */
.catalog {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(6rem, 12vh, 9rem) clamp(1.5rem, 5vw, 4rem) clamp(4rem, 8vh, 6rem);
}
.catalog__head {
  max-width: 1200px;
  margin: 0 auto 3.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.catalog__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.catalog__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  line-height: 1;
  color: var(--ink);
}
.catalog__lead {
  margin: 0;
  max-width: 540px;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.6;
  opacity: 0.8;
}
.catalog__group {
  max-width: 1200px;
  margin: 0 auto 4rem;
}
.catalog__group-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  margin: 0 0 1.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(8, 5, 0, 0.15);
  color: var(--ink);
}
.catalog__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.prod-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(8, 5, 0, 0.08);
  transition: transform 360ms var(--ease-soft), box-shadow 360ms var(--ease-soft);
  border-top: 4px solid var(--accent);
}
.prod-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(8, 5, 0, 0.16);
}
.prod-card__visual {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, #fff) 0%, #fff 100%);
}
.prod-card__visual img {
  max-height: 100%;
  max-width: 60%;
  object-fit: contain;
}
.prod-card__meta {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.prod-card__type {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.prod-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
}
.prod-card__link {
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.6;
  margin-top: 0.25rem;
}

@media (min-width: 700px) {
  .catalog__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .catalog__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ------------ Nav dropdown ------------ */
.nav__dropdown {
  position: relative;
  display: inline-block;
}
.nav__dropdown-trigger {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  letter-spacing: inherit;
  text-transform: inherit;
}
.nav__caret {
  font-size: 0.7em;
  transition: transform 250ms var(--ease-soft);
}
.nav__dropdown:hover .nav__caret,
.nav__dropdown:focus-within .nav__caret,
.nav__dropdown.is-open .nav__caret {
  transform: rotate(180deg);
}
.nav__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 200px;
  background: var(--ink);
  border: 1px solid rgba(200, 134, 10, 0.25);
  border-radius: 8px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms var(--ease-soft), transform 220ms var(--ease-soft), visibility 220ms;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  z-index: 200;
}
/* Invisible bridge spanning the gap between the trigger and the menu so the
   hover state isn't lost when the cursor crosses it (which dropped the menu). */
.nav__dropdown-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu,
.nav__dropdown.is-open .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(4px);
}
.nav__dropdown-menu a {
  padding: 0.65rem 0.85rem;
  border-radius: 5px;
  color: var(--cream);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 200ms, color 200ms;
}
.nav__dropdown-menu a:hover {
  background: rgba(200, 134, 10, 0.15);
  color: var(--gold);
}

/* Mobile overlay — Products as a nested group instead of a hover dropdown */
.menu-overlay__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.menu-overlay__heading {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}
.menu-overlay__sublist {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-left: 1px solid rgba(200, 134, 10, 0.25);
}
.menu-overlay__sublist a {
  display: inline-flex;
  font-size: 1rem;
  color: var(--cream);
  text-decoration: none;
  padding: 0.35rem 0;
}
.menu-overlay__sublist a:hover {
  color: var(--gold);
}

/* ============ Tetra Pak page (tetra-pak.html) ============
   Reuses the existing .tetra hero + .tetra__grid / .tetra-card styles. These
   wrap the standalone page: a dark band behind the carton grid and its head. */
.tetra-range {
  /* A touch deeper than the bright cream cards so they read as lifted tiles. */
  background: #EBDAB0;
  color: var(--ink);
  padding: clamp(3rem, 8vh, 5.5rem) 0 0;
}
.tetra-range__head {
  max-width: 760px;
  margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
  padding: 0 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
/* The shared .xfp__ head classes are cream-on-dark; recolour them for the
   light range section. */
.tetra-range .xfp__title { color: var(--ink); }
.tetra-range .xfp__lead { color: rgba(8, 5, 0, 0.68); }
/* The standalone tetra hero swaps the static .tetra__bg image for a video;
   open the framing up (the shared image rule pins to center 38% for the index
   teaser, which crops the beach clip too high). Scoped to the <video> only. */
video.tetra__bg { object-position: center center; }
/* On the standalone page the busy carton photo is gone, so the boxy radial
   spotlight behind the copy (.tetra__content::before) reads as a hard dark
   rectangle. Drop it and bake a big, edgeless full-section vignette into the
   scrim instead — keeps the headline legible over the bright beach with no box.
   Scoped to .tetra-page so the index teaser keeps its original treatment. */
.tetra-page .tetra__content::before { display: none; }
.tetra-page .tetra__scrim {
  background:
    radial-gradient(125% 95% at 50% 40%,
      rgba(8, 5, 0, 0.6) 0%,
      rgba(8, 5, 0, 0.32) 42%,
      rgba(8, 5, 0, 0) 74%),
    linear-gradient(to bottom,
      rgba(8, 5, 0, 0.55) 0%,
      rgba(8, 5, 0, 0.12) 24%,
      rgba(8, 5, 0, 0.3) 62%,
      rgba(8, 5, 0, 0.86) 100%);
}

/* Trade-enquiry CTA lives inside the cream range section now (no separate black
   band). Tighten the grid's bottom gap and seat the copy + button on the cream,
   so the cartons and the ask read as one continuous section. */
.tetra-page .tetra__grid { padding-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.tetra-range__cta {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.25rem) 1.5rem clamp(4rem, 9vh, 6.5rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.tetra-range__cta-eyebrow {
  font-family: var(--font-body);
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.tetra-range__cta-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.85rem, 1rem + 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tetra-range__cta-title em { font-style: italic; color: var(--gold); }
.tetra-range__cta-sub {
  margin: 0;
  font-family: var(--font-body);
  color: rgba(8, 5, 0, 0.66);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem);
  line-height: 1.6;
  max-width: 46ch;
}

/* ============ Premium Bottles page — video hero (premium-bottles.html) ======
   Full-bleed loop of coloured ink dispersing through black, with the headline
   centred in the dark well of the frame. Mirrors the .xfp-hero / .tetra video-
   hero pattern; the cream .catalog grid below picks the nav back up via
   .is-scrolled. The seven bottles live in that grid, not here. */
.prem-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(560px, 88vh, 900px);
  display: flex;
  align-items: center;
  background: #080500;
  color: var(--cream);
}
.prem-hero__bg { position: absolute; inset: 0; z-index: 0; }
.prem-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.prem-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* soft pool behind the copy so the headline reads against the ink */
    radial-gradient(60% 48% at 50% 50%, rgba(8, 5, 0, 0.62) 0%, rgba(8, 5, 0, 0.28) 46%, transparent 74%),
    /* darken the top for nav legibility */
    linear-gradient(to bottom, rgba(8, 5, 0, 0.5) 0%, rgba(8, 5, 0, 0.1) 22%, transparent 38%),
    /* meet the cream catalog below with a clean, slightly darker base */
    linear-gradient(to top, rgba(8, 5, 0, 0.5) 0%, rgba(8, 5, 0, 0.16) 14%, transparent 34%);
}
.prem-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(6rem, 14vh, 9rem) 1.25rem clamp(4rem, 10vh, 6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.8rem, 2vw, 1.2rem);
}
.prem-hero__eyebrow {
  font-family: var(--font-body);
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.prem-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--cream);
  font-size: clamp(2.8rem, 1rem + 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 6px 36px rgba(0, 0, 0, 0.55);
}
.prem-hero__title em { font-style: italic; color: #E5A93A; }
.prem-hero__sub {
  font-family: var(--font-display);
  font-style: italic;
  color: rgba(245, 230, 200, 0.92);
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
  line-height: 1.4;
  margin: 0;
  max-width: 620px;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.9), 0 1px 4px rgba(0, 0, 0, 0.75);
}
.prem-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  margin-top: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9);
}
.prem-hero__meta span { display: inline-flex; align-items: center; gap: 0.6rem; }
.prem-hero__meta span + span::before {
  content: "";
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
  margin-right: 0.6rem;
}
@media (max-width: 760px) {
  .prem-hero { min-height: clamp(440px, 72vh, 620px); }
}

/* ============ Premium Bottles page hero (premium-bottles.html) ============
   Light/cream hero that sits above the existing cream .catalog grid. */
.cat-hero {
  background: var(--cream);
  color: var(--ink);
  text-align: center;
  padding: clamp(7rem, 18vh, 11rem) 1.25rem clamp(2.5rem, 6vh, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.2rem);
}
.cat-hero__eyebrow {
  font-family: var(--font-body);
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.cat-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.8rem, 1rem + 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.cat-hero__title em { font-style: italic; color: var(--gold); }
.cat-hero__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
  line-height: 1.4;
  margin: 0;
  max-width: 600px;
  color: rgba(8, 5, 0, 0.72);
}
.cat-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.4rem;
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(8, 5, 0, 0.6);
}
.cat-hero__meta span + span::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
  margin-right: 1.4rem;
  vertical-align: middle;
}
/* When a hero precedes the catalog, drop the catalog's big top padding. */
.catalog--flush { padding-top: clamp(1.5rem, 4vh, 3rem); }

/* ============ Premium Bottles — flagship "colour world" cards ============
   Scoped to .premium-page so products.html keeps the plain white prod-card.
   Each card IS the product's colour world: a bright spotlight centre so the big
   bottle pops, deepening to the accent at the edges. Fewer columns + a portrait
   visual make the bottle large; a soft-tinted strip carries the label. */
/* Dark gallery ground so the vibrant colour tiles pop; a warm near-black at the
   top flows out of the dark hero and into the dark footer below. */
.premium-page .catalog {
  background:
    radial-gradient(120% 90% at 50% 0%, #170D05 0%, #0A0602 55%, #080500 100%);
}
.premium-page .catalog__grid {
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 640px) {
  .premium-page .catalog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .premium-page .catalog__grid { grid-template-columns: repeat(3, 1fr); }
}
/* The whole card is one colour-world tile — no separate white strip. The label
   sits on the darkened bottom of the gradient in white. */
.premium-page .prod-card {
  border-top: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--accent) 55%, #000);
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--accent) 84%, #000) 0%,
      color-mix(in srgb, var(--accent) 45%, transparent) 20%,
      transparent 38%),
    radial-gradient(ellipse 86% 60% at 50% 38%,
      color-mix(in srgb, var(--accent) 20%, #fff) 0%,
      color-mix(in srgb, var(--accent) 62%, #fff) 40%,
      var(--accent) 78%,
      color-mix(in srgb, var(--accent) 84%, #000) 100%);
}
.premium-page .prod-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 64px -20px color-mix(in srgb, var(--accent) 62%, #000);
}
.premium-page .prod-card__visual {
  background: none;
  aspect-ratio: 1 / 1.08;
  padding: clamp(1.5rem, 3vw, 2.5rem) 1.25rem 0;
}
.premium-page .prod-card__visual img {
  max-width: 80%;
  max-height: 92%;
  filter: drop-shadow(0 28px 32px rgba(0, 0, 0, 0.5));
  -webkit-box-reflect: below 0 linear-gradient(transparent 60%, rgba(0, 0, 0, 0.15));
  transition: transform 540ms var(--ease-soft);
}
.premium-page .prod-card:hover .prod-card__visual img {
  transform: translateY(-6px) scale(1.04);
}
.premium-page .prod-card__meta {
  background: none;
  padding: 0.4rem 1.4rem 1.5rem;
  gap: 0.3rem;
}
.premium-page .prod-card__type { color: rgba(255, 255, 255, 0.85); }
.premium-page .prod-card__name { color: #fff; }
.premium-page .prod-card__link { color: rgba(255, 255, 255, 0.78); }

/* Trade-enquiry CTA lives as a grid cell that fills the empty space beside the
   lone seventh bottle (spans the two leftover columns on wider screens). */
.premium-page .prod-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.1rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: var(--cream);
}
@media (min-width: 640px) {
  .premium-page .prod-cta { grid-column: span 2; }
}
.premium-page .prod-cta__eyebrow {
  font-family: var(--font-body);
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.premium-page .prod-cta__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1rem + 2.6vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.premium-page .prod-cta__title em { font-style: italic; color: #E5A93A; }
.premium-page .prod-cta__sub {
  margin: 0;
  font-family: var(--font-body);
  color: rgba(245, 230, 200, 0.72);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.6;
  max-width: 42ch;
}

/* ============ Contact / trade-enquiry page (contact.html) ============
   Dark page (flows from the light nav into the dark footer) with a cream form
   card and a gold-bordered direct-contact column. */
.cform {
  background: radial-gradient(120% 90% at 50% 0%, #170D05 0%, #0A0602 55%, #080500 100%);
  color: var(--cream);
  min-height: 100vh;
  padding: calc(var(--nav-h) + clamp(2.5rem, 7vh, 5rem)) clamp(1.25rem, 5vw, 4rem) clamp(3.5rem, 9vh, 6rem);
}
.cform__inner { max-width: 1100px; margin: 0 auto; }
.cform__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(2.25rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.cform__eyebrow {
  font-family: var(--font-body);
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.cform__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 1rem + 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.cform__title em { font-style: italic; color: #E5A93A; }
.cform__sub {
  margin: 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.6;
  color: rgba(245, 230, 200, 0.74);
  max-width: 56ch;
}
.cform__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 880px) {
  .cform__grid { grid-template-columns: 1.5fr 1fr; }
}
.cform__form {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(200, 134, 10, 0.28);
  color: var(--cream);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.75);
}
.cform__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 560px) {
  .cform__row { grid-template-columns: 1fr 1fr; }
}
.cform__field { display: flex; flex-direction: column; gap: 0.4rem; }
.cform__field > span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.cform__field > span em {
  font-style: normal;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  color: rgba(245, 230, 200, 0.5);
}
.cform__field input,
.cform__field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--cream);
  background: rgba(8, 5, 0, 0.45);
  border: 1px solid rgba(245, 230, 200, 0.18);
  border-radius: 9px;
  padding: 0.7rem 0.85rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.cform__field input::placeholder,
.cform__field textarea::placeholder { color: rgba(245, 230, 200, 0.38); }
.cform__field textarea { resize: vertical; min-height: 120px; }
.cform__field input:focus,
.cform__field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(8, 5, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(200, 134, 10, 0.22);
}
.cform__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.4rem;
}
/* Secondary WhatsApp action as a gold-outline ghost (keeps the black/gold). */
.cform__wa {
  --btn-bg: transparent;
  --btn-fg: var(--cream);
  --btn-ico-bg: var(--gold);
  --btn-ico-fg: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(200, 134, 10, 0.55);
}
.cform__wa:hover { --btn-bg: rgba(200, 134, 10, 0.12); }
.cform__note {
  margin: 0.1rem 0 0;
  min-height: 1.2em;
  font-size: 0.9rem;
  color: rgba(245, 230, 200, 0.6);
}
.cform__note.is-error { color: #FF8A8A; }
.cform__direct { display: flex; flex-direction: column; gap: 0.9rem; }
.cform__direct-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--cream);
}
.cform__direct-link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-decoration: none;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(200, 134, 10, 0.3);
  border-radius: 12px;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}
.cform__direct-link:hover {
  border-color: var(--gold);
  background: rgba(200, 134, 10, 0.08);
  transform: translateY(-2px);
}
.cform__direct-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.cform__direct-value { font-size: 1.02rem; color: var(--cream); }
.cform__direct-foot {
  margin-top: 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(245, 230, 200, 0.14);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cform__direct-foot p { margin: 0; color: rgba(245, 230, 200, 0.78); font-size: 0.95rem; }
.cform__direct-foot a { color: var(--gold); text-decoration: none; font-size: 0.95rem; }