.vs-slider {
	--vs-accent: #1e3a4c;
	--vs-highlight: #2ba7de;
	--vs-arrow-bg: #000000;
	--vs-arrow-color: #ffffff;
	--vs-arrow-size: 44px;
	--vs-arrow-radius: 50%;
	--vs-thumb-arrow-bg: #000000;
	--vs-thumb-arrow-color: #ffffff;
	--vs-thumb-arrow-width: 30px;
	--vs-thumb-arrow-height: 100%;
	--vs-thumb-arrow-radius: 0;
	--vs-dot-bg: transparent;
	--vs-dot-color: #808080;
	--vs-dot-active-color: #ffffff;
	--vs-dot-size: 9px;
	--vs-dot-spacing: 8px;
	--vs-mobile-dot-bg: transparent;
	--vs-mobile-dot-color: #808080;
	--vs-mobile-dot-active-color: #000000;
	--vs-video-bg: rgba(255,255,255,0);
	--vs-thumb-nav-bg: #ffffff;
	--vs-mobile-thumb-arrow-bg: #ffffff;
	--vs-mobile-thumb-arrow-color: #000000;
	max-width: 1200px;
	margin: 0 auto;
	font-family: inherit;
}

/* ---------- Main stage ---------- */
.vs-stage {
	position: relative;
	touch-action: pan-y;
	overflow: hidden;
	background: transparent;
	aspect-ratio: 16 / 8.2;
}

.vs-slides {
	position: relative;
	width: 100%;
	height: 100%;
}

.vs-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease;
	pointer-events: none;
}

.vs-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.vs-slide-media {
	position: absolute;
	inset: 0;
	background: var(--vs-video-bg);
}

.vs-slide-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vs-slide.is-playing .vs-slide-media img {
	visibility: hidden;
}

.vs-slide-media iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--vs-video-bg);
	z-index: 2;
}

/* Diagonal accent panel, right side, like the reference site */
.vs-slide-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 42%;
	min-width: 260px;
	background: var(--vs-accent);
	clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6% 0 12%;
	pointer-events: none;
}

.vs-slide-heading {
	color: #fff;
	font-size: clamp(1.4rem, 3vw, 2.6rem);
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
}

.vs-heading-line {
	display: block;
}

/* Play button */
.vs-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	line-height: 0;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
	transition: transform 0.2s ease;
}

.vs-play-btn:hover,
.vs-play-btn:focus-visible {
	transform: translate(-50%, -50%) scale(1.08);
}

.vs-slide.is-playing .vs-play-btn,
.vs-slide.is-playing .vs-slide-panel {
	display: none;
}

/* Arrows */
.vs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: var(--vs-arrow-size);
	height: var(--vs-arrow-size);
	border-radius: var(--vs-arrow-radius);
	border: 0;
	background: var(--vs-arrow-bg);
	color: var(--vs-arrow-color);
	font-size: calc(var(--vs-arrow-size) * 0.58);
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.vs-arrow > span {
	display: block;
	font-size: inherit;
	line-height: 0.8;
}

.vs-arrow:hover,
.vs-arrow:focus-visible {
	background: var(--vs-arrow-bg);
	filter: brightness(0.85);
}

.vs-arrow-prev { left: 16px; }
.vs-arrow-next { right: 16px; }

/* Dots */
.vs-dots {
	position: absolute;
	left: 16px;
	bottom: 14px;
	display: flex;
	gap: var(--vs-dot-spacing);
	z-index: 5;
	padding: 8px 10px;
	background: var(--vs-dot-bg);
}

.vs-dot {
	width: var(--vs-dot-size);
	height: var(--vs-dot-size);
	border-radius: 50%;
	border: 0;
	background: var(--vs-dot-color);
	cursor: pointer;
	padding: 0;
}

.vs-dot.is-active {
	background: var(--vs-dot-active-color);
}

.vs-slider.vs-dots-below .vs-stage {
	overflow: visible;
	margin-bottom: calc(var(--vs-dot-size) + 28px);
}

.vs-slider.vs-dots-below .vs-dots {
	top: 100%;
	bottom: auto;
	left: 0;
	right: 0;
	justify-content: center;
}

/* ---------- Thumbnail filmstrip ---------- */
.vs-thumb-nav {
	position: relative;
	margin-top: 4px;
	padding: 0;
	background: var(--vs-thumb-nav-bg);
}

.vs-thumb-nav.has-overflow {
	padding-left: calc(var(--vs-thumb-arrow-width) + 4px);
	padding-right: calc(var(--vs-thumb-arrow-width) + 4px);
}

.vs-thumbs {
	display: flex;
	gap: 4px;
	margin-top: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	touch-action: pan-x;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.vs-thumbs::-webkit-scrollbar {
	display: none;
}

.vs-thumb {
	position: relative;
	flex: 0 0 calc((100% - 20px) / 6);
	border: 0;
	padding: 0;
	cursor: pointer;
	aspect-ratio: 140 / 80;
	overflow: hidden;
	background: #111;
	opacity: 0.65;
	transition: opacity 0.2s ease;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.vs-thumb:hover,
.vs-thumb:focus-visible {
	opacity: 0.9;
}

.vs-thumb.is-active {
	opacity: 1;
	box-shadow: inset 0 0 0 3px var(--vs-highlight);
}

.vs-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Thumbnail labels are hidden visually per design, but kept in the
   markup so assistive tech still announces which video each thumbnail plays. */
.vs-thumb-label.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
	white-space: nowrap;
}

.vs-thumb-play {
	position: absolute;
	top: 8px;
	right: 8px;
	color: #fff;
	font-size: 0.85rem;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.vs-thumb-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--vs-thumb-arrow-width);
	height: var(--vs-thumb-arrow-height);
	min-height: 44px;
	padding: 0;
	border: 0;
	background: var(--vs-thumb-arrow-bg);
	color: var(--vs-thumb-arrow-color);
	border-radius: var(--vs-thumb-arrow-radius);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.vs-thumb-arrow-prev { left: 0; }
.vs-thumb-arrow-next { right: 0; }
.vs-thumb-arrow[hidden] { display: none !important; }

/* Tablet + mobile: two thumbnails visible at a time. */
@media (max-width: 980px) {
	.vs-dots {
		background: var(--vs-mobile-dot-bg);
	}

	.vs-dot {
		background: var(--vs-mobile-dot-color);
	}

	.vs-dot.is-active {
		background: var(--vs-mobile-dot-active-color);
	}

	.vs-thumb-arrow {
		background: var(--vs-mobile-thumb-arrow-bg);
		color: var(--vs-mobile-thumb-arrow-color);
	}

	.vs-thumb {
		flex-basis: calc(50% - 2px);
	}
}

/* Mobile: let the main image show at its full, uncropped aspect ratio
   instead of being force-cropped into a fixed box. The stage grows to
   fit the image's natural height, and the diagonal panel drops below
   it as a solid band instead of overlapping the photo. */
@media (max-width: 767px) {
	.vs-stage {
		aspect-ratio: auto;
		overflow: visible;
	}

	.vs-slides {
		position: relative;
		height: auto;
	}

	.vs-slide {
		position: relative;
		inset: auto;
		display: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: none;
	}

	.vs-slide.is-active {
		display: block;
	}

	.vs-slide-media {
		position: relative;
		inset: auto;
	}

	.vs-slide-media img {
		position: static;
		width: 100%;
		height: auto;
		object-fit: initial;
	}

	.vs-slide.is-playing .vs-slide-media img {
		display: none;
	}

	/* Video plays as a standard 16:9 box in normal flow (image above
	   is hidden via display:none while playing, so there's no gap). */
	.vs-slide.is-playing .vs-slide-media img {
	visibility: hidden;
}

.vs-slide-media iframe {
		aspect-ratio: 16 / 9;
		position: relative;
		height: auto;
	}

	.vs-slide-panel {
		position: static;
		width: 100%;
		height: auto;
		clip-path: none;
		padding: 20px 8%;
	}

	.vs-arrow {
		top: 38%;
	}

	.vs-dots {
		position: static;
		justify-content: center;
		padding: 10px 0;
		background: var(--vs-mobile-dot-bg);
	}
}