.service-hero {
	position: relative;
	isolation: isolate;
	overflow: visible;
	padding-top: clamp(var(--spacing-15), 1.8vw, var(--spacing-32));
	padding-bottom: clamp(var(--spacing-24), 2.4vw, 40px);
	color: var(--color-off-black);
	background-color: var(--color-light-bg);
}

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

.service-hero::after {
	background-position: center;
	background-size: cover;
	opacity: 0;
}

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

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

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

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

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

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

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

.service-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.7fr);
	gap: clamp(var(--spacing-20), 2vw, var(--spacing-32));
	align-items: start;
	min-height: 0;
}

.service-hero--no-media .service-hero__inner {
	grid-template-columns: minmax(0, 1fr);
	min-height: clamp(340px, 44svh, 500px);
}

.service-hero--no-media .service-hero__content {
	max-width: 920px;
}

.service-hero__content {
	min-width: 0;
	max-width: none;
}

.service-hero__title {
	color: var(--color-off-black);
	font-size: clamp(32px, 3.3vw, 48px);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	text-wrap: balance;
}

.service-hero__lead {
	margin-top: var(--spacing-20);
	color: var(--color-off-black);
	font-size: clamp(var(--font-size-md), 1.55vw, 22px);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-heading);
}

.service-hero__text {
	margin-top: var(--spacing-14);
	color: var(--color-gray);
	font-size: clamp(var(--font-size-base), 1vw, var(--font-size-md));
	line-height: var(--line-height-body);
}

.service-hero__text p + p {
	margin-top: var(--spacing-10);
}

.service-hero__meta {
	display: grid;
	grid-template-columns: minmax(180px, 34ch) minmax(0, 1fr);
	gap: var(--spacing-20) var(--spacing-20);
	align-items: start;
	margin-top: clamp(var(--spacing-20), 2.6vw, var(--spacing-32));
	padding-top: var(--spacing-20);
	border-top: 1px solid rgba(22, 22, 22, 0.12);
}

.service-hero__price {
	display: grid;
	gap: var(--spacing-5);
	min-width: 180px;
	max-width: min(100%, 34ch);
}

.service-hero__price-label,
.service-hero__price-note {
	color: var(--color-gray);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-body);
}

.service-hero__price-note {
	max-width: min(100%, 34ch);
}

.service-hero__price-value {
	color: var(--color-blue);
	font-size: clamp(var(--font-size-xl), 2.2vw, 34px);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
}

.service-hero__price del {
	color: var(--color-gray);
	font-size: var(--font-size-base);
	line-height: var(--line-height-heading);
	text-decoration-thickness: 1px;
}

.service-hero__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--spacing-10) var(--spacing-15);
	min-width: 0;
	max-width: min(100%, 620px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-hero__facts:only-child {
	grid-column: 1 / -1;
	max-width: none;
}

.service-hero__fact {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-6);
	min-width: 0;
	color: var(--color-off-black);
	font-size: clamp(var(--font-size-base), 1.05vw, var(--font-size-md));
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
}

.service-hero__fact i {
	flex: 0 0 auto;
	font-size: 20px;
	color: var(--color-blue);
	line-height: 1;
}

.service-hero__fact span {
	min-width: 0;
}

.service-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-10);
	margin-top: clamp(var(--spacing-24), 3vw, var(--spacing-32));
}

.service-hero__button i {
	font-size: 20px;
}

.service-hero__media {
	position: relative;
	align-self: start;
	display: grid;
	align-items: end;
	min-width: 0;
	margin-top: calc(-1 * clamp(var(--spacing-6), 1vw, var(--spacing-20)));
}

.service-hero__stage {
	position: relative;
	display: grid;
	place-items: end center;
	min-height: clamp(390px, 34vw, 528px);
	width: min(100%, 660px);
	margin-left: auto;
	padding: 0 clamp(var(--spacing-10), 1.4vw, var(--spacing-20));
	overflow: visible;
}

.service-hero__stage::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	height: 0;
	border-top: 1px solid rgba(22, 22, 22, 0.13);
	pointer-events: none;
}

.service-hero__stage::after {
	content: "";
	position: absolute;
	left: 52%;
	bottom: clamp(var(--spacing-10), 1.6vw, var(--spacing-20));
	z-index: 1;
	width: min(56%, 360px);
	height: clamp(var(--spacing-15), 2.4vw, 34px);
	border-radius: var(--radius-pill);
	background-color: rgba(22, 22, 22, 0.2);
	filter: blur(13px);
	transform: translateX(-50%);
	opacity: 0.46;
	pointer-events: none;
}

.service-hero--media-video .service-hero__media {
	align-items: center;
	margin-top: 0;
}

.service-hero--media-video .service-hero__stage {
	display: block;
	width: min(100%, 620px);
	min-height: 0;
	aspect-ratio: 16 / 10.4;
	padding: var(--frame-pad);
	overflow: hidden;
	background-color: var(--color-white);
}

.service-hero--media-video .service-hero__stage::before,
.service-hero--media-video .service-hero__stage::after {
	content: none;
}

.service-hero__media-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	background-color: var(--color-off-white);
}

.service-hero__media-img {
	position: absolute;
	left: 52%;
	bottom: 0;
	z-index: 3;
	display: block;
	width: auto;
	max-width: min(92%, 560px);
	height: clamp(390px, 34vw, 540px);
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.13));
	transform: translateX(-50%);
}

.service-hero__media-img--doctor {
	max-width: min(94%, 580px);
}

.service-hero__doctor {
	position: absolute;
	right: clamp(var(--spacing-10), 1.6vw, var(--spacing-20));
	bottom: clamp(var(--spacing-15), 2vw, var(--spacing-32));
	z-index: 6;
	display: grid;
	gap: 1px;
	width: min(72%, 380px);
	padding: clamp(var(--spacing-10), 1.1vw, var(--spacing-14)) clamp(var(--spacing-14), 1.4vw, var(--spacing-20));
	border: var(--frame-border);
	border-radius: var(--radius-md);
	background-color: rgba(255, 255, 255, 0.56);
	box-shadow: var(--shadow-sm);
	backdrop-filter: blur(16px) saturate(1.05);
	-webkit-backdrop-filter: blur(16px) saturate(1.05);
	color: var(--color-off-black);
	text-decoration: none;
	transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

.service-hero__doctor:hover {
	color: var(--color-blue);
	background-color: rgba(255, 255, 255, 0.66);
}

.service-hero__doctor-label {
	color: var(--color-gray);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-heading);
}

.service-hero__doctor-name {
	font-size: clamp(var(--font-size-sm), 0.95vw, var(--font-size-base));
	font-weight: var(--font-weight-semibold);
	line-height: 1.22;
	text-wrap: balance;
}

.service-hero__doctor-role {
	color: var(--color-gray);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-heading);
}

@media (max-width: 1100px) {
	.service-hero__inner {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.service-hero__media {
		max-width: 620px;
		width: 100%;
		margin-inline: auto;
	}

	.service-hero__stage {
		min-height: clamp(calc(var(--spacing-32) * 10), 34vw, calc(var(--spacing-34) * 12));
	}

	.service-hero__media-img,
	.service-hero__media-img--doctor {
		height: clamp(calc(var(--spacing-32) * 10), 34vw, calc(var(--spacing-34) * 12));
	}
}

@media (max-width: 760px) {
	.service-hero__meta {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 680px) {
	.service-hero {
		padding-bottom: clamp(var(--spacing-32), 8vw, 48px);
	}

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

	.service-hero__title {
		font-size: clamp(30px, 8.2vw, 40px);
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.service-hero__lead {
		margin-top: var(--spacing-15);
	}

	.service-hero__meta,
	.service-hero__actions,
	.service-hero__button {
		width: 100%;
	}

	.service-hero__facts {
		display: grid;
		grid-template-columns: 1fr;
	}

	.service-hero__button {
		width: 100%;
	}

	.service-hero__media {
		display: none;
	}

	.service-hero__stage {
		min-height: clamp(300px, 78vw, 430px);
		padding-inline: 0;
	}

	.service-hero__stage::after {
		left: 50%;
	}

	.service-hero__media-img,
	.service-hero__media-img--doctor {
		left: 50%;
		max-width: min(78%, 360px);
		height: clamp(290px, 76vw, 410px);
	}

	.service-hero__doctor {
		right: var(--spacing-10);
		bottom: var(--spacing-15);
		width: min(82%, 320px);
	}
}

@media (max-width: 430px) {
	.service-hero__facts {
		grid-template-columns: 1fr;
	}
}
