/* Microsoft 365 Consulting V1. Generated by scripts/build-services-port.py from
   mockups/microsoft-365-consulting.html; scoped under .services-v1. Do not edit by hand. */

/* Sparkhound interior page mockup: Security Assessments. Fifth page of the
   service-page template family (net-new page, no live URL), 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 licence ledger. What the tenant pays for
   on one side, what anybody actually opened on the other, and the
   idle count between them. Nothing on this page asks you to buy
   anything.
      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 .hero-wall {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.services-v1 .hero-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 ----------
   Two of the copy's four claims are qualitative, so they render in the
   Managed Cloud editorial-italic voice; the price range is gated on the
   pending account-team decision about publishing pricing, and the
   coverage figure needs the tight cut to fit four characters wide. */
.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(4, 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; }
.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 (commitment ledger) ----------
   Six commitments, not a sequence and not practices, so this takes the
   ITIS ledger rather than the Security Assessments rail: clauses in a
   two-column document, hairline rules, no numerals and no ticks. The
   closing line spans both columns instead of filling a spare cell, since
   six rows divide evenly. */
.services-v1 .process { padding: 120px 0 128px; }
.services-v1 .ledger {
	max-width: 780px;
	margin: 56px auto 0;
	border-top: 2px solid var(--brandDarkGreen);
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 48px;
}
.services-v1 .ledger-row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 4px 0;
	align-content: start;
	padding: 24px 0;
	border-bottom: 1px solid rgba(0, 56, 48, 0.12);
}
.services-v1 .ledger-row p { grid-column: 2; }
.services-v1 .ledger-icon {
	width: 34px;
	height: 34px;
	color: var(--brandDarkGreen);
	margin-top: 1px;
}
.services-v1 .ledger-icon svg { width: 34px; height: 34px; display: block; }
.services-v1 .ledger-row h3 { font-size: 17px; line-height: 1.45; }
.services-v1 .ledger-row p { margin: 0; font-size: 15px; line-height: 1.65; }
.services-v1 .ledger-kicker {
	grid-column: 1 / -1;
	margin: 0;
	padding: 26px 0;
	border-bottom: 1px solid rgba(0, 56, 48, 0.12);
	font-family: var(--fontDisplay);
	font-size: clamp(19px, 2vw, 23px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--brandDarkGreen);
}
@media (max-width: 767px) {
	.services-v1 .ledger { grid-template-columns: 1fr; column-gap: 0; }
}

/* ---------- 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; }

/* ---------- 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 .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 { 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");
}

/* --- Service page variants (ported from financial-services-it) --- */
/* The Why runs as icons and text with no sticky media panel, so the
   grid collapses to one column and the claims sit two up. */
.services-v1 .why-grid--flat { grid-template-columns: 1fr; }
.services-v1 .why-grid--flat .why-items {
	margin-top: 36px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
	gap: 0 56px;
}
.services-v1 .why-grid--flat .why-item { padding: 34px 0; }
.services-v1 .why-grid--flat .why-item:not(.is-active) { opacity: 1; }

/* Three sourced stats rather than four: the row narrows instead of
   leaving a hole where an unsourced figure would go. */
.services-v1 .stats-grid--three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* A card count that isn't a multiple of three centres the orphans. */
.services-v1 .cards-flow { display: flex; flex-wrap: wrap; justify-content: center; }
.services-v1 .cards-flow > * {
	flex: 1 1 calc(33.333% - 19px);
	max-width: calc(33.333% - 19px);
	min-width: 260px;
}
@media (max-width: 900px) {
	.services-v1 .cards-flow > * { flex-basis: calc(50% - 14px); max-width: calc(50% - 14px); }
}
@media (max-width: 620px) {
	.services-v1 .cards-flow > * { flex-basis: 100%; max-width: 100%; }
}

/* Related cross-links row (v9 quiet link row before the FAQ). */
.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; }