/* ============================================================
   Jamshad Anwar Portfolio v3 — Minimalist Mono design system
   Charcoal text · soft-white canvas · cobalt as the single accent.
   Logo: Search-Up Mark + ja. wordmark (Fraunces italic).
   No light/dark toggle. WCAG AA contrast everywhere.
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens — locked palette: 04 Minimalist Mono (per branding-exploration.pdf)
   ------------------------------------------------------------ */
:root {
	color-scheme: light;

	/* Accent — single cobalt blue, used for CTAs / links / hovers / brand period */
	--accent:       #2541FF;   /* primary — buttons, links, link-hover */
	--accent-soft:  #5B73FF;   /* hover state, lighter ink */
	--accent-press: #1932CC;   /* pressed state */
	--accent-bg:    #EEF1FF;   /* tinted accent panel background */

	/* Ink — charcoal does ALL the heavy text lifting in mono */
	--ink:          #1A1A1A;   /* headlines + body */
	--ink-deep:     #000000;   /* deepest dark-band sections */
	--cyan:         #06B6D4;   /* DATA-VIZ ONLY — charts, KPI deltas; never UI chrome */

	/* Canvas */
	--canvas:       #F7F7F5;   /* default body bg (soft-white) */
	--canvas-2:     #FAFAFA;   /* alternate band (gray-50) */
	--surface:      #FFFFFF;   /* cards */
	--surface-alt:  #FAFAFA;

	/* Editorial accent surfaces — neutral grays in Minimalist Mono */
	--cream:        #ECECE9;   /* gray-200; "editorial" sections, programs hub */
	--cream-deep:   #E5E5E2;   /* hairline accents on cream/gray bands */

	/* Grayscale spine */
	--gray-700:     #3F3F3F;   /* muted body, secondary text */
	--gray-500:     #6B6B6B;
	--gray-400:     #A0A0A0;   /* captions */
	--gray-200:     #ECECE9;   /* hairlines, surface-alt */
	--gray-50:      #FAFAFA;

	/* Text — semantic */
	--ink-body:     var(--gray-700);     /* body copy */
	--ink-warm:     var(--gray-700);     /* mono palette uses one body color */
	--ink-muted:    #4B5563;             /* labels, eyebrows */
	--ink-subtle:   #6B7280;             /* captions, secondary copy */
	--ink-faint:    var(--gray-400);     /* hairlines, dots */

	/* Borders */
	--rule:         rgba(26, 26, 26, 0.08);
	--rule-strong:  rgba(26, 26, 26, 0.16);
	--rule-warm:    rgba(26, 26, 26, 0.10);
	--rule-accent:  rgba(37, 65, 255, 0.45);

	/* Legacy aliases (v2 → v3 transition; will deprecate before v3 beta).
	   Keeps existing rules that reference --gold / --navy / --rule-gold working. */
	--gold:         var(--accent);
	--gold-soft:    var(--accent-soft);
	--gold-press:   var(--accent-press);
	--gold-bg:      var(--accent-bg);
	--rule-gold:    var(--rule-accent);
	--navy:         var(--ink);
	--navy-deep:    var(--ink-deep);

	/* Type stack — v3 locked: Plus Jakarta Sans + Inter + Fraunces */
	--font-display:   'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body:      'Inter',              system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-editorial: 'Fraunces', Georgia, 'Times New Roman', serif;

	/* Type scale */
	--fs-xs:  0.75rem;    /* 12 */
	--fs-sm:  0.875rem;   /* 14 */
	--fs-md:  1rem;       /* 16 */
	--fs-lg:  1.125rem;   /* 18 */
	--fs-xl:  1.3125rem;  /* 21 */
	--fs-2xl: 1.5rem;     /* 24 */
	--fs-3xl: 2rem;       /* 32 */
	--fs-4xl: 2.5rem;     /* 40 */
	--fs-5xl: 3.5rem;     /* 56 */
	--fs-6xl: 4.5rem;     /* 72 */

	/* Spacing (8pt) */
	--s-1:  4px;
	--s-2:  8px;
	--s-3:  12px;
	--s-4:  16px;
	--s-5:  24px;
	--s-6:  32px;
	--s-7:  48px;
	--s-8:  64px;
	--s-9:  96px;
	--s-10: 128px;

	/* Radius */
	--r-sm:   8px;
	--r-md:   12px;
	--r-lg:   16px;
	--r-xl:   24px;
	--r-pill: 999px;

	/* Motion */
	--ease:    cubic-bezier(0.22, 1, 0.36, 1);
	--dur-1:   140ms;
	--dur-2:   220ms;
	--dur-3:   400ms;

	/* Shadow — subtle, single layer (charcoal RGB for mono palette) */
	--shadow-1: 0 1px 2px rgba(26, 26, 26, 0.04);
	--shadow-2: 0 8px 24px rgba(26, 26, 26, 0.06);
	--shadow-3: 0 16px 40px rgba(26, 26, 26, 0.08);

	/* Layout */
	--container:        1200px;
	--container-narrow: 760px;
	--container-prose:  680px;   /* v3: tight measure for editorial body text */
	--header-h:         72px;
}

/* ------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { min-height: 100%; }
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
	-webkit-text-size-adjust: 100%;
}
body {
	font-family: var(--font-body);
	background: var(--canvas);
	color: var(--ink-body);
	font-size: var(--fs-md);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
img { object-fit: cover; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; transition: color var(--dur-1) var(--ease); }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--ink);
}
::selection { background: var(--gold); color: var(--navy); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.skip-link {
	position: absolute; top: -40px; left: 8px;
	background: var(--gold); color: var(--navy);
	padding: 8px 16px; border-radius: var(--r-sm);
	z-index: 999;
	font-weight: 600;
}
.skip-link:focus { top: 8px; }

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

/* ------------------------------------------------------------
   3. Layout primitives
   ------------------------------------------------------------ */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: max(20px, env(safe-area-inset-left));
	padding-right: max(20px, env(safe-area-inset-right));
}
.container-narrow {
	max-width: var(--container-narrow);
	margin-inline: auto;
	padding-inline: max(20px, env(safe-area-inset-left));
	padding-right: max(20px, env(safe-area-inset-right));
}
.section {
	padding: clamp(40px, 6vw, 72px) 0;
	position: relative;
}
.section--alt { background: var(--canvas-2); }
.section--dark {
	background: var(--navy);
	color: #E5E7EB;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #FFFFFF; }
.section--dark .section-lead { color: #C2C7CF; }

.section-head {
	max-width: 720px;
	margin: 0 auto var(--s-7);
	text-align: center;
}
.section-head--left { text-align: left; margin-left: 0; }
.section-foot { text-align: center; margin-top: var(--s-7); }
.text-center { text-align: center; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-press);
	font-weight: 600;
	margin-bottom: var(--s-4);
}
.eyebrow::before {
	content: '';
	width: 18px; height: 2px;
	background: var(--gold);
	border-radius: 2px;
}

.section-title {
	font-size: clamp(1.75rem, 3.4vw, var(--fs-4xl));
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.022em;
	text-wrap: balance;
}
.section-lead {
	margin-top: var(--s-4);
	font-size: var(--fs-lg);
	color: var(--ink-muted);
	line-height: 1.55;
	text-wrap: pretty;
}

.text-gold { color: var(--gold-press); }

/* ------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding: 12px 22px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.005em;
	transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
	cursor: pointer;
	white-space: nowrap;
	border: 1px solid transparent;
	min-height: 44px;
	-webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
	background: var(--accent);
	color: #FFFFFF;
	box-shadow: 0 4px 16px rgba(37, 65, 255, 0.28);
}
.btn--primary:hover {
	background: var(--accent-press);
	color: #FFFFFF;
	box-shadow: 0 8px 24px rgba(37, 65, 255, 0.38);
}
.btn--primary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}
.btn--primary svg { color: #FFFFFF; }

.btn--secondary {
	background: var(--surface);
	color: var(--ink);
	border-color: var(--rule-strong);
}
.btn--secondary:hover {
	background: var(--surface-alt);
	border-color: var(--navy);
}

.btn--ghost {
	background: transparent;
	color: var(--ink);
}
.btn--ghost:hover { color: var(--gold-press); }

.btn--dark {
	background: var(--navy);
	color: #FFFFFF;
}
.btn--dark:hover { background: #16204D; }

.btn--icon {
	width: 44px; height: 44px;
	padding: 0;
	border-radius: var(--r-md);
	background: var(--surface);
	border-color: var(--rule);
}
.btn--lg { padding: 16px 28px; font-size: 1.0625rem; }
.btn--sm { padding: 8px 16px; font-size: 0.875rem; min-height: 36px; }
.btn--block { width: 100%; }

/* ------------------------------------------------------------
   5. Icons
   ------------------------------------------------------------ */
.icon, .icon-sm, .icon-md, .icon-lg, .icon-xs {
	flex: none;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.75;
}
.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 18px; height: 18px; }
.icon { width: 22px; height: 22px; }
.icon-md { width: 26px; height: 26px; }
.icon-lg { width: 32px; height: 32px; }

/* ------------------------------------------------------------
   6. Header / nav
   ------------------------------------------------------------ */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	height: var(--header-h);
	background: rgba(250, 250, 247, 0.85);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	transition: box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
	border-bottom: 1px solid transparent;
}
.site-header[data-shrink="true"] {
	border-bottom: 1px solid var(--rule);
	box-shadow: 0 4px 20px rgba(10, 15, 46, 0.04);
}
.header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	gap: var(--s-5);
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
}
.brand:hover { color: var(--accent-press); }
/* v2 .ja-brand-mark border-radius/rotate-on-hover removed — the v3 badge is
   already a circle and uses period-pulse for life. Legacy .brand-text block
   below is dead but kept for any third-party menu plugins still emitting it. */
.brand-text { display: none; flex-direction: column; line-height: 1.15; }
.brand-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--ink);
}
.brand-role {
	font-size: 0.72rem;
	color: var(--ink-muted);
}

.primary-nav { display: none; }
.nav-list {
	display: flex;
	gap: 2px;
	align-items: center;
}
.nav-list .nav-link, .nav-list a {
	display: inline-block;
	padding: 8px 14px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--ink-muted);
	border-radius: var(--r-pill);
	position: relative;
}
.nav-list a:hover {
	color: var(--ink);
	background: rgba(10, 15, 46, 0.04);
}
.nav-list .is-active,
.nav-list .current-menu-item a {
	color: var(--ink);
}
.nav-list .is-active::after,
.nav-list .current-menu-item a::after {
	content: '';
	position: absolute;
	left: 50%; bottom: 2px;
	transform: translateX(-50%);
	width: 16px; height: 2px;
	background: var(--gold);
	border-radius: 2px;
}

.header-cta {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}
.nav-toggle { display: inline-flex; }
.hide-sm { display: none; }
.hide-md { display: none; }

/* Mobile nav */
.mobile-nav {
	position: fixed;
	top: var(--header-h);
	left: 0; right: 0;
	bottom: 0;
	background: rgba(250, 250, 247, 0.98);
	backdrop-filter: blur(20px);
	z-index: 99;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--s-6) 0 var(--s-8);
	padding-bottom: max(var(--s-8), env(safe-area-inset-bottom));
	transform: translateY(-8px);
	opacity: 0;
	transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav.is-open { opacity: 1; transform: translateY(0); }
.mobile-nav-list {
	display: flex; flex-direction: column;
	gap: 2px;
	margin-bottom: var(--s-5);
}
.mobile-nav-list a {
	display: block;
	padding: var(--s-4) var(--s-2);
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--ink);
	border-bottom: 1px solid var(--rule);
}
.mobile-nav-list a:hover { color: var(--gold-press); }

/* Sticky mobile CTA bar */
.mobile-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 90;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	padding: 8px;
	padding-bottom: max(8px, env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(16px);
	border-top: 1px solid var(--rule);
	box-shadow: 0 -8px 24px rgba(10, 15, 46, 0.06);
}
.mobile-bar a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 10px 8px;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--ink);
	border-radius: var(--r-md);
	min-height: 48px;
}
.mobile-bar a:hover { background: var(--surface-alt); }
.mobile-bar a.mobile-bar--primary {
	background: var(--gold);
	color: var(--navy);
}
.mobile-bar a.mobile-bar--primary:hover { background: var(--gold-press); }
.mobile-bar svg { color: currentColor; }

/* ------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------ */
.site-main { padding-top: var(--header-h); position: relative; z-index: 1; }
.hero {
	position: relative;
	padding: clamp(56px, 9vw, 112px) 0 clamp(56px, 8vw, 96px);
	overflow: hidden;
}
.hero-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 880px;
	margin: 0 auto;
}
.availability {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 16px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 600;
	margin-bottom: var(--s-5);
	box-shadow: var(--shadow-1);
}
.status-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #16A34A;
	box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4);
	animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
	70% { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
	100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.dot-sep { color: var(--ink-faint); margin: 0 4px; }

.hero-headline {
	font-size: clamp(2.25rem, 6vw, var(--fs-5xl));
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--navy);
	max-width: 18ch;
	margin-bottom: var(--s-5);
	text-wrap: balance;
}
.hero-headline .accent {
	color: var(--gold-press);
	position: relative;
	white-space: nowrap;
}
.hero-headline .accent::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 4%;
	height: 6px;
	background: var(--gold-soft);
	opacity: 0.5;
	z-index: -1;
	border-radius: 4px;
}
.hero-subheadline {
	max-width: 64ch;
	font-size: clamp(1.05rem, 1.6vw, var(--fs-xl));
	color: var(--ink-muted);
	line-height: 1.55;
	margin-bottom: var(--s-7);
	text-wrap: pretty;
}
.hero-ctas {
	display: flex; flex-wrap: wrap;
	gap: var(--s-3);
	justify-content: center;
	margin-bottom: var(--s-8);
}
.hero-trust {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	font-size: var(--fs-sm);
	color: var(--ink-subtle);
	font-weight: 500;
	margin-top: -32px;
	margin-bottom: var(--s-7);
}
.hero-trust strong { color: var(--ink-body); font-weight: 700; }

.hero-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	width: 100%;
	max-width: 880px;
	background: var(--rule);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	overflow: hidden;
}
.stat {
	background: var(--surface);
	padding: var(--s-5) var(--s-4);
	text-align: center;
}
.stat-value {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 3vw, var(--fs-3xl));
	color: var(--navy);
	letter-spacing: -0.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.stat-label {
	margin-top: var(--s-2);
	font-size: var(--fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 500;
}

/* ------------------------------------------------------------
   8. Trust strip (markets + counters)
   ------------------------------------------------------------ */
.trust-strip {
	background: var(--surface);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	padding: var(--s-5) 0;
}
.trust-row {
	display: flex; flex-wrap: wrap;
	gap: var(--s-3) var(--s-6);
	justify-content: center;
	align-items: center;
}
.trust-label {
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-subtle);
	font-weight: 600;
}
.country-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--fs-sm);
	color: var(--ink-body);
	font-weight: 500;
}
.country-code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px; height: 22px;
	padding: 0 6px;
	background: var(--canvas-2);
	border: 1px solid var(--rule);
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ink);
	font-family: var(--font-display);
}

/* ------------------------------------------------------------
   9. Positioning grid
   ------------------------------------------------------------ */
.position-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-3);
}
.position-card {
	position: relative;
	padding: var(--s-6);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.position-card:hover {
	transform: translateY(-3px);
	border-color: var(--rule-strong);
	box-shadow: var(--shadow-2);
}
.position-num {
	font-family: var(--font-display);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--gold-press);
	margin-bottom: var(--s-3);
}
.position-card h3 {
	font-size: var(--fs-xl);
	margin-bottom: var(--s-3);
	color: var(--navy);
}
.position-card p {
	color: var(--ink-muted);
	font-size: var(--fs-md);
	line-height: 1.6;
}

/* ------------------------------------------------------------
   10. About section
   ------------------------------------------------------------ */
.about-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7);
	align-items: start;
}
.photo-frame {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--r-xl);
	background: linear-gradient(160deg, var(--canvas-2), var(--surface));
	border: 1px solid var(--rule);
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--shadow-2);
}
.photo-frame::before {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(circle at 30% 20%, rgba(217, 174, 46, 0.10), transparent 55%);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-monogram {
	position: relative;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(5rem, 14vw, 8rem);
	color: var(--gold-press);
	letter-spacing: -0.04em;
	line-height: 1;
}
.photo-meta {
	position: absolute; bottom: 16px; left: 16px; right: 16px;
	display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.photo-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	border: 1px solid var(--rule);
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	color: var(--ink-body);
	font-weight: 500;
}
.photo-pill svg { color: var(--gold-press); }

.about-copy p {
	color: var(--ink-body);
	margin-top: var(--s-4);
	font-size: var(--fs-lg);
	line-height: 1.7;
}
.about-copy p:first-of-type { margin-top: var(--s-5); }
.about-actions {
	margin-top: var(--s-6);
	display: flex; flex-wrap: wrap; gap: var(--s-3);
}
.about-sidebar {
	display: flex; flex-direction: column;
	gap: var(--s-5);
}
.fact-list {
	display: flex; flex-direction: column;
	gap: var(--s-4);
	padding: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
}
.fact-list > div {
	display: flex; flex-direction: column;
	gap: 4px;
}
.fact-list dt {
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 600;
}
.fact-list dd {
	font-size: var(--fs-md);
	color: var(--ink);
	margin: 0;
}
.about-block { margin-top: var(--s-8); }
.edu-card {
	padding: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
}
.edu-card h3 { font-size: var(--fs-lg); margin-bottom: 4px; color: var(--navy); }

/* ------------------------------------------------------------
   11. Services grid
   ------------------------------------------------------------ */
.services-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-3);
}
.service-card {
	padding: var(--s-6);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
	display: flex; flex-direction: column;
	gap: var(--s-3);
	position: relative;
}
.service-card:hover {
	transform: translateY(-3px);
	border-color: var(--rule-strong);
	box-shadow: var(--shadow-2);
}
.service-icon {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 48px; height: 48px;
	border-radius: var(--r-md);
	background: var(--gold-bg);
	color: var(--gold-press);
	margin-bottom: 4px;
}
.service-title { font-size: var(--fs-xl); color: var(--navy); }
.service-tagline {
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-press);
	font-weight: 600;
}
.service-body {
	color: var(--ink-body);
	font-size: var(--fs-md);
	line-height: 1.6;
	margin-top: 4px;
}
.service-pricing {
	margin-top: auto;
	padding-top: var(--s-3);
	border-top: 1px dashed var(--rule);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-3);
}
.service-pricing-tier {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--navy);
	font-size: var(--fs-md);
}
.service-pricing-note {
	font-size: var(--fs-xs);
	color: var(--ink-subtle);
}
.tag-list {
	display: flex; flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--s-2);
}
.tag {
	display: inline-block;
	padding: 4px 10px;
	background: var(--surface-alt);
	border: 1px solid var(--rule);
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	font-weight: 500;
}
.service-link {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--gold-press);
	font-weight: 600;
	font-size: var(--fs-sm);
	margin-top: var(--s-2);
}
.service-link svg { transition: transform var(--dur-1) var(--ease); }
.service-link:hover { color: var(--navy); }
.service-link:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------
   12. Case study (homepage teaser + archive)
   ------------------------------------------------------------ */
.cases-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
}
.case-card {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.case-card:hover {
	transform: translateY(-4px);
	border-color: var(--rule-strong);
	box-shadow: var(--shadow-3);
}
.case-thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--canvas-2);
}
.case-thumb-fallback {
	width: 100%; height: 100%;
	background: linear-gradient(160deg, var(--canvas-2), var(--canvas));
	display: flex; align-items: center; justify-content: center;
	color: var(--gold-press);
	font-family: var(--font-display);
	font-size: 3rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}
.case-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.case-client {
	font-size: var(--fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 600;
}
.case-title {
	font-size: var(--fs-xl);
	color: var(--navy);
	letter-spacing: -0.015em;
	line-height: 1.3;
}
.case-metric-row {
	display: flex; align-items: baseline; gap: var(--s-3);
	flex-wrap: wrap;
}
.case-metric {
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	font-weight: 800;
	color: var(--gold-press);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.case-metric-label {
	font-size: var(--fs-sm);
	color: var(--ink-muted);
}
.case-result { color: var(--ink-body); font-size: var(--fs-md); line-height: 1.55; margin-top: var(--s-2); }
.case-meta-row {
	display: flex; flex-wrap: wrap; gap: var(--s-3);
	margin-top: auto;
	padding-top: var(--s-3);
	border-top: 1px dashed var(--rule);
	font-size: var(--fs-xs);
	color: var(--ink-subtle);
}
.case-empty {
	padding: var(--s-7);
	background: var(--surface);
	border: 1px dashed var(--rule-gold);
	border-radius: var(--r-xl);
	text-align: center;
	color: var(--ink-muted);
}
.case-empty strong { color: var(--gold-press); display: block; margin-bottom: var(--s-2); }

/* ------------------------------------------------------------
   13. Portfolio grid (lighter, no live-link bounce)
   ------------------------------------------------------------ */
.portfolio-filter {
	display: flex; flex-wrap: wrap;
	gap: var(--s-2);
	justify-content: center;
	margin-bottom: var(--s-6);
}
.filter-btn {
	padding: 8px 16px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-pill);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--ink-muted);
	cursor: pointer;
	transition: all var(--dur-1) var(--ease);
}
.filter-btn:hover { color: var(--ink); border-color: var(--rule-strong); }
.filter-btn.is-active {
	background: var(--navy);
	color: #FFFFFF;
	border-color: var(--navy);
}

.portfolio-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-3);
}
.portfolio-card {
	transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.portfolio-card[data-hidden="true"] { display: none; }
.portfolio-card-inner {
	position: relative;
	padding: var(--s-4);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	height: 100%;
	transition: all var(--dur-2) var(--ease);
}
.portfolio-card:hover .portfolio-card-inner {
	border-color: var(--rule-strong);
	box-shadow: var(--shadow-1);
	transform: translateY(-2px);
}
.portfolio-domain {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: var(--s-2);
	font-weight: 600;
	min-width: 0;
}
.portfolio-domain a { min-width: 0; flex: 1; }
.portfolio-favicon {
	display: inline-flex;
	align-items: center; justify-content: center;
	width: 28px; height: 28px;
	border-radius: 6px;
	background: var(--gold-bg);
	color: var(--gold-press);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 0.78rem;
}
.portfolio-domain a {
	color: var(--ink);
	font-size: var(--fs-sm);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.portfolio-domain a:hover { color: var(--gold-press); }
.portfolio-niche { color: var(--ink-muted); font-size: var(--fs-sm); margin-bottom: 4px; }
.portfolio-market {
	display: flex; align-items: center; gap: 4px;
	color: var(--ink-subtle);
	font-size: var(--fs-xs);
}
.badge {
	display: inline-block;
	margin-top: var(--s-3);
	padding: 3px 10px;
	border-radius: var(--r-pill);
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
}
.badge-gold {
	background: var(--gold-bg);
	color: var(--gold-press);
	border: 1px solid var(--rule-gold);
}
.badge-current {
	background: rgba(22, 163, 74, 0.10);
	color: #15803D;
	border: 1px solid rgba(22, 163, 74, 0.30);
}
.portfolio-cta { text-align: center; margin-top: var(--s-7); }

/* ------------------------------------------------------------
   14. Career timeline
   ------------------------------------------------------------ */
.timeline {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	padding-left: var(--s-6);
}
.timeline::before {
	content: '';
	position: absolute;
	top: 8px; bottom: 8px;
	left: 8px;
	width: 2px;
	background: linear-gradient(180deg, var(--gold), var(--rule-strong));
	opacity: 0.6;
}
.timeline-item {
	position: relative;
	padding: 0 0 var(--s-7);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-marker {
	position: absolute;
	top: 6px; left: calc(-1 * var(--s-6));
	width: 18px; height: 18px;
	background: var(--surface);
	border: 2px solid var(--gold);
	border-radius: 50%;
	z-index: 1;
}
.timeline-item.is-current .timeline-marker {
	background: var(--gold);
	box-shadow: 0 0 0 0 rgba(217, 174, 46, 0.5);
	animation: pulse-gold 2.4s ease-in-out infinite;
}
@keyframes pulse-gold {
	0% { box-shadow: 0 0 0 0 rgba(217, 174, 46, 0.5); }
	70% { box-shadow: 0 0 0 12px rgba(217, 174, 46, 0); }
	100% { box-shadow: 0 0 0 0 rgba(217, 174, 46, 0); }
}
.timeline-meta {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--s-2);
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-subtle);
	font-weight: 600;
	margin-bottom: var(--s-2);
}
.timeline-dates { color: var(--gold-press); }
.timeline-type::before { content: '·'; margin-right: var(--s-2); color: var(--ink-faint); }
.timeline-role { font-size: var(--fs-xl); margin-bottom: 2px; color: var(--navy); }
.timeline-company { color: var(--ink-muted); font-size: var(--fs-md); margin-bottom: var(--s-3); }
.timeline-bullets {
	color: var(--ink-body);
	font-size: var(--fs-md);
	line-height: 1.6;
}
.timeline-bullets li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 4px;
}
.timeline-bullets li::before {
	content: '';
	position: absolute;
	top: 11px; left: 0;
	width: 8px; height: 1px;
	background: var(--gold);
}

/* ------------------------------------------------------------
   15. Certifications
   ------------------------------------------------------------ */
.cert-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-2);
}
.cert-card {
	display: flex; align-items: flex-start; gap: var(--s-3);
	padding: var(--s-4);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	transition: all var(--dur-2) var(--ease);
}
.cert-card:hover {
	border-color: var(--rule-strong);
	box-shadow: var(--shadow-1);
}
.cert-card svg {
	flex: none;
	color: var(--gold-press);
	background: var(--gold-bg);
	padding: 8px;
	box-sizing: content-box;
	border-radius: var(--r-sm);
}
.cert-name {
	font-weight: 600;
	font-size: var(--fs-md);
	margin-bottom: 4px;
	line-height: 1.4;
	color: var(--ink);
}
.cert-issuer {
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-subtle);
	font-weight: 500;
}

/* ------------------------------------------------------------
   16. Speaking
   ------------------------------------------------------------ */
.speaking-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-4);
	max-width: 800px;
	margin: 0 auto;
}
.speaking-card {
	display: flex; gap: var(--s-5);
	padding: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--gold);
	border-radius: var(--r-md);
	transition: all var(--dur-2) var(--ease);
}
.speaking-card:hover {
	transform: translateX(3px);
	border-left-width: 5px;
	box-shadow: var(--shadow-1);
}
.speaking-icon {
	flex: none;
	width: 44px; height: 44px;
	border-radius: var(--r-md);
	background: var(--gold-bg);
	color: var(--gold-press);
	display: inline-flex; align-items: center; justify-content: center;
}
.speaking-date {
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-press);
	font-weight: 600;
	margin-bottom: 4px;
}
.speaking-event { font-size: var(--fs-lg); margin-bottom: 4px; color: var(--navy); }
.speaking-topic { color: var(--ink-body); font-style: italic; margin-bottom: 4px; }
.speaking-role { color: var(--ink-subtle); font-size: var(--fs-sm); }

/* ------------------------------------------------------------
   17. Audience grid
   ------------------------------------------------------------ */
.audience-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-4);
}
.audience-card {
	padding: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	transition: all var(--dur-2) var(--ease);
}
.audience-card:hover {
	border-color: var(--rule-strong);
	box-shadow: var(--shadow-1);
}
.audience-card h3 {
	font-size: var(--fs-lg);
	margin-bottom: var(--s-4);
	color: var(--navy);
}
.audience-card p {
	font-size: var(--fs-sm);
	color: var(--ink-body);
	margin-bottom: var(--s-2);
	line-height: 1.55;
}
.audience-card strong { color: var(--gold-press); font-weight: 700; }

/* ------------------------------------------------------------
   18. Testimonials
   ------------------------------------------------------------ */
.testimonials-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
}
.testimonial-card {
	padding: var(--s-6);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	position: relative;
}
.testimonial-card::before {
	content: '“';
	position: absolute;
	top: 4px; left: 18px;
	font-family: var(--font-display);
	font-size: 4rem;
	font-weight: 900;
	color: var(--gold-soft);
	opacity: 0.7;
	line-height: 1;
}
.testimonial-card blockquote {
	position: relative;
	font-size: var(--fs-lg);
	color: var(--ink-body);
	line-height: 1.65;
	margin-bottom: var(--s-4);
	padding-top: var(--s-4);
}
.testimonial-card figcaption strong {
	display: block;
	font-weight: 600;
	color: var(--ink);
}
.testimonial-card figcaption span {
	font-size: var(--fs-xs);
	color: var(--ink-subtle);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------
   19. Blog cards
   ------------------------------------------------------------ */
.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
}
.blog-card {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: all var(--dur-2) var(--ease);
}
.blog-card:hover {
	border-color: var(--rule-strong);
	transform: translateY(-3px);
	box-shadow: var(--shadow-2);
}
.blog-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--canvas-2); }
.blog-thumb img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--dur-3) var(--ease);
}
.blog-card:hover .blog-thumb img { transform: scale(1.04); }
.blog-body { padding: var(--s-5); }
.blog-meta {
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-subtle);
	margin-bottom: var(--s-3);
	font-weight: 600;
}
.blog-title {
	font-size: var(--fs-xl);
	margin-bottom: var(--s-3);
	line-height: 1.3;
	text-wrap: balance;
	color: var(--navy);
}
.blog-title a:hover { color: var(--gold-press); }
.blog-excerpt {
	color: var(--ink-body);
	font-size: var(--fs-md);
	line-height: 1.55;
	margin-bottom: var(--s-4);
}

/* ------------------------------------------------------------
   20. FAQ
   ------------------------------------------------------------ */
.faq-list {
	display: grid;
	gap: var(--s-3);
	max-width: 880px;
	margin: 0 auto;
}
.faq-item {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	transition: border-color var(--dur-1) var(--ease);
	margin-bottom: var(--s-3);
}
.faq-item[open] { border-color: var(--rule-strong); }

/* QA fix 2026-05-09: target plain `summary` not `.faq-summary` so the
   homepage + program-detail FAQs are styled consistently. Hide the native
   disclosure triangle (▶) so only the custom + icon shows; rotate to × on open. */
.faq-item summary,
.faq-item .faq-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-5);
	cursor: pointer;
	list-style: none;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.9375rem;       /* ~15px — readable, not heavy */
	line-height: 1.4;
	color: var(--ink);
}
.faq-item summary::-webkit-details-marker,
.faq-item .faq-summary::-webkit-details-marker { display: none; }
.faq-item summary::marker,
.faq-item .faq-summary::marker { content: ''; }
.faq-item summary:focus-visible,
.faq-item .faq-summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
	border-radius: var(--r-md);
}
/* The icon at the end of summary content (the + we render in PHP) */
.faq-item summary svg,
.faq-item .faq-summary svg {
	flex: none;
	width: 28px; height: 28px;
	padding: 6px;
	border-radius: 50%;
	background: var(--accent-bg);
	color: var(--accent-press);
	transition: transform var(--dur-2) var(--ease), background var(--dur-1) var(--ease);
	box-sizing: content-box;
}
.faq-item:hover summary svg { background: var(--accent); color: var(--canvas); }
.faq-item[open] summary svg {
	transform: rotate(45deg);
	background: var(--accent);
	color: var(--canvas);
}

.faq-item p,
.faq-body {
	padding: 0 var(--s-5) var(--s-5);
	color: var(--ink-body);
	font-size: 0.9375rem;
	line-height: 1.65;
	margin: 0;
}

/* ------------------------------------------------------------
   21. CTA card
   ------------------------------------------------------------ */
.cta-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
	padding: clamp(32px, 5vw, 56px);
	background: linear-gradient(135deg, var(--canvas-2), var(--surface));
	border: 1px solid var(--rule-gold);
	border-radius: var(--r-xl);
	position: relative;
	overflow: hidden;
}
.cta-card::before {
	content: '';
	position: absolute;
	top: -50%; right: -20%;
	width: 50%; height: 200%;
	background: radial-gradient(circle, rgba(217, 174, 46, 0.10), transparent 60%);
	pointer-events: none;
}
.cta-title {
	font-size: clamp(1.5rem, 3vw, var(--fs-3xl));
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin-top: 12px;
	margin-bottom: 12px;
	color: var(--navy);
}
.cta-lead { color: var(--ink-body); font-size: var(--fs-lg); }
.cta-actions {
	display: flex; flex-wrap: wrap;
	gap: var(--s-3);
	align-items: center;
}
.cta-card--inline {
	background: var(--surface);
	border-color: var(--rule);
}

/* Risk-reversal microcopy */
.risk-reversal {
	display: inline-flex; flex-wrap: wrap; align-items: center;
	gap: var(--s-3) var(--s-4);
	margin-top: var(--s-3);
	font-size: var(--fs-sm);
	color: var(--ink-muted);
}
.risk-reversal span { display: inline-flex; align-items: center; gap: 6px; }
.risk-reversal svg { color: #16A34A; }

/* ------------------------------------------------------------
   22. Page templates: about, contact, articles
   ------------------------------------------------------------ */
.page-head { text-align: center; max-width: 760px; margin: 0 auto var(--s-7); }
.page-title {
	font-size: clamp(2rem, 4.6vw, var(--fs-5xl));
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--navy);
	text-wrap: balance;
}
.page-lead {
	margin-top: var(--s-4);
	font-size: var(--fs-lg);
	color: var(--ink-muted);
}

.prose {
	font-size: var(--fs-lg);
	line-height: 1.75;
	color: var(--ink-body);
	max-width: 68ch;
	margin: 0 auto;
}
.prose p { margin-bottom: 1.25em; }
.prose h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-top: 2.5em;
	margin-bottom: 0.75em;
	color: var(--navy);
	letter-spacing: -0.015em;
}
.prose h3 {
	font-size: 1.375rem;
	margin-top: 2em;
	margin-bottom: 0.5em;
	color: var(--navy);
}
.prose a {
	color: var(--gold-press);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--navy); }
.prose ul, .prose ol { margin: 1em 0 1.5em 1.5em; }
.prose ul li, .prose ol li { margin-bottom: 0.4em; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose blockquote {
	border-left: 3px solid var(--gold);
	padding-left: var(--s-5);
	margin: 1.5em 0;
	font-style: italic;
	color: var(--ink);
}
.prose code {
	font-size: 0.9em;
	background: var(--canvas-2);
	padding: 2px 8px;
	border-radius: 6px;
	color: var(--gold-press);
}
.prose pre {
	background: var(--navy);
	color: #E5E7EB;
	border: 1px solid var(--rule);
	padding: var(--s-5);
	border-radius: var(--r-md);
	overflow-x: auto;
	font-size: 0.9rem;
}
.prose pre code { background: none; padding: 0; color: inherit; }
.prose img { border-radius: var(--r-md); margin: 1.5em 0; }

.article-head { text-align: center; max-width: 720px; margin: 0 auto var(--s-7); }
.article-meta {
	font-size: var(--fs-sm);
	letter-spacing: 0.06em;
	color: var(--ink-subtle);
	margin-bottom: var(--s-3);
	display: flex; gap: var(--s-2); justify-content: center; align-items: center;
}
.article-meta a { color: var(--gold-press); }
.article-title {
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin-bottom: var(--s-3);
	text-wrap: balance;
	color: var(--navy);
}
.article-lead {
	font-size: var(--fs-xl);
	color: var(--ink-muted);
	line-height: 1.55;
}
.article-hero {
	max-width: 980px; margin: 0 auto var(--s-7);
	border-radius: var(--r-lg);
	overflow: hidden;
}
.article-body { margin-top: var(--s-6); }
.article-foot {
	max-width: 68ch;
	margin: var(--s-8) auto 0;
	border-top: 1px solid var(--rule);
	padding-top: var(--s-6);
}

/* Pagination */
.pagination {
	margin-top: var(--s-7);
	display: flex; flex-wrap: wrap;
	justify-content: center; gap: 6px;
}
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px;
	padding: 0 12px;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-pill);
	font-size: var(--fs-sm);
	color: var(--ink-muted);
	font-weight: 600;
}
.pagination .page-numbers:hover { color: var(--gold-press); border-color: var(--rule-strong); }
.pagination .page-numbers.current {
	background: var(--navy); color: #FFFFFF;
	border-color: var(--navy);
}

/* Contact */
.contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-6);
}
.contact-form-card {
	padding: var(--s-6);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
}
.contact-form-empty h2 { font-size: var(--fs-2xl); margin-bottom: var(--s-3); color: var(--navy); }
.contact-form-empty p { color: var(--ink-body); margin-bottom: var(--s-3); }
.contact-form-empty ul { list-style: none; margin-bottom: var(--s-3); }
.contact-form-empty li {
	position: relative;
	padding: 8px 0 8px 24px;
	border-bottom: 1px solid var(--rule);
	color: var(--ink);
}
.contact-form-empty li::before {
	content: '';
	position: absolute; top: 14px; left: 0;
	width: 12px; height: 2px;
	background: var(--gold);
}
.contact-form-empty li:last-child { border-bottom: 0; }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="url"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea,
.search-form input {
	width: 100%;
	padding: 13px 14px;
	background: var(--canvas);
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-md);
	color: var(--ink);
	font-size: var(--fs-md);
	margin-top: 4px;
	transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.search-form input:focus {
	outline: none;
	border-color: var(--gold-press);
	background: var(--surface);
}
.contact-form label {
	display: block;
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: var(--s-4) 0 4px;
	font-weight: 600;
}
.contact-form input[type="submit"],
.contact-form button[type="submit"],
.contact-form .wpcf7-submit,
.contact-form .wpforms-submit {
	background: var(--gold);
	color: var(--navy);
	font-family: var(--font-display);
	font-weight: 700;
	padding: 14px 28px;
	border: 0;
	border-radius: var(--r-pill);
	cursor: pointer;
	margin-top: var(--s-4);
	transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.contact-form input[type="submit"]:hover,
.contact-form button[type="submit"]:hover { transform: translateY(-1px); background: var(--gold-press); }

.contact-meta { display: flex; flex-direction: column; gap: var(--s-5); }
.meta-block {
	padding: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
}
.meta-block h3 {
	font-size: var(--fs-md);
	margin-bottom: var(--s-3);
	color: var(--navy);
}
.meta-list { display: flex; flex-direction: column; gap: var(--s-3); }
.meta-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.meta-list svg { flex: none; color: var(--gold-press); }
.meta-list a { color: var(--ink); }
.meta-list a:hover { color: var(--gold-press); }
.muted { color: var(--ink-muted); }
.small { font-size: var(--fs-sm); }

/* Calendly placeholder block */
.ja-calendly-placeholder {
	padding: var(--s-7);
	background: var(--surface);
	border: 1px dashed var(--rule-gold);
	border-radius: var(--r-xl);
	text-align: center;
}
.ja-calendly-placeholder strong { color: var(--gold-press); display: block; margin-bottom: var(--s-2); }

/* Tools/Course/Press grid (used on those pages) */
.tool-grid, .course-modules {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-4);
}
.tool-card, .course-mod {
	padding: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	transition: all var(--dur-2) var(--ease);
}
.tool-card:hover, .course-mod:hover {
	border-color: var(--rule-strong);
	box-shadow: var(--shadow-1);
}
.tool-card svg, .course-mod svg {
	color: var(--gold-press);
	margin-bottom: var(--s-4);
	background: var(--gold-bg);
	padding: 10px;
	box-sizing: content-box;
	border-radius: var(--r-md);
}
.tool-card h3, .course-mod h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); color: var(--navy); }
.tool-card p, .course-mod p { color: var(--ink-body); font-size: var(--fs-md); margin-bottom: var(--s-3); }

/* 404 + empty */
.section-404 { padding-top: clamp(96px, 14vw, 160px); }
.empty {
	text-align: center;
	padding: var(--s-8) var(--s-5);
	color: var(--ink-muted);
	font-size: var(--fs-lg);
}
.empty-cta {
	max-width: 720px; margin: 0 auto;
	padding: var(--s-7);
	background: var(--surface);
	border: 1px dashed var(--rule-gold);
	border-radius: var(--r-xl);
}
.empty-cta strong { color: var(--gold-press); display: block; margin-bottom: var(--s-2); }

/* ------------------------------------------------------------
   23. Footer
   ------------------------------------------------------------ */
.site-footer {
	background: var(--navy);
	color: #C2C7CF;
	padding: var(--s-8) 0 var(--s-6);
	margin-top: var(--s-8);
	margin-bottom: 0;
}
body.has-mobile-bar .site-footer { margin-bottom: 64px; }
.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7);
	padding-bottom: var(--s-7);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-brand { color: #FFFFFF; }
.footer-name { font-size: var(--fs-lg); margin-top: var(--s-3); margin-bottom: 2px; color: #FFFFFF; }
.footer-role {
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	color: var(--gold-soft);
	text-transform: uppercase;
	margin-bottom: var(--s-3);
	font-weight: 600;
}
.footer-loc {
	display: inline-flex; align-items: center; gap: 6px;
	color: #C2C7CF;
	font-size: var(--fs-sm);
}
.footer-loc svg { color: var(--gold-soft); }
.footer-h {
	font-size: var(--fs-sm);
	margin-bottom: var(--s-3);
	color: var(--gold-soft);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--s-2); }
.footer-col a {
	display: inline-flex; align-items: center; gap: var(--s-2);
	color: #C2C7CF;
	font-size: var(--fs-sm);
}
.footer-col a:hover { color: var(--gold-soft); }
.footer-col svg { color: rgba(255, 255, 255, 0.5); }
.footer-socials {
	display: flex; gap: var(--s-2);
	margin-top: var(--s-3);
}
.footer-socials a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--r-md);
	color: #C2C7CF;
}
.footer-socials a:hover {
	background: var(--gold);
	color: var(--navy);
	border-color: var(--gold);
}
.footer-meta {
	display: flex; flex-wrap: wrap;
	justify-content: space-between; align-items: center;
	gap: var(--s-3);
	padding-top: var(--s-5);
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--fs-sm);
}
.footer-legal { display: flex; gap: var(--s-5); }
.footer-legal a { color: rgba(255, 255, 255, 0.6); }
.footer-legal a:hover { color: var(--gold-soft); }

/* ------------------------------------------------------------
   24. Reveal animation
   ------------------------------------------------------------ */
.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 600ms var(--ease), transform 600ms var(--ease);
	transition-delay: var(--delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------------
   24b. Case study (single-case_study.php)
   ------------------------------------------------------------ */

.case-hero { padding-top: clamp(48px, 7vw, 80px); padding-bottom: clamp(48px, 6vw, 72px); }
.case-hero-inner { max-width: 920px; margin: 0 auto; text-align: left; }
.case-hero-eyebrow {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--s-2);
	margin-bottom: var(--s-4);
}
.case-hero-eyebrow .eyebrow { margin: 0; }
.case-hero-industry {
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 600;
}
.case-hero-nda {
	display: inline-flex; align-items: center;
	padding: 2px 8px;
	background: var(--canvas-2);
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-sm);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--ink-muted);
	margin-left: var(--s-2);
}
.case-hero-title {
	font-size: clamp(2rem, 4.6vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--navy);
	margin-bottom: var(--s-4);
	text-wrap: balance;
}
.case-hero-lead {
	font-size: var(--fs-xl);
	color: var(--ink-body);
	line-height: 1.55;
	margin-bottom: var(--s-6);
	text-wrap: pretty;
}
.case-hero-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-3) var(--s-5);
	margin-bottom: var(--s-6);
	padding: var(--s-4) var(--s-5);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
}
.case-hero-meta > div { display: flex; flex-direction: column; gap: 2px; }
.case-hero-meta dt {
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 600;
}
.case-hero-meta dd {
	margin: 0;
	font-size: var(--fs-md);
	color: var(--ink);
	font-weight: 500;
}
.case-hero-meta a { color: var(--gold-press); }

.case-hero-headline-metric {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-2);
	padding: var(--s-6) var(--s-7);
	background: linear-gradient(135deg, var(--gold-bg), var(--surface));
	border: 1px solid var(--rule-gold);
	border-radius: var(--r-xl);
	position: relative;
	overflow: hidden;
}
.case-hero-headline-metric::before {
	content: '';
	position: absolute;
	top: -40%; right: -10%;
	width: 40%; height: 200%;
	background: radial-gradient(circle, rgba(217, 174, 46, 0.20), transparent 60%);
	pointer-events: none;
}
.case-hero-metric-value {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.75rem, 6vw, 4.5rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--gold-press);
	font-variant-numeric: tabular-nums;
}
.case-hero-metric-label {
	font-size: var(--fs-md);
	color: var(--ink-body);
	font-weight: 500;
	max-width: 50ch;
}

/* SVG chart card */
.case-chart-card {
	padding: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-1);
}
.ja-chart {
	display: block;
	width: 100%;
	height: auto;
	max-height: 320px;
	font-family: var(--font-body);
}
.ja-chart-grid line {
	stroke: var(--rule);
	stroke-width: 1;
	stroke-dasharray: 2 4;
}
.ja-chart-tick {
	font-size: 11px;
	fill: var(--ink-subtle);
	font-family: var(--font-body);
}
.ja-chart-line {
	fill: none;
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.ja-chart-line--a {
	stroke: var(--ink-faint);
	stroke-dasharray: 4 4;
	opacity: 0.85;
}
.ja-chart-line--b {
	stroke: var(--gold-press);
}
.ja-chart-metric {
	font-size: 11px;
	font-weight: 600;
	fill: var(--ink-subtle);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.ja-chart-legend-text {
	font-size: 11px;
	fill: var(--ink-muted);
	font-weight: 500;
}
.ja-chart-swatch--a { fill: var(--ink-faint); }
.ja-chart-swatch--b { fill: var(--gold-press); }

/* KPI tiles */
.case-kpi-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-3);
}
.case-kpi-tile {
	padding: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	display: flex; flex-direction: column;
	gap: var(--s-2);
}
.case-kpi-label {
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 600;
}
.case-kpi-row {
	display: flex; align-items: baseline; flex-wrap: wrap;
	gap: var(--s-2);
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--navy);
}
.case-kpi-before {
	font-size: var(--fs-lg);
	color: var(--ink-muted);
	text-decoration: line-through;
	text-decoration-color: var(--ink-faint);
	text-decoration-thickness: 1px;
}
.case-kpi-arrow { color: var(--gold-press); display: inline-flex; }
.case-kpi-after {
	font-size: var(--fs-2xl);
	color: var(--navy);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.case-kpi-after-only {
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	font-weight: 800;
	color: var(--gold-press);
	letter-spacing: -0.025em;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.case-kpi-delta {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--ink-body);
	font-family: var(--font-body);
}
.case-kpi-delta--up { color: #15803D; }
.case-kpi-delta--down { color: #B91C1C; }

/* Channel breakdown */
.ja-channel-bars {
	display: grid;
	gap: var(--s-2);
	max-width: 880px;
}
.ja-channel-bar {
	display: grid;
	grid-template-columns: minmax(120px, 160px) 1fr 56px 80px;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
}
.ja-channel-bar-name {
	font-weight: 600;
	color: var(--ink);
}
.ja-channel-bar-track {
	position: relative;
	height: 8px;
	background: var(--canvas-2);
	border-radius: 999px;
	overflow: hidden;
}
.ja-channel-bar-fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--gold-soft), var(--gold-press));
	border-radius: 999px;
	transition: width var(--dur-3) var(--ease);
}
.ja-channel-bar-pct {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--gold-press);
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.ja-channel-bar-users {
	color: var(--ink-muted);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Methodology list */
.case-method-list {
	display: grid;
	gap: var(--s-4);
	counter-reset: case-method;
}
.case-method-item {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: var(--s-4);
	padding: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	align-items: start;
}
.case-method-num {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--fs-3xl);
	color: var(--gold-press);
	letter-spacing: -0.04em;
	line-height: 1;
}
.case-method-phase {
	font-size: var(--fs-lg);
	margin-bottom: var(--s-2);
	color: var(--navy);
}
.case-method-detail {
	color: var(--ink-body);
	font-size: var(--fs-md);
	line-height: 1.6;
}

/* Evidence screenshots */
.case-evidence-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
}
.case-evidence-grid--two { /* still single column on mobile */ }
.case-evidence {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	padding: var(--s-3);
	box-shadow: var(--shadow-1);
}
.case-evidence img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-sm);
	border: 1px solid var(--rule);
}
.case-evidence figcaption {
	margin-top: var(--s-3);
	font-size: var(--fs-sm);
	color: var(--ink-muted);
	letter-spacing: 0.02em;
}
.case-evidence-note {
	margin-top: var(--s-4);
	text-align: center;
}

/* Pull-quote */
.case-quote {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--s-7) var(--s-5);
	background: linear-gradient(135deg, var(--gold-bg), var(--surface));
	border: 1px solid var(--rule-gold);
	border-radius: var(--r-xl);
	text-align: center;
	position: relative;
}
.case-quote blockquote {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.25rem, 2.4vw, var(--fs-2xl));
	line-height: 1.4;
	color: var(--navy);
	letter-spacing: -0.015em;
	text-wrap: balance;
}
.case-quote figcaption {
	margin-top: var(--s-4);
	font-size: var(--fs-sm);
	color: var(--gold-press);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Search form */
.search-form {
	display: flex; gap: var(--s-2);
	max-width: 480px;
	margin: 0 auto;
}
.search-form input {
	flex: 1;
	padding: 12px 16px;
	border-radius: var(--r-pill);
}

/* WP block alignments inside prose */
.alignleft { float: left; margin: 0 var(--s-5) var(--s-3) 0; }
.alignright { float: right; margin: 0 0 var(--s-3) var(--s-5); }
.aligncenter { display: block; margin: var(--s-5) auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text {
	font-size: var(--fs-sm);
	color: var(--ink-subtle);
	text-align: center;
	margin-top: var(--s-2);
}

/* ------------------------------------------------------------
   25. Responsive breakpoints
   ------------------------------------------------------------ */
@media (min-width: 600px) {
	.hide-md { display: inline-flex; }
	.hide-sm { display: inline-flex; }
	.hero-stats { grid-template-columns: repeat(4, 1fr); }
	.position-grid { grid-template-columns: repeat(2, 1fr); }
	.services-grid { grid-template-columns: repeat(2, 1fr); }
	.portfolio-grid { grid-template-columns: repeat(2, 1fr); }
	.audience-grid { grid-template-columns: repeat(2, 1fr); }
	.testimonials-grid { grid-template-columns: repeat(2, 1fr); }
	.cert-grid { grid-template-columns: repeat(2, 1fr); }
	.tool-grid, .course-modules { grid-template-columns: repeat(2, 1fr); }
	.cta-card { grid-template-columns: 1.5fr 1fr; align-items: end; gap: var(--s-7); }
	.cta-actions { justify-content: flex-end; }
	.footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
	.brand-text { display: flex; }
	.contact-grid { grid-template-columns: 1.4fr 1fr; }
	.cases-grid { grid-template-columns: repeat(2, 1fr); }

	/* Case study */
	.case-kpi-grid { grid-template-columns: repeat(2, 1fr); }
	.case-evidence-grid--two { grid-template-columns: repeat(2, 1fr); }
	.case-hero-headline-metric { flex-direction: row; align-items: baseline; gap: var(--s-5); }
}

@media (min-width: 900px) {
	.primary-nav { display: block; }
	.nav-toggle { display: none; }
	.mobile-bar { display: none; }
	.position-grid { grid-template-columns: repeat(4, 1fr); }
	.services-grid { grid-template-columns: repeat(3, 1fr); }
	.portfolio-grid { grid-template-columns: repeat(3, 1fr); }
	.blog-grid { grid-template-columns: repeat(3, 1fr); }
	.cases-grid { grid-template-columns: repeat(3, 1fr); }
	.audience-grid { grid-template-columns: repeat(4, 1fr); }
	.about-grid { grid-template-columns: 1fr 1.4fr; gap: var(--s-9); }
	.cert-grid { grid-template-columns: repeat(2, 1fr); }
	.course-modules { grid-template-columns: repeat(3, 1fr); }
	.tool-grid { grid-template-columns: repeat(2, 1fr); }

	/* Case study */
	.case-kpi-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1100px) {
	.portfolio-grid { grid-template-columns: repeat(4, 1fr); }
	.tool-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Avoid overlap with sticky mobile bar */
@media (max-width: 899px) {
	body { padding-bottom: 64px; }
}

/* ------------------------------------------------------------
   25b. Reading-progress bar (single article + case study)
   ------------------------------------------------------------ */
.reading-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	z-index: 100;
	background: rgba(10, 15, 46, 0.06);
	pointer-events: none;
}
.reading-progress-fill {
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 100%);
	transition: transform 80ms linear;
	will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
	.reading-progress-fill { transition: none; }
}

/* ------------------------------------------------------------
   25c. Author bio block (single.php, post type only)
   ------------------------------------------------------------ */
.author-bio {
	max-width: 68ch;
	margin: var(--s-8) auto 0;
	padding: var(--s-6);
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: var(--s-5);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-1);
}
.author-bio-avatar img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: 2px solid var(--gold);
	object-fit: cover;
}
.author-bio-eyebrow {
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-subtle);
	margin-bottom: var(--s-1);
}
.author-bio-name {
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--navy);
	margin-bottom: var(--s-1);
}
.author-bio-name a { color: inherit; }
.author-bio-name a:hover { color: var(--gold-press); }
.author-bio-role {
	font-size: var(--fs-sm);
	color: var(--ink-muted);
	margin-bottom: var(--s-3);
}
.author-bio-text {
	font-size: var(--fs-md);
	color: var(--ink-body);
	margin-bottom: var(--s-4);
}
.author-bio-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4);
}
.author-bio-social {
	display: flex;
	gap: var(--s-2);
	margin: 0;
}
.author-bio-social li { margin: 0; }
.author-bio-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1px solid var(--rule);
	color: var(--ink-muted);
	transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.author-bio-social a:hover {
	color: var(--gold-press);
	border-color: var(--rule-gold);
	background: var(--gold-bg);
}
@media (max-width: 599px) {
	.author-bio {
		grid-template-columns: 1fr;
		text-align: center;
		padding: var(--s-5);
	}
	.author-bio-avatar { justify-self: center; }
	.author-bio-actions { justify-content: center; }
}

/* ============================================================
   v3 — homepage spine (long-scroll, anchor sections)
   ============================================================ */

/* ------------------------------------------------------------
   v3.1 Homepage hero — editorial accent + dual CTA
   ------------------------------------------------------------ */
.v3-hero {
	padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 6vw, 72px);
	background: linear-gradient(180deg, var(--canvas) 0%, var(--canvas) 70%, var(--cream) 100%);
}
.v3-hero-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
}
.v3-hero-eyebrow {
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-press);
	margin-bottom: var(--s-4);
	font-weight: 600;
}
.v3-hero-headline {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.25rem, 5.2vw, 4.25rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--navy);
	margin-bottom: var(--s-5);
	text-wrap: balance;
}
.v3-hero-headline-accent {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 500;
	color: var(--gold-press);
}
.v3-hero-sub {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.125rem, 1.8vw, 1.5rem);
	line-height: 1.4;
	color: var(--ink-warm);
	margin-bottom: var(--s-6);
	max-width: 38ch;
}
.v3-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-bottom: var(--s-5);
}
.v3-hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-4);
	font-size: var(--fs-sm);
	color: var(--ink-muted);
}
.v3-hero-trust b { color: var(--navy); font-weight: 700; }
.v3-hero-media {
	position: relative;
	aspect-ratio: 4 / 5;
	max-width: 480px;
	justify-self: end;
	border-radius: var(--r-xl);
	overflow: hidden;
	background: var(--cream);
}
.v3-hero-media::after {
	content: '';
	position: absolute;
	inset: -40px;
	background: radial-gradient(circle at 30% 30%, rgba(6, 182, 212, 0.18), transparent 60%);
	pointer-events: none;
	z-index: -1;
}
.v3-hero-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
	.v3-hero-grid { grid-template-columns: 1fr; }
	.v3-hero-media { max-width: 360px; justify-self: center; order: -1; }
}

/* ------------------------------------------------------------
   v3.2 Logo carousel (Lewis Howes pattern adapted to client logos)
   ------------------------------------------------------------ */
.v3-trust {
	padding: var(--s-7) 0;
	background: var(--cream);
	overflow: hidden;
	border-top: 1px solid var(--rule-warm);
	border-bottom: 1px solid var(--rule-warm);
}
.v3-trust-label {
	text-align: center;
	font-size: var(--fs-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: var(--s-5);
	font-weight: 600;
}
.v3-marquee {
	display: flex;
	gap: var(--s-7);
	animation: v3-marquee-scroll 60s linear infinite;
	width: max-content;
}
.v3-marquee:hover { animation-play-state: paused; }
.v3-marquee-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-width: 240px;
	height: 88px;
	padding: 0 var(--s-5);
	font-size: var(--fs-md);
	color: var(--ink-warm);
	font-weight: 500;
	border-right: 1px solid var(--rule-warm);
	white-space: nowrap;
	transition: color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
	opacity: 0.85;
}
.v3-marquee-item:last-child { border-right: none; }
.v3-marquee-item:hover { color: var(--gold-press); opacity: 1; }
.v3-marquee-label { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.005em; }

/* Real brand logos — works for both inline <svg> and raster <img> elements.
   SVGs render as a square 22x22; raster logos keep their aspect ratio at 22px
   height with auto width capped at 64px so wide wordmarks don't blow the row. */
.v3-stack-icon {
	flex: none;
	display: block;
	object-fit: contain;
}
svg.v3-stack-icon { width: 38px; height: 38px; }
img.v3-stack-icon { height: 38px; width: auto; max-width: 110px; }
/* Colored-letter chip fallback for stacks not in Simple Icons — small filled
   circle with the first letter, brand color background, white text. */
.v3-stack-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	color: #FFFFFF;
	letter-spacing: 0;
	line-height: 1;
}
.v3-trust-summary {
	margin-top: var(--s-5);
	text-align: center;
	font-size: var(--fs-sm);
	color: var(--ink-muted);
}
.v3-trust-summary b { color: var(--navy); font-weight: 700; }
@keyframes v3-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.v3-marquee { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
}

/* ------------------------------------------------------------
   v3.3 Pillars — balanced 2×2 grid (4 expert skills, equal weight)
   Refactored 2026-05-10 from 1-lead-fullheight + 3-stacked bento.
   Lead emphasis now comes from the dark gradient, not size.
   ------------------------------------------------------------ */
.v3-pillars {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-5);
}
.v3-pillar {
	display: block;
	padding: var(--s-6) var(--s-7);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	background: var(--surface);
	transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.v3-pillar:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-3);
	border-color: var(--rule-gold);
}
/* All pillar cards render identically (white) per QA on 2026-05-10.
   `.v3-pillar--lead` modifier kept so the data layer can flag the lead
   pillar — the visual difference is gone but the hook remains for any
   future treatment (border accent, badge, etc.). */
.v3-pillar--lead {
	/* No visual override — same white card as siblings. */
}
.v3-pillar-icon {
	width: 48px; height: 48px;
	border-radius: var(--r-md);
	background: var(--gold-bg);
	color: var(--gold-press);
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: var(--s-5);
}
/* Lead-icon override removed 2026-05-10 — all pillar icons share the same cobalt-bg treatment. */
.v3-pillar-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-2xl);
	letter-spacing: -0.02em;
	margin-bottom: var(--s-3);
	color: var(--navy);
}
/* Lead-pillar title kept at the same size as siblings (was --fs-3xl when lead
   spanned full height). With the 2×2 grid all cards are visually equal. */
.v3-pillar-body {
	color: var(--ink-muted);
	margin-bottom: var(--s-4);
}
.v3-pillar-link {
	font-weight: 600;
	color: var(--gold-press);
	display: inline-flex; align-items: center; gap: 4px;
}
.v3-pillar-link:hover { color: var(--gold); }
@media (max-width: 899px) {
	.v3-pillars { grid-template-columns: 1fr; grid-template-rows: auto; }
	.v3-pillar--lead { grid-row: auto; }
}

/* ------------------------------------------------------------
   v3.4 Audit-tool inline preview (Neil Patel pattern)
   ------------------------------------------------------------ */
.v3-audit {
	padding: clamp(48px, 8vw, 96px) 0;
	background: var(--navy-deep);
	color: #FAFAF7;
}
.v3-audit-card {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}
.v3-audit-eyebrow {
	font-size: var(--fs-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold-soft);
	margin-bottom: var(--s-4);
	font-weight: 600;
}
.v3-audit-headline {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 3.6vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #FFFFFF;
	margin-bottom: var(--s-4);
	text-wrap: balance;
}
.v3-audit-sub {
	font-family: var(--font-editorial);
	font-style: italic;
	font-size: var(--fs-lg);
	color: rgba(250, 250, 247, 0.78);
	margin-bottom: var(--s-6);
}
.v3-audit-form {
	display: flex;
	gap: var(--s-2);
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: var(--s-3);
}
.v3-audit-input {
	flex: 1 1 320px;
	padding: 14px 18px;
	border-radius: var(--r-pill);
	border: 1px solid rgba(250, 250, 247, 0.18);
	background: rgba(250, 250, 247, 0.05);
	color: #FFFFFF;
	font-size: var(--fs-md);
	min-height: 48px;
}
.v3-audit-input::placeholder { color: rgba(250, 250, 247, 0.42); }
.v3-audit-input:focus {
	outline: 2px solid var(--gold-soft);
	outline-offset: 2px;
	border-color: transparent;
	background: rgba(250, 250, 247, 0.08);
}
.v3-audit-note {
	font-size: var(--fs-sm);
	color: rgba(250, 250, 247, 0.5);
}

/* ------------------------------------------------------------
   v3.5 Programs ladder (Ramit Sethi /programs hub pattern)
   ------------------------------------------------------------ */
.v3-programs {
	background: var(--cream);
	padding: clamp(40px, 6vw, 72px) 0;
}
.v3-programs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--s-5);
}
.v3-program-card {
	display: flex;
	flex-direction: column;
	padding: var(--s-6);
	background: var(--surface);
	border: 1px solid var(--rule-warm);
	border-radius: var(--r-lg);
	transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.v3-program-card:hover {
	transform: translateY(-4px);
	border-color: var(--rule-gold);
	box-shadow: var(--shadow-2);
}
.v3-program-card--featured {
	background: linear-gradient(180deg, var(--surface) 0%, var(--gold-bg) 100%);
	border-color: var(--rule-gold);
}
.v3-program-tier {
	font-size: var(--fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-press);
	font-weight: 700;
	margin-bottom: var(--s-3);
}
.v3-program-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-2xl);
	letter-spacing: -0.02em;
	color: var(--navy);
	margin-bottom: var(--s-3);
}
.v3-program-price {
	font-family: var(--font-editorial);
	font-style: italic;
	font-size: var(--fs-lg);
	color: var(--ink-warm);
	margin-bottom: var(--s-4);
}
.v3-program-bullets {
	margin: 0 0 var(--s-5);
	color: var(--ink-warm);
	font-size: var(--fs-sm);
	flex: 1;
}
.v3-program-bullets li {
	display: flex;
	gap: var(--s-2);
	margin-bottom: var(--s-2);
}
.v3-program-bullets li::before {
	content: '';
	flex: none;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--gold);
	margin-top: 8px;
}
.v3-program-cta {
	font-weight: 600;
	color: var(--gold-press);
	display: inline-flex; align-items: center; gap: 4px;
}

/* ------------------------------------------------------------
   v3.6 Playbook newsletter inline (Mark Manson pattern)
   ------------------------------------------------------------ */
.v3-playbook {
	padding: clamp(40px, 6vw, 72px) 0;
	background: var(--canvas);
}
.v3-playbook-card {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	padding: var(--s-7);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-1);
}
.v3-playbook-eyebrow {
	font-size: var(--fs-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold-press);
	font-weight: 600;
	margin-bottom: var(--s-3);
}
.v3-playbook-headline {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.625rem, 3.2vw, 2.25rem);
	letter-spacing: -0.02em;
	color: var(--navy);
	margin-bottom: var(--s-3);
	text-wrap: balance;
}
.v3-playbook-sub {
	font-family: var(--font-editorial);
	font-style: italic;
	color: var(--ink-warm);
	margin-bottom: var(--s-5);
}
.v3-playbook-counter {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	background: var(--gold-bg);
	color: var(--gold-press);
	padding: 6px 14px;
	border-radius: var(--r-pill);
	font-size: var(--fs-sm);
	font-weight: 600;
	margin-bottom: var(--s-5);
}
.v3-playbook-counter::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #16a34a;
	box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18);
	animation: v3-pulse 2s ease-in-out infinite;
}
@keyframes v3-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18); }
	50%      { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0.04); }
}
.v3-playbook-form {
	display: flex;
	gap: var(--s-2);
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: var(--s-3);
}
.v3-playbook-input {
	flex: 1 1 240px;
	padding: 12px 16px;
	border-radius: var(--r-pill);
	border: 1px solid var(--rule-strong);
	background: var(--surface);
	color: var(--ink);
	font-size: var(--fs-md);
	min-height: 44px;
}
.v3-playbook-input:focus {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-color: transparent;
}
.v3-playbook-promise {
	font-size: var(--fs-sm);
	color: var(--ink-muted);
}

/* ------------------------------------------------------------
   v3.7 Sticky in-page nav (homepage anchor scroll-spy)
   ------------------------------------------------------------ */
.v3-anchor-nav {
	position: sticky;
	top: var(--header-h);
	z-index: 50;
	background: rgba(250, 250, 247, 0.92);
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--rule);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
	transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.v3-anchor-nav.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.v3-anchor-nav-list {
	display: flex;
	gap: var(--s-4);
	align-items: center;
	overflow-x: auto;
	padding: 12px 0;
	font-size: var(--fs-sm);
	scrollbar-width: none;
}
.v3-anchor-nav-list::-webkit-scrollbar { display: none; }
.v3-anchor-nav-list a {
	white-space: nowrap;
	color: var(--ink-muted);
	font-weight: 500;
	padding: 4px 10px;
	border-radius: var(--r-pill);
	transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.v3-anchor-nav-list a:hover { color: var(--navy); background: var(--cream); }
.v3-anchor-nav-list a.is-active { color: var(--navy); background: var(--gold-bg); }

/* ------------------------------------------------------------
   v3.8 Section-head editorial accent
   ------------------------------------------------------------ */
.v3-section-head { max-width: 760px; margin: 0 auto var(--s-7); text-align: center; }
.v3-section-head--left { margin: 0 0 var(--s-7); text-align: left; }
.v3-section-eyebrow {
	font-size: var(--fs-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold-press);
	font-weight: 600;
	margin-bottom: var(--s-3);
	display: inline-block;
}
.v3-section-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--navy);
	margin-bottom: var(--s-3);
	text-wrap: balance;
}
.v3-section-title em {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 500;
	color: var(--gold-press);
}
.v3-section-lead {
	font-family: var(--font-editorial);
	font-style: italic;
	font-size: var(--fs-lg);
	color: var(--ink-warm);
	max-width: 56ch;
	margin: 0 auto;
}
.v3-section-head--left .v3-section-lead { margin-left: 0; }

/* ------------------------------------------------------------
   v3.9 TODO marker — used while skeleton sections await full content
   ------------------------------------------------------------ */
.v3-todo {
	max-width: 720px;
	margin: var(--s-5) auto 0;
	padding: var(--s-4) var(--s-5);
	background: var(--gold-bg);
	border: 1px dashed var(--rule-gold);
	border-radius: var(--r-md);
	font-size: var(--fs-sm);
	color: var(--gold-press);
}
.v3-todo b { display: block; margin-bottom: 4px; color: var(--navy); }

/* ------------------------------------------------------------
   v3.10 About-snapshot grid + speaking grid (homepage sections)
   ------------------------------------------------------------ */
.about-snapshot-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}
.about-snapshot-bio { max-width: 60ch; }
@media (max-width: 899px) {
	.about-snapshot-grid { grid-template-columns: 1fr; }
}

.speaking-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--s-5);
}

/* ------------------------------------------------------------
   v3.11 Brand lockup — circular badge (locked 2026-05-09)
   Self-contained SVG: charcoal ring + two studs + "ja." centered inside
   (Fraunces italic, cobalt period). All three variants render the same
   badge; only the size differs.
   ------------------------------------------------------------ */
.ja-brand-lockup {
	display: inline-flex;
	align-items: center;
	color: var(--ink);
	line-height: 1;
	text-decoration: none;
}
.ja-brand-mark {
	flex: none;
	color: var(--ink);
	display: block;
}

/* Variant sizes */
.ja-brand-lockup--mark        .ja-brand-mark { width: 32px; height: 32px; }
.ja-brand-lockup--horizontal  .ja-brand-mark { width: 44px; height: 44px; }
.ja-brand-lockup--vertical    .ja-brand-mark { width: 64px; height: 64px; }

/* Header: tighter — fits the 72px header chrome cleanly */
.site-header .ja-brand-mark { width: 44px; height: 44px; }

/* Inverse variant for dark surfaces (footer, hero band) — applied via parent context */
.ja-brand-lockup--inverse,
.site-footer .ja-brand-lockup,
.v3-pillar--lead .ja-brand-lockup {
	color: var(--canvas);
}
.ja-brand-lockup--inverse .ja-brand-mark,
.site-footer .ja-brand-mark,
.v3-pillar--lead .ja-brand-mark {
	color: var(--canvas);
}

/* Cobalt-period subtle pulse — 4s loop, opacity-only so it works inside SVG <text>.
   Pauses on hover so the brand link feels intentional when interacted with. */
.ja-badge-period {
	animation: ja-badge-period-pulse 4s ease-in-out infinite;
}
@keyframes ja-badge-period-pulse {
	0%, 70%, 100% { opacity: 1; }
	82%           { opacity: 0.35; }
}

/* Search-up arrow draw/retract loop. The arrow line uses stroke-dasharray
   draw effect; the arrow head fades in sync to avoid floating in mid-air.
   Path length ~ sqrt(14² + 14²) ≈ 19.8, so dash 20 covers the visible stroke. */
.ja-search-up-arrow {
	stroke-dasharray: 20;
	stroke-dashoffset: 0;
	animation: ja-search-up-draw 4.5s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
.ja-search-up-arrow-head {
	animation: ja-search-up-head 4.5s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes ja-search-up-draw {
	0%, 60% { stroke-dashoffset: 0; }
	75%     { stroke-dashoffset: 20; }
	100%    { stroke-dashoffset: 0; }
}
@keyframes ja-search-up-head {
	0%, 60% { opacity: 1; }
	72%, 80% { opacity: 0; }
	100%    { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.ja-badge-period,
	.ja-search-up-arrow,
	.ja-search-up-arrow-head {
		animation: none;
		opacity: 1;
		stroke-dashoffset: 0;
	}
}
.ja-brand-lockup:hover .ja-badge-period,
.ja-brand-lockup:focus .ja-badge-period,
.ja-brand-lockup:hover .ja-search-up-arrow,
.ja-brand-lockup:focus .ja-search-up-arrow,
.ja-brand-lockup:hover .ja-search-up-arrow-head,
.ja-brand-lockup:focus .ja-search-up-arrow-head {
	animation-play-state: paused;
}

/* ------------------------------------------------------------
   v3.12 Programs hub + program-detail (page-programs.php / page-program-detail.php)
   ------------------------------------------------------------ */
.v3-program-hub-hero {
	padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 48px);
	text-align: center;
}
.v3-program-hero-headline {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.25rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--ink);
	margin-bottom: var(--s-5);
	text-wrap: balance;
}
.v3-program-hero-sub {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.125rem, 1.8vw, 1.5rem);
	line-height: 1.45;
	color: var(--ink-warm);
	max-width: 56ch;
	margin: 0 auto var(--s-5);
}
.v3-program-hero {
	padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 48px);
}
.v3-program-hero-headline,
.v3-program-hero .v3-program-hero-headline {
	text-wrap: balance;
}
.v3-program-hero .v3-program-hero-sub {
	margin-left: 0;
	margin-right: 0;
}

/* Phase ladder (numbered process steps) */
.v3-program-phases {
	max-width: 760px;
	margin: 0 auto;
	padding-left: 0;
}
.v3-program-phase {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: var(--s-5);
	padding: var(--s-6) 0;
	border-bottom: 1px solid var(--rule);
}
.v3-program-phase:last-child { border-bottom: none; }
.v3-program-phase-num {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 600;
	font-size: 3rem;
	color: var(--accent);
	line-height: 1;
}
.v3-program-phase-days {
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: var(--s-2);
	font-weight: 600;
}
.v3-program-phase-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-2xl);
	letter-spacing: -0.02em;
	color: var(--ink);
	margin-bottom: var(--s-2);
}
.v3-program-phase-detail {
	color: var(--ink-warm);
	max-width: 56ch;
}

/* Deliverables list (what's included) */
.v3-program-deliverables {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s-3) var(--s-5);
	max-width: 880px;
	margin: 0 auto;
}
.v3-program-deliverables li {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
	color: var(--ink-warm);
	padding: var(--s-2) 0;
}
.v3-program-deliverables li svg {
	color: var(--accent);
	margin-top: 4px;
	flex: none;
}

/* Fit grid (good-for / not-for) */
.v3-program-fit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s-5);
	max-width: 880px;
	margin: 0 auto;
}
.v3-program-fit {
	padding: var(--s-6);
	border-radius: var(--r-lg);
	border: 1px solid var(--rule);
	background: var(--surface);
}
.v3-program-fit--good { border-color: var(--rule-accent); background: var(--accent-bg); }
.v3-program-fit--not  { background: var(--gray-200); }
.v3-program-fit h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-lg);
	color: var(--ink);
	margin-bottom: var(--s-4);
}
.v3-program-fit ul li {
	display: flex;
	gap: var(--s-2);
	align-items: flex-start;
	margin-bottom: var(--s-3);
	color: var(--ink-warm);
	font-size: var(--fs-sm);
}
.v3-program-fit--good ul li svg { color: var(--accent); flex: none; margin-top: 4px; }
.v3-program-fit--not  ul li svg { color: var(--ink-muted); flex: none; margin-top: 4px; }

/* Comparison table (programs hub) */
.v3-program-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	background: var(--surface);
}
.v3-program-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}
.v3-program-table thead th {
	text-align: left;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	padding: var(--s-4) var(--s-5);
	background: var(--canvas-2);
	border-bottom: 1px solid var(--rule-strong);
	white-space: nowrap;
}
.v3-program-table tbody th,
.v3-program-table tbody td {
	padding: var(--s-5);
	border-bottom: 1px solid var(--rule);
	vertical-align: middle;
	color: var(--ink-warm);
}
.v3-program-table tbody tr:last-child th,
.v3-program-table tbody tr:last-child td { border-bottom: none; }
.v3-program-table tbody th {
	text-align: left;
	font-weight: 600;
	min-width: 220px;
}
.v3-program-table-tier {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 2px;
}
.v3-program-table-title {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-md);
	color: var(--ink);
}
.v3-program-table-row--featured {
	background: var(--accent-bg);
}
.v3-program-table-row--featured td,
.v3-program-table-row--featured th {
	color: var(--ink);
}

/* ------------------------------------------------------------
   v3.13 Contact page — Calendly embed + topic pill
   ------------------------------------------------------------ */
.contact-topic-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	margin-top: var(--s-3);
	padding: 6px 14px;
	border-radius: var(--r-pill);
	background: var(--accent-bg);
	color: var(--accent-press);
	font-size: var(--fs-sm);
	font-weight: 500;
}
.contact-topic-pill svg { color: var(--accent); flex: none; }
.contact-topic-pill strong { font-weight: 700; }

.contact-calendly-block { border-top: 1px solid var(--rule); padding-top: var(--s-6); }
.contact-calendly-head {
	margin-bottom: var(--s-5);
}
.contact-calendly-head h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-2xl);
	letter-spacing: -0.02em;
	color: var(--ink);
	margin-bottom: var(--s-2);
}

/* Calendly widget container — give it a subtle frame so it doesn't float in raw white */
.calendly-inline-widget {
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	background: var(--surface);
	overflow: hidden;
}

/* ------------------------------------------------------------
   v3.14 Audit-tool standalone landing
   ------------------------------------------------------------ */
.v3-audit-page-hero {
	padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 48px);
	text-align: center;
}
.v3-audit-result {
	margin-top: var(--s-6);
	padding: var(--s-5);
	background: rgba(250, 250, 247, 0.04);
	border: 1px dashed rgba(250, 250, 247, 0.18);
	border-radius: var(--r-md);
	color: rgba(250, 250, 247, 0.92);
}
.v3-audit-result-headline {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-md);
}
.v3-audit-result-headline svg {
	color: var(--accent-soft);
	animation: v3-spin 2s linear infinite;
}
@keyframes v3-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.v3-audit-result-headline svg { animation: none; }
}

.v3-audit-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--s-5);
	max-width: 1080px;
	margin: 0 auto;
	padding: 0;
}
.v3-audit-steps li {
	padding: var(--s-6);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	list-style: none;
}
.v3-audit-step-num {
	display: inline-block;
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 600;
	font-size: 2.5rem;
	color: var(--accent);
	line-height: 1;
	margin-bottom: var(--s-3);
}
.v3-audit-steps h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-xl);
	letter-spacing: -0.02em;
	color: var(--ink);
	margin-bottom: var(--s-2);
}
.v3-audit-steps p {
	color: var(--ink-warm);
	font-size: var(--fs-sm);
}

.v3-audit-promises {
	max-width: 600px;
}
.v3-audit-promises li {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--rule);
	color: var(--ink-warm);
}
.v3-audit-promises li:last-child { border-bottom: none; }
.v3-audit-promises li svg { flex: none; margin-top: 4px; }
.v3-audit-promises li:nth-last-child(1) svg,
.v3-audit-promises li:nth-last-child(2) svg { color: var(--accent); }
.v3-audit-promises li:nth-child(1) svg,
.v3-audit-promises li:nth-child(2) svg,
.v3-audit-promises li:nth-child(3) svg { color: var(--ink-muted); }

/* ------------------------------------------------------------
   v3.15 Playbook landing — hero + filter + grid
   ------------------------------------------------------------ */
.v3-playbook-hero {
	padding: clamp(80px, 12vw, 140px) 0 clamp(48px, 8vw, 96px);
	background: var(--canvas);
	text-align: center;
}
.v3-playbook-headline-big {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.25rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--ink);
	margin-bottom: var(--s-5);
	text-wrap: balance;
}
.v3-playbook-headline-big em {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 500;
	color: var(--accent);
}
.v3-playbook-promise-quote {
	font-family: var(--font-editorial);
	font-style: italic;
	font-size: var(--fs-xl);
	color: var(--ink-warm);
	margin-bottom: var(--s-5);
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
}
.v3-playbook-hero-form {
	display: flex;
	gap: var(--s-2);
	flex-wrap: wrap;
	justify-content: center;
	max-width: 480px;
	margin: var(--s-5) auto var(--s-3);
}
.v3-playbook-promise-line {
	font-size: var(--fs-sm);
	color: var(--ink-muted);
	margin-bottom: var(--s-3);
}

/* Sample teardown cards */
.v3-playbook-samples {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s-5);
}
.v3-playbook-sample {
	padding: var(--s-6);
	background: var(--surface);
	border: 1px solid var(--rule-warm);
	border-radius: var(--r-lg);
}
.v3-playbook-sample-num {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 600;
	font-size: var(--fs-2xl);
	color: var(--accent);
	margin-bottom: var(--s-3);
}
.v3-playbook-sample h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-lg);
	color: var(--ink);
	margin-bottom: var(--s-3);
	letter-spacing: -0.015em;
}
.v3-playbook-sample p {
	color: var(--ink-warm);
	font-size: var(--fs-sm);
	line-height: 1.55;
}

/* Topic filter row */
.v3-playbook-filter-section { padding-top: 0; }
.v3-playbook-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	padding: 0;
}
.v3-playbook-filter li { margin: 0; }
.v3-playbook-filter a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: var(--r-pill);
	font-size: var(--fs-sm);
	color: var(--ink-muted);
	font-weight: 500;
	border: 1px solid var(--rule);
	transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.v3-playbook-filter a:hover {
	color: var(--ink);
	border-color: var(--rule-strong);
}
.v3-playbook-filter a.is-active {
	color: var(--canvas);
	background: var(--ink);
	border-color: var(--ink);
}

/* Article grid */
.v3-playbook-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s-6);
}
.v3-playbook-card {
	display: flex;
	flex-direction: column;
}
.v3-playbook-card-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--r-md);
	margin-bottom: var(--s-4);
	background: var(--cream);
}
.v3-playbook-card-thumb img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--dur-3) var(--ease);
}
.v3-playbook-card:hover .v3-playbook-card-thumb img { transform: scale(1.04); }
.v3-playbook-card-meta {
	font-size: var(--fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-subtle);
	margin-bottom: var(--s-2);
	display: flex;
	gap: var(--s-2);
	align-items: center;
}
.v3-playbook-card-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-xl);
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--ink);
	margin-bottom: var(--s-3);
	text-wrap: balance;
}
.v3-playbook-card-title a { color: inherit; }
.v3-playbook-card-title a:hover { color: var(--accent-press); }
.v3-playbook-card-excerpt {
	color: var(--ink-warm);
	font-size: var(--fs-sm);
	line-height: 1.55;
}

/* ------------------------------------------------------------
   v3.16 Lead-magnet capture (page-lead-magnet.php)
   ------------------------------------------------------------ */
.v3-magnet-hero {
	padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 48px);
	text-align: center;
}
.v3-magnet-headline {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--ink);
	margin-bottom: var(--s-4);
	text-wrap: balance;
}
.v3-magnet-tagline {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.125rem, 1.8vw, 1.4rem);
	line-height: 1.45;
	color: var(--ink-warm);
	max-width: 56ch;
	margin: 0 auto var(--s-5);
}
.v3-magnet-meta {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-5);
	justify-content: center;
	font-size: var(--fs-sm);
	color: var(--ink-muted);
}
.v3-magnet-meta span {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
}
.v3-magnet-meta svg { color: var(--accent); flex: none; }

.v3-magnet-capture-section { padding-top: clamp(32px, 5vw, 56px); }

.v3-magnet-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
	max-width: 1080px;
	margin: 0 auto;
}
@media (max-width: 899px) {
	.v3-magnet-grid { grid-template-columns: 1fr; }
}

/* What's inside */
.v3-magnet-inside {
	padding: var(--s-6);
	background: var(--cream);
	border: 1px solid var(--rule-warm);
	border-radius: var(--r-lg);
}
.v3-magnet-inside-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-xl);
	letter-spacing: -0.02em;
	color: var(--ink);
	margin-bottom: var(--s-4);
}
.v3-magnet-inside ul li {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
	color: var(--ink-warm);
	font-size: var(--fs-sm);
	line-height: 1.5;
	margin-bottom: var(--s-3);
}
.v3-magnet-inside ul li svg { color: var(--accent); flex: none; margin-top: 4px; }

/* Form / download action card */
.v3-magnet-action {
	padding: var(--s-7);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-2);
}
.v3-magnet-form-eyebrow,
.v3-magnet-success-eyebrow {
	font-size: var(--fs-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent-press);
	font-weight: 700;
	margin-bottom: var(--s-3);
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
}
.v3-magnet-success-eyebrow svg { color: var(--accent); }

.v3-magnet-form-title,
.v3-magnet-download-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-2xl);
	letter-spacing: -0.02em;
	color: var(--ink);
	margin-bottom: var(--s-3);
	text-wrap: balance;
}
.v3-magnet-form-sub,
.v3-magnet-download-sub {
	font-family: var(--font-editorial);
	font-style: italic;
	color: var(--ink-warm);
	margin-bottom: var(--s-5);
}
.v3-magnet-input {
	display: block;
	width: 100%;
	padding: 14px 18px;
	border-radius: var(--r-pill);
	border: 1px solid var(--rule-strong);
	background: var(--surface);
	color: var(--ink);
	font-size: var(--fs-md);
	min-height: 48px;
	margin-bottom: var(--s-3);
}
.v3-magnet-input:focus {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-color: transparent;
}
.v3-magnet-submit { width: 100%; }
.v3-magnet-form-note,
.v3-magnet-download-note {
	font-size: var(--fs-sm);
	color: var(--ink-muted);
	margin-top: var(--s-3);
	line-height: 1.5;
}

/* Download state — even more emphasis */
.v3-magnet-download {
	text-align: left;
}
.v3-magnet-download-btn {
	width: 100%;
	gap: var(--s-3);
}
.v3-magnet-download-btn svg { color: inherit; }

/* Sample excerpt */
.v3-magnet-sample {
	padding: var(--s-7);
	background: var(--surface);
	border-left: 4px solid var(--accent);
	border-radius: 0 var(--r-md) var(--r-md) 0;
}
.v3-magnet-sample-eyebrow {
	font-size: var(--fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 600;
	margin-bottom: var(--s-3);
}
.v3-magnet-sample-quote {
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 500;
	font-size: var(--fs-xl);
	line-height: 1.5;
	color: var(--ink);
	margin-bottom: var(--s-3);
	border: none;
	padding: 0;
}
.v3-magnet-sample-attribution {
	font-size: var(--fs-sm);
	color: var(--ink-muted);
}

/* ------------------------------------------------------------
   v3.17 Live proof table (homepage #proof)
   ------------------------------------------------------------ */
.v3-proof-wrap {
	overflow-x: auto;
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-1);
}
.v3-proof-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}
.v3-proof-table thead th {
	text-align: left;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	padding: var(--s-4) var(--s-5);
	background: var(--cream);
	border-bottom: 1px solid var(--rule-strong);
	white-space: nowrap;
	user-select: none;
	cursor: pointer;
	position: relative;
	transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.v3-proof-table thead th:hover { background: var(--gray-200); color: var(--ink); }
.v3-proof-table thead th:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}
.v3-proof-table thead th::after {
	content: '↕';
	margin-left: 6px;
	color: var(--ink-faint);
	font-size: 10px;
}
.v3-proof-table thead th.is-sorted-asc::after  { content: '▲'; color: var(--accent); }
.v3-proof-table thead th.is-sorted-desc::after { content: '▼'; color: var(--accent); }
.v3-proof-th-num { text-align: right !important; }
.v3-proof-th-num::after { margin-right: 0; }

.v3-proof-table tbody td {
	padding: var(--s-4) var(--s-5);
	border-bottom: 1px solid var(--rule);
	vertical-align: middle;
	color: var(--ink-warm);
}
.v3-proof-table tbody tr:last-child td { border-bottom: none; }
.v3-proof-table tbody tr {
	transition: background var(--dur-1) var(--ease);
}
.v3-proof-table tbody tr:hover { background: var(--gray-50); }

.v3-proof-client {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 220px;
}
.v3-proof-client-name {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--ink);
	font-size: var(--fs-sm);
}
.v3-proof-domain {
	font-size: var(--fs-xs);
	color: var(--accent-press);
	font-family: var(--font-body);
}
.v3-proof-domain:hover { color: var(--accent); }
.v3-proof-nda {
	font-size: var(--fs-xs);
	color: var(--ink-subtle);
	font-style: italic;
	letter-spacing: 0.04em;
}

.v3-proof-keyword a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--ink);
	font-weight: 500;
	border-bottom: 1px dashed var(--rule-strong);
	padding-bottom: 1px;
	transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.v3-proof-keyword a:hover {
	color: var(--accent-press);
	border-bottom-color: var(--accent);
}
.v3-proof-keyword svg { color: var(--ink-subtle); }
.v3-proof-keyword a:hover svg { color: var(--accent); }

.v3-proof-market { color: var(--ink-muted); font-size: var(--fs-sm); white-space: nowrap; }

.v3-proof-rank { text-align: right; }
.v3-proof-rank-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 4px 10px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-sm);
	letter-spacing: -0.01em;
}
.v3-proof-rank--gold {
	background: var(--ink);
	color: var(--canvas);
}
.v3-proof-rank--top3 {
	background: var(--accent-bg);
	color: var(--accent-press);
}
.v3-proof-rank--regular {
	background: var(--gray-200);
	color: var(--ink-warm);
}

.v3-proof-ai-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
}
.v3-proof-ai-badge--yes {
	background: var(--accent-bg);
	color: var(--accent-press);
}
.v3-proof-ai-badge--yes svg { color: var(--accent); }
.v3-proof-ai-badge--partial {
	background: var(--gray-200);
	color: var(--ink);
}
.v3-proof-ai-badge--partial svg { color: var(--ink-muted); }
.v3-proof-ai-badge--no {
	background: transparent;
	color: var(--ink-faint);
	font-style: italic;
}

.v3-proof-footnote {
	margin-top: var(--s-5);
	font-size: var(--fs-sm);
	color: var(--ink-subtle);
	text-align: center;
	font-style: italic;
}

/* Mobile: collapse table to card list */
@media (max-width: 599px) {
	.v3-proof-table thead { display: none; }
	.v3-proof-table tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 16px;
		border-bottom: 1px solid var(--rule);
	}
	.v3-proof-table tbody td::before {
		content: attr(data-label);
		font-size: var(--fs-xs);
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ink-muted);
		margin-right: var(--s-3);
	}
	.v3-proof-table tbody tr {
		display: block;
		padding: var(--s-4) 0;
		border-bottom: 4px solid var(--gray-200);
	}
	.v3-proof-client { min-width: 0; align-items: flex-end; }
}

/* ------------------------------------------------------------
   v3.18 Article ToC + related-articles (single.php, post type)
   ------------------------------------------------------------ */
.article-toc {
	max-width: 68ch;
	margin: 0 auto var(--s-7);
	padding: var(--s-5) var(--s-6);
	background: var(--cream);
	border-radius: var(--r-md);
	border-left: 4px solid var(--accent);
}
.article-toc-label {
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-press);
	font-weight: 700;
	margin-bottom: var(--s-3);
}
.article-toc ol {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: toc;
}
.article-toc-item {
	counter-increment: toc;
	padding: 4px 0;
	font-size: var(--fs-sm);
	line-height: 1.5;
}
.article-toc-item a {
	color: var(--ink);
	transition: color var(--dur-1) var(--ease);
	text-decoration: none;
}
.article-toc-item a:hover { color: var(--accent-press); }
.article-toc-item--h2 a { font-weight: 600; }
.article-toc-item--h2::before {
	content: counter(toc, decimal-leading-zero) ".";
	display: inline-block;
	width: 28px;
	color: var(--ink-faint);
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 600;
	font-size: var(--fs-md);
}
.article-toc-item--h3 {
	padding-left: 32px;
	font-size: 0.85rem;
}
.article-toc-item--h3 a { color: var(--ink-muted); }

/* Make sure heading scroll-anchors land below the sticky header */
.prose h2[id],
.prose h3[id] {
	scroll-margin-top: calc(var(--header-h) + 16px);
}

/* Related articles */
.article-related {
	max-width: 68ch;
	margin: var(--s-8) auto 0;
	padding-top: var(--s-7);
	border-top: 1px solid var(--rule);
}
.article-related-label {
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 700;
	margin-bottom: var(--s-5);
}
.article-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--s-5);
}
.article-related-card {
	display: flex;
	flex-direction: column;
}
.article-related-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--r-md);
	margin-bottom: var(--s-3);
	background: var(--cream);
}
.article-related-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-3) var(--ease);
}
.article-related-card:hover .article-related-thumb img { transform: scale(1.04); }
.article-related-meta {
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-subtle);
	margin-bottom: var(--s-2);
	display: flex;
	gap: var(--s-2);
	align-items: center;
}
.article-related-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-md);
	letter-spacing: -0.015em;
	line-height: 1.25;
	color: var(--ink);
}
.article-related-title a { color: inherit; }
.article-related-title a:hover { color: var(--accent-press); }

/* ------------------------------------------------------------
   v3.19 Quiz (page-quiz.php) — vanilla JS, 8Q multi-bucket scoring
   ------------------------------------------------------------ */
.v3-quiz-hero {
	padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 48px);
}
.v3-quiz-hero-headline {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--ink);
	margin-bottom: var(--s-4);
	text-wrap: balance;
}
.v3-quiz-hero-sub {
	font-family: var(--font-editorial);
	font-style: italic;
	color: var(--ink-warm);
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	line-height: 1.5;
	max-width: 56ch;
	margin: 0 auto;
}

.v3-quiz-section { padding-top: 0; padding-bottom: clamp(40px, 6vw, 72px); }
.v3-quiz {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-2);
	overflow: hidden;
}

/* Progress bar */
.v3-quiz-progress {
	background: var(--cream);
	padding: var(--s-4) var(--s-6);
	position: relative;
}
.v3-quiz-progress-bar {
	position: absolute;
	top: 0; left: 0; bottom: 0;
	background: var(--accent-bg);
	transition: width var(--dur-3) var(--ease);
	z-index: 0;
}
.v3-quiz-progress-label {
	position: relative;
	z-index: 1;
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 700;
}

/* Question card */
.v3-quiz-card { padding: clamp(24px, 5vw, 48px); }
.v3-quiz-question {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.375rem, 3vw, 1.875rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin-bottom: var(--s-6);
	text-wrap: balance;
}

.v3-quiz-options {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--s-6);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.v3-quiz-option {
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: var(--s-4);
	padding: var(--s-4) var(--s-5);
	background: var(--surface);
	border: 1.5px solid var(--rule);
	border-radius: var(--r-md);
	color: var(--ink);
	font-size: var(--fs-md);
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
	font-family: inherit;
}
.v3-quiz-option:hover {
	border-color: var(--rule-strong);
	background: var(--canvas);
}
.v3-quiz-option:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.v3-quiz-option.is-selected {
	border-color: var(--accent);
	background: var(--accent-bg);
}
.v3-quiz-option-marker {
	flex: none;
	width: 22px; height: 22px;
	border-radius: 50%;
	border: 2px solid var(--rule-strong);
	margin-top: 2px;
	transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
	position: relative;
}
.v3-quiz-option.is-selected .v3-quiz-option-marker {
	border-color: var(--accent);
	background: var(--accent);
}
.v3-quiz-option.is-selected .v3-quiz-option-marker::after {
	content: '';
	position: absolute;
	inset: 5px;
	background: var(--canvas);
	border-radius: 50%;
}
.v3-quiz-option-label { flex: 1; }

.v3-quiz-actions {
	display: flex;
	justify-content: space-between;
	gap: var(--s-3);
}
.v3-quiz-actions .btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Result screen */
.v3-quiz-result {
	padding: clamp(32px, 6vw, 64px);
	text-align: center;
}
.v3-quiz-result-eyebrow {
	font-size: var(--fs-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent-press);
	font-weight: 700;
	margin-bottom: var(--s-4);
}
.v3-quiz-result-headline {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--ink);
	margin-bottom: var(--s-4);
	text-wrap: balance;
}
.v3-quiz-result-body {
	font-family: var(--font-editorial);
	font-style: italic;
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	line-height: 1.5;
	color: var(--ink-warm);
	max-width: 56ch;
	margin: 0 auto var(--s-6);
}
.v3-quiz-result-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	justify-content: center;
	margin-bottom: var(--s-7);
}

/* Score breakdown */
.v3-quiz-breakdown {
	max-width: 480px;
	margin: 0 auto var(--s-6);
	text-align: left;
	padding: var(--s-5);
	background: var(--cream);
	border-radius: var(--r-md);
}
.v3-quiz-breakdown-label {
	font-size: var(--fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 700;
	margin-bottom: var(--s-3);
}
.v3-quiz-bar {
	display: grid;
	grid-template-columns: 130px 1fr 32px;
	gap: var(--s-3);
	align-items: center;
	margin-bottom: var(--s-2);
	font-size: var(--fs-sm);
}
.v3-quiz-bar-label { color: var(--ink-warm); font-weight: 500; }
.v3-quiz-bar.is-winner .v3-quiz-bar-label { color: var(--accent-press); font-weight: 700; }
.v3-quiz-bar-track {
	position: relative;
	height: 8px;
	background: var(--gray-200);
	border-radius: var(--r-pill);
	overflow: hidden;
}
.v3-quiz-bar-fill {
	display: block;
	height: 100%;
	background: var(--gray-400);
	border-radius: var(--r-pill);
	transition: width var(--dur-3) var(--ease);
}
.v3-quiz-bar.is-winner .v3-quiz-bar-fill { background: var(--accent); }
.v3-quiz-bar-score {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--ink);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.v3-quiz-retake {
	font-size: var(--fs-sm);
	color: var(--ink-muted);
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: var(--s-2) var(--s-3);
	margin-top: var(--s-3);
	font-family: inherit;
}
.v3-quiz-retake:hover { color: var(--accent-press); }

/* ------------------------------------------------------------
   v3.20 QA fixes (2026-05-09) — vertical header lockup, Services
   dropdown, USP boxes, expertise tags, stack-marquee polish
   ------------------------------------------------------------ */

/* Header — circular badge sits in the header chrome at 44px (set in v3.11). */

/* Services dropdown */
.nav-item.has-dropdown { position: relative; }
.nav-item.has-dropdown > .nav-link { display: inline-flex; align-items: center; gap: 4px; }
.nav-caret {
	font-size: 9px;
	color: var(--ink-faint);
	transition: transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav-item.has-dropdown:hover > .nav-link .nav-caret,
.nav-item.has-dropdown:focus-within > .nav-link .nav-caret {
	transform: rotate(180deg);
	color: var(--accent);
}

.nav-dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
	min-width: 320px;
	margin: 0;
	padding: var(--s-2);
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-3);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
	z-index: 60;
}
.nav-item.has-dropdown:hover > .nav-dropdown,
.nav-item.has-dropdown:focus-within > .nav-dropdown {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.nav-dropdown li { margin: 0; }
.nav-dropdown a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink);
	transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
	background: var(--accent-bg);
	color: var(--accent-press);
	outline: none;
}
.nav-dropdown-foot { border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 4px; }
.nav-dropdown-foot a {
	font-weight: 700;
	color: var(--accent-press);
}

/* Work dropdown — two-line items (label + meta). alpha.31+. */
.nav-dropdown a strong {
	display: block;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.2;
}
.nav-dropdown-meta {
	display: block;
	margin-top: 2px;
	font-size: var(--fs-xs);
	font-weight: 400;
	color: var(--ink-muted);
	line-height: 1.3;
}
.nav-dropdown a:hover strong,
.nav-dropdown a:focus-visible strong { color: var(--accent-press); }
.nav-dropdown a:hover .nav-dropdown-meta,
.nav-dropdown a:focus-visible .nav-dropdown-meta { color: var(--accent-press); opacity: 0.85; }

/* Hide dropdown on small screens — mobile menu surface handles it */
@media (max-width: 899px) {
	.nav-dropdown { display: none; }
}

/* ----------------------------------------------------------------------
   Site-wide Title Case for UI headings (alpha.36).
   Capitalizes the first letter of every word — applied to the major heading
   classes only (NOT to article-body .prose h1-h6, so blog posts can keep
   sentence case where the writer chose it).
   ---------------------------------------------------------------------- */
.page-title,
.section-title,
.cta-title,
.v3-hero-headline,
.v3-section-title,
.v3-program-hero-headline,
.v3-magnet-headline,
.v3-magnet-download-title,
.v3-magnet-form-title,
.v3-playbook-headline,
.v3-playbook-headline-big,
.v3-audit-headline,
.v3-quiz-hero-headline,
.v3-quiz-question,
.v3-quiz-result-headline,
.v3-pillar-title,
.v3-program-title,
.v3-program-phase-title,
.service-title,
.timeline-role,
.case-title,
.speaking-event,
.v3-cal-card-h,
.v3-cal-card-name,
.v3-playbook-card-title,
.v3-playbook-sample h3 {
	text-transform: capitalize;
}

/* ----------------------------------------------------------------------
   Program / Service "outcomes" + "what's included" check-list (alpha.33).
   Used on: page-service-detail.php (Outcomes), page-speaking.php
   (What's included), and any future program-detail block.
   Renders as a responsive 2-col card grid with cobalt check-badges.
   ---------------------------------------------------------------------- */
.v3-program-includes {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--s-3);
}
.v3-program-includes li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-5);
	background: var(--canvas);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	transition: border-color var(--dur-1) var(--ease),
	            box-shadow var(--dur-1) var(--ease),
	            transform var(--dur-1) var(--ease);
}
.v3-program-includes li:hover {
	border-color: var(--accent);
	box-shadow: 0 6px 20px rgba(37, 65, 255, 0.08);
	transform: translateY(-1px);
}
.v3-program-includes li svg {
	flex: none;
	width: 14px;
	height: 14px;
	color: #ffffff;
	background: var(--accent);
	padding: 5px;
	border-radius: 50%;
	box-sizing: content-box;
	stroke-width: 3;
	margin-top: 1px;
}
.v3-program-includes li span {
	font-size: var(--fs-sm);
	line-height: 1.55;
	color: var(--ink);
	font-weight: 500;
}

@media (max-width: 600px) {
	.v3-program-includes { grid-template-columns: 1fr; }
	.v3-program-includes li { padding: var(--s-3) var(--s-4); }
}

/* USP boxes — proper square cards */
.v3-usp-section { padding: clamp(28px, 4vw, 56px) 0 clamp(28px, 4vw, 56px); background: var(--canvas); }
.v3-usp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--s-4);
}
.v3-usp-card {
	padding: var(--s-6);
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.v3-usp-card:hover {
	transform: translateY(-3px);
	border-color: var(--accent);
	box-shadow: var(--shadow-2);
}
.v3-usp-value {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	color: var(--ink);
	letter-spacing: -0.025em;
	line-height: 1;
	margin-bottom: var(--s-2);
}
.v3-usp-label {
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--accent-press);
	margin-bottom: var(--s-3);
}
.v3-usp-detail {
	font-size: var(--fs-sm);
	color: var(--ink-warm);
	line-height: 1.5;
}

/* Expertise tag row */
.v3-expertise-section {
	padding: clamp(20px, 3vw, 36px) 0;
	background: var(--canvas);
	border-top: 1px solid var(--rule);
}
.v3-expertise-label {
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 700;
	margin-bottom: var(--s-3);
}
.v3-expertise-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	padding: 0;
	margin: 0;
	list-style: none;
}
.v3-expertise-tags li {
	padding: 8px 14px;
	background: var(--surface);
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-pill);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink);
	transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.v3-expertise-tags li:hover {
	border-color: var(--accent);
	color: var(--accent-press);
	background: var(--accent-bg);
}

/* Stack marquee — text-only, brand-tinted hover */
.v3-marquee-item {
	cursor: default;
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--ink);
}
/* Per-category label hover-tint — kept for the chip-fallback items (the SVG icons
   already carry their own brand color, but the label still tints to match). */
.v3-marquee-item--search:hover     .v3-marquee-label { color: #4285F4; }
.v3-marquee-item--seo:hover        .v3-marquee-label { color: var(--accent-press); }
.v3-marquee-item--ai:hover         .v3-marquee-label { color: var(--ink); }
.v3-marquee-item--automation:hover .v3-marquee-label { color: #EA4B71; }
.v3-marquee-item--dev:hover        .v3-marquee-label { color: var(--ink); }

/* ------------------------------------------------------------
   v3.21 Proof table on dark band (2026-05-10)
   ------------------------------------------------------------ */

/* Proof table inverse styling — when section--dark v3-proof-section wraps it */
.v3-proof-section .v3-proof-wrap {
	background: rgba(247, 247, 245, 0.04);
	border-color: rgba(247, 247, 245, 0.12);
	box-shadow: none;
}
.v3-proof-section .v3-proof-table thead th {
	background: rgba(247, 247, 245, 0.06);
	color: rgba(247, 247, 245, 0.6);
	border-bottom-color: rgba(247, 247, 245, 0.16);
}
.v3-proof-section .v3-proof-table thead th:hover {
	background: rgba(247, 247, 245, 0.10);
	color: #FFFFFF;
}
.v3-proof-section .v3-proof-table tbody td {
	color: rgba(247, 247, 245, 0.78);
	border-bottom-color: rgba(247, 247, 245, 0.08);
}
.v3-proof-section .v3-proof-table tbody tr:hover { background: rgba(247, 247, 245, 0.04); }
.v3-proof-section .v3-proof-client-name { color: #FFFFFF; }
.v3-proof-section .v3-proof-domain { color: var(--accent-soft); }
.v3-proof-section .v3-proof-domain:hover { color: #FFFFFF; }
.v3-proof-section .v3-proof-nda { color: rgba(247, 247, 245, 0.45); }
.v3-proof-section .v3-proof-keyword a {
	color: rgba(247, 247, 245, 0.92);
	border-bottom-color: rgba(247, 247, 245, 0.25);
}
.v3-proof-section .v3-proof-keyword a:hover { color: var(--accent-soft); border-bottom-color: var(--accent-soft); }
.v3-proof-section .v3-proof-market { color: rgba(247, 247, 245, 0.5); }
/* Rank badges retain their semantic color but shift to the dark surface */
.v3-proof-section .v3-proof-rank--gold     { background: var(--accent); color: #FFFFFF; }
.v3-proof-section .v3-proof-rank--top3     { background: rgba(91, 115, 255, 0.20); color: var(--accent-soft); }
.v3-proof-section .v3-proof-rank--regular  { background: rgba(247, 247, 245, 0.08); color: rgba(247, 247, 245, 0.85); }
.v3-proof-section .v3-proof-ai-badge--yes      { background: rgba(91, 115, 255, 0.20); color: var(--accent-soft); }
.v3-proof-section .v3-proof-ai-badge--yes svg  { color: var(--accent-soft); }
.v3-proof-section .v3-proof-ai-badge--partial  { background: rgba(247, 247, 245, 0.10); color: rgba(247, 247, 245, 0.85); }
.v3-proof-section .v3-proof-ai-badge--partial svg { color: rgba(247, 247, 245, 0.6); }
.v3-proof-section .v3-proof-ai-badge--no       { color: rgba(247, 247, 245, 0.4); }
.v3-proof-section .v3-proof-footnote { color: rgba(247, 247, 245, 0.5); }

/* ------------------------------------------------------------
   v3.22 Schedule — what-to-expect card + Calendly widget
   (zeeknows-inspired, replaces alpha.17 dark-band layout 2026-05-10)
   ------------------------------------------------------------ */
.v3-cal-section {
	background: var(--canvas);
	padding: clamp(48px, 7vw, 88px) 0;
}

/* The card — single bordered container holds header + 2-col body */
.v3-cal-card {
	max-width: 1080px;
	margin: 0 auto;
	background: var(--surface);
	border: 1px solid var(--accent);
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow-2);
}

/* Header strip — charcoal band with avatar + identity + availability pill */
.v3-cal-card-header {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-5) var(--s-6);
	background: var(--ink);
	color: var(--canvas);
}
.v3-cal-card-avatar {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--accent);
	display: block;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}
.v3-cal-card-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Pull the face into the centre of the circle. The source PNG frames
	 * head + shoulders; without this the face sits low and reads small. */
	object-position: center 22%;
	transform: scale(1.35);
	transform-origin: center 28%;
	display: block;
	image-rendering: -webkit-optimize-contrast;
}
.v3-cal-card-identity { flex: 1; min-width: 0; }
.v3-cal-card-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-md);
	color: #FFFFFF;
	line-height: 1.25;
}
.v3-cal-card-role {
	font-size: var(--fs-sm);
	color: rgba(247, 247, 245, 0.7);
	line-height: 1.3;
}
.v3-cal-card-pill {
	flex: none;
	padding: 6px 14px;
	border: 1px solid rgba(247, 247, 245, 0.25);
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	color: var(--canvas);
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Body — left "what to expect" + right Calendly widget */
.v3-cal-card-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}
.v3-cal-card-left {
	padding: clamp(28px, 3.5vw, 48px);
	display: flex;
	flex-direction: column;
}
.v3-cal-card-right {
	border-left: 1px solid var(--rule);
	background: var(--canvas-2);
	display: flex;
	flex-direction: column;
}

.v3-cal-card-h {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.625rem, 3vw, 2rem);
	letter-spacing: -0.025em;
	color: var(--ink);
	margin-bottom: var(--s-2);
}
.v3-cal-card-sub {
	font-size: var(--fs-md);
	color: var(--ink-warm);
	margin-bottom: var(--s-5);
}

.v3-cal-card-bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--s-5);
	flex: 1;
}
.v3-cal-card-bullets li {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
	margin-bottom: var(--s-4);
}
.v3-cal-card-bullets li:last-child { margin-bottom: 0; }
.v3-cal-card-bullets li svg {
	color: var(--accent);
	flex: none;
	margin-top: 3px;
}
.v3-cal-card-bullets p {
	color: var(--ink-warm);
	font-size: var(--fs-sm);
	line-height: 1.55;
	margin: 0;
}
.v3-cal-card-bullets strong {
	color: var(--ink);
	font-weight: 700;
}

.v3-cal-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-5);
	padding-top: var(--s-5);
	border-top: 1px solid var(--rule);
	font-size: var(--fs-sm);
	color: var(--ink-muted);
}
.v3-cal-card-meta span {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
}
.v3-cal-card-meta svg { color: var(--accent); flex: none; }

.v3-cal-card-right .calendly-inline-widget {
	border: none;
	border-radius: 0;
	background: transparent;
	width: 100%;
	flex: 1;
	min-height: 600px;
}
.v3-cal-card-noscript {
	padding: var(--s-5);
	text-align: center;
	font-size: var(--fs-sm);
	color: var(--ink-muted);
}
.v3-cal-card-noscript a { color: var(--accent-press); font-weight: 600; }

/* Mobile — collapse to single column, stack header pill on its own line */
@media (max-width: 899px) {
	.v3-cal-card-body { grid-template-columns: 1fr; }
	.v3-cal-card-right { border-left: none; border-top: 1px solid var(--rule); }
	.v3-cal-card-header { flex-wrap: wrap; }
	.v3-cal-card-pill { order: 3; width: 100%; text-align: center; }
}

/* ------------------------------------------------------------
   v3.23 Audit-tool result rendering (alpha.20)
   ------------------------------------------------------------ */
.v3-audit-result--success {
	margin-top: var(--s-6);
	padding: var(--s-6);
	background: rgba(247, 247, 245, 0.04);
	border: 1px solid rgba(247, 247, 245, 0.12);
	border-radius: var(--r-lg);
	color: rgba(250, 250, 247, 0.92);
	text-align: left;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.v3-audit-result--error {
	margin-top: var(--s-6);
	padding: var(--s-5);
	background: rgba(248, 113, 113, 0.10);
	border: 1px solid rgba(248, 113, 113, 0.30);
	border-radius: var(--r-md);
	color: #FCA5A5;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.v3-audit-result-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-4);
	padding-bottom: var(--s-4);
	margin-bottom: var(--s-5);
	border-bottom: 1px solid rgba(247, 247, 245, 0.12);
}
.v3-audit-result-eyebrow {
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-soft);
	font-weight: 700;
	margin-bottom: var(--s-2);
}
.v3-audit-result-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-xl);
	color: #FFFFFF;
	margin-bottom: 4px;
}
.v3-audit-result-page-title {
	font-size: var(--fs-sm);
	color: rgba(247, 247, 245, 0.55);
	font-style: italic;
}

/* Score badge */
.v3-audit-score {
	display: inline-flex;
	align-items: baseline;
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-md);
	flex: none;
}
.v3-audit-score-num {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 2.25rem;
	letter-spacing: -0.02em;
	line-height: 1;
}
.v3-audit-score-denom {
	font-size: var(--fs-md);
	opacity: 0.6;
	margin-left: 2px;
}
.v3-audit-score--good { background: rgba(91, 115, 255, 0.20); color: var(--accent-soft); }
.v3-audit-score--ok   { background: rgba(247, 247, 245, 0.10); color: #FFFFFF; }
.v3-audit-score--low  { background: rgba(248, 113, 113, 0.18); color: #FCA5A5; }

.v3-audit-section { margin-bottom: var(--s-5); }
.v3-audit-section-h {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-md);
	color: #FFFFFF;
	margin-bottom: var(--s-3);
}
.v3-audit-section-h--muted { color: rgba(247, 247, 245, 0.55); font-weight: 600; }

.v3-audit-issues, .v3-audit-passes { list-style: none; padding: 0; margin: 0; }

.v3-audit-issue {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: var(--s-4);
	padding: var(--s-3) 0;
	border-bottom: 1px solid rgba(247, 247, 245, 0.06);
	align-items: start;
}
.v3-audit-issue:last-child { border-bottom: none; }
.v3-audit-issue-sev {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 9px;
	letter-spacing: 0.12em;
	padding: 4px 8px;
	border-radius: var(--r-sm);
	display: inline-block;
	text-align: center;
	white-space: nowrap;
}
.v3-audit-issue--high   .v3-audit-issue-sev { background: rgba(248, 113, 113, 0.20); color: #FCA5A5; }
.v3-audit-issue--medium .v3-audit-issue-sev { background: rgba(251, 191, 36, 0.18); color: #FCD34D; }
.v3-audit-issue--low    .v3-audit-issue-sev { background: rgba(247, 247, 245, 0.10); color: rgba(247, 247, 245, 0.55); }
.v3-audit-issue-check {
	font-family: var(--font-display);
	font-weight: 700;
	color: #FFFFFF;
	margin-bottom: 4px;
}
.v3-audit-issue-detail {
	color: rgba(247, 247, 245, 0.72);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

.v3-audit-passes li {
	display: flex;
	gap: var(--s-2);
	align-items: flex-start;
	padding: var(--s-2) 0;
	color: rgba(247, 247, 245, 0.78);
	font-size: var(--fs-sm);
}
.v3-audit-passes li svg { color: var(--accent-soft); flex: none; margin-top: 4px; }
.v3-audit-passes strong { color: #FFFFFF; font-weight: 600; }

.v3-audit-cta {
	margin-top: var(--s-6);
	padding-top: var(--s-5);
	border-top: 1px solid rgba(247, 247, 245, 0.12);
	text-align: center;
}
.v3-audit-cta p {
	color: rgba(247, 247, 245, 0.78);
	margin-bottom: var(--s-4);
}

/* The result on the standalone /audit-tool page (which has its own dark band)
   uses the same dark-surface styling — defaults above already work. */
@media (max-width: 599px) {
	.v3-audit-result-head { flex-direction: column; align-items: flex-start; }
	.v3-audit-issue { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* ------------------------------------------------------------
   v3.24 Newsletter form success / error states (alpha.20)
   ------------------------------------------------------------ */
.v3-newsletter-success {
	max-width: 480px;
	margin: 0 auto;
	padding: var(--s-5);
	background: var(--accent-bg);
	border: 1px solid var(--rule-accent);
	border-radius: var(--r-md);
	color: var(--accent-press);
	text-align: center;
}
.v3-newsletter-success p {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-md);
	line-height: 1.45;
}
.v3-newsletter-error {
	margin-top: var(--s-3);
	padding: var(--s-2) var(--s-3);
	background: rgba(248, 113, 113, 0.10);
	border: 1px solid rgba(248, 113, 113, 0.30);
	border-radius: var(--r-sm);
	color: #B91C1C;
	font-size: var(--fs-sm);
	text-align: center;
}

/* ------------------------------------------------------------
   v3.25 Case-study banner SVG fills the .case-thumb area
   ------------------------------------------------------------ */
.case-thumb .case-banner-svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================
   end v3 spine
   ============================================================ */

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

/* ------------------------------------------------------------
   27. Print
   ------------------------------------------------------------ */
@media print {
	.site-header, .site-footer, .nav-toggle, .mobile-nav, .mobile-bar, .cta-card { display: none !important; }
	body { background: white; color: black; padding: 0; }
	* { color: black !important; background: white !important; box-shadow: none !important; border-color: #ccc !important; }
	.section { padding: 24px 0; }
	a { color: black !important; text-decoration: underline; }
}