/* ==========================================================================
   RUDIS SYLVA. Haute Horlogerie Maison. A maison page within the Tayrona
   Capital system. Inherits homepage.css (type scale, nav, footer, reveal
   engine). Cool slate near-black canvas, blued-steel as the living accent,
   amethyst held as the gemstone secondary, gold stays the hairline.
   Static movement hero: no zoom, no parallax.
   ========================================================================== */

:root {
  --bg:            #0A0C10;   /* cool slate near-black, the horology canvas */
  --bg-raise:      #0F1218;   /* raised panel */
  --bg-steel:      #1A222C;   /* lifted steel-black, light not murk */
  --ink:           #090A0D;

  --text:          #EDE7DA;   /* homepage primary on dark */
  --text-dim:      #A4A2A0;
  --text-faint:    #6B6A6A;

  /* blued steel, the living accent: cool, mechanical, precise */
  --steel:         #9DB0C6;
  --steel-bright:  #C3D2E2;
  --steel-deep:    #2C3946;
  --steel-abyss:   #0C141C;
  --steel-glow:    rgba(157, 176, 198, 0.28);
  --steel-line:    rgba(157, 176, 198, 0.42);

  /* amethyst, the gemstone secondary: used sparingly for the gem references */
  --amethyst:      #B189C9;
  --amethyst-deep: #4A335C;

  /* Rudis Sylva pace */
  --rev: 1250ms;

  --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(--steel); color: var(--ink); }

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

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

/* ==========================================================================
   GOLD SCROLL SPINE
   ========================================================================== */
.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 Harmonious Oscillator, drawn from the raw stone.
   Full-bleed movement image under baked steel-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: #06080B;
}
.qhero__scene { position: absolute; inset: 0; z-index: 0; }
.qhero__poster,
.qhero__video,
.qhero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}
/* Poster sits under the video and shows instantly on load; the video covers
   it with identical framing so there is no jump when playback begins. */
.qhero__video { z-index: 1; }
/* First play only: the film fades up off the poster beneath it. A one-shot
   animation, so seamless loops are never touched. */
@media (prefers-reduced-motion: no-preference) {
  .qhero__video { animation: rsHeroFilmIn 900ms ease-out 120ms both; }
}
@keyframes rsHeroFilmIn { from { opacity: 0 } to { opacity: 1 } }
/* Hero media controls: the shared v-hero-media component (hero-media.css).
   Rudis Sylva's hand-adjusted values, kept as scoped overrides. */
.qhero {
  --v-hero-control-fg: var(--text);
  --v-hero-control-border: rgba(255, 255, 255, 0.28);
  --v-hero-control-border-hover: rgba(255, 255, 255, 0.6);
  --v-hero-control-focus: var(--gold-soft);
}
/* Text-legibility scrim only: anchored bottom-left, weighted away from the
   watch on the right so the image stays bright and true to colour. */
.qhero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(8, 10, 14, 0.90) 0%,
      rgba(8, 10, 14, 0.55) 13%,
      rgba(8, 10, 14, 0.14) 30%,
      transparent 46%),
    linear-gradient(to right,
      rgba(8, 10, 14, 0.42) 0%,
      rgba(8, 10, 14, 0.10) 34%,
      transparent 58%);
}
.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.2rem, 6.6vw, 6.8rem);
  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(--steel); font-style: normal; }

/* ==========================================================================
   SHARED SECTION SCAFFOLD
   ========================================================================== */
.q-section { background: var(--bg); border-top: 1px solid var(--line-soft); }
.q-section--steel {
  /* the homepage Rudis row wash: steel-lit at top-left, settling to deep */
  background: radial-gradient(135% 240% at 1% -14%, #545f6c 0%, #20262e 34%, #0b0e12 100%);
  position: relative;
  overflow: hidden;
}
.q-section--steel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 0%, rgba(157, 176, 198, 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: 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(--steel); }
.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(--steel);
  margin: clamp(2.2rem, 4vh, 3rem) 0 0;
  letter-spacing: 0.01em;
}
.q-position__accent .gold { color: var(--gold-soft); }

/* ===== "The Maison" scroll parallax: the movement drifts slower than the copy ===== */
.q-parallax { position: relative; overflow: hidden; background: #06080B; }
.q-parallax .q-marble__bg {
  position: absolute; inset: -35% 0; z-index: 0;
  background-image: url('assets/rudis-maison-oscillator.avif');
  background-size: 122% auto; background-position: 50% 50%; background-repeat: no-repeat;
  background-color: #06080B;
  filter: brightness(0.82) saturate(1.02);
  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(70% 55% at 50% 0%, rgba(157,176,198,0.08), transparent 62%),
    radial-gradient(125% 100% at 50% 45%, rgba(8,11,15,0.74) 0%, rgba(7,10,14,0.82) 55%, rgba(6,8,12,0.92) 100%);
}
.q-parallax .q-position__inner { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .q-parallax .q-marble__bg { transform: none !important; } }

/* ==========================================================================
   THE SIGNATURE DISCIPLINES — the three pillars (centerpiece)
   Three engraved columns standing side by side, hairline-divided.
   ========================================================================== */
.rs-pillars {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(157,176,198,0.07), transparent 60%),
    var(--bg-raise);
  border-top: 1px solid var(--line-soft);
  position: relative;
  overflow: hidden;
}
.rs-pillars__head {
  text-align: center;
  max-width: 50rem;
  margin: 0 auto clamp(3.5rem, 7vh, 6rem);
}
.rs-pillars__eyebrow { margin-bottom: 1.8rem; }
.rs-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;
}
.rs-pillars__title em { font-style: italic; color: var(--steel); }
.rs-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;
}
.rs-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.rs-pillar {
  position: relative;
  padding: 0 clamp(1.4rem, 2.4vw, 2.6rem);
  display: flex;
  flex-direction: column;
}
.rs-pillar + .rs-pillar { border-left: 1px solid var(--line); }
.rs-pillar__num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.rs-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;
}
.rs-pillar__name::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 30px;
  height: 1px;
  background: linear-gradient(to right, var(--steel), transparent);
}
.rs-pillar__lead {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 1.1rem 0 1.6rem;
  text-wrap: pretty;
}
.rs-pillar__points {
  list-style: none;
  margin: auto 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rs-pillar__point {
  position: relative;
  padding-left: 1.4rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
}
.rs-pillar__point::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 7px;
  height: 1px;
  background: var(--gold);
}

/* ==========================================================================
   EDITORIAL SPLIT  (oscillator, ecosystem)
   ========================================================================== */
.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(--steel); }
.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(--steel); 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(--steel);
}

/* ==========================================================================
   MAGNETIC, GEM-LIT FIGURE
   ========================================================================== */
.q-figure {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: radial-gradient(120% 105% at 50% 28%, #161d26 0%, #0d141c 46%, #080c11 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(--steel-line);
  box-shadow:
    0 34px 90px -34px rgba(0, 0, 0, 0.8),
    0 0 52px -8px var(--steel-glow),
    inset 0 0 0 1px rgba(157, 176, 198, 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(236, 230, 216, 0.62);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}
.q-figure__cap .dot { color: var(--gold); margin: 0 0.5rem; }
.q-figure__img { width: 100%; height: 100%; object-fit: cover; display: block; }

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

/* ==========================================================================
   FULL-BLEED STATEMENT — the movement, large
   ========================================================================== */
.q-boutique {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  background: #07090C;
}
.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: #07090C;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 42%;
  background-image: url("assets/rs-made-whole-2218.webp");
  background-image: image-set(
    url("assets/rs-made-whole-2218.avif") type("image/avif"),
    url("assets/rs-made-whole-2218.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: none;
  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;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
/* the Qvinto emerald token */
.q-boutique__title em { font-style: italic; color: #1F8A66; }
.q-boutique .q-split__accent .em { color: #1F8A66; }
.q-boutique__body { max-width: 44ch; margin-top: 1.6rem; }
.q-split__body.q-boutique__body { color: var(--text); }

/* ==========================================================================
   THE NEXT CHAPTER — forward band
   ========================================================================== */
.rs-next { background: var(--bg); border-top: 1px solid var(--line-soft); }
.rs-next__head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.6rem, 5vh, 4rem); }
.rs-next__eyebrow { margin-bottom: 1.8rem; }
.rs-next__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.rs-next__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3vw, 3rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(2.4rem, 4vh, 3.2rem);
}
.rs-next__item { }
.rs-next__k {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--steel);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.rs-next__k::before {
  content: '';
  width: 24px;
  height: 1px;
  background: linear-gradient(to right, var(--steel), transparent);
}
.rs-next__t {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 0.8rem;
}
.rs-next__d {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0;
  text-wrap: pretty;
}

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

/* Draped blue-velvet closing, matched to the Cacao waterfall close: a
   full-viewport section, plate masked at the foot, veil carrying the darkening. */
.q-legacy--silk {
  position: relative; overflow: hidden; border-top: none;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #050A16 !important;
}
.q-legacy--silk .q-marble__bg {
  inset: 0;
  background-image: url("assets/rs-closing-satin-3000.webp");
  background-image: image-set(
    url("assets/rs-closing-satin-3000.avif") type("image/avif"),
    url("assets/rs-closing-satin-3000.webp") type("image/webp")
  );
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: #050A16;
  filter: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 94%, transparent 100%);
}
/* Slight darkening only: a soft radial vignette so the type reads, the velvet
   otherwise close to its own brightness. */
.q-legacy--silk .q-marble__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(42% 34% at 50% 50%, rgba(2,5,12,0.34) 0%, rgba(2,5,12,0.20) 52%, transparent 78%),
    radial-gradient(120% 100% at 50% 45%, rgba(3,6,14,0.16) 0%, rgba(3,6,14,0.26) 60%, rgba(2,4,10,0.38) 100%);
}
.q-legacy--silk .container { position: relative; z-index: 2; }
.q-legacy .reveal-line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; --rev: 2100ms; }
.q-legacy--silk .q-legacy__line { color: #F3E7C9; text-shadow: 0 1px 3px rgba(2,5,12,0.55), 0 2px 22px rgba(2,5,12,0.72); }
.q-legacy--silk .q-legacy__eyebrow { color: #E8D9B4; text-shadow: 0 1px 14px rgba(2,5,12,0.72); }
.q-legacy--silk .q-legacy__logo { opacity: 1; filter: drop-shadow(0 2px 18px rgba(4,8,18,0.5)); }
/* the close pins for 120vh of scroll, as the Cacao close does */
.rs-close { position: relative; background: #050A16; }
.rs-close .rs-pin__hold { height: 0; }
@media (min-width: 1025px) and (min-height: 620px) {
  .rs-close .q-legacy--silk { position: sticky; top: 0; }
  .rs-close .rs-pin__hold { height: 120vh; }
}
@media (max-width: 1024px) {
  .rs-close .q-legacy--silk { position: sticky; top: 0; min-height: 100svh; }
  .rs-close .rs-pin__hold { height: 120vh; }
}

/* ==========================================================================
   THE MAISON LINK — Rudis Sylva wordmark to rudissylva.ch
   ========================================================================== */
.rs-visit {
  text-align: center;
  background: var(--bg-raise);
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(4.5rem, 9vh, 7.5rem);
}
.rs-visit__eyebrow { margin-bottom: 2.2rem; }
.rs-visit__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-decoration: none;
}
.rs-visit__logo {
  width: clamp(280px, 42vw, 540px);
  height: auto;
  display: block;
  opacity: 0.92;
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.rs-visit__link:hover .rs-visit__logo { opacity: 1; transform: translateY(-3px); }
.rs-visit__cta {
  font-family: var(--mono);
  font-size: clamp(0.62rem, 0.74vw, 0.74rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  position: relative;
  padding-bottom: 0.45rem;
  transition: color 0.4s var(--ease-out);
}
.rs-visit__cta::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  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.5s var(--ease-out);
}
.rs-visit__link:hover .rs-visit__cta { color: var(--text); }
.rs-visit__link:hover .rs-visit__cta::after { transform: scaleX(1); }
.rs-visit__cta .arrow { transition: transform 0.4s var(--ease-out); }
.rs-visit__link:hover .rs-visit__cta .arrow { transform: translateX(5px); }
.rs-visit__contact {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.4rem, 5vh, 3.6rem);
}
.rs-visit__contact .text-link { color: var(--gold-soft); }
.rs-visit__contact .text-link::after {
  background: linear-gradient(to right, transparent, var(--steel) 20%, var(--steel-bright) 50%, var(--steel) 80%, transparent);
  box-shadow: 0 0 5px rgba(157, 176, 198, 0.45);
}
.rs-visit__contact .text-link:hover { color: var(--steel-bright); }

/* ==========================================================================
   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; }
  .rs-pillars__grid { grid-template-columns: 1fr; }
  .rs-pillar { padding: 0; }
  .rs-pillar + .rs-pillar { border-left: 0; padding-top: 0; margin-top: 48px; }
  .rs-pillar > :last-child { margin-bottom: 0; }
  /* Full-width rules removed on phones; the short steel mark above each name separates the pillars, lengthened to carry that job. */
  .rs-pillar__name::before { width: 56px; }
  .rs-pillar__points { margin-top: 1.6rem; }
  .rs-next__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  /* No full-width rule on phones; the short marks separate the items. Intro to first item: 48px, as between the pillars. */
  .rs-next__grid { border-top: 0; padding-top: 0; }
  .rs-next__head { margin-bottom: 48px; }
}
@media (max-width: 680px) {
  .spine { display: none; }
  .q-split__media { height: clamp(300px, 50vh, 420px); }
}

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

/* ==========================================================================
   MECHANICAL SUPREMACY — stationary field, the timepiece scrolls in from the left.
   The background is held still and full-bleed; the cutout travels in on scroll
   and settles under the light. No grading on either image.
   ========================================================================== */
.rs-supremacy { position: relative; overflow: hidden; background: #04060B; min-height: clamp(760px, 98vh, 1060px); display: flex; align-items: center; padding-block: clamp(5rem, 10vh, 8rem); }
.rs-supremacy::before { display: none; }
.rs-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.rs-stage__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: none; }
.rs-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 30%, rgba(3,5,10,0.79) 52%, rgba(3,5,10,0.95) 74%, rgba(2,4,8,0.97) 100%); pointer-events: none; }
.rs-stage picture { display: contents; }
.rs-stage__watch { position: absolute; bottom: -6%; left: 29.5%; height: 104%; width: auto; max-width: none; filter: none; transform: translate3d(-50%, 0, 0); will-change: transform; }
.rs-supremacy .container { position: relative; z-index: 1; }
.rs-supremacy__split { grid-template-columns: 1fr 1fr; align-items: center; }
.rs-supremacy__split .q-split__text { grid-column: 2; max-width: 42ch; }
@media (prefers-reduced-motion: reduce) { .rs-stage__watch { transform: translate3d(-50%, 0, 0) !important; } }

@media (max-width: 1024px) {
  .rs-supremacy { display: block; min-height: 0; padding-block: 0 clamp(3.5rem, 8vh, 6rem); }
  .rs-stage { position: relative; inset: auto; height: clamp(380px, 58vh, 620px); }
  .rs-stage::after { background: linear-gradient(180deg, transparent 62%, rgba(4,6,11,0.9) 100%); }
  .rs-stage__watch { left: 50%; bottom: -5%; height: 97%; }
  .rs-supremacy .container { padding-top: clamp(2rem, 5vh, 3rem); }
  .rs-supremacy__split { grid-template-columns: 1fr; }
  .rs-supremacy__split .q-split__text { grid-column: 1; max-width: none; }
  /* Sun sits behind the watch, as on desktop. The sun is ~30% across the plate (2500x1418); the plate covers the stage height,
     so it is shifted to put that point at the screen centre, clamped so it never leaves a gap at the left. */
  .rs-stage__bg { object-position: min(0px, calc(50vw - 0.5466 * clamp(380px, 58vh, 620px))) 50%; }
  /* Title sits under the watch: pulled up over the dark foot of the stage. */
  .rs-supremacy .container { padding-top: 0; margin-top: -56px; }
}
/* Open Fold / tablets: the plate is too narrow to shift, so it is scaled from its left edge until the sun reaches the centre. */
@media (min-width: 681px) and (max-width: 1024px) {
  .rs-stage__bg { object-position: 0 50%; transform: scale(1.36); transform-origin: 0 50%; }
  /* Watch grown with the plate so the two stay in proportion. */
  .rs-stage__watch { height: 116%; bottom: -11%; }
  /* The enlarged plate pushed its own soft foot out of frame, so the stage fades itself into the ground; copy sits a little lower. */
  .rs-stage { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
  .rs-supremacy .container { margin-top: -28px; }
}

/* TEST ONLY — text shifted right to Sergi's line. Remove the
   rs-supremacy--test-shift class from the section to return the copy to the
   site column. */
.rs-supremacy--test-shift .q-split__text { padding-left: 5.6vw; }
@media (max-width: 1024px) { .rs-supremacy--test-shift .q-split__text { padding-left: 0; } }

/* TEST — pin track: the stage sticks for roughly a second of scroll once it
   fills the frame, then the page carries on. Remove the .rs-pin wrapper in the
   markup to go back to a normally flowing section. */
.rs-pin { position: relative; }
/* the hold has to live inside the track's content box, or the sticky child
   gets no travel at all */
.rs-pin__hold { height: 46vh; }
/* the nav sits over the top of the frame, so the copy is weighted down to
   centre in what is actually visible, and to sit under the planet's limb */
.rs-pin .rs-supremacy { position: sticky; top: 0; min-height: 100vh; height: auto; padding-top: clamp(6rem, 13vh, 10rem); padding-bottom: clamp(2rem, 4vh, 3.5rem); }
@media (max-width: 1024px) {
  .rs-pin .rs-pin__hold { height: 0; }
  .rs-pin .rs-supremacy { position: static; min-height: 0; padding-top: 0; }
}
/* short frames cannot contain the copy, so the hold would strand the lower
   half of the section below the fold. Let it scroll instead. */
@media (max-height: 780px) {
  .rs-pin .rs-pin__hold { height: 0; }
  .rs-pin .rs-supremacy { position: static; }
}

/* MADE WHOLE — cinema pin: the plate zooms up to fill the frame, then the copy
   rises through its mask. The hold only exists where the frame can contain it. */
.rs-cinema { position: relative; background: #07090C; }
.rs-cinema .rs-pin__hold { height: 0; }
.q-boutique__media { transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; }
.rs-awl { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.rs-awl__in { display: block; will-change: transform; }
@media (min-width: 1025px) and (min-height: 620px) {
  .rs-cinema .q-boutique { position: sticky; top: 0; min-height: 100vh; }
  .rs-cinema .rs-pin__hold { height: 120vh; }
}
/* TEST — short hold on an ordinary section. Roughly a third of a screen of
   scroll, enough to register as a beat rather than a stop. */
.rs-pin--short { position: relative; background: var(--bg); }
.rs-pin--short > .section { position: static; }
.rs-pin--short .rs-pin__hold { height: 0; }
/* only hold this one where the whole section fits the frame */
@media (min-width: 1025px) and (min-height: 1000px) {
  .rs-pin--short > .section { position: sticky; top: 0; }
  .rs-pin--short .rs-pin__hold { height: 30vh; }
}

/* COMPLETE VERTICAL INTEGRATION — the atelier carries the section as atmosphere,
   held well down so the copy reads and the boxed movement stays the brightest thing. */
.rs-integration { position: relative; isolation: isolate; }
.rs-integration::after {
  content: '';
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: url("assets/rs-cvi-workshop-v2-2000.webp");
  background-image: image-set(
    url("assets/rs-cvi-workshop-v2-2000.avif") type("image/avif"),
    url("assets/rs-cvi-workshop-v2-2000.webp") type("image/webp")
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.rs-integration__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: rgba(6,9,13,0.52);
  background-image:
    linear-gradient(90deg, transparent 44%, rgba(4,6,10,0.22) 60%, rgba(4,6,10,0.32) 100%),
    radial-gradient(120% 100% at 50% 45%, rgba(6,9,13,0.30) 0%, rgba(5,7,11,0.52) 58%, rgba(4,6,9,0.72) 100%),
    linear-gradient(90deg, rgba(5,7,11,0.20) 0%, rgba(5,7,11,0.34) 46%, rgba(5,7,11,0.56) 100%);
}
.rs-integration > .container { position: relative; z-index: 1; }
.rs-integration .q-split__media { overflow: hidden; }
.rs-integration .q-split__media .q-figure__img { width: 100%; height: 100%; object-fit: cover; 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: #06080C;
  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(112px, 10vw, 150px); height: auto; display: block; opacity: 0; transform: translateY(10px); animation: rsMarkIn 1.15s cubic-bezier(0.22,1,0.36,1) 120ms forwards; }
.q-loader__bar { position: relative; width: 148px; height: 1px; background: rgba(236,230,216,0.14); overflow: hidden; }
.q-loader__bar i { position: absolute; inset: 0; background: linear-gradient(to right, var(--gold-deep, #8A6F3C), var(--gold, #C9A961)); transform: scaleX(0); transform-origin: left center; animation: rsBarFill 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: rsCapIn 1.1s ease 820ms forwards; }
@keyframes rsMarkIn { to { opacity: 1; transform: none; } }
@keyframes rsBarFill { to { transform: scaleX(1); } }
@keyframes rsCapIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.lzbg .q-loader { display: none; } }

/* GEMOLOGICAL SOVEREIGNTY — the atelier plate carries the section at its own
   brightness; only a scrim under the copy, enough to read and no more. The
   plate and scrim sit on the pin track so they cover the whole hold. */
.rs-gemological { position: relative; overflow: hidden; background: #06080C; }
.rs-gemological > .q-section { background: transparent; border-top: none; position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; }
/* the track is exactly one viewport tall, so the plate reads as a single full
   frame instead of a taller image drifting past */
.rs-gemological .rs-pin__hold { height: 0; }
.rs-gemological__plate {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("assets/rs-gs-atelier2-1672.webp");
  background-image: image-set(
    url("assets/rs-gs-atelier2-1672.avif") type("image/avif"),
    url("assets/rs-gs-atelier2-1672.webp") type("image/webp")
  );
  background-size: cover;
  background-position: 64% center;
  background-repeat: no-repeat;
}
/* left-weighted scrim: opaque enough for the copy, gone by the middle of the frame */
.rs-gemological__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(4,6,10,0.76) 0%, rgba(4,6,10,0.72) 28%, rgba(4,6,10,0.60) 46%, rgba(4,6,10,0.26) 60%, transparent 74%);
}
.rs-gemological__inner { display: block; }
.rs-gemological .q-split__text { max-width: 46ch; }
@media (max-width: 1024px) {
  .rs-gemological > .q-section { min-height: 0; padding-block: clamp(4rem, 9vh, 7rem); }
  .rs-gemological__veil { background-image: linear-gradient(180deg, rgba(4,6,10,0.62) 0%, rgba(4,6,10,0.78) 42%, rgba(4,6,10,0.9) 100%); }
}

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

/* ===== Phone pass (mirrors Qvinto, Ameria Riva, Tayrona Cacao) ===== */
/* Hero legibility, all screen sizes: bright gold, one soft shadow, heavier eyebrow, 1.5px gold rule. */
.qhero__eyebrow, .qhero__sub { color: #D9C795; text-shadow: 0 1px 10px rgba(3,7,13,0.55); }
.qhero__eyebrow { font-weight: 500; }
.qhero__eyebrow::before { height: 1.5px; background: linear-gradient(to right, #D9C795, transparent); }
@media (max-width: 1024px) {
  /* The Maison: the plate was sized by width (122%), so on a tall phone section it ended well short of the top and bottom.
     Cover the oversized drift layer instead, so the movement fills the screen and the drift has room to travel. */
  .q-parallax .q-marble__bg { background-size: cover; }
  .q-split { grid-template-columns: minmax(0, 1fr); }
  .rs-gemological > .q-section, .rs-next, .rs-pillars, .rs-integration { padding-top: 64px; padding-bottom: 64px; }
  .q-boutique__inner { padding-bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 380px) {
  .q-split__title { font-size: 1.75rem; }
  .q-position__accent .gold { display: block; }
}

/* Mechanical Supremacy headline on narrow phones: break after "Gravity," */
@media (max-width: 680px) { .rs-supremacy .ln-sm, .rs-integration .ln-sm { display: block; } }
/* Spec row on narrow phones: three equal columns, centred, so all three sit side by side. */
@media (max-width: 680px) {
  .rs-supremacy .q-spec { display: grid !important; grid-template-columns: repeat(3, auto); justify-content: space-evenly; gap: 0.5rem; text-align: center; }
  .rs-supremacy .q-spec li { display: flex; flex-direction: column; align-items: center; min-width: 0; }
  .rs-supremacy .q-spec__k { letter-spacing: 0.2em; }
  .rs-supremacy .q-spec__v { font-size: 1rem; white-space: nowrap; }
}
@media (max-width: 380px) { .rs-supremacy .q-spec__v { font-size: 0.95rem; } }

/* 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 { 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; } }
/* Made Whole on phones and tablets, matching the other boutiques: the frame starts small and grows to full as the section pins,
   then the copy rises. Photo sits below the header and fades into the ground; crop centred on the movement (~76% across). */
@media (max-width: 1024px) {
  .rs-cinema .q-boutique { position: sticky; top: 0; min-height: 100svh; }
  .rs-cinema .rs-pin__hold { height: 120vh; }
  .rs-cinema .q-boutique__media { top: 92px; bottom: auto; height: min(calc(100% - 92px), 112vw); -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
  .rs-cinema .q-boutique .q-figure { background-position: 100% 50%; }
  /* Copy sits on the ground under the shorter frame; a bottom grade and soft shadow hold it where it meets the plate. */
  .rs-cinema .q-boutique__grade { background: linear-gradient(to top, rgba(7,9,12,0.92) 0%, rgba(7,9,12,0.6) 30%, rgba(7,9,12,0.2) 50%, transparent 62%); }
  .rs-cinema .q-boutique__eyebrow, .rs-cinema .q-boutique__title, .rs-cinema .q-split__accent { text-shadow: 0 1px 10px rgba(3,7,13,0.55); }
}
@media (max-width: 680px) { .rs-cinema .q-boutique .q-figure { background-position: 91% 50%; } }
/* Made Whole, phones and tablets: photo stays below the header; copy is anchored from the top so the eyebrow sits at the photo's faded bottom edge. */
@media (max-width: 1024px) {
  .rs-cinema .q-boutique { display: flex; flex-direction: column; justify-content: flex-start; }
  .rs-cinema .q-boutique__inner { padding-top: calc(92px + min(100svh - 92px, 112vw) * 0.86); padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
  .rs-cinema .q-boutique__title { font-size: 2rem; line-height: 1.08; }
  .rs-cinema .q-boutique__eyebrow { margin-bottom: 1rem; }
  .rs-cinema .q-boutique__body { margin-top: 1rem; font-size: 0.95rem; line-height: 1.65; }
  .rs-cinema .q-boutique .q-split__accent { margin-top: 1.2rem; }
}
@media (min-width: 681px) and (max-width: 1024px) {
  .rs-cinema .q-boutique__media { height: min(calc(100% - 92px), 52svh); }
  .rs-cinema .q-boutique__inner { padding-top: calc(92px + 52svh * 0.86); }
}