/* The opening quote is a plain white section that scrolls normally. The
   purple belongs to FEATURED PROJECTS below, which only starts to take it once
   the quote has gone off the top (impact-intro.js, impact-stories.css). */
.impact-intro {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-height: 82svh;
  margin: 0;
  padding: clamp(5rem, 8vh, 7rem) clamp(1.25rem, 4vw, 5rem);
  /* Transparent: the shared ground below paints it (see .impact-ground). */
  background: transparent;
  color: #4c3074;
  font-family: var(--font-ui, "Inter", Arial, sans-serif);
}
.impact-intro__eyebrow {
  margin: 0 0 clamp(1.5rem, 2.6vw, 2.5rem);
  color: currentColor;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.impact-intro__statement {
  max-width: 25em;
  margin: 0;
  color: currentColor;
  font-size: clamp(1.8rem, 3.7vw, 4.2rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: pretty;
}
@media (max-width: 699px) {
  .impact-intro { min-height: 70svh; padding-inline: 1.25rem; }
  .impact-intro__statement { font-size: clamp(1.8rem, 7.5vw, 2.6rem); }
}

/* The quote and FEATURED PROJECTS share one ground (Hodge, 8 Oct): a
   screen-sized layer that pins at the top of the run while both sections
   scroll over it, so the colour change is one surface with no join. The deep
   purple is the one Lauchie chose on 6 Oct; the white veil over it lifts away
   with --stories-ground (impact-intro.js, scroll position only). */
.impact-ground-run { position: relative; }
.impact-ground {
  position: sticky;
  z-index: 0;
  top: 0;
  display: block;
  height: 100lvh;
  margin-bottom: -100lvh;
  background:
    radial-gradient(circle at 82% 22%, rgba(150, 105, 200, .28), transparent 40%),
    radial-gradient(circle at 12% 78%, rgba(95, 60, 145, .4), transparent 44%),
    linear-gradient(145deg, #3d2660 0%, #2e1d47 45%, #241733 100%);
  pointer-events: none;
}
.impact-ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: calc(1 - var(--stories-ground, 0));
}