/* ==========================================================================
   Mind Maprs — page sections
   The structured, repeating sections rendered by inc/shortcodes*.php.
   ========================================================================== */

/* --- Statistic row ------------------------------------------------------ */

.stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0;
	border-top: var(--mm-border-strong);
}

.stat-row > .stat {
	display: block;
	padding: 30px 26px 34px;
	border-inline-end: var(--mm-border);
	text-decoration: none;
}

.stat-row > .stat:first-child { padding-inline-start: 0; }
.stat-row > .stat:last-child { border-inline-end: 0; }

a.stat:hover { background: var(--mm-sky-tint); text-decoration: none; }

@media (max-width: 700px) {
	.stat-row > .stat {
		padding-inline: 0;
		border-inline-end: 0;
		border-block-end: var(--mm-border);
	}
	.stat-row > .stat:last-child { border-block-end: 0; }
}

/* --- Section heads ------------------------------------------------------ */

.section-head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--mm-space-lg);
	margin-bottom: clamp(28px, 3.4vw, 44px);
}

.section-head__title {
	margin: 0;
	font-size: clamp(28px, 3.2vw, 46px);
	line-height: 1.06;
	letter-spacing: -0.032em;
	max-width: 14em;
}

.section-head__title--lg {
	font-size: clamp(30px, 3.4vw, 50px);
	line-height: 1.02;
	letter-spacing: -0.036em;
}

.section-head__lead {
	margin: var(--mm-space-sm) 0 0;
	font-family: var(--mm-font-display);
	font-weight: 400;
	font-size: clamp(17px, 1.5vw, 22px);
	line-height: 1.4;
	color: var(--mm-blue);
	max-width: 28em;
}

.section-head__kicker {
	margin: 0 0 10px;
	font-family: var(--mm-font-display);
	font-size: var(--mm-size-eyebrow);
	font-weight: 600;
	letter-spacing: var(--mm-track-eyebrow);
	text-transform: uppercase;
	color: var(--mm-blue);
	max-width: none;
}

.section-note {
	margin: 0 0 var(--mm-space-lg);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--mm-muted-faint);
	max-width: 40em;
}

.section-footnote {
	margin: var(--mm-space-sm) 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--mm-muted-faint);
	max-width: 44em;
}

/* --- Hairline grid ------------------------------------------------------
   Cells separated by a 1px gap over a rule-coloured background, so the grid
   reads as ruled rather than gapped. This is the house grid.
   ---------------------------------------------------------------------- */

.hairline-grid {
	display: grid;
	gap: 1px;
	background: var(--mm-white);
	border: var(--mm-border);
}

/* Each cell paints its own hairline. Neighbouring shadows meet inside the 1px
   gap to read as a single rule, and a short final row leaves white space
   rather than a block of rule colour. */
.hairline-grid > * {
	background: var(--mm-white);
	box-shadow: 0 0 0 1px var(--mm-line);
}

.hairline-grid--5 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.hairline-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.hairline-grid--domains { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.hairline-grid--compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* --- Stages ------------------------------------------------------------- */

.stage {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 22px 30px;
}

.stage__n,
.domain__n,
.dimension__n,
.approach__n,
.service-card__n,
.reason__n,
.framework__n,
.phase__n,
.dc-site__label,
.point__n {
	font-family: var(--mm-font-display);
	font-size: var(--mm-size-eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--mm-blue);
	margin: 0;
	max-width: none;
}

.stage__rule {
	display: block;
	width: 34px;
	height: 3px;
	background: var(--mm-sky);
}

.stage__title {
	margin: 0;
	font-size: 19px;
	letter-spacing: var(--mm-track-tight);
}

.stage__text {
	margin: 0;
	font-size: var(--mm-size-sm);
	line-height: 1.56;
	color: var(--mm-muted-soft);
	max-width: none;
}

/* Long form, for the Methodology page. */

.stage-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--mm-border);
}

.stage-list__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: var(--mm-space-md);
	margin: 0;
	padding: clamp(22px, 2.4vw, 32px) 0;
	border-bottom: var(--mm-border);
}

.stage-list__n {
	font-family: var(--mm-font-display);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 600;
	color: var(--mm-sky);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.stage-list__title {
	margin: 0 0 8px;
	font-size: clamp(20px, 1.9vw, 24px);
	color: var(--mm-navy);
}

.stage-list__text {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.68;
	color: var(--mm-muted);
	max-width: 46em;
}

/* --- RAG legend --------------------------------------------------------- */

.rag-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background: var(--mm-line);
	border: var(--mm-border);
	border-top: 0;
}

.rag-legend__item {
	display: flex;
	flex: 1 1 190px;
	align-items: center;
	gap: 12px;
	padding: 18px 22px;
	background: var(--mm-white);
	font-size: 13.5px;
	color: var(--mm-muted);
}

.rag-legend__swatch {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
}

.rag-legend__swatch--positive { background: var(--mm-positive); }
.rag-legend__swatch--caution { background: var(--mm-caution); }
.rag-legend__swatch--critical { background: var(--mm-critical); }

.rag-legend strong { color: var(--mm-ink); font-weight: 600; }

/* --- RAG heat map ------------------------------------------------------- */

.rag {
	background: var(--mm-white);
	border: var(--mm-border);
	overflow-x: auto;
}

.rag__head,
.rag__row {
	display: grid;
	grid-template-columns: minmax(180px, 1.6fr) 88px minmax(120px, 1fr) 120px;
	align-items: center;
	min-width: 620px;
}

.rag__head {
	background: var(--mm-navy);
	color: var(--mm-white);
	font-family: var(--mm-font-display);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.rag__head > span { padding: 14px 18px; }

.rag__row { border-top: var(--mm-border); }
.rag__row > span { padding: 15px 18px; }

.rag__domain {
	font-family: var(--mm-font-display);
	font-size: 15px;
	font-weight: 500;
	color: var(--mm-navy);
	letter-spacing: -0.012em;
}

.rag__pct {
	font-family: var(--mm-font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--mm-ink);
}

.rag__bar {
	display: block;
	position: relative;
}

.rag__bar::before {
	content: "";
	display: block;
	height: 8px;
	background: var(--mm-surface-alt);
}

.rag__fill {
	position: absolute;
	top: 15px;
	left: 18px;
	height: 8px;
	max-width: calc(100% - 36px);
}

.rag__fill--positive { background: var(--mm-positive); }
.rag__fill--caution { background: var(--mm-caution); }
.rag__fill--critical { background: var(--mm-critical); }

.rag__label {
	font-family: var(--mm-font-display);
	font-size: var(--mm-size-eyebrow);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.rag__label--positive { color: var(--mm-positive); }
.rag__label--caution { color: var(--mm-caution); }
.rag__label--critical { color: var(--mm-critical); }

/* --- Domains ------------------------------------------------------------ */

.domain {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	padding: 20px;
	min-height: 100px;
}

.domain--compact { padding: 22px 18px; min-height: 104px; }

.domain__title {
	font-family: var(--mm-font-display);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.012em;
	color: var(--mm-navy);
}

.domain--compact .domain__title { font-size: 16px; line-height: 1.28; }

/* --- Dimensions --------------------------------------------------------- */

.dimension {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 24px;
}

.dimension__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dimension__rule {
	flex: 1;
	height: 1px;
	background: var(--mm-line);
}

.dimension__title {
	margin: 0;
	font-size: 18px;
	line-height: 1.26;
	letter-spacing: var(--mm-track-tight);
	color: var(--mm-navy);
}

.dimension__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--mm-muted-soft);
	max-width: none;
}

/* --- Phases ------------------------------------------------------------- */

.phase {
	padding: clamp(26px, 2.6vw, 34px);
	background: var(--mm-white);
	border: var(--mm-border);
	border-top: 4px solid var(--mm-sky-soft);
}

.phase--2 { border-top-color: var(--mm-sky); }
.phase--3 { border-top-color: var(--mm-navy); }

.phase__n { margin: 0 0 18px; letter-spacing: 0.16em; text-transform: uppercase; }

.phase__title {
	margin: 0 0 12px;
	font-size: 24px;
	letter-spacing: -0.024em;
	color: var(--mm-navy);
}

.phase__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.66;
	color: var(--mm-muted-soft);
	max-width: none;
}

/* --- Three-site strategy ------------------------------------------------ */

.dc-stack {
	display: grid;
	gap: 1px;
	background: var(--mm-line);
	border: var(--mm-border);
	max-width: 640px;
}

.dc-site {
	padding: 22px;
	background: var(--mm-white);
}

.dc-site--primary { border-left: 3px solid var(--mm-sky); }

.dc-site__label { margin: 0 0 10px; letter-spacing: 0.16em; text-transform: uppercase; }

.dc-site__title {
	margin: 0 0 8px;
	font-size: 19px;
	letter-spacing: var(--mm-track-tight);
	color: var(--mm-navy);
}

.dc-site__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--mm-muted-soft);
	max-width: none;
}

/* --- Chips -------------------------------------------------------------- */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--mm-space-md);
	padding: 0;
	list-style: none;
}

.chip {
	margin: 0;
	padding: 11px 16px;
	background: var(--mm-surface-alt);
	border: var(--mm-border);
	font-size: var(--mm-size-sm);
	color: var(--mm-navy);
}

/* --- Framework list ----------------------------------------------------- */

.framework-list { border-top: var(--mm-border); }

.framework {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: var(--mm-space-md);
	padding: clamp(20px, 2.2vw, 28px) 0;
	border-bottom: var(--mm-border);
}

.framework__title {
	margin: 0 0 8px;
	font-size: clamp(18px, 1.7vw, 22px);
	color: var(--mm-navy);
	letter-spacing: -0.02em;
}

.framework__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.66;
	color: var(--mm-muted);
	max-width: 48em;
}

/* --- Reasons ------------------------------------------------------------ */

.reason-list { border-top: var(--mm-border); max-width: 62em; }

.reason {
	padding: 24px 0;
	border-bottom: var(--mm-border);
}

.reason__head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 10px;
}

.reason__n { font-size: 12px; letter-spacing: 0.12em; }

.reason__title {
	margin: 0;
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.24;
	letter-spacing: -0.02em;
	color: var(--mm-navy);
}

.reason__text {
	margin: 0;
	padding-left: 26px;
	font-size: 16.5px;
	line-height: 1.68;
	color: var(--mm-muted);
	max-width: 46em;
}

/* --- Point list (service pages) ----------------------------------------- */

.point-list { border-top: var(--mm-border); }

.point {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: var(--mm-space-md);
	padding: clamp(20px, 2.2vw, 28px) 0;
	border-bottom: var(--mm-border);
}

.point__title {
	margin: 0 0 8px;
	font-size: clamp(18px, 1.6vw, 21px);
	color: var(--mm-navy);
	letter-spacing: -0.02em;
}

.point__text {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.68;
	color: var(--mm-muted);
	max-width: 46em;
}

/* --- Approach ----------------------------------------------------------- */

.approach {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 2.4vw, 32px);
	min-height: 210px;
	background: var(--mm-surface-alt);
	border-top: 3px solid var(--mm-sky);
}

.approach__n { margin-bottom: auto; letter-spacing: 0.16em; }

.approach__title {
	margin: 24px 0 10px;
	font-size: 20px;
	letter-spacing: var(--mm-track-tight);
	color: var(--mm-navy);
}

.approach__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.62;
	color: var(--mm-muted-soft);
	max-width: none;
}

/* --- Service cards ------------------------------------------------------ */

.service-grid { gap: clamp(12px, 1.4vw, 20px); }

.service-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(24px, 2.4vw, 32px);
	background: var(--mm-white);
	border-top: 3px solid var(--mm-line);
	text-decoration: none;
	transition: border-top-color var(--mm-duration) var(--mm-ease), box-shadow var(--mm-duration) var(--mm-ease);
}

.service-card:hover,
.service-card:focus-visible {
	border-top-color: var(--mm-blue);
	box-shadow: 0 18px 40px -22px rgba(20, 38, 74, 0.5);
	text-decoration: none;
}

.service-card__n { letter-spacing: 0.16em; }

.service-card__title {
	margin: 0;
	font-size: 19px;
	line-height: 1.26;
	letter-spacing: -0.02em;
	color: var(--mm-navy);
}

.service-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.62;
	color: var(--mm-muted-soft);
	max-width: none;
}

.service-card__more {
	margin-top: auto;
	padding-top: 14px;
	font-family: var(--mm-font-display);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mm-blue);
}

/* --- Practice tiles ----------------------------------------------------- */

.practice-tiles { align-items: stretch; }

.practice-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: clamp(460px, 44vw, 560px);
	background: var(--mm-surface);
	text-decoration: none;
	transition: box-shadow var(--mm-duration) var(--mm-ease);
}

.practice-tile:hover { box-shadow: var(--mm-shadow-card); text-decoration: none; }

.practice-tile__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--mm-line-strong);
}

.practice-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.practice-tile__placeholder,
.band__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 220px;
	background: var(--mm-line-strong);
}

.practice-tile__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: clamp(26px, 3vw, 40px);
	background: var(--mm-white);
}

.practice-tiles > * { display: flex; }

.practice-tile__eyebrow {
	margin-bottom: 16px;
	font-family: var(--mm-font-display);
	font-size: var(--mm-size-eyebrow);
	font-weight: 600;
	letter-spacing: var(--mm-track-eyebrow);
	text-transform: uppercase;
	color: var(--mm-blue);
}

.practice-tile__title {
	margin-bottom: 14px;
	font-family: var(--mm-font-display);
	font-size: clamp(26px, 2.7vw, 38px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.028em;
	color: var(--mm-ink);
}

.practice-tile__text {
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 1.62;
	color: var(--mm-muted);
	max-width: 26em;
}

.practice-tile__more {
	margin-top: auto;
	font-family: var(--mm-font-display);
	font-size: var(--mm-size-sm);
	font-weight: 600;
	color: var(--mm-blue);
}

/* --- Band --------------------------------------------------------------- */

.section--flush { padding-block: 0; }

.band__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	align-items: stretch;
}

.band--flip .band__media { order: 2; }

.band__media {
	position: relative;
	min-height: clamp(320px, 34vw, 480px);
}

.band__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.band__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(40px, 5vw, 76px) clamp(24px, 3.4vw, 64px);
}

.band__title {
	margin: 0 0 22px;
	font-size: clamp(26px, 2.9vw, 42px);
	line-height: 1.08;
	letter-spacing: -0.03em;
	max-width: 15em;
}

.band__text p {
	font-size: clamp(16px, 1.35vw, 18.5px);
	line-height: 1.68;
	color: var(--mm-muted);
	max-width: 36em;
}

.band__action { margin: var(--mm-space-md) 0 0; }

/* --- Statement ---------------------------------------------------------- */

.statement__text {
	margin: 0;
	font-family: var(--mm-font-display);
	font-weight: 400;
	font-size: clamp(20px, 2.4vw, 34px);
	line-height: 1.4;
	letter-spacing: -0.024em;
	color: var(--mm-ink);
	max-width: 26em;
}

/* --- Contact grid ------------------------------------------------------- */

.contact-cell { padding: 26px 24px; }

.contact-cell__label {
	margin: 0 0 14px;
	font-family: var(--mm-font-display);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mm-muted-faint);
	max-width: none;
}

.contact-cell__name {
	margin: 0 0 5px;
	font-family: var(--mm-font-display);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: var(--mm-track-tight);
	color: var(--mm-navy);
	max-width: none;
}

.contact-cell__role {
	margin: 0;
	font-size: 14.5px;
	color: var(--mm-muted-soft);
	max-width: none;
}

.contact-cell__links {
	display: grid;
	gap: 6px;
	font-size: 15.5px;
}

/* --- Home hero ---------------------------------------------------------- */

.home-hero {
	background: var(--mm-surface);
	border-bottom: var(--mm-border);
	padding-block: clamp(48px, 6vw, 86px) clamp(40px, 5vw, 64px);
}

.home-hero__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(32px, 4vw, 64px);
	align-items: center;
	margin-bottom: clamp(40px, 5vw, 72px);
}

.home-hero__title {
	margin: 0 0 28px;
	font-size: var(--mm-size-display);
	line-height: 1;
	letter-spacing: -0.038em;
}

.home-hero__standfirst {
	margin: 0;
	font-size: clamp(16.5px, 1.45vw, 20px);
	line-height: 1.64;
	color: var(--mm-muted);
	max-width: 32em;
}

.home-hero__media {
	position: relative;
	min-height: clamp(300px, 36vw, 480px);
	background: var(--mm-line-strong);
}

.home-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Practice breadcrumb eyebrow ---------------------------------------- */

.trail-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 32px;
	font-family: var(--mm-font-display);
	font-size: var(--mm-size-eyebrow);
	font-weight: 600;
	letter-spacing: var(--mm-track-eyebrow);
	text-transform: uppercase;
	color: var(--mm-blue);
	max-width: none;
}

.trail-eyebrow span[aria-hidden] { opacity: 0.5; }
.trail-eyebrow strong { color: var(--mm-ink); font-weight: 600; }

/* --- Full-bleed section flow -------------------------------------------
   Pages built from section shortcodes have no constraining wrapper, so the
   sections lay out edge to edge and each manages its own container.
   ---------------------------------------------------------------------- */

.entry__content--sections > * { max-width: none; }

.entry__content--sections .alignfull,
.entry__content--sections .section {
	margin-inline: 0;
	width: auto;
}

.entry__content--sections > p:empty { display: none; }

/* --- Prose sections ----------------------------------------------------- */

.prose { max-width: 46em; }

.prose p {
	font-size: clamp(16.5px, 1.4vw, 19px);
	line-height: 1.72;
	color: var(--mm-muted);
	max-width: none;
}

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

.prose-aside {
	display: grid;
	grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
}

@media (max-width: 780px) {
	.prose-aside { grid-template-columns: minmax(0, 1fr); gap: var(--mm-space-sm); }
}

.prose-aside .section-head__kicker { padding-top: 8px; margin: 0; }

.prose-aside__body p {
	margin: 0 0 var(--mm-space-md);
	font-size: clamp(16.5px, 1.5vw, 21px);
	line-height: 1.7;
	color: var(--mm-muted);
	max-width: 38em;
}

.prose-aside__body p:last-child { margin-bottom: 0; }

.ruled-list__items--lg li {
	padding: 20px 0;
	font-size: clamp(16px, 1.4vw, 18.5px);
	line-height: 1.6;
}

/* --- Split section ------------------------------------------------------ */

.grid--split-flip .split__media { order: 2; }

.split__media {
	position: relative;
	min-height: clamp(280px, 32vw, 440px);
	background: var(--mm-line-strong);
}

.split__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.split__body p {
	font-size: clamp(16px, 1.4vw, 18.5px);
	line-height: 1.74;
	color: var(--mm-muted);
}

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

.section-note--lead {
	font-size: clamp(16px, 1.35vw, 18.5px);
	line-height: 1.72;
	color: var(--mm-muted);
	max-width: 44em;
}