/* ==========================================================================
   SAGANA. Ultra-Luxury Hospitality Maison. A maison page within the Tayrona
   Capital system. Inherits homepage.css (type scale, nav, footer, reveal
   engine). Official Landor / WPP "Malachite" identity: deep malachite green is
   the dominant canvas; sandy beige / sparkle gold is the living accent;
   malachite turquoise and emerald are the secondary highlights.
   Mood: Host to the World. Forthcoming collection: still framing.
   ========================================================================== */

:root {
  /* ---- Official Sagana "Malachite" palette (Landor / WPP, 2024) ---- */
  --bg:            #003428;   /* Deep Malachite, the dominant canvas (60%) */
  --bg-raise:      #004B30;   /* Malachite Green, raised panel */
  --bg-warm:       #08623B;   /* Malachite Emerald, lit panel */
  --bg-deep:       #050F04;   /* Midnight Malachite, deepest ground */
  --ink:           #050F04;   /* Midnight Malachite */

  --text:          #F6EFDE;   /* sandy linen, primary type on malachite */
  --text-dim:      #C7D6CB;   /* muted malachite-tinted linen */
  --text-faint:    #7FA08F;

  /* sandy beige / sparkle gold, the living accent */
  --terroir:       #FFE6B4;   /* Sandy Beige / Sparkle Gold */
  --terroir-bright:#FFF1D2;
  --terroir-deep:  #E4C78C;
  --terroir-abyss: #04130D;
  --terroir-glow:  rgba(255, 230, 180, 0.26);
  --terroir-line:  rgba(255, 230, 180, 0.42);

  /* malachite turquoise / emerald, the secondary highlights */
  --canopy:        #20A98A;   /* Malachite Turquoise */
  --canopy-deep:   #08623B;   /* Malachite Emerald */

  /* re-point the inherited gold tokens to sandy beige so eyebrows, pillar
     numbers, dividers and rules read in the maison's own accent */
  --gold:          #FFE6B4;
  --gold-soft:     #FFF1D2;
  --gold-deep:     #E4C78C;
  --line-gold:     rgba(255, 230, 180, 0.40);

  /* Sagana pace, unhurried */
  --rev: 1300ms;

  --line:          rgba(246, 240, 228, 0.12);
  --line-soft:     rgba(246, 240, 228, 0.07);
}

body { background-color: var(--bg); color: var(--text); }
::selection { background: var(--terroir); color: var(--ink); }

.vignette { box-shadow: inset 0 0 220px 40px rgba(0, 0, 0, 0.56); }

/* 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--terroir { color: var(--terroir); }
.q-eyebrow--terroir::before { background: linear-gradient(to right, var(--terroir), transparent); }

/* ==========================================================================
   SCROLL SPINE
   ========================================================================== */
.spine {
  display: none;
  position: fixed;
  top: 0;
  left: clamp(1rem, 3vw, 3.2rem);
  width: 1px;
  height: 100vh;
  background: rgba(239, 229, 210, 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(--terroir), var(--terroir-deep));
}

/* ==========================================================================
   HERO. The collection, drawn from the landscape. Full-bleed image under
   baked earth-light and scrim gradients. Fixed framing: no zoom, no parallax.
   ========================================================================== */
.qhero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #03120C;
}
.qhero__scene { position: absolute; inset: 0; z-index: 0; }
/* Blur-up placeholder: 24x14 frame-zero thumbnail, held under the poster while it loads. */
.qhero__lqip {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0c1a12 url('data:image/webp;base64,UklGRrQAAABXRUJQVlA4IKgAAADQAwCdASoYAA4APt1apkyopSOiMAgBEBuJQAB8qzaOM5ibrr+C39AA/u47l5/4jfgJ9lVsJQyt1qO13QNV5uwxoXSd7bcLYwI9Q/yY5WSlvP7dd+9ZxQcmSRUBXONwBceiMG8SNbOawKFZyhQH0rOTWt9VuCfBX+RlnbCKWFrtBPj/8FcnU3Mei82U9D+amy7L0oyGu35t0J01SYO9gNdJuBv9q1AAAAA=') 62% center / cover no-repeat;
  filter: blur(22px) saturate(1.05);
  transform: scale(1.08);
}
.qhero__poster { display: contents; }
.qhero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  display: block;
}
.qhero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  opacity: 0;
  transition: opacity 900ms ease;
}
.qhero__video.is-ready { opacity: 1; }
/* Hero media controls: the shared v-hero-media component (hero-media.css).
   Sagana's one hand-adjusted value, kept as a scoped override. */
.qhero { --v-hero-control-blur: 6px; }
/* Scrim: one measured radial under the text block only. It reaches zero inside
   the frame, never touches the top, the right, or the bird. */
.qhero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 30% 31% at 19.5% 75.5%,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.33) 60%,
    rgba(0, 0, 0, 0.20) 75%,
    rgba(0, 0, 0, 0.09) 88%,
    rgba(0, 0, 0, 0) 100%);
}
@media (max-width: 767px) {
  .qhero__scrim {
    background: radial-gradient(ellipse 60% 27% at 50% 80%,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.45) 45%,
      rgba(0, 0, 0, 0.33) 60%,
      rgba(0, 0, 0, 0.20) 75%,
      rgba(0, 0, 0, 0.09) 88%,
      rgba(0, 0, 0, 0) 100%);
  }
}
.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;
}
.qhero__eyebrow { margin-bottom: 1.9rem; }
.qhero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.4rem, 7vw, 7.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
}
.qhero__sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  color: var(--gold-soft);
  margin: 2.4rem 0 0;
}
.qhero__sub .em { color: var(--terroir); font-style: normal; }

/* ==========================================================================
   SHARED SECTION SCAFFOLD
   ========================================================================== */
.q-section { background: var(--bg); border-top: 1px solid var(--line-soft); }
.q-section--terroir {
  /* warm earth wash: ochre-lit at top-left, settling to volcanic deep */
  background: radial-gradient(135% 240% at 1% -14%, #0a553c 0%, #043a2b 34%, #021e16 100%);
  position: relative;
  overflow: hidden;
}
.q-section--terroir::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 0%, rgba(255, 230, 180, 0.12), transparent 64%);
  pointer-events: none;
}
.q-section--canopy {
  /* cool canopy wash, for the origin/terroir band */
  background: radial-gradient(135% 240% at 99% -14%, #0d6b50 0%, #064a36 36%, #02160f 100%);
  position: relative;
  overflow: hidden;
}
.q-section--canopy::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 0%, rgba(32, 169, 138, 0.16), transparent 64%);
  pointer-events: none;
}

/* divider rule with a single sweep of 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(--terroir), 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 landscape drifts slower than the copy ===== */
.q-parallax { position: relative; overflow: hidden; background: var(--bg); }
.q-parallax .q-marble__bg {
  position: absolute; inset: -55% 0; z-index: 0;
  background-image: url('assets/sagana-maison-keemala.webp');
  background-size: 118% auto; background-position: 50% 50%; background-repeat: no-repeat;
  background-color: var(--bg);
  filter: brightness(1.04) saturate(1.04);
  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(68% 62% at 50% 52%, rgba(0,24,18,0.64) 0%, rgba(0,24,18,0.44) 46%, rgba(0,22,16,0.12) 74%, transparent 92%),
    linear-gradient(to bottom, rgba(0,26,20,0.2) 0%, transparent 14%, transparent 86%, rgba(0,26,20,0.22) 100%);
}
.q-parallax .q-position__inner { position: relative; z-index: 2; }
/* the type carries its own contrast, so no panel sits over the landscape */
.q-parallax .q-position__title,
.q-parallax .q-position__lede,
.q-parallax .q-position__note,
.q-parallax .q-position__accent { text-shadow: 0 1px 2px rgba(0,16,12,0.7), 0 10px 34px rgba(0,16,12,0.75); }
.q-parallax .q-position__note { color: #F2EDE0; }
@media (prefers-reduced-motion: reduce) { .q-parallax .q-marble__bg { transform: none !important; } }
.q-position__inner { max-width: 58rem; 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__title em { font-style: italic; color: var(--terroir); }
.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: 42ch;
  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.75;
  color: var(--text-dim);
  max-width: 60ch;
  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(--terroir);
  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(--sans);
  font-size: clamp(0.74rem, 0.95vw, 0.86rem);
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin: clamp(1.6rem, 3vh, 2.2rem) auto 0;
  max-width: 48ch;
}

/* ==========================================================================
   THE THREE PRINCIPLES — the pillars (centerpiece)
   Three engraved columns standing side by side, hairline-divided.
   ========================================================================== */
.sg-pillars {
  background: var(--bg-raise);
  border-top: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
}
/* stationary photographic ground, the section above drifts so this one holds still */
.sg-pillars__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('assets/sagana-principles-gran-bali.webp');
  background-size: cover; background-position: 50% 62%; background-repeat: no-repeat;
  background-color: var(--bg-raise);
  filter: brightness(0.94) saturate(1.02);
}
.sg-pillars__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 50%, rgba(0,26,20,0.42) 0%, rgba(0,22,17,0.56) 66%, rgba(0,18,13,0.68) 100%),
    linear-gradient(to bottom, rgba(0,24,18,0.62) 0%, rgba(0,22,17,0.34) 24%, rgba(0,22,17,0.34) 76%, rgba(0,24,18,0.6) 100%);
}
.sg-pillars > .container { position: relative; z-index: 2; }
.sg-pillars { border-top: none; }
.sg-pillars .sg-pillars__title,
.sg-pillars .sg-pillars__intro,
.sg-pillars .sg-pillar__name,
.sg-pillars .sg-pillar__lead { text-shadow: 0 1px 2px rgba(10,8,6,0.55), 0 6px 22px rgba(10,8,6,0.45); }
.sg-pillars__head {
  text-align: center;
  max-width: 50rem;
  margin: 0 auto clamp(3.5rem, 7vh, 6rem);
}
.sg-pillars__eyebrow { margin-bottom: 1.8rem; }
.sg-pillars__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.4vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.sg-pillars__title em { font-style: italic; color: var(--terroir); }
.sg-pillars__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: 46ch;
  margin: 1.6rem auto 0;
  text-wrap: balance;
}
.sg-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.sg-pillars__grid--four { grid-template-columns: repeat(4, 1fr); }
.sg-pillars__grid--four .sg-pillar { padding: 0 clamp(0.9rem, 1.7vw, 1.8rem); }
.sg-pillar {
  position: relative;
  padding: 0 clamp(1.4rem, 2.4vw, 2.6rem);
  display: flex;
  flex-direction: column;
}
.sg-pillar + .sg-pillar { border-left: 1px solid var(--line); }
.sg-pillar__num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.sg-pillar__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.1vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 0.4rem;
  position: relative;
  padding-top: 1.6rem;
}
.sg-pillar__name::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 30px;
  height: 1px;
  background: linear-gradient(to right, var(--terroir), transparent);
}
.sg-pillar__lead {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 1.1rem 0 0;
  text-wrap: pretty;
}

/* ==========================================================================
   EDITORIAL SPLIT  (service, terroir)
   ========================================================================== */
.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: 40ch; }
.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__title em { font-style: italic; color: var(--terroir); }
.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;
}
.q-split__accent .em { color: var(--terroir); font-style: normal; }

/* small spec line under a split */
.q-spec {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.4rem;
}
.q-spec li { display: flex; flex-direction: column; gap: 0.3rem; }
.q-spec__k {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.q-spec__v {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.15rem;
  color: var(--terroir);
}

/* ==========================================================================
   MAGNETIC, EARTH-LIT FIGURE
   ========================================================================== */
.q-figure {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: radial-gradient(120% 105% at 50% 28%, #06392a 0%, #042a1f 46%, #02130d 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(--terroir-line);
  box-shadow:
    0 34px 90px -34px rgba(0, 0, 0, 0.8),
    0 0 52px -8px var(--terroir-glow),
    inset 0 0 0 1px rgba(255, 230, 180, 0.24);
}
.q-figure image-slot,
.q-figure .image-slot { width: 100%; height: 100%; }
.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(239, 229, 210, 0.62);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
.q-figure__cap .dot { color: var(--terroir); margin: 0 0.5rem; }
.q-figure__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.q-split__media { height: clamp(380px, 56vh, 600px); }

/* ==========================================================================
   THE VALUES — the five maison values, a quiet centred movement
   ========================================================================== */
.sg-values {
  background: var(--bg-raise);
  border-top: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
}
/* stationary photographic ground, matched to the principles band above */
.sg-values__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('assets/sagana-values-children.webp');
  background-size: cover; background-position: 50% 32%; background-repeat: no-repeat;
  background-color: var(--bg-raise);
  filter: brightness(0.94) saturate(1.02);
}
.sg-values__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 50%, rgba(0,26,20,0.42) 0%, rgba(0,22,17,0.56) 66%, rgba(0,18,13,0.68) 100%),
    linear-gradient(to bottom, rgba(0,24,18,0.62) 0%, rgba(0,22,17,0.34) 24%, rgba(0,22,17,0.34) 76%, rgba(0,24,18,0.6) 100%);
}
.sg-values > .container { position: relative; z-index: 2; }
.sg-values .sg-values__title,
.sg-values .sg-values__intro,
.sg-values .sg-value__name,
.sg-values .sg-value__desc { text-shadow: 0 1px 2px rgba(0,16,12,0.7), 0 10px 34px rgba(0,16,12,0.7); }
.sg-values__head {
  text-align: center;
  max-width: 52rem;
  margin: 0 auto clamp(3.5rem, 7vh, 6rem);
}
.sg-values__eyebrow { margin-bottom: 1.8rem; }
.sg-values__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.4vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.sg-values__title em { font-style: italic; color: var(--terroir); }
.sg-values__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: 52ch;
  margin: 1.6rem auto 0;
  text-wrap: balance;
}
.sg-values__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.6rem, 3vw, 3.2rem);
}
.sg-value {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sg-value__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.45rem, 1.9vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  position: relative;
  padding-top: 1.5rem;
}
.sg-value__name::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--terroir), transparent);
}
.sg-value__desc {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-dim);
  margin: 1rem 0 0;
  max-width: 22ch;
  text-wrap: pretty;
}

/* ==========================================================================
   THE COLLECTIONS — the five sub-collections, an editorial index
   ========================================================================== */
.sg-collections {
  /* v1 (subtler) — restore by swapping the three layer values back:
     radial 255,246,224 @ .055/.022 to 72%; linear .16/.18; noise opacity .55 */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"),
    radial-gradient(120% 72% at 50% 38%, rgba(255, 246, 224, 0.115) 0%, rgba(255, 246, 224, 0.045) 40%, rgba(0, 0, 0, 0) 74%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.06) 22%, rgba(0, 0, 0, 0.06) 76%, rgba(0, 0, 0, 0.38) 100%),
    var(--bg);
  background-size: 180px 180px, cover, cover, cover;
  background-blend-mode: soft-light, normal, normal, normal;
  border-top: 1px solid var(--line-soft);
}
.sg-collections__head {
  text-align: center;
  max-width: 50rem;
  margin: 0 auto clamp(2.8rem, 6vh, 4.5rem);
}
.sg-collections__eyebrow { margin-bottom: 1.8rem; }
.sg-collections__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.4vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.sg-collections__title em { font-style: italic; color: var(--terroir); }
.sg-collections__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: 48ch;
  margin: 1.6rem auto 0;
  text-wrap: balance;
}
.sg-index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.sg-row {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 2.4fr;
  align-items: baseline;
  gap: clamp(1.2rem, 3vw, 3.4rem);
  padding: clamp(1.6rem, 3.2vh, 2.4rem) clamp(1.4rem, 2.2vw, 2.4rem);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: background-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
/* left accent bar + soft hover wash, echoing the homepage maison rows */
.sg-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--terroir);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s var(--ease-out);
}
.sg-row:hover {
  background-color: var(--bg-raise);
  box-shadow: inset 0 0 90px -28px rgba(32, 169, 138, 0.5);
}
.sg-row:hover::before { transform: scaleY(1); }
.sg-row__head { transition: transform 0.6s var(--ease-out); }
.sg-row:hover .sg-row__head { transform: translateX(0.5rem); }
.sg-row__head { }
.sg-row__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.3vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.sg-row__role {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 0.7rem;
}
.sg-row__desc {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0;
  text-wrap: pretty;
}

/* ==========================================================================
   THE PRIVILEGE CLUB — discreet membership feature
   ========================================================================== */
.sg-privilege {
  position: relative;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-raise);
  overflow: hidden;
}
/* stationary photographic ground, matched to the values and principles bands */
.sg-privilege__bg {
  position: absolute; inset: -24% 0; z-index: 0;
  background-image: url('assets/sagana-plc-balloons.webp');
  background-size: cover; background-position: 50% 40%; background-repeat: no-repeat;
  background-color: var(--bg-raise);
  filter: brightness(.68) saturate(.95);
}
.sg-privilege__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(38,30,24,0.34) 0%, rgba(38,30,24,0.26) 50%, rgba(20,22,20,0.42) 100%);
  mix-blend-mode: multiply;
}
.sg-privilege .sg-privilege__title,
.sg-privilege .sg-privilege__body,
.sg-privilege .sg-privilege__accent { text-shadow: 0 1px 2px rgba(0,16,12,0.7), 0 10px 34px rgba(0,16,12,0.7); }
.sg-privilege__inner {
  position: relative;
  z-index: 2;
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}
.sg-privilege__eyebrow { margin-bottom: 2.2rem; }
.sg-privilege__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.sg-privilege__title em { font-style: italic; color: var(--terroir); }
.sg-privilege__body {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.8;
  color: var(--text-dim);
  max-width: 52ch;
  margin: clamp(1.6rem, 3vh, 2.2rem) auto 0;
  text-wrap: pretty;
}
.sg-privilege__accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  color: var(--gold-soft);
  margin: clamp(2rem, 4vh, 2.8rem) 0 0;
}

/* ==========================================================================
   FULL-BLEED STATEMENT — the welcome, large
   ========================================================================== */
.q-boutique {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  background: #02130D;
}
.q-boutique__media { position: absolute; inset: 0; z-index: 0; }
.q-boutique__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.q-boutique .q-figure {
  position: absolute;
  inset: 0;
  margin: 0;
  border: 0;
  background-color: #02130D;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 42%;
  background-image: url("assets/sagana-welcome-gate.webp");
  background-image: image-set(
    url("assets/sagana-welcome-gate.avif") type("image/avif"),
    url("assets/sagana-welcome-gate.webp") type("image/webp")
  );
}
.q-boutique .q-figure:hover { transform: none; box-shadow: none; }
.q-boutique__grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(90% 78% at 18% 92%, rgba(0,20,15,0.86) 0%, rgba(0,20,15,0.6) 34%, rgba(0,20,15,0.26) 60%, transparent 82%);
  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: normal;
  font-size: clamp(2.4rem, 5.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.q-boutique__title em { font-style: italic; color: var(--terroir); }
.q-boutique__body { max-width: 44ch; margin-top: 1.6rem; }
.q-split__body.q-boutique__body { color: var(--text); }
/* The Welcome: pinned cinema, the gate scales up then the copy rolls in */
.sg-cinema { position: relative; background: #02130D; }
.sg-cinema .sg-pin__hold { height: 0; }
.q-boutique__media { transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; }
.sg-awl { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.sg-awl__in { display: block; will-change: transform; }
@media (min-width: 1025px) and (min-height: 620px) {
  .sg-cinema .q-boutique { position: sticky; top: 0; min-height: 100vh; }
  .sg-cinema .sg-pin__hold { height: 120vh; }
}
/* phones and tablets: the same pin and grow as Rudis Sylva's Made Whole */
@media (max-width: 1024px) {
  .sg-cinema .q-boutique { position: sticky; top: 0; min-height: 100svh; }
  .sg-cinema .sg-pin__hold { height: 120vh; }
}

/* ==========================================================================
   THE MAISON ONLINE — Sagana wordmark + enquire
   ========================================================================== */
.sg-visit {
  text-align: center;
  background: var(--bg-raise);
  padding-block: clamp(4.5rem, 9vh, 7.5rem);
}
.sg-visit + .footer, body:has(.sg-visit) .footer { border-top: 0; }
.sg-visit__eyebrow { margin-bottom: 2.4rem; display: inline-flex; color: #CBB783; }
.sg-visit__link { display: block; text-decoration: none; }
.sg-visit__link:hover .sg-visit__logo { opacity: 1; transform: translateY(-3px); }
.sg-visit__logo {
  width: clamp(240px, 36vw, 460px);
  height: auto;
  display: block;
  margin: 0 auto;
  opacity: 0.92;
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
  /* the wordmark ink is dark; lift it to warm linen on the dark canvas */
  filter: brightness(0) invert(91%) sepia(18%) saturate(360%) hue-rotate(347deg) brightness(97%) contrast(92%);
}
.sg-visit__contact {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.6rem, 5vh, 3.8rem);
}
.sg-visit__contact .text-link { color: #CBB783; }
.sg-visit__contact .text-link::after {
  background: linear-gradient(to right, transparent, var(--terroir) 20%, var(--terroir-bright) 50%, var(--terroir) 80%, transparent);
  box-shadow: 0 0 5px rgba(255, 230, 180, 0.4);
}
.sg-visit__contact .text-link:hover { color: var(--terroir-bright); }

/* ==========================================================================
   LEGACY CLOSE
   ========================================================================== */
.q-legacy {
  text-align: center;
  border-top: 1px solid var(--line-gold);
}
.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;
}

/* Full-viewport closing: photographic ground, masked at the foot, the lines
   rolling up in sequence while the section is pinned. */
.q-legacy--close {
  position: relative; overflow: hidden; border-top: none;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #02130D !important;
}
.q-legacy--close .q-legacy__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url("assets/sagana-closing.webp");
  background-image: image-set(
    url("assets/sagana-closing.avif") type("image/avif"),
    url("assets/sagana-closing.webp") type("image/webp")
  );
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: #02130D;
}
.q-legacy--close .q-legacy__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Uniform darkening across the whole photo, as on Ameria Riva's close; the soft shadow on the type does the rest. */
  background: rgba(0,22,16,0.5);
}
.q-legacy--close .container { position: relative; z-index: 2; }
.q-legacy .reveal-line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; --rev: 2100ms; }
.q-legacy--close .q-legacy__line { color: #F6EBD3; text-shadow: 0 1px 3px rgba(0,14,10,0.55), 0 2px 22px rgba(0,14,10,0.72); }
.q-legacy--close .q-legacy__eyebrow { color: #EFE2C2; text-shadow: 0 1px 14px rgba(0,14,10,0.72); }
.q-legacy--close .q-legacy__logo { opacity: 1; filter: drop-shadow(0 2px 18px rgba(0,16,11,0.5)); }
/* the close pins for 120vh of scroll */
.sg-close { position: relative; background: #02130D; }
.sg-close .sg-close__hold { height: 0; }
@media (min-width: 1025px) and (min-height: 620px) {
  .sg-close .q-legacy--close { position: sticky; top: 0; }
  .sg-close .sg-close__hold { height: 120vh; }
}
/* phones and tablets: the same pinned close as the other maisons */
@media (max-width: 1024px) {
  .sg-close .q-legacy--close { position: sticky; top: 0; min-height: 100svh; }
  .sg-close .sg-close__hold { height: 120vh; }
  .q-legacy--close .q-legacy__bg { background-position: 50% 50%; }
}
@media (max-width: 380px) { .q-legacy--close .q-legacy__bg { background-position: 51% 50%; } }
@media (min-width: 681px) and (max-width: 1024px) { .q-legacy--close .q-legacy__bg { background-position: 44.4% 50%; } }

/* ===== "Living Terroir": stationary lantern ground behind the split ===== */
.sg-terroir { position: relative; overflow: hidden; }
.sg-terroir__bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('assets/sagana-terroir-lanterns.webp') 50% 50% / cover no-repeat;
}
.sg-terroir__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 95% at 32% 50%, rgba(0,22,16,0.72) 0%, rgba(0,22,16,0.56) 46%, rgba(0,20,15,0.4) 74%, rgba(0,20,15,0.28) 100%),
    linear-gradient(to bottom, rgba(0,24,18,0.4) 0%, transparent 18%, transparent 82%, rgba(0,24,18,0.42) 100%);
}
.sg-terroir > .container { position: relative; z-index: 2; }
.sg-terroir + .sg-values { border-top: none; }
.sg-terroir .q-split__title,
.sg-terroir .q-split__body,
.sg-terroir .q-split__accent { text-shadow: 0 1px 2px rgba(0,16,12,0.7), 0 10px 34px rgba(0,16,12,0.7); }

/* ===== "The Welcome": ghosted savanna bleeding from the lower-left, drifting
   diagonally on scroll, with the host standing frameless over it ===== */
.sg-origin { position: relative; overflow: hidden; min-height: 100svh; display: flex; align-items: center; }
.sg-origin__bleed {
  position: absolute; inset: 0; z-index: 0;
  background: url('assets/sagana-welcome-bleed.webp') 50% 100% / cover no-repeat;
  opacity: 0.42;
  mix-blend-mode: screen;
  pointer-events: none;
}
.sg-origin > .container { width: 100%; }
.sg-origin .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .sg-origin__host { transform: translateX(-50%) !important; opacity: 1 !important; } }
.sg-origin .q-split { align-items: center; grid-template-columns: 0.9fr 1.1fr; }
.sg-origin .q-split__text { max-width: 50ch; }
.sg-origin .q-split__media {
  position: relative;
  align-self: stretch;
  height: auto;
  min-height: clamp(480px, 74vh, 860px);
  overflow: visible;
  clip-path: polygon(-200% -200%, 300% -200%, 300% 100%, -200% 100%);
  border: none;
  background: none;
  margin-bottom: calc(clamp(6rem, 12vh, 11rem) * -1);
}
.sg-origin .q-figure:hover { transform: none; box-shadow: none; border-color: transparent; }
.sg-origin__host {
  position: absolute;
  left: 27%;
  bottom: 0;
  transform: translateX(-50%);
  height: min(88%, 920px);
  width: auto;
  max-width: none;
  z-index: 1;
  object-fit: contain;
  object-position: 50% 100%;
  pointer-events: none;
  will-change: transform, opacity;
}
@media (max-width: 1024px) {
  /* The desktop 0.9fr / 1.1fr rule outranked the stacked grid, leaving the copy in a 138px column on phones. */
  .q-split, .sg-origin .q-split { align-items: stretch; grid-template-columns: minmax(0, 1fr); }
  .sg-origin .q-split__media { display: none; }
  .sg-origin__host { left: 74%; height: min(44%, 400px); opacity: 0.55; }
}

/* ==========================================================================
   THE COLLECTIONS — interactive rail
   Rest: five tall bars. Hover: dock taper, width only, height locked.
   Click: chosen image squares up on the left, copy to its right, the other
   four collapse to slivers, greyscale and dimmed, still clickable.
   ========================================================================== */
.sgx { --sgx-header: 96px; position: relative; overflow: hidden; background: var(--bg-raise); border-top: 1px solid var(--line-soft); }
.sgx-pin__hold { height: 0; }
@media (min-width: 1025px) and (min-height: 720px) {
  /* the section holds still for a beat once it fills the frame, so there is
     time to open a collection before the page moves on */
  .sgx-pin { position: relative; background: var(--bg-raise); }
  .sgx-pin__hold { height: 70vh; }
  .sgx-pin > .sgx { position: sticky; top: var(--sgx-header, 96px); }
}
@media (min-width: 1025px) and (min-height: 720px) {
  /* exactly one screen, less the fixed header: the rail takes whatever is left
     over after the head, cue and slogan, so the section can never overflow */
  .sgx { height: calc(100svh - var(--sgx-header)); min-height: 520px; padding-block: clamp(1.6rem, 3.5vh, 3.2rem); display: flex; align-items: center; }
  .sgx > .container { display: flex; flex-direction: column; justify-content: center; height: 100%; }
  .sgx__rail { flex: 1 1 auto; height: auto; min-height: 200px; max-height: 520px; }
}
/* short desktop windows: natural height, no pin, nothing clipped */
@media (min-width: 1025px) and (max-height: 719px) {
  .sgx { overflow: visible; padding-block: clamp(3rem, 6vh, 5rem); }
  .sgx__rail { height: clamp(320px, 52vh, 460px); }
}
.sgx > .container { width: 100%; }
.sgx__head { text-align: center; max-width: 54rem; margin: 0 auto clamp(2.2rem, 4vh, 3.2rem); }
.sgx__eyebrow { margin-bottom: 1.8rem; }
.sgx__title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.1rem, 4.4vw, 3.7rem); line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.sgx__title em { font-style: italic; color: var(--terroir); }
.sgx__intro { font-family: var(--serif); font-weight: 300; font-size: clamp(1.02rem, 1.4vw, 1.24rem); line-height: 1.7; color: var(--text-dim); max-width: 44ch; margin: 1.4rem auto 0; text-wrap: balance; }

/* ---- the rail ---- */
.sgx__rail { --rail-h: clamp(360px, 46vh, 500px); --gap: clamp(12px, 1.6vw, 24px); position: relative; display: flex; gap: var(--gap); height: var(--rail-h); align-items: center; }
.sgx__item {
  position: relative; flex: 0 0 auto; overflow: hidden; cursor: pointer;
  width: calc((100% - 4 * var(--gap)) / 5); height: 86%;
  background: #04130D; border: 0; padding: 0; display: block; text-align: left;
  transition: width 520ms cubic-bezier(0.22,1,0.36,1), height 520ms cubic-bezier(0.22,1,0.36,1), filter 420ms ease, opacity 420ms ease;
  will-change: width, height;
}
.sgx__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms cubic-bezier(0.22,1,0.36,1), filter 420ms ease; }
.sgx__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,20,15,0.86) 0%, rgba(0,20,15,0.34) 32%, rgba(0,20,15,0) 62%); transition: opacity 420ms ease; }
.sgx__label { position: absolute; left: 0; right: 0; bottom: clamp(1.1rem, 2.4vh, 1.8rem); z-index: 2; text-align: center; padding: 0 0.6rem; transition: opacity 320ms ease; }
.sgx__name { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(0.98rem, 1.15vw, 1.18rem); line-height: 1.25; color: #F6EFE0; text-shadow: 0 1px 14px rgba(0,14,10,0.7); }

/* hover taper: the hovered bar grows in width and height, dock-style; the rail
   keeps its own height and centres the bars, so nothing below it moves */
@media (hover: hover) and (min-width: 1025px) {
  .sgx__rail:not(.is-open) .sgx__item[data-f="2"] { width: calc((100% - 4 * var(--gap)) / 5 * 1.27); height: 100%; }
  .sgx__rail:not(.is-open) .sgx__item[data-f="1"] { width: calc((100% - 4 * var(--gap)) / 5 * 1.02); height: 91%; }
  .sgx__rail:not(.is-open) .sgx__item[data-f="0"] { width: calc((100% - 4 * var(--gap)) / 5 * 0.85); height: 82%; }
  .sgx__rail:not(.is-open) .sgx__item[data-f="2"] img { transform: scale(1.04); }
}

/* ---- open state ---- */
.sgx__rail.is-open .sgx__item { filter: grayscale(1) brightness(0.52); opacity: 0.72; width: clamp(38px, 4.4%, 62px); height: 80%; }
.sgx__rail.is-open .sgx__item .sgx__label { opacity: 0; }
.sgx__rail.is-open .sgx__item.is-active { filter: none; opacity: 1; width: min(36%, 460px); height: 100%; }
.sgx__rail.is-open .sgx__item.is-active .sgx__label { opacity: 0; }
.sgx__rail.is-open .sgx__item:hover { filter: grayscale(0.55) brightness(0.7); opacity: 0.9; }
.sgx__rail.is-open .sgx__item.is-active:hover { filter: none; }

.sgx__panel {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center;
  padding-left: clamp(1.6rem, 3vw, 3.2rem); padding-right: clamp(0.6rem, 1.6vw, 1.6rem);
  opacity: 0; pointer-events: none; transition: opacity 420ms ease 120ms;
  width: 0; overflow: hidden;
}
.sgx__rail.is-open .sgx__panel { opacity: 1; pointer-events: auto; }
.sgx__rail:not(.is-open) .sgx__panel { flex: 0 0 0; padding: 0; }
.sgx__panel-role { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--terroir); }
.sgx__panel-name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.12; margin: 1rem 0 0; }
.sgx__panel-desc { font-family: var(--sans); font-size: clamp(0.98rem, 1.15vw, 1.08rem); line-height: 1.75; color: var(--text-dim); margin: 1.4rem 0 0; max-width: 46ch; text-wrap: pretty; }
.sgx__panel-close { align-self: flex-start; margin-top: clamp(1.6rem, 3vh, 2.4rem); background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); transition: color 300ms ease; }
.sgx__panel-close:hover { color: var(--terroir); }
.sgx__hint { text-align: center; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); opacity: 0.7; margin: clamp(1.4rem, 2.6vh, 2rem) 0 0; transition: opacity 320ms ease; }
.sgx.is-open .sgx__hint { opacity: 0; }
.sgx__slogan { text-align: center; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 1.7vw, 1.5rem); color: var(--terroir); margin: clamp(1.4rem, 2.8vh, 2.2rem) 0 0; letter-spacing: 0.01em; }

@media (max-width: 1024px) {
  .sgx { min-height: 0; padding-block: 64px; }
  .sgx__rail { flex-direction: column; height: auto; max-height: none; }
  .sgx__item, .sgx__rail.is-open .sgx__item, .sgx__rail.is-open .sgx__item.is-active { width: 100%; height: clamp(240px, 34vh, 320px); filter: none; opacity: 1; }
  .sgx__rail { align-items: stretch; }
  .sgx__rail.is-open .sgx__item.is-active { height: clamp(300px, 42vh, 400px); }
  .sgx__rail .sgx__item .sgx__label, .sgx__rail.is-open .sgx__item .sgx__label { opacity: 1; }
  .sgx__rail.is-open .sgx__item.is-active .sgx__label { opacity: 0; }
  /* the copy opens beneath its image rather than beside it */
  .sgx__panel, .sgx__rail:not(.is-open) .sgx__panel { display: block; width: 100%; flex: 0 0 auto; padding: 0; }
  .sgx__rail:not(.is-open) .sgx__panel { height: 0; opacity: 0; }
  .sgx__rail.is-open .sgx__panel { height: auto; padding: clamp(1.4rem, 3vh, 2rem) 0 0; }
  .sgx__hint { display: block; }
}

/* ==========================================================================
   ENTRY — the Maison opens. Static markup gated behind html.lzbg, so a
   no-JS visit never sees a curtain it cannot lift.
   ========================================================================== */
.q-loader { display: none; }
html.lzbg .q-loader {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 10000; background: #003428;
  transition: transform 1.05s cubic-bezier(0.76,0,0.24,1);
}
html.lzbg .q-loader.is-out { transform: translateY(-100%); }
.q-loader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.9rem; transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.4,0,0.2,1); }
.q-loader.is-out .q-loader__inner { opacity: 0; transform: translateY(-28px); }
.q-loader__crest { width: clamp(96px, 8.4vw, 128px); height: auto; display: block; opacity: 0; transform: translateY(10px); animation: sgMarkIn 1.15s cubic-bezier(0.22,1,0.36,1) 120ms forwards; }
.q-loader__bar { position: relative; width: 148px; height: 1px; background: rgba(255,230,180,0.14); overflow: hidden; }
.q-loader__bar i { position: absolute; inset: 0; background: linear-gradient(to right, var(--terroir-deep, #E4C78C), var(--terroir, #FFE6B4)); transform: scaleX(0); transform-origin: left center; animation: sgBarFill 1.9s cubic-bezier(0.4,0,0.2,1) 420ms forwards; }
.q-loader__caption { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--text-dim); opacity: 0; animation: sgCapIn 1.1s ease 820ms forwards; }
@keyframes sgMarkIn { to { opacity: 1; transform: none; } }
@keyframes sgBarFill { to { transform: scaleX(1); } }
@keyframes sgCapIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.lzbg .q-loader { display: none; } }

/* ==========================================================================
   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; }
  .sg-pillars__grid { grid-template-columns: 1fr; }
  .sg-pillars__grid--four { grid-template-columns: 1fr; }
  .sg-pillar { padding: 0; }
  .sg-pillars__grid--four .sg-pillar { padding: 0; }
  .sg-pillar + .sg-pillar { border-left: 0; border-top: 1px solid var(--line); padding-top: 2.6rem; margin-top: 2.6rem; }
  .sg-row { grid-template-columns: 1fr; row-gap: 0.9rem; }
  .sg-row__desc { grid-column: 1 / -1; }
  .sg-values__grid { grid-template-columns: repeat(2, 1fr); max-width: 40rem; margin-inline: auto; row-gap: clamp(2.4rem, 5vh, 3.4rem); }
  .sg-values__grid .sg-value:last-child { grid-column: 1 / -1; }
  .sg-value__name::before { width: 56px; }
}
@media (max-width: 680px) {
  .spine { display: none; }
  .q-split__media { height: clamp(300px, 50vh, 420px); }
  .qhero__title { white-space: normal; }
  .sg-values__grid { grid-template-columns: 1fr; max-width: 26rem; }
  .sg-values__bg { background-position: 90% 32%; }
}
@media (max-width: 380px) { .sg-values__bg { background-position: 89% 32%; } }
@media (min-width: 681px) and (max-width: 1024px) { .sg-values__bg { background-position: 50% 32%; } }

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

.sg-privilege{overflow:hidden}
.sg-privilege__bg{will-change:transform}
@media (prefers-reduced-motion:reduce){.sg-privilege__bg{inset:0;transform:none!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; }

/* 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, .sg-privilege__accent, .sgx__slogan { 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; } }
@media (max-width: 680px) { .sgx__slogan .ln-sm { display: block; } }

/* The Maison on phones and tablets: the landscape was sized by width (118%), so on a tall section it ended short of the top and bottom. Cover the oversized drift layer instead so it fills the section and the drift has room to travel. */
@media (max-width: 1024px) { .q-parallax .q-marble__bg { background-size: cover; } }
/* On phones the copy runs edge to edge, so the centred veil left the sides too light to read. Darken evenly across the section. */
@media (max-width: 1024px) { .q-parallax .q-marble__veil { background: linear-gradient(to bottom, rgba(0,22,16,0.66) 0%, rgba(0,22,16,0.58) 50%, rgba(0,22,16,0.66) 100%); } }
/* The Maison crop, set from the preview sliders */
@media (max-width: 1024px) { .q-parallax .q-marble__bg { background-position: 62% 50%; } }
@media (max-width: 680px) { .q-parallax .q-marble__bg { background-position: 54% 50%; } }
/* Rarely Revealed: 64px top and bottom on phones and tablets, as on the other maisons */
@media (max-width: 1024px) { .sg-pillars { padding-top: 64px; padding-bottom: 64px; } }
/* Rarely Revealed on phones and tablets: the short mark above each name separates the pillars, lengthened to carry that job (as on Rudis Sylva). */
@media (max-width: 1024px) { .sg-pillar__name::before { width: 56px; } }
/* Full-width rules removed on phones and tablets; the short marks separate the pillars (as on Rudis Sylva). */
@media (max-width: 1024px) { .sg-pillar + .sg-pillar { border-top: 0; padding-top: 0; margin-top: 48px; } }
/* The Concierge on phones and tablets, as Mechanical Supremacy on Rudis Sylva: the host stands in a full-width image band at the top,
   fading into the ground, and the copy follows below it. 64px below the copy. */
@media (max-width: 1024px) {
  .sg-origin { --sg-stage: clamp(380px, 58vh, 620px); display: block; min-height: 0; padding-top: 0; padding-bottom: 64px; }
  .sg-origin__bleed { inset: 0 0 auto 0; height: var(--sg-stage); opacity: 0.6;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
  .sg-origin__host { left: 50%; top: calc(var(--sg-stage) * 0.06); bottom: auto; height: calc(var(--sg-stage) * 0.94);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); }
  .sg-origin > .container { padding-top: calc(var(--sg-stage) - 40px); }
}
/* Living Terroir: 64px top and bottom on phones and tablets */
@media (max-width: 1024px) { .sg-terroir { padding-top: 64px; padding-bottom: 64px; } }
/* The Values: 64px top and bottom on phones and tablets */
@media (max-width: 1024px) { .sg-values { padding-top: 64px; padding-bottom: 64px; } }
/* Living Terroir on phones and tablets: the frame takes the portrait's own proportions (2:3, less the red strip above the yellow panel, ~9%),
   so the whole figure shows unzoomed with the top of the yellow panel at the top edge. Capped and centred on the open Fold. */
@media (max-width: 1024px) {
  .sg-terroir .q-split__media { height: auto; aspect-ratio: 1707 / 2330; width: 100%; max-width: 420px; justify-self: center; }
  .sg-terroir .q-figure__img { object-position: 50% 100%; }
}

/* The Collections photos, positions set in the phone preview */
@media (max-width: 680px) {
  .sgx__item:nth-child(3) img { object-position: 50% 40%; }
  .sgx__item:nth-child(4) img { object-position: 50% 16.8%; }
}
@media (max-width: 380px) {
  .sgx__item:nth-child(3) img { object-position: 50% 40%; }
  .sgx__item:nth-child(4) img { object-position: 50% 19%; }
}
@media (min-width: 681px) and (max-width: 1024px) {
  .sgx__item:nth-child(3) img { object-position: 50% 42.8%; }
}
/* "Click to enter" is a pointer cue; hidden on phones and tablets */
@media (max-width: 1024px) { .sgx__hint { display: none; } }
/* The Welcome photo, positions set in the phone preview */
@media (max-width: 1024px) { .sg-cinema .q-boutique .q-figure { background-position: 90.6% 42%; } }
@media (max-width: 680px) { .sg-cinema .q-boutique .q-figure { background-position: 75% 42%; } }
@media (max-width: 380px) { .sg-cinema .q-boutique .q-figure { background-position: 73.5% 42%; } }