/**
 * Reset, element defaults and shared primitives.
 */

/* Avenir LT Pro comes from the client's Adobe Fonts kit (see inc/enqueue.php).
   No local @font-face needed - the kit ships its own. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h);
}

body {
	margin: 0;
	/* Flat navy. The page gradient is a band (see .page-band), not the body -
	   in Figma it starts at y=1045, below the hero photo. */
	background-color: var(--c-navy);
	color: var(--c-text);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: var(--fw-light);
	line-height: var(--lh-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sp-3);
	font-weight: var(--fw-book);
	line-height: var(--lh-snug);
	text-wrap: balance;
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
	margin: 0 0 var(--sp-3);
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--c-link);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

a:hover,
a:focus-visible {
	color: var(--c-link-hover);
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--c-cyan);
	outline-offset: 3px;
}

/* ---- Layout primitives ---- */

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Past the 1440 design canvas the content keeps growing with the viewport and
   holds the frame's 120px side margins, instead of parking at 1200 net and
   letting the margins run away. Scoped to widths above the canvas, so every
   size the design was drawn at is untouched - at 1440 both rules give the same
   1200 net, so the two meet with no jump. */
@media (min-width: 1441px) {
	.container {
		max-width: none;
		padding-inline: 120px;
	}
}

.section {
	position: relative;
	/* Leading space up to the heading, then the trailing space. The two are
	   split so every strip repeats the same end-of-previous -> title gap. */
	padding-block: var(--section-y-top) var(--section-y);
	/* The header is fixed, so a menu jump would otherwise land the section's
	   own padding underneath it. */
	scroll-margin-top: var(--header-h);
}

.section__title {
	color: var(--c-heading);
	font-size: var(--fs-h2);
	font-weight: var(--fw-book);
}

/* ---- Buttons ---- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75em 2em;
	border-radius: 999px;
	font-size: var(--fs-nav);
	font-weight: var(--fw-book);
	line-height: 1;
	text-align: center;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn--primary {
	background-color: var(--c-orange);
	color: var(--c-white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background-color: var(--c-white);
	color: var(--c-navy);
	transform: translateY(-2px);
}

/* The design's CTA: transparent pill with a 2px blue stroke. */
.btn--outline {
	min-height: 54px;
	padding: 0.6em 25px;
	border: 2px solid var(--c-blue);
	background-color: transparent;
	color: var(--c-white);
	font-size: var(--fs-nav);
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
		color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	border-color: var(--c-cyan);
	background-color: var(--c-cyan);
	color: var(--c-navy);
	transform: translateY(-2px);
}

/* ---- Accessibility ---- */

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

.skip-link:focus {
	position: fixed;
	top: var(--sp-2);
	left: var(--sp-2);
	z-index: 999;
	width: auto;
	height: auto;
	padding: var(--sp-2) var(--sp-3);
	clip: auto;
	background: var(--c-white);
	color: var(--c-navy);
	border-radius: var(--radius-sm);
}

/* Scroll lock while the mobile menu overlay is open. */
body.nav-is-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}