/* Hero banner */
.hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(320px, 30vw, 500px); border-radius: var(--radius-lg); background: var(--hero-bg, var(--color-dark)); color: var(--color-on-dark); isolation: isolate; }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2; }
/* Darken only the text side, so the image subject stays vivid. */
.hero--has-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--hero-bg, var(--color-dark)) 0%, color-mix(in srgb, var(--hero-bg, #000) 70%, transparent) 30%, transparent 55%); }
.hero:not(.hero--has-image)::after { content: ""; position: absolute; z-index: -1; right: -8%; top: -30%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 55%, transparent) 0%, transparent 70%); }
.hero__content { max-width: 600px; padding: var(--space-7) clamp(1.5rem, 5vw, 4rem); }
.hero__eyebrow { font-size: var(--fs-sm); font-weight: var(--fw-medium); opacity: .85; margin-bottom: var(--space-3); }
.hero__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.12; letter-spacing: -0.01em; margin-bottom: var(--space-4); color: inherit; }
.hero__text { opacity: .8; margin-bottom: var(--space-5); }

@media (max-width: 860px) {
	/* Image on top, text below on a solid background */
	.hero--has-image { flex-direction: column; align-items: stretch; min-height: 0; }
	.hero--has-image .hero__image { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; z-index: 0; }
	.hero--has-image::before { display: none; }
	.hero--has-image .hero__content { max-width: none; padding: var(--space-5); }
}
@media (max-width: 640px) {
	.hero { border-radius: var(--radius); }
	.hero:not(.hero--has-image) { min-height: 280px; }
	.hero:not(.hero--has-image) .hero__content { padding: var(--space-6) var(--space-5); }
}