/* ==========================================================================
   About page — "the dossier" system.
   Used by patterns/about-*.php only. Every rule is scoped to .ab-doc, so
   nothing here can reach the homepage, a product page, the header or the
   footer. Loaded from functions.php only on a page whose content references
   an ngi/about-* pattern.
   ========================================================================== */

.ab-doc {
	--ab-navy: #0B3358;
	--ab-blue: #165AA2;
	--ab-crimson: #B23A2E;
	--ab-mist: #EEF4FA;
	--ab-charcoal: #1C2733;
	--ab-muted: #42556B;
	--ab-line: #D9E2EC;
	--ab-gutter: 80px;

	box-sizing: border-box;
	color: var(--ab-charcoal);
	font-family: 'Satoshi', sans-serif;
	font-size: 17px;
	line-height: 1.6;
	background-color: #FFFFFF;
}

.ab-doc *,
.ab-doc *::before,
.ab-doc *::after { box-sizing: border-box; }

@media ( max-width: 1080px ) {
	.ab-doc { --ab-gutter: 32px; }
}

@media ( max-width: 781px ) {
	.ab-doc { --ab-gutter: 20px; font-size: 16px; }
}

@media ( max-width: 480px ) {
	.ab-doc { --ab-gutter: 16px; }
}

/* --- Frame ------------------------------------------------------------- */

.ab-inner {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--ab-gutter);
}

/* The wrapper element carries both .ab-doc and .ab-sec, so these have to be
   compound selectors: a descendant selector would never match it. */
.ab-doc.ab-sec {
	padding-block: 72px;
}

@media ( max-width: 1080px ) {
	.ab-doc.ab-sec { padding-block: 64px; }
}

@media ( max-width: 781px ) {
	.ab-doc.ab-sec { padding-block: 48px; }
}

/* The sticky header is ~88px tall; anchor jumps need the clearance. */
.ab-doc[id] { scroll-margin-top: 112px; }

/* --- Type -------------------------------------------------------------- */

.ab-doc h1,
.ab-doc h2,
.ab-doc h3,
.ab-doc p,
.ab-doc ul,
.ab-doc ol,
.ab-doc dl,
.ab-doc dd,
.ab-doc figure { margin: 0; padding: 0; }

.ab-doc ul,
.ab-doc ol { list-style: none; }

.ab-h1 {
	font-weight: 700;
	font-size: 46px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ab-navy);
	text-wrap: balance;
}

.ab-h2 {
	font-weight: 700;
	font-size: 30px;
	line-height: 1.26;
	letter-spacing: -0.015em;
	color: var(--ab-navy);
	text-wrap: balance;
}

.ab-h3 {
	font-weight: 700;
	font-size: 19px;
	line-height: 1.4;
	color: var(--ab-navy);
}

.ab-body {
	font-size: 17px;
	line-height: 1.65;
	color: var(--ab-charcoal);
	max-width: 58ch;
}

.ab-body + .ab-body { margin-top: 16px; }

.ab-note {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ab-muted);
	max-width: 52ch;
}

.ab-label {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ab-muted);
}

@media ( max-width: 781px ) {
	.ab-h1 { font-size: 32px; }
	.ab-h2 { font-size: 25px; }
	.ab-h3 { font-size: 18px; }
	.ab-body { font-size: 16px; }
	.ab-note { font-size: 15px; }
}

/* --- The three-column document grid ------------------------------------ */

.ab-grid {
	display: grid;
	/* Copy 600 / note 368 at 1440 content width: the measure lands at 74-76
	   characters instead of 90+, and the note column stops wrapping its values
	   to three lines. */
	grid-template-columns: 200px minmax( 0, 1fr ) 368px;
	column-gap: 56px;
	align-items: start;
}

.ab-copy { grid-column: 2; }
.ab-side { grid-column: 3; }

/* Elements that need the full reading width, under both content columns. */
.ab-wide { grid-column: 2 / 4; }

@media ( max-width: 899px ) {
	/* Below the three-column grid there is only one column; spanning 2-4 here
	   would create implicit tracks and shatter the block. */
	.ab-wide { grid-column: 1; }
}

/* Between 900 and 1180 the note column drops under the copy column and
   keeps the copy's left edge, so the measure never gets squeezed. */
@media ( max-width: 1180px ) {
	.ab-grid { grid-template-columns: 168px minmax( 0, 1fr ); column-gap: 40px; }
	.ab-side { grid-column: 2; }
}

@media ( max-width: 899px ) {
	.ab-grid { grid-template-columns: minmax( 0, 1fr ); row-gap: 28px; }
	.ab-copy,
	.ab-side { grid-column: 1; }
}

/* --- The rail: hanging numeral, rule, section name --------------------- */

.ab-rail { grid-column: 1; }

.ab-num {
	display: block;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	font-size: 30px;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--ab-navy);
	font-variant-numeric: tabular-nums;
}

.ab-rail-rule {
	display: block;
	width: 28px;
	height: 1px;
	margin-top: 12px;
	background-color: var(--ab-line);
}

.ab-rail-name { margin-top: 12px; }

@media ( max-width: 899px ) {
	.ab-rail {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: 14px;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--ab-line);
	}

	.ab-num { font-size: 20px; }

	.ab-rail-rule { display: none; }

	.ab-rail-name { margin-top: 0; }

	/* The photograph drops to its own full-width row under the marker, so the
	   numeral and label keep a line to themselves and the image stops sitting
	   right-aligned with a dead gutter beside it. */
	.ab-photo {
		flex: 1 0 100%;
		max-width: none;
		margin-top: 16px;
	}
}

/* --- The photo: a portrait crop in the rail, never a rounded card ------- */

.ab-photo { margin-top: 28px; }

.ab-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: 50% 42%;
}

.ab-photo figcaption {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ab-muted);
}

@media ( max-width: 899px ) {
	.ab-photo { margin-top: 16px; }
}

/* --- Ledger: hairline rows of label and value -------------------------- */

/* A ruled block in the note column, for sections whose aside is prose
   rather than a key-value ledger. Keeps the rail/note edge consistent. */
.ab-aside {
	border-top: 1px solid var(--ab-line);
	padding-top: 14px;
}

.ab-aside .ab-h3 { margin-top: 10px; }
.ab-aside .ab-note { margin-top: 8px; }

.ab-ledger { border-top: 1px solid var(--ab-line); }

.ab-ledger-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	padding: 14px 0;
	border-bottom: 1px solid var(--ab-line);
}

.ab-ledger dt {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ab-muted);
}

.ab-ledger dd {
	font-size: 15px;
	line-height: 1.5;
	color: var(--ab-navy);
	font-weight: 500;
}

@media ( min-width: 900px ) {
	.ab-ledger-row {
		grid-template-columns: 108px minmax( 0, 1fr );
		column-gap: 16px;
		align-items: baseline;
	}
}

/* The wide variant: the first column holds a name rather than a caption. */
@media ( min-width: 900px ) {
	.ab-ledger-row--wide {
		grid-template-columns: 216px minmax( 0, 1fr );
		column-gap: 24px;
	}
}

.ab-ledger-row--wide dd { font-weight: 400; color: var(--ab-charcoal); }

/* --- Ledger with a value column: the instrument and figure tables ------ */

.ab-table { margin-top: 40px; border-top: 1px solid var(--ab-line); }

.ab-table-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	gap: 4px 20px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--ab-line);
}

.ab-table-key {
	font-size: 15px;
	line-height: 1.45;
	font-weight: 500;
	color: var(--ab-navy);
}

.ab-table-val {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ab-muted);
	text-align: right;
}

@media ( max-width: 600px ) {
	.ab-table-row { grid-template-columns: minmax( 0, 1fr ); }
	.ab-table-val { text-align: left; }
}

/* --- The CE-IVD callout: a rule, not a card ---------------------------- */

.ab-claim {
	margin-top: 32px;
	padding-left: 20px;
	border-left: 3px solid var(--ab-crimson);
}

.ab-claim-title {
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
	color: var(--ab-navy);
	max-width: 46ch;
}

.ab-claim-note {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ab-muted);
	max-width: 52ch;
}

/* --- The masthead: a cover sheet, opened in Plate Mist ----------------- */

.ab-doc.ab-masthead {
	background-color: var(--ab-mist);
	--ab-line: rgba( 11, 51, 88, 0.16 );
	padding-block: 72px;
}

@media ( max-width: 1080px ) {
	.ab-doc.ab-masthead { padding-block: 64px; }
}

@media ( max-width: 781px ) {
	.ab-doc.ab-masthead { padding-block: 48px; }
}

.ab-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ab-navy);
}

.ab-meta .ab-label { color: var(--ab-navy); }

.ab-masthead-grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 368px;
	column-gap: 56px;
	row-gap: 40px;
	align-items: start;
	margin-top: 36px;
}

/* The masthead lead needs its own level: at body size there was no lead. */
.ab-masthead-lead .ab-body { margin-top: 20px; font-size: 19px; line-height: 1.55; max-width: 600px; }

.ab-toc { border-top: 1px solid var(--ab-line); }

.ab-toc-link {
	display: flex;
	align-items: baseline;
	gap: 16px;
	min-height: 44px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ab-line);
	color: var(--ab-navy);
	text-decoration: none;
}

.ab-toc-n {
	flex: none;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.12em;
	color: var(--ab-muted);
}

.ab-toc-name {
	font-size: 16px;
	line-height: 1.4;
	font-weight: 500;
}

.ab-toc-link:focus-visible { outline: 2px solid var(--ab-blue); outline-offset: 3px; }

@media ( max-width: 899px ) {
	.ab-masthead-grid { grid-template-columns: minmax( 0, 1fr ); row-gap: 32px; }
}

@media ( prefers-reduced-motion: no-preference ) {
	.ab-toc-link { transition: color 0.18s ease; }
	.ab-toc-link:hover { color: var(--ab-crimson); }
	.ab-toc-link:hover .ab-toc-n { color: var(--ab-crimson); }
}

/* --- The contact row: address-style facts, nothing floating ------------- */

.ab-contact {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	column-gap: 32px;
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--ab-line);
}

.ab-contact-item { padding-left: 20px; border-left: 1px solid var(--ab-line); }

.ab-contact-item:first-child { padding-left: 0; border-left: 0; }

/* One-line and two-line caps labels must not push their links out of line. */
.ab-contact-item .ab-label { min-height: 32px; }

.ab-contact-item .ab-link { margin-top: 6px; }

.ab-contact-item .ab-note { margin-top: 2px; font-size: 14px; }

@media ( max-width: 1080px ) {
	.ab-contact { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); row-gap: 28px; }
	.ab-contact-item:nth-child( 3 ) { padding-left: 0; border-left: 0; }
}

@media ( max-width: 600px ) {
	.ab-contact { grid-template-columns: minmax( 0, 1fr ); }
	.ab-contact-item { padding-left: 0; border-left: 0; }
}

/* --- Links ------------------------------------------------------------- */

.ab-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--ab-navy);
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
	border-bottom: 1px solid var(--ab-line);
}

.ab-link:focus-visible { outline: 2px solid var(--ab-blue); outline-offset: 3px; }

@media ( prefers-reduced-motion: no-preference ) {
	.ab-link { transition: color 0.18s ease, border-color 0.18s ease; }
	.ab-link:hover { color: var(--ab-crimson); border-color: var(--ab-crimson); }
}

/* --- Section 02: the page's one dark spread ---------------------------- */

.ab-doc.ab-dark {
	background-color: var(--ab-navy);
	--ab-line: rgba( 255, 255, 255, 0.22 );
	color: #FFFFFF;
}

.ab-dark .ab-h2,
.ab-dark .ab-h3,
.ab-dark .ab-num,
.ab-dark .ab-table-key,
.ab-dark .ab-claim-title,
.ab-dark .ab-ledger dd { color: #FFFFFF; }

.ab-dark .ab-body,
.ab-dark .ab-note,
.ab-dark .ab-table-val,
.ab-dark .ab-ledger dt,
.ab-dark .ab-claim-note { color: #C9DAEA; }

.ab-dark .ab-label,
.ab-dark .ab-rail-name { color: #AFC4DA; }

.ab-dark .ab-claim { border-left-color: var(--ab-crimson); }

/* --- Section 01 seal: the commitment, in the note column --------------- */

.ab-tagline {
	font-weight: 700;
	font-size: 30px;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--ab-navy);
	text-wrap: balance;
}

/* `.ab-doc p { margin: 0 }` is (0,1,1), so bare-class margins lose here. */
.ab-aside .ab-tagline { margin-top: 12px; }

@media ( max-width: 781px ) {
	.ab-tagline { font-size: 25px; }
}

/* --- Section 02: the three-item band ----------------------------------- */

.ab-copy .ab-h2 + .ab-body { margin-top: 20px; }

.ab-doc .ab-trio {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	/* Starts at the copy column, not the page gutter, so it lines up with
	   the heading above it instead of hanging 256px to the left. */
	grid-column: 2 / -1;
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--ab-line);
}

.ab-trio-item { padding-inline: 40px; }
.ab-trio-item:first-child { padding-inline: 0 40px; }
.ab-trio-item:last-child { padding-inline: 40px 0; }
.ab-trio-item + .ab-trio-item { border-left: 1px solid var(--ab-line); }

.ab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ab-navy);
	border-radius: 50%;
	color: var(--ab-crimson);
}

.ab-badge svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ab-trio .ab-trio-title { margin-top: 20px; }
.ab-trio .ab-trio-body { margin-top: 8px; max-width: 44ch; }

/* The instrument register sits in the 368px note column, so its key column
   is narrower than the wide ledger default. */
@media ( min-width: 900px ) {
	.ab-side .ab-ledger-row--wide { grid-template-columns: 190px minmax( 0, 1fr ); }
}

.ab-side .ab-register-label { margin-top: 32px; }

@media ( max-width: 781px ) {
	.ab-doc .ab-trio {
		grid-template-columns: minmax( 0, 1fr );
		margin-top: 40px;
	}

	.ab-trio-item,
	.ab-trio-item:first-child,
	.ab-trio-item:last-child { padding-inline: 0; }

	.ab-trio-item + .ab-trio-item {
		margin-top: 24px;
		padding-top: 24px;
		border-left: 0;
		border-top: 1px solid var(--ab-line);
	}
}

.ab-dark .ab-rail-rule { height: 2px; background-color: #FFFFFF; }

/* --- Section 03: vision and mission ----------------------------------- */

.ab-purpose { margin-top: 32px; }

.ab-purpose-block {
	padding: 24px 0;
	border-top: 1px solid var(--ab-line);
}

.ab-purpose-block .ab-purpose-statement {
	margin-top: 10px;
	max-width: 58ch;
	font-size: 17px;
	line-height: 1.6;
	color: var(--ab-charcoal);
}

.ab-purpose-block .ab-purpose-statement--vision {
	font-size: 19px;
	font-weight: 500;
	color: var(--ab-navy);
}

/* The plate: the page's one rounded object, a static read-out. */
.ab-plate {
	aspect-ratio: 1 / 1;
	min-height: 320px;
	/* Without an explicit width, aspect-ratio derives the width from the
	   min-height, so the plate outgrew its column and pushed the page 26px
	   past the viewport at 390. */
	width: 100%;
	padding: 32px 32px 0;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background-color: var(--ab-navy);
	border-radius: 12px;
}

.ab-plate .hp-track { width: 100%; height: 200px; gap: 5px; }
.ab-plate .hp-bar { background-color: rgba( 255, 255, 255, 0.28 ); }
.ab-plate .hp-bar.is-lit { background-color: rgba( 255, 255, 255, 0.55 ); }
.ab-plate .hp-bar.is-signal { background-color: #C9DAEA; }

@media ( max-width: 781px ) {
	.ab-plate {
		aspect-ratio: 2 / 1;
		min-height: 200px;
		padding: 24px 24px 0;
		margin-top: 24px;
	}

	.ab-plate .hp-track { height: 120px; }
}

/* --- Section 04: the journey ------------------------------------------ */

/* --- Section 04: the journey ------------------------------------------ */

/* One spine: a single hairline rail, the year the only thing set on it, and
   the milestones hanging off it. No axis, no plot, no numbered ticks. */
.ab-spine {
	grid-column: 1 / -1;
	margin: 48px 0 0;
	padding: 0 0 0 1px;
	list-style: none;
	border-left: 1px solid var(--ab-line);
	max-width: 74ch;
}

.ab-spine-year {
	position: relative;
	margin: 0;
	padding: 40px 0 14px 32px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.16em;
	color: #AFC4DA;
}

.ab-spine-year:first-child { padding-top: 0; }

.ab-spine-entry {
	position: relative;
	margin: 0;
	padding: 0 0 30px 32px;
}

/* The dot punches a hole in the rail rather than thickening it. */
.ab-spine-entry::before {
	content: "";
	position: absolute;
	left: -4px;
	top: 9px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--ab-navy);
	border: 1px solid #AFC4DA;
}

.ab-spine-entry:last-child { padding-bottom: 0; }

.ab-spine-date {
	margin: 0;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #AFC4DA;
}

.ab-spine-title {
	margin: 6px 0 0;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	color: #FFFFFF;
}

.ab-spine-body {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: #C9DAEA;
	max-width: 56ch;
}

@media ( max-width: 899px ) {
	.ab-spine { margin-top: 32px; }

	.ab-spine-year { padding: 32px 0 12px 24px; }

	.ab-spine-entry { padding: 0 0 26px 24px; }

	.ab-spine-title { font-size: 18px; }
}

/* --- Journey spine motion ---------------------------------------------- */

/* The rail carries a fill that grows to the deepest entry read so far. The
   hidden states are scoped to .ab-spine--live, which only exists once the
   script has run, so a failed script leaves the section fully readable. */
.ab-spine { position: relative; }

@media ( prefers-reduced-motion: no-preference ) {
	.ab-spine::after {
		content: "";
		position: absolute;
		left: -1px;
		top: 0;
		width: 1px;
		height: 100%;
		background-color: rgba( 255, 255, 255, 0.7 );
		transform-origin: top center;
		transform: scaleY( var( --ab-p, 0 ) );
		transition: transform 0.6s cubic-bezier( 0.2, 0.7, 0.2, 1 );
	}

	.ab-spine--live .ab-spine-entry,
	.ab-spine--live .ab-spine-year {
		opacity: 0;
		transform: translateY( 14px );
		transition:
			opacity 0.5s cubic-bezier( 0.2, 0.7, 0.2, 1 ),
			transform 0.5s cubic-bezier( 0.2, 0.7, 0.2, 1 );
	}

	.ab-spine--live .ab-spine-entry.is-in,
	.ab-spine--live .ab-spine-year.is-in {
		opacity: 1;
		transform: none;
	}

	.ab-spine--live .ab-spine-entry::before {
		opacity: 0;
		transform: scale( 0.3 );
		transition: opacity 0.4s ease, transform 0.4s ease;
	}

	.ab-spine--live .ab-spine-entry.is-in::before {
		opacity: 1;
		transform: none;
	}
}