/* ============================================================
   MURU — main.css
   ============================================================ */

/* ── Variables ───────────────────────────────────────────── */
:root {
  --color-white:  #FFFFFF;
  --color-black:  #000000;
  --color-beige:  #D6C8AB;
  --color-gray:   #BFBFBF;
  --color-dark:   #111111;
  --color-cream:  #F7F5F0;

  --font-base: 'Gotham', sans-serif;

  --nav-height: 72px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Font faces ──────────────────────────────────────────── */
/* woff2 first (all modern browsers, ~75% lighter), .otf/.ttf kept as fallback. */
@font-face { font-family: 'Gotham'; src: url('/assets/fonts/Gotham Thin.woff2') format('woff2'), url('/assets/fonts/Gotham Thin.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/assets/fonts/Gotham Thin Italic.woff2') format('woff2'), url('/assets/fonts/Gotham Thin Italic.otf') format('opentype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/assets/fonts/Gotham Extra Light.woff2') format('woff2'), url('/assets/fonts/Gotham Extra Light.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/assets/fonts/Gotham Extra Light Italic.woff2') format('woff2'), url('/assets/fonts/Gotham Extra Light Italic.otf') format('opentype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/assets/fonts/Gotham Light.woff2') format('woff2'), url('/assets/fonts/Gotham Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/assets/fonts/Gotham Book.woff2') format('woff2'), url('/assets/fonts/Gotham Book.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/assets/fonts/Gotham Regular.woff2') format('woff2'), url('/assets/fonts/Gotham Regular.otf') format('opentype'); font-weight: 450; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/assets/fonts/Gotham Italic.woff2') format('woff2'), url('/assets/fonts/Gotham Italic.otf') format('opentype'); font-weight: 450; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/assets/fonts/Gotham Medium.woff2') format('woff2'), url('/assets/fonts/Gotham Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/assets/fonts/Gotham Bold.woff2') format('woff2'), url('/assets/fonts/Gotham Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/assets/fonts/Gotham Bold Italic.woff2') format('woff2'), url('/assets/fonts/Gotham Bold Italic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/assets/fonts/Gotham Black.woff2') format('woff2'), url('/assets/fonts/Gotham Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('/assets/fonts/Gotham Ultra.woff2') format('woff2'), url('/assets/fonts/Gotham Ultra.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: var(--color-black); color: var(--color-white); }
::-moz-selection { background: var(--color-black); color: var(--color-white); }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-base); font-weight: 400; color: var(--color-black); background: var(--color-white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
/* <picture> is only a source-selector wrapper — keep it out of the layout so the
   inner <img> is styled/positioned exactly as a direct child would be. */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Metallic gradient text ──────────────────────────────── */
/* The gradient is clipped to the glyph shapes — a static sheen that keeps a
   sense of depth on the names, without any animated sweep. */
.metallic {
  display: inline-block;
  background-size: 100% auto;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.gold-metallic  { background-image: linear-gradient(135deg, #7a5b1d 0%, #b88a2e 20%, #f3d37a 45%, #fff2bf 50%, #d6b35f 55%, #b88a2e 80%, #7a5b1d 100%); }
.pink-metallic  { background-image: linear-gradient(135deg, #6e3f37 0%, #a96a5b 20%, #c88f82 40%, #f3d4ca 50%, #cf9486 60%, #a96a5b 80%, #6e3f37 100%); }
.green-metallic { background-image: linear-gradient(135deg, #3f5e49 0%, #5e8c6a 25%, #a5c3b0 50%, #dcebe2 55%, #6f9e79 70%, #3f5e49 100%); }

/* ── Navigation ──────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background 0.5s var(--ease-out),
              backdrop-filter 0.5s var(--ease-out),
              -webkit-backdrop-filter 0.5s var(--ease-out),
              border-color 0.5s var(--ease-out);
}
/* On the homepage, the bar stays on screen but is transparent over the hero
   (white text), gaining its frosted background once the hero is scrolled past.
   Without JS (no .js class) it keeps its solid background — graceful fallback. */
.js .page-home .nav.is-transparent {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.js .page-home .nav.is-transparent .nav__logo,
.js .page-home .nav.is-transparent .nav__link,
.js .page-home .nav.is-transparent .nav__lang {
  color: var(--color-white);
}
.js .page-home .nav.is-transparent .nav__burger span {
  background: var(--color-white);
}
.nav__inner {
  /* 3-column grid with equal side columns (1fr | auto | 1fr): the center
     column is centered on the page itself, not in the space left over
     between the logo and the language switch. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  padding: 0 2.5rem;
  max-width: 1400px;
  margin: 0 auto;
}
.nav__logo {
  justify-self: start;
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: 0.32em;
  color: var(--color-black);
  text-transform: uppercase;
  transition: opacity 0.25s;
}
.nav__logo:hover { opacity: 0.6; }
.nav__links {
  display: flex;
  gap: 2.75rem;
}
.nav__link {
  position: relative;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-black);
  opacity: 0.78;
  transition: opacity 0.25s var(--ease-out);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s var(--ease-out);
}
.nav__link:hover { opacity: 1; }
.nav__link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.nav__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav__lang {
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-black);
  opacity: 0.55;
  transition: opacity 0.25s;
}
.nav__lang:hover { opacity: 1; }

/* Burger trigger (two lines, animates to a subtle arrow-free state) */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 30px;
  height: 30px;
  padding: 0;
}
.nav__burger span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--color-black);
  transition: transform 0.35s var(--ease-out), width 0.35s var(--ease-out);
  align-self: flex-end;
}
.nav__burger span:nth-child(2) { width: 18px; }
.nav__burger:hover span:nth-child(2) { width: 26px; }

/* ── Mobile menu (full-screen overlay, body-level) ───────── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.mobile-menu.is-open { pointer-events: auto; }

/* Ink-drop reveal expanding from the burger corner */
.mobile-menu__bg {
  position: absolute;
  inset: 0;
  background: #0b0b0b;
  clip-path: circle(0% at calc(100% - 2.5rem) 2.25rem);
  transition: clip-path 0.7s var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__bg {
  clip-path: circle(150% at calc(100% - 2.5rem) 2.25rem);
}

.mobile-menu__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.6rem 2rem 2.5rem;
}
.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--nav-height) - 1.6rem);
}
.mobile-menu__brand {
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: 0.32em;
  color: var(--color-white);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out) 0.25s;
}
.mobile-menu.is-open .mobile-menu__brand { opacity: 1; }

.mobile-menu__close {
  position: relative;
  width: 30px;
  height: 30px;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out) 0.25s;
}
.mobile-menu.is-open .mobile-menu__close { opacity: 1; }
.mobile-menu__close span {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 26px;
  height: 1.5px;
  background: var(--color-white);
  transition: transform 0.3s var(--ease-out);
}
.mobile-menu__close span:nth-child(1) { transform: rotate(45deg); }
.mobile-menu__close span:nth-child(2) { transform: rotate(-45deg); }
.mobile-menu__close:hover span:nth-child(1) { transform: rotate(135deg); }
.mobile-menu__close:hover span:nth-child(2) { transform: rotate(45deg); }

.mobile-menu__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.25rem, 3.5vh, 2.25rem);
}
.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  color: var(--color-white);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.28s + var(--i) * 0.09s);
}
.mobile-menu__index {
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--color-beige);
}
.mobile-menu__label {
  font-weight: 300;
  font-size: clamp(2rem, 9vw, 3.25rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: opacity 0.25s;
}
.mobile-menu__link:active .mobile-menu__label { opacity: 0.5; }

.mobile-menu__footer {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__footer {
  opacity: 1;
  transition-delay: 0.6s;
}
.mobile-menu__lang {
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--color-white);
}
.mobile-menu__lang-sep { margin: 0 0.5rem; color: var(--color-gray); opacity: 0.5; }
.mobile-menu__lang-alt { color: var(--color-beige); }
.mobile-menu__tag {
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--color-gray);
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu__bg { transition: opacity 0.3s; clip-path: none; opacity: 0; }
  .mobile-menu.is-open .mobile-menu__bg { opacity: 1; }
  .mobile-menu__link,
  .mobile-menu__brand,
  .mobile-menu__footer { transition: opacity 0.3s; transform: none; }
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  /* Matches the photo's dark foliage: covers the frame before the image has
     decoded, and keeps any edge the parallax might expose from flashing white. */
  background: #1d2117;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero__bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Taller than the hero so the parallax can shift it down without exposing
     an edge at the top of the frame. */
  height: 100%;
  z-index: 0;
  will-change: transform;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  /* Darker behind the centred text, near-transparent at the edges so the
     photo stays bright overall. */
  background: radial-gradient(
    ellipse 70% 60% at center,
    rgba(0, 0, 0, 0.48) 0%,
    rgba(0, 0, 0, 0.28) 45%,
    rgba(0, 0, 0, 0.06) 100%
  );
  z-index: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  transform-origin: center center;
  will-change: transform, opacity;
}
.hero__title {
  font-weight: 300;
  font-size: clamp(3.5rem, 9.5vw, 9rem);
  color: var(--color-white);
  letter-spacing: 0.08em;
  /* offset the trailing letter-spacing so the word stays optically centred */
  text-indent: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  /* soft halo so the text reads on any photo without darkening it */
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
/* Per-letter spans for the intro animation */
.hero__title .letter {
  display: inline-block;
  will-change: transform, opacity;
}
.hero__tagline {
  font-weight: 300;
  font-size: clamp(0.6rem, 1.15vw, 0.95rem);
  color: var(--color-beige);
  letter-spacing: 0.72em;
  text-indent: 0.72em;
  text-transform: uppercase;
  margin-top: 1.1rem;
  /* layered shadow: soft halo + tight edge for crispness on bright photos */
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.5);
}
/* Real transparent product shots — rendered as-is (one image per drink). */
.bottle__base {
  display: block;
}
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
/* Inner wrapper fades in a few seconds after load (outer opacity is driven by
   the scroll timeline so the cue disappears as you scroll). */
.hero__scroll-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  opacity: 0;
  animation: heroScrollAppear 5s ease forwards 3s;
}
@keyframes heroScrollAppear {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Mouse outline with a dot that travels down — reads as "scroll" */
.hero__scroll-mouse {
  position: relative;
  width: 23px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  border-radius: 12px;
}
.hero__scroll-dot {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: var(--color-white);
  transform: translate(-50%, 0);
  animation: heroScrollDot 1.8s var(--ease-out) infinite;
}
@keyframes heroScrollDot {
  0%   { transform: translate(-50%, 0);    opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translate(-50%, 12px); opacity: 0; }
}
.hero__scroll-label {
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-inner { animation: none; opacity: 1; }
  .hero__scroll-dot { animation: none; }
}

/* ── About ───────────────────────────────────────────────── */
.about {
  background: var(--color-white);
  padding: clamp(8rem, 18vh, 16rem) 2rem;
}
.about__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.about__title {
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  letter-spacing: 0.04em;
  margin-bottom: 2rem;
}
.about__body {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.9;
  color: #333;
  margin-bottom: 1.25rem;
}
.about__body:last-child { margin-bottom: 0; }

/* Credential pills below the intro copy — quiet, refined */
.about__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 2.75rem;
}
.about__badge {
  font-weight: 500;
  font-size: clamp(0.62rem, 0.85vw, 0.72rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b5d3e;
  padding: 0.6rem 1.2rem;
  border: 1px solid rgba(107, 93, 62, 0.28);
  border-radius: 999px;
  background: rgba(107, 93, 62, 0.04);
  transition: transform 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out),
              background 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out);
}
.about__badge:hover {
  transform: translateY(-2px);
  border-color: rgba(107, 93, 62, 0.5);
  background: rgba(107, 93, 62, 0.08);
  box-shadow: 0 6px 16px rgba(107, 93, 62, 0.14);
}
@media (prefers-reduced-motion: reduce) {
  .about__badge { transition: none; }
  .about__badge:hover { transform: none; }
}

/* ── Products ────────────────────────────────────────────── */
.products {
  background: var(--color-white);
  padding-bottom: clamp(5rem, 12vh, 11rem);
}
.products__header {
  text-align: center;
  padding: clamp(2rem, 4vh, 4rem) 2rem clamp(4rem, 9vh, 8rem);
}
.products__title {
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-section {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas: "stage content";
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: 100vh;
  padding: 0 clamp(1.5rem, 5vw, 6rem);
}
.product-section--reverse { grid-template-areas: "content stage"; }

.product-section__visual {
  grid-area: stage;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 78vh;
}
.product-section__photo-wrap {
  width: 100%;
  height: 100%;
}
.product-section__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  transition: transform 0.8s var(--ease-out);
}
.product-section:hover .product-section__photo { transform: scale(1.03); }

/* Bottle overlaps the ambiance image (same grid cell) */
.product-section__bottle {
  grid-area: stage;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.product-section__bottle-img {
  position: relative;
  display: inline-block;
  height: clamp(300px, 58vh, 580px);
}
.product-section__bottle-img .bottle__base {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.product-section__content {
  grid-area: content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 3vw, 3rem);
}

.product-section__type {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8a7340;
  margin-bottom: 0.85rem;
  display: block;
}
.product-section__name {
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: 0.04em;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}
.product-section__signature {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.product-section__signature li {
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #3d3d3d;
}
.product-section__signature li + li::before {
  content: '·';
  margin-right: 1rem;
  color: #b0a07d;
}

/* Info groups: botanicals, best enjoyed, pairings */
.product-section__info {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  max-width: 440px;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.product-info dt {
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a7340;
  margin-bottom: 0.5rem;
}
.product-info dd {
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.65;
  color: #3d3d3d;
}

/* ── Products layout ─────────────────────────────────────────
   Single layout ("Pin", see sections/products.php). Everything above is the
   shared base; the block below overrides only what the layout needs. Desktop
   rules here, small-screen rules further down in the responsive section. ── */

/* Soft contact shadow under the bottle — it reads as "posed" rather than
   floating. Negative z-index drops it behind the bottle but still above the
   ambiance photo, which sits outside the bottle's stacking context. */
.products--pin .product-section__bottle-img::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1.5%;
  width: 132%;
  height: 4.5%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
              rgba(0, 0, 0, 0.38) 0%,
              rgba(0, 0, 0, 0.14) 45%,
              rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
  z-index: -1;
}

/* ── Products layout — "Pin" ─────────────────────────────────
   Pinned scroll moment: the bottle holds in its column and grows from 0.8 to
   full size (JS-driven) while the ambiance photo fades in behind it. The photo
   is deliberately smaller than the bottle — a framed panel the bottle stands
   in front of and overhangs — so the bottle stays the hero of the section. */
.products--pin .product-section {
  position: relative;
  min-height: 100vh;
}
/* Smaller framed photo, centred in the stage — the bottle towers over it. */
.products--pin .product-section__visual {
  width: min(80%, 460px);
  max-height: 56vh;
  margin: 0 auto;
  align-self: center;
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
}
.products--pin .product-section__bottle-img {
  height: clamp(460px, 84vh, 780px);
}

/* ── Contact ─────────────────────────────────────────────── */
.contact {
  background: var(--color-beige);
  padding: clamp(7rem, 15vh, 13rem) 2rem;
}
.contact__inner {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.contact__title {
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}
.contact__subtitle {
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #444;
  margin-bottom: 3rem;
}

/* B2B invitation — opens the section, right under the title */
.contact__b2b {
  max-width: 540px;
  margin: 0 auto 3rem;
}
.contact__b2b-title {
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  letter-spacing: 0.02em;
  margin-bottom: 0.85rem;
}
.contact__b2b-body {
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #444;
}
.contact__b2b-body strong { font-weight: 700; color: #2a2a2a; }

/* Quick-contact buttons: two equal columns */
.contact__ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: 540px;
  margin: 0 auto;
}
.contact__ctas .btn-cta { width: 100%; min-width: 0; }

/* Divider between quick contact and the form */
.contact__divider {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 540px;
  margin: 2.75rem auto;
}
.contact__divider::before,
.contact__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.18);
}
.contact__divider span {
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6b5d3e;
}

/* ── Contact form (visual only) ──────────────────────────── */
.contact-form {
  max-width: 540px;
  margin: 0 auto;
  text-align: left;
}
.contact-form__row {
  display: flex;
  gap: 1.5rem;
}
.contact-form__row .contact-form__field { flex: 1; }
.contact-form__field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.75rem;
}
.contact-form__field label {
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6b5d3e;
  margin-bottom: 0.6rem;
}
.contact-form input,
.contact-form textarea {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-black);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  padding: 0.55rem 0;
  transition: border-color 0.3s var(--ease-out);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-black);
}
.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}
.contact-form__submit {
  position: relative;
  margin-top: 0.5rem;
}
.contact-form__submit:disabled { cursor: progress; opacity: 0.85; }
.contact-form__submit.is-loading .btn-cta__label { opacity: 0; }
/* Loading spinner inside the submit button */
.contact-form__spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: var(--color-black);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.contact-form__submit.is-loading .contact-form__spinner { display: block; }
.contact-form__submit.is-loading:hover .contact-form__spinner {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Success panel (replaces the form after AJAX send) */
.contact-form__done {
  text-align: center;
  padding: 1.5rem 0;
}
.contact-form__done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.25rem;
  border: 1.5px solid #2f5d3a;
  border-radius: 50%;
  color: #2f5d3a;
}
.contact-form__done-mark::before {
  content: '✓';
  font-size: 1.4rem;
  line-height: 1;
}
.contact-form__done p {
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #2f5d3a;
  max-width: 420px;
  margin: 0 auto;
}

/* Honeypot — visually removed but still in the DOM for bots */
.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Submission feedback */
.contact-form__status {
  max-width: 540px;
  margin: 0 auto 2rem;
  padding: 0.9rem 1.25rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  border: 1px solid;
}
.contact-form__status--ok {
  color: #2f5d3a;
  border-color: rgba(47, 93, 58, 0.4);
  background: rgba(47, 93, 58, 0.06);
}
.contact-form__status--err {
  color: #8a3a3a;
  border-color: rgba(138, 58, 58, 0.4);
  background: rgba(138, 58, 58, 0.06);
}
.btn-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.1rem 2.75rem;
  border: 1.5px solid var(--color-black);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-black);
  background: transparent;
  transition: background 0.28s, color 0.28s;
  min-width: 200px;
}
.btn-cta:hover {
  background: var(--color-black);
  color: var(--color-white);
}
.btn-cta__label {
  font-weight: 500;
}
.btn-cta__detail {
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 0.65;
  transition: opacity 0.25s;
}
.btn-cta.is-revealed .btn-cta__detail {
  opacity: 1;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  background: var(--color-black);
  padding: 3rem 2rem;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.footer__logo {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.28em;
  color: var(--color-white);
  text-transform: uppercase;
}
.footer__tagline {
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-beige);
  opacity: 0.7;
}
.footer__nav { text-align: center; }
.footer__link {
  font-weight: 300;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gray);
  opacity: 0.7;
  transition: opacity 0.2s;
}
.footer__link:hover { opacity: 1; }
.footer__meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.footer__rights,
.footer__alcohol {
  font-weight: 100;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--color-gray);
  opacity: 0.5;
}
.footer__credit {
  margin-top: 0.6rem;
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--color-gray);
  opacity: 0.6;
}
.footer__credit-link {
  color: var(--color-gray);
  font-weight: 500;
  transition: color 0.3s var(--ease-out);
}
.footer__credit-link:hover {
  color: #F286AA;
}

/* ── Maintenance page (editorial, on-brand) ──────────────── */
.page-maintenance {
  background: var(--color-white);
  color: var(--color-black);
}
.maintenance {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(3rem, 8vh, 6rem) 2rem;
}
.maintenance__lang {
  position: absolute;
  top: 1.9rem;
  right: 2rem;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-black);
  opacity: 0.5;
  transition: opacity 0.25s;
}
.maintenance__lang:hover { opacity: 1; }
.maintenance__inner {
  max-width: 560px;
  width: 100%;
  text-align: center;
}
.maintenance__logo {
  font-weight: 300;
  font-size: clamp(3.5rem, 12vw, 8rem);
  line-height: 1;
  letter-spacing: 0.42em;
  /* text-indent: 0.42em; */
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.maintenance__tagline {
  font-weight: 300;
  font-size: clamp(0.72rem, 1.8vw, 1.05rem);
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  text-transform: uppercase;
  color: var(--color-beige);
  margin-bottom: clamp(3rem, 8vh, 5rem);
}
.maintenance__eyebrow {
  display: block;
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gray);
  margin-bottom: 1rem;
}
.maintenance__status {
  font-weight: 300;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--color-black);
  max-width: 460px;
  margin: 0 auto clamp(3.5rem, 9vh, 6rem);
}
.maintenance__access {
  margin-bottom: clamp(2.25rem, 5vh, 3rem);
}
.maintenance__access-label {
  display: block;
  font-weight: 500;
  font-size: 0.5rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gray);
  margin-bottom: 0.85rem;
}
.maintenance__code-row {
  display: inline-flex;
  align-items: stretch;
  gap: 0.75rem;
}
.maintenance__code-input {
  font-family: var(--font-base);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--color-black);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.18);
  padding: 0.7rem 1rem;
  min-width: 180px;
  transition: border-color 0.25s;
}
.maintenance__code-input:focus {
  outline: none;
  border-color: var(--color-black);
}
.maintenance__code-submit {
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-black);
  border: 1px solid var(--color-black);
  padding: 0 1.5rem;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.maintenance__code-submit:hover {
  background: transparent;
  color: var(--color-black);
}
.maintenance__code-error {
  margin-top: 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #b4534b;
}
.maintenance__help {
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.8;
  color: #777;
  max-width: 380px;
  margin: 0 auto 1.5rem;
}
/* ── Legal page ──────────────────────────────────────────── */
.page-legal body,
.legal {
  padding-top: var(--nav-height);
}
.legal__inner {
  max-width: 740px;
  margin: 0 auto;
  padding: 4rem 2rem 6rem;
}
.legal__back {
  display: inline-block;
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray);
  margin-bottom: 2.5rem;
  transition: color 0.2s;
}
.legal__back:hover { color: var(--color-black); }
.legal__title {
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: 0.04em;
  margin-bottom: 3rem;
}
.legal__section {
  margin-bottom: 3rem;
}
.legal__section h2 {
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gray);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}
.legal__section p {
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.85;
  color: #444;
}
.legal__dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.5rem;
}
.legal__dl dt {
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: #666;
}
.legal__dl dd {
  font-weight: 400;
  font-size: 0.9rem;
  color: #333;
}
.legal__dl dd a { border-bottom: 1px solid #ccc; transition: border-color 0.2s; }
.legal__dl dd a:hover { border-color: var(--color-black); }

/* ── Scroll reveal (JS-driven) ───────────────────────────── */
/* Hidden initial state only applies when JS is present; without it,
   content stays fully visible. */
.js .js-reveal,
.js .js-reveal-visual,
.js .js-reveal-content,
.js .js-reveal-photo {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.js .js-reveal-visual { transform: scale(1.04); transition-property: opacity, transform; }
.js .js-reveal-photo  { transition-delay: var(--delay, 0s); }
.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Preloader (only shown when JS is available) ─────────── */
.preloader { display: none; }
.js .preloader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}
.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}
.preloader__logo {
  font-weight: 300;
  font-size: 1.6rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--color-black);
}
.preloader__bar {
  position: relative;
  width: 160px;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.preloader__bar-fill {
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--color-black);
  animation: preloaderSlide 1.1s var(--ease-out) infinite;
}
@keyframes preloaderSlide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}
/* Prevent scrolling while the preloader is up */
.js.preloading body { overflow: hidden; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* "stage" cell holds the ambiance image + bottle (overlapping);
     the text sits below. JS animates: big centred bottle → shrinks & slides
     left as the image fades in. Without JS this is simply the end state. */
  .product-section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "content";
    align-items: center;
    gap: clamp(2rem, 6vw, 3rem);
    min-height: auto;
    padding: clamp(3.5rem, 8vh, 6rem) 2rem;
    text-align: center;
  }
  .product-section__visual,
  .product-section--reverse .product-section__visual {
    grid-area: stage;
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 68vh;
  }
  .product-section__bottle,
  .product-section--reverse .product-section__bottle {
    grid-area: stage;        /* same cell as image → overlap */
    align-self: center;
    justify-self: center;
    height: auto;
    z-index: 2;
    pointer-events: none;
  }
  .product-section__bottle-img { height: clamp(300px, 56vh, 460px); }
  .product-section__content,
  .product-section--reverse .product-section__content {
    grid-area: content;
    width: 100%;
    align-items: center;
  }
  .product-section__signature { justify-content: center; }
  .product-section__info { align-items: center; text-align: center; border-top: none; }
  .footer__inner { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; }
  .footer__meta { text-align: center; }
}

/* ── Products layout, small screens ──────────────────────────
   Same intent as desktop: a small framed photo, and the bottle standing tall
   in front of it. This is the proportion the layout was designed around. ─ */
@media (max-width: 1024px) {
  .products--pin .product-section {
    min-height: 100vh;
    align-content: center;
  }
  .products--pin .product-section__visual {
    width: min(78%, 400px);
    max-height: 46vh;
  }
  .products--pin .product-section__bottle-img {
    height: clamp(360px, 64vh, 540px);
  }
}

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__lang  { display: none; }
  .nav__burger { display: flex; }

  .contact-form__row { flex-direction: column; gap: 0; }
  .contact__ctas { grid-template-columns: 1fr; }

  .legal__dl { grid-template-columns: 1fr; }
  .legal__dl dt { margin-top: 0.5rem; }
}