/* ═══════════════════════════════════════════════════════════════
   Split hero — 800 tall (desktop) / 757 (mobile). Gradient #F5F8FA →
   transparent, backing panel #E2E9F1, image 873x572 r30, H1 58/70,
   intro 20/28.
   ═══════════════════════════════════════════════════════════════ */
:root {
	--gd-hero-panel-out: clamp(15px, 7.71px + 1.8685vw, 40px);
}

.split-hero {
	overflow: hidden;
	position: relative;
}

.split-hero__band {
	position: relative;
}

.split-hero__fade {
	/* The gradient is a 180deg-rotated rect (it reports x=1728 y=800 on a
	   1728x800 node), so Dev Mode's `bg-gradient-to-b from-[#f5f8fa]` describes
	   the UNROTATED fill and the canvas renders it flipped. Sampling the node's
	   own render: rgb(254,254,254) at the top, rgb(245,248,250) at the bottom.
	   The tint pools at the FOOT of the hero, with the panel shapes. */
	background: linear-gradient(to bottom, rgba(245, 248, 250, 0) 0%, var(--gd-hero-fade) 100%);
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.split-hero__inner {
	align-items: flex-start;
	display: flex;
	/* The gap has to clear the BACKING PANEL, not the image. .split-hero__media
	   ::before overhangs the image on the left by --gd-hero-panel-out (15→40px),
	   so a flat 40px gap left the text box only ~8px from the visible panel edge
	   at 1280 even though it measured 40px to the image. Expressing the gap as
	   'panel overhang + clearance' makes the visible figure the one being set.

	   Clearance is 26px at 1728 — the design's own 66px gap (panel at
	   x714, text box to 688) minus its 40px overhang — and opens to 48px as the
	   viewport narrows, because the columns are tightest exactly where the panel
	   overhang is proportionally largest. That is a downward clamp (negative vw
	   coefficient), which is intended. */
	gap: calc(var(--gd-hero-panel-out) + clamp(26px, 80px - 3.125vw, 48px));
	justify-content: space-between;
	padding-bottom: var(--gd-hero-panel-out);
	padding-top: calc(var(--gd-header-h) + clamp(18px, 11.59px + 1.6442vw, 40px));
	position: relative;
	z-index: 1;
}

.split-hero__text {
	flex: 0 1 auto;
	max-width: 588px;
	padding-top: clamp(40px, -66.62px + 9.6875vw, 103px);
	width: 100%;
}

.split-hero__title {
	margin: 0;
}

.split-hero__intro {
	color: var(--gd-black);
	font-size: var(--gd-eyebrow);
	font-weight: var(--gd-regular);
	line-height: 28px;
	margin-top: 10px;
	max-width: 520px;
}

.split-hero__intro p + p {
	margin-top: 14px;
}

.split-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 30px;
}

/* The buttons are the only thing in the hero that was NOT proportional: at
   1728 they are 520px of a 1513px content box (34%), but held at a flat 250px
   they became 40% at 1520 and 44% at 1410. That ate the gap to the image
   (129px at 1728 -> 49px at 1520, against the design's 134px scaled) and below
   ~1496 forced them onto two rows. Scaling them 250px@1728 -> 168px@1200 keeps
   the single row all the way down to the point where the hero stacks, with
   ~18px of slack at the tightest width rather than the ~5px a steeper ramp
   left. */
.split-hero__ctas .gd-btn {
	min-width: min(clamp(168px, -18.4px + 15.5303vw, 250px), 100%);
}

/* Clarified in review: the blue button sits at FULL blue and eases to 80%
   on hover; the white one sits white (the design draws it border-only,
   which reads as white on this hero) and washes to 20% blue on hover.

   Expressed as alpha on the button itself rather than through the btn-fx wipe,
   because an overlay cannot lighten a button that is already solid blue —
   rgba(43,95,148,.8) painted over #2B5F94 is still #2B5F94. The wipe is
   therefore suppressed on this pair only; buttons elsewhere keep it.

   Selectors carry .btn-fx as well so they outrank button-fx.css's own
   :hover rules rather than relying on stylesheet order. */
.split-hero__ctas .gd-btn,
.split-hero__ctas .gd-btn.btn-fx {
	background: var(--gd-blue);
	border-color: var(--gd-blue);
	color: var(--gd-white);
}

.split-hero__ctas .gd-btn--outline,
.split-hero__ctas .gd-btn--outline.btn-fx {
	background: transparent;
	border-color: var(--gd-blue);
	color: var(--gd-blue);
}

.split-hero__ctas .btn-fx::before {
	content: none;
}

.split-hero__ctas .gd-btn:hover,
.split-hero__ctas .gd-btn:focus-visible,
.split-hero__ctas .gd-btn.btn-fx:hover,
.split-hero__ctas .gd-btn.btn-fx:focus-visible {
	background: var(--gd-blue-80);
	border-color: var(--gd-blue-80);
	color: var(--gd-white);
}

.split-hero__ctas .gd-btn--outline:hover,
.split-hero__ctas .gd-btn--outline:focus-visible,
.split-hero__ctas .gd-btn--outline.btn-fx:hover,
.split-hero__ctas .gd-btn--outline.btn-fx:focus-visible {
	background: var(--gd-blue-20);
	border-color: var(--gd-blue);
	color: var(--gd-blue);
}

.split-hero__media {
	flex: 0 0 57.1%; /* 873 / 1528 */
	position: relative;
}

/* Panel radius is on the TOP corners only — the design draws it as
   rounded-bl/br with a -scale-y-100 flip (40 desktop, 30 mobile),
   and its bottom edge is flush with the end of the section. */
.split-hero__media::before {
	background: var(--gd-panel);
	border-radius: clamp(30px, 26.5px + 0.8969vw, 40px) clamp(30px, 26.5px + 0.8969vw, 40px) 0 0;
	bottom: calc(-1 * var(--gd-hero-panel-out));
	content: "";
	left: calc(-1 * var(--gd-hero-panel-out));
	position: absolute;
	right: calc(-1 * var(--gd-hero-panel-out));
	top: 80px;
	z-index: -1;
}

.split-hero__image {
	aspect-ratio: 873 / 572;
	border-radius: var(--gd-radius-hero);
	object-fit: cover;
	position: relative;
	width: 100%;
	z-index: 1;
}

/* Where the row stops working. The original 1400 cutoff was set by the flat
   250px buttons; those are fluid now, and a three-line H1 is accepted here, so
   the row runs down to 1200. Below that two things go at once — measured at
   1170 the H1 takes a fourth line, and by 1150 the buttons wrap to two rows
   (they need 354px in a 354px column). 1200 is the last width where the H1 is
   three lines and the buttons still sit on one.

   The media drifts from 59.7% of the pair at 1728 to 61.4% at 1200 (design is
   59.8%, 873/1461) because the gap takes a growing share as things narrow.
   That is the trade for the clearance above, and 1.6pp is not visible. */
@media (max-width: 1199px) {
	.split-hero__inner {
		align-items: stretch;
		flex-direction: column;
		gap: 55px;
	}

	.split-hero__text {
		max-width: none;
		padding-top: 0;
	}

	.split-hero__intro {
		max-width: none;
	}

	.split-hero__ctas .gd-btn {
		min-width: min(250px, 100%);
	}

	.split-hero__media {
		flex: 0 0 auto;
	}

	.split-hero__media::before {
		top: calc(-1 * var(--gd-hero-panel-out));
	}
}

@media (max-width: 767px) {
	.split-hero__ctas {
		flex-direction: column;
		gap: 20px;
	}
}