/**
 * Hero Slider — front-end styles (v1.1, "contemporary gravitas").
 *
 * Theme-able via --hs-* variables. Logical properties keep RTL automatic.
 */

.hs-slider {
	/* ---- Theming surface ---- */
	--hs-height: 70vh;
	--hs-max-content: 720px;
	--hs-pad: clamp(1.5rem, 4vw, 4.5rem);

	--hs-eyebrow-size: clamp(0.75rem, 1vw, 0.875rem);
	--hs-heading-size: clamp(1.9rem, 4.5vw, 3.5rem);
	--hs-sub-size: clamp(1rem, 1.5vw, 1.2rem);

	--hs-heading-leading: 1.18;
	--hs-heading-tracking: -0.01em;
	--hs-eyebrow-tracking: 0.08em;
	--hs-gap: clamp(0.75rem, 1.4vw, 1.4rem);

	--hs-accent: #14625e;
	--hs-accent-text: #ffffff;
	--hs-radius: 6px;

	--hs-reveal-distance: 18px;
	--hs-reveal-duration: 0.7s;
	--hs-reveal-stagger: 0.12s;

	position: relative;
	width: 100%;
}

.hs-slider .swiper,
.hs-slider .hs-swiper-root {
	width: 100%;
	height: auto;
	min-height: var(--hs-height);
	overflow: hidden;
	/* Per-corner radius (set as vars on the root). Applied here so the media
	   is clipped to rounded corners while the ring wheel — which lives OUTSIDE
	   this element — is never clipped. */
	border-top-left-radius: var(--hs-radius-tl, 0);
	border-top-right-radius: var(--hs-radius-tr, 0);
	border-bottom-right-radius: var(--hs-radius-br, 0);
	border-bottom-left-radius: var(--hs-radius-bl, 0);
}

.hs-slider:not(.hs-ready) .swiper-wrapper > .hs-slide:not(:first-child) {
	display: none;
}

.hs-slide {
	position: relative;
	display: flex;
	min-height: var(--hs-height);
	overflow: hidden;
	box-sizing: border-box;
	/* Round each slide too (matching the wrapper) so BOTH the image and the
	   overlay/scrim layer inside are clipped to the same rounded corners.
	   Rounding only the outer wrapper left the scrim's square corners showing
	   because Swiper transforms the wrapper into its own layer. */
	border-top-left-radius: var(--hs-radius-tl, 0);
	border-top-right-radius: var(--hs-radius-tr, 0);
	border-bottom-right-radius: var(--hs-radius-br, 0);
	border-bottom-left-radius: var(--hs-radius-bl, 0);
}
/* A single clip layer that wraps the image AND the overlay/scrim, so both are
   clipped together to the rounded corners. This is the reliable way to round a
   full-bleed image + overlay (relying on separate radii per layer can fail
   inside Swiper's transformed wrapper). */
.hs-media-clip {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	overflow: hidden;
	border-top-left-radius: var(--hs-radius-tl, 0);
	border-top-right-radius: var(--hs-radius-tr, 0);
	border-bottom-right-radius: var(--hs-radius-br, 0);
	border-bottom-left-radius: var(--hs-radius-bl, 0);
	/* Force its own compositing layer so the rounded clip is always honored,
	   even over the image's and scrim's paint layers. */
	transform: translateZ(0);
	isolation: isolate;
}
.hs-slider .swiper-slide.hs-slide { height: auto; min-height: var(--hs-height); }
.hs-slider .swiper-wrapper { height: auto; align-items: stretch; }

/* ---- Responsive image (replaces background-image) ---- */
/* The slide uses min-height (no explicit height), so when long content makes
   it grow on narrow screens the image still covers: inset:0 + height:100%
   resolves against the slide's real rendered height, and object-fit:cover
   keeps the photo filling it.

   IMPORTANT: many themes (notably Elementor) ship `.elementor img { height: auto }`
   which has enough specificity/late ordering to override `.hs-img { height:100% }`,
   forcing the image to its intrinsic height and leaving the lower slide
   uncovered. We defend with a higher-specificity selector and !important on the
   sizing properties so the image fills the slide regardless of the theme. */
.hs-slider .hs-slide .hs-img,
.hs-slider .hs-split-media .hs-img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	min-height: 100% !important;
	margin: 0 !important;
	object-fit: cover;
	object-position: center;
	z-index: 1;
}
.hs-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;
}
.hs-picture {
	position: absolute;
	inset: 0;
	display: block;
}
.hs-picture .hs-img { position: absolute; inset: 0; }
/* Per-slide mobile focal point (set inline as --hs-img-pos-m). */
@media (max-width: 782px) {
	.hs-slider .hs-slide .hs-img,
	.hs-img { object-position: var(--hs-img-pos-m, center); }
}

/* Background video — fills exactly like the image (which works), using the
   same absolute inset:0 + object-fit:cover approach. Defended against theme
   `video {}` rules. */
.hs-slider .hs-slide .hs-video,
.hs-slider .hs-media-clip .hs-video,
.hs-slider .hs-split-media .hs-video {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: cover !important;
	object-position: center !important;
	z-index: 1;
	pointer-events: none;
	border: 0 !important;
	background: transparent;
	display: block !important;
	/* Give the video its own compositing layer so repaints elsewhere in the
	   hero (the progress bar redrawing) do not force it to be re-composited,
	   which showed up as stutter during playback. */
	transform: translateZ(0);
	backface-visibility: hidden;
	contain: paint;
}
@media (max-width: 782px) {
	.hs-slider .hs-slide .hs-video { object-position: var(--hs-img-pos-m, center); }
}

/* ---- Directional scrim (replaces flat overlay) ---- */
.hs-scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	/* Inherit the hero's rounded corners so the overlay never shows square
	   corners over a rounded image. */
	border-top-left-radius: var(--hs-radius-tl, 0);
	border-top-right-radius: var(--hs-radius-tr, 0);
	border-bottom-right-radius: var(--hs-radius-br, 0);
	border-bottom-left-radius: var(--hs-radius-bl, 0);
}
.hs-scrim-bottom {
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, var(--hs-scrim-strength)) 0%,
		rgba(0, 0, 0, calc(var(--hs-scrim-strength) * 0.5)) 32%,
		transparent 72%
	);
}
.hs-scrim-left {
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, var(--hs-scrim-strength)) 0%,
		rgba(0, 0, 0, calc(var(--hs-scrim-strength) * 0.45)) 38%,
		transparent 78%
	);
}
.hs-scrim-right {
	background: linear-gradient(
		to left,
		rgba(0, 0, 0, var(--hs-scrim-strength)) 0%,
		rgba(0, 0, 0, calc(var(--hs-scrim-strength) * 0.45)) 38%,
		transparent 78%
	);
}
.hs-scrim-flat {
	background: rgba(0, 0, 0, var(--hs-scrim-strength));
}

/* ---- Content ---- */
.hs-slide-content {
	position: relative;
	z-index: 3;
	display: flex;
	width: 100%;
	height: 100%;
	padding: var(--hs-pad);
	box-sizing: border-box;
}
.hs-slide-inner {
	display: flex;
	flex-direction: column;
	gap: var(--hs-gap);
	max-width: var(--hs-max-content);
}

/* ---- Typography ---- */
.hs-eyebrow {
	font-size: var(--hs-eyebrow-size);
	letter-spacing: var(--hs-eyebrow-tracking);
	font-weight: 600;
	text-transform: uppercase;
	opacity: 0.9;
}
.hs-heading {
	margin: 0;
	font-size: var(--hs-heading-size);
	line-height: var(--hs-heading-leading);
	letter-spacing: var(--hs-heading-tracking);
	font-weight: 700;
}
.hs-subheading {
	margin: 0;
	font-size: var(--hs-sub-size);
	line-height: 1.65;
	opacity: 0.95;
	max-width: 52ch;
}

.hs-text-light .hs-eyebrow,
.hs-text-light .hs-heading,
.hs-text-light .hs-subheading {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.hs-text-dark .hs-eyebrow,
.hs-text-dark .hs-heading,
.hs-text-dark .hs-subheading {
	color: #14161a;
}
.hs-text-light .hs-eyebrow { color: #fff; }
.hs-text-dark .hs-eyebrow { color: var(--hs-accent); }

/* ---- Buttons (primary + ghost) ---- */
.hs-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.25rem;
}
.hs-button {
	display: inline-block;
	padding: 0.85em 1.7em;
	background: var(--hs-accent);
	color: var(--hs-accent-text);
	text-decoration: none;
	border-radius: var(--hs-radius);
	font-weight: 600;
	line-height: 1.2;
	border: 1.5px solid var(--hs-accent);
	transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.hs-button:hover,
.hs-button:focus {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: var(--hs-accent-text);
}
.hs-button-ghost {
	background: transparent;
	border-color: currentColor;
}
.hs-text-light .hs-button-ghost { color: #fff; }
.hs-text-dark .hs-button-ghost { color: #14161a; }
.hs-button-ghost:hover,
.hs-button-ghost:focus {
	background: rgba(127, 127, 127, 0.12);
}

/* ---- Composition: full (positional layouts) ---- */
.hs-layout-center .hs-slide-content { align-items: center; justify-content: center; text-align: center; }
.hs-layout-center .hs-slide-inner { align-items: center; margin-inline: auto; }
.hs-layout-center .hs-buttons { justify-content: center; }

.hs-layout-left .hs-slide-content { align-items: center; justify-content: flex-start; text-align: start; }
.hs-layout-right .hs-slide-content { align-items: center; justify-content: flex-end; text-align: start; }
.hs-layout-bottom-left .hs-slide-content { align-items: flex-end; justify-content: flex-start; text-align: start; }
.hs-layout-bottom-center .hs-slide-content { align-items: flex-end; justify-content: center; text-align: center; }
.hs-layout-bottom-center .hs-slide-inner { align-items: center; }
.hs-layout-bottom-center .hs-buttons { justify-content: center; }

.hs-layout-boxed .hs-slide-content { align-items: center; justify-content: center; text-align: center; }
.hs-layout-boxed .hs-slide-inner {
	align-items: center;
	padding: clamp(1.5rem, 3vw, 3rem);
	background: rgba(0, 0, 0, 0.42);
	border-radius: var(--hs-radius);
	backdrop-filter: blur(2px);
}
.hs-layout-boxed.hs-text-dark .hs-slide-inner { background: rgba(255, 255, 255, 0.8); }
.hs-layout-boxed .hs-buttons { justify-content: center; }

/* ---- Composition: split editorial ---- */
.hs-comp-split { display: flex; }
.hs-comp-split.hs-image-right { flex-direction: row-reverse; }
.hs-split-media {
	position: relative;
	flex: 1 1 50%;
	overflow: hidden;
}
.hs-split-panel {
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	padding: var(--hs-pad);
	box-sizing: border-box;
}
.hs-comp-split .hs-slide-content { position: static; padding: 0; height: auto; }
.hs-comp-split.hs-text-dark .hs-split-panel { background: #ffffff; }
.hs-comp-split.hs-text-light .hs-split-panel { background: #14161a; }

/* ---- Composition: lower third ---- */
.hs-comp-lower-third .hs-slide-content { align-items: flex-end; padding: 0; }
.hs-comp-lower-third .hs-slide-inner {
	width: 100%;
	max-width: none;
	padding: clamp(1.25rem, 3vw, 2.5rem) var(--hs-pad);
	box-sizing: border-box;
}
.hs-comp-lower-third.hs-text-light .hs-slide-inner { background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.25)); }
.hs-comp-lower-third.hs-text-dark .hs-slide-inner { background: rgba(255, 255, 255, 0.86); }

/* ---- Staggered reveal ---- */
.hs-reveal .hs-reveal-item {
	opacity: 0;
	transform: translateY(var(--hs-reveal-distance));
}
.hs-reveal .swiper-slide-active .hs-reveal-item {
	animation: hs-rise var(--hs-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hs-reveal .swiper-slide-active .hs-reveal-item:nth-child(1) { animation-delay: 0.1s; }
.hs-reveal .swiper-slide-active .hs-reveal-item:nth-child(2) { animation-delay: calc(0.1s + var(--hs-reveal-stagger)); }
.hs-reveal .swiper-slide-active .hs-reveal-item:nth-child(3) { animation-delay: calc(0.1s + var(--hs-reveal-stagger) * 2); }
.hs-reveal .swiper-slide-active .hs-reveal-item:nth-child(4) { animation-delay: calc(0.1s + var(--hs-reveal-stagger) * 3); }
@keyframes hs-rise {
	to { opacity: 1; transform: translateY(0); }
}

/* ---- Ken Burns (slow zoom on the active slide) ---- */
.hs-kenburns .swiper-slide-active .hs-img,
.hs-kenburns .swiper-slide-duplicate-active .hs-img {
	animation: hs-kb 9s ease-out forwards;
}
@keyframes hs-kb {
	from { transform: scale(1); }
	to { transform: scale(1.09); }
}

/* ---- Navigation, pagination, play/pause ---- */
.hs-slider .swiper-button-prev,
.hs-slider .swiper-button-next {
	color: #fff;
	background: rgba(0, 0, 0, 0.25);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	transition: background 0.15s ease;
}
.hs-slider .swiper-button-prev:hover,
.hs-slider .swiper-button-next:hover { background: rgba(0, 0, 0, 0.5); }
.hs-slider .swiper-button-prev::after,
.hs-slider .swiper-button-next::after { font-size: 18px; font-weight: 700; }

.hs-slider .swiper-pagination-bullet { background: #fff; opacity: 0.55; }
.hs-slider .swiper-pagination-bullet-active { opacity: 1; }

.hs-playpause {
	position: absolute;
	z-index: 6;
	inset-block-end: 16px;
	inset-inline-end: 16px;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}
.hs-playpause:hover { background: rgba(0, 0, 0, 0.6); }
.hs-icon-pause,
.hs-icon-play { display: block; }
.hs-icon-pause {
	width: 10px;
	height: 12px;
	border-inline: 3px solid #fff;
}
.hs-icon-play {
	width: 0;
	height: 0;
	border-block: 6px solid transparent;
	border-inline-start: 10px solid #fff;
	border-inline-end: 0;
	display: none;
}
.hs-playpause[data-state="paused"] .hs-icon-pause { display: none; }
.hs-playpause[data-state="paused"] .hs-icon-play { display: block; }

/* ---- Proof strip ---- */
.hs-proof {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: #fff;
}
.hs-proof-item {
	flex: 1 1 0;
	min-width: 140px;
	padding: 1.1rem 1rem;
	text-align: center;
	border-inline-start: 1px solid rgba(0, 0, 0, 0.08);
}
.hs-proof-item:first-child { border-inline-start: 0; }
.hs-proof-number {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--hs-accent);
	line-height: 1.1;
}
.hs-proof-label {
	display: block;
	font-size: 0.85rem;
	color: #555;
	margin-top: 0.25rem;
}

/* ---- Accessibility: reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.hs-reveal .hs-reveal-item { opacity: 1; transform: none; animation: none; }
	.hs-kenburns .swiper-slide-active .hs-img { animation: none; }
	.hs-button { transition: none; }
}

/* ---- Responsive ---- */
@media (max-width: 782px) {
	.hs-comp-split,
	.hs-comp-split.hs-image-right { flex-direction: column; height: auto; }
	.hs-comp-split .hs-split-media { min-height: 240px; flex-basis: auto; }
	.hs-comp-split .hs-split-panel { flex-basis: auto; }
	.hs-comp-split.hs-slide { height: auto; }
}
@media (max-width: 600px) {
	.hs-slider { --hs-height: 62vh; }
	.hs-proof-item { flex-basis: 50%; }
}

/* ===================================================================== */
/* v1.4 additions                                                        */
/* ===================================================================== */

/* ---- Per-slide variable consumption ---- */
/* These override the slider-level defaults when a slide sets inline vars. */
.hs-slide { font-family: var(--hs-font, inherit); }
.hs-heading { color: var(--hs-heading-color, inherit); }
.hs-subheading { color: var(--hs-sub-color, inherit); }
/* Extra space specifically after the heading, added on top of the flex gap.
   Defaults to 0 so it's a no-op unless the slide sets the variable. */
.hs-heading { margin-bottom: var(--hs-gap-after-heading, 0); }

/* ---- New content positions (full composition) ---- */
.hs-layout-top-left .hs-slide-content { align-items: flex-start; justify-content: flex-start; text-align: start; }
.hs-layout-top-center .hs-slide-content { align-items: flex-start; justify-content: center; text-align: center; }
.hs-layout-top-center .hs-slide-inner { align-items: center; }
.hs-layout-top-center .hs-buttons { justify-content: center; }
.hs-layout-bottom-right .hs-slide-content { align-items: flex-end; justify-content: flex-end; text-align: start; }

/* ---- Forced text alignment override (per slide) ---- */
.hs-align-start  .hs-slide-content { text-align: start; }
.hs-align-center .hs-slide-content { text-align: center; }
.hs-align-center .hs-slide-inner { align-items: center; margin-inline: auto; }
.hs-align-center .hs-buttons { justify-content: center; }
.hs-align-end    .hs-slide-content { text-align: end; }
.hs-align-end    .hs-slide-inner { align-items: flex-end; }
.hs-align-end    .hs-buttons { justify-content: flex-end; }

/* ---- Image object-fit (responsive) ---- */
.hs-img.hs-fit-cover { object-fit: cover; }
.hs-img.hs-fit-contain { object-fit: contain; }
.hs-picture { position: absolute; inset: 0; z-index: 1; display: block; }
.hs-picture .hs-img { position: absolute; inset: 0; }
@media (max-width: 782px) {
	.hs-img.hs-fit-m-cover { object-fit: cover; }
	.hs-img.hs-fit-m-contain { object-fit: contain; }
}

/* ---- Additional scrims ---- */
.hs-scrim-top {
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, var(--hs-scrim-strength)) 0%,
		rgba(0, 0, 0, calc(var(--hs-scrim-strength) * 0.5)) 32%,
		transparent 72%
	);
}
.hs-scrim-radial {
	background: radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, var(--hs-scrim-strength)) 0%,
		rgba(0, 0, 0, calc(var(--hs-scrim-strength) * 0.4)) 55%,
		transparent 100%
	);
}

/* ---- Button icons + per-slide styling ---- */
.hs-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--hs-btn-bg, var(--hs-accent));
	color: var(--hs-btn-text, var(--hs-accent-text));
	border-color: var(--hs-btn-bg, var(--hs-accent));
	border-radius: var(--hs-btn-radius, var(--hs-radius));
}
.hs-button-ghost {
	background: var(--hs-btn2-bg, transparent);
	color: var(--hs-btn2-text, currentColor);
	border-color: var(--hs-btn2-text, currentColor);
	border-radius: var(--hs-btn2-radius, var(--hs-radius));
}
.hs-button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
}
.hs-button-icon svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.hs-button-icon img { width: 100%; height: 100%; object-fit: contain; }

/* ---- Modern pagination styles ---- */
/* Bars */
.hs-pag-bars .swiper-pagination-bullet {
	width: 28px;
	height: 4px;
	border-radius: 2px;
	background: #fff;
	opacity: 0.5;
	transition: opacity 0.2s ease, width 0.2s ease;
}
.hs-pag-bars .swiper-pagination-bullet-active { opacity: 1; width: 40px; }

/* Thin lines */
.hs-pag-lines .swiper-pagination-bullet {
	width: 36px;
	height: 2px;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.45);
	opacity: 1;
	transition: background 0.2s ease;
}
.hs-pag-lines .swiper-pagination-bullet-active { background: #fff; }

/* Numbers */
.hs-pag-numbers .swiper-pagination-bullet.hs-bullet-number {
	width: auto;
	height: auto;
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	font-weight: 600;
	padding: 0 6px;
	opacity: 1;
	border-radius: 0;
}
.hs-pag-numbers .swiper-pagination-bullet-active.hs-bullet-number {
	color: #fff;
	border-bottom: 2px solid var(--hs-accent);
}

/* Fraction */
.hs-pag-fraction.swiper-pagination,
.hs-pagination-fraction {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	width: auto;
	inset-inline-start: auto;
	inset-inline-end: 18px;
	inset-block-end: 18px;
	left: auto;
}

/* Progress bar */
.hs-pag-progress .swiper-pagination-progressbar-fill,
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: var(--hs-accent);
}


/* ===================================================================== */
/* v1.4.3 — progress ring pagination + advanced button styling           */
/* ===================================================================== */

/* ---- Progress ring pagination — 3-window rotating wheel ---- */
.hs-ring-wheel {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	z-index: 6;
	pointer-events: none;
	/* A fixed-size stage; arrows + numbers are absolutely placed within it so
	   the arrows can sit right next to the side rings. */
	width: 220px;
	height: 78px;
}
/* The numbers live here, absolutely positioned on their arc. */
.hs-ring-track-area {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 160px;
	height: 78px;
}
/* Nav arrows hug the side rings. The side rings sit at x = ±52px (centre of
   the stage) and drop ~24px on the arc; we place the arrows just beyond them
   and vertically aligned with that drop. */
.hs-ring-arrow {
	pointer-events: auto;
	position: absolute;
	top: 30px;
	width: var(--hs-ring-arrow-size, 30px);
	height: var(--hs-ring-arrow-size, 30px);
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0.7;
	transition: opacity 0.2s ease, transform 0.18s ease;
}
.hs-ring-arrow-prev { left: 50%; transform: translateX( calc( -50% - 86px ) ); }
.hs-ring-arrow-next { left: 50%; transform: translateX( calc( -50% + 86px ) ); }
.hs-ring-arrow svg { display: block; width: 72%; height: 72%; }
.hs-ring-arrow-prev:hover { opacity: 1; transform: translateX( calc( -50% - 86px ) ) scale(1.15); }
.hs-ring-arrow-next:hover { opacity: 1; transform: translateX( calc( -50% + 86px ) ) scale(1.15); }
.hs-ring-arrow:active { opacity: 1; }
.hs-ring-arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.hs-text-dark .hs-ring-arrow { color: #1a1a1a; }

/* Force-hide Swiper's own arrows whenever the ring wheel is present,
   in case a stale markup or old JS still renders them. */
.hs-slider:has(.hs-ring-wheel) .swiper-button-prev,
.hs-slider:has(.hs-ring-wheel) .swiper-button-next { display: none !important; }
.hs-ring-node {
	position: absolute;
	left: 50%;
	top: 8px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
	opacity: 0.6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Mechanical motion: a firm cubic-bezier with a tiny settle, like a cog
	   clicking into place. Transform + opacity only, GPU-friendly. */
	transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.30, 1),
				opacity 0.45s ease;
	will-change: transform, opacity;
}
.hs-ring-node.is-center { opacity: 1; }
.hs-ring-svg { width: 40px; height: 40px; display: block; }
.hs-ring-track { stroke: rgba(255, 255, 255, 0.28); }
.hs-text-dark .hs-ring-track,
.hs-ring-wheel.hs-on-light .hs-ring-track { stroke: rgba(0, 0, 0, 0.18); }
.hs-ring-progress { transition: stroke-dashoffset 0.1s linear; }
.hs-ring-num {
	position: absolute;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	line-height: 1;
	pointer-events: none;
}
.hs-text-dark .hs-ring-num { color: #1a1a1a; }
/* Side rings are dimmer + smaller (scale handled inline). Center number a touch larger. */
.hs-ring-node.is-center .hs-ring-num { font-size: 14px; }

@media ( prefers-reduced-motion: reduce ) {
	.hs-ring-node { transition: opacity 0.2s ease; }
}

/* ---- Ring hover thumbnail preview ---- */
.hs-ring-thumb {
	position: absolute;
	bottom: calc(100% + 14px);
	left: 50%;
	width: 168px;
	transform: translateX(-50%) translateY(8px) scale(0.92);
	transform-origin: bottom center;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16);
	padding: 6px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s;
	z-index: 20;
}
.hs-ring-thumb-img {
	display: block;
	width: 100%;
	height: 96px;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
	background-color: #e5e7e9;
}
.hs-ring-thumb-title {
	display: block;
	margin-top: 6px;
	padding: 0 4px 2px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	color: #1d2327;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Little pointer under the card aiming at the ring. */
.hs-ring-thumb::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-top-color: #ffffff;
}
/* Reveal on hover / keyboard focus of the ring node. */
.hs-ring-node:hover .hs-ring-thumb,
.hs-ring-node:focus-visible .hs-ring-thumb {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0) scale(1);
	transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
/* Raise the hovered node above its siblings so the card isn't clipped by them. */
.hs-ring-node:hover, .hs-ring-node:focus-visible { z-index: 21; }

@media ( prefers-reduced-motion: reduce ) {
	.hs-ring-thumb { transition: opacity 0.15s ease, visibility 0s linear 0.15s; transform: translateX(-50%); }
	.hs-ring-node:hover .hs-ring-thumb,
	.hs-ring-node:focus-visible .hs-ring-thumb { transform: translateX(-50%); }
}

@media ( max-width: 600px ) {
	.hs-ring-thumb { width: 132px; }
	.hs-ring-thumb-img { height: 76px; }
}

@media ( max-width: 600px ) {
	.hs-ring-wheel { bottom: 14px; width: 190px; }
	.hs-ring-track-area { width: 150px; }
	.hs-ring-arrow { max-width: 34px; max-height: 34px; }
	.hs-ring-arrow-prev { transform: translateX( calc( -50% - 74px ) ); }
	.hs-ring-arrow-next { transform: translateX( calc( -50% + 74px ) ); }
	.hs-ring-arrow-prev:hover { transform: translateX( calc( -50% - 74px ) ) scale(1.15); }
	.hs-ring-arrow-next:hover { transform: translateX( calc( -50% + 74px ) ) scale(1.15); }
}

/* ---- Button base: consume advanced per-slide vars ---- */
.hs-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--hs-btn-bg, var(--hs-accent));
	color: var(--hs-btn-text, var(--hs-accent-text));
	border: 1px solid var(--hs-btn-border, transparent);
	border-radius: var(--hs-btn-radius, var(--hs-radius));
	box-shadow: var(--hs-btn-shadow, none);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.hs-button-ghost {
	background: var(--hs-btn2-bg, transparent);
	color: var(--hs-btn2-text, currentColor);
	border: 1px solid var(--hs-btn2-border, currentColor);
	border-radius: var(--hs-btn2-radius, var(--hs-radius));
	box-shadow: var(--hs-btn2-shadow, none);
}

/* ---- Presets: PRIMARY ---- */
/* Solid is the base above. */
.hs-button.hs-btn-gradient {
	/* gradient comes from --hs-btn-bg when two colors set; fallback diagonal accent */
	background: var(--hs-btn-bg, linear-gradient(135deg, var(--hs-accent), color-mix(in srgb, var(--hs-accent) 60%, #000)));
	border-color: transparent;
}
.hs-button.hs-btn-glass {
	background: var(--hs-btn-bg, rgba(255, 255, 255, 0.15));
	-webkit-backdrop-filter: blur(var(--hs-btn-blur, 10px));
	backdrop-filter: blur(var(--hs-btn-blur, 10px));
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--hs-btn-text, #fff);
}
.hs-button.hs-btn-outline {
	background: var(--hs-btn-bg, transparent);
	border: 2px solid var(--hs-btn-border, var(--hs-accent));
	color: var(--hs-btn-text, var(--hs-accent));
}
.hs-button.hs-btn-soft {
	background: var(--hs-btn-bg, var(--hs-accent));
	box-shadow: var(--hs-btn-shadow, 0 8px 24px rgba(0, 0, 0, 0.18));
}

/* ---- Presets: SECONDARY (ghost) ---- */
.hs-button-ghost.hs-btn-gradient {
	background: var(--hs-btn2-bg, linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05)));
	border-color: transparent;
	color: var(--hs-btn2-text, #fff);
}
.hs-button-ghost.hs-btn-glass {
	background: var(--hs-btn2-bg, rgba(255, 255, 255, 0.12));
	-webkit-backdrop-filter: blur(var(--hs-btn2-blur, 12px));
	backdrop-filter: blur(var(--hs-btn2-blur, 12px));
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: var(--hs-btn2-text, #fff);
}
.hs-button-ghost.hs-btn-outline {
	background: var(--hs-btn2-bg, transparent);
	border: 2px solid var(--hs-btn2-border, currentColor);
}
.hs-button-ghost.hs-btn-soft {
	background: var(--hs-btn2-bg, rgba(255, 255, 255, 0.9));
	color: var(--hs-btn2-text, #1a1a1a);
	border-color: transparent;
	box-shadow: var(--hs-btn2-shadow, 0 8px 24px rgba(0, 0, 0, 0.15));
}

/* ---- Inner shadow modifier (must beat preset shadows: matched specificity) ---- */
.hs-button.hs-btn-shadow-inner { box-shadow: var(--hs-btn-shadow, inset 0 2px 12px rgba(0,0,0,0.25)); }
.hs-button-ghost.hs-btn-shadow-inner { box-shadow: var(--hs-btn2-shadow, inset 0 2px 12px rgba(0,0,0,0.25)); }

/* ---- Hover effects ---- */
.hs-button:hover { transform: translateY(-2px); }
.hs-hover-none:hover { transform: none; }
.hs-hover-lift:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28); }
.hs-hover-grow:hover { transform: scale(1.05); }
/* Shine sweep */
.hs-hover-shine::after {
	content: "";
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transform: skewX(-20deg);
	transition: left 0.5s ease;
	z-index: 2;
	pointer-events: none;
}
.hs-hover-shine:hover::after { left: 130%; }
/* Fill from center */
.hs-hover-fill::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.18);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s ease;
	z-index: -1;
}
.hs-hover-fill:hover::before { transform: scaleX(1); }

/* Keep label/icon above hover pseudo-layers. */
.hs-button-label, .hs-button-icon { position: relative; z-index: 3; }

@media (prefers-reduced-motion: reduce) {
	.hs-button, .hs-button::after, .hs-button::before { transition: none !important; }
	.hs-button:hover { transform: none; }
}

/* ===================================================================== */
/* Full per-element control (text typography, content box, buttons)      */
/* ===================================================================== */

/* ---- Per-text weight / letter-spacing / line-height ---- */
.hs-heading {
	font-weight: var(--hs-heading-weight, 700);
	letter-spacing: var(--hs-heading-spacing, var(--hs-heading-tracking));
	line-height: var(--hs-heading-leading, var(--hs-heading-leading-default, 1.18));
}
.hs-subheading {
	font-weight: var(--hs-sub-weight, 400);
	letter-spacing: var(--hs-sub-spacing, normal);
	line-height: var(--hs-sub-leading, 1.55);
}
.hs-eyebrow {
	font-weight: var(--hs-eyebrow-weight, 600);
	letter-spacing: var(--hs-eyebrow-spacing, var(--hs-eyebrow-tracking));
	color: var(--hs-eyebrow-color, inherit);
}

/* ---- Text transform + italic utilities ---- */
.hs-tt-none { text-transform: none; }
.hs-tt-uppercase { text-transform: uppercase; }
.hs-tt-lowercase { text-transform: lowercase; }
.hs-tt-capitalize { text-transform: capitalize; }
.hs-italic { font-style: italic; }

/* ---- Content box / container ---- */
.hs-slide-inner.hs-has-box {
	background: var(--hs-box-bg, transparent);
	padding: var(--hs-box-padding, 1.5rem);
	border-radius: var(--hs-box-radius, 0);
	border: var(--hs-box-border-width, 0) solid var(--hs-box-border-color, transparent);
	box-shadow: var(--hs-box-shadow, none);
}
.hs-slide-inner.hs-has-box[style*="--hs-box-blur"] {
	-webkit-backdrop-filter: blur(var(--hs-box-blur, 0));
	backdrop-filter: blur(var(--hs-box-blur, 0));
}

/* ---- Buttons: consume size / weight / spacing / padding / border-width ---- */
.hs-button {
	font-size: var(--hs-btn-size, inherit);
	font-weight: var(--hs-btn-weight, 600);
	letter-spacing: var(--hs-btn-spacing, normal);
	padding: var(--hs-btn-pad-y, 0.85em) var(--hs-btn-pad-x, 1.6em);
	border-width: var(--hs-btn-border-width, 1px);
}
.hs-button-ghost {
	font-size: var(--hs-btn2-size, inherit);
	font-weight: var(--hs-btn2-weight, 600);
	letter-spacing: var(--hs-btn2-spacing, normal);
	padding: var(--hs-btn2-pad-y, 0.85em) var(--hs-btn2-pad-x, 1.6em);
	border-width: var(--hs-btn2-border-width, 1px);
}

/* ===================================================================== */
/* Full-bleed background with contained content                          */
/* ===================================================================== */

/* Full-width: break out of the theme's container so the hero spans the
   whole viewport width, even when placed inside a constrained column. */
/* Full-width breakout that does NOT cause a horizontal scrollbar. Plain 100vw
   includes the vertical scrollbar's width, making the element wider than the
   visible area. We subtract the scrollbar width (measured in JS and exposed as
   --hs-sbw on the root) so the breakout is exact. If the variable is missing it
   falls back to 0, matching plain 100vw. */
.hs-slider.hs-full-width {
	position: relative;
	width: calc( 100vw - var(--hs-sbw, 0px) );
	max-width: calc( 100vw - var(--hs-sbw, 0px) );
	margin-left: calc( ( 100vw - var(--hs-sbw, 0px) ) / -2 + 50% );
	margin-right: calc( ( 100vw - var(--hs-sbw, 0px) ) / -2 + 50% );
	left: 0;
	right: 0;
}

/* Contained content: keep the text/buttons within a centered max-width while
   the image stays full-bleed. Works with the existing position/align options. */
.hs-slider.hs-contain-content .hs-slide-content {
	max-width: var(--hs-content-max, 1200px);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	box-sizing: border-box;
	padding-left: clamp(16px, 4vw, 64px);
	padding-right: clamp(16px, 4vw, 64px);
}
/* When content is centered horizontally, keep the inner block aligned too. */
.hs-slider.hs-contain-content .hs-pos-center .hs-slide-content,
.hs-slider.hs-contain-content .hs-pos-top-center .hs-slide-content,
.hs-slider.hs-contain-content .hs-pos-bottom-center .hs-slide-content {
	text-align: inherit;
}

/* ===================================================================== */
/* Large screens & projectors — scale up so content isn't lost in space  */
/* ===================================================================== */

/* On very wide screens the clamp() maxima leave the text small relative to
   the huge hero. Raise the ceilings so the hero stays proportional. */
@media (min-width: 1600px) {
	.hs-slider {
		--hs-heading-size: clamp(2.4rem, 4vw, 5rem);
		--hs-sub-size: clamp(1.1rem, 1.5vw, 1.6rem);
		--hs-eyebrow-size: clamp(0.85rem, 1vw, 1.1rem);
		--hs-gap: clamp(1rem, 1.4vw, 2rem);
	}
	.hs-slider .hs-slide-content { max-width: min(var(--hs-max-content, 720px), 42vw); }
}

@media (min-width: 2200px) {
	.hs-slider {
		--hs-heading-size: clamp(3rem, 4vw, 7rem);
		--hs-sub-size: clamp(1.3rem, 1.6vw, 2.1rem);
		--hs-eyebrow-size: clamp(1rem, 1vw, 1.4rem);
	}
}

/* Preview-only badge indicating a background video is set (the preview shows
   the poster image; the video itself plays on the live site). */
.hs-preview-video-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 5;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 4px;
	letter-spacing: 0.02em;
	pointer-events: none;
}

/* ===================================================================== */
/* Angled "logo bar" pagination                                          */
/* Shape inspired by the brand logo: a slanted bar with triangular caps  */
/* separated by thin gaps, plus a hover preview (title above, thumb      */
/* below). All colours are configurable via CSS variables.               */
/* ===================================================================== */

.hs-logobar-host {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 30px;
	display: flex;
	justify-content: center;
	z-index: 8;
	pointer-events: none;
	padding: 0 clamp(16px, 4vw, 56px);
	box-sizing: border-box;
}
.hs-logobar {
	position: relative;
	display: flex;
	align-items: stretch;
	width: min(66%, 720px);
	height: var(--hs-lb-h, 8px);
	pointer-events: auto;
}

/* One continuous SVG bar: start zone, track and end zone are joined and split
   by S-curves that echo the swirl breaks in the logo. Geometry is drawn in JS
   against the real pixel size so the curves stay crisp at any width. */
.hs-logobar-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	/* Confine the bar's frequent repaints to its own layer. */
	transform: translateZ(0);
	contain: paint;
}

/* Hover / click targets — a taller invisible strip so the bar is easy to hit. */
.hs-logobar-segs {
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	bottom: -10px;
	display: flex;
	z-index: 3;
}
.hs-logobar-seg {
	flex: 1 1 0;
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
	color: inherit;
}
.hs-logobar-seg:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Hover preview: title sits ABOVE the bar, thumbnail BELOW it. */
.hs-logobar-title,
.hs-logobar-thumb {
	position: absolute;
	transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0.18s ease;
	pointer-events: none;
	z-index: 4;
}
.hs-logobar-title {
	bottom: calc(100% + 14px);
	max-width: 320px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}
.hs-logobar-thumb {
	top: calc(100% + 14px);
	width: 168px;
	height: 94px;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
	background-color: rgba(0, 0, 0, 0.35);
	border: 2px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.hs-logobar.is-preview .hs-logobar-title,
.hs-logobar.is-preview .hs-logobar-thumb {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 782px) {
	.hs-logobar-host { bottom: 20px; }
	.hs-logobar { width: min(90%, 520px); }
	.hs-logobar-thumb { width: 120px; height: 68px; }
	.hs-logobar-title { font-size: 12px; max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
	.hs-logobar-title,
	.hs-logobar-thumb { transition: none; }
}

/* ---- Numbered titles above each slide's segment ---- */
.hs-logobar-labels {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + 12px);
	height: 0;
	pointer-events: none;
}
.hs-logobar-label {
	position: absolute;
	bottom: 0;
	display: flex;
	align-items: baseline;
	gap: 7px;
	white-space: nowrap;
	color: #fff;
	opacity: 0.55;
	transition: opacity 0.25s ease;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.hs-logobar-label.is-active { opacity: 1; }
.hs-logobar-num {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}
.hs-logobar-text {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.01em;
	max-width: 20ch;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Dimmed idle state, restored on hover ---- */
/* The whole strip (bar + labels) sits at the chosen opacity so it stays out of
   the way over video, and returns to full strength on hover or keyboard focus. */
.hs-logobar-host.is-dimmable {
	opacity: var(--hs-lb-dim, 1);
	transition: opacity 0.3s ease;
}
.hs-logobar-host.is-dimmable:hover,
.hs-logobar-host.is-dimmable:focus-within {
	opacity: 1;
}

@media (max-width: 782px) {
	.hs-logobar-labels { bottom: calc(100% + 9px); }
	.hs-logobar-num { font-size: 10px; }
	.hs-logobar-text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hs-logobar-host.is-dimmable,
	.hs-logobar-label { transition: none; }
}

/* Some mobile browsers draw their own play button over a video they have
   refused to start (Low Power Mode, data saver). The clip is decorative here,
   so the control is suppressed and the poster is left to stand on its own. */
.hs-video::-webkit-media-controls,
.hs-video::-webkit-media-controls-start-playback-button,
.hs-video::-webkit-media-controls-panel,
.hs-video::-webkit-media-controls-overlay-play-button {
	display: none !important;
	-webkit-appearance: none;
	appearance: none;
	opacity: 0;
}