/* Cursor Scrub Hero */

/* Track: the scrollable runway. With scroll scrub on, it is taller than the hero and the hero
   sticks to the top of the viewport while the visitor scrolls through the extra distance. */
.csh-track {
	--csh-height: 100vh;
	--csh-scroll-length: 100vh;
	position: relative;
	width: 100%;
	height: var(--csh-height);
}

.csh-track--scroll {
	height: calc(var(--csh-height) + var(--csh-scroll-length));
}

.csh {
	position: relative;
	width: 100%;
	height: var(--csh-height, 100vh);
	overflow: hidden;
	background: #000;
	touch-action: pan-y;
}

.csh-track--scroll .csh {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

.csh__video,
.csh__fallback,
.csh__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

/* Theme/Elementor resets (".elementor img { height: auto; max-width: 100% }") must not resize the poster:
   it has to cover the box exactly like the video, or the two are misaligned while the video loads
   and in the poster fallback (cards are registered against the box). */
.csh img.csh__fallback,
.csh canvas.csh__frame,
.csh video.csh__video {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.csh__video {
	opacity: 0;
	transition: opacity 400ms ease;
}

.csh__fallback {
	opacity: 1;
	transition: opacity 400ms ease;
}

/* Video ready and scrubbing: show the video, hide the poster */
.csh--ready .csh__video {
	opacity: 1;
}

.csh--ready .csh__fallback {
	opacity: 0;
}

/* Frame lock: the presented video frame is painted on a canvas in the same step that places the card,
   so plate and card can never differ by a frame. The <video> keeps decoding underneath, out of sight. */
.csh__frame {
	opacity: 0;
}

.csh--framed.csh--ready .csh__frame {
	opacity: 1;
}

.csh--framed.csh--ready .csh__video {
	opacity: 0;
}

/* Fallback mode (touch device with image fallback, reduced motion, or load error) */
.csh--fallback .csh__video,
.csh--fallback .csh__frame {
	opacity: 0;
	visibility: hidden;
}

.csh--fallback .csh__fallback {
	opacity: 1;
}

.csh__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.csh__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font: 500 16px/1.4 system-ui, sans-serif;
	background: repeating-linear-gradient(45deg, #1a1a1a 0 12px, #222 12px 24px);
}

/* ---------- Tracked cards (glass card / panel content) ----------
   .csh__card is the tracked box: the script sets its width/height (from the keyframes, mapped through
   the video's object-fit) and moves it with a transform (translate + optional rotation). It is a size
   container: everything inside is sized in --u (1% of the card width x content scale) and scales with
   the card. .csh__glass carries the look. Look "glass": own frosted surface. Look "panel": the video
   already shows a glass plate, so only a soft tint + the content sit exactly inside it. */
.csh .csh__card {
	--csh-accent: #ffcdb9;
	--csh-text: #fff;
	--csh-glass-rgb: 24, 14, 16;   /* dark glass: white text stays readable on bright screens */
	--csh-glass-alpha: 0.42;
	--csh-panel-alpha: 0;
	--csh-blur: 18px;
	--csh-border: rgba(255, 255, 255, 0.28);
	--csh-radius: 4.7cqw;
	--csh-scale: 1;
	--u: calc(1cqw * var(--csh-scale));
	position: absolute;
	left: 0;
	top: 0;
	width: 25%;
	aspect-ratio: 1.2;
	z-index: 2;
	container-type: inline-size;
	visibility: hidden;
	will-change: transform;
	transform-origin: 50% 50%;
	pointer-events: none;
}

.csh .csh__card.is-placed {
	visibility: visible;
}

.csh .csh__glass {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: calc(7 * var(--u));
	border-radius: var(--csh-radius);
	background: rgba(var(--csh-glass-rgb), var(--csh-glass-alpha));
	box-shadow: inset 0 0 0 1px var(--csh-border), 0 calc(3 * var(--u)) calc(9 * var(--u)) rgba(0, 0, 0, 0.35);
	-webkit-backdrop-filter: blur(var(--csh-blur)) saturate(1.15);
	backdrop-filter: blur(var(--csh-blur)) saturate(1.15);
	color: var(--csh-text);
	text-align: left;
	line-height: 1.2;
	overflow: hidden;
	pointer-events: none;
	text-shadow: var(--csh-text-shadow, 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35));
	-webkit-font-smoothing: antialiased;
}

/* Panel look: no surface of its own (the video already shows the glass plate). Optional tint only;
   the text gets a stronger shadow so it reads on the bright frosted plate. */
.csh--look-panel .csh__glass {
	background: rgba(var(--csh-glass-rgb), var(--csh-panel-alpha));
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	padding: calc(8 * var(--u));
	text-shadow: var(--csh-text-shadow, 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 14px rgba(0, 0, 0, 0.5));
}

/* Buttons are solid surfaces: no text shadow there */
.csh .csh__btn {
	text-shadow: none;
}

.csh .csh__head {
	display: flex;
	align-items: center;
	gap: calc(4 * var(--u));
}

.csh .csh__head--avatar {
	min-height: calc(17 * var(--u));
}

.csh .csh__headtext {
	min-width: 0;
}

.csh .csh__avatar {
	flex: 0 0 auto;
	width: calc(17 * var(--u));
	height: calc(17 * var(--u));
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 50%;
	object-fit: cover;
	background: #2a1f1f;
	box-shadow: 0 0 0 calc(0.6 * var(--u)) rgba(255, 255, 255, 0.85);
}

.csh .csh__eyebrow {
	margin-bottom: calc(1 * var(--u));
	font-size: calc(3.3 * var(--u));
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.1;
	color: var(--csh-accent);
}

.csh .csh__name {
	font-size: calc(6.4 * var(--u));
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--csh-text);
	overflow-wrap: anywhere;
}

.csh .csh__title {
	margin-top: calc(4.5 * var(--u));
	font-size: calc(4.3 * var(--u));
	font-weight: 600;
	line-height: 1.25;
	color: var(--csh-accent);
	overflow-wrap: anywhere;
}

.csh .csh__body {
	margin: calc(3 * var(--u)) 0 0;
	padding: 0;
	font-size: calc(3.6 * var(--u));
	font-weight: 400;
	line-height: 1.4;
	color: var(--csh-text);
	opacity: 0.92;
}

.csh .csh__tags {
	list-style: none;
	margin: calc(3.2 * var(--u)) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: calc(1.6 * var(--u));
}

.csh .csh__tag {
	margin: 0;
	padding: calc(1.6 * var(--u)) calc(2.8 * var(--u));
	font-size: calc(3.1 * var(--u));
	line-height: 1;
	white-space: nowrap;
	border-radius: 99cqw;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
	color: var(--csh-text);
}

.csh .csh__actions {
	display: flex;
	gap: calc(3 * var(--u));
	margin-top: auto;
	padding-top: calc(4 * var(--u));
}

/* Buttons are the only interactive part of the card: they receive clicks, everything else lets the
   pointer through so cursor scrubbing keeps working while hovering the card. */
.csh .csh__btn,
.csh .csh__btn:visited {
	pointer-events: auto;
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: calc(10 * var(--u));
	padding: 0 calc(2 * var(--u));
	border: 0;
	border-radius: calc(2.4 * var(--u));
	font-size: calc(4.2 * var(--u));
	font-weight: 600;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease;
}

.csh .csh__btn--primary,
.csh .csh__btn--primary:visited {
	background: #fff;
	color: #1e1616;
}

.csh .csh__btn--primary:hover,
.csh .csh__btn--primary:focus-visible {
	background: #ffe9e1;
	color: #1e1616;
}

.csh .csh__btn--ghost,
.csh .csh__btn--ghost:visited {
	background: rgba(255, 255, 255, 0);
	color: var(--csh-text);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.csh .csh__btn--ghost:hover,
.csh .csh__btn--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	color: var(--csh-text);
}

.csh .csh__btn:active {
	transform: translateY(1px);
}

.csh .csh__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Centred content (widget setting) */
.csh-align-center .csh .csh__glass { text-align: center; align-items: center; }
.csh-align-center .csh .csh__head,
.csh-align-center .csh .csh__tags,
.csh-align-center .csh .csh__actions { justify-content: center; }
.csh-align-center .csh .csh__copy-sub { margin-left: auto; margin-right: auto; }

/* Hero copy riding on the card (widget setting "Show the hero text inside the panel") */
.csh .csh__card .csh__glass .csh__copy {
	position: static;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	transform: none;
	max-width: none;
	width: auto;
	padding: 0;
	margin: 0;
	pointer-events: none;
	text-align: inherit;
}
.csh .csh__card .csh__glass .csh__head + .csh__copy { margin-top: calc(3 * var(--u)); }
.csh .csh__card .csh__glass .csh__copy-title {
	font-size: calc(6.8 * var(--u));
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--csh-text);
}
.csh .csh__card .csh__glass .csh__copy-sub {
	margin-top: calc(2.4 * var(--u));
	max-width: none;
	font-size: calc(3.5 * var(--u));
	line-height: 1.4;
	color: var(--csh-text);
	opacity: 0.92;
}
.csh .csh__card .csh__glass .csh__copy + .csh__title { margin-top: calc(3 * var(--u)); }

/* ---------- Hero text (title + one-line description over the video) ----------
   Positioned with the widget's prefix classes: .csh-copy-{pos} (desktop),
   .csh-copy-tablet-{pos} (<=1024px) and .csh-copy-mobile-{pos} (<=767px). */
.csh .csh__copy {
	--csh-copy-width: 640px;
	--csh-copy-ox: 0px;
	--csh-copy-oy: 0px;
	position: absolute;
	z-index: 3;
	left: var(--csh-copy-ox);
	bottom: var(--csh-copy-oy);
	box-sizing: border-box;
	max-width: min(var(--csh-copy-width), 100%);
	padding: clamp(20px, 4vw, 56px);
	color: #fff;
	text-align: left;
	pointer-events: none;
	text-shadow: var(--csh-copy-shadow, 0 2px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.5));
}

.csh .csh__copy-title {
	margin: 0;
	padding: 0;
	font-size: clamp(28px, 3.8vw, 52px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #fff;
}

.csh .csh__copy-sub {
	margin: 0.8em 0 0;
	padding: 0;
	max-width: 46ch;
	font-size: clamp(15px, 1.25vw, 19px);
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
}

/* Optional buttons under the floating hero text (px sizes: this block is not card-relative) */
.csh .csh__copy .csh__copy-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
	pointer-events: none;
}

.csh .csh__copy .csh__copy-actions .csh__btn {
	flex: 0 0 auto;
	min-height: 46px;
	padding: 0 22px;
	border-radius: 12px;
	font-size: 15px;
	pointer-events: auto;
}

.csh-copy-bottom-center .csh .csh__copy-actions,
.csh-copy-top-center .csh .csh__copy-actions {
	justify-content: center;
}

.csh-copy-bottom-left .csh .csh__copy { left: var(--csh-copy-ox); right: auto; margin: 0; width: auto; top: auto; bottom: var(--csh-copy-oy); transform: none; text-align: left; }
.csh-copy-top-left .csh .csh__copy { left: var(--csh-copy-ox); right: auto; margin: 0; width: auto; top: var(--csh-copy-oy); bottom: auto; transform: none; text-align: left; }
.csh-copy-bottom-center .csh .csh__copy { left: 0; right: 0; margin-left: auto; margin-right: auto; width: max-content; top: auto; bottom: var(--csh-copy-oy); transform: translateX(var(--csh-copy-ox)); text-align: center; }
.csh-copy-top-center .csh .csh__copy { left: 0; right: 0; margin-left: auto; margin-right: auto; width: max-content; top: var(--csh-copy-oy); bottom: auto; transform: translateX(var(--csh-copy-ox)); text-align: center; }
.csh-copy-bottom-center .csh .csh__copy-sub,
.csh-copy-top-center .csh .csh__copy-sub { margin-left: auto; margin-right: auto; }

@media (max-width: 1024px) {
	.csh-copy-tablet-bottom-left .csh .csh__copy { left: var(--csh-copy-ox); right: auto; margin: 0; width: auto; top: auto; bottom: var(--csh-copy-oy); transform: none; text-align: left; }
	.csh-copy-tablet-top-left .csh .csh__copy { left: var(--csh-copy-ox); right: auto; margin: 0; width: auto; top: var(--csh-copy-oy); bottom: auto; transform: none; text-align: left; }
	.csh-copy-tablet-bottom-center .csh .csh__copy { left: 0; right: 0; margin-left: auto; margin-right: auto; width: max-content; top: auto; bottom: var(--csh-copy-oy); transform: translateX(var(--csh-copy-ox)); text-align: center; }
	.csh-copy-tablet-top-center .csh .csh__copy { left: 0; right: 0; margin-left: auto; margin-right: auto; width: max-content; top: var(--csh-copy-oy); bottom: auto; transform: translateX(var(--csh-copy-ox)); text-align: center; }
	.csh-copy-tablet-bottom-center .csh .csh__copy-sub,
	.csh-copy-tablet-top-center .csh .csh__copy-sub { margin-left: auto; margin-right: auto; }
}

@media (max-width: 767px) {
	.csh-copy-mobile-bottom-left .csh .csh__copy { left: var(--csh-copy-ox); right: auto; margin: 0; width: auto; top: auto; bottom: var(--csh-copy-oy); transform: none; text-align: left; }
	.csh-copy-mobile-top-left .csh .csh__copy { left: var(--csh-copy-ox); right: auto; margin: 0; width: auto; top: var(--csh-copy-oy); bottom: auto; transform: none; text-align: left; }
	.csh-copy-mobile-bottom-center .csh .csh__copy { left: 0; right: 0; margin-left: auto; margin-right: auto; top: auto; bottom: var(--csh-copy-oy); transform: translateX(var(--csh-copy-ox)); text-align: center; width: 100%; }
	.csh-copy-mobile-top-center .csh .csh__copy { left: 0; right: 0; margin-left: auto; margin-right: auto; top: var(--csh-copy-oy); bottom: auto; transform: translateX(var(--csh-copy-ox)); text-align: center; width: 100%; }
	.csh-copy-mobile-bottom-center .csh .csh__copy-sub,
	.csh-copy-mobile-top-center .csh .csh__copy-sub { margin-left: auto; margin-right: auto; }
	.csh .csh__copy-sub { max-width: none; }
}

/* ---------- Phones: docked cards (widget setting "On phones: dock") ----------
   The plate is too small on a cropped portrait video, so the tracked content becomes a card pinned to
   the bottom of the hero. Inline width/height/transform from the script are overridden here. */
@media (max-width: 767px) {
	.csh--dock-m .csh__card {
		position: absolute;
		left: 14px;
		right: 14px;
		top: auto;
		bottom: 14px;
		width: auto !important;
		height: auto !important;
		transform: none !important;
		aspect-ratio: auto;
		visibility: visible;
	}
	.csh--dock-m .csh__glass {
		position: relative;
		inset: auto;
	}
	.csh--dock-m.csh--look-panel .csh__glass {
		background: rgba(var(--csh-glass-rgb), 0.5);
		box-shadow: inset 0 0 0 1px var(--csh-border);
		-webkit-backdrop-filter: blur(var(--csh-blur)) saturate(1.15);
		backdrop-filter: blur(var(--csh-blur)) saturate(1.15);
	}
	.csh--dock-m.csh--two .csh__card--1 { right: calc(50% + 4px); }
	.csh--dock-m.csh--two .csh__card--2 { left: calc(50% + 4px); }
	.csh--dock-m .csh__actions { margin-top: 0; }
}

/* ---------- Small screens: hero text below the video (widget setting "Small screens: text below the video")
   The video keeps its height; the floating copy becomes a dark strip under it (ambient-loop / non-scroll heroes). */
@media (max-width: 767px) {
	.csh-track--below-m { height: auto; }
	.csh-track--below-m .csh { height: auto; padding-top: var(--csh-height, 100vh); }
	.csh-track--below-m .csh video.csh__video,
	.csh-track--below-m .csh img.csh__fallback,
	.csh-track--below-m .csh canvas.csh__frame { top: 0; bottom: auto; height: var(--csh-height, 100vh); }
	.csh-track--below-m .csh .csh__copy { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none;
		width: 100%; max-width: none; padding: 22px 20px 28px; text-align: left; background: #000; text-shadow: none; }
	.csh-track--below-m .csh .csh__copy-sub { max-width: none; margin-left: 0; margin-right: 0; }
	.csh-track--below-m .csh .csh__copy-actions { justify-content: flex-start; }
}
@media (max-width: 1024px) {
	.csh-track--below-t { height: auto; }
	.csh-track--below-t .csh { height: auto; padding-top: var(--csh-height, 100vh); }
	.csh-track--below-t .csh video.csh__video,
	.csh-track--below-t .csh img.csh__fallback,
	.csh-track--below-t .csh canvas.csh__frame { top: 0; bottom: auto; height: var(--csh-height, 100vh); }
	.csh-track--below-t .csh .csh__copy { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: none;
		width: 100%; max-width: none; padding: 26px 32px 32px; text-align: left; background: #000; text-shadow: none; }
	.csh-track--below-t .csh .csh__copy-sub { max-width: 60ch; margin-left: 0; margin-right: 0; }
	.csh-track--below-t .csh .csh__copy-actions { justify-content: flex-start; }
}