:root {
	--navy: #0d1f3c;
	--gold: #c8962a;
	--ink: #0f172a;
	--muted: #5a6a8e;
	--cloud: #f4f6fb;
}

.bg-brandNavy {
	background-color: var(--navy);
}
.text-brandNavy {
	color: var(--navy);
}
.border-brandNavy {
	border-color: var(--navy);
}
.bg-brandGold {
	background-color: var(--gold);
}
.text-brandGold {
	color: var(--gold);
}
.border-brandGold {
	border-color: var(--gold);
}
.bg-brandCloud {
	background-color: var(--cloud);
}

body {
	font-family: 'Inter', sans-serif;
	color: var(--ink);
	background: #ffffff;
}

.font-display {
	font-family: 'Playfair Display', serif;
}

.hero-grid {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 30px 30px;
}

.soft-gradient {
	background:
		radial-gradient(
			circle at 10% 10%,
			rgba(200, 150, 42, 0.18),
			transparent 35%
		),
		radial-gradient(
			circle at 90% 90%,
			rgba(13, 31, 60, 0.16),
			transparent 35%
		),
		#f8fafc;
}

.section-kicker {
	letter-spacing: 0.35em;
}

.service-card {
	border-left: 3px solid var(--gold);
	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.service-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 32px rgba(13, 31, 60, 0.12);
}

.gold-rule {
	width: 76px;
	height: 3px;
	background: var(--gold);
}

.reveal {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 0.55s ease,
		transform 0.55s ease;
}

.reveal.in-view {
	opacity: 1;
	transform: translateY(0);
}

.process-line {
	background: linear-gradient(
		90deg,
		rgba(200, 150, 42, 0.8),
		rgba(200, 150, 42, 0.35)
	);
}

.badge-pill {
	border: 1px solid rgba(200, 150, 42, 0.4);
}

table td,
table th {
	vertical-align: top;
}

@media (max-width: 768px) {
	.hero-grid {
		background-size: 24px 24px;
	}
}