/* Career Voyage — component styles. Ported from the design system's React reference
   (components/core, components/sections, components/chrome) into cv- prefixed classes
   for use on core WordPress blocks inside block patterns. One block of CSS per component,
   in the same order as readme.md's Components section. */

/* ============================= Core: SectionShell ============================= */
.cv-section { padding: var(--section-y) var(--gutter); }
.cv-section--tight { padding: var(--space-8) var(--gutter); }
.cv-section--tone-paper { background: var(--surface-page); color: var(--text-on-paper); }
.cv-section--tone-navy { background: var(--navy); color: var(--text-body-on-navy); }
.cv-section--tone-navy-mid { background: var(--navy-mid); color: var(--text-body-on-navy); }
.cv-section--rule.cv-section--tone-paper { border-top: 1px solid var(--rule-on-paper); }
.cv-section--rule.cv-section--tone-navy,
.cv-section--rule.cv-section--tone-navy-mid { border-top: 1px solid var(--rule-on-navy); }

.cv-section__inner { max-width: var(--page-max); margin: 0 auto; }
.cv-section__inner--prose { max-width: var(--prose-max); }

.cv-eyebrow {
	font-family: var(--font-heading);
	font-size: var(--text-small);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	margin: 0 0 var(--space-3);
}
.cv-section--tone-paper .cv-eyebrow { color: var(--text-accent-on-paper); }
.cv-section--tone-navy .cv-eyebrow,
.cv-section--tone-navy-mid .cv-eyebrow { color: var(--text-accent-on-navy); }

/* RuledLabel: centred uppercase label with flanking hairlines. */
.cv-ruled-label {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	margin: 0 0 var(--space-5);
}
.cv-ruled-label::before,
.cv-ruled-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rule-on-paper);
}
.cv-section--tone-navy .cv-ruled-label::before,
.cv-section--tone-navy .cv-ruled-label::after,
.cv-section--tone-navy-mid .cv-ruled-label::before,
.cv-section--tone-navy-mid .cv-ruled-label::after { background: var(--rule-strong-on-navy); }
.cv-ruled-label__text {
	font-family: var(--font-heading);
	font-size: var(--text-small);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--navy);
}
.cv-section--tone-navy .cv-ruled-label__text,
.cv-section--tone-navy-mid .cv-ruled-label__text { color: var(--silver); }
/*
 * nowrap keeps the label on one line between its two rules, which is the point of
 * the component — but a long label (Home's "A simple five-step framework...") is
 * ~570px of uppercase tracking and pushed the whole page wider than a phone screen.
 * Below the breakpoint, let it wrap and centre instead.
 */
@media (max-width: 767px) {
	.cv-ruled-label__text { white-space: normal; text-align: center; }
}

/* ============================= Core: GlimmerHeading ============================= */
.cv-glimmer-heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-display);
	margin: 0;
}
.cv-glimmer-heading--display-xl { font-size: var(--text-display-xl); line-height: 1.08; }
.cv-glimmer-heading--display { font-size: var(--text-display); line-height: var(--lh-display); }
.cv-glimmer-heading--h1 { font-size: var(--text-h1); line-height: var(--lh-heading); }
.cv-glimmer-heading--h2 { font-size: var(--text-h2); line-height: var(--lh-heading); }

/* The glimmer treatment itself: navy bands, 24px+, never body copy. */
.cv-glimmer-heading--glimmer {
	color: var(--glimmer-fallback);
	background-image: var(--glimmer);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.cv-glimmer-heading--solid-navy { color: var(--text-heading-on-navy); }
.cv-glimmer-heading--solid-paper { color: var(--text-heading-on-paper); }

/* ============================= Core: Highlight ============================= */
.cv-highlight {
	display: inline-block;
	padding: .06em .28em .1em;
	margin: 0 -.06em;
	border-radius: 2px;
}
.cv-highlight--paper { background: var(--highlight-on-paper); color: var(--highlight-on-paper-text); }
.cv-highlight--navy { background: var(--highlight-on-navy); color: var(--highlight-on-navy-text); }

/* ============================= Core: Icon ============================= */
.cv-icon { display: inline-flex; flex: 0 0 auto; color: currentColor; }
.cv-icon svg { display: block; width: 100%; height: 100%; }
.cv-icon--16 { width: 16px; height: 16px; }
.cv-icon--18 { width: 18px; height: 18px; }
.cv-icon--20 { width: 20px; height: 20px; }
.cv-icon--24 { width: 24px; height: 24px; }
.cv-icon--26 { width: 26px; height: 26px; }
.cv-icon--28 { width: 28px; height: 28px; }

/* ============================= Core: Button ============================= */
.cv-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--tap-min);
	padding: 12px 26px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-heading);
	font-weight: var(--weight-semibold);
	font-size: var(--text-body);
	line-height: 1.2;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color var(--dur-1) var(--ease-voyage), color var(--dur-1) var(--ease-voyage),
		border-color var(--dur-1) var(--ease-voyage), transform var(--dur-1) var(--ease-voyage);
}
.cv-button:active { transform: translateY(1px); }
.cv-button .cv-icon { transition: none; }

.cv-button--dark-primary { background: var(--action-primary); color: var(--action-primary-text); }
.cv-button--dark-primary:hover { background: var(--teal-bright-hover); color: var(--action-primary-text); }
.cv-button--dark-primary:active { background: var(--teal-bright-press); }

.cv-button--dark-secondary { background: transparent; color: var(--silver-light); border-color: var(--rule-strong-on-navy); }
.cv-button--dark-secondary:hover { background: var(--silver-08); color: var(--silver-light); }

.cv-button--dark-ghost { background: transparent; color: var(--text-accent-on-navy); padding: 12px 4px; min-height: auto; }
.cv-button--dark-ghost:hover { text-decoration: underline !important; color: var(--text-accent-on-navy); }

.cv-button--light-primary { background: var(--action-primary-light); color: var(--action-primary-light-text); }
.cv-button--light-primary:hover { background: var(--teal-deep-hover); color: var(--action-primary-light-text); }
.cv-button--light-primary:active { background: var(--navy); }

.cv-button--light-secondary { background: transparent; color: var(--navy); border-color: var(--rule-on-paper); }
.cv-button--light-secondary:hover { background: rgba(19, 36, 58, .05); color: var(--navy); }

.cv-button--light-ghost { background: transparent; color: var(--text-accent-on-paper); padding: 12px 4px; min-height: auto; }
.cv-button--light-ghost:hover { text-decoration: underline !important; color: var(--text-accent-on-paper); }

.cv-button--full { width: 100%; }
.cv-button[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ============================= Chrome: SiteHeader ============================= */
.cv-site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background-color: rgba(244, 247, 250, .92);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--rule-on-paper);
}
.cv-site-header__bar {
	max-width: var(--page-max);
	margin: 0 auto;
	padding: var(--space-3) var(--gutter);
	min-height: 88px;
	display: flex;
	align-items: center;
	gap: var(--space-5);
	flex-wrap: wrap;
}
.cv-site-header__logo { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none !important; }
.cv-site-header__logo img { height: 64px; width: auto; display: block; }

.cv-site-header__nav-wrap { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.cv-nav { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.cv-nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	padding: 0 2px;
	font-family: var(--font-heading);
	font-size: var(--text-small);
	font-weight: var(--weight-semibold);
	text-decoration: none !important;
	white-space: nowrap;
	color: var(--navy);
	border-bottom: 2px solid transparent;
}
.cv-nav a[aria-current="page"] {
	color: var(--text-accent-on-paper);
	border-bottom-color: var(--text-accent-on-paper);
}
.cv-nav a:hover { color: var(--teal-deep-hover); }

.cv-site-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	margin-left: auto;
	border: 1px solid var(--rule-on-paper);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--navy);
}
/*
 * Seven nav items plus the lockup and the Contact button need about 1150px. Below that
 * the row wrapped instead of collapsing — at 768px the header stood 294px tall, three
 * stacked rows, across the whole tablet and small-laptop range. The toggle takes over
 * wherever the row will not fit on one line, not only on phones.
 */
@media (max-width: 1149px) {
	.cv-site-header__bar { min-height: 68px; padding: var(--space-2) var(--gutter); position: relative; }
	.cv-site-header__logo img { height: 48px; }
	.cv-site-header__toggle { display: inline-flex; }
	.cv-site-header__nav-wrap { display: none; width: 100%; margin-left: 0; justify-content: flex-start; }
	.cv-site-header__nav-wrap.is-open { display: flex; }
	.cv-nav { flex-direction: column; align-items: flex-start; gap: var(--space-2); width: 100%; }
}

/* ============================= Chrome: SiteFooter ============================= */
.cv-site-footer {
	background: var(--navy);
	border-top: 1px solid var(--rule-on-navy);
	padding: var(--space-9) var(--gutter) var(--space-6);
	color: var(--silver);
}
.cv-site-footer__grid {
	max-width: var(--page-max);
	margin: 0 auto;
	display: grid;
	gap: var(--space-8);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cv-site-footer__logo img { height: 56px; width: auto; display: block; }
.cv-site-footer__lede { margin-top: var(--space-4); font-size: var(--text-small); line-height: var(--lh-body); color: var(--silver-mid); max-width: 32ch; }
.cv-site-footer__head {
	font-family: var(--font-heading);
	font-size: var(--text-small);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--silver-mid);
	margin: 0 0 var(--space-3);
}
.cv-site-footer__links { display: grid; }
.cv-site-footer__links a,
.cv-site-footer__contact a {
	color: var(--silver);
	text-decoration: none !important;
	font-size: var(--text-small);
	line-height: 2;
}
.cv-site-footer__links a:hover,
.cv-site-footer__contact a:hover { color: var(--silver-light); }
.cv-site-footer__contact { display: grid; gap: var(--space-2); }
.cv-site-footer__contact a { display: inline-flex; align-items: center; gap: var(--space-2); }
.cv-site-footer__substack { color: var(--text-accent-on-navy) !important; }
.cv-site-footer__socials { display: flex; gap: var(--space-3); }
.cv-site-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	border: 1px solid var(--rule-on-navy);
	border-radius: var(--radius-sm);
	color: var(--silver);
	text-decoration: none !important;
}
.cv-site-footer__social:hover { color: var(--silver-light); background: var(--silver-08); }
.cv-site-footer__bottom {
	max-width: var(--page-max);
	margin: var(--space-8) auto 0;
	padding-top: var(--space-5);
	border-top: 1px solid var(--rule-on-navy);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
	justify-content: space-between;
}
.cv-site-footer__copy { font-size: var(--text-small); color: var(--silver-mid); margin: 0; }
.cv-site-footer__signoff { font-family: var(--font-body); font-style: italic; font-size: var(--text-md); color: var(--teal-bright); margin: 0; }
.cv-site-footer__mark { color: var(--silver-mid); }

/* ============================= S1: Hero ============================= */
.cv-hero { position: relative; background: var(--navy); isolation: isolate; overflow: clip; }
.cv-hero__media { position: absolute; inset: 0; z-index: -3; }
.cv-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 62%;
	transform-origin: center;
}
/*
 * Opt-in, via 'image_enhance' on the hero. It was applied to every hero, so photographs
 * that never asked for it — the workshop photo of Sarah, the TEDx hero — were being
 * graded too.
 */
.cv-hero__media img.cv-hero__image--enhanced {
	filter: saturate(1.08) contrast(1.07) brightness(1.025);
	transform: scale(1.012);
}
.cv-hero__media img.cv-hero__image--flip { transform: scaleX(-1); }
.cv-hero__media img.cv-hero__image--flip.cv-hero__image--enhanced { transform: scaleX(-1) scale(1.012); }
.cv-hero__scrim-h { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(13,27,42,.96) 0%, rgba(13,27,42,.88) 44%, rgba(13,27,42,.52) 100%); }
.cv-hero__scrim-v { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,27,42,.6) 0%, rgba(13,27,42,0) 34%, rgba(13,27,42,.6) 100%); }
.cv-hero--no-media .cv-hero__scrim-h,
.cv-hero--no-media .cv-hero__scrim-v { display: none; }
.cv-hero__crumbs {
	position: relative;
	max-width: var(--page-max);
	margin: 0 auto;
	padding: var(--space-4) var(--gutter) 0;
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	font-family: var(--font-heading);
	font-size: var(--text-small);
}
.cv-hero__crumbs a { color: var(--silver-mid); text-decoration: none !important; }
.cv-hero__crumbs a:hover { color: var(--silver-light); }
.cv-hero__crumbs span[aria-current] { color: var(--teal-bright); }
.cv-hero__inner {
	position: relative;
	max-width: var(--page-max);
	margin: 0 auto;
	padding: var(--space-10) var(--gutter);
}
.cv-hero--compact .cv-hero__inner { padding: var(--space-8) var(--gutter) var(--space-9); }
.cv-hero--center .cv-hero__inner { text-align: center; }
.cv-hero__eyebrow { color: var(--teal-bright); margin-bottom: var(--space-4); }
.cv-hero__heading { max-width: 20ch; }
.cv-hero--center .cv-hero__heading { margin-inline: auto; }
.cv-hero__accent-lines { margin-top: var(--space-5); display: grid; gap: 2px; }
.cv-hero__accent-lines p { font-family: var(--font-body); font-style: italic; font-size: var(--text-h2); line-height: 1.35; color: var(--teal-bright); margin: 0; }
.cv-hero__subhead { margin-top: var(--space-5); max-width: 54ch; font-size: var(--text-md); line-height: var(--lh-body); color: var(--silver); }
.cv-hero--center .cv-hero__subhead { margin-inline: auto; }
.cv-hero__buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); }
.cv-hero--center .cv-hero__buttons { justify-content: center; }
.cv-hero__kicker { margin-top: var(--space-7); font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--silver-light); }
.cv-hero__edge { height: 1px; background: var(--glimmer-edge); }

/* ============================= S2: Proposition ============================= */
.cv-proposition__statement { max-width: 30ch; }
.cv-route-cards { display: grid; gap: var(--space-5); margin-top: var(--space-7); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cv-route-card {
	display: block;
	text-decoration: none !important;
	padding: var(--space-6);
	border-radius: var(--radius-md);
	transition: transform var(--dur-2) var(--ease-voyage), box-shadow var(--dur-2) var(--ease-voyage);
}
.cv-section--tone-paper .cv-route-card { background: var(--surface-light-card); border: 1px solid var(--rule-on-paper); box-shadow: var(--shadow-1); }
.cv-section--tone-navy .cv-route-card,
.cv-section--tone-navy-mid .cv-route-card { background: var(--navy-mid); border: 1px solid var(--rule-on-navy); box-shadow: var(--edge-sheen); }
.cv-route-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.cv-route-card__icon { margin-bottom: var(--space-3); }
.cv-section--tone-paper .cv-route-card__icon { color: var(--text-accent-on-paper); }
.cv-section--tone-navy .cv-route-card__icon,
.cv-section--tone-navy-mid .cv-route-card__icon { color: var(--text-accent-on-navy); }
.cv-route-card h3 { font-size: var(--text-h2); }
.cv-section--tone-paper .cv-route-card h3 { color: var(--navy); }
.cv-section--tone-navy .cv-route-card h3,
.cv-section--tone-navy-mid .cv-route-card h3 { color: var(--silver-light); }
.cv-route-card p { margin-top: var(--space-2); }
.cv-section--tone-paper .cv-route-card p { color: var(--ink); }
.cv-section--tone-navy .cv-route-card p,
.cv-section--tone-navy-mid .cv-route-card p { color: var(--silver); }
.cv-route-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
	font-family: var(--font-heading);
	font-weight: var(--weight-semibold);
}
.cv-section--tone-paper .cv-route-card__link { color: var(--text-accent-on-paper); }
.cv-section--tone-navy .cv-route-card__link,
.cv-section--tone-navy-mid .cv-route-card__link { color: var(--text-accent-on-navy); }


/* Gateway treatment: route-led wayfinding without literal airport styling. */
.cv-proposition__statement {
	max-width: none;
	text-align: center;
	font-size: clamp(2.3rem, 4.8vw, 4.5rem);
}
.cv-route-cards:has(.cv-route-card--gateway) {
	grid-template-columns: 1fr;
	gap: 18px;
	max-width: 1120px;
	margin-inline: auto;
}
.cv-route-card--gateway {
	display: grid;
	grid-template-columns: 132px 1fr;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
	border-radius: 14px;
	background: #0D1B2A !important;
	border: 1px solid rgba(24,181,198,.34) !important;
	box-shadow: 0 14px 34px rgba(13,27,42,.13), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.cv-route-card--gateway + .cv-route-card--gateway {
	background: #14304A !important;
}
.cv-route-card--gateway:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px rgba(13,27,42,.18), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.cv-route-card__number {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 28px 18px;
	border-right: 1px solid rgba(24,181,198,.42);
	font-family: var(--font-heading);
	line-height: 1;
	color: var(--silver-light);
}
.cv-route-card__number-label {
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: var(--weight-semibold);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--teal-bright);
}
.cv-route-card__number-value {
	font-size: clamp(3.25rem, 5.4vw, 4.6rem);
	font-weight: var(--weight-semibold);
	letter-spacing: -.045em;
	color: var(--silver-light);
}
.cv-route-card__gateway-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 26px 28px 20px;
}
.cv-route-card__eyebrow {
	display: block;
	margin: 0 0 9px;
	font-family: var(--font-heading);
	font-size: .82rem;
	font-weight: var(--weight-semibold);
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--teal-bright);
}
.cv-route-card__gateway-row {
	display: grid;
	grid-template-columns: 1fr 54px;
	gap: 18px;
	align-items: center;
}
.cv-route-card__gateway-title {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(1.85rem, 3.2vw, 3rem);
	font-weight: var(--weight-semibold);
	line-height: 1.06;
	letter-spacing: -.015em;
	color: var(--silver-light);
}
.cv-route-card__gateway-arrow {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(24,181,198,.55);
	border-radius: 8px;
	color: var(--teal-bright);
	background: rgba(24,181,198,.05);
	transition: background-color var(--dur-2) var(--ease-voyage), transform var(--dur-2) var(--ease-voyage);
}
.cv-route-card--gateway:hover .cv-route-card__gateway-arrow {
	transform: translateX(3px);
	background: rgba(24,181,198,.1);
}
.cv-route-card__topics {
	display: block;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid rgba(192,197,204,.18);
	font-family: var(--font-heading);
	font-size: clamp(.82rem, 1.05vw, .96rem);
	font-weight: var(--weight-medium);
	letter-spacing: .005em;
	line-height: 1.55;
	text-transform: none;
	color: var(--silver);
	word-spacing: .08em;
}
@media (max-width: 760px) {
	.cv-route-card--gateway { grid-template-columns: 82px 1fr; border-radius: 10px; }
	.cv-route-card__number { padding: 20px 10px; }
	.cv-route-card__number-label { font-size: 9px; letter-spacing: .16em; }
	.cv-route-card__number-value { font-size: 2.65rem; }
	.cv-route-card__gateway-content { padding: 20px 16px 16px; }
	.cv-route-card__gateway-row { grid-template-columns: 1fr 44px; gap: 12px; }
	.cv-route-card__gateway-title { font-size: clamp(1.2rem, 5.2vw, 1.7rem); }
	.cv-route-card__gateway-arrow { width: 44px; height: 44px; }
	.cv-route-card__topics { font-size: .66rem; }
}

/* ============================= S3: Split ============================= */
.cv-split__grid { display: grid; gap: var(--space-8); align-items: center; grid-template-columns: 1fr; }
/* Top-aligned, so the photo starts level with the heading. Centred, a short image
   against a long column of copy floats with dead space above and below it. */
.cv-split--media .cv-split__grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
/*
 * Fixed 3:2 crop rather than stretching to whatever height the text column happens to
 * be. These are wide coastal photographs: letting a long column of copy drive the
 * height squeezed a panorama into a near-square and threw away the composition, so a
 * picture of a headland became a tall box of flat water.
 */
.cv-split__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	max-height: 520px;
	object-fit: cover;
	border-radius: var(--radius-md);
}
/* A standing portrait, framed as one. Used where the subject is a person rather than
   a stretch of coast, and the 3:2 crop would leave only a face. */
.cv-split__media--tall img { aspect-ratio: 3 / 4; max-height: 640px; }
.cv-split__heading { font-size: var(--text-h1); }
.cv-section--tone-paper .cv-split__heading { color: var(--navy); }
.cv-section--tone-navy .cv-split__heading,
.cv-section--tone-navy-mid .cv-split__heading { color: var(--silver-light); }
.cv-split__prose { margin-top: var(--space-4); max-width: var(--measure); }
.cv-section--tone-paper .cv-split__prose { color: var(--ink); }
.cv-section--tone-navy .cv-split__prose,
.cv-section--tone-navy-mid .cv-split__prose { color: var(--silver); }
/*
 * Same reading measure as the prose above them. Without it the bullets in a split
 * that has no image run the full 1200px, so a long one sets a ~115-character line
 * directly under a paragraph wrapping at 62.
 */
.cv-split__bullets { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-3); max-width: var(--measure); }
.cv-split__bullets li { display: flex; gap: var(--space-3); align-items: flex-start; }
.cv-section--tone-paper .cv-split__bullets li { color: var(--ink); }
.cv-section--tone-navy .cv-split__bullets li,
.cv-section--tone-navy-mid .cv-split__bullets li { color: var(--silver); }
.cv-split__bullets .cv-icon { margin-top: 4px; flex-shrink: 0; }
.cv-section--tone-paper .cv-split__bullets .cv-icon { color: var(--text-accent-on-paper); }
.cv-section--tone-navy .cv-split__bullets .cv-icon,
.cv-section--tone-navy-mid .cv-split__bullets .cv-icon { color: var(--text-accent-on-navy); }
.cv-split__patterns {
	list-style: none;
	padding: var(--space-5) 0 0;
	margin: var(--space-6) 0 0;
	border-top: 1px solid var(--rule-on-paper);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	font-family: var(--font-heading);
	font-size: var(--text-small);
	line-height: 1.7;
}
/*
 * Separator as generated content, so it is styling rather than copy in the markup.
 * It trails its own item rather than leading the next one: inside the preceding <li>
 * it can never wrap onto a new line by itself and leave a dangling middot at the
 * start of a row.
 */
.cv-split__patterns li:not(:last-child)::after {
	content: "·";
	margin: 0 var(--space-3);
	opacity: .6;
}
.cv-section--tone-paper .cv-split__patterns { color: var(--text-accent-on-paper); }
.cv-section--tone-navy .cv-split__patterns,
.cv-section--tone-navy-mid .cv-split__patterns { color: var(--text-accent-on-navy); border-top-color: var(--rule-on-navy); }
.cv-split__cta { margin-top: var(--space-6); }

/* ============================= S4: Icon grid ============================= */
.cv-icon-grid__intro { margin-top: var(--space-3); max-width: var(--measure); }
.cv-icon-grid { display: grid; gap: var(--space-5); margin-top: var(--space-7); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cv-icon-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cv-icon-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cv-icon-grid__item { padding: var(--space-5) var(--space-4) var(--space-5) 0; border-radius: 0; }
.cv-section--tone-paper .cv-icon-grid__item { background: transparent; border: 0; border-top: 2px solid var(--rule-on-paper); }
/* The paper variant is now a top-ruled column with no left padding, so the navy one
   cannot keep a box — its content would sit against the left border. */
.cv-section--tone-navy .cv-icon-grid__item,
.cv-section--tone-navy-mid .cv-icon-grid__item { background: transparent; border: 0; border-top: 2px solid var(--rule-strong-on-navy); }
.cv-icon-grid__item .cv-icon {}
.cv-section--tone-paper .cv-icon-grid__item .cv-icon { color: var(--text-accent-on-paper); }
.cv-section--tone-navy .cv-icon-grid__item .cv-icon,
.cv-section--tone-navy-mid .cv-icon-grid__item .cv-icon { color: var(--text-accent-on-navy); }
.cv-icon-grid__item h3 { margin-top: var(--space-3); font-size: var(--text-h3); }
.cv-section--tone-paper .cv-icon-grid__item h3 { color: var(--navy); }
.cv-section--tone-navy .cv-icon-grid__item h3,
.cv-section--tone-navy-mid .cv-icon-grid__item h3 { color: var(--silver-light); }
.cv-icon-grid__item p { margin-top: var(--space-1); font-size: var(--text-small); line-height: var(--lh-small); }
.cv-section--tone-paper .cv-icon-grid__item p { color: var(--ink); }
.cv-section--tone-navy .cv-icon-grid__item p,
.cv-section--tone-navy-mid .cv-icon-grid__item p { color: var(--silver-mid); }
@media (max-width: 1023px) { .cv-icon-grid, .cv-icon-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .cv-icon-grid, .cv-icon-grid--3, .cv-icon-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .cv-icon-grid, .cv-icon-grid--3, .cv-icon-grid--5 { grid-template-columns: 1fr; } }

/* ============================= S5: Framework strip ============================= */
.cv-framework__heading { font-size: var(--text-h1); max-width: 36ch; }
.cv-section--tone-paper .cv-framework__heading { color: var(--navy); }
.cv-section--tone-navy .cv-framework__heading,
.cv-section--tone-navy-mid .cv-framework__heading { color: var(--silver-light); }
.cv-framework { position: relative; margin-top: var(--space-8); }
.cv-framework__rule { position: absolute; left: 0; right: 0; top: 29px; height: 1px; z-index: 0; }
.cv-section--tone-paper .cv-framework__rule { background: var(--rule-on-paper); }
.cv-section--tone-navy .cv-framework__rule,
.cv-section--tone-navy-mid .cv-framework__rule { background: var(--glimmer-edge); }
.cv-framework__steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--space-5); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cv-framework__step { position: relative; }
.cv-framework__step::after {
	content: "";
	position: absolute;
	left: 68px; right: -22px; top: 29px;
	border-top: 1px dashed var(--teal-mid);
	opacity: .65;
}
.cv-section--tone-navy .cv-framework__step::after,
.cv-section--tone-navy-mid .cv-framework__step::after { border-top-color: var(--teal-bright); }
.cv-framework__step:last-child::after { display: none; }
.cv-framework__badge-wrap { position: relative; display: inline-block; }
.cv-framework__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px; height: 58px;
	border-radius: var(--radius-pill);
	color: var(--teal-bright);
}
.cv-section--tone-paper .cv-framework__badge { background: var(--navy); border: 1px solid var(--navy); }
.cv-section--tone-navy .cv-framework__badge,
.cv-section--tone-navy-mid .cv-framework__badge { background: var(--navy-mid); border: 1px solid var(--rule-strong-on-navy); }
.cv-framework__number {
	position: absolute; top: -2px; right: -6px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px;
	border-radius: var(--radius-pill);
	font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 12px;
}
.cv-section--tone-paper .cv-framework__number { background: var(--teal-deep); color: var(--paper); }
.cv-section--tone-navy .cv-framework__number,
.cv-section--tone-navy-mid .cv-framework__number { background: var(--teal-bright); color: var(--navy); }
.cv-framework__step h3 { margin-top: var(--space-3); font-size: var(--text-h3); }
.cv-section--tone-paper .cv-framework__step h3 { color: var(--navy); }
.cv-section--tone-navy .cv-framework__step h3,
.cv-section--tone-navy-mid .cv-framework__step h3 { color: var(--silver-light); }
.cv-framework__step p { margin-top: var(--space-1); font-size: var(--text-small); line-height: var(--lh-small); }
.cv-section--tone-paper .cv-framework__step p { color: var(--ink); }
.cv-section--tone-navy .cv-framework__step p,
.cv-section--tone-navy-mid .cv-framework__step p { color: var(--silver-mid); }
/* The step's own sentence, above the detail. Heavier and in the heading face so the
   two lines read as statement then supporting detail rather than one run of text. */
.cv-framework__lead {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-body);
	line-height: var(--lh-body);
}
.cv-section--tone-paper .cv-framework__lead { color: var(--navy); }
.cv-section--tone-navy .cv-framework__lead,
.cv-section--tone-navy-mid .cv-framework__lead { color: var(--silver-light); }

/*
 * Boxed variant. Five cards rather than five points on a rule — the connectors go with
 * it, because a dotted line running through the gaps between cards reads as a fault.
 * The cards stretch to a common height, which is what carries the longer fifth step.
 */
.cv-framework--boxed { margin-top: var(--space-6); }
.cv-framework--boxed .cv-framework__rule,
.cv-framework--boxed .cv-framework__step::after { display: none; }
.cv-framework--boxed .cv-framework__steps { gap: var(--space-4); align-items: stretch; }
.cv-framework--boxed .cv-framework__step {
	padding: var(--space-5);
	border-radius: var(--radius-md);
	/* The number badge sits proud of the icon, so the card needs room for it. */
	padding-top: var(--space-6);
}
.cv-section--tone-paper .cv-framework--boxed .cv-framework__step {
	background: var(--surface-light-card);
	border: 1px solid var(--rule-on-paper);
	box-shadow: var(--shadow-1);
}
.cv-section--tone-navy .cv-framework--boxed .cv-framework__step,
.cv-section--tone-navy-mid .cv-framework--boxed .cv-framework__step {
	background: var(--navy-mid);
	border: 1px solid var(--rule-strong-on-navy);
	box-shadow: var(--edge-sheen);
}

/* The ways of working the framework produces. Same treatment as the split's pattern
   list, so the two read as the same kind of thing in two places. */
.cv-framework__ways {
	list-style: none;
	padding: var(--space-5) 0 0;
	margin: var(--space-7) 0 0;
	border-top: 1px solid var(--rule-on-paper);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	font-family: var(--font-heading);
	font-size: var(--text-small);
	line-height: 1.8;
}
.cv-framework__ways li:not(:last-child)::after {
	content: "·";
	margin: 0 var(--space-3);
	opacity: .6;
}
.cv-section--tone-paper .cv-framework__ways { color: var(--text-accent-on-paper); }
.cv-section--tone-navy .cv-framework__ways,
.cv-section--tone-navy-mid .cv-framework__ways { color: var(--teal-bright); border-top-color: var(--rule-strong-on-navy); }

.cv-framework__outro {
	margin-top: var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	max-width: 62ch;
}
.cv-section--tone-paper .cv-framework__outro { color: var(--navy); }
.cv-section--tone-navy .cv-framework__outro,
.cv-section--tone-navy-mid .cv-framework__outro { color: var(--silver-light); }

@media (max-width: 1199px) {
	.cv-framework--boxed .cv-framework__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
	.cv-framework--boxed .cv-framework__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.cv-framework__rule { display: none; }
	.cv-framework__step::after { display: none; }
	.cv-framework__steps { grid-template-columns: 1fr; gap: var(--space-6); }
	/* Two up down to a large phone, one below: at 390px two cards leave about 160px each,
	   which is not enough for "Connect people, generations and opportunity". */
	.cv-framework--boxed .cv-framework__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
	.cv-framework--boxed .cv-framework__step { padding: var(--space-4); padding-top: var(--space-5); }
}
@media (max-width: 479px) {
	.cv-framework--boxed .cv-framework__steps { grid-template-columns: 1fr; }
}

/* ============================= S6: Quote ============================= */
.cv-quote { margin: 0; text-align: center; }
.cv-quote__mark { margin: 0 auto; }
.cv-section--tone-paper .cv-quote__mark { color: var(--text-accent-on-paper); }
.cv-section--tone-navy .cv-quote__mark,
.cv-section--tone-navy-mid .cv-quote__mark { color: var(--silver-mid); }
.cv-quote__text {
	margin: var(--space-4) 0 0;
	font-family: var(--font-heading);
	font-size: var(--text-quote);
	line-height: 1.3;
	font-weight: var(--weight-regular);
}
.cv-section--tone-paper .cv-quote__text { color: var(--navy); }
.cv-section--tone-navy .cv-quote__text,
.cv-section--tone-navy-mid .cv-quote__text { color: var(--silver-light); }
.cv-quote__caption { margin-top: var(--space-5); font-size: var(--text-small); letter-spacing: .02em; }
.cv-section--tone-paper .cv-quote__caption { color: var(--ink); }
.cv-section--tone-navy .cv-quote__caption,
.cv-section--tone-navy-mid .cv-quote__caption { color: var(--silver-mid); }

/* ============================= S7: Stat band ============================= */
.cv-stat-band__heading { font-size: var(--text-h2); max-width: 30ch; }
.cv-section--tone-paper .cv-stat-band__heading { color: var(--navy); }
.cv-section--tone-navy .cv-stat-band__heading,
.cv-section--tone-navy-mid .cv-stat-band__heading { color: var(--silver-light); }
.cv-stat-band { display: grid; gap: var(--space-6); margin: var(--space-7) 0 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cv-stat { padding-top: var(--space-4); }
.cv-section--tone-paper .cv-stat { border-top: 1px solid var(--rule-on-paper); }
.cv-section--tone-navy .cv-stat,
.cv-section--tone-navy-mid .cv-stat { border-top: 1px solid var(--rule-strong-on-navy); }
.cv-stat__icon { margin-bottom: var(--space-3); }
.cv-section--tone-paper .cv-stat__icon { color: var(--teal-mid); }
.cv-section--tone-navy .cv-stat__icon,
.cv-section--tone-navy-mid .cv-stat__icon { color: var(--teal-bright); }
.cv-stat__figure {
	font-family: var(--font-heading);
	font-size: var(--text-display);
	line-height: 1.05;
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-display);
	margin: 0;
}
.cv-section--tone-paper .cv-stat__figure { color: var(--navy); }
.cv-section--tone-navy .cv-stat__figure,
.cv-section--tone-navy-mid .cv-stat__figure { color: var(--silver-light); }
.cv-stat__label { margin: var(--space-3) 0 0; }
.cv-section--tone-paper .cv-stat__label { color: var(--ink); }
.cv-section--tone-navy .cv-stat__label,
.cv-section--tone-navy-mid .cv-stat__label { color: var(--silver); }
.cv-stat__source { margin-top: var(--space-2); font-size: var(--text-small); line-height: var(--lh-small); }
.cv-section--tone-paper .cv-stat__source { color: var(--text-muted-on-paper); }
.cv-section--tone-navy .cv-stat__source,
.cv-section--tone-navy-mid .cv-stat__source { color: var(--silver-mid); }
.cv-stat__source--missing { font-style: italic; }

/* ============================= S8: Signpost cards ============================= */
.cv-signpost-cards__intro { margin-top: var(--space-3); max-width: var(--measure); }
.cv-signpost-cards { display: grid; gap: var(--space-4); margin-top: var(--space-7); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cv-signpost-card {
	display: flex; flex-direction: column; gap: var(--space-2);
	text-decoration: none !important;
	padding: var(--space-5); min-height: 150px;
	border-radius: var(--radius-md);
	transition: transform var(--dur-2) var(--ease-voyage), box-shadow var(--dur-2) var(--ease-voyage);
}
.cv-section--tone-paper .cv-signpost-card { background: var(--surface-light-card); border: 1px solid var(--rule-on-paper); box-shadow: var(--shadow-1); }
.cv-section--tone-navy .cv-signpost-card,
.cv-section--tone-navy-mid .cv-signpost-card { background: var(--navy-mid); border: 1px solid var(--rule-on-navy); box-shadow: var(--edge-sheen); }
.cv-signpost-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.cv-signpost-card h3 { font-size: var(--text-h3); }
/* Status flag for something not launched yet. Sits inline after the title so it wraps
   with it rather than pushing the card taller on a narrow column. */
.cv-signpost-card__badge {
	display: inline-block;
	margin-left: var(--space-2);
	padding: 2px var(--space-2);
	border-radius: 999px;
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}
.cv-section--tone-paper .cv-signpost-card__badge { color: var(--text-accent-on-paper); background: rgba(14, 110, 122, .10); }
.cv-section--tone-navy .cv-signpost-card__badge,
.cv-section--tone-navy-mid .cv-signpost-card__badge { color: var(--text-accent-on-navy); background: rgba(24, 181, 198, .14); }
.cv-section--tone-paper .cv-signpost-card h3 { color: var(--navy); }
.cv-section--tone-navy .cv-signpost-card h3,
.cv-section--tone-navy-mid .cv-signpost-card h3 { color: var(--silver-light); }
.cv-signpost-card p { font-size: var(--text-small); line-height: var(--lh-small); margin: 0; }
.cv-section--tone-paper .cv-signpost-card p { color: var(--ink); }
.cv-section--tone-navy .cv-signpost-card p,
.cv-section--tone-navy-mid .cv-signpost-card p { color: var(--silver-mid); }
.cv-signpost-card__link {
	margin-top: auto; display: inline-flex; align-items: center; gap: var(--space-2);
	font-family: var(--font-heading); font-size: var(--text-small); font-weight: var(--weight-semibold);
}
.cv-section--tone-paper .cv-signpost-card__link { color: var(--text-accent-on-paper); }
.cv-section--tone-navy .cv-signpost-card__link,
.cv-section--tone-navy-mid .cv-signpost-card__link { color: var(--text-accent-on-navy); }

/* ============================= S9: CTA band ============================= */
.cv-cta-band { background: var(--navy); border-top: 1px solid var(--rule-on-navy); padding: var(--space-10) var(--gutter); }
.cv-cta-band__inner { max-width: var(--prose-max); margin: 0 auto; text-align: center; }
.cv-cta-band__body { margin-top: var(--space-4); color: var(--silver); }
.cv-cta-band__button { margin-top: var(--space-6); display: flex; justify-content: center; }

/* ============================= S10: Contact block ============================= */
.cv-contact-block { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cv-contact-block__heading { font-size: var(--text-h1); }
.cv-section--tone-paper .cv-contact-block__heading { color: var(--navy); }
.cv-section--tone-navy .cv-contact-block__heading,
.cv-section--tone-navy-mid .cv-contact-block__heading { color: var(--silver-light); }
.cv-contact-block__routes { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.cv-contact-block__routes a { display: inline-flex; gap: var(--space-3); align-items: center; text-decoration: none !important; }
.cv-section--tone-paper .cv-contact-block__routes a { color: var(--text-accent-on-paper); }
.cv-section--tone-navy .cv-contact-block__routes a,
.cv-section--tone-navy-mid .cv-contact-block__routes a { color: var(--text-accent-on-navy); }
.cv-contact-block__socials { display: flex; gap: var(--space-4); margin-top: var(--space-2); }
.cv-contact-block__socials a {
	display: inline-flex; align-items: center; justify-content: center;
	width: var(--tap-min); height: var(--tap-min);
	border-radius: var(--radius-sm); text-decoration: none !important;
}
.cv-section--tone-paper .cv-contact-block__socials a { border: 1px solid var(--rule-on-paper); color: var(--navy); }
.cv-section--tone-navy .cv-contact-block__socials a,
.cv-section--tone-navy-mid .cv-contact-block__socials a { border: 1px solid var(--rule-on-navy); color: var(--silver); }

.cv-contact-form { display: grid; gap: var(--space-4); }
.cv-contact-form label {
	display: block; font-family: var(--font-heading); font-size: var(--text-small);
	font-weight: var(--weight-semibold); margin-bottom: var(--space-2);
}
.cv-section--tone-paper .cv-contact-form label { color: var(--navy); }
.cv-section--tone-navy .cv-contact-form label,
.cv-section--tone-navy-mid .cv-contact-form label { color: var(--silver); }
.cv-contact-form input,
.cv-contact-form select,
.cv-contact-form textarea {
	width: 100%; padding: 12px 14px; min-height: var(--tap-min);
	border-radius: var(--radius-sm);
	font-family: var(--font-body); font-size: var(--text-body);
}
.cv-section--tone-paper .cv-contact-form input,
.cv-section--tone-paper .cv-contact-form select,
.cv-section--tone-paper .cv-contact-form textarea { background: #fff; border: 1px solid var(--rule-on-paper); color: var(--ink); }
.cv-section--tone-navy .cv-contact-form input,
.cv-section--tone-navy .cv-contact-form select,
.cv-section--tone-navy .cv-contact-form textarea,
.cv-section--tone-navy-mid .cv-contact-form input,
.cv-section--tone-navy-mid .cv-contact-form select,
.cv-section--tone-navy-mid .cv-contact-form textarea { background: rgba(10, 31, 60, .55); border: 1px solid var(--rule-strong-on-navy); color: var(--silver-light); }
.cv-contact-form textarea { resize: vertical; }
/* Honeypot. Off-screen rather than display:none, which some bots know to skip. */
.cv-contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cv-contact-form__notice {
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	border-left: 3px solid currentColor;
	font-size: var(--text-small);
	line-height: var(--lh-body);
}
.cv-contact-form__notice--ok { color: var(--text-accent-on-paper); background: rgba(14, 110, 122, .08); }
.cv-contact-form__notice--bad { color: #8a2b2b; background: rgba(138, 43, 43, .08); }
.cv-section--tone-navy .cv-contact-form__notice--ok,
.cv-section--tone-navy-mid .cv-contact-form__notice--ok { color: var(--text-accent-on-navy); background: rgba(24, 181, 198, .12); }
.cv-section--tone-navy .cv-contact-form__notice--bad,
.cv-section--tone-navy-mid .cv-contact-form__notice--bad { color: #ff9c9c; background: rgba(255, 156, 156, .12); }

/* ============================= S11: Credibility strip ============================= */
.cv-credibility-strip {
	background: var(--navy); border-top: 1px solid var(--rule-on-navy); border-bottom: 1px solid var(--rule-on-navy);
	padding: var(--space-7) var(--gutter);
}
.cv-credibility-strip__inner {
	max-width: var(--page-max); margin: 0 auto;
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); justify-content: center;
}
.cv-credibility-strip__label {
	font-family: var(--font-heading); font-size: var(--text-small); letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase; color: var(--silver-mid); margin: 0;
}
.cv-credibility-strip__item { font-family: var(--font-heading); font-size: var(--text-h3); color: var(--silver); }
.cv-credibility-strip img { height: 32px; width: auto; opacity: .9; }
@media (max-width: 767px) {
	/* Wrapped into a block, the label reads as one of the items; give it its own line. */
	.cv-credibility-strip__inner { gap: var(--space-4); }
	.cv-credibility-strip__label { flex-basis: 100%; text-align: center; margin-bottom: var(--space-2); }
}

/* ============================= S12: Prose block ============================= */
.cv-prose-block__heading { font-size: var(--text-h1); }
.cv-section--tone-paper .cv-prose-block__heading { color: var(--navy); }
.cv-section--tone-navy .cv-prose-block__heading,
.cv-section--tone-navy-mid .cv-prose-block__heading { color: var(--silver-light); }
.cv-prose-block__body { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.cv-section--tone-paper .cv-prose-block__body { color: var(--ink); }
.cv-section--tone-navy .cv-prose-block__body,
.cv-section--tone-navy-mid .cv-prose-block__body { color: var(--silver); }

/* ============================= ToolCards ============================= */
.cv-tool-cards { display: grid; gap: var(--space-5); margin-top: var(--space-7); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cv-tool-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-md); }
.cv-section--tone-paper .cv-tool-card { background: var(--surface-light-card); border: 1px solid var(--rule-on-paper); box-shadow: var(--shadow-1); }
.cv-section--tone-navy .cv-tool-card,
.cv-section--tone-navy-mid .cv-tool-card { background: var(--navy-mid); border: 1px solid var(--rule-on-navy); box-shadow: var(--edge-sheen); }
.cv-tool-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-pill); background: var(--navy); color: var(--teal-bright); }
.cv-tool-card h3 { font-size: var(--text-h3); text-transform: uppercase; letter-spacing: .06em; }
.cv-section--tone-paper .cv-tool-card h3 { color: var(--navy); }
.cv-section--tone-navy .cv-tool-card h3,
.cv-section--tone-navy-mid .cv-tool-card h3 { color: var(--silver-light); }
.cv-tool-card p { font-size: var(--text-small); line-height: var(--lh-body); margin: 0; }
.cv-section--tone-paper .cv-tool-card p { color: var(--ink); }
.cv-section--tone-navy .cv-tool-card p,
.cv-section--tone-navy-mid .cv-tool-card p { color: var(--silver); }
.cv-tool-card__link {
	margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2);
	min-height: var(--tap-min); padding: 10px 16px; text-decoration: none !important;
	border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: var(--text-small);
	font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .06em;
}
.cv-section--tone-paper .cv-tool-card__link { border: 1px solid var(--text-accent-on-paper); color: var(--text-accent-on-paper); }
.cv-section--tone-navy .cv-tool-card__link,
.cv-section--tone-navy-mid .cv-tool-card__link { border: 1px solid var(--text-accent-on-navy); color: var(--text-accent-on-navy); }

/* ============================= Utility ============================= */
.cv-diamond-mark { color: var(--teal-bright); }

/* ============================= S14: Video ============================= */
.cv-video__heading { margin-bottom: var(--space-6); }
.cv-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 960px;
	margin: 0 auto;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--navy-mid);
}
.cv-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Holding state before the talk is published. */
.cv-video__frame--waiting {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding: var(--space-6) var(--gutter);
	text-align: center;
	border: 1px dashed var(--rule-strong-on-navy);
}
.cv-video__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 1px solid var(--rule-strong-on-navy);
	color: var(--text-accent-on-navy);
}
.cv-video__waiting { margin: 0; max-width: 40ch; color: var(--silver-mid); font-size: var(--text-small); line-height: var(--lh-body); }
.cv-section--tone-paper .cv-video__frame--waiting { border-color: var(--rule-on-paper); background: var(--surface-light-card); }
.cv-section--tone-paper .cv-video__icon { border-color: var(--rule-on-paper); color: var(--text-accent-on-paper); }
.cv-section--tone-paper .cv-video__waiting { color: var(--ink); }

/* ============================= S15: Gallery ============================= */
.cv-gallery__heading { margin-bottom: var(--space-6); }
/*
 * Multi-column, not grid: each photo keeps its own proportions and the columns stagger,
 * which is the point. Grid masonry is still not safe to rely on.
 */
.cv-gallery {
	column-count: 3;
	column-gap: var(--space-4);
}
.cv-gallery--cols-2 { column-count: 2; }
.cv-gallery--cols-4 { column-count: 4; }
.cv-gallery__item {
	margin: 0 0 var(--space-4);
	/* Stops a photo being split across two columns. */
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	border-radius: var(--radius-md);
	overflow: hidden;
	line-height: 0;
}
.cv-gallery__item img { width: 100%; height: auto; display: block; }
.cv-section--tone-paper .cv-gallery__item { background: var(--surface-light-card); box-shadow: var(--shadow-1); }
.cv-section--tone-navy .cv-gallery__item,
.cv-section--tone-navy-mid .cv-gallery__item { background: var(--navy-mid); box-shadow: var(--edge-sheen); }
/* Two columns even on a phone: these are tall portrait frames, and a single column
   made the section 3,700px of scrolling on its own. */
@media (max-width: 1023px) { .cv-gallery, .cv-gallery--cols-4 { column-count: 3; } }
@media (max-width: 767px)  { .cv-gallery, .cv-gallery--cols-2, .cv-gallery--cols-4 { column-count: 2; column-gap: var(--space-3); } }

/* ============================= Blog: archive header ============================= */
/*
 * The blog index, the category and tag archives and the search results all open on the
 * same navy band, so moving between them feels like moving around one publication
 * rather than arriving somewhere else.
 */
.cv-archive-header { padding-top: var(--space-9); padding-bottom: var(--space-9); }
.cv-archive-header__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-display);
	line-height: var(--lh-display);
	letter-spacing: var(--tracking-display);
	color: var(--silver-light);
	margin: 0;
	max-width: 22ch;
}
/* WordPress puts the term itself in a span inside the archive title. */
.cv-archive-header__title span { color: var(--teal-bright); }
.cv-archive-header__description { margin-top: var(--space-4); max-width: 60ch; color: var(--silver-mid); }
.cv-archive-header__search { margin-top: var(--space-5); max-width: 460px; }
.cv-archive-header__search .wp-block-search__input {
	border: 1px solid var(--rule-strong-on-navy);
	border-radius: var(--radius-sm);
	background: var(--navy-mid);
	color: var(--silver-light);
	padding: 10px 14px;
}
.cv-archive-header__search .wp-block-search__button {
	background: var(--teal-bright);
	color: var(--navy);
	border: 0;
	border-radius: var(--radius-sm);
	font-family: var(--font-heading);
	font-weight: var(--weight-semibold);
	padding: 10px 20px;
}

/* ============================= Blog: post feed ============================= */
.cv-post-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-6) var(--space-5);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* margin-block-start:0 beats core's global blockGap rule, which puts 24px on top of
   every list item but the first and so dropped the whole first row out of line. */
.cv-post-grid > li { display: flex; flex-direction: column; min-width: 0; margin-block-start: 0; }
/* About a third of the posts have no featured image. Rather than let those cards ride
   up and leave the row ragged, they get a tinted panel of the same proportions. */
.cv-post-grid > li:not(:has(.cv-card__media))::before {
	content: "";
	display: block;
	aspect-ratio: 3 / 2;
	margin-bottom: var(--space-4);
	border-radius: var(--radius-md);
	background: linear-gradient(140deg, var(--navy) 0%, var(--navy-mid) 62%, var(--teal-deep) 100%);
	opacity: .14;
}
/* The photographs are whatever was uploaded over ten years of posting, at every shape
   and size there is, so the card crops them to one ratio rather than letting the grid
   go ragged. */
.cv-card__media { margin: 0 0 var(--space-4); }
.cv-card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius-md);
}
.cv-card__terms {
	font-family: var(--font-heading);
	font-size: var(--text-small);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-accent-on-paper);
	margin: 0 0 var(--space-2);
}
.cv-card__terms a { color: inherit; text-decoration: none; }
.cv-card__terms a:hover { text-decoration: underline; }
.cv-card__title { font-size: var(--text-h2); line-height: var(--lh-heading); margin: 0; }
.cv-card__title a { color: var(--navy); text-decoration: none; }
.cv-card__title a:hover { color: var(--teal-deep); text-decoration: underline; }
.cv-card__excerpt { margin: var(--space-3) 0 0; color: var(--ink); font-size: var(--text-small); line-height: var(--lh-small); }
.cv-card__excerpt .wp-block-post-excerpt__more-text { display: none; }
/* Pushed to the bottom so the dates line up across a row of uneven cards. */
.cv-card__date {
	margin: auto 0 0;
	padding-top: var(--space-4);
	font-size: var(--text-small);
	color: var(--text-muted-on-paper, var(--ink));
	opacity: .75;
}
.cv-post-feed__empty { margin: var(--space-6) 0 0; }

.cv-pagination {
	margin-top: var(--space-8);
	padding-top: var(--space-5);
	border-top: 1px solid var(--rule-on-paper);
	font-family: var(--font-heading);
	font-size: var(--text-small);
	gap: var(--space-4);
}
.cv-pagination a { color: var(--teal-deep); text-decoration: none; }
.cv-pagination a:hover { text-decoration: underline; }
.cv-pagination .page-numbers.current { font-weight: var(--weight-bold); color: var(--navy); }

@media (max-width: 1023px) { .cv-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .cv-post-grid { grid-template-columns: 1fr; gap: var(--space-7); } }

/* ============================= Blog: single post ============================= */
.cv-post__header { padding-bottom: var(--space-6); }
.cv-post__meta {
	gap: var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--text-small);
	margin-bottom: var(--space-4);
}
.cv-post__terms {
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-accent-on-paper);
}
.cv-post__terms a { color: inherit; text-decoration: none; }
.cv-post__terms a:hover { text-decoration: underline; }
.cv-post__date { opacity: .75; }
.cv-post__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-display);
	line-height: var(--lh-display);
	letter-spacing: var(--tracking-display);
	color: var(--navy);
	margin: 0;
}
/* Wider than the reading column: the photograph is allowed more room than the words. */
.cv-post__media { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.cv-post__media img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius-md); }
.cv-post__media:empty { display: none; }

.cv-post__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-8);
	padding-top: var(--space-5);
	border-top: 1px solid var(--rule-on-paper);
	font-family: var(--font-heading);
	font-size: var(--text-small);
}
.cv-post__nav a { color: var(--teal-deep); text-decoration: none; }
.cv-post__nav a:hover { text-decoration: underline; }
.cv-post__nav-link--next { margin-left: auto; text-align: right; }

/* ============================= Blog: entry prose ============================= */
/*
 * Everything in this theme is built from components that set their own spacing, so the
 * base stylesheet gives p and h2 no margins at all. Post content is not built that way:
 * it is ten years of ordinary editor HTML, and without this it renders as one
 * unbroken wall of text. Scoped to .cv-entry so it cannot reach the section library.
 */
.cv-entry { font-size: var(--text-body); line-height: var(--lh-body); color: var(--ink); }
.cv-entry > *:first-child { margin-top: 0; }
.cv-entry p { margin: 0 0 var(--space-5); }
.cv-entry h2 { font-size: var(--text-h1); color: var(--navy); margin: var(--space-8) 0 var(--space-4); }
.cv-entry h3 { font-size: var(--text-h2); color: var(--navy); margin: var(--space-7) 0 var(--space-3); }
.cv-entry h4, .cv-entry h5, .cv-entry h6 { font-size: var(--text-h3); color: var(--navy); margin: var(--space-6) 0 var(--space-3); }
.cv-entry ul, .cv-entry ol { margin: 0 0 var(--space-5); padding-left: 1.4em; }
.cv-entry li { margin-bottom: var(--space-2); }
.cv-entry li > ul, .cv-entry li > ol { margin: var(--space-2) 0 0; }
.cv-entry a { color: var(--link-on-paper); }
.cv-entry strong { font-weight: var(--weight-semibold); color: var(--navy); }
.cv-entry hr,
.cv-entry .cv-entry__rule { border: 0; border-top: 1px solid var(--rule-on-paper); margin: var(--space-7) 0; }
.cv-entry img { border-radius: var(--radius-md); }
.cv-entry figure,
.cv-entry .cv-entry__figure { margin: var(--space-6) 0; }
.cv-entry .cv-entry__figure--small { max-width: 220px; }
.cv-entry figcaption { margin-top: var(--space-2); font-size: var(--text-small); opacity: .75; }
.cv-entry blockquote,
.cv-entry .cv-entry__quote {
	margin: var(--space-6) 0;
	padding: var(--space-5) var(--space-6);
	border-left: 3px solid var(--teal-deep);
	background: var(--surface-light-card);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.cv-entry blockquote p:last-child { margin-bottom: 0; }
.cv-entry cite { display: block; margin-top: var(--space-3); font-size: var(--text-small); font-style: normal; opacity: .8; }
.cv-entry .cv-entry__embed { position: relative; margin: var(--space-6) 0; }
.cv-entry .cv-entry__embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-md); }
.cv-entry .cv-entry__audio { width: 100%; margin: var(--space-5) 0; }
.cv-entry .cv-entry__button { margin: var(--space-5) 0; }
.cv-entry .cv-entry__toggle { margin: var(--space-4) 0; border-top: 1px solid var(--rule-on-paper); padding-top: var(--space-4); }
.cv-entry .cv-entry__toggle summary { font-family: var(--font-heading); font-weight: var(--weight-semibold); color: var(--navy); cursor: pointer; }
.cv-entry table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; font-size: var(--text-small); }
.cv-entry th, .cv-entry td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--rule-on-paper); }
/* Divi wrote absolute widths and floats into some inline styles; neither survives a
   narrow screen, and the originals were never responsive to begin with. */
.cv-entry img[style], .cv-entry iframe[style] { max-width: 100% !important; height: auto; }
.cv-entry [style*="float"] { float: none !important; }