/* css/pages/about.css
   Styles unique to the About page. Shared pieces (hero, section-head,
   team grid, form portal) live in components/ — only the mission
   callout, the partner strip, and the section rhythm are page-local. */

/* ------------------------------------------------------------
   Mission — a dark blue callout quote, teal accent along the top.
   ------------------------------------------------------------ */
.mission {
  position: relative;
  overflow: hidden;
  padding: 64px 56px;
  border-radius: 4px;
  background: var(--blue-deep);
  /* Recolors both the eyebrow label and its dash for the dark ground
     (see the --eyebrow-color hook in layout.css). */
  --eyebrow-color: var(--on-dark-soft);
}
.mission::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), transparent 60%);
}
.mission-quote {
  max-width: 820px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.35;
  color: var(--white);
}
.mission-attribution {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}

/* ------------------------------------------------------------
   Partnerships — centered composition: eyebrow + title + blurb sit
   above the logo wall (the shared .client-wall component, 3-up) that
   anchors the section.
   ------------------------------------------------------------ */
.partner-blurb {
  max-width: 620px;
  margin: 0 auto;              /* centered under the centered section head */
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 640px) {
  .mission { padding: 40px 26px; }
  .mission-quote { font-size: 23px; }
}