.service-page__hero-shell {
	position: relative;
	isolation: isolate;
	background-color: var(--color-light-bg);
}

.service-page__hero-shell::before,
.service-page__hero-shell::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
}

.service-page__hero-shell::after {
	background-position: center top;
	background-size: cover;
	opacity: 0;
}

.service-page__hero-shell--bg-light {
	background-color: var(--color-light-bg);
}

.service-page__hero-shell--bg-warm {
	background-color: var(--color-warm-bg);
}

.service-page__hero-shell--bg-offwhite {
	background-color: var(--color-off-white);
}

.service-page__hero-shell--bg-white {
	background-color: var(--color-white);
}

.service-page__hero-shell--bg-abstract::after {
	background-image: url("../img/service-hero/default-abstract.webp");
	opacity: 0.5;
}

.service-page__hero-shell--has-bg-image::before {
	z-index: -1;
	background-color: var(--color-light-bg);
	opacity: 0.72;
}

.service-page__hero-shell--has-bg-image::after {
	background-image: var(--service-hero-bg-image);
	opacity: 1;
	filter: saturate(0.82);
}

.service-breadcrumbs {
	padding-top: clamp(var(--spacing-14), 1.6vw, var(--spacing-20));
	padding-bottom: clamp(var(--spacing-24), 3vw, 40px);
	background-color: var(--color-light-bg);
	color: var(--color-gray);
}

.service-breadcrumbs__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-6);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-body);
}

.service-breadcrumbs__inner a {
	color: var(--color-gray);
	transition: color var(--transition-base);
}

.service-breadcrumbs__inner a:hover {
	color: var(--color-blue);
}

.service-breadcrumbs__inner .iconoir-nav-arrow-right {
	font-size: 14px;
	color: var(--color-gray);
}

.service-breadcrumbs__current {
	color: var(--color-gray-dark);
}

.service-page__hero-shell .service-breadcrumbs,
.service-page__hero-shell .service-hero {
	background-color: transparent;
}

.service-page__hero-shell .service-hero::before,
.service-page__hero-shell .service-hero::after {
	content: none;
}

@media (max-width: 680px) {
	.service-breadcrumbs {
		padding-top: var(--spacing-20);
		padding-bottom: var(--spacing-24);
	}

	.service-breadcrumbs__inner {
		padding-left: max(var(--spacing-20), env(safe-area-inset-left));
		padding-right: max(var(--spacing-20), env(safe-area-inset-right));
	}
}