/* ============================================================
   EVS Conference Speaker — Limited Viewing
   Front-end styles.

   Brand: Proxima Nova, pink #FF0E80 (primary), navy #06133D (secondary).

   Everything is scoped to .cslv-app (landing page) or .cslv-modal
   (lightboxes, which are printed in the footer and therefore live
   outside .cslv-app). Both roots declare the design tokens.

   "Proxima Nova A" is a licensed font: the stack picks it up when the
   site loads it and falls back to Helvetica/Arial otherwise. It is
   forced with !important so theme and page-builder rules cannot
   override it inside the plugin's own markup.

   Layout system
   -------------
   One centred column at two widths:
       shell  1160px   header, video, calls to action, gallery
       prose   680px   hero copy
   The video shares the shell's edge rather than sitting slightly
   inside it: a 30px inset reads as a mistake, while a shared edge ties
   the header, the player and the gallery into one column.
   Vertical rhythm comes from --cslv-space-section so every band of the
   page breathes to the same beat. Spacing, radii, shadows and motion
   are all tokenised — nothing is hand-tuned per component.
   ============================================================ */

.cslv-app,
.cslv-modal,
.cslv-intro {
	/* --- Brand ------------------------------------------------ */
	--cslv-pink: #ff0e80;
	--cslv-pink-dark: #de006d;
	--cslv-pink-deep: #b8005a;
	--cslv-pink-light: #ff6aad;
	--cslv-pink-soft: #ffe4f0;
	--cslv-pink-tint: #fff4f9;
	--cslv-navy: #06133d;
	--cslv-navy-2: #14297a;
	--cslv-navy-soft: #eef1fa;
	--cslv-on-navy: #c9d2ef;

	/* --- Neutrals --------------------------------------------- */
	--cslv-bg: #ffffff;
	--cslv-surface: #f7f8fc;
	--cslv-line: #e9ebf4;
	--cslv-line-strong: #d5daea;
	--cslv-text: #06133d;
	--cslv-muted: #59627e;
	--cslv-faint: #8b93ad;

	/* --- Layout ----------------------------------------------- */
	--cslv-shell: 1160px;
	--cslv-prose: 800px;
	--cslv-gutter: clamp(16px, 4vw, 32px);
	--cslv-space-section: clamp(46px, 6vw, 78px);

	/* --- Shape ------------------------------------------------ */
	--cslv-radius-2xl: 32px;
	--cslv-radius-xl: 24px;
	--cslv-radius-lg: 18px;
	--cslv-radius: 14px;
	--cslv-radius-sm: 10px;
	--cslv-pill: 999px;

	/* --- Depth -------------------------------------------------
	   Two-part shadows: a tight contact shadow plus a wide, soft
	   ambient one, both tinted navy so nothing reads as grey mud. */
	--cslv-shadow-xs: 0 1px 2px rgba(6, 19, 61, 0.06);
	--cslv-shadow-sm: 0 1px 2px rgba(6, 19, 61, 0.05), 0 4px 14px rgba(6, 19, 61, 0.06);
	--cslv-shadow: 0 2px 6px rgba(6, 19, 61, 0.05), 0 14px 34px rgba(6, 19, 61, 0.09);
	--cslv-shadow-lg: 0 8px 20px rgba(6, 19, 61, 0.08), 0 36px 74px rgba(6, 19, 61, 0.16);
	--cslv-shadow-pink: 0 4px 12px rgba(255, 14, 128, 0.22), 0 12px 28px rgba(255, 14, 128, 0.22);
	--cslv-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.1);

	/* --- Type ------------------------------------------------- */
	--cslv-font: "Proxima Nova A", Helvetica, Arial, sans-serif;
	--cslv-track-caps: 0.14em;

	/* --- Motion ----------------------------------------------- */
	--cslv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--cslv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--cslv-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--cslv-t-fast: 160ms;
	--cslv-t: 260ms;
	--cslv-t-slow: 620ms;
}

/* Force the brand font inside the plugin's markup. */
.cslv-app,
.cslv-app *,
.cslv-app *::before,
.cslv-app *::after,
.cslv-modal,
.cslv-modal *,
.cslv-modal *::before,
.cslv-modal *::after,
.cslv-intro,
.cslv-intro * {
	font-family: var(--cslv-font) !important;
}

.e-con-inner {padding: 0 !important;}

/* ------------------------------------------------------------
   Local reset — themes and page builders style bare elements
   aggressively, so neutralise what we rely on.

   Every selector here is wrapped in :where() so the whole reset
   sits at element-level specificity (0,0,1). That matters: a reset
   written as `.cslv-app button` would be (0,1,1) and would quietly
   out-rank our own component classes like `.cslv-btn` (0,1,0),
   stripping the very styles it exists to protect.
   ------------------------------------------------------------ */

:where(.cslv-app, .cslv-modal, .cslv-intro),
:where(.cslv-app, .cslv-modal, .cslv-intro) * {
	box-sizing: border-box;
}

:where(.cslv-app, .cslv-modal) button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-align: inherit;
	text-transform: none;
	letter-spacing: inherit;
	box-shadow: none;
	border-radius: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

:where(.cslv-app, .cslv-modal) button:hover {
	background: none;
	box-shadow: none;
}

:where(.cslv-app, .cslv-modal, .cslv-intro) img {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

:where(.cslv-app, .cslv-modal) svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

:where(.cslv-app, .cslv-modal) :is(p, h1, h2, h3) {
	margin: 0;
	padding: 0;
}

:where(.cslv-app, .cslv-modal) a {
	text-decoration: none;
}

/* Spoken, not painted. Reach for this when a control already says which
   way it goes visually — an arrow, a chevron — but still owes a screen
   reader the word. */
.cslv-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Note: no border-radius here. The outline already follows each
   element's own corner radius, and setting one would square off
   the pill-shaped inputs the moment they take focus. */
.cslv-app :focus-visible,
.cslv-modal :focus-visible {
	outline: 3px solid var(--cslv-pink);
	outline-offset: 3px;
}

/* ------------------------------------------------------------
   Structural containment.

   The reset above covers inherited typography and bare controls.
   This block covers something sharper: themes routinely lay out the
   semantic landmarks by element name, and the plugin uses those same
   elements. Two real examples from the wild —

       header { position: absolute; left: 50%; transform: … }
       @media (max-width: 1024px) { nav { position: fixed; opacity: 0;
           visibility: hidden; pointer-events: none; … } }

   — which respectively lift the plugin's header out of flow on top of
   the hero, and turn both the landing-page nav and the player's
   prev/next nav into invisible off-canvas drawers on tablets down.

   It comes in two tiers, and the split is what keeps it safe.

   Tier one is scoped (0,2,0) — enough to beat the compound selectors
   themes really use, `body:not(.home) header` (0,1,2) included. It is
   restricted to properties no component of ours declares, so winning
   every cascade it enters costs nothing.

   Tier two is the properties components *do* own — box sizing and
   margins. Those stay at (0,1,0) and sit above the component rules in
   this file, so an element-level theme rule loses to them while our
   own later rules still win on source order.
   ------------------------------------------------------------ */

.cslv-app .cslv-header,
.cslv-app .cslv-nav,
.cslv-app .cslv-hero,
.cslv-app .cslv-stage,
.cslv-app .cslv-cta,
.cslv-app .cslv-ep-head,
.cslv-app .cslv-ep-nav,
.cslv-app .cslv-gallery,
.cslv-app .cslv-empty {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	z-index: auto;
	float: none;
	clear: none;
	transform: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	overflow: visible;
	line-height: inherit;
}

.nh-main-con {padding: 0 !important; margin: 0 !important;}

.cslv-header,
.cslv-nav,
.cslv-hero,
.cslv-stage,
.cslv-cta,
.cslv-ep-head,
.cslv-ep-nav,
.cslv-gallery,
.cslv-empty {
	width: auto;
	min-width: 0;
	max-width: none;
	height: auto;
	min-height: 0;
	max-height: none;
	margin: 0;
	background: none;
	box-shadow: none;
}

/* ------------------------------------------------------------
   App shell
   ------------------------------------------------------------ */

.cslv-app {
	position: relative;
	max-width: var(--cslv-shell);
	margin: 0 auto;
	padding: clamp(20px, 3vw, 32px) var(--cslv-gutter) clamp(56px, 8vw, 96px);

	/* Transparent, so the artwork on the page shows through the shell.
	   The shell is 1160px at most and the picture is a background, not
	   a panel: painted here it stopped at the column's edge and left
	   white margins down both sides of a wide screen. */
	background: transparent;
	color: var(--cslv-text);
	font-family: var(--cslv-font);
	font-size: 16px;
	line-height: 1.55;
	overflow-x: clip;
	isolation: isolate;
}

/* ------------------------------------------------------------
   The page's ground

   The artwork in public/images, edge to edge, behind everything.
   This stylesheet is only ever enqueued by the shortcode, so the
   rule reaches exactly the pages the landing page is on and no
   others.

   `html body` rather than `body`: the theme paints its own ground
   in a rule of the same weight, and at equal specificity the winner
   would come down to which stylesheet the site happens to print
   last. One extra element in the selector settles it without
   reaching for !important.

   Fixed attachment, because the page is far taller than the picture
   is: sized to the document, `cover` would scale a 16:9 graphic to a
   2000px page and blow up a narrow band of the middle. Anchored to
   the viewport instead, the whole composition is in view at every
   scroll position and the content travels over it.

   The colour stays underneath: if the file ever goes missing the
   page is white, not transparent.
   ------------------------------------------------------------ */


/* A touch browser is the exception: iOS Safari in particular does not
   honour a fixed background, sizing it to the element instead — the
   blown-up crop the rule above exists to avoid. There the picture is
   anchored to the top of the page, where its own composition sits,
   and travels with the content. */
@media (hover: none) {
	html body {
		background-attachment: scroll;
		background-position: center top;
	}
}

/* The hero used to sit on a pair of faint radial washes, there to
   keep a flat white page from reading as empty. The artwork behind
   the shell does that now, and stacking a pink gradient on a pink
   photograph only muddied both, so the wash is gone. */

/* ------------------------------------------------------------
   Header — a real bar: brand left, navigation right, hairline
   underneath so the hero has something to sit against.
   ------------------------------------------------------------ */

.cslv-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	flex-wrap: wrap;
	padding-bottom: clamp(16px, 2vw, 22px);
	border-bottom: 1px solid var(--cslv-line);
}

.cslv-brand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	transition: opacity var(--cslv-t) var(--cslv-ease);
}

.cslv-brand:hover,
.cslv-brand:focus-visible {
	opacity: 0.78;
}

/* Class-level (0,1,0) so a theme's bare `img { border: … }` cannot
   draw frames around the plugin's artwork. */
.cslv-app .cslv-brand-logo {
	width: clamp(100px, 6vw, 100px);
	height: clamp(100px, 6vw, 100px);
	object-fit: contain;
	border: 0;
}

.cslv-nav {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.6vw, 20px);
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* The first nav item is a quiet text link. One accent per bar keeps
   the pink call to action unambiguous. */
.cslv-app .cslv-nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	border-radius: var(--cslv-radius-sm);
	color: var(--cslv-navy);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--cslv-track-caps);
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--cslv-t) var(--cslv-ease);
}

.cslv-app .cslv-nav-link::after {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 9px;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--cslv-t) var(--cslv-ease-out);
}

.cslv-app .cslv-nav-link:hover,
.cslv-app .cslv-nav-link:focus-visible {
	color: var(--cslv-pink-deep);
}

.cslv-app .cslv-nav-link:hover::after,
.cslv-app .cslv-nav-link:focus-visible::after {
	transform: scaleX(1);
}

.cslv-app .cslv-nav-link--accent {
	padding: 0 22px;
	border-radius: var(--cslv-pill);
	background: var(--cslv-navy);
	color: #fff;
	box-shadow: var(--cslv-shadow-xs);
	transition:
		background-color var(--cslv-t) var(--cslv-ease),
		transform var(--cslv-t) var(--cslv-ease-out),
		box-shadow var(--cslv-t) var(--cslv-ease);
}

.cslv-app .cslv-nav-link--accent::after {
	display: none;
}

.cslv-app .cslv-nav-link--accent:hover,
.cslv-app .cslv-nav-link--accent:focus-visible {
	background: var(--cslv-pink);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--cslv-shadow-pink);
}

.cslv-app .cslv-nav-link--accent:active {
	transform: translateY(0);
	transition-duration: var(--cslv-t-fast);
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */

.cslv-hero {
	max-width: var(--cslv-prose);
	margin: 0 auto;
	padding: clamp(40px, 6vw, 74px) 0 clamp(28px, 4vw, 46px);
	text-align: center;
}

.cslv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: clamp(16px, 2vw, 22px) !important;
	padding: 7px 16px 7px 13px;
	border: 1px solid var(--cslv-pink-soft);
	border-radius: var(--cslv-pill);
	background: var(--cslv-pink-tint);
	color: var(--cslv-pink-deep);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
}

.cslv-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--cslv-pink);
}

/* The heading and its support line are two levels, not two lines of
   one heading, so each element declares the space above itself. That
   way the rhythm holds whether or not the support line is set. */
.cslv-headline {
	margin: 0 !important;
	color: var(--cslv-navy);
	font-size: clamp(2.3rem, 6vw, 4.1rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.032em;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Secondary by every measure that matters: a third of the headline's
   size, half its weight, sentence case against its caps, and the
   deeper pink rather than navy. It reads as the promise under the
   statement instead of a second line of it. */
.cslv-headline-sub {
	margin: clamp(10px, 1.4vw, 16px) 0 0 !important;
	color: var(--cslv-pink-deep);
	font-size: clamp(1.25rem, 2.8vw, 1.9rem);
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -0.008em;
}

.cslv-subheadline {
	max-width: 600px;
	margin: clamp(20px, 2.6vw, 30px) auto 0 !important;
	color: var(--cslv-muted);
	font-size: clamp(1rem, 1.35vw, 1.12rem);
	line-height: 1.62;
	text-wrap: pretty;
}

/* ------------------------------------------------------------
   Featured video stage
   ------------------------------------------------------------ */

.cslv-stage {
	position: relative;
	margin: 0 auto;
}

/* Soft floor beneath the card so it reads as lifted, not pasted on. */
.cslv-stage::after {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: -30px;
	height: 60px;
	z-index: -1;
	border-radius: 50%;
	background: rgba(6, 19, 61, 0.2);
	filter: blur(34px);
	opacity: 0.55;
	pointer-events: none;
	transition: opacity var(--cslv-t-slow) var(--cslv-ease), transform var(--cslv-t-slow) var(--cslv-ease);
}

.cslv-stage:hover::after {
	opacity: 0.72;
	transform: translateY(5px);
}

.cslv-stage-card {
	display: block;
	width: 100%;
	border-radius: var(--cslv-radius-2xl);
	transition: transform var(--cslv-t-slow) var(--cslv-ease-out);
	padding: 0 !important;
}

.cslv-stage-card:hover {
	transform: translateY(-4px);
}

.cslv-stage-card:active {
	transform: translateY(-1px);
	transition-duration: var(--cslv-t-fast);
}

.cslv-stage-media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 168px;
	overflow: hidden;
	border-radius: var(--cslv-radius-2xl);
	background: var(--cslv-navy);
	box-shadow: var(--cslv-shadow-lg), var(--cslv-ring);
}

.cslv-app .cslv-stage-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	transition: transform 1.1s var(--cslv-ease-out);
}

.cslv-stage-shade {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(58% 54% at 50% 44%, rgba(6, 19, 61, 0.04) 0%, rgba(6, 19, 61, 0.4) 100%),
		linear-gradient(to top, rgba(6, 19, 61, 0.86) 0%, rgba(6, 19, 61, 0.18) 42%, rgba(6, 19, 61, 0) 66%);
	transition: opacity var(--cslv-t-slow) var(--cslv-ease);
}

/* Cursor-tracked highlight. The coordinates are written to
   --cslv-mx / --cslv-my by the motion script; without it the light
   simply sits in the middle of the card. */
.cslv-stage-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(28% 44% at var(--cslv-mx, 50%) var(--cslv-my, 50%), rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--cslv-t-slow) var(--cslv-ease);
}

.cslv-stage-card:hover .cslv-stage-media::after {
	opacity: 1;
}

.cslv-stage-card:hover .cslv-stage-img,
.cslv-stage-card:focus-visible .cslv-stage-img {
	transform: scale(1.045);
}

.cslv-stage-card:hover .cslv-stage-shade,
.cslv-stage-card:focus-visible .cslv-stage-shade {
	opacity: 0.88;
}

/* The meta layer spans the whole frame: the title anchors bottom-left,
   the duration chip floats top-right. */
.cslv-stage-meta {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 10px;
	padding: clamp(20px, 3vw, 32px);
	text-align: left;
	pointer-events: none;
}

.cslv-stage-title {
	max-width: min(84%, 640px);
	color: #fff;
	font-size: clamp(1.15rem, 2vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.18;
	text-wrap: balance;
	text-shadow: 0 2px 18px rgba(6, 19, 61, 0.55);
	transition: transform var(--cslv-t-slow) var(--cslv-ease-out);
}

.cslv-stage-card:hover .cslv-stage-title {
	transform: translateY(-2px);
}

.cslv-stage-duration {
	position: absolute;
	top: clamp(20px, 3vw, 32px);
	right: clamp(20px, 3vw, 32px);
	padding: 6px 13px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--cslv-pill);
	background: rgba(6, 19, 61, 0.4);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.2;
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
}

/* Play badge */

.cslv-play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	margin: -33px 0 0 -33px;
	border-radius: 50%;
	background: var(--cslv-pink);
	color: #fff;
	box-shadow: var(--cslv-shadow-pink);
	transition: transform var(--cslv-t) var(--cslv-ease-out), background-color var(--cslv-t) var(--cslv-ease);
}

.cslv-play svg {
	width: 25px;
	height: 25px;
	margin-left: 3px;
	position: relative;
	z-index: 1;
}

.cslv-play--lg {
	width: 86px;
	height: 86px;
	margin: -43px 0 0 -43px;
}

.cslv-play--lg svg {
	width: 32px;
	height: 32px;
}

/* Halo: a whisper at rest, fully open on hover. */
.cslv-play::after {
	content: "";
	position: absolute;
	inset: -12px;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.86);
	transition: opacity var(--cslv-t-slow) var(--cslv-ease-out), transform var(--cslv-t-slow) var(--cslv-ease-out);
}

.cslv-play--lg::before {
	content: "";
	position: absolute;
	inset: -14px;
	border-radius: 50%;
	background: rgba(255, 14, 128, 0.26);
	animation: cslv-halo 3.8s var(--cslv-ease-out) infinite;
	pointer-events: none;
}

@keyframes cslv-halo {
	0%   { opacity: 0.4; transform: scale(0.9); }
	55%  { opacity: 0;   transform: scale(1.24); }
	100% { opacity: 0;   transform: scale(1.24); }
}

.cslv-stage-card:hover .cslv-play,
.cslv-stage-card:focus-visible .cslv-play {
	transform: scale(1.08);
	background: var(--cslv-pink-dark);
}

.cslv-stage-card:active .cslv-play {
	transform: scale(1.01);
	transition-duration: var(--cslv-t-fast);
}

.cslv-stage-card:hover .cslv-play::after,
.cslv-stage-card:focus-visible .cslv-play::after {
	opacity: 1;
	transform: scale(1);
}

/* Placeholder when a video has no thumbnail yet */

.cslv-thumb-fallback {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--cslv-navy) 0%, var(--cslv-navy-2) 100%);
}

.cslv-thumb-fallback::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 22% 28%, rgba(255, 14, 128, 0.3) 0%, transparent 46%),
		radial-gradient(circle at 78% 74%, rgba(255, 14, 128, 0.16) 0%, transparent 44%);
}

/* ------------------------------------------------------------
   Calls to action
   ------------------------------------------------------------ */

.cslv-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: clamp(32px, 4.5vw, 50px) 0 0;
}

/* The :is(.cslv-app, .cslv-modal) prefix on the button and input families
   is deliberate. It lifts them to (0,2,0) so container-scoped theme rules
   — `.entry-content button`, `.woocommerce input` and friends, all (0,1,1)
   — cannot repaint the plugin's controls. */

:is(.cslv-app, .cslv-modal) .cslv-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 15px 30px;
	overflow: hidden;
	border: 1.5px solid transparent;
	border-radius: var(--cslv-pill);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.11em;
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
	transition:
		transform var(--cslv-t) var(--cslv-ease-out),
		background-color var(--cslv-t) var(--cslv-ease),
		border-color var(--cslv-t) var(--cslv-ease),
		box-shadow var(--cslv-t) var(--cslv-ease),
		color var(--cslv-t) var(--cslv-ease);
}

:is(.cslv-app, .cslv-modal) .cslv-btn-icon {
	display: grid;
	place-items: center;
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	transition: transform var(--cslv-t) var(--cslv-ease-out);
}

:is(.cslv-app, .cslv-modal) .cslv-btn:hover .cslv-btn-icon,
:is(.cslv-app, .cslv-modal) .cslv-btn:focus-visible .cslv-btn-icon {
	transform: scale(1.12);
}

:is(.cslv-app, .cslv-modal) .cslv-btn--primary {
	background: var(--cslv-pink);
	border-color: var(--cslv-pink);
	color: #fff;
	box-shadow: var(--cslv-shadow-pink);
}

/* One slow sheen on hover — not a permanent shimmer. */
:is(.cslv-app, .cslv-modal) .cslv-btn--primary::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-18deg);
	opacity: 0;
	pointer-events: none;
}

:is(.cslv-app, .cslv-modal) .cslv-btn--primary:hover::before,
:is(.cslv-app, .cslv-modal) .cslv-btn--primary:focus-visible::before {
	animation: cslv-sheen 0.85s var(--cslv-ease-out) 1;
}

@keyframes cslv-sheen {
	0%   { left: -60%; opacity: 0; }
	18%  { opacity: 1; }
	100% { left: 115%; opacity: 0; }
}

:is(.cslv-app, .cslv-modal) .cslv-btn--primary:hover,
:is(.cslv-app, .cslv-modal) .cslv-btn--primary:focus-visible {
	background: var(--cslv-pink-dark);
	border-color: var(--cslv-pink-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(255, 14, 128, 0.26), 0 18px 38px rgba(255, 14, 128, 0.3);
}

:is(.cslv-app, .cslv-modal) .cslv-btn--ghost {
	background: #fff;
	border-color: var(--cslv-line-strong);
	color: var(--cslv-navy);
	box-shadow: var(--cslv-shadow-xs);
}

:is(.cslv-app, .cslv-modal) .cslv-btn--ghost:hover,
:is(.cslv-app, .cslv-modal) .cslv-btn--ghost:focus-visible {
	background: #fff;
	border-color: var(--cslv-navy);
	color: var(--cslv-navy);
	transform: translateY(-2px);
	box-shadow: var(--cslv-shadow-sm);
}

/* Press: everything settles back onto the surface. */
:is(.cslv-app, .cslv-modal) .cslv-btn:active:not(:disabled) {
	transform: translateY(0) scale(0.985);
	transition-duration: var(--cslv-t-fast);
}

:is(.cslv-app, .cslv-modal) .cslv-btn:disabled,
:is(.cslv-app, .cslv-modal) .cslv-btn[aria-busy="true"] {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ------------------------------------------------------------
   Gallery

   A soft panel rather than a hairline rule. The section used to sit
   flat on the page under a divider, which left the thumbnails looking
   like leftovers below the fold; giving them their own tinted ground
   makes the rail read as a deliberate second act.

   The tint is the brand pink at a few percent — a wash, not a colour.
   Everything that has to be read (titles, speakers, the caption) stays
   on near-white, so contrast is untouched and the page never darkens.

   Depth follows the eye instead of the layout: every card is the same
   width and sits on the same rhythm, and the one being watched comes
   forward while the rest sit back a few percent. Nothing moves in the
   flow, so the rail cannot reflow under the pointer.
   ------------------------------------------------------------ */

.cslv-gallery {
	/* Shared by the panel's padding and the mobile full-bleed, so the
	   rail can reach the panel's edge without the two drifting apart. */
	--cslv-gallery-pad: clamp(16px, 2.6vw, 34px);

	/* The panel's own ground at the height the cards sit, sampled
	   rather than guessed. The active card's ring is drawn against it. */
	--cslv-gallery-fade: #fffafc;

	/* Carousel geometry. The centre card is ~1.8× the side cards, and
	   the step between card centres follows from the three of them:
	   half the big card, the gap, half a small one. Change a width and
	   the spacing keeps itself honest. */
	/* Five rings, largest in the middle:
	   far · near · CENTRE · near · far
	   Each ring's position falls out of the widths either side of it,
	   so changing one width keeps every gap even on its own. */
	--cslv-tile-center: 330px;
	--cslv-tile-near: 194px;
	--cslv-tile-far: 120px;
	--cslv-tile-gap: 17px;

	--cslv-pos-1: calc(
		var(--cslv-tile-center) / 2 + var(--cslv-tile-gap) + var(--cslv-tile-near) / 2
	);
	--cslv-pos-2: calc(
		var(--cslv-pos-1) + var(--cslv-tile-near) / 2 + var(--cslv-tile-gap) + var(--cslv-tile-far) / 2
	);
	/* Where the hidden cards wait, one ring further out. */
	--cslv-pos-3: calc(var(--cslv-pos-2) + var(--cslv-tile-far) + var(--cslv-tile-gap));

	/* Caption block under the artwork. It does not scale with the card
	   — the type stays at its designed size on every tile — so the
	   track's height is the centre card's media plus this. */
	--cslv-tile-caption: 80px;

	position: relative;
	margin-top: var(--cslv-space-section);
	padding: clamp(28px, 3.6vw, 42px) var(--cslv-gallery-pad) clamp(22px, 2.8vw, 30px);
	/*! border: 1px solid var(--cslv-pink-soft); */
	border-radius: var(--cslv-radius-2xl);
	/*! background:
		radial-gradient(76% 60% at 50% 0%, rgba(255, 14, 128, 0.075) 0%, rgba(255, 14, 128, 0) 74%),
		linear-gradient(180deg, var(--cslv-pink-tint) 0%, #ffffff 76%); */
	box-shadow: 0 1px 2px rgba(6, 19, 61, 0.03), 0 18px 44px rgba(6, 19, 61, 0.055);
	text-align: center;
}
/* --- The carousel -------------------------------------------

   Five cards at a time, largest in the middle:

       far · near · CENTRE · near · far

   The cards themselves are untouched — same media, captions, ring,
   badges, hover and press. What changed is only where each one sits
   and how wide it is. Tiles are taken out of flow and placed from
   the centre outwards, so moving the carousel is a transform on a
   handful of elements rather than a reflow of the row.

   Each tile carries --cslv-sign (-1, 0 or 1) from the motion script
   and picks up its ring's distance from the class it is given, so
   the arithmetic that spaces the row lives here in one place rather
   than being recomputed in JavaScript on every step.

   The script reads .is-active, which the player controller has
   always owned; nothing about selection, clicks or playback changes
   hands here.
   ------------------------------------------------------------ */

.cslv-gallery-viewport {
	position: relative;

	/* clip, not hidden. `hidden` would make this a scroll container,
	   and the controller's scrollIntoView() on the active tile would
	   then quietly scroll the carousel sideways out of alignment.
	   `clip` scrolls for no one, and unlike `hidden` it allows the
	   other axis to stay visible so a hovered card can still lift. */
	overflow-x: clip;
	overflow-y: visible;
}

.cslv-gallery-track {
	position: relative;
	display: block;
	height: calc(var(--cslv-tile-center) * 0.5625 + var(--cslv-tile-caption));
	margin: 0;
	padding: 0;
	transition: height var(--cslv-t-slow) var(--cslv-ease-out);
}

/* Every tile is placed from the centre of the track: its ring gives
   the distance, its sign gives the side. */
.cslv-tile {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--cslv-tile-far);
	--cslv-offset: var(--cslv-pos-3);
	transform: translate(
		calc(-50% + (var(--cslv-sign, 1) * var(--cslv-offset))),
		-50%
	);
	transition:
		width var(--cslv-t-slow) var(--cslv-ease-out),
		transform var(--cslv-t-slow) var(--cslv-ease-out);
	z-index: 1;
}

/* The active card. Its ring, lift and full colour already come from
   the .is-active rules further down — all this adds is the width and
   the middle slot, which is what makes it read as the centre. */
.cslv-tile.is-center {
	width: var(--cslv-tile-center);
	--cslv-offset: 0px;
	z-index: 5;
}

.cslv-tile.is-near {
	width: var(--cslv-tile-near);
	--cslv-offset: var(--cslv-pos-1);
	z-index: 4;
}

.cslv-tile.is-far {
	width: var(--cslv-tile-far);
	--cslv-offset: var(--cslv-pos-2);
	z-index: 3;
}

/* Past the fifth card. They keep a slot one ring further out, so
   they arrive from the correct side rather than out of nowhere. */
.cslv-tile.is-out {
	visibility: hidden;
	pointer-events: none;
}

/* The seam.

   A card that has run off one end has to reappear at the other, and
   there is no honest way to travel that distance — it would sail
   back across the whole row. So the crossing is made instantly,
   without a transition, while the card is at the far edge or already
   hidden. With six videos or more it happens entirely out of sight;
   with fewer it reads as the card stepping round rather than
   flying. */
.cslv-tile.is-jumping {
	transition: none;
}

/* Depth by ring: the further from the middle, the further back. This
   is on the media, not the tile — the tile's opacity belongs to the
   entrance animation, and the two would fight over it. */
.cslv-tile.is-near .cslv-tile-media,
.cslv-tile.is-far .cslv-tile-media {
	transition: opacity var(--cslv-t) var(--cslv-ease), box-shadow var(--cslv-t) var(--cslv-ease);
}

.cslv-tile.is-near .cslv-tile-media {
	opacity: 0.92;
}

.cslv-tile.is-far .cslv-tile-media {
	opacity: 0.8;
}

.cslv-tile.is-near:hover .cslv-tile-media,
.cslv-tile.is-near:focus-visible .cslv-tile-media,
.cslv-tile.is-far:hover .cslv-tile-media,
.cslv-tile.is-far:focus-visible .cslv-tile-media {
	opacity: 1;
}

/* The outer pair is small enough that a caption under it would be
   type without a card. The artwork carries them. */
.cslv-tile.is-far .cslv-tile-info {
	display: none;
}

/* --- Caption -------------------------------------------------

   Under the rail, where the admin screen has always promised it would
   be. Plain type, not the hero's pill: a pill at the foot of a section
   full of clickable cards reads as one more control, and this one does
   nothing when you press it. ---------------------------------- */

.cslv-gallery-label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: clamp(16px, 2.2vw, 22px) 0 0 !important;
	color: var(--cslv-pink-deep);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.24em;
	line-height: 1;
	text-transform: uppercase;
}

/* --- Tiles --------------------------------------------------- */


/* Depth lives here rather than on the button: the button is the
   entrance animation's target and owns its own transform until the
   reveal finishes. Scaling this wrapper also carries each caption with
   its card, so type and image never drift apart. */
.cslv-tile-inner {
	display: block;
	transform: scale(0.94);
	opacity: 0.88;
	transition:
		transform var(--cslv-t) var(--cslv-ease-out),
		opacity var(--cslv-t) var(--cslv-ease);
}

.cslv-tile:hover .cslv-tile-inner,
.cslv-tile:focus-visible .cslv-tile-inner {
	transform: translateY(-6px) scale(1);
	opacity: 1;
}

.cslv-tile:active .cslv-tile-inner {
	transform: translateY(-2px) scale(1);
	transition-duration: var(--cslv-t-fast);
}

.cslv-tile-media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--cslv-radius-lg);
	background: var(--cslv-navy);
	box-shadow: 0 1px 2px rgba(6, 19, 61, 0.06), 0 10px 24px rgba(6, 19, 61, 0.1);
	transition: box-shadow var(--cslv-t) var(--cslv-ease);
}

.cslv-app .cslv-tile-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	transition: transform var(--cslv-t-slow) var(--cslv-ease-out), filter var(--cslv-t) var(--cslv-ease);
}

.cslv-tile-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(6, 19, 61, 0.58) 0%, rgba(6, 19, 61, 0) 58%);
	opacity: 0.9;
	transition: opacity var(--cslv-t) var(--cslv-ease), background var(--cslv-t) var(--cslv-ease);
}

.cslv-tile:hover .cslv-tile-media,
.cslv-tile:focus-visible .cslv-tile-media {
	box-shadow: 0 2px 6px rgba(6, 19, 61, 0.06), 0 18px 38px rgba(6, 19, 61, 0.14);
}

.cslv-tile:hover .cslv-tile-img,
.cslv-tile:focus-visible .cslv-tile-img {
	transform: scale(1.055);
}

.cslv-tile:hover .cslv-tile-shade,
.cslv-tile:focus-visible .cslv-tile-shade {
	opacity: 0.55;
}

/* --- Active tile ---------------------------------------------

   The one being watched comes forward: full colour, a step up in
   scale, and a pink ring. Every tile keeps its width, so the lift is
   painted and never laid out — the rail cannot reflow under the
   pointer while the visitor is choosing. ---------------------- */

.cslv-tile.is-active .cslv-tile-inner {
	transform: translateY(-2px) scale(1.03);
	opacity: 1;
}

.cslv-tile.is-active:hover .cslv-tile-inner,
.cslv-tile.is-active:focus-visible .cslv-tile-inner {
	transform: translateY(-8px) scale(1.03);
}

.cslv-tile.is-active .cslv-tile-media {
	box-shadow:
		0 0 0 3px var(--cslv-gallery-fade),
		0 0 0 4.5px var(--cslv-pink),
		0 4px 10px rgba(6, 19, 61, 0.08),
		0 14px 28px rgba(255, 14, 128, 0.13);
}

.cslv-tile-badge {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--cslv-navy);
	box-shadow: 0 2px 8px rgba(6, 19, 61, 0.26);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition:
		background-color var(--cslv-t) var(--cslv-ease),
		color var(--cslv-t) var(--cslv-ease),
		box-shadow var(--cslv-t) var(--cslv-ease),
		transform var(--cslv-t) var(--cslv-ease-out);
}

.cslv-tile-badge svg {
	width: 13px;
	height: 13px;
}

.cslv-tile:hover .cslv-tile-badge,
.cslv-tile:focus-visible .cslv-tile-badge {
	transform: scale(1.08);
}

.cslv-tile.is-active .cslv-tile-badge {
	background: var(--cslv-pink);
	color: #fff;
	box-shadow: 0 2px 10px rgba(255, 14, 128, 0.45);
}

/* --- Locked tile: deliberate, not broken -------------------- */

.cslv-tile.is-locked .cslv-tile-img {
	filter: saturate(0.45) brightness(0.78);
}

.cslv-tile.is-locked .cslv-tile-shade {
	background: linear-gradient(to top, rgba(6, 19, 61, 0.74) 0%, rgba(6, 19, 61, 0.3) 100%);
	opacity: 1;
}

.cslv-tile.is-locked:hover .cslv-tile-img,
.cslv-tile.is-locked:focus-visible .cslv-tile-img {
	filter: saturate(0.72) brightness(0.9);
}

.cslv-tile.is-locked:hover .cslv-tile-shade,
.cslv-tile.is-locked:focus-visible .cslv-tile-shade {
	opacity: 0.75;
}

.cslv-tile.is-locked .cslv-tile-badge {
	background: rgba(6, 19, 61, 0.6);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.cslv-tile.is-locked:hover .cslv-tile-badge,
.cslv-tile.is-locked:focus-visible .cslv-tile-badge {
	background: var(--cslv-pink);
	box-shadow: 0 2px 10px rgba(255, 14, 128, 0.4);
}

.cslv-tile.is-locked .cslv-tile-title {
	color: var(--cslv-muted);
}

/* --- Tile caption ------------------------------------------- */

.cslv-tile-info {
	position: relative;
	display: block;
	padding: 14px 6px 0;
	text-align: center;
}

.cslv-tile-title {
	display: -webkit-box;
	color: var(--cslv-navy);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.34;
	letter-spacing: -0.005em;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: color var(--cslv-t) var(--cslv-ease);
}

.cslv-tile:hover .cslv-tile-title,
.cslv-tile:focus-visible .cslv-tile-title,
.cslv-tile.is-active .cslv-tile-title {
	color: var(--cslv-pink-deep);
}

.cslv-tile-speaker {
	display: block;
	margin-top: 5px;
	color: var(--cslv-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* --- Photo gallery ------------------------------------------

   The rail carries photographs rather than videos. Everything the
   cards are made of is shared with the playlist rail that came
   before — the rings, the widths, the ring on the middle card, the
   hover lift — so what follows is only what a picture needs that a
   video card did not.

   No badge and no shade: both existed to say "this is a video and
   it will play", and neither is true here. A photograph is left to
   be a photograph, at full contrast, with nothing laid over it.
   ------------------------------------------------------------- */

/* Captions are the attachment's own, so a gallery may have none at
   all. When it has none the track stops reserving room for them
   instead of leaving a band of empty space under every card.

   Two classes deep on purpose: the responsive rules below set
   --cslv-tile-caption on .cslv-gallery, and at equal specificity
   the later rule would win. */
.cslv-gallery.cslv-gallery--bare {
	--cslv-tile-caption: 0px;
}

/* A picture needs no gradient over it — there is no text to lift
   off the artwork, and the shade only greyed the photograph. The
   media keeps its ground for the moment before the image lands. */
.cslv-tile--photo .cslv-tile-media {
	background: var(--cslv-navy);
}

/* The dimming by ring is what gives the rail its depth, and on
   photographs it does the same job with a lighter hand: the outer
   pair sits back without the picture reading as faded. */
.cslv-tile--photo.is-near .cslv-tile-media {
	opacity: 0.95;
}

.cslv-tile--photo.is-far .cslv-tile-media {
	opacity: 0.86;
}

/* The centre picture is the one being looked at, so it gets the
   detail: no scale on hover fighting the ring, just the lift the
   card already has. */
.cslv-tile--photo.is-active .cslv-tile-img {
	transform: none;
}

.cslv-tile--photo.is-active:hover .cslv-tile-img,
.cslv-tile--photo.is-active:focus-visible .cslv-tile-img {
	transform: scale(1.03);
}

/* A caption under a photograph is a label, not a title: lighter,
   set in the same measure as the card so it cannot outgrow it. */
.cslv-tile--photo .cslv-tile-title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--cslv-muted);
}

.cslv-tile--photo:hover .cslv-tile-title,
.cslv-tile--photo:focus-visible .cslv-tile-title,
.cslv-tile--photo.is-active .cslv-tile-title {
	color: var(--cslv-navy);
}

/* ------------------------------------------------------------
   Empty state
   ------------------------------------------------------------ */

.cslv-empty {
	max-width: 620px;
	margin: clamp(24px, 4vw, 40px) auto 0;
	padding: clamp(40px, 6vw, 60px) 28px;
	border: 1.5px dashed var(--cslv-line-strong);
	border-radius: var(--cslv-radius-xl);
	background: var(--cslv-surface);
	text-align: center;
}

/* Likewise: `p { margin: … !important }` is a real theme pattern. */
.cslv-empty-title {
	margin: 0 !important;
	color: var(--cslv-navy);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.cslv-empty-note {
	margin-top: 8px !important;
	color: var(--cslv-muted);
	font-size: 14px;
}

.cslv-empty-note a {
	color: var(--cslv-pink-deep);
	font-weight: 700;
	text-decoration: underline;
}

/* ============================================================
   Page-load choreography

   The reveal states only exist once `html.cslv-motion` is set,
   and that class is written by JavaScript. With scripting off —
   or if the motion file never arrives — the page renders in its
   final state with no hidden content and no dependency on JS.
   ============================================================ */

.cslv-intro {
	display: none;
}

html.cslv-motion .cslv-intro {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: grid;
	place-items: center;
}

html.cslv-motion.cslv-intro-lock,
html.cslv-motion.cslv-intro-lock body {
	overflow: hidden;
}

/* ------------------------------------------------------------
   The intro logo

   The badge itself is three clipped copies of the uploaded
   artwork, revealed in turn. Nothing here draws or restyles the
   logo: the colours, the lettering and the spacing are the
   file's own, so the assembled result is the original exactly.

   Around it, two construction elements build the frame first —
   a point that opens into a hairline ring at the radius the
   lettering sits on. They are scaffolding and are gone before
   the badge completes.

   One rule governs the artwork throughout: the frame never
   changes size and no part of the logo is ever transformed.
   Every step on the artwork is opacity. The only transform on
   the mark is the flight to the header, which is one continuous
   move rather than a resize followed by a jump.
   ------------------------------------------------------------ */

.cslv-intro-mark {
	position: relative;
	z-index: 1;
	width: clamp(148px, 19vw, 196px);
	/* Height follows the artwork's own 130 × 134 ratio, so the
	   frame can never stretch or squash it. */
	aspect-ratio: 130 / 134;
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}

.cslv-intro-svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* transform-box: fill-box re-bases each shape's origin on itself,
   so `50% 50%` means its own centre in every engine. */
.cslv-mk-seed,
.cslv-mk-ring {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

/* --- 1. The point ------------------------------------------
   The sequence plays on the page's own light ground, so this
   opens as a mark of ink rather than a flare of light: a small
   solid point in the brand pink, no bloom. */

.cslv-mk-seed {
	fill: var(--cslv-pink);
	opacity: 0;
	animation: cslv-mk-seed 640ms var(--cslv-ease-out) both;
}

@keyframes cslv-mk-seed {
	0%   { opacity: 0;    transform: scale(0.2); }
	18%  { opacity: 0.95; transform: scale(1); }
	42%  { opacity: 0.85; transform: scale(0.66); }
	100% { opacity: 0;    transform: scale(0.24); }
}

/* --- 2. The ring -------------------------------------------
   Opens from the point out to r = 61 — the exact radius the
   logo's own ring lettering sits on — so the words arrive on a
   line that is already there. */

.cslv-mk-ring {
	fill: none;
	stroke: rgba(255, 14, 128, 0.42);
	stroke-width: 0.6;
	opacity: 0;
	animation: cslv-mk-ring 1000ms var(--cslv-ease-out) 200ms both;
}

@keyframes cslv-mk-ring {
	0%   { opacity: 0;   transform: scale(0.13); }
	22%  { opacity: 1;   transform: scale(0.62); }
	48%  { opacity: 1;   transform: scale(1); }
	72%  { opacity: 0.7; transform: scale(1); }
	100% { opacity: 0;   transform: scale(1); }
}

/* --- 3. The artwork ----------------------------------------
   Opacity only, in place, at final size. */

.cslv-mk-part {
	opacity: 0;
}

/* EMPOWERING, arriving on the ring. */
.cslv-mk-part--emp {
	animation: cslv-mk-fade 620ms var(--cslv-ease) 640ms both;
}

/* VIRTUAL SOLUTION. */
.cslv-mk-part--vs {
	animation: cslv-mk-fade 620ms var(--cslv-ease) 850ms both;
}

/* The complete badge, once the lettering has settled. */
.cslv-mk-part--disc {
	animation: cslv-mk-fade 660ms var(--cslv-ease) 1490ms both;
}

@keyframes cslv-mk-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* --- 4. The pass of light ----------------------------------
   One traverse, clipped to the disc, after the badge is whole.
   It leaves nothing behind. */

.cslv-mk-sweep {
	opacity: 0;
	animation: cslv-mk-sweep 680ms var(--cslv-ease-inout) 2080ms both;
}

@keyframes cslv-mk-sweep {
	0%   { opacity: 0; transform: translateX(0); }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { opacity: 0; transform: translateX(210px); }
}

/* ------------------------------------------------------------
   Handoff

   The mark travels to the header on a single eased transform.
   The script writes the transform because only it can measure
   where the header logo sits at a given breakpoint.
   ------------------------------------------------------------ */

.cslv-intro.is-leaving {
	pointer-events: none;
}

.cslv-intro-mark.is-flying {
	transition: transform 820ms cubic-bezier(0.6, 0.01, 0.18, 1);
}

/* The crossfade into the header image. Both halves share the
   same duration and curve, and by this point both are the same
   file at the same size on the same spot — so the swap has
   nothing to give it away. */
.cslv-intro-mark.is-gone {
	opacity: 0;
	transition:
		transform 820ms cubic-bezier(0.6, 0.01, 0.18, 1),
		opacity 340ms var(--cslv-ease);
}

html.cslv-motion .cslv-app:not(.is-handed-off) .cslv-brand {
	opacity: 0;
}

html.cslv-motion .cslv-app.is-handed-off .cslv-brand {
	animation: cslv-brand-in 340ms var(--cslv-ease) both;
}

@keyframes cslv-brand-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* The header rule is held back too, so no stray hairline sits
   behind the logo while it plays, then draws in with the page. */
html.cslv-motion .cslv-app:not(.is-handed-off) .cslv-header {
	border-bottom-color: transparent;
}

html.cslv-motion .cslv-app.is-handed-off .cslv-header {
	transition: border-color 520ms var(--cslv-ease);
}

/* --- Reveal on approach ------------------------------------

   Every headline, paragraph, image, video and card is a reveal
   target. The motion script tags them with data-cslv-reveal, then
   an IntersectionObserver adds .is-in as each one comes within
   reach of the viewport — so a block animates at the moment the
   visitor arrives at it rather than all at once on load.

   The stagger is not written here. The script measures each batch
   as it enters and writes --cslv-reveal-delay per element, which
   keeps the cascade correct no matter how many videos the gallery
   holds or where the fold happens to fall.
   ------------------------------------------------------------ */

html.cslv-motion [data-cslv-reveal] {
	opacity: 0;
}

html.cslv-motion [data-cslv-reveal].is-in {
	animation: cslv-rise-in 720ms var(--cslv-ease-out) both;
	animation-delay: var(--cslv-reveal-delay, 0ms);
}

/* Cards fade in rather than rise in. The carousel owns each tile's
   transform — it is what places the card in its slot — so an entrance
   that animated transform would drag all three back to the centre for
   the length of the reveal and then snap them out. Opacity leaves the
   position alone, and the stagger still reads. */
html.cslv-motion [data-cslv-reveal="tile"].is-in {
	animation-name: cslv-fade;
	animation-duration: 620ms;
	background-color: unset !important;
	font-family: "Montserrat", Sans-serif;
	font-size: unset !important;
	font-weight: unset;
	border-radius: unset !important;
	padding: unset !important;
	border: unset !important;
}

/* The video gets the long one: it is the page's centre of gravity
   and can carry a slower, heavier landing than the copy around it. */
html.cslv-motion [data-cslv-reveal="stage"] {
	will-change: transform, opacity, filter;
}

html.cslv-motion [data-cslv-reveal="stage"].is-in {
	animation-name: cslv-stage-in;
	animation-duration: 1000ms;
}

/* Cleared by the script on animationend. */
html.cslv-motion [data-cslv-reveal].is-done {
	will-change: auto;
}

@keyframes cslv-rise-in {
	from { opacity: 0; transform: translate3d(0, 20px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes cslv-tile-in {
	from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.97); }
	to   { opacity: 1; transform: none; }
}

/* The hero video is the one element that earns a blur — it lands
   like a rack focus rather than a slide. */
@keyframes cslv-stage-in {
	from { opacity: 0; transform: translate3d(0, 30px, 0) scale(0.965); filter: blur(14px); }
	60%  { filter: blur(0); }
	to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ============================================================
   Modals
   ============================================================ */

.cslv-modal {
	position: fixed;
	inset: 0;
	z-index: 999990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 3vw, 32px);
	font-family: var(--cslv-font);
	font-size: 16px;
	line-height: 1.55;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.cslv-modal[hidden] {
	display: none;
}

/* The gate opens on top of the player, never behind it. */
.cslv-modal--lead {
	z-index: 999995;
}

.cslv-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(4, 10, 32, 0.84);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	backdrop-filter: blur(10px) saturate(120%);
	animation: cslv-fade 0.32s var(--cslv-ease);
}

.cslv-modal-dialog,
.cslv-lead-card {
	position: relative;
	z-index: 1;
	margin: auto;
	animation: cslv-rise 0.42s var(--cslv-ease-out);
}

@keyframes cslv-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes cslv-rise {
	from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.976); }
	to { opacity: 1; transform: none; }
}

/* Close button */

.cslv-modal .cslv-modal-close {
	position: absolute;
	top: -14px;
	right: -14px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--cslv-navy);
	box-shadow: var(--cslv-shadow);
	transition:
		transform var(--cslv-t) var(--cslv-ease-out),
		background-color var(--cslv-t) var(--cslv-ease),
		color var(--cslv-t) var(--cslv-ease);
	z-index: 3;
	padding: 0 !important;
}

.cslv-modal .cslv-modal-close svg {
	width: 17px;
	height: 17px;
}

.cslv-modal .cslv-modal-close:hover,
.cslv-modal .cslv-modal-close:focus-visible {
	background: var(--cslv-pink);
	color: #fff;
	transform: rotate(90deg);
}

.cslv-modal .cslv-modal-close:active {
	transform: rotate(90deg) scale(0.94);
	transition-duration: var(--cslv-t-fast);
}

/* ------------------------------------------------------------
   Player modal — a dark, cinematic shell so the picture is the
   brightest thing on screen.
   ------------------------------------------------------------ */

.cslv-player-dialog {
	width: 100%;
	max-width: 1080px;
	padding: clamp(14px, 1.6vw, 20px);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--cslv-radius-2xl);
	background: #f9e6e2;
	background: rgba(249, 230, 226, 0.88);
	box-shadow: var(--cslv-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cslv-player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--cslv-radius-lg);
	background: #05091c;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.cslv-player-stage,
.cslv-player-stage iframe,
.cslv-player-stage video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.cslv-player-stage video {
	object-fit: contain;
	background: #05091c;
}

.cslv-player-message {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(5, 9, 28, 0.94);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}

.cslv-player-message[hidden] {
	display: none;
}

/* Player bar: now playing + transport */

.cslv-player-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: clamp(16px, 2vw, 22px) 4px clamp(14px, 1.8vw, 20px);
}

.cslv-now {
	min-width: 0;
	flex: 1 1 260px;
}

.cslv-now-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	color: var(--cslv-pink-light);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.cslv-now-label::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cslv-pink);
	box-shadow: 0 0 0 4px rgba(255, 14, 128, 0.18);
}

/* The margin is restated here, not left to the reset: themes ship
   `h2 { margin: 0 0 2rem }` at the same specificity as the reset, and
   the winner would come down to stylesheet order.

   The :is() prefix is the same guard the buttons and inputs carry, and
   for the same reason: this theme paints every bare heading in
   `h1, h2, h3, h4, h5, h6 { color: … }`. At (0,1,0) the colour here was
   one stylesheet-order accident away from losing to it — and a heading
   the same colour as its ground is a heading that has disappeared. */
:is(.cslv-app, .cslv-modal) .cslv-now-title {
	margin: 0;
	/* Flagged, and only here: this heading disappearing into its own
	   ground is the one failure that leaves the player looking broken,
	   and a theme rule more specific than this selector would do it. */
	color: var(--cslv-navy) !important;
	font-size: clamp(1.1rem, 2.2vw, 1.55rem);
	font-weight: 800;
	letter-spacing: -0.022em;
	line-height: 1.2;
	text-wrap: balance;
}

.cslv-transport {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

.cslv-modal .cslv-transport-btn {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition:
		transform var(--cslv-t) var(--cslv-ease-out),
		background-color var(--cslv-t) var(--cslv-ease),
		border-color var(--cslv-t) var(--cslv-ease),
		color var(--cslv-t) var(--cslv-ease),
		box-shadow var(--cslv-t) var(--cslv-ease),
		opacity var(--cslv-t) var(--cslv-ease);
	padding: 0 !important;
}
.cslv-modal .cslv-transport-btn svg {
	width: 18px;
	height: 18px;
}

.cslv-modal .cslv-transport-btn:hover:not(:disabled),
.cslv-modal .cslv-transport-btn:focus-visible {
	border-color: rgba(255, 255, 255, 0.42);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	transform: translateY(-2px);
}

.cslv-modal .cslv-transport-btn:active:not(:disabled) {
	transform: translateY(0) scale(0.95);
	transition-duration: var(--cslv-t-fast);
}

.cslv-modal .cslv-transport-btn:disabled {
	opacity: 0.48;
	cursor: not-allowed;
}

.cslv-modal .cslv-transport-btn--play {
	width: 62px;
	height: 62px;
	border-color: var(--cslv-pink);
	background: var(--cslv-pink);
	color: #fff;
	box-shadow: var(--cslv-shadow-pink);
}

.cslv-modal .cslv-transport-btn--play svg {
	width: 21px;
	height: 21px;
}

.cslv-modal .cslv-transport-btn--play:hover:not(:disabled),
.cslv-modal .cslv-transport-btn--play:focus-visible {
	border-color: var(--cslv-pink-dark);
	background: var(--cslv-pink-dark);
	color: #fff;
	box-shadow: 0 6px 16px rgba(255, 14, 128, 0.3), 0 16px 34px rgba(255, 14, 128, 0.32);
}

.cslv-icon-play,
.cslv-icon-pause {
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	animation: cslv-glyph 220ms var(--cslv-ease-out);
}

.cslv-icon-play {
	margin-left: 3px;
}

@keyframes cslv-glyph {
	from { opacity: 0; transform: scale(0.7); }
	to   { opacity: 1; transform: none; }
}

/* Swap the glyph based on playback state. */
.cslv-transport-btn--play .cslv-icon-pause,
.cslv-transport-btn--play.is-playing .cslv-icon-play {
	display: none;
}

.cslv-transport-btn--play.is-playing .cslv-icon-pause {
	display: grid;
}

/* Description */

.cslv-description {
	padding: clamp(16px, 2vw, 22px) 4px 4px;
	color: rgba(201, 210, 239, 0.82);
	font-size: 15px;
	line-height: 1.68;
}

.cslv-description:empty {
	display: none;
}

.cslv-description p {
	margin: 0 0 12px !important;
	color: #555;
  font-size: 1.1rem;
}

.cslv-description p:last-child {
	margin-bottom: 0 !important;
}

.cslv-description a {
	color: var(--cslv-pink-light);
	text-decoration: underline;
}

.cslv-description :is(h1, h2, h3, h4, strong, b) {
	color: #fff;
}

/* ------------------------------------------------------------
   Lead capture modal — EVS pink card
   ------------------------------------------------------------ */

.cslv-lead-card {
	width: 100%;
	max-width: 470px;
	padding: clamp(34px, 5vw, 46px) clamp(24px, 4vw, 40px) clamp(28px, 4vw, 36px);
	border-radius: var(--cslv-radius-2xl);
	background:
		radial-gradient(120% 86% at 12% -4%, rgba(255, 106, 173, 0.85) 0%, rgba(255, 106, 173, 0) 54%),
		linear-gradient(162deg, var(--cslv-pink) 0%, var(--cslv-pink-dark) 62%, #c00560 100%);
	color: #fff;
	text-align: center;
	box-shadow:
		0 20px 60px rgba(255, 14, 128, 0.3),
		var(--cslv-shadow-lg),
		inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.cslv-modal .cslv-modal-close--lead {
	top: 14px;
	right: 14px;
	width: 38px;
	height: 38px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.cslv-modal .cslv-modal-close--lead:hover,
.cslv-modal .cslv-modal-close--lead:focus-visible {
	background: #fff;
	color: var(--cslv-pink);
}

.cslv-lead-icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto clamp(18px, 2.4vw, 24px);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.17);
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
}

.cslv-lead-icon svg {
	width: 28px;
	height: 28px;
}

.cslv-lead-title {
	margin-bottom: 38px !important;
	color: #fff;
	font-size: clamp(1.6rem, 4vw, 2.05rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.06;
	text-transform: uppercase;
	text-wrap: balance;
}

.cslv-lead-sub {
	margin: 0 auto clamp(22px, 3vw, 30px) !important;
	max-width: 340px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 14.5px;
	line-height: 1.58;
	text-wrap: pretty;
}

/* Form */

.cslv-form {
	display: block;
	margin: 0;
	text-align: left;
}

.cslv-field {
	margin-bottom: 14px;
}

.cslv-label {
	display: block;
	margin-bottom: 7px;
	padding-left: 4px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

:is(.cslv-app, .cslv-modal) .cslv-input {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 14px 20px;
	border: 2px solid transparent;
	border-radius: var(--cslv-pill);
	background: #fff;
	color: var(--cslv-navy);
	font-family: var(--cslv-font) !important;
	font-size: 16px; /* 16px keeps iOS from zooming on focus. */
	font-weight: 600;
	line-height: 1.3;
	box-shadow: 0 1px 2px rgba(6, 19, 61, 0.12);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--cslv-t) var(--cslv-ease), box-shadow var(--cslv-t) var(--cslv-ease);
}

:is(.cslv-app, .cslv-modal) .cslv-input::placeholder {
	color: #9aa3bd;
	font-weight: 500;
}

:is(.cslv-app, .cslv-modal) .cslv-input:focus {
	outline: none;
	border-color: var(--cslv-navy);
	box-shadow: 0 0 0 4px rgba(6, 19, 61, 0.2);
}

:is(.cslv-app, .cslv-modal) .cslv-input.has-error {
	border-color: #ffd400;
	box-shadow: 0 0 0 4px rgba(255, 212, 0, 0.28);
}

/* Honeypot — off-screen, never focusable. */
.cslv-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cslv-form-error {
	display: block;
	margin: 4px 0 12px !important;
	padding: 11px 16px;
	border-radius: var(--cslv-radius);
	background: rgba(6, 19, 61, 0.3);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
	animation: cslv-shake 420ms var(--cslv-ease);
}

@keyframes cslv-shake {
	0%, 100% { transform: translateX(0); }
	22%      { transform: translateX(-5px); }
	44%      { transform: translateX(4px); }
	68%      { transform: translateX(-2px); }
}

.cslv-form-error[hidden] {
	display: none;
}

:is(.cslv-app, .cslv-modal) .cslv-btn--submit {
	position: relative;
	width: 100%;
	margin-top: 6px;
	background: var(--cslv-navy);
	border-color: var(--cslv-navy);
	color: #fff;
	box-shadow: 0 8px 22px rgba(6, 19, 61, 0.32);
}

:is(.cslv-app, .cslv-modal) .cslv-btn--submit:hover:not(:disabled),
:is(.cslv-app, .cslv-modal) .cslv-btn--submit:focus-visible {
	background: #030c2a;
	border-color: #030c2a;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(6, 19, 61, 0.4);
}

.cslv-spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.32);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cslv-spin 0.7s linear infinite;
}

.cslv-btn--submit.is-busy .cslv-spinner {
	display: block;
}

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

.cslv-form-note {
	margin-top: 14px !important;
	color: rgba(255, 255, 255, 0.78);
	font-size: 12px;
	line-height: 1.45;
	text-align: center;
}

/* Body scroll lock while a modal is open. */
body.cslv-modal-open {
	overflow: hidden !important;
}

/* ============================================================
   Episode pages

   One episode at its own address: a heading, the video, and the
   way on to the next one. Built from the same tokens as the
   landing page, because it is the same site — the type scale, the
   radii, the two-part shadows and the pink are all borrowed, not
   restated.

   The gate is the same frame with the form where the video would
   be. It is deliberately not a barrier that looks like an error:
   the picture stays, dimmed and locked, and the form sits beside
   it as the way in.
   ============================================================ */

.cslv-app--episode {
	padding-bottom: clamp(40px, 6vw, 72px);
}

.cslv-ep-head {
	max-width: var(--cslv-prose);
	margin: 0 auto clamp(20px, 3vw, 30px);
	text-align: center;
}

.cslv-app .cslv-ep-title {
	margin: 10px 0 0 !important;
	color: var(--cslv-navy);
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-wrap: balance;
}

.cslv-app .cslv-ep-speaker {
	margin: 10px 0 0 !important;
	color: var(--cslv-muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: var(--cslv-track-caps);
	text-transform: uppercase;
}

/* --- The video ----------------------------------------------- */

.cslv-ep-stage {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--cslv-radius-2xl);
	background: var(--cslv-navy);
	box-shadow: var(--cslv-shadow-lg);
}

.cslv-app .cslv-ep-frame,
.cslv-app .cslv-ep-video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--cslv-navy);
}

.cslv-ep-video {
	object-fit: cover;
}

/*
 * The cover over Drive's pop-out button.
 *
 * Drive's preview player draws an "open in new window" control in its top
 * right corner and links it to the file in Drive — the one address a
 * viewer should never be handed. The frame is served from another origin,
 * so its chrome cannot be restyled from here: the corner is covered
 * instead, which both hides the button and takes the click.
 *
 * It wears the badge, so the corner reads as the brand signing the video
 * rather than as something painted out. The plate underneath stays fully
 * opaque — that is the part doing the work — and is big enough to cover
 * the button with room to spare, in case Drive moves it about.
 */
.cslv-app .cslv-frame-shield,
.cslv-modal .cslv-frame-shield {
	position: absolute;
	z-index: 3;
	top: 0;
	right: 0;
	display: block;
	width: 88px;
	height: 68px;
	background: #fffcf9 url(../images/main_logo.webp) 50% 50% / 52px auto no-repeat;
	border-bottom-left-radius: 16px;
	box-shadow: 0 4px 18px rgba(5, 9, 28, 0.32);
	cursor: default;
}

.cslv-ep-missing {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--cslv-on-navy);
	font-size: 14px;
}

.cslv-ep-copy {
	max-width: var(--cslv-prose);
	margin: clamp(22px, 3vw, 32px) auto 0;
	color: var(--cslv-muted);
	font-size: 16px;
	line-height: 1.7;
}

.cslv-app .cslv-ep-copy p {
	margin: 0 0 1em !important;
}

.cslv-app .cslv-ep-copy p:last-child {
	margin-bottom: 0 !important;
}

/* --- The gate ------------------------------------------------

   Picture on the left, form on the right, stacking to one column
   on a narrow screen. The card carries its own white ground so
   the inputs stay legible wherever the page's artwork happens to
   be light or dark behind it. */

.cslv-gate {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(18px, 3vw, 34px);
	align-items: center;
}

.cslv-gate-art {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--cslv-radius-2xl);
	background: var(--cslv-navy);
	box-shadow: var(--cslv-shadow);
}

.cslv-app .cslv-gate-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Deliberately held back: this is the episode they have not
	   unlocked, and it should read as waiting rather than playing. */
	filter: saturate(0.5) brightness(0.62);
}

.cslv-gate-lock {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--cslv-navy);
	box-shadow: 0 2px 10px rgba(6, 19, 61, 0.3);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.cslv-gate-lock svg {
	width: 26px;
	height: 26px;
}

.cslv-gate-panel {
	padding: clamp(22px, 3vw, 34px);
	border: 1px solid var(--cslv-pink-soft);
	border-radius: var(--cslv-radius-2xl);
	background: var(--cslv-bg);
	box-shadow: var(--cslv-shadow);
}

.cslv-app .cslv-gate-title {
	margin: 0 !important;
	color: var(--cslv-navy);
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.cslv-app .cslv-gate-note {
	margin: 8px 0 18px !important;
	color: var(--cslv-muted);
	font-size: 14.5px;
	line-height: 1.55;
}

/* The gate's form is a panel, not a popup: the fields sit on white
   rather than the popup's pink, so they take the page's own
   treatment instead of the modal's. */
.cslv-gate .cslv-label {
	color: var(--cslv-muted);
}

.cslv-gate .cslv-input {
	border-color: var(--cslv-line-strong);
	background: var(--cslv-surface);
	color: var(--cslv-navy);
}

.cslv-gate .cslv-input::placeholder {
	color: var(--cslv-faint);
}

.cslv-gate .cslv-form-note {
	color: var(--cslv-faint);
}

/* --- Previous / next ----------------------------------------- */

.cslv-ep-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: clamp(26px, 3.6vw, 40px);
}

.cslv-ep-nav .cslv-btn {
	min-width: 0;
}

@media (max-width: 860px) {
	.cslv-gate {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.cslv-ep-stage,
	.cslv-gate-art,
	.cslv-gate-panel {
		border-radius: var(--cslv-radius-xl);
	}

	.cslv-ep-nav {
		flex-direction: column-reverse;
		align-items: stretch;
	}
}

/* ============================================================
   Responsive
   ============================================================ */

/* Laptop: bring the five in before the outer pair reaches the
   panel's padding, so the whole row still sits clear of the edge. */
@media (max-width: 1100px) {
	.cslv-gallery {
		--cslv-tile-center: 290px;
		--cslv-tile-near: 172px;
		--cslv-tile-far: 106px;
		--cslv-tile-gap: 15px;
	}
}

@media (max-width: 900px) {
	.cslv-gallery {
		--cslv-tile-center: 230px;
		--cslv-tile-near: 136px;
		--cslv-tile-far: 84px;
		--cslv-tile-gap: 10px;
		--cslv-tile-caption: 76px;
	}

	.cslv-header {
		justify-content: center;
		gap: 14px;
	}

	.cslv-nav {
		justify-content: center;
		width: 100%;
	}

	.cslv-hero {
		padding-top: clamp(30px, 5vw, 44px);
	}

	.cslv-play--lg {
		width: 72px;
		height: 72px;
		margin: -36px 0 0 -36px;
	}

	.cslv-play--lg svg {
		width: 27px;
		height: 27px;
	}

	.cslv-player-bar {
		justify-content: center;
		text-align: center;
	}

	.cslv-now {
		flex-basis: 100%;
		text-align: center;
	}

	.cslv-now-label {
		justify-content: center;
	}
}

@media (max-width: 640px) {
	.cslv-app {
		padding-bottom: 48px;
	}

	.cslv-app .cslv-nav-link {
		min-height: 42px;
		font-size: 11px;
		letter-spacing: 0.1em;
	}

	.cslv-app .cslv-nav-link--accent {
		padding: 0 18px;
	}

	.cslv-stage-media,
	.cslv-stage-card {
		border-radius: var(--cslv-radius-xl);
	}

	.cslv-stage::after {
		bottom: -22px;
	}

	.cslv-stage-title {
		max-width: 100%;
	}

	/* Full-width, stacked CTAs are far easier to hit on a phone.
	   Keeps the :is() prefix so it still outranks the base rule —
	   a media query adds no specificity of its own. */
	:is(.cslv-app, .cslv-modal) .cslv-btn {
		width: 100%;
		padding: 15px 20px;
		font-size: 12.5px;
		letter-spacing: 0.08em;
	}

	.cslv-cta {
		gap: 10px;
	}

	/* A phone drops to three. Five across a 390px screen would leave
	   the outer pair a few pixels wide — present in the markup but
	   useless to look at — so they step out and the row keeps the
	   centre-focused read the brief asks for. */
	.cslv-gallery {
		border-radius: var(--cslv-radius-xl);
		--cslv-tile-center: 200px;
		--cslv-tile-near: 104px;
		--cslv-tile-far: 104px;
		--cslv-tile-gap: 10px;
		--cslv-tile-caption: 72px;
	}

	.cslv-tile.is-far {
		visibility: hidden;
		pointer-events: none;
	}

	/* The remaining pair becomes artwork only. There is no width left
	   for their captions: a phone clips them about halfway across, and
	   half a title reads as a rendering fault, not a peek. The centre
	   card — the one actually being offered — keeps its caption, and
	   they get theirs back at the next breakpoint up. */
	.cslv-tile.is-near .cslv-tile-info {
		display: none;
	}

	.cslv-tile-info {
		padding-top: 12px;
	}

	.cslv-modal {
		padding: 0;
		align-items: stretch;
	}

	/* Fill the screen rather than floating a small card. */
	.cslv-player-dialog {
		max-width: none;
		min-height: 100%;
		padding: 56px 14px 24px;
		border: 0;
		border-radius: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.cslv-modal .cslv-modal-close {
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
	}

	.cslv-player {
		border-radius: var(--cslv-radius);
	}

	.cslv-player-bar {
		padding: 16px 0 12px;
	}

	.cslv-transport {
		width: 100%;
		justify-content: center;
	}

	.cslv-description {
		padding: 16px 0 4px;
		font-size: 14.5px;
	}

	.cslv-lead-card {
		max-width: none;
		min-height: 100%;
		margin: 0;
		padding: 64px 22px 34px;
		border-radius: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.cslv-lead-icon {
		width: 54px;
		height: 54px;
		margin-bottom: 16px;
	}

	.cslv-lead-icon svg {
		width: 25px;
		height: 25px;
	}
}

/* Landscape phones: keep the video the priority. */
@media (max-height: 520px) and (orientation: landscape) {
	.cslv-player-dialog {
		padding: 12px 48px;
	}

	.cslv-description {
		display: none;
	}

	.cslv-player-bar {
		padding: 10px 0 4px;
	}
}

/* Coarse pointers never hover: keep the resting state honest. */
@media (hover: none) {
	.cslv-stage-media::after,
	.cslv-play--lg::before {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cslv-app *,
	.cslv-modal *,
	.cslv-intro * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.cslv-play--lg::before {
		display: none;
	}

	/* Never let a reveal state strand content off-screen. The script
	   already withholds the tagging under reduced motion; this is the
	   backstop for a preference that changes after the page loaded. */
	html.cslv-motion [data-cslv-reveal] {
		opacity: 1;
		filter: none;
		transform: none;
	}
}