.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 ---------- */
/* Stage sizing modes */
.vs-stage[data-height-mode="fixed"] { height: var(--vs-stage-fixed-height); }
.vs-stage[data-height-mode="fill"] { height: 100%; min-height: var(--vs-stage-fixed-height); }
.vs-stage[data-height-mode="16-9"] { aspect-ratio: 16 / 9; height: auto; }
.vs-stage[data-height-mode="4-3"] { aspect-ratio: 4 / 3; height: auto; }
.vs-stage[data-height-mode="custom"] { height: var(--vs-stage-height, auto); }

.vs-stage {
	cursor: grab;
	user-select: none;
	position: relative;
	touch-action: pan-y;
	overflow: hidden;
	background: transparent;
	height: var(--vs-stage-height, auto);
	min-height: 200px;
	transition: height 220ms ease;
}

.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: var(--vs-image-fit, contain);
	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: opacity 0.2s ease, visibility 0.2s ease, background 0.2s ease;
}

/* On mouse/trackpad devices, reveal the main arrows when the stage is hovered.
   Keyboard focus keeps them visible for accessibility. */
@media (hover: hover) and (pointer: fine) {
	.vs-stage .vs-arrow {
		opacity: 0;
		visibility: hidden;
	}

	.vs-stage:hover .vs-arrow,
	.vs-stage:focus-within .vs-arrow {
		opacity: 1;
		visibility: visible;
	}
}


.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);
}

/* Position the center of each arrow from the video edge, rather than the
   outside edge of the button. This lets 0px sit directly on the edge and
   makes the setting visually predictable at every arrow size. */
.vs-arrow-prev {
	left: var(--vs-arrow-inset, 16px);
	transform: translate(-50%, -50%);
}
.vs-arrow-next {
	right: var(--vs-arrow-inset, 16px);
	transform: translate(50%, -50%);
}

/* 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;
	cursor: grab;
	user-select: none;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

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

.vs-thumbs.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
}

.vs-thumbs img {
	-webkit-user-drag: none;
	user-select: 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;
		height: var(--vs-stage-height, 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: 100%;
		object-fit: var(--vs-image-fit, contain);
	}

	.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);
	}
}

/* Desktop click-and-drag for the large poster. */
.vs-stage.is-dragging {
	cursor: grabbing;
}

.vs-stage .vs-slide {
	transition: transform 160ms ease;
}

.vs-stage.is-dragging .vs-slide.is-active {
	transition: none;
}

.vs-stage .vs-slide.is-playing {
	cursor: default;
}

/* Smooth large-poster dragging: adjacent slides remain visible while the
   active poster follows the pointer, then all slides settle together. */
.vs-stage .vs-slide.is-drag-neighbor,
.vs-stage .vs-slide.is-drag-current {
	opacity: 1;
	visibility: visible;
	pointer-events: none;
	will-change: transform;
	z-index: 2;
}

.vs-stage .vs-slide.is-drag-current {
	z-index: 3;
}

.vs-stage.is-dragging .vs-slide.is-drag-neighbor,
.vs-stage.is-dragging .vs-slide.is-drag-current {
	transition: none !important;
}

.vs-stage.is-settling .vs-slide.is-drag-neighbor,
.vs-stage.is-settling .vs-slide.is-drag-current {
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (max-width: 767px) {
	/* Temporarily restore overlay positioning during a touch drag so the
	   neighboring large poster can slide in beside the current one. */
	.vs-stage.is-dragging,
	.vs-stage.is-settling {
		overflow: hidden;
	}

	.vs-stage.is-dragging .vs-slides,
	.vs-stage.is-settling .vs-slides {
		height: var(--vs-drag-stage-height, auto);
	}

	.vs-stage.is-dragging .vs-slide.is-drag-neighbor,
	.vs-stage.is-dragging .vs-slide.is-drag-current,
	.vs-stage.is-settling .vs-slide.is-drag-neighbor,
	.vs-stage.is-settling .vs-slide.is-drag-current {
		position: absolute;
		inset: 0;
		display: block;
	}
}