*, *::before, *::after { box-sizing: border-box; }
/* Blue behind everything, so overscroll/rubber-banding past the header or
   footer matches them. The page itself (body) is white. */
html { -webkit-text-size-adjust: 100%; background: var(--blue); }
body {
	margin: 0;
	background: var(--white);
	color: var(--black);
	font-family: var(--font);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4;
	/* A word too long for its line (big uppercase titles at 320px, or with
	   user text spacing, WCAG 1.4.10/1.4.12) breaks instead of scrolling sideways. */
	overflow-wrap: break-word;
	/* cqw units measure this width, which excludes the scrollbar (vw doesn't) */
	container-type: inline-size;
	/* Fill the viewport so short pages keep the footer at the bottom. */
	display: flex; flex-direction: column;
	min-height: 100vh; min-height: 100dvh;
}
main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; height: auto; }
/* No browser bevel (the 2px outset border and system appearance) on buttons. */
button { font: inherit; color: inherit; cursor: pointer; border: 0; appearance: none; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
main:focus { outline: none; }
::selection { background: var(--yellow); color: var(--black); }

.wrap { padding-inline: var(--gutter); }

.vh {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip {
	position: absolute; z-index: 100; top: 0; left: 50%;
	padding: 12px 20px;
	background: var(--yellow); color: var(--black);
	font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap;
	border-radius: 0 0 var(--radius-btn) var(--radius-btn);
	transform: translate(-50%, -120%);
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.skip:focus {
	transform: translate(-50%, 0);
	/* Blue wings hide the header tab where it's centred under it on phones. */
	box-shadow: -40px 0 0 var(--blue), 40px 0 0 var(--blue);
}
/* Yellow ring on the blue header, like the Employment tab; it settles
   outward as the tab drops in. */
.skip:focus-visible { outline-color: var(--yellow); outline-offset: 3px; animation: skip-ring 360ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes skip-ring { from { outline-offset: -3px; } }
@media (prefers-reduced-motion: reduce) {
	.skip { transition: none; }
	.skip:focus-visible { animation: none; }
}

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.on-blue :focus-visible { outline-color: var(--yellow); }

/* Buttons (Figma: 46px tall, 9px radius, Gotham Medium 18) */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: min(245px, 100%); min-height: 46px;
	padding: 0 24px;
	border-radius: var(--radius-btn);
	background: var(--yellow); color: var(--black);
	font-weight: 500; font-size: 18px; line-height: 1.4;
	text-align: center; text-decoration: none;
}
.btn:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Windows High Contrast drops backgrounds, so give buttons a visible edge there. */
@media (forced-colors: active) { .btn { border: 2px solid ButtonText; } }
.btn--outline {
	min-width: min(329px, 100%);
	border: 2px solid var(--blue);
	background: transparent; color: var(--blue);
	font-weight: 700;
}

.link { color: var(--blue); font-weight: 700; }

/* Bullets: 12px ring, 3px blue stroke (Figma Ellipse 1) */
.bullets li { position: relative; padding-left: 25px; line-height: 26px; }
.bullets li::before {
	content: ""; position: absolute; left: 0; top: 7px;
	width: 12px; height: 12px;
	border: 3px solid var(--blue); border-radius: 50%;
}

.rule { height: 1px; border: 0; background: var(--dash); }

/* Error pages (403, 404; 500/503 mirror this in static HTML): the intro's
   blue band, then the route strip leading to the main sections. */
/* The band takes any spare height on tall screens, so the page never ends in
   a white gap above the footer. Text left, a large line icon right, where the
   photo floats on Home. */
.error { display: flex; flex-direction: column; }
.error__band {
	flex: 1 0 auto;
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px 4.4872%;
	padding: 72px var(--gutter) 80px; background: var(--blue); color: var(--white);
}
/* Large line icon in a blue band's right-hand side (error and text pages),
   where Home floats its photo. */
.band-art {
	display: grid; place-items: center;
	width: clamp(220px, 22cqw, 320px); aspect-ratio: 1; margin-right: 2cqw;
	border-radius: 50%; background: rgba(255, 255, 255, 0.07);
	box-shadow: inset 0 0 0 3px rgba(170, 214, 243, 0.35);
	color: var(--yellow);
}
.band-art svg { width: 52%; height: auto; }
.error__code { color: var(--sky); font-weight: 700; font-size: 16px; letter-spacing: 3px; text-transform: uppercase; }
.error__title {
	margin-top: 12px; color: var(--yellow);
	font-weight: 700; font-size: clamp(36px, 4.1667cqw, 60px); line-height: 1.05;
	text-transform: uppercase;
}
.error__lede { width: 82%; margin-top: 16px; font-size: 20px; line-height: 1.45; }
.error__btn { margin-top: 32px; }
.error__next {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 3.125cqw;
	padding-block: 32px 40px;
}
.error__link {
	display: flex; align-items: center; gap: 20px; height: 100%;
	padding: 20px 24px; border-radius: var(--radius-card);
	background: var(--ice); color: var(--black); text-decoration: none;
}
.error__link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.error__icon { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--white); }
.error__icon img { width: auto; height: 34px; }
.error__link-text { display: grid; gap: 4px; }
.error__link-text strong { color: var(--blue); font-weight: 700; font-size: 18px; line-height: 1.3; }
.error__link-text span { font-size: 16px; line-height: 1.45; }
@media (max-width: 767px) {
	.error__band { grid-template-columns: minmax(0, 1fr); padding-block: 40px 48px; }
	.band-art { order: -1; width: 112px; margin: 0; }
	.error__lede { width: auto; font-size: 18px; }
	.error__next { grid-template-columns: minmax(0, 1fr); padding-block: 24px 32px; }
	.error__link { padding: 16px 18px; gap: 16px; }
	.error__icon { width: 56px; height: 56px; }
	.error__icon img { height: 28px; }
}