/* =============================================================
   GlobalHealth AI — base stylesheet
   Design tokens sourced from the live site's theme configuration.
   ============================================================= */

/* ---------- Open Sans, self-hosted --------------------------------------
   Pulled once from Google Fonts (v44) rather than linked at request time —
   no runtime dependency on fonts.googleapis.com/fonts.gstatic.com. The two
   "normal" faces are variable-weight files (one subset covers 300-800 in a
   single download); italic is only ever used via <em> in body copy, so it
   stays a single static weight rather than pulling the full italic axis. */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/open-sans-latin-ext-wght-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/open-sans-latin-wght-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/open-sans-latin-ext-400-italic.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/open-sans-latin-400-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--color-primary: #2aa2de;
	--color-primary-shadow: #0070ac;
	--color-heading: #323436;
	--color-text: #343434;
	--color-nav-text: #444444;
	--color-border: #e1e1e1;
	--color-bg: #f9f9f9;

	--font-base: "Open Sans", Helvetica, Arial, sans-serif;

	--fs-base: 16px;
	--lh-base: 22px;
	--fs-h1: 30px;  --lh-h1: 36px;
	--fs-h2: 24px;  --lh-h2: 30px;
	--fs-h3: 20px;  --lh-h3: 26px;
	--fs-h4: 18px;  --lh-h4: 24px;

	--header-height: 84px;
	--header-height-scrolled: 62px;
	--container-max: 1200px;
	--container-header: 1400px;
	--nav-breakpoint: 1200px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; }

body {
	font-family: var(--font-base);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-base);
	color: var(--color-heading);
	line-height: 1.5;
	font-weight: 400;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--color-primary); font-weight: 700; }

a:hover { color: var(--color-primary); }

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: 0;
	top: 0;
	background: var(--color-primary);
	color: #fff;
	padding: 10px 16px;
	z-index: 10000;
	transform: translateY(-200%);
	transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Buttons ---------- */
.btn {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	padding: 13px 28px;
	border-radius: 3px;
	border: 2px solid transparent;
	transition: background-color .2s, color .2s, box-shadow .2s;
}
.btn--primary {
	background-color: var(--color-primary);
	color: #fff;
	box-shadow: 0 3px 0 0 var(--color-primary-shadow);
}
.btn--primary:hover { background-color: var(--color-primary-shadow); color: #fff; }

.btn--outline {
	background: transparent;
	border-color: #fff;
	color: #fff;
}
.btn--outline:hover { background-color: #fff; color: var(--color-primary); }

/* =============================================================
   Header
   ============================================================= */
.site-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 998;
	height: var(--header-height);
}
.site-header__inner {
	max-width: var(--container-header);
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
	gap: 36px;
	padding: 0 32px;
	position: relative;
	z-index: 1;
}
.site-branding { flex-shrink: 0; }
.site-branding img { height: 40px; width: auto; }

/* Nav sits to the right of the logo so the two never read as one block. */
.primary-nav { flex: 1; display: flex; justify-content: flex-end; }
.primary-menu {
	display: flex;
	align-items: center;
	gap: 2px;
}
.primary-menu > li { position: relative; }
.primary-menu > li > a {
	display: block;
	padding: 0 13px;
	line-height: var(--header-height);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .2px;
	white-space: nowrap;
	position: relative;
	transition: color .2s ease;
}
/* Underline indicator replaces the old vertical rule between every item,
   which is what made the bar read as crowded. */
.primary-menu > li > a::after {
	content: "";
	position: absolute;
	left: 13px; right: 13px;
	bottom: calc(50% - 17px);
	height: 2px;
	background: var(--color-primary);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .2s ease;
}
.primary-menu > li.current-menu-item > a::after,
.primary-menu > li:hover > a::after,
.primary-menu > li > a:focus-visible::after { transform: scaleX(1); }
.primary-menu > li.current-menu-item > a,
.primary-menu > li > a:hover { color: #fff; }

.submenu-toggle { display: none; }

/* Chevron marking the parents that open a dropdown. Drawn from two 2px borders
   rather than a font glyph, so its weight is set here and matches the nav type
   instead of varying with whatever arrow character the face ships. It has to
   live on ::before — the anchor's ::after is the underline indicator above.
   currentColor keeps it in step with the link's hover state.

   It is painted inside the anchor's existing right padding and adds no layout
   width: 11 top-level items plus the search toggle already fill the bar (they
   need ~1303px of a 1310px viewport), so widening each parent by even 9px
   pushes the search button past the right edge. */
.primary-menu > li.has-submenu > a::before {
	content: "";
	position: absolute;
	right: 1px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	/* A rotated square's optical centre sits below its box centre, so the
	   offset is more than half to read as vertically level with the label. */
	transform: translateY(-72%) rotate(45deg);
	opacity: .75;
	transition: opacity .2s ease;
	pointer-events: none;
}
.primary-menu > li.has-submenu:hover > a::before,
.primary-menu > li.has-submenu:focus-within > a::before { opacity: 1; }

.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 260px;
	background: #191919;
	box-shadow: 0 12px 24px rgba(0,0,0,.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s, transform .18s, visibility .18s;
	z-index: 999;
}
.has-submenu:hover > .sub-menu,
.has-submenu:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.sub-menu li a {
	display: block;
	padding: 10px 18px;
	font-size: 13px;
	color: #ddd;
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.sub-menu li a:hover { color: var(--color-primary); background: rgba(255,255,255,.04); }

/* Right-most dropdowns flip so they never hang off the page edge. */
.primary-menu > li.has-submenu:last-child > .sub-menu,
.primary-menu > li.has-submenu:nth-last-child(2) > .sub-menu {
	left: auto;
	right: 0;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px; height: 32px;
	background: none;
	border: none;
	padding: 0;
	margin-left: auto;
	order: 2;
}
.header-search-toggle { order: 3; }
.nav-toggle__bar { width: 100%; height: 2px; background: #fff; }
.nav-close { display: none; }
.nav-overlay { display: none; }

.header-search-toggle {
	background: none;
	border: none;
	color: #fff;
	padding: 8px;
}
.header-search-form { display: none; }

/* The header floats over the hero image, so it carries its own soft scrim
   for contrast. It fades out well before the banner content box, so it
   never visually covers the title/description. */
.site-header,
.site-header .primary-menu > li > a,
.site-header .header-search-toggle { color: #fff; }
.site-header::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: calc(var(--header-height) + 46px);
	background: linear-gradient(to bottom, rgba(0,0,0,.58) 0%, rgba(0,0,0,.30) 52%, rgba(0,0,0,0) 100%);
	pointer-events: none;
	z-index: 0;
}
.site-header.is-scrolled {
	position: fixed;
	height: var(--header-height-scrolled);
	background: rgba(18,18,18,.94);
	box-shadow: 0 2px 14px rgba(0,0,0,.22);
}
.site-header.is-scrolled::before { display: none; }
.site-header.is-scrolled .primary-menu > li > a { line-height: var(--header-height-scrolled); }
.site-header.is-scrolled .site-branding img { height: 33px; }

/* =============================================================
   Hero slider
   ============================================================= */
.hero-slider {
	position: relative;
	height: 100vh;
	min-height: 560px;
	overflow: hidden;
	background: #222;
}
.hero-slider__track { position: relative; width: 100%; height: 100%; }

.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }

.hero-slide__image {
	width: 100%; height: 100%;
	object-fit: cover;
}
/* ---------------------------------------------------------------
   Hero composition
   The content has no container. Contrast is graded into the
   photograph itself with a directional scrim, so the copy reads as
   part of the image instead of sitting on a card. Two stacked
   gradients: a wide diagonal wash anchoring the left third, and a
   low vignette that seats the frame and carries the pagination.
   --------------------------------------------------------------- */
.hero-slide__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(103deg,
			rgba(3,12,22,.90) 0%,
			rgba(3,12,22,.78) 26%,
			rgba(3,12,22,.46) 48%,
			rgba(3,12,22,.12) 68%,
			rgba(3,12,22,0) 84%),
		linear-gradient(to top,
			rgba(3,12,22,.55) 0%,
			rgba(3,12,22,.10) 26%,
			rgba(3,12,22,0) 50%);
}

.hero-slide__content {
	position: absolute;
	left: max(6%, calc((100% - var(--container-header)) / 2 + 32px));
	top: 50%;
	transform: translateY(-50%);
	width: min(660px, 52%);
	color: #fff;
	/* No background, no border: the scrim above does the work. A very
	   soft bloom lifts the text off busy image detail without reading
	   as a panel edge. */
	filter: drop-shadow(0 2px 14px rgba(3,12,22,.45));
}

/* Fine brand accent rule — editorial anchor above the headline. */
.hero-slide__accent {
	display: block;
	width: 54px;
	height: 3px;
	margin-bottom: 26px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--color-primary) 0%, rgba(42,162,222,.25) 100%);
}

.hero-slide__title {
	color: #fff;
	font-size: clamp(1.75rem, 2.7vw, 2.5rem);
	line-height: 1.16;
	font-weight: 500;
	letter-spacing: -.022em;
	margin-bottom: 22px;
	text-wrap: balance;
}
/* First slide only: extra space below the title. */
.hero-slide:first-child .hero-slide__title { margin-bottom: 34px; }

.hero-slide__subtitle {
	display: block;
	margin-top: .35em;
	font-size: .56em;
	font-weight: 300;
	letter-spacing: .01em;
	line-height: 1.35;
	color: rgba(255,255,255,.86);
}

.hero-slide__text {
	font-size: clamp(.9rem, 1.02vw, 1rem);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: .004em;
	color: rgba(255,255,255,.84);
	margin-bottom: 12px;
	max-width: 54ch;
}
.hero-slide__text:last-of-type { margin-bottom: 38px; }

/* ---------------------------------------------------------------
   Hero CTA
   --------------------------------------------------------------- */
.hero-slide__content .btn--primary {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 24px;
	border-radius: 5px;
	border: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .075em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, #35b0e8 0%, var(--color-primary) 45%, #1c86bd 100%);
	box-shadow:
		0 1px 0 rgba(255,255,255,.18) inset,
		0 8px 20px -9px rgba(42,162,222,.7);
	transition: transform .28s cubic-bezier(.2,.7,.3,1),
	            box-shadow .28s ease,
	            filter .28s ease;
	will-change: transform;
}
/* Arrow is decorative, so it is drawn in CSS rather than markup. */
.hero-slide__content .btn--primary::after {
	content: "";
	width: 15px;
	height: 7px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 8"><path d="M0 4h14M11 1l3.4 3-3.4 3" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 8"><path d="M0 4h14M11 1l3.4 3-3.4 3" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
	transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.hero-slide__content .btn--primary:hover,
.hero-slide__content .btn--primary:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	filter: saturate(1.06);
	box-shadow:
		0 1px 0 rgba(255,255,255,.22) inset,
		0 13px 28px -11px rgba(42,162,222,.85);
}
.hero-slide__content .btn--primary:hover::after,
.hero-slide__content .btn--primary:focus-visible::after { transform: translateX(5px); }
.hero-slide__content .btn--primary:active { transform: translateY(0); }
.hero-slide__content .btn--primary:focus-visible {
	outline: 2px solid rgba(255,255,255,.9);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------
   Entrance: a short, staggered settle on the slide becoming active.
   --------------------------------------------------------------- */
@keyframes heroRise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroAccent {
	from { opacity: 0; transform: scaleX(0); }
	to   { opacity: 1; transform: scaleX(1); }
}
.hero-slider.is-ready .hero-slide.is-active .hero-slide__accent,
.hero-slider.is-ready .hero-slide.is-active .hero-slide__title,
.hero-slider.is-ready .hero-slide.is-active .hero-slide__text,
.hero-slider.is-ready .hero-slide.is-active .hero-slide__content .btn--primary {
	animation: heroRise .72s cubic-bezier(.22,.7,.28,1) both;
}
.hero-slider.is-ready .hero-slide.is-active .hero-slide__accent {
	animation: heroAccent .6s cubic-bezier(.22,.7,.28,1) both;
	transform-origin: left center;
}
.hero-slider.is-ready .hero-slide.is-active .hero-slide__title { animation-delay: .10s; }
.hero-slider.is-ready .hero-slide.is-active .hero-slide__text { animation-delay: .18s; }
.hero-slider.is-ready .hero-slide.is-active .hero-slide__text:nth-of-type(2) { animation-delay: .24s; }
.hero-slider.is-ready .hero-slide.is-active .hero-slide__content .btn--primary { animation-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
	.hero-slider.is-ready .hero-slide.is-active .hero-slide__accent,
	.hero-slider.is-ready .hero-slide.is-active .hero-slide__title,
	.hero-slider.is-ready .hero-slide.is-active .hero-slide__text,
	.hero-slider.is-ready .hero-slide.is-active .hero-slide__content .btn--primary { animation: none; }
	.hero-slide { transition: none; }
	.hero-slide__content .btn--primary,
	.hero-slide__content .btn--primary::after { transition: none; }
}

.hero-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,.3);
	border: none;
	color: #fff;
	width: 44px; height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s;
}
.hero-slider__nav:hover { background: rgba(0,0,0,.55); }
.hero-slider__nav--prev { left: 20px; }
.hero-slider__nav--next { right: 20px; }

.hero-slider__dots {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 9px;
	z-index: 2;
}
/* Inactive: small dot. Active: stretches into a brand-blue pill, so position
   is readable at a glance without relying on colour alone. */
.hero-slider__dots button {
	position: relative;
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(255,255,255,.38);
	transition: width .38s cubic-bezier(.4,0,.2,1),
	            background-color .3s ease;
}
/* Invisible 44px hit area keeps the small visual dot touch-accessible. */
.hero-slider__dots button::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
}
.hero-slider__dots button:hover { background: rgba(255,255,255,.7); }
.hero-slider__dots button.is-active {
	width: 20px;
	background: var(--color-primary);
}
.hero-slider__dots button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.hero-slider__dots button { transition: none; }
}

/* =============================================================
   Feature highlights
   ============================================================= */
/* ---------------------------------------------------------------
   Capability highlights
   Editorial numbered rows rather than cards: a ghost numeral rail,
   the label/heading pair, and the body copy on a 3-track asymmetric
   grid, separated by hairlines. Depth comes from typography and
   whitespace, not from boxes or shadows.
   --------------------------------------------------------------- */
.feature-section {
	position: relative;
	overflow: hidden;
	padding: clamp(78px, 8.5vw, 136px) 0;
	background: linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%);
}
/* Fine data grid, faded out with a mask so it never reads as a texture. */
.feature-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(42,162,222,.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(42,162,222,.06) 1px, transparent 1px);
	background-size: 74px 74px;
	-webkit-mask-image: radial-gradient(ellipse 78% 62% at 72% -4%, #000 0%, transparent 72%);
	        mask-image: radial-gradient(ellipse 78% 62% at 72% -4%, #000 0%, transparent 72%);
	pointer-events: none;
}
/* Single soft brand bloom for warmth. */
.feature-section::after {
	content: "";
	position: absolute;
	top: -180px; right: -140px;
	width: 640px; height: 640px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(42,162,222,.11) 0%, rgba(42,162,222,0) 66%);
	pointer-events: none;
}
.feature-section__inner {
	position: relative;
	z-index: 1;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 24px;
}

.feature-list { counter-reset: feature; }

.feature-item {
	counter-increment: feature;
	position: relative;
	display: grid;
	grid-template-columns: 94px minmax(210px, .92fr) minmax(0, 1.32fr);
	gap: clamp(22px, 3.2vw, 54px);
	align-items: start;
	padding: clamp(34px, 3.8vw, 52px) clamp(14px, 1.8vw, 26px);
	border-top: 1px solid rgba(18,42,64,.09);
	transition: background-color .42s ease;
}
.feature-item:last-child { border-bottom: 1px solid rgba(18,42,64,.09); }

/* Auto-numbered rail — adding a fourth feature needs no markup change. */
.feature-item::before {
	content: counter(feature, decimal-leading-zero);
	font-size: clamp(2.3rem, 3.3vw, 3.3rem);
	font-weight: 700;
	line-height: .88;
	letter-spacing: -.035em;
	color: rgba(42,162,222,.17);
	transition: color .42s ease;
	font-variant-numeric: tabular-nums;
}

/* Accent rule that draws itself in on hover. */
.feature-item::after {
	content: "";
	position: absolute;
	left: 0; top: -1px; bottom: -1px;
	width: 2px;
	background: linear-gradient(180deg, var(--color-primary) 0%, rgba(42,162,222,.12) 100%);
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.feature-item:hover { background-color: rgba(42,162,222,.03); }
.feature-item:hover::after { transform: scaleY(1); }
.feature-item:hover::before { color: rgba(42,162,222,.44); }

.feature-item__eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 13px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .145em;
	text-transform: uppercase;
	color: var(--color-primary);
}
.feature-item__icon {
	flex-shrink: 0;
	transition: transform .42s cubic-bezier(.2,.7,.3,1);
}
.feature-item:hover .feature-item__icon { transform: translateX(3px); }

.feature-item__title {
	font-size: clamp(1.28rem, 1.8vw, 1.65rem);
	font-weight: 500;
	line-height: 1.28;
	letter-spacing: -.018em;
	color: var(--color-heading);
	text-wrap: balance;
}

.feature-item__body {
	font-size: clamp(.9rem, .98vw, .975rem);
	font-weight: 400;
	line-height: 1.78;
	color: #5b6a79;
	max-width: 64ch;
}

/* Reveal on scroll. Resting state is visible; the hidden start state only
   applies once JS confirms it can observe and animate. */
.feature-list.reveal-ready .feature-item {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .72s ease, transform .72s cubic-bezier(.2,.7,.3,1),
	            background-color .42s ease;
}
.feature-list.reveal-ready .feature-item.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.feature-list.reveal-ready .feature-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.feature-item, .feature-item::after, .feature-item__icon { transition: none; }
}
/* ---------------------------------------------------------------
   Capability showcase — alternative treatment
   Split composition: a sticky image panel paired with feature rows.
   The panel cross-fades to the image belonging to whichever row is
   in view (or hovered), so the photography carries the narrative
   while the copy stays scannable. Deliberately dark, to set a
   rhythm against the light section above.
   --------------------------------------------------------------- */
.showcase {
	position: relative;
	overflow: hidden;
	padding: clamp(88px, 9vw, 140px) 0;
	/*background: #f1f7fb;*/
	background: linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%);
	color: var(--color-text);
}
/* Faint brand bloom, bottom-left, to stop the dark field going flat. */
.showcase::before {
	content: "";
	position: absolute;
	bottom: -220px; left: -160px;
	width: 680px; height: 680px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(42,162,222,.13) 0%, rgba(42,162,222,0) 70%);
	pointer-events: none;
}
.showcase__inner {
	position: relative;
	z-index: 1;
	/*max-width: var(--container-max);*/
	margin: 0 auto;
	padding: 0 24px;
}

/* Same treatment as the section above — ghost numeral, brand eyebrow,
   hairline separation, no card surfaces — but the three items sit side by
   side, so the hairline runs vertically between columns instead of
   horizontally between rows. */
.showcase__list {
	counter-reset: showcase;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	align-items: start;
}

.showcase-item {
	counter-increment: showcase;
	position: relative;
	padding: clamp(6px, .6vw, 10px) clamp(22px, 2.4vw, 34px);
	transition: background-color .42s ease;
}

/* Vertical hairline between columns. */
.showcase-item + .showcase-item { border-left: 1px solid rgba(18,42,64,.11); }

/* Ghost numeral, stacked above the label. */
.showcase-item::before {
	content: counter(showcase, decimal-leading-zero);
	display: block;
	margin-bottom: clamp(16px, 1.8vw, 24px);
	font-size: clamp(2.3rem, 3.3vw, 3.3rem);
	font-weight: 700;
	line-height: .88;
	letter-spacing: -.035em;
	color: rgba(42,162,222,.17);
	font-variant-numeric: tabular-nums;
	transition: color .42s ease;
}

/* Accent rule that draws itself in on hover, as in the section above. */
.showcase-item::after {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 2px;
	background: linear-gradient(180deg, var(--color-primary) 0%, rgba(42,162,222,.12) 100%);
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.showcase-item:hover::after { transform: scaleY(1); }
.showcase-item:hover::before { color: rgba(42,162,222,.44); }

.showcase-item__eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 13px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .145em;
	text-transform: uppercase;
	color: var(--color-primary);
}
.showcase-item__eyebrow svg {
	flex-shrink: 0;
	transition: transform .42s cubic-bezier(.2,.7,.3,1);
}
.showcase-item:hover .showcase-item__eyebrow svg { transform: translateX(3px); }

.showcase-item__title {
	font-size: clamp(1.15rem, 1.5vw, 1.4rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.018em;
	color: var(--color-heading);
	margin-bottom: 12px;
	text-wrap: balance;
}

.showcase-item__body {
	font-size: clamp(.875rem, .95vw, .94rem);
	font-weight: 400;
	line-height: 1.74;
	color: #5b6a79;
}

@media (prefers-reduced-motion: reduce) {
	.showcase-item,
	.showcase-item::before,
	.showcase-item::after,
	.showcase-item__eyebrow svg { transition: none; }
	.showcase-item:hover .showcase-item__eyebrow svg { transform: none; }
}

/* ---- Responsive: the row folds back to stacked rows, hairlines turning
        horizontal again so the treatment stays identical. ---- */
@media (max-width: 900px) {
	.showcase__list { grid-template-columns: 1fr; }
	.showcase-item {
		padding: clamp(24px, 3vw, 32px) 0 clamp(24px, 3vw, 32px) clamp(18px, 2vw, 26px);
	}
	.showcase-item:first-child { padding-top: 0; }
	.showcase-item:last-child { padding-bottom: 0; }
	.showcase-item + .showcase-item {
		border-left: none;
		border-top: 1px solid rgba(18,42,64,.11);
	}
	.showcase-item::before {
		font-size: clamp(2rem, 4.4vw, 2.6rem);
		margin-bottom: 16px;
	}
	.showcase-item__body { max-width: 68ch; }
}
@media (max-width: 600px) {
	.showcase { padding: 72px 0; }
	.showcase__inner { padding: 0 20px; }
	.showcase-item { padding: 22px 0 22px 14px; }
	.showcase-item::before { font-size: 1.6rem; margin-bottom: 14px; color: rgba(42,162,222,.3); }
	.showcase-item::after { display: none; }
	.showcase-item__eyebrow { font-size: 11px; }
	.showcase-item__body { max-width: none; }
}
/* =============================================================
   Full-bleed cover sections
   Same scrim language as the hero slider (a directional wash
   graded into the photograph, no card, no border), composed as a
   three-part masthead: the GlobalHealth mark anchors the left,
   a faceted brand-color blade marks the seam, and the editorial
   copy — the primary information — runs in the wide right column.
   ============================================================= */
.cover-section {
	position: relative;
	min-height: clamp(520px, 78vh, 720px);
	display: flex;
	align-items: center;
	overflow: hidden;
}
.cover-section__image {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.cover-section__overlay {
	position: absolute;
	inset: 0;
	background: #08182bdb;
	/*background:
		linear-gradient(103deg,
			rgba(3,12,22,.90) 0%,
			rgba(3,12,22,.78) 26%,
			rgba(3,12,22,.46) 48%,
			rgba(3,12,22,.12) 68%,
			rgba(3,12,22,0) 84%),
		linear-gradient(to top,
			rgba(3,12,22,.55) 0%,
			rgba(3,12,22,.10) 26%,
			rgba(3,12,22,0) 50%);*/
}
.cover-section__content {
	position: relative;
	z-index: 1;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: clamp(64px, 9vw, 108px) 20px;
	width: 100%;
	display: grid;
	grid-template-columns: clamp(170px, 22vw, 260px) 6px minmax(0, 1fr);
	column-gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

/* Left: the mark, held still and generous — a masthead, not a logo
   bug. It carries its own quiet weight rather than competing with
   the copy for size. */
.cover-section__brand {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.cover-section__logo {
	width: 100%;
	max-width: 260px;
	height: auto;
	filter: drop-shadow(0 2px 10px rgba(3,12,22,.4));
}

/* The seam: a faceted blade rather than a rule. Pointed caps top
   and bottom read as a deliberate, architectural cut; the fill
   brightens toward the centre and fades at each tip so it never
   competes with the logo or the copy either side of it. */
.cover-section__divider {
	display: block;
	width: 100%;
	height: clamp(200px, 42vh, 320px);
	align-self: center;
	clip-path: polygon(50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%, 0% 10%);
	background: linear-gradient(180deg,
		rgba(42,162,222,0) 0%,
		rgba(42,162,222,.5) 15%,
		rgba(140,205,240,.85) 50%,
		rgba(42,162,222,.5) 85%,
		rgba(42,162,222,0) 100%);
}

.cover-section__inner {
	max-width: 620px;
	color: #fff;
	filter: drop-shadow(0 2px 14px rgba(3,12,22,.4));
}
.cover-section__eyebrow {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 12.5px;
	font-weight: 700;
	color: rgba(255,255,255,.78);
	margin-bottom: 16px;
}
.cover-section__heading {
	color: #fff;
	font-size: clamp(1.9rem, 1.35rem + 2.3vw, 2.9rem);
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: -.02em;
	margin-bottom: 20px;
	text-wrap: balance;
}
.cover-section__text {
	font-size: clamp(.95rem, .88rem + .35vw, 1.05rem);
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: .004em;
	color: rgba(255,255,255,.84);
	max-width: 50ch;
	margin-bottom: 34px;
}
.cover-section__tabs {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

/* CTA pair: an equal-weight audience fork (Organizations / Patients),
   so both get the same refined pill treatment rather than a boxed,
   Bootstrap-style outline button. Arrow is drawn in CSS, matching the
   hero CTA, so no icon markup is needed. */
.cover-section__tabs .btn--outline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 999px;
	border: 1.5px solid rgba(255,255,255,.42);
	background: rgba(255,255,255,.04);
	transition: background-color .28s ease, border-color .28s ease,
	            color .28s ease, transform .28s cubic-bezier(.2,.7,.3,1);
}
.cover-section__tabs .btn--outline::after {
	content: "";
	width: 13px;
	height: 6px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 8"><path d="M0 4h14M11 1l3.4 3-3.4 3" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 8"><path d="M0 4h14M11 1l3.4 3-3.4 3" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
	transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.cover-section__tabs .btn--outline:hover,
.cover-section__tabs .btn--outline:focus-visible {
	background-color: #fff;
	border-color: #fff;
	color: var(--color-primary);
	transform: translateY(-2px);
}
.cover-section__tabs .btn--outline:hover::after,
.cover-section__tabs .btn--outline:focus-visible::after { transform: translateX(4px); }
.cover-section__tabs .btn--outline:active { transform: translateY(0); }

/* For Organizations reads as the primary path of the two, so it
   carries its resting state permanently rather than only on hover —
   white gives it the strongest contrast against the dark photo, and
   the brand-blue text ties it back to the rest of the site's links. */
.cover-section__tabs .btn--outline-solid {
	background-color: #fff;
	border-color: #fff;
	color: var(--color-primary);
}
.cover-section__tabs .btn--outline-solid:hover,
.cover-section__tabs .btn--outline-solid:focus-visible {
	background-color: #fff;
	border-color: #fff;
	color: var(--color-primary-shadow);
}

/* --compact: a supporting mid-page statement banner, not a homepage-scale
   showcase moment. Markup omits .cover-section__brand and __divider
   entirely for this variant (the page's own brand-band already carries the
   wordmark, so a second masthead here would be redundant) — the grid drops
   to a single column to match, rather than leaving two empty tracks. Heading
   is capped at the same 2.4rem ceiling every other section H2 on these
   sub-pages uses, so the banner doesn't outscale its neighbours. */
.cover-section--compact { min-height: clamp(400px, 50vh, 520px); }
.cover-section--compact .cover-section__content {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	padding: clamp(48px, 6vw, 76px) 20px;
}
/* Centred as a block within the section, and the type centred within it — a
   statement banner reads as a single focal point, not a left-aligned column
   like the copy half of a two-column section. */
.cover-section--compact .cover-section__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.cover-section--compact .cover-section__heading { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem); font-weight: 600; }
.cover-section--compact .cover-section__text { margin-left: auto; margin-right: auto; }

/* Reveal on scroll. Resting state is visible; the hidden start state
   only applies once JS confirms it can observe and animate. The
   blade grows from its centre (a scale, not a slide) so it reads as
   the seam unfolding rather than sliding in with the text. */
.cover-section.reveal-ready .cover-section__brand,
.cover-section.reveal-ready .cover-section__eyebrow,
.cover-section.reveal-ready .cover-section__heading,
.cover-section.reveal-ready .cover-section__text,
.cover-section.reveal-ready .cover-section__tabs {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.cover-section.reveal-ready .cover-section__divider {
	opacity: 0;
	transform: scaleY(0);
	transition: opacity .7s ease, transform .7s cubic-bezier(.22,.7,.28,1);
}
.cover-section.reveal-ready.is-visible .cover-section__brand,
.cover-section.reveal-ready.is-visible .cover-section__eyebrow,
.cover-section.reveal-ready.is-visible .cover-section__heading,
.cover-section.reveal-ready.is-visible .cover-section__text,
.cover-section.reveal-ready.is-visible .cover-section__tabs {
	opacity: 1;
	transform: none;
}
.cover-section.reveal-ready.is-visible .cover-section__divider {
	opacity: 1;
	transform: scaleY(1);
}
.cover-section.reveal-ready .cover-section__divider { transition-delay: .06s; }
.cover-section.reveal-ready .cover-section__eyebrow { transition-delay: .14s; }
.cover-section.reveal-ready .cover-section__heading { transition-delay: .20s; }
.cover-section.reveal-ready .cover-section__text { transition-delay: .27s; }
.cover-section.reveal-ready .cover-section__tabs { transition-delay: .33s; }

@media (prefers-reduced-motion: reduce) {
	.cover-section.reveal-ready .cover-section__brand,
	.cover-section.reveal-ready .cover-section__divider,
	.cover-section.reveal-ready .cover-section__eyebrow,
	.cover-section.reveal-ready .cover-section__heading,
	.cover-section.reveal-ready .cover-section__text,
	.cover-section.reveal-ready .cover-section__tabs {
		opacity: 1; transform: none; transition: none;
	}
}

/* =============================================================
   Our Mission (simple) — a plain two-up: statement on the left,
   a rounded photo on the right, in light mode so it sits as a calm
   interval between the two dark full-bleed moments either side of
   it (the Vitals AI photo above, the footer below) rather than
   merging into the footer directly beneath it.
   ============================================================= */
.mission-simple {
	background: linear-gradient(180deg, #ffffff 0%, #f5f8fa 100%);
	padding: clamp(64px, 8vw, 110px) 0;
}
.mission-simple__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	column-gap: clamp(32px, 5vw, 64px);
	align-items: center;
}
.mission-simple__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 12.5px;
	font-weight: 700;
	color: rgba(15,35,55,.55);
	margin-bottom: 18px;
}
.mission-simple__eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(42,162,222,.18);
	flex-shrink: 0;
}
.mission-simple__heading {
	color: #0f2338;
	font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.2rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	max-width: 560px;
	margin: 0 0 24px;
}
.mission-simple__accent { color: var(--color-primary); }
/* The description and CTA sit in a soft tinted panel rather than
   running straight on the section background — the same device
   used for Our Mission's premium variant, brought over here without
   touching the left-content/right-image placement. */
.mission-simple__panel {
	background: linear-gradient(160deg, #eef5fa 0%, #e3edf5 100%);
	border-radius: 20px;
	padding: clamp(24px, 3vw, 34px);
	max-width: 460px;
}
.mission-simple__text {
	color: rgba(15,35,55,.68);
	font-size: 1rem;
	line-height: 1.65;
	margin: 0 0 24px;
}
.mission-simple__media { position: relative; }
.mission-simple__image {
	width: 100%;
	height: clamp(260px, 32vw, 420px);
	object-fit: cover;
	object-position: 46% 40%;
	border-radius: 22px;
}
/* Fine viewfinder-style corner brackets — the same accent used on
   the Vitals AI photo, so the two premium moments read as one
   family of details rather than one-off decoration. */
.mission-simple__corner {
	position: absolute;
	width: 28px; height: 28px;
	border: 1.5px solid rgba(255,255,255,.85);
	pointer-events: none;
}
.mission-simple__corner--tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.mission-simple__corner--br { bottom: 16px; right: 16px; border-left: none; border-top: none; }

/* Same treatment as the hero slider's primary CTA — a gradient pill
   with its own glow, rather than the flat, bottom-border .btn--primary
   used elsewhere. Arrow is drawn in CSS, matching the hero, so no
   icon markup is needed. */
.mission-simple__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 24px;
	border-radius: 5px;
	border: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .075em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, #35b0e8 0%, var(--color-primary) 45%, #1c86bd 100%);
	box-shadow:
		0 1px 0 rgba(255,255,255,.18) inset,
		0 8px 20px -9px rgba(42,162,222,.7);
	transition: transform .28s cubic-bezier(.2,.7,.3,1),
	            box-shadow .28s ease,
	            filter .28s ease;
	will-change: transform;
}
.mission-simple__cta::after {
	content: "";
	width: 15px;
	height: 7px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 8"><path d="M0 4h14M11 1l3.4 3-3.4 3" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 8"><path d="M0 4h14M11 1l3.4 3-3.4 3" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
	transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.mission-simple__cta:hover,
.mission-simple__cta:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	filter: saturate(1.06);
	box-shadow:
		0 1px 0 rgba(255,255,255,.22) inset,
		0 13px 28px -11px rgba(42,162,222,.85);
}
.mission-simple__cta:hover::after,
.mission-simple__cta:focus-visible::after { transform: translateX(5px); }
.mission-simple__cta:active { transform: translateY(0); }
.mission-simple__cta:focus-visible {
	outline: 2px solid rgba(15,35,55,.8);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.mission-simple__cta,
	.mission-simple__cta::after { transition: none; }
}

/* =============================================================
   Our Mission — a typographic manifesto, not a content block.
   Two earlier attempts paired the statement with a photograph (full-
   bleed, then a framed portrait split) and neither read as premium —
   the image kept competing with the line for attention. This version
   drops photography entirely: the mission is carried by scale, type
   hierarchy within the statement itself, and one faint line-art globe
   for atmosphere. Nothing here is a card, a photo, or a gradient
   button — just confident type and a lot of quiet air around it.

   Hidden as of the "simple" request above — markup is commented out
   in index.php but these rules are left in place in case it returns.
   ============================================================= */
.mission-section {
	position: relative;
	background: linear-gradient(180deg, #ffffff 0%, #f5f8fa 100%);
	padding: clamp(100px, 14vw, 180px) 0;
	overflow: hidden;
}

/* Atmosphere, not illustration: a globe drawn only as latitude
   lines, bleeding off the right edge, almost too faint to notice
   until you do. A 150s rotation is slow enough to register as
   "alive" without ever looking like it's animating. */
.mission-section__orbit {
	position: absolute;
	top: 50%;
	right: -16%;
	width: clamp(440px, 48vw, 720px);
	aspect-ratio: 1;
	transform: translateY(-50%);
	pointer-events: none;
}
/* The photograph sits still and true — a rotating landscape would
   tilt its own horizon, which reads as broken, not ambient. It's
   masked into a soft-edged circle (a fade, not a hard-cut disc) and
   held quiet enough that it never competes with the statement. Only
   the thin data-line rings on top of it turn, slowly, as if the
   planet's network is layered over the human reality underneath it —
   the "technology over human impact" pairing the brief asked for. */
.mission-section__orbit-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 46% 42%;
	border-radius: 50%;
	opacity: .8;
	filter: saturate(.9);
	mask-image: radial-gradient(circle at 50% 50%, #000 56%, transparent 76%);
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 56%, transparent 76%);
}
.mission-section__orbit-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	fill: none;
	stroke: rgba(15,35,55,.22);
	stroke-width: 1;
	animation: missionOrbitSpin 150s linear infinite;
	transform-origin: 50% 50%;
}
.mission-section__orbit-lines line { stroke: rgba(42,162,222,.4); }
@keyframes missionOrbitSpin { to { transform: rotate(360deg); } }

.mission-section__inner {
	position: relative;
	z-index: 1;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 20px;
}
.mission-section__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 12.5px;
	font-weight: 700;
	color: rgba(15,35,55,.55);
	margin-bottom: 32px;
}
.mission-section__eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(42,162,222,.18);
	flex-shrink: 0;
}

/* The statement carries its own hierarchy: the claim runs large in
   two weights (a quieter opening, a confident core phrase), then a
   fine rule closes it off before a smaller, quieter landing line —
   big / bigger / small, rather than one flat block of equal type. */
.mission-section__statement {
	/* A fixed measure, not ch: the size that matters lives on the
	   child lines below, not on this wrapper, so ch here would
	   resolve against the wrong (inherited body) font-size. */
	max-width: clamp(340px, 58vw, 820px);
}
.mission-section__line {
	display: block;
	font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.6rem);
	line-height: 1.14;
	letter-spacing: -.022em;
	text-wrap: balance;
}
.mission-section__line--a { color: rgba(15,35,55,.62); font-weight: 400; }
.mission-section__line--b { color: #0f2338; font-weight: 600; }
.mission-section__rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 28px 0;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--color-primary) 0%, rgba(42,162,222,.25) 100%);
}
.mission-section__line--c {
	font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem);
	font-weight: 300;
	color: rgba(15,35,55,.5);
	letter-spacing: -.005em;
}
.mission-section__signature {
	display: block;
	width: auto;
	height: 24px;
	margin: 56px 0 0 clamp(0px, 3vw, 48px);
	opacity: .85;
}

/* Reveal on scroll, matching the cover-section convention: resting
   state is fully visible, the hidden start state only applies once
   JS confirms it can observe and animate. Each line settles in on
   its own beat, slowest to fastest, so the statement assembles
   itself rather than arriving as one block. */
.mission-section.reveal-ready .mission-section__eyebrow,
.mission-section.reveal-ready .mission-section__line,
.mission-section.reveal-ready .mission-section__rule,
.mission-section.reveal-ready .mission-section__signature {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.3,1);
}
.mission-section.reveal-ready .mission-section__rule {
	transform: translateY(0) scaleX(0);
	transform-origin: left center;
}
.mission-section.reveal-ready.is-visible .mission-section__eyebrow,
.mission-section.reveal-ready.is-visible .mission-section__line,
.mission-section.reveal-ready.is-visible .mission-section__signature {
	opacity: 1;
	transform: none;
}
.mission-section.reveal-ready.is-visible .mission-section__rule {
	opacity: 1;
	transform: translateY(0) scaleX(1);
}
.mission-section.reveal-ready .mission-section__eyebrow { transition-delay: .05s; }
.mission-section.reveal-ready .mission-section__line--a { transition-delay: .13s; }
.mission-section.reveal-ready .mission-section__line--b { transition-delay: .21s; }
.mission-section.reveal-ready .mission-section__rule { transition-delay: .30s; }
.mission-section.reveal-ready .mission-section__line--c { transition-delay: .36s; }
.mission-section.reveal-ready .mission-section__signature { transition-delay: .44s; }

@media (prefers-reduced-motion: reduce) {
	.mission-section__orbit-lines { animation: none; }
	.mission-section.reveal-ready .mission-section__eyebrow,
	.mission-section.reveal-ready .mission-section__line,
	.mission-section.reveal-ready .mission-section__rule,
	.mission-section.reveal-ready .mission-section__signature {
		opacity: 1; transform: none; transition: none;
	}
}

/* Honeypot field carried over from the source form. It must still be
   submitted, so it is moved out of view rather than display:none'd (which
   some bots detect); aria-hidden + tabindex=-1 keep it away from real users. */
.contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------
   image-band
   Two source pages (RPM, Workforce Safety) contain full-width rows that
   hold an image and no copy at all. Rather than invent headline text for
   them, they are reproduced as a plain photographic strip acting as a
   visual break between content sections.
   --------------------------------------------------------------- */
.image-band {
	position: relative;
	height: clamp(200px, 26vw, 340px);
	overflow: hidden;
}
.image-band__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Keeps the strip tonally consistent with the sections either side of it. */
.image-band__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8,24,43,.34) 0%, rgba(8,24,43,.16) 50%, rgba(8,24,43,.34) 100%);
}

/* ---------------------------------------------------------------
   cover-section — centred variant
   The default cover-section is a three-column masthead (mark | blade |
   copy). This variant restacks it as a centred column: mark on top, a
   short horizontal seam beneath it, then the eyebrow and a much larger
   statement heading. Used for the closing section above the footer,
   where the copy is the whole point and a split would halve its width.
   --------------------------------------------------------------- */
.cover-section--centered {
	min-height: clamp(560px, 82vh, 780px);
}
.cover-section--centered .cover-section__content {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
	row-gap: 0;
	padding: clamp(72px, 10vw, 124px) 24px;
}

/* Mark: quiet and small here — it introduces the statement rather than
   sharing billing with it. */
.cover-section--centered .cover-section__brand {
	justify-content: center;
	margin-bottom: 18px;
}
.cover-section--centered .cover-section__logo {
	width: auto;
	max-width: clamp(120px, 14vw, 165px);
}

/* The tall blade becomes a short horizontal seam under the mark. */
.cover-section--centered .cover-section__divider {
	width: 38px;
	height: 2px;
	margin-bottom: 26px;
	clip-path: none;
	border-radius: 2px;
	background: linear-gradient(90deg,
		rgba(42,162,222,.35) 0%,
		var(--color-primary) 50%,
		rgba(42,162,222,.35) 100%);
}

.cover-section--centered .cover-section__inner {
	max-width: 900px;
}
.cover-section--centered .cover-section__eyebrow {
	letter-spacing: .16em;
	margin-bottom: 22px;
}

/* The statement: larger and lighter than the default heading, with a
   measure that holds it to three or four lines. */
.cover-section--centered .cover-section__heading {
	font-size: clamp(2rem, 1.2rem + 3.2vw, 3.35rem);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -.022em;
	max-width: 22ch;
	margin: 0 auto 24px;
	text-wrap: balance;
}

.cover-section--centered .cover-section__text {
	max-width: 62ch;
	margin: 0 auto 22px;
}
.cover-section--centered .cover-section__source { margin-left: auto; margin-right: auto; }
.cover-section--centered .cover-section__source:last-of-type { margin-bottom: 30px; }
.cover-section--centered .cover-section__tabs { justify-content: center; }

@media (max-width: 900px) {
	.cover-section--centered .cover-section__heading { max-width: none; }
}
@media (max-width: 600px) {
	.cover-section--centered { min-height: 0; }
	.cover-section--centered .cover-section__content { padding: 60px 20px; }
	.cover-section--centered .cover-section__divider { margin-bottom: 20px; }
	.cover-section--centered .cover-section__eyebrow { margin-bottom: 16px; }
}

/* ---------------------------------------------------------------
   GlobalIQ AI content shapes
   --------------------------------------------------------------- */

/* Hero slide 2 lists nine industries instead of running prose, so it
   renders as a real list — two columns so it stays compact beside the
   headline rather than pushing the CTA out of frame. */
.hero-slide__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 26px;
	margin: 0 0 30px;
	max-width: 30ch;
}
.hero-slide__list li {
	position: relative;
	padding-left: 15px;
	font-size: clamp(.85rem, .8rem + .2vw, .94rem);
	font-weight: 300;
	line-height: 1.7;
	color: rgba(255,255,255,.86);
	text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.hero-slide__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-primary);
}

/* Attribution lines under a cover-section stat. Deliberately quiet — they
   are provenance, not part of the message. */
.cover-section__source {
	font-size: 11.5px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: .01em;
	color: rgba(255,255,255,.55);
	margin-bottom: 4px;
	word-break: break-word;
}
.cover-section__source:last-of-type { margin-bottom: 28px; }

@media (max-width: 600px) {
	.hero-slide__list {
		grid-template-columns: 1fr;
		gap: 2px;
		margin-bottom: 24px;
	}
	.hero-slide__list li { line-height: 1.6; }
}

/* =============================================================
   Footer
   ============================================================= */
/* A brand-navy plate: a faint data-grid texture and one quiet ring
   stand in for the old flat blue + literal map image. */
.site-footer {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 1.4px) 0 0 / 30px 30px,
		radial-gradient(55% 65% at 16% 12%, rgba(42,162,222,.22) 0%, rgba(42,162,222,0) 70%),
		linear-gradient(160deg, #081420 0%, #0d2436 55%, #081420 100%);
	color: #fff;
	padding: 70px 0 50px;
}
.site-footer::after {
	content: "";
	position: absolute;
	top: 6%;
	right: -10%;
	width: clamp(360px, 42vw, 560px);
	height: clamp(360px, 42vw, 560px);
	border: 1px solid rgba(255,255,255,.07);
	border-radius: 50%;
	pointer-events: none;
}
.site-footer a { color: #fff; }
.site-footer__inner {
	position: relative;
	z-index: 1;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	/* Equal thirds: Sitemap dropped from 11 links to 6 once Agentic AI,
	   Solutions, Use Cases, Telehealth, and Wellness were hidden, so it no
	   longer needs the wider middle track its old two-column mini-grid
	   depended on — About's own copy is already capped by .footer-about's
	   max-width, so it doesn't need the extra room either. */
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
.footer-logo {
	display: block;
	width: auto;
	height: 28px;
	margin-bottom: 18px;
}
.footer-about { font-size: 13px; line-height: 1.7; max-width: 300px; }
/* Contact Info now sits stacked directly under the description in
   the same column, so it needs its own breathing room above. */
.footer-about + .footer-contact-list { margin-top: 28px; }
.footer-contact-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.footer-menu li { margin-bottom: 15px; font-size: 14px; }
.footer-menu a:hover { color: var(--color-primary); }

/* Sitemap is a plain single-column list now, the same treatment as Legal
   beside it — both hold 6 links apiece. It used to need a hand-split
   two-column mini-grid (11 links, wider middle track) before Agentic AI,
   Solutions, Use Cases, Telehealth, and Wellness were hidden; that grid
   and the extra column padding it needed are both gone with them. */

/* Same navy as the footer's darkest gradient stop, so the bar reads
   as a continuation of that plate rather than a different dark grey
   bolted on underneath it. */
.copyright-bar {
	background: #081420;
	color: rgba(255,255,255,.7);
	text-align: center;
	padding: 15px 0;
	font-size: 12px;
}

/* =============================================================
   Responsive
   ============================================================= */
/* --- Laptop: tighten nav spacing before it has to collapse --- */
@media (max-width: 1300px) {
	.site-header__inner { gap: 20px; padding: 0 22px; }
	.primary-menu > li > a { padding: 0 10px; font-size: 14.5px; }
	.primary-menu > li > a::after { left: 10px; right: 10px; }
	/* Padding tightens to 10px here, so the chevron tucks in to match and the
	   mark shrinks a step to keep a gap between it and the label. */
	.primary-menu > li.has-submenu > a::before { right: 3px; width: 5px; height: 5px; }
}

/* --- Small laptop, tablet & below: 12 top-level items need ~1200px to sit
       on one row, so below that the nav collapses to the slide-in panel
       instead of overflowing the viewport. --- */
@media (max-width: 1200px) {
	.nav-toggle { display: flex; }
	.primary-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: 82%;
		max-width: 340px;
		background: #191919;
		transform: translateX(100%);
		transition: transform .25s ease;
		z-index: 1000;
		display: block;
		padding-top: var(--header-height);
		overflow-y: auto;
	}
	.primary-nav.is-open { transform: translateX(0); }
	.nav-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0; right: 0;
		width: var(--header-height);
		height: var(--header-height);
		background: none;
		border: none;
		color: #fff;
		cursor: pointer;
	}
	.nav-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,.5);
		z-index: 999;
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility .25s ease;
	}
	.nav-overlay.is-open { opacity: 1; visibility: visible; }
	.primary-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.primary-menu > li { border-bottom: 1px solid rgba(255,255,255,.08); }
	.primary-menu > li > a { line-height: 50px; padding: 0 20px; font-size: 15px; }
	.primary-menu > li > a::after { display: none; }
	/* The .submenu-toggle button draws its own chevron here, so the desktop
	   one is suppressed. */
	.primary-menu > li.has-submenu > a::before { display: none; }
	.primary-menu > li.has-submenu > a { padding-right: 20px; }
	.primary-menu > li.has-submenu > a::before { display: none; }
	.submenu-toggle {
		display: block;
		position: absolute;
		right: 10px; top: 0;
		width: 50px; height: 50px;
		background: none;
		border: none;
	}
	.submenu-toggle::before {
		content: "";
		display: block;
		width: 8px; height: 8px;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		margin: 20px auto;
		transition: transform .2s;
	}
	.has-submenu.is-open > .submenu-toggle::before { transform: rotate(225deg); }
	.sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		box-shadow: none;
		background: rgba(255,255,255,.03);
		min-width: 0;
	}
	.has-submenu.is-open > .sub-menu { display: block; }

	/* Content can use more width once the nav is out of the bar. */
	.hero-slide__content { left: 6%; width: min(620px, 66%); }
}

@media (max-width: 1024px) {
	.hero-slide__content { width: min(580px, 74%); }
	.hero-slide__accent { margin-bottom: 22px; }
	.hero-slide__text { max-width: 50ch; }
	/* About+Contact runs long once Contact Info folds in, so it takes
	   the full top row; Sitemap and Legal share the row underneath. */
	.site-footer__inner { grid-template-columns: repeat(2, 1fr); gap: 40px; }
	.footer-col--about { grid-column: span 2; }

	/* Masthead narrows a touch so the copy column keeps its room. */
	.cover-section__content {
		grid-template-columns: clamp(140px, 19vw, 210px) 5px minmax(0, 1fr);
		column-gap: clamp(22px, 4vw, 44px);
	}
	.cover-section__logo { max-width: 200px; }
	.cover-section__divider { height: clamp(160px, 36vh, 260px); }

	.mission-section__orbit { right: -22%; width: clamp(380px, 52vw, 600px); }
}

@media (max-width: 767px) {
	.site-header__inner { gap: 14px; padding: 0 18px; }
	.site-branding img { height: 26px; }
	.footer-about{margin: 0 auto;}
	.hero-slide__content {
		left: 6%; right: 6%;
		width: auto;
	}
	.hero-slide__accent { width: 44px; height: 2px; margin-bottom: 18px; }
	.hero-slide__title { font-size: clamp(1.5rem, 6.6vw, 1.85rem); line-height: 1.2; letter-spacing: -.015em; margin-bottom: 16px; }
	.hero-slide:first-child .hero-slide__title { margin-bottom: 26px; }
	.hero-slide__text { line-height: 1.5; max-width: none; }
	.hero-slide__text:last-of-type { margin-bottom: 28px; }
	.hero-slide__content .btn--primary { padding: 12px 20px; font-size: 11.5px; }
	/* Copy sits over a taller stretch of image on phones, so the scrim
	   leans vertical rather than diagonal. */
	.hero-slide__overlay {
		background:
			linear-gradient(to top,
				rgba(3,12,22,.80) 0%,
				rgba(3,12,22,.74) 22%,
				rgba(3,12,22,.70) 48%,
				rgba(3,12,22,.58) 72%,
				rgba(3,12,22,.42) 100%);
	}

	/* Copy sits over a taller stretch of image on phones too, so the
	   scrim leans vertical rather than diagonal, same as the hero. */
	.cover-section__overlay {
		background:
			linear-gradient(to top,
				rgba(3,12,22,.80) 0%,
				rgba(3,12,22,.74) 22%,
				rgba(3,12,22,.70) 48%,
				rgba(3,12,22,.58) 72%,
				rgba(3,12,22,.42) 100%);
	}
	/* The masthead stacks: mark and blade centre as their own quiet
	   row, then the (wider-measure) copy runs left-aligned below —
	   the asymmetry holds even once the columns give way. */
	.cover-section__content {
		grid-template-columns: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		row-gap: 26px;
	}
	.cover-section__logo { max-width: 190px; }
	.cover-section__divider {
		width: clamp(120px, 46vw, 200px);
		height: 5px;
		background: linear-gradient(90deg,
			rgba(42,162,222,0) 0%,
			rgba(42,162,222,.5) 15%,
			rgba(140,205,240,.85) 50%,
			rgba(42,162,222,.5) 85%,
			rgba(42,162,222,0) 100%);
	}
	.cover-section__inner { max-width: none; width: 100%; }
	.cover-section__tabs { flex-direction: column; align-items: flex-start; gap: 14px; }
	.cover-section__tabs .btn--outline { width: 100%; justify-content: center; }

	/* The blade now runs horizontally, so it unfolds sideways too. */
	.cover-section.reveal-ready .cover-section__divider { transform: scaleX(0); }
	.cover-section.reveal-ready.is-visible .cover-section__divider { transform: scaleX(1); }

	.mission-simple__inner {
		grid-template-columns: none;
		display: flex;
		flex-direction: column;
		row-gap: 28px;
	}
	.mission-simple__heading { max-width: none; }
	.mission-simple__panel { max-width: none; }
	.mission-simple__image { height: clamp(220px, 60vw, 320px); }
	.mission-simple__corner { display: none; }

	/* The globe moves out of the text's way rather than shrinking in
	   place — centred behind a short mobile measure it would sit
	   right on top of every line instead of just the margins. */
	.mission-section { padding: clamp(64px, 16vw, 100px) 0; }
	.mission-section__orbit {
		top: 4%;
		right: -34%;
		width: clamp(260px, 70vw, 380px);
		transform: none;
	}
	.mission-section__signature { margin-left: 0; }

	.site-footer__inner { grid-template-columns: 1fr; text-align: center; }
	.footer-col--about { grid-column: auto; }
	.footer-logo { margin: 0 auto 18px; }
	.footer-contact-list li { justify-content: center; }
}
/* --- Capability highlights: responsive recomposition --- */
/* Laptop / tablet: numeral keeps its own rail spanning both text rows,
   so the heading and body stack while the numbering stays a left index. */
@media (max-width: 1024px) {
	.feature-item {
		grid-template-columns: 74px minmax(0, 1fr);
		gap: clamp(18px, 3vw, 34px);
		row-gap: 14px;
	}
	.feature-item::before { grid-row: span 2; font-size: clamp(2rem, 4.4vw, 2.6rem); }
	.feature-item__head,
	.feature-item__body { grid-column: 2; }
	.feature-item__body { max-width: 68ch; }
}

/* Phone: the numeral becomes a small inline index above the label rather
   than a rail, keeping the left edge aligned and the measure comfortable. */
@media (max-width: 600px) {
	.feature-section { padding: 64px 0; }
	.feature-section__inner { padding: 0 20px; }
	.feature-item {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 30px 0 32px;
	}
	.feature-item::before {
		grid-row: auto;
		font-size: 1.6rem;
		line-height: 1;
		margin-bottom: 14px;
		color: rgba(42,162,222,.3);
	}
	.feature-item::after { display: none; }
	.feature-item:hover { background-color: transparent; }
	.feature-item__head,
	.feature-item__body { grid-column: 1; }
	.feature-item__body { margin-top: 12px; max-width: none; line-height: 1.72; }
	.feature-item__eyebrow { font-size: 11px; margin-bottom: 10px; }
}
/* =============================================================
   Floating AI chat widget
   ============================================================= */
#fcw-trigger {
	position: fixed;
	bottom: 28px; right: 28px;
	z-index: 9998;
	width: 62px; height: 62px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: var(--color-primary);
	box-shadow: 0 8px 32px rgba(42,162,222,.45);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease, box-shadow .2s ease;
}
#fcw-trigger:hover { transform: scale(1.08); }
#fcw-trigger .icon-close { display: none; }
#fcw-trigger.open .icon-chat { display: none; }
#fcw-trigger.open .icon-close { display: block; }

#fcw-modal {
	position: fixed;
	bottom: 100px; right: 28px;
	z-index: 9997;
	width: 360px;
	max-width: calc(100vw - 40px);
	height: 520px;
	max-height: calc(100vh - 150px);
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 24px 64px rgba(0,0,0,.2);
	opacity: 0;
	transform: translateY(18px) scale(.97);
	pointer-events: none;
	visibility: hidden;
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
#fcw-modal.open {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: all;
	visibility: visible;
	transition: opacity .25s ease, transform .25s ease;
}
.fcw-header {
	display: flex; align-items: center; gap: .75rem;
	padding: 1rem 1.1rem;
	background: linear-gradient(135deg, rgba(42,162,222,.1), rgba(42,162,222,.04));
	border-bottom: 1px solid var(--color-border);
}
.fcw-avatar {
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--color-primary);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.fcw-header-info { flex: 1; }
.fcw-header-info strong { display: block; font-size: .92rem; color: #1a1a1a; }
.fcw-header-info span { font-size: .75rem; color: #22c55e; }
#fcw-close-btn {
	background: rgba(0,0,0,.06); border: none; color: #474747;
	width: 32px; height: 32px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}
#fcw-chat-container {
	flex: 1; overflow-y: auto;
	padding: 1.1rem;
	display: flex; flex-direction: column; gap: .6rem;
}
.fcw-footer { padding: .85rem; border-top: 1px solid var(--color-border); }
.fcw-input-row {
	display: flex; align-items: flex-end; gap: .6rem;
	background: rgba(0,0,0,.03);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	padding: .5rem .55rem .5rem .85rem;
}
#fcw-prompt-input {
	flex: 1; background: transparent; border: none; outline: none;
	font: inherit; font-size: .88rem; resize: none;
	max-height: 110px; min-height: 22px;
}
#fcw-send-btn {
	width: 36px; height: 36px; border-radius: 10px; border: none;
	background: var(--color-primary); color: #fff;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.ask-ai-row { display: flex; }
.ask-ai-row--user { justify-content: flex-end; }
.ask-ai-bubble {
	max-width: 80%; padding: .6rem .85rem; border-radius: 16px;
	font-size: .86rem; line-height: 1.5;
}
.ask-ai-bubble--user { background: rgba(0,0,0,.05); border-bottom-right-radius: 4px; }
.ask-ai-bubble--bot { background: rgba(42,162,222,.08); border-bottom-left-radius: 4px; }

/* AI replies render as Markdown (see main.js) -- the backend's prose comes
   back with **bold**/"- list" syntax, so these tags are real content, not
   decoration. Just enough reset that paragraphs/lists don't carry their
   default browser spacing inside an already-padded bubble. */
.ask-ai-bubble p,
.ask-ai-bubble ul,
.ask-ai-bubble ol { margin: 0; padding: 0; }
.ask-ai-bubble p + p { margin-top: .5rem; }
.ask-ai-bubble ul,
.ask-ai-bubble ol { padding-left: 1.1rem; }
.ask-ai-bubble li { margin: .35rem 0; }
.ask-ai-bubble strong { font-weight: 700; }

.ask-ai-typing { display: flex; align-items: center; gap: 4px; height: 18px; }
.ask-ai-typing span {
	display: inline-block; width: 6px; height: 6px; border-radius: 50%;
	background: var(--color-primary);
	animation: fcw-typing-dot 1.2s ease-in-out infinite both;
}
.ask-ai-typing span:nth-child(2) { animation-delay: .2s; }
.ask-ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes fcw-typing-dot {
	0%, 80%, 100% { transform: scale(.7); opacity: .4; }
	40% { transform: scale(1); opacity: 1; }
}

@media (max-width: 480px) {
	#fcw-modal { left: 12px; right: 12px; width: auto; }
}

/* =============================================================
   Inner pages — shared premium components for the GlobalHealth AI
   sub-pages (Applications, Technology, Insurance, Remote Patient
   Monitoring, Workforce Safety). Same design language as the
   homepage — the brand-navy scrim family, the hero's gradient CTA,
   the numbered feature-item rail (reused as-is) — recomposed for a
   single-topic deep-dive page rather than a marketing homepage.
   ============================================================= */

/* ---------- Page hero ---------- */
.page-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #081420 0%, #0d2436 55%, #081420 100%);
	padding: clamp(148px, 17vw, 224px) 0 clamp(80px, 10vw, 130px);
}
/* Opt-in full-height treatment — a modifier, not a change to the base
   rule above, so pages using the plain .page-hero keep their own
   (shorter, padding-based) height untouched. */
.page-hero--full {
	height: 100vh;
	min-height: 640px;
	display: flex;
	align-items: center;
	padding-top: 90px;
	padding-bottom: 60px;
}
/* Shared by About and Contact: both are simple utility-page heroes that need
   to read as the same height as each other, not just as "shorter than the
   100vh --full variant." A shared min-height plus flex-centering makes that
   exact regardless of small differences in what each one's content stack
   ends with (a button on one, a text paragraph on the other) — the natural,
   padding-driven height of the two was only ever coincidentally close. */
.page-hero--intro {
	/* A floor that still yields on a short browser window: 660px exceeds
	   either page's natural content height (About: 649px, Contact: 615px),
	   so both land on this floor and match exactly; min() caps it against
	   78% of viewport height so it never forces a hero taller than the
	   window itself on a short screen. */
	min-height: min(660px, 78vh);
	display: flex;
	align-items: center;
}
/* Optional photo layer — pages that omit this <img> fall back to the
   base gradient; pages that render it get the same scrim graded over
   the photo so the eyebrow/title/CTA stay legible either way. */
.page-hero__image {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
/* A graded charcoal wash rather than a flat tint, plus one soft
   brand-blue bloom sitting behind it (near where the node network
   accent lives) — just enough to catch the eye without competing
   with the given gradient, which stays the dominant, visible layer. */
.page-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(160deg, rgb(33 31 31 / 95%) 0%, rgb(16 16 16 / 76%) 55%, rgb(8 8 8 / 91%) 100%),
		radial-gradient(60% 60% at 78% 35%, rgba(42,162,222,.18) 0%, rgba(42,162,222,0) 70%);
}
/* A connected-node network, not the Our Mission globe — each inner
   page gets its own atmosphere within the same family of devices. */
.page-hero__network {
	position: absolute;
	top: 50%;
	right: -10%;
	width: clamp(420px, 46vw, 680px);
	aspect-ratio: 1;
	transform: translateY(-50%);
	pointer-events: none;
}
.page-hero__network svg { width: 100%; height: 100%; display: block; }
.page-hero__network .node {
	fill: var(--color-primary);
	animation: pageHeroPulse 4.2s ease-in-out infinite;
}
.page-hero__network line {
	stroke: rgba(42,162,222,.3);
	stroke-width: 1;
}
@keyframes pageHeroPulse {
	0%, 100% { opacity: .35; }
	50% { opacity: .9; }
}
.page-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 20px;
}
.page-hero__breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: rgba(255,255,255,.55);
	margin-bottom: clamp(28px, 4vw, 44px);
}
.page-hero__breadcrumb a { color: rgba(255,255,255,.8); transition: color .2s ease; }
.page-hero__breadcrumb a:hover { color: var(--color-primary); }
.page-hero__breadcrumb span[aria-hidden] { color: rgba(255,255,255,.35); }
.page-hero__breadcrumb [aria-current] { color: #fff; }
.page-hero__content { max-width: 660px; }
.page-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: 12.5px;
	font-weight: 700;
	color: rgba(255,255,255,.78);
	margin-bottom: 24px;
}
.page-hero__eyebrow-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(42,162,222,.25);
	flex-shrink: 0;
}
.page-hero__title {
	color: #fff;
	font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.8rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: 0 0 18px;
}
/* When the CTA follows the title directly (no description paragraph
   in between, as on the "_2" page), it needs its own breathing room
   rather than inheriting the title's tighter bottom margin. */
.page-hero__title + .btn--primary { margin-top: clamp(16px, 2.4vw, 28px); }
.page-hero__tagline {
	color: var(--color-primary);
	font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem);
	font-weight: 600;
	margin: 0 0 22px;
}
.page-hero__text {
	color: rgba(255,255,255,.82);
	font-weight: 300;
	line-height: 1.7;
	font-size: clamp(1rem, .94rem + .3vw, 1.1rem);
	max-width: 56ch;
	margin: 0 0 20px;
}
.page-hero__text:last-of-type { margin-bottom: 36px; }
/* Same gradient-glow CTA as the homepage hero, scoped here so the
   hero slider's own rules never have to know this page exists. */
.page-hero__content .btn--primary {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 26px;
	border-radius: 5px;
	border: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .075em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, #35b0e8 0%, var(--color-primary) 45%, #1c86bd 100%);
	box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -9px rgba(42,162,222,.7);
	transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, filter .28s ease;
}
.page-hero__content .btn--primary::after {
	content: "";
	width: 15px; height: 7px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 8"><path d="M0 4h14M11 1l3.4 3-3.4 3" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 8"><path d="M0 4h14M11 1l3.4 3-3.4 3" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
	transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.page-hero__content .btn--primary:hover {
	transform: translateY(-2px);
	filter: saturate(1.06);
	box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 13px 28px -11px rgba(42,162,222,.85);
}
.page-hero__content .btn--primary:hover::after { transform: translateX(5px); }

.page-hero.reveal-ready .page-hero__breadcrumb,
.page-hero.reveal-ready .page-hero__eyebrow,
.page-hero.reveal-ready .page-hero__title,
.page-hero.reveal-ready .page-hero__tagline,
.page-hero.reveal-ready .page-hero__text,
.page-hero.reveal-ready .page-hero__content .btn--primary {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.page-hero.reveal-ready.is-visible .page-hero__breadcrumb,
.page-hero.reveal-ready.is-visible .page-hero__eyebrow,
.page-hero.reveal-ready.is-visible .page-hero__title,
.page-hero.reveal-ready.is-visible .page-hero__tagline,
.page-hero.reveal-ready.is-visible .page-hero__text,
.page-hero.reveal-ready.is-visible .page-hero__content .btn--primary {
	opacity: 1;
	transform: none;
}
.page-hero.reveal-ready .page-hero__breadcrumb { transition-delay: 0s; }
.page-hero.reveal-ready .page-hero__eyebrow { transition-delay: .04s; }
.page-hero.reveal-ready .page-hero__tagline { transition-delay: .10s; }
.page-hero.reveal-ready .page-hero__title { transition-delay: .16s; }
.page-hero.reveal-ready .page-hero__text { transition-delay: .24s; }
.page-hero.reveal-ready .page-hero__content .btn--primary { transition-delay: .32s; }

@media (max-width: 767px) {
	.page-hero { padding: clamp(120px, 30vw, 160px) 0 64px; }
	.page-hero--full { height: auto; min-height: 100vh; padding: clamp(120px, 30vw, 160px) 0 64px; }
	.page-hero__network { width: clamp(280px, 70vw, 380px); top: 12%; right: -28%; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.page-hero__network .node { animation: none; }
	.page-hero.reveal-ready .page-hero__breadcrumb,
	.page-hero.reveal-ready .page-hero__eyebrow,
	.page-hero.reveal-ready .page-hero__title,
	.page-hero.reveal-ready .page-hero__tagline,
	.page-hero.reveal-ready .page-hero__text,
	.page-hero.reveal-ready .page-hero__content .btn--primary {
		opacity: 1; transform: none; transition: none;
	}
}

/* ---------- Journey / programme cards ---------- */
.journey-section { padding: clamp(80px, 9vw, 130px) 0; background: #fff; }
.journey-section__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }
.journey-section__head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 60px); }
.journey-section__eyebrow {
	display: flex; align-items: center; gap: 10px;
	text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; font-weight: 700;
	color: rgba(15,35,55,.55); margin-bottom: 18px;
}
.journey-section__eyebrow-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--color-primary); box-shadow: 0 0 0 4px rgba(42,162,222,.18); flex-shrink: 0;
}
.journey-section__title {
	color: #0f2338; font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem); font-weight: 600;
	line-height: 1.25; letter-spacing: -.01em; margin: 0 0 18px; max-width: 34ch;
}
.journey-section__text { color: rgba(15,35,55,.65); font-size: 1rem; line-height: 1.75; max-width: 68ch; margin: 0; }

.journey-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.5vw, 28px); }
.journey-card {
	background: #f7fafc;
	border: 1px solid rgba(15,35,55,.08);
	border-radius: 20px;
	padding: clamp(28px, 3vw, 36px);
	transition: transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease, border-color .32s ease;
}
.journey-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 28px 52px -30px rgba(15,35,55,.3);
	border-color: rgba(42,162,222,.25);
}
.journey-card__icon {
	width: 46px; height: 46px; border-radius: 12px;
	background: rgba(42,162,222,.1); color: var(--color-primary);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 20px;
}
.journey-card__title { font-size: 1.15rem; font-weight: 600; color: #0f2338; line-height: 1.3; margin: 0 0 12px; }
.journey-card__text { font-size: .93rem; line-height: 1.72; color: #5b6a79; margin: 0; }

.journey-grid.reveal-ready .journey-card {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.journey-grid.reveal-ready .journey-card.is-visible { opacity: 1; transform: none; }

@media (max-width: 700px) {
	.journey-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.journey-grid.reveal-ready .journey-card { opacity: 1; transform: none; transition: none; }
	.journey-card { transition: none; }
}

/* ---------- Audience tabs ---------- */
.audience-section { padding: clamp(80px, 9vw, 130px) 0; background: linear-gradient(180deg, #f5f9fc 0%, #ffffff 100%); }
.audience-section__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }
.audience-section__head { max-width: 720px; margin-bottom: clamp(36px, 4vw, 52px); }
.audience-section__eyebrow {
	display: flex; align-items: center; gap: 10px;
	text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; font-weight: 700;
	color: rgba(15,35,55,.55); margin-bottom: 18px;
}
.audience-section__eyebrow-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--color-primary); box-shadow: 0 0 0 4px rgba(42,162,222,.18); flex-shrink: 0;
}
.audience-section__title {
	color: #0f2338; font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem); font-weight: 600;
	line-height: 1.25; letter-spacing: -.01em; margin: 0; max-width: 34ch;
}

.audience-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
	margin: 0 0 clamp(32px, 4vw, 48px);
	border-bottom: 1px solid rgba(15,35,55,.1);
	list-style: none;
	padding: 0;
	overflow-x: auto;
}
.audience-tab {
	display: inline-block;
	padding: 12px 2px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	font-size: 14px;
	font-weight: 600;
	color: rgba(15,35,55,.5);
	white-space: nowrap;
	cursor: pointer;
	transition: color .25s ease, border-color .25s ease;
	position: relative;
	top: 1px;
}
.audience-tab:hover { color: rgba(15,35,55,.85); }
.audience-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.audience-panel { display: none; }
.audience-panel.is-active { display: block; animation: audienceFade .45s ease both; }
@keyframes audienceFade {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
.audience-panel__title {
	color: #0f2338; font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.9rem); font-weight: 600;
	line-height: 1.3; margin: 0 0 16px;
}
.audience-panel__text {
	color: rgba(15,35,55,.68); font-size: 1rem; line-height: 1.75; max-width: 78ch; margin: 0 0 32px;
}

.audience-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 3vw, 44px); }
.audience-group__title {
	font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
	color: var(--color-primary); margin: 0 0 18px;
}
.audience-list, .audience-group__list {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 32px;
	margin: 0; padding: 0; list-style: none;
}
.audience-group__list { display: flex; flex-direction: column; gap: 16px; }
.audience-list li, .audience-group__list li {
	position: relative;
	padding-left: 20px;
	font-size: .95rem;
	line-height: 1.65;
	color: #374856;
}
.audience-list li::before, .audience-group__list li::before {
	content: "";
	position: absolute;
	left: 0; top: .6em;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: rgba(42,162,222,.4);
}
.audience-list li strong, .audience-group__list li strong { color: #0f2338; font-weight: 600; }

@media (max-width: 900px) {
	.audience-groups { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
	.audience-list { grid-template-columns: 1fr; }
	.page-hero__breadcrumb{font-size: 11px;}
}

/* ---------- Notice band ---------- */

/* ---------- Closing CTA band ---------- */
.cta-band {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: clamp(72px, 9vw, 120px) 0;
	background: linear-gradient(160deg, #081420 0%, #0d2436 100%);
}
.cta-band::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: clamp(360px, 50vw, 620px); height: clamp(360px, 50vw, 620px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(42,162,222,.14) 0%, rgba(42,162,222,0) 70%);
	pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 0 20px; }
.cta-band__title { color: #fff; font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); font-weight: 600; line-height: 1.25; margin: 0 0 20px; }
.cta-band__text { color: rgba(255,255,255,.8); font-size: 1rem; line-height: 1.7; margin: 0 0 36px; max-width: 60ch; margin-left: auto; margin-right: auto; }
.cta-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn--primary {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 14px 26px; border-radius: 5px; border: none;
	font-size: 12px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, #35b0e8 0%, var(--color-primary) 45%, #1c86bd 100%);
	box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 20px -9px rgba(42,162,222,.7);
	transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, filter .28s ease;
}
.cta-band .btn--primary::after,
.cta-band .btn--ghost::after {
	content: "";
	width: 15px; height: 7px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 8"><path d="M0 4h14M11 1l3.4 3-3.4 3" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 8"><path d="M0 4h14M11 1l3.4 3-3.4 3" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
	transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.cta-band .btn--primary:hover {
	transform: translateY(-2px);
	filter: saturate(1.06);
	box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 13px 28px -11px rgba(42,162,222,.85);
}
.cta-band .btn--primary:hover::after,
.cta-band .btn--ghost:hover::after { transform: translateX(4px); }
.cta-band .btn--ghost {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 14px 26px; border-radius: 5px;
	font-size: 12px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase;
	color: #fff; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.35);
	transition: background-color .28s ease, border-color .28s ease, transform .28s ease;
}
.cta-band .btn--ghost:hover { background: #fff; color: var(--color-primary); border-color: #fff; transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
	.cta-band .btn--primary, .cta-band .btn--ghost,
	.cta-band .btn--primary::after, .cta-band .btn--ghost::after { transition: none; }
}

/* =============================================================
   "_2" page variant — same content, section order, copy, and
   images as the reference site, restyled only. No new sections,
   no reordering, no rewritten copy: every h2/p/ul below maps 1:1
   to a row on the source page. The one deliberate fix is visual,
   not content: the source page has an oversized hero slider whose
   content overflows into the row beneath it, so the "GlobalHealth"
   logo lockup visually bleeds onto the photo behind it. That's a
   rendering bug in the original page builder, not a content
   decision, so here the hero and the logo intro sit as two clean,
   non-overlapping sections instead.
   ============================================================= */

/* ---------- Brand band (solid-blue wordmark / mark / tagline) ---------- */
.brand-band {
	position: relative;
	overflow: hidden;
	padding: clamp(36px, 4vw, 52px) 0;
	text-align: center;
	background:
		radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 1.4px) 0 0 / 28px 28px,
		linear-gradient(135deg, #35b0e8 0%, var(--color-primary) 45%, #1c86bd 100%);
}
.brand-band__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 0 20px; }
.brand-band__wordmark {
	color: #fff;
	font-size: clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
	font-weight: 500;
	letter-spacing: -.01em;
	margin: 0 0 10px;
}
.brand-band__icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(44px, 4.5vw, 54px);
	height: clamp(44px, 4.5vw, 54px);
	margin-bottom: 10px;
}
/* The gap below the mark only exists to separate it from the tagline. Pages
   whose brand band carries no tagline would otherwise sit bottom-heavy. */
.brand-band__icon-wrap:last-child { margin-bottom: 0; }
/* A soft halo instead of a hard card edge — the mark floats on the
   brand field rather than sitting in a box. */
.brand-band__icon-wrap::before {
	content: "";
	position: absolute;
	inset: -9px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 72%);
}
.brand-band__icon {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 6px 14px rgba(3,12,22,.25));
}
.brand-band__tagline {
	color: #fff;
	font-size: clamp(.95rem, .88rem + .3vw, 1.05rem);
	font-weight: 600;
	margin: 0;
}

.brand-band.reveal-ready .brand-band__inner > * {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.brand-band.reveal-ready.is-visible .brand-band__inner > * { opacity: 1; transform: none; }
.brand-band.reveal-ready .brand-band__icon-wrap { transition-delay: .08s; }
.brand-band.reveal-ready .brand-band__tagline { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
	.brand-band.reveal-ready .brand-band__inner > * { opacity: 1; transform: none; transition: none; }
}

/* ---------- Proactive block (editorial split intro + icon-feature grid) ---------- */
.proactive-block { padding: clamp(52px, 5.5vw, 76px) 0; background: #fff; }
.proactive-block__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }

.proactive-block__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(48px, 6vw, 88px);
	align-items: center;
}

.proactive-block__intro { min-width: 0; }
.proactive-block__eyebrow {
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--color-primary);
	margin: 0 0 14px;
}
.proactive-block__intro h2 {
	color: #0f2338;
	font-size: clamp(1.9rem, 1.5rem + 2vw, 2.75rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.01em;
	margin: 0 0 22px;
}
.proactive-block__intro p { color: #4a5a68; font-size: 0.95rem; line-height: 1.8; margin: 0 0 18px; }
.proactive-block__intro p:last-child { margin-bottom: 0; }

.proactive-block__media {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: #0d2436;
}
.proactive-block__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.proactive-block__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, rgba(8, 20, 32, 0) 45%, rgba(8, 20, 32, .55) 100%);
	pointer-events: none;
}
.proactive-block__badge {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	box-shadow: 0 18px 40px -20px rgba(8, 20, 32, .5);
}
.proactive-block__badge-icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(42, 162, 222, .12);
	color: var(--color-primary);
}
.proactive-block__badge-icon svg { width: 19px; height: 19px; }
.proactive-block__badge-text { font-size: .92rem; font-weight: 600; color: #0f2338; line-height: 1.3; }

/* ---------- Proactive tabs (capability tab panel, inside the intro column) ---------- */
.proactive-tabs { margin-top: clamp(28px, 3vw, 36px); }

.proactive-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0 0 clamp(16px, 2vw, 20px);
	border-bottom: 1px solid rgba(15, 35, 55, .1);
}

.proactive-tabs__tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	background: none;
	border: 1px solid rgba(15, 35, 55, .12);
	border-radius: 999px;
	font-family: inherit;
	font-size: .80rem;
	font-weight: 600;
	line-height: 1.2;
	color: rgba(15, 35, 55, .58);
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.proactive-tabs__tab-icon { display: flex; flex: 0 0 auto; width: 14px; height: 14px; opacity: .65; transition: opacity .2s ease; }
.proactive-tabs__tab-icon svg { width: 100%; height: 100%; }
.proactive-tabs__tab:hover { color: #0f2338; border-color: rgba(15, 35, 55, .28); }
.proactive-tabs__tab:hover .proactive-tabs__tab-icon { opacity: .9; }
.proactive-tabs__tab.is-active {
	color: #fff;
	background: var(--color-primary);
	border-color: var(--color-primary);
}
.proactive-tabs__tab.is-active .proactive-tabs__tab-icon { opacity: 1; }
.proactive-tabs__tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.proactive-tabs__panels { padding-top: clamp(20px, 2.4vw, 26px); }
.proactive-tabs__panel { display: none; }
.proactive-tabs__panel.is-active { display: block; animation: audienceFade .4s ease both; }

.proactive-tabs__panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.proactive-tabs__panel-icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(42, 162, 222, .12);
	color: var(--color-primary);
}
.proactive-tabs__panel-icon svg { width: 18px; height: 18px; }
.proactive-tabs__panel-title { color: #0f2338; font-size: 1.1rem; font-weight: 600; letter-spacing: -.005em; margin: 0; }
.proactive-tabs__panel-text { color: #4a5a68; font-size: .98rem; line-height: 1.75; margin: 0; }

/* ---------- Compass block (editorial header + wellness-journey cards) ----------
   The four journeys were originally list items ~65 words each, sitting in a text
   column ~2.8x taller than the photo beside it. Split into a balanced header row
   plus a 2x2 card grid so the image and copy carry equal weight. */
.compass-block { padding: clamp(44px, 4.6vw, 64px) 0; background: #f7fafc; }
/* Background alternation is decided per page: where a tinted section already
   sits directly above this one, the plain variant stops the two merging into
   a single undifferentiated band. */
.compass-block--plain { background: #fff; }
.compass-block__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }

/* Image-left / text-right, so this section alternates against the text-left
   blocks above and below it. Column ratio is mirrored to keep the copy in the
   wider track, and the media is repositioned with `order` rather than by
   reordering the markup — the heading still comes first in the DOM. */
.compass-block__layout {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	gap: clamp(40px, 5vw, 72px);
	margin-bottom: clamp(32px, 3.4vw, 46px);
}
.compass-block__media { order: -1; }
/* Flip for pages where the surrounding sections need image-right here to keep
   the page-wide left/right alternation going — .compass-block defaults to
   image-left everywhere else, so this has to be an opt-in modifier rather
   than a change to the base rule above. The column ratio flips with it so
   the copy keeps the wider track regardless of which side it lands on. */
.compass-block--image-right .compass-block__layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.compass-block--image-right .compass-block__media { order: 0; }
.compass-block__intro { min-width: 0; align-self: center; }
.compass-block__intro h2 {
	color: #0f2338;
	font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.4rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 0 0 20px;
}
/* Two classes so this outranks the generic paragraph rule below — the lede
   is itself a <p>, so the generic rule would otherwise win. Matches
   .feature-block__lede / .growth-block__lede / .steps-block__lede exactly,
   for pages whose compass-block intro carries a short bold tagline rather
   than running straight from h2 into prose. */
.compass-block__intro .compass-block__lede {
	color: #0f2338;
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 16px;
}
.compass-block__intro p { color: #4a5a68; font-size: 1.02rem; line-height: 1.8; margin: 0 0 16px; }
.compass-block__intro p:last-child { margin-bottom: 0; }

/* Stretches to the intro's height so the row always reads as balanced,
   however long the copy runs. */
.compass-block__media {
	position: relative;
	align-self: stretch;
	min-height: 320px;
	border-radius: 6px;
	overflow: hidden;
}
.compass-block__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.compass-block__media:hover img { transform: scale(1.04); }

/* A rule grid, not a card grid: zero gap, and separation comes only from
   hairlines — a top rule on every cell, plus a left rule on the right-hand
   column. Whitespace is carried by cell padding so nothing feels boxed in.
   Padding and type run a step tighter than the sections around it, so four
   dense cells stay compact without losing the open, uncontained feel. */
.compass-block__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
}
.compass-block__card {
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 2.8vw, 36px) 0;
	border-top: 1px solid rgba(15, 35, 55, .1);
}
/* Top row sits open — no rule above it. */
.compass-block__card:nth-child(-n+2) { border-top: none; padding-top: 0; }
.compass-block__card:nth-child(odd) { padding-right: clamp(24px, 2.8vw, 40px); }
.compass-block__card:nth-child(even) {
	padding-left: clamp(24px, 2.8vw, 40px);
	border-left: 1px solid rgba(15, 35, 55, .1);
}


/* Bare stroke mark — no chip, no fill, no radius. */
.compass-block__icon {
	flex: 0 0 auto;
	display: block;
	color: var(--color-primary);
	margin-bottom: 14px;
}
.compass-block__icon svg { width: 22px; height: 22px; display: block; }

.compass-block__card h3 {
	color: #0f2338;
	font-size: 1.04rem;
	font-weight: 600;
	line-height: 1.38;
	letter-spacing: -.01em;
	margin: 0 0 8px;
}
/* Two classes (0,2,0) so this outranks `.compass-block__card p` (0,1,1) —
   the meta is itself a <p>, so the generic rule would otherwise win. */
.compass-block__card .compass-block__card-meta {
	margin: 0 0 10px;
	color: var(--color-primary);
	font-size: .68rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .1em;
}
.compass-block__card p { color: #55677a; font-size: .9rem; line-height: 1.72; margin: 0; }

/* Icon-left variant: reorients the card to match .growth-block__list's
   icon+title+description row shape (icon beside the title, spanning the
   card's full height) instead of the default icon-above-title stack. Scoped
   to an opt-in modifier so the GlobalHealth AI sub-pages' own compass-block
   cards (Insurance, RPM, Applications, Technology) keep their established,
   reference-matched layout untouched. */
.compass-block__grid--icon-left .compass-block__card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 14px;
	/* Shorter row height than the default icon-above card -- the icon-left
	   shape doesn't need the extra vertical room an icon stacked above the
	   title does. */
	padding-top: clamp(16px, 1.8vw, 22px);
	padding-bottom: clamp(16px, 1.8vw, 22px);
}
/* The base .compass-block__card:nth-child(odd) rule gives the left column
   padding-right only (it was designed to bleed flush left for the
   icon-above stack) — that leaves the icon jammed against the section edge
   here. Give it the same left inset .growth-block__group:first-child uses
   (--growth-bleed) so both columns read as evenly gutter. */
.compass-block__grid--icon-left .compass-block__card:nth-child(odd) { padding-left: 18px; }
/* This variant always sits under its own .compass-block__group-titles row,
   not directly under .compass-block__layout like the default card grid, so
   the top row needs its own (compact) padding-top back — the base
   :nth-child(-n+2) rule zeroes it for the flush-under-the-photo case the
   other compass-block pages use. */
.compass-block__grid--icon-left .compass-block__card:nth-child(-n+2) { padding-top: clamp(16px, 1.8vw, 22px); }
.compass-block__grid--icon-left .compass-block__icon {
	grid-column: 1;
	grid-row: 1 / -1;
	margin-bottom: 0;
	margin-top: 2px;
}
.compass-block__grid--icon-left .compass-block__card h3,
.compass-block__grid--icon-left .compass-block__card .compass-block__card-meta,
.compass-block__grid--icon-left .compass-block__card > p { grid-column: 2; }

/* Two-discipline variant (Agentic AI): each .compass-block__group holds its
   own .growth-block__group-title plus a one-column .compass-block__grid of its
   cards, so when stacked the order reads title → its items → next title.
   Side by side, the groups share the outer grid's row tracks via subgrid (as
   .growth-block__groups does), so it renders as the same two-column rule grid
   with hairlines aligned across the divider. */
.compass-block__group { min-width: 0; }
.compass-block__group .compass-block__grid { grid-template-columns: minmax(0, 1fr); }
/* Same label style as .growth-block, with a small gap before the cards. */
.compass-block__group .growth-block__group-title { margin-bottom: 4px; }
/* The base :nth-child(-n+2) "open top row" rule assumes a two-column grid;
   in a one-column group only the first card sits under the title. */
.compass-block__group .compass-block__card:not(:first-child) { border-top: 1px solid rgba(15, 35, 55, .1); }
/* The ≤1024px last-row rule (:nth-last-child(2):nth-child(odd)) would also
   catch card 3 of 4 here — only each group's last card closes the section. */
.compass-block__group .compass-block__grid > .compass-block__card:nth-last-child(2):nth-child(odd) {
	padding-bottom: clamp(16px, 1.8vw, 22px);
}
@media (min-width: 701px) {
	.compass-block__groups {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
	}
	/* Left column: 18px inset matching the icon-left cards, gutter on the right. */
	.compass-block__group:first-child .growth-block__group-title,
	.compass-block__group:first-child .compass-block__card {
		padding-left: 18px;
		padding-right: clamp(24px, 2.8vw, 40px);
		border-left: none;
	}
	/* Right column: gutter on the left, and the divider runs from the title
	   straight down through the cards. */
	.compass-block__group:last-child .growth-block__group-title,
	.compass-block__group:last-child .compass-block__card {
		padding-left: clamp(24px, 2.8vw, 40px);
		padding-right: 0;
		border-left: 1px solid rgba(15, 35, 55, .1);
	}
}
@supports (grid-template-rows: subgrid) {
	@media (min-width: 701px) {
		/* 1 title row + 4 card rows. */
		.compass-block__groups { grid-template-rows: repeat(5, auto); }
		.compass-block__group {
			display: grid;
			grid-row: 1 / -1;
			grid-template-rows: subgrid;
		}
		.compass-block__group .compass-block__grid {
			grid-row: 2 / -1;
			grid-template-rows: subgrid;
		}
	}
}
/* Stacked: the second discipline starts clear of the first one's last card. */
@media (max-width: 700px) {
	.compass-block__group + .compass-block__group { margin-top: clamp(28px, 6vw, 38px); }
}
.compass-block.reveal-ready .compass-block__intro,
.compass-block.reveal-ready .compass-block__media,
.compass-block.reveal-ready .compass-block__card {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.compass-block.reveal-ready.is-visible .compass-block__intro,
.compass-block.reveal-ready.is-visible .compass-block__media,
.compass-block.reveal-ready.is-visible .compass-block__card { opacity: 1; transform: none; }
.compass-block.reveal-ready .compass-block__media { transition-delay: .1s; }
.compass-block.reveal-ready .compass-block__card:nth-child(2) { transition-delay: .08s; }
.compass-block.reveal-ready .compass-block__card:nth-child(3) { transition-delay: .16s; }
.compass-block.reveal-ready .compass-block__card:nth-child(4) { transition-delay: .24s; }

/* Hover, deliberately minimal — and built only from properties the reveal
   rules above never touch, which is the whole trick here. The card's own
   `transition`/`transform` are owned by `.compass-block.reveal-ready
   .compass-block__card` (0,3,0) and `…is-visible…` (0,4,0), so anything
   declared on the card itself loses the cascade or fights the entrance
   animation. Putting the accents on the children sidesteps that entirely —
   each is free to carry its own timing.

   No background wash: the cells are separated by hairlines, not boxes, so any
   tinted panel would have to bleed past the cell's border box to meet those
   rules — and that bleed crosses the divider into the neighbouring cell. The
   hover is carried by the type and the mark instead, which keeps the rule-grid
   language intact. */
.compass-block__icon {
	transition: transform .32s cubic-bezier(.2,.7,.3,1), color .32s ease;
}
.compass-block__card h3 { transition: color .32s ease; }
.compass-block__card p { transition: color .32s ease; }

.compass-block__card:hover .compass-block__icon,
.compass-block__card:focus-within .compass-block__icon { transform: translateY(-2px); }
.compass-block__card:hover h3,
.compass-block__card:focus-within h3 { color: var(--color-primary); }
/* Body copy lifts a shade closer to the heading — enough to register as
   "this one is active" without the block visibly changing weight. */
.compass-block__card:hover p,
.compass-block__card:focus-within p { color: #44586b; }
.compass-block__card:hover .compass-block__card-meta,
.compass-block__card:focus-within .compass-block__card-meta { color: var(--color-primary); }


/* ---------- Technology: enterprise stack -----------------------------------
   One ruled grid, not two stacked blocks. Both bands share the same two
   columns with a zero gap, so a single hairline runs down the 50% line from
   the intro through every capability row, and each row is separated by a
   horizontal rule of the same weight. Gutters are carried by cell padding, as
   in .compass-block and .growth-block — the section is a rule grid throughout,
   with no card or panel interrupting it.

   The intro band and the capability rows were previously on unrelated grids
   (a 52/48 split against three equal columns), which is why they read as two
   separate compositions no matter how the gap between them was tuned. */
.tech-stack { padding: clamp(52px, 5.5vw, 76px) 0; background: #fff; }
.tech-stack__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }

/* --- shared grid metrics: change these two together or the rules misalign --- */
.tech-stack__layout,
.tech-stack__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
}

/* Intro band: copy left, diagram right, closed by the rule that also serves as
   the capability grid's top border. */
.tech-stack__layout { border-bottom: 1px solid rgba(15, 35, 55, .1); }

/* Both cells centre their own contents, so the short copy sits level with the
   middle of the taller diagram instead of floating at the top of the band.
   Padding-bottom lives on the cells rather than the container, so the vertical
   rule reaches the horizontal one instead of stopping short of it. */
.tech-stack__head,
.tech-stack__figure {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	/* This padding is what separates the intro band from the capability grid
	   below — .tech-stack__layout itself carries no margin-bottom, so the
	   vertical rule stays flush with the horizontal one that closes the band.
	   Tightened on desktop per feedback; the ≤900px override below restates
	   its own value since the two-column band no longer applies here. */
	padding-bottom: clamp(20px, 2.2vw, 28px);
}
.tech-stack__head { padding-right: clamp(16px, 1.8vw, 22px); }
.tech-stack__figure {
	margin: 0;
	padding-left: clamp(16px, 1.8vw, 22px);
}
.tech-stack__head h2 {
	color: #0f2338;
	font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.4rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 0 0 18px;
}
.tech-stack__head p { margin: 0 0 14px; max-width: 52ch; color: #55677a; font-size: 1.02rem; line-height: 1.8; }
.tech-stack__head p:last-child { margin-bottom: 0; }

/* Capability rows. Two columns, matching the width of .compass-block__grid
   cells, so the descriptions keep the same measure as every other rule grid
   on the site. The even cells carry the left border, which is what continues
   the 50% rule down from the intro band. */
.tech-stack__list { list-style: none; margin: 0; padding: 0; }
.tech-stack__list > li {
	padding: clamp(22px, 2.3vw, 28px) clamp(16px, 1.8vw, 22px);
	border-top: 1px solid rgba(15, 35, 55, .1);
	border-left: 1px solid rgba(15, 35, 55, .1);
}
/* The band above already closed with a rule; a second one here would double
   its weight. */
.tech-stack__list > li:nth-child(-n+2) { border-top: none; }
.tech-stack__list > li:nth-child(odd) { border-left: none; padding-left: 0; }
.tech-stack__list > li:nth-child(even) { padding-right: 0; }

/* Icon above the text, as on the compass cards, so the copy keeps the full
   width of its cell rather than losing an indent to the mark. */
.tech-stack__icon { display: block; margin-bottom: 11px; color: var(--color-primary); }
.tech-stack__icon svg { width: 20px; height: 20px; display: block; }
.tech-stack__list h3 {
	margin: 0 0 7px;
	color: #0f2338;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.38;
	letter-spacing: -.01em;
}
/* Tightened a step from the surrounding blocks so six cells stay compact, but
   the line-height stays generous — the density comes out of the padding and
   the margins, not out of the reading comfort of the paragraph itself. */
.tech-stack__list p { margin: 0; color: #55677a; font-size: .89rem; line-height: 1.7; }

/* Hover, matching .compass-block__card exactly: the same rule-grid pattern, so
   it gets the same restrained treatment. Nothing that paints a panel — a tint
   would have to bleed past the cell to meet the hairlines, and that bleed
   crosses into the neighbouring cell. Type and mark carry it instead. */
.tech-stack__icon { transition: transform .32s cubic-bezier(.2,.7,.3,1), color .32s ease; }
.tech-stack__list h3,
.tech-stack__list p { transition: color .32s ease; }
.tech-stack__list > li:hover .tech-stack__icon,
.tech-stack__list > li:focus-within .tech-stack__icon { transform: translateY(-2px); }
.tech-stack__list > li:hover h3,
.tech-stack__list > li:focus-within h3 { color: var(--color-primary); }
.tech-stack__list > li:hover p,
.tech-stack__list > li:focus-within p { color: #44586b; }

/* The four named technologies are labels, not sentences — chips read them
   faster than a nested bullet list would. */
.tech-stack__chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tech-stack__chips li {
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(42, 162, 222, .08);
	border: 1px solid rgba(42, 162, 222, .2);
	color: #1d7cab;
	font-size: .76rem;
	font-weight: 600;
	line-height: 1.4;
}

/* The wheel is the positioning context for the eight labels. Its box is
   pinned to the artwork's own 950x913 ratio, so every label coordinate below
   stays locked to its segment at any width — no breakpoint retuning. Label
   type is a fixed 10px, so it does not shrink with the wheel; the narrowest
   layout is the constraint to check when changing the max-width. */
.tech-stack__wheel {
	position: relative;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	aspect-ratio: 950 / 913;
}
/* contain, never cover: the graphic is a transparent PNG that must not crop. */
.tech-stack__wheel img { display: block; width: 100%; height: 100%; object-fit: contain; }

.tech-stack__layers { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.tech-stack__layers li {
	position: absolute;
	width: 20%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: .005em;
}
/* Eight positions on one ellipse, clockwise from the top segment. The two
   axes differ because the box is not square: a circular arrangement needs the
   vertical offsets scaled by the 950/913 ratio, or the diagonals drift. */
.tech-stack__layers li:nth-child(1) { left: 50%;   top: 19.8%; }
.tech-stack__layers li:nth-child(2) { left: 70%; top: 28.7%; }
.tech-stack__layers li:nth-child(3) { left: 77%;   top: 50%; }
.tech-stack__layers li:nth-child(4) { left: 70.5%; top: 71.3%; }
.tech-stack__layers li:nth-child(5) { left: 50%;   top: 80.2%; width: 19%}
.tech-stack__layers li:nth-child(6) { left: 26.5%; top: 71.3%; }
.tech-stack__layers li:nth-child(7) { left: 21%;   top: 50%; }
.tech-stack__layers li:nth-child(8) { left: 26.5%; top: 28.7%; }

.tech-stack__figure-label {
	display: block;
	margin-top: clamp(16px, 1.8vw, 22px);
	text-align: center;
	color: var(--color-primary);
	font-size: .68rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .12em;
}

/* Standards named in the copy, lifted out of the sentence so they register. */
.compliance-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; }
.compliance-row li {
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(42, 162, 222, .08);
	border: 1px solid rgba(42, 162, 222, .22);
	color: #1d7cab;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .1em;
}
/* .split-feature__body ul / ul li are both two-class selectors, so they
   outrank the single-class rules above and win by default inside a
   split-feature body — stacking the chips into a full-width column, adding
   its own gap/margin, and (since compliance-row never cancels it) leaving
   that rule's bullet ::before dot showing. Re-declared here at matching
   specificity, so the pill layout wins wherever .compliance-row is reused. */
.split-feature__body .compliance-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0 22px;
}
.split-feature__body .compliance-row li {
	padding: 7px 14px;
	font-size: .72rem;
	line-height: 1.3;
	color: #1d7cab;
}
.split-feature__body .compliance-row li::before { content: none; }

/* Seven deployment options in a two-column rule grid: the last one spans the
   full width so the final row is not left half empty. Same specificity (0,2,0)
   as the nth-child padding rules it overrides, and declared after them. */
.compass-block__grid--seven .compass-block__card--wide {
	grid-column: 1 / -1;
	padding-left: 0;
	padding-right: 0;
	border-left: none;
}

/* ---------- Technology: how it works ---------------------------------------
   The only genuinely ordered content on the page, so it is the only section
   built as a numbered sequence — a real <ol>, numbered markers, vertical
   rules between steps rather than the hairline grids used elsewhere. */
.steps-block { padding: clamp(52px, 5.5vw, 76px) 0; background: #f7fafc; }
.steps-block__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }
.steps-block__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(40px, 5vw, 72px);
	align-items: center;
	margin-bottom: clamp(40px, 4.6vw, 64px);
}
/* Flip for pages where the surrounding sections need image-left here to keep
   the page-wide left/right alternation going — .steps-block defaults to
   content-left, so this is an opt-in modifier, not a change to the default.
   The column ratio flips with it so the copy keeps the wider track regardless
   of which side it lands on. */
.steps-block--image-left .steps-block__layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.steps-block--image-left .steps-block__media { order: -1; }
.steps-block__intro { min-width: 0; }
.steps-block__intro h2 {
	color: #0f2338;
	font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.4rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 0 0 16px;
}
.steps-block__lede { color: #0f2338; font-size: 1.12rem; font-weight: 600; line-height: 1.55; margin: 0 0 14px; }
.steps-block__kicker { color: #55677a; font-size: 1.02rem; line-height: 1.8; margin: 0; }

.steps-block__media {
	position: relative;
	align-self: stretch;
	min-height: 300px;
	border-radius: 6px;
	overflow: hidden;
}
.steps-block__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.steps-block__media:hover img { transform: scale(1.04); }

/* Four real surfaces on a shared connecting rail, not four columns split by
   hairlines — a numbered flow reads as a process when the steps look like
   stations on one line, not like unrelated cells that happen to be adjacent.
   --steps-gap is a custom property (not a literal in the connector math)
   because the rail's cut segments have to shrink by exactly the same amount
   the gap does at every breakpoint, or the line and the cards drift apart. */
/* A real stepper, not a card grid: one continuous rail runs behind the four
   numbered stations, each drawn only as a filled circle with centred copy
   beneath it — no panel, no border, no shadow. The rail's ::before lives on
   the list itself: pseudo-elements on a grid container are ordinarily laid
   out as grid items, but position:absolute removes it from grid placement
   entirely, so it can use the container as a plain percentage-based canvas
   instead. That is also why the math below is exact rather than approximate:
   with grid-gap at 0 and every station's content centred in an equal-width
   column, station N's centre sits at exactly (2N-1)/8 of the row for four
   columns — 12.5%, 37.5%, 62.5%, 87.5% — so the rail can span 12.5% to 87.5%
   without measuring anything at runtime. */
.steps-block__list {
	--steps-badge: 46px;
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}
.steps-block__list::before {
	content: "";
	position: absolute;
	left: 12.5%;
	right: 12.5%;
	top: calc(var(--steps-badge) / 2);
	height: 2px;
	background: rgba(42, 162, 222, .28);
	/* Fades the rail's own ends rather than letting it terminate in a hard
	   edge mid-air past the first and last circle. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.steps-block__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 clamp(12px, 1.6vw, 20px);
	text-align: center;
}

/* The badge is the one filled, full-colour shape in the section — the
   station a viewer's eye lands on — so it carries the brand gradient used in
   .brand-band rather than another blue-on-white outline like the icons
   elsewhere on the page. z-index lifts it above the rail (which paints at the
   list's own stacking level) so the line reads as passing behind it. */
.steps-block__num {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--steps-badge);
	height: var(--steps-badge);
	margin-bottom: 20px;
	border-radius: 50%;
	background: linear-gradient(135deg, #35b0e8 0%, var(--color-primary) 55%, #1c86bd 100%);
	box-shadow: 0 6px 14px rgba(42, 162, 222, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	transition: transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease;
}
.steps-block__step h3 {
	margin: 0 0 8px;
	/* Reserved to two lines — the tallest any heading here actually reaches —
	   so every description starts at the same y regardless of whether its own
	   heading happens to wrap once or twice. Without this the four columns
	   read as ragged rather than as one composition. Desktop only: the
	   ≤900px timeline is a single column with nothing beside it to align
	   against, so the reservation is dropped there. */
	min-height: calc(1.4em * 2);
	max-width: 22ch;
	color: #0f2338;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.015em;
	transition: color .32s ease;
}
.steps-block__step p {
	margin: 0;
	max-width: 25ch;
	color: #55677a;
	font-size: .9rem;
	line-height: 1.7;
}

/* Hover / focus: restrained, matching the type-and-mark language used on
   .compass-block__card and .tech-stack__list rather than a lift-and-shadow
   treatment that implies a raised panel this design deliberately drops. */
.steps-block__step:hover .steps-block__num,
.steps-block__step:focus-within .steps-block__num {
	transform: scale(1.08);
	box-shadow: 0 6px 16px rgba(42, 162, 222, .42);
}
.steps-block__step:hover h3,
.steps-block__step:focus-within h3 { color: var(--color-primary); }

/* Entrance reveals, matching the shared blocks. */
.tech-stack.reveal-ready .tech-stack__head,
.tech-stack.reveal-ready .tech-stack__list,
.tech-stack.reveal-ready .tech-stack__figure,
.steps-block.reveal-ready .steps-block__intro,
.steps-block.reveal-ready .steps-block__media,
.steps-block.reveal-ready .steps-block__step {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.tech-stack.reveal-ready.is-visible .tech-stack__head,
.tech-stack.reveal-ready.is-visible .tech-stack__list,
.tech-stack.reveal-ready.is-visible .tech-stack__figure,
.steps-block.reveal-ready.is-visible .steps-block__intro,
.steps-block.reveal-ready.is-visible .steps-block__media,
.steps-block.reveal-ready.is-visible .steps-block__step { opacity: 1; transform: none; }
.tech-stack.reveal-ready .tech-stack__figure { transition-delay: .1s; }
.steps-block.reveal-ready .steps-block__media { transition-delay: .1s; }
.steps-block.reveal-ready .steps-block__step:nth-child(2) { transition-delay: .08s; }
.steps-block.reveal-ready .steps-block__step:nth-child(3) { transition-delay: .16s; }
.steps-block.reveal-ready .steps-block__step:nth-child(4) { transition-delay: .24s; }

/* ---------- Growth block (balanced header + two rule-separated groups) ----------
   Same minimal language as .compass-block: no cards, hairline separation only.
   The source copy's two bold group labels become the two column headings. */
.growth-block { padding: clamp(52px, 5.5vw, 76px) 0; background: #fff; --growth-bleed: 18px; }
.growth-block__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }

.growth-block__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(40px, 5vw, 72px);
	margin-bottom: clamp(48px, 5.5vw, 76px);
}
.growth-block__intro { min-width: 0; align-self: center; }
.growth-block__intro h2 {
	color: #0f2338;
	font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.4rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 0 0 14px;
}
.growth-block__lede {
	color: #0f2338;
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 16px;
}
.growth-block__intro p { color: #55677a; font-size: 1.02rem; line-height: 1.8; margin: 0; }

.growth-block__media {
	position: relative;
	align-self: stretch;
	min-height: 300px;
	border-radius: 6px;
	overflow: hidden;
}
.growth-block__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.growth-block__media:hover img { transform: scale(1.04); }

.growth-block__groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	/* Pulled outward by the bleed amount, which the text inside adds back as
	   padding. Net effect: text still lines up with the heading above, but the
	   row rules and hover bands extend past it so the hover isn't cramped. */
	margin-left: calc(var(--growth-bleed) * -1);
	margin-right: calc(var(--growth-bleed) * -1);
}
.growth-block__group { min-width: 0; }
.growth-block__group:last-child { border-left: 1px solid rgba(15, 35, 55, .1); }

/* Rows are full-column-width boxes so their rules and hover bands run edge to
   edge and meet the divider — the gutter lives on the text inside them, not on
   the group, otherwise every rule would stop short of the divider. */
.growth-block__group:first-child .growth-block__group-title,
.growth-block__group:first-child .growth-block__list li {
	padding-left: var(--growth-bleed);
	padding-right: clamp(30px, 3.6vw, 56px);
}
.growth-block__group:last-child .growth-block__group-title,
.growth-block__group:last-child .growth-block__list li {
	padding-left: clamp(30px, 3.6vw, 56px);
	padding-right: var(--growth-bleed);
}
/* Column header, not a tag. Two problems: it was smaller and lighter than the
   item titles it heads (hierarchy inversion), and its rule was the same
   hairline as the body rows, so the header band was indistinguishable from a
   content row. The rule is now a soft brand underline -- echoing the
   tab-underline idiom used elsewhere on the page -- and stays full-width so
   the label keeps its left alignment with the item titles below. */
.growth-block__group-title {
	color: var(--color-primary);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .13em;
	margin: 0;
	padding-bottom: 18px;
	border-bottom: 2px solid rgba(42, 162, 222, .4);
}
.growth-block__list { list-style: none; margin: 0; padding: 0; }
/* Icon in the gutter, title and copy stacked beside it. Horizontal padding is
   on the li (not its children) so the rule and hover band span the whole
   column and meet the divider, while allowing an icon column inside. */
.growth-block__list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 13px;
	align-items: start;
	padding-top: clamp(17px, 1.9vw, 22px);
	padding-bottom: clamp(17px, 1.9vw, 22px);
	border-bottom: 1px solid rgba(15, 35, 55, .1);
	transition: background-color .25s ease;
}
.growth-block__list li:last-child { border-bottom: none; }
.growth-block__icon {
	grid-column: 1;
	grid-row: 1;
	display: block;
	margin-top: 1px;
	color: var(--color-primary);
}
.growth-block__icon svg { width: 20px; height: 20px; display: block; }
.growth-block__list h4 {
	grid-column: 2;
	grid-row: 1;
	color: #0f2338;
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.005em;
	text-transform: none;
	margin: 0 0 5px;
	transition: color .25s ease;
}
.growth-block__list p {
	grid-column: 2;
	grid-row: 2;
	color: #55677a;
	font-size: .92rem;
	line-height: 1.7;
	margin: 0;
}

/* Minimal hover: a faint row wash plus the title picking up the accent. */
.growth-block__list li:hover { background-color: rgba(42, 162, 222, .045); }
.growth-block__list li:hover h4 { color: var(--color-primary); }

/* Row alignment via subgrid: the two groups inherit the outer grid's row
   tracks, so every item row shares a height across both columns and the
   hairlines line up straight across the divider — reading as one table
   rather than two independent lists. Without subgrid it degrades to the
   previous behaviour (correct, just unaligned rules). */
@supports (grid-template-rows: subgrid) {
	/* 1 title row + up to 4 list items — Applications' groups use 3 items
	   (leaving the 5th track empty, which collapses to 0 height); Agentic
	   AI's use 4. */
	.growth-block__groups { grid-template-rows: repeat(5, auto); }
	.growth-block__group {
		display: grid;
		grid-row: 1 / -1;
		grid-template-rows: subgrid;
	}
	.growth-block__list {
		display: grid;
		grid-row: 2 / -1;
		grid-template-rows: subgrid;
	}
}

.growth-block.reveal-ready .growth-block__intro,
.growth-block.reveal-ready .growth-block__media,
.growth-block.reveal-ready .growth-block__group {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.growth-block.reveal-ready.is-visible .growth-block__intro,
.growth-block.reveal-ready.is-visible .growth-block__media,
.growth-block.reveal-ready.is-visible .growth-block__group { opacity: 1; transform: none; }
.growth-block.reveal-ready .growth-block__media { transition-delay: .1s; }
.growth-block.reveal-ready .growth-block__group:last-child { transition-delay: .12s; }

/* ---------- Feature block (shared) ----------------------------------------
   The audience sections ("For Governments", "For Employers", "For Health
   Systems", "For Insurers") all share one shape: heading + lede + intro
   paragraph + a flat list of short points + a photo. One component with two
   modifiers, rather than a bespoke block per section:
       .feature-block--tint        tinted background  (page bg alternation)
       .feature-block--image-left  photo in left column (layout alternation)
   Points are direct grid children, so the grid gives every row an equal
   height on its own and the hairlines line up across the divider — no
   subgrid needed here. */
.feature-block {
	padding: clamp(52px, 5.5vw, 76px) 0;
	background: #fff;
}
.feature-block--tint { background: #f7fafc; }
.feature-block__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }

.feature-block__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(40px, 5vw, 72px);
	/*margin-bottom: clamp(36px, 4.2vw, 56px);*/
}
/* Mirrored ratio keeps the copy in the wider track; `order` moves the photo
   without reordering the markup, so the heading still comes first in the DOM. */
.feature-block--image-left .feature-block__layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.feature-block--image-left .feature-block__media { order: -1; }

.feature-block__intro { min-width: 0; align-self: center; }
.feature-block__intro h2 {
	color: #0f2338;
	font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.4rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 0 0 14px;
}
.feature-block__lede {
	color: #0f2338;
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 16px;
}
.feature-block__intro p { color: #55677a; font-size: 1.02rem; line-height: 1.8; margin: 0; }

.feature-block__media {
	position: relative;
	align-self: stretch;
	min-height: 300px;
	border-radius: 6px;
	overflow: hidden;
}
.feature-block__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.feature-block__media:hover img { transform: scale(1.04); }

/* Short points live inline in the text column — a plain marked list, no grid,
   no icons, no break-out row. This is the default for the audience sections;
   only substantial content earns its own row below the header. */
.feature-block__list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.feature-block__list li {
	position: relative;
	padding-left: 22px;
	color: #55677a;
	font-size: .95rem;
	line-height: 1.7;
}
.feature-block__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-primary);
}
.feature-block__list li strong { color: #0f2338; font-weight: 600; }

.feature-block.reveal-ready .feature-block__intro,
.feature-block.reveal-ready .feature-block__media {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.feature-block.reveal-ready.is-visible .feature-block__intro,
.feature-block.reveal-ready.is-visible .feature-block__media { opacity: 1; transform: none; }
.feature-block.reveal-ready .feature-block__media { transition-delay: .1s; }

/* ---------- Split feature (alternating image / text rows) ---------- */
.split-feature { padding: clamp(52px, 5.5vw, 76px) 0; background: #fff; }
.split-feature--tint { background: #f7fafc; }
/* Alternating orientation. The media div comes first in source order for
   every split-feature (so it leads on mobile, where the row stacks); this
   flips it to the right on wide screens only. */
.split-feature--reverse .split-feature__media { order: 2; }
.split-feature--reverse .split-feature__body { order: 1; }
@media (max-width: 860px) {
	.split-feature--reverse .split-feature__media,
	.split-feature--reverse .split-feature__body { order: initial; }
}
.split-feature__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(40px, 5vw, 72px);
}
/* Stretches to the copy height so both sides stay balanced however long the
   text runs -- same approach as .feature-block__media. */
.split-feature__media {
	position: relative;
	align-self: stretch;
	min-height: 300px;
	border-radius: 6px;
	overflow: hidden;
}
.split-feature__body { align-self: center; }
.split-feature__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.split-feature__media:hover img { transform: scale(1.045); }

/* A diagram (the transparent data-stack PNG) must be shown whole, so it
   opts out of the photographic cover-crop and the hover zoom. */
.split-feature__media--diagram {
	background: #fff;
	border: 1px solid rgba(18,42,64,.08);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(18px, 2.4vw, 34px);
	height: auto;
	aspect-ratio: auto;
}
.split-feature__media--diagram img {
	width: 100%;
	height: auto;
	object-fit: contain;
}
.split-feature__media--diagram:hover img { transform: none; }

/* GlobalIQ AI's rows pair one image with two content groups, so a second
   H2 inside the same body needs real separation from whatever preceded
   it. The general-sibling selector only matches once a prior H2 exists,
   so the block's own first heading is untouched. */
.split-feature__body h2 ~ h2 { margin-top: clamp(30px, 3.4vw, 42px); }

/* Sub-group label inside a body (e.g. Applications' "Strengthen Brand
   Loyalty:" above its own list) — a step below the section H2. */
.split-feature__body h3 {
	color: #0f2338;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -.005em;
	margin: clamp(22px, 2.4vw, 28px) 0 12px;
}
.split-feature__body h3:first-child { margin-top: 0; }

/* Kicker above the heading — matches .intro-block__lede. */
.split-feature__lede {
	color: var(--color-primary);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .145em;
	text-transform: uppercase;
	line-height: 1.5;
	margin: 0 0 12px;
}

.split-feature__cta { margin-top: clamp(22px, 2.6vw, 30px); }

.split-feature__body h2 {
	color: #0f2338;
	font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.2rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	margin: 0 0 14px;
}
.split-feature__body p {
	font-size: 1rem;
	line-height: 1.75;
	color: #4a5a68;
	margin: 0 0 18px;
}
/* The lede line right after the H2 (e.g. "Build Your Brand, Grow Your
   Business") reads as a subheading, even though it's markup-identical
   to the later group labels below — so it's picked out by position. */
.split-feature__body p:has(> strong:only-child) {
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--color-primary);
	margin: 26px 0 14px;
}
.split-feature__body h2 + p:has(> strong:only-child) {
	font-size: 1.15rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: #0f2338;
	margin: 0 0 16px;
}
.split-feature__body ul {
	margin: 4px 0 22px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.split-feature__body ul:last-child { margin-bottom: 0; }
.split-feature__body ul li {
	position: relative;
	padding-left: 24px;
	font-size: .96rem;
	line-height: 1.7;
	color: #4a5a68;
}
.split-feature__body ul li::before {
	content: "";
	position: absolute; left: 0; top: .55em;
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--color-primary);
}
.split-feature__body ul li strong { color: #0f2338; font-weight: 600; }

.proactive-block.reveal-ready .proactive-block__intro,
.proactive-block.reveal-ready .proactive-block__media,
.split-feature.reveal-ready .split-feature__media,
.split-feature.reveal-ready .split-feature__body {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.proactive-block.reveal-ready.is-visible .proactive-block__intro,
.proactive-block.reveal-ready.is-visible .proactive-block__media,
.split-feature.reveal-ready.is-visible .split-feature__media,
.split-feature.reveal-ready.is-visible .split-feature__body { opacity: 1; transform: none; }
.proactive-block.reveal-ready .proactive-block__media { transition-delay: .1s; }
.split-feature.reveal-ready .split-feature__body { transition-delay: .1s; }

/* Face Scan's screenshots are tall app-poster crops (300x649 natively), not
   the wide photography this component was built around -- object-fit:cover
   would crop off the on-image heading text or the bottom of the phone
   mockup. This modifier swaps to the image's real aspect ratio and
   object-fit:contain instead. Two classes, so it also wins over the general
   mobile stacking rule's cover/16:10 override below without needing to be
   re-declared inside that media query. */
.split-feature--portrait-media .split-feature__media {
	align-self: center;
	min-height: 0;
	width: 100%;
	max-width: 340px;
	margin: 0 auto;
	aspect-ratio: 300 / 649;
	background: #eef5fa;
}
.split-feature--portrait-media .split-feature__media img { object-fit: contain; }

/* ---------- Disclaimer -----------------------------------------------------
   Shared by every globalhealth-ai sub-page. One large rounded panel in a soft
   brand-tinted wash, distinct from the white and #f7fafc sections around it.
   Narrow left column (logo stacked over the bold label) divided off by a
   hairline rule; the eyebrow and body copy fill the wider right column. */
.disclaimer-section { padding: clamp(38px, 4.2vw, 58px) 0; background: #fff; }
.disclaimer-section__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }

.disclaimer-section__box {
	display: grid;
	/* Fixed-ish left column so the divider lands consistently at ~1/3 rather
	   than tracking the logo/label intrinsic width. */
	grid-template-columns: minmax(0, clamp(220px, 26vw, 320px)) minmax(0, 1fr);
	gap: clamp(24px, 3.4vw, 48px);
	padding: clamp(28px, 3.2vw, 44px) clamp(28px, 4vw, 52px);
	border-radius: clamp(16px, 1.8vw, 22px);
	background: #f1f7fb;
	border: 1px solid rgba(42, 162, 222, .2);
}

/* Left column: logo above the label, the pair optically centred against the
   taller body column. The hairline is this column's right edge and spans the
   full panel height, since grid items stretch by default. */
.disclaimer-section__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 18px;
	padding-right: clamp(24px, 3.4vw, 48px);
	border-right: 1px solid rgba(42, 162, 222, .28);
}
.disclaimer-section__logo {
	display: block;
	width: clamp(150px, 14vw, 190px);
	height: auto;
}
.disclaimer-section__label {
	margin: 0;
	color: #0f2338;
	font-size: clamp(1rem, .94rem + .3vw, 1.15rem);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -.01em;
}

.disclaimer-section__body { min-width: 0; }
.disclaimer-section__title {
	margin: 0 0 14px;
	color: var(--color-primary);
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .12em;
}
.disclaimer-section__body p {
	margin: 0 0 16px;
	max-width: 66ch;
	color: #4e6070;
	font-size: .94rem;
	line-height: 1.8;
}
.disclaimer-section__body p:last-child { margin-bottom: 0; }

/* Stacked below the two-column threshold: the divider becomes horizontal.
   Placed after the base rules so it wins the cascade at equal specificity. */
@media (max-width: 760px) {
	.disclaimer-section__box { grid-template-columns: 1fr; gap: 20px; }
	.disclaimer-section__aside {
		gap: 14px;
		padding-right: 0;
		padding-bottom: 20px;
		border-right: none;
		border-bottom: 1px solid rgba(42, 162, 222, .28);
	}
	.disclaimer-section__logo { width: 158px; }
}

/* ---------- Intro block (single-column text, no media) --------------------
   For a section that is pure editorial copy -- a page-opening statement with
   no supporting image and no sub-list -- so it doesn't inherit the two-column
   grid every other block above assumes. Centered and narrower than the page
   container, matching how a lede paragraph reads on its own. */
.intro-block { padding: clamp(48px, 5vw, 72px) 0; background: #fff; }
.intro-block__inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
}
.intro-block__inner h2 {
	color: #0f2338;
	font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.4rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 0 0 16px;
}
.intro-block__lede {
	color: var(--color-primary);
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 18px;
}
.intro-block__inner p { color: #4a5a68; font-size: 1.04rem; line-height: 1.8; margin: 0 0 16px; }
.intro-block__inner p:last-child { margin-bottom: 0; }
/* Alternating background so consecutive intro-blocks stay distinguishable. */
.intro-block--tint { background: #f7fafc; }
.intro-block__cta { margin-top: clamp(22px, 2.6vw, 30px); }
/* A second heading inside the same block (About's "What We Do" running
   into "Our Mission") needs real separation from the paragraph above it —
   the general-sibling selector only matches once a prior h2 exists, so the
   block's own first heading is unaffected. */
.intro-block__inner h2 ~ h2 { margin-top: clamp(28px, 4vw, 40px); }

.intro-block.reveal-ready .intro-block__inner {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.intro-block.reveal-ready.is-visible .intro-block__inner { opacity: 1; transform: none; }

/* ---------- Contact form ----------------------------------------------
   A single centred column — the source page runs the form at roughly 75%
   of the container with no image, so it gets the same no-media treatment
   as .intro-block rather than forcing a two-column layout onto one field
   list. Name/email share a row on wider screens purely for rhythm; every
   other field runs full width. */
.contact-form { padding: clamp(48px, 5vw, 72px) 0 clamp(64px, 7vw, 96px); background: #fff; }
.contact-form__inner { max-width: 680px; margin: 0 auto; padding: 0 20px; }
.contact-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 20px;
}
.contact-form label {
	display: block;
	margin-bottom: 22px;
	color: #0f2338;
	font-size: .92rem;
	font-weight: 600;
}
.contact-form input,
.contact-form textarea {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 12px 16px;
	border: 1px solid rgba(15, 35, 55, .16);
	border-radius: 10px;
	background: #fff;
	color: #0f2338;
	font: inherit;
	font-size: .96rem;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(42, 162, 222, .16);
}
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form__form > .btn--primary { margin-top: 6px; }

.contact-form.reveal-ready .contact-form__inner {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.contact-form.reveal-ready.is-visible .contact-form__inner { opacity: 1; transform: none; }

/* ---------- Legal article --------------------------------------------
   Six long-form documents (Privacy Policy, Terms of Use, and similar) share
   this one component. The source pages render every section label as a bold
   or all-caps paragraph with no real heading tags at all -- promoted here to
   genuine <h2>/<h3> elements (h2 for the document's major sections, h3 for
   the named sub-points inside a section) since that's a real accessibility
   and SEO defect worth fixing, not a stylistic choice. Left-aligned at an
   article measure, not the centred .intro-block treatment -- centring dense,
   multi-paragraph legal text would make it materially harder to read. */
.legal-article { padding: clamp(40px, 4.5vw, 64px) 0 clamp(64px, 7vw, 96px); background: #fff; }
.legal-article__inner { max-width: 760px; margin: 0 auto; padding: 0 20px; }

.legal-article__meta {
	color: #55677a;
	font-size: .82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin: 0 0 36px;
}

/* Section headings read as quiet dividers, not display type -- with roughly
   twenty of them in a single Privacy Policy, a large decorative heading
   repeated that often would overwhelm the page rather than organise it. */
.legal-article__inner h2 {
	margin: 40px 0 14px;
	padding-top: 26px;
	border-top: 1px solid rgba(15, 35, 55, .1);
	color: #0f2338;
	font-size: .92rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	line-height: 1.4;
}
.legal-article__inner h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal-article__inner h3 {
	margin: 26px 0 10px;
	color: #0f2338;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.4;
}
.legal-article__inner p { color: #4a5a68; font-size: .98rem; line-height: 1.85; margin: 0 0 18px; }
.legal-article__inner p:last-child { margin-bottom: 0; }
.legal-article__inner ul,
.legal-article__inner ol {
	margin: 0 0 18px;
	padding-left: 22px;
	color: #4a5a68;
	font-size: .98rem;
	line-height: 1.8;
	list-style: outside;
}
.legal-article__inner li { margin-bottom: 8px; }
.legal-article__inner li:last-child { margin-bottom: 0; }
.legal-article__inner strong { color: #0f2338; font-weight: 600; }
.legal-article__inner a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.legal-article__inner a:hover { color: var(--color-primary-shadow); }

/* No scroll-reveal here: these documents run many multiples of a viewport
   tall, and the shared reveal-on-scroll observer's 18% visibility threshold
   (tuned for compact blocks) can never be satisfied by an element that size --
   the content would stay stuck at opacity:0 forever. Render it plainly. */


@media (max-width: 700px) {
	.contact-form__row { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.split-feature__inner { grid-template-columns: 1fr; }
	/* Stacked, the desktop left/right alternation is meaningless — so every
	   section leads with its image for a consistent rhythm, regardless of
	   which column the media sits in on wide screens.
	   `align-self: auto` is essential: the base rules stretch the media to the
	   copy height, and a stretched height combined with aspect-ratio makes the
	   browser derive the WIDTH from that height — which blows the media out
	   past the container. Stacked, the ratio must drive the box on its own. */
	.split-feature__media,
	.proactive-block__media,
	.compass-block__media,
	.feature-block__media,
	.growth-block__media,
	.steps-block__media {
		aspect-ratio: 16 / 10;
		min-height: 0;
		align-self: auto;
		order: -1;
	}
	/* Same trap as the layout override below: .compass-block--image-right's
	   two-class selector outranks the single-class rule above, so on its own
	   it would keep the desktop side's order:0 at mobile widths and stack
	   content before image — breaking the "image always leads when stacked"
	   convention. Re-declared here at matching specificity, later in source,
	   to win it back. */
	.compass-block--image-right .compass-block__media { order: -1; }
	/* The --image-left modifier is two classes, so it outranks a single-class
	   override here; it has to be named explicitly or the layout never stacks. */
	.proactive-block__layout,
	.compass-block__layout,
	.growth-block__layout,
	.feature-block__layout,
	.feature-block--image-left .feature-block__layout,
	.compass-block--image-right .compass-block__layout { grid-template-columns: 1fr; }
	/* Technology page: the intro band stacks image-first like the other blocks.
	   The capability rows keep their two columns, so the only thing that goes
	   is the vertical rule between copy and diagram — there is no 50% line to
	   continue once the band is a single column. */
	.tech-stack__layout { grid-template-columns: 1fr; }
	.tech-stack__figure {
		order: -1;
		padding-left: 0;
		padding-bottom: clamp(26px, 3vw, 34px);
		border-left: none;
	}
	.tech-stack__head { padding-right: 0; padding-bottom: clamp(26px, 3vw, 34px); }
	.steps-block__layout,
	.steps-block--image-left .steps-block__layout { grid-template-columns: 1fr; }
	/* The desktop rail's 12.5%/37.5%/62.5%/87.5% centres are exact only for
	   four equal columns with zero gap; a 2x2 wrap would need a second rail
	   per row, at which point a horizontal stepper stops being the more
	   readable shape. Vertical timeline instead, all the way to mobile: the
	   rail runs down the badge column, each step joining to the next via a
	   segment that crosses the row-gap — same technique as the desktop rail,
	   rotated, and hidden on the last step so it doesn't run past the end. */
	.steps-block__list {
		--steps-badge: 42px;
		grid-template-columns: 1fr;
		row-gap: clamp(28px, 3.4vw, 40px);
	}
	.steps-block__list::before { display: none; }
	.steps-block__step {
		position: relative;
		flex-direction: row;
		align-items: flex-start;
		gap: clamp(16px, 2vw, 22px);
		padding: 0;
		text-align: left;
	}
	.steps-block__num { flex: 0 0 auto; margin-bottom: 0; }
	/* The two-line reservation on h3 exists to line up descriptions across a
	   row of columns; a single-column timeline has no row to line up against,
	   so it is dropped here rather than leaving dead space under short titles. */
	.steps-block__step h3 { min-height: 0; }
	.steps-block__step h3,
	.steps-block__step p { max-width: none; }
	.steps-block__step::before {
		content: "";
		position: absolute;
		left: calc(var(--steps-badge) / 2 - 1px);
		top: var(--steps-badge);
		bottom: calc(-1 * clamp(28px, 3.4vw, 40px));
		width: 2px;
		background: rgba(42, 162, 222, .28);
	}
	.steps-block__step:last-child::before { display: none; }
}
@media (max-width: 700px) {
	.compass-block__grid { grid-template-columns: 1fr; }
	/* Technology page: one capability per row — horizontal rules only, no
	   column divider or side gutters. */
	.tech-stack__list { grid-template-columns: 1fr; }
	.tech-stack__list > li,
	.tech-stack__list > li:nth-child(odd),
	.tech-stack__list > li:nth-child(even) {
		padding: clamp(22px, 3vw, 28px) 0;
		border-left: none;
		border-top: 1px solid rgba(15, 35, 55, .1);
	}
	/* The intro band above still closes with its own rule, so the first cell
	   must not draw a second one on top of it. */
	.tech-stack__list > li:first-child { border-top: none; }
	/* Technology page: the vertical timeline from the ≤900px query keeps
	   running here; only the badge and rule spacing tighten a step further. */
	.steps-block__list { --steps-badge: 36px; row-gap: clamp(22px, 4vw, 30px); }
	.steps-block__step::before { bottom: calc(-1 * clamp(22px, 4vw, 30px)); }
	/* Groups stack: drop the column divider, and give the second group a top
	   rule so it stays separated from the first group's last item. Also unwind
	   the subgrid row-sharing — in one column both groups would otherwise be
	   assigned the same rows and overlap. */
	.growth-block__groups { grid-template-columns: 1fr; grid-template-rows: none; }
	.growth-block__group,
	.growth-block__list {
		display: block;
		grid-row: auto;
		grid-template-rows: none;
	}
	.growth-block__group:first-child { padding-bottom: clamp(28px, 4vw, 38px); }
	.growth-block__group:last-child {
		border-left: none;
		border-top: 1px solid rgba(15, 35, 55, .1);
		padding-top: clamp(28px, 4vw, 38px);
	}
	/* No divider when stacked, so the inner gutter collapses to the bleed. */
	.growth-block__group:first-child .growth-block__group-title,
	.growth-block__group:first-child .growth-block__list li,
	.growth-block__group:last-child .growth-block__group-title,
	.growth-block__group:last-child .growth-block__list li {
		padding-left: var(--growth-bleed);
		padding-right: var(--growth-bleed);
	}
	/* Single column: horizontal rules only, no column divider or side gutters. */
	.compass-block__card:nth-child(odd),
	.compass-block__card:nth-child(even) {
		padding-left: 0;
		padding-right: 0;
		border-left: none;
	}
	/* Stacked, item 2 is no longer in the top row, so it needs its rule back —
	   only item 1 stays open. */
	.compass-block__card:nth-child(2) {
		border-top: 1px solid rgba(15, 35, 55, .1);
		padding-top: clamp(26px, 2.8vw, 36px);
	}
}
@media (max-width: 600px) {
	.proactive-block__badge { flex-direction: column; align-items: flex-start; gap: 10px; }
	.proactive-tabs__tab { padding: 6px 11px; font-size: .79rem; }
	.proactive-tabs__panel-title { font-size: 1.02rem; }
	.compass-block__media { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
	.proactive-block.reveal-ready .proactive-block__intro,
	.proactive-block.reveal-ready .proactive-block__media,
	.compass-block.reveal-ready .compass-block__intro,
	.compass-block.reveal-ready .compass-block__media,
	.compass-block.reveal-ready .compass-block__card,
	.feature-block.reveal-ready .feature-block__intro,
	.feature-block.reveal-ready .feature-block__media,
	.growth-block.reveal-ready .growth-block__intro,
	.growth-block.reveal-ready .growth-block__media,
	.growth-block.reveal-ready .growth-block__group,
	.tech-stack.reveal-ready .tech-stack__head,
	.tech-stack.reveal-ready .tech-stack__list,
	.tech-stack.reveal-ready .tech-stack__figure,
	.steps-block.reveal-ready .steps-block__intro,
	.steps-block.reveal-ready .steps-block__media,
	.steps-block.reveal-ready .steps-block__step,
	.split-feature.reveal-ready .split-feature__media,
	.split-feature.reveal-ready .split-feature__body,
	.intro-block.reveal-ready .intro-block__inner,
	.contact-form.reveal-ready .contact-form__inner {
		opacity: 1; transform: none; transition: none;
	}
	.split-feature__media img,
	.compass-block__media img,
	.feature-block__media img,
	.growth-block__media img { transition: none; }
	.proactive-tabs__panel.is-active { animation: none; }
	/* The colour shift still reads as a hover; only the motion goes. */
	.compass-block__card:hover .compass-block__icon,
	.compass-block__card:focus-within .compass-block__icon,
	.tech-stack__list > li:hover .tech-stack__icon,
	.tech-stack__list > li:focus-within .tech-stack__icon,
	.steps-block__step:hover .steps-block__num,
	.steps-block__step:focus-within .steps-block__num { transform: none; }
	.error-404.reveal-ready .error-404__inner { opacity: 1; transform: none; transition: none; }
	.ask-ai-typing span { animation: none; opacity: 1; }
}

/* ---------- 404 page -----------------------------------------------
   Same centred, no-media treatment as .intro-block (white background,
   760px measure) so a page nobody plans to land on still reads as part
   of the same site rather than a generic server error screen. */
.error-404 {
	padding: clamp(64px, 10vw, 120px) 0;
	background: #fff;
	min-height: min(560px, 60vh);
	display: flex;
	align-items: center;
}
.error-404__inner {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
}
.error-404__code {
	margin: 0 0 8px;
	color: var(--color-primary);
	font-size: clamp(4.5rem, 3rem + 6vw, 8rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
}
.error-404__title {
	color: #0f2338;
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem);
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 16px;
}
.error-404__desc {
	color: #4a5a68;
	font-size: 1.04rem;
	line-height: 1.8;
	margin: 0 0 32px;
}
.error-404__actions { margin-bottom: 40px; }
.error-404__links-label {
	color: #55677a;
	font-size: .82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin: 0 0 14px;
}
.error-404__links ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.error-404__links a {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	color: #0f2338;
	font-size: .92rem;
	font-weight: 600;
	transition: border-color .2s, color .2s, background-color .2s;
}
.error-404__links a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	background: rgba(42,162,222,.06);
}

.error-404.reveal-ready .error-404__inner {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.error-404.reveal-ready.is-visible .error-404__inner { opacity: 1; transform: none; }

@media (max-width: 480px) {
	.error-404__links ul { gap: 8px; }
	.error-404__links a { padding: 7px 14px; font-size: .88rem; }
}

/* =============================================================
   Face Scan page -- bespoke sections
   Scoped under .fs- so nothing here can leak onto any other page.
   Built specifically so the page doesn't read as the same image+text
   split repeated four times: a centred mission statement, a single large
   product shot, a numbered process rail, a dark stat band, a card grid,
   a two-up gallery, and a trust band each use a layout shaped for what
   they actually contain.
   ============================================================= */

/* Shared centred header (kicker + title [+ optional lede]) used to open
   most of the sections below, so that repeated piece stays in one place
   instead of six near-duplicate rulesets. */
.fs-heading { max-width: 640px; margin: 0 auto clamp(36px, 4.5vw, 56px); text-align: center; }
.fs-heading__kicker {
	color: var(--color-primary);
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	margin: 0 0 14px;
}
.fs-heading__title {
	color: #0f2338;
	font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.3rem);
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -.01em;
	margin: 0 0 14px;
}
.fs-heading__title:last-child { margin-bottom: 0; }
.fs-heading__text { color: #4a5a68; font-size: 1rem; line-height: 1.8; margin: 0; }
/* Dark-background variant for sections that sit on the brand gradient. */
.fs-heading--light .fs-heading__kicker { color: #8fd0f2; }
.fs-heading--light .fs-heading__title { color: #fff; }
.fs-heading--light .fs-heading__text { color: rgba(255,255,255,.78); }

/* ---------- Showcase: one large product shot, no side column -------------- */
.fs-showcase { padding: clamp(64px, 7vw, 96px) 0; background: #fff; }
.fs-showcase__inner { max-width: 680px; margin: 0 auto; padding: 0 20px; text-align: center; }
.fs-showcase__frame {
	max-width: 300px;
	margin: 0 auto;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 34px 70px -24px rgba(15, 35, 55, .35);
}
.fs-showcase__frame img { display: block; width: 100%; height: auto; }

/* ---------- Process rail: steps only, no intro/media column above it ------ */
.fs-process { padding: clamp(56px, 6vw, 88px) 0; background: #f7fafc; }
.fs-process__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }

/* ---------- Highlight: dark stat band, image centred, stats in a row ------ */
.fs-highlight {
	position: relative;
	overflow: hidden;
	padding: clamp(64px, 7vw, 100px) 0;
	background: linear-gradient(160deg, #081420 0%, #0d2436 55%, #081420 100%);
}
.fs-highlight::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: clamp(360px, 55vw, 640px); height: clamp(360px, 55vw, 640px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(42,162,222,.16) 0%, rgba(42,162,222,0) 70%);
	pointer-events: none;
}
.fs-highlight__inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 0 20px; text-align: center; }
.fs-highlight__frame {
	max-width: 260px;
	margin: 0 auto clamp(40px, 4.5vw, 56px);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 34px 70px -20px rgba(0, 0, 0, .5);
}
.fs-highlight__frame img { display: block; width: 100%; height: auto; }
.fs-highlight__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(22px, 4vw, 44px);
}
.fs-highlight__stats li { display: flex; flex-direction: column; align-items: center; min-width: 108px; }
.fs-highlight__stat-value { color: #fff; font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); font-weight: 700; line-height: 1; margin-bottom: 8px; }
.fs-highlight__stat-label { color: rgba(255,255,255,.7); font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; text-align: center; }

/* ---------- Feature grid: real cards, not a rule-grid ---------------------- */
.fs-features { padding: clamp(56px, 6vw, 88px) 0; background: #fff; }
.fs-features__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }
/* Flexbox, not grid: five cards in three columns leave a two-card last row,
   and a grid track has no concept of "centre the leftovers" -- the pair
   would sit flush left under columns 1-2 with an empty gap where column 3
   would be. Flex-wrap naturally centres whatever's left in the final row
   once every item shares the same flex-basis as a grid column would give
   it, so the pair reads as a deliberate centred row instead of a ragged one. */
.fs-features__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px;
}
.fs-features__card {
	flex: 1 1 calc((100% - 22px * 2) / 3);
	max-width: calc((100% - 22px * 2) / 3);
	padding: clamp(24px, 2.6vw, 30px);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	background: #fff;
	transition: box-shadow .28s ease, transform .28s ease, border-color .28s ease;
}
.fs-features__card:hover,
.fs-features__card:focus-within {
	border-color: rgba(42, 162, 222, .35);
	box-shadow: 0 20px 44px -18px rgba(15, 35, 55, .22);
	transform: translateY(-4px);
}
.fs-features__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	border-radius: 11px;
	background: rgba(42, 162, 222, .1);
	color: var(--color-primary);
	margin-bottom: 18px;
}
.fs-features__icon svg { width: 22px; height: 22px; display: block; }
.fs-features__card h3 { color: #0f2338; font-size: 1.04rem; font-weight: 600; line-height: 1.38; margin: 0 0 8px; }
.fs-features__card p { color: #55677a; font-size: .92rem; line-height: 1.72; margin: 0; }

/* ---------- Gallery: two matched image+caption cards, side by side -------- */
.fs-gallery { padding: clamp(56px, 6vw, 88px) 0; background: #f7fafc; }
.fs-gallery__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }
.fs-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 44px);
}
.fs-gallery__item { text-align: center; }
.fs-gallery__frame {
	max-width: 250px;
	margin: 0 auto 22px;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 24px 54px -20px rgba(15, 35, 55, .28);
}
.fs-gallery__frame img { display: block; width: 100%; height: auto; }
.fs-gallery__item h3 { color: #0f2338; font-size: 1.08rem; font-weight: 600; margin: 0 0 8px; }
.fs-gallery__item p { color: #55677a; font-size: .92rem; line-height: 1.72; margin: 0 auto; max-width: 32ch; }

/* ---------- Trust band: centred reassurance, icon-led -------------------- */
.fs-trust { padding: clamp(52px, 5.6vw, 80px) 0; background: #eef7fc; text-align: center; }
.fs-trust__inner { max-width: 620px; margin: 0 auto; padding: 0 20px; }
.fs-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: #fff;
	color: var(--color-primary);
	margin-bottom: 22px;
	box-shadow: 0 12px 26px -10px rgba(42, 162, 222, .4);
}
.fs-trust__icon svg { width: 26px; height: 26px; display: block; }
.fs-trust__inner h2 { color: #0f2338; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem); font-weight: 600; line-height: 1.28; margin: 0 0 18px; }
.fs-trust__inner p { color: #4a5a68; font-size: 1rem; line-height: 1.8; margin: 0 0 14px; }
.fs-trust__inner p:last-child { margin-bottom: 0; }

/* ---------- Reveal-on-scroll --------------------------------------------- */
.fs-showcase.reveal-ready .fs-showcase__inner,
.fs-highlight.reveal-ready .fs-highlight__inner,
.fs-trust.reveal-ready .fs-trust__inner {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.fs-showcase.reveal-ready.is-visible .fs-showcase__inner,
.fs-highlight.reveal-ready.is-visible .fs-highlight__inner,
.fs-trust.reveal-ready.is-visible .fs-trust__inner { opacity: 1; transform: none; }

.fs-process.reveal-ready .fs-heading,
.fs-features.reveal-ready .fs-heading,
.fs-gallery.reveal-ready .fs-heading {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.fs-process.reveal-ready.is-visible .fs-heading,
.fs-features.reveal-ready.is-visible .fs-heading,
.fs-gallery.reveal-ready.is-visible .fs-heading { opacity: 1; transform: none; }

.fs-features.reveal-ready .fs-features__card,
.fs-gallery.reveal-ready .fs-gallery__item {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.fs-features.reveal-ready.is-visible .fs-features__card,
.fs-gallery.reveal-ready.is-visible .fs-gallery__item { opacity: 1; transform: none; }
.fs-features.reveal-ready.is-visible .fs-features__card:nth-child(2) { transition-delay: .06s; }
.fs-features.reveal-ready.is-visible .fs-features__card:nth-child(3) { transition-delay: .12s; }
.fs-features.reveal-ready.is-visible .fs-features__card:nth-child(4) { transition-delay: .18s; }
.fs-features.reveal-ready.is-visible .fs-features__card:nth-child(5) { transition-delay: .24s; }
.fs-gallery.reveal-ready.is-visible .fs-gallery__item:nth-child(2) { transition-delay: .1s; }
/* .steps-block__step already has its own reveal-on-scroll rules further up
   the file (shared with every other page that uses this component) --
   nothing extra to add here for the process rail. */

/* The shared .steps-block__list is hard-coded for exactly four stations
   (both the 4-column grid and the connecting rail's 12.5%/87.5% end points
   are computed for that count) -- Face Scan's process only needs three, so
   both get re-derived here for thirds instead of quarters. Scoped to
   min-width so it never fights the shared component's own ≤900px rule that
   collapses this to a single column; outside that window the two never
   overlap, so there's no specificity race to win. */
@media (min-width: 901px) {
	.fs-process .steps-block__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fs-process .steps-block__list::before { left: 16.6667%; right: 16.6667%; }
}

@media (max-width: 900px) {
	.fs-features__card { flex-basis: calc((100% - 22px) / 2); max-width: calc((100% - 22px) / 2); }

	/* The shared stepper lays out num/title/description as three items in one
	   flex row here, so title and paragraph end up side by side instead of
	   stacked -- fine for the short single-line titles it was built for, but
	   Face Scan's titles wrap to 2-3 words and read badly next to prose in
	   the same line. Grid instead: the number spans both text rows on the
	   left, title and paragraph stack in the column to its right. */
	.fs-process .steps-block__step {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: clamp(16px, 2vw, 22px);
		row-gap: 4px;
	}
	.fs-process .steps-block__num { grid-column: 1; grid-row: 1 / 3; align-self: start; }
	.fs-process .steps-block__step h3 { grid-column: 2; grid-row: 1; }
	.fs-process .steps-block__step p { grid-column: 2; grid-row: 2; }
}
@media (max-width: 700px) {
	.fs-gallery__grid { grid-template-columns: 1fr; }
	.fs-gallery__frame { max-width: 240px; }
}
@media (max-width: 600px) {
	.fs-features__card { flex-basis: 100%; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.fs-showcase.reveal-ready .fs-showcase__inner,
	.fs-highlight.reveal-ready .fs-highlight__inner,
	.fs-trust.reveal-ready .fs-trust__inner,
	.fs-process.reveal-ready .fs-heading,
	.fs-features.reveal-ready .fs-heading,
	.fs-gallery.reveal-ready .fs-heading,
	.fs-features.reveal-ready .fs-features__card,
	.fs-gallery.reveal-ready .fs-gallery__item {
		opacity: 1; transform: none; transition: none;
	}
}

/* Contact form: confirmation / failure notice shown above the form after a
   submission (the form itself is unchanged). scroll-margin clears the fixed
   header when the redirect lands on #contact-form-status. */
.contact-form__status {
	margin: 0 0 22px;
	padding: 13px 16px;
	border-radius: 8px;
	font-size: .95rem;
	line-height: 1.55;
	scroll-margin-top: 110px;
	font-weight: 600;
}
.contact-form__status--sent {
	background: #ecf8f0;
	border: 1px solid #b5dfc2;
	color: #1e5b34;
}
.contact-form__status--error {
	background: #fdf3f3;
	border: 1px solid #f0c6c6;
	color: #8a2323;
}

/* Contact page: the intro copy ("Complete the form below…") and the form are
   two white sections, so both paddings stacked into one 96–144px gap above
   the form. At this join only, each side takes a smaller share: 48px total
   on phones, rising to 64px on large desktops. */
.intro-block:has(+ .contact-form) { padding-bottom: clamp(24px, 2.2vw, 32px); }
.intro-block + .contact-form { padding-top: clamp(24px, 2.2vw, 32px); }

/* ==========================================================================
   UI refinements (ported from the GlobalIQ AI site): responsive spacing,
   hero heights, slider caption placement, image badge, steps layout.
   Design/spacing only, no content changes. Everything below is appended so
   it overrides the matching earlier rules; desktop (>1024px) is untouched
   except where noted (slider caption clearance and arrow style).
   ========================================================================== */

/* ---------- Inner-page hero: 70vh on tablet/mobile (homepage uses .hero-slider) ----------
   min-height rather than height so a very short viewport (landscape phone)
   grows to fit the copy instead of clipping it; padding-top clears the
   fixed header and flex-centering places the copy the same on every page. */
@media (max-width: 1024px) {
	.page-hero,
	.page-hero--full,
	.page-hero--intro {
		height: auto;
		min-height: 70vh;
		display: flex;
		align-items: center;
		padding-top: 90px;
		padding-bottom: 60px;
	}
}

/* ---------- Homepage hero slider (no arrows; pagination dots only) ----------
   Desktop: the caption keeps a 110px floor from the left edge (aligning
   with the header container on wide screens). Tablet: the caption block is
   centred, up to 600px wide. Phone: full width inside a 6% margin, which
   the long captions here need to fit (one slide's paragraph is ~390px tall
   at narrow widths). */
.hero-slider .hero-slide__content {
	left: max(6%, calc((100% - var(--container-header)) / 2 + 32px), 110px);
}
@media (max-width: 1200px) {
	.hero-slider .hero-slide__content { left: max(6%, 110px); }
}
/* Tablet and mobile: 80vh instead of full-screen. The caption is absolutely
   positioned, so min-heights keep the tallest slide clear of the header on
   short screens (capped at the screen height on phones). The caption is
   centred in the space it actually has, between the fixed header and the
   dots, rather than on the whole slider: (84 - 38) / 2 = 23px lower. */
@media (max-width: 1024px) {
	.hero-slider { height: 80vh; min-height: 560px; }
	.hero-slider .hero-slide__content { top: calc(50% + 23px); }
}
@media (min-width: 601px) and (max-width: 1024px) {
	.hero-slider .hero-slide__content {
		left: 50%;
		right: auto;
		width: min(600px, 88%);
		transform: translate(-50%, -50%);
	}
	.hero-slide__text { max-width: none; }
}
@media (max-width: 600px) {
	.hero-slider { min-height: min(610px, 100vh); }
	.hero-slider .hero-slide__content { left: 6%; right: 6%; width: auto; }
}
/* 320px-class phones: the longest caption cannot fit between header and
   dots on a 568px screen, so the slider grows past the fold instead. */
@media (max-width: 359px) {
	.hero-slider { min-height: 680px; }
}

/* ---------- Section rhythm (tablet/mobile) ----------
   Once sections stack, every block kept its desktop clamp() minimum, so
   section-to-section gaps ran 96-140px and image bands kept tall
   min-heights around a few lines of copy. One shared scale:
   --sec-edge   inset where the background changes;
   --sec-seam   inset on each side of a join between two same-background
                neighbours, where both paddings read as ONE gap;
   --sec-trail  bottom padding the last row already carries (rows that keep
                a hover band), subtracted so text-to-edge matches the rest.
   Three steps: 901-1024px (still the two-column layout, only insets
   tighten), <=900px (stacked), <=600px (phone). */
@media (max-width: 1024px) {
	:root { --sec-edge: 52px; --sec-seam: 32px; }

	.split-feature,
	.growth-block,
	.compass-block,
	.proactive-block,
	.feature-block,
	.tech-stack,
	.steps-block,
	.intro-block,
	.contact-form,
	.disclaimer-section {
		padding-top: var(--sec-pt, var(--sec-edge));
		padding-bottom: max(0px, calc(var(--sec-pb, var(--sec-edge)) - var(--sec-trail, 0px)));
	}
	/* The disclaimer is a bordered box, which is already its own edge. */
	.disclaimer-section { --sec-edge: 36px; }
	.growth-block { --sec-trail: clamp(17px, 1.9vw, 22px); }
	/* Tech-stack variant that ends on growth-list rows (hover band kept). */
	.tech-stack:has(.growth-block__list) { --sec-trail: clamp(17px, 1.9vw, 22px); }

	/* Same-background joins. White: */
	:is(.split-feature:not(.split-feature--tint), .growth-block, .intro-block:not(.intro-block--tint), .contact-form, .proactive-block, .feature-block:not(.feature-block--tint), .tech-stack, .compass-block--plain, .disclaimer-section)
	+ :is(.split-feature:not(.split-feature--tint), .growth-block, .intro-block:not(.intro-block--tint), .contact-form, .proactive-block, .feature-block:not(.feature-block--tint), .tech-stack, .compass-block--plain, .disclaimer-section),
	/* Tint (#f7fafc): */
	:is(.split-feature--tint, .compass-block:not(.compass-block--plain), .feature-block--tint, .steps-block, .intro-block--tint)
	+ :is(.split-feature--tint, .compass-block:not(.compass-block--plain), .feature-block--tint, .steps-block, .intro-block--tint) {
		--sec-pt: var(--sec-seam);
	}
	:is(.split-feature:not(.split-feature--tint), .growth-block, .intro-block:not(.intro-block--tint), .contact-form, .proactive-block, .feature-block:not(.feature-block--tint), .tech-stack, .compass-block--plain, .disclaimer-section):has(+ :is(.split-feature:not(.split-feature--tint), .growth-block, .intro-block:not(.intro-block--tint), .contact-form, .proactive-block, .feature-block:not(.feature-block--tint), .tech-stack, .compass-block--plain, .disclaimer-section)),
	:is(.split-feature--tint, .compass-block:not(.compass-block--plain), .feature-block--tint, .steps-block, .intro-block--tint):has(+ :is(.split-feature--tint, .compass-block:not(.compass-block--plain), .feature-block--tint, .steps-block, .intro-block--tint)) {
		--sec-pb: var(--sec-seam);
	}

	/* Last-row padding with no hover band behind it (card grids, tech rows):
	   drop it so the section padding alone sets the bottom edge. Two-column
	   until 700px, so the last row can be two cells. */
	.compass-block__grid > .compass-block__card:last-child,
	.compass-block__grid > .compass-block__card:nth-last-child(2):nth-child(odd),
	.tech-stack__list > li:last-child,
	.tech-stack__list > li:nth-last-child(2):nth-child(odd) { padding-bottom: 0; }

	/* A trailing paragraph margin added ~18-37px under the last line. */
	.split-feature__body > :last-child,
	.cover-section__inner > :last-child { margin-bottom: 0; }

	/* Legal pages: already tight on top; the bottom stacked onto the footer. */
	.legal-article { padding-top: min(40px, var(--sec-edge)); padding-bottom: var(--sec-edge); }
	/* A list or block ending the document kept its bottom margin. */
	.legal-article__inner > :last-child { margin-bottom: 0; }

	/* Homepage showcase kept 88-92px a side. */
	.showcase { padding: 72px 0; }

	/* Image bands: min-heights sized for a wide desktop crop left 100-300px
	   of empty photo around short copy. Let the content padding set height. */
	.cover-section,
	.cover-section--compact,
	.cover-section--centered { min-height: 0; }

	/* Footer: last link's margin doubled the column gap and bottom inset. */
	.site-footer { padding-top: 60px; padding-bottom: 44px; }
	.footer-menu li:last-child,
	.footer-contact-list li:last-child { margin-bottom: 0; }
}
@media (max-width: 900px) {
	:root { --sec-edge: 44px; --sec-seam: 28px; }

	/* Stacked image -> copy gaps, kept below the section gap so each block
	   still reads as one group. */
	.split-feature__inner,
	.proactive-block__layout,
	.feature-block__layout { gap: 32px; }
	.growth-block__layout { gap: 32px; margin-bottom: 40px; }
	.compass-block__layout { gap: 32px; margin-bottom: 28px; }
	.steps-block__layout { gap: 32px; margin-bottom: 32px; }

	.showcase { padding: 64px 0; }
	.site-footer { padding-top: 56px; }
}
@media (max-width: 600px) {
	:root { --sec-edge: 36px; --sec-seam: 24px; }
	.disclaimer-section { --sec-edge: 32px; }

	.split-feature__inner,
	.proactive-block__layout,
	.feature-block__layout { gap: 28px; }
	.growth-block__layout { gap: 28px; margin-bottom: 32px; }
	.compass-block__layout { gap: 28px; margin-bottom: 24px; }
	.steps-block__layout { gap: 28px; margin-bottom: 28px; }

	.showcase { padding: 44px 0; }
	.cover-section__content { padding-top: 48px; padding-bottom: 48px; }
	.cover-section--compact .cover-section__content { padding-top: 44px; padding-bottom: 44px; }
	.cover-section--centered .cover-section__content { padding-top: 48px; padding-bottom: 48px; }

	.site-footer { padding-top: 48px; padding-bottom: 36px; }
	.site-footer__inner { gap: 32px; }
}

/* ---------- Steps (tablet/mobile) ----------
   In one flex row the title and description sat side by side, so a wrapping
   title and its prose read as two ragged columns. Grid instead: the badge
   spans both text rows on the left; title and description stack to its
   right, the title's first line centred on the badge. */
@media (max-width: 900px) {
	.steps-block__step {
		display: grid;
		grid-template-columns: var(--steps-badge) minmax(0, 1fr);
		column-gap: clamp(16px, 2vw, 22px);
		row-gap: 4px;
		align-items: start;
	}
	.steps-block__num { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; }
	.steps-block__step h3 {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
		padding-top: max(0px, calc((var(--steps-badge) - 1.4em) / 2));
	}
	.steps-block__step p { grid-column: 2; grid-row: 2; }
}

/* ---------- Image badge (tablet/mobile) ----------
   Full-width and, at <=600px, stacked icon-over-text, the badge covered
   most of the photo. It now hugs its content in one row, pinned bottom-left,
   breaking between its two phrases on phones. */
@media (max-width: 900px) {
	.proactive-block__badge {
		right: auto;
		max-width: calc(100% - 40px);
	}
}
@media (max-width: 600px) {
	.proactive-block__badge {
		left: 12px;
		bottom: 12px;
		max-width: calc(100% - 24px);
		flex-direction: row;
		align-items: center;
		gap: 10px;
		padding: 8px 14px 8px 8px;
		border-radius: 12px;
	}
	.proactive-block__badge-icon { width: 30px; height: 30px; }
	.proactive-block__badge-icon svg { width: 16px; height: 16px; }
	.proactive-block__badge-text > span { display: block; }
}

/* ---------- Legal pages: long URLs ----------
   Unbroken URLs in the copy (FDA, Google support links) ran off the right
   edge of 320–375px phones. Same rule the globalhealthai.ai site uses:
   break only when a word cannot otherwise fit. */
.legal-article__inner p,
.legal-article__inner li { overflow-wrap: anywhere; }

/* About and Contact hero: identical height on desktop (>1024px). Both use
   .page-hero--intro, whose min-height floor is shared, but the hero's large
   desktop padding (~350px) is added on top of the copy, so About's taller
   copy pushed it past Contact's height at 1280–1440px. Both now take
   Contact's own height explicitly: the shared floor, or padding + Contact's
   copy (~195px) where that is taller. About's copy stays centred and simply
   uses a little of its padding. Tablet/mobile already match (70vh). */
@media (min-width: 1025px) {
	.page-hero--intro {
		height: max(min(660px, 78vh), calc(clamp(148px, 17vw, 224px) + clamp(80px, 10vw, 130px) + 195px));
	}
}

/* ---------- Homepage slider arrows: GlobalIQ AI style (desktop only) ----------
   Frosted translucent disc with a hairline border instead of the flat dark
   circle; fills brand blue and lifts slightly on hover, the chevron nudging
   in its direction of travel. 46px at 24px from the edge (reach 70px): the
   caption's 110px desktop inset keeps it 40px clear. */
.hero-slider__nav {
	z-index: 2;
	background: rgba(255,255,255,.14);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,.4);
	box-shadow: 0 4px 14px rgba(0,0,0,.18);
	width: 46px; height: 46px;
	transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.hero-slider__nav svg { transition: transform .2s; }
.hero-slider__nav:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	box-shadow: 0 6px 18px rgba(0,0,0,.28);
	transform: translateY(-50%) scale(1.06);
}
.hero-slider__nav--prev:hover svg { transform: translateX(-1px); }
.hero-slider__nav--next:hover svg { transform: translateX(1px); }
.hero-slider__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
.hero-slider__nav--prev { left: 24px; }
.hero-slider__nav--next { right: 24px; }
@media (prefers-reduced-motion: reduce) {
	.hero-slider__nav,
	.hero-slider__nav svg { transition: none; }
}

/* Homepage slider arrows: desktop only. On tablet and mobile (<=1024px) the
   slider is navigated with the pagination dots (plus autoplay), so the
   arrows are hidden and the caption uses the full width between margins. */
@media (max-width: 1024px) {
	.hero-slider__nav { display: none; }
}


/* ---------- Split sections with the --reverse modifier ----------
   The image-first order for stacked split sections only switched on at
   860px, while the sections already stack at 900px, so 861-900px showed the
   copy above the image. Matched to the 900px stacking breakpoint. */
@media (max-width: 900px) {
	.split-feature--reverse .split-feature__media,
	.split-feature--reverse .split-feature__body { order: initial; }
}

/* ---------- Icon-left cards (Agentic AI, "Engineered to Operate") ---------- */
/* Stacked (single column): the odd-card 18px inset above outranks the
   generic mobile gutter reset, so alternate icons drifted right. Put every
   card on one left axis (group titles carry no side padding when stacked), and
   give the icon a fixed 22px column so title/description start at the same x
   regardless of glyph. */
@media (max-width: 700px) {
	.compass-block__grid--icon-left .compass-block__card:nth-child(odd),
	.compass-block__grid--icon-left .compass-block__card:nth-child(even) {
		grid-template-columns: 22px minmax(0, 1fr);
		padding-left: 0;
		padding-right: 0;
	}
	.compass-block__grid--icon-left .compass-block__icon {
		width: 22px;
		justify-self: start;
	}
	/* Optical alignment: each glyph carries different built-in whitespace
	   inside its 24-unit viewBox, so equal boxes still showed ragged left
	   edges. --icon-nudge (set per icon in the markup) pulls the visible
	   stroke back to the same x as the widest glyphs. */
	.compass-block__grid--icon-left .compass-block__icon svg {
		transform: translateX(var(--icon-nudge, 0px));
	}
}
/* Per-icon offsets. This site's CSP (style-src 'self') blocks inline style
   attributes, so the offsets live here, by card position, rather than as
   --icon-nudge on each icon in the markup as on the main site. Keyed by
   group, then position within it. */
@media (max-width: 700px) {
	/* Precision AI Operations */
	.compass-block__group:first-child .compass-block__card:nth-child(1) { --icon-nudge: -2.1px; }
	.compass-block__group:first-child .compass-block__card:nth-child(2),
	.compass-block__group:first-child .compass-block__card:nth-child(3) { --icon-nudge: -0.92px; }
	.compass-block__group:first-child .compass-block__card:nth-child(4) { --icon-nudge: -3.67px; }
	/* Data Architecture */
	.compass-block__group:last-child .compass-block__card:nth-child(3) { --icon-nudge: -0.92px; }
	.compass-block__group:last-child .compass-block__card:nth-child(4) { --icon-nudge: -4.58px; }
}