@charset "UTF-8";
/* ==========================================================================
   LIVING WATER INDIA — DESIGN SYSTEM
   --------------------------------------------------------------------------
   An editorial, full-bleed system built on a visible 12-column hairline
   lattice. Geist throughout: 300 for body, tight high-contrast display sizes
   for headlines, Geist Mono for indices, figures and micro-labels.

   Contents
     01  Fonts
     02  Tokens
     03  Reset & base
     04  Typography
     05  Layout — page, grid, lattice, sections
     06  Motion primitives
     07  Header, drawer, curtain
     08  Buttons & links
     09  Figures (image slots)
     10  Editorial components
     11  Forms
     12  Footer
     13  Responsive
     14  Reduced motion & print
   ========================================================================== */

/* --------------------------------------------------------------------------
   01  Fonts — self-hosted Geist variable. No third-party font requests.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2-variations");
	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+2074, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/geist-latin-ext-wght-normal.woff2") format("woff2-variations");
	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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Geist Mono";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
	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+2074, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   02  Tokens
   -------------------------------------------------------------------------- */
:root {
	/* ---- Palette ---------------------------------------------------------
	   Two colours only: white and blue. White is the page ground everywhere;
	   blue supplies the accent, the tints and the few inverted zones. Nothing
	   warm, nothing green — the range from #ffffff to #071a33 is the whole
	   system, and depth comes from how much blue is in the white.
	   ---------------------------------------------------------------------- */
	--paper:       #ffffff;   /* page ground — pure white */
	--paper-2:     #f4f8fd;   /* faintest blue wash, for alternating bands */
	--paper-3:     #e6eff9;   /* tint blocks, image placeholders */

	--deep:        #071a33;   /* deep navy — the inverted ground */
	--deep-2:      #0c2949;
	--deep-3:      #143761;

	--blue:        #1462b8;   /* the brand blue — links, fills, underlines */
	--blue-lt:     #3b8ee0;
	--blue-glow:   #7cb8f0;   /* accent when sitting on navy */

	--steel:       #3f6493;   /* the second blue — quieter, for state + detail */
	--steel-lt:    #7ba0cd;

	/* ---- Semantic: light ground ---------------------------------------- */
	--bg:          var(--paper);
	--fg:          var(--deep);
	--fg-2:        #475973;   /* secondary prose */
	--fg-3:        #7d8ea6;   /* meta, captions */
	--hair:        rgba(7, 26, 51, .13);
	--hair-soft:   rgba(7, 26, 51, .07);
	--hair-strong: rgba(7, 26, 51, .28);
	--accent:      var(--blue);
	--accent-warm: var(--steel);

	/* ---- Type ---------------------------------------------------------- */
	--sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

	/* Weights — 300 is the body voice, display sits at 440 with tight tracking */
	--w-light:   300;
	--w-book:    400;
	--w-display: 440;
	--w-medium:  500;
	--w-semi:    560;

	/* Fluid scale.
	   --fs-display and --fs-mega are the *page header* voices — the hero and
	   the interior page heads — and they stay big on purpose. Everything from
	   --fs-1 down is body-of-page type: it was set a full step too large for
	   the amount of copy the site actually carries, so the whole in-page range
	   is scaled back here. Change these two groups independently. */
	/* The two floors used to sit at 3.4/2.9rem, which on a 320px phone made a
	   single long word — "Whole-System" — wider than the screen. It could not
	   wrap out of trouble either: the line-reveal splitter writes
	   `white-space: pre` onto each line it builds, so a line that does not fit
	   is simply clipped by its own mask. The floors are lowered enough for the
	   longest word in the site's headlines to fit the narrowest phone. Only
	   viewports under ~390px are affected; everything above is unchanged. */
	--fs-mega:    clamp(2.8rem, 0.4rem + 11.2vw, 12.5rem);
	--fs-display: clamp(2.4rem, 0.9rem + 8.2vw, 8.75rem);
	--fs-1:       clamp(1.75rem, 1.15rem + 2.5vw, 3.4rem);
	--fs-2:       clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem);
	--fs-3:       clamp(1.2rem, 1.05rem + 0.7vw, 1.65rem);
	--fs-4:       clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	--fs-lead:    clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
	--fs-body:    clamp(0.9rem, 0.88rem + 0.12vw, 1rem);
	--fs-sm:      0.8125rem;
	--fs-micro:   0.6875rem;

	--lh-display: 0.92;
	--lh-title:   1.06;
	--lh-body:    1.62;

	--tr-mega:    -0.045em;
	--tr-display: -0.038em;
	--tr-title:   -0.026em;
	--tr-body:    -0.008em;
	--tr-micro:   0.16em;

	/* ---- Space --------------------------------------------------------- */
	--s1:  0.25rem;
	--s2:  0.5rem;
	--s3:  0.75rem;
	--s4:  1rem;
	--s5:  1.5rem;
	--s6:  2rem;
	--s7:  3rem;
	--s8:  4.5rem;
	--s9:  7rem;
	--s10: 10rem;

	/* Measured, not cavernous. The bands used to open to 13/19rem of padding,
	   which turned every page into a long scroll of empty ground; they now
	   sit at roughly half that, and the section edging below does the work of
	   separating one band from the next. */
	--sect-y:  clamp(3.25rem, 2.2rem + 3.6vw, 6rem);
	--sect-y-lg: clamp(4rem, 2.6rem + 4.8vw, 8rem);
	--gutter:  clamp(1.25rem, 0.5rem + 2.6vw, 3.5rem);
	--col-gap: clamp(0.75rem, 0.2rem + 1.6vw, 2rem);

	/* The visible edge between two bands: a hairline plus a short coloured tab
	   on its leading edge. Same motif the timeline uses for a new era. */
	--band-tab: clamp(4rem, 11vw, 13rem);

	--cols: 12;
	--page-max: 2160px;
	--measure: 44ch;
	--measure-wide: 64ch;

	/* ---- Motion -------------------------------------------------------- */
	--ease:      cubic-bezier(.22, .61, .36, 1);
	--ease-out:  cubic-bezier(.16, 1, .3, 1);
	--ease-soft: cubic-bezier(.33, .9, .27, 1);
	--ease-in-out: cubic-bezier(.76, 0, .24, 1);
	--t-fast: .24s;
	--t-mid:  .5s;
	--t-slow: .95s;
	--t-xslow: 1.35s;

	--header-h: 76px;
}

/* Deep ground — set on any section that flips to navy. Used sparingly: the
   hero, the impact band, the CTA and the footer. Everything else is white. */
.on-deep {
	--bg:          var(--deep);
	--fg:          #ffffff;
	--fg-2:        #a9bdd6;
	--fg-3:        #7b90ab;
	--hair:        rgba(255, 255, 255, .13);
	--hair-soft:   rgba(255, 255, 255, .07);
	--hair-strong: rgba(255, 255, 255, .3);
	--accent:      var(--blue-glow);
	--accent-warm: var(--steel-lt);
	color-scheme: dark;
}

/* --------------------------------------------------------------------------
   03  Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--deep);
	font-family: var(--sans);
	font-size: var(--fs-body);
	font-weight: var(--w-light);
	line-height: var(--lh-body);
	letter-spacing: var(--tr-body);
	font-synthesis-weight: none;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;

	/* Inherited safety net. A word that cannot fit its column — an email
	   address, a URL, a long compound like "Whole-System" on a 320px phone —
	   breaks rather than running out over its neighbour. `break-word` only
	   engages when the word genuinely does not fit, so ordinary prose is
	   untouched. `overflow-x: clip` above is the last line of defence, not
	   the first: Safari only learned it in 16, so nothing may rely on it. */
	overflow-wrap: break-word;
}

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

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--w-display); }
p, figure, blockquote, dl, dd { margin: 0; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
	border-radius: 2px;
}

::selection { background: var(--deep); color: var(--paper); }
.on-deep ::selection { background: var(--blue-glow); color: var(--deep); }

.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;
}

.skip-link {
	position: fixed;
	inset-block-start: var(--s4);
	inset-inline-start: var(--s4);
	z-index: 300;
	padding: .8rem 1.4rem;
	background: var(--deep);
	color: var(--paper);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	transform: translateY(-180%);
	transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --------------------------------------------------------------------------
   04  Typography
   -------------------------------------------------------------------------- */

/* Display sizes. Optical tracking tightens as size grows — without this,
   large Geist reads loose and cheap. */
.t-mega, .t-display, .t-1, .t-2, .t-3 {
	font-weight: var(--w-display);
	line-height: var(--lh-title);
	text-wrap: balance;
	font-feature-settings: "ss01" 1;
}
.t-mega    { font-size: var(--fs-mega);    letter-spacing: var(--tr-mega);    line-height: var(--lh-display); }
.t-display { font-size: var(--fs-display); letter-spacing: var(--tr-display); line-height: 0.96; }
.t-1       { font-size: var(--fs-1);       letter-spacing: var(--tr-display); line-height: 1.0; }
.t-2       { font-size: var(--fs-2);       letter-spacing: var(--tr-title); }
.t-3       { font-size: var(--fs-3);       letter-spacing: var(--tr-title);  line-height: 1.14; }
.t-4 {
	font-size: var(--fs-4);
	font-weight: var(--w-medium);
	letter-spacing: -0.018em;
	line-height: 1.24;
}

/* Body voices */
.lead {
	font-size: var(--fs-lead);
	font-weight: var(--w-light);
	line-height: 1.5;
	letter-spacing: -0.014em;
	color: var(--fg);
	max-width: var(--measure-wide);
	text-wrap: pretty;
}
.body    { font-size: var(--fs-body); color: var(--fg-2); max-width: var(--measure); }
.body-w  { font-size: var(--fs-body); color: var(--fg-2); max-width: var(--measure-wide); }
.body + .body, .body-w + .body-w { margin-top: 1.35em; }

.meta {
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--fg-3);
	max-width: var(--measure);
}

/* Micro-label — Geist Mono, the system's connective tissue */
.micro {
	display: block;
	font-family: var(--mono);
	font-size: var(--fs-micro);
	font-weight: var(--w-book);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--fg-3);
	line-height: 1;
}
.micro--accent { color: var(--accent); }
.micro--warm   { color: var(--accent-warm); }

/* Eyebrow with a leading rule — used to open a section */
.eyebrow {
	display: flex;
	align-items: center;
	gap: var(--s3);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	font-weight: var(--w-book);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--fg-3);
	line-height: 1;
}
.eyebrow::before {
	content: "";
	inline-size: clamp(1.5rem, 3vw, 3.5rem);
	block-size: 1px;
	background: currentColor;
	opacity: .55;
	flex: none;
}
.eyebrow--warm { color: var(--accent-warm); }

/* Numerals — always tabular and mono so figures align in a column */
.num {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "zero" 1;
	letter-spacing: -0.03em;
}

/* Inline accents */
.em-warm { color: var(--accent-warm); }
.em-cool { color: var(--accent); }

/* An italic-feeling emphasis without a second family: lighter and tracked */
.em-soft {
	font-weight: var(--w-light);
	color: var(--fg-2);
}

/* --------------------------------------------------------------------------
   05  Layout — page, grid, lattice, sections
   -------------------------------------------------------------------------- */

/* The single full-bleed container. Content is never boxed narrow; the grid
   does the constraining instead. */
.wrap {
	inline-size: 100%;
	max-inline-size: var(--page-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

/* Column placement helpers — c{start}-{span} */
.c1-4  { grid-column: 1 / span 4; }
.c1-5  { grid-column: 1 / span 5; }
.c1-6  { grid-column: 1 / span 6; }
.c1-7  { grid-column: 1 / span 7; }
.c1-8  { grid-column: 1 / span 8; }
.c1-9  { grid-column: 1 / span 9; }
.c1-12 { grid-column: 1 / span 12; }
.c2-6  { grid-column: 2 / span 6; }
.c2-7  { grid-column: 2 / span 7; }
.c3-5  { grid-column: 3 / span 5; }
.c3-8  { grid-column: 3 / span 8; }
.c4-6  { grid-column: 4 / span 6; }
.c5-4  { grid-column: 5 / span 4; }
.c5-8  { grid-column: 5 / span 8; }
.c6-6  { grid-column: 6 / span 6; }
.c6-7  { grid-column: 6 / span 7; }
.c7-4  { grid-column: 7 / span 4; }
.c7-5  { grid-column: 7 / span 5; }
.c7-6  { grid-column: 7 / span 6; }
.c8-5  { grid-column: 8 / span 5; }
.c9-4  { grid-column: 9 / span 4; }
.c9-3  { grid-column: 9 / span 3; }
.c10-3 { grid-column: 10 / span 3; }

/* The lattice — faint vertical rules on the same grid as the content, so
   every element visibly snaps to a column edge. This is the signature. */
.lattice {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	column-gap: var(--col-gap);
	padding-inline: var(--gutter);
	max-inline-size: var(--page-max);
	margin-inline: auto;
	inset-inline: 0;
}
.lattice i {
	display: block;
	border-inline-start: 1px solid var(--hair-soft);
	margin-inline-start: calc(var(--col-gap) / -2);
}
.lattice i:first-child { border-inline-start-color: transparent; }

/* Sections */
.sect {
	position: relative;
	background: var(--bg);
	color: var(--fg);
	padding-block: var(--sect-y);
	isolation: isolate;
}
.sect > .wrap { position: relative; z-index: 1; }
.sect--lg   { padding-block: var(--sect-y-lg); }
.sect--tight { padding-block: clamp(2.5rem, 1.8rem + 2.4vw, 4rem); }
.sect--flush-t { padding-block-start: 0; }
.sect--flush-b { padding-block-end: 0; }
.sect--tint { --bg: var(--paper-2); }

/* ---- The band edge ------------------------------------------------------
   Every section after the first opens on a full-width hairline carrying a
   short accent tab, so one band never blurs into the next even when both
   sit on the same ground. The tab is the section's own accent, which means
   a tinted band, a white band and an inverted band each announce themselves
   differently. */
.sect + .sect,
main + .site-footer { border-block-start: 1px solid var(--hair); }
.sect + .sect::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline-start: 0;
	z-index: 3;
	inline-size: var(--band-tab);
	block-size: 3px;
	background: var(--accent);
	pointer-events: none;
}
/* An inverted band already reads as a hard break; it takes the tab but not
   the hairline, which would only fight the colour change. */
.sect + .sect.on-deep { border-block-start-color: transparent; }
.sect--flush-t::before { content: none; }

/* Hairline seam between adjacent bands of the same colour */
.sect--seam { border-block-start: 1px solid var(--hair); }

/* Grain overlay — breaks up flat fills so large colour areas read as paper
   rather than as a CSS rectangle. */
.grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../images/lw/grain.svg");
	background-size: 220px;
	opacity: .5;
	mix-blend-mode: multiply;
}
.on-deep.grain::after { mix-blend-mode: overlay; opacity: .28; }

/* Section header — asymmetric by default: title left, standfirst offset right
   and dropped, so the two never sit as a tidy two-up. Together they now span
   the full twelve columns rather than leaving the last third of the band
   empty. */
.shead { row-gap: clamp(1.25rem, .9rem + 1.4vw, 2rem); }
.shead__title { grid-column: 1 / span 7; }
.shead__title .eyebrow { margin-block-end: clamp(.9rem, .7rem + 1vw, 1.5rem); }
.shead__aside {
	grid-column: 8 / span 5;
	align-self: end;
	padding-block-end: .4rem;
}
.shead__aside .body { max-width: none; }

/* The standard gap between a section header and the block it introduces.
   Authored inline all over the site as a clamp; this is the token version. */
.sect-body { margin-block-start: clamp(2rem, 1.5rem + 2.2vw, 3.5rem); }

/* Vertical stack rhythm helper */
.stack     { display: flex; flex-direction: column; }
.stack > * + * { margin-block-start: var(--gap, var(--s5)); }
.stack--sm { --gap: var(--s4); }
.stack--lg { --gap: var(--s7); }
.stack--xl { --gap: var(--s8); }

.rule {
	block-size: 1px;
	border: 0;
	margin: 0;
	background: var(--hair);
}

/* --------------------------------------------------------------------------
   06  Motion primitives
   -------------------------------------------------------------------------- */

/* Base reveal. Everything animates transform/opacity/clip-path only. */
[data-reveal] {
	opacity: 0;
	transition:
		opacity var(--t-slow) var(--ease-out) var(--reveal-delay, 0ms),
		transform var(--t-slow) var(--ease-out) var(--reveal-delay, 0ms),
		clip-path var(--t-xslow) var(--ease-out) var(--reveal-delay, 0ms),
		filter var(--t-slow) var(--ease-out) var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}
/* Note: never clip-path an element that IntersectionObserver watches — a
   clipped target reports an intersection ratio of 0 and is never revealed.
   Masked reveals therefore live on inner elements (see .fig img below). */
[data-reveal="up"], [data-reveal=""]        { transform: translate3d(0, 34px, 0); }
[data-reveal="fade"]                        { transform: none; }
[data-reveal="right"]                       { transform: translate3d(38px, 0, 0); }
[data-reveal="left"]                        { transform: translate3d(-38px, 0, 0); }
[data-reveal="scale"]                       { transform: scale(.965) translate3d(0, 22px, 0); }
[data-reveal="blur"]                        { filter: blur(10px); transform: translate3d(0, 20px, 0); }
[data-reveal].is-in {
	opacity: 1;
	transform: none;
	filter: none;
}
[data-reveal].is-in { will-change: auto; }

/* Rules that draw themselves in */
[data-draw] {
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform var(--t-xslow) var(--ease-out) var(--reveal-delay, 0ms);
}
[data-draw].is-in { transform: scaleX(1); }

/* Line-by-line masked heading reveal (markup built by JS) */
.reveal-lines .line {
	display: block;
	overflow: hidden;
	padding-block-end: .06em;
	margin-block-end: -.06em;
}
.reveal-lines .line > span {
	display: block;
	transform: translate3d(0, 105%, 0) rotate(1.2deg);
	opacity: 0;
	transition:
		transform 1.15s var(--ease-out) var(--line-delay, 0ms),
		opacity .8s var(--ease-out) var(--line-delay, 0ms);
	transform-origin: 0 100%;
}
.reveal-lines.is-in .line > span { transform: none; opacity: 1; }

/* Scroll-linked layers (JS writes --py / --pz) */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* --------------------------------------------------------------------------
   07  Header, drawer, curtain
   -------------------------------------------------------------------------- */
.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 120;
	block-size: var(--header-h);
	color: var(--deep);
	transition:
		transform .55s var(--ease-out),
		background-color .45s var(--ease),
		color .45s var(--ease),
		border-color .45s var(--ease),
		backdrop-filter .45s var(--ease);
	border-block-end: 1px solid transparent;
}
.site-header[data-over-dark="true"] { color: var(--paper); }
.site-header[data-stuck="true"] {
	background: color-mix(in srgb, var(--paper) 76%, transparent);
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	border-block-end-color: var(--hair-soft);
	color: var(--deep);
}
.site-header[data-stuck="true"][data-over-dark="true"] {
	background: color-mix(in srgb, var(--deep) 68%, transparent);
	border-block-end-color: rgba(255, 255, 255, .1);
	color: var(--paper);
}
.site-header[data-hidden="true"] { transform: translate3d(0, -102%, 0); }

.site-header__inner {
	block-size: 100%;
	max-inline-size: var(--page-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: flex;
	align-items: center;
	gap: var(--s6);
}

/* Brand */
.brand {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	margin-inline-end: auto;
}
.brand__logo {
	display: block;
	block-size: 64px;
	inline-size: auto;
	flex: none;
	/* Transparent artwork: livinglogo.png on the cream header, and
	   livinglogo-light.png (cream tagline) on the deep footer. */
	transition: transform .7s var(--ease-out);
}
.brand:hover .brand__logo { transform: scale(1.03); }

.footer-brand .brand__logo { block-size: 80px; }

@media (max-width: 900px) {
	.brand__logo { block-size: 52px; }
	.footer-brand .brand__logo { block-size: 66px; }
}

/* Nav — hairline underline that wipes in from the left */
.nav__list { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.75rem); }
.nav__link {
	position: relative;
	display: inline-block;
	padding-block: .4rem;
	font-size: var(--fs-sm);
	font-weight: var(--w-light);
	letter-spacing: -0.012em;
	opacity: .72;
	transition: opacity var(--t-fast) var(--ease);
}
.nav__link::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform .45s var(--ease-out);
}
.nav__link:hover { opacity: 1; }
.nav__link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav__link[aria-current="page"] { opacity: 1; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); opacity: .38; }

.header-cta { display: flex; align-items: center; }

/* The bar sits outside any .on-deep scope, so its button has to derive both
   states from currentColor rather than the section palette. */
.site-header .btn {
	--btn-bg: transparent;
	--btn-fg: currentColor;
	border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
}
.site-header .btn:hover { border-color: transparent; color: #fff; }

/* Menu toggle */
.nav-toggle {
	display: none;
	position: relative;
	inline-size: 44px;
	block-size: 44px;
	margin-inline-end: -10px;
	flex: none;
}
.nav-toggle span {
	position: absolute;
	inset-inline: 11px;
	block-size: 1px;
	background: currentColor;
	transition: transform .5s var(--ease-out), opacity .3s var(--ease);
}
.nav-toggle span:nth-child(1) { inset-block-start: 18px; }
.nav-toggle span:nth-child(2) { inset-block-start: 25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Drawer — full-bleed ink panel with oversized links */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: var(--deep);
	color: var(--paper);
	padding: calc(var(--header-h) + 3rem) var(--gutter) var(--s7);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	clip-path: inset(0 0 100% 0);
	visibility: hidden;
	transition: clip-path .8s var(--ease-in-out), visibility 0s linear .8s;
}
.drawer[data-open="true"] {
	clip-path: inset(0 0 0 0);
	visibility: visible;
	transition: clip-path .8s var(--ease-in-out), visibility 0s;
}
.drawer__list { display: flex; flex-direction: column; }
.drawer__list li { overflow: hidden; border-block-start: 1px solid rgba(255, 255, 255, .12); }
.drawer__list li:last-child { border-block-end: 1px solid rgba(255, 255, 255, .12); }
.drawer__list a {
	display: flex;
	align-items: baseline;
	gap: var(--s4);
	padding-block: clamp(.9rem, 2.2vw, 1.5rem);
	font-size: clamp(1.9rem, 8vw, 3.25rem);
	font-weight: var(--w-display);
	letter-spacing: var(--tr-title);
	line-height: 1.02;
	transform: translate3d(0, 110%, 0);
	opacity: 0;
	transition:
		transform .85s var(--ease-out) calc(var(--i, 0) * 70ms + 120ms),
		opacity .6s var(--ease-out) calc(var(--i, 0) * 70ms + 120ms),
		color var(--t-fast) var(--ease);
}
.drawer[data-open="true"] .drawer__list a { transform: none; opacity: 1; }
.drawer__list a::before {
	content: "0" counter(drawer-i);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	font-weight: var(--w-book);
	opacity: .45;
}
.drawer__list { counter-reset: drawer-i; }
.drawer__list li { counter-increment: drawer-i; }
.drawer__list a:hover { color: var(--blue-glow); }
.drawer__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3) var(--s6);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
	opacity: 0;
	transition: opacity .5s var(--ease) .45s;
}
.drawer[data-open="true"] .drawer__foot { opacity: 1; }

/* Page-transition curtain */
.curtain {
	position: fixed;
	inset: 0;
	z-index: 400;
	background: var(--deep);
	pointer-events: none;
	transform: translate3d(0, 0, 0);
	transition: transform 1s var(--ease-in-out);
}
.curtain[data-state="open"]    { transform: translate3d(0, -101%, 0); }
.curtain[data-state="closing"] { transform: translate3d(0, 0, 0); transition-duration: .62s; }
/* Before JS boots, never trap the page behind a curtain. */
html:not(.js) .curtain { display: none; }

/* --------------------------------------------------------------------------
   08  Buttons & links
   -------------------------------------------------------------------------- */
.btn {
	--btn-fg: var(--paper);
	--btn-bg: var(--deep);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .7em;
	padding: .95em 1.5em;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	font-weight: var(--w-medium);
	letter-spacing: .13em;
	text-transform: uppercase;
	line-height: 1;
	overflow: hidden;
	isolation: isolate;
	transition: color .45s var(--ease), border-color .45s var(--ease), transform .5s var(--ease-out);
	will-change: transform;
}
/* Wipe fill — rises from the bottom on hover */
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--btn-fill, var(--blue));
	transform: translate3d(0, 101%, 0);
	transition: transform .58s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: translate3d(0, 0, 0); }
.btn:hover { color: #fff; }

.btn__ico {
	inline-size: 1.05em;
	block-size: 1.05em;
	flex: none;
	transition: transform .5s var(--ease-out);
}
.btn:hover .btn__ico { transform: translate3d(.25em, 0, 0); }

.btn--lg { padding: 1.2em 1.9em; font-size: .75rem; }

.btn--line {
	--btn-bg: transparent;
	--btn-fg: currentColor;
	border: 1px solid var(--hair-strong);
}
.btn--line:hover { border-color: transparent; }

.btn--paper {
	--btn-bg: var(--paper);
	--btn-fg: var(--deep);
	--btn-fill: var(--blue);
}
.btn--warm { --btn-fill: var(--steel); }

.on-deep .btn { --btn-bg: var(--paper); --btn-fg: var(--deep); }
.on-deep .btn--line { --btn-bg: transparent; --btn-fg: currentColor; }

/* Text link with a travelling arrow and a rule that redraws */
.link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding-block-end: .4em;
	font-size: var(--fs-sm);
	font-weight: var(--w-book);
	letter-spacing: -0.01em;
	color: var(--fg);
}
.link::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 1px;
	background: currentColor;
	opacity: .3;
	transform-origin: 0 50%;
	transition: transform .5s var(--ease-out), opacity .3s var(--ease);
}
.link:hover::after { opacity: 1; transform: scaleX(1.04); }
.link .btn__ico { inline-size: .95em; block-size: .95em; transition: transform .5s var(--ease-out); }
.link:hover .btn__ico { transform: translate3d(.3em, -.3em, 0); }

/* A whole row that behaves as a link target */
.link-row { display: block; }

/* --------------------------------------------------------------------------
   09  Figures — the image slots
   --------------------------------------------------------------------------
   Every figure is a masked, over-scaled frame. The image reveals by unmasking
   from the bottom and settling from 1.14 → 1.0, and drifts on scroll.
   Ratios are set per-slot so swapping in real photography needs no layout work.
   -------------------------------------------------------------------------- */
/* The frame itself is never clipped or transformed — only the image inside is,
   so the observer always sees a clean box. The stone plate showing through
   during the wipe is intentional: the image unmasks over it. */
.fig {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--paper-3);
	aspect-ratio: var(--ratio, 4 / 5);
	opacity: 0;
	transition: opacity .7s var(--ease) var(--reveal-delay, 0ms);
	isolation: isolate;
}
.fig.is-in { opacity: 1; }
.fig img, .fig picture, .fig > svg {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	scale: 1.14;
	clip-path: inset(0 0 100% 0);
	transition:
		scale 1.6s var(--ease-out) var(--reveal-delay, 0ms),
		clip-path 1.25s var(--ease-out) var(--reveal-delay, 0ms);
}
.fig.is-in img, .fig.is-in > svg { scale: 1; clip-path: inset(0 0 0 0); }
/* Slow drift while the figure crosses the viewport (JS writes --fig-shift).
   `translate` is a separate property from `scale`, so the scroll-tracked
   offset can update every frame without fighting the reveal transition. */
.fig[data-drift].is-in img { scale: 1.09; translate: 0 var(--fig-shift, 0px); }

/* Diagram — a supplied graphic shown whole at its own ratio, never cropped. */
.fig--diagram { background: transparent; }
.fig--diagram img { object-fit: contain; scale: 1; }

/* Graphic slot — a frame waiting on a diagram the client will supply. It
   reads as a deliberate, labelled placeholder rather than a flat colour slab. */
.fig--slot { background: var(--paper-2); }
.on-deep .fig--slot { background: var(--deep-2); }
.fig--slot img, .fig--slot > svg { opacity: .3; }
.fig--slot::before {
	content: attr(data-slot);
	position: absolute;
	inset: var(--s4);
	z-index: 2;
	display: grid;
	place-items: center;
	padding: var(--s5);
	border: 1px dashed var(--hair-strong);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	text-align: center;
	color: var(--fg-3);
}

.fig--r1   { --ratio: 1 / 1; }
.fig--r45  { --ratio: 4 / 5; }
.fig--r23  { --ratio: 2 / 3; }
.fig--r32  { --ratio: 3 / 2; }
.fig--r169 { --ratio: 16 / 9; }
.fig--r219 { --ratio: 21 / 9; }
.fig--tall { --ratio: 3 / 4.4; }

/* Hover lift for figures that are also links */
a.fig::after, .fig--hover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(7, 26, 51, .55), transparent 62%);
	opacity: 0;
	transition: opacity .55s var(--ease);
}
a.fig:hover::after, .fig--hover:hover::after { opacity: 1; }
a.fig:hover img, .fig--hover:hover img { scale: 1.045; transition: scale 1.1s var(--ease-out); }

/* Caption sitting under a figure, mono and quiet */
.fig-cap {
	display: flex;
	gap: var(--s3);
	margin-block-start: var(--s4);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--fg-3);
	line-height: 1.5;
}
.fig-cap::before { content: ""; inline-size: 1.4rem; block-size: 1px; margin-block-start: .55em; background: currentColor; opacity: .5; flex: none; }

/* Overlapping composition: a second figure that breaks out of its column.

   The break-out only works when it breaks INTO something. A duet puts its
   figure in the last columns of the grid, so an overhang to the right has
   nowhere to go but off the page — at every width from 1024 up the hand-pump
   figure on partner.html was sliced flat against the viewport edge, which
   reads as a bug rather than a composition. The overhang is therefore aimed
   at the empty column beside the figure (see .duet below), and clamped here
   so that no instance can ever push further out than the page gutter. */
.fig-stack { position: relative; }
.fig-stack__over {
	position: absolute;
	z-index: 2;
	inline-size: var(--over-w, 46%);
	inset-inline-end: max(var(--over-x, -12%), calc(var(--gutter) * -1));
	inset-block-end: var(--over-y, -14%);
	box-shadow: 0 30px 70px -34px rgba(7, 26, 51, .30);
}
.fig-stack__under {
	position: absolute;
	z-index: 0;
	inline-size: var(--under-w, 40%);
	inset-inline-start: max(var(--under-x, -14%), calc(var(--gutter) * -1));
	inset-block-start: var(--under-y, -10%);
}

/* Full-bleed artwork layer sitting behind a section */
.layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.layer img, .layer svg {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.layer--soft   { opacity: .5; }
.layer--faint  { opacity: .26; }
.layer--ghost  { opacity: .07; }
.on-deep .layer--ghost { opacity: .12; }
.layer--mask   { -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
.layer--corner {
	inset: auto auto 0 0;
	inline-size: min(48vw, 720px);
	block-size: auto;
	aspect-ratio: 1;
}

/* --------------------------------------------------------------------------
   10  Editorial components
   -------------------------------------------------------------------------- */

/* ---- Hero ---------------------------------------------------------------- */
.hero {
	position: relative;
	min-block-size: max(100svh, 660px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* Bottom padding leaves the scroll cue its own band so it can never
	   collide with the foundation panel above it. */
	padding-block: calc(var(--header-h) + var(--s8)) clamp(4.5rem, 3rem + 4vw, 7.5rem);
	overflow: hidden;
}
/* Sized to hold three lines and still leave room for the lead and the
   figure panel inside one viewport — the headline must not eat the fold. */
.hero__title {
	grid-column: 1 / span 9;
	font-size: clamp(2.5rem, 0.9rem + 5.4vw, 6.25rem);
	margin-block: clamp(2rem, 1.5rem + 3.5vw, 4.5rem) clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.hero__kicker {
	grid-column: 1 / span 12;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s3) var(--s5);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--fg-2);
}
.hero__kicker i { inline-size: 3px; block-size: 3px; background: currentColor; opacity: .5; }
.hero__kicker b { font-weight: var(--w-book); color: var(--accent); }
.hero__lead { grid-column: 1 / span 5; }
.hero__panel {
	grid-column: 9 / span 4;
	display: flex;
	flex-direction: column;
	gap: var(--s4);
	padding-block-start: var(--s5);
	border-block-start: 1px solid var(--hair);
}
.hero__panel dt {
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--fg-3);
}
.hero__panel dd {
	font-size: clamp(2.5rem, 1.6rem + 2.4vw, 4rem);
	font-weight: var(--w-display);
	letter-spacing: var(--tr-display);
	line-height: .9;
}
.hero__panel p { font-size: var(--fs-sm); color: var(--fg-2); max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-block-start: var(--s6); }

.scroll-cue {
	position: absolute;
	inset-block-end: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
	inset-inline-end: var(--gutter);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--s3);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--fg-3);
}
.scroll-cue span {
	position: relative;
	inline-size: 46px;
	block-size: 1px;
	background: var(--hair-strong);
	overflow: hidden;
}
.scroll-cue span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	animation: cue 2.6s var(--ease-in-out) infinite;
}
@keyframes cue {
	0%   { transform: translateX(-100%); }
	55%  { transform: translateX(0); }
	100% { transform: translateX(100%); }
}

/* ---- Page head (interior pages) ------------------------------------------ */
.page-head {
	position: relative;
	padding-block: calc(var(--header-h) + clamp(1.25rem, .8rem + 2vw, 2.75rem)) clamp(1.75rem, 1.2rem + 2vw, 3rem);
	overflow: hidden;
}
/* An interior banner introduces its page; it does not need the home hero's
   full display size, so the headline is held at roughly 60% of it. */
.page-head__title { grid-column: 1 / span 10; margin-block-start: clamp(1.5rem, 1.2rem + 1.8vw, 2.75rem); }
.page-head__title.t-display { font-size: clamp(2.5rem, 0.9rem + 5.4vw, 6.25rem); line-height: 0.96; }
.page-head__lead  { grid-column: 7 / span 5; margin-block-start: clamp(1.75rem, 1.4rem + 1.8vw, 3rem); }

.crumbs {
	grid-column: 1 / span 12;
	display: flex;
	align-items: center;
	gap: var(--s3);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--fg-3);
}
.crumbs li + li::before { content: "/"; margin-inline-end: var(--s3); opacity: .5; }
.crumbs a { transition: color var(--t-fast) var(--ease); }
.crumbs a:hover { color: var(--accent); }

/* ---- Manifesto: an oversized statement against a small annotation -------- */
/* Two rows, both explicit. Without the row numbers the grid's sparse
   auto-placement drops the figure onto a third row of its own and opens a
   dead band across columns 4–12; pinning the figure and the prose to row 2
   sets them side by side instead. */
.manifesto__quote {
	grid-row: 1;
	grid-column: 1 / span 8;
	font-size: var(--fs-1);
	font-weight: var(--w-display);
	letter-spacing: var(--tr-display);
	line-height: 1.02;
	text-wrap: balance;
}
.manifesto__note {
	grid-row: 1;
	grid-column: 10 / span 3;
	align-self: end;
	padding-block-end: .6rem;
}
.manifesto__meta {
	grid-row: 2;
	grid-column: 1 / span 4;
	margin-block-start: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
}
.manifesto__body {
	grid-row: 2;
	grid-column: 6 / span 6;
	align-self: center;
	margin-block-start: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
}

/* ---- Ledger — the workhorse editorial list -------------------------------
   Replaces cards everywhere: a mono index, a title, a body column and an
   optional figure.

   The ledger used to run as full-width hairline rows stacked vertically —
   one screen of scrolling per category. It now lays its categories out
   HORIZONTALLY as a row of tiles that wraps, which is the same information
   in a quarter of the height. `.ledger--data` (key/value reference data)
   keeps its own denser treatment further down.
   -------------------------------------------------------------------------- */
.ledger { border-block-start: 1px solid var(--hair); }
.ledger__row {
	position: relative;
	border-block-end: 1px solid var(--hair);
	padding-block: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
	column-gap: var(--col-gap);
	row-gap: var(--s5);
	align-items: start;
	transition: background-color .6s var(--ease);
}

/* ---- Horizontal tile mode — the default for category ledgers ------------- */
.ledger:not(.ledger--data) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tile-min, 16rem)), 1fr));
	gap: var(--col-gap);
	border-block-start: 0;
	align-items: stretch;
}
.ledger:not(.ledger--data) .ledger__row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--s4);
	padding: clamp(1.1rem, .9rem + .8vw, 1.6rem);
	border: 1px solid var(--hair);
	border-block-start: 3px solid color-mix(in srgb, var(--domain, var(--fg)) 42%, transparent);
	background: color-mix(in srgb, var(--fg) 3%, var(--bg));
	overflow: hidden;
	transition: transform .5s var(--ease-out), border-color .5s var(--ease), background-color .5s var(--ease);
}
.ledger:not(.ledger--data) .ledger__row:hover { transform: translateY(-4px); }
/* The hover rule redraws over the tile's own top border rather than under it */
.ledger:not(.ledger--data) .ledger__row::before { inset-block-start: -3px; block-size: 3px; }

/* Children drop their grid placement — the tile is a flex column now. */
.ledger:not(.ledger--data) .ledger__n,
.ledger:not(.ledger--data) .ledger__head,
.ledger:not(.ledger--data) .ledger__body,
.ledger:not(.ledger--data) .ledger__aside,
.ledger:not(.ledger--data) .ledger__fig { grid-column: auto; }

.ledger:not(.ledger--data) .ledger__n { padding-block-start: 0; order: 1; }
.ledger:not(.ledger--data) .ledger__head { order: 2; }
.ledger:not(.ledger--data) .ledger__body { order: 3; }
.ledger:not(.ledger--data) .ledger__body .body-w { max-width: none; }
.ledger:not(.ledger--data) .ledger__aside { order: 4; margin-block-start: auto; }
/* The figure caps the tile, bled to its edges and cropped to a landscape
   band — a 4:5 portrait per category is what made the old rows so tall. */
.ledger:not(.ledger--data) .ledger__fig {
	order: 0;
	--ratio: 16 / 10;
	margin: calc(clamp(1.1rem, .9rem + .8vw, 1.6rem) * -1) calc(clamp(1.1rem, .9rem + .8vw, 1.6rem) * -1) 0;
}
.ledger:not(.ledger--data) .ledger__row:hover .ledger__title { transform: none; }
.ledger__row::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline: 0;
	block-size: 1px;
	background: var(--fg);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .8s var(--ease-out);
}
.ledger__row:hover::before { transform: scaleX(1); }
.ledger__n {
	grid-column: 1 / span 1;
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .12em;
	color: var(--fg-3);
	padding-block-start: .45em;
	transition: color .4s var(--ease);
}
.ledger__row:hover .ledger__n { color: var(--accent); }
.ledger__head { grid-column: 2 / span 4; }
.ledger__title {
	font-size: var(--fs-3);
	font-weight: var(--w-display);
	letter-spacing: var(--tr-title);
	line-height: 1.1;
	transition: transform .6s var(--ease-out);
}
.ledger__row:hover .ledger__title { transform: translate3d(.4rem, 0, 0); }
.ledger__sub {
	display: block;
	margin-block-start: .7em;
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent-warm);
	font-weight: var(--w-book);
}
.ledger__body { grid-column: 7 / span 4; }
.ledger__aside { grid-column: 11 / span 2; }
.ledger__fig { grid-column: 11 / span 2; }
.ledger__stat {
	display: block;
	margin-block-start: var(--s4);
	padding-block-start: var(--s4);
	border-block-start: 1px solid var(--hair);
}

/* ---- Data ledger — reference facts as a spec sheet -----------------------
   Registrations, contact channels and process stages used to run as one
   full-width row per fact: twelve facts, twelve screens. They now tile into
   a hairline matrix that reads across as well as down. */
.ledger--data {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tile-min)), 1fr));
	border-block-start: 1px solid var(--hair);
	border-inline-start: 1px solid var(--hair);

	/* The tile has to hold the longest value this ledger ever carries —
	   `communications@indialivingwater.org` needs ~21rem of text plus the
	   padding. A flat 17rem minimum packed six tiles across a 1920 screen and
	   the address ran straight over the tile beside it. Growing the minimum
	   with the viewport gives four to five roomy tiles on a desktop and two
	   on a tablet, which is the same information with room to set it. */
	--tile-min: clamp(17rem, 13rem + 9vw, 23.5rem);
}
.ledger--data .ledger__row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--s2);
	padding: clamp(1rem, .85rem + .6vw, 1.4rem) clamp(1rem, .85rem + .7vw, 1.5rem);
	border-block-end: 1px solid var(--hair);
	border-inline-end: 1px solid var(--hair);
}
.ledger--data .ledger__row::before { content: none; }
.ledger--data .ledger__k {
	grid-column: auto;
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--fg-3);
	line-height: 1.4;
}
.ledger--data .ledger__v {
	grid-column: auto;
	font-size: var(--fs-4);
	font-weight: var(--w-light);
	letter-spacing: -0.018em;
	line-height: 1.3;

	/* An email address is one unbreakable word. Without this it sets its own
	   width, ignores the tile and overprints whatever sits to its right;
	   `anywhere` also lets the tile report an honest minimum width so the
	   grid can size around it. */
	min-inline-size: 0;
	overflow-wrap: anywhere;
}
/* The rule under a wrapped address has to follow each line rather than
   underlining one long invisible box, so the link stays inline. */
.ledger--data .ledger__v a {
	border-block-end: 1px solid var(--hair-strong);
	max-inline-size: 100%;
}
.ledger--data .ledger__note { grid-column: auto; margin-block-start: auto; padding-block-start: var(--s3); max-width: none; }

/* ---- Stacked data ledger — one fact per full-width row -------------------
   The tiled matrix reads well for short reference facts, but the contact
   channels are a list you scan top to bottom: label, address, then the note
   saying who should use it. `.ledger--stack` drops the tiling and runs one
   row per channel, with the label holding a fixed column beside the value on
   wider screens and stacking under it on small ones. */
.ledger--data.ledger--stack {
	display: block;
	border-inline-start: 0;
}
.ledger--data.ledger--stack .ledger__row {
	display: grid;
	grid-template-columns: minmax(11rem, 18%) minmax(0, 1fr);
	column-gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
	row-gap: var(--s2);
	align-items: start;
	padding-inline: 0;
	padding-block: clamp(1.1rem, .9rem + .7vw, 1.6rem);
	border-inline-end: 0;
}
.ledger--data.ledger--stack .ledger__k {
	grid-column: 1;
	grid-row: 1 / span 2;
	padding-block-start: .35em;
}
.ledger--data.ledger--stack .ledger__v { grid-column: 2; grid-row: 1; }
.ledger--data.ledger--stack .ledger__note {
	grid-column: 2;
	grid-row: 2;
	margin-block-start: 0;
	padding-block-start: 0;
	max-width: 62ch;
}
@media (max-width: 680px) {
	.ledger--data.ledger--stack .ledger__row { grid-template-columns: 1fr; }
	.ledger--data.ledger--stack .ledger__k,
	.ledger--data.ledger--stack .ledger__v,
	.ledger--data.ledger--stack .ledger__note {
		grid-column: 1;
		grid-row: auto;
		padding-block-start: 0;
	}
}

/* ---- Statistics — one dominant figure, the rest read across --------------
   The lead figure and the four supporting ones used to sit in two tall
   columns with the list bottom-aligned, which left a deep well of empty
   ground between them. The lead now holds a narrow column and the four
   supporting figures run horizontally beside it. */
.stat-lead { grid-column: 1 / span 4; align-self: start; }
.stat-lead__value {
	display: block;
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	font-size: clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem);
	font-weight: 300;
	letter-spacing: -0.055em;
	line-height: .86;
	color: var(--accent);
}
.stat-lead__label {
	display: block;
	margin-block-start: var(--s4);
	max-width: 26ch;
	font-size: var(--fs-body);
	font-weight: var(--w-light);
	color: var(--fg-2);
	line-height: 1.4;
}
.stat-list {
	grid-column: 6 / span 7;
	align-self: start;
	display: grid;
	/* Narrow enough that four supporting figures land on one line beside the
	   lead rather than breaking 3 + 1. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
	border-block-start: 1px solid var(--hair);
	border-inline-start: 1px solid var(--hair);
}
.stat-list li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s3);
	padding: clamp(1rem, .85rem + .7vw, 1.5rem);
	border-block-end: 1px solid var(--hair);
	border-inline-end: 1px solid var(--hair);
}
.stat-list__v {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem);
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 1;
	flex: none;
}
.stat-list__k { font-size: var(--fs-sm); color: var(--fg-2); text-align: start; max-width: 24ch; line-height: 1.4; }

/* ---- Domain panels — three aspects, read across ---------------------------
   These used to cascade down the page in a step formation, each panel
   dropped further than the last, which cost up to 15rem of extra height and
   made three peer ideas read as a sequence. They now sit level as one
   horizontal band of three, separated by their own rules rather than by
   vertical offset. */
.panels { row-gap: clamp(2rem, 1.5rem + 2vw, 3rem); align-items: stretch; }
.panel {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-block-start: var(--s5);
	border-block-start: 3px solid color-mix(in srgb, var(--domain, var(--fg)) 42%, transparent);
	transition: border-color .5s var(--ease);
}
.panel:hover { border-block-start-color: var(--domain, var(--fg)); }
.panel--a { grid-column: 1 / span 4; }
.panel--b { grid-column: 5 / span 4; margin-block-start: 0; }
.panel--c { grid-column: 9 / span 4; margin-block-start: 0; }
.panel__n {
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .14em;
	color: var(--fg-3);
	margin-block-end: var(--s4);
}
.panel__title { margin-block-end: var(--s4); }

.panel .body, .panel .body-w { max-width: none; }
.panel .fig { margin-block-end: var(--s5); }

/* A short list of concretes under a panel — what the domain actually
   involves in the field, so the tile carries specifics and not only a
   claim. */
.panel__doing {
	margin-block-start: var(--s5);
	padding-block-start: var(--s4);
	border-block-start: 1px solid var(--hair);
	display: grid;
	gap: var(--s3);
	font-size: var(--fs-sm);
	line-height: 1.45;
	color: var(--fg-2);
}
.panel__doing li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); }
.panel__doing li::before {
	content: "";
	inline-size: 5px;
	block-size: 5px;
	margin-block-start: .55em;
	background: var(--domain, var(--accent));
	opacity: .8;
}
/* Labels the list and takes over its rule, so the heading sits on the line */
.panel__doing-h {
	margin-block-start: var(--s5);
	margin-block-end: var(--s3);
	padding-block-start: var(--s4);
	border-block-start: 1px solid var(--hair);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--domain, var(--fg-3));
}
.panel__doing-h + .panel__doing { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.panel__foot {
	margin-block-start: auto;
	padding-block-start: var(--s4);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--domain, var(--fg-3));
}

/* Panels read across as one band, so their inner rules must line up too.
   Each panel borrows the band's row tracks through subgrid — figure, index,
   title, prose, list heading, list, foot — so a shorter paragraph in one
   column no longer lifts that column's list rule above its neighbours'. */
@supports (grid-template-rows: subgrid) {
	.panels--rows > .panel {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 7;
		row-gap: 0;
		align-content: start;
	}
	.panels--rows .panel__doing-h,
	.panels--rows .panel__doing,
	.panels--rows .panel__foot { align-self: start; }
	.panels--rows .panel__foot { margin-block-start: 0; }
}

/* ---- Board roster — the eight directors at a glance ----------------------
   Portrait, name, office — three across, centred, so the short last row sits
   in the middle rather than hanging left. Flex rather than grid for exactly
   that reason; two across on a phone. */
.roster {
	--roster-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: var(--col-gap);
	row-gap: var(--roster-gap);
}
.roster li {
	flex: 0 1 calc((100% - 2 * var(--col-gap)) / 3);
	text-align: center;
}
@media (max-width: 40em) {
	.roster li { flex-basis: calc((100% - var(--col-gap)) / 2); }
}
.roster__name {
	font-size: var(--fs-4);
	font-weight: 600;
	letter-spacing: -0.018em;
	line-height: 1.2;
}
.roster__role {
	display: block;
	margin-block-start: var(--s2);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--accent);
}

/* Portrait in a circle beside the name; the full bio sits in a card that
   opens on hover or keyboard focus, so the register stays a register. */
.roster li { position: relative; }
.roster li:hover, .roster li:focus-within { z-index: 5; }
.roster__who {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s4);
}
/* Photos are pre-cropped squares (images/board/*-sq.jpg) taken inside the
   scanner edge, so the circle never picks up a dark border. */
.roster__pic {
	inline-size: clamp(7rem, 5rem + 6vw, 10rem);
	block-size: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 30%;
	background: var(--paper-3);
	transition: box-shadow .4s var(--ease), scale .4s var(--ease);
}
.roster li:hover .roster__pic,
.roster li:focus-within .roster__pic {
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
	scale: 1.04;
}
.roster__btn {
	all: unset;
	cursor: pointer;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .4s var(--ease);
}
.roster li:hover .roster__btn,
.roster__btn:focus-visible { background-size: 100% 1px; }
.roster__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.roster__card {
	position: absolute;
	inset-block-start: calc(100% + var(--s2));
	inset-inline-start: 0;
	inline-size: max(100%, min(22rem, calc(100vw - 2rem)));
	padding: var(--s5);
	background: var(--cream);
	color: var(--ink-3);
	border: 1px solid var(--hair);
	border-block-start: 3px solid var(--accent);
	box-shadow: 0 18px 40px -18px rgba(46, 58, 38, .35);
	font-size: var(--fs-sm);
	line-height: 1.55;
	text-align: start;
	opacity: 0;
	visibility: hidden;
	translate: 0 8px;
	transition: opacity .3s var(--ease), translate .3s var(--ease), visibility 0s linear .3s;
	pointer-events: none;
}
.roster li[data-flip] .roster__card { inset-inline: auto 0; }
.roster li:hover .roster__card,
.roster li:focus-within .roster__card {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition-delay: 0s;
	pointer-events: auto;
}
.roster__card-head {
	display: block;
	margin-block-end: var(--s3);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--accent);
}

/* ---- Director profiles — portrait, office, background --------------------
   Four across on the twelve-column grid, two-up at tablet and one-up on a
   phone; those two steps are already placed in the responsive section, which
   is what the span here is sized to meet. The portrait is a labelled slot
   until the photograph lands — swapping it in is an <img>, not a re-layout. */
.people { row-gap: clamp(2.5rem, 2rem + 2.4vw, 4rem); align-items: start; }
.person { grid-column: span 3; }
.person .fig { margin-block-end: var(--s4); }
.person__name { margin-block-end: var(--s2); }
.person__role {
	display: block;
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--accent);
}
.person__bio {
	margin-block-start: var(--s4);
	padding-block-start: var(--s4);
	border-block-start: 1px solid var(--hair);
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--fg-2);
	max-width: none;
}

/* ---- Feature: an asymmetric text + image duet ---------------------------- */
.duet { row-gap: clamp(2.5rem, 2rem + 4vw, 5rem); align-items: center; }
.duet__text { grid-column: 1 / span 4; }
.duet__fig  { grid-column: 6 / span 7; }
.duet__text .eyebrow { margin-block-end: clamp(1rem, .8rem + 1vw, 1.5rem); }
.duet--flip .duet__text { grid-column: 9 / span 4; }
.duet--flip .duet__fig  { grid-column: 1 / span 7; }

/* A flipped duet holds its figure in columns 1–7, so an overlapping figure
   can lean right into the open ground beside it. An unflipped one ends on
   the last column, where there is no ground to lean into — that overhang
   turns inward instead, onto the empty column between the prose and the
   figure. Both read as the same deliberate overlap; only one of them used
   to leave the page. */
.duet:not(.duet--flip) .fig-stack__over {
	inset-inline-end: auto;
	inset-inline-start: max(var(--over-x, -12%), calc(var(--gutter) * -1));
}

/* ---- Timeline — milestones read across, not down -------------------------
   A summary of the history, not the history itself (timeline.html carries
   that). Stated horizontally it stays a glance rather than a scroll. */
.timeline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--col-gap);
	border-block-start: 0;
}
.timeline__item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--s3);
	padding-block-start: var(--s4);
	border-block-start: 2px solid var(--hair-strong);
	border-block-end: 0;
}
.timeline__year {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	font-size: clamp(1.15rem, .95rem + .7vw, 1.6rem);
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--accent);
}
.timeline__title { margin-block-start: var(--s2); }
.timeline__body  { max-width: none; }

/* ---- Marquee — partners and credentials, endlessly scrolling ------------- */
.marquee {
	position: relative;
	overflow: hidden;
	padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	border-block: 1px solid var(--hair);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
	display: flex;
	inline-size: max-content;
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	animation: marquee 44s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track > * {
	display: flex;
	align-items: center;
	gap: var(--s4);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fg-3);
	white-space: nowrap;
}
.marquee__track > *::after { content: ""; inline-size: 3px; block-size: 3px; background: currentColor; opacity: .5; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---- Quote — a large pulled statement with a hairline stem --------------- */
.quote {
	position: relative;
	padding-inline-start: clamp(1.5rem, 3vw, 3rem);
	border-inline-start: 1px solid var(--hair-strong);
	font-size: var(--fs-2);
	font-weight: var(--w-light);
	letter-spacing: var(--tr-title);
	line-height: 1.18;
	text-wrap: balance;
}
.quote__by {
	display: block;
	margin-block-start: var(--s5);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--fg-3);
}

/* ---- CTA — the closing partner block -------------------------------------
   It carried .t-display, the same size as a page's h1, which made the last
   thing on every page the loudest thing on it. Held here at roughly half
   that so it closes the page instead of shouting over it. */
.cta__title { grid-column: 1 / span 8; }
.cta .t-display,
.cta__title .t-display {
	font-size: clamp(1.85rem, 1.1rem + 2.9vw, 3.6rem);
	line-height: 1.04;
	letter-spacing: var(--tr-title);
}
.cta__body  { grid-column: 1 / span 5; margin-block-start: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem); }
.cta__act   { grid-column: 7 / span 6; margin-block-start: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem); align-self: end; }
.cta__act .t-3 { font-size: var(--fs-4); }
/* Closing photo runs the full width, faded and washed out toward the
   headline so the text keeps its contrast. */
.cta > .layer--corner {
	inset: 0;
	inline-size: auto;
	aspect-ratio: auto;
	opacity: .16;
	-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.55), #000 55%);
	mask-image: linear-gradient(to right, rgba(0,0,0,.55), #000 55%);
}
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-block-start: var(--s5); }

/* ---- Assurance list ------------------------------------------------------ */
.assurance { border-block-start: 1px solid var(--hair); }
.assurance li {
	display: flex;
	align-items: flex-start;
	gap: var(--s4);
	padding-block: var(--s4);
	border-block-end: 1px solid var(--hair);
	font-size: var(--fs-sm);
	color: var(--fg-2);
}
.assurance svg { inline-size: 18px; block-size: 18px; flex: none; margin-block-start: .18em; color: var(--accent); }
.assurance b { font-weight: var(--w-medium); color: var(--fg); }

/* ---- Socials ------------------------------------------------------------- */
.socials { display: flex; flex-wrap: wrap; gap: var(--s3); }
.social {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .7em 1.1em;
	border: 1px solid var(--hair);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform .45s var(--ease-out);
}
.social svg { inline-size: 14px; block-size: 14px; }
.social:hover { border-color: var(--fg); transform: translateY(-2px); }

/* ---- Map ----------------------------------------------------------------- */
.map {
	position: relative;
	aspect-ratio: 21 / 9;
	overflow: hidden;
	background: var(--paper-3);
	filter: grayscale(1) contrast(1.05);
	transition: filter .7s var(--ease);
}
.map:hover { filter: grayscale(.35) contrast(1); }
.map iframe { inline-size: 100%; block-size: 100%; border: 0; }

/* ---- Outcome band — the one place a block gets a filled surface, so the
   connecting outcome reads as the hinge of the framework. ------------------ */
.outcome {
	position: relative;
	padding: clamp(1.75rem, 1.3rem + 2vw, 3rem);
	background: var(--blue);
	color: #ffffff;
	overflow: hidden;
	isolation: isolate;
}
/* Read across when it has the room: label, statement, consequence. */
.outcome--wide {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
	row-gap: var(--s5);
	align-items: center;
}
.outcome--wide .outcome__k { grid-column: 1; }
.outcome--wide .outcome__b { grid-column: 2; }
.outcome--wide .body-w { max-width: none; }
@media (max-width: 860px) {
	.outcome--wide { grid-template-columns: minmax(0, 1fr); }
	.outcome--wide .outcome__k, .outcome--wide .outcome__b { grid-column: 1; }
}
.outcome::after {
	content: "";
	position: absolute;
	inset-block-start: -30%;
	inset-inline-end: -12%;
	inline-size: 46%;
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
	z-index: -1;
}
.outcome::before {
	content: "";
	position: absolute;
	inset-block-start: -10%;
	inset-inline-end: 4%;
	inline-size: 30%;
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 50%;
	z-index: -1;
}
.outcome .micro { color: rgba(255, 255, 255, .62); }
.outcome .body, .outcome .body-w { color: rgba(255, 255, 255, .84); }

/* ---- Method pair — two cross-cutting methods, hairline-boxed ------------- */
.methods {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, .75rem + 1.5vw, 2rem);
}
.method {
	grid-column: auto;
	padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
	border: 1px solid var(--hair);
	transition: border-color .6s var(--ease);
}
.method:hover { border-color: var(--hair-strong); }
@media (max-width: 600px) {
	.methods { grid-template-columns: minmax(0, 1fr); }
}
.method__k {
	display: block;
	margin-block-end: var(--s4);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent-warm);
}

/* ---- Loop — the theory-of-change cycle as three linked terms ------------- */
.loop {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	counter-reset: loop-i;
}
.loop__node {
	position: relative;
	counter-increment: loop-i;
	padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	border: 1px solid var(--hair);
	transition: border-color .6s var(--ease), background-color .6s var(--ease);
}
.loop__node:hover { border-color: var(--hair-strong); }
/* The arrow that carries one node into the next, and the last back round. */
.loop__node:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 100%;
	inline-size: clamp(1.5rem, 1rem + 2vw, 3rem);
	block-size: 1px;
	background: var(--hair-strong);
}
.loop__n {
	display: block;
	margin-block-end: var(--s5);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .14em;
	color: var(--fg-3);
}
.loop__n::before { content: "0" counter(loop-i) " / "; color: var(--accent); }
.loop__title { margin-block-end: var(--s3); }
.loop__return {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: var(--s4);
	padding-block-start: var(--s5);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fg-3);
}
.loop__return::before {
	content: "";
	flex: 1;
	block-size: 1px;
	background: var(--hair);
}

@media (max-width: 860px) {
	.loop { grid-template-columns: minmax(0, 1fr); }
	.loop__node:not(:last-child)::after {
		inset-block-start: 100%;
		inset-inline-start: 50%;
		inline-size: 1px;
		block-size: clamp(1.5rem, 4vw, 3rem);
	}
}

/* ---- Compact manifesto ---------------------------------------------------
   The statement, its figure and its prose held to roughly one screen. The 2:3
   portrait made the band far taller than its text; a 4:5 crop and a tighter
   drop under the statement bring it back. Prose can carry a pulled quote at
   its foot, so the conviction sits beside the figure instead of below it. */
.manifesto--compact .manifesto__meta,
.manifesto--compact .manifesto__body { margin-block-start: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); }
.manifesto--compact .manifesto__meta .fig { --ratio: 4 / 5; }
@media (min-width: 1181px) {
	.manifesto--compact .manifesto__meta { grid-column: 1 / span 3; }
	.manifesto--compact .manifesto__body { grid-column: 5 / span 7; }
}
.manifesto__body .quote {
	margin-block-start: var(--s6);
	font-size: var(--fs-3);
	line-height: 1.24;
}

/* ---- Paired contact ledger -----------------------------------------------
   The contact channels read down two columns of three rather than one column
   of six, so the band is half the height. Below 860px it falls back to the
   single stacked list. */
@media (min-width: 861px) {
	.ledger--data.ledger--stack.ledger--pair {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(3, auto);
		grid-auto-flow: column;
		column-gap: clamp(2rem, 1rem + 3vw, 4.5rem);
	}
	.ledger--pair .ledger__row { grid-template-columns: minmax(9.5rem, 32%) minmax(0, 1fr); }
}
@media (min-width: 861px) and (max-width: 1180px) {
	.ledger--data.ledger--stack.ledger--pair .ledger__row { grid-template-columns: minmax(0, 1fr); }
	.ledger--data.ledger--stack.ledger--pair .ledger__k,
	.ledger--data.ledger--stack.ledger--pair .ledger__v,
	.ledger--data.ledger--stack.ledger--pair .ledger__note { grid-column: 1; grid-row: auto; padding-block-start: 0; }
}

/* ---- Stages — a process read as one run of chevrons -----------------------
   Each stage points into the next. Across on wide screens; on narrow ones the
   run turns downward and each chevron points to the stage beneath it. */
.stages {
	--notch: clamp(.85rem, .55rem + .8vw, 1.35rem);
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: stretch;
}
.stage {
	--domain: var(--water);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	padding: clamp(1.1rem, .9rem + .8vw, 1.6rem) calc(var(--notch) + clamp(.6rem, .4rem + .6vw, 1.1rem));
	padding-inline-start: calc(var(--notch) * 2 + clamp(.2rem, .1rem + .4vw, .6rem));
	background: color-mix(in srgb, var(--domain) 15%, var(--paper));
	clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
	transition: background-color .5s var(--ease);
}
.stage:hover { background: color-mix(in srgb, var(--domain) 24%, var(--paper)); }
.stage:first-child {
	padding-inline-start: clamp(1rem, .8rem + .8vw, 1.5rem);
	clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%);
}
/* Each chevron tucks its notch around the point of the one before it */
.stage + .stage { margin-inline-start: calc(var(--notch) * -1 + .35rem); }
.stage:nth-child(2) { --domain: var(--olive); }
.stage:nth-child(3) { --domain: var(--earth); }
.stage:nth-child(4) { --domain: var(--clay-soft); }
.stage:nth-child(5) { --domain: var(--gold); }
.stage__k {
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--domain) 70%, var(--fg));
}
.stage__t {
	font-size: var(--fs-4);
	font-weight: var(--w-medium);
	letter-spacing: -0.018em;
	line-height: 1.22;
	text-wrap: balance;
}
.stage__d { font-size: var(--fs-sm); line-height: 1.45; color: var(--fg-2); }
@media (max-width: 980px) {
	.stages { grid-template-columns: minmax(0, 1fr); }
	.stage,
	.stage:first-child {
		padding: calc(var(--notch) + 1rem) clamp(1.1rem, .9rem + .8vw, 1.6rem) calc(var(--notch) + .9rem);
		clip-path: polygon(0 0, 50% var(--notch), 100% 0, 100% calc(100% - var(--notch)), 50% 100%, 0 calc(100% - var(--notch)));
	}
	.stage:first-child {
		padding-block-start: clamp(1.1rem, .9rem + .8vw, 1.6rem);
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), 50% 100%, 0 calc(100% - var(--notch)));
	}
	.stage + .stage { margin-inline-start: 0; margin-block-start: calc(var(--notch) * -1 + .35rem); }
}

/* ---- Mission, vision & values ---------------------------------------------
   Mission and vision side by side as a pair of boxes; the values run beneath
   them as four boxes of their own, each led by an icon. */
.mvv { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
.mvv__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--col-gap);
}
.mvv-card {
	display: flex;
	flex-direction: column;
	padding: clamp(1.25rem, 1rem + 1.2vw, 2.25rem);
	border: 1px solid var(--hair);
	border-block-start: 3px solid color-mix(in srgb, var(--domain, var(--fg)) 55%, transparent);
	background: color-mix(in srgb, var(--fg) 3%, var(--bg));
}
.mvv-card:hover { border-block-start-color: var(--domain, var(--fg)); }
.mvv-card--mission { --domain: var(--water); }
.mvv-card--vision  { --domain: var(--olive); }
.mvv-card .panel__n { color: var(--domain, var(--fg-3)); }
.mvv-card .body { max-width: none; }
.mvv__values-head { display: flex; flex-direction: column; }
.mvv__values-head .panel__n { color: var(--earth); }
.values-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--col-gap);
	margin-block-start: var(--s5);
}
.value-card {
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	padding: clamp(1.1rem, .9rem + .8vw, 1.6rem);
	border: 1px solid var(--hair);
	background: color-mix(in srgb, var(--fg) 3%, var(--bg));
	font-size: var(--fs-body);
	line-height: 1.55;
	color: var(--fg-2);
	transition: transform .5s var(--ease-out), border-color .5s var(--ease);
}
.value-card:hover { transform: translateY(-4px); border-color: var(--hair-strong); }
.value-card:nth-child(1) { --domain: var(--earth); }
.value-card:nth-child(2) { --domain: var(--clay-soft); }
.value-card:nth-child(3) { --domain: var(--gold); }
.value-card:nth-child(4) { --domain: var(--forest-mid); }
.value-card__ico {
	display: grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--domain) 16%, var(--paper));
	color: var(--domain);
}
.value-card__ico svg { inline-size: 1.55rem; block-size: 1.55rem; }
.value-card h4 {
	font-size: var(--fs-4);
	font-weight: var(--w-medium);
	letter-spacing: -0.018em;
	color: var(--fg);
	margin-block-start: var(--s2);
}
@media (max-width: 860px) {
	.mvv__pair { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Download links ------------------------------------------------------ */
.doc-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	margin-block-start: var(--s4);
	padding-block-start: var(--s4);
	border-block-start: 1px solid var(--hair);
}
.doc-link {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .65em 1em;
	border: 1px solid var(--hair-strong);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fg);
	transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform .45s var(--ease-out);
}
.doc-link svg { inline-size: 14px; block-size: 14px; flex: none; }
.doc-link:hover { border-color: var(--domain, var(--fg)); color: var(--domain, var(--fg)); transform: translateY(-2px); }

/* ---- Diagram card — a figure drawn in HTML rather than shipped as a JPEG -- */
.dia {
	margin-block-start: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
	padding: clamp(1.1rem, .7rem + 2vw, 2.75rem);
	background: var(--paper);
	border: 1px solid var(--hair);
}
.dia__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4) var(--s6);
	padding-block-end: clamp(1rem, .8rem + .8vw, 1.5rem);
	margin-block-end: clamp(1.25rem, .9rem + 1.4vw, 2.25rem);
	border-block-end: 1px solid var(--hair);
}
.dia__brand { display: flex; align-items: center; gap: var(--s4); }
.dia__badge {
	display: grid;
	place-items: center;
	inline-size: 2.9rem;
	block-size: 2.9rem;
	flex: none;
	border: 1px solid var(--gold);
	border-radius: 50%;
	color: var(--earth);
}
.dia__badge svg { inline-size: 1.3rem; block-size: 1.3rem; }
.dia__title { font-size: var(--fs-3); font-weight: var(--w-medium); letter-spacing: var(--tr-title); line-height: 1.1; }
.dia__title small {
	display: block;
	margin-block-start: .45em;
	font-family: var(--mono);
	font-size: var(--fs-micro);
	font-weight: var(--w-book);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--fg-3);
}
.dia__tag { max-inline-size: 40ch; font-size: var(--fs-sm); font-style: italic; line-height: 1.5; color: var(--fg-2); text-align: end; }
@media (max-width: 680px) { .dia__tag { text-align: start; } }

/* ---- Reinforcing loop -----------------------------------------------------
   One DOM serves both layouts. Narrow: a plain vertical flow, hub to domains
   to enterprise, with the loop's three phrases as the steps between. Wide
   (container ≥ 1000px): the same elements are pinned to a 1200 × 610 drawing
   and the connector SVG is laid over them; type scales with the container so
   the drawing keeps its proportions at any width. */
.loop-dia { container: loopdia / inline-size; }
.loop-dia__stage { position: relative; display: flex; flex-direction: column; gap: var(--s4); }
.loop-dia__wires { display: none; }
.loop-dia__ring {
	font-family: var(--sans);
	font-size: 12.5px;
	font-weight: var(--w-medium);
	letter-spacing: .04em;
	fill: var(--earth);
}

.loop-dia__hub {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35em;
	align-self: center;
	inline-size: min(100%, 24rem);
	padding: var(--s6) var(--s5);
	border-radius: 999px;
	background: var(--forest-deep);
	color: var(--light);
	text-align: center;
	box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px color-mix(in srgb, var(--gold) 55%, transparent), 0 18px 40px -18px rgba(46, 58, 38, .55);
}
.loop-dia__hub svg { inline-size: 1.6em; block-size: 1.6em; color: var(--sand); }
.loop-dia__hub b { font-size: var(--fs-3); font-weight: var(--w-medium); letter-spacing: var(--tr-title); line-height: 1.1; }
.loop-dia__hub span { font-size: var(--fs-sm); color: rgba(241, 237, 224, .72); line-height: 1.35; }
.loop-dia__hub .loop-dia__methods {
	margin-block-start: .4em;
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sand);
}

.loop-dia__step {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font-size: var(--fs-4);
	font-style: italic;
	color: var(--earth);
	text-align: center;
}
.loop-dia__step::before { content: "↓"; font-style: normal; color: var(--gold); }
.loop-dia__step--return::before { content: "↺"; }

.loop-dia__cards { display: grid; gap: var(--s3); }
.loop-dia__card {
	display: flex;
	align-items: center;
	gap: var(--s4);
	padding: var(--s4) var(--s5);
	background: #fffdf8;
	border: 1px solid var(--hair);
	border-inline-start: 3px solid var(--domain);
	border-radius: 6px;
	box-shadow: 0 6px 18px -14px rgba(46, 58, 38, .5);
}
.loop-dia__ico {
	display: grid;
	place-items: center;
	inline-size: 2.6em;
	block-size: 2.6em;
	flex: none;
	border-radius: 50%;
	background: color-mix(in srgb, var(--domain) 16%, var(--paper));
	color: var(--domain);
}
.loop-dia__ico svg { inline-size: 1.45em; block-size: 1.45em; }
.loop-dia__card b { display: block; font-weight: var(--w-medium); color: var(--fg); line-height: 1.2; }
.loop-dia__card b em { font-style: normal; color: var(--domain); }
.loop-dia__card small { display: block; margin-block-start: .25em; font-size: var(--fs-sm); line-height: 1.35; color: var(--fg-2); }
.loop-dia__card--water { --domain: var(--water); }
.loop-dia__card--land  { --domain: var(--olive); }
.loop-dia__card--waste { --domain: var(--gold); }
.loop-dia__card--enterprise { --domain: var(--clay); }
.loop-dia__assets {
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fg-3);
	text-align: center;
}

@container loopdia (min-width: 1000px) {
	.loop-dia__stage { display: block; aspect-ratio: 1200 / 610; }
	.loop-dia__stage > * { position: absolute; margin: 0; }
	.loop-dia__wires { display: block; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }

	.loop-dia__hub {
		left: 7.25%;
		top: 42.131%;
		inline-size: 14.6667%;
		aspect-ratio: 1;
		padding: 1.4cqi;
		gap: .35cqi;
		box-shadow: 0 1.6cqi 3.4cqi -1.4cqi rgba(46, 58, 38, .55);
	}
	.loop-dia__hub svg { inline-size: 1.9cqi; block-size: 1.9cqi; }
	.loop-dia__hub b { font-size: clamp(13px, 1.55cqi, 21px); }
	.loop-dia__hub span { font-size: clamp(10px, .9cqi, 12.5px); }
	/* On the drawing the two methods ring the hub as curved type in the SVG. */
	.loop-dia__hub .loop-dia__methods {
		position: absolute !important;
		width: 1px; height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.loop-dia__step { transform: translateX(-50%); white-space: nowrap; font-size: clamp(13px, 1.45cqi, 19px); }
	.loop-dia__step::before { content: none; }
	.loop-dia__step--a { left: 33.54%; top: 8.525%; }
	.loop-dia__step--b { left: 71.625%; top: 8.525%; }
	.loop-dia__step--return { left: 44.125%; top: 93.115%; }

	.loop-dia__cards { display: contents; }
	.loop-dia__card {
		position: absolute;
		inline-size: 26.6667%;
		transform: translateY(-50%);
		gap: 1.1cqi;
		padding: .85cqi 1.3cqi;
		font-size: clamp(11px, 1.2cqi, 15.5px);
	}
	.loop-dia__card small { font-size: clamp(10px, .98cqi, 13px); }
	.loop-dia__card--water { left: 39.1667%; top: 40.984%; }
	.loop-dia__card--land  { left: 39.1667%; top: 56.557%; }
	.loop-dia__card--waste { left: 39.1667%; top: 72.131%; }
	.loop-dia__card--enterprise { left: 74%; top: 56.557%; inline-size: 21.8333%; }
	.loop-dia__assets { left: 52.5%; top: 81.967%; transform: translateX(-50%); white-space: nowrap; font-size: clamp(9px, .8cqi, 11px); }
}

/* ---- Theory of change — five columns, simplified --------------------------
   Inputs on the left feed the domain chains (activity → output → outcome),
   which feed the impact on the right. Below 1000px every chain stacks and
   each cell names its own stage. */
.toc {
	display: grid;
	grid-template-columns: minmax(0, .95fr) repeat(3, minmax(0, 1.15fr)) minmax(0, 1.05fr);
	grid-template-rows: auto auto repeat(4, auto) auto repeat(2, auto);
	gap: var(--s3) clamp(1rem, .6rem + 1.2vw, 1.9rem);
	align-items: stretch;
}
.toc__h {
	grid-row: 1;
	padding-block-end: var(--s3);
	font-size: var(--fs-sm);
	font-weight: var(--w-medium);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fg);
}
.toc__h small {
	display: block;
	margin-block-end: .35em;
	font-family: var(--mono);
	font-size: var(--fs-micro);
	font-weight: var(--w-book);
	letter-spacing: .14em;
	color: var(--fg-3);
}
.toc__h::after {
	content: "";
	display: block;
	inline-size: 1.75rem;
	block-size: 2px;
	margin-block-start: .55em;
	background: var(--forest-mid);
}
.toc__h--impact::after { background: var(--clay); }
.toc__group {
	grid-column: 2 / span 3;
	padding-block: var(--s2) var(--s1);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--earth);
	border-block-end: 1px solid var(--hair);
}
.toc__inputs {
	grid-column: 1;
	grid-row: 2 / span 8;
	display: flex;
	flex-direction: column;
	gap: var(--s3);
}
.toc__inputs li,
.toc__cell {
	position: relative;
	padding: var(--s3) var(--s4);
	background: #fffdf8;
	border: 1px solid var(--hair);
	border-radius: 6px;
	font-size: var(--fs-sm);
	line-height: 1.4;
	color: var(--fg-2);
}
.toc__cell--act {
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: var(--s3);
	border-inline-start: 3px solid var(--domain, var(--gold));
	color: var(--fg);
}
.toc__ico {
	display: grid;
	place-items: center;
	inline-size: 2.1rem;
	block-size: 2.1rem;
	flex: none;
	border-radius: 50%;
	background: color-mix(in srgb, var(--domain, var(--gold)) 13%, var(--paper));
	color: var(--domain, var(--gold));
}
.toc__ico svg { inline-size: 1.15rem; block-size: 1.15rem; }
.toc__cell--act b { display: block; font-weight: var(--w-medium); color: var(--domain, var(--fg)); line-height: 1.25; }
.toc__cell--act small { display: block; margin-block-start: .2em; font-size: .75rem; line-height: 1.35; color: var(--fg-2); }
.toc__cell--out { grid-column: 3; }
.toc__cell--res { grid-column: 4; background: color-mix(in srgb, var(--domain, var(--gold)) 9%, #fffdf8); color: var(--fg); }
/* the arrow from each cell into the next one along its chain */
.toc__cell--act::after,
.toc__cell--out::after {
	content: "→";
	position: absolute;
	inset-inline-start: 100%;
	inset-block-start: 50%;
	inline-size: clamp(1rem, .6rem + 1.2vw, 1.9rem);
	transform: translateY(-50%);
	text-align: center;
	font-size: var(--fs-sm);
	color: var(--gold);
}
.toc__impact {
	grid-column: 5;
	grid-row: 2 / span 8;
	display: flex;
	flex-direction: column;
	gap: var(--s5);
	padding: clamp(1.1rem, .9rem + .9vw, 1.75rem);
	border-radius: 8px;
	background: var(--forest-deep);
	color: var(--light);
}
.toc__impact-t { font-size: var(--fs-3); font-weight: var(--w-medium); letter-spacing: var(--tr-title); line-height: 1.15; }
.toc__impact-k {
	padding-block-start: var(--s4);
	border-block-start: 1px solid rgba(241, 237, 224, .18);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--sand);
}
.toc__impact ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--s3); margin-block-start: calc(var(--s5) * -1 + var(--s3)); }
.toc__impact li {
	padding: var(--s3);
	border: 1px solid rgba(241, 237, 224, .14);
	border-radius: 6px;
	background: rgba(241, 237, 224, .05);
	font-size: .75rem;
	line-height: 1.4;
	color: rgba(241, 237, 224, .7);
}
.toc__impact li b {
	display: flex;
	gap: .45em;
	margin-block-end: .4em;
	font-size: var(--fs-sm);
	font-weight: var(--w-medium);
	line-height: 1.25;
	color: var(--light);
}
.toc__impact li b::before { content: "→"; color: var(--sand); }
.toc__cycle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--s3) var(--s5);
	margin-block-start: clamp(1.25rem, 1rem + 1vw, 2rem);
	padding: var(--s5);
	border: 1px solid var(--hair);
	border-radius: 6px;
	background: color-mix(in srgb, var(--sand) 18%, var(--paper));
	font-size: var(--fs-4);
	font-weight: var(--w-medium);
	color: var(--fg);
	text-align: center;
}
.toc__cycle i { font-style: normal; color: var(--clay); }
.toc__cycle-k {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	flex-basis: 100%;
	font-family: var(--mono);
	font-size: var(--fs-micro);
	font-weight: var(--w-book);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fg-3);
}
.toc__cycle-k svg { inline-size: 1.35em; block-size: 1.35em; flex: none; color: var(--forest-mid); }
.toc [data-domain="water"] { --domain: var(--water); }
.toc [data-domain="land"]  { --domain: var(--olive); }
.toc [data-domain="waste"] { --domain: var(--gold); }
.toc [data-domain="enterprise"] { --domain: var(--clay); }
.toc [data-domain="enabler"] { --domain: var(--earth); }

@media (max-width: 1000px) {
	.toc { display: flex; flex-direction: column; gap: var(--s3); }
	.toc__h--mid { display: none; }
	.toc__h { padding-block-start: var(--s5); }
	.toc__h:first-child { padding-block-start: 0; }
	.toc__group { padding-block-start: var(--s5); }
	.toc__cell--act::after, .toc__cell--out::after { content: none; }
	.toc__cell--act { flex-wrap: wrap; }
	/* each cell carries its own stage name once the columns are gone */
	.toc__cell[data-k]::before {
		content: attr(data-k);
		display: block;
		margin-block-end: .25em;
		font-family: var(--mono);
		font-size: var(--fs-micro);
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--fg-3);
	}
	.toc__cell--act[data-k]::before { flex-basis: 100%; margin-block-end: 0; }
	.toc__cell--out, .toc__cell--res { margin-inline-start: clamp(.75rem, 4vw, 1.5rem); }
}

/* --------------------------------------------------------------------------
   11  Forms — underline fields, no boxes
   -------------------------------------------------------------------------- */
.form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	row-gap: clamp(1.25rem, 1rem + 1vw, 1.9rem);
}
.field { display: flex; flex-direction: column; position: relative; }
.field--full { grid-column: 1 / -1; }

.field label {
	font-family: var(--mono);
	font-size: var(--fs-micro);
	font-weight: var(--w-book);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--fg-3);
	margin-block-end: var(--s3);
	transition: color var(--t-fast) var(--ease);
}
.field .req { color: var(--accent-warm); }
.field .opt { text-transform: none; letter-spacing: 0; opacity: .7; }

.field input,
.field select,
.field textarea {
	inline-size: 100%;
	padding: .6rem 0 .85rem;
	border: 0;
	border-block-end: 1px solid var(--hair-strong);
	background: transparent;
	color: var(--fg);
	font-family: inherit;
	font-size: var(--fs-4);
	font-weight: var(--w-light);
	letter-spacing: -0.018em;
	line-height: 1.4;
	border-radius: 0;
	transition: border-color .4s var(--ease);
}
.field textarea { resize: vertical; min-block-size: 8rem; }
.field select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 4px center, right 0 center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-inline-end: 1.6rem;
	cursor: pointer;
}
.field select option { background: var(--paper); color: var(--deep); }
.on-deep .field select option { background: var(--deep-2); color: #ffffff; }

.field input::placeholder, .field textarea::placeholder { color: var(--fg-3); opacity: .7; }

/* An accent rule that grows under the field on focus */
.field::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	block-size: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .55s var(--ease-out);
}
.field:focus-within::after { transform: scaleX(1); }
.field:focus-within label { color: var(--fg); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 0; }

.field__err {
	margin-block-start: var(--s3);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .06em;
	color: var(--steel-lt);
	min-block-size: 1em;
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-block-end-color: var(--steel); }
.field[data-invalid="true"]::after { background: var(--steel); transform: scaleX(1); }

.form-status {
	margin-block-start: var(--s6);
	padding-inline-start: var(--s4);
	border-inline-start: 2px solid transparent;
	font-size: var(--fs-sm);
	color: var(--fg-2);
	max-inline-size: 60ch;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .45s var(--ease), transform .45s var(--ease-out);
}
/* Empty until the form reports back, so it holds no space under the button */
.form-status:not([data-state]) { margin-block-start: 0; }
.form-status[data-state] { opacity: 1; transform: none; }
.form-status[data-state="ok"]  { border-inline-start-color: var(--accent); }
.form-status[data-state="err"] { border-inline-start-color: var(--steel); }

/* --------------------------------------------------------------------------
   12  Footer
   -------------------------------------------------------------------------- */
/* Reduced throughout: the footer was running to nearly a full viewport of
   its own before the copyright line. Half the opening pad, a wordmark at a
   third of its former size, and tighter rules between the bands. */
.site-footer {
	position: relative;
	background: var(--deep);
	color: #ffffff;
	padding-block-start: clamp(2.5rem, 1.8rem + 2.4vw, 4rem);
	overflow: hidden;
}
.footer-main { row-gap: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
.footer-brand { grid-column: 1 / span 4; }
.footer-blurb {
	margin-block-start: var(--s4);
	font-size: var(--fs-sm);
	color: var(--fg-2);
	max-inline-size: 34ch;
}
.footer-col { grid-column: span 2; }
.footer-col:first-of-type { grid-column-start: 7; }
.footer-col h3 {
	font-family: var(--mono);
	font-size: var(--fs-micro);
	font-weight: var(--w-book);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--fg-3);
	margin-block-end: var(--s4);
}
.footer-col li + li { margin-block-start: var(--s2); }
.footer-col a, .footer-col li {
	font-size: var(--fs-sm);
	color: var(--fg-2);
	transition: color var(--t-fast) var(--ease);
	line-height: 1.5;
}
.footer-col a:hover { color: #fff; }

.footer-base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4) var(--s6);
	padding-block: var(--s4) var(--s5);
	margin-block-start: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
	border-block-start: 1px solid var(--hair);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-3);
}
/* Footer: logo, socials and registration on the left; three link columns. */
.footer-cols { display: grid; grid-template-columns: minmax(0,1.3fr) repeat(3, minmax(0,1fr)); gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.footer-brand .brand { margin: 0; }
.footer-brand .footer-social { margin-block-start: var(--s4); }
.footer-brand .footer-reg { margin-block-start: var(--s5); }
.footer-reg__tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s3); }
.footer-reg__tags li { padding: .35em .7em; border: 1px solid var(--hair); border-radius: 4px; font-size: var(--fs-sm); color: var(--fg-2); }
.footer-reg__name { font-size: var(--fs-sm); color: var(--fg-2); }
.site-footer .footer-cols > .footer-col, .site-footer .footer-cols > .footer-brand { grid-column: auto; }
.footer-col a { overflow-wrap: anywhere; }
@media (max-width: 64em) { .footer-cols { grid-template-columns: repeat(3, minmax(0,1fr)); } .site-footer .footer-cols > .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 40em) { .footer-cols { grid-template-columns: 1fr; } }
/* Slim footer: registration + socials only. */
.footer-reg h3 { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--fg-3); margin-block-end: var(--s3); }
.footer-reg > ul:first-of-type { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--fs-sm); color: var(--fg-2); }
.footer-social { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s5); }
.footer-social a { display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; border: 1px solid var(--hair); border-radius: 50%; color: var(--fg-2); transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform .45s var(--ease-out); }
.footer-social a:hover { color: #fff; border-color: #fff; transform: translateY(-2px); }
.footer-social svg { inline-size: 18px; block-size: 18px; }
.to-top { display: inline-flex; align-items: center; gap: var(--s3); transition: color var(--t-fast) var(--ease); }
.to-top svg { inline-size: 12px; block-size: 12px; transition: transform .5s var(--ease-out); }
.to-top:hover { color: #fff; }
.to-top:hover svg { transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   13  Responsive
   --------------------------------------------------------------------------
   The grid narrows in stages (12 → 8 → 4 → 2) and each composition is
   re-laid rather than stacked, so the asymmetry survives down to phones.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
	:root { --cols: 8; }

	.c1-4, .c1-5   { grid-column: 1 / span 4; }
	.c1-6, .c1-7   { grid-column: 1 / span 5; }
	.c1-8, .c1-9   { grid-column: 1 / span 6; }
	.c1-12         { grid-column: 1 / span 8; }
	.c2-6, .c2-7   { grid-column: 1 / span 6; }
	.c3-5          { grid-column: 2 / span 5; }
	.c3-8          { grid-column: 2 / span 6; }
	.c4-6          { grid-column: 3 / span 6; }
	.c5-4, .c5-8   { grid-column: 4 / span 5; }
	.c6-6, .c6-7   { grid-column: 3 / span 6; }
	.c7-4, .c7-5, .c7-6 { grid-column: 4 / span 5; }
	.c8-5          { grid-column: 4 / span 5; }
	.c9-3, .c9-4   { grid-column: 5 / span 4; }
	.c10-3         { grid-column: 6 / span 3; }

	.shead__title  { grid-column: 1 / span 8; }
	.shead__aside  { grid-column: 1 / span 6; align-self: start; }

	/* Anything still placed on the twelve-column grid has to be brought back
	   to eight. A `span 12` left in an eight-column grid does not clamp — it
	   grows four implicit tracks, and although those tracks are zero wide the
	   column gaps between them are not, so they quietly steal four gaps'
	   worth of width from every sibling in the same grid. */
	.hero__kicker  { grid-column: 1 / span 8; }
	.crumbs        { grid-column: 1 / span 8; }

	.hero__title   { grid-column: 1 / span 8; }
	.hero__lead    { grid-column: 1 / span 5; }
	.hero__panel   { grid-column: 6 / span 3; }

	.page-head__title { grid-column: 1 / span 8; }
	.page-head__lead  { grid-column: 3 / span 6; }

	/* Back to a single stacked flow — release the two-row pinning above. */
	.manifesto__quote, .manifesto__note,
	.manifesto__body, .manifesto__meta { grid-row: auto; align-self: auto; }
	.manifesto__quote { grid-column: 1 / span 7; }
	.manifesto__note  { grid-column: 1 / span 4; align-self: start; margin-block-start: var(--s6); }
	.manifesto__meta  { grid-column: 1 / span 5; margin-block-start: var(--s6); }
	.manifesto__body  { grid-column: 1 / span 7; margin-block-start: var(--s6); }

	.ledger__n     { grid-column: 1 / span 1; }
	.ledger__head  { grid-column: 2 / span 3; }
	.ledger__body  { grid-column: 5 / span 4; }
	.ledger__aside, .ledger__fig { grid-column: 5 / span 4; }
	.ledger--data .ledger__k { grid-column: 1 / span 3; }
	.ledger--data .ledger__v { grid-column: 4 / span 5; }
	.ledger--data .ledger__note { grid-column: 4 / span 5; }

	.ledger--data.ledger--stack .ledger__k { grid-column: 1; }
	.ledger--data.ledger--stack .ledger__v,
	.ledger--data.ledger--stack .ledger__note { grid-column: 2; }

	.stat-lead     { grid-column: 1 / span 8; }
	.stat-list     { grid-column: 1 / span 8; margin-block-start: var(--s6); }

	/* Eight columns will not divide into three, so the panel band takes over
	   its own track sizing rather than borrowing the page grid. */
	.panels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.panel--a, .panel--b, .panel--c { grid-column: auto; margin-block-start: 0; }

	.duet__text, .duet--flip .duet__text { grid-column: 1 / span 3; }
	.duet__fig,  .duet--flip .duet__fig  { grid-column: 4 / span 5; }

	/* The flip is neutralised at this width — every duet figure now sits on
	   the last column — so every overhang has to turn inward, the flipped
	   ones included. */
	.duet .fig-stack__over {
		inset-inline-end: auto;
		inset-inline-start: max(var(--over-x, -12%), calc(var(--gutter) * -1));
	}

	.timeline__year  { grid-column: 1 / span 2; }
	.timeline__title { grid-column: 3 / span 3; }
	.timeline__body  { grid-column: 6 / span 3; }

	.cta__title { grid-column: 1 / span 8; }
	.cta__body  { grid-column: 1 / span 4; }
	.cta__act   { grid-column: 5 / span 4; }

	.person { grid-column: span 4; }

	.footer-brand { grid-column: 1 / span 4; }
	.footer-col   { grid-column: span 2; }
	.footer-col:first-of-type { grid-column-start: 5; }
}

@media (max-width: 860px) {
	:root { --cols: 4; --header-h: 66px; }

	.nav, .header-cta { display: none; }
	.nav-toggle { display: block; }

	.lattice i:nth-child(n+5) { display: none; }

	[class*="c1-"], [class*="c2-"], [class*="c3-"], [class*="c4-"],
	[class*="c5-"], [class*="c6-"], [class*="c7-"], [class*="c8-"],
	[class*="c9-"], [class*="c10-"] { grid-column: 1 / span 4; }

	.shead__title, .shead__aside { grid-column: 1 / span 4; }
	.shead__aside { padding-block-end: 0; }

	.hero { min-block-size: max(92svh, 600px); }
	/* Same story as the eight-column step: the kicker was still spanning
	   twelve here, which grew eight zero-width tracks and their gaps and
	   squeezed the whole hero to two-thirds of the page. */
	.hero__kicker { grid-column: 1 / span 4; }
	.hero__title  { grid-column: 1 / span 4; }
	.hero__lead   { grid-column: 1 / span 4; }
	.hero__panel  { grid-column: 1 / span 4; margin-block-start: var(--s7); }
	.hero__panel p { max-width: none; }
	.scroll-cue { display: none; }

	.page-head__title, .page-head__lead, .crumbs { grid-column: 1 / span 4; }

	.manifesto__quote, .manifesto__note, .manifesto__body, .manifesto__meta { grid-column: 1 / span 4; }
	.manifesto__body, .manifesto__meta, .manifesto__note { margin-block-start: var(--s6); }

	/* Ledger becomes a stacked record — index and title share a line so it
	   still reads as a catalogue rather than a stack of paragraphs. */
	.ledger__row { row-gap: var(--s4); }
	.ledger__n    { grid-column: 1 / span 4; padding-block-start: 0; }
	.ledger__head { grid-column: 1 / span 4; }
	.ledger__body, .ledger__aside, .ledger__fig { grid-column: 1 / span 4; }
	.ledger--data .ledger__k { grid-column: 1 / span 4; }
	.ledger--data .ledger__v { grid-column: 1 / span 4; }
	.ledger--data .ledger__note { grid-column: 1 / span 4; }

	.ledger--data.ledger--stack .ledger__k,
	.ledger--data.ledger--stack .ledger__v,
	.ledger--data.ledger--stack .ledger__note { grid-column: 1; grid-row: auto; }
	.ledger--data.ledger--stack .ledger__row { grid-template-columns: 1fr; }

	.stat-lead, .stat-list { grid-column: 1 / span 4; }
	.stat-list__k { max-width: 22ch; }

	.panels { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
	.panel--a, .panel--b, .panel--c { grid-column: auto; margin-block-start: 0; }

	.duet__text, .duet__fig, .duet--flip .duet__text, .duet--flip .duet__fig { grid-column: 1 / span 4; }

	.timeline__year  { grid-column: 1 / span 4; }
	.timeline__title { grid-column: 1 / span 4; }
	.timeline__body  { grid-column: 1 / span 4; }

	.cta__title, .cta__body, .cta__act { grid-column: 1 / span 4; }

	.person { grid-column: span 2; }
	.person__bio { font-size: var(--fs-micro); }

	/* Overlapping compositions tuck in rather than breaking the viewport.
	   Per-instance offsets are authored as inline custom properties for the
	   desktop composition, so !important is what it takes to reel them in
	   here — at this width any negative inset pushes the page sideways. */
	.fig-stack__over {
		--over-w: 52% !important;
		--over-x: 0% !important;
		--over-y: -8% !important;
	}
	.fig-stack__under {
		--under-w: 44% !important;
		--under-x: 0% !important;
		--under-y: -6% !important;
	}

	.footer-brand { grid-column: 1 / span 4; }
	.footer-col   { grid-column: span 2; }
	.footer-col:first-of-type { grid-column-start: 1; }

	.form-grid { grid-template-columns: minmax(0, 1fr); }

	.map { aspect-ratio: 4 / 3; }
}

@media (max-width: 520px) {
	/* The grid stays at four columns here.

	   It used to drop to two, but every placement rule in the 860 block above
	   spans four — and a `span 4` item in a two-column grid does not clamp,
	   it grows two implicit columns and starves the explicit ones. The footer
	   showed it worst: on a 360px phone its three columns resolved to 52px,
	   216px and 52px, stacking "Explore" on top of "Enquiries" and setting
	   the office address one word per line. Four columns costs nothing at
	   this width — the content is all full-bleed by now — and every span in
	   the system divides into it. Only the lattice thins out. */
	.lattice i:nth-child(n+3) { display: none; }

	/* Two-up cards are too narrow to read below this width. */
	.person { grid-column: 1 / span 4; }

	/* The footer's Enquiries column carries four full email addresses. Two-up,
	   its track is 133–190px through this whole range and every address breaks
	   mid-word; one-up it always has the room. The footer runs taller for it,
	   which is the correct trade on a phone. */
	.footer-brand, .footer-col { grid-column: 1 / span 4; }
	.hero__actions .btn, .cta__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* Ultra-wide: stop the measure from exploding, keep the lattice honest */
@media (min-width: 2200px) {
	:root { --gutter: clamp(5.5rem, 6vw, 9rem); }
}

/* --------------------------------------------------------------------------
   Touch pointers — hit areas, not just hairlines
   --------------------------------------------------------------------------
   Several links here are set in the micro voice: footer columns at 17px tall,
   breadcrumbs at 14px, "back to top" at 18px. A mouse can hit those; a thumb
   cannot. Each is given a 28px minimum box on a coarse pointer, which grows
   the tappable area without moving the text off its baseline. Guarded on
   pointer rather than width so a touchscreen laptop is covered too and a
   narrow desktop window is not padded out for nothing.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
	.footer-col a,
	.crumbs a,
	.to-top,
	.drawer__foot a {
		display: inline-flex;
		align-items: center;
		min-block-size: 28px;
	}
	/* The links carry their own height now, so the list rhythm eases off. */
	.footer-col li + li { margin-block-start: var(--s1); }
	.socials a, .nav__link { display: inline-flex; align-items: center; min-block-size: 32px; }
}

/* --------------------------------------------------------------------------
   14  Reduced motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	[data-reveal], .fig, .fig img, .fig > svg, .reveal-lines .line > span {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		filter: none !important;
		scale: 1 !important;
		translate: none !important;
	}
	[data-parallax] { transform: none !important; }
	.curtain { display: none !important; }
	.marquee__track { animation: none; }
	.scroll-cue span::after { animation: none; }
}

@media print {
	.site-header, .drawer, .curtain, .scroll-cue, .lattice, .marquee, .map { display: none !important; }
	.sect, .site-footer { padding-block: 1.5rem; background: #fff !important; color: #000 !important; }
	[data-reveal], .fig, .fig img { opacity: 1 !important; transform: none !important; clip-path: none !important; scale: 1 !important; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}