@charset "UTF-8";

/* ==========================================================================
   Greenology Digital — main stylesheet
   --------------------------------------------------------------------------
   00  Tokens
   01  Reset & base
   02  Typography
   03  Layout primitives
   04  Brand devices — the double-line rule, markers, actions
   05  Motion
   06  Header & navigation
   07  Ecosystem canvas & scroll spine
   08  Home: hero
   09  Home: brand statement
   10  Home: capability map
   11  Home: selected work
   12  Home: process
   13  Home: technology
   14  Home: differentiators
   15  Home: founder
   16  Home: insights
   17  Home: closing
   18  Footer
   19  Inner pages
   20  Editorial content & forms
   21  Motifs
   22  Responsive
   ========================================================================== */


/* 00  Tokens
   ========================================================================== */

:root {
	/* Ink — authority, depth, technology. */
	--ink:            #0a1526;
	--ink-900:        #0c1a2e;
	--ink-800:        #102039;
	--ink-700:        #16293f;
	--ink-600:        #1f3450;
	--ink-line:       rgba(246, 243, 238, 0.13);
	--ink-line-soft:  rgba(246, 243, 238, 0.07);

	/* Paper — warmth, editorial calm. */
	--paper:          #f6f3ee;
	--paper-2:        #efeae1;
	--paper-3:        #e4ded2;
	--paper-line:     rgba(10, 21, 38, 0.13);
	--paper-line-soft:rgba(10, 21, 38, 0.07);

	/* Slate — supporting text and surfaces. */
	--slate:          #55677a;
	--slate-light:    #93a3b4;

	/* Signal — energy, interaction, the double-line motif. */
	--orange:         #e2571a;
	--orange-solid:   #c94a12;   /* white text on this passes AA at button size */
	--orange-ink:     #b03e0e;   /* passes AA on paper at body size */
	--orange-bright:  #ff8340;   /* for use on ink */
	--orange-wash:    rgba(226, 87, 26, 0.12);

	/* Moss — sustainability, used sparingly and never as a theme colour. */
	--moss:           #4b6b58;

	/* Surface variables. Sections swap these; components read them. */
	--surface:        var(--paper);
	--on-surface:     var(--ink);
	--on-surface-dim: var(--slate);
	--line:           var(--paper-line);
	--line-soft:      var(--paper-line-soft);
	--signal:         var(--orange-ink);
	--signal-pure:    var(--orange);

	/* Type. */
	--font-display: "Bricolage Grotesque", "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-body:    "Instrument Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--step-hero:   clamp(2.9rem, 0.95rem + 6.5vw, 7.25rem);
	--step-xl:     clamp(2.5rem, 1.55rem + 3.9vw, 5rem);
	--step-l:      clamp(2rem, 1.5rem + 2.1vw, 3.35rem);
	--step-m:      clamp(1.5rem, 1.28rem + 0.95vw, 2.15rem);
	--step-s:      clamp(1.2rem, 1.11rem + 0.4vw, 1.45rem);
	--step-lead:   clamp(1.1rem, 1.02rem + 0.4vw, 1.4rem);
	--step-body:   1.0625rem;
	--step-small:  0.9375rem;
	--step-label:  0.7rem;

	/* Rhythm. */
	--gutter:      clamp(1.25rem, 4.2vw, 5.5rem);
	--shell:       1560px;
	--measure:     62ch;
	--section-y:   clamp(5rem, 9vw, 11rem);
	--gap:         clamp(1rem, 2.2vw, 2.25rem);

	/* Motion. */
	--ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--dur:         520ms;
	--dur-fast:    240ms;

	--radius:      3px;
	--nav-h:       clamp(64px, 5.4vw, 88px);
}

/* Dark surfaces re-point the surface variables. Everything else follows. */
.on-ink {
	--surface:        var(--ink);
	--on-surface:     var(--paper);
	--on-surface-dim: var(--slate-light);
	--line:           var(--ink-line);
	--line-soft:      var(--ink-line-soft);
	--signal:         var(--orange-bright);
	--signal-pure:    var(--orange-bright);

	background: var(--surface);
	color: var(--on-surface);
}

.on-ink-800 { background: var(--ink-800); }
.on-paper-2 { --surface: var(--paper-2); background: var(--paper-2); }
.on-paper-3 { --surface: var(--paper-3); background: var(--paper-3); }


/* 01  Reset & base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-body);
	line-height: 1.68;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
}

/* The hidden attribute must win over component display rules. */
[hidden] { display: none !important; }

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

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

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }

::selection { background: var(--orange-solid); color: #fff; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--signal-pure);
	outline-offset: 3px;
	border-radius: 2px;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

/* Skip link */
.skip-link {
	position: absolute;
	left: 1rem;
	top: 1rem;
	z-index: 999;
	transform: translateY(-200%);
	background: var(--ink);
	color: var(--paper);
	padding: 0.75rem 1.25rem;
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.u-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* 02  Typography
   ========================================================================== */

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.024em;
	margin: 0;
	font-variation-settings: "opsz" 48, "wdth" 96;
	text-wrap: balance;
}

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

.t-hero {
	font-size: var(--step-hero);
	line-height: 0.94;
	letter-spacing: -0.035em;
	font-weight: 500;
	font-variation-settings: "opsz" 96, "wdth" 92;
}

.t-xl  { font-size: var(--step-xl);  line-height: 0.98; letter-spacing: -0.032em; font-variation-settings: "opsz" 72, "wdth" 94; }
.t-l   { font-size: var(--step-l);   line-height: 1.02; letter-spacing: -0.028em; font-variation-settings: "opsz" 56, "wdth" 96; }
.t-m   { font-size: var(--step-m);   line-height: 1.14; letter-spacing: -0.02em;  font-variation-settings: "opsz" 36, "wdth" 98; }
.t-s   { font-size: var(--step-s);   line-height: 1.25; letter-spacing: -0.012em; font-variation-settings: "opsz" 24, "wdth" 100; }

.t-lead {
	font-family: var(--font-body);
	font-size: var(--step-lead);
	line-height: 1.5;
	letter-spacing: -0.008em;
	font-weight: 400;
	max-width: 46ch;
	text-wrap: pretty;
}

.t-body { max-width: var(--measure); text-wrap: pretty; }

.t-dim  { color: var(--on-surface-dim); }

.t-mono {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
}

.t-signal { color: var(--signal); }

/* A single word or phrase set apart inside a headline. Narrowed rather than
   italicised — the display face has no true italic, and a synthesised slant
   would be the one cheap-looking thing on the page. */
.t-mark {
	color: var(--signal);
	font-variation-settings: "opsz" 96, "wdth" 82;
}

/* Very large numerals used as section indices. */
.t-numeral {
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: var(--step-small);
	letter-spacing: 0.08em;
	color: var(--signal);
	font-variant-numeric: tabular-nums;
}


/* 03  Layout primitives
   ========================================================================== */

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.shell--narrow { max-width: 1120px; }

.section {
	position: relative;
	padding-block: var(--section-y);
}

.section--tight { padding-block: clamp(3.5rem, 6vw, 6.5rem); }

.section__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

@media (min-width: 900px) {
	.section__head--split {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		align-items: end;
		gap: clamp(2rem, 5vw, 6rem);
	}
}

.grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--gap);
}

.stack > * + * { margin-top: var(--flow, 1.25rem); }

/* Fine ruled background used behind the capability map, drawn with a gradient
   so it costs nothing and stays crisp at any zoom. */
.ruled {
	position: relative;
}
.ruled::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to right, var(--line-soft) 1px, transparent 1px);
	background-size: calc(100% / 6) 100%;
	opacity: 0.9;
	pointer-events: none;
}
@media (max-width: 700px) {
	.ruled::before { background-size: calc(100% / 3) 100%; }
}


/* 04  Brand devices
   ========================================================================== */

/* The double line. Two strokes, unequal, the shorter one in signal orange.
   It appears as a section marker, a link underline, an image frame edge and a
   loading state — the same gesture at every scale. */
.rule {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	flex: 0 0 auto;
}
.rule i {
	display: block;
	height: 1px;
	background: currentColor;
	opacity: 0.35;
	transform-origin: left center;
}
.rule i:first-child { width: 100%; }
.rule i:last-child  { width: 46%; background: var(--signal-pure); opacity: 1; }

.rule--horizontal { width: clamp(40px, 6vw, 84px); }
.rule--vertical {
	flex-direction: row;
	height: clamp(40px, 6vw, 84px);
	gap: 3px;
	width: auto;
}
.rule--vertical i { width: 1px; height: 100%; }
.rule--vertical i:last-child { height: 46%; align-self: flex-start; }

.rule--full { width: 100%; }

.rule--animate i {
	transform: scaleX(0);
	transition: transform var(--dur) var(--ease-out);
}
.rule--animate i:last-child { transition-delay: 120ms; }
.is-revealed .rule--animate i,
.rule--animate.is-revealed i { transform: scaleX(1); }

/* Section marker */
.marker {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.4vw, 1.15rem);
	margin: 0 0 clamp(1.25rem, 2.4vw, 2rem);
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--on-surface-dim);
}
.marker__index { color: var(--signal); font-variant-numeric: tabular-nums; }
.marker__rule  { width: clamp(28px, 4vw, 56px); }
.marker__label { color: var(--on-surface-dim); }

/* Actions */
.action {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
	white-space: nowrap;
}

.action__arrow svg {
	width: 20px; height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	transition: transform var(--dur-fast) var(--ease);
}
.action:hover .action__arrow svg { transform: translateX(4px); }

.action--solid {
	background: var(--orange-solid);
	color: #fff;
	padding: 1.05rem 1.5rem;
	border: 1px solid var(--orange-solid);
}
.action--solid:hover { background: var(--orange-ink); border-color: var(--orange-ink); }
.action--solid .action__rule { display: none; }

.action--ghost {
	border: 1px solid var(--line);
	color: var(--on-surface);
	padding: 1.05rem 1.5rem;
}
.action--ghost:hover { border-color: var(--signal-pure); color: var(--signal); }
.action--ghost .action__rule { display: none; }

.action--text {
	color: var(--on-surface);
	padding-block: 0.35rem;
	flex-direction: row;
	align-items: baseline;
}
.action--text .action__rule {
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.action--text .action__rule i {
	display: block;
	height: 1px;
	background: currentColor;
	opacity: 0.3;
	transform: scaleX(1);
	transform-origin: left;
	transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease);
}
.action--text .action__rule i:last-child {
	background: var(--signal-pure);
	opacity: 1;
	transform: scaleX(0.34);
}
.action--text:hover .action__rule i:last-child { transform: scaleX(1); }
.action--text:hover .action__rule i:first-child { opacity: 0.55; }

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.75rem, 1.6vw, 1.25rem) clamp(1rem, 2.4vw, 2rem);
	align-items: center;
}

/* Badges */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--line);
	color: var(--on-surface-dim);
}
.badge--venture {
	color: var(--signal);
	border-color: color-mix(in srgb, var(--signal-pure) 45%, transparent);
}
.badge--venture i {
	width: 6px; height: 6px;
	background: var(--signal-pure);
	display: block;
}


/* 05  Motion
   ========================================================================== */

[data-reveal] {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition:
		opacity var(--dur) var(--ease-out),
		transform var(--dur) var(--ease-out);
	transition-delay: calc(var(--reveal-order, 0) * 70ms);
	will-change: opacity, transform;
}
[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

.no-js [data-reveal] { opacity: 1; transform: none; }

/* Headline lines that rise independently. */
.reveal-line {
	display: block;
	overflow: hidden;
}
.reveal-line > span {
	display: block;
	transform: translate3d(0, 108%, 0);
	transition: transform 900ms var(--ease-out);
	transition-delay: calc(var(--line-order, 0) * 90ms);
}
.is-revealed .reveal-line > span { transform: none; }
.no-js .reveal-line > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	[data-reveal] { opacity: 1; transform: none; }
	.reveal-line > span { transform: none; }
	.rule--animate i { transform: scaleX(1); }
}

html[data-motion="reduced"] [data-reveal] { opacity: 1; transform: none; }
html[data-motion="reduced"] .reveal-line > span { transform: none; }
html[data-motion="reduced"] .rule--animate i { transform: scaleX(1); }


/* 06  Header & navigation
   ========================================================================== */

.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	height: var(--nav-h);
	display: flex;
	align-items: center;
	color: var(--ink);
	transition:
		background-color 420ms var(--ease),
		color 420ms var(--ease),
		box-shadow 420ms var(--ease);
}

.site-header::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var(--paper-line);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 620ms var(--ease-out);
}

/* Over a dark hero the header is invisible furniture. */
.surface-dark-top .site-header { color: var(--paper); }

/* Specificity here has to beat `.surface-dark-top .site-header`, or the
   navigation would stay paper-coloured on a paper background once stuck. */
.site-header.is-stuck,
.surface-dark-top .site-header.is-stuck {
	background: rgba(246, 243, 238, 0.92);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	color: var(--ink);
}
.site-header.is-stuck::after { transform: scaleX(1); }

.site-header.is-hidden { transform: translateY(-102%); }
.site-header { transition-property: background-color, color, box-shadow, transform; }

.site-header__inner {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 3rem);
}

/* Brand */
.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: inherit;
	flex: 0 0 auto;
}
.brand__img {
	max-height: clamp(28px, 3.1vw, 46px);
	max-width: min(52vw, 340px);
	width: auto;
	object-fit: contain;
}

/* Two cuts of the logo: the colour one for paper, the reversed one for the
   dark hero, the footer and the mobile panel. Only ever one is visible. */
.brand--dual .brand__img--light { display: none; }
.brand--dual .brand__img--colour { display: block; }

.surface-dark-top .site-header:not(.is-stuck) .brand--dual .brand__img--light { display: block; }
.surface-dark-top .site-header:not(.is-stuck) .brand--dual .brand__img--colour { display: none; }

.nav-panel .brand--dual .brand__img--light,
.site-footer .brand--dual .brand__img--light { display: block; }
.nav-panel .brand--dual .brand__img--colour,
.site-footer .brand--dual .brand__img--colour { display: none; }

@media (max-width: 620px) {
	.brand__img { max-width: min(58vw, 240px); }
}

.brand__mark svg {
	width: clamp(30px, 3vw, 38px);
	height: clamp(30px, 3vw, 38px);
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: square;
}
.brand__mark-frame { opacity: 0.32; }
.brand__mark-g     { stroke-width: 2.2; }
.brand__mark-rule  { stroke: var(--orange); stroke-width: 2; }
.brand__mark-rule--b { opacity: 0.55; }
.brand:hover .brand__mark-rule--b { opacity: 1; }
.brand__mark-rule  { transition: opacity var(--dur-fast) var(--ease); }

.brand__word {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	font-family: var(--font-display);
	letter-spacing: -0.02em;
}
.brand__word-a { font-size: 1.02rem; font-weight: 600; font-variation-settings: "wdth" 94; }
.brand__word-b {
	font-family: var(--font-mono);
	font-size: 0.56rem;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	opacity: 0.62;
	font-weight: 400;
}

/* Desktop nav */
.nav { flex: 1 1 auto; display: flex; justify-content: flex-end; }

.nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1.6vw, 1.6rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav__link {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.65rem 0.15rem;
	font-size: 0.92rem;
	letter-spacing: -0.005em;
	color: inherit;
	transition: color var(--dur-fast) var(--ease);
}

.nav__index {
	font-family: var(--font-mono);
	font-size: 0.56rem;
	letter-spacing: 0.1em;
	opacity: 0.45;
	transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__link:hover .nav__index { color: var(--orange); opacity: 1; }

.nav__underline {
	position: absolute;
	left: 0; right: 0.15rem;
	bottom: 0.32rem;
	display: flex;
	flex-direction: column;
	gap: 2px;
	pointer-events: none;
}
.nav__underline i {
	display: block;
	height: 1px;
	background: currentColor;
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 420ms var(--ease-out), opacity 200ms var(--ease);
}
.nav__underline i:last-child { background: var(--orange); }
.nav__link:hover .nav__underline i,
.nav__item.current-menu-item > .nav__link .nav__underline i,
.nav__link[aria-current="page"] .nav__underline i { opacity: 1; transform: scaleX(1); }
.nav__link:hover .nav__underline i:first-child { opacity: 0.4; }
.nav__underline i:last-child { transition-delay: 90ms; }

/* Highlighted action */
.nav__item--cta { margin-left: clamp(0.25rem, 1.2vw, 1rem); }
.nav__link--cta {
	padding: 0.72rem 1.15rem;
	border: 1px solid currentColor;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	overflow: hidden;
}
.nav__link--cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--orange-solid);
	transform: translate3d(0, 101%, 0);
	transition: transform 460ms var(--ease-out);
	z-index: -1;
}
.nav__link--cta { position: relative; isolation: isolate; }
.nav__link--cta:hover { color: #fff; border-color: var(--orange-solid); }
.nav__link--cta:hover::before { transform: none; }
.nav__cta-rule {
	position: absolute;
	right: 0.7rem; bottom: 0.42rem;
	display: flex; flex-direction: column; gap: 2px;
	width: 14px;
}
.nav__cta-rule i { display: block; height: 1px; background: var(--orange); }
.nav__cta-rule i:last-child { width: 60%; }
.nav__link--cta:hover .nav__cta-rule i { background: #fff; }

/* Submenus */
.nav__item--parent { position: relative; }
.nav__sub {
	position: absolute;
	top: calc(100% + 0.4rem);
	left: -1rem;
	min-width: 250px;
	background: var(--ink);
	color: var(--paper);
	--on-surface: var(--paper);
	--on-surface-dim: var(--slate-light);
	--signal: var(--orange-bright);
	--signal-pure: var(--orange-bright);
	padding: 0.6rem 0;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 220ms var(--ease), transform 260ms var(--ease-out), visibility 220ms;
	box-shadow: 0 22px 50px -20px rgba(10, 21, 38, 0.45);
}
.nav__item--parent:hover > .nav__sub,
.nav__item--parent:focus-within > .nav__sub,
.nav__item--parent.is-open > .nav__sub {
	opacity: 1; visibility: visible; transform: none;
}
.nav__link--sub {
	display: block;
	padding: 0.6rem 1.4rem;
	font-size: 0.9rem;
	border-left: 2px solid transparent;
}
.nav__link--sub:hover { border-left-color: var(--orange); background: rgba(255,255,255,0.04); }

.nav__toggle {
	display: none;
	width: 26px; height: 26px;
	align-items: center; justify-content: center;
}
.nav__toggle svg { width: 11px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Mobile trigger */
.nav-trigger {
	display: none;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.65rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: inherit;
	padding: 0.6rem 0;
}
.nav-trigger__bars {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 24px;
}
.nav-trigger__bars i {
	display: block; height: 1.5px; background: currentColor;
	transition: transform 320ms var(--ease-out), width 320ms var(--ease-out), background-color 200ms;
}
.nav-trigger__bars i:last-child { width: 62%; background: var(--orange); }
.nav-trigger[aria-expanded="true"] .nav-trigger__bars i:first-child { transform: translateY(2.75px) rotate(15deg); }
.nav-trigger[aria-expanded="true"] .nav-trigger__bars i:last-child  { transform: translateY(-2.75px) rotate(-15deg); width: 100%; }

/* Mobile panel */
.nav-panel {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: var(--ink);
	color: var(--paper);
	--surface: var(--ink);
	--on-surface: var(--paper);
	--on-surface-dim: var(--slate-light);
	--line: var(--ink-line);
	--line-soft: var(--ink-line-soft);
	--signal: var(--orange-bright);
	--signal-pure: var(--orange-bright);
	display: flex;
	flex-direction: column;
	padding: calc(var(--nav-h) + 2rem) var(--gutter) 2rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	clip-path: inset(0 0 100% 0);
	transition: clip-path 640ms var(--ease-out);
	visibility: hidden;
}
.nav-panel.is-open { clip-path: inset(0 0 0 0); visibility: visible; }

.nav-panel__list { list-style: none; margin: 0; padding: 0; }
.nav-panel__list li { border-bottom: 1px solid var(--ink-line); }
.nav-panel__list a {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	padding: 1.05rem 0;
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 7vw, 2.4rem);
	letter-spacing: -0.028em;
	line-height: 1.1;
	font-variation-settings: "opsz" 40, "wdth" 96;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 420ms var(--ease-out), transform 480ms var(--ease-out), color 200ms;
	transition-delay: calc(var(--i, 0) * 55ms + 120ms);
}
.nav-panel.is-open .nav-panel__list a { opacity: 1; transform: none; }
.nav-panel__list a:hover { color: var(--orange-bright); }
.nav-panel__list .nav__index { font-size: 0.62rem; }

.nav-panel__foot {
	margin-top: auto;
	padding-top: 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.nav-panel__meta {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--slate-light);
}

body.nav-open { overflow: hidden; }

@media (max-width: 1100px) {
	.nav { display: none; }
	.nav-trigger { display: inline-flex; }
}
@media (min-width: 1101px) {
	.nav-panel { display: none; }
}


/* 07  Ecosystem canvas & scroll spine
   ========================================================================== */

.ecosystem {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-height: 78vh;
}
.ecosystem canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.ecosystem__caption {
	position: absolute;
	left: 0; bottom: -1.75rem;
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--on-surface-dim);
}

/* The spine: a fixed double line that fills as the page is read, with a tick
   for every section. It is the same device as the marker rule, stretched. */
.spine {
	position: fixed;
	left: clamp(14px, 1.9vw, 30px);
	top: 0;
	bottom: 0;
	width: 12px;
	z-index: 60;
	pointer-events: none;
	display: none;
	mix-blend-mode: normal;
}
.spine__track,
.spine__fill {
	position: absolute;
	left: 3px;
	top: 0;
	width: 1px;
}
.spine__track { height: 100%; background: currentColor; opacity: 0.16; }
.spine__fill  { height: 0; background: var(--orange); transition: height 120ms linear; }
.spine__track--b { left: 7px; height: 100%; opacity: 0.08; }

.spine__ticks { position: absolute; inset: 0; }
.spine__tick {
	position: absolute;
	left: 0;
	width: 11px;
	height: 1px;
	background: currentColor;
	opacity: 0.2;
	transition: opacity 260ms var(--ease), background-color 260ms var(--ease), width 260ms var(--ease);
}
.spine__tick.is-active { opacity: 1; background: var(--orange); width: 12px; }

.spine__label {
	position: absolute;
	left: 20px;
	transform: translateY(-50%);
	font-family: var(--font-mono);
	font-size: 0.55rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 260ms var(--ease);
	writing-mode: vertical-rl;
}

@media (min-width: 1280px) {
	.spine { display: block; }
}

.spine { color: var(--ink); }
.spine.on-dark { color: var(--paper); }


/* 08  Home: hero
   ========================================================================== */

.hero {
	position: relative;
	min-height: min(92svh, 920px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 5rem));
	overflow: clip;
}

.hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, var(--ink-line-soft) 1px, transparent 1px);
	background-size: calc(100% / 12) 100%;
	opacity: 0.85;
	mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.hero__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gap);
	row-gap: clamp(2rem, 4vw, 3.75rem);
	align-content: end;
	flex: 1 1 auto;
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
	position: relative;
	z-index: 2;
}

.hero__head,
.hero__body { grid-column: 1 / -1; }

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--orange-bright);
}
.hero__eyebrow .rule { width: 44px; color: var(--paper); }

.hero__headline {
	margin: 0;
}
.hero__headline .reveal-line > span { color: var(--paper); }
.hero__headline .reveal-line { padding-bottom: 0.32em; margin-bottom: -0.26em; }

/* The second line carries the emphasis: a hairline of orange under the last
   word, drawn as the brand device rather than a highlight block. */
.hero__accent {
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	background-image:
		linear-gradient(var(--orange), var(--orange)),
		linear-gradient(var(--orange), var(--orange));
	background-repeat: no-repeat;
	background-position: 0 calc(100% - 6px), 0 100%;
	background-size: 0 2px, 0 2px;
	transition: background-size 900ms var(--ease-out);
	transition-delay: 620ms;
	padding-bottom: 0.1em;
}
.is-revealed .hero__accent { background-size: 100% 2px, 34% 2px; }

/* On narrow screens the headline wraps and the device would repeat under every
   fragment. One rule per line reads better than three. */
@media (max-width: 760px) {
	.hero__accent { background-position: 0 100%, 0 100%; }
	.is-revealed .hero__accent { background-size: 100% 2px, 0 2px; }
}

.hero__support { margin-bottom: clamp(1.75rem, 3.2vw, 2.5rem); color: var(--paper); opacity: 0.86; max-width: 34ch; }

.hero__visual {
	grid-column: 1 / -1;
	position: relative;
	margin-top: clamp(2.5rem, 5vw, 0rem);
}

.hero__foot {
	position: relative;
	z-index: 2;
	border-top: 1px solid var(--ink-line);
}
.hero__foot-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: clamp(1rem, 1.8vw, 1.5rem);
	flex-wrap: wrap;
}
.hero__capabilities {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--slate-light);
	margin: 0;
}
.hero__capabilities b { color: var(--paper); font-weight: 500; }

.hero__cue {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--slate-light);
}
.hero__cue i {
	display: block;
	width: 1px;
	height: 22px;
	background: linear-gradient(to bottom, var(--orange) 45%, transparent 45%);
	background-size: 100% 200%;
	animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
	0%   { background-position: 0 -100%; }
	60%  { background-position: 0 100%; }
	100% { background-position: 0 100%; }
}

@media (min-width: 900px) {
	.hero__head   { grid-column: 1 / 12; grid-row: 1; }
	.hero__body   { grid-column: 1 / 6; grid-row: 2; align-self: end; }
	.hero__visual { grid-column: 7 / -1; grid-row: 2; margin-top: 0; align-self: end; }
	.hero__visual .ecosystem { aspect-ratio: 4 / 3; max-height: 44vh; }
}
@media (min-width: 1280px) {
	.hero__head   { grid-column: 1 / 12; }
	.hero__body   { grid-column: 1 / 6; }
	.hero__visual {
		grid-column: 7 / -1;
		margin-right: calc(var(--gutter) * -0.5);
	}
}


/* 09  Home: brand statement
   ========================================================================== */

/* Editorial line breaks: forced where there is room, natural where there is not. */
.br-wide { display: none; }
@media (min-width: 900px) { .br-wide { display: initial; } }

.statement__lead {
	grid-column: 1 / -1;
	margin: 0 0 clamp(2rem, 4vw, 3.5rem);
	max-width: 22ch;
}

.statement__body {
	grid-column: 1 / -1;
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* Modules that scatter, then assemble into one connected system. */
.assemble {
	grid-column: 1 / -1;
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.assemble__node {
	position: relative;
	flex: 1 1 auto;
	padding: clamp(1.1rem, 2.2vw, 1.75rem) clamp(0.75rem, 1.6vw, 1.5rem);
	font-family: var(--font-display);
	font-size: clamp(0.95rem, 1.5vw, 1.35rem);
	letter-spacing: -0.015em;
	font-variation-settings: "opsz" 20, "wdth" 96;
	text-align: center;
	transform: translate3d(var(--tx, 0), var(--ty, 0), 0) rotate(var(--rot, 0deg));
	opacity: 0;
	transition:
		transform 980ms var(--ease-out),
		opacity 620ms var(--ease-out);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.assemble__node + .assemble__node { border-left: 1px solid var(--line); }
.assemble.is-revealed .assemble__node {
	transform: none;
	opacity: 1;
}
.assemble__node::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -1px;
	width: 0;
	height: 2px;
	background: var(--orange);
	transition: width 520ms var(--ease-out), left 520ms var(--ease-out);
}
.assemble.is-revealed .assemble__node::after {
	left: 0;
	width: 100%;
	transition-delay: calc(var(--i, 0) * 90ms + 700ms);
}
.assemble.is-revealed .assemble__node:not(:last-child)::after { width: 100%; }

@media (max-width: 720px) {
	.assemble { flex-direction: column; align-items: stretch; }
	.assemble__node + .assemble__node { border-left: 0; border-top: 1px solid var(--line); }
}

@media (min-width: 900px) {
	.statement__lead { grid-column: 1 / 10; }
	.statement__body {
		grid-column: 6 / -1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(1.5rem, 3vw, 3rem);
	}
}


/* 10  Home: capability map
   ========================================================================== */

.capmap {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	position: relative;
}

.capmap__tabs {
	display: flex;
	flex-direction: column;
	position: relative;
	border-top: 1px solid var(--line);
}

.capmap__tab {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(0.9rem, 2vw, 1.6rem);
	width: 100%;
	text-align: left;
	padding: clamp(1.1rem, 2.4vw, 1.9rem) 0;
	border-bottom: 1px solid var(--line);
	color: var(--on-surface);
	transition: color var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease-out);
}
.capmap__tab-index {
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	color: var(--on-surface-dim);
	transition: color var(--dur-fast) var(--ease);
}
.capmap__tab-title {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 4vw, 3.1rem);
	line-height: 1;
	letter-spacing: -0.03em;
	font-weight: 500;
	font-variation-settings: "opsz" 48, "wdth" 94;
	transition: opacity var(--dur-fast) var(--ease);
	opacity: 0.42;
}
.capmap__tab-line {
	font-family: var(--font-body);
	font-size: var(--step-small);
	color: var(--on-surface-dim);
	max-width: 30ch;
	display: none;
}
.capmap__tab-mark {
	width: clamp(28px, 4vw, 58px);
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.capmap__tab-mark i {
	display: block; height: 1px; background: currentColor; opacity: 0.25;
	transform: scaleX(0.2); transform-origin: right;
	transition: transform 460ms var(--ease-out), background-color 240ms, opacity 240ms;
}
.capmap__tab-mark i:last-child { background: var(--signal-pure); opacity: 0; }

.capmap__tab:hover .capmap__tab-title { opacity: 0.72; }
.capmap__tab[aria-selected="true"] { padding-left: clamp(0.5rem, 1.4vw, 1.25rem); }
.capmap__tab[aria-selected="true"] .capmap__tab-title { opacity: 1; }
.capmap__tab[aria-selected="true"] .capmap__tab-index { color: var(--signal); }
.capmap__tab[aria-selected="true"] .capmap__tab-mark i { transform: scaleX(1); opacity: 0.4; }
.capmap__tab[aria-selected="true"] .capmap__tab-mark i:last-child { opacity: 1; transform: scaleX(0.55); }

.capmap__panel {
	display: none;
	padding-top: clamp(0.5rem, 1.5vw, 1rem);
}
.capmap__panel.is-active { display: block; }

.capmap__panel-line {
	font-family: var(--font-display);
	font-size: var(--step-m);
	line-height: 1.14;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 32, "wdth" 98;
	margin: 0 0 1rem;
	max-width: 22ch;
}
.capmap__panel-body {
	color: var(--on-surface-dim);
	max-width: 48ch;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.capmap__items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.capmap__item { border-bottom: 1px solid var(--line); }
.capmap__item a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: 0.95rem 0;
	transition: padding-left var(--dur) var(--ease-out), color var(--dur-fast) var(--ease);
}
.capmap__item a:hover { padding-left: 0.6rem; color: var(--signal); }
.capmap__item-name { font-size: 1.02rem; letter-spacing: -0.008em; }
.capmap__item-sum {
	display: block;
	font-size: var(--step-small);
	color: var(--on-surface-dim);
	max-width: 52ch;
	margin-top: 0.15rem;
}
.capmap__item a:hover .capmap__item-sum { color: var(--on-surface-dim); }
.capmap__item-arrow svg {
	width: 20px; height: 16px;
	fill: none; stroke: currentColor; stroke-width: 1.3;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.capmap__item a:hover .capmap__item-arrow svg { opacity: 1; transform: none; }

/* Panels animate in with a short, unfussy fade-and-lift. */
.capmap__panel.is-active > * {
	animation: panelIn 620ms var(--ease-out) both;
}
.capmap__panel.is-active > *:nth-child(2) { animation-delay: 70ms; }
.capmap__panel.is-active > *:nth-child(3) { animation-delay: 140ms; }
@keyframes panelIn {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (min-width: 1000px) {
	.capmap {
		grid-template-columns: minmax(0, 0.92fr) 1px minmax(0, 1.08fr);
		gap: clamp(2rem, 4vw, 4.5rem);
		align-items: start;
	}
	.capmap__tabs  { grid-column: 1; grid-row: 1; }
	.capmap__spine { grid-column: 2; grid-row: 1; background: var(--line); align-self: stretch; position: relative; }
	.capmap__panel { grid-column: 3; grid-row: 1; }
	.capmap__spine::after {
		content: "";
		position: absolute;
		left: 0; width: 1px;
		background: var(--signal-pure);
		height: 25%;
		top: 0;
		transition: top 520ms var(--ease-out);
	}
	.capmap[data-active="1"] .capmap__spine::after { top: 25%; }
	.capmap[data-active="2"] .capmap__spine::after { top: 50%; }
	.capmap[data-active="3"] .capmap__spine::after { top: 75%; }
	.capmap__tab {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}
	.capmap__panel { position: sticky; top: calc(var(--nav-h) + 2rem); }
}
@media (max-width: 999px) {
	.capmap__spine { display: none; }
}


/* 11  Home: selected work
   ========================================================================== */

.work__intro-note {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on-surface-dim);
	display: flex;
	align-items: center;
	gap: 0.8rem;
}
.work__intro-note i { width: 6px; height: 6px; background: var(--signal-pure); display: block; }

.projects { display: flex; flex-direction: column; gap: clamp(4.5rem, 9vw, 10rem); }

.project {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--gap) var(--gap);
	align-items: start;
}

.project__visual {
	grid-column: 1 / -1;
	position: relative;
	overflow: hidden;
	background: color-mix(in srgb, var(--on-surface) 4%, transparent);
	border: 1px solid var(--line);
	aspect-ratio: 16 / 9;
}
.project__visual .project__img,
.project__visual .motif {
	width: 100%; height: 100%;
	object-fit: cover;
}
.project__img {
	transform: scale(1.02);
	transition: transform 1200ms var(--ease-out);
}
.project:hover .project__img { transform: scale(1.055); }

/* The double-line device framing the image: two hairlines that draw in from
   the left edge on reveal. */
.project__frame {
	position: absolute;
	left: 0; bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 3px;
	pointer-events: none;
}
.project__frame i {
	display: block; height: 2px;
	background: var(--signal-pure);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 900ms var(--ease-out);
}
.project__frame i:last-child { opacity: 0.4; width: 38%; transition-delay: 140ms; }
.project.is-revealed .project__frame i { transform: scaleX(1); }

.project__index {
	position: absolute;
	top: clamp(0.75rem, 1.6vw, 1.4rem);
	left: clamp(0.75rem, 1.6vw, 1.4rem);
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	color: var(--paper);
	mix-blend-mode: difference;
}

.project__text { grid-column: 1 / -1; }

.project__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-bottom: clamp(0.9rem, 1.8vw, 1.35rem);
}
.project__category {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on-surface-dim);
}

.project__title { margin: 0 0 clamp(0.9rem, 1.8vw, 1.4rem); }
.project__title a { transition: color var(--dur-fast) var(--ease); }
.project__title a:hover { color: var(--signal); }

.project__cols {
	display: grid;
	gap: clamp(1.25rem, 2.6vw, 2.5rem);
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.project__col h4 {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--signal);
	margin: 0 0 0.6rem;
	line-height: 1.4;
}
.project__col p { color: var(--on-surface-dim); max-width: 46ch; }

.project__roles {
	display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem;
	list-style: none; margin: 0 0 clamp(1.25rem, 2.4vw, 2rem); padding: 0;
}
.project__roles li {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-surface-dim);
	border: 1px solid var(--line);
	padding: 0.3rem 0.55rem;
}

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

	/* Stage — the image runs the full grid, the words sit beneath it. */
	.project--stage .project__visual { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
	.project--stage .project__text   { grid-column: 1 / 10; margin-top: clamp(1.5rem, 3vw, 2.5rem); }

	/* Offset — image left, words right, image slightly taller than the text. */
	.project--offset .project__visual { grid-column: 1 / 8; aspect-ratio: 4 / 3; }
	.project--offset .project__text   { grid-column: 8 / -1; padding-top: clamp(1rem, 3vw, 3rem); }
	.project--offset .project__cols   { grid-template-columns: minmax(0, 1fr); }

	/* Inset — a narrow, deliberately small image against wide type. */
	.project--inset .project__visual { grid-column: 2 / 6; aspect-ratio: 1 / 1; }
	.project--inset .project__text   { grid-column: 7 / -1; }
	.project--inset .project__cols   { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Split — words first, then a tall image that bleeds right. */
	.project--split .project__visual {
		grid-column: 6 / -1;
		aspect-ratio: 5 / 4;
		order: 2;
		margin-right: calc(var(--gutter) * -0.5);
	}
	.project--split .project__text   { grid-column: 1 / 6; order: 1; }
	.project--split .project__cols   { grid-template-columns: minmax(0, 1fr); }

	/* Banner — a wide, short image with the caption on a single rule. */
	.project--banner .project__visual { grid-column: 1 / -1; aspect-ratio: 5 / 2; }
	.project--banner .project__text   { grid-column: 1 / -1; margin-top: clamp(1.25rem, 2.4vw, 2rem); }
	.project--banner .project__cols   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.work__more {
	grid-column: 1 / -1;
	margin-top: clamp(3rem, 6vw, 6rem);
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}
.work__more p { color: var(--on-surface-dim); max-width: 52ch; margin: 0; }


/* 12  Home: process
   ========================================================================== */

.journey { position: relative; }

.journey__rail {
	position: relative;
	height: 1px;
	background: var(--line);
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	display: none;
}
.journey__rail i {
	position: absolute;
	inset: 0 auto 0 0;
	height: 1px;
	background: var(--signal-pure);
	width: 0;
	transition: width 1400ms var(--ease-out);
}
.journey.is-revealed .journey__rail i { width: 100%; }

.journey__steps {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.journey__step { position: relative; padding-top: 1.6rem; }
.journey__step::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 9px; height: 9px;
	border: 1px solid var(--on-surface-dim);
	background: var(--surface);
	transform: translateY(-4px);
	transition: background-color 420ms var(--ease), border-color 420ms var(--ease), transform 420ms var(--ease-out);
}
.journey__step.is-revealed::before { background: var(--signal-pure); border-color: var(--signal-pure); }
.journey__step::after {
	content: "";
	position: absolute;
	top: 0; left: 9px; right: 0;
	height: 1px;
	background: var(--line);
}
.journey__step:last-child::after { display: none; }

.journey__index {
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	color: var(--signal);
	display: block;
	margin-bottom: 0.5rem;
}
.journey__title {
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	line-height: 1.05;
	letter-spacing: -0.024em;
	font-variation-settings: "opsz" 28, "wdth" 97;
	margin: 0 0 0.35rem;
}
.journey__line {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--on-surface-dim);
	margin: 0 0 0.7rem;
}
.journey__body { font-size: var(--step-small); color: var(--on-surface-dim); margin: 0; }

.journey__note {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(1.25rem, 2.5vw, 2rem);
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	align-items: baseline;
}
.journey__note-lead {
	font-family: var(--font-display);
	font-size: var(--step-s);
	letter-spacing: -0.018em;
	font-variation-settings: "opsz" 24, "wdth" 98;
	margin: 0;
}
.journey__note p { color: var(--on-surface-dim); max-width: 56ch; margin: 0; }

@media (min-width: 760px) and (max-width: 1179px) {
	.journey__steps {
		grid-auto-flow: column;
		grid-auto-columns: minmax(240px, 1fr);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 1.25rem;
		gap: clamp(1.5rem, 3vw, 2rem);
	}
	.journey__step { scroll-snap-align: start; }
	.journey__rail { display: block; }
}
@media (min-width: 1180px) {
	.journey__rail { display: block; }
	.journey__steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}


/* 13  Home: technology
   ========================================================================== */

.techmap {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
}

.techmap__links {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: visible;
	display: none;
}
.techmap__links path {
	fill: none;
	stroke: var(--signal-pure);
	stroke-width: 1;
	opacity: 0;
	stroke-dasharray: var(--len, 400);
	stroke-dashoffset: var(--len, 400);
	transition: stroke-dashoffset 720ms var(--ease-out), opacity 300ms var(--ease);
}
.techmap__links path.is-on { opacity: 0.85; stroke-dashoffset: 0; }
.techmap__links path.is-on-soft { opacity: 0.28; stroke-dashoffset: 0; }

.techmap__list {
	border-top: 1px solid var(--line);
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
}

.techmap__btn {
	border-bottom: 1px solid var(--line);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	width: 100%;
	text-align: left;
	padding: clamp(0.9rem, 1.8vw, 1.3rem) 0;
	color: var(--on-surface);
	transition: padding-left var(--dur) var(--ease-out), color var(--dur-fast) var(--ease);
}
.techmap__btn:hover { padding-left: 0.5rem; }
.techmap__name {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.2vw, 1.85rem);
	letter-spacing: -0.024em;
	line-height: 1.1;
	font-variation-settings: "opsz" 28, "wdth" 97;
	opacity: 0.5;
	transition: opacity var(--dur-fast) var(--ease);
}
.techmap__note {
	display: block;
	font-family: var(--font-body);
	font-size: var(--step-small);
	color: var(--on-surface-dim);
	max-width: 40ch;
	margin-top: 0.25rem;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity 320ms var(--ease), max-height 420ms var(--ease-out), margin-top 320ms;
}
.techmap__dot {
	width: 9px; height: 9px;
	border: 1px solid currentColor;
	opacity: 0.4;
	transition: background-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), border-color var(--dur-fast);
}
.techmap__btn[aria-selected="true"] .techmap__name { opacity: 1; }
.techmap__btn[aria-selected="true"] .techmap__note { opacity: 1; max-height: 6rem; margin-top: 0.45rem; }
.techmap__btn[aria-selected="true"] .techmap__dot { background: var(--signal-pure); border-color: var(--signal-pure); opacity: 1; }
.techmap__btn:hover .techmap__name { opacity: 0.8; }

.techmap__apps { position: relative; z-index: 2; }
.techmap__apps-head {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--on-surface-dim);
	margin: 0 0 1.25rem;
	display: flex; align-items: center; gap: 0.8rem;
}
.techmap__group { display: none; }
.techmap__group.is-active { display: block; }
.techmap__group ul { list-style: none; margin: 0; padding: 0; }
.techmap__group li {
	border-top: 1px solid var(--line);
	padding: clamp(0.85rem, 1.7vw, 1.15rem) 0;
	font-size: var(--step-s);
	letter-spacing: -0.012em;
	line-height: 1.3;
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	animation: panelIn 560ms var(--ease-out) both;
}
.techmap__group li:nth-child(2) { animation-delay: 90ms; }
.techmap__group li:nth-child(3) { animation-delay: 180ms; }
.techmap__group li:last-child { border-bottom: 1px solid var(--line); }
.techmap__group li b {
	font-family: var(--font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	color: var(--signal);
	font-weight: 500;
	flex: 0 0 auto;
}

@media (min-width: 1000px) {
	.techmap {
		grid-template-columns: minmax(0, 1fr) clamp(3rem, 8vw, 9rem) minmax(0, 1fr);
		align-items: start;
	}
	.techmap__links { display: block; grid-column: 1 / -1; grid-row: 1; }
	.techmap__list { grid-column: 1; grid-row: 1; }
	.techmap__apps { grid-column: 3; grid-row: 1; padding-top: clamp(0.5rem, 2vw, 2rem); }
}


/* 14  Home: differentiators
   ========================================================================== */

.diff { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.diff__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem clamp(1.5rem, 4vw, 4rem);
	padding: clamp(1.4rem, 3vw, 2.4rem) 0;
	border-bottom: 1px solid var(--line);
	position: relative;
	transition: padding-left var(--dur) var(--ease-out);
}
.diff__row::before {
	content: "";
	position: absolute;
	left: 0; top: -1px;
	width: 0; height: 1px;
	background: var(--signal-pure);
	transition: width 620ms var(--ease-out);
}
.diff__row:hover { padding-left: clamp(0.5rem, 1.4vw, 1.25rem); }
.diff__row:hover::before { width: 100%; }

.diff__index {
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	color: var(--signal);
	padding-top: 0.45rem;
}
.diff__title {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 3vw, 2.35rem);
	line-height: 1.02;
	letter-spacing: -0.028em;
	font-variation-settings: "opsz" 40, "wdth" 95;
	margin: 0;
	text-wrap: balance;
}
.diff__body { color: var(--on-surface-dim); margin: 0; max-width: 46ch; }

@media (min-width: 900px) {
	.diff__row {
		grid-template-columns: 4rem minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: start;
	}
}


/* 15  Home: founder
   ========================================================================== */

.founder {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 4rem) var(--gap);
	align-items: start;
}

.founder__portrait {
	grid-column: 1 / -1;
	position: relative;
}
.founder__portrait::before {
	content: "";
	position: absolute;
	left: clamp(-10px, -1.4vw, -22px);
	top: clamp(-10px, -1.4vw, -22px);
	width: 42%;
	aspect-ratio: 1;
	border-left: 2px solid var(--orange);
	border-top: 2px solid var(--orange);
	pointer-events: none;
}
.founder__portrait::after {
	content: "";
	position: absolute;
	right: clamp(-10px, -1.4vw, -22px);
	bottom: clamp(-10px, -1.4vw, -22px);
	width: 28%;
	aspect-ratio: 1;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	pointer-events: none;
}
.founder__portrait img {
	width: 100%;
	aspect-ratio: 5 / 6.2;
	object-fit: cover;
	filter: saturate(0.94) contrast(1.02);
}

.founder__placeholder {
	width: 100%;
	aspect-ratio: 5 / 6.2;
	border: 1px solid var(--line);
	background:
		repeating-linear-gradient(
			-45deg,
			transparent 0 14px,
			var(--line-soft) 14px 15px
		);
	display: grid;
	place-content: center;
	gap: 0.9rem;
	text-align: center;
	padding: 2rem;
}
.founder__placeholder-mono {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	letter-spacing: -0.04em;
	line-height: 1;
	opacity: 0.22;
}
.founder__placeholder-note {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--on-surface-dim);
}

.founder__text { grid-column: 1 / -1; }
.founder__name { margin: 0 0 0.4rem; }
.founder__role {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--signal);
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.founder__body { max-width: 52ch; }
.founder__body p + p { margin-top: 1.1em; }

.founder__facts {
	list-style: none;
	margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
	padding: 0;
	display: grid;
	gap: 0;
	border-top: 1px solid var(--line);
}
.founder__facts li {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--line);
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	font-size: var(--step-small);
}
.founder__facts b {
	font-family: var(--font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--signal);
	font-weight: 500;
	flex: 0 0 auto;
	min-width: 2ch;
}

@media (min-width: 900px) {
	.founder__portrait { grid-column: 1 / 6; position: sticky; top: calc(var(--nav-h) + 2.5rem); }
	.founder__text     { grid-column: 7 / -1; }
	.founder__facts    { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
}


/* 16  Home: insights
   ========================================================================== */

.insights__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.insight {
	border-bottom: 1px solid var(--line);
}
.insight a {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.4rem 1.5rem;
	padding: clamp(1.25rem, 2.6vw, 2rem) 0;
	align-items: baseline;
	transition: padding-left var(--dur) var(--ease-out);
}
.insight a:hover { padding-left: clamp(0.5rem, 1.4vw, 1.25rem); }
.insight__date {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on-surface-dim);
}
.insight__title {
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 2.4vw, 1.95rem);
	line-height: 1.08;
	letter-spacing: -0.026em;
	font-variation-settings: "opsz" 32, "wdth" 96;
	margin: 0;
	transition: color var(--dur-fast) var(--ease);
}
.insight a:hover .insight__title { color: var(--signal); }
.insight__excerpt { color: var(--on-surface-dim); font-size: var(--step-small); margin: 0.35rem 0 0; max-width: 56ch; }
.insight__read {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on-surface-dim);
	justify-self: start;
}

/* Placeholders, honestly labelled. */
.insights__placeholder {
	border-top: 1px solid var(--line);
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.insights__topics {
	list-style: none;
	margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.insights__topics li {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 1px solid var(--line);
	padding: 0.5rem 0.75rem;
	color: var(--on-surface-dim);
}
.insights__slots { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.insights__slot {
	background: var(--surface);
	padding: clamp(1.25rem, 2.6vw, 2rem);
	min-height: 140px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
}
.insights__slot-label {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--signal);
}
.insights__slot-hint { color: var(--on-surface-dim); font-size: var(--step-small); margin: 0; }

@media (min-width: 760px) {
	.insight a { grid-template-columns: 8rem minmax(0, 1fr) 7rem; }
	.insights__slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* 17  Home: closing
   ========================================================================== */

.closing {
	position: relative;
	overflow: clip;
	padding-block: clamp(6rem, 12vw, 13rem);
}
.closing__canvas {
	position: absolute;
	inset: 0;
	opacity: 0.5;
	pointer-events: none;
}
.closing__canvas canvas { width: 100%; height: 100%; }

.closing__inner { position: relative; z-index: 2; }
.closing__head { max-width: 17ch; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.closing__lead { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); color: var(--paper); opacity: 0.86; }

.closing__contact {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--ink-line);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 3rem;
	align-items: baseline;
}
.closing__contact dt {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--slate-light);
	margin: 0 0 0.35rem;
}
.closing__contact dd { margin: 0; font-size: var(--step-s); letter-spacing: -0.012em; }
.closing__contact dd a:hover { color: var(--orange-bright); }


/* 18  Footer
   ========================================================================== */

.site-footer {
	background: var(--ink);
	color: var(--paper);
	--surface: var(--ink);
	--on-surface: var(--paper);
	--on-surface-dim: var(--slate-light);
	--line: var(--ink-line);
	--signal: var(--orange-bright);
	--signal-pure: var(--orange-bright);
	padding-top: clamp(3.5rem, 7vw, 6rem);
	border-top: 1px solid var(--ink-line);
}

.footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 4rem) var(--gap);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.footer__about { max-width: 42ch; }
.footer__about .brand { margin-bottom: 1.5rem; }
.footer__about p { color: var(--slate-light); font-size: var(--step-small); }

.footer__col h3 {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--orange-bright);
	margin: 0 0 1.15rem;
	line-height: 1.4;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li + li { margin-top: 0.55rem; }
.footer__col a {
	font-size: var(--step-small);
	color: var(--paper);
	opacity: 0.78;
	transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.footer__col a:hover { opacity: 1; color: var(--orange-bright); }

.footer__contact-line { display: block; font-size: var(--step-small); color: var(--slate-light); }
.footer__contact-line + .footer__contact-line { margin-top: 0.55rem; }
.footer__contact-line a { color: var(--paper); }
.footer__contact-line a:hover { color: var(--orange-bright); }

.footer__social { display: flex; gap: 0.5rem; margin-top: 1.5rem; flex-wrap: wrap; }
.footer__social a {
	width: 38px; height: 38px;
	border: 1px solid var(--ink-line);
	display: grid; place-items: center;
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.footer__social a:hover { border-color: var(--orange-bright); color: var(--orange-bright); transform: translateY(-2px); }
.footer__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* The branded wordmark band: the double line draws across it as it comes into
   view, and again on hover. */
.footer__band {
	position: relative;
	border-top: 1px solid var(--ink-line);
	padding-block: clamp(1.75rem, 3.5vw, 3rem);
	overflow: hidden;
}
.footer__wordmark {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 7.4vw, 7rem);
	line-height: 0.9;
	letter-spacing: -0.04em;
	font-weight: 600;
	font-variation-settings: "opsz" 96, "wdth" 90;
	color: transparent;
	-webkit-text-stroke: 1px var(--ink-line);
	transition: color 620ms var(--ease), -webkit-text-stroke-color 620ms var(--ease);
	white-space: nowrap;
	text-align: center;
}
.footer__band:hover .footer__wordmark {
	color: rgba(246, 243, 238, 0.06);
	-webkit-text-stroke-color: rgba(255, 131, 64, 0.5);
}
.footer__band-rules {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	display: flex; flex-direction: column; gap: 3px;
	pointer-events: none;
}
.footer__band-rules i {
	display: block; height: 2px; background: var(--orange-bright);
	transform: scaleX(0); transform-origin: left;
	transition: transform 1100ms var(--ease-out);
}
.footer__band-rules i:last-child { width: 40%; opacity: 0.45; transition-delay: 160ms; }
.footer__band.is-revealed .footer__band-rules i { transform: scaleX(1); }

.footer__legal {
	border-top: 1px solid var(--ink-line);
	padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.75rem;
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--slate-light);
}
.footer__legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0; padding: 0; }
.footer__legal a:hover { color: var(--orange-bright); }
.footer__legal-place { display: inline-flex; align-items: center; gap: 0.6rem; }
.footer__legal-place i { width: 5px; height: 5px; background: var(--moss); display: block; }

.footer-note { margin-bottom: 1.5rem; color: var(--slate-light); font-size: var(--step-small); }

@media (min-width: 760px) {
	.footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
	.footer__top {
		grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
		gap: clamp(2rem, 4vw, 4rem);
	}
}


/* 19  Inner pages
   ========================================================================== */

.page-hero {
	position: relative;
	padding-top: calc(var(--nav-h) + clamp(3.5rem, 8vw, 8rem));
	padding-bottom: clamp(3rem, 6vw, 6rem);
	overflow: clip;
}
.page-hero__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem) var(--gap);
	align-items: end;
}
.page-hero__text { grid-column: 1 / -1; }
.page-hero__aside { grid-column: 1 / -1; }
.page-hero__title { margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); max-width: 16ch; }
.page-hero__lead { color: var(--on-surface-dim); }

.page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on-surface-dim);
	padding-top: clamp(1rem, 2vw, 1.5rem);
	border-top: 1px solid var(--line);
}

@media (min-width: 900px) {
	.page-hero__text  { grid-column: 1 / 9; }
	.page-hero__aside { grid-column: 9 / -1; }
}

/* Breadcrumbs */
.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on-surface-dim);
	margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
	list-style: none;
	padding: 0;
}
.crumbs a:hover { color: var(--signal); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.4; }
.crumbs li { display: flex; align-items: center; }

/* Service page blocks */
.svc {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem) var(--gap);
}
.svc__block { grid-column: 1 / -1; }
.svc__label {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--signal);
	margin: 0 0 0.9rem;
	display: flex;
	align-items: center;
	gap: 0.8rem;
}
.svc__heading {
	font-family: var(--font-display);
	font-size: var(--step-m);
	line-height: 1.12;
	letter-spacing: -0.024em;
	font-variation-settings: "opsz" 32, "wdth" 98;
	margin: 0 0 0.85rem;
	max-width: 22ch;
}
.svc__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc__list li {
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--line);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.9rem;
	align-items: baseline;
	font-size: var(--step-small);
}
.svc__list li::before {
	content: "";
	width: 14px; height: 1px;
	background: var(--signal-pure);
	transform: translateY(-4px);
}
.svc__steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.svc__steps li {
	counter-increment: step;
	position: relative;
	padding: 0 0 clamp(1.25rem, 2.4vw, 1.75rem) clamp(2.5rem, 4vw, 3.5rem);
	border-left: 1px solid var(--line);
	margin-left: 0.5rem;
}
.svc__steps li::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	transform: translateX(-50%);
	background: var(--surface);
	padding: 0 0.4rem;
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	color: var(--signal);
}
.svc__steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.svc__steps b { display: block; font-weight: 600; margin-bottom: 0.2rem; }
.svc__steps span { color: var(--on-surface-dim); font-size: var(--step-small); }

@media (min-width: 1000px) {
	.svc__block--half { grid-column: span 6; }
	.svc__block--wide { grid-column: 1 / 9; }
	.svc__block--side { grid-column: 9 / -1; }
	.svc__block--full { grid-column: 1 / -1; }
}

/* Index grids used on What We Do, Ventures and Work */
.index-list { border-top: 1px solid var(--line); }
.index-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem clamp(1.5rem, 3vw, 3rem);
	padding: clamp(1.4rem, 2.8vw, 2.2rem) 0;
	border-bottom: 1px solid var(--line);
	align-items: baseline;
	transition: padding-left var(--dur) var(--ease-out);
	position: relative;
}
.index-row:hover { padding-left: clamp(0.5rem, 1.4vw, 1.25rem); }
.index-row::before {
	content: "";
	position: absolute;
	left: 0; bottom: -1px;
	width: 0; height: 1px;
	background: var(--signal-pure);
	transition: width 620ms var(--ease-out);
}
.index-row:hover::before { width: 100%; }
.index-row__index {
	font-family: var(--font-mono);
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	color: var(--on-surface-dim);
}
.index-row__title {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2.6vw, 2.1rem);
	line-height: 1.05;
	letter-spacing: -0.026em;
	font-variation-settings: "opsz" 32, "wdth" 96;
	margin: 0;
}
.index-row__sum { color: var(--on-surface-dim); font-size: var(--step-small); margin: 0; max-width: 52ch; }
.index-row__group {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--signal);
}

@media (min-width: 900px) {
	.index-row { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr) 8rem; }
}

/* Ventures cards, deliberately not identical */
.ventures { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
.venture {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem) var(--gap);
	align-items: center;
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid var(--line);
}
.venture:last-child { border-bottom: 0; padding-bottom: 0; }
.venture__visual { grid-column: 1 / -1; border: 1px solid var(--line); overflow: hidden; aspect-ratio: 16/10; }
.venture__visual .motif, .venture__visual img { width: 100%; height: 100%; object-fit: cover; }
.venture__text { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.venture__visual { grid-column: 1 / 7; }
	.venture__text   { grid-column: 8 / -1; }
	.venture:nth-child(even) .venture__visual { grid-column: 7 / -1; order: 2; }
	.venture:nth-child(even) .venture__text   { grid-column: 1 / 6; order: 1; }
}

/* Related items */
.related { display: grid; gap: var(--gap); }
.related__item {
	border-top: 1px solid var(--line);
	padding-top: 1.25rem;
	transition: padding-left var(--dur) var(--ease-out);
}
.related__item:hover { padding-left: 0.5rem; }
@media (min-width: 760px) { .related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Post / project article layout */
.article-layout {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 4rem) var(--gap);
}
.article-layout__aside { grid-column: 1 / -1; }
.article-layout__main  { grid-column: 1 / -1; }
@media (min-width: 1000px) {
	.article-layout__aside { grid-column: 1 / 4; position: sticky; top: calc(var(--nav-h) + 2.5rem); align-self: start; }
	.article-layout__main  { grid-column: 5 / 12; }
}

.aside-block + .aside-block { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.aside-block :is(h2, h3) {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--signal);
	margin: 0 0 0.7rem;
	line-height: 1.4;
}
.aside-block p, .aside-block li { font-size: var(--step-small); color: var(--on-surface-dim); }
.aside-block ul { list-style: none; margin: 0; padding: 0; }
.aside-block li + li { margin-top: 0.4rem; }

/* Pagination */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.pagination .page-numbers {
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--line);
	transition: border-color var(--dur-fast), color var(--dur-fast);
}
.pagination .page-numbers:hover { border-color: var(--signal-pure); color: var(--signal); }
.pagination .page-numbers.current { border-color: var(--signal-pure); color: var(--signal); }

/* 404 & search */
.notice-page { padding-top: calc(var(--nav-h) + clamp(4rem, 10vw, 9rem)); padding-bottom: clamp(4rem, 8vw, 8rem); }
.search-form { display: flex; gap: 0.5rem; max-width: 460px; margin-top: 1.5rem; }
.search-form input[type="search"] {
	flex: 1 1 auto;
	background: transparent;
	border: 1px solid var(--line);
	padding: 0.9rem 1rem;
}
.search-form button {
	border: 1px solid var(--orange-solid);
	background: var(--orange-solid);
	color: #fff;
	padding: 0.9rem 1.25rem;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}


/* 20  Editorial content & forms
   ========================================================================== */

.prose {
	max-width: 68ch;
	font-size: 1.09rem;
	line-height: 1.72;
}
.prose > * + * { margin-top: 1.25em; }
.prose h2 {
	font-size: var(--step-m);
	line-height: 1.14;
	margin-top: 2.2em;
	letter-spacing: -0.024em;
	font-variation-settings: "opsz" 32, "wdth" 98;
}
.prose h3 {
	font-size: var(--step-s);
	margin-top: 1.9em;
	letter-spacing: -0.016em;
}
.prose h2 + *, .prose h3 + * { margin-top: 0.75em; }
.prose a {
	color: var(--signal);
	text-decoration: underline;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--signal-pure) 45%, transparent);
}
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: 0.5em; }
.prose blockquote {
	margin: 2em 0;
	padding-left: clamp(1.25rem, 2.5vw, 2rem);
	border-left: 2px solid var(--orange);
	font-family: var(--font-display);
	font-size: var(--step-s);
	line-height: 1.3;
	letter-spacing: -0.018em;
	font-variation-settings: "opsz" 24, "wdth" 98;
}
.prose figure { margin: 2.25em 0; }
.prose figcaption {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--on-surface-dim);
	margin-top: 0.7rem;
}
.prose code {
	font-family: var(--font-mono);
	font-size: 0.86em;
	background: var(--paper-2);
	padding: 0.15em 0.35em;
}
.prose pre {
	background: var(--ink);
	color: var(--paper);
	padding: 1.25rem;
	overflow-x: auto;
	font-size: 0.86rem;
}
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step-small); }
.prose th, .prose td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--line); }
.prose img { margin-inline: auto; }

/* Forms */
.inquiry { max-width: 760px; }
.inquiry--compact { max-width: 100%; }

.inquiry__result {
	border: 1px solid var(--line);
	border-left: 2px solid var(--orange);
	padding: clamp(1.25rem, 2.5vw, 1.85rem);
	margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.inquiry__result-head {
	font-family: var(--font-display);
	font-size: var(--step-s);
	letter-spacing: -0.018em;
	margin-bottom: 0.4rem;
}
.inquiry__result--error { border-left-color: #b00020; }

.inquiry__trap {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

.inquiry__progress { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.inquiry__progress-label {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--on-surface-dim);
	margin-bottom: 0.6rem;
}
.inquiry__progress-track { display: block; height: 2px; background: var(--line); position: relative; }
.inquiry__progress-track i {
	position: absolute; inset: 0 auto 0 0;
	background: var(--orange);
	width: 33%;
	transition: width 520ms var(--ease-out);
}

.inquiry__step { border: 0; margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem); padding: 0; }
.inquiry__step[hidden] { display: none; }

.inquiry__legend {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	padding: 0;
	margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
}
.inquiry__legend-index {
	font-family: var(--font-mono);
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	color: var(--signal);
}
.inquiry__legend-text {
	font-family: var(--font-display);
	font-size: var(--step-s);
	line-height: 1.16;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 26, "wdth" 98;
}

.field { margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); }
.field-row { display: grid; gap: clamp(1.1rem, 2.2vw, 1.6rem); }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field__label {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--on-surface-dim);
	margin-bottom: 0.55rem;
}
.field__req { color: var(--signal); }
.field__opt { text-transform: none; letter-spacing: 0.02em; font-size: 0.68rem; font-style: italic; }
.field__hint { font-size: var(--step-small); color: var(--on-surface-dim); margin: -0.2rem 0 0.7rem; max-width: 54ch; }

.field__input {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
	padding: 0.85rem 0;
	font-size: 1.05rem;
	transition: border-color var(--dur-fast) var(--ease);
	border-radius: 0;
}
.field__input:focus { outline: none; border-bottom-color: var(--signal-pure); }
.field__input:focus-visible { outline: 2px solid var(--signal-pure); outline-offset: 4px; }
.field__input--area { resize: vertical; min-height: 8rem; line-height: 1.6; }
.field__input--select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 14px) 1.35rem, calc(100% - 8px) 1.35rem;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2rem;
}
.field__input[aria-invalid="true"] { border-bottom-color: #b00020; }
.field__error { color: #b00020; font-size: var(--step-small); margin: 0.45rem 0 0; }

.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice input {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
}
.choice label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--line);
	padding: 0.62rem 0.9rem;
	font-size: var(--step-small);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
	user-select: none;
}
.choice label::before {
	content: "";
	width: 8px; height: 8px;
	border: 1px solid currentColor;
	opacity: 0.4;
	transition: background-color var(--dur-fast), opacity var(--dur-fast);
}
.choice label:hover { border-color: color-mix(in srgb, var(--signal-pure) 55%, transparent); }
.choice input:checked + label {
	border-color: var(--signal-pure);
	color: var(--signal);
	background: var(--orange-wash);
}
.choice input:checked + label::before { background: var(--signal-pure); border-color: var(--signal-pure); opacity: 1; }
.choice input:focus-visible + label { outline: 2px solid var(--signal-pure); outline-offset: 3px; }

.inquiry__foot { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.inquiry__nav { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
.inquiry__nav[hidden] { display: none; }
.inquiry__privacy { font-size: var(--step-small); color: var(--on-surface-dim); margin-top: 1.1rem; max-width: 48ch; }
.inquiry__privacy a { text-decoration: underline; text-underline-offset: 0.2em; }
.inquiry__live:empty { display: none; }
.inquiry__live {
	margin-top: 1rem;
	font-size: var(--step-small);
	color: var(--signal);
}
.action--submit[disabled] { opacity: 0.55; pointer-events: none; }

/* Contact detail block */
.contact-details { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); border-top: 1px solid var(--line); padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.contact-details dt {
	font-family: var(--font-mono);
	font-size: var(--step-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--signal);
	margin-bottom: 0.4rem;
}
.contact-details dd { margin: 0; font-size: var(--step-s); letter-spacing: -0.012em; }
.contact-details dd a:hover { color: var(--signal); }
.contact-details p { font-size: var(--step-small); color: var(--on-surface-dim); margin-top: 0.35rem; }
@media (min-width: 640px) { .contact-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* 21  Motifs
   ========================================================================== */

.motif {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 3vw, 2.5rem);
	background:
		linear-gradient(160deg,
			color-mix(in srgb, var(--on-surface) 3%, transparent),
			transparent 55%);
	color: var(--on-surface);
}
.motif svg { width: 100%; height: 100%; overflow: visible; }

.motif :is(.m-line, .m-line-2, .m-ghost, .m-wall, .m-window, .m-dim, .m-accent, .m-line-accent, .m-path, .m-tile, .m-strike, .m-event) {
	fill: none;
	stroke: currentColor;
	stroke-linecap: butt;
	stroke-linejoin: miter;
	vector-effect: non-scaling-stroke;
}

.motif .m-line        { stroke-width: 1; opacity: 0.55; }
.motif .m-line-2      { stroke-width: 1.6; opacity: 0.85; }
.motif .m-ghost       { stroke-width: 1; opacity: 0.2; }
.motif .m-ghost > *   { stroke: currentColor; fill: none; }
.motif .m-grid line   { stroke: currentColor; opacity: 0.07; stroke-width: 1; }
.motif .m-wall        { stroke-width: 4.5; opacity: 0.7; }
.motif .m-wall--thin  { stroke-width: 2.4; opacity: 0.5; }
.motif .m-window      { stroke-width: 1.2; opacity: 0.45; }
.motif .m-dim         { stroke-width: 1; opacity: 0.28; stroke-dasharray: 3 4; }

.motif .m-accent      { stroke: var(--signal-pure); stroke-width: 1.4; opacity: 0.95; }
.motif .m-accent > *  { stroke: var(--signal-pure); }
.motif .m-line-accent { stroke: var(--signal-pure); stroke-width: 1.6; fill: none; }
.motif .m-bracket     { stroke-width: 2; stroke-linecap: butt; }
.motif .m-path        { stroke-width: 1.5; }
.motif .m-path--minor { opacity: 0.3; }
.motif .m-strike      { stroke: var(--signal-pure); stroke-width: 1.2; opacity: 0.55; }

.motif .m-accent-fill { fill: var(--signal-pure); stroke: none; }
.motif .m-ghost-fill  { fill: currentColor; opacity: 0.15; stroke: none; }
.motif .m-dot         { fill: currentColor; stroke: none; opacity: 0.5; }
.motif .m-dot-accent  { fill: var(--signal-pure); stroke: none; }
.motif .m-ring-accent { fill: none; stroke: var(--signal-pure); stroke-width: 1; opacity: 0.5; }
.motif .m-cone        { fill: var(--signal-pure); opacity: 0.13; stroke: none; }
.motif .m-cone--soft  { opacity: 0.07; }
.motif .m-area        { fill: currentColor; opacity: 0.05; stroke: none; }

.motif .m-tile rect, .motif .m-tile path, .motif .m-tile line { vector-effect: non-scaling-stroke; }

.motif :is(.m-label, .m-num) {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	fill: currentColor;
	opacity: 0.4;
	stroke: none;
	text-transform: uppercase;
}
.motif .m-num { font-size: 9px; letter-spacing: 0.1em; opacity: 0.3; }
.motif .m-label--accent { fill: var(--signal-pure); opacity: 0.9; }

/* A slow, single pass of light along the accent paths when the drawing is
   first seen. It runs once and stops; nothing loops forever. */
.motif .m-path {
	stroke-dasharray: 240;
	stroke-dashoffset: 240;
}
.is-revealed .motif .m-path,
.motif.is-revealed .m-path {
	animation: drawPath 1400ms var(--ease-out) forwards;
}
@keyframes drawPath { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
	.motif .m-path { stroke-dashoffset: 0; animation: none; }
}


/* 22  Responsive & print
   ========================================================================== */

@media (max-width: 600px) {
	:root { --step-body: 1.02rem; }
	.actions .action--solid,
	.actions .action--ghost { flex: 1 1 100%; justify-content: center; }
	.project__roles li { font-size: 0.62rem; }
	.hero { min-height: auto; padding-bottom: 0; }
	.ecosystem { max-height: 62vh; }
}

@media (hover: none) {
	.project:hover .project__img { transform: scale(1.02); }
	.capmap__item a:hover,
	.index-row:hover,
	.diff__row:hover,
	.insight a:hover,
	.techmap__btn:hover { padding-left: 0; }
}

@media print {
	.site-header, .nav-panel, .spine, .ecosystem, .closing__canvas, .footer__band { display: none !important; }
	body { background: #fff; color: #000; }
	.on-ink, .on-ink-800, .site-footer { background: #fff !important; color: #000 !important; }
	a::after { content: " (" attr(href) ")"; font-size: 0.75em; }
	.section { padding-block: 1.5rem; }
}

/* Forced-colours mode: let the OS palette through rather than fighting it. */
@media (forced-colors: active) {
	.rule i, .nav__underline i, .project__frame i, .footer__band-rules i { forced-color-adjust: none; background: Highlight; }
	.action--solid { border: 1px solid ButtonText; }
	.motif svg { forced-color-adjust: none; }
}