/* ============================================================================
   PayrAdvisors — About page
   Section styles for page-about.php. Builds on the component library +
   service-page.css primitives (check-list, support-list, figure-callout). The
   dark hero shell is the shared .page-hero (components.css). Strict 5-color brand.
   ============================================================================ */

/* ---------- Hero: mission card + stat row ---------- */
.about-mission {
  margin: 0;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(2, 16, 31, 0.4);
  backdrop-filter: blur(4px);
}
.about-mission__quote {
  margin: var(--space-4) 0 var(--space-5);
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  font-size: var(--fs-h4);
  line-height: 1.32;
  color: var(--white);
}
.about-mission__proof {
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-small);
  color: var(--on-dark-soft);
}
.about-mission__proof span {
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  color: var(--magenta);
  margin-right: 0.35rem;
}

.about-hero__stats { margin-top: var(--space-8); }

/* ---------- Our story (narrative + "what sets us apart") ---------- */
.about-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 900px) {
  .about-story__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); }
}
.about-story__body p { color: var(--muted); }
.about-story__body p + p { margin-top: var(--space-4); }
.about-story__body .lead { color: var(--ink); }

.about-diff {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.about-diff__title {
  font-size: var(--fs-h5);
  color: var(--navy);
  margin-bottom: var(--space-4);
}
.about-diff .check-list { margin-bottom: var(--space-5); }
.about-diff .figure-callout {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* ---------- Magenta-tinted card icons (pillars, differentiators) ---------- */
.about-pillars .card__icon,
.about-why .card__icon {
  width: 52px;
  height: 52px;
  color: var(--magenta);
  background: rgba(230, 0, 126, 0.08);
}
.about-pillars .card__icon .icon,
.about-why .card__icon .icon { width: 26px; height: 26px; }
.about-pillars .card { display: flex; flex-direction: column; }
.about-pillars .card__link { margin-top: auto; }

/* ---------- Who we serve (pills) ---------- */
.about-do__serve {
  margin-top: var(--space-7);
  text-align: center;
}
.about-do__serve-label {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-emphasis);
  color: var(--muted);
}
.about-do__serve .support-list { justify-content: center; }

/* ---------- Proven model (numbered steps) ---------- */
.about-model__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 620px) { .about-model__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .about-model__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }
.about-model__step {
  padding-top: var(--space-4);
  border-top: 2px solid rgba(230, 0, 126, 0.35);
}
.about-model__num {
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--magenta);
}
.about-model__step-title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--fs-h6);
  color: var(--white);
}
.about-model__step-text {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--on-dark-soft);
}

/* ---------- "We win when you win" quote ---------- */
.about-quote {
  position: relative;
  max-width: 46rem;
  margin: var(--space-8) auto 0;
  padding-top: var(--space-5);
  text-align: center;
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  font-size: var(--fs-h4);
  line-height: 1.35;
  color: var(--navy);
}
.about-quote__mark {
  position: absolute;
  top: -0.35em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 1;
  color: var(--magenta);
}

/* ---------- Proven results (stats + case studies) ---------- */
/* Center the stats so each sits balanced above its case-study card, matching
   the centered section head (the shared .stat-grid is left-aligned by default). */
.about-results__stats {
  margin-bottom: var(--space-8);
  text-align: center;
}
.about-results__stats .stat__label { margin-inline: auto; max-width: 22ch; }

.about-cases {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 720px) { .about-cases { grid-template-columns: repeat(3, 1fr); } }
.about-case {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--on-dark-line);
}
.about-case__tag {
  align-self: flex-start;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(230, 0, 126, 0.14);
  color: var(--magenta);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-emphasis);
}
.about-case__result {
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  font-size: var(--fs-h3);
  line-height: 1.05;
  color: var(--white);
  margin-top: var(--space-2);
}
.about-case__client {
  font-weight: var(--weight-emphasis);
  color: var(--white);
  font-size: var(--fs-body);
}
.about-case__detail {
  font-size: var(--fs-small);
  color: var(--on-dark-faint);
  line-height: 1.5;
}
/* (Client roster styles — .clients__label + .logo-wall — are global, in
   components.css, so About and Our Clients share them.) */