/* =========================================================================
   Hero — merged with "Hero media" (L1521-1578 in pre-split main.css).
   Keyframes kept inline with their owning component.
   ========================================================================= */
.id30-hero {
	position: relative;
	min-height: calc(100dvh - var(--id30-admin-bar, 0px));
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
}
.id30-hero__glow {
	pointer-events: none;
	position: absolute;
	top: -160px; right: -160px;
	width: 720px; height: 720px;
	border-radius: 9999px;
	filter: blur(48px);
	opacity: 0.4;
	background: radial-gradient(closest-side, rgba(255,255,255,0.35), transparent 70%);
}
.id30-hero__glow--ember {
	top: auto; right: auto;
	bottom: -180px; left: -160px;
	width: 540px; height: 540px;
	filter: blur(56px);
	opacity: 0.32;
	background: radial-gradient(closest-side, rgba(226,39,1,0.55), transparent 70%);
}
.id30-progress {
	position: fixed;
	top: var(--id30-admin-bar, 0px); left: 0; right: 0;
	height: 3px;
	z-index: 60;
	background-color: var(--color-ember);
	transform-origin: left center;
	transform: scaleX(0);
	pointer-events: none;
	will-change: transform;
	animation: id30-progress-fill linear both;
	animation-timeline: scroll(root);
}
@keyframes id30-progress-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}
@supports not (animation-timeline: scroll()) {
	.id30-progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.id30-progress { display: none; }
}
.id30-hero__inner {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 144px 24px 64px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 56px;
	align-items: end;
	flex: 1 0 auto;
}
.id30-hero__lead { container-type: inline-size; }
.id30-hero__title {
	/* Auto-fit: --title-max-len comes from hero.php (longest line char count).
	   100cqi is the inline-size of .id30-hero__lead — at <1024px that's the
	   full hero column, at ≥1024px the 8/12 grid span. The 1.55 coefficient
	   approximates Lexend's avg char-width (~0.55em) inverted with a safety
	   margin so the longest line never overflows nor crowds the right column. */
	color: #fff;
	font-size: clamp(2.6rem, calc(100cqi / var(--title-max-len, 18) * 1.55), 6rem);
	line-height: 0.96;
	letter-spacing: -0.01em;
}
.id30-hero__title-line,
.id30-hero__subtitle-line { display: block; }
.id30-hero__title-line { white-space: nowrap; }
.id30-hero__subtitle {
	margin-top: 40px;
	font-family: var(--font-title);
	color: rgba(255,255,255,0.85);
	font-size: clamp(1.1rem, 1.6vw, 1.6rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}
.id30-hero__paragraphs { display: flex; flex-direction: column; gap: 22px; }
.id30-hero__paragraph {
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255,255,255,0.74);
	max-width: 52ch;
}
/* Lead paragraph carries the positioning sentence — bigger, brighter, slightly
   weighted. Title-font for a touch more editorial gravity. */
.id30-hero__paragraph:first-child {
	font-family: var(--font-title);
	font-size: clamp(1.18rem, 1.4vw, 1.4rem);
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: rgba(255,255,255,0.96);
}
/* Supporting paragraph anchored by a thin ember rule — same vocabulary as
   the stats strip cells, ties the right column into the proof system. */
.id30-hero__paragraph:nth-child(2) {
	position: relative;
	padding-left: 16px;
}
.id30-hero__paragraph:nth-child(2)::before {
	content: "";
	position: absolute;
	left: 0; top: 6px; bottom: 6px;
	width: 1px;
	background: linear-gradient(180deg, rgba(226,39,1,0.55), rgba(226,39,1,0.05));
}

/* --- Eyebrow ------------------------------------------------------------- */
.id30-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
	padding: 0;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.78);
}
.id30-hero__eyebrow-dot {
	display: inline-block;
	width: 7px; height: 7px;
	border-radius: 9999px;
	background: var(--color-ember, #e22701);
	box-shadow: 0 0 0 0 rgba(226,39,1,0.55);
	animation: id30-hero-pulse 2.4s ease-out infinite;
}
.id30-hero__eyebrow-label { display: inline-block; }
@keyframes id30-hero-pulse {
	0%   { box-shadow: 0 0 0 0     rgba(226,39,1,0.55); }
	70%  { box-shadow: 0 0 0 10px  rgba(226,39,1,0);    }
	100% { box-shadow: 0 0 0 0     rgba(226,39,1,0);    }
}

/* --- Action duo ---------------------------------------------------------- */
.id30-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	margin-top: 36px;
}
.id30-hero__cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 22px;
	border-radius: 9999px;
	background: var(--color-ember, #e22701);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.22),
		0 14px 30px -16px rgba(226,39,1,0.55),
		0 6px 14px -8px rgba(0,0,0,0.35);
	transition: transform 220ms var(--ease-spring), box-shadow 220ms;
}
.id30-hero__cta-primary:hover {
	transform: translateY(-2px);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.32),
		0 18px 38px -16px rgba(226,39,1,0.7),
		0 8px 18px -8px rgba(0,0,0,0.4);
}
.id30-hero__cta-primary svg { flex: 0 0 auto; }
.id30-hero__cta-ghost {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 4px;
	color: #fff;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255,255,255,0.32);
	transition: color 200ms, border-color 200ms;
}
.id30-hero__cta-ghost:hover {
	color: var(--color-ember, #e22701);
	border-bottom-color: var(--color-ember, #e22701);
}

/* --- Stats strip --------------------------------------------------------- */
.id30-hero__stats {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 24px 96px;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 18px;
}
.id30-hero__stat {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: 18px;
}
.id30-hero__stat::before {
	content: "";
	position: absolute;
	left: 0; top: 6px; bottom: 6px;
	width: 1px;
	background: linear-gradient(180deg, rgba(226,39,1,0.55), rgba(226,39,1,0.05));
}
.id30-hero__stat-value {
	font-family: var(--font-title);
	font-size: clamp(1.6rem, 2.2vw, 2.1rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: #fff;
}
.id30-hero__stat-label {
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.62);
	line-height: 1.3;
}
@media (min-width: 768px) {
	.id30-hero__stats { grid-template-columns: repeat(4, 1fr); gap: 0 28px; }
}

/* --- Staggered hero reveal ----------------------------------------------- */
.id30-hero__eyebrow,
.id30-hero__title-line,
.id30-hero__subtitle-line,
.id30-hero__paragraph,
.id30-hero__actions,
.id30-hero__stat {
	opacity: 0;
	transform: translateY(22px);
	animation: id30-hero-reveal 820ms var(--ease-spring) forwards;
	animation-delay: calc(var(--i, 0) * 80ms + 150ms);
}
@keyframes id30-hero-reveal {
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.id30-hero__eyebrow,
	.id30-hero__title-line,
	.id30-hero__subtitle-line,
	.id30-hero__paragraph,
	.id30-hero__actions,
	.id30-hero__stat {
		opacity: 1; transform: none; animation: none;
	}
	.id30-hero__eyebrow-dot { animation: none; }
}

.id30-hero__scroll {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255,255,255,0.55);
	animation: id30-hero-bounce 2.4s ease-in-out infinite;
	transition: color 200ms;
}
.id30-hero__scroll:hover { color: #fff; }
@keyframes id30-hero-bounce {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 8px); }
}

@media (min-width: 1024px) {
	.id30-hero__inner { grid-template-columns: repeat(12, 1fr); }
	.id30-hero__lead       { grid-column: span 8; }
	.id30-hero__paragraphs { grid-column: span 4; }
}

/* --- Hero media (colour-boy asymmetric backdrop) -------------------------- */
.id30-hero__media {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
.id30-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 48% 35%;
	opacity: 0.55;
	filter: saturate(0.75) contrast(1.06);
	transform: scale(1.04);
	animation: id30-hero-drift 18s ease-in-out infinite alternate;
}
.id30-hero__image-fade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(2,71,104,0.82) 0%, rgba(2,71,104,0.58) 45%, rgba(2,71,104,0.25) 100%),
		linear-gradient(180deg, rgba(2,47,72,0.45) 0%, transparent 38%, rgba(2,47,72,0.78) 100%);
}
.id30-hero__image-scanline {
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
	mix-blend-mode: screen;
	opacity: 0.6;
}
@keyframes id30-hero-drift {
	0%   { transform: scale(1.04) translate3d(0, 0, 0); }
	100% { transform: scale(1.08) translate3d(-14px, -10px, 0); }
}
@media (min-width: 1024px) {
	.id30-hero__image {
		width: 100%;
		object-position: 60% 45%;
		opacity: 0.7;
	}
	.id30-hero__image-fade {
		background:
			linear-gradient(90deg, rgba(2,47,72,0.92) 0%, rgba(2,71,104,0.78) 30%, rgba(2,71,104,0.45) 60%, rgba(2,71,104,0.15) 100%),
			linear-gradient(180deg, rgba(2,47,72,0.35) 0%, transparent 40%, rgba(2,47,72,0.82) 100%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.id30-hero__image { animation: none; }
}