/*
 * The home hero carousel (decision #50; docs/02-DESIGN-SYSTEM.md §7.28, 10-MOTION.md §4.14): the stage and its
 * layers, the drawn stage of the chassis-rental slide, the Max-Atlas studio set, the slides' copy and the control dock.
 * Home only (functions.php, handle "mainland-home", asked for by mainland/hero-home), so no other page carries these
 * bytes. Render-blocking on purpose: the hero is the first screen. The hero's base (height, copy column, the stat
 * plate, the "Visit the yard" pill) stays in sections.css, which prints before this file.
 *
 * Tokens only (02 §2.12): theme.json presets, --wp--custom--*, and the --mn-* surface properties.
 */

/* Home hero carousel (decision #50; 10 §4.14) ---------------------------------------------------------------------
   Four slides (trucks, chassis rental, Max-Atlas, financing), each a full-bleed layer on the stage and a copy group in
   the copy column. The layers stack in the stage and the copy groups in one grid cell sized to the tallest, so the
   hero never changes height; every slide's copy has the same shape and fills the cell from the top, so each heading
   keeps the first one's place and the actions sit on the cell's bottom edge. The "Visit the yard" pill and the stat
   plate stay put. The control bar docks at the bottom of the copy area, in the pill's row from 1224 px.
   At rest only the current slide shows (visibility, never a CSS opacity on the first slide). home-hero.js marks the
   hero .is-enhanced and each layer .is-ready when its slide is about to show (all of them after load while the
   slides rotate), so a later photo joins the layout and loads only then. Without JavaScript the picker links
   (#mn-slide-2 …) show their slide through :target. */

.mn-hero--carousel {
	--mn-fade: var(--wp--custom--motion--reveal);
	--mn-dock-bottom: 20px;
	--mn-dock-gap: 22px;
}
.mn-hero--carousel .mn-hero__body {
	position: relative;
	padding-block-end: calc(var(--mn-dock-gap) + var(--wp--custom--target--min) + var(--mn-dock-bottom));
	touch-action: pan-y pinch-zoom; /* a sideways swipe changes the slide; scrolling and zoom stay the browser's */
}

/* The stage: one isolated layer per slide; the current one on top. A layer that stops being current stays at full
   strength under the incoming one until it has faded in, then hides, so the crossfade never dips to the stage. */
.mn-hero__stage { position: absolute; inset: 0; z-index: var(--mn-z-under); isolation: isolate; }
.mn-hero__layer {
	position: absolute;
	inset: 0;
	isolation: isolate;
	visibility: hidden;
	transition: visibility 0s linear var(--mn-fade);
}
.mn-hero__layer.is-current {
	z-index: var(--mn-z-raised);
	visibility: visible;
	animation: mn-hero-in var(--mn-fade) var(--wp--custom--motion--ease) backwards;
	transition: none;
}
/* Nothing fades until the first slide change: the first layer's photo is the LCP image (10 §1 rule 3). */
.mn-hero:not(.has-moved) .mn-hero__layer.is-current { animation: none; }
@keyframes mn-hero-in { from { opacity: 0; } }
/* A layer stays out of the layout until its slide is asked for (.is-ready), so its lazy photo waits. */
.mn-hero__layer:not(.is-current, .is-ready) { display: none; }
/* The settle on load is the first photo's alone (§11). */
.mn-hero__layer:not(:first-child) :is(.mn-hero__media, .mn-hero__media > picture) > img { animation: none; }
/* The slow zoom (home-hero.js) grows toward the subject on the right. */
.mn-hero__layer :is(.mn-hero__img, .mn-hero-studio, .mn-hero-draw) { transform-origin: 70% 50%; }

/* Phones: the later slides' photos (brighter than the first at the bottom of their band) fade to the stage a little
   sooner, so the eyebrow at the band's foot keeps 4.5:1. */
@media (max-width: 781px) {
	.mn-hero__layer:not(:first-child) .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) 200px, rgba(var(--wp--custom--ink-rgb), 0.9) 296px, var(--wp--preset--color--ink-0) 400px); }
}

/* Focal points on wide screens (phones share the hero's 76% 50%, below). */
/* Wide screens: each slide's photo sits in the right two-thirds of the stage and fades into it on the left, so the
   whole truck shows instead of a close crop (Avi, 5 Oct 2026: "the truck should look smaller"). The hero, the copy
   and the controls keep their size and place; only the photo box narrows. */
@media (min-width: 1224px) {
	.mn-hero__layer .mn-hero__media.mn-photo--hero {
		inset-inline-start: auto;
		inline-size: 66%;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 18%, #000 40%);
		mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 18%, #000 40%);
	}
	/* The display line's last word runs onto the photo: the scrim holds it at 7.5:1 or better from 1224 px (glyph pixels). */
	.mn-hero__layer .mn-hero__media.mn-photo--hero .mn-scrim--hero {
		--mn-scrim:
			linear-gradient(90deg, rgba(var(--wp--custom--ink-rgb), 0.8) 0%, rgba(var(--wp--custom--ink-rgb), 0.55) 25%, rgba(var(--wp--custom--ink-rgb), 0.2) 42%, rgba(var(--wp--custom--ink-rgb), 0) 58%),
			linear-gradient(180deg, rgba(var(--wp--custom--ink-rgb), 0.5) 0%, rgba(var(--wp--custom--ink-rgb), 0) 22%, rgba(var(--wp--custom--ink-rgb), 0) 70%, rgba(var(--wp--custom--ink-rgb), 0.75) 100%);
	}
}
.mn-hero__media--chassis { --mn-photo-pos: 50% 22%; }
.mn-hero__media--financing { --mn-photo-pos: 50% 64%; }
.mn-hero__media--yard { --mn-photo-pos: 50% 60%; }

/* Where a slide's drawing or studio stands: right of the copy column from 1224 px, clear of the header above and of
   the "Visit the yard" pill below; on tablets the studio takes the top right, beside the short heading; on phones,
   the band above the copy. The copy keeps the dark stage at every width. */
.mn-hero-draw,
.mn-hero-studio__set {
	position: absolute;
	inset-block: calc(var(--mn-header-h) + 8px) 112px;
	inset-inline: calc(var(--mn-edge) + 46rem) 0;
}
.mn-hero-studio__set { inset-block-end: 176px; inset-inline-start: calc(var(--mn-edge) + 36rem); }
@media (min-width: 782px) and (max-width: 1223px) {
	.mn-hero-studio__set { inset-block: var(--mn-header-h) 46%; inset-inline: 44% 0; }
}
@media (max-width: 781px) {
	.mn-hero-draw,
	.mn-hero-studio__set { inset-block: 0 auto; inset-inline: 0; block-size: 300px; }
}

/* Slide 2's drawn stage (09 §8): a 40 ft container on a tridem chassis in cyan and white line on the graphite
   stage, a cyan glow under it and a drafting grid behind. Wide screens only while the hero_chassis photo is too
   small to fill them (.mn-hero__media--wide-only); the photo takes phones (.mn-hero__media--phone-only). */
.mn-hero__media--drawing { position: absolute; inset: 0; overflow: clip; background: var(--wp--preset--gradient--stage); }
.mn-hero-draw { display: grid; place-items: center; }
.mn-hero-draw__grid,
.mn-hero-draw__glow { position: absolute; inset: 0; pointer-events: none; }
.mn-hero-draw__grid {
	background-image: linear-gradient(var(--mn-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--mn-grid-line) 1px, transparent 1px);
	background-position: center;
	background-size: var(--wp--custom--grid--plate) var(--wp--custom--grid--plate);
	-webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}
.mn-hero-draw__glow {
	inset: 18% 4% 4%;
	background: radial-gradient(closest-side, rgba(var(--wp--custom--cyan-rgb), 0.26), rgba(var(--wp--custom--cyan-rgb), 0.08) 55%, transparent);
	filter: blur(12px);
}
.mn-hd { position: relative; inline-size: min(100%, 60rem); block-size: auto; max-block-size: 100%; overflow: visible; }
.mn-hd__draw { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mn-hd__box { stroke: var(--wp--preset--color--cyan-300); stroke-width: 2.6; }
.mn-hd__trim { stroke: var(--wp--preset--color--cyan-300); stroke-width: 1.6; opacity: 0.55; }
.mn-hd__ribs { stroke: var(--wp--preset--color--cyan-300); stroke-width: 1.6; opacity: 0.3; }
.mn-hd__cast { fill: rgba(var(--wp--custom--cyan-rgb), 0.12); stroke: var(--wp--preset--color--cyan-300); stroke-width: 1.6; }
.mn-hd__frame { stroke: var(--wp--preset--color--on-dark); stroke-width: 2.6; }
.mn-hd__tyre { fill: var(--wp--preset--color--ink-0); stroke: var(--wp--preset--color--on-dark); stroke-width: 2.6; }
.mn-hd__wall { stroke: var(--wp--preset--color--on-dark-3); stroke-width: 1.6; }
.mn-hd__rim { fill: none; stroke: var(--wp--preset--color--on-dark-2); stroke-width: 2.2; }
.mn-hd__hub { fill: var(--wp--preset--color--on-dark-2); }
.mn-hd__lock { fill: var(--wp--preset--color--cyan); }
.mn-hd__light { fill: var(--wp--preset--color--led-amber); }
.mn-hd__dim,
.mn-hd__ground { stroke: var(--wp--preset--color--on-dark-3); stroke-width: 1.6; }
.mn-hd__size { fill: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--display); font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.mn-hd__tick { fill: var(--wp--preset--color--on-dark-2); font-family: var(--wp--preset--font-family--body); font-size: 14px; font-weight: 600; }
/* The slot's photo (a phone shot) holds up to tablet widths; the drawing takes over from 1224 px. */
@media (min-width: 1224px) {
	.mn-hero__media--phone-only { display: none; }
}
@media (max-width: 1223px) {
	.mn-hero__media--wide-only { display: none; }
}
@media (min-width: 782px) and (max-width: 1223px) {
	.mn-hero-draw { inset-block: var(--mn-header-h) 46%; inset-inline: 46% 0; }
}
@media (max-width: 781px) {
	.mn-hero-draw { padding: calc(var(--mn-header-h) + 12px) var(--mn-gutter) 24px; box-sizing: border-box; }
	/* Thin lines would vanish at phone size: the same strokes, a step heavier. */
	.mn-hd__draw,
	.mn-hd__tyre { stroke-width: 3.6; }
	.mn-hd__ribs { stroke-width: 2.4; }
}
/* The drawing draws itself in when its slide comes up after a change (not on arrival), then the labels and lights. */
@media (prefers-reduced-motion: no-preference) {
	.mn-hero.has-moved .mn-hero__layer.is-current .mn-hd__draw {
		stroke-dasharray: 1;
		animation: mn-hd-draw var(--wp--custom--motion--settle) var(--wp--custom--motion--ease-out) both;
	}
	.mn-hero.has-moved .mn-hero__layer.is-current :is(.mn-hd__size, .mn-hd__tick, .mn-hd__lock, .mn-hd__light, .mn-hd__cast, .mn-hd__tyre, .mn-hd__rim, .mn-hd__hub) {
		animation: mn-hero-in var(--wp--custom--motion--panel) var(--wp--custom--motion--ease) calc(var(--wp--custom--motion--settle) * 0.55) backwards;
	}
}
@keyframes mn-hd-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Slide 3's studio: a light set (a cyclorama: the wall brightening into the cove, then the floor), lit on the right
   of the dark stage and falling off into it like a lit set in a dark studio. The render's white ground is multiplied
   onto the set, so its own soft shadow lands on the floor; a contact shadow grounds the wheels. */
.mn-hero__media--studio { position: absolute; inset: 0; overflow: clip; background: var(--wp--preset--color--ink-0); }
.mn-hero-studio { position: absolute; inset: 0; }
.mn-hero-studio__set {
	isolation: isolate;
	background:
		radial-gradient(44% 26% at 54% 76%, var(--wp--preset--color--white), transparent),
		radial-gradient(60% 50% at 56% 30%, color-mix(in srgb, var(--wp--preset--color--white) 55%, transparent), transparent 75%),
		linear-gradient(180deg, var(--wp--preset--color--line-strong) 0%, var(--wp--preset--color--paper-2) 40%, var(--wp--preset--color--paper) 56%, var(--wp--preset--color--white) 62%, var(--wp--preset--color--paper) 70%, var(--wp--preset--color--paper-2) 88%, var(--wp--preset--color--line) 100%);
	-webkit-mask-image: radial-gradient(115% 95% at 68% 62%, #000 42%, rgba(0, 0, 0, 0.5) 66%, transparent 86%), linear-gradient(90deg, transparent 0, #000 42%), linear-gradient(180deg, transparent 0, #000 18%, #000 78%, transparent 100%);
	-webkit-mask-composite: source-in, source-in;
	mask-image: radial-gradient(115% 95% at 68% 62%, #000 42%, rgba(0, 0, 0, 0.5) 66%, transparent 86%), linear-gradient(90deg, transparent 0, #000 42%), linear-gradient(180deg, transparent 0, #000 18%, #000 78%, transparent 100%);
	mask-composite: intersect, intersect;
}
.mn-hero-studio__product { position: absolute; inset-inline: 18% 6%; inset-block-end: 17%; }
.mn-hero-studio__img { display: block; inline-size: 100%; block-size: auto; mix-blend-mode: multiply; filter: contrast(1.04); }
.mn-hero-studio__shadow {
	position: absolute;
	inset-inline: 22% 12%;
	inset-block-end: 3%;
	block-size: 14%;
	background: radial-gradient(closest-side, rgba(var(--wp--custom--ink-rgb), 0.3), rgba(var(--wp--custom--ink-rgb), 0.08) 60%, transparent);
	mix-blend-mode: multiply;
}
@media (min-width: 782px) and (max-width: 1223px) {
	.mn-hero-studio__product { inset-inline: 16% 6%; inset-block-end: 16%; }
}
@media (max-width: 781px) {
	.mn-hero-studio__set {
		-webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.6) 20%, #000 36%, #000 72%, transparent 100%);
		mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.6) 20%, #000 36%, #000 72%, transparent 100%);
	}
	/* The band is 300 px tall: the render keeps to a width whose height fits it, centred. */
	.mn-hero-studio__product { inset-inline: 0; inset-block-end: 22%; inline-size: min(88%, 25rem); margin-inline: auto; }
}

/* The copy: the slides share one grid cell; each fills it from the top, the actions on its bottom edge. */
.mn-hero--carousel .mn-hero__copy { container-type: inline-size; }
.mn-hero__slides { display: grid; grid-template-columns: minmax(0, 1fr); }
.mn-slide {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	transition: opacity var(--wp--custom--motion--ui) var(--wp--custom--motion--ease-out) var(--wp--custom--motion--micro), visibility 0s;
}
:where(.mn-slide > *) { margin: 0; }
.mn-slide > .mn-hero__title { margin-block-start: 22px; }
.mn-slide > .mn-hero__sub { margin-block-start: 26px; }
.mn-slide > .mn-hero__lede { margin-block-start: 6px; }
.mn-slide > .mn-hero__actions { margin-block-start: auto; padding-block-start: 34px; }
/* Without JavaScript a picker link jumps to its slide (#mn-slide-2): the margin clamps that jump at the top of the
   page, so the hero stays where it is instead of scrolling the slide's eyebrow up under the header. */
.mn-slide { scroll-margin-block-start: 100vh; }
.mn-slide:not(.is-current) {
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--wp--custom--motion--micro) var(--wp--custom--motion--ease-in), visibility 0s linear var(--wp--custom--motion--micro);
}
/* The incoming copy rises half the hero's travel, staggered; the outgoing copy only fades, and drops once hidden. */
.mn-slide > * { transition: transform var(--wp--custom--motion--panel) var(--wp--custom--motion--ease-out) calc(var(--wp--custom--motion--micro) + var(--mn-n, 0) * var(--wp--custom--motion--stagger)); }
.mn-slide > :nth-child(2) { --mn-n: 1; }
.mn-slide > :nth-child(3) { --mn-n: 2; }
.mn-slide > :nth-child(n + 4) { --mn-n: 3; }
.mn-slide:not(.is-current) > * { transform: translateY(calc(var(--wp--custom--motion--rise) / 2)); transition: transform 0s linear var(--wp--custom--motion--micro); }
@media (max-width: 781px) {
	.mn-slide > .mn-hero__title { margin-block-start: 18px; }
	.mn-slide > .mn-hero__sub { margin-block-start: 18px; }
	.mn-slide > .mn-hero__actions { padding-block-start: 26px; }
}

/* The control bar: glass squares for the rotation control, Previous and Next; the slide picker as thin progress tabs
   with their number and name (Inter 500, `micro`) and a cyan fill. Every target is at least 44 × 44 px at every
   width: phones show the numbers (the names stay in each button's accessible name, "01 Trucks"), and below 360 px
   Previous and Next step aside (the numbered pickers do their job). */
.mn-hero__dock { position: absolute; inset-inline: 0; inset-block-end: var(--mn-dock-bottom); z-index: var(--mn-z-over); }
.mn-hero__controls { display: flex; align-items: center; gap: 6px; inline-size: fit-content; max-inline-size: 100%; }
.mn-hero__ctl {
	box-sizing: border-box;
	display: inline-grid;
	flex: none;
	place-items: center;
	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);
	cursor: pointer;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	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);
}
.mn-hero__ctl .mn-icon { inline-size: 18px; block-size: 18px; }
.mn-hero__ctl--rotate .mn-icon { inline-size: 16px; block-size: 16px; }
.mn-hero__ctl:hover { border-color: var(--mn-quiet-border-hover); background: var(--mn-quiet-bg-hover); }
.mn-hero__ctl-play,
.mn-hero__ctl--rotate.is-stopped .mn-hero__ctl-pause { display: none; }
.mn-hero__ctl--rotate.is-stopped .mn-hero__ctl-play { display: block; }
.mn-hero__ctl--rotate + .mn-hero__ctl { margin-inline-start: 6px; }

.mn-hero__tabs { display: flex; flex: 0 1 auto; gap: 4px; min-inline-size: 0; margin-inline-start: 12px; }
.mn-hero__tab {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex: none;
	align-items: center;
	gap: 7px;
	min-inline-size: var(--wp--custom--target--min);
	block-size: var(--wp--custom--target--min);
	padding: 0 4px 6px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--on-dark-2);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--custom--font-size--micro);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-hero__tab-num { color: var(--wp--preset--color--on-dark-2); font-weight: 600; font-variant-numeric: tabular-nums; transition: color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease); }
.mn-hero__tab-bar {
	position: absolute;
	inset-inline: 4px;
	inset-block-end: 9px;
	block-size: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--mn-rule-2);
	transition: background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-hero__tab-fill {
	display: block;
	block-size: 100%;
	background: var(--wp--preset--color--cyan);
	transform: scaleX(0);
	transform-origin: left;
}
.mn-hero__tab:hover { color: var(--wp--preset--color--white); }
.mn-hero__tab:hover .mn-hero__tab-bar { background: var(--mn-rule-3); }
.mn-hero__tab.is-current { color: var(--wp--preset--color--white); cursor: default; }
.mn-hero__tab.is-current .mn-hero__tab-num { color: var(--wp--preset--color--cyan-300); }
.mn-hero__tab.is-current .mn-hero__tab-fill { transform: scaleX(1); }
.mn-hero__tab:focus-visible { outline-offset: 0; border-radius: var(--wp--custom--radius--xs); }

/* Phones: the numbers alone, the four pickers sharing the row's free width (each at least 44 px). */
@media (max-width: 599px) {
	.mn-hero__controls { gap: 4px; }
	.mn-hero__ctl--rotate + .mn-hero__ctl { margin-inline-start: 4px; }
	.mn-hero__tabs { flex: 1 1 auto; gap: 0; margin-inline-start: 8px; }
	.mn-hero__tab { flex: 1 0 var(--wp--custom--target--min); justify-content: center; }
	.mn-hero__tab-label {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}
@media (max-width: 359px) {
	.mn-hero__ctl--step { display: none; }
}
@media (min-width: 782px) {
	.mn-hero--carousel { --mn-dock-bottom: 18px; --mn-dock-gap: 24px; }
}
@media (min-width: 1224px) {
	/* The dock's row comes out of the space above the copy, so the hero still fills a 1440 × 900 screen. */
	.mn-hero--carousel .mn-hero__body { padding-block-start: calc(var(--mn-header-h) + clamp(28px, 3.5vh, 64px)); }
}
/* Without JavaScript: the rotation control and Previous/Next do nothing, so they stay out (the picker links work). */
@media (scripting: none) {
	.mn-hero__ctl { display: none; }
	.mn-hero__tabs { margin-inline-start: -4px; }
}
/* Without JavaScript: the picker links show their slide (:target), its layer and its tab. */
@supports selector(:has(*)) {
	.mn-hero:not(.is-enhanced):has(.mn-slide:not(.is-current):target) :is(.mn-slide, .mn-hero__layer).is-current { visibility: hidden; opacity: 0; }
	.mn-hero:not(.is-enhanced):has(.mn-slide:not(.is-current):target) .mn-hero__tab.is-current { color: var(--wp--preset--color--on-dark-2); }
	.mn-hero:not(.is-enhanced):has(.mn-slide:not(.is-current):target) .mn-hero__tab.is-current .mn-hero__tab-num { color: var(--wp--preset--color--on-dark-2); }
	.mn-hero:not(.is-enhanced):has(.mn-slide:not(.is-current):target) .mn-hero__tab.is-current .mn-hero__tab-fill { transform: scaleX(0); }
	.mn-hero:not(.is-enhanced) .mn-slide:target { visibility: visible; opacity: 1; }
	.mn-hero:not(.is-enhanced) .mn-slide:target > * { transform: none; }
	.mn-hero:not(.is-enhanced):has(.mn-slide:nth-child(2):target) .mn-hero__layer:nth-child(2),
	.mn-hero:not(.is-enhanced):has(.mn-slide:nth-child(3):target) .mn-hero__layer:nth-child(3),
	.mn-hero:not(.is-enhanced):has(.mn-slide:nth-child(4):target) .mn-hero__layer:nth-child(4) { display: block; z-index: var(--mn-z-raised); visibility: visible; }
	.mn-hero:not(.is-enhanced):has(.mn-slide:nth-child(2):target) .mn-hero__tab:nth-child(2),
	.mn-hero:not(.is-enhanced):has(.mn-slide:nth-child(3):target) .mn-hero__tab:nth-child(3),
	.mn-hero:not(.is-enhanced):has(.mn-slide:nth-child(4):target) .mn-hero__tab:nth-child(4) { color: var(--wp--preset--color--white); }
	.mn-hero:not(.is-enhanced):has(.mn-slide:nth-child(2):target) .mn-hero__tab:nth-child(2) .mn-hero__tab-num,
	.mn-hero:not(.is-enhanced):has(.mn-slide:nth-child(3):target) .mn-hero__tab:nth-child(3) .mn-hero__tab-num,
	.mn-hero:not(.is-enhanced):has(.mn-slide:nth-child(4):target) .mn-hero__tab:nth-child(4) .mn-hero__tab-num { color: var(--wp--preset--color--cyan-300); }
	.mn-hero:not(.is-enhanced):has(.mn-slide:nth-child(2):target) .mn-hero__tab:nth-child(2) .mn-hero__tab-fill,
	.mn-hero:not(.is-enhanced):has(.mn-slide:nth-child(3):target) .mn-hero__tab:nth-child(3) .mn-hero__tab-fill,
	.mn-hero:not(.is-enhanced):has(.mn-slide:nth-child(4):target) .mn-hero__tab:nth-child(4) .mn-hero__tab-fill { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.mn-hero__layer.is-current { animation: none; }
}