/* =========================================================================
   HNZ Constructions — "About HNZ Constructions" (about-split)

   Owns the staggered two-image editorial block.

   Measured off Home.png (1442px export = the 1440px artboard). The block sits
   between the dividers at y 841 and y 1800.

   Horizontal — exact, no type involved:

     block            x 177–1271  ->  1095 wide, inside a 1360 container that
                      starts at x 40. Left inset 137, right inset 128 — near
                      enough symmetric that centring a 1095px box is the
                      honest reading (it lands within 5px on both sides).
     small image      x 177–472   ->  296 wide
     column gap       x 473–520   ->  48px
     large image      x 521–1271  ->  751 wide
     296 + 48 + 751 = 1095, so `296fr 751fr` with a 48px gap resolves exactly.

   Images — exact:

     small image      296 x 336  (y 964–1299)
     large image      751 x 365  (y 1029–1393)
     the large image starts 65px lower than the small one, and the two overlap
     from y 1029 to 1299.

   Type — sizes are solid, the gaps between them are not:

     label            ascender height 30px  -> 40px type (--fs-600)
     heading          cap height 34px       -> 50px type (--fs-700)
                      cap-to-cap 58px       -> line-height 1.16
     body             cap height 10px       -> 13px type, i.e. .prose--small
                      already correct, and it fills the 751px column
     CTA              cap height 16px       -> 24px type (--fs-500), and the
                      arrow is the same 32 x 22 as the hero's

   The vertical gaps below are set from ink-to-ink measurements, so the
   rendered result will sit a few px looser than the design once each element's
   line box is added. Worth one pass in the browser with Sofia Pro loaded
   before trusting them to the pixel — the same caveat as footer.css.
   ========================================================================= */

/* The block is narrower than the container and inset from its left edge, which
   is what reveals the strip of site watermark down the left. Both the label and
   the grid share this box so their left edges line up at x 177.

   The inset is 10% of the container (40 + 136 = 176 against a measured 177),
   not a centring — the Contact Us block lands on the same x 177, and two
   independent blocks agreeing exactly is what identifies it as a grid position
   rather than export noise. Centring instead put this 4.5px out and Contact
   15px out, and left 128px of unexplained slack on the right; the 10% inset
   reproduces that slack (129px) as a consequence. */
.about-split__inner {
	max-width: 1095px;
}

.section--about-split {
	/* The header is sticky, so anchor links must stop clear of it. */
	scroll-margin-top: calc(var(--header-height) + var(--sp-3));

	.container {
		position: relative;
		z-index: 1;

	}
}

.about-split__inner {
	position: relative;
	z-index: 1;
}

@media (min-width: 1300px) {
	.section--about-split {
		padding-bottom: 40px;
	}

	.about-split__inner {
		margin-left: 10%;
	}
}

/* Label ---------------------------------------------------------------- */

.about-split__label {
	font-size: var(--fs-600); /* 24px–40px */
	margin-bottom: 2.75rem; /* 44px */
}

/* Grid ----------------------------------------------------------------- */

.about-split {
	display: grid;
	gap: var(--sp-6);
}

.about-split__media img {
	width: 100%;
	object-fit: cover;
}

.about-split__media--small img {
	aspect-ratio: 296 / 336;
}

.about-split__media--large img {
	aspect-ratio: 751 / 365;
}

/* Body ----------------------------------------------------------------- */

.about-split__heading {
	font-size: var(--fs-700); /* 30px–50px */
	line-height: 1.16; /* 58px cap-to-cap on 50px type */
	margin-bottom: 3.25rem; /* 52px */
}

.about-split__text {
	max-width: none;
	margin-bottom: 3.25rem; /* 52px */
}

/* Desktop: the staggered two-column arrangement ------------------------ */

@media (min-width: 1300px) {
	.about-split {
		grid-template-columns: 296fr 751fr;
		column-gap: var(--sp-7); /* 48px */
		row-gap: 3.25rem;        /* 52px */
		align-items: start;
	}

	.about-split__media--small {
		grid-column: 1;
		grid-row: 1;
	}

	/*
	 * The two images share row 1 but not a top edge — the large one drops 65px,
	 * which is what makes the block read as staggered rather than as a plain
	 * two-column split. Exact: small image top y 964, large image top y 1029.
	 */
	.about-split__media--large {
		grid-column: 2;
		grid-row: 1;
		margin-top: 65px;
	}

	.about-split__body {
		grid-column: 2;
		grid-row: 2;
	}
}