/* =============================================================
   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; }
/* Every tappable control here already has its own deliberate :hover/
   :focus-visible/:active treatment, so the browser's default grey
   tap-highlight box (most visible on the mobile nav's dropdown chevron)
   is just visual noise on top of that -- switch it off globally. */
a, button { -webkit-tap-highlight-color: transparent; }
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: 32px; 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;
	flex-direction: row;
	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; }

/* 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:has(.sub-menu.show) > a::before { opacity: 1; }
.primary-menu > li.has-submenu > a[aria-expanded="true"]::before {
	transform: translateY(-72%) rotate(225deg);
}

.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;
}
.sub-menu.show {
	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;
}

/* Borrows Bootstrap's .navbar-toggler for its data-bs-toggle wiring, but the
   icon/box is fully custom -- neutralize every visual default that class
   brings along (border, border-radius, focus box-shadow) so only the three
   bars below show. */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 32px; height: 32px;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
	margin-left: auto;
	order: 2;
	box-shadow: none;
}
.nav-toggle:focus { box-shadow: none; outline: none; }
.nav-toggle:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: 4px;
}
.nav-toggle__bar { display: block; width: 22px; height: 2px; border-radius: 1px; background: #fff; }

/* Above the collapse breakpoint, force the menu visible regardless of
   Bootstrap's Collapse component state -- the same technique Bootstrap's
   own .navbar-expand-* classes use internally (display:flex !important)
   to keep a navbar-collapse always open on wide screens. */
@media (min-width: 1201px) {
	.primary-nav.collapse { display: flex !important; }
}

/* 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 { 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: 27px; }

/* =============================================================
   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__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; }
}

/* ---------------------------------------------------------------
   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);
}
/* Tablet only: the clamp() above floors at 88px here, which reads as too
   much air above this section once the hero/cover-section heights ahead
   of it were already trimmed down for tablet (see the max-width: 1024px
   and min-width/max-width: 768/1024px blocks elsewhere in this file).
   Placed right after the base rule so it wins the cascade regardless of
   where a shared breakpoint block for this width range would otherwise
   sit relative to this unconditional rule. */
@media (min-width: 768px) and (max-width: 1024px) {
	.showcase { padding-top: 66px; }
}
/* 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;
}
/* Mobile only: kept at the height an earlier fix already shortened this
   full-bleed background image to; the tablet rule below now carries its
   own separate value instead of sharing this one. Placed right after the
   base rule (not in the shared max-width: 1024px block below) so it wins
   the cascade over that unconditional rule regardless of source order. */
@media (max-width: 767px) {
	.cover-section { min-height: clamp(360px, 50vh, 480px); }
}
/* Tablet only: a further reduction from the mobile value above -- the
   wider tablet viewport was still making this section read as oversized
   relative to the content that follows it. */
@media (min-width: 768px) and (max-width: 1024px) {
	.cover-section { min-height: clamp(300px, 42vh, 400px); }
}
.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;
}
/* Tablet only: stack as three visual rows -- heading, then the text/CTA
   panel, then the image -- instead of the two-column grid (heading and
   panel already share one block there, which reads as only two rows
   overall once the image sits below it). */
@media (min-width: 768px) and (max-width: 1024px) {
	.mission-simple__inner {
		grid-template-columns: none;
		display: flex;
		flex-direction: column;
		row-gap: 28px;
	}
	/* Eyebrow keeps its own margin-bottom below (unchanged) so it stays
	   visually attached to the heading as one row; only the heading gets
	   extra bottom space here, opening a clear gap before the next row,
	   the panel. */
	.mission-simple__heading { max-width: none; margin-bottom: 28px; }
	.mission-simple__panel { max-width: none; }
	.mission-simple__corner { display: none; }
	/* Widen the image row past .mission-simple__inner's own width so it
	   reads noticeably larger than the text column above it. */
	.mission-simple__media { width: 728px; max-width: none; }
}
.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;
}
/* Tablet only: a fixed height override. Placed right after the base rule
   (not in the shared 768/1024px block above) so it wins the cascade over
   that unconditional rule regardless of source order -- the same fix
   needed for .page-hero--full and .cover-section elsewhere in this file. */
@media (min-width: 768px) and (max-width: 1024px) {
	.mission-simple__image { height: 322px; }
}
/* 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; }
}


/* =============================================================
   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; }
/* Layout now runs on Bootstrap's own .container > .row > .col-* (see
   footer.php): three even columns at --bs-breakpoint-lg and up
   (col-lg-4), a two-up tier from --bs-breakpoint-md (col-md-6, About
   taking the full row above it), one column below that (col-12). The
   30px desktop gutter that used to come from this rule's own CSS Grid
   `gap` is reproduced with Bootstrap's row gutter variable instead, so
   the spacing is unchanged even though a real grid no longer drives it.
   .container and .row must stay on separate elements here -- .row's own
   margin-left/right (its negative gutter) has equal specificity to and
   comes after .container's centering margin in bootstrap.min.css, so
   merging both classes onto one element let .row silently cancel the
   centering and pin the block to the left edge. */
.site-footer__inner {
	position: relative;
	z-index: 1;
	max-width: var(--container-max);
}
.site-footer__inner > .row {
	--bs-gutter-x: 30px;
	--bs-gutter-y: 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; }
	/* Bootstrap's Collapse component owns display:none/.show/.collapsing
	   for #primary-nav now (a real expand/collapse, not a slide-in panel);
	   this only supplies the dropdown-below-header look and feel. */
	.primary-nav {
		/* Overrides the unconditional desktop rule above (flex row,
		   justify-content:flex-end) -- once Bootstrap's .collapse stops
		   forcing display:none, that old rule is otherwise the only one
		   left claiming display/layout here, squeezing the open panel
		   into a right-aligned flex item instead of a full-width block. */
		display: block;
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		background: #191919;
		max-height: calc(100vh - var(--header-height));
		overflow-y: auto;
	}
	.site-header.is-scrolled .primary-nav { top: var(--header-height-scrolled); }
	.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 "GlobalHealth AI" link is the dropdown toggle at every breakpoint
	   now (see header.php), so its chevron stays visible here too -- just
	   given more right padding so it doesn't crowd the label text. */
	.primary-menu > li.has-submenu > a { padding-right: 26px; }
	.primary-menu > li.has-submenu > a::before {
		right: 6px;
		border-right-color: #fff;
		border-bottom-color: #fff;
		opacity: 1;
	}
	.sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		box-shadow: none;
		background: rgba(255,255,255,.03);
		min-width: 0;
	}
	.sub-menu.show { 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) {
	/* Full 100vh reads as a giant, mostly-empty banner once the copy
	   column narrows down to phone/tablet width -- shorten the slide
	   itself so the image doesn't dwarf the content below it. */
	.hero-slider { height: 80vh; min-height: 460px; }
	.hero-slide__content { width: min(580px, 74%); }
	.hero-slide__accent { margin-bottom: 22px; }
	.hero-slide__text { max-width: 50ch; }
	/* The side arrows sit vertically centred on desktop because the copy
	   column is narrow there. Down here the copy widens to fill most of
	   the slide (see .hero-slide__content below and at 767px), so a
	   centred arrow overlaps the text, and pinning both to the bottom
	   corners instead just reads as two stray buttons with nothing to
	   anchor them. The dots already give full touch/click navigation,
	   so the arrows are dropped rather than relocated. */
	.hero-slider__nav { display: none; }
	/* About+Contact runs long once Contact Info folds in, so it takes
	   the full row (col-12 col-lg-4, see footer.php); Sitemap and Legal
	   share the row underneath via col-md-6. Gutter widens to match the
	   roomier two-up layout. */
	.site-footer__inner > .row { --bs-gutter-x: 40px; --bs-gutter-y: 40px; }

	/* 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); }
}

@media (max-width: 767px) {
	.site-header__inner { gap: 14px; padding: 0 18px; }
	.site-branding img { height: 26px; }
	.showcase { padding-top: 44px; }

	.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; }

	.site-footer__inner { text-align: center; }
	.footer-logo { margin: 0 auto 18px; }
	/* text-align: center only centers the text inside this box, not the
	   box itself -- .footer-about keeps its 300px max-width and its own
	   left edge, so it reads as off-centre under the (actually centred)
	   logo above it without this. */
	.footer-about { margin-left: auto; margin-right: auto; }
	.footer-contact-list li { justify-content: center; }
	/* text-align: center above only re-centers text/inline content --
	   .footer-social is a flex row, so it needs its own justify-content
	   to center with the rest of this column instead of hugging the left
	   edge like the other flex row (.footer-contact-list li) already does. */
	.footer-social { justify-content: center; }
}
/* =============================================================
   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;
}
/* Tablet only: the GlobalHealth AI sub-page heroes (Applications, Technology,
   Insurance, Remote Patient Monitoring, Workforce Safety) share this --full
   modifier, whose 100vh desktop height is oversized once the copy column
   narrows to tablet width but isn't the phone -- so it needs a value between
   the desktop default above and the dedicated phone override further down.
   Placed right after the base rule (rather than in the shared max-width:
   1024px block above) so it wins the cascade over that unconditional rule. */
@media (min-width: 768px) and (max-width: 1024px) {
	.page-hero--full { height: auto; min-height: min(720px, 92vh); }
}
/* 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: 12.5px;
	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__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__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__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__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: min(680px, 92vh); 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__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;
	}
}

@keyframes audienceFade {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: 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; }

/* Tablet only: same edge-to-edge stretch problem the phone override further
   down already solves (left/right: 20px spans nearly the full image width
   once the media column narrows to tablet size). Placed right after the
   base rule, not in a shared max-width block, so it wins the cascade
   regardless of where it'd otherwise sit relative to that unconditional
   rule above. */
@media (min-width: 768px) and (max-width: 1024px) {
	.proactive-block__badge { right: auto; }
	.proactive-block__badge-text { max-width: none; white-space: nowrap; }
}

/* ---------- 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; }
.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.5%; top: 28.7%; }
.tech-stack__layers li:nth-child(3) { left: 79%;   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%; }
.tech-stack__layers li:nth-child(6) { left: 29.5%; top: 71.3%; }
.tech-stack__layers li:nth-child(7) { left: 21%;   top: 50%; }
.tech-stack__layers li:nth-child(8) { left: 29.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) {
	.growth-block__groups { grid-template-rows: repeat(4, 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; }
.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); }

.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; }

/* ---------- 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; }
/* 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__status {
	margin: 0 0 22px;
	padding: 13px 16px;
	border-radius: 8px;
	font-size: .95rem;
	line-height: 1.55;
	font-weight: 600;
	scroll-margin-top: 110px;
}
.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-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; }
/* This content occasionally links to a source using its raw URL as the
   visible text (e.g. the FDA disposal-instructions link on the Prescription
   Policy page) -- a single unbroken long word like that doesn't wrap on its
   own and forces the whole page wider than the viewport on mobile. */
.legal-article__inner { overflow-wrap: break-word; }

.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;
}
.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) {
	/* Stretching edge-to-edge (left/right: 20px from the base rule) reads
	   fine on the wider desktop photo, but on a phone-width crop the badge
	   ends up nearly as wide as the image itself. Let it size to its own
	   content instead, with the text given just enough room to wrap onto
	   two lines rather than forcing one long line the full image width. */
	.proactive-block__badge { left: 20px; right: auto; padding: 10px 14px; }
	.proactive-block__badge-text { max-width: 150px; }
	.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; }
}

/* ---------- 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; }
}

/* =============================================================
   PrimaHealth rebrand overrides
   The reference header/footer expect a plain white "-light" logo mark
   over a transparent-then-dark bar. PrimaHealth's real logo is full
   color (blue mark + slate wordmark), so the header gets a solid,
   always-opaque bar instead of the transparent-over-hero treatment,
   and both logo placements sit on a small white pill for contrast
   wherever they land on a dark surface (header gradient, footer).
   ============================================================= */
.site-header {
	background: rgba(255,255,255,.98);
	box-shadow: 0 2px 14px rgba(15,35,55,.12);
}
.site-header::before { display: none; }
.site-header,
.site-header .primary-menu > li > a { color: var(--color-heading); }
.primary-menu > li.current-menu-item > a,
.primary-menu > li > a:hover { color: var(--color-heading); }
.nav-toggle__bar { background: var(--color-heading); }
.site-header.is-scrolled { background: rgba(255,255,255,.98); }

/* Below the collapse breakpoint, .primary-nav becomes its own dark
   (#191919) slide-down panel instead of sitting inside the white header
   bar -- the dark heading color above (meant for that white bar) reads
   as near-invisible dark-on-dark there, so restore white/light text for
   every state once the links are on the dark panel. */
@media (max-width: 1200px) {
	.site-header .primary-menu > li > a,
	.primary-menu > li.current-menu-item > a,
	.primary-menu > li > a:hover { color: #fff; }
	.sub-menu li a { color: #ddd; }
	.sub-menu li a:hover { color: var(--color-primary); }
}

.footer-logo,
.cover-section__logo {
	background: #fff;
	padding: 6px 14px;
	border-radius: 8px;
}
.footer-social {
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 12px;
}
.footer-social li { margin-bottom: 0; }
.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .22);
	color: rgba(255, 255, 255, .85);
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
	transform: translateY(-2px);
}

/* Header logo sized up a step so the full PrimaHealth wordmark reads
   clearly at a glance, matching the live site's own header proportions. */
.site-branding img { height: 44px; }
.site-header.is-scrolled .site-branding img { height: 36px; }
@media (max-width: 767px) {
	.site-branding img { height: 34px; }
}

/* Legal-page breadcrumbs now use Bootstrap's real .breadcrumb/.breadcrumb-item
   component markup (privacy-policy.php etc.) instead of plain <a>/<span>.
   These overrides keep the exact same look .page-hero__breadcrumb already
   had -- no visual change, just real Bootstrap component underneath. */
.page-hero__breadcrumb .breadcrumb { display: flex; align-items: center; margin: 0; }
.page-hero__breadcrumb .breadcrumb-item,
.page-hero__breadcrumb .breadcrumb-item a { color: rgba(255,255,255,.8); }
.page-hero__breadcrumb .breadcrumb-item a:hover { color: var(--color-primary); }
.page-hero__breadcrumb .breadcrumb-item.active { color: #fff; }
.page-hero__breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.35); }

/* .site-header now also carries Bootstrap's .navbar class (genuine
   component usage), but the real layout is owned by .site-header__inner;
   this neutralizes Bootstrap's own navbar padding/display so the header
   looks exactly as it did before the class was added. */
.site-header.navbar { display: block; padding: 0; }
.site-branding .navbar-brand { padding: 0; margin: 0; font-size: inherit; line-height: 0; }

/* #primary-menu also carries Bootstrap's .navbar-nav (genuine component
   usage), whose own .navbar-nav .dropdown-menu{position:static} rule
   outranks .sub-menu's position:absolute (0,2,0 vs 0,1,0 specificity) --
   it takes the submenu out of Bootstrap's default "dropdown floats over
   a collapsed nav" behavior and drops it back into normal flow instead,
   pushing every item after it (and, since .site-header__inner wraps,
   the logo too) down the page while open. Restores the floating panel.
   Scoped to the desktop breakpoint only -- below it, .sub-menu is
   deliberately position:static again (the @media (max-width: 1200px)
   block above) so the submenu expands in flow, accordion-style, under
   its parent item instead of floating over the rest of the mobile panel. */
@media (min-width: 1201px) {
	.navbar-nav .sub-menu.dropdown-menu { position: absolute; }
}

/* .showcase__inner deliberately has no max-width of its own (it's meant to
   run wider than the standard --container-max sections around it) -- but
   it now also carries Bootstrap's .container class, whose own max-width
   breakpoints would otherwise cap it for the first time. Neutralized so
   the section's width is unchanged from before. */
.showcase__inner.container { max-width: none; }

/* #primary-nav is position:fixed with its own overflow-y:auto, which
   doesn't need Bootstrap's height-measurement slide animation (it
   scrollHeight-measures the collapsing element, a step that's more prone
   to edge cases on a fixed-position panel than on a normal in-flow one).
   Toggling is instant via display:none/.show instead -- still a real
   Bootstrap Collapse, just without the animated step. */
@media (max-width: 1200px) {
	.primary-nav.collapsing { transition: none; }
}