/*
 * The Mentor Associates — component CSS.
 * Everything theme.json cannot express. Tokens are pulled from theme.json via
 * CSS custom properties (--wp--preset--* and --wp--custom--*). No hard-coded
 * colours except where a token is composed inline.
 *
 * No shadows anywhere except the service-tile hairline technique (§4.4) and the
 * mobile CTA lift (§4.11). Separation is by hairline and background tone.
 */

/* ===================================== 0a. Font-size tokens (safety net) ===
   WordPress was not emitting some font-size preset variables from theme.json
   on the front end (h1-home, h2, sub-h2, numeral, quote, tile-h, h1-inner),
   so every heading referencing them fell back to body size. Defining them here
   makes the theme self-sufficient. Values mirror theme.json exactly; presets WP
   does emit resolve to the same value, so there is no conflict. Defined on both
   :root and body so it wins even if WP emits an empty body-level value. */
:root, body {
	/* AA contrast fix: brand slate #6C7F8E is only 4.15:1 on white (the spec's
	   "4.6:1" was wrong) — darkened to #5E6E7C (5.25:1) to meet WCAG AA. */
	--wp--preset--color--slate: #5E6E7C;
	--wp--preset--font-size--eyebrow: 11px;
	--wp--preset--font-size--meta: 13px;
	--wp--preset--font-size--nav: 14.5px;
	--wp--preset--font-size--card-body: 14.5px;
	--wp--preset--font-size--body: 15.5px;
	--wp--preset--font-size--button: 15px;
	--wp--preset--font-size--process-h: 18px;
	--wp--preset--font-size--lead: clamp(17px, 1.3vw, 19.5px);
	--wp--preset--font-size--card-h: clamp(19px, 1.8vw, 23px);
	--wp--preset--font-size--quote: clamp(21px, 2.2vw, 30px);
	--wp--preset--font-size--tile-h: clamp(22px, 2.2vw, 28px);
	--wp--preset--font-size--sub-h2: clamp(24px, 2.6vw, 34px);
	--wp--preset--font-size--numeral: clamp(26px, 2.6vw, 40px);
	--wp--preset--font-size--h2: clamp(28px, 3.2vw, 44px);
	--wp--preset--font-size--h1-inner: clamp(32px, 3.8vw, 52px);
	--wp--preset--font-size--h1-home: clamp(40px, 5.2vw, 74px);
}

/* ============================================================= 0. Base ==== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

::selection {
	background: var(--wp--custom--selection--bg);
	color: var(--wp--custom--selection--text);
}

/* Consistent, visible focus everywhere (DESIGN-SPEC §8). */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-blue);
	outline-offset: 2px;
}
/* On navy surfaces the blue outline is too low-contrast — go white. */
.tma-onnavy :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline-color: #fff;
}

/* Skip link — first focusable element (§8). */
.tma-skip {
	position: absolute;
	left: 8px;
	top: -60px;
	z-index: 1000;
	background: var(--wp--preset--color--ink-navy);
	color: #fff;
	padding: 12px 18px;
	border-radius: var(--wp--custom--radius);
	font: 600 14px/1 var(--wp--preset--font-family--noto-sans);
	text-decoration: none;
	transition: top var(--wp--custom--transition);
}
.tma-skip:focus { top: 8px; color: #fff; }

:target { scroll-margin-top: calc(var(--wp--custom--header--height) + 16px); }

/* ==================================================== 1. Layout helpers ==== */

.tma-container { width: 100%; max-width: var(--wp--custom--width--content); margin-inline: auto; }
.tma-narrow    { max-width: var(--wp--custom--width--narrow); margin-inline: auto; }
.tma-prose     { max-width: var(--wp--custom--width--prose);  margin-inline: auto; }
.tma-hero-w    { max-width: var(--wp--custom--width--hero);    margin-inline: auto; }

.tma-section {
	padding-block: var(--wp--preset--spacing--section);
	padding-inline: var(--wp--preset--spacing--section-x);
}
.tma-section--tight { padding-block: var(--wp--preset--spacing--section-tight); }

/* Named background tones. Rule: max two besides white on any page (§1). */
.tma-bg-sand25    { background: var(--wp--preset--color--sand-25); }
.tma-bg-offwhite  { background: var(--wp--preset--color--off-white); }
.tma-bg-sand      { background: var(--wp--preset--color--sand); }
.tma-onnavy       { background: var(--wp--preset--color--ink-navy); color: #fff; }

/* ========================================================= 2. Typography == */

.tma-eyebrow {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 18px;
	font: 600 var(--wp--preset--font-size--eyebrow)/1 var(--wp--preset--font-family--noto-sans);
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-blue);
}
.tma-eyebrow::before {
	content: ""; flex: none; width: 26px; height: 1px;
	background: var(--wp--preset--color--brand-blue);
}
.tma-onnavy .tma-eyebrow { color: rgba(255,255,255,.7); }
.tma-onnavy .tma-eyebrow::before { background: rgba(255,255,255,.4); }

.tma-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.62;
	max-width: 55ch;
	text-wrap: pretty;
}
.tma-onnavy .tma-lead { color: var(--wp--custom--ink--on-navy-lead); }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Arrow glyphs live in their own span so gap handles the spacing (§6). */
.tma-arrow { display: inline-block; }

/* Standalone "… →" text link, e.g. "See the work →", "Read the full story →". */
.tma-arrowlink {
	display: inline-flex; align-items: center; gap: 8px;
	font: 600 13px/1 var(--wp--preset--font-family--noto-sans);
	color: var(--wp--preset--color--brand-blue);
	text-decoration: none;
	transition: color var(--wp--custom--transition);
}
.tma-arrowlink:hover { color: var(--wp--preset--color--ink-navy); }
.tma-onnavy .tma-arrowlink { color: var(--wp--preset--color--sand); }
.tma-onnavy .tma-arrowlink:hover { color: #fff; }

/* ============================================================ 3. Buttons == */

.tma-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 15px 28px;
	border: 0; border-radius: var(--wp--custom--radius);
	font: 600 var(--wp--preset--font-size--button)/1 var(--wp--preset--font-family--noto-sans);
	text-decoration: none; cursor: pointer;
	transition: background var(--wp--custom--transition), border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}
.tma-btn--primary { background: var(--wp--preset--color--ink-navy); color: #fff; }
.tma-btn--primary:hover { background: var(--wp--preset--color--brand-blue); color: #fff; }

.tma-btn--sand { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink-navy); }
.tma-btn--sand:hover { background: #fff; color: var(--wp--preset--color--ink-navy); }

.tma-btn--secondary {
	background: transparent; color: var(--wp--preset--color--ink-navy);
	border: 1px solid var(--wp--custom--line--input);
}
.tma-btn--secondary:hover { background: var(--wp--preset--color--sand-25); border-color: var(--wp--preset--color--ink-navy); color: var(--wp--preset--color--ink-navy); }

.tma-btn--hero { padding: 17px 30px; font-size: 15px; }

/* Row of buttons — never spaced by margins (§3). */
.tma-btnrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ============================================================= 4. Header == */

/* WordPress wraps the header template part in <header class="wp-block-template-part">
   — that is the banner landmark and a direct child of the tall page container,
   so the sticky + bar styling lives here (element+class targets only the header,
   not the matching footer wrapper). .tma-header is a plain inner div. */
header.wp-block-template-part {
	position: sticky; top: 0; z-index: 100;
	background: var(--wp--custom--header--bg);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--custom--line--on-white);
}
/* Fallback if the header is ever rendered without the WP wrapper. */
body:not(:has(header.wp-block-template-part)) .tma-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--wp--custom--header--bg);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--custom--line--on-white);
}
.tma-header__inner {
	max-width: var(--wp--custom--width--content); margin-inline: auto;
	min-height: var(--wp--custom--header--height);
	padding-inline: var(--wp--preset--spacing--section-x);
	display: flex; align-items: center; gap: 24px;
}
.tma-logo { display: inline-flex; align-items: center; line-height: 0; }
.tma-logo svg { height: clamp(38px, 4.6vw, 54px); width: auto; }
.tma-header__spacer { flex: 1 1 auto; }

.tma-nav { display: flex; align-items: center; gap: 28px; }
/* wp_nav_menu renders a <ul>; keep it a flat flex row like the fallback links. */
.tma-nav__list { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.tma-nav a, .tma-nav__list a {
	font: 500 var(--wp--preset--font-size--nav)/1 var(--wp--preset--font-family--noto-sans);
	color: var(--wp--preset--color--body-text);
	text-decoration: none;
	padding-block: 4px;
	border-bottom: 1px solid transparent;
	transition: color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}
.tma-nav a:hover, .tma-nav a[aria-current] { color: var(--wp--preset--color--ink-navy); border-bottom-color: var(--wp--preset--color--brand-blue); }

.tma-lang {
	display: flex; align-items: center; gap: 8px;
	padding-left: 22px; margin-left: -4px;
	border-left: 1px solid var(--wp--custom--line--on-white);
	font-size: 12.5px;
}
.tma-lang a { text-decoration: none; color: var(--wp--preset--color--slate); font-weight: 500; }
.tma-lang [aria-current="true"] { color: var(--wp--preset--color--ink-navy); font-weight: 600; }

.tma-header .tma-btn { padding: 13px 22px; font-size: 13.5px; }

/* Hamburger — hidden until the nav collapses at 1024px. */
.tma-burger {
	display: none;
	flex: none; /* never shrink below the 44×44 touch target */
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
	background: transparent; border: 1px solid rgba(8,26,46,.16);
	border-radius: var(--wp--custom--radius); cursor: pointer;
}
.tma-burger svg { width: 20px; height: 20px; }
.tma-header__book-compact { display: none; }

/* Mobile panel (collapsed nav). */
.tma-mobilenav { display: none; }

@media (max-width: 1023px) {
	.tma-nav, .tma-lang, .tma-header > .tma-header__inner > .tma-btn--primary:not(.tma-header__book-compact) { display: none; }
	.tma-burger { display: inline-flex; }
	.tma-header__book-compact { display: inline-flex; }

	.tma-mobilenav {
		display: block;
		border-top: 1px solid var(--wp--custom--line--on-white);
		background: #fff;
	}
	.tma-mobilenav[hidden] { display: none; }
	.tma-mobilenav__list { list-style: none; margin: 0; padding: 0; }
	.tma-mobilenav a {
		display: block;
		padding: 16px var(--wp--preset--spacing--section-x);
		font: 500 17px/1.2 var(--wp--preset--font-family--noto-sans);
		color: var(--wp--preset--color--ink-navy);
		text-decoration: none;
		border-bottom: 1px solid var(--wp--custom--line--on-white);
	}
	.tma-mobilenav__lang { padding: 16px var(--wp--preset--spacing--section-x); }
	/* The switcher's header styling (left hairline/padding) is wrong here. */
	.tma-mobilenav__lang .tma-lang { border: 0; padding: 0; margin: 0; gap: 14px; }
	.tma-mobilenav__lang .tma-lang a { display: inline; padding: 0; border: 0; }
}

/* ====================================================== 5. Home — hero === */

.tma-hero { padding-top: clamp(40px, 5vw, 72px); }
.tma-hero__inner { max-width: var(--wp--custom--width--hero); margin-inline: auto; }
.tma-hero h1 {
	font-size: var(--wp--preset--font-size--h1-home);
	line-height: 1.04; letter-spacing: -.02em;
	max-width: 20ch; margin: 0 0 22px;
}
.tma-hero .tma-lead { margin: 0 0 clamp(28px, 3.5vw, 44px); }

/* Sector selector (§5.1). */
.tma-selector { border-top: 1px solid var(--wp--custom--line--rule); padding-top: clamp(24px, 3vw, 34px); }
.tma-selector__prompt {
	margin: 0 0 14px;
	font: 600 var(--wp--preset--font-size--eyebrow)/1 var(--wp--preset--font-family--noto-sans);
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}
.tma-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.tma-chip {
	padding: 9px 16px;
	border: 1px solid var(--wp--custom--line--chip);
	border-radius: var(--wp--custom--radius);
	background: transparent;
	font: 500 14px/1 var(--wp--preset--font-family--noto-sans);
	color: var(--wp--preset--color--body-text);
	cursor: pointer;
	transition: background var(--wp--custom--transition), border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}
.tma-chip:hover { border-color: var(--wp--preset--color--ink-navy); }
.tma-chip[aria-pressed="true"],
.tma-chip[aria-selected="true"],
.tma-chip[aria-current="true"] {
	background: var(--wp--preset--color--ink-navy);
	border-color: var(--wp--preset--color--ink-navy);
	color: #fff;
}
/* "What brings you here?" response panels — all six are in the HTML; JS shows one. */
.tma-hero__response { min-height: 96px; }
.tma-hero__panel:focus-visible { outline: 2px solid var(--wp--preset--color--brand-blue); outline-offset: 6px; }
.tma-hero__situation {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--noto-serif-display);
	font-size: clamp(20px, 2.1vw, 27px); line-height: 1.28;
	color: var(--wp--preset--color--ink-navy);
	max-width: 40ch;
}
.tma-hero__support { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--body-text); max-width: 62ch; }
.tma-hero__service {
	margin: 12px 0 0;
	font: 600 12.5px/1.3 var(--wp--preset--font-family--noto-sans);
	letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}
.tma-hero__panel .tma-arrowlink { display: inline-flex; margin-top: 14px; }

.tma-hero__reassure { margin: 18px 0 0; font-size: 13.5px; color: var(--wp--preset--color--slate); }

/* ============================================== 6. Credibility strip (§7.1.2) */

.tma-credibility {
	border-block: 1px solid var(--wp--custom--line--on-white);
	padding-block: 22px;
	padding-inline: var(--wp--preset--spacing--section-x);
}
/* "What we do" section heading (now editable page content). */
.tma-whatwedo h2 { font-size: var(--wp--preset--font-size--h2); margin: 0 0 clamp(28px, 3vw, 44px); max-width: 20ch; }
.tma-credibility ul {
	list-style: none; margin: 0 auto; padding: 0;
	max-width: var(--wp--custom--width--content);
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 10px 22px;
	font-size: 14px; color: var(--wp--preset--color--body-text);
}
.tma-credibility li { display: flex; align-items: center; gap: 22px; }
.tma-credibility li:not(:last-child)::after { content: "·"; color: var(--wp--preset--color--muted); }

/* ============================================== 7. Service tiles (§4.4) ==== */

/* Five stages: three across on desktop (3 + 2), two on tablet, one on a phone.
   The clamp caps it at three so a fourth never squeezes the copy. */
.tma-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(255px, 30%, 380px), 1fr));
	gap: 1px; /* adjacent hairlines read as shared rules */
}
.tma-tile {
	display: flex; flex-direction: column;
	padding: var(--wp--preset--spacing--card);
	background: #fff;
	box-shadow: 0 0 0 1px var(--wp--custom--line--tile); /* not a grey grid behind white cells */
	text-decoration: none; color: inherit;
	transition: background var(--wp--custom--transition);
}
.tma-tile:hover { background: var(--wp--preset--color--sand-25); }
.tma-tile__num { font: 400 13px/1 var(--wp--preset--font-family--noto-sans); color: var(--wp--preset--color--slate); margin-bottom: 16px; }
.tma-tile__h {
	margin: 0 0 12px;
	font: 500 var(--wp--preset--font-size--card-h)/1.25 var(--wp--preset--font-family--noto-sans);
	color: var(--wp--preset--color--ink-navy);
}
.tma-tile__desc { margin: 0 0 20px; font-size: var(--wp--preset--font-size--card-body); line-height: 1.6; color: var(--wp--preset--color--body-text); }
.tma-tile__more { margin-top: auto; font: 600 13px/1 var(--wp--preset--font-family--noto-sans); color: var(--wp--preset--color--brand-blue); display: inline-flex; gap: 8px; }

/* ============================================== 8. Sector strip (§7.1.4) === */

.tma-secthead {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
	gap: 16px; margin-bottom: clamp(28px, 3vw, 44px);
}
.tma-secthead h2 { margin: 0; font-size: var(--wp--preset--font-size--h2); }
.tma-who .tma-secthead { margin-bottom: 14px; }
.tma-who__lead { margin: 0 0 clamp(28px, 3vw, 44px); max-width: 58ch; }
.tma-sectors {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 30%, 400px), 1fr));
	gap: clamp(20px, 2.5vw, 36px) clamp(24px, 3vw, 40px);
}
.tma-sector { padding-top: 16px; border-top: 1px solid var(--wp--custom--line--rule); }
.tma-sector__name { display: block; font: 500 15px/1.3 var(--wp--preset--font-family--noto-sans); color: var(--wp--preset--color--ink-navy); margin-bottom: 6px; }
.tma-sector__qual { display: block; font-size: 13px; line-height: 1.45; color: var(--wp--preset--color--slate); }

/* ============================================== 9. Process steps (§7.1.5) == */

.tma-process h2 { color: #fff; font-size: var(--wp--preset--font-size--h2); margin: 0 0 18px; }
.tma-process .tma-lead { color: var(--wp--custom--ink--on-navy-lead); margin: 0 0 clamp(34px, 4vw, 56px); }
.tma-steps {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: clamp(24px, 3vw, 44px);
	border-top: 1px solid var(--wp--custom--line--on-navy-strong);
	padding-top: clamp(28px, 3vw, 40px);
}
.tma-step__num { font: 400 14px/1 var(--wp--preset--font-family--noto-sans); color: rgba(255,255,255,.5); margin-bottom: 14px; }
.tma-step__h { margin: 0 0 10px; font: 500 var(--wp--preset--font-size--process-h)/1.3 var(--wp--preset--font-family--noto-sans); color: #fff; }
.tma-step__body { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--wp--custom--ink--on-navy-support); }

/* ============================================== 10. Client story (§7.1.6) == */

.tma-story__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
	gap: clamp(28px, 4vw, 64px); align-items: center;
}
.tma-story__media {
	margin: 0; aspect-ratio: 4 / 3; background: var(--wp--preset--color--sand-25);
	overflow: hidden;
}
.tma-story__media img { width: 100%; height: 100%; object-fit: cover; }
.tma-story h2 { font-size: var(--wp--preset--font-size--sub-h2); margin: 0 0 18px; }
.tma-story__body { margin: 0 0 clamp(24px, 3vw, 32px); line-height: 1.7; }

/* Stat / result group (§4.6) — wrapping flex row, hairline top & bottom. */
.tma-stats {
	display: flex; flex-wrap: wrap; gap: clamp(22px, 3vw, 44px);
	border-block: 1px solid var(--wp--custom--line--rule);
	padding-block: 22px; margin: 0 0 clamp(24px, 3vw, 32px);
}
.tma-stat, .tma-stat > * { margin: 0; }
.tma-stat__value {
	display: block;
	font-family: var(--wp--preset--font-family--noto-serif-display);
	font-size: clamp(22px, 2.4vw, 34px); line-height: 1;
	color: var(--wp--preset--color--ink-navy); margin-bottom: 8px;
}
.tma-stat__label { display: block; font-size: 12.5px; line-height: 1.4; color: var(--wp--preset--color--slate); max-width: 22ch; }

/* ================================================= 11. CTA bands (§4) ====== */

.tma-cta { text-align: center; }
.tma-cta__inner { max-width: var(--wp--custom--width--narrow); margin-inline: auto; }
.tma-cta h2 { font-size: var(--wp--preset--font-size--h2); margin: 0 0 16px; }
.tma-cta--sand h2 { color: var(--wp--preset--color--ink-navy); }
.tma-cta--navy h2 { color: #fff; }
.tma-cta p { margin: 0 auto clamp(26px, 3vw, 34px); max-width: 52ch; line-height: 1.6; }
.tma-cta p.tma-cta__note { margin: 18px auto 0; font-size: 13.5px; color: var(--wp--preset--color--slate); }
.tma-cta--navy p { color: var(--wp--custom--ink--on-navy-lead); }
.tma-cta .tma-btnrow { justify-content: center; }

/* ================================================= 12. Footer (§4.10) ====== */

.tma-footer { background: var(--wp--preset--color--ink-navy); color: #fff; }
.tma-footer__inner {
	max-width: var(--wp--custom--width--content); margin-inline: auto;
	padding: clamp(48px, 6vw, 80px) var(--wp--preset--spacing--section-x) 30px;
}
.tma-footer__cols {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
	gap: clamp(28px, 4vw, 56px);
}
.tma-footer__brand { min-width: 210px; }
.tma-footer__brand svg { height: 74px; width: auto; margin-bottom: 20px; }
.tma-footer__tagline { margin: 0 0 8px; font: 400 17px/1.35 var(--wp--preset--font-family--noto-serif-display); color: #fff; }
.tma-footer__descriptor { margin: 0 0 18px; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.62); max-width: 34ch; }
.tma-footer__more { color: var(--wp--preset--color--sand) !important; font-weight: 600; }
.tma-footer__cta { color: var(--wp--preset--color--sand); text-decoration: none; font: 600 14px/1 var(--wp--preset--font-family--noto-sans); display: inline-flex; gap: 8px; }
.tma-footer__cta:hover { color: #fff; }
.tma-footer h2 { font: 600 10.5px/1 var(--wp--preset--font-family--noto-sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.52); margin: 0 0 18px; }
.tma-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tma-footer a { color: rgba(255,255,255,.72); text-decoration: none; font-size: 14px; transition: color var(--wp--custom--transition); }
.tma-footer li > span { color: rgba(255,255,255,.72); font-size: 14px; }
.tma-footer a:hover { color: #fff; }
.tma-footer__bottom {
	display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: center;
	margin-top: clamp(40px, 5vw, 64px); padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.14);
	font-size: 12.5px; color: rgba(255,255,255,.52);
}
.tma-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 16px; }
.tma-footer__bottom a { color: rgba(255,255,255,.52); font-size: 12.5px; }
.tma-footer__bottom a:hover { color: #fff; }

/* ============================================= 13. Mobile sticky CTA (§4.11) */

.tma-mobile-cta { display: none; }
@media (max-width: 767px) {
	body.has-mobile-cta { padding-bottom: 64px; }
	.tma-mobile-cta {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		position: fixed; inset: auto 0 0 0; z-index: 90;
		padding: 12px 16px;
		background: var(--wp--preset--color--ink-navy);
		box-shadow: 0 -6px 24px rgba(8,26,46,.2);
	}
	.tma-mobile-cta__label { font: 500 13.5px/1.2 var(--wp--preset--font-family--noto-sans); color: rgba(255,255,255,.85); }
	.tma-mobile-cta .tma-btn { padding: 11px 18px; font-size: 13.5px; }
}

/* ================================================= 14. Breadcrumbs (§4.12) = */

.tma-breadcrumbs {
	border-bottom: 1px solid var(--wp--custom--line--on-white);
}
.tma-breadcrumbs ol {
	list-style: none; margin: 0 auto; padding-block: 15px;
	padding-inline: var(--wp--preset--spacing--section-x);
	max-width: var(--wp--custom--width--content);
	display: flex; flex-wrap: wrap; gap: 8px;
	font-size: 13px; color: var(--wp--preset--color--slate);
}
.tma-breadcrumbs a { color: var(--wp--preset--color--brand-blue); text-decoration: none; }
.tma-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--wp--preset--color--muted); }
.tma-breadcrumbs [aria-current="page"] { color: var(--wp--preset--color--body-text); }

/* ================================================= 15. Scroll reveal (§5.2) = */
/* Content is visible by default; reveal.js adds .tma-reveal-armed to <html>
   only after wiring the observer, so a JS failure leaves everything shown. */

.tma-reveal-armed .tma-reveal {
	opacity: 0; transform: translateY(16px);
	transition: opacity 700ms cubic-bezier(.2,.7,.3,1), transform 700ms cubic-bezier(.2,.7,.3,1);
	will-change: opacity, transform;
}
.tma-reveal-armed .tma-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.tma-reveal, .tma-reveal-armed .tma-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.tma-hero__response { transition: none !important; }
	html { scroll-behavior: auto; }
}
@media print {
	.tma-reveal { opacity: 1 !important; transform: none !important; }
	.tma-header, .tma-mobile-cta { position: static; }
}

/* Visually-hidden utility for screen-reader-only text. */
.tma-sr-only {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Long-form WYSIWYG output (service "how it goes", case-study prose). */
.tma-longform { max-width: 62ch; }
.tma-longform p { margin: 0 0 16px; line-height: 1.72; }
.tma-longform p:last-child { margin-bottom: 0; }
.tma-longform + .tma-stagechips { margin-top: clamp(20px, 3vw, 32px); }

/* ===================================== 16. Inner page hero (shared) ======= */

.tma-phero__meta { font-size: 13px; color: var(--wp--preset--color--slate); margin: 0 0 12px; }
.tma-phero h1 { font-size: var(--wp--preset--font-size--h1-inner); margin: 0 0 20px; max-width: 22ch; }
.tma-phero .tma-lead { margin: 0 0 clamp(24px, 3vw, 34px); }

/* Two-column inner hero (service / about): text + media, media 4/3 (§7.4). */
.tma-shero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: center; }
.tma-shero__media { margin: 0; aspect-ratio: 4 / 3; background: var(--wp--preset--color--sand-25); overflow: hidden; }
.tma-shero__media img { width: 100%; height: 100%; object-fit: cover; }
.tma-shero__icon { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--wp--preset--color--sand-25); }
.tma-shero__icon svg { width: 96px; height: 96px; }

/* ===================================== 17. Practice three-up (§7.4) ======= */

.tma-practice { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(24px, 3vw, 44px); }
.tma-practice__item { border-top: 2px solid var(--wp--preset--color--ink-navy); padding-top: 20px; }
.tma-practice__h { margin: 0 0 12px; font: 500 var(--wp--preset--font-size--card-h)/1.25 var(--wp--preset--font-family--noto-sans); color: var(--wp--preset--color--ink-navy); }
.tma-practice__body { margin: 0; font-size: var(--wp--preset--font-size--card-body); line-height: 1.65; }

/* ===================================== 18. Stage chips (§7.4) ============= */

.tma-stagechips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.tma-stagechip {
	padding: 9px 16px; border: 1px solid var(--wp--custom--line--input);
	border-radius: var(--wp--custom--radius); font: 500 14px/1 var(--wp--preset--font-family--noto-sans);
	color: var(--wp--preset--color--ink-navy);
}

/* ===================================== 19. Testimonial (§7.4) ============= */

.tma-testimonial { margin: 0; }
.tma-quote {
	margin: 0 0 18px; font-family: var(--wp--preset--font-family--noto-serif-display);
	font-size: var(--wp--preset--font-size--quote); line-height: 1.42; color: var(--wp--preset--color--ink-navy);
	text-wrap: pretty;
}
.tma-onnavy .tma-quote { color: #fff; }
.tma-quote__attr { font-size: 13.5px; line-height: 1.5; color: var(--wp--preset--color--slate); }
.tma-quote__attr a { color: var(--wp--preset--color--brand-blue); }

/* ===================================== 22. Scope + partners (§7.3) ======== */
/* Exclusions and the partner network MUST stay adjacent (explicit client note). */

/* Round 1: the two boxes are equal columns and stretch to the same height. */
.tma-scope__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: clamp(24px, 3vw, 40px); align-items: stretch; }
.tma-scope__excl { background: var(--wp--preset--color--sand-25); padding: var(--wp--preset--spacing--card); display: flex; flex-direction: column; }
.tma-scope__label { margin: 0 0 14px; font: 600 var(--wp--preset--font-size--eyebrow)/1 var(--wp--preset--font-family--noto-sans); letter-spacing: var(--wp--custom--eyebrow--tracking); text-transform: uppercase; color: var(--wp--preset--color--slate); }
.tma-scope__list { list-style: none; margin: 0; padding: 0; }
.tma-scope__list li { padding: 11px 0; border-top: 1px solid var(--wp--custom--line--rule); font: 500 15px/1.4 var(--wp--preset--font-family--noto-sans); color: var(--wp--preset--color--ink-navy); }
.tma-scope__list li:last-child { border-bottom: 1px solid var(--wp--custom--line--rule); }
.tma-scope__note { margin: auto 0 0; padding-top: 16px; font-size: 13.5px; line-height: 1.5; color: var(--wp--preset--color--slate); }
.tma-partner { background: var(--wp--preset--color--ink-navy); color: #fff; padding: var(--wp--preset--spacing--card); }
.tma-partner h3 { color: #fff; font-size: var(--wp--preset--font-size--sub-h2); margin: 0 0 16px; }
.tma-partner p { color: var(--wp--custom--ink--on-navy-lead); line-height: 1.7; margin: 0 0 14px; }
.tma-partner p:last-child { margin-bottom: 0; }

/* ===================================== 23b. Case study cards (§4.7) ======= */

.tma-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(20px, 2.5vw, 36px); }
.tma-case-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--wp--custom--line--card); text-decoration: none; color: inherit; transition: border-color var(--wp--custom--transition); }
.tma-case-card:hover { border-color: var(--wp--preset--color--ink-navy); }
.tma-case-card__media { margin: 0; aspect-ratio: 16 / 10; background: var(--wp--preset--color--sand-25); border-bottom: 1px solid var(--wp--custom--line--card); overflow: hidden; }
.tma-case-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tma-case-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.5vw, 30px); }
.tma-case-card__eyebrow { margin: 0 0 12px; font: 600 10.5px/1 var(--wp--preset--font-family--noto-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--brand-blue); }
.tma-case-card__h { margin: 0 0 16px; font: 500 var(--wp--preset--font-size--card-h)/1.25 var(--wp--preset--font-family--noto-sans); color: var(--wp--preset--color--ink-navy); }
.tma-case-card__desc { margin: 0 0 16px; font-size: var(--wp--preset--font-size--card-body); line-height: 1.6; color: var(--wp--preset--color--body-text); }
.tma-case-card__note { margin: 0 0 14px; font-size: 12.5px; line-height: 1.4; color: var(--wp--preset--color--slate); font-style: italic; }
.tma-case-card__more { margin-top: auto; font: 600 13px/1 var(--wp--preset--font-family--noto-sans); color: var(--wp--preset--color--brand-blue); display: inline-flex; gap: 8px; }
/* "More stories" holds at most two cards, so keep two columns and never let a
   lone card stretch across the full width. */
.tma-cases--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .tma-cases--two { grid-template-columns: 1fr; } }

/* Upcoming story (Round 1): unlinked card with a "Coming …" badge in the media slot. */
.tma-case-card--soon { border-style: dashed; }
/* Nothing to show in the media slot, so keep it shallow rather than a tall gap. */
.tma-case-card--soon .tma-case-card__media { aspect-ratio: 16 / 6; }
.tma-case-card--soon:hover { border-color: var(--wp--custom--line--card); }
.tma-case-card--soon .tma-case-card__media { display: flex; align-items: center; justify-content: center; }
.tma-case-card__badge { padding: 8px 14px; border: 1px solid var(--wp--custom--line--chip); border-radius: var(--wp--custom--radius); background: #fff; font: 600 12px/1 var(--wp--preset--font-family--noto-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--slate); }
.tma-cases__empty { color: var(--wp--preset--color--slate); }

.tma-stats--card { padding-block: 16px; margin: 0 0 18px; gap: clamp(18px, 2.5vw, 32px); }
.tma-stats--card .tma-stat__value { font-size: clamp(20px, 2vw, 28px); }

.tma-chips--filter .tma-chip { text-decoration: none; }

/* ===================================== 23c. Case study detail (§7.6) ====== */

.tma-anonymity {
	margin: 24px 0 0; padding: 16px 18px;
	background: var(--wp--preset--color--sand-25);
	border-left: 2px solid var(--wp--preset--color--brand-blue);
	font-size: 14.5px; line-height: 1.6; color: var(--wp--preset--color--body-text); max-width: 62ch;
}

.tma-stats--panel { border: 0; padding: 0; margin: 0; gap: clamp(24px, 4vw, 56px); }
.tma-stats--panel .tma-stat__value { color: #fff; font-size: clamp(28px, 3vw, 40px); }
.tma-stats--panel .tma-stat__label { color: var(--wp--custom--ink--on-navy-support); }

.tma-casebody { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 900px) { .tma-casebody { grid-template-columns: minmax(0, 1fr) 300px; } }
.tma-casebody__h { font-size: var(--wp--preset--font-size--sub-h2); margin: 32px 0 12px; }
.tma-casebody__main > .tma-casebody__h:first-child { margin-top: 0; }
.tma-casebody__figure { margin: 24px 0; aspect-ratio: 16 / 9; background: var(--wp--preset--color--sand-25); overflow: hidden; }
.tma-casebody__figure img { width: 100%; height: 100%; object-fit: cover; }

.tma-glance { padding: var(--wp--preset--spacing--card); }
@media (min-width: 900px) { .tma-glance { position: sticky; top: calc(var(--wp--custom--header--height) + 20px); align-self: start; } }
.tma-glance__h { margin: 0 0 16px; font: 600 11px/1 var(--wp--preset--font-family--noto-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--slate); }
.tma-glance__list { margin: 0 0 22px; }
.tma-glance__list dt { margin-top: 16px; font: 600 12px/1.3 var(--wp--preset--font-family--noto-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--wp--preset--color--slate); }
.tma-glance__list dt:first-child { margin-top: 0; }
.tma-glance__list dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--wp--preset--color--ink-navy); }
.tma-glance .tma-btn { width: 100%; justify-content: center; }

/* ===================================== 23. FAQ accordion (§4.8) =========== */

.tma-faq { max-width: var(--wp--custom--width--narrow); margin-inline: auto; }
.tma-faq details { border-top: 1px solid var(--wp--custom--line--rule); }
.tma-faq details:last-of-type { border-bottom: 1px solid var(--wp--custom--line--rule); }
.tma-faq summary {
	list-style: none; cursor: pointer; padding-block: 18px;
	font: 500 16.5px/1.35 var(--wp--preset--font-family--noto-sans); color: var(--wp--preset--color--ink-navy);
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.tma-faq summary::-webkit-details-marker { display: none; }
.tma-faq summary::after { content: "\2193"; flex: none; color: var(--wp--preset--color--brand-blue); transition: transform var(--wp--custom--transition); }
.tma-faq details[open] summary::after { transform: rotate(180deg); }
.tma-faq__answer { padding: 0 0 20px; }
.tma-faq__answer p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: var(--wp--preset--color--body-text); }
.tma-faq__answer p:last-child { margin-bottom: 0; }

/* ===================================== 24. About page (§7.2) ============== */

.tma-abhero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 860px) { .tma-abhero__grid { grid-template-columns: 1.15fr 0.85fr; } }
.tma-abhero__media { margin: 0; aspect-ratio: 4 / 5; background: var(--wp--preset--color--sand-25); overflow: hidden; max-width: 400px; width: 100%; }
@media (min-width: 860px) { .tma-abhero__media { margin-left: auto; } }
.tma-abhero__media img { width: 100%; height: 100%; object-fit: cover; }
.tma-abhero__body { margin: 18px 0 0; line-height: 1.72; max-width: 60ch; }

.tma-founder__attr { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--wp--custom--line--rule); font-size: 14px; color: var(--wp--preset--color--slate); }

.tma-vmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: clamp(28px, 4vw, 56px); }
.tma-vmp__item { border-top: 1px solid var(--wp--custom--line--rule); padding-top: 20px; }
.tma-vmp__h { margin: 0 0 12px; font-size: var(--wp--preset--font-size--sub-h2); }
.tma-vmp__body { margin: 0; line-height: 1.7; }

.tma-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(24px, 3vw, 44px); border-top: 1px solid var(--wp--custom--line--on-navy-strong); padding-top: clamp(28px, 3vw, 40px); }
.tma-why__h { margin: 0 0 10px; font: 500 var(--wp--preset--font-size--process-h)/1.3 var(--wp--preset--font-family--noto-sans); color: #fff; }
.tma-why__body { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--wp--custom--ink--on-navy-support); }

.tma-trk__sub { margin: 0 0 clamp(24px, 3vw, 36px); font-size: 13.5px; line-height: 1.5; color: var(--wp--preset--color--slate); max-width: 60ch; }
.tma-trk { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: clamp(22px, 3vw, 44px); }
.tma-trk__item { border-top: 2px solid var(--wp--preset--color--ink-navy); padding-top: 16px; }
.tma-trk__value { display: block; margin-bottom: 8px; font-family: var(--wp--preset--font-family--noto-serif-display); font-size: clamp(26px, 2.6vw, 40px); line-height: 1; color: var(--wp--preset--color--ink-navy); }
.tma-trk__value--blank { color: var(--wp--preset--color--muted); }
.tma-trk__label { display: block; font-size: 12.5px; line-height: 1.4; color: var(--wp--preset--color--slate); }

/* ===================================== 25. Contact page (§7.8, §4.9) ====== */

.tma-contact__grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .tma-contact__grid { grid-template-columns: minmax(0, 1fr) 340px; } }
.tma-contact__form h2, .tma-booking h2, .tma-contact__details h2 { font-size: var(--wp--preset--font-size--sub-h2); margin: 0 0 20px; }

.tma-form { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.tma-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.tma-field { display: flex; flex-direction: column; gap: 7px; }
.tma-field label { font: 500 13px/1.3 var(--wp--preset--font-family--noto-sans); color: var(--wp--preset--color--body-text); }
.tma-form input, .tma-form select, .tma-form textarea {
	width: 100%; padding: 13px 14px; font: 400 15px/1.4 var(--wp--preset--font-family--noto-sans);
	color: var(--wp--preset--color--ink-navy); background: #fff;
	border: 1px solid var(--wp--custom--line--input); border-radius: var(--wp--custom--radius);
}
.tma-form textarea { resize: vertical; min-height: 120px; }
.tma-field__error { font-size: 13px; line-height: 1.4; color: var(--wp--preset--color--brand-blue); }
.tma-req { color: var(--wp--preset--color--brand-blue); }
.tma-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--wp--preset--color--slate); }
.tma-checkbox input { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.tma-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tma-form button[type="submit"] { align-self: flex-start; margin-top: 4px; }
.tma-form__success { background: var(--wp--preset--color--sand-25); border-left: 2px solid var(--wp--preset--color--brand-blue); padding: 20px 22px; }
.tma-form__success p { margin: 0 0 8px; line-height: 1.6; }
.tma-form__success p:last-child { margin-bottom: 0; }

.tma-contact__aside { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 40px); }
.tma-booking { border: 1px solid var(--wp--custom--line--card); padding: var(--wp--preset--spacing--card); }
.tma-booking p { margin: 0 0 18px; line-height: 1.6; }
.tma-booking__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 200px; padding: clamp(28px, 4vw, 48px); background: var(--wp--preset--color--sand-25); text-align: center; }
.tma-booking__label { font: 400 13px/1 var(--wp--preset--font-family--noto-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--wp--preset--color--slate); }
.tma-booking__frame { width: 100%; min-height: 620px; border: 0; }
.tma-contact__details dl { margin: 0; }
.tma-contact__details dt { margin-top: 16px; font: 600 11px/1.3 var(--wp--preset--font-family--noto-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--slate); }
.tma-contact__details dt:first-child { margin-top: 0; }
.tma-contact__details dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--wp--preset--color--ink-navy); }

/* ===================================== 26. Resources (§7.7) =============== */

.tma-resources { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 2.5vw, 36px); }
.tma-rescard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--wp--custom--line--card); padding: var(--wp--preset--spacing--card); }
.tma-rescard__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 16px; }
.tma-rescard__num { font: 600 10.5px/1.2 var(--wp--preset--font-family--noto-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--brand-blue); }
.tma-rescard__badge { margin-left: auto; padding: 3px 8px; border: 1px solid var(--wp--custom--line--chip); border-radius: var(--wp--custom--radius); font: 600 10.5px/1.2 var(--wp--preset--font-family--noto-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--slate); }
.tma-rescard__link--soon { color: var(--wp--preset--color--slate); }
.tma-rescard__h { margin: 0 0 12px; font: 500 var(--wp--preset--font-size--card-h)/1.25 var(--wp--preset--font-family--noto-sans); color: var(--wp--preset--color--ink-navy); }
.tma-rescard__desc { margin: 0 0 20px; font-size: var(--wp--preset--font-size--card-body); line-height: 1.6; flex: 1; }
.tma-rescard__link { margin-top: auto; font: 600 13px/1 var(--wp--preset--font-family--noto-sans); color: var(--wp--preset--color--brand-blue); display: inline-flex; gap: 8px; text-decoration: none; transition: color var(--wp--custom--transition); }
.tma-rescard__link:hover { color: var(--wp--preset--color--ink-navy); }

/* ===================================== 27. Generic page (page.html) ======= */

.wp-block-post-title { font-size: var(--wp--preset--font-size--h1-inner); line-height: 1.1; margin: 0 0 24px; }
.wp-block-post-content :where(h2) { font-size: var(--wp--preset--font-size--sub-h2); margin: 40px 0 16px; }
.wp-block-post-content :where(h3) { font-size: var(--wp--preset--font-size--card-h); margin: 28px 0 12px; }
.wp-block-post-content :where(p, ul, ol) { line-height: 1.72; }

/* ===================================== Copy Round 1 additions ============= */
.tma-narrow__h2 { font-size: var(--wp--preset--font-size--h2); margin: 0 0 clamp(20px, 2.5vw, 32px); max-width: 24ch; }
.tma-booking__direct { display: flex; flex-wrap: wrap; gap: 12px; }

/* ===================================== Round 2: images, story layout ====== */

/* Image bands on Home. Held to the content width and shown at their natural
   proportions: these are photographs of people, so cropping them to a strip
   cuts the heads off and loses the point of the picture. */
.tma-imageband { padding-block: 0; padding-inline: var(--wp--preset--spacing--section-x); }
.tma-imageband .wp-block-image,
.tma-imageband figure {
	margin: 0 auto;
	max-width: var(--wp--custom--width--content);
}
.tma-imageband img { display: block; width: 100%; height: auto; }

/* Hero: headline and supporting photograph side by side, with the selector
   spanning the full width beneath. Keeps the opening screen from reading as a
   wall of copy. */
.tma-hero__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	margin-bottom: clamp(30px, 4vw, 44px);
}
.tma-hero__top h1 { font-size: clamp(36px, 4.2vw, 60px); }
.tma-hero__top .tma-lead { margin-bottom: 0; max-width: 44ch; }
.tma-hero__media { margin: 0; }
.tma-hero__media img { display: block; width: 100%; height: auto; }
@media (max-width: 820px) {
	.tma-hero__top { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 32px); }
	.tma-hero__top h1 { font-size: var(--wp--preset--font-size--h1-home); }
}

/* About portrait (position 02). */
.tma-abhero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Story hero: text + client logo/photo. */
.tma-storyhero__grid {
	display: grid; gap: clamp(24px, 4vw, 56px);
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: center;
}
.tma-storyhero__grid--notext { grid-template-columns: 1fr; }
.tma-storyhero__facts { margin: 18px 0 0; font-size: 13.5px; color: var(--wp--preset--color--slate); }
.tma-storyhero__media { margin: 0; }
.tma-storyhero__media img { width: 100%; height: auto; display: block; }
/* A logo must never be cropped: show it whole on a light panel. */
.tma-storyhero__media--logo {
	background: #fff;
	border: 1px solid var(--wp--custom--line--card);
	padding: clamp(24px, 3vw, 40px);
	display: flex; align-items: center; justify-content: center;
}
.tma-storyhero__media--logo img { max-height: 190px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 860px) {
	.tma-storyhero__grid { grid-template-columns: 1fr; }
	.tma-storyhero__media--logo { justify-self: start; }
}

/* Story cards on the index: a logo is contained, a photo is cropped. */
.tma-case-card__media--logo { background: #fff; display: flex; align-items: center; justify-content: center; padding: 28px; }
.tma-case-card__media--logo img { width: auto; max-width: 78%; max-height: 100%; object-fit: contain; }

/* "What needed to come together" grid. */
.tma-storygrid__title { font-size: var(--wp--preset--font-size--h2); margin: 0 0 clamp(24px, 3vw, 40px); max-width: 24ch; }
/* Six items: three columns at desktop, two at tablet, one on a phone. The
   clamp keeps it to three across so the last row never strands one card. */
.tma-storygrid {
	display: grid; gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 30%, 420px), 1fr));
}
.tma-storygrid__item {
	background: #fff;
	box-shadow: 0 0 0 1px var(--wp--custom--line--tile);
	padding: var(--wp--preset--spacing--card);
}
.tma-storygrid__h { margin: 0 0 10px; font: 500 var(--wp--preset--font-size--card-h)/1.25 var(--wp--preset--font-family--noto-sans); color: var(--wp--preset--color--ink-navy); }
.tma-storygrid__body { margin: 0; font-size: var(--wp--preset--font-size--card-body); line-height: 1.6; color: var(--wp--preset--color--body-text); }

/* Long-form prose and pull quotes on navy. */
.tma-longform--onnavy p { color: var(--wp--custom--ink--on-navy-lead); }
.tma-onnavy .tma-narrow__h2 { color: #fff; }
.tma-quote--onnavy {
	color: #fff;
	font-family: var(--wp--preset--font-family--noto-serif-display);
	font-size: var(--wp--preset--font-size--quote); line-height: 1.32;
	margin: 0 0 clamp(20px, 2.5vw, 30px); max-width: 30ch;
}
.tma-meta { font-size: 13px; color: var(--wp--preset--color--slate); }

/* ===================================== Round 3: service stages =========== */

/* One row per stage: the heading block on the left, the deliverables on the
   right. Five stages with up to eight deliverables each is too much copy for a
   card grid, and every item has to stay visible, so rows it is. */
.tma-stage__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
}
.tma-stage__h {
	margin: 0 0 12px;
	font: 400 var(--wp--preset--font-size--sub-h2)/1.2 var(--wp--preset--font-family--noto-serif-display);
	color: var(--wp--preset--color--ink-navy);
	max-width: 18ch;
}
.tma-stage__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	color: var(--wp--preset--color--brand-blue);
	max-width: 34ch;
}
.tma-stage__label {
	margin: 0 0 16px;
	font: 600 var(--wp--preset--font-size--eyebrow)/1 var(--wp--preset--font-family--noto-sans);
	letter-spacing: var(--wp--custom--eyebrow--tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}
.tma-stage__list {
	list-style: none; margin: 0; padding: 0;
	columns: 2; column-gap: clamp(24px, 3vw, 48px);
}
.tma-stage__list li {
	break-inside: avoid;
	padding: 10px 0 10px 26px;
	border-top: 1px solid var(--wp--custom--line--rule);
	font-size: 15px; line-height: 1.5;
	color: var(--wp--preset--color--body-text);
	position: relative;
}
/* A tick rather than a bullet: these are things TMA does, not a generic list. */
.tma-stage__list li::before {
	content: ""; position: absolute; left: 2px; top: 17px;
	width: 11px; height: 6px;
	border-left: 1.5px solid var(--wp--preset--color--brand-blue);
	border-bottom: 1.5px solid var(--wp--preset--color--brand-blue);
	transform: rotate(-45deg);
}
@media (max-width: 900px) {
	.tma-stage__grid { grid-template-columns: 1fr; gap: clamp(18px, 3vw, 28px); }
	.tma-stage__h, .tma-stage__lead { max-width: none; }
}
@media (max-width: 600px) {
	.tma-stage__list { columns: 1; }
}

/* Privacy & Accessibility: .tma-longform caps body copy at ~62ch for articles,
   which on this page made the text narrower than, and misaligned with, the
   heading above it. Inside a prose column the prose width wins. */
.tma-prose.tma-longform,
.tma-prose .tma-longform { max-width: var(--wp--custom--width--prose); }

/* Privacy & Accessibility is one continuous document, so the lead flows
   straight into the body rather than sitting in its own padded section. */
.tma-prose__body { margin-top: clamp(26px, 3vw, 38px); }