/* Gen AI Consulting V1 (signal design), interior-pages phase.
   Generated by scripts/build-genai-css.py from the signal mockup;
   scoped under .genai-v1. Do not edit by hand. */

/* Sparkhound interior page mockup: Gen AI Consulting / AI Consulting Services.
   Every token here derives from DESIGN-SYSTEM-HOMEPAGE-V1.md (client-approved
   Home V1). Two-tone headings, no eyebrows; teal accent on light, green on
   dark; hover-only motion; corner-anchored washes. */
/* Brand fonts pending (Interstate + Franklin Gothic, license arriving):
   when they land, add their @font-face blocks here and point --fontDisplay
   and --fontBody at them. Until then both roles resolve to Open Sans. */
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono@latest/latin-400-normal.woff2) format("woff2");
}
@font-face {
	font-family: "Open Sans Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 300 800;
	src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sans:vf@latest/latin-wght-normal.woff2) format("woff2-variations");
}
.genai-v1 {
	--fontPrimary: "Open Sans Variable", sans-serif;
	--fontDisplay: "Open Sans Variable", sans-serif;
	--fontBody: "Open Sans Variable", sans-serif;
	--brandGreen: #81be41;
	--brandTeal: #156b5e;
	--brandDarkGreen: #003830;
	--brandBlack: #171f27;
	--brandOffWhite: #f6f6f6;
	--darkGradient: linear-gradient(255.38deg, #2c665d 10.34%, #003830 100%);
	--bodyInk: rgba(23, 31, 39, 0.72);
	--site-max-width: 1184px;
}
.genai-v1 * { box-sizing: border-box; margin: 0; padding: 0; }
.genai-v1 {
	font-family: var(--fontBody);
	font-size: 16px;
	line-height: 1.8;
	color: var(--bodyInk);
	background: #fff;
}
.genai-v1 img { max-width: 100%; display: block; }
.genai-v1 a { color: var(--brandTeal); text-decoration: none; }
.genai-v1 a:focus-visible, .genai-v1 button:focus-visible, .genai-v1 summary:focus-visible {
	outline: 3px solid var(--brandGreen);
	outline-offset: 3px;
	border-radius: 4px;
}
.genai-v1 .container {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Type ---------- */
.genai-v1 h1, .genai-v1 h2, .genai-v1 h3 { line-height: 1.25; color: var(--brandDarkGreen); font-family: var(--fontDisplay); }
.genai-v1 h1 { font-size: clamp(38px, 5vw, 54px); font-weight: 700; }
.genai-v1 h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; }
.genai-v1 h3 { font-size: 18px; font-weight: 700; color: var(--brandBlack); }
.genai-v1 .h-accent { color: var(--brandTeal); }
.genai-v1 .band-dark h1, .genai-v1 .band-dark h2 { color: #fff; }
.genai-v1 .band-dark .h-accent { color: var(--brandGreen); }
.genai-v1 .section-intro {
	max-width: 640px;
	margin: 16px auto 0;
}
.genai-v1 .center { text-align: center; }
.genai-v1 .center .section-intro { margin-left: auto; margin-right: auto; }

/* ---------- Buttons (theme .btn language: dark sweep, no lift) ----------
   Mirrors the live/staging .btn behavior: a dark green layer sweeps in from
   the left over 0.4s while the label flips white. No transform. */
.genai-v1 .btn {
	display: inline-block;
	font-family: var(--fontDisplay);
	padding: 18px 44px;
	border-radius: 50px;
	border: 1px solid var(--brandGreen);
	background-color: var(--brandGreen);
	color: var(--brandDarkGreen);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: border-color 0.4s ease-in-out, color 0.4s ease-in-out;
}
.genai-v1 .btn span {
	position: relative;
	z-index: 1;
}
.genai-v1 .btn::before {
	content: "";
	position: absolute;
	inset: 0 100% 0 0;
	background-color: #2c665d;
	border-radius: 0 50px 50px 0;
	transition: all 0.4s ease-in-out;
}
.genai-v1 .btn:hover, .genai-v1 .btn:focus-visible, .genai-v1 .btn:active {
	border-color: #2c665d;
	color: #fff;
}
.genai-v1 .btn:hover::before, .genai-v1 .btn:focus-visible::before, .genai-v1 .btn:active::before {
	inset: 0;
	border-radius: 50px;
}
.genai-v1 .link-arrow {
	font-weight: 700;
	color: var(--brandTeal);
	transition: color 0.35s ease;
}
.genai-v1 .link-arrow::after { content: " \2192"; }
@media (hover: hover) {
	.genai-v1 .link-arrow:hover { color: var(--brandDarkGreen); }
}

/* ---------- TBD blocks (design-ahead-of-copy markers) ---------- */
.genai-v1 .tbd-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brandTeal);
	background: rgba(21, 107, 94, 0.06);
	border: 1px dashed rgba(21, 107, 94, 0.5);
	border-radius: 999px;
	padding: 4px 12px;
	line-height: 1.4;
}
.genai-v1 .band-dark .tbd-chip {
	color: var(--brandOffWhite);
	background: rgba(246, 246, 246, 0.06);
	border-color: rgba(246, 246, 246, 0.45);
}

/* ---------- Header stub (global chrome, unchanged in build) ---------- */
.genai-v1 .site-header {
	background: #fff;
	border-bottom: 1px solid rgba(0, 56, 48, 0.1);
}
.genai-v1 .site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 82px;
}
.genai-v1 .site-header svg { display: block; height: 34px; width: auto; }
.genai-v1 .stub-nav { display: flex; gap: 28px; font-size: 15px; font-weight: 600; }
.genai-v1 .stub-nav span { color: var(--brandBlack); opacity: 0.75; }
.genai-v1 .chrome-note {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bodyInk);
	opacity: 0.6;
}
@media (max-width: 767px) {
	.genai-v1 .stub-nav { display: none; }
}

/* ---------- Hero: noise to signal ----------
   A wall of raw AI-work artifacts (code, prompts, configs, governance
   vocabulary) in mono type melts through a progressive blur (stacked masked
   backdrop-filter layers, half-overlapping windows) into calm brand color.
   The only crisp thing is the message. The blur is the consulting. */
.genai-v1 .hero {
	background-color: var(--brandBlack);
	color: rgba(246, 246, 246, 0.85);
	padding: 150px 0 170px;
	position: relative;
	overflow: hidden;
}
.genai-v1 .hero-noise {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.genai-v1 .noise-wall {
	position: absolute;
	inset: -2% -3%;
	font-family: "JetBrains Mono", monospace;
	font-size: 13px;
	line-height: 2.05;
	color: rgba(246, 246, 246, 0.13);
	white-space: nowrap;
	overflow: hidden;
}
.genai-v1 .noise-row { margin: 0; }
/* No ambient drift: any animation under the stacked backdrop-filters forces
   a full re-blur every frame (measured 17fps vs 61fps static). The wall is
   static; life comes from the focus lens and the scroll reveals instead. */
/* Light layers ride ABOVE the blur stack: they are already soft, so they
   lose nothing by skipping the blur, and up here they animate without
   invalidating the backdrop (the drift lesson). Cyan is still; teal
   breathes; the green ignition is the attention light, driven in JS to
   follow the cursor and park at the melt horizon at rest. */
.genai-v1 .light-cyan, .genai-v1 .light-teal {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.genai-v1 .light-cyan { background: radial-gradient(1000px 620px at 12% 4%, rgba(106, 197, 214, 0.2), transparent 62%); }
.genai-v1 .light-teal {
	background: radial-gradient(1400px 800px at 50% 74%, rgba(21, 107, 94, 0.42), transparent 68%);
	transform-origin: 50% 72%;
	will-change: transform, opacity;
}
@media (prefers-reduced-motion: no-preference) {
	.genai-v1 .light-teal { animation: tealBreathe 14s ease-in-out infinite alternate; }
}
/* Self-regulating quality gate: a load-time fps probe adds .low-fx on
   machines that cannot hold frame rate; ambient and parting effects drop,
   the lens and attention light stay. */
.genai-v1 html.low-fx .light-teal { animation: none; }
@keyframes tealBreathe {
	from { opacity: 0.82; transform: scale(1); }
	to { opacity: 1; transform: scale(1.05); }
}
/* Tease bolt: the brand spark hides at whisper opacity over the wall and
   ignites only when the cursor haze reaches it (proximity-driven in JS). */
.genai-v1 .hero-bolt {
	position: absolute;
	/* Anchored to the content column, not the viewport, so wide screens do
	   not carry it off to the right. */
	left: calc(50% + 290px);
	top: 16%;
	width: 190px;
	height: auto;
	opacity: 0.07;
	will-change: transform, opacity;
	pointer-events: none;
	/* Nested in the fog at rest (under the blur layers, z auto, softly
	   defocused); ignition lifts it above the stack and snaps it crisp. */
	filter: blur(1.6px);
	transition: filter 0.45s ease;
}
.genai-v1 .hero-bolt.is-lit {
	z-index: 9;
	filter: blur(0);
}
.genai-v1 .light-green {
	position: absolute;
	left: 72%;
	top: 60%;
	width: 980px;
	height: 620px;
	margin: -310px 0 0 -490px;
	/* Two offset lobes so the glow reads as an amorphous haze, not a disc. */
	background:
		radial-gradient(46% 52% at 42% 44%, rgba(129, 190, 65, 0.3), transparent 74%),
		radial-gradient(52% 46% at 60% 60%, rgba(129, 190, 65, 0.22), transparent 78%);
	opacity: 0.7;
	will-change: transform, opacity;
	pointer-events: none;
}
/* Progressive blur band over the lower ~78%: eight steps, doubling blur,
   each mask window shifted 12.5% and overlapping its neighbour by half. */
.genai-v1 .hero-blur {
	position: absolute;
	inset: auto 0 0 0;
	height: 84%;
	pointer-events: none;
}
.hero-blur > div,
.hero-blur::before,
.genai-v1 .hero-blur::after {
	position: absolute;
	inset: 0;
}
.genai-v1 .hero-blur::before {
	content: "";
	z-index: 1;
	-webkit-backdrop-filter: blur(0.5px);
	backdrop-filter: blur(0.5px);
	mask: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%);
}
.genai-v1 .hero-blur > div:nth-of-type(1) {
	z-index: 2;
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
	mask: linear-gradient(to bottom, rgba(0,0,0,0) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,0) 50%);
}
.genai-v1 .hero-blur > div:nth-of-type(2) {
	z-index: 3;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	mask: linear-gradient(to bottom, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 62.5%);
}
.genai-v1 .hero-blur > div:nth-of-type(3) {
	z-index: 4;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	mask: linear-gradient(to bottom, rgba(0,0,0,0) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,0) 75%);
}
.genai-v1 .hero-blur > div:nth-of-type(4) {
	z-index: 5;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	mask: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 87.5%);
}
.genai-v1 .hero-blur > div:nth-of-type(5) {
	z-index: 6;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	mask: linear-gradient(to bottom, rgba(0,0,0,0) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,0) 100%);
}
.genai-v1 .hero-blur > div:nth-of-type(6) {
	z-index: 7;
	-webkit-backdrop-filter: blur(32px);
	backdrop-filter: blur(32px);
	mask: linear-gradient(to bottom, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,1) 100%);
}
.genai-v1 .hero-blur::after {
	content: "";
	z-index: 8;
	-webkit-backdrop-filter: blur(64px);
	backdrop-filter: blur(64px);
	mask: linear-gradient(to bottom, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%);
}
/* Contrast shade under the content zone. */
.genai-v1 .noise-shade {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to bottom, rgba(23, 31, 39, 0) 34%, rgba(23, 31, 39, 0.55) 66%, rgba(23, 31, 39, 0.78) 100%),
		radial-gradient(880px 520px at 22% 78%, rgba(23, 31, 39, 0.55), transparent 70%);
}
/* Focus lens: a crisp copy of the wall revealed in a cursor-following
   window. Desktop pointer only; wired up in the motion init. */
.genai-v1 .hero .container { position: relative; z-index: 2; }
.genai-v1 .hero-inner { max-width: 920px; }
.genai-v1 .hero h1 {
	/* Matches the staging homepage hero H1: 72px / 700 / 1.1, no tracking. */
	font-size: clamp(42px, 6vw, 72px);
	font-weight: 700;
	line-height: 1.1;
}
.genai-v1 .hero p.lede {
	margin-top: 26px;
	font-size: clamp(17px, 1.7vw, 20px);
	line-height: 1.7;
	max-width: 640px;
}
.genai-v1 .hero-ctas {
	margin-top: 40px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}
.genai-v1 .hero-secondary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: rgba(246, 246, 246, 0.8);
	font-weight: 600;
	font-size: 15px;
}

/* ---------- By the Numbers ---------- */
.genai-v1 .stats {
	background: var(--brandOffWhite);
	padding: 84px 0 88px;
}
.genai-v1 .stats h2 { font-size: clamp(20px, 2vw, 24px); }
.genai-v1 .stats-grid {
	margin-top: 44px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
.genai-v1 .stat {
	border-top: 1px solid rgba(0, 56, 48, 0.14);
	padding-top: 24px;
}
.genai-v1 .stat-figure {
	font-family: var(--fontDisplay);
	font-size: clamp(46px, 5vw, 64px);
	font-weight: 800;
	line-height: 1;
	color: var(--brandDarkGreen);
	letter-spacing: -0.01em;
}
.genai-v1 .stat-figure sup { font-size: 0.45em; font-weight: 700; color: var(--brandTeal); }
.genai-v1 .stat p { margin-top: 12px; font-size: 15px; line-height: 1.6; }
.genai-v1 .stat-tbd {
	border: 1px dashed rgba(0, 56, 48, 0.3);
	border-top-style: dashed;
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	justify-content: center;
}
.genai-v1 .stat-tbd p { font-size: 14px; margin-top: 0; }

/* ---------- Pain points (brand-black band, 2025 palette #171F27) ----------
   Second dark voice so the green gradient stays reserved for Sparkhound-
   subject bands (hero, solutions). Carries the brand's bolt device as a
   faint background mark: its first use on the site. */
.genai-v1 .pains {
	padding: 120px 0 128px;
	background-color: var(--brandBlack);
	background-image:
		radial-gradient(1100px 760px at 10% 6%, rgba(106, 197, 214, 0.07), transparent 68%),
		radial-gradient(820px 600px at 94% 94%, rgba(129, 190, 65, 0.06), transparent 62%);
	color: rgba(246, 246, 246, 0.82);
	position: relative;
	overflow: hidden;
}
.genai-v1 .pains .container { position: relative; }
.genai-v1 .cards-3 {
	margin-top: 52px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.genai-v1 .pain-card {
	background: rgba(246, 246, 246, 0.055);
	border-radius: 16px;
	padding: 32px 28px 30px;
	transition: background-color 0.35s ease, transform 0.35s ease;
}
@media (hover: hover) {
	.genai-v1 .pain-card:hover {
		background-color: rgba(246, 246, 246, 0.09);
		transform: translateY(-2px);
	}
}
.genai-v1 .icon-chip {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: rgba(246, 246, 246, 0.08);
	color: var(--brandOffWhite);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
	transition: background-color 0.35s ease;
}
.genai-v1 .icon-chip svg { width: 36px; height: 36px; display: block; transition: transform 0.35s ease; }
@media (hover: hover) {
	.genai-v1 .pain-card:hover .icon-chip { background: rgba(129, 190, 65, 0.16); }
	.genai-v1 .pain-card:hover .icon-chip svg { transform: scale(1.1); }
}
.genai-v1 .pain-card h3 { font-size: 19px; line-height: 1.4; color: #fff; }
.genai-v1 .pain-card p { margin-top: 12px; font-size: 15px; line-height: 1.7; }

/* ---------- Why Sparkhound ---------- */
.genai-v1 .why {
	background: var(--brandOffWhite);
	padding: 120px 0 128px;
}
.genai-v1 .why-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 64px;
	align-items: center;
}
.genai-v1 .why-media {
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}
.genai-v1 .why-media img {
	width: 100%;
	height: 118%;
	object-fit: cover;
	will-change: transform;
}
.genai-v1 .why-items { margin-top: 40px; display: flex; flex-direction: column; }
.genai-v1 .why-item {
	padding: 26px 0;
	border-top: 1px solid rgba(0, 56, 48, 0.14);
}
.genai-v1 .why-item h3 { font-size: 18px; }
.genai-v1 .why-item p { margin-top: 8px; font-size: 15px; line-height: 1.7; }

/* ---------- How We Help (dark band, Industries card pattern) ---------- */
.genai-v1 .solutions {
	background-image:
		radial-gradient(1200px 860px at 82% 12%, rgba(106, 197, 214, 0.12), transparent 68%),
		radial-gradient(900px 700px at 8% 92%, rgba(129, 190, 65, 0.08), transparent 62%),
		var(--darkGradient);
	padding: 120px 0 64px;
	color: rgba(246, 246, 246, 0.82);
}
.genai-v1 .solutions .section-intro { color: rgba(246, 246, 246, 0.82); }
.genai-v1 .sol-grid {
	max-width: 1080px;
	margin: 56px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}
.genai-v1 .sol-card {
	flex: 0 0 calc(33.333% - 16px);
	background: rgba(0, 26, 22, 0.25);
	border-radius: 16px;
	padding: 28px 26px 26px;
	transition: background-color 0.35s ease, transform 0.35s ease;
}
.genai-v1 .sol-card h3 { color: #fff; font-size: 19px; transition: color 0.35s ease; }
.genai-v1 .sol-card p { margin-top: 10px; font-size: 15px; line-height: 1.7; }
.genai-v1 .sol-icon {
	color: var(--brandOffWhite);
	margin: 0 auto 14px;
	transition: color 0.35s ease, transform 0.35s ease;
	will-change: transform;
	width: 40px;
	height: 40px;
}
.genai-v1 .sol-icon svg { width: 40px; height: 40px; display: block; }
@media (hover: hover) {
	.genai-v1 .sol-card:hover {
		background-color: rgba(0, 26, 22, 0.4);
		transform: translateY(-2px);
	}
	.genai-v1 .sol-card:hover .sol-icon { color: var(--brandGreen); transform: scale(1.08); }
	.genai-v1 .sol-card:hover h3 { color: var(--brandGreen); }
}

/* ---------- Tech stack strip ---------- */
.genai-v1 .stack {
	padding: 88px 0 92px;
	border-bottom: 1px solid rgba(0, 56, 48, 0.08);
}
.genai-v1 .stack h2 { font-size: clamp(20px, 2vw, 24px); }
.genai-v1 .stack-marks {
	margin-top: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px 72px;
}
.genai-v1 .stack-mark {
	font-weight: 700;
	font-size: 26px;
	color: rgba(23, 31, 39, 0.5);
	transition: color 0.35s ease, transform 0.35s ease, filter 0.35s ease;
	line-height: 1.2;
}
@media (hover: hover) {
	.genai-v1 .stack-mark:hover {
		color: rgba(23, 31, 39, 0.8);
		transform: scale(1.06);
		filter: drop-shadow(0 8px 20px rgba(129, 190, 65, 0.4));
	}
}
.genai-v1 .stack-note { margin-top: 28px; font-size: 13px; opacity: 0.75; }

/* ---------- How We Work (numbered rail: a real sequence) ----------
   Each step is a subgrid column sharing four row tracks (heading, rail,
   bolt, body), so the circles stay on one line however the headings wrap.
   The rail is drawn per step and bridges the column gap, so it meets the
   neighboring segment mid-gap with no breaks; circles sit on top of it. */
.genai-v1 .process { padding: 120px 0 128px; }
.genai-v1 .steps {
	margin-top: 64px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto auto auto auto;
	column-gap: 32px;
}
.genai-v1 .step {
	text-align: center;
	padding: 0 8px;
}
@media (min-width: 992px) {
	.genai-v1 .step {
		display: grid;
		grid-row: 1 / 5;
		grid-template-rows: subgrid;
	}
}
.genai-v1 .step h3 {
	font-size: 17px;
	line-height: 1.4;
	margin: 18px 0 10px;
}
.genai-v1 .step-rail {
	position: relative;
	display: flex;
	justify-content: center;
}
.genai-v1 .step-rail::before {
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -1px;
	height: 2px;
	left: -24px;
	right: -24px;
	background: rgba(129, 190, 65, 0.55);
}
.genai-v1 .step:first-child .step-rail::before { left: 50%; }
.genai-v1 .step:last-child .step-rail::before { right: 50%; }
.genai-v1 .step-num {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--brandDarkGreen);
	color: #fff;
	font-weight: 700;
	font-size: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	border: 2px solid var(--brandDarkGreen);
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.genai-v1 .step-bolt {
	height: 26px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-bottom: 12px;
	color: var(--brandGreen);
}
.genai-v1 .step-bolt svg { width: 22px; height: 22px; display: block; }
@media (hover: hover) {
	.genai-v1 .step:hover .step-num {
		background: var(--brandGreen);
		border-color: var(--brandGreen);
		color: var(--brandDarkGreen);
		transform: translateY(-2px);
	}
	.genai-v1 .step-bolt {
		opacity: 0;
		transform: translateY(8px) scale(0.7);
		transition: opacity 0.35s ease, transform 0.35s ease;
	}
	.genai-v1 .step:hover .step-bolt {
		opacity: 1;
		transform: none;
		transition-delay: 0.05s;
	}
}
.genai-v1 .step p { margin-top: 0; font-size: 14.5px; line-height: 1.7; }

/* ---------- Testimonial ---------- */
.genai-v1 .quote-band {
	background-color: var(--brandBlack);
	/* Horizon light: one long edge glow instead of corner spot washes. */
	background-image:
		linear-gradient(to top, rgba(21, 107, 94, 0.3) 0%, rgba(129, 190, 65, 0.07) 22%, transparent 46%);
	color: rgba(246, 246, 246, 0.9);
	padding: 108px 0 112px;
	position: relative;
	overflow: hidden;
}
.genai-v1 .quote-band .container { position: relative; z-index: 1; text-align: center; }
.genai-v1 .quote-band blockquote { margin-left: auto; margin-right: auto; }
.genai-v1 .quote-band .container { max-width: 900px; }
.genai-v1 .quote-mark {
	font-size: 72px;
	line-height: 1;
	font-weight: 800;
	color: var(--brandGreen);
	display: block;
	height: 44px;
}
.genai-v1 blockquote p {
	font-size: clamp(21px, 2.6vw, 28px);
	line-height: 1.55;
	font-weight: 600;
	color: #fff;
}
.genai-v1 .quote-attr { margin-top: 26px; font-size: 15px; }
.genai-v1 .quote-attr strong { color: #fff; }
.genai-v1 .quote-band .link-arrow { color: var(--brandGreen); display: inline-block; margin-top: 26px; }
@media (hover: hover) {
	.genai-v1 .quote-band .link-arrow:hover { color: #fff; }
}

/* ---------- Case studies ---------- */
.genai-v1 .cases {
	background: var(--brandOffWhite);
	padding: 120px 0 128px;
}
.genai-v1 .case-card {
	background: #fff;
	border: 1px solid rgba(0, 56, 48, 0.08);
	border-radius: 16px;
	padding: 36px 30px 34px;
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
@media (hover: hover) {
	.genai-v1 .case-card:hover {
		transform: translateY(-2px);
		border-color: rgba(129, 190, 65, 0.55);
		box-shadow: 0 14px 30px rgba(0, 56, 48, 0.08);
	}
}
.genai-v1 .case-figure {
	font-family: var(--fontDisplay);
	font-size: clamp(32px, 3.2vw, 42px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--brandTeal);
	letter-spacing: -0.01em;
}
.genai-v1 .case-figure-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--bodyInk);
	margin-top: 6px;
	opacity: 0.8;
}
.genai-v1 .case-card h3 { margin-top: 22px; font-size: 18px; }
.genai-v1 .case-card p { margin-top: 10px; font-size: 15px; line-height: 1.7; }
.genai-v1 .cases-cta { margin-top: 48px; text-align: center; }

/* ---------- Final CTA (the brand ramp closes the page) ----------
   Direction B's sanctioned gradient, spent here at reduced loudness: dark
   end under the content, green igniting the top corner. White button pops
   on the green-family field; accent uses the guide's light-green stop. */
.genai-v1 .final-cta {
	padding: 170px 0 190px;
	background-color: var(--brandBlack);
	/* Same horizon-light treatment as the testimonial band. */
	background-image:
		linear-gradient(to top, rgba(21, 107, 94, 0.3) 0%, rgba(129, 190, 65, 0.07) 22%, transparent 46%);
	position: relative;
	overflow: hidden;
}
.genai-v1 .final-cta .container { position: relative; z-index: 1; }
.genai-v1 .final-cta .btn { margin-top: 38px; }
.genai-v1 .btn--white {
	background-color: #fff;
	border-color: #fff;
	color: var(--brandDarkGreen);
}
.genai-v1 .btn--white:hover, .genai-v1 .btn--white:focus-visible, .genai-v1 .btn--white:active {
	border-color: #2c665d;
	color: #fff;
}

/* ---------- From The Spark ---------- */
.genai-v1 .resources {
	background: var(--brandOffWhite);
	padding: 104px 0 112px;
}
.genai-v1 .res-grid {
	margin-top: 48px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.genai-v1 .res-card {
	border: 1px dashed rgba(0, 56, 48, 0.3);
	border-radius: 16px;
	padding: 26px;
	background: rgba(255, 255, 255, 0.6);
}
.genai-v1 .res-thumb {
	height: 120px;
	border-radius: 10px;
	background: rgba(0, 56, 48, 0.07);
	margin-bottom: 20px;
}
.genai-v1 .res-line { height: 12px; border-radius: 6px; background: rgba(0, 56, 48, 0.12); margin-bottom: 10px; }
.genai-v1 .res-line.short { width: 60%; }
.genai-v1 .res-note { margin-top: 24px; font-size: 13px; opacity: 0.75; text-align: center; }

/* ---------- Related cross-links (v9: quiet link row before the FAQ) ----------
   Continues the resources band's off-white surface; a plain body-size row,
   not a heading. No border, no card chrome, no icon. */
.genai-v1 .related {
	background: var(--brandOffWhite);
	padding: 0 0 88px;
}
.genai-v1 .related-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 28px;
	font-size: 15px;
	line-height: 1.7;
}
.genai-v1 .related-label { font-weight: 600; }
.genai-v1 .related-row .link-arrow { font-size: 15px; }

/* ---------- FAQ ---------- */
.genai-v1 .faq { padding: 120px 0 132px; }
.genai-v1 .faq .container { max-width: 880px; }
.genai-v1 .faq h2 { text-align: center; }
.genai-v1 .faq-list { margin-top: 48px; }
.genai-v1 .faq-item { border-bottom: 1px solid rgba(0, 56, 48, 0.12); }
.genai-v1 .faq-item:first-child { border-top: 1px solid rgba(0, 56, 48, 0.12); }
.genai-v1 .faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 4px;
	transition: color 0.35s ease;
}
.genai-v1 .faq-item summary::-webkit-details-marker { display: none; }
.genai-v1 .faq-item summary h3 { font-size: 17px; line-height: 1.45; transition: color 0.35s ease; }
.genai-v1 .faq-toggle {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid rgba(0, 56, 48, 0.3);
	color: var(--brandDarkGreen);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.genai-v1 .faq-toggle::before { content: "+"; }
.genai-v1 .faq-item[open] .faq-toggle::before { content: "\2212"; }
@media (hover: hover) {
	.genai-v1 .faq-item summary:hover h3 { color: var(--brandTeal); }
	.genai-v1 .faq-item summary:hover .faq-toggle {
		background: rgba(129, 190, 65, 0.16);
		border-color: rgba(129, 190, 65, 0.55);
	}
}
.genai-v1 .faq-body { padding: 0 4px 26px; max-width: 800px; }
.genai-v1 .faq-body p { font-size: 15px; line-height: 1.75; }
.genai-v1 .faq-body .tbd-chip { margin-bottom: 12px; }

/* ---------- Footer stub ---------- */
.genai-v1 .site-footer {
	background: var(--brandDarkGreen);
	color: rgba(246, 246, 246, 0.7);
	padding: 44px 0;
}
.genai-v1 .site-footer .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.genai-v1 .site-footer svg { height: 30px; width: auto; display: block; }
.genai-v1 .site-footer .chrome-note { color: rgba(246, 246, 246, 0.55); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.genai-v1 .btn::before { transition: none; }
	.pain-card:hover, .sol-card:hover, .case-card:hover,
	.pain-card:hover .icon-chip svg, .sol-card:hover .sol-icon,
	.genai-v1 .step:hover .step-num, .genai-v1 .stack-mark:hover { transform: none; }
	.genai-v1 .step-bolt, .genai-v1 .step:hover .step-bolt { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.genai-v1 .hero { padding: 76px 0 84px; }
	.genai-v1 .noise-wall { font-size: 11px; line-height: 2; }
	.genai-v1 .hero-bolt { width: 110px; left: auto; right: 6%; opacity: 0.05; }
	.genai-v1 .hero-blur::before, .genai-v1 .hero-blur > div:nth-of-type(1) { display: none; }
	.genai-v1 .hero { padding: 86px 0 104px; }
	.genai-v1 .stats-grid, .genai-v1 .cards-3, .genai-v1 .res-grid { grid-template-columns: 1fr 1fr; }
	.genai-v1 .sol-card { flex-basis: calc(50% - 12px); }
	.genai-v1 .why-grid { grid-template-columns: 1fr; gap: 40px; }
	.genai-v1 .steps { grid-template-columns: 1fr 1fr; gap: 44px 32px; }
	.genai-v1 .step-rail::before { content: none; }
	.genai-v1 .pains, .genai-v1 .why, .genai-v1 .cases, .genai-v1 .process, .genai-v1 .faq { padding: 84px 0 92px; }
	.genai-v1 .solutions { padding: 84px 0 48px; }
}
@media (max-width: 640px) {
	.genai-v1 .stats-grid, .genai-v1 .cards-3, .genai-v1 .res-grid, .genai-v1 .steps { grid-template-columns: 1fr; }
	.genai-v1 .sol-card { flex-basis: 100%; }
	.genai-v1 .hero-ctas { align-items: flex-start; flex-direction: column; }
	.genai-v1 .stack-marks { gap: 20px 44px; }
	.genai-v1 .stack-mark { font-size: 21px; }
}
/* ---------- Motion foundation (gsap-lenis-motion) ----------
   Elements hide only under html.has-motion (JS-applied); a 2s failsafe
   strips the class so a failed CDN degrades to the static page. */
html.has-motion [data-reveal],
html.has-motion [data-reveal-item],
html.has-motion .genai-v1 [data-image-reveal] { visibility: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* Grain over dark gradients: kills banding, reads as material. */
.genai-v1 .grain::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}