/* ===========================================================
   about.css
   =========================================================== */

.about-hero { padding-top: 160px; padding-bottom: 80px; }
.about-hero__title { font-size: clamp(2.5rem, 6vw + 1rem, 6rem); margin: 0 0 var(--vc-s-6); max-width: 18ch; }
.about-hero__intro { font-size: var(--vc-text-lg); max-width: 68ch; color: var(--vc-fg-soft); margin: 0; }

.about-story { background: var(--vc-bg-alt); }

.about-manifesto { background: var(--vc-bg); }
.manifesto-list {
	display: grid; gap: var(--vc-s-6);
	grid-template-columns: 1fr;
	margin-top: var(--vc-s-12);
	counter-reset: m;
}
@media (min-width: 768px) { .manifesto-list { grid-template-columns: repeat(2, 1fr); } }
.manifesto-item {
	padding: var(--vc-s-8);
	border: 1px solid var(--vc-line);
	border-radius: var(--vc-radius-lg);
	background: var(--vc-bg-alt);
}
.manifesto-item__num { display: block; font-family: var(--vc-font-display); color: var(--vc-accent); font-size: var(--vc-text-md); margin-bottom: var(--vc-s-3); letter-spacing: .12em; }
.manifesto-item__title { font-size: var(--vc-text-xl); margin: 0 0 var(--vc-s-3); }
.manifesto-item__desc { color: var(--vc-fg-soft); margin: 0; }

.about-values { background: var(--vc-bg-alt); }
.value { padding: var(--vc-s-6); border: 1px solid var(--vc-line); border-radius: var(--vc-radius-lg); background: var(--vc-bg); }
.value__icon { display: inline-flex; width: 48px; height: 48px; border-radius: var(--vc-radius); background: var(--vc-bg-soft); align-items: center; justify-content: center; margin-bottom: var(--vc-s-4); }
.value__title { font-size: var(--vc-text-lg); margin: 0 0 var(--vc-s-2); }
.value__desc { color: var(--vc-fg-soft); font-size: var(--vc-text-sm); margin: 0; }

.about-team { background: var(--vc-bg); }