/* ==========================================================================
   ABOUT page (about.html)
   Page-specific styles. Requires ../styles.css (global tokens & components).
   ========================================================================== */

@media (min-width: 64rem) {
  .split-about { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; }
}

/* ---------- About ---------- */
.placeholder-grid { margin-top: 2rem; display: grid; gap: 0.75rem; }
@media (min-width: 40rem) { .placeholder-grid { grid-template-columns: repeat(3, 1fr); } }
.placeholder-grid div { border-radius: var(--radius-xl); background: var(--soft); padding: 1rem; text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--primary); }
.value-card { padding: 1.75rem; }
.value-card > .icon { width: 2rem; height: 2rem; color: var(--primary); }
.value-card h2 { margin-top: 1.25rem; font-size: 1.25rem; }
.value-card p { margin-top: 0.75rem; line-height: 1.75; color: var(--muted-foreground); }
.closing-quote { margin: 3.5rem auto 0; max-width: 48rem; text-align: center; font-size: 1.25rem; font-weight: 600; line-height: 2rem; }