/**
 * Industries listing page (/industries/, os/industry-list-* patterns). Built on the blog
 * listing's design: the hero and the cards section are the blog sections (os-blog.css, a
 * dependency, loaded first) with the same spacing, and every other section uses the same
 * rhythm: 48px top and bottom (24 on phones), left-aligned head, cards 24px apart.
 * Loads where a block with an "os-industry-list" class renders (os_interactive_styles).
 */

/* ---------- Shared: section spacing and heads ---------- */
.os-industry-list-why,
.os-industry-list-stats,
.os-industry-list-stories,
.os-industry-intro,
.os-industry-trust,
.os-industry-focus,
.os-industry-segments,
.os-industry-partners {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
:is(.os-industry-list-why, .os-industry-list-stats, .os-industry-list-stories, .os-industry-intro, .os-industry-trust, .os-industry-focus, .os-industry-segments, .os-industry-partners) > * { margin-block: 0; }

.os-industry-list__head > * { margin: 0; }
/* Section heads are centred, as on the Home page (user, 2026-10-03). */
.os-industry-list__head { text-align: center; }
.os-industry-list__head > * { margin-inline: auto; }
/* Eyebrow, H2 and note use the Home section head styles (OS Eyebrow, the theme H2, OS Lead),
   with no overrides here (user, 2026-10-08), and Home's gap between them: the OS Section Head
   token, 16px (10 on phones). */
.os-industry-list__head > * + h2,
.os-industry-list__head > h2 + * { margin-top: var(--wp--custom--section-head-gap); }
:is(.os-industry-list-stats, .os-industry-list-stories) > .os-industry-list__head + * { margin-top: 32px; }

/* At 1100px and below a story card grid becomes a compact carousel, whose 12px shadow room is
   cancelled by a -12px top margin (os-carousel.css, !important) that also wiped the 32px under
   the head: the cards touched the H2 (user, 2026-10-09). Keep the head gap: 32px (24 on phones)
   minus the 12px room. */
@media (max-width: 1100px) {
	.os-industry-list-stories > .os-industry-list__head + .os-carousel--compact { margin-top: 20px !important; }
}
@media (max-width: 768px) {
	.os-industry-list-stories > .os-industry-list__head + .os-carousel--compact { margin-top: 12px !important; }
}

@media (max-width: 768px) {
	:is(.os-industry-list-why, .os-industry-list-stats, .os-industry-list-stories, .os-industry-intro, .os-industry-trust, .os-industry-focus, .os-industry-segments, .os-industry-partners) {
		padding-top: calc(var(--wp--preset--spacing--90) * 0.6);
		padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6);
	}
	:is(.os-industry-list-stats, .os-industry-list-stories) > .os-industry-list__head + * { margin-top: 24px; }
}

/* ---------- Banner (os/industry-list-hero) ---------- */
/* Like the Home hero (H1, 18px lead, button, image on the right, image floats
   gently), but shorter: the blog hero's 38px spacing, so the breadcrumb sits where it does on the
   blog listing, and a 340px image instead of the Home hero's 520px area. Background: the Home
   hero's hero-glow (user, 2026-10-03), with Home's text colours (ink-deep H1, ink-soft lead).
   The H1 is one size (user, 2026-10-03): the blog listing's 48px (32 ≤880, 28 ≤540, from
   os-blog-hero). Stacks below 1101px like Home. */
.os-industry-list-hero.os-blog-hero {
	overflow-x: clip;
	background: var(--wp--preset--gradient--hero-glow);
}

.os-blog-hero > .os-industry-list-hero__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 543px);
	gap: 40px;
	align-items: center;
	margin-top: 24px;
}
.os-industry-list-hero__body > * { margin: 0; }
.os-industry-list-hero__copy > * { margin: 0; }

.os-industry-list-hero__copy > .os-industry-list-hero__title { max-width: 620px; line-height: 1.25; color: var(--wp--preset--color--ink-deep); }
.os-industry-list-hero__copy > .os-industry-list-hero__lead {
	max-width: 520px;
	margin-top: 22px;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}
.os-industry-list-hero__copy > .os-industry-list-hero__actions { margin-top: 32px; }

/* Image: 1200:752 at most 340px tall, rounded, floating like the Home hero's. */
.os-industry-list-hero__body > .os-industry-list-hero__media {
	overflow: hidden;
	aspect-ratio: 1200 / 752;
	max-height: 340px;
	border-radius: var(--wp--preset--border-radius--lg);
	box-shadow: var(--wp--preset--shadow--float);
}
.os-industry-list-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
	.os-industry-list-hero__body > .os-industry-list-hero__media { animation: os-drift 6s ease-in-out infinite; }
}
/* Image block styles (styles/blocks/image-os-*.json; user, 2026-10-15): the banner frames the
   figure, not the img, so each style is mirrored on it. OS Rounded + Shadow = the default above;
   OS Rounded drops the shadow; OS No Frame drops corners and shadow and contains the image in the
   same box instead of cropping it (for cut-outs and illustrations, like the L1 hero art). */
.os-industry-list-hero__body > .os-industry-list-hero__media.is-style-os-rounded { box-shadow: none; }
.os-industry-list-hero__body > .os-industry-list-hero__media.is-style-os-no-frame { border-radius: 0; box-shadow: none; }
.os-industry-list-hero__media.is-style-os-no-frame img { object-fit: contain; }

@media (max-width: 1100px) {
	.os-blog-hero > .os-industry-list-hero__body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.os-industry-list-hero__body > .os-industry-list-hero__media { width: 100%; max-width: 560px; max-height: none; margin-inline: auto; }
	.os-industry-list-hero__copy > .os-industry-list-hero__lead { max-width: 620px; }
}
@media (max-width: 768px) {
	.os-industry-list-hero__copy > .os-industry-list-hero__lead { margin-top: 16px; font-size: var(--wp--preset--font-size--medium); }
	.os-industry-list-hero__copy > .os-industry-list-hero__actions { margin-top: 24px; }
	.os-blog-hero > .os-industry-list-hero__body { gap: 24px; }
}

/* ---------- OS Banner (No Image) (os/banner-no-image) ---------- */
/* The listing banner above without its image column (user, 2026-10-19, first on Leadership):
   breadcrumbs, H1 and description centred in the wide column, on plain white (user,
   2026-10-19: no gradient; a background colour picked in the editor still wins), with 48px below
   (32 ≤768; user, 2026-10-19: less than the first 72). */
.os-banner-no-image.os-blog-hero { padding-bottom: 48px; background: var(--wp--preset--color--white); }
/* Inside a Group with its own background (e.g. the Hero Glow gradient shared with the next
   section, user 2026-10-19 on Leadership), the banner is see-through so the two read as one. */
.has-background > .os-banner-no-image.os-blog-hero { background: none; }
.os-banner-no-image.os-blog-hero > .os-industry-list-hero__body { display: block; margin-top: 24px; } /* breadcrumbs → H1 (user, 2026-10-19: was 40, 24 ≤768) */
/* Breadcrumbs, title and description centred (user, 2026-10-19). The trail is a flex row whose
   last crumb shrinks with an ellipsis (os-theme.css), so a long trail still fits on phones. */
.os-banner-no-image > .wp-block-breadcrumbs ol { justify-content: center; }
.os-banner-no-image .os-industry-list-hero__copy { text-align: center; }
.os-banner-no-image .os-industry-list-hero__copy > .os-industry-list-hero__title { max-width: 820px; margin-inline: auto; }
.os-banner-no-image .os-industry-list-hero__copy > .os-industry-list-hero__lead { max-width: 720px; margin-inline: auto; }
/* A button row under the description is centred with it (first on the Thank You page). */
.os-banner-no-image .os-industry-list-hero__actions { justify-content: center; }
@media (max-width: 768px) {
	.os-banner-no-image.os-blog-hero { padding-bottom: 32px; }
	.os-banner-no-image.os-blog-hero > .os-industry-list-hero__body { margin-top: 16px; }
}

/* ---------- OS Thank You (os/thank-you) ---------- */
/* The page a sent form opens (user, 2026-10-27): the OS Banner (No Image) on Hero Glow, given
   the window's height above the footer (header 82px, 72 ≤768) so the page doesn't look cut
   short; breadcrumbs at the top, the message centred in the space below them. The two
   description lines sit 12px apart as one paragraph. */
.os-thank-you { display: flex; flex-direction: column; min-height: max(480px, calc(100svh - 82px)); }
.os-thank-you > .os-banner-no-image.os-blog-hero { display: flex; flex: 1; flex-direction: column; padding-bottom: var(--wp--preset--spacing--80); }
.os-thank-you > .os-banner-no-image.os-blog-hero > .os-industry-list-hero__body { width: 100%; margin-block: auto; padding-top: 48px; }
.os-thank-you .os-industry-list-hero__lead + .os-industry-list-hero__lead { margin-top: 12px; }
@media (max-width: 768px) {
	.os-thank-you { min-height: max(420px, calc(100svh - 72px)); }
	.os-thank-you > .os-banner-no-image.os-blog-hero > .os-industry-list-hero__body { padding-top: 32px; }
}

/* ---------- OS Full Background Banner (os/industry-hero-full) ---------- */
/* The sitewide full-background banner since 2026-10-17 (user: one name, two styles, this
   spacing everywhere; the Services, Partners L1, Platforms L2 and CSR banners are built on it,
   their desktop image an Image block or the page's featured image). The listing banner above,
   but its image is the background of the whole section (user,
   2026-10-08, from Satish's version; os/industry-hero keeps the image beside the text): still
   the Image block (editable, the LCP image with 100vw sizes), stretched behind everything and
   cropped to cover. The text keeps its column and position. The image shows as it is at every
   width: no overlay, the client's images carry their own fade (user, 2026-10-17). A Background
   image set on the section replaces the Image block's image, and a "Mobile image (optional)"
   block gives phones (≤768) their own image (inc/banner/full-background.php).
   Two styles (user, 2026-10-17), for dark and light images:
   - Light text (default, or "OS Banner Light Text"): white breadcrumbs and title, 88% white
     intro, as in Figma; navy behind it until an image loads (or without one).
   - "OS Banner Dark Text" (styles/blocks/group-banner-dark-text.json): the Industries banner's
     own ink colours (ink-deep title, ink-soft intro, the theme's breadcrumbs) on the hero glow.
   A colour picked on those blocks in the editor wins over both. */
.os-industry-list-hero.os-industry-hero--full {
	position: relative;
	isolation: isolate;
	background: var(--wp--preset--color--navy-deep);
}
.os-industry-list-hero.os-industry-hero--full.is-style-os-banner-dark-text { background: var(--wp--preset--gradient--hero-glow); }
/* Links inherit the trail's colour (theme.json), so a colour picked on the block reaches them. */
.os-industry-hero--full:not(.is-style-os-banner-dark-text) .wp-block-breadcrumbs,
.os-industry-hero--full:not(.is-style-os-banner-dark-text) .os-industry-list-hero__copy > .os-industry-list-hero__title { color: var(--wp--preset--color--white); }
.os-industry-hero--full:not(.is-style-os-banner-dark-text) .os-industry-list-hero__copy > .os-industry-list-hero__lead { color: rgb(255 255 255 / 0.88); }
/* On the dark blue images (light text) a button with no style of its own is OS Green, hover
   included (user, 2026-10-17: "on dark blue background use green button"); a style or colour
   picked on the button wins. Dark text banners keep the theme's brand button. */
.os-industry-hero--full:not(.is-style-os-banner-dark-text) .wp-block-button:is(:not([class*="is-style-"]), .is-style-fill) > .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--green);
}
.os-industry-hero--full:not(.is-style-os-banner-dark-text) .wp-block-button:is(:not([class*="is-style-"]), .is-style-fill) > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--white);
}
.os-industry-hero--full:not(.is-style-os-banner-dark-text) .wp-block-button:is(:not([class*="is-style-"]), .is-style-fill) > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--green-dark);
	box-shadow: 0 8px 20px rgba(1, 158, 132, 0.3);
}
/* On the light images (Dark text) the button is the brand blue, also when it carries OS Green
   (user, 2026-10-17: "On DevRev the button should have been blue" — the older Services banners
   set OS Green on every button), hover included. A colour picked on the button wins. */
.os-industry-hero--full.is-style-os-banner-dark-text .wp-block-button.is-style-os-green > .wp-block-button__link:not(.has-background) {
	background-color: var(--wp--preset--color--brand);
}
.os-industry-hero--full.is-style-os-banner-dark-text .wp-block-button.is-style-os-green > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--brand-dark);
	box-shadow: var(--wp--preset--shadow--brand);
}
.os-industry-hero--full .os-industry-list-hero__body > .os-industry-list-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	aspect-ratio: auto;
	border-radius: 0;
	box-shadow: none;
	animation: none;
}
.os-industry-hero--full .os-industry-list-hero__media img { height: 100%; object-position: center; }
/* The Services banners' lead is the page excerpt (Post Excerpt: a <p> in a <div>), with no
   "read more" link (the button is the call to action; hides its empty field in the editor too). */
.os-industry-list-hero__lead p { margin: 0; }
.os-industry-list-hero__lead :is(.wp-block-post-excerpt__more-text, .wp-block-post-excerpt__more-link) { display: none; }
/* Side by side the 340px image set the banner's height and the text was centred beside it:
   keep that height so the text stays where it was. */
@media (min-width: 1101px) {
	.os-industry-hero--full .os-industry-list-hero__body { min-height: 340px; }
}
/* The main image may be a <picture> (a mobile image as its <source>, inc/banner/full-background.php). */
.os-industry-hero--full .os-industry-list-hero__media picture { display: block; width: 100%; height: 100%; }
/* The "Mobile image (optional)" slot is only seen in the editor (the page renders it as the
   picture's source), kept small under the text there. */
.os-industry-hero--full .os-industry-list-hero__media-mobile { max-width: 240px; }

/* Phones, both styles (user, 2026-10-17): without a mobile image the desktop image is cropped to
   its right end, where the client's images put their subject (the left holds the built-in fade
   behind the text). A mobile image (the <picture>'s source) is shown centred. */
@media (max-width: 768px) {
	.os-industry-list-hero.os-industry-hero--full .os-industry-list-hero__media img { object-position: right center; }
	.os-industry-list-hero.os-industry-hero--full .os-industry-list-hero__media picture img { object-position: center; }
}

/* ---------- Why industry depth matters (os/industry-list-why) ---------- */
/* Centred head (as on Home), the text as centred lead paragraphs below it (the proof points are
   part of the text, not boxes). */
.os-industry-why {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	justify-items: center;
}
.os-industry-why > * { margin: 0; }
.os-industry-why__head { text-align: center; }
.os-industry-why__head > * { margin: 0; }
.os-industry-why__head > h2 { margin-top: var(--wp--custom--section-head-gap); }

.os-industry-why__body { width: 100%; max-width: 980px; }
.os-industry-why__body > * { margin: 0; }
/* The Why paragraphs keep their own size over the shared OS Lead style (24px) they carry
   (user, 2026-10-09): 18px (16 on phones), 500, 1.6, as before 2026-10-08. */
.os-industry-why__body > .os-industry-why__text {
	max-width: 860px;
	margin-inline: auto;
	text-align: center;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}
.os-industry-why__body > .os-industry-why__text + .os-industry-why__text { margin-top: 16px; }

@media (max-width: 768px) {
	.os-industry-why { gap: 16px; }
	.os-industry-why__body > .os-industry-why__text { font-size: var(--wp--preset--font-size--medium); }
}

/* ---------- Client base (os/industry-list-stats) ---------- */
.os-industry-stats {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	padding: 48px;
	overflow: hidden;
	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%);
	color: var(--wp--preset--color--white);
}
.os-industry-stats::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--wp--preset--color--teal) 20%, transparent) 0, transparent 360px),
		radial-gradient(circle at 0 0, color-mix(in srgb, var(--wp--preset--color--electric) 22%, transparent) 0, transparent 320px);
	pointer-events: none;
}
.os-industry-stats > * { margin: 0; }
/* Heading and note inside the card, above the metrics. */
.os-industry-stats > .os-industry-list__head { margin-bottom: 40px; }
.os-industry-stats .os-industry-list__head > h2 { color: var(--wp--preset--color--white); }
/* The note keeps its own size over the shared OS Lead style (24px) it carries (user, 2026-10-09):
   16px, 400, 1.5, as before 2026-10-08. */
.os-industry-stats .os-industry-list__note {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--custom--color--on-brand);
}

.os-industry-stats__metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.os-industry-stats__metrics > .os-industry-stat {
	margin: 0;
	padding: 0 32px;
	border-left: 1px solid rgb(255 255 255 / 0.18);
}
.os-industry-stats__metrics > .os-industry-stat:first-child { border-left: 0; }
.os-industry-stat { text-align: center; }
.os-industry-stat > * { margin: 0; }
.os-industry-stat__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -1.08px;
	white-space: nowrap;
}
.os-industry-stat > .os-industry-stat__label {
	max-width: 280px;
	margin: 12px auto 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--custom--color--on-brand);
}

.os-industry-stats > .os-industry-stats__regions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid rgb(255 255 255 / 0.18);
}
.os-industry-stats__regions > .os-industry-region {
	margin: 0;
	padding: 20px 24px;
	border: 1px solid rgb(255 255 255 / 0.14);
	border-radius: var(--wp--preset--border-radius--md);
	background: rgb(255 255 255 / 0.08);
	transition: background-color var(--os-base) var(--os-ease), border-color var(--os-base) var(--os-ease);
}
.os-industry-region:hover { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.24); }
.os-industry-region > * { margin: 0; }
/* Shown as typed ("In the UAE:"), so no uppercase eyebrow styling. */
.os-industry-region__name {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--white);
}
.os-industry-region > .os-industry-region__text {
	margin-top: 6px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--custom--color--on-brand);
}

/* Client base: responsive. Metrics stack on phones. */
@media (max-width: 1100px) {
	.os-industry-stats { padding: 40px 32px; }
	.os-industry-stat__value { font-size: var(--wp--preset--font-size--display); }
	.os-industry-stats__metrics > .os-industry-stat { padding: 0 24px; }
}
@media (max-width: 768px) {
	.os-industry-stats { padding: 24px 20px; }
	.os-industry-stats > .os-industry-list__head { margin-bottom: 24px; }
	.os-industry-stats__metrics { grid-template-columns: minmax(0, 1fr); }
	.os-industry-stats__metrics > .os-industry-stat,
	.os-industry-stats__metrics > .os-industry-stat:first-child { padding: 20px 0; border-left: 0; border-top: 1px solid rgb(255 255 255 / 0.18); }
	.os-industry-stats__metrics > .os-industry-stat:first-child { padding-top: 0; border-top: 0; }
	.os-industry-stat__value { font-size: var(--wp--preset--font-size--section); }
	.os-industry-stat > .os-industry-stat__label { margin-top: 8px; max-width: none; }
	.os-industry-stats > .os-industry-stats__regions { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 4px; padding-top: 20px; }
	.os-industry-stats__regions > .os-industry-region { padding: 16px 20px; }
}

/* ---------- Industry cards (os/industry-list): image, title, excerpt, Proof, Know more ---------- */
/* Everything a visitor compares (what we do, the proof) is visible at rest; the whole card is
   the link (stretched title link). Hover / keyboard focus: the card lifts like the blog cards,
   the image zooms, the title turns brand and a TechnIQk bar draws along the bottom. */
.os-industry-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.os-industry-grid > li { display: flex; margin: 0; }

/* Interaction and outline exactly as the Home Platforms cards (os-platform, user 2026-10-03):
   the list item is the 1.5px TechnIQk gradient frame (17.5px corners), the card is the white
   layer inside it (16px, the lg radius; less round than Platforms' 24.5px, user 2026-10-08). On hover the frame lifts 4px (os-hover-lift) and the card a
   further 8px, so the gradient shows as a glowing edge below it. */
.os-industry-grid > li {
	box-sizing: border-box;
	padding: 1.5px;
	border-radius: calc(var(--wp--preset--border-radius--lg) + 1.5px);
	background: var(--wp--preset--gradient--techniqk);
	transition: transform var(--os-base) var(--os-ease), box-shadow var(--os-base) var(--os-ease);
}

.os-industry-card {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--color--white);
	transition: transform var(--os-base) var(--os-ease), box-shadow var(--os-base) var(--os-ease);
}
.os-industry-card > * { margin: 0; }

.os-industry-card__image {
	flex-shrink: 0;
	height: 220px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
.os-industry-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* No featured image: a brand tile keeps the cards in line. */
.os-industry-card:not(:has(> .os-industry-card__image))::before {
	content: "";
	flex-shrink: 0;
	height: 220px;
	background: url("../images/insights/pattern.svg") right -40px bottom -20px / 406px 195px no-repeat, linear-gradient(165deg, var(--wp--preset--color--brand) 0, var(--wp--preset--color--navy-deep) 100%);
}
.os-industry-card__body {
	box-sizing: border-box;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 28px 28px;
}
.os-industry-card__body > * { margin: 0; }
.os-industry-card__body > .os-industry-card__title {
	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.3px;
	color: var(--wp--preset--color--ink);
}
.os-industry-card__title a { color: inherit; text-decoration: none; }
.os-industry-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.os-industry-card__body > .os-industry-card__excerpt { margin-top: 8px; }
.os-industry-card__excerpt p {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--custom--color--tertiary);
}

.os-industry-card__body > .os-industry-card__proof {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin-top: 20px;
	padding: 14px 16px;
	border-radius: var(--wp--preset--border-radius--md);
	background: color-mix(in srgb, var(--wp--preset--color--brand) 6%, var(--wp--preset--color--white));
}
.os-industry-card__proof > * { margin: 0; }
.os-industry-card__proof-label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 1.15px;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}
.os-industry-card__proof > .os-industry-card__proof-text {
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
}
/* A services line ("A | B | C") shows as OS Tags: plain labels, no box behind them, and they
   wrap inside a narrow card instead of overflowing it. The OS Tags type (styles/blocks/
   list-tags.json) only prints with a List block, so it is repeated here. */
.os-industry-card__body > .os-industry-card__proof--tags { padding: 0; background: none; }
.os-industry-card__proof > .os-industry-card__tags {
	gap: 8px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: normal;
	color: var(--wp--preset--color--ink);
}
.os-industry-card__tags > li { max-width: 100%; box-sizing: border-box; white-space: normal; }

/* Know more sits at the bottom, so the links line up across a row. */
.os-industry-card__body > .wp-block-read-more { position: relative; z-index: 2; margin-top: auto; }
.os-industry-card__body > :nth-last-child(2) { margin-bottom: 24px; }

.os-industry-grid > li:hover,
.os-industry-grid > li:has(:focus-visible) { transform: translateY(-4px); box-shadow: 0 20px 44px rgb(23 72 232 / 0.12); }
.os-industry-grid > li:hover > .os-industry-card,
.os-industry-grid > li:has(:focus-visible) > .os-industry-card { transform: translateY(-8px); box-shadow: 0 32px 64px rgb(23 72 232 / 0.14); }
.os-industry-grid > li:hover .wp-block-read-more.is-style-os-explore,
.os-industry-grid > li:has(:focus-visible) .wp-block-read-more.is-style-os-explore { background-size: 100% 1px; }
.os-industry-card:has(.os-industry-card__title a:focus-visible) { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 3px; }
.os-industry-card__title a:focus-visible { outline: 0; }

.os-industry-list__empty {
	margin: 0;
	padding: 48px 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--large);
}

/* Industry cards: responsive (3 / 2 / 1 per row), reduced motion, editor. */
@media (max-width: 1100px) {
	.os-industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.os-industry-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.os-industry-card__image,
	.os-industry-card:not(:has(> .os-industry-card__image))::before { height: 200px; }
	.os-industry-card__body { padding: 20px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.os-industry-grid > li:hover, .os-industry-grid > li:has(:focus-visible),
	.os-industry-grid > li:hover > .os-industry-card, .os-industry-grid > li:has(:focus-visible) > .os-industry-card { transform: none; }
}
/* Editor: the stretched title link would cover the card's other blocks. */
.is-root-container .os-industry-card__title a::after { content: none; }

/* ---------- Success stories (os/industry-list-stories) ---------- */
/* Related Blogs style (user, 2026-10-03): the blog cards (os-blog-card, os-blog.css; image, tag,
   title, brand panel sliding up on hover; a tap opens the story, os-blog.js), a 3-column grid on
   desktop and an OS Carousel at 1100px and below (os-carousel--compact, os-carousel.css). The
   background is the banner's (the Home hero-glow, user 2026-10-03). Titles are case-study length,
   so they get 3 lines. */
.os-industry-list-stories.os-industry-list-stories {
	background: var(--wp--preset--gradient--hero-glow);
}
.os-case-grid > * { margin: 0; }
.os-case-grid .os-blog-card { --os-card-panel: 196px; }
.os-case-grid .os-blog-card__body > .os-blog-card__title { -webkit-line-clamp: 3; line-clamp: 3; }
@media (max-width: 768px) {
	.os-case-grid .os-blog-card { --os-card-panel: 188px; }
}
/* Industry pages (os/industry-stories, user 2026-10-04): the same cards as an OS Carousel at every
   width (3 / 2 / 1 per view). The padding, cancelled by negative margins, leaves room inside the
   scroll box for the cards' shadow, hover lift and focus ring (as os-carousel--compact does).
   The scroll box is the content width (wide size at most) + 12px each side, centred, so the cards
   line up with the content edges at every width (user, 2026-10-04: they sat off-centre when the
   box kept the wide size and was only shifted left). */
.os-industry-list-stories .os-case-carousel.is-style-os-carousel {
	--os-case-w: min(100%, var(--wp--style--global--wide-size));
	width: calc(var(--os-case-w) + 24px);
	max-width: none;
	margin: -12px 0 -28px calc((100% - var(--os-case-w)) / 2 - 12px) !important;
	padding: 12px 12px 28px;
	scroll-padding-inline: 12px;
}
@media (max-width: 768px) {
	.os-industry-list-stories .os-case-carousel.is-style-os-carousel { margin-top: -12px !important; gap: 16px; }
}
/* Success Stories + Latest Insights as two tabs (OS Tabs, user 2026-10-04), centred under the
   head. The tabs look like the Home Industries tabs (user: consistency; os-theme.css
   .os-industries__tabs): 43px chips, radius 8, #CACACA edge, 14px semibold ink; the selected
   tab is ink with white text. Each panel is a card carousel. */
.os-stories-tabs > .os-tabs__list {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 32px;
}
.os-stories-tabs .os-tabs__tab.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;
	background: transparent;
	box-shadow: none;
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	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-stories-tabs .os-tabs__tab.os-tab-label:hover { border-color: var(--wp--preset--color--ink); background: transparent; }
.os-stories-tabs .os-tabs__tab.os-tab-label[aria-selected="true"] {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
	box-shadow: none;
	color: var(--wp--preset--color--white);
}
.os-stories-tabs .os-tabs__panels > * { margin: 0; }
@media (max-width: 1360px) {
	.os-stories-tabs .os-tabs__tab.os-tab-label { padding: 0 14px; font-size: 13px; }
}
@media (max-width: 768px) {
	.os-stories-tabs > .os-tabs__list { margin-bottom: 24px; }
}
/* Editor canvas (.is-root-container exists only there): the tab row is built on the front end
   (os_render_tabs), so the editor shows each panel stacked with its label paragraph on top. Draw
   that label as the selected chip, centred, and divide the panels, so each tab reads as a tab
   with its own content under it (user, 2026-10-15: Contact Us locations tabs). */
.is-root-container .os-stories-tabs > * > .os-tab-label {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: fit-content;
	height: 43px;
	margin: 0 auto 32px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 8px;
	background: var(--wp--preset--color--ink);
	box-shadow: none;
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	color: var(--wp--preset--color--white);
	white-space: nowrap;
}
.is-root-container .os-stories-tabs > * > .os-tab-label::before {
	content: "Tab";
	margin-right: 10px;
	padding-right: 10px;
	border-right: 1px solid rgb(255 255 255 / 0.32);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
}
.is-root-container .os-stories-tabs > * + :not(.block-list-appender) {
	margin-top: 48px;
	padding-top: 48px;
	border-top: 1px dashed #cacaca;
}

/* "Learn more" looks like the cards' Know more link (OS Explore Link) but is text: the title is
   the card's one link (no vague duplicate link), and a click anywhere opens it (os-blog.js). */
.os-blog-card__desc > .os-blog-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 2px;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: normal;
	text-transform: uppercase;
	transition: background-size var(--os-base) var(--os-ease);
}
.os-blog-card__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;
}
@media (hover: hover) {
	.os-blog-card:hover .os-blog-card__link { background-size: 100% 1px; }
	.os-blog-card:hover .os-blog-card__link::after { animation: os-arrow-out-in 0.45s ease; }
}
.os-blog-card:has(:focus-visible) .os-blog-card__link { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) {
	.os-blog-card__link::after { animation: none !important; }
}

/* ---------- Awards (os/industry-list-awards) ---------- */
/* The Home "Analyst & industry recognitions" section (user, 2026-10-03): os-news /
   os-recognition / os-award-card from os-theme.css and the OS Carousel. A card without a logo
   shows its badge alone, at the left. Spacing = the standard section spacing of these pages,
   48px (24 on phones), not Home's 100px above / 90 below in a fixed 599px, and the head 32px
   (24) above the cards as in the other sections, not Home's 60 (user, 2026-10-09). */
.os-news.os-industry-list-awards {
	height: auto;
	padding-top: 48px !important;
	padding-bottom: 48px !important;
}
/* The cards are the Awards Recognition cards (carousel) Query Loop on UAT since 2026-10-22: the
   track sits one level down, in the query. */
.os-industry-list-awards > .os-news__track,
.os-industry-list-awards > .wp-block-query > .os-news__track { margin-top: 32px !important; }
/* Editor: os-carousel.css isn't loaded there, so the award cards stacked full width; wrap them 3 to a
   row (as the Partners L0 awards, os-partners.css). */
.is-root-container .os-industry-list-awards > .is-style-os-carousel { display: flex; flex-wrap: wrap; gap: 24px; }
.is-root-container .os-industry-list-awards > .is-style-os-carousel > * { flex: 0 0 calc((100% - 48px) / 3); margin: 0 !important; }
@media (max-width: 768px) {
	.os-news.os-industry-list-awards { padding-top: 24px !important; padding-bottom: 24px !important; }
	.os-industry-list-awards > .os-news__track,
	.os-industry-list-awards > .wp-block-query > .os-news__track { margin-top: 24px !important; }
}

/* ---------- Industry page intro (os/industry-intro, Figma 616:12968) ---------- */
/* Eyebrow + H2 (443px) on the left, the introduction (652px, 18px medium) on the right, pushed
   apart; white. Section spacing = the Industries page's, from the shared rule at the top
   (user, 2026-10-04). Stacks at 880px. */
.os-industry-intro__body {
	display: grid;
	grid-template-columns: minmax(0, 443px) minmax(0, 652px);
	justify-content: space-between;
	align-items: start;
	gap: 40px;
}
.os-industry-intro__body > *,
.os-industry-intro__head > *,
.os-industry-intro__text > * { margin: 0; }
/* The theme H2 as on Home (no line-height / letter-spacing override) and Home's head gap
   (user, 2026-10-08). */
.os-industry-intro__head > .os-industry-intro__title {
	margin-top: var(--wp--custom--section-head-gap);
	font-size: var(--wp--preset--font-size--section);
}
.os-industry-intro__text > * {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.5;
}
.os-industry-intro__text > * + * { margin-top: 16px; }

/* Side by side, the text starts level with the H2, not the eyebrow (user, 2026-10-08): the head
   joins the body grid, eyebrow in row 1, H2 and text in row 2 (the H2's head-gap margin repeated). */
@media (min-width: 881px) {
	.os-industry-intro__body { row-gap: 0; }
	.os-industry-intro__body > .os-industry-intro__head { display: contents; }
	.os-industry-intro__head > * { grid-column: 1; }
	.os-industry-intro__body > .os-industry-intro__text { grid-column: 2; grid-row: 2 / span 99; margin-top: var(--wp--custom--section-head-gap); }
}

@media (max-width: 880px) {
	.os-industry-intro__body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 768px) {
	.os-industry-intro__text > * { font-size: var(--wp--preset--font-size--medium); }
}

/* ---------- Industry page results (os/industry-trust-stats) ---------- */
/* The Home Trust Stats band and metric row (os-theme.css), with the Industries section spacing
   (shared rule above) instead of Home's 86px / 476px. The labels are sentences, not Home's
   two words: numbers line up at the top, cells grow with their text (Home's fixed heights would clip it) and four cells
   go 2 x 2 below 1101px and stack below 541px (Home's rows are built for five). */
.os-industry-trust .os-industry-list__head > h2 { color: var(--wp--preset--color--white); }
/* Numbers on one row (user, 2026-10-04): Home bottom-aligns the cells, which only lines the
   numbers up when every label is one line, so these start at the top instead. */
.os-industry-trust .os-metric { justify-content: flex-start; height: auto; min-height: 180px; padding-top: 40px; }
@media (max-width: 1100px) {
	.os-industry-trust .os-metric { flex-basis: 50%; }
	.os-industry-trust .os-metric:nth-child(odd) { border-right: 1px solid rgb(255 255 255 / 0.18); }
	.os-industry-trust .os-metric:nth-child(even) { border-right: none; }
}
@media (max-width: 768px) {
	.os-industry-trust .os-metric { min-height: 140px; padding-top: 24px; }
	.os-industry-trust .os-metric:last-child { flex-basis: 50%; }
}
@media (max-width: 540px) {
	.os-industry-trust .os-metric,
	.os-industry-trust .os-metric:last-child { flex-basis: 100%; min-height: 0; border-right: none; }
}

/* ---------- Industry page focus areas (os/industry-focus) ---------- */
/* Light and easy to read (user, 2026-10-04). Background = Home's Platforms section, the Aurora
   gradient, set on the block (user, 2026-10-08; was the industries wash). Plain white cards with
   the Success Stories cards' 16px corners (user, 2026-10-08; were radius 24 with two accent
   glows), Card Blue edge, padding 40, soft shadow; dark text, 16px description. No hover.
   Columns, not a scroll (user, 2026-10-08: the pinned sideways row and its progress bar were
   removed): 1 on phones (≤640), 2 on tablets (641–1100: three would leave ~220px of text at
   1024), 3 on desktop and larger screens (user, 2026-10-08: no 4th column above 1440). A short
   last row is centred under the centred head. Cards in a row share its height. */
.os-industry-focus .os-industry-list__head > h2 { max-width: 897px; }
.os-industry-focus > .os-industry-focus__pin,
.os-industry-focus__pin > * { margin-block: 0; }
.os-industry-focus__row {
	--os-focus-cols: 3;
	--os-focus-gap: 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--os-focus-gap);
	margin-top: 32px !important;
}
.os-industry-focus__row > * { margin: 0; }

.os-focus-card {
	position: relative;
	flex: 0 0 calc((100% - (var(--os-focus-cols) - 1) * var(--os-focus-gap)) / var(--os-focus-cols));
	min-width: 0;
	overflow: hidden;
	padding: 40px;
	border: 1px solid var(--wp--custom--color--card-blue);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--soft);
}
.os-focus-card > * { margin: 0; }
.os-focus-card > .os-focus-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.3px;
	color: var(--wp--preset--color--ink-deep);
}
.os-focus-card > .os-focus-card__text {
	margin-top: 12px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-soft);
}

@media (max-width: 1100px) {
	.os-industry-focus__row { --os-focus-cols: 2; }
	.os-focus-card { padding: 32px; }
}
@media (max-width: 768px) {
	.os-industry-focus__row { --os-focus-gap: 16px; margin-top: 24px !important; }
	.os-focus-card { padding: 28px; }
	.os-focus-card > .os-focus-card__title { font-size: var(--wp--preset--font-size--large); }
	.os-focus-card > .os-focus-card__text { font-size: 15px; }
}
@media (max-width: 640px) {
	.os-industry-focus__row { --os-focus-cols: 1; }
}

/* ---------- Industry page segments (os/industry-segments, Figma 618:13661) ---------- */
/* Head on top (the intro's eyebrow + 40px H2, os-industry-intro__head), white cards in 2
   columns below it (user, 2026-10-08; Figma had the head on the left with the cards beside
   it, pinned while they scrolled — no pinned head now), on the OS Blue Band (user, 2026-10-04:
   a section breaker in the run of light sections; os-theme.css) with a white head. Section
   spacing from the shared rule. One column below 641. */
/* The band clips its decoration with overflow: hidden; clip does the same without making the
   section a scroll container. */
.os-industry-segments.is-style-os-blue-band { overflow: clip; }
/* No orbit lines or spinning ring here (user, 2026-10-04): just the band's gradient and glow. */
.os-industry-segments.is-style-os-blue-band::before,
.os-industry-segments.is-style-os-blue-band::after { content: none; }
.os-industry-segments .os-industry-intro__head > * { color: var(--wp--preset--color--white); }
.os-industry-segments__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
}
.os-industry-segments__body > * { margin: 0; }
.os-industry-segments__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
.os-industry-segments__grid > * { margin: 0; }
/* Icon on the left of the title and text at every width (user, 2026-10-08; was above them). */
.os-segment-card {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-content: start;
	gap: 8px 24px;
	padding: 32px;
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--color--white);
	box-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
	color: var(--wp--preset--color--ink);
}
.os-segment-card > * { grid-column: 2; margin: 0; }
/* Icon on a 48px tile, so the four read as a set (user, 2026-10-04). One tile colour on every
   card (user, 2026-10-08; was a different tint per card): the soft teal tint behind the
   brand-blue icons. */
.os-segment-card > .os-segment-card__icon {
	display: grid;
	place-items: center;
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 48px;
	height: 48px;
	border-radius: var(--wp--preset--border-radius--md);
	background: color-mix(in srgb, var(--wp--preset--color--teal) 18%, var(--wp--preset--color--white));
}
.os-segment-card > .os-segment-card__icon img { display: block; width: 24px; height: 24px; }
/* No icon (hidden with block visibility or removed; user, 2026-10-26): the title and text take
   the whole card instead of leaving the 48px icon column empty. */
.os-segment-card:not(:has(> .os-segment-card__icon)) { grid-template-columns: minmax(0, 1fr); }
.os-segment-card:not(:has(> .os-segment-card__icon)) > * { grid-column: 1; }
/* The site's standard type (user, 2026-10-04): the theme's H3 for the title and its body copy
   (16px / 1.6) for the text; only the colour is set, as the band makes text white. */
.os-segment-card > .os-segment-card__title { color: var(--wp--preset--color--ink-deep); }
.os-segment-card__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.os-segment-card__text a:hover { color: var(--wp--preset--color--brand); }

@media (max-width: 1100px) {
	.os-industry-segments__body { gap: 32px; }
}
@media (max-width: 768px) {
	.os-industry-segments__body { gap: 24px; }
	.os-industry-segments__grid { gap: 16px; }
	.os-segment-card { column-gap: 16px; padding: 24px; }
}
@media (max-width: 640px) {
	.os-industry-segments__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Industry page partners (os/industry-partners, Figma 657:21047) ---------- */
/* Home's OS Logo Marquee (os-marquee.css: 76px tiles, line edge, 70% until hover, 188 x 59
   logos, pauses on hover) with the Figma tile width (238px) and 20px gap (the gallery's
   blockGap). Section spacing from the shared rule. */
.os-industry-partners > .wp-block-gallery.is-style-os-marquee { --os-logo-width: 238px; margin-top: 32px; }
/* Logos in full colour all the time (user, 2026-10-08): no 70% fade until hover here; Home's
   client logos keep it. */
.os-industry-partners > .wp-block-gallery.is-style-os-marquee .wp-block-image { opacity: 1; }
/* Head centred above the logos at every width, with the theme H2 and OS Eyebrow like the other
   sections (user, 2026-10-08; was a compact row on desktop, head left with a 28px H2). */
@media (max-width: 768px) {
	.os-industry-partners > .wp-block-gallery.is-style-os-marquee { --os-logo-width: 180px; margin-top: 24px; }
}

/* ---------- On this page (os/industry-page-nav, Figma 755:14858) ---------- */
/* Section links docked at the bottom of the window (user, 2026-10-04). Hidden at first; when the
   first linked section comes up from the bottom of the window the bar rises with it, then stays
   docked while the sections scroll past, and slides back down as the last one ends, so it never
   covers the contact form or the footer (os-industry-list.js sets --os-bar-shown, 0 to its
   height, and inert while it is hidden). No visible label: the <nav> keeps the "On this page"
   name for screen readers (page-nav.php). Figma: light-blue bar (its edge line and shadow left
   out — user, 2026-10-04),
   16px above and below, 44px links 16px apart, centred; links are plain (Inter 600 14px
   uppercase ink, 18px sides, radius 9) and the section being read gets the card-blue fill.
   Without the script it is an ordinary row in the page. */
html:has(.os-page-nav) {
	--os-page-nav-h: 76px; /* 16 + 44 + 16 */
	scroll-padding-top: calc(var(--os-header-offset) + 16px);
	scroll-padding-bottom: calc(88px + var(--os-page-nav-h)); /* the back-to-top zone + the bar */
}
.os-page-nav {
	z-index: 40;
	margin: 0 !important;
	background: var(--wp--custom--color--on-brand);
}
.os-js .os-page-nav {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	padding-bottom: env(safe-area-inset-bottom);
	transform: translate3d(0, var(--os-bar-y, 100%), 0); /* hidden below the window */
	will-change: transform;
}
.os-page-nav > .os-page-nav__inner {
	max-width: none;
	margin-block: 0;
	padding: 16px 0;
}
.os-page-nav__inner > * { margin: 0; }
.os-page-nav__inner > .os-page-nav__list {
	display: flex;
	gap: 16px;
	min-width: 0;
	margin-inline: calc(var(--wp--style--root--padding-left) * -1) calc(var(--wp--style--root--padding-right) * -1);
	padding: 0 var(--wp--style--root--padding-right) 0 var(--wp--style--root--padding-left);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.os-page-nav__list::-webkit-scrollbar { display: none; }
.os-page-nav__list > li { flex-shrink: 0; margin: 0; }
/* Centred while the row fits; when it doesn't, it starts at the gutter and scrolls (auto margins,
   not justify-content: center, which would push the first links off-screen). */
.os-page-nav__list > li:first-child { margin-left: auto; }
.os-page-nav__list > li:last-child { margin-right: auto; }
.os-page-nav__list a {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 44px;
	padding: 0 18px;
	border-radius: var(--wp--preset--border-radius--sm);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}
.os-page-nav__list a:hover { color: var(--wp--preset--color--brand); }
.os-page-nav__list a[aria-current] { background: var(--wp--custom--color--card-blue); color: var(--wp--preset--color--ink); }
.os-page-nav__list a:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: -2px; }
/* The back-to-top button rides above the bar while it shows. */
.os-to-top { translate: 0 calc(var(--os-bar-shown, 0px) * -1); }