/* ============ About ============ */
.about-hero { padding-block: clamp(2.5rem, 1rem + 5vw, 6rem) var(--s-6); }
.about-hero h1 { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem); max-width: 16ch; }
.about-hero h1 em { color: var(--moon); }
.about-hero .lead { margin-top: var(--s-5); max-width: 34em; }
.about-story__grid { display: grid; gap: var(--s-7); }
@media (min-width: 1000px) { .about-story__grid { grid-template-columns: 1fr minmax(0, 680px); gap: var(--s-9); } }
.about-story__side { display: none; }
@media (min-width: 1000px) { .about-story__side { display: block; } .pull { position: sticky; top: 120px; font-family: var(--font-display); font-style: italic; font-size: var(--fs-2xl); line-height: 1.2; color: var(--moon); } }
.prose-story { display: grid; gap: var(--s-4); font-size: var(--fs-lg); line-height: 1.75; color: var(--text-2); }
.prose-story h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-2xl); line-height: 1.12; color: var(--text); margin-top: var(--s-6); }
.prose-story h2:first-child { margin-top: 0; }
.note-card { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--surface); border-left: 2px solid var(--moon); font-size: var(--fs-sm); line-height: 1.6; }
.note-card b { color: var(--text); font-weight: 500; }
.values { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .values { grid-template-columns: repeat(4, 1fr); } }
.values li { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .values li { padding: var(--s-5) var(--s-5) var(--s-6); border-bottom: 0; } .values li + li { border-left: 1px solid var(--line); } .values li:first-child { padding-left: 0; } }
.values span { font-size: var(--fs-xs); color: var(--text-3); }
.values b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-xl); }
.values p { font-size: var(--fs-sm); color: var(--text-2); }
.about-stats { margin-top: var(--s-8); }
@media (min-width: 900px) { .about-stats { grid-template-columns: repeat(4, 1fr); } }
.about-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.section--tight { padding-block: calc(var(--section-y) * .6); }