/* Home Hero (Arch) */
.sh.sh-hero-arch {
	padding-block: clamp(32px, 5vw, 72px) clamp(64px, 8vw, 104px);
	background: linear-gradient(var(--sh-cream) 0 38%, var(--sh-light) 38%);
	/* Full-bleed two-tone band without a stacking context (see tokens.css). */
	border-image: linear-gradient(var(--sh-cream) 0 38%, var(--sh-light) 38%) fill 0 / 0 / 0 100vmax;
}
.sh-hero-arch .sh-hero-arch__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}
.sh-hero-arch .sh-hero-arch__media {
	position: relative;
	order: 2;
	justify-self: center;
	width: min(100%, 500px);
	padding: 0 0 48px 56px;
}
.sh-hero-arch .sh-hero-arch__main {
	aspect-ratio: 4 / 5;
	box-shadow: 0 0 0 14px var(--sh-light), 0 0 0 15px rgba(153, 137, 126, 0.5);
}
.sh-hero-arch .sh-hero-arch__niche {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 38%;
	aspect-ratio: 3 / 4;
	box-shadow: 0 0 0 10px var(--sh-light);
}
.sh-hero-arch .sh-hero-arch__copy { order: 1; min-width: 0; }
.sh-hero-arch .sh-hero-arch__rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14.5px;
	color: var(--sh-text);
	text-decoration: none;
}
.sh-hero-arch .sh-hero-arch__rating strong { color: var(--sh-ink); font-family: var(--sh-font-head); }
.sh-hero-arch .sh-hero-arch__title {
	margin: 18px 0;
	max-width: 15ch;
	font: 600 clamp(38px, 4.4vw, 60px)/1.06 var(--sh-font-head);
	letter-spacing: -0.025em;
	color: var(--sh-ink);
}
.sh-hero-arch .sh-hero-arch__intro { margin: 0; max-width: 46ch; font-size: 18px; line-height: 1.7; }
.sh-hero-arch .sh-hero-arch__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.sh-hero-arch .sh-hero-arch__facts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 34px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid rgba(153, 137, 126, 0.3);
	font-size: 14.5px;
}
.sh-hero-arch .sh-hero-arch__facts li { display: flex; align-items: center; gap: 9px; margin: 0; }
/* Small arch marker, echoing the alcoves. */
.sh-hero-arch .sh-hero-arch__facts li::before {
	content: "";
	flex: none;
	width: 7px;
	height: 9px;
	border-radius: 99px 99px 2px 2px;
	background: var(--sh-taupe);
}

/* The one orchestrated moment: the arches open once on load. */
.sh-hero-arch.is-animated .sh-hero-arch__main { animation: sh-arch-in 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.sh-hero-arch.is-animated .sh-hero-arch__main video,
.sh-hero-arch.is-animated .sh-hero-arch__main img { animation: sh-arch-settle 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.sh-hero-arch.is-animated .sh-hero-arch__niche { animation: sh-arch-in 1.4s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes sh-arch-in {
	from { clip-path: inset(42% 22% 0 22% round 999px 999px 25px 25px); opacity: 0.4; }
	to { clip-path: inset(0 0 0 0 round 999px 999px 25px 25px); opacity: 1; }
}
@keyframes sh-arch-settle {
	from { transform: scale(1.12); }
	to { transform: scale(1); }
}
.elementor-editor-active .sh-hero-arch.is-animated .sh-hero-arch__main,
.elementor-editor-active .sh-hero-arch.is-animated .sh-hero-arch__niche,
.elementor-editor-active .sh-hero-arch.is-animated video,
.elementor-editor-active .sh-hero-arch.is-animated img { animation: none; }

@media (max-width: 960px) {
	.sh.sh-hero-arch {
		background: linear-gradient(var(--sh-cream) 0 30%, var(--sh-light) 30%);
		border-image: linear-gradient(var(--sh-cream) 0 30%, var(--sh-light) 30%) fill 0 / 0 / 0 100vmax;
	}
	.sh-hero-arch .sh-hero-arch__grid { grid-template-columns: minmax(0, 1fr); }
	.sh-hero-arch .sh-hero-arch__media { order: 0; width: 100%; padding: 0; }
	.sh-hero-arch .sh-hero-arch__main {
		aspect-ratio: 4 / 3.4;
		border-radius: 260px 260px var(--sh-r-md) var(--sh-r-md);
		box-shadow: 0 0 0 10px var(--sh-light), 0 0 0 11px rgba(153, 137, 126, 0.5);
	}
	.sh-hero-arch .sh-hero-arch__niche { display: none; }
	.sh-hero-arch .sh-hero-arch__title { max-width: 16ch; }
}
@media (max-width: 600px) {
	/* Video sits right under the logo and nearly edge to edge: the hero pulls up
	   into the theme's top content padding, and the arch breaks out of the page
	   gutters to 8px from the screen edges. */
	.sh.sh-hero-arch { padding-block: 4px 40px; }
	.sh-hero-arch .sh-hero-arch__media { width: calc(100% + 24px); margin-inline: -12px; }
	.sh-hero-arch .sh-hero-arch__main {
		aspect-ratio: 4 / 3.9;
		border-radius: 220px 220px var(--sh-r-md) var(--sh-r-md);
		box-shadow: 0 0 0 5px var(--sh-light), 0 0 0 6px rgba(153, 137, 126, 0.5);
	}
	.sh-hero-arch .sh-hero-arch__title { font-size: 36px; margin-top: 22px; }
	.sh-hero-arch .sh-hero-arch__intro { font-size: 16.5px; }
	.sh-hero-arch .sh-hero-arch__cta .sh-btn { flex: 1 1 100%; justify-content: space-between; }
	.sh-hero-arch .sh-hero-arch__facts { flex-direction: column; gap: 8px; margin-top: 26px; padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.sh-hero-arch.is-animated .sh-hero-arch__main,
	.sh-hero-arch.is-animated .sh-hero-arch__niche,
	.sh-hero-arch.is-animated video,
	.sh-hero-arch.is-animated img { animation: none; }
}

/* Homepage only (pages carrying this hero): the theme pads the content area by
   40px top and bottom, which showed as cream gaps under the header and between
   the last band and the footer. Sections paint their own bands edge to edge. */
.wd-content-layout:has(.sh-hero-arch) { padding-top: 0; padding-bottom: 0; }