/* ---------------------------------------------------------------------------
   YFES theme.

   Written mobile first. Base rules target a 390px phone, which is how most of
   this audience arrives, and min-width queries add the desktop treatment on
   top. Colours, spacing and type come from theme.json tokens rather than
   hard-coded values, so the owner cannot produce an off-brand page.

   The look: deep navy, warm cream paper, Kenyan gold. Every page opens with a
   navy masthead, which is what lets the sticky header be navy everywhere
   without ever looking like a bar stuck on top of the content.
   --------------------------------------------------------------------------- */

:root {
	--yfes-radius: 18px;
	--yfes-radius-lg: 26px;
	--yfes-radius-sm: 10px;

	--yfes-hairline: color-mix(in srgb, var(--wp--preset--color--navy) 12%, transparent);
	--yfes-hairline-light: rgba(255, 255, 255, 0.16);

	--yfes-shadow: 0 1px 2px rgba(8, 24, 43, 0.04), 0 10px 28px -14px rgba(8, 24, 43, 0.18);
	--yfes-shadow-lift: 0 2px 4px rgba(8, 24, 43, 0.05), 0 26px 50px -22px rgba(8, 24, 43, 0.3);

	/* The sticky header reserves this much room at the top of a masthead. */
	--yfes-header-h: 4rem;

	/* The measurement grid drawn behind dark sections. */
	--yfes-grid-line: rgba(255, 255, 255, 0.06);
}

@media (min-width: 782px) {
	:root {
		--yfes-header-h: 4.75rem;
	}
}

/* ---- Typographic polish ------------------------------------------------ */

h1, h2, h3, h4 {
	text-wrap: balance;
	overflow-wrap: break-word;
}

p, li {
	text-wrap: pretty;
}

/* Tabular figures wherever a number is doing work, so columns of dates and
   participant counts line up instead of wobbling. */
.yfes-stat,
.yfes-meta dd,
.yfes-steps__num,
.yfes-card__num {
	font-variant-numeric: tabular-nums;
}

/* ---- Eyebrow labels ---------------------------------------------------- */

.yfes-stat__label,
.yfes-meta dt,
.yfes-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
	margin-bottom: 0.6rem;
}

@media (min-width: 782px) {
	.yfes-stat__label,
	.yfes-meta dt,
	.yfes-eyebrow {
		font-size: 0.75rem;
	}
}

/* On the dark bands the eyebrow is gold, which is the only place gold text
   sits on navy and passes contrast comfortably. */
.yfes-hero .yfes-eyebrow,
.yfes-masthead .yfes-eyebrow,
.yfes-masthead .yfes-stat__label,
.yfes-band--dark .yfes-eyebrow,
.yfes-band--dark .yfes-stat__label {
	color: var(--wp--preset--color--accent);
}

/* A short gold rule above a section heading. Cheap, and it stops every
   section from starting with bare text. */
.yfes-eyebrow::after {
	content: "";
	display: block;
	width: 2.25rem;
	height: 2px;
	margin-top: 0.7rem;
	background: var(--wp--preset--color--accent);
}

/* ---- Header ------------------------------------------------------------ */

/*
 * Navy glass, sticky, on every page. Because every template opens with a navy
 * masthead the bar reads as part of the masthead at rest, and only separates
 * itself once you scroll into the cream part of the page.
 */
header.wp-block-group {
	position: sticky;
	top: 0;
	z-index: 30;
	background: transparent;
	border-bottom: 1px solid var(--yfes-hairline-light);
}

/*
 * The navy glass is painted by a pseudo-element rather than on the header
 * itself, and that is load-bearing. A backdrop-filter makes its element a
 * containing block for position: fixed descendants, and the mobile menu
 * overlay is exactly that: with the filter on the header, the overlay was
 * trapped inside the bar and the menu opened as a thin strip of one link.
 * On a phone that navigation is the only navigation, so it has to work.
 */
header.wp-block-group::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--navy) 88%, transparent);
	backdrop-filter: saturate(150%) blur(12px);
	-webkit-backdrop-filter: saturate(150%) blur(12px);
}

header.wp-block-group,
header.wp-block-group a {
	color: var(--wp--preset--color--paper);
}

.wp-block-site-title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.1875rem;
	letter-spacing: -0.01em;
}

.wp-block-site-title a {
	text-decoration: none;
}

.wp-block-site-title a:hover {
	text-decoration: none;
	color: var(--wp--preset--color--accent);
}

/* Desktop navigation: small caps-ish links with a gold underline on hover,
   rather than the default underline that shifts the baseline. */
header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
	padding-bottom: 2px;
	opacity: 0.88;
}

header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 160ms ease;
}

header .wp-block-navigation .wp-block-navigation-item__content:hover {
	opacity: 1;
	text-decoration: none;
}

header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
header .wp-block-navigation .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

/* The hamburger and the overlay it opens. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--paper);
}

/*
 * The overlay's colours have to be written at core's own specificity. Core
 * ships `.wp-block-navigation:not(.has-background) .wp-block-navigation__
 * responsive-container.is-menu-open { background-color: #fff; color: #000 }`,
 * which is three classes, so a shorter selector lost and the menu opened as
 * black text on the navy panel.
 */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--navy);
	background-image: linear-gradient(158deg, #08182B 0%, #12395C 70%, #0A2135 100%);
	color: var(--wp--preset--color--paper);
	padding: 1.5rem 1.5rem 3rem;
	align-items: flex-start;
	justify-content: flex-start;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.625rem;
	text-decoration: none;
	opacity: 1;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* The panel's own layout: a left-aligned stack, whatever justification the
   bar uses when the links sit in a row on a wide screen. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0;
	align-items: flex-start;
	justify-content: flex-start;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--yfes-hairline-light);
	width: 100%;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1rem 0;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* The close button sits on navy too. */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-close svg {
	color: var(--wp--preset--color--paper);
	fill: currentColor;
}

/* ---- The measurement grid --------------------------------------------- */

/*
 * The data-visual motif, now drawn on the dark bands instead of on white.
 * Faint plotted grid plus a wide gold arc, which is what gives the navy areas
 * some depth rather than leaving them flat blocks of colour.
 */
.yfes-hero::before,
.yfes-masthead::before,
.yfes-band--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, var(--yfes-grid-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--yfes-grid-line) 1px, transparent 1px);
	background-size: 38px 38px;
	background-position: center top;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

@media (min-width: 782px) {
	.yfes-hero::before,
	.yfes-masthead::before,
	.yfes-band--dark::before {
		background-size: 60px 60px;
	}
}

/* Decorative only. Drop it rather than fight a high-contrast preference. */
@media (prefers-contrast: more) {
	.yfes-hero::before,
	.yfes-masthead::before,
	.yfes-band--dark::before {
		display: none;
	}
}

/* ---- Front page hero --------------------------------------------------- */

.yfes-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--wp--preset--color--paper);
	/* The sticky header sits over the top of this, so clear it. */
	padding-top: calc(var(--yfes-header-h) + var(--wp--preset--spacing--m));
	padding-bottom: 0;
	background-color: var(--wp--preset--color--navy);
	background-image:
		linear-gradient(
			180deg,
			rgba(8, 24, 43, 0.9) 0%,
			rgba(8, 24, 43, 0.74) 38%,
			rgba(8, 24, 43, 0.95) 100%
		),
		url("../img/hero-nairobi-900.webp");
	background-repeat: no-repeat;
	background-position: center 28%, center 28%;
	background-size: cover, cover;
}

@media (min-width: 782px) {
	.yfes-hero {
		background-image:
			linear-gradient(
				100deg,
				rgba(8, 24, 43, 0.96) 0%,
				rgba(8, 24, 43, 0.86) 46%,
				rgba(8, 24, 43, 0.58) 100%
			),
			url("../img/hero-nairobi-1800.webp");
		background-position: center center, center 34%;
	}
}

/* A gold bloom behind the headline. It reads as light coming off the city
   rather than as a gradient, and it lifts the type off the photograph. */
.yfes-hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: -18%;
	left: -22%;
	width: 78%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(212, 166, 42, 0.22) 0%, transparent 68%);
	pointer-events: none;
}

.yfes-hero > * {
	position: relative;
	z-index: 1;
}

.yfes-hero h1 {
	color: var(--wp--preset--color--paper);
	margin: 0 0 1.1rem;
}

.yfes-hero__lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: rgba(251, 248, 242, 0.84);
	margin: 0 0 var(--wp--preset--spacing--s);
}

/* The strip of audiences along the bottom of the hero. It is the trust cue
   the best Kenyan sites put here, without inventing a client list. */
.yfes-hero__strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: center;
	margin-top: var(--wp--preset--spacing--m);
	padding: 1.1rem 0 var(--wp--preset--spacing--m);
	border-top: 1px solid var(--yfes-hairline-light);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(251, 248, 242, 0.72);
}

.yfes-hero__strip span {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

.yfes-hero__strip span::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	flex: none;
}

/* ---- Inner page masthead ----------------------------------------------- */

/*
 * Every template that is not the front page opens with this. Shorter than the
 * hero, no photograph, same navy so the header has something to sit on.
 */
.yfes-masthead {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--navy);
	background-image: linear-gradient(158deg, #08182B 0%, #12395C 62%, #0A2135 100%);
	padding-top: calc(var(--yfes-header-h) + var(--wp--preset--spacing--m));
	padding-bottom: var(--wp--preset--spacing--m);
}

.yfes-masthead > * {
	position: relative;
	z-index: 1;
}

.yfes-masthead h1,
.yfes-masthead h2 {
	color: var(--wp--preset--color--paper);
	margin: 0 0 0.9rem;
}

.yfes-masthead p {
	color: rgba(251, 248, 242, 0.82);
}

.yfes-masthead p:last-child {
	margin-bottom: 0;
}

.yfes-masthead .wp-block-post-date,
.yfes-masthead .wp-block-post-terms {
	color: rgba(251, 248, 242, 0.7);
}

.yfes-masthead a {
	color: var(--wp--preset--color--accent);
}

/* A gold arc in the bottom corner, so the band is not a flat rectangle. */
.yfes-masthead::after,
.yfes-band--dark::after {
	content: "";
	position: absolute;
	z-index: 0;
	right: -14%;
	bottom: -58%;
	width: 62%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(212, 166, 42, 0.26);
	background: radial-gradient(circle at 40% 40%, rgba(15, 110, 92, 0.24) 0%, transparent 62%);
	pointer-events: none;
}

/* ---- Section bands ----------------------------------------------------- */

.yfes-band {
	position: relative;
	padding-top: var(--wp--preset--spacing--l);
	padding-bottom: var(--wp--preset--spacing--l);
}

.yfes-band--sand {
	background-color: var(--wp--preset--color--sand);
	background-image: linear-gradient(180deg, var(--wp--preset--color--paper) 0%, var(--wp--preset--color--sand) 34%, var(--wp--preset--color--sand) 100%);
}

.yfes-band--dark {
	isolation: isolate;
	overflow: hidden;
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--navy);
	background-image: linear-gradient(162deg, #08182B 0%, #103351 58%, #0A2337 100%);
}

.yfes-band--dark > * {
	position: relative;
	z-index: 1;
}

.yfes-band--dark h2,
.yfes-band--dark h3 {
	color: var(--wp--preset--color--paper);
}

.yfes-band--dark p {
	color: rgba(251, 248, 242, 0.82);
}

/*
 * No max-width here on purpose. The intro keeps the 1240px column width that
 * the block layout gives it, so it stays centred on the same left edge as the
 * card grid below it; the text measure is shortened with padding further
 * down instead.
 */

.yfes-band__intro h2 {
	margin: 0 0 0.75rem;
}

.yfes-band__intro p:last-child {
	margin-bottom: 0;
}

/* ---- The figure row ---------------------------------------------------- */

/*
 * Three figures separated by rules, the pattern every well-built Kenyan
 * financial site uses just under the hero. The numbers are placeholders until
 * the owner supplies them; search for [[ to find them.
 */
.yfes-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yfes-stats > li {
	padding: 1.1rem 0;
	border-top: 1px solid var(--yfes-hairline);
}

.yfes-stats > li:first-child {
	border-top: 0;
	padding-top: 0;
}

.yfes-stats > li:last-child {
	padding-bottom: 0;
}

@media (min-width: 600px) {
	.yfes-stats {
		grid-template-columns: repeat(3, 1fr);
		gap: 0 clamp(1.5rem, 4vw, 3rem);
	}

	.yfes-stats > li {
		padding: 0 0 0 clamp(1.5rem, 4vw, 3rem);
		border-top: 0;
		border-left: 1px solid var(--yfes-hairline);
	}

	.yfes-stats > li:first-child {
		padding-left: 0;
		border-left: 0;
	}
}

.yfes-stat {
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--navy);
	margin: 0 0 0.5rem;
}

.yfes-stat em {
	font-style: normal;
	color: var(--wp--preset--color--accent);
}

.yfes-stats p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--steel);
	line-height: 1.5;
}

/* ---- Cards ------------------------------------------------------------- */

/*
 * The generic card. On a phone the pillars stack into one column, and without
 * an edge they read as one undifferentiated wall of text.
 */
.yfes-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.yfes-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

@media (min-width: 900px) {
	.yfes-cards--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.yfes-cards--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.yfes-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.35rem 1.6rem;
	border: 1px solid var(--yfes-hairline);
	border-radius: var(--yfes-radius);
	background: var(--wp--preset--color--white);
	background-image: linear-gradient(170deg, #FFFFFF 0%, #FFFFFF 58%, var(--wp--preset--color--sand) 100%);
	box-shadow: var(--yfes-shadow);
	overflow: hidden;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

/* A gold rule across the top edge, revealed on hover. */
.yfes-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--teal));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 240ms ease;
}

.yfes-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--yfes-shadow-lift);
}

.yfes-card:hover::before {
	transform: scaleX(1);
}

.yfes-card__num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--accent);
	margin: 0 0 0.9rem;
}

.yfes-card h3 {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--navy);
}

.yfes-card p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--steel);
}

/* The small plotted-line motif at the foot of a discipline card. */
.yfes-card__plot {
	margin-top: 1.25rem;
	height: 26px;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: auto 100%;
	opacity: 0.55;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26' viewBox='0 0 120 26'%3E%3Cpath d='M1 22 L21 16 L41 19 L61 9 L81 12 L101 3 L119 6' fill='none' stroke='%23D4A62A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.yfes-card__plot--bars {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26' viewBox='0 0 120 26'%3E%3Cg fill='%230F6E5C'%3E%3Crect x='1' y='14' width='12' height='12' rx='2'/%3E%3Crect x='19' y='8' width='12' height='18' rx='2'/%3E%3Crect x='37' y='17' width='12' height='9' rx='2'/%3E%3Crect x='55' y='4' width='12' height='22' rx='2'/%3E%3C/g%3E%3Cg fill='%23D4A62A'%3E%3Crect x='73' y='11' width='12' height='15' rx='2'/%3E%3Crect x='91' y='1' width='12' height='25' rx='2'/%3E%3C/g%3E%3C/svg%3E");
}

.yfes-card__plot--scatter {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26' viewBox='0 0 120 26'%3E%3Cpath d='M1 24 L119 6' stroke='%230F6E5C' stroke-width='1.5' stroke-dasharray='4 4' fill='none'/%3E%3Cg fill='%23D4A62A'%3E%3Ccircle cx='14' cy='20' r='3'/%3E%3Ccircle cx='38' cy='19' r='3'/%3E%3Ccircle cx='58' cy='13' r='3'/%3E%3Ccircle cx='79' cy='14' r='3'/%3E%3Ccircle cx='100' cy='7' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Who we serve: tall photo cards ------------------------------------ */

/*
 * The pattern the best Kenyan sites lean on: a tall photograph, a dark scrim
 * from the top, and the label and heading sitting over it. Four across on a
 * wide screen, two on a tablet, one per row on a phone where a 4:5 crop is
 * tall enough to carry a face.
 */
.yfes-serve {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) {
	.yfes-serve {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.yfes-serve {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

.yfes-serve__item {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--yfes-radius);
	overflow: hidden;
	background: var(--wp--preset--color--navy);
	box-shadow: var(--yfes-shadow);
	isolation: isolate;
	min-height: 23rem;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

@media (min-width: 560px) {
	.yfes-serve__item {
		min-height: 26rem;
	}
}

.yfes-serve__item:hover {
	transform: translateY(-3px);
	box-shadow: var(--yfes-shadow-lift);
}

.yfes-serve__item .yfes-photo {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: -2;
}

.yfes-serve__item .yfes-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

/* The scrim. Dark at the bottom where the text is, clear at the top where the
   photograph should be legible. */
.yfes-serve__item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		195deg,
		rgba(8, 24, 43, 0.12) 0%,
		rgba(8, 24, 43, 0.42) 42%,
		rgba(8, 24, 43, 0.93) 88%
	);
}

.yfes-serve__body {
	margin-top: auto;
	padding: 1.4rem 1.3rem 1.5rem;
	color: var(--wp--preset--color--paper);
}

.yfes-serve__body .yfes-stat__label {
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.4rem;
}

.yfes-serve__body h3 {
	margin: 0 0 0.45rem;
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.3125rem;
}

.yfes-serve__body p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: rgba(251, 248, 242, 0.84);
}

/* ---- The borrower narrative -------------------------------------------- */

/*
 * The one long piece of writing on the front page, the SACCO story. It earns
 * a section of its own: photograph first on a phone, side by side above it,
 * with a gold rule marking the opening sentence.
 */
.yfes-narrative {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--m);
	align-items: center;
}

@media (min-width: 860px) {
	.yfes-narrative {
		grid-template-columns: 0.85fr 1fr;
		gap: clamp(2rem, 5vw, 4rem);
	}
}

.yfes-narrative .yfes-photo {
	margin: 0;
	border-radius: var(--yfes-radius-lg);
	overflow: hidden;
	box-shadow: var(--yfes-shadow-lift);
}

.yfes-narrative .yfes-photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 28rem;
	object-fit: cover;
	border-radius: 0;
}

@media (min-width: 860px) {
	.yfes-narrative .yfes-photo img {
		max-height: 34rem;
	}
}

.yfes-narrative__lead {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
	line-height: 1.38;
	color: var(--wp--preset--color--navy);
	border-left: 3px solid var(--wp--preset--color--accent);
	padding-left: 1.1rem;
	margin: 0 0 1.25rem;
}

.yfes-narrative__body p {
	color: var(--wp--preset--color--steel);
}

.yfes-narrative__body p:last-of-type {
	margin-bottom: 0;
}

/* ---- Numbered steps on a dark band ------------------------------------- */

.yfes-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: var(--wp--preset--spacing--m) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: yfes-step;
}

@media (min-width: 860px) {
	.yfes-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(1.5rem, 3vw, 2.5rem);
	}
}

.yfes-steps__item {
	position: relative;
	padding: 1.4rem 0;
	border-top: 1px solid var(--yfes-hairline-light);
}

@media (min-width: 860px) {
	.yfes-steps__item {
		padding: 1.5rem 0 0;
	}
}

.yfes-steps__num {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.6rem;
}

.yfes-steps__item h3 {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.375rem;
	color: var(--wp--preset--color--paper);
}

.yfes-steps__item p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: rgba(251, 248, 242, 0.8);
}

/* ---- Buttons ----------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	border-radius: 999px;
	padding: 0.85rem 1.6rem;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
	text-decoration: none;
	transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	box-shadow: var(--yfes-shadow-lift);
	transform: translateY(-2px);
	text-decoration: none;
}

/* The gold primary button. Navy text on gold, which is the pairing that
   actually passes contrast; white on gold does not. */
.wp-block-button.is-style-fill .wp-block-button__link.has-accent-background-color,
.wp-block-button__link.has-accent-background-color {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

/* A ghost button for use on the dark bands, where an outline button drawn in
   navy would disappear. */
.yfes-btn-light .wp-block-button__link,
.wp-block-button.yfes-btn-light .wp-block-button__link {
	background: rgba(251, 248, 242, 0.08);
	border: 1px solid rgba(251, 248, 242, 0.45);
	color: var(--wp--preset--color--paper);
}

.yfes-btn-light .wp-block-button__link:hover {
	background: rgba(251, 248, 242, 0.16);
	border-color: var(--wp--preset--color--paper);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 1px;
}

/* On a phone the hero buttons should fill the width and stack. */
@media (max-width: 520px) {
	.wp-block-buttons {
		gap: 0.75rem;
	}

	.wp-block-buttons .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* A plain text link that still looks like an action. */
.yfes-more a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	padding-bottom: 2px;
}

.yfes-more a::after {
	content: "\2192";
	transition: transform 140ms ease;
}

.yfes-more a:hover {
	text-decoration: none;
}

.yfes-more a:hover::after {
	transform: translateX(3px);
}

.yfes-band--dark .yfes-more a {
	color: var(--wp--preset--color--paper);
}

/* ---- Upcoming programs ------------------------------------------------- */

.yfes-programs {
	list-style: none;
	margin: var(--wp--preset--spacing--m) 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

@media (min-width: 820px) {
	.yfes-programs {
		grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
		gap: 1.25rem;
	}
}

.yfes-programs__item {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.35rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--yfes-hairline);
	border-radius: var(--yfes-radius);
	box-shadow: var(--yfes-shadow);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

/* The gold spine down the left edge, which is what marks these out as dated
   items rather than general cards. */
.yfes-programs__item::before {
	content: "";
	position: absolute;
	top: 1.25rem;
	bottom: 1.25rem;
	left: 0;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(180deg, var(--wp--preset--color--accent), var(--wp--preset--color--teal));
}

.yfes-programs__item h3 {
	margin: 0 0 0.4rem;
	line-height: 1.25;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
}

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

/* The whole card is the tap target, which matters on a phone. */
.yfes-programs__item a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.yfes-programs__item:hover {
	transform: translateY(-3px);
	box-shadow: var(--yfes-shadow-lift);
}

.yfes-programs__item a:hover h3,
.yfes-programs__item a:focus-visible h3 {
	color: var(--wp--preset--color--teal);
}

.yfes-programs__item p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--steel);
}

.yfes-programs__item .yfes-stat__label {
	margin-bottom: 0.6rem;
}

.yfes-empty {
	margin: var(--wp--preset--spacing--m) 0 0;
	padding: 1.5rem;
	border: 1px dashed var(--yfes-hairline);
	border-radius: var(--yfes-radius);
	background: color-mix(in srgb, #fff 60%, transparent);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--steel);
}

.yfes-band--dark .yfes-empty {
	border-color: var(--yfes-hairline-light);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(251, 248, 242, 0.8);
}

/* ---- Post and training listings ---------------------------------------- */

/*
 * Listings are cards now rather than a stack of rules. A grid on anything
 * wider than a phone, and the featured image carries the card.
 */
.yfes-loop .wp-block-post-template {
	gap: 1.25rem;
}

.yfes-loop .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 1px solid var(--yfes-hairline);
	border-bottom: 1px solid var(--yfes-hairline);
	border-radius: var(--yfes-radius);
	background: var(--wp--preset--color--white);
	box-shadow: var(--yfes-shadow);
	overflow: hidden;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.yfes-loop .wp-block-post-template > li:hover {
	transform: translateY(-3px);
	box-shadow: var(--yfes-shadow-lift);
}

.yfes-loop .wp-block-post-featured-image {
	margin: 0;
}

.yfes-loop .wp-block-post-featured-image img {
	border-radius: 0;
	width: 100%;
	display: block;
}

/* Everything that is not the image gets the card padding. */
.yfes-loop .wp-block-post-template > li > :not(.wp-block-post-featured-image) {
	margin-left: 1.35rem;
	margin-right: 1.35rem;
}

.yfes-loop .wp-block-post-template > li > :not(.wp-block-post-featured-image):first-child {
	margin-top: 1.5rem;
}

.yfes-loop .wp-block-post-template > li > :last-child {
	margin-bottom: 1.5rem;
}

.yfes-loop .wp-block-post-title {
	margin: 0.9rem 0 0.5rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.3125rem;
	line-height: 1.24;
}

.yfes-loop .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--navy);
}

.yfes-loop .wp-block-post-title a:hover {
	color: var(--wp--preset--color--teal);
	text-decoration: none;
}

.yfes-loop .wp-block-post-excerpt {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--steel);
}

.yfes-loop .wp-block-post-excerpt__more-text {
	margin-top: 0.5rem;
}

.wp-block-post-date,
.wp-block-post-terms {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
}

.wp-block-post-terms a {
	text-decoration: none;
	color: var(--wp--preset--color--teal);
}

/* Pagination as pills rather than bare numbers. */
.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--m);
	gap: 0.4rem;
	align-items: center;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--yfes-hairline);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-query-pagination .current {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--navy);
}

/* ---- Article body ------------------------------------------------------ */

.yfes-article {
	padding-top: var(--wp--preset--spacing--m);
	padding-bottom: var(--wp--preset--spacing--l);
}

.yfes-article > p:first-of-type {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
}

.yfes-article h2,
.yfes-article h3 {
	margin-top: 2.25rem;
}

.wp-block-quote {
	border-left: 3px solid var(--wp--preset--color--accent);
	padding-left: 1.25rem;
	margin-left: 0;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.45;
	color: var(--wp--preset--color--navy);
}

.wp-block-quote p:last-child {
	margin-bottom: 0;
}

/* ---- Training and program detail rows ---------------------------------- */

.yfes-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1.5rem;
	margin: var(--wp--preset--spacing--s) 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--yfes-hairline);
}

@media (min-width: 600px) {
	.yfes-meta {
		grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
		gap: 1.5rem 2rem;
	}
}

.yfes-masthead .yfes-meta {
	border-top-color: var(--yfes-hairline-light);
}

.yfes-meta__item {
	min-width: 0;
}

.yfes-meta dt {
	margin: 0 0 0.35rem;
}

.yfes-meta dd {
	margin: 0;
	font-weight: 500;
	line-height: 1.4;
}

.yfes-masthead .yfes-meta dd {
	color: var(--wp--preset--color--paper);
}

/* The eyebrow rule would repeat five times across a detail row. */
.yfes-meta dt::after {
	display: none;
}

/* ---- Outcomes ---------------------------------------------------------- */

.yfes-outcomes {
	margin-top: var(--wp--preset--spacing--m);
	padding: 1.75rem 1.5rem;
	border: 1px solid var(--yfes-hairline);
	border-radius: var(--yfes-radius);
	background-image: linear-gradient(170deg, #FFFFFF 0%, var(--wp--preset--color--sand) 100%);
	box-shadow: var(--yfes-shadow);
}

.yfes-outcomes h2 {
	margin: 0 0 1rem;
	font-size: 1.25rem;
}

.yfes-outcomes ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.yfes-outcomes li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.7rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

/* A gold tick rather than a bullet. These are things people gained. */
.yfes-outcomes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1rem;
	height: 1rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5 L6 12.5 L14 3.5' fill='none' stroke='%23D4A62A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.yfes-outcomes li:last-child {
	margin-bottom: 0;
}

/* ---- Media ------------------------------------------------------------- */

.wp-block-embed__wrapper iframe {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
	border: 0;
	border-radius: var(--yfes-radius);
}

.wp-block-embed,
.wp-block-image,
.wp-block-gallery {
	margin-top: var(--wp--preset--spacing--m);
	margin-bottom: var(--wp--preset--spacing--m);
}

.wp-block-image img,
.wp-block-gallery img,
.wp-block-post-featured-image img {
	border-radius: var(--yfes-radius);
}

/* Two across on a phone rather than a single tall column of photographs. */
.wp-block-gallery.has-nested-images {
	gap: 0.5rem;
}

/* The featured image on a single post, pulled up so it overlaps the masthead.
   It is the one flourish on an article page and it costs nothing. */
.yfes-feature {
	margin-top: calc(var(--wp--preset--spacing--m) * -1);
	margin-bottom: 0;
}

.yfes-feature img {
	border-radius: var(--yfes-radius-lg);
	box-shadow: var(--yfes-shadow-lift);
	width: 100%;
}

.yfes-photo {
	margin: 0;
}

.yfes-photo img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--yfes-radius);
}

/* ---- Forms ------------------------------------------------------------- */

/*
 * Fluent Forms ships its own styles. These align it with the theme so the
 * contact page does not look like a bolted-on plugin. 16px inputs stop iOS
 * Safari zooming in when a field is focused.
 */
.yfes-formcard {
	padding: 1.5rem 1.35rem;
	border: 1px solid var(--yfes-hairline);
	border-radius: var(--yfes-radius-lg);
	background: var(--wp--preset--color--white);
	box-shadow: var(--yfes-shadow);
}

@media (min-width: 782px) {
	.yfes-formcard {
		padding: 2.25rem 2rem;
	}
}

.fluentform .ff-el-group {
	margin-bottom: 1.1rem;
}

.fluentform .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	margin-bottom: 0.4rem;
}

.fluentform .ff-el-form-control {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--yfes-hairline);
	border-radius: var(--yfes-radius-sm);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--teal);
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 1px;
	box-shadow: none;
}

.fluentform .ff-btn-submit {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
	border: 0;
	border-radius: 999px;
	padding: 0.9rem 1.9rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	transition: transform 140ms ease, box-shadow 140ms ease;
}

@media (min-width: 600px) {
	.fluentform .ff-btn-submit {
		width: auto;
	}
}

.fluentform .ff-btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: var(--yfes-shadow-lift);
}

/* Checkbox and radio rows need a comfortable tap target. */
.fluentform .ff-el-form-check label {
	padding: 0.3rem 0;
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	line-height: 1.5;
}

/* The search form, used on 404 and the search results page. */
.wp-block-search__input {
	border: 1px solid var(--yfes-hairline);
	border-radius: 999px;
	padding: 0.8rem 1.1rem;
	font-size: 16px;
	background: var(--wp--preset--color--white);
}

.wp-block-search__button {
	border-radius: 999px;
	border: 0;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
	padding: 0.8rem 1.5rem;
	font-weight: 500;
}

.yfes-masthead .wp-block-search__input {
	border-color: var(--yfes-hairline-light);
	background: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--paper);
}

.yfes-masthead .wp-block-search__button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
}

/* ---- WhatsApp ---------------------------------------------------------- */

.yfes-whatsapp a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	font-weight: 500;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	padding-bottom: 2px;
}

/* The pinned button. Label and icon on a phone, where it is the fastest way
   to start a conversation; it stays out of the way of the footer links. */
.yfes-float {
	position: fixed;
	z-index: 40;
	right: 1rem;
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1.15rem;
	border-radius: 999px;
	background: #1FA855;
	color: #fff;
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 600;
	box-shadow: 0 6px 20px -6px rgba(8, 24, 43, 0.5);
	transition: transform 140ms ease, box-shadow 140ms ease;
}

.yfes-float:hover {
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: var(--yfes-shadow-lift);
}

.yfes-float svg {
	flex: none;
}

/* ---- Footer ------------------------------------------------------------ */

/*
 * The footer almost always follows the closing dark band, so the two are
 * treated as one join in the same way as the masthead and the framework
 * band: both gradients run vertically and meet on the base navy, and a
 * hairline marks the division. A diagonal gradient cannot meet another
 * cleanly along a horizontal edge, which is what made the seam show.
 */
footer.wp-block-group {
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(180deg, #08182B 0%, #061320 100%);
	border-top: 1px solid var(--yfes-hairline-light);
}

footer.wp-block-group a {
	color: rgba(251, 248, 242, 0.84);
	text-decoration: none;
}

footer.wp-block-group a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

footer.wp-block-group p {
	color: rgba(251, 248, 242, 0.78);
	max-width: 46ch;
}

.yfes-footer__brand {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.375rem;
	color: var(--wp--preset--color--paper);
	margin: 0 0 0.6rem;
}

.yfes-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--m);
	padding-bottom: var(--wp--preset--spacing--m);
	border-bottom: 1px solid var(--yfes-hairline-light);
}

@media (min-width: 760px) {
	.yfes-footer__cols {
		grid-template-columns: 1.6fr 1fr 1fr;
		gap: clamp(2rem, 5vw, 4rem);
	}
}

.yfes-footer__cols h2 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 0.9rem;
}

.yfes-footer__cols ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.yfes-footer__cols li {
	margin-bottom: 0.55rem;
	font-size: var(--wp--preset--font-size--small);
}

.yfes-footer__base {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	padding-top: var(--wp--preset--spacing--s);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(251, 248, 242, 0.6);
}

/*
 * The footer's reading measure is 46ch, and "Financial intelligence ·
 * Strategic clarity" set in wide-tracked mono lands within a few pixels of
 * it, so the line broke after the separator. This needs to outrank
 * `footer.wp-block-group p`, which is one element more specific than a bare
 * class and descendant, so the footer element is named here too.
 */
footer.wp-block-group .yfes-footer__base p {
	margin: 0;
	color: inherit;
	max-width: none;
}

/* ---- Focus visibility -------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---- Tap targets ------------------------------------------------------- */

/* Anything interactive should clear the 44px minimum on touch screens. */
@media (pointer: coarse) {
	.wp-block-navigation a,
	.yfes-footer__cols a,
	.wp-block-post-title a,
	.yfes-programs__item a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* ---- Motion ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.yfes-card:hover,
	.yfes-serve__item:hover,
	.yfes-programs__item:hover,
	.yfes-loop .wp-block-post-template > li:hover,
	.yfes-float:hover {
		transform: none;
	}
}

/* ---- Print ------------------------------------------------------------- */

@media print {
	.yfes-float,
	header.wp-block-group,
	footer.wp-block-group {
		display: none;
	}

	.yfes-hero,
	.yfes-masthead,
	.yfes-band--dark {
		background: none;
		color: #000;
	}

	.yfes-hero h1,
	.yfes-masthead h1 {
		color: #000;
	}
}

/* ---- Making core layouts behave ---------------------------------------- */

/*
 * A group block with the default layout gets WordPress's flow rules, which
 * add a top margin to every sibling. Inside the components above that fights
 * the grid: it pushes rows apart by a block gap the design never asked for.
 * Each component sets its own spacing, so clear the inherited margins.
 */
.yfes-stats > *,
.yfes-cards > *,
.yfes-serve > *,
.yfes-steps > *,
.yfes-footer__cols > *,
.yfes-narrative > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * The block grid layout takes a fixed column count with no breakpoints, so a
 * three-up row of articles stays three-up on a 390px phone and the words break
 * mid-syllable. Mobile first: one column, then widen.
 */
.yfes-loop .wp-block-post-template.is-layout-grid {
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.yfes-loop .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.yfes-loop--3 .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---- The figure card over the hero ------------------------------------- */

/*
 * White card lifted over the bottom edge of the hero. It ties the hero to the
 * page instead of leaving a hard seam, and it is where the eye lands after
 * the headline.
 */
.yfes-statcard {
	position: relative;
	z-index: 2;
	margin-top: calc(var(--wp--preset--spacing--m) * -1);
	margin-bottom: var(--wp--preset--spacing--l);
}

.yfes-statcard > .yfes-stats,
.yfes-statcard .yfes-stats {
	padding: 1.6rem 1.4rem;
	border: 1px solid var(--yfes-hairline);
	border-radius: var(--yfes-radius-lg);
	background: var(--wp--preset--color--white);
	box-shadow: var(--yfes-shadow-lift);
}

@media (min-width: 782px) {
	.yfes-statcard .yfes-stats {
		padding: 2.25rem 2.5rem;
	}
}

/* ---- Hero rhythm ------------------------------------------------------- */

.yfes-hero > .yfes-eyebrow {
	margin-top: 0;
}

.yfes-hero > .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--s);
}

/* ---- Section intros ---------------------------------------------------- */

.yfes-band__intro > :first-child {
	margin-top: 0;
}

.yfes-band__intro > :last-child {
	margin-bottom: 0;
}

/* ---- The closing call to action ---------------------------------------- */

/*
 * Centred at every width. The section is short enough that centring reads as
 * deliberate on a phone rather than as a mistake, and it keeps the box and
 * the text agreeing with each other: WordPress centres the boxes with auto
 * margins we deliberately do not override here.
 */
.yfes-cta {
	text-align: center;
}

.yfes-cta h2 {
	max-width: 26ch;
}

.yfes-cta p {
	max-width: 50ch;
}

.yfes-cta .yfes-eyebrow::after {
	margin-left: auto;
	margin-right: auto;
}

.yfes-cta .wp-block-buttons {
	justify-content: center;
}

/* ---- Header call to action --------------------------------------------- */

/*
 * The "Talk to us" pill is desktop only. On a phone the navigation is already
 * behind a hamburger and the pinned WhatsApp button is the faster route, so a
 * third control in the bar would only crowd the site title.
 */
.yfes-nav__cta {
	display: none;
}

@media (min-width: 900px) {
	.yfes-nav__cta {
		display: flex;
	}

	.yfes-nav__cta .wp-block-button__link {
		padding: 0.55rem 1.1rem;
	}

	/* The bar is compact; it does not need the hover lift. */
	.yfes-nav__cta .wp-block-button__link:hover {
		transform: none;
		box-shadow: none;
		background: #E4B93C;
	}
}

/* ---- Contact layout ---------------------------------------------------- */

/*
 * Form first on a phone, because that is what the page is for. Side by side
 * from the point where the form does not have to give up width to do it.
 */
.yfes-contact {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--m);
	align-items: start;
}

.yfes-contact > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

@media (min-width: 900px) {
	.yfes-contact {
		grid-template-columns: 1.4fr 1fr;
		gap: clamp(2rem, 4vw, 3.5rem);
	}
}

.yfes-contact__aside ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.yfes-contact__aside li {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--yfes-hairline);
	font-size: var(--wp--preset--font-size--small);
}

.yfes-contact__aside li:first-child {
	padding-top: 0;
}

.yfes-contact__aside h2 {
	font-size: var(--wp--preset--font-size--large);
}

/* ---- Commitment lists -------------------------------------------------- */

/*
 * The runs of "Rigour. Evidence over assumption." lines. As a plain bulleted
 * list they read as filler; two columns of ruled rows with the term in navy
 * read as a set of commitments.
 */
.yfes-values {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media (min-width: 720px) {
	.yfes-values {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(2rem, 5vw, 4rem);
	}
}

.yfes-values li {
	padding: 1rem 0;
	border-bottom: 1px solid var(--yfes-hairline);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--steel);
	line-height: 1.55;
}

.yfes-values li strong {
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	margin-bottom: 0.2rem;
}

/* ---- Seams between the header, main and footer ------------------------- */

/*
 * WordPress puts a block gap between the top-level sections, which showed as
 * a strip of cream paper between the navy header and the navy hero. The
 * sections own their vertical spacing, so take the gap away.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * The header is sticky, so it sits in the flow rather than over the hero, and
 * the hero does not need to reserve room for it. Generous padding, not
 * header-height padding.
 */
.yfes-hero {
	padding-top: var(--wp--preset--spacing--m);
}

.yfes-masthead {
	padding-top: var(--wp--preset--spacing--m);
}

@media (min-width: 782px) {
	.yfes-hero {
		padding-top: var(--wp--preset--spacing--l);
	}

	.yfes-masthead {
		padding-top: var(--wp--preset--spacing--l);
	}
}

/* On a phone the hero lede competes with the headline at the large size. */
.yfes-hero__lede {
	font-size: var(--wp--preset--font-size--medium);
}

@media (min-width: 640px) {
	.yfes-hero__lede {
		font-size: var(--wp--preset--font-size--large);
	}
}

/* ---- Fixes to core specificity ----------------------------------------- */

/*
 * The buttons block carries display:flex from its own layout class, which
 * outranks a single class, so the header pill needs to match that weight to
 * stay hidden on a phone.
 */
.wp-block-buttons.yfes-nav__cta {
	display: none;
}

@media (min-width: 900px) {
	.wp-block-buttons.yfes-nav__cta {
		display: flex;
	}
}

/* ---- The pinned WhatsApp button, refined ------------------------------- */

/*
 * A labelled pill covers the hero buttons on a narrow screen, so on phones it
 * is the icon alone, which is the convention people already recognise. The
 * label comes back once there is room beside the content.
 */
.yfes-float {
	padding: 0;
	width: 3.25rem;
	height: 3.25rem;
	justify-content: center;
	gap: 0;
}

.yfes-float span {
	display: none;
}

@media (min-width: 1100px) {
	.yfes-float {
		width: auto;
		height: auto;
		padding: 0.8rem 1.15rem;
		gap: 0.5rem;
	}

	.yfes-float span {
		display: inline;
	}
}

/* ---- Overflow safety --------------------------------------------------- */

/*
 * A figure is set very large, so any value longer than a couple of characters
 * pushes the page wider than the screen and a horizontal scrollbar appears.
 * Nothing in a figure is a real word, so breaking anywhere is safe and it
 * keeps the layout honest whatever the owner puts there later.
 */
.yfes-stat {
	overflow-wrap: anywhere;
	max-width: 100%;
}

/* The mono eyebrows are wide-tracked uppercase, which on a 320px screen can
   run past the edge on a long label. */
.yfes-eyebrow,
.yfes-stat__label,
.yfes-hero__strip {
	overflow-wrap: break-word;
}

/* ---- Left-aligning the section columns --------------------------------- */

/*
 * The constrained layout centres every child with auto margins. That is right
 * for an article, but in these sections the headline and lede also carry a
 * max-width to keep their measure readable, and the two together indented
 * them while the eyebrow and buttons stayed flush left. Anchor the children
 * to the left edge so a max-width shortens the line instead of moving it.
 *
 * Fighting those auto margins is the wrong move: WordPress prints them as
 * `margin-left: auto !important` in an inline style block, and zeroing them
 * drops the content out of the 1240px column so it no longer lines up with
 * the site title in the header.
 *
 * So leave every child the full width of the column, where they all share one
 * left edge, and shorten the headline and lede with padding instead. The box
 * stays put; only the text measure gets narrower.
 *
 * border-box is what makes that work. These elements are content-box by
 * default, so padding would be added on top of the column width, the box
 * would grow past the space available, and the auto margins would collapse to
 * zero, which is what dropped them out of the column in the first place.
 */
@media (min-width: 860px) {
	.yfes-hero h1,
	.yfes-hero__lede,
	.yfes-masthead p,
	.yfes-band__intro {
		box-sizing: border-box;
	}

	.yfes-hero h1 {
		padding-right: 42%;
	}

	.yfes-hero__lede,
	.yfes-masthead p,
	.yfes-band__intro {
		padding-right: 34%;
	}
}

/* ---- Card headings at other levels ------------------------------------- */

/*
 * A card is sometimes headed by an h2 rather than an h3, because on the how
 * we work page each card is a service and belongs in the document outline at
 * that level. It needs the card's spacing and size, not the page heading's.
 */
.yfes-card h2 {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
}

/* ---- Contact aside ----------------------------------------------------- */

/*
 * The enquiry form is long, so on a wide screen the contact details scroll
 * out of sight beside it. Pin them while the form is being filled in.
 */
@media (min-width: 900px) {
	.yfes-contact__aside {
		position: sticky;
		top: calc(var(--yfes-header-h) + 1.5rem);
	}
}

/* ---- Keeping the shortened measure sane -------------------------------- */

/*
 * A percentage padding resolves against the containing block, not the
 * element, so in a section whose column is narrower than the band around it
 * the same 34% ate most of the line and left four words per row. Cap it in
 * absolute units as well, so the measure can shorten but never collapse.
 */
@media (min-width: 860px) {
	.yfes-hero h1 {
		padding-right: min(42%, 34rem);
	}

	.yfes-hero__lede,
	.yfes-masthead p,
	.yfes-band__intro {
		padding-right: min(34%, 28rem);
	}
}

/* ---- Post terms on a dark masthead ------------------------------------- */

/*
 * The topic above an article title is a post-terms block, so it is a list of
 * links, and the listing rule further up paints those teal. Teal on navy is
 * close to unreadable, and a single class cannot reach past that rule, so
 * name both.
 */
.yfes-masthead .wp-block-post-terms,
.yfes-masthead .wp-block-post-terms a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.yfes-masthead .wp-block-post-terms a:hover {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
}

/* ---- Room for the overlapping featured image --------------------------- */

/*
 * The featured image is pulled up so it overlaps the navy masthead. On a
 * training, the masthead also carries the detail row, and the two ended up
 * almost touching. Give the masthead back the height the image borrows, but
 * only where an image actually follows it. Browsers without :has() get the
 * previous tight spacing, which was cramped rather than broken.
 */
.yfes-masthead:has(+ .yfes-feature) {
	padding-bottom: calc(var(--wp--preset--spacing--m) + 2.5rem);
}

/* ---- Fluent Forms submit button ---------------------------------------- */

/*
 * The plugin's own stylesheet wins on specificity for the submit button, so
 * the interest form on a program page came out navy while the enquiry form's
 * call to action is gold. Name the wrapper as well so both agree.
 */
.fluentform form .ff-btn-submit,
.fluentform .ff-el-group .ff-btn-submit,
.fluentform .ff_submit_btn_wrapper .ff-btn-submit {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
	border: 0;
	font-weight: 600;
}

.fluentform form .ff-btn-submit:hover,
.fluentform .ff-el-group .ff-btn-submit:hover,
.fluentform .ff_submit_btn_wrapper .ff-btn-submit:hover {
	background: #E4B93C;
	color: var(--wp--preset--color--navy);
}

/* ---- Sections must butt up against each other -------------------------- */

/*
 * Every section owns its own vertical padding, so the block gap WordPress
 * inserts between siblings is not just unwanted, it is visible: a 24px strip
 * of cream paper appeared wherever two coloured bands met, which on How we
 * work put a pale line between the navy masthead and the navy framework band,
 * and on About between the sand principles and the navy mission.
 *
 * Zeroing it on `.wp-site-blocks > *` was not enough. That only reaches the
 * top-level header, main and footer. On the pages built from patterns the
 * sections are siblings inside `post-content`, one level further in, so they
 * were still getting the gap. Naming the sections themselves covers every
 * place they can appear.
 *
 * `.yfes-statcard` is deliberately absent: it sets a negative top margin to
 * lift itself over the hero. A section that genuinely wants separation sets
 * it inline, which still wins over this.
 */
.yfes-hero,
.yfes-masthead,
.yfes-band {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ---- Card motifs sit on the floor -------------------------------------- */

/*
 * In a grid every card is as tall as the tallest, so the card with less text
 * was leaving the plotted motif stranded halfway up with dead space beneath
 * it. Pushing the motif down with an auto margin makes the cards read as a
 * set: the text tops align and the motifs sit on a common baseline.
 */
.yfes-card__plot {
	margin-top: auto;
	padding-top: 1.25rem;
}

/* ---- Two dark sections meeting -------------------------------------- */

/*
 * On How we work the navy masthead is followed immediately by the navy
 * framework band. Each ran its own gradient at its own angle, so where they
 * met the tones did not line up and the join read as a rendering fault rather
 * than a division between sections.
 *
 * Treat the pair as one continuous navy panel: the masthead returns to the
 * base navy at its foot, the band beneath it is that same flat navy, and a
 * single hairline marks where one section ends and the next begins. The
 * band keeps its own grid and arc, so the panel still has depth.
 */
/*
 * The gradient has to run vertically here, not on the diagonal the masthead
 * uses elsewhere. A diagonal gradient's bottom edge is a different colour at
 * the left than at the right, so it can never meet a flat panel cleanly: the
 * join showed as a pale wedge on the left. Turned vertical, the foot of the
 * masthead is one uniform navy and matches the band below it exactly.
 */
.yfes-masthead:has(+ .yfes-band--dark) {
	background-image: linear-gradient(180deg, #0C2745 0%, #103150 42%, #08182B 100%);
}

.yfes-masthead + .yfes-band--dark {
	background-image: none;
	background-color: #08182B;
	border-top: 1px solid var(--yfes-hairline-light);
}

/* The closing call to action is the section that runs into the footer, so it
   ends on the base navy the footer begins with. */
.yfes-band--dark.yfes-cta {
	background-image: linear-gradient(180deg, #0B2540 0%, #0E2C49 45%, #08182B 100%);
}

/* ---- Form validation --------------------------------------------------- */

/*
 * The error colour is defined here and not in theme.json on purpose. It is a
 * state, not a brand colour, and the owner should not be able to paint a
 * heading with it. This red holds its contrast on both white and the cream
 * paper.
 */
:root {
	--yfes-error: #B3261E;
	--yfes-error-soft: #FDF2F1;
}

/* The field that failed. A red border alone is not a message, so it is paired
   with the inline text below and never used on its own. */
.fluentform .ff-el-group.ff-el-is-error .ff-el-form-control,
.fluentform .ff-el-form-control.ff-el-is-error {
	border-color: var(--yfes-error);
	background-color: var(--yfes-error-soft);
}

.fluentform .ff-el-group.ff-el-is-error .ff-el-form-control:focus {
	border-color: var(--yfes-error);
	outline-color: var(--yfes-error);
}

/*
 * The message itself, sitting directly under its own field. A leading glyph
 * carries the meaning for anyone who cannot separate the red from the black,
 * so colour is never the only signal.
 */
.fluentform .error.text-danger,
.fluentform .ff-el-is-error .error {
	display: flex;
	gap: 0.4rem;
	align-items: flex-start;
	margin-top: 0.45rem;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--yfes-error);
	font-weight: 500;
}

.fluentform .error.text-danger::before {
	content: "!";
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.1rem;
	border-radius: 50%;
	background: var(--yfes-error);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

/*
 * The stacked summary under the submit button. Inline placement empties it,
 * but Fluent Forms still prints the container and still uses it for errors
 * the server raises after submission, so it is styled as a panel rather than
 * left as loose red text.
 */
.ff-errors-in-stack:not(:empty) {
	margin-top: 1rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--yfes-error);
	border-left-width: 3px;
	border-radius: var(--yfes-radius-sm);
	background: var(--yfes-error-soft);
	color: var(--yfes-error);
	font-size: 0.875rem;
}

.ff-errors-in-stack .error {
	color: var(--yfes-error);
}

/*
 * Fluent Forms scrolls the first failed field into view. The header is sticky,
 * so without this the field it scrolls to sits underneath the bar.
 */
.fluentform .ff-el-group {
	scroll-margin-top: calc(var(--yfes-header-h) + 1.5rem);
}

/* ---- Checkboxes and radios --------------------------------------------- */

/*
 * These were raw browser controls in the middle of an otherwise styled form.
 * accent-color restyles them natively, which keeps the keyboard behaviour and
 * the platform's own focus ring rather than reimplementing both.
 */
.fluentform input[type="checkbox"],
.fluentform input[type="radio"] {
	accent-color: var(--wp--preset--color--teal);
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	flex: none;
	cursor: pointer;
}

.fluentform .ff-el-form-check label {
	cursor: pointer;
}

/* The group label above a set of checkboxes reads as a question, so it gets
   the same weight as a field label rather than looking like body copy. */
.fluentform .ff-el-input--label.ff-el-is-required label,
.fluentform .ff-el-group > .ff-el-input--label label {
	font-weight: 500;
}

/* Native selects keep the platform arrow but take the theme's shape. */
.fluentform select.ff-el-form-control {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2356697C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 1rem;
	padding-right: 2.6rem;
}