.ecs-goal-hero {
	align-items: center;
	background-color: var(--ecs_dblue, #0d3347) !important;
	background-image: none !important;
	box-sizing: border-box;
	color: var(--ecs_white);
	display: flex;
	isolation: isolate;
	justify-content: center;
	min-height: clamp(560px, 70vh, 720px);
	overflow: hidden;
	position: relative;
}

/* Keep the Pathway Hero solid navy even when generic theme gradient classes
 * are present on the section through saved block/template attributes. */
.ecs-goal-hero::before,
.ecs-goal-hero::after {
	background: none !important;
	content: none !important;
	display: none !important;
}

.ecs-goal-hero__content {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 1440px;
	width: 100%;
	padding: 170px 24px 100px;
	position: relative;
	text-align: center;
	z-index: 3;
}

.ecs-goal-hero__eyebrow.small-kicker.boxed {
	background: var(--ecs_orange);
	color: var(--ecs_dblue);
	display: inline-block;
	font-size: 14px;
	line-height: 1;
	margin: 0;
	padding: 9px 13px;
	text-transform: uppercase;
}

.ecs-goal-hero__title {
	color: var(--ecs_white);
	font-size: clamp(34px, 4.3vw, 68px);
	font-weight: 400;
	line-height: 1.12;
	margin: 0;
	max-width: 56%;
}

.ecs-goal-hero__rolodex {
	max-width: 1200px;
	width: 100%;
	margin-top: -12px;
	position: relative;
}

.ecs-goal-hero__rolodex-viewport {
	height: var(--goal-viewport-height, 160px);
	outline: none;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	touch-action: pan-y;
	position: relative;
	width: 100%;
}

.ecs-goal-hero__rolodex-viewport:focus-visible {
	outline: 2px solid var(--ecs_cyan);
	outline-offset: 5px;
}

/* Keep the explanatory legacy helper hidden; navigation is handled by the
 * accessible white chevrons flanking the active goal. */
.ecs-goal-hero .ecs-goal-hero__rolodex-help {
	display: none !important;
}

.ecs-goal-hero .ecs-goal-hero__rolodex-control {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--ecs_white);
	cursor: pointer;
	display: flex;
	height: 48px;
	justify-content: center;
	margin: 0;
	padding: 8px;
	position: absolute;
	top: calc(var(--goal-active-center-y, 50%) + var(--goal-arrow-optical-offset, 18px));
	transform: translateY(-50%);
	transition: color .2s ease, transform .2s ease, left .55s cubic-bezier(.2, .78, .25, 1), right .55s cubic-bezier(.2, .78, .25, 1), top .35s ease;
	width: 44px;
	z-index: 5;
}

.ecs-goal-hero .ecs-goal-hero__rolodex-control--previous {
	left: max(8px, calc(50% - var(--goal-active-half, 220px) - var(--goal-label-half-gap, 52px) - var(--goal-control-half, 22px)));
}

.ecs-goal-hero .ecs-goal-hero__rolodex-control--next {
	right: max(8px, calc(50% - var(--goal-active-half, 220px) - var(--goal-label-half-gap, 52px) - var(--goal-control-half, 22px)));
}

.ecs-goal-hero .ecs-goal-hero__rolodex-control svg {
	display: block;
	fill: none;
	height: 30px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 30px;
}

.ecs-goal-hero .ecs-goal-hero__rolodex-control:hover {
	color: var(--ecs_cyan);
	transform: translateY(-50%) scale(1.08);
}

.ecs-goal-hero .ecs-goal-hero__rolodex-control:focus-visible {
	color: var(--ecs_white);
	outline: 2px solid var(--ecs_cyan);
	outline-offset: 2px;
}

.ecs-goal-hero__rolodex-option,
.ecs-goal-hero__rolodex-option:visited {
	color: var(--ecs_white);
	display: block;
	font-size: clamp(26px, 3.4vw, 52px);
	font-weight: 500;
	left: 50%;
	line-height: 1.22;
	max-width: 76%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	text-align: center;
	text-decoration: none;
	top: 50%;
	transform: translate(-50%, -50%) scale(.85);
	transform-origin: center center;
	transition: opacity .42s ease, transform .55s cubic-bezier(.2, .78, .25, 1), filter .42s ease, color .2s ease;
	visibility: hidden;
	white-space: normal;
	overflow-wrap: anywhere;
	text-wrap: balance;
	width: max-content;
	padding-block: 8px;
	box-sizing: border-box;
}

.ecs-goal-hero__rolodex-option.is-active {
	border: 0;
	text-decoration: underline;
	text-decoration-color: var(--ecs_orange);
	text-decoration-thickness: 3px;
	text-underline-offset: 10px;
	text-decoration-skip-ink: none;
	color: var(--ecs_white);
	font-weight: 600;
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, -50%) scale(1);
	filter: none;
	visibility: visible;
	z-index: 3;
}

.ecs-goal-hero__rolodex-label {
	display: block;
	max-width: 100%;
	overflow-wrap: anywhere;
	white-space: normal;
}

.ecs-goal-hero__rolodex-option.is-previous,
.ecs-goal-hero__rolodex-option.is-next {
	color: rgba(255, 255, 255, .62);
	opacity: .38;
	filter: blur(1.5px);
	pointer-events: auto;
	visibility: visible;
	z-index: 2;
}

.ecs-goal-hero__rolodex-option.is-previous {
	transform: translate(calc(-50% - var(--goal-side-offset, 700px)), -50%) scale(.85);
}

.ecs-goal-hero__rolodex-option.is-next {
	transform: translate(calc(-50% + var(--goal-side-offset, 700px)), -50%) scale(.85);
}

.ecs-goal-hero__rolodex-option:hover,
.ecs-goal-hero__rolodex-option:focus-visible {
	color: var(--ecs_cyan);
}

.ecs-goal-hero__images {
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

.ecs-goal-hero__image,
.ecs-goal-hero__image:visited {
	background: var(--ecs_white);
	box-shadow: 0 18px 42px rgba(0, 0, 0, .2);
	color: var(--ecs_dblue);
	display: inline-block;
	height: auto;
	overflow: hidden;
	pointer-events: auto;
	position: absolute;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease, outline-color .2s ease;
	width: auto;
}

.ecs-goal-hero__image img {
	display: block;
	height: auto;
	max-height: 160px;
	max-width: clamp(150px, 18vw, 270px);
	object-fit: contain;
	transition: transform .35s ease;
	width: auto;
}

.ecs-goal-hero__image > span {
	background: rgba(13, 51, 71, .92);
	bottom: 0;
	color: var(--ecs_white);
	font-size: 13px;
	font-weight: 600;
	left: 0;
	line-height: 1.25;
	padding: 8px 10px;
	position: absolute;
	right: 0;
}

.ecs-goal-hero__image:hover,
.ecs-goal-hero__image:focus-visible,
.ecs-goal-hero__image.is-active {
	box-shadow: 0 22px 50px rgba(0, 0, 0, .3);
	outline: 3px solid var(--ecs_orange);
	outline-offset: 3px;
	transform: translateY(-5px);
}

.ecs-goal-hero__image:hover img,
.ecs-goal-hero__image:focus-visible img { transform: scale(1.04); }

.ecs-goal-hero__image--1 { left: 4%; top: 130px; }
.ecs-goal-hero__image--2 { right: 4%; top: 130px; }
.ecs-goal-hero__image--3 { bottom: 9%; right: 10%; }
.ecs-goal-hero__image--4 { bottom: 7%; left: 11%; }
.ecs-goal-hero__image--5 { left: 1.5%; top: 56%; }
.ecs-goal-hero__image--6 { right: 1.5%; top: 54%; }

.ecs-goal-hero__shapes {
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.ecs-goal-hero__shapes span { border: 2px solid var(--ecs_purple); position: absolute; }
.ecs-goal-hero__shapes span:nth-child(1) { height: 52px; left: 2.5%; top: 56%; width: 52px; }
.ecs-goal-hero__shapes span:nth-child(2) { background: var(--ecs_orange); border: 0; height: 44px; right: 16%; top: 43%; width: 44px; }
.ecs-goal-hero__shapes span:nth-child(3) { border-color: var(--ecs_cfblue); height: 34px; right: 28%; top: 12%; width: 34px; }
.ecs-goal-hero__shapes span:nth-child(4) { background: var(--ecs_cfblue); border: 0; bottom: 13%; height: 38px; left: 19%; width: 38px; }


@media (max-width: 1180px) {
	.ecs-goal-hero__content { max-width: 100%; }
	.ecs-goal-hero__image img { max-height: 150px; max-width: 190px; }
}

@media (max-width: 860px) {
	.ecs-goal-hero { display: flex; flex-direction: column; min-height: 0; padding: 80px 20px 32px; }
	.ecs-goal-hero__content { padding: 0 0 28px; gap: 20px; }
	.ecs-goal-hero__title { max-width: 100%; }
	.ecs-goal-hero__rolodex { width: 100%; }
	.ecs-goal-hero__rolodex-option { max-width: calc(100% - 128px); }
	.ecs-goal-hero__images { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 16px; inset: auto; position: relative; order: 1; max-width: 580px; width: 100%; }
	.ecs-goal-hero__image,
	.ecs-goal-hero__image--1,
	.ecs-goal-hero__image--2,
	.ecs-goal-hero__image--3,
	.ecs-goal-hero__image--4,
	.ecs-goal-hero__image--5,
	.ecs-goal-hero__image--6 { display: flex; flex-direction: column; align-items: center; height: auto; inset: auto; position: relative; width: min(180px, calc(50% - 8px)); background: transparent; }
	.ecs-goal-hero__image img { height: auto; max-height: 110px; max-width: 100%; width: auto; }
	.ecs-goal-hero__image > span { position: static; box-sizing: border-box; width: 100%; font-size: 12px; line-height: 1.35; padding: 7px 8px; overflow-wrap: anywhere; }
	.ecs-goal-hero__image:hover img,
	.ecs-goal-hero__image:focus-visible img { transform: none; }
}

@media (max-width: 600px) {
	.ecs-goal-hero { padding-top: 64px; }
	.ecs-goal-hero__title { font-size: clamp(30px, 9vw, 44px); }
	.ecs-goal-hero__rolodex-option { font-size: clamp(24px, 6.5vw, 34px); }
	.ecs-goal-hero .ecs-goal-hero__rolodex-control { --goal-control-half: 20px; height: 44px; width: 40px; }
	.ecs-goal-hero__images { max-width: 336px; }
	.ecs-goal-hero__image img { max-height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
	.ecs-goal-hero__rolodex-option,
	.ecs-goal-hero__image,
	.ecs-goal-hero__image img { animation: none !important; transition: none !important; }
}
