/* Hero module */
.hero {
	position: relative;
	background: var(--navy-deep);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	--hero-overlay: 0.65;
}
.hero::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background-image: var(--hero-bg, none);
	background-size: cover; background-position: center;
	opacity: calc(1 - var(--hero-overlay) * 0.45);
}
.hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg,
		rgba(var(--navy-deep-rgb), calc(var(--hero-overlay) * 1)) 0%,
		rgba(var(--navy-deep-rgb), calc(var(--hero-overlay) * 0.75)) 50%,
		rgba(var(--navy-deep-rgb), calc(var(--hero-overlay) * 1.05)) 100%);
}

/* IMPORTANT: only set padding-top / padding-bottom here.
   Horizontal padding (24px on desktop / 15px mobile) is inherited from .container.
   If you write `padding: X 0 Y` you wipe out the container's left/right padding and
   the hero text bleeds past the standard container edge. */
.hero__inner {
	padding-top: 120px;
	padding-bottom: 99px;
	max-width: var(--container-max); /* normal container width — same as nav & content sections */
}
.hero--medium .hero__inner {
	padding-top: 88px;
	padding-bottom: 80px;
	max-width: var(--container-max);
}

.hero__crumbs {
	font-size: 13px; color: rgba(255,255,255,0.55);
	margin-bottom: 18px; letter-spacing: 0.02em;
}
.hero__crumbs a:hover { color: #fff; }
.hero__crumbs a { color: rgba(255,255,255,0.7); }
.hero__crumbs span { color: rgba(255,255,255,0.9); }

.hero__heading { color: #fff; margin-top: 14px; }
.hero--medium .hero__heading { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.hero__lead { color: rgba(255,255,255,0.82); margin-top: 18px; font-size: 1rem; max-width: 560px; }
.hero__actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero__meta {
	margin-top: 36px; display: flex; gap: 28px; flex-wrap: wrap;
	font-size: 1rem; color: rgba(255,255,255,0.78);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta svg { color: var(--teal); flex-shrink: 0; }

@media (max-width: 720px) {
	/* same pattern: only set vertical padding so .container's 15px horizontal stays */
	.hero__inner { padding-top: 80px; padding-bottom: 70px; }
	.hero--medium .hero__inner { padding-top: 56px; padding-bottom: 56px; }
	.hero__lead { font-size: 1rem; }
	.hero__actions .btn { flex: 1; min-width: 140px; }
	.hero__meta { display: grid; gap: 10px; font-size: 1rem; }
}