/* ==========================================================================
   LANTech Africa — design system
   World: the survey sheet. A drafted plan in navy hairline ink on white,
   annotated in the brand red. Four colours only, plus their tints.

   Brand colours come from the logo and are not negotiable:
     red   #d40000   navy  #000099   white  #ffffff   black #0b0d14
   The red is darkened one step (#d40000, not #ff0000) because pure red on
   white measures 4.0:1 and fails WCAG AA for body text; #d40000 measures
   5.5:1 and is indistinguishable on screen from the logo's red.
   ========================================================================== */

@font-face {
	font-family: "Archivo";
	src: url("../assets/fonts/archivo-latin.woff2") format("woff2-variations"),
	     url("../assets/fonts/archivo-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
}

:root {
	/* — brand — */
	--red: #d40000;
	--navy: #000099;
	--white: #ffffff;
	--black: #0b0d14;

	/* — tints, derived from the four above — */
	--red-ink: #a80000;        /* red for small text on white, 7.9:1 */
	--red-wash: #fdf1f1;
	--navy-ink: #00006b;       /* navy for body text, 16.4:1 */
	--navy-wash: #f0f1fa;
	--grey-rule: #d3d6e0;
	--grey-rule-soft: #e6e8ef;
	--grey-text: #4a4f5c;      /* 8.2:1 on white */
	--grey-fill: #f6f7fa;

	/* — type — */
	--sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

	/* — measure & rhythm — */
	--page: 1280px;
	--gutter: clamp(20px, 4vw, 56px);
	--rhythm: 8px;
	--band: clamp(56px, 7vw, 104px);

	/* — rules: one hairline weight throughout, the drawing's own — */
	--hair: 1px;
	--hair-strong: 2px;

	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
}

/* — reset — */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
	margin: 0;
	background: var(--white);
	color: var(--black);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.55;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red-ink); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; }

::selection { background: var(--navy); color: var(--white); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* — layout — */
.wrap {
	width: 100%;
	max-width: var(--page);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.band { padding-block: var(--band); }
.band--tight { padding-block: clamp(36px, 4.5vw, 64px); }
.band--wash { background: var(--grey-fill); }
.band--navy { background: var(--navy-ink); color: var(--white); }
.band--navy a { color: var(--white); }
.rule-top { border-top: var(--hair) solid var(--black); }

/* — type scale —
   Display is the sheet's title lettering: tight, heavy, set to the measure. */
.display,
h1 {
	font-size: clamp(36px, 5.6vw, 74px);
	line-height: 0.95;
	letter-spacing: -0.035em;
	font-weight: 700;
	font-stretch: 105%;
	text-wrap: balance;
}
h2 {
	font-size: clamp(26px, 3.2vw, 42px);
	line-height: 1.06;
	letter-spacing: -0.028em;
	font-weight: 700;
	text-wrap: balance;
}
h3 {
	font-size: clamp(18px, 1.6vw, 21px);
	line-height: 1.25;
	letter-spacing: -0.012em;
	font-weight: 600;
	text-wrap: balance;
}
h4 {
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: 0.01em;
	font-weight: 600;
}
.lede {
	font-size: clamp(18px, 1.55vw, 21px);
	line-height: 1.5;
	max-width: 62ch;
	color: var(--grey-text);
}
.prose p { max-width: 68ch; }
.prose p + p { margin-top: 1em; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; margin-bottom: .5em; }
.prose ul { margin-top: .8em; }
.prose li { position: relative; padding-left: 1.15em; max-width: 64ch; }
.prose li + li { margin-top: .45em; }
.prose li::before {
	content: ""; position: absolute; left: 0; top: .62em;
	width: 6px; height: 1px; background: var(--red);
}

/* Labels are the drawing's annotation lettering: small, wide-tracked caps. */
.label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--grey-text);
}
.label--red { color: var(--red-ink); }
.label--navy { color: var(--navy); }
.label--white { color: var(--white); }
.num {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* — skip link — */
.skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--black); color: var(--white);
	padding: 12px 18px; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* ══ masthead ═════════════════════════════════════════════════════════════ */
.masthead {
	position: sticky; top: 0; z-index: 40;
	background: var(--white);
	border-bottom: var(--hair) solid var(--black);
}
.masthead__inner {
	display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
	min-height: 76px;
}
.masthead__logo { flex: 0 0 auto; }
.masthead__logo img { width: 132px; }
.masthead__nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.masthead__nav > a,
.masthead__nav > .has-menu > button {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em;
	color: var(--black); text-decoration: none;
	padding: 10px 12px;
	border-bottom: 2px solid transparent;
}
.masthead__nav > a:hover,
.masthead__nav > .has-menu > button:hover { color: var(--red-ink); }
.masthead__nav > a[aria-current="page"],
.masthead__nav > .has-menu > button[aria-current="page"] {
	border-bottom-color: var(--red); color: var(--black);
}
.has-menu { position: relative; }
.has-menu > button .caret {
	width: 7px; height: 7px; border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
	transition: transform .2s var(--ease);
}
.has-menu[data-open="true"] > button .caret { transform: rotate(225deg) translateY(-2px); }
.submenu {
	position: absolute; top: calc(100% + 9px); left: 0; min-width: 264px;
	background: var(--white); border: var(--hair) solid var(--black);
	padding: 6px 0; display: none;
	box-shadow: 0 18px 40px -22px rgba(11, 13, 20, .35);
}
.has-menu[data-open="true"] .submenu { display: block; }
.submenu a {
	display: block; padding: 9px 18px; font-size: 14px;
	color: var(--black); text-decoration: none;
}
.submenu a:hover, .submenu a:focus-visible { background: var(--red-wash); color: var(--red-ink); }
.masthead__cta {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--red); color: var(--white) !important;
	font-size: 13.5px; font-weight: 600; text-decoration: none;
	padding: 12px 18px; margin-left: 8px;
	transition: background .18s var(--ease);
}
.masthead__cta:hover { background: var(--red-ink); }
.masthead__tel {
	font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none;
	letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
}
.masthead__tel:hover { color: var(--red-ink); }

/* mobile toggle */
.masthead__toggle {
	display: none; margin-left: auto;
	width: 44px; height: 44px; align-items: center; justify-content: center;
	border: var(--hair) solid var(--black);
}
.masthead__toggle span {
	display: block; width: 18px; height: 1.5px; background: var(--black); position: relative;
}
.masthead__toggle span::before, .masthead__toggle span::after {
	content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--black);
	transition: transform .2s var(--ease), top .2s var(--ease);
}
.masthead__toggle span::before { top: -5px; }
.masthead__toggle span::after { top: 5px; }
.masthead__toggle[aria-expanded="true"] span { background: transparent; }
.masthead__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.masthead__toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1000px) {
	.masthead__toggle { display: inline-flex; }
	.masthead__nav {
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--white); border-bottom: var(--hair) solid var(--black);
		flex-direction: column; align-items: stretch; gap: 0;
		padding: 8px var(--gutter) 20px; display: none;
		max-height: calc(100dvh - 76px); overflow-y: auto;
	}
	.masthead__nav[data-open="true"] { display: flex; }
	.masthead__nav > a, .masthead__nav > .has-menu > button {
		padding: 14px 0; border-bottom: var(--hair) solid var(--grey-rule-soft);
		font-size: 16px; width: 100%; justify-content: flex-start;
	}
	.submenu {
		position: static; border: 0; box-shadow: none; padding: 0 0 6px 12px;
		border-left: var(--hair) solid var(--grey-rule);
	}
	.submenu a { padding: 10px 14px; }
	.masthead__cta { margin: 14px 0 0; justify-content: center; }
	.masthead__tel { display: none; }
}

/* ══ hero: the sheet ══════════════════════════════════════════════════════ */
.sheet {
	position: relative;
	border-bottom: var(--hair) solid var(--black);
	background-color: var(--white);
	background-image:
		linear-gradient(to right, var(--grey-rule-soft) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grey-rule-soft) 1px, transparent 1px);
	background-size: 40px 40px;
	overflow: hidden;
}
.sheet__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: clamp(24px, 4vw, 64px);
	/* the side column's rule reaches the plan's top rule; the main column owns
	   the space above it, so the inner grid carries no bottom padding of its own */
	padding-block: clamp(30px, 3.6vw, 54px) 0;
}
.sheet__neatline {
	position: absolute; inset: clamp(14px, 2vw, 26px);
	border: var(--hair) solid var(--black);
	pointer-events: none;
}
.sheet__neatline::after {
	content: ""; position: absolute; inset: 5px;
	border: var(--hair) solid var(--grey-rule);
}
.sheet__tick {
	position: absolute; width: 9px; height: 9px;
	border: var(--hair) solid var(--black); background: var(--white);
}
.sheet__tick--tl { left: 10px; top: 10px; }
.sheet__tick--tr { right: 10px; top: 10px; }
.sheet__tick--bl { left: 10px; bottom: 10px; }
.sheet__tick--br { right: 10px; bottom: 10px; }
.sheet__main { position: relative; padding-bottom: clamp(30px, 3.4vw, 48px); }
.sheet__meta {
	display: flex; flex-wrap: wrap; gap: 8px 28px;
	margin-bottom: clamp(22px, 3vw, 38px);
	padding-bottom: 10px;
	border-bottom: var(--hair) solid var(--black);
}
.sheet__meta div { display: flex; gap: 7px; align-items: baseline; }
.sheet__meta dt { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--grey-text); }
.sheet__meta dd { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sheet h1 em { font-style: normal; color: var(--red); }
.sheet__lede { margin-top: clamp(16px, 1.8vw, 22px); }
.sheet__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 2.6vw, 30px); }

/* the plan: benchmark stations across the whole sheet, under both columns */
.plan {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	padding-bottom: clamp(34px, 4.4vw, 58px);
	border-top: var(--hair) solid var(--black);
}
.plan__station {
	position: relative;
	display: block;
	padding: 26px 22px 4px 0;
	border-right: var(--hair) dotted var(--grey-rule);
	text-decoration: none;
	color: var(--black);
}
.plan__station:last-child { border-right: 0; padding-right: 0; }
.plan__station::before {
	content: ""; position: absolute; top: -5px; left: 0;
	width: 9px; height: 9px; border: 1.5px solid var(--black); background: var(--white);
	transition: background .2s var(--ease), border-color .2s var(--ease);
}
.plan__station:hover::before { background: var(--red); border-color: var(--red); }
.plan__station:hover h3 { color: var(--red-ink); }
.plan__num {
	display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
	color: var(--grey-text); font-variant-numeric: tabular-nums;
}
.plan__station h3 {
	margin-top: 9px; max-width: 20ch; transition: color .18s var(--ease);
	/* every station's description starts on the same datum, as on a plan */
	min-height: 2.5em;
}
.plan__station p {
	margin-top: 7px; font-size: 12.5px; line-height: 1.45; color: var(--grey-text); max-width: 30ch;
}

/* side column: the legend and the title block */
.sheet__side {
	position: relative;
	display: flex; flex-direction: column; gap: 20px;
	border-left: var(--hair) solid var(--black);
	padding-left: clamp(18px, 2vw, 28px);
	/* the side column's rule runs down to the plan's top rule */
	margin-bottom: calc(-1 * clamp(30px, 3.4vw, 48px));
}
.legend { border-bottom: var(--hair) solid var(--grey-rule); padding-bottom: 12px; }
.legend__row {
	display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px;
	padding: 10px 0; border-top: 1px dotted var(--grey-rule);
	font-size: 13px; line-height: 1.4;
}
.legend__row:first-of-type { border-top: 0; }
.legend__row b { font-weight: 600; color: var(--red-ink); font-variant-numeric: tabular-nums; }

/* title block: the drawing's own contact panel */
.titleblock {
	border: var(--hair-strong) solid var(--black);
	background: var(--white);
	/* One grid for the whole block, so the key column is as wide as the
	   block's longest label rather than each row's own. Sized per row, the
	   rule between the columns steps in and out down the panel — the one
	   line a drawing may not have jagged. */
	display: grid; grid-template-columns: minmax(84px, max-content) minmax(0, 1fr);
}
.titleblock__head {
	grid-column: 1 / -1;
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	padding: 10px 14px; border-bottom: var(--hair) solid var(--black);
}
.titleblock__row {
	grid-column: 1 / -1;
	display: grid; grid-template-columns: minmax(84px, max-content) minmax(0, 1fr);
	border-bottom: var(--hair) solid var(--grey-rule);
}
/* Where subgrid exists the row takes the block's tracks, so every label
   starts and every rule sits at the same x. Elsewhere the row keeps its own
   grid above and the panel is merely ragged, never broken. */
@supports (grid-template-columns: subgrid) {
	.titleblock__row { grid-template-columns: subgrid; }
	/* A column that stacks two blocks shares one set of tracks, so the two
	   panels' rules land on the same x rather than 12px apart — the same
	   jagged line, one level up. */
	aside:has(> .titleblock ~ .titleblock) {
		display: grid; grid-template-columns: minmax(84px, max-content) minmax(0, 1fr);
	}
	aside:has(> .titleblock ~ .titleblock) > * { grid-column: 1 / -1; }
	aside:has(> .titleblock ~ .titleblock) > .titleblock {
		grid-template-columns: subgrid;
	}
}
/* 12px of padding on the key column is the whitespace that keeps the label
   off its rule. */
.titleblock__row:last-child { border-bottom: 0; }
.titleblock__k {
	font-size: 9.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
	color: var(--grey-text); padding: 12px 12px 12px 14px;
	border-right: var(--hair) solid var(--grey-rule);
	background: var(--grey-fill);
}
.titleblock__v {
	padding: 12px 16px; font-size: 12.5px; line-height: 1.5;
	overflow-wrap: anywhere;
}
.titleblock__v a { color: var(--red-ink); font-weight: 500; }
.titleblock__v b { font-variant-numeric: tabular-nums; }

/* Five stations need roughly 190px each; below that they drop to three, two, one. */
@media (max-width: 1100px) {
	.plan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.plan__station { padding: 22px 18px 22px 0; border-bottom: 1px dotted var(--grey-rule); }
	.plan__station:nth-child(3n) { border-right: 0; }
	.plan__station:nth-last-child(-n+2) { border-bottom: 0; }
	.plan__station h3, .plan__station p { max-width: none; }
}
@media (max-width: 960px) {
	.sheet__inner { grid-template-columns: 1fr; }
	.sheet__side { border-left: 0; border-top: var(--hair) solid var(--black); padding: 22px 0 0; }
}
@media (max-width: 720px) {
	.plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.plan__station { padding: 22px 16px 22px 0; border-bottom: 1px dotted var(--grey-rule); }
	.plan__station:nth-child(3n) { border-right: var(--hair) dotted var(--grey-rule); }
	.plan__station:nth-child(2n) { border-right: 0; }
	.plan__station:nth-last-child(-n+2) { border-bottom: 1px dotted var(--grey-rule); }
	.plan__station:last-child { border-bottom: 0; }
}
@media (max-width: 520px) {
	.plan { grid-template-columns: 1fr; }
	.plan__station { border-right: 0 !important; padding-right: 0; }
	.plan__station:not(:last-child) { border-bottom: 1px dotted var(--grey-rule); }
}

/* ══ buttons ══════════════════════════════════════════════════════════════ */
.btn {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 14px; font-weight: 600; letter-spacing: .01em;
	padding: 13px 20px; text-decoration: none;
	border: var(--hair) solid transparent;
	transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-ink); color: var(--white); }
.btn--ghost { border-color: var(--black); color: var(--black); }
.btn--ghost:hover { background: var(--black); color: var(--white); }
.btn--light { border-color: rgba(255,255,255,.6); color: var(--white); }
.btn--light:hover { background: var(--white); color: var(--navy-ink); border-color: var(--white); }
.btn--white { background: var(--white); color: var(--navy-ink); }
.btn--white:hover { background: var(--red); color: var(--white); }
.btn__arrow { transition: transform .2s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* text link with the sheet's leader rule */
.link-more {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13.5px; font-weight: 600; color: var(--red-ink); text-decoration: none;
	border-bottom: var(--hair) solid rgba(212, 0, 0, .35); padding-bottom: 2px;
}
.link-more:hover { border-bottom-color: var(--red); color: var(--red-ink); }
.link-more::after { content: "→"; transition: transform .2s var(--ease); }
.link-more:hover::after { transform: translateX(3px); }

/* ══ page header (interior pages) ═════════════════════════════════════════ */
.pagehead {
	position: relative;
	background-color: var(--white);
	background-image:
		linear-gradient(to right, var(--grey-rule-soft) 1px, transparent 1px),
		linear-gradient(to bottom, var(--grey-rule-soft) 1px, transparent 1px);
	background-size: 40px 40px;
	border-bottom: var(--hair) solid var(--black);
}
.pagehead__inner { position: relative; padding-block: clamp(30px, 4vw, 52px) clamp(34px, 4vw, 58px); }
.pagehead__crumbs {
	display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
	font-size: 11.5px; letter-spacing: .04em; color: var(--grey-text);
	margin-bottom: 20px;
}
.pagehead__crumbs a { color: var(--grey-text); text-decoration: none; }
.pagehead__crumbs a:hover { color: var(--red-ink); text-decoration: underline; }
.pagehead__crumbs span[aria-hidden] { color: var(--grey-rule); }
.pagehead h1 { max-width: 22ch; }
.pagehead .lede { margin-top: 18px; }

/* ══ section furniture ════════════════════════════════════════════════════ */
.section-head {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30ch);
	gap: 20px 48px; align-items: end;
	padding-bottom: 18px; margin-bottom: clamp(28px, 3.4vw, 46px);
	border-bottom: var(--hair) solid var(--black);
}
.section-head p { color: var(--grey-text); font-size: 15.5px; line-height: 1.5; }
@media (max-width: 800px) { .section-head { grid-template-columns: 1fr; } }

/* ruled list: the drawing's schedule table */
.schedule { border-top: var(--hair) solid var(--black); }
.schedule__row {
	display: grid;
	grid-template-columns: 64px minmax(0, 1.15fr) minmax(0, 1.6fr) 28px;
	gap: 20px; align-items: start;
	padding: 22px 0;
	border-bottom: var(--hair) solid var(--grey-rule);
	text-decoration: none; color: var(--black);
	transition: background .18s var(--ease);
}
.schedule__row:hover { background: var(--grey-fill); }
.schedule__row:hover .schedule__title { color: var(--red-ink); }
.schedule__code {
	font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--grey-text);
	font-variant-numeric: tabular-nums; padding-top: 4px;
}
.schedule__title { font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; transition: color .18s var(--ease); }
.schedule__desc { font-size: 14.5px; line-height: 1.5; color: var(--grey-text); }
.schedule__arrow { font-size: 18px; color: var(--red); align-self: center; transition: transform .2s var(--ease); }
.schedule__row:hover .schedule__arrow { transform: translateX(4px); }
@media (max-width: 760px) {
	.schedule__row { grid-template-columns: 1fr 24px; gap: 6px 12px; padding: 18px 0; }
	.schedule__code { grid-column: 1; }
	.schedule__title { grid-column: 1; }
	.schedule__desc { grid-column: 1; }
	.schedule__arrow { grid-column: 2; grid-row: 1 / span 3; }
}

/* card grid — used sparingly, never as the page's structure */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .grid-2 { grid-template-columns: 1fr; } }

/* the figure: a plate on the sheet */
.plate { position: relative; }
.plate img { width: 100%; border: var(--hair) solid var(--black); }
.plate figcaption {
	margin-top: 9px; font-size: 11.5px; line-height: 1.4; color: var(--grey-text);
	display: flex; gap: 8px;
}
.plate figcaption b { color: var(--black); font-weight: 600; letter-spacing: .06em; }

/* ══ delivery ladder ══════════════════════════════════════════════════════ */
.ladder {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: var(--hair-strong) solid var(--black);
	border-bottom: var(--hair) solid var(--black);
}
.ladder__step { padding: 26px 30px 28px 24px; border-right: var(--hair) solid var(--grey-rule); position: relative; }
.ladder__step:last-child { padding-left: 0; }
.ladder__step:last-child { border-right: 0; }
.ladder__step .n {
	display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--red-ink);
	font-variant-numeric: tabular-nums;
}
.ladder__step h3 { margin-top: 10px; }
.ladder__step p { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--grey-text); }
@media (max-width: 900px) {
	.ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ladder__step:nth-child(2n) { border-right: 0; }
	.ladder__step:nth-child(-n+2) { border-bottom: var(--hair) solid var(--grey-rule); }
}
@media (max-width: 520px) {
	.ladder { grid-template-columns: 1fr; }
	.ladder__step { border-right: 0; border-bottom: var(--hair) solid var(--grey-rule); padding-right: 0; }
	.ladder__step:last-child { border-bottom: 0; }
}

/* ══ partners ═════════════════════════════════════════════════════════════ */
/* Fifteen partners. `auto-fill` chose the column count from the width and
   broke them 7/7/1 at desktop — a full row, a full row, then one logo alone
   in the corner. The count is fixed to the divisor instead: 5 across makes
   three even rows, 3 across makes five, and the cell borders close the grid
   on every side because the last row is always complete. */
.partners {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0; border-top: var(--hair) solid var(--black); border-left: var(--hair) solid var(--grey-rule);
}
@media (max-width: 960px) { .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } .partner { padding: 18px 10px; min-height: 88px; } }
.partner {
	display: grid; place-items: center; padding: 26px 18px;
	border-right: var(--hair) solid var(--grey-rule); border-bottom: var(--hair) solid var(--grey-rule);
	background: var(--white); min-height: 108px;
	transition: background .18s var(--ease);
}
.partner:hover { background: var(--grey-fill); }
.partner img { max-height: 46px; max-width: 100%; width: auto; object-fit: contain; }

/* ══ client verticals ═════════════════════════════════════════════════════ */
/* Each sector is a ruled block: a station code and heading on the left, then
   the risk line that explains why the sector buys integration at all, then the
   story. The risk line is set apart because it is the argument — the prose
   beneath it is the evidence. No client names: sector and narrative only. */
.verticals { border-top: var(--hair-strong) solid var(--black); }
.vertical {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	gap: 0 clamp(20px, 3vw, 48px);
	padding: 30px 0 34px;
	border-bottom: var(--hair) solid var(--grey-rule);
}
.vertical__head {
	display: grid; grid-template-columns: 44px minmax(0, 1fr);
	gap: 14px; align-items: baseline; align-content: start;
}
.vertical__code {
	font-size: 10.5px; font-weight: 600; letter-spacing: .13em;
	color: var(--red-ink); font-variant-numeric: tabular-nums;
}
.vertical__head h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.vertical__risk {
	grid-column: 2; font-size: 15px; line-height: 1.5; font-weight: 500;
	color: var(--black); max-width: 52ch; margin-bottom: 14px;
}
.vertical > p:not(.vertical__risk) {
	grid-column: 2; font-size: 14.5px; line-height: 1.62;
	color: var(--grey-text); max-width: 68ch;
}
@media (max-width: 860px) {
	.vertical { grid-template-columns: 1fr; }
	.vertical__head { margin-bottom: 14px; }
	.vertical__risk, .vertical > p:not(.vertical__risk) { grid-column: 1; }
}

/* ══ project classifications ══════════════════════════════════════════════ */
.classes { border-top: var(--hair) solid var(--black); }
.classes__row {
	display: grid; grid-template-columns: 56px minmax(0, 1fr);
	gap: 20px; align-items: baseline;
	padding: 14px 0; border-bottom: var(--hair) solid var(--grey-rule);
}
.classes__code {
	font-size: 10.5px; font-weight: 600; letter-spacing: .13em;
	color: var(--red-ink); font-variant-numeric: tabular-nums;
}
.classes__name { font-size: 14px; line-height: 1.4; }

/* ══ quote / callout ══════════════════════════════════════════════════════ */
.statement {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(20px, 4vw, 64px);
	padding-block: clamp(30px, 4vw, 48px);
	border-top: var(--hair-strong) solid var(--black);
	border-bottom: var(--hair) solid var(--black);
}
.statement blockquote {
	font-size: clamp(19px, 2vw, 25px); line-height: 1.4; letter-spacing: -.012em;
	font-weight: 500; max-width: 40ch;
}
.statement blockquote em { font-style: normal; color: var(--red-ink); }
@media (max-width: 800px) { .statement { grid-template-columns: 1fr; } }

/* ══ contact strip ════════════════════════════════════════════════════════ */
.contact-strip { background: var(--navy-ink); color: var(--white); }
.contact-strip .wrap {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: center;
	padding-block: clamp(40px, 5vw, 64px);
}
.contact-strip h2 { color: var(--white); max-width: 18ch; }
.contact-strip p { color: rgba(255,255,255,.78); margin-top: 12px; max-width: 46ch; }
.contact-strip__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 820px) { .contact-strip .wrap { grid-template-columns: 1fr; } }

/* ══ footer ═══════════════════════════════════════════════════════════════ */
.footer { background: var(--black); color: rgba(255,255,255,.72); font-size: 13.5px; }
.footer .wrap { padding-block: clamp(40px, 5vw, 64px) 24px; }
.footer__grid {
	display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: 32px 40px;
	padding-bottom: 34px; border-bottom: var(--hair) solid rgba(255,255,255,.16);
}
.footer h4 { color: var(--white); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.footer ul li + li { margin-top: 8px; }
.footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.footer__brand img { width: 132px; margin-bottom: 16px; background: var(--white); padding: 6px 8px; }
.footer__brand p { max-width: 34ch; line-height: 1.55; }
.footer__base {
	display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between;
	padding-top: 20px; font-size: 12px; color: rgba(255,255,255,.52);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ══ misc utilities ═══════════════════════════════════════════════════════ */
.mt-0 { margin-top: 0; }
.mt-s { margin-top: 10px; }
.mt-m { margin-top: 22px; }
.mt-l { margin-top: clamp(28px, 3.4vw, 46px); }
.stack > * + * { margin-top: 16px; }
.measure { max-width: 68ch; }
.visually-hidden {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ══ motion: the sheet settles once ═══════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(10px); }
.reveal.reveal--in {
	opacity: 1; transform: none;
	transition: opacity .62s var(--ease), transform .62s var(--ease);
}
.reveal--in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; }
}