/* =============================================================
   Coast to Coast — site header

   Scope: header and navigation only.

   Geometry below is measured from reference/header-reference.png at
   1024 CSS px, devicePixelRatio 1. Measured values are noted beside
   the declarations they justify.
   ============================================================= */

/* -------------------------------------------------------------
   Typeface

   The reference is a raster and carries no font metadata, so the
   typeface cannot be identified from it. Candidates were compared by
   rendered label width against the reference (tools/measure-fonts.js):

     reference        About 42   Services 55   Contact 53   CTA 80
     Inter 13.75/600  About 40.2 Services 58.1 Contact 52.6 CTA 80.2
     Arial 13.75/600  About 39.7 Services 56.6 Contact 51.2 CTA 80.2
     Segoe UI 14.25/700 closest numerically, but Windows-only

   Inter is chosen: it matches as closely as Arial, its letterforms are
   nearer the reference, it is licensed for self-hosting (SIL OFL, see
   fonts/inter-LICENCE.txt), and unlike a system stack it renders
   identically on every platform. This is a close match, not an
   identification.
   ------------------------------------------------------------- */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("./fonts/inter-latin.woff2") format("woff2");
}

:root {
	/* Sampled from the reference; see sampled-colours.json. */
	--hdr-navy-1: #012b62;
	--hdr-navy-2: #012a61;
	--hdr-navy-3: #012960;
	--hdr-navy-4: #01285e;
	--hdr-navy-5: #01265c;

	/*
	 * Approved size (option C). The reference measures a 72px header
	 * with a 104px logo; this is a deliberate change the client chose
	 * after seeing the sizes side by side, so the logo reads more
	 * clearly. Every other value below still matches the reference.
	 */
	--hdr-height: 96px;
	--hdr-logo-width: 132px;
	--hdr-logo-top: 11px;
	--hdr-max: 1280px;
	/* The reference's gutters are not symmetric: the logo's left edge
	   sits at x=49 and the CTA's right edge at x=970, i.e. 49 and 54.
	   Reproduced rather than averaged, so the nav lands where it does
	   in the reference. */
	--hdr-gutter-l: 49px;
	--hdr-gutter-r: 54px;
	/* Hero copy starts at x=55 in the reference, 6px right of the
	   logo's left edge. Both are reproduced as measured. */
	--hero-gutter: 53px;   /* scaled below via --u */

	--hdr-font: "Inter", "Segoe UI", Arial, sans-serif;
	--hdr-link-size: 13.75px; /* measured fit, see note above */
	--hdr-link-weight: 600;
}

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

body {
	margin: 0;
	font-family: var(--hdr-font);
	background: #ffffff;
}

/* -------------------------------------------------------------
   Header shell
   ------------------------------------------------------------- */

.site-header {
	position: relative;      /* lets the logo overflow, no sticky */
	height: var(--hdr-height);
	/* Subtle left-to-right darkening, tuned to the sampled points
	   rather than flattened to one colour. */
	background: linear-gradient(
		100deg,
		var(--hdr-navy-1) 0%,
		var(--hdr-navy-2) 22%,
		var(--hdr-navy-3) 48%,
		var(--hdr-navy-4) 74%,
		var(--hdr-navy-5) 100%
	);
	/* No shadow and no bottom border: the reference has neither. */
}

.site-header__inner {
	position: relative;      /* positioning context for the logo */
	max-width: calc(var(--hdr-max) + var(--hdr-gutter-l) + var(--hdr-gutter-r));
	margin-inline: auto;
	padding-left: var(--hdr-gutter-l);
	padding-right: var(--hdr-gutter-r);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* -------------------------------------------------------------
   Logo

   Measured in the reference: 104px wide, left edge x=49, visible top
   y=9, overhanging the 72px header by roughly 37px. Positioned
   absolutely so it cannot stretch the header.
   ------------------------------------------------------------- */

.site-header__logo {
	position: absolute;
	top: var(--hdr-logo-top);
	left: var(--hdr-gutter-l);
	z-index: 2;              /* must sit above the section below */
	display: block;
	line-height: 0;
}

.site-header__logo img {
	display: block;
	width: var(--hdr-logo-width);
	height: auto;            /* natural aspect 160x152, never stretched */
}

/* -------------------------------------------------------------
   Navigation
   ------------------------------------------------------------- */

.site-header__nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 62.7px;             /* measured: Contact right edge to CTA left */
}

.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 45.75px;            /* measured: gap between link boxes */
}

.site-nav a {
	color: #ffffff;
	text-decoration: none;
	font-size: var(--hdr-link-size);
	font-weight: var(--hdr-link-weight);
	line-height: 1;
	white-space: nowrap;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* -------------------------------------------------------------
   Call to action

   Measured: box x=820..970 (151 wide), y=18..54 (37 tall including
   its ring), radius fully rounded, ring one solid pixel with partial
   coverage either side — roughly 1.5px at this scale.
   ------------------------------------------------------------- */

.cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding-inline: 33.5px;   /* yields the measured 151px outer width */
	border: 2px solid #ffffff;
	border-radius: 18px;
	background: transparent;   /* interior is the header itself */
	color: #ffffff;
	text-decoration: none;
	font-size: var(--hdr-link-size);
	font-weight: var(--hdr-link-weight);
	line-height: 1;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cta:hover,
.cta:focus-visible {
	background: #ffffff;
	color: var(--hdr-navy-2);
}

/* -------------------------------------------------------------
   Focus and skip link
   ------------------------------------------------------------- */

:where(a, button):focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
	border-radius: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
}

.skip-link:focus {
	left: 12px;
	top: 12px;
	padding: 10px 16px;
	background: #ffffff;
	color: var(--hdr-navy-2);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 6px;
}

/* -------------------------------------------------------------
   Mobile toggle — hidden until the desktop layout stops fitting
   ------------------------------------------------------------- */

.nav-toggle {
	display: none;
	align-items: center;
	gap: 9px;
	margin-left: auto;
	padding: 9px 14px;
	background: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
	border-radius: 8px;
	color: #ffffff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 17px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

/* -------------------------------------------------------------
   Below 768px

   No approved mobile reference exists, so this is a deliberate,
   understated adaptation rather than a match to anything.
   ------------------------------------------------------------- */

@media (max-width: 767px) {

	:root {
		--hdr-gutter-l: 20px;
		--hdr-gutter-r: 20px;
		--hero-gutter: 20px;
	}

	.site-header__logo img {
		width: calc(var(--hdr-logo-width) * 0.8);
	}

	.nav-toggle {
		display: inline-flex;
	}

	.site-header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 3;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-left: 0;
		padding: 8px var(--hdr-gutter-r) 22px;
		background: var(--hdr-navy-3);
		border-top: 1px solid rgba(255, 255, 255, 0.16);
	}

	/* The panel carries the hidden attribute when closed, so its links
	   leave the tab order entirely rather than staying reachable. */
	.site-header__nav[hidden] {
		display: none;
	}

	.site-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav a {
		display: block;
		padding: 14px 0;
		font-size: 16px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	}

	.cta {
		margin-top: 18px;
		align-self: flex-start;
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0.01ms !important;
	}
}

/* =============================================================
   Hero

   Measured from images/reference/approved-homepage.png at 1024 CSS px.
   The hero band there runs y=72..496, i.e. 425px tall on a 1024px
   viewport, which is the supplied photograph's own aspect ratio
   (1946x808 = 2.408), so the section is sized by aspect rather than a
   fixed height and stays correct at every width.

   No CSS gradient is applied over the photograph. The supplied image
   already carries the navy wash on its left, and measuring it against
   the reference shows the same coverage - solid to about 22% of the
   width, photograph by 35%. Adding a second gradient would darken it
   twice.
   ============================================================= */

.hero {
	position: relative;

	/*
	 * Everything in the hero is expressed in --u, where 1 unit equals
	 * 1px at the 1024px reference viewport. Fixed pixel offsets only
	 * hold the reference composition at exactly 1024: because the band
	 * grows with the viewport, a fixed 60px top inset left the copy
	 * pinned near the top with a 400px void beneath it at 1920.
	 *
	 * Capped at 1440 so the type stops growing on very wide screens.
	 */
	--u: calc(min(100vw, 1440px) / 1024);

	/*
	 * Type scales far less than layout. At the full layout scale the
	 * headline reached 79px on a wide screen, which reads as oversized;
	 * capping here lands it near 66px, inside the 64-72px the design
	 * specification gives for desktop.
	 */
	--t: calc(min(100vw, 1200px) / 1024);

	width: 100%;
	/*
	 * Height follows the photograph's 2.408 aspect so the crop stays
	 * true, capped so an ultrawide viewport does not produce an
	 * enormous band. Not aspect-ratio: with min-height the browser is
	 * free to resolve the WIDTH from the height, which pushed the
	 * section to 1011px inside a 768px viewport.
	 */
	height: min(calc(100vw / 2.408), 620px);
	min-height: 420px;
	background: var(--hdr-navy-3);
	overflow: hidden;
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hero__inner {
	position: absolute;
	z-index: 1;
	top: 0;
	height: 100%;

	/*
	 * Horizontal placement follows the header's wrapper, not the
	 * viewport edge, so the headline stays aligned with the logo above
	 * it at every width. The reference only shows 1024, where the two
	 * coincide; left to run to the viewport edge, the headline sat
	 * 240px left of the logo at 1920.
	 *
	 * Only the vertical rhythm and type scale with --u. Scaling this
	 * inset too would pull the copy away from the logo again.
	 */
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	padding-left: 53px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	max-width: calc(1280px + var(--hdr-gutter-l) + var(--hdr-gutter-r));
}

/* Measured: cyan #01ace2, 14px, uppercase, tracked, cap top y=134. */
/*
 * Free space above and below the copy is split in the ratio the
 * reference shows - 62px above, 35px below - rather than set by a
 * fixed inset. That keeps the block correctly placed whatever the
 * band's height or the type size.
 */
.hero__inner::before,
.hero__inner::after {
	content: "";
	flex: 64 0 0;
}

.hero__inner::after {
	flex-grow: 36;
}

.hero__title,
.hero__lede {
	max-width: calc(620 * var(--t));
}

/*
 * Measured: cyan #01ace2, 14px, uppercase, tracked, cap top y=134.
 *
 * Weight 500, not 700. Comparing ink density inside the same bounding
 * box against the reference: reference 33.8%, weight 500 34.4%,
 * weight 600 39.0%, weight 700 40.6%. Tracking re-solved to 0.1em so
 * the lighter weight still holds the measured 265px width.
 */
.hero__eyebrow {
	margin: 0 0 calc(14 * var(--t));
	color: #01ace2;
	font-size: calc(14 * var(--t));
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
}

/*
 * Measured: line tops 54px apart, "management." 384px wide and
 * "Properly personal." 500px wide, which resolve to Inter 800 at 56px
 * with slightly negative tracking. Individual words land within about
 * 10px of the reference; see the note in README about the typeface.
 */
.hero__title {
	margin: 0 0 calc(13 * var(--t));
	color: #ffffff;
	font-size: calc(56 * var(--t));
	font-weight: 800;
	line-height: 0.964;
	letter-spacing: -0.005em;
}

/* Measured: 24px, white, line tops 30px apart. */
.hero__lede {
	margin: 0 0 calc(18 * var(--t));
	color: #ffffff;
	font-size: calc(24 * var(--t));
	font-weight: 400;
	line-height: 1.25;
	max-width: calc(310 * var(--t));   /* breaks after "home," as the reference does */
}

/*
 * Measured: 290x49 pill, fill #00b3fe, corner curve about 10px.
 *
 * The reference puts a white label on that cyan, which measures
 * 2.37:1 and fails WCAG AA. Navy on the same fill is 6.36:1. The
 * design specification anticipates this - "navy labels on cyan
 * buttons where white fails" - so the label is navy.
 */
.hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(11 * var(--t));
	align-self: flex-start;
	height: calc(49 * var(--t));
	padding-inline: calc(31 * var(--t));
	border-radius: calc(10 * var(--t));
	background: #00b3fe;
	color: var(--hdr-navy-1);
	text-decoration: none;
	font-size: calc(17 * var(--t));
	font-weight: 700;
	line-height: 1;
	transition: background-color 0.15s ease;
}

.hero__cta:hover,
.hero__cta:focus-visible {
	background: #00a2e6;
	color: var(--hdr-navy-1);
}

.hero__arrow {
	flex: 0 0 auto;
}

/* Measured: bottom-right of the hero, 21px in from the right edge. */
.hero__caption {
	position: absolute;
	z-index: 1;
	right: calc(21 * var(--u));
	bottom: calc(11 * var(--u));
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: calc(12 * var(--t));
	line-height: 1;
}

@media (max-width: 767px) {

	/*
	 * No approved mobile reference exists. The photograph keeps its own
	 * area with the people visible, and the copy sits on solid navy
	 * below it, so faces are never buried under text. The image is
	 * pulled right so the baked-in navy wash is cropped away rather
	 * than showing as a dead band.
	 */
	.hero {
		aspect-ratio: auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.hero__media {
		position: static;
		order: -1;
	}

	.hero__media img {
		height: auto;
		aspect-ratio: 3 / 2;
		object-position: 78% center;
	}

	.hero__inner {
		position: static;
		height: auto;
		max-width: none;
		padding: 28px var(--hero-gutter) 34px;
		left: auto;
		transform: none;
		width: auto;
	}

	.hero__title {
		font-size: 34px;
		margin-bottom: 16px;
	}

	/* The desktop line breaks must not survive at narrow widths. */
	.hero__title br {
		display: none;
	}

	.hero__lede {
		font-size: 18px;
		max-width: none;
		margin-bottom: 20px;
	}

	.hero__cta {
		height: 46px;
		font-size: 16px;
	}

	.hero__caption {
		position: static;
		padding: 6px var(--hero-gutter) 0;
		text-align: right;
		color: rgba(255, 255, 255, 0.75);
	}
}