/* ==========================================================================
   DRS ENTERPRISE - Design System
   One file, no preprocessor, no build step. Every colour, size, and spacing
   value used anywhere in the theme is declared as a custom property here.
   ========================================================================== */

:root {
	/* --- Core palette ---------------------------------------------------- */
	--c-navy:       #0A2540;
	--c-navy-deep:  #06182B;
	--c-navy-soft:  #16385C;
	--c-blue:       #0B5CD5;
	--c-blue-dark:  #0847A6;
	--c-azure:      #2A7FF0;
	--c-teal:       #0E8F8F;

	/* --- Neutrals -------------------------------------------------------- */
	--c-ink:        #0D1826;
	--c-slate:      #4A5B6E;
	--c-body:       #45566A;
	--c-muted:      #6B7C90;
	--c-mist:       #F5F8FC;
	--c-mist-2:     #EAF1F9;
	--c-line:       #E1E8F0;
	--c-line-soft:  #EDF2F8;
	--c-white:      #FFFFFF;

	/* --- Functional ------------------------------------------------------ */
	--c-success:    #147553;
	--c-success-bg: #E8F6F0;
	--c-danger:     #B42318;
	--c-danger-bg:  #FDF0EF;

	/* --- Typography ------------------------------------------------------ */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--fs-eyebrow: .75rem;
	--fs-xs:      .8125rem;
	--fs-sm:      .9375rem;
	--fs-base:    1.0625rem;
	--fs-lg:      1.1875rem;
	--fs-xl:      1.375rem;
	--fs-2xl:     1.75rem;
	--fs-3xl:     2.125rem;
	--fs-4xl:     2.75rem;
	--fs-5xl:     3.5rem;

	/* --- Space ----------------------------------------------------------- */
	--sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
	--sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
	--sp-9: 4rem;    --sp-10: 5rem;   --sp-11: 6.5rem; --sp-12: 8rem;

	/* --- Shape, depth, motion -------------------------------------------- */
	--r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

	--shadow-xs:  0 1px 2px rgba(10, 37, 64, .06);
	--shadow-sm:  0 2px 8px rgba(10, 37, 64, .07);
	--shadow-md:  0 8px 24px rgba(10, 37, 64, .09);
	--shadow-lg:  0 20px 48px rgba(10, 37, 64, .12);
	--shadow-nav: 0 6px 28px rgba(10, 37, 64, .09);

	--ease: cubic-bezier(.22, .61, .36, 1);
	--dur: .2s;

	--wrap: 1180px;
	--wrap-narrow: 748px;
	--gutter: clamp(1.25rem, 5vw, 3rem);
	--header-h: 84px;
}

@media (max-width: 900px) {
	:root {
		--fs-5xl: 2.375rem;
		--fs-4xl: 2rem;
		--fs-3xl: 1.6875rem;
		--header-h: 68px;
	}
}

/* ==========================================================================
   Accessibility utilities

   These live here rather than in style.css because style.css is never
   enqueued - inc/enqueue.php loads this file only. A .screen-reader-text rule
   that is not actually served leaves the skip link and the nav-toggle label
   rendering as visible text.
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.screen-reader-text:focus {
	background-color: #fff;
	clip-path: none;
	color: #0b5cd5;
	display: block;
	font-size: .875rem;
	font-weight: 600;
	height: auto;
	left: 1rem;
	line-height: normal;
	padding: .9rem 1.4rem;
	text-decoration: none;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

/* The drawer sits off-canvas at translateX(100%), which would otherwise widen
   the document on every screen below the nav breakpoint. */
html, body { overflow-x: clip; max-width: 100%; }

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

body {
	margin: 0;
	background: var(--c-white);
	color: var(--c-body);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sp-4);
	color: var(--c-ink);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.018em;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4, .h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-4); }

a { color: var(--c-blue); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--c-blue-dark); }

:focus-visible {
	outline: 2px solid var(--c-azure);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

code, pre, kbd, samp { font-family: var(--font-mono); font-size: .875em; }

code {
	background: var(--c-mist-2);
	border-radius: var(--r-sm);
	padding: .12em .38em;
	color: var(--c-navy);
}

pre {
	background: var(--c-navy-deep);
	color: #DCE7F5;
	padding: var(--sp-5);
	border-radius: var(--r-lg);
	overflow-x: auto;
	line-height: 1.6;
}

pre code { background: none; color: inherit; padding: 0; }

hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-8) 0; }

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.band { padding-block: var(--sp-11); }
.band--tight { padding-block: var(--sp-9); }
.band--mist { background: var(--c-mist); }

.band--navy {
	background: var(--c-navy);
	color: rgba(255, 255, 255, .82);
}

.band--navy h1, .band--navy h2, .band--navy h3, .band--navy h4 { color: var(--c-white); }

/* :not(.btn) matters. `.band--navy a` (0,0,1,1) outspecifies `.btn--light`
   (0,0,1,0), so without it a light button in this band renders pale blue text
   on white - about 1.9:1 contrast, effectively unreadable. */
.band--navy a:not(.btn) { color: #9CCBFF; }

@media (max-width: 900px) {
	.band { padding-block: var(--sp-9); }
	.band--tight { padding-block: var(--sp-7); }
}

/* grid-auto-rows: 1fr equalises rows against each other, not just cards within
   a row. Without it a 2x2 whose second row happens to be shorter leaves the
   four cards at two different heights, which is exactly the kind of near-miss
   that reads as sloppy rather than as deliberate. */
.grid {
	display: grid;
	gap: var(--sp-6);
	grid-auto-rows: 1fr;
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--tight { gap: var(--sp-4); }

@media (max-width: 980px) {
	.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Type helpers
   ========================================================================== */

.eyebrow {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.eyebrow--accent { color: var(--c-blue); }
.eyebrow--light { color: #8FC2FF; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

.lede {
	font-size: var(--fs-lg);
	line-height: 1.6;
	color: var(--c-slate);
}

/* Centred is the default and the rule: every section on the front page is a
   centred head over an even grid. Mixing left- and centre-aligned heads across
   one page is what made the earlier layout read as unbalanced. Interior pages
   use --left, where a single prose column makes left alignment correct. */
.section-head {
	max-width: 46rem;
	margin: 0 auto var(--sp-8);
	text-align: center;
}

.section-head--left { margin-inline: 0; text-align: left; }
.section-head__title { margin-bottom: var(--sp-4); }

.section-head__lede {
	margin: 0;
	font-size: var(--fs-lg);
	line-height: 1.6;
	color: var(--c-slate);
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	color: var(--c-blue);
}

/* An icon inside an inline-flex link is a flex item, so it shrinks when the
   text beside it runs out of room - the arrow collapses from 16px to about 9px
   in a narrow card and reads as clipped. Icons are fixed-size by definition. */
.text-link svg,
.back-link svg,
.btn svg,
.social-links svg {
	flex-shrink: 0;
}

.text-link svg { transition: transform var(--dur) var(--ease); }
.text-link:hover svg { transform: translateX(3px); }

.back-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.back-link-wrap { margin-top: var(--sp-8); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: .82rem 1.45rem;
	border: 1px solid transparent;
	border-radius: var(--r-md);
	font-family: inherit;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
	background: var(--c-blue);
	border-color: var(--c-blue);
	color: var(--c-white);
	box-shadow: var(--shadow-xs);
}

.btn--primary:hover {
	background: var(--c-blue-dark);
	border-color: var(--c-blue-dark);
	color: var(--c-white);
	box-shadow: var(--shadow-sm);
}

.btn--ghost {
	background: transparent;
	border-color: var(--c-line);
	color: var(--c-navy);
}

.btn--ghost:hover {
	border-color: var(--c-blue);
	color: var(--c-blue);
	background: var(--c-mist);
}

.btn--light {
	background: var(--c-white);
	border-color: var(--c-white);
	color: var(--c-navy);
}

.btn--light:hover { background: var(--c-mist-2); color: var(--c-navy); }

.btn--sm { padding: .6rem 1.05rem; font-size: var(--fs-xs); }
.btn--lg { padding: 1rem 1.85rem; font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--c-line-soft);
}

/* The frosted background is painted by a pseudo-element rather than by the
   header itself, and this is load-bearing: backdrop-filter makes an element a
   containing block for position:fixed descendants. With the filter on the
   header, the mobile drawer - which lives inside it - resolves top/bottom
   against the 68px header box instead of the viewport and collapses to a
   96px sliver. The pseudo-element has no descendants, so it can carry the
   filter harmlessly. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(12px);
}

/* Applied by theme.js once the page has scrolled, so the header separates from
   the hero without carrying a shadow at rest. */
.site-header.is-scrolled {
	box-shadow: var(--shadow-nav);
	border-bottom-color: transparent;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	min-height: var(--header-h);
}

/* Brand ------------------------------------------------------------------ */

.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	text-decoration: none;
	flex-shrink: 0;
}

.brand__mark { display: flex; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }

.brand__name {
	font-size: var(--fs-base);
	font-weight: 600;
	letter-spacing: -.015em;
	color: var(--c-ink);
}

.brand__role {
	font-family: var(--font-mono);
	font-size: .6875rem;
	letter-spacing: .04em;
	color: var(--c-muted);
}

.brand--white .brand__name { color: var(--c-white); }
.brand--white .brand__role { color: rgba(255, 255, 255, .6); }

@media (max-width: 480px) {
	.brand__role { display: none; }
}

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

.primary-nav > ul,
.primary-nav .menu {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav .menu-item { position: relative; }

.primary-nav .menu-item > a {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: .55rem .8rem;
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-slate);
	text-decoration: none;
	transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.primary-nav .menu-item > a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a {
	color: var(--c-navy);
	background: var(--c-mist);
}

.menu-item-caret {
	width: 7px;
	height: 7px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	opacity: .5;
	transition: transform var(--dur) var(--ease);
}

.primary-nav .menu-item-has-children:hover .menu-item-caret,
.primary-nav .menu-item-has-children.is-open .menu-item-caret {
	transform: rotate(225deg) translate(-3px, -3px);
}

/* Dropdown --------------------------------------------------------------- */

.primary-nav .sub-menu {
	position: absolute;
	top: calc(100% + .5rem);
	left: 0;
	z-index: 20;
	display: grid;
	gap: 2px;
	width: 22rem;
	margin: 0;
	padding: var(--sp-2);
	list-style: none;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-nav);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu,
.primary-nav .menu-item-has-children.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-nav .sub-menu a {
	display: block;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-md);
	text-decoration: none;
}

.primary-nav .sub-menu .menu-item-title {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-ink);
}

.menu-item-description {
	display: block;
	margin-top: 2px;
	font-size: var(--fs-xs);
	line-height: 1.45;
	color: var(--c-muted);
}

.primary-nav .sub-menu a:hover { background: var(--c-mist); }
.primary-nav .sub-menu a:hover .menu-item-title { color: var(--c-blue); }

/* Mega panel -------------------------------------------------------------
   Anchored to the header wrap, not to the menu item or the menu list. The
   panel is far wider than the "Capabilities" link, and the menu sits well
   right of centre, so anchoring anywhere inside the nav pushes the panel off
   the right edge of the viewport. Pinning it to the wrap and centring it
   inside the gutters means it fits at every width by construction. */

.site-header__inner { position: relative; }
.primary-nav .menu-item-mega { position: static; }

.mega-panel {
	position: absolute;
	top: calc(100% + .5rem);
	left: var(--gutter);
	right: var(--gutter);
	margin-inline: auto;
	z-index: 20;
	width: auto;
	max-width: 52rem;
	padding: var(--sp-6);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-nav);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.primary-nav .menu-item-mega:hover > .mega-panel,
.primary-nav .menu-item-mega:focus-within > .mega-panel,
.primary-nav .menu-item-mega.is-open > .mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega-panel__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-6);
}

.mega-panel__label {
	margin: 0 0 var(--sp-3);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--c-line-soft);
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.mega-panel__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }

.mega-panel__list a {
	display: block;
	padding: var(--sp-3);
	border-radius: var(--r-md);
	text-decoration: none;
}

.mega-panel__list a:hover { background: var(--c-mist); }
.mega-panel__list a:hover .menu-item-title { color: var(--c-blue); }

.mega-panel__list .menu-item-title {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-ink);
}

.mega-panel__foot {
	margin: var(--sp-5) 0 0;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-line-soft);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.mega-panel__foot a { text-decoration: none; }
.mega-panel__foot a:hover { text-decoration: underline; }

.header-cta { display: flex; align-items: center; gap: var(--sp-3); }
.primary-nav__mobile-cta { display: none; }

/* Mobile toggle ---------------------------------------------------------- */

.nav-toggle {
	display: none;
	position: relative;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	position: absolute;
	left: 50%;
	width: 18px;
	height: 1.8px;
	background: var(--c-navy);
	border-radius: 2px;
	transform: translateX(-50%);
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav-toggle__bars { top: 50%; margin-top: -.9px; }
.nav-toggle__bars::before { content: ""; top: -6px; }
.nav-toggle__bars::after { content: ""; top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

.nav-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(10, 37, 64, .38);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur) var(--ease), visibility var(--dur);
}

body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

@media (max-width: 1040px) {
	.nav-toggle { display: block; }
	.header-cta .btn { display: none; }

	.primary-nav {
		position: fixed;
		top: var(--header-h);
		right: 0;
		bottom: 0;
		z-index: 95;
		width: min(24rem, 88vw);
		padding: var(--sp-6) var(--sp-5) var(--sp-9);
		background: var(--c-white);
		border-left: 1px solid var(--c-line);
		box-shadow: var(--shadow-lg);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .26s var(--ease);
	}

	body.nav-open .primary-nav { transform: translateX(0); }

	.primary-nav > ul,
	.primary-nav .menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.primary-nav .menu-item > a {
		padding: var(--sp-4) var(--sp-3);
		font-size: var(--fs-base);
		border-radius: var(--r-md);
		justify-content: space-between;
	}

	.primary-nav .sub-menu {
		position: static;
		width: auto;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--c-line);
		border-radius: 0;
		margin: 0 0 var(--sp-3) var(--sp-3);
		padding: 0 0 0 var(--sp-2);
	}

	.primary-nav .menu-item-has-children.is-open > .sub-menu { display: grid; }
	.primary-nav__mobile-cta { display: block; margin-top: var(--sp-6); }

	/* In the drawer the mega panel is just a stacked list - three columns in a
	   24rem drawer would be unreadable. */
	.mega-panel {
		position: static;
		display: none;
		width: auto;
		max-width: none;
		margin-inline: 0;
		padding: 0 0 var(--sp-3) var(--sp-2);
		margin: 0 0 var(--sp-3) var(--sp-3);
		background: none;
		border: 0;
		border-left: 2px solid var(--c-line);
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.primary-nav .menu-item-mega.is-open > .mega-panel { display: block; }
	.mega-panel__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
	.mega-panel__foot { margin-top: var(--sp-4); padding-left: var(--sp-3); }
}

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

.hero {
	position: relative;
	padding-block: var(--sp-11) var(--sp-10);
	background:
		radial-gradient(60rem 32rem at 82% -14%, rgba(42, 127, 240, .12), transparent 62%),
		linear-gradient(180deg, var(--c-mist) 0%, var(--c-white) 78%);
	border-bottom: 1px solid var(--c-line-soft);
}

/* Single centred column. The previous two-column hero put a tall facts panel
   beside a short headline, so the two sides ended at different heights and the
   whole band looked lopsided. The facts now sit in the symmetric strip below. */
.hero__inner { text-align: center; }

.hero__body { max-width: 52rem; margin-inline: auto; }

.hero__title {
	margin-bottom: var(--sp-5);
	font-size: var(--fs-5xl);
	letter-spacing: -.03em;
	line-height: 1.08;
}

.hero__sub {
	max-width: 40rem;
	margin: 0 auto var(--sp-7);
	font-size: var(--fs-lg);
	line-height: 1.62;
	color: var(--c-slate);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	justify-content: center;
}

/* Four equal cells, ruled between. Symmetric by construction. */
.cred-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: var(--sp-10);
	border-top: 1px solid var(--c-line);
}

.cred-strip__item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: var(--sp-2);
	padding: var(--sp-6) var(--sp-4) 0;
	border-right: 1px solid var(--c-line);
}

.cred-strip__item:last-child { border-right: 0; }

.cred-strip__value {
	font-size: var(--fs-xl);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.25;
	color: var(--c-navy);
}

.cred-strip__label {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	line-height: 1.45;
	color: var(--c-muted);
}

@media (max-width: 860px) {
	.cred-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cred-strip__item:nth-child(2n) { border-right: 0; }
	.cred-strip__item:nth-child(-n+2) { border-bottom: 1px solid var(--c-line); padding-bottom: var(--sp-5); }
}

@media (max-width: 960px) {
	.hero { padding-block: var(--sp-9) var(--sp-8); }
}

@media (max-width: 520px) {
	.cred-strip { grid-template-columns: minmax(0, 1fr); }
	.cred-strip__item {
		border-right: 0;
		border-bottom: 1px solid var(--c-line);
		padding-bottom: var(--sp-5);
	}
	.cred-strip__item:last-child { border-bottom: 0; }
}

/* ==========================================================================
   Page hero
   ========================================================================== */

.page-hero {
	padding-block: var(--sp-10) var(--sp-8);
	background: linear-gradient(180deg, var(--c-mist) 0%, var(--c-white) 100%);
	border-bottom: 1px solid var(--c-line-soft);
}

.page-hero__title {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-4xl);
	letter-spacing: -.028em;
}

.page-hero__lede {
	margin: 0;
	font-size: var(--fs-lg);
	line-height: 1.6;
	color: var(--c-slate);
}

.page-hero--article .post-meta { margin-top: var(--sp-4); }

@media (max-width: 900px) {
	.page-hero { padding-block: var(--sp-8) var(--sp-7); }
}

/* ==========================================================================
   Cards
   ========================================================================== */

/* Cards stretch to the tallest in their row by default (grid), and the flex
   column keeps their internal spacing even rather than top-heavy. */
.card {
	display: flex;
	flex-direction: column;
	padding: var(--sp-6);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}

.card--flat { box-shadow: none; }
.card--center { align-items: center; text-align: center; }
.card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.card p:last-child { margin-bottom: 0; }

.card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--sp-4);
	background: var(--c-mist-2);
	border-radius: var(--r-md);
	color: var(--c-blue);
}

/* Capability card -------------------------------------------------------- */

.cap-card {
	display: flex;
	flex-direction: column;
	padding: var(--sp-7);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.cap-card:hover {
	border-color: rgba(11, 92, 213, .35);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.cap-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: var(--sp-5);
	background: linear-gradient(140deg, var(--c-blue), var(--c-azure));
	border-radius: var(--r-md);
	color: var(--c-white);
}

.cap-card__title { margin-bottom: var(--sp-2); font-size: var(--fs-xl); }
.cap-card__title a { color: inherit; text-decoration: none; }
.cap-card__title a:hover { color: var(--c-blue); }

.cap-card__kicker {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-teal);
}

.cap-card__summary { color: var(--c-body); }
.cap-card .text-link { margin-top: auto; padding-top: var(--sp-4); }

/* Group card (front page) ------------------------------------------------ */

.group-card {
	display: flex;
	flex-direction: column;
	padding: var(--sp-7);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
}

.group-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: var(--sp-5);
	background: linear-gradient(140deg, var(--c-blue), var(--c-azure));
	border-radius: var(--r-md);
	color: var(--c-white);
}

.group-card__title { margin-bottom: var(--sp-3); font-size: var(--fs-xl); }
.group-card__summary { margin-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--c-body); }

.group-card__list {
	display: grid;
	gap: 1px;
	margin: 0 0 var(--sp-2);
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--c-line-soft);
}

.group-card__list li { border-bottom: 1px solid var(--c-line-soft); }

.group-card__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-3) 0;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-ink);
	text-decoration: none;
}

.group-card__list a:hover { color: var(--c-blue); }
.group-card__list svg { flex-shrink: 0; color: var(--c-muted); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.group-card__list a:hover svg { color: var(--c-blue); transform: translateX(3px); }

/* Capability row (hub) --------------------------------------------------- */

.group-head {
	max-width: 46rem;
	margin: 0 auto var(--sp-7);
	text-align: center;
}

.group-head__title { margin-bottom: var(--sp-3); font-size: var(--fs-2xl); }
.group-head__summary { margin: 0; font-size: var(--fs-base); color: var(--c-slate); }

.cap-list { display: grid; gap: var(--sp-6); }

.cap-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: var(--sp-7);
	padding: var(--sp-7);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
}

.cap-row__head { display: flex; gap: var(--sp-4); align-items: flex-start; }

.cap-row__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	background: linear-gradient(140deg, var(--c-blue), var(--c-azure));
	border-radius: var(--r-md);
	color: var(--c-white);
}

.cap-row__title { margin-bottom: var(--sp-2); font-size: var(--fs-xl); }
.cap-row__title a { color: inherit; text-decoration: none; }
.cap-row__title a:hover { color: var(--c-blue); }

.cap-row__kicker { margin: 0; font-size: var(--fs-sm); color: var(--c-teal); }
.cap-row__summary { color: var(--c-body); }

@media (max-width: 860px) {
	.cap-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-6); }
}

/* Engagement model card -------------------------------------------------- */

.model-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--sp-7);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
}

.model-card--feature {
	border-color: var(--c-blue);
	box-shadow: var(--shadow-md);
}

.model-card__flag {
	position: absolute;
	top: -.75rem;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	padding: .25rem .7rem;
	background: var(--c-blue);
	border-radius: var(--r-pill);
	font-family: var(--font-mono);
	font-size: .6875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-white);
}

.model-card h3 { margin-bottom: var(--sp-1); }

.model-card__for {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-teal);
}

.model-card .checklist { margin-top: auto; padding-top: var(--sp-4); }

/* Post card -------------------------------------------------------------- */

.post-card {
	display: flex;
	flex-direction: column;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.post-card:hover {
	border-color: rgba(11, 92, 213, .3);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.post-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }

.post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--sp-5) var(--sp-6) var(--sp-6);
}

.post-card__cat {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-teal);
}

.post-card__title { margin-bottom: var(--sp-3); font-size: var(--fs-lg); }
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a:hover { color: var(--c-blue); }

.post-card__excerpt { font-size: var(--fs-sm); color: var(--c-body); }
.post-card .post-meta { margin-top: auto; padding-top: var(--sp-4); }

.post-meta {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.post-meta__sep { opacity: .5; }

/* ==========================================================================
   Feature grid (used on the navy band)
   ========================================================================== */

.feature-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-5);
}

.feature-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--sp-6);
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--r-lg);
}

.feature-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--sp-4);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .09);
	color: #8FC2FF;
}

.feature-card h3 { margin-bottom: var(--sp-2); font-size: var(--fs-base); }
.feature-card p { margin: 0; font-size: var(--fs-sm); color: rgba(255, 255, 255, .72); }

.band-actions { margin-top: var(--sp-8); text-align: center; }

@media (max-width: 980px) {
	.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.feature-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Competency cards
   ========================================================================== */

.stack-card {
	display: flex;
	flex-direction: column;
	padding: var(--sp-6) var(--sp-7);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}

.stack-card__head {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-5);
}

.stack-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	background: var(--c-mist-2);
	border-radius: var(--r-md);
	color: var(--c-blue);
}

.stack-card__head h3 { margin: 0; font-size: var(--fs-base); }

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tag-list li {
	padding: .3rem .65rem;
	background: var(--c-mist);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-sm);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	line-height: 1.4;
	color: var(--c-slate);
}

/* ==========================================================================
   Process steps
   ========================================================================== */

.steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-6);
}

.step { text-align: center; }

.step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: var(--sp-4);
	border-radius: 50%;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--c-blue);
}

.step h3 { margin-bottom: var(--sp-2); font-size: var(--fs-base); }
.step p { margin: 0; font-size: var(--fs-sm); }

@media (max-width: 900px) {
	.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); }
}

@media (max-width: 480px) {
	.steps { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Lists, callouts, tables
   ========================================================================== */

.checklist { margin: 0 0 var(--sp-4); padding: 0; list-style: none; display: grid; gap: var(--sp-3); }

.checklist li {
	position: relative;
	padding-left: 1.75rem;
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .34em;
	width: 1.05rem;
	height: 1.05rem;
	background: var(--c-mist-2);
	border-radius: 50%;
}

.checklist li::after {
	content: "";
	position: absolute;
	left: .3rem;
	top: .62em;
	width: .42rem;
	height: .22rem;
	border-left: 1.7px solid var(--c-blue);
	border-bottom: 1.7px solid var(--c-blue);
	transform: rotate(-45deg);
}

.checklist--sm li { font-size: var(--fs-xs); }

.link-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-4); }

.link-list li {
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--c-line-soft);
}

.link-list a { font-weight: 600; text-decoration: none; }
.link-list a:hover { text-decoration: underline; }
.link-list span { display: block; font-size: var(--fs-sm); color: var(--c-muted); }

.step-list { margin: 0; padding-left: 1.15rem; display: grid; gap: var(--sp-3); }
.step-list li { font-size: var(--fs-sm); line-height: 1.55; }

.callout {
	padding: var(--sp-6);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-left: 3px solid var(--c-blue);
	border-radius: var(--r-md);
}

/* Constrained to the same measure as the section head above it, so the two
   share a centre line instead of the callout spilling wider than its heading. */
.callout--wide {
	max-width: 52rem;
	margin: var(--sp-8) auto 0;
	text-align: center;
	border-left: 0;
	border-top: 3px solid var(--c-blue);
}

.callout p { margin: 0; font-size: var(--fs-lg); line-height: 1.6; color: var(--c-slate); }

.table-scroll { overflow-x: auto; margin-bottom: var(--sp-6); }

.data-table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.data-table th,
.data-table td {
	padding: var(--sp-4);
	text-align: left;
	border-bottom: 1px solid var(--c-line);
	vertical-align: top;
}

.data-table th {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--c-muted);
	font-weight: 500;
}

.stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--sp-5);
	margin-bottom: var(--sp-6);
}

.stat {
	padding: var(--sp-5);
	background: var(--c-mist);
	border-radius: var(--r-lg);
	text-align: center;
}

.stat__value {
	display: block;
	font-size: var(--fs-3xl);
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--c-navy);
}

.stat__label { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-muted); }

/* FAQ -------------------------------------------------------------------- */

.faq { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }

.faq__item {
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	overflow: hidden;
}

.faq__q {
	padding: var(--sp-4) var(--sp-5);
	font-weight: 600;
	color: var(--c-ink);
	cursor: pointer;
	list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; float: right; color: var(--c-blue); font-weight: 400; }
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a { padding: 0 var(--sp-5) var(--sp-5); }
.faq__a p { margin: 0; font-size: var(--fs-sm); }

/* ==========================================================================
   Prose
   ========================================================================== */

.prose { font-size: var(--fs-base); line-height: 1.72; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { margin-top: var(--sp-8); font-size: var(--fs-2xl); }
.prose h3 { margin-top: var(--sp-7); font-size: var(--fs-xl); }
.prose h4 { margin-top: var(--sp-6); }
.prose ul, .prose ol { margin: 0 0 var(--sp-5); padding-left: 1.35rem; }
.prose li { margin-bottom: var(--sp-2); }
.prose img { border-radius: var(--r-lg); margin-block: var(--sp-6); }

.prose blockquote {
	margin: var(--sp-7) 0;
	padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
	border-left: 3px solid var(--c-blue);
	font-size: var(--fs-lg);
	line-height: 1.6;
	color: var(--c-slate);
}

.prose blockquote p:last-child { margin-bottom: 0; }
.prose--sm { font-size: var(--fs-sm); }

.prose figure { margin: var(--sp-7) 0; }
.prose figcaption { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-muted); text-align: center; }

/* ==========================================================================
   Article layout
   ========================================================================== */

.article-layout {
	display: grid;
	grid-template-columns: minmax(0, var(--wrap-narrow)) minmax(0, 20rem);
	gap: var(--sp-9);
	align-items: start;
}

.article-media { margin: 0 0 var(--sp-8); }
.article-media img { border-radius: var(--r-xl); width: 100%; }

.article-sidebar { position: sticky; top: calc(var(--header-h) + var(--sp-5)); display: grid; gap: var(--sp-5); }

.widget {
	padding: var(--sp-6);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}

.widget--cta { background: var(--c-mist); border-color: var(--c-mist-2); }
.widget-title { margin-bottom: var(--sp-3); font-size: var(--fs-base); }
.widget p { font-size: var(--fs-sm); }
.widget .menu { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.widget .menu a { font-size: var(--fs-sm); font-weight: 500; text-decoration: none; }
.widget .menu a:hover { text-decoration: underline; }
.widget .btn { margin-top: var(--sp-2); }

.fact-list { display: grid; gap: var(--sp-4); margin: 0 0 var(--sp-5); }
.fact-list > div { display: grid; gap: 2px; }

.fact-list dt {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.fact-list dd { margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink); }

.profile-photo { margin: 0; }
.profile-photo img { border-radius: var(--r-xl); width: 100%; }

@media (max-width: 1040px) {
	.article-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
	.article-sidebar { position: static; }
}

/* Post navigation -------------------------------------------------------- */

.post-nav { border-top: 1px solid var(--c-line); padding-block: var(--sp-7); }

.post-nav__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-5);
}

.post-nav__link {
	display: grid;
	gap: var(--sp-1);
	padding: var(--sp-5);
	background: var(--c-mist);
	border-radius: var(--r-lg);
	text-decoration: none;
}

.post-nav__link:hover { background: var(--c-mist-2); }
.post-nav__link--next { text-align: right; }

.post-nav__label {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.post-nav__title { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }

@media (max-width: 640px) {
	.post-nav__inner { grid-template-columns: minmax(0, 1fr); }
	.post-nav__link--next { text-align: left; }
}

/* ==========================================================================
   Forms
   ========================================================================== */

.field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }

@media (max-width: 640px) {
	.field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

.field label,
.enquiry-form label {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--c-ink);
}

.req { color: var(--c-blue); }

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea,
.search-form__input {
	width: 100%;
	padding: .78rem .95rem;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	font-family: inherit;
	font-size: var(--fs-sm);
	color: var(--c-ink);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--c-blue);
	box-shadow: 0 0 0 3px rgba(11, 92, 213, .14);
}

.field textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }

.field--submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
	margin-bottom: 0;
}

.field__note { font-size: var(--fs-xs); color: var(--c-muted); }

/* The honeypot has to be genuinely invisible to a person but present in the
   DOM for a bot to find. Nothing here removes it from the accessibility tree
   that aria-hidden on the wrapper does not already handle. */
.hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.notice-card {
	padding: var(--sp-5) var(--sp-6);
	margin-bottom: var(--sp-6);
	border-radius: var(--r-lg);
	border: 1px solid;
}

.notice-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.notice-card p:last-child, .notice-card ul:last-child { margin-bottom: 0; }
.notice-card ul { margin: 0; padding-left: 1.2rem; font-size: var(--fs-sm); }

.notice-card--ok {
	background: var(--c-success-bg);
	border-color: rgba(20, 117, 83, .28);
}

.notice-card--ok h3 { color: var(--c-success); }

.notice-card--error {
	background: var(--c-danger-bg);
	border-color: rgba(180, 35, 24, .26);
}

.notice-card--error h3 { color: var(--c-danger); }

/* Search ----------------------------------------------------------------- */

.search-form__control { position: relative; display: flex; gap: var(--sp-3); }
.search-form__icon { position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--c-muted); }
.search-form__input { padding-left: 2.85rem; }
.search-again { margin-bottom: var(--sp-8); max-width: 34rem; }

/* Contact layout --------------------------------------------------------- */

.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--sp-9);
	align-items: start;
}

.contact-promise {
	padding: var(--sp-4) var(--sp-5);
	margin-bottom: var(--sp-7);
	background: var(--c-mist);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	color: var(--c-slate);
}

.contact-aside { display: grid; gap: var(--sp-5); }
.contact-aside .text-link { align-items: center; }

@media (max-width: 960px) {
	.contact-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	padding-block: var(--sp-9) var(--sp-7);
	background: var(--c-navy-deep);
	color: rgba(255, 255, 255, .62);
	font-size: var(--fs-sm);
}

.site-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr);
	gap: var(--sp-9);
	padding-bottom: var(--sp-8);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.site-footer__blurb { max-width: 26rem; margin-top: var(--sp-5); line-height: 1.6; }

.site-footer__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-7);
}

.site-footer__heading {
	margin-bottom: var(--sp-4);
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

.site-footer .menu { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.site-footer .menu a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.site-footer .menu a:hover { color: var(--c-white); text-decoration: underline; }

.social-links { display: flex; gap: var(--sp-3); margin: var(--sp-5) 0 0; padding: 0; list-style: none; }

.social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: rgba(255, 255, 255, .07);
	border-radius: var(--r-md);
	color: rgba(255, 255, 255, .8);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.social-links a:hover { background: rgba(255, 255, 255, .14); color: var(--c-white); }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-top: var(--sp-6);
	font-size: var(--fs-xs);
}

.site-footer__copy { margin: 0; color: rgba(255, 255, 255, .45); }

.menu--legal { display: flex !important; gap: var(--sp-5); }
.menu--legal a { color: rgba(255, 255, 255, .55); }

@media (max-width: 860px) {
	.site-footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
}

@media (max-width: 520px) {
	.site-footer__nav { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Pagination, empty states, misc
   ========================================================================== */

.pagination { margin-top: var(--sp-8); }

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
	justify-content: center;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: .7rem;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--c-slate);
}

.page-numbers:hover { border-color: var(--c-blue); color: var(--c-blue); }

.page-numbers.current {
	background: var(--c-navy);
	border-color: var(--c-navy);
	color: var(--c-white);
}

.page-numbers.dots { border-color: transparent; }

.page-links { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); font-size: var(--fs-sm); }

.empty-state {
	max-width: 34rem;
	padding: var(--sp-9) 0;
	text-align: center;
	margin-inline: auto;
}

.empty-state h2 { font-size: var(--fs-2xl); }

/* Block editor alignment support ----------------------------------------- */

.alignwide { width: min(100%, 62rem); margin-inline: auto; }
.alignfull { width: 100%; }
.aligncenter { margin-inline: auto; text-align: center; }
.alignleft { float: left; margin: 0 var(--sp-5) var(--sp-4) 0; }
.alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-5); }

.has-navy-color { color: var(--c-navy); }
.has-blue-color { color: var(--c-blue); }
.has-teal-color { color: var(--c-teal); }
.has-slate-color { color: var(--c-slate); }
.has-navy-background-color { background-color: var(--c-navy); }
.has-blue-background-color { background-color: var(--c-blue); }
.has-mist-background-color { background-color: var(--c-mist); }
.has-white-background-color { background-color: var(--c-white); }

/* Print ------------------------------------------------------------------ */

@media print {
	.site-header,
	.nav-scrim,
	.site-footer,
	.article-sidebar,
	.post-nav,
	.enquiry-form { display: none !important; }

	body { font-size: 11pt; color: #000; }
	.band, .page-hero { padding-block: 0; background: none; border: 0; }
	a { text-decoration: underline; color: #000; }
	.article-layout { display: block; }
}