/* =========================================================
   HERO
   ========================================================= */

.hero {
	position: relative;
	background: var(--navy);
	color: #fff;
	overflow: hidden;
	padding: 80px 0;
}


/* =========================================================
   SINGLE BACKGROUND
   ========================================================= */

.hero > .bg {
	position: absolute;
	inset: -40px 0;
	background-size: cover;
	background-position: center;
	will-change: transform;
	transform: translateY(0);
	z-index: 0;
}


/* =========================================================
   BACKGROUND SLIDER
   ========================================================= */

.hero .hero-background-slider {
	position: absolute;
	inset: -40px 0;
	z-index: 0;
	overflow: hidden;
}

.hero .hero-background-slide {
	position: absolute;
	inset: 0;

	background-size: cover;
	background-position: center;

	opacity: 0;

	pointer-events: none;

	transition: opacity 1.2s ease;

	will-change: opacity;
}

.hero .hero-background-slide.is-active {
	opacity: 1;
}


/* =========================================================
   SCRIM
   ========================================================= */

.hero .scrim {
	position: absolute;
	inset: 0;

	z-index: 2;

	background: linear-gradient(
		240deg,
		rgba(0, 87, 112, 0.5) 0%,
		rgba(0, 87, 112, 0.5) 30%,
		rgba(33, 43, 85, 0.4) 50%,
		rgba(33, 43, 85, 0.8) 100%
	);

	pointer-events: none;
}


/* =========================================================
   DIAGONAL BOTTOM
   ========================================================= */

.hero::after {
	content: "";

	position: absolute;

	left: 0;
	right: 0;
	bottom: -1px;

	height: 71px;

	background: #fff;

	clip-path: polygon(
		0 100%,
		100% 0,
		100% 100%
	);

	z-index: 10;

	pointer-events: none;
}


/* =========================================================
   CONTENT
   ========================================================= */

.hero .container {
	position: relative;

	z-index: 3;

	padding-top: 74px;
	padding-bottom: 84px;
}

.hero .inner {
	max-width: 660px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.hero .eyebrow {
	color: #fff;
}

.hero .eyebrow svg {
	width: 14px;
	height: 14px;

	stroke: #7fd8a9;
	fill: none;

	stroke-width: 2.6;
}


/* =========================================================
   HEADING
   ========================================================= */

.hero h1 {
	color: #fff;

	font-size: clamp(
		2.3rem,
		4.6vw,
		3.5rem
	);

	margin: 18px 0;
}

.hero h1 .accent {
	color: var(--green);
}


/* =========================================================
   INTRO
   ========================================================= */

.hero .ir-zone {
	background: none;

	border: 0;
	border-radius: 0;

	box-shadow: none;

	padding: 0 0 15px 0;

	margin: 0 0 4px;

	color: #d4e0f4;

	font-size: 1.18rem;
	line-height: 1.6;

	max-width: 60ch;
}

.hero .ir-zone p {
	margin: 0 0 10px;
}

.hero .ir-zone strong {
	color: #fff;
}


/* =========================================================
   CTA
   ========================================================= */

.hero .hero-cta {
	margin: 30px 0 24px;
}

.hero .whats-link {
	color: #c6d6f0;
}


/* =========================================================
   TRUST STRIP
   ========================================================= */

.hero .trust-strip {
	display: flex;

	gap: 10px;

	flex-wrap: wrap;

	border-top: 0;

	padding-top: 0;
}

.hero .trust-strip > div {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	background: rgba(255, 255, 255, .1);

	border: 1px solid rgba(255, 255, 255, .2);

	padding: 8px 14px;

	border-radius: 999px;

	font-size: 13.5px;

	color: #e2ecfb;

	font-weight: 500;
}

.hero .trust-strip strong {
	color: #fff;
}

.hero .trust-strip .stars {
	color: #ffce54;
}


/* =========================================================
   FLOATCARDS
   ========================================================= */

.hero .floatcards {
	position: absolute;

	right: 40px;
	top: 50%;

	transform: translateY(-50%);

	z-index: 3;

	display: flex;

	flex-direction: column;

	gap: 14px;
}

.hero .floatcard {
	background: #fff;

	color: var(--ink);

	border-radius: 14px;

	box-shadow: var(--sh-lg);

	padding: 13px 16px;

	display: flex;

	align-items: center;

	gap: 11px;

	font-size: 13.5px;

	font-weight: 700;

	opacity: 0;

	transform: translateX(60px);

	transition:
		opacity .7s ease,
		transform .7s cubic-bezier(.22,1,.36,1);

	will-change: opacity, transform;
}

.hero .floatcard.is-visible {
	opacity: 1;

	transform: translateX(0);
}

.hero .floatcard .ic {
	width: 38px;
	height: 38px;

	border-radius: 10px;

	display: grid;

	place-items: center;

	flex: none;
}

.hero .floatcard .ic svg {
	width: 20px;
	height: 20px;
}

.hero .floatcard small {
	display: block;

	color: var(--muted);

	font-weight: 500;

	font-size: 11.5px;
}

.hero .floatcard .fc-stars {
	color: #ffce54;

	letter-spacing: 1px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

	.hero .floatcards {
		display: none;
	}

}

@media (max-width: 767px) {
	.hero .trust-strip {
		display:none;
	}
	.hero .container {
		padding-top: 0;
		padding-bottom: 20px;
	}
	.hero .ir-zone {
		padding:0;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.hero .hero-background-slide {
		transition: none;
	}

}