/* Mochavi site: Strata design. Fonts are self-hosted (Newsreader and Geist, SIL Open Font License). */
@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url('/fonts/geist-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
		U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 300 500;
	font-display: swap;
	src: url('/fonts/geist-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
		U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Geist Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/geist-mono-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
		U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Geist Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/geist-mono-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
		U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 300 400;
	font-display: swap;
	src: url('/fonts/newsreader-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
		U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 300 400;
	font-display: swap;
	src: url('/fonts/newsreader-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
		U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Mochavi · Strata. Near-black ground that melts into the rock photographs, a light serif for headlines,
   a quiet grotesk for reading, hairlines instead of boxes, one warm sandstone accent taken from the rock.
   One deliberate dark look. */
:root {
	--bg: #08090b;
	--bg-2: #0e1013;
	--paper: #ece8e1;
	--text: #cfcac2;
	--muted: #9b968e;
	--hair: rgba(236, 232, 225, 0.16);
	--hair-strong: rgba(236, 232, 225, 0.32);
	--sand: #d6b386;
	--sand-soft: rgba(214, 179, 134, 0.12);
	--error: #ff8f7a;
	--ok: #8fd1a8;
	--serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
	--sans: 'Geist', 'Helvetica Neue', Arial, system-ui, sans-serif;
	--mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
	--header-h: 4.75rem;
	color-scheme: dark;
}

* {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 300 1.0625rem/1.7 var(--sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
a {
	color: inherit;
}
img {
	max-width: 100%;
	display: block;
}
:focus-visible {
	outline: 2px solid var(--sand);
	outline-offset: 4px;
	border-radius: 2px;
}
.wrap {
	width: 100%;
	max-width: 96rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 4rem);
}
.skip {
	position: absolute;
	left: -999px;
	top: 0;
}
.skip:focus {
	left: 1rem;
	top: 1rem;
	z-index: 50;
	background: var(--bg-2);
	padding: 0.5rem 0.8rem;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 300;
	color: var(--paper);
	text-wrap: balance;
}
h1 {
	font-size: clamp(2.6rem, 4.6vw, 4.6rem);
	line-height: 1.05;
	letter-spacing: -0.012em;
}
h2 {
	font-size: clamp(2rem, 3.6vw, 3.3rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
}
h3 {
	font-size: clamp(1.35rem, 1.8vw, 1.6rem);
	line-height: 1.2;
	font-weight: 400;
}
p {
	margin: 0;
}
.lede {
	font-size: clamp(1.08rem, 1.5vw, 1.25rem);
	line-height: 1.65;
	color: var(--muted);
	max-width: 38rem;
}
.eyebrow {
	font: 400 0.72rem/1.6 var(--sans);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--muted);
}
.eyebrow a {
	text-decoration: none;
}
.eyebrow a:hover {
	color: var(--paper);
}
.muted {
	color: var(--muted);
}
.small {
	font-size: 0.88rem;
}
.num {
	font-variant-numeric: tabular-nums;
}
.rule {
	width: 3.2rem;
	height: 1px;
	background: var(--hair-strong);
	border: 0;
	margin: 0.4rem 0 0;
}

/* header */
.site-header {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 30;
	height: var(--header-h);
	background: linear-gradient(rgba(8, 9, 11, 0.7), rgba(8, 9, 11, 0));
	transition: background 300ms ease;
}
.site-header.scrolled {
	background: rgba(8, 9, 11, 0.86);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 1px 0 var(--hair);
}
.site-header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	height: 100%;
}
.brand {
	font: 400 1.75rem/1 var(--serif);
	color: var(--paper);
	text-decoration: none;
	letter-spacing: -0.01em;
}
.nav {
	display: flex;
	align-items: center;
	gap: 2.6rem;
	margin-right: auto;
	margin-left: 2.4rem;
}
.nav a {
	text-decoration: none;
	font-size: 0.9rem;
	color: var(--text);
}
.nav a:hover,
.nav a[aria-current='page'] {
	color: var(--paper);
}
.nav a[aria-current='page'] {
	text-decoration: underline;
	text-underline-offset: 0.5em;
	text-decoration-color: var(--sand);
}
.menu {
	display: none;
}
.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem;
}
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font: 400 0.92rem/1 var(--sans);
	padding: 0.9rem 1.25rem;
	border-radius: 0.3rem;
	border: 1px solid var(--hair-strong);
	background: transparent;
	color: var(--paper);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition:
		border-color 200ms ease,
		background 200ms ease,
		color 200ms ease;
}
.btn:hover {
	border-color: var(--paper);
}
.btn-primary {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--bg);
	font-weight: 400;
}
.btn-primary:hover {
	background: var(--sand);
	border-color: var(--sand);
}
.btn-small {
	padding: 0.65rem 1rem;
	font-size: 0.86rem;
}
.site-header .btn-primary {
	background: transparent;
	color: var(--paper);
	border-color: var(--hair-strong);
}
.site-header .btn-primary:hover {
	border-color: var(--paper);
	background: transparent;
}

/* photo heroes: the plate keeps its own aspect ratio, anchored right, and melts into the ground on the left */
.photo-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-top: calc(-1 * var(--header-h));
	padding-top: var(--header-h);
	min-height: 82svh;
	display: grid;
	align-items: center;
}
.photo-hero.full {
	min-height: 100svh;
}
.plate {
	position: absolute;
	top: 0;
	right: 0;
	height: min(100%, var(--maxh, 100%));
	aspect-ratio: var(--ar, 3 / 2);
	z-index: -1;
}
.plate[data-k='band']::after {
	background: linear-gradient(
			90deg,
			var(--bg) 0%,
			rgba(8, 9, 11, 0.88) 30%,
			rgba(8, 9, 11, 0.35) 65%,
			rgba(8, 9, 11, 0.15) 100%
		),
		linear-gradient(0deg, var(--bg) 0%, rgba(8, 9, 11, 0) 35%);
}
.plate img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.plate::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--bg) 0%, rgba(8, 9, 11, 0.55) 16%, rgba(8, 9, 11, 0) 42%),
		linear-gradient(0deg, var(--bg) 0%, rgba(8, 9, 11, 0) 22%);
}
.photo-hero .hero-content {
	display: grid;
	gap: 1.6rem;
	padding-block: clamp(4rem, 10vh, 7rem);
}
.photo-hero .hero-content > * {
	max-width: 36rem;
}
.photo-hero h1 {
	max-width: 13em;
}
.photo-hero .glance {
	max-width: 52rem;
}
.caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(1.5rem, 5vh, 3rem);
}
.caption p {
	font: 400 0.72rem/2 var(--sans);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--muted);
}
.strata-labels {
	position: absolute;
	inset: 0;
	z-index: 2;
}
.strata-labels ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.strata-labels li {
	position: absolute;
	left: 80%;
	top: var(--y);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 0.6rem;
	white-space: nowrap;
	transition: opacity 250ms ease;
}
.strata-labels li::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--paper);
	flex: none;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
	transition:
		background 250ms ease,
		transform 250ms ease;
}
.strata-labels a {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding-block: 0.6rem;
	font: 400 0.92rem/1 var(--sans);
	color: var(--paper);
	text-decoration: none;
	text-shadow: 0 0 14px rgba(0, 0, 0, 0.85);
}
.strata-labels a::before {
	content: '';
	width: clamp(2.5rem, 5vw, 6rem);
	height: 1px;
	background: rgba(236, 232, 225, 0.75);
	transition:
		background 250ms ease,
		width 300ms ease;
}
.strata-labels .desc {
	position: absolute;
	right: calc(100% + 1rem);
	top: 50%;
	width: 17rem;
	padding: 0.6rem 0.9rem;
	white-space: normal;
	text-align: right;
	font: 400 0.86rem/1.45 var(--sans);
	color: var(--paper);
	text-shadow: none;
	background: rgba(8, 9, 11, 0.78);
	border-right: 1px solid var(--sand);
	opacity: 0;
	transform: translate(0.6rem, -50%);
	pointer-events: none;
	transition:
		opacity 250ms ease,
		transform 250ms ease;
}
.strata-labels li:hover .desc,
.strata-labels a:focus-visible .desc {
	opacity: 1;
	transform: translate(0, -50%);
}
.strata-labels li:hover::before,
.strata-labels li:focus-within::before {
	background: var(--sand);
	transform: scale(1.6);
}
.strata-labels li:hover a,
.strata-labels a:focus-visible {
	color: var(--paper);
	text-shadow:
		0 0 10px #000,
		0 0 22px #000;
}
.strata-labels li:hover a::before,
.strata-labels a:focus-visible::before {
	background: var(--sand);
	width: clamp(3rem, 6vw, 7rem);
}
.strata-labels ul:hover li:not(:hover) {
	opacity: 0.4;
}
.plate .glow {
	position: absolute;
	left: 44%;
	right: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 35%);
	mask-image: linear-gradient(90deg, transparent, #000 35%);
	top: calc(var(--hy, 50%) - 6%);
	height: 12%;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(
		90deg,
		rgba(214, 179, 134, 0) 25%,
		rgba(214, 179, 134, 0.14) 65%,
		rgba(214, 179, 134, 0.24) 100%
	);
	border-block: 1px solid rgba(214, 179, 134, 0.22);
	mix-blend-mode: screen;
	transition:
		opacity 300ms ease,
		top 350ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.plate.lit .glow {
	opacity: 1;
}
.plate::after {
	pointer-events: none;
}
.photo-hero .hero-content {
	pointer-events: none;
}
.photo-hero .hero-content > * {
	pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
	.plate img {
		animation: settle 2000ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
	.strata-labels li {
		animation: rise 700ms ease both;
		animation-delay: calc(500ms + var(--i) * 110ms);
	}
	.strata-labels a::before {
		animation: draw 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
		animation-delay: calc(500ms + var(--i) * 110ms);
		transform-origin: left;
	}
	.hero-content > * {
		animation: rise 650ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
	.hero-content > :nth-child(2) {
		animation-delay: 60ms;
	}
	.hero-content > :nth-child(3) {
		animation-delay: 120ms;
	}
	.hero-content > :nth-child(4) {
		animation-delay: 180ms;
	}
	.hero-content > :nth-child(5) {
		animation-delay: 240ms;
	}
}
@keyframes settle {
	from {
		opacity: 0;
		transform: scale(1.045);
	}
}
@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(0.8rem);
	}
}
@keyframes draw {
	from {
		transform: scaleX(0);
	}
}

/* sections */
section {
	position: relative;
	padding-block: clamp(4.5rem, 10vw, 8rem);
}
.section-head {
	display: grid;
	gap: 1rem;
	max-width: 46rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head p {
	color: var(--muted);
	max-width: 40rem;
}
.stack {
	display: grid;
	gap: 1.5rem;
}
.backdrop {
	isolation: isolate;
	overflow: hidden;
}
.backdrop .plate {
	height: min(64%, 44vw);
}
.backdrop .plate::after {
	background: linear-gradient(
			90deg,
			var(--bg) 0%,
			rgba(8, 9, 11, 0.7) 22%,
			rgba(8, 9, 11, 0.15) 55%
		),
		linear-gradient(0deg, var(--bg) 0%, rgba(8, 9, 11, 0.85) 25%, rgba(8, 9, 11, 0) 70%);
}
.backdrop .section-head {
	padding-block: 2rem 4rem;
}

/* hairline columns: the concept's signature */
.columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--hair);
}
.columns > * {
	display: grid;
	gap: 0.9rem;
	align-content: start;
	padding: 2.2rem 2rem 2.4rem 0;
	border-right: 1px solid var(--hair);
	min-width: 0;
	text-decoration: none;
}
.columns > * + * {
	padding-left: 2rem;
}
.columns > :last-child {
	border-right: 0;
	padding-right: 0;
}
.columns.three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.columns p {
	color: var(--muted);
	font-size: 0.98rem;
}
.columns .icon {
	width: 2.6rem;
	height: 2.6rem;
	color: var(--paper);
	margin-bottom: 0.6rem;
}
.columns .icon * {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.1;
	stroke-linecap: round;
	stroke-linejoin: round;
}
a.col:hover h3 {
	color: var(--sand);
}
.price {
	font: 400 0.95rem/1.4 var(--sans);
	color: var(--sand);
}
.more {
	font-size: 0.9rem;
	color: var(--paper);
	text-decoration: underline;
	text-underline-offset: 0.4em;
	text-decoration-color: var(--hair-strong);
}
a.col:hover .more {
	text-decoration-color: var(--sand);
}

.ledger {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
}
.ledger li {
	display: grid;
	gap: 0.35rem;
	padding: 1.6rem 1.6rem 1.7rem 0;
	border-right: 1px solid var(--hair);
}
.ledger li + li {
	padding-left: 1.6rem;
}
.ledger li:last-child {
	border-right: 0;
}
.ledger b {
	font: 300 clamp(1.6rem, 2.4vw, 2.2rem) / 1.1 var(--serif);
	color: var(--paper);
}
.ledger span {
	font-size: 0.9rem;
	color: var(--muted);
}
.proof-band {
	padding-block: 0 clamp(3rem, 6vw, 5rem);
}

/* who does the work */
.who {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: start;
	padding-block: 2.5rem;
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
}
.who-head {
	display: flex;
	gap: 1.2rem;
	align-items: center;
}
.who-head > div {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
}
.avatar {
	flex: none;
	width: 4.2rem;
	height: 4.2rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 1px solid var(--sand);
	color: var(--sand);
	font: 400 1.35rem/1 var(--serif);
	/* capitals sit high in their line box (the font reserves descender space); nudge them to optical centre */
	padding-top: 0.23em;
}
.who-name {
	font-size: clamp(1.5rem, 2.2vw, 2rem);
}
.who > p,
.who > .small {
	grid-column: 2;
	color: var(--text);
	max-width: 38rem;
}
.who > .small {
	color: var(--muted);
}
.who .track {
	grid-column: 1 / -1;
}
.who a {
	color: var(--paper);
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-color: var(--hair-strong);
}
.who a:hover {
	text-decoration-color: var(--sand);
}
.track {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hair);
}
.track li {
	display: grid;
	gap: 0.3rem;
	padding: 1.3rem 1.3rem 0 0;
	border-right: 1px solid var(--hair);
}
.track li + li {
	padding-left: 1.3rem;
}
.track li:last-child {
	border-right: 0;
}
.track b {
	font: 300 1.6rem/1.15 var(--serif);
	color: var(--paper);
}
.track span {
	font-size: 0.88rem;
	color: var(--muted);
}

.disclosure {
	display: grid;
	gap: 0.7rem;
	padding: 1.6rem 0 1.6rem 1.6rem;
	border-left: 1px solid var(--sand);
	max-width: 52rem;
}
.disclosure p {
	color: var(--text);
}
.context {
	font-size: 0.95rem;
	color: var(--muted);
	padding-left: 1rem;
	border-left: 1px solid var(--sand);
	max-width: 40rem;
}
.context b {
	color: var(--paper);
	font-weight: 400;
}
.context a,
.offer-box a {
	color: var(--paper);
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-color: var(--sand);
	white-space: nowrap;
}

/* feature: text with a plate */
.feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: center;
}
.feature .text {
	display: grid;
	gap: 1.2rem;
}
.feature .text p {
	color: var(--muted);
}
.specimen {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}
.specimen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.specimen img {
	-webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 48%, #000 55%, transparent 100%);
	mask-image: radial-gradient(ellipse 62% 58% at 50% 48%, #000 55%, transparent 100%);
}
.facts {
	display: grid;
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hair);
}
.facts li {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	gap: 1rem;
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--hair);
	font-size: 0.95rem;
	color: var(--text);
}
.facts li span:first-child {
	font: 400 0.7rem/2 var(--sans);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
}
.facts a,
.cases a,
.lede a,
.hint a,
.disclosure a,
.list a {
	color: var(--paper);
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-color: var(--hair-strong);
}
.facts a:hover,
.cases a:hover,
.lede a:hover,
.disclosure a:hover {
	text-decoration-color: var(--sand);
}

/* at a glance */
.glance {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0.6rem 0 0;
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
}
.glance div {
	display: grid;
	gap: 0.3rem;
	align-content: start;
	padding: 1rem 1.2rem 1rem 0;
	border-right: 1px solid var(--hair);
}
.glance div + div {
	padding-left: 1.2rem;
}
.glance div:last-child {
	border-right: 0;
}
.glance dt {
	font: 400 0.68rem/1.6 var(--sans);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
}
.glance dd {
	margin: 0;
	color: var(--paper);
	font-size: 0.97rem;
}

/* rows and steps */
.list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hair);
}
.list li {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
	gap: 2rem;
	padding-block: 1.6rem;
	border-bottom: 1px solid var(--hair);
}
.list li p {
	color: var(--muted);
}
.list li[id] {
	scroll-margin-top: 6rem;
}
.list li:target h3 {
	color: var(--sand);
}
.sources {
	display: block;
	margin-top: 0.7rem;
	font-size: 0.85rem;
}
.steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hair);
	counter-reset: step;
}
.steps li {
	display: grid;
	gap: 0.8rem;
	align-content: start;
	padding: 2rem 2rem 2.2rem 0;
	border-right: 1px solid var(--hair);
	counter-increment: step;
}
.steps li + li {
	padding-left: 2rem;
}
.steps li:last-child {
	border-right: 0;
}
.steps li::before {
	content: '0' counter(step);
	font: 400 0.75rem/1 var(--sans);
	letter-spacing: 0.25em;
	color: var(--sand);
}
.steps p {
	color: var(--muted);
	font-size: 0.98rem;
}

.cases {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hair);
}
.cases li {
	display: grid;
	gap: 0.4rem;
	align-content: start;
	padding: 1.6rem 1.6rem 1.7rem 0;
	border-bottom: 1px solid var(--hair);
}
.cases li:nth-child(even) {
	padding-left: 1.6rem;
	border-left: 1px solid var(--hair);
}
.cases b {
	font: 300 1.55rem/1.2 var(--serif);
	color: var(--paper);
}
.cases span {
	color: var(--muted);
	font-size: 0.97rem;
}
.cases.big {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cases.big li {
	padding-left: 0;
	border-left: 0;
}
.cases.big li:not(:nth-child(3n + 1)) {
	padding-left: 1.6rem;
	border-left: 1px solid var(--hair);
}
.toc {
	margin: 0;
	padding: 1.4rem 0 1.4rem 1.6rem;
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
	display: grid;
	gap: 0.5rem;
	color: var(--text);
}
.toc li::marker {
	color: var(--sand);
}

.faq {
	display: grid;
	border-top: 1px solid var(--hair);
	max-width: 56rem;
}
.faq details {
	border-bottom: 1px solid var(--hair);
	padding-block: 1.3rem;
}
.faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	font: 400 1.25rem/1.35 var(--serif);
	color: var(--paper);
}
.faq summary::-webkit-details-marker {
	display: none;
}
.faq summary::after {
	content: '+';
	font: 300 1.4rem/1 var(--sans);
	color: var(--sand);
}
.faq details[open] summary::after {
	content: '−';
}
.faq details p {
	margin-top: 0.8rem;
	color: var(--muted);
	max-width: 48rem;
}

.scroll {
	overflow-x: auto;
	border-top: 1px solid var(--hair);
}
table.offers {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}
.offers th,
.offers td {
	text-align: left;
	padding: 1rem 1.2rem 1rem 0;
	border-bottom: 1px solid var(--hair);
	vertical-align: top;
}
.offers th {
	font: 400 0.68rem/1.6 var(--sans);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
}
.offers td {
	color: var(--text);
}
.offers td:first-child a {
	font: 400 1.15rem/1.3 var(--serif);
	color: var(--paper);
	text-decoration: none;
}
.offers td:first-child a:hover {
	color: var(--sand);
}
.offers td:nth-child(2) {
	white-space: nowrap;
	color: var(--sand);
}

/* products */
.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 3.5rem 2.5rem;
}
.product {
	display: grid;
	gap: 0.9rem;
	align-content: start;
	min-width: 0;
}
.product p {
	color: var(--muted);
}
.product .proves b {
	color: var(--paper);
	font-weight: 400;
}
.shot {
	border: 1px solid var(--hair);
	border-radius: 0.3rem;
	overflow: hidden;
	background: var(--bg-2);
}
.shot img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top;
}
.product .links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	font-size: 0.92rem;
}
.product .links a {
	color: var(--paper);
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-color: var(--hair-strong);
}
.product .bridge {
	font-size: 0.92rem;
	color: var(--sand);
	text-decoration: none;
	border-top: 1px solid var(--hair);
	padding-top: 0.8rem;
}
code {
	font: 400 0.85em/1 var(--mono);
}

/* notes */
.notes-list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hair);
}
.notes-list a {
	display: grid;
	grid-template-columns: 10rem minmax(0, 1fr);
	gap: 2rem;
	padding-block: 1.7rem;
	border-bottom: 1px solid var(--hair);
	text-decoration: none;
}
.notes-list a:hover h3 {
	color: var(--sand);
}
.notes-list time {
	font-size: 0.85rem;
	color: var(--muted);
	letter-spacing: 0.04em;
}
.notes-list p {
	color: var(--muted);
	margin-top: 0.45rem;
}
.article {
	max-width: 44rem;
	margin-inline: auto;
}
.article .meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	font-size: 0.88rem;
	color: var(--muted);
}
.article .meta a {
	color: var(--paper);
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-color: var(--hair-strong);
}
.offer-box {
	font-size: 0.95rem;
	color: var(--text);
	padding-left: 1rem;
	border-left: 1px solid var(--sand);
}
.prose {
	font: 400 1.22rem/1.75 var(--serif);
	color: #d9d4cb;
}
.prose > * + * {
	margin-top: 1.15em;
}
.prose h2 {
	font-size: 1.75rem;
	margin-top: 2em;
}
.prose ul,
.prose ol {
	padding-left: 1.2em;
}
.prose li + li {
	margin-top: 0.45em;
}
.prose a {
	color: var(--paper);
	text-decoration-color: var(--sand);
	text-underline-offset: 0.25em;
}
.prose .aside {
	font: 300 1rem/1.65 var(--sans);
	color: var(--text);
	padding-left: 1.2rem;
	border-left: 1px solid var(--sand);
}

/* call to action over the band plate */
.cta-section {
	padding-block: 0;
}
.cta-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	gap: 1.3rem;
	align-content: center;
	min-height: 34rem;
	padding: clamp(3rem, 7vw, 6rem) 0;
}
.cta-band .plate {
	height: 100%;
	width: 100%;
	aspect-ratio: auto;
}
.cta-band .plate img {
	object-position: 70% 30%;
}
.cta-band .plate::after {
	background: linear-gradient(
			90deg,
			var(--bg) 10%,
			rgba(8, 9, 11, 0.85) 45%,
			rgba(8, 9, 11, 0.25) 80%
		),
		linear-gradient(0deg, var(--bg) 0%, rgba(8, 9, 11, 0) 30%),
		linear-gradient(180deg, var(--bg) 0%, rgba(8, 9, 11, 0) 25%);
}
.cta-band p {
	color: var(--muted);
}
.cta-band .mail {
	font-size: 0.9rem;
	letter-spacing: 0.04em;
}

/* contact */
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}
.contact-side {
	display: grid;
	gap: 1.5rem;
}
.copy-mail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem;
	color: var(--paper);
}
.form {
	display: grid;
	gap: 1.2rem;
	padding-top: 0.4rem;
}
.form .row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.2rem;
	align-items: start;
}
.field {
	display: grid;
	gap: 0.45rem;
	min-width: 0;
}
.field label {
	font-size: 0.88rem;
	color: var(--paper);
}
.hint {
	font-size: 0.82rem;
	color: var(--muted);
}
input,
select,
textarea {
	font: inherit;
	font-size: 1rem;
	font-weight: 300;
	color: var(--paper);
	background: var(--bg-2);
	border: 1px solid var(--hair);
	border-radius: 0.3rem;
	padding: 0.8rem 0.9rem;
	width: 100%;
}
select option {
	background: var(--bg-2);
}
textarea {
	min-height: 9rem;
	resize: vertical;
}
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--sand);
}
.field [aria-invalid='true'] {
	border-color: var(--error);
}
.error {
	color: var(--error);
	font-size: 0.85rem;
}
.done {
	display: grid;
	gap: 0.6rem;
	padding: 1.6rem 0 1.6rem 1.4rem;
	border-left: 1px solid var(--ok);
}

/* footer */
.site-footer {
	border-top: 1px solid var(--hair);
	padding-block: 3.5rem calc(env(safe-area-inset-bottom, 0px) + 2.5rem);
	font-size: 0.9rem;
	color: var(--muted);
}
.site-footer .cols {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
}
.site-footer h2 {
	font: 400 0.68rem/1.6 var(--sans);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--paper);
	margin-bottom: 1rem;
}
.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}
.site-footer a {
	text-decoration: none;
}
.site-footer a:hover {
	color: var(--paper);
}
.site-footer .legal {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hair);
	font-size: 0.8rem;
}

@media (max-width: 1000px) {
	.columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.columns > :nth-child(2n) {
		border-right: 0;
	}
	.columns > :nth-child(2n + 1) {
		padding-left: 0;
	}
	.columns > :nth-child(n + 3) {
		border-top: 1px solid var(--hair);
	}
}
@media (max-width: 860px) {
	:root {
		--header-h: 4rem;
	}
	.nav {
		display: none;
	}
	.brand {
		font-size: 1.5rem;
	}
	.menu {
		display: block;
		position: relative;
	}
	.menu summary {
		list-style: none;
		cursor: pointer;
	}
	.menu summary::-webkit-details-marker {
		display: none;
	}
	.menu[open] .menu-panel {
		display: grid;
	}
	.menu-panel {
		display: none;
		position: absolute;
		right: 0;
		top: calc(100% + 0.6rem);
		min-width: 15rem;
		gap: 0.1rem;
		padding: 0.6rem;
		background: var(--bg-2);
		border: 1px solid var(--hair);
		border-radius: 0.3rem;
	}
	.menu-panel a {
		padding: 0.7rem 0.8rem;
		text-decoration: none;
		color: var(--paper);
	}
	.header-cta {
		display: none;
	}
	.photo-hero {
		min-height: 88svh;
		align-items: end;
	}
	.plate {
		height: 100%;
	}
	.backdrop .plate {
		height: 50%;
	}
	.photo-hero.full {
		min-height: 100svh;
	}
	.plate::after {
		background: linear-gradient(
			0deg,
			var(--bg) 6%,
			rgba(8, 9, 11, 0.82) 45%,
			rgba(8, 9, 11, 0.15) 75%,
			rgba(8, 9, 11, 0.4) 100%
		);
	}
	.photo-hero .hero-content {
		padding-block: 40svh 3rem;
	}
	.strata-labels {
		display: none;
	}
	.caption {
		position: static;
		padding-bottom: 2rem;
	}
	.columns,
	.columns.three,
	.ledger,
	.track,
	.glance,
	.steps,
	.cases,
	.cases.big,
	.products,
	.feature,
	.contact-grid,
	.form .row,
	.who {
		grid-template-columns: minmax(0, 1fr);
	}
	.columns > *,
	.columns > * + *,
	.ledger li,
	.ledger li + li,
	.track li,
	.track li + li,
	.glance div,
	.glance div + div,
	.steps li,
	.steps li + li,
	.cases li,
	.cases li:nth-child(even),
	.cases.big li:not(:nth-child(3n + 1)) {
		padding: 1.3rem 0;
		border-right: 0;
		border-left: 0;
		border-bottom: 1px solid var(--hair);
	}
	.columns > :nth-child(n + 3) {
		border-top: 0;
	}
	.who > p,
	.who > .small {
		grid-column: 1;
	}
	.list li,
	.notes-list a,
	.facts li {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.4rem;
	}
	.specimen {
		aspect-ratio: 4 / 3;
	}
	.site-footer .cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.site-footer .cols > :first-child {
		grid-column: 1 / -1;
	}
	.cta-band {
		min-height: 28rem;
	}
}

/* plain heroes (contact, articles) and the call-to-action text block */
.hero {
	padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem);
}
.hero > .wrap:not(.contact-grid) {
	display: grid;
	gap: 1.5rem;
}
.cta-inner {
	display: grid;
	gap: 1.2rem;
}
.cta-inner > * {
	max-width: 36rem;
}
.timeline li > div {
	display: grid;
	gap: 0.3rem;
	align-content: start;
}
.timeline .eyebrow {
	color: var(--sand);
}

/* sample report */
.report-table {
	width: 100%;
	min-width: 40rem;
	border-collapse: collapse;
}
.report-table th,
.report-table td {
	text-align: left;
	padding: 0.9rem 1.2rem 0.9rem 0;
	border-bottom: 1px solid var(--hair);
	vertical-align: top;
	font-size: 0.95rem;
	color: var(--text);
}
.report-table th {
	font: 400 0.68rem/1.6 var(--sans);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
}
.report-table td:first-child {
	color: var(--sand);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.report-table td.nowrap {
	white-space: nowrap;
}
.report-table code,
.facts code {
	font: 400 0.86em var(--mono);
	color: var(--paper);
	overflow-wrap: anywhere;
}
.finding {
	display: grid;
	gap: 1rem;
	padding-top: 2.4rem;
}
.finding h3 {
	font-size: clamp(1.3rem, 2vw, 1.6rem);
}
.finding .eyebrow {
	color: var(--sand);
}
.letter {
	display: grid;
	gap: 1rem;
	max-width: 46rem;
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--hair-strong);
	background: var(--bg-2);
	color: var(--text);
}
.letter h3 {
	font-size: 1.4rem;
}
.letter ul {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding-left: 1.2rem;
}
.letter .sign {
	color: var(--muted);
	font-size: 0.92rem;
}
.report-table a {
	color: var(--sand);
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-color: var(--hair-strong);
}
.report-table.compact {
	min-width: 0;
}
@media (max-width: 860px) {
	/* inner-page heroes: the photo sits above the text instead of behind it */
	.photo-hero:not(.full) .plate {
		height: 52svh;
	}
	.photo-hero:not(.full) .plate::after {
		background: linear-gradient(
			0deg,
			var(--bg) 0%,
			rgba(8, 9, 11, 0.7) 30%,
			rgba(8, 9, 11, 0.1) 70%,
			rgba(8, 9, 11, 0.45) 100%
		);
	}
	.photo-hero:not(.full) .hero-content {
		padding-block: 38svh 2.5rem;
	}
	.photo-hero:not(.full) {
		min-height: 0;
	}
}
@media (max-width: 860px) {
	/* the services backdrop is texture only on phones; the text needs a clean ground */
	.backdrop .plate {
		height: 40svh;
		opacity: 0.45;
	}
}

/* hover states */
a.col .icon {
	transition:
		color 250ms ease,
		transform 300ms ease;
}
a.col:hover .icon {
	color: var(--sand);
	transform: translateY(-2px);
}
a.col h3,
.list a,
.facts a,
.cases a,
.product .links a,
.notes-list h3,
.site-footer a {
	transition:
		color 200ms ease,
		text-decoration-color 200ms ease;
}
.more::after {
	content: ' →';
	display: inline-block;
	transition: transform 250ms ease;
}
a.col:hover .more::after {
	transform: translateX(4px);
}
.list a:hover,
.product .links a:hover,
.timeline a:hover {
	text-decoration-color: var(--sand);
}
.site-footer a:hover {
	color: var(--paper);
}
.product .bridge {
	transition: color 200ms ease;
}
.product .bridge:hover {
	color: var(--paper);
}

/* headline figures on case pages */
.figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin: 0;
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
}
.figures > div {
	display: grid;
	gap: 0.6rem;
	align-content: start;
	padding: 2.2rem 2rem 2.4rem 0;
	border-right: 1px solid var(--hair);
}
.figures > div + div {
	padding-left: 2rem;
}
.figures > div:last-child {
	border-right: 0;
}
.figures dt {
	font: 300 clamp(4rem, 9vw, 7.5rem) / 0.95 var(--serif);
	letter-spacing: -0.03em;
	color: var(--paper);
	font-variant-numeric: lining-nums;
}
.figures dt .u {
	color: var(--sand);
}
.figures dd {
	margin: 0;
	max-width: 18rem;
	color: var(--muted);
	font-size: 0.98rem;
}

/* diagram */
.diagram {
	margin: 0;
	display: grid;
	gap: 1.6rem;
}
.diagram svg {
	width: 100%;
	height: auto;
	display: block;
}
.diagram .tall {
	display: none;
}
.diagram .d-node {
	fill: var(--bg-2);
	stroke: var(--hair-strong);
	stroke-width: 1;
}
.diagram .d-agent {
	fill: var(--sand-soft);
	stroke: var(--sand);
}
.diagram .d-edge {
	stroke: var(--hair-strong);
	stroke-width: 1.2;
	fill: none;
}
.diagram .d-reg {
	fill: none;
	stroke: var(--sand);
	stroke-width: 1.2;
	stroke-dasharray: 6 6;
}
.diagram .d-t {
	fill: var(--paper);
	font: 400 17px var(--sans);
}
.diagram .d-s {
	fill: var(--muted);
	font: 400 13px var(--sans);
}
.diagram .d-r {
	fill: var(--sand);
	font: 400 12px var(--sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.diagram .d-m circle {
	fill: var(--sand);
}
.diagram .d-m text {
	fill: var(--bg);
	font: 600 13px var(--sans);
}
.diagram .d-arrow {
	fill: var(--hair-strong);
}
.legend {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: 0.9rem 2.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: m;
}
.legend li {
	display: grid;
	grid-template-columns: 1.7rem minmax(0, 1fr);
	gap: 0.8rem;
	align-items: start;
	color: var(--text);
	font-size: 0.97rem;
	counter-increment: m;
}
.legend li::before {
	content: counter(m);
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--sand);
	color: var(--bg);
	font-weight: 600;
	font-size: 0.8rem;
}
.legend li.reg::before {
	content: '';
	background: transparent;
	border: 1.2px dashed var(--sand);
}
.figure-band {
	padding-block: 1rem 3rem;
}
@media (max-width: 700px) {
	.diagram .wide {
		display: none;
	}
	.diagram .tall {
		display: block;
	}
	.figures > div,
	.figures > div + div {
		padding: 1.6rem 0;
		border-right: 0;
		border-bottom: 1px solid var(--hair);
	}
	.figures > div:last-child {
		border-bottom: 0;
	}
}
.legend li.reg {
	counter-increment: none;
}
.figures-section {
	padding-block: 0 0.5rem;
}
.figure-band {
	padding-block: 1.5rem;
}
section:has(+ .figure-band) {
	padding-bottom: 1.5rem;
}
.figure-band + section {
	padding-top: 1.5rem;
}

/* document pages (privacy, legal) written for the earlier stylesheet */
:root {
	--panel: var(--bg-2);
	--panel-border: var(--hair);
	--line: var(--hair);
	--muted-strong: var(--text);
	--accent: var(--sand);
	--accent-clear: var(--sand);
}
.section {
	width: 100%;
	max-width: 60rem;
	margin-inline: auto;
	padding: clamp(3.5rem, 8vw, 6rem) clamp(1rem, 4vw, 4rem) clamp(4rem, 9vw, 7rem);
}
.section-title {
	font: 300 clamp(2.6rem, 4.6vw, 4.2rem) / 1.05 var(--serif);
	color: var(--paper);
	letter-spacing: -0.012em;
	margin: 0.6rem 0 1.2rem;
}
.section-lede {
	max-width: 40rem;
	color: var(--muted);
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
}
.section h2 {
	font: 400 1.25rem/1.3 var(--serif);
}
.section a {
	color: var(--paper);
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-color: var(--hair-strong);
}
.section ul {
	color: var(--muted);
}
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: 400 0.92rem/1 var(--sans);
	padding: 0.9rem 1.25rem;
	border-radius: 0.3rem;
	border: 1px solid var(--hair-strong);
	color: var(--paper);
	text-decoration: none;
}
.button:hover {
	border-color: var(--paper);
}
.section .button {
	text-decoration: none;
}

/* an odd last product spans the row: image left, text right */
.products > .product:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 2.5rem;
}
.products > .product:last-child:nth-child(odd) > * {
	grid-column: 2;
}
.products > .product:last-child:nth-child(odd) > .shot {
	grid-column: 1;
	grid-row: 1 / span 6;
	align-self: start;
}
@media (max-width: 860px) {
	.products > .product:last-child:nth-child(odd) {
		grid-template-columns: minmax(0, 1fr);
	}
	.products > .product:last-child:nth-child(odd) > *,
	.products > .product:last-child:nth-child(odd) > .shot {
		grid-column: 1;
		grid-row: auto;
	}
}