/* The photo is decorative. All meaningful hero content remains editable HTML. */
.hero {
	isolation: isolate;
	background-color: #eef6f1;
	background-image:
		linear-gradient(90deg, rgba(238, 248, 244, .22), rgba(238, 248, 244, .08)),
		var(--cm-hero-image);
	background-position: center, center;
	background-repeat: no-repeat;
	background-size: cover;
}

.hero::before {
	inset: 0;
	top: 0;
	right: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 58%, rgba(20, 61, 72, .09));
	pointer-events: none;
	z-index: -1;
}

.hero::after {
	inset: auto 0 0;
	width: auto;
	height: 1px;
	border: 0;
	border-radius: 0;
	background: rgba(22, 127, 135, .12);
}

.hero-grid > div:first-child {
	padding: 38px;
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 24px;
	background: rgba(255, 255, 255, .90);
	box-shadow: 0 24px 60px rgba(17, 61, 73, .13);
	backdrop-filter: blur(7px);
}

.hero h1 {
	max-width: 560px;
	font-size: clamp(2.8rem, 4.2vw, 3.85rem);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.visual-glow {
	background: linear-gradient(145deg, rgba(207, 239, 222, .88), rgba(166, 219, 195, .78));
	backdrop-filter: blur(2px);
}

.visual-card {
	background: rgba(255, 255, 255, .95);
	border-color: rgba(255, 255, 255, .82);
	backdrop-filter: blur(8px);
}

@media (max-width: 780px) {
	.hero {
		background-image:
			linear-gradient(180deg, rgba(248, 251, 247, .97) 0%, rgba(248, 251, 247, .92) 46%, rgba(237, 247, 244, .62) 68%, rgba(231, 245, 239, .28) 100%),
			var(--cm-hero-image);
		background-position: center, 64% center;
	}

	.hero-grid > div:first-child {
		padding: 29px;
	}
}

@media (max-width: 480px) {
	.hero-grid > div:first-child {
		padding: 24px 20px;
		border-radius: 19px;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.hero-grid > div:first-child,
	.visual-card { backdrop-filter: none; }
}