/*
 * Meld: Engine, the kit's media: the video button and its pop-up player, the
 * story section, and the homepage backdrop (a background video behind the
 * menu, the hero and the trust strip).
 *
 * Loaded right after kit.css and before the rebuilt sections' sheet, so its
 * rules meet the kit's on equal terms (a tie goes to this file) and a rebuilt
 * section can still restyle what it holds. The kit's own rules hold here: no
 * bare element selectors, theming only through the custom properties.
 *
 * The backdrop reaches into three section roots it does not own: the header,
 * the hero and the trust strip must be see-through over the video. Those
 * roots paint their own background, as .k-sec.k-<id>--<variant> in the kit
 * and as .k-<id>--<vid>.k-sec[data-k] in a rebuilt section (or heavier still:
 * a rebuilt root may chain more of its own classes). So those rules go
 * through the section's id (#k-header, #k-hero, #k-trust), which outweighs
 * any run of classes, and they hold only under html:has(.k-backdrop): a page
 * without a backdrop, such as every inner page sharing the header, keeps its
 * solid header. The layer itself is matched by its own k-backdrop classes,
 * which only a page with a backdrop has; a browser without :has() gets no
 * backdrop at all rather than a video over sections it cannot clear.
 */

/* ------------------------------------------------------------------ Tokens */

:root {
	/* The sixth colour: labels and dark bands. The site's deep colour when set. */
	--k-alt: var(--se-color-deep, color-mix(in srgb, var(--k-accent) 35%, var(--k-ink)));
	--k-alt-deep: color-mix(in srgb, var(--k-alt) 60%, #0b141c);
	--k-accent-tile: color-mix(in srgb, var(--k-accent) 45%, var(--k-bg));
	--k-accent-on-dark: color-mix(in srgb, var(--k-accent) 50%, #fff);
}

/* ------------------------------------------------------------ Video player */

/*
 * The section's picture. With a video, a white pill with the brand's play
 * disc sits in the bottom-right corner, over the room and never over a face,
 * and a light shade lets it read on a bright photo.
 */
.k-sec .k-video {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: var(--k-photo-radius);
	background: var(--k-soft);
	box-shadow: var(--k-shadow);
	aspect-ratio: 16 / 9;
}

.k-sec .k-video__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.k-sec .k-video:has(.k-video__play)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--k-ink) 14%, transparent);
	pointer-events: none;
}

.k-sec .k-video:has(.k-video__play):hover .k-video__img {
	transform: scale(1.03);
}

.k-sec .k-video__play {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	min-height: 3.5rem;
	margin: 0;
	padding: 0.5rem 1.5rem 0.5rem 0.5rem;
	border: 0;
	border-radius: var(--k-radius-lg);
	background: var(--k-bg);
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--k-bg) 32%, transparent), 0 18px 40px -16px color-mix(in srgb, var(--k-ink) 55%, transparent);
	color: var(--k-ink-strong);
	font: 600 1rem/1.2 var(--k-font-body);
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.k-sec .k-video__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: max(0px, calc(var(--k-radius-lg) - 7px));
	background: var(--k-go);
	color: var(--k-on-brand);
}

.k-sec .k-video__icon svg {
	display: block;
	margin-left: 2px;
}

.k-sec .k-video__play:hover,
.k-sec .k-video__play:focus-visible {
	box-shadow: 0 0 0 12px color-mix(in srgb, var(--k-bg) 40%, transparent), 0 18px 40px -16px color-mix(in srgb, var(--k-ink) 55%, transparent);
	transform: scale(1.04);
}

.k-sec .k-video__play:focus-visible {
	outline: 3px solid var(--k-bg);
	outline-offset: 14px;
}

/* A video without a photo: the button alone, in the middle of the frame. */
.k-sec .k-video:not(:has(.k-video__img)) .k-video__play {
	inset: 0;
	width: fit-content;
	height: fit-content;
	margin: auto;
}

/* Phone: the play disc alone; its words stay as the button's name. */
@media (max-width: 479.98px) {
	.k-sec .k-video__play {
		right: 0.75rem;
		bottom: 0.75rem;
		min-height: 0;
		padding: 0.25rem;
	}

	.k-sec .k-video__play:focus-visible {
		outline-offset: 4px;
	}

	.k-sec .k-video__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* The pop-up player, one per page, made by kit-media.js on the first press.
   As wide as the window allows, and never taller than it (a phone on its side). */
.k-video__dialog.k-video__dialog {
	width: min(60rem, calc(100vw - 2rem), calc((100vh - 5.5rem) * 16 / 9));
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 3.5rem 0 0;
	overflow: visible;
	border: 0;
	background: transparent;
	color: var(--k-ink-strong);
}

.k-video__dialog::backdrop {
	/* Older browsers do not pass custom properties to ::backdrop: a fallback ink. */
	background: color-mix(in srgb, var(--k-ink, #26302e) 86%, transparent);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.k-video__dialog .k-video__frame {
	overflow: hidden;
	border-radius: var(--k-radius-lg);
	background: #000;
	aspect-ratio: 16 / 9;
}

.k-video__dialog .k-video__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.k-video__dialog .k-video__close {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--k-bg);
	color: var(--k-ink-strong);
	cursor: pointer;
}

.k-video__dialog .k-video__close:focus-visible {
	outline: 3px solid var(--k-second);
	outline-offset: 3px;
}

/* The page stays put behind the open player. */
html.k-video-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.k-sec .k-video__img,
	.k-sec .k-video__play {
		transition: none;
	}

	.k-sec .k-video:has(.k-video__play):hover .k-video__img,
	.k-sec .k-video__play:hover,
	.k-sec .k-video__play:focus-visible {
		transform: none;
	}
}

/* ------------------------------------------------------------------- Story */

/*
 * One picture or video of the practice, a short welcome and one button.
 * "split" sets the picture on the left and "flip" on the right, the picture
 * taking the wider column.
 */
.k-sec.k-story {
	background: var(--k-bg);
}

.k-story .k-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.25rem;
	align-items: center;
}

.k-story .k-story__media,
.k-story .k-story__body {
	min-width: 0;
}

.k-story .k-head {
	max-width: none;
	margin-bottom: 0;
}

/* The label above the heading, in the deep colour after an accent dot. */
.k-story .k-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 1rem;
	color: var(--k-alt);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.08em;
}

.k-story .k-eyebrow::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--k-accent);
}

.k-story .k-title {
	max-width: 16ch;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.k-story .k-lead {
	max-width: 34rem;
	margin-top: 1.25rem;
	font-size: 1.1875rem;
}

.k-story .k-story__cta {
	margin-top: 2rem;
}

/* One button: the brand pill with a white disc holding its arrow. */
.k-story .k-story__btn {
	position: relative;
	justify-content: flex-start;
	gap: 1rem;
	min-height: 3.25rem;
	padding: 0.5rem 0.5rem 0.5rem 1.75rem;
	border: 0;
	border-radius: var(--k-radius-lg);
	font-weight: 600;
	text-align: left;
}

.k-story .k-story__btn::after {
	content: "";
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: max(0px, calc(var(--k-radius-lg) - 7px));
	background: var(--k-bg);
}

.k-story .k-story__btn::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.5625rem;
	z-index: 1;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: -0.25rem;
	border-top: 2px solid var(--k-go);
	border-right: 2px solid var(--k-go);
	transform: rotate(45deg);
}

.k-story .k-story__btn:focus-visible {
	outline: 2px solid var(--k-brand-ink);
	outline-offset: 3px;
}

.k-sec.k-story--flip .k-video {
	border-radius: var(--k-photo-radius-alt);
}

@media (min-width: 900px) {
	.k-story--split .k-story__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: clamp(2.5rem, 5vw, 4.5rem);
	}

	.k-story--flip .k-story__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(2.5rem, 5vw, 4.5rem);
	}

	.k-story .k-story__grid--solo {
		grid-template-columns: minmax(0, 44rem);
	}
}

/* Phone: the button runs the full width, its arrow at the far end. */
@media (max-width: 479.98px) {
	.k-story .k-story__grid {
		gap: 1.75rem;
	}

	.k-story .k-story__btn {
		justify-content: space-between;
		width: 100%;
	}
}

/* ---------------------------------------------------------------- Backdrop */

/*
 * One page-level layer behind the menu, the hero and the trust strip, drawn
 * first in the page and placed from the top of the document (neither body nor
 * main is positioned). kit-media.js sets its height to the bottom of the last
 * section it spans (data-through) and the veil's stops (--pt-*) from the real
 * section boxes; the values here hold until it runs.
 *
 * The veil is the brand tint stop for stop: 24% behind the menu; 24, 18, 12
 * and 7% down the hero; 7, 4 and 1.5% to the page colour by 88% of the trust
 * strip. A mask sets how much video shows through it: about a fifth behind
 * the menu and the hero (alpha 0.80), the same across the width under 1100px.
 * From 1100px up the menu band stays at 0.80, the hero opens to 0.45 on the
 * right, and a second veil of the same colour, masked to the text column,
 * brings the left back up where the words sit. Either way the video fades out
 * with the tint, so everything below the trust strip is the plain page.
 */
.k-backdrop {
	--pt-head: 80px;
	--pt-ease: 160px;
	--pt-trust: 80%;
	--pt-trust-h: 20%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	max-width: none;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Two classes: the page's own img reset (.se-page img) outranks one and
   would stop the poster at its natural height. */
.k-backdrop .k-backdrop__video,
.k-backdrop .k-backdrop__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center 30%;
}

.k-backdrop .k-backdrop__poster {
	display: none;
}

.k-backdrop .k-backdrop__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--k-brand) 24%, var(--k-bg)) 0,
		color-mix(in srgb, var(--k-brand) 24%, var(--k-bg)) var(--pt-head),
		color-mix(in srgb, var(--k-brand) 18%, var(--k-bg)) calc(var(--pt-head) + (var(--pt-trust) - var(--pt-head)) * 0.4),
		color-mix(in srgb, var(--k-brand) 12%, var(--k-bg)) calc(var(--pt-head) + (var(--pt-trust) - var(--pt-head)) * 0.72),
		color-mix(in srgb, var(--k-brand) 7%, var(--k-bg)) var(--pt-trust),
		color-mix(in srgb, var(--k-brand) 4%, var(--k-bg)) calc(var(--pt-trust) + var(--pt-trust-h) * 0.35),
		color-mix(in srgb, var(--k-brand) 1.5%, var(--k-bg)) calc(var(--pt-trust) + var(--pt-trust-h) * 0.62),
		var(--k-bg) calc(var(--pt-trust) + var(--pt-trust-h) * 0.88),
		var(--k-bg) 100%);
	-webkit-mask-image: linear-gradient(180deg,
		rgba(0, 0, 0, 0.8000) 0,
		rgba(0, 0, 0, 0.8000) var(--pt-head),
		rgba(0, 0, 0, 0.8000) calc(var(--pt-head) + var(--pt-ease) * 0.125),
		rgba(0, 0, 0, 0.8000) calc(var(--pt-head) + var(--pt-ease) * 0.250),
		rgba(0, 0, 0, 0.8000) calc(var(--pt-head) + var(--pt-ease) * 0.375),
		rgba(0, 0, 0, 0.8000) calc(var(--pt-head) + var(--pt-ease) * 0.500),
		rgba(0, 0, 0, 0.8000) calc(var(--pt-head) + var(--pt-ease) * 0.625),
		rgba(0, 0, 0, 0.8000) calc(var(--pt-head) + var(--pt-ease) * 0.750),
		rgba(0, 0, 0, 0.8000) calc(var(--pt-head) + var(--pt-ease) * 0.875),
		rgba(0, 0, 0, 0.8000) calc(var(--pt-head) + var(--pt-ease) * 1.000),
		rgba(0, 0, 0, 0.8000) var(--pt-trust),
		rgba(0, 0, 0, 0.8857) calc(var(--pt-trust) + var(--pt-trust-h) * 0.35),
		rgba(0, 0, 0, 0.9571) calc(var(--pt-trust) + var(--pt-trust-h) * 0.62),
		rgba(0, 0, 0, 1.0000) calc(var(--pt-trust) + var(--pt-trust-h) * 0.88),
		rgba(0, 0, 0, 1.0000) 100%);
	mask-image: linear-gradient(180deg,
		rgba(0, 0, 0, 0.8000) 0,
		rgba(0, 0, 0, 0.8000) var(--pt-head),
		rgba(0, 0, 0, 0.8000) calc(var(--pt-head) + var(--pt-ease) * 0.125),
		rgba(0, 0, 0, 0.8000) calc(var(--pt-head) + var(--pt-ease) * 0.250),
		rgba(0, 0, 0, 0.8000) calc(var(--pt-head) + var(--pt-ease) * 0.375),
		rgba(0, 0, 0, 0.8000) calc(var(--pt-head) + var(--pt-ease) * 0.500),
		rgba(0, 0, 0, 0.8000) calc(var(--pt-head) + var(--pt-ease) * 0.625),
		rgba(0, 0, 0, 0.8000) calc(var(--pt-head) + var(--pt-ease) * 0.750),
		rgba(0, 0, 0, 0.8000) calc(var(--pt-head) + var(--pt-ease) * 0.875),
		rgba(0, 0, 0, 0.8000) calc(var(--pt-head) + var(--pt-ease) * 1.000),
		rgba(0, 0, 0, 0.8000) var(--pt-trust),
		rgba(0, 0, 0, 0.8857) calc(var(--pt-trust) + var(--pt-trust-h) * 0.35),
		rgba(0, 0, 0, 0.9571) calc(var(--pt-trust) + var(--pt-trust-h) * 0.62),
		rgba(0, 0, 0, 1.0000) calc(var(--pt-trust) + var(--pt-trust-h) * 0.88),
		rgba(0, 0, 0, 1.0000) 100%);
}

.k-backdrop .k-backdrop__veil--text {
	display: none;
}

@media (min-width: 1100px) {
	.k-backdrop .k-backdrop__veil {
		-webkit-mask-image: linear-gradient(180deg,
			rgba(0, 0, 0, 0.8000) 0,
			rgba(0, 0, 0, 0.8000) var(--pt-head),
			rgba(0, 0, 0, 0.7850) calc(var(--pt-head) + var(--pt-ease) * 0.125),
			rgba(0, 0, 0, 0.7453) calc(var(--pt-head) + var(--pt-ease) * 0.250),
			rgba(0, 0, 0, 0.6893) calc(var(--pt-head) + var(--pt-ease) * 0.375),
			rgba(0, 0, 0, 0.6250) calc(var(--pt-head) + var(--pt-ease) * 0.500),
			rgba(0, 0, 0, 0.5607) calc(var(--pt-head) + var(--pt-ease) * 0.625),
			rgba(0, 0, 0, 0.5047) calc(var(--pt-head) + var(--pt-ease) * 0.750),
			rgba(0, 0, 0, 0.4650) calc(var(--pt-head) + var(--pt-ease) * 0.875),
			rgba(0, 0, 0, 0.4500) calc(var(--pt-head) + var(--pt-ease) * 1.000),
			rgba(0, 0, 0, 0.4500) var(--pt-trust),
			rgba(0, 0, 0, 0.6857) calc(var(--pt-trust) + var(--pt-trust-h) * 0.35),
			rgba(0, 0, 0, 0.8821) calc(var(--pt-trust) + var(--pt-trust-h) * 0.62),
			rgba(0, 0, 0, 1.0000) calc(var(--pt-trust) + var(--pt-trust-h) * 0.88),
			rgba(0, 0, 0, 1.0000) 100%);
		mask-image: linear-gradient(180deg,
			rgba(0, 0, 0, 0.8000) 0,
			rgba(0, 0, 0, 0.8000) var(--pt-head),
			rgba(0, 0, 0, 0.7850) calc(var(--pt-head) + var(--pt-ease) * 0.125),
			rgba(0, 0, 0, 0.7453) calc(var(--pt-head) + var(--pt-ease) * 0.250),
			rgba(0, 0, 0, 0.6893) calc(var(--pt-head) + var(--pt-ease) * 0.375),
			rgba(0, 0, 0, 0.6250) calc(var(--pt-head) + var(--pt-ease) * 0.500),
			rgba(0, 0, 0, 0.5607) calc(var(--pt-head) + var(--pt-ease) * 0.625),
			rgba(0, 0, 0, 0.5047) calc(var(--pt-head) + var(--pt-ease) * 0.750),
			rgba(0, 0, 0, 0.4650) calc(var(--pt-head) + var(--pt-ease) * 0.875),
			rgba(0, 0, 0, 0.4500) calc(var(--pt-head) + var(--pt-ease) * 1.000),
			rgba(0, 0, 0, 0.4500) var(--pt-trust),
			rgba(0, 0, 0, 0.6857) calc(var(--pt-trust) + var(--pt-trust-h) * 0.35),
			rgba(0, 0, 0, 0.8821) calc(var(--pt-trust) + var(--pt-trust-h) * 0.62),
			rgba(0, 0, 0, 1.0000) calc(var(--pt-trust) + var(--pt-trust-h) * 0.88),
			rgba(0, 0, 0, 1.0000) 100%);
	}

	.k-backdrop .k-backdrop__veil--text {
		display: block;
		-webkit-mask-image: linear-gradient(90deg,
			rgba(0, 0, 0, 0.8182) 0,
			rgba(0, 0, 0, 0.8182) calc(50% + 140px),
			rgba(0, 0, 0, 0.6727) calc(50% + 195px),
			rgba(0, 0, 0, 0.4091) calc(50% + 255px),
			rgba(0, 0, 0, 0.1818) calc(50% + 345px),
			rgba(0, 0, 0, 0.0455) calc(50% + 480px),
			rgba(0, 0, 0, 0.0000) 100%),
			linear-gradient(180deg,
				rgba(0, 0, 0, 0.0000) 0,
				rgba(0, 0, 0, 0.0000) var(--pt-head),
				rgba(0, 0, 0, 0.1099) calc(var(--pt-head) + var(--pt-ease) * 0.125),
				rgba(0, 0, 0, 0.3374) calc(var(--pt-head) + var(--pt-ease) * 0.250),
				rgba(0, 0, 0, 0.5600) calc(var(--pt-head) + var(--pt-ease) * 0.375),
				rgba(0, 0, 0, 0.7333) calc(var(--pt-head) + var(--pt-ease) * 0.500),
				rgba(0, 0, 0, 0.8559) calc(var(--pt-head) + var(--pt-ease) * 0.625),
				rgba(0, 0, 0, 0.9369) calc(var(--pt-head) + var(--pt-ease) * 0.750),
				rgba(0, 0, 0, 0.9839) calc(var(--pt-head) + var(--pt-ease) * 0.875),
				rgba(0, 0, 0, 1.0000) calc(var(--pt-head) + var(--pt-ease) * 1.000),
				rgba(0, 0, 0, 1.0000) 100%);
		mask-image: linear-gradient(90deg,
			rgba(0, 0, 0, 0.8182) 0,
			rgba(0, 0, 0, 0.8182) calc(50% + 140px),
			rgba(0, 0, 0, 0.6727) calc(50% + 195px),
			rgba(0, 0, 0, 0.4091) calc(50% + 255px),
			rgba(0, 0, 0, 0.1818) calc(50% + 345px),
			rgba(0, 0, 0, 0.0455) calc(50% + 480px),
			rgba(0, 0, 0, 0.0000) 100%),
			linear-gradient(180deg,
				rgba(0, 0, 0, 0.0000) 0,
				rgba(0, 0, 0, 0.0000) var(--pt-head),
				rgba(0, 0, 0, 0.1099) calc(var(--pt-head) + var(--pt-ease) * 0.125),
				rgba(0, 0, 0, 0.3374) calc(var(--pt-head) + var(--pt-ease) * 0.250),
				rgba(0, 0, 0, 0.5600) calc(var(--pt-head) + var(--pt-ease) * 0.375),
				rgba(0, 0, 0, 0.7333) calc(var(--pt-head) + var(--pt-ease) * 0.500),
				rgba(0, 0, 0, 0.8559) calc(var(--pt-head) + var(--pt-ease) * 0.625),
				rgba(0, 0, 0, 0.9369) calc(var(--pt-head) + var(--pt-ease) * 0.750),
				rgba(0, 0, 0, 0.9839) calc(var(--pt-head) + var(--pt-ease) * 0.875),
				rgba(0, 0, 0, 1.0000) calc(var(--pt-head) + var(--pt-ease) * 1.000),
				rgba(0, 0, 0, 1.0000) 100%);
		-webkit-mask-composite: source-in;
		mask-composite: intersect;
	}
}

/*
 * The sections over the layer. Each one is positioned, so it paints above
 * the layer in page order whether or not the layer has been sized yet; the
 * header keeps its own sticky placement.
 */
html:has(.k-backdrop) main > .k-sec[data-k]:not(.k-header) {
	position: relative;
}

/*
 * See-through over the video: the header, the hero, and the trust strip when
 * the layer runs that far. Through the ids, for the reason at the top of this
 * file. A photo hero keeps its own dark band: on a phone its white words sit
 * below the photo, on that band, and would be lost on the light veil.
 */
html:has(.k-backdrop) #k-header.k-sec[data-k],
html:has(.k-backdrop) #k-hero.k-sec[data-k]:not(.k-hero--photo),
html:has(.k-backdrop[data-through="trust"]) #k-trust.k-sec[data-k] {
	border-color: transparent;
	background: transparent;
}

/* The sticky menu is see-through only at the very top of the page; once the
   page scrolls it paints the veil's top colour (brand 24%) solid. */
html.is-scrolled:has(.k-backdrop) #k-header.k-sec[data-k] {
	background: color-mix(in srgb, var(--k-brand) 24%, var(--k-bg));
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.k-backdrop) #k-header.k-sec[data-k] {
		transition: background-color 0.2s ease;
	}
}

/* Less motion: the still instead of the video, when there is a still. */
@media (prefers-reduced-motion: reduce) {
	.k-backdrop:has(.k-backdrop__poster) .k-backdrop__video {
		display: none;
	}

	.k-backdrop .k-backdrop__poster {
		display: block;
	}
}

@supports not selector(:has(*)) {
	.k-backdrop {
		display: none;
	}
}

@media print {
	.k-backdrop {
		display: none;
	}
}