@font-face {
	font-family: Poppins;
	src: url("../assets/fonts/Poppins-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: Poppins;
	src: url("../assets/fonts/Poppins-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: Poppins;
	src: url("../assets/fonts/Poppins-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--navy: #0b1e5e;
	--navy-deep: #071443;
	--navy-soft: #b9c3e0;
	--navy-tint: #e8ecf6;
	--red: #c70000;
	--paper: #ffffff;
	--paper-alt: #f4f6fa;
	--ink: #1b2236;
	--muted: #5a6178;
	--line: #d9dde8;
	--line-hover: #c3cadb;
	--paper-hover: #f7f8fc;
	--on-navy: #ffffff;
	--on-navy-hover: #e6ebf6;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	color: var(--ink);
	background: var(--paper-alt);
	font-family: Poppins, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.6;
}

.skip-link {
	position: absolute;
	left: 16px;
	top: -48px;
	background: var(--paper);
	color: var(--navy);
	padding: 8px 12px;
	z-index: 2;
}

.skip-link:focus { top: 16px; }

.wrap {
	width: min(1080px, calc(100% - 40px));
	margin: 0 auto;
}

.band {
	background: var(--navy);
	color: var(--on-navy);
}

.band .wrap { padding: 22px 0; }

.band--footer { margin-top: auto; }

.band--footer .wrap { padding: 28px 0; }

.logo {
	display: block;
	width: min(280px, 70vw);
	height: auto;
}

main { padding: 56px 0 64px; }

.eyebrow {
	margin: 0 0 10px;
	color: var(--red);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

h1 {
	margin: 0;
	max-width: 14ch;
	color: var(--navy);
	font-size: clamp(40px, 6vw, 60px);
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.02em;
}

h1::after {
	content: "";
	display: block;
	width: 72px;
	height: 4px;
	margin-top: 20px;
	background: var(--red);
}

.lead {
	max-width: 46ch;
	margin: 20px 0 0;
	color: var(--muted);
	font-size: 18px;
}

.status {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 28px 0 0;
	padding: 0 18px;
	border-radius: 8px;
	background: var(--red);
	color: var(--paper);
	font-size: 16px;
	font-weight: 700;
}

.paths {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 40px;
}

.paths article {
	margin: 0;
	padding: 22px 20px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	transition: transform 320ms var(--ease), border-color 320ms var(--ease), background-color 320ms var(--ease);
}

.paths h2,
.topics h2 {
	margin: 0 0 8px;
	color: var(--navy);
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
}

.paths p { margin: 0; color: var(--muted); }

.topics { margin-top: 36px; }

.topics ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.topics li {
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	color: var(--navy);
	font-size: 14px;
	font-weight: 500;
	transition: border-color 320ms var(--ease), background-color 320ms var(--ease);
}

.band p {
	margin: 0 0 6px;
	color: var(--navy-soft);
	font-size: 14px;
}

.band a {
	color: var(--on-navy);
	text-underline-offset: 3px;
	transition: color 320ms var(--ease);
}

@media (hover: hover) {
	.paths article:hover {
		transform: translateY(-2px);
		border-color: var(--line-hover);
		background: var(--paper-hover);
	}

	.topics li:hover {
		border-color: var(--line-hover);
		background: var(--paper-hover);
	}

	.band a:hover { color: var(--on-navy-hover); }
}

@media (prefers-reduced-motion: reduce) {
	.paths article,
	.topics li {
		transition: none;
	}

	.paths article:hover { transform: none; }
}

a:focus-visible,
.skip-link:focus {
	outline: 2px solid var(--navy);
	outline-offset: 3px;
}

.band a:focus-visible {
	outline-color: var(--on-navy);
}

@media (max-width: 800px) {
	main { padding-top: 36px; }
	.paths { grid-template-columns: 1fr; }
	h1 { max-width: none; }
}