/**
 * Hero Type 2: the Video Hero.
 *
 * Only enqueued when the Video Hero is the hero actually on screen, so the
 * Slider Hero never pays for these bytes. Every selector is namespaced under
 * .ks-hero-video and cannot collide with the .home-hero-slider styles in
 * style.css.
 */

.ks-hero-video {
	--kshv-accent: #ff6f00;
	--kshv-ink: #ffffff;
	--kshv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	position: relative;
	display: flex;
	isolation: isolate;
	overflow: hidden;
	min-height: var(--kshv-h, 650px);
	background: #0b1a2b;
}

/* Full screen is expressed as height variables so the pixel breakpoints below
   keep working untouched. */
.ks-hero-video--h-full {
	--kshv-h: 100vh;
	--kshv-h-tablet: 100vh;
	--kshv-h-mobile: 100vh;
}

@supports (height: 100svh) {
	.ks-hero-video--h-full {
		--kshv-h: 100svh;
		--kshv-h-tablet: 100svh;
		--kshv-h-mobile: 100svh;
	}
}

/* --- Media ------------------------------------------------------------- */

.ks-hero-video__media,
.ks-hero-video__overlay {
	position: absolute;
	inset: 0;
}

.ks-hero-video__media {
	z-index: 0;
}

.ks-hero-video--no-poster .ks-hero-video__media {
	background:
		linear-gradient(135deg, rgba(12, 25, 38, 0.2), rgba(12, 25, 38, 0.75)),
		linear-gradient(115deg, #6f7b88 0%, #b3691d 45%, #15283a 100%);
}

.ks-hero-video__poster,
.ks-hero-video__poster-img,
.ks-hero-video__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.ks-hero-video__poster-img,
.ks-hero-video__video {
	object-fit: cover;
	object-position: center;
}

/*
 * The video fades in over the poster once it is genuinely playing. Until then
 * — still loading, autoplay refused, switched off on mobile, reduced motion —
 * the poster is what the visitor sees, with no flash of an empty black box.
 */
.ks-hero-video__video {
	opacity: 0;
	transition: opacity 0.8s var(--kshv-ease);
}

.ks-hero-video.is-video-playing .ks-hero-video__video {
	opacity: 1;
}

/* Every source failed: drop the element so nothing sits over the poster. */
.ks-hero-video.is-video-failed .ks-hero-video__video {
	display: none;
}

/* --- Overlay ------------------------------------------------------------ */

.ks-hero-video__overlay {
	z-index: 1;
	pointer-events: none;
	background: rgba(var(--kshv-overlay-rgb, 15, 34, 53), var(--kshv-overlay-opacity, 0.45));
}

.ks-hero-video--overlay-gradient .ks-hero-video__overlay {
	background: linear-gradient(
		180deg,
		rgba(var(--kshv-overlay-rgb, 15, 34, 53), calc(var(--kshv-overlay-opacity, 0.45) * 0.3)) 0%,
		rgba(var(--kshv-overlay-rgb, 15, 34, 53), calc(var(--kshv-overlay-opacity, 0.45) * 0.7)) 55%,
		rgba(var(--kshv-overlay-rgb, 15, 34, 53), var(--kshv-overlay-opacity, 0.45)) 100%
	);
}

.ks-hero-video--overlay-diagonal .ks-hero-video__overlay {
	background: linear-gradient(
		100deg,
		rgba(var(--kshv-overlay-rgb, 15, 34, 53), var(--kshv-overlay-opacity, 0.45)) 0%,
		rgba(var(--kshv-overlay-rgb, 15, 34, 53), calc(var(--kshv-overlay-opacity, 0.45) * 0.75)) 45%,
		rgba(var(--kshv-overlay-rgb, 15, 34, 53), calc(var(--kshv-overlay-opacity, 0.45) * 0.15)) 100%
	);
}

/* Keep the dark end of the diagonal behind the text when it sits on the right. */
.ks-hero-video--overlay-diagonal.ks-hero-video--align-right .ks-hero-video__overlay {
	background: linear-gradient(
		260deg,
		rgba(var(--kshv-overlay-rgb, 15, 34, 53), var(--kshv-overlay-opacity, 0.45)) 0%,
		rgba(var(--kshv-overlay-rgb, 15, 34, 53), calc(var(--kshv-overlay-opacity, 0.45) * 0.75)) 45%,
		rgba(var(--kshv-overlay-rgb, 15, 34, 53), calc(var(--kshv-overlay-opacity, 0.45) * 0.15)) 100%
	);
}

/* --- Layout ------------------------------------------------------------- */

/*
 * No flex-grow here: as a flex item of the section it would take a 0 basis and
 * stretch edge to edge, throwing away the gutter. The auto margins centre it,
 * and the section's default align-items:stretch already gives it full height.
 */
.ks-hero-video__inner {
	position: relative;
	z-index: 2;
	display: flex;
	width: min(100% - 2.5rem, 1440px);
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5rem) 0;
}

.ks-hero-video--v-top .ks-hero-video__inner {
	align-items: flex-start;
}

.ks-hero-video--v-center .ks-hero-video__inner {
	align-items: center;
}

.ks-hero-video--v-bottom .ks-hero-video__inner {
	align-items: flex-end;
}

/* Bottom-aligned content would otherwise land on the play/pause button. */
.ks-hero-video--has-control.ks-hero-video--v-bottom .ks-hero-video__inner {
	padding-bottom: calc(clamp(3rem, 6vw, 5rem) + 3.25rem);
}

.ks-hero-video--align-left .ks-hero-video__inner {
	justify-content: flex-start;
}

.ks-hero-video--align-center .ks-hero-video__inner {
	justify-content: center;
}

.ks-hero-video--align-right .ks-hero-video__inner {
	justify-content: flex-end;
}

.ks-hero-video__content {
	width: 100%;
	max-width: 46rem;
	color: var(--kshv-ink);
	text-align: left;
	text-shadow: 0 2px 20px rgba(4, 12, 22, 0.45);
}

.ks-hero-video--align-center .ks-hero-video__content {
	text-align: center;
}

.ks-hero-video--align-right .ks-hero-video__content {
	text-align: right;
}

/* --- Typography --------------------------------------------------------- */

.ks-hero-video__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.1rem;
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(0.78rem, 1.1vw, 0.95rem);
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

.ks-hero-video__eyebrow::before {
	content: "";
	width: 2.25rem;
	height: 3px;
	border-radius: 2px;
	background: var(--kshv-accent);
}

.ks-hero-video--align-right .ks-hero-video__eyebrow {
	flex-direction: row-reverse;
}

.ks-hero-video__title {
	margin: 0;
	color: #fff;
	font-size: clamp(2.15rem, 5.2vw, 4.4rem);
	font-weight: 800;
	line-height: 1.07;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.ks-hero-video__description {
	margin: 1.35rem 0 0;
	max-width: 42rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(1rem, 1.35vw, 1.18rem);
	line-height: 1.65;
}

.ks-hero-video--align-center .ks-hero-video__description {
	margin-left: auto;
	margin-right: auto;
}

.ks-hero-video--align-right .ks-hero-video__description {
	margin-left: auto;
}

.ks-hero-video__description > p {
	margin: 0 0 0.85rem;
}

.ks-hero-video__description > p:last-child {
	margin-bottom: 0;
}

/* --- Buttons ------------------------------------------------------------ */

.ks-hero-video__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-top: 2.1rem;
}

.ks-hero-video--align-center .ks-hero-video__actions {
	justify-content: center;
}

.ks-hero-video--align-right .ks-hero-video__actions {
	justify-content: flex-end;
}

.ks-hero-video__button {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 1rem 1.9rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-shadow: none;
	transition:
		transform 0.25s var(--kshv-ease),
		box-shadow 0.25s var(--kshv-ease),
		background-color 0.25s var(--kshv-ease),
		border-color 0.25s var(--kshv-ease),
		color 0.25s var(--kshv-ease);
}

.ks-hero-video__button--primary {
	background: var(--kshv-accent);
	border-color: var(--kshv-accent);
	color: #fff;
}

.ks-hero-video__button--primary:hover,
.ks-hero-video__button--primary:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 18px 34px rgba(255, 111, 0, 0.32);
	color: #fff;
}

.ks-hero-video__button--secondary {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.ks-hero-video__button--secondary:hover,
.ks-hero-video__button--secondary:focus-visible {
	transform: translateY(-2px);
	background: #fff;
	border-color: #fff;
	color: #101010;
}

.ks-hero-video__button i {
	font-size: 0.8em;
	transition: transform 0.25s var(--kshv-ease);
}

.ks-hero-video__button:hover i,
.ks-hero-video__button:focus-visible i {
	transform: translateX(3px);
}

.ks-hero-video__button:focus-visible,
.ks-hero-video__toggle:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* --- Play / pause control ----------------------------------------------- */

/*
 * Bottom left, not bottom right: the theme's fixed "Get a quote" trigger owns
 * the bottom-right corner of every page and would sit on top of this.
 */
.ks-hero-video__toggle {
	position: absolute;
	left: clamp(1rem, 3vw, 2.5rem);
	bottom: clamp(1rem, 3vw, 2.5rem);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.9rem;
	height: 2.9rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: rgba(10, 22, 36, 0.45);
	color: #fff;
	cursor: pointer;
	transition:
		background-color 0.25s var(--kshv-ease),
		border-color 0.25s var(--kshv-ease),
		transform 0.25s var(--kshv-ease);
}

@supports (backdrop-filter: blur(6px)) {
	.ks-hero-video__toggle {
		background: rgba(255, 255, 255, 0.14);
		backdrop-filter: blur(6px);
	}
}

.ks-hero-video__toggle:hover {
	transform: translateY(-2px);
	border-color: #fff;
	background: rgba(255, 255, 255, 0.28);
}

/* Two bars: the video is playing, so the button pauses it. */
.ks-hero-video__toggle-icon {
	display: block;
	width: 0.72rem;
	height: 0.85rem;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

/* Pressed means paused, so the button offers play. */
.ks-hero-video__toggle[aria-pressed="true"] .ks-hero-video__toggle-icon {
	width: 0;
	height: 0;
	margin-left: 3px;
	border: 0;
	border-top: 0.47rem solid transparent;
	border-bottom: 0.47rem solid transparent;
	border-left: 0.8rem solid currentColor;
}

/* --- Entrance animation -------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.ks-hero-video--animate .ks-hero-video__eyebrow,
	.ks-hero-video--animate .ks-hero-video__title,
	.ks-hero-video--animate .ks-hero-video__description,
	.ks-hero-video--animate .ks-hero-video__actions {
		animation: kshv-rise 0.62s var(--kshv-ease) both;
	}

	.ks-hero-video--animate .ks-hero-video__title {
		animation-delay: 0.08s;
	}

	.ks-hero-video--animate .ks-hero-video__description {
		animation-delay: 0.16s;
	}

	.ks-hero-video--animate .ks-hero-video__actions {
		animation-delay: 0.24s;
	}
}

@keyframes kshv-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 18px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.ks-hero-video__video,
	.ks-hero-video__toggle {
		display: none;
	}

	.ks-hero-video__button,
	.ks-hero-video__button i {
		transition: none;
	}

	.ks-hero-video__button:hover,
	.ks-hero-video__button:focus-visible {
		transform: none;
	}
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.ks-hero-video {
		min-height: var(--kshv-h-tablet, 550px);
	}

	.ks-hero-video__content {
		max-width: 38rem;
	}
}

@media (max-width: 767px) {
	.ks-hero-video {
		min-height: var(--kshv-h-mobile, 500px);
	}

	.ks-hero-video__inner {
		width: min(100% - 2rem, 1440px);
		padding: clamp(2.5rem, 9vw, 3.5rem) 0;
	}

	/* Centre-weighted overlays read better on a narrow, tall crop. */
	.ks-hero-video--overlay-diagonal .ks-hero-video__overlay {
		background: linear-gradient(
			180deg,
			rgba(var(--kshv-overlay-rgb, 15, 34, 53), calc(var(--kshv-overlay-opacity, 0.45) * 0.45)) 0%,
			rgba(var(--kshv-overlay-rgb, 15, 34, 53), var(--kshv-overlay-opacity, 0.45)) 100%
		);
	}

	.ks-hero-video__eyebrow {
		letter-spacing: 0.2em;
	}

	.ks-hero-video__description {
		margin-top: 1.1rem;
	}

	.ks-hero-video__actions {
		margin-top: 1.7rem;
	}

	.ks-hero-video__toggle {
		width: 2.5rem;
		height: 2.5rem;
	}
}

@media (max-width: 420px) {
	.ks-hero-video__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ks-hero-video__button {
		justify-content: center;
		padding: 0.9rem 1.4rem;
	}
}