/* ==========================================================================
   TAYRONA CACAO. Cacao Maison. A maison page within the Tayrona Capital
   system. Inherits homepage.css (type scale, nav, footer, reveal engine).
   Warmed near-black canvas, roasted cacao as the living accent, canopy
   green held connective, gold stays the hairline. Static grove hero:
   no zoom, no parallax (interactive glow reserved for a later pass).
   ========================================================================== */

:root {
  /* QVINTO sub-palette inside the house system
     Aligned to the homepage: warm near-black canvas, gold hairline,
     and the homepage's living cacao (the Qvinto row wash + glow). */
  --bg:            #0D0A07;   /* warmed near-black, the cacao canvas */
  --bg-raise:      #120E09;   /* raised panel */
  --bg-cacao:      #2A1A0E;   /* lifted cacao-black, pod-lit not murk */
  --ink:           #0E0B08;

  --text:          #EDE7DA;   /* homepage primary on dark */
  --text-dim:      #A89F8E;
  --text-faint:    #6E665A;

  /* cacao, the living warm accent: roasted bean + amber pod-light */
  --cacao:         #A96B38;
  --cacao-deep:    #4A2B17;
  --cacao-abyss:   #1F1209;
  --cacao-glow:    rgba(224, 164, 104, 0.30);
  --cacao-line:    rgba(224, 164, 104, 0.44);

  /* canopy, the secondary rainforest green: connective, used sparingly */
  --canopy:        #3C5A34;
  --canopy-bright: #6F9462;

  /* parchment, the single light band */
  --parchment:     #EDE6D6;

  /* Tayrona Cacao pace: a touch slower than the parent site */
  --rev: 1300ms;

  --line:          rgba(236, 230, 216, 0.10);
  --line-soft:     rgba(236, 230, 216, 0.06);
}

body { background-color: var(--bg); color: var(--text); }
/* Entry loader — the Maison opens, matching the Qvinto / Ameria Riva intro */
.q-loader { display: none; }
html.lzbg .q-loader {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 10000; background: #0D0A07;
}
.q-loader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.9rem; }
.q-loader__mark { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(3.6rem, 7vw, 5.6rem); line-height: 1; color: var(--gold-soft); }
.q-loader__bar { position: relative; width: 148px; height: 1px; background: rgba(236, 230, 216, 0.14); overflow: hidden; }
.q-loader__bar i { position: absolute; inset: 0; background: linear-gradient(to right, var(--gold-deep, #8A6F3C), var(--gold)); transform: scaleX(0); transform-origin: left center; }
.q-loader__caption { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--text-dim); }
@media (prefers-reduced-motion: reduce) { html.lzbg .q-loader { display: none; } }
::selection { background: var(--cacao); color: var(--text); }

/* The vignette goes a touch deeper than the parent site */
.vignette { box-shadow: inset 0 0 220px 40px rgba(0, 0, 0, 0.55); }

/* Mono eyebrow/label, per the maison label spec */
.q-eyebrow {
  font-family: var(--mono);
  font-size: clamp(0.6rem, 0.72vw, 0.72rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.q-eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
}
.q-eyebrow--plain::before { display: none; }
.q-eyebrow--cacao { color: var(--cacao); }
.q-eyebrow--cacao::before { background: linear-gradient(to right, var(--cacao), transparent); }

/* ==========================================================================
   GOLD SCROLL SPINE  (consistent with Our History)
   ========================================================================== */
.spine {
  position: fixed;
  top: 0;
  left: clamp(1rem, 3vw, 3.2rem);
  width: 1px;
  height: 100vh;
  background: rgba(236, 230, 216, 0.10);
  z-index: 6000;
  pointer-events: none;
}
.spine__fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(to bottom, var(--gold), var(--gold-deep));
}

/* ==========================================================================
   HERO. The cacao grove at the edge of night.
   A full-bleed image slot (opened cacao pod, pale interior, warm amber
   light within) under baked canopy and pod-glow gradients. Fixed framing:
   no zoom, no parallax, no cursor-reactive layer (later engineering pass).
   ========================================================================== */
.qhero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #0D0A07;
}
/* The poster plate sits under the film for everyone, not only under reduced
   motion: it is what holds the frame until the first video frame decodes, and
   what a visitor whose autoplay is refused keeps looking at. AVIF first, WebP
   behind it. */
.qhero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: image-set(url('assets/cacao-poster-A.avif') type('image/avif'), url('assets/cacao-poster-A.webp') type('image/webp'));
  background-position: 100% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
.qhero__slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* the film: fixed framing, anchored right so the pods and tree are never cropped.
   No filter, no overlay, no colour correction on the footage or its poster. */
.qhero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
  display: block;
}
/* Hero media controls: the shared v-hero-media component (hero-media.css).
   Matched to Ameria Riva: a fill a touch darker than the shared default, with
   the deeper backdrop blur. A scoped override, no change to the component. */
.qhero--film {
  --v-hero-control-bg: rgba(11, 9, 7, 0.18);
  --v-hero-control-bg-hover: rgba(11, 9, 7, 0.32);
  --v-hero-control-blur: 6px;
}
/* reduced motion: nothing to add. The poster plate is already on .qhero__scene
   for every visitor, and hero-media.js holds the film on its first frame. */
.qhero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--margin) clamp(4rem, 9vh, 7rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}
/* Legibility over the bright hero footage: soft shadows only, no scrim change. */
.nav__logo { filter: drop-shadow(0 2px 10px rgba(0,0,0,0.65)) drop-shadow(0 0 26px rgba(0,0,0,0.4)); }
/* Hero legibility: same treatment as Qvinto and Ameria Riva (bright gold, one soft shadow, heavier eyebrow, 1.5px gold rule). */
.qhero__eyebrow, .qhero__sub { color: #D9C795; text-shadow: 0 1px 10px rgba(3,7,13,0.55); }
/* Cacao's plate is busier and mid-toned, so it gets one wider, softer glow on top of the shared shadow (no hard edge, no scrim). */
.qhero__eyebrow, .qhero__sub { text-shadow: 0 1px 10px rgba(3,7,13,0.55), 0 0 28px rgba(3,7,13,0.6); }
.qhero__eyebrow { font-weight: 500; }
.qhero__eyebrow::before { height: 1.5px; background: linear-gradient(to right, #D9C795, transparent); }
.qhero__title { text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
.qhero__eyebrow { margin-bottom: 1.9rem; }
.qhero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(3.4rem, 9vw, 8.5rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
}
.qhero__sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  margin: 1.6rem 0 0;
}

/* ==========================================================================
   SHARED SECTION SCAFFOLD
   ========================================================================== */
.q-section { background: var(--bg); border-top: 1px solid var(--line-soft); }
.q-section--cacao {
  /* the cacao row wash: pod-lit at top-left, settling to deep roast */
  background: radial-gradient(135% 240% at 1% -14%, #4a2b17 0%, #261507 34%, #0f0905 100%);
  position: relative;
  overflow: hidden;
}
.q-section--cacao::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 0%, rgba(224,164,104,0.10), transparent 64%);
  pointer-events: none;
}

/* divider rule with a single sweep of gold light on enter */
.q-divider {
  position: relative;
  height: 1px;
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  background: var(--line-soft);
  overflow: hidden;
}
.q-divider::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 34%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: translateX(-110%);
  opacity: 0;
}
.q-divider.swept::after { animation: ruleSweep 1.9s var(--ease-out) forwards; }
@keyframes ruleSweep {
  0%   { transform: translateX(-110%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(360%); opacity: 0; }
}

/* ==========================================================================
   POSITIONING
   ========================================================================== */
.q-position { text-align: center; }

/* ===== "The Maison" scroll parallax: the beans drift slower than the copy ===== */
.q-parallax { position: relative; overflow: hidden; background: #0B0805 !important; }
.q-parallax .q-marble__bg {
  position: absolute; inset: -55% 0; z-index: 0;
  background-image: url('assets/texture_parallax_Cacao1.webp');
  background-size: cover; background-position: center;
  will-change: transform; transform: translate3d(0,0,0);
}
.q-parallax .q-marble__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(125% 100% at 50% 45%, rgba(11,8,5,0.62) 0%, rgba(11,8,5,0.74) 55%, rgba(8,5,3,0.88) 100%),
    linear-gradient(to bottom, rgba(8,5,3,0.55) 0%, transparent 26%, transparent 74%, rgba(8,5,3,0.6) 100%);
}
.q-parallax .q-position__inner { position: relative; z-index: 2; }
/* Fermentation and Craft: molten plate drifts behind the copy, same rig as The Maison */
.q-craft.q-parallax > .container { position: relative; z-index: 2; }
.q-craft.q-parallax .q-marble__bg { background-image: url('assets/Parallax3_CACAO.webp'); }
.q-craft.q-parallax .q-marble__veil {
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(8,5,3,0.5) 0%, rgba(8,5,3,0.78) 62%, rgba(8,5,3,0.9) 100%),
    linear-gradient(to bottom, rgba(8,5,3,0.7) 0%, rgba(8,5,3,0.6) 28%, rgba(8,5,3,0.6) 72%, rgba(8,5,3,0.75) 100%);
}
@media (prefers-reduced-motion: reduce) { .q-parallax .q-marble__bg { transform: none !important; } }
.q-position__inner { max-width: 56rem; margin-inline: auto; position: relative; }
.q-position__eyebrow { margin-bottom: 2.6rem; }
.q-position__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.4vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}
.q-position__lede {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.5;
  color: var(--text);
  max-width: 40ch;
  margin: clamp(2rem, 4vh, 3rem) auto 0;
  text-wrap: balance;
}
.q-position__note {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 46ch;
  margin: clamp(1.4rem, 2.6vh, 2rem) auto 0;
  text-wrap: pretty;
}
.q-position__accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  color: var(--cacao);
  margin: clamp(2.2rem, 4vh, 3rem) 0 0;
  letter-spacing: 0.01em;
}
.q-position__accent .gold { color: var(--gold-soft); }
.q-position__coda {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  color: var(--cacao);
  margin: clamp(1.4rem, 3vh, 2.2rem) 0 0;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   EDITORIAL SPLIT  (origin, lapidary)
   ========================================================================== */
.q-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.q-split--reverse .q-split__media { order: 2; }
.q-split--reverse .q-split__text { order: 1; }
.q-split__text { max-width: 38ch; }
.q-split__eyebrow { margin-bottom: 1.8rem; }
.q-split__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 1.8rem;
  text-wrap: balance;
}
.q-split__lead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0 0 1.9rem;
  text-wrap: balance;
}
.q-split__body {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--text-dim);
}
.q-split__body + .q-split__body { margin-top: 1.3rem; }
.q-split__accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  color: var(--gold-soft);
  margin: 2rem 0 0;
}

/* ==========================================================================
   MAGNETIC, GEM-LIT FIGURE
   gentle scale + soft cacao rim-light on hover; JS adds a restrained drift
   ========================================================================== */
.q-figure {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: radial-gradient(120% 105% at 50% 28%, #241709 0%, #140D06 46%, #0C0804 100%);
  transition: transform 0.85s var(--ease-out),
              box-shadow 0.85s var(--ease-out),
              border-color 0.85s var(--ease-out);
  will-change: transform;
}
.q-figure:hover {
  border-color: var(--cacao-line);
  box-shadow:
    0 34px 90px -34px rgba(0, 0, 0, 0.78),
    0 0 52px -8px var(--cacao-glow),
    inset 0 0 0 1px rgba(15, 107, 82, 0.28);
}
.q-figure__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.q-figure image-slot,
.q-figure .image-slot { width: 100%; height: 100%; }
.q-figure__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
/* Fermentation frame sits on the dark cacao field: settle the warmth and
   close the edges so the image does not shout next to the type. */
.q-craft .q-figure__img { filter: brightness(0.82) saturate(0.82) contrast(1.04); }
.q-craft .q-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,0) 38%, rgba(12,7,3,0.42) 100%),
    linear-gradient(to top, rgba(12,7,3,0.3), rgba(12,7,3,0) 55%);
}
.q-figure__cap {
  position: absolute;
  left: 1.2rem;
  bottom: 1.1rem;
  z-index: 2;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(236, 230, 216, 0.62);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.q-figure__cap .dot { color: var(--gold); margin: 0 0.5rem; }

.q-split__media { height: clamp(360px, 52vh, 560px); }

/* Origin: ghosted pod cluster bleeding from the lower-left, drifting diagonally on scroll */
.q-origin__bleed {
  position: absolute; bottom: 0; left: -34%; z-index: 0;
  width: min(104%, 1780px); height: 100%;
  background: url('assets/cacao-origin-bleed-1200.webp') left bottom / contain no-repeat;
  background-image: image-set(url('assets/cacao-origin-bleed-1200.webp') 1x, url('assets/cacao-origin-bleed-1900.webp') 2x);
  opacity: 1;
  pointer-events: none;
  will-change: transform;
}
.q-origin .container { position: relative; z-index: 1; }
@media (min-width: 1000px) {
  .q-origin__bleed {
    background-image: url('assets/cacao-origin-bleed-1900.webp');
    background-image: image-set(url('assets/cacao-origin-bleed-1900.webp') 1x, url('assets/cacao-origin-bleed.webp') 2x);
  }
}
@media (prefers-reduced-motion: reduce) { .q-origin__bleed { transform: none !important; } }
/* Origin: the specimen frame spans the full height of the text column,
   from the top of the headline to the baseline of the gold accent. */
/* Origin specimen: a frameless pod cutout standing over the ghosted bleed.
   No magnetic/parallax transform, so nothing shifts on hover. */
.q-origin { padding-block: clamp(4rem, 8vh, 7rem); }
.q-origin .q-split { align-items: center; grid-template-columns: 0.9fr 1.1fr; }
.q-origin .q-split__media {
  position: relative;
  align-self: stretch;
  height: auto;
  min-height: clamp(440px, 70vh, 760px);
  overflow: visible;
  border: none;
  background: none;
}
.q-origin .q-figure:hover { transform: none; box-shadow: none; border-color: transparent; }
.q-origin__pod {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: clamp(420px, 66vh, 720px);
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.55));
  pointer-events: none;
}
.q-origin .q-split__text { max-width: 50ch; }
.q-split__title .nowrap { white-space: nowrap; }
.q-split__title .ln { display: block; }

/* ==========================================================================
   THE EXPERIENCES. The maison you walk through.
   ========================================================================== */
.q-experiences__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}
.q-experiences__eyebrow { margin-bottom: 1.6rem; }
.q-experiences__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.q-experiences__intro {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 44ch;
  margin: 1.6rem auto 0;
  text-wrap: balance;
}
.q-rooms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 2.2vw, 2.2rem);
}
.q-room__media { height: clamp(280px, 38vh, 420px); margin: 0; }
.q-room__below { margin-top: 1.4rem; }
.q-room__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 0.7rem;
}
.q-room__desc {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0;
  text-wrap: pretty;
}

/* ==========================================================================
   ROUTE OF CACAO. The single parchment band: Sagana at the source.
   ========================================================================== */
.q-route {
  position: relative;
  overflow: hidden;
  background: var(--parchment);
  text-align: center;
  border-top: 1px solid var(--line-soft);
}
.q-route::before, .q-route::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(230px, 31%, 620px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.q-route::before {
  left: -7%;
  top: -14%;
  aspect-ratio: 565 / 547;
  background-image: url("assets/route-splash-topleft.webp");
}
.q-route::after {
  right: -7%;
  bottom: -14%;
  aspect-ratio: 565 / 527;
  background-image: url("assets/route-splash-bottomright.webp");
}
@media (max-width: 720px){
  /* Sized up so the splashes read at the same weight as on desktop and the open Fold. */
  .q-route::before, .q-route::after { width: 60%; }
  .q-route::before { left: -12%; top: -9%; }
  .q-route::after { right: -12%; bottom: -9%; }
}
/* Open Fold keeps the original size. */
@media (min-width: 681px) and (max-width: 720px){
  .q-route::before, .q-route::after { width: 46%; }
  .q-route::before { left: -10%; top: -8%; }
  .q-route::after { right: -10%; bottom: -8%; }
}
.q-route__inner { position: relative; z-index: 1; max-width: 54rem; margin-inline: auto; }
.q-route .q-eyebrow { color: var(--gold-deep, #8A6F3C); }
.q-route .q-eyebrow::before { background: linear-gradient(to right, var(--gold-deep, #8A6F3C), transparent); }
.q-route__eyebrow { margin-bottom: 2.2rem; }
.q-route__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #2E1B0E;
  margin: 0;
}
.q-route__body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.75;
  color: #5A4632;
  max-width: 52ch;
  margin: clamp(1.6rem, 3vh, 2.4rem) auto 0;
  text-wrap: pretty;
}
.q-route__accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  color: var(--cacao-deep);
  margin: clamp(2rem, 4vh, 3rem) 0 0;
}
.q-route__sagana {
  display: block;
  width: clamp(158px, 17vw, 200px);
  height: auto;
  margin: clamp(2.6rem, 5.5vh, 4rem) auto 0;
  opacity: 0.9;
}

/* ==========================================================================
   BOUTIQUE ARCHITECTURE — full-bleed gem-lit interior
   ========================================================================== */
.q-boutique {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  background: #120C06;
}
.q-boutique__media { position: absolute; inset: 0; z-index: 0; }
.q-boutique .q-figure {
  position: absolute;
  inset: 0;
  margin: 0;
  border: 0;
  background: #120C06;
}
.q-boutique .q-figure:hover { transform: none; box-shadow: none; }
.q-boutique__grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(13,10,7,0.9) 0%, rgba(13,10,7,0.58) 19%, rgba(13,10,7,0.2) 42%, rgba(13,10,7,0.02) 62%, transparent 74%),
    linear-gradient(to right, rgba(13,10,7,0.66) 0%, rgba(13,10,7,0.3) 26%, rgba(13,10,7,0.0) 50%);
  pointer-events: none;
}
.q-boutique__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--margin) clamp(3.5rem, 8vh, 6rem);
}
.q-boutique__eyebrow { margin-bottom: 1.6rem; }
.q-boutique__title {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.4rem, 5.5vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.q-boutique__cap {
  margin-top: 1.6rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(236, 230, 216, 0.5);
}
.q-boutique__body { max-width: 46ch; margin-top: 1.6rem; }

/* ==========================================================================
   LEGACY CLOSE
   ========================================================================== */
.q-legacy {
  text-align: center;
  border-top: 1px solid var(--line-gold);
}
/* Legacy close: full-bleed cacao plate, drifting on scroll; slogan rises in.
   Copies the Qvinto / Ameria Riva close: a full-viewport section with the
   content centred, warmed for the cacao canvas. */
.q-legacy--waterfall {
  position: relative; overflow: hidden;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #0D0A07 !important;
}
/* The plate is masked so the beans image itself fades to nothing before the
   bottom edge — no clipped edge can bleed through at the seam, whatever the
   pin does to stacking. The exposed area is solid #0D0A07, same as the next
   section, so the transition is seamless. */
.q-legacy--waterfall .q-marble__bg {
  background-image: image-set(url('assets/From_soil_to_bar_cacao.avif') type('image/avif'), url('assets/From_soil_to_bar_cacao.webp') type('image/webp'));
  inset: 0; background-size: cover; background-position: center 42%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 94%, transparent 100%);
}
.q-legacy--waterfall .q-marble__veil {
  background: radial-gradient(120% 100% at 50% 45%, rgba(9,6,4,0.5) 0%, rgba(9,6,4,0.72) 60%, rgba(9,6,4,0.86) 100%);
}
.q-legacy--waterfall .container { position: relative; z-index: 2; }
.q-legacy .reveal-line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; --rev: 2100ms; }
/* masked line-rise wrappers used by the GSAP close + boutique choreography */
.q-legacy .awl, .q-boutique .awl { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.q-legacy .awl__in, .q-boutique .awl__in { display: block; will-change: transform; }
.q-legacy__eyebrow { margin-bottom: 2.4rem; }
.q-legacy__logo {
  width: 196px;
  height: 82px;
  display: block;
  margin: 0 auto 2.4rem;
  opacity: 0.95;
}
.q-legacy__line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  line-height: 1.45;
  color: var(--gold-soft);
  margin: 0 auto;
  text-wrap: balance;
}

/* ==========================================================================
   INQUIRE band
   ========================================================================== */
.q-inquire {
  text-align: center;
  background: var(--bg);
  border-top: 1px solid var(--line-gold);
  padding-block: clamp(4.5rem, 9vh, 8rem);
}
.q-inquire__eyebrow { margin-bottom: 1.8rem; }
.q-inquire__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.1;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
  transition: color 0.4s ease;
}

/* Wordmark link into the Qvinto maison route */
.q-inquire__wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  margin-bottom: 2.8rem;
}
/* Title underline draws in from center on desktop hover */
.q-inquire__title {
  position: relative;
}
.q-inquire__title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.18em;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold-soft) 50%, var(--gold) 80%, transparent);
  box-shadow: 0 0 5px rgba(188, 165, 109, 0.45);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.q-inquire__caption {
  font-family: var(--mono);
  font-size: clamp(0.6rem, 0.72vw, 0.72rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #BCA56D;
  transition: color 0.4s ease;
}
@media (hover: hover) {
  .q-inquire__wordmark:hover .q-inquire__title::after { transform: scaleX(1); }
  .q-inquire__wordmark:hover .q-inquire__caption { color: var(--glow, #E0A468); }
}
.q-inquire .text-link { font-size: 0.8rem; }
.q-inquire .text-link:hover { color: var(--glow, #E0A468); }
.q-inquire .text-link::after {
  background: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold-soft) 50%, var(--gold) 80%, transparent);
  box-shadow: 0 0 5px rgba(188, 165, 109, 0.45);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .q-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .q-split--reverse .q-split__media { order: 0; }
  .q-split--reverse .q-split__text { order: 0; }
  .q-split__text { max-width: none; }
  /* Mirrors the Qvinto / Ameria fixes: the desktop two-column Origin rule outranked the stacked grid on phones. */
  .q-split, .q-origin .q-split { grid-template-columns: minmax(0, 1fr); }
  .q-split__accent .ln { display: block; }
  .q-origin { padding-top: 64px; padding-bottom: 64px; }
  .q-craft { padding-top: 64px; padding-bottom: 64px; }
  .q-experiences { padding-top: 64px; padding-bottom: 64px; }
  /* Origin on phones, as on desktop: the pod cluster sits behind the open pod (top), not behind the copy.
     Stationary, faded at the floor so it never reaches the eyebrow. */
  .q-origin__bleed { top: 40px; bottom: auto; left: -32%; width: 112%; height: calc(64px + clamp(260px, 68vw, 560px)); background-position: left center; transform: none !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }
  .q-boutique__inner { padding-bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px)); }
  .q-origin .q-split { align-items: stretch; }
  /* Pod frame scales with screen width so narrow phones keep the open Fold's composition. */
  .q-origin .q-split__media { height: clamp(260px, 68vw, 560px); min-height: 0; }
  .q-origin__pod { height: 100%; }
  .q-rooms { grid-template-columns: 1fr; gap: 2.4rem; }
  .q-room__media { height: clamp(280px, 44vh, 400px); }
}
@media (max-width: 680px) {
  .spine { display: none; }
  .q-coda-end { display: block; }
}
/* Narrowest phones (Fold closed): same steps as Qvinto and Ameria Riva. */
@media (max-width: 380px) {
  .q-split__title { font-size: 1.75rem; }
  .q-position__accent .gold { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .q-divider.swept::after { animation: none !important; opacity: 0 !important; }
}

/* No lone last words in paragraphs (applied across all five maisons). */
.q-position__note, .q-split__lead, .q-split__body, .q-boutique__body { text-wrap: pretty; }

/* Boutique paragraph: fixed 440px width on desktop only (was inline, and overflowed phones). */
@media (min-width: 1025px) { .q-boutique__body { width: 440px; } }

/* Cacao hero: the plate is bright and busy behind the copy, so a soft warm pool sits behind the text block only.
   Bled far past the text so it shows no edge; the pods outside the copy stay untouched. */
.qhero .qhero__inner { isolation: isolate; }
.qhero .qhero__inner::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -35%; right: -20%; top: -45%; bottom: -40%;
  background: radial-gradient(closest-side, rgba(14,9,5,0.62) 0%, rgba(14,9,5,0.38) 55%, rgba(14,9,5,0) 100%);
}

/* Boutique on phones and tablets: the copy spans the full width, so the desktop side veil (left edge) stands down; only the bottom grade under the text remains.
   Crop pinned hard to the photo's right edge. */
@media (max-width: 1024px) {
  .q-boutique__grade { background: linear-gradient(to top, rgba(13,10,7,0.9) 0%, rgba(13,10,7,0.58) 19%, rgba(13,10,7,0.2) 42%, rgba(13,10,7,0.02) 62%, transparent 74%); }
  #cacao-boutique::part(image) { left: 100% !important; transform: translate(-100%, -50%) !important; }
  /* As on Qvinto: the photo starts below the header so the signage is never under it, then fades into the ground under the text. */
  .q-boutique__media { top: 92px; bottom: auto; height: min(calc(100% - 92px), 148vw); -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
}
/* Narrow phones: the Tayrona Cacao signage (about 74.5% across the photo) is centred side to side. */
@media (max-width: 680px) {
  #cacao-boutique::part(image) { left: 50% !important; transform: translate(var(--tune-x, -74.5%), -50%) !important; }
}

/* Accent / slogan lines (every italic line in the 1.15 to 1.25rem family) on phones and tablets: one step larger so the italic serif reads as the final note next to the sans body (all five maisons). */
@media (max-width: 1024px) { .q-split__accent, .q-position__accent, .q-position__coda, .q-route__accent { font-size: 1.3rem; } }
/* Two-sentence Maison line breaks at the sentence on all narrow phones (no lone last word at 1.3rem). */
@media (max-width: 680px) { .q-position__accent .gold { display: block; } .q-boutique .ln-sm { display: block; } }