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

/* Sparkhound interior page mockup: IT Infrastructure Services. Fourth page
   of the service-page template family (and the hub of the infrastructure
   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");
}
.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 topology wall. A faint line-work diagram of
   the client's infrastructure, the architecture drawing taped up in the
   server room, with the pains whispered as annotations ("single uplink",
   "restore test: never run") and one orphan switch nobody owns. Third
   texture family after prose (Gen AI), code (CAD/DAS), and feed (Managed
   Cloud). 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 .topo-wall {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.services-v1 .topo-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 two sourced figures plus one TK slot (first-party outcome
   stat pending from the client). */
.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 sup { font-size: 0.45em; font-weight: 700; color: var(--brandTeal); }
.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; }
.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; }
}

/* ---------- 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 replaced the seven-commitment ledger with a four-step sequence, so
   the section carries the exemplar's numbered-rail pattern verbatim
   (gen-ai-consulting-signal.html). 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. */
.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;
}
.services-v1 .step-bolt {
	height: 26px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-bottom: 12px;
	color: var(--brandGreen);
}
.services-v1 .step-bolt svg { width: 22px; height: 22px; display: block; }
@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-bolt {
		opacity: 0;
		transform: translateY(8px) scale(0.7);
		transition: opacity 0.35s ease, transform 0.35s ease;
	}
	.services-v1 .step:hover .step-bolt {
		opacity: 1;
		transform: none;
		transition-delay: 0.05s;
	}
}
.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; }
}

/* ---------- 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;
}
.services-v1 .case-card p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; }
.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;
}
.services-v1 .cta-note {
	margin-top: 20px;
	font-size: 13px;
	color: rgba(246, 246, 246, 0.65);
}

/* ---------- 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,
	.pain-card:hover .icon-chip svg,
	.sol-card:hover .sol-icon,
	.services-v1 .step:hover .step-num, .services-v1 .stack-mark:hover { transform: none; }
	.services-v1 .step-bolt, .services-v1 .step:hover .step-bolt { 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");
}