/*
 * Theme-wide interaction and layout styles that theme.json cannot express:
 * focus visibility, reduced motion, native UI theming, sticky positioning,
 * and the component classes for the site's pattern set.
 * See docs/DESIGN-GUIDELINES.md for the rules behind these rules.
 *
 * Colour rule, enforced throughout: every colour below is a theme.json
 * token reference. The only literals permitted are rgba() tints of ink
 * (27,53,73) and of moss (54,59,28) — never black, per the client's
 * palette requirement — and rgba(255,255,255,x) hairlines on dark
 * surfaces.
 */

:root {
	color-scheme: light;

	/* Non-colour primitives. These have no home in theme.json's
	   block-supports model, so they live here. */
	--ut-wide: 1200px;
	--ut-gutter: clamp(1.25rem, 4vw, 2.5rem);
	/* How far the route cards ride up over the hero. The hero reserves this
	   plus a gap as bottom padding, so the cards overlap its tinted panel
	   and nothing else — before, they landed on top of .hero-meta. */
	--ut-card-overlap: clamp(3.5rem, 7vw, 5rem);
	--ut-lift-1: 0 1px 2px rgba(27, 53, 73, 0.06), 0 6px 18px rgba(27, 53, 73, 0.06);
	--ut-lift-2: 0 2px 4px rgba(27, 53, 73, 0.08), 0 18px 40px rgba(27, 53, 73, 0.12);
	--ut-ease: cubic-bezier(0.22, 0.7, 0.28, 1);
}

/*
 * Poppins — self-hosted, latin subset only, five static weights (~39KB
 * total). Display/heading role only; body text stays system-sans per
 * DESIGN-GUIDELINES §5's performance-first rule. font-display: swap
 * avoids blocking first paint on the font request. OFL-licensed, see
 * assets/fonts/poppins/OFL.txt.
 */
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/poppins/poppins-400.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/poppins/poppins-600.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/poppins/poppins-700.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/poppins/poppins-800.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/poppins/poppins-900.woff2") format("woff2");
}

/*
 * Vazirmatn — the Persian/Arabic-script counterpart to Poppins above.
 * Self-hosted, three weights (~150KB total), OFL-licensed like Poppins; see
 * assets/fonts/vazirmatn/OFL.txt.
 *
 * Poppins carries no Arabic-script glyphs at all, so before this a Farsi page
 * fell through to whatever face the browser happened to pick — usually a
 * mismatched system font at the wrong optical size, and on some Windows
 * installs tofu.
 *
 * The unicode-range is what makes this free for everyone else: a browser only
 * downloads a face when a character in its range is actually on the page, so
 * English, German and Swedish visitors never fetch these files, and a German
 * page that happens to quote one Farsi phrase renders it correctly without
 * any locale switch. That is why Vazirmatn is appended to the normal font
 * stacks in theme.json rather than swapped in per locale.
 *
 * U+200C (zero-width non-joiner) is in the range deliberately — Persian uses
 * it inside ordinary words, and losing it to a fallback face breaks joining.
 */
@font-face {
	font-family: "Vazirmatn";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/vazirmatn/vazirmatn-400.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: "Vazirmatn";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/vazirmatn/vazirmatn-600.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
	font-family: "Vazirmatn";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/vazirmatn/vazirmatn-700.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF;
}

/* height:auto is required, not optional: images carry width/height
   attributes so the browser can reserve space (CLS), and without this a
   CSS max-width shrinks the width while the attribute height stays put,
   stretching the image vertically on narrow screens. */
img {
	max-width: 100%;
	height: auto;
}

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

body {
	overflow-wrap: break-word;
}

/* Focus rings: outline (not box-shadow) so forced-colors mode keeps it,
   with enough contrast + thickness to satisfy WCAG 2.4.11. currentColor
   rather than a fixed brand color: every element's own text color already
   has to clear 4.5:1 against its own background (WCAG 1.4.3), which is a
   stricter bar than the ring's 3:1 requirement — so the ring inherits
   whatever contrast-safe color the element already has, light or dark
   background alike, with no per-section overrides to keep in sync. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/*
 * In-page navigation. Several primary-nav items share a destination and
 * differ only by the section they point at (/services/#training and the
 * rest), so a jump has to read as travel between two parts of one page
 * rather than as a page load that happened to start halfway down.
 * Animating it is what carries that: the reader sees the sections in
 * between go past and keeps their bearings.
 *
 * scroll-padding rather than a scroll-margin on each target: the sticky
 * header (~92px) covers the top of the viewport, and setting it on the
 * scroll container once covers every anchor on the site, including ones
 * in page content nobody remembered to give a margin to.
 *
 * The reduced-motion block below overrides scroll-behavior back to auto,
 * so anyone who has asked for less movement gets an instant jump — with
 * the same offset, since scroll-padding is not motion.
 */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

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


/* ==========================================================================
   SITE CHROME
   ========================================================================== */

/*
 * A template part renders its content inside a wrapper div. That wrapper is
 * a normal block box, so it becomes the containing block for anything
 * sticky within it — pinning .site-header to a box no taller than the
 * header itself, which is why the header scrolled away instead of sticking.
 * display:contents drops the wrapper out of layout, so the header's
 * containing block is the page again and position:sticky behaves.
 * The <header>/<footer> landmarks are on the groups inside the parts.
 */
.wp-block-template-part {
	display: contents;
}

/*
 * The thin strip is the chartreuse band off the book cover; the menu bar
 * below it is the cover's navy. They used to be the other way round — see
 * the note in patterns/site-header.php for why the mark settled it.
 *
 * Contrast on #C3CA46 (luminance 0.538):
 *   ink   #1B3549  7.18:1  the strip's text and its icons
 *   moss  #363B1C  6.59:1  fine, used for the hover
 *   stone #4E5C67  3.8:1   FAILS for text — do not put it on this strip
 */
.site-utility {
	color: var(--wp--preset--color--ink);
	font-size: 0.8125rem;
}
.site-utility a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.site-utility a:hover {
	color: var(--wp--preset--color--moss);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/*
 * The country links and People's Voices, in the strip above the menu bar.
 *
 * They are here rather than in the "The Model" submenu because they were the
 * worst-served pages on the site: someone searching for the model in their
 * own country had to find a menu, hover it, and read past four other items
 * to reach the page written for them. On the strip they are the first links
 * on the page and need no interaction to appear.
 *
 * Bolder than strip text would normally be — these are the one thing on this
 * bar anyone is meant to click, and at 0.8125rem on a saturated ground
 * regular weight reads as a caption rather than a link.
 */
.strip-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.55rem;
	min-width: 0;
}
.strip-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
/*
 * "MOW in", said once for the group instead of four times across four labels
 * — and it is the emphasis, not the countries.
 *
 * That is the other way round from the obvious reading. The four links were
 * bold and the lead-in was a small grey caption, which made the strip look
 * like a row of four unexplained country names; what a visitor has to grasp
 * first is *what* is in those countries. With the weight on "MOW in", the
 * countries read as the list it introduces, and the row parses in one pass
 * instead of two.
 */
.strip-lead {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink);
}
/* Regular weight, and the row's own ink — the lead-in carries the emphasis
   for all four, so a second bold thing beside it would compete with it. */
.strip-nav a {
	font-weight: 400;
}
/* A middot between the countries, drawn rather than typed so it is not read
   out as a word and cannot be selected into a copied line. */
.strip-nav li + li::before {
	content: "·";
	margin-inline-end: 0.5rem;
	color: rgba(27, 53, 73, 0.45);
}

/* The right-hand end of the strip: the site's accounts. */
.strip-end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.9rem;
	min-width: 0;
}

/*
 * Student Community, on the right of the strip beside the accounts. Weight
 * 600 so it reads as a destination, not as caption text beside the icons.
 * With sub-links it is a <details> whose panel drops over the menu bar.
 */
.strip-feature,
.strip-menu > summary {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
}
.strip-menu {
	position: relative;
}
.strip-menu > summary {
	cursor: pointer;
	list-style: none;
}
.strip-menu > summary::-webkit-details-marker {
	display: none;
}
.strip-menu > summary::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-inline-start: 0.4em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.2em) rotate(45deg);
}
.strip-menu[open] > summary::after {
	transform: translateY(0.05em) rotate(-135deg);
}
.strip-menu > summary:hover {
	color: var(--wp--preset--color--moss);
}
.strip-menu ul {
	position: absolute;
	top: calc(100% + 0.5rem);
	inset-inline-end: 0;
	z-index: 200;
	min-width: 13rem;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	background: var(--wp--preset--color--white);
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(27, 53, 73, 0.18);
}
.strip-menu li > a,
.strip-menu li > span {
	display: block;
	padding: 0.45rem 1rem;
}

/*
 * The header IS the navy off the book cover, full width and at the top of
 * every page, with the cover's chartreuse band as the strip above it. The
 * colour is set on the block (backgroundColor:"ink" in
 * patterns/site-header.php) so the Site Editor shows it; everything below is
 * what has to change *because* the bar is a dark ground rather than paper.
 *
 * Contrast, measured against #1B3549 (relative luminance 0.0397):
 *   white    #FFFFFF  12.71:1  site title and nav labels
 *   electric #C3CA46   7.18:1  the underline rule, and the CTA's fill
 *   the seal #ABC86B   6.78:1  which is why the mark needs no ring here
 *   clay     #0A6B8C   2.12:1  FAILS even as a fill — the CTA cannot use it
 * Anything added to the bar picks from the first two.
 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	/* The chartreuse strip already separates the bar from what is above it;
	   this edge separates it from the page below, and is the one place a
	   hairline of the band's own colour still earns its keep. */
	border-bottom: 1px solid rgba(195, 202, 70, 0.35);
	transition: box-shadow 0.25s var(--ut-ease);
}
/* Stamped by assets/js/theme.js once the page scrolls past 40px. The blur is
   inert behind an opaque bar and is kept only for the shadow's sake. */
.site-header.is-stuck {
	box-shadow: var(--ut-lift-1);
}

/*
 * "Start the OWQ". Global styles fill every button clay, which is 2.12:1
 * against this bar — a button whose edge you cannot find. Chartreuse is
 * 7.18:1 against the navy and takes ink text at another 7.18:1, so the one
 * action on the bar becomes the brightest thing on it. That is the job the
 * chartreuse band used to do for the whole header; here it does it for the
 * single element that is actually worth pressing.
 */
.site-header .wp-block-button__link,
.site-header .wp-element-button {
	background-color: var(--wp--preset--color--electric);
	color: var(--wp--preset--color--ink);
}
.site-header .wp-block-button__link:hover,
.site-header .wp-element-button:hover,
.site-header .wp-block-button__link:focus-visible,
.site-header .wp-element-button:focus-visible {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.site-brand-sub {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.02em;
	/* Was moss, which was legible on the chartreuse bar and is 1.2:1 on this
	   one. Translucent white sets it back from the wordmark above without
	   dropping below 7:1. */
	color: rgba(255, 255, 255, 0.72);
}

/*
 * The mark is the Model of Occupational Wholeness seal, sitting beside the
 * wordmark. Its <picture> wrapper is the flex item, so `flex: none` goes on
 * both: without it flexbox resolves a tight row by shrinking the image
 * rather than wrapping, which reads as a squashed logo instead of a smaller
 * header. Size lives here as well as on the img's width/height attributes so
 * the attributes stay a pre-CSS fallback rather than the source of truth —
 * and so the box is reserved before the file arrives.
 *
 * No white ground any more. It was there because the seal's green is 1.06:1
 * against chartreuse — invisible, held together only by a drawn-on ring. On
 * the navy bar the same green is 6.78:1 and carries its own edge (WCAG
 * 1.4.11), so the ring is gone and the mark is the mark. .site-mark-plain
 * survives only as the footer's size override.
 */
/* display:contents on the wrapper so the <img> itself is the flex item —
   otherwise `flex: none` would have to go on a <picture> this stylesheet
   cannot select without :has(). */
.site-mark-wrap {
	display: contents;
}
.site-mark {
	flex: none;
	display: block;
	width: 54px;
	height: 54px;
}
.site-mark-plain {
	width: 38px;
	height: 38px;
}

/*
 * The header row is [brand] | [nav + CTA] with space-between, and it wraps.
 * The two groups measured 1215px of natural width against the 1200px
 * wideSize, so the nav dropped onto a second line at every desktop width —
 * it was over by 15px, not by a lot. Two things buy the room back: a
 * site-title size that tops out at 1.7rem (set explicitly in theme.json
 * rather than via the `large` preset, which core overrides — see
 * docs/DESIGN-GUIDELINES.md §5) and the tighter gaps below.
 *
 * Deliberately NOT `flex-wrap: nowrap`. Forbidding the wrap does not create
 * space — flexbox just shrinks the two groups instead, which broke the
 * wordmark across two lines and dropped the CTA below the nav. Wrapping is
 * the right fallback when the row genuinely cannot fit, which matters here
 * because the nav labels are translated: a longer set in another locale
 * should wrap gracefully rather than be crushed.
 */
.site-header > .wp-block-group > .wp-block-group:last-child {
	gap: 0.9rem;
}

/*
 * The remaining width came out of the gaps rather than the type. At the
 * default 24px the brand and nav groups needed exactly the 1192px the row
 * offers at a 1280px viewport — a nought-pixel margin, so sub-pixel
 * rounding alone decided whether the nav wrapped. These two reclaim ~38px,
 * which holds the single line down to roughly a 1250px viewport and leaves
 * room for a longer set of translated labels before it wraps.
 */
.site-header > .wp-block-group {
	gap: 1rem;
}
.site-header .wp-block-navigation,
.site-header .wp-block-navigation__container {
	gap: 1.1rem;
}

/*
 * The wordmark is a name, so it breaks as a unit or not at all — never
 * "Occupational" over "Wholeness". With the row now fitting at the widths
 * this header is used at, this only guards the last few pixels.
 *
 * Not applied on the narrowest phones: at the clamp floor the wordmark is
 * ~286px which, with the 54px mark beside it, does not fit a 320px screen.
 * There, wrapping to two lines is correct and an unbreakable line would
 * push the page into a horizontal scroll.
 */
@media (min-width: 30rem) {
	.site-header .wp-block-site-title {
		white-space: nowrap;
	}
}

/*
 * Core navigation block, styled to the approved design. We use the core
 * block rather than hand-rolled markup so submenus, the mobile overlay and
 * all the keyboard/ARIA handling come from WordPress (guidelines §8:
 * prefer native over bespoke JS) and the menu stays editable in wp-admin.
 */
.wp-block-navigation {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 0.875rem;
}
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding: 0.5rem 0.15rem;
	text-decoration: none;
}
/*
 * Global styles paint every <a> clay, which is 2.12:1 on the navy bar. The
 * top-level labels are white instead (12.71:1). Scoped to the bar itself so
 * the white submenu panels below keep the clay link colour they read well
 * against.
 */
.site-header > .wp-block-group .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
}
/*
 * The underline marking the current and hovered item. `currentColor` rather
 * than a named colour so it always matches the label it sits under — white
 * on the navy bar, and whatever a future surface sets — instead of having to
 * be re-picked every time the chrome is recoloured, which is how it came to
 * be ink-on-chartreuse and then wrong.
 */
.wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.1rem;
	height: 3px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--ut-ease);
}
.wp-block-navigation > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
}

.wp-block-navigation .wp-block-navigation__submenu-container {
	max-width: 24rem;
	padding: 0.5rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 14px;
	background: var(--wp--preset--color--white);
	box-shadow: var(--ut-lift-2);
}
/*
 * A submenu row is one label, so it is a plain block: no flex, no gap. It
 * was a stacked flex column only to keep a link's label and its description
 * from laying out as two side-by-side ragged columns, and the descriptions
 * are gone (see patterns/site-header.php).
 */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 0.8rem;
	border-radius: 8px;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--lime-tint);
	color: var(--wp--preset--color--clay-dark);
}
/*
 * The panel is absolutely positioned inside a ~90px-wide <li>, so its
 * shrink-to-fit width collapses to its min-content width and every long
 * label wraps. Core's open-state rules already set `min-width: 200px`,
 * which is not enough for "Entrepreneurial Diversity" — and they out-rank a
 * plain `.wp-block-navigation .wp-block-navigation__submenu-container`
 * rule, so the floor has to be raised on the same selectors, qualified by
 * `.site-header` to win on specificity rather than on `!important`.
 */
.site-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.site-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
.site-header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	min-width: 15rem;
}
.wp-block-navigation .wp-block-navigation-item__label {
	line-height: 1.3;
}
/* No rule for .wp-block-navigation-item__description on purpose. Core ships
   `display: none` for it and the design no longer overrides that — a submenu
   is a list of labels. */

/*
 * Mobile overlay. The desktop menu is justified right, and the overlay
 * inherits that justification from `--navigation-layout-*` — which pushed
 * every item and every open submenu panel against (and past) the right edge
 * of the screen. Inside the overlay the menu is a plain stacked list, so the
 * justification is reset and the floating-panel chrome is stripped back to
 * an indent rule.
 */
.site-header .wp-block-navigation__responsive-container.is-menu-open,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
}
/* Core paints the overlay `#fff` and pads it from the root padding, both at
   a specificity this has to clear — hence the long selector rather than a
   pile of `!important`. */
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	padding-inline: var(--ut-gutter);
	padding-bottom: 2rem;
}
/* Inside the overlay every item sits on the navy, submenu children
   included — so they all take the bar's white rather than the clay that
   reads at 2.12:1 here. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
}
/* Core draws the open/close buttons in currentColor, but the toggle that
   opens the overlay sits on the bar itself, outside the overlay's own
   colour context. */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--white);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.0625rem;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	width: 100%;
	min-width: 0;
	max-width: none;
	padding: 0.35rem 0 0.35rem 0.95rem;
	border: 0;
	/* Was the deep olive that read on chartreuse; on the navy overlay it is
	   all but invisible. */
	border-inline-start: 2px solid rgba(255, 255, 255, 0.28);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-inline: 0;
}

/* The cover closes on a full-width chartreuse band under the navy
   illustration; the footer is where the page does the same thing. A border
   rather than a pseudo-element so it cannot be scrolled or overlapped. */
.site-footer {
	background: var(--wp--preset--color--ink);
	border-top: 8px solid var(--wp--preset--color--electric);
	color: rgba(255, 255, 255, 0.72);
}
.site-footer a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
}
.site-footer a:hover {
	color: var(--wp--preset--color--electric);
}
/* The copyright line is a shortcode block (see parts/footer.html), so it
   renders a bare <p> with no font-size class of its own to carry. */
.site-footer-legal {
	align-items: center;
	row-gap: 1rem;
}
.site-footer-legal p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* The accounts sit under the last link of the "Work with me" column, so they
   need the same gap from the list above them that the list's own items have
   from each other — and a nudge left, because the icon chip has padding the
   text links do not. */
.socials-footer {
	margin-top: 0.85rem;
	margin-inline-start: -0.35rem;
}

@media (max-width: 782px) {
	.site-footer-legal {
		justify-content: center;
		text-align: center;
	}
}

/* text-transform isn't a core block-supports typography property, so this
   one visual detail can't be expressed as a block attribute in footer.html. */
.site-footer-heading {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--electric);
}


/* ==========================================================================
   SHARED TYPE + BUTTONS
   ========================================================================== */

/* Monospace, letter-spaced label — used for eyebrows, stats, and status
   chips throughout. text-transform isn't a block-supports property (same
   reasoning as .site-footer-heading above). */
.is-eyebrow,
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--clay);
}
.eyebrow::before {
	content: "";
	flex: none;
	width: 28px;
	height: 5px;
	border-radius: 2px;
	background: var(--wp--preset--color--electric);
}
.on-dark .eyebrow {
	color: var(--wp--preset--color--electric);
}

.lede {
	color: var(--wp--preset--color--stone);
	font-size: 1.1875rem;
	max-width: 58ch;
}
.on-dark .lede {
	color: rgba(255, 255, 255, 0.72);
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 0.9375rem;
	padding: 0.85rem 1.5rem;
	border: 2px solid transparent;
	border-radius: 100px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s var(--ut-ease), transform 0.2s var(--ut-ease),
		border-color 0.2s var(--ut-ease), color 0.2s var(--ut-ease);
}
.btn .arw {
	transition: transform 0.25s var(--ut-ease);
}
.btn:hover .arw {
	transform: translateX(4px);
}
.btn-primary {
	background: var(--wp--preset--color--clay);
	color: var(--wp--preset--color--white);
}
.btn-primary:hover {
	background: var(--wp--preset--color--clay-dark);
	color: var(--wp--preset--color--white);
	transform: translateY(-2px);
}
.btn-ghost {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--stone);
}
.btn-ghost:hover {
	color: var(--wp--preset--color--clay);
	border-color: var(--wp--preset--color--clay);
	transform: translateY(-2px);
}
.on-dark .btn-ghost {
	color: var(--wp--preset--color--white);
	border-color: rgba(255, 255, 255, 0.32);
}
.on-dark .btn-ghost:hover {
	color: var(--wp--preset--color--electric);
	border-color: var(--wp--preset--color--electric);
}
.btn-pop {
	background: var(--wp--preset--color--electric);
	color: var(--wp--preset--color--ink);
}
.btn-pop:hover {
	color: var(--wp--preset--color--ink);
	transform: translateY(-2px);
}


/* ==========================================================================
   SECTION FURNITURE
   ========================================================================== */

.wrap {
	max-width: var(--ut-wide);
	margin-inline: auto;
	padding-inline: var(--ut-gutter);
}

/*
 * Core's constrained layout centres every child of a band
 * (`margin-inline: auto !important`). For a child that fills the measure
 * that is what we want, but several elements here set their own, tighter
 * prose measure — .phead h1 at 20ch, .lede at 58ch, .sec-head at 62ch —
 * and centring those floated them off the left edge that the breadcrumb,
 * eyebrows and card rows all align to.
 *
 * So: pin the left margin to where the measure starts rather than letting
 * it split the slack. The percentage resolves against the band's content
 * box, so a full-measure child lands exactly where centring would have put
 * it and a narrower one lines up beneath it. max() keeps the margin at zero
 * once the viewport is narrower than the measure. !important because
 * core's is; anything explicitly asking to be centred keeps core's rule.
 */
.hero.is-layout-constrained > :where(:not(.aligncenter)),
.phead.is-layout-constrained > :where(:not(.aligncenter)),
.sec.is-layout-constrained > :where(:not(.aligncenter)),
.routes.is-layout-constrained > :where(:not(.aligncenter)) {
	margin-inline-start: max(0px, (100% - var(--ut-wide)) / 2) !important;
	margin-inline-end: auto !important;
}

/*
 * ...except on a band that *is* only its column — a story, a profile, a
 * publication, a plain page, the closing call to action on the model page.
 * There is no 1200px grid beside it to line up with, so pinning left just
 * strands a 720px column against the left edge of a 1440px screen with a
 * third of the page empty to its right. `.sec-read` opts a band back into
 * centring; it must stay below the rule above to outrank it at equal
 * specificity.
 */
.sec-read.is-layout-constrained > * {
	margin-inline: auto !important;
}

/*
 * Bands butt up against each other. Core gives every child of a constrained
 * layout a 24px block gap, which is invisible between two paper bands but
 * shows as a cream seam wherever a tinted or ink band meets another — and
 * each band already carries its own generous padding-block.
 */
.hero.is-layout-constrained,
.phead.is-layout-constrained,
.sec.is-layout-constrained {
	margin-block: 0;
}

.sec {
	padding-block: clamp(3.5rem, 7vw, 6rem);
}
.sec-sm {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.sec-white {
	background: var(--wp--preset--color--white);
}
.sec-tint {
	background: var(--wp--preset--color--lime-tint);
}

/*
 * The two green bands. `.sec-lime` is the cover's chartreuse at full
 * strength and `.sec-moss` its deep-olive author strip; between them they
 * put the book's green on the page as an actual surface rather than as the
 * 3px slivers it had been reduced to. Both invert their own contents the
 * way `.sec-ink` does, because on either band the defaults fail: `clay`
 * reads 3.4:1 on chartreuse and `stone` 3.9:1, and `electric` is the band
 * itself, so eyebrow rules and accents have to move off it.
 */
.sec-lime {
	background: var(--wp--preset--color--electric);
	color: var(--wp--preset--color--ink);
}
.sec-lime h2,
.sec-lime h3,
.sec-lime h4 {
	color: var(--wp--preset--color--ink);
}
.sec-lime .lede,
.sec-lime .eyebrow {
	color: var(--wp--preset--color--moss);
}
.sec-lime .eyebrow::before {
	background: var(--wp--preset--color--moss);
}
.sec-lime a:not(.btn) {
	color: var(--wp--preset--color--moss);
}
/* Clay on chartreuse is 3.4:1 — enough for a shape, not for the label on
   it once the shape is a filled button. Ink is the accessible fill here
   and reads as the cover's navy-on-chartreuse pairing besides. */
.sec-lime .btn-primary {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
.sec-lime .btn-primary:hover {
	background: var(--wp--preset--color--moss);
}
.sec-lime .btn-ghost {
	color: var(--wp--preset--color--moss);
	border-color: var(--wp--preset--color--moss);
}
.sec-lime .btn-ghost:hover {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.sec-moss {
	background: var(--wp--preset--color--moss);
	color: var(--wp--preset--color--white);
}
.sec-moss h2,
.sec-moss h3,
.sec-moss h4 {
	color: var(--wp--preset--color--white);
}
.sec-moss .lede {
	color: rgba(255, 255, 255, 0.78);
}
/* Chartreuse on moss is only 6.6:1 and is the same hue family as the band;
   the cover's mustard is the accent that separates from both. */
.sec-moss .eyebrow {
	color: var(--wp--preset--color--gold);
}
.sec-moss .eyebrow::before {
	background: var(--wp--preset--color--gold);
}
.sec-moss .stat {
	border-inline-start-color: var(--wp--preset--color--gold);
}
.sec-moss .stat .n {
	color: var(--wp--preset--color--gold);
}
.sec-moss .stat .l {
	color: rgba(255, 255, 255, 0.72);
}
.sec-ink {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
.sec-ink h2,
.sec-ink h3,
.sec-ink h4 {
	color: var(--wp--preset--color--white);
}

.sec-head {
	max-width: 62ch;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.sec-head.row {
	/* Not `none`: this class outranks the layout cap the band puts on its
	   children, so `none` would let the row run the full width of the band's
	   padding box rather than the band's own measure. It only needs to undo
	   the 62ch prose cap above — the inner div re-applies that to the text. */
	max-width: var(--ut-wide);
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-end;
	justify-content: space-between;
}
.sec-head.row > div {
	max-width: 62ch;
}

/*
 * Inner-page header band — the cover's top block, full strength. It is the
 * one surface that appears on every inner page, so it is where the book's
 * chartreuse earns the most visibility for the least novelty. Ink on
 * chartreuse is 7.2:1, so the title and the band need no compromise; the
 * muted roles below it do, and are moved to moss (6.6:1) rather than left
 * on stone (3.9:1).
 */
.phead {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--electric);
	color: var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--preset--color--moss);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.phead::after {
	content: "";
	position: absolute;
	inset-inline-end: -90px;
	top: -90px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	border: 34px solid rgba(54, 59, 28, 0.10);
}
.phead .lede,
.phead .crumbs,
.phead .crumbs a {
	color: var(--wp--preset--color--moss);
}
.phead .crumbs a:hover {
	color: var(--wp--preset--color--ink);
}
/* The separator is chartreuse everywhere else; on the chartreuse band it
   would be invisible. */
.phead .crumbs .sep {
	color: var(--wp--preset--color--moss);
}
.phead > * {
	position: relative;
	z-index: 1;
}
.phead h1 {
	max-width: 20ch;
}

/*
 * Prose with a mark beside it — the opening section of /mow-history/, and
 * available to any page whose subject has a mark of its own.
 *
 * The mark used to sit in the header band as a crest: on chartreuse it
 * needed a paper disc to stay legible, and the disc cost it a ring of white
 * space and a crest-sized cap. Here it sits on the cream prose band, where
 * green on transparent reads on its own, so the panel is all mark and the
 * mark can be half again as big.
 */
.prose-aside {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(1.75rem, 4vw, 3.5rem);
}
.prose-aside-copy {
	/* Grow into whatever the mark leaves, but never below a readable
	   measure — under that the flex line wraps and the mark drops below. */
	flex: 1 1 30rem;
	min-width: 0;
}
.prose-aside-mark {
	flex: 0 0 auto;
	margin: 0;
	/* Optically seats the disc against the first line of prose rather than
	   its cap height. */
	margin-block-start: 0.35rem;
	inline-size: clamp(200px, 26vw, 300px);
}
.prose-aside-mark img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}
/* Stacked, the mark is no longer beside anything — centre it rather than
   leaving it hard against the start edge under a full-width column. */
@media (max-width: 782px) {
	.prose-aside-mark {
		margin-inline: auto;
		inline-size: min(220px, 60%);
	}
}

.crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}
.crumbs a {
	color: var(--wp--preset--color--stone);
	text-decoration: none;
}
.crumbs a:hover {
	color: var(--wp--preset--color--clay);
}
.crumbs .sep {
	color: var(--wp--preset--color--electric);
}


/* ==========================================================================
   HERO + THE MODEL DIAGRAM
   ========================================================================== */

.hero {
	position: relative;
	overflow: hidden;
	padding-bottom: calc(var(--ut-card-overlap) + var(--wp--preset--spacing--50));
}
/* A wash, not the full band: the model dial sits on this shape and its
   Belonging node is filled with `electric`, which would disappear into a
   chartreuse ground. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0 0 22% 52%;
	background: var(--wp--preset--color--lime-tint);
	border-bottom-left-radius: 220px;
	z-index: 0;
}
.hero > * {
	position: relative;
	z-index: 1;
}
.hero h1 mark {
	background: linear-gradient(
		to bottom,
		transparent 62%,
		var(--wp--preset--color--electric) 62%,
		var(--wp--preset--color--electric) 94%,
		transparent 94%
	);
	color: inherit;
	padding-inline: 0.1em;
}

.hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--sand);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}
.hero-meta span {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}
.hero-meta span::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--clay);
}

.dial,
.model-dial {
	width: 100%;
	max-width: 520px;
	margin-inline: auto;
}
.dial svg,
.model-dial svg {
	width: 100%;
	height: auto;
	overflow: visible;
}
.node {
	cursor: pointer;
	transform-origin: center;
	transform-box: fill-box;
	transition: opacity 0.35s var(--ut-ease), transform 0.35s var(--ut-ease);
}
.node:hover {
	transform: scale(1.06);
}
/* The Belonging vertex is filled with `electric`, and the hero wash it sits
   on is now the same chartreuse family — the fill alone no longer delimits
   the shape (1.4:1, below the 3:1 that WCAG 1.4.11 asks of a meaningful
   graphic). A hairline in ink restores the boundary without touching the
   model's colour coding. `:not([stroke])` leaves the Harmony node's own
   clay stroke, set as a presentation attribute, alone. */
.node > circle:not([stroke]) {
	stroke: var(--wp--preset--color--ink);
	stroke-width: 1.5;
}
.node text {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 19px;
	pointer-events: none;
}
/* Thinking and Feeling are labels on a limb, not discs, so they set their
   own size and colour — the vertex rule above assumes a filled circle
   behind the text and would leave these two in white on white. */
.node-limb text {
	font-size: 17px;
	font-weight: 600;
	fill: var(--wp--preset--color--teal);
	/* A halo in the colour behind the dial, painted under the glyphs, so the
	   loop below Doing runs up to each word rather than through it. */
	stroke: var(--dial-ground, var(--wp--preset--color--paper));
	stroke-width: 5px;
	stroke-linejoin: round;
	paint-order: stroke;
}
/* On the home page the dial sits on the lime wash, not the page paper. */
.hero .dial {
	--dial-ground: var(--wp--preset--color--lime-tint);
}
.node-cap {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
}
.context-ring {
	fill: none;
	stroke: var(--wp--preset--color--clay);
	stroke-width: 2;
	stroke-dasharray: 3 12;
	stroke-linecap: round;
	opacity: 0.65;
}
.spine {
	stroke: var(--wp--preset--color--sand);
	stroke-width: 2;
}
/* The loop below the Doing disc that carries Thinking and Feeling. Narrow,
   so it still reads as lighter than the triangle's frame, but in solid ink
   rather than faded stone, at the client's request (2026-11-13). */
.limb {
	fill: none;
	stroke: var(--wp--preset--color--ink);
	stroke-width: 1.5;
	stroke-linecap: round;
}
.frame {
	fill: none;
	stroke: var(--wp--preset--color--ink);
	stroke-width: 2.5;
	stroke-linejoin: round;
}
.dimmed {
	opacity: 0.2;
}

@media (prefers-reduced-motion: no-preference) {
	.context-ring {
		animation: ut-spin 44s linear infinite;
		transform-origin: 300px 250px;
	}
	@keyframes ut-spin {
		to { transform: rotate(360deg); }
	}
}


/* ==========================================================================
   ROUTE CARDS + TICKER
   ========================================================================== */

.routes.is-layout-constrained {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * var(--ut-card-overlap));
	margin-bottom: 0;
}
/*
 * Cards fill their column so a row of them shares one baseline whatever
 * the text length. The column is made the flex container rather than
 * leaving the card on height:100%: a column's height is indefinite until
 * the flex line resolves, so the percentage falls back to auto and the
 * tallest card spills out past the bottom of the row — which is what put
 * the ticker band over the route cards.
 */
.wp-block-column:has(> .route),
.wp-block-column:has(> .svc) {
	display: flex;
}
.route,
.svc {
	flex: 1 1 auto;
}

.route {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 1.75rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	box-shadow: var(--ut-lift-1);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: transform 0.28s var(--ut-ease), box-shadow 0.28s var(--ut-ease),
		border-color 0.28s var(--ut-ease);
}
.route:hover {
	transform: translateY(-6px);
	box-shadow: var(--ut-lift-2);
	border-color: var(--wp--preset--color--clay);
	color: var(--wp--preset--color--ink);
}
.route-ix {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}
.route .go,
.svc .go,
.htl-card .go {
	margin-top: auto;
	padding-top: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--wp--preset--color--clay);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.route .arw,
.svc .arw,
.htl-card .arw {
	transition: transform 0.25s var(--ut-ease);
}
.route:hover .go .arw,
.svc:hover .go .arw,
a.htl-card:hover .go .arw {
	transform: translateX(5px);
}

/* Deep olive rather than navy: on the front page this strip runs directly
   between two paper bands, which is exactly where the cover puts its
   dark-green author strip. */
.ticker {
	overflow: hidden;
	padding-block: 0.9rem;
	background: var(--wp--preset--color--moss);
	color: var(--wp--preset--color--white);
	border-block: 1px solid rgba(255, 255, 255, 0.14);
}
.ticker-track {
	display: flex;
	width: max-content;
}
.ticker ul {
	display: flex;
	gap: 2.5rem;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0 1.25rem;
}
.ticker li {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1rem;
}
.ticker li::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--electric);
}
@media (prefers-reduced-motion: no-preference) {
	.ticker-track {
		animation: ut-slide 34s linear infinite;
	}
	@keyframes ut-slide {
		to { transform: translateX(-50%); }
	}
	.ticker:hover .ticker-track {
		animation-play-state: paused;
	}
}


/* ==========================================================================
   MODEL EXPLORER
   ========================================================================== */

.tabs {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
}
.tab {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	width: 100%;
	text-align: start;
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	cursor: pointer;
	transition: border-color 0.22s var(--ut-ease), background-color 0.22s var(--ut-ease),
		transform 0.22s var(--ut-ease);
}
.tab:hover {
	transform: translateX(4px);
	border-color: var(--wp--preset--color--clay);
}
.tab .swatch {
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--ink);
}
.tab .name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1rem;
}
.tab .hint {
	margin-inline-start: auto;
	text-align: end;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--stone);
}
.tab[aria-selected="true"] {
	border-color: var(--wp--preset--color--clay);
	background: var(--wp--preset--color--teal-tint);
}
.tab[aria-selected="true"] .name {
	color: var(--wp--preset--color--clay-dark);
}

.panel {
	min-height: 9rem;
}
.panel p {
	color: var(--wp--preset--color--stone);
}
.panel .quote {
	margin-top: 1.25rem;
	padding-inline-start: 1.25rem;
	border-inline-start: 3px solid var(--wp--preset--color--electric);
	font-style: italic;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
}
@media (prefers-reduced-motion: no-preference) {
	.panel.swap {
		animation: ut-fadein 0.4s var(--ut-ease);
	}
	@keyframes ut-fadein {
		from { opacity: 0; transform: translateY(8px); }
	}
}


/* ==========================================================================
   MOW FIGURE — the interactive diagram adapted from the book
   (patterns/model-triangle.php)
   ========================================================================== */

/* The book's figure has its own colour coding, and it carries meaning: the
   three needs and the intermediate need are told apart by hue in every
   reproduction of it. So these are deliberately *not* the site palette —
   they are the figure's, tuned only far enough to clear 4.5:1 on white for
   the label text. Declared as custom properties so a future locale or a
   high-contrast pass can reassign them in one place. */
.mow-figure-wrap {
	--mow-being: #1D6FB8;
	--mow-belonging: #C2185B;
	--mow-becoming: #B87610;
	--mow-doings: #6A3FA0;
	--mow-context: var(--wp--preset--color--moss);

	margin: 0;
	display: grid;
	gap: 1.5rem var(--wp--preset--spacing--60, 2.5rem);
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"stage"
		"panel"
		"credit";
	align-items: center;
}
@media (min-width: 1024px) {
	.mow-figure-wrap {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		grid-template-areas:
			"stage panel"
			"credit credit";
	}
}

/* inline-size containment, so whether the relationship pills can sit on the
   diagram is decided by how wide the diagram actually is — not by a viewport
   width that says nothing about it once the layout has two columns. */
.mow-stage {
	grid-area: stage;
	position: relative;
	container-type: inline-size;
	container-name: mowstage;
}
.mow-canvas {
	position: relative;
}
.mow-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* --- SVG geometry ------------------------------------------------------- */

.mow-context-ring,
.mow-edge,
.mow-spine,
.mow-leader {
	fill: none;
	stroke-linecap: round;
	transition: opacity 0.3s var(--ut-ease), stroke-width 0.3s var(--ut-ease);
}
.mow-context-ring {
	stroke: var(--mow-context);
	stroke-width: 2;
	opacity: 0.45;
}
.mow-edge {
	stroke: var(--wp--preset--color--ink);
	stroke-width: 2.5;
	opacity: 0.55;
}
.mow-spine {
	stroke: var(--wp--preset--color--stone);
	stroke-width: 1.75;
	opacity: 0.5;
}
.mow-leader {
	stroke: var(--wp--preset--color--stone);
	stroke-width: 1.25;
	stroke-dasharray: 3 5;
	opacity: 0.5;
}

.mow-svg .is-lit {
	opacity: 1;
}
.mow-edge.is-lit,
.mow-spine.is-lit {
	stroke: var(--mow-c, var(--wp--preset--color--clay));
	stroke-width: 4;
}
.mow-leader.is-lit {
	stroke: var(--mow-c, var(--wp--preset--color--stone));
	stroke-dasharray: none;
}
.mow-context-ring.is-lit {
	stroke-width: 4;
}
.mow-svg .is-dimmed {
	opacity: 0.14;
}

/* --- Labels ------------------------------------------------------------- */

/* Real buttons rather than SVG <text>: they wrap, they translate, and they
   are keyboard-operable without a roving tabindex. See the pattern header. */
.mow-label {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
	max-width: 24ch;
	padding: 0.5rem 0.95rem;
	border: 2px solid var(--mow-c, var(--wp--preset--color--stone));
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--mow-c, var(--wp--preset--color--ink));
	cursor: pointer;
	text-align: center;
	line-height: 1.15;
	transition: opacity 0.3s var(--ut-ease), transform 0.3s var(--ut-ease),
		background-color 0.3s var(--ut-ease), color 0.3s var(--ut-ease),
		box-shadow 0.3s var(--ut-ease);
}
.mow-label-name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.9375rem;
}
.mow-label-hint {
	font-size: 0.6875rem;
	letter-spacing: 0.02em;
	opacity: 0.72;
}
.mow-label:hover {
	box-shadow: 0 4px 14px rgba(27, 53, 73, 0.16);
}
.mow-label:focus-visible {
	outline: 3px solid var(--wp--preset--color--clay);
	outline-offset: 3px;
}
.mow-label.is-dimmed {
	opacity: 0.34;
}
/* Lit = related to the current selection. Pressed = the one actually
   chosen, and only that one is filled. */
.mow-label.is-lit {
	border-color: var(--mow-c, var(--wp--preset--color--clay));
}
.mow-label[aria-pressed="true"] {
	background: var(--mow-c, var(--wp--preset--color--clay));
	color: var(--wp--preset--color--white);
	box-shadow: 0 6px 20px rgba(27, 53, 73, 0.22);
}
.mow-label[aria-pressed="true"] .mow-label-hint {
	opacity: 0.85;
}

/* The four needs carry the figure's own hues. Each relationship takes the
   colour of the need it is named for first, which is how the published
   figure colours them. */
.mow-figure-wrap [data-key="being"],
.mow-figure-wrap [data-key="being-doings"],
.mow-figure-wrap [data-key="being-belonging"],
.mow-figure-wrap [data-key="being-becoming"] {
	--mow-c: var(--mow-being);
}
.mow-figure-wrap [data-key="belonging"],
.mow-figure-wrap [data-key="belonging-doings"],
.mow-figure-wrap [data-key="belonging-becoming"] {
	--mow-c: var(--mow-belonging);
}
.mow-figure-wrap [data-key="becoming"],
.mow-figure-wrap [data-key="becoming-doings"] {
	--mow-c: var(--mow-becoming);
}
.mow-figure-wrap [data-key="doings"] {
	--mow-c: var(--mow-doings);
}
.mow-figure-wrap [data-key="context"] {
	--mow-c: var(--mow-context);
}

/* The needs are the diagram's anchors — heavier ring, and they sit on the
   canvas at every width. */
.mow-node {
	position: absolute;
	left: var(--mow-x);
	top: var(--mow-y);
	transform: translate(-50%, -50%);
	max-width: 17ch;
	border-width: 3px;
	z-index: 2;
}
.mow-node:hover {
	transform: translate(-50%, -50%) scale(1.05);
}
.mow-label[data-key="doings"] {
	z-index: 3;
}

/* Below the container breakpoint the seven remaining pills cannot sit on
   the diagram without colliding, so they become a plain wrapped row under
   it. Same buttons, same handlers — only the positioning changes. */
.mow-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
}
.mow-chips .mow-label {
	max-width: none;
	padding: 0.4rem 0.8rem;
}
@container mowstage (min-width: 620px) {
	.mow-chips {
		position: absolute;
		inset: 0;
		display: block;
		margin-top: 0;
		pointer-events: none;
	}
	.mow-chips .mow-label {
		position: absolute;
		left: var(--mow-x);
		top: var(--mow-y);
		transform: translate(-50%, -50%);
		max-width: 24ch;
		padding: 0.45rem 0.85rem;
		pointer-events: auto;
	}
	.mow-chips .mow-label:hover {
		transform: translate(-50%, -50%) scale(1.05);
	}
	.mow-chips .mow-label .mow-label-name {
		font-size: 0.8125rem;
	}
}

/* Without container-query support the leaders point at pills that are no
   longer on the diagram, so they are only drawn once the overlay is on. */
.mow-leader {
	display: none;
}
@container mowstage (min-width: 620px) {
	.mow-leader {
		display: inline;
	}
}

/* The model's own emblem, set beside the section heading that introduces
   the figure. Sized in rem rather than as a share of the row so it stays a
   badge and never grows into an illustration. */
.sec-head-seal {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	max-width: 68ch;
}
.mow-seal {
	flex: none;
	width: clamp(64px, 12vw, 96px);
	height: auto;
}
.sec-head-seal h2 {
	margin: 0.1rem 0 0.5rem;
}
.sec-head-seal p:last-child {
	margin: 0;
	color: var(--wp--preset--color--stone);
}
@media (max-width: 600px) {
	.sec-head-seal {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.9rem;
	}
}

/* --- Panel -------------------------------------------------------------- */

.mow-panel {
	grid-area: panel;
	min-height: 12rem;
}
.mow-panel-kind {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--clay);
}
.mow-panel h3 {
	margin: 0 0 0.6rem;
}
.mow-panel p:not(.mow-panel-kind) {
	margin: 0;
	color: var(--wp--preset--color--stone);
}
@media (prefers-reduced-motion: no-preference) {
	.mow-panel.swap {
		animation: ut-fadein 0.4s var(--ut-ease);
	}
}

/* --- Figure credit ------------------------------------------------------ */

/* Every reproduction of the model on this site carries one of these. See
   inc/citation.php — the bibliographic facts come from there, not from the
   template, so they cannot drift apart between figures. */
.fig-credit {
	grid-area: credit;
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--sand);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--stone);
}
.fig-credit cite {
	font-style: italic;
}
.fig-credit a {
	color: var(--wp--preset--color--clay);
	white-space: nowrap;
}

/* Core ships this utility with the block library, but the figure's
   description must not become visible if that stylesheet is ever dequeued. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mow-label {
		transition: none;
	}
	/* Cancel the hover nudge without cancelling the centring transform the
	   absolute positioning depends on. Scoped to the absolutely positioned
	   labels only — the chips in their flow layout have no transform, and
	   giving them one would shove each pill half its own width off. */
	.mow-node:hover {
		transform: translate(-50%, -50%);
	}
}
@container mowstage (min-width: 620px) {
	@media (prefers-reduced-motion: reduce) {
		.mow-chips .mow-label:hover {
			transform: translate(-50%, -50%);
		}
	}
}


/* ==========================================================================
   STATS / SERVICES / STEPS
   ========================================================================== */

.stat {
	border-inline-start: 3px solid var(--wp--preset--color--electric);
	padding-inline-start: 1.1rem;
}
.stat .n {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.sec-ink .stat .n {
	color: var(--wp--preset--color--electric);
}
.stat .l {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--stone);
}
.sec-ink .stat .l {
	color: rgba(255, 255, 255, 0.72);
}

.svc {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.75rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 16px;
	background: var(--wp--preset--color--paper);
	transition: transform 0.28s var(--ut-ease), box-shadow 0.28s var(--ut-ease);
}
.svc::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	background: var(--wp--preset--color--electric);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.32s var(--ut-ease);
}
.svc:hover {
	transform: translateY(-4px);
	box-shadow: var(--ut-lift-1);
}
.svc:hover::after {
	transform: scaleY(1);
}
.svc p {
	color: var(--wp--preset--color--stone);
	font-size: 0.9375rem;
}

/* Audience cards on the model page: the sub-line under the title, and the
   tag row + "Get in touch" pinned to the foot together, so across a row of
   cards the tags sit on one line and the links on another. */
.svc h3 {
	margin: 0;
}
.svc .svc-sub {
	margin: -0.3rem 0 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--stone);
}
.svc .svc-lead + .tagrow {
	margin-top: auto;
	padding-top: 0.75rem;
}
.svc .svc-cta {
	margin: 0;
	padding-top: 0.75rem;
}
.svc .svc-cta .go {
	margin-top: 0;
	padding-top: 0;
}

.tagrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.4rem;
}
.tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--wp--preset--color--lime-tint);
	color: var(--wp--preset--color--moss);
	border-radius: 100px;
	padding: 0.3rem 0.7rem;
}

.altrow {
	padding-block: clamp(2rem, 4vw, 3.25rem);
	border-bottom: 1px solid var(--wp--preset--color--sand);
}
.altrow:last-child {
	border-bottom: 0;
}
/*
 * Alternating sides: odd rows put the figure on the left, even rows on the
 * right. The markup is identical on every row — text column first, figure
 * column second — so only the visual order flips and the reading order
 * never changes. That keeps the screen-reader order and the stacked mobile
 * order consistent down the whole page, which reordering the columns in the
 * markup would not.
 *
 * Mobile-first per DESIGN-GUIDELINES §6: stacked is the base state, and the
 * flip switches on at 782px — WordPress core's own stacking breakpoint for
 * .wp-block-columns — so it applies exactly when the columns are genuinely
 * side by side.
 */
@media (min-width: 782px) {
	.altrow-flip {
		flex-direction: row-reverse;
	}
}
.altrow p {
	color: var(--wp--preset--color--stone);
}
.altrow ul {
	margin-top: 1rem;
	padding-inline-start: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.altrow ul li {
	position: relative;
	padding-inline-start: 1.6rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--stone);
}
.altrow ul li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.6em;
	width: 10px;
	height: 2px;
	background: var(--wp--preset--color--electric);
}
.altrow-fig {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	/* Capped, and the mark scales with the panel: at the full band width a
	   4:3 box is over 400px tall, and a fixed 88px icon is lost in it. */
	max-height: 300px;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 20px;
	background: var(--wp--preset--color--lime-tint);
}
.altrow-fig svg {
	width: clamp(88px, 26%, 150px);
	height: auto;
}
/*
 * The same panel carrying a photograph instead of the fallback mark. The
 * tinted ground and the centring are for a small line drawing floating in
 * the box; a photograph fills it, so both come off and the image is clipped
 * to the panel's own radius.
 *
 * Two of the four originals are portrait, so `object-fit: cover` is doing
 * real work here — each row sets its own object-position (service-rows.php)
 * because the subject is not in the middle of every frame.
 */
.altrow-fig-photo {
	place-items: stretch;
	overflow: hidden;
	background: var(--wp--preset--color--sand);
}
.altrow-photo {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* Numbered steps. The numbering is load-bearing here — these patterns
   describe real sequences (how the model was built, how an engagement
   runs), not a decorative list. */
.steps {
	counter-reset: ut-step;
}
.step {
	position: relative;
	padding-top: 2.75rem;
}
.step::before {
	counter-increment: ut-step;
	content: counter(ut-step, decimal-leading-zero);
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	padding-bottom: 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--clay);
	border-bottom: 3px solid var(--wp--preset--color--electric);
}
.step p {
	color: var(--wp--preset--color--stone);
	font-size: 0.9375rem;
}

/* ==========================================================================
   ENGAGEMENT JOURNEY  (patterns/engagement-journey.php)
   ==========================================================================
 * The richer sibling of .steps above, for the end of the services page.
 * Same content shape, but the sequence is drawn: a rail runs behind the
 * markers so the three stages read as one path rather than three unrelated
 * columns.
 *
 * The rail is a background on the <ol>, not an element, and every piece of
 * it is decorative — the numbering that carries meaning comes from the list
 * itself. Markers are aria-hidden for the same reason: a screen reader
 * already announces "1 of 3".
 */

.journey-wrap {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 4vw, 3rem);

	/* The cards and the marker rings both need to know what they are sitting
	   on: the card has to be a shade off its section background to read as a
	   card at all, and the ring has to match the section exactly to punch a
	   clean gap in the rail. Declared as locals with the paper-section
	   defaults, then swapped on white sections, so the pattern can be dropped
	   into either without editing the component. */
	--journey-surface: var(--wp--preset--color--white);
	--journey-ground: var(--wp--preset--color--paper);
}
.sec-white .journey-wrap,
.sec-white.journey-wrap {
	--journey-surface: var(--wp--preset--color--paper);
	--journey-ground: var(--wp--preset--color--white);
}

/* Mobile first: a plain vertical stack, no rail — below ~540px there is no
   width left to put a card beside a marker, and a rail with nothing to
   connect is decoration. Structure is added back at each step up. */
.journey {
	--journey-gap: 1.5rem;
	--journey-marker: 46px;

	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--journey-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.journey-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.journey-marker {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--journey-marker);
	height: var(--journey-marker);
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	/* Ring in the page colour, so the marker punches a clean hole in the
	   rail instead of sitting on top of a visible line. */
	box-shadow: 0 0 0 6px var(--journey-ground), var(--ut-lift-1);
}
.journey-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--electric);
}

.journey-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: clamp(1.25rem, 2.5vw, 1.6rem);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 18px;
	background: var(--journey-surface);
	transition: transform 0.35s var(--ut-ease), box-shadow 0.35s var(--ut-ease),
		border-color 0.35s var(--ut-ease);
}
/* Hover is on the whole step so the marker and card respond together.
   Nothing is revealed by it — it is a depth cue on an already-complete
   card, per DESIGN-GUIDELINES §8. */
.journey-step:hover .journey-card {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--clay);
	box-shadow: var(--ut-lift-2);
}

.journey-meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--clay);
}
.journey-card h3 {
	margin: 0;
	font-size: clamp(1.125rem, 2vw, 1.3rem);
}
.journey-body {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--stone);
}

/* Pushed to the bottom of the card so the deliverable lines up across all
   three, whatever length the body copy above it runs to. */
.journey-outcome {
	margin: 0.35rem 0 0;
	margin-top: auto;
	padding-top: 0.85rem;
	border-top: 1px dashed var(--wp--preset--color--sand);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--teal);
}
.journey-outcome-label {
	display: block;
	margin-bottom: 0.15rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}

.journey-close {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: 20px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
.journey-close-text {
	flex: 1 1 22rem;
}
.journey-close h3 {
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--white);
	font-size: clamp(1.15rem, 2.2vw, 1.4rem);
}
.journey-close p {
	margin: 0;
	max-width: 46ch;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.78);
}
.journey-close .cta-row {
	margin-top: 0;
}

/* One full-width button reads better than a button floating in a wide panel
   at this size — matches how .cta-row is handled elsewhere on narrow. */
.journey-close .cta-row,
.journey-close .btn {
	width: 100%;
}
.journey-close .btn {
	justify-content: center;
}

/*
 * From 541px there is room for the card to sit beside its marker, so the
 * sequence becomes a vertical path: markers in a column with the rail drawn
 * down behind them.
 *
 * The rail is a pseudo-element on the <ol> and is purely decorative — the
 * numbering that carries the meaning comes from the list itself, which is
 * why the markers are aria-hidden. Both ends are inset to the marker centres
 * so it spans marker-to-marker instead of overshooting the sequence.
 */
@media (min-width: 541px) {
	.journey-step {
		flex-direction: row;
		align-items: flex-start;
		gap: 1.25rem;
	}
	.journey-marker {
		flex: 0 0 auto;
	}
	/*
	 * The rail is drawn as one connector per step rather than a single line
	 * behind the whole list, because the markers sit at the leading edge of
	 * each step, not at its centre — a single line spanning the list would
	 * have to guess at their positions and would drift with the gap. Each
	 * connector instead runs from its own marker's edge to exactly where the
	 * next one begins, so it stays anchored at any width.
	 *
	 * Decorative throughout: the sequence itself is the <ol>.
	 */
	.journey-step:not(:last-child)::after {
		content: "";
		position: absolute;
		inset-inline-start: calc(var(--journey-marker) / 2 - 1px);
		top: var(--journey-marker);
		width: 2px;
		height: calc(100% - var(--journey-marker) + var(--journey-gap));
		background: linear-gradient(
			180deg,
			var(--wp--preset--color--clay),
			var(--wp--preset--color--electric)
		);
		opacity: 0.5;
	}
	.journey-close .cta-row,
	.journey-close .btn {
		width: auto;
	}
}

/* From 901px all three stages fit across, and the path turns horizontal.
   Two across is deliberately skipped: three stages in a two-column grid
   leaves an orphan and breaks the left-to-right reading of a sequence. */
@media (min-width: 901px) {
	.journey {
		--journey-gap: clamp(1rem, 2.5vw, 1.75rem);
		--journey-marker: 54px;

		grid-template-columns: repeat(3, 1fr);
	}
	.journey-step {
		flex-direction: column;
		gap: 1rem;
	}
	/* Same connectors, turned through 90°. */
	.journey-step:not(:last-child)::after {
		inset-inline-start: var(--journey-marker);
		top: calc(var(--journey-marker) / 2 - 1px);
		width: calc(100% - var(--journey-marker) + var(--journey-gap));
		height: 2px;
		background: linear-gradient(
			90deg,
			var(--wp--preset--color--clay),
			var(--wp--preset--color--electric)
		);
	}
}


/* ==========================================================================
   BOOK
   ========================================================================== */

.book-fig {
	perspective: 1200px;
	margin: 0;
}
.book-fig img {
	border-radius: 6px;
	box-shadow: 0 24px 60px rgba(21, 42, 58, 0.55);
	transform: rotateY(-9deg) rotateX(3deg);
	transition: transform 0.5s var(--ut-ease);
}
.book-fig:hover img {
	transform: rotateY(0) rotateX(0) translateY(-6px);
}

.palette-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 1.5rem;
}
.chip {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.7rem 0.3rem 0.35rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 100px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.72);
}
.chip i {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
}

.toc {
	list-style: none;
	padding: 0;
	margin: 0;
}
.toc li {
	display: flex;
	gap: 1rem;
	align-items: baseline;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--wp--preset--color--sand);
}
.toc li:last-child {
	border-bottom: 0;
}
.toc .ch {
	flex: none;
	width: 4.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--clay);
}
.toc .t {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1rem;
}

.endorse blockquote {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
	margin: 0;
	padding: 1.75rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
}
.endorse blockquote p {
	font-size: 1.0625rem;
	font-style: italic;
}
.endorse blockquote footer {
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--wp--preset--color--sand);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}


/* ==========================================================================
   OWQ — SAMPLE QUESTION AND SAMPLE RESULT
   ========================================================================== */

.owq {
	padding: clamp(1.75rem, 4vw, 3rem);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 20px;
	background: var(--wp--preset--color--white);
	box-shadow: var(--ut-lift-1);
}

.q-card {
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 14px;
	background: var(--wp--preset--color--paper);
}
.q-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}
.q-frame {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.6rem 0 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--stone);
}
.q-frame::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--electric);
}
.q-text {
	margin: 0.4rem 0 1.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.4;
}
.scale {
	display: flex;
	gap: 0.4rem;
}
.scale button {
	flex: 1;
	min-height: 44px;
	border: 1.5px solid var(--wp--preset--color--stone);
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background-color 0.18s var(--ut-ease), color 0.18s var(--ut-ease),
		border-color 0.18s var(--ut-ease), transform 0.18s var(--ut-ease);
}
.scale button:hover {
	border-color: var(--wp--preset--color--clay);
	color: var(--wp--preset--color--clay);
	transform: translateY(-2px);
}
.scale button[aria-pressed="true"] {
	background: var(--wp--preset--color--clay);
	border-color: var(--wp--preset--color--clay);
	color: var(--wp--preset--color--white);
}
.scale-ends {
	display: flex;
	justify-content: space-between;
	margin-top: 0.6rem;
	font-size: 0.75rem;
	color: var(--wp--preset--color--stone);
}
.q-feedback {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.1rem;
	min-height: 1.5rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--teal);
}
.q-feedback::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--electric);
}
.q-feedback:empty {
	display: none;
}

.result {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 20px;
	background: var(--wp--preset--color--white);
	box-shadow: var(--ut-lift-1);
}
.bar-row {
	display: grid;
	grid-template-columns: 7.5rem 1fr 3rem;
	gap: 1rem;
	align-items: center;
	padding-block: 0.85rem;
}
.bar-row .lab {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 0.9375rem;
}
.bar-track {
	height: 14px;
	border-radius: 100px;
	background: var(--wp--preset--color--teal-tint);
	overflow: hidden;
}
.bar-fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 100px;
	transition: width 1.1s var(--ut-ease);
}
.bar-row .val {
	text-align: end;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--stone);
}
/*
 * The sample result on /owq/ is rendered by the plugin's own
 * owq_render_results(), so it carries .owq-* styles from owq-form.css and
 * needs nothing here beyond a frame and the "this is not your result" flag.
 */
.owq-sample-result .owq-results {
	max-width: none;
}
.owq-sample-flag {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: 0.3rem 0.85rem;
	border-radius: 100px;
	background: var(--wp--preset--color--surface-pending);
	color: var(--wp--preset--color--amber);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.band-note {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	border-inline-start: 4px solid var(--wp--preset--color--teal);
	border-radius: 0 10px 10px 0;
	background: var(--wp--preset--color--teal-tint);
	font-size: 0.9375rem;
}

/* Native <details> accordion — guidelines §8 prefers this over a JS widget. */
details.faq {
	border-bottom: 1px solid var(--wp--preset--color--sand);
}
details.faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 0;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1rem;
}
details.faq summary::-webkit-details-marker {
	display: none;
}
details.faq summary::after {
	content: "+";
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.25rem;
	color: var(--wp--preset--color--clay);
}
details.faq[open] summary::after {
	content: "\2013";
}
details.faq p {
	padding-bottom: 1.1rem;
	max-width: 68ch;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--stone);
}


/* ==========================================================================
   RESEARCH / PUBLICATIONS / POSTS
   ========================================================================== */

.feature {
	border-radius: 24px;
	padding: clamp(1.75rem, 4vw, 3rem);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
.feature-art {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.05);
}

.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
}
.filter {
	padding: 0.5rem 1rem;
	border: 1.5px solid var(--wp--preset--color--sand);
	border-radius: 100px;
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 0.8125rem;
	cursor: pointer;
	transition: border-color 0.2s var(--ut-ease), background-color 0.2s var(--ut-ease),
		color 0.2s var(--ut-ease);
}
.filter:hover {
	border-color: var(--wp--preset--color--clay);
	color: var(--wp--preset--color--clay);
}
.filter[aria-pressed="true"] {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.publist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pub {
	display: grid;
	grid-template-columns: 5.5rem 1fr auto;
	gap: 1.25rem;
	align-items: baseline;
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--wp--preset--color--sand);
}
.pub[hidden] {
	display: none;
}
.pub .yr {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--clay);
}
.pub .ti {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.4;
}
.pub .src {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--stone);
}
.pub .kind {
	white-space: nowrap;
	padding: 0.25rem 0.65rem;
	border-radius: 100px;
	background: var(--wp--preset--color--lime-tint);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
}

/*
 * Post cards for a query loop.
 *
 * This component used to be keyed on `.post`, which looked harmless and was
 * not: `post_class()` puts a bare `post` class on every item the query loop
 * renders, so every post on the site picked up the card's border, radius and
 * white fill — but none of the padding, which lived on the inner `.post-body`
 * that only the hand-written wireframe markup had. That is what put the
 * unpadded box around "Hello world!" on the front page, and `.post time`'s
 * `margin-top: auto` is what left the hollow gap above the date.
 *
 * It is keyed on the block class now, and opt-in: only a query given the
 * `postcards` class renders cards, so templates that draw their own card
 * around each post (archive.html) are not double-framed.
 */
.postcards .wp-block-post-template {
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.postcards .wp-block-post {
	/* No `height: 100%` — grid items already stretch to the row, and a
	   percentage height here resolves against the row it is itself sizing,
	   which left a phantom 45px inside a lone card. */
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.4rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	transition: transform 0.28s var(--ut-ease), box-shadow 0.28s var(--ut-ease);
}
.postcards .wp-block-post:hover {
	transform: translateY(-5px);
	box-shadow: var(--ut-lift-2);
}
.postcards .wp-block-post > * {
	margin-block: 0;
}
.postcards .wp-block-post-featured-image {
	margin-bottom: 0.35rem;
}
.postcards .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.postcards .wp-block-post-title {
	line-height: 1.35;
}
.postcards .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.postcards .wp-block-post:hover .wp-block-post-title a {
	color: var(--wp--preset--color--teal);
}
.postcards .wp-block-post-excerpt {
	color: var(--wp--preset--color--stone);
}
/* Pinned to the foot of the card so a run of cards lines its dates up
   whatever the title runs to. */
.postcards .wp-block-post-date {
	margin-top: auto;
	padding-top: 0.35rem;
}


/* ==========================================================================
   ABOUT
   ========================================================================== */

/*
 * The portrait on /dr-farzaneh-yazdani/. This used to frame a placeholder
 * SVG and the words "portrait to be supplied"; it now wraps the page's
 * featured image (core/post-featured-image carries the class), so the rules
 * are about containing a photograph rather than drawing an empty box.
 *
 * The tinted background and border are kept: the photograph is a candid one
 * with a busy background, and the frame is what stops it reading as a snap
 * dropped into the column. They also still show through while the image is
 * loading.
 */
.portrait {
	margin: 0;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 20px;
	background: var(--wp--preset--color--lime-tint);
	/* The radius has to bite on the <img>, which is a child and square. */
	overflow: hidden;
}
.portrait img {
	display: block;
	width: 100%;
	height: 100%;
	/* Framed on her face rather than the geometric centre: the source is a
	   candid photograph and centre-cropping it puts the crop line through
	   her chin at the wider aspect ratio used on narrow screens. */
	object-fit: cover;
	object-position: 50% 32%;
}

.prose {
	max-width: 68ch;
	color: var(--wp--preset--color--stone);
}
.prose strong {
	color: var(--wp--preset--color--ink);
}

/*
 * Career timeline. Horizontal on desktop, vertical and centred below 900px
 * (see the responsive block). The axis is drawn per item rather than once
 * across the list, which is what lets the same two pseudo-elements become a
 * horizontal rule with dots on it or a vertical chain of connectors. The
 * column gutter is padding inside each item rather than grid `gap`, so the
 * axis segments meet edge to edge and read as one continuous line.
 *
 * The row never wraps: milestones stay on one line and share the width.
 * Five entries is what the pattern ships and what the type sizes below are
 * tuned for; many more than that would want a different treatment.
 */
.timeline {
	/* Distance from an item's top edge to the axis — the band the year sits in. */
	--tl-axis: 2.75rem;
	--tl-dot: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
}
.timeline li {
	position: relative;
	padding-top: calc(var(--tl-axis) + 1.15rem);
	padding-inline-end: 1.5rem;
	padding-bottom: 1.5rem;
}
/* The axis segment for this item. */
.timeline li::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: var(--tl-axis);
	height: 2px;
	background: var(--wp--preset--color--sand);
}
/* Nothing anchors the run past the last dot, so it fades out instead of
   stopping dead against the container edge. */
.timeline li:last-child::after {
	background: linear-gradient(90deg, var(--wp--preset--color--sand), transparent);
}
.timeline li::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset-inline-start: 0;
	top: var(--tl-axis);
	margin-top: calc(1px - var(--tl-dot) / 2);
	box-sizing: border-box;
	width: var(--tl-dot);
	height: var(--tl-dot);
	border-radius: 50%;
	background: var(--wp--preset--color--electric);
	border: 2px solid var(--wp--preset--color--paper);
}
.timeline .yr {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--clay);
}
.timeline .ti {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(0.9375rem, 1.35vw, 1.0625rem);
	line-height: 1.3;
	text-wrap: balance;
}
.timeline .ds {
	margin-top: 0.35rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--stone);
}

/* ==========================================================================
   HISTORY TIMELINE  (/mow-history/)
   ========================================================================== */

/*
 * The sibling of .timeline above, and deliberately not the same component:
 * that one runs a five-entry axis left to right and its type sizes are tuned
 * for exactly that. This one carries seventeen dated entries in four eras,
 * filterable, most of them linking somewhere — a horizontal axis cannot hold
 * that, and stretching it to try would ruin the component that works.
 *
 * Mobile-first: the base state is a single column with the rail at the
 * leading edge; from 760px the rail moves inward and the years occupy their
 * own column beside it.
 *
 * Everything is drawn per item rather than as one line behind the list,
 * because filtering removes items — a single line spanning the list would
 * still be spanning the gaps where the hidden ones used to be.
 */
.htl {
	--htl-rail: 0.4375rem;
	--htl-dot: 13px;
}
.htl-count {
	margin: 0 0 1.75rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}
.htl-era {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.htl-era:last-of-type {
	margin-bottom: 0;
}
.htl-era[hidden] {
	display: none;
}
.htl-era-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
}
.htl-era-yrs {
	flex: none;
	padding: 0.3rem 0.8rem;
	border-radius: 100px;
	background: var(--wp--preset--color--lime-tint);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--moss);
}
.htl-era-lede {
	margin: 0 0 1.5rem;
	max-width: 60ch;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--stone);
}
.htl-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.htl-item {
	position: relative;
	padding-inline-start: calc(var(--htl-rail) + 1.5rem);
	padding-bottom: 1.25rem;
}
.htl-item[hidden] {
	display: none;
}
/* One rail segment per item, starting clear of its own dot so the line
   reads as beaded rather than as a bar with holes punched in it. */
.htl-item::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(var(--htl-rail) - 1px);
	top: 1.5rem;
	bottom: 0;
	width: 2px;
	background: linear-gradient(
		180deg,
		var(--wp--preset--color--electric),
		var(--wp--preset--color--sand)
	);
}
/* Nothing anchors the run past the last dot in an era, so it fades out
   instead of stopping dead — same treatment as .timeline's last segment. */
.htl-list > .htl-item:last-child::before {
	background: linear-gradient(180deg, var(--wp--preset--color--sand), transparent);
}
.htl-dot {
	position: absolute;
	z-index: 1;
	inset-inline-start: calc(var(--htl-rail) - var(--htl-dot) / 2);
	top: 0.35rem;
	box-sizing: border-box;
	width: var(--htl-dot);
	height: var(--htl-dot);
	border-radius: 50%;
	background: var(--wp--preset--color--electric);
	border: 2px solid var(--wp--preset--color--paper);
}
.htl-yr {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--clay);
}
.htl-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: 1.15rem 1.35rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 14px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: transform 0.28s var(--ut-ease), box-shadow 0.28s var(--ut-ease),
		border-color 0.28s var(--ut-ease);
}
/* Only the entries that go somewhere lift — a card that rises under the
   cursor and then does nothing when clicked is a promise the page cannot
   keep. Twelve of the seventeen have a destination; five do not. */
a.htl-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--ut-lift-1);
	border-color: var(--wp--preset--color--clay);
	color: var(--wp--preset--color--ink);
}
.htl-ti {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.35;
	text-wrap: pretty;
}
.htl-ds {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--stone);
}
.htl-card .go {
	margin-top: 0.25rem;
}
/* The live end of the line: the only entry a reader can still join. */
.htl-era.is-now .htl-era-yrs {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
.htl-era.is-now .htl-dot {
	background: var(--wp--preset--color--clay);
}
.htl-era.is-now .htl-card {
	background: var(--wp--preset--color--lime-tint);
	border-color: var(--wp--preset--color--electric);
}
/* The badge is lime-tint on every other card; on this one that is the card. */
.htl-era.is-now .tag {
	background: var(--wp--preset--color--white);
}
.htl-empty {
	margin: 0;
	padding: 2rem 0;
	color: var(--wp--preset--color--stone);
}

/* From 760px the years get a column of their own beside the rail. They are
   positioned rather than gridded so that hiding an item cannot leave an
   empty row behind it. */
@media (min-width: 760px) {
	.htl {
		--htl-rail: 8rem;
	}
	.htl-item {
		padding-inline-start: calc(var(--htl-rail) + 1.75rem);
	}
	.htl-yr {
		position: absolute;
		inset-inline-start: 0;
		top: 0.5rem;
		width: calc(var(--htl-rail) - 1.25rem);
		margin-bottom: 0;
		text-align: end;
	}
	.htl-era-head,
	.htl-era-lede {
		padding-inline-start: calc(var(--htl-rail) + 1.75rem);
	}
}

.cred {
	height: 100%;
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
}
.cred ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--stone);
}
.cred li {
	position: relative;
	padding-inline-start: 1.5rem;
}
.cred li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.62em;
	width: 9px;
	height: 2px;
	background: var(--wp--preset--color--electric);
}

/* Retained from the earlier Academy pattern set. */
.cred-item {
	border-inline-start: 2px solid var(--wp--preset--color--electric);
	padding-inline-start: 1rem;
}
.term-card {
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 10px;
	height: 100%;
}
.term-card.is-highlight {
	border-color: var(--wp--preset--color--clay);
}
.status-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	padding: 0.35rem 0.75rem;
	border-radius: 100px;
	background: var(--wp--preset--color--teal-tint);
	color: var(--wp--preset--color--stone);
}
.status-chip::before {
	content: "\25CF";
	font-size: 0.55rem;
}
.status-chip.is-pending {
	color: var(--wp--preset--color--amber);
}


/* ==========================================================================
   PEOPLE'S VOICES

   Built as a masonry-ish column layout rather than a grid of equal cards:
   these quotations are whatever length their sender wrote them, from one
   line to a paragraph, and a grid would pad every short one out to the
   height of the longest in its row. `columns` lets each card be its own
   height and keeps the page from looking like a form.
   ========================================================================== */

.voices {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 22rem 3;
	column-gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.voice {
	/* Without this a card can be split across the column break, which puts
	   half a quotation at the bottom of one column and its attribution at
	   the top of the next. */
	break-inside: avoid;
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.voice blockquote {
	margin: 0;
	padding: 1.75rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
}
.voice blockquote p {
	margin-block: 0;
	font-size: 1.0625rem;
	font-style: italic;
}
.voice blockquote p + p {
	margin-top: 0.9rem;
}
.voice footer {
	margin-top: 1.1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--wp--preset--color--sand);
	font-style: normal;
}
.voice-who {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
}
.voice-role {
	display: block;
	font-size: 0.875rem;
	color: var(--wp--preset--color--stone);
}
/* Where a quotation came from, set apart from who said it: it is provenance,
   not part of the attribution, and the distinction matters when the source
   is somebody's private message. */
.voice-from {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}

.voice-empty {
	max-width: 46rem;
	margin-inline: auto;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border: 1px dashed var(--wp--preset--color--stone);
	border-radius: 20px;
	background: var(--wp--preset--color--white);
	text-align: center;
}
.voice-empty h2 {
	margin-top: 0;
}
/* The one line addressed to whoever maintains the site rather than to a
   reader. Quiet, and boxed off from the sentence above it. */
.voice-empty-note {
	margin-bottom: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--sand);
	font-size: 0.875rem;
	color: var(--wp--preset--color--stone);
}

.voice-consent-note {
	margin-top: 1rem;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--stone);
}

/* A person's own accounts on their profile page, under the biography. */
.person-socials {
	margin-top: 2rem;
}
.person-socials-heading {
	margin-bottom: 0.6rem;
	font-size: 0.75rem;
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}

/* ==========================================================================
   SOCIAL LINKS

   One component for three surfaces: the utility bar at the top of every
   page, the footer's brand column, and each person's card and profile. The
   icons are currentColor throughout, so the only thing a surface has to set
   is a colour — the dark ones do that below rather than redefining the row.

   There is no "empty" state to style. inc/social.php returns '' rather than
   an empty list when a person has given no accounts, so the markup is simply
   absent and the layout closes up on its own.
   ========================================================================== */

.socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.social {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--wp--preset--color--teal);
	border: 1px solid var(--wp--preset--color--sand);
	background: var(--wp--preset--color--white);
	text-decoration: none;
	transition: color 0.2s var(--ut-ease), border-color 0.2s var(--ut-ease),
		background-color 0.2s var(--ut-ease);
}
.social:hover,
.social:focus-visible {
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--clay);
	background: var(--wp--preset--color--clay);
}
.social svg {
	display: block;
}

/*
 * On the two chrome bars a white chip would read as a row of buttons rather
 * than as the quiet metadata it is, so both drop the chip and carry the icon
 * alone, in whatever colour their own text links use.
 */
.site-utility .social,
.site-footer .social {
	width: 30px;
	height: 30px;
	border-color: transparent;
	background: none;
}
/* Chartreuse strip: ink, 7.18:1. */
.site-utility .social {
	color: var(--wp--preset--color--ink);
}
.site-utility .social:hover,
.site-utility .social:focus-visible {
	color: var(--wp--preset--color--moss);
	background: rgba(255, 255, 255, 0.45);
}
/* Navy footer: translucent white, 9.4:1, going chartreuse on hover like the
   links beside it. */
.site-footer .social {
	color: rgba(255, 255, 255, 0.78);
}
.site-footer .social:hover,
.site-footer .social:focus-visible {
	color: var(--wp--preset--color--electric);
	background: rgba(255, 255, 255, 0.1);
}

/* On a person's card the row sits at the bottom, after a bio of whatever
   length, so it is pushed down rather than left floating mid-card. */
.person .socials {
	margin-top: auto;
	padding-top: 0.6rem;
}
/* Her first-person introduction on her page: the heading above it and the
   CV button below it share the text column the post content sets, rather
   than the 1200px of the section around them. `.sec >` outranks the
   layout rule core generates for that section. */
.sec > .prose-col {
	max-width: var(--wp--style--global--content-size, 720px);
	margin-inline: auto !important;
}
.cv-download {
	margin-top: 2rem;
}

/* Under a CTA row the chips are a second row of actions, so they get the
   same breathing room as the buttons above rather than sitting flush. */
.cta-row + .socials {
	margin-top: 1.25rem;
	gap: 0.75rem;
}
.socials-sm .social {
	width: 30px;
	height: 30px;
}

/* Touch targets. The chip is 34px; the padded hit area brings it to 44px
   without changing what is drawn (WCAG 2.2 §2.5.8). */
@media (pointer: coarse) {
	.socials {
		gap: 0.15rem;
	}
	.social {
		width: 44px;
		height: 44px;
	}
	.site-utility .social,
	.site-footer .social,
	.socials-sm .social {
		width: 44px;
		height: 44px;
	}
}

/* ==========================================================================
   PEOPLE
   ========================================================================== */

/*
 * The lead panel at the top of /people/ — Dr Farzaneh Yazdani, lifted out
 * of the grid below. Two columns on desktop, stacked on narrow screens.
 *
 * `min-width: 0` on the body column is not decorative: a grid item's
 * default `min-width: auto` refuses to shrink below its longest unbreakable
 * run, and her role subtitle is one long line. Without it the column pushes
 * the whole panel wider than its container.
 */
.person-lead {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 2.75rem);
	align-items: center;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 20px;
	background: var(--wp--preset--color--white);
}

.person-lead-figure {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--lime-tint);
	aspect-ratio: 1;
}
.person-lead-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.person-lead-body > * {
	margin-block: 0;
}
.person-lead-body > * + * {
	margin-top: 0.7rem;
}
.person-lead-body h2 {
	line-height: 1.2;
}
.person-lead-body h2 a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.person-lead-body h2 a:hover {
	color: var(--wp--preset--color--teal);
}

/*
 * The grid of everyone else. `auto-fill` rather than `auto-fit`: with
 * `auto-fit` a final row holding one card stretches it across the full
 * width, which makes the last person look like a feature rather than the
 * last of a list.
 */
.people-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.person {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	transition: transform 0.28s var(--ut-ease), box-shadow 0.28s var(--ut-ease);
}
.person:hover {
	transform: translateY(-5px);
	box-shadow: var(--ut-lift-2);
}
.person > * {
	margin-block: 0;
}
/*
 * `display: flex` above silently defeats the `hidden` attribute: the UA rule
 * is `[hidden] { display: none }`, an author `display` on the same element
 * wins against it, and the batch-reveal script's hidden cards went on being
 * painted. Restore it explicitly. Anything that sets `display` on an element
 * that may also be `hidden` needs this pair.
 */
.person[hidden] {
	display: none;
}

.person-figure {
	display: block;
	margin-bottom: 0.35rem;
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--lime-tint);
	aspect-ratio: 1;
}
/*
 * Three of the eleven portraits are smaller than the 480px `ut-person` crop
 * and fall back to their full, differently-shaped original. object-fit is
 * what keeps the grid square regardless.
 */
.person-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.person h3 {
	font-size: 1.0625rem;
	line-height: 1.35;
}
.person h3 a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.person:hover h3 a {
	color: var(--wp--preset--color--teal);
}

.person-role {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--teal);
}

.person-bio {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--stone);
}

/* Only ever visible once theme.js has collapsed the list — see
   patterns/archive-people.php for why it ships hidden. */
.people-more {
	margin-top: clamp(1.5rem, 3vw, 2rem);
	text-align: center;
}

/*
 * /people/ shows the eleven in two named groups — the Entrepreneurial
 * Diversity project team, then the country leads — because they are not one
 * kind of person and a single wall of cards said they were.
 *
 * Each group is a heading, its grid, and its own reveal control; the rule
 * between them is the separator, drawn once and only between groups (the
 * pattern emits none before the first).
 */
/* Tighter than a top-level .sec-head, which stands off its section by up to
   3rem. These headings belong to the grid directly beneath them, and at that
   distance the second group's heading starts to read as though it belonged
   to the cards above the rule instead. */
.people-group .sec-head {
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.people-divider {
	height: 0;
	/* A rule, not a shape: border-top on a zeroed box renders identically
	   everywhere, where a bare <hr>'s default is a 3D groove that differs
	   between engines and cannot be recoloured reliably. */
	border: 0;
	border-top: 1px solid var(--wp--preset--color--sand);
	margin-block: clamp(2.5rem, 6vw, 4rem);
}


/* ==========================================================================
   CONTACT
   ========================================================================== */

/*
 * The band the two columns sit on. Without it the page was a white card and
 * a tinted card floating on the page colour, which is what made it read as
 * plain: nothing held the two together as one thing.
 *
 * The tint moved outward — the band takes the lime the aside card used to
 * have, and the aside card goes white — because two tints of the same colour
 * stacked on each other flatten into one area.
 */
.contact-band {
	background: var(--wp--preset--color--lime-tint);
}

/*
 * The four things this address is for, above the form. Cards rather than a
 * list because each one is a destination: the whole card is the link, and it
 * lands on the form with that topic already chosen.
 */
/* The block below the form: heading, one line of explanation, four cards. */
.contact-routes-wrap {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.contact-routes-heading {
	margin: 0 0 0.4rem;
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}
.contact-routes-lede {
	max-width: 62ch;
	margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
	color: var(--wp--preset--color--stone);
}
.contact-routes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(0.9rem, 2vw, 1.25rem);
}
.contact-routes a {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	height: 100%;
	padding: 1.25rem 1.35rem;
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	color: inherit;
	text-decoration: none;
	transition: transform 0.28s var(--ut-ease), box-shadow 0.28s var(--ut-ease),
		border-color 0.28s var(--ut-ease);
}
.contact-routes a:hover,
.contact-routes a:focus-visible {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--clay);
	box-shadow: var(--ut-lift-2);
}
.contact-routes h3 {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.3;
}
.contact-routes p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--stone);
}
/* Pushed to the bottom so the four cards' arrows line up however long each
   description runs. aria-hidden in the markup: the whole card is already one
   link with an accessible name, and this would read as a second one. */
.contact-route-go {
	margin-top: auto;
	padding-top: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--clay);
}
.contact-routes a:hover .contact-route-go {
	color: var(--wp--preset--color--clay-dark);
}

.form-shell {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 20px;
	background: var(--wp--preset--color--white);
	/* The topic cards above link to #contact-form. Without this the sticky
	   header lands on top of the form's first field. */
	scroll-margin-top: 6.5rem;
}
.aside-card {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 20px;
	background: var(--wp--preset--color--white);
}
.aside-card h2 {
	margin: 0;
	font-size: 1.125rem;
}
.aside-card h3 {
	margin: 0 0 0.7rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}
.aside-card dl {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin: 0;
}
.aside-card dt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}
.aside-card dd {
	margin: 0;
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

/*
 * Unverified content marker. Deliberately loud — it is a working note asking
 * the site owner to confirm a detail is correct, and a subtle version of that
 * would go unnoticed, which is the one failure mode that matters.
 *
 * Colour is not carrying the message on its own (WCAG 2.2 §1.4.1): the
 * "Needs checking" chip states it in words, and the left rule gives a
 * non-colour visual cue. state-pending is the palette's existing caution
 * token, so this introduces no new colour.
 */
.needs-check {
	position: relative;
	padding: 0.65rem 0.8rem;
	border-inline-start: 3px solid var(--wp--preset--color--state-pending);
	border-radius: 0 8px 8px 0;
	background: var(--wp--preset--color--surface-pending);
	color: var(--wp--preset--color--amber);
	font-weight: 600;
}
.check-flag {
	display: block;
	margin-bottom: 0.3rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--state-error);
}

/* The obfuscated address renders as a contact-form link until the script
   swaps the real one in; both states are plain inline links, so no layout
   shift and nothing to style beyond inheriting the card's link colour. */
.ch-email a {
	overflow-wrap: anywhere;
}


/* ==========================================================================
   SCROLL REVEAL
   ==========================================================================
 * Deliberately an animation with a JS-stamped settled state, not a bare
 * transition. These elements are hidden by default, so anything that stops
 * the motion resolving would leave a whole section blank. `.rv.in.rv-done`
 * (stamped by theme.js ~800ms after reveal) declares the finished state
 * with `animation: none`, so the worst failure is a missing animation
 * rather than lost content. See assets/js/theme.js for the matching logic.
 */
/* The initial hide is gated on `scripting: enabled`, because only script can
   undo it. If JS is disabled, blocked, or simply fails to load — and in any
   browser too old to understand this query — the rule never applies and the
   content is plainly visible. Hiding content in CSS that only JS can reveal
   is how a stylesheet takes a whole page down with it; this is the guard. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
	.rv {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.rv.in {
		animation: ut-rv-in 0.6s var(--ut-ease) both;
	}
	@keyframes ut-rv-in {
		from { opacity: 0; transform: translateY(22px); }
		to { opacity: 1; transform: none; }
	}
	.rv.in.rv-done {
		opacity: 1;
		transform: none;
		animation: none;
	}
}
/* Reduced motion: .rv must never hide anything. The global !important
   duration override above would otherwise collapse the animation while
   leaving `.rv { opacity: 0 }` in force. */
@media (prefers-reduced-motion: reduce) {
	.rv {
		opacity: 1;
	}
}


/* ==========================================================================
   RESPONSIVE
   The house rule is mobile-first, but this design was authored desktop-out;
   this block is the deliberate scale-down pass rather than overrides
   scattered through each component above.
   ========================================================================== */

/* Once the hero stacks, the offset field behind the diagram stops reading
   as a shape and becomes a band cutting through the text. Replace it with
   a panel that belongs to the diagram itself. */
@media (max-width: 900px) {
	.hero::before {
		display: none;
	}
	.hero .dial,
	.hero .model-dial {
		max-width: none;
		padding: 1.5rem 1rem;
		border-radius: 24px;
		background: var(--wp--preset--color--lime-tint);
	}
	.hero .dial svg,
	.hero .model-dial svg {
		max-width: 420px;
		margin-inline: auto;
	}
}

/* Five columns stop holding a readable measure well before the columns
   themselves run out of room, so the timeline flips to a centred vertical
   chain here rather than at a narrower phone breakpoint. Same two
   pseudo-elements: the axis segment becomes the connector running down into
   each dot, and the first item drops its connector so the chain starts at a
   marker rather than a dangling line. */
@media (max-width: 900px) {
	.timeline {
		--tl-axis: 1.75rem;
		display: block;
		text-align: center;
	}
	.timeline li {
		padding: calc(var(--tl-axis) + var(--tl-dot) + 0.6rem) 0 0;
	}
	.timeline li::after {
		inset-inline-start: 50%;
		inset-inline-end: auto;
		top: 0;
		width: 2px;
		height: var(--tl-axis);
		margin-inline-start: -1px;
	}
	/* The connectors all sit between two dots here, so none of them fades. */
	.timeline li:last-child::after {
		background: var(--wp--preset--color--sand);
	}
	.timeline li::before {
		inset-inline-start: 50%;
		top: var(--tl-axis);
		margin-top: 0;
		margin-inline-start: calc(var(--tl-dot) / -2);
	}
	.timeline li:first-child {
		padding-top: calc(var(--tl-dot) + 0.6rem);
	}
	.timeline li:first-child::after {
		content: none;
	}
	.timeline li:first-child::before {
		top: 0;
	}
	.timeline .yr {
		position: static;
		display: block;
	}
	.timeline .ti {
		margin-top: 0.2rem;
	}
	.timeline .ds {
		max-width: 46ch;
		margin-inline: auto;
	}
}

@media (max-width: 820px) {
	.sec {
		padding-block: clamp(2.75rem, 6vw, 4rem);
	}
	.altrow-fig,
	.feature-art {
		aspect-ratio: 16 / 9;
	}
	/* The cover must not become a full-width slab once the grid stacks. */
	.book-fig img {
		max-width: 260px;
		margin-inline: auto;
		transform: none;
	}
	.book-fig:hover img {
		transform: translateY(-4px);
	}
	/* Stacked, the portrait must not become a full-width slab. It keeps its
	   4:5 crop rather than going letterbox — object-position above is tuned
	   for a portrait frame, and a 3:2 one cropped her chin. */
	.portrait {
		max-width: 320px;
		margin-inline: auto;
	}

	/* The lead panel stacks, and its portrait stops being a full-width
	   slab for the same reason as the one on her own page. */
	.person-lead {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
	}
	.person-lead-figure {
		width: 100%;
		max-width: 220px;
	}
	.person-lead .cta-row {
		justify-content: center;
	}
}

@media (max-width: 640px) {
	:root {
		--ut-gutter: 1.15rem;
	}

	.site-utility {
		font-size: 0.75rem;
	}
	/*
	 * On a phone the strip becomes two centred rows — the countries, then
	 * the accounts — rather than one line squeezed to nothing.
	 *
	 * The lead-in stays. It used to be hidden here to buy room back, which
	 * was defensible while it was a grey caption and is not now that it is
	 * the thing carrying the row's meaning: four bare country names under a
	 * logo, with no "MOW in" to explain them, is the state this strip exists
	 * to avoid. The type drops a step instead.
	 */
	.site-utility > .wp-block-group {
		justify-content: center;
		row-gap: 0.35rem;
	}
	.strip-nav,
	.strip-end {
		justify-content: center;
	}
	.strip-lead {
		font-size: 0.8125rem;
	}

	.hero::before {
		height: 46%;
	}
	/* The SVG scales down with its container, so the labels must scale up
	   to stay legible. 23px is the largest at which "Belonging" still fits
	   inside its r=60 disc. */
	.node text {
		font-size: 23px;
	}
	/* Not 23px like the vertex labels: Thinking and Feeling are not in discs
	   of their own and have only the gap between the Doing node and the two
	   lower vertices to sit in. 18px is what keeps them clear of both at the
	   size the diagram is drawn at here. */
	.node-limb text {
		font-size: 18px;
	}
	.node-cap {
		font-size: 13px;
	}
	.hero-meta {
		gap: 0.4rem 0.9rem;
		font-size: 0.6875rem;
	}

	/* One full-width button reads better than two half-width ones. */
	.cta-row {
		gap: 0.6rem;
	}
	.cta-row .btn {
		flex: 1 1 100%;
		justify-content: center;
	}

	.routes {
		margin-top: -2.5rem;
	}
	.route,
	.svc,
	.cred,
	.postcards .wp-block-post {
		padding: 1.35rem;
	}
	.sec-head {
		margin-bottom: 1.75rem;
	}
	.sec-head.row {
		align-items: flex-start;
	}
	.sec-head.row .btn {
		width: 100%;
		justify-content: center;
	}

	.phead {
		padding-block: 2rem;
	}
	.phead::after {
		width: 200px;
		height: 200px;
		inset-inline-end: -70px;
		top: -70px;
		border-width: 24px;
	}

	.tab {
		padding: 0.75rem 0.9rem;
	}
	.tab .hint {
		display: none;
	}
	.panel {
		min-height: 0;
	}

	.owq,
	.result,
	.form-shell,
	.aside-card {
		padding: 1.35rem;
	}
	.q-card {
		padding: 1.15rem;
	}
	.scale {
		gap: 0.3rem;
	}
	.scale button {
		font-size: 0.875rem;
	}
	.bar-row {
		grid-template-columns: 5.5rem 1fr 2.25rem;
		gap: 0.55rem;
	}
	.bar-row .lab {
		font-size: 0.875rem;
	}

	.pub {
		grid-template-columns: 1fr;
		gap: 0.35rem;
		padding: 1rem 0;
	}
	.pub .kind {
		justify-self: start;
	}
	.filter {
		font-size: 0.75rem;
		padding: 0.45rem 0.85rem;
	}

	.book-fig img {
		max-width: 210px;
	}
	.toc li {
		flex-direction: column;
		gap: 0.15rem;
	}
	.toc .ch {
		width: auto;
	}

	.ticker {
		padding-block: 0.7rem;
	}
	.ticker li,
	.ticker ul {
		gap: 1.75rem;
	}
	.ticker li {
		font-size: 0.875rem;
	}
}

/* Touch devices: WCAG 2.2 §2.5.8 target size. */
@media (pointer: coarse) {
	.wp-block-navigation .wp-block-navigation-item__content,
	.filter,
	.tab,
	.scale button {
		min-height: 44px;
	}
	.site-footer a,
	.site-utility a,
	.crumbs a {
		display: inline-block;
		padding-block: 0.25rem;
	}
	/* No hover state to strand on a device that cannot hover. */
	.node,
	.node:hover {
		transform: none;
	}
}

/* ==========================================================================
   MODEL PAGE — "Find your way to Wholeness"
   Intro text beside the aims panel, then the eleven onward links grouped
   into three columns. patterns/page-model.php.
   ========================================================================== */

.mow-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
@media (max-width: 860px) {
	.mow-intro {
		grid-template-columns: minmax(0, 1fr);
	}
}
.mow-intro h2 {
	margin: 0.5rem 0 1.25rem;
}
.mow-intro-main p {
	color: var(--wp--preset--color--stone);
}
.mow-intro-main .mow-intro-lead {
	font-size: clamp(1.125rem, 1.6vw, 1.3rem);
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
}

.mow-aims {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--wp--preset--color--sand);
	border-inline-start: 5px solid var(--wp--preset--color--electric);
	border-radius: 16px;
	background: var(--wp--preset--color--paper);
}
.mow-aims h3 {
	margin: 0 0 0.85rem;
	font-size: 1.25rem;
}
.mow-aims p {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--stone);
}
.mow-aims .mow-aims-key {
	margin-bottom: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--sand);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.mow-explore {
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--wp--preset--color--sand);
}
.mow-explore h3 {
	margin: 0 0 1.5rem;
}
.mow-explore-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
}
.mow-explore-label {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}
.mow-explore ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mow-explore li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--wp--preset--color--sand);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color 0.2s var(--ut-ease), border-color 0.2s var(--ut-ease);
}
.mow-explore li a .arw {
	color: var(--wp--preset--color--clay);
	transition: transform 0.25s var(--ut-ease);
}
.mow-explore li a:hover {
	color: var(--wp--preset--color--clay);
	border-bottom-color: var(--wp--preset--color--clay);
}
.mow-explore li a:hover .arw {
	transform: translateX(4px);
}