/**
 * Strategy page — base layout.
 *
 * @package Deltraux
 */

.deltraux-strategy {
	--str-bg-body: #f7f8fa;
	--str-bg-white: #ffffff;
	--str-bg-subtle: #f1f3f6;
	--str-text-heading: #0f172a;
	--str-text-body: #334155;
	--str-text-muted: #475569;
	--str-muted-light: #64748b;
	--str-accent: #1e40af;
	--str-border: #e2e8f0;
	--str-border-light: #eef2f7;
	--str-input-border: #94a3b8;
}

.deltraux-strategy h1,
.deltraux-strategy h2,
.deltraux-strategy h3,
.deltraux-strategy h4 {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--str-text-heading);
}

.deltraux-strategy .bg-white {
	background: var(--str-bg-white);
}

.deltraux-strategy .bg-body {
	background: var(--str-bg-body);
}

.deltraux-strategy .container--narrow {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.deltraux-strategy .section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--str-accent);
	margin: 0 0 20px;
}

.deltraux-strategy .section-eyebrow::before {
	content: '';
	display: block;
	width: 16px;
	height: 1px;
	background: var(--str-accent);
}

.deltraux-strategy .strategy-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.deltraux-strategy .strategy-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.deltraux-strategy .strategy-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}