/*
Theme Name: MM8 Studio
Theme URI: https://mm8.studio
Author: MM8 Studio
Description: Design led business systems studio theme. Architectural Product direction: restraint, large typography, precise interface demonstrations, generous space.
Version: 2.1.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.1
License: Proprietary
Text Domain: mm8-theme
*/

/* ==================================================================
   1. Tokens
   ================================================================== */
:root {
	/* Colour */
	--color-canvas: #FFFFFF;
	--color-surface: #F5F5F7;
	/* Ink and action follow the brand kit (BRAND/BRAND-README.md) since
	   8 October 2026: near black #0a0a0a and MM8 blue #2563eb, the blue already
	   used by the square in the mark. Was #1D1D1F and #0066CC. */
	--color-ink: #0a0a0a;
	--color-muted: #6E6E73;
	--color-line: #D2D2D7;
	--color-dark: #111214;
	--color-stone: #E8E5DF;
	--color-action: #2563eb;
	--color-success: #34A853;
	--color-warning: #FF453A;

	/* Type families */
	--font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-technical: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Type scale.
	   The fluid ranges hit the handoff's stated minimums at 390px, the small
	   mobile check width, and ease below them only between 320px and 389px
	   where the stated floor would clip. Section 17 requires no clipping and no
	   horizontal scroll at 320px; that requirement wins. */
	--type-hero: clamp(2.125rem, 1.444rem + 3.409vw, 4rem);
	--type-section: clamp(2rem, 1.727rem + 1.364vw, 2.75rem);
	--type-card: clamp(1.5rem, 1.364rem + 0.682vw, 1.875rem);
	--type-card-sm: clamp(1.5rem, 1.375rem + 0.9vw, 2.125rem);
	--type-body-large: clamp(1.25rem, 1.2rem + 0.16vw, 1.375rem);
	--type-body: clamp(0.9375rem, 0.9rem + 0.19vw, 1.125rem);
	--type-label: clamp(0.5rem, 0.475rem + 0.09vw, 0.625rem);

	/* Layout */
	--layout-max: 1400px;
	--layout-gutter: 15px;
	--section-space: 90px;
	--card-radius-large: 28px;
	--card-radius-medium: 22px;
	--control-radius: 999px;
	--line-standard: 1px solid var(--color-line);

	/* Motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur-fast: 180ms;
	--dur-mid: 280ms;
	--dur-slow: 450ms;
}

@media (min-width: 900px) {
	:root {
		--layout-gutter: 32px;
		--section-space: 130px;
	}
}

@media (min-width: 1200px) {
	:root {
		--section-space: 170px;
	}
}

/* ==================================================================
   2. Reset and base
   ================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--color-canvas);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--type-body);
	font-weight: 400;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	margin: 0;
	text-wrap: balance;
}

p { margin: 0; }

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

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* Focus is never removed. Every interactive element shows a clear ring. */
:focus-visible {
	outline: 2px solid var(--color-action);
	outline-offset: 3px;
	border-radius: 4px;
}

.section--dark :focus-visible,
.footer :focus-visible {
	outline-color: #FFFFFF;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--color-ink);
	color: #FFFFFF;
	padding: 14px 20px;
	border-radius: 0 0 12px 0;
	font-size: 0.9375rem;
}

.skip-link:focus {
	left: 0;
}

/* ==================================================================
   3. Type utilities
   ================================================================== */
.type-hero {
	font-size: var(--type-hero);
	line-height: 0.92;
	letter-spacing: -0.07em;
	font-weight: 700;
}

.type-section {
	font-size: var(--type-section);
	line-height: 0.98;
	letter-spacing: -0.06em;
	font-weight: 600;
}

.type-card {
	font-size: var(--type-card);
	line-height: 1.02;
	letter-spacing: -0.05em;
	font-weight: 600;
}

.type-card-sm {
	font-size: var(--type-card-sm);
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 600;
}

.type-body-large {
	font-size: var(--type-body-large);
	line-height: 1.45;
	letter-spacing: -0.01em;
}

.eyebrow {
	font-family: var(--font-technical);
	font-size: var(--type-label);
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 20px;
}

/* Long unbroken words must never push the page sideways. */
.type-hero,
.type-section,
.type-card {
	overflow-wrap: break-word;
}

/* ==================================================================
   4. Layout
   ================================================================== */
.container {
	width: 100%;
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--layout-gutter);
}

.section {
	padding-block: var(--section-space);
}

.section--surface { background: var(--color-surface); }
.section--stone { background: var(--color-stone); }

.section--dark {
	background: var(--color-dark);
	color: #FFFFFF;
}

.section--dark .eyebrow { color: rgba(255, 255, 255, 0.55); }
.section--dark .section-head__body { color: rgba(255, 255, 255, 0.72); }

.section-head {
	max-width: 60ch;
	margin-bottom: 56px;
}

.section-head__body {
	font-size: var(--type-body-large);
	line-height: 1.45;
	color: var(--color-muted);
	margin-top: 24px;
	max-width: 52ch;
}

.grid {
	display: grid;
	gap: 20px;
}

@media (min-width: 900px) {
	.grid { gap: 24px; }
	.grid--2 { grid-template-columns: repeat(2, 1fr); }
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ==================================================================
   5. Controls
   ================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: var(--control-radius);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-align: center;
	/* Declared explicitly so a <button> can never fall through to the user
	   agent's default button face. A missing variant should degrade to a
	   readable transparent control, not to near-white on near-white. */
	background: transparent;
	color: inherit;
	transition: background var(--dur-fast) var(--ease),
	            color var(--dur-fast) var(--ease),
	            border-color var(--dur-fast) var(--ease),
	            transform var(--dur-fast) var(--ease);
}

.btn[disabled],
.btn[aria-disabled="true"] {
	cursor: default;
	transform: none;
}

.btn--compact { min-height: 44px; padding: 11px 20px; }

.btn--primary {
	background: var(--color-ink);
	color: #FFFFFF;
}

.btn--primary:hover { background: #000000; transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }

.section--dark .btn--primary,
.footer .btn--primary {
	background: #FFFFFF;
	color: var(--color-ink);
}

.section--dark .btn--primary:hover,
.footer .btn--primary:hover { background: var(--color-stone); }

.btn--secondary {
	background: transparent;
	color: var(--color-ink);
	border-color: var(--color-line);
}

.btn--secondary:hover {
	border-color: var(--color-ink);
	transform: translateY(-1px);
}

.section--dark .btn--secondary {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.28);
}

.section--dark .btn--secondary:hover { border-color: #FFFFFF; }

.btn--quiet {
	background: transparent;
	color: var(--color-action);
	padding: 12px 0;
	min-height: 44px;
	justify-content: flex-start;
	border-radius: 4px;
}

.btn--quiet::after {
	content: "→";
	transition: transform var(--dur-fast) var(--ease);
}

.btn--quiet:hover::after { transform: translateX(4px); }

.btn[aria-disabled="true"],
.btn:disabled {
	opacity: 0.45;
	pointer-events: none;
}

/* ==================================================================
   6. Navigation
   ================================================================== */
.nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur-fast) var(--ease),
	            background var(--dur-fast) var(--ease);
}

.nav.is-scrolled { border-bottom-color: var(--color-line); }

.nav__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 68px;
}

/* The brand link now holds the inline horizontal lockup. The SVG inherits the
   surrounding colour through currentColor, so the same markup is correct on the
   light header and the dark footer; only the fixed blue square never inherits.
   The font declarations remain as the fallback if the asset is ever missing. */
.nav__brand {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: -0.05em;
	margin-right: auto;
	display: inline-flex;
	align-items: center;
	color: var(--color-ink);
}

.nav__brand svg {
	display: block;
	height: 26px;
	width: auto;
}

.footer .nav__brand,
.section--dark .nav__brand {
	color: #FFFFFF;
}

.footer__brand-link svg {
	height: 30px;
}

@media (max-width: 599px) {
	.nav__brand svg { height: 22px; }
}

.nav__desktop { display: none; }

.nav__list {
	display: flex;
	align-items: center;
	gap: 36px;
}

/* Values from the approved header (HOMEPAGE_2026-10-08/index.html): 15px,
   weight 500, ink, blue on hover. 44px tall so each link is a full size target. */
.nav__list a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-ink);
	transition: color var(--dur-fast) var(--ease);
}

.nav__list a:hover { color: var(--color-action); }
.nav__list a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* The small blue square that sits after Contact. */
.nav__square {
	width: 8px;
	height: 8px;
	background: var(--color-action);
}

.nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 16px 10px 12px;
	background: transparent;
	border: 1px solid var(--color-line);
	border-radius: var(--control-radius);
	font-size: 0.875rem;
	font-weight: 500;
}

.nav__toggle-bars {
	display: grid;
	gap: 4px;
	width: 16px;
}

.nav__toggle-bars i {
	display: block;
	height: 1.5px;
	background: var(--color-ink);
	transition: transform var(--dur-fast) var(--ease);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:first-child { transform: translateY(2.75px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:last-child { transform: translateY(-2.75px) rotate(-45deg); }

.nav__panel {
	border-top: var(--line-standard);
	background: var(--color-canvas);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}

.nav__panel.is-open {
	opacity: 1;
	transform: translateY(0);
}

.nav__panel-list {
	padding-block: 12px 8px;
}

.nav__panel-list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	border-bottom: var(--line-standard);
}


.nav__panel-list li:last-child a { border-bottom: 0; margin-bottom: 12px; }

.has-menu-open { overflow: hidden; }

/* The menu button shows below 820px, as the approved header does. The script
   in assets/js/mm8.js closes an open panel at the same width. */
@media (min-width: 820px) {
	.nav__inner { min-height: 80px; }
	.nav__desktop { display: block; }
	.nav__toggle { display: none; }
	.nav__panel { display: none; }
}

/* ==================================================================
   7. Hero
   ================================================================== */
.hero {
	padding-block: 72px 56px;
}

/* 16ch was tuned for the old six word headline. The current one is sixty six
   characters, and at 16ch it broke to four lines. Widened so it reads as two. */
.hero__heading { max-width: 26ch; }

.hero__body {
	margin-top: 28px;
	max-width: 48ch;
	color: var(--color-muted);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 40px;
}

@media (min-width: 900px) {
	.hero { padding-block: 120px 80px; }
	.hero__body { margin-top: 36px; }
	.hero__actions { margin-top: 52px; }
}

/* ==================================================================
   8. Proof strip
   ================================================================== */
.proof-strip {
	display: grid;
	gap: 14px;
	padding-block: 32px;
	border-top: var(--line-standard);
	border-bottom: var(--line-standard);
}

/* Section 17 forbids reading copy below 15px. These are short phrases but they
   are prose a visitor reads, not micro-labels like the eyebrow, so they sit at
   the 15px floor on small screens and are allowed to tighten only once there is
   room for it. Caught at 375px during the browser pass at 13px throughout. */
.proof-strip__item {
	font-family: var(--font-technical);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--color-muted);
	padding-left: 18px;
	position: relative;
}

@media (min-width: 900px) {
	.proof-strip__item {
		font-size: 0.8125rem;
	}
}

.proof-strip__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.58em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-action);
}

@media (min-width: 900px) {
	.proof-strip {
		grid-template-columns: repeat(4, 1fr);
		gap: 24px;
	}
}

/* ==================================================================
   9. Interface demonstration
   ================================================================== */
.demo {
	margin: 0;
	border: var(--line-standard);
	border-radius: var(--card-radius-large);
	background: var(--color-canvas);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 18px 48px -28px rgba(0, 0, 0, 0.22);
}

.demo__chrome {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 20px;
	border-bottom: var(--line-standard);
	background: var(--color-surface);
}

.demo__dots {
	display: flex;
	gap: 6px;
}

.demo__dots i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--color-line);
}

.demo__title {
	font-family: var(--font-technical);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--color-muted);
	text-transform: uppercase;
}

.demo__body { padding: 22px 20px 8px; }

.demo__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 12px;
	padding-bottom: 22px;
	border-bottom: var(--line-standard);
}

.demo__stat { display: grid; gap: 4px; }

.demo__stat-value {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
}

.demo__stat-value.is-success { color: var(--color-success); }
.demo__stat-value.is-action { color: var(--color-action); }

.demo__stat-label {
	font-family: var(--font-technical);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.demo__rows { padding-block: 6px; }

.demo__row {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 4px 14px;
	padding-block: 16px;
	border-bottom: var(--line-standard);
	align-items: start;
}

.demo__row:last-child { border-bottom: 0; }

.demo__row-time {
	font-family: var(--font-technical);
	font-size: 0.75rem;
	color: var(--color-action);
	padding-top: 2px;
}

.demo__row-main { display: grid; gap: 3px; }

.demo__row-title {
	font-weight: 500;
	font-size: 0.9375rem;
	letter-spacing: -0.01em;
}

.demo__row-body {
	font-size: 0.875rem;
	color: var(--color-muted);
	line-height: 1.5;
}

.demo__row-state {
	grid-column: 2;
	font-family: var(--font-technical);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-success);
}

.demo__caption {
	padding: 14px 20px 18px;
	border-top: var(--line-standard);
	background: var(--color-surface);
	font-family: var(--font-technical);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}

@media (min-width: 700px) {
	.demo__stats { grid-template-columns: repeat(4, 1fr); }
	.demo__body { padding: 28px 28px 10px; }
	.demo__row { grid-template-columns: 64px 1fr auto; align-items: center; }
	.demo__row-state { grid-column: 3; }
}

/* ==================================================================
   10. Cards
   ================================================================== */
.card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 24px 30px;
	background: var(--color-canvas);
	border: var(--line-standard);
	border-radius: var(--card-radius-medium);
	transition: border-color var(--dur-fast) var(--ease),
	            transform var(--dur-fast) var(--ease);
}

.section--surface .card { background: var(--color-canvas); }

.section--dark .card {
	background: rgba(255, 255, 255, 0.035);
	border-color: rgba(255, 255, 255, 0.12);
}

.card__label {
	font-family: var(--font-technical);
	font-size: var(--type-label);
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.card__heading { letter-spacing: -0.035em; }

.card--capability .card__heading,
.card--project .card__heading { max-width: 18ch; }

.card__body {
	color: var(--color-muted);
	max-width: 46ch;
}

.section--dark .card__body { color: rgba(255, 255, 255, 0.7); }

.card__link { transition: color var(--dur-fast) var(--ease); }
.card__link:hover { color: var(--color-action); }

.card--capability:hover,
.card--project:hover { border-color: var(--color-ink); }

.card__top { display: flex; justify-content: space-between; }

.pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: var(--control-radius);
	background: var(--color-surface);
	font-family: var(--font-technical);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ink);
}

.section--dark .pill {
	background: rgba(255, 255, 255, 0.1);
	color: #FFFFFF;
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tag {
	font-family: var(--font-technical);
	font-size: 0.6875rem;
	letter-spacing: 0.05em;
	color: var(--color-muted);
	border: var(--line-standard);
	border-radius: var(--control-radius);
	padding: 5px 10px;
}

.card--pov { gap: 12px; }

.card__declaration {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.35rem + 0.7vw, 1.875rem);
	font-weight: 600;
	letter-spacing: -0.04em;
}

.card--engagement { gap: 12px; }

.card--engagement.is-featured {
	border-color: var(--color-ink);
	box-shadow: 0 18px 48px -30px rgba(0, 0, 0, 0.3);
}

.card__price {
	font-family: var(--font-technical);
	font-size: 1rem;
	font-weight: 500;
	color: var(--color-action);
	letter-spacing: 0.01em;
}

.check-list {
	display: grid;
	gap: 10px;
	margin-top: 6px;
}

.check-list li {
	position: relative;
	padding-left: 24px;
	font-size: 0.9375rem;
	color: var(--color-muted);
	line-height: 1.5;
}

/* A capability that now has its own System page links to it. Ink rather than
   the action blue, because a list of eight items all in blue would read as a
   navigation block; the underline carries the affordance. */
.check-list li a {
	color: var(--color-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: var(--color-line);
	transition: text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.check-list li a:hover {
	color: var(--color-action);
	text-decoration-color: var(--color-action);
}

.section--dark .check-list li a {
	color: #FFFFFF;
	text-decoration-color: rgba(255, 255, 255, 0.4);
}

.section--dark .check-list li a:hover {
	text-decoration-color: #FFFFFF;
}

.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 12px;
	height: 7px;
	border-left: 1.5px solid var(--color-action);
	border-bottom: 1.5px solid var(--color-action);
	transform: rotate(-45deg);
}

.support-note {
	margin-top: 28px;
	max-width: 62ch;
	color: var(--color-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.support-note a {
	color: var(--color-action);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* The Canadian currency line that sits under every pricing area. Deliberately
   quieter than the support note above it: it is a clarification, not an offer.
   Values copied from .support-note so the two read as one family. */
.currency-note {
	margin-top: 12px;
	max-width: 62ch;
	color: var(--color-muted);
	font-size: 0.875rem;
	line-height: 1.55;
}

.section--dark .currency-note {
	color: rgba(255, 255, 255, 0.6);
}

/* ==================================================================
   10a. Hosting and Care
   ================================================================== */
.care-proof {
	display: grid;
	border-top: var(--line-standard);
}

.care-proof li {
	display: grid;
	gap: 8px;
	padding-block: 24px;
	border-bottom: var(--line-standard);
}

.care-proof strong {
	font-size: 1.125rem;
	letter-spacing: -0.025em;
}

.care-proof span,
.care-plan__identity p,
.care-portal p {
	color: var(--color-muted);
}

.care-plan-list {
	border-top: var(--line-standard);
}

.care-plan {
	display: grid;
	gap: 32px;
	padding-block: 40px;
	border-bottom: var(--line-standard);
}

.care-plan.is-featured {
	position: relative;
}

.care-plan.is-featured::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--layout-gutter));
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--color-action);
}

.care-plan__identity {
	display: grid;
	gap: 14px;
}

.care-plan__identity > p:last-child {
	max-width: 40ch;
}

.care-plan__pricing {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-content: start;
}

.care-plan__pricing > div {
	display: grid;
	gap: 4px;
}

.care-plan__price {
	font-size: clamp(2rem, 1.6rem + 1.2vw, 3rem);
	font-weight: 600;
	letter-spacing: -0.055em;
	line-height: 1;
}

.care-plan__price--annual { color: var(--color-action); }

.care-plan__term {
	font-family: var(--font-technical);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.care-plan__scope {
	display: grid;
	gap: 24px;
	align-content: start;
}

.care-plan__actions {
	display: grid;
	justify-items: start;
	gap: 8px;
}

.care-plan__actions .btn--primary {
	width: 100%;
}

.care-market-note {
	margin-top: 36px;
	padding: 22px 24px;
	max-width: 78ch;
	border-radius: var(--card-radius-medium);
	background: var(--color-canvas);
	color: var(--color-muted);
}

.care-boundary {
	display: grid;
	gap: 28px;
}

.care-boundary > div {
	display: grid;
	gap: 8px;
	padding-top: 22px;
	border-top: var(--line-standard);
}

.care-boundary h3 {
	font-size: 1.125rem;
}

.care-boundary > div p { color: var(--color-muted); }

.care-ownership {
	display: grid;
	gap: 48px;
}

.care-portal {
	display: grid;
	gap: 16px;
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--card-radius-large);
}

.section--dark .care-portal p:last-child {
	color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 760px) {
	.care-proof { grid-template-columns: repeat(3, 1fr); }
	.care-proof li { padding: 26px 28px; border-right: var(--line-standard); }
	.care-proof li:first-child { padding-left: 0; }
	.care-proof li:last-child { padding-right: 0; border-right: 0; }
	.care-plan { grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr); }
	.care-plan__scope { grid-column: 1 / -1; }
	.care-ownership { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); align-items: end; }
}

@media (min-width: 1100px) {
	.care-plan { grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr) minmax(320px, 0.9fr); gap: 54px; }
	.care-plan__scope { grid-column: auto; }
}

@media (min-width: 900px) {
	.card { padding: 34px 32px 36px; }
}

/* ==================================================================
   11. Timeline and process
   ================================================================== */
.timeline {
	display: grid;
	gap: 0;
	border-top: var(--line-standard);
}

.section--dark .timeline { border-color: rgba(255, 255, 255, 0.14); }

.timeline__step {
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 16px;
	padding-block: 22px;
	border-bottom: var(--line-standard);
	align-items: baseline;
}

.section--dark .timeline__step { border-color: rgba(255, 255, 255, 0.14); }

.timeline__time {
	font-family: var(--font-technical);
	font-size: 0.8125rem;
	color: var(--color-action);
}

.timeline__body { display: grid; gap: 6px; }

.timeline__title {
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
	font-weight: 600;
	letter-spacing: -0.03em;
}

.timeline__text {
	color: var(--color-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.section--dark .timeline__text { color: rgba(255, 255, 255, 0.66); }

.process { border-top: var(--line-standard); }

.process__row {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 8px 16px;
	padding-block: 26px;
	border-bottom: var(--line-standard);
}

.process__num {
	font-family: var(--font-technical);
	font-size: 0.8125rem;
	color: var(--color-muted);
	padding-top: 5px;
}

.process__main { display: grid; gap: 8px; }

.process__title {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
	font-weight: 600;
	letter-spacing: -0.035em;
}

.process__body {
	color: var(--color-muted);
	max-width: 56ch;
}

@media (min-width: 900px) {
	.process__row { grid-template-columns: 90px 1fr; }
	.timeline__step { grid-template-columns: 96px 1fr; padding-block: 28px; }
}

/* ==================================================================
   12. Journal
   ================================================================== */
.feature {
	display: grid;
	gap: 20px;
	padding-block: 8px 40px;
	border-bottom: var(--line-standard);
}

.feature__meta,
.card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-family: var(--font-technical);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: var(--color-muted);
	text-transform: uppercase;
}

.feature__heading { max-width: 22ch; }
.feature__heading a { transition: color var(--dur-fast) var(--ease); }
.feature__heading a:hover { color: var(--color-action); }

.feature__body {
	color: var(--color-muted);
	max-width: 60ch;
}

.feature__cue {
	font-family: var(--font-technical);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-action);
}

.card--article { gap: 12px; }

.card--article .card__heading {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.15;
}

.card--article .card__body { font-size: 0.9375rem; }

.card__topic { color: var(--color-action); }

.card__read {
	font-family: var(--font-technical);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-top: auto;
	padding-top: 6px;
}

.card--large .card__heading { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); }

.collection {
	padding-block: 48px 0;
	border-bottom: var(--line-standard);
	margin-bottom: 48px;
}

.collection:last-of-type { border-bottom: 0; }

.collection__head {
	display: grid;
	gap: 10px;
	margin-bottom: 28px;
}

.collection__title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.04em;
}

.collection__blurb {
	color: var(--color-muted);
	max-width: 58ch;
	font-size: 0.9375rem;
}

.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-block: 24px 40px;
}

.filter {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 9px 16px;
	border: var(--line-standard);
	border-radius: var(--control-radius);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-muted);
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.filter:hover { border-color: var(--color-ink); color: var(--color-ink); }

.filter[aria-current="true"] {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: #FFFFFF;
}

.pagination {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 48px;
	border-top: var(--line-standard);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: var(--line-standard);
	border-radius: var(--control-radius);
	font-size: 0.9375rem;
	color: var(--color-muted);
}

.pagination .page-numbers.current {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: #FFFFFF;
}

/* ==================================================================
   13. Article body
   ================================================================== */
.article-head {
	padding-block: 56px 40px;
	border-bottom: var(--line-standard);
}

.article-head__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	font-family: var(--font-technical);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 24px;
}

.article-head__title { max-width: 20ch; }

.article-body {
	max-width: 68ch;
	padding-block: 44px;
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	line-height: 1.68;
}

.article-body > * + * { margin-top: 1.35em; }

.article-body h2 {
	font-size: clamp(1.5rem, 1.3rem + 0.95vw, 2.125rem);
	letter-spacing: -0.04em;
	line-height: 1.1;
	margin-top: 2em;
}

.article-body h3 {
	font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	letter-spacing: -0.03em;
	margin-top: 1.8em;
}

.article-body a {
	color: var(--color-action);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-body ul { list-style: disc; padding-left: 1.3em; }
.article-body ol { list-style: decimal; padding-left: 1.3em; }
.article-body li + li { margin-top: 0.5em; }

.article-body blockquote {
	margin: 2em 0;
	padding-left: 22px;
	border-left: 2px solid var(--color-action);
	font-size: 1.15em;
	line-height: 1.45;
	letter-spacing: -0.02em;
	color: var(--color-ink);
}

.author-block {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 18px;
	align-items: start;
	padding: 28px 0 0;
	border-top: var(--line-standard);
	max-width: 68ch;
}

.author-avatar {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--color-ink);
	color: #FFFFFF;
	font-family: var(--font-technical);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
}

.author-block__name {
	font-size: 1.0625rem;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
}

.author-block p {
	color: var(--color-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* ==================================================================
   14. Forms
   ================================================================== */
.form-field {
	display: grid;
	gap: 8px;
	margin-bottom: 22px;
}

.form-field__label {
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.form-field__hint {
	font-size: 0.8125rem;
	color: var(--color-muted);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field select,
.form-field textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	min-height: 48px;
	padding: 13px 16px;
	background: var(--color-canvas);
	border: 1px solid var(--color-line);
	border-radius: 12px;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-ink);
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.form-field textarea,
.wpcf7 textarea {
	min-height: 150px;
	resize: vertical;
	line-height: 1.55;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--color-action);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
	border-color: var(--color-warning);
}

.form-field__error,
.wpcf7-not-valid-tip {
	display: block;
	font-size: 0.8125rem;
	color: var(--color-warning);
	font-weight: 500;
}

.wpcf7-response-output {
	margin: 24px 0 0 !important;
	padding: 16px 18px !important;
	border: 1px solid var(--color-line) !important;
	border-radius: 12px;
	font-size: 0.9375rem;
}

.wpcf7 form.sent .wpcf7-response-output { border-color: var(--color-success) !important; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--color-warning) !important; }

.wpcf7 input[type="submit"] {
	min-height: 48px;
	padding: 13px 28px;
	background: var(--color-ink);
	color: #FFFFFF;
	border: 0;
	border-radius: var(--control-radius);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease);
}

.wpcf7 input[type="submit"]:hover { background: #000000; }

.wpcf7-spinner { margin-left: 12px; }

/* Honeypot must never be visible or focusable. */
.mm8-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==================================================================
   15. Call to action
   ================================================================== */
.cta {
	display: grid;
	gap: 22px;
	justify-items: start;
	max-width: 34ch;
}

.cta__body {
	color: rgba(255, 255, 255, 0.72);
	max-width: 48ch;
}

.cta .btn { margin-top: 10px; }

/* ==================================================================
   16. Footer
   ================================================================== */
.footer {
	background: var(--color-dark);
	color: #FFFFFF;
	padding-block: 64px 40px;
}

.footer__grid {
	display: grid;
	gap: 40px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer__promise {
	margin-top: 18px;
	max-width: 34ch;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.footer__place {
	margin-top: 12px;
	font-family: var(--font-technical);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.footer__heading {
	font-family: var(--font-technical);
	font-size: var(--type-label);
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 18px;
}

.footer__col ul { display: grid; gap: 2px; }

.footer__col a {
	display: inline-block;
	padding-block: 9px;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.8);
	transition: color var(--dur-fast) var(--ease);
}

.footer__col a:hover { color: #FFFFFF; }

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: space-between;
	padding-top: 28px;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 700px) {
	.footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
}

/* ==================================================================
   16a. FAQ
   ================================================================== */
.faq { border-top: var(--line-standard); max-width: 90ch; }

.faq__item {
	display: grid;
	gap: 12px;
	padding-block: 30px;
	border-bottom: var(--line-standard);
}

.faq__q {
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
	letter-spacing: -0.035em;
	line-height: 1.15;
	max-width: 34ch;
}

.faq__a {
	color: var(--color-muted);
	max-width: 68ch;
	line-height: 1.6;
}

@media (min-width: 1000px) {
	.faq__item { grid-template-columns: 1fr 1.3fr; gap: 40px; padding-block: 36px; }
}

/* ==================================================================
   16b. Case studies
   ================================================================== */
.section--flush-top { padding-top: 0; }
.section-head--flush { margin-bottom: 32px; }

.section--cases { padding-top: 0; }

.case + .case {
	margin-top: var(--section-space);
	padding-top: var(--section-space);
	border-top: var(--line-standard);
}

.case__head {
	display: grid;
	gap: 18px;
	justify-items: start;
	margin-bottom: 40px;
}

.case__body { display: grid; gap: 32px; }

.case__section {
	display: grid;
	gap: 10px;
	padding-top: 24px;
	border-top: var(--line-standard);
}

.case__label {
	font-family: var(--font-technical);
	font-size: var(--type-label);
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.case__text { display: grid; gap: 16px; max-width: 66ch; }
.case__text p { color: var(--color-ink); }
.case__text p + p { color: var(--color-muted); }

.case__action { padding-top: 8px; }

@media (min-width: 900px) {
	.case__section {
		grid-template-columns: 200px 1fr;
		gap: 32px;
		padding-top: 28px;
	}
	.case__label { padding-top: 4px; }
}

/* ==================================================================
   17. Utilities
   ================================================================== */
.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;
}

.stack-lg > * + * { margin-top: 28px; }

.lede {
	font-size: var(--type-body-large);
	line-height: 1.45;
	color: var(--color-muted);
	max-width: 56ch;
}

.rule {
	height: 1px;
	background: var(--color-line);
	border: 0;
	margin-block: var(--section-space);
}

.note {
	padding: 18px 20px;
	border: 1px dashed var(--color-line);
	border-radius: var(--card-radius-medium);
	font-size: 0.9375rem;
	color: var(--color-muted);
	max-width: 62ch;
}

.two-col { display: grid; gap: 40px; }

@media (min-width: 900px) {
	.two-col { grid-template-columns: 1fr 1fr; gap: 64px; }
	.two-col--sticky > :first-child { position: sticky; top: 120px; align-self: start; }
}

/* ==================================================================
   18. Motion preferences
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==================================================================
   19. Admin bar offset
   ================================================================== */
@media screen and (max-width: 782px) {
	.admin-bar .nav { top: 46px; }
}

@media screen and (min-width: 783px) {
	.admin-bar .nav { top: 32px; }
}

/* ==================================================================
   Plain English block and three step visual
   ==================================================================
   Added 2026-09-10. Every value below is taken from a component that
   already exists rather than chosen fresh:

   - the number style copies .process__num exactly (font-technical,
     0.8125rem, color-muted), because that is how this site already
     labels an ordered step
   - the card border, radius and surface copy .capability-card
   - the section spacing uses the existing section tone classes
   - the connector uses --color-line, the same rule colour as
     .process__row's border-bottom

   The steps are an ordered list, not links or buttons. Nothing here is
   interactive and nothing should look as though it can be clicked.
   ================================================================== */

.plain__lede {
	max-width: 62ch;
	margin: 0 0 40px;
}

.plain__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.plain__step {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 8px 16px;
	align-items: start;
	padding: 24px 22px;
	background: var(--color-canvas);
	border: var(--line-standard);
	border-radius: var(--card-radius-medium);
}

/* Same treatment as .process__num, which is how the site already numbers
   an ordered step. */
.plain__num {
	font-family: var(--font-technical);
	font-size: 0.8125rem;
	color: var(--color-muted);
	padding-top: 3px;
}

.plain__label {
	font-size: 1rem;
	line-height: 1.45;
	color: var(--color-ink);
}

/* From 900px the three steps sit in one row with a quiet connector between
   them. Below that they stack in the same reading order, which is what the
   single column grid above already does, so no override is needed. */
@media (min-width: 900px) {
	.plain__steps {
		grid-template-columns: repeat(3, 1fr);
		gap: 0 44px;
	}

	.plain__step {
		position: relative;
	}

	.plain__step + .plain__step::before {
		content: "";
		position: absolute;
		left: -30px;
		top: 50%;
		width: 16px;
		height: 1px;
		background: var(--color-line);
	}
}

/* The deliverables list beside the price. On the dark investment panel the
   heading and items need the dark section treatment the rest of that panel
   already uses. */
.receives {
	margin-top: 34px;
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.section--surface .receives {
	border-top-color: var(--color-line);
}

.section--dark .receives .check-list li {
	color: rgba(255, 255, 255, 0.72);
}

/* The homepage trust line. Sits under the actions in the technical face, the
   same face the eyebrow above the heading uses, so the hero is bracketed by
   one voice. */
.hero__trust {
	margin-top: 30px;
	font-family: var(--font-technical);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	color: var(--color-muted);
}



/* Each sentence in a heading gets its own line. Left to wrap freely, a two
   sentence heading strands the first word of the second sentence at the end of
   the previous line, which reads as a mistake. A sentence still wraps within
   itself on a narrow screen; only the boundary between sentences is forced. */
.heading-line {
	display: block;
}

/* ==================================================================
   Homepage, 8 October 2026
   ==================================================================
   Every value below is copied from the approved page,
   MM8 Command Center/REBUILD/HOMEPAGE_2026-10-08/index.html, read at 1440
   wide. Where the theme's tokens and that page disagree, the homepage follows
   the page, scoped to .home-page so no other page moves:
   - section padding is 96px here, against the theme's 170px
   - eyebrows are 12px here, against the theme's 10px
   - headings are weight 800 with the page's own sizes and tracking
   The content width stays on the theme's own container (1400 less a 32px
   gutter), so the page lines up with the header and footer above and below
   it. That makes the content 56px wider than the drawing at 1440.
   ================================================================== */
.home-page {
	--home-text-2: #525252;
	--home-text-hero: #404040;
	--home-meta: #737373;
	--home-line: #e5e5e5;
	--home-rule: #ececec;
	--home-soft: #f5f5f5;
	--home-control-line: #d4d4d4;
	--home-on-dark: #d4d4d4;
	--home-on-dark-2: #a3a3a3;
	--home-dark-card: #111111;
	--home-dark-panel: #171717;
	--home-dark-line: #262626;
	--home-dark-line-2: #333333;
	--home-green: #15803d;
}

/* Square bullets and marks, never round. Blue unless told otherwise. */
.square {
	display: inline-block;
	flex: none;
	width: 12px;
	height: 12px;
	background: var(--color-action);
}

.square.is-ink { background: var(--color-ink); }
.square.is-white { background: #FFFFFF; }

.nowrap { white-space: nowrap; }

.home-page .eyebrow,
.home-contact .eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--home-text-2);
	margin: 0 0 16px;
}

.home-page .eyebrow .square { width: 10px; height: 10px; }

.home-section--dark :focus-visible,
.home-contact :focus-visible { outline-color: #FFFFFF; }

/* Sections ---------------------------------------------------------- */
.home-section { padding-block: 96px; }
.home-section--work { padding-block: 40px 96px; }
.home-section--ruled { border-top: 1px solid var(--home-rule); }
.home-section--surface { background: var(--home-soft); }

.home-section--dark {
	background: var(--color-ink);
	color: #FFFFFF;
}

.home-section--dark .eyebrow { color: var(--home-on-dark-2); }

/* Section head: eyebrow and heading left, a line or a link right ----- */
.home-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 48px;
}

.home-head__main {
	max-width: 640px;
	margin: 0;
}

/* As drawn: the work and journal heads run the full width beside their link,
   the automation head is a little wider than the rest. */
#work .home-head__main,
#journal .home-head__main {
	flex: 1 1 0;
	min-width: min(100%, 480px);
	max-width: none;
}
#automation .home-head__main { max-width: 700px; }

.home-page .type-section {
	font-size: clamp(2rem, 3.6vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-weight: 800;
}

#work .type-section { font-size: clamp(1.875rem, 3.4vw, 2.75rem); }
#journal .type-section { font-size: clamp(1.75rem, 3vw, 2.5rem); }

#work .home-head { margin-bottom: 32px; }
#automation .home-head { margin-bottom: 56px; }
#journal .home-head { margin-bottom: 40px; }

.home-head__aside {
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--home-text-2);
	max-width: 44ch;
}

.home-section--dark .home-head__aside { color: var(--home-on-dark); }

.home-head__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-ink);
	white-space: nowrap;
	transition: color var(--dur-fast) var(--ease);
}

.home-head__link:hover { color: var(--color-action); }

/* Pill buttons ------------------------------------------------------ */
.btn--pill {
	min-height: 56px;
	padding: 0 30px;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
}

.btn--pill-sm {
	min-height: 50px;
	padding: 0 26px;
	font-size: 0.9375rem;
}

.home-page .btn--primary {
	border-color: var(--color-ink);
}

.home-page .btn--primary:hover {
	background: var(--color-action);
	border-color: var(--color-action);
	color: #FFFFFF;
	transform: none;
}

.home-page .btn--secondary {
	background: #FFFFFF;
	border-color: var(--home-control-line);
}

.home-page .btn--secondary:hover {
	border-color: var(--color-ink);
	transform: none;
}

/* On the dark section the primary pill turns white, blue on hover. */
.home-section--dark .btn--primary {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--color-ink);
}

/* Hero -------------------------------------------------------------- */
.home-hero {
	min-height: 720px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.home-hero__main {
	padding-top: 72px;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.home-hero__heading {
	font-size: clamp(3rem, 8vw, 7.25rem);
	line-height: 0.92;
	letter-spacing: -0.055em;
	font-weight: 800;
	max-width: 15ch;
}

.home-hero__stop {
	width: 0.16em;
	height: 0.16em;
	margin-left: 0.08em;
}

.home-hero__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px 48px;
}

.home-hero__body {
	font-size: 1.375rem;
	line-height: 1.45;
	color: var(--home-text-hero);
	max-width: 40ch;
}

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.home-hero__strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px 24px;
	margin-top: 56px;
	padding: 22px 0 28px;
	border-top: 1px solid var(--home-line);
	font-family: var(--font-technical);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--home-text-2);
}

.home-hero__list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
}

/* Selected work ----------------------------------------------------- */
.work-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
	gap: 24px;
}

.work-tile {
	display: flex;
	flex-direction: column;
	gap: 18px;
	color: var(--color-ink);
	min-width: 0;
}

.work-tile__media {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: 12px;
	overflow: hidden;
	background: var(--home-dark-card);
}

.work-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/* A picture of an app on a white page (Orli): a hairline in the site's own
   rule colour, drawn over the picture, so its white edge does not dissolve
   into the white page around it. Same colour as .home-section--ruled. */
.work-tile__media--framed::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--home-rule);
	border-radius: inherit;
	pointer-events: none;
}

.work-tile__status {
	position: absolute;
	left: 16px;
	top: 16px;
	padding: 5px 9px;
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--color-ink);
	font-family: var(--font-technical);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.work-tile__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.work-tile__title {
	font-size: 1.625rem;
	letter-spacing: -0.03em;
	font-weight: 700;
	transition: color var(--dur-fast) var(--ease);
}

.work-tile--link:hover .work-tile__title { color: var(--color-action); }

.work-tile__body {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--home-text-2);
	max-width: 56ch;
}

.work-tile__tags {
	padding-top: 2px;
	font-family: var(--font-technical);
	font-size: 0.75rem;
	color: var(--home-text-2);
}

/* OLD DRAWN ORLI BOARD (all the .board rules below), NOT IN USE since job 163.
   Kept so it can come back; see mm8_old_drawn_pipeline_board() in inc/components.php.
   CSS blocks only, no screenshot. */
.board {
	aspect-ratio: 3 / 2;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 22px;
	border-radius: 12px;
	background: var(--color-ink);
	overflow: hidden;
}

.board__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-family: var(--font-technical);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--home-on-dark-2);
}

.board__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.board__label .square { width: 8px; height: 8px; }

.board__status {
	padding: 4px 9px;
	border: 1px solid var(--home-dark-line-2);
	border-radius: 999px;
	white-space: nowrap;
}

.board__cols {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
}

.board__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.board__name {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--home-dark-line-2);
	font-family: var(--font-technical);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--home-on-dark-2);
}

.board__col.is-active .board__name {
	color: #FFFFFF;
	border-bottom-color: var(--color-action);
}

.board__card {
	flex: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 52px;
	padding: 8px;
	border: 1px solid var(--home-dark-line);
	border-radius: 6px;
	background: var(--home-dark-panel);
}

.board__card.is-active { border-color: var(--color-action); }

.board__bar {
	display: block;
	height: 6px;
	background: #404040;
}

.board__card.is-active > .board__bar { background: var(--home-on-dark); }
.board__bar.is-dim { background: #2a2a2a; }
.board__bar.is-blue { background: var(--color-action); }
.board__bar.is-green { background: var(--home-green); }

.board__bars {
	display: flex;
	gap: 4px;
}

.board__modules {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	padding-top: 12px;
	border-top: 1px solid var(--home-dark-line);
	font-family: var(--font-technical);
	font-size: 0.625rem;
	letter-spacing: 0.04em;
	color: var(--home-meta);
}

/* Services ---------------------------------------------------------- */
.service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 20px;
}

.service-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px;
	border: 1px solid var(--home-line);
	border-radius: 16px;
	background: #FFFFFF;
	color: var(--color-ink);
	transition: border-color var(--dur-fast) var(--ease);
}

.service-card:hover { border-color: var(--color-ink); }

.service-card__num {
	font-family: var(--font-technical);
	font-size: 0.75rem;
	color: var(--home-text-2);
}

.service-card__main {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.service-card__title {
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	font-weight: 700;
}

.service-card__body {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--home-text-2);
}

.service-card__foot {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-top: 18px;
	border-top: 1px solid var(--home-rule);
}

.service-card__link {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-action);
}

.hosting-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 40px;
	margin-top: 48px;
	padding: 26px 32px;
	border-radius: 16px;
	background: var(--home-soft);
}

.hosting-strip__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hosting-strip__title {
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	font-weight: 700;
}

.hosting-strip__body {
	font-size: 0.9375rem;
	color: var(--home-text-2);
}

/* What are you building --------------------------------------------- */
.build-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 20px;
}

.build-tile {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	border: 1px solid var(--home-line);
	border-radius: 16px;
	background: #FFFFFF;
}

.build-tile__title {
	margin-top: 8px;
	font-size: 1.3125rem;
	letter-spacing: -0.02em;
	font-weight: 700;
}

.build-tile__body {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--home-text-2);
}

/* AI automation ----------------------------------------------------- */
.auto-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 20px;
}

.auto-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 32px;
	border: 1px solid var(--home-dark-line);
	border-radius: 16px;
	background: var(--home-dark-card);
}

.auto-card.is-working { border-color: var(--color-action); }

.auto-card__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.auto-card__name {
	font-family: var(--font-technical);
	font-size: 0.75rem;
	color: var(--home-on-dark-2);
}

.auto-card__badge {
	padding: 4px 8px;
	border: 1px solid var(--home-dark-line-2);
	border-radius: 999px;
	font-family: var(--font-technical);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--home-on-dark-2);
	white-space: nowrap;
}

.auto-card.is-working .auto-card__badge {
	border-color: var(--home-green);
	background: var(--home-green);
	color: #FFFFFF;
}

.auto-card__heading {
	font-size: 1.375rem;
	letter-spacing: -0.02em;
	font-weight: 700;
}

.auto-card__body {
	flex: 1;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--home-on-dark);
}

.auto-card__fits {
	font-family: var(--font-technical);
	font-size: 0.75rem;
	color: var(--home-on-dark-2);
}

.auto-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-top: 56px;
}

.auto-foot__note {
	font-family: var(--font-technical);
	font-size: 0.75rem;
	color: var(--home-on-dark-2);
}

/* Studio ------------------------------------------------------------ */
.home-studio {
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
}

.home-studio__intro {
	flex: 1 1 380px;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.home-studio__intro .type-section { max-width: 14ch; }

.home-studio__body {
	margin-top: 16px;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--home-text-2);
	max-width: 46ch;
}

.home-studio__points {
	flex: 1 1 560px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 32px 40px;
}

.studio-point {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.studio-point__title {
	margin-top: 6px;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	font-weight: 700;
}

.studio-point__body {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--home-text-2);
}

/* Journal ----------------------------------------------------------- */
.journal-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 0 40px;
	border-top: 1px solid var(--home-rule);
}

.journal-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 0;
	border-bottom: 1px solid var(--home-rule);
	color: var(--color-ink);
}

.journal-row__meta {
	font-family: var(--font-technical);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--home-meta);
}

.journal-row__title {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.25;
	transition: color var(--dur-fast) var(--ease);
}

.journal-row:hover .journal-row__title { color: var(--color-action); }

/* Contact ----------------------------------------------------------- */
.home-contact {
	padding-block: 104px;
	background: var(--color-ink);
	color: #FFFFFF;
}

.home-contact__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 64px;
}

.home-contact__intro {
	flex: 1 1 400px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.home-contact .eyebrow {
	margin: 0;
	color: #a3a3a3;
}

.home-contact .eyebrow .square { width: 10px; height: 10px; }

.home-contact__heading {
	font-size: clamp(2.25rem, 4.4vw, 3.75rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	font-weight: 800;
	max-width: 12ch;
}

.home-contact__body {
	font-size: 1.125rem;
	line-height: 1.55;
	color: #d4d4d4;
	max-width: 44ch;
}

/* Each line is a full 44px target, so the three sit a little further apart
   than the drawing's 10px gap. */
.home-contact__lines {
	display: flex;
	flex-direction: column;
	font-size: 1rem;
}

.home-contact__lines li {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
}

.home-contact__lines .square { width: 8px; height: 8px; }
.home-contact__lines a { color: #FFFFFF; }
.home-contact__lines a:hover { color: #93b4f5; }
.home-contact__lines .is-quiet { color: #d4d4d4; }

.home-contact__panel {
	flex: 1 1 440px;
	min-width: 0;
	padding: 32px;
	border: 1px solid #262626;
	border-radius: 18px;
	background: #171717;
}

/* The site's contact form, restyled for the dark panel. Fields, wording and
   behaviour are the form's own, unchanged. */
.home-contact .wpcf7-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 18px;
}

@media (min-width: 560px) {
	.home-contact .wpcf7-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.home-contact .wpcf7-form > * { grid-column: 1 / -1; }

/* Two by two, name beside business as drawn, then email beside phone, then
   the message. Only the visual order moves; the form's own markup, field
   names and behaviour are untouched. Browsers without :has() show the fields
   one per row in their natural order, which is also fine. */
.home-contact .wpcf7-form > .form-field:has([data-name="your-name"]) { order: 1; grid-column: auto; }
.home-contact .wpcf7-form > .form-field:has([data-name="your-business"]) { order: 2; grid-column: auto; }
.home-contact .wpcf7-form > .form-field:has([data-name="your-email"]) { order: 3; grid-column: auto; }
.home-contact .wpcf7-form > .form-field:has([data-name="your-phone"]) { order: 4; grid-column: auto; }
.home-contact .wpcf7-form > .form-field:has([data-name="your-problem"]) { order: 5; }

/* The human check sits just above Send rather than at the top of the form,
   and the phone hint goes under its box so the four boxes line up. */
.home-contact .wpcf7-form > .cf-turnstile { order: 6; margin-bottom: 18px; }
.home-contact .wpcf7-form > p { order: 7; margin: 0; position: relative; }

/* The sending spinner would otherwise wrap onto its own line under the full
   width button. It sits inside the button's right end instead. */
.home-contact .wpcf7-spinner {
	position: absolute;
	right: 18px;
	top: 15px;
	margin: 0;
}
.home-contact .wpcf7-form > .wpcf7-response-output { order: 8; }
/* Contact Form 7 wraps each field's parts in a paragraph with line breaks.
   Stack them with a set gap instead, which also lets the phone hint move. */
.home-contact .form-field > p {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.home-contact .form-field br { display: none; }
.home-contact .form-field__hint { line-height: 1.4; }
.home-contact .form-field:has([data-name="your-phone"]) .form-field__hint { order: 3; }

.home-contact .wpcf7 textarea { height: 140px; }

.home-contact .form-field { margin-bottom: 18px; }

.home-contact .form-field__label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: #d4d4d4;
}

.home-contact .form-field__hint { color: #a3a3a3; }

.home-contact .wpcf7 input[type="text"],
.home-contact .wpcf7 input[type="email"],
.home-contact .wpcf7 input[type="tel"],
.home-contact .wpcf7 textarea {
	border-color: #333333;
	border-radius: 10px;
	background: #0a0a0a;
	color: #FFFFFF;
	font-size: 0.9375rem;
}

.home-contact .wpcf7 textarea { min-height: 120px; }

.home-contact .wpcf7 input[type="submit"] {
	width: 100%;
	min-height: 54px;
	background: #FFFFFF;
	color: var(--color-ink);
	font-size: 1rem;
	font-weight: 600;
}

.home-contact .wpcf7 input[type="submit"]:hover {
	background: var(--color-action);
	color: #FFFFFF;
}

.home-contact .wpcf7-response-output {
	border-color: #333333 !important;
	color: #FFFFFF;
}

.home-contact__note {
	margin-top: 18px;
	font-family: var(--font-technical);
	font-size: 0.6875rem;
	color: #a3a3a3;
}

/* The homepage ends on the dark contact section, so the footer, which is
   dark too, is set off by a line as the drawing shows. */
.home .footer,
.mm8-inner .footer { border-top: 1px solid #262626; }

.footer__text {
	display: inline-block;
	padding-block: 9px;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.5);
}

/* Card titles: the drawing's tighter leading, and wrapping that avoids a
   one word last line without forcing balanced halves. */
.work-tile__title,
.service-card__title,
.hosting-strip__title,
.build-tile__title,
.auto-card__heading,
.studio-point__title {
	line-height: 1.2;
	text-wrap: pretty;
}

/* Phone widths ------------------------------------------------------ */
/* The drawing sets these minimum heights on the content box, so the
   rendered cards are taller by their padding and border. Matched here. */
@media (min-width: 900px) {
	.service-card { min-height: 466px; }
	.build-tile { min-height: 278px; }
	.auto-card { min-height: 366px; }
}

@media (max-width: 599px) {
	.home-hero { min-height: 0; }
	.home-hero__main { padding-top: 48px; gap: 40px; }
	.home-hero__body { font-size: 1.1875rem; }
	.home-section { padding-block: 72px; }
	.home-section--work { padding-block: 24px 72px; }
	.home-contact { padding-block: 72px; }
	.service-card,
	.auto-card { padding: 24px; }
	.home-contact__panel { padding: 24px 20px; }
	.hosting-strip { padding: 24px; }
	.board { padding: 14px; gap: 12px; }
	.board__cols { gap: 6px; }
	.board__name { font-size: 0.5rem; letter-spacing: 0.02em; }
	.board__card { height: 34px; padding: 6px; }
	.board__modules { display: none; }
}

/* Smallest phones. The headline steps down so "Front of house." keeps one
   line and the whole statement reads in four. The form panel runs edge to
   edge, because Cloudflare draws its human check at a fixed 300px and the
   panel's inside would otherwise be narrower than that, clipping the box. */
@media (max-width: 359px) {
	.home-hero__heading { font-size: 2.375rem; }
}

/* 300px box + 2 x 20px padding + borders + gutters needs 374px of screen. */
@media (max-width: 379px) {
	.home-contact__panel {
		margin-inline: calc(-1 * var(--layout-gutter));
		padding: 24px 10px;
		border-inline: 0;
		border-radius: 0;
	}
}

/* On the homepage a sentence keeps itself whole but can share a line with the
   next one when both fit, as the drawing shows "One website. One piece of
   software. Both for the same business." on one line at 1440. Each sentence is
   an inline block, so a line can only break between sentences or inside one
   that is wider than the column: a new sentence still never strands its first
   word at the end of a line. */
.home-page .heading-line,
.home-contact .heading-line {
	display: inline-block;
	margin-right: 0.26em;
}

/* Column counts by width. The drawing lets each grid fit as many columns as
   it can, which strands a single card on its own row at in between widths
   (Search and AI visibility alone at 1024, one automation card alone at
   768). Fixed counts keep every row full. At 1440 the result is identical to
   the drawing: four services, five tiles, three examples, three articles. */
.service-grid,
.build-grid,
.auto-grid,
.journal-list,
.home-studio__points { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 600px) {
	.service-grid,
	.build-grid,
	.home-studio__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.build-tile:last-child { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
	.auto-grid,
	.journal-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	.service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.build-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.build-tile:last-child { grid-column: auto; }
}

/* ==================================================================
   Inner pages, 9 October 2026 (job 92)
   ==================================================================
   Work, Services and Studio wear the homepage's parts: each page is wrapped
   in .home-page, so the eyebrows, section headings, pills, cards, sections
   and the dark contact close all come from the homepage block above
   unchanged. What follows styles only the pieces the homepage has no
   equivalent for, and every value is taken from a homepage rule, named
   beside it.
   ================================================================== */

/* Opening: the hero's top padding, eyebrow, body and strip; a heading one
   step below the homepage statement, same weight and tracking. */
.inner-open__main {
	padding-top: 72px;                     /* .home-hero__main */
}

.inner-open__heading {
	font-size: clamp(2.75rem, 6.4vw, 5.5rem);
	line-height: 0.95;
	letter-spacing: -0.05em;               /* .home-hero__heading, eased for the smaller size */
	font-weight: 800;
	max-width: 17ch;
	text-wrap: balance;
}

.inner-open__body {
	margin-top: 32px;
}

.inner-open__strip a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	transition: color var(--dur-fast) var(--ease);
}

.inner-open__strip a:hover { color: var(--color-action); }

.inner-open__strip { padding-block: 12px 18px; }

/* The links carry their own 44px tap height, so rows need no gap of their
   own; without this a wrapped strip spreads out on a phone. */
.inner-open__strip .home-hero__list { gap: 0 40px; }

@media (max-width: 599px) {
	.inner-open__strip .home-hero__list { gap: 0 24px; }
}

/* The first section after an opening does not need a second rule under
   the strip's own. */
.inner-open + .home-section--ruled { border-top: 0; }

/* Anchors land below the sticky header, at the section's own padding. */
.inner-page .case-feature,
.inner-page .service-card { scroll-margin-top: 96px; }

.inner-anchor {
	display: block;
	height: 0;
	scroll-margin-top: 96px;               /* .home-section padding */
}

/* Square bullet list. The homepage's square, at the size it uses in the
   contact lines; text at the studio point's size and colour. */
.square-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.square-list li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 0.9375rem;                  /* .studio-point__body */
	line-height: 1.55;
	color: var(--home-text-2);
}

.square-list .square {
	width: 8px;                            /* .home-contact__lines .square */
	height: 8px;
	transform: translateY(-1px);
}

.square-list.is-dark li { color: var(--home-on-dark); }

/* Mono label, the eyebrow's type at the work tile tags' colour. */
.case-feature__label,
.service-row__label {
	font-family: var(--font-technical);
	font-size: 0.75rem;                    /* .home-page .eyebrow */
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--home-text-2);
	margin: 0 0 14px;
}

/* Work: case studies ------------------------------------------------- */
.inner-cases {
	display: flex;
	flex-direction: column;
	gap: 96px;                             /* .home-section padding */
}

.case-feature__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: end;
}

.case-feature__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.case-feature__intro .type-section { margin: 0; }

.case-feature__status {
	padding: 5px 9px;                      /* .work-tile__status */
	border: 1px solid var(--home-line);
	border-radius: 999px;
	font-family: var(--font-technical);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink);
}

.case-feature__lead {
	font-size: 1.0625rem;                  /* .home-studio__body */
	line-height: 1.55;
	color: var(--home-text-2);
	max-width: 46ch;
}

.case-feature__intro .home-head__link { margin-top: 4px; }

.case-feature__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px 40px;                        /* .home-studio__points */
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--home-rule);
}

.case-feature__col p {
	font-size: 0.9375rem;                  /* .studio-point__body */
	line-height: 1.55;
	color: var(--home-text-2);
}

.case-feature__col p + p { margin-top: 12px; }

@media (min-width: 900px) {
	.case-feature__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
	.case-feature__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Media in a case study: the screenshot's own shape (1400 x 868), and the
   drawn board at the same shape so the two cases line up. */
.case-feature .work-tile__media,
.case-feature .board { aspect-ratio: 1400 / 868; }

/* Three cards to a row where the homepage has four. The homepage's card
   height was set for its four short cards; these size to their words. */
.service-grid--3 .service-card { min-height: 0; }

/* Two to a row between phone and computer widths, the third across the
   full row, as the homepage does with its last building tile, so no card
   is stranded on its own. */
@media (min-width: 600px) and (max-width: 899px) {
	.service-grid--3 .service-card:last-child { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
	.service-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	.service-grid.service-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Services: one service per section ---------------------------------- */
.service-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
}

.service-row__head .type-section { margin: 0; }

.service-row__num {
	display: block;
	margin-bottom: 16px;
	font-family: var(--font-technical);    /* .service-card__num */
	font-size: 0.75rem;
	color: var(--home-text-2);
}

.service-row__lead {
	margin-top: 16px;
	font-size: 1.0625rem;                  /* .home-head__aside */
	line-height: 1.5;
	color: var(--home-text-2);
	max-width: 36ch;
}

.service-row__body {
	font-size: 1.1875rem;                  /* .home-hero__body at phone size */
	line-height: 1.5;
	color: var(--home-text-hero);
	max-width: 52ch;
	margin-bottom: 32px;
}

.service-row__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 32px;
	margin-top: 24px;
}

.home-section--dark .service-row__num,
.home-section--dark .service-row__label { color: var(--home-on-dark-2); }

.home-section--dark .service-row__lead { color: var(--home-on-dark); }
.home-section--dark .service-row__body { color: #FFFFFF; }
.home-section--dark .home-head__link { color: #FFFFFF; }
.home-section--dark .home-head__link:hover { color: #93b4f5; }   /* .home-contact__lines a:hover */

@media (min-width: 900px) {
	.service-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
}

/* Studio ------------------------------------------------------------- */
.inner-person {
	flex: 1 1 560px;                       /* .home-studio__points */
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.inner-person p {
	font-size: 1.0625rem;                  /* .home-studio__body */
	line-height: 1.6;
	color: var(--home-text-2);
	max-width: 60ch;
}

.inner-person .inner-person__lead {
	font-size: 1.375rem;                   /* .home-hero__body */
	line-height: 1.45;
	color: var(--home-text-hero);
	max-width: 40ch;
	margin-bottom: 8px;
}

.inner-points {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px 40px;                        /* .home-studio__points */
}

@media (min-width: 600px) {
	.inner-points--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* At two to a row an odd last point takes the whole row, never alone in
   half of it. */
@media (min-width: 600px) and (max-width: 899px) {
	.inner-points--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
	.inner-points--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The Studio page's journal rows, sized as the homepage's. */
#journal-latest .home-head__main {
	flex: 1 1 0;
	min-width: min(100%, 480px);
	max-width: none;
}
#journal-latest .type-section { font-size: clamp(1.75rem, 3vw, 2.5rem); }
#journal-latest .home-head { margin-bottom: 40px; }

/* Phone widths, as the homepage steps down. */
@media (max-width: 599px) {
	.inner-open__main { padding-top: 48px; }   /* .home-hero__main */
	.inner-open__body { margin-top: 24px; }
	.inner-cases { gap: 72px; }
	.case-feature__cols { margin-top: 32px; }
	.inner-page .case-feature,
	.inner-page .service-card,
	.inner-anchor { scroll-margin-top: 72px; }
}