/* EMERGENCY CTA SECTION */

.section-emergency-cta {
	position: relative;
	padding: 0;
	background:
		linear-gradient(180deg, rgba(247, 244, 240, 0) 0%, rgba(247, 244, 240, 0.92) 18%, rgba(247, 244, 240, 1) 100%);
}

.emergency-cta-shell {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 64px 0;
	isolation: isolate;
}

.emergency-cta-shell::before {
	--emergency-gradient-width: min(100%, var(--container-max-width));
	--emergency-gradient-offset: calc((100% - var(--emergency-gradient-width)) / 2);
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		rgba(43, 96, 64, 1) calc(var(--emergency-gradient-offset) + (var(--emergency-gradient-width) * 0.40)),
		rgba(43, 96, 64, 0.9) calc(var(--emergency-gradient-offset) + (var(--emergency-gradient-width) * 0.50)),
		rgba(35, 35, 35, 0.6) calc(var(--emergency-gradient-offset) + (var(--emergency-gradient-width) * 0.65)),
		rgba(35, 35, 35, 0.75) calc(var(--emergency-gradient-offset) + (var(--emergency-gradient-width) * 0.81)),
		rgba(35, 35, 35, 1) calc(var(--emergency-gradient-offset) + (var(--emergency-gradient-width) * 0.97))
	);
}

.emergency-cta-media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.emergency-cta-parallax {
	position: absolute;
	top: 50%;
	left: calc(((100vw - var(--container-max-width)) / 2) + (var(--container-max-width) * 0.79));
	z-index: -1;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

.emergency-cta-parallax-image {
	display: block;
	width: clamp(118px, 13vw, 208px);
	height: auto;
	opacity: 0.95;
}

.emergency-cta-parallax-image svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.emergency-cta-media-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	filter: brightness(1.22) contrast(0.92) grayscale(0.80);
}

.emergency-cta-copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	max-width: 780px;
}

.emergency-cta-copy h2 {
	margin: 0;
	max-width: 70%;
	color: var(--color-white);
}

.emergency-cta-description {
	margin: 0;
	max-width: 58ch;
	color: var(--color-white);
}

.emergency-cta-button {
	margin-top: 6px;
}

.emergency-cta-button .btn-animated__text {
	white-space: nowrap;
}

@media (min-width: 768px) and (max-width: 1320px) {
	.section-emergency-cta {
		padding-bottom: 0;
	}

	.emergency-cta-shell {
		padding: 56px 0;
	}

	.emergency-cta-copy h2 {
		max-width: 60%;
	}

	.emergency-cta-parallax {
		left: calc(var(--container-padding-tablet) + ((100vw - (var(--container-padding-tablet) * 2)) * 0.75));
	}
}

@media (max-width: 767px) {
	.section-emergency-cta {
		padding-bottom: 0;
	}

	.emergency-cta-shell {
		padding: 56px 0;
	}

	.emergency-cta-shell::before {
		background: linear-gradient(
			90deg,
			rgba(35, 35, 35, 0.9) 0%,
			rgba(35, 35, 35, 0.7) 58%,
			rgba(35, 35, 35, 0.42) 100%
		);
	}

	.emergency-cta-media-image {
		object-position: right center;
	}

	.emergency-cta-copy h2,
	.emergency-cta-description {
		max-width: none;
	}

	.emergency-cta-button .btn-animated__text {
		white-space: normal;
	}

	.emergency-cta-button {
		background-color: var(--color-white);
		color: var(--color-primary);
	}

	.emergency-cta-button .btn-animated__circle {
		background-color: var(--color-white);
	}

	.emergency-cta-button .btn-animated__icon--arrow::before {
		border-top-color: var(--color-primary);
		border-right-color: var(--color-primary);
	}

	.emergency-cta-button .btn-animated__text,
	.emergency-cta-button:hover .btn-animated__text,
	.emergency-cta-button:focus-visible .btn-animated__text {
		color: var(--color-primary);
	}

	.emergency-cta-button:hover,
	.emergency-cta-button:focus,
	.emergency-cta-button:focus-visible {
		color: var(--color-primary);
	}

	.emergency-cta-button:hover .btn-animated__circle,
	.emergency-cta-button:focus-visible .btn-animated__circle {
		background-color: var(--color-white);
	}

	.emergency-cta-button:hover .btn-animated__icon,
	.emergency-cta-button:focus-visible .btn-animated__icon {
		background-color: var(--color-primary);
	}

	.emergency-cta-parallax {
		left: 75%;
		top: auto;
		bottom: 18px;
		transform: translateX(-50%);
	}

	.emergency-cta-parallax-image {
		width: clamp(74px, 19vw, 104px);
		opacity: 0.78;
	}
}