/* Managed Services V1. Generated by scripts/build-services-port.py from
   mockups/managed-services.html; scoped under .services-v1. Do not edit by hand. */

/* Sparkhound interior page mockup: Managed Services hub. Sixth page of the
   service-page template family, derived from the Gen AI signal design.
   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");
}
@font-face {
	font-family: "Open Sans Variable";
	font-style: italic;
	font-display: swap;
	font-weight: 300 800;
	src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sans:vf@latest/latin-wght-italic.woff2) format("woff2-variations");
}
.services-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;
}
.services-v1 * { box-sizing: border-box; margin: 0; padding: 0; }
.services-v1 {
	font-family: var(--fontBody);
	font-size: 16px;
	line-height: 1.8;
	color: var(--bodyInk);
	background: #fff;
}
.services-v1 img { max-width: 100%; display: block; }
.services-v1 a { color: var(--brandTeal); text-decoration: none; }
.services-v1 a:focus-visible, .services-v1 button:focus-visible, .services-v1 summary:focus-visible {
	outline: 3px solid var(--brandGreen);
	outline-offset: 3px;
	border-radius: 4px;
}
.services-v1 .container {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Type ---------- */
.services-v1 h1, .services-v1 h2, .services-v1 h3 { line-height: 1.25; color: var(--brandDarkGreen); font-family: var(--fontDisplay); }
.services-v1 h1 { font-size: clamp(38px, 5vw, 54px); font-weight: 700; }
.services-v1 h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; }
.services-v1 h3 { font-size: 18px; font-weight: 700; color: var(--brandBlack); }
.services-v1 .h-accent { color: var(--brandTeal); }
.services-v1 .band-dark h1, .services-v1 .band-dark h2 { color: #fff; }
.services-v1 .band-dark .h-accent { color: var(--brandGreen); }
.services-v1 .section-intro {
	max-width: 640px;
	margin: 16px auto 0;
}
.services-v1 .center { text-align: center; }
.services-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. */
.services-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;
}
.services-v1 .btn span {
	position: relative;
	z-index: 1;
}
.services-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;
}
.services-v1 .btn:hover, .services-v1 .btn:focus-visible, .services-v1 .btn:active {
	border-color: #2c665d;
	color: #fff;
}
.services-v1 .btn:hover::before, .services-v1 .btn:focus-visible::before, .services-v1 .btn:active::before {
	inset: 0;
	border-radius: 50px;
}
.services-v1 .link-arrow {
	font-weight: 700;
	color: var(--brandTeal);
	transition: color 0.35s ease;
}
.services-v1 .link-arrow::after { content: " \2192"; }
@media (hover: hover) {
	.services-v1 .link-arrow:hover { color: var(--brandDarkGreen); }
}

/* ---------- TBD blocks (design-ahead-of-copy markers) ---------- */
.services-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;
}
.services-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) ---------- */
.services-v1 .site-header {
	background: #fff;
	border-bottom: 1px solid rgba(0, 56, 48, 0.1);
}
.services-v1 .site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 82px;
}
.services-v1 .site-header svg { display: block; height: 34px; width: auto; }
.services-v1 .stub-nav { display: flex; gap: 28px; font-size: 15px; font-weight: 600; }
.services-v1 .stub-nav span { color: var(--brandBlack); opacity: 0.75; }
.services-v1 .chrome-note {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bodyInk);
	opacity: 0.6;
}
@media (max-width: 767px) {
	.services-v1 .stub-nav { display: none; }
}

/* ---------- Hero: noise to signal ----------
   This page's identity: the coverage grid. A week of hours, every cell
   filled, with the escalation ladder and its written response times in
   the right margin. The page's whole argument is that the chart has no
   holes in it; a break/fix chart would be empty except for the spikes.
   Sixth texture family after prose (Gen AI), code (CAD/DAS), feed
   (Managed Cloud), line-work (ITIS), and the findings register (Security
   Assessments). Kept STATIC: any animation under the
   stacked backdrop-filters forces a full re-blur every frame (the drift
   lesson). */
.services-v1 .hero {
	background-color: var(--brandBlack);
	color: rgba(246, 246, 246, 0.85);
	padding: 150px 0 170px;
	position: relative;
	overflow: hidden;
}
.services-v1 .hero-noise {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.services-v1 .grid-wall {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.services-v1 .grid-wall svg {
	width: 100%;
	height: 100%;
	display: block;
	font-family: "JetBrains Mono", monospace;
}
/* 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. */
.services-v1 .light-cyan, .services-v1 .light-teal {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.services-v1 .light-cyan { background: radial-gradient(1000px 620px at 12% 4%, rgba(106, 197, 214, 0.2), transparent 62%); }
.services-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) {
	.services-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. */
html.low-fx .services-v1 .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). */
.services-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;
}
.services-v1 .hero-bolt.is-lit {
	z-index: 9;
	filter: blur(0);
}
.services-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. */
.services-v1 .hero-blur {
	position: absolute;
	inset: auto 0 0 0;
	height: 84%;
	pointer-events: none;
}
.hero-blur > div,
.hero-blur::before,
.services-v1 .hero-blur::after {
	position: absolute;
	inset: 0;
}
.services-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%);
}
.services-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%);
}
.services-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%);
}
.services-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%);
}
.services-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%);
}
.services-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%);
}
.services-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%);
}
.services-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. */
.services-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%);
}
.services-v1 .hero .container { position: relative; z-index: 2; }
.services-v1 .hero-inner { max-width: 920px; }
.services-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;
}
.services-v1 .hero p.lede {
	margin-top: 26px;
	font-size: clamp(17px, 1.7vw, 20px);
	line-height: 1.7;
	max-width: 640px;
}
.services-v1 .hero-ctas {
	margin-top: 40px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}
.services-v1 .hero-secondary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: rgba(246, 246, 246, 0.8);
	font-weight: 600;
	font-size: 15px;
	transition: color 0.35s ease;
}
.services-v1 a.hero-secondary::after { content: " \2192"; }
@media (hover: hover) {
	.services-v1 a.hero-secondary:hover { color: var(--brandGreen); }
}

/* ---------- By the numbers ----------
   v9 supplies three hard client stats (LCMC help desk cost, EMR call
   volume, endpoints under EDR), so the band runs the exemplar's 3-up
   figure-plus-source anatomy. */
.services-v1 .stats {
	background: var(--brandOffWhite);
	padding: 84px 0 88px;
}
.services-v1 .stats h2 { font-size: clamp(20px, 2vw, 24px); }
.services-v1 .stats-grid {
	margin-top: 44px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px 32px;
}
.services-v1 .stat {
	border-top: 1px solid rgba(0, 56, 48, 0.14);
	padding-top: 24px;
}
.services-v1 .stat-figure {
	font-family: var(--fontDisplay);
	font-size: clamp(38px, 3.8vw, 54px);
	font-weight: 800;
	line-height: 1;
	color: var(--brandDarkGreen);
	letter-spacing: -0.01em;
}
.services-v1 .stat-figure--word {
	font-style: italic;
	font-size: clamp(24px, 2.5vw, 31px);
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.services-v1 .stat-figure--tight {
	font-size: clamp(27px, 2.7vw, 37px);
	letter-spacing: -0.02em;
}
.services-v1 .stat-figure sup { font-size: 0.45em; font-weight: 700; color: var(--brandTeal); }
.services-v1 .stats-note {
	margin-top: 36px;
	font-size: 13px;
	opacity: 0.8;
}
.services-v1 .stat-qual {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brandTeal);
	margin-bottom: 6px;
}
.services-v1 .stat-qual--inline {
	display: inline-block;
	margin: 0 10px 0 0;
	vertical-align: baseline;
}
.services-v1 .stat p { margin-top: 12px; font-size: 15px; line-height: 1.6; }
.services-v1 .stat-tbd {
	border: 1px dashed rgba(0, 56, 48, 0.3);
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	justify-content: center;
}
.services-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). */
.services-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;
}
.services-v1 .pains .container { position: relative; }
@media (min-width: 992px) {
	.services-v1 .cases .cards-3 { grid-template-columns: repeat(2, 1fr); }
}
.services-v1 .cards-3 {
	margin-top: 52px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.services-v1 .cards-4 { grid-template-columns: repeat(2, 1fr); }
.services-v1 .cards-2 {
	grid-template-columns: repeat(2, 1fr);
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
}
.services-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) {
	.services-v1 .pain-card:hover {
		background-color: rgba(246, 246, 246, 0.09);
		transform: translateY(-2px);
	}
}
.services-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;
}
.services-v1 .icon-chip svg { width: 36px; height: 36px; display: block; transition: transform 0.35s ease; }
@media (hover: hover) {
	.services-v1 .pain-card:hover .icon-chip { background: rgba(129, 190, 65, 0.16); }
	.services-v1 .pain-card:hover .icon-chip svg { transform: scale(1.1); }
}
.services-v1 .pain-card h3 { font-size: 19px; line-height: 1.4; color: #fff; }
.services-v1 .pain-card p { margin-top: 12px; font-size: 15px; line-height: 1.7; }

/* ---------- Why Sparkhound ---------- */
.services-v1 .why {
	background: var(--brandOffWhite);
	padding: 120px 0 128px;
	overflow-x: clip;
}
.services-v1 .why-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 64px;
	align-items: start;
}
.services-v1 .why-media {
	position: sticky;
	top: 96px;
	border-radius: 16px 0 0 16px;
	overflow: hidden;
	height: min(640px, calc(100vh - 240px));
	margin-right: calc(-1 * (max(100vw - var(--site-max-width), 0px) / 2 + 24px));
	background: rgba(0, 56, 48, 0.04);
}
/* Stacked placeholder slides; the active claim drives which one shows.
   Each slide swaps in for a real photo later (shot list:
   images/shotlist-managed-cloud-why.md). */
.services-v1 .why-media-slot {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	opacity: 0;
	transition: opacity 0.45s ease;
	background:
		radial-gradient(420px 280px at 12% 8%, rgba(106, 197, 214, 0.1), transparent 65%),
		radial-gradient(360px 250px at 90% 94%, rgba(129, 190, 65, 0.08), transparent 62%),
		rgba(0, 56, 48, 0.04);
}
.services-v1 .why-media-slot.is-active { opacity: 1; }
.services-v1 .why-media-slot p { font-size: 13px; opacity: 0.75; max-width: 320px; }
.services-v1 .why-media-slot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.services-v1 .why-media-slot:nth-child(2) {
	background:
		radial-gradient(420px 280px at 88% 10%, rgba(106, 197, 214, 0.1), transparent 65%),
		radial-gradient(360px 250px at 10% 90%, rgba(129, 190, 65, 0.08), transparent 62%),
		rgba(0, 56, 48, 0.055);
}
.services-v1 .why-media-slot:nth-child(3) {
	background:
		radial-gradient(420px 280px at 12% 90%, rgba(106, 197, 214, 0.1), transparent 65%),
		radial-gradient(360px 250px at 90% 8%, rgba(129, 190, 65, 0.08), transparent 62%),
		rgba(0, 56, 48, 0.03);
}
.services-v1 .why-media-slot:nth-child(4) {
	background:
		radial-gradient(420px 280px at 50% 0%, rgba(106, 197, 214, 0.1), transparent 65%),
		radial-gradient(360px 250px at 50% 100%, rgba(129, 190, 65, 0.08), transparent 62%),
		rgba(0, 56, 48, 0.065);
}
.services-v1 .why-media-slot:nth-child(5) {
	background:
		radial-gradient(420px 280px at 85% 85%, rgba(106, 197, 214, 0.1), transparent 65%),
		radial-gradient(360px 250px at 12% 10%, rgba(129, 190, 65, 0.08), transparent 62%),
		rgba(0, 56, 48, 0.045);
}
.services-v1 .why-items { margin-top: 40px; display: flex; flex-direction: column; }
.services-v1 .why-item {
	padding: 40px 0;
	border-top: 1px solid rgba(0, 56, 48, 0.14);
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: 8px 22px;
	transition: opacity 0.35s ease;
}
@media (min-width: 992px) {
	.services-v1 .why-item { padding: 88px 0; }
	.services-v1 .why-item:not(.is-active) { opacity: 0.4; }
}
.services-v1 .why-item h3 { font-size: 19px; grid-column: 2; }
.services-v1 .why-item p { grid-column: 2; margin-top: 0; font-size: 15px; line-height: 1.7; }
.services-v1 .why-icon {
	grid-column: 1;
	grid-row: 1 / 3;
	width: 44px;
	height: 44px;
	margin-top: 2px;
	color: var(--brandDarkGreen);
}
.services-v1 .why-icon svg { width: 44px; height: 44px; display: block; }

/* ---------- Solutions (dark band, Industries card pattern) ---------- */
.services-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);
}
.services-v1 .solutions .section-intro { color: rgba(246, 246, 246, 0.82); }
.services-v1 .sol-grid {
	max-width: 1080px;
	margin: 56px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}
.services-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;
}
.services-v1 .sol-card h3 { color: #fff; font-size: 19px; transition: color 0.35s ease; }
.services-v1 .sol-card p { margin-top: 10px; font-size: 15px; line-height: 1.7; }
.services-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;
}
.services-v1 .sol-icon svg { width: 40px; height: 40px; display: block; }
@media (hover: hover) {
	.services-v1 .sol-card:hover {
		background-color: rgba(0, 26, 22, 0.4);
		transform: translateY(-2px);
	}
	.services-v1 .sol-card:hover .sol-icon { color: var(--brandGreen); transform: scale(1.08); }
	.services-v1 .sol-card:hover h3 { color: var(--brandGreen); }
}
/* Four included services, so a 2x2 at a narrower measure instead of 3-up. */
.services-v1 .sol-grid--four { max-width: 880px; }
.services-v1 .sol-grid--four .sol-card { flex-basis: calc(50% - 12px); }
.services-v1 .sol-card .link-arrow {
	display: inline-block;
	margin-top: 14px;
	color: var(--brandGreen);
	font-size: 15px;
}
@media (hover: hover) {
	.services-v1 .sol-card .link-arrow:hover { color: #fff; }
}

.services-v1 .sol-note {
	margin: 32px auto 0;
	max-width: 620px;
	font-size: 13px;
	color: rgba(246, 246, 246, 0.7);
}

/* ---------- Ecosystem strip ---------- */
.services-v1 .stack {
	padding: 88px 0 92px;
	border-bottom: 1px solid rgba(0, 56, 48, 0.08);
}
.services-v1 .stack h2 { font-size: clamp(20px, 2vw, 24px); }
.services-v1 .stack-marks {
	margin-top: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px 72px;
}
.services-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) {
	.services-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));
	}
}
.services-v1 .stack-note { margin-top: 28px; font-size: 13px; opacity: 0.75; }

/* ---------- How We Work (numbered rail: a real sequence) ----------
   v9 supplies four numbered steps, so the ledger gives way to the
   gen-ai-consulting-signal steps rail, ported verbatim. Each step is a
   subgrid column sharing row tracks, so the circles stay on one line
   however the headings wrap; the rail is drawn per step and bridges the
   column gap. */
.services-v1 .process { padding: 120px 0 128px; }
.services-v1 .steps {
	margin-top: 64px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto auto auto auto;
	column-gap: 32px;
}
.services-v1 .step {
	text-align: center;
	padding: 0 8px;
}
@media (min-width: 992px) {
	.services-v1 .step {
		display: grid;
		grid-row: 1 / 5;
		grid-template-rows: subgrid;
	}
}
.services-v1 .step h3 {
	font-size: 17px;
	line-height: 1.4;
	margin: 18px 0 10px;
}
.services-v1 .step-rail {
	position: relative;
	display: flex;
	justify-content: center;
}
.services-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);
}
.services-v1 .step:first-child .step-rail::before { left: 50%; }
.services-v1 .step:last-child .step-rail::before { right: 50%; }
.services-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;
}
@media (hover: hover) {
	.services-v1 .step:hover .step-num {
		background: var(--brandGreen);
		border-color: var(--brandGreen);
		color: var(--brandDarkGreen);
		transform: translateY(-2px);
	}
}
.services-v1 .step p { margin-top: 0; font-size: 14.5px; line-height: 1.7; }

/* ---------- Testimonial ---------- */
.services-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;
}
.services-v1 .quote-band .container { position: relative; z-index: 1; text-align: center; max-width: 900px; }
.services-v1 .quote-band blockquote { margin-left: auto; margin-right: auto; }
.services-v1 .quote-mark {
	font-size: 72px;
	line-height: 1;
	font-weight: 800;
	color: var(--brandGreen);
	display: block;
	height: 44px;
}
.services-v1 blockquote p {
	font-size: clamp(21px, 2.6vw, 28px);
	line-height: 1.55;
	font-weight: 600;
	color: #fff;
}
.services-v1 .quote-attr { margin-top: 26px; font-size: 15px; }
.services-v1 .quote-attr strong { color: #fff; }
.services-v1 .quote-band .link-arrow { color: var(--brandGreen); display: inline-block; margin-top: 26px; }
@media (hover: hover) {
	.services-v1 .quote-band .link-arrow:hover { color: #fff; }
}

.services-v1 .quote-pending {
	max-width: 640px;
	margin: 32px auto 0;
	font-size: 15px;
	line-height: 1.75;
	opacity: 0.85;
}
.services-v1 .quote-pending .tbd-chip { margin-bottom: 14px; }

/* ---------- Case studies ---------- */
.services-v1 .cases {
	background: var(--brandOffWhite);
	padding: 120px 0 128px;
}
.services-v1 .case-card {
	background: #fff;
	border: 1px solid rgba(0, 56, 48, 0.08);
	border-radius: 16px;
	padding: 32px 28px 30px;
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
@media (hover: hover) {
	.services-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);
	}
}
.services-v1 .case-figure {
	font-family: var(--fontDisplay);
	font-size: clamp(32px, 3.2vw, 42px);
	font-weight: 800;
	line-height: 1.05;
	color: var(--brandTeal);
	letter-spacing: -0.01em;
}
.services-v1 .case-figure-label {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bodyInk);
	margin-top: 8px;
	line-height: 1.5;
	opacity: 0.75;
}
.services-v1 .case-card h3 {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(0, 56, 48, 0.1);
	font-size: 17px;
	line-height: 1.45;
}
/* These four cards lead with the client name, not a figure, so the rule
   that normally separates figure from name has nothing to separate. */
.services-v1 .case-card h3:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.services-v1 .case-card p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; }
.services-v1 .case-attr {
	margin-top: 14px;
	font-size: 13.5px;
	color: var(--brandTeal);
}
.services-v1 .case-attr strong { color: var(--brandDarkGreen); }
.services-v1 .cases-cta { margin-top: 48px; text-align: center; }
.services-v1 .cases-note {
	margin-top: 18px;
	text-align: center;
	font-size: 13px;
	opacity: 0.85;
}

/* ---------- Final CTA (the brand ramp closes the page) ---------- */
.services-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;
}
.services-v1 .final-cta .container { position: relative; z-index: 1; }
.services-v1 .final-cta .section-intro { color: rgba(246, 246, 246, 0.82); }
.services-v1 .final-cta .btn { margin-top: 38px; }
.services-v1 .btn--white {
	background-color: #fff;
	border-color: #fff;
	color: var(--brandDarkGreen);
}
.services-v1 .btn--white:hover, .services-v1 .btn--white:focus-visible, .services-v1 .btn--white:active {
	border-color: #2c665d;
	color: #fff;
}

/* ---------- From The Spark ---------- */
.services-v1 .resources {
	background: var(--brandOffWhite);
	padding: 104px 0 112px;
}
.services-v1 .res-grid {
	margin-top: 48px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.services-v1 .res-card {
	border: 1px dashed rgba(0, 56, 48, 0.3);
	border-radius: 16px;
	padding: 26px;
	background: rgba(255, 255, 255, 0.6);
}
.services-v1 .res-thumb {
	height: 120px;
	border-radius: 10px;
	background: rgba(0, 56, 48, 0.07);
	margin-bottom: 20px;
}
.services-v1 .res-line { height: 12px; border-radius: 6px; background: rgba(0, 56, 48, 0.12); margin-bottom: 10px; }
.services-v1 .res-line.short { width: 60%; }
.services-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. */
.services-v1 .related {
	background: var(--brandOffWhite);
	padding: 0 0 88px;
}
.services-v1 .related-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 28px;
	font-size: 15px;
	line-height: 1.7;
}
.services-v1 .related-label { font-weight: 600; }
.services-v1 .related-row .link-arrow { font-size: 15px; }

/* ---------- FAQ ---------- */
.services-v1 .faq { padding: 120px 0 132px; }
.services-v1 .faq .container { max-width: 880px; }
.services-v1 .faq h2 { text-align: center; }
.services-v1 .faq-list { margin-top: 48px; }
.services-v1 .faq-item { border-bottom: 1px solid rgba(0, 56, 48, 0.12); }
.services-v1 .faq-item:first-child { border-top: 1px solid rgba(0, 56, 48, 0.12); }
.services-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;
}
.services-v1 .faq-item summary::-webkit-details-marker { display: none; }
.services-v1 .faq-item summary h3 { font-size: 17px; line-height: 1.45; transition: color 0.35s ease; }
.services-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;
}
.services-v1 .faq-toggle::before { content: "+"; }
.services-v1 .faq-item[open] .faq-toggle::before { content: "\2212"; }
@media (hover: hover) {
	.services-v1 .faq-item summary:hover h3 { color: var(--brandTeal); }
	.services-v1 .faq-item summary:hover .faq-toggle {
		background: rgba(129, 190, 65, 0.16);
		border-color: rgba(129, 190, 65, 0.55);
	}
}
.services-v1 .faq-body { padding: 0 4px 26px; max-width: 800px; }
.services-v1 .faq-body p { font-size: 15px; line-height: 1.75; }
.services-v1 .faq-body .tbd-chip { margin-bottom: 12px; }

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

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

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.services-v1 .hero { padding: 86px 0 104px; }
	.services-v1 .hero-bolt { width: 110px; left: auto; right: 6%; opacity: 0.05; }
	.services-v1 .hero-blur::before, .services-v1 .hero-blur > div:nth-of-type(1) { display: none; }
	.services-v1 .stats-grid, .services-v1 .cards-3, .services-v1 .res-grid { grid-template-columns: 1fr 1fr; }
	.services-v1 .sol-card { flex-basis: calc(50% - 12px); }
	.services-v1 .why-grid { grid-template-columns: 1fr; gap: 40px; }
	.services-v1 .why-media { position: relative; top: auto; height: min(440px, 60vh); }
	.services-v1 .steps { grid-template-columns: 1fr 1fr; gap: 44px 32px; }
	.services-v1 .step-rail::before { content: none; }
	.services-v1 .pains, .services-v1 .why, .services-v1 .cases, .services-v1 .process, .services-v1 .faq { padding: 84px 0 92px; }
	.services-v1 .solutions { padding: 84px 0 48px; }
}
@media (max-width: 640px) {
	.services-v1 .stats-grid, .services-v1 .cards-3, .services-v1 .cards-4, .services-v1 .cards-2, .services-v1 .res-grid, .services-v1 .steps { grid-template-columns: 1fr; }
	.services-v1 .sol-card, .services-v1 .sol-grid--four .sol-card { flex-basis: 100%; }
	.services-v1 .hero-ctas { align-items: flex-start; flex-direction: column; }
	.services-v1 .stack-marks { gap: 20px 44px; }
	.services-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 .services-v1 [data-image-reveal] { visibility: hidden; }
.services-v1 html.lenis, .services-v1 html.lenis body { height: auto; }
.services-v1 .lenis.lenis-smooth { scroll-behavior: auto !important; }

/* Grain over dark gradients: kills banding, reads as material. */
.services-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");
}