/**
 * Invest page — SPA-canonical styles.
 *
 * Mirrors components/Invest.jsx#Invest hero verbatim. The legacy WP hero used
 * `min-height: 520px` with content in the normal flow constrained to
 * max-width: 1200px — making the section a different overall height from
 * SPA's `height: 80vh; min-height: 660px` with absolute-positioned content.
 * That was the 36.6% pixel diff.
 *
 * SPA breakpoint: window.innerWidth <= 900 → @media (max-width: 900px).
 */

/* ── Hero ──────────────────────────────────────────────────────── */
.invest-hero {
	position: relative;
	margin-top: -96px;
	height: 80vh;
	min-height: 660px;
	overflow: hidden;
	color: #fff;
	display: block;
}
.invest-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.invest-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(8, 35, 56, 0.5) 0%,
		rgba(8, 35, 56, 0.1) 38%,
		rgba(8, 35, 56, 0.88) 100%);
}
.invest-hero-content {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 150px 56px 60px;
	display: flex;
	flex-direction: column;
	max-width: none;
	margin: 0;
	min-height: 0;
}
.invest-hero-breadcrumb {
	color: rgba(255, 255, 255, 0.75) !important;
}
.invest-hero-breadcrumb a {
	color: inherit;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	text-decoration: none;
}
.invest-hero-inner {
	margin-top: auto;
	max-width: 940px;
}
.invest-hero-eyebrow {
	color: rgba(255, 255, 255, 0.78) !important;
	margin: 0;
}
.invest-hero-title {
	margin: 16px 0 0;
	color: #fff;
	font-size: 88px;
	line-height: 0.96;
	letter-spacing: -0.03em;
	font-weight: 400;
}
.invest-hero-lede {
	/* SPA <p> with no className → browser-default `p { margin: 1em 0 }` adds
	   a 19px margin-bottom at fontSize 19. The flex-end inner block is
	   bottom-anchored via `margin-top: auto`, so that 19px shifts the whole
	   stack up. Mirror it here. (Same trap as Session 2A.2 rentacar + 2B.2
	   culture.) */
	margin: 22px 0 19px;
	max-width: 720px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 19px;
	line-height: 1.55;
}
.invest-hero-ctas {
	margin-top: 26px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.invest-hero-ctas .btn-ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
}

/* Mobile branch (SPA window.innerWidth <= 900) */
@media (max-width: 900px) {
	.invest-hero {
		margin-top: -64px;
		height: 72vh;
		min-height: 520px;
	}
	.invest-hero-content { padding: 100px 24px 34px; }
	.invest-hero-title { font-size: 44px; }
	.invest-hero-lede { font-size: 16px; margin-bottom: 16px; }
}