/* GetnDrive Dynamic Hero 0.1.6
   Two CSS roots:
   1. `.sch-platform-hero--redesign.gnd-dynamic-hero-active` — successful hero transform only
   2. `.gnd-home-categories` — category block after Popular Destinations

   Cascade note (0.1.1 repair): the Visual Rebrand owns the hero composition with
   `body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign …`
   rules, several of them `!important` — specificity (0,4,1). A marker-only selector is
   (0,3,0) and loses even with `!important`, which is why 0.1.0's width/alignment
   declarations were inert. Contested declarations are therefore repeated in the
   "COMPOSITION" block below on the SAME owner chain plus the transform marker,
   specificity (0,5,1). The marker is still mandatory in every selector: nothing applies
   without a successful transform. `!important` is used only on properties the Rebrand
   itself states with `!important`, or where the Rebrand states the same property more
   than once at the same specificity and file order would otherwise decide the result.

   COMPOSITION contract (0.1.5) — the repair this version exists for:

   The Rebrand states the hero's inner container SIX times across three bands, and the
   later statements disagree with the earlier ones (a 5/7 `display: grid` at one place,
   a centred `display: flex` column at another). Whichever won, the hero's own children
   were placed explicitly and every child the Hero injected was left to auto-placement —
   so the Search rail could be pushed out of the bottom row, and the H1 shared a row with
   an injected block. 0.1.5 stops depending on that: the Hero declares its OWN grid, on
   the owner chain plus the marker, and gives EVERY in-flow child an explicit
   `grid-row` / `grid-column`. The transform now injects exactly one in-flow child
   (`.gnd-hero-chips`), so the desktop order is stated, not inferred:

       row 1  .sch-platform-hero__copy   (column 1; the photo keeps column 2)
       row 2  .gnd-hero-chips            (full width, directly above the rail)
       row 3  .gnd-search-shell / .sch-platform-hero__search   (full width, lower seam)

   `.gnd-hero-cards` and `.gnd-hero-assurance` are gone from the RENDERER, not hidden
   here; the transform verifies both are absent. `.gnd-hero-stage` is `position: absolute`
   and is a child of the hero root, not of the inner container, so it is not a grid item.

   The `.sch-platform-hero__search` SUBTREE, the rail's own box, its width tokens and the
   sticky rail geometry stay Rebrand-owned. Two narrow exceptions, both required by the
   composition and both stated once: the shell/search wrapper is given an explicit grid
   placement (it is a grid ITEM of a grid this file declares), and the RESTING rail's
   background-colour is pinned opaque white, because the rail now sits over photography
   at the lower hero seam.
*/

/* ---------------------------------------------------------------- base layer */

.sch-platform-hero--redesign.gnd-dynamic-hero-active {
	position: relative;
	isolation: isolate;
	z-index: 30;
	overflow: visible;
	color: #12262c;

	/* Desktop/tablet: the caption + control group sits at the UPPER right of the
	   scene, so the whole lower band belongs to the Search rail and no reserved
	   strip is needed. Mobile keeps a bottom control group and therefore keeps a
	   measured reserve — see the ≤767 band. */
	--gnd-hero-bar-reserve: 0px;
	--gnd-hero-bar-inset: 16px;

	/* Controlled desktop hero height, independent of viewport height. */
	--gnd-hero-height: 660px;
}

.sch-platform-hero--redesign.gnd-dynamic-hero-active > .wp-block-group__inner-container {
	position: relative;
	z-index: 1;
	text-align: left;
}

.sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-hero__copy {
	text-align: left;
	text-wrap: pretty;
}

.sch-platform-hero--redesign.gnd-dynamic-hero-active h1 {
	text-align: left;
	text-wrap: balance;
	color: #102228;
}

.sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-lead {
	color: #243a40;
}

/* Trust concepts read as a restrained inline row: no pill, no card, no panel.
   The `✓` mark is the Home Platform owner's own `::before` content and is left
   exactly as it is; only the pill treatment around it is removed. */
.sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	justify-content: flex-start;
}

.sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-trust span {
	display: inline-flex;
	align-items: baseline;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
	color: #22383e;
	white-space: nowrap;
}

/* ------------------------------------------------------------------- stage */

/* The stage deliberately keeps `z-index: auto` so it does NOT create a stacking
   context. Its two layers then compete directly with the inner container
   (z-index 1): scenes below the copy, controls above it. With a stacking
   context on the stage the bar's own z-index could never beat the inner
   container and every scene control was unclickable — measured by hit testing,
   not by reading the selector. */
.gnd-hero-stage {
	position: absolute;
	inset: 0;
	z-index: auto;
	pointer-events: none;
}

.gnd-hero-scenes {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.gnd-hero-scene {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 1.6s ease;
}

.gnd-hero-scene.is-active {
	opacity: 1;
}

.gnd-hero-stage.is-instant .gnd-hero-scene,
.gnd-hero-stage.is-instant .gnd-hero-scene img {
	transition: none;
	animation: none;
}

.gnd-hero-scene picture,
.gnd-hero-scene img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Per-scene focal point, published by the server figure and by the controller
   for scenes it creates. */
.gnd-hero-scene img {
	object-position: var(--gnd-hero-focal-d, 62% 50%);
}

.gnd-hero-scenes__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(250, 253, 253, 0.92) 0%, rgba(250, 253, 253, 0.62) 42%, rgba(250, 253, 253, 0.12) 72%, rgba(250, 253, 253, 0) 100%);
	pointer-events: none;
}

/* ------------------------------------------------- caption / control group */

/* Two stacked parts — a caption and ONE control row — never a wrapping strip.
   Default (mobile) is a compact group at the lower left, above the reserved
   band; ≥768 moves it to the upper right. See the bands below. */
.gnd-hero-bar {
	position: absolute;
	right: clamp(16px, 4vw, 40px);
	bottom: var(--gnd-hero-bar-inset, 16px);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	max-width: min(420px, calc(100% - 32px));
	text-align: right;
	pointer-events: auto;
}

.gnd-hero-bar__controls {
	display: flex;
	align-items: center;
	gap: 6px;
}

.gnd-hero-rotate,
.gnd-hero-prev,
.gnd-hero-next {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	min-width: 36px;
	height: 36px;
	min-height: 36px;
	padding: 0;
	border: 1px solid rgba(16, 34, 40, 0.16);
	background: rgba(255, 255, 255, 0.9);
	color: #102228;
	border-radius: 999px;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

/* The rotation control is a glyph, not a wide "Start rotation" pill. Its TEXT is
   its accessible name and the controller's own state value, so the text is kept
   in the DOM and clipped out of the box rather than replaced: `content` on the
   pseudo-element is empty, so nothing is added to the accessible name. The glyph
   follows `data-gnd-hero-rotate-state`, which the renderer emits and the
   controller keeps in step with the label. */
.gnd-hero-rotate {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-indent: -400px;
	color: transparent;
}

.gnd-hero-rotate::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 12px;
	border-left: 3px solid #102228;
	border-right: 3px solid #102228;
	transform: translate(-50%, -50%);
}

.gnd-hero-rotate[data-gnd-hero-rotate-state="play"]::before {
	width: 0;
	height: 0;
	border-left: 10px solid #102228;
	border-right: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	transform: translate(-40%, -50%);
}

.gnd-hero-dots {
	display: flex;
	align-items: center;
	gap: 0;
}

/* 44px hit area, 8px visual mark. The dot row is made quiet by shrinking the
   MARK, never the target: the visual weight a reader sees is the mark, while
   the 44px target is invisible padding. Trading the target away would have
   bought nothing visually and cost a measured accessibility property. */
.gnd-hero-dot {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* The marks sit directly on photography, so they carry a real contrast pair
   rather than a translucent tint: measured against the brightest scene sky. */
.gnd-hero-dot__mark {
	display: block;
	width: 8px;
	height: 8px;
	border: 1px solid rgba(16, 34, 40, 0.55);
	background: rgba(255, 255, 255, 0.95);
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.gnd-hero-dot[aria-current="true"] .gnd-hero-dot__mark {
	background: #0f6b63;
	border-color: #0f6b63;
}

.gnd-hero-rotate:focus-visible,
.gnd-hero-prev:focus-visible,
.gnd-hero-next:focus-visible,
.gnd-hero-dot:focus-visible,
.gnd-hero-chip:focus-visible {
	outline: 2px solid #0f6b63;
	outline-offset: 3px;
}

.gnd-hero-caption,
.gnd-hero-scope,
.gnd-hero-note {
	margin: 0;
	max-width: 100%;
	font-size: 13px;
	line-height: 1.4;
	color: #102228;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* The caption reads over photography, so it carries its own small plate rather
   than relying on a text shadow alone. A label plate, not a card: no elevation,
   no border, no rounded panel geometry. */
/* The place name leads the group visually while staying second in the DOM, so
   the documented control order is untouched. It reads over photography, so it
   carries its own small plate rather than relying on a text shadow alone — a
   label plate, not a card: no elevation, no border, no panel geometry. */
.gnd-hero-caption {
	order: -1;
	padding: 3px 9px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.82);
	font-weight: 600;
	text-shadow: none;
}

.gnd-hero-scope,
.gnd-hero-note {
	padding: 3px 9px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.82);
	text-shadow: none;
}

.gnd-hero-announce {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------- destination selector */

.gnd-hero-chips {
	display: flex;
	justify-content: flex-start;
	gap: 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0 0 2px;
	margin: 0;
}

.gnd-hero-chip {
	appearance: none;
	flex: 0 0 auto;
	scroll-snap-align: start;
	min-width: 0;
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid rgba(16, 34, 40, 0.16);
	background: rgba(255, 255, 255, 0.92);
	color: #102228;
	border-radius: 999px;
	font: inherit;
	white-space: nowrap;
	cursor: pointer;
}

.gnd-hero-chip.is-current {
	background: #102228;
	color: #fff;
	border-color: #102228;
}

/* `0.1.8` — city chips are links to the clean regional landing route. Same pill
   as the button chips in every link state, on the owner chain so theme `a`,
   `a:visited` and `a:hover` rules cannot recolour or underline them. A city link
   is never a carousel control, so it never shows the current-scene state. */
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active a.gnd-hero-chip,
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active a.gnd-hero-chip:link,
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active a.gnd-hero-chip:visited,
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active a.gnd-hero-chip:hover,
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active a.gnd-hero-chip:focus-visible,
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active a.gnd-hero-chip.is-current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-color: rgba(16, 34, 40, 0.16);
	background: rgba(255, 255, 255, 0.92);
	color: #102228;
	text-decoration: none;
	opacity: 1;
	cursor: pointer;
}

/* The chip row scrolls (`overflow-x: auto`), which clips anything drawn outside
   a chip, so the shared 3px-offset ring never shows. A link is a keyboard stop
   that must show focus: its ring is drawn inside the pill instead. */
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active a.gnd-hero-chip:focus-visible {
	outline: 2px solid #0f6b63;
	outline-offset: -4px;
}

.gnd-hero-chip[aria-disabled="true"],
.gnd-hero-prev[aria-disabled="true"],
.gnd-hero-next[aria-disabled="true"],
.gnd-hero-dot[aria-disabled="true"],
.gnd-hero-rotate[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ==================================================================
   COMPOSITION — same owner chain as the Rebrand plus the transform
   marker, so the stated composition actually applies. Every in-flow
   child of the hero's inner container is placed explicitly; nothing
   the Hero injects is left to grid auto-placement.
   ================================================================== */

body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active > .wp-block-group__inner-container {
	align-items: stretch !important;
	text-align: left;
	padding-bottom: calc(var(--gnd-hero-bar-reserve) + var(--gnd-hero-bar-inset)) !important;
}

/* The Rebrand centres the copy column with `align-self: center !important` at
   >=1025. Left alignment needs the same weight on the same property, or the
   text is only left-aligned INSIDE a still-centred box. */
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-hero__copy {
	align-self: stretch !important;
	max-width: 620px;
	margin-inline: 0;
	text-align: left;
}

body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-trust {
	display: flex !important;
	justify-content: flex-start;
	max-width: none;
	gap: 6px 22px;
}

body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-trust span {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 13.5px;
	font-weight: 600;
}

/* The `✓` is the Home Platform owner's own `::before` content, coloured
   `#dbeafe` there for a DARK hero. On the light hero, over photography, that is
   a mark you cannot see: measured against the scene it is the reason two of the
   four concepts read as bullet-less text. Only the colour changes. */
.sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-trust span::before,
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-trust span::before {
	color: #0f6b63;
}

body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active h1 {
	max-width: 620px;
	margin-inline: 0;
	text-align: left;
}

body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-kicker,
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-lead,
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-trust {
	margin-inline: 0;
	text-align: left;
}

body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-lead {
	max-width: 56ch;
}

body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .gnd-hero-chips {
	align-self: stretch !important;
	margin-inline: 0;
	text-align: left;
}

/* The hero's own paragraphs inherit the theme's 17px/32px body-paragraph rules,
   which the marker-only selector could not beat. Measured effect before this
   block: every status line cost 69px instead of 29px and the scene bar needed a
   234px reserved band on mobile. */
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .gnd-hero-caption,
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .gnd-hero-scope,
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .gnd-hero-note {
	margin: 0;
	font-size: 13px;
	line-height: 1.35;
}

body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .gnd-hero-chip,
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .gnd-hero-rotate,
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .gnd-hero-prev,
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .gnd-hero-next {
	font-size: 13.5px;
	line-height: 1.2;
}

/* The rail now sits on the lower hero seam, over photography. Opaque, always. */
body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-hero__search .sch-home-search:not(.is-stuck) {
	background-color: #ffffff;
}

/* ------------------------------------------------------------ breakpoints */

/* ---- >=768: explicit grid; caption/controls at the upper right ---- */
@media (min-width: 768px) {
	body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active > .wp-block-group__inner-container {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto auto;
		row-gap: clamp(14px, 1.8vw, 22px);
		align-items: stretch !important;
		/* The rail IS the lower seam: no reserved band, no bottom padding. */
		padding-bottom: 0 !important;
	}

	/* 1 — hero copy */
	body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-hero__copy {
		grid-column: 1 !important;
		grid-row: 1 !important;
		align-self: center !important;
		justify-self: start;
	}

	/* 2 — destination selector, directly above the rail */
	body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .gnd-hero-chips {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		align-self: end !important;
	}

	/* 3 — Search rail, anchored on the lower hero seam. The grid ITEM is the
	   owner's `.gnd-search-shell` once its script has wrapped the rail, and the
	   untouched `.sch-platform-hero__search` before that; both are placed, so
	   the composition is identical with and without the owner's script. */
	body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .gnd-search-shell,
	body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-hero__search {
		grid-column: 1 / -1 !important;
		grid-row: 3 !important;
		align-self: end !important;
		margin-bottom: 0 !important;
	}

	.sch-platform-hero--redesign.gnd-dynamic-hero-active .gnd-hero-bar {
		top: var(--gnd-hero-bar-inset);
		bottom: auto;
	}
}

/* ---- 768-1024: one column, so the copy starts BELOW the control group ---- */
@media (min-width: 768px) and (max-width: 1024px) {
	/* At this band the copy is full width, so an upper-right group would sit on
	   the H1. The band above the copy is the group's own: inset + caption line +
	   gap + one 36px control row, stated as a value rather than discovered by
	   nudging the copy. The Rebrand states this padding with `!important`, so
	   the override has to as well. */
	body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active > .wp-block-group__inner-container {
		padding-top: calc(var(--gnd-hero-bar-inset) * 2 + 84px) !important;
	}
}

/* ---- >=1025: two columns — copy left, destination imagery right ---- */
@media (min-width: 1025px) {
	/* Controlled height, stated once and independent of the viewport. The
	   Rebrand states the hero's `min-height` three times (760px, 660px, 560px)
	   and two of the three are viewport-relative. */
	body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active {
		min-height: var(--gnd-hero-height) !important;
		padding-bottom: 0 !important;
	}

	body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		column-gap: clamp(32px, 4.2vw, 58px);
		min-height: inherit;
		padding-top: clamp(28px, 3.4vw, 48px) !important;
	}

	.gnd-hero-stage:not(.is-instant) .gnd-hero-scene.is-active img {
		animation: gnd-hero-kenburns 9s ease-out forwards;
		transform-origin: var(--gnd-hero-focal-d, 62% 50%);
	}
}

@media (max-width: 767px) {
	.sch-platform-hero--redesign.gnd-dynamic-hero-active {
		/* Mobile keeps the control group at the bottom: the whole width is one
		   column, so an upper-right group would sit on the eyebrow and the H1.
		   The reserve is one 36px control row plus the caption line plus the
		   inset — measured, not guessed. Prev/Next stay available as glyphs and
		   the dot row is dropped, which is what makes the band this small. */
		--gnd-hero-bar-reserve: 76px;
		--gnd-hero-bar-inset: 12px;
	}

	body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active {
		padding-top: 0 !important;
	}

	body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-hero__copy,
	body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active h1,
	body.getndrive-visual-rebrand .sch-platform-home--redesign .sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-lead {
		text-align: left;
	}

	.gnd-hero-scenes__scrim {
		background: linear-gradient(180deg, rgba(250, 253, 253, 0.88) 0%, rgba(250, 253, 253, 0.55) 38%, rgba(250, 253, 253, 0.2) 100%);
	}

	.gnd-hero-scene img {
		object-position: var(--gnd-hero-focal-m, 50% 45%);
	}

	.sch-platform-hero--redesign.gnd-dynamic-hero-active .gnd-hero-bar {
		right: 16px;
		left: 16px;
		align-items: flex-start;
		max-width: none;
		text-align: left;
	}

	/* Five 44px dot targets plus three control glyphs do not fit beside the
	   caption at 375px. Prev/Next reach every scene, so the dot row is the part
	   that goes. */
	.sch-platform-hero--redesign.gnd-dynamic-hero-active .gnd-hero-dots {
		display: none;
	}

	.sch-platform-hero--redesign.gnd-dynamic-hero-active .sch-platform-trust span:nth-child(n + 3) {
		display: none;
	}
}

@keyframes gnd-hero-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
	.gnd-hero-scene,
	.gnd-hero-scene img {
		animation: none !important;
		transition: none !important;
	}
}

/* ------------------------------------------------------- category block */

/* `0.1.6`: each tile is a HORIZONTAL row — a fixed thumbnail on the inline
   start, the name and lead stacked beside it — instead of a full-bleed photo
   card. Two 16/10 photos at container width cost roughly 340px of image each;
   the row form lands the tile in a 112-140px band and makes Categories a
   navigational strip again rather than the tallest band on the page. The PHP
   still emits the same tile structure and the same intrinsic width/height
   attributes; the size is constrained here, in CSS, only. */

.gnd-home-categories {
	padding: clamp(24px, 3vw, 40px) 0;
}

.gnd-home-categories__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

/* Three flat children (media, name, lead) and the markup is fixed, so the two
   text lines are stacked beside the thumbnail with named areas rather than an
   extra wrapper element. */
.gnd-home-categories__tile {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"media name"
		"media lead";
	align-content: center;
	column-gap: 16px;
	min-width: 0;
	padding: 12px 20px 12px 12px;
	text-decoration: none;
	color: inherit;
	background: var(--gnd-card, #fff);
	border: 1px solid var(--gnd-line, #d7e1e4);
	border-radius: 16px;
	overflow: hidden;
}

.gnd-home-categories__media {
	grid-area: media;
	display: block;
	align-self: center;
	flex: 0 0 auto;
	width: 148px;
	border-radius: 10px;
	overflow: hidden;
}

.gnd-home-categories__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.gnd-home-categories__name,
.gnd-home-categories__lead {
	min-width: 0;
	padding: 0;
}

.gnd-home-categories__name {
	grid-area: name;
	align-self: end;
	margin: 0;
	font-size: 20px;
	font-weight: 650;
	line-height: 1.25;
	text-wrap: balance;
}

.gnd-home-categories__lead {
	grid-area: lead;
	align-self: start;
	margin: 4px 0 0;
	color: #3a5158;
	font-size: 15px;
	line-height: 1.4;
	text-wrap: pretty;
}

@media (max-width: 767px) {
	.gnd-home-categories__grid {
		grid-template-columns: 1fr;
	}

	.gnd-home-categories__tile {
		column-gap: 14px;
		padding: 10px 16px 10px 10px;
	}

	.gnd-home-categories__media {
		width: 112px;
	}

	.gnd-home-categories__name {
		font-size: 18px;
	}

	.gnd-home-categories__lead {
		font-size: 14px;
	}
}