/* ==========================================================================
   About (about.html) — page-specific layout
   Builds on css/styles.css (tokens, header, footer, buttons, cta-band,
   card-grid, page-intro already defined there).
   ========================================================================== */

.about-hero {
  display: grid;
  align-items: center;
  gap: 3rem;
  padding-block: 4rem;
}
@media (min-width: 1024px) {
  .about-hero {
    grid-template-columns: repeat(2, 1fr);
    padding-block: 5rem;
  }
}

.about-hero h1 {
  margin-top: 1rem;
  font-size: 2.25rem;
  line-height: 1.2;
}
@media (min-width: 640px) {
  .about-hero h1 { font-size: 3rem; }
}
.about-hero p.lede {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  color: var(--muted-foreground);
}
.about-hero p.support {
  margin-top: 1rem;
  color: var(--muted-foreground);
}
.about-hero img {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
}

.who-we-work {
  padding-block: 4rem;
}
@media (min-width: 640px) {
  .who-we-work { padding-block: 5rem; }
}
.who-we-work p {
  margin-top: 1rem;
  max-width: 42rem;
  color: var(--muted-foreground);
}