/* layout.css — container, section rhythm, section headings.
   Section-level rules only. Element rules live in the per-component files, so the
   padding/margin collisions ARCHITECTURE.md warns about stay separable. */

.gnt-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

/* ------------------------------------------------------------------ sections */

.gnt-section {
	padding-block: var(--section-pad-y);
}

/* Two adjacent sections on the same ground should not pay the full rhythm twice —
   they belong together, and 208px of dead space between them is what made the old
   page read as an undifferentiated stack. An adjacent-sibling selector closes the pair
   up without needing a modifier class on either, which matters because the page
   documents are fixed. */
.gnt-section--raised + .gnt-section--raised {
	padding-block-start: 0;
}

/* Two sections on the same plain ground are still two sections, but 104px + 104px of
   white between them is a gap, not a rhythm. The second of a run pays the tight
   figure. */
.gnt-section + .gnt-section:not(.gnt-section--raised):not(.gnt-section--dark) {
	padding-block-start: var(--section-pad-y-tight);
}

.gnt-section--raised {
	background-color: var(--color-surface-raised);
}

.gnt-section--dark {
	background-color: var(--color-surface-dark);
	color: var(--color-text-inverse);
}

.gnt-section--dark :is(h1, h2, h3, h4) {
	color: var(--color-text-inverse);
}

/* ---------------------------------------------------------- section heading */
/* LEFT-ALIGNED, with a brass rule above the title.

   The old version was centred, 46rem wide, and used by every section on the site.
   Centring everything is most of why the page read as a template: it removes the
   left edge the eye reads down, and it forces short headings into the middle of a
   1440px field where they look adrift. The rule is the one structural device in this
   design and the only place brass appears at this size. */

.gnt-sectionhead {
	max-width: var(--measure);
	margin: 0 0 var(--space-12);
}

/* THE ACCENT RULE IS A BACKGROUND, NOT A PSEUDO-ELEMENT.

   It was ::before on the container, and it rendered on top of the heading text with
   its margin ignored entirely — measured: an 80px margin-bottom moved it 0px, and the
   title's first dark pixel fell INSIDE the rule's own box. Elementor absolutely
   positions container pseudo-elements for its background-overlay mechanism, and
   .e-con sets --position:relative, so the block simply pinned itself to the
   container's top-left corner.

   A background-image on the title is in flow, cannot collide with anything Elementor
   claims, and needs no extra element in a page document that is fixed. padding-top
   carries the gap. */
.gnt-sectionhead__title {
	margin: 0;
	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-h2);
	line-height: var(--text-h2-lh);
	letter-spacing: var(--text-h2-ls);
	font-weight: var(--font-weight-semibold);
}

.gnt-sectionhead__intro {
	margin: var(--space-4) 0 0;
	max-width: 60ch;
	font-size: var(--text-body-lg);
	line-height: var(--text-body-lg-lh);
	color: var(--color-text-muted);
}

/* Pairs with .gnt-prose--lead. The intro and the copy below it are normally the same
   size; without this, enlarging only the copy would leave the intro smaller than the
   text it introduces. */
.gnt-sectionhead--lead .gnt-sectionhead__intro {
	font-size: var(--text-lead);
	line-height: var(--text-lead-lh);
}

/* On a dark ground the muted intro would drop below AA, so it lifts. */
.gnt-section--dark .gnt-sectionhead__intro {
	color: var(--color-text-on-dark-muted);
}

/* Brass reads as dirt on navy at this size, so dark grounds get a white rule. */
.gnt-section--dark .gnt-sectionhead__title {
	background-image: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45));
}

/* --------------------------------------------------------- the quad / reasons */
/* Four short value propositions. Lives here rather than in stats.css, which is where
   it used to be filed for no reason anybody recorded.

   The old version put a hairline border across the TOP of each column — four rules in
   a row, which is a stock editorial device and read as thin and unimportant. Those are
   gone and nothing replaced them: this is a set of four, not a sequence, so numbering
   it 01/02/03 would assert an order the content does not have. The engagement steps on
   the service pages ARE a sequence, and those are numbered. */

.gnt-quad {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-10) var(--space-8);
}

.gnt-reason {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.gnt-reason__title {
	margin: 0;
	font-size: var(--text-h3);
	line-height: var(--text-h3-lh);
	font-weight: var(--font-weight-semibold);
	text-wrap: balance;
}

/* THE FOUR ITEMS HAVE TO SHARE ROWS, NOT JUST COLUMNS. Measured against staging
   2026-09-15 after "some are big, some are small" on the homepage.

   The four titles run from three words ("Strategy plus execution") to eight
   ("Business, technology, and go-to-market in one place"), so at 4-up they wrap to
   one, two and three lines. Each .gnt-reason was its own flex column, so each
   paragraph began wherever its own title happened to stop — four different heights
   across one row, which is what read as uneven. The grid was already stretching the
   items to a common height, so the raggedness was inside them, not between them.

   Subgrid hands the two child rows back to .gnt-quad: every title shares one row,
   every paragraph shares the next. The copy can then be any length and the row still
   lines up — which matters more than usual here, because the client edits this text
   in Elementor and any fix that depended on the current wording would break the first
   time they touched it.

   @supports because the fallback has to be the flex column above, not a broken grid:
   without subgrid, grid-row:span 2 would stretch each item across two tracks it has
   no business owning. Support is wider than text-wrap:balance, which this file
   already relies on two rules up. */
@supports (grid-template-rows: subgrid) {
	/* 0,2,0. .e-con sets display and row-gap from Elementor's own custom properties,
	   and uploads/elementor/css/post-<id>.css loads after every stylesheet this theme
	   registers — see the header of elementor-bridge.css. 0,1,0 would tie and lose. */
	.gnt-quad .gnt-reason {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		/* A subgrid takes its parent's gutters unless it declares its own, and the
		   parent's row gap is --space-10. Without this, the gap between a title and
		   its own paragraph would open up to the gap between rows of the quad. */
		row-gap: var(--space-3);
	}
}

.gnt-reason__text {
	margin: 0;
	font-size: var(--text-body);
	line-height: var(--text-body-lh);
	color: var(--color-text-muted);
}

.gnt-section--dark .gnt-reason__text {
	color: var(--color-text-on-dark-muted);
}

@media (max-width: 1024px) {
	.gnt-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gnt-sectionhead { margin-bottom: var(--space-10); }
}

@media (max-width: 767px) {
	.gnt-quad { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
	.gnt-sectionhead { margin-bottom: var(--space-8); }
}