/*
 * Mainland theme styles: the global layer of "Yard Pro" (Avi, 4 Oct 2026; replaces decision #48 "Asphalt Yard").
 *
 * Graphite ink stage with depth (never flat black), graded photography, mixed-case Archivo 800 headings with
 * one hero-scale moment, Inter for everything else, a cyan rule before every eyebrow, cyan glow on the primary
 * action, glass plates, and a navy-ink band for chassis rental. No tape, no expanded type, no mono labels.
 *
 * Three files:
 *   theme.css     (this file, every page) tokens that theme.json can't express, surface contexts, base, type,
 *                 links, buttons, bands, textures, photo grade, plates and frames, utilities, chrome, forms,
 *                 page hero, notices, 404, footer.
 *   sections.css  home and marketing bands (inc/sections.php) and the stat band. Loaded when those blocks render.
 *   units.css     unit cards, the new-arrivals rail, type tiles. Loaded when those blocks render.
 *
 * Tokens: theme.json presets (--wp--preset--color|font-size|spacing|shadow|gradient--*) and custom values
 * (--wp--custom--*) are law. Components read the surface-context properties (--mn-text, --mn-link, --mn-rule …),
 * never palette slugs for text, so one component works on paper, mist, ink and navy without a variant.
 * A custom property that combines others (a gradient using --mn-grid-line, say) is resolved where it is declared,
 * so compose those at the point of use, not on :root.
 *
 * Contract for the other style files: docs/02-DESIGN-SYSTEM.md §2.12 (style files) and §2.10 (custom properties).
 */

/* 1. Fallback faces --------------------------------------------------------------------------------------------- */
/* Metric-matched local fallbacks so the swap to the web fonts barely moves the layout (CLS budget < 0.05).
   Sizes measured in Chrome against the shipped woff2 files. */

@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("ArialMT");
	size-adjust: 106.9%;
	ascent-override: 90.6%;
	descent-override: 22.6%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
	font-weight: 700 900;
	size-adjust: 103.5%;
	ascent-override: 85%;
	descent-override: 20.3%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Newsreader Fallback";
	font-style: italic;
	src: local("Georgia Italic"), local("Georgia-Italic"), local("Georgia");
	size-adjust: 90.1%;
	ascent-override: 82%;
	descent-override: 29%;
	line-gap-override: 0%;
}

/* 2. Custom properties ------------------------------------------------------------------------------------------- */

/* The light surface context: the page (:root) and a light card inside a dark band (.mn-on-light, §3). */
:root,
.mn-on-light {
	color-scheme: light;
	--mn-surface: var(--wp--preset--color--paper);
	--mn-surface-raised: var(--wp--preset--color--white);
	--mn-text: var(--wp--preset--color--text-2);
	--mn-text-strong: var(--wp--preset--color--text);
	--mn-text-muted: var(--wp--preset--color--text-3);
	--mn-text-soft: var(--wp--preset--color--text-3);
	--mn-link: var(--wp--preset--color--cyan-700);
	--mn-link-hover: var(--wp--preset--color--text);
	--mn-eyebrow: var(--wp--preset--color--cyan-700);
	--mn-eyebrow-rule: var(--wp--preset--color--cyan);
	--mn-focus: var(--wp--preset--color--cyan-700);
	--mn-rule: var(--wp--preset--color--line);
	--mn-rule-2: var(--wp--preset--color--line-strong);
	--mn-rule-3: var(--wp--preset--color--field);
	--mn-quiet-bg: rgba(255, 255, 255, 0.6);
	--mn-quiet-bg-hover: var(--wp--preset--color--white);
	--mn-quiet-fg: var(--wp--preset--color--text);
	--mn-quiet-border: var(--wp--preset--color--line-strong);
	--mn-quiet-border-hover: var(--wp--preset--color--text);
	--mn-square-hover-bg: var(--wp--preset--color--ink-1);
	--mn-square-hover-fg: var(--wp--preset--color--white);
	--mn-square-hover-border: var(--wp--preset--color--ink-1);
	--mn-tick-bg: var(--wp--preset--color--ink-1);
	--mn-tick-fg: var(--wp--preset--color--cyan);
	--mn-ring-border: rgba(var(--wp--custom--cyan-rgb), 0.45);
	--mn-ring-bg: rgba(var(--wp--custom--cyan-rgb), 0.07);
	--mn-ring-fg: var(--wp--preset--color--cyan-700);
	--mn-field-bg: var(--wp--preset--color--white);
	--mn-field-border: var(--wp--preset--color--field);
	--mn-field-text: var(--wp--preset--color--text);
	--mn-grid-line: rgba(var(--wp--custom--ink-rgb), 0.06);
	--mn-shadow-card: var(--wp--preset--shadow--card);
	--mn-shadow-lift: var(--wp--preset--shadow--lift);
	/* The primary button's cyan glow belongs to the dark surfaces; on light ones it stands on a plain soft shadow. */
	--mn-primary-shadow: none;
	--mn-primary-shadow-hover: var(--wp--preset--shadow--card);
	--mn-chosen-shadow: var(--wp--preset--shadow--ink); /* under a chosen choice chip (§11) */
}

:root {
	/* Chrome and layout. */
	--mn-adminbar: var(--wp-admin--admin-bar--height, 0px);
	--mn-utility-h: 0px;
	--mn-ticker-h: 0px; /* the home ticker's height while it prints (body:has(.mn-ticker)); the hero subtracts it */
	--mn-header-h: 64px;
	--mn-bar-h: calc(64px + env(safe-area-inset-bottom, 0px));
	--mn-sticky-top: calc(var(--mn-adminbar) + var(--mn-header-h));
	--mn-gutter: var(--wp--custom--gutter);
	--mn-wide: var(--wp--style--global--wide-size, 77.5rem);
	--mn-edge: max(var(--mn-gutter), calc((100vw - var(--mn-wide)) / 2)); /* content's left edge, for aligning textures */
	--mn-measure: var(--wp--custom--width--measure);

	/* Textures. */
	--mn-noise: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--mn-grid-size: var(--wp--custom--grid--size);
	--mn-grid-mask: radial-gradient(120% 80% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%);

	/* Photo grade: one ramp for the whole site. Defaults are the atmosphere grade; see §10 for the others.
	   Close to natural since 5 Oct 2026 (Avi: the home page was "too dark"): about the --true grade, a touch more
	   tint and grain so atmosphere photos still sit together. */
	--mn-photo-pos: 50% 50%;
	--mn-grade-gray: 0.22;
	--mn-grade-con: 1.06;
	--mn-grade-bri: 1;
	--mn-grade-tint: 0.12;
	--mn-grade-grain: 0.04;

	/* The home hero's lede over a photo in its own colour: brighter than on-dark-2 (4.9:1 or more on the scrim). */
	--mn-hero-lede: color-mix(in srgb, var(--wp--preset--color--on-dark) 70%, var(--wp--preset--color--on-dark-2));
	/* Maps (the port routes, 09 §8): water as one pale cyan tint, opaque so shapes never darken where they meet,
	   and a hairline shore. */
	--mn-water: color-mix(in srgb, var(--wp--preset--color--cyan) 9%, var(--wp--preset--color--white));
	--mn-shore: color-mix(in srgb, var(--wp--preset--color--cyan-700) 28%, var(--wp--preset--color--white));

	/* One stacking scale; no other z-index values anywhere. -1 and 1 are local to an isolated parent. */
	--mn-z-under: -1;
	--mn-z-over: 1;
	--mn-z-raised: 2;
	--mn-z-sticky: 20;
	--mn-z-header: 40;
	--mn-z-bar: 45;
	--mn-z-menu: 50;
	--mn-z-dialog: 60;
	--mn-z-toast: 70;
}

@media (min-width: 782px) {
	:root { --mn-header-h: 76px; --mn-utility-h: 44px; --mn-bar-h: 0px; }
}

/* 3. Surface contexts -------------------------------------------------------------------------------------------- */
/* Light is the default (§2, shared with .mn-on-light). A light card inside a dark band switches back with
   .mn-on-light, which also makes the card's own surface white. */

.mn-on-light {
	--mn-surface: var(--wp--preset--color--white);
	color: var(--mn-text);
}

/* Mist: the paler alternate light band. */
.mn-band--mist,
.is-style-section-mist,
.is-style-band-mist {
	--mn-surface: var(--wp--preset--color--paper-2);
}
/* White: the third light surface, so a run of light bands reads as distinct steps (paper → mist → white). Cards
   on it take paper as their raised surface. */
.mn-band--white,
.is-style-band-white {
	--mn-surface: var(--wp--preset--color--white);
	--mn-surface-raised: var(--wp--preset--color--paper);
}

/* Ink: the graphite stage, its plates, the footer and the phone bar. The header and menus are light (decision #55, 02 §7.2). */
.mn-on-ink,
.mn-band--ink,
.mn-band--deep,
.mn-band--navy,
.mn-glass,
.is-style-section-ink,
.is-style-section-navy,
.is-style-band-ink,
.is-style-band-navy,
.mn-utility,
.mn-action-bar,
.mn-footer {
	color-scheme: dark;
	--mn-surface: var(--wp--preset--color--ink-1);
	--mn-surface-raised: var(--wp--preset--color--ink-3);
	--mn-text: var(--wp--preset--color--on-dark-2);
	--mn-text-strong: var(--wp--preset--color--white);
	--mn-text-muted: var(--wp--preset--color--on-dark-3);
	--mn-text-soft: var(--wp--preset--color--on-dark-soft);
	--mn-link: var(--wp--preset--color--cyan-300);
	--mn-link-hover: var(--wp--preset--color--white);
	--mn-eyebrow: var(--wp--preset--color--cyan-300);
	--mn-focus: var(--wp--preset--color--cyan);
	--mn-rule: rgba(255, 255, 255, 0.08);
	--mn-rule-2: rgba(255, 255, 255, 0.14);
	--mn-rule-3: rgba(255, 255, 255, 0.24);
	--mn-quiet-bg: rgba(255, 255, 255, 0.04);
	--mn-quiet-bg-hover: rgba(255, 255, 255, 0.1);
	--mn-quiet-fg: var(--wp--preset--color--white);
	--mn-quiet-border: rgba(255, 255, 255, 0.22);
	--mn-quiet-border-hover: rgba(255, 255, 255, 0.55);
	--mn-square-hover-bg: rgba(255, 255, 255, 0.08);
	--mn-square-hover-fg: var(--wp--preset--color--white);
	--mn-square-hover-border: rgba(255, 255, 255, 0.24);
	--mn-tick-bg: rgba(var(--wp--custom--cyan-rgb), 0.12);
	--mn-tick-fg: var(--wp--preset--color--cyan-300);
	--mn-ring-border: rgba(var(--wp--custom--cyan-rgb), 0.42);
	--mn-ring-bg: rgba(var(--wp--custom--cyan-rgb), 0.06);
	--mn-ring-fg: var(--wp--preset--color--cyan-300);
	--mn-field-bg: rgba(255, 255, 255, 0.04);
	--mn-field-border: var(--wp--preset--color--on-dark-3);
	--mn-field-text: var(--wp--preset--color--white);
	--mn-grid-line: rgba(255, 255, 255, 0.055);
	--mn-shadow-card: none;
	--mn-shadow-lift: var(--wp--preset--shadow--deep);
	--mn-primary-shadow: var(--wp--preset--shadow--glow);
	--mn-primary-shadow-hover: var(--wp--preset--shadow--glow-hover);
	--mn-chosen-shadow: none;
	color: var(--mn-text);
}
.mn-band--deep { --mn-surface: var(--wp--preset--color--ink-0); }
.mn-band--navy,
.is-style-section-navy {
	--mn-surface: var(--wp--preset--color--navy-ink);
	--mn-surface-raised: rgba(255, 255, 255, 0.04);
}

/* 4. Base -------------------------------------------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--mn-sticky-top) + 16px);
	scroll-padding-bottom: calc(var(--mn-bar-h) + 16px);
}
body {
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; height: auto; }
::selection { background: rgba(var(--wp--custom--cyan-rgb), 0.3); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--mn-focus);
	outline-offset: var(--wp--custom--focus--offset);
}

a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* 5. Type -------------------------------------------------------------------------------------------------------- */
/* theme.json sets the h1–h6 scale (Archivo 800, mixed case, tight tracking). These helpers give the same looks to
   any element, plus the one hero-scale moment and the closing-CTA mega type. */

h1, h2, h3, h4 { text-wrap: balance; font-synthesis: none; }
p, li, dd { text-wrap: pretty; }
.mn-num, .mn-price, table { font-variant-numeric: tabular-nums; }

.mn-display,
.mn-mega,
.mn-h1,
.mn-h2,
.mn-h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	color: var(--mn-text-strong);
	text-wrap: balance;
	font-synthesis: none;
}
.mn-display { font-size: var(--wp--preset--font-size--hero); line-height: var(--wp--custom--line-height--display); letter-spacing: var(--wp--custom--tracking--display); }
.mn-mega { font-size: var(--wp--preset--font-size--mega); font-weight: 900; line-height: 0.98; letter-spacing: var(--wp--custom--tracking--mega); }
.mn-h1 { font-size: var(--wp--preset--font-size--huge); line-height: 0.98; letter-spacing: -0.035em; }
.mn-h2 { font-size: var(--wp--preset--font-size--xxx-large); line-height: var(--wp--custom--line-height--heading); letter-spacing: var(--wp--custom--tracking--heading); }
.mn-h2--sm { font-size: var(--wp--preset--font-size--xx-large); }
.mn-h3 { font-size: var(--wp--preset--font-size--x-large); line-height: var(--wp--custom--line-height--title); letter-spacing: var(--wp--custom--tracking--title); }

/* The second tone of a display heading ("Trucks, trailers <soft>and chassis</soft>"), and the cyan full stop. */
.mn-soft { color: var(--mn-text-soft); }
.mn-dot { color: var(--wp--preset--color--cyan); }

/* Newsreader italic for a few accent words inside a heading, never for whole sentences of body copy. */
.mn-accent {
	font-family: var(--wp--preset--font-family--accent);
	font-size: 1.07em;
	font-style: italic;
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.012em;
	font-synthesis: none;
}
.mn-accent--block { display: block; margin-block-start: 0.06em; }
.mn-accent--cyan { color: var(--mn-link); }

.mn-lede {
	max-inline-size: var(--mn-measure);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--lede);
	color: var(--mn-text);
}

/* Spec label (the "ODOMETER" over a value): tracked caps, small, muted. */
.mn-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--spec);
	text-transform: uppercase;
	color: var(--mn-text-muted);
}

/* Eyebrow: a short cyan rule and tracked caps. One per section head. */
.mn-eyebrow,
.is-style-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--mn-eyebrow);
}
.mn-eyebrow::before,
.is-style-eyebrow::before {
	content: "";
	flex: none;
	inline-size: 22px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--mn-eyebrow-rule);
}

/* Section head: eyebrow, H2, optional lede; --split puts a link or badge on the right. */
.mn-section-head {
	display: grid;
	gap: 18px;
	max-inline-size: 47.5rem;
	margin-block-end: var(--wp--custom--head-gap);
}
.mn-section-head > * { margin: 0; }
.mn-section-head__title {
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--tracking--heading);
	color: var(--mn-text-strong);
}
.mn-section-head__lede {
	max-inline-size: var(--mn-measure);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--lede);
	color: var(--mn-text);
}
.mn-section-head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	max-inline-size: none;
}
.mn-section-head--split > div { display: grid; gap: 18px; max-inline-size: 47.5rem; }
.mn-section-head--split > div > * { margin: 0; }

/* 6. Links ------------------------------------------------------------------------------------------------------- */

/* Arrow link: the label underlines from the left on hover and the arrow nudges. */
.mn-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-block-size: var(--wp--custom--target--min);
	background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(50% + 0.75em) / 0 1px;
	color: var(--mn-link);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 600;
	text-decoration: none;
	transition: background-size var(--wp--custom--motion--ui) var(--wp--custom--motion--ease), color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-arrow-link .mn-icon { inline-size: 1.125rem; block-size: 1.125rem; transition: transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease); }
.mn-arrow-link:hover { background-size: calc(100% - 1.625rem) 1px; color: var(--mn-link); }
@media (hover: hover) and (pointer: fine) { .mn-arrow-link:hover .mn-icon { transform: translateX(3px); } }

.mn-linkbutton {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

/* 7. Buttons ----------------------------------------------------------------------------------------------------- */
/* 6 px corners (never pills), 48 px tall (44 small, 56 large). Glow only on the primary. A variant only sets the
   --mn-btn-* properties. theme.json styles .wp-element-button as the primary for core blocks. */

.mn-btn {
	--mn-btn-bg: var(--wp--preset--color--cyan);
	--mn-btn-fg: var(--wp--preset--color--ink-1);
	--mn-btn-border: transparent;
	--mn-btn-shadow: var(--mn-primary-shadow);
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: var(--wp--custom--target--button);
	padding: 0.8125rem 1.375rem;
	border: 1px solid var(--mn-btn-border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--mn-btn-bg);
	box-shadow: var(--mn-btn-shadow);
	color: var(--mn-btn-fg);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: var(--wp--custom--tracking--ui);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		box-shadow var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-btn:hover { background: var(--mn-btn-bg); color: var(--mn-btn-fg); }
.mn-btn .mn-icon { inline-size: 1.125rem; block-size: 1.125rem; transition: transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease); }
.mn-btn:active { transform: translateY(0) scale(0.985); }

.mn-btn--primary:hover { --mn-btn-bg: var(--wp--preset--color--cyan-hover); --mn-btn-shadow: var(--mn-primary-shadow-hover); }

.mn-btn--dark { --mn-btn-bg: var(--wp--preset--color--ink-1); --mn-btn-fg: var(--wp--preset--color--white); --mn-btn-shadow: var(--wp--preset--shadow--ink); }
.mn-btn--dark:hover { --mn-btn-bg: var(--wp--preset--color--ink-3); }

/* Glass: on photos and the ink stage. */
.mn-btn--glass {
	--mn-btn-bg: rgba(255, 255, 255, 0.05);
	--mn-btn-fg: var(--wp--preset--color--white);
	--mn-btn-border: rgba(255, 255, 255, 0.22);
	--mn-btn-shadow: none;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.mn-btn--glass:hover { --mn-btn-bg: rgba(255, 255, 255, 0.1); --mn-btn-border: rgba(255, 255, 255, 0.55); }

/* Quiet: the secondary action on any surface (white-ish on paper, glass-like on ink). */
.mn-btn--quiet {
	--mn-btn-bg: var(--mn-quiet-bg);
	--mn-btn-fg: var(--mn-quiet-fg);
	--mn-btn-border: var(--mn-quiet-border);
	--mn-btn-shadow: none;
}
.mn-btn--quiet:hover { --mn-btn-bg: var(--mn-quiet-bg-hover); --mn-btn-border: var(--mn-quiet-border-hover); }

.mn-btn--small { min-block-size: var(--wp--custom--target--min); padding: 0.6875rem 1.125rem; font-size: var(--wp--preset--font-size--small); }
.mn-btn--large { min-block-size: var(--wp--custom--target--large); padding: 1.0625rem 1.75rem; font-size: var(--wp--preset--font-size--medium); }
.mn-btn--block { inline-size: 100%; }

@media (hover: hover) and (pointer: fine) {
	.mn-btn:hover { transform: translateY(-2px); }
	.mn-btn:hover .mn-icon--arrow-right { transform: translateX(3px); }
}

/* Square: the quiet 44 px icon button (call and text on a card, the menu button). --go is the arrow square on a
   tile, which turns cyan when its card host is hovered. Always give it an aria-label. */
.mn-square {
	box-sizing: border-box;
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: var(--wp--custom--target--min);
	block-size: var(--wp--custom--target--min);
	padding: 0;
	border: 1px solid var(--mn-quiet-border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--mn-quiet-bg);
	color: var(--mn-quiet-fg);
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease),
		transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-square .mn-icon { inline-size: 1.125rem; block-size: 1.125rem; }
.mn-square:hover { border-color: var(--mn-square-hover-border); background: var(--mn-square-hover-bg); color: var(--mn-square-hover-fg); }
.mn-square--go,
.mn-square--go:hover { border-color: var(--mn-quiet-border); background: transparent; color: var(--mn-quiet-fg); }
.mn-card-host:is(:hover, :focus-within) .mn-square--go,
.mn-square--go:is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--cyan);
	background: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--ink-1);
}

/* 8. Bands ------------------------------------------------------------------------------------------------------- */
/* A band is a full-width <section> with the section rhythm. Paper is the default; --mist, --white, --ink (graphite
   stage with grid and grain), --deep (ink-0: the hero and the closing CTA) and --navy (chassis rental) set both the
   background and the surface context. Dark bands keep ::before (grid) and ::after (grain) for themselves. */

.mn-band { position: relative; padding-block: var(--wp--custom--section); }
.mn-band--tight { padding-block: var(--wp--preset--spacing--70); }
.mn-band--paper { background: var(--wp--preset--color--paper); }
.mn-band--mist { background: var(--wp--preset--gradient--mist); }
.mn-band--white { background: var(--wp--preset--color--white); }
.mn-band--ink { background: var(--wp--preset--gradient--stage); }
.mn-band--deep { background: var(--wp--preset--color--ink-0); }
.mn-band--navy { background: var(--wp--preset--gradient--navy-ink); }
.mn-band--ink,
.mn-band--deep,
.mn-band--navy { isolation: isolate; overflow: clip; } /* textures and glows stay inside the band */

/* The ink band's grid (::before) and the dark bands' grain (::after) are the §9 texture rules. */
.mn-band--ink::before,
.mn-band--ink::after { content: ""; }
.mn-band--navy::after { content: ""; --mn-grain-opacity: 0.035; }
.mn-band--flat::before,
.mn-band--flat::after { content: none; }

/* Two light bands on the same surface share their padding (09 §2.2). */
.mn-band:not(.mn-band--mist, .mn-band--white, .mn-band--ink, .mn-band--deep, .mn-band--navy) + .mn-band:not(.mn-band--mist, .mn-band--white, .mn-band--ink, .mn-band--deep, .mn-band--navy),
.mn-band--mist + .mn-band--mist,
.mn-band--white + .mn-band--white { padding-block-start: 0; }

/* White meets the other light surfaces on a hairline, so the step reads (09 §2.2). */
:is(.mn-band--paper, .mn-band--mist) + .mn-band--white,
.mn-band--white + :is(.mn-band--paper, .mn-band--mist) { border-block-start: 1px solid var(--wp--preset--color--line); }

/* Two dark sections never touch without a seam (09 §2.2 rule 1). */
:is(.mn-on-ink, .mn-band--ink, .mn-band--deep, .mn-band--navy) + :is(.mn-band--ink, .mn-band--deep, .mn-band--navy) { border-block-start: 1px solid var(--mn-rule); }

/* The cyan seam: a 1 px hairline that fades at both ends (top of the footer, under the utility bar). */
.mn-seam { display: block; block-size: 1px; background: var(--wp--preset--gradient--cyan-seam); }

/* 9. Textures ---------------------------------------------------------------------------------------------------- */
/* Overlay elements (<span class="…" aria-hidden="true">) for any isolated, positioned host (.mn-textured).
   They sit under the host's content. Grid lines follow the surface context. */

.mn-textured { position: relative; isolation: isolate; overflow: clip; }

.mn-texture-grid,
.mn-band--ink::before,
.mn-nav__panel::before {
	position: absolute;
	inset: 0;
	z-index: var(--mn-z-under);
	background-image: linear-gradient(var(--mn-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--mn-grid-line) 1px, transparent 1px);
	background-position: var(--mn-edge) 0;
	background-size: var(--mn-grid-size) var(--mn-grid-size);
	-webkit-mask-image: var(--mn-grid-mask);
	mask-image: var(--mn-grid-mask);
	pointer-events: none;
}
.mn-texture-grid--left { --mn-grid-mask: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.6) 34%, transparent 62%); }
.mn-texture-grid--center { --mn-grid-mask: radial-gradient(60% 70% at 50% 60%, #000, transparent 75%); background-position: center 0; }
.mn-texture-grid--fade { --mn-grid-mask: linear-gradient(200deg, #000, transparent 70%); }
.mn-texture-grid--plate { --mn-grid-size: var(--wp--custom--grid--plate); --mn-grid-mask: linear-gradient(160deg, #000, transparent 65%); background-position: 0 0; }

.mn-grain,
.mn-band--ink::after,
.mn-band--navy::after {
	position: absolute;
	inset: 0;
	z-index: var(--mn-z-under);
	background-image: var(--mn-noise);
	opacity: var(--mn-grain-opacity, 0.045);
	mix-blend-mode: overlay;
	pointer-events: none;
}

/* A soft cyan light. The host places it (inset / size); --mn-glow-strength sets the centre alpha. */
.mn-glow {
	position: absolute;
	z-index: var(--mn-z-under);
	inline-size: 70%;
	block-size: 80%;
	background: radial-gradient(closest-side, rgba(var(--wp--custom--cyan-rgb), var(--mn-glow-strength, 0.26)), rgba(var(--wp--custom--cyan-rgb), calc(var(--mn-glow-strength, 0.26) * 0.3)) 55%, transparent);
	filter: blur(10px);
	pointer-events: none;
}
.mn-glow--bl { inset-inline-start: -10%; inset-block-end: -30%; }
.mn-glow--tr { --mn-glow-strength: 0.16; inset-inline-end: -15%; inset-block-start: -20%; }
.mn-glow--bottom { --mn-glow-strength: 0.34; inset-inline-start: 50%; inset-block-end: -45%; inline-size: min(1200px, 120vw); block-size: auto; aspect-ratio: 2 / 1; transform: translateX(-50%); }

/* 10. Photo grade ------------------------------------------------------------------------------------------------ */
/* <div class="mn-photo [--true|--hero|--letterbox]"><img …></div>: the image fills the box (give the box a size or
   an aspect-ratio), greyed and contrasted, with a steel tint (blend: color) and grain on top. Atmosphere photos
   (heroes, bands, tiles) take the default grade; real inventory takes --true (calmed, never re-coloured).
   --mn-photo-pos moves the focal point. Overlays inside: .mn-scrim (layer 1), chips and brackets (layer 2). */

.mn-photo {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--wp--custom--grade--shade);
}
/* A <picture> (the home hero's phone file) steps aside so its img lays out as the box's own child. */
.mn-photo > picture { display: contents; }
:is(.mn-photo, .mn-photo > picture) > img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	object-position: var(--mn-photo-pos);
	filter: grayscale(var(--mn-grade-gray)) contrast(var(--mn-grade-con)) brightness(var(--mn-grade-bri));
	transition: transform var(--wp--custom--motion--img) var(--wp--custom--motion--ease);
}
.mn-photo::before,
.mn-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--mn-z-over);
	pointer-events: none;
}
.mn-photo::before {
	background: linear-gradient(180deg, var(--wp--custom--grade--tint-top) 0%, var(--wp--custom--grade--tint) 55%, var(--wp--custom--grade--tint-bottom) 100%);
	opacity: var(--mn-grade-tint);
	mix-blend-mode: color;
}
.mn-photo::after {
	background-image: var(--mn-noise);
	opacity: var(--mn-grade-grain);
	mix-blend-mode: overlay;
}
.mn-photo > .mn-scrim { z-index: var(--mn-z-over); }
.mn-photo > :where(.mn-chip, .mn-brackets) { z-index: var(--mn-z-raised); }

.mn-photo--true { --mn-grade-gray: 0.22; --mn-grade-con: 1.06; --mn-grade-bri: 1; --mn-grade-tint: 0.1; --mn-grade-grain: 0.035; }
/* The home hero keeps its photo's own colour (Avi, 5 Oct 2026: "too dark for a homepage"); the scrims carry the type. */
.mn-photo--hero { --mn-grade-gray: 0.06; --mn-grade-con: 1.04; --mn-grade-bri: 1; --mn-grade-tint: 0.06; --mn-grade-grain: 0.02; }
/* Phone exports with white bars top and bottom (12.5 % each): crop to the picture. */
:is(.mn-photo--letterbox, .mn-photo--letterbox > picture) > img { inset: auto 0; inset-block-start: -16.667%; block-size: 133.334%; }
.mn-photo--fill { position: absolute; inset: 0; }

/* Scrims: darken a photo so type on it reads. Always under chips and type. */
.mn-scrim { position: absolute; inset: 0; background: var(--mn-scrim, rgba(var(--wp--custom--ink-rgb), 0.45)); pointer-events: none; }
.mn-scrim--bottom { --mn-scrim: linear-gradient(180deg, transparent 50%, rgba(var(--wp--custom--ink-rgb), 0.85)); }
.mn-scrim--card { --mn-scrim: linear-gradient(180deg, transparent 62%, rgba(var(--wp--custom--ink-rgb), 0.5)); }
.mn-scrim--tile { --mn-scrim: linear-gradient(180deg, rgba(var(--wp--custom--ink-rgb), 0.22) 0%, rgba(var(--wp--custom--ink-rgb), 0) 18%, rgba(var(--wp--custom--ink-rgb), 0.04) 36%, rgba(var(--wp--custom--ink-rgb), 0.66) 60%, rgba(var(--wp--custom--ink-rgb), 0.9) 100%); }
.mn-scrim--side { --mn-scrim: linear-gradient(90deg, rgba(var(--wp--custom--ink-rgb), 0.45), transparent 30%), linear-gradient(180deg, transparent 50%, rgba(var(--wp--custom--ink-rgb), 0.85)); }
.mn-scrim--hero {
	--mn-scrim:
		linear-gradient(90deg, rgba(var(--wp--custom--ink-rgb), 0.94) 0%, rgba(var(--wp--custom--ink-rgb), 0.82) 26%, rgba(var(--wp--custom--ink-rgb), 0.45) 50%, rgba(var(--wp--custom--ink-rgb), 0.08) 72%, rgba(var(--wp--custom--ink-rgb), 0) 100%),
		linear-gradient(180deg, rgba(var(--wp--custom--ink-rgb), 0.7) 0%, rgba(var(--wp--custom--ink-rgb), 0) 24%, rgba(var(--wp--custom--ink-rgb), 0) 52%, rgba(var(--wp--custom--ink-rgb), 0.92) 100%);
}
/* Wide screens: the first slide heading's cyan full stop sits near 47% of the width, over the truck's bright hood, so
   the side scrim holds 0.66 at 52% (3:1 or more for the stop; 02 §4 E3). */
@media (min-width: 1224px) {
	.mn-scrim--hero {
		--mn-scrim:
			linear-gradient(90deg, rgba(var(--wp--custom--ink-rgb), 0.94) 0%, rgba(var(--wp--custom--ink-rgb), 0.85) 28%, rgba(var(--wp--custom--ink-rgb), 0.66) 52%, rgba(var(--wp--custom--ink-rgb), 0.12) 74%, rgba(var(--wp--custom--ink-rgb), 0) 100%),
			linear-gradient(180deg, rgba(var(--wp--custom--ink-rgb), 0.7) 0%, rgba(var(--wp--custom--ink-rgb), 0) 24%, rgba(var(--wp--custom--ink-rgb), 0) 52%, rgba(var(--wp--custom--ink-rgb), 0.92) 100%);
	}
}
/* Just past the tablet scrim the lede's first line ends over the truck's light hood, near 58 % of the width: the
   side scrim holds 0.68 out to 60 % until the copy column is narrow against the photo again at 1440 (02 §4 E3). */
@media (min-width: 1224px) and (max-width: 1439px) {
	.mn-scrim--hero {
		--mn-scrim:
			linear-gradient(90deg, rgba(var(--wp--custom--ink-rgb), 0.94) 0%, rgba(var(--wp--custom--ink-rgb), 0.86) 28%, rgba(var(--wp--custom--ink-rgb), 0.68) 60%, rgba(var(--wp--custom--ink-rgb), 0.12) 80%, rgba(var(--wp--custom--ink-rgb), 0) 100%),
			linear-gradient(180deg, rgba(var(--wp--custom--ink-rgb), 0.7) 0%, rgba(var(--wp--custom--ink-rgb), 0) 24%, rgba(var(--wp--custom--ink-rgb), 0) 52%, rgba(var(--wp--custom--ink-rgb), 0.92) 100%);
	}
}
@media (max-width: 781px) {
	.mn-scrim--hero { --mn-scrim: linear-gradient(180deg, rgba(var(--wp--custom--ink-rgb), 0.7) 0, rgba(var(--wp--custom--ink-rgb), 0.05) 110px, rgba(var(--wp--custom--ink-rgb), 0.08) 220px, rgba(var(--wp--custom--ink-rgb), 0.82) 330px, var(--wp--preset--color--ink-0) 420px); }
}

/* Studio sweep: Max-Atlas renders (white backgrounds) multiplied onto a lit plate, so there is no white box. */
.mn-sweep {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--wp--preset--gradient--studio-sweep);
}
.mn-sweep::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 70%, rgba(var(--wp--custom--ink-rgb), 0.3)), var(--mn-noise);
	opacity: 0.9;
	mix-blend-mode: multiply;
	pointer-events: none;
}
.mn-sweep > img {
	inline-size: 100%;
	block-size: 100%;
	padding: 5% 3% 7%;
	box-sizing: border-box;
	object-fit: contain;
	filter: contrast(1.08);
	mix-blend-mode: multiply;
	transition: transform var(--wp--custom--motion--img) var(--wp--custom--motion--ease);
}

/* Reversed partner logos carry a black plate in the file: screen drops it on any dark surface. */
.mn-logo-screen,
.mn-partner-logo { mix-blend-mode: screen; }

/* 11. Plates, frames, chips -------------------------------------------------------------------------------------- */

/* Glass plate: frosted ink over a photo (the hero's stat plate). Dark surface context. */
.mn-glass {
	border-block-start: 1px solid var(--mn-rule-2);
	background: linear-gradient(180deg, rgba(var(--wp--custom--ink-rgb), 0.55), rgba(var(--wp--custom--ink-rgb), 0.82));
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mn-glass { background: rgba(var(--wp--custom--ink-rgb), 0.92); }
}

/* Corner brackets: two cyan corners (top-left, bottom-right) inset over a photo. <span class="mn-brackets"
   aria-hidden="true"> inside a positioned box. --hover shows them only while the card host is hovered or focused.
   Tune with --mn-bk-inset, --mn-bk-size, --mn-bk-weight, --mn-bk-color. */
.mn-brackets {
	position: absolute;
	inset: var(--mn-bk-inset, 14px);
	pointer-events: none;
}
.mn-brackets::before,
.mn-brackets::after {
	content: "";
	position: absolute;
	inline-size: var(--mn-bk-size, 22px);
	block-size: var(--mn-bk-size, 22px);
	border: 0 solid var(--mn-bk-color, var(--wp--preset--color--cyan));
	transition: opacity var(--wp--custom--motion--ui) var(--wp--custom--motion--ease), transform var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}
.mn-brackets::before { inset-block-start: 0; inset-inline-start: 0; border-block-start-width: var(--mn-bk-weight, 1.5px); border-inline-start-width: var(--mn-bk-weight, 1.5px); }
.mn-brackets::after { inset-block-end: 0; inset-inline-end: 0; border-block-end-width: var(--mn-bk-weight, 1.5px); border-inline-end-width: var(--mn-bk-weight, 1.5px); }
.mn-brackets--hover::before { opacity: 0; transform: translate(5px, 5px); }
.mn-brackets--hover::after { opacity: 0; transform: translate(-5px, -5px); }
.mn-card-host:is(:hover, :focus-within) .mn-brackets--hover::before,
.mn-card-host:is(:hover, :focus-within) .mn-brackets--hover::after { opacity: 1; transform: none; }

/* Offset frame: a cyan hairline frame set off down-right behind a photo. The framed child must be positioned
   (position: relative), and the host needs room for the offset (padding 0 var(--mn-offset) var(--mn-offset) 0). */
.mn-offset-frame { position: relative; }
.mn-offset-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(var(--wp--custom--cyan-rgb), 0.42);
	border-radius: var(--wp--custom--radius--xs);
	transform: translate(var(--mn-offset, 18px), var(--mn-offset, 18px));
	pointer-events: none;
}
@media (max-width: 959px) { .mn-offset-frame { --mn-offset: 12px; } }

/* Chip: a small glass label on a photo or the stage. --led adds the green "available" light. */
.mn-chip {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	block-size: 28px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--wp--custom--radius--xs);
	background: rgba(var(--wp--custom--ink-rgb), 0.66);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--font-size--micro);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
.mn-chip .mn-icon { inline-size: 14px; block-size: 14px; }
.mn-chip--led::before,
.mn-chip--pending::before {
	content: "";
	flex: none;
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--led);
	box-shadow: 0 0 8px rgba(var(--wp--custom--led-rgb), 0.8);
}
.mn-chip--pending::before { background: var(--wp--preset--color--led-amber); box-shadow: none; }

/* A lone status light ("Open today"). */
.mn-led-dot {
	display: inline-block;
	flex: none;
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--led);
	box-shadow: 0 0 0 3px rgba(var(--wp--custom--led-rgb), 0.18);
}

/* Icon ring: a hairline circle around an icon (feature lists, roadside lines). */
.mn-ring {
	box-sizing: border-box;
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 44px;
	block-size: 44px;
	border: 1px solid var(--mn-ring-border);
	border-radius: 50%;
	background: var(--mn-ring-bg);
	color: var(--mn-ring-fg);
}
.mn-ring .mn-icon { inline-size: 20px; block-size: 20px; }

/* Ruled list: rows split by hairlines, a rule on top too. */
.mn-ruled { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--mn-rule); }
.mn-ruled > li { box-sizing: border-box; display: flex; align-items: center; gap: 12px 18px; min-block-size: 52px; padding-block: 0.75rem; border-block-end: 1px solid var(--mn-rule); }

/* Tick list (also the "Ticks" list block style): a small ink square with a cyan tick. */
.mn-checks { display: grid; gap: var(--wp--preset--spacing--30); margin: 0; padding: 0; list-style: none; }
.mn-checks li { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--30); color: var(--mn-text-strong); font-weight: 600; line-height: 1.4; }
.mn-checks a { color: inherit; }
.mn-checks__icon {
	box-sizing: border-box;
	flex: none;
	inline-size: 26px;
	block-size: 26px;
	margin-block-start: -0.1em;
	padding: 5.5px;
	border-radius: var(--wp--custom--radius--xs);
	background: var(--mn-tick-bg);
	color: var(--mn-tick-fg);
	stroke-width: 2.2;
}

/* Segmented control tray (02 §7.16): the raised tray that holds a row of tabs (the new-arrivals type tabs, How it
   works' paths). Each component styles its own tabs; the chosen one is ink with the cyan bar, like a chosen chip. */
.mn-seg {
	display: flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--md);
	background: var(--mn-surface-raised);
	box-shadow: var(--mn-shadow-card);
}

/* Chosen choice chip (02 §7.16), one rule for the family: the strong fill with the cyan bar along its foot (ink with
   light type on a light surface, white with ink type on a dark plate) and, on light, the ink shadow under it. The
   chassis selector's length and type chips, the estimator's term chips and the sell stepper's choice cards
   (home-bands.css) each keep their own shape; this is their chosen state. */
.mn-csel .mn-choice:has(:checked),
.mn-est__chip input:checked + span,
.mn-sell__chip input:checked + .mn-sell__chip-face {
	border-color: var(--mn-text-strong);
	background: var(--mn-text-strong);
	box-shadow: inset 0 -3px 0 var(--wp--preset--color--cyan), var(--mn-chosen-shadow);
	color: var(--mn-surface-raised);
}

/* 12. Layout helpers and utilities -------------------------------------------------------------------------------- */

/* The chrome sits flush: no block gap between notice, utility bar, header, main and footer. */
.wp-site-blocks > * { margin-block: 0; }
/* The header part is a wrapper only, so the header inside it can stick to the top of the page. */
.mn-chrome { display: contents; }
.mn-main > * { margin-block: 0; }

.mn-container {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: calc(var(--mn-wide) + 2 * var(--mn-gutter));
	margin-inline: auto;
	padding-inline: var(--mn-gutter);
}
:where(.mn-band, .mn-textured) > .mn-container { position: relative; }
/* A band below the first screen whose stylesheet loads without blocking (functions.php, mainland_need_style()) skips its
   layout until it nears the screen, so that file always lands before the band shows (01 §7.1). */
.mn-defer { content-visibility: auto; contain-intrinsic-size: auto 960px; }

/* Grids: never a bare 1fr, or phones scroll sideways. */
.mn-grid { display: grid; gap: var(--wp--preset--spacing--50); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--wp--custom--width--card)), 1fr)); }
.mn-grid > * { min-inline-size: 0; }

/* Card host: any card with a stretched link. Lifts its photo, brackets and arrow square on hover and wears the
   focus ring when its link has focus. The title link takes .mn-stretch; other controls sit above (.mn-raise). */
.mn-card-host { position: relative; }
.mn-card-host:has(.mn-stretch:focus-visible) { outline: var(--wp--custom--focus--width) solid var(--mn-focus); outline-offset: var(--wp--custom--focus--offset); }
.mn-stretch { color: inherit; text-decoration: none; }
.mn-stretch::after { content: ""; position: absolute; inset: 0; z-index: var(--mn-z-over); }
.mn-stretch:focus-visible { outline: none; }
.mn-raise { position: relative; z-index: var(--mn-z-raised); }
@media (hover: hover) and (pointer: fine) {
	.mn-card-host:hover .mn-photo > img { transform: scale(1.05); }
	.mn-card-host:hover .mn-sweep > :is(img, .mn-art) { transform: scale(1.04) translateX(-1%); }
	.mn-card-host:hover .mn-square--go { transform: translateX(2px); }
}

.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.skip-link.screen-reader-text:focus {
	clip-path: none;
	inline-size: auto;
	block-size: auto;
	inset-block-start: calc(var(--mn-adminbar) + 8px);
	inset-inline-start: 8px;
	z-index: var(--mn-z-toast);
	padding: 0.75rem 1.125rem;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--ink-1);
	font-weight: 600;
	text-decoration: none;
}

.mn-icon { inline-size: 1.25em; block-size: 1.25em; flex: none; }
.mn-icon-sm { inline-size: 16px; block-size: 16px; }
.mn-icon-lg { inline-size: 24px; block-size: 24px; }

/* Motion: entrance keyframes. Use only inside @media (prefers-reduced-motion: no-preference). The rise moves, it
   never fades: first-screen text is visible from the first paint (10 §1 rules 2-3, §4.10). .mn-rise--1…4 stagger
   it by the `stagger` token. */
@keyframes mn-rise { from { transform: translateY(var(--wp--custom--motion--rise)); } }
@keyframes mn-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes mn-fade-in { from { opacity: 0; } }
.mn-rise--1 { --mn-delay: var(--wp--custom--motion--stagger); }
.mn-rise--2 { --mn-delay: calc(var(--wp--custom--motion--stagger) * 2); }
.mn-rise--3 { --mn-delay: calc(var(--wp--custom--motion--stagger) * 3); }
.mn-rise--4 { --mn-delay: calc(var(--wp--custom--motion--stagger) * 4); }
@media (prefers-reduced-motion: no-preference) {
	.mn-rise { animation: mn-rise var(--wp--custom--motion--hero) var(--wp--custom--motion--ease-out) backwards; animation-delay: var(--mn-delay, 0ms); }
}

/* Keep a phrase on one line (the hyphenated brand name: mainland_brand_nowrap()). */
.mn-nowrap { white-space: nowrap; }

/* 13. Block styles (registered in functions.php) ----------------------------------------------------------------- */

.wp-block-button.is-style-dark .wp-block-button__link:hover { background: var(--wp--preset--color--ink-3); color: var(--wp--preset--color--white); }

/* Graded (yard photo): the atmosphere grade of .mn-photo (§10) on an image placed in the editor, as its filter
   (the lighter grade of 5 Oct 2026; the old steel cast is gone with it). */
.wp-block-image.is-style-graded img { filter: grayscale(var(--mn-grade-gray)) contrast(var(--mn-grade-con)) brightness(var(--mn-grade-bri)); }

.wp-block-image.is-style-brackets { position: relative; }
.wp-block-image.is-style-brackets::before,
.wp-block-image.is-style-brackets::after {
	content: "";
	position: absolute;
	z-index: var(--mn-z-over);
	inline-size: 22px;
	block-size: 22px;
	border: 0 solid var(--wp--preset--color--cyan);
	pointer-events: none;
}
.wp-block-image.is-style-brackets::before { inset-block-start: 14px; inset-inline-start: 14px; border-block-start-width: 1.5px; border-inline-start-width: 1.5px; }
.wp-block-image.is-style-brackets:not(:has(figcaption))::after { inset-block-end: 14px; inset-inline-end: 14px; border-block-end-width: 1.5px; border-inline-end-width: 1.5px; }

ul.is-style-checks { display: grid; gap: var(--wp--preset--spacing--30); padding: 0; list-style: none; }
ul.is-style-checks > li { position: relative; padding-inline-start: 38px; color: var(--mn-text-strong); font-weight: 600; line-height: 1.4; }
ul.is-style-checks > li::before,
ul.is-style-checks > li::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: -0.1em; inline-size: 26px; block-size: 26px; border-radius: var(--wp--custom--radius--xs); }
ul.is-style-checks > li::before { background: var(--mn-tick-bg); }
ul.is-style-checks > li::after {
	background: var(--mn-tick-fg);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 15px no-repeat;
}

/* 14. Notices (§7.25) -------------------------------------------------------------------------------------------- */

.mn-notice {
	--mn-notice-bar: var(--wp--preset--color--cyan-700);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--mn-rule);
	border-inline-start: 3px solid var(--mn-notice-bar);
	border-radius: var(--wp--custom--radius--md);
	background: var(--mn-surface-raised);
	color: var(--mn-text-strong);
	font-size: var(--wp--preset--font-size--small);
}
.mn-notice--error { --mn-notice-bar: var(--wp--preset--color--error); }
.mn-notice--warning { --mn-notice-bar: var(--wp--preset--color--warn); }
.mn-notice--success { --mn-notice-bar: var(--wp--preset--color--ok); }
.mn-notice p { margin: 0; }
.mn-notice ul { margin: 0.5rem 0 0; padding-inline-start: 1.25rem; }
.mn-notice a { color: inherit; }

/* ================================================================================================================
   CHROME, CLOSING CTA, FOOTER, PAGE HERO, FORMS, 404 AND SEARCH (Chrome engineer, "Yard Pro", 4 Oct 2026)
   Mockup A's language: a solid ink-0 utility bar with a cyan seam; a graphite header (glass over the home hero,
   solid everywhere else) with Inter 500 nav and cyan underline bars; full-width graphite mega panels; a
   full-screen graphite drawer on phones; a glass dock; the giant-type closing call to action; a clean footer.
   Everything reads the surface-context properties; the chrome is in the dark list (§3).
   ================================================================================================================ */

/* 15. Chrome: site notice (§7.25) -------------------------------------------------------------------------------- */

.mn-notice-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	padding-inline: var(--mn-gutter) 4px;
	background: var(--wp--preset--color--paper-2);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}
.mn-notice-bar__text { margin: 0; padding-block: 10px; text-align: center; }
.mn-notice-bar__text a { color: inherit; font-weight: 600; }
.mn-notice-bar__close {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: var(--wp--custom--target--min);
	block-size: var(--wp--custom--target--min);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background: none;
	color: inherit;
	cursor: pointer;
}
.mn-notice-bar__close:hover { background: var(--wp--preset--color--white); }

/* 16. Chrome: utility bar (§7.3) --------------------------------------------------------------------------------- */
/* Full bleed with the gutter, like the header row. One line always: the roadside line drops below 1224 px and the
   address below 960 px (both are in the footer too). Hidden below 782 px (the mobile menu and dock carry it). */

.mn-utility {
	position: relative;
	display: none;
	border-block-end: 1px solid var(--mn-rule);
	background: var(--wp--preset--color--ink-0);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--font-size--meta);
	font-weight: 500;
	line-height: 1;
}
.mn-utility::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -1px;
	block-size: 1px;
	background: var(--wp--preset--gradient--cyan-seam);
	opacity: 0.75;
	pointer-events: none;
}
@media (min-width: 782px) { .mn-utility { display: block; } }
.mn-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	min-block-size: calc(var(--mn-utility-h) - 1px);
	padding-inline: var(--mn-gutter);
}
.mn-utility__list { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.mn-utility__list > li { display: flex; align-items: center; }
.mn-utility .mn-icon { inline-size: 15px; block-size: 15px; color: var(--mn-text-muted); }
.mn-utility a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-block-size: var(--wp--custom--target--min);
	color: var(--wp--preset--color--on-dark);
	text-decoration: none;
	transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-utility a:hover { color: var(--mn-link); }
.mn-utility a[aria-current="page"] { color: var(--wp--preset--color--white); text-decoration: underline; text-decoration-color: var(--wp--preset--color--cyan); text-underline-offset: 6px; }
.mn-utility__sep { inline-size: 1px; block-size: 14px; background: var(--mn-rule-2); }
.mn-utility__item--phone a { color: var(--wp--preset--color--white); font-weight: 600; letter-spacing: 0.01em; }
/* Social icons (§7.3, decision #61): 32 × 44 px links, from 1224 px only (the bar is full below that). */
.mn-utility__social { display: flex; align-items: center; margin: 0 -9px; padding: 0; list-style: none; }
.mn-utility .mn-utility__social__link { justify-content: center; inline-size: 32px; color: var(--wp--preset--color--on-dark-3); }
.mn-utility .mn-utility__social__link:hover { color: var(--wp--preset--color--on-dark); }
.mn-utility__social .mn-icon { color: inherit; }
@media (max-width: 1223px) { .mn-utility__list > .mn-utility__item--social { display: none; } }
@media (max-width: 1223px) { .mn-utility__list > .mn-utility__item--roadside { display: none; } }
@media (max-width: 959px) { .mn-utility__list > .mn-utility__item--address { display: none; } }

/* "Open today 9–5" with its light (utility bar, mobile menu); nav.js dims the light on a closed day. */
.mn-hours { display: inline-flex; align-items: center; gap: 9px; color: var(--mn-text-strong); }
.mn-hours__text { min-inline-size: 13ch; }
.mn-hours.is-closed .mn-led-dot { background: var(--mn-text-muted); box-shadow: none; }

/* Home ticker (§7.3a, decision #52): a 36 px cyan strip under the utility bar, home page only, like Northland's and
   BCEF's. The line set is printed twice so the loop is seamless (translateX(-50%)); the copy is aria-hidden. It holds
   while hovered, while focus is inside and while its pause checkbox is checked (WCAG 2.2.2), and it never moves under
   reduced motion: the copy is dropped and the row scrolls sideways by hand. Cyan with ink-0 text is 7.97:1. */
:root:has(.mn-ticker) { --mn-ticker-h: 37px; }
.mn-ticker {
	position: relative;
	display: flex;
	align-items: stretch;
	block-size: 36px;
	background: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--ink-0);
	border-block-end: 1px solid rgba(var(--wp--custom--ink-rgb), 0.16);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--font-size--meta);
	font-weight: 600;
	line-height: 1;
}
.mn-ticker__viewport {
	display: flex;
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.mn-ticker__track { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.mn-ticker__item { display: inline-flex; align-items: center; gap: 14px; padding-inline: 22px; letter-spacing: 0.01em; }
.mn-ticker__item::before {
	content: "";
	flex: none;
	inline-size: 6px;
	block-size: 6px;
	background: currentColor;
	opacity: 0.55;
	transform: rotate(45deg);
}
/* The pause control: 44 × 44 hit area (the label reaches 4 px past the strip's 36 px), drawn as a 36 px square. */
.mn-ticker__ctl {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 44px;
	border-inline-start: 1px solid rgba(var(--wp--custom--ink-rgb), 0.18);
	cursor: pointer;
}
.mn-ticker__ctl::after { content: ""; position: absolute; inset: -4px 0; }
.mn-ticker__toggle { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.mn-ticker__viewport:focus-visible { outline: 2px solid var(--wp--preset--color--ink-0); outline-offset: -4px; }
.mn-ticker__ctl:has(.mn-ticker__toggle:focus-visible) { outline: 2px solid var(--wp--preset--color--ink-0); outline-offset: -4px; }
.mn-ticker__ctl:hover { background: rgba(var(--wp--custom--ink-rgb), 0.08); }
.mn-ticker__icon { inline-size: 16px; block-size: 16px; }
.mn-ticker__icon--play,
.mn-ticker:has(.mn-ticker__toggle:checked) .mn-ticker__icon--pause { display: none; }
.mn-ticker:has(.mn-ticker__toggle:checked) .mn-ticker__icon--play { display: block; }
@media (prefers-reduced-motion: no-preference) {
	.mn-ticker__track { will-change: transform; animation: mn-ticker var(--wp--custom--motion--ticker) linear infinite; }
	.mn-ticker:is(:hover, :focus-within) .mn-ticker__track,
	.mn-ticker:has(.mn-ticker__toggle:checked) .mn-ticker__track { animation-play-state: paused; }
}
@keyframes mn-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.mn-ticker__viewport { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
	.mn-ticker__item[aria-hidden="true"],
	.mn-ticker__ctl { display: none; }
}

/* 17. Chrome: header and mega menu (§7.2, §7.4) ------------------------------------------------------------------- */
/* Solid graphite on every page; on the home page (body.has-overlay-header) it is glass over the hero, which
   slides up under it (sections.css), and turns solid once the page scrolls (nav.js sentinel). Height never
   changes. Below 1224 px: logo · call square (phones) · Get a quote (from 600 px) · Menu. */

.mn-header {
	position: sticky;
	inset-block-start: var(--mn-adminbar);
	z-index: var(--mn-z-header);
	border-block-end: 1px solid var(--mn-rule);
	background-color: var(--wp--preset--color--white);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
	transition:
		background-color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease),
		box-shadow var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}
.mn-header.is-scrolled { box-shadow: 0 8px 24px rgba(var(--wp--custom--ink-rgb), 0.1); }
.has-overlay-header .mn-header:not(.is-scrolled) {
	background-color: var(--wp--preset--color--white); /* Solid over the home hero too since decision #55. */
	background-image: none;
}
.has-overlay-header .mn-header:has(.mn-nav__item.is-open) { background-color: var(--wp--preset--color--white); background-image: none; }

/* The scrolled-state sentinel (nav.js): 8 px down the page; 120 px over the home hero, where the header turns solid. */
.mn-scroll-sentinel { position: absolute; inset-block-start: 8px; inset-inline-start: 0; inline-size: 1px; block-size: 1px; pointer-events: none; }
.has-overlay-header .mn-scroll-sentinel { inset-block-start: 120px; }

.mn-nav-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	block-size: calc(var(--mn-header-h) - 1px);
	padding-inline: var(--mn-gutter);
}
/* The header row is always on screen, but html's scroll-padding-top (§4) is taller than it, so focusing one of its
   controls on a scrolled page (Tab, or Escape returning focus to a mega-menu trigger) made the browser scroll the
   page up by half a screen. A matching negative scroll margin tells it the control is already in view. */
.mn-nav-row :is(a, button) { scroll-margin-block-start: calc(-1 * var(--mn-sticky-top) - 16px); }
.mn-logo { display: inline-flex; align-items: center; flex: none; min-block-size: var(--wp--custom--target--min); }
.mn-logo__img { display: block; inline-size: auto; block-size: 32px; }
@media (min-width: 782px) { .mn-logo__img--header { block-size: 38px; } }
.mn-logo__img--footer { block-size: 40px; }

.mn-nav { display: none; flex: 1 1 auto; align-self: stretch; }
.mn-nav__list { display: flex; align-items: center; justify-content: center; gap: 2px; block-size: 100%; margin: 0; padding: 0; list-style: none; }
.mn-nav__item { position: static; display: flex; }
.mn-nav__link {
	--mn-nav-pad: 8px;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-block-size: var(--wp--custom--target--min);
	padding: 0 var(--mn-nav-pad);
	border: 0;
	border-radius: var(--wp--custom--radius--xs);
	background: none;
	color: color-mix(in srgb, var(--mn-text-strong) 82%, transparent);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--ui);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
/* Nine top items since the Onboarding dropdown (decision #53), the last one bold: 4 px sides up to 1299 px, 7 px to
   1439 px, and the larger 11 px / ui size from 1440 px, so the row and Get a quote fit inside the gutter at every
   desktop width (measured 1224–1600 px). */
@media (min-width: 1224px) and (max-width: 1299px) { .mn-nav__link { --mn-nav-pad: 4px; } }
@media (min-width: 1300px) and (max-width: 1439px) { .mn-nav__link { --mn-nav-pad: 7px; } }
@media (min-width: 1440px) { .mn-nav__link { --mn-nav-pad: 11px; font-size: var(--wp--custom--font-size--ui); } }
/* A 2 px cyan bar under the label marks hover, the open panel and the current section. */
.mn-nav__link::after {
	content: "";
	position: absolute;
	inset-inline: var(--mn-nav-pad);
	inset-block-end: 8px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--cyan);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}
.mn-nav__link:hover,
.mn-nav__item.is-open > .mn-nav__link,
.mn-nav__item.is-active > .mn-nav__link,
.mn-nav__link[aria-current="page"] { color: var(--mn-text-strong); }
.mn-nav__link:hover::after,
.mn-nav__item.is-open > .mn-nav__link::after,
.mn-nav__item.is-active > .mn-nav__link::after,
.mn-nav__link[aria-current="page"]::after { transform: scaleX(1); }
/* The emphasised item (Onboarding, decision #53; Avi: "make onboarding bold, it should stand out"): bold, full white
   at rest, a cyan dot before the label. Static, so there is nothing to stop under reduced motion. */
.mn-nav__item--emphasis > .mn-nav__link { color: var(--mn-text-strong); font-weight: 700; }
.mn-nav__item--emphasis > .mn-nav__link > span::before,
.mn-mnav__item--emphasis .mn-mnav__summary > span::after {
	content: "";
	display: inline-block;
	inline-size: 7px;
	block-size: 7px;
	margin-inline-end: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--cyan);
	box-shadow: 0 0 0 3px rgba(var(--wp--custom--cyan-rgb), 0.22);
	vertical-align: 0.12em;
}
/* In the mobile menu the dot follows the word, so the labels stay lined up on the gutter. */
.mn-mnav__item--emphasis .mn-mnav__summary > span::after { margin-inline: 10px 0; }
.mn-mnav__item--emphasis .mn-mnav__summary { font-weight: 800; }
.mn-nav__chevron { inline-size: 14px; block-size: 14px; opacity: 0.6; transition: transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease-out), opacity var(--wp--custom--motion--micro) var(--wp--custom--motion--ease); }
.mn-nav__item.is-open .mn-nav__chevron { transform: rotate(180deg); opacity: 1; }

.mn-nav-actions { display: flex; align-items: center; gap: 10px; flex: none; margin-inline-start: auto; }
.mn-header-quote { display: none; }
.mn-header-quote.mn-btn--small { padding-inline: 1.125rem; }
@media (min-width: 600px) { .mn-header-quote { display: inline-flex; } }
@media (min-width: 782px) { .mn-header-call { display: none; } }

/* The Menu button: a 44 px square on phones, "Menu" beside the icon from 600 px, gone from 1224 px. */
.mn-menu-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	flex: none;
	inline-size: var(--wp--custom--target--min);
	block-size: var(--wp--custom--target--min);
	padding: 0;
	border: 1px solid var(--mn-quiet-border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--mn-quiet-bg);
	color: var(--mn-quiet-fg);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-menu-button .mn-icon { inline-size: 20px; block-size: 20px; }
.mn-menu-button:hover { border-color: var(--mn-square-hover-border); background: var(--mn-square-hover-bg); color: var(--mn-square-hover-fg); }
.mn-menu-button__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 600px) {
	.mn-menu-button { inline-size: auto; padding-inline: 14px; }
	.mn-menu-button__label { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; }
}
@media (min-width: 1224px) {
	.mn-nav { display: block; }
	.mn-nav-row { gap: 28px; }
	.mn-nav-actions { margin-inline-start: 0; }
	.mn-menu-button { display: none; }
}

/* Mega panel: the full width of the page under the header, opaque graphite with the masked grid and the pop
   shadow. Under it the dim (.mn-nav__scrim, added by nav.js while a panel is open) covers the page below the
   header, never the header row, and a click on it closes the menu like any click outside. Opening: the panel is
   opaque from its first frame and drops open (a clip from the top edge, nothing see-through), its content fades in
   and drops 6 px, the dim fades in; moving to another panel skips the drop (.is-switched), so the graphite never
   blinks out. Lead column, then the body. */
.mn-nav__panel {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	isolation: isolate;
	max-block-size: calc(100dvh - var(--mn-adminbar) - var(--mn-header-h) - 16px);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-block: 1px solid var(--mn-rule);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--pop);
}
.mn-nav__panel::before { content: ""; } /* the drafting grid (§9) */
.mn-nav__scrim {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	block-size: 100vh;
	margin: 0;
	background: rgba(var(--wp--custom--ink-rgb), 0.28);
	animation: mn-fade-in var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}
.mn-nav__item.is-open > .mn-nav__panel { animation: mn-panel-drop var(--wp--custom--motion--ui) var(--wp--custom--motion--ease-out); }
.mn-nav__item.is-open.is-switched > .mn-nav__panel { animation: none; }
.mn-nav__item.is-open > .mn-nav__panel > .mn-megamenu { animation: mn-panel-in var(--wp--custom--motion--ui) var(--wp--custom--motion--ease-out); }
/* The drop ends 120 px below the panel so the pop shadow (100 px deep) is never cut. */
@keyframes mn-panel-drop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -120px 0); } }
@keyframes mn-panel-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
	/* §24 gives overlays a 100 ms fade; here the panel itself stays opaque from its first frame (no drop) and only
	   its content takes that fade. The dim and the chevron change at once (§24's global stop). */
	.mn-header .mn-nav__item.is-open > .mn-nav__panel { animation: none; }
	.mn-header .mn-nav__item.is-open > .mn-nav__panel > .mn-megamenu { animation: mn-fade-in var(--wp--custom--motion--reduced) linear; animation-duration: var(--wp--custom--motion--reduced) !important; }
}

.mn-megamenu {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr);
	gap: 48px;
	max-inline-size: calc(var(--mn-wide) + 2 * var(--mn-gutter));
	margin-inline: auto;
	padding: 36px var(--mn-gutter) 40px;
}
.mn-megamenu__lead { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-inline-end: 40px; border-inline-end: 1px solid var(--mn-rule); }
.mn-megamenu__lead > * { margin: 0; }
.mn-megamenu__hub {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-block-size: var(--wp--custom--target--min);
	margin-block-start: 4px;
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 800;
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: var(--wp--custom--tracking--heading);
	text-decoration: none;
	transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-megamenu__hub .mn-megamenu__arrow { inline-size: 1.375rem; block-size: 1.375rem; color: var(--wp--preset--color--cyan); }
.mn-megamenu__hub:hover { color: var(--mn-link); }
.mn-megamenu__hub--label:hover { color: var(--mn-text-strong); }
.mn-megamenu__call {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-block-size: var(--wp--custom--target--min);
	color: var(--mn-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-megamenu__call .mn-icon { inline-size: 16px; block-size: 16px; color: var(--mn-link); }
.mn-megamenu__call:hover { color: var(--mn-text-strong); }
.mn-megamenu__meta { display: flex; align-items: center; gap: 10px; color: var(--mn-text); font-size: var(--wp--preset--font-size--small); }
.mn-megamenu__meta .mn-icon { flex: none; inline-size: 16px; block-size: 16px; color: var(--mn-link); }
.mn-megamenu__more { display: grid; inline-size: 100%; margin: 6px 0 0; padding: 8px 0 0; border-block-start: 1px solid var(--mn-rule); list-style: none; }
.mn-megamenu__more--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-block-start: 28px; padding-block-start: 10px; }
.mn-megamenu__more--row > li { border-block-end: 1px solid var(--mn-rule); }
.mn-megamenu__more-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	min-block-size: var(--wp--custom--target--min);
	color: var(--mn-text);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-megamenu__more-link .mn-megamenu__arrow { inline-size: 16px; block-size: 16px; color: var(--mn-text-muted); }
.mn-megamenu__more-link:hover { color: var(--mn-link); }

.mn-megamenu__arrow { flex: none; transition: transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease); }
:is(.mn-megamenu__hub, .mn-megamenu__more-link, .mn-megamenu__heading-link, .mn-megamenu__tile):hover .mn-megamenu__arrow { color: var(--mn-link); }
@media (hover: hover) and (pointer: fine) {
	:is(.mn-megamenu__hub, .mn-megamenu__more-link, .mn-megamenu__heading-link, .mn-megamenu__tile):hover .mn-megamenu__arrow { transform: translateX(3px); }
}

.mn-megamenu__columns { display: grid; grid-template-columns: repeat(var(--mn-megamenu-cols, 3), minmax(0, 1fr)); gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--60); align-content: start; }
.mn-megamenu__column { min-inline-size: 0; }
.mn-megamenu__heading { margin: 0 0 6px; border-block-end: 1px solid var(--mn-rule); }
.mn-megamenu__heading > span,
.mn-megamenu__heading-link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-block-size: 52px;
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: var(--wp--custom--tracking--title);
	text-decoration: none;
}
.mn-megamenu__heading-link .mn-megamenu__arrow { margin-inline-start: auto; inline-size: 18px; block-size: 18px; color: var(--mn-text-muted); }
.mn-megamenu__heading-link:hover { color: var(--mn-link); }
.mn-megamenu__subheading { margin: 14px 0 4px; color: var(--mn-text-muted); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: var(--wp--custom--tracking--label); text-transform: uppercase; }
.mn-megamenu__list { margin: 0; padding: 0; list-style: none; }
.mn-megamenu__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-block-size: var(--wp--custom--target--min);
	color: var(--mn-text);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-megamenu__link:hover { color: var(--mn-text-strong); }
.mn-megamenu__link:hover .mn-menu__label { text-decoration: underline; text-decoration-color: var(--wp--preset--color--cyan); text-underline-offset: 5px; }
.mn-megamenu__link[aria-current="page"] { color: var(--mn-text-strong); font-weight: 600; }
.mn-megamenu__link:has(.mn-menu__note) { flex-wrap: wrap; row-gap: 2px; padding-block: 7px; }

/* Link tiles (Services with icons; Resources and About as plain tiles). */
.mn-megamenu__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); margin: 0; padding: 0; list-style: none; align-content: start; }
.mn-megamenu__tile {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 14px;
	block-size: 100%;
	min-block-size: 56px;
	padding: 10px 16px;
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--paper);
	color: var(--mn-text);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 500;
	text-decoration: none;
	transition: border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-megamenu__tile.has-icon { min-block-size: 76px; color: var(--mn-text-strong); font-family: var(--wp--preset--font-family--display); font-size: 1.0625rem; font-weight: 700; letter-spacing: var(--wp--custom--tracking--title); }
.mn-megamenu__tile-icon {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	flex: none;
	inline-size: var(--wp--custom--target--min);
	block-size: var(--wp--custom--target--min);
	border: 1px solid var(--mn-ring-border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--mn-ring-bg);
	color: var(--mn-ring-fg);
}
.mn-megamenu__tile-icon .mn-icon { inline-size: 20px; block-size: 20px; }
.mn-megamenu__tile .mn-megamenu__arrow { margin-inline-start: auto; inline-size: 18px; block-size: 18px; color: var(--mn-text-muted); }
.mn-megamenu__tile:hover { border-color: var(--mn-rule-3); background: var(--wp--preset--color--paper-2); color: var(--mn-text-strong); }
.mn-megamenu__tile[aria-current="page"] { border-color: rgba(var(--wp--custom--cyan-rgb), 0.5); }

/* Counts beside menu labels: computed, never typed. */
.mn-menu__count {
	display: inline-grid;
	place-items: center;
	min-inline-size: 1.5rem;
	padding: 3px 7px;
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--preset--color--paper);
	color: var(--mn-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--font-size--micro);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}
.mn-menu__note { flex-basis: 100%; color: var(--mn-text-muted); font-size: var(--wp--preset--font-size--small); font-weight: 400; }

/* 18. Chrome: mobile menu (§7.5) --------------------------------------------------------------------------------- */
/* A modal <dialog>: full screen on phones, a right-hand drawer from 600 px. Top-level rows in Archivo 700 with
   hairlines; sections open as accordions; the foot holds Driver Docs · Customer Portal, Get a quote, Call. */

.mn-mobile-menu {
	box-sizing: border-box;
	position: fixed;
	inset: 0;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: 100dvh;
	max-block-size: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--white);
	color: var(--mn-text);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.mn-mobile-menu[open] { display: flex; flex-direction: column; animation: mn-menu-in var(--wp--custom--motion--ui) var(--wp--custom--motion--ease-out); }
.mn-mobile-menu.is-closing { animation: mn-menu-out var(--wp--custom--motion--micro) var(--wp--custom--motion--ease-in) forwards; }
.mn-mobile-menu::backdrop { background: rgba(var(--wp--custom--ink-rgb), 0.6); }
@keyframes mn-menu-in { from { transform: translateX(100%); } }
@keyframes mn-menu-out { to { transform: translateX(100%); } }
@media (min-width: 600px) {
	.mn-mobile-menu { inset-inline-start: auto; inline-size: min(30rem, 100%); border-inline-start: 1px solid var(--mn-rule); box-shadow: var(--wp--preset--shadow--pop); }
}
html.has-open-dialog { overflow: hidden; }

.mn-mobile-menu__top {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--mn-z-raised);
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	min-block-size: var(--mn-header-h);
	padding-inline: var(--mn-gutter);
	border-block-end: 1px solid var(--mn-rule);
	background: var(--wp--preset--color--white);
}
.mn-mnav { flex: none; padding: 4px var(--mn-gutter) 0; }
.mn-mnav__list { margin: 0; padding: 0; list-style: none; }
.mn-mnav__item { border-block-end: 1px solid var(--mn-rule); }
.mn-mnav__summary,
.mn-mnav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	min-block-size: 56px;
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: var(--wp--custom--tracking--title);
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}
.mn-mnav__summary::-webkit-details-marker { display: none; }
.mn-mnav__chevron,
.mn-mnav__arrow { flex: none; inline-size: 20px; block-size: 20px; color: var(--mn-text-muted); transition: transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease-out), color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease); }
.mn-mnav__link[aria-current="page"],
.mn-mnav__group[open] > .mn-mnav__summary { color: var(--mn-link); }
.mn-mnav__group[open] > .mn-mnav__summary .mn-mnav__chevron { transform: rotate(180deg); color: var(--mn-link); }
.mn-mnav__panel { padding-block: 0 16px; }
.mn-mnav__panel > * { margin: 0; }
.mn-menu__hub-link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-block-size: var(--wp--custom--target--min);
	color: var(--mn-link);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 600;
	text-decoration: none;
}
.mn-menu__hub-link .mn-icon { inline-size: 16px; block-size: 16px; }
.mn-menu__hub-link .mn-menu__count { margin-inline-start: 2px; }
.mn-menu__columns { display: grid; gap: var(--wp--preset--spacing--10); }
/* Every column head reads the same, linked or not (white, medium, 600), as the desktop panel's heads do; only
   the "By make" subheading is a small tracked label. */
.mn-menu__heading {
	display: flex;
	align-items: center;
	min-block-size: var(--wp--custom--target--min);
	margin: 0;
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.3;
}
.mn-menu__subheading {
	margin: 10px 0 0;
	color: var(--mn-text-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}
.mn-menu__heading-link {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-block-size: var(--wp--custom--target--min);
	color: inherit;
	text-decoration: none;
}
.mn-menu__list { margin: 0; padding: 0; list-style: none; }
.mn-menu__list:empty { display: none; }
.mn-menu__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-block-size: var(--wp--custom--target--min);
	color: var(--mn-text);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	text-decoration: none;
}
.mn-menu__link:hover,
.mn-menu__heading-link:hover { color: var(--mn-link); }
.mn-menu__link[aria-current="page"] { color: var(--mn-link); font-weight: 600; }
.mn-menu__link:has(.mn-menu__note) { flex-wrap: wrap; row-gap: 0; padding-block: 6px; }
.mn-menu__footer { margin-block-start: 8px; padding-block-start: 6px; border-block-start: 1px solid var(--mn-rule); }

.mn-mobile-menu__foot { display: grid; gap: 10px; margin-block-start: auto; padding: 28px var(--mn-gutter) calc(20px + env(safe-area-inset-bottom, 0px)); }
.mn-mobile-menu__aux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 6px; padding: 0; list-style: none; }
.mn-mobile-menu__aux-link {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 52px;
	padding: 0 12px;
	white-space: nowrap;
	border: 1px solid var(--mn-quiet-border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--mn-quiet-bg);
	color: var(--mn-text-strong);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}
.mn-mobile-menu__aux-link .mn-icon { inline-size: 18px; block-size: 18px; color: var(--mn-text); }
.mn-mobile-menu__aux-link:hover { border-color: var(--mn-quiet-border-hover); background: var(--mn-quiet-bg-hover); }
@media (max-width: 399px) {
	.mn-mobile-menu__aux { gap: var(--wp--preset--spacing--20); }
	.mn-mobile-menu__aux-link { gap: var(--wp--preset--spacing--20); padding-inline: 10px; }
}
.mn-mobile-menu__ctas { display: grid; gap: 10px; }
.mn-mobile-menu__info { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin: 10px 0 0; color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--meta); line-height: 1.4; }
.mn-mobile-menu__info > span { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); }
.mn-mobile-menu__info .mn-icon { inline-size: 15px; block-size: 15px; }
.mn-mobile-menu__info .mn-hours { color: var(--mn-text); }

/* 19. Chrome: phone action dock (§7.6) --------------------------------------------------------------------------- */
/* A's dock: a 64 px bar of quiet buttons in even columns, Quote in cyan and 1.3× as wide. Below 600 px each cell
   stacks its icon over its label (four or five labels side by side don't fit a 375 px phone in even columns);
   from 600 px they sit side by side. No backdrop blur (it costs frames on mid-range phones), so the fill is opaque
   ink-1: any translucency lets band headings ghost through the buttons. It slides away while typing and while a dialog is open; on the home page it is printed waiting
   and shows once the hero has scrolled off. */

.mn-action-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--mn-z-bar);
	box-sizing: border-box;
	display: flex;
	gap: var(--wp--preset--spacing--20);
	block-size: var(--mn-bar-h);
	padding: 8px var(--mn-gutter) calc(8px + env(safe-area-inset-bottom, 0px));
	background: var(--wp--preset--color--ink-1);
	transition: transform var(--wp--custom--motion--ui) var(--wp--custom--motion--ease), visibility 0s linear 0s;
}
/* A's cyan hairline seam along the top edge, so the dock reads as one bar. */
.mn-action-bar::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 1px; background: var(--wp--preset--gradient--cyan-seam); pointer-events: none; }
.mn-action-bar__cell {
	box-sizing: border-box;
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-inline-size: 0;
	padding-inline: 8px;
	border: 1px solid var(--mn-rule-2); /* A's dock: a quieter hairline than the quiet button's */
	border-radius: var(--wp--custom--radius--sm);
	background: var(--mn-quiet-bg);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--ui);
	white-space: nowrap;
	text-decoration: none;
	transition: transform var(--wp--custom--motion--tap) var(--wp--custom--motion--ease), background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-action-bar__cell .mn-icon { inline-size: 18px; block-size: 18px; }
.mn-action-bar__cell:active { transform: scale(0.97); }
.mn-action-bar__cell:focus-visible { outline-offset: 2px; }
@media (max-width: 599px) {
	.mn-action-bar { gap: 6px; }
	.mn-action-bar__cell { flex-direction: column; gap: var(--wp--preset--spacing--10); padding-inline: 2px; font-size: var(--wp--custom--font-size--micro); }
}
.mn-action-bar.is-waiting,
html.is-typing .mn-action-bar,
html.has-open-dialog .mn-action-bar {
	transform: translateY(110%);
	visibility: hidden;
	transition: transform var(--wp--custom--motion--ui) var(--wp--custom--motion--ease-in), visibility 0s linear var(--wp--custom--motion--ui);
}
/* Without JavaScript nothing would bring the waiting dock in: it shows from the start. */
@media (scripting: none) {
	.mn-action-bar.is-waiting { transform: none; visibility: visible; }
}
/* Room for the dock at the end of the page: the footer grows, so the page ends on ink, not on paper. */
body.has-action-bar .mn-footer { padding-block-end: var(--mn-bar-h); }
@media (min-width: 782px) { .mn-action-bar { display: none; } }

/* 20. Closing call to action and footer (§7.19, §7.24) ----------------------------------------------------------- */
/* The closing CTA sits between main and the footer on every page without a lead form: ink-0 with a centred grid
   and a cyan glow from below, the mega line, Get a quote · Call · Text, then hours and address. */

.mn-closing { padding-block: calc(var(--wp--custom--section) * 1.5); text-align: center; }
.mn-closing__inner { display: flex; flex-direction: column; align-items: center; }
.mn-closing__inner > * { margin: 0; }
.mn-closing__title { max-inline-size: 12ch; margin-block-start: 24px; color: var(--wp--preset--color--white); }
.mn-closing__title .mn-soft { color: var(--mn-text-muted); }
.mn-closing__lede { max-inline-size: 46ch; margin-block-start: 28px; color: var(--mn-text); font-size: var(--wp--preset--font-size--large); line-height: var(--wp--custom--line-height--lede); }
.mn-closing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wp--preset--spacing--30); margin-block-start: 40px; }
.mn-closing__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-block-start: 40px; color: var(--mn-text-muted); font-size: var(--wp--preset--font-size--small); }
.mn-closing__meta > span { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--20); }
.mn-closing__meta .mn-icon { inline-size: 16px; block-size: 16px; }
/* Compact (404, search, legal): the heading at the section size, the buttons, about half the padding. */
.mn-closing--compact { padding-block: calc(var(--wp--custom--section) * 0.75); }
.mn-closing--compact .mn-closing__title { max-inline-size: none; margin-block-start: 18px; }
.mn-closing--compact .mn-closing__lede { margin-block-start: 16px; }
.mn-closing--compact .mn-closing__actions { margin-block-start: 28px; }
@media (max-width: 781px) {
	.mn-closing__actions { display: grid; grid-template-columns: minmax(0, 1fr); inline-size: 100%; max-inline-size: 26.25rem; margin-block-start: 32px; }
	.mn-closing__meta { flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--30); margin-block-start: 32px; }
}

.mn-footer {
	position: relative;
	background: var(--wp--preset--gradient--footer);
	color: var(--mn-text);
	font-size: var(--wp--custom--font-size--ui);
	line-height: var(--wp--custom--line-height--body);
}
.mn-footer::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 1px; background: var(--wp--preset--gradient--cyan-seam); }
.mn-footer__inner > * { margin-block: 0; }

/* Top: brand column beside four link columns (≥1241 px); below that the brand spans the width. */
.mn-ftop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 56px 40px; }
.mn-ftop__brand { display: grid; align-content: start; }
.mn-ftop__brand > * { margin: 0; }
.mn-ftop__logo { justify-self: start; }
.mn-ftop__about { max-inline-size: 36ch; margin-block-start: 20px; color: var(--mn-text); }
.mn-ftop__contact { display: grid; gap: 2px; margin-block-start: 22px; font-style: normal; }
.mn-ftop__contact > p { margin: 0; }
.mn-ftop__phone a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--target--min);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.025em;
	text-decoration: none;
}
.mn-ftop__line { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); min-block-size: 40px; color: var(--wp--preset--color--on-dark); }
.mn-ftop__line .mn-icon { inline-size: 18px; block-size: 18px; color: var(--mn-text-muted); }
.mn-ftop__line a { display: inline-flex; align-items: center; min-block-size: var(--wp--custom--target--min); color: inherit; text-decoration: none; }
:is(.mn-ftop__phone, .mn-ftop__line) a:hover { color: var(--mn-link); }
.mn-ftop__quick { display: flex; flex-wrap: wrap; gap: 0 22px; max-inline-size: 380px; margin-block-start: 16px; padding: 12px 0 0; border-block-start: 1px solid var(--mn-rule); list-style: none; }
.mn-ftop__quick a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-block-size: var(--wp--custom--target--min);
	color: var(--mn-link);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-ftop__quick a:hover { color: var(--wp--preset--color--white); }
.mn-ftop__quick .mn-icon { inline-size: 16px; block-size: 16px; }

.mn-ftop__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
.mn-ftop__col { min-inline-size: 0; }
.mn-ftop__heading {
	margin: 0 0 8px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--font-size--micro);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}
.mn-ftop__list { margin: 0; padding: 0; list-style: none; }
.mn-ftop__link {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--target--min);
	min-inline-size: var(--wp--custom--target--min);
	background: linear-gradient(var(--wp--preset--color--cyan-300), var(--wp--preset--color--cyan-300)) no-repeat 0 calc(50% + 11px) / 0 1px;
	color: var(--mn-text);
	text-decoration: none;
	transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), background-size var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}
.mn-ftop__link:hover,
.mn-ftop__link[aria-current="page"] { background-size: 100% 1px; color: var(--wp--preset--color--white); }
/* Social icons (§7.24, decision #61): 44 px squares under the quick links, open at every width. */
.mn-ftop__social { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.mn-ftop__social__link {
	display: grid;
	place-items: center;
	inline-size: var(--wp--custom--target--min);
	block-size: var(--wp--custom--target--min);
	border: 1px solid var(--mn-rule-2);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--on-dark-2);
	transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-ftop__social__link:hover { border-color: var(--wp--preset--color--cyan-300); color: var(--wp--preset--color--white); }
.mn-ftop__social .mn-icon { inline-size: 18px; block-size: 18px; }
/* The phone disclosure (nav.js, below 782 px): the head's text moves into a full-width 56 px button; label left,
   chevron right, both cyan-300 while open, the chevron turned over (instantly with reduced motion, §24). The
   chevron is printed in every head but shows only inside the button. */
.mn-ftop__chevron { display: none; }
.mn-ftop__toggle {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	inline-size: 100%;
	min-block-size: 56px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: start;
	text-transform: inherit;
	cursor: pointer;
	transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-ftop__toggle .mn-ftop__chevron {
	display: block;
	flex: none;
	inline-size: 20px;
	block-size: 20px;
	color: var(--mn-text-muted);
	transition: transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease-out), color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-ftop__toggle:hover .mn-ftop__chevron { color: var(--wp--preset--color--white); }
.mn-ftop__toggle[aria-expanded="true"],
.mn-ftop__toggle[aria-expanded="true"] .mn-ftop__chevron { color: var(--mn-link); }
.mn-ftop__toggle[aria-expanded="true"] .mn-ftop__chevron { transform: rotate(180deg); }
@media (max-width: 781px) {
	/* Two columns: a heading that wraps ("Company & Resources") keeps its neighbour's first link level. */
	.mn-ftop__heading { display: flex; align-items: flex-end; min-block-size: 2.4em; }
	/* With nav.js the four groups are disclosures, closed by default: one column with hairlines between the rows.
	   Without it they stay open in the two columns above. */
	.mn-ftop__nav.is-collapsible { grid-template-columns: minmax(0, 1fr); gap: 0; border-block-start: 1px solid var(--mn-rule); }
	.mn-ftop__nav.is-collapsible > .mn-ftop__col { border-block-end: 1px solid var(--mn-rule); }
	.mn-ftop__nav.is-collapsible .mn-ftop__heading { display: block; min-block-size: 0; margin: 0; }
	.mn-ftop__nav.is-collapsible .mn-ftop__panel:not([hidden]) { padding-block-end: var(--wp--preset--spacing--40); }
}
@media (max-width: 389px) {
	.mn-ftop__nav { column-gap: var(--wp--preset--spacing--40); }
	.mn-ftop__list { font-size: var(--wp--custom--font-size--ui); }
}
@media (min-width: 782px) {
	.mn-ftop__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
}
@media (min-width: 782px) and (max-width: 1240px) {
	.mn-ftop__brand { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
	.mn-ftop__logo { grid-column: 1 / -1; }
	.mn-ftop__about { grid-column: 1; }
	.mn-ftop__contact { grid-column: 2; grid-row: 2 / span 2; }
	.mn-ftop__quick { grid-column: 1; align-self: start; }
}
/* A's footer top: one grid, the brand at 1.75fr beside four 1fr link columns. The nav joins it as a subgrid so its
   columns share the parent's tracks and gaps (without subgrid it keeps its own four even columns). */
@media (min-width: 1241px) {
	.mn-ftop { grid-template-columns: minmax(0, 1.75fr) repeat(4, minmax(0, 1fr)); gap: 40px 32px; padding-block: 72px 56px; }
	.mn-ftop__nav { grid-column: 2 / -1; grid-template-columns: subgrid; }
}

/* Partner plates: Blue Capital (the sister company) and Max-Atlas (the dealer line). */
.mn-partners { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); padding-block-end: 40px; }
@media (min-width: 960px) { .mn-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mn-partner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 22px 24px;
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--lg);
	background: rgba(255, 255, 255, 0.025);
}
@media (min-width: 600px) { .mn-partner { flex-direction: row; align-items: center; gap: 22px; } }
.mn-partner p { margin: 0; color: var(--mn-text); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.mn-partner strong { color: var(--wp--preset--color--white); font-weight: 600; }
/* A 44 px target inside running text: the negative block margin keeps the line rhythm; a quiet underline at rest. */
.mn-partner__link {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	min-block-size: var(--wp--custom--target--min);
	margin-block: -11px;
	color: var(--mn-link);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-color: var(--mn-rule-3);
	text-underline-offset: 3px;
}
.mn-partner__link .mn-icon { inline-size: 15px; block-size: 15px; }
.mn-partner__link:hover { text-decoration-color: currentColor; }
.mn-partner-logo { display: block; flex: none; inline-size: auto; }
.mn-partner-logo--blue-capital { block-size: 30px; }
.mn-partner-logo--max-atlas { block-size: 28px; }

.mn-footer-notices { padding-block: 28px; border-block-start: 1px solid var(--mn-rule); color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--meta); line-height: 1.6; }
.mn-footer-notices p { max-inline-size: 118ch; margin: 0; }
.mn-footer-notices p + p { margin-block-start: 8px; }

.mn-footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--60);
	padding-block: 14px 28px;
	border-block-start: 1px solid var(--mn-rule);
	color: var(--mn-text-muted);
	font-size: var(--wp--custom--font-size--meta);
}
.mn-footer-legal__list { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.mn-footer-legal__list a,
.mn-footer-legal__list .mn-linkbutton { display: inline-flex; align-items: center; min-block-size: var(--wp--custom--target--min); color: var(--mn-text); text-decoration: none; }
.mn-footer-legal__list a:hover,
.mn-footer-legal__list .mn-linkbutton:hover { color: var(--wp--preset--color--white); text-decoration: underline; text-underline-offset: 3px; }
.mn-footer-legal__sign { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--50); margin: 0; }
@media (max-width: 781px) { .mn-footer-legal { flex-direction: column; align-items: flex-start; } }

/* The plain button row (mainland/contact-actions, variant "buttons"): confirmations and contact cards. */
.mn-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); }
.mn-actions__heading { margin: 0; color: var(--mn-text-strong); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xx-large); font-weight: 800; line-height: var(--wp--custom--line-height--heading); letter-spacing: var(--wp--custom--tracking--heading); }
.mn-actions__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 599px) { .mn-actions__buttons > .mn-btn { flex: 1 1 100%; } }

/* 21. Page hero (02 §7.28 mainland/page-hero) and page body ------------------------------------------------------ */
/* The graphite stage of every page but home: masked grid, grain and a low cyan glow; breadcrumbs, eyebrow, a
   mixed-case H1, lede and date line. Restrained: height follows the content. */

.mn-page-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
	background: var(--wp--preset--gradient--stage);
}
.mn-page-hero__glow { --mn-glow-strength: 0.13; inset-inline-start: -14%; inset-block-end: -70%; inline-size: 60%; block-size: 130%; }
.mn-page-hero__inner { display: flex; flex-direction: column; align-items: flex-start; padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--70); }
.mn-page-hero__inner > * { margin: 0; }
/* The copy column (breadcrumbs, eyebrow, H1, lede, buttons, date); the variants (pages.css) set a media column beside it. */
.mn-page-hero__copy { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; min-inline-size: 0; }
.mn-page-hero__copy > * { margin: 0; }
.mn-page-hero__eyebrow { margin-block-end: 20px; }
.mn-page-hero__title {
	max-inline-size: 20ch;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--huge);
	line-height: 0.98;
	letter-spacing: -0.035em;
	overflow-wrap: anywhere;
}
.mn-page-hero__lede { max-inline-size: var(--mn-measure); margin-block-start: 22px; color: var(--mn-text); font-size: var(--wp--preset--font-size--large); line-height: var(--wp--custom--line-height--lede); }
.mn-page-hero__meta { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); margin-block-start: 22px; color: var(--mn-text-muted); font-size: var(--wp--preset--font-size--small); }
.mn-page-hero__meta .mn-icon { inline-size: 16px; block-size: 16px; }
@media (min-width: 782px) {
	.mn-page-hero__inner { padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70); }
	/* Contact: the address card with the phone and today's hours follows straight away, so the hero stays short. */
	.mn-main--contact .mn-page-hero__inner { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60); }
}

/* Breadcrumbs (§7.23): above the eyebrow; on phones only the parent shows, as a back link. */
.mn-crumbs { margin-block-end: 18px; }
.mn-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--meta); font-weight: 500; line-height: 1.2; }
.mn-crumbs li { display: inline-flex; align-items: center; min-inline-size: 0; }
.mn-crumbs li + li::before { content: "/"; content: "/" / ""; margin-inline: 10px; color: var(--mn-rule-3); }
.mn-crumbs a { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--10); min-block-size: var(--wp--custom--target--min); min-inline-size: var(--wp--custom--target--min); color: var(--mn-text); text-decoration: none; }
.mn-crumbs a:hover { color: var(--wp--preset--color--white); text-decoration: underline; text-underline-offset: 3px; }
.mn-crumbs [aria-current="page"] { overflow: hidden; max-inline-size: 40ch; color: var(--wp--preset--color--on-dark); text-overflow: ellipsis; white-space: nowrap; }
.mn-crumbs__back { display: none; inline-size: 16px; block-size: 16px; }
@media (max-width: 599px) {
	.mn-crumbs li { display: none; }
	.mn-crumbs li:nth-last-child(2) { display: inline-flex; }
	.mn-crumbs li:nth-last-child(2)::before { content: none; }
	.mn-crumbs__back { display: block; margin-inline-start: -4px; }
}

.mn-page-body { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80); }
.mn-page-body:has(> .entry-content:empty) { display: none; }

/* The page flow (page.html, page-landing, page-tool, page-rental-class): the post content runs full width, as kit
   bands carry their own container (pages.css); anything typed loose between bands keeps to the reading column. */

.mn-flow { display: flow-root; }
.mn-flow > * { margin-block: 0; }
.mn-flow > :where(:not(.mn-band, .mn-kit, .mn-draft-note, .alignfull, .wp-block-mainland-page-hero)) {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: calc(var(--wp--style--global--content-size, 42rem) + 2 * var(--mn-gutter));
	margin-inline: auto;
	padding-inline: var(--mn-gutter);
}
.mn-flow > :where(:not(.mn-band, .mn-draft-note)):first-child,
.mn-flow > .mn-draft-note + :where(:not(.mn-band)),
.mn-flow > .mn-band + :where(:not(.mn-band)) { margin-block-start: var(--wp--preset--spacing--70); }
.mn-flow > :where(:not(.mn-band)) + :where(:not(.mn-band)) { margin-block-start: var(--wp--preset--spacing--40); }
.mn-flow > :where(:not(.mn-band, .mn-draft-note)):last-child,
.mn-flow > :where(:not(.mn-band, .mn-draft-note)):has(+ .mn-band) { margin-block-end: var(--wp--preset--spacing--70); }
.mn-flow:empty { display: none; }


/* Prose (02 §5): the post content of guides, insights, legal and plain pages (page-legal, single and page set
   .mn-prose on core/post-content). Only its own children take these sizes, so a block inside it (a form, a card)
   keeps its type. */
.mn-prose { color: var(--mn-text); font-size: 1.125rem; line-height: 1.65; }
.mn-prose > :is(p, ul, ol) { font-size: 1.125rem; line-height: 1.65; }
.mn-prose > h2 { margin-block: 2.5rem 0; font-size: var(--wp--preset--font-size--xx-large); }
.mn-prose > h3 { margin-block: 2rem 0; font-size: var(--wp--preset--font-size--x-large); }
.mn-prose > :is(h2, h3):first-child { margin-block-start: 0; }
.mn-prose > :is(h2, h3) + * { margin-block-start: 0.75rem; }
.mn-prose > :is(ul, ol) > li + li { margin-block-start: 8px; }

/* Post lists (search, archives): ruled rows, as on the 404's "where to next" list. Each row: what it is (tracked
   caps), the Archivo title as the stretched link, a one-line excerpt and the arrow square. */
.mn-results { display: grid; gap: 28px; }
.mn-results > * { margin: 0; }
.mn-results__list { margin: 0; padding: 0; border-block-start: 1px solid var(--mn-rule); list-style: none; }
.mn-results__list > li { margin: 0; }
.mn-result {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding-block: 22px;
	border-block-end: 1px solid var(--mn-rule);
}
.mn-result__body { display: grid; gap: 8px; min-inline-size: 0; }
.mn-result__body > * { margin: 0; }
.mn-result__title { font-size: var(--wp--preset--font-size--x-large); line-height: var(--wp--custom--line-height--title); letter-spacing: var(--wp--custom--tracking--title); }
.mn-result__title a { color: var(--mn-text-strong); }
.mn-result:hover .mn-result__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
.mn-result__excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var(--mn-text);
	font-size: var(--wp--custom--font-size--ui);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}
@media (min-width: 960px) { .mn-result__excerpt { -webkit-line-clamp: 1; line-clamp: 1; } }
.mn-pagination { gap: 10px; font-weight: 600; }
.mn-pagination a,
.mn-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--wp--custom--target--min); min-block-size: var(--wp--custom--target--min); border-radius: var(--wp--custom--radius--sm); text-decoration: none; }
.mn-pagination .page-numbers.current { background: var(--wp--preset--color--ink-1); color: var(--wp--preset--color--white); }

/* 22. Forms (§7.9) ----------------------------------------------------------------------------------------------- */
/* A lead form is a white card on any surface (.mn-on-light switches the context back): Inter labels above
   48 px fields with a 3:1 border, hints linked by aria-describedby, the cyan-700 focus border plus a soft ring,
   errors in red with an icon, the honeypot off-screen and the Turnstile slot taking no room until it shows. */

.mn-lead-form {
	box-sizing: border-box;
	max-inline-size: 46rem;
	padding: clamp(22px, 1rem + 2.4vw, 40px);
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--mn-surface);
	box-shadow: var(--mn-shadow-card);
}
.mn-lead-form__heading { margin: 0 0 24px; font-size: var(--wp--preset--font-size--xx-large); }
.mn-form { display: grid; gap: 20px; margin: 0; }
.mn-form[hidden] { display: none; }
.mn-form > * { margin: 0; }
.mn-form__summary:focus { outline: 2px solid var(--wp--preset--color--error); outline-offset: 2px; }
.mn-form__summary-title { font-weight: 700; }
.mn-form__summary a { display: inline-flex; align-items: center; min-block-size: var(--wp--custom--target--min); color: inherit; font-weight: 500; }
.mn-form__field { display: grid; align-content: start; gap: 7px; min-inline-size: 0; }
.mn-form__field > * { margin: 0; }
.mn-form__label { color: var(--mn-text-strong); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--custom--font-size--ui); font-weight: 600; line-height: 1.3; }
.mn-form__req { color: var(--mn-text-muted); font-weight: 400; }
.mn-form__hint { margin: 0; color: var(--mn-text); font-size: var(--wp--preset--font-size--small); line-height: 1.45; }
.mn-form__pair-hint { margin-block-end: -8px; color: var(--mn-text-strong); font-weight: 500; }
.mn-form__control {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: var(--wp--custom--target--button);
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--mn-field-border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--mn-field-bg);
	box-shadow: inset 0 1px 2px rgba(var(--wp--custom--ink-rgb), 0.05);
	color: var(--mn-field-text);
	font: inherit;
	font-size: max(16px, var(--wp--preset--font-size--medium)); /* 16 px or more, so iOS doesn't zoom (01 §6.2) */
	line-height: 1.4;
	transition: border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), box-shadow var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-form__control::placeholder { color: var(--mn-text-muted); opacity: 1; }
textarea.mn-form__control { min-block-size: 9rem; resize: vertical; }
select.mn-form__control {
	appearance: none;
	padding-inline-end: 2.75rem;
	background: var(--mn-field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230A0D11' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.875rem center;
	cursor: pointer;
}
.mn-form__control:hover { border-color: var(--mn-text-strong); }
.mn-form__control:focus-visible {
	border-color: var(--mn-focus);
	outline: 2px solid transparent;
	outline-offset: 0;
	box-shadow: 0 0 0 1px var(--mn-focus), 0 0 0 4px rgba(var(--wp--custom--cyan-rgb), 0.22);
}
.mn-form__control[aria-invalid="true"] { border-color: var(--wp--preset--color--error); box-shadow: inset 0 0 0 1px var(--wp--preset--color--error); }
.mn-form__control[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 1px var(--wp--preset--color--error), 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--error) 18%, transparent); }
.mn-form__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
	color: var(--wp--preset--color--error);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;
}
.mn-form__error::before {
	content: "";
	flex: none;
	inline-size: 1.05em;
	block-size: 1.05em;
	margin-block-start: 0.1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mn-form__error[hidden] { display: none; }
/* Checkbox and radio rows (§7.9): a 24 px box with the 3:1 field border, the whole row a 44 px target; checked is ink
   with a white tick or dot. Disabled: paper-2 fill, text-3 text. Read-only (a prefilled unit): paper-2, no border. */
.mn-form__set { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.mn-form__set > legend { margin-block-end: 2px; padding: 0; }
.mn-check { display: flex; align-items: center; gap: 12px; min-block-size: var(--wp--custom--target--min); color: var(--mn-text-strong); font-size: var(--wp--custom--font-size--ui); cursor: pointer; }
.mn-check input { appearance: none; box-sizing: border-box; display: grid; flex: none; place-items: center; inline-size: 24px; block-size: 24px; margin: 0; border: 1px solid var(--mn-field-border); border-radius: var(--wp--custom--radius--xs); background: var(--mn-field-bg); cursor: pointer; }
.mn-check input[type="radio"] { border-radius: 50%; }
.mn-check input::before { content: ""; inline-size: 15px; block-size: 15px; background: var(--wp--preset--color--white); transform: scale(0); transition: transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease); }
.mn-check input[type="checkbox"]::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mn-check input[type="radio"]::before { inline-size: 9px; block-size: 9px; border-radius: 50%; }
.mn-check input:hover { border-color: var(--mn-text-strong); }
.mn-check input:checked { border-color: var(--wp--preset--color--ink-1); background: var(--wp--preset--color--ink-1); }
.mn-check input:checked::before { transform: none; }
.mn-check input:focus-visible { outline: var(--wp--custom--focus--width) solid var(--mn-focus); outline-offset: 2px; }
.mn-form__control:disabled { background: var(--wp--preset--color--paper-2); box-shadow: none; color: var(--wp--preset--color--text-3); cursor: not-allowed; }
.mn-form__control[readonly] { border-color: transparent; background: var(--wp--preset--color--paper-2); box-shadow: none; color: var(--wp--preset--color--text); }
/* The honeypot is off-screen for people and assistive tech; bots still fill it. */
.mn-form__hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
/* Turnstile runs "interaction-only": the slot takes no room (and no gap) until Cloudflare shows a challenge. */
.mn-form__turnstile:empty,
.mn-form__turnstile[data-sitekey=""] { display: none; }
.mn-form__turnstile { margin-block: -10px; }
.mn-form__turnstile:has(iframe) { margin-block: 0; }

.mn-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-block-start: 4px; }
/* Busy (10 §4.1): the label and arrow dim to 0.35 and the spinner fades in, turning once every 700 ms (the
   component constant in 10 §2). Reduced motion: no spinner; the label stays at full opacity and lead-form.js
   swaps in the form's "Sending…" wording. */
.mn-form__submit[aria-busy="true"] { cursor: progress; }
.mn-form__submit[aria-busy="true"] > * { opacity: 0.35; }
.mn-form__submit[aria-busy="true"]::after {
	content: "";
	position: absolute;
	inset: 0;
	inline-size: 16px;
	block-size: 16px;
	margin: auto;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	animation: mn-fade-in var(--wp--custom--motion--micro) var(--wp--custom--motion--ease) both, mn-spin 0.7s linear infinite;
}
.mn-form__submit { position: relative; }
@keyframes mn-spin { to { transform: rotate(360deg); } }
.mn-form__notice { display: flex; flex: 1 1 15rem; align-items: flex-start; gap: var(--wp--preset--spacing--20); margin: 0; color: var(--mn-text-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.45; }
.mn-form__notice .mn-icon { inline-size: 16px; block-size: 16px; margin-block-start: 0.1em; }
@media (min-width: 600px) {
	.mn-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--40); }
	.mn-form > * { grid-column: 1 / -1; }
	.mn-form > .mn-form__field--phone,
	.mn-form > .mn-form__field--email { grid-column: auto; }
}
@media (max-width: 599px) { .mn-form__submit { inline-size: 100%; } }

/* Success: the form is replaced in place by this panel; focus moves to its heading. */
.mn-form__done { display: grid; gap: 14px; justify-items: start; }
.mn-form__done[hidden] { display: none; }
.mn-form__done > * { margin: 0; }
.mn-form__done-mark { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; background: color-mix(in srgb, var(--wp--preset--color--ok) 12%, transparent); color: var(--wp--preset--color--ok); }
.mn-form__done-icon { inline-size: 28px; block-size: 28px; }
.mn-form__done-title { font-size: var(--wp--preset--font-size--xx-large); }
.mn-form__done-title:focus { outline: none; }
.mn-form__ref { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--wp--custom--radius--xs); background: var(--wp--preset--color--ink-1); color: var(--wp--preset--color--cyan-300); font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.mn-form__next-title { margin-block-start: 6px; color: var(--mn-text-strong); font-weight: 700; }
.mn-form__next { padding-inline-start: 1.25rem; color: var(--mn-text); }
.mn-form__next[hidden] { display: none; }
.mn-form__done .mn-actions__buttons { margin-block-start: 6px; }

/* Site search (search results, 404): the label as a title, the field and the primary button; the card is below. */
.mn-search { display: grid; gap: 14px; }
.mn-search .mn-search__label {
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	line-height: var(--wp--custom--line-height--title);
	letter-spacing: var(--wp--custom--tracking--title);
}
.mn-search__row { display: flex; gap: var(--wp--preset--spacing--20); }
.mn-search__row .mn-form__control { flex: 1; min-inline-size: 0; }
.mn-search__row .mn-btn { flex: none; }
@media (max-width: 420px) { .mn-search__row .mn-btn span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .mn-search__row .mn-btn { padding-inline: 0.875rem; } }

/* 23. 404 and 410 (14 §23.3), "where to next" rows ---------------------------------------------------------------- */

.mn-not-found__body { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80); }

/* The search card and "where most people go next" side by side (404, 410, search). With results the left column
   is wider and holds the rows; without, both columns centre on each other. */
.mn-search-layout { display: grid; gap: 40px; }
.mn-search-layout > *,
.mn-search-layout__main > * { margin: 0; }
.mn-search-layout__main { display: grid; gap: 32px; align-content: start; min-inline-size: 0; }
@media (min-width: 960px) {
	.mn-search-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
	.mn-search-layout:has(.mn-result) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}

.mn-search-card {
	box-sizing: border-box;
	padding: clamp(22px, 1rem + 2vw, 32px);
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	box-shadow: var(--mn-shadow-card);
}
.mn-search-card__call {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 22px 0 0;
	padding-block-start: 18px;
	border-block-start: 1px solid var(--mn-rule);
	color: var(--mn-text);
}
.mn-search-card__call .mn-icon { flex: none; inline-size: 18px; block-size: 18px; color: var(--mn-link); }
.mn-search-card__call a { display: inline-flex; align-items: center; min-block-size: var(--wp--custom--target--min); margin-block: -11px; font-weight: 600; }

.mn-next > * { margin: 0; }
.mn-next__heading { margin-block-end: 14px; }
.mn-jump { margin: 0; padding: 0; border-block-start: 1px solid var(--mn-rule); list-style: none; }
.mn-jump > li { border-block-end: 1px solid var(--mn-rule); }
.mn-jump__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-block-size: 68px;
	color: var(--mn-text-strong);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--title);
	text-decoration: none;
}
.mn-jump__icon {
	box-sizing: border-box;
	display: grid;
	place-items: center;
	flex: none;
	inline-size: var(--wp--custom--target--min);
	block-size: var(--wp--custom--target--min);
	border: 1px solid var(--mn-rule);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink-1);
	transition: background-color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease), color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease), border-color var(--wp--custom--motion--ui) var(--wp--custom--motion--ease);
}
.mn-jump__icon .mn-icon { inline-size: 20px; block-size: 20px; }
.mn-jump__arrow { margin-inline-start: auto; inline-size: 20px; block-size: 20px; color: var(--mn-link); transition: transform var(--wp--custom--motion--micro) var(--wp--custom--motion--ease); }
.mn-jump__link:hover .mn-jump__icon { border-color: var(--wp--preset--color--ink-1); background: var(--wp--preset--color--ink-1); color: var(--wp--preset--color--cyan); }
@media (hover: hover) and (pointer: fine) { .mn-jump__link:hover .mn-jump__arrow { transform: translateX(3px); } }

/* Reduced motion for the chrome's own hover movements (the global rule in §24 stops the timing). */
@media (prefers-reduced-motion: reduce) {
	:is(.mn-megamenu__hub, .mn-megamenu__more-link, .mn-megamenu__heading-link, .mn-megamenu__tile):hover .mn-megamenu__arrow,
	.mn-arrow-link:hover .mn-icon,
	.mn-jump__link:hover .mn-jump__arrow,
	.mn-action-bar__cell:active { transform: none; }
	.mn-form__submit[aria-busy="true"] > * { opacity: 1; }
	.mn-form__submit[aria-busy="true"]::after { content: none; }
}

/* 24. Reduced motion --------------------------------------------------------------------------------------------- */
/* Every animation above has this path: nothing moves, everything is visible. */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		/* 0s, not 0.01ms: a state change is instant, so a script can move focus into what it just showed (the sell
		   stepper's next step), and a visibility switch never waits a frame. */
		transition-duration: 0s !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}
	.mn-btn:hover, .mn-btn:active, .mn-square--go, .mn-btn:hover .mn-icon--arrow-right { transform: none !important; }
	.mn-card-host:hover .mn-photo > img, .mn-card-host:hover .mn-sweep > :is(img, .mn-art) { transform: none; }
	/* Overlays still fade in over 100 ms (10 §6): their own duration beats the global stop above. The mega panel is
	   opaque from its first frame instead (§17: only its content fades). */
	.mn-mobile-menu[open] { animation: mn-fade-in var(--wp--custom--motion--reduced) linear; animation-duration: var(--wp--custom--motion--reduced) !important; }
	.mn-mobile-menu.is-closing { animation: none; }
}