/*
 * Max Design
 * ---------------------------------------------------------------------------
 * Hand-written stylesheet for the 2026 redesign. The design was authored as a
 * review canvas showing four breakpoints side by side; here they are ordinary
 * media queries, so one is shown at a time.
 *
 * Breakpoints, and the frame each set of numbers came from:
 *   Desktop           >= 1200px   (designed at 1440)
 *   Tablet landscape  1024-1199   (designed at 1194)
 *   Tablet portrait   768-1023    (designed at 834)
 *   Mobile            <= 767      (designed at 390, verified 360-430)
 *
 * Contents
 *   1.  Tokens
 *   2.  Base and resets
 *   3.  Layout primitives
 *   4.  Type utilities
 *   5.  Buttons, chips, arrows
 *   6.  Header and navigation
 *   7.  Footer
 *   8.  Newsletter band
 *   9.  Project CTA band
 *   10. Home
 *   11. Services, including the plan study
 *   12. Our Work
 *   13. Project detail and the collage
 *   14. Team
 *   15. Journal index and article
 *   16. FAQ
 *   17. Contact
 *   18. Forms, states, accessibility
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Colour. These are the whole palette: nothing else is introduced. */
	--ink: #1c1a17;
	--ink-2: #241f1e;
	--cream: #faf8f5;
	--cream-2: #f3efe6;
	--bronze: #a9834b;
	--bronze-light: #cfc2aa;
	--sand: #cfc7b6;
	--border: #e4ddd0;
	--border-2: #ece7dd;
	--body: #3f3d3a;
	--body-2: #4a463f;
	--muted: #6f685c;
	--muted-2: #8a8073;
	--muted-3: #a09884;
	--on-dark-1: #e0d8c8;
	--on-dark-2: #d8cdb8;
	--on-dark-3: #cfc7b6;
	--on-dark-4: #b9b0a0;
	--on-dark-nav: #e8e2d6;
	--footer-rule: #3c3532;
	--footer-rule-2: #2e2926;
	--rule-dark: #4a423d;
	--placeholder: #e4ddd0;

	/*
	 * The ground the drawn portraits sit on. Straight from the design file,
	 * where every one of them is #efeae0 - a warmer, lighter sand than the
	 * general placeholder. It matters because the drawings are multiplied
	 * into it rather than laid on top.
	 */
	--portrait-ground: #efeae0;
	--error: #a4342a;

	/* Type. */
	--display: "Tenor Sans", "Times New Roman", serif;
	--text: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Rhythm. Overridden per breakpoint below. */
	--pad-x: 64px;
	--sec-y: 100px;
	--gap: 20px;
	--rule-w: 64px;
	--col-gap: 72px;

	/* The bar that returns on scroll, and what anything pinned below it clears. */
	--md-bar-h: 68px;

	/*
	 * Anything scrolled to by an anchor stops short of the returning bar. Set
	 * on the scrolling box itself, so it applies to a link followed from
	 * another page as much as to one clicked on this one.
	 */
	scroll-padding-top: var(--md-bar-h);

	/* The collage gutter, which differs at every breakpoint. */
	--collage-gutter: 24px;
	--collage-h: 430px;

	/* The plan study: one number re-authors the whole drawing. */
	--md-plan-unit: 1.5px;
	--plan-wall: 5px;
	--plan-part: 4px;
	--plan-treads: 8;

	--ease: cubic-bezier(0.2, 0, 0.2, 1);
	--speed: 240ms;
}

@media (max-width: 1199px) {
	:root {
		--pad-x: 40px;
		--sec-y: 60px;
		--gap: 21px;
		--rule-w: 56px;
		--col-gap: 40px;
		--md-bar-h: 60px;
		--collage-gutter: 20px;
		--collage-h: 340px;
		--md-plan-unit: 1.16px;
		--plan-wall: 4px;
		--plan-part: 3px;
	}
}

@media (max-width: 1023px) {
	:root {
		--collage-gutter: 18px;
		--collage-h: 280px;
		--md-plan-unit: 0.92px;
		--plan-wall: 4px;
		--plan-part: 3px;
	}
}

@media (max-width: 767px) {
	:root {
		--pad-x: 20px;
		--sec-y: 42px;
		--gap: 14px;
		--rule-w: 44px;
		--col-gap: 24px;
		--md-bar-h: 56px;
		--collage-gutter: 12px;
		--collage-h: 240px;
		--md-plan-unit: 0.38px;
		--plan-wall: 3px;
		--plan-part: 2px;
		--plan-treads: 5;
	}
}

/*
 * Below 60% the stair carries five treads rather than eight: at that size the
 * eight-tread version reads as a smudge rather than a stair.
 */
@media (max-width: 1023px) {
	:root {
		--plan-treads: 5;
	}
}

/*
 * The home page is drawn on a slightly wider gutter than the rest of the site
 * (72px against 64px). Kept as designed rather than normalised - see NOTES.md.
 */
@media (min-width: 1200px) {
	body.md-home {
		--pad-x: 72px;
	}
}

/* ==========================================================================
   2. Base and resets
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--cream);
	color: var(--body);
	font-family: var(--text);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.72;

	/*
	 * No horizontal clipping here on purpose.
	 *
	 * The design's stylesheet carried overflow-x: hidden on the body as a
	 * catch-all. Measured across all ten templates, nothing actually runs wide:
	 * the two things that do - the hero slideshow and the category carousel -
	 * are already clipped by their own containers, and the document's scroll
	 * width matches the window exactly on every page without it.
	 *
	 * It was worth removing rather than leaving alone. Anything clipping
	 * between a sticky element and the window it sticks to keeps the browser
	 * from handling that element the cheap way, which is the usual reason a
	 * pinned bar shivers while the page scrolls under it. Taking it off also
	 * means the disciplines strip pins in older browsers, which ignored the
	 * clip and fell back to hidden - and hidden stops sticky working outright.
	 *
	 * If a horizontal scrollbar ever appears, the fix is to clip whatever
	 * component is running wide, not to put this back.
	 */
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
}

/* --- Discouraging copying -------------------------------------------------
 *
 * Switched on in Appearance → Customize → Max Design. It stops the ordinary
 * ways of taking things: selecting a paragraph, dragging a photograph off the
 * page, the right-click menu over an image. It is a deterrent and not a lock -
 * a picture has to be sent to the visitor to be looked at at all.
 *
 * Anything a visitor types stays selectable, because a field you cannot select
 * inside is a field you cannot correct.
 */
.md-protect {
	-webkit-user-select: none;
	user-select: none;
}

.md-protect input,
.md-protect textarea,
.md-protect select,
.md-protect [contenteditable] {
	-webkit-user-select: text;
	user-select: text;
}

.md-protect img,
.md-protect .md-img {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

img {
	height: auto;
}

h1,
h2,
h3,
h4 {
	font-family: var(--display);
	font-weight: 400;
	color: var(--ink);
	margin: 0;
	text-wrap: pretty;
}

p {
	margin: 0 0 1.2em;
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Radius is 0 everywhere in this design except genuinely circular elements. */
.md-round {
	border-radius: 50%;
}

/* Standing in for an image that has not been uploaded yet. */
.md-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--placeholder);
}

.md-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.md-ratio {
	position: relative;
	overflow: hidden;
	background: var(--placeholder);
}

.md-ratio > img,
.md-ratio > .md-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.md-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--ink);
	color: var(--cream);
	padding: 14px 22px;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.md-skip:focus {
	left: 12px;
	top: 12px;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.md-wrap {
	padding-left: var(--pad-x);
	padding-right: var(--pad-x);
}

.md-section {
	padding-top: var(--sec-y);
	padding-bottom: var(--sec-y);
}

.md-section--flush-top {
	padding-top: 0;
}

.md-section--flush-bottom {
	padding-bottom: 0;
}

.md-section--dark {
	background: var(--ink);
	color: var(--on-dark-3);
}

.md-section--ink2 {
	background: var(--ink-2);
	color: var(--on-dark-3);
}

.md-hairline-top {
	border-top: 1px solid var(--border);
}

/* The two-column head used above most sections: text left, control right. */
.md-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin-bottom: 44px;
}

@media (max-width: 767px) {
	.md-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
		margin-bottom: 26px;
	}
}

/* ==========================================================================
   4. Type utilities
   ========================================================================== */

.md-rule {
	display: block;
	width: var(--rule-w);
	height: 1px;
	background: var(--bronze);
	margin-bottom: 20px;
}

.md-rule--light {
	background: var(--bronze-light);
}

.md-eyebrow {
	display: block;
	font-family: var(--text);
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--bronze);
	margin-bottom: 12px;
}

.md-eyebrow--light {
	color: var(--bronze-light);
}

.md-eyebrow--muted {
	color: var(--muted-3);
	letter-spacing: 0.26em;
	font-size: 9.5px;
}

.md-meta {
	font-family: var(--text);
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--muted-2);
}

/* Section headline: 58px on desktop, stepping down through the breakpoints. */
.md-h-section {
	font-size: 58px;
	line-height: 1;
}

.md-h-page {
	font-size: 52px;
	line-height: 1.04;
}

.md-lead {
	font-family: var(--display);
	font-size: 24px;
	line-height: 1.5;
	color: var(--ink);
}

.md-body {
	font-size: 16px;
	line-height: 1.72;
	color: var(--body);
}

.md-body--sm {
	font-size: 15px;
	line-height: 1.68;
}

@media (max-width: 1199px) {
	.md-eyebrow {
		font-size: 9.5px;
		letter-spacing: 0.3em;
	}

	.md-h-section {
		font-size: 40px;
		line-height: 1.08;
	}

	.md-h-page {
		font-size: 44px;
	}

	.md-body,
	.md-body--sm {
		font-size: 14px;
		line-height: 1.85;
	}

	.md-lead {
		font-size: 21px;
	}
}

@media (max-width: 767px) {
	.md-eyebrow {
		font-size: 9px;
		letter-spacing: 0.3em;
		margin-bottom: 10px;
	}

	.md-rule {
		margin-bottom: 14px;
	}

	.md-h-section {
		font-size: 30px;
		line-height: 1.1;
	}

	.md-h-page {
		font-size: 31px;
	}

	.md-body,
	.md-body--sm {
		font-size: 13px;
		line-height: 1.85;
	}

	.md-lead {
		font-size: 20px;
		line-height: 1.45;
	}

	.md-meta {
		font-size: 8.5px;
		letter-spacing: 0.24em;
	}
}

/* ==========================================================================
   5. Buttons, chips, arrows
   ========================================================================== */

.md-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 15px 32px;
	border: 1px solid var(--sand);
	font-family: var(--text);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ink);
	background: transparent;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.md-btn:hover,
.md-btn:focus-visible {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--cream);
}

.md-btn--solid {
	background: var(--cream);
	border-color: var(--cream);
	color: var(--ink);
	padding: 16px 38px;
}

.md-btn--solid:hover,
.md-btn--solid:focus-visible {
	background: var(--bronze-light);
	border-color: var(--bronze-light);
	color: var(--ink);
}

.md-btn--onDark {
	border-color: var(--rule-dark);
	color: var(--cream);
}

.md-btn--onDark:hover,
.md-btn--onDark:focus-visible {
	background: var(--cream);
	border-color: var(--cream);
	color: var(--ink);
}

/* The 2x2 grid of capability boxes under each service block. */
.md-chips {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--border);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	margin-top: 38px;
}

.md-chip {
	background: var(--cream);
	padding: 22px 26px;
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
}

@media (max-width: 1199px) {
	.md-chip {
		padding: 16px 18px;
		font-size: 9.5px;
		letter-spacing: 0.2em;
	}
}

@media (max-width: 767px) {
	.md-chip {
		padding: 14px 14px;
		font-size: 9px;
		letter-spacing: 0.18em;
	}
}

/* Circular carousel controls. */
.md-arrows {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}

.md-arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--sand);
	color: #8d7a5e;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	line-height: 1;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

.md-arrow--fill {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--cream);
}

.md-arrow:hover:not(:disabled),
.md-arrow:focus-visible {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--cream);
}

.md-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.md-arrow--onDark {
	border-color: #5a4f49;
	color: var(--on-dark-4);
}

.md-arrow--onDark.md-arrow--fill {
	background: var(--cream);
	border-color: var(--cream);
	color: var(--ink);
}

.md-arrow--onDark:hover:not(:disabled),
.md-arrow--onDark:focus-visible {
	background: var(--cream);
	border-color: var(--cream);
	color: var(--ink);
}

/*
 * The design draws these at 40px on both tablets, but the accessibility pass
 * asks for tap targets of at least 44px. Both hold: the visible circle is 40px
 * as drawn, and an invisible 2px skirt takes the touch area back to 44px.
 */
@media (min-width: 768px) and (max-width: 1199px) {
	.md-arrow {
		width: 40px;
		height: 40px;
		position: relative;
		font-size: 14px;
	}

	.md-arrow::after {
		content: "";
		position: absolute;
		inset: -2px;
	}
}

/* ==========================================================================
   6. Header and navigation
   ========================================================================== */

/*
 * Two treatments, and the rule that picks between them: the bar is laid over
 * the hero when the page opens on a dark or photographic hero, and is a solid
 * ink bar only when the page opens on cream (the Journal index and Contact).
 * The body class that decides this is set in inc/setup.php.
 */

.md-header {
	position: relative;
	z-index: 20;
}

.md-nav-overlaid .md-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
}

.md-nav-solid .md-header {
	background: var(--ink);
}

.md-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding-top: 34px;
	padding-bottom: 34px;
}

.md-home .md-header__inner {
	padding-top: 38px;
	padding-bottom: 38px;
}

/* The home hero puts the mark in the middle of the photograph, not up here. */
.md-home.md-nav-overlaid .md-header .md-logo {
	visibility: hidden;
}

.md-logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.md-logo__img {
	display: block;
	width: 132px;
	height: auto;
}

.md-nav {
	display: flex;
	gap: 40px;
	align-items: center;
}

.md-home .md-nav {
	gap: 44px;
}

.md-nav__link {
	font-family: var(--text);
	font-size: 10.5px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--on-dark-nav);
	white-space: nowrap;
}

.md-nav__link:hover,
.md-nav__link:focus-visible,
.md-nav__link.is-current {
	color: var(--bronze-light);
}

/*
 * Over a photograph the links need a little help. The hero's own top scrim
 * carries most of the weight; this is the rest of it.
 */
.md-header--over-photo .md-nav__link,
.md-header--over-photo .md-logo__img {
	text-shadow: 0 1px 12px rgba(18, 17, 15, 0.5);
}

/* --- The bar that returns on scroll --------------------------------------
 *
 * A slim companion to the drawn header, not a replacement for it. It slides
 * down once the drawn one has gone, and slides away again at the top of the
 * page, so the composition the design draws over each hero is never disturbed.
 * Sitting outside the flow means it can appear and disappear without moving a
 * single pixel of the page underneath it.
 */

.md-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	background: var(--ink);
	transform: translateY(-100%);
	visibility: hidden;

	/*
	 * The rule under the bar is a shadow rather than a border on purpose. A
	 * border would make the bar 69px tall where the strip beneath it is told to
	 * stop at 68, and a one-pixel disagreement between two pinned edges lands
	 * on a fraction of a real pixel on any screen not running at 100% - most
	 * Windows laptops - which shows up as a shimmer along the join. A shadow
	 * draws the same line without taking up any height.
	 */
	box-shadow: 0 1px 0 var(--footer-rule-2);
}

html.md-js body.md-motion .md-bar {
	transition:
		transform 340ms cubic-bezier(0.2, 0, 0.2, 1),
		visibility 0s linear 340ms;
}

.md-bar.is-in {
	transform: none;
	visibility: visible;
}

html.md-js body.md-motion .md-bar.is-in {
	transition: transform 340ms cubic-bezier(0.2, 0, 0.2, 1);
}

.md-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	height: var(--md-bar-h);
}

/* Smaller than the drawn mark: this bar is a utility, not the masthead. */
.md-bar .md-logo__img {
	width: 108px;
}

@media (prefers-reduced-motion: reduce) {
	html.md-js body.md-motion .md-bar,
	html.md-js body.md-motion .md-bar.is-in {
		transition: none;
	}
}

/* The hamburger, and the panel it opens. */
.md-burger {
	display: none;
	width: 44px;
	height: 44px;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 5px;
	flex: 0 0 auto;
}

.md-burger__line {
	display: block;
	height: 1px;
	width: 22px;
	background: var(--cream);
}

/*
 * The middle line is the short, bronze one. It used to be picked out as "the
 * third child", which is only the middle line because the button's first child
 * is a hidden label for screen readers - count without that label and the
 * short line becomes the bottom one. Counting from the end is right either way.
 */
.md-burger__line:nth-last-child(2) {
	width: 14px;
	background: var(--bronze-light);
}

/*
 * The panel arrives, it does not switch on. It is kept in the page but
 * invisible, so the same transition can run both ways: opening, the ink
 * settles down over the page and the contents follow one after another,
 * the way the words on a hero do; closing is quicker, and everything goes
 * together. visibility is what actually hides it from taps and readers -
 * delayed on the way out so the fade can finish first.
 */
.md-menu {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--ink);
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-14px);
	transition:
		opacity 260ms cubic-bezier(0.4, 0, 0.6, 1),
		transform 260ms cubic-bezier(0.4, 0, 0.6, 1),
		visibility 0s linear 260ms;
}

.md-menu.is-open {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition:
		opacity 480ms cubic-bezier(0.2, 0, 0.2, 1),
		transform 560ms cubic-bezier(0.2, 0, 0.2, 1),
		visibility 0s;
}

/* Each part starts a little low and faint, and is brought in on its own beat. */
body.md-motion .md-menu__top,
body.md-motion .md-menu__link,
body.md-motion .md-menu__cta,
body.md-motion .md-menu__studio {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 180ms cubic-bezier(0.4, 0, 0.6, 1),
		transform 180ms cubic-bezier(0.4, 0, 0.6, 1);
}

body.md-motion .md-menu.is-open .md-menu__top,
body.md-motion .md-menu.is-open .md-menu__link,
body.md-motion .md-menu.is-open .md-menu__cta,
body.md-motion .md-menu.is-open .md-menu__studio {
	opacity: 1;
	transform: none;
	transition:
		opacity 700ms cubic-bezier(0.2, 0, 0.2, 1),
		transform 700ms cubic-bezier(0.2, 0, 0.2, 1);
}

body.md-motion .md-menu.is-open .md-menu__top               { transition-delay: 120ms; }
body.md-motion .md-menu.is-open .md-menu__link:nth-child(1) { transition-delay: 220ms; }
body.md-motion .md-menu.is-open .md-menu__link:nth-child(2) { transition-delay: 290ms; }
body.md-motion .md-menu.is-open .md-menu__link:nth-child(3) { transition-delay: 360ms; }
body.md-motion .md-menu.is-open .md-menu__link:nth-child(4) { transition-delay: 430ms; }
body.md-motion .md-menu.is-open .md-menu__link:nth-child(5) { transition-delay: 500ms; }
body.md-motion .md-menu.is-open .md-menu__link:nth-child(6) { transition-delay: 570ms; }
body.md-motion .md-menu.is-open .md-menu__link:nth-child(n+7) { transition-delay: 640ms; }
body.md-motion .md-menu.is-open .md-menu__cta               { transition-delay: 700ms; }
body.md-motion .md-menu.is-open .md-menu__studio            { transition-delay: 780ms; }

.md-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
}

.md-menu__close {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-family: var(--display);
	font-size: 24px;
	color: var(--bronze-light);
}

.md-menu__nav {
	padding: 22px 20px 0;
}

.md-menu__nav-inner {
	border-bottom: 1px solid var(--footer-rule);
}

.md-menu__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 44px;
	padding: 20px 0;
	border-top: 1px solid var(--footer-rule);
	font-family: var(--display);
	font-size: 29px;
	color: var(--cream);
}

.md-menu__link.is-current {
	color: var(--bronze-light);
}

.md-menu__link::after {
	content: "\2192";
	font-family: var(--text);
	font-size: 9px;
	font-weight: 300;
	letter-spacing: 0.2em;
	color: #6f6255;
}

.md-menu__cta {
	padding: 30px 20px 0;
}

.md-menu__cta .md-btn {
	width: 100%;
	padding: 17px;
	font-size: 9.5px;
	background: var(--cream);
	border-color: var(--cream);
	color: var(--ink);
}

.md-menu__studio {
	padding: 34px 20px 40px;
}

.md-menu__studio-label {
	font-size: 8.5px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--muted-2);
	margin-bottom: 10px;
}

.md-menu__studio-value {
	font-family: var(--display);
	font-size: 19px;
	color: var(--cream);
	line-height: 1.6;
}

.md-menu__social {
	margin-top: 26px;
	display: flex;
	gap: 8px;
}

.md-menu__social .md-social__link {
	width: 44px;
	height: 44px;
}

.md-menu__social .md-social__link svg {
	width: 20px;
	height: 20px;
}

@media (max-width: 1199px) {
	.md-header__inner,
	.md-home .md-header__inner {
		padding-top: 26px;
		padding-bottom: 26px;
	}

	.md-nav-solid .md-header__inner {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.md-logo__img {
		width: 104px;
	}

	.md-bar .md-logo__img {
		width: 96px;
	}

	.md-nav,
	.md-home .md-nav {
		gap: 26px;
	}

	.md-nav__link {
		font-size: 9.5px;
		letter-spacing: 0.22em;
	}
}

@media (max-width: 767px) {
	.md-header__inner,
	.md-nav-solid .md-header__inner,
	.md-home .md-header__inner {
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.md-home.md-nav-overlaid .md-header .md-logo {
		visibility: visible;
	}

	.md-logo__img,
	.md-bar .md-logo__img {
		width: 86px;
	}

	.md-nav {
		display: none;
	}

	.md-burger {
		display: flex;
	}
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

.md-footer {
	background: var(--ink);
	color: var(--muted-2);
	padding: 52px var(--pad-x) 44px;
}

.md-footer__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--footer-rule);
}

.md-footer__top .md-logo__img {
	width: 100px;
}

.md-footer__nav {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}

.md-footer__nav .md-nav__link {
	font-size: 10px;
	color: var(--on-dark-3);
}

.md-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 26px;
	padding-top: 22px;
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted-2);
}

.md-footer__right {
	display: flex;
	align-items: center;
	gap: 26px;
}

.md-social {
	display: flex;
	gap: 10px;
}

.md-social__link {
	width: 34px;
	height: 34px;
	border: 1px solid var(--footer-rule);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bronze-light);
	transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.md-social__link:hover,
.md-social__link:focus-visible {
	border-color: var(--bronze-light);
	color: var(--cream);
}

.md-social__link svg {
	width: 16px;
	height: 16px;
	display: block;
}

.md-footer__mobile-nav,
.md-footer__mobile-meta {
	display: none;
}

/* The "· Privacy" beside the copyright: the same small type, quietly linked. */
.md-footer__sep {
	margin: 0 6px;
}

.md-footer__legal {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 200ms ease;
}

.md-footer__legal:hover,
.md-footer__legal:focus-visible {
	border-bottom-color: currentColor;
}

@media (max-width: 1199px) {
	.md-footer {
		padding: 40px var(--pad-x) 34px;
	}

	.md-footer__nav {
		gap: 24px;
	}

	/* 28px circles with 13px glyphs on both tablets, as drawn. */
	.md-social__link {
		width: 28px;
		height: 28px;
	}

	.md-social__link svg {
		width: 13px;
		height: 13px;
	}
}

@media (max-width: 767px) {
	.md-footer {
		padding: 34px var(--pad-x) 30px;
	}

	.md-footer__top {
		display: block;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.md-footer__top .md-logo__img {
		width: 92px;
	}

	.md-footer__nav {
		display: none;
	}

	.md-footer__mobile-nav {
		display: block;
		margin-top: 22px;
	}

	.md-footer__mobile-nav .md-nav__link {
		display: flex;
		align-items: center;
		min-height: 44px;
		border-top: 1px solid var(--footer-rule-2);
		font-size: 10px;
		color: var(--on-dark-3);
	}

	.md-footer__bottom {
		display: block;
		padding-top: 20px;
		border-top: 1px solid var(--footer-rule);
	}

	.md-footer__right {
		display: block;
	}

	/*
	 * The row is nudged left so the visible circles line up with the logo above
	 * it, rather than the invisible tap targets doing so.
	 */
	.md-footer .md-social {
		margin: 0 0 18px -7px;
		gap: 2px;
	}

	.md-footer .md-social__link {
		width: 44px;
		height: 44px;
		border: 0;
		position: relative;
	}

	.md-footer .md-social__link::before {
		content: "";
		position: absolute;
		inset: 7px;
		border: 1px solid var(--footer-rule);
		border-radius: 50%;
	}

	.md-footer .md-social__link svg {
		width: 14px;
		height: 14px;
	}

	.md-footer__mobile-meta {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		font-size: 8.5px;
		letter-spacing: 0.2em;
	}

	.md-footer__place {
		text-align: right;
	}

	.md-footer__desktop-meta {
		display: none;
	}
}

/* ==========================================================================
   8. Newsletter band
   ========================================================================== */

/* Home, the Journal index and FAQ only. */
.md-news {
	position: relative;
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--ink);
	text-align: center;
	padding: 60px var(--pad-x);
}

.md-news__bg {
	position: absolute;
	inset: 0;
}

.md-news__bg img,
.md-news__bg .md-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.md-news__scrim {
	position: absolute;
	inset: 0;
	background: rgba(28, 26, 23, 0.6);
}

.md-news__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 760px;
}

.md-news__headline {
	font-size: 54px;
	line-height: 1;
	color: var(--cream);
}

.md-news__text {
	font-size: 16.5px;
	color: var(--on-dark-1);
	margin: 16px 0 32px;
}

.md-news__form {
	display: flex;
	justify-content: center;
	gap: 0;
	flex-wrap: wrap;
}

.md-news__input {
	width: 360px;
	max-width: 100%;
	padding: 16px 22px;
	background: rgba(250, 248, 245, 0.1);
	border: 1px solid rgba(250, 248, 245, 0.4);
	color: var(--cream);
	font-family: var(--text);
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 0.06em;
	border-radius: 0;
}

.md-news__input::placeholder {
	color: var(--sand);
}

.md-news__input:focus {
	outline: 2px solid var(--bronze-light);
	outline-offset: 2px;
}

/* The bot check in the newsletter band is invisible, and its box takes no room: the field and button stay side by side. */
.md-news__form {
	position: relative;
}

/*
 * Out of the row altogether: Cloudflare gives even an invisible widget a
 * fixed height of its own, which stretched the field and the button to
 * match. Pinned to a corner of the form it takes part in nothing.
 */
.md-turnstile--news {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;
	overflow: visible;
	pointer-events: none;
}

.md-news__submit {
	padding: 16px 34px;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--text);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	min-height: 44px;
	transition: background var(--speed) var(--ease);
}

.md-news__submit:hover,
.md-news__submit:focus-visible {
	background: var(--bronze-light);
}

@media (max-width: 1199px) {
	.md-news {
		min-height: 330px;
	}

	.md-news__headline {
		font-size: 38px;
	}

	.md-news__text {
		font-size: 14px;
	}
}

@media (max-width: 767px) {
	.md-news {
		min-height: 320px;
		padding: 44px var(--pad-x);
	}

	.md-news__headline {
		font-size: 28px;
	}

	.md-news__form {
		flex-direction: column;
		gap: 10px;
		width: 100%;
	}

	.md-news__input {
		width: 100%;
	}

	.md-news__submit {
		width: 100%;
	}
}

/* ==========================================================================
   9. Project CTA band
   ========================================================================== */

/* Services and Our Work only. */
.md-cta {
	position: relative;
	min-height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--ink);
	text-align: center;
	padding: 60px var(--pad-x);
}

.md-cta__bg {
	position: absolute;
	inset: 0;
}

.md-cta__bg img,
.md-cta__bg .md-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.md-cta__scrim {
	position: absolute;
	inset: 0;
	background: rgba(28, 26, 23, 0.68);
}

.md-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
}

.md-cta__headline {
	font-size: 52px;
	line-height: 1.04;
	color: var(--cream);
}

.md-cta__text {
	font-size: 16px;
	color: var(--on-dark-1);
	margin: 18px 0 32px;
}

.md-cta__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	flex-wrap: wrap;
}

.md-cta__email {
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--on-dark-2);
}

.md-cta__email:hover,
.md-cta__email:focus-visible {
	color: var(--cream);
}

@media (max-width: 1199px) {
	.md-cta {
		min-height: 330px;
	}

	.md-cta__headline {
		font-size: 38px;
	}

	.md-cta__text {
		font-size: 14px;
	}
}

@media (max-width: 767px) {
	.md-cta {
		min-height: 320px;
		padding: 44px var(--pad-x);
	}

	.md-cta__headline {
		font-size: 28px;
	}

	.md-cta__actions {
		flex-direction: column;
		gap: 18px;
	}

	.md-cta__actions .md-btn {
		width: 100%;
	}
}

/* ==========================================================================
   10. Home
   ========================================================================== */

/*
 * On phones the navigation stops being an overlay on every template and sits in
 * a solid bar above the hero instead, as drawn. Declared here because the home
 * hero is the one that most obviously depends on it.
 */
@media (max-width: 767px) {
	.md-nav-overlaid .md-header {
		position: relative;
		background: var(--ink);
	}

	/*
	 * With the bar above it rather than over it, a full-screen hero would run
	 * on below the screen by the bar's height - and the headline, which sits at
	 * the foot of the hero, with it. The script measures the bar into
	 * --md-head-h; the fallback is the bar's usual height on a phone.
	 */
	.md-nav-overlaid .md-home-hero {
		height: calc(100svh - var(--md-head-h, 72px));
	}
}

.md-hero {
	position: relative;
	overflow: hidden;
	background: var(--ink);
}

.md-hero__media,
.md-hero__media img,
.md-hero__media video,
.md-hero__media .md-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.md-hero__scrim {
	position: absolute;
	inset: 0;
}

.md-hero__inner {
	position: relative;
	z-index: 2;
	height: 100%;
}

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

/*
 * The opening fills the screen, whatever the screen: the categories only come
 * into view once a visitor starts to scroll. It was a fixed 820px, which on a
 * tall monitor left the next section showing under it. svh is the height with a
 * phone's address bar showing, so nothing jumps as that bar hides; the vh line
 * before it is for browsers that do not know svh. The smaller widths keep a
 * floor rather than a fixed height for the same reason.
 */
.md-home-hero {
	height: 100vh;
	height: 100svh;
	min-height: 640px;
}

.md-home-hero__scrim-v {
	background: linear-gradient(to bottom, rgba(28, 26, 23, 0.62), rgba(28, 26, 23, 0.12) 34%, rgba(28, 26, 23, 0.72));
}

.md-home-hero__scrim-h {
	background: linear-gradient(to right, rgba(28, 26, 23, 0.78), rgba(28, 26, 23, 0.55) 24%, rgba(28, 26, 23, 0.12) 46%, rgba(28, 26, 23, 0) 62%);
}

.md-home-hero__mark {
	position: absolute;
	left: var(--pad-x);
	top: 50%;
	transform: translateY(-58%);
	line-height: 0;
}

.md-home-hero__mark img {
	display: block;
	width: 352px;
	max-width: 62vw;
	height: auto;
}

.md-home-hero__foot {
	position: absolute;
	left: var(--pad-x);
	right: var(--pad-x);
	bottom: 72px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
}

.md-home-hero__est {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-bottom: 4px;
	flex: 0 0 auto;
}

.md-home-hero__est-rule {
	width: 52px;
	height: 1px;
	background: var(--bronze-light);
}

.md-home-hero__est-text {
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--bronze-light);
}

.md-home-hero__copy {
	text-align: right;
	max-width: 560px;
}

.md-home-hero__headline {
	font-size: 82px;
	line-height: 0.96;
	color: var(--cream);
}

.md-home-hero__tagline {
	font-size: 18px;
	line-height: 1.5;
	color: #ded7c9;
	margin: 24px 0 0;
}

@media (max-width: 1199px) {
	.md-home-hero {
		min-height: 560px;
	}

	.md-home-hero__scrim-v {
		background: linear-gradient(to bottom, rgba(28, 26, 23, 0.7), rgba(28, 26, 23, 0.12) 34%, rgba(28, 26, 23, 0.72));
	}

	.md-home-hero__mark {
		top: 48%;
		transform: translateY(-50%);
	}

	.md-home-hero__mark img {
		width: 290px;
	}

	.md-home-hero__foot {
		bottom: 44px;
	}

	.md-home-hero__est {
		gap: 18px;
		margin-bottom: 0;
	}

	.md-home-hero__est-rule {
		width: 42px;
	}

	.md-home-hero__est-text {
		font-size: 9px;
		letter-spacing: 0.28em;
	}

	.md-home-hero__copy {
		max-width: 460px;
	}

	.md-home-hero__headline {
		font-size: 54px;
		line-height: 1.04;
	}

	.md-home-hero__tagline {
		font-size: 13px;
		line-height: 1.7;
		margin-top: 16px;
	}
}

@media (max-width: 1023px) {
	.md-home-hero {
		min-height: 600px;
	}
}

@media (max-width: 767px) {
	.md-home-hero {
		min-height: 520px;
	}

	/* A single vertical wash: there is no room for the horizontal one. */
	.md-home-hero__scrim-v {
		background: linear-gradient(to bottom, rgba(28, 26, 23, 0.5), rgba(28, 26, 23, 0.2) 40%, rgba(28, 26, 23, 0.86));
	}

	.md-home-hero__scrim-h,
	.md-home-hero__mark {
		display: none;
	}

	.md-home-hero__foot {
		bottom: 34px;
		display: block;
	}

	.md-home-hero__est {
		display: none;
	}

	.md-home-hero__copy {
		text-align: left;
		max-width: none;
	}

	.md-home-hero__headline {
		font-size: 36px;
		line-height: 1.1;
	}

	.md-home-hero__tagline {
		font-size: 12.5px;
		margin-top: 16px;
	}
}

/* --- Category carousel --------------------------------------------------- */

/*
 * Seven cards on a strip that slides. One slot is wider than the rest and
 * carries the featured treatment; moving on glides the strip along by one card
 * while the card arriving in that slot widens into it and the one leaving
 * narrows back down. Everything moves together over the same beat, so it reads
 * as one motion rather than a jump.
 *
 * The strip carries a second copy of the cards so it can keep travelling in one
 * direction forever; when it reaches the copy it is snapped back with the
 * transition off, at a moment when the two are identical on screen.
 */

.md-cards {
	/* Cards across the row; the script raises it on a wide, short screen (see .md-cards__item). */
	--cards-n: 5;
	overflow: hidden;
}

.md-cards__track {
	display: flex;
	gap: var(--gap);
	align-items: flex-end;
	will-change: transform;
}

html.md-js .md-cards__track {
	transition: transform var(--cards-ease-ms, 820ms) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.md-cards__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	/*
	 * Five across, always: four ordinary cards and the featured one, which is
	 * 1.423 times as wide (323 to 227, as drawn). They were fixed pixel widths,
	 * right at the 1440px the design was drawn at - but on a wide monitor all
	 * seven fitted with room to spare, and the loop's first card showed again at
	 * the far end. As shares of the row, five across holds at any width, the
	 * featured card grows with the screen, and which of the five is featured
	 * is the script's business (the fourth, toward the arrows).
	 *
	 * On a wide, short monitor five across would be taller than the screen, so
	 * the script raises --cards-n (six, seven...) until the featured card fits
	 * under the heading with its caption; the row still fills the width.
	 */
	flex: 0 0 calc((100% - (var(--gap) * (var(--cards-n) - 1))) / (var(--cards-n) + 0.423));
	min-width: 0;
}

html.md-js .md-cards__item {
	transition: flex-basis var(--cards-ease-ms, 820ms) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.md-cards__frame {
	position: relative;
	aspect-ratio: 3 / 4.4;
	overflow: hidden;
	background: var(--placeholder);
	display: block;
}

.md-cards__frame img,
.md-cards__frame .md-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(0.85);
	transition: filter var(--cards-ease-ms, 820ms) ease;
}

.md-cards__caption {
	display: block;
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--muted-3);
	transition: color var(--cards-ease-ms, 820ms) ease;
}

/*
 * The overlay and the name stay in the markup at all times and simply fade,
 * so nothing pops into existence mid-glide.
 */
.md-cards__overlay {
	display: block;
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(28, 26, 23, 0.62), rgba(28, 26, 23, 0) 55%);
	opacity: 0;
	transition: opacity var(--cards-ease-ms, 820ms) ease;
}

.md-cards__label {
	display: block;
	position: absolute;
	left: 26px;
	right: 26px;
	bottom: 24px;
	z-index: 1;
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity var(--cards-ease-ms, 820ms) ease,
		transform var(--cards-ease-ms, 820ms) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.md-cards__name {
	font-family: var(--display);
	font-size: 34px;
	line-height: 1;
	color: var(--cream);
	display: block;
}

.md-cards__cta {
	display: block;
	font-size: 9px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--on-dark-2);
	margin-top: 8px;
}

.md-cards__caption-active {
	display: none;
}

/* --- The featured slot --------------------------------------------------- */

.md-cards__item.is-featured {
	flex-basis: calc(((100% - (var(--gap) * (var(--cards-n) - 1))) / (var(--cards-n) + 0.423)) * 1.423);
}

.md-cards__item.is-featured .md-cards__frame img,
.md-cards__item.is-featured .md-cards__frame .md-placeholder {
	filter: none;
}

.md-cards__item.is-featured .md-cards__overlay {
	opacity: 1;
}

.md-cards__item.is-featured .md-cards__label {
	opacity: 1;
	transform: none;
}

.md-cards__item.is-featured .md-cards__caption {
	color: var(--bronze);
	font-weight: 400;
}

.md-cards__item.is-featured .md-cards__caption-default {
	display: none;
}

.md-cards__item.is-featured .md-cards__caption-active {
	display: inline;
}

.md-cards__swipe {
	display: none;
}

@media (max-width: 1199px) {
	/* Four across; the featured card is the first one and keeps its width. */
	.md-cards__item {
		flex: 0 0 calc((100% - (var(--gap) * 3)) / 4);
	}

	.md-cards__item.is-featured {
		flex-basis: calc((100% - (var(--gap) * 3)) / 4);
	}

	.md-cards__frame {
		aspect-ratio: 3 / 4.2;
	}

	.md-cards__label {
		left: 20px;
		right: 20px;
		bottom: 18px;
	}

	.md-cards__name {
		font-size: 26px;
	}
}

@media (max-width: 1023px) {
	/* Three across. */
	.md-cards__item,
	.md-cards__item.is-featured {
		flex-basis: calc((100% - (var(--gap) * 2)) / 3);
	}

	.md-cards__name {
		font-size: 23px;
	}
}

@media (max-width: 767px) {
	.md-cards__item,
	.md-cards__item.is-featured {
		flex-basis: 68%;
	}

	.md-cards__frame {
		aspect-ratio: 3 / 3.9;
	}

	.md-cards__name {
		font-size: 23px;
	}

	.md-cards__swipe {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
		gap: 16px;
	}

	.md-cards__swipe-text {
		font-size: 8.5px;
		font-weight: 300;
		letter-spacing: 0.24em;
		text-transform: uppercase;
		color: var(--muted-3);
	}

	.md-cards__head-arrows {
		display: none;
	}

	.md-cards__swipe .md-arrow {
		border-color: var(--border-2);
		color: var(--sand);
	}

	.md-cards__swipe .md-arrow--fill {
		background: var(--ink);
		border-color: var(--ink);
		color: var(--cream);
	}
}

@media (prefers-reduced-motion: reduce) {
	html.md-js .md-cards__track,
	html.md-js .md-cards__item,
	.md-cards__frame img,
	.md-cards__overlay,
	.md-cards__label,
	.md-cards__caption {
		transition: none;
	}
}

/* --- Statement and numbers ----------------------------------------------- */

.md-statement {
	border-top: 1px solid var(--border);
	padding-top: 96px;
	text-align: center;
}

.md-statement__headline {
	font-size: 78px;
	line-height: 1;
	max-width: 900px;
	margin: 0 auto;
}

.md-statement__body {
	margin: 34px auto 0;
	max-width: 840px;
}

.md-stats {
	margin-top: 80px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--border);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.md-stat {
	background: var(--cream);
	padding: 38px 42px 34px;
	display: flex;
	align-items: baseline;
	gap: 18px;
}

.md-stat__value {
	font-family: var(--display);
	font-size: 60px;
	line-height: 1;
	color: var(--bronze);
}

.md-stat__label {
	font-size: 10.5px;
	font-weight: 300;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
	line-height: 1.7;
}

@media (max-width: 1199px) {
	.md-statement {
		padding-top: 56px;
	}

	.md-statement__headline {
		font-size: 46px;
	}

	.md-statement__body {
		margin-top: 24px;
	}

	.md-stats {
		margin-top: 48px;
	}

	.md-stat {
		padding: 26px 24px 24px;
		gap: 14px;
	}

	.md-stat__value {
		font-size: 40px;
	}

	.md-stat__label {
		font-size: 9px;
		letter-spacing: 0.18em;
	}
}

@media (max-width: 767px) {
	.md-statement {
		padding-top: 40px;
	}

	.md-statement__headline {
		font-size: 32px;
	}

	/*
	 * Two equal columns, whatever the words. Plain 1fr lets a column grow to
	 * fit its longest unbreakable word - "SATISFIED BUSINESSES", letter-spaced -
	 * so at 360 px the split came out 206/164, the divider sat at 63%, and
	 * the right-hand labels ran 30 px off the screen. minmax(0, 1fr) makes
	 * both columns exactly half, and the number sits above its label so the
	 * label has the full half to wrap in.
	 */
	.md-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 32px;
	}

	.md-stat {
		min-width: 0;
		padding: 22px 16px 20px;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.md-stat__value {
		flex: 0 0 auto;
		font-size: 32px;
	}

	.md-stat__label {
		min-width: 0;
		font-size: 8.5px;
	}
}

/* --- Meet the visionaries ------------------------------------------------ */

.md-leaders {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
}

.md-leader {
	display: grid;
	grid-template-columns: 236px 1fr;
	gap: 30px;
	align-items: start;
}

.md-leader__portrait {
	aspect-ratio: 3 / 3.9;
	overflow: hidden;
	background: var(--placeholder);
}

.md-leader__name {
	font-family: var(--display);
	font-size: 30px;
	line-height: 1.1;
	color: var(--ink);
}

.md-leader__role {
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--bronze);
	margin: 10px 0 18px;
}

@media (max-width: 1199px) {
	.md-leaders {
		gap: 30px;
	}

	.md-leader {
		grid-template-columns: 170px 1fr;
		gap: 20px;
	}

	.md-leader__name {
		font-size: 22px;
	}
}

@media (max-width: 1023px) {
	.md-leaders {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}

@media (max-width: 767px) {
	.md-leader {
		grid-template-columns: 118px 1fr;
		gap: 16px;
	}

	.md-leader__name {
		font-size: 21px;
	}

	.md-leader__role {
		margin: 8px 0 12px;
	}
}

/* --- Testimonials -------------------------------------------------------- */

.md-quotes {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 80px;
	align-items: start;
}

.md-quotes__headline {
	font-size: 46px;
	line-height: 1.02;
	color: var(--cream);
	margin-bottom: 34px;
}

.md-quotes__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.md-quotes__person {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-top: 1px solid var(--footer-rule);
	width: 100%;
	text-align: left;
	opacity: 0.45;
	transition: opacity var(--speed) var(--ease);
	min-height: 44px;
}

.md-quotes__person:last-child {
	border-bottom: 1px solid var(--footer-rule);
}

.md-quotes__person.is-active,
.md-quotes__person:hover,
.md-quotes__person:focus-visible {
	opacity: 1;
}

.md-quotes__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid #5a4f49;
	color: var(--bronze-light);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 300;
	flex: 0 0 auto;
}

.md-quotes__person.is-active .md-quotes__avatar {
	background: var(--bronze-light);
	border-color: var(--bronze-light);
	color: var(--ink-2);
}

.md-quotes__name {
	font-size: 12px;
	font-weight: 400;
	color: var(--cream);
	letter-spacing: 0.02em;
}

.md-quotes__panel {
	padding-top: 6px;
}

.md-quotes__mark {
	font-family: var(--display);
	font-size: 74px;
	line-height: 0.4;
	color: #4a423d;
}

.md-quotes__text {
	margin: 26px 0 0;
	font-family: var(--display);
	font-size: 30px;
	line-height: 1.5;
	color: #f0ebe1;
	max-width: 830px;
}

.md-quotes__by {
	margin-top: 36px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.md-quotes__by-rule {
	width: 44px;
	height: 1px;
	background: var(--bronze-light);
	flex: 0 0 auto;
}

.md-quotes__by-text {
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--on-dark-4);
}

.md-quotes__controls {
	margin-top: 52px;
}

@media (max-width: 1199px) {
	.md-quotes {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.md-quotes__headline {
		font-size: 34px;
		margin-bottom: 24px;
	}

	.md-quotes__text {
		font-size: 21px;
	}

	.md-quotes__controls {
		margin-top: 32px;
	}
}

@media (max-width: 767px) {
	.md-quotes__headline {
		font-size: 27px;
	}

	.md-quotes__mark {
		font-size: 54px;
	}

	.md-quotes__text {
		font-size: 18px;
		line-height: 1.5;
	}

	.md-quotes__by {
		margin-top: 24px;
		gap: 14px;
	}
}

/* --- Global presence ----------------------------------------------------- */

.md-presence__intro {
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--muted);
	max-width: 420px;
	text-align: right;
	margin: 0;
}

.md-presence__map {
	margin-top: 44px;
}

/* The box the pins are measured against - exactly the printed size of the map. */
/*
 * The map runs the full width of the page's column. It was held to 1120px,
 * which on a wide monitor left it sitting in the middle of the screen with
 * empty page either side.
 */
.md-presence__canvas {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.md-presence__canvas img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * The theme's own drawing has no edge: all four sides dissolve into the page,
 * so the land never ends in a straight cut. Two gradients, one across and one
 * down, intersected. A picture chosen in the admin is left exactly as it is.
 */
.md-presence__canvas--drawn img {
	-webkit-mask-image:
		linear-gradient(to right, transparent, #000 7%, #000 92%, transparent),
		linear-gradient(to bottom, transparent, #000 8%, #000 86%, transparent);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent, #000 7%, #000 92%, transparent),
		linear-gradient(to bottom, transparent, #000 8%, #000 86%, transparent);
	mask-composite: intersect;
}

/*
 * The dots. In the earlier artwork they were painted into the picture; on the
 * drawn map each pin draws its own - a bronze ring with a light centre and a
 * soft halo, the same mark as before. Hidden over a chosen picture, which is
 * expected to carry its own.
 */
.md-pin__dot {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 34%;
	min-width: 9px;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--cream);
	border: 2px solid var(--bronze);
	box-shadow: 0 0 0 6px rgba(169, 131, 75, 0.18);
	pointer-events: none;
}

.md-presence__canvas--drawn .md-pin__dot {
	display: block;
}

.md-presence__map img,
.md-presence__map .md-placeholder {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

.md-presence__map .md-placeholder {
	aspect-ratio: 2 / 1;
}

/* --- Map pins -------------------------------------------------------------
 *
 * The dots and their soft haloes are already drawn into the map picture. Each
 * pin here is an invisible button laid exactly over one of them, carrying the
 * place name and the hover - so nothing in the artwork is covered or redrawn.
 * Positions are percentages, which keeps every pin on its city at any width.
 */

.md-presence__pins {
	position: absolute;
	inset: 0;
}

/*
 * The circle is deliberately close to the size of the drawn dot. New York and
 * New Jersey are only about 24px apart on a full-width map, so a generous tap
 * pad would have each pin swallowing its neighbour.
 */
.md-pin {
	position: absolute;
	width: 2.4%;
	min-width: 20px;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.md-pin__glow,
.md-pin__ping {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.md-pin__glow {
	background: radial-gradient(circle closest-side, rgba(169, 131, 75, 0.32), rgba(169, 131, 75, 0));
	transform: scale(1.7);
	transition: opacity 0.28s ease;
}

.md-pin__ping {
	border: 1px solid var(--bronze);
	transform: scale(0.34);
	--ping-delay: 0s;
}

.md-pin__ping--late {
	--ping-delay: 0.95s;
}

@keyframes md-ping {
	0% {
		opacity: 0.5;
		transform: scale(0.34);
	}

	70% {
		opacity: 0;
		transform: scale(1.55);
	}

	100% {
		opacity: 0;
		transform: scale(1.55);
	}
}

/* One ripple across the pins as the map arrives, so they read as touchable. */
.md-pin.is-greeting .md-pin__ping {
	animation: md-ping 1.9s var(--ping-delay) ease-out 1;
}

.md-pin:hover .md-pin__glow,
.md-pin:focus-visible .md-pin__glow,
.md-pin.is-live .md-pin__glow {
	opacity: 1;
}

.md-pin:hover .md-pin__ping,
.md-pin:focus-visible .md-pin__ping,
.md-pin.is-live .md-pin__ping {
	animation: md-ping 1.9s var(--ping-delay) ease-out infinite;
}

.md-pin__name {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 8px;
	padding: 3px 8px;
	background: var(--cream);
	color: var(--bronze);
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	line-height: 1.6;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* One line per place: a marker standing for two dots names them both. */
.md-pin__name span {
	display: block;
	white-space: nowrap;
}

.md-pin--label-left .md-pin__name {
	left: auto;
	right: 50%;
	transform: none;
}

.md-pin--label-right .md-pin__name {
	left: 50%;
	right: auto;
	transform: none;
}

.md-pin:hover .md-pin__name,
.md-pin:focus-visible .md-pin__name,
.md-pin.is-live .md-pin__name {
	opacity: 1;
}

.md-pin:focus {
	outline: none;
}

.md-pin:focus-visible {
	outline: 1px solid var(--bronze);
	outline-offset: 5px;
	border-radius: 50%;
}

/*
 * On a phone the map is barely 340px across, which puts five of the pins inside
 * a thumbprint. The overlay is dropped there and the map goes back to being a
 * picture; the two lists underneath still name every place.
 */
@media (max-width: 767px) {
	.md-presence__pins {
		display: none;
	}

	.md-presence__place {
		cursor: default;
	}
}

/*
 * Where movement is unwelcome the ripple is dropped and the halo simply holds
 * open instead - the answer to "which one am I on" is the same either way.
 */
@media (prefers-reduced-motion: reduce) {
	.md-pin .md-pin__ping {
		animation: none;
	}

	.md-pin:hover .md-pin__ping,
	.md-pin:focus-visible .md-pin__ping,
	.md-pin.is-live .md-pin__ping {
		animation: none;
		opacity: 0.4;
		transform: scale(1.1);
	}

	.md-pin__glow,
	.md-pin__name,
	.md-presence__place {
		transition: none;
	}
}

.md-presence__lists {
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-end;
	text-align: right;
}

.md-presence__label {
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--bronze);
	margin-bottom: 10px;
}

.md-presence__places {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	justify-content: flex-end;
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--muted);
}

/*
 * A place that has a pin on the map. It grows by a fraction rather than by a
 * larger type size, so the row beside it never reflows as you move the pointer
 * along the list.
 */
.md-presence__place {
	cursor: pointer;
	transition: color 0.22s ease, transform 0.22s ease;
}

.md-presence__place:hover,
.md-presence__place.is-live {
	color: var(--bronze);
	transform: scale(1.16);
}

@media (max-width: 1199px) {
	.md-presence__intro {
		font-size: 14px;
		max-width: 320px;
	}

	.md-presence__map {
		margin-top: 30px;
	}
}

@media (max-width: 767px) {
	.md-presence__intro {
		text-align: left;
		max-width: none;
		font-size: 13px;
	}

	.md-presence__lists {
		align-items: flex-start;
		text-align: left;
	}

	.md-presence__places {
		justify-content: flex-start;
		gap: 6px 16px;
		font-size: 9px;
		letter-spacing: 0.2em;
	}
}

/* ==========================================================================
   11. Services
   ========================================================================== */

.md-svc-hero {
	position: relative;
	height: 840px;
	background: var(--ink);
	overflow: hidden;
}

/* Layer 1: the blueprint grid. */
.md-svc-hero__grid {
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(to right, rgba(207, 194, 170, 0.075) 0 1px, transparent 1px var(--blueprint, 60px)),
		repeating-linear-gradient(to bottom, rgba(207, 194, 170, 0.075) 0 1px, transparent 1px var(--blueprint, 60px));
}

/* Layer 2: the bronze glow behind the drawing. */
.md-svc-hero__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 78% 18%, rgba(169, 131, 75, 0.2), rgba(28, 26, 23, 0) 62%);
}

/*
 * Layer 4: the scrim, in two parts.
 *
 * The drawing now runs the full width of the page, so a single left-to-right
 * wash would bury half of it. Instead the darkness pools where the words are:
 * a gradient up from the bottom edge, and a gentler one in from the left. The
 * upper left still reads as drawing, the lower left reads as headline, and the
 * right stays in the bronze light.
 */
.md-svc-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(28, 26, 23, 0.93) 0%, rgba(28, 26, 23, 0.52) 34%, rgba(28, 26, 23, 0) 60%),
		linear-gradient(to right, rgba(28, 26, 23, 0.72) 0%, rgba(28, 26, 23, 0.36) 42%, rgba(28, 26, 23, 0.02) 62%);
}

.md-svc-hero__foot {
	position: absolute;
	left: var(--pad-x);
	right: var(--pad-x);
	bottom: 96px;
	z-index: 3;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 80px;
}

.md-svc-hero__copy {
	max-width: 700px;
}

.md-svc-hero__copy .md-eyebrow {
	margin-bottom: 30px;
}

.md-svc-hero__headline {
	font-size: 56px;
	line-height: 1.1;
	color: var(--cream);
}

.md-svc-hero__aside {
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--bronze-light);
	white-space: nowrap;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--rule-dark);
	flex: 0 0 auto;
}

@media (max-width: 1199px) {
	.md-svc-hero {
		height: 660px;
		--blueprint: 52px;
	}

	.md-svc-hero__scrim {
		background:
			linear-gradient(to top, rgba(28, 26, 23, 0.94) 0%, rgba(28, 26, 23, 0.55) 36%, rgba(28, 26, 23, 0) 62%),
			linear-gradient(to right, rgba(28, 26, 23, 0.7) 0%, rgba(28, 26, 23, 0.34) 40%, rgba(28, 26, 23, 0.02) 60%);
	}

	.md-svc-hero__foot {
		bottom: 56px;
		gap: 40px;
	}

	.md-svc-hero__copy {
		max-width: 540px;
	}

	.md-svc-hero__headline {
		font-size: 40px;
	}
}

@media (max-width: 1023px) {
	.md-svc-hero {
		height: 600px;
		--blueprint: 46px;
	}

	/*
	 * Portrait and mobile stack instead: the wash stays almost clear over the
	 * drawing and only ramps below it, so the headline sits on solid ink.
	 */
	.md-svc-hero__scrim {
		background: linear-gradient(to bottom, rgba(28, 26, 23, 0.1) 0%, rgba(28, 26, 23, 0.1) 64%, rgba(28, 26, 23, 0.78) 78%, rgba(28, 26, 23, 0.97) 88%);
	}

	.md-svc-hero__foot {
		bottom: 40px;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.md-svc-hero__copy {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.md-svc-hero {
		height: 520px;
		--blueprint: 38px;
	}

	.md-svc-hero__scrim {
		background: linear-gradient(to bottom, rgba(28, 26, 23, 0.08) 0%, rgba(28, 26, 23, 0.08) 54%, rgba(28, 26, 23, 0.74) 70%, rgba(28, 26, 23, 0.97) 84%);
	}

	.md-svc-hero__headline {
		font-size: 28px;
		line-height: 1.15;
	}

	.md-svc-hero__copy .md-eyebrow {
		margin-bottom: 16px;
	}

	.md-svc-hero__aside {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   The plan study
   --------------------------------------------------------------------------
   Layer 3 of the hero. Every coordinate below is in the drawing's own 560x420
   space and is multiplied by --md-plan-unit, which is 1px at desktop and 0.78 /
   0.66 / 0.5 further down. Because it is a multiplier rather than a transform,
   the hairlines stay hairlines and the annotation type stays at 8px - which is
   the whole point of re-authoring the drawing rather than scaling it.
   -------------------------------------------------------------------------- */

.md-plan {
	position: absolute;
	z-index: 2;
	top: 96px;
	left: 50%;
	margin-left: calc(-460 * var(--md-plan-unit));
	width: calc(920 * var(--md-plan-unit));
	height: calc(420 * var(--md-plan-unit));

	/* Stroke weights do not scale with the geometry, or they would vanish. */
	--wall: var(--plan-wall);
	--part: var(--plan-part);

	/* 8 treads over the 140-unit flight; 5 treads below 60%. */
	--stair-step: 19;

	--stroke: rgba(207, 194, 170, 0.46);
	--thin: rgba(207, 194, 170, 0.3);
	--bronze-line: rgba(169, 131, 75, 0.62);
}

.md-plan__el {
	position: absolute;
	display: block;
	left: calc(var(--x, 0) * var(--md-plan-unit));
	top: calc(var(--y, 0) * var(--md-plan-unit));
	width: calc(var(--w, 0) * var(--md-plan-unit));
	height: calc(var(--h, 0) * var(--md-plan-unit));
}

/*
 * Exterior walls: hatched poche, drawn the way the studio draws it - diagonal
 * hatching between two heavy faces, rather than a flat fill. Taken from their
 * own basement plans for 1164 45th Street.
 */
.md-plan__wall {
	background:
		repeating-linear-gradient(
			45deg,
			var(--stroke) 0 0.5px,
			transparent 0.5px 3px
		),
		rgba(207, 194, 170, 0.13);
	box-shadow:
		inset 0 0 0 0.5px var(--stroke);
}

.md-plan__wall--top {
	height: var(--wall);
}

.md-plan__wall--bottom {
	top: auto;
	bottom: 0;
	height: var(--wall);
}

.md-plan__wall--left {
	width: var(--wall);
}

.md-plan__wall--right {
	left: auto;
	right: 0;
	width: var(--wall);
}

.md-plan__inner {
	left: var(--wall);
	top: var(--wall);
	right: var(--wall);
	bottom: var(--wall);
	width: auto;
	height: auto;
	border: 1px solid var(--thin);
}

/* Window breaks: the wall is knocked out and glazed with two thin lines. */
.md-plan__window {
	background: var(--ink);
}

.md-plan__window--h {
	height: var(--wall);
}

.md-plan__window--v {
	width: var(--wall);
}

.md-plan__glazing {
	background: var(--thin);
}

.md-plan__glazing--h {
	height: 1px;
}

.md-plan__glazing--v {
	width: 1px;
}

/* Interior partitions. */
.md-plan__part {
	background: var(--thin);
}

.md-plan__part--v {
	width: var(--part);
}

.md-plan__part--h {
	height: var(--part);
}

.md-plan__part--to-edge {
	right: var(--wall);
	width: auto;
}

/* Door swings. */
.md-plan__swing {
	width: calc(44 * var(--md-plan-unit));
	height: calc(44 * var(--md-plan-unit));
}

.md-plan__swing--br {
	border-right: 1px solid var(--bronze-line);
	border-bottom: 1px solid var(--bronze-line);
	border-radius: 0 0 100% 0;
}

.md-plan__swing--bl {
	border-left: 1px solid var(--bronze-line);
	border-bottom: 1px solid var(--bronze-line);
	border-radius: 0 0 0 100%;
}

.md-plan__leaf {
	background: var(--bronze-line);
}

.md-plan__leaf--h {
	width: calc(44 * var(--md-plan-unit));
	height: max(1px, calc(1.5 * var(--md-plan-unit)));
}

.md-plan__leaf--v {
	width: max(1px, calc(1.5 * var(--md-plan-unit)));
	height: calc(44 * var(--md-plan-unit));
}

/* Stair. */

/* --- The house's own furniture -------------------------------------------
 *
 * A plan reads as a building when the rooms are furnished as what they are
 * named. A bedroom without a bed in it is a rectangle with a word in it.
 */
.md-plan__bed {
	border: 1px solid var(--bronze-line);
	border-radius: calc(2 * var(--md-plan-unit));
}

/* The pillows, across the head of the bed - what makes it read as a bed. */
.md-plan__pillow {
	border: 1px solid var(--bronze-line);
	background: rgba(169, 131, 75, 0.16);
	border-radius: calc(1.5 * var(--md-plan-unit));
}

.md-plan__bedside {
	border: 1px solid var(--thin);
}

/* Counters, wardrobes and machines: a run against a wall. */
.md-plan__counter {
	border: 1px solid var(--thin);
	background: rgba(207, 194, 170, 0.05);
}

/* Sanitary fixtures. A WC and a basin read as fixtures because they are round. */
.md-plan__fixture {
	border: 1px solid var(--thin);
	border-radius: 45%;
}

.md-plan__tub {
	border: 1px solid var(--thin);
	border-radius: calc(3 * var(--md-plan-unit));
}

/* A shower tray, drawn with the fall to its outlet. */
.md-plan__tray {
	border: 1px solid var(--thin);
	background: linear-gradient(
		135deg,
		transparent calc(50% - 0.5px),
		var(--thin) calc(50% - 0.5px) calc(50% + 0.5px),
		transparent calc(50% + 0.5px)
	);
}

/* A door in the top wall of its room swings up, so its arc opens top-right. */
.md-plan__swing--tr {
	border-right: 1px solid var(--bronze-line);
	border-top: 1px solid var(--bronze-line);
	border-radius: 0 100% 0 0;
}

.md-plan__stair {
	position: absolute;
	left: calc(568 * var(--md-plan-unit));
	top: calc(24 * var(--md-plan-unit));
	bottom: auto;
	width: calc(64 * var(--md-plan-unit));
	height: calc(152 * var(--md-plan-unit));
	border: 1px solid var(--thin);
}

.md-plan__tread {
	position: absolute;
	left: 0;
	right: 0;
	top: auto;
	width: auto;
	height: 1px;
	background: var(--thin);
	bottom: calc(var(--i) * var(--stair-step) * var(--md-plan-unit));
}

.md-plan__stair-dir {
	left: calc(75 * var(--md-plan-unit));
	top: auto;
	bottom: calc(39 * var(--md-plan-unit));
	width: 1px;
	height: calc(68 * var(--md-plan-unit));
	background: var(--bronze-line);
}

/* Furniture. */
.md-plan__table {
	border: 1px solid var(--bronze-line);
}

.md-plan__seat {
	width: calc(24 * var(--md-plan-unit));
	height: calc(8 * var(--md-plan-unit));
	border: 1px solid var(--thin);
}

.md-plan__round {
	width: calc(72 * var(--md-plan-unit));
	height: calc(72 * var(--md-plan-unit));
	border: 1px solid var(--bronze-line);
	border-radius: 50%;
}

.md-plan__round-inner {
	width: calc(28 * var(--md-plan-unit));
	height: calc(28 * var(--md-plan-unit));
	border: 1px solid var(--thin);
	border-radius: 50%;
}

.md-plan__banquette,
.md-plan__console {
	border: 1px solid var(--thin);
}

/* Registration marks. */
.md-plan__reg {
	width: calc(18 * var(--md-plan-unit));
	height: calc(18 * var(--md-plan-unit));
}

.md-plan__reg--tl {
	left: calc(-11 * var(--md-plan-unit));
	top: calc(-11 * var(--md-plan-unit));
	border-left: 1px solid var(--bronze-line);
	border-top: 1px solid var(--bronze-line);
}

.md-plan__reg--br {
	left: auto;
	top: auto;
	right: calc(-11 * var(--md-plan-unit));
	bottom: calc(-11 * var(--md-plan-unit));
	border-right: 1px solid var(--bronze-line);
	border-bottom: 1px solid var(--bronze-line);
}

.md-plan__grid-tick {
	top: calc(-24 * var(--md-plan-unit));
	width: 1px;
	height: calc(20 * var(--md-plan-unit));
	background: var(--bronze-line);
}

/* Dimension strings. */
.md-plan__dim-line--h {
	left: 0;
	top: auto;
	bottom: calc(-34 * var(--md-plan-unit));
	width: calc(920 * var(--md-plan-unit));
	height: 1px;
	background: var(--thin);
}

.md-plan__dim-tick--h {
	top: auto;
	bottom: calc(-40 * var(--md-plan-unit));
	width: 1px;
	height: calc(13 * var(--md-plan-unit));
	background: var(--thin);
}

.md-plan__dim-line--v {
	left: auto;
	right: calc(-34 * var(--md-plan-unit));
	top: 0;
	width: 1px;
	height: calc(420 * var(--md-plan-unit));
	background: var(--thin);
}

.md-plan__dim-tick--v {
	left: auto;
	right: calc(-40 * var(--md-plan-unit));
	width: calc(13 * var(--md-plan-unit));
	height: 1px;
	background: var(--thin);
}


/*
 * The drawing is trimmed to the sheet edge now, so there is nowhere outside it
 * for the vertical dimension string to stand. It is dropped rather than
 * squeezed over the plan; the horizontal string carries the overall width,
 * which is the dimension a full-width drawing is actually making a point of.
 */
.md-plan__dim-line--v,
.md-plan__dim-tick--v {
	display: none;
}

.md-plan__dim-cap {
	position: absolute;
	left: calc(var(--x) * var(--md-plan-unit));
	bottom: calc(-30 * var(--md-plan-unit));
	font-family: var(--text);
	font-size: 8px;
	font-weight: 300;
	letter-spacing: 0.2em;
	color: var(--muted);
	background: var(--ink);
	padding: 0 6px;
	white-space: nowrap;
}

/* Annotation. Type stays at 8px however small the geometry becomes. */

/* --- Drafting conventions taken from the studio's own sheets --------------
 *
 * Three things carry most of the character of a Max Design drawing, and none
 * of them was here before: the dimension ticks are slashes rather than
 * uprights, every opening carries a tagged bubble with its code and size, and
 * the assembly rooms are laid out in rows of benches.
 *
 * The tag colour is theirs too. On paper they annotate openings in magenta,
 * which is loud on white; here it is pulled back to a rose that holds against
 * the ink without shouting.
 */
.md-plan {
	--tag: #c98d99;
}

/* A slash, at the angle they draw it, instead of an upright tick. */
.md-plan__dim-tick--h {
	transform: rotate(-45deg);
	transform-origin: center;
}

/* The witness line running from the wall out to the dimension chain. */
.md-plan__witness {
	width: 1px;
	background: var(--thin);
	opacity: 0.5;
}

/* The second chain, carrying the overall run under the bay dimensions. */
.md-plan__dim-line--h2 {
	left: 0;
	top: auto;
	bottom: calc(-58 * var(--md-plan-unit));
	width: calc(920 * var(--md-plan-unit));
	height: 1px;
	background: var(--thin);
}

.md-plan__dim-tick--h2 {
	top: auto;
	bottom: calc(-64 * var(--md-plan-unit));
	width: 1px;
	height: calc(13 * var(--md-plan-unit));
	background: var(--thin);
	transform: rotate(-45deg);
	transform-origin: center;
}

.md-plan__dim-cap--h2 {
	bottom: calc(-54 * var(--md-plan-unit));
}

/* --- The spa: water, floor finish, and the tags -------------------------- */

/*
 * The floor, tiled. On the studio's own finish plans the whole floor is drawn
 * as a tile grid, and it is that texture more than anything else that stops a
 * plan reading as a diagram. One element, two gradients, no image.
 */
.md-plan__floor {
	left: var(--wall);
	top: var(--wall);
	right: var(--wall);
	bottom: var(--wall);
	width: auto;
	height: auto;
	background:
		repeating-linear-gradient(
			to right,
			rgba(207, 194, 170, 0.09) 0 1px,
			transparent 1px calc(26 * var(--md-plan-unit))
		),
		repeating-linear-gradient(
			to bottom,
			rgba(207, 194, 170, 0.09) 0 1px,
			transparent 1px calc(26 * var(--md-plan-unit))
		);
}

/*
 * The water. On their sheet it is the only colour on the page, and it is what
 * makes the plan readable from across a room - so it is the only fill here
 * that is not cream or bronze.
 */
.md-plan__pool {
	border: 1px solid rgba(122, 176, 178, 0.75);
	background: rgba(122, 176, 178, 0.2);
}

/* The step along the shallow end, drawn as a band inside the tank. */
.md-plan__pool-step {
	border-top: 1px solid rgba(122, 176, 178, 0.6);
	border-bottom: 1px solid rgba(122, 176, 178, 0.6);
	background: rgba(122, 176, 178, 0.12);
}

/* The cold plunge, deeper and darker than the pool. */
.md-plan__plunge {
	border: 1px solid rgba(122, 176, 178, 0.85);
	background: rgba(122, 176, 178, 0.34);
}

/* A lounger: a long seat with its back drawn at the head. */
.md-plan__lounger {
	border: 1px solid var(--thin);
	border-top: 2px solid var(--bronze-line);
	border-radius: 0 0 calc(6 * var(--md-plan-unit)) calc(6 * var(--md-plan-unit));
}

/* The sauna's timber floor, boarded the short way. */
.md-plan__timber {
	background: repeating-linear-gradient(
		to bottom,
		rgba(169, 131, 75, 0.26) 0 1px,
		rgba(169, 131, 75, 0.07) 1px calc(7 * var(--md-plan-unit))
	);
}

/* The lift, crossed through the way a shaft is drawn. */
.md-plan__lift {
	border: 1px solid var(--thin);
	background:
		linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--thin) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
		linear-gradient(to bottom left, transparent calc(50% - 0.5px), var(--thin) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* A stool, stood on end against a counter. */
.md-plan__seat--v {
	width: calc(8 * var(--md-plan-unit));
	height: calc(24 * var(--md-plan-unit));
}

/* --- Tags ----------------------------------------------------------------
 *
 * The studio's own tag: a two-row box, the code above and what the thing is
 * below, with a leader dropping to a filled dot on the item. Earlier versions
 * of this drawing floated the tag near its subject with nothing joining them,
 * which is a caption, not a tag. The leader is what makes it read.
 */
.md-plan__tag {
	position: absolute;
	left: calc(var(--x) * var(--md-plan-unit));
	top: calc(var(--y) * var(--md-plan-unit));
	translate: -50% 0;
	display: block;
	min-width: calc(52 * var(--md-plan-unit));
	background: var(--ink);
	border: 1px solid var(--thin);
	font-family: var(--text);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-align: center;
	white-space: nowrap;
	line-height: 1;
}

.md-plan__tag-code {
	display: block;
	padding: 3px 6px 2px;
	border-bottom: 1px solid var(--thin);
	font-size: 7px;
	color: var(--tag);
}

.md-plan__tag-name {
	display: block;
	padding: 2px 6px 3px;
	font-size: 6px;
	text-transform: uppercase;
	color: var(--muted-2);
}

/* The leader, dropping from the foot of the box. */
.md-plan__tag::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 100%;
	width: 1px;
	height: calc(var(--lead) * var(--md-plan-unit));
	background: var(--thin);
}

/* And the dot where it lands. */
.md-plan__tag-dot {
	position: absolute;
	left: 50%;
	top: 100%;
	width: 3px;
	height: 3px;
	margin-left: -1.5px;
	border-radius: 50%;
	background: var(--tag);
	translate: 0 calc(var(--lead) * var(--md-plan-unit) - 1.5px);
}



/*
 * Room names sit at the centre of the room they name, the way they do on the
 * studio's own sheets - the coordinates given are the centre of the space, not
 * a corner of the text.
 *
 * Centred with `translate` rather than `transform`, because the draw-on
 * animation writes `transform` on every child of the plan and would wipe it
 * out. The two properties compose instead of fighting.
 */
.md-plan__label {
	position: absolute;
	left: calc(var(--x) * var(--md-plan-unit));
	top: calc(var(--y) * var(--md-plan-unit));
	translate: -50% -50%;
	text-align: center;
	font-family: var(--text);
	font-size: 8px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--muted-2);
	white-space: nowrap;
	line-height: 1.2;
}

.md-plan__area {
	display: block;
	letter-spacing: 0.16em;
	color: var(--muted);
	margin-top: 3px;
}

.md-plan__title {
	position: absolute;
	left: 0;
	top: calc(-46 * var(--md-plan-unit));
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--text);
	font-size: 8.5px;
	font-weight: 300;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--muted-2);
	white-space: nowrap;
}

.md-plan__title span:last-child {
	color: var(--muted);
}

.md-plan__title-rule {
	display: block;
	width: 40px;
	height: 1px;
	background: var(--thin);
	flex: 0 0 auto;
}

@media (max-width: 1199px) {
	.md-plan {
		top: 76px;
	}
}

@media (max-width: 1023px) {
	.md-plan {
		top: 48px;
		/* Five treads over the same flight. */
		--stair-step: 30.4;
	}

	.md-plan__tread:nth-of-type(n + 5) {
		display: none;
	}

	/*
	 * No room for these beside the headline once the hero stacks, and at this
	 * size they would be unreadable anyway.
	 */
	.md-plan__dims,
	.md-plan__title,
	.md-plan__grid-tick {
		display: none;
	}
}

@media (max-width: 767px) {
	.md-plan {
		top: 40px;
		right: 20px;
	}

	.md-plan__seat {
		display: none;
	}
}

/* --- Services index strip ------------------------------------------------ */

/*
 * The disciplines strip pins itself under the returning bar, so a reader can
 * jump to another discipline from anywhere on the page instead of going back
 * up for the list. It sits below the bar in the stack, so the two never fight.
 */
.md-svc-tabs {
	background: var(--ink-2);
	padding: 0 var(--pad-x);
	position: sticky;

	/*
	 * Where it stops. Exactly the bar's height - see the note on .md-bar about
	 * the seam - and deliberately a constant: an offset that changes while the
	 * strip is already pinned would move it, which is the whole thing being
	 * avoided. It is tied to the script running rather than to the bar being
	 * down, because by the time the strip can pin at all the bar has been down
	 * for six hundred pixels of scrolling.
	 */
	top: 0;
	z-index: 4;

	/*
	 * Kept on its own layer. A pinned strip is redrawn on every frame of a
	 * scroll, and sharing a layer with the page underneath is what makes one
	 * shiver rather than sit still.
	 */
	will-change: transform;
}

/* With no script there is no returning bar, so there is nothing to clear. */
html.md-js .md-svc-tabs {
	top: var(--md-bar-h);
}


.md-svc-tabs__list {
	display: flex;
	gap: 30px;
	align-items: stretch;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;

	/*
	 * Centred on the page. "safe" is the whole point of writing it this way: on
	 * the narrow screens where the seven names are wider than the row, centring
	 * would push the first name off the left-hand side where it could never be
	 * scrolled back to. safe centres them when they fit and lines them up from
	 * the left when they do not. A browser too old to understand it drops the
	 * line entirely and lines them up from the left, which is the same answer.
	 */
	justify-content: safe center;
}

.md-svc-tabs__list::-webkit-scrollbar {
	display: none;
}

.md-svc-tab {
	padding: 22px 0;
	font-family: var(--text);
	font-size: 10.5px;
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted-2);
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);

	/* Both copies of the name share one cell; see the note below. */
	display: grid;
	grid-template-areas: "name";
	align-items: center;
}

/*
 * The active name is drawn a weight heavier, as designed - and a heavier weight
 * is a wider one, so every name to its right used to shuffle sideways each time
 * the reader passed a heading. A second copy at the heavier weight sits in the
 * same grid cell, hidden, holding every name at its widest. The row is then the
 * same width whichever name is active, and cannot move.
 */
.md-svc-tab__name,
.md-svc-tab::after {
	grid-area: name;
}

.md-svc-tab::after {
	content: attr(data-name);
	font-weight: 400;
	visibility: hidden;
	pointer-events: none;
}

.md-svc-tab:hover,
.md-svc-tab:focus-visible {
	color: var(--on-dark-3);
}

.md-svc-tab.is-active {
	color: var(--cream);
	font-weight: 400;
	border-bottom-color: var(--bronze-light);
}

/*
 * Measured, not guessed: the seven names set as drawn come to 1362px, and with
 * the page's 64px margins either side they need a window of about 1500 before
 * they all fit. Below that the last name was being cut off - which is most of
 * the laptops in the world, and why "Construction Administration" was arriving
 * three letters short.
 *
 * Between 1360 and 1520 the letters are left exactly as drawn and the space
 * around them gives instead: the names sit closer together and the band's own
 * side margins come in to 40px, the figure the next breakpoint down already
 * uses. That buys back the 110px needed.
 *
 * Below 1360 no amount of spacing is enough, and the design's own answer - one
 * size smaller, tracked tighter - takes over. It is written here from 1359
 * rather than the drawn 1199 because that is where the measurement puts it.
 */
@media (min-width: 1360px) and (max-width: 1519px) {
	.md-svc-tabs {
		padding: 0 40px;
	}

	/*
	 * As close to the drawn 30px as the window allows: 12px where the row only
	 * just fits, opening out to 26px by the time the drawn spacing takes over.
	 */
	.md-svc-tabs__list {
		gap: clamp(12px, calc(12px + (100vw - 1360px) / 11.4), 26px);
	}
}

@media (max-width: 1359px) {
	/*
	 * Deliberately tighter than everything else: all seven names have to fit
	 * without clipping, and this is what it takes. Do not restore the wider
	 * tracking.
	 */
	.md-svc-tabs {
		padding: 0 40px;
	}

	.md-svc-tabs__list {
		gap: 14px;
	}

	.md-svc-tab {
		padding: 18px 0;
		font-size: 9.5px;
		letter-spacing: 0.17em;
	}
}

@media (max-width: 1023px) {
	.md-svc-tabs {
		padding: 0;
	}

	.md-svc-tabs__list {
		gap: 22px;
		padding: 0 var(--pad-x);
	}
}

/* --- Discipline blocks --------------------------------------------------- */

/*
 * Jumping to a discipline has to stop short of the strip pinned over it, or the
 * heading arrives underneath. The returning bar is already allowed for by the
 * page's scroll-padding; this is the strip's own height on top of that. Written
 * as scroll-margin so it holds for a web address ending in #discipline-3 as
 * much as for a click on the strip.
 */
.md-disc {
	padding: 0 var(--pad-x);
	background: var(--cream);
	scroll-margin-top: 76px;
}

@media (max-width: 1199px) {
	.md-disc {
		scroll-margin-top: 66px;
	}
}

/*
 * Text and boxes share the narrow column while the photographs run the full
 * height of the wide one, so the three parts are siblings placed by area
 * rather than the boxes being nested inside the text.
 */
.md-disc__inner {
	display: grid;
	grid-template-columns: 0.86fr 1.14fr;
	grid-template-areas:
		"text  media"
		"chips media";
	grid-template-rows: auto 1fr;
	gap: 0 var(--col-gap);
	align-items: start;
	padding-top: 96px;

	/*
	 * And the same beneath. There was none, so each block ended exactly where
	 * its photographs did and the next block's hairline was drawn hard against
	 * their bottom edge - it read as broken where it met a dark picture and
	 * thick where it met a light one. The line now sits in clear page.
	 */
	padding-bottom: 96px;
}

.md-disc__text {
	grid-area: text;
}

.md-disc__media {
	grid-area: media;
}

.md-disc__chips {
	grid-area: chips;
}

.md-disc:first-of-type .md-disc__inner {
	padding-top: 100px;
	border-top: 0;
}

/*
 * A hairline between one service and the next - so it belongs to every block
 * that follows another, which is not the same as "every block but the first
 * of its type": the hero above is a section too, so :first-of-type never
 * matched and the first block drew a line of its own under the bar.
 */
.md-disc + .md-disc .md-disc__inner {
	border-top: 1px solid var(--border);
}

/* Even-numbered blocks put the photographs on the left. */
.md-disc--flip .md-disc__inner {
	grid-template-columns: 1.14fr 0.86fr;
	grid-template-areas:
		"media text"
		"media chips";
}

.md-disc__headline {
	font-size: 58px;
	line-height: 1;
	margin: 0 0 26px;
}

.md-disc__media {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.md-disc__wide {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--placeholder);
}

/* --- The zoning study -----------------------------------------------------
 *
 * Drawn, not photographed. Every coordinate is a percentage of the box, so it
 * is exactly as sharp at any size and there is no image file to be too small.
 * It fills the same 16/10 slot a photograph would.
 */

.md-zone {
	position: absolute;
	inset: 0;
	background: var(--cream);
	overflow: hidden;
}

/* The sheet it is drawn on. */
.md-zone__grid {
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(to right, rgba(169, 131, 75, 0.07) 0 1px, transparent 1px 5%),
		repeating-linear-gradient(to bottom, rgba(169, 131, 75, 0.07) 0 1px, transparent 1px 8%);
}

/* The outline of the whole floor. */
.md-zone__bounds {
	position: absolute;
	left: 6%;
	top: 9%;
	width: 88%;
	height: 74%;
	border: 1px solid rgba(169, 131, 75, 0.5);
}

.md-zone__room {
	position: absolute;
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Weighted by how a floor is used: living, sleeping, serving. */
.md-zone__room--social {
	background: rgba(169, 131, 75, 0.09);
}

.md-zone__room--private {
	background: rgba(169, 131, 75, 0.17);
}

.md-zone__room--service {
	background: rgba(169, 131, 75, 0.04);
}

/* The band that joins them, and the route drawn down the middle of it. */
.md-zone__spine {
	position: absolute;
	background: rgba(207, 194, 170, 0.24);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.md-zone__route {
	position: absolute;
	left: 8%;
	top: 46%;
	width: 84%;
	height: 0;
	border-top: 1px dashed rgba(169, 131, 75, 0.75);
}

/* Where you come in. */
.md-zone__entry {
	position: absolute;
	left: 3.4%;
	top: 43.4%;
	width: 5.2%;
	height: 5.2%;
	border-left: 1px solid rgba(169, 131, 75, 0.75);
	border-bottom: 1px solid rgba(169, 131, 75, 0.75);
	border-bottom-left-radius: 100%;
}

.md-zone__name,
.md-zone__spine-name {
	font-family: var(--text);
	font-size: 8px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--muted-2);
	line-height: 1.2;
	white-space: nowrap;
}

.md-zone__spine-name {
	position: absolute;
	left: 6%;
	top: 41.5%;
	width: 88%;
	text-align: center;
}

.md-zone__area {
	display: block;
	letter-spacing: 0.16em;
	color: var(--muted);
	margin-top: 3px;
}

.md-zone__spine-name .md-zone__area {
	display: inline;
	margin-left: 10px;
}

/* The title line along the foot, as on a drawing sheet. */
.md-zone__title {
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: 6%;
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--text);
	font-size: 8px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--muted-3);
	white-space: nowrap;
}

.md-zone__title-rule {
	flex: 1 1 auto;
	height: 1px;
	background: var(--border);
}

/*
 * Room areas are the first thing to go when there is no room for them; the
 * names carry the diagram on their own.
 */
@media (max-width: 767px) {
	.md-zone__name,
	.md-zone__spine-name,
	.md-zone__title {
		font-size: 7px;
		letter-spacing: 0.16em;
	}

	.md-zone__room .md-zone__area {
		display: none;
	}
}

.md-disc__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/*
 * One service, one screen. The three photographs stack to a height of about
 * one and a quarter times their column's width (a 16:10 picture over a pair of
 * 4:5 ones), which on a wide monitor is taller than the window - so the words
 * could be read, or the pictures seen, but not both at once. On a desktop the
 * picture column is therefore as wide as the window's height allows and no
 * wider: every picture keeps its proportions, nothing is cropped, and the
 * whole block - headline, paragraph, the four boxes and all three pictures -
 * sits inside one screen beneath the two bars. The words take the room that
 * is left. On a window tall enough, this changes nothing: the column stays at
 * the 57% it was drawn at.
 */
@media (min-width: 1200px) and (min-height: 620px) {
	.md-disc__inner {
		--disc-media: min(57%, calc((100svh - 240px) / 1.25));
		grid-template-columns: minmax(0, 1fr) var(--disc-media);
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.md-disc:first-of-type .md-disc__inner {
		padding-top: 72px;
	}

	.md-disc--flip .md-disc__inner {
		grid-template-columns: var(--disc-media) minmax(0, 1fr);
	}
}

.md-disc__tall {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--placeholder);
}

/* --- The 360 tour ---------------------------------------------------------
 *
 * The studio's real tours, embedded, rather than a picture of one. The player
 * belongs to Kuula and fills the box; everything below only frames it.
 *
 * The box loses its cropped-photograph background: a tour is not a photograph,
 * and a grey plate behind a loading player reads as a fault.
 */
.md-disc__wide--tour {
	overflow: visible;
	background: none;
	aspect-ratio: auto;
}

.md-tour {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ink);
}

.md-tour__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/*
 * The stand-in behind the player: a drawn horizon ring and a label. Visible
 * while the tour loads, and left visible if it never does.
 */
.md-tour__standin {
	text-decoration: none;
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	font-family: var(--text);
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--bronze);
}

.md-tour__ring {
	width: 54px;
	height: 54px;
	border: 1px solid var(--bronze);
	border-radius: 50%;
	position: relative;
}

/* The equator, drawn flattened, the way a globe reads from its own level. */
.md-tour__ring::before {
	content: '';
	position: absolute;
	left: -1px;
	right: -1px;
	top: 50%;
	height: 18px;
	margin-top: -9px;
	border: 1px solid var(--bronze);
	border-radius: 50%;
	opacity: 0.55;
}

/*
 * A way through for anyone the player does not load for, and a way to the rest
 * of the tours for everyone else. Set in the same key as the project links.
 */
.md-tour__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-family: var(--text);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bronze);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.md-tour__link:hover,
.md-tour__link:focus-visible {
	border-bottom-color: var(--bronze);
}

.md-tour__arrow {
	transition: transform 0.2s ease;
}

.md-tour__link:hover .md-tour__arrow {
	transform: translateX(3px);
}

/* --- The video ------------------------------------------------------------
 *
 * Cropped to fill its box exactly as a photograph is, because that is what it
 * stands in for. No controls are drawn, and none can be summoned.
 */
.md-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--ink);
	pointer-events: none;
}

.md-video::-webkit-media-controls {
	display: none !important;
}

@media (max-width: 1199px) {
	.md-disc__inner {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.md-disc:first-of-type .md-disc__inner {
		padding-top: 60px;
	}

	.md-disc__headline {
		font-size: 40px;
		margin-bottom: 18px;
	}

	.md-disc__media {
		gap: 16px;
	}

	.md-disc__pair {
		gap: 16px;
	}
}

@media (max-width: 1023px) {
	/* Both tablets and mobile stack: text, wide image, the pair, then boxes. */
	.md-disc__inner,
	.md-disc--flip .md-disc__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"text"
			"media"
			"chips";
		grid-template-rows: auto;
		gap: 26px;
	}

	.md-disc__chips .md-chips {
		margin-top: 0;
	}

	.md-disc__wide {
		aspect-ratio: 16 / 9;
	}

	.md-disc__tall {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 767px) {
	.md-disc__inner {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.md-disc:first-of-type .md-disc__inner {
		padding-top: 42px;
	}

	.md-disc__headline {
		font-size: 28px;
		margin-bottom: 14px;
	}

	.md-disc__media,
	.md-disc__pair {
		gap: 12px;
	}
}

/* ==========================================================================
   12. Our Work
   ========================================================================== */

/* A photographic hero shared by Our Work, Team and FAQ. */
.md-page-hero {
	position: relative;
	height: 660px;
	background: var(--ink);
	overflow: hidden;
}

.md-page-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(28, 26, 23, 0.7), rgba(28, 26, 23, 0.18) 38%, rgba(28, 26, 23, 0.78));
}

.md-page-hero__copy {
	position: absolute;
	left: var(--pad-x);
	right: var(--pad-x);
	bottom: 110px;
	z-index: 2;
	max-width: 900px;
}

.md-page-hero__copy .md-eyebrow {
	margin-bottom: 24px;
}

.md-page-hero__headline {
	font-size: 88px;
	line-height: 0.98;
	color: var(--cream);
}

.md-page-hero__intro {
	margin-top: 22px;
	font-size: 16px;
	color: var(--on-dark-1);
	max-width: 560px;
}

@media (max-width: 1199px) {
	.md-page-hero {
		height: 460px;
	}

	.md-page-hero__copy {
		bottom: 56px;
	}

	.md-page-hero__headline {
		font-size: 48px;
	}

	.md-page-hero__intro {
		font-size: 14px;
		margin-top: 16px;
	}
}

@media (max-width: 1023px) {
	.md-page-hero {
		height: 420px;
	}

	.md-page-hero__headline {
		font-size: 42px;
	}
}

@media (max-width: 767px) {
	.md-page-hero {
		height: 340px;
	}

	.md-page-hero__copy {
		bottom: 30px;
	}

	.md-page-hero__headline {
		font-size: 32px;
		line-height: 1.06;
	}

	.md-page-hero__intro {
		font-size: 13px;
	}
}

/* --- Filter row ---------------------------------------------------------- */

.md-filters {
	background: var(--cream);
	border-bottom: 1px solid var(--border);
	padding: 0 var(--pad-x);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;

	/*
	 * The category row is the filter most people will use, so it follows the
	 * reader down the page rather than being scrolled away and hunted for.
	 * Same arrangement as the discipline strip on Services: it stops exactly
	 * at the returning bar's height, and that offset is a constant - one that
	 * changed while the row was already pinned would shift it, which is the
	 * shudder that took three rounds to get rid of over there.
	 */
	position: sticky;
	top: 0;
	z-index: 4;
	will-change: transform;
}

html.md-js .md-filters {
	top: var(--md-bar-h);
}

.md-filters__list {
	display: flex;
	gap: 34px;
	align-items: center;
	overflow-x: auto;
	scrollbar-width: none;
}

.md-filters__list::-webkit-scrollbar {
	display: none;
}

.md-filter {
	padding: 26px 0;
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--muted-2);
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.md-filter:hover,
.md-filter:focus-visible {
	color: var(--ink);
}

.md-filter.is-active {
	color: var(--bronze);
	font-weight: 400;
	border-bottom-color: var(--bronze);
}

.md-filters__aside {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ink);
	flex: 0 0 auto;
}

.md-filters__aside-rule {
	width: 30px;
	height: 1px;
	background: var(--bronze);
	display: block;
}

@media (max-width: 1199px) {
	.md-filters__list {
		gap: 22px;
	}

	.md-filter {
		padding: 20px 0;
		font-size: 9.5px;
		letter-spacing: 0.2em;
	}

	/*
	 * The Filters button used to disappear under 1200px, which left tablets and
	 * phones no way into the room-type drawer at all. It stays, compact, at the
	 * end of the category row; the drawer already opens full-screen there.
	 */
	.md-filters__aside {
		flex: 0 0 auto;
		padding-left: 18px;
		font-size: 9px;
		letter-spacing: 0.2em;
	}
}

@media (max-width: 767px) {
	.md-filters {
		padding-right: 0;
	}

	.md-filters__list {
		gap: 18px;
		padding-right: var(--pad-x);
	}

	.md-filter {
		padding: 16px 0;
		font-size: 9px;
	}
}

/* --- Project grid -------------------------------------------------------- */

.md-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px 28px;
}

.md-card__frame {
	position: relative;
	aspect-ratio: 4 / 3.1;
	overflow: hidden;
	background: var(--placeholder);
}

.md-card__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 6px 14px;
	background: var(--cream);
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bronze);
	z-index: 1;
}

/* Hover is a wash and a word - no scale, no shadow. */
.md-card__hover {
	position: absolute;
	inset: 0;
	background: rgba(28, 26, 23, 0.42);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--cream);
	opacity: 0;
	transition: opacity var(--speed) var(--ease);
}

.md-card:hover .md-card__hover,
.md-card:focus-visible .md-card__hover {
	opacity: 1;
}

.md-card__title {
	margin-top: 18px;
	font-family: var(--display);
	font-size: 25px;
	line-height: 1.2;
	color: var(--ink);
}

.md-card__meta {
	margin-top: 8px;
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--muted-3);
}

.md-empty {
	padding: 60px 0;
	font-size: 14px;
	color: var(--muted);
}

@media (max-width: 1199px) {
	.md-grid {
		gap: 30px 24px;
	}

	.md-card__title {
		font-size: 21px;
		margin-top: 14px;
	}

	.md-card__meta {
		font-size: 8.5px;
		letter-spacing: 0.22em;
	}
}

@media (max-width: 1023px) {
	.md-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.md-grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}

/* Pagination, when there are more than twelve projects. */
.md-pagination {
	margin-top: 60px;
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.md-pagination .page-numbers {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid var(--border);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
}

.md-pagination .page-numbers.current,
.md-pagination .page-numbers:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--cream);
}

/* ==========================================================================
   13. Project detail
   ========================================================================== */

.md-proj-hero {
	position: relative;
	height: 780px;
	background: var(--ink);
	overflow: hidden;
}

.md-proj-hero__media img,
.md-proj-hero__media .md-placeholder {
	object-position: center 22%;
}

.md-proj-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(18, 17, 15, 0.82) 0%, rgba(18, 17, 15, 0.34) 46%, rgba(18, 17, 15, 0) 78%);
}

.md-proj-hero__copy {
	position: absolute;
	left: var(--pad-x);
	right: var(--pad-x);
	bottom: 52px;
	z-index: 2;
}

.md-proj-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}

.md-proj-hero__eyebrow .md-rule {
	width: 44px;
	margin: 0;
}

.md-proj-hero__eyebrow span {
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--bronze-light);
}

.md-proj-hero__title {
	font-size: 60px;
	line-height: 1.04;
	color: var(--cream);
	margin: 0 0 34px;
	max-width: 900px;
}

/* The facts sit on the photograph, not in a band below it. */
.md-facts {
	padding-top: 26px;
	border-top: 1px solid rgba(250, 248, 245, 0.28);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

.md-fact__label {
	font-size: 9px;
	font-weight: 300;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--on-dark-4);
	margin-bottom: 6px;
}

.md-fact__value {
	font-family: var(--display);
	font-size: 19px;
	color: var(--cream);
	line-height: 1.3;
}

@media (max-width: 1199px) {
	.md-proj-hero {
		height: 620px;
	}

	.md-proj-hero__title {
		font-size: 44px;
		margin-bottom: 26px;
	}

	.md-facts {
		gap: 20px;
	}

	.md-fact__value {
		font-size: 17px;
	}
}

@media (max-width: 1023px) {
	.md-proj-hero {
		height: 520px;
	}

	.md-proj-hero__title {
		font-size: 42px;
	}

	.md-facts {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px 20px;
	}
}

@media (max-width: 767px) {
	.md-proj-hero {
		height: 460px;
	}

	.md-proj-hero__copy {
		bottom: 28px;
	}

	.md-proj-hero__title {
		font-size: 31px;
		margin-bottom: 20px;
	}

	.md-fact__label {
		font-size: 8px;
		letter-spacing: 0.24em;
	}

	.md-fact__value {
		font-size: 15px;
	}
}

/* --- Bar under the hero -------------------------------------------------- */

.md-projbar {
	padding: 28px var(--pad-x);
	border-bottom: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	background: var(--cream);
}

.md-projbar__back {
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ink);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.md-projbar__back:hover,
.md-projbar__back:focus-visible {
	color: var(--bronze);
}

.md-projbar__count {
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--muted-3);
}

@media (max-width: 767px) {
	.md-projbar {
		padding: 14px var(--pad-x);
	}

	.md-projbar__back,
	.md-projbar__count {
		font-size: 8.5px;
		letter-spacing: 0.22em;
	}
}

/* --- The justified-row collage ------------------------------------------- */

/*
 * Rows are grouped in PHP (see inc/collage.php) but sized here, so a row
 * re-justifies itself fluidly at any width. Within a row each image grows in
 * proportion to its own aspect ratio and is then given that same ratio, which
 * leaves every image in the row exactly the same height with none of them
 * cropped.
 */
.md-collage {
	display: flex;
	flex-direction: column;
	gap: var(--collage-gutter);
}

.md-collage__row {
	display: flex;
	gap: var(--collage-gutter);
}

.md-collage__item {
	margin: 0;
	flex: var(--ar) 1 0;
	aspect-ratio: var(--ar);
	overflow: hidden;
	background: var(--placeholder);
	min-width: 0;
}

.md-collage__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * A trailing row too short to justify keeps its natural height and sits left,
 * rather than one leftover photograph blowing up to the full width.
 */
.md-collage__row--natural {
	flex-wrap: wrap;
	justify-content: flex-start;
}

.md-collage__row--natural .md-collage__item {
	flex: 0 0 auto;
	height: var(--collage-h);
	width: calc(var(--ar) * var(--collage-h));
	max-width: 100%;
	aspect-ratio: auto;
}

@media (max-width: 767px) {
	/* Single column on phones, whatever the rows worked out to be. */
	.md-collage__row,
	.md-collage__row--natural {
		flex-direction: column;
	}

	.md-collage__item,
	.md-collage__row--natural .md-collage__item {
		flex: 1 1 auto;
		width: 100%;
		height: auto;
		aspect-ratio: var(--ar);
	}
}

/* --- Next project -------------------------------------------------------- */

.md-next {
	background: var(--ink);
	padding: 72px var(--pad-x);
}

.md-next__link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
}

/*
 * The label sits above the name, not beside it. Both were inline spans, so they
 * ran together on one line and the margin below the label did nothing - which is
 * why it read as "Next project" and the project's name sharing a line rather
 * than one introducing the other.
 */
.md-next__label {
	display: block;
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--bronze-light);
	margin-bottom: 14px;
}

.md-next__name {
	display: block;
	font-family: var(--display);
	font-size: 32px;
	line-height: 1.1;
	color: var(--cream);
}

.md-next__arrow {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 1px solid var(--rule-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bronze-light);
	font-size: 16px;
	flex: 0 0 auto;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.md-next__link:hover .md-next__arrow,
.md-next__link:focus-visible .md-next__arrow {
	background: var(--cream);
	border-color: var(--cream);
	color: var(--ink);
}

@media (max-width: 767px) {
	.md-next {
		padding: 40px var(--pad-x);
	}

	.md-next__name {
		font-size: 24px;
	}

	.md-next__arrow {
		width: 44px;
		height: 44px;
	}
}

/* ==========================================================================
   12b. Our Work filter drawer
   --------------------------------------------------------------------------
   Frames 2g and 4d. The drawer opens in the flow of the page rather than over
   it, and the project grid reflows to two columns beside it. Categories carry
   optional sub-types, which are child terms of the same taxonomy.
   ========================================================================== */

.md-worklayout {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--cream);
}

.md-worklayout.is-filtering {
	grid-template-columns: 352px 1fr;
}

.md-drawer {
	display: none;
	background: var(--cream-2);
	border-right: 1px solid var(--border);
	padding: 40px 40px 56px;
}

.md-worklayout.is-filtering .md-drawer {
	display: block;
}

.md-drawer__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 22px;
	border-bottom: 1px solid #e0d8ca;
}

.md-drawer__title {
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ink);
}

.md-drawer__close {
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bronze);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.md-drawer__count {
	margin-top: 26px;
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--muted-3);
}

.md-drawer__groups {
	margin-top: 26px;
	display: flex;
	flex-direction: column;
}

.md-drawer__group {
	border-top: 1px solid var(--border);
}

.md-drawer__group:last-child {
	border-bottom: 1px solid var(--border);
}

/*
 * A category row. It used to be a label wrapping a checkbox; it is now either a
 * button that opens the room types inside, or - where a category has none - a
 * plain line of text. The category filter itself lives in the row above the
 * grid, which is where a reader looks for it.
 */
.md-drawer__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 0;
	min-height: 44px;
	width: 100%;
	margin: 0;
	background: none;
	border: 0;
	text-align: left;
	color: inherit;
	font: inherit;
}

.md-drawer__row--toggle {
	cursor: pointer;
}

.md-drawer__row--toggle:hover .md-drawer__name,
.md-drawer__row--toggle:focus-visible .md-drawer__name {
	color: var(--bronze);
}

/* No rooms inside, so nothing to press. */
.md-drawer__row--flat .md-drawer__name {
	opacity: 0.55;
}

.md-drawer__name {
	font-family: var(--text);
	font-weight: 300;
	font-size: 18px;
	color: var(--ink);
}

.md-drawer__toggle {
	margin-left: auto;
	font-size: 11px;
	color: var(--bronze);
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
}

.md-drawer__children {
	margin: 0 0 18px 27px;
	display: none;
	flex-direction: column;
	gap: 13px;
}

.md-drawer__group.is-open .md-drawer__children {
	display: flex;
}

.md-drawer__child {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 0.04em;
	color: var(--body);
	cursor: pointer;
	min-height: 24px;
}

.md-drawer__child.is-checked {
	font-weight: 400;
	color: var(--ink);
}

.md-drawer__more {
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--bronze);
	padding-top: 2px;
	text-align: left;
	min-height: 44px;
}

.md-drawer__child.is-hidden {
	display: none;
}

.md-drawer__actions {
	margin-top: 34px;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.md-drawer__apply {
	padding: 14px 30px;
	background: var(--ink);
	color: var(--cream);
	font-size: 9.5px;
	font-weight: 400;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	min-height: 44px;
}

.md-drawer__clear {
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--muted-3);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/*
 * Ticking filters on the spot, so there is nothing to apply: on a desktop the
 * Apply button is not shown, and "Clear all" sits beside the count at the top
 * of the drawer, where it is never scrolled away from. The bottom bar stays
 * on phones and tablets, where the drawer is a sheet and the button closes it.
 */
.md-drawer__clear--top {
	min-height: 0;
	margin-left: 14px;
	color: var(--bronze);
}

.md-drawer__clear--top[hidden],
.md-card[hidden],
.md-chips-active[hidden],
.md-grid__empty[hidden] {
	display: none;
}

@media (min-width: 1024px) {
	html.md-js .md-drawer__apply {
		display: none;
	}
}

/* The custom checkbox: a square that fills bronze when ticked. */
.md-check {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.md-check__box {
	width: 13px;
	height: 13px;
	border: 1px solid #c2b8a4;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	color: var(--cream);
	font-size: 9px;
	line-height: 1;
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.md-check__box--sm {
	width: 11px;
	height: 11px;
	font-size: 8px;
}

.md-check:checked + .md-check__box,
.is-checked > .md-check__box {
	background: var(--bronze);
	border-color: var(--bronze);
}

.md-check:focus-visible + .md-check__box {
	outline: 2px solid var(--bronze);
	outline-offset: 2px;
}

/* Selected filters, shown above the grid. */
.md-chips-active {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 30px;
	flex-wrap: wrap;
}

.md-chip-active {
	padding: 9px 18px;
	background: #efeae0;
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
}

.md-chip-active span:last-child {
	color: var(--bronze);
}

.md-worklayout__results {
	padding: 48px var(--pad-x) 90px;
}

.md-worklayout.is-filtering .md-grid {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1199px) {
	.md-worklayout.is-filtering {
		grid-template-columns: 300px 1fr;
	}

	.md-drawer {
		padding: 30px 24px 40px;
	}

	.md-drawer__name {
		font-size: 16px;
	}
}

@media (max-width: 1023px) {
	/* The drawer becomes a full-height sheet with a sticky apply bar. */
	.md-worklayout.is-filtering,
	.md-worklayout {
		grid-template-columns: 1fr;
	}

	.md-worklayout.is-filtering .md-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.md-worklayout.is-filtering .md-drawer {
		position: fixed;
		inset: 0;
		z-index: 70;
		overflow-y: auto;
		border-right: 0;
		padding: 20px var(--pad-x) 110px;
	}

	/*
	 * A category page arrives with the drawer marked open, which is right on
	 * a desktop (it stands beside the results) and wrong here, where it would
	 * cover them: tapping "Residential" on the home page opened the filters
	 * instead of the projects until the script closed them. On a phone or
	 * tablet the sheet now shows only when it has been asked for - the script
	 * adds .is-asked when Filters is pressed - so nothing depends on the
	 * script being quick, or on it being the newest copy.
	 */
	.md-worklayout.is-filtering:not(.is-asked) .md-drawer {
		display: none;
	}

	.md-drawer__actions {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		padding: 16px var(--pad-x);
		background: var(--cream-2);
		border-top: 1px solid var(--border);
		justify-content: space-between;
	}

	.md-drawer__apply {
		flex: 1;
		justify-content: center;
		display: inline-flex;
		align-items: center;
	}
}

@media (max-width: 767px) {
	.md-worklayout.is-filtering .md-grid {
		grid-template-columns: 1fr;
	}

	.md-worklayout__results {
		padding: 30px var(--pad-x) 50px;
	}
}

/* ==========================================================================
   14. Team
   ========================================================================== */

.md-leadpair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--col-gap);
}

.md-person__role {
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--bronze);
	margin-bottom: 18px;
}

.md-person__portrait {
	aspect-ratio: 3 / 3.4;
	overflow: hidden;
	background: var(--placeholder);
	margin-bottom: 20px;
}


/* --- The drawn portraits -------------------------------------------------
 *
 * The design does one thing here that is easy to miss and carries the whole
 * effect: the drawings are set to `mix-blend-mode: multiply` over a warm sand
 * ground. Multiply keeps the dark of the pencil and lets the white of the
 * paper vanish into the ground behind it, so a portrait sits *in* the page
 * rather than on it - no card, no edge, no white rectangle standing proud of
 * a cream page. Every drawn portrait in the handoff is marked up this way.
 *
 * Photographs are not, and must not be: multiplying a photograph darkens it
 * and tints it. The rule is scoped to the drawn portraits only, which is why
 * the leadership photographs on the home page are left alone.
 */
.md-person__portrait,
.md-leader__portrait--drawn {
	background: var(--portrait-ground);
}

.md-person__portrait .md-img,
.md-leader__portrait--drawn .md-img {
	mix-blend-mode: multiply;
}

/*
 * The placeholder is a flat plate, not a drawing - blending it would only make
 * it disappear.
 */
.md-person__portrait .md-placeholder,
.md-leader__portrait--drawn .md-placeholder {
	mix-blend-mode: normal;
}

.md-person__name {
	font-family: var(--display);
	font-size: 30px;
	line-height: 1.15;
	color: var(--ink);
	margin-bottom: 14px;
}

.md-teamgroup {
	border-top: 1px solid var(--border);
	padding-top: 60px;
	margin-top: 60px;
}

.md-teamgroup__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	margin-bottom: 34px;
}

/*
 * The people sit on a track inside a window. Paging slides the track, so a
 * change of person is a movement across, not a cut - the same idea as the
 * category carousel on the home page. Each card is a fixed share of the
 * window (a third on a desktop, a half on a phone), so what shows is exactly
 * what the old grid showed; only the way it changes is new.
 */
.md-teamgroup__grid {
	overflow: hidden;
}

.md-teamgroup__track {
	display: flex;
	gap: 30px;
	transition: transform 620ms cubic-bezier(0.2, 0, 0.2, 1);
	will-change: transform;
}

.md-teamgroup__track .md-person {
	flex: 0 0 calc((100% - 60px) / 3);
	min-width: 0;
}

.md-teamgroup__pager {
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--muted-3);
}

.md-team-cta {
	border-top: 1px solid var(--border);
	margin-top: 70px;
	padding-top: 70px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
}

.md-team-cta__headline {
	font-size: 46px;
	line-height: 1.06;
	max-width: 700px;
}

@media (max-width: 1199px) {
	.md-person__name {
		font-size: 22px;
	}

	.md-teamgroup {
		padding-top: 40px;
		margin-top: 40px;
	}

	.md-teamgroup__track {
		gap: 20px;
	}

	.md-teamgroup__track .md-person {
		flex-basis: calc((100% - 40px) / 3);
	}

	.md-team-cta__headline {
		font-size: 32px;
	}
}

/*
 * The two leaders stay side by side on tablets. Stacking them at 1023px put
 * each portrait across the full width of an 834px screen - a 3:3.4 drawing
 * the height of the viewport - which is far too much. Side by side at that
 * width they are the size of the group portraits beneath them, which is the
 * relationship the design has. They stack only on phones.
 */
@media (max-width: 767px) {
	.md-leadpair {
		grid-template-columns: 1fr;
		gap: 34px;
	}
}

@media (max-width: 767px) {
	.md-teamgroup__track {
		gap: 16px;
	}

	.md-teamgroup__track .md-person {
		flex-basis: calc((100% - 16px) / 2);
	}

	.md-person__name {
		font-size: 19px;
		margin-bottom: 8px;
	}

	.md-team-cta {
		margin-top: 40px;
		padding-top: 40px;
	}

	.md-team-cta__headline {
		font-size: 26px;
	}
}

/* ==========================================================================
   15. Journal
   ========================================================================== */

.md-lead-post {
	display: block;
}

.md-lead-post__frame {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--placeholder);
	margin-bottom: 24px;
}

.md-post-meta {
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--bronze);
	margin-bottom: 12px;
}

.md-lead-post__title {
	font-size: 34px;
	line-height: 1.15;
	max-width: 820px;
}

.md-posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px 28px;
	margin-top: 70px;
	border-top: 1px solid var(--border);
	padding-top: 50px;
}

.md-post__frame {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--placeholder);
	margin-bottom: 16px;
}

.md-post__title {
	font-family: var(--display);
	font-size: 22px;
	line-height: 1.2;
	color: var(--ink);
}

.md-post__excerpt {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--muted);
}

/* --- Article ------------------------------------------------------------- */

.md-article-hero {
	display: grid;
	grid-template-columns: 0.86fr 1.14fr;
	background: var(--ink);
	min-height: 520px;
}

.md-article-hero__text {
	padding: 150px var(--col-gap) 70px var(--pad-x);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.md-article-hero__title {
	font-size: 44px;
	line-height: 1.08;
	color: var(--cream);
	margin: 0 0 20px;
}

.md-article-hero__standfirst {
	font-size: 15px;
	line-height: 1.75;
	color: var(--on-dark-1);
	margin: 0 0 22px;
}

.md-article-hero__meta {
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--on-dark-4);
}

.md-article-hero__media {
	position: relative;
	overflow: hidden;
	background: var(--placeholder);
	min-height: 420px;
}

.md-article-body {
	display: grid;
	grid-template-columns: 150px minmax(0, 640px);
	gap: 60px;
	padding-top: 80px;
}

.md-article-rail__label {
	font-size: 9px;
	font-weight: 300;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--muted-3);
	margin-bottom: 6px;
}

.md-article-rail__value {
	font-family: var(--display);
	font-size: 16px;
	color: var(--ink);
	margin-bottom: 22px;
}

.md-article-content {
	font-size: 16px;
	line-height: 1.9;
	color: var(--body);
}

.md-article-content > p:first-child {
	font-family: var(--display);
	font-size: 24px;
	line-height: 1.5;
	color: var(--ink);
	margin-bottom: 30px;
}

/*
 * The article as written in its boxes: the opening paragraph large, in the
 * display face, then each section under a small bronze heading - the same
 * shape as the studio's email. (Written with the body's class in front so
 * these win over the general rules for a first paragraph and for headings.)
 */
.md-article-body .md-article-content .md-article-intro {
	font-family: var(--display);
	font-size: 24px;
	line-height: 1.5;
	color: var(--ink);
	margin: 0 0 34px;
}

.md-article-section {
	margin: 0 0 36px;
}

.md-article-body .md-article-content .md-article-section__heading {
	font-family: var(--text);
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--bronze);
	margin: 0 0 14px;
}

.md-article-section p {
	margin: 0 0 18px;
}

.md-article-section p:last-child {
	margin-bottom: 0;
}

.md-article-content strong,
.md-article-content b {
	font-weight: 500;
	color: var(--ink);
}

.md-article-content h2,
.md-article-content h3 {
	margin: 40px 0 16px;
	font-size: 28px;
	line-height: 1.2;
}

.md-article-content img {
	height: auto;
	margin: 30px 0;
}

.md-verdict {
	background: var(--cream-2);
	padding: var(--sec-y) var(--pad-x);
	margin-top: 80px;
}

.md-verdict__inner {
	max-width: 840px;
}

.md-verdict__headline {
	font-size: 34px;
	line-height: 1.15;
	margin-bottom: 18px;
}

@media (max-width: 1199px) {
	.md-lead-post__title {
		font-size: 28px;
	}

	.md-posts {
		gap: 30px 24px;
		margin-top: 44px;
		padding-top: 34px;
	}

	.md-post__title {
		font-size: 19px;
	}

	.md-article-hero {
		min-height: 420px;
	}

	.md-article-hero__text {
		padding: 110px 40px 50px var(--pad-x);
	}

	.md-article-hero__title {
		font-size: 34px;
	}

	.md-article-body {
		grid-template-columns: 130px minmax(0, 1fr);
		gap: 34px;
		padding-top: 50px;
	}

	.md-article-content {
		font-size: 14px;
	}

	.md-article-content > p:first-child {
		font-size: 21px;
	}
}

@media (max-width: 1023px) {
	.md-posts {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Portrait and mobile stack the split hero: dark text block, then image. */
	.md-article-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.md-article-hero__text {
		padding: 100px var(--pad-x) 40px;
	}

	.md-article-hero__media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.md-article-body {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.md-article-rail {
		display: flex;
		gap: 40px;
		flex-wrap: wrap;
	}
}

@media (max-width: 767px) {
	.md-lead-post__title {
		font-size: 24px;
	}

	.md-posts {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.md-article-hero__text {
		padding: 40px var(--pad-x) 30px;
	}

	.md-article-hero__title {
		font-size: 31px;
	}

	.md-article-content {
		font-size: 13px;
	}

	.md-article-content > p:first-child {
		font-size: 20px;
		line-height: 1.45;
	}

	.md-verdict {
		margin-top: 44px;
	}

	.md-verdict__headline {
		font-size: 24px;
	}
}

/* ==========================================================================
   16. FAQ
   ========================================================================== */

.md-faq {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: var(--col-gap);
	align-items: start;
}

.md-faq__aside-text {
	margin: 18px 0 26px;
	color: var(--muted);
}

.md-faq__group-title {
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--bronze);
	margin: 34px 0 6px;
}

.md-faq__item {
	border-bottom: 1px solid var(--border);
}

.md-faq__item:first-of-type {
	border-top: 1px solid var(--border);
}

.md-faq__q {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	padding: 24px 0;
	min-height: 44px;
	text-align: left;
	font-family: var(--display);
	font-size: 21px;
	line-height: 1.3;
	color: var(--ink);
}

.md-faq__sign {
	color: var(--bronze);
	font-family: var(--text);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	flex: 0 0 auto;
}

.md-faq__a {
	display: none;
	padding: 0 0 26px;
	max-width: 760px;
}

.md-faq__item.is-open .md-faq__a {
	display: block;
}

.md-faq__item.is-hidden {
	display: none;
}

@media (max-width: 1023px) {
	.md-faq {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

@media (max-width: 767px) {
	.md-faq__q {
		font-size: 17px;
		padding: 18px 0;
		gap: 16px;
	}
}

/* ==========================================================================
   17. Contact
   ========================================================================== */

.md-contact {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: var(--col-gap);
	align-items: start;
}

.md-contact__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--placeholder);
	margin: 34px 0;
}

.md-contact__details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.md-contact__label {
	font-size: 9px;
	font-weight: 300;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--muted-3);
	margin-bottom: 8px;
}

.md-contact__value {
	font-family: var(--display);
	font-size: 19px;
	color: var(--ink);
}

/*
 * On a phone the two details sit one above the other. Side by side, each
 * had about 148 px at 360 wide and "Brooklyn, New York" broke after "New";
 * with the full width each value stays on one line, and the studio's full
 * name is kept rather than shortened.
 */
@media (max-width: 767px) {
	.md-contact__details {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.md-contact__value {
		overflow-wrap: anywhere;
	}
}

.md-contact__intro {
	margin-bottom: 34px;
}

@media (max-width: 1023px) {
	.md-contact {
		grid-template-columns: 1fr;
		gap: 34px;
	}
}

/* ==========================================================================
   18. Forms, states, accessibility
   ========================================================================== */

/*
 * The contact form's fields are rules rather than boxes: a single hairline
 * under each one, with the label doing the work a placeholder usually would.
 * A real <label> is always present for screen readers even where the design
 * shows only the resting text.
 */
.md-form {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.md-field-row {
	position: relative;
}

.md-label {
	display: block;
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--muted-3);
	margin-bottom: 10px;
}

.md-input,
.md-textarea {
	width: 100%;
	padding: 0 0 12px;
	border: 0;
	border-bottom: 1px solid var(--sand);
	border-radius: 0;
	background: transparent;
	font-family: var(--text);
	font-size: 14px;
	font-weight: 300;
	color: var(--ink);
	min-height: 44px;
	transition: border-color var(--speed) var(--ease);
}

.md-textarea {
	height: 150px;
	padding-top: 14px;
	resize: vertical;
	line-height: 1.7;
}

.md-input:focus,
.md-textarea:focus {
	outline: none;
	border-bottom-color: var(--bronze);
}

.md-input::placeholder,
.md-textarea::placeholder {
	color: var(--muted-3);
	opacity: 1;
}

/* Project type: outlined toggles that fill when chosen. */
.md-typegrid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.md-type {
	position: relative;
	display: inline-flex;
}

.md-type__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.md-type__label {
	display: inline-flex;
	align-items: center;
	padding: 11px 22px;
	min-height: 44px;
	border: 1px solid var(--border-2);
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
	cursor: pointer;
	transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease), background var(--speed) var(--ease);
}

.md-type__input:checked + .md-type__label {
	border-color: var(--ink);
	color: var(--ink);
}

.md-type__input:focus-visible + .md-type__label {
	outline: 2px solid var(--bronze);
	outline-offset: 2px;
}

.md-submit {
	align-self: flex-start;
	padding: 17px 42px;
	min-height: 44px;
	background: var(--ink);
	color: var(--cream);
	font-family: var(--text);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	transition: background var(--speed) var(--ease);
}

.md-submit:hover,
.md-submit:focus-visible {
	background: var(--bronze);
}

.md-submit[disabled] {
	opacity: 0.55;
	cursor: default;
}

/* The honeypot: hidden from people, tempting to a bot. */
.md-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Validation and result messages. */
.md-error {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--error);
}

.md-field-row.has-error .md-input,
.md-field-row.has-error .md-textarea {
	border-bottom-color: var(--error);
}

.md-formnote {
	font-size: 14px;
	line-height: 1.7;
	padding: 18px 22px;
	border: 1px solid var(--border);
	background: var(--cream-2);
	color: var(--body);
}

.md-formnote--error {
	border-color: var(--error);
	color: var(--error);
	background: transparent;
}

.md-formnote--ondark {
	border-color: rgba(250, 248, 245, 0.4);
	background: rgba(250, 248, 245, 0.08);
	color: var(--cream);
}

/* The success state replaces the form rather than sitting above it. */
.md-form-success {
	font-family: var(--display);
	font-size: 24px;
	line-height: 1.5;
	color: var(--ink);
	max-width: 640px;
}

/* --- Focus, motion, print ------------------------------------------------ */

:focus-visible {
	outline: 2px solid var(--bronze);
	outline-offset: 3px;
}

.md-nav-overlaid .md-header :focus-visible,
.md-section--dark :focus-visible,
.md-footer :focus-visible {
	outline-color: var(--bronze-light);
}

/*
 * Nothing here bounces or parallaxes to begin with; this switches off the
 * remaining transitions and any smooth scrolling for anyone who asks for it.
 */
@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;
	}

	html {
		scroll-behavior: auto;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media print {
	.md-header,
	.md-footer,
	.md-news,
	.md-cta,
	.md-burger,
	.md-menu,
	.md-arrows {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* ==========================================================================
   19. Inline elements that need to behave as blocks
   --------------------------------------------------------------------------
   Cards are anchors wrapping spans, so that the whole card is one link rather
   than several. Spans are inline by default, which would drop their margins and
   ignore aspect-ratio, so they are blockified here in one place.
   ========================================================================== */

.md-card,
.md-post,
.md-lead-post {
	display: block;
}

.md-card__frame,
.md-card__title,
.md-card__meta,
.md-post__frame,
.md-post__title,
.md-post__excerpt,
.md-post-meta,
.md-lead-post__frame,
.md-lead-post__title {
	display: block;
}

/* The hero mark on the home page is a link on every other template. */
.md-home-hero__mark .md-logo,
.md-home-hero__mark .md-logo__img {
	display: block;
}

.md-home-hero__mark .md-logo__img {
	width: 352px;
	max-width: 62vw;
	height: auto;
}

@media (max-width: 1199px) {
	.md-home-hero__mark .md-logo__img {
		width: 290px;
	}
}

/* The project facts wrapper carries no styling of its own; declared so the
   grid has a real element to place. */
.md-fact {
	min-width: 0;
}

.md-main {
	display: block;
}

/* ==========================================================================
   20. Touch-target corrections
   --------------------------------------------------------------------------
   Two places where the drawn size is smaller than a finger needs. The visible
   design is untouched; only the area that responds to a tap grows.
   ========================================================================== */

/*
 * The logo is a link, and the mark itself is only about 22px tall. Give the
 * anchor a full-height target without moving the image.
 */
.md-logo {
	min-height: 44px;
	display: flex;
	align-items: center;
}

/*
 * The footer mark is a link too, so it takes the same target. On desktop the
 * row height is set by the navigation beside it and nothing moves; on a phone
 * it adds a little air above the nav list. Noted in NOTES.md as the one place
 * the accessibility floor changes the drawn spacing.
 */

/*
 * The sub-type rows in the filter drawer are drawn as a dense 13px-spaced list,
 * which is right for a mouse. On a touch screen - and in the full-height sheet
 * the drawer becomes below 1024px - each row takes a finger-sized target
 * instead. The checkbox and label keep their drawn size either way.
 */
@media (max-width: 1023px), (pointer: coarse) {
	.md-drawer__child {
		min-height: 44px;
	}

	.md-drawer__children {
		gap: 4px;
	}
}

/* Team group pagination controls. */
.md-teamgroup__controls {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 0 0 auto;
}

.md-teamgroup__grid .md-person.is-hidden {
	display: none;
}

/*
 * A group that fits across at the current width has nothing to page, so its
 * arrows are hidden - the script marks it. touch-action keeps the page
 * scrolling normally under a finger while the script watches for a sideways
 * swipe across the portraits.
 */
.md-teamgroup.is-static .md-teamgroup__controls {
	display: none;
}

.md-teamgroup__grid {
	touch-action: pan-y;
}

@media (max-width: 767px) {
	.md-teamgroup__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}
}

/* ==========================================================================
   21. Scroll reveal
   --------------------------------------------------------------------------
   Sections settle into place as they come into view: a short fade with a small
   upward drift, once per element, and never on a hero - the top of a page is
   already in view when it loads and should not move.

   The resting (hidden) state is applied only when JavaScript is running and the
   Customizer switch is on, so with either off nothing is ever left invisible.
   Anyone asking for reduced motion is opted out entirely.
   ========================================================================== */

html.md-js body.md-motion .md-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 620ms var(--ease),
		transform 620ms var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

html.md-js body.md-motion .md-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Already on screen when the page loaded: show it, do not animate it. */
html.md-js body.md-motion .md-reveal.is-instant {
	transition: none;
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.md-js body.md-motion .md-reveal,
	html.md-js body.md-motion .md-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- Project cards: the photograph slides down into its frame -------------
 *
 * From the studio's previous site, and worth keeping: instead of the card
 * drifting up as a whole, the frame opens from its top edge and the photograph
 * comes down into it. The picture is carried up a little at rest and released
 * as the frame opens, so it arrives rather than being uncovered - the same
 * trick a curtain uses.
 *
 * The card's own drift is turned off here, or there would be two movements
 * fighting each other. The title and its line still fade with the card.
 */
html.md-js body.md-motion .md-card.md-reveal {
	transform: none;
}

html.md-js body.md-motion .md-card.md-reveal .md-card__frame {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 780ms var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
}

html.md-js body.md-motion .md-card.md-reveal .md-card__frame .md-img,
html.md-js body.md-motion .md-card.md-reveal .md-card__frame .md-placeholder {
	transform: translateY(-7%);
	transition: transform 780ms var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
}

html.md-js body.md-motion .md-card.md-reveal.is-in .md-card__frame {
	clip-path: inset(0 0 0 0);
}

html.md-js body.md-motion .md-card.md-reveal.is-in .md-card__frame .md-img,
html.md-js body.md-motion .md-card.md-reveal.is-in .md-card__frame .md-placeholder {
	transform: none;
}

/* Already on screen at load, or motion turned down: nothing hidden, nothing
   moved. */
html.md-js body.md-motion .md-card.md-reveal.is-instant .md-card__frame,
html.md-js body.md-motion .md-card.md-reveal.is-instant .md-card__frame .md-img,
html.md-js body.md-motion .md-card.md-reveal.is-instant .md-card__frame .md-placeholder {
	clip-path: none;
	transform: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	html.md-js body.md-motion .md-card.md-reveal .md-card__frame,
	html.md-js body.md-motion .md-card.md-reveal.is-in .md-card__frame,
	html.md-js body.md-motion .md-card.md-reveal .md-card__frame .md-img,
	html.md-js body.md-motion .md-card.md-reveal .md-card__frame .md-placeholder {
		clip-path: none;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   22. The three photographic heroes
   --------------------------------------------------------------------------
   Our Work, Team and FAQ each carry their own height, wash and headline size.
   They shared one treatment in the first build, which flattened three distinct
   openings into one; these restore what the design draws.
   ========================================================================== */

/* Our Work: the tallest, washed from the left with a light veil off the top. */
.md-page-hero--work {
	height: 660px;
}

.md-page-hero--work .md-page-hero__scrim {
	background:
		linear-gradient(to bottom, rgba(28, 26, 23, 0.55), rgba(28, 26, 23, 0) 40%),
		linear-gradient(to right, rgba(28, 26, 23, 0.82), rgba(28, 26, 23, 0.45) 42%, rgba(28, 26, 23, 0.08) 72%);
}

.md-page-hero--work .md-page-hero__headline {
	font-size: 88px;
	line-height: 0.98;
}

/* Team: washed top and bottom, the portrait behind it left legible. */
.md-page-hero--team {
	height: 600px;
}

.md-page-hero--team .md-page-hero__scrim {
	background: linear-gradient(to bottom, rgba(28, 26, 23, 0.72), rgba(28, 26, 23, 0.28) 45%, rgba(28, 26, 23, 0.7));
}

.md-page-hero--team .md-page-hero__copy {
	bottom: 96px;
}

.md-page-hero--team .md-page-hero__headline {
	font-size: 72px;
	line-height: 1.02;
}

/*
 * A hero holding a film is the height of the screen. At 600px a 16:9 film
 * across a wide monitor was seen through a slot - barely half of each frame,
 * so a man standing up lost his head off the top. At full height nine tenths
 * of the frame is in view on a 1990 x 1000 screen, and what is cropped is
 * taken mostly from the bottom, because faces live in the upper part of a
 * picture. Narrower screens would have to crop the *sides* of a landscape
 * film to fill their height, so they size the hero to the film instead: the
 * whole frame on a phone, most of it on a tablet. The doubled class is only
 * there to outrank the page's own height, wherever in the file that sits.
 */
.md-page-hero.md-page-hero--film {
	height: 100vh;
	height: 100svh;
	min-height: 600px;
}

.md-page-hero--film .md-hero__media video {
	object-position: center 32%;
}

@media (max-width: 1023px) {
	.md-page-hero.md-page-hero--film {
		height: min(100svh, 70vw);
		min-height: 520px;
	}
}

@media (max-width: 767px) {
	.md-page-hero.md-page-hero--film {
		height: max(56.25vw, 340px);
		min-height: 0;
	}
}

/* FAQ: the shortest, washed from the left, with the search sitting beside it. */
.md-page-hero--faq {
	height: 520px;
}

.md-page-hero--faq .md-page-hero__scrim {
	background: linear-gradient(to right, rgba(28, 26, 23, 0.82), rgba(28, 26, 23, 0.4) 55%, rgba(28, 26, 23, 0.55));
}

.md-page-hero--faq .md-page-hero__copy {
	bottom: 88px;
}

.md-page-hero--faq .md-page-hero__headline {
	font-size: 70px;
	line-height: 1.02;
}

.md-page-hero__copy--split {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 60px;
	max-width: none;
}

.md-faq__hero-search {
	flex: 0 0 300px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(250, 248, 245, 0.45);
	color: var(--bronze-light);
	font-size: 14.5px;
}

.md-faq__hero-search input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	border: 0;
	background: transparent;
	color: var(--cream);
	font-family: var(--text);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.1em;
}

.md-faq__hero-search input::placeholder {
	color: var(--sand);
	opacity: 1;
}

.md-faq__hero-search input:focus {
	outline: none;
}

.md-faq__hero-search:focus-within {
	border-bottom-color: var(--bronze-light);
}

@media (max-width: 1199px) {
	.md-page-hero--work {
		height: 460px;
	}

	.md-page-hero--work .md-page-hero__headline {
		font-size: 48px;
	}

	.md-page-hero--team {
		height: 440px;
	}

	.md-page-hero--team .md-page-hero__headline {
		font-size: 44px;
	}

	.md-page-hero--faq {
		height: 400px;
	}

	.md-page-hero--faq .md-page-hero__headline {
		font-size: 42px;
	}

	.md-page-hero--team .md-page-hero__copy,
	.md-page-hero--faq .md-page-hero__copy {
		bottom: 56px;
	}
}

@media (max-width: 1023px) {
	.md-page-hero--work,
	.md-page-hero--team {
		height: 420px;
	}

	.md-page-hero--faq {
		height: 380px;
	}

	.md-page-hero--work .md-page-hero__headline,
	.md-page-hero--team .md-page-hero__headline,
	.md-page-hero--faq .md-page-hero__headline {
		font-size: 40px;
	}

	.md-page-hero__copy--split {
		display: block;
	}

	.md-faq__hero-search {
		margin-top: 26px;
		max-width: 300px;
	}
}

@media (max-width: 767px) {
	.md-page-hero--work,
	.md-page-hero--team,
	.md-page-hero--faq {
		height: 340px;
	}

	.md-page-hero--work .md-page-hero__headline,
	.md-page-hero--team .md-page-hero__headline,
	.md-page-hero--faq .md-page-hero__headline {
		font-size: 30px;
		line-height: 1.08;
	}

	.md-page-hero--team .md-page-hero__copy,
	.md-page-hero--faq .md-page-hero__copy {
		bottom: 30px;
	}

	.md-faq__hero-search {
		margin-top: 18px;
		max-width: none;
	}
}

/* The questions column, and the heading that counts itself. */
.md-faq {
	grid-template-columns: 300px 1fr;
	gap: 80px;
}

.md-faq__count {
	font-family: var(--display);
	font-size: 44px;
	line-height: 1.04;
	color: var(--ink);
	margin: 0 0 22px;
}

.md-faq__none {
	padding: 40px 0;
	color: var(--muted);
	font-size: 14px;
}

@media (max-width: 1199px) {
	.md-faq {
		grid-template-columns: 260px 1fr;
		gap: 40px;
	}

	.md-faq__count {
		font-size: 32px;
	}
}

@media (max-width: 1023px) {
	.md-faq {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

@media (max-width: 767px) {
	.md-faq__count {
		font-size: 27px;
		margin-bottom: 14px;
	}
}

/* A group heading whose questions have all been filtered out goes with them. */
[data-md-faq-group].is-hidden {
	display: none;
}

/* ==========================================================================
   23. Home hero: the slideshow and the opening sequence
   --------------------------------------------------------------------------
   Photographs dissolve into one another while drifting slowly inward. Each one
   is fully settled for a set number of seconds, and the dissolve happens on top
   of that rather than eating into it.

   Driven by one looping keyframe with a staggered start per photograph, rather
   than a timer flipping classes. That matters: a timer accumulates drift, and
   the wrap from the last photograph back to the first lands as a visible jolt.
   A single animation of a fixed length, offset per slide, has no seam at all -
   the loop point is indistinguishable from any other change.

   The keyframe percentages depend on how many photographs there are, so the
   rule itself is written by assets/js/theme.js at load. Everything else lives
   here.
   ========================================================================== */

.md-hero__slides {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.md-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	will-change: opacity, transform;
	backface-visibility: hidden;
}

/*
 * Before the script runs - and if it never does - the first photograph is
 * simply the hero. The slideshow is an enhancement on top of a working page.
 */
.md-slide:first-child,
.md-slide.is-static {
	opacity: 1;
}

.md-slide img,
.md-slide .md-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	/* One still photograph, no drift, no dissolve. */
	.md-slide {
		animation: none !important;
		opacity: 0;
	}

	.md-slide:first-child {
		opacity: 1;
	}
}

/* --- The opening sequence ------------------------------------------------ */

/*
 * The rule, the label, then each line of the headline, then the line beneath -
 * arriving in that order rather than all at once. Only ever plays on load, on
 * whichever page hero carries the hooks - Home, Services, Our Work, Team, FAQ.
 */
html.md-js body.md-motion [data-md-intro] {
	opacity: 0;
	transform: translateY(16px);
}

html.md-js body.md-motion [data-md-intro].is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity 900ms cubic-bezier(0.2, 0, 0.2, 1),
		transform 900ms cubic-bezier(0.2, 0, 0.2, 1);
}

.md-home-hero__headline .md-line,
.md-svc-hero__headline .md-line {
	display: block;
}

/* --- The Services hero drawing itself -------------------------------------
 *
 * In the order a sheet is actually produced: the grid is laid down first, left
 * to right, the light comes up behind it, and then the plan is drawn on top.
 * Lines are not faded in - each one grows from one end, horizontals from the
 * left and verticals from the top, so the drawing is made rather than revealed.
 * Arcs, the stair, the labels and the dimension strings arrive as ink instead,
 * because a door swing does not get drawn from one end.
 */

/* The grid, ruled left to right. */
html.md-js body.md-motion .md-svc-hero--draw .md-svc-hero__grid {
	clip-path: inset(0 100% 0 0);
}

html.md-js body.md-motion .md-svc-hero--draw.is-in .md-svc-hero__grid {
	clip-path: inset(0 0 0 0);
	transition: clip-path 980ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* The light behind it, a beat later. */
html.md-js body.md-motion .md-svc-hero--draw .md-svc-hero__glow {
	opacity: 0;
}

html.md-js body.md-motion .md-svc-hero--draw.is-in .md-svc-hero__glow {
	opacity: 1;
	transition: opacity 1100ms ease 320ms;
}

/*
 * The drawing itself. Each part is told which way it runs, and from where, by
 * the script - a line that runs across grows from its left end, one that runs
 * down grows from its top, and anything that is neither simply arrives.
 */
html.md-js body.md-motion .md-plan--draw > * {
	opacity: 0;
	transform: var(--draw-from, none);
	transform-origin: var(--draw-origin, center);
}

html.md-js body.md-motion .md-plan--draw.is-in > * {
	opacity: 1;
	transform: none;
	transition:
		opacity 300ms ease var(--draw-delay, 0ms),
		transform 520ms cubic-bezier(0.2, 0, 0.2, 1) var(--draw-delay, 0ms);
}

/*
 * The stair climbs. Its treads are grandchildren of the plan, so they are not
 * caught by the rule above and need their own: each one sweeps in from the
 * left, and the script gives them rising delays so the flight builds upward
 * from the bottom tread rather than appearing as a block.
 */
html.md-js body.md-motion .md-plan--draw .md-plan__stair > * {
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left center;
}

html.md-js body.md-motion .md-plan--draw.is-in .md-plan__stair > * {
	opacity: 1;
	transform: none;
	transition:
		opacity 200ms ease var(--draw-delay, 0ms),
		transform 360ms cubic-bezier(0.2, 0, 0.2, 1) var(--draw-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	html.md-js body.md-motion .md-svc-hero--draw .md-svc-hero__grid,
	html.md-js body.md-motion .md-svc-hero--draw.is-in .md-svc-hero__grid {
		clip-path: none;
		transition: none;
	}

	html.md-js body.md-motion .md-svc-hero--draw .md-svc-hero__glow,
	html.md-js body.md-motion .md-svc-hero--draw.is-in .md-svc-hero__glow,
	html.md-js body.md-motion .md-plan--draw > *,
	html.md-js body.md-motion .md-plan--draw.is-in > *,
	html.md-js body.md-motion .md-plan--draw .md-plan__stair > *,
	html.md-js body.md-motion .md-plan--draw.is-in .md-plan__stair > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.md-slide {
		transition: none;
	}

	.md-slide.is-moving img {
		transition: none;
		transform: none;
	}

	html.md-js body.md-motion [data-md-intro],
	html.md-js body.md-motion [data-md-intro].is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.md-teamgroup__track {
		transition: none;
	}

	.md-menu,
	.md-menu.is-open,
	body.md-motion .md-menu__top,
	body.md-motion .md-menu__link,
	body.md-motion .md-menu__cta,
	body.md-motion .md-menu__studio {
		transition: none;
		transform: none;
	}

	body.md-motion .md-menu__top,
	body.md-motion .md-menu__link,
	body.md-motion .md-menu__cta,
	body.md-motion .md-menu__studio {
		opacity: 1;
	}
}

/*
 * Freezes the carousel for a silent re-placement: the strip is hopped back to
 * its equivalent position at the moment the two copies look identical, and
 * nothing - strip, card widths, or the featured treatment - may animate while
 * that happens.
 */
.md-cards__track.is-instant,
.md-cards__track.is-instant .md-cards__item,
.md-cards__track.is-instant .md-cards__frame img,
.md-cards__track.is-instant .md-cards__frame .md-placeholder,
.md-cards__track.is-instant .md-cards__overlay,
.md-cards__track.is-instant .md-cards__label,
.md-cards__track.is-instant .md-cards__caption {
	transition: none !important;
}

/* --- Testimonials: attribution, links, and the longer reviews ------------- */

.md-quotes__note {
	font-size: 14px;
	line-height: 1.7;
	color: var(--on-dark-4);
	margin: 0 0 26px;
	max-width: 300px;
}

.md-quotes__role {
	display: block;
	font-size: 9.5px;
	font-weight: 300;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--on-dark-4);
	margin-top: 4px;
}

.md-quotes__links {
	margin-top: 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.md-quotes__links a {
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--bronze-light);
	border-bottom: 1px solid var(--rule-dark);
	padding-bottom: 6px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.md-quotes__links a:hover,
.md-quotes__links a:focus-visible {
	color: var(--cream);
	border-bottom-color: var(--bronze-light);
}

/* Reviews run to whatever length they run to; the type steps down instead. */
.md-quotes__text p {
	margin: 0 0 0.7em;
}

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

.md-quotes__text--sm {
	font-size: 25px;
	line-height: 1.48;
}

.md-quotes__text--xs {
	font-size: 21px;
	line-height: 1.55;
}

.md-quotes__person[hidden] {
	display: none;
}

@media (max-width: 1199px) {
	.md-quotes__note {
		max-width: none;
	}

	.md-quotes__text--sm {
		font-size: 19px;
	}

	.md-quotes__text--xs {
		font-size: 17px;
	}

	.md-quotes__links {
		flex-direction: row;
		gap: 24px;
		flex-wrap: wrap;
	}
}

@media (max-width: 767px) {
	.md-quotes__note {
		font-size: 13px;
		margin-bottom: 20px;
	}

	.md-quotes__text--sm {
		font-size: 17px;
	}

	.md-quotes__text--xs {
		font-size: 15px;
	}
}

/* --- Testimonials: arrows that stay put ---------------------------------- */

/*
 * The reviews run from six words to three paragraphs. With the arrows sitting
 * after the quote they moved hundreds of pixels between one review and the
 * next, so you could not click twice without chasing them. They now share a
 * fixed row with the quotation mark at the top of the panel, where the length
 * of the review cannot reach them.
 *
 * This moves them from where the design drew them - bottom left of the panel -
 * and is the one change here made for use rather than for looks.
 */
.md-quotes__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 44px;
	margin-bottom: 30px;
}

.md-quotes__controls {
	margin-top: 0;
	flex: 0 0 auto;
}

.md-quotes__panel .md-quotes__text {
	margin-top: 0;
}

/*
 * A floor under the quote so the section does not visibly shrink and grow as
 * the shorter reviews come round. Long ones are still free to run on.
 */
[data-md-quote-panel] {
	min-height: 320px;
}

@media (max-width: 1199px) {
	.md-quotes__top {
		margin-bottom: 22px;
	}

	[data-md-quote-panel] {
		min-height: 260px;
	}
}

@media (max-width: 767px) {
	[data-md-quote-panel] {
		min-height: 210px;
	}
}

@media (max-width: 767px) {
	/*
	 * The drawing is deliberately wider than a phone and bleeds off both
	 * edges - it reads as a big drawing cropped by the frame rather than a
	 * small one floating in it. The east-wing names stand down, because at
	 * this size they land on the cropped edges and read as broken rather
	 * than as annotation. So do the eight small rooms' names and every area
	 * figure: their rooms are a few millimetres wide here, the type is not,
	 * and the names piled up on one another.
	 */
	.md-plan__label--east,
	.md-plan__label--small,
	.md-plan__area,
	.md-plan__tag {
		display: none;
	}
}

/* ==========================================================================
   Back to the top

   A long archive is a long way back. This sits out of the way in the corner
   and only turns up once there is enough page behind the reader to make it
   worth pressing - showing it at the top of a page would be offering to solve
   a problem nobody has yet.

   It is on every template rather than only the archive: the need is the same
   wherever a page runs long, and a control that appears on one page and not
   another reads as a fault rather than a decision.
   ========================================================================== */

.md-totop {
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 40;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--rule-dark);
	border-radius: 50%;
	background: rgba(28, 26, 23, 0.78);
	backdrop-filter: blur(8px);
	cursor: pointer;

	/*
	 * A real shadow, so it reads as floating above the page rather than
	 * embedded in it. Over a full-bleed photograph - the project pages are
	 * nothing but - a flat disc with no shadow looks stuck on.
	 */
	box-shadow: 0 6px 22px rgba(18, 17, 15, 0.32);

	/* Held out of the way until it is wanted. */
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition:
		opacity 260ms var(--ease),
		transform 260ms var(--ease),
		border-color 200ms ease;
}

.md-totop.is-in {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.md-totop:hover,
.md-totop:focus-visible {
	border-color: var(--bronze);
}

/* The arrow: two strokes, drawn rather than typed, so it sits on the pixel. */
.md-totop__arrow {
	display: block;
	width: 9px;
	height: 9px;
	margin-top: 3px;
	border-left: 1px solid var(--cream);
	border-top: 1px solid var(--cream);
	transform: rotate(45deg);
	transition: transform 200ms var(--ease);
}

.md-totop:hover .md-totop__arrow {
	transform: rotate(45deg) translate(2px, 2px);
}

@media (max-width: 767px) {
	.md-totop {
		right: 16px;
		bottom: 16px;
		width: 42px;
		height: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.md-totop,
	.md-totop__arrow {
		transition: none;
	}
}

/* An arrow with nowhere to go. Kept in place rather than removed, so the pair
   does not jump about as a reader steps along the row. */
.md-arrow[disabled] {
	opacity: 0.3;
	cursor: default;
}

/* --- The bot check on the contact form ------------------------------------
 *
 * Cloudflare's widget draws itself into this box. The height is reserved so
 * the button beneath does not jump when the widget arrives, and the box is
 * simply empty when the keys are not set.
 */
.md-turnstile {
	min-height: 65px;
	margin: 4px 0 8px;
}

/* --- A hero that steps back for its film -----------------------------------
 *
 * Added by the script once a hero's film has been playing for a few seconds:
 * every word on it fades - rule, label and headline together - and the wash
 * lightens, so the film can be seen. The
 * selectors are as long as they are because they have to outrank the opening
 * sequence's own rule for the same headline.
 */
.md-page-hero .md-page-hero__scrim {
	transition: opacity 1800ms ease;
}

html.md-js body.md-motion .md-page-hero.is-quiet .md-page-hero__copy [data-md-intro].is-in,
.md-page-hero.is-quiet .md-page-hero__copy,
.md-page-hero.is-quiet .md-page-hero__headline {
	opacity: 0;
	transition: opacity 1600ms ease;
}

.md-page-hero.is-quiet .md-page-hero__scrim {
	opacity: 0.5;
}

/* --- Privacy · Terms -------------------------------------------------------
 *
 * Beside the copyright on a desktop, led by a dot. On a phone there is no room
 * beside it - at 390px the pair ran into "Brooklyn, New York" - so it drops to
 * a row of its own under the copyright and loses the leading dot.
 */
.md-footer__legals {
	white-space: nowrap;
}

@media (max-width: 767px) {
	.md-footer__mobile-meta .md-footer__legals {
		display: block;
		margin-top: 8px;
	}

	.md-footer__mobile-meta .md-footer__sep--lead {
		display: none;
	}
}

@media (max-width: 767px) {
	.md-filters__aside {
		padding-right: var(--pad-x);
	}

	.md-filters__aside-rule {
		width: 18px;
	}
}

/* --- Fitting a screen ----------------------------------------------------
 *
 * Three places grew with the width of the screen until they were taller than
 * it: the category carousel, the leadership pair and the team groups. Each is
 * now capped by the height of the window instead, so the heading, the
 * pictures and the captions of one section sit inside one screen on a
 * desktop. The pictures keep their proportions; only their size changes, and
 * only on a wide, short window. A window tall enough sees no difference.
 */
@media (min-width: 1200px) and (min-height: 620px) {
	/*
	 * Five cards and four gaps wide, where the FEATURED card - the tall one, which
	 * sets the section's height - is at most as tall as the window less the heading,
	 * captions, padding and the bar (about 400px); the ordinary cards follow at
	 * 1/1.423 of it. The row
	 * keeps to the right, under the arrows, with the large card toward them.
	 */
	/*
	 * The category cards used to be capped here by narrowing the whole row and
	 * pushing it to the right. Now the row always spans the full width: the
	 * script counts how many cards fit under the height cap and sets
	 * --cards-n (see .md-cards__item), so the strip runs edge to edge with the
	 * featured card still second from the right.
	 */

	/* The two leaders: each portrait no taller than the window less the name and role beneath it. */
	.md-leadpair {
		max-width: calc(2 * ((100svh - 330px) / 1.1333) + var(--col-gap));
	}

	/* A group of three, the same way. */
	.md-teamgroup__grid {
		max-width: calc(3 * ((100svh - 360px) / 1.1333) + 2 * 30px);
	}
}

/* --- The dark wash over a hero -------------------------------------------
 *
 * Chosen in the admin on the Team page: automatic (on over a photograph, off
 * over the film), or on, or off. Off removes it entirely, so the film is seen
 * as shot.
 */
.md-page-hero--no-scrim .md-page-hero__scrim {
	display: none;
}

/* --- The film hero on a phone --------------------------------------------
 *
 * A phone's film is a short strip, and words laid over it had nowhere to go:
 * they covered the picture and, once faded, left a title-less strip. On a
 * phone the words sit beneath the film instead, on the page, in ink - and
 * they stay: the fade is for words that are in the film's way, and these are
 * not.
 */
@media (max-width: 767px) {
	.md-page-hero.md-page-hero--film {
		height: auto;
		min-height: 0;
		background: var(--cream);
	}

	.md-page-hero--film .md-hero__media {
		position: relative;
		height: 56.25vw;
	}

	.md-page-hero--film .md-page-hero__scrim {
		display: none;
	}

	.md-page-hero--film .md-page-hero__copy {
		position: static;
		max-width: none;
		padding: 26px var(--pad-x) 8px; /* in the flow, the side margins come from padding, not left/right */
	}

	.md-page-hero--film .md-page-hero__headline {
		color: var(--ink);
		font-size: 34px;
	}

	.md-page-hero--film .md-eyebrow--light {
		color: var(--bronze);
	}

	.md-page-hero--film .md-rule--light {
		background: var(--bronze);
	}

	html.md-js body.md-motion .md-page-hero--film.is-quiet .md-page-hero__copy [data-md-intro].is-in,
	.md-page-hero--film.is-quiet .md-page-hero__copy {
		opacity: 1;
	}
}

/*
 * On a phone the film strip began under the overlaid header, so its top - the
 * ceiling, the lights - was hidden behind the bar and the film looked cut off.
 * Where a page holds a film hero, the header on a phone is a solid ink bar in
 * the flow above the film instead of a transparent one laid over it: the
 * white wordmark sits on ink, and the film starts whole beneath it. Browsers
 * without :has() keep the overlay, which still works.
 */
@media (max-width: 767px) {
	.md-nav-overlaid:has(.md-page-hero--film) .md-header {
		position: relative;
		background: var(--ink);
	}
}

/* --- The journal ---------------------------------------------------------- */

/*
 * The index's lead picture and the article's header used to take their size
 * from the picture. On a wide monitor the lead picture was taller than the
 * screen, and an article's header grew to fit a portrait photograph and shrank
 * for a landscape one, so every article opened at a different height. Both are
 * now held: the lead picture is capped by the window, and the article header
 * is one fixed height with the photograph cropped to fill its half - the same
 * height for every article, whatever the picture.
 */
@media (min-width: 1024px) {
	.md-lead-post__frame {
		max-height: calc(100svh - 440px);
		min-height: 320px;
	}

	.md-lead-post__frame img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.md-article-hero {
		height: min(600px, 68svh);
		min-height: 460px;
	}
}

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

/*
 * An article's photographs stand beside the words, in the column that was
 * empty, rather than in a heap after them: a stack that stays in view as the
 * words scroll past. On narrower screens they follow the words, one after
 * another.
 */
@media (min-width: 1200px) {
	.md-article-body {
		/* The pictures take whatever width the screen has left of the words. */
		grid-template-columns: 150px minmax(0, 640px) minmax(0, 1fr);
	}

	/*
	 * The collage is pinned beside the words rather than scrolling with
	 * them - it was a scrolling stack, which fought the page's own scroll.
	 * It is worked out to fit under the bar whole (see single.php), so
	 * nothing here scrolls.
	 */
	.md-article-gallery {
		position: sticky;
		top: calc(var(--md-bar-h) + 24px);
		align-self: start;
	}
}

.md-article-gallery {
	--collage-gutter: 14px;
	--collage-h: 200px; /* a trailing picture that could not be justified */
}

/* Centred in the space beside the words, not pressed up against them. */
.md-article-gallery .md-collage {
	margin-left: auto;
	margin-right: auto;
}

/* A picture on a row of its own spans the row, in the landscape frame single.php gives it. */
.md-article-gallery .md-collage__row > .md-collage__item:only-child {
	flex: 1 1 100%;
	width: 100%;
}

@media (max-width: 1199px) {
	.md-article-gallery {
		grid-column: 1 / -1;
		margin-top: 30px;
	}

	.md-article-gallery .md-collage {
		max-width: none !important;
	}
}