/**
 * Service pages (/services/<practice>/<service>/, templates/service-detail.html), rebuilt
 * section by section from the Figma service page (user, 2026-10-08).
 * Loads where a block with an "os-service-detail" class renders (os_interactive_styles).
 *
 * Section rhythm = the Industries pages (user, 2026-10-09): 48px above and below every section
 * (24 on phones), OS Eyebrow and the theme H2 with no overrides, Home's section-head-gap token
 * between eyebrow, H2 and lead (16, 10 on phones), 32px from the head to the content (24 on
 * phones), cards with 16px corners. The hero keeps its own Figma spacing.
 */

/* ---------- Hero, older markup (Figma 796:13323) ---------- */
/* The patterns build this banner as the OS Full Background Banner (light text) since
   2026-10-17 (os-industry-list.css). These rules keep banners saved with the older markup
   (os-service-detail-hero: pages on UAT) looking the same, with that banner's spacing (user,
   2026-10-17: "spacing of Industries is correct"): 38px above and below (24 on phones), the text
   24px under the breadcrumbs, centred in at least 340px from 1101px, in the banner's text column
   (the wide width minus 583px), white on the featured image or Image block, which covers the
   whole section (the LCP image). A blue glow top right and a teal glow bottom left. Without an
   image the navy background shows. */
.os-service-detail-hero {
	position: relative;
	isolation: isolate;
	padding-top: 38px;
	padding-bottom: 38px;
	overflow: clip;
	background: var(--wp--preset--color--navy-deep);
	color: var(--wp--preset--color--white);
}
.os-service-detail-hero > * { margin-block: 0; }

.os-service-detail-hero::before,
.os-service-detail-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}
.os-service-detail-hero::before {
	top: -220px;
	left: calc(100% - 460px);
	width: 620px;
	height: 620px;
	background: radial-gradient(closest-side, rgb(23 72 232 / 0.16), rgb(23 72 232 / 0) 99%);
	filter: blur(10px);
}
.os-service-detail-hero::after {
	top: 364px;
	left: -100px;
	width: 520px;
	height: 520px;
	background: radial-gradient(closest-side, rgb(20 199 180 / 0.16), rgb(20 199 180 / 0) 99%);
}

.os-service-detail-hero .wp-block-breadcrumbs { color: var(--wp--preset--color--white); }

.os-service-detail-hero > .os-service-detail-hero__copy { margin-top: 24px; }
@media (min-width: 1101px) {
	.os-service-detail-hero > .os-service-detail-hero__copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 340px;
	}
}
.os-service-detail-hero__copy > * { margin: 0; }
.os-service-detail-hero__copy > .os-service-detail-hero__title { max-width: min(620px, 100% - 583px); line-height: 1.25; color: var(--wp--preset--color--white); }
.os-service-detail-hero__copy > .os-service-detail-hero__lead { max-width: min(520px, 100% - 583px); margin-top: 22px; }
.os-service-detail-hero__copy > .os-service-detail-hero__actions { max-width: min(620px, 100% - 583px); }
@media (max-width: 1100px) {
	.os-service-detail-hero__copy > :is(.os-service-detail-hero__title, .os-service-detail-hero__lead, .os-service-detail-hero__actions) { max-width: 620px; }
}
.os-service-detail-hero__lead p { margin: 0; }
/* The excerpt's paragraph, or a plain paragraph lead (the Partners L1 hero's own subtitle). */
:is(.os-service-detail-hero__lead p, .os-service-detail-hero__copy > p.os-service-detail-hero__lead) {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.6;
}
.os-service-detail-hero__copy > .os-service-detail-hero__actions { margin-top: 32px; }
/* No "read more" link in the banner (the button is the call to action): hides the Post Excerpt
   block's empty 'Add "read more" link text' field in the editor too (user, 2026-10-10). */
.os-service-detail-hero__lead :is(.wp-block-post-excerpt__more-text, .wp-block-post-excerpt__more-link) { display: none; }

/* Featured image: the whole banner, cropped to cover (Figma shows the image's middle band). */
.os-service-detail-hero > .os-service-detail-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
}
.os-service-detail-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
}
/* No overlay on the image at any width (user, 2026-10-17: "I don't want this overlay" — the
   client's banner images come with their own fade built in). */

@media (max-width: 880px) {
	.os-service-detail-hero__copy > .os-service-detail-hero__title { font-size: var(--wp--preset--font-size--title); }
}
@media (max-width: 768px) {
	.os-service-detail-hero { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-service-detail-hero__copy > .os-service-detail-hero__lead { margin-top: 16px; }
	:is(.os-service-detail-hero__lead p, .os-service-detail-hero__copy > p.os-service-detail-hero__lead) { font-size: var(--wp--preset--font-size--medium); }
	.os-service-detail-hero__copy > .os-service-detail-hero__actions { margin-top: 24px; }
	/* The right end of the image, where the client's images put their subject (user, 2026-10-17). */
	.os-service-detail-hero__media img { object-position: right center; }
}
@media (max-width: 540px) {
	.os-service-detail-hero__copy > .os-service-detail-hero__title { font-size: var(--wp--preset--font-size--xx-large); }
	/* Longer button text (the L3 hero's) wraps inside the column instead of running off the edge. */
	.os-service-detail-hero__actions .wp-block-button__link { max-width: 100%; white-space: normal; text-align: left; }
}

/* ---------- On this page (os/service-detail-nav, Figma 796:13349) ---------- */
/* Under the hero: a light-blue bar (on-brand) with a card-blue edge and the Figma shadow, 16px
   above and below, 44px links 16px apart, centred. Links are plain (Inter 600 14px uppercase
   ink, 18px sides, radius 9); the section being read gets the card-blue fill (os-service-detail.js
   sets aria-current; the first link until a section is reached, as in Figma). It sticks under the
   header, so anchor jumps leave room for both. The row scrolls sideways when it doesn't fit. */
html:has(.os-service-detail-nav) {
	--os-service-nav-h: 77px; /* 16 + 44 + 16 + 1px edge */
	scroll-padding-top: calc(var(--os-header-offset) + var(--os-service-nav-h) + 16px);
}
.os-service-detail-nav {
	position: sticky;
	top: var(--os-header-offset);
	z-index: 40;
	margin: 0 !important;
	border-bottom: 1px solid var(--wp--custom--color--card-blue);
	background: var(--wp--custom--color--on-brand);
	box-shadow: 0 4px 2px rgb(0 0 0 / 0.25);
}
.os-service-detail-nav > .os-service-detail-nav__list {
	display: flex;
	gap: 16px;
	min-width: 0;
	max-width: none;
	margin: 0 calc(var(--wp--style--root--padding-right) * -1) 0 calc(var(--wp--style--root--padding-left) * -1);
	padding: 16px var(--wp--style--root--padding-right) 16px var(--wp--style--root--padding-left);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.os-service-detail-nav__list::-webkit-scrollbar { display: none; }
.os-service-detail-nav__list > li { flex-shrink: 0; margin: 0; }
/* Centred while the row fits; when it doesn't, it starts at the gutter and scrolls (auto margins,
   not justify-content: center, which would push the first links off-screen). */
.os-service-detail-nav__list > li:first-child { margin-left: auto; }
.os-service-detail-nav__list > li:last-child { margin-right: auto; }
.os-service-detail-nav__list a {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 44px;
	padding: 0 18px;
	border-radius: var(--wp--preset--border-radius--sm);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}
.os-service-detail-nav__list a:hover { color: var(--wp--preset--color--brand); }
.os-service-detail-nav__list a[aria-current] { background: var(--wp--custom--color--card-blue); color: var(--wp--preset--color--ink); }
.os-service-detail-nav__list a:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: -2px; }

@media (max-width: 768px) {
	.os-service-detail-nav > .os-service-detail-nav__list { gap: 8px; padding-block: 12px; }
	html:has(.os-service-detail-nav) { --os-service-nav-h: 69px; }
}

/* ---------- The service's own content (core/post-content after the bar) ---------- */
/* Its sections are full-width Groups, one after another, like the page's own sections. */
.os-service-detail-content > * { margin-block: 0; }

/* ---------- Overview (os/service-detail-overview, Figma 796:13357) ---------- */
/* H2 (443px) on the left, the introduction (652px, Manrope 18px medium, a blank line between
   paragraphs) on the right, pushed apart; white, 48px above and below (24 on phones, as Industries).
   The H2 is the Figma "Heading/H1" style, as on the industry intro: the theme H2 (40px, 28 on phones),
   no overrides. Stacks at 880px. */
.os-service-detail-overview {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-service-detail-overview > * { margin-block: 0; }
.os-service-detail-overview__body {
	display: grid;
	grid-template-columns: minmax(0, 443px) minmax(0, 652px);
	justify-content: space-between;
	align-items: start;
	gap: 40px;
}
.os-service-detail-overview__body > *,
.os-service-detail-overview__text > * { margin: 0; }
.os-service-detail-overview__body > .os-service-detail-overview__title {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.os-service-detail-overview__text > * {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}
.os-service-detail-overview__text > * + * { margin-top: 1.5em; } /* Figma: one empty line. */

@media (max-width: 880px) {
	.os-service-detail-overview__body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 768px) {
	.os-service-detail-overview { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-service-detail-overview__text > * { font-size: var(--wp--preset--font-size--medium); }
}

/* ---------- What the service includes (os/service-detail-services, Figma 798:13945) ---------- */
/* The industry focus areas' look (os-industry-list.css, Figma 678:11866), with the same glow
   files: ink-deep section with the blue glow from 325px down, 48px above and below (24 on
   phones), a left-aligned white head at the wide width (OS Eyebrow, 16px, the 40px H2 up to
   897px, 8px, an 18px medium lead), 32px, then the cards 2 across, 32px apart (1 column on
   phones). Card: Ice surface, 1px brand-accent edge, 16px corners, 24 x 32 padding, at least
   246px tall, a faint teal glow top right; the title (Manrope 700 18px brand) and text
   (Manrope 500 14px ink-soft) at the top, Know more (OS Explore Link, brand) at the bottom. */
.os-service-detail-services {
	padding-top: 48px;
	padding-bottom: 48px;
	overflow: clip;
	background:
		url("../images/industries/focus/section-glow.svg") center top 325px / 1517px 1517px no-repeat,
		var(--wp--preset--color--ink-deep);
}
.os-service-detail-services > * { margin-block: 0; }
.os-service-detail-services__head > * { margin: 0; color: var(--wp--preset--color--white); }
.os-service-detail-services__head > .os-service-detail-services__title {
	max-width: 897px;
	margin-top: var(--wp--custom--section-head-gap);
	font-weight: 600;
}
.os-service-detail-services__head > .os-service-detail-services__lead {
	margin-top: var(--wp--custom--section-head-gap);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.5;
}
.os-service-detail-services > .os-service-detail-services__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	margin-top: 32px;
}
.os-service-detail-services__grid > * { margin: 0; }
/* --3up (Reliability OS practices, the client: "3 cards"): six cards 3 across (2 at 769–899px, 1 on
   phones as above), 24px apart, the card at its content's height (no 246px floor) with Know more spaced
   as on the Home Six Pillars cards (os/pillars: ~38px below the copy, 32px above the card's foot); the
   row's cards still match and keep Know more at the bottom. */
.os-service-detail-services--3up > .os-service-detail-services__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.os-service-detail-services--3up .os-service-card {
	gap: 40px;
	min-height: 0;
	padding: 32px;
}
@media (min-width: 769px) and (max-width: 899px) {
	.os-service-detail-services--3up > .os-service-detail-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.os-service-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 246px;
	overflow: hidden;
	padding: 24px 32px;
	border: 1px solid var(--wp--custom--color--brand-accent);
	border-radius: var(--wp--preset--border-radius--lg);
	background:
		url("../images/industries/focus/card-glow.svg") right -168px top -232px / 439px 439px no-repeat,
		var(--wp--preset--color--ice);
}
.os-service-card > *,
.os-service-card__copy > * { margin: 0; }
.os-service-card__copy > .os-service-card__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--wp--preset--color--brand);
}
.os-service-card__copy > .os-service-card__text {
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
}
.os-service-card__actions .wp-block-button__link {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--brand);
}

@media (max-width: 768px) {
	.os-service-detail-services { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-service-detail-services__head > .os-service-detail-services__lead { font-size: var(--wp--preset--font-size--medium); }
	.os-service-detail-services > .os-service-detail-services__grid,
	.os-service-detail-services--3up > .os-service-detail-services__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
	.os-service-card { min-height: 0; padding: 24px; }
}

/* ---------- Results (os/service-detail-results, Figma 798:14053) ---------- */
/* Brand blue fading to navy-deep (Figma: #00509E to #001F54 at 153.76%), 48px above and below
   (24 on phones). Head at the wide width, up to 1013px: OS Eyebrow in on-brand, 16px, the 40px
   H2, 8px, an 18px medium lead, all light. 48px, then the results: one glass strip (white 4%,
   1px white-14% edge, 16px corners) split into equal cells by 1px lines, 6 across (3 below
   1101px, 2 below 641px), so any number of cells wraps cleanly. Cell: 16 x 32 padding, at least
   146px; the number Inter 700 48px teal (os-count counts it up), an optional "Up to" before it
   (Manrope 700 16px teal, its own paragraph so the count-up keeps it), 8px, the label Manrope
   500 14px white 90%. */
.os-service-detail-results {
	padding-top: 48px;
	padding-bottom: 48px;
	background: linear-gradient(to bottom, var(--wp--preset--color--brand) 0%, var(--wp--preset--color--navy-deep) 153.76%);
	color: var(--wp--preset--color--white);
}
.os-service-detail-results > * { margin-block: 0; }
.os-service-detail-results__head > * { max-width: 1013px; margin: 0; color: var(--wp--preset--color--white); }
.os-service-detail-results__head > .is-style-os-eyebrow { color: var(--wp--custom--color--on-brand); }
/* A centred head (block alignment, e.g. the L3 page, user 2026-10-10) also centres its text box. */
.os-service-detail-results__head > .has-text-align-center { margin-inline: auto; }
.os-service-detail-results__head > .os-service-detail-results__title {
	margin-top: var(--wp--custom--section-head-gap);
	font-weight: 600;
}
.os-service-detail-results__head > .os-service-detail-results__lead {
	margin-top: var(--wp--custom--section-head-gap);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.5;
}
/* One column per result, up to 6 across (user, 2026-10-14: a page with 4 results filled only 4 of 6
   columns); 7 or more wrap 6 across. Below 1101px 3 across, 2 across for 2 or 4 results.
   The roomier strips (--3up, case study) do the same up to 4 across: 1–4 in one row, 7–8 as 4 + 4,
   otherwise 3 across; 2 below 1101px (1 for a single result). */
.os-service-detail-results > .os-service-detail-results__row {
	--os-results-cols: 6;
	--os-results-cols-md: 3;
	--os-results-cols-3up: 3;
	--os-results-cols-3up-md: 2;
	display: grid;
	grid-template-columns: repeat(var(--os-results-cols), minmax(0, 1fr));
	gap: 1px;
	margin-top: 32px;
	overflow: hidden;
	border: 1px solid rgb(255 255 255 / 0.14);
	border-radius: var(--wp--preset--border-radius--lg);
	background: rgb(255 255 255 / 0.04);
}
.os-service-detail-results__row:has(> :last-child:nth-child(1)) { --os-results-cols: 1; --os-results-cols-md: 1; --os-results-cols-3up: 1; --os-results-cols-3up-md: 1; }
.os-service-detail-results__row:has(> :last-child:nth-child(2)) { --os-results-cols: 2; --os-results-cols-md: 2; --os-results-cols-3up: 2; }
.os-service-detail-results__row:has(> :last-child:nth-child(3)) { --os-results-cols: 3; }
.os-service-detail-results__row:has(> :last-child:nth-child(4)) { --os-results-cols: 4; --os-results-cols-md: 2; --os-results-cols-3up: 4; }
.os-service-detail-results__row:has(> :last-child:nth-child(5)) { --os-results-cols: 5; }
.os-service-detail-results__row:has(> :last-child:nth-child(7)),
.os-service-detail-results__row:has(> :last-child:nth-child(8)) { --os-results-cols-3up: 4; }
.os-service-detail-results__row > * { margin: 0; }
.os-service-result {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 146px;
	padding: 16px 32px;
	/* The dividers, in the 1px gaps; the outer ones fall outside the strip and are clipped. */
	box-shadow: 1px 0 0 rgb(255 255 255 / 0.14), 0 1px 0 rgb(255 255 255 / 0.14);
}
.os-service-result > *,
.os-service-result__figure > * { margin: 0; }
/* A range start ("30 to" of "30 to 50%", os-service-result__prefix--figure) is set at the figure's
   size (user, 2026-10-10, Partners L1); only the figure counts up. From 1101 to 1340px, where the
   cells are narrowest, it sits above the figure like the small prefixes. */
/* "Up to 80%" stays on one line as in Figma (it runs a few px into the cell's right padding at
   1440); below 1341px the cells are too narrow, so the "Up to" may sit above the number. */
.os-service-result__figure {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 0 6px;
	color: var(--wp--preset--color--teal);
}
.os-service-result__figure > .os-service-result__prefix {
	flex-shrink: 0;
	white-space: nowrap;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.4;
}
.os-service-result__figure > .os-service-result__value,
.os-service-result__figure > .os-service-result__prefix--figure {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}
/* A word space at the figure's size between "30 to" and "50%" (the figure's 6px gap is set for the
   small "Up to"). */
.os-service-result__figure > .os-service-result__prefix--figure { margin-right: 0.15em; }
.os-service-result > .os-service-result__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.9);
}

@media (max-width: 1340px) {
	.os-service-result__figure { flex-wrap: wrap; }
}
@media (max-width: 1100px) {
	.os-service-detail-results > .os-service-detail-results__row { grid-template-columns: repeat(var(--os-results-cols-md), minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.os-service-detail-results { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-service-detail-results__head > .os-service-detail-results__lead { font-size: var(--wp--preset--font-size--medium); }
	.os-service-detail-results > .os-service-detail-results__row { margin-top: 24px; }
	.os-service-result { min-height: 0; padding: 16px 20px; }
	.os-service-result__figure > .os-service-result__value,
	.os-service-result__figure > .os-service-result__prefix--figure { font-size: 36px; }
}
@media (max-width: 640px) {
	.os-service-detail-results > .os-service-detail-results__row { grid-template-columns: repeat(min(var(--os-results-cols-md), 2), minmax(0, 1fr)); }
}

/* Up to 4 across (2 below 1101px, 1 below 541px; counts above) for longer figures that don't fit 6
   across ("Punctual", "Efficient"; L3 Customer Benefits, os/service-l3-results; Partners L1,
   Platforms L1, CSR): the figure keeps 48px, the result 16px. */
.os-service-detail-results--3up > .os-service-detail-results__row.os-service-detail-results__row { grid-template-columns: repeat(var(--os-results-cols-3up), minmax(0, 1fr)); }
.os-service-detail-results--3up .os-service-result { padding: 24px 32px; }
/* 4 across from 1101 to ~1340px leaves a one-word figure ("100,000+", 4.75em) too little room at
   48px: the cell is a container and the figure shrinks to fit it (21% of the cell), never above its
   size. Case study strips (os-case-detail.css) are the same. */
.os-service-detail-results--3up .os-service-result,
.os-case-detail-results .os-service-result { container-type: inline-size; }
.os-service-detail-results--3up .os-service-result__figure > .os-service-result__value,
.os-service-detail-results--3up .os-service-result__figure > .os-service-result__prefix--figure,
.os-case-detail-results .os-service-result__figure > .os-service-result__value,
.os-case-detail-results .os-service-result__figure > .os-service-result__prefix--figure { font-size: min(var(--wp--preset--font-size--display), 21cqi); }
.os-service-detail-results--3up .os-service-result > .os-service-result__label { font-size: var(--wp--preset--font-size--medium); }
@media (max-width: 1100px) {
	.os-service-detail-results--3up > .os-service-detail-results__row.os-service-detail-results__row { grid-template-columns: repeat(var(--os-results-cols-3up-md), minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.os-service-detail-results--3up .os-service-result { padding: 16px 20px; }
	.os-service-detail-results--3up .os-service-result__figure > .os-service-result__value,
	.os-service-detail-results--3up .os-service-result__figure > .os-service-result__prefix--figure,
	.os-case-detail-results .os-service-result__figure > .os-service-result__value,
	.os-case-detail-results .os-service-result__figure > .os-service-result__prefix--figure { font-size: min(36px, 21cqi); }
	.os-service-detail-results--3up .os-service-result > .os-service-result__label { font-size: 15px; }
}
@media (max-width: 540px) {
	.os-service-detail-results--3up > .os-service-detail-results__row.os-service-detail-results__row { grid-template-columns: minmax(0, 1fr); }
}

/* L3 Customer Benefits (os/service-l3-results, user 2026-10-17): the Home Trust Stats band and
   metric row (OS Blue Band + OS Metric Row, os-theme.css) with the L3 section spacing and the
   results head above. All six cells in Home's single row above 1100px (user, 2026-10-17: "can this be
   in 1 line?") at Home's figure size (user: "the font size is not same as home"). A word figure
   ("Punctual", 196px at 48px) is wider than a sixth of the row below ~1440, so its cell grows to fit it
   (a flex item never shrinks below its unwrapped figure) and the number cells share what's left: the
   six need 973px, the row is 1003px at 1101. No container query here, it would hide that width.
   Home's own rows below: 3 across ≤1100, then 2 ≤768, 1 ≤540. The labels are phrases, not Home's two
   words, so Home's bottom-aligned cells would put the numbers at different heights: they line up at
   the top instead, padded so each figure starts exactly where Home's does (84px below the cell top,
   58px ≤768; user 2026-10-17: "the text starts a bit below" on Home), and cells grow with their text. */
.os-service-l3-trust { padding-top: 48px; padding-bottom: 48px; }
.os-service-l3-trust > * { margin-block: 0; }
.os-service-l3-trust .is-style-os-metrics { margin-top: 32px !important; }
.os-service-l3-trust .os-metric { justify-content: flex-start; height: auto; min-height: 180px; padding-top: 80.5px; }
@media (max-width: 768px) {
	.os-service-l3-trust { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-service-l3-trust .is-style-os-metrics { margin-top: 24px !important; }
	.os-service-l3-trust .os-metric,
	.os-service-l3-trust .os-metric:last-child { flex-basis: 50%; min-height: 140px; padding-top: 54.5px; }
	.os-service-l3-trust .os-metric:nth-child(odd) { border-right: 1px solid rgb(255 255 255 / 0.18); }
	.os-service-l3-trust .os-metric:nth-child(even) { border-right: none; }
}
@media (max-width: 540px) {
	.os-service-l3-trust .os-metric,
	.os-service-l3-trust .os-metric:last-child,
	.os-service-l3-trust .os-metric:nth-child(odd) { flex-basis: 100%; border-right: none; }
}

/* ---------- Insights (os/service-detail-insights, Figma 796:13361) ---------- */
/* The Healthcare page's Success Stories + Latest Insights (it also carries os-industry-list-stories,
   so os-industry-list.css styles the tabs and the card carousels the same way: the blog cards,
   3 / 2 / 1 per view, progress bar and arrows), with this design's own frame: white with a teal
   glow on the right and a violet glow bottom left (Figma radial gradients), 48px above and below
   (24 on phones), a centred head (OS Eyebrow, 16px, the theme H2 up to 998px), 32px to the tabs,
   32px from the tabs to the cards (Industries), cards 481px tall (250px image + 231px panel). Success Stories
   opens first (Figma, updated 2026-10-08; os-tab-open on a tab Group would open another). */
.os-service-detail-insights.os-industry-list-stories {
	padding-top: 48px;
	padding-bottom: 48px;
	background:
		radial-gradient(ellipse 748px 989px at calc(100% - 115px) 630px, rgb(20 199 180 / 0.15), rgb(20 199 180 / 0) 100%),
		radial-gradient(ellipse 585px 774px at 115px 843px, rgb(108 92 231 / 0.15), rgb(108 92 231 / 0) 100%),
		var(--wp--preset--color--white);
}
.os-service-detail-insights__head > * { margin: 0; }
.os-service-detail-insights__head > .os-service-detail-insights__title {
	max-width: 998px;
	margin: var(--wp--custom--section-head-gap) auto 0;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.os-service-detail-insights.os-industry-list-stories > .os-stories-tabs { margin-top: 32px; }
.os-service-detail-insights .os-case-grid .os-blog-card { --os-card-panel: 231px; }
/* Three title lines, as in Figma (the blog card's 2-line max-height would cut the third). */
.os-service-detail-insights .os-case-grid .os-blog-card__body > .os-blog-card__title { max-height: 4.05em; }
/* L3 Thought Leadership and Success Stories (os/service-l3-insights, -stories): the same cards and
   panel height, three title lines so the brief's titles show in full. */
.os-service-detail-l3-cards .os-case-grid .os-blog-card { --os-card-panel: 231px; }
.os-service-detail-l3-cards .os-case-grid .os-blog-card__body > .os-blog-card__title { max-height: 4.05em; }
@media (max-width: 540px) {
	/* Four lines on phones, where the longest titles wrap once more. */
	.os-service-detail-l3-cards .os-case-grid .os-blog-card { --os-card-panel: 258px; }
	.os-service-detail-l3-cards .os-case-grid .os-blog-card__body > .os-blog-card__title { max-height: 5.4em; -webkit-line-clamp: 4; line-clamp: 4; }
}

@media (max-width: 768px) {
	.os-service-detail-insights.os-industry-list-stories { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-service-detail-insights.os-industry-list-stories > .os-stories-tabs { margin-top: 24px; }
	.os-service-detail-insights .os-case-grid .os-blog-card { --os-card-panel: 200px; }
}

/* ---------- Proof stats (os/service-detail-proof, Figma 796:13423) ---------- */
/* The Home Trust Stats look, as this design draws it: navy-deep with the brand gradient over the
   top 476px (#00509E at 23.98% to #001F54 at 103.62%, the OS Blue Band's, without its orbit lines
   and glow), 48px above and below (24 on phones, as Industries), a centred white head (OS Eyebrow,
   the section-head-gap, the theme H2, the gap, 18px lead), 32px (24 on phones), then one panel: 16px corners, a 4px green stripe on top, white
   8% with a white 10% edge on the other sides, Figma's shadow; equal figures split by white 15%
   lines (box-shadows in 1px grid gaps, so 2 or 1 per row wrap cleanly), 4 across (2 below 1101px,
   1 below 641px). Figure: at least 220px, 36 / 40 / 40 padding, number Inter 700 48px white
   (os-count), 8px, text Manrope 500 14px white 90%. On hover or focus a figure takes Figma's
   highlighted state: sky 8% fill and a 2px sky line at the bottom. */
.os-service-detail-proof {
	padding-top: 48px;
	padding-bottom: 48px;
	background:
		linear-gradient(to bottom, var(--wp--preset--color--brand) 23.982%, var(--wp--preset--color--navy-deep) 103.62%) 0 0 / 100% 476px no-repeat,
		var(--wp--preset--color--navy-deep);
	color: var(--wp--preset--color--white);
}
.os-service-detail-proof > * { margin-block: 0; }
/* No width cap: Figma keeps the H2 and lead on one line each at 1440. */
.os-service-detail-proof__head > * { margin: 0; color: var(--wp--preset--color--white); }
.os-service-detail-proof__head > .os-service-detail-proof__title {
	margin-top: var(--wp--custom--section-head-gap);
	font-weight: 600;
}
.os-service-detail-proof__head > .os-service-detail-proof__lead {
	margin-top: var(--wp--custom--section-head-gap);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.5;
}
.os-service-detail-proof > .os-service-detail-proof__panel {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin-top: 32px;
	overflow: hidden;
	border: 1px solid rgb(255 255 255 / 0.1);
	border-top: 4px solid var(--wp--preset--color--green);
	border-radius: var(--wp--preset--border-radius--lg);
	background: rgb(255 255 255 / 0.08);
	filter: drop-shadow(0 8px 16px rgb(0 0 0 / 0.2));
}
.os-service-detail-proof__panel > * { margin: 0; }
.os-service-stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 220px;
	padding: 36px 40px 40px;
	border-bottom: 2px solid transparent;
	box-shadow: 1px 0 0 rgb(255 255 255 / 0.15), 0 1px 0 rgb(255 255 255 / 0.15);
	transition: background-color var(--os-fast) var(--os-ease), border-color var(--os-fast) var(--os-ease);
}
.os-service-stat:hover,
.os-service-stat:focus-within {
	border-bottom-color: #38bdf8;
	background: rgb(56 189 248 / 0.08);
}
.os-service-stat > * { margin: 0; }
.os-service-stat > .os-service-stat__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}
.os-service-stat > .os-service-stat__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.9);
}

@media (max-width: 1100px) {
	.os-service-detail-proof > .os-service-detail-proof__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.os-service-stat { min-height: 0; padding: 32px; }
}
@media (max-width: 768px) {
	.os-service-detail-proof { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-service-detail-proof__head > .os-service-detail-proof__lead { font-size: var(--wp--preset--font-size--medium); }
	.os-service-detail-proof > .os-service-detail-proof__panel { margin-top: 24px; }
	.os-service-stat { padding: 24px; }
	.os-service-stat > .os-service-stat__value { font-size: 36px; }
}
@media (max-width: 640px) {
	.os-service-detail-proof > .os-service-detail-proof__panel { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Automate (os/service-detail-automate, Figma 796:13456) ---------- */
/* White with a faint teal glow bottom left (Figma radial), 48px above and below (24 on phones, as
   Industries), a centred head (OS Eyebrow, the section-head-gap, the theme H2 up to 1010px, the gap,
   an 18px medium lead), 32px (24 on phones),
   then white cards 3 across (2 below 1101px, 1 below 641px), 32px apart: 1px line edge, 16px
   corners, 48 x 32 padding, at least 303px, Figma's soft shadow, the faint teal card glow top
   right (industries/focus/card-glow.svg, as on the offering cards); title Manrope 700 18px ink,
   16px, text Manrope 500 14px tertiary. */
.os-service-detail-automate {
	padding-top: 48px;
	padding-bottom: 48px;
	background:
		radial-gradient(ellipse 453px 398px at 109px calc(100% + 71px), rgb(20 199 180 / 0.06), rgb(20 199 180 / 0) 100%),
		var(--wp--preset--color--white);
}
.os-service-detail-automate > * { margin-block: 0; }
.os-service-detail-automate__head > * { margin: 0 auto; color: var(--wp--preset--color--ink); }
.os-service-detail-automate__head > .is-style-os-eyebrow { color: var(--wp--preset--color--brand); }
.os-service-detail-automate__head > .os-service-detail-automate__title {
	max-width: 1010px;
	margin-top: var(--wp--custom--section-head-gap);
	font-weight: 600;
}
.os-service-detail-automate__head > .os-service-detail-automate__lead {
	margin-top: var(--wp--custom--section-head-gap);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.5;
}
.os-service-detail-automate > .os-service-detail-automate__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin-top: 32px;
}
.os-service-detail-automate__grid > * { margin: 0; }
/* Editor: its block gap adds a 16px top margin to every card after the first, so the first card
   sat higher than the rest of its row. */
.is-root-container .os-service-detail-automate__grid > * { margin-block: 0; }
.os-automate-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 303px;
	overflow: hidden;
	padding: 48px 32px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--lg);
	background:
		url("../images/industries/focus/card-glow.svg") right -249px top -238px / 439px 439px no-repeat,
		var(--wp--preset--color--white);
	box-shadow: 2px 2px 20px rgb(0 0 0 / 0.05);
}
.os-automate-card > * { margin: 0; }
.os-automate-card > .os-automate-card__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
}
.os-automate-card > .os-automate-card__text {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--custom--color--tertiary);
}

@media (max-width: 1100px) {
	.os-service-detail-automate > .os-service-detail-automate__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.os-automate-card { min-height: 0; padding: 32px; }
}
@media (max-width: 768px) {
	.os-service-detail-automate { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-service-detail-automate__head > .os-service-detail-automate__lead { font-size: var(--wp--preset--font-size--medium); }
	.os-service-detail-automate > .os-service-detail-automate__grid { gap: 16px; margin-top: 24px; }
	.os-automate-card { padding: 24px; }
}
@media (max-width: 640px) {
	.os-service-detail-automate > .os-service-detail-automate__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Platforms (os/service-detail-platforms, Figma 796:13478) ---------- */
/* Surface (#FAFBFF) with a teal glow top left and a blue glow bottom right (Figma radials, as the
   Home Platforms aurora), 48px above and below (24 on phones), a centred head (OS Eyebrow, 16px,
   the 40px H2 and an 18px lead up to 998px, 8px apart), 48px, then the Home platform card: the
   TechnIQk / AgentIQk gradient as a 1.5px frame (17.5px corners) around a white card (16px, as the industry cards),
   408 x 351 at 1440, 3 across (2 below 1101px, 1 below 641px), 24px apart, 32px between rows;
   name Inter 600 32px / 1.4 / -0.5px ink, 16px, text Manrope 500 18px / 1.5 ink, Know more at
   the bottom. Hover as on Home: the frame lifts 4px (os-hover-lift), the card a further 8px.
   32px, then Request Demo + Explore More, centred. */
.os-service-detail-platforms {
	padding-top: 48px;
	padding-bottom: 48px;
	background:
		radial-gradient(ellipse 1514px 2057px at 115px 253px, rgb(20 199 180 / 0.12), rgb(20 199 180 / 0) 70%),
		radial-gradient(ellipse 1551px 2108px at calc(100% - 72px) calc(100% - 253px), rgb(23 72 232 / 0.14), rgb(23 72 232 / 0) 70%),
		#fafbff;
}
.os-service-detail-platforms > * { margin-block: 0; }
.os-service-detail-platforms__head > * { max-width: 998px; margin: 0 auto; color: var(--wp--preset--color--ink); }
.os-service-detail-platforms__head > .is-style-os-eyebrow { color: var(--wp--preset--color--brand); }
.os-service-detail-platforms__head > .os-service-detail-platforms__title {
	max-width: 1044px;
	margin-top: var(--wp--custom--section-head-gap);
	font-weight: 600;
}
.os-service-detail-platforms__head > .os-service-detail-platforms__lead {
	margin-top: var(--wp--custom--section-head-gap);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.5;
}
.os-service-detail-platforms > .os-service-detail-platforms__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 24px;
	margin-top: 32px;
}
.os-service-detail-platforms__grid > * { margin: 0; }
.os-service-platform {
	padding: 1.5px;
	border-radius: calc(var(--wp--preset--border-radius--lg) + 1.5px);
}
.os-service-platform > .os-service-platform__card {
	display: flex;
	flex-direction: column;
	min-height: 348px;
	margin: 0;
	padding: 31px 21.5px 32px;
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--color--white);
	transition: transform var(--os-base) var(--os-ease), box-shadow var(--os-base) var(--os-ease);
}
.os-service-platform:hover > .os-service-platform__card { transform: translateY(-8px); box-shadow: 0 32px 64px rgb(23 72 232 / 0.14); }
@media (prefers-reduced-motion: reduce) {
	.os-service-platform:hover > .os-service-platform__card { transform: none; }
}
.os-service-platform__card > * { margin: 0; }
.os-service-platform__card > .os-service-platform__name {
	font-size: var(--wp--preset--font-size--title);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.5px;
	color: var(--wp--preset--color--ink);
}
.os-service-platform__card > .os-service-platform__text {
	margin-top: 16px;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}
.os-service-platform__card > .os-service-platform__link { margin-top: auto; padding-top: 24px; }
.os-service-platform__link .wp-block-button__link { font-size: var(--wp--preset--font-size--small); }
.os-service-detail-platforms > .os-service-detail-platforms__actions {
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}

@media (max-width: 1100px) {
	.os-service-detail-platforms > .os-service-detail-platforms__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.os-service-platform > .os-service-platform__card { min-height: 300px; padding: 28px 24px; }
}
@media (max-width: 768px) {
	.os-service-detail-platforms { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-service-detail-platforms__head > .os-service-detail-platforms__lead { font-size: var(--wp--preset--font-size--medium); }
	.os-service-detail-platforms > .os-service-detail-platforms__grid { gap: 16px; margin-top: 24px; }
	.os-service-platform > .os-service-platform__card { min-height: 0; padding: 24px 22px; }
	.os-service-platform__card > .os-service-platform__name { font-size: var(--wp--preset--font-size--xx-large); }
	.os-service-platform__card > .os-service-platform__text { font-size: var(--wp--preset--font-size--medium); }
}
@media (max-width: 640px) {
	.os-service-detail-platforms > .os-service-detail-platforms__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- FAQs (os/service-detail-faqs, Figma 796:13536) ---------- */
/* The generic OS FAQs (os-faq.css: accordion, FAQPage schema) in this design's style, scoped to
   the service section so other pages keep theirs: 48px above and below (24 on phones), a
   centred head (OS Eyebrow, 16px, the theme H2 up to 897px), 32px, the questions across
   the wide width with no line above the first; rows split by a 1px border line, 24px above and
   below the question (Manrope 700 18px / 1.4); the answer 16px under it (Manrope 500 14px / 1.5,
   up to 1099px; the open question's bottom padding drops to 16px — a negative margin on the
   answer would be clipped by the animated ::details-content box). The icon is a bare brand plus (Figma's light 36px glyph, drawn) that turns into
   a minus; the open question keeps its colour. */
.os-service-detail-faqs.os-faqs { padding-top: 48px; padding-bottom: 48px; }
.os-service-detail-faqs .os-faq { gap: 32px; }
.os-service-detail-faqs .os-faq > .os-faq__list { max-width: none; border-top: none; }
.os-service-detail-faqs .os-faq__head > h2 {
	max-width: 897px;
	font-size: var(--wp--preset--font-size--section);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.os-service-detail-faqs .os-faq__list > details { border-bottom: none; border-top: 1px solid var(--wp--preset--color--border); }
.os-service-detail-faqs .os-faq__list > details:first-child { border-top: none; }
.os-service-detail-faqs .os-faq__list > details:last-child { border-bottom: 1px solid var(--wp--preset--color--border); }
.os-service-detail-faqs .os-faq__list > details > summary {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	color: var(--wp--preset--color--ink-soft);
}
.os-service-detail-faqs .os-faq__list > details[open] > summary { padding-bottom: 16px; color: var(--wp--preset--color--ink-soft); }
.os-service-detail-faqs .os-faq__list > details > summary:hover { color: var(--wp--preset--color--brand); }
.os-service-detail-faqs .os-faq__list > details > summary::after {
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 0;
	background-size: 18px 1.5px, 1.5px 18px;
}
.os-service-detail-faqs .os-faq__list > details[open] > summary::after {
	background-color: transparent;
	background-size: 18px 1.5px, 1.5px 0;
	color: var(--wp--preset--color--brand);
}
.os-service-detail-faqs .os-faq__list > details > :not(summary) {
	max-width: 1099px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
}
.os-service-detail-faqs .os-faq__list > details > :not(summary) + :not(summary) { margin-top: 0; }

@media (max-width: 768px) {
	.os-service-detail-faqs.os-faqs { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-service-detail-faqs .os-faq { gap: 24px; }
	.os-service-detail-faqs .os-faq__list > details > summary::after { width: 22px; height: 22px; }
}

/* ---------- Contact (os/service-detail-contact, Figma 796:13566) ---------- */
/* The site's contact section (os-theme.css .os-contact: glows, form, QK badge; the form button
   follows the page, inc/contact/contact.php) with this design's intro, on service pages only:
   the site contact H2 as on Industries (30px, 28 on phones; user, 2026-10-09) up to 575px; the
   paragraph is Home's (16px, 15 on phones; user, 2026-10-09, was an 18px lead). The QK badge and the section's padding
   are Home's (user, 2026-10-09: "the form image should be like the homepage form"; was a 224px
   badge at the left edge with 25px under it). No buttons (user, 2026-10-09: no "Talk to our experts"). */
.os-service-detail-contact .os-contact__intro > .os-contact__title { max-width: 575px; }

/* ---------- Customer benefits (os/service-detail-benefits, Figma 796:13456) ---------- */
/* Replaced the Automate section in Figma (2026-10-08); same frame and card style: white with a
   faint teal glow bottom left, 48px above and below (24 on phones), a centred head (OS Eyebrow,
   16px, the 40px H2 up to 1010px), 32px, then short cards 3 across (2 below 1101px, 1 below
   641px), 32px apart: white, 1px line edge, 16px corners, 32px sides, 98px tall with the title
   centred vertically (Manrope 700 18px / 1.4 ink), Figma's soft shadow and the teal card glow. */
.os-service-detail-benefits {
	padding-top: 48px;
	padding-bottom: 48px;
	background:
		radial-gradient(ellipse 453px 328px at 109px calc(100% + 58px), rgb(20 199 180 / 0.06), rgb(20 199 180 / 0) 100%),
		var(--wp--preset--color--white);
}
.os-service-detail-benefits > * { margin-block: 0; }
.os-service-detail-benefits__head > * { margin: 0 auto; color: var(--wp--preset--color--ink); }
.os-service-detail-benefits__head > .is-style-os-eyebrow { color: var(--wp--preset--color--brand); }
.os-service-detail-benefits__head > .os-service-detail-benefits__title {
	max-width: 1010px;
	margin-top: var(--wp--custom--section-head-gap);
	font-weight: 600;
}
.os-service-detail-benefits > .os-service-detail-benefits__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin-top: 32px;
}
.os-service-detail-benefits__grid > * { margin: 0; }
.os-benefit-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 98px;
	overflow: hidden;
	padding: 16px 32px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--lg);
	background:
		url("../images/industries/focus/card-glow.svg") right -249px top -238px / 439px 439px no-repeat,
		var(--wp--preset--color--white);
	box-shadow: 2px 2px 20px rgb(0 0 0 / 0.05);
}
.os-benefit-card > .os-benefit-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 1100px) {
	.os-service-detail-benefits > .os-service-detail-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 768px) {
	.os-service-detail-benefits { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-service-detail-benefits > .os-service-detail-benefits__grid { gap: 16px; margin-top: 24px; }
	.os-benefit-card { min-height: 80px; padding: 16px 24px; }
}
@media (max-width: 640px) {
	.os-service-detail-benefits > .os-service-detail-benefits__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- L3 features (os/service-l3-features, user 2026-10-10) ---------- */
/* The H2, then the features as rows in two columns, 64px apart (a 48px icon tile in Home's
   Services tab colours, white icon on the navy gradient; the benefit card's 18px title;
   hairlines between rows only, none above the first or under the last); one column below 641px.
   Section rhythm as the other sections (48 / 24 on phones). */
.os-service-detail-l3-features {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-service-detail-l3-features > *,
.os-service-detail-l3-features__body > *,
.os-service-detail-l3-features__main > * { margin-block: 0; }
.os-service-detail-l3-features__main > .os-service-detail-l3-features__title { font-weight: 600; color: var(--wp--preset--color--ink); }
.os-service-detail-l3-features__main > .os-service-detail-l3-features__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 64px;
	margin-top: 32px;
}
.os-service-detail-l3-features__list > * { margin: 0; }
.os-feature-row {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
/* Lines only between rows: none under the last row of either column (user, 2026-10-10). */
.os-feature-row:nth-last-child(-n + 2) { border-bottom: 0; }
.os-feature-row > * { margin: 0; }
.os-feature-row > .os-feature-row__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--wp--preset--border-radius--md);
	background: linear-gradient(141.3deg, #00509e 14.286%, #001f54 92.418%); /* Home's Services tab icon tile (.os-tab-label__icon). */
}
.os-feature-row > .os-feature-row__icon img { display: block; width: 24px; height: 24px; }
.os-feature-row > .os-feature-row__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 1100px) {
	.os-service-detail-l3-features__main > .os-service-detail-l3-features__list { column-gap: 32px; }
}
@media (max-width: 768px) {
	.os-service-detail-l3-features { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-service-detail-l3-features__main > .os-service-detail-l3-features__list { column-gap: 24px; margin-top: 24px; }
	.os-feature-row { gap: 16px; padding: 12px 0; }
}
@media (max-width: 640px) {
	.os-service-detail-l3-features__main > .os-service-detail-l3-features__list { grid-template-columns: minmax(0, 1fr); }
	.os-feature-row:nth-last-child(2) { border-bottom: 1px solid var(--wp--preset--color--line); }
}

/* ---------- L1 hero (os/service-l1-hero, Figma 748:13253) ---------- */
/* Practice pages (L1 Services Template): the Industry banner (os-industry-list.css + os-blog.css:
   the Industries spacing, hero glow, H1, 18px lead, text left and image right, stacked below
   1101px) with an OS Eyebrow above the title (section-head-gap, as every section head) and two
   buttons. The image is Figma's illustration (glass panels on a transparent background) in the
   Industries image box (same aspect ratio, 340px at most, the same stacked sizes), so the banner
   is as tall as the Industries one (user, 2026-10-09: 455px at 1280+); it is contained, not
   cropped, with no frame or shadow, still floating like the industry images. */
.os-industry-list-hero__copy > .os-service-detail-l1-hero__eyebrow + .os-industry-list-hero__title { margin-top: var(--wp--custom--section-head-gap); }
.os-industry-list-hero__body > .os-industry-list-hero__media.os-service-detail-l1-hero__art {
	border-radius: 0;
	box-shadow: none;
}
.os-industry-list-hero__media.os-service-detail-l1-hero__art img { object-fit: contain; }

/* ---------- Technology partners (os/service-detail-partners, Figma 748:13828) ---------- */
/* The Proof Stats band (navy-deep with the brand gradient over the top 476px), 48px above and
   below (24 on phones), a centred white head (OS Eyebrow, the theme H2, an 18px lead; the gaps as
   every section head), 32px (24 on phones), then one glass panel (white 8%, 16px corners, Figma's
   shadow, no stripe) split by white 15% lines into partners, 2 across (1 below 641px). Partner: at
   least 220px, 36 / 40 / 40 padding, the white logo at the top and the sentence (Manrope 500 18px
   white, links underlined) at the bottom; on hover or focus the sky 8% fill Figma shows on the
   first one. */
.os-service-detail-partners {
	padding-top: 48px;
	padding-bottom: 48px;
	background:
		linear-gradient(to bottom, var(--wp--preset--color--brand) 23.982%, var(--wp--preset--color--navy-deep) 103.62%) 0 0 / 100% 476px no-repeat,
		var(--wp--preset--color--navy-deep);
	color: var(--wp--preset--color--white);
}
.os-service-detail-partners > * { margin-block: 0; }
.os-service-detail-partners__head > * { margin: 0; color: var(--wp--preset--color--white); }
.os-service-detail-partners__head > .os-service-detail-partners__title {
	margin-top: var(--wp--custom--section-head-gap);
	font-weight: 600;
}
.os-service-detail-partners__head > .os-service-detail-partners__lead {
	margin-top: var(--wp--custom--section-head-gap);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.5;
}
.os-service-detail-partners > .os-service-detail-partners__panel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-top: 32px;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--lg);
	background: rgb(255 255 255 / 0.08);
	filter: drop-shadow(0 8px 16px rgb(0 0 0 / 0.2));
}
.os-service-detail-partners__panel > * { margin: 0; }
.os-service-partner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 220px;
	padding: 36px 40px 40px;
	box-shadow: 1px 0 0 rgb(255 255 255 / 0.15), 0 1px 0 rgb(255 255 255 / 0.15);
	transition: background-color var(--os-fast) var(--os-ease);
}
.os-service-partner:hover,
.os-service-partner:focus-within { background: rgb(56 189 248 / 0.08); }
.os-service-partner > * { margin: 0; }
.os-service-partner__logo img { display: block; max-width: 100%; height: auto; }
.os-service-partner > .os-service-partner__text {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--white);
}
.os-service-partner__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.os-service-partner__text a:hover { text-decoration-thickness: 2px; }
.os-service-partner__text a:focus-visible { outline: 2px solid var(--wp--preset--color--white); outline-offset: 2px; }

@media (max-width: 1100px) {
	.os-service-partner { min-height: 0; padding: 32px; }
}
@media (max-width: 768px) {
	.os-service-detail-partners { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-service-detail-partners__head > .os-service-detail-partners__lead { font-size: var(--wp--preset--font-size--medium); }
	.os-service-detail-partners > .os-service-detail-partners__panel { margin-top: 24px; }
	.os-service-partner { padding: 24px; }
	.os-service-partner > .os-service-partner__text { font-size: var(--wp--preset--font-size--medium); }
}
@media (max-width: 640px) {
	.os-service-detail-partners > .os-service-detail-partners__panel { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Architecture (os/service-reliability-architecture, new: no existing page has a
   four-layer diagram) ---------- */
/* White, 48px above and below (24 on phones, as Industries), a centred head (is-style-os-section-head:
   OS Eyebrow, the section-head-gap, the theme H2, an 18px medium lead), the brief's diagram as
   blocks (__stack, below), 48px, then the four layers 2 across (1 below 769px) in the Automate
   card style (os-automate-card), 32px apart. */
.os-service-detail-architecture {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-service-detail-architecture > * { margin-block: 0; }
/* The lead at the other section leads' size (18px / 1.5, 16px ≤768), not OS Lead's own 24px. */
.os-service-detail-architecture > .is-style-os-section-head > .is-style-os-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}
.os-service-detail-architecture > :is(.os-service-detail-architecture__diagram, .os-service-detail-architecture__stack) {
	margin-top: 32px;
}
/* The diagram as an image (pages saved before the blocks below): the blocks rendered at 2x
   (2400 × 1508, assets/images/services/reliability-os-architecture.webp), its height reserved
   before it loads (no layout shift). */
.os-service-detail-architecture__diagram img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2400 / 1508;
	margin-inline: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--lg);
	box-shadow: 2px 2px 20px rgb(0 0 0 / 0.05);
}
/* The diagram as blocks: a card (the image's old frame) holding the four layers top to bottom, 12px
   apart. Each layer = a brand-tinted row, the label (navy, 220px) beside its List: three white tiles,
   or the execution layer's logo tiles (__logos: as many 120px+ columns as fit, each logo contained
   in a 28px-high box, a round mark (__mark, Splunk) the tile's full content height, 64px / 52px ≤560;
   our platforms, which have no logo here, as their names in navy).
   The 27 logos fill whole rows: 9 across (3 rows), 3 across on phones (9 rows); 561–899px, where 9
   would be too small, 7 across with the last row centred.
   ≤1100: label above the List (the logos get the full width); ≤560: the tiles wrap to their own
   width. */
.os-service-detail-architecture__stack {
	display: grid;
	gap: 12px;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--color--white);
	box-shadow: 2px 2px 20px rgb(0 0 0 / 0.05);
}
.os-service-detail-architecture__stack > * { margin: 0; }
.os-service-detail-architecture__layer {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	padding: 16px 16px 16px 24px;
	border: 1px solid rgb(0 80 158 / 0.1);
	border-radius: var(--wp--preset--border-radius--md);
	background: rgb(0 80 158 / 0.04);
}
.os-service-detail-architecture__layer > * { margin: 0; }
.os-service-detail-architecture__layer > .os-service-detail-architecture__label {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--navy);
}
.os-service-detail-architecture__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	padding: 0;
	list-style: none;
}
.os-service-detail-architecture__items > li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--sm);
	background: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: var(--wp--preset--color--ink);
}
.os-service-detail-architecture__logos {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	gap: 8px;
	padding: 0;
	list-style: none;
}
.os-service-detail-architecture__logos > li {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	margin: 0;
	padding: 12px 8px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--sm);
	background: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--wp--preset--color--navy);
}
.os-service-detail-architecture__logos img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 28px;
}
.os-service-detail-architecture__logos img.os-service-detail-architecture__mark { max-height: 64px; }
.os-service-detail-architecture > .os-service-detail-architecture__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	margin-top: 48px;
}
.os-service-detail-architecture__grid > * { margin: 0; }
.os-service-detail-architecture__grid .os-automate-card { min-height: 0; }

@media (max-width: 1100px) {
	.os-service-detail-architecture__layer { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (min-width: 561px) and (max-width: 899px) {
	.os-service-detail-architecture__logos { display: flex; flex-wrap: wrap; justify-content: center; }
	.os-service-detail-architecture__logos > li { box-sizing: border-box; flex: 0 0 calc((100% - 6 * 8px) / 7); min-width: 0; height: 72px; padding: 8px; }
	.os-service-detail-architecture__logos img.os-service-detail-architecture__mark { max-height: 54px; }
}

@media (max-width: 768px) {
	.os-service-detail-architecture { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-service-detail-architecture > :is(.os-service-detail-architecture__diagram, .os-service-detail-architecture__stack) { margin-top: 24px; }
	.os-service-detail-architecture > .is-style-os-section-head > .is-style-os-lead { font-size: var(--wp--preset--font-size--medium); }
	.os-service-detail-architecture__stack { padding: 12px; }
	.os-service-detail-architecture__layer { padding: 16px; }
	.os-service-detail-architecture__items { gap: 8px; }
	.os-service-detail-architecture__items > li { min-height: 48px; padding: 8px 12px; font-size: var(--wp--preset--font-size--small); }
	.os-service-detail-architecture > .os-service-detail-architecture__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
	.os-service-detail-architecture__grid .os-automate-card { padding: 24px; }
}
@media (max-width: 560px) {
	.os-service-detail-architecture__items { display: flex; flex-wrap: wrap; }
	.os-service-detail-architecture__items > li { flex: 1 1 auto; min-height: 0; }
	.os-service-detail-architecture__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.os-service-detail-architecture__logos > li { height: 52px; padding: 8px; font-size: var(--wp--preset--font-size--small); }
	.os-service-detail-architecture__logos img { max-height: 22px; }
	.os-service-detail-architecture__logos img.os-service-detail-architecture__mark { max-height: 52px; }
}

/* ---------- Resources (os/service-reliability-resources, new: three different resource types,
   not the Success Stories/Latest Insights tabs) ---------- */
/* White, 48px above and below (24 on phones), a centred head, 32px to the latest 6 across QKVerse
   as the Latest feed's card in an OS Carousel (Query Loop .os-qkverse-recent; cards: os-qkverse.css,
   carousel: os-carousel.css). */
.os-service-detail-resources {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-service-detail-resources > * { margin-block: 0; }
.os-service-detail-resources > .wp-block-query { margin-top: 32px; }

@media (max-width: 768px) {
	.os-service-detail-resources { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-service-detail-resources > .wp-block-query { margin-top: 24px; }
}

/* ---------- Related (os/service-reliability-related, new: the brief's "Related Services
   (internal block)") ---------- */
/* Ice-tinted, 48px above and below (24 on phones), a centred head, 32px to a centred, wrapping
   row of secondary-style buttons to the four named practice pages. */
.os-service-detail-related {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--ice);
}
.os-service-detail-related > * { margin-block: 0; }
.os-service-detail-related > .os-service-detail-related__links { margin-top: 32px; }

@media (max-width: 768px) {
	.os-service-detail-related { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-service-detail-related > .os-service-detail-related__links { margin-top: 24px; }
}