/* ============================================================
   Who We Are (about) — page design.
   Applies the TCC design system (brand.css tokens) to the editorial
   block-content, which uses .tc-about-* hooks. Loaded only on /about/.

   Layout is a stack of full-bleed bands; content aligns to --tc-maxw.
   Two dark navy anchors (hero nav + closing contact) bracket warm
   off-white reading sections; colour pops come from cream/cerulean cards
   and pumpkin accents. Ubuntu ALL-CAPS headings, the speech-bubble motif,
   numbered cards, and a connected theory-of-change flow do the "pop".
   ============================================================ */

.tc-page--about {
	/* Override .tc-container so bands can run full-bleed. */
	max-width: none;
	padding: 0;

	/* Reusable inline SVG motifs (Lucide-style speech bubble + arrow). */
	--bubble-pumpkin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F28030' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E");
	--dots-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E");

	/* Section inset beyond the container's own 24px padding. Zero so the content
	   column fills the full 1280 container (like the coming-soon pages) — prose
	   stays measured per-block (72ch/52ch), so widening only opens up the grids. */
	--band-pad: 0px;
}

/* Shared band rhythm. */
.tc-page--about .tc-about-header,
.tc-page--about .tc-about-hero,
.tc-page--about .tc-about-section,
.tc-page--about .tc-about-contact {
	padding-inline: var(--band-pad);
	margin: 0;
	max-width: none;
}

/* ---------- Page header (template) ----------
   Match the new Research/Resources pages: the title lands right under the nav
   with tight, consistent rhythm (no oversized empty band up top). */
.tc-page--about .tc-about-header {
	background:
		radial-gradient(120% 90% at 85% -10%, var(--tcc-cream-50, #FAF3DC) 0%, transparent 55%),
		var(--offwhite);
	padding-top: 0; /* the container already supplies the 48px top inset (matches /research) */
	padding-bottom: clamp(10px, 1.6vw, 18px);
}
.tc-about-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: var(--w-medium);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--pumpkin);
}
.tc-about-eyebrow::before {
	content: "";
	width: 18px;
	height: 18px;
	background: var(--bubble-pumpkin) center / contain no-repeat;
}
.tc-page--about .tc-page__title {
	max-width: 16ch;
	margin: 0;
	padding: 0;
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 7vw, 4.75rem);
	font-weight: var(--w-bold);
	line-height: 1.02;
	letter-spacing: var(--track-tight);
	text-transform: uppercase;
	color: var(--navy);
}
.tc-page--about .tc-page__lead {
	margin: 22px 0 0;
	max-width: 60ch;
	font-family: var(--font-body);
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	font-weight: var(--w-regular);
	line-height: 1.6;
	color: var(--slate);
}

/* ---------- Hero: "ABOUT US" + section navigator (light band, navy cards) ---------- */
.tc-page--about .tc-about-hero {
	background-color: transparent;
	color: var(--navy);
	padding-top: clamp(8px, 1.5vw, 18px);
	padding-bottom: clamp(28px, 4vw, 48px);
	margin-top: 0;
}
.tc-page--about .tc-about-hero h2 {
	margin: 0 0 24px;
	font-family: var(--font-ui);
	font-size: 0.78rem;
	font-weight: var(--w-medium);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--pumpkin);
}
.tc-page--about .tc-about-hero ol {
	list-style: none;
	counter-reset: toc;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}
.tc-page--about .tc-about-hero ol li {
	counter-increment: toc;
	position: relative;
	margin: 0;
	padding: 20px 18px;
	background: var(--navy);
	border: 1px solid var(--navy);
	border-radius: var(--r-md);
	color: rgba(255, 255, 255, 0.66);
	font-family: var(--font-body);
	font-size: 0.9rem;
	line-height: 1.45;
	transition: background var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}
/* Numbers removed from the navigator boxes. */
.tc-page--about .tc-about-hero ol li::before { content: none; }
.tc-page--about .tc-about-hero ol li strong {
	display: block;
	margin-bottom: 2px;
	font-family: var(--font-display);
	font-weight: var(--w-bold);
	font-size: 1.05rem;
	letter-spacing: 0.01em;
	color: #fff;
}
.tc-page--about .tc-about-hero ol li:hover {
	background: #243A6D;
	border-color: var(--pumpkin);
	transform: translateY(-2px);
}
/* The whole card is a jump link to its section — the anchor is stretched to
   cover the full li (number + padding included), not just the text it wraps. */
.tc-page--about .tc-about-hero ol li a {
	display: block;
	color: inherit;
	text-decoration: none;
}
.tc-page--about .tc-about-hero ol li a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--r-md);
}
.tc-page--about .tc-about-hero ol li:hover strong { color: var(--pumpkin); }

/* Offset in-page anchors so the sticky nav doesn't cover section headings. */
.tc-page--about .tc-about-section,
.tc-page--about .tc-about-contact {
	scroll-margin-top: 88px;
}

/* ---------- Reading sections (warm off-white) ---------- */
.tc-page--about .tc-about-section {
	padding-top: clamp(36px, 4.5vw, 60px);
	padding-bottom: clamp(36px, 4.5vw, 60px);
}
.tc-page--about .tc-about-section + .tc-about-section {
	border-top: 1px solid var(--sand);
}
/* Shaded reading sections (Our Why, Our Who): a full-bleed pale-yellow band that
   matches the homepage "Empowering the messengers…" mission. The colour runs edge
   to edge of the viewport (margin pulls to 100vw); the padding re-centres the
   content so it stays aligned with the un-shaded sections. The colour change
   itself separates the bands, so drop the divider lines around them.
   The viewport-width clip lives on .tc-main (see below) so this can't add a
   horizontal scrollbar. */
.tc-page--about .tc-about-section--shade {
	background: var(--cream);
	margin-inline: calc(50% - 50vw);
	padding-inline: max(24px, calc((100vw - 1232px) / 2));
	border-top: 0;
}
.tc-page--about .tc-about-section--shade + .tc-about-section {
	border-top: 0;
}
/* Dark (navy) full-bleed band — e.g. Our Why — to alternate with the light sections. */
.tc-page--about .tc-about-section--dark {
	background: var(--navy);
	margin-inline: calc(50% - 50vw);
	padding-inline: max(24px, calc((100vw - 1232px) / 2));
	border-top: 0;
}
.tc-page--about .tc-about-section--dark + .tc-about-section { border-top: 0; }
/* Compound selector (two classes) so these beat the base .tc-about-section text rules. */
.tc-page--about .tc-about-section.tc-about-section--dark > h2,
.tc-page--about .tc-about-section.tc-about-section--dark > h3 { color: #fff; }
.tc-page--about .tc-about-section.tc-about-section--dark p { color: rgba(255, 255, 255, 0.86); }
.tc-page--about .tc-about-section.tc-about-section--dark p strong { color: #fff; }
.tc-page--about .tc-about-section.tc-about-section--dark .tc-about-values-label { color: rgba(255, 255, 255, 0.72); }
/* Contain the full-bleed bands at the viewport edge. `clip` (not `hidden`) so it
   never establishes a scroll container — keeps any sticky behaviour intact. Scoped
   to /about: this stylesheet only loads there. */
.tc-main {
	overflow-x: clip;
}
.tc-page--about .tc-about-section > h2 {
	margin: 0 0 28px;
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 4.4vw, 2.75rem);
	font-weight: var(--w-bold);
	line-height: 1.08;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: var(--navy);
}
/* Section eyebrow (the shared eyebrow + title standard — applied on BOTH the Current and New
   designs, replacing the old speech-bubble motif above the heading). Placeholder copy for now.
   Qualified with `.tc-about-section` so it out-specifies the section's `p` rule (which would
   otherwise force 17px Nunito onto this <p> and make the eyebrow render oversized). Matches the
   marketing eyebrow exactly: Ubuntu 700, 0.72rem, 0.22em. */
.tc-page--about .tc-about-section .tc-about-section__eyebrow {
	margin: 0 0 12px;
	font-family: var(--font-ui);
	font-weight: var(--w-bold);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.72rem;
	line-height: 1.2;
	color: #C2611F;
}
/* Current design: the navy Our Why band needs a light eyebrow for contrast. */
.tc-page--about .tc-about-section--dark .tc-about-section__eyebrow { color: var(--cerulean); }
/* New design: Our Why is on the neutral surface again → darkened-pumpkin eyebrow, so all three
   section eyebrows read as one hue. The extra .tc-about-section qualifier out-specifies the
   `--dark p { color: slate }` rule below (which otherwise wins over the plain --dark eyebrow rule
   and turned this one eyebrow slate). */
.tc-page--about.tc-style--new .tc-about-section.tc-about-section--dark .tc-about-section__eyebrow { color: #C2611F; }
.tc-page--about .tc-about-section > h3 {
	margin: 36px 0 16px;
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: var(--w-bold);
	color: var(--navy);
}
.tc-page--about .tc-about-section p {
	max-width: 72ch;
	margin: 0 0 18px;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.72;
	color: var(--slate);
}
.tc-page--about .tc-about-section p strong {
	color: var(--navy);
	font-weight: var(--w-bold);
}

/* Values callout — cream card with an injected eyebrow. */
.tc-page--about .tc-about-callout {
	max-width: none;
	margin: 28px 0 0;
	padding: 28px 30px;
	background: var(--cream);
	border: 0;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	color: var(--navy);
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 2.2vw, 1.45rem);
	font-weight: var(--w-medium);
	line-height: 1.5;
}
.tc-page--about .tc-about-callout::before {
	content: "What guides us";
	display: block;
	margin-bottom: 10px;
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: var(--w-medium);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--pumpkin);
}

/* Values — an eyebrow label + pumpkin-tinted pills. */
.tc-page--about .tc-about-values-label {
	margin: 30px 0 12px;
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: var(--w-medium);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--pumpkin);
}
.tc-page--about .tc-about-values {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tc-page--about .tc-about-values li {
	margin: 0;
	padding: 9px 16px;
	background: #fff;
	border-radius: var(--r-pill);
	color: var(--navy);
	font-family: var(--font-ui);
	font-size: 0.9rem;
	font-weight: var(--w-medium);
}

/* ---------- Theory of change — connected flow ---------- */
.tc-page--about .tc-about-chain {
	counter-reset: chain;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 30px 14px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}
.tc-page--about .tc-about-chain li {
	counter-increment: chain;
	position: relative;
	margin: 0;
	padding: 22px 16px 18px;
	min-height: 0;
	background: var(--white);
	border: 1px solid var(--sand);
	border-top: 3px solid var(--cerulean);
	border-radius: var(--r-md);
	color: var(--navy);
	font-family: var(--font-display);
	font-weight: var(--w-bold);
	font-size: 0.98rem;
	line-height: 1.25;
	box-shadow: var(--shadow-xs);
}
/* Numbers removed from the Theory-of-Change boxes. */
.tc-page--about .tc-about-chain li::before { content: none; }
/* Pumpkin arrow connector between steps. */
.tc-page--about .tc-about-chain li::after {
	content: "";
	position: absolute;
	top: 34px;
	right: -11px;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F28030' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tc-page--about .tc-about-chain li:last-child::after { display: none; }

/* Color-coded steps — mirror the homepage "what people think" cards:
   cream, white, navy, blue, orange (steps 1 → 5). The top edge varies per
   box so the accent stays visible against each background (it was all blue). */
.tc-page--about .tc-about-chain li:nth-child(1) {
	background: var(--cream);
	border-color: var(--sand);
	border-top-color: var(--pumpkin);
	color: var(--navy);
}
.tc-page--about .tc-about-chain li:nth-child(2) {
	background: var(--white);
	border-color: var(--sand);
	border-top-color: var(--cerulean);
	color: var(--navy);
}
.tc-page--about .tc-about-chain li:nth-child(3) {
	background: #243A6D;
	border-color: rgba(255, 255, 255, 0.22);
	border-top-color: var(--cerulean);
	color: #fff;
}
.tc-page--about .tc-about-chain li:nth-child(4) {
	background: var(--cerulean);
	border-color: rgba(27, 45, 91, 0.18);
	border-top-color: var(--navy);
	color: var(--navy);
}
.tc-page--about .tc-about-chain li:nth-child(5) {
	background: var(--pumpkin);
	border-color: rgba(255, 255, 255, 0.30);
	border-top-color: var(--navy);
	color: #fff;
}

/* ---------- Our Who — team cards (each links to a full-bio page) ---------- */
/* Avatar: featured photo when set, else a person-icon placeholder. */
.tc-page--about .tc-about-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	overflow: hidden;
	background: #EFE8D8;
	color: #B7B199;
	box-shadow: inset 0 0 0 1px #D9C486;
}
.tc-page--about .tc-about-ph svg { width: 46%; height: 46%; }
.tc-page--about .tc-about-ph img { width: 100%; height: 100%; object-fit: cover; }
.tc-page--about .tc-about-ph--circle { border-radius: 50%; }
.tc-page--about .tc-about-ph--square { border-radius: 14px; }

.tc-page--about .tc-about-role {
	display: block;
	margin: 0 0 6px;
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: var(--w-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pumpkin);
}
.tc-page--about .tc-about-role--tbc {
	color: #B26A28;
	font-style: italic;
	letter-spacing: 0.03em;
}
.tc-page--about .tc-about-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-family: var(--font-ui);
	font-size: 0.82rem;
	font-weight: var(--w-bold);
	color: var(--pumpkin);
	transition: color var(--dur-fast) var(--ease-out);
}
.tc-page--about .tc-about-more__arw { transition: transform var(--dur-fast) var(--ease-out); }
.tc-page--about a:hover .tc-about-more__arw { transform: translateX(3px); }

/* Cofounders — two cream feature cards, square photo on the left, orange top accent. */
.tc-page--about .tc-about-leads {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
	margin: 28px 0 8px;
}
.tc-page--about .tc-about-feature {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 30px;
	background: #FBF6E8;
	border: 1px solid #ECE5D6;
	border-top: 4px solid var(--pumpkin);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	color: inherit;
	text-decoration: none;
	transition: transform var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}
.tc-page--about .tc-about-feature:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}
.tc-page--about .tc-about-feature:hover .tc-about-more { color: var(--navy); }
.tc-page--about .tc-about-feature .tc-about-ph--square { width: 112px; height: 112px; }
.tc-page--about .tc-about-feature__body { min-width: 0; }
.tc-page--about .tc-about-feature__name {
	display: block;
	margin: 2px 0 12px;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: var(--w-bold);
	line-height: 1.14;
	color: var(--navy);
}
.tc-page--about .tc-about-feature__bio {
	display: block;
	font-family: var(--font-body);
	font-size: 1.04rem;
	line-height: 1.62;
	color: var(--slate);
}

/* Grid cards — circle photo on top. */
.tc-page--about .tc-about-team-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 20px;
}
.tc-page--about .tc-about-team-grid--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Desktop only — the tablet/mobile rules below re-columnise the same grids, so these span
   rules stay behind a min-width and never need unwinding there.
   12 columns so a card can be a quarter (span 3), a third (span 4) or a half (span 6) of the
   row; with the 24px gap each span measures exactly what a plain 4/3/2-up grid would. */
@media (min-width: 901px) {
	.tc-page--about .tc-about-team-grid--four { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.tc-page--about .tc-about-team-grid--four > * { grid-column: span 3; }
	/* Counts that would strand a single card on the last row (5, 9, …) open with a 2-up row of
	   halves and a 3-up row of thirds; the rest (a multiple of 4) tile as quarters below. Both
	   rows stay full-width, so no card is ever left alone beside empty columns. */
	.tc-page--about .tc-about-team-grid--lead-five > :nth-child(-n+2) { grid-column: span 6; }
	.tc-page--about .tc-about-team-grid--lead-five > :nth-child(n+3):nth-child(-n+5) { grid-column: span 4; }
	/* The half-width leads carry the same larger name as the 2-up grids. */
	.tc-page--about .tc-about-team-grid--lead-five > :nth-child(-n+2) .tc-about-person__name { font-size: 1.18rem; }
}
.tc-page--about .tc-about-person {
	display: block;
	margin: 0;
	padding: 26px;
	background: var(--white);
	border: 1px solid #ECE5D6;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-xs);
	color: inherit;
	text-decoration: none;
	transition: transform var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out);
}
.tc-page--about .tc-about-person:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--pumpkin);
}
.tc-page--about .tc-about-person:hover .tc-about-more { color: var(--navy); }
.tc-page--about .tc-about-person .tc-about-ph--circle {
	width: 76px;
	height: 76px;
	margin-bottom: 18px;
}
.tc-page--about .tc-about-person__name {
	display: block;
	margin: 0 0 12px;
	font-family: var(--font-display);
	font-size: 1.12rem;
	font-weight: var(--w-bold);
	line-height: 1.16;
	color: var(--navy);
}
.tc-page--about .tc-about-person__bio {
	display: block;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--slate);
}
/* 2-up grids (Staff, Advisors) get a slightly larger name than the 4-up grid. */
.tc-page--about .tc-about-team-grid:not(.tc-about-team-grid--four) .tc-about-person__name { font-size: 1.18rem; }

/* Section label (e.g. "Founding Team") with a trailing hairline rule. */
.tc-page--about .tc-about-section .tc-about-group-label {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 48px 0 20px;
	font-family: var(--font-display);
	font-size: 0.84rem;
	font-weight: var(--w-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--navy);
}
.tc-page--about .tc-about-section .tc-about-group-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #D9C486;
}

/* ---------- Research Partners — one lead card + a stack of wide (photo-left) cards ---------- */
.tc-page--about .tc-about-research {
	display: grid;
	grid-template-columns: 1fr 1.12fr;
	gap: 24px;
	align-items: start;
	margin-top: 6px;
}
.tc-page--about .tc-about-research__lead .tc-about-person__name { font-size: 1.2rem; }
.tc-page--about .tc-about-research__stack {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.tc-page--about .tc-about-person--wide {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.tc-page--about .tc-about-person--wide .tc-about-ph--circle {
	width: 64px;
	height: 64px;
	margin-bottom: 0;
}
.tc-page--about .tc-about-person--wide .tc-about-person__body { min-width: 0; }

/* ---------- Closing contact band (navy) — template-supplied ---------- */
.tc-page--about .tc-about-contact {
	margin-top: clamp(28px, 4vw, 56px);
	padding-top: clamp(52px, 7vw, 88px);
	padding-bottom: clamp(52px, 7vw, 88px);
	background-color: var(--navy);
	background-image: var(--dots-light);
	color: #fff;
	text-align: center;
}
.tc-about-contact__eyebrow {
	margin: 0 0 12px;
	font-family: var(--font-ui);
	font-size: 0.74rem;
	font-weight: var(--w-medium);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--cerulean);
}
.tc-about-contact__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 5vw, 3.25rem);
	font-weight: var(--w-bold);
	line-height: 1.05;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: #fff;
}
.tc-about-contact__text {
	max-width: 52ch;
	margin: 16px auto 0;
	font-family: var(--font-body);
	font-size: 1.08rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
}
.tc-about-contact__cta {
	display: inline-block;
	margin-top: 26px;
	padding: 14px 30px;
	background: var(--pumpkin);
	border-radius: var(--r-pill);
	color: #fff;
	font-family: var(--font-ui);
	font-size: 1.02rem;
	font-weight: var(--w-semibold);
	box-shadow: var(--shadow-cta);
	transition: opacity var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}
.tc-about-contact__cta:hover {
	opacity: 0.94;
	transform: translateY(-2px);
	color: #fff;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.tc-page--about .tc-about-hero ol { grid-template-columns: repeat(2, 1fr); }
	.tc-page--about .tc-about-chain { grid-template-columns: repeat(2, 1fr); }
	.tc-page--about .tc-about-chain li:nth-child(2n)::after { display: none; }
	.tc-page--about .tc-about-leads { grid-template-columns: 1fr; }
	.tc-page--about .tc-about-research { grid-template-columns: 1fr; }
	/* Tablet: back to a plain 2-up; an odd count stretches its last card across the row
	   instead of leaving it stranded beside an empty column. */
	.tc-page--about .tc-about-team-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tc-page--about .tc-about-team-grid--odd > :last-child { grid-column: span 2; }
}
@media (max-width: 600px) {
	.tc-page--about .tc-about-hero ol,
	.tc-page--about .tc-about-chain,
	.tc-page--about .tc-about-team-grid,
	.tc-page--about .tc-about-team-grid--four { grid-template-columns: 1fr; }
	.tc-page--about .tc-about-team-grid--odd > :last-child { grid-column: auto; }
	/* Stack the split cards: photo on top, copy below. */
	.tc-page--about .tc-about-feature,
	.tc-page--about .tc-about-person--wide { flex-direction: column; }
	/* Vertical flow: point the chain arrows downward. */
	.tc-page--about .tc-about-chain li::after {
		top: auto;
		right: auto;
		bottom: -22px;
		left: 22px;
		transform: rotate(90deg);
	}
	.tc-page--about .tc-about-chain li:last-child::after { display: none; }
}

/* ============================================================
   DESIGN-SKILL-V2 RESKIN (page-scoped, appended)
   Harmonise About with the client-approved /resources look: turn the light
   page header into the drift-gradient hero, restyle the section navigator as
   comms-toolkit-style pills, and add reveal-on-scroll + a scroll-progress bar.
   The approved editorial bands below (Our Why / Who / How, Theory-of-Change,
   team cards, contact) are intentionally left as they were — only the hero,
   navigator, and scroll dynamics change. No markup/content changes.
   ============================================================ */

@keyframes tc-about-drift { 0% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } 100% { background-position: 0% 40%; } }

/* The fixed public nav is already offset by .tc-main's 64px padding-top, but the base
   `.tc-main > .tc-container` rule (48px 24px) out-specifies .tc-page--about's `padding: 0`
   and leaves a 48px off-white strip above the drift hero. Zero the top padding with a
   higher-specificity selector so the hero sits flush under the nav (like the tc-mk pages). */
.tc-main > .tc-container.tc-page--about { padding-top: 0; }

/* ---------- Header → full-bleed drift-gradient hero (white title) ---------- */
.tc-page--about .tc-about-header {
	position: relative;
	overflow: hidden;
	/* Full-bleed band with content re-centred to the 1232 column (matches the
	   --dark / --shade bands below). */
	margin-inline: calc(50% - 50vw);
	padding-inline: max(24px, calc((100vw - 1232px) / 2));
	padding-top: clamp(52px, 7vw, 84px);
	padding-bottom: clamp(40px, 5vw, 62px);
	color: #fff;
	background: linear-gradient(120deg, #132145 0%, #1B2D5B 52%, #3a3f6b 130%);
	background-size: 220% 220%;
	animation: tc-about-drift 22s ease-in-out infinite;
}
.tc-page--about .tc-about-header::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 85% at 84% 8%, rgba(51, 198, 245, 0.22), transparent 60%),
		radial-gradient(50% 60% at 6% 100%, rgba(242, 128, 48, 0.16), transparent 60%);
}
.tc-page--about .tc-about-header > * { position: relative; z-index: 1; }
.tc-page--about .tc-about-header .tc-page__title {
	color: #fff;
	text-shadow: 0 2px 20px rgba(11, 17, 33, 0.28);
}
.tc-page--about .tc-about-header .tc-page__lead { color: rgba(255, 255, 255, 0.9); }

/* ---------- Section navigator → pills (matches the Comms Toolkit sub-nav) ----------
   Navy by default on the neutral band; highlight pumpkin with navy text on hover/focus/tap.
   Both this nav and the Comms Toolkit sub-nav share this navy→pumpkin treatment so the two
   pages read as one system. */
.tc-page--about .tc-about-hero { padding-top: clamp(26px, 4vw, 44px); }
.tc-page--about .tc-about-hero ol { gap: 14px; }
.tc-page--about .tc-about-hero ol li {
	padding: 11px 14px;
	background: var(--navy);
	border: 1px solid var(--navy);
	border-radius: var(--r-pill);
	color: #fff;
	text-align: center;
}
.tc-page--about .tc-about-hero ol li strong {
	margin: 0;
	font-family: var(--font-ui);
	font-weight: var(--w-medium);
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}
.tc-page--about .tc-about-hero ol li:hover,
.tc-page--about .tc-about-hero ol li:focus-within,
.tc-page--about .tc-about-hero ol li:active {
	background: var(--pumpkin);
	border-color: var(--pumpkin);
	transform: translateY(-2px);
}
.tc-page--about .tc-about-hero ol li:hover strong,
.tc-page--about .tc-about-hero ol li:focus-within strong,
.tc-page--about .tc-about-hero ol li:active strong { color: var(--navy); }

/* ---------- Scroll-progress bar (JS-injected, page-scoped) ---------- */
.tc-about-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	z-index: 80;
	background: linear-gradient(90deg, var(--cerulean), var(--pumpkin));
	transition: width 0.08s linear;
	pointer-events: none;
}

/* ---------- Reveal-on-scroll ---------- */
/* Only arm the hidden state once JS confirms it's ready + motion is allowed, so a
   non-JS or reduced-motion visitor always sees fully-rendered content. */
.tc-reveal-ready .tc-page--about .tc-about-hero,
.tc-reveal-ready .tc-page--about .tc-about-section,
.tc-reveal-ready .tc-page--about .tc-about-contact {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s cubic-bezier(.2, .7, .2, 1), transform 0.8s cubic-bezier(.2, .7, .2, 1);
}
.tc-reveal-ready .tc-page--about .tc-about-hero.is-inview,
.tc-reveal-ready .tc-page--about .tc-about-section.is-inview,
.tc-reveal-ready .tc-page--about .tc-about-contact.is-inview {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.tc-page--about .tc-about-header { animation: none; }
	.tc-about-progress { display: none; }
	.tc-reveal-ready .tc-page--about .tc-about-hero,
	.tc-reveal-ready .tc-page--about .tc-about-section,
	.tc-reveal-ready .tc-page--about .tc-about-contact {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================================
   DESIGN STYLE: NEW — Our Who (toggleable)
   Scoped under `.tc-page--about.tc-style--new` so it applies ONLY when the page's Design style
   switch is set to New (or previewed with ?tc_style=new). The current design is left untouched
   above; this is the "new" half of the two-variant pair (see inc/style-toggle.php). The compound
   `.tc-page--about.tc-style--new` selector (both classes on the same wrapper) out-specifies the
   base `.tc-page--about` rules. First new-design section: Our Who — a single neutral surface with
   elevated design-skill-v2 cards instead of the cream band.
   ============================================================ */

/* Neutral surface instead of the cream shade band (cards now provide the contrast). */
.tc-page--about.tc-style--new .tc-about-section--shade { background: var(--offwhite); }

/* Our Why — neutral surface instead of the navy band; flip the text back to dark-on-light so
   it stays readable, and give the value pills a sand edge so they read on the light surface. */
.tc-page--about.tc-style--new .tc-about-section--dark { background: var(--offwhite); }
.tc-page--about.tc-style--new .tc-about-section.tc-about-section--dark > h2,
.tc-page--about.tc-style--new .tc-about-section.tc-about-section--dark > h3 { color: var(--navy); }
.tc-page--about.tc-style--new .tc-about-section.tc-about-section--dark p { color: var(--slate); }
.tc-page--about.tc-style--new .tc-about-section.tc-about-section--dark p strong { color: var(--navy); }
.tc-page--about.tc-style--new .tc-about-section.tc-about-section--dark .tc-about-values-label { color: var(--pumpkin); }
.tc-page--about.tc-style--new .tc-about-section--dark .tc-about-values li {
	background: #fff; border: 1px solid var(--sand); color: var(--navy);
}

/* Elevated, rounded team cards with a bigger hover lift (matches the marketing card language). */
.tc-page--about.tc-style--new .tc-about-feature,
.tc-page--about.tc-style--new .tc-about-person {
	border-radius: 18px;
	box-shadow: 0 18px 40px -30px rgba(27, 45, 91, 0.5);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Keep the cofounder card's orange top accent — only the plain cards take a sand edge. */
.tc-page--about.tc-style--new .tc-about-person { border-color: var(--sand); }
.tc-page--about.tc-style--new .tc-about-feature:hover,
.tc-page--about.tc-style--new .tc-about-person:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 44px -24px rgba(27, 45, 91, 0.45);
}
/* Plain cards pick up a pumpkin edge on hover; the cofounder card keeps its top accent. */
.tc-page--about.tc-style--new .tc-about-person:hover { border-color: var(--pumpkin); }