/* ============================================================
   NOMA — main.css
   Architecture ported from MURU (docs/website-example), palette and
   typography rebuilt around Noma's own identity — see md/DESIGN.md.
   ============================================================ */

/* ── Variables ───────────────────────────────────────────── */
:root {
  --color-cream: #F6F1E7;
  --color-dark:  #302E26;
  --color-olive: #3B441D;
  --color-brick: #752723;
  --color-white: #FFFFFF;

  /* Derived tints for the product accent gradients — hand-picked in the same
     hue family as the brand colors above, refine once real photography or
     brand guidelines exist. */
  --color-olive-tint: #7C8B4B;
  --color-brick-tint: #B45A45;

  --font-display: 'Fraunces', Georgia, serif;
  --font-base:    'Inter', -apple-system, sans-serif;

  --nav-height: 72px;

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

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: var(--color-dark); color: var(--color-cream); }
::-moz-selection { background: var(--color-dark); color: var(--color-cream); }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-base); font-weight: 400; color: var(--color-dark); background: var(--color-cream); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Navigation ──────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(246, 241, 231, 0.78);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(48, 46, 38, 0.08);
  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
   (cream 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-cream);
}
.js .page-home .nav.is-transparent .nav__burger span {
  background: var(--color-cream);
}
.nav__inner {
  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 {
  grid-column: 1;
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.22em;
  color: var(--color-dark);
  text-transform: uppercase;
  transition: opacity 0.25s;
}
.nav__logo:hover { opacity: 0.6; }
.nav__links {
  grid-column: 2;
  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-dark);
  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 {
  grid-column: 3;
  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-dark);
  opacity: 0.55;
  transition: opacity 0.25s;
}
.nav__lang:hover { opacity: 1; }

.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-dark);
  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; }

.mobile-menu__bg {
  position: absolute;
  inset: 0;
  background: var(--color-dark);
  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-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.22em;
  color: var(--color-cream);
  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-cream);
  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-cream);
  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: 400;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--color-brick-tint);
}
.mobile-menu__label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 9vw, 3.25rem);
  line-height: 1;
  letter-spacing: 0.02em;
  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-cream);
}
.mobile-menu__lang-sep { margin: 0 0.5rem; color: var(--color-cream); opacity: 0.4; }
.mobile-menu__lang-alt { color: var(--color-brick-tint); }
.mobile-menu__tag {
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-cream);
  opacity: 0.55;
}

@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 ────────────────────────────────────────────────── */
/* The background is the client's graded photograph, washed with the brand's
   olive/dark tint by .hero__overlay, plus an inline botanical line-art motif
   on top. The <picture> is generated from the manifest — see inc/images.php
   and tools/build-images.sh. */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  overflow: hidden;
  background: var(--color-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero__bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 0;
  will-change: transform;
  /* Fallback shown while the hero photo decodes (or if it fails to load) —
     close in tone to the photo so there's no flash. */
  background: var(--color-dark);
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keeps the toast/wine-glasses moment in frame rather than the plain
     doorframe on the left as the viewport narrows. */
  object-position: 68% 45%;
}
.hero__motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.14;
  mix-blend-mode: soft-light;
}
.hero__motif svg { width: 100%; height: 100%; }
/* Black & white photo, tinted with the brand's dark/olive green so it reads
   as NOMA rather than a generic stock shot — plus a center vignette so the
   title stays legible over the photo's own detail. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at center,
      rgba(24, 27, 12, 0.28) 0%, rgba(24, 27, 12, 0.12) 45%, rgba(24, 27, 12, 0) 100%),
    linear-gradient(180deg,
      rgba(59, 68, 29, 0.72) 0%, rgba(59, 68, 29, 0.42) 45%, rgba(41, 47, 20, 0.76) 100%);
  mix-blend-mode: multiply;
  z-index: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  transform-origin: center center;
  will-change: transform, opacity;
  padding: 0 1.5rem;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  /* The 2.6rem floor is what "BRASILEIRAS" needs to fit a 360px viewport once
     the padding is taken off; below that the vw term would clip it. */
  font-size: clamp(2.6rem, 7.5vw, 6.5rem);
  overflow-wrap: break-word;
  color: var(--color-cream);
  letter-spacing: 0.02em;
  line-height: 1.04;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(20, 19, 15, 0.55), 0 1px 2px rgba(20, 19, 15, 0.4);
}
/* Below ~380px the longest word ("BRASILEIRAS") is wider than the 2.6rem
   floor allows, and .hero__content then stretched past the viewport to hold
   it — invisibly, because body is overflow-x: hidden, so the title simply
   lost its outer letters. Scale the type down instead of clipping it. Above
   380px both expressions land on 2.6rem, so nothing changes there. */
@media (max-width: 380px) {
  .hero__title { font-size: min(2.6rem, 11.5vw); }
}
.hero__title-line { display: block; }
/* Per-word box: letters are animated individually but must wrap as a unit —
   see the splitLetters() comment in main.js. */
.hero__title-word {
  display: inline-block;
  white-space: nowrap;
}
/* Per-letter spans for the intro animation */
.hero__title .letter {
  display: inline-block;
  will-change: transform, opacity;
}
.hero__subtitle {
  font-weight: 300;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  line-height: 1.7;
  color: var(--color-cream);
  opacity: 0.88;
  max-width: 480px;
  margin: 1.75rem auto 0;
  text-shadow: 0 1px 12px rgba(20, 19, 15, 0.5);
}
.hero__tagline {
  font-weight: 500;
  font-size: clamp(0.55rem, 1vw, 0.8rem);
  color: var(--color-brick-tint);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  margin-top: 2rem;
}
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.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; }
}
.hero__scroll-mouse {
  position: relative;
  width: 23px;
  height: 36px;
  border: 1.5px solid rgba(246, 241, 231, 0.6);
  border-radius: 12px;
}
.hero__scroll-dot {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: var(--color-cream);
  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: 400;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-cream);
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-inner { animation: none; opacity: 1; }
  .hero__scroll-dot { animation: none; }
}

/* ── About (Nossa História) ──────────────────────────────── */
.about {
  background: var(--color-cream);
  padding: clamp(7rem, 16vh, 13rem) 2rem;
}
.about__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.about__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  letter-spacing: 0.01em;
  color: var(--color-dark);
  margin-bottom: 2.25rem;
}
.about__body {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.9;
  color: #4a4638;
  margin-bottom: 1.25rem;
}
.about__body:last-of-type { margin-bottom: 0; }
.about__closing {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  color: var(--color-brick);
  letter-spacing: 0.02em;
  margin-top: 2.5rem;
}

/* ── Products (Nossas Bebidas) ───────────────────────────── */
.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-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  letter-spacing: 0.03em;
}

.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);
  position: relative;
}
.product-section--reverse { grid-template-areas: "content stage"; }

/* Per-product accent — replaces MURU's metallic gradient text with a solid
   accent color + rule, distinct and tasteful without needing photography. */
.product-section--sol-nativo       { --accent: var(--color-olive); --accent-tint: var(--color-olive-tint); }
.product-section--hibisco-selvagem { --accent: var(--color-brick); --accent-tint: var(--color-brick-tint); }

.product-section__visual {
  grid-area: stage;
  width: min(80%, 460px);
  max-height: 56vh;
  margin: 0 auto;
  align-self: center;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(48, 46, 38, 0.22);
}
.product-section__photo-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  /* Loading-state fallback behind the photo (also the state if it fails to
     load) — kept in the product's accent color rather than plain gray. */
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-tint) 100%);
}
.product-section__photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Stock ambiance photo, tinted with the drink's own accent color so it reads
   as NOMA rather than a generic toast photo — same treatment family as the
   hero's olive wash over its black & white shot. */
.product-section__photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0.32;
  mix-blend-mode: multiply;
}

/* The bottle overlaps the photo panel (same grid cell) — same proportions as
   MURU's pinned "bottle towers over a smaller framed photo" layout. */
.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;
  /* Sized so the bottle still overhangs the photo panel top and bottom while
     leaving it readable on both sides — the real renders are a good deal wider
     (≈0.39 w/h) than the template they replaced (≈0.28). */
  height: clamp(420px, 72vh, 660px);
}
.product-section__bottle-img img {
  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: var(--accent);
  margin-bottom: 0.85rem;
  display: block;
}
.product-section__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--accent);
  text-transform: uppercase;
}
.product-section__name::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-top: 1rem;
  background: var(--accent);
}
.product-section__signature {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}
.product-section__signature li {
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--color-dark);
  padding: 0.35rem 0.85rem;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.product-section__body {
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #4a4638;
  margin-bottom: 0.9rem;
  max-width: 440px;
}
.product-section__body:last-of-type { margin-bottom: 2rem; }

.product-section__info {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  max-width: 440px;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(48, 46, 38, 0.1);
}
.product-info dt {
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.product-info dd {
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.65;
  color: #3d3d3d;
}

/* ── Table (À Mesa) — new section, no MURU equivalent ────────
   A "manifesto" break, mirroring the rhythm MURU gets from its black
   lifestyle gallery — now grounded in a real table/toast photo, tinted dark
   olive so it reads as NOMA rather than a random stock shot. */
.table-section {
  position: relative;
  overflow: hidden;
  color: var(--color-cream);
  padding: clamp(7rem, 16vh, 13rem) 2rem;
}
.table-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-dark);
}
.table-section__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.table-section__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 80% 70% at center,
      rgba(24, 27, 12, 0.3) 0%, rgba(24, 27, 12, 0.12) 55%, rgba(24, 27, 12, 0) 100%),
    linear-gradient(180deg,
      rgba(59, 68, 29, 0.8) 0%, rgba(48, 46, 38, 0.55) 45%, rgba(59, 68, 29, 0.82) 100%);
  mix-blend-mode: multiply;
}
.table-section__inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.table-section__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  letter-spacing: 0.01em;
  margin-bottom: 2.25rem;
}
.table-section__body {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(246, 241, 231, 0.82);
  margin-bottom: 1.25rem;
}
.table-section__body:last-of-type { margin-bottom: 0; }
.table-section__couplet {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(246, 241, 231, 0.16);
}
.table-section__couplet p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.table-section__discover {
  display: inline-block;
  margin-top: 2.75rem;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brick-tint);
  opacity: 0.85;
  /* Deliberately non-interactive — the deck's line has no real link target
     yet, so it reads as a decorative CTA-style flourish, not a dead link.
     Currently not rendered at all: see the note in sections/table.php. */
  cursor: default;
}

/* ── Contact (Contato) ───────────────────────────────────── */
.contact {
  background: var(--color-cream);
  padding: clamp(7rem, 15vh, 13rem) 2rem;
}
.contact__inner {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.contact__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}
.contact__subtitle {
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #4a4638;
  margin-bottom: 3rem;
}

/* Quick-contact buttons: two equal columns (email + Instagram) */
.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; }

.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(48, 46, 38, 0.16);
}
.contact__divider span {
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-brick);
}

/* ── Contact form ─────────────────────────────────────────── */
.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: var(--color-brick);
  margin-bottom: 0.6rem;
}
.contact-form input,
.contact-form textarea {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-dark);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(48, 46, 38, 0.28);
  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-dark);
}
.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}
/* data-size="flexible" fait remplir la largeur du conteneur au widget, ce qui
   le cale sur les champs du formulaire (540px max) au lieu de le laisser
   flotter à sa largeur fixe. */
.contact-form__turnstile {
  margin-bottom: 1.75rem;
  min-height: 65px;
}

.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; }
.contact-form__spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(246, 241, 231, 0.35);
  border-top-color: var(--color-cream);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.contact-form__submit.is-loading .contact-form__spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.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 var(--color-olive);
  border-radius: 50%;
  color: var(--color-olive);
}
.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: var(--color-olive);
  max-width: 420px;
  margin: 0 auto;
}

.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.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: var(--color-olive);
  border-color: color-mix(in srgb, var(--color-olive) 40%, transparent);
  background: color-mix(in srgb, var(--color-olive) 6%, transparent);
}
.contact-form__status--err {
  color: var(--color-brick);
  border-color: color-mix(in srgb, var(--color-brick) 40%, transparent);
  background: color-mix(in srgb, var(--color-brick) 6%, transparent);
}

.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-dark);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-dark);
  background: transparent;
  transition: background 0.28s, color 0.28s, border-color 0.28s;
  min-width: 200px;
}
.btn-cta:hover {
  background: var(--color-dark);
  color: var(--color-cream);
}
.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;
}
/* Contact value not yet provided by the client (email/Instagram still TBD) —
   visibly inert, not styled as a working link. */
.btn-cta--tbd {
  border-style: dashed;
  opacity: 0.55;
  cursor: default;
}
.btn-cta--tbd:hover { background: transparent; color: var(--color-dark); }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  background: var(--color-dark);
  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-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  color: var(--color-cream);
  text-transform: uppercase;
}
.footer__tagline {
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-brick-tint);
  opacity: 0.85;
}
.footer__nav { text-align: center; }
.footer__link {
  font-weight: 400;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-cream);
  opacity: 0.65;
  transition: opacity 0.2s;
}
.footer__link:hover { opacity: 1; }
.footer__meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.footer__rights {
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--color-cream);
  opacity: 0.45;
}
.footer__credit {
  margin-top: 0.6rem;
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--color-cream);
  opacity: 0.55;
}
.footer__credit-link {
  color: var(--color-cream);
  font-weight: 500;
  transition: color 0.3s var(--ease-out);
}
.footer__credit-link:hover { color: var(--color-brick-tint); }

/* ── Maintenance page ────────────────────────────────────── */
.page-maintenance {
  background: var(--color-cream);
  color: var(--color-dark);
}
.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-dark);
  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-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 10vw, 6rem);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.maintenance__tagline {
  font-weight: 400;
  font-size: clamp(0.62rem, 1.4vw, 0.85rem);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  color: var(--color-brick);
  margin-bottom: clamp(3rem, 8vh, 5rem);
}
.maintenance__eyebrow {
  display: block;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-olive);
  margin-bottom: 1rem;
}
.maintenance__status {
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--color-dark);
  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-dark);
  opacity: 0.6;
  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-dark);
  background: transparent;
  border: 1px solid rgba(48, 46, 38, 0.22);
  padding: 0.7rem 1rem;
  min-width: 180px;
  transition: border-color 0.25s;
}
.maintenance__code-input:focus {
  outline: none;
  border-color: var(--color-dark);
}
.maintenance__code-submit {
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-cream);
  background: var(--color-dark);
  border: 1px solid var(--color-dark);
  padding: 0 1.5rem;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.maintenance__code-submit:hover {
  background: transparent;
  color: var(--color-dark);
}
.maintenance__code-error {
  margin-top: 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-brick);
}
.maintenance__help {
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.8;
  color: #6b6656;
  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: 400;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-dark);
  opacity: 0.55;
  margin-bottom: 2.5rem;
  transition: opacity 0.2s;
}
.legal__back:hover { opacity: 1; }
.legal__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  letter-spacing: 0.01em;
  margin-bottom: 3rem;
}
.legal__section { margin-bottom: 3rem; }
.legal__section h2 {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brick);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(48, 46, 38, 0.1);
}
.legal__section p {
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.85;
  color: #4a4638;
}
/* The privacy section runs to three paragraphs now (what is collected, why,
   and the LGPD rights) — without this they read as one block of text. */
.legal__section p + p { margin-top: 1.1rem; }
.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: #6b6656;
}
.legal__dl dd { font-weight: 400; font-size: 0.9rem; color: #3d3a30; }
.legal__dl dd a { border-bottom: 1px solid rgba(48, 46, 38, 0.3); transition: border-color 0.2s; }
.legal__dl dd a:hover { border-color: var(--color-dark); }

/* ── 404 ─────────────────────────────────────────────────── */
/* Reuses the legal page's shell (.legal / .legal__inner), centred.

   The 404 is the one page whose content is shorter than the viewport, so the
   footer would otherwise sit halfway up the screen. .nav and .mobile-menu are
   position: fixed and therefore out of flow, which leaves <main> and <footer>
   as the only flex children — main takes the slack and pins the footer down. */
.page-404 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.page-404 .notfound { flex: 1 0 auto; }
.page-404 .footer   { flex: 0 0 auto; }

.notfound__inner { text-align: center; padding-top: 6rem; }
.notfound__code {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-brick);
  opacity: 0.22;
  margin-bottom: 1rem;
}
.notfound__body {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.9;
  color: #4a4638;
  max-width: 420px;
  margin: 0 auto 3rem;
}
.notfound__cta { margin: 0 auto; }

/* ── Scroll reveal (JS-driven) ───────────────────────────── */
.js .js-reveal,
.js .js-reveal-visual,
.js .js-reveal-content {
  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; }
.is-visible { opacity: 1 !important; transform: none !important; }

/* ── Preloader ────────────────────────────────────────────── */
.preloader { display: none; }
.js .preloader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
  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-family: var(--font-display);
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  text-transform: uppercase;
  color: var(--color-dark);
}
.preloader__bar {
  position: relative;
  width: 160px;
  height: 1px;
  background: rgba(48, 46, 38, 0.14);
  overflow: hidden;
}
.preloader__bar-fill {
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--color-brick);
  animation: preloaderSlide 1.1s var(--ease-out) infinite;
}
@keyframes preloaderSlide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}
.js.preloading body { overflow: hidden; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .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: min(78%, 400px);
    max-height: 46vh;
    margin: 0 auto;
  }
  .product-section__bottle,
  .product-section--reverse .product-section__bottle {
    grid-area: stage;
    align-self: center;
    justify-self: center;
    height: auto;
    z-index: 2;
    pointer-events: none;
  }
  .product-section__bottle-img {
    height: clamp(320px, 56vh, 470px);
  }
  .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; }
}

@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; }
}