/**
 * Limestone theme — Service pages (AI Training & Enablement, and the AI SDLC /
 * Custom AI Agents pages that reuse the same section library).
 *
 * Figma: file Qc0svJadX2mkcEk7D5wHUl ("Corporate-website"),
 * section 8071:20228 → desktop frame 8030:19543 (1440), mobile frame
 * 8164:41358 (390). Node ids are cited per block.
 *
 * Loaded after home-figma.css and only on the service pages, so the shared
 * section classes it overrides (.section_stats, .s-capability, .s-pe, .s-faq)
 * keep their homepage appearance everywhere else.
 *
 * Raw hex values are intentional — same convention as home-figma.css: the
 * compiled design values are the pixel baseline, tokens.css only mirrors them.
 *
 * @package Limestone
 */

/* ============================================================
 * Shared service-page primitives
 * ============================================================ */

.svc-hero,
.svc-tracks,
.svc-cases,
.svc-quote,
.svc-process,
.svc-industries {
	position: relative;
}

/* Trailing text link + arrow, shared by every service section
 * (Figma nodes 8175:32450 / 8175:32462 / 8175:32474 / 8156:20863). */
.svc-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 60px;
	background-color: transparent;
	color: #5d4af5;
	text-transform: uppercase;
	text-decoration: none;
	font-family: "DM Mono", monospace;
	font-size: 14px;
	font-weight: 500;
	/* Figma's CTA button node is 16px tall (e.g. 8175:32450). */
	line-height: 16px;
}

/* The homepage PE link uses a 20px line box; Figma's button here is 16. */
.s-pe__cta {
	line-height: 16px;
}

.svc-link:hover,
.svc-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.svc-link__arrow {
	display: inline-block;
	width: 16px;
	height: 13px;
	flex-shrink: 0;
	background-image: url("../images/home/s7-sla-card-link-arrow.svg");
	background-repeat: no-repeat;
	background-size: contain;
}

/* Designed line break.
 *
 * Figma sets manual breaks in several headings and card bodies (e.g. "AI
 * enablement for your engineers and your / whole business."). The browser fits
 * those on one line at 1440, so the copy carries a <br class="svc-break"> at
 * each designed break to reproduce the composition exactly. Below the desktop
 * breakpoint the columns are narrower and the text needs to wrap on its own, so
 * the break collapses. Same idea as the homepage's .s-capability__heading-break.
 */
.svc-break {
	display: inline;
}

@media (max-width: 991px) {
	.svc-break {
		display: none;
	}
}

/* Checklist rows render their tick from CSS so the stored copy stays clean
 * text (the Figma layers carry a literal "✓ " prefix). */
.svc-tracks__list-item,
.svc-industries__list-item {
	position: relative;
	padding-left: 24px;
	list-style: none;
	/* The theme's base <li> style adds 4px block margins; the Figma checklists
	 * are a flat 8px-gap stack, so the row rhythm comes from the flex gap only. */
	margin: 0;
}

.svc-tracks__list-item::before,
.svc-industries__list-item::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: #1a1a1a;
}

/* ============================================================
 * svc-hero  (node 8016:19378 / content 8016:19383)
 * Centered head, then a two-column panel: lead form + captioned art.
 * ============================================================ */

/* Page ground + the frame's vertical rules.
 *
 * Figma builds this exactly once per frame: the ground is #f7f7f7 and a
 * "Vertical lines" rectangle (node 8016:19379 — border-left/right 1px #e6e9ee,
 * x=80, width 1280, height 8726) sits BEHIND every section. Sections that carry
 * their own opaque fill hide it; sections with no fill let it show through.
 * Confirmed by scanning the full-resolution frame at x=80: rules are visible on
 * hero, cases, stats, engagement, process, industries and the top of private
 * equity, and absent on tracks (filled #f7f7f7), the quote (filled purple — it
 * draws its own lighter rules) and the FAQ.
 *
 * Reproduced the same way rather than per-section, so the rules line up across
 * section boundaries the way they do in the design. The theme's own site-wide
 * .pinstripes overlay is suppressed because it is fixed to the viewport and
 * would also paint over the filled sections.
 */
.main-content {
	position: relative;
	background-color: #f7f7f7;
}

.pinstripes {
	display: none;
}

/* Run the rules the FULL height of the page so they read as one continuous pair
 * from the hero to the FAQ. (In Figma the rectangle stops at 8726px, which
 * leaves them petering out mid-page — per the brief they should carry through
 * every section.) */
.main-content::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	/* Figma: x=80 → 1280 wide inside the 1440 frame. */
	width: min(1280px, 100% - 160px);
	border-left: 1px solid #e6e9ee;
	border-right: 1px solid #e6e9ee;
	pointer-events: none;
	z-index: 0;
}

/* Unfilled sections — the rules show through. These read #f7f7f7 because the
 * page ground behind them is #f7f7f7. */
.svc-hero,
.svc-tracks,
.svc-cases,
.svc-icongrid,
.svc-engagement,
.svc-process,
.svc-industries,
.section_stats,
.s-pe,
.s-faq {
	background-color: transparent;
}

/* The two filled bands cover the page rules, so they carry their own in a tone
 * that reads against their fill — aligned to the same container edges so the
 * lines continue straight through. */
.svc-quote,
.s-capability {
	position: relative;
	z-index: 1;
}

.s-capability::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(1280px, 100% - 160px);
	border-left: 1px solid #f7f7f740;
	border-right: 1px solid #f7f7f740;
	pointer-events: none;
}

/* Figma pins the hero section to 1280px on every service page regardless of how
 * tall its content is (the enablement hero fills it; the AI SDLC hero has a
 * one-line form title and comes up ~58px short). min-height reproduces that
 * fixed band without hardcoding a per-page bottom padding. */
.svc-hero {
	min-height: 1280px;
	padding: 240px 140px 136px;
	overflow: hidden;
}

.svc-hero__wrap {
	position: relative;
	z-index: 1;
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.svc-hero__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
}

.svc-hero__eyebrow {
	margin: 0;
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #5d4af5;
}

.svc-hero__heading {
	margin: 0;
	max-width: 1160px;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 64px;
	line-height: 72px;
	color: #1a1a1a;
}

.svc-hero__lead {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	color: #686868;
}

/* --- form + media panel (node 8016:19390) --- */

/* Two EQUAL columns (Figma 568 + 24 gap + 568 = 1160). Grid rather than flex:
 * flex's free-space distribution let the form column win ~32px from the media
 * column, which narrowed the artwork below its designed width. */
.svc-hero__panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 24px;
	/* No margin-top: .svc-hero__wrap already supplies the 24px head→panel gap
	 * (Figma node 8016:19383 column gap). */
	background-color: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 4px;
	overflow: hidden;
}

.svc-hero__form-col {
	min-width: 0;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	background-color: #fff;
}

.svc-hero__form-title {
	margin: 0;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 32px;
	color: #1a1a1a;
}

.svc-hero__form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.svc-hero__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* First name / last name share a row on desktop — Figma node 8016:19397 puts
 * two 244px inputs at x=32 and x=292 inside the 504px field measure, so the
 * gap between them is 16. They stack on mobile with every other field, which
 * is what node 8164:42401 draws. */
.svc-hero__field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	min-width: 0;
}

.svc-hero__field-row .svc-hero__field {
	min-width: 0;
}

/* Flex (rather than an inline `vertical-align: super` asterisk) so the small
 * required marker cannot grow the label's line box past the designed 16px. */
.svc-hero__label {
	display: flex;
	align-items: flex-start;
	gap: 2px;
	/* The theme's base label style adds a 4px bottom margin; the Figma field
	 * stack is label + an 8px gap + control, with no extra margin. */
	margin: 0;
	font-family: "DM Mono", monospace;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	text-transform: uppercase;
	color: #1a1a1a;
}

.svc-hero__req {
	color: #e51520;
	font-size: 8px;
	line-height: 16px;
}

.svc-hero__input {
	/* block, not the inline-block default — an inline form control sits on a
	 * text baseline, which added ~4px of descender space under every field. */
	display: block;
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	background-color: #fdfdfc;
	border: 1px solid #e6e9ee;
	border-radius: 4px;
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #1a1a1a;
	appearance: none;
}

.svc-hero__input::placeholder {
	color: #686868;
	opacity: 1;
}

.svc-hero__input:focus-visible {
	outline: 2px solid #5d4af5;
	outline-offset: 1px;
	border-color: #5d4af5;
}

/* Invalid styling only after the field has been touched, so an untouched
 * required field is not painted red on first paint. */
.svc-hero__input:not(:placeholder-shown):invalid {
	border-color: #e51520;
}

/* Figma node 8016:19401: the field block is 140px tall = label 16 + gap 8 +
 * textarea 116. */
.svc-hero__textarea {
	height: 116px;
	min-height: 116px;
	resize: vertical;
}

.svc-hero__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	min-height: 48px;
	padding: 12px 32px;
	background-color: #5d4af5;
	border: 0;
	border-radius: 4px;
	color: #fdfdfc;
	font-family: "DM Mono", monospace;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	cursor: pointer;
}

.svc-hero__submit:hover,
.svc-hero__submit:focus-visible {
	background-color: #4a39d6;
}

.svc-hero__submit-arrow {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.svc-hero__form-note {
	margin: 0;
	text-align: center;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #686868;
}

.svc-hero__form-note strong {
	font-weight: 400;
	color: #1a1a1a;
}

/* Honeypot — removed from the visual and a11y tree, never from the DOM. */
.svc-hero__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.svc-hero__notice {
	margin: 0;
	padding: 12px 16px;
	border-radius: 4px;
	border: 1px solid #e6e9ee;
	font-family: Geist, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #1a1a1a;
}

.svc-hero__notice--success {
	border-color: rgba(93, 74, 245, 0.35);
	background-color: rgba(93, 74, 245, 0.08);
}

.svc-hero__notice--invalid,
.svc-hero__notice--error {
	border-color: rgba(229, 21, 32, 0.35);
	background-color: rgba(229, 21, 32, 0.06);
}

.svc-hero__notice a {
	color: #5d4af5;
}

/* --- right column art (node 8016:19391) --- */

/* Media column.
 *
 * The artwork and caption are positioned per page — see the three
 * .svc-hero--{slug} blocks below, which carry the Figma geometry verbatim. The
 * caption deliberately sits over the artwork's empty area (that is how Figma
 * composes it); what must NOT happen is the caption landing on the illustration
 * itself, which is what a one-size "fill the column" rule caused. */
.svc-hero__media-col {
	position: relative;
	min-width: 0;
	overflow: hidden;
}

/* The artwork fills its column without contributing intrinsic height, so the
 * FORM column alone decides the panel height (Figma sizes the IMG column to the
 * form: 568x584). Left in flow it made the taller Custom AI Agents artwork drive
 * the panel ~87px past its designed height. */
/* `contain` (which is what the Figma hero art uses) so the whole illustration is
 * visible whatever its aspect ratio — the three pages ship differently-framed
 * artwork, and a cover-crop anchored to one corner blanked the Custom AI Agents
 * image, whose subject is centred with empty canvas around it. */
.svc-hero__media {
	position: absolute;
	display: block;
	object-fit: contain;
	object-position: left top;
	/* Per-page geometry below sets left/top/width/height. Defaults fill. */
	inset: 0;
	width: 100%;
	height: 100%;
}

.svc-hero__media-caption {
	position: absolute;
	width: 285px;
	max-width: calc(100% - 48px);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* --- Per-page hero artwork geometry, straight from Figma ------------------ */

/* AI Training & Enablement (node 8016:19391): a 486x486 block anchored to the
 * top-left of the column; caption in the clear band beneath it. */
.svc-hero--ai-training-enablement .svc-hero__media {
	inset: auto auto auto 2.55%;
	top: -3px;
	width: 85.6%;
	height: 486px;
}

.svc-hero--ai-training-enablement .svc-hero__media-caption {
	left: 132px;
	bottom: 30px;
}

/* AI SDLC (node 8239:18788): the artwork fills the column; the caption sits over
 * its empty lower-left with the connector dot Figma draws at left 141/bottom 91. */
.svc-hero--ai-sdlc .svc-hero__media {
	inset: 0;
	width: 100%;
	height: 100%;
	object-position: center;
}

.svc-hero--ai-sdlc .svc-hero__media-caption {
	left: 177px;
	top: 415px;
}

.svc-hero--ai-sdlc .svc-hero__media-col::after {
	content: "";
	position: absolute;
	left: 141px;
	bottom: 91px;
	width: 11px;
	height: 11px;
	background-image: url("../images/service-sdlc/icons/hero-dot.svg");
	background-repeat: no-repeat;
	background-size: contain;
}

/* Custom AI Agents (node 8445:19333): artwork scaled past the column and
 * cropped, caption bottom-right. Here the IMG column (584) is what sets the
 * panel height — the form column is only 552 — so it needs its own floor. */
.svc-hero--custom-ai-agents .svc-hero__media-col {
	min-height: 584px;
}

.svc-hero--custom-ai-agents .svc-hero__media {
	inset: auto auto auto -2.46%;
	top: -43px;
	width: 95.6%;
	height: 612px;
}

.svc-hero--custom-ai-agents .svc-hero__media-caption {
	right: 168px;
	bottom: 42px;
}

.svc-hero__media-caption-title {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}

.svc-hero__media-caption-body {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}

/* ============================================================
 * svc-tracks  (node 8161:40952) — two-track enablement cards
 * ============================================================ */

.svc-tracks {
	padding: 128px 140px;
}

.svc-tracks__wrap {
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.svc-tracks__head {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.svc-tracks__eyebrow {
	margin: 0 0 16px;
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #5442ec;
}

.svc-tracks__heading {
	margin: 0 0 24px;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 48px;
	color: #1a1a1a;
}

.svc-tracks__body {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}

.svc-tracks__cards {
	width: 100%;
	display: flex;
	align-items: stretch;
	gap: 24px;
	margin-top: 60px;
}

.svc-tracks__card {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	background-color: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 6px;
}

.svc-tracks__card-icon {
	display: block;
	width: 32px;
	height: 32px;
}

/* The exported glyphs sit inside a 32x32 box but are not all square (e.g. the
 * engineering mark is 32x23). Contain-fit preserves each glyph's own aspect
 * ratio inside the designed box instead of stretching it to fill. */
.svc-tracks__card-icon img {
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.svc-tracks__card-tag {
	margin: 0;
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #5d4af5;
}

.svc-tracks__card-title {
	margin: 0;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 32px;
	color: #1a1a1a;
}

.svc-tracks__card-body,
.svc-tracks__group-body,
.svc-tracks__card-footer {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}

/* The footer follows the copy above it on the card's own 24px rhythm — it is
 * NOT pushed to the card's floor. The cards stretch to a shared height, so
 * `margin-top: auto` here drove the slack INTO the card, between the content
 * and the footer: on Custom AI Agents, whose first card is much shorter than
 * its neighbours, that opened a 124px hole. Figma puts the slack under the
 * footer instead — its two enablement cards close on a shared edge (y=1003)
 * while their last lines sit at 968 and 957, which they could not do if the
 * footers were pinned. */

.svc-tracks__group {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.svc-tracks__group-label {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}

.svc-tracks__list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.svc-tracks__list-item {
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}

/* In-copy cross-links between the service pages. Figma draws these as
 * body-coloured text with an underline (node 8161:40952) — the purple used for
 * eyebrows and CTAs elsewhere is not what marks a link here.
 *
 * `em` is matched alongside `a` because the pre-link content authored these
 * phrases as emphasis; an environment that has not yet imported the current
 * snapshot renders them identically instead of falling back to italics. */
.svc-tracks__group-body a,
.svc-tracks__card-footer a,
.svc-tracks__group-body em,
.svc-tracks__card-footer em {
	font-style: normal;
	color: #1a1a1a;
	text-decoration: underline;
}

.svc-tracks__group-body a:hover,
.svc-tracks__group-body a:focus-visible,
.svc-tracks__card-footer a:hover,
.svc-tracks__card-footer a:focus-visible {
	color: #5d4af5;
}

/* Shared block under the cards — the "platform layer" panel
 * (Figma Custom AI Agents node 8467:40313). */
.svc-tracks__panel {
	width: 100%;
	margin-top: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

.svc-tracks__panel-title {
	margin: 0;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	color: #1a1a1a;
}

.svc-tracks__panel-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.svc-tracks__panel-body p {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}

/* The trailing paragraph is the muted footnote in the design. */
.svc-tracks__panel-body p + p {
	color: #686868;
}

/* ============================================================
 * svc-cases  (node 8034:19065) — static NDA-safe result cards
 * ============================================================ */

.svc-cases {
	padding: 128px 140px;
	border-top: 1px solid #e6e9ee;
}

.svc-cases__wrap {
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.svc-cases__head {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.svc-cases__eyebrow {
	margin: 0 0 16px;
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #5442ec;
}

.svc-cases__heading {
	margin: 0 0 24px;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 48px;
	color: #1a1a1a;
}

.svc-cases__body {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}

.svc-cases__cards {
	width: 100%;
	display: flex;
	align-items: stretch;
	gap: 24px;
	margin-top: 60px;
}

.svc-cases__card {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	background-color: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 6px;
}

.svc-cases__card-eyebrow {
	margin: 0;
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #5442ec;
}

.svc-cases__card-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.svc-cases__card-title {
	margin: 0;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 32px;
	color: #1a1a1a;
}

.svc-cases__card-body {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #686868;
}

.svc-cases__badges {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* A case section that carries a summary panel sits on the tinted ground
 * (Figma Custom AI Agents node 8534:40863). */
.svc-cases--with-panel {
}

/* Purple "What you get" panel (node 8534:40874). */
.svc-cases__panel {
	width: 100%;
	margin-top: 24px;
	padding: 32px;
	border-radius: 6px;
	background-color: #5d4af5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.svc-cases__panel-title {
	margin: 0;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	color: #fdfdfc;
}

/* The checklist is a single centred row here (node 8534:40876 — one 24px line
 * across the panel) and one item per line on mobile (node 8534:40944 — six).
 * Same copy, two layouts, so the items are authored as separate paragraphs and
 * arranged here rather than being one text run with the spacing typed into it,
 * which could only ever produce one of the two. */
.svc-cases__panel-body {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 20px;
}

.svc-cases__panel-body p {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #fdfdfc;
}

.svc-cases__badge {
	margin: 0;
	list-style: none;
	padding: 6px 10px;
	border-radius: 999px;
	background-color: rgba(93, 74, 245, 0.08);
	font-family: "DM Mono", monospace;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: #5d4af5;
	white-space: nowrap;
}

/* ============================================================
 * svc-quote  (node 8034:35394) — full-bleed purple pull quote
 * ============================================================ */

.svc-quote {
	position: relative;
	padding: 128px 140px;
	background-color: #5d4af5;
	overflow: hidden;
}

/* Vertical pinstripes (inset 80px) + the horizontal 307px band, both from
 * nodes 8034:35404 / 8034:35405. Purely decorative. */
/* The quote's vertical rules continue the page rules through the purple band,
 * so they must use the SAME geometry (container edges, not a viewport inset) —
 * otherwise they only line up at exactly 1440 and step sideways at any other
 * width. */
.svc-quote__rules {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(1280px, 100% - 160px);
	border-left: 1px solid #f7f7f740;
	border-right: 1px solid #f7f7f740;
	pointer-events: none;
}

/* The horizontal band spans the full section width (Figma node 8034:35405). */
.svc-quote::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 307px;
	transform: translateY(-50%);
	border-top: 1px solid #f7f7f740;
	border-bottom: 1px solid #f7f7f740;
	pointer-events: none;
}

.svc-quote__wrap {
	position: relative;
	z-index: 1;
	max-width: 1160px;
	margin: 0 auto;
}

.svc-quote__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Quote + attribution are one row inside the 20px stack (node 8034:35398). */
.svc-quote__row {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.svc-quote__mark {
	display: block;
	width: 32px;
	height: 33px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.svc-quote__mark--open {
	background-image: url("../images/service-enablement/icons/quote-open.svg");
}

.svc-quote__mark--close {
	align-self: flex-end;
	height: 34px;
	background-image: url("../images/service-enablement/icons/quote-close.svg");
	transform: rotate(180deg);
}

/* Reset the carried blockquote treatment (left rule + 12px/20px padding) — the
 * Figma quote is plain text on the purple band. */
.svc-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: Geist, sans-serif;
	font-weight: 600;
	font-size: 28px;
	line-height: 40px;
	color: #fdfdfc;
}

/* figcaption inherits a centred text-align from the theme base; Figma has the
 * attribution flush left under the quote (node 8034:35400). */
.svc-quote__source {
	text-align: left;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #fdfdfc;
}

.svc-quote__dash {
	font-weight: 600;
}

/* ============================================================
 * section_stats  (node 8034:35409) — "About Limestone" stat cards
 * The `stats` layout is shared; these rules only load on service pages.
 * ============================================================ */

.section_stats {
	padding: 128px 140px;
	border-top: 1px solid #e6e9ee;
}

.section_stats .padding-global,
.section_stats .container-large,
.section_stats .padding-section-medium {
	padding: 0;
	margin: 0;
	max-width: none;
	width: 100%;
}

.section_stats .ld-section-head {
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ld-stats__eyebrow {
	margin: 0 0 16px;
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #5442ec;
}

.section_stats .ld-section-head .heading-style-h2 {
	margin: 0 0 24px;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 48px;
	color: #1a1a1a;
}

.ld-stats__intro {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}

.ld-stats-grid {
	max-width: 1160px;
	margin: 60px auto 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: stretch;
	gap: 24px;
}

.ld-stat {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	background-color: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 6px;
}

/* The numeral is artwork (a stencil face that is not a loaded webfont) — the
 * accessible value lives in the img alt. Height is pinned so the glyph keeps
 * its designed 32px cap height and the intrinsic aspect ratio drives width. */
.ld-stat__value--media {
	display: block;
}

.ld-stat__value--media img {
	display: block;
	width: auto;
	height: 32px;
}

/* Divider under the numeral (node 8034:35675). */
.ld-stat__value + .ld-stat__label {
	position: relative;
	padding-top: 25px;
}

.ld-stat__value + .ld-stat__label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background-color: #e6e9ee;
}

.ld-stat__label {
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	color: #1a1a1a;
}

/* ============================================================
 * svc-engagement  (nodes 8045:35821 / 8214:17512) — "Engagement models"
 * Light two-column band: sticky intro + illustration beside a card stack.
 * ============================================================ */

.svc-engagement {
	padding: 128px 140px;
	border-top: 1px solid #e6e9ee;
	color: #1a1a1a;
}

.svc-engagement__wrap {
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.svc-engagement__intro {
	flex: 0 0 469px;
	width: 469px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-right: 24px;
	position: sticky;
	top: 120px;
}

.svc-engagement__eyebrow {
	margin: 0;
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #5d4af5;
}

.svc-engagement__heading {
	margin: 0;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 48px;
	color: #1a1a1a;
}

/* Figma places the 469 x 530.87 artwork inside a 452px-tall frame (node
 * 8175:32492 / 8445:19461) — the frame is what the LAYOUT reserves, not a crop.
 * The illustration's blocks finish well inside it and their drop shadow fades
 * out over the remaining ~79px, spilling past the frame into the gap below,
 * where it dissolves into the page.
 *
 * Cutting the image to the frame instead sliced straight through that fade and
 * drew a hard horizontal edge across it. So the image keeps its natural height
 * and the difference comes off the bottom margin: the layout still reserves the
 * frame's 452, and the shadow is free to finish.
 *
 * The margin is a percentage because it must track the column — percentages
 * resolve against the containing block's width, which is exactly what the image
 * fills here (the intro's 469 less its 24px padding). 530.87/469 - 452/469
 * = 16.845%. */
.svc-engagement__media {
	display: block;
	width: 100%;
	max-width: 469px;
	height: auto;
	margin-bottom: -16.845%;
}

/* Optional caption under the illustration (Figma node 8454:19825). Body
 * colour, not the purple the section's eyebrow carries — sampled off that
 * node, whose type renders #1a1a1a. */
.svc-engagement__media-caption {
	margin: 0;
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #1a1a1a;
}

.svc-engagement__cards {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.svc-engagement__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	background-color: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 6px;
}

.svc-engagement__card-tag {
	margin: 0;
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #5442ec;
}

.svc-engagement__card-title {
	margin: 0;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 32px;
	color: #1a1a1a;
}

.svc-engagement__card-body {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	color: #686868;
}

/* ============================================================
 * s-capability  (node 8297:21933) — the DARK two-column band
 * ("QA Automation" on AI SDLC; "Our Approach" on the home page). Only the
 * service-page deltas live here — the base rules stay in home-figma.css.
 * ============================================================ */

.s-capability {
	border-bottom: 1px solid #e6e9ee;
}

/* Solid light button under the intro copy (node 8297:22083). */
.s-capability__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 16px 32px;
	border: 1px solid #fdfdfc;
	border-radius: 4px;
	background-color: #fdfdfc;
	color: #1a1a1a;
	text-decoration: none;
	text-transform: uppercase;
	font-family: "DM Mono", monospace;
	font-weight: 500;
	font-size: 14px;
	line-height: 14px;
}

.s-capability__cta:hover,
.s-capability__cta:focus-visible {
	background-color: #e6e9ee;
	border-color: #e6e9ee;
	color: #1a1a1a;
}

/* Cards here carry a 64px icon beside the text (node 8297:21949). */
.s-capability__layer {
	padding: 40px;
}

.s-capability__layer-icon img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

/* ============================================================
 * svc-process  (node 8045:36078) — numbered step cards
 * Figma lays the 8 steps out as rows of 3 / 2 / 3; a 6-column grid
 * reproduces that exactly while staying fluid.
 * ============================================================ */

/* No border-bottom: every section draws its own divider as a border-TOP (see
 * "Section dividers" below), so a bottom edge here stacked against the next
 * section's top edge and rendered the process/industries join as a 2px rule
 * where every other join on the page is 1. */
.svc-process {
	padding: 128px 140px;
	border-top: 1px solid #e6e9ee;
}

.svc-process__wrap {
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.svc-process__head {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.svc-process__eyebrow {
	margin: 0 0 24px;
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #5d4af5;
}

.svc-process__heading {
	margin: 0 0 24px;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 48px;
	color: #1a1a1a;
}

.svc-process__body {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}

.svc-process__steps {
	width: 100%;
	margin: 60px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 24px;
}

.svc-process__step {
	grid-column: span 2;
	margin: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 32px;
	background-color: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 6px;
}

/* Row 2 holds two cards, so they take three columns each (Figma 8045:36168). */
.svc-process__step:nth-child(4),
.svc-process__step:nth-child(5) {
	grid-column: span 3;
}

/* Figma insets the last card of rows 2 and 3 by 40px rather than 32 — authored
 * identically on both the AI Training & Enablement and AI SDLC frames, so it is
 * the design, not a one-off slip. It also sets those rows' heights (282 / 342),
 * which the rest of the row inherits by stretching. */
.svc-process__step:nth-child(5),
.svc-process__step:nth-child(8) {
	padding: 40px;
}

.svc-process__num {
	display: block;
	height: 30px;
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 30px;
	color: #5d4af5;
}

.svc-process__num img {
	display: block;
	width: auto;
	height: 30px;
}

.svc-process__step-text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.svc-process__step-title {
	margin: 0;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 32px;
	color: #1a1a1a;
}

.svc-process__step-body {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;
	color: #686868;
}

/* ============================================================
 * svc-icongrid  (node 8251:18850) — icon + title cards, 3 / 2 / 3 flow
 * Same 6-column technique as .svc-process__steps.
 * ============================================================ */

.svc-icongrid {
	padding: 128px 140px;
}

.svc-icongrid__wrap {
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.svc-icongrid__head {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.svc-icongrid__eyebrow {
	margin: 0 0 16px;
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #5442ec;
}

.svc-icongrid__heading {
	margin: 0 0 24px;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 48px;
	color: #1a1a1a;
}

.svc-icongrid__body {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}

.svc-icongrid__cards {
	width: 100%;
	margin: 60px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 24px;
}

.svc-icongrid__card {
	grid-column: span 2;
	margin: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 40px 32px;
	background-color: #fff;
	border: 1px solid #e6e9ee;
	border-radius: 6px;
}

/* Row 2 holds two cards (Figma node 8251:19385). */
.svc-icongrid__card:nth-child(4),
.svc-icongrid__card:nth-child(5) {
	grid-column: span 3;
}

.svc-icongrid__card-icon,
.svc-icongrid__card-icon img {
	display: block;
	width: 32px;
	height: 32px;
}

.svc-icongrid__card-icon img {
	object-fit: contain;
}

.svc-icongrid__card-title {
	margin: 0;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 32px;
	color: #1a1a1a;
}

/* ============================================================
 * svc-industries  (node 8056:19849) — icon cards + "Built for" checklist
 * ============================================================ */

.svc-industries {
	padding: 128px 140px;
}

.svc-industries__wrap {
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.svc-industries__head {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.svc-industries__eyebrow {
	margin: 0 0 16px;
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #5442ec;
}

.svc-industries__heading {
	margin: 0 0 24px;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 48px;
	color: #1a1a1a;
}

.svc-industries__body {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}

.svc-industries__cards {
	width: 100%;
	margin-top: 60px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* Figma node 8056:19985 — these cards are borderless white panels. */
.svc-industries__card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	background-color: #fff;
	border-radius: 6px;
}

.svc-industries__card-icon,
.svc-industries__card-icon img {
	display: block;
	width: 32px;
	height: 32px;
}

.svc-industries__card-icon img {
	object-fit: contain;
}

.svc-industries__card-text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.svc-industries__card-title {
	margin: 0;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	color: #1a1a1a;
}

.svc-industries__card-body {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #686868;
}

.svc-industries__list-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.svc-industries__list-label {
	margin: 0;
	font-family: Geist, sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}

.svc-industries__list {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.svc-industries__list-item {
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}

/* Centred footnote under the card grid (Figma AI SDLC node 8233:18473). */
.svc-industries__note {
	width: 100%;
	margin: 24px 0 0;
	text-align: center;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #1a1a1a;
}

/* ============================================================
 * s-pe  (node 8156:20655) — "For Private Equity"
 * Shared layout; only the copy-specific homepage rules need relaxing.
 * ============================================================ */

.s-pe__head {
	max-width: 1160px;
}

/* The homepage instance pins its one-line subtitle with nowrap; this page's
 * description is a full sentence and must wrap. */
.s-pe__subtitle {
	white-space: normal;
	color: #1a1a1a;
}

.s-pe__card {
	gap: 16px;
}

.s-pe__card-label,
.s-pe__card-title,
.s-pe__card-body {
	margin: 0;
}

/* ============================================================
 * s-faq  (node 8052:19741)
 * This page centers the head and wraps the accordion in a bordered panel,
 * unlike the homepage's left-editorial treatment.
 * ============================================================ */

.s-faq {
	padding: 128px 140px;
}

.s-faq__wrap {
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 60px;
}

.s-faq__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 24px;
}

.s-faq__eyebrow {
	margin: 0;
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #5d4af5;
}

.s-faq__heading {
	margin: 0;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 48px;
	color: #1a1a1a;
}

.s-faq__accordion {
	padding: 32px;
	background-color: #fdfdfc;
	border: 1px solid #e6e9ee;
	border-radius: 6px;
}

/* Figma draws the separator as a zero-height line on the item boundary, so it
 * must not add to the item's height — an inset shadow paints the same hairline
 * without occupying layout space (a border added 1px per item, 6px per panel).
 *
 * The border it replaces has to be cleared too. .s-faq__item arrives from the
 * homepage stylesheet already carrying one, and the two paint on the SAME edge:
 * left in place the separator came out 2px, and the item kept the extra pixel
 * of height this shadow exists to avoid. */
.s-faq__item {
	border-bottom: 0;
	box-shadow: inset 0 -1px 0 #e6e9ee;
}

.s-faq__item:last-child {
	box-shadow: none;
}

.s-faq__item-heading {
	margin: 0;
}

.s-faq__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 8px;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font-family: Archivo, sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: #1a1a1a;
}

/* Figma node 8052:19749 — an expanded item is 24 (top) + 40 (header) + 16 (gap)
 * + 24 (answer) + 24 (bottom) = 128, so the open trigger's bottom inset is the
 * 16px gap, not the collapsed item's 24px. */
.s-faq__trigger[aria-expanded="true"] {
	color: #5d4af5;
	padding-bottom: 16px;
}

.s-faq__trigger-icon {
	position: relative;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 20px;
}

.s-faq__trigger[aria-expanded="true"] .s-faq__trigger-icon {
	background-color: rgba(93, 74, 245, 0.08);
}

/* Plus / minus drawn in CSS so no icon font is needed. */
.s-faq__trigger-icon::before,
.s-faq__trigger-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 1.5px;
	background-color: #686868;
	transform: translate(-50%, -50%);
}

.s-faq__trigger-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.s-faq__trigger[aria-expanded="true"] .s-faq__trigger-icon::before,
.s-faq__trigger[aria-expanded="true"] .s-faq__trigger-icon::after {
	background-color: #5d4af5;
}

.s-faq__trigger[aria-expanded="true"] .s-faq__trigger-icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.s-faq__panel {
	padding: 0 48px 24px 8px;
}

.s-faq__panel[aria-hidden="true"] {
	display: none;
}

/* The panel owns the answer's inset; the answer element itself must not repeat
 * it (the carried rich-text rule applies the same padding, doubling the block). */
.s-faq__answer,
.s-faq__answer p {
	margin: 0;
	padding: 0;
	font-family: Geist, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #686868;
}

/* ============================================================
 * Responsive — 1024 / 768 / 390 parity passes
 * (mobile reference frame 8164:41358)
 * ============================================================ */

@media (max-width: 1279px) {
	.svc-hero,
	.svc-tracks,
	.svc-cases,
	.svc-quote,
	.svc-process,
	.svc-icongrid,
	.svc-engagement,
	.svc-industries,
	.section_stats,
	.svc-engagement,
	.s-capability,
	.s-faq {
		padding-left: 80px;
		padding-right: 80px;
	}

	.svc-hero {
		padding-top: 180px;
	}

	.svc-hero__vlines {
		inset: 0 40px;
	}

	/* The quote rules keep the container-edge geometry the page rules use
	 * (left 50%% + translate); only their WIDTH changes per breakpoint, in the
	 * blocks at the end of this file. A viewport inset here would put them
	 * somewhere different from the rules they have to line up with. */
	.svc-quote__rules::before {
		left: -40px;
		right: -40px;
	}

	.svc-engagement__intro {
		flex-basis: 380px;
		width: 380px;
	}

	.svc-hero__media-caption {
		right: 32px;
		bottom: 24px;
	}
}

/* Between the desktop grid and the tablet stack, the densest grids (8 process
 * steps, 4 stat cards) get too narrow to read at ~1024. Relax those two first,
 * while the rest of the page still holds its desktop proportions. */
@media (max-width: 1100px) {
	.svc-process__steps,
	.svc-icongrid__cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.svc-process__step,
	.svc-process__step:nth-child(4),
	.svc-process__step:nth-child(5),
	.svc-icongrid__card,
	.svc-icongrid__card:nth-child(4),
	.svc-icongrid__card:nth-child(5) {
		grid-column: span 1;
	}

	.ld-stats-grid {
		flex-wrap: wrap;
	}

	.ld-stat {
		flex: 1 1 calc(50% - 12px);
		min-width: calc(50% - 12px);
	}
}

@media (max-width: 991px) {
	.svc-hero {
		min-height: 0;
	}

	/* The connector dot is a desktop-only overlay, pinned by pixel offsets to
	 * the 568px column. Below that breakpoint the artwork carries its own
	 * connector, so this one is both misplaced and a duplicate. It was hidden
	 * for tablet only, which left it painting under 768. */
	.svc-hero--ai-sdlc .svc-hero__media-col::after {
		display: none;
	}

	.svc-hero,
	.svc-tracks,
	.svc-cases,
	.svc-quote,
	.svc-process,
	.svc-icongrid,
	.svc-engagement,
	.svc-industries,
	.section_stats,
	.svc-engagement,
	.s-capability,
	.s-faq {
		padding: 96px 40px;
	}

	.svc-hero {
		padding-top: 152px;
	}

	.svc-hero__vlines {
		inset: 0 24px;
	}

	.svc-quote__rules::before {
		left: -24px;
		right: -24px;
		height: 240px;
	}

	.svc-hero__heading {
		font-size: 48px;
		line-height: 56px;
	}

	.svc-hero__panel {
		grid-template-columns: 1fr;
	}

	.svc-hero__media-col {
		min-height: 320px;
	}

	.svc-hero__media-caption {
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0 32px 32px;
	}

	.svc-tracks__cards,
	.svc-cases__cards {
		flex-direction: column;
	}

	.ld-stats-grid {
		flex-wrap: wrap;
	}

	.ld-stat {
		flex: 1 1 calc(50% - 12px);
		min-width: calc(50% - 12px);
	}

	.svc-engagement__wrap {
		flex-direction: column;
	}

	.svc-engagement__intro {
		position: static;
		flex-basis: auto;
		width: 100%;
		padding-right: 0;
	}

	/* Tablet has no authored frame to hold to, so the artwork simply takes the
	 * height it needs and nothing is pulled out of the flow. */
	.svc-engagement__media {
		max-width: 100%;
		height: auto;
		margin-bottom: 0;
	}

	.svc-process__steps {
		grid-template-columns: repeat(2, 1fr);
	}

	.svc-process__step,
	.svc-process__step:nth-child(4),
	.svc-process__step:nth-child(5) {
		grid-column: span 1;
	}

	.svc-industries__cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.svc-hero,
	.svc-tracks,
	.svc-cases,
	.svc-quote,
	.svc-process,
	.svc-icongrid,
	.svc-engagement,
	.svc-industries,
	.section_stats,
	.svc-engagement,
	.s-capability,
	.s-faq {
		padding: 64px 24px;
	}

	.svc-hero {
		padding-top: 120px;
	}

	.svc-hero__vlines {
		display: none;
	}

	/* --- Vertical rules --------------------------------------------------
	 * Figma mobile insets the rules only 10px from the frame edge (node
	 * 8164:42709 is x=10, width=370), leaving them 14px clear of the 24px
	 * content gutter. The desktop geometry (`100% - 160px`) resolves to
	 * 80/310 at this width, which runs the rules straight through the copy. */
	.main-content::before,
	.svc-quote__rules,
	.s-capability::after {
		width: calc(100% - 20px);
	}

	/* --- Hero head -------------------------------------------------------
	 * Mobile left-aligns the whole block against the 24px gutter, where
	 * desktop centres it, and the stack is unevenly spaced: 20px under the
	 * eyebrow, 12px under the heading. The base 24px `gap` cannot express two
	 * different gaps, so it is dropped here and the spacing carried on the
	 * elements themselves — as adjacent-sibling rules, so a head with no
	 * eyebrow does not inherit a stray 20px. */
	.svc-hero__head {
		align-items: flex-start;
		text-align: left;
		gap: 0;
	}

	.svc-hero__eyebrow + .svc-hero__heading {
		margin-top: 20px;
	}

	.svc-hero__heading + .svc-hero__lead {
		margin-top: 12px;
	}

	.svc-hero__heading {
		font-size: 40px;
		line-height: 48px;
	}

	.svc-hero__lead {
		font-size: 16px;
		line-height: 24px;
	}

	/* --- Hero panel ------------------------------------------------------
	 * Figma mobile (node 8297:21025 / 8164:42401) makes the white panel ONE
	 * 24px-padded column holding the form and, as a sibling 24px below it,
	 * the artwork — so the artwork is inset from the panel edge like every
	 * other element, and the panel closes 24px under it. We had the padding
	 * on the form column instead, which let the artwork run full-bleed to
	 * the panel edge and left the column's own slack at the bottom. */
	.svc-hero__panel {
		padding: 24px;
		gap: 24px;
	}

	.svc-hero__form-col {
		padding: 0;
	}

	/* Names stack here, on the same 24px step as the fields around them —
	 * node 8164:42401 lists all four inputs in one 294px column. */
	.svc-hero__field-row {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* The artwork is a fixed-height window that the image fills and overflows
	 * — the same model as desktop, at the mobile sizes. */
	.svc-hero__media-col {
		position: relative;
		min-height: 0;
		overflow: hidden;
	}

	.svc-hero__media {
		position: absolute;
		object-fit: cover;
	}

	.svc-hero__media-caption {
		position: absolute;
		padding: 0;
	}

	/* `right`/`bottom` are cleared because the desktop rules pin each caption
	 * by those edges. Left in place they combine with the `top` below to force
	 * the box's height — Custom AI Agents resolved to 352 - 253 - 42 = 57px
	 * against a caption that measures 82 — so the copy spilled out of a box
	 * the wrong size instead of sitting in one the right size.
	 *
	 * Written per page rather than on the shared class because that is the
	 * weight the desktop rules carry; a single-class reset loses to them. */
	.svc-hero--ai-training-enablement .svc-hero__media-caption,
	.svc-hero--ai-sdlc .svc-hero__media-caption,
	.svc-hero--custom-ai-agents .svc-hero__media-caption {
		right: auto;
		bottom: auto;
	}

	/* Alignment is per page, not shared: Enablement centres its caption over
	 * the artwork (node 8164:42452 — label and body share the column's centre
	 * axis) while the other two set theirs flush left inside a 219px measure,
	 * which is why this sits on the page rule rather than the one above. */
	.svc-hero--ai-training-enablement .svc-hero__media-caption {
		text-align: center;
	}

	/* Mobile sets the supporting line a step down, on a 20px line pitch rather
	 * than the desktop 24 — the caption block measures 24 + 4 + 60 in Figma
	 * (nodes 8164:42453/42454), where 60 is its three lines. At 16/24 ours ran
	 * 12px long and pushed the artwork's clearance out. */
	.svc-hero__media-caption-body {
		font-size: 14px;
		line-height: 20px;
	}

	/* --- Hero artwork ----------------------------------------------------
	 * Each of these three sizes the IMAGE FILE against its column, and every
	 * one of these files carries a different amount of transparent margin
	 * around the illustration — so matching the file to the frame does not put
	 * the illustration where Figma draws it. Enablement was the worst of them:
	 * the artwork came out 286px wide against the design's 238 and ran down
	 * into the caption.
	 *
	 * These are solved the other way round, from the ILLUSTRATION out. For
	 * each page the artwork's opaque bounds were measured in the source file
	 * and in Figma's own render of the frame, and the width/offsets below are
	 * what put the second on top of the first. Working from the file's own
	 * edges instead is what drifted every page.
	 *
	 * Because width and height keep each file's natural ratio, the box crops
	 * nothing — the column's `overflow: hidden` does all the clipping, exactly
	 * as the Figma frame does.
	 *
	 * Enablement — container 294 × 457, caption at x=4 / y=362 across 285px
	 * (node 8164:42450). Artwork 238 wide sitting at x=28, y=33. */
	.svc-hero--ai-training-enablement .svc-hero__media-col {
		height: 457px;
	}

	/* One level more specific than the per-page desktop rules further up the
	 * file — percentages there were still winning the width. `max-width` is
	 * cleared because the theme's base `img { max-width: 100% }` would
	 * otherwise clamp the artwork back to the column. */
	.svc-hero--ai-training-enablement .svc-hero__media-col .svc-hero__media {
		inset: 0 auto auto -36px;
		width: 367px;
		max-width: none;
		height: 367px;
	}

	.svc-hero--ai-training-enablement .svc-hero__media-caption {
		left: 4px;
		top: 362px;
		width: 285px;
	}

	/* AI SDLC — container 294 × 399 (node 8297:21824), caption at x=52 / y=301
	 * across 219px. Artwork 213 wide at x=35, y=12. */
	.svc-hero--ai-sdlc .svc-hero__media-col {
		height: 399px;
	}

	.svc-hero--ai-sdlc .svc-hero__media-col .svc-hero__media {
		inset: -8px auto auto -36px;
		width: 368px;
		max-width: none;
		height: 358px;
	}

	.svc-hero--ai-sdlc .svc-hero__media-caption {
		left: 52px;
		top: 301px;
		width: 219px;
	}

	/* These two pages set the whole caption 14/20 — their labels measure 20px
	 * tall (nodes 8297:21821 and 8462:19845) against the 24 Enablement carries,
	 * and its ink is a 14px cap — on a 2px step down to the body rather than
	 * Enablement's 4. Both run flush left. */
	.svc-hero--ai-sdlc .svc-hero__media-caption,
	.svc-hero--custom-ai-agents .svc-hero__media-caption {
		text-align: left;
		gap: 2px;
	}

	.svc-hero--ai-sdlc .svc-hero__media-caption-title,
	.svc-hero--custom-ai-agents .svc-hero__media-caption-title {
		font-size: 14px;
		line-height: 20px;
	}

	/* Custom AI Agents — container 294 × 344 (node 8462:19842). That frame is
	 * a bare image fill: unlike the other two pages, the mobile design has no
	 * caption over the art. The caption still exists in the markup, so rather
	 * than hide copy that ships in the HTML it flows UNDER the artwork, which
	 * keeps the 344px art size Figma specifies and leaves nothing overlapping. */
	/* This page DOES caption its artwork on mobile — the caption is a sibling
	 * of the image frame rather than a child of it, so it does not show up
	 * under the container node and an earlier reading of the file concluded
	 * the mobile design had none. It is laid out exactly like the SDLC one:
	 * a 219px measure at x=52, over a 352px frame. */
	.svc-hero--custom-ai-agents .svc-hero__media-col {
		height: 352px;
		min-height: 0;
	}

	/* Artwork 265 wide at x=23, y=10 in the 294 × 344 frame. */
	.svc-hero--custom-ai-agents .svc-hero__media-col .svc-hero__media {
		inset: -40px auto auto -12px;
		width: 324px;
		max-width: none;
		height: 365px;
	}

	/* Node 8462:19844 — x=52, y=253, 219 wide, clear of the connector that
	 * closes the artwork at 237. */
	.svc-hero--custom-ai-agents .svc-hero__media-caption {
		left: 52px;
		top: 253px;
		width: 219px;
	}

	.svc-tracks__heading,
	.svc-cases__heading,
	.svc-process__heading,
	.svc-industries__heading,
	.svc-icongrid__heading,
	.svc-engagement__heading,
	.s-capability__heading,
	.s-faq__heading,
	.section_stats .ld-section-head .heading-style-h2,
	.s-pe__title {
		font-size: 28px;
		line-height: 36px;
	}

	/* --- Section head -------------------------------------------------
	 * Figma mobile authors every section head as one centred auto-layout
	 * column on a 12px gap (enablement frame 8164:41358 — e.g. the tracks
	 * head measures 20 + 12 + 108 + 12 + 144 = 296). Ours carried per-child
	 * margins of 16px/24px instead, which inflated every section. Express it
	 * as the flex column Figma actually authored and zero the child margins,
	 * so the rhythm can't drift per section. */
	.svc-tracks__head,
	.svc-cases__head,
	.svc-process__head,
	.svc-industries__head,
	.svc-icongrid__head,
	.s-pe__head,
	.s-faq__head,
	.section_stats .ld-section-head {
		display: flex;
		flex-direction: column;
		gap: 12px;
		text-align: center;
		/* The 32px step below belongs to the content block's margin-top; any
		 * bottom margin the desktop rules put on the head itself (the FAQ
		 * head carries 60px) would stack on top of it. */
		margin-bottom: 0;
	}

	.svc-tracks__head > *,
	.svc-cases__head > *,
	.svc-process__head > *,
	.svc-industries__head > *,
	.svc-icongrid__head > *,
	.s-pe__head > *,
	.s-faq__head > *,
	.section_stats .ld-section-head > * {
		margin-top: 0;
		margin-bottom: 0;
	}

	/* --- Head → content ------------------------------------------------
	 * A flat 32px on every section (head bottom → first card row), against
	 * the 40-60px the desktop rules carry. */
	.svc-tracks__cards,
	.svc-cases__cards,
	.svc-process__steps,
	.svc-industries__cards,
	.svc-icongrid__cards,
	.s-pe__cards,
	.s-faq__accordion,
	.ld-stats-grid,
	.svc-engagement__cards {
		margin-top: 32px;
	}

	/* --- "What you get" panel -------------------------------------------
	 * Node 8534:40944: 342 x 236 on 24px padding, sitting 16px under the last
	 * card like any other row in the stack, with the title and every checklist
	 * item flush left — desktop centres both and pads 32. */
	.svc-cases__panel {
		margin-top: 16px;
		padding: 24px;
		align-items: flex-start;
		text-align: left;
	}

	.svc-cases__panel-body {
		flex-direction: column;
		align-items: flex-start;
	}

	/* --- Card rows ------------------------------------------------------
	 * 16px between cards everywhere (Figma stacks each card container on a
	 * 16px gap; the desktop grids use 24-32px). */
	.svc-tracks__cards,
	.svc-cases__cards,
	.svc-process__steps,
	.svc-industries__cards,
	.svc-icongrid__cards,
	.s-pe__cards,
	.svc-engagement__cards {
		gap: 16px;
	}

	/* The engagement intro is eyebrow → heading → artwork rather than a
	 * head/cards pair, so it carries the same 12px and 32px steps directly
	 * (node 8164:42840: head 20 + 12 + 72, artwork 32 below it). */
	.svc-engagement__intro {
		gap: 0;
		text-align: center;
	}

	.svc-engagement__eyebrow {
		margin-bottom: 12px;
	}

	.svc-engagement__heading {
		margin-bottom: 32px;
	}

	/* --- Quote -----------------------------------------------------------
	 * Figma mobile node 8164:42699 is the one section that does NOT take the
	 * 64px vertical padding — its content sits 40px from each edge — and its
	 * quote is Geist Semi Bold 20/28 rather than the 22/32 we carried. The
	 * figure stacks mark / quote+source / closing mark on a 32px gap. */
	.svc-quote {
		padding: 40px 24px;
	}

	/* The horizontal band is inset 10px from the section's top and bottom here,
	 * closing the same 10px frame the vertical rules draw — measured off Figma's
	 * own render of the mobile section, whose rules fall on rows 10 and 349 of
	 * 360 and columns 10 and 379 of 390 (node 8462:19941). Desktop's fixed 307px
	 * band centred in the section resolved to 30/337 here, which read as a
	 * shallower box floating inside the frame rather than part of it. */
	.svc-quote::before {
		top: 10px;
		bottom: 10px;
		height: auto;
		transform: none;
	}

	.svc-quote__figure {
		gap: 32px;
	}

	.svc-quote__text {
		font-size: 20px;
		line-height: 28px;
	}

	.svc-tracks__card,
	.svc-cases__card,
	.svc-industries__card,
	.svc-process__step,
	.ld-stat,
	.svc-engagement__card,
	.s-capability__layer {
		padding: 24px;
	}

	/* The layer stacks column-reverse on mobile, so this gap is the step from
	 * the icon down to the tag that opens the text block: 16, not the 24 the
	 * shared stylesheet carries. */
	.s-capability__layer {
		gap: 16px;
	}

	.svc-icongrid__cards,
	.svc-process__steps,
	.svc-industries__cards {
		grid-template-columns: 1fr;
	}

	/* Figma mobile (node 8164:42712) lays the stat row out as `flex-wrap` with
	 * a 16px gap and cards that are `flex-1 min-w-[163px]` — at the 342px
	 * content width that resolves to TWO cards per row, not the one-up stack
	 * we had. Reproduce the authored constraint rather than the outcome, so
	 * the row still reflows correctly at other small widths. */
	.ld-stats-grid {
		flex-wrap: wrap;
		gap: 16px;
		margin-top: 32px;
	}

	.ld-stat {
		flex: 1 1 163px;
		min-width: 163px;
	}

	.svc-process__step-body,
	.svc-engagement__card-body,
	.s-capability__layer-body,
	.s-pe__card-body {
		font-size: 16px;
		line-height: 24px;
	}

	/* Figma mobile keeps the stat label at 20/28 (node 8164:42781 measures 56
	 * for two lines, 84 for three) — it does NOT drop to the 16/24 body size
	 * the rest of the section uses. */
	.ld-stat__label {
		font-size: 20px;
		line-height: 28px;
	}

	/* Stat card: 24px padding with a 24px rhythm between numeral, rule and
	 * label (num bottom 48 → rule 72 → label 97). */
	.ld-stat {
		gap: 24px;
	}

	/* The numeral artwork is 24px tall on mobile, 32px on desktop
	 * (node 8164:42775). */
	.ld-stat__value--media img {
		height: 24px;
	}

	/* This heading's own 24px bottom margin outranks the head's `> *` reset
	 * (0,3,0 vs 0,2,0), so it has to be cleared at matching specificity or
	 * the stats head runs 24px tall. */
	.section_stats .ld-section-head .heading-style-h2 {
		margin-bottom: 0;
	}

	/* Figma crops the engagement artwork to 342 × 353 on mobile
	 * (node 8164:42888) rather than the 452px desktop block. */
	/* --- The artwork's own padding ---------------------------------------
	 * The source PNG carries a wide transparent margin, and it is not even:
	 * measured on the 1876 x 2124 file the illustration starts 38px from the
	 * left and top but stops 183px short of the right edge and 73 short of the
	 * bottom. Figma sizes its container to the ILLUSTRATION — the 342px frame
	 * holds a 388px-wide canvas, so the blocks meet both gutters — while a box
	 * that fits the CANVAS renders the same artwork ~11% small and sitting
	 * left, with a band of empty space down the right.
	 *
	 * So scale by the canvas-to-artwork ratio (1876/1655 = 113.35%), as a
	 * percentage rather than pixels so it holds across the whole range and not
	 * just the 390 frame. The canvas keeps the column's left edge, as it does
	 * in the design: measured against Figma's own render the illustration then
	 * lands at x 42..335 on the 390 frame — very slightly left of the frame's
	 * centre, which is where the design puts it.
	 *
	 * The section clips what hangs past the column — transparent canvas — so
	 * the wider box cannot scroll the page sideways. It goes on the SECTION
	 * rather than the intro because `overflow` clips both axes: on the intro
	 * it would also cut the shadow below, which is the whole point of the
	 * negative bottom margin. Safe here only because the intro stops being
	 * sticky below 992 — an `overflow` ancestor would strand it. */
	.svc-engagement {
		overflow: hidden;
	}

	/* Same story as desktop, at this frame's numbers: the artwork is 439 tall
	 * where node 8462:19991 reserves 353, and Figma seats it 20px above the
	 * container's top (its blocks run y=6..318 inside the frame, ours y=26).
	 * Both offsets come off the margins so the box still occupies 353:
	 * 439 - 20 - 353 = 66. */
	.svc-engagement__media {
		width: 113.35%;
		max-width: none;
		height: auto;
		margin-top: -20px;
		margin-bottom: -66px;
	}

	/* The intro carries its spacing on the children (its own `gap` is 0), so
	 * the caption's clearance from the artwork is its own margin. */
	.svc-engagement__media-caption {
		margin-top: 32px;
	}

	/* The wrap's 24px column gap was stacking on top of the card stack's own
	 * 32px margin, leaving the artwork 56px clear of the first card where
	 * Figma has 32 (node 8164:42888 closes at y=553, the cards open at 585).
	 * The margin is the one that spaces every other section, so the gap goes. */
	.svc-engagement__wrap {
		gap: 0;
	}

	/* --- FAQ -------------------------------------------------------------
	 * Figma mobile node 8169:22656: the accordion panel is padded 24px and a
	 * collapsed row is 16 + 48 + 16 = 80 tall, with the question set 18/24
	 * (two lines measure 48). */
	.s-faq__accordion {
		padding: 24px;
	}

	/* This wrap is the one head/content pair that is itself a flex container
	 * with a gap (60px), so the shared 32px margin-top would stack on it. */
	.s-faq__wrap {
		gap: 32px;
	}

	.s-faq__accordion {
		margin-top: 0;
	}

	.s-faq__trigger {
		font-size: 18px;
		line-height: 24px;
		padding: 16px 0;
		gap: 16px;
	}

	.s-faq__panel {
		padding: 0 0 24px;
	}

	/* --- Industry card ---------------------------------------------------
	 * Figma mobile node 8169:21997: a 428px card is 24 padding + 24 icon +
	 * 16 + 108 text + 16 + 216 features + 24 padding. Ours ran a 32px icon
	 * and 24px gaps — a flat +32 on every card in the section. */
	.svc-industries__card {
		gap: 16px;
	}

	.svc-industries__card-icon,
	.svc-industries__card-icon img {
		width: 24px;
		height: 24px;
	}

	.svc-industries__card-text {
		gap: 8px;
	}

	/* The list-less variant keeps a 32px icon and a 16px title/body step
	 * (node 8361:21196 — a 284px card is 24 + 32 + 16 + 188 + 24). */
	.svc-industries__card--plain .svc-industries__card-icon,
	.svc-industries__card--plain .svc-industries__card-icon img {
		width: 32px;
		height: 32px;
	}

	.svc-industries__card--plain .svc-industries__card-text {
		gap: 16px;
	}

	/* Figma sits every section CTA 32px under the card stack (e.g. node
	 * 8175:32456 at y=1852, cards ending at 1820). */
	.svc-link,
	.s-pe__cta {
		margin-top: 32px;
	}

	/* The section links CENTRE across the 342px content width on mobile
	 * (node 8175:32456), where desktop left-aligns them under the cards. The
	 * Private Equity CTA goes with them: its button node spans the full 342
	 * (node 8169:22645) with the label starting at x=24.5 and the arrow
	 * closing at 317.5 — even margins, so the contents are centred in it.
	 *
	 * `align-self` matters because .s-pe__wrap is a centred flex column: left
	 * alone the CTA sizes to its content, and `justify-content` then has
	 * nothing to distribute. Stretching it to the column gives Figma's
	 * full-width button box, and the tap target that goes with it. */
	.svc-link,
	.s-pe__cta {
		/* inline-flex on desktop, so centring its CONTENT would not move the
		 * box — it has to span the content width to centre like Figma does. */
		display: flex;
		align-self: stretch;
		justify-content: center;
		text-align: center;
	}

	/* --- Process step ---------------------------------------------------
	 * Figma mobile node 8169:769: a 220px card is 24 padding + 24 numeral +
	 * 16 + 132 text + 24 padding, and the text block is a 28px header over a
	 * 96px body on an 8px gap. Ours ran 40px numeral gap, a 30px numeral, a
	 * 16px text gap and a 24/32 title — ~44px per card over eight cards. */
	.svc-process__step {
		gap: 16px;
	}

	/* The 40px padding Figma authors on the last card of desktop rows 2 and 3
	 * is a desktop-grid detail; the mobile stack is a uniform 24px. */
	.svc-process__step:nth-child(5),
	.svc-process__step:nth-child(8) {
		padding: 24px;
	}

	.svc-process__num,
	.svc-process__num img {
		height: 24px;
	}

	.svc-process__step-text {
		gap: 8px;
	}

	.svc-process__step-title {
		font-size: 20px;
		line-height: 28px;
	}

	/* --- Icon grid card --------------------------------------------------
	 * Figma mobile node 8351:19865: 24px padding and a 24px gap under the
	 * 32px icon, giving a 160px card for a two-line title and 132px for one.
	 * Ours carried the desktop 40/32 padding and a 32px gap — ~42px on each
	 * of eight cards. */
	.svc-icongrid__card {
		padding: 24px;
		gap: 24px;
	}

	/* --- Capability ------------------------------------------------------
	 * Figma mobile node 8365:20249 orders this section intro → layers → CTA,
	 * where desktop nests the CTA inside the sticky intro column. Dissolving
	 * the intro box (its padding and sticky behaviour are desktop-only)
	 * promotes its children to the section's own flex column, so the CTA can
	 * take its Figma position after the cards via `order`. */
	.s-capability__intro {
		display: contents;
	}

	.s-capability__wrap {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	/* `align-self` is what makes the inherited `text-align: center` mean
	 * anything here. Dissolving the intro above promotes the eyebrow into the
	 * section's flex column, which sizes its items to their content — the
	 * eyebrow's box measured 109px against the 342 content width, so centring
	 * inside it left the text sitting on the gutter. The heading and body are
	 * long enough to fill the column on their own, which is why only the
	 * eyebrow showed it. */
	.s-capability__eyebrow {
		align-self: stretch;
		margin-bottom: 12px;
	}

	.s-capability__heading {
		margin-bottom: 16px;
	}

	.s-capability__body {
		margin-bottom: 32px;
		font-size: 16px;
		line-height: 24px;
	}

	.s-capability__layers {
		margin-bottom: 32px;
	}

	.s-capability__cta {
		order: 1;
		margin-top: 0;
	}

	/* --- Card titles -----------------------------------------------------
	 * Every card header in the mobile frames is 20/28 (a single line measures
	 * 28: nodes 8164:42894 engagement, 8169:774 process, 8169:22000
	 * industries), not the 24/32 the desktop cards use. */
	.svc-tracks__card-title,
	.svc-cases__card-title,
	.svc-industries__card-title,
	.svc-engagement__card-title,
	.svc-icongrid__card-title,
	.s-pe__card-title,
	.s-capability__layer-title {
		font-size: 20px;
		line-height: 28px;
	}
}

@media (max-width: 479px) {
	/* No heading step-down here: 40/48 is the mobile size Figma authors on the
	 * 390 frame, and 390 falls inside this range — a 32/40 override would have
	 * meant the block above never applied at the width it was written for. */

	.svc-cases__badge {
		white-space: normal;
	}
}

/* ============================================================
 * Media column below the desktop breakpoint
 * The per-page absolute geometry above is tied to the 568x584 desktop column;
 * under 992px the column reflows, so the artwork and caption stack normally.
 * ============================================================ */

/* Tablet only — below 768 the mobile block above carries the per-page
 * geometry Figma authors for each hero, so this flattening must not reach it. */
@media (min-width: 768px) and (max-width: 991px) {
	.svc-hero__media-col {
		display: flex;
		flex-direction: column;
	}

	.svc-hero__media,
	.svc-hero--ai-training-enablement .svc-hero__media,
	.svc-hero--ai-sdlc .svc-hero__media,
	.svc-hero--custom-ai-agents .svc-hero__media {
		position: static;
		inset: auto;
		width: 100%;
		height: auto;
		max-height: 420px;
		object-position: center;
	}

	.svc-hero__media-caption,
	.svc-hero--ai-training-enablement .svc-hero__media-caption,
	.svc-hero--ai-sdlc .svc-hero__media-caption,
	.svc-hero--custom-ai-agents .svc-hero__media-caption {
		position: static;
		inset: auto;
		width: auto;
		max-width: none;
	}

}

/* ============================================================
 * Section dividers
 * Every service section is separated by the same hairline rule, so the page
 * reads as one continuous grid with the vertical rules. The hero has none (it
 * sits against the header), and the two filled bands take a lighter tone so the
 * divider stays visible against purple / near-black.
 * ============================================================ */

.svc-tracks,
.svc-cases,
.svc-icongrid,
.svc-engagement,
.svc-process,
.svc-industries,
.section_stats,
.s-pe,
.s-faq,
.svc-quote,
.s-capability {
	border-top: 1px solid #e6e9ee;
}

.svc-quote,
.s-capability {
	border-top-color: #f7f7f740;
}

/* .s-capability arrives from the homepage stylesheet carrying a border-BOTTOM
 * as well, which is right there and wrong here: on these pages the section
 * below it draws its own top edge, so the two stacked and rendered the join
 * 2px. Cleared here rather than in home-figma.css, which the homepage shares —
 * this file loads after it and only on the service pages. */
.s-capability {
	border-bottom: 0;
}

/* Close the page off above the footer. */
.s-faq {
	border-bottom: 1px solid #e6e9ee;
}

/* ============================================================
 * Capability intro column — service-page corrections
 *
 * Figma AI SDLC node 8297:21934: the 469px intro column is a 40px-gap stack
 * with a 24px right padding, so its text measures 445px. Two consequences the
 * shared homepage rules don't cover:
 *
 *  - 445px is the measure that produces the authored line breaks ("QA is the
 *    next / bottleneck. We own it / too." over 3 lines, body over 8). The
 *    homepage rule caps the body at 420px to hit ITS OWN Figma wrap
 *    (node 7908:32942), which is a different frame — restore the real
 *    measure here rather than editing the shared homepage stylesheet.
 *  - The CTA button is service-page-only, so nothing carried the stack's
 *    40px gap onto it and it sat flush against the body copy.
 * ============================================================ */
.s-capability__body {
	max-width: none;
}

/* Scoped to the two-column breakpoint: below it the column is full width (so
 * the 24px inset would just eat into the section gutter) and Figma re-orders
 * the CTA to the foot of the section, which the mobile block above handles.
 * Left unscoped, these would win on cascade order and undo it. */
@media (min-width: 992px) {
	.s-capability__intro {
		padding-right: 24px;
	}

	.s-capability__cta {
		margin-top: 40px;
	}
}

/* ============================================================
 * Vertical rules — intermediate widths
 *
 * Figma only authors this page at 1440 and 390, and at both the rules sit
 * OUTSIDE the content gutter (1440: rules at 80, content at 140; 390: rules
 * at 10, content at 24). The desktop `100% - 160px` holds that relationship
 * only at 1440 and up — at 1024 it puts the rules exactly on the content
 * edge, and at 768 well inside the copy. Interpolate the two authored
 * widths so the rules stay clear of the text at every breakpoint.
 * ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
	/* 40px gutter → 20px inset. */
	.main-content::before,
	.svc-quote__rules,
	.s-capability::after {
		width: calc(100% - 40px);
	}
}

@media (min-width: 992px) and (max-width: 1439px) {
	/* 80px gutter → 60px inset. */
	.main-content::before,
	.svc-quote__rules,
	.s-capability::after {
		width: calc(100% - 120px);
	}
}