/*
 * About Us — brand-philosophy page. Editorial, high-contrast pacing:
 * a dark full-bleed opener and closer bookend a run of centered
 * statement blocks, alternating background/alt for rhythm as the
 * copy moves from "the moment" to the brand's own call to action.
 */

.about-hero {
	background: var(--color-ink-solid);
	color: #fff;
	padding-block: var(--space-16) var(--space-12);
	text-align: center;
}

.about-hero__inner {
	max-width: 760px;
}

.about-hero__eyebrow {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-4);
}

.about-hero__headline {
	font-size: var(--fs-5xl);
	line-height: var(--lh-tight);
	letter-spacing: -0.02em;
	margin: 0;
	color: #fff;
}

.about-block {
	padding-block: var(--space-12);
	text-align: center;
}

.about-block--alt {
	background: var(--color-bg-alt);
}

.about-block__inner {
	max-width: 720px;
	margin-inline: auto;
}

.about-statement {
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	line-height: var(--lh-tight);
	letter-spacing: -0.01em;
	color: var(--color-ink);
	margin: 0;
}

.about-statement--accent {
	color: var(--color-accent);
}

.about-statement__accent {
	display: block;
	margin-top: var(--space-3);
	font-family: var(--font-body);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	color: var(--color-accent);
}

.about-line {
	font-size: var(--fs-lg);
	font-weight: var(--fw-medium);
	color: var(--color-ink);
	margin-top: var(--space-3);
}

.about-body {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--color-ink-muted);
	max-width: 60ch;
	margin-inline: auto;
}

.about-body--intro {
	margin-bottom: var(--space-6);
}

.about-motifs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-motifs__item {
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-full);
	padding: var(--space-2) var(--space-5);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-ink);
	background: var(--color-surface);
	transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.about-motifs__item:hover {
	background: var(--color-ink-solid);
	border-color: var(--color-ink-solid);
	color: #fff;
}

.about-closing {
	background: var(--color-ink-solid);
	color: #fff;
	padding-block: var(--space-16);
	text-align: center;
}

.about-closing__inner {
	max-width: 640px;
	margin-inline: auto;
}

.about-closing__lead {
	font-size: var(--fs-md);
	color: rgba(255, 255, 255, 0.7);
	max-width: 46ch;
	margin: 0 auto var(--space-4);
}

.about-closing__headline {
	font-family: var(--font-display);
	font-size: var(--fs-5xl);
	line-height: var(--lh-tight);
	letter-spacing: -0.02em;
	color: var(--color-accent);
	margin: 0 0 var(--space-6);
}

.about-closing .btn--primary {
	background: var(--color-accent);
}

.about-closing .btn--primary:hover {
	background: #fff;
	/* .about-closing is always the dark --color-ink-solid band, so this
	   hover fill is a fixed white in both themes — pair it with the
	   fixed-dark --color-ink-solid text, not --color-ink (which flips
	   to near-white in dark mode and would vanish here). */
	color: var(--color-ink-solid);
}

@media (max-width: 768px) {
	.about-hero {
		padding-block: var(--space-10) var(--space-8);
	}

	.about-block {
		padding-block: var(--space-8);
	}

	.about-closing {
		padding-block: var(--space-10);
	}

	.about-motifs {
		gap: var(--space-2);
	}
}