/* hero.css — the homepage hero.

   REBUILT 2026-09-09. It used to be a navy block with centred text, and then a
   separate letterbox photograph band underneath it. Two problems, one visible and
   one fatal:

     - The photograph read as an unrelated strip below the headline rather than as
       part of the hero, so the most characteristic image on the site was doing no
       work for the headline it sat under.
     - The h1 was invisible. See elementor-bridge.css for the full account; short
       version, the kit's 0,2,0 rule put navy text on the navy ground and our rule
       tied and lost.

   Now the two are ONE unit: the container is a grid with the photograph and the copy
   in the same cell, a navy scrim between them, and the type left-aligned over the
   dark side of the gradient. That is done entirely in CSS — the page document still
   has __inner and __band as siblings, so no page had to be rebuilt to get here. */

.gnt-hero {
	position: relative;
	display: grid;
	grid-template-areas: "hero";
	align-items: center;
	isolation: isolate;
	min-height: min(78vh, 44rem);
	background-color: var(--navy-700);
	color: var(--color-text-inverse);
	overflow: hidden;
}

/* Both children occupy the single cell. The band is behind, the copy in front, and
   the scrim sits between them on the container's own ::after. */
.gnt-hero__band {
	grid-area: hero;
	z-index: 0;
	align-self: stretch;
	width: 100%;
	height: 100%;
}

.gnt-hero::after {
	content: "";
	grid-area: hero;
	z-index: 1;
	/* Pinned rather than stretched. align-items:center on the container applies to
	   every grid item including this one, which collapsed it to zero height and left
	   the photograph undarkened — the lead was white on bright winter sky. */
	align-self: stretch;
	justify-self: stretch;
	width: 100%;
	height: 100%;
	background: var(--gradient-hero);
}

.gnt-hero__inner {
	grid-area: hero;
	z-index: 2;
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--section-pad-y) var(--container-gutter);
	/* Left-aligned. The old hero centred everything, which is most of why it read as
	   a template rather than as a firm's own page. */
	text-align: left;
}

/* The image widget carries gnt-media--hero, whose aspect-ratio and max-height are
   right for a standalone band and wrong for a full-bleed backdrop. Override both here
   rather than in media.css, so the standalone panel keeps working elsewhere. */
.gnt-hero .gnt-media--hero {
	aspect-ratio: auto;
	height: 100%;
	min-height: 100%;
	max-height: none;
	background: none;
}

.gnt-hero .gnt-media--hero img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	/* The Detroit skyline sits in the upper half of the frame; anchoring the crop
	   there keeps the city visible as the hero gets shorter. */
	object-position: 50% 30%;
}

/* No watermark behind a photograph that fills the whole hero. */
.gnt-hero .gnt-media::after { content: none; }

.gnt-hero__title {
	max-width: 30ch;
	font-size: var(--text-display);
	line-height: var(--text-display-lh);
	letter-spacing: var(--text-display-ls);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-inverse);
	margin: 0;
}

.gnt-hero__lead {
	margin: var(--space-6) 0 0;
	font-size: var(--text-lead);
	line-height: var(--text-lead-lh);
	font-weight: var(--font-weight-regular);
	/* Not pure white. The headline should win, and a lead at full white competes
	   with it for the same attention. */
	color: var(--color-text-on-dark-muted);
}

.gnt-hero__actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-4);
	margin-top: var(--space-10);
}

@media (max-width: 1024px) {
	.gnt-hero {
		min-height: 0;
	}

	.gnt-hero__title { max-width: 26ch; }
	.gnt-hero__inner { padding-block: var(--space-16); }
}

@media (max-width: 767px) {
	.gnt-hero__inner { padding-block: var(--space-14) var(--space-12); }
	.gnt-hero__lead  { margin-top: var(--space-5); max-width: none; }
	.gnt-hero__title { max-width: none; }

	/* On a phone the gradient has to carry the type across the full width, so it
	   becomes vertical rather than left-weighted. */
	.gnt-hero::after {
		background: linear-gradient(
			180deg,
			rgba(7, 31, 51, 0.88) 0%,
			rgba(7, 31, 51, 0.82) 55%,
			rgba(7, 31, 51, 0.9) 100%
		);
	}
}

@media (max-width: 479px) {
	.gnt-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Measure. Set at 0,3,0 because a bare wrapper class does not hold against
   Elementor's own width handling on .elementor-element, and the lead was running the
   full 1200px — about 130 characters a line, roughly twice a readable measure. */
.gnt-hero .elementor-element.gnt-hero__title { max-width: 22ch; }
.gnt-hero .elementor-element.gnt-hero__lead  { max-width: 54ch; }

@media (max-width: 767px) {
	.gnt-hero .elementor-element.gnt-hero__title,
	.gnt-hero .elementor-element.gnt-hero__lead { max-width: none; }
}

/* ------------------------------------------------- background video */
/* Layered BETWEEN the photograph and the scrim, and invisible until it is actually
   playing — so the handover is a fade from the still rather than a flash of black
   while the file buffers. The photograph underneath is the fallback, which is why
   there is no poster attribute to keep in sync with it.

   .gnt-hero__band already carries z-index:0, which makes it a stacking context, so
   everything in here stays below .gnt-hero::after whatever z-index it claims. */

.gnt-hero__band { position: relative; }

.elementor-element.gnt-hero__video {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity 700ms var(--easing-standard);
}

.elementor-element.gnt-hero__video.is-playing { opacity: 1; }

.gnt-hero__video-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The skyline sits in the upper third of a 16:9 frame, and the hero is wider than
	   that, so cover crops top and bottom. Biasing upward keeps the city in shot. */
	object-position: 50% 38%;
}

/* Two independent guards, because the quality floor is not negotiable and JS can be
   wrong. assets/js/main.js also refuses to attach the source in either case, so the
   file is never even fetched — these only matter if that check ever regresses. */
@media (prefers-reduced-motion: reduce) {
	.elementor-element.gnt-hero__video { display: none; }
}

@media (max-width: 1024px) {
	.elementor-element.gnt-hero__video { display: none; }
}