.about-hero__image { width: 100%; height: clamp(310px, 48vw, 620px); border-radius: 22px; object-fit: cover; }
.about-story { display: grid; grid-template-columns: .78fr 1.22fr; gap: 8%; }
.about-story h2 { margin: 14px 0 0; font: 600 clamp(2.4rem, 4.3vw, 4.1rem)/1.04 var(--font-display); letter-spacing: -.06em; }
.about-story__copy p { margin: 0 0 20px; color: var(--muted); font-size: 18px; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.value { padding: 28px; border-top: 1px solid var(--ink); }
.value__num { color: var(--coral); font: 700 13px var(--font-display); }
.value h3 { margin: 35px 0 10px; font: 600 25px var(--font-display); letter-spacing: -.04em; }
.value p { margin: 0; color: var(--muted); font-size: 14px; }
.about-quote { padding: 94px var(--page-gutter); background: var(--ink); color: white; text-align: center; }
.about-quote p { max-width: 950px; margin: 0 auto; font: 500 clamp(1.9rem, 4vw, 3.8rem)/1.15 var(--font-display); letter-spacing: -.05em; }
.about-quote span { display: block; margin-top: 28px; color: var(--lime); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 680px) { .about-story, .values { grid-template-columns: 1fr; gap: 32px; } .about-story__copy p { font-size: 16px; } .value { padding: 22px 0; } .value h3 { margin-top: 20px; } }