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

/* ---- Tokens (mirror theme.json so legacy CSS-var references work) ---- */
:root {
	--ink: #0D0D0D;
	--white: #FFFFFF;
	--off: #F5F4F0;
	--dark: #111318;

	--green:  #2AB473;
	--lime:   #8CC63F;
	--yellow: #FEF100;
	--amber:  #FBAF42;
	--flame:  #F06522;
	--cyan:   #44C6EF;
	--tan:    #C2B398;
	--accent: #F0C040;

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

/* ---- 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;
	overflow-x: hidden;
}

body { line-height: 1.5; }

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;
	background: var(--accent);
	color: var(--ink);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.skip-link:focus {
	left: 12px;
	top: 12px;
}

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

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

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 100px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .01em;
	transition: all .2s;
	white-space: nowrap;
}
.btn--ink     { background: var(--ink);    color: var(--white); }
.btn--ink:hover { background: #1f2937; }
.btn--accent  { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: #E8B830; }
.btn--ghost   { border: 1.5px solid rgba(255,255,255,.3); color: var(--white); }
.btn--ghost:hover { border-color: var(--white); }
.btn--light   { background: 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(--ink); }

/* ---- 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(--white); /* 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; }
}
html[data-theme="light"] .brand-logo {
	color: var(--ink);
}
.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;
	color: var(--cyan);
	text-transform: uppercase;
	margin-bottom: 32px;
}
.v1__marker::before {
	content: '';
	width: 8px; height: 8px;
	background: var(--cyan);
	border-radius: 50%;
	box-shadow: 0 0 16px var(--cyan);
}

.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(--white); }
.v1__mono .l2 { color: var(--cyan); display: block; }
.v1__mono .l3 {
	color: rgba(255,255,255,.2);
	display: block;
	font-style: italic;
	font-weight: 400;
	font-family: var(--serif);
	letter-spacing: -.02em;
	text-transform: none;
	font-size: .48em;
	margin-top: .12em;
}

.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;
}
.v1__sub p {
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255,255,255,.75);
	max-width: 52ch;
}
.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: .62 / 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 .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;
}
.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;
}
.v1__pillars h2 i { font-style: italic; font-weight: 400; color: var(--accent); }
.v1__pillars-lede {
	font-size: 18px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .7);
	max-width: 46ch;
	align-self: end;
}

/* 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;
	color: rgba(255, 255, 255, .55);
	margin-bottom: 6px;
}
.v1__callout .ttl {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -.01em;
	line-height: 1.1;
	margin-bottom: 8px;
}
.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(255, 255, 255, .65);
}
.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(255, 255, 255, .5);
}
.v1__callout .stat strong {
	font-family: var(--serif);
	font-size: 20px;
	color: var(--white);
	letter-spacing: -.01em;
}
.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 OSOF tile — explicit colour for light theme */
	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: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;
}

/* ---- Process ---- */
.v1__proc {
	padding: 140px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.v1__proc-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	margin-bottom: 60px;
	align-items: end;
}
.v1__proc-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: 14ch;
}
.v1__proc-head h2 em { font-style: normal; color: var(--cyan); }
.v1__proc-head p {
	color: rgba(255,255,255,.65);
	font-size: 17px;
	line-height: 1.6;
	max-width: 52ch;
}

.v1__proc-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);
}
.v1__step {
	background: var(--ink);
	color: var(--white); /* dark step card — explicit colour for light theme */
	padding: 32px;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.v1__step .tag {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	color: var(--cyan);
	text-transform: uppercase;
	margin-bottom: 14px;
}
.v1__step h3 {
	font-family: var(--grotesk);
	font-weight: 800;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: -.02em;
	line-height: 1;
	margin-bottom: 12px;
}
.v1__step p {
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255,255,255,.6);
}
.v1__step .num {
	font-family: var(--grotesk);
	font-weight: 900;
	font-size: 96px;
	line-height: .85;
	letter-spacing: -.05em;
	color: rgba(255,255,255,.08);
}

/* ---- Team ---- */
.v1__team {
	padding: 140px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.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;
}
.v1__team-head h2 em {
	font-style: normal;
	color: var(--accent);
}
.v1__team-head p {
	color: rgba(255,255,255,.6);
	font-size: 17px;
	line-height: 1.6;
	max-width: 50ch;
}

.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;
}
.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;
}
.v1__m .role {
	font-size: 13px;
	color: rgba(255,255,255,.55);
}
.v1__team-more {
	margin-top: 32px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--accent);
	text-transform: uppercase;
	text-align: center;
}
.v1__team-more a:hover { color: var(--white); }

/* ---- 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 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: 44px;
	letter-spacing: -.03em;
	line-height: .9;
	margin-bottom: 20px;
}
.v1__footer-logo em {
	font-style: normal;
	color: var(--flame);
}
.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); }

/* Theme toggle in footer-bottom bar — sits beside copyright/legal */
.v1__footer-theme {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.v1__footer-theme-label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .4);
}
@media (max-width: 640px) {
	.v1__footer-theme { width: 100%; justify-content: flex-start; }
}

/* ============================================================
   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__proc-head,
	.v1__team-head { grid-template-columns: 1fr; gap: 28px; align-items: start; }
	.v1__team-grid { grid-template-columns: repeat(2, 1fr); }
	.v1__proc-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__proc,
	.v1__team { padding: 96px 0; }
	.v1__cta { padding: 72px 0; }
	.v1__team-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
	.v1__proc-grid { grid-template-columns: 1fr; }
	.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__proc-head 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 { letter-spacing: .12em; font-size: 10px; flex-wrap: wrap; }

	/* 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 {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	color: rgba(255,255,255,.4);
	text-transform: uppercase;
	padding: 24px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.pv1__crumb a {
	color: var(--accent);
	cursor: pointer;
	transition: color .15s;
}
.pv1__crumb a:hover { color: var(--cyan); }
.pv1__crumb span {
	margin: 0 12px;
	color: rgba(255,255,255,.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(255,255,255,.6);
}

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

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

.pv1__h1 {
	font-family: var(--grotesk);
	font-weight: 900;
	font-size: clamp(3.5rem, 9vw, 8.5rem);
	line-height: .86;
	letter-spacing: -.04em;
	text-transform: uppercase;
	color: var(--white);
}
.pv1__h1 em {
	font-style: italic;
	font-weight: 400;
	font-family: var(--serif);
	text-transform: none;
	color: var(--cyan);
	letter-spacing: -.02em;
}
.pv1__h1 .ghost {
	color: rgba(255,255,255,.18);
}

.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);
}
.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;
}
.abt__story-left h2 i { font-style: italic; font-weight: 400; }
.abt__story-left p {
	font-size: 17px;
	line-height: 1.65;
	color: rgba(255,255,255,.7);
	margin-bottom: 20px;
	max-width: 56ch;
}
.abt__story-left p.lead {
	font-size: 19px;
	color: rgba(255,255,255,.85);
	margin-bottom: 28px;
}
.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);
}
.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;
}
.abt__principles h2 i { font-style: italic; font-weight: 400; }
.abt__pgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.08);
}
.abt__p {
	background: var(--ink);
	padding: 36px 32px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.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;
}
.abt__p p {
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255,255,255,.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 founder card — explicit colour for light theme */
	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);
	background: rgba(255,255,255,.02);
	border-radius: 4px;
}
.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;
	color: rgba(255,255,255,.75);
	max-width: 70ch;
	margin-bottom: 24px;
}
.abt__bench-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px 32px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .08em;
	color: rgba(255,255,255,.65);
	text-transform: uppercase;
}
.abt__bench-list li::before {
	content: '· ';
	color: var(--cyan);
}

.abt__numbers {
	padding: 140px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.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;
}
.abt__numbers h2 i { font-style: italic; font-weight: 400; }
.abt__num-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);
}
.abt__n {
	background: var(--ink);
	padding: 40px 32px;
}
.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(255,255,255,.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;
	color: rgba(255,255,255,.6);
	line-height: 1.55;
}

/* ============================================================
   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;
}
.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;
}
.osp__hero h1 em { font-style: italic; font-weight: 400; }
.osp__hero h1 .acc { color: var(--accent); }
.osp__hero .deck {
	font-family: var(--serif);
	font-style: italic;
	font-size: 24px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .75);
	max-width: 54ch;
	margin: 0 auto;
}

.osp__pillars {
	padding: 140px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.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;
}
.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;
}
.osp__pillar:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }

.osp__pillar-num {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	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;
	color: rgba(255, 255, 255, .4);
	text-transform: uppercase;
	line-height: 1.7;
}
.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;
	color: var(--white);
	margin-bottom: 24px;
	max-width: 54ch;
}
.osp__pillar-body {
	color: rgba(255, 255, 255, .7);
	font-size: 16px;
	line-height: 1.65;
	max-width: 54ch;
	margin-bottom: 18px;
}
.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;
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid rgba(240, 192, 64, .35);
	padding-bottom: 4px;
	transition: color .15s, border-color .15s, gap .15s;
}
.osp__pillar-link:hover { color: var(--white); border-bottom-color: var(--white); gap: 14px; }
.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); }
html[data-theme="light"] .osp__pillar-link { color: var(--flame); border-bottom-color: rgba(240,101,34,.35); }
html[data-theme="light"] .osp__pillar-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* 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. */
html[data-theme="light"] .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;
}
html[data-theme="light"] .osp__pillar-left .osp__pillar-meta {
	color: rgba(255, 255, 255, .55);
}
@media (max-width: 720px) {
	html[data-theme="light"] .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 {
	font-family: var(--grotesk);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	text-transform: uppercase;
	letter-spacing: -.03em;
	text-align: center;
	margin-bottom: 18px;
}
.osp__loop h2 em { font-style: normal; color: var(--cyan); }
.osp__loop p.deck {
	text-align: center;
	color: rgba(255, 255, 255, .65);
	max-width: 48ch;
	margin: 0 auto 60px;
	font-size: 17px;
	line-height: 1.55;
}
.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 step card — explicit colour for light theme */
	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;
	color: var(--cyan);
	text-transform: uppercase;
	margin-bottom: 14px;
}
.osp__loop-step h4 {
	font-family: var(--grotesk);
	font-weight: 800;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: -.02em;
	line-height: 1;
	margin-bottom: 14px;
}
.osp__loop-step p {
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .6);
}
.osp__loop-step .num {
	font-family: var(--grotesk);
	font-weight: 900;
	font-size: 80px;
	line-height: .85;
	letter-spacing: -.05em;
	color: rgba(255, 255, 255, .08);
	align-self: flex-end;
}

@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);
}
.svi__intro .container {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 60px;
	align-items: end;
}
.svi__intro-copy {
	color: rgba(255, 255, 255, .7);
	font-size: 18px;
	line-height: 1.6;
	max-width: 50ch;
}
.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;
	color: rgba(255, 255, 255, .4);
	text-transform: uppercase;
	margin-top: 8px;
}

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

.svi__num {
	font-family: var(--mono);
	font-size: 13px;
	color: rgba(255, 255, 255, .4);
	letter-spacing: .08em;
}
.svi__name {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 32px;
	letter-spacing: -.015em;
	line-height: 1.1;
	color: var(--white);
}
.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;
	color: rgba(255, 255, 255, .5);
	text-transform: uppercase;
	margin-top: 8px;
	font-weight: 400;
}
.svi__desc {
	color: rgba(255, 255, 255, .7);
	font-size: 15px;
	line-height: 1.55;
	max-width: 48ch;
}
.svi__price {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--accent);
	letter-spacing: .06em;
	text-align: right;
}
.svi__price strong {
	display: block;
	font-family: var(--serif);
	font-weight: 900;
	font-size: 28px;
	color: var(--white);
	letter-spacing: -.015em;
	margin-bottom: 4px;
}
.svi__arrow {
	font-size: 24px;
	color: rgba(255, 255, 255, .4);
	text-align: right;
	transition: transform .25s, color .25s;
}
.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);
}
.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 price card — explicit colour for light theme */
}
.svp__price-card .from {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .18em;
	color: var(--accent);
	text-transform: uppercase;
	margin-bottom: 12px;
}
.svp__price-card .amount {
	font-family: var(--serif);
	font-weight: 900;
	font-size: 48px;
	letter-spacing: -.025em;
	line-height: 1;
	color: var(--white);
}
.svp__price-card .amount .unit {
	font-size: .4em;
	color: rgba(255, 255, 255, .4);
	font-weight: 700;
}
.svp__price-card .meta {
	font-size: 13px;
	color: rgba(255, 255, 255, .55);
	margin-top: 8px;
	line-height: 1.55;
}

.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 glass cell — explicit colour for light theme */
	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);
}
.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;
}
.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); /* glass card stays dark in both themes — explicit so light mode doesn't 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;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.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;
}
.svp__faq h2 em { font-style: normal; color: var(--cyan); }
.svp__faq-list {
	display: flex;
	flex-direction: column;
}
.svp__faq-item {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 28px 0;
}
.svp__faq-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.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;
}
.svp__faq-item .plus {
	font-family: var(--mono);
	font-size: 24px;
	color: var(--cyan);
	line-height: 1;
	transition: transform .2s;
}
.svp__faq-item[open] .plus { transform: rotate(45deg); }
.svp__faq-item .a {
	color: rgba(255, 255, 255, .7);
	font-size: 15px;
	line-height: 1.65;
	max-width: 62ch;
	margin-top: 14px;
}

.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 related card — explicit colour for light theme */
	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 .num {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .4);
	text-transform: uppercase;
	margin-bottom: 24px;
}
.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-card .arrow {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--accent);
	letter-spacing: .06em;
}

/* ============================================================
   BLA — Blog archive (journal grid)
   ============================================================ */

.bla__filters {
	padding: 32px 0 0;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}
.bla__filters .lbl {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .4);
	text-transform: uppercase;
}
.bla__chip {
	padding: 8px 16px;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: transparent;
	color: rgba(255, 255, 255, .75);
	font-size: 13px;
	cursor: pointer;
	transition: all .15s;
}
.bla__chip:hover { border-color: rgba(255, 255, 255, .3); color: var(--white); }
.bla__chip.on { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 600; }

.bla__feat {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 48px;
	padding: 60px 0 80px;
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.bla__feat .pic {
	aspect-ratio: 4/3;
	border-radius: 14px;
	overflow: hidden;
	position: relative;
	background: linear-gradient(135deg, var(--cyan), var(--green));
}
.bla__feat .pic::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;
}
.bla__feat .badge {
	position: absolute;
	top: 18px;
	left: 18px;
	background: rgba(13, 13, 13, .85);
	color: var(--accent);
	font-family: var(--mono);
	font-size: 11px;
	padding: 6px 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: 100px;
	z-index: 2;
}
.bla__feat .cat {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--accent);
	text-transform: uppercase;
	margin-bottom: 20px;
}
.bla__feat h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2rem, 4vw, 3rem);
	letter-spacing: -.025em;
	line-height: 1.05;
	margin-bottom: 24px;
}
.bla__feat h2 i { font-style: italic; font-weight: 400; }
.bla__feat .ex {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .65);
	margin-bottom: 32px;
	max-width: 48ch;
}
.bla__feat .meta {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .5);
	text-transform: uppercase;
}

.bla__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	padding: 80px 0;
}
.bla__post {
	display: flex;
	flex-direction: column;
	gap: 18px;
	transition: transform .25s;
	color: inherit;
}
.bla__post:hover { transform: translateY(-4px); }
.bla__post .pic {
	aspect-ratio: 4/3;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	background: var(--dark);
}
.bla__post .pic::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;
}
.bla__post:nth-child(6n+1) .pic { background: linear-gradient(135deg, var(--cyan), var(--green)); }
.bla__post:nth-child(6n+2) .pic { background: linear-gradient(135deg, var(--amber), var(--flame)); }
.bla__post:nth-child(6n+3) .pic { background: linear-gradient(135deg, var(--lime), var(--yellow)); }
.bla__post:nth-child(6n+4) .pic { background: linear-gradient(135deg, var(--tan), var(--flame)); }
.bla__post:nth-child(6n+5) .pic { background: linear-gradient(135deg, var(--green), var(--cyan)); }
.bla__post:nth-child(6n+6) .pic { background: linear-gradient(135deg, var(--flame), var(--amber)); }
.bla__post .pic .cat {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(13, 13, 13, .85);
	color: var(--white);
	font-family: var(--mono);
	font-size: 10px;
	padding: 5px 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: 100px;
	z-index: 2;
}
.bla__post h3 {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -.015em;
	line-height: 1.2;
	transition: color .2s;
}
.bla__post:hover h3 { color: var(--accent); }
.bla__post .ex {
	font-size: 14px;
	color: rgba(255, 255, 255, .6);
	line-height: 1.55;
}
.bla__post .meta {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .4);
	text-transform: uppercase;
}

.bla__pager {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 48px 0;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .5);
	text-transform: uppercase;
}
.bla__pager .pages {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.bla__pager .pages a, .bla__pager .pages span {
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 6px;
	color: rgba(255, 255, 255, .7);
}
.bla__pager .pages a.on, .bla__pager .pages .current {
	background: var(--accent);
	color: var(--ink);
	border-color: var(--accent);
}

/* ============================================================
   BLP — Blog single (long-form reading)
   ============================================================ */

.blp__hero {
	padding: 80px 0 60px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	text-align: center;
}
.blp__hero .cat {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--accent);
	text-transform: uppercase;
	margin-bottom: 24px;
}
.blp__hero h1 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(2.5rem, 5.5vw, 5rem);
	letter-spacing: -.025em;
	line-height: 1.02;
	max-width: 22ch;
	margin: 0 auto 28px;
}
.blp__hero h1 i { font-style: italic; font-weight: 400; }
.blp__hero .deck {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .7);
	max-width: 48ch;
	margin: 0 auto 48px;
}
.blp__byline {
	display: flex;
	justify-content: center;
	gap: 16px;
	align-items: center;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	color: rgba(255, 255, 255, .5);
	text-transform: uppercase;
	flex-wrap: wrap;
}
.blp__byline .av {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--flame), var(--amber));
	filter: grayscale(.4);
}
.blp__byline strong {
	color: var(--white);
	font-weight: 600;
	margin-left: 8px;
}

.blp__feature {
	aspect-ratio: 21/9;
	background: linear-gradient(135deg, var(--cyan), var(--green));
	position: relative;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	overflow: hidden;
}
.blp__feature::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;
}
.blp__feature .cap {
	position: absolute;
	bottom: 24px;
	right: 32px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .85);
	text-transform: uppercase;
}

.blp__body {
	padding: 80px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.blp__body .container {
	display: grid;
	grid-template-columns: 220px minmax(0, 720px) 220px;
	gap: 48px;
	align-items: start;
}
.blp__body .article {
	font-family: var(--serif);
	font-size: 19px;
	line-height: 1.75;
	color: rgba(255, 255, 255, .85);
	min-width: 0;
}
.blp__body .article p:first-of-type::first-letter {
	font-family: var(--serif);
	font-weight: 900;
	float: left;
	font-size: 88px;
	line-height: .85;
	color: var(--accent);
	padding: 8px 14px 0 0;
	font-style: italic;
}
.blp__body .article p { margin-bottom: 24px; }
.blp__body .article h2 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: 34px;
	letter-spacing: -.02em;
	margin: 48px 0 20px;
	color: var(--white);
}
.blp__body .article h2 em { font-style: italic; font-weight: 400; color: var(--accent); }
.blp__body .article h3 {
	font-family: var(--grotesk);
	font-weight: 800;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: -.01em;
	margin: 32px 0 14px;
	color: var(--white);
}
.blp__body .article blockquote {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.35;
	color: var(--white);
	border-left: 4px solid var(--accent);
	padding: 8px 0 8px 24px;
	margin: 32px 0;
	letter-spacing: -.005em;
}
.blp__body .article ul {
	margin: 24px 0 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
}
.blp__body .article ul li {
	padding-left: 14px;
	position: relative;
	font-size: 17px;
	color: rgba(255, 255, 255, .8);
}
.blp__body .article ul li::before {
	content: '→';
	position: absolute;
	left: -8px;
	color: var(--accent);
	font-family: var(--mono);
	font-size: 14px;
	top: 6px;
}
.blp__body .article a {
	color: var(--cyan);
	border-bottom: 1px solid rgba(68, 198, 239, .4);
}

.blp__body .toc {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .5);
	text-transform: uppercase;
	position: sticky;
	top: 24px;
	align-self: start;
	padding-right: 24px;
	text-align: right;
}
.blp__body .toc h5 {
	font-size: 10px;
	color: var(--accent);
	margin-bottom: 14px;
	letter-spacing: .18em;
}
.blp__body .toc ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.blp__body .toc li {
	cursor: pointer;
	line-height: 1.5;
	color: rgba(255, 255, 255, .6);
}
.blp__body .toc li.on { color: var(--white); }

.blp__body .share {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .5);
	text-transform: uppercase;
	position: sticky;
	top: 24px;
	align-self: start;
	padding-left: 24px;
}
.blp__body .share h5 {
	font-size: 10px;
	color: var(--accent);
	margin-bottom: 14px;
	letter-spacing: .18em;
}
.blp__body .share a {
	display: block;
	padding: 8px 0;
	color: rgba(255, 255, 255, .7);
	cursor: pointer;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.blp__related {
	padding: 120px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.blp__related h3 {
	font-family: var(--grotesk);
	font-weight: 900;
	font-size: clamp(2rem, 4vw, 3rem);
	text-transform: uppercase;
	letter-spacing: -.03em;
	line-height: 1;
	margin-bottom: 48px;
}
.blp__related h3 em { font-style: normal; color: var(--accent); }
.blp__related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

/* ============================================================
   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__price, .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; padding: 0; text-align: left; max-width: 720px; margin: 0 auto; }
	.blp__related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.svi__list, .svi__intro, .svp__inclusions, .svp__faq, .svp__related,
	.bla__feat, .bla__grid, .blp__body, .blp__related { padding-left: 0; padding-right: 0; }
	.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;
	color: rgba(255, 255, 255, 0.75);
	max-width: 50ch;
	margin-left: 0 !important; /* override FSE constrained-layout auto-centering */
	margin-right: auto !important;
	margin-bottom: 32px;
	text-align: left;
}
.site-main.is-404 .wp-block-buttons {
	margin-left: 0 !important;
	margin-right: auto !important;
	justify-content: flex-start;
}
html[data-theme="light"] .site-main.is-404 p,
html[data-theme="light"] .site-main.is-404 .wp-block-paragraph {
	color: rgba(13, 13, 13, .75);
}

/* 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%;
	background: rgba(255, 255, 255, .04);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
	flex: 0 0 44px;
}
.nav-hamburger span {
	display: block;
	width: 18px;
	height: 1.5px;
	background: var(--white);
	transition: transform .2s;
}
.nav-hamburger span:nth-child(2) { width: 12px; }
html[data-theme="light"] .nav-hamburger {
	border-color: rgba(13, 13, 13, .15);
	background: var(--white);
}
html[data-theme="light"] .nav-hamburger span { background: var(--ink); }

@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);
	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__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; }

/* ---- Mega menu in DARK theme ---- */
html:not([data-theme="light"]) .mega {
	background: var(--ink);
	color: var(--white);
	border-bottom-color: rgba(255, 255, 255, .1);
}
html:not([data-theme="light"]) .mega__bar {
	border-bottom-color: rgba(255, 255, 255, .08);
}
html:not([data-theme="light"]) .mega__brand { color: var(--white); }
html:not([data-theme="light"]) .mega__close {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .12);
	color: var(--white);
}
html:not([data-theme="light"]) .mega__close:hover { border-color: var(--accent); color: var(--accent); }
html:not([data-theme="light"]) .mega__clue { color: rgba(255, 255, 255, .5); }
html:not([data-theme="light"]) .mega__search {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .12);
}
html:not([data-theme="light"]) .mega__search:focus-within { border-color: var(--accent); }
html:not([data-theme="light"]) .mega__search-icon { color: var(--accent); }
html:not([data-theme="light"]) .mega__search input { color: var(--white); }
html:not([data-theme="light"]) .mega__search input::placeholder { color: rgba(255, 255, 255, .5); }
html:not([data-theme="light"]) .mega__search kbd {
	background: rgba(255, 255, 255, .08);
	color: rgba(255, 255, 255, .65);
}
html:not([data-theme="light"]) .mega__grid {
	border-top-color: rgba(255, 255, 255, .1);
}
html:not([data-theme="light"]) .mega__col { border-right-color: rgba(255, 255, 255, .1); }
html:not([data-theme="light"]) .mega__col-head .pill { color: rgba(255, 255, 255, .45); }
html:not([data-theme="light"]) .mega__col-head .pill--letter { color: var(--cyan); }
html:not([data-theme="light"]) .mega__col-h3 { color: var(--white); }
html:not([data-theme="light"]) .mega__promise { color: rgba(255, 255, 255, .65); }
html:not([data-theme="light"]) .mega__illus {
	border-top-color: rgba(255, 255, 255, .06);
	border-bottom-color: rgba(255, 255, 255, .06);
}
/* Halftone dots/lines + flame SVG accents are dark-baked; in dark theme we
   want them inverted. Use filter to flip. */
html:not([data-theme="light"]) .mega__illus svg { filter: invert(1) hue-rotate(180deg); }
/* Re-correct the flame stroke (which the invert+hue-rotate would shift). */
html:not([data-theme="light"]) .mega__illus svg circle[stroke="#F06522"],
html:not([data-theme="light"]) .mega__illus svg line[stroke="#F06522"],
html:not([data-theme="light"]) .mega__illus svg path[stroke="#F06522"],
html:not([data-theme="light"]) .mega__illus svg circle[fill="#F06522"],
html:not([data-theme="light"]) .mega__illus svg text[fill="#F06522"] {
	/* The filter applies to the whole svg, no clean way to exempt elements;
	   rely on the inversion producing acceptable contrast. */
}
html:not([data-theme="light"]) .mega__services li,
html:not([data-theme="light"]) .mega__services li:last-child {
	border-color: rgba(255, 255, 255, .08);
}
html:not([data-theme="light"]) .mega__services a { color: var(--white); }
html:not([data-theme="light"]) .mega__services a:hover { color: var(--cyan); }
html:not([data-theme="light"]) .mega__services small { color: rgba(255, 255, 255, .4); }
html:not([data-theme="light"]) .mega__foot {
	border-top-color: rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .55);
}
html:not([data-theme="light"]) .mega__foot a { color: var(--white); }
html:not([data-theme="light"]) .mega__foot a:hover { color: var(--cyan); }

/* ---- 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);
	}
	html:not([data-theme="light"]) .mega__col { border-top-color: rgba(255, 255, 255, .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__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 */
.pillar-manifesto {
	padding: 120px 60px;
	background: var(--white);
	border-bottom: 1px solid rgba(13, 13, 13, .1);
}
.pillar-manifesto-inner {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 80px;
}
.pillar-manifesto-eyebrow {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--p-tone);
	font-weight: 700;
}
.pillar-manifesto-eyebrow span {
	display: block;
	margin-top: 6px;
	color: rgba(13, 13, 13, .45);
	font-weight: 400;
}
.pillar-stanza {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 32px;
	padding: 32px 0;
	border-top: 1px solid rgba(13, 13, 13, .1);
	align-items: start;
}
.pillar-stanza:first-child { padding-top: 0; border-top: none; }
.pillar-stanza .num {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--p-tone);
	font-weight: 700;
	padding-top: 10px;
}
.pillar-stanza p {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(1.6rem, 2.4vw, 2rem);
	line-height: 1.28;
	letter-spacing: -.01em;
	color: var(--ink);
	max-width: 30ch;
}
.pillar-stanza p i { font-style: italic; color: var(--p-tone); font-weight: 900; }

/* 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(--serif);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4rem);
	letter-spacing: -.025em;
	line-height: .95;
}
.pillar-services-head h2 i { font-style: italic; font-weight: 400; color: var(--p-tone); }
.pillar-services-head .count {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .55);
	flex-shrink: 0;
}
.pillar-services-list { max-width: 1280px; margin: 0 auto; }

.pillar-srow {
	display: grid;
	grid-template-columns: 80px 1.2fr 2fr 200px 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 {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	color: rgba(13, 13, 13, .45);
	font-weight: 700;
}
.pillar-srow h3 {
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	letter-spacing: -.02em;
	line-height: 1;
}
.pillar-srow h3 i { font-style: italic; font-weight: 400; 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 {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
	background: rgba(13, 13, 13, .06);
	padding: 6px 12px;
	border-radius: 100px;
	justify-self: start;
	align-self: center;
	font-weight: 700;
}
.pillar-srow .stag.r { background: var(--p-tone); color: var(--white); }
.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;
}
.pillar-jcard .jthumb {
	aspect-ratio: 4/3;
	border: 1px solid rgba(13, 13, 13, .1);
	border-radius: 8px;
	overflow: hidden;
	background: var(--off);
	position: relative;
}
.pillar-jcard .jthumb svg { width: 100%; height: 100%; display: block; }
.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: auto 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. */
html[data-theme="light"] .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; }
}
@media (max-width: 420px) {
	.pillar-hero-word { font-size: clamp(3.2rem, 17vw, 5rem); }
	.pillar-manifesto, .pillar-services, .pillar-process, .pillar-engagement, .pillar-journal { padding: 80px 32px; }
	.pillar-manifesto-inner { grid-template-columns: 1fr; gap: 36px; }
	.pillar-srow { grid-template-columns: 60px 1fr 1fr 32px; gap: 16px; }
	.pillar-srow p { grid-column: 2 / span 2; }
	.pillar-srow .stag { grid-column: 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-engagement-grid { grid-template-columns: 1fr; }
	.pillar-journal-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
	.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: 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, .pillar-srow .stag { 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 (HubSpot meetings 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 HubSpot
   iframe (which renders on cream) 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 HubSpot 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 {
	margin: 16px auto 0;
	text-align: center;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(13, 13, 13, .55);
}
.cn__booker-fallback a {
	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 HubSpot's calendar 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;
}
.cn__form-head h2 i { font-style: italic; font-weight: 400; }
.cn__form-head p {
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .7);
	margin-bottom: 36px;
	max-width: 50ch;
}

.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(255, 255, 255, .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(255, 255, 255, .55);
}
.cn__field label span {
	color: var(--accent);
	margin-left: 2px;
}
.cn__field input,
.cn__field textarea {
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	padding: 14px 18px;
	color: var(--white);
	font-family: var(--sans);
	font-size: 15px;
	transition: border-color .15s, background .15s;
	width: 100%;
}
.cn__field input:focus,
.cn__field textarea:focus {
	outline: none;
	border-color: var(--accent);
	background: rgba(255, 255, 255, .05);
}
.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;
	color: rgba(255, 255, 255, .45);
	line-height: 1.5;
	margin-top: 8px;
	max-width: 56ch;
}
.cn__privacy a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- 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 {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	font-weight: 400;
	margin: 0;
	padding: 0;
}
.cn__form--gf .gfield_required {
	color: var(--accent);
	margin-left: 2px;
}
.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 {
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	padding: 14px 18px;
	color: var(--white);
	font-family: var(--sans);
	font-size: 15px;
	transition: border-color .15s, background .15s;
	width: 100%;
	box-shadow: none;
}
.cn__form--gf .ginput_container input:focus,
.cn__form--gf .ginput_container textarea:focus {
	outline: none;
	border-color: var(--accent);
	background: rgba(255, 255, 255, .05);
	box-shadow: none;
}
.cn__form--gf .ginput_container textarea {
	resize: vertical;
	min-height: 120px;
	line-height: 1.55;
}

.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(--white);
}
.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 aside — explicit colour for light theme */
	position: sticky;
	top: 24px;
}
.cn__aside-h3 {
	font-family: var(--grotesk);
	font-weight: 800;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: -.01em;
	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 {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .5);
	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 {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .55);
	text-transform: uppercase;
	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 {
	margin: 0;
	font-family: var(--mono);
	color: rgba(255, 255, 255, .55);
	letter-spacing: .04em;
	white-space: nowrap;
}

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

/* Light theme overrides */
html[data-theme="light"] .cn__main {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .cn__form-head h2 { color: var(--ink); }
html[data-theme="light"] .cn__form-head p { color: rgba(13, 13, 13, .7); }
html[data-theme="light"] .cn__field label { color: rgba(13, 13, 13, .55); }
html[data-theme="light"] .cn__field label span { color: var(--flame); }
html[data-theme="light"] .cn__field input,
html[data-theme="light"] .cn__field textarea {
	background: var(--white);
	border-color: rgba(13, 13, 13, .12);
	color: var(--ink);
}
html[data-theme="light"] .cn__field input:focus,
html[data-theme="light"] .cn__field textarea:focus {
	border-color: var(--flame);
	background: var(--white);
}
html[data-theme="light"] .cn__privacy { color: rgba(13, 13, 13, .55); }
html[data-theme="light"] .cn__privacy a { color: var(--flame); }
html[data-theme="light"] .cn__status p { color: rgba(13, 13, 13, .8); }

/* Gravity Forms — light-theme variant */
html[data-theme="light"] .cn__form--gf .gfield_label,
html[data-theme="light"] .cn__form--gf .gform-field-label {
	color: rgba(13, 13, 13, .55);
}
html[data-theme="light"] .cn__form--gf .gfield_required { color: var(--flame); }
html[data-theme="light"] .cn__form--gf .ginput_container input[type="text"],
html[data-theme="light"] .cn__form--gf .ginput_container input[type="email"],
html[data-theme="light"] .cn__form--gf .ginput_container textarea {
	background: var(--white);
	border-color: rgba(13, 13, 13, .12);
	color: var(--ink);
}
html[data-theme="light"] .cn__form--gf .ginput_container input:focus,
html[data-theme="light"] .cn__form--gf .ginput_container textarea:focus {
	border-color: var(--flame);
	background: var(--white);
}
html[data-theme="light"] .cn__form--gf .gform_validation_errors { color: var(--ink); }
html[data-theme="light"] .cn__aside-foot a { color: var(--flame); }

/* Aside card stays dark in light theme — matches founder cards on About */

/* 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; }
}

/* ============================================================
   THEME TOGGLE — fixed-position pill, bottom-right
   Switches html[data-theme="light"] on / off. Persists in localStorage.
   ============================================================ */

.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 56px;
	width: 56px;
	height: 28px;
	padding: 3px;
	border-radius: 100px;
	/* Footer is dark in both themes, so use dark-bar appearance regardless. */
	border: 1px solid rgba(255, 255, 255, .15);
	background: rgba(255, 255, 255, .04);
	cursor: pointer;
	transition: background .2s, border-color .2s;
	margin: 0;
	position: relative;
}
.theme-toggle:hover {
	border-color: rgba(255, 255, 255, .35);
}

.theme-toggle__track {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 0 8px;
}

.theme-toggle__thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--accent);
	transition: transform .25s cubic-bezier(.4, .8, .3, 1), background .2s;
}

.theme-toggle__icon {
	font-size: 11px;
	line-height: 1;
	font-family: var(--mono);
	color: rgba(255, 255, 255, .55);
	z-index: 1;
}
.theme-toggle__icon--moon { color: var(--ink); }
.theme-toggle__icon--sun  { color: rgba(255, 255, 255, .55); }

/* Footer stays dark in both themes — keep toggle dark-bar styled. */
/* (No light-mode override on .theme-toggle now that it lives in the dark footer.) */
html[data-theme="light"] .theme-toggle__thumb {
	transform: translateX(28px);
	background: var(--flame);
}
html[data-theme="light"] .theme-toggle__icon--moon { color: rgba(13, 13, 13, .4); }
html[data-theme="light"] .theme-toggle__icon--sun  { color: var(--white); }

/* ============================================================
   LIGHT MODE — html[data-theme="light"]
   Off-white field, ink text, flame as primary accent.
   OSOF / Process / flame-CTA / footer / dark cards stay dark
   as deliberate inverted anchors.
   ============================================================ */

html[data-theme="light"] body {
	background: var(--off);
	color: var(--ink);
}
html[data-theme="light"] {
	color-scheme: light;
}

/* ---- Buttons ---- */
html[data-theme="light"] .btn--accent {
	background: var(--flame);
	color: var(--white);
}
html[data-theme="light"] .btn--accent:hover {
	background: #d35817;
}
html[data-theme="light"] .btn--ghost {
	border-color: rgba(13, 13, 13, .25);
	color: var(--ink);
}
html[data-theme="light"] .btn--ghost:hover {
	border-color: var(--ink);
}

html[data-theme="light"] .skip-link {
	background: var(--flame);
	color: var(--white);
}

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

/* ---- Breadcrumb ---- */
html[data-theme="light"] .pv1__crumb {
	border-bottom-color: rgba(13, 13, 13, .1);
	color: rgba(13, 13, 13, .5);
}
html[data-theme="light"] .pv1__crumb a {
	color: var(--flame);
}
html[data-theme="light"] .pv1__crumb a:hover {
	color: var(--ink);
}
html[data-theme="light"] .pv1__crumb span {
	color: rgba(13, 13, 13, .25);
}
html[data-theme="light"] .pv1__crumb .pv1__crumb-aside {
	color: rgba(13, 13, 13, .6);
}

/* ---- Sub-page hero (pv1) ---- */
html[data-theme="light"] .pv1__hero-wrap {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .pv1__signal {
	color: var(--flame);
}
html[data-theme="light"] .pv1__signal::before {
	background: var(--flame);
	box-shadow: 0 0 16px rgba(240, 101, 34, .5);
}
html[data-theme="light"] .pv1__h1 {
	color: var(--ink);
}
html[data-theme="light"] .pv1__h1 em {
	color: var(--flame);
}
html[data-theme="light"] .pv1__h1 .ghost {
	color: rgba(13, 13, 13, .18);
}
html[data-theme="light"] .pv1__deck {
	color: rgba(13, 13, 13, .75);
	border-left-color: var(--flame);
}

/* ---- Homepage hero (v1) ---- */
html[data-theme="light"] .v1 {
	background: var(--off);
}
html[data-theme="light"] .v1__marker {
	color: var(--flame);
}
html[data-theme="light"] .v1__marker::before {
	background: var(--flame);
	box-shadow: 0 0 16px rgba(240, 101, 34, .5);
}
html[data-theme="light"] .v1__mono .l1 { color: var(--ink); }
html[data-theme="light"] .v1__mono .l2 { color: var(--flame); }
html[data-theme="light"] .v1__mono .l3 { color: rgba(13, 13, 13, .2); }
html[data-theme="light"] .v1__sub {
	border-top-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .v1__sub p {
	color: rgba(13, 13, 13, .75);
}

/* ---- Pillars section: theme-conditional. Default styling (dark) lives
   higher up in the file. These rules override into LIGHT MODE when the
   global theme toggle flips. -------------------------------------------- */
html[data-theme="light"] .v1__pillars {
	background: var(--off);
	color: var(--ink);
	border-bottom-color: rgba(13, 13, 13, .08);
}
html[data-theme="light"] .v1__pillars h2 { color: var(--ink); }
html[data-theme="light"] .v1__pillars h2 i { color: var(--flame); }
html[data-theme="light"] .v1__pillars-lede { color: rgba(13, 13, 13, .7); }
html[data-theme="light"] .v1__callout .num { color: rgba(13, 13, 13, .55); }
html[data-theme="light"] .v1__callout .ttl { color: var(--ink); }
html[data-theme="light"] .v1__callout .desc { color: rgba(13, 13, 13, .7); }
html[data-theme="light"] .v1__callout .stat { color: rgba(13, 13, 13, .5); }
html[data-theme="light"] .v1__callout .stat strong { color: var(--ink); }
/* Pinwheel SVG: flip white connector lines / pivot dots to ink in light mode */
html[data-theme="light"] .v1__pinwheel svg.five-svg line { stroke: rgba(13, 13, 13, .35); }
html[data-theme="light"] .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 in light mode. */
@media (max-width: 720px) {
	html[data-theme="light"] .v1__callout.cb-strategy .ttl,
	html[data-theme="light"] .v1__callout.cb-yellow .ttl { color: #0D0D0D; }
	html[data-theme="light"] .v1__callout.cb-strategy .stat strong,
	html[data-theme="light"] .v1__callout.cb-yellow .stat strong { color: #0D0D0D; }
}

/* ---- OSOF section: STAYS DARK as inverted anchor ----
   The OSOF tile cards remain dark on dark, against the off-white field above.
   .v1__osof already has a dark gradient bg — borders need re-darkening. */
html[data-theme="light"] .v1__osof {
	border-bottom-color: rgba(255, 255, 255, .08);
}

/* ---- Process section: STAYS DARK ----
   Force ink bg + white text so the step grid keeps reading correctly. */
html[data-theme="light"] .v1__proc {
	background: var(--ink);
	color: var(--white);
	border-bottom-color: rgba(255, 255, 255, .08);
}
html[data-theme="light"] .v1__proc-head h2 { color: var(--white); }
html[data-theme="light"] .v1__proc-head h2 em { color: var(--cyan); }
html[data-theme="light"] .v1__proc-head p { color: rgba(255, 255, 255, .65); }
/* Step cards are already var(--ink) bg with white text — keep them. */

/* ---- Team ---- */
html[data-theme="light"] .v1__team {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .v1__team-head h2 { color: var(--ink); }
html[data-theme="light"] .v1__team-head h2 em { color: var(--flame); }
html[data-theme="light"] .v1__team-head p { color: rgba(13, 13, 13, .6); }
html[data-theme="light"] .v1__m h4 { color: var(--ink); }
html[data-theme="light"] .v1__m .role { color: rgba(13, 13, 13, .55); }
html[data-theme="light"] .v1__team-more { color: var(--flame); }

/* ---- CTA row stays flame in both themes ---- */
/* No overrides needed. */

/* ---- Footer stays dark in both themes ---- */
/* No overrides needed. */

/* ---- About: story ---- */
html[data-theme="light"] .abt__story {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .abt__story-left h2 { color: var(--ink); }
html[data-theme="light"] .abt__story-left p { color: rgba(13, 13, 13, .7); }
html[data-theme="light"] .abt__story-left p.lead { color: var(--ink); }

/* ---- About: principles ---- */
html[data-theme="light"] .abt__principles {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .abt__principles h2 { color: var(--ink); }
html[data-theme="light"] .abt__pgrid {
	background: rgba(13, 13, 13, .1);
	border-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .abt__p { background: var(--off); }
html[data-theme="light"] .abt__p h4 { color: var(--ink); }
html[data-theme="light"] .abt__p p { color: rgba(13, 13, 13, .65); }

/* ---- About: founders cards & bench ----
   Founder cards stay dark for contrast against the off-white field.
   Bench card lightens. */
html[data-theme="light"] .abt__bench {
	background: rgba(13, 13, 13, .04);
	border-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .abt__bench p { color: rgba(13, 13, 13, .75); }
html[data-theme="light"] .abt__bench-list { color: rgba(13, 13, 13, .65); }

/* ---- About: numbers ---- */
html[data-theme="light"] .abt__numbers {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .abt__numbers h2 { color: var(--ink); }
html[data-theme="light"] .abt__num-grid {
	background: rgba(13, 13, 13, .1);
	border-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .abt__n { background: var(--off); }
html[data-theme="light"] .abt__n .lbl { color: rgba(13, 13, 13, .6); }
html[data-theme="light"] .abt__n .num sup { color: rgba(13, 13, 13, .55); }

/* ---- OSOF page ---- */
html[data-theme="light"] .osp__hero {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .osp__hero h1 { color: var(--ink); }
html[data-theme="light"] .osp__hero h1 .acc { color: var(--flame); }
html[data-theme="light"] .osp__hero .deck { color: rgba(13, 13, 13, .75); }
html[data-theme="light"] .osp__pillars {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .osp__pillars-head h2 { color: var(--ink); }
html[data-theme="light"] .osp__pillar {
	border-top-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .osp__pillar:last-child {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .osp__pillar-meta { color: rgba(13, 13, 13, .4); }
html[data-theme="light"] .osp__pillar-lead { color: var(--ink); }
html[data-theme="light"] .osp__pillar-body { color: rgba(13, 13, 13, .7); }
html[data-theme="light"] .osp__checks li { color: rgba(13, 13, 13, .78); }
html[data-theme="light"] .osp__checks li::before { color: var(--flame); }
/* OSP loop section stays dark (gradient → ink). */

/* ---- Services index ---- */
html[data-theme="light"] .svi__intro {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .svi__intro-copy { color: rgba(13, 13, 13, .7); }
html[data-theme="light"] .svi__intro-stat .lbl { color: rgba(13, 13, 13, .4); }
html[data-theme="light"] .svi__list {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .svi__row {
	border-top-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .svi__row:last-child {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .svi__row:hover {
	background: rgba(13, 13, 13, .03);
}
html[data-theme="light"] .svi__num   { color: rgba(13, 13, 13, .4); }
html[data-theme="light"] .svi__name  { color: var(--ink); }
html[data-theme="light"] .svi__name small { color: rgba(13, 13, 13, .5); }
html[data-theme="light"] .svi__desc  { color: rgba(13, 13, 13, .7); }
html[data-theme="light"] .svi__price { color: var(--flame); }
html[data-theme="light"] .svi__price strong { color: var(--ink); }
html[data-theme="light"] .svi__arrow { color: rgba(13, 13, 13, .4); }

/* ---- Service single ---- */
html[data-theme="light"] .svp__hero {
	border-bottom-color: rgba(13, 13, 13, .1);
}
/* Price card + meta-row stay dark — they're glass cards on the off-white field. */
html[data-theme="light"] .svp__inclusions {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .svp__inclusions h2 { color: var(--ink); }
/* Inclusions grid stays dark. */

html[data-theme="light"] .svp__faq {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .svp__faq h2 em { color: var(--flame); }
html[data-theme="light"] .svp__faq h2 { color: var(--ink); }
html[data-theme="light"] .svp__faq-item {
	border-top-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .svp__faq-item:last-child {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .svp__faq-item .q { color: var(--ink); }
html[data-theme="light"] .svp__faq-item .plus { color: var(--flame); }
html[data-theme="light"] .svp__faq-item .a { color: rgba(13, 13, 13, .7); }

/* Related cards stay dark — they're glass cards. */

/* ---- Blog archive ---- */
html[data-theme="light"] .bla__filters .lbl { color: rgba(13, 13, 13, .4); }
html[data-theme="light"] .bla__chip {
	border-color: rgba(13, 13, 13, .15);
	color: rgba(13, 13, 13, .7);
}
html[data-theme="light"] .bla__chip:hover {
	border-color: rgba(13, 13, 13, .4);
	color: var(--ink);
}
html[data-theme="light"] .bla__chip.on {
	background: var(--flame);
	border-color: var(--flame);
	color: var(--white);
}
html[data-theme="light"] .bla__feat {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .bla__feat .cat   { color: var(--flame); }
html[data-theme="light"] .bla__feat h2     { color: var(--ink); }
html[data-theme="light"] .bla__feat .ex    { color: rgba(13, 13, 13, .65); }
html[data-theme="light"] .bla__feat .meta  { color: rgba(13, 13, 13, .5); }
html[data-theme="light"] .bla__post h3     { color: var(--ink); }
html[data-theme="light"] .bla__post:hover h3 { color: var(--flame); }
html[data-theme="light"] .bla__post .ex    { color: rgba(13, 13, 13, .6); }
html[data-theme="light"] .bla__post .meta  { color: rgba(13, 13, 13, .4); }
html[data-theme="light"] .bla__pager {
	border-top-color: rgba(13, 13, 13, .1);
	color: rgba(13, 13, 13, .5);
}
html[data-theme="light"] .bla__pager .pages a,
html[data-theme="light"] .bla__pager .pages span {
	border-color: rgba(13, 13, 13, .12);
	color: rgba(13, 13, 13, .7);
}
html[data-theme="light"] .bla__pager .pages a.on,
html[data-theme="light"] .bla__pager .pages .current {
	background: var(--flame);
	color: var(--white);
	border-color: var(--flame);
}

/* ---- Blog single (article body) ---- */
html[data-theme="light"] .blp__hero {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .blp__hero .cat   { color: var(--flame); }
html[data-theme="light"] .blp__hero h1     { color: var(--ink); }
html[data-theme="light"] .blp__hero .deck  { color: rgba(13, 13, 13, .7); }
html[data-theme="light"] .blp__byline      { color: rgba(13, 13, 13, .5); }
html[data-theme="light"] .blp__byline strong { color: var(--ink); }
html[data-theme="light"] .blp__feature {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .blp__body {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .blp__body .article { color: rgba(13, 13, 13, .85); }
html[data-theme="light"] .blp__body .article p:first-of-type::first-letter {
	color: var(--flame);
}
html[data-theme="light"] .blp__body .article h2 { color: var(--ink); }
html[data-theme="light"] .blp__body .article h2 em { color: var(--flame); }
html[data-theme="light"] .blp__body .article h3 { color: var(--ink); }
html[data-theme="light"] .blp__body .article blockquote {
	color: var(--ink);
	border-left-color: var(--flame);
}
html[data-theme="light"] .blp__body .article ul li { color: rgba(13, 13, 13, .8); }
html[data-theme="light"] .blp__body .article ul li::before { color: var(--flame); }
html[data-theme="light"] .blp__body .article a {
	color: var(--flame);
	border-bottom-color: rgba(240, 101, 34, .4);
}
html[data-theme="light"] .blp__body .toc { color: rgba(13, 13, 13, .5); }
html[data-theme="light"] .blp__body .toc h5 { color: var(--flame); }
html[data-theme="light"] .blp__body .toc li { color: rgba(13, 13, 13, .6); }
html[data-theme="light"] .blp__body .toc li.on { color: var(--ink); }
html[data-theme="light"] .blp__body .share { color: rgba(13, 13, 13, .5); }
html[data-theme="light"] .blp__body .share h5 { color: var(--flame); }
html[data-theme="light"] .blp__body .share a {
	color: rgba(13, 13, 13, .7);
	border-bottom-color: rgba(13, 13, 13, .08);
}
html[data-theme="light"] .blp__related {
	border-bottom-color: rgba(13, 13, 13, .1);
}
html[data-theme="light"] .blp__related h3    { color: var(--ink); }
html[data-theme="light"] .blp__related h3 em { color: var(--flame); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   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;
	font-family: var(--serif);
	font-weight: 900;
	font-size: clamp(4rem, 14vw, 14rem);
	letter-spacing: -.04em;
	line-height: .9;
	color: var(--white);
	mix-blend-mode: difference;
	opacity: 0;
	animation: pb-word-in 1.2s 1.2s cubic-bezier(.2, .8, .2, 1) forwards;
}
.intro__word i { font-style: italic; font-weight: 400; }
@keyframes pb-word-in {
	from { opacity: 0; transform: translateY(40px) scale(.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.intro { 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. Light/dark aware: dark default (white-on-ink), light
   override flips to ink-on-off via html[data-theme="light"].
   ===================================================================== */

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

/* Hero */
.legal-body .legal-hero { padding: 100px 0 64px; border-bottom: 1px solid rgba(255,255,255,.08); }
.legal-body .legal-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin: 0 0 18px; }
.legal-body .legal-h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(40px, 5.6vw, 84px); letter-spacing: -.025em; line-height: 1.02; margin: 0 0 28px; color: var(--white); max-width: 18ch; }
.legal-body .legal-h1 em { font-style: italic; font-weight: 800; color: var(--cyan); }
.legal-body .legal-lede { font-family: var(--sans); font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: rgba(255,255,255,.78); max-width: 56ch; margin: 0 0 32px; }
.legal-body .legal-stamp { display: flex; gap: 24px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0; }
.legal-body .legal-stamp span + span::before { content: '·'; margin-right: 24px; color: rgba(255,255,255,.3); }

/* 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(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.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 6px 32px; position: relative; font-family: var(--sans); font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.65); text-decoration: none; transition: color .18s ease; }
.legal-body .legal-toc a::before { content: counter(legal-toc, decimal-leading-zero); position: absolute; left: 0; top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: rgba(255,255,255,.35); }
.legal-body .legal-toc a:hover { color: var(--cyan); }

.legal-body .legal-prose { font-family: var(--sans); font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.85); max-width: 70ch; }
.legal-body .legal-sec { padding: 0 0 48px; border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 48px; }
.legal-body .legal-sec:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.legal-body .legal-sec h2 { font-family: var(--serif); font-weight: 800; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.015em; line-height: 1.15; color: var(--white); margin: 0 0 20px; scroll-margin-top: 100px; }
.legal-body .legal-sec h3 { font-family: var(--grotesk); font-weight: 700; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; color: rgba(255,255,255,.65); margin: 28px 0 12px; }
.legal-body .legal-sec p { margin: 0 0 16px; }
.legal-body .legal-sec p:last-child { margin-bottom: 0; }
.legal-body .legal-sec a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal-body .legal-sec a:hover { color: var(--white); }
.legal-body .legal-sec strong, .legal-body .legal-sec b { color: var(--white); font-weight: 700; }
.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(--cyan); }

/* Cookie tables */
.legal-body .legal-table-wrap { overflow-x: auto; margin: 16px 0 24px; border: 1px solid rgba(255,255,255,.1); }
.legal-body .legal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.legal-body .legal-table th { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); background: rgba(255,255,255,.04); text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.12); font-weight: 500; }
.legal-body .legal-table td { padding: 14px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; color: rgba(255,255,255,.8); }
.legal-body .legal-table tr:last-child td { border-bottom: none; }
.legal-body .legal-table code { font-family: var(--mono); font-size: 12px; color: var(--cyan); background: rgba(68,198,239,.08); padding: 2px 6px; border-radius: 2px; word-break: break-word; }

/* Foot */
.legal-body .legal-foot { background: var(--off); color: var(--ink); padding: 80px 0; border-top: 1px solid rgba(13,13,13,.1); }
.legal-body .legal-foot-inner { max-width: 760px; text-align: center; }
.legal-body .legal-foot .legal-foot-h { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(13,13,13,.5); margin: 0 0 16px; }
.legal-body .legal-foot .legal-foot-p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; color: var(--ink); margin: 0 0 28px; max-width: 56ch; margin-left: auto; margin-right: auto; }
.legal-body .legal-foot .legal-foot-p a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.legal-body .legal-foot-cta { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; background: var(--ink); color: var(--white); font-family: var(--grotesk); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: background .18s ease; }
.legal-body .legal-foot-cta:hover { background: var(--flame); }

/* Light theme overrides */
html[data-theme="light"] .legal-body { background: var(--off); color: var(--ink); }
html[data-theme="light"] .legal-body .legal-hero { border-bottom-color: rgba(13,13,13,.1); }
html[data-theme="light"] .legal-body .legal-eyebrow { color: var(--flame); }
html[data-theme="light"] .legal-body .legal-h1 { color: var(--ink); }
html[data-theme="light"] .legal-body .legal-h1 em { color: var(--flame); }
html[data-theme="light"] .legal-body .legal-lede { color: rgba(13,13,13,.72); }
html[data-theme="light"] .legal-body .legal-stamp { color: rgba(13,13,13,.5); }
html[data-theme="light"] .legal-body .legal-stamp span + span::before { color: rgba(13,13,13,.3); }
html[data-theme="light"] .legal-body .legal-toc-h { color: rgba(13,13,13,.5); border-bottom-color: rgba(13,13,13,.12); }
html[data-theme="light"] .legal-body .legal-toc a { color: rgba(13,13,13,.7); }
html[data-theme="light"] .legal-body .legal-toc a::before { color: rgba(13,13,13,.4); }
html[data-theme="light"] .legal-body .legal-toc a:hover { color: var(--flame); }
html[data-theme="light"] .legal-body .legal-prose { color: rgba(13,13,13,.85); }
html[data-theme="light"] .legal-body .legal-sec { border-bottom-color: rgba(13,13,13,.08); }
html[data-theme="light"] .legal-body .legal-sec h2 { color: var(--ink); }
html[data-theme="light"] .legal-body .legal-sec h3 { color: rgba(13,13,13,.65); }
html[data-theme="light"] .legal-body .legal-sec a { color: var(--flame); }
html[data-theme="light"] .legal-body .legal-sec a:hover { color: var(--ink); }
html[data-theme="light"] .legal-body .legal-sec strong, html[data-theme="light"] .legal-body .legal-sec b { color: var(--ink); }
html[data-theme="light"] .legal-body .legal-sec li::marker { color: var(--flame); }
html[data-theme="light"] .legal-body .legal-table-wrap { border-color: rgba(13,13,13,.12); }
html[data-theme="light"] .legal-body .legal-table th { color: rgba(13,13,13,.55); background: rgba(13,13,13,.04); border-bottom-color: rgba(13,13,13,.12); }
html[data-theme="light"] .legal-body .legal-table td { color: rgba(13,13,13,.8); border-bottom-color: rgba(13,13,13,.06); }
html[data-theme="light"] .legal-body .legal-table code { color: var(--flame); background: rgba(240,101,34,.08); }
/* In light mode, the foot section becomes the dark anchor (inverted). */
html[data-theme="light"] .legal-body .legal-foot { background: var(--ink); color: var(--white); border-top-color: rgba(13,13,13,.1); }
html[data-theme="light"] .legal-body .legal-foot .legal-foot-h { color: rgba(255,255,255,.5); }
html[data-theme="light"] .legal-body .legal-foot .legal-foot-p { color: var(--white); }
html[data-theme="light"] .legal-body .legal-foot .legal-foot-p a { color: var(--white); }
html[data-theme="light"] .legal-body .legal-foot-cta { background: var(--flame); color: var(--white); }
html[data-theme="light"] .legal-body .legal-foot-cta:hover { background: var(--white); color: var(--ink); }

/* 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; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
	html[data-theme="light"] .legal-body .legal-toc { 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; }
}