/*
 * NEG Management — inner pages.
 *
 * Page hero, breadcrumbs, service detail layout (content + side nav), offering
 * grid, detail band, services overview grid, about layout, contact layout +
 * form, inner-page CTA band, 404. Translated from the approved inner-page
 * reference (reference-site/assets/site.css) into the theme vocabulary — dead
 * Design 1 rules omitted. Loaded on every view except the front page.
 */

/* ============================ PAGE HERO ============================ */
.page-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(8rem, 12vw, 11rem) 0 clamp(3.5rem, 7vw, 6rem);
	background: var(--neg-navy);
	color: #fff;
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
	background-size: 64px 64px;
}

.page-hero__ghost {
	position: absolute;
	right: -0.15em;
	bottom: -0.28em;
	margin: 0;
	color: rgba(255, 255, 255, 0.05);
	font-family: var(--neg-font-display);
	font-weight: 800;
	font-size: clamp(6rem, 16vw, 12rem);
	line-height: 1;
	letter-spacing: -0.06em;
	text-transform: uppercase;
	pointer-events: none;
	user-select: none;
}

.page-hero__inner {
	position: relative;
	z-index: 1;
}

.page-hero--blue { background: var(--neg-blue); }
.page-hero--teal { background: #087f7a; }
/* Brand coral fails WCAG AA behind this hero's white title/eyebrow/standfirst
   text (axe: 2.76:1 throughout) — unlike blue/teal, which already pass. */
.page-hero--coral { background: var(--neg-coral-panel); }

.page-hero__eyebrow {
	margin: 0 0 1rem;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--neg-font-display);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.page-hero__title {
	max-width: 20ch;
	margin: 0 0 1.25rem;
	color: #fff;
	font-size: clamp(2.6rem, 5.5vw, 4.75rem);
	line-height: 1.02;
	letter-spacing: -0.04em;
}

.page-hero__standfirst {
	max-width: 62ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 1.0625rem;
}

/* ============================ BREADCRUMBS ============================ */
.breadcrumbs {
	margin-bottom: 2.25rem;
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--neg-font-display);
	font-weight: 600;
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.breadcrumbs__list a {
	color: inherit;
	text-decoration: none;
}

.breadcrumbs__list a:hover {
	color: #fff;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "/";
	margin: 0 0.6rem;
	color: var(--neg-coral);
}

/* On coloured page heroes (coral/teal/blue) keep contrast */
.page-hero--coral .breadcrumbs__list,
.page-hero--teal .breadcrumbs__list,
.page-hero--blue .breadcrumbs__list {
	color: rgba(255, 255, 255, 0.7);
}

/* The "/" separator is brand coral, which nearly disappears against these
   three hero tones (manual check: 1.0-2.54:1 — literally invisible on the
   coral hero, since it's the exact same colour as that hero's background).
   A translucent white (as used for the breadcrumb links above) isn't dark/
   light enough here either at any reasonable opacity, so this uses solid
   white, verified against all three tones (4.85-7.02:1). */
.page-hero--coral .breadcrumbs__item + .breadcrumbs__item::before,
.page-hero--teal .breadcrumbs__item + .breadcrumbs__item::before,
.page-hero--blue .breadcrumbs__item + .breadcrumbs__item::before {
	color: #fff;
}

/* ======================= INNER SECTION SHELL ======================= */
.inner-section {
	padding-block: var(--neg-section-y);
	background: #fff;
}

.inner-section--ice {
	background: var(--neg-ice);
}

.inner-section__head {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: clamp(1.5rem, 4vw, 4rem);
	margin-bottom: clamp(2rem, 5vw, 3.75rem);
}

.inner-section__head h2 {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3.25rem);
	line-height: 1.06;
}

.inner-section__lead {
	max-width: 52ch;
	color: var(--neg-muted);
	font-size: 1.0625rem;
}

/* ===================== SERVICE DETAIL LAYOUT ===================== */
.service-layout {
	display: grid;
	grid-template-columns: 290px 1fr;
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: start;
}

.service-nav {
	position: sticky;
	top: 120px;
	align-self: start;
}

/* Desktop: the disclosure is always shown open, no summary marker. */
.service-nav > .service-nav__summary {
	display: none;
}

.service-nav > .service-nav__panel {
	display: block;
	border-top: 1px solid var(--neg-line);
}

.service-nav__label {
	display: block;
	padding: 1rem 0;
	border-bottom: 1px solid var(--neg-line);
	color: var(--neg-coral-text); /* brand coral fails WCAG AA as text on white (axe: 2.76:1) */
	font-family: var(--neg-font-display);
	font-weight: 700;
	font-size: 0.5625rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.service-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-nav__list a {
	display: block;
	padding: 0.95rem 0 0.95rem 0.85rem;
	border-bottom: 1px solid var(--neg-line);
	border-left: 2px solid transparent;
	margin-left: -0.85rem;
	color: var(--neg-muted);
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.service-nav__list a:hover,
.service-nav__list a:focus-visible {
	color: var(--neg-ink);
}

.service-nav__list [aria-current="page"] {
	color: var(--neg-navy);
	font-family: var(--neg-font-display);
	font-weight: 700;
	border-left-color: var(--neg-coral);
}

.service-main__intro {
	margin: 0 0 1.5rem;
	font-size: clamp(1.9rem, 3.8vw, 3rem);
	line-height: 1.08;
}

/* Prominent callout between the intro line and the detailed body copy.
   Reuses the detail-band visual recipe (ice background, generous padding)
   so it fits the existing Design 2 system rather than introducing a new
   treatment. */
.service-callout {
	margin: 0 0 2.5rem;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--neg-ice);
	border-left: 3px solid var(--neg-coral);
}

.service-callout__heading {
	margin: 0 0 0.75rem;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.15;
}

.service-callout__text {
	margin: 0;
	max-width: 68ch;
	color: var(--neg-muted);
	font-size: 1.0625rem;
}

.service-body > :first-child {
	margin-top: 0;
}

.service-body h2 {
	margin: 2.5rem 0 1rem;
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	line-height: 1.1;
}

.service-body h3 {
	margin: 2rem 0 0.6rem;
	font-size: 1.35rem;
}

.service-body p,
.service-body li {
	max-width: 68ch;
	color: var(--neg-muted);
}

.service-body p {
	font-size: 1.0625rem;
}

.service-body > p:first-of-type {
	color: var(--neg-ink);
}

/* ======================= OFFERING GRID ======================= */
.offering-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin-top: 3rem;
	border-top: 1px solid var(--neg-line);
	border-left: 1px solid var(--neg-line);
}

.offering {
	min-height: 190px;
	padding: 1.75rem;
	background: #fff;
	border-right: 1px solid var(--neg-line);
	border-bottom: 1px solid var(--neg-line);
}

/* When an odd number of cards remain (e.g. after removing one), the last
   card spans the full row instead of leaving an empty cell beside it. */
.offering:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.offering::before {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	background: var(--neg-coral);
}

.offering__title {
	margin: 1.5rem 0 0.5rem;
	font-size: 1.25rem;
	line-height: 1.2;
}

.offering__text {
	margin: 0;
	color: var(--neg-muted);
	font-size: 0.875rem;
	max-width: none;
}

/* =================== TITLED CAPABILITY GROUPS =================== */
/* Several headed offering grids on one page (Engineering: Civil /
   Environmental). Same rule-above treatment as .service-feature so each
   group reads as its own section; the grid inside is the standard
   .offering-grid, pulled up closer to its heading. */
.service-group {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--neg-line);
}

.service-group__heading {
	margin: 0;
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	line-height: 1.12;
}

.service-group .offering-grid {
	margin-top: 1.75rem;
}

/* ======================= DETAIL BAND ======================= */
.detail-band {
	margin-top: 3.5rem;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--neg-ice);
}

.detail-band h3 {
	margin: 0 0 0.75rem;
	font-size: 1.6rem;
}

.detail-band p {
	margin: 0;
	max-width: 68ch;
	color: var(--neg-muted);
}

/* =================== SERVICE FEATURE BLOCKS =================== */
/* Deeper-dive content beneath the capability grid — a repeatable rule +
   heading + paragraph, deliberately plain (no background/border treatment)
   so a run of two or three reads as distinct sections without competing
   with the EVM band or the capability grid above. */
.service-feature {
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--neg-line);
}

.service-feature h3 {
	margin: 0 0 1rem;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.15;
}

.service-feature p {
	margin: 0;
	max-width: 68ch;
	color: var(--neg-muted);
	font-size: 1.0625rem;
}

/* ======================= EVM SECTION ======================= */
/* Substantial two-column corporate band (Project Controls only): body copy
   left, a plain capability list right — restrained, no card chrome, no
   invented metrics. */
.service-evm {
	margin-top: 3.5rem;
	padding: clamp(2.25rem, 5vw, 3.5rem);
	background: var(--neg-ice);
}

.service-evm__eyebrow {
	margin: 0 0 1.25rem;
}

.service-evm__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}

.service-evm__body h3 {
	margin: 0 0 1rem;
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	line-height: 1.15;
}

.service-evm__body p {
	margin: 0 0 1rem;
	max-width: 60ch;
	color: var(--neg-muted);
	font-size: 1.0625rem;
}

.service-evm__body p:last-child {
	margin-bottom: 0;
}

.service-evm__capabilities {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.service-evm__capabilities li {
	padding: 0.85rem 0 0.85rem 1.1rem;
	border-left: 2px solid var(--neg-coral);
	background: #fff;
	font-family: var(--neg-font-display);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--neg-navy);
}

.service-evm__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--neg-line);
}

.service-evm__term {
	font-family: var(--neg-font-display);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--neg-muted);
}

/* The typed-section system (.service-section / .service-outputs /
   .service-process) that lived here was removed 2026-09-24: Risk
   Management moved to its own dedicated template
   (single-service-risk-management.php, .risk-* classes below) and no
   other service uses template-parts/components/service-section.php, so
   this CSS had no live consumer left. The PHP component itself is kept —
   see its docblock — in case another service adopts the 'sections' data
   shape later; re-add matching CSS at that point. */

/* ==================== RISK MANAGEMENT — DEDICATED TEMPLATE ==================== */
/* single-service-risk-management.php only. The "narrow page" problem was
   the 290px sidebar plus a page-specific 720px .service-main cap (both
   removed above) — not sidebars or containers in general. 2026-09-25:
   the horizontal service-link row that briefly replaced the sidebar
   (.risk-subnav) is gone — Risk now reuses the exact same
   template-parts/components/service-nav.php sidebar every other service
   page uses, just inside a wider shell than .service-layout's 1200px so
   the content column stays materially wider than the old 720px cap. */

/* Wider outer container — same gutter token as .neg-container, just a
   bigger cap, so the 240px sidebar + gap leaves ~1050-1100px for content
   instead of squeezing it down inside the standard 1200px width. */
.risk-shell__container {
	max-width: 1400px;
}

.risk-service-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: clamp(3rem, 5vw, 5rem);
	align-items: start;
}

/* template-parts/components/service-nav.php needs no Risk-specific CSS —
   .service-nav (sticky, active-state, mobile <details> collapse) already
   works inside any grid column; see pages.css line ~168 for its rules. */

.risk-main {
	min-width: 0;
}

.risk-section {
	padding-block: clamp(3rem, 6vw, 5rem);
	padding-inline: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--neg-line);
}

.risk-section--white {
	background: #fff;
}

.risk-section--paper {
	background: var(--neg-paper);
}

.risk-section h3 {
	margin: 0 0 1.25rem;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.12;
}

/* 2026-09-27 client section-removal pass: the intro/QRA panel, feature
   bands (QSRA/QCRA/Modelling), 4-stage process, output/area tile grids,
   closing notes and integrated-insight band were removed from the Risk
   template, so their .risk-intro / .risk-qra-panel / .risk-feature /
   .risk-process / .risk-outputs / .risk-section__note / .risk-band /
   ice + navy section-variant rules were deleted with them. */

/* ---------- Risk Analytics (55/45) ---------- */
.risk-what__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: start;
}

.risk-what__body p {
	margin: 0 0 1rem;
	max-width: 62ch;
	color: var(--neg-muted);
	font-size: 1.0625rem;
}

.risk-what__body p:last-child {
	margin-bottom: 0;
}

/* Plain unnumbered capability list (Risk Analytics). */
.risk-capability-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem 1.5rem;
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: #fff;
	list-style: none;
}

.risk-capability-list li {
	position: relative;
	padding-left: 1.4rem;
	color: var(--neg-ink);
	font-family: var(--neg-font-display);
	font-weight: 600;
	font-size: 0.9375rem;
}

.risk-capability-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 14px;
	height: 2px;
	background: var(--neg-coral);
}

/* ---------- Section intro paragraph (Our Risk Services) ---------- */
.risk-section__intro {
	margin: 0.75rem 0 0;
	max-width: 68ch;
	color: var(--neg-muted);
	font-size: 1.0625rem;
}

/* ---------- Our Risk Services overview (10-item definition list) ---------- */
/* Deliberately NOT a boxed card grid — plain title+description pairs
   separated by a thin rule, so it reads as an editorial overview. */
.risk-services-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	margin-top: 2.5rem;
	border-top: 1px solid var(--neg-line);
	border-left: 1px solid var(--neg-line);
}

.risk-services-list__item {
	padding: 1.5rem 1.75rem;
	border-right: 1px solid var(--neg-line);
	border-bottom: 1px solid var(--neg-line);
}

.risk-services-list__item h4 {
	margin: 0 0 0.4rem;
	font-size: 1.0625rem;
	line-height: 1.25;
}

.risk-services-list__item p {
	margin: 0;
	color: var(--neg-muted);
	font-size: 0.9375rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
	.risk-what__grid {
		grid-template-columns: 1fr;
	}
}

/* Sidebar collapses to the mobile <details> disclosure at the same
   breakpoint template-parts/components/service-nav.php's CSS uses for
   every other service page (see .service-layout above). */
@media (max-width: 768px) {
	.risk-service-layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.risk-capability-list,
	.risk-services-list {
		grid-template-columns: 1fr;
	}
}

/* ============ PREVIOUS / NEXT SERVICE NAVIGATION ============ */
.service-prevnext {
	padding-block: clamp(2rem, 5vw, 3.25rem);
	background: var(--neg-ice);
	border-top: 1px solid var(--neg-line);
}

.service-prevnext__row {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
}

.service-prevnext__link {
	display: grid;
	gap: 0.4rem;
	text-decoration: none;
	color: var(--neg-ink);
}

.service-prevnext__link--next {
	margin-left: auto;
	text-align: right;
}

.service-prevnext__dir {
	/* Brand coral (--neg-coral) fails WCAG AA as small text on this light
	   background (axe: 2.57:1). Darkened only for this text usage — the
	   shared --neg-coral background/accent colour used everywhere else is
	   untouched. */
	color: #b24c44;
	font-family: var(--neg-font-display);
	font-weight: 700;
	font-size: 0.5625rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.service-prevnext__name {
	font-family: var(--neg-font-display);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.2;
}

.service-prevnext__link:hover .service-prevnext__name,
.service-prevnext__link:focus-visible .service-prevnext__name {
	color: var(--neg-blue);
}

/* ==================== SERVICES OVERVIEW GRID ==================== */
.overview-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--neg-line);
	border: 1px solid var(--neg-line);
}

.overview-card {
	display: flex;
	flex-direction: column;
	min-height: 320px;
	padding: clamp(1.75rem, 4vw, 2.6rem);
	background: var(--neg-paper);
	text-decoration: none;
	color: var(--neg-ink);
	transition: background 0.2s ease;
}

.overview-card:hover {
	background: var(--neg-ice);
}

.overview-card__title {
	margin: clamp(2.5rem, 6vw, 4.5rem) 0 0.75rem;
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	line-height: 1.1;
}

.overview-card__text {
	margin: 0;
	color: var(--neg-muted);
}

.overview-card__more {
	margin-top: auto;
	padding-top: 1.5rem;
	color: var(--neg-blue);
	font-family: var(--neg-font-display);
	font-weight: 700;
	font-size: 0.75rem;
}

.overview-card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* ============ ORGANIZATION EXPERIENCE GRID (logo wall) ============ */
/* Responsive logo grid. Each cell holds either a locally stored, verified
   official logo in its own white display area (object-fit: contain, capped
   size so none dominates) with the organization name below it, or a clean
   text-only fallback carrying just the name. Consistent cell height across
   both. Desktop 4-up, tablet 3-up, mobile 2-up, very small screens 1-up. */
.org-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--neg-line);
	border: 1px solid var(--neg-line);
	list-style: none;
	margin: 0;
	padding: 0;
}

.org-grid__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	min-height: 176px;
	padding: 1.75rem 1.5rem;
	background: var(--neg-paper);
	text-align: center;
}

/* Consistent white logo-display area. Opaque source assets (a white-background
   JPEG/PNG as published by the organization) blend straight into this white,
   instead of showing a mismatched box against the off-white paper card. */
.org-grid__logo-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 168px;
	height: 80px;
	background: #fff;
	border: 1px solid var(--neg-line);
	border-radius: var(--neg-radius);
}

.org-grid__logo {
	display: block;
	width: auto;
	max-width: 132px;
	height: auto;
	max-height: 54px;
	object-fit: contain;
}

.org-grid__name {
	font-family: var(--neg-font-display);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--neg-ink);
}

/* Trailing fillers complete the desktop 4-up row; irrelevant once the grid
   narrows, so they are removed at tablet width and below. */
.org-grid__item--filler {
	min-height: 0;
}

@media (max-width: 1024px) {
	.org-grid__item--filler {
		display: none;
	}
}

/* ========================= PARTNER CARD ========================= */
.partner-card {
	padding: clamp(2rem, 5vw, 3.5rem);
	background: var(--neg-paper);
	border-left: 3px solid var(--neg-teal);
}

.partner-card__name {
	margin: 0 0 0.75rem;
	font-family: var(--neg-font-display);
	font-weight: 800;
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	color: var(--neg-navy);
}

.partner-card__text {
	margin: 0;
	max-width: 60ch;
	color: var(--neg-muted);
	font-size: 1.0625rem;
}

/* ============== EDITABLE BLOCK CONTENT (the_content) ============== */
.entry-content > * {
	max-width: 68ch;
}

.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > .wp-block-columns,
.entry-content > .wp-block-group {
	max-width: none;
}

.entry-content > * + * {
	margin-top: 1.25rem;
}

.entry-content h2 {
	margin-top: 3rem;
	font-size: clamp(1.8rem, 3.4vw, 2.75rem);
	line-height: 1.1;
}

.entry-content h3 {
	margin-top: 2.25rem;
	font-size: 1.35rem;
}

.entry-content h2:first-child,
.entry-content h3:first-child,
.entry-content > :first-child {
	margin-top: 0;
}

.entry-content p,
.entry-content li {
	color: var(--neg-muted);
	font-size: 1.0625rem;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.25rem;
}

.entry-content li + li {
	margin-top: 0.4rem;
}

.entry-content a {
	color: var(--neg-blue);
	text-underline-offset: 3px;
}

.entry-content .wp-block-group.is-style-detail-band {
	max-width: none;
	margin-top: 3rem;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--neg-ice);
}

.entry-content .wp-block-group.is-style-detail-band > * {
	max-width: 68ch;
}

/* ======================= ABOUT PAGE ======================= */
/* Opening section (client feedback 2026-10-05 replaced the teal page hero).
   Type scale follows the inner-page section headings (.inner-section__head h2,
   max 3.25rem) and body copy (17px), not the larger coloured-hero title.
   No bottom padding: the next section's own top padding is the gap. */
.about-intro {
	padding-top: clamp(3rem, 6vw, 5rem);
	padding-bottom: 0;
}

.about-intro__title {
	margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
	font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
	line-height: 1.06;
}

.about-intro__body p:first-child {
	color: var(--neg-navy);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.6;
}

/* Keep the last margin inside the white section (it would otherwise collapse
   through the zero bottom padding and show the cream body as a strip). */
.about-intro__body p:last-child {
	margin-bottom: 0;
}

/* What We Do (client content 2026-10-05): two capability groups. Reuses the
   coral rule accent (.offering) and teal square bullets (.career-role__col).
   H2 sits below the page H1 in scale; groups stack below 768px. */
.about-what {
	padding-bottom: 0;
}

.about-what__title {
	margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	line-height: 1.1;
}

.about-what__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
}

.about-what__group {
	padding-top: 1.25rem;
	border-top: 1px solid var(--neg-line);
}

.about-what__group::before {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	margin: -1.25rem 0 1.25rem;
	background: var(--neg-coral);
	transform: translateY(-1px);
}

.about-what__heading {
	margin: 0 0 1.1rem;
	font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
	line-height: 1.2;
}

.about-what__list {
	display: grid;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-what__list li {
	position: relative;
	padding-left: 1.35rem;
	color: var(--neg-ink);
	font-size: 1rem;
	line-height: 1.55;
}

.about-what__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	background: var(--neg-teal);
}

@media (max-width: 767px) {
	.about-what__grid {
		grid-template-columns: 1fr;
	}
}

/* Tighter rhythm between the About sections than the full --neg-section-y. */
.about-intro + .inner-section,
.about-what + .inner-section {
	padding-top: clamp(3.5rem, 6vw, 5.5rem);
}

.about-section h2 {
	margin: 0 0 1rem;
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	line-height: 1.08;
}

.about-section p {
	max-width: 68ch;
	color: var(--neg-muted);
	font-size: 1.0625rem;
}

.principles {
	margin-top: 2.5rem;
	border-top: 1px solid var(--neg-line);
}

.principles__item {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 1rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--neg-line);
}

.principles__item span {
	color: var(--neg-coral);
	font-family: var(--neg-font-display);
	font-weight: 700;
	font-size: 0.6875rem;
}

.principles__item b {
	font-family: var(--neg-font-display);
	font-weight: 700;
	font-size: 1rem;
}

.principles__item p {
	grid-column: 2;
	margin: 0.35rem 0 0;
	font-size: 0.95rem;
}

/* ======================= CONTACT PAGE ======================= */
.contact-layout {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
}

/* ----- Left column: intro. Right column: contact details ----- */
.contact-copy h2 {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 4.4vw, 3.5rem);
	line-height: 1.05;
}

.contact-copy > p {
	max-width: 46ch;
	color: var(--neg-muted);
	font-size: 1.0625rem;
}

.contact-details {
	display: grid;
	border-top: 1px solid var(--neg-line);
}

.contact-details a {
	display: grid;
	gap: 0.25rem;
	padding: 1.3rem 0;
	border-bottom: 1px solid var(--neg-line);
	text-decoration: none;
	color: var(--neg-ink);
}

.contact-details a:hover strong,
.contact-details a:focus-visible strong {
	color: var(--neg-blue);
}

.contact-details small {
	color: var(--neg-coral-text); /* brand coral fails WCAG AA as text on white (axe: 2.76:1) */
	font-size: 0.5625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.contact-details strong {
	font-family: var(--neg-font-display);
	font-weight: 600;
	font-size: 1.25rem;
}

/* ========================= PROJECTS ========================= */
/* Team-experience project grid. Each card is either a representative/real
   image with a navy gradient overlay, or — only when no image resolves —
   a plain corporate colour block (navy/blue/teal). Same 4:3 ratio either
   way so the grid reads as consistent. No numbers, no filters. */
.project-grid__note {
	margin: 0 0 1.5rem;
	color: var(--neg-muted);
	font-size: 0.8125rem;
	font-style: italic;
}

.project-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--neg-line);
}

.project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	padding: 1.75rem;
	color: #fff;
}

/* Plain colour fallback (Acquisition Program, or any future project with
   neither a featured image nor a representative one). */
.project-card--navy {
	background: var(--neg-navy);
}

.project-card--blue {
	background: var(--neg-blue);
}

.project-card--teal {
	background: var(--neg-teal-panel);
}

/* Image variant */
.project-card--image {
	justify-content: flex-end;
}

.project-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.project-card--image:hover .project-card__img {
	transform: scale(1.05);
}

.project-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(6, 20, 31, 0.88) 0%, rgba(6, 20, 31, 0.35) 55%, rgba(6, 20, 31, 0.05) 100%);
	transition: background 0.3s ease;
}

.project-card--image:hover .project-card__overlay {
	background: linear-gradient(0deg, rgba(6, 20, 31, 0.94) 0%, rgba(6, 20, 31, 0.5) 60%, rgba(6, 20, 31, 0.15) 100%);
}

.project-card__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.project-card__title {
	font-family: var(--neg-font-display);
	font-weight: 700;
	font-size: 1.1875rem;
	line-height: 1.25;
}

.project-card__location {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 1024px) {
	.project-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.project-grid {
		grid-template-columns: 1fr;
	}
}

/* ======================= INNER CTA BAND ======================= */
.cta-band {
	position: relative;
	overflow: hidden;
	padding-block: var(--neg-section-y);
	/* White text on the brand --neg-coral fails WCAG AA here (axe: 2.4-2.75:1
	   across the eyebrow/title/body text). */
	background: var(--neg-coral-panel);
	color: #fff;
}

.cta-band::after {
	content: "NEG";
	position: absolute;
	right: -0.12em;
	bottom: -0.35em;
	color: rgba(255, 255, 255, 0.1);
	font-family: var(--neg-font-display);
	font-weight: 800;
	font-size: 16rem;
	line-height: 1;
	pointer-events: none;
}

.cta-band__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: clamp(2.5rem, 7vw, 6.25rem);
	align-items: end;
}

.cta-band__eyebrow {
	margin: 0 0 1rem;
	font-family: var(--neg-font-display);
	font-weight: 700;
	font-size: 0.5625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cta-band__title {
	margin: 0;
	color: #fff;
	font-size: clamp(2.2rem, 4.6vw, 3.75rem);
	line-height: 1.05;
}

.cta-band__text {
	margin: 0 0 1.5rem;
	color: rgba(255, 255, 255, 0.92); /* raised from 0.85 — failed WCAG AA against the panel bg (axe: ~4.1:1) */
}

.cta-band__text:last-child {
	margin-bottom: 0;
}

/* ============================ 404 ============================ */
.error-404 {
	min-height: 46vh;
	padding-block: var(--neg-section-y);
}

.error-404__eyebrow {
	margin: 0 0 1rem;
	color: var(--neg-coral);
	font-family: var(--neg-font-display);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.error-404__title {
	margin: 0 0 1rem;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.error-404__text {
	max-width: 52ch;
	color: var(--neg-muted);
	font-size: 1.0625rem;
}

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

/* The postid-12 .service-main 720px cap that lived here was removed
   2026-09-24 — Risk Management (post 12) now renders through
   single-service-risk-management.php, which never outputs .service-main,
   so the rule had no live target. It was also the literal root cause of
   the "narrow Risk page" complaint this dedicated template replaces. */

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1024px) {
	.service-layout {
		grid-template-columns: 240px 1fr;
	}

	.inner-section__head {
		grid-template-columns: 110px 1fr;
	}

	.contact-layout {
		grid-template-columns: 1fr;
	}

	.cta-band__grid {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.org-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.service-layout {
		grid-template-columns: 1fr;
	}

	.org-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.org-grid__item {
		min-height: 164px;
		padding: 1.25rem 1rem;
	}

	.org-grid__logo-box {
		height: 68px;
	}

	/* Side nav becomes a collapsed native disclosure. */
	.service-nav {
		position: static;
		border: 1px solid var(--neg-line);
	}

	.service-nav > .service-nav__summary {
		display: block;
		padding: 0.9rem 1rem;
		font-family: var(--neg-font-display);
		font-weight: 700;
		font-size: 0.8125rem;
		color: var(--neg-ink);
		cursor: pointer;
		list-style: none;
	}

	.service-nav > .service-nav__summary::-webkit-details-marker {
		display: none;
	}

	.service-nav > .service-nav__summary::after {
		content: "+";
		float: right;
		color: var(--neg-coral);
	}

	.service-nav[open] > .service-nav__summary::after {
		content: "\2212";
	}

	.service-nav > .service-nav__panel {
		display: block;
		padding: 0 1rem 0.5rem;
		border-top: 1px solid var(--neg-line);
	}

	.service-nav__label {
		display: none;
	}

	.offering-grid,
	.overview-grid {
		grid-template-columns: 1fr;
	}

	.overview-card:last-child:nth-child(odd),
	.offering:last-child:nth-child(odd) {
		grid-column: auto;
	}

	.service-evm__grid {
		grid-template-columns: 1fr;
	}

	.inner-section__head {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.service-prevnext__row {
		flex-direction: column;
		gap: 1.25rem;
	}

	.service-prevnext__link--next {
		margin-left: 0;
		text-align: left;
	}
}

/* Very small screens: the org logo wall drops to one column so the longest
   organization names never force horizontal overflow. */
@media (max-width: 380px) {
	.org-grid {
		grid-template-columns: 1fr;
	}
}

/* ========================= CAREERS ========================= */
/* Substantial role sections, not tiny generic cards — title + location,
   summary, a two-column What You'll Do / What You'll Bring split, Apply
   Now. Separated by hairlines, generous vertical spacing. */
.careers-apply-note {
	margin: -1rem 0 3rem;
	max-width: 62ch;
	color: var(--neg-muted);
	font-size: 0.9375rem;
}

.careers-apply-note a {
	color: var(--neg-blue);
	font-weight: 600;
}

.careers-roles {
	border-top: 1px solid var(--neg-line);
}

.career-role {
	padding: clamp(2.5rem, 5vw, 3.5rem) 0;
	border-bottom: 1px solid var(--neg-line);
}

.career-role__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.career-role__title {
	margin: 0;
	color: var(--neg-navy);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.15;
}

.career-role__location {
	font-family: var(--neg-font-display);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--neg-coral-text); /* darker coral for text on light backgrounds — see --neg-coral-text definition */
}

.career-role__summary {
	margin: 0 0 2rem;
	max-width: 64ch;
	color: var(--neg-muted);
	font-size: 1.0625rem;
}

.career-role__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.75rem, 4vw, 3rem);
	margin-bottom: 2.25rem;
}

.career-role__col h4 {
	margin: 0 0 1rem;
	color: var(--neg-navy);
	font-family: var(--neg-font-display);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.career-role__col ul {
	display: grid;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.career-role__col li {
	position: relative;
	padding-left: 1.25rem;
	color: var(--neg-ink);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.career-role__col li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	background: var(--neg-teal);
}

@media (max-width: 768px) {
	.career-role__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}