/* about us (views/site/pages/about.php) */
.ab-stat b { display: block; font: 800 44px/1 var(--display); letter-spacing: -.04em; }
.ab-stat span { color: var(--ink-muted); }

.ab-purpose { margin-top: 32px; border-radius: 32px; background: var(--hero); color: var(--on-hero); padding: 56px; display: grid; gap: 18px; }
.ab-purpose .eyebrow { color: #A3B8FF; }
.ab-purpose p { color: var(--on-hero-muted); max-width: 60ch; font-size: 18px; }
.ab-purpose p.big { color: var(--on-hero); font: 700 clamp(26px, 3.2vw, 40px)/1.2 var(--display); letter-spacing: -.025em; max-width: 26ch; text-wrap: balance; }
@media (max-width: 700px) { .ab-purpose { padding: 32px 22px; } }

.ab-what { align-items: start; }
.ab-time { display: grid; border-left: 2px solid var(--line); margin-left: 8px; }
.ab-time div { position: relative; padding: 0 0 28px 28px; }
.ab-time div:last-child { padding-bottom: 0; }
.ab-time div::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--ground); }
.ab-time b { display: block; font: 600 13px/1.3 var(--mono); color: var(--accent-hover); }
.ab-time h3 { font-size: 20px; margin-top: 4px; }
.ab-time h3 a { text-decoration: none; }
.ab-time h3 a:hover { text-decoration: underline; }
.ab-time p { color: var(--ink-muted); margin-top: 4px; }