.about-hero {
  background: linear-gradient(135deg, var(--beige) 0%, var(--cream) 100%);
  padding: 60px 20px; text-align: center;
}
.about-hero h1 { font-size: 2.6rem; margin-bottom: 12px; }
.about-hero p { max-width: 640px; margin: 0 auto; color: var(--gray); font-size: 1.1rem; }
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  max-width: 1000px; margin: -40px auto 50px; padding: 0 20px; position: relative; z-index: 2;
}
.stat-card {
  background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 16px; text-align: center; box-shadow: var(--shadow);
}
.stat-card .num { font-size: 2rem; font-weight: 700; color: var(--gold); }
.stat-card .label { font-size: 0.9rem; color: var(--gray); margin-top: 4px; }
.about-content { max-width: 900px; margin: 0 auto; padding: 20px 20px 60px; }
.about-content h2 { font-size: 1.6rem; margin: 32px 0 12px; color: var(--charcoal); }
.about-content p { color: var(--gray); line-height: 1.8; margin-bottom: 16px; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.value-card {
  background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 20px; text-align: center;
}
.value-card i { font-size: 1.8rem; color: var(--gold); margin-bottom: 12px; }
.value-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.value-card p { font-size: 0.9rem; color: var(--gray); }
@media (max-width: 768px) {
  .stats-row, .values-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .about-hero h1 { font-size: 2rem; }
}
/* Keep 2 cards per row on small phones too */
@media (max-width: 480px) {
  .stats-row, .values-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card, .value-card { padding: 18px 10px; }
  .stat-card .num { font-size: 1.5rem; }
  .value-card h3 { font-size: 0.95rem; }
}