/* =====================================================================
   HOMEPAGE HERO — ADOPTED REFERENCE TREATMENT

   DOCUMENTED DEVIATION FROM THE BRAND GUIDELINES. Client decision.
   Loaded on the FRONT PAGE ONLY (see functions.php, 'mtf-hero' inside an
   is_front_page() check). Inside pages — /packages/ and every package
   detail page — keep the guideline hero: flush-left copy on a solid
   ground plate. Nothing here touches them.

   Overridden here, homepage only:
     §4  / §14 — hero copy is centred rather than flush left
     §5.2       — type sits on a gradient scrim, not a solid ground plate
     §9.1 / §14 — the enquiry bar floats on the photograph
     §14        — the bar uses pill radius, not 0

   Contrast comes from the scrim and the photograph, not from text
   shadows: the reference sets white type straight onto the image, so
   the shadows are gone and the mid-scrim carries legibility instead.

   To revert, stop enqueuing this file in functions.php (search for
   'mtf-hero'). Nothing else depends on it.
   ===================================================================== */

/* ---- scrim: light at the sky, firmer through the band the copy sits on ---- */
.stage::after {
	background: linear-gradient(180deg,
		rgba(32,30,29,.30) 0%,
		rgba(32,30,29,.06) 24%,
		rgba(32,30,29,.14) 50%,
		rgba(32,30,29,.24) 74%,
		rgba(32,30,29,.34) 100%);
}

/* the scrim must paint BELOW the copy: the pseudo-element is the last
   child in paint order, so both need an explicit stacking order. */
.stage::after { z-index: 1; }
.stage__inner { z-index: 2; }
.stage__cue { z-index: 2; }

/* ---- centre the composition horizontally, split it vertically ----
   The client photograph has a person in the middle of the frame, so the
   copy is pinned to the upper third and the enquiry bar to the base,
   leaving her face clear between them. */
.stage__inner { align-items: stretch; justify-content: center; }
.stage__rail {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(28px, 7vh, 72px) var(--pm) clamp(24px, 5vh, 56px);
	text-align: center;
}

/* the plate is now air, not a block */
.stage__plate {
	background: none;
	padding: 0;
	max-width: 1000px;
	margin-inline: auto;
}

.stage__plate .lbl,
.stage__plate .lbl-accent {
	display: block;
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(11px, 1.1vw, 13px);
	letter-spacing: .18em;
	text-transform: uppercase;
}

.stage__plate h1 {
	color: #fff;
	font-size: clamp(40px, 7vw, 92px);
	line-height: .98;
	letter-spacing: -.03em;
	margin: var(--space-4) auto 0;
	max-width: 18ch;
	text-wrap: balance;
}

/* ---- hero buttons: pill, hero only ---- */
.stage__acts { justify-content: center; margin-top: clamp(20px, 3.4vh, 36px); }
.stage .btn { border-radius: 999px; padding: var(--space-3) var(--space-8); font-size: 15px; }
.stage .btn-primary { box-shadow: 0 14px 34px -14px rgba(236,48,19,.7); }
.stage .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.stage .btn-ghost:hover { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1.5px #fff; }

/* ---- the enquiry bar, floating on the photograph ---- */
.stage .starter {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr auto;
	align-items: center;
	gap: 0;
	width: min(920px, 100%);
	margin: 0 auto;
	padding: 9px 9px 9px var(--space-8);
	background: #fff;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 26px 60px -24px rgba(32,30,29,.62);
	text-align: left;
}
.stage .starter__cell {
	border: 0;
	border-right: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
	background: transparent;
	padding: var(--space-2) var(--space-6) var(--space-2) 0;
	margin-right: var(--space-6);
	border-radius: 0;
}
.stage .starter__cell:hover { background: transparent; }
.stage .starter__cell:hover b { color: var(--color-accent); }
.stage .starter__cell .lbl { color: var(--color-neutral-600); display: block; font-size: 10px; letter-spacing: .12em; }
.stage .starter__cell b { font-size: 15px; color: var(--color-text); transition: color 200ms var(--ease); }
.stage .starter .btn-primary {
	border-radius: 999px;
	justify-content: center;
	padding: var(--space-4) var(--space-8);
	font-size: 15px;
	white-space: nowrap;
	box-shadow: none;
}

/* ---- responsive ---- */
@media (max-width: 900px) {
	.stage .starter {
		grid-template-columns: 1fr;
		border-radius: 26px;
		padding: var(--space-4);
		gap: var(--space-2);
		width: 100%;
	}
	.stage .starter__cell {
		border-right: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
		margin-right: 0;
		padding: var(--space-3) 0;
	}
	.stage .starter .btn-primary { width: 100%; margin-top: var(--space-2); }
}
@media (max-width: 767px) {
	.stage__rail { padding: var(--space-6) var(--pm); }
	.stage__plate h1 { max-width: 15ch; }
}

/* high-contrast users get a flat, heavier scrim rather than a gradient */
@media (prefers-contrast: more) {
	.stage::after { background: rgba(32,30,29,.42); }
}