/**
 * Home Kinetic Hero Styles
 * Post ID: 28390
 *
 * Where the heading and the rotating phrase share a line (desktop), they share
 * one type size through --hh-type-size, so the phrase sits on the heading's
 * line by construction rather than being tuned to match it. Once they stack
 * (<=1024px) --hh-phrase-size takes over and the two sizes are free to differ.
 * The swiper's track height is always derived from the phrase size.
 */

.home-hero-28390 {
	--hh-type-size: clamp(28px, 3.2vw, 64px);
	/* Equal to the heading wherever the two share a line; free to be smaller
	   once they stack, so the H1 does not have to shrink to the longest phrase. */
	--hh-phrase-size: var(--hh-type-size);
	--hh-line-height: 1.12;
	/* One line of type plus room for descenders and the fade edges. */
	--hh-track-height: calc(var(--hh-phrase-size) * var(--hh-line-height) * 1.24);
	/* Lines of phrase visible at once. Odd, so the active one sits on the
	   heading's line and the rest read as its past and upcoming neighbours.
	   Sized to fill the hero; script.js reads this value for slidesPerView, so
	   this is the single place the stack depth is set. */
	--hh-visible-lines: 11;

	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
}

/* The gradient lives in the shared tw-gradient-overlay partial; this only maps
   the Style-tab variables onto its contract. A scrim that is strongest at the
   bottom and absent at the top, so the headline stays legible without flattening
   the photograph. */
.home-hero-28390 .home-hero-28390__overlay {
	z-index: 1;
	--tw-go-angle: to top;
	--tw-go-color: #000000;
	--tw-go-strength: 50;
	--tw-go-solid: 0%;
	--tw-go-fade: 100%;
}

.home-hero-28390 .home-hero-28390__container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	box-sizing: border-box;
}

.home-hero-28390 .home-hero-28390__grid {
	display: block;
	width: 100%;
}

.home-hero-28390 .home-hero-28390__col--left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.home-hero-28390 .home-hero-28390__eyebrow {
	font-family: 'azo-sans-web', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tw-color-white, #FFFFFF);
	margin-bottom: 14px;
	display: inline-block;
}

/* Headline: heading + rotating phrase on one line */
.home-hero-28390 .home-hero-28390__headline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.32em;
	row-gap: 0.1em;
	width: 100%;
	margin: 0 0 32px 0;
	font-size: var(--hh-type-size);
}

.home-hero-28390 .home-hero-28390__heading {
	font-family: 'azo-sans-web', sans-serif;
	font-size: var(--hh-type-size);
	font-weight: 900;
	line-height: var(--hh-line-height);
	text-transform: uppercase;
	color: var(--tw-color-white, #FFFFFF);
	margin: 0;
	letter-spacing: -0.01em;
	flex: 0 0 auto;
}

/* Form & Search Bar */
.home-hero-28390 .home-hero-28390__form {
	/* The phrase track overflows its slot and passes over this box, so the form
	   is lifted above it. Without this the track swallows clicks on the submit
	   button, which sits inside the overlap. */
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	background-color: var(--tw-color-white, #FFFFFF);
	border-radius: 4px;
	padding: 6px 8px 6px 18px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
	width: 100%;
	max-width: 580px;
	box-sizing: border-box;
	gap: 12px;
}

.home-hero-28390 .home-hero-28390__input-wrap {
	flex: 1;
	min-width: 0;
}

.home-hero-28390 .home-hero-28390__input {
	width: 100%;
	border: none;
	outline: none;
	background: transparent;
	font-family: 'azo-sans-web', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #1e293b;
	padding: 10px 0;
	box-shadow: none;
}

.home-hero-28390 .home-hero-28390__input::placeholder {
	color: #94a3b8;
	font-weight: 400;
}

.home-hero-28390 .home-hero-28390__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	background-color: transparent;
	color: #C8102E;
	border: 2px solid #C8102E;
	border-radius: 4px;
	padding: 12px 22px;
	font-family: 'azo-sans-web', sans-serif;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: all 0.25s ease;
	text-decoration: none;
	flex-shrink: 0;
}

.home-hero-28390 .home-hero-28390__btn:hover {
	background-color: #C8102E;
	color: var(--tw-color-white, #FFFFFF);
}

/* Kinetic phrase carousel */
.home-hero-28390 .home-hero-28390__carousel-wrapper {
	position: relative;
	/* Fixed share of the line, so the wrap decision is the same for every
	   phrase and the block never reflows as they cycle. */
	flex: 1 1 auto;
	min-width: min(100%, 13em);
	font-size: var(--hh-phrase-size);
	/* Only the active line takes part in the layout. The rest of the track
	   overflows above and below, so the eyebrow and the form stay tight to the
	   heading instead of being pushed to the edges of the hero. */
	height: var(--hh-track-height);
	overflow: visible;
}

.home-hero-28390 .home-hero-28390__swiper {
	/* Centred on the single line the wrapper occupies, so the active phrase
	   lands on the heading's line while the stack grows symmetrically past it. */
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	height: calc(var(--hh-track-height) * var(--hh-visible-lines));
	/* Vertical axis on desktop. Opaque only across the centre line, then a long
	   graduated falloff so the further a phrase is from the active one the more
	   transparent it reads — the whole stack stays visible, none of it competes. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.07) 10%, rgba(0, 0, 0, 0.18) 24%, rgba(0, 0, 0, 0.38) 36%, rgba(0, 0, 0, 0.7) 44%, #000000 48%, #000000 52%, rgba(0, 0, 0, 0.7) 56%, rgba(0, 0, 0, 0.38) 64%, rgba(0, 0, 0, 0.18) 76%, rgba(0, 0, 0, 0.07) 90%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.07) 10%, rgba(0, 0, 0, 0.18) 24%, rgba(0, 0, 0, 0.38) 36%, rgba(0, 0, 0, 0.7) 44%, #000000 48%, #000000 52%, rgba(0, 0, 0, 0.7) 56%, rgba(0, 0, 0, 0.38) 64%, rgba(0, 0, 0, 0.18) 76%, rgba(0, 0, 0, 0.07) 90%, transparent 100%);
}

.home-hero-28390 .home-hero-28390__slide {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: var(--hh-track-height);
	box-sizing: border-box;
	user-select: none;
}

.home-hero-28390 .home-hero-28390__phrase {
	font-family: 'azo-sans-web', sans-serif;
	font-size: var(--hh-phrase-size);
	font-weight: 800;
	text-transform: uppercase;
	line-height: var(--hh-line-height);
	color: rgba(255, 255, 255, 0.35);
	transition: color 0.35s ease, opacity 0.35s ease;
	white-space: nowrap;
	transform-origin: left center;
}

.home-hero-28390 .home-hero-28390__slide.swiper-slide-active .home-hero-28390__phrase {
	color: var(--tw-color-white, #FFFFFF);
	font-style: italic;
	font-weight: 900;
	text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Tablet & Mobile: heading, then the phrase beneath it, then the form. */
@media (max-width: 1024px) {
	.home-hero-28390 {
		--hh-type-size: clamp(28px, 6vw, 46px);
		--hh-phrase-size: clamp(20px, 4.2vw, 32px);
		/* One phrase at a time once the axis turns horizontal. */
		--hh-visible-lines: 1;
	}

	.home-hero-28390 .home-hero-28390__col--left {
		align-items: center;
		text-align: center;
	}

	.home-hero-28390 .home-hero-28390__headline {
		flex-direction: column;
		align-items: center;
		row-gap: 0.18em;
		margin-bottom: 28px;
	}

	.home-hero-28390 .home-hero-28390__carousel-wrapper {
		width: 100%;
		min-width: 0;
		flex: 0 0 auto;
	}

	/* One visible line here, so the track and its slot are the same height and
	   the absolute centring is a no-op. */
	.home-hero-28390 .home-hero-28390__swiper {
		position: relative;
		top: auto;
		transform: none;
	}

	/* Horizontal axis here, so the mask runs left-to-right. */
	.home-hero-28390 .home-hero-28390__swiper {
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000000 14%, #000000 86%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0%, #000000 14%, #000000 86%, transparent 100%);
	}

	.home-hero-28390 .home-hero-28390__slide {
		justify-content: center;
	}

	.home-hero-28390 .home-hero-28390__phrase {
		text-align: center;
		transform-origin: center center;
	}

	.home-hero-28390 .home-hero-28390__form {
		margin: 0 auto;
	}
}

@media (max-width: 640px) {
	.home-hero-28390 {
		--hh-type-size: clamp(26px, 7.5vw, 38px);
		/* Sized so the longest phrase still fits one line inside the gutters. */
		--hh-phrase-size: clamp(17px, 6.5vw, 26px);
		min-height: 540px;
	}

	.home-hero-28390 .home-hero-28390__form {
		flex-direction: column;
		align-items: stretch;
		padding: 12px;
		gap: 10px;
	}

	.home-hero-28390 .home-hero-28390__input {
		text-align: center;
		padding: 6px 0;
	}

	.home-hero-28390 .home-hero-28390__btn {
		width: 100%;
	}
}

/* Scroll-down cue: a mouse outline with a travelling dot and two pulsing
   chevrons, centred at the bottom of the hero. Purely decorative. */
.home-hero-28390 .home-hero-28390__scroll {
	--hh-scroll-color: #ffffff;
	--hh-scroll-x: 30px;
	--hh-scroll-y: 50px;
	position: absolute;
	left: 50%;
	bottom: 70px;
	z-index: 3;
	transform: translateX(-50%);
	pointer-events: none;
}

.home-hero-28390 .home-hero-28390__scrolldown {
	position: relative;
	width: var(--hh-scroll-x);
	height: var(--hh-scroll-y);
	border: calc(var(--hh-scroll-x) / 10) solid var(--hh-scroll-color);
	border-radius: 50px;
	box-sizing: border-box;
}

.home-hero-28390 .home-hero-28390__scrolldown::before {
	content: "";
	position: absolute;
	bottom: 30px;
	left: 50%;
	width: 6px;
	height: 6px;
	margin-left: -3px;
	background-color: var(--hh-scroll-color);
	border-radius: 100%;
	animation: hh-scrolldown-28390 2s infinite;
	box-sizing: border-box;
}

.home-hero-28390 .home-hero-28390__chevrons {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: var(--hh-scroll-x);
	margin-top: 48px;
	margin-left: -3px;
	padding: 6px 0 0;
}

.home-hero-28390 .home-hero-28390__chevron {
	display: inline-block;
	position: relative;
	width: 10px;
	height: 10px;
	margin-top: -6px;
	border: solid var(--hh-scroll-color);
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.home-hero-28390 .home-hero-28390__chevron:nth-child(odd) {
	animation: hh-pulse-28390 500ms ease infinite alternate;
}

.home-hero-28390 .home-hero-28390__chevron:nth-child(even) {
	animation: hh-pulse-28390 500ms ease infinite alternate 250ms;
}

@keyframes hh-scrolldown-28390 {
	0% {
		opacity: 0;
		height: 6px;
	}
	40% {
		opacity: 1;
		height: 10px;
	}
	80% {
		transform: translate(0, 20px);
		height: 10px;
		opacity: 0;
	}
	100% {
		height: 3px;
		opacity: 0;
	}
}

@keyframes hh-pulse-28390 {
	from {
		opacity: 0;
	}
	to {
		opacity: 0.5;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-hero-28390 .home-hero-28390__scrolldown::before,
	.home-hero-28390 .home-hero-28390__chevron {
		animation: none;
	}

	.home-hero-28390 .home-hero-28390__chevron {
		opacity: 0.5;
	}
}

/* Mobile: the hero is short enough that the scroll cue adds nothing. */
@media (max-width: 767px) {
	.home-hero-28390 .home-hero-28390__scroll {
		display: none;
	}
}