/* ============================================================
   Proud Brands. Main stylesheet
   Source of truth: design/Proud Brands.html (section id="v1")
   ============================================================ */

/* ---- Tokens (mirror theme.json so legacy CSS-var references work) ----
   THE PANEL (ruled 17 Jul 2026): the PB logo is built from the eight
   Illustrator-default swatches below — authoritative hexes from Sean
   (previous values were rounded variants, now unified).
   Discipline: swatches colour surfaces, bars, shadows and arrows —
   NEVER text. Paper = blue wash site-wide (ruled 17 Jul). */
:root {
	--ink: #0D0D0D;
	--white: #FFFFFF;
	--dark: #111318;

	--sw-1: #29B473; /* green  */
	--sw-2: #FAAF40; /* amber  */
	--sw-3: #8BC53F; /* leaf   */
	--sw-4: #F16522; /* flame  */
	--sw-5: #45C6EF; /* cyan   */
	--sw-6: #C1B49A; /* tan    */
	/* RULED (Sean, 31 Jul 2026: "Yellow is a verdict"): #F2C230 from the
	   reviewed mockup replaces the Illustrator #FFF100, which never passed
	   ("can't see it"). Applied to the logo SVGs + regenerated favicon the
	   same day. --sw-7-mid untouched (literal set). */
	--sw-7: #F2C230; /* yellow */
	--sw-8: #F6921E; /* orange */

	--green:  var(--sw-1);
	--lime:   var(--sw-3);
	--yellow: var(--sw-7);
	--amber:  var(--sw-2);
	--flame:  var(--sw-4);
	--cyan:   var(--sw-5);
	--tan:    var(--sw-6);
	--accent: #F0C040;

	/* Paper. Blue wash (4% cyan into white), site-wide. Was cream #F5F4F0. */
	--off: color-mix(in srgb, var(--sw-5) 4%, var(--white));
	/* Band grey. One step off the paper, used by service explainer bands and
	   the blog keep-reading band. */
	--grey: color-mix(in srgb, var(--ink) 4%, var(--white));

	--sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--serif:   'Fraunces', Georgia, 'Times New Roman', serif;
	--grotesk: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- TOKENS v3 (26 Jul 2026) ----
   From final-design/Proud Brands Tokens.dc.html, which supersedes the v2
   colour and component sections. Additive: every name below is new, so the
   legacy names above keep serving the pages that have not been rebuilt yet.

   The one law that drives the rest: BRIGHTS ARE FIELDS, MIDS ARE TEXT.
   The mid values are literal, not derived. An earlier draft mixed them with
   color-mix and produced a set where three of the five homepage proof figures
   measured below 4.5:1 (amber 3.75, tan 4.01, cyan 3.99). These eight are
   measured on white and all clear 4.5:1, body sizes included.

   RETIRED, do not reintroduce: --accent #F0C040 · #F06522 · #44C6EF ·
   #2AB473 · #1A202C · #F5F5F5 · radius 12/16/18px · --grotesk Archivo ·
   the site arrow · mono-uppercase eyebrows · white text on any bright
   swatch. The legacy block above still carries --accent and --grotesk
   because ~30 rules on not-yet-rebuilt pages reference them; nothing scoped
   .v3home or in the v3 chrome may use either. */
:root {
	--paper: #F8FDFE;
	--mist:  #EAF0F1;
	--stone: #C6D2D5;

	--sw-1-mid: #1D7C50; /* 5.18 */
	--sw-2-mid: #9A6A1A; /* 4.72 */
	--sw-3-mid: #587C28; /* 4.85 */
	--sw-4-mid: #A64719; /* 5.94 */
	--sw-5-mid: #24798F; /* 4.99 */
	--sw-6-mid: #7A7260; /* 4.77 */
	--sw-7-mid: #7C7500; /* 4.77 */
	--sw-8-mid: #9E5F14; /* 5.12 */

	/* Sector locks. A sector's colour does not change per page. */
	--sec-charity:      var(--sw-1);
	--sec-ecommerce:    var(--sw-2);
	--sec-education:    var(--sw-3);
	--sec-hospitality:  var(--sw-4);
	--sec-public:       var(--sw-5);
	--sec-construction: var(--sw-6);
	--sec-b2b:          var(--sw-7);
	--sec-trades:       var(--sw-8);

	--focus: var(--ink);
	--focus-w: var(--white);
	--error: #B3261E;

	/* Opaque lighter ink: a field or a card sitting ON an ink band. Never a
	   translucent white, which picks up whatever is behind the band. White text
	   on it measures 15.5 (tokens v3.2, 29 Jul 2026). */
	--ink-2: #242424;

	/* Control boundaries. WCAG 1.4.11 wants 3:1 on the edge of a control.
	   The drawn ghost ring at rgba(13,13,13,.25) measures 1.77:1 on white
	   and 1.91:1 on paper; the tab ring at rgba(255,255,255,.3) measures
	   2.50:1 on ink. Both are raised to the first value that clears 3:1
	   (3.15 on white, 3.07 on paper, 6.17 on ink). Measured, not guessed. */
	--ring-ink: rgba(13, 13, 13, .45);
	--ring-w:   rgba(255, 255, 255, .55);

	/* Space. Six steps named by job. Nothing between two steps. */
	--sp-tight: 8px;
	--sp-close: 16px;
	--sp-item:  24px;
	--sp-group: 40px;
	--sp-block: clamp(56px, 6vw, 80px);
	--sp-band:  clamp(72px, 9vw, 120px);
	--gutter:   clamp(20px, 4vw, 48px);
	--container: 1280px;
	/* A closing band, which gets more air than the bands above it. */
	--section-y-loud: clamp(96px, 13vw, 176px);

	/* Shape. 12, 16 and 18px are retired. */
	--radius-control: 10px;
	--radius-card:    14px;
	--radius-pill:    100px;
	--cut: clamp(40px, 6vw, 72px) 0 clamp(40px, 6vw, 72px) 0;

	/* Elevation. Light grounds only: the field is its own elevation.
	   NOTE: var(--card-tone) inside these is substituted HERE, on :root, so
	   both tokens always carry the fallback swatch. A component that varies
	   its tone per card must write the shadow in its own rule against its own
	   --card-tone (see .svc4-card, .svc4-entry, .sec2-pcard). These two stay
	   for components that use one tone for the whole set. */
	--shadow-card:  0 2px 4px rgba(13,13,13,.04),
	                0 22px 44px -16px color-mix(in srgb, var(--card-tone, var(--sw-4)) 50%, transparent);
	--shadow-hover: 0 2px 4px rgba(13,13,13,.04),
	                0 28px 52px -14px color-mix(in srgb, var(--card-tone, var(--sw-4)) 62%, transparent);

	/* Motion */
	--ease-reveal: cubic-bezier(.16, 1, .3, 1);
	--ease-state:  cubic-bezier(.4, 0, .2, 1);
	--ease-exit:   cubic-bezier(.4, 0, 1, 1);
	--dur-tap:     150ms;
	--dur-move:    250ms;
	--dur-reveal:  500ms;
	--dur-image:   350ms;
	--dur-marquee: 60s;

	--font: 'Biennale', Inter, system-ui, sans-serif;
	/* The scrim is fixed. Three surfaces need three floors, so there are
	   three named values and no freehand gradients anywhere:
	     --scrim        a band whose text sits at the bottom (component 6)
	     --scrim-hero   a full-bleed hero, text mid-height, floor everywhere
	     --scrim-plate  a text plate over bright imagery (maps, shopfronts)
	   Measured on the hospitality hero: worst glyph 2.95:1 across 0.2% of
	   pixels, deck 13.7:1, band quote 12.2:1. */
	--scrim: linear-gradient(to top, rgba(13,13,13,.86) 0%,
	                                 rgba(13,13,13,.24) 56%,
	                                 rgba(13,13,13,0) 84%);
	--scrim-hero: linear-gradient(to top, rgba(13,13,13,.9) 0%,
	                                      rgba(13,13,13,.42) 58%,
	                                      rgba(13,13,13,.4) 100%);
	--scrim-plate: linear-gradient(to top, rgba(13,13,13,.94) 0%,
	                                       rgba(13,13,13,.72) 44%,
	                                       rgba(13,13,13,.3) 100%);
	/* The fourth surface, named 29 Jul 2026 rather than left freehand (research
	   handoff §9.3): a flat layer OVER --scrim-plate for a centred column on a
	   busy photograph, where a gradient alone leaves the top third too light for
	   white body copy. Worst case for white on the warehouse frame is about
	   12:1. Naming it is what stops a second page inventing its own. */
	--scrim-solid: rgba(13, 13, 13, .55);

	/* Stage order: the truncated swatch run a tab set walks when its tabs are a
	   SEQUENCE. Where tabs are a taxonomy the type's own colour wins instead
	   (Sean's ruling, 29 Jul 2026, on the research hub). */
	--stage-order: var(--sw-7), var(--sw-4), var(--sw-5), var(--sw-1), var(--sw-6), var(--sw-2);
}

/* ---- The sweep button (tokens v3, component 1) ----
   Replaces the site arrow entirely. The destination's swatch fills from the
   LEFT when the link navigates and from BELOW when it opens something, so
   the direction carries the meaning the arrow used to. Ink text throughout
   once filled, so contrast never arises. Set --sweep per instance. */
.btn3 {
	/* inline-flex, not inline-block: when a --big and a --sm share a flex row
	   the boxes stretch to equal height, and block display leaves each label
	   sitting at its own padding-top, so the smaller label rides high. Centre
	   the label in whatever box the row gives it. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 15px 26px;
	border-radius: var(--radius-pill);
	font-family: var(--font);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .01em;
	line-height: 1.2;
	background-image: linear-gradient(to right, var(--sweep, var(--sw-4)) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	/* REQUIRED, not cosmetic. At rest the image is parked one full width to
	   the left, so with the default `repeat` the NEXT tile's coloured half
	   butts against the right edge and subpixel rounding paints a line of the
	   swatch there. Every element built on the sweep needs this. */
	background-repeat: no-repeat;
	transition: background-position var(--dur-move) var(--ease-reveal), color var(--dur-move) var(--ease-state);
}
.btn3:hover,
.btn3:focus-visible { background-position: 0 0; color: var(--ink); }

.btn3--open {
	background-image: linear-gradient(to top, var(--sweep, var(--sw-4)) 50%, transparent 50%);
	background-size: 100% 200%;
	background-position: 0 0;
}
.btn3--open:hover,
.btn3--open:focus-visible { background-position: 0 100%; }

.btn3--ink     { background-color: var(--ink);   color: var(--white); }
.btn3--light   { background-color: var(--white); color: var(--ink); }
.btn3--ghost   { color: var(--ink);   box-shadow: inset 0 0 0 1.5px var(--ring-ink); }
.btn3--ghost-w { color: var(--white); box-shadow: inset 0 0 0 1.5px var(--ring-w); }

.btn3--sm  { padding: 13px 22px; font-size: 14px; }
.btn3--big { padding: 17px 28px; font-size: 16px; }

/* On touch the fill is present at rest: there is no hover to reveal it. */
@media (hover: none) {
	.btn3 { background-position: 0 0; color: var(--ink); }
	.btn3--open { background-position: 0 100%; }
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html, body {
	background: var(--ink);
	color: var(--white);
	font-family: var(--sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Horizontal clip lives on <html> only. Putting overflow-x on <body> makes
   body a scroll container (overflow-y computes to auto), which breaks
   position: sticky for descendants (e.g. the pinned manifesto stage). */
html { overflow-x: hidden; color-scheme: light; }

body { line-height: 1.5; background: var(--off); color: var(--ink); }

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }

h1, h2, h3, h4, h5, h6, p, ul, ol, dl { margin: 0; padding: 0; }
ul, ol { list-style: none; }

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--flame);
	color: var(--white);
}
.skip-link:focus {
	left: 12px;
	top: 12px;
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

/* ---- Shared utilities ---- */
.container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
}

/* Legacy button register (pre-btn3 templates: 404, archives, journal,
   case studies). Re-cut onto the sweep (tokens v3, 30 Jul 2026) so every
   CTA on the site moves the same way: destination swatch fills from the
   left, ink text once filled. The old hover states (hardcoded #1f2937,
   #d35817 darkening, border swaps) are retired, as is the flame field
   with white text: white on the brights fails contrast, so --accent maps
   to a light button carrying the flame sweep. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 100px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .01em;
	white-space: nowrap;
	background-image: linear-gradient(to right, var(--sweep, var(--sw-4)) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	transition: background-position var(--dur-move) var(--ease-reveal), color var(--dur-move) var(--ease-state);
}
.btn:hover,
.btn:focus-visible { background-position: 0 0; color: var(--ink); }
.btn--ink     { background-color: var(--ink);    color: var(--white); }
.btn--accent  { background-color: var(--white);  color: var(--ink); }
.btn--ghost   { box-shadow: inset 0 0 0 1.5px var(--ring-ink); color: var(--ink); }
.btn--ghost-w { box-shadow: inset 0 0 0 1.5px var(--ring-w); color: var(--white); }
.btn--light,
.btn--solid-w { background-color: var(--white);  color: var(--ink); }
.btn--big     { padding: 20px 36px; font-size: 16px; }

/* ============================================================
   V1. The homepage
   ============================================================ */

.site-header {
	position: relative;
	z-index: 5;
}

.v1 { background: var(--off); }

/* ---- Nav ---- */
.v1__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
	gap: 24px;
}
.v1__logo {
	font-family: var(--grotesk);
	font-weight: 900;
	font-size: 18px;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: var(--white);
}
.v1__logo-slash { color: var(--cyan); }

/* Brand logo. Inline SVG. Cube mark stays multi-coloured; wordmark
   inherits parent text color via currentColor (cls-10). Scale via height. */
.brand-logo {
	display: inline-flex;
	align-items: center;
	height: 56px;
	color: var(--ink); /* drives wordmark fill */
}
.brand-logo__svg {
	display: block;
	height: 100%;
	width: auto;
	max-width: 220px;
}
@media (max-width: 640px) {
	.brand-logo { height: 40px; }
	.brand-logo__svg { max-width: 160px; }
}
.v1__nav-links {
	display: flex;
	gap: 28px;
	font-size: 14px;
	color: rgba(255,255,255,.75);
}
.v1__nav-links a:hover { color: var(--white); }

/* ---- Hero ---- */
.v1__hero {
	padding: 80px 0 40px;
	position: relative;
}
.v1__marker {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 32px;
	color: var(--flame);
}
.v1__marker::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--flame);
	box-shadow: 0 0 16px rgba(240, 101, 34, .5);
}

.v1__mono {
	font-family: var(--grotesk);
	font-weight: 900;
	font-size: clamp(4.5rem, 15vw, 15rem);
	line-height: .85;
	letter-spacing: -.05em;
	text-transform: uppercase;
	margin: 0;
}
.v1__mono .l1 { color: var(--ink); }
.v1__mono .l2 { display: block; color: var(--flame); }
.v1__mono .l3 {
	display: block;
	font-style: italic;
	font-weight: 400;
	font-family: var(--serif);
	letter-spacing: -.02em;
	text-transform: none;
	font-size: .48em;
	margin-top: .12em;
	color: rgba(13, 13, 13, .2);
}

.v1__sub {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	padding: 60px 0;
	border-top: 1px solid rgba(255,255,255,.08);
	align-items: end;
	margin-top: 56px;
	border-top-color: rgba(13, 13, 13, .1);
}
.v1__sub p {
	font-size: 18px;
	line-height: 1.6;
	max-width: 52ch;
	color: rgba(13, 13, 13, .75);
}
.v1__sub .ctas {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	flex-wrap: wrap;
}

/* ---- Proof strip ---- */
.v1__proof { display: grid; grid-template-columns: repeat(7, 1fr); }
.v1__proof-cell {
	aspect-ratio: 1.24 / 1;
	padding: 28px 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--ink);
	position: relative;
	overflow: hidden;
}
.v1__proof-cell:nth-child(1) { background: var(--green); }
.v1__proof-cell:nth-child(2) { background: var(--lime); }
.v1__proof-cell:nth-child(3) { background: var(--yellow); }
.v1__proof-cell:nth-child(4) { background: var(--amber); }
.v1__proof-cell:nth-child(5) { background: var(--flame); color: var(--white); }
.v1__proof-cell:nth-child(6) { background: var(--cyan); }
.v1__proof-cell:nth-child(7) { background: var(--tan); }
.v1__proof-cell svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.v1__proof-cell .num {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.5rem, 4.5vw, 4rem);
	line-height: 1;
	letter-spacing: -.03em;
}
.v1__proof-cell .lbl {
	font-size: 11px;
	font-family: var(--mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .75;
	max-width: 18ch;
	line-height: 1.4;
}
.v1__proof-cell .tag {
	font-size: 10px;
	font-family: var(--mono);
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ---- Pillars · Five reinforcing systems (isometric pinwheel) ---- */
.v1__pillars {
	padding: 140px 0 160px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	position: relative;
	background: var(--off);
	color: var(--ink);
	border-bottom-color: rgba(13, 13, 13, .08);
}
.v1__pillars-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: end;
	margin-bottom: 80px;
}
.v1__pillars h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1;
	letter-spacing: -.03em;
	margin: 16px 0 0;
	max-width: 18ch;
	color: var(--ink);
}
.v1__pillars h2 i { font-style: normal; font-weight: 400; color: var(--flame); }
.v1__pillars-lede {
	font-size: 18px;
	line-height: 1.55;
	max-width: 46ch;
	align-self: end;
	color: rgba(13, 13, 13, .7);
}

/* The pinwheel diagram + absolute callouts */
.v1__pinwheel {
	position: relative;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	aspect-ratio: 1240 / 820;
}
.v1__pinwheel svg.five-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.v1__callout {
	position: absolute;
	width: 280px;
	font-family: var(--sans);
	color: inherit;
	text-decoration: none;
}
.v1__callout .num {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 6px;
	color: rgba(13, 13, 13, .55);
}
.v1__callout .ttl {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -.01em;
	line-height: 1.1;
	margin-bottom: 8px;
	color: var(--ink);
}
.v1__callout .ttl .sw {
	display: inline-block;
	width: 10px; height: 10px;
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: middle;
	transform: translateY(-2px);
}
.v1__callout .desc {
	font-size: 13px;
	line-height: 1.45;
	color: rgba(13, 13, 13, .7);
}
.v1__callout .stat {
	margin-top: 10px;
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .5);
}
.v1__callout .stat strong {
	font-family: var(--serif);
	font-size: 20px;
	letter-spacing: -.01em;
	color: var(--ink);
}
.v1__callout.cb-green   { top: 12%; left: 0;   text-align: right; }
.v1__callout.cb-blue    { top: 12%; right: 0;  text-align: left; }
.v1__callout.cb-orange  { top: 46%; left: 0;   text-align: right; }
.v1__callout.cb-yellow  { top: 46%; right: 0;  text-align: left; }
.v1__callout.cb-strategy { bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; width: 300px; }
.v1__callout.cb-strategy .ttl { font-size: 28px; }

a.v1__callout { transition: transform .2s; cursor: pointer; }
a.v1__callout:hover { transform: translateY(-2px); }
a.v1__callout.cb-strategy:hover { transform: translate(-50%, -2px); }

/* Tablet. Collapse the iso into a single column with the SVG above */
@media (max-width: 1100px) {
	.v1__pillars { padding: 96px 0 110px; }
	.v1__pillars-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
	.v1__pillars h2 { max-width: none; }
	.v1__pillars-lede { align-self: auto; }
	.v1__pinwheel { aspect-ratio: auto; }
	.v1__pinwheel svg.five-svg {
		position: relative;
		height: auto;
		display: block;
		margin-bottom: 24px;
	}
	.v1__callout {
		position: static;
		width: 100%;
		text-align: left !important;
		margin: 24px 0;
		display: grid;
		grid-template-columns: 80px 1fr;
		gap: 16px;
		align-items: start;
		transform: none !important;
	}
	.v1__callout.cb-strategy {
		transform: none;
		left: auto;
		bottom: auto;
		width: auto;
	}
	.v1__callout .num { margin: 6px 0 0; }
}

/* Phone. Hide the iso diagram, render callouts as colour-blocked cards
   with Strategy as the lifted plinth at top */
@media (max-width: 720px) {
	.v1__pillars { padding: 64px 0 72px; }
	.v1__pillars-head { margin-bottom: 32px; }
	.v1__pillars h2 { font-size: clamp(2rem, 8.5vw, 2.6rem); line-height: 1.04; letter-spacing: -.02em; }
	.v1__pillars-lede { font-size: 15px; line-height: 1.55; max-width: none; }
	.v1__pinwheel svg.five-svg { display: none; }
	.v1__pinwheel { display: flex; flex-direction: column; gap: 12px; }
	.v1__callout {
		position: relative;
		display: block;
		width: 100%;
		margin: 0;
		padding: 22px 20px 24px;
		border-radius: 16px;
		text-align: left !important;
		overflow: hidden;
		isolation: isolate;
	}
	.v1__callout::after {
		content: '';
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: radial-gradient(110% 60% at 100% 0%, rgba(255, 255, 255, .18), transparent 60%);
	}
	.v1__callout > div { position: relative; z-index: 1; }
	.v1__callout .num { font-size: 10px; color: inherit; opacity: .65; margin: 0 0 12px; }
	.v1__callout .ttl { font-size: 24px; font-weight: 900; line-height: 1.05; color: inherit; }
	.v1__callout .ttl .sw { display: none; }
	.v1__callout .desc { font-size: 14px; line-height: 1.5; color: inherit; opacity: .85; max-width: 38ch; }
	.v1__callout .stat { margin-top: 14px; color: inherit; opacity: .7; font-size: 10px; }
	.v1__callout .stat strong { font-size: 20px; color: inherit; opacity: 1; }
	.v1__callout.cb-strategy {
		order: 1;
		background: #C2B398;
		color: #0D0D0D;
		border: 1px solid rgba(0, 0, 0, .08);
		box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .25);
	}
	.v1__callout.cb-orange { order: 2; background: #F06522; color: #fff; }
	.v1__callout.cb-blue   { order: 3; background: #44C6EF; color: #0D0D0D; }
	.v1__callout.cb-yellow { order: 4; background: #FEF100; color: #0D0D0D; }
	.v1__callout.cb-green  { order: 5; background: #2AB473; color: #fff; }
	.v1__callout.cb-strategy .ttl { font-size: 26px; }
}

/* ---- OSOF tiles ---- */
.v1__osof {
	padding: 140px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
	background: linear-gradient(180deg, var(--ink) 0%, #0b0d12 100%);
}
.v1__osof-head {
	text-align: center;
	margin: 0 auto 72px;
	max-width: 680px;
}
.v1__osof-head .tm {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--accent);
	text-transform: uppercase;
	margin-bottom: 16px;
}
.v1__osof-head h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.8rem, 5.6vw, 4.4rem);
	line-height: 1.05;
	letter-spacing: -.03em;
	margin-bottom: 24px;
	color: var(--white);
}
.v1__osof-head h2 i { font-style: italic; font-weight: 700; color: var(--white); }
.v1__osof-head p {
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .85);
}

.v1__osof-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 14px;
	overflow: hidden;
}
.v1__osof-card {
	background: var(--ink);
	color: var(--white); /* dark-baked tile. Explicit white so the ink base colour does not bleed in */
	padding: 36px 28px;
	min-height: 380px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	transition: background .2s, transform .2s;
	cursor: pointer;
	text-decoration: none;
}
.v1__osof-card .osof-halftone {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;
}
.v1__osof-card:hover .osof-halftone { opacity: 1; }
.v1__osof-card:hover { background: #171b24; transform: translateY(-2px); }
.v1__osof-card:hover .arrow { color: var(--tile-accent, var(--white)); transform: translateX(4px); }
.v1__osof-card .arrow { transition: color .2s, transform .2s; }
.v1__osof-card .cat,
.v1__osof-card .letters { color: var(--tile-accent, var(--white)); }
.v1__osof-card .cat {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
}
.v1__osof-card .letters {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.4rem, 3.6vw, 3.6rem);
	line-height: .95;
	letter-spacing: -.035em;
	margin: 20px 0 14px;
	font-style: italic;
}
.v1__osof-card p {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255,255,255,.65);
}
.v1__osof-card .arrow {
	align-self: flex-end;
	font-family: var(--mono);
	font-size: 12px;
	color: rgba(255,255,255,.4);
	margin-top: 20px;
	letter-spacing: .08em;
}

/* ---- Discovery ---- */
.v1__disc {
	padding: 140px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
	background: var(--ink);
	color: var(--white);
	border-bottom-color: rgba(255, 255, 255, .08);
}
.v1__disc h2 {
	font-family: var(--grotesk);
	font-weight: 900;
	font-size: clamp(2rem, 4vw, 3rem);
	text-transform: uppercase;
	letter-spacing: -.03em;
	line-height: 1.05;
	max-width: 28ch;
	margin-bottom: 60px;
	color: var(--white);
}
.v1__disc h2 em { font-style: normal; color: var(--cyan); }
.v1__disc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	position: relative;
}
.v1__disc-dot {
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	pointer-events: none;
	animation: disc-bounce-x var(--dot-dur, 4s) linear forwards,
	           disc-bounce-y var(--dot-dur, 4s) ease-in-out forwards,
	           disc-fade var(--dot-dur, 4s) linear forwards;
}
@keyframes disc-bounce-x {
	0%   { left: calc(50% - 30px); }
	100% { left: calc(50% + 30px); }
}
@keyframes disc-bounce-y {
	0%   { top: var(--dot-y); }
	25%  { top: calc(var(--dot-y) - var(--dot-arc, 20px)); }
	50%  { top: var(--dot-y); }
	75%  { top: calc(var(--dot-y) - var(--dot-arc2, 14px)); }
	100% { top: var(--dot-y); }
}
@keyframes disc-fade {
	0%   { opacity: 0; }
	15%  { opacity: var(--dot-peak, .25); }
	85%  { opacity: var(--dot-peak, .25); }
	100% { opacity: 0; }
}
.v1__disc-col h4 {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.45);
	margin: 0 0 20px;
}
.v1__disc-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.v1__disc-col li {
	padding: 14px 0;
	border-top: 1px solid rgba(255,255,255,.08);
	font-size: 15px;
	line-height: 1.4;
	color: rgba(255,255,255,.8);
}
.v1__disc-col li:last-child {
	border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ---- Team ---- */
.v1__team {
	padding: 140px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
	border-bottom-color: rgba(13, 13, 13, .1);
}
.v1__team-head {
	margin-bottom: 60px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: end;
}
.v1__team-head h2 {
	font-family: var(--grotesk);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	text-transform: uppercase;
	letter-spacing: -.03em;
	line-height: .95;
	max-width: 16ch;
	color: var(--ink);
}
.v1__team-head h2 em {
	font-style: normal;
	color: var(--flame);
}
.v1__team-head p {
	font-size: 17px;
	line-height: 1.6;
	max-width: 50ch;
	color: rgba(13, 13, 13, .6);
}

.v1__team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.v1__team-grid--three {
	grid-template-columns: repeat(3, 1fr);
	max-width: 960px;
	margin: 0 auto;
	gap: 32px;
}
.v1__team-grid--five {
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
}
@media (max-width: 1100px) {
	.v1__team-grid--five { grid-template-columns: repeat(3, 1fr); }
	.v1__team-grid--five .v1__m--bench { grid-column: span 3; }
}
@media (max-width: 720px) {
	.v1__team-grid--five { grid-template-columns: repeat(2, 1fr); }
	.v1__team-grid--five .v1__m--bench { grid-column: span 2; }
}

/* Bench card. Abstract, distinct from human members */
.v1__m--bench .pic {
	filter: none;
	background:
		repeating-linear-gradient(
			135deg,
			rgba(255,255,255,.08) 0,
			rgba(255,255,255,.08) 2px,
			transparent 2px,
			transparent 12px
		),
		linear-gradient(135deg, var(--g1, var(--tan)), var(--g2, var(--flame)));
}
.v1__m--bench .pic::after {
	background-image:
		radial-gradient(circle at 50% 50%, rgba(0,0,0,.08) 0, rgba(0,0,0,.45) 80%);
}
.v1__m--bench h4 {
	font-family: var(--mono);
	font-weight: 500;
	letter-spacing: 0.08em;
}

/* Bench card flip */
.bench-flip {
	perspective: 800px;
}
.bench-flip__front,
.bench-flip__back {
	backface-visibility: hidden;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.bench-flip__front {
	position: absolute;
	inset: 0;
}
.bench-flip__front img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.bench-flip__front .id {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 2;
}
.bench-flip__back {
	position: absolute;
	inset: 0;
	transform: rotateY(180deg);
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--g1, var(--tan)), var(--g2, var(--flame)));
	padding: 24px;
}
.bench-flip__back ul {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: center;
}
.bench-flip__back li {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
	padding: 6px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.bench-flip__back li:last-child { border-bottom: 0; }
.v1__m--bench:hover .bench-flip__front {
	transform: rotateY(180deg);
}
.v1__m--bench:hover .bench-flip__back {
	transform: rotateY(0);
}
.bench-flip__back {
	z-index: 3;
}
.v1__m {
	position: relative;
	cursor: pointer;
	transition: transform .3s;
}
.v1__m:hover { transform: translateY(-6px); }
.v1__m .pic {
	aspect-ratio: 3 / 4;
	position: relative;
	overflow: hidden;
	margin-bottom: 16px;
	filter: grayscale(1) contrast(1.1);
	background: linear-gradient(135deg, var(--g1, var(--flame)), var(--g2, var(--amber)));
}
.v1__m .pic img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 0;
}
/* When there's a photo, drop the heavy radial vignette so the face reads
   cleanly. The faint scanline pattern stays as editorial texture. */
.v1__m--has-photo .pic::after {
	background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.15) 0 1px, transparent 1px 3px);
	mix-blend-mode: multiply;
}
.v1__m .pic::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 50% 35%, rgba(0,0,0,.15) 0, rgba(0,0,0,.55) 80%),
		repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px);
	mix-blend-mode: multiply;
}
.v1__m .pic .id {
	position: absolute;
	bottom: 10px;
	left: 10px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .1em;
	color: rgba(255,255,255,.9);
	text-transform: uppercase;
	z-index: 2;
}
.v1__m h4 {
	font-family: var(--grotesk);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: -.01em;
	text-transform: uppercase;
	margin-bottom: 4px;
	color: var(--ink);
}
.v1__m .role {
	font-size: 13px;
	color: rgba(13, 13, 13, .55);
}
.v1__team-more {
	margin-top: 32px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	color: var(--flame);
}
.v1__team-more a:hover { color: var(--ink); }

/* ---- Calm CTA row (v2). Cream pre-footer ---- */
.v1__cta-row {
	padding: 120px 0;
	background: var(--off);
	color: var(--ink);
	text-align: center;
	position: relative;
	overflow: hidden;
	border-top: 1px solid rgba(13, 13, 13, .08);
}
.v1__cta-row::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% 20%, rgba(240, 101, 34, .06) 0%, transparent 55%);
	pointer-events: none;
}
.v1__cta-row > * { position: relative; }
.v1__cta-row h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(3rem, 7vw, 6rem);
	line-height: .95;
	letter-spacing: -.03em;
}
.v1__cta-row h2 i {
	font-style: italic;
	font-weight: 400;
	color: var(--ink);
}
.v1__cta-row p {
	font-size: 20px;
	margin: 24px auto 36px;
	max-width: 540px;
	line-height: 1.5;
	color: rgba(13, 13, 13, .78);
}

/* ---- Footer ---- */
.site-footer {
	background: var(--ink);
	color: var(--white);
	padding-top: 80px;
}
.v1__footer {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 60px;
}
.v1__footer-logo {
	display: inline-flex;
	align-items: center;
	height: 90px;
	margin-bottom: 24px;
	color: var(--white);
}
.v1__footer-logo .brand-logo__svg {
	display: block;
	height: 100%;
	width: auto;
	max-width: 320px;
}
@media (max-width: 720px) {
	.v1__footer-logo { height: 64px; }
	.v1__footer-logo .brand-logo__svg { max-width: 220px; }
}
.v1__footer-tag {
	font-size: 13px;
	color: rgba(255,255,255,.55);
	max-width: 38ch;
	line-height: 1.55;
}
.v1__footer-col h5 {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	color: rgba(255,255,255,.4);
	text-transform: uppercase;
	margin-bottom: 14px;
	font-weight: 500;
}
.v1__footer-col ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
}
.v1__footer-col a { color: rgba(255,255,255,.75); }
.v1__footer-col a:hover { color: var(--cyan); }

.v1__footer-bottom {
	border-top: 1px solid rgba(255,255,255,.08);
	padding: 24px 0 40px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	color: rgba(255,255,255,.4);
	text-transform: uppercase;
}
.v1__footer-legal a { color: inherit; }
.v1__footer-legal a:hover { color: var(--white); }

/* ============================================================
   Responsive. Coarse breakpoints, refine in next session
   ============================================================ */

@media (max-width: 1024px) {
	.v1__sub { grid-template-columns: 1fr; gap: 32px; align-items: start; }
	.v1__sub .ctas { justify-content: flex-start; }
	.v1__disc-grid,
	.v1__team-head { grid-template-columns: 1fr; gap: 28px; align-items: start; }
	.v1__team-grid { grid-template-columns: repeat(2, 1fr); }
	.v1__osof-grid { grid-template-columns: 1fr; }
	.v1__proof { grid-template-columns: repeat(4, 1fr); }
	.v1__proof-cell:nth-child(n+5) { aspect-ratio: 1 / 1; }
	.v1__footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
	.v1__nav-links { display: none; }
	.v1__hero { padding: 56px 0 24px; }
	.v1__pillars,
	.v1__osof,
	.v1__disc,
	.v1__team { padding: 96px 0; }
	.v1__cta { padding: 72px 0; }
	.v1__team-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
	.v1__proof { grid-template-columns: repeat(2, 1fr); }
	.v1__footer { grid-template-columns: 1fr; gap: 32px; }
	.v1__footer-bottom { flex-direction: column; align-items: flex-start; }

	/* CTAs on mobile. Stack into a column so they don't shrink-and-clip */
	.v1__sub { display: block; margin-top: 32px; padding: 32px 0; }
	.v1__sub p { margin-bottom: 24px; max-width: none; }
	.v1__sub .ctas { justify-content: flex-start; }
	.v1__sub .ctas .btn { flex: 1 0 auto; }
}

/* ============================================================
   Phone-tight (<420px). Clamp the giant grotesk H1s so the
   first word doesn't overflow the viewport. Without this,
   pv1__h1's 3.5rem (56px) min clip produces "A SMALL STUDIO"
   overflowing 375px wide phones.
   ============================================================ */
@media (max-width: 420px) {
	.pv1__h1            { font-size: clamp(2rem, 11vw, 3rem); }
	.osp__hero h1       { font-size: clamp(2.2rem, 12vw, 3.5rem); }
	.v1__mono           { font-size: clamp(3rem, 17vw, 5rem); }
	.v1__pillars h2,
	.v1__osof-head h2,
	.osp__pillars-head h2,
	.abt__story-left h2,
	.abt__principles h2,
	.abt__numbers h2    { font-size: clamp(1.8rem, 8vw, 2.4rem); }
	.v1__disc h2,
	.v1__team-head h2,
	.abt__team-head h2,
	.osp__loop h2,
	.svp__inclusions h2 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
	.v1__cta-row h2     { font-size: clamp(2rem, 10vw, 3.2rem); }
	.svi__name          { font-size: 22px; }
	.osp__pillar-name   { font-size: clamp(2rem, 12vw, 3rem); }

	/* Signal/breadcrumb mono lines. Letter-spacing is too wide for 375px;
	   wrap normally and reduce tracking so they don't overflow. */
	.v1__marker,
	.pv1__signal,
	.pv1__crumb { flex-wrap: wrap; }
	.v1__marker, .pv1__signal { letter-spacing: .12em; font-size: 10px; }

	/* Process step ghost numerals are huge. Scale them down */
	.v1__step .num    { font-size: 64px; }
	.osp__loop-step .num { font-size: 56px; }

	/* About founder cards: pic + body grid → stack */
	.abt__founder { grid-template-columns: 1fr; gap: 18px; }
	.abt__founder-pic { max-width: 160px; }
}

/* ============================================================
   PV1. Sub-page chrome (about, services, osof, journal)
   Different brand mark (dot, cyan), breadcrumb strip, footer
   "The Method" column instead of Contact.
   ============================================================ */

.pv1__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
	gap: 24px;
}
.pv1__brand {
	font-family: var(--grotesk);
	font-weight: 900;
	font-size: 18px;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: var(--white);
}
.pv1__brand .sl {
	color: var(--cyan);
}
.pv1__nav ul {
	display: flex;
	gap: 28px;
	font-size: 14px;
	color: rgba(255,255,255,.75);
}
.pv1__nav ul a:hover { color: var(--white); }

.pv1__crumb {
	/* Eyebrows purged 29 Jul 2026: was mono 11px uppercase at .14em. Matches the
	   hero crumb, which is Biennale 13.5px sentence case. */
	font-family: var(--font);
	font-size: 13.5px;
	letter-spacing: 0;
	text-transform: none;
	padding: 24px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
	border-bottom-color: rgba(13, 13, 13, .1);
	color: rgba(13, 13, 13, .5);
}
.pv1__crumb a {
	cursor: pointer;
	transition: color .15s;
	color: var(--flame);
}
.pv1__crumb a:hover { color: var(--ink); }
.pv1__crumb span {
	margin: 0 12px;
	color: rgba(13, 13, 13, .25);
}

/* Breadcrumb-with-quote variant: trail on the left, italic aside on the right */
.pv1__crumb--with-aside {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.pv1__crumb .pv1__crumb-trail {
	display: inline;
}
.pv1__crumb .pv1__crumb-aside {
	margin: 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(13, 13, 13, .6);
}

.pv1__hero-wrap {
	padding: 80px 0 60px;
	border-bottom: 1px solid rgba(255,255,255,.08);
	border-bottom-color: rgba(13, 13, 13, .1);
}

.pv1__signal {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 32px;
	color: var(--flame);
}
.pv1__signal::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--flame);
	box-shadow: 0 0 16px rgba(240, 101, 34, .5);
}

/* Eyebrows and shouting purged 29 Jul 2026: was Archivo 900 uppercase at 8.5rem
   with an italic Fraunces flame accent inside it. The v3 H1 is Biennale 700,
   sentence case, and its accent inherits (flat typography, ruled 7 Jul 2026).
   Still renders on /contact/ and the legal family. */
.pv1__h1 {
	font-family: var(--font);
	font-weight: 700;
	font-size: clamp(2.5rem, 5.6vw, 4.9rem);
	line-height: 1.03;
	letter-spacing: -.028em;
	text-transform: none;
	color: var(--ink);
}
.pv1__h1 em {
	font-style: normal;
	font-weight: inherit;
	font-family: inherit;
	text-transform: none;
	letter-spacing: inherit;
	color: inherit;
}
.pv1__h1 .ghost { color: rgba(13, 13, 13, .18); }
/* Spectrum roll. Mirrors the footer logo's 8-colour 16s linear cycle. */
@keyframes pb-spectrum-text {
	0%    { color: #2bb673; }
	12.5% { color: #fbb040; }
	25%   { color: #f26522; }
	37.5% { color: #fff200; }
	50%   { color: #f7941d; }
	62.5% { color: #c2b59b; }
	75%   { color: #45c7f0; }
	87.5% { color: #8dc63f; }
	100%  { color: #2bb673; }
}
.pb-spectrum {
	color: #2bb673;
	animation: pb-spectrum-text 16000ms linear infinite;
}
/* Intentional brand flourish. Survives the global reduced-motion reset
   so it matches the footer logo, which animates regardless. */
@media (prefers-reduced-motion: reduce) {
	.pb-spectrum {
		animation-duration: 16000ms !important;
		animation-iteration-count: infinite !important;
	}
}

.pv1__deck {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.4;
	color: rgba(255,255,255,.75);
	max-width: 48ch;
	border-left: 3px solid var(--accent);
	padding-left: 22px;
	margin-top: 36px;
}

/* ============================================================
   ABT. About page sections (story / principles / founders / numbers)
   ============================================================ */

.abt__story {
	padding: 140px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
	border-bottom-color: rgba(13, 13, 13, .1);
}
.abt__story-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 80px;
	align-items: start;
}
.abt__story-left h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1;
	letter-spacing: -.03em;
	margin-bottom: 32px;
	color: var(--ink);
}
.abt__story-left h2 i { font-style: italic; font-weight: 400; }
.abt__story-left p {
	font-size: 17px;
	line-height: 1.65;
	margin-bottom: 20px;
	max-width: 56ch;
	color: rgba(13, 13, 13, .7);
}
.abt__story-left p.lead {
	font-size: 19px;
	margin-bottom: 28px;
	color: var(--ink);
}
.abt__story-right {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
/* Quote tiles. Replaces the photo placeholder grid in the "Why Proud" story
   section. Each tile is a partner quote on a pillar-toned gradient, linked
   to that partner's case study. */
.abt__qtile {
	aspect-ratio: 4/5;
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--g1, var(--flame)), var(--g2, var(--amber)));
	padding: 28px 26px 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--white);
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
}
.abt__qtile:nth-child(2) { margin-top: 48px; }
.abt__qtile:nth-child(4) { margin-top: 48px; }
.abt__qtile:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 60px -28px rgba(13,13,13,.4);
}
/* Subtle texture overlay so tiles feel printed, not flat */
.abt__qtile::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 4px);
	pointer-events: none;
	mix-blend-mode: multiply;
}
.abt__qmark {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 900;
	font-size: 72px;
	line-height: .6;
	color: rgba(255,255,255,.55);
	letter-spacing: -.04em;
	z-index: 1;
}
.abt__qbody {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(18px, 1.7vw, 22px);
	line-height: 1.25;
	color: var(--white);
	margin: 16px 0 auto;
	max-width: 22ch;
	z-index: 1;
	position: relative;
}
.abt__qattr {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.75);
	line-height: 1.5;
	z-index: 1;
	position: relative;
	border-top: 1px solid rgba(255,255,255,.25);
	padding-top: 12px;
}
.abt__qattr b {
	display: block;
	font-family: var(--grotesk);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--white);
	margin-bottom: 2px;
}
.abt__qarrow {
	position: absolute;
	top: 24px;
	right: 24px;
	font-family: var(--serif);
	font-size: 22px;
	color: rgba(255,255,255,.7);
	transition: transform .25s, color .25s;
	z-index: 2;
}
.abt__qtile:hover .abt__qarrow { transform: translateX(6px); color: var(--white); }
/* tan tile uses ink text instead of white. Better contrast on the cream-y gradient */
.abt__qtile[style*="--tan"] { color: var(--ink); }
.abt__qtile[style*="--tan"] .abt__qmark { color: rgba(13,13,13,.4); }
.abt__qtile[style*="--tan"] .abt__qbody { color: var(--ink); }
.abt__qtile[style*="--tan"] .abt__qattr { color: rgba(13,13,13,.7); border-top-color: rgba(13,13,13,.25); }
.abt__qtile[style*="--tan"] .abt__qattr b { color: var(--ink); }
.abt__qtile[style*="--tan"] .abt__qarrow { color: rgba(13,13,13,.7); }
.abt__qtile[style*="--tan"]:hover .abt__qarrow { color: var(--ink); }

.abt__principles {
	padding: 140px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
	border-bottom-color: rgba(13, 13, 13, .1);
}
.abt__principles h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1;
	letter-spacing: -.03em;
	margin-bottom: 60px;
	max-width: 18ch;
	color: var(--ink);
}
.abt__principles h2 i { font-style: italic; font-weight: 400; }
.abt__pgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	border: 1px solid rgba(255,255,255,.08);
	background: rgba(13, 13, 13, .1);
	border-color: rgba(13, 13, 13, .1);
}
.abt__p {
	padding: 36px 32px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: var(--off);
}
.abt__p .n {
	font-family: var(--grotesk);
	font-weight: 900;
	font-size: 32px;
	letter-spacing: -.03em;
	color: var(--accent);
	line-height: 1;
	min-width: 48px;
}
.abt__p:nth-child(1) .n { color: var(--cyan); }
.abt__p:nth-child(2) .n { color: var(--lime); }
.abt__p:nth-child(3) .n { color: var(--accent); }
.abt__p:nth-child(4) .n { color: var(--flame); }
.abt__p:nth-child(5) .n { color: var(--green); }
.abt__p:nth-child(6) .n { color: var(--cyan); }
.abt__p h4 {
	font-family: var(--grotesk);
	font-weight: 800;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: -.01em;
	margin-bottom: 10px;
	color: var(--ink);
}
.abt__p p {
	font-size: 14px;
	line-height: 1.55;
	color: rgba(13, 13, 13, .65);
}

.abt__team {
	padding: 140px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.abt__team-head {
	margin-bottom: 60px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: end;
}
.abt__team-head h2 {
	font-family: var(--grotesk);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	text-transform: uppercase;
	letter-spacing: -.03em;
	line-height: .95;
	max-width: 16ch;
}
.abt__team-head h2 em {
	font-style: italic;
	font-family: var(--serif);
	font-weight: 400;
	color: var(--cyan);
	text-transform: none;
}
.abt__team-head p {
	color: rgba(255,255,255,.6);
	font-size: 17px;
	line-height: 1.6;
	max-width: 50ch;
}

.abt__founders-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-bottom: 80px;
}
.abt__founders-grid--four {
	grid-template-columns: 1fr 1fr;
}
@media (max-width: 1024px) {
	.abt__founders-grid--four { grid-template-columns: 1fr; }
}
.abt__founder {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 28px;
	padding: 32px;
	border: 1px solid rgba(255,255,255,.08);
	background: #0f1115;
	color: var(--white); /* dark-baked card. Explicit white so the ink base colour does not bleed in */
	transition: border-color .2s;
}
.abt__founder:hover { border-color: rgba(255,255,255,.18); }
.abt__founder-pic {
	aspect-ratio: 1;
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--g1, var(--flame)), var(--g2, var(--amber)));
	filter: grayscale(1) contrast(1.1);
}
.abt__founder-pic::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 50% 35%, rgba(0,0,0,.15) 0, rgba(0,0,0,.55) 80%),
		repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px);
	mix-blend-mode: multiply;
}
.abt__founder-pic .id {
	position: absolute;
	bottom: 10px;
	left: 10px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .1em;
	color: rgba(255,255,255,.9);
	text-transform: uppercase;
	z-index: 2;
}
.abt__founder-pic img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 0;
}
/* When a real photo is present, drop the heavy radial vignette. Keep
   only the faint scanline texture so the face reads cleanly. */
.abt__founder--has-photo .abt__founder-pic::after {
	background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.15) 0 1px, transparent 1px 3px);
}
/* Senior-bench partner card (Simon). Accent border so it visually
   declares its different status without being a separate block. */
.abt__founder--bench {
	border-style: dashed;
	border-color: rgba(255,255,255,.18);
}
.abt__founder--bench .abt__founder-body .role {
	color: var(--cyan);
}
.abt__founder-body h3 {
	font-family: var(--grotesk);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -.01em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.abt__founder-body .role {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--accent);
	text-transform: uppercase;
	margin-bottom: 16px;
}
.abt__founder-body .bio {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255,255,255,.7);
}

.abt__bench {
	padding: 36px;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 4px;
	background: rgba(13, 13, 13, .04);
	border-color: rgba(13, 13, 13, .1);
}
.abt__bench h3 {
	font-family: var(--grotesk);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: var(--cyan);
	margin-bottom: 16px;
}
.abt__bench p {
	font-size: 15px;
	line-height: 1.6;
	max-width: 70ch;
	margin-bottom: 24px;
	color: rgba(13, 13, 13, .75);
}
.abt__bench-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px 32px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .65);
}
.abt__bench-list li::before {
	content: '· ';
	color: var(--cyan);
}

.abt__numbers {
	padding: 140px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
	border-bottom-color: rgba(13, 13, 13, .1);
}
.abt__numbers h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1;
	letter-spacing: -.03em;
	margin-bottom: 60px;
	color: var(--ink);
}
.abt__numbers h2 i { font-style: italic; font-weight: 400; }
.abt__num-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	border: 1px solid rgba(255,255,255,.08);
	background: rgba(13, 13, 13, .1);
	border-color: rgba(13, 13, 13, .1);
}
.abt__n {
	padding: 40px 32px;
	background: var(--off);
}
.abt__n .num {
	font-family: var(--serif);
	font-weight: 900;
	font-size: 72px;
	line-height: .9;
	letter-spacing: -.03em;
	margin-bottom: 16px;
}
.abt__n .num sup {
	font-size: .35em;
	vertical-align: top;
	color: rgba(13, 13, 13, .55);
}
.abt__n:nth-child(1) .num { color: var(--accent); }
.abt__n:nth-child(2) .num { color: var(--flame); }
.abt__n:nth-child(3) .num { color: var(--cyan); }
.abt__n:nth-child(4) .num { color: var(--green); }
.abt__n .lbl {
	font-size: 13px;
	line-height: 1.55;
	color: rgba(13, 13, 13, .6);
}

/* ============================================================
   OSP. OSOF Method page
   ============================================================ */

.osp__hero {
	padding: 80px 0 100px;
	border-bottom: 1px solid rgba(255,255,255,.08);
	text-align: center;
	position: relative;
	overflow: hidden;
	border-bottom-color: rgba(13, 13, 13, .1);
}
.osp__hero::before {
	content: '';
	position: absolute;
	top: -30%;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	height: 160%;
	background: radial-gradient(ellipse, rgba(240, 192, 64, .08), transparent 60%);
	pointer-events: none;
}
.osp__hero .container { position: relative; }
.osp__hero .pv1__signal { justify-content: center; }
.osp__hero h1 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(3.5rem, 9vw, 9rem);
	line-height: .88;
	letter-spacing: -.04em;
	max-width: 18ch;
	margin: 0 auto 36px;
	color: var(--ink);
}
.osp__hero h1 em { font-style: italic; font-weight: 400; }
.osp__hero h1 .acc { color: var(--flame); }
.osp__hero .deck {
	font-family: var(--serif);
	font-style: italic;
	font-size: 24px;
	line-height: 1.45;
	max-width: 54ch;
	margin: 0 auto;
	color: rgba(13, 13, 13, .75);
}

.osp__pillars {
	padding: 140px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	border-bottom-color: rgba(13, 13, 13, .1);
}
.osp__pillars-head { text-align: center; margin-bottom: 80px; }
.osp__pillars-head h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4rem);
	letter-spacing: -.025em;
	max-width: 18ch;
	margin: 0 auto;
	color: var(--ink);
}
.osp__pillars-head h2 i { font-style: italic; font-weight: 400; }

.osp__pillar {
	padding: 80px 0;
	border-top: 1px solid rgba(255, 255, 255, .08);
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 80px;
	align-items: start;
	border-top-color: rgba(13, 13, 13, .1);
}
.osp__pillar:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); border-bottom-color: rgba(13, 13, 13, .1); }

.osp__pillar-num {
	/* Eyebrows purged 29 Jul 2026: was mono 11px uppercase at .18em. */
	font-family: var(--font);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	margin-bottom: 14px;
}
.osp__pillar-name {
	font-family: var(--serif);
	font-weight: 900;
	font-style: italic;
	font-size: clamp(3rem, 6vw, 5rem);
	line-height: .95;
	letter-spacing: -.03em;
	margin-bottom: 28px;
}
.osp__pillar-meta {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.7;
	color: rgba(13, 13, 13, .4);
}
.osp__pillar[data-colour="cyan"]   .osp__pillar-num,
.osp__pillar[data-colour="cyan"]   .osp__pillar-name { color: var(--cyan); }
.osp__pillar[data-colour="accent"] .osp__pillar-num,
.osp__pillar[data-colour="accent"] .osp__pillar-name { color: var(--accent); }
.osp__pillar[data-colour="flame"]  .osp__pillar-num,
.osp__pillar[data-colour="flame"]  .osp__pillar-name { color: var(--flame); }

.osp__pillar-lead {
	font-family: var(--serif);
	font-size: 22px;
	line-height: 1.5;
	margin-bottom: 24px;
	max-width: 54ch;
	color: var(--ink);
}
.osp__pillar-body {
	font-size: 16px;
	line-height: 1.65;
	max-width: 54ch;
	margin-bottom: 18px;
	color: rgba(13, 13, 13, .7);
}
.osp__checks {
	margin-top: 28px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 32px;
}
.osp__checks li {
	font-size: 14px;
	color: rgba(255, 255, 255, .78);
	padding-left: 24px;
	position: relative;
	line-height: 1.4;
	list-style: none;
}
.osp__checks li::before {
	content: '+';
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--mono);
	color: var(--accent);
}

.osp__pillar-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid rgba(240, 192, 64, .35);
	padding-bottom: 4px;
	transition: color .15s, border-color .15s, gap .15s;
	color: var(--flame);
	border-bottom-color: rgba(240,101,34,.35);
}
.osp__pillar-link:hover { gap: 14px; color: var(--ink); border-bottom-color: var(--ink); }
.osp__pillar[data-colour="cyan"]   .osp__pillar-link { color: var(--cyan); border-bottom-color: rgba(68,198,239,.35); }
.osp__pillar[data-colour="cyan"]   .osp__pillar-link:hover { color: var(--white); border-bottom-color: var(--white); }
.osp__pillar[data-colour="flame"]  .osp__pillar-link { color: var(--flame); border-bottom-color: rgba(240,101,34,.35); }
.osp__pillar[data-colour="flame"]  .osp__pillar-link:hover { color: var(--white); border-bottom-color: var(--white); }

/* Light-mode anchor: each OSOF pillar's heading column becomes a dark
   "island" so the cyan / accent / flame headlines pop at full saturation
   against ink instead of fighting against the cream field. Right column
   stays in the cream theme. */
.osp__pillar-left {
	background: var(--ink);
	color: var(--white);
	padding: 40px 36px;
	border-radius: 14px;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.osp__pillar-left .osp__pillar-meta {
	color: rgba(255, 255, 255, .55);
}
@media (max-width: 720px) {
	.osp__pillar-left { padding: 32px 24px; }
}

.osp__loop {
	padding: 140px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	background: linear-gradient(180deg, var(--ink) 0%, #0b0d12 100%);
}
.osp__loop h2 {
	/* Eyebrows and shouting purged 29 Jul 2026: was Archivo 900 uppercase. */
	font-family: var(--font);
	font-weight: 700;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	text-transform: none;
	letter-spacing: -.028em;
	text-align: center;
	margin-bottom: 18px;
	color: var(--white);
}
/* Flat typography (ruling, 7 Jul 2026): an accent inside a heading inherits.
   No split font, no split colour. */
.osp__loop h2 em { font-style: normal; color: inherit; }
.osp__loop p.deck {
	text-align: center;
	max-width: 48ch;
	margin: 0 auto 60px;
	font-size: 17px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .65);
}
.osp__loop-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .08);
}
.osp__loop-step {
	background: var(--ink);
	color: var(--white); /* dark-baked card. Explicit white so the ink base colour does not bleed in */
	padding: 32px;
	min-height: 220px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.osp__loop-step .ph {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 14px;
	color: var(--cyan);
}
.osp__loop-step h4 {
	/* Eyebrows purged 29 Jul 2026: was Archivo 800 uppercase. */
	font-family: var(--font);
	font-weight: 700;
	font-size: 24px;
	text-transform: none;
	letter-spacing: -.018em;
	line-height: 1;
	margin-bottom: 14px;
	color: var(--white);
}
.osp__loop-step p {
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .7);
}
.osp__loop-step .num {
	font-family: var(--grotesk);
	font-weight: 900;
	font-size: 80px;
	line-height: .85;
	letter-spacing: -.05em;
	align-self: flex-end;
	color: rgba(255, 255, 255, .12);
}

@media (max-width: 1024px) {
	.osp__pillar { grid-template-columns: 1fr; gap: 32px; }
	.osp__pillar-name { font-size: clamp(2.5rem, 8vw, 4rem); }
	.osp__loop-grid { grid-template-columns: repeat(2, 1fr); }
	.osp__checks { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.osp__hero { padding: 56px 0 64px; }
	.osp__pillars { padding: 96px 0; }
	.osp__loop { padding: 96px 0; }
	.osp__loop-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SVI. Services index (5-row table)
   ============================================================ */

.svi__intro {
	padding: 120px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	border-bottom-color: rgba(13, 13, 13, .1);
}
.svi__intro .container {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 60px;
	align-items: end;
}
.svi__intro-copy {
	font-size: 18px;
	line-height: 1.6;
	max-width: 50ch;
	color: rgba(13, 13, 13, .7);
}
.svi__intro-stat .n {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(3rem, 5vw, 5rem);
	line-height: .9;
	letter-spacing: -.025em;
	color: var(--accent);
}
.svi__intro-stat .lbl {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-top: 8px;
	color: rgba(13, 13, 13, .4);
}

.svi__list {
	padding: 60px 0 120px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	border-bottom-color: rgba(13, 13, 13, .1);
}
.svi__row {
	display: grid;
	grid-template-columns: 80px 320px 1fr 60px;
	gap: 32px;
	padding: 48px 0;
	border-top: 1px solid rgba(255, 255, 255, .08);
	align-items: center;
	transition: background .2s, padding .25s;
	border-top-color: rgba(13, 13, 13, .1);
}
.svi__row:hover { padding-left: 16px; background: rgba(13, 13, 13, .03); }
.svi__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); border-bottom-color: rgba(13, 13, 13, .1); }

.svi__num {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .08em;
	color: rgba(13, 13, 13, .4);
}
.svi__name {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 32px;
	letter-spacing: -.015em;
	line-height: 1.1;
	color: var(--ink);
}
.svi__name .dot {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	margin-right: 12px;
	vertical-align: middle;
}
.svi__name small {
	display: block;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-top: 8px;
	font-weight: 400;
	color: rgba(13, 13, 13, .5);
}
.svi__desc {
	font-size: 15px;
	line-height: 1.55;
	max-width: 48ch;
	color: rgba(13, 13, 13, .7);
}
.svi__arrow {
	font-size: 24px;
	text-align: right;
	transition: transform .25s, color .25s;
	color: rgba(13, 13, 13, .4);
}
.svi__row:hover .svi__arrow {
	color: var(--accent);
	transform: translateX(8px);
}

/* ============================================================
   SVP. Service single (split hero, inclusions, FAQ, related)
   ============================================================ */

.svp__hero {
	padding: 80px 0 60px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	border-bottom-color: rgba(13, 13, 13, .1);
}
.svp__hero-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 80px;
	align-items: end;
}
.svp__sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.svp__price-card {
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 14px;
	padding: 32px;
	background: #14161c;
	color: var(--white); /* dark-baked card. Explicit white so the ink base colour does not bleed in */
}
.svp__price-card .meta {
	font-size: 16px;
	color: rgba(255, 255, 255, .75);
	margin-top: 0;
	line-height: 1.6;
}

.svp__meta-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 10px;
	overflow: hidden;
	margin: 0;
}
.svp__meta-row > div {
	background: var(--ink);
	color: var(--white); /* dark-baked glass cell. Explicit white so the ink base colour does not bleed in */
	padding: 20px;
}
.svp__meta-row dt {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .4);
	text-transform: uppercase;
	margin-bottom: 8px;
}
.svp__meta-row dd {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	margin: 0;
}

.svp__inclusions {
	padding: 120px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	border-bottom-color: rgba(13, 13, 13, .1);
}
.svp__inclusions h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4rem);
	letter-spacing: -.03em;
	line-height: 1;
	max-width: 18ch;
	margin-bottom: 60px;
	color: var(--ink);
}
.svp__inclusions h2 i { font-style: italic; font-weight: 400; }
.svp__inc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	overflow: hidden;
}
.svp__inc-card {
	background: var(--ink);
	color: var(--white); /* dark-baked glass card. Explicit white so it does not inherit ink-on-ink */
	padding: 32px;
	min-height: 240px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: background .2s;
}
.svp__inc-card:hover { background: #171b24; }
.svp__inc-card .num {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--accent);
	text-transform: uppercase;
}
.svp__inc-card h4 {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -.015em;
	line-height: 1.15;
	margin: auto 0 14px;
}
.svp__inc-card p {
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .65);
}

.svp__faq {
	padding: 120px 0;
}
.svp__faq .container {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 80px;
	align-items: start;
}
.svp__faq h2 {
	font-family: var(--grotesk);
	font-weight: 900;
	font-size: clamp(2.5rem, 4.5vw, 3.5rem);
	text-transform: uppercase;
	letter-spacing: -.03em;
	line-height: .95;
	max-width: 12ch;
	color: var(--ink);
}
.svp__faq h2 em { font-style: normal; color: var(--flame); }
.svp__faq-list {
	display: flex;
	flex-direction: column;
}
.svp__faq-item {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 28px 0;
	border-top-color: rgba(13, 13, 13, .1);
}
.svp__faq-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); border-bottom-color: rgba(13, 13, 13, .1); }
.svp__faq-item summary {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
	cursor: pointer;
	list-style: none;
}
.svp__faq-item summary::-webkit-details-marker { display: none; }
.svp__faq-item .q {
	font-family: var(--grotesk);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -.005em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--ink);
}
.svp__faq-item .plus {
	font-family: var(--font);
	font-size: 24px;
	line-height: 1;
	transition: transform .2s;
	color: var(--flame);
}
.svp__faq-item[open] .plus { transform: rotate(45deg); }
.svp__faq-item .a {
	font-size: 15px;
	line-height: 1.65;
	max-width: 62ch;
	margin-top: 14px;
	color: rgba(13, 13, 13, .7);
}

.svp__related {
	padding: 120px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.svp__related-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 48px;
	gap: 24px;
}
.svp__related h3 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2rem, 4vw, 3rem);
	letter-spacing: -.025em;
	line-height: 1;
}
.svp__related h3 i { font-style: italic; font-weight: 400; }
.svp__related-all {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--accent);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.svp__related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.svp__related-card {
	padding: 32px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	background: #14161c;
	color: var(--white); /* dark-baked card. Explicit white so the ink base colour does not bleed in */
	transition: border-color .2s, transform .25s;
	display: flex;
	flex-direction: column;
}
.svp__related-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.svp__related-card h4 {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -.015em;
	line-height: 1.15;
	margin-bottom: 14px;
}
.svp__related-card p {
	font-size: 14px;
	color: rgba(255, 255, 255, .6);
	line-height: 1.55;
	margin-bottom: 24px;
	flex-grow: 1;
}
.svp__related-cta {
	align-self: flex-start;
}

/* ============================================================
   BLA. Blog archive (journal grid) · Biennale pass, 23 Jul 2026
   White journal cards on the site paper: 14px radius, swatch-
   tinted glow shadows (the blog-archive card token, ruled 21 Jul),
   plain sentence-case meta, no mono uppercase anywhere.
   ============================================================ */

.page--blog .pv1__h1 {
	font-family: 'Biennale', var(--sans);
	font-weight: 700;
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	line-height: 1.02;
	letter-spacing: -.03em;
	text-transform: none;
}
.page--blog .pv1__h1 em { font-family: inherit; text-transform: none; }
.page--blog .pv1__deck {
	font-family: 'Biennale', var(--sans);
	font-weight: 350;
	font-style: normal;
	font-size: 19px;
	line-height: 1.65;
	border-left: 0;
	padding-left: 0;
	color: rgba(13, 13, 13, .72);
}

.bla__filters {
	padding: 36px 0 0;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	font-family: 'Biennale', var(--sans);
}
.bla__chip {
	padding: 10px 20px;
	border-radius: 999px;
	background: transparent;
	box-shadow: inset 0 0 0 1.5px rgba(13, 13, 13, .18);
	font-size: 14px;
	font-weight: 600;
	color: rgba(13, 13, 13, .72);
	cursor: pointer;
	transition: box-shadow .2s, color .2s, background .2s;
}
.bla__chip:hover { box-shadow: inset 0 0 0 1.5px rgba(13, 13, 13, .55); color: var(--ink); }
.bla__chip.on { background: var(--ink); box-shadow: none; color: var(--white); }

/* Featured lead. Editorial split: square photo + Biennale type.
   --text variant (no featured image): single centred column. */
.bla__feat {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 56px;
	/* Side padding keeps the .container gutter: a bare 0 here overrode it
	   and ran the flagship copy to the viewport edge on phones. */
	padding: 64px var(--gutter) 24px;
	align-items: center;
	font-family: 'Biennale', var(--sans);
}
.bla__feat--text { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.bla__feat--text .ex { margin-left: auto; margin-right: auto; }
.bla__feat--text h2 { max-width: 26ch; }
.bla__feat .pic {
	display: block;
	aspect-ratio: 4/3;
	overflow: hidden;
	position: relative;
	background: color-mix(in srgb, var(--ink) 6%, white);
}
.bla__feat h2 {
	font-family: 'Biennale', var(--sans);
	font-weight: 700;
	font-size: clamp(1.9rem, 3.4vw, 2.8rem);
	letter-spacing: -.02em;
	line-height: 1.08;
	margin-bottom: 20px;
	color: var(--ink);
}
.bla__feat h2 a { color: inherit; }
.bla__feat h2 i, .bla__feat h2 em { font-style: inherit; font-weight: inherit; color: inherit; }
.bla__feat .ex {
	font-weight: 350;
	font-size: 17px;
	line-height: 1.65;
	margin-bottom: 24px;
	max-width: 52ch;
	color: rgba(13, 13, 13, .7);
}
.bla__feat .meta {
	font-size: 14.5px;
	font-weight: 350;
	color: #555;
}

/* The card grid. Journal card token: white, 14px radius, featured
   image, plain meta, Biennale 600 title, swatch arrow foot. Colour
   enters from under the card (tinted shadow) and the arrow only. */
.bla__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	padding: 64px 0 88px;
	align-items: start;
}
.bla__post {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: 14px;
	overflow: hidden;
	font-family: 'Biennale', var(--sans);
	color: inherit;
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04), 0 22px 44px -16px color-mix(in srgb, var(--jc, var(--sw-5)) 50%, transparent);
	transition: transform .2s, box-shadow .2s;
}
.bla__post:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04), 0 28px 52px -14px color-mix(in srgb, var(--jc, var(--sw-5)) 62%, transparent);
}
.bla__post:nth-child(6n+1) { --jc: var(--sw-5); }
.bla__post:nth-child(6n+2) { --jc: var(--sw-4); }
.bla__post:nth-child(6n+3) { --jc: var(--sw-1); }
.bla__post:nth-child(6n+4) { --jc: var(--sw-2); }
.bla__post:nth-child(6n+5) { --jc: var(--sw-8); }
.bla__post:nth-child(6n+6) { --jc: var(--sw-6); }
.bla__post .pic {
	height: 200px;
	margin: 0;
	overflow: hidden;
	background: color-mix(in srgb, var(--ink) 6%, white);
}
.bla__post .pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.01);
	transition: transform 5s cubic-bezier(.16, 1, .3, 1);
}
.bla__post:hover .pic img { transform: scale(1.07); }
.bla__post .body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-grow: 1;
	padding: 22px 24px 26px;
}
.bla__post .meta {
	font-size: 14px;
	font-weight: 350;
	color: #555;
}
.bla__post h3 {
	font-family: 'Biennale', var(--sans);
	font-weight: 600;
	font-size: 18.5px;
	letter-spacing: -.005em;
	line-height: 1.35;
	margin: 0;
	color: var(--ink);
}
.bla__pager {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 0 0 72px;
	font-family: 'Biennale', var(--sans);
	font-size: 14.5px;
	font-weight: 350;
	color: #555;
}
.bla__pager .pages {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.bla__pager .pages a,
.bla__pager .pages span {
	padding: 9px 16px;
	border-radius: 999px;
	font-weight: 600;
	color: rgba(13, 13, 13, .72);
}
.bla__pager .pages a { box-shadow: inset 0 0 0 1.5px rgba(13, 13, 13, .18); transition: box-shadow .2s, color .2s; }
.bla__pager .pages a:hover { box-shadow: inset 0 0 0 1.5px rgba(13, 13, 13, .55); color: var(--ink); }
.bla__pager .pages .current { background: var(--ink); color: var(--white); }
.bla__pager .pages .dots { color: rgba(13, 13, 13, .4); }

/* ============================================================
   BLP. Blog single (long-form reading) · Biennale pass
   No eyebrows: no mono uppercase, no fig captions, no category
   kickers. Reading face is Biennale; the index + share rails are
   plain sentence case; related = journal cards on a grey band;
   CTA = ink band with the site button language.
   ============================================================ */

.blp__hero {
	padding: 72px 0 48px;
	text-align: center;
	font-family: 'Biennale', var(--sans);
}
/* The crumb is a flex row, so the hero's text-align:center never reached
   it — it sat left over a centred H1 (Sean, 31 Jul). Hub/archive heroes
   are left-aligned and keep their left crumb. */
.blp__hero .sec2-hero__crumb--flow { justify-content: center; }
.blp__hero h1 {
	font-family: 'Biennale', var(--sans);
	font-weight: 700;
	font-size: clamp(2.2rem, 4.6vw, 3.9rem);
	letter-spacing: -.025em;
	line-height: 1.06;
	max-width: 24ch;
	margin: 0 auto 24px;
	color: var(--ink);
	text-wrap: balance;
}
.blp__hero h1 i, .blp__hero h1 em { font-style: inherit; font-weight: inherit; color: inherit; }
.blp__hero .deck {
	font-weight: 350;
	font-size: 20px;
	line-height: 1.6;
	max-width: 56ch;
	margin: 0 auto 36px;
	color: rgba(13, 13, 13, .72);
}
.blp__byline {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 15px;
	font-weight: 350;
	color: rgba(13, 13, 13, .62);
}
.blp__byline .av {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.blp__byline strong { font-weight: 600; color: var(--ink); }

/* Feature image. Plain photograph, full width, square corners. */
.blp__feature {
	margin: 24px 0 0;
	max-height: min(62vh, 640px);
	overflow: hidden;
}
.blp__feature img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: inherit;
	object-fit: cover;
	object-position: center;
}

.blp__body {
	padding: 72px 0 88px;
	font-family: 'Biennale', var(--sans);
}
.blp__body .container {
	display: grid;
	grid-template-columns: 220px minmax(0, 720px) 220px;
	gap: 48px;
	align-items: start;
}
.blp__body .article {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.75;
	min-width: 0;
	color: rgba(13, 13, 13, .85);
}
.blp__body .article p { margin-bottom: 24px; }
.blp__body .article h2 {
	font-family: 'Biennale', var(--sans);
	font-weight: 700;
	font-size: 29px;
	letter-spacing: -.02em;
	line-height: 1.15;
	margin: 52px 0 18px;
	color: var(--ink);
}
.blp__body .article h2 em, .blp__body .article h2 i { font-style: inherit; font-weight: inherit; color: inherit; }
.blp__body .article h3 {
	font-family: 'Biennale', var(--sans);
	font-weight: 600;
	font-size: 21px;
	letter-spacing: -.01em;
	text-transform: none;
	margin: 36px 0 14px;
	color: var(--ink);
}
.blp__body .article blockquote {
	font-weight: 600;
	font-size: 23px;
	line-height: 1.45;
	letter-spacing: -.015em;
	border: 0;
	padding: 0;
	margin: 40px 0;
	color: var(--ink);
}
.blp__body .article ul {
	margin: 24px 0;
	display: flex;
	flex-direction: column;
	/* 10px read as one block on paragraph-length items (the J.17
	   three-step run); 16px gives each item its own breath. */
	gap: 16px;
	list-style: none;
}
.blp__body .article ul li {
	padding-left: 22px;
	position: relative;
	color: rgba(13, 13, 13, .8);
}
.blp__body .article ul li::before {
	content: '·';
	position: absolute;
	left: 4px;
	top: -2px;
	font-weight: 700;
	color: rgba(13, 13, 13, .45);
}
.blp__body .article a {
	border-bottom: 0;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--sw-4) 55%, transparent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition: color .15s;
}
.blp__body .article a:hover { color: var(--sw-4); }
.blp__body .article img { max-width: 100%; height: auto; }

/* Index rail. White box, no shadow; weight does the work. */
.blp__body .toc {
	position: sticky;
	top: 110px;
	align-self: start;
	background: var(--white);
	border-radius: 14px;
	padding: 24px 22px;
	font-size: 14.5px;
	font-weight: 350;
	color: rgba(13, 13, 13, .55);
}
.blp__body .toc h5 {
	font-family: 'Biennale', var(--sans);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -.01em;
	margin-bottom: 16px;
	color: var(--ink);
}
.blp__body .toc ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.blp__body .toc li { line-height: 1.45; }
.blp__body .toc li a { color: rgba(13, 13, 13, .55); text-decoration: none; transition: color .15s; }
.blp__body .toc li a:hover { color: var(--ink); }
.blp__body .toc li.on a { color: var(--ink); font-weight: 600; }
.blp__body .toc li.sub { font-size: 13.5px; }

.blp__body .share {
	position: sticky;
	top: 110px;
	align-self: start;
	font-size: 14.5px;
	font-weight: 350;
	font-family: 'Biennale', var(--sans);
}
.blp__body .share h5 {
	font-family: 'Biennale', var(--sans);
	font-size: 14.5px;
	font-weight: 600;
	margin-bottom: 12px;
	color: var(--ink);
}
.blp__body .share a {
	display: block;
	padding: 7px 0;
	border: 0;
	color: rgba(13, 13, 13, .6);
	cursor: pointer;
	transition: color .15s;
}
.blp__body .share a:hover { color: var(--ink); }

/* Keep reading. Journal cards on the grey step band. */
.blp__related {
	background: color-mix(in srgb, var(--ink) 4%, white);
	padding: clamp(72px, 9vw, 110px) 0;
	font-family: 'Biennale', var(--sans);
}
.blp__related .head {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-bottom: 8px;
}
.blp__related .head h2 {
	font-family: 'Biennale', var(--sans);
	font-weight: 700;
	font-size: clamp(28px, 3.4vw, 40px);
	letter-spacing: -.015em;
	line-height: 1.1;
	margin: 0;
	color: var(--ink);
}
.blp__pill {
	font-weight: 600;
	font-size: 15px;
	padding: 12px 26px;
	border-radius: 999px;
	color: var(--ink);
	box-shadow: inset 0 0 0 2px rgba(13, 13, 13, .8);
	transition: background .3s cubic-bezier(.16, 1, .3, 1), color .3s cubic-bezier(.16, 1, .3, 1);
}
.blp__pill:hover { background: var(--ink); color: var(--white); }
.blp__related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	padding-top: 32px;
	align-items: start;
}

/* Blog CTA. Ink band, halftone corners, site button language. */
.blg-cta {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	color: var(--white);
	text-align: center;
	padding: clamp(80px, 10vw, 130px) 0;
	font-family: 'Biennale', var(--sans);
}
.blg-cta__ht { position: absolute; width: 320px; height: 320px; pointer-events: none; }
.blg-cta__ht--tl { top: -80px; left: -80px; }
.blg-cta__ht--br { bottom: -80px; right: -80px; }
.blg-cta .container { position: relative; }
.blg-cta h2 {
	font-family: 'Biennale', var(--sans);
	font-weight: 700;
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	letter-spacing: -.02em;
	line-height: 1.08;
	max-width: 24ch;
	margin: 0 auto 18px;
	color: var(--white);
	text-wrap: balance;
}
.blg-cta h2 i, .blg-cta h2 em { font-style: inherit; font-weight: inherit; color: inherit; }
.blg-cta p {
	font-weight: 350;
	font-size: 18px;
	line-height: 1.7;
	max-width: 620px;
	margin: 0 auto 36px;
	color: rgba(255, 255, 255, .85);
}

@media (max-width: 1024px) {
	.blp__related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.bla__feat { padding-top: 48px; }
	.bla__post .pic { height: 210px; }
	.blp__related .head { flex-wrap: wrap; gap: 16px; }
	.blp__related-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Sub-page responsive
   ============================================================ */

@media (max-width: 1024px) {
	.svi__intro .container { grid-template-columns: 1fr; gap: 28px; align-items: start; }
	.svi__row { grid-template-columns: 60px 1fr; gap: 16px; padding: 32px 0; }
	.svi__desc, .svi__arrow { grid-column: 2; text-align: left; }

	.svp__hero-grid { grid-template-columns: 1fr; gap: 48px; }
	.svp__inc-grid { grid-template-columns: repeat(2, 1fr); }
	.svp__faq .container { grid-template-columns: 1fr; gap: 28px; }
	.svp__related-grid { grid-template-columns: repeat(2, 1fr); }

	.bla__feat { grid-template-columns: 1fr; gap: 32px; }
	.bla__grid { grid-template-columns: repeat(2, 1fr); }

	.blp__body .container { grid-template-columns: 1fr; }
	.blp__body .toc, .blp__body .share { position: static; text-align: left; max-width: 720px; margin: 0 auto; }
	/* width: 100% on both: a grid item with auto side margins shrinks to
	   content width and centres, which left the share links floating. */
	.blp__body .toc, .blp__body .share { width: 100%; }
	.blp__body .share { padding: 0; }
	.blp__related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.svi__list, .svi__intro, .svp__inclusions, .svp__faq, .svp__related,
	.bla__grid, .blp__body, .blp__related { padding-left: 0; padding-right: 0; }
	/* .bla__feat is excluded: the flagship article IS the .container, so
	   zeroing its side padding ran the headline to the viewport edge. */
	.svp__inc-grid { grid-template-columns: 1fr; }
	.svp__related-grid { grid-template-columns: 1fr; }
	.bla__grid { grid-template-columns: 1fr; padding: 56px 0; }
	.blp__related-grid { grid-template-columns: 1fr; }
	.blp__hero { padding: 56px 0 32px; }
	.blp__hero h1 { font-size: clamp(2rem, 8vw, 3rem); }
	.blp__body .article { font-size: 17px; }
}

/* PV1 responsive */
@media (max-width: 1024px) {
	.abt__story-grid { grid-template-columns: 1fr; gap: 48px; }
	.abt__story-right { grid-template-columns: 1fr 1fr; }
	.abt__pgrid { grid-template-columns: repeat(2, 1fr); }
	.abt__team-head { grid-template-columns: 1fr; gap: 28px; }
	.abt__founders-grid { grid-template-columns: 1fr; }
	.abt__num-grid { grid-template-columns: repeat(2, 1fr); }
	.abt__bench-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.pv1__nav ul { display: none; }
	.pv1__hero-wrap { padding: 56px 0 32px; }
	.abt__story, .abt__principles, .abt__team, .abt__numbers { padding: 96px 0; }
	.abt__pgrid { grid-template-columns: 1fr; }
	.abt__founder { grid-template-columns: 1fr; }
	.abt__founder-pic { max-width: 200px; }
	.abt__bench-list { grid-template-columns: 1fr; }
	.abt__n .num { font-size: 56px; }
}

/* ============================================================
   Inner pages. Single, page, archive, 404
   Lightweight editorial typography for content the homepage doesn't cover.
   ============================================================ */

.site-main.single,
.site-main.page,
.site-main.is-404 {
	max-width: 1320px;
	margin: 0 auto;
	padding-left: clamp(20px, 4vw, 48px);
	padding-right: clamp(20px, 4vw, 48px);
}

/* Headings + body type */
.site-main.single .wp-block-post-title,
.site-main.page .wp-block-post-title {
	font-family: var(--grotesk);
	font-weight: 900;
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	margin: 0 0 32px;
	max-width: 22ch;
}

.site-main.single .wp-block-post-date,
.site-main.page .wp-block-post-date {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.4);
	text-transform: uppercase;
	margin-bottom: 48px;
	display: block;
}

.site-main .wp-block-post-content {
	font-family: var(--sans);
	font-size: 18px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
	max-width: 70ch;
}

.site-main .wp-block-post-content > * + * { margin-top: 28px; }

.site-main .wp-block-post-content h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 64px 0 16px;
}

.site-main .wp-block-post-content h3 {
	font-family: var(--grotesk);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 48px 0 12px;
}

.site-main .wp-block-post-content a {
	color: var(--cyan);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.site-main .wp-block-post-content a:hover { color: var(--accent); }

.site-main .wp-block-post-content blockquote {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.4rem, 2.5vw, 1.75rem);
	line-height: 1.4;
	border-left: 3px solid var(--accent);
	padding-left: 24px;
	margin: 48px 0;
	color: var(--white);
}

.site-main .wp-block-post-content code {
	font-family: var(--mono);
	font-size: 0.9em;
	background: rgba(255, 255, 255, 0.06);
	padding: 2px 6px;
	border-radius: 3px;
}

.site-main .wp-block-post-content pre {
	font-family: var(--mono);
	font-size: 14px;
	background: #14161c;
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 24px;
	overflow-x: auto;
}

.site-main .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	margin-bottom: 48px;
}

/* Archive (index.html). List of posts */
.site-main .wp-block-query .wp-block-post {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding: 32px 0;
}
.site-main .wp-block-query .wp-block-post:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-main .wp-block-query .wp-block-post-title {
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	margin: 0 0 8px;
	max-width: 30ch;
}
.site-main .wp-block-query .wp-block-post-title a:hover {
	color: var(--accent);
}
.site-main .wp-block-query .wp-block-post-excerpt {
	color: rgba(255, 255, 255, 0.65);
	font-size: 16px;
	line-height: 1.55;
	max-width: 60ch;
	margin-top: 12px;
}

/* 404 mono lockup re-uses .v1__mono classes set in front-page styles. */
.site-main.is-404 { text-align: left; }
.site-main.is-404 .v1__mono {
	font-size: clamp(3rem, 12vw, 10rem);
	margin-bottom: 32px;
}
.site-main.is-404 p,
.site-main.is-404 .wp-block-paragraph {
	font-size: 18px;
	max-width: 50ch;
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-bottom: 32px;
	text-align: left;
	color: rgba(13, 13, 13, .75);
}
.site-main.is-404 .wp-block-buttons {
	margin-left: 0 !important;
	margin-right: auto !important;
	justify-content: flex-start;
}

/* Buttons inside core blocks should match our .btn--accent */
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 28px;
	border-radius: 100px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.01em;
	background: var(--accent);
	color: var(--ink);
	text-decoration: none;
	transition: background 0.2s;
}
.wp-block-button .wp-block-button__link:hover { background: #E8B830; }

/* ============================================================
   NAV TRIGGERS. Services dropdown + mobile hamburger
   ============================================================ */

.nav-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	letter-spacing: inherit;
}
.nav-trigger:hover { color: var(--white); }
.nav-trigger__caret {
	font-size: .7em;
	opacity: .55;
	transition: transform .2s, opacity .15s;
}
[data-mega-open="services"] .nav-trigger__caret {
	transform: rotate(180deg);
	opacity: 1;
}
[data-mega-open="services"] .nav-trigger {
	color: var(--flame);
}

/* Hamburger. Hidden on desktop, replaces nav links on mobile. */
.nav-hamburger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 50%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
	flex: 0 0 44px;
	border-color: rgba(13, 13, 13, .15);
	background: var(--white);
}
.nav-hamburger span {
	display: block;
	width: 18px;
	height: 1.5px;
	transition: transform .2s;
	background: var(--ink);
}
.nav-hamburger span:nth-child(2) { width: 12px; }

@media (max-width: 768px) {
	.v1__nav-links, .pv1__nav ul,
	.v1__nav .btn--accent, .pv1__nav .btn--accent {
		display: none;
	}
	.nav-hamburger { display: inline-flex; }
}

/* ============================================================
   MEGA MENU. Services dropdown panel
   Opened by .nav-trigger or .nav-hamburger; controlled by
   body[data-mega-open="services"]. Sibling of <header>, full-width.
   Mobile (<768px): full-screen panel with stacked pillars.
   ============================================================ */

.mega {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 90;
	background: var(--off);
	color: var(--ink);
	max-height: 100vh;
	overflow-y: auto;
	border-bottom: 1px solid rgba(13, 13, 13, .12);
	transform: translateY(-100%);
	opacity: 0;
	visibility: hidden;
	transition: transform .35s cubic-bezier(.4, .8, .2, 1), opacity .25s, visibility 0s linear .35s;
}
.mega[hidden] { display: none; }

body[data-mega-open="services"] .mega {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	transition: transform .35s cubic-bezier(.4, .8, .2, 1), opacity .25s, visibility 0s;
}

/* Dim everything behind the panel. */
body[data-mega-open="services"] .site-header,
body[data-mega-open="services"] main,
body[data-mega-open="services"] .site-footer {
	filter: brightness(.4);
	transition: filter .25s;
	pointer-events: none;
}

.mega__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px 18px;
}

.mega__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid rgba(13, 13, 13, .08);
}
.mega__brand .brand-logo__svg {
	height: 56px;
}
.mega__brand { color: var(--ink); }

.mega__close {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(13, 13, 13, .12);
	border-radius: 50%;
	background: var(--white);
	font-family: var(--serif);
	font-size: 24px;
	line-height: 1;
	color: var(--ink);
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
.mega__close:hover { border-color: var(--flame); color: var(--flame); }

.mega__search-row {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 24px 0 18px;
}
.mega__clue {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .55);
	flex: 0 0 auto;
}
.mega__search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--white);
	padding: 14px 22px;
	border: 1px solid rgba(13, 13, 13, .12);
	border-radius: 100px;
	font-size: 15px;
	transition: border-color .15s;
}
.mega__search:focus-within { border-color: var(--flame); }
.mega__search-icon {
	font-size: 20px;
	color: var(--flame);
	line-height: 1;
}
.mega__search input {
	flex: 1;
	background: none;
	border: 0;
	font: inherit;
	color: var(--ink);
	outline: none;
	font-family: var(--sans);
}
.mega__search input::placeholder { color: rgba(13, 13, 13, .5); }
.mega__search kbd {
	font-family: var(--mono);
	font-size: 10px;
	background: rgba(13, 13, 13, .06);
	padding: 3px 8px;
	border-radius: 4px;
	letter-spacing: .05em;
	color: rgba(13, 13, 13, .65);
}

.mega__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr) auto;
	gap: 0;
	border-top: 1px solid rgba(13, 13, 13, .1);
}
.mega__col {
	padding: 36px 32px 40px;
	border-right: 1px solid rgba(13, 13, 13, .1);
	position: relative;
}
.mega__col:last-child { border-right: none; }
.mega__col-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 6px;
}
.mega__col-head .pill {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .45);
}
.mega__col-head .pill--letter {
	color: var(--flame);
	font-family: var(--serif);
	font-style: italic;
	font-weight: 900;
	font-size: 18px;
	letter-spacing: 0;
}
.mega__col-h3 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: 48px;
	letter-spacing: -.03em;
	line-height: .95;
	margin: 0 0 4px;
	color: var(--ink);
}
.mega__promise {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 16px;
	color: rgba(13, 13, 13, .65);
	margin: 0 0 22px;
	line-height: 1.4;
}
.mega__illus {
	height: 140px;
	margin: 20px -32px 24px;
	overflow: hidden;
	border-top: 1px solid rgba(13, 13, 13, .06);
	border-bottom: 1px solid rgba(13, 13, 13, .06);
}
.mega__illus svg { width: 100%; height: 100%; display: block; }
.mega__services { list-style: none; padding: 0; margin: 0; }
.mega__services li {
	border-top: 1px solid rgba(13, 13, 13, .08);
}
.mega__services li:last-child { border-bottom: 1px solid rgba(13, 13, 13, .08); }
.mega__services a {
	padding: 11px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	color: var(--ink);
	text-decoration: none;
	transition: padding-left .15s, color .15s;
}
.mega__services a:hover {
	padding-left: 6px;
	color: var(--flame);
}
.mega__services small {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: .1em;
	color: rgba(13, 13, 13, .4);
	text-transform: uppercase;
	flex-shrink: 0;
	margin-left: 12px;
}

.mega__nav {
	padding: 36px 28px 40px;
	border-left: 1px solid rgba(13, 13, 13, .1);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 160px;
}
.mega__nav-heading {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .45);
	margin: 0 0 16px;
}
.mega__nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.mega__nav li {
	border-bottom: 1px solid rgba(13, 13, 13, .08);
}
.mega__nav li:first-child { border-top: 1px solid rgba(13, 13, 13, .08); }
.mega__nav a {
	display: block;
	padding: 12px 0;
	font-size: 14px;
	color: var(--ink);
	text-decoration: none;
	transition: padding-left .15s, color .15s;
}
.mega__nav a:hover {
	padding-left: 6px;
	color: var(--flame);
}
.mega__nav-method {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .55);
	text-decoration: none;
	margin-top: auto;
}
.mega__nav-method:hover { color: var(--flame); }

.mega__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 0;
	margin-top: 0;
	border-top: 1px solid rgba(13, 13, 13, .1);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .55);
}
.mega__foot a { color: var(--ink); text-decoration: none; }
.mega__foot a:hover { color: var(--flame); }
.mega__foot-links { display: flex; gap: 24px; }

.mega__mobile-cta { display: none; }

/* ---- Mobile / tablet. Full-screen panel ---- */
@media (max-width: 768px) {
	.mega {
		max-height: 100vh;
		height: 100vh;
		overflow-y: auto;
	}
	.mega__inner {
		padding: 0 22px 22px;
		min-height: 100%;
		display: flex;
		flex-direction: column;
	}
	.mega__bar { padding: 14px 0; }
	.mega__search-row {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 14px 0;
	}
	.mega__clue {
		text-align: center;
		font-size: 9px;
		order: 2;
	}
	.mega__search { padding: 12px 16px; font-size: 13px; }
	.mega__grid {
		grid-template-columns: 1fr;
		border-top: none;
	}
	.mega__col {
		padding: 22px 0 18px;
		border-right: none;
		border-top: 1px solid rgba(13, 13, 13, .08);
	}
		.mega__col-h3 { font-size: 34px; }
	.mega__promise { font-size: 13px; margin-bottom: 14px; }
	.mega__illus {
		/* viewBox is 400x140 (~2.86:1). Height bumped so the container ratio
		   matches the SVG and the icons don't squish horizontally. */
		height: 120px;
		margin: 8px -22px 14px;
	}
	.mega__services a { font-size: 13px; padding: 8px 0; }
	.mega__services small { font-size: 8px; }
	.mega__mobile-cta {
		display: block;
		margin: 14px 0;
		background: var(--flame);
		color: var(--white);
		padding: 16px;
		border-radius: 14px;
		text-align: center;
		font-family: var(--grotesk);
		font-weight: 700;
		font-size: 13px;
		letter-spacing: .06em;
		text-transform: uppercase;
		text-decoration: none;
	}
	.mega__mobile-cta:hover { background: #d35817; }
	.mega__nav {
		padding: 22px 0 18px;
		border-left: none;
		border-top: 1px solid rgba(13, 13, 13, .08);
		min-width: 0;
	}
		.mega__nav a { font-size: 13px; padding: 8px 0; }
	.mega__nav-method { margin-top: 16px; }
	.mega__foot {
		flex-direction: column;
		gap: 8px;
		text-align: center;
		font-size: 9px;
		padding: 14px 0;
	}
	.mega__foot-links { gap: 16px; }
}

/* ============================================================
   PILLAR PAGES. Visibility / Clarity / Trust
   ONE template, three pages. `.pillar.pV / .pC / .pT` swap --p-tone.
   Every flame element on the page is driven by --p-tone.
   These pages have their OWN focused chrome (page-bar + TOC). They
   deliberately don't use the regular pv1 site header/footer.
   ============================================================ */

.pillar {
	background: var(--off);
	color: var(--ink);
	font-family: var(--sans);
	--p-tone: var(--flame); /* default; per-pillar classes override */
}
.pillar.pV { --p-tone: #F06522; }
.pillar.pC { --p-tone: #44C6EF; }
.pillar.pT { --p-tone: #2AB473; }

/* HERO */
.pillar-hero {
	position: relative;
	min-height: 88vh;
	padding: 48px 60px 60px;
	display: grid;
	grid-template-rows: 1fr auto;
	overflow: hidden;
	border-bottom: 1px solid rgba(13, 13, 13, .1);
}
.pillar-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.pillar-hero-bg svg { width: 100%; height: 100%; display: block; }
.pillar-hero-meta {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .55);
}
.pillar-hero-meta .ticker {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}
.pillar-hero-meta .ticker .hi { color: var(--p-tone); font-weight: 700; }
.pillar-hero-word {
	position: relative;
	z-index: 2;
	align-self: end;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(7rem, 22vw, 24rem);
	line-height: .82;
	letter-spacing: -.06em;
	color: var(--ink);
	margin: 0;
}
.pillar-hero-word .dot { font-style: normal; color: var(--p-tone); }
.pillar-hero-foot {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	padding-top: 48px;
	border-top: 1px solid rgba(13, 13, 13, .18);
	max-width: 1280px;
	margin: 48px auto 0;
	width: 100%;
}
.pillar-hero-foot .promise {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.6rem, 2.6vw, 2rem);
	line-height: 1.18;
	color: var(--ink);
	max-width: 24ch;
}
.pillar-hero-foot .promise i { font-style: normal; color: var(--p-tone); font-weight: 900; }
.pillar-hero-foot .lede {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(13, 13, 13, .7);
	max-width: 48ch;
	align-self: end;
}

/* MANIFESTO. Pinned-scroll: tall track, sticky stage, crossfading panels. */
.pillar-manifesto {
	position: relative;
	height: calc(var(--pm-count, 3) * 100vh);
	background: var(--ink);
}
.pm-stage {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}
.pm-panel {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease;
}
.pm-panel.is-active { opacity: 1; }
.pm-img {
	position: absolute;
	inset: 0;
	margin: 0;
}
.pm-img img { width: 100%; height: 100%; object-fit: cover; }
.pm-img.is-blank { background: linear-gradient(135deg, var(--p-tone), var(--ink)); }
.pm-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(13, 13, 13, .82) 0%, rgba(13, 13, 13, .5) 45%, rgba(13, 13, 13, .05) 100%);
}
.pm-stmt {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	margin: 0;
	padding: 0 8vw;
	max-width: 38ch;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(2rem, 4.5vw, 4rem);
	line-height: 1.18;
	letter-spacing: -.01em;
	color: var(--white);
	text-wrap: pretty;
}
.pm-stmt i { font-style: italic; color: var(--p-tone); font-weight: 400; }
.pm-progress {
	position: absolute;
	right: 32px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pm-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .3);
	transition: background .3s ease;
}
.pm-dot.is-active { background: var(--p-tone); }

/* Stacked fallback on mobile only: no pin, no crossfade. (Pinned mode runs for
   everyone on larger screens, regardless of prefers-reduced-motion.) */
@media (max-width: 767px) {
	.pillar-manifesto { height: auto; }
	.pm-stage { position: static; height: auto; }
	.pm-panel { position: relative; opacity: 1; min-height: 78vh; }
	.pm-stmt { padding: 0 28px; font-size: clamp(1.8rem, 8vw, 2.6rem); max-width: none; }
	.pm-progress { display: none; }
}

/* SERVICES */
.pillar-services {
	padding: 120px 60px;
	background: var(--off);
	border-bottom: 1px solid rgba(13, 13, 13, .1);
}
.pillar-services-head {
	max-width: 1280px;
	margin: 0 auto 48px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	border-bottom: 1px solid rgba(13, 13, 13, .18);
	padding-bottom: 20px;
	gap: 24px;
}
.pillar-services-head h2 {
	font-family: var(--sans);
	font-weight: 800;
	font-size: clamp(2.5rem, 5vw, 4rem);
	letter-spacing: -.025em;
	line-height: .95;
	text-transform: uppercase;
}
.pillar-services-head h2 i { font-style: normal; font-weight: 800; color: var(--p-tone); }
.pillar-services-head .count { display: none; }
.pillar-services-list { max-width: 1280px; margin: 0 auto; }

.pillar-srow {
	display: grid;
	grid-template-columns: 1.2fr 2fr 60px;
	gap: 32px;
	padding: 32px 0;
	border-bottom: 1px solid rgba(13, 13, 13, .12);
	align-items: baseline;
	transition: background .2s, padding .2s;
	position: relative;
	color: inherit;
	text-decoration: none;
}
.pillar-srow:hover { background: var(--white); padding-left: 20px; padding-right: 20px; }
.pillar-srow .snum { display: none; }
.pillar-srow h3 {
	font-family: var(--sans);
	font-weight: 800;
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	letter-spacing: -.02em;
	line-height: 1;
}
.pillar-srow h3 i { font-style: normal; font-weight: 800; color: var(--p-tone); }
.pillar-srow p {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.55;
	color: rgba(13, 13, 13, .7);
	max-width: 42ch;
}
.pillar-srow .stag { display: none; }
.pillar-srow .stag.r { display: none; }
.pillar-srow .arrow {
	font-family: var(--serif);
	font-size: 28px;
	color: rgba(13, 13, 13, .3);
	align-self: center;
	justify-self: end;
	transition: transform .2s, color .2s;
}
.pillar-srow:hover .arrow { color: var(--p-tone); transform: translateX(8px); }

/* PROCESS. Dark band */
.pillar-process {
	padding: 120px 60px;
	background: var(--ink);
	color: var(--white);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	position: relative;
	overflow: hidden;
}
.pillar-process::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1px);
	background-size: 14px 14px;
	-webkit-mask: radial-gradient(ellipse 60% 60% at 80% 30%, #000 30%, transparent 80%);
	mask: radial-gradient(ellipse 60% 60% at 80% 30%, #000 30%, transparent 80%);
	pointer-events: none;
}
.pillar-process-inner { max-width: 1280px; margin: 0 auto; position: relative; }
.pillar-process-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255, 255, 255, .18);
	padding-bottom: 20px;
	margin-bottom: 60px;
	gap: 24px;
}
.pillar-process-head h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4rem);
	letter-spacing: -.025em;
	line-height: .95;
}
.pillar-process-head h2 i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.pillar-process-head .lede {
	font-family: var(--serif);
	font-style: italic;
	font-size: 16px;
	color: rgba(255, 255, 255, .65);
	max-width: 36ch;
	text-align: right;
}
.pillar-process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}
.pillar-pstep {
	padding: 32px 28px 32px 0;
	border-right: 1px solid rgba(255, 255, 255, .12);
}
.pillar-pstep:last-child { border-right: none; padding-right: 0; }
.pillar-pstep .step {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	color: var(--p-tone);
	font-weight: 700;
	margin-bottom: 12px;
	text-transform: uppercase;
}
.pillar-pstep h4 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(1.4rem, 2.2vw, 1.875rem);
	letter-spacing: -.02em;
	line-height: 1;
	margin-bottom: 14px;
}
.pillar-pstep h4 i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.pillar-pstep p {
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .65);
}
.pillar-pstep .week {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .4);
	text-transform: uppercase;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ENGAGEMENT. Pricing */
.pillar-engagement {
	padding: 120px 60px;
	background: var(--off);
	border-bottom: 1px solid rgba(13, 13, 13, .1);
}
.pillar-engagement-inner { max-width: 1280px; margin: 0 auto; }
.pillar-engagement-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	border-bottom: 1px solid rgba(13, 13, 13, .18);
	padding-bottom: 20px;
	margin-bottom: 48px;
	gap: 24px;
}
.pillar-engagement-head h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4rem);
	letter-spacing: -.025em;
	line-height: .95;
}
.pillar-engagement-head h2 i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.pillar-engagement-head .note {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .55);
}
.pillar-engagement-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 24px;
}
.pillar-ecard {
	background: var(--white);
	border: 1px solid rgba(13, 13, 13, .1);
	border-radius: 18px;
	padding: 36px 32px 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
	overflow: hidden;
}
.pillar-ecard.featured {
	background: var(--ink);
	color: var(--white);
	border-color: var(--ink);
}
.pillar-ecard.featured::before {
	content: 'Most chosen';
	position: absolute;
	top: 24px;
	right: 24px;
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--p-tone);
	font-weight: 700;
}
.pillar-ecard .pkind {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--p-tone);
	font-weight: 700;
}
.pillar-ecard h4 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	letter-spacing: -.02em;
	line-height: 1;
}
.pillar-ecard h4 i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.pillar-ecard .ppromise {
	font-family: var(--serif);
	font-style: italic;
	font-size: 16px;
	color: rgba(13, 13, 13, .65);
	line-height: 1.4;
	margin-bottom: 8px;
}
.pillar-ecard.featured .ppromise { color: rgba(255, 255, 255, .7); }
.pillar-ecard .pprice {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2rem, 3vw, 3rem);
	letter-spacing: -.025em;
	line-height: 1;
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}
.pillar-ecard .pprice small {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .45);
	font-weight: 700;
}
.pillar-ecard.featured .pprice small { color: rgba(255, 255, 255, .5); }
.pillar-ecard ul {
	list-style: none;
	padding: 18px 0 0;
	margin: 6px 0 0;
	border-top: 1px solid rgba(13, 13, 13, .1);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.pillar-ecard.featured ul { border-color: rgba(255, 255, 255, .15); }
.pillar-ecard li {
	font-size: 14px;
	line-height: 1.45;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.pillar-ecard li::before {
	content: '';
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--p-tone);
	margin-top: 8px;
}
.pillar-ecard.featured li { color: rgba(255, 255, 255, .85); }
.pillar-ecard .pcta {
	margin-top: auto;
	padding-top: 24px;
	font-family: var(--grotesk);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--p-tone);
	text-decoration: none;
}
.pillar-ecard.featured .pcta { color: var(--white); }

/* JOURNAL */
.pillar-journal {
	padding: 120px 60px;
	background: var(--white);
	border-bottom: 1px solid rgba(13, 13, 13, .1);
}
.pillar-journal-inner { max-width: 1280px; margin: 0 auto; }
.pillar-journal-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	border-bottom: 1px solid rgba(13, 13, 13, .18);
	padding-bottom: 20px;
	margin-bottom: 48px;
	gap: 24px;
}
.pillar-journal-head h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4rem);
	letter-spacing: -.025em;
	line-height: .95;
}
.pillar-journal-head h2 i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.pillar-journal-head .all {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
}
.pillar-journal-head .all:hover { color: var(--p-tone); }
.pillar-journal-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 32px;
}
.pillar-jcard {
	display: flex;
	flex-direction: column;
	gap: 14px;
	color: inherit;
	text-decoration: none;
}
/* Journal card thumb. Featured image with the gradient + lined overlay
   treatment from the blog archive. Cards rotate through the brand spectrum
   via :nth-child so each card reads in a different hue, regardless of which
   pillar page they're on. The pillar's own --p-tone still drives the H3
   italic accent + meta cat label below. */
.pillar-jcard .jthumb {
	aspect-ratio: 4/3;
	border-radius: 8px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	position: relative;
}
.pillar-jcard .jthumb::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--grad, linear-gradient(135deg, var(--cyan), var(--green)));
	mix-blend-mode: color;
	z-index: 1;
	pointer-events: none;
}
.pillar-jcard .jthumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px);
	mix-blend-mode: multiply;
	z-index: 2;
	pointer-events: none;
}
/* Spectrum rotation. Same 6n cycle as .bla__post on the blog archive so
   the visual language is consistent across journal surfaces. */
.pillar-jcard:nth-child(6n+1) .jthumb { background: linear-gradient(135deg, var(--cyan),  var(--green));  --grad: linear-gradient(135deg, var(--cyan),  var(--green)); }
.pillar-jcard:nth-child(6n+2) .jthumb { background: linear-gradient(135deg, var(--amber), var(--flame));  --grad: linear-gradient(135deg, var(--amber), var(--flame)); }
.pillar-jcard:nth-child(6n+3) .jthumb { background: linear-gradient(135deg, var(--lime),  var(--yellow)); --grad: linear-gradient(135deg, var(--lime),  var(--yellow)); }
.pillar-jcard:nth-child(6n+4) .jthumb { background: linear-gradient(135deg, var(--tan),   var(--flame));  --grad: linear-gradient(135deg, var(--tan),   var(--flame)); }
.pillar-jcard:nth-child(6n+5) .jthumb { background: linear-gradient(135deg, var(--green), var(--cyan));   --grad: linear-gradient(135deg, var(--green), var(--cyan)); }
.pillar-jcard:nth-child(6n+6) .jthumb { background: linear-gradient(135deg, var(--flame), var(--amber));  --grad: linear-gradient(135deg, var(--flame), var(--amber)); }
/* When a featured image is set, the inline background-image takes over the
   gradient on .jthumb itself, but the ::before still uses --grad so the
   image gets blended with the same brand-coloured layer. */
.pillar-jcard .jmeta {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .5);
	display: flex;
	gap: 14px;
}
.pillar-jcard .jmeta b { color: var(--p-tone); font-weight: 700; }
.pillar-jcard h3 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: 24px;
	letter-spacing: -.02em;
	line-height: 1.1;
}
.pillar-jcard h3 i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.pillar-jcard p {
	font-size: 14px;
	line-height: 1.55;
	color: rgba(13, 13, 13, .65);
}
.pillar-jcard:hover h3 { color: var(--p-tone); }

/* CROSS-LINKS */
.pillar-cross {
	padding: 60px;
	background: var(--off);
	border-bottom: 1px solid rgba(13, 13, 13, .1);
}
.pillar-cross-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.pillar-clink {
	background: var(--white);
	border: 1px solid rgba(13, 13, 13, .1);
	border-radius: 18px;
	padding: 48px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: center;
	transition: background .2s, color .2s;
	color: inherit;
	text-decoration: none;
	--clink-tone: var(--p-tone);
}
.pillar-clink:hover { background: var(--ink); color: var(--white); }
.pillar-clink .cmark {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 900;
	font-size: 80px;
	letter-spacing: -.04em;
	line-height: .85;
	color: var(--clink-tone);
}
.pillar-clink .cmark-dot { font-style: normal; }
.pillar-clink .ctxt .ceyebrow {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .5);
	margin-bottom: 6px;
}
.pillar-clink:hover .ctxt .ceyebrow { color: rgba(255, 255, 255, .6); }
.pillar-clink .ctxt h3 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: 32px;
	letter-spacing: -.02em;
	line-height: 1;
}
.pillar-clink .ctxt h3 i { font-style: italic; font-weight: 400; color: var(--clink-tone); }
.pillar-clink .ctxt .ctag {
	margin-top: 4px;
	font-size: 14px;
	color: rgba(13, 13, 13, .6);
}
.pillar-clink:hover .ctxt .ctag { color: rgba(255, 255, 255, .7); }
.pillar-clink .carr {
	font-family: var(--serif);
	font-size: 32px;
	color: rgba(13, 13, 13, .3);
	transition: transform .2s, color .2s;
}
.pillar-clink:hover .carr {
	color: var(--clink-tone);
	transform: translateX(8px);
}

/* CTA strip. Final */
.pillar-cta {
	padding: 160px 60px;
	background: var(--ink);
	color: var(--white);
	position: relative;
	overflow: hidden;
}
.pillar-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(240, 101, 34, .4) 1.6px, transparent 1.6px);
	background-size: 18px 18px;
	-webkit-mask: radial-gradient(ellipse 50% 70% at 30% 50%, #000 0%, transparent 70%);
	mask: radial-gradient(ellipse 50% 70% at 30% 50%, #000 0%, transparent 70%);
	pointer-events: none;
}
.pillar-cta-inner {
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 60px;
	align-items: end;
}
.pillar-cta h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(3.5rem, 8vw, 6rem);
	line-height: .92;
	letter-spacing: -.035em;
	max-width: 14ch;
}
.pillar-cta h2 i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.pillar-cta .cact {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-end;
}
.pillar-cta .cact a {
	font-family: var(--grotesk);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 18px 32px;
	border-radius: 100px;
	text-decoration: none;
	transition: filter .15s;
}
.pillar-cta .cact a.primary { background: var(--p-tone); color: var(--white); }
.pillar-cta .cact a.primary:hover { filter: brightness(.92); }
.pillar-cta .cact a.secondary {
	border: 1px solid rgba(255, 255, 255, .3);
	color: var(--white);
}
.pillar-cta .cact a.secondary:hover { border-color: var(--white); }
.pillar-cta .cact small {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
	margin-top: 8px;
}

/* Pillar pages override the global theme: they're built for light-only and
   the "dark" bits (process, CTA) are intentional inverted bands. */
.pillar { /* default state. Already styled */ }

/* Responsive */
@media (max-width: 1024px) {
	.pillar-hero { padding: 32px; }
	.pillar-hero-foot { grid-template-columns: 1fr; gap: 28px; }
}
/* Phone. Reset hero proportions so "Visibility/Clarity/Trust" fits on screen
   and the section stops monopolising 88vh. The decorative full-bleed SVG
   (magnifying glass / italic Aa / growth curve) is hidden because its focal
   elements scale up to cover the text on portrait mobile. */
/* Compact pillar icon. Only visible on mobile (sits behind the heading) */
.pillar-hero-icon { display: none; }

@media (max-width: 720px) {
	.pillar-hero { min-height: auto; padding: 28px 22px 36px; }
	.pillar-hero-bg { display: none; }
	.pillar-hero-icon {
		display: block;
		position: absolute;
		top: 18px;
		right: 22px;
		width: 20vw;
		max-width: 90px;
		z-index: 0;
		pointer-events: none;
	}
	.pillar-hero-icon svg { width: 100%; height: auto; display: block; }
	/* Lift everything else above the icon so the heading reads first. */
	.pillar-hero-meta,
	.pillar-hero-word,
	.pillar-hero-foot { position: relative; z-index: 1; }
	/* Stop the meta row wrapping into the icon's column on the right , 
	   ensures the meta lines all end before the icon's right edge starts. */
	.pillar-hero-meta { padding-right: 24vw; }
	.pillar-hero-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		margin-bottom: 28px;
		font-size: 10px;
	}
	.pillar-hero-meta .ticker { gap: 16px; }
	.pillar-hero-word {
		font-size: clamp(4rem, 20vw, 6.5rem);
		letter-spacing: -.04em;
		line-height: .85;
	}
	.pillar-hero-foot {
		margin-top: 28px;
		padding-top: 20px;
		gap: 18px;
	}
	.pillar-hero-foot .promise { font-size: clamp(1.2rem, 5.5vw, 1.6rem); max-width: none; }
	.pillar-hero-foot .lede { font-size: 14px; max-width: none; }

	/* Card grids collapse to a single column once the viewport drops below
	   tablet. Without this, the engagement (3-col), cross-link (2-col) and
	   CTA (2-col) cards stay multi-column on small phones and overflow the
	   viewport. Section padding tightens at the same point to recover space. */
	.pillar-services, .pillar-process, .pillar-engagement, .pillar-journal { padding: 80px 32px; }
	.pillar-engagement-grid { grid-template-columns: 1fr; }
	.pillar-cross { padding: 32px; }
	.pillar-cross-inner { grid-template-columns: 1fr; }
	.pillar-clink { padding: 28px; gap: 18px; }
	.pillar-cta { padding: 96px 32px; }
	.pillar-cta-inner { grid-template-columns: 1fr; gap: 32px; }
	.pillar-cta .cact { align-items: flex-start; }
}
@media (max-width: 420px) {
	.pillar-hero-word { font-size: clamp(3.2rem, 17vw, 5rem); }
	.pillar-srow { grid-template-columns: 1fr 1fr 32px; gap: 16px; }
	.pillar-srow p { grid-column: 1 / span 2; }
	.pillar-process-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.pillar-pstep { border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); padding: 24px 0; }
	.pillar-journal-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 640px) {
	.pillar-services-head, .pillar-process-head, .pillar-engagement-head, .pillar-journal-head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.pillar-process-head .lede { text-align: left; }
	.pillar-srow { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
	.pillar-srow p { grid-column: 1; }
	.pillar-srow .arrow { display: none; }
	.pillar-process-grid { grid-template-columns: 1fr; }
	.pillar-journal-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CN. Contact page
   ============================================================ */

/* ---- Booker section (Google Calendar booking iframe in a glass card) ---- */
/* Booker section. Cream + halftone-line texture (mirrors the Clarity hero
   pattern). Always light regardless of global theme so the embedded Google
   booking iframe (which renders light) reads as part of the same page. */
.cn__book {
	padding: 80px 0 40px;
	border-bottom: 1px solid rgba(13, 13, 13, .1);
	position: relative;
	background-color: var(--off);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'><line x1='0' y1='3' x2='6' y2='3' stroke='%230D0D0D' stroke-opacity='.18' stroke-width='.7'/></svg>");
	background-repeat: repeat;
}
.cn__book::before {
	content: '';
	position: absolute;
	top: -10%;
	left: 50%;
	transform: translateX(-50%);
	width: 70%;
	height: 60%;
	background: radial-gradient(ellipse, rgba(240, 101, 34, .12), transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.cn__book .container { position: relative; z-index: 1; }

.cn__book-head {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}
.cn__book-head h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1;
	letter-spacing: -.03em;
	margin-bottom: 18px;
	color: var(--ink);
}
.cn__book-head h2 i { font-style: italic; font-weight: 400; color: var(--flame); }
.cn__book-head p {
	font-size: 17px;
	line-height: 1.6;
	color: rgba(13, 13, 13, .7);
	max-width: 56ch;
	margin: 0 auto;
}

/* No card around the iframe. Let the Google embed sit directly on the
   cream textured field. The iframe brings its own visual styling. */
.cn__booker {
	position: relative;
	min-height: var(--booker-min-h, 720px);
}
.cn__booker-iframe {
	display: block;
	width: 100%;
	height: var(--booker-min-h, 720px);
	border: 0;
	background: transparent;
}

.cn__booker-fallback {
	/* Eyebrows purged 29 Jul 2026: was mono 11px uppercase. */
	margin: 16px auto 0;
	text-align: center;
	font-family: var(--font);
	font-size: 13.5px;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(13, 13, 13, .55);
}
.cn__booker-fallback a {
	font-family: var(--font);
	font-size: 13.5px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--flame);
	text-decoration: none;
	border-bottom: 1px solid rgba(240, 101, 34, .35);
	transition: color .15s, border-color .15s;
}
.cn__booker-fallback a:hover { color: var(--ink); border-bottom-color: var(--ink); }

@media (max-width: 640px) {
	.cn__book { padding: 56px 0 24px; }
	.cn__book-head { margin-bottom: 28px; }
	/* Tall enough on mobile that the Google booking UI fits without
	   producing its own inner scrollbar. The page scroll handles the
	   overflow now. */
	.cn__booker { border-radius: 0; min-height: 920px; }
	.cn__booker-iframe { height: 920px; }
}


.cn__main {
	padding: 100px 0 140px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cn__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 80px;
	align-items: start;
}
.cn__form-head h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4rem);
	letter-spacing: -.03em;
	line-height: 1;
	margin-bottom: 16px;
	color: var(--ink);
}
.cn__form-head h2 i { font-style: italic; font-weight: 400; }
.cn__form-head p {
	font-size: 17px;
	line-height: 1.6;
	margin-bottom: 36px;
	max-width: 50ch;
	color: rgba(13, 13, 13, .7);
}

.cn__status {
	padding: 20px 24px;
	border-radius: 10px;
	margin-bottom: 28px;
	border: 1px solid rgba(255, 255, 255, .1);
}
.cn__status--ok {
	background: rgba(42, 180, 115, .1);
	border-color: rgba(42, 180, 115, .3);
}
.cn__status--error {
	background: rgba(240, 101, 34, .12);
	border-color: rgba(240, 101, 34, .35);
}
.cn__status h3 {
	font-family: var(--grotesk);
	font-weight: 800;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: -.01em;
	margin-bottom: 6px;
}
.cn__status p { font-size: 14px; color: rgba(13, 13, 13, .8); }

.cn__form { display: flex; flex-direction: column; gap: 20px; }
.cn__honey {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}
.cn__field { display: flex; flex-direction: column; gap: 8px; }
.cn__field label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .55);
}
.cn__field label span {
	margin-left: 2px;
	color: var(--flame);
}
.cn__field input,
.cn__field textarea {
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	padding: 14px 18px;
	font-family: var(--sans);
	font-size: 15px;
	transition: border-color .15s, background .15s;
	width: 100%;
	background: var(--white);
	border-color: rgba(13, 13, 13, .12);
	color: var(--ink);
}
.cn__field input:focus,
.cn__field textarea:focus {
	outline: none;
	border-color: var(--flame);
	background: var(--white);
}
.cn__field textarea {
	resize: vertical;
	min-height: 120px;
	line-height: 1.55;
}

.cn__submit {
	align-self: flex-start;
	margin-top: 8px;
	cursor: pointer;
	border: 0;
}
.cn__privacy {
	font-size: 12px;
	line-height: 1.5;
	margin-top: 8px;
	max-width: 56ch;
	color: rgba(13, 13, 13, .55);
}
.cn__privacy a {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--flame);
}

/* ---- Gravity Forms. Mirror the bespoke .cn__field look exactly ----
   Scoped to .cn__form--gf so we don't clobber any other GF instances elsewhere
   on the site. Override the gravity-theme defaults aggressively so the form
   reads as native to the page, not as a third-party embed. */
.cn__form--gf .gform_wrapper { margin: 0; }
.cn__form--gf .gform_heading { display: none; }
.cn__form--gf form { margin: 0; }
.cn__form--gf .gform-body { margin: 0; padding: 0; }

.cn__form--gf .gform_fields {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	grid-row-gap: 0 !important;
	grid-column-gap: 0 !important;
	list-style: none;
	padding: 0;
	margin: 0;
}
.cn__form--gf .gfield {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 !important;
	margin: 0 !important;
	border: 0;
	width: 100% !important;
	max-width: none !important;
	grid-column: 1 / -1 !important;
}
.cn__form--gf .gfield_label,
.cn__form--gf .gform-field-label {
	/* Eyebrows purged 29 Jul 2026: was mono 11px uppercase. */
	font-family: var(--font);
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 600;
	margin: 0 0 8px;
	padding: 0;
	color: var(--ink);
}
.cn__form--gf .gfield_required { display: none; }
.cn__form--gf .ginput_container { margin-top: 0; }
.cn__form--gf .ginput_container input[type="text"],
.cn__form--gf .ginput_container input[type="email"],
.cn__form--gf .ginput_container textarea {
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	padding: 14px 18px;
	font-family: var(--sans);
	font-size: 15px;
	transition: border-color .15s, background .15s;
	width: 100%;
	box-shadow: none;
	background: var(--white);
	border-color: rgba(13, 13, 13, .12);
	color: var(--ink);
}
.cn__form--gf .ginput_container input:focus,
.cn__form--gf .ginput_container textarea:focus {
	outline: none;
	box-shadow: none;
	border-color: var(--flame);
	background: var(--white);
}
.cn__form--gf .ginput_container textarea {
	resize: vertical;
	min-height: 120px;
	line-height: 1.55;
}

/* Turnstile captcha field */
.cn__form--gf .gfield--type-captcha {
	padding-top: 8px;
}
.cn__form--gf .gfield--type-captcha .gfield_label { display: none; }
.cn__form--gf .gfield--type-captcha .ginput_container {
	display: flex;
	justify-content: center;
}
.cn__form--gf .gfield--type-captcha iframe {
	border-radius: 8px;
	color-scheme: dark;
}

.cn__form--gf .gform_footer {
	padding: 0 !important;
	margin: 8px 0 0 !important;
	border: 0;
}
/* Force-pill the GF submit button to brand styling regardless of GF's own
   gravity-theme inline rules. Specificity bumped + !important so we win. */
.cn__form--gf .gform_wrapper .gform_footer .gform_button,
.cn__form--gf .gform_wrapper input[type="submit"].gform_button,
.cn__form--gf .gform_wrapper.gravity-theme .gform_footer input[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 20px 36px !important;
	border-radius: 100px !important;
	font-family: var(--sans) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	letter-spacing: .01em !important;
	background: var(--accent) !important;
	color: var(--ink) !important;
	border: 0 !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	width: auto !important;
	min-height: 0 !important;
	transition: background .2s !important;
}
.cn__form--gf .gform_wrapper .gform_button:hover,
.cn__form--gf .gform_wrapper input[type="submit"].gform_button:hover {
	background: #E8B830 !important;
}

/* Honeypot. Keep visually hidden (GF outputs its own honeypot wrapper). */
.cn__form--gf .gfield--type-honeypot,
.cn__form--gf .gform_validation_container {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* Validation. Match .cn__status--error tone */
.cn__form--gf .gform_validation_errors {
	background: rgba(240, 101, 34, .12);
	border: 1px solid rgba(240, 101, 34, .35);
	border-radius: 10px;
	padding: 18px 22px;
	margin: 0 0 22px;
	color: var(--ink);
}
.cn__form--gf .gform_validation_errors > h2 {
	font-family: var(--grotesk);
	font-weight: 800;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: -.01em;
	margin: 0 0 4px;
	color: inherit;
}
.cn__form--gf .gfield_validation_message,
.cn__form--gf .validation_message {
	color: var(--flame);
	font-size: 12px;
	margin-top: 4px;
	background: transparent;
	padding: 0;
	border: 0;
}
.cn__form--gf .gfield_error .ginput_container input,
.cn__form--gf .gfield_error .ginput_container textarea {
	border-color: var(--flame);
}

/* AJAX spinner that GF injects next to the submit button */
.cn__form--gf .gform_ajax_spinner { margin-left: 12px; vertical-align: middle; }

/* Confirmation message. The success div is rendered with our own
   .cn__status classes inside the GF confirmation, so no extra styles needed. */

.cn__aside {
	padding: 36px 32px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	background: #0f1115;
	color: var(--white); /* dark-baked aside. Explicit white so the ink base colour does not bleed in */
	position: sticky;
	top: 24px;
}
.cn__aside-h3 {
	/* Eyebrows purged 29 Jul 2026: was Archivo 800 uppercase. */
	font-family: var(--font);
	font-weight: 700;
	font-size: 22px;
	text-transform: none;
	letter-spacing: -.014em;
	color: var(--cyan);
	margin-bottom: 24px;
}
.cn__channels {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0 0 28px;
}
.cn__channels li {
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	padding-bottom: 18px;
}
.cn__channels li:last-child { border-bottom: none; padding-bottom: 0; }
.cn__channel-link {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -.015em;
	color: var(--white);
	text-decoration: none;
	display: block;
	margin-bottom: 4px;
	transition: color .15s;
}
.cn__channel-link:hover { color: var(--accent); }
.cn__channels small {
	/* No mono outside code (tokens v3), and 13px is the floor. */
	font-family: var(--font);
	font-weight: 350;
	font-size: 13px;
	letter-spacing: 0;
	color: rgba(255, 255, 255, .72);
	line-height: 1.5;
}
.cn__hours {
	margin: 0 0 24px;
	padding: 20px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .08);
}
.cn__hours h4 {
	/* Eyebrows purged 29 Jul 2026: was mono 11px uppercase. */
	font-family: var(--font);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0;
	color: rgba(255, 255, 255, .8);
	text-transform: none;
	margin-bottom: 12px;
}
.cn__hours dl {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 16px;
	margin: 0;
	font-size: 13px;
}
.cn__hours dt {
	color: rgba(255, 255, 255, .8);
}
.cn__hours dd {
	/* No mono outside code (tokens v3). Tabular numerals keep the times aligned
	   without borrowing a typewriter. */
	margin: 0;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .72);
	letter-spacing: 0;
	white-space: nowrap;
}

.cn__aside-foot {
	font-size: 13px;
	color: rgba(255, 255, 255, .65);
	line-height: 1.55;
}
.cn__aside-foot a { text-decoration: underline; text-underline-offset: 3px; color: var(--flame); }
.cn__aside-foot a:hover { color: var(--accent); }

.cn__main {
	border-bottom-color: rgba(13, 13, 13, .1);
}

/* Responsive */
@media (max-width: 1024px) {
	.cn__grid { grid-template-columns: 1fr; gap: 48px; }
	.cn__aside { position: static; }
}
@media (max-width: 640px) {
	.cn__main { padding: 64px 0 96px; }
	.cn__aside { padding: 28px 22px; }
	.cn__channel-link { font-size: 17px; }
}

/* ============================================================
   Nav + section colour rules whose base selectors are grouped
   differently from the rules they refine. (Residue of the light
   flatten, 21 Jul 2026: the theme is light-only, these are now
   plain base rules and must stay AFTER the rules they override.)
   ============================================================ */

/* ---- Nav (v1 + pv1) ---- */
.v1__nav, .pv1__nav {
	border-bottom-color: rgba(13, 13, 13, .1);
}
.v1__logo, .pv1__brand {
	color: var(--ink);
}
.v1__logo-slash, .pv1__brand .sl {
	color: var(--flame);
}
.v1__nav-links, .pv1__nav ul {
	color: rgba(13, 13, 13, .7);
}
.v1__nav-links a:hover, .pv1__nav ul a:hover, .v1__nav-links .nav-trigger:hover, .pv1__nav ul .nav-trigger:hover {
	color: var(--flame);
}

/* ---- Sub-page hero (pv1) ---- */
.pv1__deck {
	color: rgba(13, 13, 13, .75);
	border-left-color: var(--flame);
}

/* ---- Pillars pinwheel: ink connector lines / pivot dots on the light field ---- */
.v1__pinwheel svg.five-svg line { stroke: rgba(13, 13, 13, .35); }
.v1__pinwheel svg.five-svg circle[fill="#fff"] {
	fill: var(--ink);
	stroke: rgba(13, 13, 13, .45);
}
/* Mobile colour cards keep their own ink text on yellow/strategy. */
@media (max-width: 720px) {
	.v1__callout.cb-strategy .ttl, .v1__callout.cb-yellow .ttl { color: #0D0D0D; }
	.v1__callout.cb-strategy .stat strong, .v1__callout.cb-yellow .stat strong { color: #0D0D0D; }
}

/* ---- OSOF section: dark-baked inverted anchor against the off-white field.
   .v1__osof has a dark gradient bg; its bottom border stays white-on-dark. ---- */
.v1__osof {
	border-bottom-color: rgba(255, 255, 255, .08);
}

/* ---- OSOF page: OSP loop section is dark-baked (gradient → ink). Force
   white text so the "And then we" prefix doesn't inherit ink and disappear. ---- */
.osp__loop { color: var(--white); }

/* ---- Reduced motion (targeted) ---- */
@media (prefers-reduced-motion: reduce) {
	.intro { display: none !important; }
	.pb-spectrum { animation: none !important; }
	.v1__hero .l2, .v1__hero .l3 { animation: none !important; }
	html { scroll-behavior: auto; }
}

/* ============================================================
   INTRO OVERLAY. Spectrum stripes + Proud. wordmark on first paint
   Ported from design/Proud Brands.html. Plays once per session
   (gate set in inline JS at body open). Respects prefers-reduced-motion.
   ============================================================ */
.intro {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	pointer-events: all;
}
.intro.done {
	pointer-events: none;
	opacity: 0;
	transition: opacity .8s .2s ease;
}
.intro__stripes { position: absolute; inset: 0; display: flex; }
.intro__stripes span {
	flex: 1;
	transform: translateY(100%);
	animation: pb-stripe-up 1.1s cubic-bezier(.7, 0, .3, 1) forwards;
}
.intro__stripes span:nth-child(1) { animation-delay: 0s;   background: var(--green); }
.intro__stripes span:nth-child(2) { animation-delay: .06s; background: var(--lime); }
.intro__stripes span:nth-child(3) { animation-delay: .12s; background: var(--yellow); }
.intro__stripes span:nth-child(4) { animation-delay: .18s; background: var(--amber); }
.intro__stripes span:nth-child(5) { animation-delay: .24s; background: var(--flame); }
.intro__stripes span:nth-child(6) { animation-delay: .3s;  background: var(--cyan); }
.intro__stripes span:nth-child(7) { animation-delay: .36s; background: var(--tan); }
@keyframes pb-stripe-up {
	0%   { transform: translateY(100%); }
	45%  { transform: translateY(0); }
	55%  { transform: translateY(0); }
	100% { transform: translateY(-100%); }
}
.intro__word {
	position: relative;
	z-index: 2;
	display: block;
	width: clamp(280px, 72vw, 920px);
	height: auto;
	max-height: 60vh;
	object-fit: contain;
	mix-blend-mode: difference;
	opacity: 0;
	animation: pb-word-in 1.2s 1.2s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes pb-word-in {
	from { opacity: 0; transform: translateY(40px) scale(.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 767px) {
	.intro--desktop-only { display: none !important; }
}

/* ============================================================
   CASE STUDIES. Single-case_study.php
   Unified template ported from Claude Design's case-studd handoff.
   All rules scoped under .case-study-body so we don't clobber the
   homepage / about / pillar styles. Pillar accent is `--p-tone`,
   set inline on <main> per the post's osof_pillar taxonomy term.
   ============================================================ */
.case-study-body { background: var(--off); color: var(--ink); font-family: var(--sans); line-height: 1.55; }
.case-study-body img, .case-study-body svg { display: block; max-width: 100%; }

/* HERO */
.case-study-body .cs-hero { padding: 56px 48px 72px; background: var(--off); border-bottom: 1px solid rgba(13,13,13,.08); position: relative; overflow: hidden; }
.case-study-body .cs-hero-inner { max-width: 1320px; margin: 0 auto; position: relative; z-index: 2; }
.case-study-body .cs-hero-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 48px; }
.case-study-body .cs-tag-pillar { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); padding: 7px 12px 7px 10px; background: rgba(13,13,13,.04); border: 1px solid rgba(13,13,13,.1); border-radius: 100px; font-weight: 600; }
.case-study-body .cs-tag-pillar .cs-swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--p-tone); box-shadow: 0 0 0 3px rgba(0,0,0,0); }
.case-study-body .cs-tag-discipline { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(13,13,13,.55); padding: 7px 12px; border: 1px dashed rgba(13,13,13,.18); border-radius: 100px; font-weight: 500; }
.case-study-body .cs-tag-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(13,13,13,.45); margin-left: auto; }
.case-study-body .cs-tag-meta b { color: var(--p-tone); font-weight: 700; }

.case-study-body .cs-hero-name { font-family: var(--serif); font-weight: 900; font-size: clamp(64px, 11vw, 156px); letter-spacing: -.045em; line-height: .88; color: var(--ink); margin-bottom: 22px; text-wrap: balance; }
.case-study-body .cs-hero-name i { font-style: italic; font-weight: 400; }
.case-study-body .cs-hero-name .cs-stop { color: var(--p-tone); font-style: normal; }
.case-study-body .cs-hero-frame { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; color: rgba(13,13,13,.78); max-width: 38ch; margin-bottom: 56px; text-wrap: pretty; }
.case-study-body .cs-hero-frame em { font-style: normal; font-weight: 900; color: var(--ink); }

.case-study-body .cs-hero-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid rgba(13,13,13,.18); border-bottom: 1px solid rgba(13,13,13,.18); }
.case-study-body .cs-hchip { padding: 22px 22px 22px 0; border-right: 1px solid rgba(13,13,13,.08); display: flex; flex-direction: column; gap: 6px; }
.case-study-body .cs-hchip:last-child { border-right: none; padding-right: 0; }
.case-study-body .cs-hchip:first-child { padding-left: 0; }
.case-study-body .cs-hchip .cs-k { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(13,13,13,.5); font-weight: 600; }
.case-study-body .cs-hchip .cs-v { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.case-study-body .cs-hchip .cs-v i { font-style: italic; font-weight: 400; }

/* STARTED */
.case-study-body .cs-started { padding: 104px 48px; background: var(--white); border-bottom: 1px solid rgba(13,13,13,.08); }
.case-study-body .cs-started-inner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 200px 1fr 1fr; gap: 60px; align-items: start; }
.case-study-body .cs-section-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--p-tone); font-weight: 700; padding-top: 8px; }
.case-study-body .cs-section-eyebrow span { display: block; color: rgba(13,13,13,.45); font-weight: 400; margin-top: 6px; }
.case-study-body .cs-started-narrative h2 { font-family: var(--serif); font-weight: 900; font-size: 46px; letter-spacing: -.025em; line-height: 1; margin-bottom: 24px; text-wrap: balance; }
.case-study-body .cs-started-narrative h2 i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.case-study-body .cs-started-narrative p { font-size: 16px; line-height: 1.65; color: rgba(13,13,13,.78); margin-bottom: 14px; max-width: 48ch; }
.case-study-body .cs-started-narrative p:last-child { margin-bottom: 0; }
.case-study-body .cs-started-narrative p strong { color: var(--ink); font-weight: 600; }

.case-study-body .cs-before-card { background: var(--off); border: 1px solid rgba(13,13,13,.1); padding: 28px; display: flex; flex-direction: column; gap: 0; }
.case-study-body .cs-before-card .cs-h { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(13,13,13,.5); padding-bottom: 14px; border-bottom: 1px dashed rgba(13,13,13,.15); margin-bottom: 14px; }
.case-study-body .cs-before-card .cs-h b { color: var(--ink); font-weight: 600; }
.case-study-body .cs-before-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(13,13,13,.07); align-items: baseline; }
.case-study-body .cs-before-row:last-child { border-bottom: none; padding-bottom: 0; }
.case-study-body .cs-before-row .cs-lbl { font-size: 13px; color: rgba(13,13,13,.7); line-height: 1.4; }
.case-study-body .cs-before-row .cs-val { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: -.01em; }
.case-study-body .cs-before-row .cs-val i { font-style: italic; font-weight: 400; color: rgba(13,13,13,.55); font-size: 14px; margin-left: 4px; }
.case-study-body .cs-before-card .cs-stamp { margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(13,13,13,.15); font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(13,13,13,.45); display: flex; justify-content: space-between; }
.case-study-body .cs-before-card .cs-stamp em { color: var(--p-tone); font-style: normal; font-weight: 700; }

/* DID */
.case-study-body .cs-did { padding: 104px 48px; background: var(--off); border-bottom: 1px solid rgba(13,13,13,.08); }
.case-study-body .cs-did-inner { max-width: 1320px; margin: 0 auto; }
.case-study-body .cs-did-head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid rgba(13,13,13,.18); padding-bottom: 24px; }
.case-study-body .cs-did-head h2 { font-family: var(--serif); font-weight: 900; font-size: 56px; letter-spacing: -.025em; line-height: .95; }
.case-study-body .cs-did-head h2 i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.case-study-body .cs-did-head .cs-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(13,13,13,.55); text-align: right; }
.case-study-body .cs-did-head .cs-meta b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 4px; }
.case-study-body .cs-did-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(13,13,13,.18); margin-top: -1px; }
.case-study-body .cs-did-cell { padding: 40px 40px 36px; border-right: 1px solid rgba(13,13,13,.1); border-bottom: 1px solid rgba(13,13,13,.1); display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; background: var(--off); min-height: 340px; position: relative; }
.case-study-body .cs-did-cell:nth-child(2n) { border-right: none; }
.case-study-body .cs-did-cell:nth-last-child(-n+2) { border-bottom: none; }
.case-study-body .cs-did-cell .cs-pn { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(13,13,13,.5); font-weight: 600; }
.case-study-body .cs-did-cell .cs-pn .cs-num { color: var(--p-tone); font-weight: 700; }
.case-study-body .cs-did-cell .cs-pn .cs-phase { margin-left: auto; color: rgba(13,13,13,.4); }
.case-study-body .cs-did-cell h3 { font-family: var(--serif); font-weight: 900; font-size: 32px; letter-spacing: -.02em; line-height: 1.05; color: var(--ink); max-width: 18ch; text-wrap: balance; }
.case-study-body .cs-did-cell h3 i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.case-study-body .cs-did-cell p { font-size: 15px; line-height: 1.6; color: rgba(13,13,13,.72); max-width: 42ch; }
.case-study-body .cs-deliverables { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 18px; border-top: 1px dashed rgba(13,13,13,.15); }
.case-study-body .cs-deliverables span { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(13,13,13,.6); padding: 5px 10px; background: rgba(13,13,13,.05); border-radius: 100px; font-weight: 500; }

/* EVIDENCE */
.case-study-body .cs-evidence { padding: 104px 48px; background: var(--white); border-bottom: 1px solid rgba(13,13,13,.08); }
.case-study-body .cs-evidence-inner { max-width: 1320px; margin: 0 auto; }
.case-study-body .cs-evidence-head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid rgba(13,13,13,.18); padding-bottom: 24px; margin-bottom: 48px; }
.case-study-body .cs-evidence-head h2 { font-family: var(--serif); font-weight: 900; font-size: 56px; letter-spacing: -.025em; line-height: .95; }
.case-study-body .cs-evidence-head h2 i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.case-study-body .cs-evidence-head .cs-note { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(13,13,13,.55); text-align: right; max-width: 30ch; }
.case-study-body .cs-evidence-head .cs-note b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 4px; }
.case-study-body .cs-evidence-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px; }
.case-study-body .cs-evidence-grid--single { grid-template-columns: 1fr; max-width: 880px; margin: 0 auto; }
.case-study-body .cs-evpanel { border: 1px solid rgba(13,13,13,.1); border-radius: 14px; overflow: hidden; background: var(--off); display: flex; flex-direction: column; }
.case-study-body .cs-evpanel-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid rgba(13,13,13,.1); background: var(--white); font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(13,13,13,.5); }
.case-study-body .cs-evpanel-h .cs-l { display: flex; align-items: center; gap: 14px; }
.case-study-body .cs-evpanel-h .cs-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--p-tone); }
.case-study-body .cs-evpanel-h b { color: var(--ink); font-weight: 600; letter-spacing: .16em; }
.case-study-body .cs-evpanel-h .cs-r { color: rgba(13,13,13,.4); }

.case-study-body .cs-evdata { padding: 32px 28px 28px; }
.case-study-body .cs-evdata-title { font-family: var(--serif); font-weight: 900; font-size: 22px; letter-spacing: -.015em; margin-bottom: 4px; }
.case-study-body .cs-evdata-title i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.case-study-body .cs-evdata-sub { font-size: 13px; color: rgba(13,13,13,.6); margin-bottom: 24px; }
.case-study-body .cs-evchart { position: relative; width: 100%; aspect-ratio: 16/8; background: var(--white); border: 1px solid rgba(13,13,13,.08); padding: 18px 22px 32px 50px; }
.case-study-body .cs-evchart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.case-study-body .cs-evchart-legend { display: flex; align-items: center; gap: 18px; margin-top: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(13,13,13,.6); }
.case-study-body .cs-evchart-legend .cs-swk { display: inline-flex; align-items: center; gap: 8px; }
.case-study-body .cs-evchart-legend .cs-ln { width: 18px; height: 2px; background: var(--p-tone); }
.case-study-body .cs-evchart-legend .cs-ln.cs-alt { background: transparent; border-top: 1px dashed rgba(13,13,13,.5); height: 1px; }
.case-study-body .cs-evdata-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px dashed rgba(13,13,13,.15); }
.case-study-body .cs-evdata-stat { display: flex; flex-direction: column; gap: 4px; }
.case-study-body .cs-evdata-stat .cs-n { font-family: var(--serif); font-weight: 900; font-size: 34px; letter-spacing: -.025em; line-height: 1; color: var(--p-tone); }
.case-study-body .cs-evdata-stat .cs-l { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(13,13,13,.55); font-weight: 500; }

.case-study-body .cs-evdesign { padding: 0; display: flex; flex-direction: column; flex: 1; }
.case-study-body .cs-evdesign-fig { margin: 0; display: block; }
.case-study-body .cs-evdesign img { width: 100%; height: auto; display: block; }
.case-study-body .cs-evdesign figcaption { padding: 10px 22px; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(13,13,13,.5); background: var(--white); border-top: 1px solid rgba(13,13,13,.06); }
.case-study-body .cs-evdesign--stack .cs-evdesign-fig + .cs-evdesign-fig { border-top: 1px solid rgba(13,13,13,.08); }
.case-study-body .cs-evdesign-foot { padding: 18px 22px; border-top: 1px solid rgba(13,13,13,.1); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(13,13,13,.55); background: var(--white); }

/* Video evidence. Silent looping demo (e.g. AI search proof) */
.case-study-body .cs-evvideo { padding: 0; display: flex; flex-direction: column; flex: 1; }
.case-study-body .cs-evvideo-frame { position: relative; width: 100%; background: #000; overflow: hidden; }
.case-study-body .cs-evvideo-frame::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(13,13,13,.06); pointer-events: none; }
.case-study-body .cs-evvideo video { width: 100%; height: auto; display: block; background: #000; }

/* QUOTE */
.case-study-body .cs-quote { padding: 120px 48px; background: var(--ink); color: var(--white); position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.06); }
.case-study-body .cs-quote::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 14px 14px; mask: radial-gradient(ellipse 60% 60% at 80% 30%, #000 30%, transparent 80%); -webkit-mask: radial-gradient(ellipse 60% 60% at 80% 30%, #000 30%, transparent 80%); pointer-events: none; }
.case-study-body .cs-quote-inner { max-width: 1280px; margin: 0 auto; position: relative; display: grid; grid-template-columns: 80px 1fr 220px; gap: 48px; align-items: center; }
.case-study-body .cs-quote-mark { font-family: var(--serif); font-weight: 900; font-style: italic; font-size: 140px; line-height: .6; color: var(--p-tone); letter-spacing: -.05em; }
.case-study-body .cs-quote-body { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -.015em; line-height: 1.18; color: var(--white); text-wrap: pretty; max-width: 24ch; }
.case-study-body .cs-quote-body em { font-style: normal; font-weight: 900; color: var(--p-tone); }
.case-study-body .cs-quote-attr { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.75); border-left: 1px solid rgba(255,255,255,.18); padding-left: 22px; }
.case-study-body .cs-quote-attr b { display: block; font-family: var(--grotesk); font-weight: 800; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; color: var(--white); margin-bottom: 4px; }
.case-study-body .cs-quote-attr .cs-role { color: rgba(255,255,255,.55); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; display: block; }

/* RESULTS */
.case-study-body .cs-results { padding: 104px 48px; background: var(--off); border-bottom: 1px solid rgba(13,13,13,.08); }
.case-study-body .cs-results-inner { max-width: 1320px; margin: 0 auto; }
.case-study-body .cs-results-head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid rgba(13,13,13,.18); padding-bottom: 24px; }
.case-study-body .cs-results-head h2 { font-family: var(--serif); font-weight: 900; font-size: 56px; letter-spacing: -.025em; line-height: .95; }
.case-study-body .cs-results-head h2 i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.case-study-body .cs-results-head .cs-win { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(13,13,13,.55); text-align: right; }
.case-study-body .cs-results-head .cs-win b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 4px; }
.case-study-body .cs-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(13,13,13,.18); margin-top: -1px; }
.case-study-body .cs-rcell { padding: 40px 32px 36px; border-right: 1px solid rgba(13,13,13,.1); border-bottom: 1px solid rgba(13,13,13,.1); display: flex; flex-direction: column; gap: 10px; min-height: 220px; position: relative; }
.case-study-body .cs-rcell:nth-child(3n) { border-right: none; }
.case-study-body .cs-rcell:nth-last-child(-n+3) { border-bottom: none; }
.case-study-body .cs-rcell .cs-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(13,13,13,.5); font-weight: 600; }
.case-study-body .cs-rcell .cs-num { font-family: var(--serif); font-weight: 900; font-size: 64px; letter-spacing: -.035em; line-height: .95; color: var(--ink); }
.case-study-body .cs-rcell .cs-num i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.case-study-body .cs-rcell .cs-num .cs-pre { color: var(--p-tone); font-style: normal; }
.case-study-body .cs-rcell.cs-qual .cs-num { font-size: 30px; letter-spacing: -.02em; line-height: 1.1; font-weight: 900; text-wrap: balance; max-width: 14ch; }
.case-study-body .cs-rcell .cs-desc { font-size: 13px; line-height: 1.55; color: rgba(13,13,13,.65); max-width: 30ch; margin-top: auto; padding-top: 14px; border-top: 1px dashed rgba(13,13,13,.15); }

/* CROSS LINKS */
.case-study-body .cs-cross { padding: 104px 48px 0; background: var(--off); }
.case-study-body .cs-cross-inner { max-width: 1320px; margin: 0 auto; }
.case-study-body .cs-cross-head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid rgba(13,13,13,.18); padding-bottom: 24px; margin-bottom: 32px; }
.case-study-body .cs-cross-head h3 { font-family: var(--serif); font-weight: 900; font-size: 38px; letter-spacing: -.02em; line-height: 1; }
.case-study-body .cs-cross-head h3 i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.case-study-body .cs-cross-head a { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--p-tone); padding-bottom: 2px; }
.case-study-body .cs-cross-head a:hover { color: var(--p-tone); }
.case-study-body .cs-cross-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 88px; }
.case-study-body .cs-xc { background: var(--white); border: 1px solid rgba(13,13,13,.1); padding: 32px 36px 28px; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; border-radius: 14px; transition: transform .25s, border-color .25s; position: relative; overflow: hidden; }
.case-study-body .cs-xc:hover { transform: translateY(-3px); border-color: rgba(13,13,13,.22); }
.case-study-body .cs-xc .cs-xtag { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(13,13,13,.5); font-weight: 600; }
.case-study-body .cs-xc .cs-xtag .cs-sw { width: 8px; height: 8px; border-radius: 50%; }
.case-study-body .cs-xc.cs-fl .cs-xtag .cs-sw { background: var(--flame); box-shadow: 0 0 0 3px rgba(240,101,34,.18); }
.case-study-body .cs-xc.cs-cy .cs-xtag .cs-sw { background: var(--cyan); box-shadow: 0 0 0 3px rgba(68,198,239,.18); }
.case-study-body .cs-xc.cs-gn .cs-xtag .cs-sw { background: var(--green); box-shadow: 0 0 0 3px rgba(42,180,115,.18); }
.case-study-body .cs-xc h4 { font-family: var(--serif); font-weight: 900; font-size: 36px; letter-spacing: -.025em; line-height: 1.05; color: var(--ink); max-width: 14ch; text-wrap: balance; }
.case-study-body .cs-xc h4 i { font-style: italic; font-weight: 400; }
.case-study-body .cs-xc.cs-fl h4 i { color: var(--flame); }
.case-study-body .cs-xc.cs-cy h4 i { color: var(--cyan); }
.case-study-body .cs-xc.cs-gn h4 i { color: var(--green); }
.case-study-body .cs-xc p { font-size: 14px; line-height: 1.55; color: rgba(13,13,13,.7); max-width: 42ch; }
.case-study-body .cs-xc .cs-xfoot { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px dashed rgba(13,13,13,.15); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(13,13,13,.55); }
.case-study-body .cs-xc .cs-xfoot .cs-arrow { font-family: var(--serif); font-size: 24px; color: rgba(13,13,13,.3); transition: transform .25s, color .25s; }
.case-study-body .cs-xc:hover .cs-xfoot .cs-arrow { transform: translateX(8px); }
.case-study-body .cs-xc.cs-fl:hover .cs-xfoot .cs-arrow { color: var(--flame); }
.case-study-body .cs-xc.cs-cy:hover .cs-xfoot .cs-arrow { color: var(--cyan); }
.case-study-body .cs-xc.cs-gn:hover .cs-xfoot .cs-arrow { color: var(--green); }

/* CTA band */
.case-study-body .cs-cta { padding: 120px 48px 100px; background: var(--ink); color: var(--white); position: relative; overflow: hidden; }
.case-study-body .cs-cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 14px 14px; mask: radial-gradient(ellipse 50% 80% at 20% 50%, #000 30%, transparent 80%); -webkit-mask: radial-gradient(ellipse 50% 80% at 20% 50%, #000 30%, transparent 80%); pointer-events: none; }
.case-study-body .cs-cta-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: center; position: relative; }
.case-study-body .cs-cta h2 { font-family: var(--serif); font-weight: 900; font-size: clamp(40px, 5.6vw, 84px); letter-spacing: -.035em; line-height: .95; text-wrap: balance; }
.case-study-body .cs-cta h2 i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.case-study-body .cs-cta-side { display: flex; flex-direction: column; gap: 20px; border-left: 1px solid rgba(255,255,255,.14); padding-left: 32px; }
.case-study-body .cs-cta-side p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.7); max-width: 36ch; }
.case-study-body .cs-cta-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.case-study-body .cs-cta-actions a { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 22px; font-family: var(--grotesk); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; border-radius: 100px; transition: transform .2s, background .2s; }
.case-study-body .cs-cta-actions a.cs-primary { background: var(--p-tone); color: var(--white); }
.case-study-body .cs-cta-actions a.cs-primary:hover { transform: translateX(4px); }
.case-study-body .cs-cta-actions a.cs-ghost { border: 1px solid rgba(255,255,255,.22); color: var(--white); }
.case-study-body .cs-cta-actions a.cs-ghost:hover { border-color: var(--white); }
.case-study-body .cs-cta-reply { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: 4px; }
.case-study-body .cs-cta-reply b { color: var(--p-tone); font-weight: 700; }

/* MISSING fallback */
.case-study-body .cs-missing { padding: 140px 48px; background: var(--off); text-align: center; }
.case-study-body .cs-missing .cs-missing-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--p-tone); margin-bottom: 16px; }
.case-study-body .cs-missing h1 { font-family: var(--serif); font-weight: 900; font-size: clamp(40px, 7vw, 96px); letter-spacing: -.03em; line-height: .95; margin-bottom: 24px; max-width: 18ch; margin-left: auto; margin-right: auto; }
.case-study-body .cs-missing p { font-size: 17px; line-height: 1.6; color: rgba(13,13,13,.7); max-width: 48ch; margin: 0 auto 24px; }

/* Mobile */
@media (max-width: 900px) {
	.case-study-body .cs-hero { padding: 36px 22px 48px; }
	.case-study-body .cs-hero-tags { margin-bottom: 32px; }
	.case-study-body .cs-tag-meta { margin-left: 0; width: 100%; order: 3; margin-top: 2px; }
	.case-study-body .cs-hero-name { font-size: clamp(54px, 17vw, 96px); }
	.case-study-body .cs-hero-frame { font-size: 20px; margin-bottom: 36px; }
	.case-study-body .cs-hero-chips { grid-template-columns: repeat(2, 1fr); }
	.case-study-body .cs-hchip { padding: 18px 16px 18px 0; border-bottom: 1px solid rgba(13,13,13,.08); }
	.case-study-body .cs-hchip:nth-child(2n) { border-right: none; padding-right: 0; padding-left: 16px; }
	.case-study-body .cs-hchip:nth-child(2n-1) { padding-left: 0; }
	.case-study-body .cs-hchip:last-child { border-bottom: none; }

	.case-study-body .cs-started { padding: 64px 22px; }
	.case-study-body .cs-started-inner { grid-template-columns: 1fr; gap: 32px; }
	.case-study-body .cs-section-eyebrow { padding-top: 0; }
	.case-study-body .cs-started-narrative h2 { font-size: 34px; }

	.case-study-body .cs-did { padding: 64px 22px; }
	.case-study-body .cs-did-head { flex-direction: column; align-items: flex-start; gap: 18px; }
	.case-study-body .cs-did-head h2 { font-size: 38px; }
	.case-study-body .cs-did-head .cs-meta { text-align: left; }
	.case-study-body .cs-did-grid { grid-template-columns: 1fr; }
	.case-study-body .cs-did-cell { padding: 32px 24px; border-right: none; border-bottom: 1px solid rgba(13,13,13,.1); }
	.case-study-body .cs-did-cell:last-child { border-bottom: none; }
	.case-study-body .cs-did-cell h3 { font-size: 26px; }

	.case-study-body .cs-evidence { padding: 64px 22px; }
	.case-study-body .cs-evidence-head { flex-direction: column; align-items: flex-start; gap: 18px; }
	.case-study-body .cs-evidence-head h2 { font-size: 38px; }
	.case-study-body .cs-evidence-head .cs-note { text-align: left; max-width: none; }
	.case-study-body .cs-evidence-grid { grid-template-columns: 1fr; }
	.case-study-body .cs-evdata { padding: 24px 20px 22px; }

	.case-study-body .cs-quote { padding: 72px 22px; }
	.case-study-body .cs-quote-inner { grid-template-columns: 1fr; gap: 24px; }
	.case-study-body .cs-quote-mark { font-size: 88px; }
	.case-study-body .cs-quote-body { font-size: 24px; max-width: none; }
	.case-study-body .cs-quote-attr { border-left: none; border-top: 1px solid rgba(255,255,255,.18); padding-left: 0; padding-top: 18px; }

	.case-study-body .cs-results { padding: 64px 22px; }
	.case-study-body .cs-results-head { flex-direction: column; align-items: flex-start; gap: 18px; }
	.case-study-body .cs-results-head h2 { font-size: 38px; }
	.case-study-body .cs-results-head .cs-win { text-align: left; }
	.case-study-body .cs-results-grid { grid-template-columns: 1fr 1fr; }
	.case-study-body .cs-rcell { padding: 28px 20px; border-right: 1px solid rgba(13,13,13,.1); }
	.case-study-body .cs-rcell:nth-child(3n) { border-right: 1px solid rgba(13,13,13,.1); }
	.case-study-body .cs-rcell:nth-child(2n) { border-right: none; }
	.case-study-body .cs-rcell .cs-num { font-size: 44px; }
	.case-study-body .cs-rcell.cs-qual .cs-num { font-size: 22px; }

	.case-study-body .cs-cross { padding: 64px 22px 0; }
	.case-study-body .cs-cross-head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.case-study-body .cs-cross-head h3 { font-size: 26px; }
	.case-study-body .cs-cross-grid { grid-template-columns: 1fr; margin-bottom: 60px; }
	.case-study-body .cs-xc { padding: 26px 24px; }
	.case-study-body .cs-xc h4 { font-size: 28px; }

	.case-study-body .cs-cta { padding: 72px 22px; }
	.case-study-body .cs-cta-inner { grid-template-columns: 1fr; gap: 32px; }
	.case-study-body .cs-cta-side { border-left: none; border-top: 1px solid rgba(255,255,255,.14); padding-left: 0; padding-top: 24px; }
}

@media (max-width: 540px) {
	.case-study-body .cs-results-grid { grid-template-columns: 1fr; }
	.case-study-body .cs-rcell { border-right: none !important; }
}

/* ============================================================
   CASE STUDIES ARCHIVE. Template-case-studies.php
   Ported from design/case-archive/. All rules scoped under
   .cs-archive-body so they don't collide with the rest of the site.
   ============================================================ */
.cs-archive-body { background: var(--off); color: var(--ink); font-family: var(--sans); line-height: 1.55; }
.cs-archive-body img, .cs-archive-body svg { display: block; max-width: 100%; }

/* Pillar tints. Re-used across cards, legend, tags */
.cs-archive-body .csa-v { color: var(--flame); }
.cs-archive-body .csa-c { color: var(--cyan); }
.cs-archive-body .csa-t { color: var(--green); }
.cs-archive-body .csa-v-tone, .cs-archive-body .csa-r.csa-v-tone { color: var(--flame); font-weight: 700; }
.cs-archive-body .csa-c-tone, .cs-archive-body .csa-r.csa-c-tone { color: var(--cyan); font-weight: 700; }
.cs-archive-body .csa-t-tone, .cs-archive-body .csa-r.csa-t-tone { color: var(--green); font-weight: 700; }

/* HERO */
.cs-archive-body .csa-hero { position: relative; padding: 72px 48px 0; background: var(--off); overflow: hidden; border-bottom: 1px solid rgba(13,13,13,.1); }
.cs-archive-body .csa-hero-inner { max-width: 1320px; margin: 0 auto; position: relative; z-index: 2; }
.cs-archive-body .csa-hero-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(13,13,13,.55); margin-bottom: 32px; display: flex; align-items: center; gap: 14px; }
.cs-archive-body .csa-hero-eyebrow .csa-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 4px rgba(240,101,34,.18); }
.cs-archive-body .csa-hero-eyebrow b { color: var(--ink); font-weight: 700; }
.cs-archive-body .csa-hero-title { font-family: var(--serif); font-weight: 900; font-size: clamp(72px, 12vw, 180px); letter-spacing: -.05em; line-height: .86; color: var(--ink); margin-bottom: 36px; text-wrap: balance; }
.cs-archive-body .csa-hero-title .csa-l1 { display: block; }
.cs-archive-body .csa-hero-title .csa-l2 { display: block; font-style: italic; font-weight: 400; }
.cs-archive-body .csa-hero-title .csa-l2 .csa-v { color: var(--flame); font-style: normal; font-weight: 900; }
.cs-archive-body .csa-hero-title .csa-l2 .csa-c { color: var(--cyan);  font-style: normal; font-weight: 900; }
.cs-archive-body .csa-hero-title .csa-l2 .csa-t { color: var(--green); font-style: normal; font-weight: 900; }
.cs-archive-body .csa-hero-title .csa-stop { color: var(--ink); }
.cs-archive-body .csa-hero-foot { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; padding: 36px 0 48px; border-top: 1px solid rgba(13,13,13,.18); align-items: end; }
.cs-archive-body .csa-hero-lede { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.32; color: rgba(13,13,13,.82); max-width: 38ch; text-wrap: pretty; }
.cs-archive-body .csa-hero-lede em { font-style: normal; font-weight: 900; color: var(--ink); }
.cs-archive-body .csa-hero-meta { display: flex; flex-direction: column; gap: 14px; justify-self: end; text-align: right; }
.cs-archive-body .csa-hero-meta .csa-row { display: flex; align-items: center; justify-content: flex-end; gap: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(13,13,13,.55); }
.cs-archive-body .csa-hero-meta .csa-row b { color: var(--ink); font-weight: 700; font-family: var(--serif); font-size: 32px; letter-spacing: -.02em; line-height: 1; font-style: normal; }
.cs-archive-body .csa-spectrum { display: grid; grid-template-columns: 1fr 1fr 1fr; height: 8px; }
.cs-archive-body .csa-spectrum .csa-v { background: var(--flame); }
.cs-archive-body .csa-spectrum .csa-c { background: var(--cyan); }
.cs-archive-body .csa-spectrum .csa-t { background: var(--green); }

/* PILLAR LEGEND */
.cs-archive-body .csa-legend { padding: 48px; background: var(--off); border-bottom: 1px solid rgba(13,13,13,.1); }
.cs-archive-body .csa-legend-inner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid rgba(13,13,13,.1); border-right: 1px solid rgba(13,13,13,.1); }
.cs-archive-body .csa-lcol { padding: 28px 32px; border-right: 1px solid rgba(13,13,13,.1); position: relative; }
.cs-archive-body .csa-lcol:last-child { border-right: none; }
.cs-archive-body .csa-lcol::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--lc); }
.cs-archive-body .csa-lcol.csa-v { --lc: var(--flame); }
.cs-archive-body .csa-lcol.csa-c { --lc: var(--cyan); }
.cs-archive-body .csa-lcol.csa-t { --lc: var(--green); }
.cs-archive-body .csa-lcol .csa-pn { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--lc); font-weight: 700; margin-bottom: 10px; }
.cs-archive-body .csa-lcol h3 { font-family: var(--serif); font-weight: 900; font-size: 30px; letter-spacing: -.025em; line-height: 1; margin-bottom: 8px; }
.cs-archive-body .csa-lcol h3 i { font-style: italic; font-weight: 400; color: var(--lc); }
.cs-archive-body .csa-lcol p { font-size: 13px; line-height: 1.55; color: rgba(13,13,13,.65); max-width: 36ch; margin-bottom: 16px; }
.cs-archive-body .csa-lcol .csa-ct { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(13,13,13,.5); padding-top: 14px; border-top: 1px dashed rgba(13,13,13,.18); }
.cs-archive-body .csa-lcol .csa-ct b { color: var(--lc); font-weight: 700; font-family: var(--serif); font-size: 18px; letter-spacing: -.01em; }

/* INDEX STRIP */
.cs-archive-body .csa-idxstrip { padding: 0 48px; background: var(--off); border-bottom: 1px solid rgba(13,13,13,.1); }
.cs-archive-body .csa-idxstrip-inner { max-width: 1320px; margin: 0 auto; padding: 18px 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(13,13,13,.5); }
.cs-archive-body .csa-idxstrip-inner b { color: var(--ink); font-weight: 700; margin-right: auto; }
.cs-archive-body .csa-idxstrip-inner .csa-ix { display: inline-flex; align-items: center; gap: 8px; padding: 5px 0; transition: color .15s; }
.cs-archive-body .csa-idxstrip-inner .csa-ix .csa-sw { width: 6px; height: 6px; border-radius: 50%; }
.cs-archive-body .csa-idxstrip-inner .csa-ix.csa-v .csa-sw { background: var(--flame); }
.cs-archive-body .csa-idxstrip-inner .csa-ix.csa-c .csa-sw { background: var(--cyan); }
.cs-archive-body .csa-idxstrip-inner .csa-ix.csa-t .csa-sw { background: var(--green); }
.cs-archive-body .csa-idxstrip-inner .csa-ix:hover { color: var(--ink); }

/* FEATURED CARD */
.cs-archive-body .csa-featured { background: var(--off); }
.cs-archive-body .csa-featured-inner { max-width: 1320px; margin: 0 auto; padding: 64px 48px; }
.cs-archive-body .csa-featured-head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid rgba(13,13,13,.18); padding-bottom: 14px; margin-bottom: 28px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(13,13,13,.55); }
.cs-archive-body .csa-featured-head b { color: var(--ink); font-weight: 700; }
.cs-archive-body .csa-fcard { position: relative; background: var(--ink); color: var(--white); overflow: hidden; border-radius: 14px; display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr auto; min-height: 480px; }
.cs-archive-body .csa-fcard::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 14px 14px; mask: radial-gradient(ellipse 70% 70% at 80% 30%, #000 30%, transparent 80%); -webkit-mask: radial-gradient(ellipse 70% 70% at 80% 30%, #000 30%, transparent 80%); pointer-events: none; }
.cs-archive-body .csa-fcard-l { padding: 48px 48px 40px; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 2; grid-row: 1; }
.cs-archive-body .csa-fcard-tagrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: auto; }
.cs-archive-body .csa-fcard .csa-tagp { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--white); padding: 7px 12px 7px 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 100px; font-weight: 600; }
.cs-archive-body .csa-fcard .csa-tagp .csa-sw { width: 8px; height: 8px; border-radius: 50%; background: var(--ftone, var(--flame)); box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.cs-archive-body .csa-fcard--v .csa-tagp { background: rgba(240,101,34,.18); border-color: rgba(240,101,34,.5); }
.cs-archive-body .csa-fcard--v .csa-tagp .csa-sw { background: var(--flame); box-shadow: 0 0 0 3px rgba(240,101,34,.3); }
.cs-archive-body .csa-fcard--c .csa-tagp { background: rgba(68,198,239,.18); border-color: rgba(68,198,239,.5); }
.cs-archive-body .csa-fcard--c .csa-tagp .csa-sw { background: var(--cyan); box-shadow: 0 0 0 3px rgba(68,198,239,.3); }
.cs-archive-body .csa-fcard--t .csa-tagp { background: rgba(42,180,115,.18); border-color: rgba(42,180,115,.5); }
.cs-archive-body .csa-fcard--t .csa-tagp .csa-sw { background: var(--green); box-shadow: 0 0 0 3px rgba(42,180,115,.3); }
.cs-archive-body .csa-fcard .csa-tagd { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); padding: 7px 12px; border: 1px dashed rgba(255,255,255,.22); border-radius: 100px; font-weight: 500; }
.cs-archive-body .csa-fcard h2 { font-family: var(--serif); font-weight: 900; font-size: clamp(48px, 7vw, 96px); letter-spacing: -.04em; line-height: .9; color: var(--white); margin: 32px 0 18px; text-wrap: balance; }
.cs-archive-body .csa-fcard h2 i { font-style: italic; font-weight: 400; }
.cs-archive-body .csa-fcard--v h2 .csa-stop { color: var(--flame); font-style: normal; }
.cs-archive-body .csa-fcard--c h2 .csa-stop { color: var(--cyan);  font-style: normal; }
.cs-archive-body .csa-fcard--t h2 .csa-stop { color: var(--green); font-style: normal; }
.cs-archive-body .csa-fcard .csa-frame { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.35; color: rgba(255,255,255,.78); max-width: 36ch; margin-bottom: 32px; }
.cs-archive-body .csa-fcard .csa-frame em { font-style: normal; font-weight: 900; color: var(--white); }
.cs-archive-body .csa-fcard .csa-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px; }
.cs-archive-body .csa-fcard .csa-stat { padding-right: 18px; border-right: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 4px; }
.cs-archive-body .csa-fcard .csa-stat:last-child { border-right: none; }
.cs-archive-body .csa-fcard .csa-stat .csa-n { font-family: var(--serif); font-weight: 900; font-size: 36px; letter-spacing: -.025em; line-height: 1; }
.cs-archive-body .csa-fcard--v .csa-stat .csa-n { color: var(--flame); }
.cs-archive-body .csa-fcard--c .csa-stat .csa-n { color: var(--cyan); }
.cs-archive-body .csa-fcard--t .csa-stat .csa-n { color: var(--green); }
.cs-archive-body .csa-fcard .csa-stat .csa-l { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }

.cs-archive-body .csa-fcard-r { position: relative; background: linear-gradient(135deg, #1c1308 0%, #0d0805 100%); overflow: hidden; border-left: 1px solid rgba(255,255,255,.08); grid-row: 1; min-height: 380px; }
.cs-archive-body .csa-fcard--c .csa-fcard-r { background: linear-gradient(135deg, #0a1f25 0%, #050d10 100%); }
.cs-archive-body .csa-fcard--t .csa-fcard-r { background: linear-gradient(135deg, #0a2018 0%, #050e0a 100%); }
.cs-archive-body .csa-fcard-r::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 60%, rgba(240,101,34,.32), transparent 70%); }
.cs-archive-body .csa-fcard--c .csa-fcard-r::before { background: radial-gradient(ellipse 80% 60% at 50% 60%, rgba(68,198,239,.32), transparent 70%); }
.cs-archive-body .csa-fcard--t .csa-fcard-r::before { background: radial-gradient(ellipse 80% 60% at 50% 60%, rgba(42,180,115,.32), transparent 70%); }
.cs-archive-body .csa-fcard-r .csa-glyph { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(160px, 18vw, 260px); letter-spacing: -.06em; line-height: .8; mix-blend-mode: screen; opacity: .92; pointer-events: none; }
.cs-archive-body .csa-fcard--v .csa-fcard-r .csa-glyph { color: var(--flame); }
.cs-archive-body .csa-fcard--c .csa-fcard-r .csa-glyph { color: var(--cyan); }
.cs-archive-body .csa-fcard--t .csa-fcard-r .csa-glyph { color: var(--green); }
.cs-archive-body .csa-fcard-r .csa-glyph .csa-stop { color: var(--white); font-style: normal; }
.cs-archive-body .csa-fcard-r .csa-corner { position: absolute; bottom: 24px; left: 24px; right: 24px; display: flex; justify-content: space-between; gap: 18px; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); z-index: 2; }
.cs-archive-body .csa-fcard-r .csa-corner b { font-weight: 700; }
.cs-archive-body .csa-fcard--v .csa-fcard-r .csa-corner b { color: var(--flame); }
.cs-archive-body .csa-fcard--c .csa-fcard-r .csa-corner b { color: var(--cyan); }
.cs-archive-body .csa-fcard--t .csa-fcard-r .csa-corner b { color: var(--green); }
.cs-archive-body .csa-fcard-r .csa-badge { position: absolute; top: 24px; right: 24px; min-width: 84px; padding: 12px; border: 1.5px solid rgba(255,255,255,.3); border-radius: 50%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; text-align: center; z-index: 2; line-height: 1.2; }
.cs-archive-body .csa-fcard--v .csa-fcard-r .csa-badge { color: var(--flame); border-color: rgba(240,101,34,.5); }
.cs-archive-body .csa-fcard--c .csa-fcard-r .csa-badge { color: var(--cyan);  border-color: rgba(68,198,239,.5); }
.cs-archive-body .csa-fcard--t .csa-fcard-r .csa-badge { color: var(--green); border-color: rgba(42,180,115,.5); }
.cs-archive-body .csa-fcard-r .csa-badge b { font-family: var(--serif); font-size: 18px; font-weight: 900; letter-spacing: -.01em; margin-bottom: 2px; display: block; }
.cs-archive-body .csa-fcard-cta { grid-column: 1 / -1; grid-row: 2; padding: 18px 48px; background: rgba(255,255,255,.04); border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; align-items: center; font-family: var(--grotesk); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--white); transition: background .25s; z-index: 3; position: relative; }
.cs-archive-body .csa-fcard-cta .csa-arrow { font-family: var(--serif); font-size: 22px; transition: transform .25s; }
.cs-archive-body .csa-fcard--v .csa-fcard-cta .csa-arrow { color: var(--flame); }
.cs-archive-body .csa-fcard--c .csa-fcard-cta .csa-arrow { color: var(--cyan); }
.cs-archive-body .csa-fcard--t .csa-fcard-cta .csa-arrow { color: var(--green); }
.cs-archive-body .csa-fcard:hover .csa-fcard-cta { background: rgba(255,255,255,.08); }
.cs-archive-body .csa-fcard:hover .csa-fcard-cta .csa-arrow { transform: translateX(8px); }

/* GRID OF ALL CARDS */
.cs-archive-body .csa-grid-sec { padding: 0 48px 88px; background: var(--off); }
.cs-archive-body .csa-grid-inner { max-width: 1320px; margin: 0 auto; }
.cs-archive-body .csa-grid-head { display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid rgba(13,13,13,.18); padding: 48px 0 18px; margin-bottom: 28px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(13,13,13,.55); }
.cs-archive-body .csa-grid-head b { color: var(--ink); font-weight: 700; font-family: var(--serif); font-size: 30px; letter-spacing: -.02em; text-transform: none; line-height: 1; font-style: normal; }
.cs-archive-body .csa-grid-head b i { font-style: italic; font-weight: 400; }
.cs-archive-body .csa-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cs-archive-body .csa-card { position: relative; background: var(--white); border: 1px solid rgba(13,13,13,.1); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; min-height: 440px; }
.cs-archive-body .csa-card:hover { transform: translateY(-4px); border-color: var(--ct); box-shadow: 0 24px 60px -30px rgba(13,13,13,.18); }
.cs-archive-body .csa-card.csa-v { --ct: var(--flame); --ctbg: rgba(240,101,34,.08); --ctbg2: rgba(240,101,34,.18); }
.cs-archive-body .csa-card.csa-c { --ct: var(--cyan);  --ctbg: rgba(68,198,239,.10); --ctbg2: rgba(68,198,239,.20); }
.cs-archive-body .csa-card.csa-t { --ct: var(--green); --ctbg: rgba(42,180,115,.10); --ctbg2: rgba(42,180,115,.20); }
.cs-archive-body .csa-card .csa-top { position: relative; height: 170px; background: var(--ctbg); overflow: hidden; border-bottom: 1px solid var(--ctbg2); }
.cs-archive-body .csa-card .csa-top::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(13,13,13,.1) 1px, transparent 1px); background-size: 12px 12px; mask: radial-gradient(ellipse 70% 70% at 30% 80%, #000 0%, transparent 70%); -webkit-mask: radial-gradient(ellipse 70% 70% at 30% 80%, #000 0%, transparent 70%); pointer-events: none; }
.cs-archive-body .csa-card .csa-top .csa-accent { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--ct); }
.cs-archive-body .csa-card .csa-top .csa-glyph { position: absolute; right: -10px; bottom: -30px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 200px; letter-spacing: -.06em; line-height: .8; color: var(--ct); opacity: .45; }
.cs-archive-body .csa-card .csa-top .csa-glyph .csa-stop { color: var(--ct); font-style: normal; }
.cs-archive-body .csa-card .csa-top .csa-lab { position: absolute; top: 18px; left: 20px; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ct); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cs-archive-body .csa-card .csa-top .csa-lab .csa-sw { width: 7px; height: 7px; border-radius: 50%; background: var(--ct); box-shadow: 0 0 0 3px var(--ctbg2); }
.cs-archive-body .csa-card .csa-top .csa-yr { position: absolute; top: 18px; right: 20px; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(13,13,13,.5); }
.cs-archive-body .csa-card .csa-top .csa-disc { position: absolute; bottom: 14px; left: 20px; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(13,13,13,.62); font-weight: 500; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-archive-body .csa-card .csa-top .csa-disc span { padding: 3px 8px; background: rgba(255,255,255,.7); border: 1px solid rgba(13,13,13,.06); border-radius: 100px; }
.cs-archive-body .csa-card .csa-cbody { padding: 26px 28px 16px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.cs-archive-body .csa-card .csa-cbody h3 { font-family: var(--serif); font-weight: 900; font-size: 32px; letter-spacing: -.025em; line-height: 1.02; color: var(--ink); text-wrap: balance; }
.cs-archive-body .csa-card .csa-cbody h3 i { font-style: italic; font-weight: 400; color: var(--ct); }
.cs-archive-body .csa-card .csa-cbody h3 .csa-stop { color: var(--ct); font-style: normal; }
.cs-archive-body .csa-card .csa-cbody p { font-size: 14px; line-height: 1.55; color: rgba(13,13,13,.7); max-width: 38ch; margin-top: auto; }
.cs-archive-body .csa-card .csa-cstats { display: grid; grid-template-columns: repeat(2, 1fr); padding: 0 28px; border-top: 1px dashed rgba(13,13,13,.15); }
.cs-archive-body .csa-card .csa-cstats .csa-s { padding: 14px 0; border-right: 1px dashed rgba(13,13,13,.15); display: flex; flex-direction: column; gap: 2px; }
.cs-archive-body .csa-card .csa-cstats .csa-s:last-child { border-right: none; padding-left: 18px; }
.cs-archive-body .csa-card .csa-cstats .csa-s .csa-n { font-family: var(--serif); font-weight: 900; font-size: 24px; letter-spacing: -.02em; color: var(--ct); line-height: 1; }
.cs-archive-body .csa-card .csa-cstats .csa-s .csa-l { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(13,13,13,.55); }
.cs-archive-body .csa-card .csa-cfoot { padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(13,13,13,.08); font-family: var(--grotesk); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--off); }
.cs-archive-body .csa-card .csa-cfoot .csa-arrow { font-family: var(--serif); font-size: 22px; color: var(--ct); transition: transform .25s; }
.cs-archive-body .csa-card:hover .csa-cfoot { background: var(--ctbg); }
.cs-archive-body .csa-card:hover .csa-cfoot .csa-arrow { transform: translateX(6px); }

/* BY SECTOR */
.cs-archive-body .csa-sectors { padding: 88px 48px; background: var(--ink); color: var(--white); position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.06); }
.cs-archive-body .csa-sectors::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 14px 14px; mask: radial-gradient(ellipse 60% 60% at 20% 40%, #000 30%, transparent 80%); -webkit-mask: radial-gradient(ellipse 60% 60% at 20% 40%, #000 30%, transparent 80%); pointer-events: none; }
.cs-archive-body .csa-sectors-inner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: start; position: relative; }
.cs-archive-body .csa-sectors-l h2 { font-family: var(--serif); font-weight: 900; font-size: clamp(40px, 4.6vw, 72px); letter-spacing: -.03em; line-height: .95; color: var(--white); text-wrap: balance; margin-bottom: 24px; }
.cs-archive-body .csa-sectors-l h2 .csa-v { font-style: italic; font-weight: 400; color: var(--flame); }
.cs-archive-body .csa-sectors-l h2 .csa-c { font-style: italic; font-weight: 400; color: var(--cyan); }
.cs-archive-body .csa-sectors-l p { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.7); max-width: 38ch; margin-bottom: 18px; }
.cs-archive-body .csa-sectors-l .csa-num { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 18px; }
.cs-archive-body .csa-sec-list { display: flex; flex-direction: column; }
.cs-archive-body .csa-sec-row { display: grid; grid-template-columns: 60px 1fr auto auto; gap: 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.12); transition: background .25s, padding .25s; }
.cs-archive-body .csa-sec-row:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.cs-archive-body .csa-sec-row:hover { background: rgba(255,255,255,.02); padding-left: 14px; padding-right: 14px; }
.cs-archive-body .csa-sec-row .csa-six { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: rgba(255,255,255,.45); font-weight: 700; }
.cs-archive-body .csa-sec-row h4 { font-family: var(--serif); font-weight: 700; font-size: 26px; letter-spacing: -.02em; line-height: 1; color: var(--white); }
.cs-archive-body .csa-sec-row h4 i { font-style: italic; font-weight: 400; color: var(--accent); }
.cs-archive-body .csa-sec-row .csa-pillars { display: flex; align-items: center; gap: 6px; }
.cs-archive-body .csa-sec-row .csa-pillars span { width: 10px; height: 10px; border-radius: 50%; }
.cs-archive-body .csa-sec-row .csa-pillars span.csa-v { background: var(--flame); }
.cs-archive-body .csa-sec-row .csa-pillars span.csa-c { background: var(--cyan); }
.cs-archive-body .csa-sec-row .csa-pillars span.csa-t { background: var(--green); }
.cs-archive-body .csa-sec-row .csa-sct { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.cs-archive-body .csa-sec-row .csa-sct b { color: var(--white); font-weight: 700; font-family: var(--serif); font-size: 18px; letter-spacing: -.01em; }

/* CTA BAND (gold) */
.cs-archive-body .csa-cta { padding: 96px 48px; background: var(--accent); color: var(--ink); position: relative; overflow: hidden; }
.cs-archive-body .csa-cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(13,13,13,.06) 1px, transparent 1px); background-size: 14px 14px; mask: radial-gradient(ellipse 60% 70% at 80% 50%, #000 30%, transparent 80%); -webkit-mask: radial-gradient(ellipse 60% 70% at 80% 50%, #000 30%, transparent 80%); pointer-events: none; }
.cs-archive-body .csa-cta-inner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: center; position: relative; }
.cs-archive-body .csa-cta h2 { font-family: var(--serif); font-weight: 900; font-size: clamp(40px, 5.6vw, 80px); letter-spacing: -.035em; line-height: .95; color: var(--ink); text-wrap: balance; }
.cs-archive-body .csa-cta h2 i { font-style: italic; font-weight: 400; }
.cs-archive-body .csa-cta-side { display: flex; flex-direction: column; gap: 18px; border-left: 1px solid rgba(13,13,13,.22); padding-left: 32px; }
.cs-archive-body .csa-cta-side p { font-size: 15px; line-height: 1.6; color: rgba(13,13,13,.78); max-width: 36ch; }
.cs-archive-body .csa-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.cs-archive-body .csa-actions a { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 22px; font-family: var(--grotesk); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; border-radius: 100px; transition: transform .2s, background .2s, border-color .2s; }
.cs-archive-body .csa-actions a.csa-primary { background: var(--ink); color: var(--accent); }
.cs-archive-body .csa-actions a.csa-primary:hover { transform: translateX(4px); }
.cs-archive-body .csa-actions a.csa-ghost { border: 1px solid rgba(13,13,13,.3); color: var(--ink); }
.cs-archive-body .csa-actions a.csa-ghost:hover { border-color: var(--ink); background: rgba(13,13,13,.05); }
.cs-archive-body .csa-cta-reply { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(13,13,13,.6); margin-top: 4px; }
.cs-archive-body .csa-cta-reply b { color: var(--ink); font-weight: 700; }

/* Mobile */
@media (max-width: 1100px) {
	.cs-archive-body .csa-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.cs-archive-body .csa-hero { padding: 48px 22px 0; }
	.cs-archive-body .csa-hero-title { font-size: clamp(56px, 16vw, 108px); }
	.cs-archive-body .csa-hero-foot { grid-template-columns: 1fr; gap: 32px; padding-bottom: 36px; }
	.cs-archive-body .csa-hero-meta { justify-self: start; text-align: left; }
	.cs-archive-body .csa-hero-meta .csa-row { justify-content: flex-start; }
	.cs-archive-body .csa-legend { padding: 32px 22px; }
	.cs-archive-body .csa-legend-inner { grid-template-columns: 1fr; border-left: none; border-right: none; border-top: 1px solid rgba(13,13,13,.1); }
	.cs-archive-body .csa-lcol { border-right: none; border-bottom: 1px solid rgba(13,13,13,.1); padding: 22px 0; }
	.cs-archive-body .csa-lcol:last-child { border-bottom: none; }
	.cs-archive-body .csa-idxstrip { padding: 0 22px; }
	.cs-archive-body .csa-idxstrip-inner { flex-wrap: wrap; gap: 12px; padding: 14px 0; }
	.cs-archive-body .csa-idxstrip-inner b { width: 100%; margin-right: 0; margin-bottom: 4px; }
	.cs-archive-body .csa-featured-inner { padding: 48px 22px; }
	.cs-archive-body .csa-fcard { grid-template-columns: 1fr; min-height: 0; }
	.cs-archive-body .csa-fcard-l { padding: 30px 26px 32px; }
	.cs-archive-body .csa-fcard-r { min-height: 240px; border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
	.cs-archive-body .csa-fcard-cta { padding: 14px 26px; }
	.cs-archive-body .csa-fcard h2 { font-size: clamp(40px, 12vw, 72px); }
	.cs-archive-body .csa-fcard .csa-frame { font-size: 18px; }
	.cs-archive-body .csa-fcard .csa-stat .csa-n { font-size: 28px; }
	.cs-archive-body .csa-grid-sec { padding: 0 22px 56px; }
	.cs-archive-body .csa-grid-head { flex-direction: column; align-items: flex-start; gap: 10px; padding: 36px 0 16px; }
	.cs-archive-body .csa-cards { grid-template-columns: 1fr; gap: 14px; }
	.cs-archive-body .csa-card { min-height: 0; }
	.cs-archive-body .csa-card .csa-top { height: 140px; }
	.cs-archive-body .csa-card .csa-cbody { padding: 22px 24px 14px; }
	.cs-archive-body .csa-card .csa-cbody h3 { font-size: 26px; }
	.cs-archive-body .csa-card .csa-cstats { padding: 0 24px; }
	.cs-archive-body .csa-card .csa-cfoot { padding: 14px 24px; }
	.cs-archive-body .csa-sectors { padding: 64px 22px; }
	.cs-archive-body .csa-sectors-inner { grid-template-columns: 1fr; gap: 32px; }
	.cs-archive-body .csa-sec-row { grid-template-columns: auto 1fr auto; gap: 14px; }
	.cs-archive-body .csa-sec-row .csa-six { display: none; }
	.cs-archive-body .csa-sec-row .csa-sct { display: none; }
	.cs-archive-body .csa-cta { padding: 64px 22px; }
	.cs-archive-body .csa-cta-inner { grid-template-columns: 1fr; gap: 32px; }
	.cs-archive-body .csa-cta-side { border-left: none; border-top: 1px solid rgba(13,13,13,.22); padding-left: 0; padding-top: 24px; }
}

/* =====================================================================
   LEGAL. Privacy / Cookie policy. Long-form structured docs with
   sticky TOC. Ink-on-off body; the foot section is the dark anchor.
   ===================================================================== */

.legal-body { min-height: 100vh; background: var(--off); color: var(--ink); }
.legal-body .legal-inner { max-width: 1200px; margin: 0 auto; padding: 0 48px; }

/* Hero */
/* Hero: the pg3-mast--ink full-image pattern, shared with about/OSOF.
   The old text-only hero (Fraunces H1, mono eyebrow, flame em) is retired
   (Sean, 30 Jul 2026). Only the date stamp is styled here, for the scrim. */
.legal-body .legal-stamp--hero { display: flex; gap: 24px; flex-wrap: wrap; font-weight: 350; font-size: 13.5px; margin: clamp(20px, 2.4vw, 28px) 0 0; color: rgba(255,255,255,.78); }
.legal-body .legal-stamp--hero span + span::before { content: '·'; margin-right: 24px; color: rgba(255,255,255,.4); }

/* Doc body. TOC + prose */
.legal-body .legal-doc { padding: 80px 0 100px; }
.legal-body .legal-doc .legal-inner { display: grid; grid-template-columns: 240px 1fr; gap: 80px; align-items: start; }

.legal-body .legal-toc { position: sticky; top: 100px; align-self: start; }
.legal-body .legal-toc-h { font-family: var(--font); font-weight: 600; font-size: 13px; letter-spacing: 0; text-transform: none; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12); color: rgba(13,13,13,.5); border-bottom-color: rgba(13,13,13,.12); }
.legal-body .legal-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: legal-toc; }
.legal-body .legal-toc li { counter-increment: legal-toc; margin: 0 0 10px; }
.legal-body .legal-toc a { display: block; padding: 6px 0; position: relative; font-family: var(--sans); font-size: 13px; line-height: 1.4; text-decoration: none; transition: color .18s ease; color: rgba(13,13,13,.7); }
/* Section numerals removed 29 Jul 2026: "01 02 03" beside a contents list is
   the section-number eyebrow, and a numbered <ol> already carries the order for
   anyone who needs it. */
.legal-body .legal-toc a:hover { color: var(--flame); }

.legal-body .legal-prose { font-family: var(--font); font-weight: 350; font-size: 16px; line-height: 1.65; max-width: 70ch; color: rgba(13,13,13,.85); }
.legal-body .legal-sec { padding: 0 0 48px; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 48px; border-bottom-color: rgba(13,13,13,.08); }
.legal-body .legal-sec:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.legal-body .legal-sec h2 { font-family: var(--font); font-weight: 700; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 20px; scroll-margin-top: 100px; color: var(--ink); }
.legal-body .legal-sec h3 { font-family: var(--font); font-weight: 700; font-size: 17px; letter-spacing: -.012em; text-transform: none; margin: 28px 0 12px; color: var(--ink); }
.legal-body .legal-sec p { margin: 0 0 16px; }
.legal-body .legal-sec p:last-child { margin-bottom: 0; }
.legal-body .legal-sec a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; color: var(--sw-4-mid); }
.legal-body .legal-sec a:hover { color: var(--ink); }
.legal-body .legal-sec strong, .legal-body .legal-sec b { font-weight: 700; color: var(--ink); }
.legal-body .legal-sec ul, .legal-body .legal-sec ol { margin: 12px 0 20px; padding-left: 24px; }
.legal-body .legal-sec li { margin: 0 0 10px; padding-left: 6px; }
.legal-body .legal-sec li::marker { color: var(--sw-4-mid); }

/* Cookie tables */
.legal-body .legal-table-wrap { overflow-x: auto; margin: 16px 0 24px; border: 1px solid rgba(255,255,255,.1); border-color: rgba(13,13,13,.12); }
.legal-body .legal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.legal-body .legal-table th { font-family: var(--font); font-size: 13px; letter-spacing: 0; text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.12); font-weight: 600; color: rgba(13,13,13,.62); background: rgba(13,13,13,.04); border-bottom-color: rgba(13,13,13,.12); }
.legal-body .legal-table td { padding: 14px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; color: rgba(13,13,13,.8); border-bottom-color: rgba(13,13,13,.06); }
.legal-body .legal-table tr:last-child td { border-bottom: none; }
.legal-body .legal-table code { font-family: var(--mono); font-size: 13px; padding: 2px 6px; border-radius: 2px; word-break: break-word; color: var(--sw-4-mid); background: rgba(240,101,34,.08); }

/* Foot */
/* Foot ask. Mist, not ink: the hero is this page's one ink band. The old
   band (Fraunces italic, flame box with an arrow) is retired; the CTA is
   the shared btn3 sweep. */
.legal-body .legal-foot { padding: clamp(64px, 8vw, 96px) 0; background: var(--mist); color: var(--ink); }
.legal-body .legal-foot-inner { max-width: 760px; text-align: center; }
.legal-body .legal-foot .legal-foot-h { font-family: var(--font); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.02em; margin: 0 auto 16px; max-width: none; color: var(--ink); }
.legal-body .legal-foot .legal-foot-p { font-family: var(--font); font-weight: 350; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.65; margin: 0 auto 28px; max-width: 56ch; color: rgba(13,13,13,.78); }
.legal-body .legal-foot .legal-foot-p a { font-weight: 600; color: var(--ink); box-shadow: inset 0 -1px 0 0 var(--sw-4-mid); }
.legal-body .legal-foot .legal-foot-p a:hover { color: var(--sw-4-mid); }

/* Mobile */
@media (max-width: 900px) {
	.legal-body .legal-inner { padding: 0 22px; }
	.legal-body .legal-hero { padding: 64px 0 40px; }
	.legal-body .legal-doc { padding: 48px 0 64px; }
	.legal-body .legal-doc .legal-inner { grid-template-columns: 1fr; gap: 32px; }
	.legal-body .legal-toc { position: static; padding: 18px 20px; border: 1px solid rgba(255,255,255,.08); background: rgba(13,13,13,.03); border-color: rgba(13,13,13,.1); }
		.legal-body .legal-foot { padding: 56px 0; }
	.legal-body .legal-table { font-size: 12px; }
	.legal-body .legal-table th, .legal-body .legal-table td { padding: 10px 8px; }
}

/* ============================================================
   Animated PB wordmark — placements
   The SVG itself carries the keyframe animations (16s spectrum
   loop on 8 cube faces). These rules just size and frame the
   wordmark for each context. Loaded via <img> so the SVG IDs
   sandbox per-instance and don't collide.
   ============================================================ */

/* Footer logo — animated variant. The img inherits .v1__footer-logo +
   .brand-logo__svg sizing (56px tall, max 240px wide). */
.v1__footer-logo--animated img { display: block; }

/* 404 page — dark band so the grey wordmark always reads */
.not-found {
	padding: 120px 0 140px;
	text-align: center;
	background: var(--ink);
	color: var(--white);
}
.not-found__signal {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--flame);
	margin-bottom: 40px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.not-found__signal .dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--flame);
	display: inline-block;
}
.not-found__h1 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.4rem, 5vw, 4.4rem);
	line-height: 1.04;
	letter-spacing: -.025em;
	margin-bottom: 20px;
}
.not-found__h1 em {
	font-style: italic;
	font-weight: 400;
	color: var(--flame);
}
.not-found__h1 .ghost {
	display: block;
	color: rgba(255, 255, 255, .35);
	font-weight: 700;
}
/* The .not-found section is dark-baked (background: --ink), so all child
   colours stay white-on-dark against the light site field. */
.not-found__deck {
	font-size: 17px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .7);
	max-width: 52ch;
	margin: 0 auto 36px;
}
.not-found__ctas {
	display: inline-flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}
/* Outlined CTA — works on the dark 404 band. The base .btn sweep carries
   the hover (fill from the left, ink text), so only the ring is declared. */
.not-found__ctas .btn--outline {
	background-color: transparent;
	color: var(--white);
	box-shadow: inset 0 0 0 1.5px var(--ring-w);
}
@media (max-width: 720px) {
	.not-found { padding: 64px 0 80px; }
	.not-found__ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin: 0 auto; }
}

/* ---- Contact drawer ----
   Right-edge slide-in on desktop, full-screen on mobile. Always dark. */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	justify-content: flex-end;
}
.drawer[hidden] { display: none !important; }

.drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	cursor: pointer;
	animation: drawer-fade .25s ease;
}
@keyframes drawer-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* The panel wears the page's own register (tokens v3, 30 Jul 2026): paper,
   ink type, Biennale. The old panel was the pre-v3 dark card, Fraunces
   heading, accent-yellow button; all retired. */
.drawer__panel {
	position: relative;
	width: 440px;
	max-width: 100%;
	height: 100%;
	background: var(--paper);
	color: var(--ink);
	overflow-y: auto;
	animation: drawer-slide .3s cubic-bezier(.4, 0, .2, 1);
	box-shadow: -8px 0 40px rgba(0, 0, 0, .25);
}
@keyframes drawer-slide {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

.drawer__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	border: 0;
	box-shadow: inset 0 0 0 1.5px var(--ring-ink);
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s;
	z-index: 1;
}
.drawer__close:hover {
	background: var(--ink);
	color: var(--white);
}

.drawer__body {
	padding: 72px 36px 48px;
}

/* Photograph heading a drawer (the teardown's engine shot): full-bleed
   across the panel, the close button picks up a solid ground to stay
   legible over it. */
.drawer__media {
	margin: 0;
	height: 172px;
}
.drawer__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.drawer__media + .drawer__body { padding-top: 32px; }
.drawer__panel:has(.drawer__media) .drawer__close {
	background: var(--white);
}

/* Book-the-call drawer: the booking embed fills the panel rather than
   sitting in a default-sized iframe box (Sean, 30 Jul 2026 — mobile was
   "bound in a box"). The panel becomes a column and the booker takes the
   remaining height. */
.drawer--book .drawer__panel {
	display: flex;
	flex-direction: column;
}
.drawer--book .drawer__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	padding-bottom: 20px;
}
.drawer--book .svc3-booker {
	flex: 1;
	min-height: 480px;
	margin: 0 -12px;
}
.drawer--book .svc3-booker iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 480px;
	border: 0;
}
.drawer--book .svc3-booker__fallback {
	margin: 10px 0 0;
	font-size: 13.5px;
}
.drawer--book .svc3-booker__fallback a {
	color: var(--ink);
	box-shadow: inset 0 -1px 0 0 rgba(13, 13, 13, .3);
}
.drawer__heading {
	font-family: var(--font);
	font-size: 28px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 8px;
	letter-spacing: -.02em;
}
.drawer__intro {
	font-weight: 350;
	font-size: 15px;
	color: rgba(13, 13, 13, .72);
	margin: 0 0 32px;
	line-height: 1.5;
}
.drawer__form { margin: 0 0 24px; }

/* Gravity Forms overrides scoped to the drawer panel */
.drawer__form .gform_wrapper { margin: 0; }
.drawer__form .gform_heading { display: none; }
.drawer__form form { margin: 0; }
.drawer__form .gform-body { margin: 0; padding: 0; }

.drawer__form .gform_fields {
	display: flex !important;
	flex-direction: column !important;
	/* Rows sit clearly apart (26px) while a label hugs its own input (8px,
	   the .gfield flex gap): the old 20/16 split read as labels floating
	   between fields (Sean's drawer sweep, 30 Jul 2026). */
	gap: 26px !important;
	grid-row-gap: 0 !important;
	grid-column-gap: 0 !important;
	list-style: none;
	padding: 0;
	margin: 0;
}
.drawer__form .gfield {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 !important;
	margin: 0 !important;
	border: 0;
	width: 100% !important;
	max-width: none !important;
	grid-column: 1 / -1 !important;
}
.drawer__form .gfield_label,
.drawer__form .gform-field-label {
	/* EYEBROWS PURGED 29 Jul 2026. This was mono 11px uppercase at .14em, set
	   with !important, and the contact drawer renders on every page, so it was
	   the most-seen eyebrow on the site. Now a label: Biennale, sentence case. */
	font-family: var(--font) !important;
	font-size: 14px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--ink) !important;
	font-weight: 600;
	margin: 0;
	padding: 0;
}
/* "(Required)" was mono uppercase in the retired accent. A required field is
   marked by its own validation, not by a shouted parenthesis. */
.drawer__form .gfield_required { display: none; }
.drawer__form .ginput_container { margin-top: 0; }
.drawer__form .ginput_container input[type="text"],
.drawer__form .ginput_container input[type="email"],
/* url + tel: GF website fields render type="url", which slipped this list
   and drew the browser-default input (Sean's screenshot, 30 Jul 2026). */
.drawer__form .ginput_container input[type="url"],
.drawer__form .ginput_container input[type="tel"],
.drawer__form .ginput_container textarea {
	background: var(--white) !important;
	border: 0 !important;
	box-shadow: inset 0 0 0 1.5px var(--ring-ink);
	border-radius: var(--radius-control);
	padding: 14px 18px;
	min-height: 52px;
	color: var(--ink);
	font-family: var(--font);
	font-weight: 350;
	font-size: 16px;
	transition: box-shadow .15s;
	width: 100%;
	box-sizing: border-box;
}
/* Selects (the project intake's "What's the project?" and sector fields)
   wear the same control skin as the inputs, with an ink chevron. */
.drawer__form .ginput_container select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230D0D0D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center !important;
	border: 0 !important;
	box-shadow: inset 0 0 0 1.5px var(--ring-ink);
	border-radius: var(--radius-control);
	padding: 14px 44px 14px 18px;
	min-height: 52px;
	color: var(--ink);
	font-family: var(--font);
	font-weight: 350;
	font-size: 16px;
	transition: box-shadow .15s;
	width: 100%;
	box-sizing: border-box;
	cursor: pointer;
}
.drawer__form .ginput_container input:focus,
.drawer__form .ginput_container textarea:focus,
.drawer__form .ginput_container select:focus {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	background-color: var(--white) !important;
}
.drawer__form .ginput_container textarea {
	resize: vertical;
	min-height: 120px;
	line-height: 1.55;
}

/* Turnstile captcha field */
.drawer__form .gfield--type-captcha {
	padding-top: 4px;
}
.drawer__form .gfield--type-captcha .gfield_label { display: none; }
.drawer__form .gfield--type-captcha .ginput_container {
	display: flex;
	justify-content: center;
}
.drawer__form .gfield--type-captcha iframe {
	border-radius: 8px;
	color-scheme: light;
}

.drawer__form .gform_footer {
	padding: 0 !important;
	margin: 8px 0 0 !important;
	border: 0;
}
/* Submit wears the sweep, same as every other control (tokens v3). Ink at
   rest, the destination swatch fills from the left on hover. The old
   accent-yellow pill is retired. */
.drawer__form .gform_wrapper .gform_footer .gform_button,
.drawer__form .gform_wrapper input[type="submit"].gform_button,
.drawer__form .gform_wrapper.gravity-theme .gform_footer input[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 52px !important;
	padding: 15px 32px !important;
	border-radius: var(--radius-pill) !important;
	font-family: var(--font) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	letter-spacing: .01em !important;
	color: var(--white) !important;
	border: 0 !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	width: 100% !important;
	background-color: var(--ink) !important;
	background-image: linear-gradient(to right, var(--sweep, var(--sw-4)) 50%, transparent 50%) !important;
	background-size: 200% 100% !important;
	background-position: 100% 0 !important;
	background-repeat: no-repeat !important;
	transition: background-position var(--dur-move) var(--ease-reveal), color var(--dur-move) var(--ease-state) !important;
}
.drawer__form .gform_wrapper .gform_button:hover,
.drawer__form .gform_wrapper input[type="submit"].gform_button:hover,
.drawer__form .gform_wrapper .gform_button:focus-visible,
.drawer__form .gform_wrapper input[type="submit"].gform_button:focus-visible {
	background-position: 0 0 !important;
	color: var(--ink) !important;
}

.drawer__form .gfield--type-honeypot,
.drawer__form .gform_validation_container {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}
.drawer__form .gform_validation_errors {
	background: transparent;
	border: 0;
	box-shadow: inset 0 0 0 2.5px var(--error);
	border-radius: var(--radius-control);
	padding: 14px 18px;
	margin: 0 0 22px;
	color: var(--error);
}
.drawer__form .gform_validation_errors > h2 {
	font-family: var(--font);
	font-weight: 600;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
	color: inherit;
}
.drawer__form .gfield_validation_message,
.drawer__form .validation_message {
	color: var(--error);
	font-weight: 600;
	font-size: 13.5px;
	margin-top: 4px;
	background: transparent;
	padding: 0;
	border: 0;
}
.drawer__form .gfield_error .ginput_container input,
.drawer__form .gfield_error .ginput_container textarea {
	box-shadow: inset 0 0 0 2.5px var(--error);
}
.drawer__form .gform_ajax_spinner { margin-left: 12px; vertical-align: middle; }

.drawer__book-link {
	font-weight: 350;
	font-size: 13.5px;
	color: rgba(13, 13, 13, .66);
	text-align: center;
}
.drawer__book-link a {
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	box-shadow: inset 0 -1px 0 0 var(--sw-5-mid);
}
.drawer__book-link a:hover { color: var(--sw-5-mid); }

@media (max-width: 720px) {
	.drawer__panel { width: 100%; }
	.drawer__body { padding: 64px 24px 36px; }
	.drawer__heading { font-size: 28px; }
}

/* ---- Celebration overlay (post-submission) ---- */
.celebration {
	position: fixed;
	inset: 0;
	z-index: 9500;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--paper);
	animation: cel-in .4s ease;
}
.celebration[hidden] { display: none !important; }
@keyframes cel-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.celebration__burst {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.celebration__content {
	position: relative;
	text-align: center;
	padding: 48px 32px;
	color: var(--ink);
}
.celebration__content h3 {
	font-family: var(--font);
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 12px;
	letter-spacing: -.02em;
}
.celebration__content p {
	font-weight: 350;
	font-size: 16px;
	color: rgba(13, 13, 13, .66);
	margin: 0;
}

/* ============================================================
   WK. Case Studies Archive (/case-study/)
   Rebuilt May 2026 from Claude Design mockup.
   ============================================================ */

.page--case-studies-archive { background: var(--ink); }

/* ---- Hero ---- */
.wk-hero {
	padding: clamp(80px, 12vw, 140px) 0 clamp(40px, 6vw, 64px);
}

.wk-title {
	font-family: var(--grotesk);
	font-weight: 900;
	font-size: clamp(3rem, 9vw, 9rem);
	line-height: .88;
	letter-spacing: -.04em;
	text-transform: uppercase;
	color: var(--white);
}

.wk-title > span { display: block; }

.wk-title em {
	font-family: var(--serif);
	font-weight: 300;
	font-style: italic;
	text-transform: none;
	color: var(--cyan);
}

.wk-stop { color: var(--green); }

.wk-deck {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(16px, 2vw, 20px);
	line-height: 1.5;
	color: rgba(255, 255, 255, .6);
	margin-top: 28px;
	max-width: 600px;
}

/* ---- Sticky filter bar ---- */
.wk-filters {
	position: sticky;
	top: 0;
	z-index: 10;
	padding: 18px 0;
	background: rgba(13, 13, 13, .85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.wk-filter-row {
	display: flex;
	gap: 4px;
	align-items: center;
}

.wk-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: 100px;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, .45);
	background: transparent;
	transition: all .2s;
	cursor: pointer;
}

.wk-pill:hover { color: rgba(255, 255, 255, .8); }

.wk-pill--active {
	background: rgba(255, 255, 255, .1);
	color: var(--white);
}

.wk-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* ---- Featured case ---- */
.wk-featured { padding: 72px 0 0; }

.wk-feat-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.wk-feat-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 56px;
	align-items: start;
}

.wk-feat-img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--ink);
}

.wk-feat-img::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(to top, rgba(0, 0, 0, .5) 0%, transparent 100%);
	z-index: 1;
	pointer-events: none;
}

.wk-feat-img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(170deg, transparent 20%, var(--p-tone, var(--flame)) 100%);
	opacity: .35;
	mix-blend-mode: hard-light;
	z-index: 2;
	pointer-events: none;
}

.wk-feat-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(.15);
	transition: filter .4s, transform .6s;
}

.wk-feat-link:hover .wk-feat-img img {
	filter: grayscale(0);
	transform: scale(1.02);
}

.wk-feat-name {
	position: absolute;
	bottom: 32px;
	left: 32px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
}

.wk-feat-name span {
	font-family: var(--serif);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(2rem, 4vw, 3.5rem);
	line-height: 1;
	color: rgba(255, 255, 255, .65);
	letter-spacing: -.02em;
}

.wk-feat-name b {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	line-height: .92;
	color: var(--white);
	letter-spacing: -.03em;
}

.wk-feat-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px 0;
}

.wk-feat-h2 {
	font-family: var(--serif);
	font-weight: 700;
	font-size: clamp(1.8rem, 3vw, 2.8rem);
	line-height: 1.12;
	letter-spacing: -.02em;
	color: var(--white);
}

.wk-feat-h2 em {
	font-style: italic;
	font-weight: 300;
}

.wk-feat-frame {
	font-family: var(--sans);
	font-size: 15px;
	font-style: italic;
	line-height: 1.65;
	color: rgba(255, 255, 255, .45);
	margin-top: 20px;
}

/* ---- Shared read link ---- */
.wk-read-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, .45);
	margin-top: 24px;
	transition: color .2s;
}

.wk-feat-link:hover .wk-read-link,
.wk-card:hover .wk-read-link { color: var(--white); }

.wk-read-link > span { display: inline-block; transition: transform .2s; }

.wk-feat-link:hover .wk-read-link > span,
.wk-card:hover .wk-read-link > span { transform: translateX(4px); }

/* ---- Grid section ---- */
.wk-grid-sec { padding: 40px 0 96px; }

.wk-cards {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 28px;
}

.wk-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	grid-column: span 4;
}

/* Alternating wide/narrow layout */
.wk-card:nth-child(4n+1) { grid-column: span 8; }
.wk-card:nth-child(4n+2) { grid-column: span 4; }
.wk-card:nth-child(4n+3) { grid-column: span 4; }
.wk-card:nth-child(4n+4) { grid-column: span 8; }

/* When 5+ cards exist, last group gets equal thirds */
.wk-card:nth-child(n+5) { grid-column: span 4; }

/* ---- Card image ---- */
.wk-card-img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--ink);
}

/* Wide cards get landscape ratio */
.wk-card:nth-child(4n+1) .wk-card-img,
.wk-card:nth-child(4n+4) .wk-card-img { aspect-ratio: 16 / 10; }
.wk-card:nth-child(n+5) .wk-card-img  { aspect-ratio: 4 / 5; }

.wk-card-img::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, transparent 100%);
	z-index: 1;
	pointer-events: none;
}

.wk-card-img::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(170deg, transparent 20%, var(--p-tone, var(--flame)) 100%);
	opacity: .3;
	mix-blend-mode: hard-light;
	z-index: 1;
	pointer-events: none;
}

.wk-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(.15);
	transition: filter .4s, transform .6s;
}

.wk-card:hover .wk-card-img img {
	filter: grayscale(0);
	transform: scale(1.03);
}

/* ---- Card name overlay ---- */
.wk-card-name {
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.wk-card-name span {
	font-family: var(--serif);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(1.3rem, 2vw, 1.8rem);
	line-height: 1;
	color: rgba(255, 255, 255, .6);
	letter-spacing: -.02em;
}

.wk-card-name b {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(1.6rem, 3vw, 2.6rem);
	line-height: .92;
	color: var(--white);
	letter-spacing: -.03em;
}

/* ---- Card body ---- */
.wk-card-body { padding: 20px 0 0; }

.wk-card-body h3 {
	font-family: var(--serif);
	font-weight: 700;
	font-size: clamp(1.2rem, 1.8vw, 1.7rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--white);
}

.wk-card-body p {
	font-family: var(--sans);
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .4);
	margin-top: 10px;
}

/* ---- CTA band ---- */
.wk-cta {
	background: var(--off);
	padding: clamp(64px, 8vw, 120px) 0;
}

.wk-cta-inner {
	max-width: 720px;
	text-align: center;
	margin: 0 auto;
}

.wk-cta h2 {
	font-family: var(--serif);
	font-weight: 700;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.12;
	letter-spacing: -.02em;
	color: var(--ink);
}

.wk-cta h2 i {
	font-style: italic;
	font-weight: 300;
}

.wk-cta .wk-stop { color: var(--green); }

.wk-cta p {
	font-size: 16px;
	line-height: 1.65;
	color: rgba(13, 13, 13, .5);
	margin-top: 16px;
}

.wk-cta-btns {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 32px;
	flex-wrap: wrap;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
	.wk-feat-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.wk-feat-body { padding: 0 0 24px; }
	.wk-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.wk-card,
	.wk-card:nth-child(4n+1),
	.wk-card:nth-child(4n+2),
	.wk-card:nth-child(4n+3),
	.wk-card:nth-child(4n+4),
	.wk-card:nth-child(n+5) { grid-column: span 1; }

	.wk-card-img,
	.wk-card:nth-child(4n+1) .wk-card-img,
	.wk-card:nth-child(4n+4) .wk-card-img,
	.wk-card:nth-child(n+5) .wk-card-img { aspect-ratio: 4 / 5; }
}

@media (max-width: 600px) {
	.wk-title { font-size: clamp(2.5rem, 13vw, 4.5rem); }
	.wk-cards { grid-template-columns: 1fr; }
	.wk-card-img,
	.wk-card:nth-child(4n+1) .wk-card-img,
	.wk-card:nth-child(4n+4) .wk-card-img,
	.wk-card:nth-child(n+5) .wk-card-img { aspect-ratio: 16 / 10; }
	.wk-feat-name span { font-size: 1.5rem; }
	.wk-feat-name b { font-size: 2rem; }
	.wk-cta-btns { flex-direction: column; align-items: stretch; }
	.wk-cta-btns .btn { justify-content: center; }
	.wk-filter-row {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.wk-filter-row::-webkit-scrollbar { display: none; }
}

/* ============================================================
   Gallery. Overlay button on a team photo + lightbox.
   Button is monochrome by design (parent .pic has grayscale()).
   ============================================================ */
.pb-gallery-btn {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 11px;
	border-radius: 999px;
	background: rgba(13, 13, 13, .72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	opacity: .92;
	transition: opacity .25s, transform .25s, background .25s;
}
.pb-gallery-btn__icon { flex: none; }
.pb-gallery-btn:hover,
.pb-gallery-btn:focus-visible {
	opacity: 1;
	transform: translateY(-2px);
	background: #0d0d0d;
}
.pb-gallery-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- Lightbox ---- */
.pb-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9600;
	display: flex;
	flex-direction: column;
}
.pb-lightbox[hidden] { display: none; }
.pb-lightbox__overlay {
	position: absolute;
	inset: 0;
	background: #080808;
}
.pb-lightbox__chrome {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1280px;
	height: 100%;
	margin: 0 auto;
	padding: clamp(16px, 3vw, 40px);
}
.pb-lightbox__head {
	flex: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: clamp(16px, 2vw, 28px);
}
.pb-lightbox__title {
	font-family: var(--serif);
	font-size: clamp(20px, 3vw, 30px);
	font-weight: 700;
	color: #fff;
}
.pb-lightbox__intro {
	margin-top: 6px;
	max-width: 54ch;
	color: rgba(255, 255, 255, .6);
	font-size: 14px;
}
.pb-lightbox__close {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
}
.pb-lightbox__close:hover { background: rgba(255, 255, 255, .18); }

/* grid */
.pb-lightbox__grid {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	grid-auto-rows: min-content;
	align-content: start;
	gap: 10px;
	padding-bottom: 10px;
}
.pb-lightbox__grid[hidden] { display: none; }
.pb-lightbox__thumb {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 4px;
	background: #161616;
}
.pb-lightbox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.pb-lightbox__thumb:hover img,
.pb-lightbox__thumb:focus-visible img { transform: scale(1.06); }
.pb-lightbox__thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pb-lightbox__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px 10px 8px;
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: left;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .25s, transform .25s;
}
.pb-lightbox__thumb:hover .pb-lightbox__cap,
.pb-lightbox__thumb:focus-visible .pb-lightbox__cap {
	opacity: 1;
	transform: none;
}

/* stage (full viewer) */
.pb-lightbox__stage {
	flex: 1;
	min-height: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	position: relative;
}
.pb-lightbox__stage[hidden] { display: none; }
.pb-lightbox__imgwrap {
	flex: 1;
	min-width: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pb-lightbox__img {
	max-width: 100%;
	max-height: calc(100vh - 220px);
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.pb-lightbox__nav {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
}
.pb-lightbox__nav:hover { background: rgba(255, 255, 255, .2); }
.pb-lightbox__figcap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 14px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}
.pb-lightbox__figcap-count { color: rgba(255, 255, 255, .45); }
.pb-lightbox__back {
	position: absolute;
	top: -2px;
	left: 0;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
	transition: color .2s;
}
.pb-lightbox__back:hover { color: #fff; }

@media (max-width: 640px) {
	.pb-lightbox__intro { display: none; }
	.pb-lightbox__grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
	.pb-lightbox__img { max-height: calc(100vh - 170px); }
	.pb-lightbox__nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 42px;
		height: 42px;
		background: rgba(0, 0, 0, .45);
		z-index: 2;
	}
	.pb-lightbox__nav--prev { left: 0; }
	.pb-lightbox__nav--next { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pb-gallery-btn,
	.pb-lightbox__thumb img,
	.pb-lightbox__cap { transition: none; }
}

/* ============================================================
   CHARTS · pb-chart
   Server-rendered SVG charts (inc/charts.php). White panel on
   every theme, hairline rules, mono labels, tone via
   --chart-tone (defaults to the page's --p-tone).
   ============================================================ */

.pb-chart {
	margin: 40px 0;
	background: var(--white);
	border: 1px solid rgba(13, 13, 13, .08);
	padding: 22px 26px 18px;
	color: var(--ink);
}
.pb-chart-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.pb-chart-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.pb-chart-title b { font-weight: 700; }
.pb-chart-dot {
	width: 8px;
	height: 8px;
	background: var(--chart-tone, var(--p-tone, var(--flame)));
	flex: none;
}
.pb-chart-tag {
	font-size: 9px;
	padding: 3px 8px;
	border: 1px solid rgba(13, 13, 13, .18);
	color: rgba(13, 13, 13, .62);
	white-space: nowrap;
}
.pb-chart-meta {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .5);
	text-align: right;
}
.pb-chart-canvas svg { width: 100%; height: auto; display: block; overflow: visible; }
.pb-chart-note {
	margin: 14px 0 0;
	font-family: var(--sans);
	font-size: 14px;
	font-style: italic;
	color: rgba(13, 13, 13, .68);
}
.pb-chart-data { margin-top: 14px; border-top: 1px solid rgba(13, 13, 13, .08); }
.pb-chart-data summary {
	cursor: pointer;
	padding: 10px 0;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .55);
}
.pb-chart-data summary:hover { color: var(--ink); }
.pb-chart-data table {
	width: 100%;
	border-collapse: collapse;
	margin: 4px 0 12px;
	font-family: var(--sans);
	font-size: 13px;
}
.pb-chart-data th,
.pb-chart-data td {
	text-align: left;
	padding: 7px 12px 7px 0;
	border-bottom: 1px solid rgba(13, 13, 13, .07);
}
.pb-chart-data thead th {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .5);
	font-weight: 500;
}
.pb-chart-data tbody th { font-weight: 600; }
.pb-chart-source {
	margin-top: 12px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .5);
}

/* Charts sit on dark sections occasionally (journal dark bands): flip via context. */
.pb-chart--on-dark {
	background: var(--white); /* Panels stay white, matching cs-evchart. */
}

/* ---- Screenshot figure. A journal article's own captures, in the chart's
   frame so evidence reads the same whether it is plotted or captured
   (J.19, 2 Aug 2026). Images stack full width because the SpeedVitals
   captures are wide and short: side by side they halve to unreadable.
   Source line is the chart's, per the Chart Specifications house rule
   (ruling 59) which governs every figure, not only plotted ones.
   NB the name: .pb-proof was taken (the 420px-capped proof card in
   inc/components.php), and reusing it capped these figures at 420px. ---- */
.pb-shot {
	margin: 40px 0;
	background: var(--white);
	border: 1px solid rgba(13, 13, 13, .08);
	padding: 22px 26px 18px;
	color: var(--ink);
}
.pb-shot img {
	display: block;
	width: 100%;
	height: auto;
}
.pb-shot__item + .pb-shot__item { margin-top: 24px; }
/* Which capture is which. Grade D and grade A do say it, but only to a
   reader who already knows what they are looking at (Sean, 2 Aug 2026:
   "no clear indication that Before and After on the images"). Set in the
   same 14px/700 as the results table's own Before and After column
   headers, which sit a few lines below in this section. Not an eyebrow:
   no mono, no uppercase, no invented micro-copy. */
.pb-shot__label {
	margin: 0 0 10px;
	font-family: var(--font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--ink);
}
/* Each capture is a zoom trigger into the shared lightbox, same as the
   case-study evidence figures. The button is the layout box, so the
   image rules above have to reach through it. */
.pb-shot__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; }
.pb-shot__zoom:focus-visible { outline: 2px solid var(--sw-4, #F06522); outline-offset: 3px; }
/* On a phone a wide, short capture fitted to the screen is no bigger than
   it was in the article, which defeats the zoom. In THIS gallery only, the
   stage renders the capture large and scrolls sideways. gallery.js binds no
   touch gestures, so nothing fights the scroll. */
@media (max-width: 760px) {
	#pb-gallery-journal-figures .pb-lightbox__imgwrap {
		overflow-x: auto;
		justify-content: flex-start;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}
	#pb-gallery-journal-figures .pb-lightbox__img {
		max-width: none;
		width: 900px;
		max-height: none;
	}
}

/* Data tables in article bodies reuse the research table (.res2-table),
   which already stacks one record per block below 640px. It only needs
   its rhythm setting inside the reading column. */
.blp__body .article .res2-table { margin: 32px 0 40px; }

@media (max-width: 640px) {
	.pb-chart { padding: 16px 14px 12px; margin: 28px 0; }
	.pb-chart-head { flex-direction: column; gap: 6px; }
	.pb-chart-meta { text-align: left; }
}

/* ============================================================
   LAYER COMPONENTS · pb-*
   Shared renderers in inc/components.php. Dark-first like the
   rest of the theme; light-mode inherits ink-on-off correctly
   for most blocks (see theme CLAUDE.md).
   ============================================================ */

.pb-stats { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 28px 0; padding: 0; list-style: none; }
.pb-stats__chip { display: flex; flex-direction: column; gap: 2px; }
.pb-stats__value { font-family: var(--serif); font-weight: 700; font-size: 28px; color: var(--p-tone, var(--flame)); }
.pb-stats__label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }

.pb-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 36px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); border-color: rgba(13,13,13,.1); }
.pb-trust__logo { height: 28px; width: auto; opacity: .75; }
.pb-trust__name { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }

.pb-proof { background: var(--white); color: var(--ink); border: 1px solid rgba(13,13,13,.08); padding: 20px 22px; max-width: 420px; }
.pb-proof__head { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(13,13,13,.55); margin-bottom: 12px; }
.pb-proof__rows { margin: 0; }
.pb-proof__rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(13,13,13,.07); }
.pb-proof__rows dt { font-family: var(--sans); font-size: 13px; color: rgba(13,13,13,.7); }
.pb-proof__rows dd { font-family: var(--serif); font-weight: 700; font-size: 15px; margin: 0; }
.pb-proof__stamp { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(13,13,13,.55); }
.pb-proof__stamp i { font-style: italic; color: var(--p-tone, var(--flame)); }
.pb-proof__link { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }

.pb-quote { margin: 48px 0; padding: 0 0 0 26px; border-left: 3px solid var(--p-tone, var(--flame)); }
.pb-quote p { font-family: var(--serif); font-size: clamp(20px, 2.6vw, 28px); line-height: 1.4; font-style: italic; margin: 0 0 14px; }
.pb-quote footer { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.pb-quote footer b { font-weight: 700; }
.pb-quote footer span { display: block; margin-top: 2px; opacity: .8; }

.pb-steps { list-style: none; margin: 32px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; border: 1px solid rgba(255,255,255,.08); background: rgba(13,13,13,.1); border-color: rgba(13,13,13,.1); }
.pb-steps__item { padding: 26px 24px; position: relative; background: var(--off); }
.pb-steps__num { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--p-tone, var(--flame)); }
.pb-steps__item h3 { font-family: var(--grotesk); font-size: 19px; font-weight: 800; margin: 10px 0 8px; }
.pb-steps__item p { font-size: 14px; line-height: 1.6; opacity: .78; margin: 0; }
.pb-steps__when { position: absolute; top: 26px; right: 22px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .5; }

.pb-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; border: 1px solid rgba(255,255,255,.08); margin: 32px 0; background: rgba(13,13,13,.1); border-color: rgba(13,13,13,.1); }
.pb-blocks__cell { padding: 28px 26px; background: var(--off); }
.pb-blocks__cell h3 { font-family: var(--grotesk); font-size: 20px; font-weight: 800; margin: 0 0 10px; }
.pb-blocks__cell p { font-size: 14.5px; line-height: 1.65; opacity: .78; margin: 0 0 14px; }
.pb-blocks__cell a { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--p-tone, var(--flame)); }

.pb-towns { margin: 40px 0; }
.pb-towns h2 { font-family: var(--grotesk); font-weight: 800; font-size: clamp(24px, 3vw, 34px); margin-bottom: 20px; }
.pb-towns__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 24px; }
.pb-towns__grid a { color: inherit; border-bottom: 1px solid var(--p-tone, var(--flame)); }
.pb-towns__grid span { opacity: .45; }

/* Rebuilt onto tokens v3 (30 Jul 2026): the mono-uppercase micro-labels,
   square corners and accent-yellow submit were the pre-v3 register. GF's
   own theme CSS is gone (gform_disable_css in functions.php), so no
   --gf-* var re-pointing is needed any more. */
.pb-capture { margin: 28px 0; max-width: 560px; }
.pb-capture__intro { font-weight: 350; font-size: 15px; opacity: .8; margin-bottom: 12px; }
.pb-capture__stepup { margin-top: 12px; font-weight: 350; font-size: 13.5px; }
.pb-capture__stepup a { font-weight: 600; color: inherit; box-shadow: inset 0 -1px 0 0 var(--sw-5-mid); }
.pb-capture .gform_wrapper form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.pb-capture .gform_wrapper .gform_fields { display: flex; gap: 10px; flex: 1 1 auto; }
.pb-capture .gform_wrapper .gfield label { display: block; font-family: var(--font); font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none; margin: 0 0 8px; opacity: 1; }
.pb-capture .gform_wrapper input[type=email],
.pb-capture .gform_wrapper input[type=url],
.pb-capture .gform_wrapper input[type=text] { box-sizing: border-box; border: 0 !important; box-shadow: inset 0 0 0 1.5px var(--ring-ink); border-radius: var(--radius-control) !important; color: var(--ink) !important; padding: 13px 16px !important; min-height: 48px; font-family: inherit; font-weight: 350; font-size: 16px !important; min-width: 170px; background: var(--white) !important; }
.pb-capture .gform_wrapper .gform_button,
.pb-capture input[type="submit"] {
	min-height: 48px;
	padding: 13px 26px !important;
	border: 0 !important;
	border-radius: var(--radius-pill) !important;
	cursor: pointer;
	font-family: var(--font) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	color: var(--white) !important;
	background-color: var(--ink) !important;
	background-image: linear-gradient(to right, var(--sweep, var(--sw-4)) 50%, transparent 50%) !important;
	background-size: 200% 100% !important;
	background-position: 100% 0 !important;
	background-repeat: no-repeat !important;
	transition: background-position var(--dur-move) var(--ease-reveal), color var(--dur-move) var(--ease-state);
}
.pb-capture .gform_wrapper .gform_button:hover,
.pb-capture .gform_wrapper .gform_button:focus-visible,
.pb-capture input[type="submit"]:hover,
.pb-capture input[type="submit"]:focus-visible { background-position: 0 0 !important; color: var(--ink) !important; }

.pb-insights { padding: var(--space-section, 80px) 0; }
.pb-insights__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 26px; }
.pb-insights__head h2 { font-family: var(--grotesk); font-weight: 800; font-size: clamp(24px, 3vw, 34px); }
.pb-insights__head a { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: inherit; opacity: .7; }
.pb-insights__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.pb-insights__card { display: block; padding: 24px 22px; border: 1px solid rgba(255,255,255,.1); color: inherit; border-color: rgba(13,13,13,.12); }
.pb-insights__card:hover h3 { color: var(--p-tone, var(--flame)); }
.pb-insights__meta { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.pb-insights__card h3 { font-family: var(--grotesk); font-size: 19px; font-weight: 800; margin-top: 10px; transition: color .18s; }

.pb-jumpnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0; }
.pb-jumpnav a { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 7px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-pill, 100px); color: inherit; opacity: .8; border-color: rgba(13,13,13,.18); }
.pb-jumpnav a:hover { border-color: var(--p-tone, var(--flame)); opacity: 1; }

@media (max-width: 640px) {
	.pb-stats { gap: 10px 20px; }
	.pb-stats__value { font-size: 22px; }
	.pb-capture .gform_wrapper .gform_fields { flex-direction: column; }
}

/* TOC anchors (linked as of the jump-nav fix in single.php). */
.toc li a { color: inherit; text-decoration: none; }
.toc li a:hover { color: var(--p-tone, var(--flame)); }

/* ============================================================
   LAYER TEMPLATES · pb-layer / pb-editorial
   template-location.php, template-sector.php,
   template-editorial.php. Prose rhythm + narrow container.
   ============================================================ */

.container--narrow { max-width: 860px; }

.pb-layer__prose { padding: 56px 0; }
.pb-layer__prose h2 { font-family: var(--grotesk); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 22px; letter-spacing: -.01em; }
.pb-layer__prose p { font-size: 16.5px; line-height: 1.75; opacity: .85; margin: 0 0 18px; max-width: 68ch; }

.pb-layer__services,
.pb-layer__towns,
.pb-layer__proof,
.pb-layer__steps { padding: 56px 0; }
.pb-layer__services h2,
.pb-layer__towns h2,
.pb-layer__proof h2,
.pb-layer__steps h2 { font-family: var(--grotesk); font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 26px; letter-spacing: -.01em; }
.pb-layer__proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 8px; }

.pb-editorial__hero { padding: 64px 0 24px; }
.pb-editorial__byline { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; opacity: .65; margin-top: 18px; }
.pb-editorial__body { padding: 24px 0 64px; }
.pb-editorial__section { margin: 0 0 48px; }
.pb-editorial__section h2 { font-family: var(--grotesk); font-weight: 800; font-size: clamp(24px, 3vw, 36px); margin: 0 0 20px; letter-spacing: -.01em; }
.pb-editorial__section h3 { font-family: var(--grotesk); font-weight: 800; font-size: 21px; margin: 28px 0 12px; }
.pb-editorial__section p { font-size: 16.5px; line-height: 1.75; opacity: .85; margin: 0 0 18px; max-width: 68ch; }
.pb-editorial__section ul,
.pb-editorial__section ol { margin: 0 0 18px 22px; line-height: 1.7; opacity: .85; }
.pb-editorial__section li { margin-bottom: 8px; }
.pb-editorial__note { font-size: 14px; opacity: .6; }

.pb-checklist { border: 1px solid rgba(255,255,255,.12); padding: 24px 26px; margin: 28px 0; border-color: rgba(13,13,13,.14); }
.pb-checklist h3 { margin-top: 0 !important; }
.pb-checklist ul { list-style: none; margin: 0 !important; padding: 0; }
.pb-checklist li { padding-left: 26px; position: relative; }
.pb-checklist li::before { content: "→"; position: absolute; left: 0; color: var(--p-tone, var(--flame)); }

.pb-sources { border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; margin-top: 40px; border-color: rgba(13,13,13,.14); }
.pb-sources h3 { font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.pb-sources ul { list-style: none; margin: 14px 0 0 !important; padding: 0; }
.pb-sources li { font-size: 14px; margin-bottom: 10px; }
.pb-sources a { color: inherit; border-bottom: 1px solid var(--p-tone, var(--flame)); }
.pb-sources i { opacity: .55; font-size: 13px; }

.pb-layer__links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 8px; }
.pb-layer__links a { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--p-tone, var(--flame)); }

.pb-proof-strip { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--p-tone, var(--flame)); margin: 14px 0 0; }
.pb-layer__prose-p { font-size: 16.5px; line-height: 1.75; opacity: .85; margin: 0 0 18px; max-width: 68ch; }
.pb-entity-line p { font-size: 14px; opacity: .65; }
.pb-entity-line a { color: var(--p-tone, var(--flame)); }

.pb-towns__intro { font-size: 15px; opacity: .75; margin: -8px 0 18px; }
.pb-proof__desc { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(13,13,13,.7); }

.pb-proof--quote .pb-proof__quote { margin: 0; }
.pb-proof--quote .pb-proof__quote p { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
.pb-proof--quote .pb-proof__quote footer { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(13,13,13,.6); }

.pb-journal-faq { margin-top: 56px; border-top: 1px solid rgba(13,13,13,.1); padding-top: 32px; }
.pb-journal-faq h3 { margin: 22px 0 8px; }
.pb-journal-method { margin-top: 40px; font-size: 14px; opacity: .65; }

/* ============================================================
   FLAT TYPOGRAPHY PASS · Sean's ruling, 7 Jul 2026
   1. No split typography or split colour inside headings,
      hero frames or quotes: every <i>/<em> accent inherits the
      parent's font, style, weight and colour. Fraunces stays
      for main section headings; the accent-switching goes.
   2. Eyebrow/kicker rows removed globally (section numbers,
      "Section 02" labels, phase tags, card number tags, hero
      signals) — the headings carry the sections on their own.
   3. Section SUBheadings move to Archivo (grotesk); Fraunces
      remains on main headings and stat values only.
   Sits last in the file so it wins the cascade by design.
   ============================================================ */

/* --- 1 · Accent flattening ---------------------------------- */
h1 i, h1 em, h2 i, h2 em, h3 i, h3 em, h4 i, h4 em,
.pv1__h1 em, .pv1__h1 .ghost,
.cs-hero-name i, .cs-hero-name .cs-stop,
.cs-hero-frame i, .cs-hero-frame em, .cs-hero-frame b,
.cs-quote-body i, .cs-quote-body em,
.pb-quote p i, .pb-quote p em,
.cs-phrase i, .cs-phrase em,
blockquote i, blockquote em {
	font-family: inherit !important;
	font-style: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
}

/* The giant decorative quote mark loses its accent colour too. */
.case-study-body .cs-quote-mark { color: inherit; opacity: .25; }

/* --- 2 · Eyebrows and kickers removed ------------------------ */
.cs-section-eyebrow,
.cs-missing-eyebrow,
.cs-pn,
.cs-tag-pillar,
.cs-tag-discipline,
.pv1__signal,
.legal-eyebrow,
.svp__inc-card .num,
.pb-steps__num,
.pb-steps__when {
	display: none !important;
}

/* Engagement meta survives as plain text, not a pill. */
.case-study-body .cs-tag-meta { border: 0; background: transparent; padding-left: 0; }

/* --- 3 · Subheadings → grotesk ------------------------------- */
.case-study-body .cs-did-cell h3 {
	font-family: var(--grotesk);
	font-weight: 800;
	font-size: 26px;
	letter-spacing: -.01em;
}
.case-study-body .cs-results .cs-r-label,
.svp__inc-card h4 {
	font-family: var(--grotesk);
}

/* OSOF · checks are links now (one style, arrow only — the + bullet retires with the split-pattern purge) and the method band is its own two-column section. */
.osp__checks li::before { content: none !important; color: var(--flame); }
.osp__checks li { padding-left: 0 !important; color: rgba(13, 13, 13, .78); }
.osp__checks li a { color: inherit; border-bottom: 1px solid var(--p-tone, var(--flame)); text-decoration: none; }
.osp__checks li a:hover { color: var(--p-tone, var(--flame)); }
.osp__method-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid rgba(255,255,255,.08); margin-top: 1px; background: rgba(13,13,13,.1); border-color: rgba(13,13,13,.1); }
.osp__method-col { padding: 40px 36px; background: var(--off); }
.osp__method-col h3 { font-family: var(--grotesk); font-weight: 800; font-size: 24px; margin: 0 0 14px; letter-spacing: -.01em; }
.osp__method-col p { font-size: 15px; line-height: 1.7; opacity: .8; margin: 0 0 16px; }
/* Eyebrows purged 29 Jul 2026: was mono 11px uppercase. */
.osp__method-col a { font-family: var(--font); font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--p-tone, var(--flame)); }
.osp__method-col h3 { text-transform: none; }
@media (max-width: 767px) { .osp__method-cols { grid-template-columns: 1fr; } }

.pb-token { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; padding: 10px 14px; border: 1px dashed rgba(240,101,34,.5); color: rgba(13,13,13,.6); background: rgba(240,101,34,.05); max-width: 560px; }
.pb-capture__lead { opacity: .7; margin-right: 8px; }

/* ============================================================
   SITE CHROME · Navigation & Footer Specification
   (ClickUp 2kyqgjcp-18855, ruled 6 Jul 2026, rulings 87-89).
   Nav dropdowns, five-column mega, mobile drawer groups,
   footer capture line + five columns + entity + legal row.
   ============================================================ */

/* Sticky header per spec 1. */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--off); }

/* Simple dropdowns. */
.nav-drop { position: relative; }
.nav-drop__panel {
	position: absolute;
	top: calc(100% + 10px);
	left: -12px;
	min-width: 260px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: var(--ink);
	border: 1px solid rgba(255, 255, 255, .12);
	z-index: 70;
}
.nav-drop__panel li a {
	display: block;
	padding: 9px 18px;
	font-size: 14px;
	color: inherit;
	white-space: nowrap;
}
.nav-drop__panel li a:hover { color: var(--flame); }
li.is-active > .nav-trigger,
li.is-active > a { opacity: 1; box-shadow: inset 0 -2px 0 var(--flame); }

/* Five-column mega grid. */
.mega__grid--spec { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.mega__grid--spec .mega__col-h3 { font-family: var(--grotesk); font-weight: 800; font-size: 17px; margin-bottom: 14px; }
.mega__grid--spec .mega__services li a { display: block; padding: 6px 0; font-size: 14px; color: inherit; opacity: .8; }
.mega__grid--spec .mega__services li:first-child a { opacity: 1; font-weight: 600; }
.mega__grid--spec .mega__services li a:hover { opacity: 1; color: var(--flame); }
.mega__foot-all { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: inherit; }
.mega__foot-all:hover { color: var(--flame); }

/* Mobile drawer groups: hidden on desktop, accordions in the drawer. */
.mega__drawer { display: none; }
@media (max-width: 767px) {
	.mega__grid--spec { grid-template-columns: 1fr; gap: 8px; }
	.mega__drawer { display: block; margin-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 10px; }
	.mega__drawer-link,
	.mega__drawer-group summary {
		display: flex;
		justify-content: space-between;
		padding: 14px 0;
		font-family: var(--grotesk);
		font-weight: 800;
		font-size: 18px;
		color: inherit;
		cursor: pointer;
		list-style: none;
	}
	.mega__drawer-group summary::-webkit-details-marker { display: none; }
	.mega__drawer-group ul { list-style: none; margin: 0 0 10px; padding: 0 0 0 14px; }
	.mega__drawer-group ul a { display: block; padding: 9px 0; font-size: 15px; color: inherit; opacity: .8; }
}

/* Footer. */
.ftr__capture {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 18px;
	padding: 26px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	font-size: 16px;
}
.ftr__capture a { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ftr__grid { align-items: start; }
.ftr__note { margin-top: 12px; font-size: 12.5px; opacity: .55; }
.ftr__contact { margin-top: 14px; font-size: 13px; line-height: 1.8; opacity: .8; }
.ftr__contact a { color: inherit; }
.ftr__social { display: inline-block; margin: 8px 12px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: inherit; opacity: .7; }
.ftr__entity { padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; opacity: .7; }
.ftr__entity a { color: inherit; border-bottom: 1px solid var(--accent); }
.v1__footer-col span { opacity: .45; }
.ftr__capture, .ftr__entity { border-color: rgba(13, 13, 13, .35); }

/* CHROME FIXES · 7 Jul
   1. The nav ul flex rules leak into nested dropdown panels and defeat
      the [hidden] attribute — restore it explicitly.
   2. The footer grid was built for brand + three columns; give the
      five-column spec footer its own grid with the brand on its own row. */

.nav-drop__panel[hidden] { display: none !important; }
.nav-drop__panel { display: block; background: var(--white); border-color: rgba(13, 13, 13, .12); }
.nav-drop__panel li { margin: 0; }

.site-footer .ftr__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 44px 36px;
	padding: 52px 0;
	align-items: start;
}
.site-footer .ftr__grid .v1__footer-brand {
	grid-column: 1 / -1;
	margin: 0 0 8px;
	max-width: none;
}
.site-footer .ftr__grid .v1__footer-col { margin: 0; max-width: none; }
.site-footer .ftr__grid .v1__footer-col h5 { margin-bottom: 14px; }
@media (max-width: 1023px) {
	.site-footer .ftr__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
}
@media (max-width: 560px) {
	.site-footer .ftr__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SITE CHROME v2 · from Sean's standalone Header/Footer HTML
   (7 Jul 2026). Nav & Footer Specification, rulings 87-89.
   Supersedes the earlier .site-header/.ftr__* chrome; those
   classes are no longer emitted, so their rules are inert.
   ============================================================ */

/* ---- NAV ---- */
.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid rgba(255,255,255,.08);
	background: rgba(245,244,240,.82);
	border-bottom-color: rgba(13,13,13,.08);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; position: relative; }
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo .brand-logo__svg { height: 30px; width: auto; }
.nav-right { display: flex; align-items: center; gap: 8px; }

.nav-nav { display: flex; align-items: center; gap: 2px; }
.nav-item { position: static; }
.nav-item.has-panel { position: relative; }
.nav-trigger {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 15px;
	border-radius: 100px;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	transition: color .15s, background .15s;
	background: none;
	border: 0;
	cursor: pointer;
	color: rgba(13,13,13,.7);
}
.nav-trigger:hover { color: var(--white); }
.nav-item[data-open="true"] > .nav-trigger { color: var(--white); background: rgba(13,13,13,.05); }
.nav-trigger.active { color: var(--cyan); position: relative; }
.nav-caret { width: 9px; height: 9px; opacity: .55; transition: transform .22s ease; }
.nav-item[data-open="true"] > .nav-trigger .nav-caret { transform: rotate(180deg); opacity: .9; }

.nav-panel {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 16px;
	padding: 18px;
	box-shadow: 0 28px 70px -16px rgba(0,0,0,.7);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(.99);
	transform-origin: top left;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 60;
	background: #fff;
	border-color: rgba(13,13,13,.1);
}
.nav-item[data-open="true"] > .nav-panel { opacity: 1; visibility: visible; transform: none; }
.nav-link { position: relative; display: block; padding: 9px 12px; font-family: 'Biennale', var(--sans); font-size: 14.5px; font-weight: 400; transition: color .15s, padding-left .2s; color: rgba(13,13,13,.74); }
.nav-link::before { content: ''; position: absolute; left: 12px; top: 50%; margin-top: -1px; width: 0; height: 2px; background: var(--col-tone, var(--accent)); transition: width .2s; }
.nav-link:hover { padding-left: 34px; color: var(--ink); }
.nav-link:hover::before { width: 16px; }
.nav-panel--simple { min-width: 248px; }

.nav-item.has-panel.nav-item--mega { position: static; }
.nav-panel--mega { left: 0; right: 0; padding: 30px 34px 22px; transform-origin: top center; }
.nav-panel--mega .nav-mega { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.nav-panel--mega .mega-col + .mega-col { border-left: 1px solid rgba(255,255,255,.08); padding-left: 28px; border-left-color: rgba(13,13,13,.08); }
.nav-panel--mega .mega-col__hub { display: block; font-family: 'Biennale', var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -.01em; padding: 0 12px 10px; margin: 0 0 8px; border-bottom: 1px solid rgba(255,255,255,.08); color: var(--ink); border-bottom-color: rgba(13,13,13,.08); }
.nav-panel--mega a.mega-col__hub:hover { color: var(--col-tone, var(--flame)); }
.nav-panel-foot { margin-top: 18px; padding: 16px 12px 0; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; border-top-color: rgba(13,13,13,.08); }
.nav-panel-foot a { display: inline-flex; align-items: center; gap: 9px; font-family: 'Biennale', var(--sans); font-size: 14px; font-weight: 600; transition: gap .2s; color: var(--ink); }
.nav-panel-foot a:hover { gap: 15px; }
.nav-panel-foot .nav-panel-foot__cta { color: var(--flame); }

.nav-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 100px; background: none; border: 0; cursor: pointer; color: var(--ink); }
.nav-burger svg { width: 22px; height: 22px; }

/* Nav: light glass, ink text. */
.nav-trigger:hover, .nav-item[data-open="true"] > .nav-trigger { color: var(--ink); }
.nav-panel--mega .mega-col h4 { color: rgba(13,13,13,.42); }

/* ---- MOBILE DRAWER ----
   SCOPED TO #drawer, 29 Jul 2026. This block used to claim `.drawer`, which is
   also the class on every component drawer (contact, audit, booking, signal
   check, research). Being later in the file it won the shared properties, so
   those drawers un-hid themselves off-screen at translateX(100%) with
   visibility:hidden and only body[data-drawer="open"] could reveal them, and
   that flag belongs to the mobile nav. Result: every "Get my free audit" and
   "Book the call" on the service and sector pages opened nothing at all. The
   nav drawer is #drawer and its children are drawer-head/-body/-foot; the
   component drawers use drawer__panel/__body, so the two never needed to share
   a selector. */
#drawer { position: fixed; inset: 0; z-index: 200; background: var(--ink); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.1,1); visibility: hidden; }
body[data-drawer="open"] #drawer { transform: none; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--container-pad, 24px); border-bottom: 1px solid rgba(255,255,255,.08); }
.drawer-head .nav-logo .brand-logo__svg { height: 26px; }
.drawer-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--white); border-radius: 100px; background: none; border: 0; cursor: pointer; }
.drawer-close svg { width: 22px; height: 22px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px var(--container-pad, 24px) 24px; }
.drawer-foot { padding: 20px var(--container-pad, 24px) calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.08); }
.drawer-foot .btn { width: 100%; justify-content: center; }
.acc { border-bottom: 1px solid rgba(255,255,255,.08); }
.acc-head { display: flex; align-items: stretch; }
.acc-link { flex: 1; display: flex; align-items: center; padding: 18px 0; font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--white); }
.acc-toggle { width: 56px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55); background: none; border: 0; cursor: pointer; }
.acc-toggle svg { width: 16px; height: 16px; transition: transform .22s; }
.acc[data-open="true"] .acc-toggle svg { transform: rotate(180deg); color: var(--white); }
.acc-flat { display: flex; align-items: center; padding: 18px 0; font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--white); border-bottom: 1px solid rgba(255,255,255,.08); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.acc[data-open="true"] .acc-panel { grid-template-rows: 1fr; }
.acc-panel-inner { overflow: hidden; }
.acc-group { padding: 2px 0 14px; }
.acc-group h5,
.acc-group .acc-hub { display: block; font-family: 'Biennale', var(--sans); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: rgba(255,255,255,.92); padding: 14px 0 4px; }
.acc-group a.acc-hub:hover { color: var(--cyan); }
.acc-panel a { display: block; padding: 9px 0; font-size: 15px; color: rgba(255,255,255,.72); }
.acc-panel a:hover { color: var(--white); }

@media (max-width: 980px) {
  .nav-nav { display: none; }
  .nav-burger { display: inline-flex; }
}

/* ---- FOOTER (always dark, matching the theme's footer convention) ---- */
.footer { padding: 88px 0 40px; border-top: 1px solid rgba(255,255,255,.08); background: var(--darker, #07080A); color: var(--white); }
.footer-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 32px; }
.footer-col h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; list-style: none; margin: 0; padding: 0; }
.footer-col li { line-height: 1.35; }
.footer-col a, .footer-col .plain { font-family: var(--sans); font-size: 14px; font-weight: 500; color: rgba(255,255,255,.68); transition: color .15s; }
.footer-col a:hover { color: var(--white); }
.footer-col .plain { color: rgba(255,255,255,.44); cursor: default; }
.footer-col .contact { display: block; margin-top: 2px; }
.footer-based { margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.5); max-width: 22ch; }
.footer-entity { margin-top: 72px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.08); display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: start; }
.footer-brand { display: inline-flex; align-items: center; }
.footer-brand .brand-logo__svg { height: 42px; width: auto; }
.footer-entity p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.55); max-width: 68ch; }
.footer-legal { margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; align-items: center; gap: 20px 40px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.footer-legal a { color: rgba(255,255,255,.6); transition: color .15s; }
.footer-legal a:hover { color: var(--white); }
.footer-legal .sep { color: rgba(255,255,255,.2); }
.footer-legal-right { display: inline-flex; align-items: center; gap: 12px; }
.footer-theme { margin-left: 10px; }
/* Footer logo wordmark stays white on the dark footer regardless of theme. */
.footer .brand-logo__svg { color: var(--white); }

@media (max-width: 900px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
  .footer-entity { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 520px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* Logo size bump (Sean, 7 Jul). */
.nav-logo .brand-logo__svg { height: 75px; }
.drawer-head .nav-logo .brand-logo__svg { height: 34px; }
.footer-brand .brand-logo__svg { height: 56px; }

/* Full wordmark logo: nav pair + sizing (Sean, 7 Jul). The nav is light,
   so the ink wordmark shows; the white variant markup stays for reuse
   on dark surfaces. */
.nav-logo .pb-logo { display: inline-flex; align-items: center; }
.nav-logo .pb-logo--light { display: inline-flex; }
.nav-logo .pb-logo--dark { display: none; }
.nav-logo .brand-logo__svg { height: 42px; width: auto; }
.nav-inner { padding: 15px 0; }
.footer-brand .brand-logo__svg { height: 44px; width: auto; }

/* ============================================================
   HOME V2 (Biennale rebuild, 16 Jul 2026 · light-led rev)
   Copy: ClickUp L0.01 (2kyqgjcp-11195), verbatim.
   Scoped to .v2home. No eyebrows, kickers or section numbers.
   Light base; dark bands: OSOF, sectors, final CTA.
   ============================================================ */

/* Biennale, loaded as WEIGHT RANGES (tokens v3, 26 Jul 2026). These were
   pinned to single weights, which meant any value the CSS asked for that was
   not one of 350/400/500/600/700/800 fell back to a system font mid-page.
   The ranges below keep every previously pinned value on exactly the face it
   already used (400 Regular, 500 Medium, 600 SemiBold, 700 Bold, 800 Heavy)
   and close the gaps between them. The token file's four-range version drops
   Medium and Heavy; they are kept here because pages built before the v3
   pass still ask for 500 and 800.
   font-display stays `swap`, not the token file's `block`: these are
   unsubsetted OTFs and the hero H1 is the LCP element, so `block` would hide
   it until they land. */
@font-face { font-family: 'Biennale'; src: url('../fonts/Biennale-Book.otf') format('opentype');      font-weight: 300 375; font-style: normal; font-display: swap; }
@font-face { font-family: 'Biennale'; src: url('../fonts/Biennale-Regular.otf') format('opentype');   font-weight: 376 449; font-style: normal; font-display: swap; }
@font-face { font-family: 'Biennale'; src: url('../fonts/Biennale-RegularIt.otf') format('opentype'); font-weight: 376 449; font-style: italic; font-display: swap; }
@font-face { font-family: 'Biennale'; src: url('../fonts/Biennale-Medium.otf') format('opentype');    font-weight: 450 549; font-style: normal; font-display: swap; }
@font-face { font-family: 'Biennale'; src: url('../fonts/Biennale-SemiBold.otf') format('opentype');  font-weight: 550 650; font-style: normal; font-display: swap; }
@font-face { font-family: 'Biennale'; src: url('../fonts/Biennale-Bold.otf') format('opentype');      font-weight: 651 749; font-style: normal; font-display: swap; }
@font-face { font-family: 'Biennale'; src: url('../fonts/Biennale-Heavy.otf') format('opentype');     font-weight: 750 900; font-style: normal; font-display: swap; }

.v2home {
	background: var(--off);
	color: var(--ink);
	font-family: 'Biennale', var(--sans);
	font-weight: 400;
}

/* Shared */
.v2home .v2h-heading {
	font-family: 'Biennale', var(--sans);
	font-weight: 700;
	font-size: clamp(2rem, 4.4vw, 3.4rem);
	line-height: 1.04;
	letter-spacing: -.025em;
	margin-bottom: clamp(28px, 4.5vw, 48px);
}
.v2home .v2h-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
.v2home .v2h-ctas--center { justify-content: center; margin-top: 48px; }
.v2h-ht { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Hero. Full-bleed image, centred copy on an even scrim (Option B, ruled 16 Jul 2026). */
.v2h-hero {
	position: relative;
	min-height: clamp(560px, 92vh, 920px);
	display: flex;
	align-items: center;
	text-align: center;
	overflow: hidden;
}
.v2h-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2h-hero__scrim { position: absolute; inset: 0; background: rgba(13,13,13,.55); }
.v2h-hero__content { position: relative; padding-top: 100px; padding-bottom: 60px; color: var(--white); }
.v2h-hero h1 {
	font-family: 'Biennale', var(--sans);
	font-weight: 700;
	font-size: clamp(2.8rem, 6.6vw, 5.8rem);
	line-height: .98;
	letter-spacing: -.03em;
	text-wrap: balance;
	max-width: 16ch;
	margin: 0 auto;
}
.v2h-hero__sub { max-width: 56ch; margin: 28px auto 0; font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 350; line-height: 1.6; color: rgba(255,255,255,.85); }
.v2h-hero .v2h-ctas { justify-content: center; }

/* Hero + final CTA are dark-baked; the sitewide .btn--ghost is ink-on-ink
   and would vanish here. Pin white. */
.v2h-hero .btn--ghost,
.v2h-cta .btn--ghost {
	border-color: rgba(255,255,255,.45);
	color: var(--white);
}
.v2h-hero .btn--ghost:hover,
.v2h-cta .btn--ghost:hover {
	border-color: var(--white);
}
@media (max-width: 700px) { .v2h-hero { min-height: 80vh; } }

/* Proof band (light). Receipts: every number carries a partner and links
   to its case study. */
.v2h-proof { padding: clamp(64px, 9vw, 120px) 0; }
.v2h-proof__lede { max-width: 58ch; font-weight: 350; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; color: rgba(13,13,13,.7); margin: -16px 0 40px; }
.v2h-proof__chips { display: grid; grid-template-columns: repeat(5, 1fr); border-left: 1px solid rgba(13,13,13,.12); }
.v2h-proof__chip { display: flex; flex-direction: column; border-right: 1px solid rgba(13,13,13,.12); padding: 24px 24px 20px; position: relative; transition: background .2s; }
.v2h-proof__chip::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: currentColor; transition: width .25s; }
.v2h-proof__chip:hover { background: var(--white); }
.v2h-proof__chip:hover::before { width: 100%; }
.v2h-proof__chip .val { font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.3rem); letter-spacing: -.03em; line-height: 1.05; margin-top: 14px; }
.v2h-proof__chip .lbl { margin-top: 10px; font-size: 13.5px; font-weight: 500; color: rgba(13,13,13,.6); line-height: 1.5; }
.v2h-proof__chip .who { margin-top: 22px; padding-top: 12px; border-top: 1px solid rgba(13,13,13,.08); font-size: 14px; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; gap: 8px; }
.v2h-proof__chip .who span { transition: transform .2s; }
.v2h-proof__chip:hover .who span { transform: translateX(3px); }
.v2h-proof__chip .lbl + .who { margin-top: auto; }
.v2h-proof__chip .lbl { flex-grow: 0; }
.v2h-proof__chip .val + .lbl { flex-grow: 1; }
@media (max-width: 900px) {
	.v2h-proof__chips { grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(13,13,13,.12); }
	.v2h-proof__chip { border-bottom: 1px solid rgba(13,13,13,.12); }
	.v2h-proof__chip:last-child { grid-column: span 2; }
}

/* Trust marquee (partner logos under the proof chips).
   Slow continuous scroll, always full colour, no hover states.
   Track holds two identical sets; -50% translate loops seamlessly. */
.v2h-marquee {
	overflow: hidden;
	margin-top: clamp(40px, 6vw, 64px);
	padding: clamp(24px, 3vw, 40px) 0;
	border-top: 1px solid rgba(13,13,13,.12);
	border-bottom: 1px solid rgba(13,13,13,.12);
}
.v2h-marquee__track {
	display: flex;
	width: max-content;
	animation: v2h-marquee 60s linear infinite;
}
.v2h-marquee__set {
	display: flex;
	align-items: center;
	gap: clamp(56px, 7vw, 96px);
	padding-right: clamp(56px, 7vw, 96px);
}
.v2h-marquee__logo {
	height: 56px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
	flex: none;
}
@keyframes v2h-marquee {
	to { transform: translateX(-50%); }
}
@media (max-width: 760px) { .v2h-marquee__logo { height: 44px; } }
/* Reduced motion: keep the crawl but halve the speed (matches the
   pb-spectrum precedent of gentle motion rather than a freeze). */
@media (prefers-reduced-motion: reduce) {
	.v2h-marquee__track { animation-duration: 120s !important; }
}

/* Why us */
.v2h-why { padding: clamp(72px, 10vw, 136px) 0 clamp(48px, 6vw, 72px); }
.v2h-why__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.v2h-why__grid .v2h-heading { max-width: 14ch; margin-bottom: 0; }
.v2h-why__grid p { font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 350; line-height: 1.65; color: rgba(13,13,13,.8); }
.v2h-why__murmur { position: relative; margin-top: clamp(40px, 6vw, 64px); height: clamp(220px, 32vw, 420px); overflow: hidden; }
.v2h-why__murmur img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
@media (max-width: 900px) { .v2h-why__grid { grid-template-columns: 1fr; } }

/* Case cards */
.v2h-cases { padding-bottom: clamp(72px, 10vw, 136px); }
.v2h-cases__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: rgba(13,13,13,.12); border: 1px solid rgba(13,13,13,.1); }
.v2h-case {
	background: var(--off);
	padding: 28px 24px 24px;
	display: flex; flex-direction: column; gap: 44px;
	min-height: 220px;
	border-top: 3px solid var(--card-tone, var(--flame));
	transition: background .2s;
}
.v2h-case:hover { background: #EDEBE4; }
.v2h-case:hover .arrow { transform: translateX(4px); }
.v2h-case .client { font-weight: 600; font-size: 14px; color: rgba(13,13,13,.6); }
.v2h-case .metric { font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -.02em; line-height: 1.1; margin-top: 8px; }
.v2h-case .metric b { color: var(--card-tone, var(--flame)); font-weight: 700; }
.v2h-case .arrow { margin-top: auto; align-self: flex-end; font-weight: 600; color: rgba(13,13,13,.55); transition: transform .2s; }
@media (max-width: 1000px) { .v2h-cases__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .v2h-cases__grid { grid-template-columns: 1fr; } }

/* Services (light) */
.v2h-services { padding: clamp(72px, 10vw, 136px) 0; }
.v2h-services__rows { border-top: 1px solid rgba(13,13,13,.12); }
.v2h-svc {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) 40px;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	padding: clamp(22px, 3vw, 34px) 0;
	border-bottom: 1px solid rgba(13,13,13,.12);
	transition: padding-left .25s;
}
.v2h-svc::before { content: ''; position: absolute; left: 0; top: 50%; margin-top: -1px; width: 0; height: 3px; background: var(--svc-tone); transition: width .25s; }
.v2h-svc:hover { padding-left: 44px; }
.v2h-svc:hover::before { width: 28px; }
.v2h-svc .name { font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 2rem); letter-spacing: -.02em; }
.v2h-svc .desc { font-weight: 350; font-size: clamp(.95rem, 1.2vw, 1.1rem); color: rgba(13,13,13,.65); }
.v2h-svc .arrow { font-weight: 600; font-size: 20px; color: rgba(13,13,13,.4); transition: color .2s, transform .2s; }
.v2h-svc:hover .arrow { color: var(--ink); transform: translateX(4px); }
@media (max-width: 760px) {
	.v2h-svc { grid-template-columns: minmax(0,1fr) 32px; }
	.v2h-svc .desc { grid-column: 1; grid-row: 2; }
	.v2h-svc:hover { padding-left: 36px; }
}

/* OSOF (dark band). The method set as three pillar columns in the OSOF
   tones; per-pillar links ruled out. */
.v2h-osof { position: relative; overflow: hidden; background: var(--ink); color: var(--white); }
.v2h-osof__bg { position: absolute; inset: 0; }
.v2h-osof__bg img { width: 100%; height: 100%; object-fit: cover; filter: invert(1) contrast(1.05); opacity: .14; }
.v2h-osof__inner { position: relative; padding: clamp(88px, 12vw, 160px) 0; }
.v2h-osof__inner > p { max-width: 62ch; font-weight: 350; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.65; color: rgba(255,255,255,.8); }
/* Pillars: flat typography on ink. No coloured bars (banned eyebrow
   lines), swatches never colour text; neutral hairline is structure. */
.v2h-osof__pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(40px, 6vw, 64px); }
.v2h-osof__pillar { border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; }
.v2h-osof__pillar h3 { font-weight: 600; font-size: clamp(1.35rem, 2.2vw, 1.9rem); letter-spacing: -.02em; color: var(--white); }
.v2h-osof__pillar p { margin-top: 14px; font-weight: 350; font-size: clamp(.98rem, 1.25vw, 1.1rem); line-height: 1.62; color: rgba(255,255,255,.75); }
.v2h-osof__link { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(40px, 6vw, 56px); font-weight: 600; font-size: 15px; border-bottom: 2px solid var(--white); padding-bottom: 3px; }
.v2h-osof__link:hover { color: var(--cyan); border-color: var(--cyan); }
@media (max-width: 820px) { .v2h-osof__pillars { grid-template-columns: 1fr; gap: 28px; } }

/* Sectors (dark band) */
.v2h-sectors { padding: clamp(72px, 10vw, 136px) 0; background: var(--ink); color: var(--white); }
.v2h-sectors__lede { max-width: 58ch; font-weight: 350; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.65; color: rgba(255,255,255,.7); margin-bottom: 40px; }
/* Sector masonry: image-leading E cards on the dark band. White card,
   14px radius, swatch shadow cycling the full 8-panel, site arrow in
   the card's swatch. Sector heading only, no partner attribution.
   Varied image aspects give the masonry rhythm; cards without imagery
   (NHS, Catholic Parishes) render as text cards. */
.v2h-sectors__masonry { columns: 3; column-gap: 24px; }
.v2h-sector-card {
	display: flex; flex-direction: column;
	break-inside: avoid;
	margin-bottom: 24px;
	background: var(--white); color: var(--ink);
	border-radius: 14px; overflow: hidden;
	box-shadow: 0 2px 4px rgba(13,13,13,.2), 0 22px 44px -16px color-mix(in srgb, var(--sw, var(--cyan)) 50%, transparent);
	transition: transform .2s, box-shadow .2s;
}
.v2h-sector-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(13,13,13,.2), 0 28px 52px -14px color-mix(in srgb, var(--sw, var(--cyan)) 62%, transparent);
}
.v2h-sector-card:nth-child(8n+1) { --sw: var(--sw-1); }
.v2h-sector-card:nth-child(8n+2) { --sw: var(--sw-2); }
.v2h-sector-card:nth-child(8n+3) { --sw: var(--sw-3); }
.v2h-sector-card:nth-child(8n+4) { --sw: var(--sw-4); }
.v2h-sector-card:nth-child(8n+5) { --sw: var(--sw-5); }
.v2h-sector-card:nth-child(8n+6) { --sw: var(--sw-6); }
.v2h-sector-card:nth-child(8n+7) { --sw: var(--sw-7); }
.v2h-sector-card:nth-child(8n+8) { --sw: var(--sw-8); }
.v2h-sector-card figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.v2h-sector-card:nth-child(3n+2) figure { aspect-ratio: 4 / 5; }
.v2h-sector-card:nth-child(5n+4) figure { aspect-ratio: 1 / 1; }
.v2h-sector-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1); }
.v2h-sector-card:hover figure img { transform: scale(1.04); }
.v2h-sector-card .body { display: flex; flex-direction: column; padding: 20px 24px 20px; }
.v2h-sector-card .name { font-weight: 600; font-size: clamp(1.1rem, 1.7vw, 1.4rem); letter-spacing: -.02em; line-height: 1.15; }
.v2h-sector-card .arrow { margin-top: 14px; align-self: flex-start; color: var(--sw, var(--cyan)); transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1); }
.v2h-sector-card:hover .arrow { transform: translateX(16px); }
@media (max-width: 980px) { .v2h-sectors__masonry { columns: 2; } }
@media (max-width: 560px) { .v2h-sectors__masonry { columns: 1; } }

/* Insights (light). Bottom padding halved: the getting-started section
   below is also light, so the shared boundary doubles up otherwise. */
.v2h-insights { padding: clamp(72px, 10vw, 136px) 0 clamp(32px, 5vw, 56px); }
.v2h-insights__lede { max-width: 58ch; font-weight: 350; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.65; color: rgba(13,13,13,.7); margin-bottom: 40px; }
.v2h-insights__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(13,13,13,.12); border: 1px solid rgba(13,13,13,.1); }
.v2h-insights__card {
	position: relative; overflow: hidden;
	background: var(--white);
	padding: clamp(28px, 4vw, 44px);
	min-height: 160px;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
	border-top: 3px solid var(--ins-tone, var(--cyan));
	transition: background .2s;
}
.v2h-insights__card:hover { background: #FBFAF7; }
.v2h-insights__card .name { font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: -.02em; position: relative; }
.v2h-insights__card .arrow { font-weight: 600; font-size: 20px; color: rgba(13,13,13,.4); transition: color .2s, transform .2s; position: relative; }
.v2h-insights__card:hover .arrow { color: var(--ins-tone, var(--cyan)); transform: translateX(4px); }
@media (max-width: 760px) { .v2h-insights__grid { grid-template-columns: 1fr; } }

/* Getting started */
.v2h-start { padding: clamp(32px, 5vw, 56px) 0 clamp(72px, 10vw, 136px); }
.v2h-start__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.v2h-start__visual { position: relative; height: clamp(280px, 30vw, 440px); overflow: hidden; }
.v2h-start__visual img { width: 100%; height: 100%; object-fit: cover; }
.v2h-start__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(20deg, rgba(68,198,239,.25), transparent 60%); mix-blend-mode: multiply; }
.v2h-start__grid p { font-weight: 350; font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.68; color: rgba(13,13,13,.8); margin-top: 24px; }
@media (max-width: 900px) { .v2h-start__grid { grid-template-columns: 1fr; } }

/* Final CTA (dark band) */
.v2h-cta { position: relative; padding: clamp(96px, 13vw, 176px) 0; text-align: center; overflow: hidden; background: var(--ink); color: var(--white); }
.v2h-cta h2 {
	font-family: 'Biennale', var(--sans);
	font-weight: 700;
	font-size: clamp(2.4rem, 6vw, 5rem);
	letter-spacing: -.03em;
	line-height: 1;
	text-wrap: balance;
	position: relative;
}
.v2h-cta__ht { position: absolute; width: 320px; height: 320px; }
.v2h-cta__ht--tl { top: -80px; left: -80px; }
.v2h-cta__ht--br { bottom: -80px; right: -80px; }

/* ============================================================
   E CARDS + SITE ARROW (ruled 17 Jul 2026)
   Card spec "E": white card, 14px radius, real margins, colour
   from UNDER the card (swatch-tinted shadow). No top-border
   eyebrow lines anywhere. Site arrow: inline SVG, 4.5 stroke,
   square cuts, swatch-coloured, left-slide 16px expo on hover.
   Overrides the HOME V2 card rules above.
   ============================================================ */

.arrow svg { display: block; width: 36px; height: 25px; }

/* Home case cards */
.v2h-cases__grid { gap: 24px; background: none; border: 0; }
.v2h-case {
	background: var(--white);
	border-top: 0;
	border-radius: 14px;
	box-shadow: 0 2px 4px rgba(13,13,13,.04), 0 22px 44px -16px color-mix(in srgb, var(--card-tone, var(--flame)) 50%, transparent);
	transition: transform .2s, box-shadow .2s;
}
.v2h-case:hover {
	background: var(--white);
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(13,13,13,.04), 0 28px 52px -14px color-mix(in srgb, var(--card-tone, var(--flame)) 62%, transparent);
}
.v2h-case .arrow {
	align-self: flex-start;
	color: var(--card-tone, var(--flame));
	transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.v2h-case:hover .arrow { transform: translateX(16px); }

/* Home insights cards */
.v2h-insights__grid { gap: 24px; background: none; border: 0; }
.v2h-insights__card {
	border-top: 0;
	border-radius: 14px;
	box-shadow: 0 2px 4px rgba(13,13,13,.04), 0 22px 44px -16px color-mix(in srgb, var(--ins-tone, var(--cyan)) 50%, transparent);
	transition: transform .2s, box-shadow .2s;
}
.v2h-insights__card:hover {
	background: var(--white);
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(13,13,13,.04), 0 28px 52px -14px color-mix(in srgb, var(--ins-tone, var(--cyan)) 62%, transparent);
}
.v2h-insights__card .arrow {
	color: var(--ins-tone, var(--cyan));
	transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.v2h-insights__card:hover .arrow { color: var(--ins-tone, var(--cyan)); transform: translateX(16px); }

/* Home service rows: same arrow, tone-coloured on hover */
.v2h-svc .arrow { font-size: 0; color: rgba(13,13,13,.35); transition: color .2s, transform .25s cubic-bezier(0.16, 1, 0.3, 1); }
.v2h-svc:hover .arrow { color: var(--svc-tone, var(--ink)); transform: translateX(16px); }

/* Home proof chips: E treatment (17 Jul). Eyebrow bar gone; white card,
   radius, tone shadow. Arrow stays small + right-aligned in the who row. */
.v2h-proof__chips { gap: 20px; border-left: 0; }
.v2h-proof__chip {
	background: var(--white);
	border-right: 0;
	border-radius: 14px;
	box-shadow: 0 2px 4px rgba(13,13,13,.04), 0 22px 44px -16px color-mix(in srgb, var(--chip-tone, currentColor) 50%, transparent);
	transition: transform .2s, box-shadow .2s;
}
.v2h-proof__chip::before { display: none; }
.v2h-proof__chip:hover {
	background: var(--white);
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(13,13,13,.04), 0 28px 52px -14px color-mix(in srgb, var(--chip-tone, currentColor) 62%, transparent);
}
.v2h-proof__chip .val { margin-top: 0; }
.v2h-proof__chip .who svg { width: 20px; height: 14px; color: var(--chip-tone, var(--ink)); }
@media (max-width: 900px) {
	.v2h-proof__chips { border-top: 0; }
	.v2h-proof__chip { border-bottom: 0; }
}

/* ============================================================
   FOOTER v3 (17 Jul 2026). The nav menu, footerish.
   Panel strip along the top (the 8 logo swatches, echoing the
   intro stripes), mega-menu column language: Biennale hub
   headings over hairlines, hairline rules between columns,
   links hover to their column tone. Mono uppercase headings
   and the serif italic note retired.
   ============================================================ */
.footer { position: relative; border-top: 0; }
.footer::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg,
		var(--sw-1) 0 12.5%, var(--sw-2) 0 25%, var(--sw-3) 0 37.5%, var(--sw-4) 0 50%,
		var(--sw-5) 0 62.5%, var(--sw-6) 0 75%, var(--sw-7) 0 87.5%, var(--sw-8) 0 100%);
}
.footer-cols { gap: 40px 0; }
.footer-col { padding-right: 28px; }
.footer-col + .footer-col { border-left: 1px solid rgba(255,255,255,.08); padding-left: 28px; }
.footer-col h4 {
	font-family: 'Biennale', var(--sans);
	font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-transform: none;
	color: var(--white);
	padding-bottom: 10px; margin-bottom: 14px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-col a { display: inline-block; transition: color .15s, transform .2s; }
.footer-col a:hover { color: var(--col-tone, var(--white)); transform: translateX(3px); }
.footer-based { font-family: 'Biennale', var(--sans); font-style: normal; font-weight: 350; }
@media (max-width: 900px) {
	.footer-cols { gap: 36px 28px; }
	.footer-col { padding-right: 0; }
	.footer-col + .footer-col { border-left: 0; padding-left: 0; }
}

/* ============================================================
   SECTORS CAROUSEL (Option A SHIPPED, 17 Jul 2026)
   Supersedes .v2h-sectors pills AND the .v2h-sectors__masonry
   variant (both retired). Dark band; cards = photo + dark footer
   with big name; swatch glow; loop + drag via sectors-carousel.js.
   ============================================================ */
.v2h-secc { background: var(--ink); color: var(--white); padding: clamp(72px, 10vw, 136px) 0; overflow: hidden; }
.v2h-secc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.v2h-secc__lede { max-width: 58ch; font-weight: 350; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.65; color: rgba(255,255,255,.7); margin-top: 20px; }
.v2h-secc__btns { display: flex; gap: 10px; }
.v2h-secc__btns button {
	width: 52px; height: 52px; border-radius: 100px; border: 1.5px solid rgba(255,255,255,.3);
	background: none; cursor: pointer; color: var(--white);
	display: inline-flex; align-items: center; justify-content: center;
	transition: border-color .2s, transform .2s;
}
.v2h-secc__btns button:hover { border-color: var(--white); transform: translateY(-2px); }
.v2h-secc__btns svg { width: 24px; height: 16px; display: block; }
.v2h-secc__btns .flip { display: inline-flex; transform: scaleX(-1); }
.v2h-secc__track {
	display: flex; gap: 24px; margin-top: clamp(32px, 4vw, 48px);
	overflow-x: auto;
	padding: 8px 0 48px;
	padding-left: calc(max((100vw - 1280px) / 2, 0px) + var(--container-pad, clamp(20px, 4vw, 48px)));
	scrollbar-width: none;
	cursor: grab;
	user-select: none;
	touch-action: pan-x pan-y;
}
.v2h-secc__track.dragging { cursor: grabbing; }
.v2h-secc__track::-webkit-scrollbar { display: none; }
.v2h-secc__card {
	flex: 0 0 340px;
	background: #141414; color: var(--white);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 14px; overflow: hidden;
	box-shadow: 0 22px 44px -16px color-mix(in srgb, var(--sw, var(--cyan)) 45%, transparent);
	transition: transform .2s, box-shadow .2s;
	display: flex; flex-direction: column;
}
.v2h-secc__card:hover { transform: translateY(-3px); box-shadow: 0 28px 52px -14px color-mix(in srgb, var(--sw, var(--cyan)) 60%, transparent); }
.v2h-secc__card figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.v2h-secc__card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1); }
.v2h-secc__card:hover img { transform: scale(1.04); }
.v2h-secc__card .name { display: block; padding: 20px 22px 24px; font-weight: 700; font-size: clamp(1.7rem, 2.3vw, 2.1rem); letter-spacing: -.022em; line-height: 1.08; text-wrap: balance; }
/* The panel, used exactly once per set (8 sectors); repeats on set two. */
.v2h-secc__card:nth-child(8n+1) { --sw: var(--sw-1); }
.v2h-secc__card:nth-child(8n+2) { --sw: var(--sw-2); }
.v2h-secc__card:nth-child(8n+3) { --sw: var(--sw-3); }
.v2h-secc__card:nth-child(8n+4) { --sw: var(--sw-4); }
.v2h-secc__card:nth-child(8n+5) { --sw: var(--sw-5); }
.v2h-secc__card:nth-child(8n+6) { --sw: var(--sw-6); }
.v2h-secc__card:nth-child(8n+7) { --sw: var(--sw-7); }
.v2h-secc__card:nth-child(8n+8) { --sw: var(--sw-8); }
@media (max-width: 700px) { .v2h-secc__card { flex-basis: 280px; } }

/* ============================================================
   OSOF BAND + FOOTER v3.1 (17 Jul 2026, Sean's readability pass)
   OSOF: pillar top-borders removed (eyebrow tell), background
   darkened for legibility, text link replaced by a button.
   Footer: ALL hairline borders killed ("no more grid"), the
   8-swatch panel strip stays, every font size stepped up.
   ============================================================ */

/* OSOF pillars: no top borders. */
.v2h-osof__pillar { border-top: 0; padding-top: 0; }

/* Darker ground under the copy: image quieter + a solid scrim. */
.v2h-osof__bg img { opacity: .09; }
.v2h-osof__bg::after { content: ''; position: absolute; inset: 0; background: rgba(13,13,13,.45); }

/* OSOF CTA is a button now, not a text link. */
.v2h-osof__btn { margin-top: clamp(40px, 6vw, 56px); }

/* Footer: kill every hairline. */
.footer-col { padding-right: 0; }
.footer-col + .footer-col { border-left: 0; padding-left: 0; }
.footer-col h4 { border-bottom: 0; padding-bottom: 0; margin-bottom: 16px; }
.footer-entity { border-top: 0; padding-top: 0; }
.footer-legal { border-top: 0; padding-top: 0; }
.footer-cols { gap: 40px 32px; }

/* Footer: bigger type across the board. */
.footer-col h4 { font-size: 17px; }
.footer-col a, .footer-col .plain { font-size: 16px; }
.footer-col ul { gap: 13px; }
.footer-based { font-size: 15px; }
.footer-entity p { font-size: 16px; line-height: 1.65; }
.footer-legal { font-size: 12.5px; }

/* ============================================================
   CAROUSEL DRAG + PING CURSOR + OSOF ALIGNMENT (17 Jul 2026)
   ============================================================ */

/* OSOF: the vertical-padding shorthand was zeroing the container's
   horizontal padding, pulling content left of every other section. */
.container.v2h-osof__inner {
	padding-left: clamp(20px, 4vw, 48px);
	padding-right: clamp(20px, 4vw, 48px);
}

/* Cards and images must not start a native HTML drag (it was
   swallowing the pointer drag everywhere except the gaps). */
.v2h-secc__card, .v2h-secc__card img { -webkit-user-drag: none; user-drag: none; }

/* Ping cursor: follows the mouse over the track. Core dot + two
   expanding rings cycling panel colours. Signals "drag me". */
.v2h-secc__cursor {
	position: fixed; z-index: 80; left: 0; top: 0;
	width: 14px; height: 14px; border-radius: 50%;
	background: var(--accent);
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s, scale .2s;
}
.v2h-secc__cursor.show { opacity: 1; }
.v2h-secc__cursor.down { scale: 1.6; }
.v2h-secc__cursor::before,
.v2h-secc__cursor::after {
	content: ''; position: absolute; inset: -8px;
	border-radius: 50%;
	border: 2px solid var(--sw-1);
	animation: v2h-ping 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite,
	           v2h-ping-colour 7.2s linear infinite;
}
.v2h-secc__cursor::after { animation-delay: .9s, .9s; }
@keyframes v2h-ping {
	0%   { transform: scale(.55); opacity: .9; }
	100% { transform: scale(2.6); opacity: 0; }
}
@keyframes v2h-ping-colour {
	0%, 100% { border-color: var(--sw-1); }
	25%      { border-color: var(--sw-2); }
	50%      { border-color: var(--sw-4); }
	75%      { border-color: var(--sw-5); }
}
@media (prefers-reduced-motion: reduce) {
	.v2h-secc__cursor::before,
	.v2h-secc__cursor::after { animation-duration: 3.6s, 14.4s; }
}

/* ============================================================
   WHAT WE DO · STRIPES V3 (shipped 18 Jul 2026)
   Supersedes .v2h-services rows. The intro's colour stripes as
   the section: flush sharp rectangles, vertical names, hover
   expands with the logo's round-point corner cut. Dark band,
   container-constrained (only the sectors carousel bleeds).
   ============================================================ */
.v2h-str { background: var(--ink); color: var(--white); padding: clamp(72px, 10vw, 136px) 0; }
.v2h-str .v2h-heading { margin-bottom: clamp(32px, 4vw, 48px); }
.v2h-str__stripes { display: flex; height: clamp(420px, 56vh, 560px); }
.v2h-str__stripe {
	position: relative; overflow: hidden;
	flex: 1 1 0;
	background: var(--sw); color: var(--sw-text);
	display: flex; flex-direction: column; justify-content: flex-end;
	border-radius: 0;
	transition: flex-grow .5s cubic-bezier(0.16, 1, 0.3, 1), border-radius .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.v2h-str__stripe:hover,
.v2h-str__stripe:focus-visible {
	flex-grow: 3.2;
	border-radius: clamp(40px, 6vw, 72px) 0 clamp(40px, 6vw, 72px) 0;
}

/* Image reveal (ruled 21 Jul): the photograph sits under the swatch and
   fades in on the same curve as the unfold; the stripe's animated radius
   is the mask. The overlay is a swatch gradient: near-solid behind the
   name/description, easing to a half wash up top so the image reads
   through the colour. Collapsed stripes stay solid colour. */
.v2h-str__stripe .simg {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity .5s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}
.v2h-str__stripe .simg img { width: 100%; height: 100%; object-fit: cover; }
.v2h-str__stripe .simg::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--sw) 94%, transparent) 0%,
		color-mix(in srgb, var(--sw) 88%, transparent) 30%,
		color-mix(in srgb, var(--sw) 50%, transparent) 62%,
		color-mix(in srgb, var(--sw) 44%, transparent) 100%
	);
}
.v2h-str__stripe:hover .simg,
.v2h-str__stripe:focus-visible .simg { opacity: 1; }
.v2h-str__stripe .vname,
.v2h-str__stripe .open { position: relative; z-index: 1; }
.v2h-str__stripe .open { position: relative; }
@media (max-width: 760px) {
	.v2h-str__stripe .simg { display: none; }
}
.v2h-str__stripe .vname {
	position: absolute; top: 24px; left: 50%;
	transform: translateX(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	font-weight: 700; font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -.015em;
	white-space: nowrap;
	transition: opacity .3s;
}
.v2h-str__stripe .open {
	display: block; padding: 28px;
	opacity: 0; transform: translateY(14px);
	transition: opacity .35s .12s, transform .35s .12s;
	min-width: 300px;
}
.v2h-str__stripe:hover .open,
.v2h-str__stripe:focus-visible .open { opacity: 1; transform: none; }
.v2h-str__stripe:hover .vname { opacity: 0; }
.v2h-str__stripe .oname { display: block; font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.3rem); letter-spacing: -.02em; line-height: 1.05; }
.v2h-str__stripe .odesc { display: block; margin-top: 12px; font-weight: 400; font-size: 1.05rem; line-height: 1.5; max-width: 34ch; }
@media (prefers-reduced-motion: reduce) {
	.v2h-str__stripe { transition-duration: 1s, 1s; }
	.v2h-str__stripe .open { transition-duration: .7s, .7s; }
}
@media (max-width: 760px) {
	.v2h-str__stripes { flex-direction: column; height: auto; gap: 8px; }
	.v2h-str__stripe { min-height: 76px; border-radius: 28px 0 28px 0; }
	.v2h-str__stripe:hover { border-radius: 28px 0 28px 0; }
	.v2h-str__stripe .vname { writing-mode: horizontal-tb; transform: none; position: static; padding: 24px 24px 0; }
	.v2h-str__stripe .open { opacity: 1; transform: none; min-width: 0; }
	.v2h-str__stripe .oname { display: none; }
}

/* ============================================================
   SIGNAL CHECK DRAWER (V1 · Jul 2026)
   The Signal Check intake, in a slide-in drawer (shared .drawer
   mechanics: side panel desktop, full overlay mobile). Light
   paper panel, Biennale, E-language: structure from spacing and
   type weight, colour only on the submit and focus states.
   ============================================================ */

.drawer--signal .drawer__panel {
	width: 520px;
	background: var(--off);
	color: var(--ink);
	box-shadow: -8px 0 40px rgba(0, 0, 0, .25);
}
.drawer--signal .drawer__close {
	border-color: rgba(13, 13, 13, .2);
	color: var(--ink);
}
.drawer--signal .drawer__close:hover { border-color: var(--ink); }
.drawer--signal .drawer__body { padding: 72px 44px 44px; }
.drawer--signal .drawer__heading {
	font-family: 'Biennale', var(--sans);
	font-weight: 700;
	font-size: clamp(1.9rem, 3vw, 2.4rem);
	letter-spacing: -.025em;
	color: var(--ink);
}
.drawer--signal .drawer__intro {
	margin-top: 14px;
	font-weight: 350;
	font-size: 15.5px;
	line-height: 1.6;
	color: rgba(13, 13, 13, .75);
}
.drawer--signal .drawer__form { margin-top: 28px; }

/* GF internals, scoped to the drawer + the standalone referral page. */
.drawer--signal .gform_wrapper, .sc-standalone .gform_wrapper { font-family: 'Biennale', var(--sans); }
.drawer--signal .gfield_label, .sc-standalone .gfield_label {
	font-weight: 600; font-size: 14.5px; color: var(--ink);
}
.drawer--signal .gfield_required, .sc-standalone .gfield_required { color: var(--flame); padding-left: 3px; }
.drawer--signal input[type="text"],
.drawer--signal input[type="email"],
.sc-standalone input[type="text"],
.sc-standalone input[type="email"] {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(13, 13, 13, .18);
	border-radius: 10px;
	background: var(--white);
	color: var(--ink);
	font-family: 'Biennale', var(--sans);
	font-size: 15.5px;
	transition: border-color .15s, box-shadow .15s;
}
.drawer--signal input:focus-visible,
.sc-standalone input:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-color: var(--ink);
}
.drawer--signal .gfield_description, .sc-standalone .gfield_description {
	font-weight: 350; font-size: 13px; color: rgba(13, 13, 13, .55); padding-top: 6px;
}
.drawer--signal .gfield, .sc-standalone .gfield { margin-bottom: 18px; }
.drawer--signal .gfield_checkbox label, .sc-standalone .gfield_checkbox label {
	font-weight: 500; font-size: 14.5px; color: rgba(13, 13, 13, .85); line-height: 1.5;
}
.drawer--signal .gfield_checkbox input, .sc-standalone .gfield_checkbox input {
	width: 18px; height: 18px; margin-right: 10px; accent-color: var(--ink); vertical-align: -3px;
}
/* The sweep, not the retired accent pill (tokens v3, 30 Jul 2026). */
.drawer--signal input[type="submit"],
.drawer--signal .gform_button,
.sc-standalone input[type="submit"],
.sc-standalone .gform_button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px;
	padding: 15px 34px;
	border: 0; border-radius: var(--radius-pill);
	color: var(--white);
	background-color: var(--ink);
	background-image: linear-gradient(to right, var(--sweep, var(--sw-4)) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	font-family: 'Biennale', var(--sans);
	font-weight: 600; font-size: 16px;
	cursor: pointer;
	transition: background-position var(--dur-move) var(--ease-reveal), color var(--dur-move) var(--ease-state);
}
.drawer--signal input[type="submit"]:hover,
.drawer--signal input[type="submit"]:focus-visible,
.drawer--signal .gform_button:hover,
.sc-standalone input[type="submit"]:hover,
.sc-standalone input[type="submit"]:focus-visible,
.sc-standalone .gform_button:hover { background-position: 0 0; color: var(--ink); }
.drawer--signal .gform_validation_errors, .sc-standalone .gform_validation_errors {
	padding: 12px 16px; margin-bottom: 16px;
	background: var(--white); border-radius: 10px;
	font-size: 14px; color: var(--ink);
}
.drawer--signal .gfield_validation_message, .sc-standalone .gfield_validation_message {
	font-size: 13px; color: var(--error); padding-top: 6px; font-weight: 600;
}
.sc__status h3 {
	font-family: 'Biennale', var(--sans);
	font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -.02em;
	margin: 0;
}
.sc__status p { margin: 12px 0 0; font-weight: 350; font-size: 15.5px; line-height: 1.6; color: rgba(13, 13, 13, .75); }
.sc__privacy { margin-top: 24px; font-weight: 350; font-size: 13px; color: rgba(13, 13, 13, .55); }
.sc__privacy a { text-decoration: underline; text-underline-offset: 3px; }
.sc__privacy a:hover { color: var(--ink); }
/* Dark grounds (the tool lander's ask plate). */
.sc__privacy--light { color: rgba(255, 255, 255, .55); }
.sc__privacy--light a:hover { color: var(--white); }

/* Marketing opt-in (GF consent field) wherever the capture form renders:
   an unticked checkbox beside its own sentence, quieter than the inputs. */
.drawer__form .gfield--type-consent .ginput_container_consent,
.tl3-form .gfield--type-consent .ginput_container_consent,
.pb-capture .gfield--type-consent .ginput_container_consent,
.pg3-gf .gfield--type-consent .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.drawer__form .gfield--type-consent input[type="checkbox"],
.tl3-form .gfield--type-consent input[type="checkbox"],
.pb-capture .gfield--type-consent input[type="checkbox"],
.pg3-gf .gfield--type-consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: none;
	margin: 2px 0 0;
	accent-color: var(--ink);
	cursor: pointer;
}
.drawer__form .gfield--type-consent .gfield_consent_label,
.tl3-form .gfield--type-consent .gfield_consent_label,
.pb-capture .gfield--type-consent .gfield_consent_label,
.pg3-gf .gfield--type-consent .gfield_consent_label {
	font-family: var(--font);
	font-weight: 350;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(13, 13, 13, .66);
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
	display: inline;
}
/* The lander's plate is dark. */
.tl3-form .gfield--type-consent input[type="checkbox"] { accent-color: var(--white); }
.tl3-form .gfield--type-consent .gfield_consent_label { color: rgba(255, 255, 255, .66); }

/* Standalone (referral) page shell */
.sc-standalone { max-width: 560px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) 0; }
.sc-standalone h2 { font-family: 'Biennale', var(--sans); font-weight: 700; font-size: clamp(2rem, 3.6vw, 2.8rem); letter-spacing: -.025em; }
.sc-standalone__intro { margin-top: 14px; font-weight: 350; font-size: 16px; line-height: 1.6; color: rgba(13, 13, 13, .75); }
.sc-standalone .gform_wrapper { margin-top: 28px; }

@media (max-width: 720px) {
	.drawer--signal .drawer__body { padding: 64px 24px 36px; }
}

/* Class-collision fix: the Chrome v2 mobile NAV drawer also claims
   `.drawer` (translateX(100%), visibility hidden, ink background),
   which silently broke the dialog drawers (contact + signal): they
   opened off-screen. ID scope outranks it and restores the dialog
   behaviour; the panel's own slide keyframes provide the motion. */
#contact-drawer, #signal-drawer {
	transform: none;
	visibility: visible;
	transition: none;
	z-index: 9000;
	background: transparent;
	flex-direction: row;
	justify-content: flex-end;
}
#contact-drawer[hidden], #signal-drawer[hidden] { display: none !important; }

/* The contact drawer's GF styling above is dark-panel + !important
   (mono uppercase white labels, white-alpha inputs). Re-declare for
   the light signal panel at higher specificity. */
.drawer--signal .drawer__form .gfield_label,
.drawer--signal .drawer__form .gform-field-label {
	font-family: 'Biennale', var(--sans) !important;
	font-size: 14.5px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--ink) !important;
	font-weight: 600;
}
.drawer--signal .drawer__form .gfield_required {
	font-family: 'Biennale', var(--sans) !important;
	font-size: 12px !important;
	letter-spacing: 0 !important;
	text-transform: lowercase !important;
	font-weight: 350;
	color: rgba(13, 13, 13, .45) !important;
}
.drawer--signal .drawer__form .ginput_container input[type="text"],
.drawer--signal .drawer__form .ginput_container input[type="email"] {
	background: var(--white) !important;
	border: 1px solid rgba(13, 13, 13, .18) !important;
	color: var(--ink) !important;
	font-family: 'Biennale', var(--sans);
}
.drawer--signal .drawer__form .ginput_container input::placeholder { color: rgba(13, 13, 13, .35); opacity: 1; }
.drawer--signal .drawer__form .ginput_container input:focus {
	border-color: var(--ink) !important;
	background: var(--white) !important;
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}
.drawer--signal .drawer__form .gfield_checkbox .gform-field-label,
.drawer--signal .drawer__form .gfield_checkbox label {
	font-weight: 500;
	color: rgba(13, 13, 13, .85) !important;
}
.drawer--signal .drawer__form .ginput_counter { display: none !important; }
.drawer--signal .drawer__form .gform_validation_errors {
	background: var(--white);
	border: 0;
	color: var(--ink);
}
.drawer--signal .drawer__form .gform_validation_errors > h2 {
	font-family: 'Biennale', var(--sans);
	font-weight: 600;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
}
.drawer--signal .drawer__form .gfield_validation_message,
.drawer--signal .drawer__form .validation_message {
	color: var(--error);
	font-size: 13px;
	font-weight: 600;
}

/* ============================================================
   CASE STUDY V2 (Option D port, 21 Jul 2026) · scoped .csd
   From cs-draft/anglers-d.html. Paper = 4% wash of the page
   tone (--tone set per study from its pillar swatch). No locks
   strip, no glow cards on results: the checklist carries them
   (structural ink boxes, unique hand-drawn swatch marks).
   ============================================================ */

.csd {
	background: color-mix(in srgb, var(--tone, var(--sw-5)) 4%, var(--white));
	color: var(--ink);
	font-family: 'Biennale', var(--sans);
	font-weight: 400;
	--p-tone: var(--tone); /* legacy chart component reads --p-tone */
}
.csd .csd-sec { font-family: 'Biennale', var(--sans); font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
.csd .csd-p { font-weight: 350; font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.68; color: rgba(13,13,13,.8); }
.csd .csd-p a { text-decoration: underline; text-decoration-color: rgba(13,13,13,.3); text-underline-offset: 3px; }
.csd .csd-p a:hover { text-decoration-color: var(--ink); }
.csd .btn--ghost-w { border: 1.5px solid rgba(255,255,255,.45); color: var(--white); }
.csd .btn--ghost-w:hover { border-color: var(--white); }
.csd .arrow svg { display: block; width: 36px; height: 25px; }

/* Hero */
.csd-hero { position: relative; min-height: clamp(560px, 88vh, 920px); display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); }
.csd-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.csd-hero__scrim { position: absolute; inset: 0; background: linear-gradient(75deg, rgba(13,13,13,.62) 0%, rgba(13,13,13,.25) 45%, transparent 70%); }
.csd-hero__content { position: relative; color: var(--white); padding-top: 120px; padding-bottom: clamp(64px, 9vw, 112px); }
.csd-hero__logo { height: 46px; width: auto; filter: brightness(0) invert(1); opacity: .92; margin-bottom: 32px; }
.csd-hero h1 { font-family: 'Biennale', var(--sans); font-weight: 700; font-size: clamp(2.4rem, 5.2vw, 4.6rem); line-height: 1; letter-spacing: -.03em; text-wrap: balance; max-width: 18ch; margin: 0; }
.csd-hero .sub { max-width: 54ch; margin: 26px 0 0; font-weight: 350; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.6; color: rgba(255,255,255,.85); }

/* Narrative */
.csd-narr { padding: clamp(64px, 9vw, 112px) 0; }
.csd-narr__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; }
.csd-narr--no-photo .csd-narr__grid { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
.csd-narr__photo { position: relative; overflow: hidden; border-radius: 14px; min-height: 480px; margin: 0; }
.csd-narr__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.csd-narr__flow .csd-sec { margin-bottom: 16px; }
.csd-narr__flow .csd-p { font-size: clamp(1.08rem, 1.45vw, 1.26rem); max-width: 62ch; }
.csd-narr__flow .csd-p + .csd-p { margin-top: 16px; }
.csd-narr__flow section + section { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(13,13,13,.12); padding-top: clamp(24px, 3vw, 36px); }
.csd-audit { margin-top: 24px; border-top: 1px solid rgba(13,13,13,.12); }
.csd-audit__label { padding: 11px 0 5px; font-weight: 600; font-size: 14px; margin: 0; }
.csd-audit__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(13,13,13,.12); font-size: 14.5px; }
.csd-audit__row b { font-weight: 600; }
.csd-audit__row span { font-weight: 350; color: rgba(13,13,13,.72); }
@media (max-width: 860px) { .csd-narr__grid { grid-template-columns: 1fr; } .csd-narr__photo { min-height: 300px; } }

/* What we did: E cards */
.csd-did { padding: clamp(28px, 4vw, 48px) 0 clamp(72px, 10vw, 128px); }
.csd-did .csd-sec { margin-bottom: clamp(32px, 5vw, 56px); }
.csd-did__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.csd-did__cell {
	background: var(--white); border-radius: 14px;
	padding: clamp(28px, 3.5vw, 44px);
	box-shadow: 0 2px 4px rgba(13,13,13,.04), 0 22px 44px -16px color-mix(in srgb, var(--sw, var(--tone)) 50%, transparent);
}
.csd-did__cell:nth-child(4n+1) { --sw: var(--sw-6); }
.csd-did__cell:nth-child(4n+2) { --sw: var(--sw-7); }
.csd-did__cell:nth-child(4n+3) { --sw: var(--sw-8); }
.csd-did__cell:nth-child(4n+4) { --sw: var(--sw-1); }
.csd-did__cell h3 { font-family: 'Biennale', var(--sans); font-weight: 700; font-size: clamp(1.3rem, 2.1vw, 1.7rem); letter-spacing: -.02em; line-height: 1.12; margin: 0; }
.csd-did__cell .csd-p { margin-top: 16px; font-size: clamp(.98rem, 1.2vw, 1.08rem); }
.csd-did__cell .dlv { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid rgba(13,13,13,.12); font-size: 14px; font-weight: 500; color: rgba(13,13,13,.55); line-height: 1.7; }
@media (max-width: 800px) { .csd-did__grid { grid-template-columns: 1fr; } }

/* Evidence */
.csd-evidence { padding-bottom: clamp(72px, 10vw, 128px); }
.csd-evidence .csd-sec { margin-bottom: clamp(32px, 5vw, 56px); }
.csd-evidence__chart { margin-bottom: clamp(24px, 3.5vw, 40px); }
.csd-ev-fig { border: 1px solid rgba(13,13,13,.12); background: var(--white); margin: 0; border-radius: 14px; overflow: hidden; }
.csd-ev-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.csd-ev-fig figcaption { padding: 14px 20px; font-size: 14px; font-weight: 500; color: rgba(13,13,13,.65); border-top: 1px solid rgba(13,13,13,.12); }
.csd-ev-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 32px); margin-top: clamp(16px, 2.5vw, 32px); }
@media (max-width: 760px) { .csd-ev-pair { grid-template-columns: 1fr; } }

/* Mood band */
.csd-band { position: relative; height: clamp(300px, 54vh, 560px); overflow: hidden; margin: 0; }
.csd-band img { width: 100%; height: 100%; object-fit: cover; }

/* Quote */
.csd-quote { background: var(--ink); color: var(--white); padding: clamp(80px, 11vw, 144px) 0; text-align: center; }
.csd-quote blockquote { font-family: 'Biennale', var(--sans); font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.18; letter-spacing: -.02em; max-width: 26ch; text-wrap: balance; margin: 0 auto; }
.csd-quote .attr { margin: 36px 0 0; font-size: 15.5px; font-weight: 350; color: rgba(255,255,255,.7); }
.csd-quote .attr b { font-weight: 600; color: var(--white); }

/* Results: the checklist. Box structural, mark expressive. */
.csd-results { padding: clamp(64px, 9vw, 112px) 0; }
.csd-results .csd-sec { margin-bottom: clamp(32px, 5vw, 52px); }
.csd-res {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: clamp(18px, 2.6vw, 30px);
	align-items: start;
	padding: clamp(16px, 2.4vw, 24px) 0;
	max-width: 880px;
}
.csd-res .check {
	width: 52px; height: 52px;
	border: 2.5px solid var(--ink);
	border-radius: 12px;
	display: grid; place-items: center;
	background: transparent;
	color: var(--sw, var(--sw-1));
}
.csd-res .check svg { width: 44px; height: 44px; overflow: visible; }
.csd-res b { display: block; font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.8rem); letter-spacing: -.02em; line-height: 1.15; }
.csd-res p { margin: 8px 0 0; font-weight: 350; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; color: rgba(13,13,13,.72); max-width: 56ch; }

/* Related */
.csd-related { padding: 0 0 clamp(72px, 10vw, 128px); }
.csd-related h2 { font-family: 'Biennale', var(--sans); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; margin: 0 0 28px; }
.csd-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.csd-rel {
	background: var(--white); border-radius: 14px;
	overflow: hidden;
	display: flex; flex-direction: column;
	box-shadow: 0 2px 4px rgba(13,13,13,.04), 0 22px 44px -16px color-mix(in srgb, var(--sw, var(--sw-5)) 50%, transparent);
	transition: transform .2s, box-shadow .2s;
}
.csd-rel:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(13,13,13,.04), 0 28px 52px -14px color-mix(in srgb, var(--sw, var(--sw-5)) 62%, transparent); }
.csd-rel figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.csd-rel figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1); }
.csd-rel:hover figure img { transform: scale(1.04); }
.csd-rel__body { padding: 20px 24px 0; }
.csd-rel .client { font-weight: 600; font-size: 14px; color: rgba(13,13,13,.6); }
.csd-rel .metric { font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -.02em; line-height: 1.1; margin-top: 8px; }
.csd-rel .metric b { color: var(--ink); font-weight: 700; }
.csd-rel .frame { margin-top: 10px; font-weight: 350; font-size: 14.5px; color: rgba(13,13,13,.65); }
.csd-rel .arrow { margin: 14px 24px 20px; align-self: flex-start; color: var(--sw, var(--sw-5)); transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1); }
.csd-rel .arrow svg { width: 44px; height: 30px; }
.csd-rel:hover .arrow { transform: translateX(16px); }
@media (max-width: 800px) { .csd-related__grid { grid-template-columns: 1fr; } }

/* CTA */
.csd-cta { background: var(--ink); color: var(--white); text-align: center; padding: clamp(88px, 12vw, 160px) 0; }
.csd-cta h2 { font-family: 'Biennale', var(--sans); font-weight: 700; font-size: clamp(2.2rem, 5vw, 4.2rem); letter-spacing: -.03em; line-height: 1.02; text-wrap: balance; max-width: 22ch; margin: 0 auto; }
.csd-cta p { max-width: 58ch; margin: 28px auto 0; font-weight: 350; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.65; color: rgba(255,255,255,.8); }
.csd-cta .ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 44px; }
.csd-cta .reply { display: block; margin-top: 28px; font-size: 13.5px; font-weight: 350; color: rgba(255,255,255,.55); }

/* ============================================================
   WORK HUB V2 ("the front page", ruled 22 Jul 2026 from
   wrk-draft/option-1-frontpage.html) · scoped .wrk
   Light hero → flagship mosaic (12-col, four constructions:
   photo tile / white chart card / ink type tile / photo tile)
   → ink halftone slider for the rest (reuses .pb-jrn + data-pb-car
   + the global ping cursor) → full-bleed photo CTA band (warm
   image on purpose: the slider band above is ink, the CTA must
   not read as a second dark slab). ZERO site arrows on this page.
   No logos, no receipt rows. Tile swatches keyed to each
   partner's sector swatch for cross-page continuity.
   ============================================================ */

.wrk { background: var(--off); color: var(--ink); font-family: 'Biennale', var(--sans); font-weight: 400; }

.wrk-hero { padding: clamp(72px, 10vw, 130px) 0 clamp(28px, 4vw, 48px); }
.wrk-hero h1 { font-weight: 700; font-size: clamp(2.75rem, 6.4vw, 5.25rem); letter-spacing: -.02em; line-height: 1; margin: 0; }
.wrk-hero p { max-width: 62ch; margin: 24px 0 0; font-weight: 350; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.68; color: rgba(13,13,13,.78); }

/* Flagship mosaic. Four tiles, four constructions, no arrows. */
.wrk-mosaic { padding: clamp(28px, 4vw, 48px) 0 clamp(64px, 9vw, 110px); }
.wrk-mosaic__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.wrk-m1 { grid-column: span 7; } .wrk-m2 { grid-column: span 5; }
.wrk-m3 { grid-column: span 5; } .wrk-m4 { grid-column: span 7; }

.wrk-tile { position: relative; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 460px; text-decoration: none;
	box-shadow: 0 2px 4px rgba(13,13,13,.04), 0 22px 44px -16px color-mix(in srgb, var(--t) 50%, transparent);
	transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1); }
.wrk-tile:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(13,13,13,.04), 0 28px 54px -14px color-mix(in srgb, var(--t) 62%, transparent); }

/* Construction: photo tile (sectors-hub tile grammar: swatch tint under a
   strong ink scrim so text passes on every image) */
.wrk-tile--photo { color: var(--white); }
.wrk-tile--photo .wrk-tile__img { position: absolute; inset: 0; }
.wrk-tile--photo .wrk-tile__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 6s cubic-bezier(.16, 1, .3, 1); }
.wrk-tile--photo:hover .wrk-tile__img img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .wrk-tile--photo .wrk-tile__img img { transition-duration: 12s; } }
.wrk-tile--photo .wrk-tile__img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--t) 40%, transparent) 0%, transparent 48%); }
.wrk-tile--photo .wrk-tile__img::after  { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,13,.9) 0%, rgba(13,13,13,.55) 34%, rgba(13,13,13,.12) 58%, transparent 72%); }
.wrk-tile--photo .wrk-tile__body { text-shadow: 0 1px 14px rgba(0,0,0,.45); }

/* Construction: white chart card (in-card halftone, the partner's real curve) */
.wrk-tile--card { background: var(--white); justify-content: space-between; }
.wrk-tile--card .wrk-tile__ht { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wrk-tile--card .wrk-tile__ht svg { width: 100%; height: 100%; display: block; }
.wrk-chart { position: relative; padding: 30px 32px 0; margin-top: auto; }
.wrk-chart svg { width: 100%; height: auto; display: block; }
.wrk-chart .src { font-weight: 350; font-size: 12.5px; color: #767470; padding: 10px 0 6px; }

/* Construction: ink type tile */
.wrk-tile--ink { background: var(--ink); color: var(--white); }
.wrk-tile--ink .wrk-tile__ht { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wrk-tile--ink .wrk-tile__ht svg { width: 100%; height: 100%; display: block; }

.wrk-tile__body { position: relative; z-index: 2; padding: 28px 32px 30px; display: flex; flex-direction: column; gap: 8px; }
.wrk-tile__body .who { font-weight: 600; font-size: 16.5px; }
.wrk-tile--card .wrk-tile__body .who { color: rgba(13,13,13,.62); }
.wrk-tile--ink .wrk-tile__body .who { color: rgba(255,255,255,.75); }
.wrk-tile__body .num { font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.08; letter-spacing: -.018em; text-wrap: balance; margin: 0; }
.wrk-tile--card .wrk-tile__body .num { font-size: clamp(2.1rem, 3.4vw, 3.25rem); }
.wrk-tile__body .more { font-weight: 350; font-size: 15.5px; }
.wrk-tile--photo .wrk-tile__body .more { color: rgba(255,255,255,.92); }
.wrk-tile--card .wrk-tile__body .more { color: rgba(13,13,13,.62); }
.wrk-tile--ink .wrk-tile__body .more { color: rgba(255,255,255,.75); }

@media (max-width: 900px) {
	.wrk-mosaic__grid { grid-template-columns: 1fr; }
	.wrk-mosaic__grid .wrk-tile { grid-column: auto; min-height: 360px; }
}

/* The rest: ink halftone slider (.pb-jrn band reused headless).
   Metric leads the card, so the title weight steps up to 700. */
.wrk .pb-jrn__card h3 { font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.wrk .pb-jrn__card figure { height: 200px; }

/* CTA: full-bleed photo band, homepage hero language */
.wrk-cta { position: relative; min-height: 64vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: clamp(80px, 10vw, 140px) 0; }
.wrk-cta--ink { background: var(--ink); min-height: 0; }
.wrk-cta__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.wrk-cta__scrim { position: absolute; inset: 0; background: rgba(13,13,13,.55); }
.wrk-cta__inner { position: relative; z-index: 2; color: var(--white); max-width: 760px; margin: 0 auto; padding: 0 32px; }
.wrk-cta h2 { font-family: 'Biennale', var(--sans); font-weight: 700; font-size: clamp(2.1rem, 4.4vw, 3.6rem); letter-spacing: -.015em; line-height: 1.08; margin: 0 0 20px; }
.wrk-cta p { font-weight: 350; font-size: 1.125rem; line-height: 1.7; color: rgba(255,255,255,.92); margin: 0 0 36px; }
.wrk-cta .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.wrk-cta .btn--solid-w { background: var(--white); color: var(--ink); }
.wrk-cta .btn--ghost-w { border: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); color: var(--white); }
.wrk-cta .btn--ghost-w:hover { box-shadow: inset 0 0 0 2px var(--white); }

/* ============================================================
   SECTOR PAGES V3 (29 Jul 2026) · scoped .sec2
   Rebuilt from exports/sector-hospitality-v2.html and the 29 Jul
   handoff, against tokens v3. Replaces the V2 block; the class
   names are unchanged so template-sector.php keeps its structure
   (hub + 8 SEC + 8 MX pages all run this).

   What changed from V2, and why:
   - Hero copy goes left, on a fixed gradient scrim, and the crumb
     loses its mono-uppercase treatment (eyebrows are retired). The
     strip closes the hero.
   - The problem section becomes a full-height ink split: prose left
     ending on the container edge, photograph right running to the
     viewport edge.
   - The channel blocks become the CHANNEL PLATE (tokens v3
     component 8): paper card, untouched 16:10 photograph, a 4px
     swatch rule under it, ink copy, ghost pill. The flush 2x2
     colour-wash grid is gone with rule 11 (photography never
     carries a colour wash) and it takes the AA problem with it.
     The leaf corner-cut goes back to the homepage stripes.
   - Proof rows become proof cards: the case study's own featured
     image, its partner quote, and its own named link. No card is
     ever labelled "read more" or "both".
   - The atmosphere band may carry a partner quote under the scrim.

   Token corrections to the drawn design:
   - H1 clamp(2.4rem,5.2vw,4.4rem) → the type table's 5.6vw/4.9rem.
   - the quote plate's 12px radius → 14px (12 is retired).
   - ghost ring .28 measured 1.91:1 on paper → --ring-ink (3.1:1).
   - three freehand scrims → the named --scrim-hero/--scrim-plate.
   ============================================================ */

.sec2 { color: var(--ink); background: var(--paper); font-family: var(--font); font-weight: 350; }
.sec2 h1, .sec2 h2, .sec2 h3, .pb-jrn h2, .pb-jrn h3 { font-family: var(--font); }
.sec2 h2 { font-weight: 700; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; max-width: 22ch; }
.sec2 section { padding: var(--sp-band) 0; }
.sec2 p { text-wrap: pretty; }
.sec2 strong { font-weight: 600; }

.sec2 a:focus-visible,
.sec2 button:focus-visible,
.sec2 summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.sec2-hero a:focus-visible,
.sec2-hero button:focus-visible,
.sec2-problem a:focus-visible,
.sec2-cta a:focus-visible,
.sec2-cta button:focus-visible { outline-color: var(--white); }

/* ---- Hero. Full-bleed photograph under the fixed hero scrim, copy left,
        the strip closing it. Ink fallback for a sector with no world shot. ---- */
.sec2-hero { position: relative; background: var(--ink); color: var(--white); overflow: hidden; }
.sec2-hero__img { position: absolute; inset: 0; background-size: cover; background-position: center 62%; }
.sec2-hero__scrim { position: absolute; inset: 0; background: var(--scrim-hero); }
.sec2-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(36px, 4.4vw, 60px) var(--gutter) clamp(64px, 8vw, 112px);
	min-height: clamp(560px, 68vh, 780px);
	display: flex;
	flex-direction: column;
}
.sec2-hero--ink .sec2-hero__inner { min-height: clamp(420px, 46vh, 560px); }
.sec2-hero__crumb {
	position: static;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-tight);
	font-family: var(--font);
	font-weight: 350;
	font-size: 13.5px;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
	color: rgba(255, 255, 255, .74);
}
.sec2-hero__crumb a { color: rgba(255, 255, 255, .74); transition: color var(--dur-tap) var(--ease-state); }
.sec2-hero__crumb a:hover { color: var(--white); }
.sec2-hero__crumb span { margin: 0; color: rgba(255, 255, 255, .45); }
/* De-linked ancestor (unpublished target): reads like a linked ancestor. */
.sec2-hero__crumb .crumb-plain { color: rgba(255, 255, 255, .74); }
.sec2-hero__crumb--ink .crumb-plain { color: rgba(13, 13, 13, .62); }
.sec2-hero__crumb [aria-current] { color: var(--white); font-weight: 600; }
.sec2-hero__copy { margin-top: auto; padding-top: clamp(56px, 8vw, 120px); max-width: 60ch; }
.sec2-hero h1 {
	font-weight: 700;
	font-size: clamp(2.4rem, 5.6vw, 4.9rem);
	line-height: 1.03;
	letter-spacing: -.028em;
	max-width: 18ch;
	text-wrap: pretty;
}
.sec2-hero__deck {
	font-weight: 350;
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.65;
	max-width: 56ch;
	margin: var(--sp-item) 0 0;
	color: rgba(255, 255, 255, .84);
}
.sec2-hero__deck strong { font-weight: 600; color: var(--white); }
.sec2-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: var(--sp-group); }
.sec2-hero__strip, .sec2-strip { display: grid; grid-template-columns: repeat(8, 1fr); height: 4px; }
.sec2-hero__strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }
.sec2-hero__strip span, .sec2-strip span { display: block; }

/* ---- The problem. Ink, edge to edge: prose ends on the container's right
        edge, the photograph runs to the viewport edge and fills the band. ---- */
.sec2-problem { background: var(--ink); color: var(--white); padding: 0 !important; }
.sec2-problem__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.sec2-problem__grid > .sec2-problem__body {
	max-width: calc(640px + 4vw);
	margin-left: auto;
	width: 100%;
	padding: clamp(64px, 8vw, 120px) var(--gutter);
}
.sec2-problem__grid--solo { grid-template-columns: minmax(0, 1fr); }
.sec2-problem__grid--solo > .sec2-problem__body { margin-right: auto; }
.sec2-problem h2 { margin: 0 0 clamp(24px, 2.6vw, 34px); max-width: 20ch; }
.sec2-problem p { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.65; color: rgba(255, 255, 255, .86); }
.sec2-problem p + p { margin-top: 20px; color: rgba(255, 255, 255, .78); }
.sec2-problem strong { font-weight: 600; color: var(--white); }
.sec2-problem__photo { position: relative; min-height: clamp(320px, 40vw, 620px); margin: 0; }
.sec2-problem__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- Channels. The channel plate. Paper card on white, photograph
        untouched, one 4px swatch rule, ghost pill, real gap. ---- */
.sec2-channels { background: var(--white); color: var(--ink); }
.sec2-channels h2 { margin: 0; }
.sec2-channels__lead { max-width: 62ch; margin-top: var(--sp-close); font-size: clamp(1.02rem, 1.3vw, 1.12rem); line-height: 1.7; color: rgba(13, 13, 13, .8); }
.sec2-channels__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
	margin-top: clamp(40px, 5vw, 60px);
}
.sec2-chan {
	min-width: 0;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--paper);
	color: var(--ink);
	transition: transform var(--dur-move) var(--ease-state), box-shadow var(--dur-move) var(--ease-state);
}
a.sec2-chan:hover, a.sec2-chan:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 26px 50px -16px color-mix(in srgb, var(--sw) 62%, transparent);
}
/* Yellow and leaf cast weakly: lift them so the shadow still reads. */
.sec2-chan--light:hover, .sec2-chan--light:focus-visible {
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 26px 50px -16px color-mix(in srgb, var(--sw) 70%, transparent);
}
.sec2-chan__img { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.sec2-chan__img img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease-reveal);
}
a.sec2-chan:hover .sec2-chan__img img,
a.sec2-chan:focus-visible .sec2-chan__img img { transform: scale(1.06); }
a.sec2-chan, a.sec2-chan:hover { color: var(--ink); }
a.sec2-chan:hover .btn3,
a.sec2-chan:focus-visible .btn3 { background-position: 0 0; color: var(--ink); }
a.sec2-pcard, a.sec2-pcard:hover { color: var(--ink); }
a.sec2-pcard:hover .btn3 { background-position: 0 0; color: var(--ink); }
/* The only colour on the card at rest. */
.sec2-chan__rule { display: block; height: 4px; background: var(--sw); }
.sec2-chan__body { display: flex; flex-direction: column; flex: 1; padding: clamp(26px, 3vw, 38px); }
.sec2-chan h3 { font-weight: 700; font-size: clamp(1.3rem, 1.9vw, 1.6rem); letter-spacing: -.018em; line-height: 1.2; }
.sec2-chan p { font-weight: 350; font-size: 1.02rem; line-height: 1.65; margin-top: 14px; color: rgba(13, 13, 13, .78); }
.sec2-chan__foot { display: block; margin-top: auto; padding-top: clamp(22px, 2.6vw, 30px); }
.sec2-chan--static { cursor: default; }
/* MX pages: the sector's spare shot completes a six-slot grid. */
.sec2-chan--photo { padding: 0; }
.sec2-chan--photo .sec2-chan__img { aspect-ratio: auto; height: 100%; min-height: clamp(260px, 30vw, 340px); }
.sec2-channels--work .sec2-channels__grid > .sec2-chan:last-child:nth-child(odd):not(.sec2-chan--photo) { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) {
	.sec2-chan__img img { transition-duration: 1.4s; }
}

/* ---- Free-form prose (the MX pages lean on these). ---- */
.sec2-prose { background: var(--white); }
.sec2-prose p { font-size: clamp(1.02rem, 1.3vw, 1.12rem); line-height: 1.7; color: rgba(13, 13, 13, .8); }
.sec2-prose p + p { margin-top: var(--sp-close); }

/* ---- Atmosphere band. Full bleed, square edges, optionally a quote. ---- */
.sec2-band { position: relative; background: var(--ink); color: var(--white); overflow: hidden; }
.sec2-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sec2-band--plain { height: min(52vh, 540px); min-height: 360px; }
.sec2-band--plain > img { position: static; height: 100%; }
.sec2-band__scrim { position: absolute; inset: 0; background: var(--scrim-hero); }
.sec2-band__inner {
	position: relative;
	z-index: 2;
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(88px, 12vw, 180px) var(--gutter);
	display: flex;
	justify-content: center;
}
.sec2-band figure { margin: 0; max-width: 58ch; text-align: center; }
.sec2-band blockquote { font-weight: 700; font-size: clamp(1.65rem, 3.4vw, 2.7rem); line-height: 1.18; letter-spacing: -.022em; }
.sec2-band figcaption { margin-top: clamp(18px, 2vw, 26px); font-weight: 600; font-size: 15px; letter-spacing: .02em; color: var(--white); }

/* ---- Proof. One card per case study: its featured image, its quote,
        its own named link. Mist ground so the white cards lift. ---- */
.sec2-proof { background: var(--mist); }
.sec2-proof h2 { margin: 0; }
.sec2-proof__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-item);
	margin-top: clamp(32px, 4vw, 48px);
	align-items: stretch;
}
.sec2-proof__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.sec2-pcard {
	--pra: var(--pr);
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--white);
	color: var(--ink);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 22px 44px -16px color-mix(in srgb, var(--pra) 50%, transparent);
	transition: transform var(--dur-move) var(--ease-state), box-shadow var(--dur-move) var(--ease-state);
}
/* Yellow and leaf wash out on white: floor the accent toward ink. */
.sec2-pcard--lsw { --pra: color-mix(in srgb, var(--pr) 55%, var(--ink)); }
a.sec2-pcard:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 28px 52px -14px color-mix(in srgb, var(--pra) 62%, transparent);
}
.sec2-pcard__photo { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.sec2-pcard__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 5s var(--ease-reveal); }
a.sec2-pcard:hover .sec2-pcard__photo img { transform: scale(1.06); }
.sec2-pcard__body { display: flex; flex-direction: column; flex: 1; padding: clamp(24px, 2.6vw, 32px); }
.sec2-pcard h3 { font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.55rem); letter-spacing: -.018em; line-height: 1.2; }
.sec2-pcard__desc { font-weight: 350; font-size: 1.02rem; line-height: 1.68; margin-top: 14px; color: rgba(13, 13, 13, .8); }
/* Rule 12: the quote sits on ink with a swatch rule on its leading edge. */
.sec2-pcard figure {
	margin: clamp(22px, 2.4vw, 28px) 0 0;
	background: var(--ink);
	border-radius: var(--radius-card);
	padding: clamp(20px, 2.2vw, 26px);
	border-left: 4px solid var(--pra);
}
.sec2-pcard blockquote { font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.35; letter-spacing: -.014em; color: var(--white); }
.sec2-pcard figcaption { margin-top: 12px; font-weight: 600; font-size: 13.5px; letter-spacing: .03em; color: rgba(255, 255, 255, .86); }
.sec2-pcard__foot { display: block; margin-top: auto; padding-top: clamp(22px, 2.6vw, 30px); }

/* ---- CTA band. Ink close, centred, the hero's button pair. ---- */
.sec2-cta { background: var(--ink); color: var(--white); text-align: center; }
.sec2-cta h2 { max-width: 22ch; margin: 0 auto 20px; }
.sec2-cta p { font-weight: 350; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.65; max-width: 62ch; margin: 0 auto var(--sp-group); color: rgba(255, 255, 255, .86); }
.sec2-cta .sec2-ctas { justify-content: center; margin-top: 0; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
	.sec2-channels__grid { gap: var(--sp-item); }
}
@media (max-width: 900px) {
	.sec2-problem__grid { grid-template-columns: minmax(0, 1fr); }
	.sec2-problem__grid > .sec2-problem__body { max-width: none; }
	.sec2-problem__photo { min-height: 320px; order: 1; }
}
@media (max-width: 760px) {
	.sec2-channels__grid, .sec2-proof__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Journal carousel band (insights carousel variant). Dark surface +
   halftone corners; every article slider shares this so they feel the same. */
.pb-jrn { position: relative; overflow: hidden; background: var(--ink); color: var(--white); padding: clamp(64px, 9vw, 120px) 0; }
.pb-jrn__ht { position: absolute; width: 320px; height: 320px; pointer-events: none; }
.pb-jrn__ht--tl { top: -80px; left: -80px; }
.pb-jrn__ht--br { bottom: -80px; right: -80px; }
.pb-jrn__head { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 28px; }
.pb-jrn__head h2 { font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; letter-spacing: -.01em; margin: 0; }
.pb-jrn__pill { font-weight: 600; font-size: 15px; padding: 12px 26px; border-radius: 999px; text-decoration: none; color: var(--white); box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); transition: background .3s cubic-bezier(.16, 1, .3, 1), color .3s cubic-bezier(.16, 1, .3, 1); }
.pb-jrn__pill:hover { background: var(--white); color: var(--ink); }
.pb-jrn__car { display: flex; gap: 24px; overflow-x: auto; padding: 30px 4px 12px; scrollbar-width: none; touch-action: pan-x pan-y; }
.pb-jrn__car::-webkit-scrollbar { display: none; }
.pb-jrn__car.dragging { scroll-behavior: auto; user-select: none; }
.pb-jrn__card { flex: 0 0 340px; background: var(--white); color: var(--ink); border-radius: 14px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
	box-shadow: 0 18px 44px -20px color-mix(in srgb, var(--jc-sw, var(--sw-5)) 45%, rgba(0,0,0,.5));
	transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1); }
.pb-jrn__card:hover { transform: translateY(-3px); box-shadow: 0 24px 54px -20px color-mix(in srgb, var(--jc-sw, var(--sw-5)) 60%, rgba(0,0,0,.5)); }
.pb-jrn__card figure { height: 190px; overflow: hidden; margin: 0; }
.pb-jrn__card figure img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform 5s cubic-bezier(.16, 1, .3, 1); }
.pb-jrn__card:hover figure img { transform: scale(1.07); }
.pb-jrn__body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.pb-jrn__meta { font-weight: 350; font-size: 14px; color: #555; }
.pb-jrn__card h3 { font-weight: 600; font-size: 18.5px; line-height: 1.35; margin: 0; }

/* Capture forms on the sector hero scrim: the v2 pill language on the dark
   surface, replacing the mono-uppercase capture default. Scoped to
   .sec2-hero only — the sector CTA band is the cream v1__cta-row, where
   white pills were illegible; it now takes the global light-surface
   capture style like every other CTA band. */
.sec2-hero .pb-capture { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sec2-hero .pb-capture__intro { display: none; }
.sec2-hero .pb-capture .gform_wrapper form { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }
.sec2-hero .pb-capture .gform_wrapper .gform-body { flex: 0 0 auto; }
.sec2-hero .pb-capture .gform_wrapper .gform_footer { margin: 0; padding: 0; }
.sec2-hero .pb-capture .gform_wrapper .gform_fields { display: flex; gap: 12px; }
.sec2-hero .pb-capture .gfield_label, .sec2-hero .pb-capture .gfield_required { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sec2-hero .pb-capture input[type="email"], .sec2-hero .pb-capture input[type="text"], .sec2-hero .pb-capture input[type="url"] { font-family: 'Biennale', var(--sans) !important; font-size: 16px !important; padding: 14px 22px !important; min-width: 280px; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.96) !important; color: var(--ink) !important; }
/* Single field beside a pill submit, so the pill radius is correct here
   (tokens v3.2, §4). White fill on the dark hero, the sweep filling from
   the left on hover: the lift-on-hover translateY is retired with the
   rest of the pre-v3 motion. GF's own CSS is dequeued site-wide, so no
   --gf-* var re-pointing is needed any more. */
.sec2-hero .pb-capture input[type="submit"], .sec2-hero .pb-capture .gform_button, .sec2-hero .pb-capture .btn--accent { font-family: 'Biennale', var(--sans) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 14px 28px !important; border: 0 !important; border-radius: 999px !important; background-color: var(--white) !important; color: var(--ink) !important; background-image: linear-gradient(to right, var(--sweep, var(--sw-4)) 50%, transparent 50%) !important; background-size: 200% 100% !important; background-position: 100% 0 !important; background-repeat: no-repeat !important; cursor: pointer; transition: background-position var(--dur-move) var(--ease-reveal), color var(--dur-move) var(--ease-state); }
.sec2-hero .pb-capture input[type="submit"]:hover, .sec2-hero .pb-capture input[type="submit"]:focus-visible, .sec2-hero .pb-capture .gform_button:hover, .sec2-hero .pb-capture .gform_button:focus-visible { background-position: 0 0 !important; color: var(--ink) !important; }
.sec2-hero .pb-capture__stepup { margin-top: 6px; }
.sec2-hero .pb-capture__stepup a { font-family: 'Biennale', var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: none; color: var(--white); padding: 12px 26px; border-radius: 999px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); display: inline-block; transition: background .3s, color .3s; }
.sec2-hero .pb-capture__stepup a:hover { background: var(--white); color: var(--ink); }

/* Hub tiles. World shots, swatch tint UNDER a strong ink scrim (text must
   pass on every image), editorial 12-col spans, slow-zoom hover, no arrows. */
.sec2-tiles { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.sec2-tile { position: relative; border-radius: 14px; overflow: hidden; display: flex; align-items: flex-end; min-height: 430px; text-decoration: none; color: var(--white);
	box-shadow: 0 18px 44px -20px color-mix(in srgb, var(--t) 50%, rgba(13,13,13,.3));
	transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1); }
.sec2-tile:hover { transform: translateY(-3px); box-shadow: 0 24px 54px -20px color-mix(in srgb, var(--t) 62%, rgba(13,13,13,.32)); }
.sec2-tile__img { position: absolute; inset: 0; }
.sec2-tile__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 6s cubic-bezier(.16, 1, .3, 1); }
.sec2-tile:hover .sec2-tile__img img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .sec2-tile__img img { transition-duration: 12s; } }
.sec2-tile__img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--t) 40%, transparent) 0%, transparent 48%); }
.sec2-tile__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,13,.9) 0%, rgba(13,13,13,.55) 34%, rgba(13,13,13,.12) 58%, transparent 72%); }
.sec2-tile__body { position: relative; z-index: 2; padding: 30px 32px; display: flex; flex-direction: column; gap: 10px; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.sec2-tile h3 { font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.01em; margin: 0; }
.sec2-tile p { font-weight: 400; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.96); max-width: 520px; margin: 0; }
.sec2-tile--ink { background: var(--ink); }

/* Why this matters. Static swatch stripe column (brand thread from the
   homepage stripes). Hover the block: the stripes morph into an upward-
   trending bar chart, left to right on a stagger, bottoms anchored, heights
   on a power curve so the finish steepens (chart go up; ruled 22 Jul). */
.sec2-why { display: grid; grid-template-columns: 1fr 3fr; gap: clamp(40px, 6vw, 88px); align-items: stretch; }
.sec2-why__stripes { display: flex; align-items: flex-end; }
.sec2-why__stripes span { flex: 1 1 0; height: 100%; transform-origin: bottom; transition: transform .55s cubic-bezier(.16, 1, .3, 1); }
/* Enter: every bar drops low, then each grows up to its curve height in
   sequence, left to right. Leave: the base transition restores the block. */
.sec2-why__stripes.chart span { animation: sec2-bar-up .6s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--cd, 0s); }
.sec2-why__stripes.chart span:nth-child(1) { --cd: 0s;   --bh: .22; }
.sec2-why__stripes.chart span:nth-child(2) { --cd: .07s; --bh: .24; }
.sec2-why__stripes.chart span:nth-child(3) { --cd: .14s; --bh: .28; }
.sec2-why__stripes.chart span:nth-child(4) { --cd: .21s; --bh: .35; }
.sec2-why__stripes.chart span:nth-child(5) { --cd: .28s; --bh: .45; }
.sec2-why__stripes.chart span:nth-child(6) { --cd: .35s; --bh: .58; }
.sec2-why__stripes.chart span:nth-child(7) { --cd: .42s; --bh: .76; }
.sec2-why__stripes.chart span:nth-child(8) { --cd: .49s; --bh: 1; }
@keyframes sec2-bar-up {
	0%   { transform: scaleY(.12); }
	100% { transform: scaleY(var(--bh, 1)); }
}
@media (prefers-reduced-motion: reduce) {
	.sec2-why__stripes span { transition-duration: 1s; }
	.sec2-why__stripes.chart span { animation-duration: 1.1s; }
}
.sec2-why p { font-size: 18px; line-height: 1.75; }
.sec2-why p + p { margin-top: 18px; }
/* Hub responsive. Lives AFTER the base rules: the ---- Responsive ----
   block higher up loses on source order for these selectors. */
@media (max-width: 760px) {
	/* One tile per row; the editorial 12-col spans are inline per tile,
	   so the stack needs !important to win. */
	.sec2-tiles { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.sec2-tile { grid-column: 1 / -1 !important; min-height: 340px; }
	/* Why this matters: prose only. The stripe chart is desktop furniture
	   (Sean, 31 Jul 2026: hide it on mobile, don't stack it). */
	.sec2-why { grid-template-columns: minmax(0, 1fr); }
	.sec2-why__stripes { display: none; }
}

/* ---- THE LOCKED FAQ SYSTEM, in the V3/V4 composition (29 Jul 2026) ----
   Same component, same markup, same schema (proudbrands_component_faq).
   The designs stack it: heading over a single 82ch column of hairline rows,
   rather than the split head. Page scopes are added to this selector list;
   the FAQ is never restyled per template. */
.sec2 .svp__faq, .res2 .svp__faq, .svc4 .svp__faq { background: var(--white); padding: var(--sp-band) 0; margin-top: 0; }
.sec2 .svp__faq .container, .res2 .svp__faq .container, .svc4 .svp__faq .container { display: block; max-width: 82ch; }
.sec2 .svp__faq h2, .res2 .svp__faq h2, .svc4 .svp__faq h2 {
	font-family: var(--font);
	font-weight: 700;
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	text-transform: none;
	max-width: 22ch;
	color: var(--ink);
}
.sec2 .svp__faq-list, .res2 .svp__faq-list, .svc4 .svp__faq-list { margin-top: clamp(32px, 4vw, 44px); gap: 0; }
.sec2 .svp__faq-item, .res2 .svp__faq-item, .svc4 .svp__faq-item { border-top: 1px solid rgba(13, 13, 13, .14); border-bottom: 0; }
.sec2 .svp__faq-item:last-child, .res2 .svp__faq-item:last-child, .svc4 .svp__faq-item:last-child { border-bottom: 1px solid rgba(13, 13, 13, .14); }
.sec2 .svp__faq-item summary, .res2 .svp__faq-item summary, .svc4 .svp__faq-item summary { padding: 22px 0; gap: var(--sp-item); align-items: flex-start; }
.sec2 .svp__faq summary .q, .res2 .svp__faq summary .q, .svc4 .svp__faq summary .q {
	font-family: var(--font);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.35;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--ink);
}
.sec2 .svp__faq-item[open] summary .q, .res2 .svp__faq-item[open] summary .q, .svc4 .svp__faq-item[open] summary .q { font-weight: 700; }
.sec2 .svp__faq-item .plus, .res2 .svp__faq-item .plus, .svc4 .svp__faq-item .plus { color: var(--ink); margin-top: 2px; }
.sec2 .svp__faq .a, .res2 .svp__faq .a, .svc4 .svp__faq .a {
	font-family: var(--font);
	font-weight: 350;
	font-size: 1.02rem;
	line-height: 1.7;
	max-width: 70ch;
	margin: 0 0 var(--sp-item);
	color: rgba(13, 13, 13, .8);
}
.sec2 .svp__faq .a a, .svc4 .svp__faq .a a { text-decoration: underline; text-underline-offset: 3px; }

/* ============ HERO BREADCRUMBS + CASE-STUDY LOGO MOVE (23 Jul 2026) ============
   Sector-pattern breadcrumbs inside every hero (overlay on photo/dark heroes,
   in-flow ink on light heroes); partner logo moves from the white-filtered
   hero slot to full colour above the who-they-are narrative. */
/* Left on the V3/V4 heroes (29 Jul 2026): the sector hero sets its copy
   left, so a centred crumb floated free of everything under it. */
.sec2-hero__crumb--flow { position: static; margin-bottom: 0; }
.sec2-hero__crumb--ink { color: rgba(13, 13, 13, .62); }
.sec2-hero__crumb--ink a { color: rgba(13, 13, 13, .62); }
.sec2-hero__crumb--ink a:hover { color: var(--ink); }
.sec2-hero__crumb--ink span { color: rgba(13, 13, 13, .35); }
.sec2-hero__crumb .is-current { color: var(--white); font-weight: 600; }
.sec2-hero__crumb--ink .is-current { color: var(--ink); font-weight: 600; }
.csd-narr__logo { height: 44px; width: auto; display: block; margin-bottom: 28px; }

/* Evidence figure 'fit: contain' (23 Jul 2026): whole screenshot shown,
   no 16:9 crop — ruled for figures whose point lives below the crop line
   (Radley map pack). */
.csd-ev-fig--contain img { object-fit: contain; background: var(--white); }

/* Evidence lightbox triggers (23 Jul 2026): the figure is the button.
   Bare reset so the card look is unchanged; zoom cursor signals the action. */
.csd-ev-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; }
.csd-ev-zoom img { display: block; }
.csd-ev-zoom:focus-visible { outline: 2px solid var(--tone, #F06522); outline-offset: 2px; }

/* ============================================================
   SERVICE PAGES V4 (29 Jul 2026) · scoped .svc4
   Built from exports/service-technical-seo.html (the locked
   template) and exports/service-local-seo.html (the same template
   with every optional block present), against tokens v3.

   SUPERSEDES "SERVICE PAGES V3 · SYNTHESIS" above. The duotone lead
   strip, circled proof figures, hand-ticked index and step cards are
   retired with it; those rules are left in place but nothing on a
   service page matches them any more.

   Bands, in order:
     01 masthead          paper · crumb, H1, deck, two CTAs. No image.
     02 what this is      mist  · two-column prose + a wide plate
     03 what it covers    white · six cards, a photograph splitting the run
     04 how the work runs ink   · stage tabs + one panel (prose variant below)
     05 proof             paper · entry card + quote card
     06 areas we cover    mist  · photo plate (location pages only)
     07 straight answers  white · FAQ
     08 closing CTA       ink   · halftone corners

   Corrections to the drawn design, all token-driven:
   - tab and stat-plate radius 12px → 14px (12 is retired).
   - control boundaries: the tab ring measured 2.50:1 and the ghost
     pill ring 1.77:1. Both fail WCAG 1.4.11, which wants 3:1 on a
     control boundary, so both are raised (see --ring-ink/--ring-w).
   - the three freehand scrims across the two pages collapse onto the
     two named tokens: --scrim for a photo band, --scrim-plate for a
     text plate sitting over bright imagery.
   - :focus-visible is defined. --focus is ink, which is invisible on
     the ink band, so dark surfaces take the white ring.
   ============================================================ */

.svc4 {
	font-family: var(--font);
	font-weight: 350;
	color: var(--ink);
	background: var(--paper);
}
.svc4 h1, .svc4 h2, .svc4 h3 { font-family: var(--font); }
.svc4 .svc4-in {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--sp-band) var(--gutter);
}
.svc4 h2 {
	font-weight: 700;
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	max-width: 22ch;
}
.svc4 p { text-wrap: pretty; }
.svc4 strong { font-weight: 600; color: var(--ink); }

/* Focus. The ink ring is invisible on the ink band, so anything on a
   dark surface takes the white one. Never removed, never gated. */
.svc4 a:focus-visible,
.svc4 button:focus-visible,
.svc4 summary:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 4px;
}
.svc4-runs a:focus-visible,
.svc4-runs button:focus-visible,
.svc4-cta a:focus-visible,
.svc4-cta button:focus-visible,
.svc4-areas__plate a:focus-visible { outline-color: var(--white); }

/* ---- 01 Masthead. Paper, no photograph: the page opens on the words. ---- */
.svc4-mast { background: var(--paper); }
.svc4-mast .svc4-in { padding: clamp(40px, 5vw, 68px) var(--gutter) clamp(40px, 5vw, 60px); }
.svc4-mast h1 {
	font-weight: 700;
	font-size: clamp(2.4rem, 5.6vw, 4.9rem);
	line-height: 1.03;
	letter-spacing: -.028em;
	max-width: 21ch;
	margin: 26px 0 0;
	text-wrap: pretty;
}
.svc4-deck {
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.65;
	max-width: 58ch;
	margin: 24px 0 0;
	color: rgba(13, 13, 13, .7);
}
.svc4-receipts {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6;
	max-width: 58ch;
	margin: 20px 0 0;
	color: var(--ink);
}
.svc4-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: var(--sp-group); }

/* ---- 02 What this is. Mist. Two columns of prose over a wide plate. ---- */
.svc4-is { background: var(--mist); }
.svc4-is h2 { margin: 0 0 clamp(28px, 3vw, 40px); max-width: none; }
.svc4-is__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}
.svc4-is__grid p {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	color: rgba(13, 13, 13, .8);
}
.svc4-is__grid p + p { margin-top: var(--sp-close); }
/* One seed paragraph, two drawn columns. The prose flows rather than being
   cut in half, because the copy is not ours to split. */
.svc4-is__grid--flow { display: block; }
.svc4-is__grid--flow > div { columns: 2; column-gap: clamp(24px, 4vw, 56px); }
@media (max-width: 760px) { .svc4-is__grid--flow > div { columns: 1; } }
.svc4-is__plate {
	margin: clamp(28px, 3vw, 40px) 0 0;
	height: clamp(220px, 32vw, 420px);
	overflow: hidden;
	border-radius: var(--radius-card);
}
.svc4-is__plate img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.svc4-is__credit { margin-top: 12px; font-size: 13px; color: rgba(13, 13, 13, .6); }
.svc4-is__credit a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- 03 What it covers. White. Cards on paper, tone shadow, split photo. ---- */
.svc4-covers { background: var(--white); }
.svc4-covers__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-item);
	margin-top: clamp(40px, 5vw, 60px);
}
.svc4-covers__grid + .svc4-covers__grid,
.svc4-covers__split + .svc4-covers__grid { margin-top: clamp(28px, 3vw, 40px); }
.svc4-card {
	min-width: 0;
	background: var(--paper);
	border-radius: var(--radius-card);
	padding: clamp(24px, 2.6vw, 32px);
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 22px 44px -16px color-mix(in srgb, var(--card-tone, var(--sw-4)) 50%, transparent);
}
.svc4-card h3 {
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: -.018em;
	line-height: 1.25;
	/* Rule 05: reserve the tallest title in the row so the bodies start
	   on one line across all three cards. */
	min-height: 2.5em;
}
.svc4-card p {
	font-size: 1rem;
	line-height: 1.65;
	margin-top: 12px;
	color: rgba(13, 13, 13, .8);
}
.svc4-covers__split {
	margin: clamp(28px, 3vw, 40px) 0 0;
	border-radius: var(--radius-card);
	overflow: hidden;
	height: clamp(200px, 24vw, 320px);
}
.svc4-covers__split img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.svc4-covers .btn3 { margin-top: clamp(32px, 3.6vw, 44px); }

/* ---- 04 How the work runs. Ink. Five stage tabs over one panel. ---- */
.svc4-runs { background: var(--ink); color: var(--white); }
.svc4-runs__lede {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	max-width: 56ch;
	margin: 20px 0 0;
	color: rgba(255, 255, 255, .78);
}
.svc4-tabs {
	display: grid;
	gap: 10px;
	align-items: stretch;
	margin: clamp(40px, 5vw, 60px) 0 14px;
}
/* Explicit tracks for known counts (rule 01). Five never goes to three:
   it goes five, then two with the fifth spanning, then one. */
.svc4-tabs--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc4-tabs--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.svc4-tabs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc4-tabs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc4-tabs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc4-tabs--1 { grid-template-columns: minmax(0, 1fr); }
.svc4-tab {
	min-width: 0;
	display: block;
	width: 100%;
	height: 100%;
	text-align: left;
	font-family: inherit;
	border-radius: var(--radius-card);
	padding: clamp(16px, 1.8vw, 22px);
	font-weight: 600;
	font-size: clamp(1rem, 1.15vw, 1.1rem);
	letter-spacing: -.01em;
	line-height: 1.3;
	background: transparent;
	color: var(--white);
	box-shadow: inset 0 0 0 1.5px var(--ring-w);
	transition: background-color var(--dur-move) var(--ease-state),
	            color var(--dur-move) var(--ease-state),
	            box-shadow var(--dur-move) var(--ease-state);
}
.svc4-tab:hover { box-shadow: inset 0 0 0 1.5px var(--white); }
.svc4-tab[aria-selected="true"] {
	background: var(--stage, var(--sw-4));
	color: var(--ink);
	box-shadow: none;
}
.svc4-panel {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	background: var(--stage, var(--sw-4));
	color: var(--ink);
	border-radius: var(--radius-card);
	overflow: hidden;
	min-height: clamp(280px, 26vw, 360px);
}
.svc4-panel[hidden] { display: none; }
.svc4-panel--solo { grid-template-columns: minmax(0, 1fr); }
.svc4-panel__body {
	padding: clamp(28px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.svc4-panel__count {
	display: block;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .04em;
	color: var(--ink);
}
.svc4-panel h3 {
	font-weight: 700;
	font-size: clamp(1.7rem, 3vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -.022em;
	margin: 14px 0 0;
	max-width: 24ch;
}
.svc4-panel p {
	font-weight: 400;
	font-size: clamp(1.08rem, 1.5vw, 1.32rem);
	line-height: 1.55;
	margin: 18px 0 0;
	max-width: 48ch;
	color: rgba(13, 13, 13, .84);
}
.svc4-panel > img { width: 100%; height: 100%; object-fit: cover; }

/* Prose variant: a seed with no discrete stages runs the same ink band as
   numbered prose. No tabs are invented to fill the layout. */
.svc4-runs__prose { display: grid; gap: clamp(28px, 3vw, 40px); margin-top: clamp(40px, 5vw, 60px); }
.svc4-runs__prose p {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	max-width: 68ch;
	color: rgba(255, 255, 255, .82);
}
.svc4-runs__note { margin-top: var(--sp-group); }
.svc4-runs__note p { color: rgba(255, 255, 255, .72); max-width: 68ch; }
.svc4-runs__note p + p { margin-top: var(--sp-close); }

/* ---- 05 Proof. Paper. The entry card and, beside it, the quote. ---- */
.svc4-proof { background: var(--paper); }
.svc4-proof__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-item);
	margin-top: clamp(32px, 4vw, 48px);
	align-items: stretch;
}
/* One card and no quote: hold it to a card's width rather than letting the
   stat plate stretch the full container. */
.svc4-proof__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.svc4-proof__lede {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	max-width: 62ch;
	margin: var(--sp-item) 0 0;
	color: rgba(13, 13, 13, .8);
}
.svc4-entry {
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: var(--radius-card);
	padding: clamp(26px, 3vw, 36px);
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 22px 44px -16px color-mix(in srgb, var(--card-tone, var(--sw-4)) 50%, transparent);
	transition: transform var(--dur-move) var(--ease-state), box-shadow var(--dur-move) var(--ease-state);
}
.svc4-entry, .svc4-entry:hover { color: var(--ink); }
a.svc4-entry:hover .btn3 { background-position: 0 0; color: var(--ink); }
a.svc4-entry:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 28px 52px -14px color-mix(in srgb, var(--card-tone, var(--sw-4)) 62%, transparent);
}
.svc4-entry__name { font-weight: 600; font-size: 1.15rem; letter-spacing: -.014em; }
/* The results plate. Drawn as a field of the partner's swatch with ink
   figures, which is the one thing rule 12 rules out: a saturated bright
   vibrates under 20px+ type, and it made every card the same colour. The
   plate runs on ink instead, each figure carrying its own swatch on the
   leading edge, so the colour varies down the plate and the figures read. */
.svc4-plate {
	display: flex;
	flex-direction: column;
	margin-top: clamp(20px, 2.4vw, 26px);
	background: var(--ink);
	border-radius: var(--radius-card);
	padding: clamp(14px, 1.6vw, 18px) 0;
	overflow: hidden;
}
.svc4-plate span {
	display: block;
	padding: 12px clamp(18px, 2vw, 24px);
	border-left: 4px solid var(--row-tone, var(--card-tone, var(--sw-4)));
	font-weight: 700;
	font-size: clamp(1.15rem, 1.7vw, 1.5rem);
	letter-spacing: -.02em;
	line-height: 1.25;
	color: var(--white);
}
.svc4-plate span + span { margin-top: 10px; }
.svc4-entry__desc {
	font-size: 1rem;
	line-height: 1.65;
	margin-top: 18px;
	color: rgba(13, 13, 13, .78);
}
.svc4-entry__foot { display: block; margin-top: auto; padding-top: clamp(20px, 2.4vw, 28px); }
.svc4-quote {
	min-width: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--ink);
	color: var(--white);
	border-radius: var(--radius-card);
	padding: clamp(28px, 3.4vw, 44px);
}
/* Rule 12: a quote is not a field. It sits on ink or paper with a swatch
   rule on the leading edge, never on a bright. */
.svc4-quote { border-left: 4px solid var(--card-tone, var(--sw-4)); }
.svc4-quote blockquote {
	font-size: clamp(1.24rem, 2vw, 1.72rem);
	line-height: 1.42;
	letter-spacing: -.014em;
}
.svc4-quote figcaption {
	margin-top: clamp(22px, 2.4vw, 30px);
	padding-top: clamp(20px, 2.2vw, 26px);
	border-top: 1px solid rgba(255, 255, 255, .22);
}
.svc4-quote__name { display: block; font-weight: 600; font-size: 1rem; }
.svc4-quote__role { display: block; font-size: 14.5px; margin-top: 4px; color: rgba(255, 255, 255, .72); }
.svc4-proof .pb-token { margin-top: var(--sp-item); }

/* Standalone quote section (a seed quote outside the proof block). */
.svc4-say { background: var(--white); }
.svc4-say .svc4-quote { max-width: 82ch; margin: 0 auto; }

/* ---- 06 Areas we cover. Mist. One plate, photograph under the scrim. ---- */
.svc4-areas { background: var(--mist); }
.svc4-areas .svc4-in { padding: clamp(24px, 3vw, 40px) var(--gutter) var(--sp-band); }
.svc4-areas__plate {
	position: relative;
	border-radius: var(--radius-card);
	overflow: hidden;
	min-height: clamp(400px, 44vw, 540px);
	display: flex;
	align-items: flex-end;
	isolation: isolate;
}
.svc4-areas__plate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.svc4-areas__plate::after { content: ""; position: absolute; inset: 0; background: var(--scrim-plate); }
.svc4-areas__body { position: relative; z-index: 1; padding: clamp(32px, 4vw, 64px); color: var(--white); max-width: 62ch; }
.svc4-areas__body h2 { max-width: 18ch; }
.svc4-areas__body p {
	font-size: clamp(1.06rem, 1.5vw, 1.28rem);
	line-height: 1.62;
	margin: 22px 0 0;
	color: rgba(255, 255, 255, .9);
}
.svc4-areas__body .btn3 { margin-top: clamp(26px, 3vw, 34px); }
/* No photograph: the plate runs as mist with ink type rather than a
   scrim over nothing. */
.svc4-areas__plate--flat { background: var(--white); }
.svc4-areas__plate--flat::after { content: none; }
.svc4-areas__plate--flat .svc4-areas__body { color: var(--ink); }
.svc4-areas__plate--flat .svc4-areas__body p { color: rgba(13, 13, 13, .8); }

/* 07 Straight answers runs the locked FAQ system (proudbrands_component_faq).
   Its stacked composition is set once for both templates further down. */

/* ---- 08 Closing CTA. Ink, halftone corners, copy left, buttons right. ---- */
.svc4-cta { position: relative; background: var(--ink); color: var(--white); overflow: hidden; }
.svc4-cta__ht { position: absolute; width: 320px; height: 320px; pointer-events: none; }
.svc4-cta__ht--tl { top: -80px; left: -80px; }
.svc4-cta__ht--br { bottom: -80px; right: -80px; }
.svc4-cta .svc4-in { position: relative; padding: clamp(88px, 11vw, 152px) var(--gutter); }
.svc4-cta__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.svc4-cta h2 {
	font-size: clamp(2.2rem, 4.4vw, 3.6rem);
	line-height: 1.04;
	letter-spacing: -.026em;
	max-width: 20ch;
}
.svc4-cta p {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	margin: 24px 0 0;
	max-width: 52ch;
	color: rgba(255, 255, 255, .86);
}
.svc4-cta .svc4-btns { margin-top: 0; }

/* ---- Free-form seed prose (mechanics, position, quality, split, ...) ---- */
.svc4-prose { background: var(--white); }
.svc4-prose + .svc4-prose { padding-top: 0; }
.svc4-prose__body { margin-top: var(--sp-item); columns: 2; column-gap: clamp(24px, 4vw, 56px); }
.svc4-prose__body > p { break-inside: avoid-column; }
.svc4-prose--split .svc4-prose__body { columns: 1; max-width: 62ch; }
@media (max-width: 900px) { .svc4-prose__body { columns: 1; max-width: 70ch; } }
.svc4-prose__body p {
	font-size: clamp(1.02rem, 1.3vw, 1.12rem);
	line-height: 1.7;
	color: rgba(13, 13, 13, .8);
}
.svc4-prose__body p + p { margin-top: var(--sp-close); }
.svc4-prose__body a { text-decoration: underline; text-underline-offset: 3px; }
.svc4-prose__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-item);
	margin-top: var(--sp-group);
}
.svc4-prose__cards > div {
	background: var(--paper);
	border-radius: var(--radius-card);
	padding: clamp(24px, 2.6vw, 32px);
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 22px 44px -16px color-mix(in srgb, var(--card-tone, var(--sw-4)) 50%, transparent);
}
.svc4-prose__cards h3 { font-weight: 700; font-size: 1.35rem; letter-spacing: -.018em; line-height: 1.25; }
.svc4-prose__cards p { font-size: 1rem; line-height: 1.65; margin-top: 12px; color: rgba(13, 13, 13, .8); }
.svc4-prose__links { display: flex; flex-wrap: wrap; gap: var(--sp-close); margin-top: var(--sp-group); }
/* Ink variant: the band a page runs when its seed has no stages, so "how the
   work runs" never renders and the page would otherwise have no dark band. */
.svc4-prose--ink { background: var(--ink); color: var(--white); }
.svc4-prose--ink + .svc4-prose { padding-top: var(--sp-band); }
.svc4-prose--ink .svc4-prose__body p { color: rgba(255, 255, 255, .82); }
.svc4-prose--ink .svc4-prose__cards > div { background: rgba(255, 255, 255, .06); box-shadow: none; }
.svc4-prose--ink .svc4-prose__cards p { color: rgba(255, 255, 255, .78); }
.svc4-prose--ink a:focus-visible { outline-color: var(--white); }
/* Split variant: prose left, the results card right, so a page whose seed has
   no stages does not open a near-empty section for a single card. */
.svc4-prose__grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}
.svc4-prose__aside-h2 {
	font-weight: 700;
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	line-height: 1.12;
	letter-spacing: -.02em;
	margin-bottom: var(--sp-item);
	max-width: 20ch;
}
.svc4-prose--ink .svc4-prose__aside .svc4-entry { box-shadow: none; }
@media (max-width: 900px) {
	.svc4-prose__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Entity line and the closing strip ---- */
.svc4-entity { background: var(--paper); }
.svc4-entity .svc4-in { padding: var(--sp-block) var(--gutter); }
.svc4-entity p { max-width: 92ch; font-size: 1rem; line-height: 1.7; color: rgba(13, 13, 13, .72); }
.svc4-entity a { text-decoration: underline; text-underline-offset: 3px; }
.svc4-strip { display: grid; grid-template-columns: repeat(8, 1fr); height: 4px; }
.svc4-strip span { display: block; }

/* ---- Responsive. The four named breakpoints, plus 860 for the panel,
        which has to stack before its 7/5 split gets narrower than the
        photograph can carry. ---- */
@media (max-width: 1000px) {
	.svc4-tabs--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.svc4-tabs--5 > *:nth-child(5) { grid-column: span 2; }
	.svc4-tabs--4, .svc4-tabs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.svc4-tabs--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.svc4-covers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.svc4-panel { grid-template-columns: minmax(0, 1fr); }
	.svc4-panel > img { height: clamp(200px, 40vw, 300px); }
}
@media (max-width: 760px) {
	.svc4-is__grid,
	.svc4-covers__grid,
	.svc4-proof__grid,
	.svc4-prose__cards,
	.svc4-cta__grid { grid-template-columns: minmax(0, 1fr); }
	.svc4-tabs--5 > *:nth-child(5) { grid-column: auto; }
	.svc4-tabs--6, .svc4-tabs--5, .svc4-tabs--4, .svc4-tabs--3, .svc4-tabs--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	/* One card per row: there is no neighbour to reserve a line for, and the
	   reservation reads as a hole under a one-line title. */
	.svc4-card h3 { min-height: 0; }
}
@media (max-width: 640px) {
	.svc4-areas__plate { min-height: clamp(340px, 70vw, 420px); }
}
/* ============================================================
   HOME V3 (26 Jul 2026) · scoped .v3home
   Built from final-design/Proud Brands Home.dc.html against tokens v3.
   SUPERSEDES the HOME V2 block and its later amendments: the masonry
   variant, the sectors carousel, the OSOF photo band and STRIPES V3.
   Those rules are left in place above but nothing on the homepage
   matches them any more (.v2h-ht is the exception: components.php
   still emits it site-wide, so it stays live).

   Grammar, band by band (REVISED 31 Jul 2026, homepage review meeting —
   proof + why + cases consolidated, stripes retired for bookends,
   insights now a live feed + ink research plate):
     01 hero      ink + photograph, closed by the strip
     02 why       mist    · featured receipt card + eight media cards
     03 trust     white   · marquee
     04 services  INK     · flat swatch bookends, no animation
     05 osof      white   · three tone plates + Convert (tan, no shadow)
     06 sectors   mist    · eight tiles
     07 insights  paper   · journal feed + research library TAN PLATE
     08 cta       INK     · centred, halftone corners, one-plan sub-line
   (Getting-started band removed 31 Jul; its plate CSS stays for reuse.)
   Two ink bands, never adjacent (the research plate is a plate, not a
   band). Every field differs from its ground.
   ============================================================ */

.v3home {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-weight: 400;
	line-height: 1.5;
}

/* theme.json still declares h1/h3/h4 as Archivo 900 and h2 as Fraunces, and
   WordPress emits those as ELEMENT rules in global styles. A directly matched
   declaration beats an inherited one whatever the specificity, so setting the
   family on .v3home alone is not enough: every heading has to say it. */
.v3home h1,
.v3home h2,
.v3home h3,
.v3home h4 { font-family: var(--font); }

/* Focus: the token is --focus (ink), but an ink ring is invisible on the two
   ink bands, so those flip to white. Never inherit the retired gold. */
.v3home :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.v3h-svc :focus-visible,
.v3h-cta :focus-visible,
.v3h-hero :focus-visible,
.v3h-plate--photo :focus-visible { outline-color: var(--white); }

/* ---- Shared type. Roles and values straight from the token table ---- */
.v3home .v3h-h1 {
	font-weight: 700;
	font-size: clamp(2.4rem, 5.6vw, 4.9rem);
	line-height: 1.03;
	letter-spacing: -.028em;
	max-width: 21ch;
}
.v3home .v3h-h2 {
	font-weight: 700;
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	max-width: 22ch;
}
.v3home .v3h-h2--cta {
	font-size: clamp(2.2rem, 4.4vw, 3.6rem);
	line-height: 1.04;
	letter-spacing: -.026em;
	margin: 0 auto;
}
.v3home .v3h-standfirst {
	font-weight: 350;
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.6;
	max-width: 58ch;
	margin-top: var(--sp-close);
	color: rgba(13,13,13,.7);
	text-wrap: pretty;
}
.v3home .v3h-lede {
	font-weight: 350;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	max-width: 66ch;
	color: rgba(13,13,13,.8);
	text-wrap: pretty;
}

.v3h-btnrow { display: flex; gap: 14px; flex-wrap: wrap; margin-top: var(--sp-group); }
.v3h-btnrow--center { justify-content: center; margin-top: clamp(32px, 3.6vw, 48px); }

/* The strip. 4px, logo order, once per surface. */
.v3h-strip { display: grid; grid-template-columns: repeat(8, 1fr); height: 4px; }
.v3h-strip--hero { position: absolute; left: 0; right: 0; bottom: 0; }

/* ---- 01 · Hero ---- */
.v3h-hero {
	position: relative;
	min-height: min(86vh, 740px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--ink);
}
.v3h-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v3h-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(13,13,13,.92) 0%, rgba(13,13,13,.66) 46%, rgba(13,13,13,.32) 100%);
}
.v3h-hero__content {
	position: relative;
	padding-top: clamp(64px, 9vw, 130px);
	padding-bottom: clamp(52px, 6vw, 84px);
	color: var(--white);
}
.v3h-hero__sub {
	font-weight: 350;
	font-size: clamp(1.05rem, 1.5vw, 1.26rem);
	line-height: 1.68;
	max-width: 62ch;
	margin-top: 32px;
	color: rgba(255,255,255,.9);
	text-wrap: pretty;
}

/* ---- 02 · Why businesses choose Proud Brands ----
   The consolidated proof moment: benefit-first titles carry the numbers,
   partner names demoted to small credits. White cards on mist, tinted
   shadows (the E-card grammar), figures in the MID register only. */
.v3h-why { background: var(--mist); padding: var(--sp-band) 0; }
/* Stacked header, the mockup's shape: heading over lede, left-aligned.
   The heading runs a single line (no 22ch cap here) and the paragraph
   measures wider than it (Sean, 31 Jul). */
.v3h-why__head { margin-bottom: clamp(36px, 4.4vw, 56px); }
.v3home .v3h-why__head .v3h-h2 { max-width: none; }
.v3h-why__head .v3h-standfirst { max-width: 72ch; }

/* Featured card: image beside the receipt, 14px radius, flame shadow. */
.v3h-feat {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	background: var(--white);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 22px 44px -16px color-mix(in srgb, var(--card-tone, var(--sw-4)) 50%, transparent);
	transition: transform var(--dur-move) var(--ease-state), box-shadow var(--dur-move) var(--ease-state);
	color: var(--ink);
}
.v3h-feat:hover,
.v3h-feat:focus-visible { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 28px 52px -14px color-mix(in srgb, var(--card-tone, var(--sw-4)) 62%, transparent); color: var(--ink); }
/* The image fills absolutely so a featured-image swap can never set the
   card's height (31 Jul: a taller Coffee Lady featured blew the card up
   to the image's intrinsic ratio). Body copy + min-height own the height. */
.v3h-feat .shot { display: block; position: relative; min-height: clamp(240px, 26vw, 360px); }
.v3h-feat .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v3h-feat .body { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.4vw, 48px); }
.v3h-feat .title {
	display: block;
	color: var(--ink);
	font-weight: 700;
	font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem);
	line-height: 1.15;
	letter-spacing: -.015em;
	text-wrap: balance;
}
.v3h-feat .p { font-weight: 350; font-size: 15px; line-height: 1.6; margin-top: 12px; max-width: 44ch; color: rgba(13,13,13,.7); }
/* The read line: one fixed flame across every card, bold (Sean, 3 Aug 2026).
   Was var(--fig), the card's own mid, which made the line change colour per
   partner. FLAME IN THE TEXT REGISTER IS --sw-4-mid: the bright #F16522
   measures 3.20:1 on white and cannot carry 14px copy. --sw-4-mid is 5.94:1.
   A colour-field card overrides to ink further down (orange on a bright
   swatch does not read). */
.v3h-feat .read,
.v3h-wcard .read { display: block; font-weight: 700; font-size: 14px; margin-top: 14px; color: var(--sw-4-mid); }
.v3h-feat:hover .read,
.v3h-feat:focus-visible .read,
.v3h-wcard:hover .read,
.v3h-wcard:focus-visible .read { text-decoration: underline; text-underline-offset: 3px; }
/* Partner credit as an EYEBROW, above the headline. Sean broke the tokens v3
   "no mono-uppercase eyebrows" rule here on purpose (3 Aug 2026), matching
   Home(3). It stays in --sans, not --mono, and keeps rgba(13,13,13,.6)
   (5.25:1) rather than the mockup's #9a9a90 (2.84:1), which fails at 11px. */
.v3h-feat .who {
	display: block;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 20px;
	color: rgba(13,13,13,.6);
}
.v3h-feat--field { background: var(--card-tone); }
.v3h-feat--field .shot { display: none; }
.v3h-feat--field .title,
.v3h-feat--field .read { color: var(--ink); }
.v3h-feat--field .who { color: var(--ink); opacity: .8; }

/* Three media cards under the featured — the mockup's exact set (Sean,
   31 Jul: "Use the 4 he suggested only"). Explicit 3-track grid. */
.v3h-why__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: var(--sp-item);
	margin-top: var(--sp-item);
}
.v3h-wcard {
	min-width: 0;
	background: var(--white);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 22px 44px -16px color-mix(in srgb, var(--card-tone, var(--sw-4)) 50%, transparent);
	transition: transform var(--dur-move) var(--ease-state), box-shadow var(--dur-move) var(--ease-state);
	color: var(--ink);
	display: block;
}
.v3h-wcard:hover,
.v3h-wcard:focus-visible { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 28px 52px -14px color-mix(in srgb, var(--card-tone, var(--sw-4)) 62%, transparent); color: var(--ink); }
.v3h-wcard .shot { display: block; aspect-ratio: 3/2; overflow: hidden; }
.v3h-wcard .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-image) var(--ease-reveal); }
.v3h-wcard:hover .shot img { transform: scale(1.04); }
.v3h-wcard .body { display: block; padding: 18px 20px 22px; }
.v3h-wcard .title {
	display: block;
	color: var(--ink);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.25;
	letter-spacing: -.01em;
}
.v3h-wcard .p { display: block; font-weight: 350; font-size: 14.5px; line-height: 1.55; margin-top: 8px; color: rgba(13,13,13,.7); }
.v3h-wcard .who {
	display: block;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 12px;
	color: rgba(13,13,13,.6);
}
/* A partner with no featured image becomes a colour field; the field is its
   own elevation, so no shadow, and the figure goes ink for contrast. */
.v3h-wcard--field { background: var(--card-tone); box-shadow: none; }
.v3h-wcard--field:hover,
.v3h-wcard--field:focus-visible { box-shadow: none; }
.v3h-wcard--field .shot { display: none; }
.v3h-wcard--field .title,
.v3h-wcard--field .read { color: var(--ink); }
.v3h-wcard--field .who { color: var(--ink); opacity: .8; }
.v3h-why__btn { margin-top: 32px; }

/* ---- 03 · Trust marquee ----
   Global: the homepage and the location landers both render this band whole.
   Padding cut from clamp(40px, 5vw, 64px) on Sean's mark-up of 3 Aug 2026
   (the band ran 172px at desktop, too much air around a 44px logo). At 40px
   the band totals 124px, which is the height he ruled between. */
@keyframes pbMarqueeV3 { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.v3h-trust { background: var(--white); overflow: hidden; padding: clamp(26px, 3vw, 40px) 0; }
.v3h-trust__track { display: flex; width: max-content; animation: pbMarqueeV3 var(--dur-marquee) linear infinite; }
.v3h-trust__set {
	display: flex;
	align-items: center;
	gap: clamp(36px, 4.4vw, 64px);
	padding-right: clamp(36px, 4.4vw, 64px);
}
.v3h-trust__logo { height: clamp(28px, 3.4vw, 44px); width: auto; flex: none; }

/* ---- 04 · What we do. Flat swatch bookends ----
   (Meeting ruling 31 Jul 2026: the animated reveal stripes are retired.)
   Solid colour fields, ink text, vertical names reading TOP-TO-BOTTOM
   (plain vertical-rl, no rotation — "your head tilts to the right"),
   card radius, no photography, no unfold. Hover is the site's card lift
   with the swatch's own glow on the ink ground, nothing more. */
.v3h-svc { background: var(--ink); color: var(--white); padding: var(--sp-band) 0; }
.v3home .v3h-svc .v3h-h2 { max-width: none; margin-bottom: clamp(32px, 4vw, 48px); }
.v3h-bks {
	display: grid;
	grid-template-columns: repeat(5, minmax(0,1fr));
	gap: var(--sp-tight);
}
.v3h-bk {
	position: relative;
	min-width: 0;
	min-height: clamp(340px, 40vh, 440px);
	background: var(--sw);
	color: var(--ink);
	border-radius: var(--radius-card);
	padding: 22px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	transition: transform var(--dur-move) var(--ease-state), box-shadow var(--dur-move) var(--ease-state);
}
.v3h-bk:hover,
.v3h-bk:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 22px 44px -14px color-mix(in srgb, var(--sw) 45%, transparent);
	color: var(--ink);
}
/* vertical-lr, not -rl: glyphs read top-to-bottom either way for Latin,
   but when a long name ("Marketing strategy") wraps, -lr puts the second
   column to the RIGHT, on the card, where -rl would push it off the left
   edge. max-height forces the wrap before the name reaches the desc. */
.v3h-bk .name {
	position: absolute;
	top: 22px;
	left: 22px;
	writing-mode: vertical-lr;
	font-weight: 700;
	font-size: clamp(1.4rem, 1.9vw, 1.7rem);
	letter-spacing: -.015em;
	line-height: 1.1;
	max-height: calc(100% - 100px);
}
/* Usman's short benefit tail, little arrow included (Sean's exception,
   31 Jul, this component only). */
.v3h-bk .tail { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.v3h-bks__note {
	font-weight: 350;
	font-size: 1rem;
	line-height: 1.55;
	max-width: 56ch;
	margin-top: 32px;
	color: rgba(255,255,255,.7);
	text-wrap: pretty;
}

/* ---- 05 · OSOF. Three pillar plates + Convert ----
   (Meeting ruling 31 Jul 2026.) Pillars keep the tone shadows and gain
   hand-tick lists in the MID register; Convert is the fourth card but
   not a fourth pillar: tan field, NO shadow, ink ticks. Tick rows are
   separated by spacing, never hairlines. */
.v3h-osof { background: var(--white); padding: var(--sp-band) 0; }
.v3home .v3h-osof .v3h-h2 { max-width: 20ch; }
.v3home .v3h-osof .v3h-lede { margin-top: 18px; }
.v3h-osof__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0,1fr));
	gap: var(--sp-item);
	margin-top: clamp(26px, 3vw, 36px);
}
.v3h-plate {
	background: var(--paper);
	border-radius: var(--radius-card);
	padding: clamp(24px, 2.6vw, 32px);
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 22px 44px -16px color-mix(in srgb, var(--card-tone, var(--sw-4)) 50%, transparent);
}
.v3h-plate h3 { font-weight: 700; font-size: 1.35rem; letter-spacing: -.018em; line-height: 1.2; }
.v3h-plate p { font-weight: 350; font-size: 1rem; line-height: 1.65; margin-top: 12px; color: rgba(13,13,13,.8); }
.v3h-plate .ticks {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.v3h-plate .ticks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.45;
}
.v3h-plate .tick {
	flex: none;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	color: var(--tick, var(--ink));
}
/* Convert (revised same day): a standard plate like the pillars, carrying
   its own tone shadow — the tan-field treatment was dropped. */
.v3h-osof__btn { margin-top: clamp(24px, 2.6vw, 32px); }

/* ---- 08 · Sectors. Eight tiles ---- */
.v3h-sec { background: var(--mist); padding: var(--sp-band) 0; }
.v3home .v3h-sec .v3h-h2 { max-width: none; }
.v3home .v3h-sec .v3h-standfirst { margin-top: 20px; }
.v3h-sec__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0,1fr));
	gap: var(--sp-item);
	margin-top: clamp(40px, 5vw, 60px);
}
.v3h-tile {
	position: relative;
	min-width: 0;
	border-radius: var(--radius-card);
	overflow: hidden;
	min-height: clamp(240px, 25vw, 300px);
	display: flex;
	align-items: flex-end;
	color: var(--white);
	isolation: isolate;
}
.v3h-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-image) var(--ease-reveal); }
.v3h-tile:hover img { transform: scale(1.04); }
.v3h-tile .scrim { position: absolute; inset: 0; background: var(--scrim); }
.v3h-tile .name {
	position: relative;
	padding: 20px 22px;
	font-weight: 600;
	font-size: clamp(1.1rem, 1.3vw, 1.25rem);
	letter-spacing: -.012em;
	line-height: 1.3;
}
.v3h-tile:hover,
.v3h-tile:focus-visible { color: var(--white); }

/* ---- 07 · Insights. Journal feed + research library plate ----
   (Meeting ruling 31 Jul 2026, layout from the mockup, styling ours.)
   Featured article beside a list of recent posts. Separation comes from
   spacing and type weight — no hairlines, no arrows, no eyebrows. The
   research library is an INK PLATE inside this light band: a plate, not
   a band, which is how the two-adjacent-dark-blocks rule stays intact. */
.v3h-ins { background: var(--paper); padding: var(--sp-band) 0 clamp(40px, 5vw, 56px); }
.v3home .v3h-ins .v3h-h2 { max-width: none; }
.v3home .v3h-ins .v3h-standfirst { margin: 20px 0 var(--sp-group); }
.v3h-jrn {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: clamp(28px, 3.6vw, 48px);
	align-items: start;
}
.v3h-jrn__feat { display: block; color: var(--ink); }
.v3h-jrn__feat:hover,
.v3h-jrn__feat:focus-visible { color: var(--ink); }
.v3h-jrn__feat .shot {
	display: block;
	border-radius: var(--radius-card);
	overflow: hidden;
	aspect-ratio: 16/9;
	margin-bottom: 20px;
}
.v3h-jrn__feat .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-image) var(--ease-reveal); }
.v3h-jrn__feat:hover .shot img { transform: scale(1.04); }
.v3h-jrn .meta { display: block; font-weight: 350; font-size: 13.5px; color: rgba(13,13,13,.6); }
.v3h-jrn__feat .title {
	display: block;
	font-weight: 600;
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	line-height: 1.25;
	letter-spacing: -.015em;
	margin-top: 10px;
	max-width: 30ch;
	text-wrap: balance;
}
.v3h-jrn__feat:hover .title,
.v3h-jrn__item:hover .title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.v3h-jrn__list { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 28px); }
.v3h-jrn__item { display: block; color: var(--ink); }
.v3h-jrn__item:hover,
.v3h-jrn__item:focus-visible { color: var(--ink); }
.v3h-jrn__item .title { display: block; font-weight: 600; font-size: 16.5px; line-height: 1.35; margin-top: 5px; }
.v3h-jrn__btn { margin-top: 8px; align-self: flex-start; }

/* The research library plate. TAN field (Sean, 31 Jul — takes the tan
   Convert gave up), ink text per the brights-are-fields law. Ink on tan
   measures 9.5:1; the .75 secondary ink 5.8:1. */
.v3h-lib {
	margin-top: clamp(36px, 4.4vw, 56px);
	background: var(--sw-6);
	color: var(--ink);
	border-radius: var(--radius-card);
	padding: clamp(28px, 3.6vw, 48px);
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: clamp(28px, 3.6vw, 48px);
	align-items: center;
}
.v3h-lib__intro h3 { font-weight: 700; font-size: clamp(1.4rem, 2vw, 1.8rem); letter-spacing: -.02em; line-height: 1.15; }
.v3h-lib__intro p { font-weight: 350; font-size: 1rem; line-height: 1.6; margin-top: 12px; color: rgba(13,13,13,.75); max-width: 40ch; }
.v3h-lib__btn { margin-top: 22px; }
.v3h-lib__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.v3h-lib__list a {
	color: var(--ink);
	font-weight: 600;
	font-size: 16.5px;
	line-height: 1.4;
}
.v3h-lib__list a:hover,
.v3h-lib__list a:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* ---- 10 · Getting started ----
   Paper, not white, on Sean's instruction 26 Jul 2026: it runs on from the
   insights band as one surface rather than stepping to white. */
.v3h-start { background: var(--paper); padding: var(--sp-band) 0; }
.v3h-plate--photo {
	position: relative;
	border-radius: var(--radius-card);
	overflow: hidden;
	min-height: clamp(420px, 46vw, 560px);
	display: flex;
	align-items: flex-end;
	isolation: isolate;
}
.v3h-plate--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v3h-plate--photo .scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(13,13,13,.94) 0%, rgba(13,13,13,.74) 44%, rgba(13,13,13,.34) 100%);
}
.v3h-plate--photo .copy { position: relative; padding: clamp(32px, 4vw, 64px); color: var(--white); max-width: 64ch; }
.v3home .v3h-plate--photo .v3h-h2 { max-width: 20ch; }
.v3h-plate--photo .copy p {
	font-weight: 350;
	font-size: clamp(1.06rem, 1.5vw, 1.28rem);
	line-height: 1.62;
	margin-top: 22px;
	color: rgba(255,255,255,.9);
	text-wrap: pretty;
}
.v3h-plate--photo .copy p.emph {
	font-weight: 600;
	font-size: clamp(1.14rem, 1.6vw, 1.4rem);
	line-height: 1.45;
	letter-spacing: -.01em;
	margin-top: 20px;
	color: var(--white);
}

/* ---- 11 · Final CTA ---- */
.v3h-cta {
	position: relative;
	background: var(--ink);
	color: var(--white);
	overflow: hidden;
	text-align: center;
	padding: clamp(96px, 13vw, 176px) 0;
}
.v3h-cta__ht { position: absolute; width: 320px; height: 320px; pointer-events: none; }
.v3h-cta__ht--tl { top: -80px; left: -80px; }
.v3h-cta__ht--br { bottom: -80px; right: -80px; }
.v3h-cta .container { position: relative; }
.v3h-cta__sub {
	font-weight: 350;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	max-width: 52ch;
	margin: 20px auto 0;
	color: rgba(255,255,255,.85);
	text-wrap: pretty;
}

/* ---- Responsive. Explicit counts collapse at the token breakpoints ---- */
@media (max-width: 1000px) {
	/* Eight why cards: 4 -> 2. Five bookends: 5 -> 2 + the fifth spanning. */
	.v3h-why__cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.v3h-bks { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.v3h-bks > *:nth-child(5) { grid-column: span 2; }
	.v3h-bk { min-height: 240px; }
	.v3h-osof__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
	.v3h-sec__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.v3h-feat { grid-template-columns: minmax(0,1fr); }
	.v3h-feat .shot { min-height: 0; aspect-ratio: 16/9; }
	.v3h-jrn,
	.v3h-lib { grid-template-columns: minmax(0,1fr); }
	.v3h-lib { align-items: start; }
}
@media (max-width: 760px) {
	.v3h-osof__grid { grid-template-columns: minmax(0,1fr); }

	/* Bookends stack as rows: the name goes horizontal (same element,
	   writing-mode flips, so the accessible name never changes). */
	.v3h-bks { grid-template-columns: minmax(0,1fr); }
	.v3h-bks > *:nth-child(5) { grid-column: span 1; }
	.v3h-bk { min-height: 0; padding: 20px 22px; }
	.v3h-bk .name {
		position: static;
		writing-mode: horizontal-tb;
		font-size: 1.35rem;
		max-height: none;
	}
	.v3h-bk .desc { margin-top: 6px; }
}
@media (max-width: 640px) {
	.v3h-why__cards,
	.v3h-sec__grid { grid-template-columns: minmax(0,1fr); }
}

/* Reduced motion: slow down, never stop. Every element still reaches its
   final state, and no visibility or hit-testing is gated on a clock. */
@media (prefers-reduced-motion: reduce) {
	.v3h-trust__track { animation-duration: 240s; }
	.v3h-wcard .shot img,
	.v3h-jrn__feat .shot img,
	.v3h-tile img { transition-duration: 1s; }
}

/* ============================================================
   SITE CHROME v3 (26 Jul 2026)
   The nav, Services mega panel, mobile drawer and footer, rebuilt
   from final-design/Proud Brands Home.dc.html against tokens v3.
   Site-wide by Sean's ruling 26 Jul 2026 ("sections + full chrome"),
   so this block overrides SITE CHROME v2, FOOTER v3 and FOOTER v3.1.

   The two substantive changes beyond styling:
   1. THE FOOTER IS LIGHT. It was ink, which put two dark bands
      against each other under the homepage's ink CTA. Paper ground,
      the strip as the only separator, and the light-ground logo
      asset (the default file's wordmark is white and measured
      1.03:1 on paper).
   2. THE SWEEP REPLACES THE ARROW everywhere in the chrome. The
      mega's coloured dots and the nav-link marker bar are gone with
      it; each column's swatch is now the sweep colour, which is what
      --col-tone already carries.
   ============================================================ */

html { scroll-padding-top: 80px; }

/* ---- Nav ---- */
.nav {
	background: rgba(248,253,254,.94);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 0;
	z-index: 50;
}
/* Static so the mega panel's containing block is .nav and it can span the
   full width like the reference design. The simple dropdowns are unaffected:
   their own .nav-item is position: relative. */
/* The vertical-only shorthand was zeroing .container's horizontal gutters
   (same trap as .v2h-osof__inner) — below 1280px the bar touched the
   viewport edges. Keep the container's clamp in the shorthand. */
.nav-inner { position: static; padding: 16px clamp(20px, 4vw, 48px); gap: var(--sp-item); }
.nav-logo .brand-logo__svg { height: 34px; width: auto; }
.nav-right { gap: var(--sp-close); }

.nav-nav { gap: var(--sp-item); }
.nav-trigger {
	padding: 0;
	border-radius: 0;
	font-family: var(--font);
	font-size: 14.5px;
	font-weight: 600;
	color: rgba(13,13,13,.72);
	background: none;
	transition: color var(--dur-tap) var(--ease-state);
}
.nav-trigger:hover,
.nav-item[data-open="true"] > .nav-trigger { color: var(--ink); background: none; }
/* Was cyan, which measures 1.7:1 as type on paper. Mids are the only
   colours permitted on type. */
.nav-trigger.active { color: var(--sw-5-mid); }
.nav-caret { width: 9px; height: 9px; opacity: .5; }

.nav-panel {
	border: 0;
	border-radius: var(--radius-card);
	padding: 14px 12px;
	background: var(--mist);
	box-shadow: 0 2px 4px rgba(13,13,13,.04), 0 28px 56px -20px rgba(13,13,13,.28);
}
.nav-panel--simple { min-width: 260px; }

/* Nav links take the sweep, so the marker bar and the indent shift go. */
.nav-link {
	padding: 9px 12px;
	font-family: var(--font);
	font-size: 14.5px;
	font-weight: 400;
	color: rgba(13,13,13,.78);
	background-image: linear-gradient(to right, var(--col-tone, var(--sw-5)) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat; /* see the seam note on .btn3 */
	transition: background-position .2s var(--ease-reveal), color .2s var(--ease-state);
}
.nav-link::before { content: none; }
.nav-link:hover,
.nav-link:focus-visible { padding-left: 12px; background-position: 0 0; color: var(--ink); }

/* ---- The Services mega panel ---- */
.nav-panel--mega {
	top: 100%;
	left: 0;
	right: 0;
	padding: 0;
	border-radius: 0;
	max-height: calc(100dvh - 76px);
	overflow-y: auto;
	background: var(--mist);
}
.nav-panel__strip { display: grid; grid-template-columns: repeat(8, 1fr); height: 4px; }
/* Full-bleed ink field with its content held to the container: the padding
   expression centres the row without a second wrapper element. */
.nav-panel__bar {
	background: var(--ink);
	display: flex;
	gap: 2px;
	flex-wrap: wrap;
	padding: 0 max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}
.nav-panel__bar a {
	display: block;
	padding: var(--sp-close) 20px;
	font-family: var(--font);
	font-weight: 600;
	font-size: 15px;
	color: var(--white);
	background-image: linear-gradient(to right, var(--sweep) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat; /* see the seam note on .btn3 */
	transition: background-position var(--dur-move) var(--ease-reveal), color var(--dur-move) var(--ease-state);
}
.nav-panel__bar a:hover,
.nav-panel__bar a:focus-visible { background-position: 0 0; color: var(--ink); }
/* The Signal Check opens rather than navigates, so its fill rises. */
.nav-panel__bar a.btn3--open {
	background-image: linear-gradient(to top, var(--sweep) 50%, transparent 50%);
	background-size: 100% 200%;
	background-position: 0 0;
}
.nav-panel__bar a.btn3--open:hover,
.nav-panel__bar a.btn3--open:focus-visible { background-position: 0 100%; }

.nav-panel--mega .nav-mega {
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(24px, 2.6vw, 36px) var(--gutter);
	grid-template-columns: repeat(5, minmax(0,1fr));
	gap: clamp(16px, 2vw, 28px);
}
.nav-panel--mega .mega-col { min-width: 0; }
.nav-panel--mega .mega-col + .mega-col { border-left: 0; padding-left: 0; }
/* h4 included by name: chrome v2's `.nav-panel--mega .mega-col h4` rule
   out-specifies a bare .mega-col__hub, which left the one non-link column
   heading (Growth disciplines) at 42% ink while the other four were full ink.
   Same weight, same colour across a row. */
.nav-panel--mega .mega-col__hub,
.nav-panel--mega .mega-col h4.mega-col__hub {
	font-family: var(--font);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -.012em;
	padding: 0 12px 14px;
	margin: 0;
	border-bottom: 0;
	color: var(--ink);
	white-space: nowrap;
}
.nav-panel--mega a.mega-col__hub:hover { color: var(--ink); box-shadow: inset 0 -1px 0 0 var(--ink); }
.nav-panel--mega .mega-col > div { display: flex; flex-direction: column; gap: 1px; }

/* The mega's own foot row is retired: its links live in the ink bar. */
.nav-panel--mega .nav-panel-foot { display: none; }
.nav-panel-foot { border-top: 0; padding: var(--sp-close) 12px 0; margin-top: 14px; }
.nav-panel-foot a { font-family: var(--font); font-weight: 600; font-size: 14px; color: var(--ink); }
.nav-panel-foot a:hover { gap: 9px; box-shadow: inset 0 -1px 0 0 var(--ink); }

@media (max-width: 900px) {
	.nav-panel--mega .nav-mega { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ---- Mobile drawer. Stays an ink surface; type aligns to Biennale ---- */
.acc-link,
.acc-flat {
	font-family: var(--font);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -.02em;
}
.acc-panel a.acc-all { color: var(--sw-5); font-weight: 600; }
.drawer-cta { display: block; width: 100%; text-align: center; }

/* ---- Footer. Paper ground ---- */
.footer {
	background: var(--paper);
	color: var(--ink);
	border-top: 0;
	padding: clamp(56px, 6vw, 88px) 0;
}
/* The strip is the separator between the page and the footer. */
.footer::before { height: 4px; }
.footer .brand-logo__svg { color: inherit; }

/* Usman's footer, in white (31 Jul 2026): brand column + Services ·
   Insights · Company · Newsletter, his 1.4fr lead track. The old entity
   block is retired from render; its rules below are dormant. */
.footer-cols { grid-template-columns: 1.4fr repeat(4, minmax(0,1fr)); gap: clamp(20px, 2.6vw, 40px); }
.footer-brandcol .brand-logo__svg { width: 150px; height: auto; display: block; }
.footer-brandcol__text {
	font-weight: 350;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(13,13,13,.7);
	margin: 16px 0 14px;
	max-width: 28ch;
}
.footer-brandcol__email { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.footer-brandcol__email:hover,
.footer-brandcol__email:focus-visible { color: var(--ink); box-shadow: inset 0 -1px 0 0 var(--ink); }

/* The newsletter column: the mockup's signup on our light footer. GF markup
   (legacy theme), styled to the token system: 10px control radius, pill
   submit, ink on paper. */
.footer-col--news .footer-news__text {
	font-weight: 350;
	font-size: 14px;
	line-height: 1.55;
	color: rgba(13,13,13,.7);
	margin: 0 0 14px;
	max-width: 30ch;
}
.footer-news__form .gform_wrapper { margin: 0; }
.footer-news__form .gfield { margin: 0; }
/* GF puts hidden_label on the FIELD container; keep the label for screen
   readers, and validation marks required (no shouted "(Required)"). */
.footer-news__form .hidden_label > .gfield_label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.footer-news__form .gfield_required_text { display: none; }
/* Border at .45 ink blends to 3.1:1 on white — the 1.4.11 control-boundary
   floor the token ghost ring misses. */
.footer-news__form input[type="email"],
.footer-news__form input[type="text"] {
	width: 100%;
	max-width: 280px;
	background: var(--white);
	border: 1.5px solid rgba(13,13,13,.45);
	border-radius: 10px;
	color: var(--ink);
	font-family: var(--font);
	font-size: 14px;
	padding: 11px 14px;
}
.footer-news__form input[type="email"]:focus-visible,
.footer-news__form input[type="text"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.footer-news__form .gfield + .gfield { margin-top: 8px; }
.footer-news__form .gform_footer { margin: 0; padding: 0; }
.footer-news__form input[type="submit"] {
	appearance: none;
	/* Transparent border, not none: the inputs carry a 1.5px border, and
	   without matching it the button sits 3px shorter than the email field. */
	border: 1.5px solid transparent;
	cursor: pointer;
	background: var(--ink);
	color: var(--white);
	font-family: var(--font);
	font-weight: 600;
	font-size: 14px;
	padding: 11px 22px;
	border-radius: var(--radius-pill, 100px);
	transition: background-color var(--dur-move) var(--ease-state);
}
.footer-news__form input[type="submit"]:hover,
.footer-news__form input[type="submit"]:focus-visible { background: #2b2b2b; }
.footer-news__form .validation_message { font-size: 12.5px; color: var(--sw-4-mid, #B23A00); margin-top: 6px; }
.footer-news__form .gform_validation_errors { display: none; }
.footer-news__sent { font-weight: 600; font-size: 14px; color: var(--ink); }
.footer-news__form .pb-privacy-line { font-size: 12px; color: rgba(13,13,13,.55); margin-top: 10px; max-width: 30ch; }
.footer-col { min-width: 0; padding: 0; }
.footer-col + .footer-col { border-left: 0; padding-left: 0; }
.footer-col h4 {
	font-family: var(--font);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.012em;
	text-transform: none;
	color: var(--ink);
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 14px;
}
.footer-col ul { gap: 9px; }
.footer-col a,
.footer-col .plain {
	font-family: var(--font);
	font-size: 14.5px;
	font-weight: 350;
	color: rgba(13,13,13,.72);
	width: fit-content;
	transition: color var(--dur-tap) var(--ease-state), box-shadow var(--dur-tap) var(--ease-state);
}
.footer-col a:hover,
.footer-col a:focus-visible { color: var(--ink); transform: none; box-shadow: inset 0 -1px 0 0 var(--ink); }
/* Towns whose landers are not published yet render as plain text (ruling 89).
   Quieter than the links, but still body copy, so it holds 4.5:1 (5.08). */
.footer-col .plain { color: rgba(13,13,13,.6); }
/* The phone reads as a plain link like its neighbours (Usman's footer has
   no highlighted contact row; the flame underline was ours). */
.footer-col .contact {
	font-weight: 350;
	color: rgba(13,13,13,.72);
	box-shadow: none;
	margin-top: 0;
}
.footer-col .contact:hover { color: var(--ink); box-shadow: inset 0 -1px 0 0 var(--ink); }
.footer-based {
	font-family: var(--font);
	font-style: normal;
	font-weight: 350;
	font-size: 14px;
	line-height: 1.6;
	margin-top: var(--sp-close);
	color: rgba(13,13,13,.6);
	max-width: 26ch;
}

/* ---- Usman's geometry, exactly (Sean, 31 Jul: "this has no relation to
   the design he gave us... font size, alignment, nothing"). The drift was
   real: the footer rode the site's 1280px container and approximated
   sizes. This block pins HIS numbers so the columns land where his do:
   1240px container with 28px gutters, tracks 1.4fr + 4x1fr on a 32px
   gap, 45px logo, 13px/700 headings on 14px, 13.5px/400 links on a 9px
   rhythm, 13.5px brand text at 280px measure, input+Join one row, legal
   12.5px over a 40/24 break. Typeface stays Biennale (site law) and the
   control radius stays the 10px token — everything else is his. ---- */
.footer { padding: 64px 0 40px; }
.footer .container { max-width: 1240px; padding-left: 28px; padding-right: 28px; }
/* Tracks from HIS RENDER, not his stylesheet (Sean, 31 Jul: "match his
   column maths, not the container maths"): measured off his capture, the
   columns run 218/155/155/155/250 on 32px gaps — ratios 1.4:1:1:1:1.6.
   His newsletter column draws wider than its nominal 1fr because the
   input row forces it; we encode that honestly. */
.footer-cols { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.6fr; gap: 32px; }
/* The base .brand-logo rule pins a 56px flex box (nav sizing) and the
   chrome scope re-asserts it — the logo was floating in a taller
   invisible box, which is the "big and lost" Sean called out. Fully
   specified here so the footer logo box hugs its 36px svg. */
.footer .footer-brandcol__logo.brand-logo {
	display: block;
	height: auto;
	line-height: 0;
	width: fit-content;
	padding: 0;
}
.footer-brandcol .brand-logo__svg { width: auto; height: 36px; }
.footer-brandcol__text { font-size: 13.5px; line-height: 1.6; margin: 20px 0 14px; max-width: 280px; }
.footer-brandcol__email { font-size: 13.5px; }
.footer-col h4 { font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.footer-col ul { gap: 9px; }
.footer-col a,
.footer-col .plain { font-size: 13.5px; font-weight: 400; }
.footer-col--news .footer-news__text { font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; }
/* flex-end, not flex-start: two stacked fields since 4 Aug 2026, and the Join
   button belongs beside the LAST one (the email), not floating at the top. */
.footer-news__form form { display: flex; align-items: flex-end; gap: 8px; }
.footer-news__form .gform-body { flex: 1 1 auto; min-width: 0; }
.footer-news__form .gform_footer { margin: 0; flex: none; }
.footer-news__form input[type="email"] { max-width: none; font-size: 13.5px; padding: 11px 14px; }
.footer-news__form input[type="submit"] { font-size: 13.5px; font-weight: 700; padding: 11px 18px; }
.footer-legal { margin-top: 40px; padding-top: 24px; font-size: 12.5px; }

.footer-entity {
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: clamp(24px, 3vw, 48px);
	margin-top: clamp(48px, 5vw, 76px);
	padding-top: 0;
	border-top: 0;
	align-items: start;
}
.footer-brand .brand-logo__svg { width: clamp(180px, 20vw, 240px); height: auto; max-width: 100%; }
.footer-entity p {
	grid-column: span 2;
	font-family: var(--font);
	font-weight: 350;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(13,13,13,.72);
	max-width: none;
	text-wrap: pretty;
}

/* Areas line (31 Jul 2026): the 12 live town landers in one quiet row
   between the columns and the legal line. Same register as the legal row,
   one step up in size; the label sets ink so the row scans as a sentence. */
.footer-areas {
	display: flex;
	align-items: baseline;
	gap: 8px 14px;
	flex-wrap: wrap;
	margin-top: clamp(44px, 4.5vw, 64px);
	padding-top: 22px;
	border-top: 1px solid rgba(13, 13, 13, .1);
	font-family: var(--font);
	font-weight: 350;
	font-size: 13.5px;
	line-height: 1.8;
	color: rgba(13, 13, 13, .62);
}
.footer-areas__label { font-weight: 600; color: var(--ink); }
.footer-areas__towns { flex: 1 1 240px; min-width: 0; }
.footer-areas a { color: inherit; box-shadow: inset 0 -1px 0 0 rgba(13, 13, 13, .3); transition: color .15s, box-shadow .15s; }
.footer-areas a:hover { color: var(--ink); box-shadow: inset 0 -1px 0 0 var(--ink); }
.footer-areas .sep { color: rgba(13, 13, 13, .35); }
/* The legal row sits close under the areas line when it is present. */
.footer-areas + .footer-legal { margin-top: 18px; }

.footer-legal {
	margin-top: clamp(40px, 4vw, 60px);
	padding-top: 0;
	border-top: 0;
	font-family: var(--font);
	font-weight: 350;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(13,13,13,.62);
	gap: 14px 28px;
	align-items: baseline;
	justify-content: space-between;
}
.footer-legal a { color: inherit; box-shadow: inset 0 -1px 0 0 rgba(13,13,13,.3); }
.footer-legal a:hover { color: var(--ink); box-shadow: inset 0 -1px 0 0 var(--ink); }
.footer-legal .sep { color: rgba(13,13,13,.35); }
.footer-legal-right { gap: 10px; }

@media (max-width: 1000px) {
	/* Brand column runs full width, the four columns fold to two pairs:
	   Services|Insights, Company|Newsletter. */
	.footer-cols { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.footer-brandcol { grid-column: 1 / -1; }
}
/* Phones keep two columns (Sean, 30 Jul 2026 ruling, carried through the
   31 Jul restructure): Services beside Insights, Company beside the
   newsletter, brand column across the top. Amended 31 Jul evening: the
   newsletter drops to its own full-width row (Sean: "can't be squished"),
   so phones run Services|Insights, Company|-, newsletter across. */
@media (max-width: 640px) {
	.footer-cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px 20px; }
	.footer-col--news { grid-column: 1 / -1; }
}

/* Mobile nav: the logo's left inset matches the burger glyph's right inset.
   The 44px burger button centres a 22px icon, giving its glyph ~11px of
   air inside the container padding that the logo lacked (Sean, 30 Jul
   2026). */
@media (max-width: 980px) {
	.nav-logo { padding-left: 12px; }
}

/* ============================================================
   RESEARCH LAYER (29 Jul 2026)
   .res1 = the hub (R.01)          research/design_handoff_research_hub
   .res2 = the article (R.07)      research/design_handoff_research_article
   .res-cite / .res-cap = shared across both.

   Grammar, hub: hero paper · flagship INK+photo · what's-in-here mist
   (ink plate) · grid white · numbers paper · closing INK+photo · footer
   paper. Four grounds alternating, ink exactly twice, never adjacent.

   Grammar, article: header paper · body white · sources white · CTA INK ·
   footer paper.

   Values are from the two handoffs, which are final and measured. Where one
   looks arbitrary it is a token.
   ============================================================ */

.res1,
.res2 {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-weight: 400;
	line-height: 1.5;
}

/* theme.json declares h1/h3/h4 as Archivo 900 and h2 as Fraunces, and WP emits
   those as ELEMENT rules in global styles. A directly matched declaration beats
   an inherited one at any specificity, so every heading has to name the family
   itself: setting it on the wrapper does nothing. */
.res1 h1, .res1 h2, .res1 h3, .res1 h4,
.res2 h1, .res2 h2, .res2 h3, .res2 h4 { font-family: var(--font); }

.res1 p, .res2 p { text-wrap: pretty; }

/* Focus: outline, not box-shadow, so it follows border-radius and does not
   fight a field's inset ring. White on the ink bands. Never stripped. */
.res1 :focus-visible,
.res2 :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.res1-flag :focus-visible,
.res1-close :focus-visible,
.res1-plate :focus-visible,
.res2-cta :focus-visible { outline-color: var(--focus-w); }

.res1-in,
.res2-in {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--sp-band) var(--gutter);
}

/* Shared heading roles */
.res1-h2 {
	font-weight: 700;
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	max-width: 22ch;
	margin: 0;
}
.res1-h2--close {
	font-size: clamp(2.2rem, 4.4vw, 3.6rem);
	line-height: 1.04;
	letter-spacing: -.026em;
	margin: 0 auto;
}

/* ---- 01 Hero. Paper, no photograph. A designed mobile hero: there is
   nothing to collapse, so the H1 just takes the clamp floor. ---- */
.res1-hero { background: var(--paper); }
.res1-hero .res1-in { padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(64px, 8vw, 104px); }
.res1-h1 {
	font-weight: 700;
	font-size: clamp(2.5rem, 5.6vw, 4.9rem);
	line-height: 1.03;
	letter-spacing: -.028em;
	max-width: 17ch;
	margin: clamp(28px, 3.4vw, 44px) 0 0;
}
.res1-lede {
	font-weight: 350;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	max-width: 58ch;
	margin: 26px 0 0;
	color: rgba(13, 13, 13, .8);
}

/* ---- 02 Flagship. Ink over the photograph, capture on a bright plate. ---- */
.res1-flag,
.res1-close {
	position: relative;
	background: var(--ink);
	color: var(--white);
	overflow: hidden;
}
.res1-flag__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}
.res1-flag__scrim { position: absolute; inset: 0; background: var(--scrim-plate); }
/* MEASURED, and it changed the build (29 Jul 2026). The handoff gives the
   flagship band --scrim-plate alone and the closing band --scrim-plate plus the
   flat layer. But --scrim-plate floors at .3 at the TOP, and this frame is
   near-white in its top half, which is exactly where the band puts its 13px
   status line: measured 2.23:1, with the H2 at 2.88 and the body at 3.38. Both
   scrims tried alone fail (--scrim-hero's .4 floor gives 2.23 as well, because
   the source pixels are 255). So both photograph bands now carry the same pair,
   which is the treatment the closing band was already proving at 9 to 10:1.
   The design reference got away with one scrim because it was still using the
   wet-lab frame its own README then set aside. */
.res1-solid { position: absolute; inset: 0; background: var(--scrim-solid); }
.res1-flag__in,
.res1-close__in { position: relative; }
.res1-flag__in {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(32px, 6vw, 88px);
	align-items: start;
}
.res1-flag__copy { min-width: 0; }
.res1-flag__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 13px;
	margin: 0;
}
.res1-pill {
	display: inline-block;
	padding: 7px 14px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	background: var(--pill);
	color: var(--ink);
}
.res1-flag__status { font-weight: 350; color: rgba(255, 255, 255, .74); }
.res1-flag h2 { margin-top: 20px; }
.res1-flag__body {
	font-weight: 350;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	max-width: 60ch;
	margin: 24px 0 0;
	color: rgba(255, 255, 255, .86);
}

/* ---- 03 What's in here. Mist band, ink PLATE (a plate is not a band, so
   the page still only carries ink twice). ---- */
.res1-what { background: var(--mist); }
.res1-plate {
	background: var(--ink);
	color: var(--white);
	border-radius: var(--radius-card);
	padding: clamp(20px, 2.4vw, 28px);
	margin-top: clamp(40px, 5vw, 60px);
}
/* Explicit tracks for a known count. Four goes 4 → 2 → 1, never 3. */
.res1-tabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	align-items: stretch;
}
.res1-tab {
	min-width: 0;
	display: block;
	width: 100%;
	height: 100%;
	text-align: left;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	border-radius: var(--radius-card);
	padding: clamp(16px, 1.8vw, 22px);
	font-weight: 600;
	font-size: clamp(1rem, 1.15vw, 1.1rem);
	letter-spacing: -.01em;
	line-height: 1.3;
	background: transparent;
	color: var(--white);
	box-shadow: inset 0 0 0 1.5px var(--ring-w);
	/* No transition: a tab change is instant (handoff §6). The ring at .3 was
	   tried and measures 2.50 on ink, which fails; --ring-w is 6.17. */
}
.res1-tab[aria-selected="true"] {
	background: var(--stage);
	color: var(--ink);
	box-shadow: none;
}
.res1-panel {
	background: var(--stage);
	color: var(--ink);
	border-radius: var(--radius-card);
	padding: clamp(24px, 3vw, 40px);
	min-height: clamp(200px, 18vw, 240px);
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Any author `display` beats the UA sheet's [hidden] rule, so a flex panel has
   to restore it explicitly or all four paint at once. */
.res1-panel[hidden] { display: none; }
.res1-panel h3 {
	font-weight: 700;
	font-size: clamp(1.5rem, 2.6vw, 2.2rem);
	line-height: 1.1;
	letter-spacing: -.022em;
	margin: 0;
}
.res1-panel p {
	font-weight: 350;
	font-size: clamp(1.02rem, 1.3vw, 1.14rem);
	line-height: 1.7;
	max-width: 62ch;
	margin: 16px 0 0;
}
.res1-panel a {
	font-weight: 600;
	color: var(--ink);
	box-shadow: inset 0 -1px 0 0 var(--ink);
}

/* ---- 04 The asset grid. White. Chips, then the cards. ---- */
.res1-grid-band { background: var(--white); }
.res1-chips {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: clamp(32px, 4vw, 44px);
}
.res1-chip {
	/* flex:none and nowrap are required: without them the row shrinks a chip
	   below its label and the second line renders outside the pill. */
	flex: none;
	white-space: nowrap;
	min-height: 44px;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	color: var(--ink);
	background-color: transparent;
	box-shadow: inset 0 0 0 1.5px var(--ring-ink);
	background-image: linear-gradient(to right, var(--chip) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	/* no-repeat is load-bearing: at rest the 200% gradient parks one full width
	   left, and the default repeat butts the next tile's coloured half against
	   the right edge, where subpixel rounding paints a 1px line of the swatch. */
	background-repeat: no-repeat;
	transition: background-position var(--dur-move) var(--ease-reveal);
}
.res1-chip:hover,
.res1-chip:focus-visible { background-position: 0 0; }
.res1-chip.is-on {
	background-color: var(--chip);
	background-image: none;
	box-shadow: none;
}
/* Touch: the sweep is skipped rather than shown filled at rest. On a chip the
   fill IS the selected state, so filling every chip would say all five are on. */
@media (hover: none) {
	.res1-chip { background-image: none; }
}
.res1-empty {
	font-weight: 350;
	font-size: 1.02rem;
	line-height: 1.7;
	max-width: 70ch;
	margin: clamp(32px, 4vw, 44px) 0 0;
	color: rgba(13, 13, 13, .8);
}
.res1-empty a {
	font-weight: 600;
	color: var(--ink);
	box-shadow: inset 0 -1px 0 0 var(--sw-7);
}
.res1-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-item);
	margin-top: clamp(32px, 4vw, 44px);
	align-items: start;
}
.res1-card {
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: var(--radius-card);
	padding: clamp(24px, 2.6vw, 30px);
	/* Written here against this card's own tone, NOT via --shadow-card: those
	   resolve --card-tone on :root where it is unset, which had every card on
	   the site rendering the same flame shadow for a fortnight. */
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 22px 44px -16px color-mix(in srgb, var(--card-tone) 50%, transparent);
	transition: transform var(--dur-move) var(--ease-state),
	            box-shadow var(--dur-move) var(--ease-state);
}
.res1-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 28px 52px -14px color-mix(in srgb, var(--card-tone) 62%, transparent);
}
.res1-card__top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 13px;
	margin: 0;
}
.res1-card__type { font-weight: 600; color: var(--card-mid); }
.res1-card__date { font-weight: 350; color: rgba(13, 13, 13, .62); }
.res1-card__h3 {
	font-weight: 600;
	font-size: 18.5px;
	line-height: 1.3;
	letter-spacing: -.01em;
	min-height: 2.6em;
	margin: 16px 0 0;
}
/* The title is the only link. The card is deliberately NOT a whole-card link:
   it contains a button, and a button inside an anchor is invalid HTML. */
.res1-card__h3 a {
	color: var(--ink);
	box-shadow: inset 0 -1px 0 0 rgba(13, 13, 13, .25);
	transition: box-shadow var(--dur-move) var(--ease-state);
}
.res1-card__h3 a:hover,
.res1-card__h3 a:focus-visible { box-shadow: inset 0 -1px 0 0 var(--card-tone); }
.res1-card__find {
	font-weight: 350;
	font-size: 14.5px;
	line-height: 1.6;
	margin: 10px 0 0;
	color: rgba(13, 13, 13, .78);
}
/* The card foot is a link now, not the citation pill: the citation lives inside
   the article, where the thing being cited is. Same slot, same ghost pill, so
   the card's construction is unchanged. */
.res1-card__go { margin: auto 0 0; padding-top: var(--sp-item); }
.res1-card__go a {
	display: inline-block;
	min-height: 44px;
	padding: 12px 20px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 13px;
	color: var(--ink);
	box-shadow: inset 0 0 0 1.5px var(--ring-ink);
	background-image: linear-gradient(to right, var(--card-tone) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	transition: background-position var(--dur-move) var(--ease-reveal);
}
.res1-card__go a:hover,
.res1-card__go a:focus-visible { background-position: 0 0; }
.res1-card__note {
	font-weight: 350;
	font-size: 13px;
	line-height: 1.55;
	margin: 8px 0 0;
	color: rgba(13, 13, 13, .62);
}

/* ---- 05 Where the numbers come from. Paper, 8/4. ---- */
.res1-nums { background: var(--paper); }
.res1-nums__grid {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}
.res1-nums__copy { min-width: 0; }
.res1-nums__body {
	font-weight: 350;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.72;
	max-width: 70ch;
	margin: clamp(24px, 2.6vw, 34px) 0 0;
	color: rgba(13, 13, 13, .84);
}
.res1-nums__body a {
	font-weight: 600;
	color: var(--ink);
	box-shadow: inset 0 -1px 0 0 var(--sw-5);
}
/* Stone, not mist: the band is paper, and a field has to differ from its
   ground by two steps or it reads as a printing error. No shadow, because the
   card already carries a fill and a tone shadow wants white or paper beneath. */
.res1-stone {
	min-width: 0;
	background: var(--stone);
	border-radius: var(--radius-card);
	padding: clamp(26px, 3vw, 36px);
}
.res1-stone h3 {
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.2;
	letter-spacing: -.018em;
	margin: 0;
}
.res1-stone p {
	font-weight: 350;
	font-size: 1.02rem;
	line-height: 1.7;
	margin: 16px 0 0;
	color: rgba(13, 13, 13, .82);
}

/* ---- 06 Closing capture. Ink, photograph, centred. ---- */
/* .res1-close__solid retired 29 Jul 2026: both photograph bands take .res1-solid. */
.res1-close__in {
	max-width: calc(74ch + var(--gutter) * 2);
	text-align: center;
	padding: var(--section-y-loud) var(--gutter);
}
.res1-close__body {
	font-weight: 350;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	max-width: 66ch;
	margin: 24px auto 0;
	color: rgba(255, 255, 255, .86);
}

@media (max-width: 1000px) {
	.res1-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.res1-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.res1-flag__in,
	.res1-nums__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.res1-tabs { grid-template-columns: minmax(0, 1fr); }
	.res1-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   COPY THE CITATION · shared by the hub card and the article header
   The mechanism by which this layer earns links, so it belongs on the card
   as well as the page: an asset is quotable without opening it.
   ============================================================ */
.res-cite {
	margin-top: auto;
	padding-top: var(--sp-item);
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.res-cite--page { margin-top: clamp(24px, 2.6vw, 32px); padding-top: 0; }
.res-cite__btn {
	flex: none;
	white-space: nowrap;
	min-height: 44px;
	padding: 11px 18px;
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	font-family: inherit;
	font-weight: 600;
	font-size: 13px; /* the floor. Nothing on this page goes below it. */
	color: var(--ink);
	background-color: transparent;
	box-shadow: inset 0 0 0 1.5px var(--ring-ink);
	background-image: linear-gradient(to right, var(--card-tone, var(--sw-5)) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	transition: background-position var(--dur-move) var(--ease-reveal);
}
.res-cite--page .res-cite__btn { padding: 12px 20px; font-size: 14px; }
.res-cite__btn:hover,
.res-cite__btn:focus-visible { background-position: 0 0; }
.res-cite__status {
	font-weight: 600;
	font-size: 13px;
	color: var(--sw-1-mid);
}
.res-cite__status:empty { display: none; }

/* ============================================================
   THE TWO EMAIL CAPTURES · Gravity Forms, restyled
   Different jobs, so they do not look the same. Both are real captures
   rather than the pill pair the service and sector pages ship, and that
   split is scoped to the research layer and Contact.
   ============================================================ */
.res-cap--plate {
	min-width: 0;
	background: var(--sw-5);
	color: var(--ink);
	border-radius: var(--radius-card);
	padding: clamp(26px, 3vw, 34px);
	/* No shadow: on a colour field the field is the elevation. A capture plate
	   on a bright is permitted because its largest string is the 1.35rem
	   subhead: allowed on cyan at 9.79 and yellow at 16.51, never flame at 6.13. */
}
.res-cap__h3 {
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.2;
	letter-spacing: -.018em;
	margin: 0;
}
.res-cap__body {
	font-weight: 350;
	font-size: .97rem;
	line-height: 1.65;
	margin: 12px 0 0;
	color: rgba(13, 13, 13, .82);
}
.res-cap__ask { margin-top: 20px; }
.res-cap__help {
	font-weight: 350;
	font-size: 13.5px;
	line-height: 1.55;
	margin: 8px 0 0;
}
/* A placeholder is not a label, so the label is always drawn above the field. */
.res-cap__label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	margin: 0 0 8px;
}
.res-cap__row { display: grid; gap: 12px; }
/* Both controls take the SAME explicit height rather than min-height, so the
   row is aligned exactly and not to within a line-height rounding of itself. */
.res-cap__field,
.res-cap__submit {
	box-sizing: border-box;
	height: 52px;
	border: 0;
	border-radius: var(--radius-pill);
	font-family: inherit;
	font-size: 16px; /* never 14: iOS zooms the viewport */
	line-height: 1.4;
}
.res-cap__field {
	width: 100%;
	padding: 15px 24px;
	font-weight: 350;
}
.res-cap__submit {
	flex: none;
	white-space: nowrap;
	padding: 15px 28px;
	cursor: pointer;
	font-weight: 600;
	background-size: 100% 200%;
	/* Same direction and the same two positions as .btn3--open: rest at 0 0 so
	   the transparent half shows, hover at 0 100% so the fill rises. Reversing
	   these paints the whole button at rest, which on the plate meant white text
	   on a white pill. */
	background-position: 0 0;
	background-repeat: no-repeat;
	transition: background-position var(--dur-move) var(--ease-reveal), color var(--dur-move);
}
/* Fills from BELOW, which is what tokens v3 reserves for a control that opens
   something rather than navigating. */
.res-cap__submit:hover,
.res-cap__submit:focus-visible { background-position: 0 100%; }

.res-cap__err {
	font-weight: 350;
	font-size: 13.5px;
	line-height: 1.55;
	margin: 8px 0 0;
}
.res-cap__err b { font-weight: 600; }
/* Error is never colour alone: the ring thickens 1.5 to 2.5 and the fault is
   named in 600, with aria-invalid and aria-describedby on the field. */
.res-cap__ask.has-error .res-cap__field { box-shadow: inset 0 0 0 2.5px var(--error); }
.res-cap--plate .res-cap__help { color: rgba(13, 13, 13, .78); }
.res-cap--inline {
	margin: clamp(32px, 3.6vw, 44px) auto 0;
	max-width: 56ch;
	/* left inside the centred column: centred labels above a field are hard to
	   scan and the helper breaks badly at two lines. */
	text-align: left;
}
.res-cap--inline .res-cap__help { color: rgba(255, 255, 255, .76); }

/* The plate's ask: field full width above the submit. */
.res-cap--plate .res-cap__field {
	background: var(--white);
	color: var(--ink);
	box-shadow: inset 0 0 0 1.5px var(--ring-ink);
}
.res-cap--plate .res-cap__field::placeholder { color: rgba(13, 13, 13, .58); opacity: 1; }
.res-cap--plate .res-cap__submit {
	width: 100%;
	color: var(--white);
	background-color: var(--ink);
	background-image: linear-gradient(to top, var(--white) 50%, transparent 50%);
}
.res-cap--plate .res-cap__submit:hover,
.res-cap--plate .res-cap__submit:focus-visible { color: var(--ink); }
/* Error text is ink, not --error: #B3261E on cyan measures 3.5 and fails. The
   bold prefix and the thickened ring carry the state. */
.res-cap--plate .res-cap__err { color: var(--ink); }

/* The closing band's ask: field and submit side by side. */
.res-cap--inline .res-cap__row { grid-template-columns: minmax(0, 1fr) auto; }
.res-cap--inline .res-cap__label { color: var(--white); }
/* Opaque lighter ink, never a translucent white. */
.res-cap--inline .res-cap__field {
	background: var(--ink-2);
	color: var(--white);
	box-shadow: inset 0 0 0 1.5px var(--ring-w);
}
.res-cap--inline .res-cap__field::placeholder { color: rgba(255, 255, 255, .62); opacity: 1; }
.res-cap--inline .res-cap__submit {
	color: var(--ink);
	background-color: var(--white);
	background-image: linear-gradient(to top, var(--sw-1) 50%, transparent 50%);
}
.res-cap--inline .res-cap__err { color: var(--sw-7); }

@media (max-width: 640px) {
	.res-cap--inline .res-cap__row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- The drawer the ask opens. Multi-field, so 10px controls per the tokens
   rule, not the pill radius the single-field band row takes. ---- */
.res-drawer__form .gform_wrapper { margin: 0; }
.res-drawer__form .gform_heading { display: none; }
.res-drawer__form .gform-body { margin: 0; padding: 0; }
/* Legacy markup renders the field list as a <ul>, so the list furniture goes. */
.res-drawer__form .gform_fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-close);
	list-style: none;
	margin: 0;
	padding: 0;
}
.res-drawer__form .gfield { margin: 0; padding: 0; }
/* A placeholder is not a label, so the label is always drawn above the field.
   Sentence case, Biennale, 14px: never the mono-uppercase micro-label. */
.res-drawer__form .gfield_label,
.res-drawer__form .gform-field-label {
	display: block;
	font-family: var(--font);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	margin: 0 0 8px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink);
}
.res-drawer__form .gfield_required { display: none; }
.res-drawer__form .ginput_container { margin: 0; }
.res-drawer__form input[type="email"],
.res-drawer__form input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	padding: 14px 18px;
	border: 0;
	/* 10px, not the pill: pill radius belongs to a single field beside a pill
	   submit, and this is a multi-field form (tokens v3.2, §4). */
	border-radius: var(--radius-control);
	font-family: inherit;
	font-weight: 350;
	font-size: 16px; /* never 14: iOS zooms the viewport */
	line-height: 1.4;
	/* The panel is paper now (drawers went light, 30 Jul 2026), so the
	   field register is the page's own: white with the ink ring. */
	background: var(--white);
	color: var(--ink);
	box-shadow: inset 0 0 0 1.5px var(--ring-ink);
}
.res-drawer__form input::placeholder { color: rgba(13, 13, 13, .55); opacity: 1; }

/* Consent. The tick is a real control at 44px of target, the wording sits
   beside it, and the purpose line sits under both. */
.res-drawer__form .gfield--type-consent .gfield_label { display: none; }
/* Gravity Forms draws a 2px box around a consent field. Ruled boxes are a
   banned tell, and the tick plus its wording need no frame to be read as one
   thing: spacing does that. */
.res-drawer__form .gfield--type-consent { border: 0; padding: 0; }
.res-drawer__form .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 44px;
}
.res-drawer__form input[type="checkbox"] {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: var(--ink);
}
.res-drawer__form .ginput_container_consent label {
	font-family: var(--font);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink);
}
.res-drawer__form .gfield_consent_description {
	font-weight: 350;
	font-size: 13.5px;
	line-height: 1.55;
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	max-height: none;
	overflow: visible;
	color: rgba(13, 13, 13, .66);
}

.res-drawer__form .gform_footer { margin: var(--sp-close) 0 0; padding: 0; }
.res-drawer__form .gform_wrapper .gform_footer input[type="submit"],
.res-drawer__form .gform_wrapper input[type="submit"].gform_button {
	display: inline-block;
	width: 100%;
	height: 52px;
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	font-family: inherit;
	font-weight: 600;
	font-size: 16px;
	/* Ink fill on the paper panel, sweeping to the same green the band's
	   submit uses. Never the retired --accent. */
	color: var(--white);
	background-color: var(--ink);
	background-image: linear-gradient(to right, var(--sw-1) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	transition: background-position var(--dur-move) var(--ease-reveal), color var(--dur-move);
}
.res-drawer__form .gform_wrapper .gform_footer input[type="submit"]:hover,
.res-drawer__form .gform_wrapper input[type="submit"].gform_button:hover { background-position: 0 0; color: var(--ink); }

/* Error is never colour alone: the ring thickens 1.5 to 2.5, the message names
   the fault in 600, and GF carries aria-invalid + aria-describedby. */
.res-drawer__form .gfield_error input[type="email"],
.res-drawer__form .gfield_error input[type="text"] { box-shadow: inset 0 0 0 2.5px var(--error); }
.res-drawer__form .gfield_validation_message,
.res-drawer__form .validation_message,
.res-drawer__form .gform_validation_errors > h2 {
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.55;
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
	/* On the paper panel --error passes; the thickened ring carries the
	   state alongside it. (The old ink panel needed yellow here.) */
	color: var(--error);
}
.res-drawer__form .gform_validation_errors { margin: 0 0 var(--sp-close); padding: 0; border: 0; background: none; box-shadow: none; }
.res-drawer__form .gfield--type-honeypot,
.res-drawer__form .gform_validation_container { display: none !important; }

/* The sent state replaces the form, and it is GF's own confirmation. */
.res-cap__sent { font-weight: 600; font-size: 1.05rem; line-height: 1.6; margin: 0; }
.res-drawer__fallback a { font-weight: 600; color: var(--ink); box-shadow: inset 0 -1px 0 0 var(--sw-5); }

/* ============================================================
   RESEARCH ARTICLE · .res2 (R.07)
   ============================================================ */
.res2-head { background: var(--paper); }
.res2-head .res2-in { padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(40px, 5vw, 56px); }
.res2-h1 {
	font-weight: 700;
	font-size: clamp(2.3rem, 4.8vw, 3.9rem);
	line-height: 1.04;
	letter-spacing: -.026em;
	max-width: 20ch;
	margin: clamp(26px, 3vw, 40px) 0 0;
}
.res2-byline {
	display: flex;
	align-items: center;
	gap: 10px 20px;
	flex-wrap: wrap;
	margin: clamp(20px, 2.4vw, 28px) 0 0;
	font-weight: 350;
	font-size: 15px;
	color: rgba(13, 13, 13, .7);
}
.res2-byline__by { font-weight: 600; color: var(--ink); }

/* Renders only when a correction exists. */
.res2-corr {
	background: var(--mist);
	border-radius: var(--radius-card);
	padding: clamp(22px, 2.6vw, 30px);
	margin-top: clamp(28px, 3vw, 36px);
	max-width: 80ch;
}
.res2-corr__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
}
.res2-corr__title { font-weight: 700; font-size: 1.08rem; letter-spacing: -.014em; }
.res2-corr__date { font-weight: 350; font-size: 13.5px; color: rgba(13, 13, 13, .66); }
.res2-corr__body {
	font-weight: 350;
	font-size: 1rem;
	line-height: 1.7;
	max-width: 70ch;
	margin: 12px 0 0;
	color: rgba(13, 13, 13, .84);
}

/* The dates are the point of the page, so they sit above the fold and never
   render as secondary metadata. R.08 takes a third plate. */
.res2-dates {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: clamp(28px, 3.2vw, 40px);
	max-width: 80ch;
}
.res2-date { border-radius: var(--radius-card); padding: clamp(20px, 2.2vw, 26px); }
.res2-date--fill { background: var(--stone); }
.res2-date--ring { box-shadow: inset 0 0 0 1.5px var(--ring-ink); }
.res2-date__label { font-weight: 600; font-size: 13px; margin: 0; }
.res2-date--fill .res2-date__label { color: rgba(13, 13, 13, .7); }
.res2-date--ring .res2-date__label { color: rgba(13, 13, 13, .62); }
.res2-date__value {
	font-weight: 700;
	font-size: clamp(1.3rem, 1.9vw, 1.6rem);
	letter-spacing: -.018em;
	line-height: 1.15;
	margin: 8px 0 0;
}
.res2-date__note { font-weight: 350; font-size: 13.5px; line-height: 1.55; margin: 10px 0 0; }
.res2-date--fill .res2-date__note { color: rgba(13, 13, 13, .72); }
.res2-date--ring .res2-date__note { color: rgba(13, 13, 13, .66); }

/* ---- Body. Rail beside the prose. ---- */
.res2-body { background: var(--white); }
.res2-body .res2-in { padding: clamp(64px, 8vw, 104px) var(--gutter); }
.res2-body__grid {
	display: grid;
	grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
}
.res2-toc {
	position: sticky;
	top: 92px;
	border-top: 1.5px solid rgba(13, 13, 13, .2);
	padding-top: 16px;
}
.res2-toc__h {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .01em;
	color: rgba(13, 13, 13, .7);
	margin: 0;
}
.res2-toc__list {
	list-style: none;
	display: grid;
	gap: 2px;
	margin: 14px 0 0;
	padding: 0;
}
.res2-toc__list a {
	display: block;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.45;
	color: rgba(13, 13, 13, .82);
	padding: 2px 0;
}
.res2-toc__list a:hover,
.res2-toc__list a:focus-visible { color: var(--ink); box-shadow: inset 0 -1px 0 0 var(--sw-5); }

.res2-prose { min-width: 0; max-width: 70ch; }
.res2-prose p {
	font-weight: 350;
	font-size: 1.08rem;
	line-height: 1.75;
	margin: 18px 0 0;
	color: rgba(13, 13, 13, .84);
}
.res2-prose .res2-lede {
	font-size: clamp(1.08rem, 1.4vw, 1.2rem);
	line-height: 1.72;
	margin: 0;
}
.res2-prose h2 {
	font-weight: 700;
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	line-height: 1.12;
	letter-spacing: -.02em;
	max-width: 24ch;
	margin: clamp(44px, 5vw, 64px) 0 0;
	scroll-margin-top: 96px;
}
.res2-prose h3 {
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.25;
	letter-spacing: -.016em;
	margin: clamp(28px, 3vw, 36px) 0 0;
	scroll-margin-top: 96px;
}
.res2-prose a {
	font-weight: 600;
	color: var(--ink);
	box-shadow: inset 0 -1px 0 0 var(--sw-5);
}
.res2-list { margin: 18px 0 0; padding-left: 1.15em; }
.res2-list li {
	font-weight: 350;
	font-size: 1.08rem;
	line-height: 1.75;
	margin-top: 8px;
	color: rgba(13, 13, 13, .84);
}
.res2-note { font-weight: 350; font-size: 13.5px; line-height: 1.6; color: rgba(13, 13, 13, .66); }

/* ---- Data table. Ported from research/charts-and-table.html. ---- */
.res2-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--sp-item);
	font-size: 1rem;
}
.res2-table th {
	text-align: left;
	padding: 10px 12px 10px 0;
	border-bottom: 1.5px solid rgba(13, 13, 13, .28);
	font-weight: 700;
	font-size: 14px;
}
.res2-table th.num,
.res2-table td.num { text-align: right; padding-left: 12px; padding-right: 12px; }
.res2-table th:last-child,
.res2-table td:last-child { padding-right: 0; }
.res2-table td {
	padding: 13px 12px 13px 0;
	border-bottom: 1px solid rgba(13, 13, 13, .14);
	font-weight: 350;
	color: rgba(13, 13, 13, .84);
	font-variant-numeric: tabular-nums;
}
.res2-table td:first-child { font-weight: 600; color: var(--ink); }

/* Below 640px it stacks one record per block rather than scrolling sideways.
   The header is kept for screen readers but taken out of sight, the query
   becomes the row title, and each figure carries its own label. */
@media (max-width: 640px) {
	.res2-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
	.res2-table tr { display: block; padding: 16px 0; border-top: 1px solid rgba(13, 13, 13, .18); }
	.res2-table td {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: var(--sp-close);
		padding: 3px 0;
		border: 0;
		text-align: left;
	}
	.res2-table td::before { content: attr(data-label); font-weight: 350; color: rgba(13, 13, 13, .66); }
	.res2-table td:first-child { display: block; padding-bottom: 8px; }
	.res2-table td:first-child::before { content: none; }
}

/* ---- Chart figure. Bars, a line, or both, plotted from the series. ---- */
.res2-figure {
	margin: var(--sp-item) 0 0;
	min-width: 0;
	background: var(--paper);
	border-radius: var(--radius-card);
	padding: clamp(20px, 2.4vw, 28px);
}
.res2-figure + .res2-figure { margin-top: 20px; }
.res2-figure__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.res2-figure__head figcaption { font-weight: 600; font-size: 1.06rem; letter-spacing: -.012em; }
/* A figure running on stand-in numbers says so, in the mid register. */
.res2-figure__flag { flex: none; font-weight: 600; font-size: 13px; color: var(--sw-4-mid); }
.res2-figure__legend {
	display: flex;
	gap: var(--sp-close);
	flex-wrap: wrap;
	margin: 12px 0 0;
	font-weight: 350;
	font-size: 13px;
	color: rgba(13, 13, 13, .72);
}
.res2-figure__legend > span { display: flex; align-items: center; gap: 8px; }
.res2-key { flex: none; background: var(--key); }
.res2-key--bar { width: 14px; height: 14px; border-radius: 3px; }
.res2-key--line { width: 16px; height: 3px; border-radius: 2px; }
.res2-figure__plot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.res2-figure__y {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 240px;
	text-align: right;
	font-weight: 350;
	font-size: 13px;
	line-height: 1.2;
	color: rgba(13, 13, 13, .66);
}
.res2-figure__area { min-width: 0; }
.res2-figure__area svg { display: block; width: 100%; height: 240px; }
.res2-figure__grid { stroke: rgba(13, 13, 13, .12); stroke-width: 1; }
.res2-figure__x {
	display: flex;
	justify-content: space-between;
	margin: 10px 0 0;
	font-weight: 350;
	font-size: 13px;
	line-height: 1.2;
	color: rgba(13, 13, 13, .66);
}
.res2-figure__note {
	font-weight: 350;
	font-size: 13px;
	line-height: 1.55;
	margin: 14px 0 0;
	color: rgba(13, 13, 13, .66);
}

/* Reader checklist. FLAG: the exemplar page has none, so the design reference
   never draws one. This is the Straight answers surface reused rather than a
   treatment invented. Needs Sean's eye before R.02 to R.06 move over. */
.res2-check {
	background: var(--mist);
	border-radius: var(--radius-card);
	padding: clamp(26px, 3.2vw, 40px);
	margin-top: clamp(44px, 5vw, 64px);
}
.res2-check h3 { margin: 0; }
.res2-check ul { list-style: none; margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 0; }
.res2-check li {
	position: relative;
	font-weight: 350;
	font-size: 1.02rem;
	line-height: 1.7;
	padding-left: 26px;
	margin-top: 14px;
	color: rgba(13, 13, 13, .84);
}
.res2-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 9px;
	height: 9px;
	border-radius: 100px;
	background: var(--ink);
}

/* Author block. Plain text, no link: author pages do not exist. */
.res2-author {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px 20px;
	align-items: center;
	margin-top: clamp(44px, 5vw, 64px);
	padding-top: clamp(24px, 2.6vw, 30px);
	border-top: 1.5px solid rgba(13, 13, 13, .2);
}
.res2-author__mark {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-pill);
	background: var(--stone);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: -.02em;
}
img.res2-author__mark { object-fit: cover; display: block; }
/* Scoped under .res2-author on purpose: the block sits inside .res2-prose,
   whose `p` rule (weight 350, 18px top margin) outguns a bare class. That
   rule is what kept the name light and the gap wide however these were set. */
.res2-author .res2-author__name { font-weight: 800; font-size: 1.08rem; letter-spacing: -.014em; line-height: 1.2; margin: 0; color: var(--ink); }
.res2-author .res2-author__line { font-weight: 350; font-size: 14px; line-height: 1.6; margin: 2px 0 0; color: rgba(13, 13, 13, .7); }

/* Straight answers: the LOCKED FAQ system (24 Jul 2026). This adds a scope, it
   does not restyle the accordion. The mist block and the measure are the only
   differences; rows, weights and the plus glyph come from the base rules. */
.res2-answers { margin-top: clamp(48px, 5.5vw, 72px); }
.res2-answers .svp__faq {
	background: var(--mist);
	border-radius: var(--radius-card);
	padding: clamp(26px, 3.2vw, 40px);
}
.res2-answers .svp__faq .container { max-width: none; width: auto; padding: 0; }
.res2-answers .svp__faq h2 {
	font-weight: 700;
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: 0;
	scroll-margin-top: 96px;
}
.res2-answers .svp__faq-list { margin-top: clamp(28px, 3.4vw, 40px); }

/* ---- Sources. White, indented to the prose column. Three states. ---- */
.res2-src-band { background: var(--white); }
.res2-src-band .res2-in { padding: 0 var(--gutter) clamp(64px, 8vw, 104px); }
/* The empty first column keeps Sources aligned to the prose measure. It borrows
   the rail's width and nothing else: no rule, no padding, nothing to paint. */
.res2-src-band .res2-toc { position: static; border: 0; padding: 0; }
.res2-src { min-width: 0; }
.res2-src h2 {
	font-weight: 700;
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: 0;
	scroll-margin-top: 96px;
}
.res2-src__rows { display: flex; flex-direction: column; margin-top: clamp(28px, 3.4vw, 40px); max-width: 92ch; }
.res2-src__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 8px 32px;
	align-items: baseline;
	padding: clamp(18px, 2vw, 22px) 0;
	border-top: 1px solid rgba(13, 13, 13, .18);
}
.res2-src__row:last-child { border-bottom: 1px solid rgba(13, 13, 13, .18); }
.res2-src__name { min-width: 0; font-weight: 600; font-size: 1.04rem; line-height: 1.5; color: var(--ink); }
/* fit-content or the underline paints the whole grid cell. */
.res2-src__name a {
	display: inline-block;
	width: fit-content;
	color: var(--ink);
	box-shadow: inset 0 -1px 0 0 rgba(13, 13, 13, .3);
}
.res2-src__name a:hover,
.res2-src__name a:focus-visible { box-shadow: inset 0 -1px 0 0 var(--sw-5); }
/* Says why it is not a link, so it never reads as broken or as an omission. */
.res2-src__why {
	display: block;
	font-weight: 350;
	font-size: 13.5px;
	line-height: 1.55;
	margin-top: 6px;
	color: rgba(13, 13, 13, .66);
}
.res2-src__state { font-weight: 350; font-size: 13.5px; line-height: 1.5; margin: 0; color: rgba(13, 13, 13, .66); }
.res2-src__state span { font-weight: 600; color: var(--ink); }
.res2-src__note {
	font-weight: 350;
	font-size: 1rem;
	line-height: 1.7;
	max-width: 78ch;
	margin: clamp(24px, 2.6vw, 30px) 0 0;
	color: rgba(13, 13, 13, .74);
}

/* ---- CTA. Ink, centred, two tiers. The free takeaway is the heavier pill
   because the article has no call to book. ---- */
.res2-cta { position: relative; background: var(--ink); color: var(--white); overflow: hidden; }
.res2-cta__ht {
	position: absolute;
	bottom: -80px;
	left: -80px;
	width: 320px;
	height: 320px;
	pointer-events: none;
}
.res2-cta__in {
	position: relative;
	max-width: calc(74ch + var(--gutter) * 2);
	text-align: center;
	padding: var(--section-y-loud) var(--gutter);
}
.res2-cta h2 {
	font-weight: 700;
	font-size: clamp(2.2rem, 4.4vw, 3.6rem);
	line-height: 1.04;
	letter-spacing: -.026em;
	max-width: 22ch;
	margin: 0 auto;
}
.res2-cta__body {
	font-weight: 350;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	max-width: 66ch;
	margin: 24px auto 0;
	color: rgba(255, 255, 255, .86);
}
.res2-cta__row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: clamp(32px, 3.6vw, 48px) 0 0;
}
.res2-cta .btn3--big { padding: 19px 32px; }

@media (max-width: 900px) {
	.res2-body__grid { grid-template-columns: minmax(0, 1fr); }
	.res2-toc { position: static; }
	/* The sources indent resets to the gutter once the rail stops being a column. */
	.res2-src-band .res2-toc { display: none; }
}
@media (max-width: 860px) {
	.res2-src__row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.res2-dates { grid-template-columns: minmax(0, 1fr); }
}

/* Reduced motion: slow what moves, never stop it, and never blanket the
   stylesheet. `* { transition-duration }` does not touch animation and makes
   every hover and tab take a full second. */
@media (prefers-reduced-motion: reduce) {
	.res1-card,
	.res1-chip,
	.res1-card__h3 a,
	.res-cite__btn,
	.res-cap input[type="email"],
	.res-cap .gform_wrapper input[type="submit"],
	.res-cap__mailto,
	.res2-cta .btn3 { transition-duration: 600ms; }
}

/* ============================================================
   ABOUT · CONTACT · OSOF V3 (30 Jul 2026) · scoped .pg3
   Built from rarar/{about-us,contact,osof}.html against tokens
   v3.1 + forms v3.2. The three pages are one family: they share
   the masthead, the editorial split, the ink split band, the
   figures row and the closing CTA, so they share one scope and
   differ by band, not by stylesheet.

   SUPERSEDES the .pv1/.abt__/.osp__/.cn__ rules for these three
   templates. Those rules stay in place for anything still on the
   pv1 chrome; nothing on about, contact or OSOF matches them now.

   Bands, in order:
     ABOUT    01 masthead ink+photo · 02 story mist · 03 what we do
              white · 04 how we work ink split · 05 numbers yellow ·
              06 where and who mist · 07 mission white · 08 quotes
              paper · 09 CTA ink
     CONTACT  01 masthead paper+photo · 02 two routes white ·
              03 lighter step mist (photo plate) · 04 details ink split
     OSOF     01 masthead ink+photo · 02 the idea ink split ·
              03 pillars white · 04 conversion ink · 05 disciplines
              mist · 06 the loop ink (stage tabs) · 07 difference
              paper · 08 receipts stone · 09 CTA ink + capture

   Corrections to the drawn design, all token-driven:
   - stage tabs and their panel: radius 12px → 14px. 12 is retired.
   - the loop reuses the service stage-tab component (v3.1 no. 10)
     rather than redrawing it: same classes, same [data-svc-tabs]
     JS, real roles and roving tabindex. The drawn version had no
     roles at all and mounted panels through a template condition.
   - explicit collapses for every known count (rule 01): 8 tiles
     4→2→1, 5 receipts 5→2 with the fifth spanning→1, 4 tabs
     4→2→1, 4 quotes 2→1. Never 3.
   - the pillar-card shadow is written in the rule against its own
     --card-tone, not read from --shadow-card (rule 13).
   - every control boundary reads --ring-ink / --ring-w. The drawn
     ghost pill on the contact masthead was already correct at .45;
     the booking-slot ring was not, and now is.
   - form controls take the v3.2 field register: 52px, 10px radius,
     16px text, label always drawn.
   - reduced motion slows the stripe, the veil and the panel. It
     does not touch hover or tab state (rule 17).
   ============================================================ */

.pg3 {
	font-family: var(--font);
	font-weight: 350;
	color: var(--ink);
	background: var(--paper);
}
.pg3 h1, .pg3 h2, .pg3 h3, .pg3 h4 { font-family: var(--font); }
.pg3 p { text-wrap: pretty; }
.pg3 strong { font-weight: 600; color: var(--ink); }

.pg3-in {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--sp-band) var(--gutter);
}

/* ---- Shared type. Roles and values straight from the token table ---- */
.pg3 h2 {
	margin: 0;
	font-weight: 700;
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	max-width: 22ch;
}
.pg3-h1 {
	margin: clamp(22px, 2.6vw, 32px) 0 0;
	font-weight: 700;
	font-size: clamp(2.4rem, 5.6vw, 4.9rem);
	line-height: 1.03;
	letter-spacing: -.028em;
	max-width: 15ch;
	text-wrap: pretty;
}
.pg3-deck {
	margin: clamp(20px, 2.2vw, 28px) 0 0;
	font-weight: 350;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	max-width: 54ch;
}
.pg3-lede {
	margin: clamp(20px, 2.2vw, 28px) 0 0;
	font-weight: 350;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	max-width: 66ch;
	color: rgba(13, 13, 13, .82);
}
.pg3-body {
	margin: 18px 0 0;
	font-weight: 350;
	font-size: 1.02rem;
	line-height: 1.7;
	max-width: 66ch;
	color: rgba(13, 13, 13, .8);
}
.pg3-sub {
	margin: 0;
	font-weight: 700;
	font-size: clamp(1.5rem, 2.4vw, 2.05rem);
	line-height: 1.14;
	letter-spacing: -.022em;
}

/* Focus. The ink ring is invisible on the ink band, so anything on a
   dark surface takes the white one. Never removed, never gated. */
.pg3 a:focus-visible,
.pg3 button:focus-visible,
.pg3 input:focus-visible,
.pg3 textarea:focus-visible,
.pg3 [tabindex]:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 4px;
}
.pg3-mast--ink a:focus-visible,
.pg3-split--ink a:focus-visible,
.pg3-split--ink button:focus-visible,
.pg3-ink a:focus-visible,
.pg3-ink button:focus-visible,
.pg3-ink input:focus-visible,
.pg3-cta a:focus-visible,
.pg3-cta button:focus-visible,
.pg3-cta input:focus-visible,
.pg3-photo__body a:focus-visible { outline-color: var(--focus-w); }

/* ---- The CTA pair. Two buttons, wrapping, under the deck ---- */
.pg3-ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: clamp(30px, 3.4vw, 42px);
}

/* ---- 8-swatch closing strip. Component 5, at 4px ---- */
.pg3-strip {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	height: 4px;
}

/* ---- Masthead. Full-bleed photograph on ink, copy at mid-height,
        so the floor runs the whole frame: --scrim-hero. ---- */
.pg3-mast--ink {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: min(78vh, 660px);
	background: var(--ink);
	color: var(--white);
}
.pg3-mast--ink.pg3-mast--tall { min-height: min(82vh, 700px); }
.pg3-mast__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pg3-mast__scrim {
	position: absolute;
	inset: 0;
	background: var(--scrim-hero);
}
.pg3-mast__inner {
	position: relative;
	isolation: isolate;
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(56px, 8vw, 104px) var(--gutter);
}
.pg3-mast--ink .pg3-deck { color: rgba(255, 255, 255, .9); }
.pg3-mast__claim {
	margin: clamp(18px, 2vw, 24px) 0 0;
	max-width: 24ch;
	font-weight: 700;
	font-size: clamp(1.3rem, 2.2vw, 1.9rem);
	line-height: 1.2;
	letter-spacing: -.018em;
	color: var(--sw-7);
}
.pg3-mast--ink .pg3-mast__claim + .pg3-deck { color: rgba(255, 255, 255, .88); max-width: 56ch; }

/* Masthead, paper variant: no photo behind the words, one beside them.
   Contact opens on the words and the room, not on a scrim. */
.pg3-mast--paper { background: var(--paper); }
.pg3-mast--paper .pg3-mast__grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(32px, 6vw, 88px);
	align-items: center;
	max-width: var(--container);
	margin: 0 auto;
	padding: clamp(36px, 4.4vw, 56px) var(--gutter) clamp(64px, 8vw, 104px);
}
.pg3-mast--paper .pg3-h1 { max-width: 12ch; margin-top: clamp(26px, 3vw, 40px); }
.pg3-mast--paper .pg3-deck { color: rgba(13, 13, 13, .8); margin-top: clamp(22px, 2.4vw, 30px); }
.pg3-mast__aside {
	min-width: 0;
	margin: 0;
	border-radius: var(--radius-card);
	overflow: hidden;
	height: clamp(300px, 34vw, 440px);
}
.pg3-mast__aside img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Editorial split. The 5/6 prose pair the family opens bands with ---- */
.pg3-ed {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(32px, 6vw, 88px);
	align-items: start;
	margin-top: clamp(32px, 4vw, 48px);
}
.pg3-ed > * { min-width: 0; }
.pg3-ed p { margin: 0; }
.pg3-ed p + p { margin-top: 16px; }

/* ---- Full-bleed figure closing a band ---- */
.pg3-figure { margin: 0; }
.pg3-figure img {
	display: block;
	width: 100%;
	height: clamp(280px, 34vw, 440px);
	object-fit: cover;
}

/* ---- Ink split band. Component 13: prose ending on the container's
        right edge, photograph running to the viewport edge. ---- */
.pg3-split--ink {
	background: var(--ink);
	color: var(--white);
}
.pg3-split__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}
.pg3-split__body {
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: calc(640px + 4vw);
	margin-left: auto;
	padding: clamp(64px, 8vw, 120px) var(--gutter);
}
.pg3-split__body h2 { max-width: 20ch; margin-bottom: clamp(24px, 2.6vw, 34px); }
.pg3-split__body .pg3-deck { max-width: none; margin-top: 0; color: rgba(255, 255, 255, .86); }
.pg3-split__body .pg3-deck + .pg3-deck { margin-top: 20px; color: rgba(255, 255, 255, .78); }
.pg3-split__body .pg3-body { color: rgba(255, 255, 255, .78); }
.pg3-split__body strong { color: var(--white); }
.pg3-split__photo {
	margin: 0;
	position: relative;
	min-height: clamp(320px, 40vw, 620px);
}
.pg3-split__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Discipline tiles. Eight brights, ink type, the name on the floor
        of the tile. A field with 20px+ type on it, so rule 12 holds. ---- */
.pg3-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: clamp(36px, 4vw, 52px);
}
.pg3-tile {
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
	min-height: clamp(120px, 13vw, 160px);
	padding: 20px 22px;
	border-radius: var(--radius-card);
	background: var(--tone, var(--sw-7));
	font-weight: 700;
	font-size: clamp(1.1rem, 1.3vw, 1.25rem);
	letter-spacing: -.012em;
	line-height: 1.25;
	transition: transform var(--dur-move) var(--ease-state);
}
.pg3-tile, .pg3-tile:hover { color: var(--ink); }
a.pg3-tile:hover { transform: translateY(-3px); }

/* ---- The numbers. Three figures on a bright field, ink type ---- */
.pg3-nums-band { background: var(--sw-7); color: var(--ink); }
.pg3-nums {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}
.pg3-nums > div { min-width: 0; }
.pg3-num {
	font-weight: 700;
	font-size: clamp(3rem, 6.4vw, 5.6rem);
	line-height: .92;
	letter-spacing: -.04em;
}
.pg3-num-lbl {
	margin: 18px 0 0;
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.5;
}
.pg3-nums-foot {
	margin: clamp(40px, 4.6vw, 60px) 0 0;
	font-weight: 350;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	max-width: 62ch;
}
/* An underlined link on a bright field: the rule is ink, not a mid. */
.pg3-uline {
	font-weight: 600;
	box-shadow: inset 0 -2px 0 0 currentColor;
}

/* ---- The people. Six stripes, the swatch resting and the portrait
        under a veil of it when the stripe opens. ---- */
.pg3-stripes {
	display: flex;
	height: clamp(460px, 58vh, 580px);
	margin-top: clamp(32px, 3.6vw, 44px);
}
.pg3-stripe {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: var(--stripe, var(--sw-7));
	color: var(--ink);
	transition: flex-grow var(--dur-reveal) var(--ease-reveal),
	            border-radius var(--dur-reveal) var(--ease-reveal);
}
.pg3-stripe:first-child { border-top-left-radius: clamp(40px, 6vw, 72px); }
.pg3-stripe:last-child  { border-bottom-right-radius: clamp(40px, 6vw, 72px); }
.pg3-stripe__img {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--dur-reveal) var(--ease-reveal);
}
.pg3-stripe__img img { width: 100%; height: 100%; object-fit: cover; }
.pg3-stripe__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		color-mix(in srgb, var(--stripe, var(--sw-7)) 94%, transparent) 0%,
		color-mix(in srgb, var(--stripe, var(--sw-7)) 82%, transparent) 34%,
		color-mix(in srgb, var(--stripe, var(--sw-7)) 30%, transparent) 70%,
		color-mix(in srgb, var(--stripe, var(--sw-7)) 18%, transparent) 100%);
}
.pg3-stripe__vname {
	position: absolute;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	writing-mode: vertical-rl;
	white-space: nowrap;
	z-index: 1;
	font-weight: 700;
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	letter-spacing: -.015em;
	transition: opacity var(--dur-move);
}
.pg3-stripe__open {
	position: relative;
	z-index: 1;
	display: block;
	min-width: 380px;
	padding: 28px;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--dur-image) 120ms, transform var(--dur-image) 120ms;
}
.pg3-stripe__name {
	display: block;
	font-weight: 700;
	font-size: clamp(1.5rem, 2.2vw, 1.9rem);
	line-height: 1.05;
	letter-spacing: -.02em;
}
/* The role line was drawn at ink .70, which measures 3.99 on flame and 4.42
   on green: 14px at 600 is not large text, so it wants 4.5. At .80 the worst
   of the six swatches in use is flame at 4.79, and the hierarchy step below
   the name survives. */
.pg3-stripe__role {
	display: block;
	margin-top: 8px;
	font-weight: 600;
	font-size: 14px;
	color: rgba(13, 13, 13, .8);
}
.pg3-stripe__bio {
	display: block;
	margin-top: 14px;
	max-width: 40ch;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.62;
}

@media (min-width: 761px) {
	/* :focus, not :focus-visible (Sean's mobile bug report, 31 Jul): taps
	   never produce :focus-visible, so on any touch device above 760px
	   (iPads, landscape phones) the stripes were six dead slivers. The
	   stripes carry tabindex="0", which iOS and Android DO focus on tap,
	   so :focus opens them for touch and keyboard alike; mice still get
	   the hover. */
	.pg3-stripe:hover,
	.pg3-stripe:focus {
		flex-grow: 4.6;
		border-radius: clamp(40px, 6vw, 72px) 0 clamp(40px, 6vw, 72px) 0;
	}
	.pg3-stripe:hover .pg3-stripe__img,
	.pg3-stripe:focus .pg3-stripe__img { opacity: 1; }
	.pg3-stripe:hover .pg3-stripe__open,
	.pg3-stripe:focus .pg3-stripe__open { opacity: 1; transform: none; }
	.pg3-stripe:hover .pg3-stripe__vname,
	.pg3-stripe:focus .pg3-stripe__vname { opacity: 0; }
}

/* ---- The roll call. MOBILE ONLY (ruled 31 Jul 2026, option B) ----
   The team on one screen: portrait, name, role, and the row opens its bio.
   Real <button aria-expanded> over `hidden` panels — the stripes' hover
   grammar had no control underneath and was dead on touch. Colour is a 4px
   leading edge; the calm comes from the black and white shoot. Hidden above
   760, where the stripes are the component. */
.pg3-roll {
	display: none;
	margin-top: clamp(28px, 4vw, 40px);
	background: var(--white);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 22px 44px -16px rgba(13, 13, 13, .10);
}
.pg3-roll__row + .pg3-roll__row { border-top: 1px solid rgba(13, 13, 13, .10); }
.pg3-roll__btn {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: var(--font);
	text-align: left;
	padding: 14px 16px 14px 0;
	border-left: 4px solid var(--row-tone, var(--sw-4));
	transition: background-color var(--dur-tap) var(--ease-state);
}
/* Gated on a real pointer: touch leaves a sticky :hover behind after a tap,
   so the row you last opened would stay tinted for no reason. */
@media (hover: hover) {
	.pg3-roll__btn:hover { background: color-mix(in srgb, var(--row-tone, var(--sw-4)) 7%, transparent); }
}
.pg3-roll__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pg3-roll__shot {
	flex: none;
	width: 52px;
	height: 52px;
	margin-left: 14px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--mist);
}
.pg3-roll__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg3-roll__who { flex: 1 1 auto; min-width: 0; }
.pg3-roll__name {
	display: block;
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.2;
	letter-spacing: -.015em;
}
.pg3-roll__role {
	display: block;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.35;
	margin-top: 4px;
	color: rgba(13, 13, 13, .62);
}
/* A plus that becomes a minus. Not an arrow: arrows are retired, and this is
   a disclosure, not a destination. */
.pg3-roll__mark { flex: none; position: relative; width: 18px; height: 18px; }
.pg3-roll__mark::before,
.pg3-roll__mark::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: var(--ink);
	transform: translate(-50%, -50%);
	transition: opacity var(--dur-move) var(--ease-state);
}
.pg3-roll__mark::before { width: 14px; height: 2px; }
.pg3-roll__mark::after  { width: 2px; height: 14px; }
.pg3-roll__btn[aria-expanded="true"] .pg3-roll__mark::after { opacity: 0; }
.pg3-roll__panel { padding: 0 16px 18px 18px; }
.pg3-roll__panel[hidden] { display: none; }
.pg3-roll__panel p {
	margin: 0;
	font-weight: 400;
	font-size: 14.5px;
	line-height: 1.62;
	color: rgba(13, 13, 13, .82);
}

/* ---- The bench. A ruled list beside the prose ---- */
.pg3-list {
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.pg3-list span {
	padding: 14px 0;
	border-top: 1px solid rgba(13, 13, 13, .18);
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.5;
}
.pg3-list span:last-child { border-bottom: 1px solid rgba(13, 13, 13, .18); }

/* ---- The mission plate. One bright, the leaf cut, display type ---- */
.pg3-plate {
	margin-top: clamp(36px, 4vw, 52px);
	padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px);
	background: var(--tone, var(--sw-7));
	color: var(--ink);
	border-radius: var(--cut);
}
.pg3-plate p {
	margin: 0;
	max-width: 24ch;
	font-weight: 700;
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1.12;
	letter-spacing: -.024em;
}

/* ---- Three value cards. Brights, ink type, heading over body ---- */
.pg3-cards3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 24px;
}
.pg3-card3 {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(32px, 4vw, 56px);
	padding: clamp(26px, 3vw, 36px);
	border-radius: var(--radius-card);
	background: var(--tone, var(--sw-5));
	color: var(--ink);
}
.pg3-card3 h3 {
	margin: 0;
	font-weight: 700;
	font-size: clamp(1.4rem, 1.9vw, 1.7rem);
	line-height: 1.14;
	letter-spacing: -.02em;
}
.pg3-card3 p { margin: 0; font-weight: 400; font-size: 1.02rem; line-height: 1.65; }

/* ---- Quotes. Ink cards on paper. A plate is not a band, so four of
        them on the paper ground do not count as an ink band. ---- */
.pg3-quotes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
	margin-top: clamp(32px, 4vw, 48px);
}
.pg3-quote {
	min-width: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(28px, 3.4vw, 44px);
	border-radius: var(--radius-card);
	background: var(--ink);
	color: var(--white);
}
.pg3-quote blockquote {
	margin: 0;
	font-weight: 350;
	font-size: clamp(1.24rem, 2vw, 1.72rem);
	line-height: 1.42;
	letter-spacing: -.014em;
}
.pg3-quote figcaption {
	margin-top: clamp(22px, 2.4vw, 30px);
	padding-top: clamp(20px, 2.2vw, 26px);
	border-top: 1px solid rgba(255, 255, 255, .22);
}
.pg3-quote figcaption b { display: block; font-weight: 600; font-size: 1rem; }
.pg3-quote figcaption span {
	display: block;
	margin-top: 4px;
	font-weight: 350;
	font-size: 14.5px;
	color: rgba(255, 255, 255, .72);
}

/* ---- Photo plate. Component 12: a well, not a full bleed, with the
        plate scrim under the copy. ---- */
.pg3-photo {
	position: relative;
	display: flex;
	align-items: flex-end;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(400px, 44vw, 540px);
	border-radius: var(--radius-card);
}
.pg3-photo > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pg3-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--scrim-plate);
}
.pg3-photo__body {
	position: relative;
	z-index: 1;
	max-width: 62ch;
	padding: clamp(32px, 4vw, 64px);
	color: var(--white);
}
.pg3-photo__body h2 { max-width: 18ch; }
.pg3-photo__body .pg3-deck { color: rgba(255, 255, 255, .9); margin-top: clamp(18px, 2vw, 26px); }
/* With no photograph the plate runs white with ink type rather than a
   scrim over nothing. */
.pg3-photo--flat { background: var(--white); }
.pg3-photo--flat::after { display: none; }
.pg3-photo--flat .pg3-photo__body { color: var(--ink); }
.pg3-photo--flat .pg3-photo__body .pg3-deck { color: rgba(13, 13, 13, .82); }

/* ---- Ink prose band. Copy left, one tinted card right ---- */
.pg3-ink { background: var(--ink); color: var(--white); }
.pg3-ink h2 { max-width: 20ch; }
.pg3-ink .pg3-deck { color: rgba(255, 255, 255, .86); max-width: 60ch; margin-top: clamp(22px, 2.4vw, 30px); }
.pg3-ink .pg3-body { color: rgba(255, 255, 255, .78); max-width: 62ch; }
.pg3-ink__grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(32px, 6vw, 88px);
	align-items: start;
}
.pg3-ink__grid > * { min-width: 0; }
/* A card inside an inverted band states its own colour (rule 14). The
   tint ramp is still unruled, so this uses --ink-2 rather than
   improvising an alpha white. */
.pg3-tintcard {
	padding: clamp(26px, 3vw, 36px);
	border-radius: var(--radius-card);
	background: var(--ink-2);
	color: var(--white);
}
.pg3-tintcard h3 {
	margin: 0;
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.2;
	letter-spacing: -.018em;
}

/* ---- A linked list where each row underlines in its own swatch ---- */
.pg3-links {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 18px;
	font-weight: 350;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(13, 13, 13, .82);
}
.pg3-links--onink { color: rgba(255, 255, 255, .84); }
.pg3-links a {
	font-weight: 600;
	box-shadow: inset 0 -1px 0 0 var(--rule, rgba(13, 13, 13, .28));
}
.pg3-links--onink a { color: var(--white); }

/* ---- Pillar cards. White on paper, the shadow written here against
        the card's own tone (rule 13). ---- */
.pg3-pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
	margin-top: clamp(36px, 4vw, 52px);
}
.pg3-pillar {
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 3vw, 36px);
	border-radius: var(--radius-card);
	background: var(--paper);
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 22px 44px -16px color-mix(in srgb, var(--card-tone, var(--sw-5)) 50%, transparent);
}
.pg3-pillar h3 {
	margin: 0;
	font-weight: 700;
	font-size: clamp(1.8rem, 2.6vw, 2.3rem);
	line-height: 1.05;
	letter-spacing: -.022em;
}
.pg3-pillar__easier {
	margin-top: 10px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	color: rgba(13, 13, 13, .62);
}
.pg3-pillar p {
	margin: 14px 0 0;
	font-weight: 350;
	font-size: 1.02rem;
	line-height: 1.68;
	color: rgba(13, 13, 13, .8);
}
/* margin-top:auto aligns the link lists across the row whatever the
   copy length. */
.pg3-pillar .pg3-links {
	margin-top: auto;
	padding-top: clamp(22px, 2.6vw, 30px);
	gap: 11px;
}

/* ---- Three flush blocks. One rounded run, brights, ink type ---- */
.pg3-blocks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin-top: clamp(40px, 5vw, 60px);
	border-radius: var(--radius-card);
	overflow: hidden;
}
.pg3-block {
	min-width: 0;
	display: flex;
	flex-direction: column;
	min-height: clamp(240px, 24vw, 300px);
	padding: clamp(28px, 3.4vw, 44px);
	background: var(--tone, var(--sw-7));
	color: var(--ink);
}
a.pg3-block, a.pg3-block:hover { color: var(--ink); }
.pg3-block h3 {
	margin: 0;
	min-height: 2.3em;
	font-weight: 700;
	font-size: clamp(1.5rem, 2.4vw, 2.05rem);
	line-height: 1.14;
	letter-spacing: -.022em;
}
.pg3-block p { margin: 16px 0 0; font-weight: 350; font-size: 1.06rem; line-height: 1.7; }

/* ---- Receipts. Five figures on stone, then the line and the link ---- */
.pg3-figs-band { background: var(--stone); color: var(--ink); }
.pg3-figs-band .pg3-in { padding: clamp(64px, 8vw, 104px) var(--gutter); }
.pg3-figs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 44px);
	align-items: start;
}
.pg3-figs > div { min-width: 0; }
.pg3-fig {
	font-weight: 700;
	font-size: clamp(2rem, 3.4vw, 3rem);
	line-height: 1;
	letter-spacing: -.035em;
}
.pg3-fig-lbl {
	margin: 12px 0 0;
	min-height: 4.8em;
	font-weight: 350;
	font-size: .98rem;
	line-height: 1.6;
	color: rgba(13, 13, 13, .76);
}
.pg3-figs-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	flex-wrap: wrap;
	margin-top: clamp(36px, 4vw, 52px);
}
.pg3-figs-foot p {
	margin: 0;
	max-width: 26ch;
	font-weight: 700;
	font-size: clamp(1.35rem, 2vw, 1.8rem);
	line-height: 1.2;
	letter-spacing: -.02em;
}

/* ---- Two routes. The call beside the message, one rule between ---- */
.pg3-routes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}
.pg3-routes > div { min-width: 0; }
.pg3-routes h2 {
	max-width: 16ch;
	min-height: 2.2em;
	font-size: clamp(1.8rem, 3vw, 2.6rem);
}
.pg3-routes p {
	margin: clamp(18px, 2vw, 24px) 0 0;
	font-weight: 350;
	font-size: 1.06rem;
	line-height: 1.7;
	color: rgba(13, 13, 13, .82);
}
.pg3-route--ruled {
	padding-left: clamp(32px, 5vw, 72px);
	border-left: 1px solid rgba(13, 13, 13, .18);
}

/* ---- The booking slot. Drawn at its real height so the band does not
        move when the embed loads. No chrome of its own: the embed draws
        its own card, and a ring around a card is the placeholder showing
        through. The reserved height is the whole job. ---- */
.pg3-slot {
	margin-top: clamp(24px, 2.6vw, 32px);
	overflow: hidden;
	min-height: var(--slot-h, clamp(300px, 28vw, 380px));
}
.pg3-slot iframe {
	display: block;
	width: 100%;
	min-height: var(--slot-h, clamp(300px, 28vw, 380px));
	border: 0;
}
.pg3-slot-fallback {
	margin: 14px 0 0;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.55;
}
.pg3-slot-fallback a { box-shadow: inset 0 -1px 0 0 var(--sw-5-mid); }

/* ---- Contact details on ink. Two big underlined channels ---- */
.pg3-channels {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.pg3-channel {
	width: fit-content;
	font-weight: 700;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	letter-spacing: -.018em;
	color: var(--white);
	box-shadow: inset 0 -2px 0 0 var(--rule, var(--sw-4));
}
.pg3-channel:hover { color: var(--white); }
.pg3-address {
	margin: clamp(26px, 3vw, 34px) 0 0;
	font-style: normal;
	font-weight: 350;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, .86);
}
.pg3-hours {
	margin-top: clamp(26px, 3vw, 34px);
	padding-top: clamp(22px, 2.4vw, 28px);
	border-top: 1px solid rgba(255, 255, 255, .22);
}
.pg3-hours dt { font-weight: 600; font-size: 14px; color: var(--white); }
.pg3-hours dd {
	margin: 8px 0 0;
	font-weight: 350;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, .86);
}

/* ---- Forms. The v3.2 field register. 10px controls, because a column
        of pills reads as a list of buttons. ---- */
.pg3-form { margin-top: clamp(24px, 2.6vw, 32px); }
.pg3-field { display: flex; flex-direction: column; gap: 8px; }
.pg3-field + .pg3-field { margin-top: var(--sp-item); }
.pg3-label { font-weight: 600; font-size: 14px; color: var(--ink); }
.pg3-help {
	margin: 0;
	font-weight: 350;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(13, 13, 13, .66);
}
.pg3-input,
.pg3-textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 15px 18px;
	border: 0;
	border-radius: var(--radius-control);
	background: var(--white);
	box-shadow: inset 0 0 0 1.5px var(--ring-ink);
	font-family: inherit;
	font-weight: 350;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ink);
}
.pg3-textarea { min-height: 150px; line-height: 1.5; resize: vertical; }
.pg3-input::placeholder,
.pg3-textarea::placeholder { color: rgba(13, 13, 13, .58); opacity: 1; }
.pg3-input[aria-invalid="true"],
.pg3-textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 2.5px var(--error); }
.pg3-error { margin: 0; font-weight: 600; font-size: 13.5px; line-height: 1.55; color: var(--error); }
.pg3-sent { margin: 16px 0 0; font-weight: 600; font-size: 13.5px; line-height: 1.55; color: var(--sw-1-mid); }

/* On ink: the field is ink with the white ring, the label white. */
.pg3-form--onink .pg3-label { color: var(--white); }
.pg3-form--onink .pg3-input,
.pg3-form--onink .pg3-textarea {
	background: var(--ink);
	box-shadow: inset 0 0 0 1.5px var(--ring-w);
	color: var(--white);
}
.pg3-form--onink .pg3-input::placeholder { color: rgba(255, 255, 255, .62); opacity: 1; }
.pg3-form--onink .pg3-help { color: rgba(255, 255, 255, .74); }
.pg3-form button.btn3 { min-height: 52px; margin-top: 28px; cursor: pointer; }
.pg3-form--onink button.btn3 { width: 100%; margin-top: var(--sp-item); }

/* Gravity Forms, wearing the same register. GF writes its own markup,
   so the field rules are restated against its classes rather than
   duplicated by hand in the template. GF's own theme stylesheets are
   dequeued in functions.php (they out-specified everything here); the
   hidden-field rules they carried are restated in the site-wide
   "GRAVITY FORMS · HIDDEN FIELDS" block further down. */

.pg3-gf .gform_fields { display: flex; flex-direction: column; gap: var(--sp-item); }
.pg3-gf .gfield_label { display: block; margin: 0 0 8px; font-weight: 600; font-size: 14px; color: var(--ink); }
/* "(Required)" hidden here as in the drawers: a required field is marked by
   its own validation, not by a shouted parenthesis (Sean's drawer sweep,
   30 Jul 2026). GF keeps aria-required on the inputs. */
.pg3-gf .gfield_required { display: none; }
.pg3-gf input[type="text"],
.pg3-gf input[type="email"],
.pg3-gf input[type="tel"],
.pg3-gf input[type="url"],
.pg3-gf textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 15px 18px;
	border: 0;
	border-radius: var(--radius-control);
	background: var(--white);
	box-shadow: inset 0 0 0 1.5px var(--ring-ink);
	font-family: inherit;
	font-weight: 350;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ink);
}
.pg3-gf textarea { min-height: 150px; line-height: 1.5; resize: vertical; }
.pg3-gf .gfield_description { margin: 8px 0 0; font-weight: 350; font-size: 13.5px; line-height: 1.55; color: rgba(13, 13, 13, .66); }
.pg3-gf .gfield_validation_message,
.pg3-gf .validation_message { margin: 8px 0 0; font-weight: 600; font-size: 13.5px; line-height: 1.55; color: var(--error); }
.pg3-gf .gfield_error input,
.pg3-gf .gfield_error textarea { box-shadow: inset 0 0 0 2.5px var(--error); }
.pg3-gf .validation_error {
	margin: 0 0 var(--sp-item);
	padding: 14px 18px;
	border-radius: var(--radius-control);
	box-shadow: inset 0 0 0 2.5px var(--error);
	font-weight: 600;
	font-size: 1rem;
	color: var(--error);
}
.pg3-gf .gform_footer { margin: 28px 0 0; }
.pg3-gf .gform_button {
	min-height: 52px;
	padding: 15px 32px;
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	font-family: inherit;
	font-weight: 600;
	font-size: 16px;
	color: var(--white);
	background-color: var(--ink);
	background-image: linear-gradient(to right, var(--sweep, var(--sw-4)) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	transition: background-position var(--dur-move) var(--ease-reveal), color var(--dur-move);
}
.pg3-gf .gform_button:hover,
.pg3-gf .gform_button:focus-visible { background-position: 0 0; color: var(--ink); }
.pg3-gf .gform_validation_errors { margin: 0 0 var(--sp-item); }
.pg3-gf .gform_confirmation_message,
.pg3-gf .gform_submission_error { font-weight: 350; font-size: 1.06rem; line-height: 1.7; }
.pg3-privacy { margin: 18px 0 0; font-weight: 350; font-size: 13.5px; line-height: 1.55; color: rgba(13, 13, 13, .66); }
.pg3-privacy a { font-weight: 600; box-shadow: inset 0 -1px 0 0 rgba(13, 13, 13, .28); }

/* ---- Closing CTA. Ink, halftone corners, the pair or the capture ---- */
.pg3-cta {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	color: var(--white);
}
.pg3-cta__ht {
	position: absolute;
	width: 320px;
	height: 320px;
	pointer-events: none;
}
.pg3-cta__ht--tl { top: -80px; left: -80px; }
.pg3-cta__ht--br { bottom: -80px; right: -80px; }
.pg3-cta__in {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--section-y-loud) var(--gutter);
}
.pg3-cta h2 {
	margin: 0;
	max-width: 22ch;
	font-size: clamp(2.2rem, 4.4vw, 3.6rem);
	line-height: 1.04;
	letter-spacing: -.026em;
}
.pg3-cta .pg3-deck { color: rgba(255, 255, 255, .86); max-width: 60ch; }
.pg3-cta .pg3-body { color: rgba(255, 255, 255, .78); max-width: 62ch; }
.pg3-cta--centre { text-align: center; }
.pg3-cta--centre h2 { margin: 0 auto; }
.pg3-cta--centre .pg3-deck { margin-left: auto; margin-right: auto; }
.pg3-cta--centre .pg3-ctas { justify-content: center; }
.pg3-cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(32px, 6vw, 88px);
	align-items: start;
}
.pg3-cta__grid > * { min-width: 0; }
.pg3-cta__grid .pg3-cta__body h2 { max-width: 20ch; }

/* ---- The loop runs the service stage-tab component (v3.1 no. 10) as
        drawn there: .svc4-tabs / .svc4-tab / .svc4-panel, the same
        [data-svc-tabs] JS, and its own explicit collapses. Nothing is
        restated here, because a second copy of a locked component is
        the thing that drifts. Only the band ground is set. ---- */
.pg3-loop { background: var(--ink); color: var(--white); }
.pg3-loop .pg3-deck { color: rgba(255, 255, 255, .78); max-width: 56ch; }

/* ---- Entity line. The address and the registration, closing a page ---- */
.pg3-entity {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px 32px;
	align-items: baseline;
	font-weight: 350;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(13, 13, 13, .62);
}

/* ---- Responsive. Explicit counts collapse at the token breakpoints,
        and nothing lands on three. ---- */
@media (max-width: 1000px) {
	.pg3-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.pg3-blocks { grid-template-columns: minmax(0, 1fr); }
	.pg3-block h3 { min-height: 0; }
	.pg3-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pg3-figs > div:nth-child(5) { grid-column: span 2; }
	.pg3-fig-lbl { min-height: 0; }
}
@media (max-width: 860px) {
	.pg3-ed,
	.pg3-nums,
	.pg3-cards3,
	.pg3-pillars,
	.pg3-ink__grid,
	.pg3-cta__grid,
	.pg3-routes,
	.pg3-split__grid,
	.pg3-mast--paper .pg3-mast__grid { grid-template-columns: minmax(0, 1fr); }
	.pg3-split__body { max-width: none; margin-left: 0; }
	.pg3-routes h2 { min-height: 0; }
	.pg3-route--ruled {
		padding-left: 0;
		border-left: 0;
		padding-top: clamp(32px, 4vw, 44px);
		border-top: 1px solid rgba(13, 13, 13, .18);
	}
	.pg3-entity { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	.pg3-tiles { grid-template-columns: minmax(0, 1fr); }
	/* The stripes are a DESKTOP component. Stacked they became six saturated
	   full-width fields with the portraits switched off, and the fixed-height
	   box clipped the names off the top (Sean, 31 Jul). The roll call replaces
	   them here; display:none keeps exactly one of the two in the
	   accessibility tree. */
	.pg3-stripes { display: none; }
	.pg3-roll { display: block; }
}
@media (max-width: 640px) {
	.pg3-h1 { font-size: 2.3rem; }
	.pg3-quotes { grid-template-columns: minmax(0, 1fr); }
	.pg3-figs { grid-template-columns: minmax(0, 1fr); }
	.pg3-figs > div:nth-child(5) { grid-column: auto; }
}

/* Reduced motion slows what actually moves. Hover, tab and focus state
   are left alone (rule 17). */
@media (prefers-reduced-motion: reduce) {
	.pg3-stripe { transition-duration: 1s, 1s; }
	.pg3-stripe__img { transition-duration: 1s; }
	.pg3-stripe__open { transition-duration: .7s, .7s; }
	.pg3-roll__btn,
	.pg3-roll__mark::before,
	.pg3-roll__mark::after { transition-duration: 1s; }
}

/* ---- pg3 addenda ---- */

/* A secondary link inside a row keeps the neutral hairline, so the row's
   own swatch marks the primary destination and the rest do not compete. */
.pg3-links a.is-sub { box-shadow: inset 0 -1px 0 0 rgba(13, 13, 13, .28); }
.pg3-links--onink a.is-sub { box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, .42); }

/* Gravity Forms inside the ink card: the field is ink with the white ring,
   the label white, and the submit a white pill sweeping to yellow. Rule 14,
   applied to a component the ink band inherits its colour into. */
.pg3-form--onink .pg3-gf .gfield_label,
.pg3-form--onink .gfield_label { color: var(--white); }
.pg3-form--onink .gform_wrapper input[type="text"],
.pg3-form--onink .gform_wrapper input[type="email"],
.pg3-form--onink .gform_wrapper input[type="url"],
.pg3-form--onink .gform_wrapper textarea {
	background: var(--ink);
	box-shadow: inset 0 0 0 1.5px var(--ring-w);
	color: var(--white);
}
.pg3-form--onink .gform_wrapper input::placeholder,
.pg3-form--onink .gform_wrapper textarea::placeholder { color: rgba(255, 255, 255, .62); opacity: 1; }
.pg3-form--onink .gfield_description { color: rgba(255, 255, 255, .74); }
.pg3-form--onink .gform_button {
	width: 100%;
	color: var(--ink);
	background-color: var(--white);
}
.pg3-form--onink .gform_button:hover,
.pg3-form--onink .gform_button:focus-visible { color: var(--ink); }
/* The error register on ink: the ring still thickens and the fault is still
   named, but --error at 3.1:1 on ink is under the floor, so the message
   runs white and the ring carries the colour. */
.pg3-form--onink .gfield_error input,
.pg3-form--onink .gfield_error textarea { box-shadow: inset 0 0 0 2.5px var(--error); }
.pg3-form--onink .gfield_validation_message,
.pg3-form--onink .validation_message,
.pg3-form--onink .validation_error { color: var(--white); }
.pg3-form--onink .validation_error { box-shadow: inset 0 0 0 2.5px var(--error); }
.pg3-form--onink .pg3-sent,
.pg3-form--onink .gform_confirmation_message { color: var(--white); }

/* ============================================================
   GRAVITY FORMS · HIDDEN FIELDS (30 Jul 2026)

   Every rule GF uses to hide a field lives in its own theme CSS,
   and that CSS is dequeued site-wide (gform_disable_css in
   functions.php), so no wrapper gets it any more: without this
   block the honeypot, its editor-only note ("This field is hidden
   when viewing the form") and every hidden field would render in
   the layout on every form.

   Restated here for every wrapper, site-wide, in one place. Off
   screen with visibility:hidden rather than display:none, matching
   what GF's own rule does, so the honeypot still baits a bot that
   reads the DOM.
   ============================================================ */
.gform_wrapper .gfield_visibility_hidden,
.gform_wrapper .gf_invisible,
.gform_wrapper .gform_validation_container,
.gform_wrapper .gform_hidden,
.gform_wrapper .admin-hidden-markup {
	position: absolute !important;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	visibility: hidden;
}

/* ============================================================
   SERVICE PAGES · BACK HALF (30 Jul 2026) · scoped .svc4
   Built from services-final/service-technical-seo-v2.html (the
   canonical worked example), service-local-seo-v2.html (the
   with-proof variant) and the developer handoff written against
   them, after the 30 Jul page-by-page review.

   The zone runs from the end of the stage tabs to the top of the
   closing CTA. Nothing above it changes. The review's recurring
   complaint was dead space between "we have done this before" and
   "straight answers": the capture plate and the related-services
   row now occupy it, so the fix is structural rather than a margin
   tweak.

   Grounds, after the insert:
     04 how the work runs  ink
     05 proof              paper
     05b outcomes          paper   (runs inside 05 on a one-study page)
     05c capture           mist  + bright plate
     05d related services  white
     06 areas we cover     mist    (location pages only)
     07 straight answers   mist, or white where 06 ran
     08 closing CTA        ink
   Ink still appears exactly twice, and no two like grounds touch.

   Deviations from tokens v3, both taken from the drawn design:
   - the proof-row quote card drops the swatch edge. Rule 12 gives a
     quote a swatch rule on its leading edge; the handoff rules out
     coloured card edges anywhere in this zone and the drawn cards
     carry none. The standalone .svc4-say quote keeps its rule, so
     rule 12 still holds everywhere it was written for.
   - the outcomes tiles are bright fields with ink text, which is the
     colour law as written (brights are fields, mids are text).
   ============================================================ */

/* ---- The photo prose card. Image top, prose under. ---- */
.svc4-entry--photo { padding: 0; overflow: hidden; }
.svc4-entry__img { display: block; width: 100%; height: 180px; object-fit: cover; }
.svc4-entry__body { display: flex; flex-direction: column; flex: 1; }
.svc4-entry--photo .svc4-entry__body { gap: 12px; padding: 26px 28px 28px; }
.svc4-entry--photo .svc4-entry__desc { margin-top: 0; }

/* ---- Proof row states. Explicit tracks per known count (rule 1). ---- */
.svc4-proof__grid--pair {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: clamp(28px, 3.4vw, 40px);
	align-items: center;
}
.svc4-proof__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Quote alone: centred type on the paper, no card to sit in. */
.svc4-quote--bare {
	background: none;
	color: var(--ink);
	border-left: 0;
	padding: 0;
	max-width: 62ch;
	margin: 0 auto;
	text-align: center;
}
.svc4-quote--bare blockquote { font-size: clamp(1.3rem, 2.4vw, 2rem); }
.svc4-quote--bare figcaption { border-top-color: rgba(13, 13, 13, .18); display: inline-block; }
.svc4-quote--bare .svc4-quote__role { color: rgba(13, 13, 13, .7); }
/* The edge comes off the card inside the proof row only. */
.svc4-proof__grid .svc4-quote { border-left: 0; }

/* ---- BLK.15 outcomes. Business outcomes, no figures. ---- */
.svc4-outs { background: var(--paper); }
.svc4-outs .svc4-in { padding: 0 var(--gutter) var(--sp-band); }
.svc4-out { min-width: 0; }
.svc4-out__h {
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.018em;
	font-size: clamp(1.4rem, 2vw, 1.7rem);
	max-width: 26ch;
	text-wrap: balance;
}
.svc4-out--wide .svc4-out__h { font-size: clamp(1.7rem, 2.8vw, 2.3rem); max-width: 30ch; }
.svc4-out__lede {
	font-size: clamp(1rem, 1.3vw, 1.05rem);
	line-height: 1.65;
	margin: 14px 0 0;
	max-width: 52ch;
	color: rgba(13, 13, 13, .78);
	text-wrap: pretty;
}
.svc4-out__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-close);
	margin-top: var(--sp-item);
}
/* Four across when the block has the full width to itself. */
.svc4-out--wide .svc4-out__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-item);
	margin-top: var(--sp-group);
}
.svc4-out__tile {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--tile, var(--sw-5));
	color: var(--ink);
	border-radius: var(--radius-card);
	padding: 20px;
	min-height: 104px;
}
.svc4-out__tile-h { font-weight: 700; font-size: 1.1rem; line-height: 1.25; letter-spacing: -.014em; text-wrap: balance; }
/* Full ink, not a knocked-back ink, and a real weight. Biennale Book at 350
   is too light to sit on a saturated field: on flame the 78% version measured
   4.64:1, the weakest pairing in the whole set, and a warm saturated ground
   makes dark text appear to vibrate (the effect rule 12 already records).
   At full ink the same line measures 6.13:1 on flame and 7.28+ everywhere
   else, and the heavier stroke stops it reading as soft focus. */
.svc4-out__tile-p { font-weight: 400; font-size: 15px; line-height: 1.5; color: var(--ink); margin-top: auto; }

/* ---- Mid-page capture. Bright plate on the mist ground. ---- */
.svc4-cap { background: var(--mist); }
.svc4-cap .svc4-in { padding: clamp(40px, 5vw, 64px) var(--gutter); }
.svc4-cap__plate {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	background: var(--sw-5);
	color: var(--ink);
	border-radius: var(--radius-card);
	overflow: hidden;
}
/* No photograph yet: the copy takes the whole plate rather than the
   image column collapsing to a coloured gap. */
.svc4-cap__plate:not(:has(.svc4-cap__img)) { grid-template-columns: minmax(0, 1fr); }
.svc4-cap__body { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.svc4-cap__body h2 {
	font-weight: 700;
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	max-width: 24ch;
	text-wrap: balance;
}
.svc4-cap__body p {
	font-size: clamp(1.02rem, 1.4vw, 1.15rem);
	line-height: 1.6;
	margin: var(--sp-close) 0 0;
	max-width: 52ch;
	color: rgba(13, 13, 13, .84);
	text-wrap: pretty;
}
.svc4-cap__body .svc4-btns { margin-top: clamp(24px, 3vw, 28px); }
.svc4-cap__img { position: relative; min-height: 320px; }
.svc4-cap__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- Related services. White. Heading left, link ledger right. ---- */
.svc4-rel { background: var(--white); }
.svc4-rel__row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(28px, 4vw, 48px);
	align-items: start;
}
.svc4-rel__row h2 {
	font-weight: 700;
	font-size: clamp(1.7rem, 2.6vw, 2rem);
	line-height: 1.15;
	letter-spacing: -.018em;
	max-width: 18ch;
	text-wrap: balance;
}
.svc4-rel__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px clamp(16px, 2vw, 24px); }
/* The mega-menu sweep, reused. background-repeat is load-bearing: the
   gradient is parked one full width left, and a repeat paints a 1px
   line of the swatch down the right edge. */
.svc4-rel__links a {
	display: block;
	padding: 13px 14px;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--ink);
	background-image: linear-gradient(to right, var(--sweep, var(--sw-4)) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	transition: background-position var(--dur-move, .2s) var(--ease-state, cubic-bezier(.16, 1, .3, 1));
}
.svc4-rel__links a:hover, .svc4-rel__links a:focus-visible { background-position: 0 0; }

/* ---- Straight answers. The locked FAQ, in a row with a rail. ---- */
.svc4-ask { background: var(--mist); }
.svc4-ask--white { background: var(--white); }
.svc4-ask .svc4-in { padding: var(--sp-band) var(--gutter); }
.svc4-ask__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.svc4-ask--rail .svc4-ask__row { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.svc4-ask__main { min-width: 0; }
/* The FAQ block is untouched. The wrapper owns the ground and the band,
   so the block gives up its own and fills the column. */
.svc4 .svc4-ask .svp__faq { background: none; padding: 0; }
.svc4 .svc4-ask .svp__faq .container { max-width: none; padding: 0; }
.svc4-ask__rail { position: sticky; top: 110px; border-radius: var(--radius-card); overflow: hidden; min-height: 480px; }
.svc4-ask__rail img { display: block; width: 100%; height: 100%; min-height: 480px; object-fit: cover; }

@media (max-width: 900px) {
	.svc4-proof__grid--pair, .svc4-proof__grid--three { grid-template-columns: minmax(0, 1fr); }
	.svc4-out--wide .svc4-out__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.svc4-cap__plate, .svc4-rel__row, .svc4-ask--rail .svc4-ask__row { grid-template-columns: minmax(0, 1fr); }
	.svc4-cap__img { min-height: 240px; }
	/* The rail is atmosphere, not content: it goes rather than stacking
	   a 480px photograph between the answers and the CTA. */
	.svc4-ask__rail { display: none; }
}
@media (max-width: 620px) {
	.svc4-rel__links, .svc4-out__grid, .svc4-out--wide .svc4-out__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- The mega menu says where you are (Sean, 30 Jul review). ----
   The lit row is the hover state at rest, so the panel opens with the
   current page already marked. Weight carries it as well as the field,
   so it does not depend on colour alone. */
.mega-col .nav-link.is-current,
.mega-col__hub.is-current { background-position: 0 0; font-weight: 600; }

/* ---- Service masthead H1. ----
   The review found the H1 breaking mid-phrase on nearly every service page
   ("...that makes your site / easy to find, read and rank", and Local SEO
   dropping "business" alone onto line two). balance evens the lines instead
   of filling greedily; the wider measure gives it room to do it. */
.svc4-mast h1 { max-width: 26ch; text-wrap: balance; }

.acc-group a.is-current { font-weight: 600; }

/* ============================================================
   TOOL LANDERS (30 Jul 2026) · scoped .tl3
   The free teardown and the free AI-search visibility check,
   from services-final/tool-*.html.

   Four bands: masthead (paper) · what it covers (mist) ·
   the ask (ink) · straight answers (mist). The FAQ is the one
   addition to the drawn design, and it sits below the ask so the
   form is still the first thing a converting visitor meets.

   The drawn form is two bare inputs on a #242424 plate. What
   ships is the Gravity Form styled to that, because hand-rolled
   inputs would lose submission handling and the native spam
   protection. Field colours are set here rather than in the form.
   ============================================================ */

.tl3 {
	font-family: var(--font);
	font-weight: 350;
	color: var(--ink);
	background: var(--paper);
}
.tl3 h1, .tl3 h2, .tl3 h3 { font-family: var(--font); }
.tl3 .tl3-in { max-width: var(--container); margin: 0 auto; padding: var(--sp-band) var(--gutter); }
.tl3-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(30px, 3.4vw, 42px); }
/* The secondary ask is deliberately the smaller control. */
.tl3-btn--quiet { padding: 13px 22px; font-size: 14px; }

/* ---- 01 Masthead. Paper. ---- */
.tl3-mast { background: var(--paper); }
.tl3-mast__grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	padding: clamp(36px, 4.4vw, 56px) var(--gutter) clamp(64px, 8vw, 104px);
}
.tl3-mast__body { min-width: 0; }
.tl3-mast h1 {
	font-weight: 700;
	font-size: clamp(2.4rem, 5.6vw, 4.9rem);
	line-height: 1.03;
	letter-spacing: -.028em;
	max-width: 16ch;
	margin: clamp(26px, 3vw, 40px) 0 0;
	text-wrap: balance;
}
.tl3-deck {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	max-width: 54ch;
	margin: clamp(22px, 2.4vw, 30px) 0 0;
	color: rgba(13, 13, 13, .8);
	text-wrap: pretty;
}
.tl3-mast__fig {
	min-width: 0;
	margin: 0;
	border-radius: var(--radius-card);
	overflow: hidden;
	height: clamp(300px, 34vw, 440px);
}
.tl3-mast__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 02 What it covers. Mist, three numbered cards. ---- */
.tl3-covers { background: var(--mist); }
.tl3-covers h2 {
	font-weight: 700;
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -.02em;
	max-width: 22ch;
	text-wrap: balance;
}
.tl3-covers__lede {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	max-width: 66ch;
	margin: clamp(20px, 2.2vw, 28px) 0 0;
	color: rgba(13, 13, 13, .82);
	text-wrap: pretty;
}
.tl3-covers__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-item);
	margin-top: clamp(36px, 4vw, 52px);
}
.tl3-card {
	min-width: 0;
	background: var(--white);
	border-radius: var(--radius-card);
	padding: clamp(26px, 3vw, 36px);
}
.tl3-card__n { display: block; font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: -.03em; }
.tl3-card h3 {
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: -.016em;
	margin: clamp(18px, 2vw, 24px) 0 0;
}
.tl3-card p { font-size: 1rem; line-height: 1.65; margin: 12px 0 0; color: rgba(13, 13, 13, .78); text-wrap: pretty; }
.tl3-covers__note {
	font-size: 1rem;
	line-height: 1.7;
	margin: clamp(24px, 2.6vw, 32px) 0 0;
	max-width: 70ch;
	color: rgba(13, 13, 13, .72);
}
.tl3-covers__note a { color: var(--ink); box-shadow: inset 0 -1px 0 0 var(--sw-4); }

/* ---- 03 The ask. Ink. Copy left, form plate right. ---- */
.tl3-ask { background: var(--ink); color: var(--white); }
.tl3-ask .tl3-in { padding: clamp(88px, 11vw, 152px) var(--gutter); }
.tl3-ask__grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(32px, 6vw, 88px);
	align-items: start;
}
.tl3-ask__body { min-width: 0; }
.tl3-ask h2 {
	font-weight: 700;
	font-size: clamp(2.2rem, 4.4vw, 3.6rem);
	line-height: 1.04;
	letter-spacing: -.026em;
	max-width: 20ch;
	text-wrap: balance;
}
.tl3-ask__lede {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	margin: clamp(22px, 2.4vw, 30px) 0 0;
	max-width: 60ch;
	color: rgba(255, 255, 255, .86);
	text-wrap: pretty;
}
.tl3-ask__fine {
	font-size: 1.02rem;
	line-height: 1.7;
	margin: 18px 0 0;
	max-width: 62ch;
	color: rgba(255, 255, 255, .78);
	text-wrap: pretty;
}

/* The form plate. One step lighter than the band so it reads as a
   surface rather than a hole, with the fields darker again. */
.tl3-form { min-width: 0; background: #242424; border-radius: var(--radius-card); padding: clamp(26px, 3vw, 36px); }
.tl3-form label, .tl3-form .gfield_label { font-weight: 600; font-size: 14px; color: var(--white); display: block; margin-bottom: 8px; }
.tl3-form .gform_fields { display: grid; gap: var(--sp-item); }
.tl3-form input[type="text"],
.tl3-form input[type="url"],
.tl3-form input[type="email"],
.tl3-form input[type="tel"],
.tl3-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 15px 18px;
	border: 0;
	border-radius: 10px;
	background: var(--ink);
	color: var(--white);
	font: inherit;
	font-size: 1rem;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
}
.tl3-form ::placeholder { color: rgba(255, 255, 255, .45); }
.tl3-form input:focus-visible, .tl3-form textarea:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
}
.tl3-form .gform_footer { margin: var(--sp-item) 0 0; padding: 0; }
.tl3-form input[type="submit"], .tl3-form button[type="submit"] {
	width: 100%;
	min-height: 52px;
	padding: 15px 26px;
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	color: var(--ink);
	background-color: var(--white);
	background-image: linear-gradient(to right, var(--tone, var(--sw-5)) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	transition: background-position var(--dur-move, .25s) var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}
.tl3-form input[type="submit"]:hover, .tl3-form button[type="submit"]:hover { background-position: 0 0; }
.tl3-form .gform_validation_errors, .tl3-form .gfield_description, .tl3-form .gform_confirmation_message {
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .74);
}
.tl3-form__fallback { font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, .82); }
.tl3-form__fallback a { color: var(--white); box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, .5); }

/* ---- 04 Straight answers. Mist. The FAQ system, unchanged. ---- */
.tl3-answers { background: var(--mist); }
.tl3-answers .tl3-in { padding: var(--sp-band) var(--gutter); }
.tl3 .tl3-answers .svp__faq { background: none; padding: 0; }
.tl3 .tl3-answers .svp__faq .container { max-width: 82ch; padding: 0; }

.tl3-strip { display: grid; grid-template-columns: repeat(8, 1fr); height: 4px; }

@media (max-width: 900px) {
	.tl3-covers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tl3-covers__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
	.tl3-mast__grid, .tl3-ask__grid { grid-template-columns: minmax(0, 1fr); }
	.tl3-mast__fig { height: clamp(220px, 44vw, 320px); }
	.tl3-mast h1 { max-width: 20ch; }
}
@media (max-width: 620px) {
	.tl3-covers__grid { grid-template-columns: minmax(0, 1fr); }
	.tl3-covers__grid > :last-child:nth-child(odd) { grid-column: auto; }
}

/* Outcomes on a tool lander: white, between the mist covers band and the ink ask. */
.tl3-outs { background: var(--white); }
.tl3-outs .tl3-in { padding: var(--sp-band) var(--gutter); }

/* ---- Proof gallery. Visual-only proof, the ruling 45 pattern.
   Sits in the proof slot on design systems, where a study card would be,
   so the gallery and the outcomes block form the pair. Three across,
   two rows; the tile is a white card so the screenshots inside it read
   as artefacts rather than as page background. ---- */
.svc4-gal {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-item);
	margin-top: clamp(32px, 4vw, 48px);
}
.svc4-gal__tile {
	min-width: 0;
	margin: 0;
	background: var(--white);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04), 0 18px 36px -18px rgba(13, 13, 13, .22);
}
.svc4-gal__tile img { display: block; width: 100%; height: clamp(190px, 17vw, 240px); object-fit: cover; object-position: top center; }
.svc4-gal__tile figcaption {
	padding: 18px 22px 22px;
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(13, 13, 13, .78);
	text-wrap: pretty;
}
.svc4-gal__note {
	font-size: 1rem;
	line-height: 1.7;
	margin: clamp(26px, 3vw, 34px) 0 0;
	max-width: 74ch;
	color: rgba(13, 13, 13, .78);
}
.svc4-gal__note a { color: var(--ink); box-shadow: inset 0 -1px 0 0 var(--tone, var(--sw-4)); }

@media (max-width: 900px) { .svc4-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .svc4-gal { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   LOCATION LANDERS (31 Jul 2026) · scoped .loc4
   Skin: Sean's Claude Design handover (locations/location-oxford.html),
   re-bound to the live tokens. Markup: inc/location-v4.php · art
   direction: inc/location-design.php.

   Rulings from the sense check: hero keeps its stat trio and carries ONE
   button (a drawer holding the capture form); standalone photographs keep
   the card radius, the site standard; the trust bar renders whole; ink
   bands land wherever the skin used them. The skin's #FFF100 and #B00020
   are NOT carried: --sw-7 and --error own those jobs.

   Band order, the skin's: photo hero · white trust · mist meet · white
   why · paper work · mist receipts · INK how-it-runs · paper answers ·
   INK close.
   ============================================================ */

/* ---- 01 Hero. The place photograph under --scrim-hero; ink until the
   town's shot lands. ---- */
.loc4-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp(560px, 78vh, 820px);
	padding: calc(var(--sp-block) + 40px) 0 var(--sp-block);
	color: var(--white);
}
.loc4-hero--ink { background: var(--ink); }
.loc4-hero__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.loc4-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--scrim-hero);
}
.loc4-hero__in { width: 100%; }
.loc4-hero__h1 {
	margin: var(--sp-item) 0 0;
	font-family: var(--font);
	font-weight: 700;
	font-size: clamp(2.75rem, 1.4rem + 4.5vw, 5.25rem);
	line-height: 1.02;
	letter-spacing: -.02em;
	color: var(--white);
	text-wrap: balance;
}
.loc4-hero__deck {
	margin: var(--sp-item) 0 0;
	max-width: 56ch;
	font-size: 1.125rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .92);
}

/* The drawer. One control in the hero; the capture form unfolds below it.
   Open state comes from the element, not from hover, so touch and keyboard
   get the same page (v3.2 interaction law). */
.loc4-drawer { margin-top: var(--sp-group); }
.loc4-drawer__btn {
	/* The sweep button's geometry, filling from BELOW: this control opens
	   something rather than navigating (tokens v3, component 1). It is an
	   anchor to #signal-check, so the underline comes off. */
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 15px 26px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .01em;
	line-height: 1.2;
	cursor: pointer;
	list-style: none;
	background-color: var(--white);
	color: var(--ink);
	background-image: linear-gradient(to top, var(--sw-4) 50%, transparent 50%);
	background-size: 100% 200%;
	background-position: 0 0;
	background-repeat: no-repeat;
	transition: background-position var(--dur-move) var(--ease-reveal);
}
.loc4-drawer__btn:hover,
.loc4-drawer__btn:focus-visible { background-position: 0 100%; }
.loc4-drawer__btn:focus-visible { outline: 2px solid var(--focus-w); outline-offset: 3px; }

/* The photo credit. CC BY-SA attribution, required by the licence. 13px is
   the floor and this sits on it, on the scrim floor where white at .75
   measures ~11:1. */
.loc4-hero__credit {
	position: absolute;
	right: var(--gutter);
	bottom: 10px;
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, .75);
}
.loc4-hero__credit a {
	color: rgba(255, 255, 255, .75);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.loc4-hero__credit a:hover,
.loc4-hero__credit a:focus-visible { color: var(--white); }

/* The stat trio over the photograph. Re-cut from the legacy chip: Biennale
   not serif/mono, 13px floor not 10px, clustered left on natural widths
   rather than spread into columns (Sean, 31 Jul). */
.loc4-hero .pb-stats {
	display: flex;
	flex-wrap: wrap;
	width: fit-content;
	gap: var(--sp-close) clamp(40px, 5vw, 80px);
	margin: var(--sp-block) 0 0;
}
.loc4-hero .pb-stats__chip { flex: none; max-width: 30ch; }
.loc4-hero .pb-stats__value {
	font-family: var(--font);
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--white);
}
.loc4-hero .pb-stats__label {
	font-family: var(--font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	opacity: 1;
	color: rgba(255, 255, 255, .78);
}
.loc4-card h3,
.loc4-pcard__name,
.loc4-pcard__plate dt { font-family: var(--font); }

/* ---- 02 Trust. The homepage marquee (.v3h-trust) renders here whole;
   it carries its own band and needs nothing from this scope. ---- */

/* ---- 03 The no-office-here split. Mist; copy left, the meeting
   photograph right. ---- */
.loc4-meet { background: var(--mist); padding: var(--sp-band) 0; }
.loc4-meet__grid {
	display: grid;
	/* Explicit tracks for a known count (rule 1). */
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--sp-group);
	align-items: center;
}
.loc4-meet--solo .loc4-meet__grid { grid-template-columns: minmax(0, 1fr); }
.loc4-meet__h2 {
	font-family: var(--font);
	margin: 0 0 var(--sp-item);
	max-width: 24ch;
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.6rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.02em;
}
.loc4-meet p {
	margin: 0 0 var(--sp-close);
	max-width: 58ch;
	font-size: 1.0313rem;
	line-height: 1.62;
	color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.loc4-meet p:last-child { margin-bottom: 0; }
.loc4-meet__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-card);
}

/* ---- Shared section heading register. ---- */
.loc4-h2 {
	font-family: var(--font);
	margin: 0 0 var(--sp-item);
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.6rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.02em;
}

/* ---- 04 Why they come to us. White prose, then the place band. ---- */
.loc4-why { background: var(--white); padding: var(--sp-band) 0; }
.loc4-why__prose p {
	margin: 0 0 var(--sp-close);
	max-width: 72ch;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: color-mix(in srgb, var(--ink) 84%, transparent);
}
.loc4-why__band {
	display: block;
	width: 100%;
	height: clamp(220px, 26vw, 380px);
	object-fit: cover;
	border-radius: var(--radius-card);
	margin-top: var(--sp-group);
}
/* Attribution for a CC BY-SA band. On white, ink at .55 measures ~8:1. */
.loc4-why__band-credit {
	margin: 8px 0 0;
	text-align: right;
	font-size: 13px;
	color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.loc4-why__band-credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.loc4-why__band-credit a:hover,
.loc4-why__band-credit a:focus-visible { color: var(--ink); }

/* ---- 05 What the work covers. Paper; six white cards on the tinted
   shadows, walking the stage order. Colour never enters as border or
   text: the shadow is the vehicle (the panel discipline). ---- */
.loc4-work { background: var(--paper); padding: var(--sp-band) 0; }
.loc4-work__grid {
	display: grid;
	/* Explicit tracks: six goes 3 · 2 · 1, never auto-fit. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-item);
	margin-top: var(--sp-group);
}
.loc4-card {
	background: var(--white);
	border-radius: var(--radius-card);
	padding: var(--sp-item);
	box-shadow: 0 2px 4px rgba(13, 13, 13, .04),
	            0 22px 44px -16px color-mix(in srgb, var(--card-tone, var(--sw-4)) 50%, transparent);
}
.loc4-work__grid > :nth-child(1) { --card-tone: var(--sw-7); }
.loc4-work__grid > :nth-child(2) { --card-tone: var(--sw-4); }
.loc4-work__grid > :nth-child(3) { --card-tone: var(--sw-5); }
.loc4-work__grid > :nth-child(4) { --card-tone: var(--sw-1); }
.loc4-work__grid > :nth-child(5) { --card-tone: var(--sw-6); }
.loc4-work__grid > :nth-child(6) { --card-tone: var(--sw-2); }
.loc4-card h3 { margin: 0 0 var(--sp-tight); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.loc4-card h3 a { color: var(--ink); text-decoration: none; transition: text-decoration-color var(--dur-tap) var(--ease-state); }
.loc4-card h3 a:hover,
.loc4-card h3 a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.loc4-card p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--ink) 78%, transparent);
}

/* ---- 06 Receipts. Mist; partner photograph, ink figure plate, one
   control. ---- */
.loc4-proof { background: var(--mist); padding: var(--sp-band) 0; }
.loc4-proof__intro,
.loc4-proof__outro {
	margin: 0;
	max-width: 62ch;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.loc4-proof__outro { margin-top: var(--sp-block); }
.loc4-proof__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-item);
	margin-top: var(--sp-group);
}
.loc4-pcard {
	background: var(--white);
	border-radius: var(--radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-card);
}
.loc4-pcard__img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.loc4-pcard__body {
	padding: var(--sp-item);
	display: flex;
	flex-direction: column;
	gap: var(--sp-close);
	flex: 1;
}
.loc4-pcard__name { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.loc4-pcard__plate {
	margin: 0;
	background: var(--ink);
	color: var(--white);
	border-radius: var(--radius-control);
	padding: var(--sp-close);
	display: grid;
	gap: 10px;
}
.loc4-pcard__plate div { display: flex; align-items: baseline; gap: 8px; }
.loc4-pcard__plate dt { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
/* 13px floor holds on ink. */
.loc4-pcard__plate dd { margin: 0; font-size: .8125rem; color: rgba(255, 255, 255, .75); }
.loc4-pcard__desc {
	margin: 0;
	font-size: .9063rem;
	line-height: 1.55;
	color: color-mix(in srgb, var(--ink) 78%, transparent);
}
/* The ghost pill. Ring at the measured 1.4.11 floor, sweep on hover. */
.loc4-pcard__link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 10px 20px;
	border-radius: var(--radius-pill);
	box-shadow: inset 0 0 0 1.5px var(--ring-ink);
	color: var(--ink);
	font-size: .8438rem;
	font-weight: 600;
	text-decoration: none;
	background-image: linear-gradient(to right, color-mix(in srgb, var(--card-tone, var(--sw-4)) 24%, var(--white)) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	transition: background-position var(--dur-move) var(--ease-reveal);
}
.loc4-pcard__link:hover,
.loc4-pcard__link:focus-visible { background-position: 0 0; }
.loc4-proof__grid > :nth-child(1) { --card-tone: var(--sw-2); }
.loc4-proof__grid > :nth-child(2) { --card-tone: var(--sw-5); }
.loc4-proof__grid > :nth-child(3) { --card-tone: var(--sw-1); }

/* 07 How-it-runs and 08 straight answers ride the svc4 scope whole (the
   main carries both classes), so the stage tabs and the v3 FAQ restyle
   arrive untouched. */

/* ---- 09 The close. Ink, centred, the skin's pair of pills. ---- */
.loc4-close {
	background: var(--ink);
	color: var(--white);
	padding: var(--section-y-loud) 0;
	text-align: center;
}
.loc4-close h2 {
	margin: 0 auto;
	max-width: 20ch;
	font-family: var(--font);
	font-weight: 700;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
	line-height: 1.06;
	letter-spacing: -.02em;
	color: var(--white);
	text-wrap: balance;
}
.loc4-close p {
	margin: var(--sp-item) auto 0;
	max-width: 62ch;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, .85);
}
.loc4-close__btns {
	margin-top: var(--sp-group);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--sp-close);
	flex-wrap: wrap;
}
/* The pair: a white pill that sweeps (it navigates, so the fill comes from
   the left) and the ghost on the measured white ring. */
.loc4-close__primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 26px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	color: var(--ink);
	background-color: var(--white);
	background-image: linear-gradient(to right, var(--sw-4) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	transition: background-position var(--dur-move) var(--ease-reveal);
}
.loc4-close__primary:hover,
.loc4-close__primary:focus-visible { background-position: 0 0; }
.loc4-close__ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 26px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	color: var(--white);
	box-shadow: inset 0 0 0 1.5px var(--ring-w);
	transition: box-shadow var(--dur-tap) var(--ease-state);
}
.loc4-close__ghost:hover,
.loc4-close__ghost:focus-visible { box-shadow: inset 0 0 0 2px var(--white); }

/* ---- Responsive. Explicit counts collapse at the token breakpoints. ---- */
@media (max-width: 1000px) {
	.loc4-work__grid,
	.loc4-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Three into two orphans the third: it spans. */
	.loc4-proof__grid > :last-child:nth-child(3) { grid-column: 1 / -1; }
	.loc4-meet__grid { grid-template-columns: minmax(0, 1fr); }
	.loc4-meet__img { max-width: 560px; }
}
@media (max-width: 620px) {
	.loc4-hero { min-height: 0; }
	.loc4-work__grid,
	.loc4-proof__grid { grid-template-columns: minmax(0, 1fr); }
	.loc4-proof__grid > :last-child:nth-child(3) { grid-column: auto; }
	.loc4-drawer__panel { max-width: none; }
}

/* Reduced motion slows the sweeps; nothing is gated on them. */
@media (prefers-reduced-motion: reduce) {
	.loc4-drawer__btn,
	.loc4-pcard__link { transition-duration: var(--dur-reveal); }
}