/* ==========================================================================
   Leading Star — core stylesheet

   One accent colour (#E0201C, sampled from the logo), glass surfaces, and a
   geometric field that moves slowly behind the major sections. The logo's
   own gradient appears nowhere but the logo.

   01 Tokens · 02 Reset · 03 Type · 04 Layout · 05 Geometric field
   06 Glass · 07 Buttons & bits · 08 Header · 09 Hero · 10 Statement split
   11 Pillars · 12 Venture cards · 13 Venture sections · 14 Team
   15 Contact & form · 16 CTA · 17 Page hero · 18 Editorial · 19 404
   20 Footer · 21 Motion · 22 Responsive · 23 Reduced motion & print
   ========================================================================== */

/* 01 Tokens ------------------------------------------------------------- */

:root {
	/* Ground — warm-biased near-black, taken off the logo's maroon. */
	--ink: #0b0809;
	--ink-2: #120d0f;
	--ink-3: #191214;
	--ink-4: #221a1c;

	/*
	 * The single accent, in three roles. --accent fills and outlines;
	 * --accent-hover is DARKER so white button text keeps its contrast;
	 * --accent-text is lighter, for accent-coloured type on the dark ground
	 * where #e0201c only reaches 4.17:1.
	 */
	--accent: #e0201c;
	--accent-hover: #b81713;
	--accent-text: #ff5a48;
	--accent-text-hover: #ff8577;
	--accent-soft: rgba(224, 32, 28, 0.13);
	--accent-line: rgba(224, 32, 28, 0.32);

	/* Focus ring — functional, not a second brand colour. */
	--focus: #f8b810;

	--bone: #f5f1f0;
	--text: rgba(245, 241, 240, 0.66);
	--text-strong: #f5f1f0;
	--text-faint: rgba(245, 241, 240, 0.52);
	--line: rgba(245, 241, 240, 0.11);
	--line-soft: rgba(245, 241, 240, 0.06);

	--glass: rgba(245, 241, 240, 0.035);
	--glass-hover: rgba(245, 241, 240, 0.06);
	--blur: 16px;

	--font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--fs-xs: 0.78rem;
	--fs-sm: 0.925rem;
	--fs-base: 1.0625rem;
	--fs-lg: 1.1875rem;
	--fs-xl: 1.35rem;
	--fs-h3: clamp(1.35rem, 1.15rem + 0.8vw, 1.6rem);
	--fs-h2: clamp(1.9rem, 1.45rem + 1.9vw, 2.9rem);
	--fs-h1: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);
	--fs-statement: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4.5rem;
	--section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

	--radius-sm: 8px;
	--radius: 14px;
	--radius-lg: 20px;

	--ease: cubic-bezier(0.22, 0.75, 0.3, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	--shell: 1160px;
	--shell-narrow: 760px;
	--header-h: 72px;

	color-scheme: dark;
}

/* 02 Reset -------------------------------------------------------------- */

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

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

body {
	margin: 0;
	background: var(--ink);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

.site { overflow-x: clip; }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

a {
	color: var(--accent-text);
	text-decoration-color: var(--accent-line);
	text-underline-offset: 3px;
	transition: color 180ms var(--ease);
}

a:hover { color: var(--accent-text-hover); }

button { font: inherit; color: inherit; cursor: pointer; }

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

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

.skip-link {
	position: absolute;
	left: -9999px; top: 0;
	z-index: 999;
	padding: var(--space-3) var(--space-5);
	background: var(--accent);
	color: #fff;
	border-radius: 0 0 var(--radius-sm) 0;
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus { left: 0; color: #fff; }

.site-main { outline: none; }

/* 03 Type --------------------------------------------------------------- */

h1, h2, h3, h4 {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--text-strong);
	line-height: 1.12;
	letter-spacing: -0.022em;
	text-wrap: balance;
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

strong { color: var(--text-strong); font-weight: 600; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--text-faint);
}

/* A short accent rule rather than a dot — reads as a mark, not a bullet. */
.eyebrow__tick {
	width: 22px;
	height: 2px;
	background: var(--accent);
	flex: none;
}

.statement {
	margin: 0;
	font-size: var(--fs-statement);
	font-weight: 800;
	letter-spacing: -0.032em;
	line-height: 1.02;
	color: var(--text-strong);
}

.section-head {
	max-width: 58ch;
	margin-bottom: var(--space-8);
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
}

.section-head--center .eyebrow { justify-content: center; }

.section-head__title {
	font-size: var(--fs-h2);
	font-weight: 800;
	letter-spacing: -0.03em;
	margin-bottom: var(--space-4);
}

.section-head__lead {
	font-size: var(--fs-lg);
	margin: 0;
}

/* 04 Layout ------------------------------------------------------------- */

.shell {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.shell--narrow { max-width: var(--shell-narrow); }

.shell--split {
	display: grid;
	gap: clamp(2rem, 5vw, 5rem);
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: start;
}

.shell--split-even { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; }
.shell--split-form { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }

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

.section--pillars,
.section--beliefs,
.section--venture:not(.is-flipped) { background: var(--ink-2); }

.section--editor { padding-block: var(--space-8); }

/* 05 Geometric field ---------------------------------------------------- */

/*
 * One reusable composition of outlined shapes drifting behind a section.
 * Pure CSS: no canvas, no library, nothing to download. Every element is
 * hairline-weight so it reads as structure rather than decoration.
 */

.geo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.geo__grid {
	position: absolute;
	inset: -10%;
	background-image:
		linear-gradient(var(--line-soft) 1px, transparent 1px),
		linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, #000 10%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, #000 10%, transparent 75%);
	animation: geo-pan 60s linear infinite;
}

@keyframes geo-pan {
	to { transform: translate3d(72px, 72px, 0); }
}

.geo__ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid var(--line);
}

.geo__ring--1 {
	width: 46vw; aspect-ratio: 1;
	min-width: 340px;
	top: -18%; right: -10%;
	animation: geo-spin 70s linear infinite;
}

.geo__ring--1::after {
	content: "";
	position: absolute;
	inset: 12%;
	border-radius: 50%;
	border: 1px dashed var(--accent-line);
	opacity: 0.55;
}

.geo__ring--2 {
	width: 26vw; aspect-ratio: 1;
	min-width: 200px;
	bottom: -14%; left: -6%;
	border-color: var(--line-soft);
	animation: geo-spin 90s linear infinite reverse;
}

.geo__square {
	position: absolute;
	border: 1px solid var(--line);
	border-radius: 4px;
}

.geo__square--1 {
	width: 200px; height: 200px;
	top: 18%; left: 8%;
	animation: geo-tumble 44s var(--ease) infinite alternate;
}

.geo__square--2 {
	width: 120px; height: 120px;
	bottom: 14%; right: 14%;
	border-color: var(--accent-line);
	animation: geo-tumble 56s var(--ease) infinite alternate-reverse;
}

@keyframes geo-spin {
	to { transform: rotate(360deg); }
}

@keyframes geo-tumble {
	from { transform: rotate(12deg) translate3d(0, 0, 0); }
	to   { transform: rotate(-26deg) translate3d(30px, -36px, 0); }
}

/* A single soft accent beam, raked across the field. */
.geo__beam {
	position: absolute;
	top: -30%;
	left: 24%;
	width: 42%;
	height: 160%;
	transform: rotate(18deg);
	background: linear-gradient(90deg, transparent, rgba(224, 32, 28, 0.09), transparent);
	filter: blur(34px);
	animation: geo-sweep 26s var(--ease) infinite alternate;
}

@keyframes geo-sweep {
	to { transform: rotate(18deg) translateX(26%); opacity: 0.55; }
}

.geo__glow {
	position: absolute;
	width: 48vw; aspect-ratio: 1;
	min-width: 360px;
	top: -24%; left: 50%;
	margin-left: -24vw;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(224, 32, 28, 0.16), transparent 62%);
	filter: blur(60px);
}

/* Seeds — the same parts, re-composed, so no two sections repeat. */

.geo--b .geo__ring--1 { top: auto; bottom: -26%; right: auto; left: -12%; }
.geo--b .geo__ring--2 { bottom: auto; top: -8%; left: auto; right: 4%; }
.geo--b .geo__square--1 { top: auto; bottom: 12%; left: auto; right: 6%; }
.geo--b .geo__square--2 { bottom: auto; top: 16%; right: auto; left: 18%; }
.geo--b .geo__beam { left: 48%; transform: rotate(-14deg); }
.geo--b .geo__glow { top: auto; bottom: -32%; left: 18%; margin-left: 0; opacity: 0.7; }

.geo--c .geo__ring--1 { width: 34vw; top: -30%; right: 6%; }
.geo--c .geo__ring--2 { display: none; }
.geo--c .geo__square--1 { top: 40%; left: -4%; width: 160px; height: 160px; }
.geo--c .geo__square--2 { top: 8%; right: 22%; bottom: auto; }
.geo--c .geo__beam { left: 10%; width: 60%; }
.geo--c .geo__glow { left: 24%; margin-left: 0; }

.geo--d .geo__grid { background-size: 48px 48px; }
.geo--d .geo__ring--1 { width: 30vw; top: -22%; right: -6%; }
.geo--d .geo__ring--2 { width: 34vw; bottom: -30%; left: 12%; }
.geo--d .geo__square--1 { display: none; }
.geo--d .geo__square--2 { top: 22%; left: 6%; right: auto; bottom: auto; }
.geo--d .geo__beam { left: 30%; transform: rotate(-22deg); }
.geo--d .geo__glow { opacity: 0.85; }

/* 06 Glass -------------------------------------------------------------- */

.glass {
	background: var(--glass);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(120%);
	backdrop-filter: blur(var(--blur)) saturate(120%);
}

/* 07 Buttons & small parts ---------------------------------------------- */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.8rem 1.35rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.005em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 220ms var(--ease), border-color 220ms var(--ease), color 180ms var(--ease), transform 220ms var(--ease);
}

.btn:hover { transform: translateY(-1px); }

.btn__arrow { transition: transform 260ms var(--ease); flex: none; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); color: #fff; }

.btn--ghost { border-color: var(--line); color: var(--text-strong); }
.btn--ghost:hover { border-color: var(--bone); background: var(--glass-hover); color: var(--text-strong); }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--accent-text);
	text-decoration: none;
}

.link-arrow svg { transition: transform 260ms var(--ease); }
a:hover .link-arrow svg, .link-arrow:hover svg { transform: translateX(3px); }

.tag {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--text-faint);
}

.ticks { display: grid; gap: var(--space-3); }

.ticks li {
	position: relative;
	padding-left: 1.7rem;
	font-size: var(--fs-sm);
	color: var(--text-strong);
}

.ticks li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.5em;
	width: 10px; height: 6px;
	border-left: 1.5px solid var(--accent);
	border-bottom: 1.5px solid var(--accent);
	transform: rotate(-45deg);
}

.icon { flex: none; }

/* 08 Header ------------------------------------------------------------- */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 120;
	height: var(--header-h);
	display: flex;
	align-items: center;
	border-bottom: 1px solid transparent;
	transition: background-color 300ms var(--ease), border-color 300ms var(--ease), height 300ms var(--ease);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	width: 100%;
}

.site-header.is-stuck {
	height: 62px;
	background: rgba(11, 8, 9, 0.82);
	border-bottom-color: var(--line);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	flex: none;
}

.brand__mark { transition: transform 420ms var(--ease-out); }
.brand:hover .brand__mark { transform: scale(1.06); }

.brand__words { display: flex; flex-direction: column; line-height: 1.12; }

.brand__name {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--text-strong);
	white-space: nowrap;
}

.brand__sub {
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--text-faint);
	white-space: nowrap;
}

.nav { margin-inline: auto; }

.nav__list { display: flex; align-items: center; gap: var(--space-1); }

.nav__list a {
	display: block;
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
	transition: color 180ms var(--ease), background-color 180ms var(--ease);
}

.nav__list a:hover,
.nav__list .current-menu-item > a,
.nav__list .current_page_item > a {
	color: var(--text-strong);
	background: var(--glass-hover);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex: none;
}

.nav-toggle {
	display: none;
	width: 42px; height: 42px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: var(--glass);
}

.nav-toggle__bars { display: grid; gap: 5px; width: 18px; }

.nav-toggle__bars i {
	display: block;
	height: 1.5px;
	background: var(--bone);
	transition: transform 260ms var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(11, 8, 9, 0.7);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 300ms var(--ease);
}

.mobile-nav.is-open { opacity: 1; }

.mobile-nav__panel {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(380px, 88vw);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding: var(--space-5) var(--space-5) var(--space-7);
	background: var(--ink-2);
	border-left: 1px solid var(--line);
	transform: translateX(100%);
	transition: transform 400ms var(--ease-out);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }

.mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.mobile-nav__close {
	width: 40px; height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: var(--glass);
	color: var(--bone);
	font-size: 1.4rem;
	line-height: 1;
}

.mobile-nav__list { display: grid; }

.mobile-nav__list a {
	display: block;
	padding: 0.95rem 0.2rem;
	border-bottom: 1px solid var(--line-soft);
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--text-strong);
	text-decoration: none;
}

.mobile-nav__foot { margin-top: auto; display: grid; gap: var(--space-3); }

.mobile-nav__contact {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--text);
	font-size: var(--fs-sm);
	text-decoration: none;
	word-break: break-word;
}

/*
 * WordPress admin bar. The header is fixed at top:0, so for a logged-in
 * user it renders *behind* the admin bar. Offset it by the bar's height —
 * 32px on desktop, 46px below 782px where WordPress stacks it.
 */
body.admin-bar .site-header { top: 32px; }
body.admin-bar .mobile-nav { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
	body.admin-bar .mobile-nav { top: 46px; }
}

/* 09 Hero --------------------------------------------------------------- */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(88vh, 860px);
	padding-block: calc(var(--header-h) + 5rem) 5rem;
	isolation: isolate;
	overflow: hidden;
}

.hero__inner { max-width: 940px; }

.hero__title {
	font-size: var(--fs-h1);
	font-weight: 800;
	letter-spacing: -0.038em;
	line-height: 0.98;
	margin-bottom: var(--space-5);
}

.hero__lead {
	max-width: 54ch;
	font-size: var(--fs-lg);
	margin-bottom: var(--space-7);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* 10 Statement split ---------------------------------------------------- */

.why__lead .eyebrow { margin-bottom: var(--space-4); }

.why__body > p { font-size: var(--fs-lg); }
.why__body > p + p { margin-top: var(--space-5); }

/* A hairline that ties the two columns together on wide screens. */
@media (min-width: 900px) {
	.why__body {
		padding-left: clamp(1.5rem, 3vw, 3rem);
		border-left: 1px solid var(--line);
	}
}

/* 11 Pillars ------------------------------------------------------------ */

.pillars {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.pillar {
	position: relative;
	padding: var(--space-6);
	overflow: hidden;
	transition: background-color 300ms var(--ease), border-color 300ms var(--ease), transform 300ms var(--ease);
}

.pillar:hover {
	background: var(--glass-hover);
	border-color: var(--accent-line);
	transform: translateY(-3px);
}

.pillar__icon {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	margin-bottom: var(--space-5);
	border-radius: 12px;
	border: 1px solid var(--accent-line);
	background: var(--accent-soft);
	color: var(--accent);
}

.pillar__title {
	font-size: var(--fs-h3);
	margin-bottom: var(--space-3);
}

.pillar__body { font-size: var(--fs-sm); margin: 0; }

.pillar__num {
	position: absolute;
	top: var(--space-5);
	right: var(--space-6);
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--text-faint);
}

/* 12 Venture cards (home) ----------------------------------------------- */

.venture-cards {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.venture-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-6);
	color: var(--text);
	text-decoration: none;
	transition: background-color 300ms var(--ease), border-color 300ms var(--ease), transform 300ms var(--ease);
}

.venture-card:hover {
	background: var(--glass-hover);
	border-color: var(--accent-line);
	transform: translateY(-3px);
	color: var(--text);
}

.venture-card__icon {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	margin-bottom: var(--space-5);
	border-radius: 14px;
	border: 1px solid var(--line);
	color: var(--accent);
}

/*
 * Venture logos.
 *
 * Both ventures supply dark artwork — Black Flower is pure black, and
 * Citizen Health's navy measures 2.12:1 against this ground, well under
 * AA. Rather than recolour someone else's logo, the artwork sits on a
 * bone plate: the brands stay exactly as drawn, and the plate reads as a
 * deliberate brand block against the dark page.
 *
 * The tile keeps its 52px footprint so the card grid does not re-flow.
 */
.venture-card__icon--logo {
	background: var(--bone);
	border-color: transparent;
	padding: 7px;
}

.venture-card__icon--logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto; height: auto;
	object-fit: contain;
}

.venture-card__kicker {
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.venture-card__title {
	font-size: var(--fs-h3);
	margin-bottom: var(--space-3);
}

.venture-card__body { font-size: var(--fs-sm); margin-bottom: var(--space-6); }

.venture-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: auto;
	padding-top: var(--space-5);
	border-top: 1px solid var(--line-soft);
}

/* 13 Venture sections (Ventures page) ----------------------------------- */

.section--venture.is-flipped .shell--split { direction: rtl; }
.section--venture.is-flipped .shell--split > * { direction: ltr; }

/*
 * The lockup is sized by width, not height. Black Flower's is stacked and
 * Citizen Health's is horizontal; constraining height alone would leave one
 * of the two wordmarks too small to read.
 */
.venture__plate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4) var(--space-5);
	margin-bottom: var(--space-5);
	border-radius: 16px;
	background: var(--bone);
}

.venture__logo {
	display: block;
	width: auto; height: auto;
	max-width: clamp(160px, 22vw, 218px);
	max-height: 124px;
	object-fit: contain;
}

.venture__title {
	font-size: var(--fs-h2);
	font-weight: 800;
	letter-spacing: -0.03em;
	margin-bottom: var(--space-4);
}

.venture__lead {
	font-size: var(--fs-lg);
	color: var(--text-strong);
	margin-bottom: var(--space-5);
}

.venture__copy > p { font-size: var(--fs-base); }
.venture__copy > p + p { margin-top: var(--space-4); }

.venture__holding {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-6);
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--accent-line);
	border-radius: 999px;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--accent-text);
}

.venture__panel { padding: var(--space-6); }

.venture__mark {
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	margin-bottom: var(--space-5);
	border-radius: 14px;
	border: 1px solid var(--accent-line);
	background: var(--accent-soft);
	color: var(--accent);
}

.venture__panel-title {
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: var(--space-5);
}

/* 14 Team --------------------------------------------------------------- */

.team {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.person {
	padding: var(--space-6);
	transition: background-color 300ms var(--ease);
}

.person:hover { background: var(--glass-hover); }

.person__avatar {
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	margin-bottom: var(--space-5);
	border-radius: 50%;
	border: 1px solid var(--accent-line);
	background: var(--accent-soft);
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--accent-text);
}

.person--open .person__avatar {
	border-style: dashed;
	border-color: var(--line);
	background: transparent;
	color: var(--text-faint);
}

.person__name {
	font-size: var(--fs-xl);
	margin-bottom: var(--space-1);
}

.person__role {
	margin-bottom: var(--space-4);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent-text);
}

.person--open .person__role { color: var(--text-faint); }

.person__bio { font-size: var(--fs-sm); margin: 0; }

/* 15 Contact & form ----------------------------------------------------- */

.contact__form { padding: clamp(1.5rem, 3vw, 2.5rem); }

.contact__heading {
	font-size: var(--fs-xl);
	margin-bottom: var(--space-5);
}

.contact__list { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }

.contact__list li {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	font-size: var(--fs-sm);
}

.contact__list svg { color: var(--accent); margin-top: 4px; }
.contact__list a { color: var(--text-strong); text-decoration: none; }
.contact__list a:hover { color: var(--accent-text); }

.contact__hint {
	padding-top: var(--space-5);
	border-top: 1px solid var(--line-soft);
	font-size: var(--fs-sm);
	color: var(--text-faint);
}

.form { display: grid; gap: var(--space-5); }

.field { display: grid; gap: var(--space-2); margin: 0; }

.field label {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	font-family: var(--font-display);
	font-size: var(--fs-base);
	font-weight: 600;
	color: var(--text-strong);
}

.field__num {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--accent-text);
}

.field input,
.field textarea,
.search-form__field {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: rgba(11, 8, 9, 0.5);
	font-family: inherit;
	font-size: var(--fs-sm);
	color: var(--text-strong);
	transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.field textarea { resize: vertical; min-height: 110px; }

.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }

.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--accent); }

.field__error { font-size: var(--fs-xs); color: var(--accent-text); }
.field__error:empty { display: none; }

.form__honey {
	position: absolute;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}

.form__note { margin: 0; font-size: var(--fs-sm); color: var(--text-faint); }

.form__status:empty { display: none; }

.notice {
	padding: var(--space-4);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	border: 1px solid;
}

.notice--success { border-color: rgba(70, 200, 140, 0.4); background: rgba(70, 200, 140, 0.1); color: #8ef0c2; }
.notice--error { border-color: var(--accent-line); background: var(--accent-soft); color: #ff9e95; }

.btn.is-busy { opacity: 0.7; pointer-events: none; }

/* 16 CTA ---------------------------------------------------------------- */

.section--cta { background: var(--ink-2); border-top: 1px solid var(--line-soft); }

.cta { max-width: 52ch; }

.cta__title {
	font-size: var(--fs-h2);
	font-weight: 800;
	letter-spacing: -0.032em;
	margin-bottom: var(--space-4);
}

.cta__lead { font-size: var(--fs-lg); margin-bottom: var(--space-6); }

.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* 17 Page hero ---------------------------------------------------------- */

.page-hero {
	position: relative;
	padding-block: calc(var(--header-h) + clamp(3.5rem, 7vw, 6.5rem)) clamp(3rem, 6vw, 5.5rem);
	isolation: isolate;
	overflow: hidden;
}

.page-hero__inner { max-width: 820px; }

.page-hero__title {
	font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.75rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
	margin-bottom: var(--space-4);
}

.page-hero__lead {
	font-size: var(--fs-lg);
	max-width: 58ch;
	margin: 0;
}

/* 18 Editorial (blog, pages, search) ------------------------------------ */

.entry-content > * + * { margin-top: var(--space-4); }
.entry-content h2, .entry-content h3 { margin-top: var(--space-7); }

.entry-content ul, .entry-content ol {
	padding-left: 1.3rem;
	list-style: disc;
	display: grid;
	gap: var(--space-2);
}

.entry-content ol { list-style: decimal; }

.entry-content blockquote {
	margin: var(--space-6) 0;
	padding: var(--space-5);
	border-left: 2px solid var(--accent);
	background: var(--glass);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	color: var(--text-strong);
}

.entry-content img { border-radius: var(--radius); }

.entry-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.entry-content th, .entry-content td { padding: var(--space-3); border: 1px solid var(--line); text-align: left; }
.entry-content th { background: var(--glass); font-family: var(--font-display); color: var(--text-strong); }

.post-grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.post-card { overflow: hidden; transition: border-color 300ms var(--ease); }
.post-card:hover { border-color: var(--accent-line); }
.post-card__link { display: block; color: inherit; text-decoration: none; }

.media, .post-card__media, .entry__media { margin: 0; overflow: hidden; background: var(--ink-3); }
.post-card__media { aspect-ratio: 4 / 3; }
.media img, .post-card__media img, .entry__media img { width: 100%; height: 100%; object-fit: cover; }
.media--placeholder { aspect-ratio: 4 / 3; background: linear-gradient(140deg, var(--ink-3), var(--ink-4)); }

.post-card__body { padding: var(--space-5); }
.post-card__date { margin: 0 0 var(--space-2); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.post-card__title { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.post-card__excerpt { font-size: var(--fs-sm); margin-bottom: var(--space-4); }

.entry__meta {
	display: flex; flex-wrap: wrap; gap: var(--space-4);
	margin-bottom: var(--space-6); padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--line-soft);
	font-size: var(--fs-sm); color: var(--text-faint);
}

.entry__media { border-radius: var(--radius-lg); margin-bottom: var(--space-6); }
.entry__tags { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.entry__tags a { padding: 0.25rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-xs); text-decoration: none; }

.post-nav {
	display: flex; justify-content: space-between; gap: var(--space-4);
	margin-top: var(--space-7); padding-top: var(--space-5);
	border-top: 1px solid var(--line-soft); font-size: var(--fs-sm);
}

.archive__aside { display: grid; gap: var(--space-5); align-content: start; }

.widget { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); }
.widget__title { font-size: var(--fs-base); margin-bottom: var(--space-4); }
.widget ul { display: grid; gap: var(--space-2); font-size: var(--fs-sm); }

.no-results { padding: var(--space-7); text-align: center; border: 1px solid var(--line); border-radius: var(--radius-lg); }

.search-form { display: flex; gap: var(--space-2); }

.search-form__submit {
	display: grid; place-items: center;
	width: 46px; border: 0; border-radius: var(--radius-sm);
	background: var(--accent); color: #fff; flex: none;
}

.pagination, .navigation.pagination { margin-top: var(--space-7); }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }

.page-numbers {
	display: grid; place-items: center;
	min-width: 40px; height: 40px; padding-inline: 10px;
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	text-decoration: none; font-size: var(--fs-sm); color: var(--text);
}

.page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }

.comments { margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--line-soft); }
.comments__list { display: grid; gap: var(--space-5); margin-bottom: var(--space-7); }
.comments__list .children { margin-top: var(--space-5); padding-left: var(--space-5); border-left: 1px solid var(--line); display: grid; gap: var(--space-5); }
.comment-body { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-sm); }
.comment-form { display: grid; gap: var(--space-4); }

.comment-form input:not([type="submit"]), .comment-form textarea {
	width: 100%; padding: 0.8rem 1rem;
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	background: rgba(11, 8, 9, 0.5); color: var(--text-strong);
	font-family: inherit; font-size: var(--fs-sm);
}

/* 19 404 ---------------------------------------------------------------- */

.error-404 {
	position: relative;
	min-height: 78vh;
	display: grid;
	place-items: center;
	padding-block: calc(var(--header-h) + 4rem) 5rem;
	text-align: center;
	isolation: isolate;
	overflow: hidden;
}

.error-404__title { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); font-weight: 800; letter-spacing: -0.035em; }
.error-404__lead { margin-bottom: var(--space-6); }
.error-404__search { max-width: 400px; margin: 0 auto var(--space-6); }
.error-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }

.error-404__links a {
	display: inline-block;
	padding: 0.45rem 1rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--text-strong);
	text-decoration: none;
	font-size: var(--fs-sm);
}

.error-404__links a:hover { border-color: var(--accent); color: var(--accent-text); }

/* 20 Footer ------------------------------------------------------------- */

.site-footer {
	padding-block: var(--space-8) var(--space-5);
	border-top: 1px solid var(--line);
	background: var(--ink);
}

.site-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: var(--space-7);
	border-bottom: 1px solid var(--line-soft);
}

.site-footer__blurb { margin: var(--space-5) 0 0; font-size: var(--fs-sm); max-width: 36ch; }

.site-footer__list, .site-footer__contact { display: grid; gap: var(--space-3); font-size: var(--fs-sm); }

.site-footer__list a { color: var(--text); text-decoration: none; }
.site-footer__list a:hover { color: var(--accent-text); }

.site-footer__contact li { display: flex; gap: var(--space-3); align-items: flex-start; }
.site-footer__contact svg { color: var(--accent); margin-top: 3px; }
.site-footer__contact a { color: var(--text); text-decoration: none; }
.site-footer__contact a:hover { color: var(--accent-text); }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-top: var(--space-5);
	font-size: var(--fs-xs);
	color: var(--text-faint);
}

.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; gap: var(--space-4); }
.site-footer__legal a, .site-footer__top-link { color: var(--text-faint); text-decoration: none; }
.site-footer__top-link { display: inline-flex; align-items: center; gap: var(--space-2); }
.site-footer__legal a:hover, .site-footer__top-link:hover { color: var(--accent-text); }

/* 21 Motion ------------------------------------------------------------- */

[data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity 650ms var(--ease-out) var(--reveal-delay, 0ms),
		transform 650ms var(--ease-out) var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Nothing can add .is-visible without JavaScript, so never hide anything. */
html.no-js [data-reveal] { opacity: 1; transform: none; }

/* 22 Responsive --------------------------------------------------------- */

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

	.shell--split,
	.shell--split-even,
	.shell--split-form { grid-template-columns: 1fr; }

	.section--venture.is-flipped .shell--split { direction: ltr; }

	.site-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
	:root {
		--header-h: 62px;
		--fs-base: 1rem;
		--fs-lg: 1.0625rem;
		--fs-h1: clamp(2.1rem, 1.3rem + 4.4vw, 2.9rem);
		--fs-h2: clamp(1.7rem, 1.25rem + 2.4vw, 2.3rem);
		--fs-statement: clamp(1.85rem, 1.35rem + 2.6vw, 2.5rem);
	}

	.site-header__actions .btn { display: none; }
	.site-header__actions { margin-left: auto; }

	.hero { min-height: auto; padding-block: calc(var(--header-h) + 3.5rem) 4rem; }
	.hero__actions .btn { flex: 1 1 auto; justify-content: center; }

	.brand__sub { display: none; }

	.site-footer__top { grid-template-columns: 1fr; }

	/* Fewer moving parts on small screens, and none that cross a button. */
	.geo__square--1, .geo__square--2, .geo__ring--2 { display: none; }
	.geo__beam { opacity: 0.6; }
}

/* 22b Motion system — icon draw-on, micro-interactions ------------------ */

/*
 * Icons draw themselves on as their section reveals. Every sub-path carries
 * pathLength="1" (set in leading_star_icon), so one dash rule covers the
 * whole icon set without the stylesheet knowing how long any outline is.
 *
 * Scoped to html.js and to icons inside a reveal container, so an icon can
 * never be left permanently invisible: no JavaScript, or motion switched
 * off in the Customizer, means no hidden state in the first place.
 */
html.js [data-reveal] .icon--draw > * {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

html.js [data-reveal].is-visible .icon--draw > * {
	animation: icon-draw 820ms var(--ease-out) forwards;
}

html.js [data-reveal].is-visible .icon--draw > *:nth-child(2) { animation-delay: 130ms; }
html.js [data-reveal].is-visible .icon--draw > *:nth-child(3) { animation-delay: 250ms; }
html.js [data-reveal].is-visible .icon--draw > *:nth-child(4) { animation-delay: 350ms; }
html.js [data-reveal].is-visible .icon--draw > *:nth-child(n + 5) { animation-delay: 430ms; }

@keyframes icon-draw {
	from { stroke-dashoffset: 1; }
	to   { stroke-dashoffset: 0; }
}

/* The pillar mark warms and lifts with its card. */
.pillar__icon {
	transition:
		transform 420ms var(--ease-out),
		background-color 280ms var(--ease),
		border-color 280ms var(--ease),
		color 280ms var(--ease);
}

.pillar:hover .pillar__icon,
.pillar:focus-within .pillar__icon {
	transform: translateY(-2px) scale(1.05);
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.venture__mark { transition: transform 420ms var(--ease-out); }
.section--venture:hover .venture__mark { transform: scale(1.04); }

/* The About page's belief cards reuse .pillar, so the rule above covers them. */
.person__avatar { transition: transform 420ms var(--ease-out), border-color 280ms var(--ease); }
.person:hover .person__avatar { transform: scale(1.04); border-color: var(--accent-line); }

/*
 * Arrows advance on hover; the chat bubble does not, because a speech
 * bubble sliding sideways reads as a glitch rather than as motion.
 */
.btn .icon,
.link-arrow .icon {
	transition: transform 300ms var(--ease-out);
}

.btn:not(.btn--whatsapp):hover .icon,
.btn:not(.btn--whatsapp):focus-visible .icon { transform: translateX(3px); }

.venture-card:hover .link-arrow .icon,
.venture-card:focus-visible .link-arrow .icon { transform: translateX(4px); }

.btn:active { transform: translateY(1px); }

.btn--whatsapp:hover .icon { transform: scale(1.08); }

.btn--sm {
	padding: 0.58rem 1.05rem;
	font-size: var(--fs-xs);
}

.contact__whatsapp { margin-bottom: var(--space-5); }

.site-footer__contact a,
.contact__list a { transition: color 200ms var(--ease); }

/* 22c Hero scroll cue --------------------------------------------------- */

.scroll-cue {
	position: absolute;
	left: 50%;
	bottom: clamp(18px, 4vh, 42px);
	z-index: 2;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	padding: 6px 10px 2px;
	text-decoration: none;
	color: var(--text-faint);
	font-family: var(--font-display);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	transform: translateX(-50%);
	transition:
		opacity 420ms var(--ease),
		transform 420ms var(--ease),
		color 220ms var(--ease);
}

.scroll-cue:hover,
.scroll-cue:focus-visible { color: var(--text-strong); }

/* Once the visitor has started scrolling, the hint has done its job. */
.scroll-cue.is-gone {
	opacity: 0;
	transform: translate(-50%, 14px);
	pointer-events: none;
}

.scroll-cue__mouse {
	position: relative;
	width: 23px;
	height: 36px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	transition: border-color 220ms var(--ease);
}

.scroll-cue:hover .scroll-cue__mouse { border-color: var(--accent-line); }

.scroll-cue__wheel {
	position: absolute;
	top: 7px;
	left: 50%;
	width: 3px;
	height: 7px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: var(--accent-text);
	animation: cue-wheel 2.2s var(--ease) infinite;
}

@keyframes cue-wheel {
	0%   { opacity: 0; transform: translateY(-3px); }
	22%  { opacity: 1; transform: translateY(0); }
	68%  { opacity: 1; transform: translateY(11px); }
	100% { opacity: 0; transform: translateY(15px); }
}

/* 22d WhatsApp action --------------------------------------------------- */

/*
 * A collapsed pill that opens on hover or keyboard focus. It stays in the
 * site's single-accent palette rather than borrowing a messaging app's
 * green, and the label names the channel.
 */
.wa-float {
	position: fixed;
	right: clamp(14px, 3vw, 26px);
	bottom: clamp(14px, 3vw, 26px);
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	max-width: 54px;
	padding: 14px;
	border: 1px solid var(--accent-line);
	border-radius: 999px;
	background: rgba(18, 13, 15, 0.84);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	color: var(--accent-text);
	text-decoration: none;
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.48);
	transition:
		max-width 460ms var(--ease-out),
		background-color 260ms var(--ease),
		border-color 260ms var(--ease),
		color 220ms var(--ease),
		opacity 300ms var(--ease),
		transform 300ms var(--ease-out);
}

.wa-float__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
}

/*
 * When the official WhatsApp mark is supplied it is shown as artwork, not
 * as a tinted glyph: its own colour is the point, and a brand mark should
 * not be recoloured by the surface it lands on. The pill therefore keeps a
 * dark ground on hover instead of filling with accent.
 */
.wa-mark {
	display: block;
	width: auto;
	height: 1.15em;
	max-width: 100%;
}

.wa-float__icon .wa-mark { height: 26px; }

/*
 * With the brand mark in place, the pill drops its accent outline and ring.
 * The mark's own green is the only colour in play — an accent-red border
 * around a green badge is two brands arguing inside one button.
 */
.wa-float--brand,
.wa-float--brand::after { border-color: var(--line); }

.wa-float--brand:hover,
.wa-float--brand:focus-visible {
	background: rgba(18, 13, 15, 0.96);
	border-color: var(--line);
	color: var(--text-strong);
}

.btn--whatsapp-brand .wa-mark { height: 17px; }

.site-footer__contact .wa-mark,
.mobile-nav__contact .wa-mark { height: 17px; flex: none; }

.wa-float__label {
	opacity: 0;
	padding-right: var(--space-2);
	transition: opacity 240ms var(--ease) 90ms;
}

.wa-float:hover,
.wa-float:focus-visible {
	max-width: 280px;
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label { opacity: 1; }

/* A slow ring, so the button registers once without nagging. */
.wa-float::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	border: 1px solid var(--accent-line);
	pointer-events: none;
	animation: wa-ring 4.2s var(--ease) infinite;
}

.wa-float:hover::after,
.wa-float:focus-visible::after { animation: none; opacity: 0; }

@keyframes wa-ring {
	0%, 62%, 100% { opacity: 0; transform: scale(1); }
	8%            { opacity: 0.8; transform: scale(1); }
	40%           { opacity: 0; transform: scale(1.34); }
}

/* One decision at a time: the chat button waits for the privacy notice. */
body.ls-consent-open .wa-float {
	opacity: 0;
	transform: translateY(14px);
	pointer-events: none;
}

/* 22e Privacy and cookies notice ---------------------------------------- */

/*
 * A notice, not a modal. It does not trap focus, does not block the page,
 * and does not stop a search engine reading the content behind it.
 */
.consent {
	position: fixed;
	left: 50%;
	bottom: clamp(12px, 2.5vw, 22px);
	z-index: 70;
	width: min(960px, calc(100vw - 24px));
	opacity: 0;
	transform: translate(-50%, 140%);
	transition:
		transform 560ms var(--ease-out),
		opacity 380ms var(--ease);
}

.consent.is-open {
	opacity: 1;
	transform: translate(-50%, 0);
}

.consent__inner {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-4) var(--space-5);
	padding: var(--space-5) var(--space-6);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: rgba(18, 13, 15, 0.94);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 0 26px 64px rgba(0, 0, 0, 0.58);
}

.consent__mark {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--accent-line);
	border-radius: 12px;
	background: var(--accent-soft);
	color: var(--accent-text);
}

.consent__title {
	margin-bottom: 2px;
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--text-strong);
}

.consent__body {
	margin: 0;
	font-size: var(--fs-xs);
	line-height: 1.6;
	max-width: 68ch;
}

.consent__actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding-right: var(--space-5);
}

.consent__close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--text-faint);
	cursor: pointer;
	transition: color 200ms var(--ease), background-color 200ms var(--ease);
}

.consent__close:hover {
	color: var(--text-strong);
	background: var(--glass-hover);
}

@media (max-width: 880px) {
	.consent__inner {
		grid-template-columns: auto 1fr;
		padding: var(--space-5);
	}

	.consent__actions {
		grid-column: 1 / -1;
		padding-right: 0;
	}

	.consent__actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 560px) {
	.consent__mark { display: none; }
	.consent__inner { grid-template-columns: 1fr; }

	.wa-float__label { display: none; }

	/*
	 * The cue matters most on a phone, where the fold hides the most. It is
	 * scaled down and the hero is given room below the buttons to hold it,
	 * rather than being dropped for want of space.
	 */
	.hero { padding-bottom: 8.5rem; }

	.scroll-cue {
		bottom: 16px;
		gap: 7px;
		font-size: 0.58rem;
		letter-spacing: 0.2em;
	}

	.scroll-cue__mouse { width: 20px; height: 31px; border-radius: 10px; }
	.scroll-cue__wheel { top: 6px; height: 6px; }
}

/* 23 Reduced motion, forced colours, print ------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	[data-reveal] { opacity: 1 !important; transform: none !important; }

	.geo__grid, .geo__ring, .geo__square, .geo__beam { animation: none; }
}

@media (forced-colors: active) {
	.glass, .btn, .tag, .pillar, .venture-card, .person { border: 1px solid CanvasText; }
	.geo { display: none; }
}

@media print {
	.site-header, .mobile-nav, .geo, .nav-toggle { display: none !important; }
	body, .section, .hero, .page-hero, .site-footer { background: #fff !important; color: #000 !important; }
	h1, h2, h3, .statement, .hero__title, .page-hero__title { color: #000 !important; }
	a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #444; }
}