/**
 * Agentiqk page (/platforms/agentiqk/, Platforms L1 Template, os/agentiqk-* patterns; content from
 * the client's mockup on UAT, uat.qktech.com/agentiqk/, 2026-10-17). Every section is one of the
 * site's own components (user, 2026-10-17: "use our design language", as on QK AI Labs):
 *   hero = the Techniqk banner (Industries banner, os-industry-list.css);
 *   results = the Techniqk results strip (os-service-detail.css, os-platforms-l1.css);
 *   journey = the hero's orbit as a dial with a guided tour (os-agentiqk.js builds the dial from the
 *     stage blocks);
 *   two paths = the Home / Platforms page platform cards (os-theme.css, os-platforms-l0.css);
 *   lifecycle = on OS Blue Band, the head held on the left beside stacking step cards;
 *   why = the Home Six Pillars cards (OS Pillar, os-partners.css offerings recipe);
 *   outcomes = the Home Client Success story cards on OS Blue Band (os-theme.css);
 *   contact = OS Service Contact.
 * Card text on the theme's type scale only (user, 2026-10-18: "are those design guideline font
 * sizes"; body 16px at every width as Techniqk's cards). Only fits and the journey and lifecycle
 * components live here (user, 2026-10-18: both final,
 * the other designs removed, both editable as blocks). Loads where a block with an "os-agentiqk" class renders
 * (os_interactive_styles); overrides of shared components are two classes deep or more.
 */

/* ---------- Blue band sections (lifecycle, outcomes) ---------- */
/* The Industries / Services section rhythm: 48px above and below (24 on phones), 32px from the
   head to the content (24 on phones); white head on the band. */
.os-agentiqk-sec { padding-top: 48px; padding-bottom: 48px; }
.os-agentiqk-sec > * { margin-block: 0; }
.os-agentiqk-sec > .os-industry-list__head + * { margin-top: 32px; }
.is-style-os-blue-band .os-industry-list__head > * { color: var(--wp--preset--color--white); }
.is-style-os-blue-band .os-industry-list__head > .is-style-os-eyebrow { color: var(--wp--custom--color--on-brand); }
.is-style-os-blue-band .os-industry-list__head > .is-style-os-lead { max-width: 920px; color: rgb(255 255 255 / 0.86); }
/* The paragraph under each H2 = the Techniqk page's (os-platforms-l1-journey__lead; user,
   2026-10-18: "body font size is not correct, check techniqk page and keep that"): Large (18px),
   regular, 1.6, ink-soft; Medium (16px) at 768px and below. The heads keep their OS Lead class
   (its 24px / 500 come from a :where() rule, so these win); on the blue band the lifecycle's
   stays white. */
:is(.os-agentiqk-journey, .os-agentiqk-paths, .os-agentiqk-why) .os-industry-list__head > .is-style-os-lead {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}
@media (max-width: 768px) {
	:is(.os-agentiqk-journey, .os-agentiqk-paths, .os-agentiqk-why) .os-industry-list__head > .is-style-os-lead { font-size: var(--wp--preset--font-size--medium); }
}
@media (max-width: 768px) {
	.os-agentiqk-sec { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-agentiqk-sec > .os-industry-list__head + * { margin-top: 24px; }
}

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

/* ---------- Results (os/agentiqk-results) ---------- */
/* The strip with no head above it; three short figures stay in one row down to 541px (the strip's
   tablet rule would leave 2 + 1). */
.os-agentiqk-results.os-service-detail-results > .os-service-detail-results__row:first-child { margin-top: 0; }
@media (min-width: 541px) and (max-width: 1100px) {
	.os-agentiqk-results > .os-service-detail-results__row.os-service-detail-results__row:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Journey (os/agentiqk-journey) ---------- */
/* The orbit dial (user, 2026-10-18: final, the other designs removed). Each stage is a group of
   blocks in the editor (icon, name, promise, description, "The edge"); os-agentiqk.js builds the
   dial from them. */
.os-agentiqk-journey .os-industry-list__head > .is-style-os-lead { max-width: 860px; }

/* "The edge" as the client has it (user: "The Edge is a highlight", equal weight to the stage):
   on the Home navy band, the OS Pillar card's faint ring, the label in teal with the site's
   sparkle, the line in white. */
.os-aq-edge {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 22px 24px;
	overflow: hidden;
	isolation: isolate;
	background: var(--wp--preset--gradient--navy-band);
}
.os-aq-edge::before {
	content: "";
	position: absolute;
	top: -60px;
	right: -70px;
	z-index: -1;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: rgb(31 140 255 / 0.14);
	pointer-events: none;
}
.os-aq-edge > * { margin: 0; }
.os-aq-edge > .os-aq-edge__label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 1.15px;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
}
.os-aq-edge__label::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("../images/ui/sparkle.svg") center / contain no-repeat;
	mask: url("../images/ui/sparkle.svg") center / contain no-repeat;
}
.os-aq-edge > .os-aq-edge__text {
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--white);
}
@keyframes os-aq-rise-up { from { opacity: 0; transform: translateY(18px); } }

/* The user's pick 2026-10-18 ("I like this one"; E kept for now, D removed by the user); motion made more premium,
   faster and smoother the same day. The hero's orbit as a dial: a dotted orbit
   that turns slowly, a ring with the seven stage tiles on it (tabs), a navy hub with the stage's
   name under its number; beside it the stage's card (name, promise, description) with "The edge" as its
   navy foot (the client's highlight: teal label, white line, same weight as the stage). A
   brand-blue arc runs clockwise from the top to the chosen stage.
   Motion (os-agentiqk.js; all of it off with reduced motion):
   - first time in view (is-seen): the ring draws, the hub settles, the tiles pop in round it;
   - guided tour (is-playing): a teal countdown ring round the chosen tile fills over 4.5s
     (--os-aq-t), then the arc sweeps on to the next stage in 0.55s and its card blurs in while the
     old one slides out; after the last stage the arc closes the circle, fades and starts again;
   - picking a stage stops the tour; hovering or focusing the dial pauses it (pause button too).
   The cards share one grid cell, so the box keeps the tallest card's height and nothing jumps. */
@property --os-aq-arc { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --os-aq-t { syntax: "<number>"; inherits: true; initial-value: 0; }
.os-aq-orbit {
	--os-aq-arc: calc(var(--os-aq-n) * 100 / var(--os-aq-total));
	--os-aq-t: 1;
	--os-aq-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--os-aq-sweep: cubic-bezier(0.65, 0, 0.35, 1);
	transition: --os-aq-arc 0.55s var(--os-aq-sweep);
}
.os-aq-orbit > * { margin: 0; }
/* Dial | card once os-agentiqk.js has built the dial (is-ready). */
.os-aq-orbit.is-ready {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}
.os-aq-orbit.is-arc-reset { transition: none; }
.os-aq-orbit.is-playing { animation: os-aq-tour 4.5s linear forwards; }
.os-aq-orbit.is-playing.is-paused { animation-play-state: paused; }
@keyframes os-aq-tour {
	from { --os-aq-t: 0; }
	to { --os-aq-t: 1; }
}

/* The dial. */
.os-aq-orbit__dial { position: relative; justify-self: center; width: min(100%, 500px); aspect-ratio: 1; }
.os-aq-orbit__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.os-aq-orbit__orbit { fill: none; stroke: rgb(0 80 158 / 0.18); stroke-width: 0.25; stroke-dasharray: 0.6 1.4; transform-box: fill-box; transform-origin: center; }
.os-aq-orbit__track { fill: none; stroke: var(--wp--preset--color--border); stroke-width: 0.5; stroke-dasharray: 100 100; }
.os-aq-orbit__arc {
	fill: none;
	stroke: var(--wp--preset--color--brand);
	stroke-width: 1.1;
	stroke-linecap: round;
	stroke-dasharray: calc(var(--os-aq-arc) * 1px) 200px;
	transition: opacity 0.25s ease;
}
.os-aq-orbit.is-arc-reset .os-aq-orbit__arc { opacity: 0; }

/* The hub. */
.os-aq-orbit__hub {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	width: 44%;
	aspect-ratio: 1;
	padding: 0 6% 12%;
	overflow: hidden;
	isolation: isolate;
	border-radius: 50%;
	background: var(--wp--preset--gradient--navy-band);
	box-shadow: 0 0 0 10px rgb(255 255 255 / 0.7), 0 24px 48px rgb(6 41 110 / 0.28);
	text-align: center;
	transform: translate(-50%, -50%);
}
.os-aq-orbit__hub::before { content: ""; position: absolute; top: -30%; right: -30%; z-index: -1; width: 80%; aspect-ratio: 1; border-radius: 50%; background: rgb(31 140 255 / 0.16); }
/* The stage's name leads (user: "more than numbers, the word is important"); the number is the
   small teal line over it. */
.os-aq-orbit__count { font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.2; letter-spacing: 1.15px; color: var(--wp--preset--color--teal); }
.os-aq-orbit__current { font-weight: 700; }
.os-aq-orbit__hub-name { max-width: 100%; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xx-large); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; color: var(--wp--preset--color--white); }

/* The stage tiles (tabs): navy band, white symbol (the QK AI Labs tiles); stages ahead of the
   chosen one greyed back. The chosen tile carries the teal ring: the tour's countdown while it
   plays, full otherwise. */
.os-aq-orbit__nodes { position: absolute; inset: 0; margin: 0; }
.os-aq-orbit__node {
	position: absolute;
	top: var(--y);
	left: var(--x);
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transform: translate(-50%, -50%);
}
.os-aq-orbit__dot {
	position: relative;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--gradient--navy-band);
	box-shadow: 0 0 0 5px var(--wp--preset--color--white), 0 10px 22px rgb(0 80 158 / 0.22);
	transition: scale 0.5s var(--os-aq-spring), box-shadow 0.35s var(--os-ease), filter 0.45s var(--os-ease);
}
.os-aq-orbit__dot img { display: block; width: 24px; height: 24px; }
.os-aq-orbit__dot::after {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	background: conic-gradient(var(--wp--preset--color--teal) calc(var(--os-aq-t) * 360deg), rgb(20 199 180 / 0.2) 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
	opacity: 0;
	scale: 0.8;
	transition: opacity 0.3s var(--os-ease), scale 0.45s var(--os-aq-spring);
}
.os-aq-orbit__node[aria-selected="true"] ~ .os-aq-orbit__node .os-aq-orbit__dot { filter: grayscale(1) opacity(0.45); }
.os-aq-orbit__node:hover .os-aq-orbit__dot { filter: none; scale: 1.08; }
.os-aq-orbit__node[aria-selected="true"] .os-aq-orbit__dot { scale: 1.16; box-shadow: 0 0 0 5px var(--wp--preset--color--white), 0 14px 28px rgb(0 80 158 / 0.3); }
.os-aq-orbit__node[aria-selected="true"] .os-aq-orbit__dot::after { opacity: 1; scale: 1; }
.os-aq-orbit__node:focus-visible { outline: none; }
.os-aq-orbit__node:focus-visible .os-aq-orbit__dot { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 14px; }
.os-aq-orbit__label {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--soft);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--wp--preset--color--ink-deep);
	transform: translateX(-50%);
	transition: color 0.3s var(--os-ease);
}
.os-aq-orbit__node[aria-selected="true"] .os-aq-orbit__label { color: var(--wp--preset--color--brand); }

/* Pause / play the tour: in the hub, under the name (two bars / a triangle, drawn in CSS). */
.os-aq-orbit__play {
	position: absolute;
	top: 61%;
	left: 50%;
	z-index: 1;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.4);
	border-radius: 50%;
	background: rgb(255 255 255 / 0.08);
	cursor: pointer;
	transform: translateX(-50%);
	transition: background-color var(--os-fast) var(--os-ease);
}
.os-aq-orbit__play:hover { background: rgb(255 255 255 / 0.2); }
.os-aq-orbit__play:focus-visible { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 3px; }
.os-aq-orbit__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 12px;
	background: linear-gradient(90deg, var(--wp--preset--color--white) 0 3px, transparent 3px 7px, var(--wp--preset--color--white) 7px);
	transform: translate(-50%, -50%);
}
.os-aq-orbit__play.is-stopped::before { width: 11px; margin-left: 1px; background: var(--wp--preset--color--white); clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* The stage cards: the white OS card (the news card's edge and shadow), the edge as its foot. */
.os-aq-orbit__panels { display: grid; }
.os-aq-orbit__panel > * { margin: 0; }
/* The stage's icon (an Image block): the dial's tile takes it on the page; in the editor and
   without JS it shows on its card as the navy tile. */
.os-aq-orbit__panel > .os-aq-orbit__icon {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 52px;
	height: 52px;
	margin: 32px 40px 0;
	border-radius: 50%;
	background: var(--wp--preset--gradient--navy-band);
}
.os-aq-orbit__panel > .os-aq-orbit__icon img { display: block; width: 24px !important; height: 24px !important; }
.os-aq-orbit.is-ready .os-aq-orbit__panel > .os-aq-orbit__icon { display: none; }
.os-aq-orbit__panels > .os-aq-orbit__panel + .os-aq-orbit__panel { margin-top: 16px; } /* without JS, every card shows */
.os-aq-orbit.is-ready .os-aq-orbit__panel { grid-area: 1 / 1; margin: 0; }
.os-aq-orbit__panel {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid var(--wp--custom--color--card-border);
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--soft);
}
.os-aq-orbit.is-ready .os-aq-orbit__panel:not(.is-active) { visibility: hidden; opacity: 0; }
.os-aq-orbit__panel:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 4px; }
.os-aq-orbit__body { flex: 1; padding: 36px 40px 30px; }
.os-aq-orbit__body > * { margin: 0; }
.os-aq-orbit__name { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--title); font-weight: 600; line-height: 1.25; color: var(--wp--preset--color--ink-deep); }
.os-aq-orbit__promise { margin-top: 8px; font-size: var(--wp--preset--font-size--large); font-weight: 600; line-height: 1.45; color: var(--wp--preset--color--brand); }
.os-aq-orbit__text { margin-top: 14px; font-size: var(--wp--preset--font-size--medium); line-height: 1.7; color: var(--wp--preset--color--ink); }

.os-aq-orbit__panel > .os-aq-edge { padding: 28px 40px 32px; }

@media (prefers-reduced-motion: no-preference) {
	/* The dotted orbit turns, slowly. */
	.os-aq-orbit__orbit { animation: os-aq-spin 90s linear infinite; }
	/* First time in view: the ring draws, the hub settles, the tiles pop in round the ring. */
	.os-js .os-aq-orbit.is-ready:not(.is-seen) :is(.os-aq-orbit__node, .os-aq-orbit__hub, .os-aq-orbit__play, .os-aq-orbit__arc, .os-aq-orbit__panels) { opacity: 0; }
	.os-js .os-aq-orbit.is-ready:not(.is-seen) .os-aq-orbit__track { stroke-dashoffset: 100; }
	.os-js .os-aq-orbit.is-seen .os-aq-orbit__track { animation: os-aq-draw 1s var(--os-ease) backwards; }
	.os-js .os-aq-orbit.is-seen .os-aq-orbit__hub { animation: os-aq-hub-in 0.7s var(--os-ease) 0.1s backwards; }
	.os-js .os-aq-orbit.is-seen .os-aq-orbit__node { animation: os-aq-node-in 0.55s var(--os-aq-spring) calc(var(--os-aq-i) * 70ms + 0.25s) backwards; }
	.os-js .os-aq-orbit.is-seen :is(.os-aq-orbit__arc, .os-aq-orbit__play) { animation: os-aq-fade 0.4s var(--os-ease) 0.75s backwards; }
	.os-js .os-aq-orbit.is-seen .os-aq-orbit__panels { animation: os-aq-in 0.6s var(--os-ease) 0.3s backwards; }
	/* A stage change: the old card slides out to the left, the new one blurs in from the right,
	   its lines one after another; the hub's number and name blur in too. */
	.os-aq-orbit.is-ready .os-aq-orbit__panel { transition: opacity 0.3s var(--os-ease), transform 0.3s var(--os-ease), visibility 0s linear 0.3s; }
	.os-aq-orbit.is-ready .os-aq-orbit__panel:not(.is-active) { transform: translateX(-20px); }
	.os-aq-orbit.is-ready .os-aq-orbit__panel.is-active { transition-delay: 0s; }
	.os-aq-orbit.is-changed .os-aq-orbit__panel.is-active { animation: os-aq-in 0.5s var(--os-ease) backwards; }
	.os-aq-orbit.is-changed .os-aq-orbit__panel.is-active .os-aq-orbit__body > * { animation: os-aq-line 0.5s var(--os-ease) backwards; }
	.os-aq-orbit.is-changed .os-aq-orbit__panel.is-active .os-aq-orbit__promise { animation-delay: 50ms; }
	.os-aq-orbit.is-changed .os-aq-orbit__panel.is-active .os-aq-orbit__text { animation-delay: 100ms; }
	.os-aq-orbit.is-changed .os-aq-orbit__panel.is-active .os-aq-edge > * { animation: os-aq-line 0.5s var(--os-ease) 150ms backwards; }
	.os-aq-orbit__hub.is-changing > * { animation: os-aq-line 0.45s var(--os-ease) backwards; }
	.os-aq-orbit__hub.is-changing > .os-aq-orbit__hub-name { animation-delay: 60ms; }
}
@keyframes os-aq-spin { to { transform: rotate(360deg); } }
@keyframes os-aq-draw { from { stroke-dashoffset: 100; } }
@keyframes os-aq-fade { from { opacity: 0; } }
@keyframes os-aq-hub-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.82); } }
@keyframes os-aq-node-in { from { opacity: 0; scale: 0.3; } }
@keyframes os-aq-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes os-aq-line { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }

@media (max-width: 1100px) {
	.os-aq-orbit.is-ready { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.os-aq-orbit__dial { width: min(100%, 460px); }
	.os-aq-orbit__panels { width: 100%; max-width: 720px; justify-self: center; }
}
@media (max-width: 640px) {
	.os-aq-orbit.is-ready { gap: 28px; }
	.os-aq-orbit__dial { width: min(100%, 320px); }
	.os-aq-orbit__label { display: none; } /* The hub names the stage; the ring is too small for seven labels. */
	.os-aq-orbit__dot { width: 44px; height: 44px; box-shadow: 0 0 0 4px var(--wp--preset--color--white), 0 8px 18px rgb(0 80 158 / 0.2); }
	.os-aq-orbit__dot::after { inset: -8px; }
	.os-aq-orbit__dot img { width: 20px; height: 20px; }
	.os-aq-orbit__node[aria-selected="true"] .os-aq-orbit__dot { box-shadow: 0 0 0 4px var(--wp--preset--color--white), 0 10px 22px rgb(0 80 158 / 0.3); }
	.os-aq-orbit__hub { width: 48%; box-shadow: 0 0 0 6px rgb(255 255 255 / 0.7), 0 16px 32px rgb(6 41 110 / 0.28); }
	.os-aq-orbit__count { font-size: var(--wp--preset--font-size--x-small); letter-spacing: 1px; }
	.os-aq-orbit__hub-name { font-size: var(--wp--preset--font-size--large); }
	.os-aq-orbit__play { top: 64%; width: 30px; height: 30px; }
	.os-aq-orbit__body { padding: 24px 20px 20px; }
	.os-aq-orbit__name { font-size: var(--wp--preset--font-size--x-large); }
	.os-aq-orbit__promise { font-size: var(--wp--preset--font-size--medium); }
	.os-aq-orbit__panel > .os-aq-edge { padding: 20px; }
	.os-aq-orbit__panel > .os-aq-edge .os-aq-edge__text { font-size: var(--wp--preset--font-size--large); }
}

/* ---------- Two paths (os/agentiqk-paths) ---------- */
/* The Platforms page family cards, two across (one below 901px), the name shown (no logo):
   kind, name, promise, three labelled rows between hairlines, the link at the foot. */
.os-industry-focus__row.os-agentiqk-paths__row { --os-focus-cols: 2; }
.os-agentiqk-path .os-platform-card > .os-agentiqk-path__kind { color: var(--wp--preset--color--brand); }
.os-agentiqk-path .os-platform-card > .os-agentiqk-path__name {
	margin-top: 10px;
	font-size: var(--wp--preset--font-size--title);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink-deep);
}
.os-agentiqk-path__name mark { font-size: var(--wp--preset--font-size--large); font-weight: 500; white-space: nowrap; }
.os-agentiqk-path .os-platform-card > .os-platform-card__text { margin-top: 8px; font-size: var(--wp--preset--font-size--medium) !important; }
.os-agentiqk-path .os-platform-card > .os-agentiqk-path__rows { align-self: stretch; margin-top: 24px; border-bottom: 1px solid var(--wp--preset--color--line); }
.os-agentiqk-path__rows > .os-agentiqk-path__row { margin: 0; padding: 18px 0; border-top: 1px solid var(--wp--preset--color--line); }
.os-agentiqk-path__row > * { margin: 0; }
.os-agentiqk-path__row > .os-agentiqk-path__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 1.15px;
	color: var(--wp--preset--color--brand);
}
.os-agentiqk-path__row > .os-agentiqk-path__text {
	margin-top: 6px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}
@media (max-width: 900px) {
	.os-industry-focus__row.os-agentiqk-paths__row { --os-focus-cols: 1; }
}
@media (max-width: 768px) {
	.os-agentiqk-path .os-platform-card > .os-agentiqk-path__name { font-size: var(--wp--preset--font-size--x-large); }
	.os-agentiqk-path__name mark { font-size: var(--wp--preset--font-size--small); }
	.os-agentiqk-path__rows > .os-agentiqk-path__row { padding: 14px 0; }
}

/* ---------- Lifecycle (os/agentiqk-lifecycle) ---------- */
/* The stacking cards (user, 2026-10-18: final, options A to D removed). Every step, the controls,
   the closing line and the button are blocks in the editor; the step numbers are counted by CSS. */
/* Left: the head (eyebrow, H2, lead), a quiet governance line (teal label, the four controls
   as small glass chips) and the green button, held under the header while the steps are read
   (with room only). Right: the steps as navy cards, open one under another (user, 2026-10-18:
   the scroll-based stacking removed, "keep it open … teal border highlight"): os-agentiqk.js
   marks the card at the middle of the window is-current, which takes a teal top border (the chips
   no longer flash on each step, user 2026-10-18); then the
   closing line. Below 1101px one column: head, cards, governance + button (the left column's
   display: contents). */
.os-agentiqk-lifecycle.is-style-os-blue-band { overflow: clip; }
/* The band without its orbit circles, and its gradient over the full height: the band's own stops
   at 782px, which showed as a line midway down this tall section (user, 2026-10-18). */
.os-agentiqk-lifecycle.is-style-os-blue-band::before,
.os-agentiqk-lifecycle.is-style-os-blue-band::after { content: none; }
.os-agentiqk-lifecycle.is-style-os-blue-band {
	background:
		var(--os-band-glow) var(--os-band-glow-x) var(--os-band-glow-y) / var(--os-band-glow-size) no-repeat,
		linear-gradient(to bottom, #00509e 0%, #001f54 100%) !important;
}
.os-aq-stack {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 72px;
	align-items: start;
}
.os-aq-stack > *, .os-aq-stack > * > *, .os-aq-stack__head > * { margin: 0; }
@media (min-width: 1101px) and (min-height: 700px) {
	.os-aq-stack > .os-aq-stack__aside { position: sticky; top: calc(var(--os-header-offset) + 40px); }
	.is-root-container .os-aq-stack > .os-aq-stack__aside { position: static; }
}
.os-aq-stack__head > .is-style-os-eyebrow { color: var(--wp--custom--color--on-brand); }
.os-aq-stack__head > .os-aq-stack__title {
	margin-top: var(--wp--custom--section-head-gap);
	font-size: var(--wp--preset--font-size--section);
	color: var(--wp--preset--color--white);
}
.os-aq-stack__head > .os-aq-stack__lead {
	margin-top: 20px;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.6;
	color: rgb(255 255 255 / 0.86);
}
/* Governance, kept quiet: a hairline, a small white label with its shield, four chips. */
.os-aq-stack__aside > .os-aq-stack__foot { margin-top: 32px; }
.os-aq-stack__foot > * { margin: 0; }
.os-aq-stack__govern { padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 0.14); }
.os-aq-stack__govern > * { margin: 0; }
.os-aq-stack__govern > .os-aq-stack__govern-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 1.15px;
	text-transform: uppercase;
	color: var(--wp--preset--color--white); /* user, 2026-10-18: label + icon white */
}
.os-aq-stack__govern-title::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("../images/agentiqk/stages/shield.svg") center / contain no-repeat;
	mask: url("../images/agentiqk/stages/shield.svg") center / contain no-repeat;
}
.os-aq-stack__govern > .os-aq-stack__controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 0; list-style: none; }
.os-aq-stack__controls > li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 7px 14px 7px 10px;
	border: 1px solid rgb(255 255 255 / 0.14);
	border-radius: 999px;
	background: rgb(255 255 255 / 0.06);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.35;
	color: rgb(255 255 255 / 0.9);
}
.os-aq-stack__controls > li > div { display: flex; align-items: center; gap: 8px; } /* the editor's text wrapper */
.os-aq-stack__controls > li img { display: block; flex: none; width: 16px !important; height: 16px; opacity: 0.85; }
.os-aq-stack__foot > .os-aq-stack__cta { margin-top: 28px; }
/* The cards: the navy band gradient (opaque, so the stack reads cleanly), the pillar card's blue edge. */
.os-aq-stack__deck > * { margin: 0; }
.os-aq-stack__cards { margin: 0; padding: 0; counter-reset: os-aq-step; }
.os-aq-stack__cards > .os-aq-stack__slot { margin: 0; }
.os-aq-stack__cards > .os-aq-stack__slot + .os-aq-stack__slot { margin-top: 24px; }
.os-aq-stack__slot > .os-aq-stack__card {
	position: relative;
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	box-sizing: border-box;
	margin: 0;
	padding: 28px 32px;
	border: 1px solid rgb(89 178 255 / 0.28);
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--gradient--navy-band);
	box-shadow: 0 24px 48px rgb(0 10 40 / 0.3);
	counter-increment: os-aq-step;
	transition: border-color 0.4s var(--os-ease), box-shadow 0.4s var(--os-ease);
}
.os-aq-stack__card > * { grid-column: 2; margin: 0; }
/* The step at the middle of the window: a teal top border only, no glow (user, 2026-10-18): the
   top edge teal and a 2px inset line under it (3px in all, following the corners; the border
   keeps 1px, so nothing moves). */
.os-aq-stack__slot > .os-aq-stack__card.is-current {
	border-top-color: var(--wp--preset--color--teal);
	box-shadow: inset 0 2px 0 var(--wp--preset--color--teal), 0 24px 48px rgb(0 10 40 / 0.3);
}
/* The step number on the left, counted (so it follows when steps are added or moved in the
   editor), the name, text and gate beside it (user, 2026-10-18: "on the left with only numbers
   rather than 1/5"; white, weight 400); the gate sits at the foot of the equal-height cards. */
.os-aq-stack__card > .os-aq-stack__name { position: relative; }
/* Placed from the H3 itself (the number column's width to its left), so it sits the same in the
   editor, where every block is positioned. */
.os-aq-stack__card > .os-aq-stack__name::before {
	content: counter(os-aq-step, decimal-leading-zero);
	position: absolute;
	top: -4px;
	left: -80px;
	z-index: 1;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--wp--preset--color--white);
}
.os-aq-stack__card > .os-aq-stack__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--white);
}
.os-aq-stack__card > .os-aq-stack__text {
	margin-top: 10px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--white);
}
/* The gate: a glass pill at the card's foot, white text (user, 2026-10-18: "all the text colour
   inside the card only white"; the "Gate" label and tick removed, still read out). */
.os-aq-stack__card > .os-aq-stack__gate {
	align-self: end;
	justify-self: start;
	margin-top: 16px;
	padding: 6px 12px;
	border: 1px solid rgb(255 255 255 / 0.14);
	border-radius: 999px;
	background: rgb(255 255 255 / 0.06);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--white);
}
.os-aq-stack__gate::before { content: "" / "Gate: "; }
/* The arrows centred on the words (os-agentiqk.js wraps them; user, 2026-10-18): the font's arrow
   sits on the baseline, 4px tall at 14px against an 8px x-height and 10px capitals. */
.os-aq-stack__arrow { display: inline-block; transform: translateY(-0.17em); }
/* The closing line after the steps: small, a navy shield tile beside it. */
.os-aq-stack .os-aq-stack__note {
	position: relative;
	min-height: 36px;
	margin-top: 32px;
	padding-left: 50px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: rgb(255 255 255 / 0.78);
}
.os-aq-stack__note::before,
.os-aq-stack__note::after { content: ""; position: absolute; }
.os-aq-stack__note::before {
	top: 0;
	left: 0;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	border: 1px solid rgb(20 199 180 / 0.45);
	border-radius: var(--wp--preset--border-radius--md);
	background: var(--wp--preset--gradient--navy-band);
}
.os-aq-stack__note::after {
	top: 9px;
	left: 9px;
	width: 18px;
	height: 18px;
	background: var(--wp--preset--color--white);
	-webkit-mask: url("../images/agentiqk/stages/shield.svg") center / contain no-repeat;
	mask: url("../images/agentiqk/stages/shield.svg") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
	.os-js .os-aq-stack__slot:not(.is-in) { opacity: 0; }
	.os-js .os-aq-stack__slot.is-in { animation: os-aq-rise-up 0.7s var(--os-ease) backwards; }
}
@media (max-width: 1280px) {
	.os-aq-stack { gap: 48px; }
}
@media (max-width: 1100px) {
	.os-aq-stack { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.os-aq-stack > .os-aq-stack__aside { display: contents; }
	.os-aq-stack__head > .os-aq-stack__lead { max-width: 820px; }
	.os-aq-stack > .os-aq-stack__deck { margin-top: 40px; }
	.os-aq-stack__aside > .os-aq-stack__foot { order: 3; margin-top: 40px; }
}
@media (max-width: 768px) {
	.os-aq-stack__head > .os-aq-stack__lead { margin-top: 16px; font-size: var(--wp--preset--font-size--medium); }
	.os-aq-stack > .os-aq-stack__deck { margin-top: 28px; }
	.os-aq-stack__slot > .os-aq-stack__card { grid-template-columns: 48px minmax(0, 1fr); padding: 20px 18px; }
	.os-aq-stack__cards > .os-aq-stack__slot + .os-aq-stack__slot { margin-top: 16px; }
	.os-aq-stack__card > .os-aq-stack__name::before { top: -1px; left: -48px; font-size: var(--wp--preset--font-size--title); }
	.os-aq-stack__card > .os-aq-stack__name { font-size: var(--wp--preset--font-size--x-large); }
	.os-aq-stack__card > .os-aq-stack__gate { margin-top: 14px; }
	.os-aq-stack .os-aq-stack__note { margin-top: 20px; }
	.os-aq-stack__aside > .os-aq-stack__foot { margin-top: 32px; }
}

/* ---------- Why (os/agentiqk-why) ---------- */
/* Home Six Pillars cards in the Partners offerings section, 3 across, a compact OS Carousel at
   1100px and below (os-carousel.css: equal heights, progress bar + arrows); here the
   badge under the lead, a promise line in teal, a button after them (the label over the cards
   removed, user 2026-10-18). */
/* The eyebrow as the Techniqk page's Why heading (os-platforms-l1.css; user, 2026-10-18: the
   logo in the eyebrow only, the section has its own H2): "Why" + the logo, an inline image sized
   to the eyebrow's letters and sat on its baseline, dark on this white section. */
.os-agentiqk-why .os-industry-list__head > .os-agentiqk-why__eyebrow .os-agentiqk-why__logo {
	display: inline-block;
	width: auto;
	height: 1.6em;
	vertical-align: var(--os-aq-logo-y, -0.42em);
}
/* The Everest Group recognition as a highlight, not a tag (user, 2026-10-17): the Home award
   card's line on a white card (the news card's edge and hover) with the TechnIQk hairline on top
   (the post table of contents / Key Facts accent), centred on phones; its logo removed (user,
   2026-10-18). */
.os-agentiqk-why .os-industry-list__head > .os-agentiqk-award {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	margin-top: 28px;
	padding: 18px 28px;
	overflow: hidden;
	border: 1px solid var(--wp--custom--color--card-border);
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--soft);
	transition: border-color var(--os-fast) var(--os-ease), box-shadow var(--os-base) var(--os-ease);
}
.os-agentiqk-award::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	background: var(--wp--preset--gradient--techniqk);
}
.os-agentiqk-award:hover { border-color: #9fb8d8; box-shadow: 0 12px 28px rgb(0 80 158 / 0.08); }
.os-agentiqk-award > * { margin: 0; }
.os-agentiqk-award > .os-agentiqk-award__text {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	color: var(--wp--preset--color--ink-deep);
}
.os-agentiqk-award__text strong { font-weight: 700; color: var(--wp--preset--color--brand); }
@media (max-width: 640px) {
	.os-agentiqk-why .os-industry-list__head > .os-agentiqk-award { flex-direction: column; gap: 12px; padding: 20px 24px; }
	.os-agentiqk-award > .os-agentiqk-award__text { font-size: var(--wp--preset--font-size--medium); text-align: center; }
}
.os-partners-strategic.os-agentiqk-why > .os-partners-grid { margin-top: 40px; }
/* 3 across here (Partners has 2): the text takes 62% of the card (the Partners tablet width) so a
   card at 1101-1280px, or in the editor, keeps a readable line beside the illustration; and the
   editor's block gap stays off the 2nd and 3rd cards (user, 2026-10-18: "check the admin"). */
.os-agentiqk-why .os-partners-grid > .os-agentiqk-layer { margin-block: 0; }
.os-agentiqk-layer.is-style-os-pillar > :is(.wp-block-heading, p) { max-width: 62%; }
.os-agentiqk-layer.is-style-os-pillar > .os-agentiqk-layer__promise {
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.45;
	color: var(--wp--preset--color--teal);
}
.os-agentiqk-why > :is(.os-agentiqk-why__actions, .os-carousel__controls + .os-agentiqk-why__actions) { justify-content: center; margin-top: 32px; }
@media (max-width: 768px) {
	.os-partners-strategic.os-agentiqk-why > .os-partners-grid { margin-top: 28px; }
	.os-agentiqk-why > .os-agentiqk-why__actions { margin-top: 24px; }
}

/* ---------- Outcomes (os/agentiqk-outcomes) ---------- */
/* Home Client Success story cards, 3 across, a compact OS Carousel at 1100px and below, in their
   phone layout at every width (figure over the text: the figures are words as well as numbers);
   no link, so no chevron and no slide. */
.os-agentiqk-outcomes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.os-agentiqk-outcomes__grid > .os-story {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "stat" "body";
	align-content: start;
	row-gap: 12px;
	min-height: 0;
	padding: 28px;
}
.os-agentiqk-outcomes__grid > .os-story::after { content: none; }
.os-agentiqk-outcomes__grid > .os-story:hover { transform: translateY(-4px); }
.os-agentiqk-outcomes__grid .os-story__stat { grid-area: stat; }
.os-agentiqk-outcomes__grid .os-story__body { grid-area: body; max-width: none; }
.os-agentiqk-outcomes__grid .os-story__tags.is-style-os-tags li { white-space: normal; }
@media (prefers-reduced-motion: reduce) {
	.os-agentiqk-outcomes__grid > .os-story:hover { transform: none; }
}
@media (max-width: 768px) {
	.os-agentiqk-outcomes__grid > .os-story { padding: 22px 20px; }
}
/* The carousel controls on the blue band: the next arrow as a white disc (its black disc
   inverted), the progress bar in teal, the track a white hairline. */
.os-agentiqk-outcomes .os-carousel__arrows button:not(:disabled) { filter: invert(1); }
.os-agentiqk-outcomes .os-carousel__progress::before { background: rgb(255 255 255 / 0.24); }
.os-agentiqk-outcomes .os-carousel__progress > .os-carousel__bar { background: var(--wp--preset--color--teal); }
.os-agentiqk-outcomes .os-carousel__arrows button:focus-visible { outline-color: var(--wp--preset--color--white); }

/* Carousel cards (pillars, stories) at 1100px and below: shown at once, so the next card peeks in
   (a scroll reveal waits for 15% of a card, which a peeking card never shows). */
@media (max-width: 1100px) {
	:is(.os-agentiqk-why, .os-agentiqk-outcomes) .os-carousel--compact > .os-reveal { opacity: 1; transform: none; animation: none; }
}