.quote {
  position: relative;
  scroll-margin-top: var(--nav-height, 64px);
}

/* The runway is the scroll distance the section consumes. Keep this
   short: the quote is a reading beat before the final CTA, not a
   full pinned scene. */
.quote-stage-wrap {
  position: relative;
  height: 132vh;
}

.quote-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  contain: layout style;
}

.quote__inner {
  max-width: 920px;
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
}

/* Eyebrow uses the shared .section__eyebrow class for consistency
   with the rest of the page (sentence-case, not uppercase). */

.quote__body {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.4rem);
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0;
  font-style: normal;
  text-wrap: balance;
}

/* Each word starts as ghost text — same colour as the body but
   heavily reduced opacity, so the contrast against the dark bg is
   small. As the word enters the reading zone it lights up to full
   opacity. Opacity (not just colour) gives a much more pronounced
   "appearing" effect than a slate-grey-to-cream colour ramp. */
.quote__body .word {
  color: var(--text);
  opacity: 0.18;
  transition: opacity 320ms var(--ease-out);
  display: inline;
}

.quote-stage[data-scroll-scrub] .quote__body .word {
  transition: none;
}

.quote__body .word.is-lit {
  opacity: 1;
}

/* Optional first-character treatment — a discreet opening quote
   sat in the warm gold. Pure decoration, set in Lora. */
.quote__body::before {
  content: '\201C';
  font-family: var(--font-serif);
  color: var(--primary);
  font-size: 1.2em;
  line-height: 0;
  margin-right: 0.08em;
  vertical-align: -0.18em;
  opacity: 0.85;
}

.quote__attribution {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  font-family: var(--font-ui);
}

.quote__author {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
}

.quote__role {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Reduced motion — drop the transition entirely; words land at
   their lit colour straight away. The scroll progress can still
   run, but it feels less twitchy. */
@media (prefers-reduced-motion: reduce) {
  .quote__body .word {
    transition: none;
    color: var(--text);
  }
}

/* Mobile fallback — drop the pin entirely. The section flows
   naturally, the JS shorts out, and all words land lit immediately
   (the pin / reveal pattern fights touch-scroll inertia on mobile
   and isn't worth the fight at this width). */
@media (max-width: 720px) {
  .quote-stage-wrap {
    height: auto;
  }

  .quote-stage {
    position: static;
    height: auto;
    min-height: 0;
    padding-block: clamp(56px, 12vw, 88px);
  }

  .quote__inner {
    gap: clamp(24px, 5vw, 32px);
  }

  .quote__body {
    font-size: clamp(1.1875rem, 1rem + 1.6vw, 1.625rem);
    line-height: 1.45;
    text-wrap: pretty;
  }

  .quote__body .word {
    opacity: 1;
  }
}