/* ============================================================================
 * HHS — Hippo Home Services
 * Editorial scroll caliber: terminal-industries.com / oryzo.ai
 * Phase 1: Hero + scaffolding for chapters 01–05
 *
 * Token architecture:
 *   1. Color tokens (Flying Hippo palette, locked)
 *   2. Type tokens (DM Sans / DM Serif Display / JetBrains Mono)
 *   3. Spacing + scale tokens
 *   4. Motion tokens (durations, easings)
 * ============================================================================ */

:root {
	/* Color */
	--hhs-red:      #FF484A;
	--hhs-red-deep: #E83A3C;
	--hhs-black:    #0E0E10;
	--hhs-charcoal: #323232;
	--hhs-gray:     #CFD3D3;
	--hhs-cyan:     #5FD0DF;
	/* --hhs-navy is DEPRECATED as of 2026-05-28 (Jesse rule: navy is banned
	 * from the HHS palette, every usage must be replaced).
	 * For italic body voice on cream paper, use --hhs-italic-editorial.
	 * For semantic states (under-deployed, delta-down) on the BG result page,
	 * pick a replacement color deliberately during the result-page audit pass.
	 * The literal kept here only so older selectors render until they are
	 * swept; do not introduce new references. */
	--hhs-navy:     #276092;
	--hhs-gold:     #DECC62;
	--hhs-tan:      #AA9767;

	/* Italic editorial voice on cream paper. Standard 2026-05-28: italic body
	 * prose (subhead, trust line, transition lines, closing line) uses this
	 * token. Replacement must clear AA contrast on --hhs-paper-1. Dusk-2
	 * reads ~8.3:1 against paper-1, holds warm editorial gravitas, and is
	 * unambiguously not navy. */
	--hhs-italic-editorial: var(--hhs-dusk-2);

	/* Cream / paper system */
	--hhs-paper-0:  #FAF7F1;
	--hhs-paper-1:  #F5F2EB;
	--hhs-paper-2:  #ECE5D6;
	--hhs-paper-3:  #DCC9A8;
	--hhs-dusk-1:   #C99668;
	--hhs-dusk-2:   #6B3E25;

	/* Type */
	--hhs-font-sans:  'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
	--hhs-font-serif: 'DM Serif Display', Georgia, serif;
	--hhs-font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

	/* Display sizes */
	--hhs-display-jumbo:    clamp(2.75rem, 11vw, 12rem);
	--hhs-display-section:  clamp(2.4rem, 5.4vw, 5.4rem);
	--hhs-display-card:     clamp(1.4rem, 1.6vw, 1.85rem);
	--hhs-display-frame:    clamp(1.55rem, 1.7vw, 1.9rem);

	/* Body sizes */
	--hhs-body-lg:  1.125rem;
	--hhs-body:     1rem;
	--hhs-body-sm:  0.9375rem;
	--hhs-meta:     0.75rem;
	--hhs-tracking-mono: 0.16em;

	/* Spacing scale */
	--hhs-pad-page:  clamp(1.5rem, 4vw, 4rem);
	--hhs-section-y: clamp(6rem, 12vh, 12rem);

	/* Layered text-shadow gradient — kills the rectangular halo edge that
	 * single-layer shadows produce. Use this token wherever cream/white type
	 * needs to lift off a busy or dark background. */
	--hhs-text-shadow-cream: 0 4px 14px rgba(10, 5, 2, 0.6), 0 10px 36px rgba(10, 5, 2, 0.36), 0 18px 80px rgba(10, 5, 2, 0.18);
	--hhs-text-shadow-cream-soft: 0 2px 10px rgba(10, 5, 2, 0.55), 0 6px 22px rgba(10, 5, 2, 0.32), 0 12px 50px rgba(10, 5, 2, 0.16);

	/* Motion */
	--hhs-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--hhs-ease-cinema: cubic-bezier(0.65, 0, 0.35, 1);
	--hhs-dur-fast:    0.32s;
	--hhs-dur-base:    0.55s;
	--hhs-dur-slow:    0.95s;
	--hhs-dur-cinema:  1.25s;

	/* Layered z */
	--hhs-z-bg:   1;
	--hhs-z-fg:   10;
	--hhs-z-nav:  100;
	--hhs-z-skip: 200;
}

/* Tighten page padding and section rhythm on phones — desktop visuals are locked
 * and unchanged. ~25% tighter floors for content density on mobile. */
@media (max-width: 640px) {
	:root {
		--hhs-pad-page:  clamp(1rem, 4vw, 1.25rem);
		--hhs-section-y: clamp(4rem, 10vh, 6rem);
	}
}

/* ============================================================================
 * Reset + base
 * ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--hhs-font-sans);
	font-weight: 400;
	font-size: var(--hhs-body);
	line-height: 1.6;
	color: var(--hhs-black);
	background: var(--hhs-paper-1);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; letter-spacing: -0.02em; }
p { margin: 0; }

/* Skip link */
.hhs-skip {
	position: absolute;
	top: 0; left: 0;
	transform: translateY(-150%);
	background: var(--hhs-black);
	color: #fff;
	padding: 0.85rem 1.25rem;
	z-index: var(--hhs-z-skip);
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.2s var(--hhs-ease-out);
}
.hhs-skip:focus { transform: translateY(0); outline: 2px solid var(--hhs-red); outline-offset: 2px; }

/* Focus rings (visible-only) */
:focus-visible { outline: 2px solid var(--hhs-red); outline-offset: 2px; }

/* ============================================================================
 * Type tokens
 * ============================================================================ */

.hhs-datum {
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.78);
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-bottom: clamp(2rem, 3.5vh, 3.25rem);
}
.hhs-hero .hhs-datum { color: rgba(255, 248, 235, 0.78); }
.hhs-datum::before {
	content: '';
	width: clamp(2.4rem, 5vw, 4rem);
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}
.hhs-datum__caret {
	display: inline-block;
	width: 0.55em;
	height: 1.05em;
	background: var(--hhs-red);
	transform: translateY(0.1em);
	animation: hhs-caret 1.05s steps(1) infinite;
	margin-left: 0.18em;
	transition: opacity 0.5s linear;
}
.hhs-datum__caret.hhs-caret--done { opacity: 0; animation: none; }
.hhs-hero__signature-caret.hhs-caret--done { opacity: 0; animation: none; }
@keyframes hhs-caret { 50% { opacity: 0; } }

.hhs-eyebrow {
	font-family: var(--hhs-font-sans);
	font-weight: 500;
	font-size: var(--hhs-meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hhs-red);
	margin-bottom: clamp(1.6rem, 2.5vh, 2.25rem);
}

/* ============================================================================
 * Nav (frosted glass)
 * ============================================================================ */

.hhs-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--hhs-z-nav);
	padding: 0.85rem var(--hhs-pad-page);
	pointer-events: none;
	transition: padding 0.4s var(--hhs-ease-out);
}
.hhs-nav__inner {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1vw, 0.95rem);
	background: rgba(250, 247, 241, 0.62);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(14, 14, 16, 0.08);
	border-radius: 999px;
	padding: 0.45rem 0.55rem 0.45rem 0.85rem;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 12px 28px -20px rgba(14, 14, 16, 0.25);
	max-width: 1320px;
	margin: 0 auto;
	white-space: nowrap;
	flex-wrap: nowrap;
}
.hhs-nav__links { flex: 1 1 auto; min-width: 0; justify-content: flex-end; padding-right: clamp(0.25rem, 0.7vw, 0.7rem); }

.hhs-nav__logo {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: 0.9375rem;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--hhs-black);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
	flex: 0 1 auto;
	overflow: hidden;
}
.hhs-nav__logo-img {
	display: block;
	height: clamp(2rem, 2.4vw, 2.4rem);
	width: auto;
	flex: 0 0 auto;
	transition: filter 0.4s var(--hhs-ease-out);
}
/* Scrolled state: dark hippo body would disappear on the dark inner; invert
 * to white silhouette. Wings (already light) survive the filter cleanly. */
body[data-scrolled="true"] .hhs-nav__logo-img {
	filter: brightness(0) invert(1);
}

.hhs-nav__links {
	display: flex;
	justify-content: center;
	gap: clamp(0.55rem, 1.05vw, 1.05rem);
}
.hhs-nav__links a {
	font-family: var(--hhs-font-sans);
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: -0.005em;
	text-decoration: none;
	color: var(--hhs-charcoal);
	padding: 0.4rem 0.15rem;
	position: relative;
	transition: color 0.25s var(--hhs-ease-out);
}
.hhs-nav__links a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0.25rem;
	height: 1px;
	background: var(--hhs-red);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s var(--hhs-ease-out);
}
.hhs-nav__links a:hover { color: var(--hhs-red); }
.hhs-nav__links a:hover::after { transform: scaleX(1); }

.hhs-nav__cta {
	font-family: var(--hhs-font-sans);
	font-weight: 500;
	font-size: 0.8rem;
	letter-spacing: 0.015em;
	text-decoration: none;
	background: var(--hhs-red);
	color: #fff;
	padding: 0.6rem 0.95rem;
	border-radius: 999px;
	transition: background 0.25s var(--hhs-ease-out), transform 0.25s var(--hhs-ease-out);
	white-space: nowrap;
}
.hhs-nav__cta:hover { background: var(--hhs-red-deep); transform: translateY(-1px); }

.hhs-nav__menu { display: none; background: transparent; border: 0; color: var(--hhs-black); padding: 0.5rem; }
.hhs-mobile-menu { display: none; }

/* Scrolled state — written to body by hero-cinematic.js once user scrolls past hero */
body[data-scrolled="true"] .hhs-nav__inner {
	background: rgba(14, 14, 16, 0.85);
	border-color: rgba(255, 255, 255, 0.08);
}
body[data-scrolled="true"] .hhs-nav__logo,
body[data-scrolled="true"] .hhs-nav__links a,
body[data-scrolled="true"] .hhs-nav__menu { color: rgba(255, 255, 255, 0.92); }
body[data-scrolled="true"] .hhs-nav__links a:hover { color: var(--hhs-red); }

/* ============================================================================
 * Hero composition
 * ============================================================================ */

/* Hero is 200vh tall. The visual layer (photograph + glow + chrome) pins to the top
 * of the viewport for the full duration. The content layer ("stage") overlays the
 * visual; each beat (datum, eyebrow, H1 words, subhead, body, CTA, signature) reveals
 * at its own scroll-progress threshold using --hhs-hero-p set by hero-cinematic.js.
 *
 * The result: page load shows ONLY the photograph + nav + scroll cue. Every other
 * content beat unfolds as the user scrolls. */
.hhs-hero {
	position: relative;
	min-height: 320vh;
	isolation: isolate;
	background: #1A0F08;
	color: #fff;
	--hhs-hero-p: 0;
}

/* Visual layer: pinned at the top of the viewport for the full hero scroll. */
.hhs-hero__visual {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	z-index: 1;
	overflow: hidden;
	isolation: isolate;
}

/*
 * Hero asset:
 *   /assets/img/hippo-hero.jpg is a single frame (Still083) from the
 *   Flying Hippo + Celsius merger announcement film. The production hero
 *   will swap this still for a 5–10s looped video clip rendered out of
 *   the same source. The current treatment grades the photograph
 *   (vignette, slight color cast, particle haze, scroll-tracked Ken Burns)
 *   so the still already feels cinematic before the video lands.
 */
.hhs-hero__sky {
	position: absolute;
	inset: 0;
	z-index: var(--hhs-z-bg);
	background-image: url('../img/hippo-hero.jpg');
	background-size: cover;
	background-position: 28% 35%;
	background-repeat: no-repeat;
	/* Slight ken-burns drift driven by scroll progress */
	transform: scale(calc(1.05 + var(--hhs-hero-p) * 0.06)) scaleX(-1);
	transition: transform 0.4s linear;
	will-change: transform;
}

/* Photograph fades out across a long 15% scroll window so the chapter 01 transition feels deliberate.
 * The dissolve begins at progress 0.85 (right at the start of the journey beat) and finishes at 1.00. */
.hhs-hero__visual::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 9;
	background: var(--hhs-black);
	opacity: clamp(0, calc((var(--hhs-hero-p) - 0.85) / 0.15), 1);
	pointer-events: none;
	transition: opacity 0.3s linear;
}

/* Atmospheric grading — left-bottom vignette behind H1, right-side scrim
 * behind the H2 + CTA stack, plus a global bottom-vignette and warm cast.
 * All gradients use 5+ stops with extended transparent boundaries so the
 * falloff is genuinely smooth — no visible ellipse edge artifacts. */
.hhs-hero__horizon {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		/* Bottom-left vignette behind the H1 — extended to 100% transparent */
		radial-gradient(ellipse 110% 110% at 4% 100%, rgba(4, 2, 1, 0.85) 0%, rgba(4, 2, 1, 0.55) 22%, rgba(6, 3, 1, 0.32) 42%, rgba(8, 4, 2, 0.15) 62%, rgba(8, 4, 2, 0.05) 80%, transparent 100%),
		/* Right-column scrim behind H2 + CTA — smoother falloff, no hard edge */
		radial-gradient(ellipse 95% 100% at 95% 65%, rgba(4, 2, 1, 0.62) 0%, rgba(4, 2, 1, 0.42) 22%, rgba(6, 3, 1, 0.24) 44%, rgba(8, 4, 2, 0.12) 64%, rgba(8, 4, 2, 0.04) 82%, transparent 100%),
		/* Subtle global bottom darken */
		linear-gradient(180deg, rgba(20, 12, 6, 0.42) 0%, rgba(20, 12, 6, 0.05) 16%, transparent 32%, rgba(8, 4, 2, 0.22) 68%, rgba(4, 2, 1, 0.72) 100%);
	pointer-events: none;
}

/* Particles — fine atmospheric film grain */
.hhs-hero__particles {
	position: absolute;
	inset: 0;
	z-index: 3;
	background-image:
		radial-gradient(circle at 18% 22%, rgba(255, 230, 195, 0.07) 0px, transparent 2px),
		radial-gradient(circle at 38% 41%, rgba(255, 230, 195, 0.05) 0px, transparent 2px),
		radial-gradient(circle at 67% 60%, rgba(255, 230, 195, 0.06) 0px, transparent 2px),
		radial-gradient(circle at 82% 30%, rgba(255, 230, 195, 0.04) 0px, transparent 2px),
		radial-gradient(circle at 12% 78%, rgba(255, 230, 195, 0.05) 0px, transparent 2px),
		radial-gradient(circle at 50% 86%, rgba(255, 230, 195, 0.06) 0px, transparent 2px);
	background-size: 100% 100%;
	pointer-events: none;
	opacity: 0.55;
	mix-blend-mode: screen;
}

/* Hippo wrap: the video, when present, sits at z-index 1 (same layer as the still sky)
 * so the horizon vignette + particles + dissolve overlay all render on top of it. */
.hhs-hero__hippo-wrap {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.hhs-hero__hippo-glow {
	position: absolute;
	inset: auto 0 18% 0;
	height: 38vh;
	background: radial-gradient(ellipse 60% 60% at 50% 60%, rgba(255, 175, 95, 0.18) 0%, transparent 70%);
	mix-blend-mode: screen;
	filter: blur(8px);
	pointer-events: none;
	z-index: 4;
}
.hhs-hippo {
	position: absolute;
	inset: 0;
	z-index: 2; /* sits above .hhs-hero__sky still so the video covers the placeholder */
}
.hhs-hippo[data-asset="image"] { display: none; } /* Suppress the legacy PNG when the still is the bg */
.hhs-hippo__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Stage: pinned to the viewport for the entire hero scroll. Content stays in
 * place visually while the unfold reveals each beat via opacity/transform.
 * No element ever scrolls past the nav — the 200vh hero scroll drives reveals
 * via --hhs-hero-p, not actual layout movement. */
.hhs-hero__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	margin-top: -100vh;
	z-index: 10;
	padding: clamp(7rem, 11vh, 8.5rem) var(--hhs-pad-page) clamp(3rem, 5vh, 4.5rem);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(1.5rem, 3vh, 2.5rem);
	pointer-events: none;
}
.hhs-hero__stage > * { pointer-events: auto; }
.hhs-hero__stage > .hhs-eyebrow { flex: 0 0 auto; }
.hhs-hero__stage > .hhs-hero__grid { flex: 1 1 auto; min-height: 0; }
.hhs-hero__stage > .hhs-hero__journey { flex: 0 0 auto; }

/* Datum line lives inside the sticky visual layer — pinned to upper-left of the photograph.
 * On the homepage hero it carries the "Scroll to begin" affordance and types in on load
 * (no scroll required). Once the user scrolls past 5% progress, it fades out — the prompt
 * has done its job and shouldn't compete with the unfolding hero copy. */
.hhs-hero__visual .hhs-hero__datum {
	position: absolute;
	top: clamp(7rem, 12vh, 9rem);
	left: var(--hhs-pad-page);
	margin-bottom: 0;
	max-width: max-content;
	z-index: 6;
	opacity: clamp(0, calc(1 - var(--hhs-hero-p) * 12), 1);
	transition: opacity 0.4s linear;
	transform: none;
	pointer-events: none;
}

/* Hero grid: bottom-aligned. Photograph carries the upper 60%, type lives lower-left, CTA frame lower-right. */
.hhs-hero__grid {
	position: relative;
	max-width: 1320px;
	width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: end;
	padding-bottom: clamp(2rem, 4vh, 4rem);
}

@media (max-width: 1023px) {
	.hhs-hero { min-height: 220vh; }
	.hhs-hero__stage {
		min-height: 220vh;
		padding-top: clamp(7rem, 14vh, 9rem);
		padding-bottom: clamp(8rem, 18vh, 12rem);
	}
	.hhs-hero__grid {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

/* Phone-sized hero: shorter runway, tighter top padding so the first CTA fits
 * above the fold at 375×667. Lock is suppressed on touch in JS, so the runway
 * doesn't need to "earn" a Continue button. */
@media (max-width: 640px) {
	.hhs-hero { min-height: 140vh; }
	.hhs-hero__stage {
		min-height: 140vh;
		padding-top: clamp(4.5rem, 9vh, 6rem);
		padding-bottom: clamp(5rem, 10vh, 7rem);
		gap: clamp(0.75rem, 2vh, 1.5rem);
	}
	.hhs-hero__grid {
		gap: 1.25rem;
		padding-bottom: 1.5rem;
	}
	.hhs-hero__cta-stack {
		gap: 0.75rem;
	}
	.hhs-hero__cta-stack .hhs-btn {
		width: 100%;
		min-height: 48px;
		padding: 0.85rem 1.2rem;
	}
	.hhs-cta-frame {
		padding: 1.1rem 1.15rem;
		gap: 0.75rem;
	}
}

.hhs-hero__copy {
	max-width: min(54rem, 100%);
}

.hhs-hero__h1 {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: var(--hhs-display-jumbo);
	line-height: 0.9;
	letter-spacing: -0.045em;
	color: #FFF8EB;
	margin-bottom: clamp(1.25rem, 2.4vh, 1.85rem);
	max-width: 12ch;
	text-shadow: var(--hhs-text-shadow-cream);
}
.hhs-hero__h1 .hhs-h1__line { display: flex; flex-wrap: wrap; gap: 0.18em; }
.hhs-h1__line {
	display: block;
	overflow: visible; /* allow text-shadow to render past the line — was clipping it */
}
.hhs-h1__word {
	display: inline-block;
	--p: clamp(0, calc((var(--hhs-hero-p) - var(--start, 0)) / (var(--end, 1) - var(--start, 0))), 1);
	opacity: var(--p);
	transform: translateY(calc((1 - var(--p)) * 0.4em));
	transition: opacity 0.2s linear, transform 0.2s linear;
}

/* "Gap." — the brand-meaningful word + the rail micro-moment.
 *
 * Sequence:
 *   0.32 → 0.40   thin FH Red rail draws across left-to-right
 *   0.40 → 0.44   rail holds, fully visible (the gap, named)
 *   0.44 → 0.62   "Gap." enters from off-screen right, slides into position;
 *                 letter-spread closes from 0.5em to normal kerning;
 *                 simultaneously the rail erodes from its right edge under
 *                 Gap.'s leading edge, so by the time Gap. is in place the
 *                 rail is fully covered. Two layers of "gap closing" run
 *                 in lockstep.
 */
.hhs-h1__line--gap {
	position: relative;
	display: block;
	min-width: 100%;
	overflow: visible;
}

.hhs-h1__gap-rail {
	--rail-draw:  clamp(0, calc((var(--hhs-hero-p) - 0.28) / 0.08), 1);
	--rail-erode: clamp(0, calc((var(--hhs-hero-p) - 0.40) / 0.15), 1);
	--rail-visible: clamp(0, calc(var(--rail-draw) - var(--rail-erode)), 1);
	position: absolute;
	left: 0;
	bottom: 0.34em;
	height: clamp(4px, 0.42vw, 7px);
	width: calc(var(--rail-visible) * 100%);
	background: var(--hhs-red);
	pointer-events: none;
	z-index: 1;
	opacity: clamp(0, calc(var(--rail-visible) * 8), 1); /* hard-hide when fully eroded so no glow artifact lingers */
	box-shadow: 0 0 24px rgba(255, 72, 74, calc(var(--rail-visible) * 0.45));
	transition: width 0.18s linear, opacity 0.18s linear, box-shadow 0.18s linear;
}

.hhs-h1__word--stress {
	--start: 0.40; --end: 0.55;
	--p: clamp(0, calc((var(--hhs-hero-p) - var(--start)) / (var(--end) - var(--start))), 1);
	display: inline-block;
	position: relative;
	z-index: 2;
	color: var(--hhs-red);
	letter-spacing: calc(0.5em - var(--p) * 0.55em);
	transform: translateX(calc((1 - var(--p)) * 130%));
	transition: letter-spacing 0.25s linear, transform 0.25s linear;
	will-change: letter-spacing, transform;
}
.hhs-h1__word--stress .hhs-h1__letter {
	display: inline-block;
	opacity: var(--p);
	transition: opacity 0.18s linear;
}
.hhs-h1__word--stress .hhs-h1__letter:nth-child(1) { transition-delay: 0.0s; }
.hhs-h1__word--stress .hhs-h1__letter:nth-child(2) { transition-delay: 0.06s; }
.hhs-h1__word--stress .hhs-h1__letter:nth-child(3) { transition-delay: 0.12s; }
.hhs-h1__word--stress .hhs-h1__letter:nth-child(4) { transition-delay: 0.18s; }

.hhs-hero__subhead {
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.4rem, 2.1vw, 2.05rem);
	line-height: 1.32;
	color: #FFF8EB;
	max-width: 32ch;
	margin-bottom: clamp(2rem, 3.5vh, 2.5rem);
	text-shadow: var(--hhs-text-shadow-cream-soft);
}

.hhs-hero__body {
	font-size: var(--hhs-body-lg);
	line-height: 1.6;
	color: rgba(255, 248, 235, 0.86);
	max-width: 42ch;
}

/* Edge label — vertically anchored mono text down the right margin */
.hhs-hero__edge-label {
	position: absolute;
	top: 38%;
	right: clamp(0.5rem, 1.2vw, 1rem);
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.45);
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}
.hhs-hero__edge-rule {
	width: 1px;
	height: clamp(2.5rem, 6vh, 4.5rem);
	background: currentColor;
	opacity: 0.55;
}
@media (max-width: 1023px) { .hhs-hero__edge-label { display: none; } }

/* CTA stack: glass frame + signature line below per spec */
.hhs-hero__cta-stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: stretch;
	width: 100%;
	max-width: 28rem;
	justify-self: end;
}
@media (max-width: 1023px) { .hhs-hero__cta-stack { max-width: none; } }

.hhs-hero__signature {
	font-family: var(--hhs-font-sans);
	font-weight: 500;
	font-size: var(--hhs-meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hhs-cyan);
	text-shadow: 0 2px 16px rgba(8, 4, 2, 0.55);
	padding-left: 0.25rem;
}
.hhs-hero__scroll {
	position: absolute;
	bottom: clamp(1.25rem, 3vh, 2.5rem);
	right: var(--hhs-pad-page);
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.62);
}
.hhs-hero__scroll-rule {
	width: 2.4rem;
	height: 1px;
	background: currentColor;
	position: relative;
	overflow: hidden;
}
.hhs-hero__scroll-rule::after {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 30%;
	height: 100%;
	background: var(--hhs-red);
	animation: hhs-scroll-tick 2.4s cubic-bezier(0.8, 0, 0.2, 1) infinite;
}
@keyframes hhs-scroll-tick {
	0%   { transform: translateX(-100%); }
	60%  { transform: translateX(330%); }
	100% { transform: translateX(330%); }
}

/* ============================================================================
 * Glass CTA frame (Option A stack)
 * ============================================================================ */

.hhs-cta-frame {
	position: relative;
	background: rgba(250, 247, 241, 0.78);
	backdrop-filter: blur(22px) saturate(135%);
	-webkit-backdrop-filter: blur(22px) saturate(135%);
	border: 1px solid rgba(14, 14, 16, 0.08);
	border-radius: 18px;
	padding: clamp(1.5rem, 2.4vw, 2.25rem);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.6) inset,
		0 32px 60px -36px rgba(28, 14, 8, 0.55),
		0 8px 24px -12px rgba(28, 14, 8, 0.22);
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: clamp(0.85rem, 1.4vh, 1.15rem);
}

.hhs-cta-frame__label {
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.65);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.hhs-cta-frame__label::before {
	content: '';
	width: 0.4rem;
	height: 0.4rem;
	background: var(--hhs-red);
	border-radius: 50%;
}

.hhs-cta-frame__title {
	font-family: var(--hhs-font-sans);
	font-weight: 700;
	font-size: var(--hhs-display-frame);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--hhs-black);
}

.hhs-cta-frame__body {
	font-size: var(--hhs-body-sm);
	line-height: 1.55;
	color: rgba(14, 14, 16, 0.72);
	max-width: 38ch;
}

@media (max-width: 1023px) {
	.hhs-cta-frame { justify-self: stretch; max-width: none; }
}

/* Primary button — magnetic */
.hhs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--hhs-font-sans);
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: 0.005em;
	padding: 0.95rem 1.4rem;
	border: 0;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.4s var(--hhs-ease-out), background 0.25s var(--hhs-ease-out);
	will-change: transform;
}
.hhs-btn--primary {
	background: var(--hhs-red);
	color: #fff;
	box-shadow: 0 12px 24px -10px rgba(255, 72, 74, 0.45);
}
.hhs-btn--primary:hover { background: var(--hhs-red-deep); }

/* Secondary — outlined. Used for alternative-path CTAs ("Walk your plan      *
 * with a Booking Architect", etc.). Same shape and size language as primary, *
 * 1.5px FH Black outline, transparent fill, FH Black text. Hover flips to    *
 * filled FH Black with white text.                                           */
.hhs-btn--secondary {
	background: transparent;
	color: var(--hhs-black);
	box-shadow: inset 0 0 0 1.5px var(--hhs-black);
	transition: background 0.25s var(--hhs-ease-out), color 0.25s var(--hhs-ease-out);
}
.hhs-btn--secondary:hover {
	background: var(--hhs-black);
	color: #fff;
}
.hhs-btn--secondary .hhs-btn__arrow { color: inherit; }

.hhs-btn__arrow { transition: transform 0.32s var(--hhs-ease-out); }
.hhs-btn:hover .hhs-btn__arrow { transform: translateX(4px); }

/* CTA label variants — long vs short. Short variant fires inside the two
 * "assessment" widow bands measured on the locked v1.2 CTA copy:
 * desktop band 1024–1180px (button width drops below single-line threshold
 * inside the hero/C02/C05 frame); mobile band ≤460px (page padding pushes
 * the button under the same threshold). Buffered +20px/+16px above the raw
 * 1160/444 measurements to absorb sub-pixel font-rendering variance. */
[data-cta-variant="short"] { display: none; }
@media (min-width: 1024px) and (max-width: 1180px) {
	[data-cta-variant="long"]  { display: none; }
	[data-cta-variant="short"] { display: inline; }
}
/* Phones + small tablets always use the short variant — long labels wrap in
 * single-column buttons even at 768px because hero/CTA frame padding eats
 * available width. Short copy never wraps. */
@media (max-width: 900px) {
	[data-cta-variant="long"]  { display: none; }
	[data-cta-variant="short"] { display: inline; }
}
/* Hard guardrail: button text must NEVER wrap to two lines. Per direction.
 * Truncate with an ellipsis if a copy update accidentally exceeds button width. */
.hhs-btn { white-space: nowrap; }
.hhs-btn > span:not(.hhs-btn__arrow) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* Ghost-button secondary — quiet sibling to the red primary. Cream fill, dark
 * text, thin charcoal border. Pentagram/editorial register. Both at-rest and
 * hover are bulletproof readable; the hover cue is depth + a darkened border,
 * not a color polarity flip. */
.hhs-cta-frame__secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--hhs-font-sans);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--hhs-black);
	text-decoration: none;
	background: rgba(255, 252, 245, 0.92);
	border: 1.5px solid rgba(14, 14, 16, 0.42);
	border-radius: 999px;
	padding: 0.7rem 1.2rem;
	align-self: flex-start;
	box-shadow: 0 1px 0 rgba(14, 14, 16, 0.05);
	transform: translateY(0);
	transition: background 0.22s var(--hhs-ease-out),
		border-color 0.22s var(--hhs-ease-out),
		color 0.22s var(--hhs-ease-out),
		transform 0.22s var(--hhs-ease-out),
		box-shadow 0.22s var(--hhs-ease-out);
}
.hhs-cta-frame__secondary:hover,
.hhs-cta-frame__secondary:focus-visible {
	background: var(--hhs-black);
	border-color: var(--hhs-black);
	color: #FFF8EB;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -10px rgba(14, 14, 16, 0.5);
}
.hhs-cta-frame__secondary [aria-hidden] {
	transition: transform 0.2s var(--hhs-ease-out);
}
.hhs-cta-frame__secondary:hover [aria-hidden],
.hhs-cta-frame__secondary:focus-visible [aria-hidden] {
	transform: translateX(4px);
}

/* ============================================================================
 * Hero unfold — scroll-progress-driven reveal of each content beat.
 *
 * --hhs-hero-p ranges 0 → 1 over the 260vh hero scroll, set by hero-cinematic.js.
 * Each element gets a window [start..end] inside that range. Inside the window,
 * the element's local progress goes 0 → 1 and drives its opacity + transform.
 *
 * The schedule below uses NON-OVERLAPPING beats with deliberate breathing pauses
 * between each major moment. The reader experiences:
 *   1. Photograph + nav + "Scroll to begin" prompt at load.
 *   2. As they begin scrolling: eyebrow appears, then H1 reveals word-by-word.
 *   3. Pause. The H1 holds.
 *   4. Subhead arrives alone.
 *   5. Pause.
 *   6. Body arrives alone.
 *   7. Pause.
 *   8. Glass CTA frame slides in. Signature settles below it.
 *   9. Photograph dissolves to FH Black. Chapter 01 picks up.
 *
 * Reveal schedule (progress through the 320vh hero scroll):
 *   datum         types in on load (no scroll required)
 *   0.05 → 0.12   eyebrow
 *   0.16 → 0.26   H1 word "Mind"
 *   0.22 → 0.32   H1 word "the"
 *   0.28 → 0.36   FH Red rail draws across (the "gap", named)
 *   (rail holds fully visible 0.36 → 0.40)
 *   0.40 → 0.55   "Gap." slides in from right; rail erodes; letters close
 *   (pause 0.55 → 0.60)
 *   0.60 → 0.68   H2 clip-path sweep + focus-pull blur
 *   (pause 0.68 → 0.72)
 *   0.72 → 0.80   CTA scale-in + red pulse glow
 *   (HOLD 0.80 → 0.90 — nothing changes; user reads the assembled hero)
 *   0.90 → 0.94   signature types in (with mono caret)
 *   0.92 → 0.97   dashed cyan rail draws across with travelling chevron
 *   0.95 → 1.00   "Continue your journey" pill materializes
 *   0.85 → 1.00   photograph long dissolves to FH Black (15% scroll runway)
 * ============================================================================ */

.hhs-hero [data-unfold="eyebrow"] {
	--start: 0.05; --end: 0.12;
	--p: clamp(0, calc((var(--hhs-hero-p) - var(--start)) / (var(--end) - var(--start))), 1);
	opacity: var(--p);
	transform: translateY(calc((1 - var(--p)) * 22px));
	transition: opacity 0.2s linear, transform 0.2s linear;
}

/* H1 = "Mind the Gap." — words 0 + 1 here; word 2 ("Gap.") owns its own window on .hhs-h1__word--stress */
.hhs-hero [data-unfold-word="0"] { --start: 0.16; --end: 0.26; }
.hhs-hero [data-unfold-word="1"] { --start: 0.22; --end: 0.32; }

/* H2 reveals via clip-path sweep, left-to-right (a directorial wipe), not fade-up.
 * Pairs with a slight blur-to-focus transition so it reads as a camera focus pull. */
.hhs-hero [data-unfold="subhead"] {
	--start: 0.60; --end: 0.68;
	--p: clamp(0, calc((var(--hhs-hero-p) - var(--start)) / (var(--end) - var(--start))), 1);
	opacity: clamp(0, calc(var(--p) * 1.4), 1);
	clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
	-webkit-clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
	filter: blur(calc((1 - var(--p)) * 6px));
	transition: clip-path 0.25s linear, filter 0.25s linear, opacity 0.2s linear;
}

/* Body removed in v1.1 hero copy — left rule out intentionally. */

/* CTA frame: scales in from 0.92 → 1.0 with a red glow halo that pulses out.
 * The button itself keeps its magnetic hover behavior. */
.hhs-hero [data-unfold="cta"] {
	--start: 0.72; --end: 0.80;
	--p: clamp(0, calc((var(--hhs-hero-p) - var(--start)) / (var(--end) - var(--start))), 1);
	opacity: var(--p);
	transform: translateY(calc((1 - var(--p)) * 36px)) scale(calc(0.94 + var(--p) * 0.06));
	transform-origin: 50% 100%;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.6) inset,
		0 32px 60px -36px rgba(28, 14, 8, 0.55),
		0 8px 24px -12px rgba(28, 14, 8, 0.22),
		0 0 0 calc((1 - var(--p)) * 14px) rgba(255, 72, 74, calc((1 - var(--p)) * 0.35));
	transition: opacity 0.25s linear, transform 0.3s linear, box-shadow 0.4s linear;
	margin-bottom: clamp(2.5rem, 5vh, 4rem); /* breathing room before signature */
}

/* Reassurance line: small trust assertion below the CTA frame, above the signature.
 * 647 Dark Blue per v1.3 hero spec. Aligns within the CTA stack so it sits column-
 * aligned with the button above it. Fires after the CTA settles, before the signature
 * begins typing — slot 0.82 → 0.88 in the hero cascade. */
.hhs-hero__reassurance {
	font-family: var(--hhs-font-sans);
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--hhs-navy);
	max-width: 32ch;
	margin-top: clamp(-1.5rem, -2vh, -1rem); /* tightens against CTA frame bottom margin */
	padding-left: 0.25rem;
	text-wrap: pretty;
}

.hhs-hero [data-unfold="reassurance"] {
	--start: 0.82; --end: 0.88;
	--p: clamp(0, calc((var(--hhs-hero-p) - var(--start)) / (var(--end) - var(--start))), 1);
	opacity: var(--p);
	transform: translateY(calc((1 - var(--p)) * 12px));
	transition: opacity 0.25s linear, transform 0.25s linear;
}

/* The "journey" — signature line + dashed treasure-map rail + Continue affordance.
 * Centered horizontally as a deliberate gate at the end of the hero scroll.
 * Scroll lock kicks in once the user reaches this beat — they have to click
 * Continue to advance past the hero.
 */
.hhs-hero__journey {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.4rem, 2.8vh, 2.25rem);
	max-width: 44rem;
	/* margin-top: auto pushes journey to the bottom of the flex stage so the
	 * grid above never collapses gap into it. padding-top enforces a fixed
	 * minimum visual buffer between the H1 / CTA frame and the signature line. */
	margin: auto auto 0;
	padding-top: clamp(4rem, 8vh, 6.5rem);
	text-align: center;
	width: 100%;
}
@media (max-height: 760px) {
	.hhs-hero__journey {
		gap: clamp(1.1rem, 2.2vh, 1.6rem);
		padding-top: clamp(2.5rem, 5vh, 4rem);
	}
}

.hhs-hero__signature {
	--start: 0.90; --end: 0.94;
	--p: clamp(0, calc((var(--hhs-hero-p) - var(--start)) / (var(--end) - var(--start))), 1);
	opacity: var(--p);
	transform: translateY(calc((1 - var(--p)) * 8px));
	transition: opacity 0.2s linear, transform 0.2s linear;
	display: inline-flex;
	align-items: baseline;
	gap: 0.3em;
	color: var(--hhs-cyan);
	text-shadow: var(--hhs-text-shadow-cream-soft);
}
.hhs-hero__signature-text { display: inline-block; }
.hhs-hero__signature-caret {
	display: inline-block;
	width: 0.45em;
	height: 1em;
	background: var(--hhs-cyan);
	transform: translateY(0.12em);
	animation: hhs-caret 1.05s steps(1) infinite;
}

.hhs-hero__journey-rail {
	--start: 0.92; --end: 0.97;
	--p: clamp(0, calc((var(--hhs-hero-p) - var(--start)) / (var(--end) - var(--start))), 1);
	display: block;
	height: 8px;
	width: 100%;
	max-width: 28rem;
	background:
		linear-gradient(to right,
			var(--hhs-cyan) 0,
			var(--hhs-cyan) 4px,
			transparent 4px,
			transparent 12px) 0 50% / 12px 1px repeat-x;
	position: relative;
	clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
	-webkit-clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
	/* No transition — clip-path updates per-scroll-frame to eliminate the post-hero glitch
	 * that happens when scroll momentum overshoots the lock and CSS transitions lag. */
	opacity: clamp(0, calc(var(--p) * 6), 1);
}
.hhs-hero__journey-rail::after {
	/* travelling chevron icon at the leading edge of the rail */
	content: '';
	position: absolute;
	top: 50%;
	left: calc(var(--p) * 100%);
	width: 8px;
	height: 8px;
	border-right: 1.5px solid var(--hhs-cyan);
	border-bottom: 1.5px solid var(--hhs-cyan);
	transform: translate(-100%, -50%) rotate(-45deg);
	box-shadow: 0 0 14px rgba(95, 208, 223, calc(var(--p) * 0.6));
	opacity: var(--p);
}

/* Continue button — primary affordance. Cyan-bordered pill with a constant
 * subtle pulse, plus a heavier illuminated halo when the scroll-lock gate is
 * active. The user CAN'T proceed past the hero without clicking it; the
 * intensified glow telegraphs that. */
.hhs-hero__continue {
	--start: 0.95; --end: 1.0;
	--p: clamp(0, calc((var(--hhs-hero-p) - var(--start)) / (var(--end) - var(--start))), 1);
	opacity: var(--p);
	transform: translateY(calc((1 - var(--p)) * 14px));
	transition:
		opacity 0.25s linear,
		transform 0.25s linear,
		border-color 0.25s linear,
		color 0.25s linear,
		background 0.25s linear,
		box-shadow 0.5s ease-out;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	align-self: center;
	background: rgba(95, 208, 223, 0.10);
	border: 1px solid rgba(95, 208, 223, 0.5);
	border-radius: 999px;
	padding: 0.85rem 1.4rem 0.85rem 1.55rem;
	cursor: pointer;
	color: var(--hhs-cyan);
	font-family: var(--hhs-font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	position: relative;
	box-shadow: 0 0 0 0 rgba(95, 208, 223, 0.5);
}
.hhs-hero__continue::before {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 999px;
	border: 1px solid rgba(95, 208, 223, 0.25);
	opacity: 0;
	transition: opacity 0.4s linear;
	pointer-events: none;
}
.hhs-hero__continue:hover {
	background: rgba(95, 208, 223, 0.22);
	border-color: var(--hhs-cyan);
	color: #fff;
	box-shadow: 0 0 24px rgba(95, 208, 223, 0.55), 0 0 48px rgba(95, 208, 223, 0.25);
}

/* Continue button gets the beacon pulse as soon as it's visible (IntersectionObserver
 * adds .is-spotlit). Decoupled from the scroll lock so fast scrollers still see it. */
.hhs-hero__continue.is-spotlit,
body[data-hhs-locked="true"] .hhs-hero__continue {
	animation: hhs-continue-pulse 1.6s ease-in-out infinite;
	background: rgba(95, 208, 223, 0.18);
	border-color: var(--hhs-cyan);
	color: #fff;
}
.hhs-hero__continue.is-spotlit::before,
body[data-hhs-locked="true"] .hhs-hero__continue::before {
	opacity: 1;
	animation: hhs-continue-halo 2s ease-out infinite;
}
@keyframes hhs-continue-pulse {
	0%, 100% { box-shadow: 0 0 16px rgba(95, 208, 223, 0.45), 0 0 32px rgba(95, 208, 223, 0.18); transform: translateY(0) scale(1); }
	50%      { box-shadow: 0 0 28px rgba(95, 208, 223, 0.7),  0 0 60px rgba(95, 208, 223, 0.32); transform: translateY(0) scale(1.025); }
}
@keyframes hhs-continue-halo {
	0%   { transform: scale(1);    opacity: 0.7; }
	100% { transform: scale(1.18); opacity: 0;   }
}
.hhs-hero__continue-arrow {
	display: inline-block;
	width: 14px;
	height: 14px;
	position: relative;
	animation: hhs-arrow-breathe 1.6s ease-in-out infinite alternate;
}
.hhs-hero__continue-arrow::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 100%;
	background: linear-gradient(to bottom, currentColor 0%, currentColor 70%, transparent 100%);
}
.hhs-hero__continue-arrow::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translate(-50%, -10%) rotate(45deg);
}
@keyframes hhs-arrow-breathe {
	from { transform: translateY(-2px); opacity: 0.7; }
	to   { transform: translateY(3px); opacity: 1; }
}

/* ============================================================================
 * Footer
 * ============================================================================ */

.hhs-footer {
	background: var(--hhs-black);
	color: rgba(255, 255, 255, 0.85);
	padding: clamp(4rem, 8vh, 7rem) var(--hhs-pad-page) clamp(2rem, 4vh, 3rem);
}
.hhs-footer__inner {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 4rem);
	padding-bottom: clamp(2.5rem, 5vh, 4rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 768px) { .hhs-footer__inner { grid-template-columns: 1fr; } }

.hhs-footer__wordmark {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: 1.25rem;
	color: #fff;
	margin-bottom: 0.75rem;
}
.hhs-footer__tagline {
	font-family: var(--hhs-font-sans);
	font-weight: 500;
	font-size: var(--hhs-meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hhs-cyan);
	margin-bottom: 1rem;
}
.hhs-footer__attribution {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.875rem;
}
.hhs-footer__attribution a {
	color: rgba(255, 255, 255, 0.95);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	text-decoration: none;
}

.hhs-footer__heading {
	font-family: var(--hhs-font-sans);
	font-weight: 500;
	font-size: var(--hhs-meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 1rem;
}
.hhs-footer__col a {
	display: block;
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	padding: 0.4rem 0;
	transition: color 0.25s var(--hhs-ease-out);
}
.hhs-footer__col a:hover { color: var(--hhs-red); }

.hhs-footer__base {
	max-width: 1320px;
	margin: clamp(2rem, 4vh, 3rem) auto 0;
	padding-top: clamp(1.5rem, 3vh, 2rem);
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}
.hhs-footer__base a { color: inherit; text-decoration: none; }
.hhs-footer__base a:hover { color: var(--hhs-red); }
@media (max-width: 600px) { .hhs-footer__base { flex-direction: column; } }

/* ============================================================================
 * Mobile menu (hidden on desktop)
 * ============================================================================ */

@media (max-width: 1023px) {
	.hhs-nav__links,
	.hhs-nav__cta { display: none; }
	.hhs-nav__menu {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		margin-left: auto;
		flex: 0 0 auto;
		font-family: var(--hhs-font-mono);
		font-size: var(--hhs-meta);
		letter-spacing: var(--hhs-tracking-mono);
		text-transform: uppercase;
	}
	.hhs-nav__menu-icon {
		width: 1.4rem;
		height: 1rem;
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.hhs-nav__menu-icon span {
		display: block;
		height: 1.5px;
		background: currentColor;
	}
	.hhs-mobile-menu {
		position: fixed;
		inset: 0;
		z-index: calc(var(--hhs-z-nav) - 1);
		background: var(--hhs-black);
		color: #fff;
		display: none;
		flex-direction: column;
		justify-content: center;
		padding: 4rem var(--hhs-pad-page);
		gap: 2rem;
	}
	.hhs-mobile-menu[aria-expanded="true"] { display: flex; }
	.hhs-mobile-menu nav a {
		display: block;
		font-family: var(--hhs-font-sans);
		font-weight: 700;
		font-size: clamp(1.6rem, 5vw, 2.4rem);
		color: #fff;
		text-decoration: none;
		padding: 0.6rem 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}
}

/* ============================================================================
 * Reduced motion
 * ============================================================================ */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.hhs-h1__word,
	.hhs-datum,
	.hhs-eyebrow,
	.hhs-hero__subhead,
	.hhs-hero__body,
	.hhs-cta-frame,
	.hhs-hero__reassurance { transform: none; opacity: 1; }
	.hhs-datum__caret { display: none; }
}

/* ============================================================================
 * CHAPTER 01 — THE PROBLEM
 *
 * Layout philosophy: dimension over linearity.
 *   1. Sticky vertical chapter index in the LEFT margin (printer's-mark style)
 *   2. Pinned $5 → $80 cinematic with layered z-depth (graph plate, ghost
 *      historical figures floating at varying scale + opacity, foreground
 *      monospace number ticking with color shift cream → amber → FH Red)
 *   3. Two-Up intro reveals as user scrolls past the cinematic
 *   4. Three asymmetric numbered rows. Row 02 flips column order; rows
 *      offset vertically to break the linear stack.
 *   5. Per-row micro-moments: bleeding credit card, utilization bar 62→51,
 *      multiplier counter 6.0× → 3.5×.
 *   6. Closing italic line bracketed by hairline rules.
 *   7. SVG scalloped curve transitions to chapter 02 cream below.
 * ============================================================================ */

.hhs-chapter--01 {
	--c01-p: 0;
	--c01-cinema-p: 0;   /* progress 0–1 across the pinned cinematic only */
	--c01-amount: 5;
	position: relative;
	min-height: 180vh;
	background: #0E0E10; /* opaque; body tone shows through inter-chapter margins only */
	color: #FFF8EB;
	isolation: isolate;
	overflow: clip; /* clip instead of hidden — doesn't break sticky descendants */
	z-index: 1;
}

/* Texture layers — kill the flat-black wall feel */
.hhs-chapter__grain {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.06;
	mix-blend-mode: overlay;
	background-image:
		radial-gradient(circle at 11% 23%, rgba(255, 255, 255, 0.6) 0px, transparent 1px),
		radial-gradient(circle at 38% 51%, rgba(255, 255, 255, 0.5) 0px, transparent 1px),
		radial-gradient(circle at 67% 18%, rgba(255, 255, 255, 0.55) 0px, transparent 1px),
		radial-gradient(circle at 82% 73%, rgba(255, 255, 255, 0.5) 0px, transparent 1px),
		radial-gradient(circle at 14% 86%, rgba(255, 255, 255, 0.45) 0px, transparent 1px),
		radial-gradient(circle at 56% 94%, rgba(255, 255, 255, 0.5) 0px, transparent 1px);
	background-size: 3px 3px, 4px 4px, 5px 5px, 3px 3px, 4px 4px, 5px 5px;
}

.hhs-chapter__topo {
	position: absolute;
	inset: 50% 0 0 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.05;
	background-image:
		repeating-linear-gradient(180deg,
			transparent 0,
			transparent 56px,
			rgba(255, 220, 180, 0.4) 56px,
			rgba(255, 220, 180, 0.4) 57px);
	mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

/* Sticky vertical chapter index — printer's mark down the left margin */
.hhs-chapter__index {
	position: sticky;
	top: clamp(8rem, 14vh, 11rem);
	left: clamp(0.75rem, 1.5vw, 1.5rem);
	z-index: 12;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.55);
	pointer-events: none;
	float: left;
	height: 60vh;
	margin-right: -200px; /* pull out of flow so chapter content owns the centerline */
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}
.hhs-chapter__index-rule {
	width: 1px;
	height: 3rem;
	background: var(--hhs-red);
	display: block;
}
.hhs-chapter__index-label {
	color: var(--hhs-red);
	font-weight: 500;
}
@media (max-width: 1023px) { .hhs-chapter__index { display: none; } }

/* --------------------------------------------------------------------
 * Cinematic: pinned $5 → $80 reveal
 *
 * The wrap is 200vh tall. The cinematic itself is sticky 100vh. Sticky
 * pins for (wrap - cinematic) = 100vh of user scroll, then releases as
 * the wrap's bottom passes the cinematic's bottom — so the intro section
 * comes into view cleanly without the cinematic overlapping it.
 * -------------------------------------------------------------------- */
.hhs-c01-cinematic-wrap {
	position: relative;
	height: 100vh;
	height: 100dvh;
	z-index: 4;
}
/* The cinematic doesn't pin — counter is time-driven and runs over 1.6s on
 * intersection. User scrolls past naturally. The pivot section ("The math broke.")
 * IS sticky-pinned so the user can't outrun it.  No empty wrap = no black gap. */
.hhs-c01-cinematic {
	position: relative;
	height: 100vh;
	height: 100dvh;
	z-index: 5;
	display: grid;
	place-items: center;
	overflow: hidden;
	padding: 0 var(--hhs-pad-page);
}

/* Layer 1: graph paper plate (the historical chart background) */
.hhs-c01-cinematic__plate {
	position: absolute;
	inset: -8% -4% -8% -4%;
	z-index: 1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 56px 56px, 56px 56px;
	mask-image: radial-gradient(ellipse 75% 80% at 50% 55%, #000 30%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 55%, #000 30%, transparent 80%);
	transform: translateY(calc(var(--c01-cinema-p) * -32px));
	transition: transform 0.5s linear;
}

/* Layer 2: ghost numbers floating at varying scale and position */
.hhs-c01-cinematic__ghosts {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.hhs-c01-ghost {
	position: absolute;
	font-family: var(--hhs-font-mono);
	color: rgba(255, 248, 235, 0.18);
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	white-space: nowrap;
	transition: opacity 0.4s linear, transform 0.6s linear;
}
.hhs-c01-ghost b {
	font-weight: 500;
	font-size: clamp(2rem, 4vw, 3.6rem);
	letter-spacing: -0.02em;
}
.hhs-c01-ghost i {
	font-style: normal;
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(222, 204, 98, 0.55);
}
/* Ghost historical figures — fade in via .is-active toggle (set when cinematic
 * enters viewport, in lockstep with the counter), not scroll-progress. */
.hhs-c01-ghost { opacity: 0; transition: opacity 0.7s var(--hhs-ease-out), transform 1.2s var(--hhs-ease-cinema); }
.hhs-c01-ghost--a { top: 22%;  left: 12%; transform: translateY(8px); }
.hhs-c01-ghost--b { top: 38%;  right: 14%; transform: translateY(8px); }
.hhs-c01-ghost--c { bottom: 24%; left: 18%; transform: translateY(8px); }
.hhs-c01-cinematic.is-active .hhs-c01-ghost--a { opacity: 0.45; transform: translateY(0); transition-delay: 0.35s; }
.hhs-c01-cinematic.is-active .hhs-c01-ghost--b { opacity: 0.55; transform: translateY(0); transition-delay: 0.65s; }
.hhs-c01-cinematic.is-active .hhs-c01-ghost--c { opacity: 0.7;  transform: translateY(0); transition-delay: 0.95s; }

/* Layer 3: foreground stage. Holds the dollar moment cleanly — no transform.
 * The "math broke." statement is now its OWN section after the cinematic. */
.hhs-c01-cinematic__stage {
	position: relative;
	z-index: 3;
	text-align: center;
	max-width: 60ch;
}
.hhs-c01-cinematic__eyebrow {
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.6);
	margin-bottom: clamp(1.5rem, 2.5vh, 2rem);
}
.hhs-c01-cinematic__amount {
	font-family: var(--hhs-font-mono);
	font-weight: 500;
	line-height: 0.92;
	letter-spacing: -0.04em;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: clamp(1rem, 2vw, 2rem);
	white-space: nowrap;
	will-change: color, text-shadow;
}
.hhs-c01-cinematic__from {
	color: rgba(255, 248, 235, 0.45);
	font-size: clamp(2.4rem, 5.5vw, 5rem);
	letter-spacing: -0.03em;
}
.hhs-c01-cinematic__arrow {
	color: rgba(255, 248, 235, 0.4);
	font-size: clamp(2rem, 4.4vw, 4rem);
	transition: color 0.4s linear;
	align-self: center;
	transform: translateY(0.06em);
}
.hhs-chapter--01[data-c01-stage="hot"] .hhs-c01-cinematic__arrow,
.hhs-chapter--01[data-c01-stage="red"] .hhs-c01-cinematic__arrow { color: var(--hhs-red); }
/* The BIG number — currency + value glued together via inline-flex with nowrap.
 * No min-width trickery, no possible wrapping into two lines. */
.hhs-c01-cinematic__to {
	font-size: clamp(5.5rem, 14vw, 14rem);
	color: var(--c01-color, #FFF8EB);
	transition: color 0.35s linear, text-shadow 0.35s linear;
	display: inline-flex;
	align-items: baseline;
	white-space: nowrap;
}
.hhs-c01-cinematic__currency { letter-spacing: -0.04em; }
.hhs-c01-cinematic__value {
	display: inline-block;
	min-width: 2.4ch;
	text-align: left;
}
/* Color stages keyed off --c01-cinema-p */
.hhs-chapter--01[data-c01-stage="early"] { --c01-color: #FFF8EB; }
.hhs-chapter--01[data-c01-stage="mid"]   { --c01-color: #DECC62; }
.hhs-chapter--01[data-c01-stage="hot"]   { --c01-color: #FF8A4A; }
.hhs-chapter--01[data-c01-stage="red"]   { --c01-color: var(--hhs-red); }
.hhs-chapter--01[data-c01-stage="red"] .hhs-c01-cinematic__amount {
	text-shadow: 0 0 60px rgba(255, 72, 74, 0.45);
}
.hhs-chapter--01[data-c01-flash="true"] .hhs-c01-cinematic__to {
	animation: hhs-c01-flash 0.55s ease-out;
}
@keyframes hhs-c01-flash {
	0%   { color: #FFF; text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
	30%  { color: #FFF; text-shadow: 0 0 80px rgba(255, 255, 255, 0.95); }
	100% { color: var(--hhs-red); text-shadow: 0 0 60px rgba(255, 72, 74, 0.45); }
}
/* Hold phase: $80 sits in the viewport with an ambient red glow pulse so the moment lingers */
.hhs-chapter--01[data-c01-hold="true"] .hhs-c01-cinematic__to {
	animation: hhs-c01-hold-pulse 2.4s ease-in-out infinite;
}
@keyframes hhs-c01-hold-pulse {
	0%, 100% { text-shadow: 0 0 50px rgba(255, 72, 74, 0.42); }
	50%      { text-shadow: 0 0 90px rgba(255, 72, 74, 0.7), 0 0 160px rgba(255, 72, 74, 0.25); }
}
.hhs-c01-cinematic__axis {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	justify-content: center;
	margin-top: clamp(1.5rem, 3vh, 2.5rem);
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.55);
}
.hhs-c01-cinematic__axis-rule {
	width: clamp(6rem, 14vw, 12rem);
	height: 1px;
	background: linear-gradient(to right, rgba(255, 248, 235, 0.45) 0%, var(--hhs-red) 100%);
}

/* --------------------------------------------------------------------
 * "The math broke." pivot — own beat AFTER the dollar animation.
 *
 * Sticky-pinned for ~100vh of scroll so the user CAN'T outrun the moment.
 * Statement reveals via clip-path sweep + focus-pull blur. FH Red dashed
 * rail draws underneath. Body fades. Down cue with breathing arrow points
 * into the rows. Same treasure-map vocabulary as the hero's journey.
 * -------------------------------------------------------------------- */
/* "The math broke." pivot — content-height only, padded for breathing room.
 * Was min-height: 100vh with justify-center which left 50vh of empty void
 * above and below the content. */
.hhs-c01-pivot-wrap {
	position: relative;
	z-index: 3;
}
.hhs-c01-pivot {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.95rem, 1.8vh, 1.5rem);
	padding: clamp(7rem, 14vh, 11rem) var(--hhs-pad-page);
	text-align: center;
	max-width: 1320px;
	margin: 0 auto;
}

.hhs-c01-pivot__statement {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(2.8rem, 7.6vw, 7.6rem);
	line-height: 0.92;
	letter-spacing: -0.04em;
	color: #FFF8EB;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.05em;
	opacity: 0;
	clip-path: inset(0 100% 0 0);
	-webkit-clip-path: inset(0 100% 0 0);
	filter: blur(5px);
	transition: opacity 0.6s var(--hhs-ease-out), clip-path 0.9s var(--hhs-ease-cinema), -webkit-clip-path 0.9s var(--hhs-ease-cinema), filter 0.7s var(--hhs-ease-out);
}
.hhs-c01-pivot.is-revealed .hhs-c01-pivot__statement {
	opacity: 1;
	/* Negative insets at fully-revealed state so the period's rotate+translate
	 * isn't clipped at the statement's box edge. */
	clip-path: inset(-0.5em -0.5em -0.5em 0%);
	-webkit-clip-path: inset(-0.5em -0.5em -0.5em 0%);
	filter: blur(0);
}
.hhs-c01-pivot__the { display: inline-block; }
.hhs-c01-pivot__broke {
	display: inline-block;
	color: var(--hhs-red);
	position: relative;
	text-shadow:
		0 0 0 rgba(255, 72, 74, 0),
		0 0 0 rgba(255, 72, 74, 0),
		0 0 0 rgba(255, 72, 74, 0);
	transition: text-shadow 0.9s ease-out 0.3s;
}
/* Three layered shadows with progressively smaller alpha + larger blur — smooth
 * gradient falloff instead of a hard rectangular halo. */
.hhs-c01-pivot.is-revealed .hhs-c01-pivot__broke {
	text-shadow:
		0 0 22px rgba(255, 72, 74, 0.55),
		0 0 60px rgba(255, 72, 74, 0.28),
		0 0 130px rgba(255, 72, 74, 0.12);
}
.hhs-c01-pivot__period {
	display: inline-block;
	transform-origin: 50% 50%;
	transform: translate(0, 0) rotate(0);
	transition: transform 0.9s var(--hhs-ease-cinema) 0.4s;
}
.hhs-c01-pivot.is-revealed .hhs-c01-pivot__period { transform: translate(0.08em, 0.18em) rotate(22deg); }

.hhs-c01-pivot__rail {
	display: block;
	height: 8px;
	width: min(440px, 72vw);
	background: linear-gradient(to right, var(--hhs-red) 0 6px, transparent 6px 14px) 0 50% / 14px 1px repeat-x;
	opacity: 0;
	clip-path: inset(0 100% 0 0);
	-webkit-clip-path: inset(0 100% 0 0);
	transition: clip-path 0.9s var(--hhs-ease-cinema) 0.5s, -webkit-clip-path 0.9s var(--hhs-ease-cinema) 0.5s, opacity 0.4s linear 0.5s;
}
.hhs-c01-pivot.is-revealed .hhs-c01-pivot__rail {
	opacity: 1;
	clip-path: inset(0 0% 0 0);
	-webkit-clip-path: inset(0 0% 0 0);
}

.hhs-c01-pivot__body {
	font-family: var(--hhs-font-sans);
	font-weight: 400;
	font-size: clamp(1.05rem, 1.3vw, 1.3rem);
	line-height: 1.6;
	color: rgba(255, 248, 235, 0.82);
	max-width: 64ch;
	margin: 0 auto;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s linear 0.9s, transform 0.7s var(--hhs-ease-cinema) 0.9s;
}
.hhs-c01-pivot.is-revealed .hhs-c01-pivot__body { opacity: 1; transform: translateY(0); }

.hhs-c01-pivot__cue {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	margin-top: clamp(1rem, 2vh, 1.75rem);
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.55);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s linear 1.4s, transform 0.6s var(--hhs-ease-cinema) 1.4s;
}
.hhs-c01-pivot.is-revealed .hhs-c01-pivot__cue { opacity: 1; transform: translateY(0); }
.hhs-c01-pivot__cue-arrow {
	font-size: 1.4rem;
	color: var(--hhs-red);
	animation: hhs-arrow-breathe 1.8s ease-in-out infinite alternate;
}

/* --------------------------------------------------------------------
 * Three numbered rows — asymmetric staggered grid
 * -------------------------------------------------------------------- */
.hhs-c01-rows {
	position: relative;
	z-index: 5;
	max-width: 1320px;
	margin: 0 auto;
	padding: clamp(1.5rem, 3vh, 3rem) clamp(3rem, 6vw, 6rem) clamp(5rem, 9vh, 7rem) clamp(5rem, 10vw, 8rem);
	display: flex;
	flex-direction: column;
	gap: clamp(5rem, 10vh, 8rem);
}
.hhs-c01-row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.7s var(--hhs-ease-out), transform 0.85s var(--hhs-ease-cinema);
}
.hhs-c01-row.is-revealed { opacity: 1; transform: translateY(0); }

/* Asymmetric offsets per row — break the linear stack */
.hhs-c01-row--01 { margin-left: 0; }
.hhs-c01-row--02 { margin-left: clamp(2rem, 5vw, 5rem); margin-top: -2.5vh; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.hhs-c01-row--03 { margin-left: clamp(0rem, 2vw, 2rem); margin-top: 1.5vh; }

.hhs-c01-row__index {
	position: absolute;
	top: -1.4em;
	left: 0;
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: var(--hhs-red);
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.hhs-c01-row__index::before {
	content: '';
	width: 1.6rem;
	height: 1px;
	background: var(--hhs-red);
}
.hhs-c01-row__title {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(1.6rem, 2.4vw, 2.4rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 clamp(0.85rem, 1.6vh, 1.25rem);
	color: #FFF8EB;
}
.hhs-c01-row__body {
	font-size: clamp(0.95rem, 1.05vw, 1.05rem);
	line-height: 1.65;
	color: rgba(255, 248, 235, 0.74);
	max-width: 50ch;
}

/* Row 01 — credit card with red drip + pool */
.hhs-c01-card {
	position: relative;
	width: clamp(220px, 22vw, 320px);
	aspect-ratio: 1.586 / 1;
	margin: 0 auto;
	background: linear-gradient(135deg, #1A1A1F 0%, #2A2026 60%, #322023 100%);
	border-radius: 14px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 24px 40px -22px rgba(0, 0, 0, 0.7),
		0 6px 16px -10px rgba(0, 0, 0, 0.55);
	transform: rotate(-3deg);
	transition: transform 0.5s var(--hhs-ease-out);
	color: rgba(255, 248, 235, 0.6);
	font-family: var(--hhs-font-mono);
}
.hhs-c01-row.is-revealed .hhs-c01-card { transform: rotate(-2deg) translateY(-6px); }
.hhs-c01-card__chip {
	position: absolute;
	top: 22%;
	left: 12%;
	width: 32px;
	height: 24px;
	background: linear-gradient(135deg, #C9B27A 0%, #8C7140 100%);
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
}
.hhs-c01-card__band {
	position: absolute;
	top: 18%;
	right: 12%;
	width: 1.4rem;
	height: 1.4rem;
	border: 2px solid rgba(255, 72, 74, 0.55);
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(255, 72, 74, 0.2);
}
.hhs-c01-card__number {
	position: absolute;
	bottom: 26%;
	left: 12%;
	right: 12%;
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	color: rgba(255, 248, 235, 0.55);
}
.hhs-c01-card__drop {
	position: absolute;
	width: 6px;
	height: 12px;
	background: var(--hhs-red);
	border-radius: 0 0 50% 50% / 0 0 60% 60%;
	bottom: -8px;
	opacity: 0;
}
.hhs-c01-card__drop--1 { left: 28%; }
.hhs-c01-card__drop--2 { left: 50%; }
.hhs-c01-card__drop--3 { left: 72%; }
.hhs-c01-row.is-revealed .hhs-c01-card__drop { animation: hhs-c01-drip 2.4s ease-in infinite; }
.hhs-c01-row.is-revealed .hhs-c01-card__drop--1 { animation-delay: 0s; }
.hhs-c01-row.is-revealed .hhs-c01-card__drop--2 { animation-delay: 0.55s; }
.hhs-c01-row.is-revealed .hhs-c01-card__drop--3 { animation-delay: 1.1s; }
@keyframes hhs-c01-drip {
	0%   { transform: translateY(-6px) scaleY(0.5); opacity: 0; }
	18%  { transform: translateY(0) scaleY(1);     opacity: 1; }
	75%  { transform: translateY(46px) scaleY(1);  opacity: 1; }
	100% { transform: translateY(60px) scaleY(0.6); opacity: 0; }
}
.hhs-c01-card__pool {
	position: absolute;
	bottom: -38px;
	left: 24%;
	right: 24%;
	height: 12px;
	background: radial-gradient(ellipse 50% 100% at 50% 100%, var(--hhs-red) 0%, rgba(255, 72, 74, 0.6) 50%, transparent 80%);
	opacity: 0;
	transform: scaleX(0.4);
	transform-origin: 50% 100%;
	transition: opacity 1.2s linear 1s, transform 1.6s var(--hhs-ease-cinema) 1s;
}
.hhs-c01-row.is-revealed .hhs-c01-card__pool { opacity: 0.85; transform: scaleX(1); }

/* Row 02 — schedule grid (5 techs × 4 days). Owner's view shows all booked,
 * GM's view reveals empty slots in a wave. The 5th tech (NEW) carries more
 * empties — visualizes "added next tech, utilization dropped." */
.hhs-c01-grid {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	transform: perspective(1100px) rotateY(-5deg) rotateX(2deg);
	transform-origin: center center;
	padding: 1.5rem 1.5rem 1.4rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.7);
}
.hhs-c01-grid__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 1.1rem;
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.55);
}
.hhs-c01-grid__view-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(255, 248, 235, 0.55);
}
.hhs-c01-grid__view-from { transition: color 0.5s linear, opacity 0.5s linear; }
.hhs-c01-grid__view-arrow { color: rgba(255, 72, 74, 0.5); transition: color 0.5s linear; }
.hhs-c01-grid__view-to { color: rgba(255, 72, 74, 0.5); transition: color 0.5s linear; opacity: 0.5; }
.hhs-c01-row.is-revealed .hhs-c01-grid__view-from { color: rgba(255, 248, 235, 0.35); opacity: 0.55; }
.hhs-c01-row.is-revealed .hhs-c01-grid__view-arrow { color: var(--hhs-red); }
.hhs-c01-row.is-revealed .hhs-c01-grid__view-to { color: var(--hhs-red); opacity: 1; }

.hhs-c01-grid__body { position: relative; }
.hhs-c01-grid__col-labels {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6px;
	font-family: var(--hhs-font-mono);
	font-size: 0.55rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.4);
	margin-bottom: 8px;
}
.hhs-c01-grid__col-labels span {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.hhs-c01-grid__col-labels-new { color: rgba(255, 72, 74, 0.8) !important; }
.hhs-c01-grid__col-labels-new small {
	font-size: 0.5rem;
	letter-spacing: 0.16em;
	color: var(--hhs-red);
}
.hhs-c01-grid__cells {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(4, 1fr);
	gap: 6px;
}
.hhs-c01-grid__cell {
	aspect-ratio: 1;
	background: linear-gradient(135deg, rgba(255, 248, 235, 0.85) 0%, rgba(255, 248, 235, 0.65) 100%);
	border-radius: 4px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
	transition: background 0.4s linear, box-shadow 0.4s linear, opacity 0.4s linear;
}
/* Reveal: empty slots release in a left-to-right + top-to-bottom wave so the GM-view materializes progressively */
.hhs-c01-row.is-revealed .hhs-c01-grid__cell[data-empty="1"] {
	background: transparent;
	border: 1px dashed rgba(255, 72, 74, 0.5);
	box-shadow: none;
	animation: hhs-c01-cell-empty 0.45s ease-out backwards;
}
.hhs-c01-row.is-revealed .hhs-c01-grid__cell[data-c="4"]  { animation-delay: 0.4s; }
.hhs-c01-row.is-revealed .hhs-c01-grid__cell[data-c="6"]  { animation-delay: 0.55s; }
.hhs-c01-row.is-revealed .hhs-c01-grid__cell[data-c="9"]  { animation-delay: 0.7s; }
.hhs-c01-row.is-revealed .hhs-c01-grid__cell[data-c="12"] { animation-delay: 0.85s; }
.hhs-c01-row.is-revealed .hhs-c01-grid__cell[data-c="14"] { animation-delay: 1.0s; }
.hhs-c01-row.is-revealed .hhs-c01-grid__cell[data-c="18"] { animation-delay: 1.15s; }
.hhs-c01-row.is-revealed .hhs-c01-grid__cell[data-c="19"] { animation-delay: 1.3s; }
@keyframes hhs-c01-cell-empty {
	0%   { background: linear-gradient(135deg, rgba(255, 248, 235, 0.85), rgba(255, 248, 235, 0.65)); border-color: rgba(255, 72, 74, 0); transform: scale(1); }
	60%  { background: rgba(255, 72, 74, 0.4); border-color: rgba(255, 72, 74, 0.8); transform: scale(0.94); }
	100% { background: transparent; border-color: rgba(255, 72, 74, 0.5); transform: scale(1); }
}

.hhs-c01-grid__footer {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-top: 1.1rem;
	margin-top: 1.1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.55);
}
.hhs-c01-grid__footer-value {
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	color: #FFF8EB;
	font-weight: 500;
	transition: color 0.5s linear;
}
.hhs-c01-row.is-revealed .hhs-c01-grid__footer-value { color: var(--hhs-red); }

/* Row 03 — broken multiple. Top: "You wanted 6.0×" in cream with a fissure crack
 * that opens. Bottom: "Banker offered 3.5×" in FH Red, illuminated, larger.
 * The downward arrow between visualizes the loss. */
.hhs-c01-mult {
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	text-align: left;
	transform: rotate(2deg);
	transition: transform 0.6s var(--hhs-ease-out);
	padding: 1.6rem 1.6rem 1.4rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
	box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.65);
}
.hhs-c01-row.is-revealed .hhs-c01-mult { transform: rotate(1deg); }

.hhs-c01-mult__row {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.hhs-c01-mult__label {
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.55);
}
.hhs-c01-mult__big {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 1;
	display: inline-flex;
	align-items: baseline;
	gap: 0.05em;
	position: relative;
}
.hhs-c01-mult__big--cream {
	font-size: clamp(2.6rem, 4.4vw, 3.6rem);
	color: rgba(255, 248, 235, 0.72);
	transition: color 0.5s linear, opacity 0.5s linear;
}
.hhs-c01-mult__big--red {
	font-size: clamp(3.6rem, 6vw, 5.2rem);
	color: var(--hhs-red);
	text-shadow: 0 0 30px rgba(255, 72, 74, 0);
	transition: text-shadow 0.6s linear 0.3s;
}
.hhs-c01-row.is-revealed .hhs-c01-mult__big--cream { color: rgba(255, 248, 235, 0.32); }
.hhs-c01-row.is-revealed .hhs-c01-mult__big--red { text-shadow: 0 0 38px rgba(255, 72, 74, 0.55); }

.hhs-c01-mult__num,
.hhs-c01-mult__num-static {
	display: inline-block;
	min-width: 2.6ch;
	text-align: right;
}
.hhs-c01-mult__x { font-size: 0.55em; color: currentColor; opacity: 0.7; }

/* The fissure crack on the cream "You wanted" number — opens diagonally as the row reveals */
.hhs-c01-mult__crack {
	position: absolute;
	top: 5%;
	left: 35%;
	width: 1px;
	height: 90%;
	background: linear-gradient(180deg, transparent 0%, rgba(255, 72, 74, 0.6) 30%, rgba(255, 72, 74, 0.6) 70%, transparent 100%);
	transform: rotate(-12deg) scaleY(0);
	transform-origin: 50% 0%;
	transition: transform 0.9s var(--hhs-ease-cinema) 0.6s;
}
.hhs-c01-row.is-revealed .hhs-c01-mult__crack { transform: rotate(-12deg) scaleY(1); }

.hhs-c01-mult__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0.8rem 0;
	gap: 0.5rem;
}
.hhs-c01-mult__divider::before,
.hhs-c01-mult__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(255, 72, 74, 0.5), transparent);
}
.hhs-c01-mult__divider-arrow {
	color: var(--hhs-red);
	font-size: 1.4rem;
	line-height: 1;
	animation: hhs-arrow-breathe 2s ease-in-out infinite alternate;
	display: inline-block;
}

.hhs-c01-mult__caption {
	margin-top: 1rem;
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-size: 1rem;
	color: rgba(255, 248, 235, 0.55);
}

@media (max-width: 1023px) {
	.hhs-c01-row { grid-template-columns: 1fr; gap: 2rem; margin-left: 0 !important; margin-top: 0 !important; }
	.hhs-c01-row__visual { order: 2; }
	.hhs-c01-row--02 { grid-template-columns: 1fr; }
	.hhs-c01-row--02 .hhs-c01-row__visual { order: 1; }
	.hhs-c01-row--02 .hhs-c01-row__copy { order: 2; }
}

/* --------------------------------------------------------------------
 * Closing line + scalloped curve transition
 * -------------------------------------------------------------------- */
.hhs-c01-closing {
	position: relative;
	z-index: 5;
	max-width: 38ch;
	margin: 0 auto;
	padding: clamp(4rem, 8vh, 6rem) var(--hhs-pad-page);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.25rem, 2.5vh, 2rem);
	text-align: center;
}
.hhs-c01-closing__rule {
	display: block;
	width: 64px;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--hhs-red), transparent);
}
.hhs-c01-closing__line {
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-size: clamp(1.25rem, 1.6vw, 1.55rem);
	color: rgba(255, 248, 235, 0.85);
	line-height: 1.4;
}

/* c01 transition replaced with hard-split (same pattern as ch02-05) */

/* Chapter 02 cream placeholder so the chapter 01 transition has a target */
.hhs-chapter-placeholder--cream {
	background: var(--hhs-paper-1);
	color: rgba(14, 14, 16, 0.5);
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50vh;
}

@media (prefers-reduced-motion: reduce) {
	.hhs-c01-row { opacity: 1; transform: none; }
	.hhs-c01-card__drop { display: none; }
}

/* ============================================================================
 * SHARED CHAPTER PRIMITIVES (used by chapters 02–05)
 * ============================================================================ */

.hhs-chapter--cream {
	position: relative;
	background: var(--hhs-paper-1); /* opaque; body tone shows through inter-chapter margins only */
	color: var(--hhs-black);
	overflow: clip;
	z-index: 1;
}
.hhs-chapter--dark {
	position: relative;
	background: #0E0E10; /* opaque; body tone shows through inter-chapter margins only */
	color: #FFF8EB;
	overflow: clip;
	z-index: 1;
}

/* Cream-context chapter index in left margin: dark ink instead of cream */
.hhs-chapter__index--dark {
	color: rgba(14, 14, 16, 0.55);
}
.hhs-chapter__index--dark .hhs-chapter__index-rule { background: var(--hhs-red); }
.hhs-chapter__index--dark .hhs-chapter__index-label { color: var(--hhs-red); }

/* Cream-context eyebrow */
.hhs-eyebrow--cream { color: var(--hhs-red); }

/* Close the sub-pixel gap between chapters caused by overflow: clip on sections */
.hhs-chapter--02,
.hhs-chapter--03,
.hhs-chapter--04,
.hhs-chapter--05 { margin-top: -2px; }

/* ============================================================================
 * CHAPTER 02 — THE INSTRUMENTS (cream)
 * Two cards, measurement-bracket title draws on intersection, result-page peek tag.
 * ============================================================================ */
.hhs-chapter--02 { padding: clamp(1.5rem, 3vh, 2.5rem) 0 0; }
.hhs-c02-intro {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 clamp(3rem, 6vw, 6rem) clamp(4rem, 8vh, 6rem) clamp(5rem, 10vw, 8rem);
}
.hhs-c02-intro__h2 {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: clamp(0.85rem, 1.6vh, 1.25rem) 0 clamp(1.25rem, 2.4vh, 1.85rem);
}
.hhs-c02-intro__word {
	display: block;
	line-height: 1.05;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s var(--hhs-ease-out), transform 0.85s var(--hhs-ease-cinema);
}
.hhs-c02-intro.is-revealed .hhs-c02-intro__word:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0s; }
.hhs-c02-intro.is-revealed .hhs-c02-intro__word:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.10s; }
.hhs-c02-intro.is-revealed .hhs-c02-intro__word:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.22s; }
.hhs-c02-intro__word--serif {
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2.8rem, 4.5vw, 5rem);
	color: var(--hhs-red);
	letter-spacing: -0.01em;
}
.hhs-c02-intro__word--bold {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(4rem, 7.5vw, 8rem);
	color: var(--hhs-black);
	letter-spacing: -0.045em;
	line-height: 0.95;
	padding-bottom: 0.14em;
}
.hhs-c02-intro__word--fine {
	font-family: var(--hhs-font-sans);
	font-weight: 400;
	font-size: clamp(1rem, 1.4vw, 1.5rem);
	color: rgba(14, 14, 16, 0.45);
	letter-spacing: -0.01em;
	max-width: 56ch;
}
.hhs-c02-intro__word--gap {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(2.8rem, 4.5vw, 5rem);
	color: var(--hhs-red);
	letter-spacing: -0.03em;
	line-height: 1;
	margin-top: 0.4rem;
}
.hhs-c02-intro__gap-rule {
	display: block;
	width: clamp(2.5rem, 4vw, 4.5rem);
	height: 3px;
	background: var(--hhs-red);
	flex-shrink: 0;
}
.hhs-c02-intro__body {
	font-size: clamp(1.05rem, 1.2vw, 1.2rem);
	line-height: 1.65;
	color: rgba(14, 14, 16, 0.78);
	max-width: 60ch;
}

.hhs-c02-cards {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 2vw, 2rem); /* tighter — plates align with the dial halves above */
}
@media (max-width: 1023px) { .hhs-c02-cards { grid-template-columns: 1fr; padding: 0 clamp(1.5rem, 4vw, 3rem); } }
@media (max-width: 640px) {
	.hhs-c02-cards {
		gap: 0.5rem;
		padding: 0 var(--hhs-pad-page);
	}
	.hhs-c02-card {
		padding: 1.25rem 1.25rem 1.5rem;
		gap: 0.65rem;
	}
}

.hhs-c02-card {
	position: relative;
	background: #FFFFFF;
	border: 1px solid rgba(14, 14, 16, 0.08);
	border-radius: 18px;
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem) clamp(2.25rem, 4vw, 3rem);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 24px 48px -28px rgba(14, 14, 16, 0.16);
	display: flex;
	flex-direction: column;
	gap: clamp(0.85rem, 1.6vh, 1.25rem);
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s var(--hhs-ease-out), transform 0.85s var(--hhs-ease-cinema);
}
.hhs-c02-card.is-revealed { opacity: 1; transform: translateY(0); }
.hhs-c02-card--demand.is-revealed { transition-delay: 0.05s; }
.hhs-c02-card--brand.is-revealed { transition-delay: 0.18s; }
.hhs-c02-card--demand { background: linear-gradient(145deg, #fff 52%, rgba(255, 72, 74, 0.03) 100%); }
.hhs-c02-card--brand  { background: linear-gradient(145deg, #fff 52%, rgba(39, 96, 146, 0.04) 100%); }

.hhs-c02-card__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--hhs-font-sans);
	font-weight: 500;
	font-size: var(--hhs-meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hhs-red);
}
.hhs-c02-card__tag-dot { width: 6px; height: 6px; background: var(--hhs-red); border-radius: 50%; }
.hhs-c02-card--brand .hhs-c02-card__tag { color: var(--hhs-navy); }
.hhs-c02-card--brand .hhs-c02-card__tag-dot { background: var(--hhs-navy); }

.hhs-c02-card__title {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(1.7rem, 2.4vw, 2.4rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--hhs-black);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.12em;
}
/* Two-line rail title — echoes the hero H1 "Mind the / _____ Gap." */
.hhs-c02-card__title-line2 {
	display: flex;
	align-items: center;
	gap: 0.45em;
}
.hhs-c02-card__title-rail {
	display: block;
	flex-shrink: 0;
	width: clamp(1.6rem, 2vw, 2.8rem);
	height: 3px;
	background: var(--hhs-red);
	border-radius: 1px;
}
.hhs-c02-card--brand .hhs-c02-card__title-rail { background: var(--hhs-navy); }

.hhs-c02-card__body {
	font-size: clamp(0.95rem, 1.05vw, 1.05rem);
	line-height: 1.65;
	color: rgba(14, 14, 16, 0.78);
}
.hhs-c02-card__trust {
	font-family: var(--hhs-font-serif);
	font-style: italic;
	color: var(--hhs-navy);
	font-size: 1rem;
}
.hhs-c02-card .hhs-btn--primary { align-self: flex-start; margin-top: auto; padding-top: 1.25rem; }

.hhs-c02-card__peek {
	margin-top: clamp(1.25rem, 2vh, 1.75rem);
	padding-top: clamp(1.25rem, 2vh, 1.75rem);
	border-top: 1px dashed rgba(14, 14, 16, 0.18);
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.5);
}
.hhs-c02-card__peek code {
	font-family: var(--hhs-font-mono);
	color: rgba(14, 14, 16, 0.7);
	background: rgba(14, 14, 16, 0.04);
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	letter-spacing: 0;
	font-size: 0.7rem;
	text-transform: none;
}
.hhs-c02-peek-slug { color: var(--hhs-red); }
.hhs-c02-card--brand .hhs-c02-peek-slug { color: var(--hhs-navy); }

/* Gap visualization (demand card) */
.hhs-c02-gap {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 0.85rem 0 0.25rem;
	border-top: 1px dashed rgba(14, 14, 16, 0.12);
}
.hhs-c02-gap__row { display: flex; align-items: center; gap: 0.55rem; }
.hhs-c02-gap__row-label {
	font-family: var(--hhs-font-mono);
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.38);
	flex: 0 0 4rem;
	white-space: nowrap;
}
.hhs-c02-gap__track {
	position: relative;
	flex: 1;
	height: 5px;
	background: rgba(255, 72, 74, 0.06);
	border-radius: 3px;
	overflow: hidden;
}
.hhs-c02-gap__fill {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 100%;
	border-radius: 3px;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.9s var(--hhs-ease-cinema);
}
.hhs-c02-gap__fill--ceiling { background: rgba(255, 72, 74, 0.22); }
.hhs-c02-gap__fill--booked  { background: rgba(14, 14, 16, 0.28); }
.hhs-c02-gap__zone {
	position: absolute;
	right: 0; top: 0; bottom: 0;
	width: 38%;
	background: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255, 72, 74, 0.14) 2px, rgba(255, 72, 74, 0.14) 4px);
	opacity: 0;
	transition: opacity 0.5s linear;
}
.hhs-c02-gap__dollar {
	font-family: var(--hhs-font-mono);
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--hhs-red);
	flex: 0 0 auto;
	letter-spacing: -0.01em;
}
.hhs-c02-card.is-revealed .hhs-c02-gap__fill--ceiling { transform: scaleX(1);    transition-delay: 0.70s; }
.hhs-c02-card.is-revealed .hhs-c02-gap__fill--booked  { transform: scaleX(0.62); transition-delay: 0.88s; }
.hhs-c02-card.is-revealed .hhs-c02-gap__zone          { opacity: 1;              transition-delay: 1.30s; }

/* Score arc (brand card) */
.hhs-c02-arc {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 0 0.25rem;
	border-top: 1px dashed rgba(14, 14, 16, 0.12);
}
.hhs-c02-arc__svg { width: 100%; max-width: 130px; overflow: visible; }
.hhs-c02-arc__track {
	fill: none;
	stroke: rgba(39, 96, 146, 0.14);
	stroke-width: 5;
	stroke-dasharray: 179 60;
	stroke-linecap: round;
}
.hhs-c02-arc__fill {
	fill: none;
	stroke: var(--hhs-cyan);
	stroke-width: 5;
	stroke-dasharray: 0 239;
	stroke-linecap: round;
	transition: stroke-dasharray 1.4s var(--hhs-ease-cinema) 0.65s;
}
.hhs-c02-card.is-revealed .hhs-c02-arc__fill { stroke-dasharray: 116 123; }
.hhs-c02-arc__label-text {
	font-family: var(--hhs-font-mono);
	font-size: 8px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	fill: rgba(14, 14, 16, 0.38);
}
.hhs-c02-arc__question {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: 22px;
	letter-spacing: -0.04em;
	fill: var(--hhs-navy);
	opacity: 0;
	transition: opacity 0.4s linear 1.8s;
}
.hhs-c02-card.is-revealed .hhs-c02-arc__question { opacity: 1; }
.hhs-c02-arc__bands {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.15rem 0.5rem;
	width: 100%;
	max-width: 160px;
	font-family: var(--hhs-font-mono);
	font-size: 0.52rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-align: center;
}
.hhs-c02-arc__bands span:nth-child(1) { color: rgba(39, 96, 146, 0.4); }
.hhs-c02-arc__bands span:nth-child(2) { color: rgba(39, 96, 146, 0.55); }
.hhs-c02-arc__bands span:nth-child(3) { color: rgba(39, 96, 146, 0.75); }
.hhs-c02-arc__bands span:nth-child(4) { color: var(--hhs-navy); }

/* Demand card — dark tool preview island on cream */
.hhs-c02-card--demand {
	background: var(--hhs-black) !important;
	border-color: rgba(255, 255, 255, 0.07) !important;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 32px 64px -24px rgba(0, 0, 0, 0.45) !important;
}
.hhs-c02-card--demand .hhs-c02-card__tag { color: var(--hhs-red); }
.hhs-c02-card--demand .hhs-c02-card__title { color: #fff; }
.hhs-c02-card--demand .hhs-c02-card__title-rail { background: var(--hhs-red); }
.hhs-c02-card--demand .hhs-c02-card__body { color: rgba(255, 255, 255, 0.55); }
.hhs-c02-card--demand .hhs-c02-card__trust { color: rgba(255, 255, 255, 0.35); }
.hhs-c02-card--demand .hhs-btn--primary {
	align-self: flex-start;
	margin-top: auto;
}

/* Hero $? metric */
.hhs-c02-gap__hero {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.6rem 0 0.75rem;
}
.hhs-c02-gap__hero-value {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(3.8rem, 6.5vw, 6rem);
	letter-spacing: -0.06em;
	line-height: 1;
	color: var(--hhs-red);
}
.hhs-c02-gap__hero-label {
	font-family: var(--hhs-font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.3);
	line-height: 1.5;
	padding-bottom: 0.2em;
}
.hhs-c02-gap__context {
	font-family: var(--hhs-font-mono);
	font-size: 0.52rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.22);
	margin-bottom: 0.1rem;
}

/* Dark card gap viz color overrides */
.hhs-c02-card--demand .hhs-c02-gap { border-top-color: rgba(255, 255, 255, 0.09); }
.hhs-c02-card--demand .hhs-c02-gap__row-label { color: rgba(255, 255, 255, 0.32); }
.hhs-c02-card--demand .hhs-c02-gap__track { background: rgba(255, 255, 255, 0.07); }
.hhs-c02-card--demand .hhs-c02-gap__fill--ceiling { background: rgba(255, 255, 255, 0.2); }
.hhs-c02-card--demand .hhs-c02-gap__fill--booked  { background: rgba(255, 72, 74, 0.7); }
.hhs-c02-card--demand .hhs-c02-gap__zone {
	background: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255, 72, 74, 0.22) 2px, rgba(255, 72, 74, 0.22) 4px);
}
.hhs-c02-card--demand .hhs-c02-gap__dollar {
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.65rem;
}

/* Horizons tease pills */
.hhs-c02-gap__horizons {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	padding-top: 0.6rem;
}
.hhs-c02-gap__horizon {
	font-family: var(--hhs-font-mono);
	font-size: 0.48rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 72, 74, 0.6);
	border: 1px solid rgba(255, 72, 74, 0.18);
	padding: 0.2rem 0.45rem;
	border-radius: 3px;
}

/* Brand card — multiple contrast display */
.hhs-c02-mult {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.85rem 0 0.6rem;
	border-top: 1px dashed rgba(14, 14, 16, 0.12);
}
.hhs-c02-mult__from {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(2rem, 3.5vw, 3.5rem);
	letter-spacing: -0.04em;
	line-height: 1;
	color: rgba(14, 14, 16, 0.2);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	text-decoration-color: rgba(255, 72, 74, 0.35);
}
.hhs-c02-mult__arrow {
	font-family: var(--hhs-font-mono);
	font-size: 1rem;
	color: rgba(14, 14, 16, 0.22);
	align-self: center;
}
.hhs-c02-mult__to {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(2.8rem, 5vw, 5rem);
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--hhs-navy);
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.9s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s;
}
.hhs-c02-card.is-revealed .hhs-c02-mult__to { opacity: 1; transform: translateX(0); }
.hhs-c02-mult__unit {
	font-family: var(--hhs-font-mono);
	font-size: 0.52rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(39, 96, 146, 0.5);
	line-height: 1.55;
	align-self: flex-end;
	padding-bottom: 0.25em;
}

/* ============================================================================
 * Chapter 02 — Single instrument console
 * The intro, the dial, and the two instrument plates are one unified panel.
 * Top: editorial intro flush left. Center: SVG dial at full console width,
 * its DEMAND SIDE / BRAND SIDE labels aligned to the column centers below.
 * Bottom: two instrument plates meeting at a vertical FH Red hairline.
 * A faint vertical thread runs from the dial's needle pivot down through the
 * plate divider so the eye reads dial → plates → CTA as one architecture.
 * ============================================================================ */
.hhs-c02-console {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(2rem, 4vh, 4rem) clamp(1.5rem, 4vw, 4rem) clamp(3rem, 5vh, 5rem);
}
.hhs-c02-console::before {
	/* Vertical thread connecting dial pivot to plate divider */
	content: '';
	position: absolute;
	left: 50%;
	top: clamp(2rem, 4vh, 4rem);
	bottom: clamp(3rem, 5vh, 5rem);
	width: 1px;
	background: linear-gradient(180deg, transparent 0%, rgba(14, 14, 16, 0.04) 12%, rgba(14, 14, 16, 0.12) 50%, rgba(14, 14, 16, 0.04) 88%, transparent 100%);
	transform: translateX(-0.5px);
	pointer-events: none;
	z-index: 0;
}
.hhs-c02-console__head {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: end;
	max-width: 1100px;
	margin: 0 auto clamp(0.5rem, 1vh, 1rem);
	padding: 0 clamp(0rem, 1vw, 1rem);
}
.hhs-c02-console__head .hhs-eyebrow {
	grid-column: 1 / 2;
	margin-bottom: 0.65rem;
}
.hhs-c02-console__h2 {
	grid-column: 1 / 2;
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2.6rem, 4.4vw, 4.8rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: var(--hhs-black);
	margin: 0;
}
.hhs-c02-console__body {
	grid-column: 2 / 3;
	font-size: clamp(0.95rem, 1.1vw, 1.1rem);
	line-height: 1.55;
	color: rgba(14, 14, 16, 0.7);
	max-width: 38ch;
	justify-self: end;
}
@media (max-width: 1023px) {
	.hhs-c02-console__head { grid-template-columns: 1fr; }
	.hhs-c02-console__head .hhs-eyebrow,
	.hhs-c02-console__h2,
	.hhs-c02-console__body { grid-column: 1 / -1; justify-self: start; max-width: 60ch; }
}
.hhs-c02-dial {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	margin: clamp(0.5rem, 1.5vh, 1.5rem) auto clamp(1rem, 2vh, 2rem);
	padding: 0;
	--c02-dial-p: 0; /* 0–1 driven by chapter-motion.js */
}
.hhs-c02-dial__frame {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	aspect-ratio: 600 / 340;
}
.hhs-c02-dial__svg {
	width: 100%;
	height: 100%;
	display: block;
}
.hhs-c02-dial__arc {
	stroke-dasharray: 700;
	stroke-dashoffset: calc(700 - var(--c02-dial-p) * 700);
	transition: stroke-dashoffset 0.2s linear;
}
.hhs-c02-dial__needle-group {
	/* CSS transform replaces the SVG attribute `transform="translate(300 290)"`
	 * — so we must include translate() in CSS too. With transform-box: view-box,
	 * the transform-origin (300, 290) anchors to viewBox coordinates and the
	 * composite pivots cleanly around the needle base. fill-box was the prior
	 * bug — it computed origin against the needle's own narrow bbox, throwing
	 * the pivot off-center. */
	transform-box: view-box;
	transform-origin: 300px 290px;
	transform: translate(300px, 290px) rotate(calc(-90deg + var(--c02-dial-p) * 180deg));
	transition: transform 0.18s linear;
}
.hhs-c02-dial__caption {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	justify-content: center;
	margin-top: clamp(0.5rem, 1vh, 1rem);
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.55);
}
.hhs-c02-dial__caption-rule {
	display: inline-block;
	height: 1px;
	flex: 1 1 0;
	max-width: 4rem;
	background: currentColor;
	opacity: 0.45;
}
@media (prefers-reduced-motion: reduce) {
	.hhs-c02-dial { --c02-dial-p: 0.5; }
	.hhs-c02-dial__arc, .hhs-c02-dial__needle-group { transition: none; }
}

/* Calibration readout strip on each instrument card — replaces the old peek slug */
.hhs-c02-card__readout {
	margin: 0.85rem 0 1.1rem;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(14, 14, 16, 0.08);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.35);
	display: grid;
	gap: 0.4rem;
	font-family: var(--hhs-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.hhs-c02-card--demand .hhs-c02-card__readout {
	background: rgba(255, 248, 235, 0.06);
	border-color: rgba(255, 248, 235, 0.16);
}
.hhs-c02-card__readout > div {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 0.6rem;
	align-items: baseline;
}
.hhs-c02-card__readout dt {
	color: var(--hhs-red);
	font-weight: 500;
	margin: 0;
}
.hhs-c02-card--demand .hhs-c02-card__readout dt { color: var(--hhs-red); }
.hhs-c02-card--demand .hhs-c02-card__readout dd { color: rgba(255, 248, 235, 0.78); }
.hhs-c02-card__readout dd {
	margin: 0;
	color: rgba(14, 14, 16, 0.7);
	letter-spacing: 0.04em;
}

/* ============================================================================
 * CHAPTER 03 — FIND YOURSELF (dark, four letters)
 *
 * Section is 400vh. The letter stage pins for the scroll runway. As the reader
 * scrolls, four letters cycle through the same physical position: one at a
 * time, each with its body typed in character-by-character driven by scroll
 * progress within that letter's window. Click any letter to lock the ICP —
 * a red rubber stamp slams down, page re-themes via body[data-icp], persistent
 * right-edge label appears, other letters dim.
 *
 * --c03-p          chapter scroll progress (0–1, all four letters together)
 * --c03-active     current letter index (0–3)
 * --c03-letter-p   progress within the active letter's window (0–1)
 * --c03-chars      character count of the active letter body
 * ============================================================================
 *
 * Legacy voice-room CSS below is retained but unused. Cleanup in Pass 5.
 *
 * One alignment grid (1100px max-width). Floor line is the visual thread that
 * binds intro / quote / four figures / CTA into one composition.
 * ============================================================================ */
.hhs-chapter--03 {
	position: relative;
	padding: 0;
	overflow: visible;
	--c03-p: 0;
	--c03-active: 0;
	--c03-letter-p: 0;
	--c03-type-p: 0;    /* type-in progress, derived from --c03-letter-p with hold zone applied */
	--c03-chars: 250;
}

/* Stack wrapper sets the sticky pin runway. Sticky child pins for
 * (stack height - sticky height). Once the stack ends in flow, the sticky
 * stage scrolls naturally out of view and the review zone (in flow after
 * the stack) becomes the dominant element. No z-index gymnastics required. */
.hhs-c03-letters__stack {
	position: relative;
	height: 660vh; /* sticky pin runway = 660 - 100 = 560vh; ~140vh per letter */
	width: 100%;
}

/* Pinned stage */
.hhs-c03-letters {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	width: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: clamp(1rem, 2vh, 1.75rem);
	padding: clamp(7rem, 11vh, 8.5rem) clamp(1.5rem, 4vw, 4rem) clamp(2rem, 4vh, 3.5rem);
	box-sizing: border-box;
}

.hhs-c03-letters__head {
	max-width: 1100px;
	margin: 0 auto;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: clamp(1rem, 2vw, 2rem);
	align-items: end;
}
.hhs-c03-letters__head .hhs-eyebrow {
	grid-column: 1 / 2;
	color: var(--hhs-red);
	margin-bottom: 0.5rem;
}
.hhs-c03-letters__h2 {
	grid-column: 1 / 2;
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(1.6rem, 2.6vw, 2.4rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: #FFF8EB;
	margin: 0;
}
.hhs-c03-letters__h2-accent { color: var(--hhs-red); }
.hhs-c03-letters__body {
	grid-column: 1 / 2;
	font-size: clamp(0.85rem, 0.95vw, 1rem);
	line-height: 1.55;
	color: rgba(255, 248, 235, 0.62);
	max-width: 52ch;
	margin: 0.35rem 0 0;
}
.hhs-c03-letters__counter {
	grid-column: 2 / 3;
	font-family: var(--hhs-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.55);
	margin: 0;
	white-space: nowrap;
	align-self: end;
	padding-bottom: 0.15rem;
}
.hhs-c03-letters__counter [data-c03-counter-num] {
	color: var(--hhs-red);
	font-weight: 500;
	margin-right: 0.4rem;
}
.hhs-c03-letters__counter [data-c03-counter-tag] {
	color: rgba(255, 248, 235, 0.85);
	margin-left: 0.5rem;
}
@media (max-width: 760px) {
	.hhs-c03-letters__head { grid-template-columns: 1fr; }
	.hhs-c03-letters__counter { grid-column: 1 / -1; }
}

/* Deck holds all four letters; one is active, others are offstage */
.hhs-c03-letters__deck {
	position: relative;
	max-width: 980px;
	width: 100%;
	margin: 0 auto;
	min-height: 0;
	align-self: stretch;
}

.hhs-c03-letter {
	all: unset;
	cursor: pointer;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateX(60px) scale(0.97);
	transition: opacity 0.55s var(--hhs-ease-out), transform 0.7s var(--hhs-ease-cinema);
	pointer-events: none;
}
.hhs-c03-letter:focus-visible { outline: none; }
.hhs-c03-letter:focus-visible .hhs-c03-letter__paper {
	box-shadow: 0 0 0 2px var(--hhs-red), 0 30px 60px -20px rgba(0, 0, 0, 0.75), 0 16px 36px -16px rgba(0, 0, 0, 0.5);
}

/* Active letter is on-stage, behind letters are offset slightly to suggest a stack */
.hhs-c03-letter[data-letter-idx="0"] { transform: translateX(calc((0 - var(--c03-active, 0)) * 80px)) scale(calc(1 - 0.04 * (abs(0 - var(--c03-active, 0))))); }
.hhs-c03-letter.is-active {
	opacity: 1;
	transform: translateX(0) scale(1);
	pointer-events: auto;
	z-index: 2;
}
.hhs-c03-letter.is-past {
	opacity: 0;
	transform: translateX(-60px) scale(0.97);
	pointer-events: none;
	z-index: 1;
}
.hhs-c03-letter.is-future {
	opacity: 0;
	transform: translateX(60px) scale(0.97);
	pointer-events: none;
	z-index: 1;
}

/* The paper */
.hhs-c03-letter__paper {
	position: relative;
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
	background: linear-gradient(180deg, #FAF7F1 0%, #F3EDDE 100%);
	border-radius: 4px;
	padding: clamp(1.75rem, 3.5vw, 3rem) clamp(2rem, 4.5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
	box-shadow:
		0 30px 60px -20px rgba(0, 0, 0, 0.55),
		0 16px 36px -16px rgba(0, 0, 0, 0.4),
		0 1px 0 rgba(255, 255, 255, 0.5) inset;
	color: #0E0E10;
	transition: box-shadow 0.4s var(--hhs-ease-out);
	overflow: hidden;
}
/* Paper grain / aging texture */
.hhs-c03-letter__paper::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 90% 70% at 30% 20%, rgba(220, 200, 168, 0.18) 0%, transparent 70%),
		radial-gradient(ellipse 80% 60% at 90% 90%, rgba(200, 175, 140, 0.22) 0%, transparent 75%);
	pointer-events: none;
	mix-blend-mode: multiply;
}
.hhs-c03-letter__paper::after {
	/* Top-right corner perforation hint */
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 60px;
	background: linear-gradient(225deg, transparent 50%, rgba(14, 14, 16, 0.04) 50%, rgba(14, 14, 16, 0.08) 52%, transparent 53%);
	pointer-events: none;
}

.hhs-c03-letter__head {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5rem;
	padding-bottom: clamp(1rem, 2vh, 1.5rem);
	margin-bottom: clamp(1rem, 2vh, 1.5rem);
	border-bottom: 1px solid rgba(14, 14, 16, 0.12);
	flex-wrap: wrap;
}
.hhs-c03-letter__meta {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25rem 1.25rem;
	font-family: var(--hhs-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.hhs-c03-letter__meta > div {
	display: contents;
}
.hhs-c03-letter__meta dt {
	color: rgba(14, 14, 16, 0.45);
	font-weight: 500;
}
.hhs-c03-letter__meta dd {
	color: rgba(14, 14, 16, 0.85);
	margin: 0;
	letter-spacing: 0.08em;
}
.hhs-c03-letter__meta > div:nth-child(3) dt,
.hhs-c03-letter__meta > div:nth-child(3) dd {
	color: var(--hhs-red);
}
.hhs-c03-letter__icp {
	font-family: var(--hhs-font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.45);
	border: 1px solid rgba(14, 14, 16, 0.18);
	padding: 0.4rem 0.7rem;
	border-radius: 2px;
	white-space: nowrap;
	align-self: flex-start;
}

.hhs-c03-letter__body {
	position: relative;
	z-index: 1;
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.15rem, 1.6vw, 1.6rem);
	line-height: 1.45;
	color: rgba(14, 14, 16, 0.92);
	margin: 0;
	letter-spacing: -0.005em;
	min-height: clamp(7rem, 14vh, 10rem);
}
/* Each character is wrapped in a span by JS at mount; opacity fades based on
 * (letter-p * char-count) vs char-i. Word boundaries get a non-breaking space
 * span so words don't break mid-character. */
.hhs-c03-letter__body .hhs-c03-letter__char {
	opacity: 0;
	transition: opacity 0.15s linear;
}
.hhs-c03-letter.is-active .hhs-c03-letter__body .hhs-c03-letter__char {
	/* Use --c03-type-p (caps localP * 2.5, clamped 0–1) so chars all reveal in
	 * the first 40% of each letter's window. The remaining 60% holds the full
	 * letter so the reader has time to dwell. */
	opacity: clamp(0, calc((var(--c03-type-p) * var(--c03-chars, 250) - var(--char-i, 0) + 3) * 6), 1);
}
.hhs-c03-letter:not(.is-active) .hhs-c03-letter__body .hhs-c03-letter__char {
	opacity: 1; /* offstage letters render statically (invisible behind active anyway) */
}

.hhs-c03-letter__signature {
	position: relative;
	z-index: 1;
	font-family: 'DM Serif Display', Georgia, serif;
	font-style: italic;
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
	color: var(--hhs-red);
	margin: clamp(1rem, 2vh, 1.5rem) 0 0;
	/* Signature appears once the type-in is done (around --c03-type-p > 0.85) */
	opacity: clamp(0, calc((var(--c03-type-p) - 0.85) * 8), 1);
	transform: translateX(calc((1 - clamp(0, calc((var(--c03-type-p) - 0.85) * 8), 1)) * -16px));
	transition: opacity 0.25s linear, transform 0.4s var(--hhs-ease-out);
	letter-spacing: -0.01em;
}

/* The rubber stamp — appears on click via .is-chosen */
.hhs-c03-letter__stamp {
	position: absolute;
	top: clamp(20%, 32%, 36%);
	right: clamp(8%, 12%, 14%);
	z-index: 3;
	padding: 0.9rem 1.25rem 0.7rem;
	border: 3px solid var(--hhs-red);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	transform: scale(1.6) rotate(-9deg);
	opacity: 0;
	transition: opacity 0.35s var(--hhs-ease-out), transform 0.55s var(--hhs-ease-cinema);
	pointer-events: none;
	background: rgba(255, 240, 235, 0.05);
	mix-blend-mode: multiply;
	box-shadow: 0 0 0 1px rgba(255, 72, 74, 0.35) inset;
}
.hhs-c03-letter__stamp::before {
	/* Roughed-up ink edge */
	content: '';
	position: absolute;
	inset: -2px;
	border: 1px dashed rgba(255, 72, 74, 0.55);
	border-radius: 4px;
	mix-blend-mode: multiply;
}
.hhs-c03-letter__stamp-mark {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(2rem, 3vw, 2.6rem);
	letter-spacing: -0.04em;
	color: var(--hhs-red);
	line-height: 1;
}
.hhs-c03-letter__stamp-tag {
	font-family: var(--hhs-font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hhs-red);
}
.hhs-c03-letter.is-chosen .hhs-c03-letter__stamp {
	opacity: 0.92;
	transform: scale(1) rotate(-7deg);
}
.hhs-c03-letter.is-chosen .hhs-c03-letter__paper {
	box-shadow: 0 0 0 2px var(--hhs-red), 0 40px 80px -28px rgba(255, 72, 74, 0.5), 0 16px 36px -16px rgba(0, 0, 0, 0.4);
}

/* Letters page indicator (dots) */
.hhs-c03-letters__dots {
	max-width: 1100px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	justify-content: center;
	gap: clamp(0.5rem, 1vw, 0.75rem);
	align-items: center;
}
.hhs-c03-letters__dot {
	all: unset;
	cursor: pointer;
	width: clamp(32px, 5vw, 60px);
	height: 2px;
	background: rgba(255, 248, 235, 0.18);
	position: relative;
	transition: background 0.3s linear;
}
.hhs-c03-letters__dot span {
	display: block;
	height: 100%;
	background: var(--hhs-red);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 0.4s var(--hhs-ease-out);
}
.hhs-c03-letters__dot[data-c03-dot-idx="0"][data-progress] span,
.hhs-c03-letters__dot.is-filled span { transform: scaleX(1); }
.hhs-c03-letters__dot.is-active span { transform: scaleX(var(--c03-type-p, 0)); }
.hhs-c03-letters__dot:focus-visible {
	outline: 2px solid var(--hhs-red);
	outline-offset: 4px;
}
.hhs-c03-letters__dot.is-chosen-active {
	background: rgba(255, 72, 74, 0.25);
}

/* Dots wrap holds the indicator + the scroll-prompt hint side by side */
.hhs-c03-letters__dots-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
}

/* Scroll hint — visible at the start of the chapter, fades out as the reader
 * scrolls past the first letter window. Mono uppercase with a downward chevron
 * pulse. Sophisticated affordance without "click here" energy. */
.hhs-c03-letters__scroll-hint {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	font-family: var(--hhs-font-mono);
	font-size: 0.65rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.55);
	/* Fade out once the reader engages with the chapter — after 5% of stack progress */
	opacity: clamp(0, calc(1 - (var(--c03-p, 0) - 0.02) * 30), 1);
	transition: opacity 0.3s linear;
	pointer-events: none;
}
.hhs-c03-letters__scroll-hint-arrow {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid var(--hhs-red);
	border-bottom: 1.5px solid var(--hhs-red);
	transform: rotate(45deg);
	animation: hhs-c03-hint-bounce 1.6s ease-in-out infinite;
}
@keyframes hhs-c03-hint-bounce {
	0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 1; }
	50% { transform: rotate(45deg) translate(2px, 2px); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
	.hhs-c03-letters__scroll-hint-arrow { animation: none; }
}

/* When body has an ICP locked, letters that aren't the chosen one dim */
body[data-icp] .hhs-c03-letter:not(.is-chosen) .hhs-c03-letter__paper {
	filter: saturate(0.6) brightness(0.96);
}

/* ----------------------------------------------------------------------------
 * Review zone — sits in flow AFTER the stack-wrapped sticky stage. Once the
 * stack ends in flow (chapter scroll passes stack height), the sticky stage
 * scrolls out of view naturally and the review zone arrives. Anchored to the
 * bottom of the chapter; no margin-top hacks needed.
 * ---------------------------------------------------------------------------- */
.hhs-c03-letters__review {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(4rem, 8vh, 7rem) clamp(1.5rem, 4vw, 4rem) clamp(5rem, 9vh, 8rem);
	color: #FFF8EB;
}
.hhs-c03-letters__review-head {
	max-width: 1100px;
	margin: 0 auto clamp(2rem, 4vh, 3rem);
	text-align: left;
}
.hhs-c03-letters__review-head .hhs-eyebrow {
	color: var(--hhs-red);
	margin-bottom: 0.65rem;
}
.hhs-c03-letters__review-h3 {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(1.4rem, 2.4vw, 2.2rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: #FFF8EB;
	margin: 0;
	max-width: 32ch;
}

.hhs-c03-letters__thumbs {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(0.85rem, 1.4vw, 1.25rem);
}
@media (max-width: 980px) {
	.hhs-c03-letters__thumbs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.hhs-c03-letters__thumbs { grid-template-columns: 1fr; }
}

.hhs-c03-thumb {
	all: unset;
	cursor: pointer;
	position: relative;
	background: linear-gradient(180deg, #FAF7F1 0%, #F3EDDE 100%);
	border-radius: 4px;
	padding: clamp(1.1rem, 1.6vw, 1.5rem) clamp(1.1rem, 1.6vw, 1.5rem) clamp(1rem, 1.4vw, 1.25rem);
	color: #0E0E10;
	box-shadow:
		0 14px 28px -12px rgba(0, 0, 0, 0.5),
		0 6px 14px -8px rgba(0, 0, 0, 0.35);
	transition: transform 0.35s var(--hhs-ease-cinema), box-shadow 0.35s var(--hhs-ease-out);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: clamp(0.6rem, 1vh, 0.85rem);
	min-height: clamp(11rem, 18vh, 14rem);
}
.hhs-c03-thumb::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 22px;
	height: 22px;
	background: linear-gradient(225deg, transparent 50%, rgba(14, 14, 16, 0.05) 50%, rgba(14, 14, 16, 0.08) 52%, transparent 53%);
	pointer-events: none;
}
.hhs-c03-thumb:hover, .hhs-c03-thumb:focus-visible {
	transform: translateY(-4px);
	box-shadow:
		0 22px 40px -14px rgba(0, 0, 0, 0.55),
		0 10px 18px -8px rgba(0, 0, 0, 0.4),
		0 0 0 1px var(--hhs-red);
	outline: none;
}
.hhs-c03-thumb__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--hhs-font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hhs-red);
	border-bottom: 1px solid rgba(14, 14, 16, 0.1);
	padding-bottom: 0.55rem;
}
.hhs-c03-thumb__re {
	color: var(--hhs-red);
	font-weight: 500;
	letter-spacing: 0.1em;
}
.hhs-c03-thumb__date {
	color: rgba(14, 14, 16, 0.45);
	font-weight: 400;
}
.hhs-c03-thumb__excerpt {
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(0.95rem, 1.05vw, 1.1rem);
	line-height: 1.4;
	color: rgba(14, 14, 16, 0.85);
	flex: 1 1 auto;
}
.hhs-c03-thumb__foot {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 0.5rem;
	margin-top: 0.25rem;
}
.hhs-c03-thumb__tag {
	font-family: var(--hhs-font-mono);
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.55);
	max-width: 70%;
	line-height: 1.3;
}
.hhs-c03-thumb__sign {
	font-family: 'DM Serif Display', Georgia, serif;
	font-style: italic;
	font-size: clamp(1.15rem, 1.6vw, 1.5rem);
	color: var(--hhs-red);
	line-height: 0.8;
	letter-spacing: -0.01em;
}

/* When the chosen ICP matches, mark the thumb as locked with FH Red ring */
body[data-icp="capacity-bound"] .hhs-c03-thumb[data-icp="capacity-bound"],
body[data-icp="spend-saturated"] .hhs-c03-thumb[data-icp="spend-saturated"],
body[data-icp="sale-prep"] .hhs-c03-thumb[data-icp="sale-prep"],
body[data-icp="portfolio-integrator"] .hhs-c03-thumb[data-icp="portfolio-integrator"] {
	box-shadow:
		0 14px 28px -12px rgba(0, 0, 0, 0.5),
		0 6px 14px -8px rgba(0, 0, 0, 0.35),
		0 0 0 2px var(--hhs-red);
}
body[data-icp] .hhs-c03-thumb:not([data-icp="capacity-bound"]):not([data-icp="spend-saturated"]):not([data-icp="sale-prep"]):not([data-icp="portfolio-integrator"]) {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.hhs-c03-letters__review { padding: clamp(2rem, 4vh, 4rem) clamp(1.5rem, 4vw, 4rem); }
}

/* Reduced motion fallback — show first letter fully, hide stamp */
@media (prefers-reduced-motion: reduce) {
	.hhs-chapter--03 { min-height: auto; padding: clamp(2rem, 4vh, 4rem) 0; }
	.hhs-c03-letters { position: relative; height: auto; padding: clamp(2rem, 4vh, 4rem) clamp(1.5rem, 4vw, 4rem); }
	.hhs-c03-letters__deck { display: flex; flex-direction: column; gap: 1.5rem; }
	.hhs-c03-letter { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; }
	.hhs-c03-letter__body .hhs-c03-letter__char { opacity: 1; }
	.hhs-c03-letter__signature { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
	.hhs-c03-letter__head { gap: 0.5rem; }
	.hhs-c03-letter__icp { font-size: 0.55rem; padding: 0.3rem 0.5rem; }
	.hhs-c03-letter__body { font-size: clamp(1rem, 3.5vw, 1.3rem); }
}

/* Phones: the four-letter cinematic runway is 660vh / ~4400px — far too long for
 * a touch device. Collapse to a static stack (same shape as the reduced-motion
 * fallback). Letters render in flow, fully visible, tappable to lock ICP. */
@media (max-width: 640px) {
	.hhs-chapter--03 { min-height: auto; padding: clamp(2rem, 5vh, 3.5rem) 0; }
	.hhs-c03-letters__stack { height: auto; }
	.hhs-c03-letters {
		position: relative;
		height: auto;
		padding: clamp(1.5rem, 4vw, 2.5rem) var(--hhs-pad-page);
		grid-template-rows: auto;
	}
	.hhs-c03-letters__deck { display: flex; flex-direction: column; gap: 1.25rem; }
	.hhs-c03-letter {
		position: relative;
		inset: auto;
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
	.hhs-c03-letter__body .hhs-c03-letter__char { opacity: 1; }
	.hhs-c03-letter__signature { opacity: 1; transform: none; }
	/* Hide cycle counter, scroll hint, and review band — they're cinematic affordances
	 * that don't make sense in a static stack. */
	.hhs-c03-letters__counter,
	.hhs-c03-letters__scroll-hint,
	.hhs-c03-letters__thumbs { display: none; }
}

/* ============================================================================
 * LEGACY voice-room CSS below (unused; cleanup in Pass 5).
 * Kept so any other references don't break. Safe to delete.
 * ============================================================================ */
.hhs-c03-room {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(2rem, 4vh, 4rem) clamp(1.5rem, 4vw, 4rem) clamp(4rem, 7vh, 7rem);
}
.hhs-c03-room__head {
	max-width: 1100px;
	margin: 0 auto clamp(2rem, 4vh, 4rem);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: end;
}
.hhs-c03-room__head .hhs-eyebrow {
	grid-column: 1 / 2;
	color: var(--hhs-red);
	margin-bottom: 0.65rem;
}
.hhs-c03-room__h2 {
	grid-column: 1 / 2;
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(2.4rem, 4.6vw, 5rem);
	line-height: 0.98;
	letter-spacing: -0.035em;
	color: #FFF8EB;
	margin: 0;
}
.hhs-c03-room__h2-accent { color: var(--hhs-red); }
.hhs-c03-room__body {
	grid-column: 2 / 3;
	font-size: clamp(0.95rem, 1.1vw, 1.1rem);
	line-height: 1.55;
	color: rgba(255, 248, 235, 0.7);
	max-width: 38ch;
	justify-self: end;
}
@media (max-width: 1023px) {
	.hhs-c03-room__head { grid-template-columns: 1fr; }
	.hhs-c03-room__head .hhs-eyebrow,
	.hhs-c03-room__h2,
	.hhs-c03-room__body { grid-column: 1 / -1; justify-self: start; max-width: 60ch; }
}

.hhs-c03-room__stage {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
}

.hhs-c03-room__quote {
	max-width: 720px;
	margin: 0 auto clamp(1.5rem, 3vh, 3rem);
	padding: 0 1rem;
	text-align: center;
	min-height: 7rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.75rem;
}
.hhs-c03-room__quote-mark {
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-size: 4rem;
	line-height: 0.4;
	color: var(--hhs-red);
	opacity: 0.55;
}
.hhs-c03-room__quote-text {
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.4rem, 2.2vw, 2rem);
	line-height: 1.3;
	color: rgba(255, 248, 235, 0.92);
	margin: 0;
	transition: opacity 0.45s var(--hhs-ease-out);
}
.hhs-c03-room__quote-meta {
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.45);
	margin: 0;
	transition: color 0.35s var(--hhs-ease-out);
}
.hhs-c03-room__quote.is-empty .hhs-c03-room__quote-text {
	color: rgba(255, 248, 235, 0.4);
}

.hhs-c03-room__floor {
	position: relative;
	width: 100%;
	height: 1px;
	margin: 0;
	pointer-events: none;
	z-index: 1;
}
.hhs-c03-room__floor-line {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 248, 235, 0.18) 12%, rgba(255, 248, 235, 0.32) 50%, rgba(255, 248, 235, 0.18) 88%, transparent 100%);
}

.hhs-c03-room__figures {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin-top: -200px; /* figures sit ON the floor; svg height 220 minus a little overlap */
	padding-top: 1rem;
	z-index: 2;
}
@media (max-width: 1023px) {
	.hhs-c03-room__figures { grid-template-columns: repeat(2, 1fr); margin-top: -190px; }
}
@media (max-width: 600px) {
	.hhs-c03-room__figures { grid-template-columns: 1fr; margin-top: -160px; }
}

.hhs-c03-figure {
	all: unset;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.75rem 1.25rem;
	position: relative;
	transition: transform 0.45s var(--hhs-ease-out), filter 0.45s var(--hhs-ease-out);
	border-radius: 4px;
}
.hhs-c03-figure:focus-visible {
	outline: 2px solid var(--hhs-red);
	outline-offset: 4px;
}
.hhs-c03-figure__svg {
	width: clamp(80px, 11vw, 130px);
	height: auto;
	display: block;
	color: rgba(255, 248, 235, 0.42);
	transition: color 0.45s var(--hhs-ease-out), transform 0.55s var(--hhs-ease-cinema);
	transform-origin: 50% 100%;
}
.hhs-c03-figure__svg circle,
.hhs-c03-figure__svg rect,
.hhs-c03-figure__svg path { fill: currentColor; }
.hhs-c03-figure__svg path[fill="none"] { fill: none; stroke: currentColor; }
.hhs-c03-figure__headset { stroke: currentColor; }
.hhs-c03-figure__briefcase-handle { stroke: currentColor; }

.hhs-c03-figure__tag {
	font-family: var(--hhs-font-sans);
	font-weight: 700;
	font-size: clamp(0.95rem, 1.1vw, 1.1rem);
	color: rgba(255, 248, 235, 0.78);
	margin: 0;
	letter-spacing: -0.005em;
	text-align: center;
	transition: color 0.35s var(--hhs-ease-out);
}
.hhs-c03-figure__meta {
	font-family: var(--hhs-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.4);
	margin: 0;
	text-align: center;
	transition: color 0.35s var(--hhs-ease-out);
}

/* Hover / focus state — figure brightens, lifts slightly */
.hhs-c03-figure:hover, .hhs-c03-figure:focus-visible {
	transform: translateY(-6px);
}
.hhs-c03-figure:hover .hhs-c03-figure__svg,
.hhs-c03-figure:focus-visible .hhs-c03-figure__svg {
	color: rgba(255, 248, 235, 0.82);
}
.hhs-c03-figure:hover .hhs-c03-figure__tag,
.hhs-c03-figure:focus-visible .hhs-c03-figure__tag {
	color: #FFF8EB;
}

/* ICP color tokens — applied when chosen */
.hhs-c03-figure[data-icp="capacity-bound"]      { --c03-icp: var(--hhs-red); }
.hhs-c03-figure[data-icp="spend-saturated"]     { --c03-icp: var(--hhs-red); }
.hhs-c03-figure[data-icp="sale-prep"]           { --c03-icp: var(--hhs-cyan); }
.hhs-c03-figure[data-icp="portfolio-integrator"]{ --c03-icp: var(--hhs-tan); }

/* Chosen state — figure scales up and gains red accent rule under feet */
.hhs-c03-figure.is-chosen {
	transform: translateY(-12px);
}
.hhs-c03-figure.is-chosen .hhs-c03-figure__svg { color: #FFF8EB; transform: scale(1.05); }
.hhs-c03-figure.is-chosen .hhs-c03-figure__tag { color: var(--c03-icp); }
.hhs-c03-figure.is-chosen::after {
	content: '';
	position: absolute;
	left: 22%;
	right: 22%;
	bottom: 1rem;
	height: 2px;
	background: var(--c03-icp);
	box-shadow: 0 0 16px var(--c03-icp);
}

/* When body has any ICP set, the unchosen figures dim */
body[data-icp] .hhs-c03-figure { filter: saturate(0.55) opacity(0.42); }
body[data-icp="capacity-bound"]       .hhs-c03-figure[data-icp="capacity-bound"],
body[data-icp="spend-saturated"]      .hhs-c03-figure[data-icp="spend-saturated"],
body[data-icp="sale-prep"]            .hhs-c03-figure[data-icp="sale-prep"],
body[data-icp="portfolio-integrator"] .hhs-c03-figure[data-icp="portfolio-integrator"] {
	filter: saturate(1) opacity(1);
}

.hhs-c03-room__cta-zone {
	max-width: 1100px;
	margin: clamp(2rem, 4vh, 4rem) auto 0;
	padding: 0 1rem;
	display: flex;
	justify-content: center;
	min-height: 3.5rem;
}
.hhs-c03-room__cta-zone .hhs-btn {
	transition: opacity 0.5s var(--hhs-ease-out), transform 0.5s var(--hhs-ease-out);
}
body[data-icp] .hhs-c03-room__cta-zone .hhs-btn { visibility: visible !important; }

/* ----------------------------------------------------------------------------
 * Voice room — four operator quotes at editorial scale
 * ---------------------------------------------------------------------------- */
.hhs-c03-voices {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 2vw, 1.75rem);
	position: relative;
}
@media (max-width: 760px) {
	.hhs-c03-voices { grid-template-columns: 1fr; }
}

.hhs-c03-voice {
	all: unset;
	cursor: pointer;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem);
	background: rgba(255, 248, 235, 0.025);
	border: 1px solid rgba(255, 248, 235, 0.08);
	border-radius: 6px;
	transition: background 0.4s var(--hhs-ease-out), border-color 0.4s var(--hhs-ease-out), transform 0.45s var(--hhs-ease-cinema);
	min-height: clamp(15rem, 22vh, 19rem);
}
.hhs-c03-voice:focus-visible {
	outline: 2px solid var(--hhs-red);
	outline-offset: 4px;
}
.hhs-c03-voice__mark {
	position: absolute;
	top: clamp(0.5rem, 1vh, 1rem);
	left: clamp(1.25rem, 2vw, 1.75rem);
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-size: clamp(3.5rem, 5vw, 5.5rem);
	line-height: 0.6;
	color: var(--hhs-red);
	opacity: 0.42;
	pointer-events: none;
	transition: opacity 0.4s var(--hhs-ease-out), color 0.4s var(--hhs-ease-out);
}
.hhs-c03-voice__quote {
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.45rem, 1.95vw, 2rem);
	line-height: 1.28;
	color: rgba(255, 248, 235, 0.7);
	margin: 0;
	max-width: 30ch;
	transition: color 0.4s var(--hhs-ease-out);
	flex: 1 1 auto;
}
.hhs-c03-voice__tag {
	font-family: var(--hhs-font-sans);
	font-weight: 700;
	font-size: clamp(0.95rem, 1.05vw, 1.1rem);
	letter-spacing: -0.005em;
	color: rgba(255, 248, 235, 0.55);
	margin: 0.5rem 0 0;
	transition: color 0.4s var(--hhs-ease-out);
}
.hhs-c03-voice__meta {
	font-family: var(--hhs-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.4);
	margin: 0;
	transition: color 0.4s var(--hhs-ease-out);
}
.hhs-c03-voice__rule {
	position: absolute;
	left: clamp(1.75rem, 3vw, 2.5rem);
	right: clamp(1.75rem, 3vw, 2.5rem);
	bottom: clamp(1.75rem, 3vw, 2.5rem);
	height: 1px;
	background: var(--c03-icp, var(--hhs-red));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.55s var(--hhs-ease-cinema);
}

/* ICP color tokens */
.hhs-c03-voice[data-icp="capacity-bound"]      { --c03-icp: var(--hhs-red); }
.hhs-c03-voice[data-icp="spend-saturated"]     { --c03-icp: var(--hhs-red); }
.hhs-c03-voice[data-icp="sale-prep"]           { --c03-icp: var(--hhs-cyan); }
.hhs-c03-voice[data-icp="portfolio-integrator"]{ --c03-icp: var(--hhs-tan); }

/* Hover/focus brightens but doesn't lock */
.hhs-c03-voice:hover, .hhs-c03-voice:focus-visible {
	background: rgba(255, 248, 235, 0.045);
	border-color: rgba(255, 248, 235, 0.18);
}
.hhs-c03-voice:hover .hhs-c03-voice__mark,
.hhs-c03-voice:focus-visible .hhs-c03-voice__mark { opacity: 0.78; }
.hhs-c03-voice:hover .hhs-c03-voice__quote,
.hhs-c03-voice:focus-visible .hhs-c03-voice__quote { color: rgba(255, 248, 235, 0.92); }
.hhs-c03-voice:hover .hhs-c03-voice__tag,
.hhs-c03-voice:focus-visible .hhs-c03-voice__tag { color: rgba(255, 248, 235, 0.85); }
.hhs-c03-voice:hover .hhs-c03-voice__rule,
.hhs-c03-voice:focus-visible .hhs-c03-voice__rule { transform: scaleX(0.4); }

/* Chosen — locked state */
.hhs-c03-voice.is-chosen {
	background: rgba(255, 248, 235, 0.05);
	border-color: var(--c03-icp);
	transform: translateY(-3px);
}
.hhs-c03-voice.is-chosen .hhs-c03-voice__mark { color: var(--c03-icp); opacity: 1; }
.hhs-c03-voice.is-chosen .hhs-c03-voice__quote { color: #FFF8EB; }
.hhs-c03-voice.is-chosen .hhs-c03-voice__tag { color: var(--c03-icp); }
.hhs-c03-voice.is-chosen .hhs-c03-voice__meta { color: rgba(255, 248, 235, 0.78); }
.hhs-c03-voice.is-chosen .hhs-c03-voice__rule { transform: scaleX(1); box-shadow: 0 0 14px var(--c03-icp); }

/* When body has a chosen ICP, the unchosen voices ghost out */
body[data-icp] .hhs-c03-voice:not(.is-chosen) {
	opacity: 0.32;
	filter: saturate(0.6);
}
body[data-icp] .hhs-c03-voice:not(.is-chosen) .hhs-c03-voice__quote,
body[data-icp] .hhs-c03-voice:not(.is-chosen) .hhs-c03-voice__tag,
body[data-icp] .hhs-c03-voice:not(.is-chosen) .hhs-c03-voice__meta { color: rgba(255, 248, 235, 0.32); }

.hhs-c03-intro__h2 {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(2rem, 4vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: #FFF8EB;
	margin: clamp(0.85rem, 1.6vh, 1.25rem) 0 clamp(1.25rem, 2.4vh, 1.85rem);
	max-width: 22ch;
	text-shadow: var(--hhs-text-shadow-cream-soft);
}
.hhs-c03-intro__accent { color: var(--hhs-red); }
.hhs-c03-intro__body {
	font-size: clamp(1.05rem, 1.2vw, 1.2rem);
	line-height: 1.65;
	color: rgba(255, 248, 235, 0.78);
	max-width: 60ch;
}

/* Legacy .hhs-c03-cards grid + .hhs-c03-card rule block deleted v1.12.0
 * (2026-05-20). It was orphan styling from the original letter-system design
 * that partially applied to the new ICP card grid and was conflicting with
 * the new --c03-accent system. Specifically the body[data-icp=X]
 * .hhs-c03-card[data-icp=X] rule was overriding chosen-card border-color +
 * box-shadow with the legacy --icp-color (which had Spend-Saturated set to
 * red). New rules live in the v1.12.0 polish block near end of file. */

/* ============================================================================
 * CHAPTER 04 — THE OUTCOME (cream) — Decade stress simulation
 *
 * Single console at 1100px max-width with shared time axis (2015–2030) running
 * across the top of two side-by-side simulation panels (Path A vs Path B).
 * Scroll progress through the chapter drives --c04-p (0–1). Path A bars
 * develop hairline cracks at p > 0.50 (the 2027 mark), visible deformation
 * by p > 0.80. Path B bars hold geometric integrity throughout.
 *
 * The time axis is the visual thread that binds head, both panels, and outcome
 * labels into one decade-long composition. Cursor sweeps left to right with
 * scroll. Fracture marker pins at the 2027 position.
 * ============================================================================ */
.hhs-chapter--04 { padding: clamp(1.5rem, 3vh, 2.5rem) 0 0; }

.hhs-c04-console {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(2rem, 4vh, 4rem) clamp(1.5rem, 4vw, 4rem) clamp(3rem, 6vh, 5rem);
	--c04-p: 0;
}
.hhs-c04-console__head {
	max-width: 1100px;
	margin: 0 auto clamp(2rem, 4vh, 3.5rem);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: end;
}
.hhs-c04-console__head .hhs-eyebrow {
	grid-column: 1 / 2;
	margin-bottom: 0.65rem;
}
.hhs-c04-console__h2 {
	grid-column: 1 / 2;
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(2.4rem, 4.6vw, 5rem);
	line-height: 0.98;
	letter-spacing: -0.035em;
	color: var(--hhs-black);
	margin: 0;
}
.hhs-c04-console__h2-accent { color: var(--hhs-red); }
.hhs-c04-console__body {
	grid-column: 2 / 3;
	font-size: clamp(0.95rem, 1.1vw, 1.1rem);
	line-height: 1.55;
	color: rgba(14, 14, 16, 0.7);
	max-width: 38ch;
	justify-self: end;
}
@media (max-width: 1023px) {
	.hhs-c04-console__head { grid-template-columns: 1fr; }
	.hhs-c04-console__head .hhs-eyebrow,
	.hhs-c04-console__h2,
	.hhs-c04-console__body { grid-column: 1 / -1; justify-self: start; max-width: 60ch; }
}

/* Time axis — visual thread spanning both panels */
.hhs-c04-axis {
	max-width: 1100px;
	margin: 0 auto clamp(1rem, 2vh, 1.5rem);
	position: relative;
}
.hhs-c04-axis__years {
	display: flex;
	justify-content: space-between;
	font-family: var(--hhs-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.4);
	padding-bottom: 0.65rem;
}
.hhs-c04-axis__years span {
	transition: color 0.4s var(--hhs-ease-out);
	flex: 0 0 auto;
}
.hhs-c04-axis__year--marked {
	color: var(--hhs-red) !important;
	font-weight: 500;
}
.hhs-c04-axis__line {
	position: relative;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(14, 14, 16, 0.22) 8%, rgba(14, 14, 16, 0.32) 50%, rgba(14, 14, 16, 0.22) 92%, transparent 100%);
}
.hhs-c04-axis__cursor {
	position: absolute;
	top: -4px;
	left: 0;
	width: 1px;
	height: 9px;
	background: var(--hhs-red);
	transform: translateX(calc(var(--c04-p) * 100%));
	transition: transform 0.18s linear;
	box-shadow: 0 0 8px rgba(255, 72, 74, 0.5);
}
.hhs-c04-axis__fracture {
	position: absolute;
	top: -6px;
	left: 80%; /* 2027 sits at the 5th of 6 markers, i.e. (4/5)*100 = 80% */
	width: 1px;
	height: 13px;
	background: var(--hhs-red);
	opacity: clamp(0, calc((var(--c04-p) - 0.45) * 4), 1);
	transition: opacity 0.3s linear;
}
.hhs-c04-axis__fracture::after {
	content: '2027 · FRACTURE';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
	font-family: var(--hhs-font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hhs-red);
	white-space: nowrap;
}

/* Two panels on shared time axis */
.hhs-c04-sim {
	max-width: 1100px;
	margin: 0 auto clamp(2rem, 4vh, 3rem);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 2vw, 2rem);
}
@media (max-width: 760px) {
	.hhs-c04-sim { grid-template-columns: 1fr; }
}

.hhs-c04-panel {
	display: flex;
	flex-direction: column;
	gap: clamp(0.85rem, 1.5vh, 1.25rem);
	padding: clamp(1.5rem, 3vw, 2rem);
	background: rgba(14, 14, 16, 0.025);
	border: 1px solid rgba(14, 14, 16, 0.08);
	border-radius: 6px;
	transition: border-color 0.5s var(--hhs-ease-out);
}
.hhs-c04-panel--a {
	border-color: rgba(14, 14, 16, calc(0.08 + var(--c04-p) * 0.18));
	background: rgba(255, 248, 235, calc(0.4 + var(--c04-p) * 0.0));
}
.hhs-c04-panel--b {
	border-color: rgba(95, 208, 223, calc(0.18 + var(--c04-p) * 0.32));
}
.hhs-c04-panel__head {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.hhs-c04-panel__label {
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.55);
	margin: 0;
}
.hhs-c04-panel--b .hhs-c04-panel__label { color: var(--hhs-cyan); }
.hhs-c04-panel__title {
	font-family: var(--hhs-font-sans);
	font-weight: 700;
	font-size: clamp(1.15rem, 1.5vw, 1.5rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--hhs-black);
	margin: 0;
}
.hhs-c04-panel--a .hhs-c04-panel__title { color: rgba(14, 14, 16, 0.7); }
.hhs-c04-panel__title em {
	display: block;
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 0.72em;
	color: rgba(14, 14, 16, 0.5);
	margin-top: 0.15em;
}

/* Plot region — SVG with stress bars */
.hhs-c04-panel__plot {
	position: relative;
	display: flex;
	gap: 0.65rem;
}
.hhs-c04-panel__svg {
	width: 100%;
	height: clamp(120px, 18vh, 180px);
	display: block;
	flex: 1 1 auto;
}
.hhs-c04-panel__legend {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	font-family: var(--hhs-font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.45);
	flex: 0 0 auto;
	min-width: 4.5rem;
}

/* Bars — base layer is faint backdrop. Load layer applies time-driven width clip
 * tied to a per-metric --c04-target that reflects the data narrative for 2030.
 *
 *   Bookings    Path A 0.55 (capacity stalls)   Path B 1.00 (compounds)
 *   Paid Spend  Path A 1.00 (consumes the bar)  Path B 0.45 (accelerator only)
 *   Multiple    Path A 0.30 (compressed to 0.4×) Path B 1.00 (held at 6.0×)
 */
.hhs-c04-bar__base {
	fill: rgba(14, 14, 16, 0.06);
}

/* Path A per-metric targets */
.hhs-c04-bar--a[data-metric="bookings"]   { --c04-target: 0.55; }
.hhs-c04-bar--a[data-metric="paid-spend"] { --c04-target: 1.00; }
.hhs-c04-bar--a[data-metric="multiple"]   { --c04-target: 0.30; }

/* Path B per-metric targets */
.hhs-c04-bar--b[data-metric="bookings"]   { --c04-target: 1.00; }
.hhs-c04-bar--b[data-metric="paid-spend"] { --c04-target: 0.45; }
.hhs-c04-bar--b[data-metric="multiple"]   { --c04-target: 1.00; }

.hhs-c04-bar--a .hhs-c04-bar__load {
	fill: var(--hhs-red);
	clip-path: inset(0 calc((1 - var(--c04-p) * var(--c04-target, 1)) * 100%) 0 0);
	opacity: calc(0.42 + var(--c04-p) * 0.45);
	transform-origin: left center;
	transition: clip-path 0.15s linear;
}
/* Paid Spend (Path A) — overload pulse: subtle stretch past 100% as it consumes everything */
.hhs-c04-bar--a[data-metric="paid-spend"] .hhs-c04-bar__load {
	transform: scaleY(calc(1 + clamp(0, calc((var(--c04-p) - 0.6) * 0.55), 0.18)));
	transform-origin: left center;
}
/* Multiple (Path A) — compresses vertically as the multiple value collapses */
.hhs-c04-bar--a[data-metric="multiple"] .hhs-c04-bar__load {
	transform: scaleY(calc(1 - var(--c04-p) * 0.55));
	transform-origin: left bottom;
}

.hhs-c04-bar--b .hhs-c04-bar__hold {
	fill: var(--hhs-cyan);
	clip-path: inset(0 calc((1 - var(--c04-p) * var(--c04-target, 1)) * 100%) 0 0);
	opacity: calc(0.32 + var(--c04-p) * 0.4);
	transition: clip-path 0.15s linear;
}
.hhs-c04-bar--b .hhs-c04-bar__compound {
	stroke: var(--hhs-cyan);
	stroke-width: 1.5;
	stroke-dasharray: 1000;
	stroke-dashoffset: calc(1000 - var(--c04-p) * var(--c04-target, 1) * 1000);
	opacity: calc(0.5 + var(--c04-p) * 0.5);
}

/* Trend line overlay — the trajectory itself.
 * Path A descends across the decade; Path B ascends. Both draw via
 * stroke-dashoffset keyed to --c04-p. Markers at start/end emphasize
 * baseline → outcome motion. */
.hhs-c04-trend {
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
	vector-effect: non-scaling-stroke;
	clip-path: inset(0 calc((1 - var(--c04-p, 0)) * 100%) 0 0);
	transition: clip-path 0.15s linear;
}
.hhs-c04-trend--a {
	stroke: var(--hhs-red);
	filter: drop-shadow(0 1px 6px rgba(255, 72, 74, 0.35));
}
.hhs-c04-trend--b {
	stroke: var(--hhs-cyan);
	filter: drop-shadow(0 1px 8px rgba(95, 208, 223, 0.5));
}
.hhs-c04-trend-marker circle {
	fill: rgba(14, 14, 16, 0.45);
}
.hhs-c04-trend-marker--a .hhs-c04-trend-marker__end {
	fill: var(--hhs-red);
	opacity: clamp(0, calc((var(--c04-p) - 0.85) * 6), 1);
	transition: opacity 0.4s linear;
}
.hhs-c04-trend-marker--b .hhs-c04-trend-marker__end {
	fill: var(--hhs-cyan);
	opacity: clamp(0, calc((var(--c04-p) - 0.85) * 6), 1);
	transition: opacity 0.4s linear;
}

/* Cracks — appear after the 2027 mark (--c04-p > 0.45), intensify after 0.65.
 * Clipped to the bar's filled load area so cracks appear in stress zones, not
 * in empty space. Narratively: cracks form where load is, not where capacity stalled. */
.hhs-c04-bar--a .hhs-c04-bar__cracks {
	opacity: clamp(0, calc((var(--c04-p) - 0.45) * 3.5), 1);
	clip-path: inset(0 calc((1 - var(--c04-p) * var(--c04-target, 1)) * 100%) 0 0);
	transition: opacity 0.4s linear;
}
.hhs-c04-bar--a .hhs-c04-bar__cracks line {
	stroke: rgba(14, 14, 16, 0.62);
	stroke-width: 0.8;
	stroke-linecap: round;
}

/* Outcome label below each panel */
.hhs-c04-panel__outcome {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin: 0.5rem 0 0;
	font-family: var(--hhs-font-sans);
	transition: opacity 0.5s var(--hhs-ease-out);
	opacity: clamp(0, calc((var(--c04-p) - 0.65) * 3), 1);
}
.hhs-c04-panel__outcome-label {
	font-family: var(--hhs-font-mono);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.45);
}
.hhs-c04-panel__outcome-value {
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-size: clamp(1.1rem, 1.4vw, 1.35rem);
	line-height: 1.25;
}
.hhs-c04-panel--a .hhs-c04-panel__outcome-value { color: rgba(14, 14, 16, 0.75); }
.hhs-c04-panel--b .hhs-c04-panel__outcome-value { color: var(--hhs-black); }

@media (prefers-reduced-motion: reduce) {
	.hhs-c04-console { --c04-p: 1; }
}

.hhs-c04-closing {
	max-width: 38ch;
	margin: clamp(2rem, 4vh, 3rem) auto clamp(4rem, 8vh, 6rem);
	padding: 0 var(--hhs-pad-page);
	text-align: center;
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-size: clamp(1.15rem, 1.4vw, 1.4rem);
	line-height: 1.4;
	color: rgba(14, 14, 16, 0.85);
}

/* ============================================================================
 * CHAPTER 05 — START (cinematic hippo flyover, closing CTA)
 *
 * Section is 200vh. The 100vh of scroll-runway drives --c05-p (0–1).
 * Two pinned layers stack via position: sticky:
 *   1. .hhs-c05-flyover__visual    sticky video element scrubbing through
 *                                  hippo.mp4 segment 51.4–64.0s
 *   2. .hhs-c05-flyover__stage     sticky type overlay (eyebrow, H2, body, CTA)
 *
 * Type reveals at scroll thresholds:
 *   eyebrow  fades in at p > 0.05
 *   "Run"    appears at p > 0.18
 *   "yours." appears at p > 0.30
 *   body     fades in at p > 0.48
 *   CTAs     fade and rise at p > 0.60
 *
 * Reader experiences: the hippo flies across the frame as they scroll, type
 * emerges from the trajectory, CTA appears in the wake. Single cinematic beat.
 *
 * ICP-routed CTA: chapter-motion.js reads body[data-icp] (set by Ch 03 voice
 * room) and rewrites both primary and secondary CTA labels + hrefs.
 * ============================================================================ */
.hhs-chapter--05 {
	position: relative;
	min-height: 200vh;
	padding: 0;
	overflow: visible;
	--c05-p: 0;
}

.hhs-c05-flyover__visual {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	z-index: 1;
	background: #0E0E10;
}
.hhs-c05-flyover__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	filter: brightness(0.85) saturate(1.1);
}
.hhs-c05-flyover__fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	opacity: 0;
	transition: opacity 0.4s linear;
	filter: brightness(0.85) saturate(1.1);
}
.hhs-c05-flyover.is-video-failed .hhs-c05-flyover__video { display: none; }
.hhs-c05-flyover.is-video-failed .hhs-c05-flyover__fallback { opacity: 1; }
.hhs-c05-flyover__scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 95% 75% at 50% 55%, transparent 0%, rgba(14, 14, 16, 0.32) 55%, rgba(14, 14, 16, 0.85) 100%),
		linear-gradient(180deg, rgba(14, 14, 16, 0.62) 0%, rgba(14, 14, 16, 0.18) 14%, rgba(14, 14, 16, 0.12) 58%, rgba(14, 14, 16, 0.72) 100%);
	pointer-events: none;
}

.hhs-c05-flyover__stage {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	margin-top: -100vh;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.hhs-c05-flyover__inner {
	max-width: 1100px;
	width: 100%;
	padding: 0 clamp(1.5rem, 4vw, 4rem);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.5rem, 1vh, 1rem);
	pointer-events: auto;
}

.hhs-c05-flyover__eyebrow {
	color: var(--hhs-cyan);
	margin-bottom: 0.4rem;
	opacity: clamp(0, calc((var(--c05-p) - 0.04) * 12), 1);
	transition: opacity 0.18s linear;
	text-shadow: 0 2px 14px rgba(8, 4, 2, 0.75);
}

.hhs-c05-flyover__h2 {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(3.6rem, 11vw, 12rem);
	line-height: 0.9;
	letter-spacing: -0.05em;
	color: #FFF8EB;
	margin: 0;
	display: inline-flex;
	gap: 0.22em;
	flex-wrap: wrap;
	justify-content: center;
	text-shadow:
		0 4px 24px rgba(8, 4, 2, 0.55),
		0 14px 56px rgba(8, 4, 2, 0.42),
		0 24px 96px rgba(8, 4, 2, 0.25);
}
.hhs-c05-flyover__word {
	display: inline-block;
	transition: opacity 0.18s linear, transform 0.4s var(--hhs-ease-cinema);
}
.hhs-c05-flyover__word[data-word="0"] {
	--w0-t: clamp(0, calc((var(--c05-p) - 0.18) * 6), 1);
	opacity: var(--w0-t);
	transform: translateY(calc((1 - var(--w0-t)) * 0.4em)) scale(calc(0.94 + var(--w0-t) * 0.06));
}
.hhs-c05-flyover__word[data-word="1"] {
	--w1-t: clamp(0, calc((var(--c05-p) - 0.30) * 6), 1);
	opacity: var(--w1-t);
	transform: translateY(calc((1 - var(--w1-t)) * 0.4em)) scale(calc(0.94 + var(--w1-t) * 0.06));
}

.hhs-c05-flyover__body {
	font-size: clamp(1.05rem, 1.25vw, 1.25rem);
	line-height: 1.55;
	color: rgba(255, 248, 235, 0.88);
	max-width: 48ch;
	margin: clamp(0.85rem, 1.6vh, 1.35rem) 0 clamp(1.5rem, 2.8vh, 2rem);
	text-shadow: 0 2px 14px rgba(8, 4, 2, 0.7);
	opacity: clamp(0, calc((var(--c05-p) - 0.46) * 5), 1);
	transform: translateY(calc((1 - clamp(0, calc((var(--c05-p) - 0.46) * 5), 1)) * 8px));
	transition: opacity 0.2s linear, transform 0.4s var(--hhs-ease-out);
}

.hhs-c05-flyover__cta-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.85rem, 1.6vh, 1.25rem);
	opacity: clamp(0, calc((var(--c05-p) - 0.6) * 5), 1);
	transform: translateY(calc((1 - clamp(0, calc((var(--c05-p) - 0.6) * 5), 1)) * 14px));
	transition: opacity 0.2s linear, transform 0.4s var(--hhs-ease-out);
}

.hhs-c05-flyover__signature {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(2vh, 4vh, 5vh);
	text-align: center;
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: var(--hhs-cyan);
	z-index: 3;
	opacity: clamp(0, calc((var(--c05-p) - 0.78) * 5), 1);
	transition: opacity 0.2s linear;
	text-shadow: 0 2px 14px rgba(8, 4, 2, 0.7);
	pointer-events: none;
}

.hhs-btn--xl {
	padding: 1.1rem 1.85rem;
	font-size: 1.05rem;
	box-shadow: 0 16px 32px -12px rgba(255, 72, 74, 0.55);
}
/* Ghost-button secondary on Ch05 — cream-paper fill reads cleanly against the
 * dark sunset background via value contrast. Same pattern as the hero secondary
 * for visual consistency across the page. */
.hhs-c05-flyover__secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--hhs-font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--hhs-black);
	text-decoration: none;
	background: rgba(255, 252, 245, 0.94);
	border: 1.5px solid rgba(14, 14, 16, 0.32);
	border-radius: 999px;
	padding: 0.8rem 1.4rem;
	box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.55);
	transform: translateY(0);
	transition: background 0.22s var(--hhs-ease-out),
		border-color 0.22s var(--hhs-ease-out),
		color 0.22s var(--hhs-ease-out),
		transform 0.22s var(--hhs-ease-out),
		box-shadow 0.22s var(--hhs-ease-out);
}
.hhs-c05-flyover__secondary:hover,
.hhs-c05-flyover__secondary:focus-visible {
	background: var(--hhs-black);
	border-color: #FFF8EB;
	color: #FFF8EB;
	transform: translateY(-1px);
	box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.65);
}
.hhs-c05-flyover__secondary [aria-hidden] {
	transition: transform 0.2s var(--hhs-ease-out);
}
.hhs-c05-flyover__secondary:hover [aria-hidden],
.hhs-c05-flyover__secondary:focus-visible [aria-hidden] {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.hhs-chapter--05 { --c05-p: 1; min-height: auto; padding: clamp(5rem, 9vh, 8rem) 0 clamp(7rem, 12vh, 10rem); }
	.hhs-c05-flyover__visual { position: relative; height: auto; min-height: 0; }
	.hhs-c05-flyover__video { display: none; }
	.hhs-c05-flyover__stage { position: relative; margin-top: 0; height: auto; }
	.hhs-c02-card, .hhs-c03-card { opacity: 1; transform: none; }
	.hhs-c02-bracket { transform: scaleX(1); }
	.hhs-c03-card__accent { transform: scaleX(1); }
}

@media (max-width: 760px) {
	.hhs-chapter--05 { min-height: 180vh; }
}

/* ============================================================================
 * ── BOOKING GAP LANDING ──────────────────────────────────────────────────────
 * Interior page template `templates/template-instrument.php`.
 * Locked copy source: Website/v1/02-booking-gap.md v1.3.
 *
 * Selectors prefixed `.hhs-bg-` to keep separation from homepage chapters.
 * `.hhs-page-header`, `.hhs-corner`, `.hhs-bg-row`, `.hhs-bg-tile`, and
 * `.hhs-bg-route` are written so future interior pages (Brand Multiple,
 * Independents, About, Portfolio Integrators) can reuse them by name.
 * ============================================================================ */

/* ---- Page Header reveal cascade -------------------------------------- */
.hhs-page-header [data-unfold] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.1s var(--hhs-ease-out), transform 1.1s var(--hhs-ease-out);
	will-change: opacity, transform;
}
.hhs-page-header [data-unfold-state="visible"] {
	opacity: 1;
	transform: translateY(0);
}
body[data-motion="reduced"] .hhs-page-header [data-unfold] {
	opacity: 1;
	transform: none;
	transition: none;
}
.hhs-datum__caret[data-caret-state="typing"] {
	animation: hhs-caret 1.05s steps(1) infinite;
}
.hhs-datum__caret[data-caret-state="done"] {
	opacity: 0;
	animation: none;
}

/* ---- Page Header layout & type --------------------------------------- */
.hhs-page-header {
	position: relative;
	background: var(--hhs-paper-1);
	padding: clamp(7rem, 14vh, 11rem) var(--hhs-pad-page) clamp(7rem, 13vh, 11rem);
	overflow: hidden;
}
@media (max-width: 640px) {
	.hhs-page-header {
		padding-top: clamp(4.5rem, 9vh, 6rem);
		padding-bottom: clamp(3rem, 6vh, 4rem);
	}
	/* Long intro body paragraphs eat the fold on mobile. H1 + H2 (italic pull
	 * quote) + CTA + trust line tell the same story in 1/4 the vertical space.
	 * Chapter 01 carries the detail below. */
	.hhs-bg-header__body,
	.hhs-bm-hero__body {
		display: none;
	}
	/* Pull preview / sample card up tighter on mobile — the gap between body
	 * column and preview defaulted to clamp(2rem, 4vw, 3.5rem). Halve it. */
	.hhs-bg-header__mid {
		gap: clamp(1rem, 2.5vh, 1.5rem);
	}
}

.hhs-corner {
	position: absolute;
	width: 14px;
	height: 14px;
	pointer-events: none;
	z-index: 2;
}
.hhs-corner::before,
.hhs-corner::after {
	content: "";
	position: absolute;
	background: rgba(14, 14, 16, 0.35);
}
.hhs-corner::before { width: 100%; height: 1px; }
.hhs-corner::after  { width: 1px;  height: 100%; }
.hhs-corner--tl { top: clamp(1.25rem, 2.5vh, 2rem); left:  clamp(1.25rem, 2.5vw, 2rem); }
.hhs-corner--tl::before { top: 0;    left: 0; }
.hhs-corner--tl::after  { top: 0;    left: 0; }
.hhs-corner--tr { top: clamp(1.25rem, 2.5vh, 2rem); right: clamp(1.25rem, 2.5vw, 2rem); }
.hhs-corner--tr::before { top: 0;    right: 0; }
.hhs-corner--tr::after  { top: 0;    right: 0; }
.hhs-corner--bl { bottom: clamp(1.25rem, 2.5vh, 2rem); left:  clamp(1.25rem, 2.5vw, 2rem); }
.hhs-corner--bl::before { bottom: 0; left: 0; }
.hhs-corner--bl::after  { bottom: 0; left: 0; }
.hhs-corner--br { bottom: clamp(1.25rem, 2.5vh, 2rem); right: clamp(1.25rem, 2.5vw, 2rem); }
.hhs-corner--br::before { bottom: 0; right: 0; }
.hhs-corner--br::after  { bottom: 0; right: 0; }

.hhs-page-header__inner {
	position: relative;
	max-width: 76rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: clamp(1.75rem, 3vh, 3rem);
}

.hhs-bg-header__datum {
	color: rgba(14, 14, 16, 0.72);
	margin-bottom: 0;
}
.hhs-bg-header__datum .hhs-datum__caret { background: var(--hhs-red); }

.hhs-bg-header__eyebrow { margin-bottom: 0; }

.hhs-bg-header__h1 {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(2.75rem, 6.4vw, 6rem);
	line-height: 0.92;
	letter-spacing: -0.025em;
	color: var(--hhs-black);
	text-transform: uppercase;
	margin: 0;
}

.hhs-bg-header__h2 {
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: var(--hhs-italic-editorial);
	max-width: 50ch;
	margin: 0;
}

.hhs-bg-header__body {
	font-size: var(--hhs-body-lg);
	line-height: 1.6;
	color: rgba(14, 14, 16, 0.78);
	max-width: 60ch;
	margin: 0;
}

.hhs-bg-header__cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: clamp(0.5rem, 1vh, 1rem);
}

.hhs-bg-header__trust {
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-size: 1rem;
	color: var(--hhs-italic-editorial);
	max-width: 60ch;
	margin: 0;
}

/* ---- Section 2 — The Math (Two-Up + 3 Chapter Rows) ------------------ */
.hhs-bg-c01 {
	position: relative;
	background: var(--hhs-paper-1);
	padding: var(--hhs-section-y) var(--hhs-pad-page);
	border-top: 1px solid rgba(14, 14, 16, 0.08);
}

.hhs-bg-c01__two-up {
	position: relative;
	max-width: 76rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: clamp(2.5rem, 6vw, 6rem);
}

.hhs-bg-c01__left {
	position: sticky;
	top: clamp(6rem, 12vh, 9rem);
	align-self: start;
	max-width: 38ch;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.hhs-bg-c01__h2 {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(1.85rem, 3.6vw, 3.5rem);
	line-height: 1.04;
	letter-spacing: -0.012em;
	color: var(--hhs-black);
	text-transform: uppercase;
}

.hhs-bg-c01__lead {
	font-size: var(--hhs-body);
	line-height: 1.7;
	color: rgba(14, 14, 16, 0.78);
}

.hhs-bg-c01__right {
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 5vh, 4rem);
}

.hhs-bg-row {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 56ch;
}
.hhs-bg-row__index {
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: var(--hhs-red);
}
.hhs-bg-row__title {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(1.45rem, 2vw, 1.85rem);
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--hhs-black);
}
.hhs-bg-row__body {
	font-size: var(--hhs-body);
	line-height: 1.75;
	color: rgba(14, 14, 16, 0.8);
}

@media (max-width: 1023px) {
	.hhs-bg-c01__two-up { grid-template-columns: 1fr; gap: clamp(2rem, 5vh, 3rem); }
	.hhs-bg-c01__left { position: static; max-width: none; }
}

/* ---- Section 3 — The Output ----------------------------------------- */
.hhs-bg-c02 {
	position: relative;
	background: var(--hhs-paper-0);
	padding: var(--hhs-section-y) var(--hhs-pad-page);
	border-top: 1px solid rgba(14, 14, 16, 0.08);
}
.hhs-bg-c02__head {
	max-width: 76rem;
	margin: 0 auto clamp(3.5rem, 7vh, 6rem);
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 2.5vh, 2.25rem);
	max-width: 60ch;
}
.hhs-bg-c02__h2 {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(1.85rem, 3.6vw, 3.5rem);
	line-height: 1.04;
	letter-spacing: -0.012em;
	color: var(--hhs-black);
	text-transform: uppercase;
}
@media (min-width: 768px) {
	.hhs-bg-c02__h2 .hhs-nowrap { white-space: nowrap; }
}
.hhs-bg-c02__body {
	font-size: var(--hhs-body);
	line-height: 1.6;
	color: rgba(14, 14, 16, 0.7);
	max-width: 48ch;
	margin: 0;
}
.hhs-bg-c02__tiles {
	max-width: 76rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2vw, 2rem);
}
.hhs-bg-tile {
	background: var(--hhs-paper-1);
	border: 1px solid rgba(14, 14, 16, 0.12);
	border-radius: 14px;
	padding: clamp(1.5rem, 2.2vw, 2.25rem);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	min-width: 0;
}
.hhs-bg-tile__title {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(1.35rem, 1.7vw, 1.65rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--hhs-black);
}
.hhs-bg-tile__body {
	font-size: var(--hhs-body);
	line-height: 1.7;
	color: rgba(14, 14, 16, 0.8);
	max-width: 38ch;
}
.hhs-bg-c02__closing-block {
	max-width: 60rem;
	margin: clamp(3rem, 6vh, 5rem) auto 0;
	padding-top: clamp(2rem, 4vh, 3rem);
	border-top: 1px solid rgba(14, 14, 16, 0.12);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.85rem, 1.6vh, 1.35rem);
	text-align: center;
}
.hhs-bg-c02__closing-stamp {
	text-align: center;
}
.hhs-bg-c02__closing {
	max-width: 42ch;
	margin: 0 auto;
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.55;
	color: var(--hhs-italic-editorial);
	text-align: center;
}
@media (max-width: 1023px) {
	.hhs-bg-c02__tiles { grid-template-columns: 1fr; }
	.hhs-bg-c02__closing-block { align-items: flex-start; text-align: left; }
	.hhs-bg-c02__closing-stamp { text-align: left; }
	.hhs-bg-c02__closing { text-align: left; margin-left: 0; margin-right: 0; max-width: 100%; }
}

/* ---- Section 4 — Run It (form frame) -------------------------------- */
.hhs-bg-c03 {
	position: relative;
	background: var(--hhs-paper-1);
	padding: var(--hhs-section-y) var(--hhs-pad-page);
	border-top: 1px solid rgba(14, 14, 16, 0.08);
	scroll-margin-top: clamp(4rem, 9vh, 7rem);
}
.hhs-bg-c03__head {
	max-width: 76rem;
	margin: 0 auto clamp(3rem, 6vh, 5rem);
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 2.5vh, 2.25rem);
}
.hhs-bg-c03__h2 {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(1.85rem, 3.6vw, 3.5rem);
	line-height: 1.04;
	letter-spacing: -0.012em;
	color: var(--hhs-black);
	text-transform: uppercase;
}
.hhs-bg-form {
	max-width: 76rem;
	margin: 0 auto;
	background: var(--hhs-paper-0);
	border: 1px solid rgba(14, 14, 16, 0.12);
	border-radius: 16px;
	padding: clamp(2rem, 4vw, 3.5rem);
	min-height: clamp(14rem, 28vh, 22rem);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: clamp(1.5rem, 3vh, 2.25rem);
}
.hhs-bg-form__interim {
	max-width: 56ch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}
.hhs-bg-form__interim-note {
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.6);
}
.hhs-bg-c03__walkthrough {
	max-width: 76rem;
	margin: clamp(1.5rem, 3vh, 2.25rem) auto 0;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.75rem);
	flex-wrap: wrap;
}
.hhs-bg-c03__walkthrough .hhs-mono-stamp {
	margin-right: 0.5rem;
}
.hhs-bg-c03__trust {
	max-width: 76rem;
	margin: clamp(1.5rem, 3vh, 2.25rem) auto 0;
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--hhs-italic-editorial);
}

/* ---- Section 5 — Closing CTA (dark) --------------------------------- */
.hhs-bg-c04 {
	position: relative;
	padding: var(--hhs-section-y) var(--hhs-pad-page);
}
.hhs-bg-c04--dark {
	background: var(--hhs-black);
	color: #fff;
}
.hhs-bg-c04__inner {
	max-width: 64rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(1.75rem, 3.5vh, 3rem);
}
.hhs-bg-c04__eyebrow { color: var(--hhs-cyan); margin: 0; }
.hhs-bg-c04__h2 {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(2.75rem, 6.4vw, 6rem);
	line-height: 0.94;
	letter-spacing: -0.025em;
	color: #fff;
	text-transform: uppercase;
}
.hhs-bg-c04__body {
	font-size: var(--hhs-body-lg);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
	max-width: 60ch;
	margin: 0;
}

/* ---- Section 6 — Routing Block (cream, single card) ----------------- */
.hhs-bg-c05 {
	position: relative;
	background: var(--hhs-paper-1);
	padding: clamp(4rem, 8vh, 6rem) var(--hhs-pad-page);
	border-top: 1px solid rgba(14, 14, 16, 0.08);
}
.hhs-bg-route {
	max-width: 68ch;
	margin: 0 auto;
	background: var(--hhs-paper-0);
	border: 1px solid rgba(14, 14, 16, 0.12);
	border-radius: 14px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.hhs-bg-route__eyebrow {
	font-family: var(--hhs-font-sans);
	font-weight: 500;
	font-size: var(--hhs-meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hhs-red);
	margin: 0;
}
.hhs-bg-route__body {
	font-size: var(--hhs-body);
	line-height: 1.7;
	color: rgba(14, 14, 16, 0.82);
	margin: 0;
}
.hhs-bg-route__cta {
	font-family: var(--hhs-font-sans);
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--hhs-italic-editorial);
	text-decoration: none;
	border-bottom: 1px solid var(--hhs-italic-editorial);
	padding-bottom: 0.15rem;
	align-self: flex-start;
	transition: color 0.25s var(--hhs-ease-out), border-color 0.25s var(--hhs-ease-out);
}
.hhs-bg-route__cta:hover {
	color: var(--hhs-red);
	border-color: var(--hhs-red);
}

/* ============================================================================
 * BOOKING GAP — v1.5 VISUAL UPGRADE
 *
 * Hero plan-preview, chapter nav spine, redacted-invoice graphic, pull-quote
 * band, three sample-operator plan panels (A/B/C), mock 4-step indicator,
 * post-submit timeline, mono stamps. Scoped to .hhs-bg-* and .hhs-mono-stamp.
 * Homepage and global tokens untouched.
 * ============================================================================ */

/* ---- Shared mono stamp ---------------------------------------------------- */
.hhs-mono-stamp {
	font-family: var(--hhs-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.62);
	margin: 0;
}
.hhs-mono-stamp--accent {
	color: var(--hhs-red);
}
.hhs-mono-stamp--footer {
	color: rgba(14, 14, 16, 0.5);
}
.hhs-bg-c04 .hhs-mono-stamp        { color: rgba(255, 255, 255, 0.55); }
.hhs-bg-c04 .hhs-mono-stamp--accent { color: var(--hhs-cyan); }

/* ---- Hero three-row layout + plan preview -------------------------------- *
 * Row 1: datum + eyebrow + H1 + subhead, full hero width.                    *
 * Row 2: body left, preview right, top-aligned at desktop.                   *
 * Row 3: CTA + trust line, left-aligned at full hero width.                  *
 * ------------------------------------------------------------------------- */
.hhs-bg-header__top {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 2.5vh, 2.5rem);
	min-width: 0;
}
.hhs-bg-header__top .hhs-bg-header__h2 { max-width: 42ch; }

.hhs-bg-header__mid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
@media (min-width: 1024px) {
	.hhs-bg-header__mid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}
.hhs-bg-header__mid > .hhs-bg-header__body {
	min-width: 0;
	max-width: 56ch;
}

.hhs-bg-header__bottom {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vh, 1.5rem);
	align-items: flex-start;
}

.hhs-bg-header__preview {
	min-width: 0;
	background: var(--hhs-paper-0);
	border: 1px solid rgba(14, 14, 16, 0.14);
	border-radius: 14px;
	padding: clamp(1.25rem, 2.2vw, 1.85rem);
	box-shadow: 0 18px 48px -32px rgba(14, 14, 16, 0.35);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.55s var(--hhs-ease-out) 0.2s, transform 0.55s var(--hhs-ease-out) 0.2s;
}
.hhs-bg-header__preview[data-unfolded] {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.hhs-bg-header__preview { opacity: 1; transform: none; transition: none; }
}
/* v1.13.11 — /booking-gap page is the FULL marketing page (hero + c01 tension
 * + c02 plan samples + form + c04 + c05). Visitors who navigate from main nav
 * land here for the full narrative.
 *
 * v1.13.15 — STANDALONE form page at /booking-gap/start uses the same
 * template-instrument.php but with body class `hhs-bg-form-only`. CSS rule
 * below hides ALL marketing sections (hero, c01, c02, c04, c05, walkthrough,
 * trust line) so the standalone page renders ONLY the form. CTAs route to
 * /booking-gap/start; nav links route to /booking-gap.
 */
body.hhs-bg-form-only article[data-instrument="booking-gap"] > *:not(.hhs-bg-c03) {
	display: none !important;
}
body.hhs-bg-form-only .hhs-bg-c03 > *:not(.hhs-bgf) {
	display: none !important;
}

/* v1.13.10 — homepage hero had TWO eyebrow elements rendering at the same
 * y-position (.hhs-hero__datum cream + .hhs-eyebrow red), stacking on top
 * of each other and reading as a "weird overlap." Jesse direction: keep
 * .hhs-eyebrow ("A FLYING HIPPO DIVISION..."), drop the datum. */
.hhs-hero .hhs-hero__datum {
	display: none !important;
}
.hhs-bg-header__preview-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}
.hhs-bg-header__preview-head .hhs-mono-stamp--accent {
	padding: 0.15rem 0.45rem;
	border: 1px solid var(--hhs-red);
	border-radius: 3px;
	color: var(--hhs-red);
}
.hhs-bg-header__preview-eyebrow {
	font-family: var(--hhs-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: var(--hhs-red);
	margin: 0.5rem 0 0;
}
.hhs-bg-header__preview-gap {
	margin: 0 0 0.5rem;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.hhs-bg-header__preview-gap-num {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(2.25rem, 3.8vw, 3.25rem);
	letter-spacing: -0.02em;
	color: var(--hhs-black);
	line-height: 1;
}
.hhs-bg-header__preview-gap-unit {
	font-family: var(--hhs-font-mono);
	font-size: 0.8125rem;
	color: rgba(14, 14, 16, 0.6);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ---- Shared channel table (hero preview + plan panels) ------------------- */
.hhs-bg-channel-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--hhs-font-mono);
	font-size: 0.8125rem;
	color: var(--hhs-black);
}
.hhs-bg-channel-table thead th {
	font-weight: 500;
	font-size: 0.6875rem;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.55);
	text-align: left;
	padding: 0.5rem 0.55rem;
	border-bottom: 1px solid rgba(14, 14, 16, 0.12);
}
.hhs-bg-channel-table tbody td {
	padding: 0.55rem;
	border-bottom: 1px dashed rgba(14, 14, 16, 0.08);
	vertical-align: middle;
}
.hhs-bg-channel-table tbody tr:last-child td { border-bottom: 0; }
.hhs-bg-channel-table td:first-child {
	font-family: var(--hhs-font-sans);
	font-weight: 500;
}
.hhs-bg-channel-table .is-up    { color: var(--hhs-red); font-weight: 500; }
.hhs-bg-channel-table .is-down  { color: var(--hhs-navy); font-weight: 500; }
.hhs-bg-channel-table .is-hold  { color: rgba(14, 14, 16, 0.55); font-weight: 500; letter-spacing: 0.08em; }

/* ---- Chapter nav spine ---------------------------------------------------
 * Sticky offset matches the floating .hhs-nav pill height so the chapter
 * nav parks directly underneath the main site nav as the page scrolls.
 * ----------------------------------------------------------------------- */
.hhs-bg-chapter-nav {
	position: sticky;
	top: clamp(3.5rem, 8vh, 4.5rem);
	z-index: calc(var(--hhs-z-nav) - 1);
	background: rgba(245, 242, 235, 0.92);
	border-top: 1px solid rgba(14, 14, 16, 0.1);
	border-bottom: 1px solid rgba(14, 14, 16, 0.1);
	padding: 0 var(--hhs-pad-page);
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
}
[data-chapter] {
	scroll-margin-top: clamp(7rem, 14vh, 9rem);
}
.hhs-bg-chapter-nav__list {
	max-width: 76rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}
.hhs-bg-chapter-nav__list li { min-width: 0; }
.hhs-bg-chapter-nav__link {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	padding: 0.85rem 0.75rem;
	font-family: var(--hhs-font-mono);
	font-weight: 500;
	color: rgba(14, 14, 16, 0.55);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.25s var(--hhs-ease-out), border-color 0.25s var(--hhs-ease-out);
	min-width: 0;
}
.hhs-bg-chapter-nav__link:hover { color: var(--hhs-black); }
.hhs-bg-chapter-nav__num {
	font-size: 0.875rem;
	color: var(--hhs-red);
}
.hhs-bg-chapter-nav__label {
	font-size: 0.6875rem;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
}
.hhs-bg-chapter-nav__link.is-active {
	color: var(--hhs-black);
	border-bottom-color: var(--hhs-red);
}
@media (max-width: 639px) {
	.hhs-bg-chapter-nav__link { padding: 0.65rem 0.4rem; gap: 0.35rem; }
	.hhs-bg-chapter-nav__num { font-size: 0.75rem; }
	.hhs-bg-chapter-nav__label { font-size: 0.625rem; }
}

/* ---- Section 2 head (eyebrow + H2, full width above the two-up) ---------- */
.hhs-bg-c01__head {
	max-width: 76rem;
	margin: 0 auto clamp(2.5rem, 5vh, 4rem);
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 2vh, 2rem);
	max-width: 60ch;
}
.hhs-bg-c01__head + .hhs-bg-invoice {
	margin-top: clamp(2.5rem, 5vh, 3.5rem);
}

/* Section 2 two-up: sticky left rail. The lead body parks while the three  *
 * chapter rows on the right scroll past. Closes the column-length mismatch *
 * without rewriting locked copy.                                           */
.hhs-bg-c01__left {
	position: sticky;
	top: clamp(7rem, 14vh, 11rem);
	align-self: start;
	max-width: 56ch;
}
@media (max-width: 1023px) {
	.hhs-bg-c01__left { position: static; }
}

/* ---- Redacted-invoice graphic -------------------------------------------- */
.hhs-bg-invoice {
	max-width: 76rem;
	margin: 0 auto clamp(2.5rem, 5vh, 4rem);
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: stretch;
}
@media (min-width: 1024px) {
	.hhs-bg-invoice {
		grid-template-columns: 1fr auto 1fr;
		gap: 1.25rem;
	}
}
.hhs-bg-invoice__panel {
	background: var(--hhs-paper-0);
	border: 1px solid rgba(14, 14, 16, 0.14);
	border-radius: 12px;
	padding: clamp(1.25rem, 2.2vw, 1.85rem);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	min-width: 0;
}
.hhs-bg-invoice__panel--without {
	background: repeating-linear-gradient(
		135deg,
		var(--hhs-paper-0) 0,
		var(--hhs-paper-0) 14px,
		rgba(14, 14, 16, 0.025) 14px,
		rgba(14, 14, 16, 0.025) 16px
	);
	border-color: rgba(14, 14, 16, 0.22);
	border-style: dashed;
}
.hhs-bg-invoice__panel--with {
	border-color: var(--hhs-red);
	box-shadow: 0 0 0 1px rgba(255, 72, 74, 0.08), 0 18px 48px -32px rgba(14, 14, 16, 0.35);
}
.hhs-bg-invoice__title {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(1.15rem, 1.4vw, 1.4rem);
	color: var(--hhs-black);
	letter-spacing: -0.01em;
	margin: 0.25rem 0;
}
.hhs-bg-invoice__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--hhs-font-mono);
	font-size: 0.8125rem;
}
.hhs-bg-invoice__table thead th {
	font-weight: 500;
	font-size: 0.6875rem;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.55);
	text-align: left;
	padding: 0.5rem 0.55rem;
	border-bottom: 1px solid rgba(14, 14, 16, 0.12);
}
.hhs-bg-invoice__table tbody td {
	padding: 0.55rem;
	border-bottom: 1px dashed rgba(14, 14, 16, 0.08);
	vertical-align: middle;
}
.hhs-bg-invoice__table tbody tr:last-child td { border-bottom: 0; }
.hhs-bg-invoice__table td:first-child {
	font-family: var(--hhs-font-sans);
	font-weight: 500;
}
.hhs-bg-invoice__unit {
	font-family: var(--hhs-font-mono);
	font-size: 0.6875rem;
	color: rgba(14, 14, 16, 0.55);
	margin-left: 0.35rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.hhs-bg-invoice__redacted {
	font-family: var(--hhs-font-mono);
	font-size: 0.75rem;
	color: rgba(14, 14, 16, 0.45);
	background: rgba(14, 14, 16, 0.08);
	padding: 0.2rem 0.45rem;
	border-radius: 3px;
	letter-spacing: 0.05em;
}
.hhs-bg-invoice__table .is-ok    { color: var(--hhs-navy); font-weight: 500; }
.hhs-bg-invoice__table .is-alert { color: var(--hhs-red); font-weight: 500; }
.hhs-bg-invoice__footer {
	font-family: var(--hhs-font-mono);
	font-size: 0.75rem;
	color: rgba(14, 14, 16, 0.62);
	margin: 0.5rem 0 0;
}
.hhs-bg-invoice__panel--with .hhs-bg-invoice__footer { color: var(--hhs-red); }
.hhs-bg-invoice__divider {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
}
.hhs-bg-invoice__divider-arrow {
	font-size: 1.5rem;
	color: var(--hhs-red);
	line-height: 1;
}
.hhs-bg-invoice__divider-label {
	font-family: var(--hhs-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: var(--hhs-red);
	text-align: center;
	line-height: 1.4;
}
@media (max-width: 1023px) {
	.hhs-bg-invoice__divider {
		flex-direction: row;
		gap: 1rem;
	}
	.hhs-bg-invoice__divider-arrow { transform: rotate(90deg); }
	.hhs-bg-invoice__divider-label br { display: none; }
}

/* ---- Pull-quote band ----------------------------------------------------- *
 * Left-aligned. FH Red vertical rule on the left. Size reduced so it reads  *
 * as a section break, not a competing headline against the H1.              */
.hhs-bg-pullquote {
	background: var(--hhs-paper-2);
	padding: clamp(3.5rem, 7vh, 6rem) var(--hhs-pad-page);
	border-top: 1px solid rgba(14, 14, 16, 0.08);
	border-bottom: 1px solid rgba(14, 14, 16, 0.08);
}
.hhs-bg-pullquote__text {
	max-width: 76rem;
	margin: 0 auto;
	padding-left: clamp(1.25rem, 2.5vw, 2rem);
	border-left: 4px solid var(--hhs-red);
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(1.5rem, 3vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--hhs-black);
	text-align: left;
}
.hhs-bg-pullquote__line {
	display: block;
}
.hhs-bg-pullquote__line--accent { color: var(--hhs-red); }
.hhs-bg-pullquote__caption {
	max-width: 76rem;
	margin: 1.5rem auto 0;
	padding-left: clamp(1.25rem, 2.5vw, 2rem);
	font-family: var(--hhs-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.55);
}

/* ---- Section 3 body line (new in v1.5) ---------------------------------- */
.hhs-bg-c02__body {
	font-size: var(--hhs-body);
	line-height: 1.7;
	color: rgba(14, 14, 16, 0.78);
	max-width: 60ch;
	margin: 0;
}

/* ---- Three sample-operator plan panels (A/B/C) -------------------------- */
.hhs-bg-panels {
	max-width: 90rem;
	margin: clamp(2.5rem, 5vh, 4rem) auto 0;
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 5vh, 4.5rem);
}
.hhs-bg-panels__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	flex-wrap: wrap;
	max-width: 76rem;
	margin: 0 auto;
	width: 100%;
}
.hhs-bg-plan-panel {
	background: var(--hhs-paper-0);
	border: 1px solid rgba(14, 14, 16, 0.14);
	border-radius: 14px;
	padding: clamp(2rem, 3vw, 3rem);
	display: flex;
	flex-direction: column;
	gap: clamp(1.75rem, 3vh, 2.5rem);
	max-width: 76rem;
	margin: 0 auto;
	width: 100%;
	min-width: 0;
}
.hhs-bg-plan-panel[data-variant="b"] { border-color: var(--hhs-red); }
.hhs-bg-plan-panel[data-variant="c"] { border-color: rgba(95, 208, 223, 0.8); }
.hhs-bg-plan-panel__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
}
@media (min-width: 768px) {
	.hhs-bg-plan-panel__head {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		align-items: end;
	}
	.hhs-bg-plan-panel__head .hhs-mono-stamp,
	.hhs-bg-plan-panel__head .hhs-bg-plan-panel__profile {
		grid-column: 1 / -1;
	}
	.hhs-bg-plan-panel__head .hhs-bg-plan-panel__stat-eyebrow,
	.hhs-bg-plan-panel__head .hhs-bg-plan-panel__stat {
		grid-column: 2;
		justify-self: end;
		text-align: right;
	}
}
.hhs-bg-plan-panel__profile {
	font-family: var(--hhs-font-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.7);
	margin: 0.25rem 0 0.5rem;
}
.hhs-bg-plan-panel__stat-eyebrow {
	font-family: var(--hhs-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.55);
	margin: 0;
}
.hhs-bg-plan-panel__stat {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	flex-wrap: wrap;
	margin: 0;
}
.hhs-bg-plan-panel__stat-num {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	letter-spacing: -0.025em;
	color: var(--hhs-black);
	line-height: 1;
}
.hhs-bg-plan-panel__stat-unit {
	font-family: var(--hhs-font-mono);
	font-size: 0.875rem;
	color: rgba(14, 14, 16, 0.6);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.hhs-bg-plan-panel__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}
@media (min-width: 768px) {
	.hhs-bg-plan-panel__body {
		grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.4fr);
	}
}
.hhs-bg-plan-panel__sidebar {
	background: var(--hhs-paper-1);
	border-radius: 10px;
	padding: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.hhs-bg-plan-panel__sidebar-label {
	font-family: var(--hhs-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: var(--hhs-red);
	margin: 0;
}
.hhs-bg-plan-panel__sidebar-list {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.hhs-bg-plan-panel__sidebar-list > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px dashed rgba(14, 14, 16, 0.1);
	min-width: 0;
}
.hhs-bg-plan-panel__sidebar-list > div:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.hhs-bg-plan-panel__sidebar-list dt {
	font-family: var(--hhs-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.55);
	margin: 0;
}
.hhs-bg-plan-panel__sidebar-list dd {
	font-family: var(--hhs-font-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--hhs-black);
	margin: 0;
	text-align: right;
}
.hhs-bg-plan-panel__sidebar-list dd.is-alert { color: var(--hhs-red); }
.hhs-bg-plan-panel__table { margin-top: 0; }
.hhs-bg-plan-panel__note {
	margin: 0.5rem 0 0;
	padding: 0.75rem 1rem;
	background: var(--hhs-paper-1);
	border-left: 3px solid rgba(14, 14, 16, 0.45);
	font-family: var(--hhs-font-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--hhs-black);
}

/* ---- Section 4 — body line (new in v1.5) + mock 4-step indicator -------- */
.hhs-bg-c03__body {
	font-size: var(--hhs-body);
	line-height: 1.7;
	color: rgba(14, 14, 16, 0.78);
	max-width: 60ch;
	margin: 0.5rem 0 0;
}
.hhs-bg-form__steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.75rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	width: 100%;
}
.hhs-bg-form__step {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 0.85rem;
	background: var(--hhs-paper-0);
	border: 1px solid rgba(14, 14, 16, 0.12);
	border-radius: 8px;
	min-width: 0;
}
.hhs-bg-form__step.is-active {
	border-color: var(--hhs-red);
	background: rgba(255, 72, 74, 0.06);
}
.hhs-bg-form__step-num {
	font-family: var(--hhs-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--hhs-red);
	letter-spacing: 0.05em;
}
.hhs-bg-form__step:not(.is-active) .hhs-bg-form__step-num {
	color: rgba(14, 14, 16, 0.4);
}
.hhs-bg-form__step-label {
	font-family: var(--hhs-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.7);
}
.hhs-bg-form__step:not(.is-active) .hhs-bg-form__step-label {
	color: rgba(14, 14, 16, 0.45);
}
@media (max-width: 639px) {
	.hhs-bg-form__steps { gap: 0.4rem; }
	.hhs-bg-form__step { flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0.55rem; }
	.hhs-bg-form__step-label { font-size: 0.5625rem; }
}

/* ---- Section 5 closing — post-submit timeline --------------------------- */
.hhs-bg-c04__timeline {
	list-style: none;
	margin: clamp(2rem, 4vh, 3rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.85rem;
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: clamp(1.5rem, 3vh, 2rem);
}
.hhs-bg-c04__timeline-step {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}
.hhs-bg-c04__timeline-ts {
	font-family: var(--hhs-font-mono);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--hhs-cyan);
	letter-spacing: 0.05em;
}
.hhs-bg-c04__timeline-label {
	font-family: var(--hhs-font-sans);
	font-size: 0.9375rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.85);
	line-height: 1.5;
}
@media (max-width: 767px) {
	.hhs-bg-c04__timeline {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.85rem;
	}
	.hhs-bg-c04__timeline-step {
		flex-direction: row;
		align-items: baseline;
		gap: 0.85rem;
	}
	.hhs-bg-c04__timeline-ts { min-width: 4rem; }
}

/* ============================================================================
 * BOOKING GAP — v1.5.0 VISUAL REDESIGN
 *
 * Cross-section overhaul: card overuse reduced, per-variant accent colors,
 * dark instrument display for hero preview, dark redacted-invoice panel,
 * editorial pull-quote, asymmetric close, hairline tile row, horizontal
 * routing strip, graphic-weight step indicator.
 * ============================================================================ */

/* ---- Hero preview — dark instrument-screen variant ----------------------- */
.hhs-bg-header__preview {
	background: var(--hhs-black);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 24px 60px -32px rgba(14, 14, 16, 0.5);
}
.hhs-bg-header__preview .hhs-mono-stamp { color: rgba(255, 255, 255, 0.55); }
.hhs-bg-header__preview .hhs-mono-stamp--accent {
	color: var(--hhs-red);
	border-color: var(--hhs-red);
}
.hhs-bg-header__preview-eyebrow { color: var(--hhs-cyan); }
.hhs-bg-header__preview-gap-num { color: #fff; }
.hhs-bg-header__preview-gap-unit { color: rgba(255, 255, 255, 0.55); }
.hhs-bg-header__preview .hhs-bg-channel-table { color: rgba(255, 255, 255, 0.92); }
.hhs-bg-header__preview .hhs-bg-channel-table thead th {
	color: rgba(255, 255, 255, 0.55);
	border-bottom-color: rgba(255, 255, 255, 0.12);
}
.hhs-bg-header__preview .hhs-bg-channel-table tbody td {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}
.hhs-bg-header__preview .hhs-bg-channel-table .is-up   { color: var(--hhs-red); }
.hhs-bg-header__preview .hhs-bg-channel-table .is-down { color: var(--hhs-cyan); }
.hhs-bg-header__preview .hhs-mono-stamp--footer { color: rgba(255, 255, 255, 0.45); }

/* ---- Chapter nav spine — colored numeral per chapter -------------------- */
.hhs-bg-chapter-nav__link[data-chapter-link="c01"] .hhs-bg-chapter-nav__num { color: var(--hhs-red); }
.hhs-bg-chapter-nav__link[data-chapter-link="c02"] .hhs-bg-chapter-nav__num { color: var(--hhs-cyan); }
.hhs-bg-chapter-nav__link[data-chapter-link="c03"] .hhs-bg-chapter-nav__num { color: var(--hhs-gold); }
.hhs-bg-chapter-nav__link[data-chapter-link="c04"] .hhs-bg-chapter-nav__num { color: var(--hhs-black); }
.hhs-bg-chapter-nav__link[data-chapter-link="c01"].is-active { background: rgba(255, 72, 74, 0.06); border-bottom-color: var(--hhs-red); }
.hhs-bg-chapter-nav__link[data-chapter-link="c02"].is-active { background: rgba(95, 208, 223, 0.10); border-bottom-color: var(--hhs-cyan); }
.hhs-bg-chapter-nav__link[data-chapter-link="c03"].is-active { background: rgba(222, 204, 98, 0.12); border-bottom-color: var(--hhs-gold); }
.hhs-bg-chapter-nav__link[data-chapter-link="c04"].is-active { background: rgba(14, 14, 16, 0.06); border-bottom-color: var(--hhs-black); }

/* ---- Pull-quote — larger editorial weight ------------------------------ */
.hhs-bg-pullquote {
	padding: clamp(4.5rem, 9vh, 7.5rem) var(--hhs-pad-page);
}
.hhs-bg-pullquote__text {
	padding-left: clamp(1.75rem, 3vw, 2.5rem);
	border-left-width: 8px;
	font-size: clamp(2rem, 4.5vw, 4.5rem);
	line-height: 1.02;
}
.hhs-bg-pullquote__caption {
	margin-top: 1.75rem;
}

/* ---- Section 2 invoice — redacted panel goes dark ---------------------- */
.hhs-bg-invoice__panel--without {
	background: var(--hhs-black);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #fff;
}
.hhs-bg-invoice__panel--without .hhs-mono-stamp { color: rgba(255, 255, 255, 0.55); }
.hhs-bg-invoice__panel--without .hhs-bg-invoice__title { color: #fff; }
.hhs-bg-invoice__panel--without .hhs-bg-invoice__table thead th {
	color: rgba(255, 255, 255, 0.5);
	border-bottom-color: rgba(255, 255, 255, 0.15);
}
.hhs-bg-invoice__panel--without .hhs-bg-invoice__table tbody td {
	border-bottom-color: rgba(255, 255, 255, 0.08);
	color: #fff;
}
.hhs-bg-invoice__panel--without .hhs-bg-invoice__unit { color: rgba(255, 255, 255, 0.5); }
.hhs-bg-invoice__panel--without .hhs-bg-invoice__redacted {
	color: #fff;
	background: var(--hhs-red);
	font-weight: 700;
	letter-spacing: 0.05em;
}
.hhs-bg-invoice__panel--without .hhs-bg-invoice__footer { color: rgba(255, 255, 255, 0.6); }
.hhs-bg-invoice__panel--with {
	background: var(--hhs-paper-0);
	box-shadow: none;
}
.hhs-bg-invoice__panel--with .hhs-bg-invoice__footer { color: var(--hhs-red); }
.hhs-bg-invoice__divider-label { color: var(--hhs-red); }

/* ---- Section 3 tile row — hairline columns, no cards ------------------- */
.hhs-bg-c02__tiles {
	border-top: 1px solid rgba(14, 14, 16, 0.18);
	padding-top: clamp(1.75rem, 3.5vh, 2.75rem);
	gap: clamp(2rem, 3.5vw, 4rem);
	counter-reset: bgtile;
}
.hhs-bg-tile {
	background: transparent;
	border: 0;
	border-radius: 0;
	border-top: 2px solid var(--hhs-red);
	padding: 1rem 0 0;
	counter-increment: bgtile;
	gap: 0.5rem;
}
.hhs-bg-tile::before {
	content: counter(bgtile, decimal-leading-zero);
	display: block;
	font-family: var(--hhs-font-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--hhs-red);
}
.hhs-bg-tile__title {
	font-size: clamp(1.05rem, 1.35vw, 1.35rem);
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.005em;
	text-transform: none;
}
.hhs-bg-tile__body {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(14, 14, 16, 0.72);
	max-width: none;
}

/* ---- Plan panel variants — top accent bars, themed sidebar labels ------ */
.hhs-bg-plan-panel {
	position: relative;
	overflow: hidden;
}
.hhs-bg-plan-panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
}
.hhs-bg-plan-panel[data-variant="a"]::before { background: var(--hhs-red); }
.hhs-bg-plan-panel[data-variant="b"]::before { background: var(--hhs-black); }
.hhs-bg-plan-panel[data-variant="c"]::before { background: var(--hhs-cyan); }
.hhs-bg-plan-panel[data-variant="a"] { border-color: rgba(255, 72, 74, 0.35); }
.hhs-bg-plan-panel[data-variant="b"] { border-color: rgba(14, 14, 16, 0.45); }
.hhs-bg-plan-panel[data-variant="c"] { border-color: rgba(95, 208, 223, 0.5); }
.hhs-bg-plan-panel[data-variant="a"] .hhs-bg-plan-panel__sidebar-label { color: var(--hhs-red); }
.hhs-bg-plan-panel[data-variant="b"] .hhs-bg-plan-panel__sidebar-label { color: var(--hhs-black); }
.hhs-bg-plan-panel[data-variant="c"] .hhs-bg-plan-panel__sidebar-label { color: var(--hhs-navy); }
.hhs-bg-plan-panel[data-variant="b"] .hhs-bg-plan-panel__sidebar { background: rgba(14, 14, 16, 0.04); }
.hhs-bg-plan-panel[data-variant="c"] .hhs-bg-plan-panel__sidebar { background: rgba(95, 208, 223, 0.08); }

/* ---- Form-frame — strip-style, graphic-weight step indicator ----------- */
.hhs-bg-form {
	min-height: 0;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: transparent;
	border: 1px dashed rgba(14, 14, 16, 0.22);
}
.hhs-bg-form__steps {
	gap: 0;
	border-bottom: 1px solid rgba(14, 14, 16, 0.12);
	padding-bottom: clamp(1.25rem, 2.5vh, 2rem);
	margin-bottom: clamp(1.25rem, 2.5vh, 2rem);
}
.hhs-bg-form__step {
	background: transparent;
	border: 0;
	border-right: 1px solid rgba(14, 14, 16, 0.1);
	border-radius: 0;
	padding: 0.5rem 1.25rem;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}
.hhs-bg-form__step:first-child { padding-left: 0; }
.hhs-bg-form__step:last-child { border-right: 0; }
.hhs-bg-form__step.is-active { background: transparent; }
.hhs-bg-form__step-num {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(1.65rem, 2.4vw, 2.25rem);
	color: rgba(14, 14, 16, 0.2);
	letter-spacing: -0.02em;
	line-height: 1;
}
.hhs-bg-form__step.is-active .hhs-bg-form__step-num { color: var(--hhs-red); }
.hhs-bg-form__step:not(.is-active) .hhs-bg-form__step-num { color: rgba(14, 14, 16, 0.22); }
.hhs-bg-form__step-label {
	font-size: 0.6875rem;
	color: rgba(14, 14, 16, 0.6);
}

/* ---- Section 5 closing — asymmetric grid at desktop -------------------- */
@media (min-width: 1024px) {
	.hhs-bg-c04__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		grid-template-areas:
			"eyebrow  body"
			"h2       body"
			"h2       cta"
			"timeline timeline";
		column-gap: clamp(3rem, 5vw, 5.5rem);
		row-gap: clamp(1.5rem, 2.5vh, 2.25rem);
		align-items: start;
		max-width: 86rem;
	}
	.hhs-bg-c04 .hhs-bg-c04__eyebrow { grid-area: eyebrow; margin-bottom: 0; }
	.hhs-bg-c04__h2 { grid-area: h2; }
	.hhs-bg-c04__body { grid-area: body; max-width: 38ch; margin: 0; }
	.hhs-bg-c04__inner > .hhs-btn { grid-area: cta; justify-self: start; align-self: start; }
	.hhs-bg-c04__timeline {
		grid-area: timeline;
		margin-top: clamp(3rem, 6vh, 5rem);
	}
}

/* ---- Section 6 routing — horizontal strip at desktop ------------------- */
@media (min-width: 1024px) {
	.hhs-bg-route {
		flex-direction: row;
		align-items: center;
		gap: clamp(1.75rem, 3.5vw, 3rem);
		max-width: 76rem;
		padding: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 3.5vw, 2.75rem);
	}
	.hhs-bg-route__eyebrow {
		flex: 0 0 auto;
		padding-right: clamp(1.5rem, 3vw, 2.5rem);
		border-right: 1px solid rgba(14, 14, 16, 0.18);
	}
	.hhs-bg-route__body {
		flex: 1 1 auto;
		margin: 0;
		max-width: 56ch;
	}
	.hhs-bg-route__cta { flex: 0 0 auto; }
}

/* ============================================================================
 * BOOKING GAP — v1.5.1 PATCHES
 *
 * Hero col stacks body+CTA+trust together (closes the gap between body and
 * CTA). Section 2 and Section 3 heads left-align (no more centered band).
 * Section 2 drops the two-up: lead body full-width, then 3 chapter rows in a
 * 3-column hairline row.
 * ============================================================================ */

/* Hero — left column stacks body, CTA group, trust together. */
.hhs-bg-header__mid > .hhs-bg-header__col {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 2.5vh, 2.25rem);
	min-width: 0;
	max-width: 56ch;
}
.hhs-bg-header__mid > .hhs-bg-header__col .hhs-bg-header__body { margin: 0; }
.hhs-bg-header__mid > .hhs-bg-header__col .hhs-bg-header__cta-group { margin: 0; }
.hhs-bg-header__mid > .hhs-bg-header__col .hhs-bg-header__trust { margin: 0; }

/* Section 2 head — left-aligned text, centered 76rem column. */
.hhs-bg-c01__head {
	margin: 0 auto clamp(2.5rem, 5vh, 4rem);
	max-width: 76rem;
}
.hhs-bg-c01__head .hhs-bg-c01__h2 { max-width: 26ch; }

/* Section 2 lead body — full-width section lead within the 76rem column. */
.hhs-bg-c01__lead {
	max-width: 76rem;
	margin: 0 auto clamp(2.5rem, 5vh, 4rem);
	font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
	line-height: 1.65;
	color: rgba(14, 14, 16, 0.78);
}

/* Section 2 chapter rows — 3-column hairline row replaces the two-up. */
.hhs-bg-c01__rows {
	max-width: 76rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 3.5vh, 3rem);
	border-top: 1px solid rgba(14, 14, 16, 0.18);
	padding-top: clamp(2rem, 4vh, 3rem);
	counter-reset: bgrow;
}
@media (min-width: 768px) {
	.hhs-bg-c01__rows {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(2rem, 3vw, 3.5rem);
	}
}
.hhs-bg-c01__rows .hhs-bg-row {
	border-top: 2px solid var(--hhs-red);
	padding-top: 1rem;
	max-width: none;
	gap: 0.65rem;
	counter-increment: bgrow;
}
.hhs-bg-c01__rows .hhs-bg-row__index { color: var(--hhs-red); }

/* Section 3 head — left-aligned text, centered 76rem column. */
.hhs-bg-c02__head {
	margin: 0 auto clamp(3.5rem, 7vh, 6rem);
	max-width: 76rem;
}
.hhs-bg-c02__head .hhs-bg-c02__h2 { max-width: 28ch; }

/* ============================================================================
 * BOOKING GAP — v1.5.3 SECTION 4 CONVERSION TREATMENT
 *
 * The conversion section gets visual differentiation from the surrounding
 * cream register. Tinted paper-2 background, 4px FH Red section-top accent,
 * brighter form-frame with red top accent + drop shadow, larger step
 * numerals, mono "READY WHEN YOU ARE" stamp.
 * ============================================================================ */

.hhs-bg-c03 {
	background: var(--hhs-paper-2);
	border-top: 4px solid var(--hhs-red);
	border-bottom: 1px solid rgba(14, 14, 16, 0.08);
}
.hhs-bg-c03 .hhs-eyebrow {
	color: var(--hhs-red);
	font-weight: 700;
}
.hhs-bg-c03__head {
	max-width: 76rem;
	margin: 0 auto clamp(2.5rem, 5vh, 4rem);
}

/* Form-frame card — bright paper-0, red-topped, drop shadow */
.hhs-bg-form {
	background: var(--hhs-paper-0);
	border: 1px solid rgba(14, 14, 16, 0.12);
	border-top: 6px solid var(--hhs-red);
	border-radius: 14px;
	box-shadow: 0 24px 60px -36px rgba(14, 14, 16, 0.4);
	padding: clamp(2rem, 3.5vw, 3rem);
}

/* Step indicator — bigger numerals, stronger graphic weight */
.hhs-bg-form__step-num {
	font-size: clamp(2rem, 3vw, 2.75rem);
}
.hhs-bg-form__step-label {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
}

/* Mono stamp anchored above the form to bridge the head into the form.
 * Width locked to 56rem to match the form + section head (booking-gap.css).
 * Wider values push the stamp left into the .hhs-chapter__index spine
 * ("CHAPTER 03 | RUN") and read as visual collision on tablet widths. */
.hhs-bg-c03__form-stamp {
	max-width: 56rem;
	margin: 0 auto clamp(0.75rem, 1.5vh, 1rem);
	font-family: var(--hhs-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: var(--hhs-red);
}

/* Walkthrough row — clearer "OR" divider between the form and the
   secondary path. */
.hhs-bg-c03__walkthrough {
	border-top: 1px solid rgba(14, 14, 16, 0.18);
	padding-top: clamp(1.5rem, 3vh, 2.25rem);
	margin: clamp(2rem, 4vh, 3rem) auto 0;
}
.hhs-bg-c03__trust {
	color: var(--hhs-italic-editorial);
}

/* ============================================================================
 * BOOKING GAP — illustrative pass (v1.5.4)
 * Mirrors the v1.1 Brand Multiple visual-interest pass. Four moves; no score
 * ribbon (BG has no 0–100 scale anchor) and no channel-table dot-leader
 * (BG channel tables carry real data across columns and would fight a dashed
 * connector). All additions scoped under .hhs-bg-* / .hhs-instrument[data-instrument="booking-gap"].
 * Type, spacing, container widths, and section padding all unchanged.
 * ============================================================================ */

/* 1. Page paper-grain — fixed-attachment SVG noise, ~3.5% opacity, multiply.
 *    Editorial-instrument lift; zero layout impact. */
.hhs-instrument[data-instrument="booking-gap"] {
	position: relative;
	isolation: isolate;
}
.hhs-instrument[data-instrument="booking-gap"]::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.035;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	background-size: 240px 240px;
}
.hhs-instrument[data-instrument="booking-gap"] > * { position: relative; z-index: 1; }

/* 2. Hero preview card backdrop — faint topographic contour radials behind
 *    the $184,000/mo booking-gap figure. Lifts the central artifact from
 *    "dark card with table" to "instrument readout." Pseudo-element only. */
.hhs-bg-header__preview {
	overflow: hidden;
}
.hhs-bg-header__preview::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.16;
	background-image:
		radial-gradient(ellipse 65% 50% at 22% 42%, transparent 36%, rgba(255, 72, 74, 0.55) 37%, transparent 38%),
		radial-gradient(ellipse 65% 50% at 22% 42%, transparent 46%, rgba(255, 72, 74, 0.40) 47%, transparent 48%),
		radial-gradient(ellipse 65% 50% at 22% 42%, transparent 58%, rgba(255, 72, 74, 0.28) 59%, transparent 60%),
		radial-gradient(ellipse 80% 60% at 84% 82%, transparent 28%, rgba(95, 208, 223, 0.22) 29%, transparent 30%),
		radial-gradient(ellipse 80% 60% at 84% 82%, transparent 40%, rgba(95, 208, 223, 0.14) 41%, transparent 42%);
	z-index: 0;
}
.hhs-bg-header__preview > * { position: relative; z-index: 1; }

/* 3. Tension-row marginalia — quiet 36×36 SVG ornaments above each of the
 *    3 row titles. Hairline strokes only; semantic support for the text. */
.hhs-bg-row__ornament {
	width: 36px;
	height: 36px;
	color: var(--hhs-red);
	opacity: 0.82;
	display: block;
	margin-bottom: 0.1rem;
}
.hhs-bg-row__ornament svg { width: 100%; height: 100%; display: block; }

/* 4. Form-step progression hairline — single 1px navy line behind the four
 *    numerals (parallels the BM pattern). */
.hhs-bg-form__steps {
	position: relative;
}
.hhs-bg-form__steps::before {
	content: '';
	position: absolute;
	left: clamp(1.4rem, 1.85vw, 1.7rem);
	top: 1.4rem;
	bottom: 1.4rem;
	width: 1px;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(39, 96, 146, 0.22) 12%,
		rgba(39, 96, 146, 0.22) 88%,
		transparent 100%);
	pointer-events: none;
	z-index: 0;
}

/* Reduced-motion respect (no draw-in animations on BG; just disable grain) */
@media (prefers-reduced-motion: reduce) {
	.hhs-instrument[data-instrument="booking-gap"]::before { background-image: none; }
}

/* ============================================================================
 * CONTACT PAGE — v1.5.5
 * Strip-register utility page: header + two paths + other-inquiry form.
 * Selectors scoped under .hhs-ct-*. Never modifies global tokens.
 * Illustrative pass: paper grain + form-step hairline.
 * ============================================================================ */

/* --- Page shell + paper grain (illustrative move 1) ----------------------- */
.hhs-ct {
	background: var(--hhs-paper-1);
	color: var(--hhs-black);
	overflow-x: hidden;
	position: relative;
	isolation: isolate;
}
.hhs-ct::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.035;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	background-size: 240px 240px;
}
.hhs-ct > * { position: relative; z-index: 1; }

.hhs-ct-container {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 var(--hhs-pad-page);
	width: 100%;
}

/* --- Section 1: Page Header ----------------------------------------------- */
.hhs-ct-header {
	padding: clamp(7rem, 12vh, 11rem) 0 clamp(4rem, 7vh, 6rem);
	background:
		radial-gradient(ellipse at 20% 0%, rgba(255, 72, 74, 0.04), transparent 55%),
		var(--hhs-paper-1);
}

.hhs-ct-datum {
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: var(--hhs-charcoal);
	opacity: 0.78;
	margin: 0 0 1.5rem 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}
.hhs-ct-datum::before {
	content: '';
	width: 2.4rem;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

.hhs-ct-eyebrow {
	font-family: var(--hhs-font-sans);
	font-weight: 500;
	font-size: var(--hhs-meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hhs-red);
	margin: 0 0 1rem 0;
}

.hhs-ct-header__h1 {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(3rem, 7.5vw, 7rem);
	line-height: 0.98;
	letter-spacing: -0.025em;
	color: var(--hhs-black);
	margin: 0.5rem 0 1rem 0;
}

.hhs-ct-header__h2 {
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2.5rem);
	line-height: 1.18;
	letter-spacing: -0.005em;
	color: var(--hhs-charcoal);
	margin: 0 0 1.5rem 0;
	max-width: 32ch;
}

.hhs-ct-header__body {
	font-size: var(--hhs-body-lg);
	line-height: 1.65;
	color: var(--hhs-charcoal);
	max-width: 56ch;
	margin: 0;
}

/* --- Section 2: Two Paths ------------------------------------------------- */
.hhs-ct-paths {
	padding: clamp(4.5rem, 8vh, 7rem) 0;
	position: relative;
}

.hhs-ct-paths__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 2.5vw, 2rem);
}

.hhs-ct-path-card {
	background: var(--hhs-paper-0);
	border: 1px solid rgba(14, 14, 16, 0.07);
	border-radius: 14px;
	padding: clamp(1.75rem, 2.5vw, 2.25rem);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	position: relative;
	box-shadow: 0 12px 36px -24px rgba(14, 14, 16, 0.3);
}
.hhs-ct-path-card__accent {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 6px;
	background: var(--hhs-red);
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
}
.hhs-ct-path-card__accent--black {
	background: var(--hhs-black);
}

.hhs-ct-path-card__eyebrow {
	font-family: var(--hhs-font-mono);
	font-size: 0.72rem;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: var(--hhs-charcoal);
	opacity: 0.7;
	margin: 0.4rem 0 0 0;
}
.hhs-ct-path-card[data-path="assessment"] .hhs-ct-path-card__eyebrow { color: var(--hhs-red); }

.hhs-ct-path-card__title {
	font-family: var(--hhs-font-sans);
	font-weight: 700;
	font-size: clamp(1.15rem, 1.55vw, 1.45rem);
	line-height: 1.18;
	letter-spacing: -0.012em;
	color: var(--hhs-black);
	margin: 0;
}

.hhs-ct-path-card__body {
	font-size: var(--hhs-body);
	line-height: 1.6;
	color: var(--hhs-charcoal);
	margin: 0;
	max-width: min(56ch, 100%);
}

.hhs-ct-path-card__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

/* --- Section 3: Form ------------------------------------------------------ */
.hhs-ct-form-section {
	padding: clamp(4.5rem, 8vh, 7rem) 0;
	background: var(--hhs-paper-2);
	position: relative;
}
.hhs-ct-form-section__accent-bar {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	background: var(--hhs-red);
}

.hhs-ct-form {
	background: var(--hhs-paper-0);
	border-radius: 14px;
	padding: clamp(2rem, 3vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
	position: relative;
	box-shadow: 0 18px 50px -28px rgba(14, 14, 16, 0.35);
	margin: 1.5rem 0 clamp(2rem, 3vh, 3rem) 0;
	max-width: 640px;
}
.hhs-ct-form__accent {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 6px;
	background: var(--hhs-red);
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
}

.hhs-ct-form__title {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	letter-spacing: -0.02em;
	color: var(--hhs-black);
	margin: 0 0 1.5rem 0;
}

.hhs-ct-form__fields {
	list-style: none;
	padding: 0;
	margin: 0 0 1.75rem 0;
	display: grid;
	gap: clamp(1rem, 1.6vh, 1.4rem);
	position: relative;
}

/* Illustrative move 6: form-step progression hairline */
.hhs-ct-form__fields::before {
	content: '';
	position: absolute;
	left: clamp(1.45rem, 1.85vw, 1.7rem);
	top: 1.5rem;
	bottom: 1.5rem;
	width: 1px;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(39, 96, 146, 0.22) 12%,
		rgba(39, 96, 146, 0.22) 88%,
		transparent 100%);
	pointer-events: none;
	z-index: 0;
}

.hhs-ct-form__field {
	display: grid;
	grid-template-columns: clamp(3rem, 4vw, 3.5rem) minmax(0, 1fr);
	gap: clamp(0.85rem, 1.4vw, 1.25rem);
	align-items: start;
}
.hhs-ct-form__field-num {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(2rem, 2.6vw, 2.75rem);
	color: var(--hhs-red);
	letter-spacing: -0.02em;
	line-height: 1;
	position: relative;
	z-index: 1;
	background: var(--hhs-paper-0);
	padding: 0 0.15rem;
	border-radius: 4px;
}
.hhs-ct-form__field-inner {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding-top: 0.5rem;
}
.hhs-ct-form__label {
	font-family: var(--hhs-font-sans);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.3vw, 1.2rem);
	letter-spacing: -0.01em;
	color: var(--hhs-black);
}
.hhs-ct-form__input,
.hhs-ct-form__select,
.hhs-ct-form__textarea {
	font-family: var(--hhs-font-sans);
	font-size: var(--hhs-body);
	color: var(--hhs-black);
	background: var(--hhs-paper-1);
	border: 1px solid rgba(14, 14, 16, 0.12);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	width: 100%;
	transition: border-color 0.2s var(--hhs-ease-out);
}
.hhs-ct-form__input:focus,
.hhs-ct-form__select:focus,
.hhs-ct-form__textarea:focus {
	outline: none;
	border-color: var(--hhs-red);
	box-shadow: 0 0 0 3px rgba(255, 72, 74, 0.12);
}
.hhs-ct-form__select {
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23323232' stroke-width='1.5' stroke-linecap='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}
.hhs-ct-form__textarea {
	resize: vertical;
	min-height: 6rem;
}

.hhs-ct-form__cta-row {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.5rem);
	padding-top: 0.5rem;
	border-top: 1px dashed rgba(14, 14, 16, 0.1);
}

.hhs-ct-form-section__trust {
	font-family: var(--hhs-font-sans);
	font-size: var(--hhs-body-sm);
	font-style: italic;
	line-height: 1.6;
	color: var(--hhs-navy);
	margin: 0;
	max-width: 56ch;
}

/* --- Responsive: Tablet (≤1024) ------------------------------------------ */
@media (max-width: 1024px) {
	.hhs-ct-paths__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Responsive: Mobile (≤640) ------------------------------------------- */
@media (max-width: 640px) {
	.hhs-ct-form__field {
		grid-template-columns: auto 1fr;
	}
}

/* --- min-width: 0 protection for grid children --------------------------- */
.hhs-ct-paths__grid > *,
.hhs-ct-form__field > * { min-width: 0; }

.hhs-ct p { max-width: min(72ch, 100%); }
.hhs-ct .hhs-ct-header__h1 { max-width: none; }

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.hhs-ct::before { background-image: none; }
	.hhs-ct-form__input,
	.hhs-ct-form__select,
	.hhs-ct-form__textarea { transition: none; }
}

/* ============================================================================
 * BRAND MULTIPLE — v1.6.0
 * Migrated from preview workspace (v1.1.0). Selectors scoped under
 * .hhs-bm-*. Mono stamp overrides scoped under .hhs-instrument--bm to
 * avoid cross-page conflict with BG's stamp styling.
 * Illustrative pass baked in: paper grain, hero backdrop, score ribbon,
 * layer marginalia, channel-table dot-leaders, form-step hairline.
 * ============================================================================ */

/* --- Mono stamp overrides for BM (pill-shaped variant) ------------------- */
.hhs-instrument--bm .hhs-mono-stamp {
	display: inline-block;
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: var(--hhs-charcoal);
	padding: 0.35rem 0.7rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	line-height: 1;
}
.hhs-instrument--bm .hhs-mono-stamp--graphic {
	font-weight: 500;
	color: var(--hhs-red);
	border-color: rgba(255, 72, 74, 0.35);
	background: rgba(255, 72, 74, 0.06);
}
.hhs-instrument--bm .hhs-mono-stamp--cyan {
	color: var(--hhs-cyan);
	border-color: rgba(95, 208, 223, 0.4);
	background: rgba(95, 208, 223, 0.08);
}
.hhs-instrument--bm .hhs-mono-stamp--quiet {
	font-size: 0.7rem;
	color: rgba(50, 50, 50, 0.62);
	border-color: rgba(50, 50, 50, 0.18);
	background: transparent;
	padding: 0.3rem 0.6rem;
}

/* --- BM page shell ------------------------------------------------------- */
.hhs-instrument--bm { background: var(--hhs-paper-1); color: var(--hhs-black); overflow-x: hidden; }
.hhs-bm-container { max-width: 1320px; margin: 0 auto; padding: 0 var(--hhs-pad-page); width: 100%; }
.hhs-bm-eyebrow { font-family: var(--hhs-font-sans); font-weight: 500; font-size: var(--hhs-meta); letter-spacing: 0.18em; text-transform: uppercase; color: var(--hhs-red); margin: 0 0 1rem 0; }
.hhs-bm-datum { font-family: var(--hhs-font-mono); font-size: var(--hhs-meta); letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-charcoal); opacity: 0.78; margin: 0 0 1.5rem 0; display: inline-flex; align-items: center; gap: 0.5em; }
.hhs-bm-datum::before { content: ''; width: 2.4rem; height: 1px; background: currentColor; opacity: 0.55; }

/* --- S1: Hero ------------------------------------------------------------ */
.hhs-bm-hero { padding: clamp(7rem, 12vh, 11rem) 0 clamp(4rem, 7vh, 6rem); background: radial-gradient(ellipse at 20% 0%, rgba(255, 72, 74, 0.05), transparent 55%), var(--hhs-paper-1); position: relative; }
.hhs-bm-hero__top { margin-bottom: clamp(3rem, 5vh, 4.5rem); }
.hhs-bm-hero__h1 { font-family: var(--hhs-font-sans); font-weight: 900; font-size: clamp(3rem, 7.5vw, 7rem); line-height: 0.98; letter-spacing: -0.025em; color: var(--hhs-black); margin: 0.5rem 0 1rem 0; }
.hhs-bm-hero__h2 { font-family: var(--hhs-font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.18; letter-spacing: -0.005em; color: var(--hhs-charcoal); margin: 0; max-width: 32ch; }
.hhs-bm-hero__mid { display: grid; grid-template-columns: minmax(0, 56ch) minmax(0, 1fr); gap: clamp(2rem, 4.5vw, 5rem); align-items: start; }
.hhs-bm-hero__copy { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.hhs-bm-hero__body { font-size: var(--hhs-body-lg); line-height: 1.65; color: var(--hhs-charcoal); max-width: 56ch; }
.hhs-bm-cta-primary { box-shadow: 0 16px 32px -14px rgba(255, 72, 74, 0.55); }
.hhs-bm-hero__trust { font-size: var(--hhs-body-sm); color: rgba(14, 14, 16, 0.55); max-width: 56ch; }

/* Hero preview artifact */
.hhs-bm-preview { background: var(--hhs-black); color: var(--hhs-paper-0); border-radius: 14px; padding: clamp(1.5rem, 2vw, 2rem); display: flex; flex-direction: column; gap: 1.25rem; box-shadow: 0 20px 50px -24px rgba(14, 14, 16, 0.45); font-family: var(--hhs-font-sans); overflow: hidden; position: relative; }
.hhs-bm-preview__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hhs-bm-preview__eyebrow { font-family: var(--hhs-font-mono); font-size: var(--hhs-meta); letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-cyan); }
.hhs-bm-preview__score { display: flex; align-items: baseline; gap: 0.5rem; }
.hhs-bm-preview__num { font-family: var(--hhs-font-sans); font-weight: 900; font-size: clamp(4rem, 7.5vw, 6.5rem); line-height: 0.95; letter-spacing: -0.04em; color: var(--hhs-paper-0); }
.hhs-bm-preview__denom { font-family: var(--hhs-font-mono); font-size: 1rem; color: rgba(250, 247, 241, 0.55); letter-spacing: 0.05em; }
.hhs-bm-preview__band { display: flex; align-items: center; gap: 0.85rem; }
.hhs-bm-preview__band-rule { width: 36px; height: 4px; border-radius: 2px; }
.hhs-bm-preview__band-rule[data-band="identity-only"]    { background: var(--hhs-red); }
.hhs-bm-preview__band-rule[data-band="reputation-driven"]{ background: var(--hhs-paper-0); }
.hhs-bm-preview__band-rule[data-band="brand-aware"]      { background: var(--hhs-cyan); }
.hhs-bm-preview__band-rule[data-band="compound-brand"]   { background: var(--hhs-gold); }
.hhs-bm-preview__band-name { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
.hhs-bm-preview__meta { display: grid; gap: 0.65rem; margin: 0; padding-top: 0.85rem; border-top: 1px solid rgba(250, 247, 241, 0.12); }
.hhs-bm-preview__meta div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: baseline; }
.hhs-bm-preview__meta dt { font-family: var(--hhs-font-mono); font-size: 0.7rem; letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: rgba(250, 247, 241, 0.55); margin: 0; }
.hhs-bm-preview__meta dd { margin: 0; font-size: var(--hhs-body-sm); color: var(--hhs-paper-0); }
.hhs-bm-preview__footer { padding-top: 0.5rem; border-top: 1px dashed rgba(250, 247, 241, 0.16); }
.hhs-bm-preview__url { font-family: var(--hhs-font-mono); font-size: 0.7rem; color: rgba(250, 247, 241, 0.5); letter-spacing: 0.05em; }

/* --- Chapter nav spine --------------------------------------------------- */
.hhs-bm-spine { position: sticky; top: var(--hhs-nav-h, 4.25rem); z-index: 80; background: rgba(250, 247, 241, 0.92); backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%); border-top: 1px solid rgba(14, 14, 16, 0.06); border-bottom: 1px solid rgba(14, 14, 16, 0.06); }
.hhs-bm-spine__inner { display: flex; gap: clamp(0.5rem, 1.5vw, 1.25rem); overflow-x: auto; padding: 0.65rem var(--hhs-pad-page); margin: 0 auto; scrollbar-width: none; }
.hhs-bm-spine__inner::-webkit-scrollbar { display: none; }
.hhs-bm-spine__link { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.85rem; border-radius: 999px; text-decoration: none; color: var(--hhs-charcoal); font-size: var(--hhs-body-sm); font-weight: 500; white-space: nowrap; border: 1px solid transparent; transition: background 0.25s var(--hhs-ease-out), color 0.25s var(--hhs-ease-out), border-color 0.25s var(--hhs-ease-out); }
.hhs-bm-spine__link:hover { color: var(--hhs-black); border-color: rgba(14, 14, 16, 0.12); }
.hhs-bm-spine__num { font-family: var(--hhs-font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; }
.hhs-bm-spine__num[data-tone="red"]   { color: var(--hhs-red); }
.hhs-bm-spine__num[data-tone="cyan"]  { color: var(--hhs-cyan); }
.hhs-bm-spine__num[data-tone="gold"]  { color: var(--hhs-gold); }
.hhs-bm-spine__num[data-tone="black"] { color: var(--hhs-black); }
.hhs-bm-spine__num[data-tone="navy"]  { color: var(--hhs-navy); }
.hhs-bm-spine__label { font-family: var(--hhs-font-sans); font-weight: 500; font-size: var(--hhs-body-sm); letter-spacing: -0.005em; }
.hhs-bm-spine__link.is-active { border-color: rgba(14, 14, 16, 0.12); }
.hhs-bm-spine__link.is-active[data-chapter-target="01"] { background: rgba(255, 72, 74, 0.1); border-color: rgba(255, 72, 74, 0.32); }
.hhs-bm-spine__link:has(.hhs-bm-spine__num[data-tone="cyan"]).is-active  { background: rgba(95, 208, 223, 0.12); border-color: rgba(95, 208, 223, 0.36); }
.hhs-bm-spine__link:has(.hhs-bm-spine__num[data-tone="gold"]).is-active  { background: rgba(222, 204, 98, 0.16); border-color: rgba(222, 204, 98, 0.42); }
.hhs-bm-spine__link:has(.hhs-bm-spine__num[data-tone="black"]).is-active { background: rgba(14, 14, 16, 0.08); border-color: rgba(14, 14, 16, 0.18); }
.hhs-bm-spine__link:has(.hhs-bm-spine__num[data-tone="navy"]).is-active  { background: rgba(39, 96, 146, 0.1); border-color: rgba(39, 96, 146, 0.28); }

/* --- Section shell ------------------------------------------------------- */
.hhs-bm-section { position: relative; padding: clamp(4.5rem, 8vh, 7rem) 0; scroll-margin-top: calc(var(--hhs-nav-h, 4.25rem) + 4rem); }
.hhs-bm-section__head { margin-bottom: clamp(2rem, 3.5vh, 3rem); }
.hhs-bm-section__head--dark .hhs-mono-stamp { color: var(--hhs-cyan); border-color: rgba(95, 208, 223, 0.4); }
.hhs-bm-section__intro { max-width: 56ch; margin-bottom: clamp(2.5rem, 4vh, 3.5rem); display: flex; flex-direction: column; gap: 1rem; }
.hhs-bm-section__intro .hhs-mono-stamp { align-self: flex-start; margin-top: 0.5rem; }
.hhs-bm-section__h2 { font-family: var(--hhs-font-sans); font-weight: 900; font-size: clamp(1.75rem, 3.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--hhs-black); margin: 0; }
.hhs-bm-section__lead { font-size: var(--hhs-body-lg); line-height: 1.6; color: var(--hhs-charcoal); max-width: 56ch; margin: 0; }
.hhs-bm-section__closing { margin: 0 auto; font-family: var(--hhs-font-serif); font-style: italic; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--hhs-italic-editorial); max-width: 42ch; text-align: center; }

/* Closing-block wrapper — matches BG closing-block pattern (hairline + mono stamp + italic editorial statement) */
.hhs-bm-section__closing-block { max-width: 60rem; margin: clamp(3rem, 6vh, 5rem) auto 0; padding-top: clamp(2rem, 4vh, 3rem); border-top: 1px solid rgba(14, 14, 16, 0.12); display: flex; flex-direction: column; align-items: center; gap: clamp(0.85rem, 1.6vh, 1.35rem); text-align: center; }
.hhs-bm-section__closing-stamp { text-align: center; margin: 0; }
@media (max-width: 1023px) {
	.hhs-bm-section__closing-block { align-items: flex-start; text-align: left; }
	.hhs-bm-section__closing-stamp { text-align: left; }
	.hhs-bm-section__closing { text-align: left; margin-left: 0; margin-right: 0; max-width: 100%; }
}

/* Stakes block — editorial transition signpost between Chapter 01 (Assessment) and Chapter 02 (Output) */
.hhs-bm-stakes { padding: clamp(3rem, 6vh, 5rem) 0; position: relative; background: var(--hhs-paper-1); }
.hhs-bm-stakes .hhs-bm-container { border-top: 1px solid rgba(14, 14, 16, 0.12); padding-top: clamp(2.5rem, 5vh, 4rem); text-align: center; }
.hhs-bm-stakes__statement { font-family: var(--hhs-font-serif); font-size: clamp(2rem, 4.5vw, 4rem); line-height: 1.05; letter-spacing: -0.015em; margin: 0 auto; max-width: 28ch; }
.hhs-bm-stakes__line { display: block; }
.hhs-bm-stakes__line--thesis { color: var(--hhs-black); font-style: normal; font-weight: 400; }
.hhs-bm-stakes__line--antithesis { color: var(--hhs-italic-editorial); font-style: italic; font-weight: 400; }
.hhs-bm-stakes__caption { margin: clamp(1.5rem, 3vh, 2.5rem) 0 0; padding-left: clamp(1.25rem, 2.5vw, 2rem); text-align: left; }
@media (max-width: 1023px) {
	.hhs-bm-stakes .hhs-bm-container { text-align: left; }
	.hhs-bm-stakes__statement { margin-left: 0; max-width: 100%; }
	.hhs-bm-stakes__caption { padding-left: 0; }
}

/* --- S2: Two-up + 4 layer rows ------------------------------------------ */
.hhs-bm-twoup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 4vw, 5rem); align-items: start; margin-bottom: clamp(3rem, 5vh, 5rem); }
.hhs-bm-twoup__copy { display: flex; flex-direction: column; gap: 1rem; }

/* Comparison table (scoped BM) */
.hhs-bm-channel-table { background: var(--hhs-paper-0); border: 1px solid rgba(14, 14, 16, 0.07); border-radius: 10px; overflow: hidden; box-shadow: 0 14px 40px -28px rgba(14, 14, 16, 0.35); }
.hhs-bm-channel-table__head { display: grid; grid-template-columns: 1fr 1fr; background: var(--hhs-paper-2); border-bottom: 1px solid rgba(14, 14, 16, 0.08); }
.hhs-bm-channel-table__col-label { font-family: var(--hhs-font-mono); font-size: 0.72rem; letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-charcoal); padding: 0.85rem 1.1rem; }
.hhs-bm-channel-table__col-label[data-col="left"]  { color: var(--hhs-red); }
.hhs-bm-channel-table__col-label[data-col="right"] { border-left: 1px solid rgba(14, 14, 16, 0.08); color: var(--hhs-charcoal); }
.hhs-bm-channel-table__row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(14, 14, 16, 0.06); position: relative; }
.hhs-bm-channel-table__row:last-child { border-bottom: 0; }
.hhs-bm-channel-table__cell { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; min-height: 5.5rem; justify-content: center; }
.hhs-bm-channel-table__cell--redacted { background: var(--hhs-black); color: var(--hhs-paper-0); position: relative; }
.hhs-bm-redacted-label { font-family: var(--hhs-font-mono); font-size: 0.7rem; letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: rgba(250, 247, 241, 0.55); }
.hhs-bm-redacted-bar { display: block; height: 0.85rem; background: rgba(255, 72, 74, 0.85); width: 70%; border-radius: 1px; }
.hhs-bm-redacted-bar--short { width: 35%; }
.hhs-bm-redacted-mark { font-family: var(--hhs-font-mono); font-size: 0.78rem; font-weight: 500; color: var(--hhs-red); letter-spacing: 0.04em; }
.hhs-bm-channel-cell-label { font-family: var(--hhs-font-mono); font-size: 0.7rem; letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-charcoal); opacity: 0.7; }
.hhs-bm-channel-cell-value { font-family: var(--hhs-font-sans); font-weight: 600; font-size: var(--hhs-body); color: var(--hhs-black); }

/* Four-layer hairline rows */
.hhs-bm-layers { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 2.4vw, 2.5rem) clamp(2rem, 3.5vw, 3.5rem); }
.hhs-bm-layer { padding-top: 1rem; border-top: 2px solid var(--hhs-red); display: flex; flex-direction: column; gap: 0.5rem; }
.hhs-bm-layer__num { font-family: var(--hhs-font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--hhs-red); font-weight: 500; }
.hhs-bm-layer__index { font-family: var(--hhs-font-mono); font-size: 0.72rem; letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-charcoal); opacity: 0.7; margin: 0; }
.hhs-bm-layer__title { font-family: var(--hhs-font-sans); font-weight: 700; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--hhs-black); margin: 0.15rem 0; }
.hhs-bm-layer__body { font-size: var(--hhs-body); line-height: 1.6; color: var(--hhs-charcoal); margin: 0; }

/* --- S3: Output (Bands + Tiles) ------------------------------------------ */
.hhs-bm-section--output { background: linear-gradient(180deg, var(--hhs-paper-1) 0%, var(--hhs-paper-0) 100%); }
.hhs-bm-bands { list-style: none; padding: 0; margin: 0 0 clamp(2rem, 3vh, 3rem) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid rgba(14, 14, 16, 0.08); background: var(--hhs-paper-0); border-radius: 10px; overflow: hidden; }
.hhs-bm-band { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.45rem; position: relative; border-right: 1px solid rgba(14, 14, 16, 0.06); }
.hhs-bm-band:last-child { border-right: 0; }
.hhs-bm-band__accent { position: absolute; left: 0; top: 0; right: 0; height: 6px; }
.hhs-bm-band[data-band="identity-only"]    .hhs-bm-band__accent { background: var(--hhs-red); }
.hhs-bm-band[data-band="reputation-driven"] .hhs-bm-band__accent { background: var(--hhs-black); }
.hhs-bm-band[data-band="brand-aware"]      .hhs-bm-band__accent { background: var(--hhs-cyan); }
.hhs-bm-band[data-band="compound-brand"]   .hhs-bm-band__accent { background: var(--hhs-gold); }
.hhs-bm-band__range { font-family: var(--hhs-font-mono); font-size: 0.78rem; letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-charcoal); opacity: 0.72; margin: 0.5rem 0 0 0; }
.hhs-bm-band__name { font-family: var(--hhs-font-sans); font-weight: 700; font-size: clamp(1rem, 1.3vw, 1.2rem); letter-spacing: -0.01em; color: var(--hhs-black); margin: 0; }
.hhs-bm-band__body { font-size: var(--hhs-body-sm); line-height: 1.5; color: var(--hhs-charcoal); margin: 0; }
/* Band-demo — four 3-sentence blocks, one per band, dl grid */
.hhs-bm-band-demo { list-style: none; padding: 0; margin: 0 0 clamp(2.5rem, 4vh, 4rem) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 2.4vw, 2rem) clamp(2rem, 3vw, 3rem); }
.hhs-bm-band-demo__item { display: flex; flex-direction: column; gap: 0.45rem; padding-top: 0.85rem; border-top: 1px solid rgba(14, 14, 16, 0.12); }
.hhs-bm-band-demo__name { font-family: var(--hhs-font-sans); font-weight: 700; font-size: var(--hhs-body); letter-spacing: -0.005em; color: var(--hhs-black); margin: 0; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.hhs-bm-band-demo__range { font-family: var(--hhs-font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-charcoal); opacity: 0.65; }
.hhs-bm-band-demo__body { font-family: var(--hhs-font-sans); font-size: var(--hhs-body-sm); line-height: 1.55; color: var(--hhs-charcoal); margin: 0; }
@media (max-width: 767px) {
	.hhs-bm-band-demo { grid-template-columns: 1fr; }
}
.hhs-bm-tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2vw, 1.85rem); }
.hhs-bm-tile { background: var(--hhs-paper-0); border: 1px solid rgba(14, 14, 16, 0.07); border-radius: 10px; padding: clamp(1.25rem, 2vw, 1.85rem); display: flex; flex-direction: column; gap: 0.6rem; position: relative; box-shadow: 0 8px 32px -22px rgba(14, 14, 16, 0.3); }
.hhs-bm-tile__accent { position: absolute; left: 0; top: 0; right: 0; height: 6px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.hhs-bm-tile[data-tone="red"]   .hhs-bm-tile__accent { background: var(--hhs-red); }
.hhs-bm-tile[data-tone="cyan"]  .hhs-bm-tile__accent { background: var(--hhs-cyan); }
.hhs-bm-tile[data-tone="gold"]  .hhs-bm-tile__accent { background: var(--hhs-gold); }
.hhs-bm-tile__index { font-family: var(--hhs-font-mono); font-size: 0.72rem; letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-charcoal); opacity: 0.7; margin: 0.4rem 0 0 0; }
.hhs-bm-tile[data-tone="red"]   .hhs-bm-tile__index { color: var(--hhs-red); }
.hhs-bm-tile[data-tone="cyan"]  .hhs-bm-tile__index { color: var(--hhs-cyan); }
.hhs-bm-tile[data-tone="gold"]  .hhs-bm-tile__index { color: var(--hhs-dusk-2); }
.hhs-bm-tile__title { font-family: var(--hhs-font-sans); font-weight: 700; font-size: clamp(1.15rem, 1.55vw, 1.45rem); line-height: 1.18; letter-spacing: -0.012em; color: var(--hhs-black); margin: 0; }
.hhs-bm-tile__body { font-size: var(--hhs-body-sm); line-height: 1.62; color: var(--hhs-charcoal); margin: 0; }
.hhs-bm-tile__body em { color: var(--hhs-black); font-style: italic; }

/* --- S4: Run It (tinted, form frame) ------------------------------------- */
.hhs-bm-section--run { background: var(--hhs-paper-2); }
.hhs-bm-section--run .hhs-bm-section__accent-bar { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--hhs-red); }
.hhs-bm-form { background: var(--hhs-paper-0); border-radius: 14px; padding: clamp(2rem, 3vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); position: relative; box-shadow: 0 18px 50px -28px rgba(14, 14, 16, 0.35); margin-bottom: clamp(2rem, 3vh, 3rem); }
.hhs-bm-form__accent { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--hhs-red); border-top-left-radius: 14px; border-top-right-radius: 14px; }
.hhs-bm-form__steps { list-style: none; padding: 0; margin: 0 0 1.75rem 0; display: grid; gap: clamp(1rem, 1.6vh, 1.4rem); position: relative; }
.hhs-bm-form-step { display: grid; grid-template-columns: clamp(3rem, 4vw, 3.5rem) minmax(0, 1fr); gap: clamp(0.85rem, 1.4vw, 1.25rem); align-items: baseline; }
.hhs-bm-form-step__num { font-family: var(--hhs-font-sans); font-weight: 900; font-size: clamp(2rem, 2.6vw, 2.75rem); color: var(--hhs-red); letter-spacing: -0.02em; line-height: 1; }
.hhs-bm-form-step__title { font-family: var(--hhs-font-sans); font-weight: 700; font-size: clamp(1.05rem, 1.3vw, 1.2rem); letter-spacing: -0.01em; color: var(--hhs-black); margin: 0 0 0.3rem 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.hhs-bm-form-step__opt { font-family: var(--hhs-font-mono); font-size: 0.65rem; font-weight: 400; letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: rgba(14, 14, 16, 0.60); background: rgba(14, 14, 16, 0.06); padding: 0.18rem 0.45rem; border-radius: 999px; border: 1px solid rgba(14, 14, 16, 0.15); }
.hhs-bm-form-step__body { font-size: var(--hhs-body-sm); line-height: 1.55; color: var(--hhs-charcoal); margin: 0; }
.hhs-bm-form-step--optional { opacity: 0.85; }
.hhs-bm-form__cta-row { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.5rem); flex-wrap: wrap; padding-top: 0.5rem; border-top: 1px dashed rgba(14, 14, 16, 0.1); }
.hhs-bm-form__submit { font-size: 1rem; padding: 1rem 1.5rem; }
.hhs-bm-form__note { font-family: var(--hhs-font-mono); font-size: 0.78rem; color: var(--hhs-charcoal); opacity: 0.7; letter-spacing: 0.02em; margin: 0; max-width: 42ch; }
.hhs-bm-trust { max-width: 64ch; display: flex; flex-direction: column; gap: 0.65rem; }
.hhs-bm-trust p { font-family: var(--hhs-font-sans); font-size: var(--hhs-body-sm); line-height: 1.6; color: rgba(14, 14, 16, 0.55); margin: 0; }

/* --- S5: Closing CTA (FH Black, asymmetric) ------------------------------ */
.hhs-bm-section--close { background: var(--hhs-black); color: var(--hhs-paper-0); }
.hhs-bm-close { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: end; }
.hhs-bm-close__h2 { font-family: var(--hhs-font-sans); font-weight: 900; font-size: clamp(3rem, 8vw, 7.5rem); line-height: 0.95; letter-spacing: -0.025em; color: var(--hhs-paper-0); margin: 0; }
.hhs-bm-close__right { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; max-width: 36ch; }
.hhs-bm-close__eyebrow { font-family: var(--hhs-font-mono); font-size: var(--hhs-meta); letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-cyan); margin: 0; }
.hhs-bm-close__body { font-size: var(--hhs-body-lg); line-height: 1.6; color: rgba(250, 247, 241, 0.86); margin: 0; }
.hhs-bm-close__cta { box-shadow: 0 18px 40px -16px rgba(255, 72, 74, 0.6); }

/* --- S6: Routing strip --------------------------------------------------- */
.hhs-bm-section--route { background: var(--hhs-paper-1); padding-top: clamp(2.5rem, 4vh, 3.5rem); padding-bottom: clamp(3rem, 5vh, 4.5rem); }
.hhs-bm-route { display: grid; grid-template-columns: auto auto 1fr auto; gap: clamp(1rem, 2vw, 1.75rem); align-items: center; padding: clamp(1.25rem, 2.5vh, 1.75rem) 0; border-top: 1px solid rgba(14, 14, 16, 0.12); border-bottom: 1px solid rgba(14, 14, 16, 0.12); }
.hhs-bm-route__eyebrow { font-family: var(--hhs-font-mono); font-size: var(--hhs-meta); letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-charcoal); opacity: 0.78; white-space: nowrap; }
.hhs-bm-route__divider { width: 1px; height: 1.5rem; background: rgba(14, 14, 16, 0.18); }
.hhs-bm-route__body { font-size: var(--hhs-body); color: var(--hhs-charcoal); margin: 0; max-width: 56ch; }
.hhs-bm-route__cta { font-family: var(--hhs-font-sans); font-weight: 600; font-size: var(--hhs-body); color: var(--hhs-charcoal); text-decoration: none; border-bottom: 1px solid rgba(14, 14, 16, 0.35); padding-bottom: 0.1rem; white-space: nowrap; transition: color 0.25s var(--hhs-ease-out); }
.hhs-bm-route__cta:hover { color: var(--hhs-red); }

/* --- BM Responsive: Tablet (≤1024) --------------------------------------- */
@media (max-width: 1024px) {
	.hhs-bm-hero__mid { grid-template-columns: 1fr; gap: clamp(2rem, 4vh, 3rem); }
	.hhs-bm-twoup { grid-template-columns: 1fr; }
	.hhs-bm-layers { grid-template-columns: 1fr; }
	.hhs-bm-tiles { grid-template-columns: 1fr; }
	.hhs-bm-close { grid-template-columns: 1fr; gap: 1.5rem; }
	.hhs-bm-route { grid-template-columns: 1fr; gap: 0.85rem; align-items: flex-start; }
	.hhs-bm-route__divider { display: none; }
}

/* --- BM Responsive: Mobile (≤640) ---------------------------------------- */
@media (max-width: 640px) {
	.hhs-bm-bands { grid-template-columns: 1fr; }
	.hhs-bm-band { border-right: 0; border-bottom: 1px solid rgba(14, 14, 16, 0.06); }
	.hhs-bm-band:last-child { border-bottom: 0; }
	.hhs-bm-preview__meta div { grid-template-columns: 1fr; gap: 0.2rem; }
	.hhs-bm-form-step { grid-template-columns: auto 1fr; }
	.hhs-bm-section { padding: clamp(3rem, 6vh, 5rem) 0; }
	.hhs-bm-spine__label { display: none; }
	.hhs-bm-spine__link { padding: 0.45rem 0.7rem; }
}

/* --- BM grid overflow protection ----------------------------------------- */
.hhs-bm-hero__mid > *, .hhs-bm-twoup > *, .hhs-bm-layers > *,
.hhs-bm-bands > *, .hhs-bm-tiles > *, .hhs-bm-close > *,
.hhs-bm-route > * { min-width: 0; }
.hhs-bm-section p { max-width: min(72ch, 100%); }
.hhs-bm-section .hhs-bm-section__h2, .hhs-bm-section .hhs-bm-close__h2,
.hhs-bm-section .hhs-bm-hero__h1 { max-width: none; }

/* --- BM Illustrative pass ------------------------------------------------ */

/* 1. Paper grain */
.hhs-instrument--bm { position: relative; isolation: isolate; }
.hhs-instrument--bm::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 240px 240px; }
.hhs-instrument--bm > * { position: relative; z-index: 1; }

/* 2. Hero preview backdrop */
.hhs-bm-preview::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.18; background-image: radial-gradient(ellipse 60% 50% at 18% 26%, transparent 38%, rgba(95, 208, 223, 0.45) 39%, transparent 40%), radial-gradient(ellipse 60% 50% at 18% 26%, transparent 48%, rgba(95, 208, 223, 0.30) 49%, transparent 50%), radial-gradient(ellipse 60% 50% at 18% 26%, transparent 60%, rgba(95, 208, 223, 0.22) 61%, transparent 62%), radial-gradient(ellipse 80% 60% at 88% 80%, transparent 32%, rgba(255, 72, 74, 0.18) 33%, transparent 34%), radial-gradient(ellipse 80% 60% at 88% 80%, transparent 44%, rgba(255, 72, 74, 0.12) 45%, transparent 46%); z-index: 0; }
.hhs-bm-preview > * { position: relative; z-index: 1; }

/* 3. Score gradient ribbon */
.hhs-bm-ribbon { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin: 0 0 1.5rem 0; max-width: 100%; }
.hhs-bm-ribbon__scale { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--hhs-red) 0%, var(--hhs-red) 25%, var(--hhs-charcoal) 25%, var(--hhs-charcoal) 50%, var(--hhs-cyan) 50%, var(--hhs-cyan) 75%, var(--hhs-gold) 75%, var(--hhs-gold) 100%); position: relative; transform-origin: left center; transform: scaleX(0.001); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 1px 0 rgba(14, 14, 16, 0.06) inset; }
.hhs-bm-ribbon.is-revealed .hhs-bm-ribbon__scale { transform: scaleX(1); }
.hhs-bm-ribbon__ticks { display: grid; grid-template-columns: repeat(5, 1fr); font-family: var(--hhs-font-mono); font-size: 0.7rem; letter-spacing: var(--hhs-tracking-mono); color: var(--hhs-charcoal); opacity: 0.65; }
.hhs-bm-ribbon__tick { display: inline-block; position: relative; padding-top: 0.35rem; }
.hhs-bm-ribbon__tick::before { content: ''; position: absolute; left: 0; top: -0.5rem; height: 0.35rem; width: 1px; background: var(--hhs-charcoal); opacity: 0.35; }
.hhs-bm-ribbon__tick:last-child { text-align: right; }
.hhs-bm-ribbon__tick:last-child::before { left: auto; right: 0; }

/* 4. Layer-row marginalia */
.hhs-bm-layer__ornament { width: 36px; height: 36px; color: var(--hhs-red); opacity: 0.82; margin-bottom: 0.25rem; display: block; }
.hhs-bm-layer__ornament svg { width: 100%; height: 100%; display: block; }

/* 5. Channel-table dot-leaders */
.hhs-bm-channel-table__row::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.4rem; height: 0; border-top: 1px dashed rgba(14, 14, 16, 0.22); pointer-events: none; }
.hhs-bm-channel-table__row:has(.hhs-bm-channel-table__cell--redacted)::after { border-color: rgba(255, 72, 74, 0.35); }

/* 6. Form-step progression hairline */
.hhs-bm-form__steps::before { content: ''; position: absolute; left: clamp(1.45rem, 1.85vw, 1.7rem); top: 1.5rem; bottom: 1.5rem; width: 1px; background: linear-gradient(180deg, transparent 0%, rgba(39, 96, 146, 0.22) 12%, rgba(39, 96, 146, 0.22) 88%, transparent 100%); pointer-events: none; z-index: 0; }
.hhs-bm-form__steps .hhs-bm-form-step__num { position: relative; z-index: 1; background: var(--hhs-paper-0); padding: 0 0.15rem; border-radius: 4px; }

/* --- BM Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.hhs-bm-ribbon__scale { transition: none; transform: scaleX(1); }
	.hhs-instrument--bm::before { background-image: none; }
	.hhs-bm-spine__link, .hhs-bm-route__cta, .hhs-bm-cta-primary { transition: none; }
}

/* ============================================================================
 * INDEPENDENTS PAGE — v1.6.1
 * Audience page: three tension cards + closing CTA.
 * Selectors scoped under .hhs-ind-*. Never modifies global tokens.
 * Illustrative pass: paper grain only (no hero preview artifact, no form).
 * ============================================================================ */

/* --- Page shell + paper grain -------------------------------------------- */
.hhs-ind { background: var(--hhs-paper-1); color: var(--hhs-black); overflow-x: hidden; position: relative; isolation: isolate; }
.hhs-ind::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 240px 240px; }
.hhs-ind > * { position: relative; z-index: 1; }

.hhs-ind-container { max-width: 1320px; margin: 0 auto; padding: 0 var(--hhs-pad-page); width: 100%; }

/* --- Header -------------------------------------------------------------- */
.hhs-ind-header { padding: clamp(7rem, 12vh, 11rem) 0 clamp(4rem, 7vh, 6rem); background: radial-gradient(ellipse at 20% 0%, rgba(255, 72, 74, 0.04), transparent 55%), var(--hhs-paper-1); }
.hhs-ind-datum { font-family: var(--hhs-font-mono); font-size: var(--hhs-meta); letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-charcoal); opacity: 0.78; margin: 0 0 1.5rem 0; display: inline-flex; align-items: center; gap: 0.5em; }
.hhs-ind-datum::before { content: ''; width: 2.4rem; height: 1px; background: currentColor; opacity: 0.55; }
.hhs-ind-eyebrow { font-family: var(--hhs-font-sans); font-weight: 500; font-size: var(--hhs-meta); letter-spacing: 0.18em; text-transform: uppercase; color: var(--hhs-red); margin: 0 0 1rem 0; }
.hhs-ind-header__h1 { font-family: var(--hhs-font-sans); font-weight: 900; font-size: clamp(3rem, 7.5vw, 7rem); line-height: 0.98; letter-spacing: -0.025em; color: var(--hhs-black); margin: 0.5rem 0 1rem 0; }
.hhs-ind-header__h2 { font-family: var(--hhs-font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.18; letter-spacing: -0.005em; color: var(--hhs-charcoal); margin: 0 0 1.5rem 0; max-width: 32ch; }
.hhs-ind-header__body { font-size: var(--hhs-body-lg); line-height: 1.65; color: var(--hhs-charcoal); max-width: 56ch; margin: 0; }

/* --- Tension cards ------------------------------------------------------- */
.hhs-ind-tensions { padding: clamp(4.5rem, 8vh, 7rem) 0; position: relative; }
.hhs-ind-tensions__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2vw, 1.85rem); }

.hhs-ind-tension { background: var(--hhs-paper-0); border: 1px solid rgba(14, 14, 16, 0.07); border-radius: 14px; padding: clamp(1.5rem, 2.2vw, 2rem); display: flex; flex-direction: column; gap: 0.75rem; position: relative; box-shadow: 0 12px 36px -24px rgba(14, 14, 16, 0.3); }
.hhs-ind-tension__accent { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--hhs-red); border-top-left-radius: 14px; border-top-right-radius: 14px; }
.hhs-ind-tension__accent--black { background: var(--hhs-black); }
.hhs-ind-tension__accent--cyan { background: var(--hhs-cyan); }

.hhs-ind-tension__tag { font-family: var(--hhs-font-mono); font-size: 0.72rem; letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-charcoal); opacity: 0.72; margin: 0.3rem 0 0 0; }
.hhs-ind-tension[data-tension="capacity"] .hhs-ind-tension__tag { color: var(--hhs-red); }
.hhs-ind-tension[data-tension="spend"]    .hhs-ind-tension__tag { color: var(--hhs-charcoal); }
.hhs-ind-tension[data-tension="sale"]     .hhs-ind-tension__tag { color: var(--hhs-cyan); }

.hhs-ind-tension__quote { font-family: var(--hhs-font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.22; color: var(--hhs-black); margin: 0; padding: 0; border: 0; }
.hhs-ind-tension__body { font-size: var(--hhs-body-sm); line-height: 1.62; color: var(--hhs-charcoal); margin: 0; }
.hhs-ind-tension__diagnosis { font-family: var(--hhs-font-sans); font-weight: 600; font-size: var(--hhs-body-sm); line-height: 1.5; color: var(--hhs-black); margin: 0; padding-top: 0.5rem; border-top: 1px dashed rgba(14, 14, 16, 0.12); }
.hhs-ind-tension__cta { margin-top: auto; padding-top: 0.5rem; }

/* --- Closing CTA --------------------------------------------------------- */
.hhs-ind-close { padding: clamp(4.5rem, 8vh, 7rem) 0; background: var(--hhs-paper-2); position: relative; }
.hhs-ind-close__inner { max-width: 56ch; }
.hhs-ind-close__eyebrow { font-family: var(--hhs-font-mono); font-size: var(--hhs-meta); letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-charcoal); opacity: 0.78; margin: 0 0 1rem 0; }
.hhs-ind-close__h2 { font-family: var(--hhs-font-sans); font-weight: 900; font-size: clamp(1.75rem, 3.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--hhs-black); margin: 0 0 1rem 0; }
.hhs-ind-close__body { font-size: var(--hhs-body-lg); line-height: 1.6; color: var(--hhs-charcoal); margin: 0 0 1.5rem 0; }
.hhs-ind-close__ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hhs-btn--text-link { font-family: var(--hhs-font-sans); font-weight: 600; font-size: var(--hhs-body); color: var(--hhs-navy); text-decoration: none; border-bottom: 1px solid var(--hhs-navy); padding-bottom: 0.1rem; transition: color 0.25s var(--hhs-ease-out); }
.hhs-btn--text-link:hover { color: var(--hhs-red); }

/* --- Responsive: Tablet (≤1024) ------------------------------------------ */
@media (max-width: 1024px) {
	.hhs-ind-tensions__grid { grid-template-columns: 1fr; max-width: 640px; }
}

/* --- Grid protection ----------------------------------------------------- */
.hhs-ind-tensions__grid > * { min-width: 0; }
.hhs-ind p { max-width: min(72ch, 100%); }
.hhs-ind .hhs-ind-header__h1 { max-width: none; }

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.hhs-ind::before { background-image: none; }
	.hhs-btn--text-link { transition: none; }
}

/* ============================================================================
 * PORTFOLIO INTEGRATORS PAGE — v1.6.2
 * Enterprise tier. Muted palette (Navy+Tan), flatter hierarchy, diagnostic
 * vocabulary. Selectors scoped under .hhs-pi-*. Never modifies global tokens.
 * Illustrative pass: paper grain only.
 * ============================================================================ */

/* --- Page shell + paper grain -------------------------------------------- */
.hhs-pi { background: var(--hhs-paper-1); color: var(--hhs-black); overflow-x: hidden; position: relative; isolation: isolate; }
.hhs-pi::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 240px 240px; }
.hhs-pi > * { position: relative; z-index: 1; }

.hhs-pi-container { max-width: 1320px; margin: 0 auto; padding: 0 var(--hhs-pad-page); width: 100%; }

/* --- Header (muted — navy gradient instead of red) ----------------------- */
.hhs-pi-header { padding: clamp(7rem, 12vh, 11rem) 0 clamp(4rem, 7vh, 6rem); background: radial-gradient(ellipse at 20% 0%, rgba(39, 96, 146, 0.06), transparent 55%), var(--hhs-paper-1); }
.hhs-pi-datum { font-family: var(--hhs-font-mono); font-size: var(--hhs-meta); letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-charcoal); opacity: 0.78; margin: 0 0 1.5rem 0; display: inline-flex; align-items: center; gap: 0.5em; }
.hhs-pi-datum::before { content: ''; width: 2.4rem; height: 1px; background: currentColor; opacity: 0.55; }
.hhs-pi-eyebrow { font-family: var(--hhs-font-sans); font-weight: 500; font-size: var(--hhs-meta); letter-spacing: 0.18em; text-transform: uppercase; color: var(--hhs-charcoal); margin: 0 0 1rem 0; }
.hhs-pi-header__h1 { font-family: var(--hhs-font-sans); font-weight: 900; font-size: clamp(2.5rem, 6.5vw, 6rem); line-height: 1.0; letter-spacing: -0.025em; color: var(--hhs-black); margin: 0.5rem 0 1rem 0; }
.hhs-pi-header__h2 { font-family: var(--hhs-font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 2.1rem); line-height: 1.22; letter-spacing: -0.005em; color: var(--hhs-charcoal); margin: 0 0 1.5rem 0; max-width: 40ch; }
.hhs-pi-header__body { font-size: var(--hhs-body-lg); line-height: 1.65; color: var(--hhs-charcoal); max-width: 56ch; margin: 0 0 2rem 0; }
.hhs-pi-header__ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* --- Sections shell ------------------------------------------------------ */
.hhs-pi-section { padding: clamp(4.5rem, 8vh, 7rem) 0; position: relative; }

/* Asymmetric editorial section header (eyebrow full-width, H2 left, lead bottom-aligned right).
 * Replaces the previous full-width 56ch-cap stack which wrapped editorially and read as wall-of-text. */
.hhs-pi-section__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(2.5rem, 5vw, 5rem);
	align-items: end;
	margin-bottom: clamp(3rem, 6vh, 5rem);
	max-width: 100%;
}
.hhs-pi-section__head > .hhs-pi-eyebrow { grid-column: 1 / -1; margin: 0 0 0.65rem 0; }
.hhs-pi-section__h2 { grid-column: 1; font-family: var(--hhs-font-sans); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1.08; letter-spacing: -0.018em; color: var(--hhs-black); max-width: 24ch; margin: 0; }
.hhs-pi-section__lead { grid-column: 2; font-size: var(--hhs-body-lg); line-height: 1.6; color: var(--hhs-charcoal); max-width: 54ch; margin: 0; align-self: end; }
@media (max-width: 1023px) {
	.hhs-pi-section__head { grid-template-columns: 1fr; align-items: start; row-gap: 1.25rem; }
	.hhs-pi-section__h2, .hhs-pi-section__lead { grid-column: 1; max-width: 100%; align-self: start; }
}

/* --- Numbered rows base (Why-not uses this, Problem + Diagnostic override below) ------ */
.hhs-pi-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 2.5vw, 2.5rem) clamp(2.5rem, 4vw, 4rem); }

/* Chapter 01 PROBLEM — editorial vertical bands.
 * Three full-width bands stacked. Each band splits [numeral+ornament | title | body] into
 * 3 columns with a hairline above. Reads as magazine article structure. Title constrained
 * to ~22ch, body constrained to ~52ch — no wall-of-text, no 3-rows-in-2-cols dead space. */
.hhs-pi-section#pi-problem .hhs-pi-rows { grid-template-columns: 1fr; gap: 0; }
.hhs-pi-section#pi-problem .hhs-pi-row {
	display: grid;
	grid-template-columns: minmax(0, 96px) minmax(0, 1fr) minmax(0, 1.3fr);
	grid-template-rows: auto auto;
	column-gap: clamp(2rem, 4vw, 4rem);
	row-gap: 0.5rem;
	padding: clamp(2.5rem, 5vh, 4rem) 0;
	border-top: 1px solid rgba(14, 14, 16, 0.14);
	align-items: start;
}
.hhs-pi-section#pi-problem .hhs-pi-row__ornament { grid-column: 1; grid-row: 1; width: 44px; height: 44px; color: var(--hhs-charcoal); display: block; }
.hhs-pi-section#pi-problem .hhs-pi-row__num { grid-column: 1; grid-row: 2; font-family: var(--hhs-font-mono); font-size: 0.75rem; letter-spacing: 0.16em; color: var(--hhs-red); text-transform: uppercase; font-weight: 500; padding-top: 0.25rem; border-top: 0; }
.hhs-pi-section#pi-problem .hhs-pi-row__copy { display: contents; }
.hhs-pi-section#pi-problem .hhs-pi-row__title { grid-column: 2; grid-row: 1 / -1; font-size: clamp(1.5rem, 2.2vw, 1.95rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; color: var(--hhs-black); max-width: 22ch; margin: 0; }
.hhs-pi-section#pi-problem .hhs-pi-row__body { grid-column: 3; grid-row: 1 / -1; font-size: var(--hhs-body); line-height: 1.6; color: var(--hhs-charcoal); max-width: 54ch; margin: 0; }
@media (max-width: 1023px) {
	.hhs-pi-section#pi-problem .hhs-pi-row { grid-template-columns: 1fr; row-gap: 1rem; }
	.hhs-pi-section#pi-problem .hhs-pi-row__ornament,
	.hhs-pi-section#pi-problem .hhs-pi-row__num,
	.hhs-pi-section#pi-problem .hhs-pi-row__title,
	.hhs-pi-section#pi-problem .hhs-pi-row__body { grid-column: 1; grid-row: auto; max-width: 100%; }
}

/* Chapter 02 DIAGNOSTIC — bento asymmetric grid.
 * Item 01 (the ranked roster, hero deliverable) spans 2/3 width. Items 02-05 sit in
 * 1/3 columns. Reads as "the diagnostic delivers this" with editorial weight. No cards.
 * Hairline-only separators. Distinguished from Problem section's vertical-bands rhythm. */
.hhs-pi-section#pi-diagnostic .hhs-pi-rows {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(2rem, 4vw, 4rem);
	row-gap: clamp(2.5rem, 5vh, 4rem);
	grid-template-areas:
		"one one two"
		"three four five";
	padding-top: clamp(1.5rem, 3vh, 2.5rem);
	border-top: 1px solid rgba(14, 14, 16, 0.14);
}
.hhs-pi-section#pi-diagnostic .hhs-pi-row { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid rgba(14, 14, 16, 0.14); }
.hhs-pi-section#pi-diagnostic .hhs-pi-row:nth-child(1) { grid-area: one; }
.hhs-pi-section#pi-diagnostic .hhs-pi-row:nth-child(2) { grid-area: two; }
.hhs-pi-section#pi-diagnostic .hhs-pi-row:nth-child(3) { grid-area: three; }
.hhs-pi-section#pi-diagnostic .hhs-pi-row:nth-child(4) { grid-area: four; }
.hhs-pi-section#pi-diagnostic .hhs-pi-row:nth-child(5) { grid-area: five; }
.hhs-pi-section#pi-diagnostic .hhs-pi-row__num { font-family: var(--hhs-font-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--hhs-red); text-transform: uppercase; font-weight: 500; }
.hhs-pi-section#pi-diagnostic .hhs-pi-row__title { font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.22; font-weight: 700; letter-spacing: -0.005em; color: var(--hhs-black); margin: 0; max-width: 24ch; }
.hhs-pi-section#pi-diagnostic .hhs-pi-row__body { font-size: var(--hhs-body-sm); line-height: 1.55; color: var(--hhs-charcoal); margin: 0; max-width: 42ch; }
/* Item 01 is the hero deliverable (ranked roster) — larger type, wider body, signals primary output. */
.hhs-pi-section#pi-diagnostic .hhs-pi-row:nth-child(1) .hhs-pi-row__title { font-size: clamp(1.5rem, 2.2vw, 1.95rem); max-width: 32ch; }
.hhs-pi-section#pi-diagnostic .hhs-pi-row:nth-child(1) .hhs-pi-row__body { font-size: var(--hhs-body); max-width: 60ch; }
@media (max-width: 1023px) {
	.hhs-pi-section#pi-diagnostic .hhs-pi-rows { grid-template-columns: 1fr; grid-template-areas: "one" "two" "three" "four" "five"; row-gap: 2rem; }
	.hhs-pi-section#pi-diagnostic .hhs-pi-row__title,
	.hhs-pi-section#pi-diagnostic .hhs-pi-row__body { max-width: 100%; }
}

/* Why-not-your-agency-or-McKinsey differentiation section.
 * Three vertical items stacked full-width with hairline-top, distinguishing from .hhs-pi-rows grid. */
.hhs-pi-section--differentiation { background: var(--hhs-paper-2); }
.hhs-pi-diff { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 2.5vh, 2.5rem); }
.hhs-pi-diff__item { padding-top: clamp(1rem, 1.5vh, 1.5rem); border-top: 2px solid var(--hhs-charcoal); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.hhs-pi-diff__title { font-family: var(--hhs-font-sans); font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--hhs-black); margin: 0; grid-column: 1; }
.hhs-pi-diff__body { font-size: var(--hhs-body); line-height: 1.6; color: var(--hhs-charcoal); margin: 0; grid-column: 2; }
@media (max-width: 1023px) {
	.hhs-pi-diff__item { grid-template-columns: 1fr; row-gap: 0.65rem; }
	.hhs-pi-diff__title, .hhs-pi-diff__body { grid-column: 1; }
}

/* Roster mosaic background tint — break the paper-grain monotony between Problem and Diagnostic */
.hhs-pi-roster { background: var(--hhs-paper-2); }

/* === PRESSURE BEAT — internal/philosophical problem moment (after Chapter 01) === */
.hhs-pi-pressure { padding: clamp(3.5rem, 7vh, 6rem) 0; background: var(--hhs-paper-1); position: relative; }
.hhs-pi-pressure .hhs-pi-container { border-top: 1px solid rgba(14, 14, 16, 0.12); padding-top: clamp(2.5rem, 5vh, 4rem); text-align: center; }
.hhs-pi-pressure__quote { font-family: var(--hhs-font-serif); font-size: clamp(1.85rem, 4.2vw, 3.5rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0 auto; max-width: 32ch; }
.hhs-pi-pressure__line { display: block; }
.hhs-pi-pressure__line--thesis { color: var(--hhs-black); font-style: normal; }
.hhs-pi-pressure__line--antithesis { color: var(--hhs-italic-editorial); font-style: italic; }
.hhs-pi-pressure__caption { font-family: var(--hhs-font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: rgba(14, 14, 16, 0.55); margin: clamp(1.5rem, 3vh, 2.5rem) 0 0; padding-left: clamp(1.25rem, 2.5vw, 2rem); text-align: left; }
@media (max-width: 1023px) {
	.hhs-pi-pressure .hhs-pi-container { text-align: left; }
	.hhs-pi-pressure__quote { margin-left: 0; max-width: 100%; }
	.hhs-pi-pressure__caption { padding-left: 0; }
}

/* === MID-PAGE CTA — lower-friction cross-promo inside Why-not section === */
.hhs-pi-midcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(0.85rem, 2vw, 1.5rem); margin-top: clamp(2.5rem, 5vh, 4rem); padding-top: clamp(1.5rem, 3vh, 2.5rem); border-top: 1px solid rgba(14, 14, 16, 0.14); }
.hhs-pi-midcta__pretext { font-family: var(--hhs-font-serif); font-style: italic; font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--hhs-italic-editorial); margin: 0; max-width: 38ch; }
@media (max-width: 767px) {
	.hhs-pi-midcta { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* === STAKES SECTION — what happens if you wait (red-accent) === */
.hhs-pi-section--stakes { background: var(--hhs-paper-1); }
.hhs-pi-eyebrow--alert { color: var(--hhs-red); }
.hhs-pi-stakes__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.hhs-pi-stakes__row { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr) minmax(0, 1.3fr); column-gap: clamp(2rem, 4vw, 4rem); padding: clamp(2.25rem, 4.5vh, 3.5rem) 0; border-top: 2px solid var(--hhs-red); align-items: start; }
.hhs-pi-stakes__num { grid-column: 1; font-family: var(--hhs-font-mono); font-size: 0.75rem; letter-spacing: 0.16em; color: var(--hhs-red); text-transform: uppercase; font-weight: 500; padding-top: 0.35rem; }
.hhs-pi-stakes__copy { display: contents; }
.hhs-pi-stakes__title { grid-column: 2; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.18; font-weight: 700; letter-spacing: -0.012em; color: var(--hhs-black); max-width: 22ch; margin: 0; }
.hhs-pi-stakes__body { grid-column: 3; font-size: var(--hhs-body); line-height: 1.6; color: var(--hhs-charcoal); max-width: 54ch; margin: 0; }
.hhs-pi-stakes__caption { font-family: var(--hhs-font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-red); margin: clamp(2rem, 4vh, 3rem) 0 0; text-align: left; }
@media (max-width: 1023px) {
	.hhs-pi-stakes__row { grid-template-columns: 1fr; row-gap: 0.85rem; }
	.hhs-pi-stakes__num, .hhs-pi-stakes__title, .hhs-pi-stakes__body { grid-column: 1; max-width: 100%; }
}

/* === SAMPLE-OUTPUT DASHBOARD — concrete deliverable preview in Diagnostic section === */
.hhs-pi-sample { background: var(--hhs-paper-0); border: 1px solid rgba(14, 14, 16, 0.1); padding: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(3rem, 5vh, 4rem); position: relative; box-shadow: 0 24px 60px -40px rgba(14, 14, 16, 0.35); }
.hhs-pi-sample__head { margin-bottom: clamp(1.5rem, 3vh, 2.25rem); display: flex; flex-direction: column; gap: 0.5rem; }
.hhs-pi-sample__eyebrow { font-family: var(--hhs-font-mono); font-size: 0.7rem; letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-red); font-weight: 500; margin: 0; }
.hhs-pi-sample__title { font-family: var(--hhs-font-serif); font-style: italic; font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.2; color: var(--hhs-italic-editorial); margin: 0; }
.hhs-pi-sample__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; }
.hhs-pi-sample__chart, .hhs-pi-sample__list-panel { background: var(--hhs-paper-1); border: 1px solid rgba(14, 14, 16, 0.08); padding: clamp(1.25rem, 2.5vw, 1.75rem); display: flex; flex-direction: column; gap: 0.85rem; min-height: 0; }
.hhs-pi-sample__panel-label { font-family: var(--hhs-font-mono); font-size: 0.65rem; letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: rgba(14, 14, 16, 0.6); font-weight: 500; margin: 0; }
.hhs-pi-sample__bars { display: flex; align-items: flex-end; gap: 0.55rem; height: 130px; padding-top: 0.5rem; border-bottom: 1px solid rgba(14, 14, 16, 0.18); }
.hhs-pi-sample__bar { flex: 1 1 0; min-width: 0; border-radius: 1px 1px 0 0; background: var(--hhs-charcoal); opacity: 0.32; }
.hhs-pi-sample__bar--low { opacity: 0.22; }
.hhs-pi-sample__bar--mid { opacity: 0.45; }
.hhs-pi-sample__bar--high { opacity: 0.65; background: var(--hhs-charcoal); }
.hhs-pi-sample__bar--outlier { background: var(--hhs-red); opacity: 1; }
.hhs-pi-sample__panel-caption { font-family: var(--hhs-font-serif); font-style: italic; font-size: 0.9rem; line-height: 1.35; color: var(--hhs-italic-editorial); margin: 0; }
.hhs-pi-sample__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.hhs-pi-sample__list-item { display: grid; grid-template-columns: minmax(0, 32px) minmax(0, 1fr); column-gap: 0.85rem; padding-top: 0.6rem; border-top: 1px solid rgba(14, 14, 16, 0.12); }
.hhs-pi-sample__list-item:first-child { padding-top: 0; border-top: 0; }
.hhs-pi-sample__list-num { font-family: var(--hhs-font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; color: var(--hhs-red); padding-top: 0.15rem; }
.hhs-pi-sample__list-copy { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.hhs-pi-sample__list-title { font-family: var(--hhs-font-sans); font-weight: 600; font-size: 0.9rem; line-height: 1.35; color: var(--hhs-black); }
.hhs-pi-sample__list-meta { font-family: var(--hhs-font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--hhs-charcoal); opacity: 0.78; line-height: 1.35; }
.hhs-pi-sample__redact { display: inline-block; background: rgba(14, 14, 16, 0.84); color: transparent; padding: 0 0.35rem; border-radius: 2px; line-height: 1.1; vertical-align: baseline; }
.hhs-pi-sample__footer { display: flex; flex-direction: column; gap: 0.35rem; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); padding-top: clamp(1rem, 2vh, 1.5rem); border-top: 1px solid rgba(14, 14, 16, 0.12); }
.hhs-pi-sample__stat-label { font-family: var(--hhs-font-mono); font-size: 0.65rem; letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: rgba(14, 14, 16, 0.6); font-weight: 500; margin: 0; }
.hhs-pi-sample__stat { font-family: var(--hhs-font-sans); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.4; color: var(--hhs-black); margin: 0; }
.hhs-pi-sample__stat strong { font-weight: 800; }
@media (max-width: 1023px) {
	.hhs-pi-sample__grid { grid-template-columns: 1fr; }
	.hhs-pi-sample__bars { height: 100px; }
}

/* === SUCCESS VISION SECTION — what the portfolio looks like in two quarters === */
.hhs-pi-section--success { background: var(--hhs-paper-2); }
.hhs-pi-success__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.hhs-pi-success__item { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); padding: clamp(2rem, 4vh, 3rem) 0; border-top: 1px solid rgba(14, 14, 16, 0.14); align-items: start; }
.hhs-pi-success__num { grid-column: 1; font-family: var(--hhs-font-mono); font-size: 0.78rem; letter-spacing: 0.16em; color: var(--hhs-italic-editorial); text-transform: uppercase; font-weight: 500; padding-top: 0.35rem; }
.hhs-pi-success__body { grid-column: 2; font-family: var(--hhs-font-serif); font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.55rem); line-height: 1.35; color: var(--hhs-black); max-width: 64ch; margin: 0; }
.hhs-pi-success__cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(0.85rem, 2vw, 1.5rem); margin-top: clamp(3rem, 5vh, 4rem); padding-top: clamp(2rem, 3vh, 2.75rem); border-top: 2px solid var(--hhs-charcoal); }
.hhs-pi-success__cta-pretext { font-family: var(--hhs-font-serif); font-style: italic; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--hhs-italic-editorial); margin: 0; max-width: 40ch; }
@media (max-width: 1023px) {
	.hhs-pi-success__item { grid-template-columns: 1fr; row-gap: 0.85rem; }
	.hhs-pi-success__num, .hhs-pi-success__body { grid-column: 1; max-width: 100%; }
}
@media (max-width: 767px) {
	.hhs-pi-success__cta-band { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
.hhs-pi-row { padding-top: 1rem; border-top: 2px solid var(--hhs-charcoal); display: flex; flex-direction: column; gap: 0.5rem; }
.hhs-pi-row__num { font-family: var(--hhs-font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--hhs-charcoal); font-weight: 500; }
.hhs-pi-row__title { font-family: var(--hhs-font-sans); font-weight: 700; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--hhs-black); margin: 0; }
.hhs-pi-row__body { font-size: var(--hhs-body); line-height: 1.6; color: var(--hhs-charcoal); margin: 0; }

/* --- Signal section (stat block) ----------------------------------------- */
.hhs-pi-section--signal { background: var(--hhs-paper-2); }
.hhs-pi-signal__eyebrow { font-family: var(--hhs-font-mono); font-size: var(--hhs-meta); letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-charcoal); opacity: 0.78; margin: 0 0 clamp(2rem, 3vh, 3rem) 0; }
.hhs-pi-signal__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 3.5rem); margin-bottom: clamp(2rem, 3vh, 3rem); }
.hhs-pi-signal__stat { padding-top: 1rem; border-top: 2px solid var(--hhs-tan); }
.hhs-pi-signal__name { font-family: var(--hhs-font-sans); font-weight: 900; font-size: clamp(1.25rem, 1.8vw, 1.6rem); color: var(--hhs-black); margin: 0 0 0.5rem 0; }
.hhs-pi-signal__desc { font-size: var(--hhs-body); line-height: 1.6; color: var(--hhs-charcoal); margin: 0; }
.hhs-pi-signal__closing { font-family: var(--hhs-font-serif); font-style: italic; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--hhs-italic-editorial); max-width: 48ch; margin: 0; }

/* --- Closing CTA (dark, tan accent) -------------------------------------- */
.hhs-pi-section--close { background: var(--hhs-black); color: var(--hhs-paper-0); }
.hhs-pi-close { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: end; }
.hhs-pi-close__h2 { font-family: var(--hhs-font-sans); font-weight: 900; font-size: clamp(2.5rem, 7vw, 6.5rem); line-height: 0.95; letter-spacing: -0.025em; color: var(--hhs-paper-0); margin: 0; }
.hhs-pi-close__right { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; max-width: 36ch; }
.hhs-pi-close__eyebrow { font-family: var(--hhs-font-mono); font-size: var(--hhs-meta); letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-tan); margin: 0; }
.hhs-pi-close__body { font-size: var(--hhs-body-lg); line-height: 1.6; color: rgba(250, 247, 241, 0.86); margin: 0; }
.hhs-pi-close__ctas { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.hhs-pi-close__link { color: rgba(250, 247, 241, 0.72); border-color: rgba(250, 247, 241, 0.35); }
.hhs-pi-close__link:hover { color: var(--hhs-paper-0); }

/* --- Responsive: Tablet (≤1024) ------------------------------------------ */
@media (max-width: 1024px) {
	.hhs-pi-rows { grid-template-columns: 1fr; }
	.hhs-pi-signal__stats { grid-template-columns: 1fr; }
	.hhs-pi-close { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* --- Grid protection ----------------------------------------------------- */
.hhs-pi-rows > *, .hhs-pi-signal__stats > *, .hhs-pi-close > * { min-width: 0; }
.hhs-pi p { max-width: min(72ch, 100%); }
.hhs-pi .hhs-pi-header__h1, .hhs-pi .hhs-pi-close__h2 { max-width: none; }

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.hhs-pi::before { background-image: none; }
}

/* ============================================================================
 * ABOUT PAGE — v1.6.3
 * Founder/narrative page. Editorial register.
 * Selectors scoped under .hhs-ab-*. Never modifies global tokens.
 * Illustrative pass: paper grain ONLY.
 * ============================================================================ */

/* --- Page shell + paper grain -------------------------------------------- */
.hhs-ab { background: var(--hhs-paper-1); color: var(--hhs-black); overflow-x: hidden; position: relative; isolation: isolate; }
.hhs-ab::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 240px 240px; }
.hhs-ab > * { position: relative; z-index: 1; }

.hhs-ab-container { max-width: 1320px; margin: 0 auto; padding: 0 var(--hhs-pad-page); width: 100%; }

/* --- Header -------------------------------------------------------------- */
.hhs-ab-header { padding: clamp(7rem, 12vh, 11rem) 0 clamp(4rem, 7vh, 6rem); background: radial-gradient(ellipse at 20% 0%, rgba(255, 72, 74, 0.04), transparent 55%), var(--hhs-paper-1); }
.hhs-ab-datum { font-family: var(--hhs-font-mono); font-size: var(--hhs-meta); letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-charcoal); opacity: 0.78; margin: 0 0 1.5rem 0; display: inline-flex; align-items: center; gap: 0.5em; }
.hhs-ab-datum::before { content: ''; width: 2.4rem; height: 1px; background: currentColor; opacity: 0.55; }
.hhs-ab-eyebrow { font-family: var(--hhs-font-sans); font-weight: 500; font-size: var(--hhs-meta); letter-spacing: 0.18em; text-transform: uppercase; color: var(--hhs-red); margin: 0 0 1rem 0; }
.hhs-ab-header__h1 { font-family: var(--hhs-font-sans); font-weight: 900; font-size: clamp(2.5rem, 6.5vw, 6rem); line-height: 1.0; letter-spacing: -0.025em; color: var(--hhs-black); margin: 0.5rem 0 1rem 0; }
.hhs-ab-header__h2 { font-family: var(--hhs-font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.18; letter-spacing: -0.005em; color: var(--hhs-charcoal); margin: 0 0 1.5rem 0; max-width: 32ch; }
.hhs-ab-header__body { font-size: var(--hhs-body-lg); line-height: 1.65; color: var(--hhs-charcoal); max-width: 56ch; margin: 0; }

/* --- Chapter spine (simplified — no scroll-spy, static highlight) -------- */
.hhs-ab-spine { position: sticky; top: var(--hhs-nav-h, 4.25rem); z-index: 80; background: rgba(250, 247, 241, 0.92); backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%); border-top: 1px solid rgba(14, 14, 16, 0.06); border-bottom: 1px solid rgba(14, 14, 16, 0.06); }
.hhs-ab-spine__inner { display: flex; gap: clamp(0.5rem, 1.5vw, 1.25rem); overflow-x: auto; padding: 0.65rem var(--hhs-pad-page); margin: 0 auto; scrollbar-width: none; }
.hhs-ab-spine__inner::-webkit-scrollbar { display: none; }
.hhs-ab-spine__link { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.85rem; border-radius: 999px; text-decoration: none; color: var(--hhs-charcoal); font-size: var(--hhs-body-sm); font-weight: 500; white-space: nowrap; border: 1px solid transparent; transition: background 0.25s var(--hhs-ease-out), color 0.25s var(--hhs-ease-out), border-color 0.25s var(--hhs-ease-out); }
.hhs-ab-spine__link:hover { color: var(--hhs-black); border-color: rgba(14, 14, 16, 0.12); }
.hhs-ab-spine__num { font-family: var(--hhs-font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; color: var(--hhs-red); }
.hhs-ab-spine__label { font-family: var(--hhs-font-sans); font-weight: 500; font-size: var(--hhs-body-sm); letter-spacing: -0.005em; }

/* --- Section shell ------------------------------------------------------- */
.hhs-ab-section { padding: clamp(4.5rem, 8vh, 7rem) 0; position: relative; }
.hhs-ab-section__head { margin-bottom: clamp(2.5rem, 4vh, 3.5rem); max-width: 56ch; }
.hhs-ab-section__h2 { font-family: var(--hhs-font-sans); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1.1; letter-spacing: -0.018em; color: var(--hhs-black); margin: 0 0 1rem 0; }
.hhs-ab-section__lead { font-size: var(--hhs-body-lg); line-height: 1.6; color: var(--hhs-charcoal); max-width: 56ch; margin: 0; }

/* --- Numbered rows (hairline pattern) ------------------------------------ */
.hhs-ab-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 2.5vw, 2.5rem); }
.hhs-ab-row { padding-top: 1rem; border-top: 2px solid var(--hhs-red); display: flex; flex-direction: column; gap: 0.5rem; }
.hhs-ab-row__num { font-family: var(--hhs-font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--hhs-red); font-weight: 500; }
.hhs-ab-row__index { font-family: var(--hhs-font-mono); font-size: 0.72rem; letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-charcoal); opacity: 0.7; margin: 0; }
.hhs-ab-row__title { font-family: var(--hhs-font-sans); font-weight: 700; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--hhs-black); margin: 0; }
.hhs-ab-row__body { font-size: var(--hhs-body); line-height: 1.6; color: var(--hhs-charcoal); margin: 0; }

/* --- Lineage section ----------------------------------------------------- */
.hhs-ab-section--lineage { background: var(--hhs-paper-2); }
.hhs-ab-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 2.5vw, 2.5rem); margin-bottom: clamp(2rem, 3vh, 3rem); }
.hhs-ab-stat { padding-top: 1rem; border-top: 2px solid var(--hhs-red); }
.hhs-ab-stat__num { font-family: var(--hhs-font-sans); font-weight: 900; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.02em; color: var(--hhs-black); margin: 0 0 0.5rem 0; }
.hhs-ab-stat__body { font-size: var(--hhs-body); line-height: 1.6; color: var(--hhs-charcoal); margin: 0; }
.hhs-ab-lineage__closing { font-family: var(--hhs-font-serif); font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--hhs-navy); max-width: 48ch; margin: 0; line-height: 1.5; }
.hhs-ab-lineage__closing a { color: var(--hhs-navy); font-family: var(--hhs-font-sans); font-style: normal; font-weight: 600; border-bottom: 1px solid var(--hhs-navy); text-decoration: none; }
.hhs-ab-lineage__closing a:hover { color: var(--hhs-red); }

/* --- Closing CTA (light) ------------------------------------------------- */
.hhs-ab-section--close { background: var(--hhs-paper-1); }
.hhs-ab-close__inner { max-width: 56ch; }
.hhs-ab-close__eyebrow { font-family: var(--hhs-font-mono); font-size: var(--hhs-meta); letter-spacing: var(--hhs-tracking-mono); text-transform: uppercase; color: var(--hhs-charcoal); opacity: 0.78; margin: 0 0 1rem 0; }
.hhs-ab-close__h2 { font-family: var(--hhs-font-sans); font-weight: 900; font-size: clamp(1.75rem, 3.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--hhs-black); margin: 0 0 1rem 0; }
.hhs-ab-close__body { font-size: var(--hhs-body-lg); line-height: 1.6; color: var(--hhs-charcoal); margin: 0 0 1.5rem 0; }
.hhs-ab-close__ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* --- Responsive: Tablet (≤1024) ------------------------------------------ */
@media (max-width: 1024px) {
	.hhs-ab-rows { grid-template-columns: 1fr; }
	.hhs-ab-stats { grid-template-columns: 1fr; }
}

/* --- Responsive: Mobile (≤640) ------------------------------------------- */
@media (max-width: 640px) {
	.hhs-ab-spine__label { display: none; }
	.hhs-ab-spine__link { padding: 0.45rem 0.7rem; }
}

/* --- Grid protection ----------------------------------------------------- */
.hhs-ab-rows > *, .hhs-ab-stats > * { min-width: 0; }
.hhs-ab p { max-width: min(72ch, 100%); }
.hhs-ab .hhs-ab-header__h1 { max-width: none; }

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.hhs-ab::before { background-image: none; }
	.hhs-ab-spine__link { transition: none; }
}

/* ============================================================================
 * v1.6.5 — punch-list batch (2026-05-13)
 * Items 1+8: chapter index height override on audience pages (cream-gap fix)
 * Item 2: button hover fill + replace navy with FH cyan (#5FD0DF) on outlined CTAs
 * Item 4: active-state nav link indicator
 * Item 7: button nowrap on PI secondary CTAs
 * Footer logo placement
 * Items 5/5b/9: visual interest passes (PI striking, IND subtler, About cinematic)
 * ============================================================================ */

/* --- 1+8. Cream-gap fix --------------------------------------------------
 * The .hhs-chapter__index sticky printer-mark inherits height:60vh from the
 * homepage treatment. On short audience-page closes that overflows by ~113px
 * and pushes the article past the last section's cream bg. Override height
 * on audience-page articles. */
.hhs-ind .hhs-chapter__index,
.hhs-pi  .hhs-chapter__index,
.hhs-ab  .hhs-chapter__index {
	height: auto;
}

/* --- 2. Outlined / secondary buttons: cyan + filled hover ----------------
 * Resting state: outlined pill in FH Cyan #5FD0DF, transparent fill.
 * Hover: cyan fill, FH Black text. Replaces all navy on button-shaped CTAs.
 * Targets: .hhs-btn--text-link, .hhs-bg-route__cta, .hhs-bm-route__cta. */
.hhs-btn--text-link,
.hhs-bg-route__cta,
.hhs-bm-route__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.62rem 1.1rem;
	color: #5FD0DF;
	background: transparent;
	border: 1px solid #5FD0DF;
	border-bottom: 1px solid #5FD0DF;
	border-radius: 999px;
	text-decoration: none;
	font-family: var(--hhs-font-sans);
	font-weight: 600;
	font-size: var(--hhs-body-sm);
	letter-spacing: 0.002em;
	white-space: nowrap;
	transition: background 0.25s var(--hhs-ease-out),
	            color 0.25s var(--hhs-ease-out),
	            border-color 0.25s var(--hhs-ease-out),
	            transform 0.25s var(--hhs-ease-out);
	padding-bottom: 0.62rem; /* override the previous text-link's 0.1rem */
}
.hhs-btn--text-link:hover,
.hhs-bg-route__cta:hover,
.hhs-bm-route__cta:hover {
	background: #5FD0DF;
	color: var(--hhs-black);
	border-color: #5FD0DF;
}
.hhs-btn--text-link .hhs-btn__arrow,
.hhs-bg-route__cta::after,
.hhs-bm-route__cta::after { color: inherit; }

/* --- 4. Active-state nav indicator ---------------------------------------
 * Cream nav: underline thickens + tints cyan; charcoal text shifts to black.
 * Scrolled-dark nav: underline shows directly (visible against dark bg). */
.hhs-nav__links a.is-active {
	color: var(--hhs-black);
	font-weight: 600;
}
.hhs-nav__links a.is-active::after {
	transform: scaleX(1);
	background: #5FD0DF;
	height: 2px;
	bottom: 0.18rem;
}
body[data-scrolled="true"] .hhs-nav__links a.is-active {
	color: #fff;
}
body[data-scrolled="true"] .hhs-nav__links a.is-active::after {
	background: #5FD0DF;
}

/* --- 7. PI secondary CTAs: prevent two-line wrap -------------------------
 * Long string "Run The Booking Gap on a single brand first" wrapped at
 * intermediate widths. nowrap forces single line; ctas wrap as flex items
 * to the next row at narrow widths instead. */
.hhs-pi-header__ctas .hhs-btn,
.hhs-pi-close__ctas .hhs-btn,
.hhs-pi-header__ctas a,
.hhs-pi-close__ctas a {
	white-space: nowrap;
}
.hhs-pi-header__ctas,
.hhs-pi-close__ctas {
	flex-wrap: wrap;
}

/* --- Footer FH logo (item 3 styling) ------------------------------------- */
.hhs-footer__base { position: relative; }
.hhs-footer__fh-logo {
	display: inline-block;
	margin: 0.5rem 0 0.85rem 0;
}
.hhs-footer__fh-logo img {
	display: block;
	height: 28px;
	width: auto;
	max-width: 180px;
	opacity: 0.92;
	transition: opacity 0.25s var(--hhs-ease-out);
}
.hhs-footer__fh-logo:hover img { opacity: 1; }
@media (min-width: 768px) {
	.hhs-footer__base {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: clamp(1.25rem, 3vw, 2rem);
	}
	.hhs-footer__fh-logo {
		justify-self: center;
		margin: 0;
	}
	.hhs-footer__fh-logo img { height: 32px; max-width: 220px; }
}

/* ============================================================================
 * Item 5b — INDEPENDENTS subtle visual interest
 * Adds ornaments to the 3 tension cards. Subtler than PI by design.
 * ============================================================================ */

.hhs-ind-tension__ornament {
	display: block;
	width: 32px;
	height: 32px;
	margin-bottom: 0.5rem;
	color: var(--hhs-red);
	opacity: 0.78;
}
.hhs-ind-tension__ornament svg { width: 100%; height: 100%; display: block; }

/* Page-level atmospheric tilt: a single quiet horizon line just above the
 * close section's section-padding-top, signalling editorial closure. */
.hhs-ind-close { position: relative; }
.hhs-ind-close::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: clamp(60%, 60vw, 1000px);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 72, 74, 0.35), transparent);
	pointer-events: none;
}

/* ============================================================================
 * Item 5 — PORTFOLIO INTEGRATORS striking visual interest
 * Enterprise register (FH Navy + FH Tan dominant, NOT red shouting).
 * Three moves: (a) 3-row ornaments specific to portfolio semantics,
 * (b) brand-roster mosaic strip between problem and diagnostic sections,
 * (c) tan-rule editorial dividers.
 * ============================================================================ */

.hhs-pi-row__ornament {
	display: block;
	width: 38px;
	height: 38px;
	margin-bottom: 0.6rem;
	color: var(--hhs-navy);
	opacity: 0.85;
}
.hhs-pi-row__ornament svg { width: 100%; height: 100%; display: block; }

/* Brand-roster mosaic — 30-tile grid showing portfolio scale + variance.
 * Lives between the problem and diagnostic sections. Editorial register;
 * not interactive. */
.hhs-pi-roster {
	background: var(--hhs-paper-2);
	padding: clamp(3rem, 6vh, 5rem) 0;
	border-top: 1px solid rgba(14, 14, 16, 0.08);
	border-bottom: 1px solid rgba(14, 14, 16, 0.08);
	position: relative;
}
.hhs-pi-roster__container {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 var(--hhs-pad-page);
}
.hhs-pi-roster__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}
.hhs-pi-roster__eyebrow {
	font-family: var(--hhs-font-mono);
	font-size: 0.72rem;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: var(--hhs-navy);
	margin: 0;
}
.hhs-pi-roster__legend {
	font-family: var(--hhs-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: rgba(14, 14, 16, 0.55);
	display: inline-flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0;
}
.hhs-pi-roster__legend span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.hhs-pi-roster__legend span::before {
	content: '';
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 2px;
	background: var(--hhs-tan);
}
.hhs-pi-roster__legend span.is-outlier::before { background: var(--hhs-red); }
.hhs-pi-roster__legend span.is-baseline::before { background: rgba(14, 14, 16, 0.18); }
.hhs-pi-roster__grid {
	display: grid;
	grid-template-columns: repeat(15, minmax(0, 1fr));
	gap: 4px;
}
.hhs-pi-roster__tile {
	aspect-ratio: 1 / 1;
	background: rgba(14, 14, 16, 0.13);
	border-radius: 2px;
	position: relative;
}
.hhs-pi-roster__tile--high { background: var(--hhs-tan); }
.hhs-pi-roster__tile--outlier {
	background: var(--hhs-red);
}
.hhs-pi-roster__tile--outlier::after {
	content: '';
	position: absolute;
	inset: 14%;
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: 1px;
}
.hhs-pi-roster__caption {
	font-family: var(--hhs-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: rgba(14, 14, 16, 0.55);
	margin: 1rem 0 0 0;
	text-align: center;
}
@media (max-width: 768px) {
	.hhs-pi-roster__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}

/* PI section dividers — a thin FH Tan rule between major sections. */
.hhs-pi-section + .hhs-pi-section { border-top: 1px solid rgba(170, 151, 103, 0.28); }

/* ============================================================================
 * Item 9 — ABOUT cinematic visual interest
 * Pushes drama: large faint hippo watermark behind the header H1, pull-quote
 * band between sections, atmospheric horizon line on close. Type stays at
 * approved sizes; effect comes from layering and contrast.
 * ============================================================================ */

/* Hippo silhouette watermark behind H1. Uses the existing logo-hippo.png
 * scaled large + low-opacity + offset to right. */
.hhs-ab-header { position: relative; isolation: isolate; }
.hhs-ab-header::after {
	content: '';
	position: absolute;
	right: -8%;
	bottom: 6%;
	width: clamp(320px, 50vw, 680px);
	aspect-ratio: 217 / 137;
	background-image: url("/wp-content/themes/hhs-child/assets/img/logo-hippo.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right bottom;
	opacity: 0.08;
	pointer-events: none;
	z-index: 0;
	filter: grayscale(0.4);
}
.hhs-ab-header > * { position: relative; z-index: 1; }
@media (max-width: 768px) {
	.hhs-ab-header::after { right: -22%; bottom: 0; opacity: 0.06; width: 70vw; }
}

/* Pull-quote band between What We Do and Lineage (rendered via template). */
.hhs-ab-pullquote {
	background: var(--hhs-black);
	color: var(--hhs-paper-0);
	padding: clamp(4rem, 9vh, 7rem) 0;
	position: relative;
	overflow: hidden;
}
.hhs-ab-pullquote::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--hhs-red);
}
.hhs-ab-pullquote__container {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 var(--hhs-pad-page);
	display: grid;
	gap: 1.5rem;
}
.hhs-ab-pullquote__text {
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2rem, 4.2vw, 4rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--hhs-paper-0);
	margin: 0;
	max-width: 36ch;
}
.hhs-ab-pullquote__text .accent { color: #5FD0DF; }
.hhs-ab-pullquote__caption {
	font-family: var(--hhs-font-mono);
	font-size: 0.78rem;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(250, 247, 241, 0.55);
	margin: 0;
}

/* Lineage section: trade-mark engraving frame around the FH attribution.
 * Big tan-rule + serif italic + mono caption. Replaces the deleted stats. */
.hhs-ab-lineage__closing { font-size: clamp(1rem, 1.3vw, 1.15rem); }

/* Close section: dramatic transitional rule */
.hhs-ab-section--close { position: relative; }
.hhs-ab-section--close::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: clamp(40%, 40vw, 600px);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 72, 74, 0.5), transparent);
	pointer-events: none;
}

/* ============================================================================
 * v1.6.6 — footer logo relocation + cyan button motion + About cinematic v2
 * (2026-05-13)
 *
 *   1. Footer FH logo moved from base row to brand column. Override the
 *      previous .hhs-footer__base grid + center justification.
 *   2. Cyan outlined buttons inherit the magnetic arrow-translate hover
 *      that the red .hhs-btn:hover .hhs-btn__arrow pattern already uses.
 *   3. About cinematic v2 pushes harder per /our-work register: geometric
 *      hexagon anchors, larger display H1, case-study evidence block
 *      between Lineage and Start (Meyers HVAC, Service Legends, etc.).
 * ============================================================================ */

/* --- Footer FH logo — now lives in brand column -------------------------- */
.hhs-footer__col--brand .hhs-footer__fh-logo {
	display: inline-block;
	margin-top: 1rem;
}
.hhs-footer__col--brand .hhs-footer__fh-logo img {
	display: block;
	height: 36px;
	width: auto;
	max-width: 200px;
	opacity: 0.9;
	transition: opacity 0.25s var(--hhs-ease-out);
}
.hhs-footer__col--brand .hhs-footer__fh-logo:hover img { opacity: 1; }
/* Reset the base row grid since the logo no longer lives there */
.hhs-footer__base {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

/* --- Cyan outlined buttons: arrow-translate on hover --------------------- */
.hhs-btn--text-link:hover .hhs-btn__arrow,
.hhs-btn--text-link:hover > span[aria-hidden="true"],
.hhs-bg-route__cta:hover > span[aria-hidden="true"],
.hhs-bm-route__cta:hover > span[aria-hidden="true"] {
	transform: translateX(4px);
}
.hhs-btn--text-link > span[aria-hidden="true"],
.hhs-bg-route__cta > span[aria-hidden="true"],
.hhs-bm-route__cta > span[aria-hidden="true"] {
	display: inline-block;
	transition: transform 0.32s var(--hhs-ease-out);
}

/* ============================================================================
 * ABOUT — cinematic v2 (registered per our-work inspiration)
 *
 * Visual register lifted from hippohomeservices.com/our-work:
 *   - Big declarative display type
 *   - Geometric hexagon anchors in restrained tones
 *   - Whitespace-driven, no atmospheric photography
 *   - Case-study blocks with bold client name + descriptive headline
 *     + 1-sentence proof
 *
 * Existing About copy stays at the top. New "Selected Work" evidence
 * section sits between Lineage and Start.
 * ============================================================================ */

/* Hero H1 gets a stronger display treatment, slightly tighter than default */
.hhs-ab-header__h1 {
	font-size: clamp(2.6rem, 6.4vw, 6.5rem);
	line-height: 0.95;
	letter-spacing: -0.025em;
}

/* Geometric hexagon anchor — sits behind the hero, low opacity, restrained.
 * Replaces the hippo watermark with a more our-work-aligned geometric
 * marker. We keep the hippo at lower opacity as a quiet secondary layer. */
.hhs-ab-header::before {
	content: '';
	position: absolute;
	right: 6%;
	top: 18%;
	width: clamp(180px, 18vw, 240px);
	aspect-ratio: 1 / 1;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,3 93,26 93,74 50,97 7,74 7,26' fill='none' stroke='%23FF484A' stroke-width='1.2' opacity='0.55'/><polygon points='50,15 81,32 81,68 50,85 19,68 19,32' fill='none' stroke='%23323232' stroke-width='0.6' opacity='0.35'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 0;
}
.hhs-ab-header::after { opacity: 0.05; }
@media (max-width: 768px) {
	.hhs-ab-header::before { right: -8%; top: 8%; width: 35vw; opacity: 0.6; }
}

/* Section header anchor — a small hexagon mark sits before each section H2 */
.hhs-ab-section__head { position: relative; padding-top: 2.5rem; }
.hhs-ab-section__head::before {
	content: '';
	display: block;
	width: 28px;
	height: 28px;
	margin: 0 0 1.25rem 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,3 93,26 93,74 50,97 7,74 7,26' fill='none' stroke='%23FF484A' stroke-width='4'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
}

/* What We Do row markers: replace numbered circles with hex glyph */
.hhs-ab-row__num {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	color: var(--hhs-red);
	font-family: var(--hhs-font-mono);
	font-weight: 500;
	font-size: 0.85rem;
	position: relative;
}
.hhs-ab-row__num::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,3 93,26 93,74 50,97 7,74 7,26' fill='none' stroke='%23FF484A' stroke-width='4'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Pull-quote band — make it bigger, more cinematic */
.hhs-ab-pullquote {
	padding: clamp(5rem, 11vh, 9rem) 0;
}
.hhs-ab-pullquote__text {
	font-size: clamp(2.2rem, 5vw, 4.8rem);
	max-width: 30ch;
}

/* ============================================================================
 * About — Selected Work block (new section, between Lineage and Start)
 * Modeled on hippohomeservices.com/our-work block pattern: client name +
 * descriptive headline + 1-sentence proof. Geometric hex marker per row.
 * ============================================================================ */

.hhs-ab-work {
	background: var(--hhs-paper-0);
	padding: clamp(5rem, 10vh, 8rem) 0;
	position: relative;
	border-top: 1px solid rgba(14, 14, 16, 0.08);
}
.hhs-ab-work__container {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 var(--hhs-pad-page);
}
.hhs-ab-work__head {
	margin-bottom: clamp(2.5rem, 5vh, 4rem);
	display: grid;
	gap: 0.75rem;
}
.hhs-ab-work__eyebrow {
	font-family: var(--hhs-font-mono);
	font-size: 0.75rem;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: var(--hhs-red);
	margin: 0;
}
.hhs-ab-work__h2 {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(2rem, 4.6vw, 4.25rem);
	line-height: 0.98;
	letter-spacing: -0.025em;
	color: var(--hhs-black);
	margin: 0;
	max-width: 22ch;
}
.hhs-ab-work__lead {
	font-size: var(--hhs-body-lg);
	line-height: 1.55;
	color: var(--hhs-charcoal);
	max-width: 60ch;
	margin: 0.5rem 0 0 0;
}
.hhs-ab-work__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0;
}
.hhs-ab-work__item {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
	padding: clamp(2rem, 4vh, 3rem) 0;
	border-bottom: 1px solid rgba(14, 14, 16, 0.1);
	position: relative;
}
.hhs-ab-work__item:last-child { border-bottom: 0; }
.hhs-ab-work__item::before {
	content: '';
	position: absolute;
	left: 0;
	top: clamp(2rem, 4vh, 3rem);
	width: 22px;
	height: 22px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,3 93,26 93,74 50,97 7,74 7,26' fill='%23FF484A'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
}
.hhs-ab-work__item-meta {
	padding-left: 36px;
	display: grid;
	gap: 0.35rem;
}
.hhs-ab-work__client {
	font-family: var(--hhs-font-mono);
	font-size: 0.7rem;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: var(--hhs-charcoal);
	opacity: 0.75;
	margin: 0;
}
.hhs-ab-work__name {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	line-height: 1.05;
	letter-spacing: -0.018em;
	color: var(--hhs-black);
	margin: 0;
}
.hhs-ab-work__copy {
	display: grid;
	gap: 0.85rem;
}
.hhs-ab-work__headline {
	font-family: var(--hhs-font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.35rem, 2vw, 1.85rem);
	line-height: 1.18;
	color: var(--hhs-black);
	margin: 0;
}
.hhs-ab-work__proof {
	font-size: var(--hhs-body);
	line-height: 1.62;
	color: var(--hhs-charcoal);
	margin: 0;
	max-width: 60ch;
}
.hhs-ab-work__closing {
	margin-top: clamp(2.5rem, 5vh, 4rem);
	padding-top: clamp(2rem, 4vh, 3rem);
	border-top: 1px solid rgba(14, 14, 16, 0.1);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 2rem;
	flex-wrap: wrap;
}
.hhs-ab-work__closing-h2 {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--hhs-black);
	margin: 0;
}
.hhs-ab-work__closing-caption {
	font-family: var(--hhs-font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--hhs-charcoal);
	opacity: 0.7;
	margin: 0;
}

@media (max-width: 768px) {
	.hhs-ab-work__item { grid-template-columns: 1fr; gap: 1rem; }
	.hhs-ab-work__item-meta { padding-left: 30px; }
}

/* v1.6.6 — orphan period fix: .hhs-footer__col a defaults to display:block
 * (correct for diagnostics/site link lists). Override for the attribution
 * inline link so "Flying Hippo." doesn't orphan its trailing period. */
.hhs-footer__attribution a {
	display: inline;
	padding: 0;
}

/* v1.6.6 cont. — case-study spreads with imagery (real Flying Hippo work)
 * Override the prior 2-col layout: now image-left magazine spread, with
 * --reverse modifier flipping image to right for visual rhythm. Image
 * comes from Flying Hippo case study heroes (jtech, meyers, service-
 * legends, rj-lawn — pulled from flyinghippo.com/work/<slug>/). */
.hhs-ab-work__item {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	grid-template-areas: "image content";
	align-items: center;
	gap: clamp(2.5rem, 5vw, 5rem);
	padding: clamp(2.5rem, 5vh, 4rem) 0;
}
.hhs-ab-work__item--reverse {
	grid-template-areas: "content image";
}
.hhs-ab-work__image {
	grid-area: image;
	margin: 0;
	overflow: hidden;
	border-radius: 4px;
	background: var(--hhs-paper-2);
	position: relative;
	aspect-ratio: 16 / 11;
}
.hhs-ab-work__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--hhs-ease-out);
}
.hhs-ab-work__item:hover .hhs-ab-work__image img { transform: scale(1.025); }
.hhs-ab-work__item-meta {
	grid-area: content;
	grid-row: 1;
	padding-left: 0;
	margin-bottom: 0.5rem;
}
.hhs-ab-work__copy {
	grid-area: content;
	grid-row: 1;
	padding-top: 4.5rem; /* leaves room for meta above; meta is absolutely-positioned-feel */
}
/* Flatten: we don't actually want two children in same grid-area. Re-stack
 * the content column with a nested wrapper instead. Simpler — wrap meta+copy
 * in flex column via a single grid-area. */
.hhs-ab-work__item { display: grid; }
.hhs-ab-work__item > .hhs-ab-work__image { grid-column: 1; }
.hhs-ab-work__item--reverse > .hhs-ab-work__image { grid-column: 2; }
.hhs-ab-work__item-meta,
.hhs-ab-work__item--reverse .hhs-ab-work__item-meta { grid-column: 2; grid-row: 1; padding-left: 0; }
.hhs-ab-work__copy,
.hhs-ab-work__item--reverse .hhs-ab-work__copy { grid-column: 2; grid-row: 2; padding-top: 0; }
.hhs-ab-work__item--reverse > .hhs-ab-work__item-meta { grid-column: 1; }
.hhs-ab-work__item--reverse > .hhs-ab-work__copy { grid-column: 1; }
.hhs-ab-work__item { grid-template-rows: auto auto; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.hhs-ab-work__item > .hhs-ab-work__image { grid-row: 1 / span 2; }
.hhs-ab-work__item-meta { padding-top: 0; }
.hhs-ab-work__copy { padding-top: 1rem; }
.hhs-ab-work__item::before { display: none; } /* hex marker now lives next to client label */
.hhs-ab-work__client {
	position: relative;
	padding-left: 28px;
}
.hhs-ab-work__client::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,3 93,26 93,74 50,97 7,74 7,26' fill='%23FF484A'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
}
@media (max-width: 768px) {
	.hhs-ab-work__item,
	.hhs-ab-work__item--reverse {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
	.hhs-ab-work__item > .hhs-ab-work__image,
	.hhs-ab-work__item--reverse > .hhs-ab-work__image {
		grid-column: 1;
		grid-row: 1 / span 1;
	}
	.hhs-ab-work__item-meta,
	.hhs-ab-work__item--reverse > .hhs-ab-work__item-meta,
	.hhs-ab-work__copy,
	.hhs-ab-work__item--reverse > .hhs-ab-work__copy {
		grid-column: 1;
	}
	.hhs-ab-work__item-meta,
	.hhs-ab-work__item--reverse > .hhs-ab-work__item-meta { grid-row: 2; }
	.hhs-ab-work__copy,
	.hhs-ab-work__item--reverse > .hhs-ab-work__copy { grid-row: 3; }
}

/* v1.6.7 — About spine sticky fix. `.hhs-ab` was using overflow-x: hidden,
 * which creates a scroll container and breaks `position: sticky` for any
 * descendant. Swap to `overflow-x: clip` (CSS Overflow 3) — same visual
 * protection against horizontal blow-out, no scroll-container side-effect.
 * Browser support: Chrome 90+, Firefox 91+, Safari 15.4+. */
.hhs-ab { overflow-x: clip; }

/* ============================================================================
 * v1.6.7 — case-study slideshow (replaces static .hhs-ab-work__image)
 *
 * Per-card fade slideshow with Ken Burns zoom-in, modeled on the
 * Elementor slideshow background pattern from hippohomeservices.com/our-work.
 *   - All slides stacked absolute; .is-active fades in over 700ms.
 *   - Active slide scales 1.0 → 1.08 over its full visible window
 *     (Ken Burns zoom-in) — only when in viewport (paused otherwise).
 *   - Vignette overlay holds the type-overlay contrast if needed later.
 *   - Dots + numeric counter live as metadata in the lower-right corner.
 *
 * Driver: assets/js/ab-slideshow.js (advances .is-active per data-interval,
 * pauses when out of view via IntersectionObserver, reduced-motion stops
 * cycling and stops Ken Burns).
 * ============================================================================ */

.hhs-ab-work__slideshow {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--hhs-paper-3);
	border-radius: 4px;
	aspect-ratio: 16 / 11;
	grid-area: image;
	grid-column: 1;
	grid-row: 1 / span 2;
	isolation: isolate;
}
.hhs-ab-work__item--reverse > .hhs-ab-work__slideshow {
	grid-column: 2;
	grid-row: 1 / span 2;
}
.hhs-ab-work__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1);
	transition: opacity 0.7s ease-out;
	will-change: opacity, transform;
}
.hhs-ab-work__slide.is-active {
	opacity: 1;
	animation: hhs-ab-kenburns var(--ab-kenburns-dur, 7s) ease-out forwards;
}
@keyframes hhs-ab-kenburns {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.08) translate3d(0, -1%, 0); }
}

/* Vignette: subtle gradient at the bottom so dots/counter stay legible
 * regardless of image content underneath. */
.hhs-ab-work__slideshow-vignette {
	position: absolute;
	inset: auto 0 0 0;
	height: 35%;
	background: linear-gradient(180deg, transparent, rgba(14, 14, 16, 0.45));
	pointer-events: none;
	z-index: 1;
}

/* Slideshow metadata (dots + counter) in the lower-right corner. */
.hhs-ab-work__slideshow-meta {
	position: absolute;
	inset: auto 0.85rem 0.85rem auto;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	z-index: 2;
	padding: 0.35rem 0.65rem;
	background: rgba(14, 14, 16, 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 999px;
	color: rgba(250, 247, 241, 0.92);
}
.hhs-ab-work__slideshow-dots {
	display: inline-flex;
	gap: 5px;
	align-items: center;
}
.hhs-ab-work__slideshow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(250, 247, 241, 0.35);
	transition: background 0.3s ease-out, transform 0.3s ease-out;
}
.hhs-ab-work__slideshow-dot.is-active {
	background: #5FD0DF;
	transform: scale(1.15);
}
.hhs-ab-work__slideshow-counter {
	font-family: var(--hhs-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	color: rgba(250, 247, 241, 0.8);
	white-space: nowrap;
}

/* Hover: pause Ken Burns at current scale, lift the meta-pill slightly */
.hhs-ab-work__item:hover .hhs-ab-work__slide.is-active {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.hhs-ab-work__slide { transition: none; }
	.hhs-ab-work__slide.is-active { animation: none; transform: scale(1); }
}

/* ============================================================================
 * v1.6.8 — case-study layout fix + framed wrapper
 *
 * (1) Restructured each .hhs-ab-work__item so meta + copy live inside a
 *     single .hhs-ab-work__content flex column. Prior 2-row grid let the
 *     image's aspect-ratio force the meta and copy rows to over-distribute,
 *     creating a wide gap between "Meyers" and "Turning wrenches into wins."
 *     Now the gap is set directly via flex `gap` and tight by design.
 *
 * (2) Replaced the plain rounded rectangle with an asymmetric framed
 *     wrapper:
 *       - Slideshow gets clip-path with diagonal notches at top-right and
 *         bottom-left (echoes the hexagon motif used throughout the page).
 *       - Mono "//" corner mark sits tucked in the top-right notch.
 *       - Offset cream plate behind the frame creates a soft "matted print"
 *         layered effect. Editorial, not a lazy rectangle.
 * ============================================================================ */

/* Reset the prior grid-area scaffolding for the item. We now use simple
 * two-column grid with both children sitting at top-left of their cell. */
.hhs-ab-work__item,
.hhs-ab-work__item--reverse {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	grid-template-rows: auto;
	grid-template-areas: "image content";
	align-items: center;
	gap: clamp(2.5rem, 5vw, 5rem);
	padding: clamp(2.5rem, 5vh, 4rem) 0;
}
.hhs-ab-work__item--reverse { grid-template-areas: "content image"; }

.hhs-ab-work__frame {
	grid-area: image;
	position: relative;
	isolation: isolate;
}
.hhs-ab-work__content {
	grid-area: content;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 52ch;
}

/* Tighten the inner spacing — kill the wide vertical gap that triggered
 * this rewrite. */
.hhs-ab-work__item-meta {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding-left: 0;
}
.hhs-ab-work__copy {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(14, 14, 16, 0.12);
	margin-top: 0.5rem;
}

/* Slideshow — clipped polygon shape replaces the lazy rounded rect.
 * Top-right and bottom-left notches at 28px diagonal echo the hex motif.
 * Border-radius is reset to 0 — clip-path owns the edge. */
.hhs-ab-work__slideshow {
	border-radius: 0;
	grid-area: auto; /* override prior placement now that .hhs-ab-work__frame is the grid item */
	clip-path: polygon(
		0 0,
		calc(100% - 28px) 0,
		100% 28px,
		100% 100%,
		28px 100%,
		0 calc(100% - 28px)
	);
}

/* Inset hairline that follows the clip — drawn via overlay pseudo on the
 * frame to avoid fighting the clip-path shape. */
.hhs-ab-work__frame::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255, 72, 74, 0.32);
	clip-path: polygon(
		0 0,
		calc(100% - 28px) 0,
		100% 28px,
		100% 100%,
		28px 100%,
		0 calc(100% - 28px)
	);
	pointer-events: none;
	z-index: 2;
}

/* Mono "//" corner accent — sits inside the top-right notch */
.hhs-ab-work__corner-mark {
	position: absolute;
	top: 0.5rem;
	right: 2rem;
	font-family: var(--hhs-font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--hhs-red);
	z-index: 3;
	pointer-events: none;
}

/* Offset cream plate — a soft "matted print" layer peeking behind the
 * frame's bottom-right corner. Adds depth without competing with the
 * slideshow imagery. */
.hhs-ab-work__plate {
	position: absolute;
	inset: 16px -16px -16px 16px;
	background: var(--hhs-paper-2);
	border: 1px solid rgba(14, 14, 16, 0.08);
	z-index: -1;
	clip-path: polygon(
		0 0,
		calc(100% - 28px) 0,
		100% 28px,
		100% 100%,
		28px 100%,
		0 calc(100% - 28px)
	);
}

/* On reverse items, mirror the plate offset so it peeks behind the
 * bottom-LEFT instead — visually balanced with the inverted layout. */
.hhs-ab-work__item--reverse .hhs-ab-work__plate {
	inset: 16px 16px -16px -16px;
}

@media (max-width: 768px) {
	.hhs-ab-work__item,
	.hhs-ab-work__item--reverse {
		grid-template-columns: 1fr;
		grid-template-areas:
			"image"
			"content";
		gap: 1.5rem;
	}
	.hhs-ab-work__plate,
	.hhs-ab-work__item--reverse .hhs-ab-work__plate {
		inset: 10px -10px -10px 10px;
	}
}

/* ============================================================================
 * v1.6.9 — slideshow prev/next chevrons
 * Inline button controls at left + right vertical centers. Sit above the
 * vignette and meta-pill (z-index 2). Soft cyan tint on hover.
 * ============================================================================ */
.hhs-ab-work__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 0;
	background: rgba(14, 14, 16, 0.45);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: rgba(250, 247, 241, 0.92);
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.25s var(--hhs-ease-out),
	            background 0.25s var(--hhs-ease-out),
	            transform 0.25s var(--hhs-ease-out);
	-webkit-tap-highlight-color: transparent;
}
.hhs-ab-work__nav--prev { left: 0.85rem; }
.hhs-ab-work__nav--next { right: 0.85rem; }
.hhs-ab-work__nav svg { width: 18px; height: 18px; display: block; }
.hhs-ab-work__nav:hover,
.hhs-ab-work__nav:focus-visible {
	opacity: 1;
	background: rgba(95, 208, 223, 0.85);
	color: var(--hhs-black);
}
.hhs-ab-work__nav:focus-visible { outline: 2px solid #5FD0DF; outline-offset: 3px; }
.hhs-ab-work__nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.hhs-ab-work__nav--next:hover { transform: translateY(-50%) translateX(2px); }

.hhs-ab-work__slideshow:hover .hhs-ab-work__nav { opacity: 0.85; }
.hhs-ab-work__slideshow:hover .hhs-ab-work__nav:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.hhs-ab-work__nav { transition: opacity 0.15s linear, background 0.15s linear; }
	.hhs-ab-work__nav--prev:hover,
	.hhs-ab-work__nav--next:hover { transform: translateY(-50%); }
}

/* ============================================================================
 * STATIC HOMEPAGE OVERRIDES — v1.8.0 (2026-05-20)
 *
 * The scroll-mapped progress engines (Hero --hhs-hero-p, Ch02 --c02-dial-p,
 * Ch04 --c04-p, Ch05 --c05-p) and the Ch03 sticky letter mechanic have all
 * been removed. JS now pins each var to its end-state on load, and these CSS
 * rules:
 *   1. Collapse the scroll runways (320vh / 220vh / 200vh / 180vh → auto)
 *   2. Unsticky the hero and Ch05 stages so they render in normal flow
 *   3. Kill the hero dissolve-to-black overlay
 *   4. Force the datum to stay visible (it was scroll-tied to fade out)
 *   5. Style the new Chapter 03 ICP card grid
 *
 * Subtle motion that remains: hero datum + signature typewriter, hippo
 * video playlist loop, Ch01 IO-triggered counters, Ch02/Ch03 IO fade-in
 * card reveals.
 * ============================================================================ */

/* --- Hero: collapse runway, render static --- */
.hhs-hero {
	min-height: 100vh;
	min-height: 100dvh;
}
.hhs-hero__visual {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
}
.hhs-hero__stage {
	position: relative;
	top: auto;
	margin-top: 0;
	min-height: 100vh;
	min-height: 100dvh;
	height: auto;
}
.hhs-hero__sky {
	transform: scale(1.04) scaleX(-1);
}
/* Kill the dissolve-to-black overlay that fired at p > 0.85 */
.hhs-hero__visual::after {
	display: none;
}
/* Datum stays visible — no scroll-tied fade */
.hhs-hero__visual .hhs-hero__datum {
	opacity: 1;
}
/* Tablet + phone: hero collapses to one viewport */
@media (max-width: 1023px) {
	.hhs-hero { min-height: 100vh; min-height: 100dvh; }
	.hhs-hero__stage { min-height: 100vh; min-height: 100dvh; }
}
@media (max-width: 640px) {
	.hhs-hero { min-height: 100vh; min-height: 100dvh; }
	.hhs-hero__stage { min-height: 100vh; min-height: 100dvh; }
}

/* --- Chapter 04: collapse runway, render end-state --- */
.hhs-chapter--04 {
	min-height: auto;
	padding: clamp(4rem, 8vh, 7rem) 0 clamp(4rem, 8vh, 6rem);
}

/* --- Chapter 05: unsticky video pin, render static photograph --- */
.hhs-chapter--05 {
	min-height: auto;
	padding: clamp(5rem, 9vh, 7.5rem) 0 clamp(6rem, 11vh, 9rem);
}
.hhs-c05-flyover__visual {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	min-height: 0;
}
.hhs-c05-flyover__stage {
	position: relative;
	top: auto;
	margin-top: 0;
	height: auto;
	min-height: clamp(20rem, 50vh, 32rem);
	padding: clamp(3rem, 6vh, 5rem) 0;
}
/* Static treatment — show photographic fallback, hide video element */
.hhs-chapter--05 .hhs-c05-flyover__video {
	display: none;
}
.hhs-chapter--05 .hhs-c05-flyover__fallback {
	opacity: 1;
}

/* --- Chapter 03: ICP card grid (replaces letter system) --- */
.hhs-c03-grid-wrap {
	position: relative;
	max-width: 1240px;
	width: 100%;
	margin: 0 auto;
	padding: clamp(4rem, 8vh, 7rem) var(--hhs-pad-page);
	z-index: 2;
}

.hhs-c03-head {
	max-width: 56rem;
	margin: 0 auto clamp(2.5rem, 5vh, 4rem);
	text-align: center;
}
.hhs-c03-head .hhs-eyebrow {
	color: var(--hhs-cyan);
	margin-bottom: 1rem;
}
.hhs-c03-h2 {
	font-family: var(--hhs-font-sans);
	font-weight: 900;
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: #FFF8EB;
	margin: 0 0 1rem;
}
.hhs-c03-h2-accent {
	display: block;
	color: var(--hhs-red);
	font-style: italic;
	font-family: var(--hhs-font-serif);
	font-weight: 400;
}
.hhs-c03-body {
	font-family: var(--hhs-font-sans);
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.55;
	color: rgba(255, 248, 235, 0.72);
	max-width: 38rem;
	margin: 0 auto;
}

.hhs-c03-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 1.8vw, 1.5rem);
	max-width: 1100px;
	margin: 0 auto;
}
@media (max-width: 760px) {
	.hhs-c03-grid {
		grid-template-columns: 1fr;
	}
}

.hhs-c03-card {
	--c03-accent: var(--hhs-cyan);
	--c03-accent-soft: rgba(95, 208, 223, 0.55);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vh, 1.4rem);
	padding: clamp(1.5rem, 2.4vw, 2.1rem);
	text-align: left;
	background: rgba(255, 248, 235, 0.03);
	border: 1px solid rgba(255, 248, 235, 0.12);
	border-radius: 4px;
	color: #FFF8EB;
	cursor: pointer;
	font: inherit;
	transition: background 0.25s var(--hhs-ease-out),
		border-color 0.25s var(--hhs-ease-out),
		transform 0.25s var(--hhs-ease-out),
		box-shadow 0.25s var(--hhs-ease-out);

	/* IO reveal */
	opacity: 0;
	transform: translateY(14px);
}

/* Per-ICP accent colors — each card carries its own signature.
 * Used for tag color, hover border, chosen border, action text, and the
 * payoff panel's accent when that card is selected. */
.hhs-c03-card[data-icp="capacity-bound"] {
	--c03-accent: var(--hhs-cyan);
	--c03-accent-soft: rgba(95, 208, 223, 0.55);
}
.hhs-c03-card[data-icp="spend-saturated"] {
	--c03-accent: var(--hhs-gold);
	--c03-accent-soft: rgba(222, 204, 98, 0.55);
}
.hhs-c03-card[data-icp="sale-prep"] {
	--c03-accent: var(--hhs-red);
	--c03-accent-soft: rgba(255, 72, 74, 0.55);
}
.hhs-c03-card[data-icp="portfolio-integrator"] {
	--c03-accent: var(--hhs-tan);
	--c03-accent-soft: rgba(170, 151, 103, 0.55);
}
.hhs-c03-card.is-revealed {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.6s var(--hhs-ease-out),
		transform 0.6s var(--hhs-ease-out),
		background 0.25s var(--hhs-ease-out),
		border-color 0.25s var(--hhs-ease-out);
}
.hhs-c03-card:nth-child(2).is-revealed { transition-delay: 0.06s, 0.06s, 0s, 0s; }
.hhs-c03-card:nth-child(3).is-revealed { transition-delay: 0.12s, 0.12s, 0s, 0s; }
.hhs-c03-card:nth-child(4).is-revealed { transition-delay: 0.18s, 0.18s, 0s, 0s; }

.hhs-c03-card:hover {
	background: rgba(255, 248, 235, 0.055);
	border-color: var(--c03-accent-soft);
}
.hhs-c03-card:focus-visible {
	outline: 2px solid var(--c03-accent);
	outline-offset: 3px;
}

/* Chosen card = MARKER (quiet, contextual). Payoff panel = REPORT (the answer).
 * Different visual roles. Card uses a brighter neutral background + a small
 * corner mark in the accent color — no full accent border, no chevron pointing
 * at the panel. The two no longer read as "two gold cards talking to each
 * other" because they no longer share the same heavy accent treatment. */
.hhs-c03-card.is-chosen {
	background: rgba(255, 248, 235, 0.075);
	border-color: rgba(255, 248, 235, 0.22);
	animation: hhs-c03-card-pulse 380ms var(--hhs-ease-out);
}
.hhs-c03-card.is-chosen:hover {
	border-color: rgba(255, 248, 235, 0.32);
}

/* Corner mark — small filled square in the top-right of the chosen card,
 * inflected with the ICP accent. Replaces the previous downward chevron. */
.hhs-c03-card::before {
	content: '';
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 12px 12px 0;
	border-color: transparent var(--c03-accent) transparent transparent;
	opacity: 0;
	transition: opacity 0.3s var(--hhs-ease-out);
	pointer-events: none;
}
.hhs-c03-card.is-chosen::before {
	opacity: 1;
}

@keyframes hhs-c03-card-pulse {
	0%   { transform: translateY(0)    scale(1); }
	50%  { transform: translateY(-2px) scale(1.012); }
	100% { transform: translateY(0)    scale(1); }
}

.hhs-c03-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: clamp(0.85rem, 1.6vh, 1.1rem);
	border-bottom: 1px solid rgba(255, 248, 235, 0.1);
}
.hhs-c03-card__tag {
	font-family: var(--hhs-font-mono);
	font-size: 0.78rem;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: var(--c03-accent);
}
.hhs-c03-card__band {
	font-family: var(--hhs-font-mono);
	font-size: 0.72rem;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.55);
}

.hhs-c03-card__pain {
	font-family: var(--hhs-font-sans);
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.5;
	color: rgba(255, 248, 235, 0.92);
	margin: 0;
}

.hhs-c03-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: clamp(0.5rem, 1vh, 0.85rem);
}
.hhs-c03-card__action {
	font-family: var(--hhs-font-mono);
	font-size: 0.82rem;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: var(--c03-accent);
	transition: transform 0.2s var(--hhs-ease-out);
}
.hhs-c03-card:hover .hhs-c03-card__action {
	transform: translateX(3px);
}
.hhs-c03-card.is-chosen .hhs-c03-card__action {
	color: var(--c03-accent);
}
.hhs-c03-card__chosen {
	display: none;
	font-family: var(--hhs-font-mono);
	font-size: 0.72rem;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: var(--c03-accent);
}
.hhs-c03-card.is-chosen .hhs-c03-card__chosen {
	display: inline-block;
}
.hhs-c03-card.is-chosen .hhs-c03-card__action {
	display: none;
}

.hhs-c03-grid-foot {
	max-width: 1100px;
	margin: clamp(1.5rem, 3vh, 2.5rem) auto 0;
	font-family: var(--hhs-font-mono);
	font-size: 0.78rem;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(255, 248, 235, 0.45);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.hhs-c03-card {
		opacity: 1;
		transform: none;
		transition: background 0.15s linear, border-color 0.15s linear;
	}
	.hhs-c03-card:hover .hhs-c03-card__action {
		transform: none;
	}
}

/* ============================================================================
 * v1.11.0 (2026-05-20) — Polish pass on top of the static homepage.
 *
 * 1. Hero reassurance line color: navy → cyan (navy was removed from palette use).
 * 2. Hero scroll indicator restored (no scroll-lock, just a click affordance).
 * 3. Ch03 YOU ARE badge gets clearance from the right-column cards.
 * 4. Ch01 cinematic + pivot + closing rhythm tightened (less dead space).
 * 5. "The math broke." locked to two lines (no widow on any breakpoint).
 * 6. Ch02 dial needle sweep restored — IO-triggered, one-shot, time-driven.
 * 7. Ch03 payoff panel reveals on card click (markup + styles below).
 * ============================================================================ */

/* --- Hero reassurance: cyan, not navy --- */
.hhs-hero__reassurance {
	color: var(--hhs-cyan);
}

/* --- Hero scroll indicator: fixed to viewport, fades once user starts scrolling --- */
.hhs-hero__scroll-cue {
	position: fixed;
	bottom: clamp(1.25rem, 3vh, 2.5rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 0.65rem 0.9rem;
	background: transparent;
	border: 0;
	color: rgba(255, 248, 235, 0.78);
	font-family: var(--hhs-font-mono);
	font-size: 0.7rem;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	cursor: pointer;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.4s var(--hhs-ease-out),
		color 0.25s var(--hhs-ease-out),
		transform 0.25s var(--hhs-ease-out);
}
body[data-hero-engaged] .hhs-hero__scroll-cue {
	opacity: 0;
	pointer-events: none;
}
.hhs-hero__scroll-cue:hover,
.hhs-hero__scroll-cue:focus-visible {
	color: var(--hhs-cyan);
	transform: translateX(-50%) translateY(2px);
}
.hhs-hero__scroll-cue:focus-visible {
	outline: 2px solid var(--hhs-cyan);
	outline-offset: 4px;
	border-radius: 2px;
}
.hhs-hero__scroll-cue__chevron {
	width: 14px;
	height: 14px;
	display: block;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	animation: hhs-scroll-cue-bob 2.1s ease-in-out infinite;
}
@keyframes hhs-scroll-cue-bob {
	0%, 100% { transform: rotate(45deg) translate(-1px, -1px); opacity: 0.7; }
	50%      { transform: rotate(45deg) translate(2px, 2px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.hhs-hero__scroll-cue__chevron { animation: none; }
}

/* --- Ch03: clearance for the YOU ARE badge on selection --- */
@media (min-width: 1100px) {
	body[data-icp] .hhs-c03-grid-wrap {
		padding-right: calc(var(--hhs-pad-page) + 4rem);
	}
}

/* --- Ch01: tighten spacing between $80, "The math broke.", and the closing line --- */
.hhs-c01-cinematic-wrap {
	height: 80vh;
	height: 80dvh;
}
.hhs-c01-cinematic {
	height: 80vh;
	height: 80dvh;
}
.hhs-c01-pivot {
	padding-top: clamp(3rem, 6vh, 5rem);
	padding-bottom: clamp(3rem, 5vh, 4rem);
	gap: clamp(0.65rem, 1.4vh, 1.2rem);
}
.hhs-c01-pivot__body {
	margin-top: clamp(0.5rem, 1vh, 1rem);
}

/* No appearance animations on copy content. Standing rule (Jesse 2026-05-20):
 * content (headlines, body) renders fully visible on scroll. Only supportive
 * elements (rails, ornaments, arrows) animate. Overriding the legacy clip-path
 * sweep + blur + opacity reveal on the pivot statement and body. */
.hhs-c01-pivot__statement,
.hhs-c01-pivot.is-revealed .hhs-c01-pivot__statement {
	opacity: 1;
	clip-path: none;
	-webkit-clip-path: none;
	filter: none;
	transition: none;
}
.hhs-c01-pivot__body,
.hhs-c01-pivot.is-revealed .hhs-c01-pivot__body {
	opacity: 1;
	transform: none;
	transition: none;
}
/* The decorative "broke." red text-shadow glow can still ease in — that's a
 * decorative effect on top of already-rendered type, not a reveal of the type
 * itself. Keep. */
.hhs-c01-closing {
	padding-top: clamp(0.75rem, 1.5vh, 1.5rem);
	padding-bottom: clamp(2rem, 3.5vh, 3rem);
	gap: clamp(0.75rem, 1.5vh, 1.25rem);
}
/* Kill the legacy 180vh min-height on Ch01 — it forced ~300px of empty
 * dead space below the closing line when the section's content (cinematic-wrap
 * 80vh + pivot + closing) totals less than 180vh. Section now sizes to content. */
.hhs-chapter--01 {
	min-height: auto;
}
/* Ch02 top: collapse the chapter-section + console combined top padding so
 * the eyebrow ("Pick the number that pains you.") sits close to Ch01's closing
 * line. v1.12.2 reopened slightly — v1.12.1 was a hair too tight per Jesse. */
.hhs-chapter--02 {
	padding-top: 0;
}
.hhs-c02-console {
	padding-top: clamp(1.75rem, 3.5vh, 3rem);
}
.hhs-c02-console::before {
	top: clamp(1.75rem, 3.5vh, 3rem);
}

/* Ch02 dial gauge removed v1.12.3. Only the .hhs-c02-dial__caption banner
 * remains — re-style it as a standalone divider between the console head
 * and the two instrument cards. */
.hhs-c02-dial__caption {
	display: flex;
	align-items: center;
	gap: clamp(0.85rem, 2vw, 1.5rem);
	justify-content: center;
	margin: clamp(2rem, 4vh, 3rem) auto clamp(2rem, 4vh, 3rem);
	max-width: 56rem;
	font-family: var(--hhs-font-mono);
	font-size: var(--hhs-meta);
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.55);
}
.hhs-c02-dial__caption-rule {
	display: block;
	height: 1px;
	flex: 1 1 0;
	max-width: 7rem;
	background: currentColor;
	opacity: 0.45;
}

/* --- Ch03 payoff panel: cream document on the dark section.
 *
 * v1.12.4 (Jesse 2026-05-20): the panel used to inherit the chosen card's
 * accent color (gold for Spend-Saturated, etc), which read as "two gold cards"
 * because card AND panel both carried the same accent. Now the panel is a
 * cream/paper document — visually distinct from the dark cards above by
 * background + value + typography. The connection to the chosen card is
 * communicated by the repeated ICP name in the tag, plus a small inline
 * colored chip carrying the ICP's accent (the only chromatic tie). */
.hhs-c03-payoff {
	--c03-accent: var(--hhs-cyan);
	position: relative;
	max-width: 1100px;
	margin: clamp(2.5rem, 5vh, 4rem) auto 0;
	padding: clamp(2rem, 3.5vh, 2.75rem) clamp(1.75rem, 3.2vw, 2.75rem);
	background: var(--hhs-paper-1);
	border: 1px solid rgba(14, 14, 16, 0.08);
	border-radius: 4px;
	box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.7);
	display: none;
	flex-direction: column;
	gap: clamp(0.85rem, 1.6vh, 1.25rem);
}
/* Each chosen ICP threads its accent only through the colored chip + tag */
body[data-icp="capacity-bound"]       .hhs-c03-payoff { --c03-accent: var(--hhs-cyan); }
body[data-icp="spend-saturated"]      .hhs-c03-payoff { --c03-accent: var(--hhs-gold); }
body[data-icp="sale-prep"]            .hhs-c03-payoff { --c03-accent: var(--hhs-red); }
body[data-icp="portfolio-integrator"] .hhs-c03-payoff { --c03-accent: var(--hhs-tan); }

body[data-icp] .hhs-c03-payoff {
	display: flex;
	animation: hhs-c03-payoff-rise 380ms var(--hhs-ease-out);
}
@keyframes hhs-c03-payoff-rise {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.hhs-c03-payoff__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--hhs-font-mono);
	font-size: 0.74rem;
	letter-spacing: var(--hhs-tracking-mono);
	text-transform: uppercase;
	color: rgba(14, 14, 16, 0.62);
	margin: 0;
}
/* Inline accent chip — the only chromatic tie from chosen card to panel. */
.hhs-c03-payoff__tag::before {
	content: '';
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	background: var(--c03-accent);
	border-radius: 2px;
	flex: 0 0 auto;
}
.hhs-c03-payoff__h3 {
	font-family: var(--hhs-font-serif);
	font-weight: 400;
	font-style: italic;
	font-size: clamp(1.85rem, 2.8vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--hhs-black);
	margin: 0;
}
.hhs-c03-payoff__body {
	font-family: var(--hhs-font-sans);
	font-size: clamp(1rem, 1.25vw, 1.1rem);
	line-height: 1.55;
	color: rgba(14, 14, 16, 0.78);
	margin: 0;
	max-width: 62ch;
}
.hhs-c03-payoff__cta {
	align-self: flex-start;
	margin-top: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
	.hhs-c03-card.is-chosen { animation: none; }
	body[data-icp] .hhs-c03-payoff { animation: none; }
}

/* Also hide the post-grid foot hint until a card is chosen — once chosen it's redundant */
body[data-icp] .hhs-c03-grid-foot {
	display: none;
}