/* ================= ABOUT PAGE ================= */
.about-story{display:grid;grid-template-columns:1fr;gap:var(--sp-8);align-items:center}
@media (min-width:1024px){.about-story{grid-template-columns:1fr 1fr;gap:var(--sp-10)}}
.about-story img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%}
.about-story-body p{color:var(--gray-700);font-size:1rem;line-height:1.75}
.values-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
@media (min-width:640px){.values-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.values-grid{grid-template-columns:repeat(3,1fr)}}
.value-card{padding:var(--sp-6) var(--sp-5);border:1px solid var(--gray-200);border-radius:var(--radius);background:var(--white);text-align:left}
.value-num{font-family:var(--font-display);font-size:2rem;color:var(--accent);line-height:1;margin-bottom:var(--sp-3);font-weight:500}
.value-card h3{font-size:1.1rem;margin-bottom:.4rem}
.value-card p{color:var(--gray-700);font-size:.9rem;margin:0}


/* By-the-numbers band. Previously reused .hero-stats from pages/home.css,
   which this page never loads — so the stats rendered completely unstyled. */
.about-stats{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-6) var(--sp-5);
  margin-top:var(--sp-8);
}
@media (min-width:560px){.about-stats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.about-stats{grid-template-columns:repeat(4,1fr)}}

.about-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--sp-2);
}
.about-stat-num{
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,2.75rem);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--accent);
}
.about-stat-label{
  font-size:var(--fs-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(250,246,238,.7);
  max-width:18ch;
}