/* GTMSF — main stylesheet */

/* ─── Custom properties ─────────────────────────────────── */
:root {
	--color-black:    #0d0d0d;
	--color-white:    #ffffff;
	--color-gray-50:  #f7f7f7;
	--color-gray-200: #e5e5e5;
	--color-gray-500: #6b7280;
	--color-green-dark: #1B3A2F;
	--color-green-dark-rule: rgba(255, 255, 255, 0.15);
	--color-white-muted: rgba(255, 255, 255, 0.68);
	--color-cream:    #FAF6F0;

	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	             Helvetica, Arial, sans-serif;

	--space-xs:  0.5rem;
	--space-sm:  1rem;
	--space-md:  1.5rem;
	--space-lg:  2.5rem;
	--space-xl:  4rem;
	--space-2xl: 6rem;
}

/* ─── Base reset ────────────────────────────────────────── */
html {
	overflow-x: clip;
}

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

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-black);
	background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
}

.site {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--space-md);
}

/* ─── Button system ─────────────────────────────────────── */
.btn {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border-radius: 2px;
	transition: background-color 0.15s ease, color 0.15s ease;
	cursor: pointer;
}

.btn--primary {
	background-color: var(--color-black);
	color: var(--color-white);
	border: 2px solid var(--color-black);
}

.btn--primary:hover,
.btn--primary:focus {
	background-color: #2d2d2d;
	border-color: #2d2d2d;
}

.btn--ghost {
	background-color: transparent;
	color: var(--color-black);
	border: none;
	padding-left: 0;
	font-weight: 500;
}

.btn--ghost:hover,
.btn--ghost:focus {
	color: var(--color-gray-500);
}

/* ─── Hero ──────────────────────────────────────────────── */
.hero {
	position: relative;
	isolation: isolate;
	padding: var(--space-xl) var(--space-md);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.hero__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	column-gap: 3rem;
	row-gap: var(--space-lg);
	align-items: start;
}

.hero__copy {
	grid-column: 1;
	grid-row: 1;
}

.hero__headline {
	margin: 0 0 var(--space-md);
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-black);
}

.hero__subheadline {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-gray-500);
	max-width: 46ch;
}

.hero__visual {
	grid-column: 2;
	grid-row: 1 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
}

.hero__cta {
	grid-column: 1;
	grid-row: 2;
	align-self: start;
	padding-top: var(--space-xs);
}

.hero__btn {
	display: inline-flex;
	align-items: center;
	background-color: var(--color-green-dark);
	color: #ffffff;
	padding: 0.8125rem 1.875rem;
	border-radius: 12px;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.hero__btn:hover,
.hero__btn:focus {
	background-color: #12261d;
	color: #ffffff;
}

/* ─── Hub-spoke visual ──────────────────────────────────── */
.hub-spoke {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	width: 100%;
	max-width: 540px;
}

.hub-spoke__col {
	display: contents;
}

.hub-spoke__hub {
	background-color: var(--color-green-dark);
	border-radius: 6px;
	padding: 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	grid-column: 1 / -1;
	order: -1;
}

.hub-spoke__hub-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	width: 100%;
}

.hub-spoke__hub-pillars {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
	width: 100%;
}

.hub-spoke__hub-pillars span {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-white);
	line-height: 1.25;
	white-space: nowrap;
}

.hub-spoke__hub-sep {
	font-size: 0.6875rem;
	color: rgba(255, 255, 255, 0.4);
	padding: 0 0.625rem;
	flex-shrink: 0;
}

.spoke-card {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--color-white);
	border: 1px solid #E5E2DA;
	border-left: 2px solid var(--color-green-dark);
	border-radius: 3px;
	padding: 0.625rem 0.75rem;
}

.spoke-card__icon {
	display: flex;
	flex-shrink: 0;
	color: var(--color-green-dark);
	opacity: 0.7;
	margin-top: 0.0625rem;
}

.spoke-card__title {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-black);
	letter-spacing: -0.01em;
	line-height: 1.3;
}


/* ─── Hero — tablet and mobile ──────────────────────────── */
@media (max-width: 900px) {
	.hero__inner {
		display: flex;
		flex-direction: column;
		gap: var(--space-md);
	}

	.hero__copy  { order: 1; }
	.hero__visual { order: 2; justify-content: flex-start; }
	.hero__cta   { order: 3; padding-top: 0; display: flex; justify-content: center; width: 100%; }

	.hero__btn { margin-left: auto; margin-right: auto; }

	.hero__subheadline { max-width: 100%; }

	/* Mobile: full-width, tighter gap */
	.hub-spoke {
		gap: 0.375rem;
		max-width: 100%;
	}

	/* Hub: compact mobile padding */
	.hub-spoke__hub {
		padding: 0.75rem 1rem;
	}

	.hub-spoke__hub-pillars span { font-size: 0.5625rem; }

	.hub-spoke__hub-sep { padding: 0 0.25rem; font-size: 0.5rem; }

	.hub-spoke__col .spoke-card { min-width: 0; }
}

/* ─── Proof rail ────────────────────────────────────────── */
.proof-rail {
	position: relative;
	isolation: isolate;
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
	padding: 1rem var(--space-md);
}

.proof-rail::before {
	content: '';
	position: absolute;
	inset: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.proof-rail__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	text-align: center;
}

.proof-rail__creds {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.proof-rail__stat {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #2F3432;
	white-space: nowrap;
}

.proof-rail__sep {
	font-size: 0.625rem;
	color: var(--color-gray-500);
	flex-shrink: 0;
}

.proof-rail__logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	flex-wrap: wrap;
}

/* Logo slots — uniform containers ready for real logo swap */
.logo-slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 1.625rem;
	padding: 0 0.625rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-gray-500);
	border: 1px solid #E5E2DA;
	border-radius: 2px;
	white-space: nowrap;
}

.logo-slot--more {
	font-weight: 400;
	font-style: italic;
	letter-spacing: 0;
	text-transform: none;
	border-color: transparent;
}

@media (max-width: 768px) {
	.proof-rail {
		padding: 1rem var(--space-md);
		margin-left: 0;
		margin-right: 0;
	}

	.proof-rail__creds {
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
	}

	.proof-rail__sep {
		display: none;
	}

	.proof-rail__stat {
		font-size: 0.75rem;
		white-space: normal;
		text-align: center;
	}

	.proof-rail__logos {
		justify-content: center;
	}

	.logo-slot {
		height: 1.375rem;
		font-size: 0.5625rem;
		padding: 0 0.5rem;
	}
}

/* ─── Services / engagement model ──────────────────────── */
.services {
	background-color: var(--color-gray-50);
	padding: var(--space-xl) var(--space-md);
}

.services__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.services__header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: start;
	margin-bottom: var(--space-xl);
}

.services__framing {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-gray-500);
	max-width: 48ch;
	align-self: end;
}

/* Engagement rows */
.services__rows {
	border-top: 1px solid var(--color-gray-200);
}

.services__row {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: 0 var(--space-sm);
	align-items: start;
	padding: var(--space-lg) 0;
	border-bottom: 1px solid var(--color-gray-200);
}

.services__row-left {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: 0 var(--space-sm);
	align-items: start;
}

.services__seq {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--color-green-dark);
	padding-top: 0.3125rem;
	grid-row: 1 / 2;
}

.services__name {
	margin: 0 0 var(--space-xs);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--color-black);
	grid-column: 2;
}

.services__for {
	margin: 0 0 var(--space-sm);
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--color-gray-500);
	grid-column: 2;
}

.services__desc {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: #4b5563;
	grid-column: 2;
	max-width: 46ch;
}

/* Deliverables list */
.services__row-right {
	grid-column: 2;
	margin-top: var(--space-sm);
}

.services__deliverables {
	list-style: disc;
	margin: 0;
	padding-left: 1rem;
}

.services__deliverables li {
	font-size: 0.9375rem;
	color: var(--color-black);
	margin-top: var(--space-xs);
}

.services__deliverables li:first-child {
	margin-top: 0;
}

/* Section CTA */
.services__cta {
	display: flex;
	justify-content: flex-start;
	padding-top: var(--space-lg);
	padding-left: 0;
}

.services__cta .btn--ghost {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 2px;
}

/* ─── Services — tablet and mobile ─────────────────────── */
@media (max-width: 900px) {
	.services__header {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
		margin-bottom: var(--space-lg);
	}

	/* Collapse outer row to single column — no seq indent at tablet/mobile */
	.services__row {
		grid-template-columns: 1fr;
	}

	.services__row-left {
		grid-column: 1;
		display: flex;
		flex-direction: column;
	}

	.services__seq {
		padding-top: 0;
		margin-bottom: var(--space-xs);
		font-weight: 700;
		letter-spacing: 0.1em;
	}

	/* Reset to single column — seq is stacked above title, no column indent */
	.services__row-right {
		grid-column: 1;
	}
}

/* ─── Category archive page ──────────────────────────────── */
.category-page {
	background-color: var(--color-white);
	padding: var(--space-2xl) var(--space-md);
}

.category-page__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.category-page__header {
	margin-bottom: var(--space-xl);
}

.category-page__title {
	margin: var(--space-sm) 0 0;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--color-black);
}

.category-page__description {
	margin: var(--space-md) 0 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-gray-500);
	max-width: 58ch;
}

.category-page__footer {
	margin-top: var(--space-xl);
}

.category-page__footer-divider {
	border-top: 1px solid var(--color-gray-200);
	margin-bottom: var(--space-lg);
}

.category-page__footer-ctas {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	flex-wrap: wrap;
}

.category-page__back {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	text-decoration: none;
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 2px;
}

.category-page__back:hover,
.category-page__back:focus {
	color: var(--color-gray-500);
	border-bottom-color: var(--color-gray-500);
}

/* ─── Category shelf (Views system) ───────────────────────────
   Quieter sibling of the Views hub: cream topic header, white
   article ledger (reuses .views-index__entry verbatim), a light
   cross-topics strip, then the shared Views cream close. The
   old single-band .category-page* styles above are retired from
   the template and flagged for the dead-code sweep. */
.category-hero {
	position: relative;
	background-color: var(--color-cream);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
	padding: var(--space-xl) var(--space-md);
}

.category-hero::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.category-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
}

.category-hero__title {
	margin: var(--space-sm) 0 0;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--color-black);
}

.category-hero__description {
	margin: var(--space-sm) 0 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-gray-500);
	max-width: 58ch;
}

.category-hero__description p {
	margin: 0;
}

.category-index {
	background-color: var(--color-white);
	padding: var(--space-xl) var(--space-md);
}

.category-index__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.category-topics {
	background-color: var(--color-white);
	padding: 0 var(--space-md) var(--space-xl);
}

.category-topics__inner {
	max-width: 1200px;
	margin: 0 auto;
	border-top: 1px solid var(--color-gray-200);
	padding-top: var(--space-lg);
}

.category-topics__headline {
	margin: var(--space-sm) 0 var(--space-lg);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
}

.category-topics__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg);
}

.category-topics__item {
	border-top: 1px solid var(--color-gray-200);
	padding-top: var(--space-sm);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.category-topics__item-name {
	margin: 0 0 0.375rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.category-topics__item-desc {
	margin: 0 0 var(--space-sm);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #4b5563;
	flex: 1;
	max-width: 52ch;
}

.category-topics__item-cta {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-black);
	text-decoration: none;
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 2px;
}

.category-topics__item-cta:hover,
.category-topics__item-cta:focus {
	color: var(--color-gray-500);
	border-bottom-color: var(--color-gray-500);
}

/* ─── Category shelf — mobile ────────────────────────────────── */
@media (max-width: 768px) {
	.category-hero {
		margin-left: 0;
		margin-right: 0;
	}

	.category-topics__grid {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
	}
}

/* ─── Article / single post page ────────────────────────── */
.article-page {
	background-color: var(--color-white);
}

.article-page__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--space-2xl) var(--space-md);
}

.article-page__category {
	margin: 0 0 var(--space-sm);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.article-page__title {
	margin: 0 0 var(--space-sm);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--color-black);
}

.article-page__tags {
	margin: 0 0 var(--space-md);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-gray-500);
	letter-spacing: 0.02em;
}

.article-page__excerpt {
	margin: 0 0 var(--space-md);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-gray-500);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-gray-200);
}

/* Article body prose */
.article-page__content {
	margin-bottom: var(--space-xl);
}

.article-page__content h2 {
	margin: var(--space-xl) 0 var(--space-md);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-black);
}

.article-page__content h3 {
	margin: var(--space-lg) 0 var(--space-sm);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-black);
}

.article-page__content p {
	margin: 0 0 var(--space-md);
	font-size: 1rem;
	line-height: 1.8;
	color: #4b5563;
}

.article-page__content ul,
.article-page__content ol {
	margin: 0 0 var(--space-md);
	padding-left: 1.5rem;
}

.article-page__content li {
	font-size: 1rem;
	line-height: 1.75;
	color: #4b5563;
	margin-bottom: 0.375rem;
}

.article-page__content a {
	color: var(--color-green-dark);
	text-decoration: underline;
}

.article-page__content a:hover,
.article-page__content a:focus {
	color: var(--color-black);
}

/* Article footer */
.article-page__footer-divider {
	border-top: 1px solid var(--color-gray-200);
	margin-bottom: var(--space-lg);
}

.article-page__footer-ctas {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	flex-wrap: wrap;
}

.article-page__back {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	text-decoration: none;
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 2px;
}

.article-page__back:hover,
.article-page__back:focus {
	color: var(--color-gray-500);
	border-bottom-color: var(--color-gray-500);
}

/* Article kicker link — inherits kicker treatment, darkens on hover */
.article-page__category-link {
	color: inherit;
	text-decoration: none;
}

.article-page__category-link:hover,
.article-page__category-link:focus {
	color: var(--color-black);
	text-decoration: underline;
}

/* Quiet updated-date line */
.article-page__updated {
	margin: 0 0 var(--space-md);
	font-size: 0.75rem;
	color: var(--color-gray-500);
	letter-spacing: 0.02em;
}

/* Per-article sources block — populated from `gtmsf_sources` meta */
.article-page__sources {
	margin-bottom: var(--space-xl);
	padding: var(--space-md);
	background-color: var(--color-gray-50);
	border: 1px solid var(--color-gray-200);
}

.article-page__sources-heading {
	margin: 0 0 var(--space-sm);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-black);
}

.article-page__sources-list {
	margin: 0 0 var(--space-sm);
	padding: 0;
	list-style: none;
}

.article-page__sources-item {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--color-gray-500);
	margin-bottom: 0.5rem;
}

.article-page__sources-link {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-green-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--color-green-dark);
	padding-bottom: 1px;
}

.article-page__sources-link:hover,
.article-page__sources-link:focus {
	color: var(--color-black);
	border-bottom-color: var(--color-black);
}

/* Related views block — curated via `gtmsf_related` meta,
   same-category fallback; article-scoped, no shared index classes */
.article-page__related {
	margin-bottom: var(--space-xl);
}

.article-page__related-heading {
	margin: 0 0 var(--space-sm);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-black);
}

.article-page__related-entries {
	border-top: 1px solid var(--color-gray-200);
}

.article-page__related-entry {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--color-gray-200);
}

.article-page__related-category {
	margin: 0 0 0.25rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.article-page__related-title {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-black);
	text-decoration: none;
}

.article-page__related-title:hover,
.article-page__related-title:focus {
	color: var(--color-green-dark);
}

/* Proof-object preview — the article's first table, cloned above the
   TL;DR at template level. The excerpt's own bottom rule is suppressed
   when the preview exists; the preview carries the rule instead. */
.article-page--has-proof .article-page__excerpt {
	border-bottom: 0;
	padding-bottom: 0;
}

.article-page__proof {
	margin: 0 0 var(--space-md);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-gray-200);
}

.article-page__proof .wp-block-table {
	margin: 0;
}

.article-page__proof table {
	font-size: 0.875rem;
	line-height: 1.5;
}

/* Article blockquotes — grey-box treatment matching the Sources block */
.article-page__content .wp-block-quote {
	margin: var(--space-lg) 0;
	padding: var(--space-md);
	background-color: var(--color-gray-50);
	border: 1px solid var(--color-gray-200);
	border-left: 3px solid var(--color-green-dark);
}

.article-page__content .wp-block-quote p {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--color-black);
}

/* ─── Views index — WP_Query loop ────────────────────────── */
.views-index__entries {
	border-top: 1px solid var(--color-gray-200);
}

/* Library See More toggle — entries beyond the first five hide only
   once JS confirms it can reveal them (js-collapse-ready), so no-JS
   visitors always see the full library. */
.views-index__entries.js-collapse-ready.is-collapsed .views-index__entry--extra {
	display: none;
}

.views-index__more-wrap {
	margin-top: var(--space-lg);
}

.views-index__more {
	appearance: none;
	background: none;
	border: none;
	padding: 0 0 2px;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	border-bottom: 1.5px solid var(--color-black);
}

.views-index__more:hover,
.views-index__more:focus {
	color: var(--color-gray-500);
	border-bottom-color: var(--color-gray-500);
}

.views-index__more .views-index__more-label--open {
	display: none;
}

.views-index__more[aria-expanded="true"] .views-index__more-label--open {
	display: inline;
}

.views-index__more[aria-expanded="true"] .views-index__more-label--closed {
	display: none;
}

.views-index__empty {
	margin: var(--space-xl) 0;
	font-size: 1rem;
	font-style: italic;
	color: var(--color-gray-500);
}

/* ─── Legal pages ────────────────────────────────────────── */
.legal-page {
	max-width: 820px;
	margin: 0 auto;
	padding: var(--space-2xl) var(--space-md);
}

.legal-page__title {
	margin: 0 0 var(--space-xs);
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--color-black);
}

.legal-page__meta {
	margin: 0 0 var(--space-2xl);
	font-size: 0.875rem;
	color: var(--color-gray-500);
}

.legal-page__section {
	margin-bottom: var(--space-xl);
}

.legal-page__section h2 {
	margin: 0 0 var(--space-sm);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-black);
}

.legal-page p {
	margin: 0 0 var(--space-md);
	font-size: 0.9375rem;
	line-height: 1.8;
	color: #4b5563;
}

.legal-page ul,
.legal-page ol {
	margin: 0 0 var(--space-md);
	padding-left: 1.5rem;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.8;
	color: #4b5563;
}

.legal-page ul li,
.legal-page ol li {
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.8;
	color: #4b5563;
	margin-bottom: 0.5rem;
}

.legal-page a {
	color: var(--color-green-dark);
	text-decoration: underline;
}

.legal-page a:hover,
.legal-page a:focus {
	color: var(--color-black);
}

.legal-page__toc {
	margin: 0 0 var(--space-xl);
	padding: var(--space-md);
	background-color: var(--color-gray-50);
	border: 1px solid var(--color-gray-200);
}

.legal-page__toc-title {
	margin: 0 0 var(--space-xs);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gray-500);
}

.legal-page__toc ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
	columns: 2;
	column-gap: var(--space-lg);
	font-size: 0.875rem;
	line-height: 1.6;
}

.legal-page__toc li {
	margin-bottom: 0.375rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-gray-500);
}

.legal-page__toc a {
	color: var(--color-green-dark);
	text-decoration: none;
}

.legal-page__toc a:hover,
.legal-page__toc a:focus {
	text-decoration: underline;
}

/* ─── Sources page (living bibliography) ─────────────────────
   Modeled on .legal-page's spacing/typography values, but its own
   namespace — Sources isn't a legal document, and a future legal-copy
   change shouldn't be able to affect this page or vice versa. */
.sources-page {
	max-width: 820px;
	margin: 0 auto;
	padding: var(--space-2xl) var(--space-md);
}

.sources-page__title {
	margin: 0 0 var(--space-xs);
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--color-black);
}

.sources-page__meta {
	margin: 0 0 var(--space-md);
	font-size: 0.875rem;
	color: var(--color-gray-500);
}

.sources-page__intro {
	margin: 0 0 var(--space-2xl);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: #4b5563;
	max-width: 58ch;
}

.sources-page__list {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.sources-page__entry {
	padding-left: 1.5em;
	text-indent: -1.5em;
	margin-bottom: var(--space-md);
	font-size: 0.9375rem;
	line-height: 1.8;
	color: #4b5563;
}

.sources-page__entry cite {
	font-style: italic;
}

.sources-page__entry a {
	color: var(--color-green-dark);
	text-decoration: underline;
}

.sources-page__entry a:hover,
.sources-page__entry a:focus {
	color: var(--color-black);
	color: var(--color-black);
}

@media (max-width: 600px) {
	.legal-page {
		padding: var(--space-xl) var(--space-md);
	}

	.legal-page__toc ul {
		columns: 1;
	}
}

/* ─── Projects pattern recognition strip ────────────────── */
.projects-pattern {
	background-color: var(--color-green-dark);
	padding: var(--space-md) var(--space-md);
}

.projects-pattern__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.projects-pattern__label {
	margin: 0 0 var(--space-xs);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white-muted);
}

.projects-pattern__headline {
	margin: 0 0 var(--space-md);
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-white);
}

.projects-pattern__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	border-top: 1px solid var(--color-green-dark-rule);
}

.projects-pattern__point {
	padding-top: var(--space-sm);
}

.projects-pattern__point-title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-white);
}

.projects-pattern__supporting {
	margin: var(--space-sm) 0 0;
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	max-width: 60ch;
}

/* ─── Projects pattern — tablet and mobile ───────────────── */
@media (max-width: 900px) {
	.projects-pattern__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.projects-pattern__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}
}

/* ─── Projects lens / full-stack revenue engineering ─────── */
.projects-lens {
	background-color: var(--color-gray-50);
	padding: var(--space-xl) var(--space-md);
}

.projects-lens__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.projects-lens__headline {
	margin: var(--space-sm) 0 var(--space-md);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
	max-width: 40ch;
}

.projects-lens__supporting {
	margin: 0 0 var(--space-lg);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-gray-500);
	max-width: 58ch;
}

/* Numbered rows */
.projects-lens__rows {
	border-top: 1px solid var(--color-gray-200);
	margin-bottom: var(--space-lg);
}

.projects-lens__row {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: 0 var(--space-sm);
	align-items: center;
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--color-gray-200);
}

.projects-lens__row--last {
	border-bottom: none;
}

.projects-lens__seq {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--color-green-dark);
}

.projects-lens__statement {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-black);
}

/* Closing and CTA */
.projects-lens__closing {
	margin: 0 0 var(--space-md);
	font-size: 1rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--color-gray-500);
	max-width: 52ch;
}

.projects-lens__cta {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 2px;
}

.projects-lens__cta:hover,
.projects-lens__cta:focus {
	color: var(--color-gray-500);
	border-bottom-color: var(--color-gray-500);
}

/* ─── Projects index / proof library ────────────────────── */
.projects-index {
	background-color: var(--color-white);
	padding: var(--space-2xl) var(--space-md);
}

.projects-index__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.projects-index__header {
	max-width: 720px;
	margin: 0 auto var(--space-sm);
	text-align: center;
}

.projects-index__headline {
	margin: var(--space-sm) 0 var(--space-sm);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
}

.projects-index__supporting {
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-gray-500);
	max-width: 64ch;
}

.projects-index__taxonomy {
	margin: var(--space-sm) 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(27, 58, 47, 0.55);
}

.projects-index__taxonomy-sep {
	margin: 0 0.5rem;
	color: rgba(27, 58, 47, 0.3);
}

.projects-index__taxonomy span {
	white-space: nowrap;
}

/* Intro CTA — same dark-green pill button used in the AI-era and
   Approach-bridge modules, re-implemented here under its own
   selector rather than shared, same as those two modules. */
.projects-index__cta-link {
	display: inline-flex;
	align-items: center;
	margin: var(--space-md) 0 0;
	background-color: var(--color-green-dark);
	color: #ffffff;
	border: 1px solid var(--color-green-dark);
	padding: 0.8125rem 1.875rem;
	border-radius: 12px;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.projects-index__cta-link:hover,
.projects-index__cta-link:focus {
	background-color: #12261d;
	border-color: #12261d;
}

/* Proof matrix table */
.projects-index__table-wrapper {
	overflow-x: auto;
	border: 1px solid var(--color-gray-200);
	border-radius: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--color-gray-200) transparent;
}

.projects-index__table-wrapper::-webkit-scrollbar {
	height: 6px;
}

.projects-index__table-wrapper::-webkit-scrollbar-track {
	background: transparent;
}

.projects-index__table-wrapper::-webkit-scrollbar-thumb {
	background-color: var(--color-gray-200);
	border-radius: 3px;
}

.projects-index__table {
	width: 100%;
	min-width: 1080px;
	border-collapse: collapse;
	font-family: var(--font-sans);
	table-layout: auto;
}

.projects-index__table thead tr {
	border-bottom: 1px solid var(--color-gray-200);
}

.projects-index__table th {
	padding: 0.75rem 0.625rem;
	text-align: left;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-gray-500);
	white-space: nowrap;
}

.projects-index__th--mark {
	text-align: center;
}

.projects-index__table tbody tr {
	border-bottom: 1px solid var(--color-gray-200);
}

.projects-index__cell {
	padding: 0.875rem 0.625rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: #4b5563;
	vertical-align: top;
}

.projects-index__cell--project {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-black);
	white-space: nowrap;
}

.projects-index__cell--mark {
	text-align: center;
	font-weight: 700;
	color: var(--color-green-dark);
	white-space: nowrap;
}

.projects-index__cell--empty {
	color: var(--color-gray-200);
}

.projects-index__cell--signal {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 180px;
}

.projects-index__cell--refs {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 110px;
}

.projects-index__signal-context {
	color: #4b5563;
}

.projects-index__signal-figure {
	font-weight: 700;
	color: var(--color-black);
}

/* Reveal — real button, JS-driven, one-way (no collapse back) */
.projects-index__reveal-cell {
	padding: 0;
	text-align: center;
}

.projects-index__reveal-trigger {
	display: inline-flex;
	align-items: center;
	width: 100%;
	justify-content: center;
	padding: 0.875rem 0.75rem;
	background: none;
	border: none;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-green-dark);
	text-decoration: underline;
	cursor: pointer;
}

.projects-index__reveal-trigger:hover,
.projects-index__reveal-trigger:focus {
	color: var(--color-black);
}

/* Handoff — closing row after the full matrix, text-style CTA only */
.projects-index__handoff-cell {
	padding: 1.125rem 0.75rem;
	text-align: center;
}

.projects-index__handoff {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-gray-500);
}

.projects-index__handoff a {
	font-weight: 600;
	color: var(--color-green-dark);
	text-decoration: none;
	border-bottom: 1.5px solid var(--color-green-dark);
	padding-bottom: 1px;
}

.projects-index__handoff a:hover,
.projects-index__handoff a:focus {
	color: var(--color-black);
	border-bottom-color: var(--color-black);
}

/* Responsive — this stays a real table at every width, including
   mobile. Earlier passes reflowed rows into stacked label/value
   blocks below 600px, but that made an 11-column proof matrix read
   as a long prose document and lost the spreadsheet/matrix feeling
   the module is supposed to have. Now it's one strategy everywhere:
   a contained, intentionally-styled horizontal scroll, never a
   layout reflow. Only typography tightens on very small screens. */
@media (max-width: 480px) {
	.projects-index__table {
		min-width: 920px;
	}

	.projects-index__cell,
	.projects-index__table th {
		padding: 0.75rem 0.5rem;
		font-size: 0.75rem;
	}

	.projects-index__cell--signal {
		min-width: 170px;
	}
}

/* Keep the reveal/handoff CTA visible at the left edge of the
   scrollable Projects table on mobile/tablet — same fix applied
   to the References People Table. Sticky-positions the cell to
   the visible left edge of .projects-index__table-wrapper so the
   CTA stays in view regardless of scroll position. Uses the
   site's standard 768px mobile cutoff. */
@media (max-width: 768px) {
	.projects-index__reveal-cell,
	.projects-index__handoff-cell {
		position: sticky;
		left: 0;
		text-align: left;
	}

	.projects-index__reveal-trigger {
		width: auto;
		justify-content: flex-start;
	}
}

/* ─── Featured project variants ─────────────────────────── */
.project--alt {
	background-color: var(--color-gray-50);
}

.project__context {
	margin: 0 0 var(--space-md);
	font-size: 0.9375rem;
	font-style: italic;
	line-height: 1.65;
	color: var(--color-gray-500);
	max-width: 48ch;
}

/* ─── Featured project / proof ─────────────────────────── */
.project {
	background-color: var(--color-white);
	padding: var(--space-2xl) var(--space-md);
}

.project__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

/* Left column */
.project__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.project__title {
	margin: var(--space-sm) 0 var(--space-md);
	font-size: clamp(1.375rem, 3.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--color-black);
}

.project__title-sub {
	display: block;
	font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--color-gray-500);
	margin-top: 0.375rem;
}

.project__narrative {
	margin: 0 0 var(--space-lg);
	font-size: 1rem;
	line-height: 1.7;
	color: #4b5563;
	max-width: 52ch;
}

.project__cta {
	display: inline-flex;
	align-items: center;
	background-color: var(--color-green-dark);
	color: #ffffff;
	border: 1px solid var(--color-green-dark);
	padding: 0.8125rem 1.875rem;
	border-radius: 12px;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 0.15s ease;
	align-self: flex-start;
}

.project__cta:hover,
.project__cta:focus {
	background-color: #12261d;
	border-color: #12261d;
}

/* Right column */
.project__right {
	padding-left: var(--space-lg);
}

.project__outcomes-label {
	margin: 0 0 var(--space-md);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gray-500);
}

.project__outcomes {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-gray-200);
}

.project__outcome {
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-black);
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--color-gray-200);
}

/* ─── AI-era GTM module (projects-featured) ───────────────
   New sub-components scoped to this module only — modeled on
   .stat-pair (homepage problem.php), .project-teaser__formula,
   and .project-card (homepage project.php) for visual
   consistency, but deliberately not sharing those selectors so
   neither page can affect the other. */
.project-ai-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
	margin: 0 0 var(--space-lg);
}

.project-ai-stats__item {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.project-ai-stats__number {
	display: block;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: #2F3432;
}

.project-ai-stats__text {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--color-gray-500);
}

.project-ai-stats__source {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-gray-500);
}

.project-ai-equation {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	margin: 0 0 var(--space-lg);
}

.project-ai-equation__term {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: #F7F7F5;
	border: 1px solid #E5E2DA;
	border-radius: 3px;
	padding: 0.375rem 0.625rem;
	line-height: 1.25;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--color-black);
	white-space: nowrap;
}

.project-ai-equation__term-line {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--color-black);
	white-space: nowrap;
}

.project-ai-equation__term--result {
	background-color: var(--color-black);
	border-color: var(--color-black);
}

.project-ai-equation__term--result .project-ai-equation__term-line {
	color: var(--color-cream);
}

.project-ai-equation__op {
	flex-shrink: 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-gray-500);
}

.project-ai-card {
	background-color: var(--color-white);
	border: 1px solid #E5E2DA;
	border-left: 2px solid var(--color-green-dark);
	border-radius: 3px;
	padding: 1.125rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: var(--space-sm);
}

.project-ai-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.project-ai-card__name {
	display: inline-flex;
	align-items: center;
	height: 1.625rem;
	padding: 0 0.625rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-black);
	background-color: var(--color-white);
	border: 1px solid #E5E2DA;
	border-radius: 2px;
	white-space: nowrap;
}

.project-ai-card__tag {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-green-dark);
	white-space: nowrap;
}

.project-ai-card__metric {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	color: #2F3432;
}

.project-ai-card__body {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-gray-500);
}

.project-ai-card__context {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(27, 58, 47, 0.55);
}

.project-ai-more {
	margin: var(--space-sm) 0 0;
	font-size: 0.75rem;
	font-weight: 400;
	font-style: italic;
	color: rgba(27, 58, 47, 0.45);
}

/* ─── Featured project — tablet and mobile ──────────────── */
@media (max-width: 900px) {
	.project__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.project__right {
		padding-left: 0;
		padding-top: var(--space-md);
	}

	.project-ai-stats {
		grid-template-columns: 1fr;
	}
}

/* ─── Projects approach bridge (ported from homepage
   .approach-teaser / .engage-table / .proof-map — Projects-
   specific selectors throughout, no shared classes, so neither
   page can affect the other). Stage grouping differs from the
   homepage: 2/2/2/1 across the 7 steps instead of 1/2/2/2. ─── */
.projects-approach {
	background-color: var(--color-white);
	padding: var(--space-xl) 0;
}

.projects-approach__inner {
	background-color: var(--color-green-dark);
	padding: var(--space-xl);
}

.projects-approach__top {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 3rem;
	align-items: center;
	margin-bottom: var(--space-md);
}

.projects-approach__copy {
	display: flex;
	flex-direction: column;
}

.projects-approach__kicker {
	margin: 0 0 var(--space-sm);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white-muted);
}

.projects-approach__headline {
	margin: 0 0 var(--space-sm);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-white);
}

.projects-approach__body {
	margin: 0 0 var(--space-md);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--color-white-muted);
}

.projects-approach__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #ffffff;
	color: #1B3A2F;
	border: 1px solid rgba(255, 255, 255, 0.35);
	padding: 0.6875rem 1.375rem;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border-radius: 2px;
	transition: background-color 0.15s ease;
	align-self: flex-start;
}

.projects-approach__cta:hover,
.projects-approach__cta:focus {
	background-color: var(--color-cream);
}

/* Engagement options — compact cream table */
.projects-engage-table {
	background: #F7F7F5;
	border: 1px solid #E5E2DA;
}

.projects-engage-table__heading {
	margin: 0;
	padding: 0.875rem 1.25rem;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(27, 58, 47, 0.55);
	border-bottom: 1px solid #E5E2DA;
}

.projects-engage-table__wrapper {
	overflow-x: auto;
}

.projects-engage-table__grid {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-sans);
}

.projects-engage-table__grid td {
	padding: 1.125rem 1.25rem;
	vertical-align: top;
	border-bottom: 1px solid #E5E2DA;
	color: var(--color-green-dark);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.projects-engage-table__grid tr:last-child td {
	border-bottom: none;
}

.projects-engage-table__duration {
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(27, 58, 47, 0.60);
	white-space: nowrap;
	width: 3rem;
}

.projects-engage-table__name {
	font-size: 0.9375rem;
	font-weight: 700;
	white-space: nowrap;
}

.projects-engage-table__desc {
	color: rgba(27, 58, 47, 0.70);
}

/* Stage/proof progression graph */
.projects-approach__map {
	padding-top: var(--space-md);
}

.projects-proof-map {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.projects-proof-map__stages {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0 0.5rem;
}

.projects-proof-map__anchor {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	text-align: center;
}

.projects-proof-map__anchor--1 {
	grid-column: 1 / span 2;
	text-align: left;
}

.projects-proof-map__anchor--2 {
	grid-column: 3 / span 2;
}

.projects-proof-map__anchor--3 {
	grid-column: 5 / span 2;
}

.projects-proof-map__anchor--4 {
	grid-column: 7;
	text-align: right;
}

.projects-proof-map__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0 0.5rem;
	position: relative;
}

.projects-proof-map__track::before {
	content: '';
	position: absolute;
	top: 1rem;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.18);
}

.projects-proof-map__node {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.375rem;
	padding: 0 0.25rem 0.5rem;
}

.projects-proof-map__step {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: #FAF6F0;
	color: #1B3A2F;
	border: 1px solid rgba(255, 255, 255, 0.65);
	font-size: 0.8125rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.projects-proof-map__label {
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.90);
	line-height: 1.35;
	padding-top: 0.25rem;
}

/* Responsive */
@media (max-width: 900px) {
	.projects-approach__inner {
		padding: var(--space-lg);
	}

	.projects-approach__top {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
}

@media (max-width: 768px) {
	.projects-proof-map__stages {
		display: none;
	}

	.projects-proof-map__track {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(4, auto);
		grid-auto-flow: column;
		gap: var(--space-sm) var(--space-md);
	}

	.projects-proof-map__track::before {
		display: none;
	}

	.projects-proof-map__node {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: 0.5rem;
	}

	.projects-proof-map__step {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.75rem;
		flex-shrink: 0;
	}

	.projects-proof-map__label {
		font-size: 0.8125rem;
		padding-top: 0;
	}
}

@media (max-width: 480px) {
	.projects-proof-map__track {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
		gap: var(--space-xs) 0;
	}
}

@media (max-width: 600px) {
	.projects-approach__inner {
		padding: var(--space-lg) var(--space-md);
	}

	.projects-engage-table__grid,
	.projects-engage-table__grid tbody {
		display: block;
	}

	.projects-engage-table__grid tr {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		padding: 0.875rem 1rem;
		border-bottom: 1px solid #E5E2DA;
	}

	.projects-engage-table__grid tr:last-child {
		border-bottom: none;
	}

	.projects-engage-table__grid td {
		padding: 0;
		border: none;
	}

	.projects-engage-table__duration {
		display: none;
	}

	.projects-engage-table__name {
		white-space: normal;
		font-size: 0.9375rem;
	}

	.projects-engage-table__desc {
		font-size: 0.8125rem;
	}
}

/* ─── Project teaser (homepage proof bridge) ────────────── */
.project-teaser {
	background-color: var(--color-white);
	padding: var(--space-2xl) var(--space-md);
}

.project-teaser__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 3rem;
	align-items: center;
}

.project-teaser__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.project-teaser__headline {
	margin: var(--space-sm) 0 var(--space-md);
	font-size: clamp(1.375rem, 3.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--color-black);
}

.project-teaser__body {
	margin: 0 0 var(--space-md);
	font-size: 1rem;
	line-height: 1.7;
	color: #4b5563;
	max-width: 52ch;
}

.project-teaser__formula {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	max-width: 52ch;
	margin: 0 0 var(--space-md);
}

.project-teaser__formula-group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 0.25rem;
}

.project-teaser__formula-term {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: #F7F7F5;
	border: 1px solid #E5E2DA;
	border-radius: 3px;
	padding: 0.375rem 0.5rem;
	line-height: 1.25;
}

.project-teaser__formula-term-line {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--color-black);
	white-space: nowrap;
}

.project-teaser__formula-term--result {
	background-color: var(--color-black);
	border-color: var(--color-black);
}

.project-teaser__formula-term--result .project-teaser__formula-term-line {
	color: var(--color-cream);
}

.project-teaser__formula-op {
	flex-shrink: 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-gray-500);
}

.project-teaser__cta {
	display: inline-flex;
	align-items: center;
	background-color: var(--color-green-dark);
	color: #ffffff;
	border: 1px solid var(--color-green-dark);
	padding: 0.8125rem 1.875rem;
	border-radius: 12px;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 0.15s ease;
	align-self: flex-start;
}

.project-teaser__cta:hover,
.project-teaser__cta:focus {
	background-color: #12261d;
	border-color: #12261d;
	color: #ffffff;
}

/* Right side: proof board */
.project-teaser__right {
	background-color: #F7F7F5;
	border: 1px solid #E5E2DA;
	border-radius: 4px;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.project-card {
	background-color: var(--color-white);
	border: 1px solid #E5E2DA;
	border-left: 2px solid var(--color-green-dark);
	border-radius: 3px;
	padding: 1.125rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.project-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.project-card__name {
	display: inline-flex;
	align-items: center;
	height: 1.625rem;
	padding: 0 0.625rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-black);
	background-color: var(--color-white);
	border: 1px solid #E5E2DA;
	border-radius: 2px;
	white-space: nowrap;
}

.project-card__tag {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-green-dark);
	white-space: nowrap;
}

.project-card__proof {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	color: #2F3432;
}

.project-card__role {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-gray-500);
}

.project-card__backing {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(27, 58, 47, 0.55);
}

.project-teaser__more {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 400;
	font-style: italic;
	color: rgba(27, 58, 47, 0.45);
}

/* ─── Project teaser — tablet and mobile ────────────────── */
@media (max-width: 900px) {
	.project-teaser__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
}

/* ─── References preview (homepage people-proof bridge) ─── */
.references-preview {
	background-color: var(--color-white);
	padding: var(--space-md) var(--space-md) var(--space-lg);
	text-align: center;
}

.references-preview__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.references-preview__intro {
	max-width: 640px;
	margin: 0 auto var(--space-sm);
}

.references-preview__headline {
	margin: var(--space-sm) 0 var(--space-sm);
	font-size: clamp(1.375rem, 3.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
}

.references-preview__taxonomy {
	margin: var(--space-sm) 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(27, 58, 47, 0.55);
}

.references-preview__taxonomy-sep {
	margin: 0 0.5rem;
	color: rgba(27, 58, 47, 0.3);
}

/* Keep multi-word taxonomy items intact; the row itself still wraps
   between items via normal inline flow. */
.references-preview__taxonomy span {
	white-space: nowrap;
}

.references-preview__taxonomy-short {
	display: none;
}

.references-preview__body {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: #4b5563;
}

.references-preview__cta {
	margin: var(--space-md) 0 var(--space-sm);
}

/* Proof row: stat card + two quote cards, one shared system */
.references-preview__proof {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
	max-width: 1000px;
	margin: 0 auto var(--space-sm);
	text-align: left;
}

.reference-proof {
	background-color: var(--color-white);
	border: 1px solid #E5E2DA;
	border-radius: 4px;
	padding: 1.125rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.reference-proof--stat {
	background-color: #2F3432;
	border-color: #2F3432;
}

.reference-proof--quote {
	background-color: #F7F7F5;
}

.reference-proof__label,
.reference-proof__name {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	height: 1.625rem;
	padding: 0 0.625rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-black);
	background-color: var(--color-white);
	border: 1px solid #E5E2DA;
	border-radius: 2px;
	white-space: nowrap;
}

.reference-proof__identity {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
}

.reference-proof__stat-block {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.25rem;
}

.reference-proof__figure {
	display: block;
	font-size: 1.625rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--color-cream);
}

.reference-proof__support {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-white);
}

.reference-proof__source {
	font-size: 0.6875rem;
	letter-spacing: 0.01em;
	color: var(--color-white-muted);
}

.reference-proof__takeaway {
	margin: 0;
	font-size: 0.75rem;
	font-style: italic;
	color: var(--color-white-muted);
}

.reference-proof__quote {
	margin: 0;
}

.reference-proof__quote p {
	margin: 0;
	font-size: 0.9375rem;
	font-style: italic;
	line-height: 1.5;
	color: var(--color-black);
}

.reference-proof__lineage {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-gray-500);
}

/* Section CTA */
.references-preview__cta-link {
	display: inline-flex;
	align-items: center;
	background-color: var(--color-green-dark);
	color: #ffffff;
	border: 1px solid var(--color-green-dark);
	padding: 0.8125rem 1.875rem;
	border-radius: 12px;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.references-preview__cta-link:hover,
.references-preview__cta-link:focus {
	background-color: #12261d;
	border-color: #12261d;
	color: #ffffff;
}

/* ─── References preview — tablet and mobile ────────────── */
@media (max-width: 900px) {
	.references-preview__proof {
		grid-template-columns: 1fr;
	}

	.reference-proof {
		padding: 0.875rem 1rem;
	}

	.reference-proof__quote p {
		font-size: 0.875rem;
	}
}

@media (max-width: 480px) {
	.references-preview__taxonomy-full {
		display: none;
	}

	.references-preview__taxonomy-short {
		display: inline;
	}
}

/* ─── Closing CTA ───────────────────────────────────────── */
.cta-close {
	background-color: var(--color-green-dark);
	padding: var(--space-xl) var(--space-md);
}

.cta-close__inner {
	max-width: 680px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
}

.cta-close__label {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white-muted);
}

.cta-close__headline {
	margin: 0;
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--color-white);
}

.cta-close__body {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.80);
	max-width: 44ch;
}

.cta-close__actions {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	flex-wrap: wrap;
	justify-content: center;
	padding-top: var(--space-sm);
}

.cta-close__btn-primary {
	background-color: var(--color-white);
	color: var(--color-green-dark);
	border: 2px solid var(--color-white);
	font-weight: 700;
	padding: 0.625rem 1.25rem;
}

.cta-close__btn-primary:hover,
.cta-close__btn-primary:focus {
	background-color: transparent;
	color: var(--color-white);
}

.cta-close__btn-secondary {
	background-color: transparent;
	color: rgba(255, 255, 255, 0.80);
	border: none;
	padding-left: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	border-bottom: 1.5px solid rgba(255, 255, 255, 0.40);
	padding-bottom: 2px;
}

.cta-close__btn-secondary:hover,
.cta-close__btn-secondary:focus {
	color: var(--color-white);
	border-bottom-color: rgba(255, 255, 255, 0.80);
}

/* ─── Closing CTA: homepage showcase variant ───────────────
   Scoped under .cta-close--home so the shared .cta-close*
   rules (also used by approach-cta, views-cta, about-cta,
   references-cta, projects-cta) are never redefined directly —
   this section is intentionally homepage-only. */
.cta-close--home {
	position: relative;
	background-color: var(--color-cream);
	padding: var(--space-xl) var(--space-md);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
}

/* full-bleed band: extends beyond .site's max-width to viewport edges,
   mirrors the .site-header::before technique used elsewhere in this file */
.cta-close--home::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.cta-close--home .cta-close__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-lg);
}

.cta-close--home .cta-close__headline {
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	color: var(--color-black);
}

.cta-close--home .cta-close__body {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-gray-500);
}

.cta-close--home .cta-close__btn-primary {
	background-color: var(--color-green-dark);
	color: var(--color-white);
	border-color: var(--color-green-dark);
}

.cta-close--home .cta-close__btn-primary:hover,
.cta-close--home .cta-close__btn-primary:focus {
	background-color: #12261d;
	border-color: #12261d;
	color: var(--color-white);
}

.cta-close__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.cta-close__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	text-align: left;
}

.cta-close--home .cta-close__actions {
	padding-top: 0;
	justify-content: flex-start;
}

/* Projects-page closing CTA — visual parity with .cta-close--home,
   duplicated under its own modifier rather than shared, so neither
   page's CTA can affect the other. Tracking/heading-id values stay
   page-specific in the markup; only the visual treatment is copied. */
.cta-close--projects {
	position: relative;
	background-color: var(--color-cream);
	padding: var(--space-xl) var(--space-md);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
}

.cta-close--projects::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.cta-close--projects .cta-close__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-lg);
}

.cta-close--projects .cta-close__headline {
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	color: var(--color-black);
}

.cta-close--projects .cta-close__body {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-gray-500);
}

.cta-close--projects .cta-close__btn-primary {
	background-color: var(--color-green-dark);
	color: var(--color-white);
	border-color: var(--color-green-dark);
}

.cta-close--projects .cta-close__btn-primary:hover,
.cta-close--projects .cta-close__btn-primary:focus {
	background-color: #12261d;
	border-color: #12261d;
	color: var(--color-white);
}

.cta-close--projects .cta-close__actions {
	padding-top: 0;
	justify-content: flex-start;
}

/* References-page closing CTA — visual parity with .cta-close--home
   and .cta-close--projects, duplicated under its own modifier rather
   than shared, so neither page's CTA can affect the others. */
.cta-close--references {
	position: relative;
	background-color: var(--color-cream);
	padding: var(--space-xl) var(--space-md);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
}

.cta-close--references::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.cta-close--references .cta-close__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-lg);
}

.cta-close--references .cta-close__headline {
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	color: var(--color-black);
}

.cta-close--references .cta-close__body {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-gray-500);
}

.cta-close--references .cta-close__btn-primary {
	background-color: var(--color-green-dark);
	color: var(--color-white);
	border-color: var(--color-green-dark);
}

.cta-close--references .cta-close__btn-primary:hover,
.cta-close--references .cta-close__btn-primary:focus {
	background-color: #12261d;
	border-color: #12261d;
	color: var(--color-white);
}

.cta-close--references .cta-close__actions {
	padding-top: 0;
	justify-content: flex-start;
}

/* About-page closing CTA — visual parity with .cta-close--projects
   and .cta-close--references, duplicated under its own modifier
   rather than shared, so no page's CTA can affect the others. */
.cta-close--about {
	position: relative;
	background-color: var(--color-cream);
	padding: var(--space-xl) var(--space-md);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
}

.cta-close--about::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.cta-close--about .cta-close__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-lg);
}

.cta-close--about .cta-close__headline {
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	color: var(--color-black);
}

.cta-close--about .cta-close__body {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-gray-500);
}

.cta-close--about .cta-close__btn-primary {
	background-color: var(--color-green-dark);
	color: var(--color-white);
	border-color: var(--color-green-dark);
}

.cta-close--about .cta-close__btn-primary:hover,
.cta-close--about .cta-close__btn-primary:focus {
	background-color: #12261d;
	border-color: #12261d;
	color: var(--color-white);
}

.cta-close--about .cta-close__actions {
	padding-top: 0;
	justify-content: flex-start;
}

/* About closing CTA — mobile (mirrors the shared cream-close 768px
   rules, duplicated here rather than added to the shared block) */
@media (max-width: 768px) {
	.cta-close--about {
		padding: var(--space-lg) var(--space-md);
		margin-left: 0;
		margin-right: 0;
	}

	.cta-close--about .cta-close__inner {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
}

/* Views-page closing CTA — visual parity with .cta-close--projects,
   --references, and --about, duplicated under its own modifier
   rather than shared, so no page's CTA can affect the others. */
.cta-close--views {
	position: relative;
	background-color: var(--color-cream);
	padding: var(--space-xl) var(--space-md);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
}

.cta-close--views::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.cta-close--views .cta-close__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-lg);
}

.cta-close--views .cta-close__headline {
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	color: var(--color-black);
}

.cta-close--views .cta-close__body {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-gray-500);
}

.cta-close--views .cta-close__btn-primary {
	background-color: var(--color-green-dark);
	color: var(--color-white);
	border-color: var(--color-green-dark);
}

.cta-close--views .cta-close__btn-primary:hover,
.cta-close--views .cta-close__btn-primary:focus {
	background-color: #12261d;
	border-color: #12261d;
	color: var(--color-white);
}

.cta-close--views .cta-close__actions {
	padding-top: 0;
	justify-content: flex-start;
}

/* Views closing CTA — mobile (mirrors the shared cream-close 768px
   rules, duplicated here rather than added to the shared block) */
@media (max-width: 768px) {
	.cta-close--views {
		padding: var(--space-lg) var(--space-md);
		margin-left: 0;
		margin-right: 0;
	}

	.cta-close--views .cta-close__inner {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
}

/* Article closing CTA — quiet copy-and-button cream band (no showcase
   card; articles are the quietest tier). Cream rules duplicated under
   the --article modifier per convention, never added to the shared
   .cta-close base. */
.cta-close--article {
	position: relative;
	background-color: var(--color-cream);
	padding: var(--space-xl) var(--space-md);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
}

.cta-close--article::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.cta-close--article .cta-close__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-md);
}

.cta-close--article .cta-close__copy {
	text-align: center;
	align-items: center;
}

.cta-close--article .cta-close__headline {
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	color: var(--color-black);
}

.cta-close--article .cta-close__body {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-gray-500);
	max-width: 52ch;
	margin-left: auto;
	margin-right: auto;
}

.cta-close--article .cta-close__btn-primary {
	background-color: var(--color-green-dark);
	color: var(--color-white);
	border-color: var(--color-green-dark);
}

.cta-close--article .cta-close__btn-primary:hover,
.cta-close--article .cta-close__btn-primary:focus {
	background-color: #12261d;
	border-color: #12261d;
	color: var(--color-white);
}

.cta-close--article .cta-close__actions {
	padding-top: 0;
	justify-content: center;
}

/* Article closing CTA — mobile (mirrors the shared cream-close 768px
   rules, duplicated here rather than added to the shared block) */
@media (max-width: 768px) {
	.cta-close--article {
		padding: var(--space-lg) var(--space-md);
		margin-left: 0;
		margin-right: 0;
	}

	.cta-close--article .cta-close__inner {
		align-items: center;
		gap: var(--space-md);
	}
}

.cta-close__model-card {
	max-width: 420px;
	margin: 0 auto;
	background-color: var(--color-white);
	border: 1px solid #E5E2DA;
	border-radius: 4px;
	padding: var(--space-sm);
}

.cta-close__model-card-label {
	margin: 0 0 var(--space-sm);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gray-500);
}

.cta-close__model-card-row {
	display: grid;
	grid-template-columns: 52px repeat(3, 1fr);
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0;
}

.cta-close__model-card-row:not(:first-child) {
	border-top: 1px solid #E5E2DA;
}

.cta-close__model-card-row--header {
	padding-top: 0;
}

.cta-close__model-card-row--header span {
	font-size: 0.625rem;
	font-weight: 600;
	color: var(--color-gray-500);
	text-align: center;
}

.cta-close__model-card-row--header span:not(:first-child):not(:last-child)::after {
	content: ' \2192';
	font-weight: 400;
}

.cta-close__model-card-row-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-green-dark);
}

.cta-close__model-card-cell {
	font-size: 0.8125rem;
	text-align: center;
}

.cta-close__model-card-cell--weak {
	color: var(--color-gray-500);
}

.cta-close__model-card-cell--mid {
	color: var(--color-green-dark);
	font-weight: 600;
}

.cta-close__model-card-cell--strong {
	color: #2F3432;
	font-weight: 700;
	font-size: 0.875rem;
}

.cta-close__model-card-strip {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid #E5E2DA;
	font-size: 0.6875rem;
	color: var(--color-gray-500);
}

.cta-close__model-card-strip-arrow {
	color: var(--color-gray-500);
	opacity: 0.6;
}

.cta-close__model-card-strip-output {
	color: var(--color-green-dark);
	font-weight: 700;
}

@media (max-width: 768px) {
	/* .site removes its own horizontal padding below this breakpoint
	   (see "Phone — global padding fix"), so the negative margins that
	   cancel .site's padding above this breakpoint must reset to 0 here
	   — otherwise they subtract from a box that no longer has padding
	   to cancel, pushing the section off-screen on both sides. */
	.cta-close--home,
	.cta-close--projects,
	.cta-close--references {
		padding: var(--space-lg) var(--space-md);
		margin-left: 0;
		margin-right: 0;
	}

	.cta-close--home .cta-close__inner,
	.cta-close--projects .cta-close__inner,
	.cta-close--references .cta-close__inner {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	/* keep the card flush left to match the stacked copy above it —
	   the desktop centering fix (margin: 0 auto) would otherwise float
	   the card mid-width on tablet-ish viewports within this breakpoint */
	.cta-close__model-card {
		max-width: none;
		margin: 0;
	}
}

/* ─── Site header ───────────────────────────────────────── */
.site-header {
	background-color: var(--color-green-dark);
	padding: 0 var(--space-md);
	position: sticky;
	top: 0;
	z-index: 100;
	/* escape .site's horizontal padding so background can extend full .site width */
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
}

/* full-bleed band: extends beyond .site's max-width to viewport edges */
.site-header::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-green-dark);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	z-index: -1;
}

.site-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	position: relative;
	z-index: 1;
}

.site-wordmark {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-white);
	text-decoration: none;
	text-transform: uppercase;
}

.site-wordmark:hover {
	color: var(--color-white);
}

.site-nav {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__link {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-gray-500);
	text-decoration: none;
	letter-spacing: 0.01em;
	transition: color 0.12s ease;
}

.site-nav__link:hover,
.site-nav__link:focus {
	color: var(--color-black);
}

.site-nav-toggle {
	display: none;
	align-items: center;
	gap: var(--space-xs);
	background: none;
	border: none;
	padding: var(--space-xs) 0;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-white);
}

.site-nav-toggle__bars {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 20px;
}

.site-nav-toggle__bar {
	display: block;
	height: 2px;
	width: 100%;
	background-color: var(--color-white);
}

/* ─── Approach thesis ─ How GTMSF Works ────────────────────────────────────
   Contained dark-green panel. Three zones:
   1. Full-width header
   2. Full-width milestone rail (.projects-proof-map* reused)
   3. System tray — shared outer border wraps both the Founders Choose card
      (left, 36fr) and the engagement arrows (right, 64fr). The card sits
      flush inside the tray without its own outer border; a warm-grey
      border-right divides card from arrows. Single ::before connector
      descends from the rail into the tray.
   All rules scoped to .approach-thesis*. */
.approach-thesis {
	background-color: var(--color-white);
	padding: var(--space-xl) var(--space-md);
}

.approach-thesis__inner {
	background-color: var(--color-green-dark);
	border-radius: 4px;
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-lg) var(--space-xl);
}

/* ― Zone 1: Full-width header ――――――――――――――――――――――――――――――――― */
.approach-thesis__header {
	margin-bottom: var(--space-lg);
}

.approach-thesis__kicker {
	margin: 0 0 var(--space-sm);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white-muted);
}

.approach-thesis__headline {
	margin: 0 0 var(--space-sm);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--color-white);
}

/* Subheadline: full desktop width, no ch constraint, wrap naturally */
.approach-thesis__body {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--color-white-muted);
	max-width: none;
}

/* ― Zone 2: Milestone rail (desktop only) ――――――――――――――――――――― */
.approach-thesis__rail {
	margin-bottom: 0;
}

/* ― Zone 3: System tray ─────────────────────────────────────────
   One shared outer border wraps both columns (Founders Choose card
   and engagement arrows). ::before creates a single connector line
   descending from the rail. overflow: visible so the connector
   renders above the tray. gap: 0 so card and arrows sit flush. */
.approach-thesis__bottom {
	position: relative;
	display: grid;
	grid-template-columns: 36fr 64fr;
	align-items: start;
	gap: 0;
	margin-top: 2rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 2px;
	overflow: visible;
}

.approach-thesis__bottom::before {
	content: '';
	position: absolute;
	bottom: calc(100% + 2px);
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 26px;
	background: rgba(255, 255, 255, 0.18);
}

/* Founders Choose card — cream/white inside tray. No outer border
   (tray handles enclosure); right edge divides card from arrows. */
.approach-thesis__scope-card {
	background: #F7F7F5;
	border: none;
	border-right: 1px solid #E5E2DA;
	border-radius: 0;
}

.approach-thesis__scope-heading {
	margin: 0;
	padding: 0.625rem 1rem;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(27, 58, 47, 0.55);
	border-bottom: 1px solid #E5E2DA;
}

.approach-thesis__scope-row {
	display: flex;
	gap: 0.75rem;
	padding: 0.625rem 1rem;
	font-size: 0.8rem;
	line-height: 1.45;
	border-bottom: 1px solid #E5E2DA;
	color: var(--color-green-dark);
}

.approach-thesis__scope-row:last-child {
	border-bottom: none;
}

.approach-thesis__scope-key {
	font-weight: 700;
	flex-shrink: 0;
	min-width: 5.5rem;
}

.approach-thesis__scope-val {
	color: rgba(27, 58, 47, 0.70);
}

/* Engagement arrows — right column of tray. No separate outer border
   (tray handles it). Dark-green interior matches panel background. */
.approach-thesis__layer {
	border: none;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.approach-thesis__bar {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.approach-thesis__bar-header {
	display: flex;
	align-items: baseline;
	gap: 1rem;
}

.approach-thesis__bar-tag {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-white);
	flex-shrink: 0;
}

.approach-thesis__bar-desc {
	font-size: 0.8125rem;
	color: var(--color-white-muted);
}

/* Thin engagement arrows — no ghost track after arrowhead */
.approach-thesis__bar-track {
	position: relative;
	height: 3px;
	background-color: transparent;
	overflow: visible;
	margin-right: 20px;
}

.approach-thesis__bar-fill {
	position: relative;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.85);
	border-radius: 1px;
	overflow: visible;
}

.approach-thesis__bar-fill::after {
	content: '';
	position: absolute;
	right: -11px;
	top: 50%;
	transform: translateY(-50%);
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-left: 11px solid rgba(255, 255, 255, 0.85);
}

/* ─── Approach thesis — mobile ───────────────────────────────────── */
@media (max-width: 768px) {
	.approach-thesis__inner {
		padding: var(--space-lg) var(--space-md);
	}

	.approach-thesis__header {
		margin-bottom: var(--space-md);
	}

	.approach-thesis__rail {
		display: none;
	}

	/* Tray collapses to single column: card above, arrows below */
	.approach-thesis__bottom {
		grid-template-columns: 1fr;
		margin-top: var(--space-md);
	}

	.approach-thesis__bottom::before {
		display: none;
	}

	/* Right-side divider becomes bottom divider when stacked */
	.approach-thesis__scope-card {
		border-right: none;
		border-bottom: 1px solid #E5E2DA;
	}

	.approach-thesis__bar-header {
		flex-direction: column;
		gap: 0.125rem;
		align-items: flex-start;
	}
}

/* ─── Approach products ─ Engagement selector ───────────────────────────
   Three-tab selector: Clarity / Traction / Conviction.
   Progressive enhancement via .js-enhanced added by main.js.
   Without JS: all panels visible stacked, both support texts show.
   With JS: only active tab panel shown; active support text shown.
   Deliverables border reuses the .approach-service__right convention. */
.approach-products {
	background-color: var(--color-white);
	padding: var(--space-lg) var(--space-md) var(--space-xl);
}

.approach-products__inner {
	max-width: 1200px;
	margin: 0 auto;
}

/* Tab navigation */
.approach-products__tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--color-gray-200);
	margin-bottom: var(--space-lg);
	overflow-x: auto;
	scrollbar-width: none; /* Firefox — hides scrollbar track/thumb */
}

.approach-products__tabs::-webkit-scrollbar {
	display: none; /* Chrome / Safari — removes the scrollbar artifact */
}

.approach-products__tab {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: var(--space-sm) var(--space-md);
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-gray-500);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.12s ease;
}

.approach-products__tab:hover {
	color: var(--color-black);
}

.approach-products__tab.is-active {
	color: var(--color-black);
	border-bottom-color: var(--color-green-dark);
}

.approach-products__tab-duration {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-gray-500);
}

/* Product panels */
.approach-products__panel + .approach-products__panel {
	border-top: 1px solid var(--color-gray-200);
	margin-top: var(--space-2xl);
	padding-top: var(--space-2xl);
}

.approach-products.js-enhanced .approach-products__panel[hidden] {
	display: none;
}

.approach-products.js-enhanced .approach-products__panel + .approach-products__panel {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

.approach-products__panel-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: start;
}

/* Panel left */
.approach-products__panel-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: var(--space-sm);
}

.approach-products__duration {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-green-dark);
	border: 1px solid var(--color-green-dark);
	border-radius: 2px;
	padding: 0.125rem 0.5rem;
	flex-shrink: 0;
}

.approach-products__headline {
	margin: 0;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--color-black);
}

.approach-products__desc {
	margin: 0 0 var(--space-md);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-gray-500);
	max-width: 48ch;
}

/* Support toggle */
.approach-products__support {
	margin: 0 0 var(--space-md);
	padding-top: var(--space-md);
}

.approach-products__support-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
	margin-bottom: 0.5rem;
}

.approach-products__support-controls {
	display: flex;
	gap: 0;
	margin-bottom: var(--space-sm);
}

.approach-products__support-btn {
	padding: 0.375rem 0.875rem;
	background: none;
	border: 1px solid var(--color-gray-200);
	border-right-width: 0;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-gray-500);
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.approach-products__support-btn:first-child { border-radius: 2px 0 0 2px; }
.approach-products__support-btn:last-child  { border-right-width: 1px; border-radius: 0 2px 2px 0; }
.approach-products__support-btn:hover       { color: var(--color-black); }

.approach-products__support-btn.is-active {
	background-color: var(--color-green-dark);
	color: var(--color-white);
	border-color: var(--color-green-dark);
}

.approach-products__support-text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #4b5563;
}

/* No-JS: both support texts visible with a dashed separator */
.approach-products__support-text + .approach-products__support-text {
	margin-top: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px dashed var(--color-gray-200);
}

.approach-products.js-enhanced .approach-products__support-text[hidden] {
	display: none;
}

.approach-products.js-enhanced .approach-products__support-text + .approach-products__support-text {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* Fit section */
.approach-products__fit {
	margin: 0 0 var(--space-sm);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-gray-200);
}

.approach-products__fit-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
	margin-bottom: 0.375rem;
}

.approach-products__fit-copy {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #4b5563;
}

/* CTA */
.approach-products__cta {
	display: inline-flex;
	align-items: center;
	background-color: var(--color-green-dark);
	color: #ffffff;
	border: 1px solid var(--color-green-dark);
	padding: 0.8125rem 1.875rem;
	border-radius: 12px;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 0.15s ease;
	margin-bottom: var(--space-lg);
}

.approach-products__cta:hover,
.approach-products__cta:focus {
	background-color: #12261d;
	border-color: #12261d;
}

/* Panel right — deliverables (matches .approach-service__right convention) */
.approach-products__panel-right {
	border-left: 3px solid var(--color-green-dark);
	padding-left: var(--space-lg);
}

.approach-products__deliverables-label {
	margin: 0 0 var(--space-md);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gray-500);
}

.approach-products__deliverables {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-gray-200);
}

.approach-products__deliverable {
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--color-gray-200);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-black);
}

/* Responsive */
@media (max-width: 900px) {
	.approach-products__panel-inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.approach-products__panel-right {
		border-left: none;
		border-top: 3px solid var(--color-green-dark);
		padding-left: 0;
		padding-top: var(--space-md);
	}

	.approach-products__desc {
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.approach-products__tab {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.125rem;
		padding: 0.5rem 0.875rem;
	}

	.approach-products__tab-duration {
		font-size: 0.6875rem;
	}
}

/* ─── Approach benefits ─────────────────────────────────── */
.approach-benefits {
	position: relative;
	background-color: var(--color-cream);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
	padding: var(--space-xl) var(--space-md);
}

.approach-benefits::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.approach-benefits__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

.approach-benefits__header {
	margin-bottom: var(--space-lg);
}

.approach-benefits__headline {
	margin: 0 0 var(--space-sm);
	font-size: clamp(1.5rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
}

.approach-benefits__sub {
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-gray-500);
	max-width: 72ch;
}

/* Items row */
.approach-benefits__items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.approach-benefits__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.approach-benefits__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background-color: var(--color-green-dark);
	border-radius: 10px;
	color: #ffffff;
	margin: 0 auto 0.75rem;
	flex-shrink: 0;
}

.approach-benefits__line {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-black);
}

.approach-benefits__verb {
	font-weight: 700;
}

.approach-benefits__skip-val {
	text-decoration: line-through;
	text-decoration-color: var(--color-gray-500);
	text-decoration-thickness: 1px;
}

/* Mobile */
@media (max-width: 600px) {
	.approach-benefits__items {
		grid-template-columns: 1fr;
		gap: var(--space-md);
		max-width: 100%;
	}
}

/* ─── Approach stage fit ─────────────────────────────────── */
.approach-fit {
	background-color: var(--color-gray-50);
	padding: var(--space-lg) var(--space-md);
}

.approach-fit__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.approach-fit__headline {
	margin: var(--space-sm) 0 var(--space-md);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
}

/* Stage cards */
.approach-fit__stages {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
	margin-bottom: var(--space-md);
}

.approach-fit__stage {
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-200);
	padding: var(--space-sm);
}

.approach-fit__stage-label {
	margin: 0 0 var(--space-xs);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.approach-fit__stage-desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #4b5563;
}

/* Compact benefit tagline */
.approach-fit__tagline {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-gray-500);
}

/* ─── Approach stage fit — mobile ───────────────────────── */
@media (max-width: 768px) {
	.approach-fit__stages {
		grid-template-columns: 1fr;
	}
}

/* ─── Approach proof strip ──────────────────────────────── */
.approach-proof {
	background-color: var(--color-green-dark);
	padding: var(--space-md) var(--space-md);
}

.approach-proof__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.approach-proof__label {
	margin: 0 0 var(--space-xs);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white-muted);
}

.approach-proof__headline {
	margin: 0 0 var(--space-md);
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-white);
}

.approach-proof__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	border-top: 1px solid var(--color-green-dark-rule);
}

.approach-proof__point {
	padding-top: var(--space-sm);
}

.approach-proof__point-title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-white);
}

.approach-proof__supporting {
	margin: var(--space-sm) 0 0;
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	max-width: 60ch;
}

/* ─── Approach proof — tablet and mobile ────────────────── */
@media (max-width: 900px) {
	.approach-proof__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.approach-proof__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}
}

/* ─── Views featured article ─────────────────────────────── */
.views-featured {
	background-color: var(--color-white);
	padding: var(--space-xl) var(--space-md);
}

.views-featured__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

/* Left column */
.views-featured__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.views-featured__title {
	margin: 0 0 var(--space-sm);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
}

.views-featured__desc {
	margin: 0 0 var(--space-md);
	font-size: 1rem;
	line-height: 1.7;
	color: #4b5563;
	max-width: 48ch;
}

.views-featured__ctas {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.views-featured__cta {
	background-color: var(--color-green-dark);
	color: var(--color-white);
	border-color: var(--color-green-dark);
}

.views-featured__cta:hover,
.views-featured__cta:focus {
	background-color: #12261d;
	border-color: #12261d;
	color: var(--color-white);
}

/* Right column — coded article proof object: the featured
   article's core framework as a compact model card (dark-green
   header band, framework tiles, ruled closing strip). */
/* Featured artifact — the flagship article's proof table, cloned
   bare (no card shell), matching the article's own table treatment. */
.views-featured__table {
	max-width: 520px;
	margin-left: auto;
	width: 100%;
}

.views-featured__table .wp-block-table {
	margin: 0;
}

.views-featured__table table {
	font-size: 0.8125rem;
	line-height: 1.45;
	width: 100%;
	border-collapse: collapse;
}

/* WP only enqueues table-block CSS when the page's own content holds a
   table block; this template-echoed clone needs the borders restated. */
.views-featured__table th,
.views-featured__table td {
	border: 1px solid var(--color-black);
	padding: 0.5em 0.75em;
	text-align: left;
}

.views-featured__table th {
	font-weight: 700;
	text-align: center;
}

.views-featured__model {
	max-width: 440px;
	margin-left: auto;
	width: 100%;
	background-color: var(--color-white);
	border: 1px solid #E5E2DA;
	border-radius: 6px;
	overflow: hidden;
}

.views-featured__model-label {
	margin: 0;
	background-color: var(--color-green-dark);
	padding: 0.75rem 1.25rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	text-align: center;
}

.views-featured__model-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	padding: 1rem 1.25rem;
}

.views-featured__model-item {
	background-color: #F7F7F5;
	border: 1px solid #E5E2DA;
	border-left: 2px solid var(--color-green-dark);
	border-radius: 3px;
	padding: 0.5625rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: #2F3432;
}

.views-featured__model-item--wide {
	grid-column: 1 / -1;
}

.views-featured__model-strip {
	margin: 0;
	padding: 0.625rem 1.25rem;
	border-top: 1px solid #E5E2DA;
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--color-gray-500);
	text-align: center;
}

/* ─── Views featured — mobile ────────────────────────────── */
@media (max-width: 900px) {
	.views-featured__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.views-featured__desc {
		max-width: 100%;
	}

	.views-featured__model {
		max-width: none;
		margin-left: 0;
	}
}

/* ─── Contact close / form area ──────────────────────────── */
.contact-close {
	background-color: var(--color-green-dark);
	padding: var(--space-2xl) var(--space-md);
}

.contact-close__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.contact-close__label {
	margin: 0 0 var(--space-xs);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white-muted);
}

.contact-close__headline {
	margin: 0 0 var(--space-md);
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--color-white);
	max-width: 44ch;
}

.contact-close__supporting {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.80);
	max-width: 58ch;
}

/* Future-ready form area */
.contact-close__form-area {
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-green-dark-rule);
}

.contact-close__instruction {
	margin: 0 0 var(--space-md);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.80);
}

.contact-close__btn-primary {
	display: inline-block;
	background-color: var(--color-white);
	color: var(--color-green-dark);
	border: 2px solid var(--color-white);
	font-weight: 700;
	padding: 0.625rem 1.25rem;
}

.contact-close__btn-primary:hover,
.contact-close__btn-primary:focus {
	background-color: transparent;
	color: var(--color-white);
}

.contact-close__expectation {
	margin: var(--space-md) 0 0;
	font-size: 0.875rem;
	font-style: italic;
	color: rgba(255, 255, 255, 0.68);
}

/* Secondary CTA */
.contact-close__secondary {
	display: inline-block;
	margin-top: var(--space-lg);
	font-size: 0.9375rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.80);
	text-decoration: none;
	border-bottom: 1.5px solid rgba(255, 255, 255, 0.40);
	padding-bottom: 2px;
	transition: color 0.12s ease, border-bottom-color 0.12s ease;
}

.contact-close__secondary:hover,
.contact-close__secondary:focus {
	color: var(--color-white);
	border-bottom-color: rgba(255, 255, 255, 0.80);
}

/* ─── Contact good fit / not yet fit ─────────────────────── */
.contact-fit {
	background-color: var(--color-white);
	padding: var(--space-2xl) var(--space-md);
	border-top: 1px solid var(--color-gray-200);
}

.contact-fit__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.contact-fit__header {
	margin-bottom: var(--space-xl);
}

.contact-fit__headline {
	margin: var(--space-sm) 0 var(--space-md);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
	max-width: 52ch;
}

.contact-fit__supporting {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-gray-500);
	max-width: 60ch;
}

/* Two-column comparison */
.contact-fit__columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-xl);
	border-top: 1px solid var(--color-gray-200);
	padding-top: var(--space-lg);
	margin-bottom: var(--space-xl);
}

.contact-fit__col-label {
	margin: 0 0 var(--space-sm);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.contact-fit__col-label--good {
	color: var(--color-green-dark);
}

.contact-fit__col-label--muted {
	color: var(--color-gray-500);
}

.contact-fit__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.contact-fit__item {
	padding: 0.75rem 0;
	border-top: 1px solid var(--color-gray-200);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.contact-fit__item--good {
	color: var(--color-black);
}

.contact-fit__item--muted {
	color: #4b5563;
}

.contact-fit__closing {
	margin: 0 0 var(--space-md);
	font-size: 1rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--color-gray-500);
	max-width: 52ch;
}

.contact-fit__cta {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 2px;
}

.contact-fit__cta:hover,
.contact-fit__cta:focus {
	color: var(--color-gray-500);
	border-bottom-color: var(--color-gray-500);
}

/* ─── Contact fit — mobile ───────────────────────────────── */
@media (max-width: 768px) {
	.contact-fit__columns {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.contact-fit__supporting {
		max-width: 100%;
	}
}

/* ─── Contact what to share ──────────────────────────────── */
.contact-share {
	background-color: var(--color-gray-50);
	padding: var(--space-2xl) var(--space-md);
}

.contact-share__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: start;
}

/* Left column */
.contact-share__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.contact-share__headline {
	margin: var(--space-sm) 0 var(--space-md);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
}

.contact-share__supporting {
	margin: 0 0 var(--space-md);
	font-size: 1rem;
	line-height: 1.7;
	color: #4b5563;
	max-width: 44ch;
}

.contact-share__closing {
	margin: 0 0 var(--space-lg);
	font-size: 1rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--color-black);
	font-weight: 500;
	max-width: 40ch;
}

.contact-share__cta {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 2px;
}

.contact-share__cta:hover,
.contact-share__cta:focus {
	color: var(--color-gray-500);
	border-bottom-color: var(--color-gray-500);
}

/* Right column */
.contact-share__right {
	border-left: 3px solid var(--color-green-dark);
	padding-left: var(--space-lg);
}

.contact-share__right-label {
	margin: 0 0 var(--space-md);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gray-500);
}

.contact-share__item {
	margin-bottom: var(--space-md);
}

.contact-share__item:last-child {
	margin-bottom: 0;
}

.contact-share__item-label {
	margin: 0 0 0.25rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.contact-share__item-desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #4b5563;
}

/* ─── Contact share — mobile ─────────────────────────────── */
@media (max-width: 900px) {
	.contact-share__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.contact-share__supporting,
	.contact-share__closing {
		max-width: 100%;
	}

	.contact-share__right {
		border-left: none;
		border-top: 3px solid var(--color-green-dark);
		padding-left: 0;
		padding-top: var(--space-md);
	}
}

/* ─── Views article index ────────────────────────────────── */
.views-index {
	background-color: var(--color-white);
	padding: var(--space-2xl) var(--space-md);
}

.views-index__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.views-index__header {
	margin-bottom: var(--space-lg);
}

.views-index__framing {
	margin: var(--space-xs) 0 0;
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--color-black);
}

/* Two-column list */
.views-index__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-xl);
}

.views-index__col {
	display: flex;
	flex-direction: column;
}

.views-index__entry {
	padding: 1.25rem 0;
	border-top: 1px solid var(--color-gray-200);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.views-index__title {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.35;
	color: var(--color-black);
	text-decoration: none;
}

.views-index__title:hover,
.views-index__title:focus {
	color: var(--color-green-dark);
}

.views-index__title:hover,
.views-index__title:focus {
	color: var(--color-green-dark);
}

.views-index__category {
	margin: 0 0 0.25rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.views-index__tags {
	margin: 0 0 var(--space-xs);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--color-gray-500);
}

.views-index__desc {
	margin: 0 0 var(--space-xs);
	font-size: 0.875rem;
	line-height: 1.55;
	color: #4b5563;
}

.views-index__read {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-black);
	text-decoration: none;
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 1px;
}

.views-index__read:hover,
.views-index__read:focus {
	color: var(--color-green-dark);
	border-bottom-color: var(--color-green-dark);
}

/* ─── Views index — mobile ───────────────────────────────── */
@media (max-width: 768px) {
	.views-index__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* ─── Views category / topic navigation ─────────────────── */
.views-nav {
	background-color: var(--color-white);
	padding: var(--space-xl) var(--space-md);
	border-top: 1px solid var(--color-gray-200);
}

.views-nav__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.views-nav__framing {
	margin: var(--space-xs) 0 var(--space-lg);
	font-size: 1rem;
	color: var(--color-gray-500);
}

.views-nav__strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	border-top: 1px solid var(--color-gray-200);
}

.views-nav__topic {
	padding-top: var(--space-sm);
}

.views-nav__topic-name {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-black);
	text-decoration: none;
	border-bottom: 1.5px solid transparent;
	padding-bottom: 1px;
	transition: border-bottom-color 0.12s ease, color 0.12s ease;
}

.views-nav__topic-name:hover,
.views-nav__topic-name:focus {
	color: var(--color-green-dark);
	border-bottom-color: var(--color-green-dark);
}

.views-nav__topic-desc {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: #4b5563;
}

/* ─── Views nav — responsive ─────────────────────────────── */
@media (max-width: 900px) {
	.views-nav__strip {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.views-nav__strip {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}
}

/* ─── About proof / cross-link strip ─────────────────────── */
.about-proof {
	background-color: var(--color-white);
	padding: var(--space-xl) var(--space-md);
	border-top: 1px solid var(--color-gray-200);
}

.about-proof__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.about-proof__headline {
	margin: var(--space-sm) 0 var(--space-lg);
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
	max-width: 52ch;
}

.about-proof__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	border-top: 1px solid var(--color-gray-200);
	margin-bottom: var(--space-lg);
}

.about-proof__pathway {
	border-top: 1px solid var(--color-gray-200);
	padding-top: var(--space-sm);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.about-proof__pathway-label {
	margin: 0 0 0.375rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.about-proof__pathway-desc {
	margin: 0 0 var(--space-sm);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #4b5563;
	flex: 1;
}

.about-proof__pathway-cta {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-black);
	text-decoration: none;
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 2px;
}

.about-proof__pathway-cta:hover,
.about-proof__pathway-cta:focus {
	color: var(--color-gray-500);
	border-bottom-color: var(--color-gray-500);
}

.about-proof__supporting {
	margin: 0;
	font-size: 0.9375rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--color-gray-500);
	max-width: 60ch;
}

/* ─── About proof — mobile ───────────────────────────────── */
@media (max-width: 768px) {
	.about-proof__grid {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
	}
}

/* ─── About human layer ──────────────────────────────────── */
.about-human {
	background-color: var(--color-gray-50);
	padding: var(--space-xl) var(--space-md);
}

.about-human__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.about-human__headline {
	margin: var(--space-sm) 0 var(--space-lg);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
	max-width: 44ch;
}

.about-human__para {
	margin: 0 0 var(--space-md);
	font-size: 1rem;
	line-height: 1.75;
	max-width: 60ch;
}

.about-human__para--lead {
	color: #4b5563;
}

.about-human__para--close {
	color: var(--color-black);
	font-weight: 500;
}

.about-human__cta {
	display: inline-block;
	margin-top: var(--space-sm);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 2px;
}

.about-human__cta:hover,
.about-human__cta:focus {
	color: var(--color-gray-500);
	border-bottom-color: var(--color-gray-500);
}

/* ─── About how we work / values ────────────────────────── */
.about-values {
	background-color: var(--color-white);
	padding: var(--space-2xl) var(--space-md);
	border-top: 1px solid var(--color-gray-200);
}

.about-values__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: start;
}

/* Left column */
.about-values__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.about-values__headline {
	margin: var(--space-sm) 0 var(--space-md);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
}

.about-values__supporting {
	margin: 0 0 var(--space-md);
	font-size: 1rem;
	line-height: 1.7;
	color: #4b5563;
	max-width: 46ch;
}

.about-values__closing {
	margin: 0 0 var(--space-lg);
	font-size: 1rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--color-black);
	font-weight: 500;
}

.about-values__cta {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 2px;
}

.about-values__cta:hover,
.about-values__cta:focus {
	color: var(--color-gray-500);
	border-bottom-color: var(--color-gray-500);
}

/* Right column */
.about-values__right {
	border-left: 3px solid var(--color-green-dark);
	padding-left: var(--space-lg);
}

.about-values__right-label {
	margin: 0 0 var(--space-md);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gray-500);
}

.about-values__principles {
	border-top: 1px solid var(--color-gray-200);
}

.about-values__principle {
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--color-gray-200);
}

.about-values__principle:last-child {
	border-bottom: none;
}

.about-values__principle-name {
	margin: 0 0 0.25rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.about-values__principle-desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-black);
}

/* ─── About values — mobile ──────────────────────────────── */
@media (max-width: 900px) {
	.about-values__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.about-values__supporting {
		max-width: 100%;
	}

	.about-values__right {
		border-left: none;
		border-top: 3px solid var(--color-green-dark);
		padding-left: 0;
		padding-top: var(--space-md);
	}
}

/* ─── About San Francisco GTM lens ──────────────────────── */
.about-sf {
	background-color: var(--color-gray-50);
	padding: var(--space-xl) var(--space-md);
}

.about-sf__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.about-sf__headline {
	margin: var(--space-sm) 0 var(--space-md);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
	max-width: 48ch;
}

.about-sf__supporting {
	margin: 0 0 var(--space-lg);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-gray-500);
	max-width: 58ch;
}

/* 2×2 lens grid */
.about-sf__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
	border-top: 1px solid var(--color-gray-200);
	margin-bottom: var(--space-lg);
}

.about-sf__lens {
	border-top: 1px solid var(--color-gray-200);
	padding-top: var(--space-sm);
}

.about-sf__lens-label {
	margin: 0 0 0.375rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.about-sf__lens-desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #4b5563;
}

.about-sf__closing {
	margin: 0 0 var(--space-md);
	font-size: 1rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--color-gray-500);
	max-width: 56ch;
}

.about-sf__cta {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 2px;
}

.about-sf__cta:hover,
.about-sf__cta:focus {
	color: var(--color-gray-500);
	border-bottom-color: var(--color-gray-500);
}

/* ─── About SF lens — mobile ─────────────────────────────── */
@media (max-width: 768px) {
	.about-sf__grid {
		grid-template-columns: 1fr;
	}

	.about-sf__supporting {
		max-width: 100%;
	}
}

/* ─── About full-stack revenue engineering ───────────────── */
.about-engineering {
	background-color: var(--color-white);
	padding: var(--space-xl) var(--space-md);
	border-top: 1px solid var(--color-gray-200);
}

.about-engineering__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.about-engineering__headline {
	margin: var(--space-sm) 0 var(--space-md);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
	max-width: 48ch;
}

.about-engineering__supporting {
	margin: 0 0 var(--space-lg);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-gray-500);
	max-width: 58ch;
}

/* System strip */
.about-engineering__strip {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-lg);
	border-top: 1px solid var(--color-gray-200);
	margin-bottom: var(--space-lg);
}

.about-engineering__element {
	padding-top: var(--space-sm);
}

.about-engineering__element-name {
	margin: 0 0 0.375rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.about-engineering__element-desc {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: #4b5563;
}

.about-engineering__closing {
	margin: 0 0 var(--space-md);
	font-size: 1rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--color-gray-500);
	max-width: 52ch;
}

.about-engineering__cta {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 2px;
}

.about-engineering__cta:hover,
.about-engineering__cta:focus {
	color: var(--color-gray-500);
	border-bottom-color: var(--color-gray-500);
}

/* ─── About engineering — responsive ────────────────────── */
@media (max-width: 900px) {
	.about-engineering__strip {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.about-engineering__strip {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.about-engineering__supporting {
		max-width: 100%;
	}
}

/* ─── About operator story ───────────────────────────────── */
.about-story {
	background-color: var(--color-gray-50);
	padding: var(--space-xl) var(--space-md);
}

.about-story__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.about-story__headline {
	margin: var(--space-sm) 0 var(--space-lg);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
	max-width: 48ch;
}

.about-story__para {
	margin: 0 0 var(--space-md);
	font-size: 1rem;
	line-height: 1.75;
	color: #4b5563;
	max-width: 60ch;
}

.about-story__para:last-of-type {
	margin-bottom: 0;
}

.about-story__divider {
	border-top: 1px solid var(--color-gray-200);
	margin: var(--space-lg) 0;
}

/* Proof summary */
.about-story__proof {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	margin-bottom: var(--space-lg);
}

.about-story__proof-label {
	margin: 0 0 0.375rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.about-story__proof-desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #4b5563;
}

.about-story__cta {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 2px;
}

.about-story__cta:hover,
.about-story__cta:focus {
	color: var(--color-gray-500);
	border-bottom-color: var(--color-gray-500);
}

/* ─── About story — mobile ───────────────────────────────── */
@media (max-width: 768px) {
	.about-story__proof {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.about-story__para {
		max-width: 100%;
	}
}

/* ─── Approach service module ───────────────────────────── */
.approach-service {
	background-color: var(--color-gray-50);
	padding: var(--space-2xl) var(--space-md);
	border-top: 1px solid var(--color-gray-200);
}

.approach-service__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: start;
}

/* Left column */
.approach-service__headline {
	margin: var(--space-sm) 0 var(--space-md);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--color-black);
}

.approach-service__subheadline {
	margin: 0 0 var(--space-md);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-gray-500);
	max-width: 48ch;
}

.approach-service__body {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: #4b5563;
	max-width: 46ch;
}

.approach-service__fit {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-gray-200);
}

.approach-service__fit-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
	margin-bottom: 0.375rem;
}

.approach-service__fit-copy {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #4b5563;
}

.approach-service__cta {
	display: inline-block;
	margin-top: var(--space-lg);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 2px;
}

.approach-service__cta:hover,
.approach-service__cta:focus {
	color: var(--color-gray-500);
	border-bottom-color: var(--color-gray-500);
}

/* Right column */
.approach-service__right {
	border-left: 3px solid var(--color-green-dark);
	padding-left: var(--space-lg);
}

.approach-service__deliverables-label {
	margin: 0 0 var(--space-md);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gray-500);
}

.approach-service__deliverables {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-gray-200);
}

.approach-service__deliverable {
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-black);
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--color-gray-200);
}

.approach-service--alt {
	background-color: var(--color-white);
}

/* ─── Approach service — tablet and mobile ──────────────── */
@media (max-width: 900px) {
	.approach-service__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.approach-service__subheadline,
	.approach-service__body {
		max-width: 100%;
	}

	.approach-service__right {
		border-left: none;
		border-top: 3px solid var(--color-green-dark);
		padding-left: 0;
		padding-top: var(--space-md);
	}
}

/* ─── References Relationship Intelligence module ───────────
   Modeled on the Projects AI-era module's editorial shell and
   stat-pair pattern (.project / .project-ai-stats), but under its
   own selectors entirely — does not extend or share .project* or
   .project-ai-*, so neither page can affect the other. */
.ref-intelligence {
	background-color: var(--color-white);
	padding: var(--space-2xl) var(--space-md);
}

.ref-intelligence__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.ref-intelligence__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ref-intelligence__headline {
	margin: var(--space-sm) 0 var(--space-md);
	font-size: clamp(1.375rem, 3.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--color-black);
}

.ref-intelligence__narrative {
	margin: 0 0 var(--space-lg);
	font-size: 1rem;
	line-height: 1.7;
	color: #4b5563;
	max-width: 52ch;
}

.ref-intelligence__cta {
	display: inline-flex;
	align-items: center;
	background-color: var(--color-green-dark);
	color: #ffffff;
	border: 1px solid var(--color-green-dark);
	padding: 0.8125rem 1.875rem;
	border-radius: 12px;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 0.15s ease;
	align-self: flex-start;
}

.ref-intelligence__cta:hover,
.ref-intelligence__cta:focus {
	background-color: #12261d;
	border-color: #12261d;
}

.ref-intelligence__right {
	padding-left: var(--space-lg);
}

.ref-intelligence-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
	margin: 0 0 var(--space-lg);
}

.ref-intelligence-stats__item {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.ref-intelligence-stats__number {
	display: block;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: #2F3432;
}

.ref-intelligence-stats__text {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--color-gray-500);
}

.ref-intelligence-stats__source {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-gray-500);
}

.ref-intelligence-matrix__headline {
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--color-black);
	margin: 0 0 1rem;
	padding-left: calc(32px + 0.625rem);
	text-align: center;
}

/* 2x2 relationship-leverage matrix — a real teaching graphic, not
   decoration: every label and quadrant is genuine readable text,
   so nothing here uses role="img" or aria-hidden the way the purely
   illustrative hero collages do. */
.ref-intelligence-matrix {
	display: grid;
	grid-template-columns: 32px 1fr;
	grid-template-rows: 1fr auto;
	grid-template-areas:
		"yaxis grid"
		"empty xaxis";
	gap: 0.625rem;
}

.ref-intelligence-matrix__y-axis {
	grid-area: yaxis;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Pin "High" to the top of the y-axis column; the label centers via flex */
.ref-intelligence-matrix__y-axis .ref-intelligence-matrix__axis-end {
	position: absolute;
	top: 0.25rem;
	left: 50%;
	transform: translateX(-50%);
}

.ref-intelligence-matrix__y-axis .ref-intelligence-matrix__axis-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.ref-intelligence-matrix__grid {
	grid-area: grid;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 0.625rem;
	aspect-ratio: 1.3 / 1;
}

.ref-intelligence-matrix__x-axis {
	grid-area: xaxis;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
}

/* Shift the bottom-left "Low" label to the y-axis origin (under the
   y-axis column, not under the grid's left edge). position:relative
   moves the visual rendering without affecting the flex layout, so
   RELATIONSHIP LEVERAGE stays centered under the grid and the
   right-side High stays flush with the grid's right edge. */
.ref-intelligence-matrix__x-axis .ref-intelligence-matrix__axis-end:first-child {
	position: relative;
	left: calc(-32px - 0.625rem);
}

.ref-intelligence-matrix__axis-label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-gray-500);
	white-space: nowrap;
}

.ref-intelligence-matrix__axis-end {
	font-size: 0.625rem;
	font-weight: 500;
	color: var(--color-gray-500);
}

.ref-intelligence-matrix__cell {
	background-color: var(--color-gray-50);
	border: 1px solid var(--color-gray-200);
	border-radius: 4px;
	padding: 0.875rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	justify-content: center;
}

.ref-intelligence-matrix__cell--featured {
	background-color: var(--color-green-dark);
	border-color: var(--color-green-dark);
}

.ref-intelligence-matrix__cell--featured .ref-intelligence-matrix__cell-name,
.ref-intelligence-matrix__cell--featured .ref-intelligence-matrix__cell-desc {
	color: var(--color-white);
}

.ref-intelligence-matrix__cell-name {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-black);
	margin: 0;
}

.ref-intelligence-matrix__cell-desc {
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--color-gray-500);
	margin: 0;
}

/* ─── References Relationship Intelligence — mobile ─────────── */
@media (max-width: 768px) {
	.ref-intelligence__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.ref-intelligence__right {
		padding-left: 0;
	}

	.ref-intelligence-matrix__grid {
		aspect-ratio: 0.9 / 1;
	}

	.ref-intelligence-matrix__cell {
		padding: 0.5rem 0.625rem;
	}

	.ref-intelligence-matrix__cell-name {
		font-size: 0.8125rem;
	}

	.ref-intelligence-matrix__cell-desc {
		font-size: 0.6875rem;
	}
}

/* ─── References Approach teaser ────────────────────────────
   Adapts the Projects Approach bridge (dark-green inner panel,
   engage-table, proof-map) for the References page. Outer shell
   uses .ref-approach* to keep Projects and References isolated.
   Engagement table and proof-map reuse .projects-engage-table*
   and .projects-proof-map* — no new CSS needed for those. */
.ref-approach {
	background-color: var(--color-white);
	padding: var(--space-2xl) 0;
}

.ref-approach__inner {
	background-color: var(--color-green-dark);
	padding: var(--space-xl);
}

.ref-approach__top {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 3rem;
	align-items: center;
	margin-bottom: var(--space-md);
}

.ref-approach__copy {
	display: flex;
	flex-direction: column;
}

.ref-approach__kicker {
	margin: 0 0 var(--space-sm);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white-muted);
}

.ref-approach__headline {
	margin: 0 0 var(--space-sm);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-white);
}

.ref-approach__body {
	margin: 0 0 var(--space-md);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--color-white-muted);
}

.ref-approach__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #ffffff;
	color: #1B3A2F;
	border: 1px solid rgba(255, 255, 255, 0.35);
	padding: 0.6875rem 1.375rem;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border-radius: 2px;
	transition: background-color 0.15s ease;
	align-self: flex-start;
}

.ref-approach__cta:hover,
.ref-approach__cta:focus {
	background-color: var(--color-cream);
}

.ref-approach__map {
	padding-top: var(--space-md);
}

/* ─── References Approach teaser — tablet and mobile ──────── */
@media (max-width: 900px) {
	.ref-approach__inner {
		padding: var(--space-lg);
	}

	.ref-approach__top {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
}

@media (max-width: 600px) {
	.ref-approach__inner {
		padding: var(--space-lg) var(--space-md);
	}
}

/* ─── References people table ────────────────────────────────
   Modeled directly on the Projects proof-matrix table
   (.projects-index*) — same header/CTA/taxonomy shell, same
   bordered horizontal-scroll table, same handoff-row pattern.
   Under its own .ref-people* selectors so neither page's table
   can affect the other. No checkmark columns: this table is
   text-only people data, not a discipline/workstream matrix. */
.ref-people {
	background-color: var(--color-white);
	padding: var(--space-2xl) var(--space-md);
}

.ref-people__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.ref-people__header {
	max-width: 720px;
	margin: 0 auto var(--space-sm);
	text-align: center;
}

.ref-people__headline {
	margin: var(--space-sm) 0 var(--space-sm);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
}

.ref-people__supporting {
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-gray-500);
	max-width: 64ch;
}

.ref-people__cta-link {
	display: inline-flex;
	align-items: center;
	margin: var(--space-md) 0 0;
	background-color: var(--color-green-dark);
	color: #ffffff;
	border: 1px solid var(--color-green-dark);
	padding: 0.8125rem 1.875rem;
	border-radius: 12px;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.ref-people__cta-link:hover,
.ref-people__cta-link:focus {
	background-color: #12261d;
	border-color: #12261d;
}

.ref-people__taxonomy {
	margin: var(--space-sm) 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(27, 58, 47, 0.55);
}

.ref-people__taxonomy-sep {
	margin: 0 0.5rem;
	color: rgba(27, 58, 47, 0.3);
}

.ref-people__taxonomy span {
	white-space: nowrap;
}

/* Table */
.ref-people__table-wrapper {
	margin-top: var(--space-lg);
	overflow-x: auto;
	border: 1px solid var(--color-gray-200);
	border-radius: 4px;
	scrollbar-width: thin;
	scrollbar-color: var(--color-gray-200) transparent;
}

.ref-people__table-wrapper::-webkit-scrollbar {
	height: 6px;
}

.ref-people__table-wrapper::-webkit-scrollbar-track {
	background: transparent;
}

.ref-people__table-wrapper::-webkit-scrollbar-thumb {
	background-color: var(--color-gray-200);
	border-radius: 3px;
}

.ref-people__table {
	width: 100%;
	min-width: 920px;
	border-collapse: collapse;
	font-family: var(--font-sans);
	table-layout: auto;
}

.ref-people__table thead tr {
	border-bottom: 1px solid var(--color-gray-200);
}

.ref-people__table th {
	padding: 0.75rem 0.625rem;
	text-align: left;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-gray-500);
	white-space: nowrap;
}

.ref-people__table tbody tr {
	border-bottom: 1px solid var(--color-gray-200);
}

.ref-people__cell {
	padding: 0.875rem 0.625rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: #4b5563;
	vertical-align: top;
}

.ref-people__cell--ref {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-black);
	white-space: nowrap;
}

.ref-people__cell--linkedin a {
	color: var(--color-green-dark);
	text-decoration: none;
	border-bottom: 1px solid rgba(27, 58, 47, 0.3);
}

.ref-people__cell--linkedin a:hover,
.ref-people__cell--linkedin a:focus {
	color: var(--color-black);
	border-bottom-color: var(--color-black);
}

/* Reveal — real button, JS-driven, one-way (no collapse back),
   same pattern as .projects-index__reveal-* */
.ref-people__reveal-cell {
	padding: 0;
	text-align: center;
}

.ref-people__reveal-trigger {
	display: inline-flex;
	align-items: center;
	width: 100%;
	justify-content: center;
	padding: 0.875rem 0.75rem;
	background: none;
	border: none;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-green-dark);
	cursor: pointer;
}

.ref-people__reveal-trigger:hover,
.ref-people__reveal-trigger:focus {
	color: var(--color-black);
}

/* Handoff — closing row after the full table, text-style CTA only */
.ref-people__handoff-cell {
	padding: 1.125rem 0.75rem;
	text-align: center;
}

.ref-people__handoff {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-gray-500);
}

.ref-people__handoff a {
	font-weight: 600;
	color: var(--color-green-dark);
	text-decoration: none;
	border-bottom: 1.5px solid var(--color-green-dark);
	padding-bottom: 1px;
}

.ref-people__handoff a:hover,
.ref-people__handoff a:focus {
	color: var(--color-black);
	border-bottom-color: var(--color-black);
}

/* Responsive — same strategy as the Projects proof-matrix table:
   stays a real table at every width, horizontal scroll only,
   never reflows into stacked cards. */
@media (max-width: 480px) {
	.ref-people__table {
		min-width: 820px;
	}

	.ref-people__cell,
	.ref-people__table th {
		padding: 0.75rem 0.5rem;
		font-size: 0.75rem;
	}
}

/* Keep the reveal/handoff CTA visible at the left edge of the
   scrollable table on mobile/tablet, instead of centered inside
   the wide horizontal-scroll table where it sits out of view at
   scroll position 0. Sticky-positions the cell itself to the
   visible left edge of .ref-people__table-wrapper (the scroll
   container), so it stays in view regardless of scroll position —
   matches the site's standard 768px mobile cutoff, not the
   narrower 480px breakpoint used above for font/padding only. */
@media (max-width: 768px) {
	.ref-people__reveal-cell,
	.ref-people__handoff-cell {
		position: sticky;
		left: 0;
		text-align: left;
	}

	.ref-people__reveal-trigger {
		width: auto;
		justify-content: flex-start;
	}
}

/* ─── References network ─────────────────────────────────── */
.ref-network {
	background-color: var(--color-gray-50);
	padding: var(--space-2xl) var(--space-md);
}

.ref-network__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: start;
}

/* Left column */
.ref-network__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ref-network__headline {
	margin: var(--space-sm) 0 var(--space-md);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--color-black);
}

.ref-network__supporting {
	margin: 0 0 var(--space-lg);
	font-size: 1rem;
	line-height: 1.7;
	color: #4b5563;
	max-width: 46ch;
}

.ref-network__cta {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 2px;
}

.ref-network__cta:hover,
.ref-network__cta:focus {
	color: var(--color-gray-500);
	border-bottom-color: var(--color-gray-500);
}

/* Right column */
.ref-network__right {
	border-left: 3px solid var(--color-green-dark);
	padding-left: var(--space-lg);
}

.ref-network__right-label {
	margin: 0 0 var(--space-md);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gray-500);
}

.ref-network__categories {
	border-top: 1px solid var(--color-gray-200);
}

.ref-network__category {
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--color-gray-200);
}

.ref-network__category-name {
	margin: 0 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.ref-network__category-desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-black);
}

/* ─── References network — mobile ───────────────────────── */
@media (max-width: 900px) {
	.ref-network__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.ref-network__supporting {
		max-width: 100%;
	}

	.ref-network__right {
		border-left: none;
		border-top: 3px solid var(--color-green-dark);
		padding-left: 0;
		padding-top: var(--space-md);
	}
}

/* ─── References leverage / people excellence ───────────── */
.ref-leverage {
	background-color: var(--color-gray-50);
	padding: var(--space-lg) var(--space-md);
	border-top: 1px solid var(--color-gray-200);
}

.ref-leverage__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.ref-leverage__headline {
	margin: var(--space-sm) 0 var(--space-sm);
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
	max-width: 48ch;
}

.ref-leverage__tagline {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-gray-500);
	max-width: 56ch;
}

/* ─── References execution network ──────────────────────── */
.ref-execution {
	background-color: var(--color-white);
	padding: var(--space-xl) var(--space-md);
}

.ref-execution__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.ref-execution__headline {
	margin: var(--space-sm) 0 var(--space-md);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
}

.ref-execution__supporting {
	margin: 0 0 var(--space-lg);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-gray-500);
	max-width: 58ch;
}

.ref-execution__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	border-top: 1px solid var(--color-gray-200);
}

.ref-execution__category {
	padding-top: var(--space-sm);
}

.ref-execution__category-name {
	margin: 0 0 0.375rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.ref-execution__category-desc {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: #4b5563;
}

.ref-execution__proof {
	margin: var(--space-lg) 0 var(--space-md);
	font-size: 0.9375rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--color-gray-500);
	max-width: 58ch;
}

.ref-execution__cta {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	border-bottom: 1.5px solid var(--color-black);
	padding-bottom: 2px;
}

.ref-execution__cta:hover,
.ref-execution__cta:focus {
	color: var(--color-gray-500);
	border-bottom-color: var(--color-gray-500);
}

/* ─── References execution — tablet and mobile ───────────── */
@media (max-width: 900px) {
	.ref-execution__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.ref-execution__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}
}

/* ─── References validation strip ───────────────────────── */
.ref-validation {
	background-color: var(--color-green-dark);
	padding: var(--space-md) var(--space-md);
}

.ref-validation__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.ref-validation__label {
	margin: 0 0 var(--space-xs);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white-muted);
}

.ref-validation__headline {
	margin: 0 0 var(--space-md);
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-white);
}

.ref-validation__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	border-top: 1px solid var(--color-green-dark-rule);
}

.ref-validation__point {
	padding-top: var(--space-sm);
}

.ref-validation__point-title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-white);
}

.ref-validation__supporting {
	margin: var(--space-sm) 0 0;
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	max-width: 60ch;
}

/* ─── References validation — tablet and mobile ─────────── */
@media (max-width: 900px) {
	.ref-validation__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.ref-validation__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}
}

/* ─── References hero validation cards ──────────────────── */
.page-hero__divider {
	border-top: 1px solid var(--color-gray-200);
	margin: var(--space-lg) 0;
}

.page-hero__validation {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.page-hero__validation-card {
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-top: 3px solid var(--color-green-dark);
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
}

.page-hero__validation-title {
	margin: 0 0 var(--space-xs);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-black);
}

.page-hero__validation-desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #4b5563;
}

/* ─── References hero validation — tablet and mobile ─────── */
@media (max-width: 900px) {
	.page-hero__validation {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.page-hero__validation {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
	}

	.page-hero__validation-card {
		padding: var(--space-sm) var(--space-md);
	}
}

/* ─── Inner page hero ───────────────────────────────────── */
.page-hero {
	background-color: var(--color-white);
	padding: var(--space-xl) var(--space-md) var(--space-2xl);
}

/* ─── References hero ────────────────────────────────────────
   Ported from .page-hero--projects's exact structural pattern
   (cream, full-bleed, two-column grid) under its own selector —
   modeled on, not sharing, the Projects rule. */
.page-hero--references {
	position: relative;
	background-color: var(--color-cream);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
	padding-bottom: var(--space-lg);
}

.page-hero--references::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.page-hero--references .page-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.references-hero__cta {
	background-color: var(--color-green-dark);
	color: var(--color-white);
	border-color: var(--color-green-dark);
}

.references-hero__cta:hover,
.references-hero__cta:focus {
	background-color: #12261d;
	border-color: #12261d;
	color: var(--color-white);
}

/* Proof mark — dark-green SVG panel, denser composition pass.
   Every phrase is positioned via inline x/y/--fs on a fixed
   1300x820 viewBox. At this size and density, intentional close
   spacing and minor overlap between phrases is the design, not a
   bug — only large-on-large collisions were treated as defects
   and resolved; the rest reads as a filled, layered proof wall,
   matching the approved mockup's weight rather than a clean
   diagram. Depth still comes from two independent axes: a size
   tier (large/medium/small, via --fs) and a sharp/soft modifier
   controlling opacity+weight, so same-size phrases can still read
   as foreground vs. background. */
.references-proof-mark {
	width: 100%;
	height: auto;
	display: block;
}

.references-proof-mark__panel {
	fill: var(--color-green-dark);
}

.references-proof-mark__line {
	fill: none;
	stroke: rgba(250, 246, 240, 0.26);
	stroke-width: 3;
	stroke-linecap: round;
}

.references-proof-mark__line-dot {
	fill: rgba(250, 246, 240, 0.4);
}

.references-proof-mark__quote {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 260px;
	font-weight: 700;
	fill: rgba(250, 246, 240, 0.17);
}

.references-proof-mark__quote--close {
	text-anchor: end;
}

.references-proof-mark__word {
	font-family: inherit;
	line-height: 1.1;
	font-size: var(--fs, 20px);
}

.references-proof-mark__word--large {
	font-weight: 800;
	fill: var(--color-cream);
	letter-spacing: -0.01em;
}

.references-proof-mark__word--medium.references-proof-mark__word--sharp {
	font-weight: 700;
	fill: var(--color-cream);
}

.references-proof-mark__word--medium.references-proof-mark__word--soft,
.references-proof-mark__word--small.references-proof-mark__word--soft {
	font-weight: 600;
	fill: rgba(250, 246, 240, 0.52);
}

.references-proof-mark a {
	text-decoration: none;
}

.references-proof-mark a:hover .references-proof-mark__word,
.references-proof-mark a:focus .references-proof-mark__word {
	fill: var(--color-cream);
	text-decoration: underline;
	text-decoration-color: currentColor;
}

/* ─── References hero — mobile ───────────────────────────── */
@media (max-width: 768px) {
	.page-hero--references {
		margin-left: 0;
		margin-right: 0;
	}

	.page-hero--references .page-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.references-proof-mark__word {
		font-size: calc(var(--fs, 20px) * 0.82);
	}

	.references-proof-mark__quote {
		font-size: 180px;
	}

	.references-proof-mark__word--hide-mobile {
		display: none;
	}
}

.page-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.page-hero__headline {
	margin: var(--space-sm) 0 var(--space-md);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-black);
	max-width: 22ch;
}

.page-hero__subheadline {
	margin: 0 0 var(--space-lg);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-gray-500);
	max-width: 58ch;
}

.page-hero__ctas {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	flex-wrap: wrap;
	margin-bottom: var(--space-md);
}

.page-hero__proof {
	margin: 0;
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1.6;
	color: var(--color-gray-500);
	max-width: 58ch;
}

/* ─── Inner page hero — mobile ──────────────────────────── */
@media (max-width: 768px) {
	.page-hero {
		padding: var(--space-lg) var(--space-md);
	}

	.page-hero__headline {
		max-width: 100%;
	}

	.page-hero__subheadline,
	.page-hero__proof {
		max-width: 100%;
	}
}

/* ─── Projects hero (page-scoped) ───────────────────────────
   .page-hero--projects only — does not touch the bare .page-hero
   rule shared by contact/views/references/approach/about/
   submitted-page. Mirrors the full-bleed technique already used
   by .hero / .site-header / .site-footer in this file. */
.page-hero--projects {
	position: relative;
	background-color: var(--color-cream);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
}

.page-hero--projects::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.page-hero--projects {
	/* tighten the gap into the validation strip immediately below —
	   the base .page-hero rule's bottom padding (--space-2xl) was
	   sized for a hero followed by a color change; here it's followed
	   by more cream, so the large gap just reads as empty space. */
	padding-bottom: var(--space-lg);
}

.page-hero--projects .page-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.projects-hero__cta {
	background-color: var(--color-green-dark);
	color: var(--color-white);
	border-color: var(--color-green-dark);
}

.projects-hero__cta:hover,
.projects-hero__cta:focus {
	background-color: #12261d;
	border-color: #12261d;
	color: var(--color-white);
}

/* ─── Projects hero proof canvas ──────────────────────────────
   One bounded, fixed-aspect frame — not a grid of cards. Every
   artifact is absolutely positioned inside it via --x/--y/--w/--r
   custom properties, so fragments can overlap like a real
   documentary collage. overflow:hidden on the frame is the
   safety net if any position runs slightly long. Replaces the
   earlier .projects-collage grid entirely. */
.projects-proof-canvas {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 4;
	overflow: hidden;
}

.projects-proof-canvas__item {
	position: absolute;
	top: var(--y);
	left: var(--x);
	width: var(--w);
	transform: rotate(var(--r, 0deg));
	z-index: var(--z, 1);
}

.projects-proof-canvas__item img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #E5E2DA;
}

.projects-proof-canvas__item--dominant img {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.projects-proof-canvas__item--supporting img {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.projects-proof-canvas__item--texture {
	opacity: 0.92;
}

/* ─── Projects hero — mobile ─────────────────────────────── */
@media (max-width: 768px) {
	/* .site removes its own horizontal padding below this breakpoint,
	   so the negative margins that cancel .site's padding above this
	   breakpoint must reset to 0 here — same fix required on .hero,
	   .site-footer, and .cta-close--home earlier in this build. */
	.page-hero--projects {
		margin-left: 0;
		margin-right: 0;
	}

	.page-hero--projects .page-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.projects-proof-canvas__item--hide-mobile {
		display: none;
	}
}

/* ─── Approach hero ──────────────────────────────────────────
   Cream, full-bleed, single-column — same structural pattern as
   .page-hero--projects and .page-hero--references but without a
   right-side artifact. The two-column grid is not needed here;
   the base .page-hero__inner (max-width: 1200px centered) is
   sufficient. Bottom padding is tightened to --space-lg because
   the validation strip immediately below is also cream, so the
   full --space-2xl base gap would read as empty space. */
.page-hero--approach {
	position: relative;
	background-color: var(--color-cream);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
	padding-bottom: var(--space-lg);
}

.page-hero--approach::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.page-hero--approach .page-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.approach-hero__cta {
	background-color: var(--color-green-dark);
	color: var(--color-white);
	border-color: var(--color-green-dark);
}

.approach-hero__cta:hover,
.approach-hero__cta:focus {
	background-color: #12261d;
	border-color: #12261d;
	color: var(--color-white);
}

/* ─── Approach hero system artifact ───────────────────────────────
   Reuses the homepage .hub-spoke* and .spoke-card* design system
   verbatim — the dark-green system band, capability cards, and SVG
   icons are identical. The only Approach-specific override removes
   the homepage max-width cap so the artifact fills the full right
   column of the two-column hero grid. Hidden on mobile so the hero
   copy and CTA stand cleanly alone; the validation strip below
   provides credibility context at that viewport. */
.approach-hero__right {
	width: 100%;
	align-self: center;
}

.approach-hero__right .hub-spoke {
	max-width: none;
}

/* ─── Approach hero — mobile ──────────────────────────────── */
@media (max-width: 768px) {
	.page-hero--approach {
		margin-left: 0;
		margin-right: 0;
	}

	.page-hero--approach .page-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.approach-hero__right {
		display: none;
	}
}

/* ─── Projects validation strip ─────────────────────────────
   New Projects-exclusive module — adapts the homepage proof-rail
   pattern under its own classes rather than extending .proof-rail*,
   which remains homepage-only. */
.projects-validation {
	position: relative;
	background-color: var(--color-cream);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
	padding: 1rem var(--space-md);
}

.projects-validation::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.projects-validation__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	text-align: center;
}

.projects-validation__creds {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.projects-validation__stat {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #2F3432;
	white-space: nowrap;
}

.projects-validation__sep {
	font-size: 0.625rem;
	color: var(--color-gray-500);
	flex-shrink: 0;
}

.projects-validation__logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	flex-wrap: wrap;
}

.projects-validation__logo {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-gray-500);
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--color-gray-200);
	border-radius: 2px;
}

.projects-validation__logo--more {
	border: none;
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

/* ─── Projects validation strip — mobile ────────────────────── */
@media (max-width: 768px) {
	.projects-validation {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ─── References validation strip ───────────────────────────
   Same proof-rail pattern as .projects-validation, under its
   own selector — not shared with Projects. */
.references-validation {
	position: relative;
	background-color: var(--color-cream);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
	padding: 1rem var(--space-md);
}

.references-validation::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.references-validation__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	text-align: center;
}

.references-validation__creds {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.references-validation__stat {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #2F3432;
	white-space: nowrap;
}

.references-validation__sep {
	font-size: 0.625rem;
	color: var(--color-gray-500);
	flex-shrink: 0;
}

.references-validation__logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	flex-wrap: wrap;
}

.references-validation__logo {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-gray-500);
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--color-gray-200);
	border-radius: 2px;
}

.references-validation__logo--more {
	border: none;
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

/* ─── References validation strip — mobile ──────────────────── */
@media (max-width: 768px) {
	.references-validation {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ─── Approach validation strip ──────────────────────────────
   Same proof-rail pattern as .projects-validation and
   .references-validation, under its own selector — not shared
   with Projects or References. */
.approach-validation {
	position: relative;
	background-color: var(--color-cream);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
	padding: 1rem var(--space-md);
}

.approach-validation::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.approach-validation__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	text-align: center;
}

.approach-validation__creds {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.approach-validation__stat {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #2F3432;
	white-space: nowrap;
}

.approach-validation__sep {
	font-size: 0.625rem;
	color: var(--color-gray-500);
	flex-shrink: 0;
}

.approach-validation__logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	flex-wrap: wrap;
}

.approach-validation__logo {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-gray-500);
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--color-gray-200);
	border-radius: 2px;
}

.approach-validation__logo--more {
	border: none;
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

/* ─── Approach validation strip — mobile ─────────────────────── */
@media (max-width: 768px) {
	.approach-validation {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ─── About hero ──────────────────────────────────────────────
   Cream, full-bleed, two-column — same structural pattern as
   .page-hero--approach. Left: founder-facing claim + Work With Us.
   Right: the Operating Record card (About-only artifact). Unlike
   the Approach hub-spoke, the record card remains visible on
   mobile, stacking below the CTA. */
.page-hero--about {
	position: relative;
	background-color: var(--color-cream);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
	padding-bottom: var(--space-md);
}

.page-hero--about::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.page-hero--about .page-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.about-hero__cta {
	background-color: var(--color-green-dark);
	color: var(--color-white);
	border-color: var(--color-green-dark);
}

.about-hero__cta:hover,
.about-hero__cta:focus {
	background-color: #12261d;
	border-color: #12261d;
	color: var(--color-white);
}

/* ─── About hero — Operating Record card ─────────────────────
   About sibling of the hub-spoke hero artifact: dark-green
   header band over white ledger rows. Typographic only — the
   record as data, no chronology, no titles. */
.about-hero__right {
	width: 100%;
	align-self: center;
}

.about-record {
	max-width: 440px;
	margin-left: auto;
	background-color: var(--color-white);
	border: 1px solid #E5E2DA;
	border-radius: 6px;
	overflow: hidden;
}

.about-record__label {
	margin: 0;
	background-color: var(--color-green-dark);
	padding: 0.75rem 1.25rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	text-align: center;
}

.about-record__rows {
	margin: 0;
	padding: 0.375rem 1.25rem;
}

.about-record__row {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	gap: 1rem;
	align-items: baseline;
	padding: 0.5625rem 0;
	border-bottom: 1px solid var(--color-gray-200);
}

.about-record__row:last-child {
	border-bottom: none;
}

.about-record__key {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-black);
	letter-spacing: -0.01em;
}

.about-record__desc {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: #4b5563;
}

/* ─── About hero — mobile ───────────────────────────────────── */
@media (max-width: 768px) {
	.page-hero--about {
		margin-left: 0;
		margin-right: 0;
	}

	.page-hero--about .page-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.about-record {
		max-width: none;
		margin-left: 0;
	}

	/* Keep each ledger row on one line at phone widths. */
	.about-record__row {
		grid-template-columns: 5.75rem 1fr;
		gap: 0.75rem;
	}

	.about-record__desc {
		font-size: 0.8125rem;
	}
}

/* ─── About validation strip ─────────────────────────────────
   Mirrors .approach-validation verbatim under About-scoped
   classes, per the established per-page duplication pattern
   (projects-validation / references-validation / approach-validation). */
.about-validation {
	position: relative;
	background-color: var(--color-cream);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
	padding: 0.5rem var(--space-md) 1rem;
}

.about-validation::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.about-validation__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	text-align: center;
}

.about-validation__creds {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.about-validation__stat {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #2F3432;
	white-space: nowrap;
}

.about-validation__sep {
	font-size: 0.625rem;
	color: var(--color-gray-500);
	flex-shrink: 0;
}

.about-validation__logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	flex-wrap: wrap;
}

.about-validation__logo {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-gray-500);
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--color-gray-200);
	border-radius: 2px;
}

.about-validation__logo--more {
	border: none;
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

/* ─── About validation strip — mobile ────────────────────────── */
@media (max-width: 768px) {
	.about-validation {
		margin-left: 0;
		margin-right: 0;
	}

	/* Stack the two stats cleanly without the arrow separator. */
	.about-validation__creds {
		flex-direction: column;
		gap: 0.25rem;
	}

	.about-validation__sep {
		display: none;
	}
}

/* ─── Views hero ──────────────────────────────────────────────
   Cream, full-bleed, two-column — same structural pattern as
   .page-hero--about. Left: library claim + Work With Us. Right:
   the "A GTMSF View" document-anatomy card (Views-only artifact,
   about-record sibling). Card remains visible on mobile, stacking
   below the CTA. */
.page-hero--views {
	position: relative;
	background-color: var(--color-cream);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
	padding-bottom: var(--space-md);
}

.page-hero--views::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.page-hero--views .page-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.views-hero__cta {
	background-color: var(--color-green-dark);
	color: var(--color-white);
	border-color: var(--color-green-dark);
}

.views-hero__cta:hover,
.views-hero__cta:focus {
	background-color: #12261d;
	border-color: #12261d;
	color: var(--color-white);
}

/* ─── Views hero — proof collage artifact ────────────────────
   Reuses the Projects hero .projects-proof-canvas* component
   verbatim (aspect-ratio frame, CSS-var-positioned clippings)
   with a Views-curated selection weighted toward bylined public
   thinking and market evidence. No Views-specific canvas CSS
   needed. */
.views-hero__right {
	width: 100%;
	align-self: center;
}

.views-hero__headline-arrow {
	padding: 0 0.25rem;
	color: var(--color-green-dark);
}

/* ─── Views hero — mobile ───────────────────────────────────── */
@media (max-width: 768px) {
	.page-hero--views {
		margin-left: 0;
		margin-right: 0;
	}

	.page-hero--views .page-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
}

/* ─── Views validation strip ─────────────────────────────────
   Mirrors .about-validation verbatim under Views-scoped classes,
   per the established per-page duplication pattern. */
.views-validation {
	position: relative;
	background-color: var(--color-cream);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
	padding: 0.5rem var(--space-md) 1rem;
}

.views-validation::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.views-validation__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	text-align: center;
}

.views-validation__creds {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.views-validation__stat {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #2F3432;
	white-space: nowrap;
}

.views-validation__sep {
	font-size: 0.625rem;
	color: var(--color-gray-500);
	flex-shrink: 0;
}

.views-validation__logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	flex-wrap: wrap;
}

.views-validation__logo {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-gray-500);
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--color-gray-200);
	border-radius: 2px;
}

.views-validation__logo--more {
	border: none;
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

/* ─── Views validation strip — mobile ────────────────────────── */
@media (max-width: 768px) {
	.views-validation {
		margin-left: 0;
		margin-right: 0;
	}

	/* Stack the two stats cleanly without the arrow separator. */
	.views-validation__creds {
		flex-direction: column;
		gap: 0.25rem;
	}

	.views-validation__sep {
		display: none;
	}
}

/* ─── Views topics / category map ─────────────────────────────
   The Views hub's single dark-green strategic moment: the three
   editorial categories presented as GTMSF operating lenses, not
   blog taxonomy. Outer shell mirrors .about-approach (white band,
   dark-green inner panel). Topic cards follow the spoke-card
   idiom — white, dark-green left border — with subtopic chips
   and a stage-range line tying each lens to the startup journey.
   Typographic only; no proof-map rail in this version. */
.views-topics {
	background-color: var(--color-white);
	padding: var(--space-2xl) 0;
}

.views-topics__inner {
	background-color: var(--color-green-dark);
	padding: var(--space-xl);
}

.views-topics__head {
	max-width: 720px;
	margin: 0 auto var(--space-lg);
	text-align: center;
}

.views-topics__kicker {
	margin: 0 0 var(--space-sm);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white-muted);
}

.views-topics__headline {
	margin: 0 0 var(--space-sm);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-white);
}

.views-topics__body {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--color-white-muted);
}

.views-topics__map {
	padding: var(--space-sm) 0 var(--space-xl);
}

/* White system box — the About Engine panel grammar transplanted
   onto the dark band: one contained light box holding three
   waterfall lanes split by hairlines, with black terminal CTAs
   (the lane "output") and a ruled closing statement line. */
.views-topics__panel {
	background-color: #F7F7F5;
	border: 1px solid #E5E2DA;
}

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

.views-topics__lane {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-md);
	border-left: 1px solid #E5E2DA;
}

.views-topics__lane:first-child {
	border-left: none;
}

.views-topics__lane-name {
	margin: 0 0 var(--space-sm);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.views-topics__steps {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3125rem;
	margin-bottom: var(--space-sm);
}

.views-topics__step {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: #2F3432;
	background-color: var(--color-white);
	border: 1px solid #E5E2DA;
	border-radius: 3px;
	padding: 0.5625rem 1rem;
	max-width: 100%;
}

.views-topics__drop {
	font-size: 0.875rem;
	line-height: 1;
	color: var(--color-gray-500);
}

.views-topics__lane-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	background-color: var(--color-black);
	color: var(--color-white);
	border: 1px solid var(--color-black);
	padding: 0.6875rem 1.375rem;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border-radius: 2px;
	transition: background-color 0.15s ease;
}

.views-topics__lane-cta:hover,
.views-topics__lane-cta:focus {
	background-color: #2F3432;
	border-color: #2F3432;
	color: var(--color-white);
}

.views-topics__closing {
	margin: 0;
	padding: 1rem 1.5rem;
	border-top: 1px solid #E5E2DA;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	text-align: center;
}

/* ─── Views topics — tablet and mobile ───────────────────────── */
@media (max-width: 900px) {
	.views-topics__inner {
		padding: var(--space-lg);
	}

	.views-topics__map {
		padding-bottom: var(--space-lg);
	}

	.views-topics__lanes {
		grid-template-columns: 1fr;
	}

	.views-topics__lane {
		border-left: none;
		border-top: 1px solid #E5E2DA;
	}

	.views-topics__lane:first-child {
		border-top: none;
	}
}

@media (max-width: 600px) {
	.views-topics__inner {
		padding: var(--space-lg) var(--space-md);
	}
}

/* ─── About origin module ────────────────────────────────────
   About-scoped wrapper for the homepage Challenge module pattern
   (template-parts/problem.php). The inner proof objects —
   .stat-pair* and .challenge-panel* — are reused verbatim (the
   hub-spoke precedent); only the section band and copy column
   get About-scoped rules, mirroring .problem with the top
   padding eased because the cream validation strip sits above. */
.about-origin {
	background-color: var(--color-white);
	padding: var(--space-xl) var(--space-md);
}

.about-origin__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.about-origin__statement {
	margin: 0 0 var(--space-md);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-black);
}

.about-origin__body {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-gray-500);
	max-width: 46ch;
}

.about-origin__cta {
	margin-top: var(--space-md);
}

/* ─── About origin — tablet and mobile ───────────────────────── */
@media (max-width: 900px) {
	.about-origin__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.about-origin__body {
		max-width: 100%;
	}
}

/* ─── About Approach teaser ──────────────────────────────────
   Adapts the recurring "How GTMSF Works" bridge (dark-green
   inner panel, engage-table, proof-map) for the About page —
   the page's single dark-green strategic moment. Outer shell
   uses .about-approach* to keep pages isolated, mirroring
   .ref-approach*. Engagement table and proof-map reuse
   .projects-engage-table* and .projects-proof-map* — no new
   CSS needed for those. */
.about-approach {
	background-color: var(--color-white);
	padding: var(--space-2xl) 0;
}

.about-approach__inner {
	background-color: var(--color-green-dark);
	padding: var(--space-xl);
}

.about-approach__top {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 3rem;
	align-items: center;
	margin-bottom: var(--space-md);
}

.about-approach__copy {
	display: flex;
	flex-direction: column;
}

.about-approach__kicker {
	margin: 0 0 var(--space-sm);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white-muted);
}

.about-approach__headline {
	margin: 0 0 var(--space-sm);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-white);
}

.about-approach__body {
	margin: 0 0 var(--space-md);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--color-white-muted);
}

.about-approach__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #ffffff;
	color: #1B3A2F;
	border: 1px solid rgba(255, 255, 255, 0.35);
	padding: 0.6875rem 1.375rem;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border-radius: 2px;
	transition: background-color 0.15s ease;
	align-self: flex-start;
}

.about-approach__cta:hover,
.about-approach__cta:focus {
	background-color: var(--color-cream);
}

.about-approach__map {
	padding-top: var(--space-md);
}

/* ─── About Approach teaser — tablet and mobile ───────────────── */
@media (max-width: 900px) {
	.about-approach__inner {
		padding: var(--space-lg);
	}

	.about-approach__top {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
}

@media (max-width: 600px) {
	.about-approach__inner {
		padding: var(--space-lg) var(--space-md);
	}
}

/* ─── About engine (GTMSF Engine infographic) ─────────────────
   Single bordered schematic panel holding three vertical
   value cascades: kicker → stacked step tiles joined by
   downward typographic connectors → dark-green outcome tile,
   with a ruled closing strip across the bottom. One shared
   container, hairline lane dividers, no per-lane cards — it
   reads as one proof object. Outcome tiles bottom-align across
   lanes via flex + margin-top auto. Typographic only. */
.about-engine {
	background-color: var(--color-white);
	padding: var(--space-xl) var(--space-md) var(--space-2xl);
}

.about-engine__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.about-engine__intro {
	text-align: center;
	margin-bottom: var(--space-lg);
}

.about-engine__intro .section-label {
	margin-bottom: var(--space-sm);
}

.about-engine__headline {
	margin: 0 auto var(--space-sm);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--color-black);
	max-width: 44ch;
}

.about-engine__subhead {
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-gray-500);
	max-width: 58ch;
}

.about-engine__panel {
	background-color: #F7F7F5;
	border: 1px solid rgba(27, 58, 47, 0.4);
}

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

.about-engine__lane {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-md);
	border-left: 1px solid #E5E2DA;
}

.about-engine__lane:first-child {
	border-left: none;
}

.about-engine__lane-kicker {
	margin: 0 0 var(--space-sm);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.about-engine__steps {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	margin-bottom: 0.375rem;
}

.about-engine__step {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: #2F3432;
	background-color: var(--color-white);
	border: 1px solid #E5E2DA;
	border-radius: 3px;
	padding: 0.5625rem 1rem;
	max-width: 100%;
}

.about-engine__drop {
	font-size: 0.875rem;
	line-height: 1;
	color: var(--color-gray-500);
}

.about-engine__outcome {
	margin: 0;
	margin-top: auto;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--color-white);
	background-color: var(--color-green-dark);
	border-radius: 3px;
	padding: 0.6875rem 1.25rem;
	max-width: 100%;
}

.about-engine__closing {
	margin: 0;
	padding: 1rem 1.5rem;
	border-top: 1px solid #E5E2DA;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-black);
	text-align: center;
}

/* ─── About engine — tablet and mobile ───────────────────────── */
@media (max-width: 900px) {
	.about-engine__lanes {
		grid-template-columns: 1fr;
	}

	.about-engine__lane {
		border-left: none;
		border-top: 1px solid #E5E2DA;
	}

	.about-engine__lane:first-child {
		border-top: none;
	}
}

/* ─── Header — compact (hamburger mode) ─────────────────── */
@media (max-width: 900px) {
	.site-nav-toggle {
		display: inline-flex;
	}

	.site-nav {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		position: absolute;
		top: 64px;
		left: 0;
		background-color: var(--color-green-dark);
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		padding: 0 var(--space-md);
	}

	.site-nav.is-open {
		display: flex;
	}

	.site-nav__link {
		padding: var(--space-sm) 0;
		border-top: 1px solid rgba(255, 255, 255, 0.10);
	}

	/* Contact: float the pill below the nav links with breathing room */
	.site-nav__link--cta {
		border-top: none;
		display: inline-block;
		align-self: flex-start;
		margin: var(--space-md) 0 var(--space-sm);
	}

	.site-header__inner {
		position: relative;
	}
}

/* ─── Site footer ───────────────────────────────────────── */
.site-footer {
	position: relative;
	background-color: var(--color-green-dark);
	padding: var(--space-xl) var(--space-md) var(--space-lg);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
}

/* full-bleed band: extends beyond .site's max-width to viewport edges,
   mirrors the .site-header::before / .hero::before technique used
   elsewhere in this file */
.site-footer::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-green-dark);
	z-index: -1;
}

.site-footer__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
}

/* Main grid: brand | Work | Company | Views | cta */
.site-footer__main {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr auto;
	gap: var(--space-lg);
	align-items: center;
}

.site-footer__nav-title {
	margin: 0 0 var(--space-sm);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-white);
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.site-footer__wordmark {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-white);
	text-decoration: none;
	margin-bottom: var(--space-sm);
}

.site-footer__wordmark:hover {
	color: var(--color-white);
}

.site-footer__tagline {
	width: 100%;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--color-white-muted);
}

.site-footer__nav {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.site-footer__nav-link {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-white-muted);
	text-decoration: none;
	transition: color 0.12s ease;
}

.site-footer__nav-link:hover,
.site-footer__nav-link:focus {
	color: var(--color-white);
}

.site-footer__cta {
	display: flex;
	align-items: flex-start;
}

.site-footer__cta-btn {
	background-color: var(--color-white);
	color: var(--color-green-dark);
	border: 2px solid var(--color-white);
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 0.625rem 1.25rem;
	white-space: nowrap;
}

.site-footer__cta-btn:hover,
.site-footer__cta-btn:focus {
	background-color: transparent;
	color: var(--color-white);
}

/* Divider */
.site-footer__divider {
	border-top: 1px solid var(--color-green-dark-rule);
	margin: var(--space-lg) 0 var(--space-md);
}

/* Bottom row */
.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.site-footer__copyright {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--color-white-muted);
}

.site-footer__legal {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.site-footer__legal-link {
	font-size: 0.8125rem;
	color: var(--color-white-muted);
	text-decoration: none;
	transition: color 0.12s ease;
}

.site-footer__legal-link:hover,
.site-footer__legal-link:focus {
	color: var(--color-white);
}

.site-footer__legal-sep {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.40);
}

/* ─── Site footer — tablet ───────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
	.site-footer {
		padding: var(--space-lg) var(--space-md) var(--space-md);
	}

	.site-footer__main {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas:
			"brand brand cta"
			"nav1  nav2  nav3";
		gap: var(--space-lg);
	}

	.site-footer__brand { grid-area: brand; }
	.site-footer__nav:nth-of-type(1) { grid-area: nav1; }
	.site-footer__nav:nth-of-type(2) { grid-area: nav2; }
	.site-footer__nav:nth-of-type(3) { grid-area: nav3; }

	.site-footer__cta {
		grid-area: cta;
		justify-content: flex-end;
		align-items: flex-start;
	}

	.site-footer__divider {
		margin: var(--space-md) 0 var(--space-sm);
	}
}

/* ─── Site footer — mobile ───────────────────────────────── */
@media (max-width: 768px) {
	/* .site removes its own horizontal padding below this breakpoint
	   (see "Phone — global padding fix"), so the negative margins that
	   cancel .site's padding above this breakpoint must reset to 0 here
	   — otherwise they subtract from a box that no longer has padding
	   to cancel, pushing the section off-screen on both sides. */
	.site-footer {
		margin-left: 0;
		margin-right: 0;
		padding: var(--space-lg) var(--space-md) var(--space-md);
	}

	/* Work + Company sit 2-up to cut a full stacked row of height;
	   Views spans both columns since three groups don't split evenly. */
	.site-footer__main {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"brand brand"
			"nav1  nav2"
			"nav3  nav3"
			"cta   cta";
		row-gap: var(--space-sm);
		column-gap: var(--space-md);
	}

	.site-footer__brand { grid-area: brand; }
	.site-footer__nav:nth-of-type(1) { grid-area: nav1; }
	.site-footer__nav:nth-of-type(2) { grid-area: nav2; }
	.site-footer__nav:nth-of-type(3) { grid-area: nav3; }
	.site-footer__cta { grid-area: cta; }

	.site-footer__nav {
		gap: var(--space-xs);
	}

	.site-footer__nav-title {
		margin-bottom: var(--space-xs);
	}

	.site-footer__cta-btn {
		width: 100%;
		text-align: center;
		padding: 0.5rem 1.125rem;
	}

	.site-footer__divider {
		margin: var(--space-md) 0 var(--space-sm);
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-xs);
	}
}

/* ─── Conviction / outcomes strip ──────────────────────── */
.conviction {
	background-color: var(--color-green-dark);
	padding: var(--space-xl) var(--space-md);
}

.conviction__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.conviction__framing {
	margin: 0 0 var(--space-lg);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white-muted);
}

.conviction__outcomes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
	border-top: 1px solid var(--color-green-dark-rule);
}

.conviction__outcome {
	padding-top: var(--space-lg);
}

.conviction__outcome-title {
	margin: 0 0 var(--space-sm);
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--color-white);
}

.conviction__outcome-body {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.80);
}

/* ─── Conviction — tablet and mobile ────────────────────── */
@media (max-width: 900px) {
	.conviction__outcomes {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.conviction__outcomes {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.conviction__outcome {
		padding: var(--space-md) 0;
		border-bottom: 1px solid var(--color-green-dark-rule);
	}

	.conviction__outcome:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
}

/* ─── Problem / positioning ─────────────────────────────── */
.problem {
	background-color: var(--color-white);
	padding: var(--space-2xl) var(--space-md) var(--space-xl);
}

.problem__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.section-label {
	margin: 0 0 var(--space-md);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gray-500);
}

.problem__statement {
	margin: 0 0 var(--space-md);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-black);
}

.problem__body {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-gray-500);
	max-width: 46ch;
}

/* Contrast grid */
.problem__grid {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--color-gray-200);
}

.contrast-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
	align-items: center;
	padding: 1rem 0;
	border-bottom: 1px solid var(--color-gray-200);
}

.contrast-row__not {
	font-size: 0.875rem;
	color: var(--color-gray-500);
}

.contrast-row__but {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-black);
}

/* ─── Reusable stat pair ────────────────────────────────── */
.stat-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
	margin-top: 2rem;
	padding-top: 0;
	border-top: none;
}

.stat-pair__item {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.stat-pair__number {
	display: block;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: #2F3432;
}

.stat-pair__label {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--color-gray-500);
	max-width: 22ch;
}

.stat-pair__source {
	margin: var(--space-sm) 0 0;
	font-size: 0.6875rem;
	color: var(--color-gray-500);
	letter-spacing: 0.01em;
}

.stat-pair__visual {
	display: block;
}

.stat-pair__item-source {
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-gray-500);
	margin-top: 0.125rem;
}

/* ─── Challenge comparison panel ────────────────────────── */
.challenge-panel {
	background-color: #F7F7F5;
	border: 1px solid #E5E2DA;
	padding: var(--space-lg);
}

.challenge-panel__heading {
	margin: 0 0 var(--space-md);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gray-500);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid #E5E2DA;
}

.challenge-panel__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
	align-items: center;
	padding: 0.875rem 0;
	border-bottom: 1px solid #E5E2DA;
}

.challenge-panel__row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.challenge-panel__negative {
	font-size: 0.875rem;
	color: var(--color-gray-500);
	line-height: 1.4;
}

.challenge-panel__positive {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-black);
	line-height: 1.4;
}

/* ─── Problem / Challenge — tablet and mobile ───────────── */
@media (max-width: 900px) {
	.problem__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.problem__body {
		max-width: 100%;
	}

	.contrast-row {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.stat-pair {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-sm);
	}

	.stat-pair__label {
		max-width: 100%;
	}

	.challenge-panel__row {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
}

@media (max-width: 480px) {
	.stat-pair {
		grid-template-columns: 1fr;
		gap: var(--space-sm);
	}
}

/* ─── Approach Teaser ────────────────────────────────────── */
.approach-teaser {
	background-color: var(--color-white);
	padding: var(--space-xl) 0;
}

.approach-teaser__inner {
	background-color: var(--color-green-dark);
	padding: var(--space-xl);
}

/* Top block: copy (42%) | engagement table (58%) */
.approach-teaser__top {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 3rem;
	align-items: center;
	margin-bottom: var(--space-md);
}

.approach-teaser__copy {
	display: flex;
	flex-direction: column;
}

.approach-teaser__kicker {
	margin: 0 0 var(--space-sm);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-white-muted);
}

.approach-teaser__headline {
	margin: 0 0 var(--space-sm);
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-white);
}

.approach-teaser__body {
	margin: 0 0 var(--space-md);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--color-white-muted);
}

.approach-teaser__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #ffffff;
	color: #1B3A2F;
	border: 1px solid rgba(255, 255, 255, 0.35);
	padding: 0.6875rem 1.375rem;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border-radius: 2px;
	transition: background-color 0.15s ease;
	align-self: flex-start;
}

.approach-teaser__cta:hover,
.approach-teaser__cta:focus {
	background-color: var(--color-cream);
}

/* Engagement options — compact cream table */
.engage-table {
	background: #F7F7F5;
	border: 1px solid #E5E2DA;
}

.engage-table__heading {
	margin: 0;
	padding: 0.875rem 1.25rem;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(27, 58, 47, 0.55);
	border-bottom: 1px solid #E5E2DA;
}

.engage-table__wrapper {
	overflow-x: auto;
}

.engage-table__grid {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-sans);
}

.engage-table__grid td {
	padding: 1.125rem 1.25rem;
	vertical-align: top;
	border-bottom: 1px solid #E5E2DA;
	color: var(--color-green-dark);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.engage-table__grid tr:last-child td {
	border-bottom: none;
}

.engage-table__duration {
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(27, 58, 47, 0.60);
	white-space: nowrap;
	width: 3rem;
}

.engage-table__name {
	font-size: 0.9375rem;
	font-weight: 700;
	white-space: nowrap;
}

.engage-table__desc {
	color: rgba(27, 58, 47, 0.70);
}

/* Stage/proof progression graph */
.approach-teaser__map {
	padding-top: var(--space-md);
}

/* Proof progression map */
.proof-map {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.proof-map__stages {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0 0.5rem;
}

.proof-map__anchor {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	text-align: center;
}

.proof-map__anchor--1 {
	grid-column: 1;
	text-align: left;
}

.proof-map__anchor--2 {
	grid-column: 2 / span 2;
}

.proof-map__anchor--3 {
	grid-column: 4 / span 2;
}

.proof-map__anchor--4 {
	grid-column: 6 / span 2;
	text-align: right;
}

.proof-map__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0 0.5rem;
	position: relative;
}

.proof-map__track::before {
	content: '';
	position: absolute;
	top: 1rem;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(255, 255, 255, 0.18);
}

.proof-map__node {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.375rem;
	padding: 0 0.25rem 0.5rem;
}

.proof-map__step {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: #FAF6F0;
	color: #1B3A2F;
	border: 1px solid rgba(255, 255, 255, 0.65);
	font-size: 0.8125rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.proof-map__label {
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.90);
	line-height: 1.35;
	padding-top: 0.25rem;
}

/* Responsive */
@media (max-width: 900px) {
	.approach-teaser__inner {
		padding: var(--space-lg);
	}

	.approach-teaser__top {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
}

@media (max-width: 768px) {
	.proof-map__stages {
		display: none;
	}

	/* Fill column 1 top-to-bottom (steps 1-4) before column 2 (steps 5-7),
	   instead of the grid's default row-by-row placement which reads
	   1,2 / 3,4 / 5,6 / 7 across the two columns. */
	.proof-map__track {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(4, auto);
		grid-auto-flow: column;
		gap: var(--space-sm) var(--space-md);
	}

	.proof-map__track::before {
		display: none;
	}

	.proof-map__node {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: 0.5rem;
	}

	.proof-map__step {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.75rem;
		flex-shrink: 0;
	}

	.proof-map__label {
		font-size: 0.8125rem;
		padding-top: 0;
	}
}

@media (max-width: 480px) {
	.proof-map__track {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
		gap: var(--space-xs) 0;
	}
}

@media (max-width: 600px) {
	.approach-teaser__inner {
		padding: var(--space-lg) var(--space-md);
	}

	.engage-table__grid,
	.engage-table__grid tbody {
		display: block;
	}

	.engage-table__grid tr {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		padding: 0.875rem 1rem;
		border-bottom: 1px solid #E5E2DA;
	}

	.engage-table__grid tr:last-child {
		border-bottom: none;
	}

	.engage-table__grid td {
		padding: 0;
		border: none;
	}

	.engage-table__duration {
		display: none;
	}

	.engage-table__name {
		white-space: normal;
		font-size: 0.9375rem;
	}

	.engage-table__desc {
		font-size: 0.8125rem;
	}
}

/* ─── Phone — global padding fix ───────────────────────── */
@media (max-width: 768px) {
	/* Remove double-padding: .site has its own horizontal padding
	   that stacks on top of each section's padding. On mobile,
	   sections handle their own horizontal spacing. */
	.site {
		padding-left: 0;
		padding-right: 0;
	}

	.hero {
		padding: var(--space-lg) var(--space-md);
		margin-left: 0;
		margin-right: 0;
	}
}

/* ─── Header M2.1: polish pass ─────────────────────────── */

/* Brand group: wordmark + descriptor side by side */
.site-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Descriptor: readable separator on dark background */
.site-brand__descriptor {
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.78);
	letter-spacing: 0.03em;
	padding-left: 0.75rem;
	border-left: 1px solid rgba(255, 255, 255, 0.20);
	white-space: nowrap;
	line-height: 1;
}

.site-brand__descriptor--short {
	display: none;
}

/* Intermediate desktop: shorter descriptor where space is tighter */
@media (max-width: 1024px) {
	.site-brand__descriptor--full {
		display: none;
	}

	.site-brand__descriptor--short {
		display: inline;
	}
}

/* Compact mode: descriptor hidden */
@media (max-width: 900px) {
	.site-brand__descriptor {
		display: none;
	}
}

/* Nav links: uppercase, tracked, white-alpha */
.site-nav__link {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.12s ease;
}

.site-nav__link:hover,
.site-nav__link:focus {
	color: var(--color-white);
}

/* Active page: subtle cream highlight */
.site-nav__link[aria-current="page"] {
	color: var(--color-white);
	background-color: rgba(255, 255, 255, 0.10);
	border-radius: 3px;
	padding: 0.25rem 0.5rem;
}

/* Contact: white pill CTA — distinct from parchment hero */
.site-nav__link--cta {
	background-color: #ffffff;
	color: var(--color-green-dark);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 3px;
	padding: 0.375rem 0.75rem;
	font-weight: 700;
}

.site-nav__link--cta:hover,
.site-nav__link--cta:focus {
	background-color: var(--color-white);
	color: var(--color-green-dark);
}

.site-nav__link--cta[aria-current="page"] {
	background-color: var(--color-white);
	color: var(--color-green-dark);
	padding: 0.375rem 0.75rem;
}

/* Toggle label: small caps to match nav typographic system */
.site-nav-toggle__label {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* At mobile, .site removes its own padding — cancel the header's negative margin compensation */
@media (max-width: 768px) {
	.site-header {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTACT — adaptive conversion page (hero + form + FAQ)
   Added for the /contact/ rebuild. Scoped to new selectors only.
   The retired .contact-share / .contact-fit / .contact-close rules earlier
   in this file are no longer in the render path — kept for now, pending the
   dead-CSS cleanup pass.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Contact hero — cream adaptive page header ───────────────────────── */
.contact-hero {
	position: relative;
	background-color: var(--color-cream);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
	padding: var(--space-xl) var(--space-md);
}

.contact-hero::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.contact-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.contact-hero__headline {
	margin: 0;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: var(--color-black);
}

.contact-hero__sub {
	margin: var(--space-md) 0 0;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--color-gray-500);
}

/* ─── Contact form — contained white panel, single column ─────────────── */
.contact-form {
	background-color: var(--color-white);
	padding: var(--space-lg) var(--space-md) var(--space-xl);
}

.contact-form__panel {
	max-width: 710px;
	margin: 0 auto;
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-top: 3px solid var(--color-green-dark);
	border-bottom: 2px solid rgba(27, 58, 47, 0.28);
	border-radius: 2px;
	padding: var(--space-md) clamp(var(--space-md), 3vw, var(--space-lg)) var(--space-lg);
}

.contact-form__title {
	margin: 0 0 var(--space-sm);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--color-gray-200);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.contact-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.contact-form__field {
	display: flex;
	flex-direction: column;
}

.contact-form__field--wide {
	grid-column: 1 / -1;
}

.contact-form__label {
	margin-bottom: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--color-black);
}

.contact-form__req {
	color: var(--color-green-dark);
}

.contact-form__input {
	width: 100%;
	padding: 0.55rem 0.8rem;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-black);
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: 2px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contact-form__input::placeholder {
	color: #9ca3af;
}

.contact-form__input:focus {
	outline: none;
	border-color: var(--color-green-dark);
	box-shadow: 0 0 0 3px rgba(27, 58, 47, 0.12);
}

.contact-form__textarea {
	resize: vertical;
	min-height: 3rem;
	line-height: 1.45;
}

.contact-form__select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231B3A2F' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 0.65rem;
}

/* Off-screen honeypot — visually removed, still submitted */
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__actions {
	margin-top: var(--space-md);
}

.contact-form__submit {
	display: inline-block;
	padding: 0.85rem 1.75rem;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	color: var(--color-white);
	background-color: var(--color-green-dark);
	border: 2px solid var(--color-green-dark);
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.contact-form__submit:hover,
.contact-form__submit:focus {
	background-color: #12261d;
	border-color: #12261d;
}

.contact-form__fallback {
	margin: var(--space-md) 0 0;
	font-size: 0.875rem;
	color: var(--color-gray-500);
}

.contact-form__fallback-link {
	color: var(--color-green-dark);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(27, 58, 47, 0.3);
}

.contact-form__fallback-link:hover,
.contact-form__fallback-link:focus {
	border-bottom-color: var(--color-green-dark);
}

/* ─── FAQ — reusable cream module (native details/summary, no JS) ─────── */
.faq {
	position: relative;
	background-color: var(--color-cream);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
	padding: var(--space-xl) var(--space-md) var(--space-2xl);
}

.faq::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.faq__inner {
	max-width: 760px;
	margin: 0 auto;
}

.faq__header {
	margin-bottom: var(--space-lg);
}

.faq__headline {
	margin: 0;
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--color-black);
}

.faq__list {
	border-top: 1px solid rgba(27, 58, 47, 0.14);
}

.faq__item {
	border-bottom: 1px solid rgba(27, 58, 47, 0.14);
}

.faq__q {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 1rem;
	list-style: none;
	cursor: pointer;
	padding: var(--space-md) 2.5rem var(--space-md) 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-black);
}

.faq__num {
	flex: 0 0 auto;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--color-green-dark);
	font-variant-numeric: tabular-nums;
}

.faq__q-text {
	flex: 1 1 auto;
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__q::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0.25rem;
	width: 0.6rem;
	height: 0.6rem;
	margin-top: -0.4rem;
	border-right: 2px solid var(--color-green-dark);
	border-bottom: 2px solid var(--color-green-dark);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.faq__item[open] .faq__q::after {
	transform: rotate(-135deg);
}

.faq__a {
	padding: 0 2.5rem var(--space-md) 2.4rem;
}

.faq__a p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-gray-500);
	max-width: 60ch;
}

/* ─── Contact + FAQ — mobile ──────────────────────────────────────────── */
@media (max-width: 768px) {
	.contact-hero {
		margin-left: 0;
		margin-right: 0;
		padding: var(--space-lg) var(--space-md);
	}

	.contact-form {
		padding: var(--space-lg) var(--space-md) var(--space-xl);
	}

	.contact-form__panel {
		padding: var(--space-md) var(--space-md) var(--space-lg);
	}

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

	.contact-form__input {
		padding: 0.5rem 0.7rem;
	}

	.contact-form__textarea {
		min-height: 2.5rem;
	}

	.faq {
		margin-left: 0;
		margin-right: 0;
		padding: var(--space-xl) var(--space-md) var(--space-xl);
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   CONFIRMATION PAGE — /project-submitted/ (intent-agnostic success page)
   Scoped selectors only. Does NOT reuse or modify about-proof__* (shared
   with the About page).
   Rhythm: cream confirmation band -> white onward cards -> cream follow-up.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Compact cream confirmation band ─────────────────────────────────── */
.submitted-confirm {
	position: relative;
	background-color: var(--color-cream);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
	padding: var(--space-xl) var(--space-md) var(--space-lg);
}

.submitted-confirm::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.submitted-confirm__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.submitted-confirm__headline {
	margin: 0 0 var(--space-md);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: var(--color-black);
}

.submitted-confirm__sub {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--color-gray-500);
}

/* ─── White onward section — stacked cards ────────────────────────────── */
.submitted-next {
	background-color: var(--color-white);
	padding: var(--space-xl) var(--space-md);
}

.submitted-next__inner {
	max-width: 820px;
	margin: 0 auto;
}

.submitted-next__heading {
	margin: 0 0 var(--space-lg);
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-black);
}

.submitted-next__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.submitted-next__card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	padding: var(--space-md) var(--space-lg);
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-left: 3px solid var(--color-green-dark);
	border-radius: 2px;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.submitted-next__card:hover,
.submitted-next__card:focus {
	background-color: var(--color-gray-50);
	border-color: var(--color-gray-200);
	border-left-color: var(--color-green-dark);
}

.submitted-next__card-body {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.submitted-next__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-green-dark);
}

.submitted-next__desc {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #4b5563;
	max-width: 58ch;
}

.submitted-next__cta {
	flex: 0 0 auto;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-black);
	white-space: nowrap;
	transition: color 0.15s ease;
}

.submitted-next__card:hover .submitted-next__cta,
.submitted-next__card:focus .submitted-next__cta {
	color: var(--color-green-dark);
}

/* ─── Cream follow-up band above footer ───────────────────────────────── */
.submitted-followup {
	position: relative;
	background-color: var(--color-cream);
	margin-left: calc(-1 * var(--space-md));
	margin-right: calc(-1 * var(--space-md));
	padding: var(--space-xl) var(--space-md);
}

.submitted-followup::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background-color: var(--color-cream);
	z-index: -1;
}

.submitted-followup__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.submitted-followup__text {
	margin: 0 0 var(--space-sm);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-gray-500);
}

.submitted-followup__cta {
	display: inline-block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-green-dark);
	text-decoration: none;
	border-bottom: 1.5px solid var(--color-green-dark);
	padding-bottom: 2px;
}

.submitted-followup__cta:hover,
.submitted-followup__cta:focus {
	color: var(--color-black);
	border-bottom-color: var(--color-black);
}

/* ─── Confirmation page — mobile ──────────────────────────────────────── */
@media (max-width: 768px) {
	.submitted-confirm {
		margin-left: 0;
		margin-right: 0;
		padding: var(--space-lg) var(--space-md);
	}

	.submitted-next {
		padding: var(--space-lg) var(--space-md);
	}

	.submitted-next__card {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-sm);
	}

	.submitted-followup {
		margin-left: 0;
		margin-right: 0;
		padding: var(--space-lg) var(--space-md);
	}
}