/* cta.css — the closing call-to-action band.

   The markup is a frame holding a photograph and, absolutely positioned over it, a
   dark body with the heading and one button. That structure is kept; what changed is
   the treatment. It used to carry an 88px radius on the top corners — a value with
   no sibling anywhere else in the system — and centred type.

   Now: full-bleed, left-aligned to match every other section, with the heading and
   the button on one line at desktop width so the band reads as a single closing
   statement rather than a stacked block. */

.gnt-cta {
	position: relative;
}

.gnt-cta__frame {
	position: relative;
	overflow: hidden;
	background-color: var(--navy-700);
	isolation: isolate;
}

/* The scrim. Left-weighted, same logic as the hero: the type sits on the dark side
   and the photograph stays readable on the other. */
.gnt-cta__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--gradient-cta);
	pointer-events: none;
}

.gnt-cta__body {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	/* The container is a flex COLUMN — .e-flex sets --flex-direction:column and .e-con
	   reads it — so the vertical axis is the MAIN axis. align-items here centred the
	   content horizontally and left it pinned to the top of a 422px band, which is the
	   large empty space below the CTA text. justify-content is the one that centres it. */
	justify-content: center;
	align-items: stretch;
	color: var(--color-text-inverse);
}

/* THE BAND'S PHOTOGRAPH WAS INVISIBLE ON EVERY PAGE.

   The page markup gives this element two classes, gnt-cta__body and gnt-section--dark,
   and layout.css paints .gnt-section--dark with a SOLID background. Absolutely
   positioned at z-index 2 over the image, that covered the photograph completely — the
   band rendered as flat navy and the scrim below it did nothing.

   --dark is wanted here for its text colour, not its ground, so the ground is taken
   back. 0,2,0 so it does not depend on cta.css happening to load after layout.css. */
.gnt-cta .gnt-cta__body {
	background-color: transparent;
}

.gnt-cta__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-10);
	width: 100%;
}

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

/* The photograph panel inside the frame. No watermark under a full photograph. */
.gnt-cta .gnt-media { z-index: 0; }
.gnt-cta .gnt-media::after { content: none; }

.gnt-cta .elementor-element.gnt-btn {
	flex: 0 0 auto;
}

@media (max-width: 1024px) {
	.gnt-cta__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-6);
	}

	.gnt-cta__title { max-width: none; }
}

@media (max-width: 767px) {
	/* Below tablet the absolute overlay stops being viable — the copy is taller than
	   any sensible image aspect. The body leaves the flow of the frame and the
	   photograph sits above it. */
	.gnt-cta__body {
		position: static;
		inset: auto;
		padding-block: var(--space-12);
		background-color: var(--navy-700);
	}

	.gnt-cta__frame::after { display: none; }

	.gnt-cta .gnt-media--cta {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}
}