/* ==========================================================================
   Immersion Consulting — page components (mobile-first)
   Base rules target small screens; @media (min-width) layers add layout for
   wider viewports. Breakpoints: 36em (576) · 48em (768) · 62em (992) · 75em (1200).
   Tokens: one light palette on :root. The theme is light-only (ADR-030): no
   colour-scheme media query anywhere, and color-scheme: only light keeps a dark
   OS, and browsers that force-darken pages, from repainting it. Everything is
   prefixed imm- so plugin CSS (Bootstrap-style .card/.btn/.nav) can't collide.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
	--imm-navy: #0b1a2b;
	--imm-navy-2: #002857;
	--imm-navy-panel: #12273f; /* navy OBJECTS mid-page (ADR-032): the frame's hue a notch lighter, 15:1 on white instead of 17.5:1 */   /* the logo's navy: text-level brand accents, small fills — never a band */
	--imm-steel: #3d6a97;
	--imm-red: #c1272d;
	--imm-red-ink: #a31f25;
	/* Fill behind WHITE text (buttons, contact band): dark enough for AA. */
	--imm-red-fill: #c1272d;
	--imm-red-fill-hover: #a31f25;
	--imm-ground: #f4f6f9;
	--imm-paper: #ffffff;
	--imm-ink: #16202b;
	--imm-ink-2: #3b4653;
	--imm-muted: #5b6672;
	--imm-line: #d9dee5;
	--imm-line-soft: #e8ecf1;
	--imm-chip: #eef1f6;
	--imm-focus: #3d6a97;
	--imm-shadow: 0 12px 32px rgba(11, 26, 43, .12);
	--imm-brand-word: var(--imm-navy-2);
	--imm-outline: var(--imm-navy-2);
	--imm-tile-icon: var(--imm-navy-2);
	--imm-display: var(--wp--preset--font-family--roboto-condensed, "Roboto Condensed", Roboto, "Arial Narrow", Arial, sans-serif);
	--imm-body: var(--wp--preset--font-family--roboto, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
	--imm-mark: var(--wp--preset--font-family--nunito-sans, "Nunito Sans", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif); /* the customer names only (ADR-035) */
	--imm-r: 6px;          /* buttons, chips */
	--imm-r-card: 8px;     /* cards, tiles */
	--imm-r-panel: 14px;   /* large contained surfaces (the vehicles panel): radius scales with size */
	--imm-shadow-sm: 0 1px 2px rgba(11, 26, 43, .06), 0 8px 24px rgba(11, 26, 43, .08);
	/* Elevation: every card-like surface uses these, so they lift the same way. Rest = a featherweight
	   two-part ambient shadow (a tight contact shadow + a soft spread) that sets a surface just above
	   the page; hover = the spread blooms as the surface rises; press = back down to the contact
	   shadow. One easing (fast out, soft landing) and one duration for all of it. */
	--imm-elev-rest: 0 1px 2px rgba(11, 26, 43, .06), 0 2px 8px -2px rgba(11, 26, 43, .10);
	--imm-elev-hover: 0 2px 4px rgba(11, 26, 43, .07), 0 10px 22px -8px rgba(11, 26, 43, .20);
	--imm-elev-press: 0 1px 2px rgba(11, 26, 43, .09);
	--imm-ease-lift: cubic-bezier(.2, .8, .2, 1);
	--imm-dur-lift: .28s;
	--imm-glow: 0 10px 28px color-mix(in srgb, var(--imm-red-fill) 38%, transparent);
	--imm-grad-accent: linear-gradient(135deg, var(--imm-steel), var(--imm-red));
	--imm-gutter: 1.25rem;
	--imm-nav-h: 64px;
	--imm-topbar-h: 36px;  /* fixed, single row, so the sticky offset below is exact without JS */
	/* The SDVOSB strip: white with dark text (ADR-029). Then text on the navy bands and on the
	   red/steel fills, and shadows. */
	--imm-sdvosb-ground: #ffffff;
	--imm-sdvosb-ink: #16202b;
	--imm-sdvosb-muted: #3b4653;
	--imm-on-navy: #ffffff;
	--imm-on-navy-muted: #b9c4d6;
	--imm-grid-line: rgba(255, 255, 255, .035);
	--imm-on-fill: #ffffff;                 /* text on --imm-red-fill / steel fills */
	--imm-on-navy-link: #9dc0e6;            /* links and active tab rules on navy */
	--imm-on-navy-hover: #e8eaee;           /* the white button's hover fill on navy */
	--imm-shade: #000000;                   /* shadows only */
	/* Light only (ADR-030). "only" also opts out of browsers' automatic dark theming. */
	color-scheme: only light;
}

/* ---------- WordPress chrome neutralised ---------- */
:is(body.imm, body.editor-styles-wrapper) {
	margin: 0;
	background: var(--imm-ground);
	color: var(--imm-ink);
	font: 400 1.0625rem/1.6 var(--imm-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

:is(body.imm, body.editor-styles-wrapper) .wp-site-blocks > * + *,
:is(body.imm, body.editor-styles-wrapper) .imm-main > * + * {
	margin-block-start: 0;
}

:is(body.imm, body.editor-styles-wrapper) .wp-site-blocks {
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

/* Desktop reading size (ADR-037): the whole type system, sized in rem, steps up on wide screens the
   way government sites set it (GOV.UK 19px body, USWDS 17–18px): 17px-based from 62em, 18px-based
   from 75em, so body copy reads at ~19px and section headings at ~40px while every proportion stays
   as designed. Phones keep 16px. Media queries in em are unaffected (they use the initial 16px). */
@media (min-width: 62em) {
	html {
		font-size: 106.25%;
	}
}

@media (min-width: 75em) {
	html {
		font-size: 112.5%;
	}
}

/* ---------- base (scoped to our components) ---------- */
:where(.imm-section, .imm-topbar, .imm-nav, .imm-footer),
:where(.imm-section, .imm-topbar, .imm-nav, .imm-footer) *,
:where(.imm-section, .imm-topbar, .imm-nav, .imm-footer) *::before,
:where(.imm-section, .imm-topbar, .imm-nav, .imm-footer) *::after {
	box-sizing: border-box;
}

:where(.imm-section, .imm-topbar, .imm-nav, .imm-footer) :is(h1, h2, h3, h4) {
	margin: 0;
	font-family: var(--imm-body);
	font-weight: 700;
	text-transform: none;
	line-height: 1.1;
	letter-spacing: -.015em;
	text-wrap: balance;
}

:where(.imm-section, .imm-topbar, .imm-nav, .imm-footer) p {
	margin: 0;
	text-wrap: pretty;
}

:where(.imm-section, .imm-topbar, .imm-nav, .imm-footer) a {
	color: var(--imm-steel);
}

:where(.imm-section, .imm-topbar, .imm-nav, .imm-footer) :is(img, svg) {
	display: block;
	max-width: 100%;
}

:where(.imm-section, .imm-topbar, .imm-nav, .imm-footer) img {
	height: auto;
}

:where(.imm-section, .imm-nav) button {
	font: inherit;
	color: inherit;
}

/* Rings for keyboard focus only. Core and the parent theme also outline plain :focus, which shows a
   square after a tap on the phone menu (the overlay focuses its first link) and a tab-like box after a
   mouse click on a nav link; a pointer never needs the ring. */
:is(body.imm, body.editor-styles-wrapper) :focus:not(:focus-visible) {
	outline: none;
}

:is(body.imm, body.editor-styles-wrapper) :focus-visible {
	outline: 3px solid var(--imm-focus);
	outline-offset: 2px;
}

.imm-wrap {
	width: min(1200px, 100% - 2 * var(--imm-gutter));
	margin-inline: auto;
}

.imm-eyebrow {
	font-family: var(--imm-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .78rem;
	color: var(--imm-steel);
	margin-bottom: .6rem;
}

.imm-sec {
	padding-block: clamp(2.75rem, 6vw, 4.75rem);
}

/* Editorial section head: left-aligned eyebrow, headline, short lede. */
.imm-sec-head {
	text-align: left;
	max-width: 44rem;
	margin: 0 0 clamp(1.75rem, 3vw, 2.75rem);
}

.imm-sec-head h2 {
	font-size: clamp(1.6rem, 1.8vw + .8rem, 2.25rem);
	line-height: 1.2;
	color: var(--imm-ink);
}

.imm-sec-head p:not(.imm-eyebrow) {
	margin-top: .9rem;
	color: var(--imm-muted);
	max-width: 60ch;
	font-size: 1.125rem;
	line-height: 1.55;
}

:is(body.imm, body.editor-styles-wrapper) [id] {
	scroll-margin-top: calc(var(--imm-nav-h) + 12px);
}

.imm-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- buttons ---------- */
.imm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 44px; /* comfortable touch target */
	padding: .8rem 1.3rem;
	border-radius: var(--imm-r);
	border: 1.5px solid transparent;
	font-family: var(--imm-body);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
	text-decoration: none;
	cursor: pointer;
	line-height: 1;
	background: none;
	transition: background .15s, color .15s, border-color .15s;
}

.imm-btn svg {
	width: 1.05em;
	height: 1.05em;
	flex: none;
}

.imm-btn-red {
	background: var(--imm-red-fill);
	color: var(--imm-on-fill);
	border-color: var(--imm-red-fill);
}

.imm-btn-red:hover {
	background: var(--imm-red-fill-hover);
	border-color: var(--imm-red-fill-hover);
	color: var(--imm-on-fill);
}

.imm-btn-outline {
	background: transparent;
	color: var(--imm-outline);
	border-color: var(--imm-outline);
}

.imm-btn-outline:hover {
	background: var(--imm-outline);
	color: var(--imm-on-fill);
}

.imm-btn-white {
	background: var(--imm-on-navy);
	color: var(--imm-navy);
	border-color: var(--imm-on-navy);
}

.imm-btn-white:hover {
	background: var(--imm-on-navy-hover);
	color: var(--imm-navy);
}

/* Chat controls only exist when a chat provider is present (body.imm-has-chat). */
body.imm:not(.imm-has-chat) [data-open-chat] {
	display: none;
}

/* ---------- top bar ---------- */
/* A light utility bar (ADR-032): with the white header it makes one light masthead, so the hero
   is the first navy a visitor meets instead of navy / white / navy stripes in the top 120px.
   The bar's rules read the on-navy roles; re-pointing them here re-colours every one of them. */
.imm-topbar {
	--imm-on-navy: var(--imm-ink);
	--imm-on-navy-muted: var(--imm-ink-2);
	--imm-focus: var(--imm-steel);
	background: var(--imm-ground);
	border-bottom: 1px solid var(--imm-line-soft);
	color: var(--imm-on-navy-muted);
	font-size: .75rem;
	font-family: var(--imm-display);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
}

.imm-topbar .imm-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: var(--imm-topbar-h);
	gap: 1rem;
	flex-wrap: nowrap;
	overflow: hidden;
}

.imm-topbar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: .9rem;
	align-items: center;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.imm-topbar li + li::before {
	content: "|";
	margin-right: .9rem;
	opacity: .45;
}

.imm-topbar a {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: var(--imm-topbar-h); /* the whole bar height is the hit target */
}

/* Icon-only links (LinkedIn, email): padded to a ~36px square target without moving the bar's
   right edge. */
.imm-topbar li:last-child a,
.imm-topbar a[aria-label] {
	padding-inline: .55rem;
}

.imm-topbar li:last-child a {
	margin-right: -.55rem;
}

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

.imm-topbar svg {
	width: 16px;
	height: 16px;
}

.imm-topbar__tagline {
	display: none;
}

@media (min-width: 62em) {
	.imm-topbar__tagline {
		display: block;
	}
}

/* ---------- sticky nav ---------- */
/* The header template part is the sticky element (a sticky child can't leave
   its parent's box). It sits at -topbar-height so the utility bar scrolls away
   and the nav stays. */
.imm-header,
.wp-block-template-part:has(> .imm-topbar) {
	position: sticky;
	top: calc(-1 * var(--imm-topbar-h));
	z-index: 30;
}

body.admin-bar .imm-header,
body.admin-bar .wp-block-template-part:has(> .imm-topbar) {
	top: calc(var(--wp-admin--admin-bar--height, 32px) - var(--imm-topbar-h));
}

.imm-nav {
	position: relative;
	background: var(--imm-paper);
	border-bottom: 1px solid var(--imm-line-soft);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--imm-shade) 2%, transparent);
	transition: box-shadow .2s, background-color .2s;
}

/* Once the utility bar has scrolled away the nav condenses: shorter, translucent, shadowed. */
.imm-nav.is-condensed {
	--imm-nav-h: 56px;
	box-shadow: 0 2px 16px color-mix(in srgb, var(--imm-navy) 8%, transparent);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.imm-nav.is-condensed {
		background: color-mix(in srgb, var(--imm-paper) 84%, transparent);
		-webkit-backdrop-filter: saturate(1.4) blur(12px);
		backdrop-filter: saturate(1.4) blur(12px);
	}
}

/* Scroll progress line (CSS scroll-driven animation; hidden where unsupported). */
.imm-nav__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--imm-red);
	transform-origin: 0 50%;
	transform: scaleX(0);
	pointer-events: none;
	display: none;
}

@supports (animation-timeline: scroll()) {
	.imm-nav__progress {
		display: block;
		animation: imm-progress linear both;
		animation-timeline: scroll(root);
	}
}

@keyframes imm-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.imm-nav .imm-wrap {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--imm-nav-h);
	position: relative;
	transition: min-height .2s;
}

.imm-brand {
	display: flex;
	align-items: center;
	gap: .75rem;
	text-decoration: none;
	color: var(--imm-ink);
	margin-right: auto;
	min-height: 44px;
}

.imm-brand__flag {
	width: 40px;
	height: 36px;
	flex: none;
	transition: width .2s, height .2s;
}

.imm-brand__logo {
	height: 42px;
	width: auto;
	transition: height .2s;
}

.imm-nav.is-condensed .imm-brand__logo {
	height: 34px;
}

.imm-nav.is-condensed .imm-brand__flag {
	width: 34px;
	height: 31px;
}

.imm-brand__word {
	font-family: var(--imm-body);
	font-weight: 700;
	text-transform: none;
	font-size: 1.3rem;
	line-height: .95;
	letter-spacing: .02em;
	color: var(--imm-brand-word);
}

.imm-brand__word small {
	display: block;
	font-size: .68rem;
	letter-spacing: .32em;
	color: var(--imm-red);
	font-weight: 600;
}

@media (min-width: 62em) {
	:root {
		--imm-nav-h: 84px; /* the official logo at 68px with air above and below (ADR-044) */
	}

	.imm-nav.is-condensed {
		--imm-nav-h: 64px;
	}

	.imm-nav .imm-wrap {
		gap: 1.5rem;
	}

	.imm-brand__flag {
		width: 44px;
		height: 40px;
	}

	.imm-brand__logo {
		height: 48px;
	}

	.imm-brand__word {
		font-size: 1.45rem;
	}

	.imm-brand__word small {
		font-size: .72rem;
	}

	}

/* ---------- hero ---------- */
/* No `isolation: isolate` here: with it, Chrome skips painting the absolutely
   positioned photo layer on first load. Layers are ordered by explicit z-index instead. */
.imm-hero {
	position: relative;
	background: var(--imm-navy);
	color: var(--imm-on-navy);
	--imm-focus: var(--imm-on-navy-link);
	overflow: hidden;
}

/* Mobile: a compact, full-width banner above the copy; explicit height prevents
   the Image block from shrinking its width when the height is capped. */
.imm-hero__media {
	position: relative;
	width: 100%;
	height: clamp(11rem, 50vw, 20rem);
	overflow: hidden;
	background: var(--imm-navy);
}

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

.imm-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	/* The same eased scrim, downwards: the photo eases into the navy behind the copy. */
	background: linear-gradient(
		180deg,
		transparent 50%,
		color-mix(in srgb, var(--imm-navy) 0.86%, transparent) 55%,
		color-mix(in srgb, var(--imm-navy) 5.79%, transparent) 60%,
		color-mix(in srgb, var(--imm-navy) 16.31%, transparent) 65%,
		color-mix(in srgb, var(--imm-navy) 31.74%, transparent) 70%,
		color-mix(in srgb, var(--imm-navy) 50.0%, transparent) 75%,
		color-mix(in srgb, var(--imm-navy) 68.26%, transparent) 80%,
		color-mix(in srgb, var(--imm-navy) 83.69%, transparent) 85%,
		color-mix(in srgb, var(--imm-navy) 94.21%, transparent) 90%,
		color-mix(in srgb, var(--imm-navy) 99.14%, transparent) 95%,
		var(--imm-navy) 100%
	);
	pointer-events: none;
}

.imm-hero__inner {
	padding-block: 1.5rem 2.5rem;
}

.imm-hero h1 {
	font-size: clamp(1.75rem, 4vw + .5rem, 3.25rem);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.1;
	color: var(--imm-on-navy);
	max-width: 18ch;
}

.imm-hero h1 em {
	font-style: normal;
	color: var(--imm-on-navy);
}

/* One-time entrance: copy fades up in sequence, photo drifts in slowly. Off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	.imm-hero__copy > * {
		animation: imm-fade-up .7s cubic-bezier(.22, .61, .36, 1) both;
	}

	.imm-hero__copy > :nth-child(2) { animation-delay: .08s; }
	.imm-hero__copy > :nth-child(3) { animation-delay: .16s; }
	.imm-hero__copy > :nth-child(4) { animation-delay: .26s; }

	.imm-hero__media img {
		transform-origin: 65% top;
		animation: imm-drift 26s ease-out both;
	}
}

@keyframes imm-fade-up {
	from { opacity: 0; translate: 0 14px; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes imm-drift {
	from { scale: 1.025; }
	to   { scale: 1; }
}

.imm-hero__lede {
	margin-top: 1.25rem;
	font-size: 1.125rem;
	color: var(--imm-on-navy-muted);
	max-width: 48ch;
}

.imm-hero__cta {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
	align-items: flex-start;
	flex-direction: column;
}

/* Tablet: let the two actions share a row when space permits. */
@media (min-width: 48em) {
	.imm-hero__inner { padding-block: 2rem 3rem; }
	.imm-hero__cta { flex-direction: row; align-items: center; }
}

/* Wide: the photo fills the section and fades into the copy side. */
@media (min-width: 56.25em) {
	/* Explicit layers: photo at 0, copy at 1. */
	.imm-hero__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		height: auto;
		background: none;
	}

	.imm-hero__inner {
		position: relative;
		z-index: 1;
	}

	/* The photo is as tall as the hero and framed on its subject: the point at --imm-hero-focus of
	   the photo's width (the dome) sits at --imm-hero-subject-at of the hero's width, clear of the copy
	   and its fade, and further right only when needed to reach the right edge. The photo's
	   shape is --imm-hero-ratio (width ÷ height); change the three with the photo. */
	.imm-hero__media {
		container-type: size;
	}

	.imm-hero__media img {
		--imm-hero-focus: .64;
		--imm-hero-ratio: 2.5;
		--imm-hero-subject-at: 72%;
		position: absolute;
		top: 0;
		left: max(var(--imm-hero-subject-at), calc(100% - (1 - var(--imm-hero-focus)) * var(--imm-hero-ratio) * 100cqh));
		width: auto;
		height: 100%;
		transform: translateX(calc(var(--imm-hero-focus) * -100%));
		/* A mask reads only alpha: any opaque token will do. */
		-webkit-mask-image: linear-gradient(90deg, transparent, var(--imm-paper) 25%);
		mask-image: linear-gradient(90deg, transparent, var(--imm-paper) 25%);
	}

	/* The copy fades into the photo on an eased scrim: solid navy until just past the words
	   (--imm-hero-fade-from, measured from the copy's edge), then stops along a smootherstep curve to
	   clear (--imm-hero-fade-to). The curve leaves the navy and reaches clear with zero slope, so no
	   line shows at either end (a straight or ease-out ramp starts with a visible step), the photo
	   shows from much nearer the text, and the words keep a dark ground. Aligned with the centred
	   copy container at every width. Moving the start left is bounded by the lede's contrast: at 24rem
	   it keeps 5.1:1 over the brightest photo pixels beside its last line at 1024px (4.5:1 needed);
	   18rem drops below. */
	.imm-hero__media::after {
		--imm-hero-edge: max(var(--imm-gutter), (100% - 1200px) / 2);
		--imm-hero-fade-from: 24rem;
		--imm-hero-fade-to: 42rem;
		--imm-hero-a: calc(var(--imm-hero-edge) + var(--imm-hero-fade-from));
		--imm-hero-span: calc(var(--imm-hero-fade-to) - var(--imm-hero-fade-from));
		background: linear-gradient(
			90deg,
			var(--imm-navy) 0,
			var(--imm-navy) var(--imm-hero-a),
			color-mix(in srgb, var(--imm-navy) 99.14%, transparent) calc(var(--imm-hero-a) + var(--imm-hero-span) * 0.1),
			color-mix(in srgb, var(--imm-navy) 94.21%, transparent) calc(var(--imm-hero-a) + var(--imm-hero-span) * 0.2),
			color-mix(in srgb, var(--imm-navy) 83.69%, transparent) calc(var(--imm-hero-a) + var(--imm-hero-span) * 0.3),
			color-mix(in srgb, var(--imm-navy) 68.26%, transparent) calc(var(--imm-hero-a) + var(--imm-hero-span) * 0.4),
			color-mix(in srgb, var(--imm-navy) 50.0%, transparent) calc(var(--imm-hero-a) + var(--imm-hero-span) * 0.5),
			color-mix(in srgb, var(--imm-navy) 31.74%, transparent) calc(var(--imm-hero-a) + var(--imm-hero-span) * 0.6),
			color-mix(in srgb, var(--imm-navy) 16.31%, transparent) calc(var(--imm-hero-a) + var(--imm-hero-span) * 0.7),
			color-mix(in srgb, var(--imm-navy) 5.79%, transparent) calc(var(--imm-hero-a) + var(--imm-hero-span) * 0.8),
			color-mix(in srgb, var(--imm-navy) 0.86%, transparent) calc(var(--imm-hero-a) + var(--imm-hero-span) * 0.9),
			transparent calc(var(--imm-hero-a) + var(--imm-hero-span))
		);
	}

	.imm-hero__inner {
		min-height: clamp(32rem, 45vw, 36rem);
		display: grid;
		align-items: center;
		padding-block: clamp(2.5rem, 4vw, 3.5rem);
	}

	.imm-hero__copy {
		max-width: 32rem;
	}
}

@media (min-width: 75em) {
	.imm-hero__copy { max-width: 46rem; }
	.imm-hero__media::after {
		--imm-hero-fade-to: 48rem;
	}
}

/* ---------- trust row (customers): the agencies, written out (ADR-032) ---------- */
/* No agency seals: their use can imply endorsement. The customers are named in DoD order of
   precedence, as two lists (military services, then agencies and departments). The row shares
   the white of the SDVOSB strip above it, so the navy hero is followed by one light credentials
   band, and navy returns only as contained panels further down (ADR-032). */
.imm-trust {
	background: var(--imm-paper);
	color: var(--imm-ink);
	padding-block: .75rem 2.5rem;
	border-bottom: 1px solid var(--imm-line-soft);
}

/* The row's heading leads the marks (ADR-035): a step above them at every width (17px over 15px
   on a phone, 21px over 20px on desktop), in the site's heading face and ink. */
.imm-trust h2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 0;
	text-align: center;
	font-family: var(--imm-body);
	font-size: 1.0625rem;
	font-size: clamp(1.0625rem, .95rem + .45vw, 1.375rem);
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--imm-ink);
	text-wrap: balance;
}

/* Flanking hairlines once there is room for them; on a phone the heading fills the width and they
   would be stubs. */
.imm-trust h2::before,
.imm-trust h2::after {
	content: "";
	display: none;
	height: 1px;
	flex: 1 1 auto;
	background: var(--imm-line);
}

@media (min-width: 36em) {
	.imm-trust h2::before,
	.imm-trust h2::after {
		display: block;
	}
}

/* The customers as grey marks (ADR-035): one heavy grey mark per agency in the row's own face, the
   qualifier ("U.S.", "Department of") lighter, centred on balanced lines in DoD order. Size, the gap
   between marks and the line pitch all scale with the row's width between a 320px and a 1200px
   content box (15→20px, 18→48px, 28.5→48px), so the spacing stays proportional at every width;
   a mark never breaks across lines. The muted grey is 5.85:1 on white. The items are printed with no
   whitespace between them, so the gap is exactly --imm-tw-gap. */
.imm-trust__names {
	container-type: inline-size;
	margin-top: 1.25rem;
}

.imm-tw {
	--imm-tw-gap: 1.125rem;
	--imm-tw-gap: clamp(1.125rem, .4432rem + 3.409cqi, 3rem);
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 68rem;
	text-align: center;
	text-wrap: balance;
	font-family: var(--imm-mark);
	font-size: .9375rem;
	font-size: clamp(.9375rem, .8239rem + .5682cqi, 1.25rem);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.7813rem;
	line-height: clamp(1.7813rem, 1.3381rem + 2.2159cqi, 3rem);
	color: var(--imm-muted);
}

.imm-tw__item {
	display: inline-block;
	position: relative;
	margin-inline: calc(var(--imm-tw-gap) / 2);
	line-height: 1.35;
	white-space: nowrap;
	vertical-align: middle;
}

.imm-tw__q {
	font-weight: 500;
}

/* The customers as chips (the seals block's "Chips" look, ADR-039/040): two centred rows — defense and
   intelligence, then civilian — each under a small, tracked-out, muted kicker with faint guide lines to
   the edges. Every agency on a white chip that sits just above the surface: a featherweight two-part
   shadow instead of an outline (a transparent border keeps the size steady for the hover), 8px corners,
   medium-weight deep slate text. Meant for the Slate band (below), where white chips read with depth. */
.imm-trust__names--chips {
	display: grid;
	gap: 1.25rem;
}

.imm-agencies {
	display: grid;
	justify-items: center;
	gap: .35rem;
}

.imm-agencies__label {
	display: flex;
	align-items: center;
	gap: .9rem;
	width: min(100%, 46rem);
	margin: 0;
	font-family: var(--imm-display);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--imm-muted);
}

.imm-agencies__label::before,
.imm-agencies__label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--imm-line-soft);
}

/* Inline chips on balanced lines: when a row wraps it splits evenly (4 + 4), never 7 + 1. */
.imm-agencies__list {
	--imm-chip-gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 100%;
	text-align: center;
	text-wrap: balance;
	line-height: 1;
}

.imm-agencies__chip {
	display: inline-block;
	position: relative;
	margin: calc(var(--imm-chip-gap) / 2);
	padding: .45rem .85rem;
	border: 1px solid transparent;
	border-radius: var(--imm-r-card);
	background: var(--imm-paper);
	box-shadow: var(--imm-elev-rest);
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: -.005em;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--imm-ink-2);
	transition: border-color var(--imm-dur-lift) var(--imm-ease-lift), box-shadow var(--imm-dur-lift) var(--imm-ease-lift), transform var(--imm-dur-lift) var(--imm-ease-lift);
}

@media (hover: hover) {
	.imm-agencies__chip:hover {
		border-color: var(--imm-line);
		box-shadow: var(--imm-elev-hover);
		transform: translateY(-1px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.imm-agencies__chip {
		transition: none;
	}

	.imm-agencies__chip:hover {
		transform: none;
	}
}

@media (min-width: 62em) {
	.imm-trust__names--chips {
		gap: 1.5rem;
	}

	.imm-agencies__list {
		--imm-chip-gap: .6rem;
	}

	.imm-agencies__chip {
		padding: .5rem 1rem;
		font-size: .9375rem;
	}
}

/* The Group block style "Slate band" (inc/blocks.php): a section on the light slate ground between
   hairlines. On the credentials section it opens straight on the heading. */
.wp-block-group.is-style-imm-band-slate {
	background: var(--imm-ground);
	border-top: 1px solid var(--imm-line);
	border-bottom: 1px solid var(--imm-line);
}

.imm-trust.is-style-imm-band-slate {
	padding-block: 2.25rem 3rem;
}

@media (min-width: 62em) {
	.imm-trust.is-style-imm-band-slate {
		padding-block: 2.75rem 3.5rem;
	}
}

/* Phillip-approved homepage rhythm (ADR-051). Keep agency content and wrapping, with a shorter band. */
.imm-trust.is-style-imm-band-slate {
	background: var(--imm-paper);
	border-color: var(--imm-line-soft);
	padding-block: 1.25rem 1.5rem;
}

.imm-trust .imm-trust__sub { margin-top: .35rem; }
.imm-trust__names--chips { gap: .65rem; }
.imm-trust .imm-agencies { gap: .2rem; }
.imm-trust .imm-agencies__label { margin-block: .25rem .1rem; }
.imm-trust .imm-agencies__list { --imm-chip-gap: .32rem; }

.imm-intent,
.imm-partners,
.imm-about {
	--imm-focus: var(--imm-on-navy-link);
	background: var(--imm-navy);
	color: var(--imm-on-navy);
}

.imm-intent .imm-sec-head h2,
.imm-about h2,
.imm-partners .imm-sec-head h2 { color: var(--imm-on-navy); }

.imm-intent .imm-sec-head p:not(.imm-eyebrow),
.imm-intent .imm-intent__path-note,
.imm-intent .imm-assist-note,
.imm-about p:not(.imm-eyebrow) { color: var(--imm-on-navy-muted); }

.imm-intent .imm-eyebrow,
.imm-intent .imm-intent__path-title,
.imm-about .imm-eyebrow,
.imm-partners .imm-eyebrow { color: var(--imm-on-navy-link); }

.imm-intent .imm-intent__assist {
	border-color: color-mix(in srgb, var(--imm-on-navy) 24%, transparent);
}

.imm-intent .imm-assist-note a { color: var(--imm-on-navy-link); }
.imm-partners { border-color: color-mix(in srgb, var(--imm-on-navy) 18%, transparent); }

/* The newer table and explorer retain their white surface inside the white vehicle section. */
.imm-vehicles,
.imm-vehicles:has(.imm-vx--light, .imm-vt) {
	--imm-focus: var(--imm-steel);
	background: var(--imm-paper);
	color: var(--imm-ink);
}

.imm-vehicles > .imm-wrap,
.imm-vehicles .imm-panel { color: var(--imm-ink); }
.imm-vehicles .imm-sec-head h2 { color: var(--imm-ink); }
.imm-vehicles .imm-sec-head p:not(.imm-eyebrow) { color: var(--imm-muted); }
.imm-vehicles .imm-eyebrow { color: var(--imm-steel); }
.imm-vehicles:has(.imm-vx--light, .imm-vt) .imm-vcta h3 { color: var(--imm-ink); }

/* About remains a navy section; its Careers / Contact cards form the white closing band. */
.imm-about .imm-close {
	--imm-focus: var(--imm-steel);
	position: relative;
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	margin-top: clamp(2rem, 5vw, 3.5rem);
	padding: clamp(2.25rem, 5vw, 3rem) max(var(--imm-gutter), calc((100vw - 1200px) / 2));
	background: var(--imm-paper);
	color: var(--imm-ink);
}

.imm-about .imm-close .imm-eyebrow { color: var(--imm-steel); }
.imm-footer__address { white-space: pre-line; }

@media (min-width: 48em) {
	.imm-trust.is-style-imm-band-slate { padding-block: 1.5rem 1.75rem; }
}

/* These section rules come after the component defaults so the approved surfaces win in the final
   cascade; the assistant and partner component rules otherwise retain their light-section defaults. */
.imm-intent.imm-sec,
.imm-partners.imm-sec,
.imm-about.imm-sec {
	background: var(--imm-navy);
	color: var(--imm-on-navy);
}

.imm-intent.imm-sec { --imm-focus: var(--imm-on-navy-link); }
.imm-partners.imm-sec { border-color: color-mix(in srgb, var(--imm-on-navy) 18%, transparent); }

.imm-intent .imm-eyebrow,
.imm-partners .imm-eyebrow,
.imm-about .imm-eyebrow,
.imm-intent .imm-intent__path-title { color: var(--imm-on-navy-link); }

.imm-intent .imm-intent__path-note,
.imm-intent .imm-sec-head p:not(.imm-eyebrow),
.imm-intent .imm-assist-note,
.imm-about p:not(.imm-eyebrow) { color: var(--imm-on-navy-muted); }

.imm-intent .imm-askbar__label { color: var(--imm-on-navy); }
.imm-intent .imm-askbar .imm-btn-outline {
	color: var(--imm-on-navy-link);
	border-color: var(--imm-on-navy-link);
}

.imm-intent .imm-askbar .imm-btn-outline:hover {
	background: var(--imm-on-navy-link);
	color: var(--imm-navy);
}

/* Resting monochrome partner marks are light on the navy band; hover still reveals the brand-colour
   artwork as ADR-036 specifies. */
.imm-partners.imm-sec .imm-marquee__list .imm-logo__mono {
	filter: brightness(0) invert(1);
}

/* The heading's optional sub-line. */
.imm-trust__sub {
	margin: .5rem auto 0;
	max-width: 44rem;
	text-align: center;
	color: var(--imm-ink-2);
}

/* ---------- intent tiles ---------- */
.imm-intent {
	background: var(--imm-ground);
}

.imm-intent__paths {
	display: grid;
	gap: 2rem;
	margin-top: 2rem;
}

.imm-intent__path-title {
	margin: 0;
	font-family: var(--imm-display);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--imm-steel);
}

.imm-intent__path-note {
	margin: .55rem 0 1rem;
	color: var(--imm-ink-2);
	font-size: .95rem;
	line-height: 1.5;
}

.imm-intent__assist {
	border-top: 1px solid var(--imm-line);
	padding-top: 1.5rem;
}

.imm-intent__assist .imm-askbar {
	grid-template-columns: minmax(0, 1fr);
	margin-top: 1rem;
}

.imm-intent__assist .imm-askbar .imm-btn {
	width: 100%;
}

.imm-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
}

.imm-tile {
	background: var(--imm-paper);
	border: 1px solid var(--imm-line-soft);
	border-radius: var(--imm-r-card);
	box-shadow: var(--imm-elev-rest);
	padding: 1.1rem .75rem 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: .75rem;
	cursor: pointer;
	text-align: center;
	min-height: 44px;
	transition: border-color var(--imm-dur-lift) var(--imm-ease-lift), box-shadow var(--imm-dur-lift) var(--imm-ease-lift), transform var(--imm-dur-lift) var(--imm-ease-lift), background-color var(--imm-dur-lift) var(--imm-ease-lift);
}

.imm-tile__icon {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
}

.imm-tile svg {
	width: 28px;
	height: 28px;
	color: var(--imm-steel);
}

.imm-tile[aria-pressed="true"] {
	border-color: var(--imm-steel);
	background: color-mix(in srgb, var(--imm-steel) 7%, var(--imm-paper));
}

.imm-tile--alt {
	border-style: dashed;
}

.imm-tile--alt b {
	color: var(--imm-steel);
}

.imm-tile b {
	font-family: var(--imm-body);
	font-weight: 500;
	text-transform: none;
	font-size: .92rem;
	letter-spacing: -.005em;
	line-height: 1.3;
	color: var(--imm-ink);
}

/* An odd final goal spans the phone grid, leaving no empty half-row. */
.imm-tile:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.imm-askbar {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .75rem;
	margin-top: 1.5rem;
}

.imm-askbar__label {
	grid-column: 1 / -1;
	font-weight: 500;
	color: var(--imm-ink);
}

.imm-askbar input {
	border: 1px solid var(--imm-line);
	border-radius: var(--imm-r);
	background: var(--imm-paper);
	padding: .95rem 1rem;
	font: inherit;
	color: var(--imm-ink);
	min-width: 0;
	min-height: 48px;
}

.imm-askbar input::placeholder {
	color: var(--imm-muted);
}

.imm-askbar .imm-btn {
	min-height: 48px;
}

.imm-assist-note {
	margin-top: 1rem;
	font-size: .875rem;
	color: var(--imm-ink-2);
}

@media (min-width: 36em) {
	.imm-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.imm-tile:last-child:nth-child(odd) {
		grid-column: auto;
		flex-direction: column;
		justify-content: flex-start;
	}

	.imm-askbar {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

@media (min-width: 48em) {
	.imm-intent__paths {
		grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
		gap: clamp(2rem, 5vw, 5rem);
		align-items: start;
	}

	.imm-intent__assist {
		border-top: 0;
		border-left: 1px solid var(--imm-line);
		padding-top: 0;
		padding-left: clamp(1.5rem, 3vw, 3rem);
	}

	.imm-intent__browse .imm-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* The assistant column is narrow beside the goal tiles: the question gets the full width so the
	   example question is not cut off, and the button sits under it. */
	.imm-intent__assist .imm-askbar {
		grid-template-columns: minmax(0, 1fr);
	}

	.imm-intent__assist .imm-askbar .imm-btn {
		width: auto;
		justify-self: start;
	}
}

@media (min-width: 62em) {
	.imm-tiles {
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	}

	.imm-tile {
		padding: 1.25rem .75rem 1rem;
		gap: .8rem;
	}

	.imm-tile b {
		font-size: .95rem;
	}
}

/* ---------- capabilities ---------- */
.imm-caps {
	background: var(--imm-ground);
	border-top: 1px solid var(--imm-line-soft);
}

.imm-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .75rem;
}

/* Clean card: white surface, hairline border, photo on top, icon tile + copy below,
   link pinned to the bottom. Hover is a small lift with a soft shadow, nothing more. */
.imm-card {
	background: var(--imm-paper);
	border: 1px solid var(--imm-line-soft);
	border-radius: var(--imm-r-card);
	box-shadow: var(--imm-elev-rest);
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	overflow: hidden;
	transition: border-color var(--imm-dur-lift) var(--imm-ease-lift), box-shadow var(--imm-dur-lift) var(--imm-ease-lift), transform var(--imm-dur-lift) var(--imm-ease-lift), background-color var(--imm-dur-lift) var(--imm-ease-lift);
}

.imm-card__art {
	aspect-ratio: 3 / 2;
	background: var(--imm-navy);
	display: grid;
	place-items: center;
	position: relative;
	overflow: hidden;
}

/* On phones, each capability is compact with the same photo/icon treatment;
   wider layouts use the photo-top card. */
@media (max-width: 35.99em) {
	.imm-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.imm-card__art {
		aspect-ratio: 16 / 5;
	}

	.imm-card__body {
		padding: 1rem;
		gap: .45rem;
		justify-content: center;
	}

	.imm-card__icon {
		margin-bottom: 0;
	}

	.imm-card h3 {
		font-size: 1rem;
		line-height: 1.25;
	}

	.imm-card p:not(.imm-eyebrow) {
		font-size: .875rem;
		line-height: 1.45;
	}
}

.imm-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Light, even scrim so photos of different brightness read as one set. */
.imm-card__art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--imm-navy) 14%, transparent);
	pointer-events: none;
}

/* Large icon shown in place of a photo when a card has none. */
.imm-card__art-icon {
	position: relative;
	z-index: 1;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--imm-on-navy) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--imm-on-navy) 22%, transparent);
	display: grid;
	place-items: center;
}

.imm-card__art-icon svg {
	width: 30px;
	height: 30px;
	color: var(--imm-on-navy);
}

.imm-card__body {
	padding: 1.25rem 1.25rem 1.35rem;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	flex: 1;
}

.imm-card__icon {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	margin-bottom: .1rem;
}

.imm-card__icon svg {
	width: 24px;
	height: 24px;
	color: var(--imm-steel);
}

.imm-card h3 {
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--imm-ink);
}

.imm-card p:not(.imm-eyebrow) {
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--imm-muted);
}

/* Text link with a travelling arrow: kept for cards (.imm-card__more) and used
   once per section under a grid (.imm-sec-more). */
.imm-card__more,
.imm-sec-more {
	margin-top: auto;
	padding-top: .5rem;
	font-family: var(--imm-body);
	font-weight: 600;
	text-transform: none;
	font-size: .92rem;
	letter-spacing: 0;
	color: var(--imm-ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 32px;
}

.imm-card__more:hover,
.imm-sec-more:hover {
	color: var(--imm-steel);
}

.imm-card__more svg,
.imm-sec-more svg {
	width: 1.05em;
	height: 1.05em;
	color: var(--imm-steel);
	transition: transform .2s;
}

.imm-card__more:hover svg,
.imm-sec-more:hover svg {
	transform: translateX(3px);
}

.imm-sec-foot {
	display: flex;
	justify-content: center;
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}

.imm-sec-more {
	font-size: 1rem;
	margin-top: 0;
	padding-top: 0;
	min-height: 44px;
}

@media (min-width: 36em) {
	.imm-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.imm-card {
		display: flex;
		flex-direction: column;
	}

	.imm-card__art {
		aspect-ratio: 3 / 2;
		min-height: 0;
	}

	/* An odd last card spans the row instead of sitting alone. */
	.imm-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* Two columns keep four capability cards balanced at desktop reading sizes. */
@media (min-width: 62em) {
	.imm-cards:not([style*="--imm-cards-cols"]) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}

	.imm-card:last-child:nth-child(odd) {
		grid-column: auto;
	}

	.imm-card__art {
		aspect-ratio: 16 / 9;
	}

	.imm-card__body {
		padding: 1.25rem 1.35rem 1.4rem;
	}
}

/* ---------- contract vehicles: tabs + expandable row list ---------- */
/* Contract vehicles: a full-width navy band (ADR-037). The band is the section itself, in the
   softened panel navy (15:1 on white, every text pair on it 8:1 or better); its content keeps the
   page's column. `.imm-panel` on the wrap (patterns/05-contracts.php) and `.imm-vehicles > .imm-wrap`
   (a front page saved in the Site Editor without the imm-panel class) stay transparent, so both
   render the same band. */
.imm-vehicles {
	--imm-navy: var(--imm-navy-panel);
	--imm-focus: var(--imm-on-navy-link); /* steel is 3.1:1 on navy; the ring must read (WCAG 2.4.11) */
	background: var(--imm-navy);
	color: var(--imm-on-navy);
}

.imm-panel,
.imm-vehicles > .imm-wrap {
	--imm-navy: var(--imm-navy-panel);
	--imm-focus: var(--imm-on-navy-link);
	color: var(--imm-on-navy);
}

.imm-vehicles .imm-sec-head h2 {
	color: var(--imm-on-navy);
}

.imm-vehicles .imm-sec-head p:not(.imm-eyebrow) {
	color: var(--imm-on-navy-muted);
}

.imm-vehicles .imm-eyebrow {
	color: var(--imm-on-navy-link);
}

/* Tab bar (revealed by JS; without it the groups stack under their headings). */
.imm-vtabs__bar {
	display: flex;
	gap: .25rem .5rem;
	border-bottom: 1px solid color-mix(in srgb, var(--imm-on-navy) 14%, transparent);
	margin-bottom: .5rem;
	overflow: visible;
	flex-wrap: wrap;
	scrollbar-width: none;
}

.imm-vtabs__bar::-webkit-scrollbar {
	display: none;
}

.imm-vtabs__bar[hidden] {
	display: none;
}

.imm-vtabs__tab {
	position: relative; /* contains its sr-only text inside the scrolling bar */
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: .7rem .65rem;
	color: var(--imm-on-navy-muted);
	font: 500 .95rem/1 var(--imm-body);
	white-space: nowrap;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	transition: color .15s, border-color .15s;
}

.imm-vtabs__tab:hover {
	color: var(--imm-on-navy);
}

.imm-vtabs__tab[aria-selected="true"] {
	color: var(--imm-on-navy);
	border-bottom-color: var(--imm-on-navy-link);
}

.imm-vtabs__count {
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	color: var(--imm-on-navy-muted);
	padding: .1rem .45rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--imm-on-navy) 16%, transparent);
}

.imm-vtabs__tab[aria-selected="true"] .imm-vtabs__count {
	color: var(--imm-on-navy);
	border-color: color-mix(in srgb, var(--imm-on-navy) 30%, transparent);
}

/* Panels. Stacked (no JS): headings visible, spaced. Tabs on: one at a time. */
.imm-vpanel + .imm-vpanel {
	margin-top: 2.25rem;
}

.imm-vpanel[hidden] {
	display: none;
}

.imm-vpanel:focus-visible {
	outline: 3px solid var(--imm-focus);
	outline-offset: 4px;
}

.imm-vpanel__title {
	font-family: var(--imm-display);
	text-transform: uppercase;
	font-size: .78rem;
	letter-spacing: .14em;
	font-weight: 600;
	color: var(--imm-on-navy-muted);
	padding-bottom: .6rem;
	border-bottom: 1px solid color-mix(in srgb, var(--imm-on-navy) 14%, transparent);
	margin-bottom: .25rem;
}

.imm-vtabs.is-ready .imm-vpanel + .imm-vpanel {
	margin-top: 0;
}

.imm-vtabs.is-ready .imm-vpanel__title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Card grid: each vehicle is a quiet card that expands in place. Cards align
   to the top so an open card never stretches its neighbours. */
.imm-vgrid {
	list-style: none;
	margin: 0;
	padding: .25rem 0 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .75rem;
	align-items: start;
}

@media (min-width: 36em) {
	.imm-vgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.imm-vgrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

details.imm-veh {
	background: color-mix(in srgb, var(--imm-on-navy) 5%, transparent);
	border: 1px solid transparent;
	border-radius: var(--imm-r-card);
	transition: background-color .2s, border-color .2s, transform .2s;
}

details.imm-veh[open] {
	background: color-mix(in srgb, var(--imm-on-navy) 7%, transparent);
	border-color: color-mix(in srgb, var(--imm-on-navy) 16%, transparent);
}

@media (hover: hover) and (pointer: fine) {
	details.imm-veh:hover {
		border-color: color-mix(in srgb, var(--imm-on-navy) 16%, transparent);
		transform: translateY(-2px);
	}
}

/* Phones: one compact row (logo, number and role, chevron), about half the height of a stacked
   card. From 36em, when the cards pair up, the logo sits above as the card's face. */
details.imm-veh summary {
	list-style: none;
	cursor: pointer;
	padding: .8rem .9rem;
	display: grid;
	grid-template-columns: minmax(0, 8.5rem) minmax(min-content, 1fr) auto; /* the number keeps its width; the logo gives way */
	grid-template-areas: "logo meta chev";
	gap: .5rem .9rem;
	align-items: center;
	border-radius: var(--imm-r-card);
}

@media (min-width: 36em) {
	details.imm-veh summary {
		padding: 1.1rem 1.25rem 1.05rem;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"logo logo"
			"meta chev";
		gap: .85rem 1rem;
	}
}

details.imm-veh summary::-webkit-details-marker {
	display: none;
}

/* The card face is the logo: a normalised 8:3 canvas, centred, softly faded
   into the card and brought to full strength on hover/open. */
.imm-veh__logo {
	grid-area: logo;
	display: block;
	aspect-ratio: 8 / 3;
	width: 100%;
	max-height: 96px;
	margin: 0 auto;
}

.imm-veh__img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
	opacity: .72;
	transition: opacity .25s;
}

/* Dark marks (black-on-transparent, or a JPG on white): white on the navy card, the background
   dropped. The SVG filter (immersion_knockout_filter()) turns darkness into opacity on the image
   itself; a screen blend would need the navy in the same stacking context and shows a black box
   inside the revealed or hovered card. Every renderer of a knocked-out logo prints the filter. */
.imm-veh__img--knockout {
	filter: url(#imm-knockout);
}

.imm-knockout-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

details.imm-veh:is(:hover, [open]) .imm-veh__img {
	opacity: .95;
}

/* Only shown when a vehicle has no logo file. */
.imm-veh__name {
	grid-area: logo;
	font-family: var(--imm-body);
	font-weight: 600;
	font-size: 1.1rem;
	letter-spacing: -.01em;
	color: var(--imm-on-navy);
	align-self: center;
	min-height: 60px;
	display: flex;
	align-items: center;
}

.imm-veh__meta {
	grid-area: meta;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2rem .6rem;
	min-width: 0;
}

.imm-veh__num {
	font-size: .85rem;
	letter-spacing: .02em;
	color: var(--imm-on-navy-muted);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.imm-veh__role {
	font-size: .85rem;
	color: var(--imm-on-navy-muted);
}

/* Phones (the one-row card): number above role, no separator. From 36em: "number · role". A contract
   number never breaks across lines, even at 360px; "Contact us for details" may. */
.imm-veh__meta {
	flex-direction: column;
	align-items: flex-start;
}

@media (max-width: 35.99em) {
	.imm-veh__num:not(.is-empty) {
		white-space: nowrap;
		overflow-wrap: normal;
	}
}

@media (min-width: 36em) {
	.imm-veh__meta {
		flex-direction: row;
		align-items: baseline;
	}

	.imm-veh__role::before {
		content: "\00B7";
		margin-right: .6rem;
		opacity: .6;
	}
}

/* Desktop cards at reading size: number above role, as on phones. Side by side, a long role
   ("Contact us for details · Subcontractor") would wrap with the dot starting a line, and the cards
   of one row would differ in height. */
@media (min-width: 62em) {
	.imm-veh__meta {
		flex-direction: column;
		align-items: flex-start;
	}

	.imm-veh__role::before {
		content: none;
	}

	.imm-veh__num:not(.is-empty) {
		white-space: nowrap;
		overflow-wrap: normal;
	}
}

.imm-veh__chev {
	grid-area: chev;
	align-self: center;
	justify-self: end;
	width: 28px;
	height: 28px;
	padding: 5px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--imm-on-navy) 22%, transparent);
	box-sizing: border-box;
	transition: transform .2s, border-color .15s;
	opacity: .85;
}

details.imm-veh[open] .imm-veh__chev {
	transform: rotate(180deg);
	opacity: 1;
}

/* Expanded details: indented under the name, two-column facts. */
.imm-veh__detail {
	margin: 0 1.25rem;
	padding: 1rem 0 1.3rem;
	border-top: 1px solid color-mix(in srgb, var(--imm-on-navy) 10%, transparent);
	font-size: .95rem;
}

.imm-veh__detail > p {
	color: var(--imm-on-navy-muted);
}

.imm-veh__title {
	font-family: var(--imm-body);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: -.01em;
	color: var(--imm-on-navy) !important;
	margin-bottom: .35rem;
}

.imm-veh__detail dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .4rem 1rem;
	margin: .9rem 0 0;
}

.imm-veh__detail dt {
	font-family: var(--imm-display);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--imm-on-navy-muted);
	padding-top: .2em;
}

.imm-veh__detail dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/*
 * Links in the detail panel sit inside prose (a column value may be a sentence with a link in it),
 * so they have to look clickable on their own. Colour alone is not enough: #9dc0e6 against white
 * body text is 1.89:1, under the 3:1 that lets colour be the only cue, so the underline does the
 * accessible work and the colour the aesthetic work.
 */
.imm-veh__detail a {
	color: var(--imm-on-navy-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.imm-veh__detail a:hover,
.imm-veh__detail a:focus-visible {
	color: var(--imm-on-navy);
	text-decoration-thickness: 2px;
}

/* Smooth open/close where the browser can animate to height:auto. */
@supports (interpolate-size: allow-keywords) {
	details.imm-veh {
		interpolate-size: allow-keywords;
	}

	details.imm-veh::details-content {
		height: 0;
		overflow: clip;
		transition: height .28s ease, content-visibility .28s allow-discrete;
	}

	details.imm-veh[open]::details-content {
		height: auto;
	}
}

/* Inside the panel: a hairline-divided closing row, not a card inside a card. */
.imm-vcta {
	margin-top: 2.5rem;
	border-top: 1px solid color-mix(in srgb, var(--imm-on-navy) 10%, transparent);
	padding-top: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.imm-vcta h3 {
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--imm-on-navy);
	max-width: 26ch;
}

/* ---------- contract vehicle explorer (ADR-038) ---------- */
/* An alternative to the vehicle cards: the names in a list beside one large card. Phones and tablets:
   a scrolling row of names above the card. From 62em: a centred sidebar of names (grouped by type)
   beside the card. On navy: inside the vehicles band it uses the band; anywhere else it brings its own
   navy panel, because the vehicle logos are prepared for navy (white marks). Without JavaScript the
   names are in-page links and every card is shown. */
.imm-vx {
	--imm-navy: var(--imm-navy-panel);
	--imm-focus: var(--imm-on-navy-link);
	display: grid;
	gap: 1rem;
	padding: 1.25rem;
	border-radius: var(--imm-r-panel);
	background: var(--imm-navy);
	color: var(--imm-on-navy);
}

.imm-vehicles .imm-vx {
	padding: 0;
	border-radius: 0;
	background: none;
}

.imm-vx__nav {
	position: relative;
	display: flex;
	gap: .5rem 1rem;
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	padding-bottom: .75rem;
	border-bottom: 1px solid color-mix(in srgb, var(--imm-on-navy) 14%, transparent);
}

.imm-vx__group {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: 0 0 auto;
}

.imm-vx__glabel {
	margin: 0;
	font-family: var(--imm-display);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--imm-on-navy-muted);
}

.imm-vx__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: .4rem;
}

/* Smaller screens, with the script: one header names the chosen vehicle's group (made in
   immersion.js), the per-group labels leave the row (kept, hidden, as the tab lists' names) and a
   hairline marks where one group's names end. Without the script the labels stay in the row. */
.imm-vx__current {
	margin: 0 0 -.35rem;
	font-family: var(--imm-display);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--imm-on-navy-muted);
}

.imm-vx.is-ready .imm-vx__glabel {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.imm-vx.is-ready .imm-vx__group + .imm-vx__group {
	padding-left: .6rem;
	border-left: 1px solid color-mix(in srgb, var(--imm-on-navy) 16%, transparent);
}

/* A name in the list: quiet until chosen. Optional small logo in a fixed slot before the name, so
   the names line up whatever the logo's shape. */
.imm-vx__tab {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	column-gap: .7rem;
	row-gap: .1rem;
	padding: .5rem .75rem;
	border: 1px solid color-mix(in srgb, var(--imm-on-navy) 14%, transparent);
	border-radius: var(--imm-r);
	color: var(--imm-on-navy-muted);
	text-decoration: none;
	white-space: nowrap;
	scroll-snap-align: start;
	transition: background-color .2s, border-color .2s, color .2s;
}

.imm-vx__tab.has-logo {
	grid-template-columns: 2.75rem minmax(0, 1fr);
}

.imm-vx__tab:hover {
	color: var(--imm-on-navy);
	border-color: color-mix(in srgb, var(--imm-on-navy) 28%, transparent);
}

.imm-vx__tab[aria-selected="true"] {
	color: var(--imm-on-navy);
	background: color-mix(in srgb, var(--imm-on-navy) 11%, transparent);
	border-color: color-mix(in srgb, var(--imm-on-navy) 24%, transparent);
}

.imm-vx__tlogo {
	grid-row: 1 / span 2;
	display: block;
	width: 2.75rem;
	height: 1.35rem;
}

.imm-vx__tlogo img {
	opacity: .6;
	transition: opacity .2s;
}

.imm-vx__tab:hover .imm-vx__tlogo img,
.imm-vx__tab[aria-selected="true"] .imm-vx__tlogo img {
	opacity: 1;
}

.imm-vx__tname {
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.imm-vx__tnum {
	font-size: .78rem;
	color: var(--imm-on-navy-muted);
	font-variant-numeric: tabular-nums;
}

/* The selected vehicle's details sit on the band itself, filling the space beside the list (below
   it on smaller screens): no card around them. */
.imm-vx__panels {
	min-width: 0;
}

.imm-vx__panel {
	display: grid;
	gap: 1rem;
	padding-top: .5rem;
}

.imm-vx__panel[hidden] {
	display: none;
}

/* Text on the left, the logo beside the name on the right: the bundled logos sit centred on a padded
   canvas, so a left-aligned logo would read as indented from the text. The fields run the full width. */
.imm-vx__panel {
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 1.25rem;
	row-gap: 0;
	align-items: start;
}

.imm-vx__body {
	display: contents;
}

/* The logo, trimmed of its canvas margin, at a height set by its shape (render.php): tall seals
   tallest, long wordmarks shortest and widest, so each covers about the same area. */
.imm-vx__logo {
	--imm-vx-logo-h: 2.6rem;
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 9rem;
}

.imm-vx__logo .imm-veh__img {
	opacity: 1;
}

.imm-vx__logo--tall { --imm-vx-logo-h: 4.85rem; }
.imm-vx__logo--square { --imm-vx-logo-h: 3.85rem; }
.imm-vx__logo--mid { --imm-vx-logo-h: 3.25rem; }
.imm-vx__logo--long { --imm-vx-logo-h: 2.65rem; }
.imm-vx__logo--wide { --imm-vx-logo-h: 2.15rem; }

.imm-vx__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--imm-vx-logo-h);
	object-fit: contain;
	object-position: center;
}

/* An airy lockup (thin lines, small text: SEWP VI, SITE III) a step larger, so it weighs as much as a
   dense mark of the same shape. */
.imm-vx__logo--airy img {
	height: calc(var(--imm-vx-logo-h) * 1.25);
}

.imm-vx__kicker,
.imm-vx__name,
.imm-vx__full {
	grid-column: 1;
}

.imm-vx__rows {
	grid-column: 1 / -1;
}

.imm-vx__kicker {
	margin: 0;
	font-family: var(--imm-display);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--imm-on-navy-link);
}

.imm-vx__name {
	margin: .3rem 0 0;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--imm-on-navy);
}

.imm-vx__full {
	margin: .35rem 0 0;
	max-width: 44rem;
	color: var(--imm-on-navy-muted);
}

/* Each field a label over its value: one column on phones, two from 48em, so the details fill the
   width beside the list instead of running down a narrow column. */
.imm-vx__rows {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.1rem 2.5rem;
	margin: 1.5rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--imm-on-navy) 12%, transparent);
}

.imm-vx__row {
	min-width: 0;
}

.imm-vx__rows dt {
	font-family: var(--imm-display);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--imm-on-navy-muted);
}

.imm-vx__rows dd {
	margin: .3rem 0 0;
	font-size: 1.0625rem;
	overflow-wrap: anywhere;
}

.imm-vx__rows a {
	color: var(--imm-on-navy-link);
}

@media (min-width: 48em) {
	.imm-vx__rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.imm-vx {
		grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
		gap: 3rem;
		align-items: start;
		padding: 2rem;
	}

	.imm-vehicles .imm-vx {
		padding: 0;
	}

	.imm-vx__nav {
		flex-direction: column;
		gap: 1.25rem;
		overflow: visible;
		padding: 0 1.5rem 0 0;
		border-bottom: 0;
		border-right: 1px solid color-mix(in srgb, var(--imm-on-navy) 14%, transparent);
	}

	.imm-vx__group {
		flex-direction: column;
		align-items: stretch;
		gap: .35rem;
	}

	.imm-vx__glabel,
	.imm-vx.is-ready .imm-vx__glabel {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		padding-inline: .8rem;
	}

	.imm-vx__current {
		display: none;
	}

	.imm-vx.is-ready .imm-vx__group + .imm-vx__group {
		padding-left: 0;
		border-left: 0;
	}

	.imm-vx__list {
		flex-direction: column;
		gap: .2rem;
	}

	.imm-vx__tab {
		white-space: normal;
		border-color: transparent;
		padding: .55rem .75rem;
	}

	.imm-vx__tab:hover {
		border-color: transparent;
		background: color-mix(in srgb, var(--imm-on-navy) 5%, transparent);
	}

	.imm-vx__tab[aria-selected="true"] {
		border-color: transparent;
		background: color-mix(in srgb, var(--imm-on-navy) 11%, transparent);
	}

	.imm-vx__tab.has-logo {
		grid-template-columns: 3.25rem minmax(0, 1fr);
		column-gap: .85rem;
	}

	.imm-vx__tlogo {
		width: 3.25rem;
		height: 1.6rem;
	}

	/* The details stay in view while the list, taller than them, is scrolled. */
	.imm-vx__panels {
		position: sticky;
		top: calc(var(--imm-topbar-h) + var(--imm-nav-h) + 1.5rem);
	}

	.imm-vx__panel {
		column-gap: 2.5rem;
	}

	.imm-vx__logo {
		width: 18.5rem;
		--imm-vx-logo-h: 4.25rem;
	}

	.imm-vx__logo--tall { --imm-vx-logo-h: 7.35rem; }
	.imm-vx__logo--square { --imm-vx-logo-h: 5.75rem; }
	.imm-vx__logo--mid { --imm-vx-logo-h: 4.9rem; }
	.imm-vx__logo--long { --imm-vx-logo-h: 3.9rem; }
	.imm-vx__logo--wide { --imm-vx-logo-h: 3.2rem; }

	.imm-vx__name {
		font-size: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.imm-vx__tab {
		transition: none;
	}
}

/* ---------- contract vehicle explorer: the white card (variant "light", ADR-038) ---------- */
/* The same explorer on light: one bordered card, the names in a pale sidebar (a row across the top on
   smaller screens) and the details on white. In the Contract vehicles section the band turns light
   around it (below). Logos come in their own colours (immersion_vehicle_logo_on_light()). */
.imm-vx.imm-vx--light,
.imm-vehicles .imm-vx.imm-vx--light {
	--imm-focus: var(--imm-steel);
	gap: 0;
	padding: 0;
	background: var(--imm-paper);
	color: var(--imm-ink);
	border: 1px solid var(--imm-line);
	border-radius: var(--imm-r-panel);
	box-shadow:
		0 1px 2px color-mix(in srgb, var(--imm-navy) 5%, transparent),
		0 24px 48px -32px color-mix(in srgb, var(--imm-navy) 30%, transparent);
}

.imm-vx--light .imm-vx__nav {
	padding: .9rem 1rem;
	background: var(--imm-ground);
	border-bottom: 1px solid var(--imm-line);
	border-radius: calc(var(--imm-r-panel) - 1px) calc(var(--imm-r-panel) - 1px) 0 0;
}

.imm-vx--light .imm-vx__glabel {
	color: var(--imm-muted);
}

.imm-vx--light .imm-vx__current {
	margin: 0;
	padding: .85rem 1rem 0;
	color: var(--imm-muted);
	background: var(--imm-ground);
	border-radius: calc(var(--imm-r-panel) - 1px) calc(var(--imm-r-panel) - 1px) 0 0;
}

@media (max-width: 61.99em) {
	.imm-vx--light .imm-vx__current + .imm-vx__nav {
		padding-top: .6rem;
		border-radius: 0;
	}
}

.imm-vx--light.is-ready .imm-vx__group + .imm-vx__group {
	border-left-color: var(--imm-line);
}

.imm-vx--light .imm-vx__tab {
	color: var(--imm-ink-2);
	border-color: var(--imm-line);
}

.imm-vx--light .imm-vx__tab:hover {
	color: var(--imm-ink);
	background: var(--imm-paper);
}

.imm-vx--light .imm-vx__tab[aria-selected="true"] {
	color: var(--imm-ink);
	background: var(--imm-paper);
	border-color: var(--imm-steel);
	box-shadow: var(--imm-elev-rest);
}

.imm-vx--light .imm-vx__panels {
	padding: 1.25rem 1.25rem 1.5rem;
}

.imm-vx--light .imm-vx__kicker {
	color: var(--imm-steel);
}

.imm-vx--light .imm-vx__name {
	color: var(--imm-ink);
}

.imm-vx--light .imm-vx__full {
	color: var(--imm-ink-2);
}

.imm-vx--light .imm-vx__rows {
	border-top-color: var(--imm-line);
}

.imm-vx--light .imm-vx__rows dt {
	color: var(--imm-muted);
}

.imm-vx--light .imm-vx__rows a {
	color: var(--imm-steel);
}

.imm-vx--light .imm-veh__img,
.imm-vx--light .imm-vx__tlogo img {
	opacity: 1;
}

@media (min-width: 62em) {
	.imm-vx.imm-vx--light,
	.imm-vehicles .imm-vx.imm-vx--light {
		grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
		gap: 0;
		padding: 0;
	}

	.imm-vx--light .imm-vx__nav {
		align-self: stretch;
		padding: 1.75rem 1rem;
		border-bottom: 0;
		border-right: 1px solid var(--imm-line);
		border-radius: calc(var(--imm-r-panel) - 1px) 0 0 calc(var(--imm-r-panel) - 1px);
	}

	.imm-vx--light .imm-vx__glabel {
		padding-inline: .75rem;
	}

	.imm-vx--light .imm-vx__tab {
		border-color: transparent;
	}

	.imm-vx--light .imm-vx__tab:hover {
		border-color: transparent;
		background: color-mix(in srgb, var(--imm-paper) 70%, transparent);
	}

	.imm-vx--light .imm-vx__tab[aria-selected="true"] {
		border-color: var(--imm-line);
		background: var(--imm-paper);
		box-shadow: var(--imm-elev-rest);
	}

	.imm-vx--light .imm-vx__panels {
		align-self: start;
		padding: 2.25rem 2.5rem 2.5rem;
	}
}

/* The Contract vehicles section around a white explorer: the light ground, dark text, and the
   closing row's white button drawn as the outline button. */
.imm-vehicles:has(.imm-vx--light, .imm-vt) {
	--imm-focus: var(--imm-steel);
	background: var(--imm-ground);
	color: var(--imm-ink);
}

.imm-vehicles:has(.imm-vx--light, .imm-vt) > .imm-wrap {
	--imm-focus: var(--imm-steel);
	color: var(--imm-ink);
}

.imm-vehicles:has(.imm-vx--light, .imm-vt) .imm-sec-head h2,
.imm-vehicles:has(.imm-vx--light, .imm-vt) .imm-vcta h3 {
	color: var(--imm-ink);
}

.imm-vehicles:has(.imm-vx--light, .imm-vt) .imm-sec-head p:not(.imm-eyebrow) {
	color: var(--imm-ink-2);
}

.imm-vehicles:has(.imm-vx--light, .imm-vt) .imm-eyebrow {
	color: var(--imm-steel);
}

.imm-vehicles:has(.imm-vx--light, .imm-vt) .imm-vcta {
	border-top-color: var(--imm-line);
}

:is(body.imm, body.editor-styles-wrapper) .imm-vehicles:has(.imm-vx--light, .imm-vt) .is-style-imm-white .wp-block-button__link {
	background: transparent;
	color: var(--imm-outline);
	border-color: var(--imm-outline);
}

:is(body.imm, body.editor-styles-wrapper) .imm-vehicles:has(.imm-vx--light, .imm-vt) .is-style-imm-white .wp-block-button__link:hover {
	background: var(--imm-outline);
	color: var(--imm-paper);
}

/* ---------- contract vehicle table (ADR-042, ADR-043) ---------- */
/* A quick-reference list a contracting officer scans. Mobile first: on a phone a compact accordion —
   one slim row per vehicle (logo, name, role, chevron), the whole row opening the vehicle's record
   (number with copy, contact details, Contact). From 48em a table: vehicle, role, contract number
   with copy, one column for scope / "who can order" once filled (75em up), then Contact and Details;
   the record opens in a band under its row. Filters (one per group, starting on the first) above,
   "Show all" under it. The row's columns are fixed by the block; fields added in Site Content go into
   the record, which stacks them on an even grid (1 → 2 → 3 columns); Site Content caps how many and
   how long (immersion_content_limits()). Light, like the white explorer: the section turns light
   around it. */
.imm-vt {
	display: grid;
	gap: 1rem;
	color: var(--imm-ink);
}

.imm-vt__tools[hidden],
.imm-vt__all[hidden],
.imm-vt__toggle[hidden] {
	display: none;
}

.imm-vt__filters {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.imm-vt__filter {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 40px;
	padding: .4rem .8rem;
	border: 1px solid var(--imm-line);
	border-radius: var(--imm-r);
	background: var(--imm-paper);
	box-shadow: var(--imm-elev-rest);
	color: var(--imm-ink-2);
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--imm-dur-lift) var(--imm-ease-lift), border-color var(--imm-dur-lift) var(--imm-ease-lift), color var(--imm-dur-lift) var(--imm-ease-lift);
}

.imm-vt__filter:hover {
	border-color: var(--imm-steel);
	color: var(--imm-ink);
}

.imm-vt__filter[aria-pressed="true"] {
	background: var(--imm-navy-2);
	border-color: var(--imm-navy-2);
	color: var(--imm-paper);
}

.imm-vt__n {
	font-size: .75rem;
	font-variant-numeric: tabular-nums;
	color: var(--imm-muted);
}

.imm-vt__filter[aria-pressed="true"] .imm-vt__n {
	color: color-mix(in srgb, var(--imm-paper) 78%, transparent);
}

.imm-vt__frame {
	background: var(--imm-paper);
	border: 1px solid var(--imm-line);
	border-radius: var(--imm-r-card);
	box-shadow: var(--imm-elev-rest);
	overflow: hidden;
}

/* Phones: the table's parts as blocks; the header row stays for screen readers only. */
.imm-vt__table {
	display: block;
	width: 100%;
	border-collapse: collapse;
}

.imm-vt__table tbody,
.imm-vt__table tr,
.imm-vt__detail > td {
	display: block;
}

.imm-vt__table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.imm-vt__table tr[hidden] {
	display: none;
}

/* One slim row: logo and name, the role as a small tag, the chevron. */
.imm-vt__table .imm-vt__row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 0 .6rem;
	padding: .55rem .9rem;
}

.imm-vt__row > th,
.imm-vt__row > td {
	display: block;
	padding: 0;
	text-align: left;
	font-weight: 400;
}

.imm-vt__row + .imm-vt__detail + .imm-vt__row {
	border-top: 1px solid var(--imm-line-soft);
}

.imm-vt__full,
.imm-vt__row > .imm-vt__numcell,
.imm-vt__row > .imm-vt__opt,
.imm-vt__row .imm-vt__contact {
	display: none;
}

@media (hover: hover) {
	.imm-vt__row {
		transition: background-color .2s;
	}

	.imm-vt__row:hover,
	.imm-vt__row.is-open {
		background: color-mix(in srgb, var(--imm-ground) 70%, transparent);
	}
}

/* The logo in a fixed slot beside the names, whatever the name's length. */
.imm-vt__who {
	display: flex;
	align-items: center;
	gap: .85rem;
}

.imm-vt__logo {
	display: flex;
	align-items: center;
	flex: 0 0 2.75rem;
	height: 1.75rem;
}

/* Every logo the same visual weight, then the vehicle's own zoom and position (Site Content →
   Contract vehicles), as step classes from immersion_vehicle_logo_classes() (below): the width (equal
   area by shape and ink, times the zoom), the height following the file's own proportions and never
   past the slot's, from the slot's left edge, moved by --imm-logo-x / --imm-logo-y (percent of it). */
.imm-vt__logo img {
	position: relative;
	left: var(--imm-logo-x, 0%);
	top: var(--imm-logo-y, 0%);
	width: var(--imm-logo-w, 100%);
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: left center;
	opacity: 1;
}

/* The logo steps (5%): width 5–100, moves -40–40 (m = minus). Classes, not inline styles (ADR-050). */
.imm-logo--w5 { --imm-logo-w: 5%; }
.imm-logo--w10 { --imm-logo-w: 10%; }
.imm-logo--w15 { --imm-logo-w: 15%; }
.imm-logo--w20 { --imm-logo-w: 20%; }
.imm-logo--w25 { --imm-logo-w: 25%; }
.imm-logo--w30 { --imm-logo-w: 30%; }
.imm-logo--w35 { --imm-logo-w: 35%; }
.imm-logo--w40 { --imm-logo-w: 40%; }
.imm-logo--w45 { --imm-logo-w: 45%; }
.imm-logo--w50 { --imm-logo-w: 50%; }
.imm-logo--w55 { --imm-logo-w: 55%; }
.imm-logo--w60 { --imm-logo-w: 60%; }
.imm-logo--w65 { --imm-logo-w: 65%; }
.imm-logo--w70 { --imm-logo-w: 70%; }
.imm-logo--w75 { --imm-logo-w: 75%; }
.imm-logo--w80 { --imm-logo-w: 80%; }
.imm-logo--w85 { --imm-logo-w: 85%; }
.imm-logo--w90 { --imm-logo-w: 90%; }
.imm-logo--w95 { --imm-logo-w: 95%; }
.imm-logo--w100 { --imm-logo-w: 100%; }
.imm-logo--x5 { --imm-logo-x: 5%; }
.imm-logo--x10 { --imm-logo-x: 10%; }
.imm-logo--x15 { --imm-logo-x: 15%; }
.imm-logo--x20 { --imm-logo-x: 20%; }
.imm-logo--x25 { --imm-logo-x: 25%; }
.imm-logo--x30 { --imm-logo-x: 30%; }
.imm-logo--x35 { --imm-logo-x: 35%; }
.imm-logo--x40 { --imm-logo-x: 40%; }
.imm-logo--xm5 { --imm-logo-x: -5%; }
.imm-logo--xm10 { --imm-logo-x: -10%; }
.imm-logo--xm15 { --imm-logo-x: -15%; }
.imm-logo--xm20 { --imm-logo-x: -20%; }
.imm-logo--xm25 { --imm-logo-x: -25%; }
.imm-logo--xm30 { --imm-logo-x: -30%; }
.imm-logo--xm35 { --imm-logo-x: -35%; }
.imm-logo--xm40 { --imm-logo-x: -40%; }
.imm-logo--y5 { --imm-logo-y: 5%; }
.imm-logo--y10 { --imm-logo-y: 10%; }
.imm-logo--y15 { --imm-logo-y: 15%; }
.imm-logo--y20 { --imm-logo-y: 20%; }
.imm-logo--y25 { --imm-logo-y: 25%; }
.imm-logo--y30 { --imm-logo-y: 30%; }
.imm-logo--y35 { --imm-logo-y: 35%; }
.imm-logo--y40 { --imm-logo-y: 40%; }
.imm-logo--ym5 { --imm-logo-y: -5%; }
.imm-logo--ym10 { --imm-logo-y: -10%; }
.imm-logo--ym15 { --imm-logo-y: -15%; }
.imm-logo--ym20 { --imm-logo-y: -20%; }
.imm-logo--ym25 { --imm-logo-y: -25%; }
.imm-logo--ym30 { --imm-logo-y: -30%; }
.imm-logo--ym35 { --imm-logo-y: -35%; }
.imm-logo--ym40 { --imm-logo-y: -40%; }

.imm-vt__names {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.imm-vt__name {
	font-weight: 600;
	color: var(--imm-ink);
}

.imm-vt__full {
	max-width: 26rem;
	font-size: .8125rem;
	line-height: 1.35;
	color: var(--imm-muted);
}

.imm-vt__row > .imm-vt__role {
	font-family: var(--imm-display);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--imm-muted);
}

.imm-vt__numcell {
	white-space: nowrap;
}

.imm-num {
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}

.imm-vt__muted {
	font-size: .875rem;
	color: var(--imm-muted);
}

.imm-vt__optline {
	display: block;
	font-size: .9375rem;
	line-height: 1.4;
}

.imm-vt__optline + .imm-vt__optline {
	margin-top: .3rem;
}

.imm-vt__optkey {
	display: block;
	font-family: var(--imm-display);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--imm-muted);
}

.imm-vt__contact {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: .3rem .8rem;
	border: 1px solid var(--imm-outline);
	border-radius: var(--imm-r);
	color: var(--imm-outline);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--imm-dur-lift) var(--imm-ease-lift), color var(--imm-dur-lift) var(--imm-ease-lift);
}

.imm-vt__contact:hover {
	background: var(--imm-outline);
	color: var(--imm-paper);
}

/* Details: on a phone the chevron alone, its hit area stretched over the whole row (the word stays
   for screen readers). */
.imm-vt__toggle {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	min-height: 34px;
	padding: .35rem;
	border: 0;
	border-radius: var(--imm-r);
	background: none;
	color: var(--imm-steel);
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
}

.imm-vt__toggle:hover {
	background: color-mix(in srgb, var(--imm-steel) 8%, transparent);
}

.imm-vt__toggle::after {
	content: "";
	position: absolute;
	inset: 0;
}

.imm-vt__toggle-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.imm-vt__chev {
	width: 16px;
	height: 16px;
	transition: transform var(--imm-dur-lift) var(--imm-ease-lift);
}

.imm-vt__toggle[aria-expanded="true"] .imm-vt__chev {
	transform: rotate(180deg);
}

/* The record under its row: slides open (grid rows 0fr → 1fr), and while closed it is hidden from
   screen readers and the tab order (visibility). Without the script it is simply open. */
.imm-vt__detail > td {
	padding: 0;
}

.imm-vt__panel {
	display: grid;
	grid-template-rows: 1fr;
}

.imm-vt__panel-in {
	overflow: hidden;
	min-height: 0;
	background: color-mix(in srgb, var(--imm-ground) 70%, transparent);
}

.imm-vt.is-ready .imm-vt__panel {
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows .3s var(--imm-ease-lift), visibility 0s .3s;
}

.imm-vt.is-ready .imm-vt__detail.is-open .imm-vt__panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows .3s var(--imm-ease-lift), visibility 0s 0s;
}

/* Label/value pairs on an even grid: one column on a phone, two from 36em, three from 75em. A value
   wraps inside its column; only a single word too long for it (a long address) breaks. */
.imm-vt__rows {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .6rem 2rem;
	margin: 0;
	padding: .75rem .9rem .5rem;
	border-top: 1px dashed var(--imm-line);
}

.imm-vt__field {
	min-width: 0;
}

.imm-vt__rows dt {
	font-family: var(--imm-display);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--imm-muted);
}

.imm-vt__rows dd {
	margin: .2rem 0 0;
	overflow-wrap: break-word;
}

.imm-vt__rows a {
	color: var(--imm-steel);
}

.imm-vt__contact--panel {
	margin: 0 .9rem .9rem;
}

.imm-vt__all {
	display: inline-flex;
	align-items: center;
	justify-self: center;
	gap: .4rem;
	min-height: 44px;
	padding: .5rem 1.1rem;
	border: 1px solid var(--imm-line);
	border-radius: var(--imm-r);
	background: var(--imm-paper);
	box-shadow: var(--imm-elev-rest);
	color: var(--imm-ink);
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--imm-dur-lift) var(--imm-ease-lift), box-shadow var(--imm-dur-lift) var(--imm-ease-lift);
}

.imm-vt__all:hover {
	border-color: var(--imm-steel);
	box-shadow: var(--imm-elev-hover);
}

.imm-vt__all-chev {
	width: 16px;
	height: 16px;
}

@media (min-width: 36em) {
	.imm-vt__rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* From 48em: a table with fixed columns — filtering or opening a record never moves them; the vehicle
   column takes the rest. The number and Contact sit in the row, so the record drops them. */
@media (min-width: 48em) {
	.imm-vt__frame {
		border-radius: var(--imm-r-panel);
	}

	.imm-vt__table {
		display: table;
		table-layout: fixed;
	}

	.imm-vt__table thead {
		display: table-header-group;
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	.imm-vt__table tbody {
		display: table-row-group;
	}

	.imm-vt__table tr,
	.imm-vt__table .imm-vt__row {
		display: table-row;
		padding: 0;
	}

	.imm-vt__table thead th {
		padding: .65rem 1rem;
		border-bottom: 1px solid var(--imm-line);
		background: var(--imm-ground);
		text-align: left;
		font-family: var(--imm-display);
		font-size: .72rem;
		font-weight: 600;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--imm-muted);
	}

	.imm-vt__row > th,
	.imm-vt__row > td,
	.imm-vt__detail > td {
		display: table-cell;
	}

	.imm-vt__row > th,
	.imm-vt__row > td {
		padding: .6rem 1rem;
		vertical-align: middle;
	}

	.imm-vt__row + .imm-vt__detail + .imm-vt__row {
		border-top: 0;
	}

	.imm-vt__row + .imm-vt__detail + .imm-vt__row > * {
		border-top: 1px solid var(--imm-line-soft);
	}

	.imm-vt__full {
		display: block;
	}

	.imm-vt__row .imm-vt__contact {
		display: inline-flex;
	}

	.imm-vt__row > .imm-vt__numcell {
		display: table-cell;
	}

	.imm-vt__logo {
		flex-basis: 3.25rem;
		height: 2rem;
	}

	.imm-vt__row > .imm-vt__role {
		font-family: inherit;
		font-size: inherit;
		font-weight: 400;
		letter-spacing: normal;
		text-transform: none;
		color: inherit;
	}

	.imm-vt__row > .imm-vt__action {
		text-align: right;
		white-space: nowrap;
	}

	.imm-vt__toggle {
		position: relative;
		margin-left: .35rem;
		padding: .3rem .5rem;
	}

	.imm-vt__toggle::after {
		content: none;
	}

	.imm-vt__c-role {
		width: 8.5rem;
	}

	.imm-vt__c-num {
		width: 12.5rem;
	}

	.imm-vt__c-act {
		width: 9.5rem;
	}

	.imm-vt__rows {
		padding: .9rem 1rem 1rem 5.1rem;
	}

}

/* From 62em the word "Details" joins its chevron. */
@media (min-width: 62em) {
	.imm-vt__toggle-text {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	.imm-vt__c-role {
		width: 9.5rem;
	}

	.imm-vt__c-act {
		width: 8rem;
	}
}

/* Scope and "who can order" (once filled in Site Content): one column from 75em, both stacked in it,
   sharing the room left with the vehicle column. Below 75em it is collapsed to nothing — not
   display: none, which would leave the records' colspan an extra, empty column in the fixed layout —
   and hidden from screen readers too; the values are in each record instead (never both). */
@media (min-width: 48em) and (max-width: 74.99em) {
	.imm-vt__table .imm-vt__c-opt,
	.imm-vt__row > .imm-vt__opt {
		display: table-cell;
		width: 0;
		padding: 0;
		overflow: hidden;
		visibility: hidden;
		font-size: 0;
	}

	/* Emptied too: text in a zero-width cell would wrap a letter per line and stretch the row. */
	.imm-vt__row > .imm-vt__opt > * {
		display: none;
	}
}

@media (min-width: 75em) {
	.imm-vt__row > .imm-vt__opt {
		display: table-cell;
	}

	.imm-vt__field--col {
		display: none;
	}

	.imm-vt__rows {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.imm-vt__filter,
	.imm-vt__contact,
	.imm-vt__row,
	.imm-vt__chev,
	.imm-vt__all,
	.imm-vt.is-ready .imm-vt__panel,
	.imm-vt.is-ready .imm-vt__detail.is-open .imm-vt__panel {
		transition: none;
	}
}

/* The copy button beside a contract number (every vehicle block). Hidden until the script finds a
   working Clipboard API; the tick shows for a moment after a copy. */
.imm-copy {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-left: .2rem;
	padding: 0;
	vertical-align: middle;
	border: 1px solid transparent;
	border-radius: var(--imm-r);
	background: none;
	color: currentColor;
	opacity: .72;
	cursor: pointer;
	transition: opacity .2s, border-color .2s;
}

.imm-copy[hidden] {
	display: none;
}

.imm-copy:hover {
	opacity: 1;
	border-color: color-mix(in srgb, currentColor 28%, transparent);
}

.imm-copy svg {
	grid-area: 1 / 1;
	width: 16px;
	height: 16px;
	transition: opacity .2s;
}

.imm-copy__done,
.imm-copy.is-copied .imm-copy__icon {
	opacity: 0;
}

.imm-copy.is-copied .imm-copy__done {
	opacity: 1;
}

/* ---------- partners (logo marquee) ---------- */
.imm-partners {
	background: var(--imm-paper);
	border-bottom: 1px solid var(--imm-line-soft);
}

/* A logo strip, not a full-bleed ticker: narrower than the page on wide
   screens and faded at both edges. The fades are overlays in the section
   colour, so they match the section's background. */
.imm-marquee {
	position: relative;
	overflow: visible;
	padding-block: 1rem 1.5rem;
	margin-top: 1.25rem;
	max-width: min(100% - 2rem, 76rem);
	margin-inline: auto;
}

.imm-marquee::before,
.imm-marquee::after {
	display: none;
}

.imm-marquee__track {
	display: block;
	width: auto;
	animation: none;
	will-change: auto;
}

/* Rows that wrap and centre whatever is left over, so any number of partners stays centred
   (a grid left-aligns an incomplete last row). --imm-logo-cols sets how many share a row. */
.imm-marquee__list {
	--imm-logo-cols: 2;
	--imm-logo-gap: .75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--imm-logo-gap);
}

.imm-marquee__list li {
	flex: 0 0 calc((100% - (var(--imm-logo-cols) - 1) * var(--imm-logo-gap)) / var(--imm-logo-cols));
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 4.5rem;
	padding: .75rem .5rem;
	font-family: var(--imm-body);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
	color: var(--imm-ink-2);
}

/* Height by shape (the class comes from the logo's own proportions, blocks/partners/render.php) so
   the marks weigh about the same. */
.imm-marquee__list img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 2.4rem;
	object-fit: contain;
	/* An edge, not an effect: light marks (GitLab's grey, Google's yellow, Siemens' teal) lift off
	   the white by a navy-tinted hairline shadow. */
	filter: drop-shadow(0 1px .6px color-mix(in srgb, var(--imm-navy) 16%, transparent));
}

.imm-marquee__list .imm-logo--compact img {
	height: 2.9rem;
}

.imm-marquee__list .imm-logo--long img {
	height: 2rem;
}

.imm-marquee__list .imm-logo--wide img {
	height: 1.7rem;
}

/* Partner logos at rest are one quiet slate row (ADR-036): every mark, whatever its brand colours,
   painted as a flat shape in the customer names' grey (--imm-muted: the filter below turns any colour
   into exactly that value; a filter cannot read a custom property), so none outshouts the page's own
   red and navy and a dense black wordmark weighs the same as a light colourful one. On hover (pointer
   devices) the mark lifts and its own colours fade in slowly over the slate, and fade back out slower
   still. Touch screens keep the slate row; reduced motion gets the colour change without the lift or
   the fade. */
.imm-logo {
	display: grid;
	place-items: center;
	max-width: 100%;
	transition: transform .4s var(--imm-ease-lift);
}

.imm-logo > img {
	grid-area: 1 / 1;
}

.imm-marquee__list .imm-logo__mono {
	filter: brightness(0) saturate(100%) invert(40%) sepia(6%) saturate(934%) hue-rotate(170deg) brightness(96%) contrast(93%);
	transition: opacity .9s ease;
}

.imm-marquee__list .imm-logo__color {
	opacity: 0;
	transition: opacity .9s ease, filter .4s ease;
}

@media (hover: hover) {
	.imm-marquee__list li:hover .imm-logo {
		transform: translateY(-3px) scale(1.06);
	}

	.imm-marquee__list li:hover .imm-logo__mono {
		opacity: 0;
		transition-duration: .6s;
	}

	.imm-marquee__list li:hover .imm-logo__color {
		opacity: 1;
		transition-duration: .6s, .4s;
		filter: drop-shadow(0 5px 7px color-mix(in srgb, var(--imm-navy) 14%, transparent));
	}
}

@media (prefers-reduced-motion: reduce) {
	.imm-logo,
	.imm-marquee__list .imm-logo__mono,
	.imm-marquee__list .imm-logo__color {
		transition: none;
	}

	.imm-marquee__list li:hover .imm-logo {
		transform: none;
	}
}

.imm-marquee__list[aria-hidden="true"] {
	display: none;
}

.imm-marquee__toggle-wrap {
	display: none;
}

@keyframes imm-marquee {
	to { transform: translateX(calc(-50% - 2.5rem)); }
}

@media (min-width: 48em) {
	.imm-marquee__list {
		--imm-logo-cols: 5;
		--imm-logo-gap: 1rem;
	}
}

@media (min-width: 62em) {
	.imm-marquee {
		padding-block: 1.25rem 1.75rem;
	}

	.imm-marquee__list {
		--imm-logo-gap: 1.25rem;
		max-width: 64rem;
		margin-inline: auto;
	}

	.imm-marquee__list li {
		min-height: 5rem;
	}

	.imm-marquee__list img {
		height: 2.75rem;
	}

	.imm-marquee__list .imm-logo--compact img {
		height: 3.3rem;
	}

	.imm-marquee__list .imm-logo--long img {
		height: 2.3rem;
	}

	.imm-marquee__list .imm-logo--wide img {
		height: 1.95rem;
	}
}

/* Pause: the visible toggle only (a labelled checkbox — no JS needed). WCAG 2.2.2 wants a way to
   stop anything that animates for more than five seconds, and the control has to be usable by
   keyboard and touch, so hover-pause does not count on its own. There is no pause on hover: the
   row would stop whenever the pointer crosses it. */
.imm-marquee:has(.imm-marquee__check:checked) .imm-marquee__track {
	animation-play-state: paused;
}

.imm-marquee__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--imm-line);
	background: var(--imm-paper);
	color: var(--imm-muted);
	cursor: pointer;
	margin: .75rem auto 0;
}

.imm-marquee__toggle svg {
	width: 16px;
	height: 16px;
}

.imm-marquee__toggle:hover {
	color: var(--imm-ink);
	border-color: var(--imm-steel);
}

.imm-marquee__check:focus-visible + .imm-marquee__toggle-wrap .imm-marquee__toggle {
	outline: 3px solid var(--imm-focus);
	outline-offset: 2px;
}

.imm-marquee__toggle-wrap {
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 2; /* above the edge fades */
}

.imm-marquee__icon-play,
.imm-marquee:has(.imm-marquee__check:checked) .imm-marquee__icon-pause {
	display: none;
}

.imm-marquee:has(.imm-marquee__check:checked) .imm-marquee__icon-play {
	display: block;
}

/* Reduced motion: a static, wrapped, centred row; no duplicate list, no toggle. */
@media (prefers-reduced-motion: reduce) {
	html:not([data-imm-motion="full"]) .imm-marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	html:not([data-imm-motion="full"]) .imm-marquee__track {
		animation: none;
		width: auto;
		justify-content: center;
	}

	html:not([data-imm-motion="full"]) .imm-marquee__list {
		flex-wrap: wrap;
		justify-content: center;
	}

	html:not([data-imm-motion="full"]) .imm-marquee__list[aria-hidden="true"],
	html:not([data-imm-motion="full"]) .imm-marquee__toggle-wrap {
		display: none;
	}
}

/* ---------- about + stats, then careers + contact (the closing block, ADR-012) ---------- */
.imm-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.imm-about__copy {
	max-width: 42rem;
}

.imm-about h2 {
	font-size: clamp(1.5rem, 1.6vw + .7rem, 2rem);
	line-height: 1.2;
	max-width: 20ch;
	color: var(--imm-ink);
}

.imm-about p:not(.imm-eyebrow) {
	margin-top: 1rem;
	max-width: 58ch;
	color: var(--imm-ink-2);
}

.imm-about .imm-eyebrow {
	margin-top: 0;
}

.imm-stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
}

.imm-stat {
	container-type: inline-size; /* the figure sizes to its own tile (below) */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .35rem;
	padding: .9rem;
	background: var(--imm-paper);
	border: 1px solid var(--imm-line-soft);
	border-radius: var(--imm-r-card);
	box-shadow: var(--imm-elev-rest);
}

.imm-stat__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid var(--imm-steel);
	display: grid;
	place-items: center;
	margin-bottom: .35rem;
}

.imm-stat__icon svg {
	width: 20px;
	height: 20px;
	color: var(--imm-steel);
}

.imm-stat b {
	display: block;
	font-family: var(--imm-body);
	font-weight: 700;
	font-size: 2.25rem;
	letter-spacing: -.03em;
	line-height: 1;
	color: var(--imm-ink);
	font-variant-numeric: tabular-nums;
}

.imm-stat > span:last-child {
	display: block;
	font-size: .82rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--imm-muted);
	line-height: 1.35;
}

@media (min-width: 48em) {
	/* A single row with dividers. */
	.imm-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		background: var(--imm-paper);
		border: 1px solid var(--imm-line-soft);
		border-radius: var(--imm-r-card);
		box-shadow: var(--imm-elev-rest);
		overflow: hidden;
	}

	.imm-stat {
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		padding: 1.25rem 1rem;
	}

	.imm-stat + .imm-stat {
		border-left: 1px solid var(--imm-line-soft);
	}
}

@media (min-width: 62em) {
	.imm-about__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: 3.5rem;
	}
}

/* Where the stats share the row with the copy but the page is not yet wide (62–75em), four tiles in
   one row leave each about 90px: two by two keeps the figures at full size. */
@media (min-width: 62em) and (max-width: 74.99em) {
	.imm-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.imm-stat:nth-child(odd) {
		border-left: 0;
	}

	.imm-stat:nth-child(n+3) {
		border-top: 1px solid var(--imm-line-soft);
	}
}

/* ---------- careers + contact cards (inside the About block) ---------- */
.imm-close {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin-top: clamp(2.25rem, 4vw, 3.5rem);
}

.imm-close__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .75rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--imm-paper);
	border: 1px solid var(--imm-line-soft);
	border-radius: var(--imm-r-card);
	box-shadow: var(--imm-elev-rest);
}

.imm-close__card .imm-eyebrow {
	margin: 0;
}

.imm-close__card h3 {
	font-size: clamp(1.25rem, 1.2vw + .7rem, 1.6rem);
	line-height: 1.2;
	color: var(--imm-ink);
}

.imm-close__card p:not(.imm-eyebrow) {
	margin: 0;
	color: var(--imm-muted);
	max-width: 42ch;
}

.imm-close__card .imm-btn {
	margin-top: auto;
	width: 100%;
}

/* The Contact card closes the page on the strong navy. */
.imm-close__card--contact {
	--imm-focus: var(--imm-on-navy-link);
	background: var(--imm-navy);
	border-color: transparent;
	color: var(--imm-on-navy);
}

.imm-close__card--contact .imm-eyebrow,
.imm-close__card--contact p:not(.imm-eyebrow) {
	color: var(--imm-on-navy-muted);
}

.imm-close__card--contact h3 {
	color: var(--imm-on-navy);
}

.imm-close__lines {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
}

.imm-close__lines a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--imm-on-navy);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--imm-on-navy) 35%, transparent);
	padding-bottom: .1rem;
}

.imm-close__lines a:hover,
.imm-close__lines a:focus-visible {
	border-bottom-color: var(--imm-on-navy);
}

.imm-close__lines svg {
	width: 16px;
	height: 16px;
	color: var(--imm-on-navy-muted);
}

@media (min-width: 36em) {
	.imm-close__card .imm-btn {
		width: auto;
	}
}

@media (min-width: 48em) {
	.imm-close {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

/* ---------- footer ---------- */
.imm-footer {
	--imm-focus: var(--imm-on-navy-link);
	background: var(--imm-navy);
	color: var(--imm-on-navy-muted);
	padding-block: 2.75rem 1.5rem;
	font-size: .9375rem;
}

/* Phones: brand and contact span the width; the two short link lists ("What we do", "Company")
   sit side by side instead of adding two more screens of scrolling. */
.imm-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.25rem 1.5rem;
}

.imm-footer__brand,
.imm-footer__contact {
	grid-column: 1 / -1;
}

.imm-footer h3 {
	font-family: var(--imm-display);
	text-transform: uppercase;
	font-size: .78rem;
	letter-spacing: .14em;
	font-weight: 600;
	color: var(--imm-on-navy);
	margin-bottom: .75rem;
}

.imm-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .2rem;
}

.imm-footer a {
	color: var(--imm-on-navy);
	text-decoration: none;
	display: inline-block;
	padding-block: .28rem;
}

.imm-footer a:hover {
	text-decoration: underline;
	color: var(--imm-on-navy);
}

.imm-footer__legal {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, var(--imm-on-navy) 14%, transparent);
	font-size: .8rem;
	display: flex;
	justify-content: space-between;
	gap: .5rem 1rem;
	flex-wrap: wrap;
}

.imm-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* The logo straight on the navy: its white rendition (the swoosh and wordmark white, the red dot kept),
   no box: a white plate would read as a sticker on the dark footer. */
.imm-footer__logo {
	margin: 0 0 1rem;
	width: 10.5rem;
}

.imm-footer__logo a,
.imm-footer__logo img {
	display: block;
}

.imm-footer__logo img {
	width: 100%;
	height: auto;
}

.imm-footer__brand .wp-block-heading {
	font-family: var(--imm-body);
	text-transform: none;
	font-size: 1.05rem;
	letter-spacing: .01em;
	margin-bottom: .55rem;
}

.imm-footer__company {
	margin-top: 0;
}

.imm-footer__contact > p {
	margin-top: .8rem;
	max-width: 28ch;
}

@media (min-width: 48em) {
	.imm-footer__cols {
		grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
		gap: 2.25rem;
	}

	.imm-footer__brand,
	.imm-footer__contact {
		grid-column: auto;
	}

	.imm-footer__company {
		margin-top: 0;
	}
}

/* A tile chosen by keyboard rises like a hovered one; pressed, it settles back onto the page. */
.imm-tile:focus-visible {
	box-shadow: var(--imm-elev-hover);
	transform: translateY(-2px);
}

.imm-tile:active {
	box-shadow: var(--imm-elev-press);
	transform: translateY(0);
	transition-duration: .08s;
}

/* ---------- hover effects only where hover exists ---------- */
@media (hover: hover) and (pointer: fine) {
	.imm-tile:hover,
	.imm-card:hover {
		border-color: color-mix(in srgb, var(--imm-steel) 45%, var(--imm-line-soft));
		box-shadow: var(--imm-elev-hover);
		transform: translateY(-2px);
	}

	.imm-btn svg {
		transition: transform .2s;
	}

	.imm-btn:hover svg {
		transform: translateX(3px);
	}

}

/* ---------- reveal on entry ----------
   JS adds .imm-motion-ready only when IntersectionObserver and motion are
   available, so readable content is never hidden if JavaScript is unavailable. */
@media (prefers-reduced-motion: no-preference) {
	body.imm-motion-ready .imm-reveal {
		opacity: 0;
		translate: 0 24px;
		/* The reveal (opacity, translate) and the hover lift (transform, shadow, border, fill) share one
		   list, so a revealed card still lifts smoothly; only the reveal waits for its stagger delay. */
		transition:
			opacity .65s cubic-bezier(.22, .61, .36, 1),
			translate .65s cubic-bezier(.22, .61, .36, 1),
			transform var(--imm-dur-lift) var(--imm-ease-lift),
			box-shadow var(--imm-dur-lift) var(--imm-ease-lift),
			border-color var(--imm-dur-lift) var(--imm-ease-lift),
			background-color var(--imm-dur-lift) var(--imm-ease-lift);
		transition-delay: var(--imm-reveal-delay, 0ms), var(--imm-reveal-delay, 0ms), 0s, 0s, 0s, 0s;
		will-change: opacity, translate;
	}

	body.imm-motion-ready .imm-reveal.imm-is-visible {
		opacity: 1;
		translate: 0 0;
		will-change: auto;
	}
}

/* ---------- ?imm-motion=full preview: same rules as the no-preference blocks above,
   applied when JS stamps html[data-imm-motion="full"] on a Reduce-Motion machine. ---------- */
html[data-imm-motion="full"] .imm-hero__copy > * {
		animation: imm-fade-up .7s cubic-bezier(.22, .61, .36, 1) both;
	}

html[data-imm-motion="full"] .imm-hero__copy > :nth-child(2) { animation-delay: .08s; }

html[data-imm-motion="full"] .imm-hero__copy > :nth-child(3) { animation-delay: .16s; }

html[data-imm-motion="full"] .imm-hero__copy > :nth-child(4) { animation-delay: .26s; }

html[data-imm-motion="full"] .imm-hero__media img {
		transform-origin: 65% top;
		animation: imm-drift 26s ease-out both;
	}

html[data-imm-motion="full"] body.imm-motion-ready .imm-reveal {
		opacity: 0;
		translate: 0 24px;
		/* The reveal (opacity, translate) and the hover lift (transform, shadow, border, fill) share one
		   list, so a revealed card still lifts smoothly; only the reveal waits for its stagger delay. */
		transition:
			opacity .65s cubic-bezier(.22, .61, .36, 1),
			translate .65s cubic-bezier(.22, .61, .36, 1),
			transform var(--imm-dur-lift) var(--imm-ease-lift),
			box-shadow var(--imm-dur-lift) var(--imm-ease-lift),
			border-color var(--imm-dur-lift) var(--imm-ease-lift),
			background-color var(--imm-dur-lift) var(--imm-ease-lift);
		transition-delay: var(--imm-reveal-delay, 0ms), var(--imm-reveal-delay, 0ms), 0s, 0s, 0s, 0s;
		will-change: opacity, translate;
	}

html[data-imm-motion="full"] body.imm-motion-ready .imm-reveal.imm-is-visible {
		opacity: 1;
		translate: 0 0;
		will-change: auto;
	}

/* ---------- motion & print ---------- */
/* Also honoured when JS stamps html[data-imm-motion="reduced"] (same rules as the media query). */
html[data-imm-motion="reduced"] :is(body.imm, body.editor-styles-wrapper) *:not(.imm-nav__progress),
html[data-imm-motion="reduced"] :is(body.imm, body.editor-styles-wrapper) *::before,
html[data-imm-motion="reduced"] :is(body.imm, body.editor-styles-wrapper) *::after {
	transition: none !important;
	animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
	/* The scroll-progress line only mirrors the user's own scrolling, so it stays.
	   html[data-imm-motion="full"] (the ?imm-motion=full preview override) opts out. */
	html:not([data-imm-motion="full"]) :is(body.imm, body.editor-styles-wrapper) *:not(.imm-nav__progress),
	html:not([data-imm-motion="full"]) :is(body.imm, body.editor-styles-wrapper) *::before,
	html:not([data-imm-motion="full"]) :is(body.imm, body.editor-styles-wrapper) *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}

	html {
		scroll-behavior: auto;
	}

	.imm-tile,
	.imm-card {
		transition: none;
	}

	.imm-tile:hover,
	.imm-tile:focus-visible,
	.imm-card:hover {
		transform: none;
	}
}

@media print {
	.imm-reveal,
	.imm-hero__copy > *,
	.imm-hero__media img,
	.imm-sec-head h2::after {
		animation: none !important;
		opacity: 1 !important;
		translate: none !important;
		scale: none !important;
	}

	.imm-marquee__track {
		animation: none !important;
	}

	.imm-nav,
	.imm-topbar,
	.imm-chat,
	.imm-chat-fab,
	.imm-askbar,
	.imm-tiles,
	.imm-hero__media {
		display: none !important;
	}

	details.imm-veh .imm-veh__detail {
		display: block !important;
	}

	.imm-vehicles,
	.imm-panel,
	.imm-vehicles > .imm-wrap,
	.imm-vx {
		background: #fff;
		color: #000;
	}

	.imm-vx__nav {
		display: none;
	}
}

/* ==========================================================================
   Block-built markup (ADR-015). The page is core blocks + immersion/* blocks;
   these rules style that output. They come last on purpose: same specificity
   as the rules above, later wins.
   ========================================================================== */

/* Core wrappers carry no chrome of their own. */
.imm-section figure.wp-block-image,
.imm-topbar figure,
.imm-nav figure {
	margin: 0;
}

.imm-section .wp-block-heading,
.imm-footer .wp-block-heading {
	margin: 0;
}

/* Masked glyphs (the icon set as CSS): buttons cannot contain SVG in the editor. */
.imm-glyph::before,
.imm-glyph::after,
.imm-arrow .wp-block-button__link::after,
.imm-ico-chat .wp-block-button__link::after,
.imm-ico-phone .wp-block-button__link::before,
.imm-ico-mail .wp-block-button__link::before,
.imm-sec-more::after,
.imm-topbar__mail .wp-block-button__link::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: var(--imm-glyph) center / contain no-repeat;
	mask: var(--imm-glyph) center / contain no-repeat;
	transition: transform .2s;
}

.imm-arrow .wp-block-button__link::after,
.imm-sec-more::after { --imm-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }
.imm-ico-chat .wp-block-button__link::after { --imm-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.imm-ico-phone .wp-block-button__link::before { --imm-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E"); }
.imm-ico-mail .wp-block-button__link::before,
.imm-topbar__mail .wp-block-button__link::before { --imm-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E"); }

.imm-sec-more:hover::after {
	transform: translateX(3px);
}

/* ---------- buttons: every CTA is a core Button; the looks are block styles ---------- */
:is(body.imm, body.editor-styles-wrapper) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 44px;
	padding: .8rem 1.3rem;
	border-radius: var(--imm-r);
	border: 1.5px solid var(--imm-red-fill);
	font-family: var(--imm-body);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	background: var(--imm-red-fill);
	color: #fff;
	transition: background .15s, color .15s, border-color .15s;
}

:is(body.imm, body.editor-styles-wrapper) .wp-block-button__link:hover {
	background: var(--imm-red-fill-hover);
	border-color: var(--imm-red-fill-hover);
	color: #fff;
}

:is(body.imm, body.editor-styles-wrapper) .is-style-imm-outline .wp-block-button__link {
	background: transparent;
	color: var(--imm-outline);
	border-color: var(--imm-outline);
}

:is(body.imm, body.editor-styles-wrapper) .is-style-imm-outline .wp-block-button__link:hover {
	background: var(--imm-outline);
	color: #fff;
}

:is(body.imm, body.editor-styles-wrapper) .is-style-imm-white .wp-block-button__link {
	background: #fff;
	color: var(--imm-navy);
	border-color: #fff;
}

:is(body.imm, body.editor-styles-wrapper) .is-style-imm-white .wp-block-button__link:hover {
	background: #e8eaee;
	color: var(--imm-navy);
}

:is(body.imm, body.editor-styles-wrapper) .is-style-imm-link .wp-block-button__link {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	min-height: 0;
	color: inherit;
	font-weight: 600;
	gap: .45rem;
}

:is(body.imm, body.editor-styles-wrapper) .is-style-imm-link .wp-block-button__link:hover {
	background: none;
	color: inherit;
}

/* Chat buttons exist only with a chat provider; their e-mail twin only without one. */
body.imm:not(.imm-has-chat) .imm-open-chat,
body.imm.imm-has-chat .imm-no-chat {
	display: none;
}

/* ---------- top bar ---------- */
.imm-topbar__list {
	display: flex;
	align-items: center;
	gap: .9rem;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.imm-topbar__list > * + *::before {
	content: "|";
	margin-right: .9rem;
	opacity: .45;
}

@media (max-width: 25em) {
	/* Keep both utility links inside the narrow phone viewport while retaining
	   their 34px hit areas. The separator has no useful meaning between icons. */
	.imm-topbar__tools {
		gap: .45rem;
	}

	.imm-topbar__tools > * + *::before {
		content: none;
		margin: 0;
	}
}

.imm-topbar p {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	white-space: nowrap; /* the paragraph block resets white-space; the bar never wraps */
}

.imm-topbar .wp-block-buttons,
.imm-topbar .wp-block-button {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	flex: none;
	line-height: 0;
	margin: 0;
}

.imm-topbar a,
:is(body.imm, body.editor-styles-wrapper) .imm-topbar .wp-block-button__link {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: var(--imm-topbar-h);
	padding: 0 .55rem;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.imm-topbar a:hover,
:is(body.imm, body.editor-styles-wrapper) .imm-topbar .wp-block-button__link:hover {
	color: var(--imm-on-navy);
}

.imm-topbar__tools > :last-child a,
:is(body.imm, body.editor-styles-wrapper) .imm-topbar__tools .imm-topbar__mail .wp-block-button__link {
	margin-right: -.55rem;
}

/* Icon-only links: a fixed 34px box (16px glyph + 9px each side);
   the label stays in the DOM for assistive tech. */
:is(body.imm, body.editor-styles-wrapper) .imm-topbar__mail .wp-block-button__link {
	font-size: 0;
	line-height: 0;
	gap: 0;
	width: 34px;
	padding: 0;
	justify-content: center;
	/* no overflow: hidden — the box is exactly the glyph's hit target, and clipping it cuts the
	   envelope wherever font metrics nudge the zero-size label by a pixel */
}

.imm-topbar__mail .wp-block-button__link::before {
	width: 16px;
	height: 16px;
	background: currentColor;
}

.imm-topbar__social.wp-block-social-links {
	margin: 0;
	gap: 0;
}

.imm-topbar__social .wp-block-social-link a {
	padding: 0 .55rem;
	color: inherit;
}

.imm-topbar__social svg {
	width: 16px;
	height: 16px;
}

/* ---------- sticky nav from Site Logo + Site Title + Navigation + Buttons ---------- */
.imm-brand {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-right: auto;
	min-height: 44px;
}

.imm-brand .wp-block-site-logo {
	margin: 0;
	line-height: 0;
}

.imm-brand .wp-block-site-logo img {
	height: 42px;
	width: auto;
	max-width: none;
	transition: height .2s;
}

.imm-nav.is-condensed .imm-brand .wp-block-site-logo img {
	height: 34px;
}

/* The bundled logo is the brand until a Site Logo is set in WordPress. */
.imm-brand .imm-brand__fallback {
	margin: 0;
	line-height: 0;
}

/* The official logo (640×310, the swoosh around the wordmark; the footer shows it 10.5rem wide) needs
   more height than a flat wordmark to read: 52px in the 64px phone bar, 68px in the 84px desktop bar,
   a step smaller in the condensed bar. Sized by its width (height × 640/310) with the image at 100%
   and its natural height: the Site Editor puts height: auto on every image block, so a CSS height
   would be ignored there and the editor would show the file at full size. The aspect ratio reserves
   the box before the image loads (no layout shift). */
.imm-brand .imm-brand__fallback {
	--imm-logo-h: 52px;
	width: calc(var(--imm-logo-h) * 640 / 310);
	transition: width .2s;
}

/* The exact height on the page (the editor's inline height: auto overrides it there, and the width
   above then gives the same size to a fraction of a pixel). */
.imm-brand .imm-brand__fallback img {
	width: 100%;
	height: var(--imm-logo-h);
	max-width: none;
	aspect-ratio: 640 / 310;
	object-fit: contain;
}

.imm-nav.is-condensed .imm-brand .imm-brand__fallback {
	--imm-logo-h: 44px;
}

@media (min-width: 62em) {
	.imm-brand .imm-brand__fallback {
		--imm-logo-h: 68px;
	}

	.imm-nav.is-condensed .imm-brand .imm-brand__fallback {
		--imm-logo-h: 52px;
	}
}

.imm-brand:has(.wp-block-site-logo img) .imm-brand__fallback,
.imm-brand:has(.wp-block-site-logo img) .imm-brand__word {
	display: none;
}

.imm-brand__word {
	margin: 0;
	font-family: var(--imm-body);
	font-weight: 700;
	font-size: 1.3rem;
	line-height: .95;
	letter-spacing: .02em;
}

.imm-brand__word a {
	color: var(--imm-brand-word);
	text-decoration: none;
}

.imm-nav__cta {
	order: 1;
	margin-right: .5rem;
}

:is(body.imm, body.editor-styles-wrapper) .imm-nav__cta .wp-block-button__link {
	min-height: 40px;
	padding: .55rem .65rem;
	font-size: .9rem;
	white-space: nowrap;
}

.imm-nav__menu {
	order: 2;
	font-size: 1rem;
	width: auto; /* core gives the responsive nav 100% width; it is one flex item here */
	flex: 0 0 auto;
}

@media (max-width: 25em) {
	/* Keep the logo, CTA and menu toggle on one balanced row on the narrowest phones. */
	.imm-nav .imm-wrap {
		gap: .8rem;
	}

	.imm-nav__cta {
		margin-right: .25rem;
	}
}

.imm-nav__menu .wp-block-navigation__responsive-container-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--imm-line);
	border-radius: var(--imm-r);
	color: var(--imm-ink);
	background: none;
	padding: 0;
}

.imm-nav__menu .wp-block-navigation__responsive-container-open svg {
	width: 22px;
	height: 22px;
}

/* While the phone menu is open the condensed bar must not carry a
   backdrop-filter: a filter makes the bar the containing block for the
   overlay's position:fixed, which then gets clipped to the bar's 56px. */
.imm-nav:has(.wp-block-navigation__responsive-container.is-menu-open),
.imm-nav.is-condensed:has(.wp-block-navigation__responsive-container.is-menu-open) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: var(--imm-paper);
}

/* Open overlay (phones): theme colours, our type. Core sets
   white/black on the open overlay with four classes; these outrank it. */
.imm-nav .imm-nav__menu.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--imm-paper);
	color: var(--imm-ink);
	padding: 1.5rem var(--imm-gutter);
}

.imm-nav .imm-nav__menu.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
.imm-nav .imm-nav__menu.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--imm-ink);
}

.imm-nav__menu .wp-block-navigation-item__content {
	font-family: var(--imm-body);
	font-weight: 500;
	font-size: 1.05rem;
	color: var(--imm-ink);
	text-decoration: none;
	padding: .6rem 0;
}

.imm-nav__menu .wp-block-navigation-item__content:hover {
	color: var(--imm-ink);
}

.imm-nav__menu a[aria-current="true"] .wp-block-navigation-item__label,
.imm-nav__menu a[aria-current="true"] {
	color: var(--imm-red);
}

@media (min-width: 62em) {
	.imm-nav__menu {
		order: 0;
	}

	.imm-nav__cta {
		order: 1;
		margin-right: 0;
	}

	:is(body.imm, body.editor-styles-wrapper) .imm-nav__cta .wp-block-button__link {
		min-height: 44px;
		padding: .8rem 1.3rem;
		font-size: 1rem;
	}

	/* The Navigation block's overlay is "always" (its own breakpoint is 600px);
	   from 62em we lay the menu out inline ourselves. */
	.imm-nav__menu .wp-block-navigation__responsive-container-open.always-shown,
	.imm-nav__menu .wp-block-navigation__responsive-container-close {
		display: none;
	}

	.imm-nav__menu .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
		display: block;
		position: static;
		inset: auto;
		width: auto;
		background: none;
		padding: 0;
		z-index: auto;
	}

	.imm-nav__menu .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-close,
	.imm-nav__menu .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
	.imm-nav__menu .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
		display: block;
		width: auto;
		padding: 0;
	}

	.imm-nav__menu .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__container {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1.6rem;
	}

	.imm-nav__menu .wp-block-navigation-item__content {
		font-size: .95rem;
		padding: .5rem 0;
		display: inline-block;
		position: relative;
	}

	.imm-nav__menu a[aria-current="true"],
	.imm-nav__menu a[aria-current="true"] .wp-block-navigation-item__label {
		color: var(--imm-ink);
	}

	/* Underline slides in from the left. */
	.imm-nav__menu .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: .15rem;
		height: 2px;
		background: var(--imm-steel);
		scale: 0 1;
		transform-origin: 0 50%;
		transition: scale .25s cubic-bezier(.22, .61, .36, 1);
	}

	.imm-nav__menu .wp-block-navigation-item__content:hover::after,
	.imm-nav__menu a[aria-current="true"]::after {
		scale: 1 1;
	}
}

/* ---------- hero image + separate SDVOSB strip (ADR-029) ---------- */
.imm-hero__media img {
	max-width: none;
}

/* Keep the secondary action readable and touch-sized on the navy surface. */
:is(body.imm, body.editor-styles-wrapper) .imm-hero__cta .is-style-imm-link .wp-block-button__link {
	color: var(--imm-on-navy-link);
	min-height: 44px;
	padding-block: .5rem;
	line-height: 1.4;
}

:is(body.imm, body.editor-styles-wrapper) .imm-hero__cta .is-style-imm-link .wp-block-button__link:hover {
	color: var(--imm-on-navy);
	text-decoration: underline;
}

.imm-sdvosb {
	background: var(--imm-sdvosb-ground);
	color: var(--imm-sdvosb-ink);
	padding-block: 1.5rem;
}

.imm-sdvosb__inner {
	display: grid;
	gap: .5rem;
}

.imm-sdvosb__designation {
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.5;
	max-width: 48ch;
}

.imm-sdvosb__experience {
	color: var(--imm-sdvosb-muted);
	font-size: 1rem;
}

@media (min-width: 48em) {
	.imm-sdvosb { padding-block: 1.75rem; }
	.imm-sdvosb__designation { font-size: 1.25rem; }
}

@media (min-width: 62em) {
	.imm-sdvosb__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 2rem;
	}
}

/* Hero badges: markup that front pages saved in the Site Editor may carry. */
.imm-hero__badges {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.25rem;
	margin: 2rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--imm-line-soft);
}

.imm-badge {
	display: flex;
	align-items: center;
	gap: .65rem;
}

.imm-badge__title {
	font-family: var(--imm-body);
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: -.005em;
	line-height: 1.15;
	margin: 0;
}

.imm-badge__sub {
	font-size: .78rem;
	color: var(--imm-muted);
	line-height: 1.35;
	margin: 0;
}

@media (min-width: 75em) {
	.imm-hero__badges {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		margin-top: 2.25rem;
		padding-top: 1.5rem;
		/* fit-content, not max-content: sizes to the four badges' own width
		   (so the border-top doesn't trail empty space) but can never exceed
		   the copy column that bounds it — the fade behind the photo is sized
		   for that column, so the row must never reach past it. If content
		   ever grows past this width, flex-wrap sends the overflow to a
		   second row inside the same column instead of over the photo. */
		width: fit-content;
	}

	.imm-badge__sub {
		max-width: 18ch;
	}
}

/* Those saved copies sit on the navy hero; keep their text and icons readable. */
.imm-hero__badges {
	color: var(--imm-on-navy);
	border-top-color: color-mix(in srgb, var(--imm-on-navy) 25%, transparent);
}

.imm-hero__badges .imm-badge__sub {
	color: var(--imm-on-navy-muted);
}

.imm-hero__badges .imm-icon {
	color: var(--imm-on-navy-link);
}

/* ---------- icon block ---------- */
.imm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.imm-icon svg {
	width: 1.05em;
	height: 1.05em;
}

.imm-icon--ring {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid var(--imm-steel);
}

.imm-icon--ring svg {
	width: 20px;
	height: 20px;
	color: var(--imm-steel);
}

/* ---------- section head / foot ---------- */
.imm-sec-head .imm-eyebrow {
	margin-bottom: .6rem;
}

.imm-sec-more {
	gap: .4rem;
}

/* ---------- capability cards: optional fixed column count (block sidebar) ---------- */
@media (min-width: 62em) {
	.imm-cards[style*="--imm-cards-cols"] {
		grid-template-columns: repeat(var(--imm-cards-cols), minmax(0, 1fr));
	}
}

/* ---------- vehicles CTA ---------- */
.imm-vcta__actions {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
}

@media (max-width: 35.99em) {
	.imm-vtabs__tab {
		flex: 1 1 auto;
		justify-content: center;
		min-width: 0;
	}

	.imm-veh__logo {
		max-height: 84px;
	}

	.imm-veh__detail {
		margin-inline: 1rem;
	}

	.imm-vcta__actions,
	.imm-vcta__actions .wp-block-button,
	.imm-vcta__actions .wp-block-button__link {
		width: 100%;
	}
}

@media (min-width: 62em) {
	.imm-vtabs__bar {
		flex-wrap: nowrap;
		overflow-x: auto;
	}

	.imm-vtabs__tab {
		padding-inline: 1rem;
	}

	.imm-veh__logo {
		max-height: 108px;
	}
}

/* ---------- partners: static row variant ---------- */
.imm-marquee--static {
	-webkit-mask-image: none;
	mask-image: none;
}

.imm-marquee--static::before,
.imm-marquee--static::after {
	display: none;
}

.imm-marquee--static .imm-marquee__track {
	animation: none;
	width: auto;
	justify-content: center;
}

/* The rows' own gap (--imm-logo-gap) sizes each logo's share of a row; a wider gap here would push
   the fifth logo onto the next row. */
.imm-marquee--static .imm-marquee__list {
	flex-wrap: wrap;
	justify-content: center;
}

/* Centred rows are the default layout; the pause control belongs to the strip below. */
.imm-marquee > .imm-marquee__toggle-wrap {
	display: none;
}

/* ---------- partners: scrolling strip variant (ADR-038) ---------- */
/* The block's "Scrolling strip" layout: the list and an aria-hidden copy side by side, moving left
   one list-width and repeating, faded at both edges, with the pause button under it (a labelled
   checkbox, so it works without JavaScript; WCAG 2.2.2). The logos keep the slate-at-rest and
   colour-on-hover treatment (ADR-036). Reduced motion gets the centred rows and no button. */
.imm-marquee:not(.imm-marquee--static) {
	--imm-mq-gap: 3.5rem;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, var(--imm-ink) 8%, var(--imm-ink) 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, var(--imm-ink) 8%, var(--imm-ink) 92%, transparent);
}

.imm-marquee:not(.imm-marquee--static) .imm-marquee__track {
	display: flex;
	width: max-content;
	gap: var(--imm-mq-gap);
	animation: imm-marquee-strip 48s linear infinite;
}

.imm-marquee:not(.imm-marquee--static) .imm-marquee__list,
.imm-marquee:not(.imm-marquee--static) .imm-marquee__list[aria-hidden="true"] {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--imm-mq-gap);
	max-width: none;
	margin: 0;
}

.imm-marquee:not(.imm-marquee--static) .imm-marquee__list li {
	flex: 0 0 auto;
}

.imm-marquee:not(.imm-marquee--static) > .imm-marquee__toggle-wrap {
	display: flex;
	justify-content: center;
}

@keyframes imm-marquee-strip {
	to {
		transform: translateX(calc(-50% - var(--imm-mq-gap) / 2));
	}
}

@media (prefers-reduced-motion: reduce) {
	html:not([data-imm-motion="full"]) .imm-marquee:not(.imm-marquee--static) {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	html:not([data-imm-motion="full"]) .imm-marquee:not(.imm-marquee--static) .imm-marquee__track {
		display: block;
		width: auto;
		animation: none;
	}

	html:not([data-imm-motion="full"]) .imm-marquee:not(.imm-marquee--static) .imm-marquee__list {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 1.25rem;
	}

	html:not([data-imm-motion="full"]) .imm-marquee:not(.imm-marquee--static) .imm-marquee__list[aria-hidden="true"],
	html:not([data-imm-motion="full"]) .imm-marquee:not(.imm-marquee--static) > .imm-marquee__toggle-wrap {
		display: none;
	}
}

/* ---------- about: stats from groups ---------- */
.imm-about__copy .imm-eyebrow {
	margin-top: 0;
}

.imm-stat .imm-icon--ring {
	margin-bottom: .35rem;
}

/* A figure can be a word ("SDVOSB", about 3.6em wide), so it is capped at a quarter of the tile's
   width: it never runs past the tile edge, and all four tiles, being equal, keep one size. */
.imm-stat__num {
	font-family: var(--imm-body);
	font-weight: 700;
	font-size: 2.25rem;               /* engines without container units */
	font-size: min(2.25rem, 25cqi);
	letter-spacing: -.03em;
	line-height: 1;
	color: var(--imm-ink);
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.imm-about .imm-stat__num,
.imm-about .imm-stat__label {
	margin-top: 0;
}

.imm-stat__label {
	font-size: .82rem;
	color: var(--imm-muted);
	line-height: 1.35;
	margin: 0;
}

/* ---------- careers + contact cards ---------- */
.imm-close__card .wp-block-buttons {
	width: 100%;
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
}

:is(body.imm, body.editor-styles-wrapper) .imm-close__card .wp-block-buttons:not(.imm-close__lines) .wp-block-button,
:is(body.imm, body.editor-styles-wrapper) .imm-close__card .wp-block-buttons:not(.imm-close__lines) .wp-block-button__link {
	width: 100%;
}

.imm-close__card .imm-close__lines {
	margin-top: 0;
	gap: .5rem 1.5rem;
}

:is(body.imm, body.editor-styles-wrapper) .imm-close__lines .wp-block-button__link {
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
	padding-bottom: .1rem;
	border-radius: 0;
}

:is(body.imm, body.editor-styles-wrapper) .imm-close__lines .wp-block-button__link:hover,
:is(body.imm, body.editor-styles-wrapper) .imm-close__lines .wp-block-button__link:focus-visible {
	border-bottom-color: #fff;
}

.imm-close__lines .wp-block-button__link::before {
	width: 16px;
	height: 16px;
	color: var(--imm-on-navy-muted);
	background: var(--imm-on-navy-muted);
}

@media (min-width: 36em) {
	:is(body.imm, body.editor-styles-wrapper) .imm-close__card .wp-block-buttons:not(.imm-close__lines) .wp-block-button,
	:is(body.imm, body.editor-styles-wrapper) .imm-close__card .wp-block-buttons:not(.imm-close__lines) .wp-block-button__link {
		width: auto;
	}
}

/* ---------- footer ---------- */
.imm-footer p {
	margin: 0;
}

.imm-footer .wp-block-heading {
	margin-bottom: .75rem;
}

.imm-footer .imm-footer__lines {
	display: grid; /* one line per contact */
	gap: .35rem;
	margin-top: .5rem;
	justify-items: start;
}

.imm-footer .imm-footer__lines .wp-block-button {
	text-align: left;
}

:is(body.imm, body.editor-styles-wrapper) .imm-footer .wp-block-button__link {
	color: #fff;
	font-weight: 400;
	padding-block: .15rem;
	font-size: inherit;
}

:is(body.imm, body.editor-styles-wrapper) .imm-footer .wp-block-button__link:hover {
	text-decoration: underline;
	color: #fff;
}

.imm-footer__legal p {
	margin: 0;
}

/* ---------- editor only ---------- */
.editor-styles-wrapper .imm-block-preview {
	pointer-events: none;
}

.editor-styles-wrapper .imm-hero__media img {
	max-width: 100%;
	min-height: 100%; /* the editor's inline height: auto would otherwise leave the photo short */
}

/* The editor makes every block position: relative (a core rule that outranks a single class); the
   hero photo must still fill the hero behind the copy, as on the page. */
@media (min-width: 56.25em) {
	.editor-styles-wrapper .imm-hero > .imm-hero__media {
		position: absolute;
	}
}

/* ---------- fact sheet band (pattern library only) ---------- */
.imm-factsheet {
	background: var(--imm-steel);
	color: #fff;
	padding-block: 2rem;
}

.imm-factsheet .imm-eyebrow,
.imm-factsheet p {
	color: rgba(255, 255, 255, .85);
}

.imm-factsheet h2 {
	font-size: 1.35rem;
	color: #fff;
}

.imm-factsheet__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
}

/* ---------- ordinary pages (templates/page.html, ADR-031) ----------
   Pages built from core blocks in the editor (a contract page, the privacy policy):
   the title in the section-heading style, then a readable rhythm for whatever the content
   holds. The root block gap is 0 (home sections space themselves), so the prose puts spacing back
   here, as top margins only. Last in the file on purpose: it must beat the block-built resets
   above (.imm-section figure.wp-block-image, .imm-section .wp-block-heading) at equal specificity. */
.imm-page__head .wp-block-post-title {
	font-size: clamp(1.9rem, 2.2vw + .9rem, 2.6rem);
	line-height: 1.15;
	color: var(--imm-ink);
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose {
	color: var(--imm-ink-2);
	line-height: 1.65;
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose > * + *,
:is(body.imm, body.editor-styles-wrapper) .imm-prose :where(.is-layout-flow, .is-layout-constrained) > * + * {
	margin-block-start: 1em;
}

/* A readable measure for text sitting directly in the page; columns, groups, tables and images
   keep the full width. */
:is(body.imm, body.editor-styles-wrapper) .imm-prose > :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote) {
	max-width: 72ch;
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose :is(h2, h3, h4, h5, h6),
:is(body.imm, body.editor-styles-wrapper) .imm-prose strong {
	color: var(--imm-ink);
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose :is(h2, h3, h4, h5, h6) {
	line-height: 1.25;
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose h2 {
	font-size: clamp(1.35rem, 1vw + 1rem, 1.65rem);
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose h3 {
	font-size: 1.25rem;
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose :is(h4, h5, h6) {
	font-size: 1.0625rem;
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose * + :is(h2, h3, h4, h5, h6) {
	margin-block-start: 1.75em;
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: .5em;
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose :is(ul, ol) {
	padding-inline-start: 1.35em;
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose li + li {
	margin-block-start: .35em;
}

/* Underlined: steel alone is not distinguishable enough from body text (WCAG 1.4.1). Long URLs,
   like the SEWP contract-holder link, wrap instead of widening the page on a phone. */
:is(body.imm, body.editor-styles-wrapper) .imm-prose a:where(:not(.wp-element-button, .wp-block-button__link)) {
	color: var(--imm-steel);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	overflow-wrap: anywhere;
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose a:where(:not(.wp-element-button, .wp-block-button__link)):hover {
	color: var(--imm-navy-2);
	text-decoration-thickness: 2px;
}

/* A phone number never breaks at its hyphens ("301-" / "286-1478" in a narrow column). */
:is(body.imm, body.editor-styles-wrapper) .imm-prose a[href^="tel:"] {
	white-space: nowrap;
	overflow-wrap: normal;
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose figcaption {
	margin-top: .5em;
	color: var(--imm-muted);
	font-size: .9rem;
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose :is(th, td) {
	border: 1px solid var(--imm-line);
	padding: .55em .75em;
	text-align: left;
	vertical-align: top;
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose th {
	background: var(--imm-chip);
	color: var(--imm-ink);
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose hr {
	border: 0;
	border-top: 1px solid var(--imm-line);
	margin-block: 2em;
	opacity: 1;
}

:is(body.imm, body.editor-styles-wrapper) .imm-prose blockquote {
	margin-inline: 0;
	padding-inline-start: 1.25em;
	border-inline-start: 2px solid var(--imm-line);
}

/* ---------- navy masthead over the hero (ADR-044) ---------- */
/* The hero's block style "Hero: navy masthead" (what the hero pattern ships with): at the top of the
   page the utility bar and the header take the hero's navy — white links, the logo's white rendition —
   and the navy eases down into a lightly tinted photo, so masthead and hero read as one piece.
   Scrolled, the header condenses back to the translucent white bar (the script's dead band keeps the
   switch from flickering at the threshold), cross-fading bar, links, menu button and logo together.
   Without the style (the "Hero (white masthead)" pattern) the masthead stays white (ADR-032). A Site
   Logo set in WordPress has no white rendition here, so with one the masthead stays white. Pure CSS:
   the same without JavaScript. */
.imm-brand {
	position: relative;
}

/* The white logo is its own image block beside the logo (editable in the header); it shows only
   under the navy masthead, laid exactly over the logo, which keeps its link and its alt text. */
.imm-brand .imm-brand__on-dark {
	display: none;
}

body:has(.imm-hero.is-style-imm-hero-navy):not(:has(.imm-brand .wp-block-site-logo img)) .imm-topbar {
	--imm-on-navy: var(--imm-paper);
	--imm-on-navy-muted: color-mix(in srgb, var(--imm-paper) 74%, var(--imm-navy));
	--imm-focus: var(--imm-on-navy-link);
	background: var(--imm-navy);
	border-bottom-color: color-mix(in srgb, var(--imm-paper) 9%, transparent);
}

body:has(.imm-hero.is-style-imm-hero-navy):not(:has(.imm-brand .wp-block-site-logo img)) .imm-nav {
	transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

body:has(.imm-hero.is-style-imm-hero-navy):not(:has(.imm-brand .wp-block-site-logo img)) .imm-nav:not(.is-condensed) {
	--imm-focus: var(--imm-on-navy-link);
	background: var(--imm-navy);
	border-bottom-color: transparent;
	box-shadow: none;
}

body:has(.imm-hero.is-style-imm-hero-navy):not(:has(.imm-brand .wp-block-site-logo img)) .imm-nav__menu .wp-block-navigation-item__content,
body:has(.imm-hero.is-style-imm-hero-navy):not(:has(.imm-brand .wp-block-site-logo img)) .imm-nav__menu .wp-block-navigation__responsive-container-open {
	transition: color .35s ease, border-color .35s ease;
}

body:has(.imm-hero.is-style-imm-hero-navy):not(:has(.imm-brand .wp-block-site-logo img)) .imm-nav:not(.is-condensed):not(:has(.is-menu-open)) .imm-nav__menu .wp-block-navigation-item__content {
	color: var(--imm-paper);
}

body:has(.imm-hero.is-style-imm-hero-navy):not(:has(.imm-brand .wp-block-site-logo img)) .imm-nav:not(.is-condensed):not(:has(.is-menu-open)) .imm-nav__menu .wp-block-navigation-item__content:hover {
	color: var(--imm-on-navy-link);
}

body:has(.imm-hero.is-style-imm-hero-navy):not(:has(.imm-brand .wp-block-site-logo img)) .imm-nav:not(.is-condensed) .imm-nav__menu .wp-block-navigation__responsive-container-open {
	color: var(--imm-paper);
	border-color: color-mix(in srgb, var(--imm-paper) 30%, transparent);
}

body:has(.imm-hero.is-style-imm-hero-navy):not(:has(.imm-brand .wp-block-site-logo img)) .imm-brand .imm-brand__on-dark {
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	translate: 0 -50%;
	opacity: 0;
	pointer-events: none;
}

body:has(.imm-hero.is-style-imm-hero-navy):not(:has(.imm-brand .wp-block-site-logo img)) .imm-brand .imm-brand__fallback img {
	transition: opacity .35s ease;
}

body:has(.imm-hero.is-style-imm-hero-navy):not(:has(.imm-brand .wp-block-site-logo img)) .imm-brand .imm-brand__on-dark {
	transition: opacity .35s ease;
}

body:has(.imm-hero.is-style-imm-hero-navy):not(:has(.imm-brand .wp-block-site-logo img)) .imm-nav:not(.is-condensed) .imm-brand .imm-brand__fallback:not(.imm-brand__on-dark) img {
	opacity: 0;
}

body:has(.imm-hero.is-style-imm-hero-navy):not(:has(.imm-brand .wp-block-site-logo img)) .imm-nav:not(.is-condensed) .imm-brand .imm-brand__on-dark {
	opacity: 1;
}

/* Over the photo: the header's navy eases down into it (no hard line where the masthead ends and the
   picture begins; a smootherstep curve), and a light navy tint across it all. */
body:has(.imm-hero.is-style-imm-hero-navy):not(:has(.imm-brand .wp-block-site-logo img)) .imm-hero__media::before {
	--imm-hero-top-fade: 7rem;
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--imm-navy) 100.0%, transparent) calc(var(--imm-hero-top-fade) * 0.0),
			color-mix(in srgb, var(--imm-navy) 98.39%, transparent) calc(var(--imm-hero-top-fade) * 0.125),
			color-mix(in srgb, var(--imm-navy) 89.65%, transparent) calc(var(--imm-hero-top-fade) * 0.25),
			color-mix(in srgb, var(--imm-navy) 72.48%, transparent) calc(var(--imm-hero-top-fade) * 0.375),
			color-mix(in srgb, var(--imm-navy) 50.0%, transparent) calc(var(--imm-hero-top-fade) * 0.5),
			color-mix(in srgb, var(--imm-navy) 27.52%, transparent) calc(var(--imm-hero-top-fade) * 0.625),
			color-mix(in srgb, var(--imm-navy) 10.35%, transparent) calc(var(--imm-hero-top-fade) * 0.75),
			color-mix(in srgb, var(--imm-navy) 1.61%, transparent) calc(var(--imm-hero-top-fade) * 0.875),
			transparent var(--imm-hero-top-fade)
		),
		color-mix(in srgb, var(--imm-navy) 34%, transparent);
	pointer-events: none;
}

body:has(.imm-hero.is-style-imm-hero-navy):not(:has(.imm-brand .wp-block-site-logo img)) .imm-hero__media::after {
	z-index: 2;
}

/* Depth: as the hero scrolls away the photo trails a little (at most 2.5rem), a quiet parallax done by
   the browser's scroll-linked animation — no script, nothing where it is unsupported, nothing under
   reduced motion. The entrance drift (scale) runs alongside it (translate). The timeline is named on
   the hero (measured against the page): the photo box clips its content, which makes it a scroll
   container of its own, so an anonymous view() on the photo would measure a box that never scrolls. */
@keyframes imm-hero-depth {
	from { translate: 0 0; }
	to   { translate: 0 2.5rem; }
}

@supports (animation-timeline: view()) {
	.imm-hero.is-style-imm-hero-navy {
		view-timeline: --imm-hero block;
	}

	@media (prefers-reduced-motion: no-preference) {
		.imm-hero.is-style-imm-hero-navy .imm-hero__media img {
			animation: imm-drift 26s ease-out both, imm-hero-depth linear both;
			animation-timeline: auto, --imm-hero;
			animation-range: normal, exit 0% exit 100%;
		}
	}

	html[data-imm-motion="full"] .imm-hero.is-style-imm-hero-navy .imm-hero__media img {
		animation: imm-drift 26s ease-out both, imm-hero-depth linear both;
		animation-timeline: auto, --imm-hero;
		animation-range: normal, exit 0% exit 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	body:has(.imm-hero.is-style-imm-hero-navy) .imm-nav,
	body:has(.imm-hero.is-style-imm-hero-navy) .imm-nav__menu .wp-block-navigation-item__content,
	body:has(.imm-hero.is-style-imm-hero-navy) .imm-nav__menu .wp-block-navigation__responsive-container-open,
	body:has(.imm-hero.is-style-imm-hero-navy) .imm-brand .imm-brand__fallback img,
	body:has(.imm-hero.is-style-imm-hero-navy) .imm-brand .imm-brand__on-dark {
		transition: none;
	}
}

/* ---------- the occasion line in the hero (ADR-044) ---------- */
/* The U.S. Semiquincentennial (1776–2026) is the country's occasion, not the company's mark, so it
   lives here — a small eyebrow above the headline, the emblem beside the words — and the logo stays the
   logo. Its own group in the hero pattern, so it can be deleted in the Site Editor after 2026. */
.imm-hero__occasion {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .6rem;
	margin: 0 0 1.5rem;
}

.imm-hero__occasion-mark {
	flex: none;
	margin: 0;
	line-height: 0;
}

/* The emblem leads: 56px tall on a phone (above the words), 64px beside them from 36em, 76px from
   62em — sized by width (height × 391/160) so the Site Editor shows it the same (see the logo). */
.imm-hero__occasion-mark {
	--imm-emblem-h: 56px;
	width: calc(var(--imm-emblem-h) * 391 / 160);
}

.imm-hero__occasion-mark img {
	width: 100%;
	height: var(--imm-emblem-h);
	aspect-ratio: 391 / 160;
	object-fit: contain;
}

.imm-hero__occasion-text {
	margin: 0;
	max-width: 34rem;
	font-family: var(--imm-display);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.45;
	text-transform: uppercase;
	color: var(--imm-on-navy-muted);
}

.imm-hero__occasion-years {
	color: var(--imm-on-navy);
	white-space: nowrap;
}

@media (min-width: 36em) {
	.imm-hero__occasion {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
	}

	.imm-hero__occasion-mark {
		--imm-emblem-h: 64px;
	}
}

@media (min-width: 62em) {
	.imm-hero__occasion-mark {
		--imm-emblem-h: 76px;
	}

	.imm-hero__occasion-text {
		font-size: .8125rem;
	}
}

/* Final section surfaces: component defaults above are older, lighter variants. */
.imm-intent.imm-sec,
.imm-partners.imm-sec,
.imm-about.imm-sec {
	background: var(--imm-navy);
	color: var(--imm-on-navy);
}

.imm-intent.imm-sec { --imm-focus: var(--imm-on-navy-link); }
.imm-partners.imm-sec { border-color: color-mix(in srgb, var(--imm-on-navy) 18%, transparent); }

.imm-intent .imm-eyebrow,
.imm-partners .imm-eyebrow,
.imm-about.imm-sec .imm-eyebrow,
.imm-intent .imm-intent__path-title { color: var(--imm-on-navy-link); }

.imm-intent.imm-sec .imm-sec-head h2,
.imm-partners.imm-sec .imm-sec-head h2,
.imm-about.imm-sec h2 { color: var(--imm-on-navy); }

.imm-intent .imm-intent__path-note,
.imm-intent .imm-sec-head p:not(.imm-eyebrow),
.imm-intent .imm-assist-note,
.imm-about p:not(.imm-eyebrow) { color: var(--imm-on-navy-muted); }

.imm-vehicles.imm-sec:has(.imm-vx--light, .imm-vt) {
	--imm-focus: var(--imm-steel);
	background: var(--imm-paper);
	color: var(--imm-ink);
}

.imm-vehicles.imm-sec:has(.imm-vx--light, .imm-vt) .imm-sec-head h2 { color: var(--imm-ink); }
.imm-vehicles.imm-sec:has(.imm-vx--light, .imm-vt) .imm-sec-head p:not(.imm-eyebrow) { color: var(--imm-muted); }
.imm-vehicles.imm-sec:has(.imm-vx--light, .imm-vt) .imm-eyebrow { color: var(--imm-steel); }
.imm-vehicles.imm-sec:has(.imm-vx--light, .imm-vt) .imm-vcta h3 { color: var(--imm-ink); }
.imm-vehicles.imm-sec:has(.imm-vx--light, .imm-vt) .imm-wrap { color: var(--imm-ink); }

.imm-about .imm-close__card p:not(.imm-eyebrow) { color: var(--imm-ink-2); }
.imm-about .imm-close__card--contact p:not(.imm-eyebrow) { color: var(--imm-on-navy-muted); }
.imm-about .imm-close__card--contact .imm-eyebrow { color: var(--imm-on-navy-link); }
.imm-about .imm-stats .imm-stat__num { color: var(--imm-ink); }
.imm-about .imm-stats .imm-stat__label { color: var(--imm-muted); }

.imm-about .imm-close {
	--imm-focus: var(--imm-steel);
	position: relative;
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	margin-top: clamp(2rem, 5vw, 3.5rem);
	padding: clamp(2.25rem, 5vw, 3rem) max(var(--imm-gutter), calc((100vw - 1200px) / 2));
	background: var(--imm-paper);
	color: var(--imm-ink);
}

.imm-about .imm-close .imm-eyebrow { color: var(--imm-steel); }

.imm-partners.imm-sec .imm-marquee__list .imm-logo__mono { filter: brightness(0) invert(1); }
.imm-about.imm-sec .imm-close .imm-eyebrow { color: var(--imm-steel); }
.imm-about.imm-sec .imm-close .imm-close__card--contact .imm-eyebrow { color: var(--imm-on-navy-link); }