/* Case Study Single V1. Generated by scripts/build-case-study-port.py from
   mockups/case-study-single.html; scoped under .services-v1. Do not edit by hand. */

/* Sparkhound content templates: the case study single (single-case-study.php).
   Round 2, per Jane's 2026-08-18 notes: lighter vibe. The hero went from
   the dark band with a pulled-up clipped image to a light two-column with
   the featured image whole (natural aspect, no crop) beside the title.
   The green rules above the article section labels are gone.
   Body content on this page is a REAL case study from staging (post 335),
   verbatim, because the template has to typeset what actually exists:
   free-form classic-editor HTML with h2 section labels (SITUATION /
   SOLUTION / IMPACT). Older posts label sections with bolded paragraphs
   (Background / Objectives) instead; the build normalizes those to h2 so
   this one template covers both eras. No ACF fields exist on this post
   type, so everything renders from title, category, featured image, and
   post_content. Tokens per DESIGN-SYSTEM-HOMEPAGE-V1.md; hover-only
   motion; no GSAP on content templates. */
/* Brand fonts pending (Interstate + Franklin Gothic): when they land, add
   @font-face here and point --fontDisplay / --fontBody at them. */
@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 {
	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(32px, 4vw, 46px); 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) ---------- */
.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 ---------- */
.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;
}

/* ---------- 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: dark two-column ----------
   Crumb, category chip, and title on the left; the featured image whole
   on the right, natural aspect in a rounded card, never cropped. Same
   teal gradient recipe as the listing hero, not the brandBlack band. */
.services-v1 .hero {
	background:
		radial-gradient(1100px 640px at 88% -8%, rgba(106, 197, 214, 0.16), transparent 62%),
		radial-gradient(1200px 700px at 8% 108%, rgba(129, 190, 65, 0.14), transparent 65%),
		var(--darkGradient);
	color: rgba(246, 246, 246, 0.85);
	padding: 84px 0 88px;
	position: relative;
	overflow: hidden;
}
.services-v1 .hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: 56px;
	align-items: center;
}
.services-v1 .hero .crumb {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.services-v1 .hero .crumb a { color: rgba(246, 246, 246, 0.55); transition: color 0.35s ease; }
.services-v1 .hero .crumb span { color: rgba(246, 246, 246, 0.35); }
@media (hover: hover) {
	.services-v1 .hero .crumb a:hover { color: var(--brandGreen); }
}
.services-v1 .cat-chip {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brandOffWhite);
	background: rgba(129, 190, 65, 0.18);
	border-radius: 999px;
	padding: 5px 13px;
	line-height: 1.4;
	margin-bottom: 20px;
}
.services-v1 .hero h1 { line-height: 1.2; }
.services-v1 .hero-media img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 22px 54px rgba(0, 26, 22, 0.35);
	/* Media-slot wash behind the image while it loads or if it is missing:
	   the brand surface, never a grey hole. */
	background-color: rgba(0, 56, 48, 0.04);
	background-image:
		radial-gradient(560px 380px at 12% 8%, rgba(106, 197, 214, 0.10), transparent 65%),
		radial-gradient(480px 340px at 90% 94%, rgba(129, 190, 65, 0.08), transparent 62%);
}

/* ---------- Article ---------- */
.services-v1 .article { background: var(--brandOffWhite); padding: 64px 0 104px; }
.services-v1 .article .container { max-width: 808px; }
.services-v1 .article-body { font-size: 17px; line-height: 1.85; }
.services-v1 .article-body p { margin-bottom: 24px; }
/* The content's own h2s are section labels (SITUATION, SOLUTION, IMPACT),
   typed in caps in the source. Tracked teal caps, nothing above them.
   Older posts arrive as bolded paragraphs and get normalized to h2 in the
   build. */
.services-v1 .article-body h2 {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brandTeal);
	margin: 52px 0 18px;
}
.services-v1 .article-body h2:first-child { margin-top: 0; }
.services-v1 .article-body ul { margin: 0 0 24px; padding-left: 20px; list-style: none; }
.services-v1 .article-body ul li {
	position: relative;
	padding-left: 34px;
	margin-bottom: 12px;
}
/* The brand spark as the bullet: stroked to sit heavier, pinned to the
   item's FIRST line. Spanning the whole item centered the bolt across any
   nested list too, which scattered stray bolts mid-air (2026-08-22 bug). */
.services-v1 .article-body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 14px;
	height: 1.15em;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-2%20-2%2025.668%2042.365'%3E%3Cpath%20d='M2404.945,503.578l.033.122a.308.308,0,0,0,.318.235h12.661l-.293,1.319c-1.221,5.471-2.382,11.465-2.808,14.77,2.913-4.52,8.851-15.574,11.73-21.607a.163.163,0,0,0,.012-.13l-.035-.131a.283.283,0,0,0-.315-.224h-12.788l.305-1.327c1.283-5.571,2.492-11.7,2.885-14.947-2.783,4.273-8.533,15.145-11.691,21.789A.167.167,0,0,0,2404.945,503.578Z'%20transform='translate(-2404.938%20-481.659)'%20fill='%2381be41'%20stroke='%2381be41'%20stroke-width='2.4'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.services-v1 .article-note { margin-top: 44px; font-size: 13px; opacity: 0.75; }

/* ---------- More case studies (listing card language, 3 up) ---------- */
.services-v1 .more-cs { background: #fff; padding: 96px 0 110px; }
.services-v1 .cs-grid {
	margin-top: 44px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.services-v1 .cs-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(0, 56, 48, 0.08);
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
@media (hover: hover) {
	.services-v1 .cs-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 .cs-card:hover h3 { color: var(--brandTeal); }
}
.services-v1 .cs-card-media {
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-color: rgba(0, 56, 48, 0.04);
	background-image:
		radial-gradient(420px 280px at 12% 8%, rgba(106, 197, 214, 0.10), transparent 65%),
		radial-gradient(360px 250px at 90% 94%, rgba(129, 190, 65, 0.08), transparent 62%);
}
.services-v1 .cs-card-body { padding: 24px 26px 26px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.services-v1 .cs-card-body .cat-chip {
	color: var(--brandTeal);
	background: rgba(21, 107, 94, 0.08);
	margin-bottom: 0;
}
.services-v1 .cs-card-body h3 { margin-top: 12px; font-size: 17px; line-height: 1.45; transition: color 0.35s ease; }
.services-v1 .cs-card-body .link-arrow { margin-top: auto; padding-top: 18px; font-size: 14.5px; }
.services-v1 .more-note { margin-top: 26px; text-align: center; font-size: 13px; opacity: 0.75; }

/* ---------- Final CTA: the insights two-tone band, ported verbatim
   (2026-08-22, Jane). Teal panel with the bolt-notch edge, SVG seam so the
   green stays uniform, city links earning the panel's field. ---------- */
.services-v1 .final-cta {
	position: relative;
	overflow: hidden;
	padding: 110px 0 120px;
	background: linear-gradient(215deg, #0d4a3e 0%, #06332b 55%, #022019 100%);
}
.services-v1 .cta-panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 44%;
	background: linear-gradient(230deg, #1d7f6e 0%, #156b5e 55%, #0e5348 100%);
	clip-path: polygon(34% 0, 100% 0, 100% 100%, 6% 100%, 29% 46%, 16% 42%);
	z-index: 1;
}
.services-v1 .cta-edge {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 44%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}
.services-v1 .cta-edge polyline {
	fill: none;
	stroke: var(--brandGreen);
	stroke-width: 8px;
	vector-effect: non-scaling-stroke;
	stroke-linejoin: miter;
}
.services-v1 .cta-edge--m { display: none; }
.services-v1 .cta-cities {
	position: absolute;
	right: 48px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	list-style: none;
	text-align: right;
	margin: 0;
	padding: 0;
}
.services-v1 .cta-cities li { margin: 14px 0; }
.services-v1 .cta-cities li a {
	font-size: 17px;
	font-weight: 700;
	color: rgba(246, 246, 246, 0.92);
	transition: color 0.3s ease;
}
@media (hover: hover) {
	.services-v1 .cta-cities li a:hover { color: var(--brandGreen); }
}
.services-v1 .final-cta .container { position: relative; z-index: 3; }
.services-v1 .final-cta .cta-copy { max-width: 560px; }
.services-v1 .final-cta h2 { font-size: clamp(32px, 4vw, 50px); line-height: 1.12; }
.services-v1 .final-cta .section-intro { margin: 18px 0 0; max-width: 480px; color: rgba(246, 246, 246, 0.82); }
.services-v1 .final-cta .btn { margin-top: 34px; }
@media (max-width: 991px) {
	.services-v1 .final-cta { padding: 84px 0 210px; }
	.services-v1 .cta-panel {
		top: auto; left: 0; right: 0;
		width: 100%;
		height: 150px;
		clip-path: polygon(0 46%, 42% 22%, 50% 40%, 100% 8%, 100% 100%, 0 100%);
	}
	.services-v1 .cta-edge--d { display: none; }
	.services-v1 .cta-edge--m {
		display: block;
		top: auto; left: 0; right: 0;
		width: 100%;
		height: 150px;
	}
	.services-v1 .cta-cities {
		top: auto;
		right: 24px;
		bottom: 20px;
		transform: none;
		display: flex;
		gap: 22px;
	}
	.services-v1 .cta-cities li { margin: 0; }
	.services-v1 .cta-cities li a { font-size: 14px; }
}

/* ---------- 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 .cs-card:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.services-v1 .hero { padding: 60px 0 64px; }
	.services-v1 .hero-grid { grid-template-columns: 1fr; gap: 36px; }
	.services-v1 .cs-grid { grid-template-columns: 1fr 1fr; }
	.services-v1 .article { padding: 64px 0 88px; }
	.services-v1 .more-cs { padding: 80px 0 92px; }
}
@media (max-width: 640px) {
	.services-v1 .cs-grid { grid-template-columns: 1fr; }
	.services-v1 .hero { padding: 48px 0 56px; }
}

/* PHP-only: the theme's base stylesheet puts markers on li; the article
   list draws its own spark bullets, so kill the theme's marker only. */
.services-v1 .article-body ul li { list-style: none; }
.services-v1 .article-body ul li::marker { content: none; }
/* The theme's base li::before sets an explicit 8px height; match the
   first-line-pinned bolt height. */
.services-v1 .article-body ul li::before { height: 1.15em; }

/* PHP-only: featured-image fallback slot (no image on the post). */
.services-v1 .hero-media-empty {
	aspect-ratio: 16 / 10;
	border-radius: 16px;
	box-shadow: 0 22px 54px rgba(0, 26, 22, 0.35);
	background-color: rgba(246, 246, 246, 0.06);
	background-image:
		radial-gradient(560px 380px at 12% 8%, rgba(106, 197, 214, 0.10), transparent 65%),
		radial-gradient(480px 340px at 90% 94%, rgba(129, 190, 65, 0.08), transparent 62%);
}
.services-v1 .cs-card-media img, .services-v1 .hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.services-v1 .hero-media img { height: auto; }


/* Bolts mark leaf items only: a li that opens a nested list is a heading
   for its children, not a bullet (2026-08-22 QA). */
.services-v1 .article-body ul li:has(> ul)::before { display: none; }

/* Theme-base bullets bled into the CTA city list (square ::before markers,
   link colors); neutralize them (2026-08-22 QA). */
.services-v1 .cta-cities li { padding: 0; }
.services-v1 .cta-cities li::before,
.services-v1 .cta-cities li::marker { content: none; display: none; }
.services-v1 .cta-cities li a:link,
.services-v1 .cta-cities li a:visited { color: rgba(246, 246, 246, 0.92); }
@media (hover: hover) {
	.services-v1 .cta-cities li a:hover { color: var(--brandGreen); }
}