/**
 * Orbital Sling — behaviour theme.json can't express.
 * Colours, type, spacing and radii come from theme.json presets; keep this file small.
 */

/* Responsive design tokens — the client's breakpoints (1200 / 768px).
   theme.json holds each token's desktop value; here the same CSS variables step
   down, so every block using a token follows. Edit values here, not per block. */
@media (max-width: 1200px) {
	body { --wp--custom--gutter: 48px; }
}
@media (max-width: 768px) {
	body {
		--wp--custom--gutter: 20px;
		--wp--preset--font-size--eyebrow: 16px;
		--wp--preset--font-size--section: 28px;
		--wp--preset--spacing--80: 56px;
		--wp--preset--spacing--90: 40px; /* section spacing on mobile */
		--wp--custom--section-head-gap: 10px;
	}
}

/* Motion tokens — one easing curve and duration family for every transition, so the
   whole site moves the same way. */
:root {
	--os-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--os-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
	--os-fast: 0.25s;
	--os-base: 0.45s;
	--os-slow: 0.8s;
}

/* Sticky header offset: where the header sticks (below the admin bar, which scrolls away
   on phones ≤600px) plus its height, measured by os-motion.js (--os-header-h; theme.json
   header-height without JS). Anything that must clear the header uses --os-header-offset. */
:root {
	--os-sticky-top: var(--wp-admin--admin-bar--height, 0px);
	--os-header-offset: calc(var(--os-sticky-top) + var(--os-header-h, var(--wp--custom--header-height)));
}
@media (max-width: 600px) {
	:root { --os-sticky-top: 0px; }
}

/* Smooth in-page scrolling: # links stop 16px below the sticky header. */
html { scroll-padding-top: calc(var(--os-header-offset) + 16px); }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Scroll reveal (assets/js/os-motion.js): add the os-reveal class to any block. Uses an
   animation with backwards fill, so it never fights the block's own hover transitions. */
@media (prefers-reduced-motion: no-preference) {
	.os-js .os-reveal:not(.is-visible) { opacity: 0; transform: translateY(24px); }
	.os-js .os-reveal.is-visible { animation: os-reveal var(--os-slow) var(--os-ease) var(--os-reveal-delay, 0ms) backwards; }
}
@keyframes os-reveal {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}

/* Header: soft shadow once the page scrolls (client .nav.is-scrolled). */
.os-header { transition: box-shadow var(--os-base) var(--os-ease); }
.os-header.is-scrolled { box-shadow: 0 6px 24px rgb(10 11 13 / 0.06); }

/* Buttons: no inline line box around the link (keeps button heights exact), and a sliding
   top-right arrow on every style. */
.wp-block-buttons > .wp-block-button { display: flex; }
.wp-block-button:not(.is-style-os-explore) > .wp-block-button__link { min-height: 44px; }
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	white-space: nowrap;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition),
		border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.wp-block-button__link::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../images/arrow-tr.svg") center / 10px no-repeat;
	mask: url("../images/arrow-tr.svg") center / 10px no-repeat;
}

.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after {
	animation: os-arrow-out-in 0.45s ease;
}

@keyframes os-arrow-out-in {
	0%   { -webkit-mask-position: center; mask-position: center; }
	45%  { -webkit-mask-position: 20px -20px; mask-position: 20px -20px; }
	46%  { -webkit-mask-position: -20px 20px; mask-position: -20px 20px; }
	100% { -webkit-mask-position: center; mask-position: center; }
}

/* Variation hovers (variation JSON can't target the block's own :hover). */
.wp-block-button.is-style-os-secondary .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
	box-shadow: none;
}

.wp-block-button.is-style-os-green .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--green-dark);
	box-shadow: 0 8px 20px rgba(1, 158, 132, 0.3);
}

.wp-block-button.is-style-os-explore .wp-block-button__link {
	gap: 0.375rem;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size var(--os-base) var(--os-ease);
}

.wp-block-button.is-style-os-explore .wp-block-button__link:hover {
	background-color: transparent;
	background-size: 100% 1px;
	box-shadow: none;
}

/* Read More: OS Explore Link ("Know more" on Query Loop cards: blog listing, Home QKVerse). Was in
   os-blog.css, which Home doesn't load. */
.wp-block-read-more.is-style-os-explore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	white-space: nowrap;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size var(--os-base) var(--os-ease);
}
.wp-block-read-more.is-style-os-explore::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../images/arrow-tr.svg") center / 10px no-repeat;
	mask: url("../images/arrow-tr.svg") center / 10px no-repeat;
}
.wp-block-read-more.is-style-os-explore:hover::after,
.wp-block-read-more.is-style-os-explore:focus-visible::after { animation: os-arrow-out-in 0.45s ease; }
.wp-block-read-more.is-style-os-explore:hover { background-size: 100% 1px; }

/* Card: lift on hover. */
.is-style-os-card {
	transition: transform var(--os-base) var(--os-ease), box-shadow var(--os-base) var(--os-ease);
}
.is-style-os-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--wp--preset--shadow--lift);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link:hover::after,
	.wp-block-button__link:focus-visible::after { animation: none; }
	.is-style-os-card:hover { transform: none; }
}

/* Header, main and footer sit flush (no root block gap between template parts). */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Utility: hide on phones (for items that move into the mobile menu). */
@media (max-width: 768px) {
	.os-hide-mobile { display: none !important; }
}

/* Sticky header: the template part's <header> sticks, not the OS Header group inside it
   (a sticky box only moves within its parent, and the wrapper is exactly the group's height).
   z-index keeps it above positioned page content and the back-to-top button. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--os-sticky-top);
	z-index: 50;
}

/* Header: flat white bar, no glass (user, 2026-10-06). */
.os-header {
	z-index: 50;
	background-color: var(--wp--preset--color--white);
}
.os-header__logo { margin: 0; flex-shrink: 0; }
@media (max-width: 768px) {
	.os-header__logo img { width: 112px !important; }
}

/* Keep the header link colour neutral (global links are brand blue + underlined). */
.os-header__nav a { color: var(--wp--preset--color--ink-soft); text-decoration: none; }
.os-header__nav a:hover { color: var(--wp--preset--color--brand); }

/* Switch the primary menu to the hamburger below 1340px instead of core's 600px: nine items
   with mega menu carets need ~800px, which 1280 laptops don't have (CN-4). 1366 laptops keep
   the desktop menu even with a Windows scrollbar (1349px viewport). Keep in step with
   os-mega-menu.css/js. */
@media (max-width: 1339px) {
	.os-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.os-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* Search button: bare Figma icon (no outline, no hover change), 38px hit area. */
.os-header__search .wp-block-search__button {
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--ink);
}
.os-header__search .wp-block-search__button:hover { color: var(--wp--preset--color--ink); background: transparent; box-shadow: none; transform: none; }
.os-header__search .wp-block-search__button svg { width: 28px; height: 28px; min-width: 0; margin: 0; fill: none; }

/* Footer: client layout at 1440 / ≤1100 / ≤768. */
.os-footer a { color: var(--wp--preset--color--ink); text-decoration: none; transition: color var(--os-fast) var(--os-ease); }
.os-footer a:hover { color: var(--wp--preset--color--brand); }
.os-footer > * { margin-block: 0 !important; }
.os-footer__cols {
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	gap: 26px;
	padding-bottom: 44px;
}
.os-footer__col > h2 { margin: 0; padding-bottom: 18px; }
/* Reliability OS and QK AI Labs: own items under the Platforms list, in the column-head style (user, 2026-10-18). */
.os-footer__col > * + .os-footer__head-link { margin-top: 32px; }
.os-footer__col > .os-footer__head-link + .os-footer__head-link { margin-top: 0; }
.os-footer .os-footer__head-link a { color: inherit; }
.os-footer .os-footer__head-link a:hover { color: var(--wp--preset--color--ink); }
.os-footer__links { margin: 0; padding: 0; list-style: none; }
.os-footer__links li { margin: 0; }
.os-footer__links a { display: inline-block; padding: 4px 0; font-size: 14px; font-weight: 500; line-height: normal; }
.os-footer__links.is-strong a { padding: 12px 0 4px; font-weight: 600; }
.os-footer__links.is-strong li:first-child a { padding-top: 4px; }
.os-footer__brand { align-items: center; padding-top: 24px; border-top: 1px solid #e4e6ea; }
.os-footer__logo { margin: 0; }
.os-footer__social { gap: 10px !important; }
.os-footer__social .wp-social-link { margin: 0; border: 1px solid var(--wp--preset--color--border); transition: border-color var(--os-fast) var(--os-ease); }
.os-footer__social .wp-social-link:hover { border-color: var(--wp--preset--color--brand); transform: none; }
.os-footer__social .wp-social-link a { width: 34px; height: 34px; padding: 0; box-sizing: border-box; justify-content: center; align-items: center; }
.os-footer__social .wp-social-link svg { width: 15px; height: 15px; }
.os-footer__legal-row { gap: 16px; padding-top: 20px; line-height: normal; }
.os-footer__legal-row > * { margin: 0; }
.os-footer__legal { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-weight: 500; }
.os-footer__legal li + li::before { content: "/"; margin-right: 6px; color: #4e5055; }
/* 24px-tall tap targets without changing the layout. */
.os-footer__legal a { position: relative; z-index: 1; display: inline-block; padding: 4px 0; margin: -4px 0; }
/* Copyright over the certifications on the left; the legal links line up with the bottom line. */
.os-footer__notice > * { margin: 0; }
.os-footer__certs { padding-top: 12px; line-height: normal; }
@media (max-width: 1100px) {
	.os-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 40px; }
}
@media (max-width: 768px) {
	.os-footer { padding-top: 48px !important; }
	.os-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 20px; padding-bottom: 36px; }
	.os-footer__legal-row { flex-direction: column; align-items: flex-start; }
}

/* Six Pillars section: client layout at 1440 / ≤1100 / ≤768. */
.os-pillars { min-height: 884px; }
.os-pillars__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 28px;
	margin-top: 60px;
}
@media (max-width: 1100px) {
	.os-pillars { min-height: 0; padding-bottom: 100px !important; }
	.os-pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px; }
}
@media (max-width: 768px) {
	.os-pillars { padding-bottom: var(--wp--preset--spacing--90) !important; }
	.os-pillars__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; margin-top: 36px; }
}

/* Client Logos section: 371px on desktop; client paddings at ≤1100 / ≤768. */
.os-clients { min-height: 371px; }
@media (max-width: 1100px) {
	.os-clients { min-height: 0; padding-bottom: 80px !important; }
}
@media (max-width: 768px) {
	.os-clients { padding-top: 0 !important; padding-bottom: var(--wp--preset--spacing--90) !important; }
}

/* OS Pillar Card: fixed 246px card, ring top-right, icon centred at (right 68px, top 88px),
   "Explore" link pinned 194px from the top (30px from the bottom on phones). */
.is-style-os-pillar {
	position: relative;
	height: 246px;
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--os-base) var(--os-ease), box-shadow var(--os-base) var(--os-ease), border-color var(--os-fast) var(--os-ease);
}
.is-style-os-pillar::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;
}
.is-style-os-pillar > .wp-block-heading { max-width: 260px; }
.is-style-os-pillar > p { max-width: 212px; }
.is-style-os-pillar > .wp-block-image {
	position: absolute;
	top: 88px;
	right: 68px;
	margin: 0;
	transform: translate(50%, -50%);
	pointer-events: none;
}
.is-style-os-pillar > .wp-block-image img { transition: transform var(--os-base) var(--os-ease); }
.is-style-os-pillar > .wp-block-buttons { position: absolute; left: 31px; top: 194px; margin: 0; }
.is-style-os-pillar:hover {
	transform: translateY(-4px);
	border-color: rgb(89 178 255 / 0.6) !important;
	box-shadow: 0 18px 40px rgb(6 41 110 / 0.28);
}
.is-style-os-pillar:hover .wp-block-image img { transform: translateY(-4px) scale(1.04); }
.is-style-os-pillar:hover .is-style-os-explore .wp-block-button__link { background-size: 100% 1px; }
.is-style-os-pillar:hover .wp-block-button__link::after { animation: os-arrow-out-in 0.45s ease; }
@media (max-width: 768px) {
	.is-style-os-pillar { height: auto; min-height: 236px; padding-bottom: 72px !important; }
	.is-style-os-pillar > .wp-block-heading,
	.is-style-os-pillar > p { max-width: 62%; }
	.is-style-os-pillar > .wp-block-buttons { top: auto; bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
	.is-style-os-pillar:hover,
	.is-style-os-pillar:hover .wp-block-image img { transform: none; }
	.is-style-os-pillar:hover .wp-block-button__link::after { animation: none; }
}

/* Hero (matches the prototype): each slide is text on the left and its own media on the
   right (the animated SVG drawing, an image or a video); dots centred under both. */
.os-hero {
	position: relative;
	overflow-x: clip;
	/* Height of the media area; short desktop windows shrink it (see max-height below). */
	--os-hero-media-h: 520px;
	/* Slide 1 image width: 133.8% of the media column, but never taller than 90% of the
	   media area. Its stat cards are placed from this width, so they move with it. */
	--os-hero-core-w: min(133.8cqw, var(--os-hero-media-h) * 1.8);
	/* The point the slide 1 image is centred on (238px down a 520px area). */
	--os-hero-core-y: calc(var(--os-hero-media-h) * 0.4577);
}
/* The prototype hero is 1280px wide (the rest of the site is 1272px). */
.os-hero > .os-hero__slides.alignwide { max-width: 1280px; }
.os-hero .os-slider__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	margin: 0;
	gap: 0;
}
.os-hero__copy { min-height: 280px; }
.os-hero__lead { max-width: 480px; font-size: 18px !important; }

/* 520px-tall media area. */
.os-hero__visual {
	position: relative;
	display: flex;
	align-items: flex-start;
	height: var(--os-hero-media-h);
	container-type: inline-size;
}
/* Slide 1 (as the client): the image is wider than the column (2:1, 133.8% wide), reaches
   40px past the slider on the right and stays centred 238px down the media area; the stat
   cards sit at the client's points on it (the lower one is anchored right so it never
   leaves the screen on narrow desktops). cqw = % of the column width; the offsets are
   fractions of the image width so a smaller image keeps the cards on the same points. */
.os-hero .os-hero__core {
	position: absolute;
	top: calc(var(--os-hero-core-y) - var(--os-hero-core-w) / 4);
	right: -6.79%;
	width: var(--os-hero-core-w);
	max-width: none;
	margin: 0;
}
.os-hero__core img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 2 / 1;
	object-fit: contain;
}
/* Any other image is fitted whole into the media area and floats gently (as the client's). */
.os-hero__visual > .wp-block-image:not(.os-hero__core) {
	align-self: stretch;
	width: 100%;
	margin: 0;
}
.os-hero__visual > .wp-block-image:not(.os-hero__core) img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}
/* Videos play in a square-cornered 3:2 frame (the shape of the slide 4 photo, so both are the
   same width), cropped to fill it; the poster shows until they play. */
.os-hero__visual > .wp-block-video {
	align-self: center;
	width: min(100%, var(--os-hero-media-h) * 1.5);
	margin: 0 auto;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--float);
}
.os-hero__visual > .wp-block-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Embeds (YouTube, Vimeo) keep their own 16:9 frame, as wide as the column allows. Their iframe
   is absolutely placed, so without a width the figure shrinks to nothing in the flex column. */
.os-hero__visual > .wp-block-embed {
	align-self: center;
	width: min(100%, var(--os-hero-media-h) * 16 / 9);
	margin: 0 auto;
	box-shadow: var(--wp--preset--shadow--float);
}

/* Glass stat cards (client: 72% white, 6px blur, sized to their text). */
.os-float {
	position: absolute;
	z-index: 1;
	margin: 0 !important;
	white-space: nowrap;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.os-float--top {
	top: calc(var(--os-hero-core-y) - var(--os-hero-core-w) * 0.288);
	left: calc(106.79cqw - var(--os-hero-core-w) * 0.7981);
}
.os-float--bottom {
	top: calc(var(--os-hero-core-y) + var(--os-hero-core-w) * 0.1775);
	right: calc(var(--os-hero-core-w) * 0.066 - 6.79cqw);
}
@media (prefers-reduced-motion: no-preference) {
	.os-float { animation: os-bob 6s ease-in-out infinite; }
	.os-float--bottom { animation-delay: 1.4s; }
	.os-hero__visual > .wp-block-image img { animation: os-drift 6s ease-in-out infinite; }
}
@keyframes os-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
@keyframes os-drift {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* OS Split Title (heading style): the highlighted first line is set larger than the rest. */
.is-style-os-split-title mark {
	display: inline-block;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.3;
}

/* OS Split Title, compact: add the class `os-split-title--compact` (Advanced → Additional CSS
   class) to set a long title smaller, in the same 2:3 ratio (Home hero slide 1, 26px / 39px
   instead of 32px / 48px, so its second line stays on one line). From 1101px to 1300px the
   hero's text column narrows with the window, so the size does too. Phones keep their sizes. */
@media (min-width: 881px) {
	.is-style-os-split-title.os-split-title--compact {
		--os-split-size: 26px;
		font-size: var(--os-split-size);
	}
	.is-style-os-split-title.os-split-title--compact mark { font-size: calc(var(--os-split-size) * 1.5); }
}
@media (min-width: 1101px) {
	.is-style-os-split-title.os-split-title--compact { --os-split-size: min(26px, 2vw); }
}

/* Short desktop windows (1920px at 150% on Windows is about 1280 x 590): the whole slider,
   dots included, fits under the 82px header. The top padding goes from 100px to 40px first,
   then the media area (and the text's bottom offset) shrink with the window, down to 360px. */
@media (min-width: 1101px) and (max-height: 769px) {
	.os-hero {
		--os-hero-pad-top: clamp(40px, 100svh - 670px, 100px);
		--os-hero-media-h: clamp(360px, 100svh - 150px - var(--os-hero-pad-top), 520px);
		padding-top: var(--os-hero-pad-top) !important;
	}
	.os-hero .os-hero__copy { padding-bottom: max(0px, var(--os-hero-media-h) - 400px) !important; }
}

/* At 1100px and below the hero stacks (as the client); the slide 1 image needs the full
   desktop width to sit beside the text. */
@media (max-width: 1100px) {
	.os-hero { padding-top: 56px !important; }
	/* As the client: text on top, media below. Every slide is as tall as the tallest (they
	   share one grid cell) and its media sits at the bottom, so the media and the dots stay
	   put when the slide changes. */
	.os-hero__slides > .wp-block-columns { flex-wrap: wrap !important; align-content: space-between; gap: 36px; }
	.os-hero__slides > .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
	.os-hero .os-hero__copy { min-height: 0; padding-bottom: 0 !important; }
	/* The client's 780:503 media box, full width up to 780px.
	   (.os-hero prefix beats core's `.is-layout-flex > :is(*, div) { margin: 0 }`.) */
	.os-hero .os-hero__visual {
		display: flex;
		justify-content: center;
		max-width: 780px;
		height: auto;
		aspect-ratio: 780 / 503;
		margin-inline: auto;
	}
	.os-hero .os-hero__core {
		top: 5.368%;
		right: auto;
		left: -5.641%;
		width: 101.026%;
	}
	.os-hero .os-hero__visual > .wp-block-video { width: auto; height: 100%; }
	.os-hero .os-hero__visual > .wp-block-embed { width: 100%; }
	.os-float--top { top: -0.596%; left: 14.744%; }
	.os-float--bottom { top: 72.366%; right: auto; left: 44.359%; }
	.os-hero__copy > .wp-block-group > * { max-width: 100% !important; }
	.os-hero__lead { max-width: 620px; }
}
@media (max-width: 880px) {
	.is-style-os-split-title { font-size: 26px; }
	.is-style-os-split-title mark { font-size: 36px; }
}
@media (max-width: 768px) {
	.os-float { padding: 10px 12px !important; gap: 4px; border-radius: 10px !important; }
	.os-float .os-float__label { font-size: 9px !important; letter-spacing: 0.4px !important; }
	.os-float .os-float__value { font-size: 16px !important; line-height: 20px !important; }
	.os-float--top { left: 4%; }
	.os-float--bottom { left: auto; right: 0; }
}
@media (max-width: 540px) {
	.is-style-os-split-title { font-size: 24px; }
	.is-style-os-split-title mark { font-size: 32px; }
}
@media (max-width: 420px) {
	.os-float--bottom .os-float__value { font-size: 14px !important; }
}

/* Utility: lift on hover (cards). */
.os-hover-lift { transition: transform var(--os-base) var(--os-ease), box-shadow var(--os-base) var(--os-ease); }
.os-hover-lift:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgb(23 72 232 / 0.12); }
.os-hover-lift:hover .is-style-os-explore .wp-block-button__link { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) {
	.os-hover-lift:hover { transform: none; }
}

/* Platforms section: client layout at 1440 / ≤1200 / ≤1100 / ≤768. */
.os-platforms { min-height: 820px; }
.os-platforms__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 24px;
	align-items: start;
	margin-top: 48px;
}
.os-platform-card {
	min-height: 348.22px;
	padding: 38.5px 42.5px 30px;
}
/* Hover, as the client: the gradient frame lifts 4px and the white card a further 8px,
   so the gradient shows as a glowing edge below it. Both layers animate together
   (the client's inner card snaps; here it eases). */
.os-platform-card { transition: transform var(--os-base) var(--os-ease), box-shadow var(--os-base) var(--os-ease); }
.os-platform:hover > .os-platform-card { transform: translateY(-8px); box-shadow: 0 32px 64px rgb(23 72 232 / 0.14); }
@media (prefers-reduced-motion: reduce) {
	.os-platform:hover > .os-platform-card { transform: none; }
}
/* The client sets the second card 2px lower and 2px taller. */
.os-platform:nth-child(2) { margin-top: 2px; }
.os-platform:nth-child(2) > .os-platform-card { min-height: 350.22px; }
.os-platform-card > * { margin-block: 0; }
.os-platform-card > .os-platform-card__logo { margin-top: 20px; }
.os-platform-card > .os-platform-card__tag { margin-top: 4px; white-space: nowrap; }
.os-platform-card > .os-platform-card__text { max-width: 400px; margin-top: 24px; }
.os-platform-card > .os-platform-card__link { margin-top: 28px; }
@media (max-width: 1200px) {
	.os-platform-card { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 1100px) {
	.os-platforms { min-height: 0; padding-bottom: 100px !important; }
	/* .os-platforms prefix: beats core's `.is-layout-constrained > .alignwide` max-width. */
	.os-platforms .os-platforms__grid { grid-template-columns: minmax(0, 1fr) !important; max-width: 680px; margin-inline: auto !important; }
	.os-platform:nth-child(2) { margin-top: 0; }
}
@media (max-width: 768px) {
	.os-platforms { padding-bottom: var(--wp--preset--spacing--90) !important; }
	.os-platforms .is-style-os-section-head h2 br { display: none; }
	.os-platforms__grid { gap: 16px; margin-top: 28px; }
	.os-platform-card,
	.os-platform:nth-child(2) > .os-platform-card { min-height: 0; padding: 28px 22px; }
	.os-platform-card > .os-platform-card__logo { margin-top: 14px; transform: scale(0.85); transform-origin: left center; }
	.os-platform-card > .os-platform-card__tag { font-size: 15px !important; white-space: normal; }
	.os-platform-card > .os-platform-card__text { margin-top: 16px; }
	.os-platform-card > .os-platform-card__link { margin-top: 20px; }
}

/* AI Labs banner: client layout at 1440 / ≤1100 / ≤768. */
.os-ai-labs { min-height: 302px; }
.os-ai-labs__inner { gap: 48px; min-height: 122px; }
.os-ai-labs__copy,
.os-ai-labs__cta { flex: 1 0 0; }
.os-ai-labs__copy { gap: 14px; }
.os-ai-labs__cta { gap: 18px; align-items: center; }
.os-ai-labs__cta > * { margin: 0; }
.os-ai-labs__title { max-width: 500px; }
.os-ai-labs__divider {
	flex-shrink: 0;
	width: 1px;
	height: 90px;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 0.2) 50%, rgb(255 255 255 / 0));
}
/* Editor: the divider is an empty Group, which the editor fills with its "choose a layout"
   placeholder (a tall grey box in the middle of the banner); hide it so the line shows as on the
   front end. The block stays selectable from List View. */
.is-root-container .os-ai-labs__divider > .components-placeholder { display: none; }
@media (max-width: 1100px) {
	.os-ai-labs { min-height: 0; padding-top: 72px !important; padding-bottom: 72px !important; }
	.os-ai-labs__inner { flex-direction: column; gap: 28px; text-align: center; }
	.os-ai-labs__copy { align-items: center; flex: none; }
	.os-ai-labs__cta { flex: none; }
	.os-ai-labs__divider {
		width: 120px;
		height: 1px;
		background: linear-gradient(to right, rgb(255 255 255 / 0), rgb(255 255 255 / 0.2) 50%, rgb(255 255 255 / 0));
	}
}
@media (max-width: 768px) {
	.os-ai-labs { padding-top: var(--wp--preset--spacing--90) !important; padding-bottom: var(--wp--preset--spacing--90) !important; }
	.os-ai-labs__title { font-size: 26px !important; }
	.os-ai-labs__cta .wp-block-image { transform: scale(0.85); transform-origin: left center; margin-right: -30px; }
	/* The client's glow circles shrink to 320 / 360px and sit 180px from the top. */
	.os-ai-labs.has-ai-labs-glow-gradient-background {
		background:
			radial-gradient(circle 180px at 50% 360px, rgba(108, 92, 231, 0.4) 0, rgba(108, 92, 231, 0.114) 180px, rgba(108, 92, 231, 0) 180px),
			radial-gradient(circle 160px at 50% 340px, rgba(23, 72, 232, 0.45) 0, rgba(23, 72, 232, 0.129) 160px, rgba(23, 72, 232, 0) 160px),
			#0a0b0d !important;
	}
}

/* Services section (OS Tabs): client layout at 1440 / ≤1200 / ≤1100 / ≤768. */
.os-services { min-height: 862px; }
.os-services__tabs {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	margin-top: 60px !important;
}
.os-services__tabs > .os-tabs__list { display: flex; flex-direction: column; gap: 4px; width: 420px; flex-shrink: 0; }
.os-services__tabs > .os-tabs__panels { flex: 1; max-width: 804px; }

/* Tab: icon tile + name + one-liner. */
.os-tab-label {
	gap: 16px;
	align-items: center;
	padding: 16px 18px 16px 15px;
	border-radius: 12px;
	color: var(--wp--preset--color--ink);
	transition: background-color var(--os-fast) var(--os-ease), box-shadow var(--os-base) var(--os-ease);
}
.os-tab-label > * { margin: 0; }
.os-tabs__tab.os-tab-label:hover { background: rgb(229 235 255 / 0.55); }
.os-tabs__tab.os-tab-label[aria-selected="true"] { background: #e5ebff; box-shadow: inset 0 0 0 1px #014e9a; }
.os-tab-label__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: linear-gradient(141.3deg, #00509e 14.286%, #001f54 92.418%);
}
.os-tab-label__icon img { width: 20px !important; height: 20px; }
.os-tab-label__copy { gap: 3px; min-width: 0; }
.os-tab-label__copy > p { margin: 0; line-height: normal; }
.os-tab-label__title { font-size: 16px; font-weight: 700; color: var(--wp--preset--color--ink-deep); }
.os-tab-label__text { font-size: 13px; font-weight: 400; }

/* Panel: dark card, photo on the right fading into the navy, content on the left.
   Content and link stay in flow (link pinned to the bottom), so longer copy grows the card
   instead of running under the link. */
.os-service {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 498px;
	padding: 70px 40px 60px;
	border-radius: 24px;
	background: var(--wp--preset--color--navy-deep);
	overflow: hidden;
	color: var(--wp--preset--color--white);
	isolation: isolate;
}
.os-service > * { margin: 0; }
.os-service::before {
	content: "";
	position: absolute;
	left: 259px;
	right: 0;
	top: -0.6px;
	bottom: -61.4px;
	z-index: 1;
	background: linear-gradient(to right, #001f54 20.873%, rgb(0 31 84 / 0) 114.99%);
	pointer-events: none;
}
.os-service > .wp-block-image {
	position: absolute;
	top: -0.6px;
	right: 0;
	bottom: -61.4px;
	left: 259px;
	z-index: 0;
	overflow: hidden; /* The tab switch's zoom-settle stays inside the overlay's span. */
}
.os-service > .os-service__background { left: 263px; }
.os-service > .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: right center;
	max-width: none;
}
.os-service__content { position: relative; z-index: 2; width: 413px; max-width: 100%; }
.os-service__content > * { margin: 0; }
.os-service__title { font-family: var(--wp--preset--font-family--body); font-size: 32px; font-weight: 600; line-height: normal; color: var(--wp--preset--color--white); white-space: nowrap; }
.os-service__text { margin-top: 8px !important; font-size: 15px; font-weight: 400; line-height: 1.75; }
.os-service__content > .is-style-os-chips { margin-top: 26px !important; }
.os-service__link { position: relative; z-index: 2; margin-top: auto; padding-top: 32px; align-self: flex-start; }
.os-service__link .wp-block-button__link { color: var(--wp--preset--color--white); }
/* Editor: OS Tabs are only rebuilt into a tab row on the front end (os_render_tabs()), so here each
   service is its own card under the previous one, its tab label on top, instead of six cards
   squeezed side by side. */
.is-root-container .os-services__tabs { flex-direction: column; align-items: stretch; gap: 32px; }
.is-root-container .os-service > .os-tab-label { position: relative; z-index: 2; align-self: flex-start; margin-bottom: 32px; background: #e5ebff; }

/* OS Chips: rounded translucent badges. */
.is-style-os-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.is-style-os-chips li {
	padding: 8px 16px;
	border: 1px solid rgb(255 255 255 / 0.18);
	border-radius: 8px;
	background: rgb(255 255 255 / 0.11);
	white-space: nowrap;
}

@media (max-width: 1200px) {
	.os-services__tabs > .os-tabs__list { width: 360px; }
}
@media (max-width: 1100px) {
	.os-services { min-height: 0; padding-bottom: 100px !important; }
	.os-services__tabs { flex-direction: column; gap: 32px; }
	.os-services__tabs > .os-tabs__list { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
	.os-services__tabs > .os-tabs__panels { width: 100%; max-width: none; flex: none; }
}
@media (max-width: 768px) {
	.os-services { padding-bottom: var(--wp--preset--spacing--90) !important; }
	.os-services__tabs { margin-top: 32px !important; }
	.os-services__tabs > .os-tabs__list {
		display: flex;
		flex-direction: row;
		gap: 8px;
		overflow-x: auto;
		/* As the client: content width, shifted left by the gutter (so it clips before the right edge). */
		width: 100%;
		margin: 0 0 0 calc(var(--wp--custom--gutter) * -1);
		padding: 0 var(--wp--custom--gutter) 4px;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wp--custom--gutter);
		scrollbar-width: none;
	}
	.os-services__tabs > .os-tabs__list::-webkit-scrollbar { display: none; }
	.os-tab-label { flex: 0 0 auto; gap: 10px; padding: 10px 14px 10px 10px; background: var(--wp--preset--color--white); box-shadow: inset 0 0 0 1px var(--wp--preset--color--line); scroll-snap-align: start; }
	.os-tab-label__icon { width: 34px; height: 34px; border-radius: 9px; }
	.os-tab-label__icon img { width: 16px !important; height: 16px; }
	.os-tab-label__text { display: none; }
	.os-tab-label__title { font-size: 14px; white-space: nowrap; }
	.os-service { display: flex; flex-direction: column; justify-content: flex-end; height: auto; min-height: 520px; padding: 220px 24px 28px; }
	.os-service > .wp-block-image,
	.os-service > .os-service__background { left: 0; top: 0; right: auto; bottom: auto; width: 100%; height: 300px; }
	.os-service > .wp-block-image img { object-position: 70% center; }
	/* Fixed span (fully navy by 288px, before the 300px photo ends), whatever the card's height. */
	.os-service::before { left: 0; top: 120px; bottom: auto; width: 100%; height: 180px; background: linear-gradient(to bottom, rgb(0 31 84 / 0) 0%, #001f54 168px); }
	.os-service__content { width: auto; }
	.os-service__title { font-size: 26px; white-space: normal; }
	.os-service__text br { display: none; }
	.os-service__link { margin-top: 32px !important; padding-top: 0; }
}

/* OS Blue Band: navy band with the client's gradient, orbit lines (one slowly spinning)
   and a glow. Sections can swap the glow via the --os-band-glow-* variables. */
.is-style-os-blue-band {
	--os-band-glow: url("../images/band/stats-glow.svg");
	--os-band-glow-x: calc(50% + 53.5px); /* left edge at 50% - 381px */
	--os-band-glow-y: -33.7px;
	--os-band-glow-size: 869px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	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 23.982%, #001f54 103.62%) 0 0 / 100% 782px no-repeat,
		#001f54 !important;
}
.is-style-os-blue-band::before,
.is-style-os-blue-band::after {
	content: "";
	position: absolute;
	z-index: 0;
	background: center / contain no-repeat;
	pointer-events: none;
}
.is-style-os-blue-band::before {
	left: calc(50% - 916px);
	top: 100px;
	width: 800px;
	height: 800px;
	background-image: url("../images/band/orbit-1.svg");
}
.is-style-os-blue-band::after {
	left: calc(50% - 216px);
	top: -300px;
	width: 1100px;
	height: 1100px;
	background-image: url("../images/band/orbit-2.webp");
}
@media (prefers-reduced-motion: no-preference) {
	.is-style-os-blue-band::after { animation: os-spin 120s linear infinite; }
}
@keyframes os-spin { to { transform: rotate(360deg); } }
.is-style-os-blue-band > * { position: relative; z-index: 1; }

/* Trust Stats section + OS Metric Row: client layout at 1440 / ≤1100 / ≤768. */
.os-stats { min-height: 476px; }
.os-stats > h2 { margin: 0; }
.is-style-os-metrics {
	display: flex;
	max-width: 1269px !important;
	margin: 30px auto 0 !important;
	border: 1px solid #245a94;
	border-radius: 12px;
	background: rgb(255 255 255 / 0.08);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
	filter: drop-shadow(0 8px 10px rgb(0 0 0 / 0.08));
	overflow: hidden;
}
.os-metric {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
	height: 180px;
	margin: 0 !important;
	padding: 20px 16px;
	border-top: 3px solid var(--wp--preset--color--mint);
	border-right: 1px solid rgb(255 255 255 / 0.18);
	border-bottom: 3px solid transparent;
	transition: border-bottom-color var(--os-fast) var(--os-ease), background-color var(--os-fast) var(--os-ease);
}
.os-metric:last-child { border-right: none; }
.os-metric:hover { background: rgb(255 255 255 / 0.1); border-bottom-color: #38bdf8; }
.os-metric > p { margin: 0; }
.os-metric__value { font-family: var(--wp--preset--font-family--heading); font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: -0.96px; white-space: nowrap; }
.os-metric__label { font-family: var(--wp--preset--font-family--label); font-size: 14px; font-weight: 500; line-height: 1.25; color: rgb(255 255 255 / 0.9); }
@media (max-width: 1100px) {
	.os-stats { min-height: 0; padding-bottom: 86px !important; }
	.is-style-os-metrics { flex-wrap: wrap; }
	.os-metric { flex: 1 1 33.333%; border-bottom: 3px solid rgb(255 255 255 / 0.18); }
	.os-metric:nth-child(3n) { border-right: none; }
	.os-metric:hover { border-bottom-color: var(--wp--preset--color--mint); }
}
@media (max-width: 768px) {
	.os-stats { padding-top: var(--wp--preset--spacing--90) !important; padding-bottom: var(--wp--preset--spacing--90) !important; }
	.is-style-os-metrics { margin-top: 32px !important; border-radius: 10px; }
	.os-metric { flex: 1 1 50%; height: 140px; padding: 16px 14px 18px; }
	.os-metric__value { font-size: 36px; }
	.os-metric:nth-child(3n) { border-right: 1px solid rgb(255 255 255 / 0.18); }
	.os-metric:nth-child(even) { border-right: none; }
	.os-metric:last-child { flex-basis: 100%; border-right: none; }
}

/* Client Success section (OS Blue Band): client layout at 1440 / ≤1200 / ≤1100 / ≤768. */
.os-success {
	--os-band-glow: url("../images/band/success-glow.svg");
	--os-band-glow-x: calc(50% + 134px); /* left edge at 50% - 236px */
	--os-band-glow-y: 30px;
	--os-band-glow-size: 740px;
	box-sizing: border-box;
	height: 782px;
}
.os-success > .os-success__inner.alignwide {
	display: flex;
	align-items: center;
	gap: 80px;
	height: 602px;
	max-width: 1280px;
	margin-top: 0;
}
.os-success__inner > * { margin: 0 !important; }
.os-success__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 540px; flex-shrink: 0; }
.os-success__copy > * { margin: 0 !important; }
.os-success__stack { display: flex; flex-direction: column; gap: 16px; }
.os-success__stack > * { margin: 0 !important; }
.os-success__text { font-size: 16px; font-weight: 400; line-height: 1.5; color: rgb(255 255 255 / 0.9); }
.os-success__cards { flex: 1; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.os-story {
	position: relative;
	display: grid;
	grid-template-columns: 138px 1fr 24px;
	align-items: center;
	box-sizing: border-box;
	min-height: 181px;
	margin: 0 !important;
	padding: 20px 25px 20px 33px;
	border: 1px solid rgb(255 255 255 / 0.14);
	border-radius: 16px;
	background: rgb(255 255 255 / 0.04);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: background-color var(--os-fast) var(--os-ease), border-color var(--os-fast) var(--os-ease), transform var(--os-base) var(--os-ease);
}
/* Chevron (third grid column). */
.os-story::after {
	content: "";
	width: 16px;
	height: 16px;
	margin: 0 auto;
	background: url("../images/ui/chevron-right.svg") center / contain no-repeat;
	transition: transform var(--os-base) var(--os-ease);
}
.os-story:hover { background: rgb(255 255 255 / 0.09); border-color: rgb(255 255 255 / 0.3); transform: translateX(4px); }
.os-story:hover::after { transform: translateX(4px); }
.os-story > * { margin: 0; }
.os-story__stat { font-family: var(--wp--preset--font-family--heading); font-size: 48px; font-weight: 700; line-height: normal; letter-spacing: -0.88px; white-space: nowrap; }
.os-story__body { display: flex; flex-direction: column; gap: 16px; max-width: 431px; }
.os-story__body > * { margin: 0; }
.os-story__title { font-family: var(--wp--preset--font-family--heading); font-size: 18px; font-weight: 500; line-height: 1.3; }
/* The title link covers the whole card, so the card is one click target. */
.os-story__title a { color: inherit; text-decoration: none; }
.os-story__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.os-story__title a:focus-visible { outline: none; }
.os-story:has(a:focus-visible) { outline: 2px solid var(--wp--preset--color--white); outline-offset: 3px; }
.os-story__text { margin-top: -8px !important; font-family: var(--wp--preset--font-family--heading); font-size: 14px; font-weight: 400; line-height: 1.4; color: rgb(255 255 255 / 0.9); }
.os-story__tags.is-style-os-tags li { padding: 8px 14px; background: rgb(0 0 0 / 0.2); color: rgb(255 255 255 / 0.83); }
@media (max-width: 1200px) {
	.os-success > .os-success__inner.alignwide { gap: 48px; }
	.os-success__copy { width: 440px; }
}
@media (max-width: 1100px) {
	.os-success { height: auto; padding-bottom: 90px !important; }
	.os-success > .os-success__inner.alignwide { flex-direction: column; align-items: stretch; height: auto; gap: 48px; }
	.os-success__copy { width: auto; max-width: 640px; }
}
@media (max-width: 768px) {
	.os-success { padding-top: var(--wp--preset--spacing--90) !important; padding-bottom: var(--wp--preset--spacing--90) !important; }
	.os-success__stack h2 br { display: none; }
	.os-success__copy { gap: 24px; }
	.os-story { grid-template-columns: 1fr 20px; grid-template-areas: "stat chev" "body body"; row-gap: 12px; min-height: 0; padding: 22px 20px; }
	.os-story__stat { grid-area: stat; font-size: 36px; }
	.os-story__body { grid-area: body; }
	.os-story::after { grid-area: chev; }
	.os-story__title { font-size: 16px; }
}

/* Insights section (Home QKVerse): client layout at 1440 / ≤1100 / ≤768. The cards are a Query
   Loop (latest 6 across QKVerse) in an OS Carousel, so the section and cards keep the client's
   heights as minimums and grow with a long title or the carousel controls. */
.os-insights { box-sizing: border-box; min-height: 876px; padding-bottom: 64px !important; }
.os-insights > .os-insights__query { margin-top: 60px; }
/* Room in the scroll row for the card's 4px hover lift, which it would clip. */
.os-insights__query > .is-style-os-carousel { padding-top: 4px; margin-top: -4px; }
.os-insights__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 24px;
	margin-top: 60px !important;
}
.os-insight {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 481px;
	margin: 0 !important;
	border: 1px solid #cecece;
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	transition: transform var(--os-base) var(--os-ease), box-shadow var(--os-base) var(--os-ease);
}
.os-insight:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(0 0 0 / 0.08); }
.os-insight > * { margin: 0 !important; }
.os-insight__media { position: relative; flex-shrink: 0; height: 250px; overflow: hidden; }
.os-insight__media.is-blue {
	background:
		radial-gradient(ellipse 507.5px 312.5px at -253.75px 281.25px, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0)),
		linear-gradient(148.38deg, #1748e8 0%, #4a6bf0 100%);
}
.os-insight__media.is-dark {
	background:
		radial-gradient(ellipse 406px 250px at -40.6px -25px, rgb(108 92 231 / 0.32), rgb(108 92 231 / 0)),
		radial-gradient(ellipse 406px 250px at 365.4px 200px, rgb(23 72 232 / 0.38), rgb(23 72 232 / 0)),
		linear-gradient(148.38deg, #0a0b0d 0%, #1d2230 100%);
}
.os-insight__media > * { margin: 0; }
/* Default: image covers the media box. The first three cards use the client's exact crops. */
.os-insight__media > .wp-block-image { position: absolute; inset: 0; }
.os-insight__media > .wp-block-image img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform var(--os-slow) var(--os-ease); }
@media (min-width: 769px) {
	.os-insights__grid > :nth-child(1) .os-insight__media > .wp-block-image:first-child { inset: auto; left: 0; top: 0.29px; width: 425px; height: 294px; }
	.os-insights__grid > :nth-child(2) .os-insight__media > .wp-block-image:first-child { inset: auto; left: -22px; top: -7px; width: 476px; height: 257px; }
	.os-insights__grid > :nth-child(3) .os-insight__media > .wp-block-image:first-child { inset: auto; left: -20px; top: 0; width: 426px; height: 264px; }
}
.os-insight:hover .os-insight__media > .wp-block-image:not(.os-insight__pattern) img { transform: scale(1.05); }
.os-insight__media > .os-insight__pattern { inset: auto; left: 0; top: 0.29px; width: 100%; height: 195px; mix-blend-mode: soft-light; pointer-events: none; }
.os-insight__type {
	position: absolute;
	left: 32px;
	top: 207px;
	z-index: 1;
	padding: 6px 10px;
	border-radius: 6px;
	background: rgb(255 255 255 / 0.14);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	font-size: 11px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.88px;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}
.os-insight__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 32px; }
.os-insight__body > * { margin: 0; }
.os-insight__title { max-width: 342px; font-family: var(--wp--preset--font-family--body); font-size: 18px; font-weight: 700; line-height: normal; color: var(--wp--preset--color--ink); }
.os-insight__text { max-width: 342px; margin-top: 12px !important; font-size: 14px; font-weight: 500; line-height: 1.5; }
.os-insight__body > .os-insight__link { margin-top: auto !important; }
/* The card in a Query Loop (Home QKVerse, QKVerse Latest feed, Reliability OS Resources): the
   featured image, linked title and excerpt wrapper get the rules the static image/heading/paragraph
   get; the grid stretches the cards in a row to one height. */
.wp-block-post-template .os-insight { height: 100%; }
.os-insights__query .os-insight { min-height: 481px; }
.wp-block-post-template .os-insight__media > .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; }
.wp-block-post-template .os-insight__media > .wp-block-post-featured-image img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform var(--os-slow) var(--os-ease); }
.wp-block-post-template .os-insight:hover .os-insight__media > .wp-block-post-featured-image img { transform: scale(1.05); }
.wp-block-post-template .os-insight__title a { color: inherit; text-decoration: none; }
.wp-block-post-template .os-insight__title a:hover { color: var(--wp--preset--color--brand); }
.wp-block-post-template .os-insight__text p { margin: 0; }
.wp-block-post-template .os-insight__body > .os-insight__link { margin-top: auto !important; padding-top: 20px; }
@media (prefers-reduced-motion: reduce) {
	.wp-block-post-template .os-insight__media > .wp-block-post-featured-image img { transition: none; }
}
@media (max-width: 1100px) {
	.os-insights { min-height: 0; padding-bottom: 100px !important; }
	.os-insights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
	.os-insights { padding-top: var(--wp--preset--spacing--90) !important; padding-bottom: var(--wp--preset--spacing--90) !important; }
	.os-insights__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; margin-top: 32px !important; }
	.os-insight { height: auto; }
	.os-insights > .os-insights__query { margin-top: 32px; }
	.os-insights__query .os-insight { min-height: 0; }
	.os-insight__media { height: 220px; }
	/* As the client: every media image (pattern included) fills the box on phones. */
	.os-insight__media > .wp-block-image,
	.os-insight__media > .os-insight__pattern { inset: 0; width: 100%; height: 100%; }
	.os-insight__type { top: auto; bottom: 16px; left: 20px; }
	.os-insight__body { padding: 24px 20px 28px; }
	.os-insight__body > .os-insight__link { margin-top: 20px !important; }
	.os-insight__title br { display: none; }
}

/* Careers section: client layout at 1440 / ≤1200 / ≤1100 / ≤768. */
.os-careers { position: relative; box-sizing: border-box; height: 560px; overflow: hidden; }
.os-careers > .os-careers__photo {
	position: absolute;
	left: calc(50% - 716px + 0.5px);
	top: -2.71px;
	width: 644px;
	height: 561.52px;
	margin: 0;
}
.os-careers__photo img { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
.os-careers > .os-careers__inner { display: flex; align-items: center; height: 100%; margin-block: 0; }
.os-careers__copy { display: flex; flex-direction: column; align-items: flex-start; width: 500px; margin: 1px 0 0 668px !important; }
.os-careers__copy > * { margin: 0 !important; }
.os-careers__copy > .os-careers__title { margin-top: 16px !important; }
.os-careers__text { margin-top: 24px !important; font-size: 14px; font-weight: 500; line-height: 1.5; }
.os-careers__copy > .os-careers__actions { margin-top: 32px !important; }
@media (max-width: 1200px) {
	.os-careers > .os-careers__photo { left: -80px; }
	.os-careers__copy { margin-left: auto !important; margin-right: 0 !important; }
}
@media (max-width: 1100px) {
	.os-careers { display: flex; flex-direction: column; height: auto; }
	.os-careers > .os-careers__photo { position: relative; left: auto; top: auto; width: 100%; height: auto; max-width: none; margin-inline: calc(var(--wp--custom--gutter) * -1) !important; width: calc(100% + 2 * var(--wp--custom--gutter)); }
	.os-careers__photo img { height: auto !important; max-height: 520px; object-position: center top; }
	.os-careers > .os-careers__inner { padding-top: 56px; padding-bottom: 72px; }
	.os-careers__copy { width: auto; max-width: 560px; margin: 0 !important; }
}
@media (max-width: 768px) {
	.os-careers__photo img { max-height: 360px; }
	.os-careers > .os-careers__inner { padding-top: var(--wp--preset--spacing--90); padding-bottom: var(--wp--preset--spacing--90); }
	.os-careers__copy > .os-careers__title { margin-top: 10px !important; }
}

/* Contact section: client layout at 1440 / ≤1200 / ≤1100 / ≤768. */
.os-contact {
	position: relative;
	min-height: 746px;
	overflow: hidden;
	background:
		url("../images/contact/glow-top.svg") calc(50% - 583px) -281.71px / 778px no-repeat,
		url("../images/contact/glow-bottom.svg") calc(50% - 606px) calc(100% + 291.29px) / 732px no-repeat,
		var(--wp--preset--color--ink-deep) !important;
}
.os-contact > .os-contact__inner {
	display: grid;
	grid-template-columns: 1fr 580px;
	gap: 52px;
	margin-block: 0;
	padding-top: 100px;
	padding-bottom: 110px;
}
.os-contact__inner > * { margin: 0 !important; }
.os-contact__intro { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.os-contact__intro > * { margin: 0; }
/* Optional eyebrow above the title (a page's copy can add one, e.g. Industries: "Talk to us"). */
.os-contact__intro > .os-contact__eyebrow + * { margin-top: 12px; }
.os-contact__title { max-width: 486px; font-size: 30px; font-weight: 600; line-height: 40px; color: var(--wp--preset--color--white); }
.os-contact__text { max-width: 516px; margin-top: 24px !important; font-size: 16px; font-weight: 400; line-height: 27.2px; color: rgb(255 255 255 / 0.9); }
.os-contact__intro > .os-contact__actions { gap: 14px; margin-top: 50.6px !important; }
.os-contact__connect .wp-block-button__link { min-width: 160px; }
/* QK badge (decorative): pulsing ring + navy core with the QK mark. */
.os-qk-badge { position: relative; width: 280px; height: 280px; margin: 62.3px 0 0 34px !important; }
/* Editor: the badge is an empty Group, so hide the "choose a layout" placeholder the editor puts in it. */
.os-qk-badge > .components-placeholder { display: none; }
.os-qk-badge::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 0.432px solid var(--wp--preset--color--sky);
	border-radius: 50%;
	background: linear-gradient(to bottom, rgb(0 80 158 / 0.25) 23.982%, rgb(0 31 84 / 0.25) 103.62%);
}
@media (prefers-reduced-motion: no-preference) {
	.os-qk-badge::before { animation: os-pulse 4s ease-in-out infinite; }
}
@keyframes os-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.04); opacity: 0.85; }
}
.os-qk-badge::after {
	content: "";
	position: absolute;
	left: 36.3px;
	top: 36.3px;
	width: 207.41px;
	height: 207.41px;
	border-radius: 50%;
	background:
		url("../images/contact/qk-mark.svg") center / 51.25% 43.59% no-repeat,
		linear-gradient(to bottom, #00509e 23.982%, #001f54 103.62%);
}

/* Contact form: the shared Contact Form 7 form "OS Enquiry Form" (inc/contact/contact.php,
   tools/build-cf7-form.php). CF7 wraps every field in its own <span class="wpcf7-form-control-wrap">
   (neutralised with display:contents below) and gives [acceptance] fields a fixed
   <label><input/><span class="wpcf7-list-item-label"> structure we can't add a class to directly,
   so the consent checkbox below target that structure by its data-name instead; see
   assets/css/os-contact-form.css for the intl-tel-input phone flags (vendor theming, loaded only
   where the form appears) and the honeypot/error-state additions. */
/* The client page has no doctype (quirks mode), where forms get a 16px bottom margin; matched with padding. */
.os-form,
.os-newsletter__form { padding-bottom: 16px; }
.os-form { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 36px; align-content: start; }
.os-form .wpcf7-form-control-wrap { display: contents; }
.os-field { position: relative; display: flex; flex-direction: column; gap: 8px; }
.os-field--full { grid-column: 1 / -1; }
.os-field > label { font-size: 14px; font-weight: 500; line-height: 14px; color: #e0e0e0; }
.os-field input,
.os-field textarea,
.os-phone {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid rgb(255 255 255 / 0.08);
	border-radius: 8px;
	background: rgb(255 255 255 / 0.1);
	font: 500 14px var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--white);
	outline: none;
	transition: border-color var(--os-fast) var(--os-ease), background-color var(--os-fast) var(--os-ease);
}
.os-field textarea { height: 80px; padding-top: 14px; font-weight: 400; resize: vertical; }
.os-field input::placeholder,
.os-field textarea::placeholder { color: #6f6f6f; opacity: 1; }
.os-field input:focus,
.os-field textarea:focus,
.os-phone:focus-within { border-color: var(--wp--preset--color--sky); background: rgb(255 255 255 / 0.13); }
.os-phone { display: flex; align-items: center; gap: 10px; padding: 0 16px 0 0; }
.os-phone input { flex: 1; height: 100%; padding: 0; border: 0; background: none; }
.os-phone input:focus { background: none; }
/* [acceptance] fields: the only class we can attach ends up on the <input>, not on a wrapping
   element we could use as a flex box — so these use the form-control-wrap's data-name instead,
   and draw the box as the <label>'s own ::before (a flex item of the label itself). */
.os-form .wpcf7-form-control-wrap[data-name="consent"] label {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}
.os-form .wpcf7-form-control-wrap[data-name="consent"] label { margin-top: -16px; }
.os-form .wpcf7-form-control-wrap[data-name="consent"] input[type="checkbox"] {
	position: absolute;
	width: 20px;
	height: 20px;
	margin: 0;
	opacity: 0;
}
.os-form .wpcf7-form-control-wrap[data-name="consent"] label::before {
	content: "";
	flex-shrink: 0;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border: 1px solid rgb(255 255 255 / 0.32);
	border-radius: 3.33px;
	transition: background-color var(--os-fast) var(--os-ease), border-color var(--os-fast) var(--os-ease);
}
.os-form .wpcf7-form-control-wrap[data-name="consent"] label:has(input:checked)::before {
	border-color: var(--wp--preset--color--sky);
	background: var(--wp--preset--color--sky);
}
.os-form .wpcf7-form-control-wrap[data-name="consent"] label:has(input:focus-visible)::before {
	outline: 2px solid var(--wp--preset--color--sky);
	outline-offset: 2px;
}
.os-form .wpcf7-form-control-wrap[data-name="consent"] .wpcf7-list-item-label {
	max-width: 506px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.9);
}
/* "I'm not a robot" was removed from the CF7 form (user, 2026-10-15); these two rules only serve the
   old placeholder form still baked into some pages until the CF7 form reaches them. */
.os-captcha__text { font-size: 14px; font-weight: 500; line-height: 1.5; color: rgb(255 255 255 / 0.9); }
.os-captcha__logo { position: absolute; left: 270px; top: 9px; width: 42px; height: 42px; object-fit: cover; }
.os-form__submit { display: flex; align-items: center; gap: 16px; margin-top: -4px; }
.os-form__button { min-width: 165px; min-height: 44px; cursor: pointer; }
.os-form input[type="submit"].os-form__button { appearance: none; border: 0; font: inherit; }
/* CF7's status message under the button ("One or more fields have an error…"): across the whole
   form so it stays on one line, 16px under the button (CF7's own 2em/1em margins dropped; its
   selector .wpcf7 form .wpcf7-response-output out-ranks a plain .os-form one, hence form.os-form). */
.wpcf7 form.os-form .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: -20px 0 0; /* the 36px row gap - 20 = 16px */
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
}
/* CF7's own inline validation error (no theme.json error/red token exists yet; a plain
   accessible red, shared by every field type so it works even where assets/js/os-contact-form.js
   doesn't add anything of its own, e.g. name/email/message). */
.os-form input.wpcf7-not-valid,
.os-form textarea.wpcf7-not-valid { border-color: #ff6b6b; }
.os-form .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: #ff6b6b; }
@media (max-width: 1200px) {
	.os-contact > .os-contact__inner { grid-template-columns: 1fr 1fr; gap: 48px; }
}
@media (max-width: 1100px) {
	.os-contact > .os-contact__inner { grid-template-columns: 1fr; gap: 56px; padding-top: 80px; padding-bottom: 80px; }
	.os-qk-badge { display: none; }
}
@media (max-width: 768px) {
	.os-contact > .os-contact__inner { gap: 40px; padding-top: var(--wp--preset--spacing--90); padding-bottom: var(--wp--preset--spacing--90); }
	.os-contact__title { font-size: 28px; }
	.os-contact__text { font-size: 15px; line-height: 1.6; }
	.os-contact__text br { display: none; }
	.os-contact__intro > .os-contact__actions { margin-top: 28px !important; }
	.os-form { grid-template-columns: 1fr; row-gap: 28px; }
	.wpcf7 form.os-form .wpcf7-response-output { margin-top: -12px; } /* 28px row gap - 12 = 16px */
	.os-form .wpcf7-form-control-wrap[data-name="consent"] label { margin-top: -8px; }
	.os-captcha__logo { left: auto; right: 16px; }
	.os-form__submit { flex-direction: column; align-items: stretch; }
	.os-form__button { width: 100%; }
}

/* Newsletter section: client layout at 1440 / ≤1100 / ≤768. */
.os-newsletter > .os-newsletter__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	box-sizing: border-box;
	min-height: 218.5px;
	margin-block: 0;
	padding-top: 48px;
	padding-bottom: 48px;
}
.os-newsletter__inner > * { margin: 0 !important; }
.os-newsletter__copy { display: flex; flex-direction: column; gap: 8px; }
.os-newsletter__copy > * { margin: 0; }
.os-newsletter__title { font-size: 40px; font-weight: 600; line-height: 1.12; color: var(--wp--preset--color--ink); }
.os-newsletter__text { font-size: 14px; font-weight: 500; line-height: normal; }
.os-newsletter__inner > .wp-block-contact-form-7-contact-form-selector { flex-shrink: 0; }
.os-newsletter__form { display: flex; flex-direction: column; flex-shrink: 0; gap: 12px; width: 440px; }
.os-newsletter__row { display: flex; align-items: center; gap: 10px; }
.os-newsletter__field { flex: 1; min-width: 0; }
.os-newsletter__field .wpcf7-form-control-wrap { display: block; }
.os-newsletter__row input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	height: 45px;
	padding: 12px 16px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	font: 400 14px var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--ink);
	outline: none;
	transition: border-color var(--os-fast) var(--os-ease);
}
.os-newsletter__row input[type="email"]::placeholder { color: rgb(28 28 28 / 0.7); }
.os-newsletter__row input[type="email"]:focus { border-color: var(--wp--preset--color--brand); }
.os-newsletter__row input[aria-invalid="true"] { border-color: #c62828; }
.os-newsletter__button { min-height: 44px; cursor: pointer; }
.os-newsletter__note { max-width: 397px; margin: 0; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--wp--preset--color--ink); }
/* CF7 (OS Newsletter Form, user 2026-10-27): one small status line under the form instead of CF7's
   bordered box, field tips and spinner (the field's message is the status: cf7-newsletter.php,
   os-newsletter.js). Out-ranks CF7's .wpcf7 form.<state> .wpcf7-response-output; CF7 still hides it while idle or sending. */
.os-newsletter__form .wpcf7-not-valid-tip,
.os-newsletter__form .wpcf7-spinner { display: none; }
/* Honeypot off-screen (os-contact-form.css has the same rule but loads with the enquiry form only). */
.os-newsletter__form .os-hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.os-newsletter .wpcf7 form.os-newsletter__form .wpcf7-response-output {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: #c62828;
}
.os-newsletter .wpcf7 form.os-newsletter__form.sent .wpcf7-response-output { color: var(--wp--preset--color--green-text); }
.os-newsletter .wpcf7 form.os-newsletter__form[data-os-error] .wpcf7-response-output { display: block; }
/* Desktop: heading level with the email row (centring both put the heading below it); the form stays where it was. */
@media (min-width: 1101px) {
	.os-newsletter > .os-newsletter__inner { align-items: flex-start; padding-top: 56px; }
}
@media (max-width: 1100px) {
	.os-newsletter > .os-newsletter__inner { flex-direction: column; align-items: flex-start; }
	.os-newsletter__inner > .wp-block-contact-form-7-contact-form-selector { width: 100%; }
	.os-newsletter__form { width: 100%; max-width: 520px; }
}
@media (max-width: 768px) {
	.os-newsletter__title { font-size: 28px; }
	.os-newsletter > .os-newsletter__inner { gap: 24px; min-height: 0; padding-top: var(--wp--preset--spacing--90); padding-bottom: var(--wp--preset--spacing--90); }
	.os-newsletter__row { flex-direction: column; align-items: stretch; }
	.os-newsletter__button { width: 100%; }
}

/* News & Recognition sections + news cards (both use OS Carousel): client layout at 1440 / ≤1100 / ≤768. */
/* Desktop: a fixed 599px section, as the client (its bottom padding is cut off by the fixed height). */
.os-news { box-sizing: border-box; height: 599px; }
/* Editor: the News cards are stacked (static OS Carousel), so the section grows to fit them instead
   of running under the next section. */
.is-root-container .os-news { height: auto; min-height: 599px; padding-bottom: var(--wp--preset--spacing--90) !important; }
.os-news__track { margin-top: 60px !important; }
.os-news-card {
	position: relative;
	box-sizing: border-box;
	height: 186px;
	padding: 31px;
	border: 1px solid #cecece;
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	transition: border-color var(--os-fast) var(--os-ease), box-shadow var(--os-base) var(--os-ease);
}
.os-news-card:hover { border-color: #9fb8d8; box-shadow: 0 12px 28px rgb(0 80 158 / 0.08); }
.os-news-card > * { margin: 0; }
.os-news-card__date { font-size: 14px; font-weight: 500; line-height: normal; color: var(--wp--preset--color--ink); }
.os-news-card__title { max-width: 344px; font-family: var(--wp--preset--font-family--body); margin-top: 18px !important; font-size: 18px; font-weight: 700; line-height: normal; color: var(--wp--preset--color--ink); }
.os-news-card__link { position: absolute; left: 31px; top: 138px; }
/* Award variant: logo + badge row, taller card, link at the bottom. */
/* Fixed 264px like the client (its card height rule wins over "auto"); auto height on phones. */
.os-award-card { display: flex; flex-direction: column; height: 264px; }
.os-award-card__head { align-items: center; gap: 12px; min-height: 36px; }
.os-award-card__head > * { margin: 0; flex-shrink: 0; }
.os-award-card__head .is-style-os-badge { white-space: nowrap; }
/* An award's logo from its "Award card" panel (Home: Query Loop, os/award bindings): one box for
   every logo, so cards line up and nothing shifts while it loads. */
.os-award-card__logo img { display: block; width: 136px; height: 36px; object-fit: contain; object-position: left center; }
/* Editor: in a Query Loop, an award without a logo shows no logo, as on the site, instead of the
   Image block's large grey placeholder over the card (the logo is set on the award, in its Award
   card panel). */
.is-root-container .wp-block-post .os-award-card__logo:has(.components-placeholder) { display: none; }
/* Editor: a static card (Home) keeps its logo's upload box, at the logo's own size, so a logo can be
   added card by card; the site shows nothing until one is (os_awards_render_logo()). */
.is-root-container .os-award-card__logo .components-placeholder { width: 136px; min-width: 0; height: 36px; min-height: 0; padding: 0; }
/* Editor: a Query Loop carousel (a Post Template with is-style-os-carousel: Home QKVerse, Home
   recognition, Reliability OS Resources) shows its cards in a row as on the site, 3 in view and the
   rest scrolling sideways, not stacked full width (os-carousel.css is front end only). Only the first
   card is editable; the others are previews. Static Group carousels stay stacked so every card can
   be edited. */
.is-root-container .wp-block-post-template.is-style-os-carousel {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 48px) / 3);
	gap: 24px;
	overflow-x: auto;
	padding-bottom: 12px;
}
.is-root-container .wp-block-post-template.is-style-os-carousel > * { margin: 0 !important; }
/* The excerpt's own "read more" prompt (cards have their own Know more link). */
.is-root-container .wp-block-post-template.is-style-os-carousel .wp-block-post-excerpt__more-text { display: none; }
.os-award-card > .os-news-card__title { max-width: none; margin-top: 24px !important; font-weight: 600; line-height: 1.4; }
.os-award-card > .os-news-card__link { position: static; margin-top: auto !important; padding-top: 24px; align-self: flex-start; }
/* Award carousels hold any number of cards (user, 2026-10-26: "1 or 2 or 3 or 8, 9 items"): fewer
   than fill the row sit centred under the heading, and a single card on phones fills the row with
   no arrows (nothing to scroll). The OS Carousel itself already hides its controls when every card
   is in view on desktop and tablets. */
@media (min-width: 1101px) {
	.is-style-os-carousel:has(> .os-award-card):not(:has(> :nth-child(3))) { justify-content: center; }
}
@media (min-width: 769px) and (max-width: 1100px) {
	.is-style-os-carousel:has(> .os-award-card):not(:has(> :nth-child(2))) { justify-content: center; }
}
@media (max-width: 768px) {
	.is-style-os-carousel:has(> .os-award-card):not(:has(> :nth-child(2))) > * { flex-basis: 100%; }
	.is-style-os-carousel:has(> .os-award-card):not(:has(> :nth-child(2))) + .os-carousel__controls { display: none; }
}
@media (max-width: 1100px) {
	.os-news { height: auto; padding-bottom: 90px !important; }
}
@media (max-width: 768px) {
	.os-news { padding-top: var(--wp--preset--spacing--90) !important; padding-bottom: var(--wp--preset--spacing--90) !important; }
	.os-news__track { margin-top: 32px !important; }
	.os-news-card { display: flex; flex-direction: column; height: auto; min-height: 186px; padding: 24px 22px; }
	.os-news-card__title { margin-top: 12px !important; }
	.os-news-card__link { position: static; margin-top: auto !important; padding-top: 18px; align-self: flex-start; }
	.os-award-card__head { flex-wrap: wrap; }
}

/* OS button row (client .btn-row): add the os-btn-row class to a Buttons block.
   Buttons share the row on phones and stack full-width at 420px and below.
   A lone button keeps its natural width at every size. */
@media (max-width: 768px) {
	.os-btn-row > .wp-block-button:not(.is-style-os-explore):not(:only-child) { flex: 1 1 auto; }
	.os-btn-row > .wp-block-button:not(.is-style-os-explore):not(:only-child) .wp-block-button__link { width: 100%; }
}
@media (max-width: 420px) {
	.os-btn-row { flex-direction: column; align-items: stretch; }
	.os-btn-row:has(> .wp-block-button:only-child) { flex-direction: row; }
}

/* Industries section (OS Tabs with chip labels): client layout at 1440 / ≤1360 / ≤1200 / ≤1100 / ≤768. */
.os-industries { min-height: 907px; }
/* The tab row scrolls sideways whenever it is wider than the content (it needs 1113px,
   1235px above 1360px), running into the gutters like the client's mobile row. While it
   fits, the auto margins centre it; when it doesn't, they collapse to 0 so it starts at the
   gutter (plain centring would push the first tabs off-screen). */
.os-industries__tabs > .os-tabs__list {
	display: flex;
	gap: 8px;
	margin-top: 60px !important;
	margin-left: calc(var(--wp--custom--gutter) * -1);
	margin-right: calc(var(--wp--custom--gutter) * -1);
	padding: 0 var(--wp--custom--gutter) 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
.os-industries__tabs > .os-tabs__list::-webkit-scrollbar { display: none; }
.os-industries__tabs > .os-tabs__list > .os-tab-label:first-child { margin-left: auto; }
.os-industries__tabs > .os-tabs__list > .os-tab-label:last-child { margin-right: auto; }
.os-industries__tabs .os-tab-label {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 43px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid #cacaca;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
	transition: background-color var(--os-fast) var(--os-ease), color var(--os-fast) var(--os-ease), border-color var(--os-fast) var(--os-ease);
}
.os-industries__tabs .os-tab-label:hover { border-color: var(--wp--preset--color--ink); }
.os-industries__tabs .os-tab-label[aria-selected="true"] { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); }
.os-industries__tabs > .os-tabs__panels { margin-top: 40px !important; }
.os-industry { display: grid; grid-template-columns: 1fr 636px; align-items: center; height: 460px; }
.os-industry > * { margin: 0; }
.os-industry__copy { display: flex; flex-direction: column; align-items: flex-start; max-width: 579px; }
.os-industry__copy > * { margin: 0; }
.os-industry__title { font-family: var(--wp--preset--font-family--body); font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.32px; color: var(--wp--preset--color--ink); }
.os-industry__text { max-width: 470px; margin-top: 20px !important; font-size: 14px; font-weight: 500; line-height: 1.5; }
.os-industry__copy > .is-style-os-tags { margin-top: 32px !important; }
.os-industry__copy > .os-industry__actions { margin-top: 40px !important; }
.os-industry__visual {
	position: relative;
	height: 460px;
	border-radius: 20px;
	overflow: hidden;
	background:
		radial-gradient(ellipse 795px 575px at -238.5px 517.5px, rgb(108 92 231 / 0.4), rgb(108 92 231 / 0)),
		radial-gradient(ellipse 706.67px 511.11px at 565.33px 408.89px, rgb(23 72 232 / 0.55), rgb(23 72 232 / 0)),
		#060b1f;
}
.os-industry__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.8;
	background: linear-gradient(96.15deg, #001f54 2.738%, rgb(0 31 84 / 0) 96.587%);
	pointer-events: none;
}
.os-industry__visual > .wp-block-image { position: absolute; left: -26px; top: 0; width: 664px; height: 460px; margin: 0; }
.os-industry__visual > .wp-block-image img { width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; transition: transform var(--os-slow) var(--os-ease); }
.os-industry__visual:hover img { transform: scale(1.03); }
/* Editor: each industry's tab label (a chip in the tab row on the front end) sits on its own row
   above the copy and photo, instead of taking the copy's grid cell. */
.is-root-container .os-industry { height: auto; }
.is-root-container .os-industry > .os-tab-label { grid-column: 1 / -1; justify-self: start; margin-bottom: 24px; }

/* OS Tags: light grey rounded tags. */
.is-style-os-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.is-style-os-tags li { padding: 7px 14px; border-radius: 6px; background: #e6eaf1; white-space: nowrap; }

@media (max-width: 1360px) {
	.os-industries__tabs .os-tab-label { padding: 0 14px; font-size: 13px; }
}
@media (max-width: 1200px) {
	.os-industry { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 1100px) {
	.os-industries { min-height: 0; padding-bottom: 100px !important; }
	.os-industry { grid-template-columns: 1fr; height: auto; gap: 40px; }
	.os-industry__copy { max-width: 640px; }
	.os-industry__visual { height: 420px; }
	.os-industry__visual > .wp-block-image { left: 0; width: 100%; height: 100%; }
}
@media (max-width: 768px) {
	.os-industries { padding-bottom: var(--wp--preset--spacing--90) !important; }
	.os-industries__tabs > .os-tabs__list { margin-top: 32px !important; }
	.os-industry__title { font-size: 24px; }
	.os-industry__text { margin-top: 14px !important; }
	.os-industry__copy > .is-style-os-tags { margin-top: 20px !important; }
	.os-industry__copy > .os-industry__actions { margin-top: 28px !important; }
	.os-industry__visual { height: 280px; border-radius: 16px; }
}

/* Back to top (os_back_to_top() in functions.php, shown by os-motion.js): a white circle with
   the arrow-up icon and a clear shadow, ringed by a brand line (no track) that fills as the page scrolls. Hidden until
   the visitor has scrolled a screen (always shown without JS). Hover/focus fills it brand blue
   and the arrow slides out the top and back in, like the button arrows. */
.os-to-top {
	position: fixed;
	right: 24px;
	bottom: max(24px, env(safe-area-inset-bottom));
	z-index: 40;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand);
	box-shadow: 0 6px 20px rgb(0 80 158 / 0.2), 0 2px 6px rgb(10 11 13 / 0.1);
	text-decoration: none;
	transition: opacity var(--os-base) var(--os-ease), transform var(--os-base) var(--os-ease),
		visibility var(--os-base), background-color var(--os-fast) var(--os-ease),
		color var(--os-fast) var(--os-ease), box-shadow var(--os-base) var(--os-ease),
		bottom var(--os-base) var(--os-ease), right var(--os-base) var(--os-ease);
}
.os-to-top::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("../images/arrow-up.svg") center / 22px no-repeat;
	mask: url("../images/arrow-up.svg") center / 22px no-repeat;
}
.os-to-top__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	fill: none;
	stroke-width: 1.5;
	pointer-events: none;
}
.os-to-top__progress {
	stroke: currentColor;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: var(--os-progress, 100);
}
.os-js .os-to-top:not(.is-shown) {
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px) scale(0.9);
	pointer-events: none;
}
.os-to-top:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}
.os-to-top:focus-visible {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
}
@media (hover: hover) {
	.os-to-top:hover {
		background: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--white);
		box-shadow: 0 12px 28px rgb(0 80 158 / 0.28);
		transform: translateY(-2px);
	}
}
@media (prefers-reduced-motion: no-preference) {
	.os-to-top:hover::before,
	.os-to-top:focus-visible::before { animation: os-arrow-up-out-in 0.45s ease; }
}
@keyframes os-arrow-up-out-in {
	0%   { -webkit-mask-position: center; mask-position: center; }
	45%  { -webkit-mask-position: 50% -24px; mask-position: 50% -24px; }
	46%  { -webkit-mask-position: 50% 48px; mask-position: 50% 48px; }
	100% { -webkit-mask-position: center; mask-position: center; }
}
@media (max-width: 768px) {
	.os-to-top { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: 44px; height: 44px; }
	.os-to-top::before { -webkit-mask-size: 20px; mask-size: 20px; }
}
/* HubSpot chat (added by the HubSpot tracking code, UAT/live only): its 60px launcher sits
   16px from the bottom-right corner at every width, inside a 100×96px frame that takes the
   clicks over its whole area. So the button stacks above the frame (24px over the launcher),
   centred on the launcher. */
body:has(> #hubspot-messages-iframe-container.widget-align-right) .os-to-top {
	right: 20px;
	bottom: 100px;
}
@media (max-width: 768px) {
	body:has(> #hubspot-messages-iframe-container.widget-align-right) .os-to-top { right: 24px; }
}
/* reCAPTCHA badge (pages with a form, when CF7 → Integration has keys): stacked between the chat
   and the button (user, 2026-10-25), 16px apart. Google writes bottom: 14px inline, hence !important. */
body:has(.grecaptcha-badge) .os-to-top { bottom: 90px; }
body:has(> #hubspot-messages-iframe-container.widget-align-right) .grecaptcha-badge { bottom: 100px !important; }
body:has(> #hubspot-messages-iframe-container.widget-align-right):has(.grecaptcha-badge) .os-to-top { bottom: 176px; }
/* Keep it clear of content: elements focused with the keyboard stop above the button zone
   (WCAG 2.4.11), and where the side margin is narrower than the button (769–1439px) the
   footer's legal links stop short of it, so nothing at the very bottom of the page stays
   covered. At 1440px (the design width) nothing moves. */
html { scroll-padding-bottom: 88px; }
@media (min-width: 769px) and (max-width: 1439px) {
	.os-footer__legal-row { padding-right: 64px; }
}
@media (max-width: 768px) {
	html { scroll-padding-bottom: 72px; }
}
html:has(> body > #hubspot-messages-iframe-container.widget-align-right) { scroll-padding-bottom: 168px; }
@media (max-width: 768px) {
	html:has(> body > #hubspot-messages-iframe-container.widget-align-right) { scroll-padding-bottom: 160px; }
}
html:has(.grecaptcha-badge) { scroll-padding-bottom: 160px; }
html:has(> body > #hubspot-messages-iframe-container.widget-align-right):has(.grecaptcha-badge) { scroll-padding-bottom: 244px; }
@media print {
	.os-to-top { display: none; }
}

/* ---------- OS Loader ----------
   Use it for anything that loads content into part of the page: filters, search, pagination,
   load more, form submits. Give the area the class os-loader-area and set aria-busy="true"
   on it while it loads (and remove it when done, or on pageshow after a Back navigation).
   The content dims and softens, and a brand ring spins on a white disc near the top of the
   area, where the visitor is looking; it fades in after 150ms so quick loads don't flash. aria-busy also
   tells assistive technology the area is updating. */
.os-loader-area { position: relative; }
.os-loader-area > * { transition: opacity var(--os-base) var(--os-ease), filter var(--os-base) var(--os-ease); }
.os-loader-area[aria-busy="true"] > * { opacity: 0.35; filter: blur(2px) saturate(0.85); pointer-events: none; }
/* A white disc (::before) carries the spinning ring (::after), so it reads on images too. */
.os-loader-area::before,
.os-loader-area::after {
	content: "";
	position: absolute;
	z-index: 5;
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--os-base) var(--os-ease), visibility 0s linear var(--os-base);
}
.os-loader-area::before {
	top: min(110px, 40%);
	left: calc(50% - 32px);
	width: 64px;
	height: 64px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 2px rgb(0 80 158 / 0.08), 0 12px 32px rgb(0 80 158 / 0.18);
}
.os-loader-area::after {
	top: calc(min(110px, 40%) + 12px);
	left: calc(50% - 20px);
	width: 40px;
	height: 40px;
	background: conic-gradient(from 0deg, rgb(0 80 158 / 0) 0deg, var(--wp--preset--color--brand) 250deg, var(--wp--preset--color--teal) 360deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
}
/* Spins only while loading. */
.os-loader-area[aria-busy="true"]::after { animation: os-loader-spin 0.9s linear infinite; }
.os-loader-area[aria-busy="true"]::before,
.os-loader-area[aria-busy="true"]::after { opacity: 1; visibility: visible; transition-delay: 0.15s, 0s; }
.os-loader-area[aria-busy="true"] > * { transition-delay: 0.15s; }
/* Compact: a small area (the newsletter sign-up), disc and ring centred and smaller. */
.os-loader-area--compact::before { top: calc(50% - 20px); left: calc(50% - 20px); width: 40px; height: 40px; }
.os-loader-area--compact::after {
	top: calc(50% - 13px);
	left: calc(50% - 13px);
	width: 26px;
	height: 26px;
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
@keyframes os-loader-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
	.os-loader-area[aria-busy="true"]::after { animation: os-loader-pulse 1.6s ease-in-out infinite; }
}
@keyframes os-loader-pulse { 50% { opacity: 0.4; } }

/* ---------- OS Crumb ----------
   Every Breadcrumbs block (inc/breadcrumbs/): one line of crumbs, ">" between them; the type and
   colour are in theme.json (styles.blocks.core/breadcrumbs). A trail too long for its row shortens
   with ellipses, at every width, phones too (client, 2026-10-27: no hiding): the middle crumbs first
   (down to "Se… ›"), then the last one (a post title), so a deep Services trail (Home > Services >
   Digital Reliability > AI-Led Quality Engineering > …) still ends on the page you are on; Home
   never shortens. A section restyles its trail with its own selector, e.g.
   .os-dark-band .wp-block-breadcrumbs { color: … }, or with the block's colour/type settings. */
.wp-block-breadcrumbs ol { flex-wrap: nowrap; }
.wp-block-breadcrumbs ol > li { flex-shrink: 0; min-width: 0; }
.wp-block-breadcrumbs ol > li:not(:last-child)::after { margin: 0 0.35em; opacity: 1; }
.wp-block-breadcrumbs ol > li:not(:first-child):not(:last-child) { flex: 0 1000 auto; min-width: 3em; }
.wp-block-breadcrumbs ol > li:last-child { flex: 0 1 auto; }
.wp-block-breadcrumbs ol > li:not(:first-child) > :is(a, span) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Techniqk<sup>™</sup> in the trail (inc/breadcrumbs/), the header menu and the footer (user,
   2026-10-27): the raised ™ doesn't make its crumb, menu item or footer row taller. */
.wp-block-breadcrumbs sup,
.wp-block-navigation sup,
.os-footer sup { line-height: 0; }
.wp-block-breadcrumbs a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---------- OS Author Box ----------
   A person on a blue gradient card (165deg brand → navy-deep): photo on the left (297×320, lg
   corners, cropped from the bottom, made for cut-out portraits), then the name, job title /
   organisation lines and a text block in white. Below 769px it stacks. Used after blog posts
   (os/blog-post-author, Avatar + author bindings, inc/blog/post.php) and for the CSR founder's
   message (os/csr-founder, Image + plain text) — moved here from os-post.css on 2026-10-14 so any
   page can use it without the blog post CSS/JS. */
.os-author-box {
	display: flex;
	align-items: stretch;
	gap: 48px;
	padding: 32px;
	border-radius: var(--wp--preset--border-radius--lg);
	background: linear-gradient(165deg, var(--wp--preset--color--brand) 0%, var(--wp--preset--color--navy-deep) 100%);
}
.os-author-box > * { margin: 0; }
.os-author-box__photo {
	flex: 0 0 297px;
	height: 320px;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--color--brand);
}
.os-author-box__photo img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	object-position: 50% 100%;
}
.os-author-box__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-width: 0;
	min-height: 320px;
}
.os-author-box__body > * { margin: 0; }
.os-author-box__head > * { margin: 0; }
.os-author-box__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--title);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.5px;
	color: var(--wp--preset--color--white);
}
.os-author-box__head > .os-author-box__role {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.8);
}
.os-author-box__head > .os-author-box__name + .os-author-box__role { margin-top: 8px; }
.os-author-box__role:empty { display: none; }
.os-author-box .os-author-box__linkedin {
	display: inline-flex;
	align-self: flex-start;
	border-radius: 4px;
	color: var(--wp--preset--color--white);
	transition: color var(--os-fast) var(--os-ease), transform var(--os-base) var(--os-ease);
}
.os-author-box .os-author-box__linkedin:hover { color: var(--wp--preset--color--teal); transform: translateY(-2px); }
.os-author-box__linkedin:focus-visible { outline: 2px solid var(--wp--preset--color--white); outline-offset: 3px; }
.os-author-box__bio {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.9);
}

@media (max-width: 1100px) {
	.os-author-box { gap: 32px; padding: 24px; }
	.os-author-box__photo { flex-basis: 240px; height: 259px; }
	.os-author-box__body { min-height: 259px; }
}
@media (max-width: 768px) {
	.os-author-box { flex-direction: column; gap: 24px; padding: 20px; }
	.os-author-box__photo { flex: none; width: 240px; max-width: 100%; }
	.os-author-box__body { min-height: 0; gap: 16px; }
	.os-author-box__name { font-size: var(--wp--preset--font-size--x-large); }
	.os-author-box__bio { font-size: var(--wp--preset--font-size--medium); }
}

/* ---------- OS Contact Methods ----------
   Ways to get in touch as stacked rows (user, 2026-10-14; redesigned the same day for more
   prominence; first on the CSR closing CTA). Markup, core blocks only: a Group .os-contact-methods
   holding one Group per way, .os-contact-method plus an icon modifier (--phone, --email, --calendar), each
   with an empty .os-contact-method__icon Group, a __label paragraph and a __value paragraph whose
   link covers the whole row. Row: 56px icon tile, then the label (eyebrow type) over the value
   (24px 600); no arrow (user, 2026-10-14); hover lifts the row. Light by default (white row, dark
   blue gradient tile with a white icon); add os-contact-methods--on-dark on a dark panel (glass
   row, white tile with a brand-blue icon, teal label, white value; user, 2026-10-14). Duplicate a row and change its modifier and link
   to add one; a new icon = a --<name> modifier with its mask-image. */
.os-contact-methods { display: flex; flex-direction: column; gap: 16px; }
.os-contact-methods > * { margin: 0; }
.os-contact-method {
	position: relative;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-content: center;
	align-items: center;
	column-gap: 20px;
	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: var(--wp--preset--shadow--soft);
	color: var(--wp--preset--color--ink);
	transition: transform var(--os-base) var(--os-ease), border-color var(--os-fast) var(--os-ease), background-color var(--os-fast) var(--os-ease), box-shadow var(--os-base) var(--os-ease);
}
.os-contact-method > * { margin: 0; }
.os-contact-method > .os-contact-method__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 56px;
	height: 56px;
	border-radius: var(--wp--preset--border-radius--md);
	background: linear-gradient(141.3deg, #00509e 14.286%, #001f54 92.418%);
}
.os-contact-method__icon::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--white);
	-webkit-mask: center / 28px no-repeat;
	mask: center / 28px no-repeat;
}
.os-contact-method--phone .os-contact-method__icon::before { -webkit-mask-image: url("../images/ui/phone.svg"); mask-image: url("../images/ui/phone.svg"); }
.os-contact-method--email .os-contact-method__icon::before { -webkit-mask-image: url("../images/ui/mail.svg"); mask-image: url("../images/ui/mail.svg"); }
.os-contact-method--calendar .os-contact-method__icon::before { -webkit-mask-image: url("../images/ui/calendar.svg"); mask-image: url("../images/ui/calendar.svg"); }
.os-contact-method > .os-contact-method__label {
	grid-column: 2;
	align-self: end;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 1.15px;
	color: var(--wp--preset--color--brand);
}
.os-contact-method > .os-contact-method__value {
	grid-column: 2;
	align-self: start;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.2px;
	overflow-wrap: anywhere;
	color: inherit;
}
.os-contact-method__value a { color: inherit; text-decoration: none; }
/* The link covers the row; z-index 1 keeps it over the masked icon (a mask makes its own layer,
   which would otherwise take the clicks). */
.os-contact-method__value a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.os-contact-method__value a:focus-visible { outline: none; }
.os-contact-method:has(a:focus-visible) { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 3px; }
.os-contact-method:hover {
	transform: translateY(-3px);
	border-color: rgb(0 80 158 / 0.4);
	box-shadow: var(--wp--preset--shadow--brand);
}

/* Editor: the icon tile is an empty Group, which the editor fills with its "choose a layout"
   placeholder (a 216px grey box that hid the icon and stretched the row); hide it so the tile shows
   its icon as on the front end. The block stays selectable from List View. The editor also wraps
   that empty Group in an unnamed div, so `.os-contact-method > .os-contact-method__icon` doesn't
   match there: the wrapper takes the icon's grid cell and the icon its tile, as on the front end. */
.is-root-container .os-contact-method__icon > .components-placeholder { display: none; }
.is-root-container .os-contact-method > :has(> .os-contact-method__icon) { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.is-root-container .os-contact-method__icon {
	width: 56px;
	height: 56px;
	border-radius: var(--wp--preset--border-radius--md);
	background: linear-gradient(141.3deg, #00509e 14.286%, #001f54 92.418%);
}
.is-root-container .os-contact-methods--on-dark .os-contact-method__icon { background: var(--wp--preset--color--white); }
@media (max-width: 768px) {
	.is-root-container .os-contact-method__icon { width: 48px; height: 48px; }
}
@media (max-width: 480px) {
	.is-root-container .os-contact-method__icon { width: 40px; height: 40px; }
}

/* On a dark panel. */
.os-contact-methods--on-dark .os-contact-method {
	border-color: rgb(255 255 255 / 0.18);
	background: rgb(255 255 255 / 0.08);
	box-shadow: 0 12px 32px rgb(0 10 40 / 0.25);
	color: var(--wp--preset--color--white);
}
.os-contact-methods--on-dark .os-contact-method > .os-contact-method__icon { background: var(--wp--preset--color--white); }
.os-contact-methods--on-dark .os-contact-method__icon::before { background-color: var(--wp--preset--color--brand); }
.os-contact-methods--on-dark .os-contact-method > .os-contact-method__label { color: var(--wp--preset--color--teal); }
.os-contact-methods--on-dark .os-contact-method:hover {
	border-color: rgb(20 199 180 / 0.7);
	background: rgb(255 255 255 / 0.14);
	box-shadow: 0 16px 40px rgb(0 10 40 / 0.35);
}
.os-contact-methods--on-dark .os-contact-method:has(a:focus-visible) { outline-color: var(--wp--preset--color--white); }

@media (max-width: 768px) {
	.os-contact-methods { gap: 12px; }
	.os-contact-method { grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 18px 20px; }
	.os-contact-method > .os-contact-method__icon { width: 48px; height: 48px; }
	.os-contact-method__icon::before { -webkit-mask-size: 24px; mask-size: 24px; }
	.os-contact-method > .os-contact-method__label { font-size: var(--wp--preset--font-size--x-small); }
	.os-contact-method > .os-contact-method__value { font-size: var(--wp--preset--font-size--large); }
}
/* Narrow phones: a 40px tile, so an email address keeps one line. */
@media (max-width: 480px) {
	.os-contact-method { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 16px; }
	.os-contact-method > .os-contact-method__icon { width: 40px; height: 40px; }
	.os-contact-method__icon::before { -webkit-mask-size: 20px; mask-size: 20px; }
	.os-contact-method > .os-contact-method__value { font-size: var(--wp--preset--font-size--medium); }
}
@media (prefers-reduced-motion: reduce) {
	.os-contact-method:hover { transform: none; }
}