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