/*
 * 01 Who we are.
 *
 * Centred single column, no grid. The prototype sized this section with
 * container queries against a wrapper this theme does not have, so the one
 * breakpoint that actually changes anything is a media query at 640px. The
 * prototype's 1100px breakpoint does not touch this section, so there is no
 * rule for it.
 *
 * Nothing here animates on a loop, so SC 2.2.2 needs no extra work: the only
 * motion is the shared scroll reveal, whose rules and its reduced-motion and
 * [data-ad-motion="off"] handling live in hero.css and are not repeated.
 */

.ad-about {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 28px matches the prototype's section gap; there is no token for it. */
  gap: 28px;
  padding: var(--ad-space-section) var(--ad-space-page);
  text-align: center;
}

/*
 * The number and the label are one run of text, so the mono face, tracking
 * and accent colour sit on the paragraph rather than on separate spans. The
 * <bdi> around the number inherits all of it.
 */
.ad-about__eyebrow {
  font-family: var(--ad-font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--ad-color-accent);
}

/* The largest section heading on the page. */
.ad-about__title {
  max-width: 900px;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ad-color-text);
  text-wrap: pretty;
}

.ad-about__body {
  max-width: 680px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ad-color-text-secondary);
  text-wrap: pretty;
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 640px) {
  .ad-about {
    padding: var(--ad-space-section-mobile) var(--ad-space-page-mobile);
  }

  .ad-about__title { font-size: 34px; }
}