/* Homepage hero — FKG "Cinematic Scale" (design direction 1a)
   Place at: wp-content/themes/<theme>/css/hero-home.css

   Typography follows the mockup spec exactly: Montserrat ExtraBold 800 for the
   eyebrow and headline, Mulish Regular 400 for body copy. The theme stylesheet
   declares no font-family of its own and caps h1 at 48px (style.css:335), so
   the hero states its own faces and scale rather than inheriting. Colours still
   come from --bs-primary, and the buttons still build on the theme's .btn. */

.home-hero{ position: relative; overflow: hidden; color: #fff; display: flex; align-items: center; min-height: 640px;}

/* Media layer — mirrors .page-banner .image-fit (style.css:188) */
.home-hero .image-fit{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;}

/* Scrim — flat rgba(0,53,74,.80) per spec, replacing the earlier navy gradient. */
.home-hero .image-fit:before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2;
	background: rgba(0, 53, 74, 0.80) ;}

/* Content block — 1248px, left-aligned column, vertically centred by .home-hero */
.home-hero .container{ position: relative; z-index: 3; width: 100%; max-width: 1248px; margin: 0 auto;
	padding: 88px 24px 72px;}
.home-hero .hero-content{ display: flex; flex-direction: column; align-items: flex-start; text-align: left;}

/* Eyebrow chip — Montserrat 800, square corners */
.home-hero .hero-eyebrow{ display: inline-block; margin: 0; padding: 9px 16px; background: var(--bs-primary); color: #fff;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-size: 12px; font-weight: 800; line-height: 1;
	letter-spacing: 0.14em; text-transform: uppercase; border-radius: 0;}

/* Headline — 72px/1.02 at -.02em; accent word in --bs-primary */
.home-hero h1{ font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-weight: 800; line-height: 1.02;
	letter-spacing: -0.02em; color: #fff; margin: 28px 0 0; max-width: 1080px; text-wrap: balance;}
.home-hero h1 span{ color: var(--bs-primary);}

/* Subtext — Mulish 400 */
.home-hero .hero-lede{ font-family: 'Mulish', 'Helvetica Neue', Arial, sans-serif; font-size: 21px; font-weight: 400;
	line-height: 1.6; color: rgba(255,255,255,0.86); margin: 28px 0 0; max-width: 660px;}

.home-hero .hero-actions{ display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px;}

/* Secondary CTA — outlined, Montserrat 700. The primary keeps the theme's
   .btn-primary fill; only its height is aligned to the outlined button. */
.home-hero .hero-actions .btn{ height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 28px;}
.home-hero .hero-actions .btn{ font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff;}
.home-hero .hero-actions .btn-outline-light { border: 1px solid rgba(255,255,255,0.55); background: transparent;}
.home-hero .hero-actions .btn-outline-light:hover,
.home-hero .hero-actions .btn-outline-light:focus{ background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.55); color: #fff;}

/* Fluid ramp below the 1400px breakpoint so 72px degrades rather than clipping. */
@media (min-width:320px) {
.home-hero h1{ font-size: calc(2.125rem + ((1vw - 3.2px) * 3.5185));}
}

@media (min-width:1400px) {
.home-hero h1{ font-size: 72px;}
}

@media (max-width:991.98px) {
.home-hero{ min-height: 520px;}
.home-hero .container{ padding: 64px 24px 56px;}
.home-hero .hero-lede{ font-size: 19px;}
}

@media (max-width:575.98px) {
.home-hero{ min-height: 460px;}
.home-hero .container{ padding: 48px 24px 44px;}
.home-hero .hero-actions{ display: block; width: 100%;}
.home-hero .hero-actions .btn{ display: flex; width: 100%;}
.home-hero .hero-actions .btn + .btn{ margin-top: 12px;}
}