/* ==========================================================================
   ABOUT CSS - About Mindship Global, Meet the Founder, and the shared
   contact form (see inc/enqueue.php).

   The page is built on deliberate rhythm rather than one card style repeated.
   Reading down About, the treatments go: dark hero, editorial two-column
   prose, a full-bleed teal statement, tinted SDG cards, a split light/dark
   mission-vision band, a connected step strip, a dark timeline, a card grid,
   an editorial numbered list, then the dark call to action. No two adjacent
   sections share a shape.

   Dark surfaces are always FULL BLEED - a rounded dark panel floating inside
   a light section reads as a mistake. When a section is dark, the whole band
   is dark, edge to edge.

   Colour: the three brand values plus two supporting hues (a green and an
   indigo) at the same weight, used as a five-tone cycle. Enough variety that
   nine cards do not look like one card nine times, few enough that it still
   reads as one palette.
   ========================================================================== */

.about-page {
	--tone-teal: #02737A;
	--tone-navy: #01224F;
	--tone-amber: #A65A08;
	--tone-green: #127D5A;
	--tone-indigo: #3A4A9F;

	/* The second dark surface. Navy is the site's chrome, so the statement
	   bands use a deep teal instead - different enough to feel like a change
	   of gear, close enough to still be the brand. */
	--surface-teal: #023C43;
}

/* --- About hero: claim beside evidence -----------------------------------------
   Split rather than centred. The left states what Mindship Global is; the
   panel on the right proves it with numbers counted live from the site. An
   About page has to earn trust, and figures that are true and move on their
   own do that better than a subtitle does.
   ---------------------------------------------------------------------------- */
.about-hero {
	position: relative;
	overflow: hidden;
	background: var(--color-navy-dark);
	color: #fff;
	padding-block: clamp(48px, 6vw, 76px);
}
.about-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(820px 380px at 8% 0%, rgba(2, 139, 147, 0.32), transparent 66%),
		radial-gradient(520px 260px at 96% 108%, rgba(241, 143, 19, 0.13), transparent 62%);
}
.about-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 24px 24px;
	-webkit-mask-image: linear-gradient(105deg, transparent 45%, #000);
	mask-image: linear-gradient(105deg, transparent 45%, #000);
}
.about-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 34px;
	align-items: center;
}
/* A rule and small caps instead of the pill used elsewhere - the same badge on
   every page was part of what made the heroes interchangeable. */
.about-hero__label {
	display: inline-block;
	margin: 0 0 16px;
	padding-left: 14px;
	border-left: 3px solid var(--color-accent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
}
.about-hero__title {
	margin: 0 0 10px;
	font-size: clamp(34px, 5.6vw, 56px);
	line-height: 1.03;
	letter-spacing: -0.03em;
}
.about-hero__tagline {
	margin: 0 0 18px;
	font-size: clamp(16px, 2.2vw, 21px);
	font-weight: 700;
	color: #7FE3E8;
}
.about-hero__lead {
	margin: 0;
	max-width: 52ch;
	font-size: clamp(15px, 1.9vw, 17px);
	line-height: 1.75;
	color: #C2DDE0;
}
.about-facts {
	padding: 26px 26px 22px;
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(6px);
}
.about-facts__title {
	margin: 0 0 18px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}
.about-facts__list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 16px;
}
.about-facts__list li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.about-facts__list li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.about-facts__list strong {
	flex: 0 0 auto;
	min-width: 2.4ch;
	font-size: clamp(26px, 3.4vw, 34px);
	font-weight: 800;
	line-height: 1;
	color: #fff;
}
.about-facts__list span {
	font-size: 14px;
	line-height: 1.4;
	color: #B9C9DA;
}
.about-facts__sdg {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.about-facts__sdg-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}
.about-facts__sdg ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Tinted from each SDG's own tone, so the chips echo the cards further down
   the page rather than being four identical pills. */
.about-facts__sdg li {
	padding: 4px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--tone) 30%, transparent);
	border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #fff;
}

/* --- Intro: the gap, stated as a gap ------------------------------------------
   The copy is a problem and a response, so the section is that contrast. The
   two panels are deliberately unalike - the problem is hollow and grey, the
   response is filled and teal - so the shift reads before either is read. The
   space between them is the gap being described, and the connector sits in
   it.

   Previously this was a sticky headline in the left gutter beside four
   paragraphs: the kicker sat under the headline, inverting the hierarchy, and
   the headline had no structural relationship to the prose it hung beside.
   ---------------------------------------------------------------------------- */
.section.about-intro {
    background: #ECF3F4;
    position: relative;
}

.section.about-intro::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(/wp-content/themes/mindship/assets/images/second-section-about-bg.png);
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    opacity: 0.3;
    z-index: 0;
}

.about-intro__inner {
    position: relative;
}
.about-intro__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary-ink);
}
.about-intro__kicker::before {
	content: "";
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background: var(--color-accent);
}
.about-intro__lead {
	margin: 0 0 18px;
	max-width: 34ch;
	font-size: clamp(24px, 3.8vw, 38px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.026em;
	color: var(--color-navy-900);
}
.about-intro__support {
	margin: 0 0 38px;
	max-width: 77ch;
	font-size: clamp(15px, 1.9vw, 16.5px);
	line-height: 1.8;
	color: var(--color-navy-900);
}

.about-gap {
	display: grid;
	gap: 16px;
	align-items: stretch;
}

@media (min-width: 900px){
	.about-gap{
		width: 76%;
	}
}

.about-gap__panel {
	padding: 26px;
	border-radius: var(--radius-lg);
}
/* Hollow, grey, dashed - the shape of something missing. */
.about-gap__panel--problem {
	background: #FAFAFA;;
	border: 1px dashed var(--color-accent-dark);
}
/* Filled and tinted - the shape of something answered. */
.about-gap__panel--response {
	background: #DEEBEE;
	border: 1px solid transparent;
}
.about-gap__label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 12px;
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.about-gap__panel--problem .about-gap__label {
	color: var(--color-accent-dark);
}
.about-gap__panel--response .about-gap__label {
	color: var(--color-primary-ink);
}

.about-gap__panel .about-gap__label svg {
    width: 20px;
    height: 20px;
}

.about-gap__panel p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--color-navy-900);
}

/* The bridge. Points down when the panels stack, across when they sit side
   by side - it only means anything if it points from one to the other. */
.about-gap__bridge {
	justify-self: center;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--color-accent);
	color: #fff;
	transform: rotate(90deg);
}


/* --- Full-bleed statement band -------------------------------------------------
   Deep teal, not navy. One sentence, set large, with an oversized quote mark
   as texture. No cards, no icons - the change of pace is the design.
   ---------------------------------------------------------------------------- */
.statement {
	position: relative;
	overflow: hidden;
	background: var(--surface-teal);
	color: #fff;
	padding-block: clamp(48px, 7vw, 84px);
}
.statement::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(700px 320px at 15% 0%, rgba(255, 255, 255, 0.09), transparent 66%);
}
.statement__inner {
	position: relative;
	z-index: 1;
	max-width: 880px;
	text-align: center;
}
.statement__mark {
	display: block;
	font-size: clamp(56px, 9vw, 96px);
	line-height: 0.7;
	font-weight: 800;
	color: var(--color-accent);
	opacity: 0.55;
	margin-bottom: 8px;
}
.statement__text {
	margin: 0;
	font-size: clamp(21px, 3.6vw, 38px);
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: -0.022em;
}
.statement__text em {
	font-style: normal;
	color: #7FE3E8;
}
.statement__cite {
	display: block;
	margin-top: 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
}

/* --- SDG cards -----------------------------------------------------------------
   Each card owns a tone, carried by a top rule, the code pill and the icon at
   once - so a tone is one decision, not three matching ones. A large ghost
   numeral sits behind, which is what stops four identical boxes.
   ---------------------------------------------------------------------------- */
.about-sdg {
	background: var(--color-bg-alt);
}
.sdg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: 18px;
}
.sdg-card {
	position: relative;
	overflow: hidden;
	padding: 26px 24px 24px;
	background: #fff;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(15, 23, 42, 0.06);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 26px rgba(16, 24, 40, 0.05);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sdg-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--tone);
}
.sdg-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(16, 24, 40, 0.12);
}
.sdg-card__ghost {
	position: absolute;
	right: 14px;
	bottom: -14px;
	font-size: 76px;
	font-weight: 800;
	line-height: 1;
	color: var(--tone);
	opacity: 0.09;
	pointer-events: none;
}
.sdg-card__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--tone) 12%, #fff);
	color: var(--tone);
}
.sdg-card__code {
	position: relative;
	display: inline-block;
	margin-bottom: 8px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tone);
}
.sdg-card__title {
	position: relative;
	margin: 0 0 8px;
	font-size: 16.5px;
	line-height: 1.3;
	color: var(--color-navy-900);
}
.sdg-card__text {
	position: relative;
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--color-text-muted);
}

/* --- Mission / Vision split ----------------------------------------------------
   A full-bleed two-up band: tinted on the left, dark on the right, meeting in
   the middle with no gap. Not two cards on a background - the split itself is
   the shape, and it means the dark half runs to the page edge rather than
   floating inside a light section.
   ---------------------------------------------------------------------------- */
.about-mv {
	padding-block: 0;
}
.about-mv__grid {
	display: grid;
}
.about-mv__half {
	padding: clamp(34px, 5vw, 72px) clamp(24px, 5vw, 64px);
}
.about-mv__half--mission {
	background: var(--surface-teal);
}
.about-mv__half--vision {
	position: relative;
	overflow: hidden;
	background: var(--color-navy-dark);
	color: #fff;
}
.about-mv__half--vision::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(560px 260px at 100% 0%, rgba(2, 139, 147, 0.34), transparent 66%);
}
.about-mv__body {
	position: relative;
	z-index: 1;
	max-width: 560px;
}
.about-mv__half--vision .about-mv__body {
	margin-left: auto;
}
.about-mv__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary-ink);
}

.about-mv__title {
	margin: 0 0 16px;
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.15;
	letter-spacing: -0.022em;
	color: #fff;
}
.about-mv__half--vision .about-mv__title {
	color: #fff;
}
.about-mv__half p {
	margin: 0 0 14px;
	font-size: 15.5px;
	line-height: 1.8;
	color: #C2DDE0;
}
.about-mv__half p:last-child {
	margin-bottom: 0;
}
.about-mv__half--vision p {
	/* font-size: clamp(16px, 2vw, 19px);
	color: #C2DDE0; */
}

.about-mv__half--vision .about-mv__eyebrow,
.about-mv__half .about-mv__eyebrow{
	color: var(--color-accent);
}

/* --- Journey step strip --------------------------------------------------------
   Numbered steps joined by a line, not another grid of boxes. Horizontal on
   desktop so it reads as a sequence; vertical below that, where a five-across
   row would be unreadable.
   ---------------------------------------------------------------------------- */
.journey-strip {
	position: relative;
	display: grid;
	gap: 26px;
	counter-reset: journey;
}
.journey-step {
	position: relative;
	counter-increment: journey;
	padding-left: 60px;
}
.journey-step::before {
	content: counter(journey, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--color-primary);
	color: var(--color-primary-ink);
	font-size: 13px;
	font-weight: 800;
	z-index: 1;
}
/* The connector, drawn between consecutive markers only. */
.journey-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 20px;
	top: 42px;
	bottom: -26px;
	width: 2px;
	background: var(--color-border);
}
.journey-step__title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 8px 0 7px;
	font-size: 18px;
	color: var(--color-navy-900);
}
.journey-step__title svg {
	color: var(--color-primary);
}
.journey-step__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--color-text-muted);
}

/* --- Roadmap -------------------------------------------------------------------
   Reversed out on a full-bleed navy band. The source is an infographic; as a
   flat image it would be unreadable on a phone and invisible to search and
   screen readers, so it is rebuilt as a real list.
   ---------------------------------------------------------------------------- */
.about-roadmap {
	position: relative;
	overflow: hidden;
	background: var(--color-navy-dark);
	color: #fff;
}
.about-roadmap::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(760px 320px at 12% 0%, rgba(2, 139, 147, 0.30), transparent 66%),
		radial-gradient(520px 260px at 92% 100%, rgba(241, 143, 19, 0.12), transparent 64%);
}
.about-roadmap > .container {
	position: relative;
	z-index: 1;
}
.about-roadmap .section-head-centred__title {
	color: #fff;
}
.about-roadmap .section-head-centred__sub {
	color: #B9C9DA;
}
.roadmap {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 800px;
	position: relative;
}
.roadmap::before {
	content: "";
	position: absolute;
	left: 27px;
	top: 30px;
	bottom: 30px;
	width: 2px;
	background: rgba(255, 255, 255, 0.14);
}
.roadmap__step {
	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr;
	align-items: center;
	gap: 18px;
	padding: 11px 0;
}
.roadmap__num {
	position: absolute;
	left: -40px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-accent-ink);
	font-size: 11px;
	font-weight: 800;
}
@media (max-width: 1024px){
	.roadmap__num{
		display: none;
	}
}
.roadmap__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 2px solid rgba(255, 255, 255, 0.25);
	color: #7FE3E8;
}
.roadmap__body {
	display: block;
	padding: 15px 20px;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.09);
}
.roadmap__title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	font-size: 17px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 3px;
}
.roadmap__text {
	display: block;
	font-size: 14px;
	color: #B9C9DA;
}
.roadmap__badge {
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(241, 143, 19, 0.2);
	border: 1px solid rgba(241, 143, 19, 0.5);
	color: var(--color-accent);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
/* Planned steps read as not-yet-live through more than colour: a hollow
   dashed ring and a badge, as well as the muted marker. */
.roadmap__step.is-planned .roadmap__num {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}
.roadmap__step.is-planned .roadmap__icon {
	border-style: dashed;
	border-color: rgba(255, 255, 255, 0.22);
	background: transparent;
	color: rgba(255, 255, 255, 0.55);
}
.roadmap__step.is-planned .roadmap__body {
	background: rgba(255, 255, 255, 0.035);
}

/* --- Who we serve --------------------------------------------------------------- */
.about-audience {
	background: var(--color-bg-alt);
}
.audience-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(278px, 1fr));
	gap: 18px;
}
.audience-card {
	position: relative;
	overflow: hidden;
	padding: 24px 22px 22px 26px;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, 0.06);
	border-radius: var(--radius-lg);
	border-left: 4px solid var(--tone);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.audience-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(16, 24, 40, 0.11);
}
.audience-card__num {
	position: absolute;
	top: 16px;
	right: 18px;
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	color: var(--tone);
	opacity: 0.16;
}
.audience-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 13px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--tone) 12%, #fff);
	color: var(--tone);
}
.audience-card__title {
	margin: 0 0 7px;
	padding-right: 38px;
	font-size: 16px;
	line-height: 1.3;
	color: var(--color-navy-900);
}
.audience-card__text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--color-text-muted);
}

/* --- Values --------------------------------------------------------------------
   Editorial rather than boxed. Seven cards would be the fourth card grid on
   one page; a numbered two-column list with hairline rules reads as a
   different kind of content, which is what it is.
   ---------------------------------------------------------------------------- */
.values-list {
	display: grid;
	gap: 0 48px;
	counter-reset: value;
	border-top: 1px solid var(--color-border);
}
.value-row {
	counter-increment: value;
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 16px;
	padding: 22px 0;
	border-bottom: 1px solid var(--color-border);
}
.value-row__num {
	font-size: 14px;
	font-weight: 800;
	color: var(--color-primary-ink);
	padding-top: 2px;
}
.value-row__num::before {
	content: counter(value, decimal-leading-zero);
}
.value-row__title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 6px;
	font-size: 17px;
	color: var(--color-navy-900);
}
.value-row__title svg {
	color: var(--color-accent);
}
.value-row__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--color-text-muted);
}

/* --- Full-bleed banner ---------------------------------------------------------- */
.about-banner {
	position: relative;
	overflow: hidden;
	background: var(--surface-teal);
	color: #fff;
	padding-block: clamp(34px, 5vw, 56px);
	text-align: center;
}
.about-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(90deg, #000, transparent 32%, transparent 68%, #000);
	mask-image: linear-gradient(90deg, #000, transparent 32%, transparent 68%, #000);
}
.about-banner .container {
	position: relative;
	z-index: 1;
}
.about-banner span {
	display: block;
	font-size: clamp(16px, 2.4vw, 22px);
	margin-bottom: 4px;
}
.about-banner strong {
	display: block;
	font-size: clamp(20px, 3.4vw, 34px);
	letter-spacing: -0.02em;
	color: var(--color-accent);
}

/* --- Join the journey ------------------------------------------------------------
   Kept as a contained panel rather than a full-bleed band. It is the one
   place the inset card works: it closes the page like a card rather than
   another section, and the orange cap reads as a finishing line. The rest of
   the page's dark surfaces run edge to edge.
   ---------------------------------------------------------------------------- */
.about-cta__panel {
	position: relative;
	overflow: hidden;
	padding: clamp(30px, 4.5vw, 56px);
	border-radius: var(--radius-lg);
	background: var(--color-navy-dark);
	border-top: 3px solid var(--color-accent);
	color: #fff;
	text-align: center;
}
.about-cta__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(760px 320px at 50% -20%, rgba(2, 139, 147, 0.30), transparent 68%),
		radial-gradient(520px 240px at 88% 110%, rgba(241, 143, 19, 0.14), transparent 62%);
}
.about-cta__panel > * {
	position: relative;
	z-index: 1;
}
.about-cta__panel .about-cta__text,
.about-cta__panel .about-cta__title {
	max-width: 68ch;
	margin-inline: auto;
}
.about-cta__title {
	margin: 0 0 10px;
	font-size: clamp(26px, 4vw, 38px);
	letter-spacing: -0.024em;
}
.about-cta__lead {
	margin: 0 0 16px;
	font-size: clamp(16px, 2.2vw, 19px);
	font-weight: 700;
	color: var(--color-accent);
}
.about-cta__text {
	margin: 0 auto 14px;
	max-width: 68ch;
	font-size: 15px;
	line-height: 1.78;
	color: #C2DDE0;
}
.about-cta__text--strong {
	font-weight: 700;
	color: #fff;
}
.about-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 26px;
}
.about-cta__secondary {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}
.about-cta__secondary:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
	color: #fff;
}

/* --- Founder hero: the portrait leads -------------------------------------------
   A page about a person should show the person first, so the photo is the
   hero rather than an illustration beside the story. That also removes a
   duplicate - the portrait used to sit in the body - and lets the story below
   run as a single clean column.
   ---------------------------------------------------------------------------- */
.founder-hero {
	position: relative;
	overflow: hidden;
	background: var(--color-navy-dark);
	color: #fff;
	padding-block: clamp(44px, 5.5vw, 70px);
}
.founder-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(760px 360px at 15% 0%, rgba(2, 139, 147, 0.32), transparent 66%),
		radial-gradient(520px 260px at 92% 110%, rgba(241, 143, 19, 0.13), transparent 62%);
}
.founder-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	justify-content: center;
	gap: 34px;
	align-items: center;
}
.founder-hero__portrait {
	position: relative;
	max-width: 340px;
}
@media (max-width: 899px){
	.founder-hero__portrait{
		margin: auto;
    	max-width: min(100%, 430px);
	}
}
/* The offset accent frame, carried up from the body treatment it replaces. */
.founder-hero__portrait::before {
	content: "";
	position: absolute;
	inset: 16px -16px -16px 16px;
	border: 2px solid var(--color-accent);
	border-radius: var(--radius-lg);
	z-index: 0;
}
.founder-hero__image,
.founder-hero__placeholder {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	/* Portrait, not square. A square frame forces a crop on almost any photo
	   of a person, and it takes it off the top and bottom - which is where the
	   head is. 4:5 is the shape portraits are usually taken in, so there is
	   far less to cut. */
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/* Whatever still has to go comes off the bottom rather than the top:
	   object-fit crops from the centre by default, which is what was cutting
	   the hair. Nudge this figure down if a future photo sits lower in frame -
	   0% pins the very top, 50% is centred. */
	object-position: center 18%;
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
}
/* On a dark hero the placeholder has to be legible against navy, not against
   the white page it used to sit on. */
.founder-hero__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	text-align: center;
	background: rgba(255, 255, 255, 0.06);
	border: 1px dashed rgba(255, 255, 255, 0.3);
	color: #B9C9DA;
	font-size: 13px;
	line-height: 1.5;
}
.founder-hero__label {
	display: inline-block;
	margin: 0 0 14px;
	padding-left: 14px;
	border-left: 3px solid var(--color-accent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
}
.founder-hero__name {
	margin: 0 0 6px;
	font-size: clamp(30px, 5vw, 48px);
	line-height: 1.05;
	letter-spacing: -0.028em;
}
.founder-hero__role {
	margin: 0 0 20px;
	font-size: clamp(14px, 1.8vw, 16px);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #7FE3E8;
}
.founder-hero__hook {
	margin: 0 0 22px;
	max-width: 54ch;
	font-size: clamp(16px, 2.1vw, 19px);
	line-height: 1.62;
	color: #E4EEF2;
}
.founder-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.founder-hero__chips li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 12.5px;
	font-weight: 600;
	color: #E4EEF2;
}
.founder-hero__chips svg {
	color: var(--color-accent);
}

/* --- Founder story ---------------------------------------------------------------
   One column now the portrait has moved into the hero, on a reading measure
   rather than full width.
   ---------------------------------------------------------------------------- */
.founder-credential {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 4px 0 22px;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--color-primary-soft);
	color: var(--color-primary-ink);
	font-size: 13.5px;
	font-weight: 700;
}
/* Closing paragraph after the statement band - narrower measure than the
   two-column story above it, so the page ends on a settled note rather than
   another full-width run of text. */
.founder-close__inner {
	max-width: 720px;
	text-align: center;
}
.founder-close p {
	margin: 0;
	font-size: clamp(16px, 2.1vw, 18.5px);
	line-height: 1.8;
	color: var(--color-text);
}
.founder-signature {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--color-border);
}
.founder-close .founder-signature {
	margin-top: 30px;
	display: inline-block;
	padding-top: 10px;
	border-top: 2px solid var(--color-accent);
}
.founder-signature__name {
	display: block;
	font-size: 19px;
	font-weight: 800;
	color: var(--color-navy-900);
}
.founder-signature__role {
	display: block;
	font-size: 13.5px;
	color: var(--color-text-muted);
}

/* --- Shared contact form ---------------------------------------------------------
   Used by the Contact page and the foot of Meet the Founder, from one
   template part - so these rules cover both.
   ---------------------------------------------------------------------------- */
.founder-contact {
	background: var(--color-bg-alt);
}
.founder-contact__inner {
	max-width: 860px;
}
.founder-contact__card {
	padding: clamp(24px, 3.5vw, 38px);
}
.contact-form__row {
	display: grid;
	gap: 0 16px;
}
.contact-form__submit {
	width: 100%;
	justify-content: center;
	margin-top: 6px;
}
.contact-notice {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 20px;
	padding: 13px 16px;
	border-radius: var(--radius-md);
	font-size: 14px;
	line-height: 1.55;
}
.contact-notice svg {
	flex: 0 0 auto;
	margin-top: 1px;
}
.contact-notice.is-success {
	background: var(--color-success-bg);
	border: 1px solid rgba(18, 125, 90, 0.35);
	color: var(--color-success);
}
.contact-notice.is-error {
	background: var(--color-danger-bg);
	border: 1px solid rgba(204, 42, 30, 0.35);
	color: var(--color-danger);
}

@media (min-width: 640px) {
	.contact-form__row {
		grid-template-columns: 1fr 1fr;
	}
	.contact-form__submit {
		width: auto;
	}
	.values-list {
		grid-template-columns: 1fr 1fr;
	}
	/* With two columns the top rule would only cap the first card in each
	   column, so it moves onto every row instead. */
	.values-list {
		border-top: 0;
	}
	.value-row {
		border-top: 1px solid var(--color-border);
		border-bottom: 0;
	}
}

@media (min-width: 900px) {
	.about-gap {
		grid-template-columns: 1fr auto 1fr;
		gap: 8px;
	}
	.about-gap__bridge {
		transform: none;
	}
	.about-mv__grid {
		grid-template-columns: 1fr 1fr;
	}
	.journey-strip {
		grid-template-columns: repeat(5, 1fr);
		gap: 20px;
	}
	.journey-step {
		padding-left: 0;
		padding-top: 58px;
	}
	.journey-step::before {
		top: 0;
	}
	/* Horizontal connector between markers when the strip is a row. */
	.journey-step:not(:last-child)::after {
		left: 42px;
		right: -20px;
		top: 20px;
		bottom: auto;
		width: auto;
		height: 2px;
	}
	.about-hero__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: 56px;
	}
	.founder-hero__grid {
		grid-template-columns: 340px auto;
		gap: 52px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sdg-card,
	.audience-card {
		transition: none;
	}
	.sdg-card:hover,
	.audience-card:hover {
		transform: none;
	}
	.about-gap__bridge {
		transition: none;
	}
}

/* ==========================================================================
   CONTACT PAGE  (.ct-*)

   A full-bleed dark split, with no hero band above it. That absence is the
   design: every previous version was a banner stacked on a two-column body,
   and restyling that arrangement kept producing the same page in different
   colours. Here the page opens as the thing itself.

   WHY DARK

   The version before this was a pale ground carrying a white form card beside
   a white notes card - three shades of white, so nothing had any weight and
   the form, which is the entire point of the page, had nothing to stand out
   from. Dark inverts that: the form panel lifts off its ground, the send
   button is the only warm thing on the screen, and the promise tiles read as
   lights rather than as boxes.

   The namespace is new on purpose. The old .contact-* rules were spread over
   three parts of this file and had been patched twice; keeping the names
   would have meant inheriting all of it.

   SURFACES
   Three tones, and they do all the structural work - there are almost no
   borders in this design. Depth is the tone difference, not a hairline.
   ========================================================================== */

.ct {
	--ct-ground: #05162E; /* the left column, deepest */
	--ct-panel:  #0A1F3C; /* the right column, lifted */
	--ct-card:   #10294A; /* the form itself, lifted again */
	--ct-line:   rgba(255, 255, 255, 0.10);
	--ct-ink:    #FFFFFF;
	--ct-soft:   #C2DDE0;
	--ct-muted:  #9FB3C4;

	position: relative;
	background: var(--ct-ground);
	/* The footer is #05162E, the same as the left column - so the page runs
	   straight into it there, while under the lighter right column the tone
	   steps. Without a line that step reads as a rendering fault rather than
	   as the end of the page. */
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ct__grid {
	display: grid;
	grid-template-columns: 1fr;
}

/* The two grounds. The left column is two cells - the invitation and the
   notes below it - sharing one tone so the join between them is invisible. */
.ct__intro,
.ct__side {
	position: relative;
	background: var(--ct-ground);
}
.ct__main {
	position: relative;
	background: var(--ct-panel);
}

/* A wash on each side, warm on the left and cool on the right, so the two
   grounds are not two flat rectangles of navy. Low contrast on purpose: it
   should read as light falling across the page, not as a gradient. */
.ct__intro::before,
.ct__main::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
/* Sized in percentages, not pixels. A fixed 420px ellipse in a cell that
   happens to be 400px tall gets cut off at the bottom edge, and the cut shows
   as a hard horizontal line across the navy - which is exactly where the
   intro cell meets the notes cell below it. Percentages always fade out
   inside their own box, whatever the viewport does to the cell. */
.ct__intro::before {
	background: radial-gradient(92% 100% at 12% 0%, rgba(2, 139, 147, 0.26), transparent 70%);
}
.ct__main::before {
	background: radial-gradient(76% 46% at 100% 6%, rgba(241, 143, 19, 0.10), transparent 70%);
}

.ct__inner {
	position: relative;
	z-index: 1;
	padding-inline: clamp(24px, 4.5vw, 64px);
}

.ct__intro {
	padding-block: clamp(44px, 6.5vw, 92px) clamp(26px, 3vw, 38px);
}
.ct__main {
	padding-block: clamp(44px, 6.5vw, 92px);
}
.ct__side {
	padding-block: clamp(34px, 5vw, 50px) clamp(48px, 7vw, 96px);
}

/* --- The invitation -------------------------------------------------------- */
.ct__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 7px 15px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.20);
	background: rgba(255, 255, 255, 0.06);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ct-ink);
}
.ct__label svg {
	color: var(--color-accent);
	/* One small piece of life on a page that is otherwise entirely still, and
	   on the element furthest from anything being read. */
	animation: ct-pulse 2.8s ease-in-out infinite;
}
@keyframes ct-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.14); opacity: 0.78; }
}
@media (prefers-reduced-motion: reduce) {
	.ct__label svg { animation: none; }
}

.ct__title {
	margin: 0 0 18px;
	max-width: 13ch;
	font-size: clamp(34px, 4.6vw, 56px);
	line-height: 1.02;
	letter-spacing: -0.034em;
	color: var(--ct-ink);
}
/* A short accent rule under the headline. Small, and it is what stops the
   block reading as a badge over a heading over a paragraph. */
.ct__title::after {
	content: "";
	display: block;
	width: 58px;
	height: 3px;
	margin-top: 22px;
	border-radius: 2px;
	background: var(--color-accent);
}
.ct__lead {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(15px, 1.7vw, 17px);
	line-height: 1.75;
	color: var(--ct-soft);
}

/* --- Promises -------------------------------------------------------------
   Directly above the form. Bordered on one side only and sharing a ground
   with the column, so they read as three notes rather than three more boxes
   on a page that is about to show a fourth.
   -------------------------------------------------------------------------- */
.ct__promises {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0 0 clamp(24px, 3vw, 34px);
	padding: 0;
}
.ct__promise {
	padding: 15px 16px 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.045);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ct-muted);
}
.ct__promise strong {
	display: block;
	margin: 10px 0 3px;
	font-size: 14px;
	font-weight: 800;
	color: var(--ct-ink);
}
.ct__promise-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--ct-accent-soft);
	color: var(--ct-accent);
}
.ct__promise--teal  { --ct-accent: #4FC6CE; --ct-accent-soft: rgba(2, 139, 147, 0.22); }
.ct__promise--amber { --ct-accent: #F5A93F; --ct-accent-soft: rgba(241, 143, 19, 0.18); }
.ct__promise--green { --ct-accent: #56C99B; --ct-accent-soft: rgba(18, 125, 90, 0.26); }

/* --- The form -------------------------------------------------------------
   The one raised surface on the page, and the only place the eye is meant to
   end up. Everything around it is deliberately quieter.
   -------------------------------------------------------------------------- */
.ct__form {
	position: relative;
	overflow: hidden;
	padding: clamp(22px, 3vw, 36px);
	border-radius: var(--radius-lg);
	background: var(--ct-card);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20), 0 26px 60px rgba(0, 0, 0, 0.32);
}

.ct__form-head {
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ct-line);
}
.ct__form-title {
	margin: 0 0 4px;
	font-size: clamp(20px, 2.3vw, 25px);
	letter-spacing: -0.02em;
	color: var(--ct-ink);
}
.ct__form-sub {
	margin: 0;
	font-size: 13px;
	color: var(--ct-muted);
}

/* --- Form fields, dark ----------------------------------------------------
   Scoped to .ct. The same template part renders at the foot of Meet the
   Founder on a white card, and these rules must not reach it.
   -------------------------------------------------------------------------- */
.ct .form-field label {
	color: var(--ct-soft);
	font-weight: 700;
}
.ct .form-field input,
.ct .form-field select,
.ct .form-field textarea {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.16);
	color: var(--ct-ink);
}
/* The select was the one control never given a width - input and textarea are
   set to 100% in critical.css and select is not, so it sat at its intrinsic
   width and broke the two-column row it shares with Subject. */
.ct .form-field select {
	width: 100%;
}
.ct .form-field input::placeholder,
.ct .form-field textarea::placeholder {
	color: rgba(255, 255, 255, 0.42);
}
.ct .form-field input:hover,
.ct .form-field select:hover,
.ct .form-field textarea:hover {
	border-color: rgba(255, 255, 255, 0.28);
}
.ct .form-field input:focus,
.ct .form-field select:focus,
.ct .form-field textarea:focus {
	background: rgba(255, 255, 255, 0.10);
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}
/* The dropdown list itself is drawn by the operating system, which does not
   inherit any of the above - so the options are given explicit colours or
   they render as dark text on a dark field in several browsers. */
.ct .form-field select option {
	background: var(--ct-card);
	color: var(--ct-ink);
}

/* The only warm, solid thing on the page. It should be obvious what the page
   wants you to do. */
.ct .contact-form__submit {
	width: 100%;
	justify-content: center;
	margin-top: 8px;
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-navy-900);
}
.ct .contact-form__submit:hover {
	background: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: var(--color-navy-900);
}

/* Notices, restated for the dark card - the light tints they carry elsewhere
   are unreadable here. */
.ct .contact-notice.is-success {
	background: rgba(18, 125, 90, 0.22);
	border-color: rgba(86, 201, 155, 0.45);
	color: #8FE0BC;
}
.ct .contact-notice.is-error {
	background: rgba(204, 42, 30, 0.20);
	border-color: rgba(255, 138, 128, 0.42);
	color: #FFA79E;
}

/* --- Before You Contact Us ------------------------------------------------
   Two tracks - what to take elsewhere, what to send here - separated by tone
   rather than boxed. As one run of bullets in a grey box this was the dullest
   thing on the page and also the part that most needed reading.
   -------------------------------------------------------------------------- */
.ct__note {
	padding-top: clamp(24px, 3vw, 34px);
	border-top: 1px solid var(--ct-line);
}
.ct__note-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--ct-ink);
}
.ct__note-title svg {
	flex: 0 0 auto;
	color: var(--color-accent);
}
.ct__note-lead {
	margin: 0 0 20px;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ct-muted);
}
.ct__track {
	padding: 15px 16px;
	border-radius: 12px;
	border-left: 2px solid var(--ct-accent);
	background: var(--ct-accent-soft);
}
.ct__track + .ct__track {
	margin-top: 12px;
}
.ct__track--no  { --ct-accent: #F5A93F; --ct-accent-soft: rgba(241, 143, 19, 0.09); }
.ct__track--yes { --ct-accent: #56C99B; --ct-accent-soft: rgba(18, 125, 90, 0.13); }
.ct__track-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 11px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ct-accent);
}
.ct__track-head svg {
	flex: 0 0 auto;
}
.ct__track-list {
	list-style: none;
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.ct__track-list li {
	position: relative;
	padding-left: 22px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ct-soft);
}
/* Drawn, not iconised. A tick and a bar carry these two meanings at ten
   pixels better than any icon in the set does. */
.ct__track-list li::before {
	content: "";
	position: absolute;
	left: 3px;
}
.ct__track--yes .ct__track-list li::before {
	top: 3px;
	width: 5px;
	height: 9px;
	border: solid var(--ct-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ct__track--no .ct__track-list li::before {
	top: 9px;
	width: 9px;
	height: 2px;
	border-radius: 1px;
	background: var(--ct-accent);
}
.ct__track-foot {
	margin: 12px 0 0;
	padding-top: 11px;
	border-top: 1px dashed rgba(245, 169, 63, 0.30);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ct-muted);
}

/* --- Social ---------------------------------------------------------------- */
.ct__social {
	margin-top: clamp(24px, 3vw, 34px);
	padding-top: clamp(20px, 2.6vw, 28px);
	border-top: 1px solid var(--ct-line);
}
.ct__social-label {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ct-muted);
}
.ct .social-row {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0;
	padding: 0;
	border: 0;
}
.ct .social-row a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.06);
	color: var(--ct-ink);
	transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.ct .social-row a:hover {
	transform: translateY(-2px);
	background: var(--color-accent);
	border-color: transparent;
	color: var(--color-navy-900);
}

@media (prefers-reduced-motion: reduce) {
	.ct .social-row a,
	.ct .social-row a:hover {
		transition: none;
		transform: none;
	}
}


/* --- Motion ---------------------------------------------------------------
   Most of it is the shared reveal in base.css, opted into from the markup:
   the invitation staggers its three lines, the promises stagger, the form
   arrives as one piece, the notes stagger their four blocks, the social row
   follows. Nothing here re-implements any of that.

   What is here is the two things the generic reveal cannot do - a line that
   draws itself rather than fading - and the transitions on the controls,
   which had none, so focus and hover were snapping instantly between states.

   Everything below fails to a finished page. The reveal script never arms
   anything when the reader has asked for reduced motion, so .is-armed never
   lands, and both drawn lines stay at their full width - which is exactly
   what the base rules already declare.
   -------------------------------------------------------------------------- */

/* Both drawn lines are keyframe animations for the same reason the reveal
   itself is - see base.css. As transitions they never ran here at all: this
   page puts its headline and its form on screen at load, so the armed state
   and the revealed state landed in one style recalculation and the lines
   simply appeared at full width. An animation runs from its own first
   keyframe regardless, so it works at the top of the page.

   Fill mode is "backwards": the line holds at zero width through its delay
   instead of flicking to full width and waiting there, then lets go once it
   has drawn - a forward fill outranks author rules for as long as it lasts,
   which is a trap worth not setting. See base.css. */
@keyframes ct-draw {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* The rule under the headline draws out from the left, delayed past the
   headline's own stagger slot so it arrives after the words it belongs to
   rather than underneath them while they are still moving. */
.ct__title::after {
	transform-origin: left center;
}
.ct__title.is-armed:not(.is-in)::after {
	transform: scaleX(0);
}
.ct__title.is-armed.is-in::after {
	animation: ct-draw 0.66s cubic-bezier(0.22, 1, 0.36, 1) 0.42s backwards;
}

/* The brand edge on the form runs across the top of the panel the same way -
   the one flourish on the element the whole page is pointing at. */
.ct__form::before {
	transform-origin: left center;
}
.ct__form.is-armed:not(.is-in)::before {
	transform: scaleX(0);
}
.ct__form.is-armed.is-in::before {
	animation: ct-draw 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.24s backwards;
}

/* Fields had no transition at all, so every focus was an instant jump between
   two states. Short - a form is being used, not watched. */
.ct .form-field input,
.ct .form-field select,
.ct .form-field textarea {
	transition: background-color 0.2s ease, border-color 0.2s ease, outline-color 0.2s ease;
}

/* The send button lifts, and the chevron leads. It is the last thing anyone
   does on this page, so it is worth the two lines. */
.ct .contact-form__submit {
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.ct .contact-form__submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(241, 143, 19, 0.28);
}
.ct .contact-form__submit svg {
	transition: transform 0.18s ease;
}
.ct .contact-form__submit:hover svg {
	transform: translateX(3px);
}

/* The icon chips warm slightly as the tile is read. No lift: these are not
   links, and a card that rises under the cursor is a promise it can be
   clicked. */
.ct__promise {
	transition: background-color 0.22s ease;
}
.ct__promise:hover {
	background: rgba(255, 255, 255, 0.075);
}
.ct__promise-icon {
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.ct__promise:hover .ct__promise-icon {
	transform: scale(1.08);
}

/* Belt and braces for the hover and focus transitions. The reveal script
   bows out of reduced motion on its own; these are declared in CSS and would
   otherwise keep running. */
@media (prefers-reduced-motion: reduce) {
	.ct__title.is-armed:not(.is-in)::after,
	.ct__title.is-armed.is-in::after,
	.ct__form.is-armed:not(.is-in)::before,
	.ct__form.is-armed.is-in::before {
		animation: none;
		transform: scaleX(1);
	}
	.ct .form-field input,
	.ct .form-field select,
	.ct .form-field textarea,
	.ct .contact-form__submit,
	.ct .contact-form__submit svg,
	.ct__promise,
	.ct__promise-icon {
		transition: none;
	}
	.ct .contact-form__submit:hover,
	.ct .contact-form__submit:hover svg,
	.ct__promise:hover .ct__promise-icon {
		transform: none;
	}
}

/* --- The split ------------------------------------------------------------
   Three cells into two columns: the invitation and the notes stack in the
   left one, the form spans both rows on the right. Doing it with placement
   rather than nesting is what lets the phone order differ - intro, then the
   form, then the notes - from one set of markup.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
	.ct__grid {
		grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
		grid-template-rows: auto 1fr;
	}
	.ct__intro { grid-column: 1; grid-row: 1; }
	.ct__side  { grid-column: 1; grid-row: 2; padding-top: 0; }
	.ct__main  { grid-column: 2; grid-row: 1 / span 2; }

	/* Both columns hug the seam on a wide screen, so the page stays one
	   composition instead of two blocks drifting to opposite edges. */
	.ct__inner--left {
		max-width: 620px;
		margin-inline-start: auto;
	}
	.ct__inner--right {
		max-width: 760px;
		margin-inline-end: auto;
	}

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

	.ct .contact-form__submit {
		width: auto;
		min-width: 220px;
	}
}

/* ==========================================================================
   ABOUT - MIDDLE SECTIONS, LIFTED

   The client's note was that the middle of the page is flat. The texture
   layer in base.css fixes the backgrounds; this fixes the objects on them.

   Three things do most of the work: cards stop being flat rectangles and get
   a tinted top edge plus a hover lift, so the page reacts to a cursor; the
   journey steps get a real connecting spine instead of floating in a row; and
   headings get a short accent rule so each band announces itself rather than
   starting mid-scroll. All of it is CSS - no new markup, no new requests.
   ========================================================================== */

/* Cards: a tinted edge, a resting shadow, and a lift on hover. A card with a
   border and nothing else reads as a box; these read as objects on a surface. */
.sdg-card,
.audience-card {
	position: relative;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.sdg-card::after,
.audience-card::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--tone, var(--color-primary-ink));
	opacity: 0.85;
}
.sdg-card:hover,
.audience-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(16, 24, 40, 0.12);
	border-color: color-mix(in srgb, var(--tone, var(--color-primary-ink)) 40%, transparent);
}

/* The big ghost numeral behind each card was already there; making it larger
   and pushing it further back turns it from a label into a texture, which is
   what stops the grid reading as a spreadsheet. */
.sdg-card__ghost,
.audience-card__num {
	font-size: clamp(64px, 8vw, 104px);
	line-height: 0.8;
	opacity: 0.06;
}

/* Values: a checked marker instead of a plain bullet. These are commitments,
   and a tick reads as one where a dot reads as a list item. */
.values-list li { position: relative; }

@media (prefers-reduced-motion: reduce) {
	.sdg-card,
	.audience-card { transition: none; }
	.sdg-card:hover,
	.audience-card:hover { transform: none; }
}

/* --- Journey on the dark band ---------------------------------------------
   The About page's anchor band. Everything here is an inversion of the light
   version above; the numbered markers stay light-on-dark so the sequence
   still reads as a series of steps.
   ---------------------------------------------------------------------------- */
.band--dark .journey-step::before {
	background: transparent;
	border-color: #7FE3E8;
	color: #7FE3E8;
}
.band--dark .journey-step:not(:last-child)::after {
	background: rgba(255, 255, 255, 0.18);
}
.band--dark .journey-step__title { color: #fff; }
.band--dark .journey-step__text  { color: #C2DDE0; }

/* ==========================================================================
   ABOUT - "Our goal", the resolution panel.

   Replaces a paragraph with a thin accent rule down its left edge, which read
   as an afterthought next to the two rounded panels above it.

   Built from the same parts as those panels - icon, uppercase label, body -
   so it belongs to the sequence. What marks it as the CONCLUSION rather than
   a third equal panel is weight and colour: it is white where the others are
   tinted, so it sits forward on the section's tinted ground, and it takes the
   accent, which is the colour of the bridge that leads to it.
   ========================================================================== */
.about-goal {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-top: 28px;
	padding: 24px 0px;
}
.about-goal__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--color-accent);
	/* Navy, not white. White on the brand orange is 2.42:1 - below even the
	   3:1 a meaningful graphic needs - which is exactly why the palette
	   carries --color-accent-ink for this pairing. Navy on it is 7.5:1. */
	color: var(--color-accent-ink);
}
.about-goal__body { min-width: 0; }
.about-goal__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-warning);
}
.about-goal__text {
	margin: 0;
	font-size: clamp(15.5px, 2vw, 17.5px);
	font-weight: 600;
	line-height: 1.7;
	color: var(--color-navy-900);
}
/* Matches the width of .about-gap above it so the three parts of the argument
   line up as one column rather than three different measures. */
@media (min-width: 900px) {
	.about-goal { width: 76%; }
}

/* ==========================================================================
   FOUNDER - the story section.

   A founder's letter, set as one: single centred column, one background,
   no cards. What carries it is typography.

   The design problem here is not decoration, it is that nobody reads four
   hundred words of unbroken prose on a website. So the section is built for
   a scanner first: a drop cap saying "this is a letter, start here", two
   highlighted phrases carrying the argument, and the pivot sentence set as
   display type. Read only those and you still know why the company exists -
   which is what earns the full read from the people who want it.
   ========================================================================== */
.founder-story-section {
	background: #F3F8F9;
}
.founder-story {
	max-width: 780px;
}

/* --- Heading -------------------------------------------------------------- */
.founder-story__head {
	margin-bottom: 30px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--color-border);
}
/* A real quotation mark, set large and pale - typography sitting in the page
   rather than an icon placed on it. Its own line-height is crushed so it does
   not open a gap under itself. */
.founder-story__glyph {
	display: block;
	margin-bottom: 6px;
	font-size: clamp(56px, 7vw, 82px);
	line-height: 0.62;
	font-weight: 800;
	color: var(--color-primary);
	opacity: 0.24;
	user-select: none;
}
.founder-story__label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-primary-ink);
}
.founder-story__title {
	margin: 0;
	font-size: clamp(25px, 3.6vw, 36px);
	line-height: 1.15;
	letter-spacing: -0.024em;
	color: var(--color-navy-900);
}

/* --- Prose ---------------------------------------------------------------- */
.founder-story__body p {
	margin: 0 0 20px;
	font-size: 16.5px;
	line-height: 1.85;
	color: var(--color-text);
	/* Justified, with hyphenation on. Justifying without it is what produces
	   the rivers of white space that make justified text on the web look
	   worse than ragged-right - the browser can only stretch word spacing
	   when it has no permission to break a word. text-wrap: pretty is
	   ignored where unsupported and improves the last lines where it is not. */
	text-align: justify;
	hyphens: auto;
	text-wrap: pretty;
}
/* Not the pull quote, which is centred and short - justifying three lines
   inside a blockquote only stretches them. */
.founder-story__body .founder-story__pull p {
	text-align: inherit;
	hyphens: manual;
}
/* Narrow screens keep the ragged edge. A justified line of forty characters
   has too few word gaps to absorb the slack, so every other line ends up
   visibly loose. */
@media (max-width: 599px) {
	.founder-story__body p {
		text-align: left;
		hyphens: manual;
	}
}
.founder-story__body p:last-child {
	margin-bottom: 0;
}
.founder-story__body .founder-story__lead {
	font-size: clamp(17px, 2.1vw, 19px);
	line-height: 1.75;
	color: var(--color-navy-900);
}

/* The drop cap. Float rather than absolute so the text wraps around it on its
   own, and a fixed line-height so the cap sits on the baseline of the third
   line instead of drifting with the paragraph's own leading. */
.founder-story__body .founder-story__lead::first-letter {
	float: left;
	margin: 6px 12px 0 0;
	font-size: 62px;
	line-height: 0.78;
	font-weight: 800;
	color: var(--color-primary-ink);
}

/* Scanning aids. A soft accent wash under the phrase rather than a full
   highlighter block - enough to catch the eye moving down the page, not
   enough to shout. Colour is inherited so the text stays full-contrast. */
.founder-story__body mark {
	padding: 1px 2px;
	background: linear-gradient(180deg, transparent 58%, rgba(241, 143, 19, 0.28) 58%);
	color: inherit;
	font-weight: 600;
}

/* The turn in the story, where it moves from "what I saw" to "so I built
   this". Display type behind one rule - no fill, no corners, not a box. */
.founder-story__body .founder-story__pull {
	margin: 30px 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--color-accent);
}
.founder-story__body .founder-story__pull p {
	margin: 0 0 12px;
	font-size: clamp(19px, 2.6vw, 24px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.018em;
	color: var(--color-navy-900);
}
.founder-story__body .founder-story__pull cite {
	display: block;
	font-style: normal;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--color-primary-ink);
}

/* ==========================================================================
   FAQ PAGE

   The accordion itself is .opp-faq, shared with the opportunity postings -
   two different accordions on one site is one more than anybody needs, and it
   means the open animation and the keyboard behaviour are identical in both
   places. Everything here is the page around it.
   ========================================================================== */
.faq-hero {
	padding-block: clamp(44px, 6vw, 74px);
	background: var(--color-navy-dark);
	color: #fff;
	text-align: center;
}
.faq-hero__inner { max-width: 660px; margin-inline: auto; }
.faq-hero__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 7px 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.faq-hero__label svg { color: var(--color-accent); }
.faq-hero__title {
	margin: 0 0 14px;
	font-size: clamp(28px, 5vw, 44px);
	line-height: 1.08;
	letter-spacing: -0.028em;
}
.faq-hero__lead {
	margin: 0;
	font-size: clamp(15px, 1.9vw, 17px);
	line-height: 1.7;
	color: #C2DDE0;
}

.faq-body { background: #ECF3F4; }
.faq-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: start;
}
.faq-group { margin-bottom: 32px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group__title {
	margin: 0 0 14px;
	font-size: clamp(19px, 2.4vw, 23px);
	letter-spacing: -0.018em;
	color: var(--color-navy-900);
}
/* The shared accordion sits on a tinted page here rather than inside a white
   article column, so it needs its own surface to lift off it. */
.faq-page .opp-faqs { background: #fff; }

.faq-topics {
	padding: 18px 20px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	margin-bottom: 16px;
}
.faq-topics__label {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.faq-topics ul { list-style: none; margin: 0; padding: 0; }
.faq-topics a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-navy-900);
	text-decoration: none;
	border-bottom: 1px solid var(--color-border);
}
.faq-topics li:last-child a { border-bottom: 0; }
.faq-topics a:hover { color: var(--color-primary-ink); }
.faq-topics a span {
	font-size: 11.5px;
	font-weight: 800;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
}

.faq-ask {
	padding: 22px;
	border-radius: var(--radius-lg);
	background: var(--color-navy-dark);
	color: #fff;
	text-align: center;
}
.faq-ask__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: var(--color-accent);
}
.faq-ask__title { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.faq-ask__text {
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.6;
	color: #C2DDE0;
}

.faq-empty {
	padding: 56px 28px;
	text-align: center;
	background: #fff;
	border-radius: var(--radius-lg);
}
.faq-empty h2 { margin: 0 0 8px; font-size: 22px; color: var(--color-navy-900); }
.faq-empty p { margin: 0 0 20px; color: var(--color-text-muted); }

@media (min-width: 980px) {
	.faq-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 36px;
	}
	.faq-aside { position: sticky; top: 100px; }
}