/**
 * Canonical photographic hero framing.
 *
 * Geometry and fades mirror the client-supplied WHOS Hero Framing Tool.
 * The high-specificity scope is required to supersede legacy inline hero
 * experiments while those rules remain for older saved block revisions.
 */
:root {
	--whos-hero-height: 640px;
	--whos-hero-mobile-image-height: 300px;
}

:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] {
	background: linear-gradient(100deg, #0c3e3d 0%, #134b48 30%, #1e6357 62%, #2e7a69 100%) !important;
	display: block !important;
	height: var(--whos-hero-height) !important;
	margin: 0 !important;
	max-height: none !important;
	min-height: var(--whos-hero-height) !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: relative !important;
	width: 100% !important;
}

:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"]::before {
	content: none !important;
	display: none !important;
}

/* One full-width fade keeps the image transition consistent on every photo hero. */
:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"]:not(.whos-banner--no-photo)::after {
	background: var(--whos-reference-hero-fade, linear-gradient(90deg, #1c3d3c 0 34%, rgba(28, 61, 60, 0.99) 39%, rgba(28, 61, 60, 0.93) 45%, rgba(28, 61, 60, 0.78) 51%, rgba(28, 61, 60, 0.55) 57%, rgba(28, 61, 60, 0.30) 63%, rgba(28, 61, 60, 0.12) 69%, rgba(28, 61, 60, 0) 75%)) !important;
	content: "" !important;
	display: block !important;
	inset: 0 !important;
	pointer-events: none !important;
	position: absolute !important;
	z-index: 2 !important;
}

:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero.whos-banner--no-photo::after {
	content: none !important;
	display: none !important;
}

:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] > .hgrid {
	display: grid !important;
	grid-template-columns: 46fr 54fr !important;
	height: var(--whos-hero-height) !important;
	margin: 0 !important;
	max-width: none !important;
	min-height: var(--whos-hero-height) !important;
	overflow: hidden !important;
	position: relative !important;
	width: 100% !important;
}

:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] > .hgrid > .hcopy {
	align-items: flex-start !important;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: column !important;
	height: var(--whos-hero-height) !important;
	justify-content: center !important;
	margin: 0 !important;
	max-width: none !important;
	min-height: var(--whos-hero-height) !important;
	order: 0 !important;
	padding: 56px 44px 56px max(var(--whos-gutter, 28px), calc((100vw - 1480px) / 2 + var(--whos-gutter, 28px))) !important;
	position: relative !important;
	width: 100% !important;
	z-index: 3 !important;
}

:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] > .hgrid > .hcopy > * {
	max-width: 560px !important;
}

/* Retire the legacy Additional CSS statement injected into the About hero. */
:is(#_whos_remove_about_hero_statement_#_whos_remove_about_hero_statement_, html) body .hero.whos-banner--about .whos-about-design__hero-lead {
	display: none !important;
}

:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] > .hgrid > .hshot {
	background: #0c3e3d !important;
	box-sizing: border-box !important;
	height: var(--whos-hero-height) !important;
	inset: auto !important;
	margin: 0 !important;
	max-height: none !important;
	max-width: none !important;
	min-height: var(--whos-hero-height) !important;
	order: 1 !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: relative !important;
	width: 100% !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
}

:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] > .hgrid > .hshot::before {
	content: none !important;
	display: none !important;
}

:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] > .hgrid > .hshot::after {
	content: none !important;
	display: none !important;
}

:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] > .hgrid > .hshot > img {
	background: transparent !important;
	display: block !important;
	height: 100% !important;
	inset: 0 !important;
	margin: 0 !important;
	max-height: none !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: var(--whos-hero-focal-point, 60% 45%) !important;
	opacity: 1 !important;
	position: absolute !important;
	transform: none !important;
	width: 100% !important;
	z-index: 1 !important;
}

.whos-banner--home .b-act {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 32px;
	width: min(100%, 440px);
}

.whos-banner--home .h3-phone,
.whos-banner--home .h3-btn {
	align-items: center;
	border: 2px solid #fff;
	border-radius: 999px;
	box-sizing: border-box;
	display: inline-flex;
	font-weight: 800;
	gap: 10px;
	justify-content: center;
	min-height: 48px;
	padding: 10px 20px;
	text-decoration: none;
	width: 100%;
}

.whos-banner--home .h3-phone {
	background: var(--whos-gold, #e9b23a);
	border-color: var(--whos-gold, #e9b23a);
	color: var(--whos-ink, #17232b);
}

.whos-banner--home .h3-btn,
.whos-banner--home .h3-locations {
	color: #fff;
}

.whos-banner--home .h3-locations {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	margin-top: 18px;
	text-decoration-color: rgba(255, 255, 255, 0.82);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	transition:
		color 280ms cubic-bezier(0.22, 1, 0.36, 1),
		text-decoration-color 280ms cubic-bezier(0.22, 1, 0.36, 1),
		text-underline-offset 280ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.whos-banner--home .h3-locations svg {
	flex: 0 0 auto;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.whos-banner--home .h3-locations:is(:hover, :focus-visible) {
	color: var(--whos-gold, #e9b23a);
	text-decoration-color: currentColor;
	text-underline-offset: 6px;
	transform: translateY(-1px);
}

.whos-banner--home .h3-locations:is(:hover, :focus-visible) svg {
	transform: translateY(3px);
}

.whos-banner--home .h3-trust {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	justify-content: space-between;
	margin-top: 28px;
	width: min(100%, 440px);
}

.whos-banner--home .h3-trust span {
	align-items: center;
	color: rgba(255, 255, 255, 0.82);
	display: inline-flex;
	font-size: 13px;
	gap: 8px;
	white-space: nowrap;
}

.whos-banner--home .h3-trust span::before {
	background: var(--whos-gold, #e9b23a);
	border-radius: 50%;
	content: "";
	display: block;
	flex: 0 0 7px;
	height: 7px;
	width: 7px;
}

@media (max-width: 900px) {
	:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"]:not(.whos-banner--no-photo)::after {
		content: none !important;
		display: none !important;
	}

	:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] {
		height: auto !important;
		min-height: 0 !important;
	}

	:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] > .hgrid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		height: auto !important;
		min-height: 0 !important;
	}

	:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] > .hgrid > .hshot {
		height: var(--whos-hero-mobile-image-height) !important;
		min-height: var(--whos-hero-mobile-image-height) !important;
		order: -1 !important;
	}

	:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] > .hgrid > .hshot::after {
		background: linear-gradient(0deg, #1c3d3c 0%, rgba(28, 61, 60, 0.72) 16%, rgba(28, 61, 60, 0.28) 33%, rgba(28, 61, 60, 0) 51%) !important;
		content: "" !important;
		display: block !important;
		inset: 0 !important;
		pointer-events: none !important;
		position: absolute !important;
		z-index: 2 !important;
	}

	:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] > .hgrid > .hshot {
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}

	:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] > .hgrid > .hshot > img {
		object-position: var(--whos-hero-mobile-focal-point, 60% 38%) !important;
	}

	:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] > .hgrid > .hcopy {
		height: auto !important;
		min-height: 0 !important;
		order: 0 !important;
		padding: 8px 24px 44px !important;
	}

	:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] > .hgrid > .hcopy > * {
		max-width: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.whos-banner--home .h3-locations,
	.whos-banner--home .h3-locations svg {
		transition: none;
	}

	.whos-banner--home .h3-locations:is(:hover, :focus-visible),
	.whos-banner--home .h3-locations:is(:hover, :focus-visible) svg {
		transform: none;
	}
}

@media (max-width: 480px) {
	:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] > .hgrid > .hshot {
		height: 260px !important;
		min-height: 260px !important;
	}

	:is(#_whos_canonical_hero_#_whos_canonical_hero_#_whos_canonical_hero_, html) body .hero[class*="whos-banner--"] > .hgrid > .hcopy {
		padding-inline: 20px !important;
	}
}

/* Final lock against the five-ID legacy crop rules in saved-site CSS. */
@media (min-width: 901px) {
	:is(#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_, html) body .hero[class*="whos-banner--"],
	:is(#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_, html) body .hero[class*="whos-banner--"] > .hgrid,
	:is(#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_, html) body .hero[class*="whos-banner--"] > .hgrid > .hcopy,
	:is(#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_, html) body .hero[class*="whos-banner--"] > .hgrid > .hshot {
		height: var(--whos-hero-height) !important;
		min-height: var(--whos-hero-height) !important;
	}

	:is(#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_, html) body .hero[class*="whos-banner--"] > .hgrid {
		display: grid !important;
		grid-template-columns: 46fr 54fr !important;
	}

	:is(#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_, html) body .hero[class*="whos-banner--"] > .hgrid > .hshot {
		inset: auto !important;
		max-width: none !important;
		position: relative !important;
		width: 100% !important;
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}
}

@media (max-width: 900px) {
	:is(#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_, html) body .hero[class*="whos-banner--"],
	:is(#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_, html) body .hero[class*="whos-banner--"] > .hgrid,
	:is(#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_, html) body .hero[class*="whos-banner--"] > .hgrid > .hcopy {
		height: auto !important;
		min-height: 0 !important;
	}

	:is(#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_, html) body .hero[class*="whos-banner--"] > .hgrid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-template-rows: var(--whos-hero-mobile-image-height) auto !important;
	}

	:is(#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_, html) body .hero[class*="whos-banner--"] > .hgrid > .hshot {
		height: var(--whos-hero-mobile-image-height) !important;
		inset: auto !important;
		min-height: var(--whos-hero-mobile-image-height) !important;
		order: -1 !important;
		position: relative !important;
		width: 100% !important;
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}

	:is(#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_#_whos_hero_tool_, html) body .hero[class*="whos-banner--"] > .hgrid > .hshot > img {
		object-position: var(--whos-hero-mobile-focal-point, 60% 38%) !important;
	}
}