/* ==========================================================================
   QVINTO — Emerald Maison. A maison page within the Tayrona Capital system.
   Inherits homepage.css (type scale, nav, footer, reveal engine). This sheet
   darkens the canvas, carries emerald as the living accent, and adds the
   archway hero, the section light-sweep, and the magnetic gem-lit figures.
   Governing register: dark, sculptural, gem-lit. Gold stays the hairline.
   ========================================================================== */

:root {
  /* QVINTO sub-palette inside the house system
     Aligned to the homepage: warm near-black canvas, gold hairline,
     and the homepage's living emerald (the Qvinto row wash + glow). */
  --bg:            #0B0907;   /* homepage page base, warm near-black */
  --bg-raise:      #110E0A;   /* homepage raised panel */
  --bg-emerald:    #0C2A1F;   /* lifted emerald-black, gem-lit not murk */
  --ink:           #0E0B08;

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

  /* emerald, the homepage's living green: #1d6149 wash, #2EA882 glow */
  --emerald:       #1F8A66;
  --emerald-deep:  #0E3B2E;
  --emerald-abyss: #081F18;
  --emerald-glow:  rgba(46, 168, 130, 0.34);
  --emerald-line:  rgba(46, 168, 130, 0.46);

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

body { background-color: var(--bg); color: var(--text); }
::selection { background: var(--emerald); 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--emerald { color: var(--emerald); }
.q-eyebrow--emerald::before { background: linear-gradient(to right, var(--emerald), 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 static emerald archway
   A deep near-black stone room; a fitted-block arch opens onto rainforest
   with a warm emerald light glowing from within. Baked, fixed framing.
   No zoom, no parallax — the interactive glow is a later pass.
   ========================================================================== */
.qhero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #060707;
}
.qhero__scene { position: absolute; inset: 0; z-index: 0; }
.qhero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  display: block;
}
.qhero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(6,7,6,0.97) 0%,
    rgba(6,7,6,0.78) 15%,
    rgba(6,7,6,0.30) 34%,
    rgba(6,7,6,0.02) 54%,
    transparent 72%);
}

.qhero__inner {
  position: relative;
  z-index: 2;
  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;
}
.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);
  color: var(--gold-soft);
  margin: 1.6rem 0 0;
  white-space: nowrap;
}
.qhero__sub .em { color: var(--emerald); font-style: normal; }
.qhero__note {
  position: absolute;
  bottom: 1.8rem;
  right: var(--margin);
  z-index: 2;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(236, 230, 216, 0.28);
  text-align: right;
  line-height: 1.8;
  max-width: 22ch;
  pointer-events: none;
}

/* ==========================================================================
   SHARED SECTION SCAFFOLD
   ========================================================================== */
.q-section { background: var(--bg); border-top: 1px solid var(--line-soft); }
.q-section--emerald {
  /* the homepage Qvinto row wash: gem-lit at top-left, settling to deep */
  background: radial-gradient(135% 240% at 1% -14%, #1d6149 0%, #0e3528 34%, #08160f 100%);
  position: relative;
  overflow: hidden;
}
.q-section--emerald::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 0%, rgba(46,168,130,0.12), 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; }
.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(--emerald);
  margin: clamp(2.2rem, 4vh, 3rem) 0 0;
  letter-spacing: 0.01em;
}
.q-position__accent .gold { color: var(--gold-soft); }

/* ==========================================================================
   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 emerald 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%, #0c241b 0%, #08140F 46%, #060F0B 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(--emerald-line);
  box-shadow:
    0 34px 90px -34px rgba(0, 0, 0, 0.78),
    0 0 52px -8px var(--emerald-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__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); }

/* Lapidary rings carousel — mirrors the TEG films reel, emerald-scoped */
.q-reel { position: relative; display: flex; justify-content: center; }
.q-reel__viewport {
  position: relative; height: 100%;
  aspect-ratio: 800 / 934; width: auto; max-width: 100%; margin: 0 auto;
  perspective: 2000px; overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  background: #050807;
  transition: border-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.q-reel__viewport:hover {
  border-color: var(--emerald-line);
  box-shadow: 0 0 52px -10px var(--emerald-glow);
}
.q-reel__slide {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transform: translateX(var(--reel-x, 6%)) rotateY(var(--reel-r, -8deg)) scale(0.975);
  transform-origin: center;
  transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: transform, opacity; backface-visibility: hidden;
}
.q-reel__slide.is-active { opacity: 1; pointer-events: auto; transform: none; z-index: 2; }
.q-reel__slide image-slot { width: 100%; height: 100%; }
.q-reel__arrow {
  position: absolute; top: 50%; z-index: 3;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border: 1px solid rgba(236, 230, 216, 0.4);
  border-radius: 50%;
  background: rgba(6, 18, 13, 0.35);
  backdrop-filter: blur(3px);
  color: var(--text); font-size: 1.1rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out), border-color 0.4s var(--ease-out),
              color 0.4s var(--ease-out), background 0.4s var(--ease-out);
}
.q-reel__arrow--prev { left: clamp(0.8rem, 2vw, 1.4rem); }
.q-reel__arrow--next { right: clamp(0.8rem, 2vw, 1.4rem); }
.q-reel__viewport:hover .q-reel__arrow,
.q-reel__arrow:focus-visible { opacity: 1; }
.q-reel__arrow:hover { border-color: var(--emerald); color: var(--emerald); background: rgba(6, 18, 13, 0.6); }
@media (hover: none) { .q-reel__arrow { opacity: 1; } }

/* 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. */
.q-origin .q-split { align-items: stretch; grid-template-columns: 0.9fr 1.1fr; }
.q-origin .q-split__media { height: auto; min-height: clamp(360px, 52vh, 560px); }
.q-origin .q-split__text { max-width: 50ch; }
/* Origin: faded crystal bleeding from the left of the emerald backing */
.q-origin { position: relative; overflow: hidden; }
.q-origin__bleed {
  position: absolute; top: -12%; left: -8%; z-index: 0;
  width: min(64%, 1040px); height: 124%;
  background: url('assets/qvinto-origin-bleed.webp') left top / cover no-repeat;
  opacity: 0.5;
  mix-blend-mode: luminosity;
  /* Soft falloff on every side, so the bleed has no hard box edge or cut-out outline. */
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 30% 45%, #000 30%, rgba(0,0,0,0.5) 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 75% at 30% 45%, #000 30%, rgba(0,0,0,0.5) 60%, transparent 100%);
  pointer-events: none;
  will-change: transform;
}
.q-origin .container { position: relative; z-index: 1; }
.q-split__title .nowrap { white-space: nowrap; }
.q-split__title .ln { display: block; }

/* ==========================================================================
   COLLECTIONS — gem-lit plates
   ========================================================================== */
.q-collections__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}
.q-collections__eyebrow { margin-bottom: 1.6rem; }
.q-collections__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-plates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 1.8vw, 1.75rem);
}
.q-plate { aspect-ratio: 771 / 1311; height: auto; }
.q-collections__foot {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  color: var(--gold-soft);
  margin: clamp(2.6rem, 5vh, 4rem) auto 0;
  max-width: 30ch;
  text-wrap: balance;
}

/* ==========================================================================
   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: #06120D;
}
.q-boutique__media { position: absolute; inset: 0; z-index: 0; }
.q-boutique .q-figure {
  position: absolute;
  inset: 0;
  margin: 0;
  border: 0;
  background: #06120D;
}
.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(11,11,12,0.96) 0%, rgba(11,11,12,0.8) 16%, rgba(11,11,12,0.45) 38%, rgba(11,11,12,0.08) 60%, transparent 74%),
    radial-gradient(70% 60% at 50% 30%, rgba(15,107,82,0.14), transparent 70%);
  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;
}
.q-legacy.q-section--emerald::before { display: none; }
.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-soft);
  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, #2FCB9B); }
}
.q-inquire .text-link { font-size: 0.8rem; }
.q-inquire .text-link:hover { color: var(--glow, #2FCB9B); }
.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; }
  /* Origin on tablet and phone: stacked, the specimen in a Maison-card-sized frame, stone centred. */
  .q-origin { padding-top: 64px; padding-bottom: 64px; }
  .q-origin .q-split { grid-template-columns: 1fr; align-items: start; }
  .q-origin .q-split__media { height: auto; min-height: 0; aspect-ratio: 1 / 1; width: 100%; max-width: 560px; margin: 0 auto; justify-self: center; }
  .q-origin .q-figure__bg { background-position: 50% 45%; }
  .q-origin .q-split__accent .ln { display: block; }
  /* Lapidary reel on tablet and phone: same width as the Origin frame (the text column), height follows the photo. */
  .q-split { grid-template-columns: minmax(0, 1fr); }
  .q-craft .q-reel.q-split__media { height: auto; width: 100%; max-width: 560px; margin: 0 auto; justify-self: center; }
  .q-craft .q-reel__viewport { width: 100%; height: auto; }
  .q-plates { grid-template-columns: 1fr; }
  .q-plate { aspect-ratio: 771 / 1311; height: auto; }
}
@media (max-width: 680px) {
  .qhero__arch { width: 70vw; height: 58vh; }
  .spine { display: none; }
}
/* Narrowest phones (Fold closed): the smallest step down that keeps "We Release What Is Inside It." on one line. */
@media (max-width: 380px) {
  .q-split__title { font-size: 1.75rem; }
}
/* Boutique on phones: a full-height crop of this wide room cuts both sconces. Shorten the photo
   (anchored at the top) so the frame shows the room from sconce to sconce, then fade it into the ground under the text. */
@media (max-width: 1024px) {
  .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%); }
}
/* Boutique on phones: text sits lower (smaller bottom margin, clear of the home bar), so the eyebrow comes off the sofa. */
@media (max-width: 1024px) {
  .q-boutique__inner { padding-bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px)); }
}
/* Boutique crop on narrow phones, set from the preview slider: 33 on iPhones, 34 on the closed Fold. */
@media (max-width: 680px) {
  #qv-boutique::part(image) { left: 0 !important; transform: translate(-33%, -50%) !important; }
}
@media (max-width: 380px) {
  #qv-boutique::part(image) { transform: translate(-34%, -50%) !important; }
}

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

/* ==========================================================================
   THE COLOMBIAN EMERALD — three traits
   ========================================================================== */
.q-emerald__head{max-width:46rem;margin:0 auto clamp(2.4rem,5vh,3.6rem);text-align:center;display:flex;flex-direction:column;align-items:center}
.q-emerald__eyebrow{margin-bottom:1.8rem}
.q-emerald__title{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4vw,3.6rem);line-height:1.06;letter-spacing:-0.02em;color:var(--text);margin:0;text-wrap:balance}
.q-emerald__lede{font-family:var(--serif);font-weight:300;font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.55;color:var(--text-dim);margin:1.6rem 0 0;max-width:none;text-wrap:balance}
.q-emerald{min-height:calc(100svh - 94px);display:flex;flex-direction:column;justify-content:center;padding-block:clamp(5rem,11vh,8rem)}
.q-emerald>.container{width:100%}
.q-traits{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,4rem);padding-top:clamp(2rem,4vh,3rem)}
.q-traits::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold) 78%,transparent);opacity:.75}
.q-trait__name{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.6rem,2.4vw,2.2rem);color:var(--text);margin:0 0 1rem}
.q-trait__body{font-size:1rem;line-height:1.8;color:var(--text-dim);margin:0;text-wrap:pretty}
.q-emerald__accent{text-align:center;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.2rem,1.8vw,1.6rem);color:var(--gold-soft);margin:clamp(2.2rem,4.5vh,3.2rem) 0 0;text-wrap:balance}

/* ==========================================================================
   THE RAREST STONES — five rough stones
   ========================================================================== */
.q-rarest .container{position:relative;z-index:1}
.q-rarest__head{max-width:44rem;margin:0 auto clamp(3rem,6vh,4.5rem);text-align:center;display:flex;flex-direction:column;align-items:center}
.q-rarest__eyebrow{margin-bottom:1.6rem}
.q-rarest__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-rarest__lede{font-size:1.02rem;line-height:1.8;color:var(--text-dim);margin:1.6rem 0 0;max-width:46ch;text-wrap:pretty}
.q-stones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,2.4vw,2.4rem) clamp(1rem,1.6vw,1.6rem);max-width:980px;margin-inline:auto}
.q-stone{display:flex;flex-direction:column}
.q-stone__media{aspect-ratio:4/5;height:auto;margin:0 0 1.4rem}
.q-stone__name{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.35rem,1.7vw,1.65rem);color:var(--text);margin:0 0 0.6rem}
.q-stone__body{font-size:0.92rem;line-height:1.7;color:var(--text-dim);margin:0;text-wrap:pretty}
@media (max-width:1024px){.q-traits{grid-template-columns:1fr;gap:2.5rem}.q-stones{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.q-stones{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 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, .q-emerald__accent, .q-collections__foot { 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; } }
/* Phones and tablets: 64px top and bottom on every content section, as on the other maisons. */
@media (max-width: 1024px) { .section.q-origin, .section.q-emerald, .section.q-craft, .section.q-rarest { padding-top: 64px; padding-bottom: 64px; } }