/*
 * DMS Hero Scroller
 * Scroll-driven hero: a 3x3 image wall that scales down as you scroll, with the
 * logo settling into the corner, the strapline fading in word by word, and the
 * whole thing dimming out into the next section.
 *
 * Every rule is scoped to .dms-hero-scroller. The reference build this came from
 * used global resets (* { margin: 0 } and img { width: 100% }) which would have
 * wrecked the rest of the site, so none of that is carried over.
 *
 * @package dms-theme
 */

.dms-hero-scroller {
	/* Tunable from the shortcode via inline custom properties. */
	--dhs-pin: 4;                    /* viewport heights of scroll the hero holds for */
	--dhs-gap: 1rem;
	--dhs-bg: #0a0a0a;
	--dhs-fg: #ffffff;
	--dhs-accent: #c9a227;
	--dhs-accent-fg: #0a0a0a;
	--dhs-logo-width: 6rem;
	--dhs-logo-scale: 6;

	position: relative;
	/* Break out of the WPBakery column so the hero is genuinely full-bleed. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	background-color: var(--dhs-bg);
}

/* The scroll track. Its height is what gives the sticky stage something to
   travel through, so the "pin" is pure CSS — no JS pinning, no layout jumps. */
.dms-hero-scroller .dhs-track {
	position: relative;
	height: calc((var(--dhs-pin) + 1) * 100svh);
}

.dms-hero-scroller .dhs-stage {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	background-color: var(--dhs-bg);
}

.dms-hero-scroller .dhs-inner {
	position: relative;
	width: 100%;
	height: 100%;
	will-change: transform;
}

/* --- image wall --------------------------------------------------------- */

.dms-hero-scroller .dhs-gallery {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(300% + (var(--dhs-gap) * 2));
	height: calc(300svh + (var(--dhs-gap) * 2));
	display: flex;
	gap: var(--dhs-gap);
	transform: translate(-50%, -50%) scale(1);
	will-change: transform;
}

.dms-hero-scroller .dhs-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--dhs-gap);
	height: 100%;
}

.dms-hero-scroller .dhs-item {
	position: relative;
	flex: 1;
	overflow: hidden;
}

.dms-hero-scroller .dhs-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.25);
	will-change: transform;
}

/* --- overlay ------------------------------------------------------------ */

.dms-hero-scroller .dhs-overlay {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
	will-change: opacity;
}

/* --- copy --------------------------------------------------------------- */

.dms-hero-scroller .dhs-header {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(45%, 60rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	text-align: center;
	color: var(--dhs-fg);
	z-index: 3;
}

.dms-hero-scroller .dhs-headline {
	margin: 0;
	color: var(--dhs-fg);
	font-size: clamp(1.5rem, 2.5vw, 3.5rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
}

/* One span per word, faded in sequence by the script. */
.dms-hero-scroller .dhs-word {
	display: inline-block;
	opacity: 0;
	will-change: opacity;
}

.dms-hero-scroller .dhs-btn {
	display: inline-block;
	width: max-content;
	padding: 1rem 2rem;
	border-radius: 0.25rem;
	background-color: var(--dhs-accent);
	color: var(--dhs-accent-fg);
	font-weight: 500;
	text-decoration: none;
	opacity: 0;
	will-change: opacity;
	transition: filter 0.2s ease;
}

.dms-hero-scroller .dhs-btn:hover,
.dms-hero-scroller .dhs-btn:focus {
	filter: brightness(1.1);
	color: var(--dhs-accent-fg);
	text-decoration: none;
}

.dms-hero-scroller .dhs-footer {
	position: absolute;
	right: 2rem;
	bottom: 2rem;
	width: 200px;
	color: var(--dhs-fg);
	will-change: transform, filter, opacity;
	z-index: 3;
}

.dms-hero-scroller .dhs-footer p {
	margin: 0;
	font-size: clamp(1.25rem, 2vw, 2.75rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
}

/* --- logo --------------------------------------------------------------- */

.dms-hero-scroller .dhs-logo {
	position: absolute;
	bottom: 2rem;
	left: 2rem;
	width: var(--dhs-logo-width);
	transform-origin: bottom left;
	transform: translateY(0) scale(var(--dhs-logo-scale));
	will-change: transform;
	z-index: 4;
}

.dms-hero-scroller .dhs-logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- smaller screens ---------------------------------------------------- */

@media (max-width: 1000px) {
	.dms-hero-scroller {
		--dhs-logo-scale: 2;
		--dhs-pin: 3;
	}

	.dms-hero-scroller .dhs-header {
		width: 100%;
		padding: 2rem;
	}

	.dms-hero-scroller .dhs-footer {
		right: auto;
		left: 50%;
		bottom: 20svh;
		width: 200px;
		text-align: center;
		transform: translateX(-50%);
	}
}

/* --- no-JS and reduced motion ------------------------------------------ */

/*
 * Without the script the hero must still read as a hero: collapse the track to
 * one viewport, show the copy, and drop the gallery to a static grid.
 */
.dms-hero-scroller.dhs-static .dhs-track {
	height: 100svh;
}

.dms-hero-scroller.dhs-static .dhs-gallery {
	transform: translate(-50%, -50%) scale(0.34);
}

.dms-hero-scroller.dhs-static .dhs-item img {
	transform: none;
}

.dms-hero-scroller.dhs-static .dhs-word,
.dms-hero-scroller.dhs-static .dhs-btn {
	opacity: 1;
}

.dms-hero-scroller.dhs-static .dhs-logo {
	transform: none;
}

/* --- WPBakery containment ------------------------------------------------
 *
 * position: sticky stops working if an ancestor clips or transforms, and
 * WPBakery nests the hero six wrappers deep. These rules only apply to the
 * wrappers that actually contain a hero scroller, so nothing else on the page
 * is affected.
 */
.vc_section:has(> .vc_row .dms-hero-scroller),
.vc_section:has(.dms-hero-scroller),
.vc_row:has(.dms-hero-scroller),
.wpb_column:has(.dms-hero-scroller),
.vc_column-inner:has(.dms-hero-scroller),
.wpb_wrapper:has(.dms-hero-scroller),
.wpb_text_column:has(.dms-hero-scroller) {
	overflow: visible !important;
	transform: none !important;
	filter: none !important;
	perspective: none !important;
}

/* The text block's own spacing would inset a full-bleed hero. */
.wpb_text_column:has(.dms-hero-scroller),
.wpb_text_column:has(.dms-hero-scroller) > .wpb_wrapper {
	margin: 0 !important;
	padding: 0 !important;
}

/* --- legacy hero markup left over from the previous hero ----------------
 *
 * css/custom.css still carries geometry written for the hero that used to be
 * here. The one that matters is unscoped, so it applies wherever that image
 * appears:
 *
 *   .logo-hero--banner.d-none { display:block!important; height:100vh;
 *                               position:relative; top:200px; }
 *
 * A single <img> forced to a full viewport tall and pushed down another 200px.
 * It used to sit on top of the old full-screen hero photograph; with the
 * scroller as the hero it is simply a viewport of empty space directly below
 * it. These rules neutralise it, and tidy the fan-club block it lives in.
 *
 * Everything is scoped to the section that actually contains a hero scroller,
 * so other pages and the original hero markup are untouched.
 */
.vc_section:has(.dms-hero-scroller),
.hero-banner:has(.dms-hero-scroller) {
	display: block !important;
	height: auto !important;
	min-height: 0 !important;
}

.vc_section:has(.dms-hero-scroller) .logo-hero--banner.d-none,
.hero-banner:has(.dms-hero-scroller) .logo-hero--banner.d-none {
	height: auto !important;
	top: 0 !important;
	max-width: 242px;
}

.vc_section:has(.dms-hero-scroller) .logo-hero--banner.d-none img,
.hero-banner:has(.dms-hero-scroller) .logo-hero--banner.d-none img {
	height: auto !important;
}

/* The fan-club block was absolutely positioned against the old 100vh hero. */
.vc_section:has(.dms-hero-scroller) .hero-newsletter,
.hero-banner:has(.dms-hero-scroller) .hero-newsletter {
	position: relative !important;
	inset: auto !important;
	max-width: 420px !important;
	margin: 0 auto !important;
	padding: 4rem 1.5rem !important;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* --- WPBakery containment ------------------------------------------------
 *
 * position: sticky stops working if an ancestor clips or transforms, and
 * WPBakery nests the hero six wrappers deep. These rules only apply to the
 * wrappers that actually contain a hero scroller.
 */
.vc_section:has(.dms-hero-scroller),
.vc_row:has(.dms-hero-scroller),
.wpb_column:has(.dms-hero-scroller),
.vc_column-inner:has(.dms-hero-scroller),
.wpb_wrapper:has(.dms-hero-scroller),
.wpb_text_column:has(.dms-hero-scroller) {
	overflow: visible !important;
	transform: none !important;
	filter: none !important;
	perspective: none !important;
}

/* The text block's own spacing would inset a full-bleed hero. */
.wpb_text_column:has(.dms-hero-scroller),
.wpb_text_column:has(.dms-hero-scroller) > .wpb_wrapper {
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   Sticky pin repair.

   custom.css sets `html, body { overflow-x: hidden }`. Per CSS Overflow 3, if
   one axis is not `visible` the other axis computes from `visible` to `auto`,
   so html and body both end up `overflow: hidden auto` and become scroll
   containers. A `position: sticky` descendant resolves against its nearest
   scrolling ancestor; that box never actually scrolls, so the pin silently
   does nothing. The stage then travels with the track instead of holding at
   the top, and the whole pin distance reads as dead space - pushing the
   sections after the hero far below the fold.

   `clip` clips overflow on that axis WITHOUT establishing a scroll container,
   which is the sanctioned pairing with `visible` on the other axis. Scoped
   with :has() so only pages carrying the scroller are affected.
   --------------------------------------------------------------------------- */
html:has(.dms-hero-scroller),
body:has(.dms-hero-scroller) {
	overflow-x: clip;
	overflow-y: visible;
}

/* The sticky stage must not be clipped by the track or by the scroller root. */
.dms-hero-scroller,
.dms-hero-scroller .dhs-track {
	overflow: visible;
}

/* ---------------------------------------------------------------------------
   Hero logo: render white.
   ---------------------------------------------------------------------------
   The logo is the brand signature SVG from DMS Theme options
   (upload-logo), which is a dark brown. It sits over the photo wall, so on the
   forest and album frames it all but disappears.

   It is referenced with <img src="...svg">, not inlined, so its paths are not
   reachable from CSS and `fill` would do nothing. brightness(0) crushes every
   colour to black while preserving the alpha channel, then invert(1) flips
   that to white - the standard way to recolour a referenced SVG, and it works
   whatever colours the artwork uses.

   The drop-shadow is there because pure white on bright foliage still loses
   its edges. Remove that one line if you want it flat.
   --------------------------------------------------------------------------- */
.dms-hero-scroller .dhs-logo img {
	/* brightness( 0 ) invert( 1 ) removed 2026-11-06: the logo is now the
	   full-colour Crazy Hearts Club lockup and must keep its own colours.
	   The drop-shadow stays - it is what holds the edges against bright
	   foliage in the photo wall. */
	filter: drop-shadow( 0 1px 10px rgba( 0, 0, 0, 0.45 ) );
}

/* ---------------------------------------------------------------------------
   Full-bleed on load.
   ---------------------------------------------------------------------------
   The image wall itself is already an exact fit - at scale 1 the centre tile
   covers the stage to the pixel, 0 gap on all four edges. The dark strip
   visible across the top on load was not the grid at all: the WPBakery section
   wrapping the hero carries padding-top: 35px via its generated
   .vc_custom_1791280521371 class, so 35px of the section's own background
   showed above the photo.

   Zeroing it here rather than in the WPBakery section settings is deliberate -
   a save in the builder regenerates that vc_custom class and would silently
   bring the padding back, which has already happened twice on this page with
   other attributes.

   Scoped with :has() so only the section actually containing the hero is
   affected; every other vc_section keeps its spacing.
   --------------------------------------------------------------------------- */
.vc_section:has( .dms-hero-scroller ) {
	padding-top: 0 !important;
}

/*
 * Belt and braces against sub-pixel rounding. The tile fits exactly, which
 * means a fractional viewport height or a browser rounding 1669/3 down can
 * expose a hairline of the gap colour at an edge. A fraction of a percent of
 * overscale costs nothing visually and removes that class of bug entirely.
 */
.dms-hero-scroller .dhs-stage {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Exit backdrop.
   ---------------------------------------------------------------------------
   The end of the runway fades the stage out through .dhs-overlay, whose
   opacity the script drives from 0 to 1. By default that overlay is the flat
   `bg` colour, which is why the hero dissolves to black.

   Give it an image and it dissolves into that instead. The monotone treatment
   is background-blend-mode: luminosity - the image contributes only its
   light and shade, the colour comes from the tint underneath. That is a real
   monotone in one property: no duplicate elements, no filter, no extra paint
   cost on an element that is already animating its opacity every frame.

   Using `filter: grayscale()` here would have been the obvious route and is
   the wrong one - it would force the browser to re-filter the whole layer on
   every frame of the fade.

   Controls, all on the shortcode:
     exit_image  attachment ID or URL. Falls back to
                 assets/hero-scroller/exit-bg.{webp,jpg,jpeg,png,avif}
     exit_tint   the colour the image is toned to. Defaults to `bg`.
     exit_mono   "no" to keep the image in full colour.
   --------------------------------------------------------------------------- */

.dms-hero-scroller.dhs-has-exit-image .dhs-overlay {
	background-color: var( --dhs-exit-tint, var( --dhs-bg, #0a0a0a ) );
	background-image: var( --dhs-exit-image );
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Monotone: image supplies luminosity, tint supplies the hue. */
.dms-hero-scroller.dhs-has-exit-image.dhs-exit-mono .dhs-overlay {
	background-blend-mode: luminosity;
}

/*
 * The overlay is fixed to the stage, so a tall exit image would otherwise
 * jump as the sticky stage releases. Keeping it attached to the stage box
 * means it holds still through the hand-off.
 */
.dms-hero-scroller.dhs-has-exit-image .dhs-overlay {
	background-attachment: scroll;
}


/* ---------------------------------------------------------------------------
   Exit video
   ---------------------------------------------------------------------------
   An optional moving version of the exit backdrop. It sits inside .dhs-overlay
   so it inherits the overlay's existing opacity animation for free - the fade
   in and out is already driven by exitProgress and needs no extra JS.

   The overlay's background-image (the still) stays underneath as the poster and
   the fallback. That means every path below looks correct rather than black:

     - before the first frame decodes
     - while the file is still downloading
     - under 1000px, where the script never starts playback at all
     - with prefers-reduced-motion
     - if the file 404s

   The grade is baked into the file rather than applied with filter:grayscale(),
   because that would be a full-screen per-frame GPU filter on a layer that is
   already animating opacity - expensive on mid-range phones for no visual gain.
   --------------------------------------------------------------------------- */

.dms-hero-scroller .dhs-exit-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	border: 0;
	pointer-events: none;

	/* Hidden until the script has it playing, so a poster frame never pops in
	   at a different brightness to the overlay's own background image. */
	opacity: 0;
	transition: opacity 0.45s ease-out;
}

.dms-hero-scroller .dhs-exit-video.is-playing {
	opacity: 1;
}

/* The overlay is the blend surface, so the video has to sit in the same
   stacking context and respect the mono treatment above it. */
.dms-hero-scroller.dhs-has-exit-video .dhs-overlay {
	overflow: hidden;
}

/* Phones: never play, never download. The poster carries the whole look, and a
   full-bleed background video is the single largest mobile data cost on the
   page for something on screen for two or three seconds. The script checks the
   same breakpoint before calling play(). */
@media (max-width: 1000px) {
	.dms-hero-scroller .dhs-exit-video {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dms-hero-scroller .dhs-exit-video {
		display: none;
	}
}


/* ---------------------------------------------------------------------------
   Scroll cue
   ---------------------------------------------------------------------------
   Replaces the footer_text line on the home page. Rendered by the
   `scroll_cue` shortcode attribute - see includes/functions/hero-scroller.php.

   It reuses .dhs-footer so it inherits the blur-and-fade the script already
   applies between 5% and 25% of the hero's progress. That is the behaviour you
   want from a prompt: the instant someone has acted on it, it is gone.

   Bottom-right, where footer_text sat.
   --------------------------------------------------------------------------- */

/*
 * Positioned WITHOUT a transform, on purpose.
 *
 * The obvious way to place this is `left: 50%; transform: translateX(-50%)` or
 * similar. Any transform here is lost: render() in hero-scroller.js writes
 * `footer.style.transform = 'scale(...)'` on every frame, and an inline style
 * beats the stylesheet. (A centred first attempt landed 113px off for exactly
 * this reason - pill centre at 831px in a 1436px viewport.)
 *
 * So the box spans the full width and the inline-flex pill is aligned inside
 * it with text-align. That leaves the element's transform property free for
 * the script, and the blur-and-shrink on scroll keeps working untouched.
 *
 * transform-origin: right centre so the script's scale() shrinks the pill
 * toward its own corner rather than dragging it in from the edge.
 *
 * Note the same latent bug exists in the <=1000px `.dhs-footer` rule further
 * up for plain footer_text. Left alone: nothing on the site uses footer_text
 * now, and changing it would move something nobody has asked to move.
 */
.dms-hero-scroller .dhs-footer--cue {
	left: 0;
	right: 0;
	bottom: 2.5rem;
	width: 100%;
	padding-right: 2.5rem;
	text-align: right;
	transform-origin: right center;
}

/* The pill.
   Translucent rather than solid so the photo wall still reads through it, with
   a blur behind the glass. backdrop-filter is a progressive enhancement: where
   it is unsupported the rgba background alone still gives enough separation,
   so nothing is riding on it. */
.dms-hero-scroller .dhs-cue {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;

	margin: 0;
	padding: 0.65rem 1.35rem;

	/* A true pill: half the element's own height, so it stays a capsule
	   whatever the label length or font size. */
	border-radius: 999px;
	border: 1px solid rgba( 244, 237, 227, 0.35 );
	background: rgba( 10, 10, 10, 0.35 );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );

	color: var( --dhs-fg );
	font-family: 'Montserrat', sans-serif;

	/* One number controls the whole pill. The padding is in rem so it holds
	   its shape, but the arrow is sized in em, so changing this scales the
	   glyph with the text automatically. 0.625rem = 10px. */
	font-size: var( --dhs-cue-size, 0.625rem );
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;

	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.25s ease-out, border-color 0.25s ease-out,
		transform 0.25s ease-out;
}

.dms-hero-scroller .dhs-cue:hover,
.dms-hero-scroller .dhs-cue:focus-visible {
	background: rgba( 10, 10, 10, 0.6 );
	border-color: rgba( 244, 237, 227, 0.7 );
}

/* A visible focus ring, because the pill's own hover styling is too subtle to
   double as one for keyboard users. */
.dms-hero-scroller .dhs-cue:focus-visible {
	outline: 2px solid var( --dhs-fg );
	outline-offset: 3px;
}

.dms-hero-scroller .dhs-cue:active {
	transform: translateY( 1px );
}

/*
 * `font-size: inherit !important` is load-bearing, not tidiness, and the
 * !important is not laziness.
 *
 * css/custom.css line 511 carries this, unscoped, for the whole site:
 *
 *     span { font-size: 16px !important; color: inherit !important; }
 *
 * Inheritance has no specificity and cannot outrank a declaration at all, let
 * alone an important one, so both children rendered at 16px while the button
 * itself computed at 10px - the pill's own font-size had never reached its own
 * text. Measured before this fix: button 10px, label 16px, arrow box 16x21
 * instead of 10x13.
 *
 * Matching !important is the only thing that wins here short of editing that
 * rule, which is sitewide and not ours to move. custom.css line 1569 already
 * does exactly this for the nav - `header .nav-menu ul li a span {
 * font-size: inherit !important; }` - so this is the established pattern in
 * this codebase, not a new hack.
 *
 * With it in place --dhs-cue-size genuinely controls the whole pill, and the
 * arrow's em sizing resolves against the label rather than against 16px.
 */
.dms-hero-scroller .dhs-cue__label {
	display: block;
	font-size: inherit !important;
	letter-spacing: inherit;
	line-height: inherit;
}

/* The arrow. Sized in em so it tracks the label rather than needing its own
   breakpoints. */
.dms-hero-scroller .dhs-cue__arrow {
	display: block;
	font-size: inherit !important;
	width: 1em;
	height: 1.3em;
	flex: 0 0 auto;
	animation: dhs-cue-nudge 1.9s cubic-bezier( 0.45, 0, 0.55, 1 ) infinite;
}

.dms-hero-scroller .dhs-cue__arrow svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Travel is deliberately small - 3px, not a bounce across the pill. At this
   size and repeating forever, anything bigger stops reading as a hint and
   starts competing with the hero for attention. The pause at each end comes
   from holding the same value across 0%, 55% and 100%. */
@keyframes dhs-cue-nudge {
	0%,
	55%,
	100% {
		transform: translateY( 0 );
	}
	27% {
		transform: translateY( 3px );
	}
}

/* Phones and small tablets: the hero logo sits bottom-left and the copy block
   fills the middle, so a right-hugging pill at 2.5rem crowds the edge. Centre
   it and lift it clear of the logo. */
@media (max-width: 1000px) {
	.dms-hero-scroller .dhs-footer--cue {
		bottom: 12svh;
		padding-right: 0;
		text-align: center;
		transform-origin: center center;

		/* The cue carries both .dhs-footer and .dhs-footer--cue. At this
		   width the .dhs-footer rule above centres a narrow box with
		   `left: 50%; width: 200px; transform: translateX( -50% )`. The
		   --cue rule overrides left, right and width back to a full-width
		   box but never touched the transform, so a 100%-wide element was
		   still being shifted left by half its own width - half the
		   viewport - and ran off the screen. Restate all four.

		   The script never fights this on mobile: initScroller() bails out
		   under (max-width: 1000px), so nothing writes an inline transform
		   here the way it does on desktop. */
		left: 0;
		right: 0;
		width: 100%;
		transform: none;
	}

	.dms-hero-scroller .dhs-cue {
		padding: 0.55rem 1.1rem;
		letter-spacing: 0.14em;
	}
}

/* An arrow that moves forever is exactly the kind of thing reduced motion is
   asking you to stop. The pill, the label and the arrow all stay - only the
   animation goes. */
@media (prefers-reduced-motion: reduce) {
	.dms-hero-scroller .dhs-cue__arrow {
		animation: none;
	}

	.dms-hero-scroller .dhs-cue {
		transition: none;
	}
}


/* ---------------------------------------------------------------------------
   Phones and small tablets: one still, no runway.
   ---------------------------------------------------------------------------
   The scroll animation is already skipped at this width - hero-scroller.js
   bails out under (max-width: 1000px). The track was still --dhs-pin tall
   though, so the hero occupied three viewport heights of sticky scrolling
   that did nothing at all. Collapse it to one screen and swap the 3x3 wall
   for a single portrait photograph.

   Scoped to .dhs-has-mobile-image, so a hero with no still supplied keeps the
   old behaviour untouched. The still comes from
   dms_hero_scroller_mobile_image() - the `mobile_image` shortcode attribute,
   or uploads/hero-scroller/mobile.webp.
   --------------------------------------------------------------------------- */
@media (max-width: 1000px) {
	.dms-hero-scroller.dhs-has-mobile-image .dhs-track {
		height: 100svh;
	}

	.dms-hero-scroller.dhs-has-mobile-image .dhs-gallery {
		display: none;
	}

	.dms-hero-scroller.dhs-has-mobile-image .dhs-stage {
		background-image: var( --dhs-mobile-image );
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	/* The lockup moved into the header on mobile. Leaving it here too would
	   put it on screen twice, and at --dhs-logo-scale: 2 from bottom-left it
	   was colliding with the scroll-down pill. */
	.dms-hero-scroller.dhs-has-mobile-image .dhs-logo {
		display: none;
	}
}