.about-main { padding-top: var(--nav-height); background: var(--canvas); }
.about-hero { padding: var(--section-space) 0; background: var(--navy-900); color: var(--surface); }
.about-hero-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: var(--space-16); }
.about-hero h1 { max-width: var(--content-reading); margin: 0; color: var(--surface); font-size: var(--font-size-display); line-height: var(--line-display); letter-spacing: -0.025em; }
.about-hero h1 em { color: var(--teal-400); font-style: normal; }
.about-hero-lede { max-width: var(--content-reading); margin: var(--space-6) 0 0; color: var(--color-inverse-muted); font-size: var(--font-size-large); }
.about-hero-visual { width: 100%; max-width: 23rem; justify-self: end; }
.about-hero-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); }
.experience-stat { margin-top: var(--space-6); padding-top: var(--space-6); display: flex; align-items: baseline; gap: var(--space-4); border-top: var(--border-inverse); }
.experience-number { flex: none; color: var(--teal-400); font-family: var(--font-heading); font-size: var(--font-size-display); font-weight: var(--weight-heading); line-height: var(--line-display); }
.experience-stat p { margin: 0; color: var(--color-inverse-muted); font-size: var(--font-size-ui); }
.about-section { padding: var(--section-space) 0; }
.about-section.white { background: var(--surface); }
.about-section h2 { max-width: var(--content-reading); margin: 0; font-size: var(--font-size-h2); line-height: var(--line-heading); }
.letter-container { max-width: var(--content-reading); }
.letter-copy { margin-top: var(--space-10); }
.letter-copy p { margin: 0 0 var(--space-6); color: var(--color-text-secondary); font-size: var(--font-size-large); }
.letter-copy p:last-child { margin-bottom: 0; }
.letter-copy a { color: var(--color-action); font-weight: var(--weight-heading); text-underline-offset: var(--space-1); }
.letter-sign { color: var(--color-text) !important; font-weight: var(--weight-heading); }
.rule-section { background: var(--navy-900); }
.rule-section h2 { color: var(--surface); }
.rule-section .letter-copy p { color: var(--color-inverse-muted); }
.rule-section .letter-copy a { color: var(--teal-400); }
.letter-quote { margin: var(--space-10) 0; padding-left: var(--space-6); border-left: var(--space-1) solid var(--teal-600); }
.letter-quote p { margin: 0; color: var(--navy-900); font-family: var(--font-heading); font-size: var(--font-size-h3); line-height: var(--line-body); }
.about-cta { padding: var(--section-space) 0; background: var(--navy-900) !important; }
.about-cta h2 { max-width: var(--content-reading); margin: 0; color: var(--surface); }
.about-cta p { max-width: var(--content-reading); margin: var(--space-4) 0 var(--space-8); color: var(--color-inverse-muted); font-size: var(--font-size-large); }
@media (max-width: 56.25rem) {
  .about-hero-inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .about-hero-visual { justify-self: start; }
}
@media (max-width: 40rem) {
  .experience-stat { align-items: flex-start; flex-direction: column; }
}