/*
 * main.css: all the styles for the KDF Corp theme.
 *
 * Design direction (chosen 2 Oct 2026, "style tile 4"):
 * light backgrounds, Archivo for headings (it pairs with the Impact
 * logos), Inter for text, navy for structure, gold for emphasis.
 * Balloon colours are not used on kdfcorp.com.
 *
 * Contents:
 *   1. Design tokens (colours, fonts, sizes)
 *   2. Base styles
 *   3. Buttons and small parts
 *   4. Header and menu
 *   5. Homepage sections
 *   6. Ordinary pages and posts
 *   7. Footer
 *   8. Phone and tablet adjustments
 */

/* 0. Fonts ---------------------------------------------------------
 * Hosted on our own server (assets/fonts/), not loaded from Google, so
 * visitors' browsers make no outside requests. Each file is a "variable"
 * font: one file contains every weight from thin to black. */
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* 1. Design tokens -------------------------------------------------
 * "Custom properties" (variables). Change a value here and it changes
 * everywhere it is used. */
:root {
	--navy: #0b1f3a;
	--navy-dark: #081629;
	--gold: #b07d2e;
	--ink: #1a1a1a;
	--grey: #5f6368;
	--line: #e4e4e0;
	--soft: #f6f6f3;
	--white: #fff;

	--font-heading: "Archivo", "Inter", system-ui, sans-serif;
	--font-text: "Inter", system-ui, sans-serif;

	--wrap: 1140px;     /* maximum content width */
	--gutter: 24px;     /* space at the left and right edges */
	--header-h: 88px;   /* header height */
}

/* 2. Base styles ---------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-text);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--white);
}

img { max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3 {
	font-family: var(--font-heading);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--navy);
	margin: 0;
}

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.wrap--narrow { max-width: 780px; }

/* Visible only when reached with the keyboard (Tab key). */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	background: var(--navy);
	color: #fff;
	padding: 8px 14px;
	z-index: 100;
}
.skip-link:focus { left: 8px; }

/* A clear outline for keyboard users on every link and button. */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* 3. Buttons and small parts --------------------------------------- */
.kicker {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
}

.btn {
	display: inline-block;
	padding: 14px 26px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: background-color .15s, color .15s;
}
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: #163160; }
.btn--secondary { border-color: var(--navy); color: var(--navy); }
.btn--secondary:hover { background: var(--navy); color: #fff; }
.btn--outline-gold { border-color: var(--gold); color: #fff; }
.btn--outline-gold:hover { background: var(--gold); }

.tags,
.lifecycle {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	/* When the list is given extra height (to push a card's link to the
	   bottom), keep the tags at their natural height, packed at the top. */
	align-content: flex-start;
	align-items: flex-start;
}
.tags li,
.lifecycle li {
	font-size: 13px;
	font-weight: 500;
	color: var(--navy);
	border: 1px solid var(--line);
	background: #fff;
	padding: 4px 10px;
}
/* The lifecycle is a numbered list: CSS counters add the gold numbers. */
.lifecycle { counter-reset: stage; }
.lifecycle li {
	counter-increment: stage;
	display: flex;
	align-items: center;
	gap: 6px;
	padding-left: 6px;
}
.lifecycle li::before {
	content: counter(stage);
	min-width: 12px;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--gold);
}

/* 4. Header and menu ------------------------------------------------ */
.site-header {
	position: sticky;   /* stays at the top while scrolling */
	top: 0;
	z-index: 10;
	background: #fff;
	border-bottom: 1px solid var(--line);
}
/* Keep the header below the WordPress admin bar when logged in. */
.admin-bar .site-header { top: 32px; }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);
}
.site-header__logo img { display: block; height: 52px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav__list {
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 500;
}
.site-nav__list a { color: var(--navy); text-decoration: none; }
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a { color: var(--gold); }
.site-nav__cta { padding: 10px 18px; font-size: 15px; }

/* The "Menu" button only appears on small screens (see section 8). */
.menu-toggle {
	display: none;
	font: 600 15px var(--font-text);
	color: var(--navy);
	background: none;
	border: 1.5px solid var(--navy);
	padding: 8px 14px;
	cursor: pointer;
}

/* 5. Homepage sections ---------------------------------------------- */
.hero { padding: 104px 0 88px; }
.hero__title {
	font-size: clamp(36px, 5vw, 62px);
	max-width: 18ch;
	margin: 18px 0 24px;
}
.hero__title em { font-style: normal; color: var(--gold); }
.hero__text { font-size: 19px; color: var(--grey); max-width: 54ch; margin: 0 0 36px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Homepage opening: navy band; text on the left, a photo from the field on the right. */
.hero--field { background: var(--navy); color: #fff; padding: 88px 0; }
.hero__split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero--field .kicker { color: #d8b56a; }
.hero--field .hero__title { font-size: clamp(32px, 3.4vw, 48px); max-width: 20ch; color: #fff; }
.hero--field .hero__title em { color: #d8b56a; }
.hero--field .hero__text { font-size: 18px; color: #c9d2de; margin-bottom: 28px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 32px; margin: 36px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); }
.hero__facts dt { font: 800 30px/1 var(--font-heading); color: #fff; margin-bottom: 6px; }
.hero__facts dd { margin: 0; font-size: 14px; color: #c9d2de; }
.hero__facts-note { margin: 12px 0 0; font-size: 13px; font-style: italic; color: #aab6c6; }
.hero__photo { margin: 0; }
.hero__photo img { display: block; width: 100%; height: auto; border: 6px solid #fff; }
.hero__photo figcaption { margin-top: 10px; font-size: 13px; font-style: italic; color: #aab6c6; }
.hero__photo figcaption a { color: #d8b56a; }
.btn--gold { background: #d8b56a; border-color: #d8b56a; color: var(--navy); }
.btn--gold:hover { background: #e6c98a; border-color: #e6c98a; }
.btn--outline-light { border-color: #fff; color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--navy); }

.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats__note { margin-top: -12px; padding-bottom: 18px; font-size: 13px; font-style: italic; color: var(--grey); }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { padding: 30px 0; }
.stat + .stat { padding-left: 32px; border-left: 1px solid var(--line); }
.stat__value {
	display: block;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 48px;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--navy);
}
.stat__label { font-size: 15px; color: var(--grey); }

.lines { background: var(--soft); padding: 96px 0; }
.lines__head { margin-bottom: 44px; }
.lines__title { font-size: clamp(28px, 3.2vw, 38px); margin-top: 12px; }
.lines__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	padding: 40px;
}
.card__logo { height: 56px; width: auto; align-self: flex-start; margin-bottom: 28px; }
.card__label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
}
.card__title { font-size: 26px; margin-bottom: 10px; }
.card__lead { font-weight: 600; color: var(--navy); margin: 0 0 10px; }
.card__text { color: var(--grey); margin: 0 0 22px; }
.card__note { font-size: 14px; color: var(--grey); margin: 6px 0 22px; }
.card__grow { flex: 1; }   /* pushes the link to the bottom of the card */
.card__link {
	align-self: flex-start;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
	border-bottom: 2px solid var(--gold);
	padding-bottom: 2px;
}

.credibility { padding: 96px 0; }
.credibility__inner { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: start; }
.credibility img { height: 38px; width: auto; margin-top: 10px; }
.credibility p {
	margin: 0;
	max-width: 32em;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--navy);
}

.cta { background: var(--navy); color: #fff; padding: 80px 0; }
/* Left: heading, short text, contact and button. Right: what we help with. */
.cta__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.cta__title { color: #fff; font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 12px; }
.cta__text { margin: 0 0 20px; color: rgba(255, 255, 255, .8); font-size: 18px; max-width: 34ch; }
.cta__contact { margin: 0 0 24px; color: rgba(255, 255, 255, .75); }
.cta__contact a { color: #fff; }
.cta__topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 1px solid rgba(255, 255, 255, .15); }
.cta__topics li { position: relative; padding: 14px 0 14px 24px; border-bottom: 1px solid rgba(255, 255, 255, .15); font-weight: 500; line-height: 1.45; }
.cta__topics li::before { content: ""; position: absolute; left: 0; top: 25px; width: 12px; height: 2px; background: var(--gold); }

/* 5b. Inner pages (Infiniti, and later Prudence and About) ---------- */

/* Text only for screen readers (e.g. the country name inside a map pin). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.page-hero { padding: 88px 0 72px; }
.page-hero__logo { height: 88px; width: auto; margin-bottom: 40px; display: block; }
.page-hero__title { font-size: clamp(36px, 5vw, 60px); margin: 16px 0 22px; max-width: 18ch; }
.page-hero__title em { font-style: normal; color: var(--gold); }
.page-hero__text { font-size: 19px; color: var(--grey); max-width: 60ch; margin: 0 0 34px; }

.section { padding: 96px 0; }
.section--soft { background: var(--soft); }
.section__head { margin-bottom: 44px; max-width: 760px; }
.section__title { font-size: clamp(28px, 3.2vw, 38px); margin-top: 12px; }
.section__text { color: var(--grey); margin: 14px 0 0; }

/* "Why guarantees": three numbered steps. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; border-top: 2px solid var(--navy); padding-top: 20px; }
.steps li::before {
	content: counter(step, decimal-leading-zero);
	display: block;
	font: 700 14px var(--font-heading);
	color: var(--gold);
	margin-bottom: 10px;
}
.steps h3 { font-size: 21px; margin-bottom: 8px; }
.steps p { color: var(--grey); margin: 0; }

/* Expertise: 2 x 2 grid. */
.expertise { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.expertise__item { background: #fff; border: 1px solid var(--line); padding: 36px; }
.expertise__num { display: block; font: 700 14px var(--font-heading); color: var(--gold); margin-bottom: 12px; }
.expertise__item h3 { font-size: 22px; margin-bottom: 10px; }
.expertise__item p { color: var(--grey); margin: 0 0 20px; }

/* Featured assignment cards. */
.assignments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; }
.assignment { border: 1px solid var(--line); border-top: 3px solid var(--gold); padding: 24px; }
.assignment__country { margin: 0 0 4px; font: 800 20px var(--font-heading); color: var(--navy); }
.assignment__client { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--gold); }
.assignment__text { margin: 0; font-size: 15px; color: var(--grey); }

/* World map: the picture, with pins placed by percentage on top. */
.world-map { position: relative; }
.world-map__img { display: block; width: 100%; height: auto; }
.world-map__hint { font-size: 14px; color: var(--grey); margin: 12px 0 48px; }
.map-pin {
	position: absolute;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;   /* centre the pin on its point */
	border-radius: 50%;
	background: var(--gold);
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	transition: transform .15s;
}
.map-pin:hover,
.map-pin.is-active { transform: scale(1.35); background: var(--navy); }
.map-panel {
	position: absolute;
	z-index: 3;
	width: min(340px, 80vw);
	margin: 14px 0 0 14px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 14px 34px -14px rgba(11, 31, 58, .45);
	padding: 18px 20px;
	font-size: 14px;
}
.map-panel--left { transform: translateX(calc(-100% - 28px)); }
.map-panel__title { margin: 0 0 8px; font: 800 18px var(--font-heading); color: var(--navy); }
.map-panel .country__projects { max-height: 260px; overflow: auto; }

/* Countries listed by region, each one opens to show its assignments. */
.regions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 48px; }
.regions__title { font-size: 15px; font-family: var(--font-text); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 24px 0 8px; }
.country { border-bottom: 1px solid var(--line); }
.country summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 12px 0;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--navy);
}
.country summary::-webkit-details-marker { display: none; }
.country summary::after { content: "+"; font-weight: 400; color: var(--gold); margin-left: 12px; }
.country[open] summary::after { content: "\2212"; } /* a minus sign */
.country__name { flex: 1; }
.country:target summary { color: var(--gold); }
.country__projects { list-style: none; margin: 0; padding: 0 0 12px; }
.country__projects li { padding: 10px 0; border-top: 1px dashed var(--line); font-size: 14px; color: var(--grey); }
.country__projects li:first-child { border-top: 0; }
.country__projects strong { display: block; color: var(--navy); }
.country__meta { display: block; font-size: 13px; color: var(--gold); margin-bottom: 2px; }

/* Partners strip. */
.partners { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 40px 0; }
.partners__list { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; margin: 16px 0 0; padding: 0; font: 700 17px var(--font-heading); color: var(--navy); }

/* Quote. */
.quote { padding: 96px 0; text-align: center; }
.quote img { height: 34px; width: auto; margin-bottom: 24px; }
.quote blockquote { margin: 0; }
.quote blockquote p { font: 500 clamp(22px, 2.6vw, 30px)/1.4 var(--font-heading); color: var(--navy); letter-spacing: -.01em; margin: 0 0 20px; }
.quote footer { font-size: 15px; color: var(--grey); }

/* Profile. */
.profile { display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: start; }
.profile__photo { width: 200px; height: 200px; object-fit: cover; object-position: center top; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--gold); margin-bottom: 20px; }
.profile__name { margin: 0; font: 800 24px var(--font-heading); color: var(--navy); }
.profile__creds { margin: 0 0 4px; font-weight: 600; color: var(--gold); }
.profile__role { margin: 0 0 18px; color: var(--grey); font-size: 15px; }
.profile__role:has(+ .profile__role) { margin-bottom: 10px; }
.profile__facts { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--grey); }
.profile__facts li { padding: 4px 0; }
.profile__main .section__title { margin-bottom: 20px; }
.profile__main > p { color: var(--grey); }
.timeline { list-style: none; margin: 28px 0 0; padding: 0; border-left: 2px solid var(--gold); }
.timeline li { position: relative; padding: 0 0 20px 24px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); }
.timeline__years { display: block; font-size: 13px; font-weight: 600; color: var(--gold); }
.timeline__role { display: block; font-weight: 600; color: var(--navy); }
.timeline__org { display: block; font-size: 15px; color: var(--grey); }

/* Link across to the other line of business. */
.crosslink { padding: 72px 0; border-top: 1px solid var(--line); }
.crosslink__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; }
.crosslink__inner img { height: 56px; width: auto; }
.crosslink__title { font-size: 28px; margin-bottom: 6px; }
.crosslink p { margin: 0; color: var(--grey); max-width: 52ch; }

/* 5c. Prudence pages ------------------------------------------------- */

/* Sub-menu linking the three Prudence pages. */
.subnav { border-bottom: 1px solid var(--line); background: var(--soft); }
.subnav__inner { display: flex; align-items: center; gap: 32px; min-height: 60px; flex-wrap: wrap; }
.subnav__logo { height: 32px; width: auto; }
.subnav__list { display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; margin: 0; padding: 0; font-size: 15px; font-weight: 500; }
.subnav__list a { text-decoration: none; color: var(--navy); padding: 18px 0; display: inline-block; border-bottom: 2px solid transparent; }
.subnav__list a:hover { color: var(--gold); }
.subnav__list a[aria-current="page"] { border-bottom-color: var(--gold); }

.page-hero--compact { padding: 72px 0 56px; }
.page-hero--compact .page-hero__title { max-width: 22ch; }
.gold { color: var(--gold); }
.source { font-size: 13px; color: var(--grey); margin: 16px 0 0; }
.steps--spaced { margin-top: 64px; }
.note-strong { margin: 32px 0 0; font-weight: 600; color: var(--navy); max-width: 70ch; }

/* Small labels such as "In development", "Live", "Roadmap". */
.badge {
	display: inline-block;
	vertical-align: middle;
	font: 600 11px var(--font-text);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold);
	border: 1px solid var(--gold);
	padding: 3px 8px;
	margin-right: 6px;
}
.badge--live { color: #fff; background: var(--navy); border-color: var(--navy); }

/* Big figures (World Bank survey, testing). */
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.figures--three { grid-template-columns: repeat(3, 1fr); }
.figure { background: #fff; border: 1px solid var(--line); padding: 24px; }
.figure__value { display: block; font: 800 44px/1.05 var(--font-heading); color: var(--navy); letter-spacing: -.02em; margin-bottom: 8px; }
.figure__label { font-size: 15px; color: var(--grey); }

/* Two columns: text on the left, a list on the right. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.split__text { color: var(--grey); margin: 20px 0 24px; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid var(--line); color: var(--grey); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 22px; width: 14px; height: 2px; background: var(--gold); }
.checklist strong { color: var(--navy); }
.checklist--two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }

/* Lifecycle shown large on the Prudence page. */
.lifecycle--large { margin-bottom: 40px; gap: 8px; }
.lifecycle--large li { font-size: 15px; padding: 10px 16px 10px 10px; }

.processes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.process { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--navy); padding: 28px; }
.process h3 { font-size: 20px; margin-bottom: 6px; }
.process__when { font-size: 14px; color: var(--gold); font-weight: 600; margin: 0 0 16px; }
.process dl { margin: 0; }
.process dt { font-weight: 600; color: var(--navy); font-size: 15px; margin-top: 12px; }
.process dd { margin: 2px 0 0; font-size: 15px; color: var(--grey); }

/* Table: the two views of the platform. */
.table-wrap { overflow-x: auto; margin-bottom: 24px; }
.views { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.views th,
.views td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.views thead th { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border-bottom: 2px solid var(--navy); }
.views tbody th { color: var(--navy); font-weight: 600; white-space: nowrap; }
.views td { color: var(--grey); }

/* Rows: a term on the left, its description on the right. */
.rows { margin: 0; }
.rows__item { display: grid; grid-template-columns: 280px 1fr; gap: 32px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.rows dt { font-weight: 700; font-family: var(--font-heading); font-size: 18px; color: var(--navy); }
.rows dd { margin: 0; color: var(--grey); }

.options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.option { border: 1px solid var(--line); padding: 28px; }
.option h3 { font-size: 20px; margin-bottom: 12px; }
.option p { color: var(--grey); font-size: 15px; margin: 0 0 12px; }
.option .badge { margin: 6px 0 0; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare__col { border: 1px solid var(--line); padding: 32px; }
.compare__col p { color: var(--grey); margin: 0; }
.compare__col--ours { border: 2px solid var(--navy); }
.compare__label { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold) !important; margin-bottom: 6px !important; }
.compare__value { font: 800 36px/1.1 var(--font-heading); color: var(--navy) !important; margin-bottom: 14px !important; }

/* Live / roadmap lists on the detail pages. */
.status { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.status__note { margin: 16px 0 0; font-size: 15px; color: var(--grey); font-style: italic; }
.status__title { font-size: 22px; margin-bottom: 16px; }
.status__list { margin: 0; }
.status__list dt { font-weight: 600; color: var(--navy); padding-top: 16px; border-top: 1px solid var(--line); }
.status__list dd { margin: 4px 0 16px; color: var(--grey); }

.evidence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.evidence__item { border: 1px solid var(--line); padding: 28px; }
.evidence__item h3 { font-size: 20px; margin-bottom: 12px; }
.evidence__item p { margin: 0 0 12px; font-size: 15px; color: var(--grey); }
.evidence__label { font-size: 12px !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold) !important; margin: 16px 0 4px !important; }

/* Screenshots (Prudence pages). */
.shot { margin: 0; }
.shot__frame { display: block; border: 1px solid var(--line); background: var(--navy); box-shadow: 0 18px 40px -24px rgba(11, 31, 58, .45); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: 10px; font-size: 14px; color: var(--grey); max-width: 70ch; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; align-items: start; }
.shots--single { grid-template-columns: 1fr; max-width: 980px; }
.hero-shot { margin-top: 56px; }
.shot-note { margin: 12px 0 0; font-size: 13px; color: var(--grey); font-style: italic; }

/* "How we design schemes" (Infiniti Consulting page). */
.approach { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.approach__item { background: #fff; border: 1px solid var(--line); padding: 32px; }
.approach__item--wide { grid-column: 1 / -1; }
.approach__item h3 { font-size: 22px; margin-bottom: 10px; }
.approach__item > p { color: var(--grey); margin: 0 0 22px; }
/* "What the borrower has at stake": the loan as a box inside a larger box. */
/* The three parties' roles, above the stakes diagram. */
.roles { list-style: none; margin: 0 0 16px; padding: 0; }
.roles li { padding: 8px 0 8px 14px; border-left: 3px solid var(--gold); margin-bottom: 8px; font-size: 15px; line-height: 1.5; }
.roles strong { color: var(--navy); }
.stake { position: relative; background: #f6ebe7; border: 2px solid #9c3b2e; padding: 16px 16px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.stake__title { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7a1f1f; }
.stake__loan { background: #fff; border: 1px solid var(--line); padding: 10px; }
.stake__loan-title { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.stake__split { display: flex; height: 64px; }
.stake__bank,
.stake__scheme { display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; font-size: 12px; line-height: 1.2; font-weight: 600; color: #fff; }
.stake__bank { flex: 0 0 25%; background: var(--gold); }
.stake__scheme { flex: 1; background: var(--navy); border-left: 2px solid #fff; }
.stake__loan-note { margin: 6px 0 0; font-size: 12px; color: var(--grey); }
.stake__rest { list-style: none; margin: 0; padding: 0; }
.stake__rest li { position: relative; padding: 6px 0 6px 16px; font-size: 14px; font-weight: 600; color: #7a1f1f; border-bottom: 1px solid rgba(156, 59, 46, .25); }
.stake__rest li:last-child { border-bottom: 0; }
.stake__rest li::before { content: ""; position: absolute; left: 0; top: 14px; width: 8px; height: 8px; background: #9c3b2e; }
.stake__line { margin: 18px 0 0 !important; font-weight: 600; color: var(--navy) !important; }
.riskbar__note { margin: 10px 0 0; font-size: 13px; color: var(--grey); font-style: italic; }
.balance { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.balance__head { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.balance ul { list-style: none; margin: 0; padding: 0; }
.balance li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--navy); }
.balance__line { margin: 20px 0 0; font-weight: 600; color: var(--navy); }
.triggers { list-style: none; margin: 0; padding: 0; }
.triggers li { display: grid; grid-template-columns: 120px 1fr 1.4fr; gap: 20px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.triggers__level { font: 700 15px var(--font-heading); color: var(--navy); }
.triggers__bar { display: block; height: 10px; background: var(--soft); position: relative; }
.triggers__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, var(--gold), #9c3b2e); }
.triggers__action { font-size: 15px; color: var(--grey); }

/* 5d. About and Contact --------------------------------------------- */

/* Company facts: label on the left, value on the right. */
.facts { margin: 0; border-top: 2px solid var(--navy); }
.facts__row { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 600; color: var(--navy); }
.facts dd { margin: 0; color: var(--grey); }
.facts a { color: var(--navy); text-decoration-color: var(--gold); }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact__email { margin: 0 0 6px; font: 800 clamp(22px, 3vw, 32px)/1.2 var(--font-heading); letter-spacing: -.01em; word-break: break-word; }
.contact__email a { color: var(--navy); text-decoration: none; }
.contact__email a:hover { color: var(--gold); }
.contact__who { margin: 0 0 24px; color: var(--grey); }

.forward p { color: var(--grey); margin: 12px 0 0; }
.forward__note { font-size: 15px; }
.forward__note a { color: var(--navy); text-decoration-color: var(--gold); }

/* 5e. Diaries (the blog) ------------------------------------------- */

.page-hero .kicker a,
.article__head .kicker a { color: inherit; text-decoration: none; }
.page-hero .kicker a:hover,
.article__head .kicker a:hover { text-decoration: underline; }

/* Author line with a small round photo. */
.byline { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center top; }
.byline p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--navy); }
.byline span { color: var(--grey); font-size: 14px; }

/* Topic filters. */
.topics { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--soft); }
.topics__inner { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; padding-bottom: 16px; }
.topics__link { font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none; border: 1px solid var(--line); background: #fff; padding: 6px 12px; }
.topics__link:hover { border-color: var(--navy); }
.topics__link.is-current { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Post cards. */
.diaries { padding-top: 56px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.post-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; }
.post-card__image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--soft); }
.post-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.post-card:hover .post-card__image img { transform: scale(1.03); }
.post-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.post-card__topic { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.post-card__title { font-size: 20px; line-height: 1.25; margin-bottom: 10px; }
.post-card__title a { text-decoration: none; color: var(--navy); }
.post-card__title a:hover { color: var(--gold); }
.post-card__summary { margin: 0 0 16px; font-size: 15px; color: var(--grey); flex: 1; }
.post-card__meta { margin: 0; font-size: 13px; color: var(--grey); }

/* The newest post, shown large above the grid. */
.post-card--featured { flex-direction: row; margin-bottom: 40px; }
.post-card--featured .post-card__image { flex: 1.2; aspect-ratio: auto; min-height: 320px; }
.post-card--featured .post-card__body { flex: 1; padding: 40px; justify-content: center; }
.post-card--featured .post-card__title { font-size: clamp(24px, 2.6vw, 32px); }
.post-card--featured .post-card__summary { flex: 0; font-size: 16px; }

/* Page numbers. */
.pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--line); text-decoration: none; color: var(--navy); font-weight: 500; }
.pagination .page-numbers.current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* A single post. */
.article__head { padding: 72px 0 40px; }
.article__title { font-size: clamp(30px, 4vw, 46px); margin: 14px 0 24px; }
.article__body { font-size: 18px; line-height: 1.75; }
.article__body img { display: block; height: auto; margin: 32px 0; }
.article__body figure { margin: 32px 0; }
.article__body figcaption,
.article__body .wp-caption-text { font-size: 14px; color: var(--grey); margin-top: 8px; }
.article__body blockquote { margin: 32px 0; padding-left: 24px; border-left: 3px solid var(--gold); font-family: var(--font-heading); font-size: 21px; color: var(--navy); }
.article__body ul,
.article__body ol { padding-left: 24px; }
.article__foot { border-top: 1px solid var(--line); margin: 48px 0 80px; padding-top: 24px; }
.article__foot .tags a { text-decoration: none; }
.article__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.post-grid--related { margin-top: 20px; }

/* 5f. Privacy and other text pages ---------------------------------- */
.page-content__meta { margin: -20px 0 32px; color: var(--grey); font-size: 15px; }
.summary-box { background: var(--soft); border-left: 3px solid var(--gold); padding: 24px 28px; margin-bottom: 40px; }
.summary-box h2 { font-size: 20px; margin-bottom: 10px; }
.summary-box ul { margin: 0; padding-left: 20px; color: var(--navy); }
.summary-box li { margin: 4px 0; }
.prose ul { padding-left: 22px; }
.prose li { margin: 6px 0; }

/* 5g. Writer (private tool) ----------------------------------------- */
.writer-status { margin: 24px 0 0; color: var(--grey); font-size: 15px; }
.writer-notice { margin: 12px 0 0; padding: 12px 16px; background: #fbf5ea; border-left: 3px solid var(--gold); font-size: 15px; }
.writer { max-width: 860px; }
.writer__group { border: 0; padding: 0; margin: 0 0 28px; }
.writer__group legend,
.field > span { display: block; font-weight: 600; color: var(--navy); margin-bottom: 10px; font-size: 15px; }
.choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choice__item input,
.choice__chip input { position: absolute; opacity: 0; }
.choice__item span { display: block; border: 1px solid var(--line); background: #fff; padding: 14px 16px; cursor: pointer; }
.choice__item small { display: block; color: var(--grey); font-size: 13px; }
.choice__item input:checked + span { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.choice__item input:focus-visible + span,
.choice__chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.choice--chips { display: flex; flex-wrap: wrap; gap: 8px; }
.choice__chip span { display: inline-block; border: 1px solid var(--line); background: #fff; padding: 6px 12px; font-size: 14px; cursor: pointer; }
.choice__chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.writer__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: block; margin-bottom: 20px; }
.field input,
.field textarea,
.field select { width: 100%; font: 16px/1.5 var(--font-text); color: var(--ink); background: #fff; border: 1px solid #cfcfca; padding: 10px 12px; }
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.writer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.writer__actions .btn { cursor: pointer; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.writer__busy { margin: 0; color: var(--grey); }
.writer__error { margin: 16px 0 0; padding: 12px 16px; background: #fdecea; border-left: 3px solid #b3261e; color: #5c1410; }
.writer__link { background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; padding: 0 0 2px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.tabs__tab { font: 600 15px var(--font-text); color: var(--grey); background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; cursor: pointer; }
.tabs__tab.is-active { color: var(--navy); border-bottom-color: var(--gold); }
.writer__article { background: #fff; border: 1px solid var(--line); padding: 36px; margin-bottom: 16px; }
.writer__article h2 { font-size: 30px; margin: 6px 0 8px; }
.writer__subtitle { font-size: 18px; color: var(--grey); margin: 0 0 24px; }
.writer__linkedin { white-space: pre-wrap; background: #fff; border: 1px solid var(--line); padding: 24px; }
.writer__hashtags { color: var(--gold); font-weight: 600; }
.writer__saved { margin: 16px 0 0; padding: 12px 16px; background: #eef6ef; border-left: 3px solid #2f6b3a; }
.writer__model { margin-top: 24px; font-size: 13px; color: var(--grey); }
.writer-settings { border: 1px solid var(--line); padding: 20px 24px; }
.writer-settings summary { font: 700 18px var(--font-heading); color: var(--navy); cursor: pointer; }
.writer-settings__block { margin-top: 28px; }
.writer-settings__block h3 { font-size: 18px; margin-bottom: 6px; }
.writer-settings__block p { color: var(--grey); font-size: 15px; }


/* "What Prudence does for your scheme": four outcomes, as a 2 x 2 grid on the
   home page and one row of four on /prudence/. Cards in the expertise style. */
.outcomes__grid { display: grid; gap: 24px; }
.outcomes--grid .outcomes__grid { grid-template-columns: 1fr 1fr; }
.outcomes--row .outcomes__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.outcome { background: #fff; border: 1px solid var(--line); padding: 32px; }
.outcomes--row .outcome { padding: 24px; }
.outcome__title { font-size: 20px; line-height: 1.3; margin: 0 0 10px; color: var(--navy); }
.outcomes--row .outcome__title { font-size: 17px; }
.outcome p { color: var(--grey); margin: 0; }
.outcomes--row .outcome p { font-size: 15px; }
@media (max-width: 1080px) { .outcomes--row .outcomes__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .outcomes--grid .outcomes__grid, .outcomes--row .outcomes__grid { grid-template-columns: 1fr; } .outcome { padding: 24px; } }

/* 6. Ordinary pages and posts --------------------------------------- */
.page-content { padding: 80px 0 96px; }
.page-content__title { font-size: clamp(32px, 4vw, 48px); margin-bottom: 32px; }
.prose { color: var(--ink); }
.prose h2 { font-size: 28px; margin: 40px 0 12px; }
.prose h3 { font-size: 21px; margin: 32px 0 10px; }
.prose a { color: var(--navy); text-decoration-color: var(--gold); }
.post-summary { padding: 24px 0; border-bottom: 1px solid var(--line); }
.post-summary__title { font-size: 24px; }
.post-summary__title a { text-decoration: none; }
.post-summary__meta { margin: 4px 0 8px; font-size: 14px; color: var(--grey); }

/* 7. Footer --------------------------------------------------------- */
.site-footer { background: var(--navy-dark); color: rgba(255, 255, 255, .65); font-size: 14px; padding: 48px 0 40px; }
.site-footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.site-footer__logo { height: 44px; width: auto; margin-bottom: 14px; }
.site-footer p { margin: 0 0 6px; }
.site-footer__heading {
	font-family: var(--font-text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 12px;
}
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin: 0 0 6px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; }

/* 8. Phone and tablet adjustments ----------------------------------
 * "@media (max-width: 820px)" means: only apply these rules when the
 * screen is 820 pixels wide or less. */
@media (max-width: 820px) {
	:root { --header-h: 72px; }
	.site-header__logo img { height: 44px; }

	/* The menu collapses into a panel under the header. */
	.menu-toggle { display: block; }
	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: #fff;
		border-bottom: 1px solid var(--line);
		padding: 8px var(--gutter) 20px;
	}
	.site-nav.is-open { display: flex; }   /* added by navigation.js */
	.site-nav__list { flex-direction: column; gap: 0; }
	.site-nav__list a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
	.site-nav__cta { margin-top: 16px; text-align: center; }

	.hero { padding: 64px 0 56px; }
	.hero__split { grid-template-columns: 1fr; gap: 40px; }
	.hero--field { padding: 56px 0; }
	.hero__photo { max-width: 420px; }
	.hero__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
	.hero__facts dt { font-size: 26px; }
	.hero__facts dd { font-size: 13px; }
	.stats__grid,
	.lines__grid,
	.site-footer__inner { grid-template-columns: 1fr; }
	.stat + .stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
	.card { padding: 28px; }
	.credibility__inner { grid-template-columns: 1fr; gap: 16px; }

	.page-hero { padding: 56px 0 48px; }
	.page-hero__logo { height: 64px; }
	.section { padding: 64px 0; }
	.steps,
	.expertise,
	.assignments,
	.regions,
	.profile,
	.crosslink__inner { grid-template-columns: 1fr; }
	.profile { gap: 32px; }
	.expertise__item { padding: 26px; }
	.map-pin { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-width: 2px; }
	/* On phones the panel sits under the map instead of beside the pin. */
	.map-panel,
	.map-panel--left { position: static; transform: none; width: auto; margin: 12px 0 0; }

	.subnav__inner { gap: 4px 24px; padding: 10px var(--gutter); }
	.subnav__list a { padding: 8px 0; }
	.figures,
	.figures--three { grid-template-columns: 1fr 1fr; }
	.split,
	.processes,
	.options,
	.compare,
	.status,
	.evidence,
	.checklist--two { grid-template-columns: 1fr; }
	.split { gap: 32px; }
	.rows__item { grid-template-columns: 1fr; gap: 6px; }
	.contact { grid-template-columns: 1fr; gap: 40px; }
	.cta__grid { grid-template-columns: 1fr; gap: 36px; }
	.approach,
	.balance { grid-template-columns: 1fr; }
	.approach__item { padding: 24px; }
	.triggers li { grid-template-columns: 1fr; gap: 6px; }
	.stake { grid-template-columns: 1fr; }
	.cta__topics { grid-template-columns: 1fr; }
	.shots { grid-template-columns: 1fr; }
	.hero-shot { margin-top: 36px; }
	.post-grid { grid-template-columns: 1fr; }
	.post-card--featured { flex-direction: column; }
	.post-card--featured .post-card__image { min-height: 0; aspect-ratio: 16 / 9; }
	.post-card--featured .post-card__body { padding: 24px; }
	.article__head { padding: 48px 0 28px; }
	.article__body { font-size: 17px; }
	.choice,
	.writer__row { grid-template-columns: 1fr; }
	.writer__article { padding: 22px; }
	.facts__row { grid-template-columns: 1fr; gap: 2px; }
	.figure__value { font-size: 34px; }
}

@media (min-width: 821px) and (max-width: 1060px) {
	.assignments,
	.post-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	/* The WordPress admin bar is taller on small screens. */
	.admin-bar .site-header { top: 46px; }
}