/* About page: hero, stats strip, story, how it works, values. Category tiles come from home.css. */
.about-hero { padding-block: var(--space-5) calc(var(--space-5) + var(--space-4)); background: var(--color-primary-soft); }
.about-hero__inner { display: grid; gap: var(--space-4); align-items: center; }
.about-hero .entry-title { font-size: var(--text-2xl); margin-bottom: var(--space-2); text-wrap: balance; }
.about-hero__lead { max-width: 36rem; margin-bottom: var(--space-3); font-size: var(--text-lg); color: var(--color-muted); }
.about-hero__lead > :last-child { margin-bottom: 0; }
.about-hero__media { border-radius: var(--radius-lg); overflow: hidden; }
.about-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 7 / 6; object-fit: cover; }
@media (min-width: 860px) {
	.about-hero { padding-block: var(--space-6) calc(var(--space-6) + var(--space-3)); }
	.about-hero__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-5); }
}

.about-stats { position: relative; z-index: 1; margin-top: calc(var(--space-5) * -1); }
.about-stats__list { display: grid; margin: 0; padding: 0; list-style: none; background: var(--color-accent); border-radius: var(--radius-lg); box-shadow: 0 12px 32px rgba(1, 81, 84, 0.28); }
.about-stats__list > li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.about-stats__list > li + li { border-top: 1px solid rgba(255, 255, 255, 0.18); }
.about-stats__icon { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; }
.about-stats__icon .icon { width: 1.35rem; height: 1.35rem; }
.about-stats__text { display: flex; flex-direction: column; min-width: 0; }
.about-stats strong { font: 800 var(--text-xl)/1.1 var(--font-heading); color: #fff; }
.about-stats__text > span { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.92); }
@media (min-width: 700px) {
	.about-stats { margin-top: calc(var(--space-6) * -0.75); }
	.about-stats__list { grid-auto-flow: column; grid-auto-columns: 1fr; }
	.about-stats__list > li { justify-content: center; padding: var(--space-4) var(--space-3); }
	.about-stats__list > li + li { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.18); }
}

.about-story h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); text-wrap: balance; }
.about-story p:not(.eyebrow) { font-size: var(--text-lg); }

.about-steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: about-step; }
.about-step { position: relative; padding: var(--space-4) var(--space-3) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); counter-increment: about-step; }
.about-step::before { content: counter(about-step); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: var(--space-2); border-radius: 50%; background: var(--color-primary); color: #fff; font: 800 var(--text-base)/1 var(--font-heading); }
.about-step h3 { font-size: var(--text-lg); margin-bottom: 0.25rem; }
.about-step p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
@media (min-width: 640px) { .about-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .about-steps { grid-template-columns: repeat(4, 1fr); } }

.about-values { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.about-value { padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.about-value__icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--space-2); border-radius: var(--radius); background: var(--color-accent-soft); color: var(--color-accent); }
.about-value h3 { font-size: var(--text-lg); margin-bottom: 0.25rem; }
.about-value p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
@media (min-width: 640px) { .about-values { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .about-values { grid-template-columns: repeat(4, 1fr); } }
.about .section__head h2 { font-size: var(--text-xl); text-wrap: balance; }