/* ====== ABOUT INTRO — BRIDGE SECTION ======
   Sits between the blue hero and the white bio. Establishes Diffusion at the
   organisational level before the page introduces Daniel personally.
   Three movements (conviction, practice, method) with marginal numbered
   labels that echo the homepage "What we do" 1/2/3 numbering pattern.
*/

#about-intro {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.about-intro-body {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: clamp(3.5rem, 6vw, 6rem) var(--site-gutter);
}

.about-intro-movement {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: baseline;
}

.about-intro-movement + .about-intro-movement {
  margin-top: clamp(2rem, 3.5vw, 3.2rem);
  padding-top: clamp(2rem, 3.5vw, 3.2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.about-intro-label {
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 0.92vw, 0.92rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-white);
  opacity: 0.55;
  margin: 0;
}

.about-intro-prose {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--color-white);
  margin: 0;
  max-width: 38em;
}

@media (max-width: 768px) {
  .about-intro-body {
    padding: var(--space-xl) var(--site-gutter);
  }
  .about-intro-movement {
    display: block;
  }
  .about-intro-label {
    margin-bottom: 0.6em;
  }
  .about-intro-movement + .about-intro-movement {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
  }
}