/**
 * MRMVR Elements — Service Hero.
 *
 * An editorial split hero: display headline and actions on one side, an
 * arched photograph with a frosted badge and a turning seal on the other,
 * over drifting washes of colour and three faint grid hairlines.
 *
 * The opening intro lives entirely in this file and is driven by three classes
 * on `.mrx-sh`, each added once and never removed:
 *
 *   is-armed    Set inline during the page parse. Every animated part takes
 *               its starting position — hidden, offset, clipped.
 *   is-playing  Set by the script once the band is in view and its image is
 *               ready. The starting positions fall away, and each part
 *               transitions to rest on its own delay.
 *   is-settled  Set once the last part has landed. The intro's long delays
 *               are dropped, so hover and pointer effects respond at once.
 *
 * Without `is-armed` none of the starting positions apply, so a page with no
 * JavaScript, a blocked script or a request for reduced motion simply shows
 * the finished band.
 *
 * @package MRMVR\Elements
 * @since   1.43.0
 */

/* -------------------------------------------------------------------------
 * Wrapper and tokens
 * ---------------------------------------------------------------------- */

/*
 * The band sizes itself against its own width, not the viewport, so a hero
 * dropped into a narrow column stacks even on a wide screen. The wrapper
 * exists to be the query container, since an element cannot query itself.
 */
.mrx-sh-wrap {
	container-type: inline-size;
	container-name: mrxsh;
	margin: 0;
}

.mrx-sh {
	/* Layout */
	--mrx-sh-min-h: 88vh;
	--mrx-sh-media-w: 44%;
	--mrx-sh-gap: clamp(36px, 6cqi, 104px);
	--mrx-sh-max-w: 1320px;
	--mrx-sh-ratio: 4 / 5;
	--mrx-sh-img-pos: center center;
	--mrx-sh-radius: 28px;

	/* Palette — cream */
	--mrx-sh-bg: var(--mrmvr-cream, #fdf8f5);
	--mrx-sh-ink: var(--mrmvr-navy, #1a2142);
	--mrx-sh-muted: rgba(26, 33, 66, 0.72);
	--mrx-sh-accent: var(--mrmvr-amber, #f57528);
	--mrx-sh-eyebrow: var(--mrmvr-clay-deep, #c08e82);
	--mrx-sh-rule: var(--mrmvr-clay, #cfa190);
	--mrx-sh-line: rgba(207, 161, 144, 0.22);
	--mrx-sh-glow-a: rgba(251, 230, 221, 0.95);
	--mrx-sh-glow-b: rgba(182, 218, 212, 0.55);

	/* Media */
	--mrx-sh-frame-bg: var(--mrmvr-cocoa, #552c1d);
	--mrx-sh-shade: 0.35;
	--mrx-sh-outline: rgba(207, 161, 144, 0.6);
	--mrx-sh-outline-offset: 18px;
	--mrx-sh-rest: 1.04;

	/* Badge and seal */
	--mrx-sh-badge-bg: rgba(253, 248, 245, 0.84);
	--mrx-sh-badge-ink: var(--mrmvr-navy, #1a2142);
	--mrx-sh-badge-label: rgba(26, 33, 66, 0.66);
	--mrx-sh-badge-border: rgba(255, 255, 255, 0.7);
	--mrx-sh-star: var(--mrmvr-amber, #f57528);
	--mrx-sh-seal-bg: var(--mrmvr-navy, #1a2142);
	--mrx-sh-seal-ink: var(--mrmvr-cream, #fdf8f5);
	--mrx-sh-seal-core: var(--mrmvr-amber, #f57528);
	--mrx-sh-seal-size: 124px;

	/* Buttons */
	--mrx-sh-btn-bg: var(--mrmvr-navy, #1a2142);
	--mrx-sh-btn-color: var(--mrmvr-white, #ffffff);
	--mrx-sh-btn-bg-hover: var(--mrmvr-amber, #f57528);
	--mrx-sh-btn-color-hover: var(--mrmvr-white, #ffffff);
	--mrx-sh-btn-arrow: rgba(255, 255, 255, 0.14);
	--mrx-sh-link: var(--mrmvr-navy, #1a2142);
	--mrx-sh-link-line: var(--mrmvr-amber, #f57528);

	/* Motion */
	--mrx-sh-speed: 1;
	--mrx-sh-start: 0ms;
	--mrx-sh-out: cubic-bezier(0.16, 1, 0.3, 1);
	--mrx-sh-curtain: cubic-bezier(0.77, 0, 0.175, 1);
	--mrx-sh-mx: 0;
	--mrx-sh-my: 0;

	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--mrx-sh-min-h);
	padding: clamp(40px, 7cqi, 112px) clamp(20px, 5cqi, 72px);
	overflow: hidden;
	color: var(--mrx-sh-ink);
	background-color: var(--mrx-sh-bg);
	border-radius: var(--mrx-sh-radius);
	font-family: var(--mrmvr-font-body);
}

.mrx-sh *,
.mrx-sh *::before,
.mrx-sh *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Palettes
 *
 * Set on the Elementor wrapper by the palette control. Style controls write
 * the same custom properties from a selector Elementor prefixes with the page
 * and element IDs, so a colour picked there always wins over these.
 * ---------------------------------------------------------------------- */

.mrx-sh-palette-blush .mrx-sh {
	--mrx-sh-bg: var(--mrmvr-blush-soft, #f9e9e0);
	--mrx-sh-line: rgba(192, 142, 130, 0.24);
	--mrx-sh-glow-a: rgba(253, 248, 245, 0.95);
	--mrx-sh-glow-b: rgba(207, 161, 144, 0.42);
	--mrx-sh-outline: rgba(192, 142, 130, 0.6);
}

.mrx-sh-palette-midnight .mrx-sh {
	--mrx-sh-bg: var(--mrmvr-navy, #1a2142);
	--mrx-sh-ink: var(--mrmvr-cream, #fdf8f5);
	--mrx-sh-muted: rgba(253, 248, 245, 0.74);
	--mrx-sh-accent: #e9b9a5;
	--mrx-sh-eyebrow: var(--mrmvr-clay, #cfa190);
	--mrx-sh-rule: var(--mrmvr-clay, #cfa190);
	--mrx-sh-line: rgba(253, 248, 245, 0.07);
	--mrx-sh-glow-a: rgba(207, 161, 144, 0.26);
	--mrx-sh-glow-b: rgba(109, 181, 170, 0.2);
	--mrx-sh-frame-bg: #0f1430;
	--mrx-sh-outline: rgba(207, 161, 144, 0.45);
	--mrx-sh-badge-bg: rgba(26, 33, 66, 0.72);
	--mrx-sh-badge-ink: var(--mrmvr-cream, #fdf8f5);
	--mrx-sh-badge-label: rgba(253, 248, 245, 0.7);
	--mrx-sh-badge-border: rgba(253, 248, 245, 0.16);
	--mrx-sh-seal-bg: var(--mrmvr-cream, #fdf8f5);
	--mrx-sh-seal-ink: var(--mrmvr-navy, #1a2142);
	--mrx-sh-btn-bg: var(--mrmvr-cream, #fdf8f5);
	--mrx-sh-btn-color: var(--mrmvr-navy, #1a2142);
	--mrx-sh-btn-arrow: rgba(26, 33, 66, 0.08);
	--mrx-sh-link: var(--mrmvr-cream, #fdf8f5);
	--mrx-sh-link-line: var(--mrmvr-clay, #cfa190);
}

/* -------------------------------------------------------------------------
 * Ambient layer — glows and grid hairlines
 * ---------------------------------------------------------------------- */

.mrx-sh__ambient {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.mrx-sh__glow {
	position: absolute;
	display: block;
	width: 62cqi;
	height: 62cqi;
	min-width: 420px;
	min-height: 420px;
	border-radius: 50%;
	filter: blur(24px);
	opacity: 0;
}

.mrx-sh--ambient .mrx-sh__glow {
	opacity: 1;
}

.mrx-sh__glow--a {
	top: -28%;
	right: -12%;
	background: radial-gradient(closest-side, var(--mrx-sh-glow-a), transparent);
}

.mrx-sh__glow--b {
	bottom: -34%;
	left: -16%;
	background: radial-gradient(closest-side, var(--mrx-sh-glow-b), transparent);
}

.mrx-sh__lines {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: space-evenly;
}

.mrx-sh__lines i {
	display: block;
	width: 1px;
	height: 100%;
	background: linear-gradient(to bottom, transparent, var(--mrx-sh-line) 18%, var(--mrx-sh-line) 82%, transparent);
	transform-origin: top center;
}

/* -------------------------------------------------------------------------
 * Grid
 * ---------------------------------------------------------------------- */

.mrx-sh__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--mrx-sh-media-w);
	grid-template-areas: "content media";
	gap: var(--mrx-sh-gap);
	align-items: center;
	width: 100%;
	max-width: var(--mrx-sh-max-w);
	margin: 0 auto;
}

.mrx-sh-media-left .mrx-sh__grid {
	grid-template-columns: var(--mrx-sh-media-w) minmax(0, 1fr);
	grid-template-areas: "media content";
}

/* -------------------------------------------------------------------------
 * Content
 * ---------------------------------------------------------------------- */

.mrx-sh__content {
	grid-area: content;
	min-width: 0;
	text-align: left;
}

.mrx-sh__content > :last-child {
	margin-bottom: 0;
}

.mrx-sh__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 26px;
	font-family: var(--mrmvr-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2.8px;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--mrx-sh-eyebrow);
}

.mrx-sh__eyebrow-rule {
	flex: 0 0 auto;
	display: block;
	width: 52px;
	height: 1px;
	background-color: var(--mrx-sh-rule);
	transform-origin: left center;
}

.mrx-sh__eyebrow-text {
	display: inline-block;
}

.mrx-sh__title {
	margin: 0 0 28px;
	font-family: var(--mrmvr-font-display);
	/* Fallback for browsers without container query units. */
	font-size: clamp(40px, 4.4vw, 74px);
	font-size: clamp(40px, 5.6cqi, 74px);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.015em;
	color: var(--mrx-sh-ink);
	text-wrap: balance;
}

.mrx-sh__title em {
	font-style: italic;
	font-weight: 500;
	color: var(--mrx-sh-accent);
}

/*
 * Word masks, added by the script. Each word rises inside a box that clips
 * it, so it appears to come up out of its own line. The padding and matching
 * negative margin give italic overhang and descenders room inside the clip
 * without moving a single word from where it would otherwise sit.
 */
.mrx-sh__w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: 0.02em 0.08em 0.14em 0.02em;
	margin: -0.02em -0.08em -0.14em -0.02em;
}

.mrx-sh__w-in {
	display: inline-block;
	transform-origin: 0 100%;
}

.mrx-sh__desc {
	max-width: 50ch;
	margin: 0 0 40px;
	font-family: var(--mrmvr-font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--mrx-sh-muted);
}

.mrx-sh__desc > :first-child {
	margin-top: 0;
}

.mrx-sh__desc > :last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Actions
 * ---------------------------------------------------------------------- */

.mrx-sh__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 34px;
	margin: 0 0 56px;
}

.mrx-sh__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding: 8px 8px 8px 30px;
	overflow: hidden;
	isolation: isolate;
	font-family: var(--mrmvr-font-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.4px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mrx-sh-btn-color);
	background-color: var(--mrx-sh-btn-bg);
	border-radius: 999px;
	box-shadow: 0 22px 40px -24px rgba(26, 33, 66, 0.6);
	transition:
		color 500ms var(--mrx-sh-out),
		box-shadow 500ms var(--mrx-sh-out),
		transform 500ms var(--mrx-sh-out);
}

/* The hover colour wipes in from the left rather than cross-fading. */
.mrx-sh__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--mrx-sh-btn-bg-hover);
	border-radius: inherit;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 650ms var(--mrx-sh-out);
}

.mrx-sh__btn:hover,
.mrx-sh__btn:focus-visible {
	color: var(--mrx-sh-btn-color-hover);
	box-shadow: 0 26px 44px -22px rgba(26, 33, 66, 0.55);
	transform: translateY(-2px);
}

.mrx-sh__btn:hover::before,
.mrx-sh__btn:focus-visible::before {
	transform: scaleX(1);
	transform-origin: left center;
}

.mrx-sh__btn:focus-visible {
	outline: 2px solid var(--mrx-sh-btn-bg);
	outline-offset: 3px;
}

.mrx-sh__btn-text {
	padding: 14px 0;
	white-space: nowrap;
}

/* Two arrows: one leaves to the right as the other arrives from the left. */
.mrx-sh__btn-arrow {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: 46px;
	height: 46px;
	overflow: hidden;
	border-radius: 50%;
	background-color: var(--mrx-sh-btn-arrow);
}

.mrx-sh__btn-arrow svg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	transition: transform 550ms var(--mrx-sh-out);
}

.mrx-sh__btn-arrow svg + svg {
	transform: translateX(-46px);
}

.mrx-sh__btn:hover .mrx-sh__btn-arrow svg,
.mrx-sh__btn:focus-visible .mrx-sh__btn-arrow svg {
	transform: translateX(46px);
}

.mrx-sh__btn:hover .mrx-sh__btn-arrow svg + svg,
.mrx-sh__btn:focus-visible .mrx-sh__btn-arrow svg + svg {
	transform: translateX(0);
}

.mrx-sh__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 6px 0;
	font-family: var(--mrmvr-font-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.4px;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mrx-sh-link);
}

/* A resting hairline, with the accent line drawing across it on hover. */
.mrx-sh__link-text {
	padding-bottom: 6px;
	background-image:
		linear-gradient(var(--mrx-sh-link-line), var(--mrx-sh-link-line)),
		linear-gradient(var(--mrx-sh-rule), var(--mrx-sh-rule));
	background-repeat: no-repeat;
	background-position: 0 100%, 0 100%;
	background-size: 0% 1px, 100% 1px;
	transition: background-size 600ms var(--mrx-sh-out);
}

.mrx-sh__link:hover .mrx-sh__link-text,
.mrx-sh__link:focus-visible .mrx-sh__link-text {
	background-size: 100% 1px, 100% 1px;
}

.mrx-sh__link:focus-visible {
	outline: 2px solid var(--mrx-sh-link);
	outline-offset: 4px;
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
 * Highlights
 * ---------------------------------------------------------------------- */

/*
 * Columns come from the widget: one per highlight up to three, and four as
 * two pairs. Each row's first entry drops its divider, so a second row starts
 * flush rather than on a stray hairline.
 */
.mrx-sh__stats {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--mrx-sh-stat-cols, 3), auto);
	justify-content: start;
	row-gap: 26px;
	margin: 0;
	padding: 30px 0 0;
	list-style: none;
}

.mrx-sh__stats::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 520px;
	height: 1px;
	background-color: var(--mrx-sh-rule);
	opacity: 0.55;
	transform-origin: left center;
}

.mrx-sh__stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0 34px;
	border-left: 1px solid var(--mrx-sh-line);
}

.mrx-sh__stats[data-cols="1"] > .mrx-sh__stat,
.mrx-sh__stats[data-cols="2"] > .mrx-sh__stat:nth-child(2n+1),
.mrx-sh__stats[data-cols="3"] > .mrx-sh__stat:nth-child(3n+1) {
	padding-left: 0;
	border-left: 0;
}

.mrx-sh__stat-value {
	font-family: var(--mrmvr-font-display);
	font-size: 40px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--mrx-sh-ink);
}

.mrx-sh__stat-label {
	font-family: var(--mrmvr-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.6px;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--mrx-sh-muted);
}

/* -------------------------------------------------------------------------
 * Media
 * ---------------------------------------------------------------------- */

.mrx-sh__media {
	--mrx-sh-r: 999px 999px 26px 26px;

	position: relative;
	grid-area: media;
	width: 100%;
	aspect-ratio: var(--mrx-sh-ratio);
}

.mrx-sh-shape-leaf .mrx-sh__media {
	--mrx-sh-r: 180px 26px 180px 26px;
}

.mrx-sh-shape-rounded .mrx-sh__media {
	--mrx-sh-r: 28px;
}

.mrx-sh-shape-square .mrx-sh__media {
	--mrx-sh-r: 0;
}

/* A soft pool of shadow under the image. Separate from the frame, whose clip would cut it off. */
.mrx-sh__media::before {
	content: "";
	position: absolute;
	right: 8%;
	bottom: -5%;
	left: 8%;
	height: 18%;
	z-index: 0;
	background: radial-gradient(closest-side, rgba(26, 33, 66, 0.32), transparent);
	filter: blur(12px);
	pointer-events: none;
}

.mrx-sh__outline {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	border: 1px solid var(--mrx-sh-outline);
	border-radius: var(--mrx-sh-r);
	transform: translate(var(--mrx-sh-outline-offset), var(--mrx-sh-outline-offset));
	translate: calc(var(--mrx-sh-mx) * 6px) calc(var(--mrx-sh-my) * 6px);
	transition:
		transform 900ms var(--mrx-sh-out),
		translate 900ms var(--mrx-sh-out);
	pointer-events: none;
}

.mrx-sh-media-left .mrx-sh__outline {
	transform: translate(calc(var(--mrx-sh-outline-offset) * -1), var(--mrx-sh-outline-offset));
}

.mrx-sh__media:hover .mrx-sh__outline {
	transform: translate(calc(var(--mrx-sh-outline-offset) * 0.5), calc(var(--mrx-sh-outline-offset) * 0.5));
}

.mrx-sh-media-left .mrx-sh__media:hover .mrx-sh__outline {
	transform: translate(calc(var(--mrx-sh-outline-offset) * -0.5), calc(var(--mrx-sh-outline-offset) * 0.5));
}

/*
 * Pinned to the media box rather than sized with `height: 100%`: the box
 * takes its height from `aspect-ratio`, and a percentage height against that
 * is not reliably resolvable.
 */
.mrx-sh__frame {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	background-color: var(--mrx-sh-frame-bg);
	border-radius: var(--mrx-sh-r);
	clip-path: inset(0 0 0 0);
	/* Keeps Safari clipping a transformed child to the rounded corners. */
	-webkit-mask-image: -webkit-radial-gradient(white, black);
}

.mrx-sh__frame img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: var(--mrx-sh-img-pos);
	border-radius: 0;
	transform: scale(var(--mrx-sh-rest));
	translate: calc(var(--mrx-sh-mx) * -12px) calc(var(--mrx-sh-my) * -12px);
	transition:
		transform 1600ms var(--mrx-sh-out),
		translate 1000ms var(--mrx-sh-out);
}

.mrx-sh__media:hover .mrx-sh__frame img {
	transform: scale(calc(var(--mrx-sh-rest) + 0.04));
}

.mrx-sh__shade {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(180deg, rgba(26, 33, 66, 0) 50%, rgba(26, 33, 66, 0.9) 100%);
	opacity: var(--mrx-sh-shade);
	pointer-events: none;
}

/* A band of light that crosses the photograph once, as the curtain lifts. */
.mrx-sh__sheen {
	position: absolute;
	inset: -10% -60%;
	display: block;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.32) 50%, transparent 62%);
	opacity: 0;
	transform: translateX(-70%);
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Badge
 * ---------------------------------------------------------------------- */

.mrx-sh__badge {
	position: absolute;
	z-index: 3;
	bottom: 11%;
	left: -38px;
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: calc(100% - 24px);
	padding: 16px 22px 16px 20px;
	color: var(--mrx-sh-badge-ink);
	background-color: var(--mrx-sh-badge-bg);
	border: 1px solid var(--mrx-sh-badge-border);
	border-radius: 20px;
	box-shadow: 0 30px 60px -30px rgba(26, 33, 66, 0.55);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
	translate: calc(var(--mrx-sh-mx) * 16px) calc(var(--mrx-sh-my) * 16px);
	transition: translate 1000ms var(--mrx-sh-out);
}

.mrx-sh-media-left .mrx-sh__badge {
	right: -38px;
	left: auto;
}

.mrx-sh__badge-value {
	font-family: var(--mrmvr-font-display);
	font-size: 44px;
	font-weight: 600;
	line-height: 0.9;
	color: var(--mrx-sh-badge-ink);
}

.mrx-sh__badge-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.mrx-sh__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--mrx-sh-star);
}

.mrx-sh__stars svg {
	display: block;
	width: 13px;
	height: 13px;
	fill: currentColor;
}

.mrx-sh__badge-label {
	font-family: var(--mrmvr-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.3px;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--mrx-sh-badge-label);
}

/* -------------------------------------------------------------------------
 * Seal
 * ---------------------------------------------------------------------- */

.mrx-sh__seal {
	position: absolute;
	z-index: 3;
	top: 9%;
	left: calc(var(--mrx-sh-seal-size) / -2);
	width: var(--mrx-sh-seal-size);
	height: var(--mrx-sh-seal-size);
	color: var(--mrx-sh-seal-ink);
	background-color: var(--mrx-sh-seal-bg);
	border-radius: 50%;
	box-shadow: 0 24px 50px -24px rgba(26, 33, 66, 0.6);
	translate: calc(var(--mrx-sh-mx) * 24px) calc(var(--mrx-sh-my) * 24px);
	transition: translate 1000ms var(--mrx-sh-out);
	pointer-events: none;
}

.mrx-sh-media-left .mrx-sh__seal {
	right: calc(var(--mrx-sh-seal-size) / -2);
	left: auto;
}

.mrx-sh__seal-ring {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	animation: mrx-sh-spin 26s linear infinite;
}

.mrx-sh__seal-ring text {
	font-family: var(--mrmvr-font-body);
	font-size: 8.4px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: uppercase;
	fill: currentColor;
}

.mrx-sh__seal-core {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38%;
	height: 38%;
	color: var(--mrmvr-white, #ffffff);
	background-color: var(--mrx-sh-seal-core);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.mrx-sh__seal-core svg {
	display: block;
	width: 46%;
	height: 46%;
}

@keyframes mrx-sh-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes mrx-sh-drift-a {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(-6%, 8%, 0) scale(1.08); }
	100% { transform: translate3d(4%, -4%, 0) scale(0.96); }
}

@keyframes mrx-sh-drift-b {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(8%, -6%, 0) scale(1.1); }
	100% { transform: translate3d(-4%, 4%, 0) scale(0.95); }
}

@keyframes mrx-sh-sheen {
	0% { opacity: 0; transform: translateX(-70%); }
	25% { opacity: 1; }
	100% { opacity: 0; transform: translateX(70%); }
}

/* -------------------------------------------------------------------------
 * Full width
 *
 * `--mrx-sbw` is the scrollbar width, published by the script, so the bleed
 * cannot be wider than the document and trip a horizontal scrollbar.
 * ---------------------------------------------------------------------- */

.mrx-shbleed-yes .mrx-sh-wrap {
	--mrx-sh-bleed: calc(100vw - var(--mrx-sbw, 0px));

	width: var(--mrx-sh-bleed);
	max-width: none;
	margin-left: calc(50% - (var(--mrx-sh-bleed) / 2));
	margin-right: 0;
}

.mrx-shbleed-yes .mrx-sh {
	border-radius: 0;
}

/* -------------------------------------------------------------------------
 * The opening intro
 *
 * Every rule here is gated behind a request for motion, so a visitor who has
 * asked for less of it never sees a hidden starting state, whatever the
 * script does.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.mrx-sh--ambient .mrx-sh__glow--a {
		animation: mrx-sh-drift-a 22s ease-in-out infinite alternate;
	}

	.mrx-sh--ambient .mrx-sh__glow--b {
		animation: mrx-sh-drift-b 26s ease-in-out infinite alternate;
	}

	/* --- Starting positions -------------------------------------------- */

	.mrx-sh.is-armed:not(.is-playing) .mrx-sh__glow {
		opacity: 0;
	}

	.mrx-sh.is-armed:not(.is-playing) .mrx-sh__lines i {
		transform: scaleY(0);
	}

	.mrx-sh.is-armed:not(.is-playing) .mrx-sh__eyebrow-rule {
		transform: scaleX(0);
	}

	.mrx-sh.is-armed:not(.is-playing) .mrx-sh__eyebrow-text {
		opacity: 0;
		transform: translateX(-14px);
	}

	/* The heading as a whole, until the script has split it into words. */
	.mrx-sh.is-armed:not(.is-playing) .mrx-sh__title:not(.is-split) {
		opacity: 0;
		transform: translateY(28px);
	}

	.mrx-sh.is-armed:not(.is-playing) .mrx-sh__w-in {
		transform: translateY(115%) rotate(4deg);
	}

	.mrx-sh.is-armed:not(.is-playing) .mrx-sh__desc {
		opacity: 0;
		transform: translateY(22px);
		filter: blur(8px);
	}

	.mrx-sh.is-armed:not(.is-playing) .mrx-sh__actions > * {
		opacity: 0;
		transform: translateY(20px);
	}

	.mrx-sh.is-armed:not(.is-playing) .mrx-sh__stats::before {
		transform: scaleX(0);
	}

	.mrx-sh.is-armed:not(.is-playing) .mrx-sh__stat {
		opacity: 0;
		transform: translateY(18px);
	}

	.mrx-sh.is-armed:not(.is-playing) .mrx-sh__frame {
		clip-path: inset(100% 0 0 0);
	}

	.mrx-sh.is-armed:not(.is-playing) .mrx-sh__frame img {
		transform: scale(1.34);
	}

	.mrx-sh.is-armed:not(.is-playing) .mrx-sh__media::before {
		opacity: 0;
	}

	.mrx-sh.is-armed:not(.is-playing) .mrx-sh__outline {
		opacity: 0;
		transform: translate(0, 0);
	}

	.mrx-sh.is-armed:not(.is-playing) .mrx-sh__badge {
		opacity: 0;
		transform: translateY(28px) scale(0.9);
		filter: blur(10px);
	}

	.mrx-sh.is-armed:not(.is-playing) .mrx-sh__seal {
		opacity: 0;
		transform: rotate(-140deg) scale(0.4);
	}

	/* --- The timeline ---------------------------------------------------
	 *
	 * Every duration and delay is multiplied by the pace control and offset
	 * by the start delay. Read top to bottom, this is the order things land.
	 */

	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__lines i {
		transition: transform calc(1500ms * var(--mrx-sh-speed)) var(--mrx-sh-curtain) calc(var(--mrx-sh-start) + 90ms * var(--mrx-sh-speed) * var(--line, 0));
	}

	.mrx-sh__lines i:nth-child(2) {
		--line: 1;
	}

	.mrx-sh__lines i:nth-child(3) {
		--line: 2;
	}

	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__glow {
		transition: opacity calc(2200ms * var(--mrx-sh-speed)) ease calc(var(--mrx-sh-start) + 100ms * var(--mrx-sh-speed));
	}

	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__frame {
		transition: clip-path calc(1400ms * var(--mrx-sh-speed)) var(--mrx-sh-curtain) calc(var(--mrx-sh-start) + 150ms * var(--mrx-sh-speed));
	}

	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__frame img {
		transition: transform calc(2400ms * var(--mrx-sh-speed)) var(--mrx-sh-out) calc(var(--mrx-sh-start) + 150ms * var(--mrx-sh-speed));
	}

	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__media::before {
		transition: opacity calc(1400ms * var(--mrx-sh-speed)) ease calc(var(--mrx-sh-start) + 600ms * var(--mrx-sh-speed));
	}

	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__sheen {
		animation: mrx-sh-sheen calc(1600ms * var(--mrx-sh-speed)) var(--mrx-sh-out) calc(var(--mrx-sh-start) + 1000ms * var(--mrx-sh-speed)) both;
	}

	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__eyebrow-rule {
		transition: transform calc(900ms * var(--mrx-sh-speed)) var(--mrx-sh-curtain) calc(var(--mrx-sh-start) + 320ms * var(--mrx-sh-speed));
	}

	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__eyebrow-text {
		transition:
			opacity calc(900ms * var(--mrx-sh-speed)) ease calc(var(--mrx-sh-start) + 460ms * var(--mrx-sh-speed)),
			transform calc(1000ms * var(--mrx-sh-speed)) var(--mrx-sh-out) calc(var(--mrx-sh-start) + 460ms * var(--mrx-sh-speed));
	}

	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__title {
		transition:
			opacity calc(1000ms * var(--mrx-sh-speed)) ease calc(var(--mrx-sh-start) + 520ms * var(--mrx-sh-speed)),
			transform calc(1200ms * var(--mrx-sh-speed)) var(--mrx-sh-out) calc(var(--mrx-sh-start) + 520ms * var(--mrx-sh-speed));
	}

	/* `--w` is the word's position and `--mrx-sh-word-step` the spacing between words, both set by the script. */
	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__w-in {
		transition: transform calc(1150ms * var(--mrx-sh-speed)) var(--mrx-sh-out) calc(var(--mrx-sh-start) + (560ms + var(--w, 0) * var(--mrx-sh-word-step, 60ms)) * var(--mrx-sh-speed));
	}

	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__desc {
		transition:
			opacity calc(1100ms * var(--mrx-sh-speed)) ease calc(var(--mrx-sh-start) + 1000ms * var(--mrx-sh-speed)),
			transform calc(1200ms * var(--mrx-sh-speed)) var(--mrx-sh-out) calc(var(--mrx-sh-start) + 1000ms * var(--mrx-sh-speed)),
			filter calc(1100ms * var(--mrx-sh-speed)) ease calc(var(--mrx-sh-start) + 1000ms * var(--mrx-sh-speed));
	}

	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__actions > * {
		transition:
			opacity calc(900ms * var(--mrx-sh-speed)) ease calc(var(--mrx-sh-start) + (1180ms + var(--i, 0) * 120ms) * var(--mrx-sh-speed)),
			transform calc(1100ms * var(--mrx-sh-speed)) var(--mrx-sh-out) calc(var(--mrx-sh-start) + (1180ms + var(--i, 0) * 120ms) * var(--mrx-sh-speed));
	}

	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__outline {
		transition:
			opacity calc(1000ms * var(--mrx-sh-speed)) ease calc(var(--mrx-sh-start) + 1100ms * var(--mrx-sh-speed)),
			transform calc(1400ms * var(--mrx-sh-speed)) var(--mrx-sh-out) calc(var(--mrx-sh-start) + 1100ms * var(--mrx-sh-speed));
	}

	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__stats::before {
		transition: transform calc(1100ms * var(--mrx-sh-speed)) var(--mrx-sh-curtain) calc(var(--mrx-sh-start) + 1300ms * var(--mrx-sh-speed));
	}

	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__stat {
		transition:
			opacity calc(900ms * var(--mrx-sh-speed)) ease calc(var(--mrx-sh-start) + (1420ms + var(--i, 0) * 110ms) * var(--mrx-sh-speed)),
			transform calc(1100ms * var(--mrx-sh-speed)) var(--mrx-sh-out) calc(var(--mrx-sh-start) + (1420ms + var(--i, 0) * 110ms) * var(--mrx-sh-speed));
	}

	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__badge {
		transition:
			opacity calc(900ms * var(--mrx-sh-speed)) ease calc(var(--mrx-sh-start) + 1350ms * var(--mrx-sh-speed)),
			transform calc(1300ms * var(--mrx-sh-speed)) var(--mrx-sh-out) calc(var(--mrx-sh-start) + 1350ms * var(--mrx-sh-speed)),
			filter calc(900ms * var(--mrx-sh-speed)) ease calc(var(--mrx-sh-start) + 1350ms * var(--mrx-sh-speed));
	}

	.mrx-sh.is-playing:not(.is-settled) .mrx-sh__seal {
		transition:
			opacity calc(900ms * var(--mrx-sh-speed)) ease calc(var(--mrx-sh-start) + 1500ms * var(--mrx-sh-speed)),
			transform calc(1600ms * var(--mrx-sh-speed)) var(--mrx-sh-out) calc(var(--mrx-sh-start) + 1500ms * var(--mrx-sh-speed));
	}

	/* Hints only for the length of the intro; dropped once it has landed. */
	.mrx-sh.is-armed:not(.is-settled) .mrx-sh__frame img,
	.mrx-sh.is-armed:not(.is-settled) .mrx-sh__w-in,
	.mrx-sh.is-armed:not(.is-settled) .mrx-sh__badge {
		will-change: transform;
	}
}

/* -------------------------------------------------------------------------
 * Container guardrails
 *
 * These fire on the band's own width. They set properties rather than the
 * custom properties the Elementor controls write to, so they stay in charge
 * without an !important.
 * ---------------------------------------------------------------------- */

@container mrxsh (max-width: 900px) {
	.mrx-sh-wrap .mrx-sh__grid,
	.mrx-sh-media-left .mrx-sh-wrap .mrx-sh__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "content" "media";
		gap: clamp(48px, 10cqi, 72px);
	}

	.mrx-sh-stack-media .mrx-sh-wrap .mrx-sh__grid {
		grid-template-areas: "media" "content";
	}

	.mrx-sh-wrap .mrx-sh__media {
		justify-self: center;
		width: min(100%, 520px);
	}

	/* The badge and seal come inside the frame once there is no column beside it to overhang. */
	.mrx-sh-wrap .mrx-sh__badge,
	.mrx-sh-media-left .mrx-sh-wrap .mrx-sh__badge {
		right: auto;
		bottom: 18px;
		left: 18px;
	}

	.mrx-sh-wrap .mrx-sh__seal,
	.mrx-sh-media-left .mrx-sh-wrap .mrx-sh__seal {
		width: min(var(--mrx-sh-seal-size), 96px);
		height: min(var(--mrx-sh-seal-size), 96px);
		top: auto;
		right: -14px;
		bottom: 22%;
		left: auto;
	}
}

@container mrxsh (max-width: 560px) {
	.mrx-sh-wrap .mrx-sh {
		padding: 56px 20px 64px;
	}

	.mrx-sh-wrap .mrx-sh__title {
		font-size: clamp(34px, 10.5cqi, 48px);
	}

	.mrx-sh-wrap .mrx-sh__desc {
		font-size: 16px;
		margin-bottom: 32px;
	}

	.mrx-sh-wrap .mrx-sh__actions {
		gap: 18px 28px;
		margin-bottom: 44px;
	}

	.mrx-sh-wrap .mrx-sh__btn {
		gap: 12px;
		padding-left: 24px;
	}

	/* The hairlines would run straight through the words at this width. */
	.mrx-sh-wrap .mrx-sh__lines {
		display: none;
	}

	.mrx-sh-wrap .mrx-sh__stats {
		grid-template-columns: repeat(var(--mrx-sh-stat-cols, 3), minmax(0, 1fr));
		row-gap: 22px;
	}

	.mrx-sh-wrap .mrx-sh__stat {
		padding-right: 12px;
		padding-left: 12px;
	}

	/* Four or more go two to a row here, whatever the wide layout was. */
	.mrx-sh-wrap .mrx-sh__stats--many {
		--mrx-sh-stat-cols: 2;
	}

	.mrx-sh-wrap .mrx-sh__stats--many > .mrx-sh__stat:nth-child(n) {
		padding-left: 12px;
		border-left: 1px solid var(--mrx-sh-line);
	}

	.mrx-sh-wrap .mrx-sh__stats--many > .mrx-sh__stat:nth-child(2n+1),
	.mrx-sh-wrap .mrx-sh__stats[data-cols="1"] > .mrx-sh__stat,
	.mrx-sh-wrap .mrx-sh__stats[data-cols="2"] > .mrx-sh__stat:nth-child(2n+1),
	.mrx-sh-wrap .mrx-sh__stats[data-cols="3"] > .mrx-sh__stat:nth-child(3n+1) {
		padding-left: 0;
	}

	.mrx-sh-wrap .mrx-sh__stats--many > .mrx-sh__stat:nth-child(2n+1) {
		border-left: 0;
	}

	.mrx-sh-wrap .mrx-sh__stat-value {
		font-size: 30px;
	}

	.mrx-sh-wrap .mrx-sh__stat-label {
		font-size: 10px;
		letter-spacing: 1.2px;
	}

	.mrx-sh-wrap .mrx-sh__outline,
	.mrx-sh-media-left .mrx-sh-wrap .mrx-sh__outline {
		transform: translate(10px, 10px);
	}

	.mrx-sh-wrap .mrx-sh__badge {
		gap: 12px;
		bottom: 14px;
		left: 14px;
		padding: 12px 16px 12px 14px;
		border-radius: 16px;
	}

	.mrx-sh-wrap .mrx-sh__badge-value {
		font-size: 34px;
	}

	.mrx-sh-wrap .mrx-sh__seal,
	.mrx-sh-media-left .mrx-sh-wrap .mrx-sh__seal {
		width: min(var(--mrx-sh-seal-size), 84px);
		height: min(var(--mrx-sh-seal-size), 84px);
		right: -8px;
	}
}

/* -------------------------------------------------------------------------
 * Accessibility & print
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mrx-sh *,
	.mrx-sh *::before,
	.mrx-sh *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}

	.mrx-sh__frame img,
	.mrx-sh__outline,
	.mrx-sh__badge,
	.mrx-sh__seal {
		translate: none !important;
	}
}

@media print {
	.mrx-sh {
		min-height: 0;
		background: none;
	}

	.mrx-sh__ambient,
	.mrx-sh__seal,
	.mrx-sh__sheen,
	.mrx-sh__outline {
		display: none;
	}
}