/*
  theme.css — Avid Coach brand tokens.

  Source of truth: 03-assets/brand/TAG_Brand_Style_Guide.pdf (v1.0, 2026).
  This file is the only place where brand tokens live. Components reference
  the variables; do not hardcode hex values or font families in components.

  Token vocabulary:
    --font-* / --font-size-* / --leading-* / --text-*  -> typography
    --color-*                                          -> The Subway Six + neutrals
    --space-* / --content-*                            -> layout / spacing
    --radius-*                                         -> surfaces

  Brand foundation:
    Tagline:  "From Friction to Freedom"
    Voice:    Direct · Warm · Structured · Experienced · Calm · Human
    Audience: Founder/CEO of $5M–$200M+ company, 10–100 employees
*/

:root {
	/* ------------------------------------------------------------------
	   Typography — system stack per style guide.
	   Display: Arial Black / Bold (fallback Impact)
	   Body:    Georgia (fallback Times New Roman)
	   ------------------------------------------------------------------ */
	--font-display: "Arial Black", "Arial Bold", Arial, Impact, system-ui, sans-serif;
	--font-sans: Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif;
	--font-serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* ------------------------------------------------------------------
	   Type scale — anchored to style guide page 4 (Section 03).
	   ------------------------------------------------------------------ */
	--text-xs: 0.75rem;       /* 12px — captions */
	--text-sm: 0.8125rem;     /* 13px — labels, supporting copy */
	--text-base: 1rem;        /* 16px — body */
	--text-lg: 1.125rem;      /* 18px */
	--text-xl: 1.5rem;        /* 24px — Section H1 */
	--text-2xl: 2rem;         /* 32px */
	--text-3xl: 2.5rem;       /* 40px */
	--text-display: 3.5rem;   /* 56px — Display H1 (cover titles, hero) */

	/* Aliases for any starter pages that reference --font-size-* names. */
	--font-size-sm: var(--text-sm);
	--font-size-base: var(--text-base);
	--font-size-lg: var(--text-lg);
	--font-size-xl: var(--text-xl);
	--font-size-2xl: var(--text-2xl);
	--font-size-3xl: var(--text-3xl);
	--font-size-4xl: var(--text-display);

	/* Line-height + weight */
	--leading-tight: 1.1;
	--leading-snug: 1.3;
	--leading-normal: 1.5;
	--leading-relaxed: 1.7;   /* style guide spec for body */

	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-black: 900;
}

/* ------------------------------------------------------------------
   The Subway Six — brand color system.
   Each color has a defined role per style guide page 3.
   ------------------------------------------------------------------ */
:root {
	/* Primary brand colors */
	--color-authority: #0A0A0A;     /* black — covers, headers, dark grounds */
	--color-trust: #1B3F8B;          /* blue — primary brand color, structural */
	--color-energy: #F5C400;         /* yellow — primary accent, CTAs, rules */
	--color-urgency: #D93025;        /* red — pain points, alerts */
	--color-growth: #1A7A34;         /* green — positive outcomes, success */
	--color-depth: #9B30A0;          /* purple — brand compass, secondary accents */

	/* Neutrals */
	--color-ground: #F6F6F4;         /* light bg for content areas */
	--color-structure: #D0D0CE;      /* rules, borders, dividers */
	--color-mid: #777777;            /* secondary text, labels */
	--color-body: #444444;           /* primary body text */
	--color-space: #FFFFFF;          /* white space */

	/* ------------------------------------------------------------------
	   Semantic tokens — what the rest of the codebase consumes.
	   ------------------------------------------------------------------ */
	--color-bg: var(--color-space);
	--color-surface: var(--color-ground);
	--color-border: var(--color-structure);

	--color-text: var(--color-body);
	--color-text-muted: #5F5F5F;           /* darker than --color-mid for AA contrast on white (was #777777, ratio 4.48 → now 7.04) */
	--color-text-soft: var(--color-mid);
	--color-text-strong: var(--color-authority);

	--color-brand: var(--color-trust);
	--color-brand-soft: #E8EDF7;
	--color-accent: var(--color-energy);
	--color-accent-soft: #FFF5C5;

	--color-link: var(--color-trust);
	--color-link-hover: var(--color-authority);

	/* Aliases for any starter token names so existing pages keep rendering. */
	--color-muted: var(--color-text-muted);
	--color-accent-muted: var(--color-brand-soft);
}

/* ------------------------------------------------------------------
   Dark mode — kept light-touch for v1. Style guide is light-first;
   the Authority black is reserved for hero/cover bands rather than
   becoming the default ground. We provide a working dark mode for
   accessibility but the default visual is always light + bands.
   ------------------------------------------------------------------ */
:root.dark {
	--color-bg: var(--color-authority);
	--color-surface: #1A1A1A;
	--color-border: #2A2A2A;

	--color-text: #ECECEC;
	--color-text-muted: #A8A8A8;
	--color-text-soft: #888888;
	--color-text-strong: #FFFFFF;

	--color-brand: #5C8FE3;
	--color-brand-soft: #1F2A45;
	--color-accent: var(--color-energy);
	--color-accent-soft: #4A3C00;

	--color-link: var(--color-energy);
	--color-link-hover: #FFFFFF;
}

/* Same tokens via media query for users who never click the toggle. */
@media (prefers-color-scheme: dark) {
	:root:not(.light) {
		--color-bg: var(--color-authority);
		--color-surface: #1A1A1A;
		--color-border: #2A2A2A;

		--color-text: #ECECEC;
		--color-text-muted: #A8A8A8;
		--color-text-soft: #888888;
		--color-text-strong: #FFFFFF;

		--color-brand: #5C8FE3;
		--color-brand-soft: #1F2A45;
		--color-accent: var(--color-energy);
		--color-accent-soft: #4A3C00;

		--color-link: var(--color-energy);
		--color-link-hover: #FFFFFF;
	}
}

/* ------------------------------------------------------------------
   Body + base typography
   ------------------------------------------------------------------ */
body {
	font-family: var(--font-serif);   /* Georgia — body per style guide */
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	background: var(--color-bg);
	color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);  /* Arial Black */
	font-weight: var(--font-black);
	line-height: var(--leading-tight);
	color: var(--color-text-strong);
	letter-spacing: -0.01em;
}

h1 {
	font-size: var(--text-display);
}
h2 {
	font-size: var(--text-2xl);
}
h3 {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
}

a {
	color: var(--color-link);
	text-decoration: none;
}
a:hover {
	color: var(--color-link-hover);
	text-decoration: underline;
}

/* ------------------------------------------------------------------
   Spacing scale + layout
   ------------------------------------------------------------------ */
:root {
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--space-32: 8rem;

	--spacing-xs: var(--space-1);
	--spacing-sm: var(--space-2);
	--spacing-md: var(--space-4);
	--spacing-lg: var(--space-6);
	--spacing-xl: var(--space-8);
	--spacing-2xl: var(--space-12);
	--spacing-3xl: var(--space-16);
	--spacing-4xl: var(--space-24);

	/* Layout */
	--content-width: 72rem;
	--narrow-width: 44rem;             /* readable text column */
	--content-padding: var(--space-6);
	--max-width: var(--narrow-width);
	--wide-width: var(--content-width);

	/* Radii — style guide uses square corners for "structural" feel.
	   Keep small radii reserved for buttons/cards only. */
	--radius-sm: 2px;
	--radius: 4px;
	--radius-lg: 8px;

	/* Subway color bar — non-negotiable footer band per style guide page 3. */
	--subway-bar-height: 6px;

	/* Shadows — sparingly. */
	--shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.05);
	--shadow: 0 4px 6px -1px rgba(10, 10, 10, 0.07), 0 2px 4px -2px rgba(10, 10, 10, 0.07);
	--shadow-lg: 0 10px 15px -3px rgba(10, 10, 10, 0.08), 0 4px 6px -4px rgba(10, 10, 10, 0.06);

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 200ms ease;
	--transition-slow: 300ms ease;
}

.container {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--content-padding);
}

.container-narrow {
	max-width: var(--narrow-width);
	margin-inline: auto;
	padding-inline: var(--content-padding);
}

/* ------------------------------------------------------------------
   Section header pattern — per style guide:
   "Bold label + colored underrule (1.2pt)"
   Use .section-eyebrow to render a small Arial-Bold label with a
   yellow rule beneath. Reusable across pages.
   ------------------------------------------------------------------ */
.section-eyebrow {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	color: var(--color-brand);   /* mode-aware: Trust blue in light, lighter blue in dark */
	text-transform: uppercase;
	letter-spacing: 0.12em;
	display: inline-block;
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--color-energy);
	margin-bottom: var(--space-4);
}

/* ------------------------------------------------------------------
   The Subway Color Bar — applied as a footer band on every page.
   Six fixed colors, full width, fixed sequence per style guide.
   ------------------------------------------------------------------ */
.subway-bar {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	height: var(--subway-bar-height);
	width: 100%;
}
.subway-bar > span:nth-child(1) { background: var(--color-authority); }
.subway-bar > span:nth-child(2) { background: var(--color-trust); }
.subway-bar > span:nth-child(3) { background: var(--color-energy); }
.subway-bar > span:nth-child(4) { background: var(--color-urgency); }
.subway-bar > span:nth-child(5) { background: var(--color-depth); }
.subway-bar > span:nth-child(6) { background: var(--color-growth); }

/* ------------------------------------------------------------------
   Buttons — primary CTA is yellow (Energy), Authority text.
   Per style guide: CTAs are yellow, hover state darker.
   ------------------------------------------------------------------ */
.btn {
	display: inline-block;
	font-family: var(--font-sans);
	font-weight: var(--font-bold);
	font-size: var(--text-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: var(--space-3) var(--space-8);
	border: 2px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: all var(--transition-fast);
	text-decoration: none;
}

.btn-primary {
	background: var(--color-energy);
	color: var(--color-authority);
	border-color: var(--color-energy);
}
.btn-primary:hover {
	background: #DDB000;
	border-color: #DDB000;
	color: var(--color-authority);
	text-decoration: none;
}

.btn-secondary {
	background: transparent;
	color: var(--color-brand);          /* mode-aware text */
	border-color: var(--color-brand);   /* matches text */
}
.btn-secondary:hover {
	background: var(--color-trust);      /* solid dark blue in both modes — white text against this is 9.86 ratio */
	color: var(--color-space);
	border-color: var(--color-trust);
	text-decoration: none;
}

.btn-ghost {
	background: transparent;
	color: var(--color-text-muted);
	border-color: var(--color-border);
}
.btn-ghost:hover {
	color: var(--color-text-strong);
	border-color: var(--color-text-strong);
	text-decoration: none;
}

/* ------------------------------------------------------------------
   Card / left-accent block — per style guide page 5.
   Used to group related content with a colored left vbar.
   ------------------------------------------------------------------ */
.left-accent {
	border-left: 4px solid var(--color-trust);
	background: var(--color-surface);
	padding: var(--space-6) var(--space-6);
}
.left-accent.accent-energy { border-left-color: var(--color-energy); }
.left-accent.accent-urgency { border-left-color: var(--color-urgency); }
.left-accent.accent-growth { border-left-color: var(--color-growth); }
.left-accent.accent-depth { border-left-color: var(--color-depth); }

/* Stat card — large colored number + label */
.stat-card {
	background: var(--color-surface);
	padding: var(--space-6);
	border-top: 3px solid var(--color-trust);
}
.stat-card .stat-number {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: var(--font-black);
	color: var(--color-brand);   /* mode-aware: dark blue in light, lighter blue in dark */
	line-height: 1;
	letter-spacing: -0.02em;
}
.stat-card .stat-label {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: var(--space-2);
}

/* ------ Base.astro global reset styles (lines 303-338) ------ */
@layer base;

@layer base {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	html {
		scroll-behavior: smooth;
	}

	body {
		-webkit-font-smoothing: antialiased;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	img {
		max-width: 100%;
		height: auto;
		display: block;
	}

	main {
		flex: 1;
	}

	ul {
		list-style: none;
	}
}

/* ------ Base.astro header/footer/nav/theme-switcher styles (lines 342-666) ------ */
.site-header {
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg);
	position: sticky;
	top: 0;
	z-index: 50;
}

.site-header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: var(--space-4);
	gap: var(--space-6);
	flex-wrap: wrap;
}

.brand-wordmark {
	font-family: var(--font-display);
	font-weight: var(--font-black);
	color: var(--color-text-strong);
	text-decoration: none;
	line-height: 1;
	letter-spacing: -0.02em;
}
.wordmark-text {
	font-size: var(--text-xl);
	display: inline-flex;
	align-items: baseline;
}
.wordmark-avid { color: var(--color-text-strong); }
.wordmark-dot {
	color: var(--color-energy);
	margin-inline: 0.15em;
	font-size: 1.2em;
	line-height: 0.5;
}
.wordmark-coach { color: var(--color-brand); }   /* mode-aware */

.brand-logo {
	height: 2rem;
	width: auto;
	max-width: min(14rem, 50vw);
}

.brand-wordmark:hover {
	text-decoration: none;
}
.brand-wordmark:hover .wordmark-coach {
	color: var(--color-text-strong);   /* mode-aware: black in light, white in dark */
}

.primary-nav {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	flex-wrap: wrap;
}

.primary-nav > a:not(.nav-cta) {
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--text-xs);
}
.primary-nav > a:not(.nav-cta):hover {
	color: var(--color-brand);   /* mode-aware so dark mode hover reads */
	text-decoration: none;
}

.nav-cta {
	font-size: var(--text-xs);
	padding: var(--space-2) var(--space-4);
}

/* ------------------------------------------------------------------
   Hamburger button — visible only at mobile breakpoint.
   ------------------------------------------------------------------ */
.nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	width: 44px;
	height: 44px;
	padding: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	transition: border-color var(--transition-fast);
}
.nav-toggle:hover {
	border-color: var(--color-brand);   /* mode-aware */
}
.nav-toggle-bar {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--color-text-strong);
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
	opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.site-footer {
	background: var(--color-authority);
	color: #ECECEC;
	margin-top: var(--space-24);
}
.site-footer a {
	color: #ECECEC;
	text-decoration: none;
}
.site-footer a:hover {
	color: var(--color-energy);
	text-decoration: none;
}

.site-footer-inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--space-12);
	padding-block: var(--space-16);
	align-items: start;
}

.footer-brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 22rem;
}

.footer-wordmark {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--font-black);
	color: #FFFFFF;
	letter-spacing: -0.02em;
}

.footer-logo {
	height: 1.75rem;
	width: auto;
	max-width: min(14rem, 70vw);
	filter: invert(1);
}

.footer-tagline {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	color: var(--color-energy);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	line-height: 1.4;
}

.footer-meta {
	font-family: var(--font-serif);
	font-size: var(--text-sm);
	color: #A8A8A8;
	line-height: var(--leading-relaxed);
}
.footer-meta strong {
	color: #ECECEC;
	font-weight: 700;
}

.footer-nav-col {
	font-family: var(--font-sans);
}
.footer-col-label {
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	color: var(--color-energy);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid #2A2A2A;
}
.footer-nav-col ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: #A8A8A8;
}

.footer-utility {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-4);
	font-family: var(--font-sans);
}
.footer-copyright {
	font-size: var(--text-xs);
	color: #A8A8A8;   /* footer band is always dark; this passes 8.33:1 on Authority */
	letter-spacing: 0.04em;
}
.footer-credit {
	font-size: var(--text-xs);
	color: #A8A8A8;
	letter-spacing: 0.04em;
	margin-top: calc(var(--space-2) * -1);
}

.theme-switcher {
	display: flex;
	gap: 1px;
	background: #2A2A2A;
	border-radius: var(--radius);
	padding: 2px;
}

.theme-btn {
	background: transparent;
	border: none;
	color: #888888;
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	padding: var(--space-1) var(--space-3);
	border-radius: 2px;
	cursor: pointer;
	transition: all var(--transition-fast);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.theme-btn:hover {
	color: #ECECEC;
}

.theme-btn.active {
	background: var(--color-authority);
	color: var(--color-energy);
}

@media (max-width: 880px) {
	.site-footer-inner {
		grid-template-columns: 1fr 1fr;
	}
	.footer-utility {
		grid-column: 1 / -1;
		align-items: flex-start;
	}
}

@media (max-width: 640px) {
	.site-header-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
	}
	.nav-toggle {
		display: inline-flex;
	}
	/* Hide nav by default on mobile; show when toggled open.
	   The nav drops down beneath the header. */
	.primary-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--color-bg);
		border-bottom: 1px solid var(--color-border);
		border-top: 1px solid var(--color-border);
		flex-direction: column;
		align-items: stretch;
		padding: var(--space-4) var(--content-padding) var(--space-6);
		gap: var(--space-4);
		box-shadow: var(--shadow);
	}
	.primary-nav.is-open {
		display: flex;
	}
	.primary-nav > a:not(.nav-cta) {
		font-size: var(--text-base);
		padding-block: var(--space-2);
		border-bottom: 1px solid var(--color-border);
	}
	.primary-nav > a:not(.nav-cta):last-of-type {
		border-bottom: none;
	}
	.nav-cta {
		font-size: var(--text-sm);
		padding: var(--space-3) var(--space-4);
		text-align: center;
	}
	/* Make site-header position-relative so the absolute nav anchors to it. */
	.site-header {
		position: sticky;
		top: 0;
	}
	.site-header-inner {
		position: relative;
	}
	.site-footer-inner {
		grid-template-columns: 1fr;
		gap: var(--space-8);
		padding-block: var(--space-12);
	}
}

/* ------ 404.astro page styles ------ */
.not-found {
	padding-block: var(--space-24);
	text-align: center;
}
.not-found .section-eyebrow {
	display: inline-block;
}
.not-found h1 {
	font-size: clamp(2rem, 5vw, 3rem);
	margin-bottom: var(--space-4);
	letter-spacing: -0.02em;
}
.not-found p {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
	margin-bottom: var(--space-8);
}
.nf-links {
	display: flex;
	gap: var(--space-3);
	justify-content: center;
	flex-wrap: wrap;
}

/* ------ index.astro page styles ------ */
/* ===== Hero ===== */
.hero {
	background: var(--color-bg);
	padding-block: var(--space-24) var(--space-20);
	border-bottom: 1px solid var(--color-border);
}
.hero-inner {
	max-width: 76rem;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(var(--space-6), 3vw, var(--space-12));
	align-items: center;
}
.hero-text {
	max-width: 38rem;
}
.hero-portrait {
	margin: 0;
	display: flex;
	justify-content: center;
}
.hero-portrait img {
	display: block;
	width: 100%;
	max-width: clamp(20rem, 32vw, 34rem);
	height: auto;
}
.hero-title {
	font-family: var(--font-display);
	font-weight: var(--font-black);
	font-size: clamp(2.25rem, 5.5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin-bottom: var(--space-6);
	color: var(--color-text-strong);
}
.hero-title-accent {
	display: block;
	color: var(--color-brand);   /* mode-aware so dark mode reads */
}
.hero-subtitle {
	font-family: var(--font-serif);
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
	max-width: 44rem;
	margin-bottom: var(--space-8);
}
.hero-ctas {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
	margin-bottom: var(--space-6);
}
.hero-meta {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: var(--font-bold);
}

/* ===== Section header pattern ===== */
.section-header {
	max-width: 48rem;
	margin-bottom: var(--space-12);
}
.section-header h2 {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
}
.eyebrow-trust { color: var(--color-brand); border-bottom-color: var(--color-brand); }   /* mode-aware */
.eyebrow-urgency { color: var(--color-urgency); border-bottom-color: var(--color-urgency); }
.eyebrow-growth { color: var(--color-growth); border-bottom-color: var(--color-growth); }
.eyebrow-depth { color: var(--color-depth); border-bottom-color: var(--color-depth); }

/* ===== Problem ===== */
.problem {
	background: var(--color-surface);
	padding-block: var(--space-20);
}
.problem-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
	margin-bottom: var(--space-12);
}
.problem-grid h3 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--font-black);
	margin-bottom: var(--space-2);
	color: var(--color-text-strong);
	letter-spacing: -0.01em;
}
.problem-grid p {
	font-family: var(--font-serif);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
}
.problem-pull {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	font-weight: var(--font-bold);
	color: var(--color-text-strong);
	max-width: 36rem;
	line-height: 1.3;
	padding-left: var(--space-6);
	border-left: 4px solid var(--color-energy);
}

/* ===== Solution ===== */
.solution {
	padding-block: var(--space-20);
}
.solution-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-8);
}
.solution-step {
	padding: var(--space-6);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-top: 4px solid var(--color-trust);
}
.solution-step:nth-child(2) {
	border-top-color: var(--color-energy);
}
.solution-step:nth-child(3) {
	border-top-color: var(--color-depth);
}
.step-number {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--font-black);
	color: var(--color-text-muted);
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-3);
}
.solution-step h3 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--font-black);
	color: var(--color-text-strong);
	margin-bottom: var(--space-3);
	letter-spacing: -0.01em;
}
.solution-step p {
	font-family: var(--font-serif);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
}

/* ===== Proof ===== */
.proof {
	background: var(--color-authority);
	color: #ECECEC;
	padding-block: var(--space-24);
}
.proof .section-eyebrow {
	color: var(--color-energy) !important;
	border-bottom-color: var(--color-energy) !important;
}
.proof h2 {
	color: #FFFFFF;
}
.testimonial-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	margin-bottom: var(--space-16);
}
.testimonial-card {
	background: #1A1A1A;
	padding: var(--space-8);
	border-left: 4px solid var(--color-energy);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.testimonial-card blockquote p {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
	color: #FFFFFF;
	font-style: italic;
}
.testimonial-card figcaption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-top: 1px solid #2A2A2A;
	padding-top: var(--space-4);
}
.testimonial-name {
	font-family: var(--font-display);
	font-weight: var(--font-bold);
	color: #FFFFFF;
	font-size: var(--text-base);
}
.testimonial-role {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: #A8A8A8;
}

.stat-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
}
.proof .stat-card {
	background: #1A1A1A;
	border-top-color: var(--color-energy);
}
.proof .stat-card .stat-number {
	color: var(--color-energy);
}
.proof .stat-card .stat-label {
	color: #A8A8A8;
}

/* ===== Who ===== */
.who {
	padding-block: var(--space-20);
	background: var(--color-bg);
}
.who-headline {
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	line-height: 1.2;
	margin-bottom: var(--space-6);
}
.who-body {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
	margin-bottom: var(--space-4);
}
.who-not {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	font-style: italic;
	padding-left: var(--space-6);
	border-left: 3px solid var(--color-structure);
}

/* ===== Closing CTA ===== */
.closing-cta {
	padding-block: var(--space-24);
	background: var(--color-trust);
	color: #FFFFFF;
	text-align: center;
}
.closing-headline {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3.2vw, 2.5rem);
	font-weight: var(--font-black);
	color: #FFFFFF;
	line-height: 1.2;
	max-width: 36rem;
	margin: 0 auto var(--space-6);
	letter-spacing: -0.02em;
}
.closing-sub {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: #C5D0E8;
	max-width: 32rem;
	margin: 0 auto var(--space-8);
}
.closing-cta .hero-ctas {
	justify-content: center;
}
/* .btn-ghost is tuned for a white page (muted-gray text/border); on the
   Trust-blue closing panel that combination fails contrast, so invert to
   a white outline here rather than adding a new button primitive. */
.closing-cta .btn-ghost {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.65);
}
.closing-cta .btn-ghost:hover {
	color: var(--color-trust);
	background: #FFFFFF;
	border-color: #FFFFFF;
}
.btn-lg {
	font-size: var(--text-base);
	padding: var(--space-4) var(--space-10);
}

/* ===== Responsive ===== */
@media (max-width: 880px) {
	.hero-inner {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
	.hero-portrait {
		order: -1;            /* portrait stacks above text on mobile */
	}
	.hero-portrait img {
		max-width: 16rem;
	}
	.problem-grid,
	.solution-grid {
		grid-template-columns: 1fr;
	}
	.testimonial-grid {
		grid-template-columns: 1fr;
	}
	.stat-row {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.hero {
		padding-block: var(--space-16) var(--space-12);
	}
	.hero-ctas {
		flex-direction: column;
		align-items: stretch;
	}
	.hero-ctas .btn {
		text-align: center;
	}
	.stat-row {
		grid-template-columns: 1fr;
	}
}

/* ------ contact.astro page styles ------ */
.contact-hero {
	padding-block: var(--space-20) var(--space-12);
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	text-align: center;
}
.contact-hero .section-eyebrow {
	display: inline-block;
}
.contact-headline {
	font-family: var(--font-display);
	font-weight: var(--font-black);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	max-width: 38rem;
	margin: 0 auto var(--space-6);
	color: var(--color-text-strong);
}
.contact-sub {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
	max-width: 38rem;
	margin: 0 auto;
}

.contact-hero-cta {
	margin-top: var(--space-10);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}
.contact-hero-cta-note {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: var(--font-bold);
}

.contact-body {
	padding-block: var(--space-16) var(--space-24);
}

.contact-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--space-6);
	margin-bottom: var(--space-16);
}

.contact-card {
	padding: var(--space-8);
	background: var(--color-surface);
	border-top: 4px solid var(--color-trust);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.contact-card-primary {
	border-top-color: var(--color-energy);
}

.contact-card-portrait {
	padding: 0;
	overflow: hidden;
	border-top-color: var(--color-trust);
}
.contact-portrait {
	width: 100%;
	height: 18rem;
	object-fit: cover;
	object-position: center 25%;
	display: block;
}
.contact-portrait-body {
	padding: var(--space-6) var(--space-8) var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.contact-card h2 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--font-black);
	color: var(--color-text-strong);
	letter-spacing: -0.01em;
}
.contact-card p {
	font-family: var(--font-serif);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
}
.contact-card .btn {
	align-self: flex-start;
	margin-top: var(--space-2);
}

.contact-phone {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: var(--font-black);
	color: var(--color-brand);   /* mode-aware */
	letter-spacing: -0.01em;
}
.contact-phone:hover {
	color: var(--color-text-strong);   /* black in light, white in dark */
	text-decoration: none;
}
.contact-meta {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: var(--font-bold);
	margin-top: auto;
}

.contact-expectations {
	max-width: 48rem;
	margin: 0 auto;
	padding: var(--space-12);
	background: var(--color-authority);
	color: #ECECEC;
}
.contact-expectations h3 {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	color: var(--color-energy);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--color-energy);
	display: inline-block;
}
.expect-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.expect-list li {
	display: flex;
	gap: var(--space-6);
	align-items: flex-start;
	font-family: var(--font-serif);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
}
.expect-num {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--font-black);
	color: var(--color-energy);
	min-width: 2.5rem;
	letter-spacing: -0.01em;
}
.expect-list strong {
	font-family: var(--font-display);
	font-weight: var(--font-bold);
	color: #FFFFFF;
}

@media (max-width: 880px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
	.contact-expectations {
		padding: var(--space-8);
	}
	.expect-list li {
		flex-direction: column;
		gap: var(--space-2);
	}
}

/* ------ about.astro page styles ------ */
.page-hero {
	padding-block: var(--space-20) var(--space-16);
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}
.page-title {
	font-family: var(--font-display);
	font-weight: var(--font-black);
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	max-width: 48rem;
}
.page-title-accent {
	display: block;
	color: var(--color-brand);   /* mode-aware */
}

.bio {
	padding-block: var(--space-16) var(--space-24);
}

.bio-hero-image {
	margin: 0 0 var(--space-10);
	max-width: 22rem;
}
.bio-hero-image img {
	width: 100%;
	height: auto;
	display: block;
	border: 4px solid var(--color-energy);
}

.bio-section-with-image {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--space-10);
	align-items: start;
}
.bio-section-with-image > .bio-section-text > h2 {
	margin-top: 0;
}
.bio-section-image {
	margin: 0;
}
.bio-section-image img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--color-border);
}
.bio-section-image-icon {
	max-width: 12rem;
	justify-self: start;
}
.bio-section-image-icon img {
	border: none;
	border-radius: 50%;
}

@media (max-width: 880px) {
	.bio-section-with-image {
		grid-template-columns: 1fr;
	}
}

.bio-lead {
	margin-bottom: var(--space-12);
}
.bio-lead p,
.bio-section p {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
	margin-bottom: var(--space-4);
}
.bio-lead p:first-child {
	font-size: var(--text-xl);
	color: var(--color-text-strong);
}

.bio-section {
	padding-block: var(--space-8);
	border-top: 1px solid var(--color-border);
}
.bio-section h2 {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	color: var(--color-brand);   /* mode-aware */
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--color-energy);
	display: inline-block;
}
.bio-section .btn {
	margin-top: var(--space-2);
}

.bio-cta {
	margin-top: var(--space-12);
	padding: var(--space-8);
	background: var(--color-surface);
	border-left: 4px solid var(--color-energy);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.bio-cta-line {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	color: var(--color-text-strong);
	line-height: 1.3;
}
.bio-cta .btn {
	align-self: flex-start;
}

/* ------ how-it-works.astro page styles ------ */
.page-hero {
	padding-block: var(--space-20) var(--space-12);
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}
.page-title {
	font-family: var(--font-display);
	font-weight: var(--font-black);
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	max-width: 32rem;
	margin-bottom: var(--space-4);
}
.page-lead {
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
	max-width: 44rem;
}

.phase {
	padding-block: var(--space-20);
	border-bottom: 1px solid var(--color-border);
}
.phase-alt {
	background: var(--color-surface);
}

.phase-header {
	max-width: 48rem;
	margin-bottom: var(--space-10);
}
.phase-marker {
	display: flex;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}
.phase-tag {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	color: var(--color-space);
	background: var(--color-trust);
	padding: var(--space-1) var(--space-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.phase-tag.tag-energy {
	background: var(--color-energy);
	color: var(--color-authority);
}
.phase-duration {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-structure);
}

.phase-header h2 {
	font-size: clamp(1.875rem, 3.5vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-3);
}
.phase-subtitle {
	font-family: var(--font-display);
	font-weight: var(--font-bold);
	font-size: var(--text-lg);
	color: var(--color-brand);   /* mode-aware */
	font-style: italic;
}

.phase-body {
	max-width: 48rem;
}
.phase-body p {
	font-family: var(--font-serif);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
	margin-bottom: var(--space-4);
}
.phase-body-with-image {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: var(--space-10);
	align-items: start;
	max-width: 64rem;
}
.phase-text > *:last-child {
	margin-bottom: 0;
}
.phase-image {
	margin: 0;
}
.phase-image img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--color-border);
}
.phase-image-wide {
	margin: var(--space-8) 0;
	max-width: 100%;
}
@media (max-width: 880px) {
	.phase-body-with-image {
		grid-template-columns: 1fr;
	}
}

.bullet-grid {
	margin-top: var(--space-6);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}
.bullet-item {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
}
.bullet-mark {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	background: var(--color-energy);
	margin-top: 8px;
}
.bullet-item p {
	font-family: var(--font-serif);
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	color: var(--color-text);
}

/* Timeline */
.timeline {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	margin-top: var(--space-8);
}
.timeline-step {
	padding: var(--space-6);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-top: 4px solid var(--color-energy);
}
.timeline-week {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	color: var(--color-energy);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: var(--space-3);
}
.timeline-step h3 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--font-black);
	color: var(--color-text-strong);
	margin-bottom: var(--space-3);
	letter-spacing: -0.01em;
}
.timeline-step p {
	font-family: var(--font-serif);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
}

/* Framework */
.framework {
	padding-block: var(--space-20);
}
/* Per David's round-2 feedback: more breathing room under the
   "Bloom Growth OS™" headline before the 8-element grid. */
.framework .section-header {
	margin-bottom: var(--space-16);
}
.framework .section-header h2 {
	margin-top: var(--space-3);
}
.bgos-diagram {
	margin: 0 auto var(--space-10);
	max-width: 560px;
	text-align: center;
}
.bgos-diagram img {
	width: 100%;
	height: auto;
	display: block;
}
.bgos-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-3);
	margin-bottom: var(--space-8);
}
.bgos-element {
	padding: var(--space-6);
	background: var(--color-surface);
	border-top: 3px solid var(--color-depth);
}
.bgos-num {
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	color: var(--color-depth);
	display: block;
	margin-bottom: var(--space-2);
	letter-spacing: 0.1em;
}
.bgos-element h3 {
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: var(--font-black);
	color: var(--color-text-strong);
	letter-spacing: -0.01em;
}
.framework-note {
	font-family: var(--font-serif);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
	max-width: 48rem;
	padding-left: var(--space-6);
	border-left: 3px solid var(--color-energy);
}

/* Closing CTA — same shape as homepage */
.closing-cta {
	padding-block: var(--space-24);
	background: var(--color-trust);
	color: #FFFFFF;
	text-align: center;
}
.closing-headline {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3.2vw, 2.5rem);
	font-weight: var(--font-black);
	color: #FFFFFF;
	line-height: 1.2;
	max-width: 36rem;
	margin: 0 auto var(--space-6);
	letter-spacing: -0.02em;
}
.btn-lg {
	font-size: var(--text-base);
	padding: var(--space-4) var(--space-10);
}

@media (max-width: 880px) {
	.bgos-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.timeline,
	.bullet-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- ActiveCampaign contact form ---------- */

#_form_26_ {
  max-width: 640px;
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  line-height: 1.6;
  box-shadow: none;
}

#_form_26_ ._form-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}
#_form_26_ ._form-content > * { grid-column: 1 / -1; }
#_form_26_ ._field_firstname { grid-column: 1 / 2; }
#_form_26_ ._field_lastname  { grid-column: 2 / 3; }

#_form_26_ ._form_element { margin: 0 0 20px; }
#_form_26_ ._field_header { margin-bottom: 8px; }
#_form_26_ ._field_html   { margin-bottom: 28px; }

#_form_26_ ._form-title {
  margin: 0;
  font-family: 'Arial Black', Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  color: inherit;
}

#_form_26_ ._html-code {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.0625rem;
  color: color-mix(in srgb, currentColor 72%, transparent);
}

#_form_26_ ._form-label {
  display: block;
  margin-bottom: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, currentColor 80%, transparent);
}

#_form_26_ .field-required {
  margin-left: 3px;
  color: var(--color-urgency, #D93025);
  font-weight: 700;
}

#_form_26_ input[type="text"],
#_form_26_ textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  line-height: 1.5;
  color: inherit;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: 4px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

#_form_26_ textarea { resize: vertical; min-height: 140px; }

#_form_26_ input::placeholder,
#_form_26_ textarea::placeholder {
  color: color-mix(in srgb, currentColor 45%, transparent);
  opacity: 1;
}

#_form_26_ input[type="text"]:focus-visible,
#_form_26_ textarea:focus-visible {
  outline: none;
  border-color: var(--color-trust, #1B3F8B);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-trust, #1B3F8B) 24%, transparent);
}

/* invalid state, applied by AC's script */
#_form_26_ input._has_error,
#_form_26_ textarea._has_error {
  border-color: var(--color-urgency, #D93025);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-urgency, #D93025) 18%, transparent);
}

/* per-field validation messages: static blocks, not tooltips */
#_form_26_ ._error { display: block; margin-top: 7px; }
#_form_26_ ._error-arrow { display: none; }
#_form_26_ ._error-inner {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-urgency, #D93025);
}

/* submission-level error, inserted above the button */
#_form_26_ ._form-inner._show_be_error { margin-bottom: 16px; }
#_form_26_ ._form_error {
  padding: 12px 14px;
  border-left: 3px solid var(--color-urgency, #D93025);
  background: color-mix(in srgb, var(--color-urgency, #D93025) 10%, transparent);
}

#_form_26_ ._field_captcha { margin-bottom: 24px; }
#_form_26_ .g-recaptcha { max-width: 100%; overflow: hidden; }

#_form_26_ ._button-wrapper { margin-top: 4px; }

/* the button inherits .btn-primary .btn-lg; only state handling here */
#_form_26_ ._submit { cursor: pointer; }
#_form_26_ ._submit:disabled { cursor: not-allowed; opacity: 0.45; }
#_form_26_ ._submit.processing { cursor: progress; opacity: 0.7; }

/* inline fallback confirmation, used until the /thank-you redirect is live */
#_form_26_ ._form-thank-you {
  padding: 20px 22px;
  border-left: 3px solid var(--color-growth, #1A7A34);
  background: color-mix(in srgb, var(--color-growth, #1A7A34) 9%, transparent);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.0625rem;
}
#_form_26_ ._form-thank-you:focus-visible {
  outline: 2px solid var(--color-trust, #1B3F8B);
  outline-offset: 3px;
}

#_form_26_ ._form_hide { display: none; visibility: hidden; }
#_form_26_ ._form_show { display: block; visibility: visible; }
#_form_26_ ._clear-element { clear: both; }

@media (max-width: 640px) {
  #_form_26_ ._field_firstname,
  #_form_26_ ._field_lastname { grid-column: 1 / -1; }
}

/* reCAPTCHA is a fixed 304px; reclaim room and scale it on small screens */
@media (max-width: 480px) {
  .contact-card:has(#_form_26_) {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 383px) {
  #_form_26_ .g-recaptcha { height: 72px; }
  #_form_26_ .g-recaptcha > div {
    transform: scale(0.9);
    transform-origin: 0 0;
  }
}
@media (max-width: 355px) {
  #_form_26_ .g-recaptcha { height: 62px; }
  #_form_26_ .g-recaptcha > div {
    transform: scale(0.78);
    transform-origin: 0 0;
  }
}

/* ---------- /contact right column ---------- */

.contact-talk {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.contact-card .contact-talk__label {
  margin: 0 0 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-trust, #1B3F8B);
}

.contact-card .contact-talk__body {
  margin: 0 0 18px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: color-mix(in srgb, currentColor 78%, transparent);
}

/* always-dark strip, pinned to the bottom of the flex column */
.contact-connect {
  margin-top: auto;
  background: var(--color-authority, #0A0A0A);
  color: #FCFDF9;
  padding: 22px 32px 24px;
}

.contact-card .contact-connect__label {
  margin: 0 0 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(252, 253, 249, 0.6);
}

.contact-connect__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.contact-connect__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #FCFDF9;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Only the text label responds to hover. The icons must never change. */
.contact-connect__link span { transition: color 140ms ease; }
.contact-connect__link:hover span,
.contact-connect__link:focus-visible span { color: var(--color-energy, #F5C400); }

.contact-connect__link:focus-visible {
  outline: 2px solid var(--color-energy, #F5C400);
  outline-offset: 3px;
}

.contact-connect__icon {
  display: block;
  flex: 0 0 auto;
}
.contact-connect__icon--in { width: 32px; height: 32px; }
.contact-connect__icon--bg { width: 38px; height: 38px; }

@media (max-width: 640px) {
  .contact-connect { padding: 20px 24px 22px; }
}

/* ---------- /thank-you ---------- */

.thankyou {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) 20px clamp(56px, 8vw, 104px);
}

.thankyou-hero {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.thankyou-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.thankyou-eyebrow {
  margin: 0 0 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-trust, #1B3F8B);
}

.thankyou-title {
  margin: 0 0 18px;
  font-family: 'Arial Black', Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.05;
  font-size: clamp(1.75rem, 4.6vw, 3rem);
  text-wrap: balance;
}

.thankyou-hero__body p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 16px;
}

.thankyou-lead {
  font-size: 1.1875rem;
  padding-left: 16px;
  border-left: 3px solid var(--color-trust, #1B3F8B);
}

.thankyou-tagline {
  font-size: 1.125rem;
}
.thankyou-tagline strong {
  font-family: 'Arial Black', Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.thankyou-signature {
  margin-top: 24px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, currentColor 65%, transparent);
}

.thankyou-next {
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.thankyou-next__title {
  margin: 0 0 24px;
  font-family: 'Arial Black', Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
  color: color-mix(in srgb, currentColor 70%, transparent);
}

.thankyou-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.thankyou-card {
  display: block;
  padding: 26px 26px 24px;
  text-decoration: none;
  color: inherit;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 4px;
  transition: border-color 140ms ease, transform 140ms ease;
}

.thankyou-card:hover,
.thankyou-card:focus-visible {
  border-color: var(--color-trust, #1B3F8B);
  transform: translateY(-2px);
}

.thankyou-card:focus-visible {
  outline: 2px solid var(--color-trust, #1B3F8B);
  outline-offset: 3px;
}

.thankyou-card__title {
  margin: 0 0 10px;
  font-family: 'Arial Black', Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
  font-size: 1.0625rem;
}

.thankyou-card__body {
  margin: 0 0 16px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: color-mix(in srgb, currentColor 78%, transparent);
}

.thankyou-card__cta {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-trust, #1B3F8B);
}
.thankyou-card__cta::after {
  content: ' \2192';
}

@media (prefers-reduced-motion: reduce) {
  .thankyou-card { transition: none; }
  .thankyou-card:hover,
  .thankyou-card:focus-visible { transform: none; }
}

@media (max-width: 800px) {
  .thankyou-hero { grid-template-columns: minmax(0, 1fr); }
  .thankyou-hero__media { max-width: 220px; }
  .thankyou-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------
   Koko EO Forum feedback form — /koko-feedback-0915 (unlisted).
   Standalone page: no header/nav/footer, wordmark + subway bar only.
   ------------------------------------------------------------------ */
.koko { min-height: 100vh; display: flex; flex-direction: column; }
.koko-main { flex: 1; width: 100%; padding-block: var(--space-6) var(--space-12); padding-inline: var(--space-4); }
.koko-wordmark {
	font-family: var(--font-display);
	font-weight: var(--font-black);
	font-size: var(--text-sm);
	letter-spacing: 0.04em;
	color: var(--color-text-strong);
	margin: 0 0 var(--space-6);
}
.koko-title { font-size: var(--text-xl); line-height: var(--leading-snug); margin: 0 0 var(--space-2); }
.koko-meta {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	color: var(--color-brand);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--color-energy);
	display: inline-block;
	margin: 0 0 var(--space-4);
}
.koko-intro { margin: 0 0 var(--space-6); }
.koko-form { display: grid; gap: var(--space-6); }
.koko-field { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-2); }
.koko-field > label,
.koko-field > legend,
.koko-sublabel {
	font-family: var(--font-sans);
	font-weight: var(--font-bold);
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	color: var(--color-text-strong);
	padding: 0;
}
.koko-field > legend { margin-bottom: var(--space-2); }
.koko-sublabel { font-weight: var(--font-normal); margin-top: var(--space-2); }
.koko-optional { font-weight: var(--font-normal); color: var(--color-text-muted); font-size: var(--text-sm); }
.koko-required { font-weight: var(--font-normal); color: var(--color-text-muted); font-size: var(--text-sm); }
.koko-form input[type="text"],
.koko-form textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: var(--text-base); /* 16px: stops iOS zoom on focus */
	color: var(--color-text-strong);
	background: var(--color-bg);
	border: 1px solid var(--color-text-muted);
	border-radius: var(--radius);
	padding: var(--space-2) var(--space-3);
	resize: vertical;
}
.koko-form input[type="text"]:focus-visible,
.koko-form textarea:focus-visible,
.koko-choices input:focus-visible {
	outline: 3px solid var(--color-brand);
	outline-offset: 2px;
}
.koko-form [aria-invalid="true"] { border-color: var(--color-urgency); }

/* 0–10 scale: 6 per row on phones, all 11 in one row from 30rem. */
.koko-scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
@media (min-width: 30rem) { .koko-scale { grid-template-columns: repeat(11, 1fr); gap: var(--space-1); } }
.koko-scale input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.koko-scale label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	font-family: var(--font-sans);
	font-weight: var(--font-bold);
	color: var(--color-text-strong);
	border: 1px solid var(--color-text-muted);
	border-radius: var(--radius);
	cursor: pointer;
	user-select: none;
}
.koko-scale label:hover { border-color: var(--color-brand); }
.koko-scale input:checked + label {
	background: var(--color-trust);
	border-color: var(--color-trust);
	color: #FFFFFF;
}
.koko-scale input:focus-visible + label { outline: 3px solid var(--color-brand); outline-offset: 2px; }
.koko-scale input[aria-invalid="true"] + label { border-color: var(--color-urgency); }
.koko-scale-ends {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0;
}
.koko-choices { display: grid; gap: var(--space-1); }
.koko-choices label {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 44px;
	font-family: var(--font-sans);
	color: var(--color-text-strong);
	cursor: pointer;
}
.koko-choices input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-trust); flex: none; }
.koko-error {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	color: var(--color-urgency);
	margin: 0;
}
.koko-form-error { padding: var(--space-3); border: 2px solid var(--color-urgency); border-radius: var(--radius); }
.koko-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.koko-submit { justify-self: start; width: 100%; }
@media (min-width: 30rem) { .koko-submit { width: auto; } }
.koko-submit:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 3px; }
.koko-submit:disabled { opacity: 0.7; cursor: progress; }
.koko-done {
	padding: var(--space-6);
	border-left: 4px solid var(--color-growth);
	background: var(--color-surface);
}
.koko-done p { margin: 0; font-size: var(--text-lg); color: var(--color-text-strong); }
.koko-done:focus { outline: none; }
:root.dark .koko-scale input:checked + label { background: var(--color-brand); border-color: var(--color-brand); color: #0A0A0A; }
:root.dark .koko-error { color: #FF8A80; }
:root.dark .koko-form [aria-invalid="true"] { border-color: #FF8A80; }