/**
 * QK AI Labs page (/qk-ai-labs/, QK AI Labs Template, os/qk-ai-labs-* patterns; from the client's
 * fixed-width mockup on UAT, redesigned 2026-10-16: user asked for its own template and URL,
 * alternating backgrounds and new-age layouts — bento grids, stacking cards, a pipeline rail, an
 * editorial index). Backgrounds alternate light / dark down the page:
 *   hero (hero glow) · platforms bento (Aurora, navy OS Pillar tiles — user: light gradient) ·
 *   trust + Build/Prove/Run (white) · method (navy) · lab-to-live (aurora) · evidence (OS Blue Band, Home Trust Stats) ·
 *   team (light glows) · contact (ink). Figures use the Home stats band (OS Blue Band + OS Metric Row).
 * The two dark showcase sections use only the design system's own compositions (user, 2026-10-16:
 * "use compositions from our design colour schemes… remove the box pattern").
 * The hero is the Industries banner (os-industry-list.css) and the contact the shared enquiry form
 * (os-theme.css + os-contact-form.css); the company chips are OS Logo Chips (os-logo-chips.css).
 * Loads where a block with an "os-qk-ai-labs" class renders (os_interactive_styles). It can print
 * before the shared files, so overrides of shared components are two classes deep.
 */

/* ---------- Shared: section, head, dark sections ---------- */
.os-qk-ai-labs-sec {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}
.os-qk-ai-labs-sec > * { margin-block: 0; }
.os-qk-ai-labs-head { text-align: center; }
.os-qk-ai-labs-head > * { max-width: 920px; margin: 0 auto; }
.os-qk-ai-labs-head > * + * { margin-top: var(--wp--custom--section-head-gap); }
.os-qk-ai-labs-head > h2 { max-width: 1100px; font-weight: 600; }
.os-qk-ai-labs-head > .os-qk-ai-labs-head__lead {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
}
.os-qk-ai-labs-head > .os-qk-ai-labs-head__text {
	margin-top: 12px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}
.os-qk-ai-labs-head--left { text-align: left; }
.os-qk-ai-labs-head--left > * { margin-inline: 0; }
.os-qk-ai-labs-sec > .os-qk-ai-labs-head + * { margin-top: 48px; }

.os-qk-ai-labs-measure,
.os-qk-ai-labs-evidence { color: var(--wp--preset--color--white); }
:is(.os-qk-ai-labs-measure, .os-qk-ai-labs-evidence) .os-qk-ai-labs-head > h2 { color: var(--wp--preset--color--white); }
:is(.os-qk-ai-labs-measure, .os-qk-ai-labs-evidence) .os-qk-ai-labs-head > .is-style-os-eyebrow { color: var(--wp--preset--color--teal); }
:is(.os-qk-ai-labs-measure, .os-qk-ai-labs-evidence) .os-qk-ai-labs-head > .os-qk-ai-labs-head__lead { color: rgb(255 255 255 / 0.86); }
:is(.os-qk-ai-labs-measure, .os-qk-ai-labs-evidence) .os-qk-ai-labs-head > .os-qk-ai-labs-head__text { color: rgb(255 255 255 / 0.72); }

@media (max-width: 768px) {
	.os-qk-ai-labs-sec { padding-top: var(--wp--preset--spacing--90); padding-bottom: var(--wp--preset--spacing--90); }
	.os-qk-ai-labs-head > .os-qk-ai-labs-head__lead { font-size: var(--wp--preset--font-size--medium); }
	.os-qk-ai-labs-sec > .os-qk-ai-labs-head + * { margin-top: 28px; }
}

/* ---------- Hero (os/qk-ai-labs-hero) ---------- */
/* The banner's image box takes the dial's own shape (624:528) up to 440px; OS No Frame contains it. */
.os-qk-ai-labs-hero .os-industry-list-hero__body > .os-industry-list-hero__media {
	aspect-ratio: 624 / 528;
	max-height: 440px;
}
@media (max-width: 1100px) {
	.os-qk-ai-labs-hero .os-industry-list-hero__body > .os-industry-list-hero__media { max-width: 480px; max-height: none; }
}

/* ---------- Platforms bento (os/qk-ai-labs-stack) ---------- */
/* Background: the Aurora preset, set on the block (user, 2026-10-16: "can it be the light background
   gradient"; was the AI Labs Glow). 12-column bento, 16px gaps:
   Models (7) | Connectors hub (5, two rows) / Cloud (7) / one Connectors box (12: Observability |
   ITSM | Data).
   Tiles: the OS Pillar card (Home Six Pillars): navy, translucent blue edge, 18px corners, the faint
   ring top-right; hover lifts with the pillar's edge and shadow. */
.os-qk-ai-labs-bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 16px;
}
.os-qk-ai-labs-bento > * { margin: 0; }
.os-qk-ai-labs-tile {
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	padding: 28px;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid rgb(89 178 255 / 0.28);
	border-radius: 18px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	transition: transform var(--os-base) var(--os-ease), box-shadow var(--os-base) var(--os-ease), border-color var(--os-fast) var(--os-ease);
}
.os-qk-ai-labs-tile::before {
	content: "";
	position: absolute;
	top: -12px;
	right: -63px;
	z-index: -1;
	width: 225px;
	height: 225px;
	border-radius: 50%;
	background: rgb(31 140 255 / 0.08);
	pointer-events: none;
}
.os-qk-ai-labs-tile:hover {
	transform: translateY(-4px);
	border-color: rgb(89 178 255 / 0.6);
	box-shadow: 0 18px 40px rgb(6 41 110 / 0.28);
}
.os-qk-ai-labs-tile > * { margin: 0; }
.os-qk-ai-labs-tile--models { grid-column: 1 / span 7; }
.os-qk-ai-labs-tile--hub { grid-column: 8 / span 5; grid-row: 1 / span 2; }
.os-qk-ai-labs-tile--cloud { grid-column: 1 / span 7; }

.os-qk-ai-labs-tile > .os-qk-ai-labs-tile__head {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 14px;
	align-items: center;
	margin-bottom: 20px;
}
.os-qk-ai-labs-tile__head > * { margin: 0; }
.os-qk-ai-labs-tile__head > .os-qk-ai-labs-tile__icon {
	display: flex;
	grid-row: 1 / span 2;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--preset--border-radius--md);
	background: var(--wp--preset--color--white); /* user: white square, navy icon (navy-on-navy merged) */
}
.os-qk-ai-labs-tile__icon img { display: block; width: 22px; height: 22px; } /* the SVGs are drawn in navy */
.os-qk-ai-labs-tile .os-qk-ai-labs-tile__label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--wp--preset--color--teal);
}
.os-qk-ai-labs-tile__head > .os-qk-ai-labs-tile__label { align-self: end; }
/* The brand chips 20% larger here than the shared OS Logo Chips (user, 2026-10-16): text 13 → 15.6px,
   symbol 16 → 19.2px, padding 8 / 12 → 9.6 / 14.4px. */
.os-qk-ai-labs-tile > .is-style-os-logo-chips > li { padding: 9.6px 14.4px; font-size: 15.6px; }
.os-qk-ai-labs-tile > .is-style-os-logo-chips > li img { width: 19.2px; height: 19.2px; }
.os-qk-ai-labs-tile__head > .os-qk-ai-labs-tile__title {
	align-self: start;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--white);
}

/* Hub: "100+ Connectors" inside two dashed rings of symbols: the inner one turns clockwise (60s),
   the outer one anti-clockwise (90s, its symbols set between the inner ones; user, 2026-10-16:
   "an additional outer circle which moves anti-clockwise", no circle behind the figure). Each ring
   is centred on the hub and sized by --os-orbit-r; each symbol turns back so it stays upright;
   transform only; still with reduced motion. Inner / outer radius: 118 / 178 (hub 400, 56px figure),
   112 / 168 (≤1100, hub 380, 48px), 84 / 124 (≤768, hub 280, 40px, 32px bubbles): text, inner and
   outer ring evenly spaced; bubbles clear each other and the text at every angle. */
.os-qk-ai-labs-tile--hub { display: flex; flex-direction: column; }
.os-qk-ai-labs-tile--hub::before { content: none; } /* the pillar's corner circle would cut across the rings */
.os-qk-ai-labs-tile--hub > .os-qk-ai-labs-hub {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 400px;
	max-width: 100%;
	aspect-ratio: 1;
	margin: auto;
}
.os-qk-ai-labs-hub > * { margin: 0; }
/* Quiet centre (user, 2026-10-16: smaller, "premium looking"): the figure 56px semi-bold, the
   name a small spaced label under it. */
.os-qk-ai-labs-hub > .os-qk-ai-labs-hub__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 56px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--white);
}
.os-qk-ai-labs-hub > .os-qk-ai-labs-hub__name {
	margin-top: 10px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 1px;
	color: rgb(255 255 255 / 0.72);
}
.os-qk-ai-labs-hub > .os-qk-ai-labs-hub__orbit {
	--os-orbit-r: 118px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--os-orbit-r) * 2);
	height: calc(var(--os-orbit-r) * 2);
	border: 1px dashed rgb(255 255 255 / 0.18);
	border-radius: 50%;
	translate: -50% -50%;
	pointer-events: none;
}
.os-qk-ai-labs-hub > .os-qk-ai-labs-hub__orbit--outer { --os-orbit-r: 178px; --os-orbit-offset: 22.5deg; border-color: rgb(255 255 255 / 0.12); }
.os-qk-ai-labs-hub__orbit > .os-qk-ai-labs-hub__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border: 1px solid rgb(89 178 255 / 0.28);
	border-radius: 50%;
	background: var(--wp--preset--color--navy-deep);
	transform: rotate(calc(var(--os-i, 0) * 45deg + var(--os-orbit-offset, 0deg))) translateY(calc(var(--os-orbit-r) * -1)) rotate(calc(var(--os-i, 0) * -45deg - var(--os-orbit-offset, 0deg)));
}
.os-qk-ai-labs-hub__logo img {
	display: block;
	width: 20px;
	height: 20px;
	filter: brightness(0) invert(1);
	opacity: 0.9;
	transition: opacity var(--os-fast) var(--os-ease), scale var(--os-fast) var(--os-ease);
}
/* os-qk-ai-labs.js swaps one bubble's symbol at a time for another name from the section's chip
   lists: out (fade + shrink), new src, back in. */
.os-qk-ai-labs-hub__logo.is-swapping img { opacity: 0; scale: 0.6; }
.os-qk-ai-labs-hub__orbit > :nth-child(2) { --os-i: 1; }
.os-qk-ai-labs-hub__orbit > :nth-child(3) { --os-i: 2; }
.os-qk-ai-labs-hub__orbit > :nth-child(4) { --os-i: 3; }
.os-qk-ai-labs-hub__orbit > :nth-child(5) { --os-i: 4; }
.os-qk-ai-labs-hub__orbit > :nth-child(6) { --os-i: 5; }
.os-qk-ai-labs-hub__orbit > :nth-child(7) { --os-i: 6; }
.os-qk-ai-labs-hub__orbit > :nth-child(8) { --os-i: 7; }
@media (prefers-reduced-motion: no-preference) {
	.os-qk-ai-labs-hub > .os-qk-ai-labs-hub__orbit { animation: os-qk-orbit 60s linear infinite; }
	.os-qk-ai-labs-hub__logo img { animation: os-qk-orbit 60s linear infinite reverse; }
	.os-qk-ai-labs-hub > .os-qk-ai-labs-hub__orbit--outer { animation: os-qk-orbit 90s linear infinite reverse; }
	.os-qk-ai-labs-hub__orbit--outer .os-qk-ai-labs-hub__logo img { animation: os-qk-orbit 90s linear infinite; }
}
@keyframes os-qk-orbit { to { transform: rotate(360deg); } }
/* The editor keeps the rings still, so a bubble's image can be clicked and replaced. */
.is-root-container .os-qk-ai-labs-hub__orbit,
.is-root-container .os-qk-ai-labs-hub__logo img { animation: none; }

/* Connectors: one box at every width (user, 2026-10-16: "group the Connectors in one box so
   everything looks like a unit", "now make the desktop also 1 unit"): the tiles' OS Pillar card,
   its "Connectors" label once, then the three groups (icon + title + chip row) as plain sections
   split by hairlines: 6 / 3 / 3 columns on desktop, Observability over ITSM | Data on tablets,
   stacked on phones. Their own labels are hidden and each title is centred on its icon. */
.os-qk-ai-labs-bento > .os-qk-ai-labs-connectors {
	position: relative;
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
	box-sizing: border-box;
	min-width: 0;
	padding: 28px;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid rgb(89 178 255 / 0.28);
	border-radius: 18px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	transition: transform var(--os-base) var(--os-ease), box-shadow var(--os-base) var(--os-ease), border-color var(--os-fast) var(--os-ease);
}
.os-qk-ai-labs-bento > .os-qk-ai-labs-connectors::before {
	content: "";
	position: absolute;
	top: -12px;
	right: -63px;
	z-index: -1;
	width: 225px;
	height: 225px;
	border-radius: 50%;
	background: rgb(31 140 255 / 0.08);
	pointer-events: none;
}
/* No lift on this big box (user: "on hover things are moving"): edge and shadow only. */
.os-qk-ai-labs-bento > .os-qk-ai-labs-connectors:hover {
	border-color: rgb(89 178 255 / 0.6);
	box-shadow: 0 18px 40px rgb(6 41 110 / 0.28);
}
.os-qk-ai-labs-connectors > .os-qk-ai-labs-connectors__label {
	grid-column: 1 / -1;
	margin: 0 0 20px;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--wp--preset--color--teal);
}
.os-qk-ai-labs-connectors > .os-qk-ai-labs-tile {
	margin: 0; /* not the group's block gap */
	padding: 0 28px;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	transform: none;
}
/* The sections don't react to hover (the tile hover would lift them); only the colours are reset
   here, never the padding, or the first column would shift (user, 2026-10-16). */
.os-qk-ai-labs-connectors > .os-qk-ai-labs-tile:hover { border-color: rgb(89 178 255 / 0.28); box-shadow: none; transform: none; }
.os-qk-ai-labs-connectors > .os-qk-ai-labs-tile::before { content: none; }
.os-qk-ai-labs-connectors > :nth-child(2) { padding-left: 0; }
.os-qk-ai-labs-connectors > :last-child { padding-right: 0; }
.os-qk-ai-labs-connectors > .os-qk-ai-labs-tile + .os-qk-ai-labs-tile { border-left: 1px solid rgb(89 178 255 / 0.28); }
.os-qk-ai-labs-connectors .os-qk-ai-labs-tile__head > .os-qk-ai-labs-tile__label { display: none; }
.os-qk-ai-labs-connectors .os-qk-ai-labs-tile__head > .os-qk-ai-labs-tile__icon { grid-row: auto; }
.os-qk-ai-labs-connectors .os-qk-ai-labs-tile__head > .os-qk-ai-labs-tile__title { align-self: center; }
@media (max-width: 1100px) {
	.os-qk-ai-labs-bento > .os-qk-ai-labs-connectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.os-qk-ai-labs-connectors > :nth-child(2) { grid-column: 1 / -1; padding: 0 0 24px; border-bottom: 1px solid rgb(89 178 255 / 0.28); }
	.os-qk-ai-labs-connectors > :nth-child(3) { padding-top: 24px; padding-left: 0; }
	.os-qk-ai-labs-connectors > .os-qk-ai-labs-tile + .os-qk-ai-labs-tile:nth-child(3) { border-left: 0; } /* as strong as the column line */
	.os-qk-ai-labs-connectors > :nth-child(4) { padding-top: 24px; }
}
@media (max-width: 768px) {
	.os-qk-ai-labs-bento > .os-qk-ai-labs-connectors { display: block; padding: 20px; border-radius: var(--wp--preset--border-radius--lg); }
	.os-qk-ai-labs-connectors > .os-qk-ai-labs-connectors__label { margin-bottom: 16px; }
	.os-qk-ai-labs-connectors > .os-qk-ai-labs-tile,
	.os-qk-ai-labs-connectors > :nth-child(n) { padding: 0; border: 0; }
	.os-qk-ai-labs-connectors > .os-qk-ai-labs-tile + .os-qk-ai-labs-tile { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgb(89 178 255 / 0.28); border-left: 0; }
}
@media (max-width: 1100px) {
	.os-qk-ai-labs-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.os-qk-ai-labs-bento > .os-qk-ai-labs-tile { grid-column: 1 / -1; grid-row: auto; }
	/* Stacked: Models, Environments, then the Integrations hub next to the Connectors box (user). */
	.os-qk-ai-labs-bento > .os-qk-ai-labs-tile--hub { order: 1; }
	.os-qk-ai-labs-bento > .os-qk-ai-labs-connectors { order: 2; }
	.os-qk-ai-labs-tile--hub > .os-qk-ai-labs-hub { width: 380px; }
	.os-qk-ai-labs-hub > .os-qk-ai-labs-hub__orbit { --os-orbit-r: 112px; }
	.os-qk-ai-labs-hub > .os-qk-ai-labs-hub__value { font-size: 48px; }
	.os-qk-ai-labs-hub > .os-qk-ai-labs-hub__orbit--outer { --os-orbit-r: 168px; }
}
@media (max-width: 768px) {
	.os-qk-ai-labs-tile { padding: 20px; border-radius: var(--wp--preset--border-radius--lg); }
	.os-qk-ai-labs-tile__head > .os-qk-ai-labs-tile__title { font-size: var(--wp--preset--font-size--large); }
	.os-qk-ai-labs-tile > .os-qk-ai-labs-tile__head { margin-bottom: 16px; }
	/* The chip row runs edge to edge of the tile on phones. */
	.os-qk-ai-labs-tile > .is-style-os-logo-chips { margin-inline: -20px; padding-inline: 20px; }
	.os-qk-ai-labs-tile--hub > .os-qk-ai-labs-hub { width: 280px; }
	.os-qk-ai-labs-hub > .os-qk-ai-labs-hub__orbit { --os-orbit-r: 84px; }
	.os-qk-ai-labs-hub > .os-qk-ai-labs-hub__orbit--outer { --os-orbit-r: 124px; }
	.os-qk-ai-labs-hub__orbit > .os-qk-ai-labs-hub__logo { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
	.os-qk-ai-labs-hub__logo img { width: 16px; height: 16px; }
	.os-qk-ai-labs-hub > .os-qk-ai-labs-hub__value { font-size: 40px; }
	.os-qk-ai-labs-hub > .os-qk-ai-labs-hub__name { margin-top: 6px; font-size: var(--wp--preset--font-size--x-small); }
}

/* ---------- Trust + Build / Prove / Run (os/qk-ai-labs-lab) ---------- */
/* White. Head with the two lines of introduction; two figure tiles side by side (1 below 641);
   then the three areas as full
   cards that stick under the header and stack on top of each other while scrolling (desktop with
   room only): dark / brand gradient / light (Build ↔ Run swapped, user 2026-10-16), each: "01 / 03" + huge verb + area name | description
   + figure chips. */
.os-qk-ai-labs-lab { background: var(--wp--preset--color--white); }
/* The introduction under the H2: two plain paragraphs in the lead style, neither emphasised
   (user, 2026-10-16; was a quote tile + a framed manifesto line). */
/* Order (user, 2026-10-16): eyebrow + H2, the figures, then the introduction. */
.os-qk-ai-labs-lab > .os-qk-ai-labs-lab__figures { margin-top: 40px; }
.os-qk-ai-labs-lab > .os-qk-ai-labs-lab__intro { margin-top: 32px; }
.os-qk-ai-labs-lab > .os-qk-ai-labs-lab__intro > .os-qk-ai-labs-head__lead:first-child { margin-top: 0; }
.os-qk-ai-labs-lab .os-qk-ai-labs-head > .os-qk-ai-labs-head__lead + .os-qk-ai-labs-head__lead { margin-top: 12px; }
/* Normal weight; only the blue Build / Prove / Running are bold (user). */
.os-qk-ai-labs-lab .os-qk-ai-labs-head > .os-qk-ai-labs-head__lead { font-weight: 400; }
.os-qk-ai-labs-lab .os-qk-ai-labs-head > .os-qk-ai-labs-head__lead strong { font-weight: 700; }

/* The two headline figures: one box on the light card gradient (the Run card's: on-brand + teal
   glow), the figures split by a hairline (user, 2026-10-16: "1 box with separator in it"), centred
   under the head, text left-aligned, type at the "Measured, not estimated" strip's sizes (48px
   figure, 36px ≤768; 14px label). The figures keep the Build card's figure classes (colours). */
.os-qk-ai-labs-lab > .os-qk-ai-labs-lab__figures {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 0;
	box-sizing: border-box;
	width: min(600px, 100%);
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--wp--custom--color--card-blue);
	border-radius: var(--wp--preset--border-radius--lg);
	background:
		radial-gradient(ellipse 360px 220px at 0 100%, rgb(20 199 180 / 0.12), rgb(20 199 180 / 0) 70%),
		var(--wp--custom--color--on-brand);
}
.os-qk-ai-labs-lab > .os-qk-ai-labs-lab__figures > .os-qk-ai-labs-figure { /* over the Build card's figure box */
	min-width: 0;
	padding: 20px 24px;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: left;
}
.os-qk-ai-labs-lab > .os-qk-ai-labs-lab__figures > .os-qk-ai-labs-figure + .os-qk-ai-labs-figure { border-left: 1px solid var(--wp--custom--color--card-blue); }
.os-qk-ai-labs-lab__figures .os-qk-ai-labs-figure > .os-qk-ai-labs-figure__value { font-size: 48px; line-height: 1.1; }
.os-qk-ai-labs-lab__figures .os-qk-ai-labs-figure > .os-qk-ai-labs-figure__label { margin-top: 8px; font-size: 14px; }
@media (max-width: 768px) {
	.os-qk-ai-labs-lab > .os-qk-ai-labs-lab__figures > .os-qk-ai-labs-figure { padding: 14px 16px; }
	.os-qk-ai-labs-lab__figures .os-qk-ai-labs-figure > .os-qk-ai-labs-figure__value { font-size: 36px; }
}

.os-qk-ai-labs-lab > .os-qk-ai-labs-areas { margin-top: 56px; counter-reset: os-qk-area; }
.os-qk-ai-labs-areas > .os-qk-ai-labs-area {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 48px;
	box-sizing: border-box;
	margin: 0;
	padding: 48px;
	border-radius: 24px;
	counter-increment: os-qk-area;
	box-shadow: 0 -16px 40px rgb(0 31 84 / 0.08);
}
.os-qk-ai-labs-areas > .os-qk-ai-labs-area + .os-qk-ai-labs-area { margin-top: 24px; }
.os-qk-ai-labs-area > * { margin: 0; }
.os-qk-ai-labs-areas > .os-qk-ai-labs-area--run {
	border: 1px solid var(--wp--custom--color--card-blue);
	background:
		radial-gradient(ellipse 520px 360px at 0 100%, rgb(20 199 180 / 0.1), rgb(20 199 180 / 0) 70%),
		var(--wp--custom--color--on-brand);
}
.os-qk-ai-labs-areas > .os-qk-ai-labs-area--prove {
	background:
		radial-gradient(ellipse 560px 380px at 100% 0, rgb(58 152 250 / 0.35), rgb(58 152 250 / 0) 70%),
		linear-gradient(141.3deg, var(--wp--preset--color--brand) 0%, var(--wp--preset--color--navy) 100%);
	color: var(--wp--preset--color--white);
}
.os-qk-ai-labs-areas > .os-qk-ai-labs-area--build {
	background:
		radial-gradient(ellipse 560px 380px at 100% 100%, rgb(20 199 180 / 0.22), rgb(20 199 180 / 0) 70%),
		linear-gradient(141.3deg, var(--wp--preset--color--navy-deep) 0%, var(--wp--preset--color--ink-deep) 100%);
	color: var(--wp--preset--color--white);
}
.os-qk-ai-labs-area__name > * { margin: 0; }
.os-qk-ai-labs-area__name::before {
	content: counter(os-qk-area, decimal-leading-zero);
	display: block;
	margin-bottom: 12px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--wp--preset--color--brand);
}
.os-qk-ai-labs-area__name > .os-qk-ai-labs-area__verb {
	font-size: 88px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--ink-deep);
}
.os-qk-ai-labs-area__name > .os-qk-ai-labs-area__what {
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--brand);
}
.os-qk-ai-labs-area__body > * { margin: 0; }
.os-qk-ai-labs-area__body > .os-qk-ai-labs-area__text {
	font-size: 17px;
	line-height: 1.7;
	color: var(--wp--preset--color--ink-soft);
}
.os-qk-ai-labs-area__body > .os-qk-ai-labs-area__figures {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}
.os-qk-ai-labs-area__figures > .os-qk-ai-labs-figure {
	box-sizing: border-box;
	min-width: 140px;
	margin: 0;
	padding: 14px 18px 16px;
	border: 1px solid var(--wp--custom--color--card-blue);
	border-radius: var(--wp--preset--border-radius--md);
	background: var(--wp--preset--color--white);
}
.os-qk-ai-labs-figure > * { margin: 0; }
.os-qk-ai-labs-figure > .os-qk-ai-labs-figure__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	white-space: nowrap;
	color: var(--wp--preset--color--brand);
}
.os-qk-ai-labs-figure > .os-qk-ai-labs-figure__label {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--custom--color--tertiary);
}
/* On the blue and navy cards. */
:is(.os-qk-ai-labs-area--build, .os-qk-ai-labs-area--prove) .os-qk-ai-labs-area__name::before { color: rgb(255 255 255 / 0.7); }
:is(.os-qk-ai-labs-area--build, .os-qk-ai-labs-area--prove) .os-qk-ai-labs-area__name > .os-qk-ai-labs-area__verb { color: var(--wp--preset--color--white); }
:is(.os-qk-ai-labs-area--build, .os-qk-ai-labs-area--prove) .os-qk-ai-labs-area__name > .os-qk-ai-labs-area__what { color: var(--wp--preset--color--teal); }
:is(.os-qk-ai-labs-area--build, .os-qk-ai-labs-area--prove) .os-qk-ai-labs-area__body > .os-qk-ai-labs-area__text { color: rgb(255 255 255 / 0.85); }
:is(.os-qk-ai-labs-area--build, .os-qk-ai-labs-area--prove) .os-qk-ai-labs-area__figures > .os-qk-ai-labs-figure { border-color: rgb(255 255 255 / 0.16); background: rgb(255 255 255 / 0.07); }
:is(.os-qk-ai-labs-area--build, .os-qk-ai-labs-area--prove) .os-qk-ai-labs-figure > .os-qk-ai-labs-figure__value { color: var(--wp--preset--color--white); }
:is(.os-qk-ai-labs-area--build, .os-qk-ai-labs-area--prove) .os-qk-ai-labs-figure > .os-qk-ai-labs-figure__label { color: rgb(255 255 255 / 0.72); }
/* Stacking: each card sticks a little lower than the one before; the next slides over it. */
@media (min-width: 1024px) and (min-height: 760px) {
	.os-qk-ai-labs-areas > .os-qk-ai-labs-area { position: sticky; top: calc(var(--os-header-offset, 82px) + 24px); }
	.os-qk-ai-labs-areas > .os-qk-ai-labs-area:nth-child(2) { top: calc(var(--os-header-offset, 82px) + 44px); }
	.os-qk-ai-labs-areas > .os-qk-ai-labs-area:nth-child(3) { top: calc(var(--os-header-offset, 82px) + 64px); }
	.is-root-container .os-qk-ai-labs-areas > .os-qk-ai-labs-area { position: static; }
}
/* With JS (os-qk-ai-labs.js), at every width: each card sticks where --os-stick-top says (under
   the header, 20px lower per card; a card taller than the room sticks by its bottom 16px above
   the window's, so it's read in full before the next one slides over it). */
.os-qk-ai-labs-areas.is-stacking > .os-qk-ai-labs-area { position: sticky; top: var(--os-stick-top); }
.is-root-container .os-qk-ai-labs-areas.is-stacking > .os-qk-ai-labs-area { position: static; }
@media (max-width: 1100px) {
	.os-qk-ai-labs-areas > .os-qk-ai-labs-area { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 36px; }
	.os-qk-ai-labs-area__name > .os-qk-ai-labs-area__verb { font-size: 64px; }
}
@media (max-width: 768px) {
	.os-qk-ai-labs-lab > .os-qk-ai-labs-areas { margin-top: 32px; }
	.os-qk-ai-labs-areas > .os-qk-ai-labs-area { padding: 24px 20px; border-radius: var(--wp--preset--border-radius--lg); }
	.os-qk-ai-labs-areas > .os-qk-ai-labs-area + .os-qk-ai-labs-area { margin-top: 16px; }
	.os-qk-ai-labs-area__name > .os-qk-ai-labs-area__verb { font-size: 48px; }
	.os-qk-ai-labs-area__name > .os-qk-ai-labs-area__what { margin-top: 10px; font-size: var(--wp--preset--font-size--large); }
	.os-qk-ai-labs-area__body > .os-qk-ai-labs-area__text { font-size: var(--wp--preset--font-size--medium); }
	.os-qk-ai-labs-area__body > .os-qk-ai-labs-area__figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
	.os-qk-ai-labs-area__figures > .os-qk-ai-labs-figure { min-width: 0; padding: 12px 14px; }
	.os-qk-ai-labs-figure > .os-qk-ai-labs-figure__value { font-size: var(--wp--preset--font-size--x-large); }
}

/* ---------- How we measure (os/qk-ai-labs-measure) ---------- */
/* Navy with a sky glow at the top. The pipeline: numbered nodes (counter, so a duplicated step
   numbers itself) on a teal rail, the verdict node filled; under it a dashed loop from the verdict
   back to the first node with "Re-run continuously". Vertical below 901px. Then three glass score
   cards with the mint top edge of the Evidence strip and glass tags, no marker (user). */
.os-qk-ai-labs-measure {
	background:
		radial-gradient(ellipse 1100px 520px at 50% 0, rgb(58 152 250 / 0.28), rgb(58 152 250 / 0) 70%),
		linear-gradient(180deg, var(--wp--preset--color--navy) 0%, var(--wp--preset--color--navy-deep) 55%);
}
/* The two introduction paragraphs: one style, normal weight, white (user, 2026-10-16, as in
   Trust in production). */
.os-qk-ai-labs-measure .os-qk-ai-labs-head > .os-qk-ai-labs-head__lead { font-weight: 400; color: var(--wp--preset--color--white); }
.os-qk-ai-labs-measure .os-qk-ai-labs-head > .os-qk-ai-labs-head__lead + .os-qk-ai-labs-head__lead { margin-top: 12px; }
.os-qk-ai-labs-measure > .os-qk-ai-labs-pipeline { margin-top: 56px; }
.os-qk-ai-labs-pipeline > * { margin: 0; }
.os-qk-ai-labs-pipeline > .os-qk-ai-labs-pipeline__steps {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 16px;
	counter-reset: os-qk-step;
}
.os-qk-ai-labs-pipeline__steps > .os-qk-ai-labs-step {
	position: relative;
	margin: 0;
	padding-top: 76px;
	text-align: center;
	counter-increment: os-qk-step;
}
.os-qk-ai-labs-step > * { margin: 0; }
.os-qk-ai-labs-step::before {
	content: counter(os-qk-step, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 52px;
	height: 52px;
	border: 1.5px solid rgb(20 199 180 / 0.65);
	border-radius: 50%;
	background: var(--wp--preset--color--navy-deep);
	box-shadow: 0 0 0 6px rgb(20 199 180 / 0.08), 0 0 28px rgb(20 199 180 / 0.35);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--white);
	transform: translateX(-50%);
}
.os-qk-ai-labs-step:last-child::before {
	border-color: transparent;
	background: linear-gradient(141.3deg, var(--wp--preset--color--teal) 0%, var(--wp--preset--color--green) 100%);
	color: var(--wp--preset--color--ink-deep);
}
.os-qk-ai-labs-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 25px;
	left: calc(50% + 34px);
	width: calc(100% + 16px - 68px);
	height: 2px;
	border-radius: 1px;
	background: linear-gradient(90deg, rgb(20 199 180 / 0.8), rgb(58 152 250 / 0.8));
}
.os-qk-ai-labs-step > .os-qk-ai-labs-step__title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--white);
}
.os-qk-ai-labs-step > .os-qk-ai-labs-step__text {
	margin-top: 6px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--white);
}
.os-qk-ai-labs-pipeline > .os-qk-ai-labs-pipeline__loop {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	height: 64px;
	margin: 24px calc((100% - 80px) / 12) 0;
	padding-bottom: 12px;
	border: 1.5px dashed rgb(20 199 180 / 0.55);
	border-top: 0;
	border-radius: 0 0 28px 28px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--teal);
}
.os-qk-ai-labs-pipeline__loop::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("../images/ui/refresh.svg") center / contain no-repeat;
	mask: url("../images/ui/refresh.svg") center / contain no-repeat;
}
/* Arrow head where the loop meets the first node. */
.os-qk-ai-labs-pipeline__loop::after {
	content: "";
	position: absolute;
	top: -7px;
	left: -7.5px;
	border: 6px solid transparent;
	border-top: 0;
	border-bottom: 8px solid rgb(20 199 180 / 0.85);
}

/* The pulse (user, 2026-10-16: "something going from one point to another and then restarting";
   "after verdict it should go through the down arrow of Re-run continuously"): a teal comet runs
   along the rail from 01 to 06, easing into each node, which swells as it arrives; it then rides the
   dashed loop down from 06, along the bottom past "Re-run…" (the refresh icon turns), up the left
   side through the arrow head into 01, and the cycle starts again. 10s; 1.2s per hop, so node n
   pulses at (n - 1) × 1.2s. Transform and opacity only, no JS:
   - the rail comet is one box as long as the rail (first → last node centre; equal columns / rows
     make that computable), its head drawn at the left (top) edge, moved by translate(100%), under
     the nodes so it slips into each one;
   - the loop comet (desktop) is a box the size of the loop + 12px, the dot drawn at its top-left
     corner, so translate(100% - 12px) reaches the loop's other side / bottom; corners are cut in
     two short legs to follow the 28px curve.
   On the vertical rail (≤900px) the comet runs on from 06 into the loop box instead. Timed for six
   steps. Off with reduced motion and in the editor. */
.os-qk-ai-labs-measure > .os-qk-ai-labs-pipeline,
.os-qk-ai-labs-pipeline > .os-qk-ai-labs-pipeline__steps { position: relative; }
@media (prefers-reduced-motion: no-preference) {
	.os-qk-ai-labs-measure > .os-qk-ai-labs-pipeline,
	.os-qk-ai-labs-pipeline > .os-qk-ai-labs-pipeline__steps { overflow-x: clip; }
	.os-qk-ai-labs-pipeline__steps::before,
	.os-qk-ai-labs-pipeline::after {
		content: "";
		position: absolute;
		z-index: 0; /* under the nodes (z-index 1) */
		opacity: 0;
		pointer-events: none;
	}
	.os-qk-ai-labs-pipeline__steps::before {
		top: 20px;
		left: calc((100% - 80px) / 12 - 46px);
		width: calc(100% - (100% - 80px) / 6);
		height: 12px;
		background:
			radial-gradient(circle 6px at 46px 50%, var(--wp--preset--color--white) 0, var(--wp--preset--color--white) 3px, var(--wp--preset--color--teal) 4px, rgb(20 199 180 / 0) 6px) 0 0 / 52px 100% no-repeat,
			linear-gradient(90deg, rgb(20 199 180 / 0), rgb(20 199 180 / 0.9)) 0 50% / 42px 2px no-repeat;
		animation: os-qk-pulse-x 10s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	}
	.os-qk-ai-labs-pipeline::after {
		bottom: -6px;
		left: calc((100% - 80px) / 12 - 6px);
		width: calc(100% - (100% - 80px) / 6 + 12px);
		height: 76px;
		background: radial-gradient(circle 6px at 6px 6px, var(--wp--preset--color--white) 0, var(--wp--preset--color--white) 3px, var(--wp--preset--color--teal) 4px, rgb(20 199 180 / 0) 6px) 0 0 / 12px 12px no-repeat;
		animation: os-qk-pulse-loop 10s linear infinite;
	}
	.os-qk-ai-labs-pipeline__steps > .os-qk-ai-labs-step::before { animation: os-qk-node 10s var(--os-ease) infinite; }
	.os-qk-ai-labs-pipeline__steps > .os-qk-ai-labs-step:nth-child(2)::before { animation-delay: 1.2s; }
	.os-qk-ai-labs-pipeline__steps > .os-qk-ai-labs-step:nth-child(3)::before { animation-delay: 2.4s; }
	.os-qk-ai-labs-pipeline__steps > .os-qk-ai-labs-step:nth-child(4)::before { animation-delay: 3.6s; }
	.os-qk-ai-labs-pipeline__steps > .os-qk-ai-labs-step:nth-child(5)::before { animation-delay: 4.8s; }
	.os-qk-ai-labs-pipeline__steps > .os-qk-ai-labs-step:nth-child(6)::before { animation-delay: 6s; }
	.os-qk-ai-labs-pipeline > .os-qk-ai-labs-pipeline__loop::before { animation: os-qk-loop 10s var(--os-ease) infinite; }
	.is-root-container .os-qk-ai-labs-pipeline__steps::before,
	.is-root-container .os-qk-ai-labs-pipeline::after { content: none; }
}
/* Phones, first time only (os-qk-ai-labs.js): the pipeline is "is-pending" until every step has
   lit, one by one as they scroll in: an unlit dot is small and faint, its text hidden, its line
   undrawn; "is-lit" brings the dot and text in, "is-drawn" draws the line down to the next dot.
   The pulse waits until then, so it starts in step with the nodes. */
.os-qk-ai-labs-pipeline.is-pending > .os-qk-ai-labs-pipeline__steps::before { content: none; }
.os-qk-ai-labs-pipeline.is-pending > .os-qk-ai-labs-pipeline__steps > .os-qk-ai-labs-step::before,
.os-qk-ai-labs-pipeline.is-pending > .os-qk-ai-labs-pipeline__loop::before { animation: none; }
.os-qk-ai-labs-pipeline.is-pending > .os-qk-ai-labs-pipeline__steps > .os-qk-ai-labs-step::before { transition: opacity var(--os-base) var(--os-ease), scale var(--os-base) var(--os-ease); }
.os-qk-ai-labs-pipeline.is-pending > .os-qk-ai-labs-pipeline__steps > .os-qk-ai-labs-step:not(.is-lit)::before { opacity: 0.3; scale: 0.7; }
.os-qk-ai-labs-pipeline.is-pending .os-qk-ai-labs-step > *,
.os-qk-ai-labs-pipeline.is-pending > .os-qk-ai-labs-pipeline__loop { transition: opacity var(--os-base) var(--os-ease), transform var(--os-base) var(--os-ease); }
.os-qk-ai-labs-pipeline.is-pending .os-qk-ai-labs-step:not(.is-lit) > *,
.os-qk-ai-labs-pipeline.is-pending > .os-qk-ai-labs-pipeline__loop:not(.is-lit) { opacity: 0; transform: translateY(8px); }
.os-qk-ai-labs-pipeline.is-pending > .os-qk-ai-labs-pipeline__steps > .os-qk-ai-labs-step::after { transform-origin: top center; transition: transform var(--os-base) var(--os-ease); }
.os-qk-ai-labs-pipeline.is-pending > .os-qk-ai-labs-pipeline__steps > .os-qk-ai-labs-step:not(.is-drawn)::after { transform: scaleY(0); }

@keyframes os-qk-pulse-x {
	0% { opacity: 0; transform: translateX(0); }
	2% { opacity: 1; }
	12% { transform: translateX(20%); }
	24% { transform: translateX(40%); }
	36% { transform: translateX(60%); }
	48% { transform: translateX(80%); }
	60% { opacity: 1; transform: translateX(100%); }
	62%, 100% { opacity: 0; transform: translateX(100%); }
}
/* Loop: top-right (under 06) → down → corner → bottom → corner → up to the arrow head (top-left). */
@keyframes os-qk-pulse-loop {
	0%, 61% { opacity: 0; transform: translate(calc(100% - 12px), 0); }
	63% { opacity: 1; transform: translate(calc(100% - 12px), 0); }
	67% { transform: translate(calc(100% - 12px), calc(100% - 40px)); }
	68% { transform: translate(calc(100% - 20.2px), calc(100% - 20.2px)); }
	69% { transform: translate(calc(100% - 40px), calc(100% - 12px)); }
	88% { transform: translate(28px, calc(100% - 12px)); }
	89% { transform: translate(8.2px, calc(100% - 20.2px)); }
	90% { transform: translate(0, calc(100% - 40px)); }
	95% { opacity: 1; transform: translate(0, 0); }
	98%, 100% { opacity: 0; transform: translate(0, 0); }
}
/* Vertical rail: on from 06 into the top of the loop box (06's centre + the rest of its row + the
   24px margin = 20% of the box − 22px past 100%; see the ≤900px rules). */
@keyframes os-qk-pulse-y {
	0% { opacity: 0; transform: translateY(0); }
	2% { opacity: 1; }
	12% { transform: translateY(20%); }
	24% { transform: translateY(40%); }
	36% { transform: translateY(60%); }
	48% { transform: translateY(80%); }
	60% { opacity: 1; transform: translateY(100%); }
	68% { opacity: 1; transform: translateY(calc(120% - 22px)); }
	72%, 100% { opacity: 0; transform: translateY(calc(120% - 22px)); }
}
@keyframes os-qk-node {
	0%, 10%, 100% { scale: 1; }
	4% { scale: 1.16; }
}
@keyframes os-qk-loop {
	0%, 72% { transform: rotate(0); }
	86%, 100% { transform: rotate(-360deg); }
}

.os-qk-ai-labs-measure > .os-qk-ai-labs-score__title {
	margin-top: 64px;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: var(--wp--preset--color--white);
}
.os-qk-ai-labs-measure > .os-qk-ai-labs-score {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 24px;
}
.os-qk-ai-labs-score > .os-qk-ai-labs-score__card {
	box-sizing: border-box;
	margin: 0;
	padding: 28px;
	border: 1px solid rgb(255 255 255 / 0.12);
	border-top: 3px solid var(--wp--preset--color--mint); /* every card, the same mint as the Evidence strip's top edge (user) */
	border-radius: 20px;
	background: linear-gradient(160deg, rgb(255 255 255 / 0.08) 0%, rgb(255 255 255 / 0.02) 100%);
}
.os-qk-ai-labs-score__card > * { margin: 0; }
.os-qk-ai-labs-score__card > .os-qk-ai-labs-score__name {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--white);
}
.os-qk-ai-labs-score__card > .os-qk-ai-labs-score__tags { margin-top: 18px; }
.os-qk-ai-labs-score__tags.is-style-os-tags li {
	border: 1px solid rgb(255 255 255 / 0.14);
	background: rgb(255 255 255 / 0.06);
	color: rgb(255 255 255 / 0.92);
	white-space: normal;
}
@media (max-width: 1100px) {
	.os-qk-ai-labs-measure > .os-qk-ai-labs-score { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
	.os-qk-ai-labs-measure > .os-qk-ai-labs-pipeline { overflow-x: visible; }
	.os-qk-ai-labs-pipeline > .os-qk-ai-labs-pipeline__steps { grid-auto-flow: row; grid-auto-rows: 1fr; gap: 20px; overflow-x: visible; }
	.os-qk-ai-labs-pipeline__steps::before {
		top: calc(26px - 46px);
		left: 20px;
		width: 12px;
		height: calc(100% - (100% - 100px) / 6);
		background:
			radial-gradient(circle 6px at 50% 46px, var(--wp--preset--color--white) 0, var(--wp--preset--color--white) 3px, var(--wp--preset--color--teal) 4px, rgb(20 199 180 / 0) 6px) 0 0 / 100% 52px no-repeat,
			linear-gradient(180deg, rgb(20 199 180 / 0), rgb(20 199 180 / 0.9)) 50% 0 / 2px 42px no-repeat;
		animation-name: os-qk-pulse-y;
	}
	.os-qk-ai-labs-pipeline::after { content: none; }
	.os-qk-ai-labs-pipeline__steps > .os-qk-ai-labs-step { min-height: 52px; padding: 4px 0 0 72px; text-align: left; }
	.os-qk-ai-labs-step::before { left: 0; transform: none; }
	.os-qk-ai-labs-step:not(:last-child)::after { top: 60px; left: 25px; width: 2px; height: calc(100% - 48px); background: linear-gradient(180deg, rgb(20 199 180 / 0.8), rgb(58 152 250 / 0.6)); }
	.os-qk-ai-labs-pipeline > .os-qk-ai-labs-pipeline__loop { align-items: center; height: auto; margin: 24px 0 0; padding: 12px 16px; border-top: 1.5px dashed rgb(20 199 180 / 0.55); border-radius: var(--wp--preset--border-radius--md); }
	.os-qk-ai-labs-pipeline__loop::after { content: none; }
}
@media (max-width: 768px) {
	.os-qk-ai-labs-measure > .os-qk-ai-labs-pipeline { margin-top: 32px; }
	.os-qk-ai-labs-step > .os-qk-ai-labs-step__title { font-size: var(--wp--preset--font-size--large); }
	.os-qk-ai-labs-measure > .os-qk-ai-labs-score__title { margin-top: 40px; font-size: var(--wp--preset--font-size--large); }
	.os-qk-ai-labs-score > .os-qk-ai-labs-score__card { padding: 22px 20px; }
	.os-qk-ai-labs-score__card > .os-qk-ai-labs-score__name { font-size: var(--wp--preset--font-size--large); }
}

/* ---------- Lab to live (os/qk-ai-labs-offerings) ---------- */
/* Aurora. An editorial index between hairlines: label | name (Techniqk / Agentiqk
   logos, Marqk in 48px black type) over what it is | description | Know more. A row with a link is one link (Know more
   stretched over it); on hover (desktop with a mouse) it lifts onto a white card. Two columns below
   1101px, one below 769. */
.os-qk-ai-labs-ways__list { border-top: 1px solid var(--wp--preset--color--border); }
.os-qk-ai-labs-ways__list > .os-qk-ai-labs-way {
	position: relative;
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.35fr) 150px;
	gap: 32px;
	align-items: center;
	margin: 0;
	padding: 36px 28px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: background-color var(--os-base) var(--os-ease), box-shadow var(--os-base) var(--os-ease), border-radius var(--os-base) var(--os-ease);
}
.os-qk-ai-labs-way > * { margin: 0; }
/* Desktop with a mouse only: no white hover card on tablets and phones (user, 2026-10-16). */
@media (min-width: 1101px) and (hover: hover) {
	.os-qk-ai-labs-ways__list > .os-qk-ai-labs-way:has(.os-qk-ai-labs-way__link a):hover {
		border-radius: 20px;
		background: var(--wp--preset--color--white);
		box-shadow: 0 20px 48px rgb(0 31 84 / 0.1);
	}
}
.os-qk-ai-labs-way > .os-qk-ai-labs-way__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--wp--custom--color--tertiary);
}
.os-qk-ai-labs-way__name > * { margin: 0; }
.os-qk-ai-labs-way__name > .os-qk-ai-labs-way__title {
	display: inline-block;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink); /* Marqk in solid black, like a logo (user, 2026-10-16) */
}
/* Techniqk and Agentiqk: the Home platform cards' logos as an inline image in the heading (alt =
   the name), at the cards' size. */
.os-qk-ai-labs-way__title img { display: block; max-width: 100%; height: auto; }
.os-qk-ai-labs-way__name > .os-qk-ai-labs-way__kind {
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
}
.os-qk-ai-labs-way > .os-qk-ai-labs-way__text {
	font-size: 17px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}
.os-qk-ai-labs-way > .os-qk-ai-labs-way__link { justify-content: flex-end; }
.os-qk-ai-labs-way__link a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.os-qk-ai-labs-way:has(.os-qk-ai-labs-way__link a:focus-visible) { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 3px; border-radius: 20px; }
.os-qk-ai-labs-way__link a:focus-visible { outline: 0; }
.is-root-container .os-qk-ai-labs-way__link a::before { content: none; }
@media (max-width: 1100px) {
	.os-qk-ai-labs-ways__list > .os-qk-ai-labs-way { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px 32px; align-items: start; }
	.os-qk-ai-labs-way > .os-qk-ai-labs-way__label { grid-column: 1 / -1; }
	.os-qk-ai-labs-way > .os-qk-ai-labs-way__link { grid-column: 2; justify-content: flex-start; }
}
@media (max-width: 768px) {
	.os-qk-ai-labs-ways__list > .os-qk-ai-labs-way { grid-template-columns: minmax(0, 1fr); padding: 24px 4px; }
	.os-qk-ai-labs-way > .os-qk-ai-labs-way__link { grid-column: auto; }
	.os-qk-ai-labs-way__name > .os-qk-ai-labs-way__title { font-size: 36px; }
	.os-qk-ai-labs-way > .os-qk-ai-labs-way__text { font-size: var(--wp--preset--font-size--medium); }
}

/* ---------- Evidence (os/qk-ai-labs-evidence) ---------- */
/* The Home OS Trust Stats band as it is (user, 2026-10-16: "our stats band only", "don't keep it
   in different boxes"): the section is an OS Blue Band, the figures one OS Metric Row (os-theme.css).
   Six cells: 6 across from 1341px, 3 + 3 below (a range such as "30–58%" at 48px doesn't fit a
   sixth of the row any narrower), 2 across ≤768 (Home lets its last cell go full width, built for 5).
   */
/* Cells as low as the About "Global Impact" strip (OS Service Results: 146px, 16px padding; user:
   "make the stats height narrower… keep the teal border on top"), mint top edge kept. */
.os-qk-ai-labs-evidence .os-metric { justify-content: flex-start; min-width: 0; height: auto; min-height: 146px; padding: 24px 16px 16px; }
/* This page only (user): the figures shrink to fit their cell — the widest ("40–50%") is about 4em,
   so 24% of the cell keeps it inside at every width; the cells are containers. */
.os-qk-ai-labs-evidence .os-metric { container-type: inline-size; }
.os-qk-ai-labs-evidence .os-metric > .os-metric__value { font-size: min(48px, 24cqi); }
@media (max-width: 1340px) {
	.os-qk-ai-labs-evidence .is-style-os-metrics { flex-wrap: wrap; }
	.os-qk-ai-labs-evidence .os-metric { flex: 1 1 33.333%; border-bottom: 3px solid rgb(255 255 255 / 0.18); }
	.os-qk-ai-labs-evidence .os-metric:nth-child(3n) { border-right: none; }
}
@media (max-width: 768px) {
	.os-qk-ai-labs-evidence .os-metric:nth-child(3n) { border-right: 1px solid rgb(255 255 255 / 0.18); }
	.os-qk-ai-labs-evidence .os-metric:nth-child(even) { border-right: none; }
	.os-qk-ai-labs-evidence .os-metric,
	.os-qk-ai-labs-evidence .os-metric:last-child { flex-basis: 50%; }
	.os-qk-ai-labs-evidence .os-metric { min-height: 0; padding: 16px 14px; }
}
@media (max-width: 768px) {
	.os-qk-ai-labs-evidence .os-metric > .os-metric__value { font-size: min(36px, 24cqi); }
}

/* ---------- Team (os/qk-ai-labs-expertise) ---------- */
/* Light: ice with brand / teal glows. Head left (5) | figure bento right (7): five tiles 2 across,
   the first wide on the blue gradient. Under a hairline, "Certified on" + OS Logo Chips. */
.os-qk-ai-labs-expertise {
	background:
		radial-gradient(circle 480px at 100% 0, rgb(23 72 232 / 0.09), rgb(23 72 232 / 0) 70%),
		radial-gradient(circle 420px at 0 100%, rgb(20 199 180 / 0.11), rgb(20 199 180 / 0) 70%),
		var(--wp--preset--color--ice);
}
.os-qk-ai-labs-team {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 64px;
	align-items: center;
}
.os-qk-ai-labs-team > * { margin: 0; }
.os-qk-ai-labs-team > .os-qk-ai-labs-proofs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.os-qk-ai-labs-proofs > .os-qk-ai-labs-proof {
	box-sizing: border-box;
	margin: 0;
	padding: 24px 28px;
	border: 1px solid var(--wp--custom--color--card-blue);
	border-radius: 20px;
	/* The light card gradient (the Run card's and the headline figures': on-brand + teal glow; user). */
	background:
		radial-gradient(ellipse 260px 180px at 0 100%, rgb(20 199 180 / 0.12), rgb(20 199 180 / 0) 70%),
		var(--wp--custom--color--on-brand);
	box-shadow: 0 8px 24px rgb(0 31 84 / 0.05);
}
.os-qk-ai-labs-proof > * { margin: 0; }
.os-qk-ai-labs-proof > .os-qk-ai-labs-proof__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--section);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--brand);
}
.os-qk-ai-labs-proof > .os-qk-ai-labs-proof__label {
	margin-top: 6px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.45;
	color: var(--wp--custom--color--tertiary);
}
.os-qk-ai-labs-proofs > .os-qk-ai-labs-proof:first-child {
	grid-column: 1 / -1;
	border: 0;
	background:
		radial-gradient(ellipse 360px 220px at 100% 0, rgb(20 199 180 / 0.28), rgb(20 199 180 / 0) 70%),
		linear-gradient(141.3deg, var(--wp--preset--color--brand) 0%, var(--wp--preset--color--navy-deep) 100%);
}
/* Same type sizes as the other figures (user, 2026-10-16), white on the blue card. */
.os-qk-ai-labs-proof:first-child > .os-qk-ai-labs-proof__value { color: var(--wp--preset--color--white); }
.os-qk-ai-labs-proof:first-child > .os-qk-ai-labs-proof__label { color: rgb(255 255 255 / 0.85); }
.os-qk-ai-labs-expertise > .os-qk-ai-labs-certified {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 20px;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--wp--preset--color--border);
}
.os-qk-ai-labs-certified > * { margin: 0; }
.os-qk-ai-labs-certified > .os-qk-ai-labs-certified__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--wp--custom--color--tertiary);
}
.os-qk-ai-labs-certified__logos.is-style-os-logo-chips > li { padding: 10px 16px; font-size: var(--wp--preset--font-size--small); }
@media (max-width: 1100px) {
	.os-qk-ai-labs-team { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 768px) {
	.os-qk-ai-labs-proof > .os-qk-ai-labs-proof__value { font-size: var(--wp--preset--font-size--xx-large); }
	.os-qk-ai-labs-proofs > .os-qk-ai-labs-proof { padding: 20px; }
	.os-qk-ai-labs-expertise > .os-qk-ai-labs-certified { display: block; margin-top: 32px; padding-top: 24px; }
	.os-qk-ai-labs-certified > .os-qk-ai-labs-certified__label { margin-bottom: 12px; text-align: center; }
}

/* ---------- Contact (os/qk-ai-labs-contact) ---------- */
/* "What happens next" in place of the decorative QK badge: a navy glass panel under the text with a
   small teal label and three numbered steps (ring counter, bold step over its line). */
.os-contact__intro > .os-qk-ai-labs-next {
	box-sizing: border-box;
	width: 100%;
	max-width: 516px;
	margin-top: 48px;
	padding: 24px 28px 28px;
	border: 1px solid rgb(255 255 255 / 0.12);
	border-radius: var(--wp--preset--border-radius--lg);
	background: linear-gradient(141.3deg, rgb(0 80 158 / 0.55) 0%, rgb(0 31 84 / 0.55) 100%);
}
.os-qk-ai-labs-next > * { margin: 0; }
.os-qk-ai-labs-next > .os-qk-ai-labs-next__label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--wp--preset--color--teal);
}
.os-qk-ai-labs-next > .os-qk-ai-labs-next__steps {
	margin-top: 16px;
	padding: 0;
	list-style: none;
	counter-reset: os-qk-next;
}
.os-qk-ai-labs-next__steps > li {
	position: relative;
	margin: 0;
	padding-left: 44px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: rgb(255 255 255 / 0.78);
	counter-increment: os-qk-next;
}
.os-qk-ai-labs-next__steps > li + li { margin-top: 16px; }
.os-qk-ai-labs-next__steps > li::before {
	content: counter(os-qk-next);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	border: 1px solid rgb(255 255 255 / 0.4);
	border-radius: 50%;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--white);
}
.os-qk-ai-labs-next__steps strong { font-size: var(--wp--preset--font-size--medium); font-weight: 600; color: var(--wp--preset--color--white); }
@media (max-width: 768px) {
	.os-contact__intro > .os-qk-ai-labs-next { margin-top: 32px; padding: 20px; }
}