/* ==========================================================================
   AMERIA RIVA — Haute Textile Maison. A maison page within the Tayrona
   Capital system, built on the exact Qvinto structural template (type scale,
   nav, footer, reveal engine, archway hero, section light-sweep, magnetic
   figures). Only the accent palette, copy, and imagery differ: the living
   emerald is replaced by a warm vicuna tone. Gold stays the hairline.
   Governing register: dark, sculptural, soft-lit. Gold stays the hairline.
   ========================================================================== */

:root {
  /* AMERIA RIVA sub-palette inside the house system
     Warm near-black canvas, gold hairline, and a living vicuna tone
     (natural golden-brown fleece) with a lighter honey tint for
     interactive states, mirroring emerald + glow on Qvinto. */
  --bg:            #0B0907;   /* homepage page base, warm near-black */
  --bg-raise:      #110E0A;   /* homepage raised panel */
  --bg-vicuna:     #2A1E10;   /* lifted warm brown-black, fleece-lit not murk */
  --ink:           #0E0B08;

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

  /* vicuna, the living warm tone: golden-brown fleece + honey glow */
  --vicuna:        #BE8B4C;
  --vicuna-deep:   #5C3E1E;
  --vicuna-abyss:  #241606;
  --vicuna-glow:   rgba(214, 170, 110, 0.34);
  --vicuna-line:   rgba(214, 170, 110, 0.46);

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

  /* Ameria Riva pace: a touch slower than the parent site */
  --rev: 1400ms;
}

body { background-color: var(--bg); color: var(--text); }
/* Entry loader — the Maison opens, matching the Qvinto 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: #0B0907;
}
.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), 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(--vicuna); 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--vicuna { color: var(--vicuna); }
.q-eyebrow--vicuna::before { background: linear-gradient(to right, var(--vicuna), 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 vicuna archway
   A deep near-black stone room; a fitted-block arch opens onto rainforest
   with a warm vicuna 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; }

/* photographic hero: vicuña on the Andean ridge */
.qhero__img {
  position: absolute;
  inset: -12% 0 0 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: 50% center;
  will-change: transform;
}
/* slow settle on arrival; the scene also drifts at a fraction of scroll
   speed (see ameria-riva.js), so the mountain releases the page gently */
@media (prefers-reduced-motion: no-preference) {
  html.js .qhero--image .qhero__img {
    animation: arHeroSettle 13s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
  }
}
@keyframes arHeroSettle {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}
.qhero--image .qhero__scene { will-change: transform; }
/* Reduced motion: no film, no audio. Show the graded poster still with the same crop box as .qhero__img, and hide the media controls. */
@media (prefers-reduced-motion: reduce) {
  .qhero--image .qhero__scene video.qhero__img { display: none !important; }
  .qhero--image .qhero__scene::before {
    content: ""; position: absolute; inset: -12% 0 0 0; width: 100%; height: 112%; z-index: 0;
    background: url("assets/ameria-riva-hero-poster.jpg") 50% center / cover no-repeat;
    background: image-set(url("assets/ameria-riva-hero-poster.webp") type("image/webp"), url("assets/ameria-riva-hero-poster.jpg") type("image/jpeg")) 50% center / cover no-repeat;
  }
  .qhero--image .v-hero-media { display: none !important; }
}

/* Hero film (Sagana pattern): fades in over the still once it is ready. */
.qhero__video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  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 deeper backdrop blur, plus a fill a touch darker than the shared
   default so the buttons hold against bright sand. Lighter than Cacao's 0.28. */
.qhero--image {
  --v-hero-control-blur: 6px;
  --v-hero-control-bg: rgba(11,9,7,0.18);
  --v-hero-control-bg-hover: rgba(11,9,7,0.32);
}

/* scroll cue: a single falling thread of light */
.qhero__cue {
  position: absolute;
  left: 50%;
  bottom: 2.1rem;
  z-index: 2;
  width: 1px;
  height: 54px;
  transform: translateX(-50%);
  background: var(--vicuna-line);
  opacity: 0.5;
  overflow: hidden;
  pointer-events: none;
}
.qhero__cue::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, #E7C68C 45%, transparent 100%);
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .qhero__cue::after { animation: arCueDrop 4.2s cubic-bezier(0.45, 0, 0.2, 1) 2.4s infinite; }
}
@keyframes arCueDrop {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
/* no full-frame scrim over the hero film. Instead one soft ellipse centred on
   the type block, full-bleed across the hero so it has no edges of its own,
   feathered to zero long before it reaches the frame */
.qhero--image .qhero__scrim { display: none; }
.qhero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 66% 40% at 34% 86%,
    rgba(6,7,6,0.40) 0%,
    rgba(6,7,6,0.30) 24%,
    rgba(6,7,6,0.16) 48%,
    rgba(6,7,6,0.05) 72%,
    rgba(6,7,6,0) 92%);
}
/* a second, smaller pool of shade behind the eyebrow, which sits on the
   brightest part of the plate. Warm-toned rather than neutral black, so it
   deepens the sand instead of greying it, and bled far past the label's own
   box so the falloff is long and shows no boundary. */
.qhero--image .qhero__eyebrow { position: relative; }
.qhero--image .qhero__eyebrow::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -110%;
  right: -110%;
  top: -900%;
  bottom: -900%;
  pointer-events: none;
  background: radial-gradient(ellipse 30% 30% at 46% 50%,
    rgba(34,22,12,0.24) 0%,
    rgba(34,22,12,0.15) 30%,
    rgba(34,22,12,0.06) 56%,
    rgba(34,22,12,0) 80%);
}

/* stone wall — near-black, with the faintest fitted-block masonry */
.qhero__stone {
  position: absolute;
  inset: 0;
  background: radial-gradient(125% 95% at 50% 40%, #16181b 0%, #0d0e10 42%, #070808 78%, #050606 100%);
}
.qhero__stone::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.55;
  mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(0deg, transparent 0 84px, rgba(0,0,0,0.6) 84px 86px),
    repeating-linear-gradient(90deg, transparent 0 132px, rgba(0,0,0,0.5) 132px 134px),
    repeating-linear-gradient(0deg, transparent 0 168px, rgba(255,255,255,0.025) 168px 170px);
  -webkit-mask: radial-gradient(120% 92% at 50% 42%, #000 28%, transparent 74%);
  mask: radial-gradient(120% 92% at 50% 42%, #000 28%, transparent 74%);
}

/* the arch portal */
.qhero__arch {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: min(42vw, 470px);
  height: min(72vh, 690px);
  border-radius: 9999px 9999px 0 0;
  overflow: hidden;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.55),
    0 0 26px 2px rgba(0, 0, 0, 0.85),
    0 0 150px 36px var(--vicuna-glow),
    inset 0 0 70px 26px rgba(4, 12, 9, 0.92);
}
/* rainforest beyond + vicuna light rising from within */
.qhero__forest {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(86% 72% at 50% 80%, rgba(206,150,84,0.92) 0%, rgba(150,104,52,0.62) 26%, rgba(74,48,24,0.85) 56%, #140C06 86%),
    linear-gradient(180deg, #120A05 0%, #231605 46%, #3A2810 100%);
}
/* soft foliage masses, blurred so they read as canopy not shapes */
.qhero__forest::after {
  content: '';
  position: absolute;
  inset: -6%;
  background:
    radial-gradient(38% 30% at 22% 34%, rgba(3,10,7,0.85), transparent 62%),
    radial-gradient(44% 34% at 80% 26%, rgba(3,10,7,0.88), transparent 62%),
    radial-gradient(30% 24% at 54% 12%, rgba(2,8,6,0.92), transparent 62%),
    radial-gradient(34% 40% at 14% 70%, rgba(2,8,6,0.7), transparent 64%),
    radial-gradient(34% 40% at 88% 72%, rgba(2,8,6,0.72), transparent 64%);
  filter: blur(9px);
}
/* the gem-light core — the only true light in the room (restrained, no mint) */
.qhero__forest::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  width: 64%;
  height: 44%;
  background: radial-gradient(closest-side, rgba(214,170,110,0.55), rgba(150,104,52,0.2) 52%, transparent 76%);
  filter: blur(7px);
  animation: gemBreath 9s ease-in-out infinite;
}
@keyframes gemBreath {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}
/* a single vicuna keyline tracing the arch reveal */
.qhero__arch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(150, 110, 60, 0.45);
  pointer-events: none;
}

/* vicuna light spilling onto the floor in front of the arch */
.qhero__floorglow {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(74vw, 860px);
  height: 34vh;
  background: radial-gradient(62% 100% at 50% 100%, rgba(150,104,52,0.22), transparent 72%);
  filter: blur(12px);
}

.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__slogan {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-soft);
  margin: 1.6rem 0 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: 1.6rem 0 0;
  white-space: nowrap;
}
.qhero__sub .em { color: var(--vicuna); 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--vicuna {
  /* the homepage Qvinto row wash, retuned warm: fleece-lit at top-left, settling to deep */
  background: radial-gradient(135% 240% at 1% -14%, #5e4326 0%, #2e2113 34%, #100b06 100%);
  position: relative;
  overflow: hidden;
}
.q-section--vicuna::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 0%, rgba(214,170,110,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(--vicuna);
  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 vicuna 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%, #1f1609 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(--vicuna-line);
  box-shadow:
    0 34px 90px -34px rgba(0, 0, 0, 0.78),
    0 0 52px -8px var(--vicuna-glow),
    inset 0 0 0 1px rgba(150, 110, 60, 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); }

/* 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: ghosted Andean peak 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: 108%;
  background: image-set(url('assets/ameria-source-bleed.avif') type('image/avif'), url('assets/ameria-source-bleed.webp') type('image/webp')) left bottom / contain no-repeat;
  opacity: 0.5;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 2.2s cubic-bezier(.22,.61,.36,1);
}
.q-origin__bleed.is-waiting { opacity: 0; }
.q-origin .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .q-origin__bleed { transform: none !important; } }
.q-origin .q-split { align-items: center; grid-template-columns: 0.9fr 1.1fr; }
.q-origin .q-split__text { max-width: 50ch; }
/* Origin specimen: a full alpaca cutout, frameless, standing over the ghosted
   Andean bleed. The figure spans the section height; the head sits at the
   headline and the neck runs down and is cropped cleanly at the section floor.
   No magnetic/parallax transform, so nothing shifts on hover. */
.q-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);
}
.q-origin .q-figure:hover { transform: none; box-shadow: none; border-color: transparent; }
.q-origin__animal {
  position: absolute;
  left: 50%;
  bottom: -5vh;
  transform: translateX(-50%);
  height: clamp(560px, 82vh, 960px);
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: 50% 100%;
  pointer-events: none;
}
.q-split__title .nowrap { white-space: nowrap; }
.q-split__title .ln { display: block; }

/* ==========================================================================
   THE FIBRE REGISTER  (Ameria Riva signature: type-led material ledger)
   ========================================================================== */
.q-fibres__head {
  max-width: 52rem;
  margin-bottom: clamp(2.6rem, 5.5vh, 4.2rem);
}
.q-fibres__eyebrow { margin-bottom: 1.6rem; }
.q-fibres__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}
/* The Material: full-bleed Andean llama splash, llama held to the right, scrim keeps the fibre list legible */
.q-fibres--splash { position: relative; overflow: hidden; background: #0b0908; }
.q-fibres--splash .q-fibres__bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('assets/ameria-material-splash.webp') right center / cover no-repeat;
}
.q-fibres--splash .q-fibres__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(11,9,8,0.94) 0%, rgba(11,9,8,0.82) 34%, rgba(11,9,8,0.52) 62%, rgba(11,9,8,0.34) 100%),
    linear-gradient(180deg, rgba(11,9,8,0.55) 0%, rgba(11,9,8,0) 22%, rgba(11,9,8,0) 74%, rgba(11,9,8,0.72) 100%);
}
.q-fibres--splash .container { position: relative; z-index: 2; }
.q-fibres__intro {
  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: 48ch;
  margin: 1.5rem 0 0;
  text-wrap: pretty;
}
.q-fibres__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.q-fibre {
  display: grid;
  grid-template-columns: 3.5rem minmax(11rem, 17rem) 1fr;
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: baseline;
  padding: clamp(1.7rem, 3.4vh, 2.7rem) 0;
  position: relative;
  transition: background 0.55s var(--ease-out);
}
/* the divider is woven in, left to right, as each entry reveals */
.q-fibre::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .q-fibre.in::after {
    animation: arWeaveIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0ms) + 300ms) both;
  }
}
@keyframes arWeaveIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.q-fibre:hover {
  background: linear-gradient(90deg, rgba(190, 139, 76, 0.07), rgba(190, 139, 76, 0.015) 55%, transparent 78%);
}
.q-fibre__index {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--vicuna);
}
.q-fibre__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.q-fibre__kicker {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.q-fibre__kicker .dot { color: var(--gold); margin: 0 0.4rem; }
.q-fibre__desc {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-dim);
  max-width: 46ch;
  margin: 0;
  text-wrap: pretty;
}
.q-fibre--hide::after { display: none; }
.q-fibre--hide .q-fibre__index { color: var(--gold); }
.q-fibres__foot {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.55vw, 1.45rem);
  color: var(--gold-soft);
  margin: clamp(2.4rem, 4.5vh, 3.4rem) 0 0;
}

/* ==========================================================================
   BOUTIQUE ARCHITECTURE — full-bleed gem-lit interior
   ========================================================================== */
.q-boutique {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  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(30,21,13,0.96) 0%, rgba(30,21,13,0.8) 16%, rgba(30,21,13,0.45) 38%, rgba(30,21,13,0.08) 60%, transparent 74%),
    radial-gradient(70% 60% at 50% 30%, rgba(150,104,52,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; }
/* masked line-rise wrapper injected by the boutique cinema (GSAP) */
.q-boutique .awl { display: block; overflow: hidden; padding: 0 0.06em 0.14em; margin: 0 -0.06em -0.14em; }
.q-boutique .awl__in { display: block; will-change: transform; }

/* ==========================================================================
   LEGACY CLOSE
   ========================================================================== */
.q-legacy {
  text-align: center;
}
.q-legacy--texture { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.q-legacy--texture .q-legacy__bg {
  position: absolute; inset: 0;
  background-image: url('assets/ameria-close-fibre.avif');
  background-size: cover; background-position: center 45%;
  z-index: 0;
}
.q-legacy--texture .q-legacy__veil {
  position: absolute; inset: 0; z-index: 1;
  /* Uniform warm darkening, only as much as the text needs; the soft shadow on the type does the rest. */
  background: rgba(30,21,13,0.55);
}
.q-legacy--texture .container { position: relative; z-index: 2; }
/* masked line-rise on the slogan, matching the Qvinto close */
.q-legacy .reveal-line, .q-legacy .awl { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; --rev: 2100ms; }
.q-legacy .awl { overflow: hidden; }
.q-legacy .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-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, #E7C68C); }
}
.q-inquire .text-link { font-size: 0.8rem; }
.q-inquire .text-link:hover { color: var(--glow, #E7C68C); }
.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 fixes: the desktop two-column rule outranked the stacked grid, so phones kept two columns. */
  .q-split, .q-origin .q-split { grid-template-columns: minmax(0, 1fr); }
  .q-split__accent .ln { display: block; }
  .q-boutique__inner { padding-bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px)); }
  /* Origin on phones, matched to Qvinto: the alpaca in a square, Maison-card-sized frame at the top,
     its neck fading out at the frame floor; the mountain bleed sits behind it with soft edges. */
  .q-origin .q-split { align-items: start; }
  .q-origin { padding-top: 64px; padding-bottom: 64px; }
  .q-craft--loom { padding-top: 64px; padding-bottom: 64px; }
  /* The Material on phones: a full-height cover zooms the llama off-screen. Size the photo to the width instead,
     anchored at the top-right so the head sits in view, and fade it into the ground below. */
  .q-fibres--splash { padding-top: 64px; padding-bottom: 64px; }
  .q-fibres--splash .q-fibres__bg { inset: 0 0 auto 0; height: 175vw; background-size: 220% auto; background-position: 88% 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%); mask-image: linear-gradient(to bottom, #000 65%, transparent 100%); }
  .q-origin .q-split__media { min-height: 0; height: auto; aspect-ratio: 1 / 1; width: 100%; max-width: 440px; margin: 0 auto; justify-self: center; }
  .q-origin__animal { height: 112%; bottom: 0; top: auto; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 98%); mask-image: linear-gradient(to bottom, #000 70%, transparent 98%); }
  .q-origin__bleed { top: 0; bottom: auto; left: 0; width: 100%; height: calc(64px + min(100vw, 480px)); background-size: cover; background-position: 28% 100%;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 45% 50%, #000 30%, rgba(0,0,0,0.5) 60%, transparent 92%); mask-image: radial-gradient(ellipse 75% 70% at 45% 50%, #000 30%, rgba(0,0,0,0.5) 60%, transparent 92%); }
}
@media (max-width: 760px) {
  .q-fibre { grid-template-columns: 2.4rem 1fr; gap: 0.4rem 1.3rem; }
  .q-fibre__index { grid-row: 1; }
  .q-fibre__name-col { grid-column: 2; }
  .q-fibre__desc { grid-column: 2; margin-top: 0.95rem; }
}
@media (max-width: 680px) {
  .qhero__arch { width: 70vw; height: 58vh; }
  .spine { display: none; }
  .qhero__slogan-end { display: block; }
}
/* Narrowest phones (Fold closed): same step down as Qvinto. */
@media (max-width: 380px) {
  .q-split__title { font-size: 1.75rem; }
  .q-position__accent .gold { display: block; }
}

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

/* ===== "The Maison" material ground: vicuna fleece under a warm veil =====
   Mirrors the Qvinto marble treatment. The fibre carries the section; a deep
   warm wash keeps the cream and honey type legible while the texture drifts
   slower than the copy on scroll. */
.q-marble--vicuna { position: relative; overflow: hidden; background: #0B0806 !important; }
.q-parallax { overflow: hidden; }
.q-parallax .q-marble__bg {
  position: absolute; inset: -55% 0; z-index: 0;
  background-image: url('assets/ameria-maison-wool.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(20,14,9,0.56) 0%, rgba(15,10,6,0.70) 55%, rgba(9,6,3,0.86) 100%);
}
.q-parallax .q-position__inner { position: relative; z-index: 2; }
.q-marble--vicuna .q-position__note { color: #E4DAC6; }
.q-marble--vicuna .q-position__accent { color: #E8C98A; }
@media (prefers-reduced-motion: reduce) { .q-parallax .q-marble__bg { transform: none !important; } }

/* "Hand and Loom": woven fibre ground, pulled back so the drape reads, under a
   gentle warm veil weighted left so the copy stays legible while the fabric shows. */
.q-craft--loom { position: relative; overflow: hidden; background: #0B0806 !important; border-top: none; }
.q-craft--loom .q-marble__bg {
  inset: -42% 0;
  background-image: url('assets/ameria-hand-loom-mirror.webp');
  background-size: cover; background-position: right center;
}
.q-craft--loom .container { position: relative; z-index: 2; }
/* no filter: show the fabric as-is */
.q-craft--loom .q-marble__veil { background: none; }
/* match "The Maison" body + accent brightness */
.q-craft--loom .q-split__body { color: #E4DAC6; }
.q-craft--loom .q-split__accent { color: #E8C98A; }

/* Hero legibility: same treatment as Qvinto (bright gold, one soft shadow, heavier eyebrow, 1.5px gold rule). */
.qhero__eyebrow, .qhero__slogan { color: #D9C795; text-shadow: 0 1px 10px rgba(3,7,13,0.55); }
.qhero__eyebrow { font-weight: 500; }
.qhero__eyebrow::before { height: 1.5px; background: linear-gradient(to right, #D9C795, transparent); }

/* 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; }

.q-legacy--texture .q-legacy__eyebrow, .q-legacy--texture .q-legacy__line { color: #D9C795; text-shadow: 0 1px 10px rgba(3,7,13,0.55); }
.q-legacy--texture .q-legacy__line * { color: inherit; }

/* 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-fibres__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; } }