/* ==========================================================================
   Mixalon. Charcoal field, orange for action, sand for survey lines and beacons.
   One family (Geist). Square corners throughout.
   ========================================================================== */

:root {
	--charcoal: var(--wp--preset--color--charcoal, #201d1e);
	--charcoal-2: var(--wp--preset--color--charcoal-raised, #2c2829);
	--paper: var(--wp--preset--color--paper, #f7f4ee);
	--paper-2: var(--wp--preset--color--paper-raised, #fdfbf8);
	--wash: var(--wp--preset--color--wash, #eee7da);
	--line: var(--wp--preset--color--line, #ddd6ca);
	--line-dark: #4d4647;
	--muted: var(--wp--preset--color--muted, #5c5657);
	--muted-dark: #c2bbb6;
	--orange: var(--wp--preset--color--orange, #ff6600);
	--orange-hover: #ff7f2a;
	--orange-ink: var(--wp--preset--color--orange-ink, #b04600);
	--sand: var(--wp--preset--color--sand, #c4ac80);
	--sand-ink: var(--wp--preset--color--sand-ink, #72603a);
	--error: #a3260f;

	--body: var(--wp--preset--font-family--body);
	--heading: var(--wp--preset--font-family--heading);
	--display: var(--wp--preset--font-family--display);

	--gutter: clamp(1.25rem, 4vw, 3rem);
	--wide: clamp(71.25rem, 90vw, 96rem); /* grows with the screen: about 5% margin each side, capped at 1536px */
	--measure: 44rem;
	--section-y: clamp(3rem, 5.5vw, 4.75rem);
	--header-h: 4.5rem;

	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--t-press: 160ms;
	--t-base: 220ms;

	--focus: var(--charcoal);
	/* Layers: header 50, lightbox uses the browser top layer. */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; scrollbar-color: var(--sand-ink) var(--paper); }
body { margin: 0; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; caret-color: var(--orange-ink); }
::selection { background: var(--orange); color: var(--charcoal); }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.mx-header, .mx-hero, .mx-pagehead, .mx-footer, .mx-lightbox, .mx-video { --focus: var(--orange); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mx-icon { flex: none; width: 1.25em; height: 1.25em; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block: 0; }
:where(.mx-main, .mx-footer, .mx-header) :where(.is-layout-flow) > * { margin-block-start: 0; }

/* The beacon: a small ringed point that marks a real corner or the start of a line. */
.mx-beacon, .mx-pagehead__inner::before, .mx-pagehead__inner::after, .mx-stand::before, .mx-register__row::after,
.mx-plan::before, .mx-plan::after, .mx-statement::before, .mx-next__link::before {
	content: ""; position: absolute; width: 0.625rem; height: 0.625rem; border: 1.5px solid var(--sand); border-radius: 50%; background: var(--beacon-fill, var(--charcoal)); z-index: 1;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.mx-btn, .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.65rem 1.25rem;
	background: var(--orange); color: var(--charcoal); border: 1.5px solid var(--orange); border-radius: 0;
	font: 700 1rem/1.2 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: transform var(--t-press) var(--ease-out), background-color var(--t-press) ease, color var(--t-press) ease, border-color var(--t-press) ease;
}
.mx-btn .mx-icon { transition: transform var(--t-base) var(--ease-out); }
.mx-btn:active, .wp-block-button__link:active { transform: scale(0.97); }
.mx-btn--line, .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: inherit; border-color: currentColor; }
.mx-btn[disabled] { opacity: 0.6; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
	.mx-btn:hover, .wp-block-button__link:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: var(--charcoal); }
	.mx-btn:hover .mx-icon { transform: translateX(3px); }
	.mx-btn--line:hover { background: var(--paper); border-color: var(--paper); color: var(--charcoal); }
	.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--paper); }
}

/* ==========================================================================
   Header
   ========================================================================== */
.mx-header { position: sticky; top: 0; z-index: 50; background: var(--charcoal); color: var(--paper); padding-inline: var(--gutter); border-bottom: 1px solid var(--line-dark); }
.mx-header__bar { max-width: var(--wide); margin-inline: auto; min-height: var(--header-h); gap: 1.5rem; }
.mx-logo-link { flex: none; margin: 0; }
.mx-logo-link img { width: auto; height: 3.25rem; max-width: none; }
.mx-nav { margin-inline-start: auto; }
.mx-nav .wp-block-navigation__container { gap: clamp(1rem, 1.9vw, 1.9rem); }
.mx-nav .wp-block-navigation-item__content {
	padding: 0.45rem 0; color: var(--paper); font-weight: 500; font-size: 0.9375rem; text-decoration: none; white-space: nowrap;
	background: linear-gradient(var(--sand), var(--sand)) 0 100% / 0 2px no-repeat; transition: background-size var(--t-base) var(--ease-out);
}
.mx-nav .wp-block-navigation-item__content[aria-current="page"] { background-size: 100% 2px; color: var(--sand); }
.mx-nav .wp-block-navigation__submenu-icon { color: var(--sand); margin-left: 0.3rem; }
.mx-nav .has-child .wp-block-navigation__submenu-container {
	min-width: 17.5rem; margin-top: 0; padding: 0.4rem; background: var(--charcoal-2); color: var(--paper); border: 1px solid var(--line-dark);
	box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.7); transform-origin: top left;
}
.mx-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.65rem 0.8rem; background-image: none; display: block; }
.mx-header .wp-block-buttons { flex: none; margin: 0; }
.mx-header .wp-block-button__link { min-height: 2.5rem; padding: 0.5rem 1.1rem; font-size: 0.9375rem; }
@media (pointer: coarse), (max-width: 1099px) { .mx-header .wp-block-button__link { min-height: 2.75rem; } }
@media (hover: hover) and (pointer: fine) {
	.mx-nav .wp-block-navigation-item__content:hover { background-size: 100% 2px; }
	.mx-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background-color: var(--charcoal); color: var(--sand); }
}
@media (prefers-reduced-motion: no-preference) {
	.mx-nav .has-child .wp-block-navigation__submenu-container { transform: translateY(-4px); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
	.mx-nav .has-child:hover > .wp-block-navigation__submenu-container,
	.mx-nav .has-child:focus-within > .wp-block-navigation__submenu-container,
	.mx-nav .has-child [aria-expanded="true"] ~ .wp-block-navigation__submenu-container { transform: none; }
}

/* Seven links need room: below 1100px the menu moves into the overlay. */
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { color: var(--paper); min-width: 2.75rem; min-height: 2.75rem; align-items: center; justify-content: center; }
@media (max-width: 1099px) {
	.mx-header__bar { gap: 0.75rem; }
	.mx-nav { order: 3; margin-inline-start: 0; }
	.mx-header .wp-block-buttons { margin-inline-start: auto; }
	.mx-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.mx-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
}
.mx-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--charcoal); color: var(--paper); padding: 1rem var(--gutter) 2rem; }
.mx-nav .is-menu-open .wp-block-navigation__container { gap: 0; align-items: flex-start; }
.mx-nav .is-menu-open .wp-block-navigation-item__content { font: 600 1.75rem/1.15 var(--heading); letter-spacing: -0.03em; padding: 0.5rem 0; background-image: none; }
.mx-nav .is-menu-open .wp-block-navigation__submenu-container { min-width: 0; padding: 0 0 0.5rem 1rem; background: transparent; border: 0; box-shadow: none; transform: none; }
.mx-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font: 500 1.125rem/1.3 var(--body); padding: 0.55rem 0; color: var(--muted-dark); }
.mx-nav .is-menu-open .wp-block-navigation__submenu-icon { display: none; }
@media (prefers-reduced-motion: no-preference) {
	.mx-nav .wp-block-navigation__responsive-container.is-menu-open { animation: mx-fade var(--t-base) var(--ease-out); }
}
@media (max-width: 420px) { .mx-logo-link img { height: 2.75rem; } .mx-header .wp-block-button__link { padding-inline: 0.9rem; } }

/* ==========================================================================
   Home hero: the aerial, the headline, the locality inset and the project register
   ========================================================================== */
.mx-hero { position: relative; display: grid; grid-template-rows: 1fr auto; margin-top: calc(-1 * var(--header-h) - 1px); padding-top: var(--header-h); min-height: min(80svh, 46rem); background: var(--charcoal); color: var(--paper); overflow: hidden; isolation: isolate; }
.mx-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; container-type: size; }
/* Background video: sized to cover the hero like object-fit would, a little oversized to keep the player's edges out of view. */
.mx-hero__media iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%) scale(1.18); border: 0; pointer-events: none; opacity: 0; transition: opacity 250ms ease; }
.mx-hero__media.is-playing iframe { opacity: 1; transition: opacity 1200ms ease; }
.mx-hero__pause { position: absolute; right: var(--gutter); top: calc(var(--header-h) + 1.25rem); z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; background: rgb(32 29 30 / 0.55); color: var(--paper); border: 1px solid rgb(246 245 243 / 0.45); cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-press) ease; }
.mx-hero__pause:active { transform: scale(0.95); }
.mx-hero__pause .mx-icon:nth-of-type(2), .mx-hero__pause[aria-pressed="true"] .mx-icon:nth-of-type(1) { display: none; }
.mx-hero__pause[aria-pressed="true"] .mx-icon:nth-of-type(2) { display: block; }
@media (hover: hover) and (pointer: fine) { .mx-hero__pause:hover { background: var(--charcoal); } }
.mx-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(32 29 30 / 0.94) 0%, rgb(32 29 30 / 0.78) 36%, rgb(32 29 30 / 0.3) 72%, rgb(32 29 30 / 0.45) 100%), linear-gradient(0deg, var(--charcoal) 0%, rgb(32 29 30 / 0) 34%); }
.mx-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.mx-hero__inner { width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin-inline: auto; padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(1.75rem, 3vw, 2.5rem); display: grid; align-items: end; }
.mx-hero__title { font: 500 clamp(2.75rem, 5.2vw, 4.5rem) / 1 var(--display); letter-spacing: -0.04em; max-width: 16ch; }
.mx-word { display: inline-block; }
.mx-hero__text { margin-top: 1rem; font: 400 clamp(1.0625rem, 1.4vw, 1.25rem) / 1.4 var(--heading); letter-spacing: -0.01em; max-width: 30ch; color: var(--paper); }
.mx-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }


.mx-register { position: relative; background: var(--charcoal); border-top: 1px solid var(--sand); padding-inline: var(--gutter); }
.mx-register__row { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: var(--wide); display: grid; grid-template-columns: 1.15fr 1.25fr 1.5fr 1.25fr 1fr; }
.mx-register__row::after { top: -0.3125rem; right: -0.3125rem; }
.mx-stand { position: relative; border-left: 1px solid var(--line-dark); }
.mx-stand:last-child { border-right: 1px solid var(--line-dark); }
.mx-stand::before { top: -0.3125rem; left: -0.3125rem; }
.mx-stand__link { position: relative; display: grid; align-content: start; gap: 0.1rem; height: 100%; padding: 0.85rem 1rem 1rem; color: var(--paper); text-decoration: none; transition: background-color var(--t-base) ease; }
.mx-stand__link::after { content: ""; position: absolute; inset: -1px 0 auto 0; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base) var(--ease-out); }
.mx-stand__link:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .mx-stand__link:hover { background: var(--charcoal-2); } .mx-stand__link:hover::after { transform: scaleX(1); } }
.mx-stand__link:focus-visible { outline-offset: -3px; }
.mx-stand__name { font: 600 1.0625rem/1.25 var(--heading); letter-spacing: -0.01em; }
.mx-stand__place { font-size: 0.875rem; color: var(--muted-dark); }
.mx-stand__units { margin-top: 0.35rem; font-size: 0.875rem; color: var(--muted-dark); }
.mx-stand__units b { display: block; font: 500 clamp(1.625rem, 2.2vw, 2rem) / 1.05 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--sand); }

@media (max-width: 899px) {
	.mx-hero { min-height: min(82svh, 40rem); }
	.mx-hero__inner { padding-top: clamp(3.5rem, 14vw, 5rem); }
	.mx-hero__media::after { background: linear-gradient(0deg, var(--charcoal) 4%, rgb(32 29 30 / 0.72) 55%, rgb(32 29 30 / 0.55) 100%); }
	/* The register stays one row: it scrolls sideways instead of wrapping. */
	.mx-register { padding-inline: 0; }
	.mx-register__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--sand) var(--charcoal); overscroll-behavior-x: contain; }
	.mx-register__row::after { display: none; }
	.mx-stand { flex: 0 0 min(64vw, 15.5rem); scroll-snap-align: start; }
}

/* ==========================================================================
   Home sections
   ========================================================================== */
.mx-section { padding: var(--section-y) var(--gutter); }
.mx-section > * { max-width: var(--wide); margin-inline: auto; }
.mx-section h2 { margin-bottom: 1.25rem; }
.mx-lead { font-size: var(--wp--preset--font-size--large); line-height: 1.42; }

.mx-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.mx-split__text > * + * { margin-top: 1.25rem; }
.mx-split__text p { max-width: 34rem; }
.mx-split__text p:not(.mx-lead) { color: var(--muted); }
.mx-split__media { margin: 0; }
.mx-split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.mx-handover { background: var(--paper-2); border-block: 1px solid var(--line); }
.mx-handover__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 0.75rem; }
.mx-handover__side { display: grid; grid-template-rows: 1fr 1fr; gap: 0.75rem; min-height: 0; }
.mx-handover__side figure { margin: 0; min-height: 0; overflow: hidden; }
.mx-handover__side img { width: 100%; height: 100%; object-fit: cover; }
.mx-handover .wp-block-buttons { margin-top: 1.5rem; }

.mx-video { position: relative; aspect-ratio: 16 / 9; background: var(--charcoal); overflow: hidden; }
.mx-video__poster, .mx-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.mx-video__play { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 1rem; padding: clamp(1rem, 3vw, 1.75rem); color: var(--paper); text-decoration: none; background: linear-gradient(0deg, rgb(32 29 30 / 0.88) 0%, rgb(32 29 30 / 0) 55%); }
.mx-video__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; background: var(--orange); color: var(--charcoal); transition: transform var(--t-press) var(--ease-out), background-color var(--t-press) ease; }
.mx-video__icon .mx-icon { width: 1.5rem; height: 1.5rem; }
.mx-video__label { display: flex; align-items: center; min-height: 3.5rem; font: 600 1.125rem/1.2 var(--heading); }
.mx-video__play:active .mx-video__icon { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .mx-video__play:hover .mx-video__icon { background: var(--orange-hover); } }

.mx-strip__grid { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 0.75rem; height: clamp(14rem, 30vw, 25rem); }
.mx-strip__grid figure { margin: 0; min-height: 0; }
.mx-strip__grid img { width: 100%; height: 100%; object-fit: cover; }
.mx-strip .wp-block-buttons { margin-top: 1.5rem; justify-content: flex-end; }

.mx-partners-band { padding-block: clamp(1.75rem, 3vw, 2.25rem); }
.mx-partners-band h2 { font-size: 1.375rem; }
.mx-partners-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem 3rem; flex-wrap: wrap; }
.mx-partners-band h2 { margin: 0; }
.mx-logos { display: flex; align-items: center; gap: clamp(1.5rem, 5vw, 4rem); flex-wrap: wrap; }
.mx-logo { margin: 0; }
.mx-logo img { height: 3.25rem; width: auto; object-fit: contain; mix-blend-mode: multiply; }

@media (max-width: 899px) {
	.mx-split, .mx-handover__grid { grid-template-columns: 1fr; }
	.mx-handover__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
	.mx-handover__side img { aspect-ratio: 4 / 3; }
	.mx-strip__grid { grid-template-columns: 1fr 1fr; height: auto; }
	.mx-strip__grid figure:first-child { grid-column: 1 / -1; }
	.mx-strip__grid img { aspect-ratio: 3 / 2; height: auto; }
	.mx-strip .wp-block-buttons { justify-content: flex-start; }
}

/* ==========================================================================
   Page head (and the fact sheet on project pages, set like a drawing's title block)
   ========================================================================== */
.mx-pagehead { background: var(--charcoal); color: var(--paper); padding: clamp(2.25rem, 4.5vw, 3.5rem) var(--gutter) 0; }
.mx-pagehead__inner { position: relative; max-width: var(--wide); margin-inline: auto; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--sand); display: grid; gap: 2rem clamp(2rem, 5vw, 5rem); align-items: end; }
.mx-pagehead__inner::before { bottom: -0.3125rem; left: -0.3125rem; }
.mx-pagehead__inner::after { bottom: -0.3125rem; right: -0.3125rem; }
.mx-pagehead { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.mx-pagehead h1 { font: 500 clamp(2.375rem, 4.4vw, 3.75rem) / 1.04 var(--display); letter-spacing: -0.04em; overflow-wrap: anywhere; }
.mx-pagehead--project .mx-pagehead__inner { grid-template-columns: 1fr; gap: 1.5rem; }
.mx-pagehead__crumb { margin-bottom: 0.5rem; }
.mx-pagehead__crumb a { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; color: var(--sand); text-decoration: none; font-weight: 600; }
.mx-facts { margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.mx-facts__row { display: grid; align-content: start; gap: 0.2rem; padding: 0.1rem 1.25rem; border-left: 1px solid var(--line-dark); }
.mx-facts__row:first-child { border-left: 0; padding-left: 0; }
.mx-facts dt { color: var(--muted-dark); font-size: 0.875rem; }
.mx-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .mx-pagehead__crumb a:hover { color: var(--paper); text-decoration: underline; } }
@media (max-width: 899px) {
	.mx-facts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0; }
	.mx-facts__row:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ==========================================================================
   Page content
   ========================================================================== */
.mx-content { padding: clamp(2.5rem, 4.5vw, 3.5rem) var(--gutter) var(--section-y); }
.mx-content > .wp-block-post-content, .mx-content--plain { max-width: var(--wide); margin-inline: auto; }
.mx-content :where(p, h2, h3, ul, ol) { max-width: var(--measure); }
.mx-content :where(.wp-block-post-content, .mx-prose, .mx-intro, .mx-person__bio, .mx-partner__text, .mx-contact__intro) > * + * { margin-top: 1.25rem; }
.mx-content :where(.wp-block-post-content, .mx-prose) > h2:not(:first-child) { margin-top: 3.5rem; }
.mx-content :where(.wp-block-post-content) > .wp-block-group + .wp-block-group { margin-top: 0; }
.mx-content :where(p, li) a { color: var(--orange-ink); }
.mx-content--plain > * + * { margin-top: 1.5rem; }
.mx-content--plain .wp-block-buttons { display: inline-flex; margin-right: 0.75rem; }

.mx-wide { margin: 3rem 0 0; }
.mx-wide img { width: 100%; }
figure.mx-wide:not(.mx-plan) img { aspect-ratio: 2 / 1; object-fit: cover; }
.mx-content .wp-block-post-content > figure.mx-wide { margin-top: 3rem; }

/* Plans are drawings on white: framed, with beacons at two corners. */
.mx-plan { position: relative; margin: 0; background: #fff; border: 1px solid var(--line); padding: 0.75rem; --beacon-fill: var(--paper); }
.mx-plan::before { top: -0.3125rem; left: -0.3125rem; border-color: var(--sand-ink); }
.mx-plan::after { bottom: -0.3125rem; right: -0.3125rem; border-color: var(--sand-ink); }
.mx-plan img { width: 100%; }
.mx-plan a { display: block; cursor: zoom-in; }
figure.mx-plan.mx-wide { max-width: 56rem; }

.mx-subs { margin-top: 3rem; }
.mx-content .wp-block-post-content > .mx-subs { margin-top: 3rem; }
.mx-sub { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; padding-block: 2.25rem; border-top: 1px solid var(--line); }
.mx-sub:last-child { border-bottom: 1px solid var(--line); }
.mx-sub__text > * + * { margin-top: 0.75rem; }
.mx-sub__text p { color: var(--muted); }

.mx-valueset, .mx-feature { margin-top: 4rem; }
.mx-content .wp-block-post-content > :is(.mx-valueset, .mx-feature) { margin-top: 4rem; }
.mx-valueset h2, .mx-feature h2 { margin-bottom: 1.25rem; }
.mx-values { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: none; }
.mx-values li { padding: 0.5rem 0.95rem; border: 1px solid var(--charcoal); font: 500 1rem/1.3 var(--heading); }
.mx-feature .mx-video { max-width: 56rem; }
.mx-content--project .wp-block-post-content > .wp-block-buttons { margin-top: 2rem; }

.mx-next { border-top: 1px solid var(--line); background: var(--paper-2); }
.mx-next__link { position: relative; display: grid; gap: 0.35rem; max-width: calc(var(--wide) + 2 * var(--gutter)); margin-inline: auto; padding: clamp(1.75rem, 3.5vw, 2.5rem) var(--gutter); color: var(--charcoal); text-decoration: none; }
.mx-next__link::before { display: none; }
.mx-next__label { color: var(--muted); }
.mx-next__name { display: flex; align-items: center; gap: 1rem; font: 500 clamp(1.875rem, 3.4vw, 2.875rem) / 1.05 var(--display); letter-spacing: -0.04em; }
.mx-next__name .mx-icon { width: 0.7em; height: 0.7em; color: var(--orange-ink); transition: transform var(--t-base) var(--ease-out); }
.mx-next__units { color: var(--muted); font-variant-numeric: tabular-nums; }
.mx-next__units b { color: var(--charcoal); }
@media (hover: hover) and (pointer: fine) { .mx-next__link:hover .mx-next__name .mx-icon { transform: translateX(8px); } }
@media (max-width: 767px) { .mx-sub { grid-template-columns: 1fr; } }

/* Our projects: facilities and the full register */
.mx-facilities { list-style: none; margin: 2rem 0 0; padding: 0; columns: 2; column-gap: 3rem; max-width: 48rem; }
.mx-facilities li { position: relative; padding: 0.35rem 0 0.35rem 1.6rem; break-inside: avoid; font-weight: 600; }
.mx-facilities li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.625rem; height: 0.625rem; border: 1.5px solid var(--sand-ink); border-radius: 50%; }
.mx-index { list-style: none; margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0; border-bottom: 1px solid var(--charcoal); max-width: none; }
.mx-index__item { border-top: 1px solid var(--charcoal); }
.mx-index__link { display: grid; grid-template-columns: 13rem minmax(0, 1fr) auto auto; gap: 1.25rem clamp(1.25rem, 3vw, 3rem); align-items: center; padding: 1.5rem 0; color: var(--charcoal); text-decoration: none; transition: background-color var(--t-base) ease; }
.mx-index__plan { display: block; background: #fff; border: 1px solid var(--line); padding: 0.4rem; }
.mx-index__plan img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mx-index__body { display: grid; gap: 0.2rem; }
.mx-index__name { font: 500 clamp(1.25rem, 2vw, 1.75rem) / 1.1 var(--display); letter-spacing: -0.035em; }
.mx-index__place { font-weight: 700; color: var(--sand-ink); }
.mx-index__lead { color: var(--muted); max-width: 30rem; margin-top: 0.25rem; }
.mx-index__units { color: var(--muted); text-align: right; white-space: nowrap; }
.mx-index__units b { display: block; font: 500 clamp(1.5rem, 2.2vw, 2rem) / 1.05 var(--display); letter-spacing: -0.04em; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.mx-index__more { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; color: var(--orange-ink); white-space: nowrap; }
.mx-index__more .mx-icon { transition: transform var(--t-base) var(--ease-out); }
.mx-empty { color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
	.mx-index__link:hover { background: var(--paper-2); }
	.mx-index__link:hover .mx-index__more .mx-icon { transform: translateX(4px); }
}
@media (max-width: 899px) {
	.mx-index__link { grid-template-columns: 7rem minmax(0, 1fr); align-items: start; }
	.mx-index__units { grid-column: 2; text-align: left; }
	.mx-index__units b { display: inline; font-size: 2rem; }
	.mx-index__more { grid-column: 2; min-height: 2.75rem; }
	.mx-index__lead { display: none; }
	.mx-facilities { columns: 1; }
}

/* Who we are */
.mx-people { margin-top: clamp(3rem, 6vw, 4.5rem); }
.mx-content .wp-block-post-content > .mx-people { margin-top: clamp(3rem, 6vw, 4.5rem); }
.mx-person { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.25rem clamp(1.5rem, 5vw, 4.5rem); padding-block: 2.25rem; border-top: 1px solid var(--line); }
.mx-person__id { align-self: start; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.mx-person__id h3 { font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.12; letter-spacing: -0.03em; }
.mx-person__role { margin-top: 0.35rem; font-weight: 700; color: var(--sand-ink); }
.mx-person__bio p { color: var(--muted); }
@media (max-width: 767px) { .mx-person { grid-template-columns: 1fr; } .mx-person__id { position: static; } }

/* Vision and mission */
.mx-statements { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); }
.mx-statement { position: relative; padding-top: 1.5rem; border-top: 1px solid var(--charcoal); --beacon-fill: var(--paper); }
.mx-statement::before { top: -0.3125rem; left: -0.3125rem; border-color: var(--sand-ink); }
.mx-statement h2 { font-size: 1.25rem; color: var(--sand-ink); }
.mx-statement__text { margin-top: 0.75rem; font: 500 clamp(1.375rem, 2.4vw, 1.875rem) / 1.18 var(--heading); letter-spacing: -0.03em; max-width: 24ch; }
.mx-valuesection { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.mx-content .wp-block-post-content > .mx-valuesection { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.mx-value-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 3rem); }
.mx-value { grid-column: span 2; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.mx-value:nth-child(-n + 2) { grid-column: span 3; }
.mx-value p { margin-top: 0.5rem; color: var(--muted); }
@media (max-width: 899px) {
	.mx-statements { grid-template-columns: 1fr; }
	.mx-value-grid { grid-template-columns: 1fr; }
	.mx-value, .mx-value:nth-child(-n + 2) { grid-column: auto; }
}

/* Our partners */
.mx-partner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem clamp(1.5rem, 5vw, 4.5rem); padding-block: clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--line); }
.mx-partner:first-child { border-top: 0; padding-top: 0; }
.mx-partner > .mx-logo { align-self: start; display: grid; place-items: center; min-height: 11rem; padding: 2rem; background: #fff; border: 1px solid var(--line); }
.mx-partner > .mx-logo img { height: auto; max-height: 6.5rem; width: auto; max-width: 100%; mix-blend-mode: normal; }
.mx-partner__text p { color: var(--muted); }
.mx-partner__text h3 { margin-top: 2.25rem; }
@media (max-width: 767px) { .mx-partner { grid-template-columns: 1fr; } .mx-partner > .mx-logo { min-height: 8rem; } }

/* Gallery */
.mx-galleryset + .mx-galleryset { margin-top: clamp(3rem, 6vw, 4.5rem); }
.mx-content .wp-block-post-content > .mx-galleryset + .mx-galleryset { margin-top: clamp(3rem, 6vw, 4.5rem); }
.mx-galleryset h2 { margin-bottom: 1.5rem; max-width: none; }
.mx-content .wp-block-gallery.has-nested-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; }
.mx-content .wp-block-gallery.has-nested-images figure.wp-block-image { width: 100% !important; margin: 0; overflow: hidden; background: var(--line); }
.mx-content .wp-block-gallery.has-nested-images figure.wp-block-image a { display: block; width: 100%; cursor: zoom-in; }
.mx-content .wp-block-gallery.has-nested-images figure.wp-block-image img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 500ms var(--ease-out); }
.mx-content .wp-block-gallery a:focus-visible { outline-offset: -3px; outline-color: var(--orange); }
@media (hover: hover) and (pointer: fine) { .mx-content .wp-block-gallery figure.wp-block-image a:hover img { transform: scale(1.03); } }
.mx-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 0.75rem; }
.mx-videos__item h3 { margin-top: 0.75rem; font-size: 1.25rem; }
.mx-videos .mx-video__label { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 899px) { .mx-videos { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .mx-content .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mx-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 3.5rem 4rem 3rem; border: 0; background: rgb(24 22 23 / 0.97); color: var(--paper); }
.mx-lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 0.75rem; }
.mx-lightbox::backdrop { background: rgb(24 22 23 / 0.97); }
.mx-lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mx-lightbox__cap { color: var(--muted-dark); font-size: 0.9375rem; text-align: center; }
.mx-lightbox__btn { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; background: var(--charcoal-2); color: var(--paper); border: 1px solid var(--line-dark); cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-press) ease; }
.mx-lightbox__btn:active { transform: scale(0.95); }
.mx-lightbox__btn--close { top: 0.5rem; right: 0.5rem; }
.mx-lightbox__btn--prev { left: 0.5rem; top: calc(50% - 1.5rem); }
.mx-lightbox__btn--next { right: 0.5rem; top: calc(50% - 1.5rem); }
@media (hover: hover) and (pointer: fine) { .mx-lightbox__btn:hover { background: var(--orange); color: var(--charcoal); } }
@media (max-width: 599px) { .mx-lightbox { padding: 3.75rem 0.5rem 4.5rem; } .mx-lightbox__btn--prev, .mx-lightbox__btn--next { top: auto; bottom: 0.5rem; } }
@media (prefers-reduced-motion: no-preference) {
	.mx-lightbox[open] { animation: mx-fade 200ms var(--ease-out); }
	.mx-lightbox__img.is-swapping { opacity: 0.4; filter: blur(2px); }
	.mx-lightbox__img { transition: opacity 160ms ease, filter 160ms ease; }
}

/* Contact */
.mx-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; }
.mx-details { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.mx-content .mx-contact__intro > .mx-details { margin-top: 2rem; }
.mx-details li { display: flex; gap: 0.9rem; }
.mx-details .mx-icon { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; color: var(--sand-ink); }
.mx-details__label { display: block; font-weight: 700; }
.mx-details a { display: inline-block; padding-block: 0.3rem; font-variant-numeric: tabular-nums; }
.mx-form-wrap { padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--paper-2); border: 1px solid var(--line); }
.mx-form { display: grid; gap: 1.25rem; }
.mx-form__note { color: var(--muted); font-size: 0.9375rem; }
.mx-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.mx-field { display: grid; gap: 0.4rem; }
.mx-field label { font-weight: 700; }
.mx-field input, .mx-field textarea { width: 100%; padding: 0.6rem 0.8rem; font: inherit; line-height: 1.4; color: var(--charcoal); background: #fff; border: 1.5px solid var(--muted); border-radius: 0; }
.mx-field textarea { resize: vertical; min-height: 7.5rem; }
.mx-field input:focus-visible, .mx-field textarea:focus-visible { outline-offset: 1px; border-color: var(--charcoal); }
.mx-field [aria-invalid="true"] { border-color: var(--error); }
.mx-error { color: var(--error); font-weight: 600; font-size: 0.9375rem; }
.mx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mx-form__foot { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; }
.mx-form__privacy { color: var(--muted); font-size: 0.9375rem; max-width: 24rem; }
.mx-form__status:focus { outline: none; }
.mx-form__done { padding: 1.5rem; border: 1.5px solid var(--charcoal); background: #fff; }
.mx-form__done h3 { margin-bottom: 0.5rem; }
.mx-form__alert { margin-bottom: 1.25rem; padding: 0.9rem 1rem; border: 1.5px solid var(--error); color: var(--error); font-weight: 600; background: #fff; }
@media (max-width: 899px) { .mx-contact { grid-template-columns: 1fr; } }
@media (max-width: 519px) { .mx-field-grid { grid-template-columns: 1fr; } }

/* Posts and archives */
.mx-content--plain .wp-block-post-title a { color: var(--charcoal); }
.wp-block-query-pagination { margin-top: 2rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.mx-footer { background: var(--charcoal); color: var(--paper); padding-inline: var(--gutter); }
.mx-footer > * { max-width: var(--wide); margin-inline: auto; }
.mx-footer__cta-title { font: 500 clamp(1.875rem, 3vw, 2.625rem) / 1.08 var(--display); letter-spacing: -0.04em; }
.mx-footer .mx-footer__cta-text { margin-top: 0.5rem; font: 400 clamp(1.0625rem, 1.4vw, 1.1875rem) / 1.4 var(--heading); color: var(--muted-dark); }
.mx-footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.mx-footer__col > * + * { margin-top: 1.1rem; }
.mx-footer__title { font: 600 1.1875rem/1.2 var(--heading); color: var(--sand); }
.mx-foot-details { display: grid; gap: 0.3rem; justify-items: start; font-style: normal; color: var(--muted-dark); max-width: 22rem; }
.mx-foot-details a, .mx-flinks a, .mx-legal a { color: var(--muted-dark); text-decoration: none; }
.mx-foot-details a { padding-block: 0.25rem; font-variant-numeric: tabular-nums; }
.mx-flinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.mx-flinks a { display: inline-block; padding: 0.35rem 0; }
.mx-footer__legal { border-top: 1px solid var(--line-dark); padding-block: 1.25rem; font-size: 0.9375rem; }
.mx-legal { color: var(--muted-dark); line-height: 2; }
.mx-legal__sep { margin-inline: 0.5rem; color: var(--line-dark); }
.mx-legal a { text-decoration: underline; text-decoration-color: var(--line-dark); }
@media (hover: hover) and (pointer: fine) { .mx-foot-details a:hover, .mx-flinks a:hover, .mx-legal a:hover { color: var(--paper); text-decoration: underline; text-decoration-color: var(--sand); } }
@media (max-width: 899px) { .mx-footer__grid { grid-template-columns: 1fr 1fr; } .mx-footer__col:first-child { grid-column: 1 / -1; } }
@media (pointer: coarse), (max-width: 899px) {
	.mx-flinks a, .mx-foot-details a, .mx-legal a, .mx-details a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0; }
}
@media (max-width: 519px) { .mx-footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Motion. Everything is visible by default; these only run when motion is welcome.
   ========================================================================== */
@keyframes mx-fade { from { opacity: 0; } }
@keyframes mx-word { from { opacity: 0; transform: translateY(0.4em); filter: blur(6px); } }
@keyframes mx-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes mx-settle { from { transform: scale(1.05); } }
@keyframes mx-cover { from { transform: scaleX(1); } }
@keyframes mx-unveil { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

@media (prefers-reduced-motion: no-preference) {
	/* The hero is the one authored moment: the survey line draws, then the stands arrive in order. */
	.mx-hero__img { animation: mx-settle 1600ms var(--ease-out) both; }
	.mx-word { animation: mx-word 800ms var(--ease-out) both; animation-delay: calc(80ms + var(--i) * 70ms); }
	.mx-hero__text { animation: mx-rise 700ms var(--ease-out) 140ms both; }
	.mx-hero__actions { animation: mx-rise 700ms var(--ease-out) 220ms both; }
	.mx-register::before { content: ""; position: absolute; inset: -1px 0 auto 0; height: 1px; background: var(--charcoal); transform: scaleX(0); transform-origin: right; animation: mx-cover 900ms var(--ease-in-out) 200ms backwards; }
	.mx-stand { animation: mx-fade 500ms ease both; animation-delay: calc(520ms + var(--i, 0) * 60ms); }
	.mx-stand:nth-child(2) { --i: 1; } .mx-stand:nth-child(3) { --i: 2; } .mx-stand:nth-child(4) { --i: 3; } .mx-stand:nth-child(5) { --i: 4; }

	/* Photographs unveil as they scroll into view; register rows step in. Only when JavaScript has opted in. */
	.js .mx-reveal { clip-path: inset(0 0 14% 0); opacity: 0; transition: clip-path 800ms var(--ease-out), opacity 500ms ease; }
	.js .mx-reveal.is-in { clip-path: inset(-1rem); opacity: 1; } /* negative inset: corner beacons sit just outside the frame */
	.js [data-mx-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
	.js [data-mx-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; }
}

/* Grid and flex children must not inherit WordPress's flow spacing. */
.wp-site-blocks :is(.mx-statements, .mx-value-grid, .mx-videos, .mx-strip__grid, .mx-handover__grid, .mx-handover__side, .mx-split, .mx-sub, .mx-person, .mx-partner, .mx-contact, .mx-footer__grid, .mx-footer__cta, .mx-logos, .mx-partners-band__inner, .mx-header__bar, .mx-subs, .mx-people, .mx-partners) > * { margin-block-start: 0; }
.mx-content .mx-index__link { color: var(--charcoal); }
@media (max-width: 599px) { .mx-video__label { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; clip-path: inset(50%); } }

/* ==========================================================================
   Second pass: header over the hero, facilities ticker, project showcase, scroll-linked motion
   ========================================================================== */
body.home .mx-header { background: var(--charcoal); }
/* Pull the hero up underneath the sticky header (WordPress zeroes the first block's top margin, so be specific). */
body.home .mx-main .mx-hero { margin-top: calc(-1 * var(--header-h) - 1px); }
@supports (animation-timeline: scroll()) {
	/* Clear over the video at the top of the page, solid once the visitor scrolls. Colour only, so it also runs with reduced motion. */
	body.home .mx-header { animation: mx-header-clear linear both; animation-timeline: scroll(); animation-range: 0 14rem; }
	@keyframes mx-header-clear { from { background-color: rgb(32 29 30 / 0); border-bottom-color: rgb(77 70 71 / 0); } }
}

.mx-facil { padding-block: clamp(1.5rem, 3vw, 2.25rem); background: var(--charcoal); color: var(--paper); overflow: hidden; }
.mx-facil__lead { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto 1.1rem; padding-inline: var(--gutter); color: var(--muted-dark); }
.mx-ticker { display: flex; width: max-content; }
.mx-ticker__track { display: flex; flex: none; list-style: none; margin: 0; padding: 0; }
.mx-ticker__track li { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); padding-right: clamp(1.25rem, 3vw, 2.5rem); font: 500 clamp(1.25rem, 2vw, 1.75rem) / 1.2 var(--display); letter-spacing: -0.03em; white-space: nowrap; }
.mx-ticker__track li::after { content: ""; flex: none; width: 0.625rem; height: 0.625rem; border: 1.5px solid var(--sand); border-radius: 50%; }

.mx-show { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.mx-show__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--charcoal); }
.mx-show__item { border-top: 1px solid var(--charcoal); }
.mx-show__link { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 1rem; align-items: center; padding: 0.9rem 0; color: var(--charcoal); text-decoration: none; }
.mx-show__name { font: 500 clamp(1.1875rem, 1.8vw, 1.5rem) / 1.15 var(--display); letter-spacing: -0.035em; transition: transform var(--t-base) var(--ease-out), color var(--t-base) ease; }
.mx-show__meta { grid-column: 1; color: var(--muted); font-variant-numeric: tabular-nums; transition: transform var(--t-base) var(--ease-out); }
.mx-show__link .mx-icon { grid-column: 2; grid-row: 1 / span 2; width: 1.5rem; height: 1.5rem; color: var(--orange-ink); opacity: 0; transform: translate(-6px, 6px); transition: opacity var(--t-base) ease, transform var(--t-base) var(--ease-out); }
.mx-show__item.is-active .mx-show__name { color: var(--orange-ink); }
.mx-show__item.is-active .mx-icon, .mx-show__link:focus-visible .mx-icon { opacity: 1; transform: none; }
.mx-show__stage { position: sticky; top: calc(var(--header-h) + 1.5rem); aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.mx-show__img { position: absolute; inset: 0.75rem; width: calc(100% - 1.5rem); height: calc(100% - 1.5rem); object-fit: contain; clip-path: inset(0 0 100% 0); transition: clip-path 0s linear 500ms; }
.mx-show__img.is-active { clip-path: inset(0); z-index: 1; transition: clip-path 500ms var(--ease-in-out); }
.mx-projects .wp-block-buttons { margin-top: 2rem; }
@media (hover: hover) and (pointer: fine) {
	.mx-show__item.is-active .mx-show__name, .mx-show__item.is-active .mx-show__meta { transform: translateX(0.6rem); }
}
@media (max-width: 899px) {
	.mx-show { grid-template-columns: 1fr; }
	.mx-show__stage { display: none; }
	.mx-show__item.is-active .mx-show__name { color: inherit; }
	.mx-show__link .mx-icon { opacity: 1; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
	.mx-index__plan { overflow: hidden; }
	.mx-index__plan img { transition: transform 500ms var(--ease-out); }
	.mx-index__link:hover .mx-index__plan img { transform: scale(1.06); }
	.mx-index__name { transition: transform var(--t-base) var(--ease-out); }
	.mx-index__link:hover .mx-index__name { transform: translateX(0.5rem); }
}

@media (prefers-reduced-motion: no-preference) {
	/* Facilities drift past at a constant, unhurried rate and hold still while read. */
	.mx-ticker__track { animation: mx-ticker 38s linear infinite; }
	.mx-ticker:hover .mx-ticker__track, .mx-ticker:focus-within .mx-ticker__track { animation-play-state: paused; }
	@keyframes mx-ticker { to { transform: translateX(-100%); } }

	/* Photographs drift a few percent inside their frames as the page scrolls (compositor only). */
	@supports (animation-timeline: view()) {
		.mx-split__media, figure.mx-wide:not(.mx-plan) { overflow: hidden; }
		.mx-split__media img, figure.mx-wide:not(.mx-plan) img { animation: mx-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
		@keyframes mx-drift { from { transform: scale(1.12) translateY(-4%); } to { transform: scale(1.12) translateY(4%); } }
	}

	/* Pages cross-fade into each other. */
	@view-transition { navigation: auto; }
	::view-transition-old(root) { animation: 160ms ease both mx-vt-out; }
	::view-transition-new(root) { animation: 260ms var(--ease-out) both mx-vt-in; }
	@keyframes mx-vt-out { to { opacity: 0; } }
	@keyframes mx-vt-in { from { opacity: 0; transform: translateY(8px); } }
}
@media (prefers-reduced-motion: reduce) {
	/* Without motion the ticker becomes a plain wrapped list. */
	.mx-ticker { width: auto; max-width: calc(var(--wide) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
	.mx-ticker__track { flex-wrap: wrap; row-gap: 0.4rem; }
	.mx-ticker__track[aria-hidden="true"] { display: none; }
	.mx-ticker__track li { font-size: clamp(1.25rem, 2.4vw, 1.75rem); white-space: normal; }
}

/* The header's template-part wrapper is what must stick: the header itself is as tall as its parent. */
.wp-site-blocks > .wp-block-template-part:first-child { position: sticky; top: 0; z-index: 50; }
.mx-lead { letter-spacing: -0.015em; }

.mx-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 2rem; }
.mx-credit { color: var(--muted-dark); line-height: 2; }

.mx-credit a { color: var(--muted-dark); text-decoration: underline; text-decoration-color: var(--line-dark); }
@media (hover: hover) and (pointer: fine) { .mx-credit a:hover { color: var(--paper); text-decoration-color: var(--sand); } }
@media (pointer: coarse), (max-width: 899px) { .mx-credit a { display: inline-flex; align-items: center; min-height: 2.75rem; } }

.mx-handover__grid { align-items: stretch; }
.mx-handover__grid > .mx-video { align-self: start; }
@media (min-width: 900px) { .mx-handover__side { aspect-ratio: auto; height: 0; min-height: 100%; } }
.mx-footer__col--contact .wp-block-buttons { margin-top: 1.5rem; }

/* Footer bar: small print, so it reads as a quiet line rather than a full-width row. */
.mx-footer__legal { font-size: 0.8125rem; padding-block: 1rem; letter-spacing: 0.005em; }
.mx-legal, .mx-credit { line-height: 1.7; }
.mx-legal__sep { margin-inline: 0.4rem; }

.mx-legal__line { display: block; }
.mx-legal__sep--break { display: none; }
.mx-footer__legal { align-items: end; }

/* Background-video pause: present for those who need it, quiet for everyone else. Sits at the hero's lower right, above the register. */
.mx-hero { grid-template-columns: minmax(0, 1fr); }
.mx-hero__inner { grid-area: 1 / 1; }
.mx-hero__pause { position: relative; inset: auto; grid-area: 1 / 1; align-self: end; justify-self: end; margin: 0 var(--gutter) 0.9rem 0; width: 2rem; height: 2rem; background: rgb(32 29 30 / 0.35); border-color: transparent; opacity: 0.55; transition: opacity var(--t-base) ease, background-color var(--t-base) ease, transform var(--t-press) var(--ease-out); }
.mx-hero__pause::before { content: ""; position: absolute; inset: -0.4rem; }
.mx-hero__pause .mx-icon { width: 0.95rem; height: 0.95rem; }
.mx-hero__pause:focus-visible, .mx-hero__pause[aria-pressed="true"] { opacity: 1; background: rgb(32 29 30 / 0.7); }
@media (hover: hover) and (pointer: fine) { .mx-hero__pause:hover { opacity: 1; background: rgb(32 29 30 / 0.7); } }

/* Project row: on desktop it runs the full width of the band, edge to edge. The first and last stands
   carry the page margin as padding, so their text still lines up with the logo and the Contact button. */
@media (min-width: 900px) {
	.mx-register { padding-inline: 0; --edge: max(var(--gutter), calc((100vw - var(--wide)) / 2)); }
	.mx-register__row { display: flex; max-width: none; }
	.mx-register__row::after { display: none; }
	.mx-stand { flex: 1 1 0; }
	.mx-stand:nth-child(3) { flex-grow: 1.3; }
	/* The outer stands start from the page margin and then take an equal share, so their text gets the same room as the others. */
	.mx-stand:first-child, .mx-stand:last-child { flex-basis: var(--edge); }
	.mx-stand:first-child { border-left: 0; }
	.mx-stand:first-child::before { left: calc(var(--edge) - 0.3125rem); }
	.mx-stand:last-child { border-right: 0; }
	.mx-stand:first-child .mx-stand__link { padding-left: var(--edge); }
	.mx-stand:last-child .mx-stand__link { padding-right: var(--edge); }
}

/* Photographs are 1200px originals: let them fill the wider column only up to their real size, so they stay sharp. */
figure.mx-wide:not(.mx-plan) { max-width: 75rem; }
.mx-split__media img { max-height: 34rem; }

/* ==========================================================================
   Third pass: a warmer sheet and things to do on it.
   Locality plan, filters, tabs, zoomable plans, name index, progress line, back to top.
   ========================================================================== */

/* Softer rules: lists are ruled in the hairline colour, with one firm rule to close them. */
.mx-show__item, .mx-index__item { border-top-color: var(--line); }
.mx-show__list, .mx-index { border-bottom-color: var(--line); }
.mx-statement { border-top-color: var(--sand-ink); }
.mx-values li { border-color: var(--line); background: var(--wash); }
.mx-projects { background: var(--wash); }
.mx-next { background: var(--wash); }
.mx-form-wrap { background: var(--paper-2); }

/* ---- Scroll progress: the survey line under the header draws across as the page is read. ---- */
@supports (animation-timeline: scroll()) {
	.mx-header::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; animation: mx-progress linear both; animation-timeline: scroll(root); }
	@keyframes mx-progress { to { transform: scaleX(1); } }
}

/* ---- Back to top ---- */
.mx-top { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 40; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: var(--charcoal); color: var(--paper); border: 1px solid var(--line-dark); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--t-base) ease, transform var(--t-base) var(--ease-out), background-color var(--t-press) ease, color var(--t-press) ease; --focus: var(--orange); }
.mx-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.mx-top:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .mx-top:hover { background: var(--orange); color: var(--charcoal); border-color: var(--orange); } }
@media print { .mx-top { display: none; } }

/* ---- Chips: filters, tabs and the name index share one control. ---- */
.mx-chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.4rem 1rem; background: transparent; color: var(--charcoal); border: 1.5px solid var(--charcoal); border-radius: 0; font: 600 0.9375rem/1.2 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-press) ease, color var(--t-press) ease, border-color var(--t-press) ease; }
.mx-chip:active { transform: scale(0.97); }
.mx-chip[aria-pressed="true"], .mx-chip[aria-selected="true"], .mx-chip[aria-current="true"] { background: var(--charcoal); color: var(--paper); }
.mx-chip--quiet { border-color: var(--line); }
.mx-chip--quiet[aria-pressed="true"] { border-color: var(--charcoal); }
@media (hover: hover) and (pointer: fine) {
	.mx-chip:not([aria-pressed="true"], [aria-selected="true"], [aria-current="true"]):hover { background: var(--wash); border-color: var(--charcoal); }
}
.mx-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; max-width: none; }

/* ---- Locality plan (home) ---- */
.mx-show { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.mx-show__link { padding: 1rem 0; }
.mx-show__more { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; color: var(--muted); max-width: 32rem; transition: grid-template-rows 320ms var(--ease-out); }
.mx-show__more > span { overflow: hidden; }
.mx-show__more > span::before { content: ""; display: block; height: 0.5rem; }
.mx-show__item.is-active .mx-show__more { grid-template-rows: 1fr; }
.mx-map { margin: 0; }
.mx-map__sheet { position: relative; aspect-ratio: 5 / 4; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; }
.mx-map__grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.mx-map__grid line { stroke: var(--line); stroke-width: 1; }
.mx-map__tick { position: absolute; font-size: 0.75rem; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.mx-map__tick--lon { bottom: 0.4rem; transform: translateX(0.35rem); }
.mx-map__tick--lat { left: 0.4rem; transform: translateY(-1.1em); }
.mx-map__place { position: absolute; padding-left: 0.7rem; font-size: 0.8125rem; line-height: 1; color: var(--muted); white-space: nowrap; transform: translateY(-50%); }
.mx-map__place::before { content: ""; position: absolute; left: -2px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--muted); }
.mx-map__place--office { color: var(--charcoal); font-weight: 600; }
.mx-map__place--office::before { background: var(--charcoal); width: 7px; height: 7px; left: -3px; margin-top: -3.5px; }
.mx-map__scale { position: absolute; right: 1rem; top: 3.4rem; display: flex; align-items: flex-end; justify-content: center; height: 1.3rem; padding-bottom: 0.25rem; border: 1px solid var(--charcoal); border-top: 0; font-size: 0.75rem; line-height: 1; color: var(--charcoal); background: linear-gradient(var(--paper-2), var(--paper-2)) top / 100% 0.75rem no-repeat; }
.mx-map__north { position: absolute; right: 1rem; top: 0.9rem; display: grid; justify-items: center; font: 600 0.75rem/1 var(--body); color: var(--charcoal); }
.mx-map__north::before { content: ""; width: 0; height: 0; margin-bottom: 0.2rem; border: 0.3rem solid transparent; border-bottom: 0.7rem solid var(--charcoal); border-top: 0; }
.mx-map__note { margin-top: 0.6rem; font-size: 0.8125rem; color: var(--muted); }

/* A peg is a beacon you can press. Its hit area is 44px; the ring is what you see. */
.mx-peg { position: absolute; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem; display: grid; place-items: center; color: var(--charcoal); text-decoration: none; z-index: 1; }
.mx-peg::before { content: ""; width: 0.75rem; height: 0.75rem; border: 2px solid var(--sand-ink); border-radius: 50%; background: var(--paper-2); transition: transform var(--t-base) var(--ease-out), background-color var(--t-base) ease, border-color var(--t-base) ease; }
.mx-peg::after { content: ""; position: absolute; width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 1.5px solid var(--orange); opacity: 0; }
.mx-peg.is-active { z-index: 2; }
.mx-peg.is-active::before { background: var(--orange); border-color: var(--charcoal); transform: scale(1.25); }
.mx-peg__label { position: absolute; left: calc(50% + 0.85rem); top: 50%; padding: 0.3rem 0.5rem; background: var(--charcoal); color: var(--paper); font: 600 0.8125rem/1.15 var(--body); white-space: nowrap; opacity: 0; transform: translate(-4px, -50%); pointer-events: none; transition: opacity var(--t-base) ease, transform var(--t-base) var(--ease-out); }
.mx-peg--left .mx-peg__label { left: auto; right: calc(50% + 0.85rem); transform: translate(4px, -50%); }
.mx-peg--top .mx-peg__label { left: 50%; top: auto; bottom: calc(50% + 0.85rem); transform: translate(-50%, 4px); }
.mx-peg--bottom .mx-peg__label { left: 50%; top: calc(50% + 0.85rem); transform: translate(-50%, -4px); }
.mx-peg.is-active .mx-peg__label { opacity: 1; transform: translate(0, -50%); }
.mx-peg--top.is-active .mx-peg__label, .mx-peg--bottom.is-active .mx-peg__label { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: no-preference) {
	.mx-peg.is-active::after { animation: mx-ping 1.8s var(--ease-out) 1; }
	@keyframes mx-ping { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
}
@media (max-width: 899px) {
	.mx-show { grid-template-columns: 1fr; }
	.mx-map { order: -1; }
	.mx-map__place:not(.mx-map__place--office), .mx-map__tick { font-size: 0.6875rem; }
	.mx-map__place--office { font-size: 0; padding: 0; }
	.mx-peg__label { font-size: 0.75rem; }
	.mx-show__more { display: none; }
}

/* ---- Our projects: filter bar ---- */
.mx-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.mx-content .wp-block-post-content > .mx-filter { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.mx-filter__group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mx-content .mx-filter__status { margin: 0 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; max-width: none; }
.mx-filter + .mx-index, .mx-content .wp-block-post-content > .mx-filter + .mx-index { margin-top: 1.5rem; }
.mx-index__item[hidden] { display: none; }
@media (max-width: 699px) { .mx-content .mx-filter__status { margin-left: 0; flex-basis: 100%; } }
@media (prefers-reduced-motion: no-preference) {
	::view-transition-group(*) { animation-duration: 320ms; animation-timing-function: var(--ease-out); }
}

/* ---- Project pages: developments as tabs (stacked rows without JavaScript) ---- */
.mx-tabs__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.mx-subs.is-tabs .mx-sub { border: 0; padding-block: 0; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.mx-subs.is-tabs .mx-sub[hidden] { display: none; }
.mx-subs.is-tabs .mx-sub__text { padding-top: 0.5rem; }
.mx-subs.is-tabs .mx-sub__text h3 { font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -0.03em; }
.mx-subs.is-tabs .mx-sub:focus-visible { outline-offset: 6px; }
@media (prefers-reduced-motion: no-preference) {
	.mx-subs.is-tabs .mx-sub.is-entering .mx-plan { animation: mx-unveil 520ms var(--ease-in-out) backwards; }
	.mx-subs.is-tabs .mx-sub.is-entering .mx-sub__text { animation: mx-rise 420ms var(--ease-out) 80ms both; }
}
@media (max-width: 767px) { .mx-subs.is-tabs .mx-sub { grid-template-columns: 1fr; } }
.mx-plan a { position: relative; }
.mx-plan__hint { position: absolute; right: 0.5rem; bottom: 0.5rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.6rem; background: var(--charcoal); color: var(--paper); font: 600 0.8125rem/1 var(--body); }
.mx-plan__hint .mx-icon { width: 1rem; height: 1rem; }

/* ---- Photo viewer: plans and photographs can be enlarged and moved about ---- */
.mx-lightbox__stage { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; overflow: hidden; touch-action: pan-y; }
.mx-lightbox.can-zoom .mx-lightbox__img { cursor: zoom-in; }
.mx-lightbox__img { user-select: none; -webkit-user-drag: none; transition: transform 320ms var(--ease-out), opacity 160ms ease, filter 160ms ease; }
.mx-lightbox.is-zoomed .mx-lightbox__img { cursor: zoom-out; transform: scale(var(--zoom, 2)); transition: transform 320ms var(--ease-out); }
.mx-lightbox.is-zoomed .mx-lightbox__stage { touch-action: none; }
@media (prefers-reduced-motion: reduce) { .mx-lightbox__img, .mx-lightbox.is-zoomed .mx-lightbox__img { transition: none; } }

/* ---- Gallery: set filter ---- */
.mx-gallerynav { margin-bottom: clamp(2rem, 4vw, 3rem); }
.mx-galleryset[hidden] { display: none; }
.mx-content .wp-block-post-content > .mx-gallerynav + .mx-galleryset { margin-top: 0; }

/* ---- Who we are: the name index stays in reach while the biographies scroll ---- */
.mx-names { position: sticky; top: var(--header-h); z-index: 5; margin-top: clamp(2.5rem, 5vw, 3.5rem); margin-inline: calc(-1 * var(--gutter)); padding: 0.6rem var(--gutter); background: var(--paper); border-block: 1px solid var(--line); }
.mx-content .wp-block-post-content > .mx-names { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.mx-names .mx-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.mx-names .mx-chips::-webkit-scrollbar { display: none; }
.mx-content .mx-names .mx-chip { color: var(--charcoal); }
.mx-content .mx-names .mx-chip[aria-current="true"] { color: var(--paper); }
.mx-names .mx-chip { border-color: transparent; min-height: 2.5rem; padding-inline: 0.8rem; font-weight: 500; }
.mx-names .mx-chip[aria-current="true"] { background: var(--charcoal); color: var(--paper); }
.mx-names + .mx-people, .mx-content .wp-block-post-content > .mx-names + .mx-people { margin-top: 0; }
.mx-names + .mx-people .mx-person:first-child { border-top: 0; }
.mx-person { scroll-margin-top: calc(var(--header-h) + 4.5rem); }
.mx-names ~ .mx-people .mx-person__id { top: calc(var(--header-h) + 5.5rem); }
@media (pointer: coarse) { .mx-names .mx-chip { min-height: 2.75rem; } }

/* ---- Contact details: copy to the clipboard ---- */
.mx-copy { margin-left: 0.6rem; padding: 0.2rem 0.5rem; min-height: 1.75rem; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 0; font: 600 0.8125rem/1 var(--body); cursor: pointer; position: relative; transition: transform var(--t-press) var(--ease-out), background-color var(--t-press) ease, color var(--t-press) ease, border-color var(--t-press) ease; }
.mx-copy::before { content: ""; position: absolute; inset: -0.5rem; }
.mx-copy:active { transform: scale(0.97); }
.mx-copy.is-done { background: var(--charcoal); border-color: var(--charcoal); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .mx-copy:not(.is-done):hover { border-color: var(--charcoal); color: var(--charcoal); } }

/* ---- Values (vision page): the one in hand comes forward ---- */
@media (hover: hover) and (pointer: fine) {
	.mx-value { transition: border-color var(--t-base) ease; }
	.mx-value h3 { transition: color var(--t-base) ease, transform var(--t-base) var(--ease-out); }
	.mx-value:hover { border-top-color: var(--orange-ink); }
	.mx-value:hover h3 { color: var(--orange-ink); transform: translateX(0.4rem); }
	.mx-handover__side img { transition: transform 600ms var(--ease-out); }
	.mx-handover__side figure:hover img { transform: scale(1.04); }
}

/* ==========================================================================
   Version 2.1: video choice, keyboard pegs, print
   ========================================================================== */
/* Layers: back to top 40, header 50, video choice 60. */
.mx-consent { position: fixed; left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 60; width: min(24rem, calc(100vw - 2rem)); padding: 1.1rem 1.25rem 1rem; background: var(--charcoal); color: var(--paper); border: 1px solid var(--line-dark); border-top: 3px solid var(--orange); box-shadow: 0 1.25rem 2.5rem -1rem rgb(32 29 30 / 0.55); --focus: var(--orange); }
.mx-consent__title { font: 600 1.0625rem/1.25 var(--heading); letter-spacing: -0.01em; }
.mx-consent__text { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted-dark); }
.mx-consent__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.mx-consent__actions .mx-btn { flex: 1 1 auto; min-height: 2.75rem; padding: 0.5rem 0.9rem; font-size: 0.9375rem; }
.mx-consent__links { margin-top: 0.7rem; font-size: 0.8125rem; }
.mx-consent__links a { color: var(--sand); }
@media (max-width: 599px) { .mx-consent { width: auto; right: 4.75rem; } }
@media (prefers-reduced-motion: no-preference) { .mx-consent { animation: mx-rise 420ms var(--ease-out) 600ms both; } }
.mx-legal__consent { padding: 0; background: none; border: 0; font: inherit; color: var(--muted-dark); text-decoration: underline; text-decoration-color: var(--line-dark); text-underline-offset: 0.2em; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .mx-legal__consent:hover { color: var(--paper); text-decoration-color: var(--sand); } }
@media (pointer: coarse), (max-width: 899px) { .mx-legal__consent { min-height: 2.75rem; } }

/* Pegs can be reached with the keyboard: the ring is drawn round the beacon, not the 44px hit area. */
.mx-peg:focus-visible { outline: none; }
.mx-peg:focus-visible::before { outline: 3px solid var(--charcoal); outline-offset: 3px; }

/* ---- Print: the words, numbers and drawings on white paper; nothing that only works on a screen. ---- */
@media print {
	@page { margin: 16mm 14mm; }
	html, body { background: #fff !important; color: #000; font-size: 11pt; }
	.wp-site-blocks > .wp-block-template-part:first-child, .mx-header { position: static !important; }
	.mx-header { background: #fff !important; border-bottom: 1px solid #000; padding: 0 0 4mm; animation: none !important; }
	.mx-header::after, .mx-nav, .mx-header .wp-block-buttons, .mx-hero__media, .mx-hero__pause, .mx-hero__actions, .mx-filter, .mx-tabs__list, .mx-gallerynav, .mx-names, .mx-copy, .mx-top, .mx-consent, .mx-lightbox, .mx-facil, .mx-videos, .mx-handover__grid > .mx-video, .mx-videos .mx-video, .mx-feature, .mx-next, .mx-form-wrap, .mx-plan__hint, .mx-footer__col:not(.mx-footer__col--contact), .mx-footer .wp-block-buttons, .mx-credit, .mx-legal__consent, .mx-show__link .mx-icon, .mx-index__more, .mx-pagehead__crumb, .mx-content .wp-block-buttons, .mx-section .wp-block-buttons { display: none !important; }
	.mx-logo-link img { filter: invert(1) grayscale(1); height: 12mm; }
	.mx-hero, .mx-pagehead, .mx-register, .mx-footer, .mx-projects, .mx-handover { background: #fff !important; color: #000 !important; min-height: 0 !important; margin-top: 0 !important; }
	.mx-hero { display: block; padding-top: 6mm; }
	.mx-hero *, .mx-pagehead *, .mx-register *, .mx-footer * { color: #000 !important; }
	.mx-hero__title { font-size: 26pt; max-width: none; }
	.mx-pagehead h1 { font-size: 24pt; }
	.mx-pagehead__inner { border-bottom-color: #000; }
	.mx-register { border-top: 1px solid #000; }
	.mx-register__row { display: grid !important; grid-template-columns: repeat(5, 1fr); overflow: visible !important; padding: 0 !important; }
	.mx-stand__link { padding: 3mm 2mm !important; }
	.mx-section, .mx-content { padding: 6mm 0 !important; }
	.mx-pagehead, .mx-footer, .mx-register, .mx-header { padding-inline: 0 !important; }
	/* Everything a script would have tucked away is printed. */
	.mx-subs.is-tabs .mx-sub[hidden], .mx-index__item[hidden], .mx-galleryset[hidden] { display: grid !important; }
	.mx-galleryset[hidden] { display: block !important; }
	.mx-subs.is-tabs .mx-sub { padding-block: 5mm; border-top: 1px solid #999; }
	.mx-show__more { grid-template-rows: 1fr !important; }
	.mx-peg__label { opacity: 1 !important; transform: translate(0, -50%) !important; background: #fff; color: #000; border: 1px solid #000; font-size: 7pt; padding: 0.5mm 1mm; }
	.mx-peg--top .mx-peg__label, .mx-peg--bottom .mx-peg__label { transform: translate(-50%, 0) !important; }
	.js .mx-reveal, .js [data-mx-reveal] { opacity: 1 !important; clip-path: none !important; transform: none !important; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.mx-word, .mx-hero__text, .mx-stand { opacity: 1 !important; transform: none !important; filter: none !important; }
	.mx-split__media img, figure.mx-wide img { transform: none !important; }
	.mx-person__id { position: static; }
	.mx-person, .mx-sub, .mx-index__item, .mx-value, .mx-partner, figure, .mx-map { break-inside: avoid; }
	h2, h3 { break-after: avoid; }
	.mx-content .wp-block-gallery.has-nested-images { grid-template-columns: repeat(4, 1fr); }
	.mx-values li { background: #fff; border-color: #000; }
	/* Where a link goes is printed beside it, for body links only. */
	.mx-content :where(p, li) a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
	.mx-footer__grid { display: block; padding-block: 5mm 2mm; border-top: 1px solid #000; }
	.mx-footer__cta-title { font-size: 14pt; }
	.mx-footer__legal { border-top: 0; padding-block: 0; }
	.mx-legal__settings { display: none; }
	.mx-show__name, .mx-show__meta { transform: none !important; color: #000 !important; }
	.mx-handover__grid { display: block; }
	.mx-handover__side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; min-height: 0; gap: 3mm; }
	.mx-handover__side img { aspect-ratio: 3 / 2; height: auto; }
}

/* Version 2.2: the hero video can be a file on this site. It covers the hero like the photograph does. */
.mx-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity 250ms ease; pointer-events: none; }
.mx-hero__media.is-playing video { opacity: 1; transition: opacity 900ms ease; }
@media print { .mx-hero__media video { display: none; } }

/* A photograph shown whole: its own proportions, no crop and no drift inside the frame (people's heads stay in the picture). */
figure.mx-wide.mx-wide--whole:not(.mx-plan) img { aspect-ratio: auto; object-fit: contain; height: auto; animation: none; transform: none; }

/* The pause button stays out of the picture while the video plays. It appears when the pointer is over the hero,
   when it is reached with the keyboard, and whenever the video is paused (so it can be started again).
   Touch screens have no pointer to hover with, so there it stays faintly visible. */
.mx-hero__pause[aria-pressed="false"] { opacity: 0; }
.mx-hero__pause[aria-pressed="false"]:focus-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
	.mx-hero:hover .mx-hero__pause[aria-pressed="false"] { opacity: 0.55; }
	.mx-hero .mx-hero__pause[aria-pressed="false"]:hover { opacity: 1; }
}
@media (hover: none), (pointer: coarse) { .mx-hero__pause[aria-pressed="false"] { opacity: 0.55; } }

/* ==========================================================================
   Cookie consent: a panel at the bottom right. While it is open, back to top moves to the left so the two never overlap.
   ========================================================================== */
.mx-consent { left: auto; right: max(1rem, env(safe-area-inset-right)); width: min(26rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; }
.mx-consent__prefs { margin-top: 0.9rem; border-top: 1px solid var(--line-dark); }
.mx-consent__cat { padding: 0.7rem 0; border-bottom: 1px solid var(--line-dark); }
.mx-consent__cat label { display: flex; align-items: center; gap: 0.6rem; min-height: 1.75rem; font-weight: 600; cursor: pointer; }
.mx-consent__cat input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--orange); }
.mx-consent__cat em { margin-left: auto; font-style: normal; font-weight: 600; font-size: 0.8125rem; color: var(--sand); }
.mx-consent__cat p { margin-top: 0.3rem; font-size: 0.8125rem; line-height: 1.45; color: var(--muted-dark); }
.mx-consent__actions .mx-btn { font-size: 0.875rem; padding-inline: 0.8rem; }
@media (max-width: 599px) { .mx-consent { width: auto; left: max(1rem, env(safe-area-inset-left)); right: max(1rem, env(safe-area-inset-right)); } }
body:has(.mx-consent:not([hidden])) .mx-top { right: auto; left: max(1rem, env(safe-area-inset-left)); }
@media (max-width: 599px) { body:has(.mx-consent:not([hidden])) .mx-top { display: none; } }

/* ==========================================================================
   Locality plan, second drawing: a dark sheet. Sand grid and distance rings, orange for whichever project is in hand,
   and a line from the head office out to each of its developments.
   ========================================================================== */
.mx-map__sheet { background: var(--charcoal); border-color: var(--charcoal); color: var(--paper); box-shadow: 0 1.5rem 2.5rem -1.75rem rgb(32 29 30 / 0.55); --focus: var(--orange); }
.mx-map__grid .mx-map__gridline { stroke: var(--line-dark); stroke-width: 0.2; }
.mx-map__grid .mx-map__ring { fill: none; stroke: var(--sand); stroke-width: 0.25; stroke-dasharray: 0.9 0.9; opacity: 0.5; }
.mx-map__grid .mx-map__ring:first-of-type { fill: rgb(196 172 128 / 0.07); }
.mx-map__grid .mx-map__link { stroke: var(--sand); stroke-width: 0.22; opacity: 0.16; stroke-dasharray: 1; stroke-dashoffset: 0; transition: opacity var(--t-base) ease, stroke var(--t-base) ease; }
.mx-map__grid .mx-map__link.is-active { stroke: var(--orange); stroke-width: 0.4; opacity: 1; }
.mx-map__tick { color: var(--muted-dark); }
.mx-map__ringlabel { position: absolute; padding: 0.1rem 0.3rem; background: var(--charcoal); color: var(--sand); font-size: 0.6875rem; line-height: 1; white-space: nowrap; transform: translate(-50%, -50%); font-variant-numeric: tabular-nums; }
.mx-map__place { color: var(--muted-dark); }
.mx-map__place::before { background: var(--muted-dark); }
.mx-map__place--office { color: var(--paper); }
.mx-map__place--office::before { background: var(--sand); width: 9px; height: 9px; left: -4px; margin-top: -4.5px; box-shadow: 0 0 0 3px var(--charcoal), 0 0 0 4px var(--sand); }
.mx-map__north { color: var(--sand); }
.mx-map__north::before { border-bottom-color: var(--sand); }
.mx-peg::before { background: var(--charcoal); border-color: var(--sand); }
.mx-peg.is-active::before { background: var(--orange); border-color: var(--paper); transform: scale(1.35); }
.mx-peg__label { background: var(--paper); color: var(--charcoal); box-shadow: 0 0.5rem 1rem -0.5rem rgb(0 0 0 / 0.6); }
.mx-peg:focus-visible::before { outline-color: var(--orange); }
@media (hover: hover) and (pointer: fine) {
	.mx-peg:not(.is-active):hover::before { border-color: var(--orange); transform: scale(1.2); }
}
@media (prefers-reduced-motion: no-preference) {
	/* The line runs out from the head office to the development each time a project is picked. */
	.mx-map__grid .mx-map__link.is-active { animation: mx-run 620ms var(--ease-out) both; }
	@keyframes mx-run { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
	/* The active beacon keeps a slow, quiet pulse; the rings and pegs arrive once when the plan is first seen. */
	.mx-peg.is-active::after { animation: mx-ping 2.6s var(--ease-out) infinite; }
	.js .mx-show:not(.is-seen) .mx-map__ring { opacity: 0; transform: scale(0.6); }
	.mx-map__grid .mx-map__ring { transform-box: fill-box; transform-origin: center; transition: opacity 700ms ease, transform 900ms var(--ease-out); }
	.mx-map__ring:nth-of-type(2) { transition-delay: 120ms; }
	.mx-map__ring:nth-of-type(3) { transition-delay: 240ms; }
	.js .mx-show:not(.is-seen) .mx-peg { opacity: 0; transform: translateY(6px); }
	.mx-peg { transition: opacity 500ms ease, transform 600ms var(--ease-out); }
}
@media (max-width: 899px) { .mx-map__ringlabel { font-size: 0.625rem; } }
@media print {
	.mx-map__sheet { background: #fff !important; border-color: #000; box-shadow: none; }
	.mx-map__grid .mx-map__gridline { stroke: #ccc; }
	.mx-map__grid .mx-map__ring { stroke: #666; fill: none !important; opacity: 1; }
	.mx-map__grid .mx-map__link { stroke: #999 !important; opacity: 1 !important; }
	.mx-map__ringlabel { background: #fff; color: #000; }
	.mx-map__place, .mx-map__place--office, .mx-map__tick, .mx-map__north { color: #000 !important; }
	.mx-map__place--office::before { box-shadow: none; background: #000; }
	.mx-peg::before { background: #fff; border-color: #000; }
}

/* The basemap: real roads, towns and boundaries, laid over the charcoal sheet. "Screen" blending drops its black,
   so only the sand linework shows; it is kept quiet so the pegs, rings and labels stay in front. */
.mx-map__base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; mix-blend-mode: screen; opacity: 0.5; pointer-events: none; }
.mx-map__grid .mx-map__gridline { stroke-opacity: 0.55; }
.mx-map__place { text-shadow: 0 0 4px var(--charcoal), 0 0 2px var(--charcoal); color: var(--paper); font-weight: 600; }
.mx-map__tick { text-shadow: 0 0 4px var(--charcoal), 0 0 2px var(--charcoal); }
.mx-map__note a { color: var(--orange-ink); }
@media (prefers-reduced-motion: no-preference) {
	.js .mx-show:not(.is-seen) .mx-map__base { opacity: 0; }
	.mx-map__base { transition: opacity 1200ms ease; }
}
@media print { .mx-map__base { display: none; } }