/* Zevonix Slider */
.zvs {
	position: relative;
	overflow: hidden;
	height: var(--zvs-h, 600px);
	--zvs-i: 0;
}
@media (max-width: 767px) {
	.zvs { height: var(--zvs-hm, 420px); }
}
.zvs__track {
	position: relative;
	height: 100%;
}
.zvs__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background: var(--zvs-bg, #1f2937);
	color: var(--zvs-fg, #fff);
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s ease, visibility .7s, transform .7s ease;
}
.zvs__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}
/* Slide transition: panels sit side by side and the track moves. */
.zvs--slide .zvs__track {
	display: flex;
	transform: translateX(calc(var(--zvs-i) * -100%));
	transition: transform .7s ease;
}
.zvs--slide .zvs__slide {
	position: relative;
	flex: 0 0 100%;
	opacity: 1;
	visibility: visible;
}
/* Two classes deep so page builders' "img { height: auto }" (Elementor, themes) cannot shrink it. */
.zvs .zvs__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	max-width: none;
}
.zvs__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var(--zvs-ov, .3);
	pointer-events: none;
}
.zvs__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1188px; /* 1140px of content plus the side padding */
	margin: 0 auto;
	padding: 0 24px;
}
.zvs__content--left { text-align: left; }
.zvs__content--center { text-align: center; }
.zvs__content--right { text-align: right; }
.zvs__heading {
	color: inherit;
	font-size: clamp(28px, 4vw, 52px);
	font-size: var(--zvs-hs, clamp(28px, 4vw, 52px));
	line-height: 1.15;
	margin: 0 0 .5em;
	font-weight: 700;
}
.zvs__text {
	color: inherit;
	font-size: clamp(16px, 1.6vw, 20px);
	font-size: var(--zvs-ts, clamp(16px, 1.6vw, 20px));
	line-height: 1.5;
	margin: 0 0 1.25em;
	max-width: 46em;
}
/* Side-aligned text keeps to its half, so it does not run across the photo on the other side. */
.zvs__content--left .zvs__heading,
.zvs__content--right .zvs__heading { max-width: 14em; }
.zvs__content--left .zvs__text,
.zvs__content--right .zvs__text { max-width: 30em; }
.zvs__content--right .zvs__heading { margin-left: auto; }
.zvs__content--center .zvs__text { margin-left: auto; margin-right: auto; }
.zvs__content--right .zvs__text { margin-left: auto; }
.zvs__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.zvs__content--center .zvs__buttons { justify-content: center; }
.zvs__content--right .zvs__buttons { justify-content: flex-end; }
.zvs__btn {
	display: inline-block;
	padding: .8em 1.6em;
	border: 2px solid var(--zvs-ac, #fff);
	border-radius: 4px;
	background: var(--zvs-ac, #fff);
	color: var(--zvs-at, #111827);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
}
.zvs__btn:hover,
.zvs__btn:focus-visible { opacity: .9; text-decoration: none; }
.zvs__btn--ghost {
	background: transparent;
	border-color: currentColor;
	color: var(--zvs-fg, #fff);
}
.zvs__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	font-size: 28px;
	line-height: 44px;
	cursor: pointer;
	padding: 0;
}
.zvs__arrow:hover,
.zvs__arrow:focus-visible { background: rgba(0, 0, 0, .6); }
.zvs__arrow--prev { left: 12px; }
.zvs__arrow--next { right: 12px; }
.zvs__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.zvs__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
.zvs__dot.is-active { background: #fff; }
.zvs :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.zvs-missing { padding: 1em; border: 1px dashed #b91c1c; color: #b91c1c; }
@media (prefers-reduced-motion: reduce) {
	.zvs__slide, .zvs--slide .zvs__track { transition: none; }
}

/* Themes style h2/p inside content areas; a set size and the slide colour win over them. */
.zvs .zvs__slide .zvs__heading { font-size: var(--zvs-hs, clamp(28px, 4vw, 52px)); color: var(--zvs-fg, #fff); }
.zvs .zvs__slide .zvs__text { font-size: var(--zvs-ts, clamp(16px, 1.6vw, 20px)); color: var(--zvs-bc, #fff); }
@media (max-width: 767px) {
	.zvs .zvs__slide .zvs__heading { font-size: min(var(--zvs-hs, 28px), 28px); }
	.zvs .zvs__slide .zvs__text { font-size: min(var(--zvs-ts, 16px), 17px); }
}

/* ---- 1.1: kicker, right-half layout, badge, button shape, minimal phones, entrance ---- */
.zvs .zvs__slide .zvs__heading { line-height: 1.2; }
.zvs--square .zvs__btn { border-radius: 0; }
.zvs__content--right-half .zvs__inner { margin-left: 50%; padding-left: 72px; }
.zvs__content--right-half .zvs__text { max-width: 30em; }
.zvs__kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 .9em;
	color: var(--zvs-kc, #fff);
	font-weight: 300;
}
.zvs__content--center .zvs__kicker { justify-content: center; }
.zvs__content--right .zvs__kicker { justify-content: flex-end; }
.zvs__kicker--small .zvs__kicker-main { font-size: 18px; line-height: 1.4; font-weight: 400; }
.zvs__kicker--large .zvs__kicker-main { font-size: 28px; line-height: 1.15; }
.zvs__kicker-icon { width: 1.6em; height: 1.6em; flex: 0 0 auto; align-self: flex-start; }
.zvs__kicker--small .zvs__kicker-icon { width: 1.3em; height: 1.3em; align-self: center; }
.zvs__kicker-note {
	margin-left: 10px;
	padding-left: 22px;
	border-left: 1px solid currentColor;
	border-left-color: color-mix(in srgb, currentColor 35%, transparent);
	font-size: 15px;
	line-height: 1.35;
}
.zvs__badges {
	position: absolute;
	inset: 0;
	z-index: 2;
	max-width: 1188px;
	margin: 0 auto;
	pointer-events: none;
}
.zvs__badge {
	position: absolute;
	display: flex;
	align-items: stretch;
	pointer-events: auto;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.zvs__badge--bottom-right { right: 24px; bottom: 15%; }
.zvs__badge--bottom-left { left: 24px; bottom: 15%; }
.zvs__badge--top-right { right: 24px; top: 12%; }
.zvs__badge--top-left { left: 24px; top: 12%; }
.zvs__badge-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	min-height: 66px;
	background: var(--zvs-ac, #ff4f01);
	color: var(--zvs-at, #fff);
}
.zvs__badge-icon svg { width: 30px; height: 30px; }
.zvs__badge-body {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px 0 8px;
	background: #fff;
}
.zvs__badge-value { font-size: 27px; line-height: 1; color: #131d3b; }
.zvs__badge-label { font-size: 19px; line-height: .9; font-weight: 300; color: #727f8c; }
@media (max-width: 767px) {
	.zvs__badges { display: none; }
	.zvs__content--right-half .zvs__inner { margin-left: 0; padding-left: 0; }
	.zvs__kicker--large .zvs__kicker-main { font-size: 20px; }
	.zvs__slide--minimal .zvs__kicker,
	.zvs__slide--minimal .zvs__text { display: none; }
	.zvs__slide--minimal .zvs__content { text-align: center; }
	.zvs__slide--minimal .zvs__heading { margin-left: auto; margin-right: auto; }
	.zvs__slide--minimal .zvs__buttons { justify-content: center; }
	.zvs__slide--minimal .zvs__btn { font-size: 13px; padding: .7em 1.3em; }
}
/* Entrance: replays each time a slide becomes active (keyframes, so the first slide animates on load too). */
@keyframes zvs-in {
	from { opacity: 0; transform: var(--zvs-from, translateY(30px)); }
	to { opacity: 1; transform: none; }
}
.zvs--animate .zvs__slide.is-active .zvs__kicker,
.zvs--animate .zvs__slide.is-active .zvs__heading,
.zvs--animate .zvs__slide.is-active .zvs__text,
.zvs--animate .zvs__slide.is-active .zvs__buttons,
.zvs--animate .zvs__slide.is-active .zvs__badge {
	animation: zvs-in .7s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: var(--zvs-d, 0ms);
}
.zvs--animate .zvs__kicker { --zvs-from: translateX(-60px); --zvs-d: 200ms; }
.zvs--animate .zvs__heading { --zvs-from: translateX(60px); --zvs-d: 400ms; }
.zvs--animate .zvs__badge { --zvs-d: 600ms; }
.zvs--animate .zvs__text { --zvs-d: 750ms; }
.zvs--animate .zvs__buttons { --zvs-d: 950ms; }
@media (prefers-reduced-motion: reduce) {
	.zvs--animate .zvs__slide.is-active * { animation: none !important; }
}
.zvs--square .zvs__btn { border-width: 1px; padding: 15px 30px; font-weight: 700; }

/* Kicker icon sits right after the first line when the kicker has several lines. */
.zvs__kicker-main .zvs__kicker-icon { display: inline-block; width: 1.1em; height: 1.1em; margin-left: .45em; vertical-align: -.12em; }
.zvs__buttons + .zvs__text { margin-top: 1.6em; }
/* Arrows show on hover or keyboard focus; on phones swipe instead (still reachable by focus). */
.zvs__arrow { opacity: 0; transition: opacity .25s ease; }
.zvs:hover .zvs__arrow,
.zvs:focus-within .zvs__arrow,
.zvs__arrow:focus-visible { opacity: 1; }
@media (hover: none) { .zvs__arrow { opacity: .85; } }
@media (max-width: 767px) { .zvs .zvs__arrow { opacity: 0; } .zvs .zvs__arrow:focus-visible { opacity: 1; } }
