/* split.css — the image-and-copy feature block.

   REBUILT 2026-09-09. It was a small square photograph on the left with a 60px
   heading beside it, which produced "Why GNT / Associates?" — a two-line heading with
   the second word orphaned — and a large field of dead space under the image.

   This is the one place on the homepage where boldness is spent: the photograph runs
   to the page edge on its side, the copy column holds a real measure, and the two are
   set on a 5:7 grid rather than a 50/50 that makes both halves feel undecided.
   Everything else on the page is quieter than this. */

.gnt-split {
	display: grid;
	grid-template-columns: 5fr 7fr;
	align-items: center;
	gap: var(--space-16);
}

.gnt-split__media {
	min-width: 0;
}

.gnt-split__media .gnt-media {
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}

.gnt-split__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Same accent rule as a section heading, and a background for the same reason — see
   the note in layout.css. A pseudo-element on .gnt-split__body would be absolutely
   positioned by Elementor and land on top of the title. */
.gnt-split__title {
	margin: 0;
	max-width: 24ch;
	padding-top: calc(var(--space-6) + var(--accent-bar-height));
	background-image: linear-gradient(var(--color-accent-rule), var(--color-accent-rule));
	background-repeat: no-repeat;
	background-position: left top;
	background-size: var(--accent-bar-width) var(--accent-bar-height);
	font-size: var(--text-h1);
	line-height: var(--text-h1-lh);
	letter-spacing: var(--text-h1-ls);
	font-weight: var(--font-weight-bold);
}

.gnt-split__copy {
	margin-top: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	font-size: var(--text-body-lg);
	line-height: var(--text-body-lg-lh);
	color: var(--color-text-muted);
}

.gnt-split__copy p {
	margin: 0;
	max-width: 62ch;
}

.gnt-split .elementor-element.gnt-btn {
	margin-top: var(--space-8);
}

/* Reversed on alternate uses, so consecutive splits down a service page do not all
   lean the same way. */
.gnt-split--flip .gnt-split__media { order: 2; }

@media (max-width: 1024px) {
	.gnt-split {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-10);
	}

	/* The photograph leads on narrow screens: a portrait image above the copy reads
	   better than a squeezed column beside it. */
	.gnt-split--flip .gnt-split__media { order: 0; }

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

@media (max-width: 767px) {
	.gnt-split { gap: var(--space-8); }
	.gnt-split .elementor-element.gnt-btn { margin-top: var(--space-6); }
}