/* ==========================================================================
   Why Us (about.html): page-only styles. Linked after site.css.
   Uses only the tokens of site.css; no new colours, sizes or durations.
   ========================================================================== */

@layer components {

  /* --- Intro ("Why We Exist"): text on column 5, the in-page index on column 1 --- */
  .intro { margin-top: var(--block-gap); display: grid; gap: var(--s-7) var(--gutter); }
  .intro__text { color: var(--ink-2); }
  .intro__text > * + * { margin-top: 1.25em; }
  .intro__first { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); }
  .intro__pull {
    font: var(--w-medium) var(--fs-h2) / 1.22 var(--font-sans); letter-spacing: var(--ls-h2); color: var(--ink);
    padding-block: var(--s-3); text-wrap: balance;
  }
  .intro__text .intro__pull { margin-top: var(--s-6); }
  .intro__text .intro__pull + p { margin-top: var(--s-5); }
  .intro__close {
    font: var(--w-strong) var(--fs-h4) / 1.45 var(--font-sans); letter-spacing: -0.01em; color: var(--ink);
    padding-top: var(--s-5); border-top: var(--hair) solid var(--ink);
  }
  .intro__text .intro__close { margin-top: var(--s-7); }
  @media (min-width: 68.75em) {
    .intro { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: var(--s-8); }
    .intro__index { grid-column: 1 / span 3; grid-row: 1; align-self: start; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
    .intro__text { grid-column: 5 / span 7; grid-row: 1; }
  }

  /* --- Who We Help: the sentence and the two blocks on column 5 --- */
  .who { display: grid; gap: var(--s-7) var(--gutter); }
  .who__lead { font: var(--w-medium) var(--fs-h2) / 1.22 var(--font-sans); letter-spacing: var(--ls-h2); max-width: 20ch; text-wrap: balance; }
  .who__pair > article { gap: var(--s-2); }
  .who__pair > article > p { margin-top: var(--s-2); font-size: var(--fs-small); line-height: 1.65; }
  @media (min-width: 68.75em) {
    .who { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .who > * { grid-column: 5 / span 8; }
  }

  /* Team: the person card, its phone layout and the "Read more" switch now live in site.css (5.22). */
}