/* Homepage hero slider. */

.sm-hero {
	position: relative;
	height: 100vh;
	min-height: 640px;
	overflow: hidden;
	background: var(--sm-ivory);
	font-family: var(--sm-font-body);
}

.sm-hero *,
.sm-hero *::before,
.sm-hero *::after {
	box-sizing: border-box;
}

/* The wrapper needs an explicit height too: without it `height:100%` on the
   slide has no definite parent to resolve against and the slides collapse
   to their content height. Elementor's own swiper CSS supplies this in some
   versions and not others, so never rely on it. */
.sm-hero .swiper,
.sm-hero .swiper-wrapper,
.sm-hero .swiper-slide {
	height: 100%;
}

.sm-hero__slide {
	position: relative;
	--sm-scrim: .96;
}

.sm-hero__bg {
	position: absolute;
	inset: -6% 0;
	background-size: cover;
	background-position: center right;
	will-change: transform;
}

/* The ivory wash that keeps charcoal type readable over the photograph. */
.sm-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(250, 248, 245, var(--sm-scrim)) 0%,
		rgba(250, 248, 245, calc(var(--sm-scrim) * .62)) 45%,
		rgba(250, 248, 245, 0) 70%
	);
	pointer-events: none;
}

.sm-hero__content {
	position: relative;
	z-index: 3;
	max-width: var(--sm-container);
	margin: 0 auto;
	height: 100%;
	padding: 0 var(--sm-gutter);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sm-hero__eyebrow {
	font-family: var(--sm-font-btn);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sm-gold);
	margin-bottom: 16px;
}

.sm-hero__title {
	font-family: var(--sm-font-head);
	font-weight: 700;
	font-size: clamp(42px, 6.5vw, 82px);
	line-height: 1.02;
	color: var(--sm-charcoal);
	margin: 0 0 18px;
}

.sm-hero__title span {
	color: var(--sm-gold);
}

.sm-hero__text {
	font-size: clamp(15px, 1.5vw, 18px);
	color: var(--sm-text-soft);
	max-width: 430px;
	margin: 0 0 30px;
}

.sm-hero__btns {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* Entrance: staggered, and only for the slide currently on screen. */
.sm-hero__slide .sm-hero__eyebrow,
.sm-hero__slide .sm-hero__title,
.sm-hero__slide .sm-hero__text,
.sm-hero__slide .sm-hero__btns {
	opacity: 0;
	transform: translateY(34px);
}

.sm-hero__slide.swiper-slide-active .sm-hero__eyebrow { animation: smHeroUp .8s .20s forwards; }
.sm-hero__slide.swiper-slide-active .sm-hero__title   { animation: smHeroUp .8s .35s forwards; }
.sm-hero__slide.swiper-slide-active .sm-hero__text    { animation: smHeroUp .8s .50s forwards; }
.sm-hero__slide.swiper-slide-active .sm-hero__btns    { animation: smHeroUp .8s .65s forwards; }

@keyframes smHeroUp {
	to {
		opacity: 1;
		transform: none;
	}
}

/* Pagination and arrows. */
.sm-hero__pagination {
	position: absolute;
	bottom: 34px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	width: auto;
}

.sm-hero__pagination .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: var(--sm-gold);
	opacity: .4;
	transition: width .3s ease, opacity .3s ease;
}

.sm-hero__pagination .swiper-pagination-bullet-active {
	opacity: 1;
	width: 30px;
	border-radius: 6px;
}

.sm-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, .7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--sm-burgundy);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
	transition: background .3s ease, color .3s ease;
}

.sm-hero__nav:hover {
	background: var(--sm-gold);
	color: #fff;
}

.sm-hero__nav--prev { left: 24px; }
.sm-hero__nav--next { right: 24px; }

/* Floating statistic cards. */
.sm-hero__floats {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
}

.sm-hero__float {
	position: absolute;
	right: 9%;
	background: rgba(255, 255, 255, .78);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--sm-gold-30);
	border-radius: 16px;
	padding: 14px 20px;
	box-shadow: 0 12px 30px rgba(27, 27, 27, .1);
	text-align: center;
	animation: smFloaty 5s ease-in-out infinite;
	animation-delay: calc(var(--sm-i, 0) * .8s);
	/* Spread the cards down the right edge, however many there are. */
	top: calc(20% + (var(--sm-i, 0) * 22%));
}

.sm-hero__float:nth-child(even) {
	right: 4%;
}

.sm-hero__float strong {
	display: block;
	font-family: var(--sm-font-head);
	font-weight: 700;
	font-size: 26px;
	color: var(--sm-gold);
}

.sm-hero__float span {
	font-size: 11.5px;
	color: var(--sm-text-soft);
	letter-spacing: .3px;
}

@keyframes smFloaty {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
	.sm-hero__float {
		animation: none;
	}

	.sm-hero__slide .sm-hero__eyebrow,
	.sm-hero__slide .sm-hero__title,
	.sm-hero__slide .sm-hero__text,
	.sm-hero__slide .sm-hero__btns {
		opacity: 1;
		transform: none;
		animation: none !important;
	}
}

@media (max-width: 768px) {
	.sm-hero__content { padding: 0 var(--sm-gutter-sm); }
	.sm-hero__floats { display: none; }
	.sm-hero { min-height: 520px; }

	/* At this width the arrows sit on top of the headline. The slider is
	   swipeable and keeps its pagination dots, so drop them. */
	.sm-hero__nav { display: none; }
}