/* NGI Classic theme styles — plain CSS, no build step. */

html {
	font-size: clamp(16px, 14px + 0.5vw, 18px);
}

body {
	font-family: 'Satoshi', sans-serif;
	margin: 0;
	color: #1c2733;
	background: #ffffff;
}

/* ponytail: override WP core :where(.wp-block-columns) bottom margin — all section spacing lives in pattern paddings. */
.wp-block-columns {
	margin-bottom: 0;
	display: flex;
	flex-wrap: wrap;
}

.wp-block-column {
	flex-grow: 1;
	min-width: 0;
}

@media ( max-width: 781px ) {
	.wp-block-columns {
		flex-direction: column;
	}
}

/* === Header === */
.ngi-header {
	background: #ffffff;
	position: sticky;
	top: 0;
	z-index: 30;
	transition: box-shadow 0.2s ease;
}

/* Scrolled state: the header lifts off the page instead of floating flat. */
.ngi-header.is-scrolled {
	box-shadow: 0 4px 16px rgba(11, 51, 88, 0.08);
}

.ngi-header-inner {
	padding-left: 5.5rem;
	padding-right: 5.5rem;
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;
	display: flex;
	align-items: center;
	gap: 2rem;
	transition: padding 0.2s ease;
}

.ngi-header.is-scrolled .ngi-header-inner {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.ngi-logo {
	line-height: 0;
	flex-shrink: 0;
}

.ngi-logo img {
	height: 3.25rem;
	width: auto;
	display: block;
}

.ngi-nav-toggle {
	display: none;
}

.ngi-nav-wrap {
	position: static;
	width: auto;
	inset: auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.5rem;
	flex: 1;
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
}

.ngi-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ngi-nav-list {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.ngi-nav-list > li {
	position: relative;
	display: flex;
}

.ngi-nav a {
	display: block;
	box-sizing: border-box;
	font-family: 'Satoshi', sans-serif;
	font-size: 0.95rem;
	font-weight: 500;
	color: #0b3358;
	padding: 0.4rem 0.65rem;
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.ngi-nav a:hover,
.ngi-nav a:focus-visible,
.ngi-nav li:focus-within > a {
	color: #b23a2e;
	background-color: rgba(178, 58, 46, 0.05);
}

/* Current page: crimson text + underline so the visitor always knows where
   they are. Product pages light up the Products row. */
.ngi-nav-list > li.ngi-current > a {
	color: #b23a2e;
	background-color: transparent;
	box-shadow: inset 0 -2px 0 #b23a2e;
}

/* Individuals dropdown */
.ngi-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 16rem;
	background: #ffffff;
	border: 1px solid #eef4f4;
	border-radius: 8px;
	padding: 0.5rem;
	box-shadow: 0 1px 0 0 rgba(11, 51, 88, 0.08), 0 8px 24px rgba(11, 51, 88, 0.10);
	display: none;
	z-index: 40;
}

.ngi-dropdown a {
	white-space: normal;
}

@media (min-width: 920px) {
	.ngi-has-dropdown:hover > .ngi-dropdown,
	.ngi-has-dropdown:focus-within > .ngi-dropdown {
		display: block;
	}
}

/* Dropdown panels are click-opened (ngi-sub-open) and closable; hover never
   auto-opens so a closed menu stays closed until the user asks. */
@media (min-width: 920px) {
	.ngi-has-dropdown.ngi-sub-open > .ngi-dropdown {
		display: block;
	}
}

/* Expandable top-level rows (Individuals, Products) show a chevron on both
   desktop and mobile; it rotates when the submenu opens. */
/* Top-level rows: flex-centred so plain text links sit on the same optical
   line as the dropdown rows (which carry a chevron), and so min-height is a
   real 44px row instead of padding + content. */
.ngi-nav-list > li > a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0.25rem 0.55rem;
}

.ngi-has-dropdown > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
}

.ngi-has-dropdown > a::after {
	content: '';
	flex: none;
	width: 0.45rem;
	height: 0.45rem;
	margin-right: 0.25rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-0.1rem);
	transition: transform 0.2s ease;
}

.ngi-sub-open > a::after {
	transform: rotate(-135deg) translateY(-0.1rem);
}

/* Category accordion inside the Products dropdown: one open at a time. */
.ngi-cat { list-style: none; }

.ngi-cat-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	background: none;
	border: 0;
	border-top: 1px solid #eef4f4;
	padding: 0.6rem 0.8rem;
	font-family: 'Satoshi', sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #0b3358;
	text-align: left;
	cursor: pointer;
	transition: padding-left 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Open category: accent bar + tint mark the active section; the child links
   carry the hierarchy through indent + guide rail, not the header itself. */
.ngi-cat-open > .ngi-cat-toggle {
	color: #b23a2e;
	background-color: rgba(178, 58, 46, 0.05);
	box-shadow: inset 3px 0 0 #b23a2e;
}

.ngi-cat:first-child .ngi-cat-toggle { border-top: 0; }

.ngi-cat-toggle::after {
	content: '';
	flex: none;
	width: 0.45rem;
	height: 0.45rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-0.1rem);
	transition: transform 0.2s ease;
}

.ngi-cat-open > .ngi-cat-toggle::after {
	transform: rotate(-135deg) translateY(-0.1rem);
}

.ngi-cat-toggle:hover,
.ngi-cat-toggle:focus-visible {
	color: #b23a2e;
}

.ngi-cat-links {
	display: none;
	padding-bottom: 0.3rem;
}

.ngi-cat-open > .ngi-cat-links { display: block; }

/* Subtle entrance when a category expands (skipped when reduced motion). */
@media (prefers-reduced-motion: no-preference) {
	.ngi-cat-open > .ngi-cat-links {
		animation: ngi-cat-in 0.18s ease-out;
	}
	@keyframes ngi-cat-in {
		from {
			opacity: 0;
			transform: translateY(-4px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

/* Child links sit visibly under their category: guide rail + deeper indent,
   lighter weight — hierarchy readable at a glance. */
@media (min-width: 920px) {
	.ngi-nav .ngi-cat-links {
		border-left: 2px solid #eef4f4;
		margin-left: 1rem;
		padding: 0.15rem 0 0.4rem;
	}
	.ngi-cat-open > .ngi-cat-links {
		border-left-color: rgba(178, 58, 46, 0.35);
	}
	.ngi-cat-links a {
		padding-left: 1.6rem;
		font-size: 0.9rem;
		font-weight: 500;
	}
}

/* Nested subcategory (Newborn Screening inside Reproductive Health):
   one more rail + indent level, smaller toggle, no uppercase. */
.ngi-cat .ngi-cat > .ngi-cat-toggle {
	padding: 0.45rem 0.8rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: #33423e;
}
@media (min-width: 920px) {
	.ngi-cat .ngi-cat > .ngi-cat-toggle { padding-left: 1.6rem; }
	.ngi-cat .ngi-cat > .ngi-cat-links { margin-left: 1.6rem; }
	.ngi-cat .ngi-cat a { padding-left: 1.6rem; font-size: 0.85rem; }
}

.ngi-dropdown li {
	list-style: none;
}

@media (min-width: 920px) {
	.ngi-dropdown {
		min-width: 19rem;
		max-height: calc(100vh - 8rem);
		overflow-y: auto;
	}
	.ngi-dropdown a {
		min-height: 0;
		padding: 0.45rem 0.8rem;
	}
}

/* CTA */
.ngi-cta,
a.ngi-cta {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 0.95rem;
	font-weight: 600;
	color: #ffffff;
	background: #b23a2e;
	padding: 0.25rem 1.1rem;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background-color 0.2s ease;
}

.ngi-cta:hover,
.ngi-cta:focus-visible {
	background-color: #973127;
	color: #ffffff;
}

.ngi-drawer-close {
	display: none;
}

/* Compact desktops */
@media (min-width: 920px) and (max-width: 1080px) {
	.ngi-header-inner {
		padding-left: 3rem;
		padding-right: 3rem;
	}
	.ngi-nav a {
		font-size: 0.9rem;
		padding: 0.35rem 0.45rem;
	}
	.ngi-nav-wrap {
		gap: 1rem;
	}
	.ngi-cta,
	a.ngi-cta {
		font-size: 0.9rem;
		padding: 0.45rem 1rem;
	}
}

/* Drawer breakpoint note: nav switches to the mobile drawer at ≤919px; the
   old 783–880 tight-pass/sliver rules are obsolete (that range is drawer now). */

/* Mobile logo */
@media (max-width: 919px) {
	.ngi-logo img {
		height: 2.5rem;
	}
}

/* Mobile drawer */
@media (max-width: 919px) {
	.ngi-header-inner {
		padding-left: 1rem;
		padding-right: 1rem;
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
		justify-content: space-between;
	}

	.ngi-nav-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-family: 'Satoshi', sans-serif;
		font-size: 0.95rem;
		font-weight: 600;
		color: #0b3358;
		background: #ffffff;
		border: 1px solid #eef4f4;
		border-radius: 8px;
		padding: 0.5rem 0.75rem;
		cursor: pointer;
	}

	.ngi-nav-toggle-bars {
		display: inline-block;
		width: 1.25rem;
		height: 2px;
		background: currentColor;
		position: relative;
	}

	.ngi-nav-toggle-bars::before,
	.ngi-nav-toggle-bars::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: currentColor;
	}

	.ngi-nav-toggle-bars::before {
		top: -0.4rem;
	}

	.ngi-nav-toggle-bars::after {
		top: 0.4rem;
	}

	/* Dialog drawer: hidden unless open. UA hides dialog:not([open]), but our
	   other rules must not wipe that — key everything off the [open] state. */
	dialog.ngi-nav-wrap:not([open]) {
		display: none !important;
	}

	dialog.ngi-nav-wrap[open] {
		box-sizing: border-box;
		display: block !important;
		position: fixed !important;
		inset: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: none !important;
		height: 100% !important;
		max-height: none !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: 88px 1rem 1rem;
		background: #ffffff;
		border: none;
		box-shadow: none;
		color: inherit;
		z-index: 9999;
	}

	dialog.ngi-nav-wrap::backdrop {
		background: rgba(10, 46, 82, 0.5);
	}

	/* Close button */
	.ngi-drawer-close {
		display: block;
		position: absolute;
		top: 0.75rem;
		right: 0.75rem;
		font-size: 1.5rem;
		line-height: 1;
		background: none;
		border: none;
		color: #0b3358;
		cursor: pointer;
		padding: 0.25rem;
		z-index: 1;
	}

	.ngi-drawer-close:hover {
		color: #b23a2e;
	}

	/* Prevent flex items shrinking — forces overflow scroll */
	.ngi-nav-wrap > .ngi-nav,
	.ngi-nav-wrap > a.ngi-cta {
		flex-shrink: 0;
	}

	/* Nav list */
	.ngi-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.ngi-nav-list > li {
		display: block;
		border-bottom: 1px solid #eef4f4;
	}

	.ngi-nav-list > li:last-child {
		border-bottom: none;
	}

	/* Link styling. box-sizing: border-box so min-height is the row height —
	   content-box made every row min-height + padding (58px -> 70px rows). */
	.ngi-nav a {
		box-sizing: border-box;
		font-weight: 500;
		font-size: 1rem;
		padding: 0.7rem 0.5rem;
		min-height: 3rem;
		border-radius: 0;
		background: none;
		white-space: normal;
	}

	.ngi-nav a:hover,
	.ngi-nav a:focus-visible {
		color: #b23a2e;
		background-color: rgba(178, 58, 46, 0.04);
	}

	/* Submenus: hidden until tapped */
	.ngi-dropdown {
		position: static;
		transform: none;
		display: none;
		border: none;
		box-shadow: none;
		padding: 0 0 0 1rem;
		max-width: none;
	}

	.ngi-sub-open > .ngi-dropdown {
		display: block;
	}

	/* Submenu link hierarchy */
	.ngi-dropdown a {
		font-size: 0.925rem;
		padding-left: 2rem;
	}

	/* Three levels read as three levels: top row, category row, product row.
	   The rail + indent are what make children belong to their category. */
	.ngi-cat-toggle {
		box-sizing: border-box;
		min-height: 2.75rem;
		padding: 0.5rem 1rem 0.5rem 2rem;
		font-size: 0.8rem;
	}

	.ngi-nav .ngi-cat-links {
		margin-left: 2rem;
		border-left: 2px solid #eef4f4;
		padding: 0 0 0.2rem;
	}

	.ngi-cat-open > .ngi-cat-links {
		border-left-color: rgba(178, 58, 46, 0.35);
	}

	.ngi-cat-links a {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		min-height: 2.75rem;
		padding: 0.35rem 1.25rem;
		font-size: 0.95rem;
	}

	/* Submenu links are separated by the category structure, not a hairline
	   under every row — the full-width rules made the panel feel tall. */
	.ngi-cat-links li {
		border-bottom: none;
	}

	.ngi-dropdown li {
		border-bottom: 1px solid #eef4f4;
	}

	.ngi-dropdown li:last-child {
		border-bottom: none;
	}

	/* CTA below nav */
	.ngi-cta,
	a.ngi-cta {
		display: block;
		text-align: center;
		margin-top: 1.25rem;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
}

/* === Footer === */
.ngi-footer {
	background: #0a2e52;
	padding: 80px 80px 40px;
}

.ngi-footer-inner {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.ngi-footer-top {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 48px;
}

.ngi-footer-brand {
	width: 300px;
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.ngi-footer-wordmark {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ngi-footer-logo {
	font-family: 'Satoshi', sans-serif;
	font-weight: 900;
	font-size: 24px;
	line-height: 29px;
	letter-spacing: -1px;
	color: #ffffff;
}

.ngi-footer-divider {
	width: 2px;
	height: 20px;
	background: #1e4a72;
	display: inline-block;
}

.ngi-footer-tagline {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 1px;
	color: #d18982;
}

.ngi-footer-mission {
	margin: 0;
	font-family: 'Satoshi', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
	color: #bcccdd;
}

.ngi-footer-badges {
	display: flex;
	gap: 8px;
}

.ngi-footer-badge {
	background: #13416b;
	border-radius: 4px;
	padding: 4px 8px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 11px;
	line-height: 14px;
	color: #ffffff;
	display: inline-block;
}

.ngi-footer-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.ngi-footer-col-title {
	margin: 0;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #d18982;
}

.ngi-footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.ngi-footer-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: 'Satoshi', sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 16px;
	color: #bcccdd;
	text-decoration: none;
}

a.ngi-footer-link:hover {
	color: #ffffff;
}

.ngi-footer-bottom {
	border-top: 1px solid #1e4a72;
	padding-top: 24px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.ngi-footer-copy {
	font-family: 'Satoshi', sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 16px;
	color: #6c7a87;
}

.ngi-footer-social {
	display: flex;
	align-items: center;
	gap: 24px;
}

.ngi-footer-social-link {
	font-family: 'Satoshi', sans-serif;
	font-weight: 500;
	font-size: 13px;
	line-height: 16px;
	color: #bcccdd;
	text-decoration: none;
}

.ngi-footer-social-link:hover {
	color: #ffffff;
}

.ngi-footer-lang {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ngi-footer-lang nav {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ngi-footer-lang-active,
.ngi-footer-lang-idle,
.ngi-footer-lang-sep {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
	line-height: 17px;
}

.ngi-footer-lang-active {
	font-weight: 700;
	color: #d18982;
}

.ngi-footer-lang-idle {
	font-weight: 500;
	color: #6c7a87;
}

.ngi-footer-lang-sep {
	font-weight: 400;
	color: #6c7a87;
}

/* Footer responsive: 5 columns + side gutter collapse below desktop */
@media (max-width: 1080px) {
	.ngi-footer {
		padding-left: 32px;
		padding-right: 32px;
	}
	.ngi-footer-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}
	.ngi-footer-brand,
	.ngi-footer-col {
		width: 100%;
		flex: none;
	}
	.ngi-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.ngi-footer-social {
		flex-wrap: wrap;
	}
}

@media (max-width: 600px) {
	.ngi-footer {
		padding: 40px 16px 24px;
	}
}

/* === Footer accordion === */

/* Reset button chrome so the column title renders as a plain heading row
   at every width; .ngi-footer-col-title supplies the visual styling. */
.ngi-footer-acc-toggle {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	text-align: left;
	display: block;
	width: 100%;
	cursor: default;
}

/* Mobile: columns collapse to tap-to-expand rows. Links hidden until opened;
   only the title row shows, with a divider and a coral chevron. */
@media (max-width: 1080px) {
	.ngi-footer-acc-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		padding: 12px 0;
		border-bottom: 1px solid #1e4a72;
	}

	/* Chevron (border-only, points down collapsed / up expanded) */
	.ngi-footer-acc-toggle::after {
		content: "";
		flex: none;
		width: 8px;
		height: 8px;
		border-right: 2px solid #d18982;
		border-bottom: 2px solid #d18982;
		transform: rotate(45deg);
	}

	.ngi-footer-acc-toggle[aria-expanded="true"]::after {
		transform: rotate(225deg);
	}

	.ngi-footer-links {
		display: none;
	}

	.ngi-footer-links.ngi-acc-open {
		display: flex;
		padding-bottom: 8px;
	}

	/* Last row's divider would double up against the bottom bar */
	.ngi-footer-top .ngi-footer-col:last-child .ngi-footer-acc-toggle {
		border-bottom: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* Chevron snap-rotate transition */
	.ngi-footer-acc-toggle::after,
	.ngi-footer-acc-toggle[aria-expanded="true"]::after {
		transition: transform 0.2s ease-out;
	}

	/* Links panel slides open — same pattern as ngi-drop-in in the menu */
	@keyframes ngi-footer-acc-in {
		from {
			opacity: 0;
			transform: translateY(-6px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.ngi-footer-links.ngi-acc-open {
		animation: ngi-footer-acc-in 0.22s ease-out;
	}
}

.ngi-card-date {
	margin-top: auto !important;
}

/* ==========================================================================
   Responsive overrides for Figma-built homepage block patterns.
   These sections carry desktop inline styles in the pattern markup; every
   override below needs !important to win against those inline values.
   ========================================================================== */

/* --- Tablet: ≤1080px --- */
@media (max-width: 1080px) {
	/* All section wrappers: tighten horizontal gutter from 80px to 32px */
	.wp-block-group.alignfull.has-background {
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	/* Hero h1 + section h2: clamp down */
	.wp-block-group.alignfull.has-background > h1,
	.wp-block-group.alignfull.has-background > h2 {
		font-size: 32px !important;
	}
	/* Nested column headings (news row) keep sizing on tablet */
	.wp-block-group.alignfull.has-background > .wp-block-columns > .wp-block-column > .wp-block-group > h2.wp-block-heading,
	.wp-block-group.alignfull.has-background > .wp-block-columns > .wp-block-column > h2.wp-block-heading {
		font-size: 36px !important;
	}
}

/* --- Mobile: ≤781px (WP core stacks wp-block-columns here) --- */
@media (max-width: 781px) {
	/* Section vertical rhythm: 64px top/bottom on every section */
	.wp-block-group.alignfull.has-background {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
	}

	/* First section keeps a taller top under the sticky header */
	section .wp-block-group.alignfull.has-background,
	main .wp-block-group.alignfull.has-background {
		padding-top: 96px !important;
		padding-bottom: 64px !important;
	}
	.wp-block-group.alignfull.has-background > h1,
	.wp-block-group.alignfull.has-background > h2 {
		font-size: 28px !important;
	}

	/* New white hero: clamp the H1 down from 34px */
	.wp-block-group.alignfull.has-background.ngi-hero h1.wp-block-heading {
		font-size: 30px !important;
		line-height: 1.2 !important;
	}

	/* Hero columns: stack without clash, tighten content column gap */
	.wp-block-group.alignfull.has-background > .wp-block-columns {
		gap: 40px 0 !important;
	}

	/* Hero buttons: stack full-width, keep 16px between them */
	.wp-block-buttons {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 16px !important;
	}
	.wp-block-buttons a.wp-element-button {
		justify-content: center !important;
	}

	/* Products / Why NGI / News card stacks */
	.wp-block-group.alignfull.has-background h3.wp-block-heading {
		font-size: 18px !important;
	}
	.wp-block-group.alignfull.has-background h2.wp-block-heading {
		font-size: 28px !important;
		line-height: 1.25 !important;
	}
	.wp-block-group.alignfull.has-background > .wp-block-columns [style*="min-height:280px"] {
		min-height: 0 !important;
	}
}

/* --- Small phones: ≤480px --- */
@media (max-width: 480px) {
	/* New white hero: clamp the H1 down once more */
	.wp-block-group.alignfull.has-background.ngi-hero h1.wp-block-heading {
		font-size: 27px !important;
	}

	/* Full-width CTA/pill buttons */
	a.wp-element-button {
		width: 100% !important;
		text-align: center !important;
	}

	/* Section gutters: 32px → 16px */
	.wp-block-group.alignfull.has-background {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* ==========================================================================
   New white contained sections (ngi-hero, ngi-card, pills).
   ========================================================================== */

/* White card helper — used by Standards of Quality + Products pillars */
.ngi-card {
	border: 1px solid #e6eaf0;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(15, 47, 77, 0.08);
}

/* Hero CTA buttons: rounded-rect with a soft shadow on white */
.ngi-hero .wp-block-button__link {
	box-shadow: 0 2px 10px rgba(15, 47, 77, 0.15);
}

/* === Animations === */

/* Entrance reveals. Elements start fully visible by default; only when the
   user allows motion do we hide them and animate in. Reduced-motion users,
   no-JS browsers, and browsers without IntersectionObserver therefore always
   see content immediately. GPU-friendly properties only: opacity + transform. */
@media (prefers-reduced-motion: no-preference) {
	.ngi-reveal {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 0.5s ease-out, transform 0.5s ease-out;
	}

	.ngi-reveal.ngi-reveal-visible {
		opacity: 1;
		transform: none;
	}

	/* Card hover: gentle 2px lift, no scale — medical tone. :where() keeps
	   zero specificity so the reveal transition above always wins while
	   animate in; the explicit :hover rule (higher specificity) takes over
	   afterwards for a snappy 200ms lift. */
	:where(.ngi-card, .wp-block-group[style*="min-height:280px"]) {
		transition: opacity 0.5s ease-out, transform 0.2s ease-out;
	}

	.ngi-card:hover,
	.wp-block-group[style*="min-height:280px"]:hover {
		transform: translateY(-2px);
	}

	/* Pill CTA: 1px nudge on hover only, no scale. */
	.wp-block-button__link {
		transition: transform 0.15s ease-out;
	}

	.wp-block-button__link:hover {
		transform: translateY(-1px);
	}

	/* Dropdown / mega panels: quick fade + slide on open. Panels toggle
	   display:none → display:block/grid, so transitions cannot run there;
	   keyframes animate the freshly displayed element instead. */
	@keyframes ngi-drop-in {
		from {
			opacity: 0;
			transform: translateY(-6px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.ngi-has-dropdown:hover > .ngi-dropdown,
	.ngi-has-dropdown:focus-within > .ngi-dropdown,
	.ngi-sub-open > .ngi-dropdown {
		animation: ngi-drop-in 0.15s ease-out;
	}
}

/* === Product page shared components (ngi/page-* patterns) === */
.sec-shell { background-color: #FFFFFF; padding: 56px 80px; }
.sec-h2--accent-sub { color: #E6006E; }
.sec-last { padding-bottom: 56px; }
/* ponytail: !important needed to outrank WP's generated layout-container max-width (from block contentSize attrs). */
.sec-inner { max-width: min(1400px, 94vw) !important; margin: 0 auto; }
.sec-inner > * { max-width: none !important; }
.sec-sub, .body--intro, .body--lead { max-width: 68ch; }
.body--lead { margin-left: auto; margin-right: auto; }
/* ponytail: !important required — WP's generated layout-container rule zeroes margin-block-end on children. */
.sec-h2 { color: #14365E; font-family: 'Satoshi'; font-weight: 800; font-size: 22px; line-height: 1.3; margin: 0 0 16px !important; }
.sec-sub { color: #14365E; font-family: 'Satoshi'; font-weight: 500; font-size: 14px; line-height: 1.5; margin: 0 0 12px !important; }
.sec-h2--compact { margin-bottom: 16px !important; }
.sec-h2--minimal { margin-bottom: 8px !important; }
.sec-h2--spacious { margin-bottom: 20px !important; }
.sec-h3 { color: #14365E; font-family: 'Satoshi'; font-weight: 700; font-size: 16px; line-height: 1.35; margin: 0 0 16px !important; }
.sec-h3--accent { color: #E6006E; }
.circles-sub { color: #E6006E; font-family: 'Satoshi'; font-weight: 600; font-size: 15px; line-height: 1.4; margin: 0 0 16px !important; text-align: center; }
.list { display: flex; flex-direction: column; gap: 14px; }
.list-row, .list-row--tight { display: flex; align-items: flex-start; }
.list-row { gap: 14px; }
.list-row--tight { gap: 12px; }
.check-pink { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #E6006E; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.check-blue { flex: none; width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid #E6006E; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.title-pink { color: #E6006E; font-family: 'Satoshi'; font-weight: 700; font-size: 14px; line-height: 1.45; margin: 0; }
.title-pink--snug { line-height: 1.4; }
.title-who { color: #14365E; font-family: 'Satoshi'; font-weight: 500; font-size: 14px; line-height: 1.5; margin: 0; }
.title-navy { color: #14365E; font-family: 'Satoshi'; font-weight: 700; font-size: 14px; line-height: 1.45; margin: 12px 0 0; }
.title-navy--compact { margin-top: 8px; }
.body { color: #6B7786; font-family: 'Satoshi'; font-weight: 400; font-size: 14px; line-height: 1.55; margin: 2px 0 0; }
.body--tight { line-height: 1.5; }
.body--loose { line-height: 1.6; margin-top: 4px; }
.body--flush { margin-top: 0; }
.body--card { margin-top: 8px; }
.body--intro { line-height: 1.6; margin: 0 0 12px !important; }
.body--lead { line-height: 1.5; margin: 0 0 12px !important; text-align: center; }
.body strong { font-weight: 700; color: #14365E; }
.note { color: #6B7786; font-family: 'Satoshi'; font-weight: 400; font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
.list-head { display: flex; align-items: center; gap: 14px; }
.list-row--stack { flex-direction: column; gap: 6px; }
.list-row--stack > .sublist { padding-left: 54px; }
.who-icon { flex: none; width: 40px; height: 40px; }
.why-icon { flex: none; width: 36px; height: 36px; }
.sublist { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.sublist-item { display: flex; gap: 8px; align-items: baseline; }
.sublist-dot { color: #E6006E; font-size: 12px; line-height: 1.4; }
.sublist-text { font-family: 'Satoshi'; font-weight: 400; font-size: 14px; line-height: 1.5; color: #6B7786; }
.circles { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; width: 100%; }
.circles-item { display: flex; flex-direction: column; align-items: center; flex: 1 1 20%; max-width: 240px; min-width: 76px; }
.circle { width: 80px; height: 80px; border-radius: 50%; background-color: #FBE0EA; border: 1px solid #F2B9CD; display: flex; align-items: center; justify-content: center; }
.circle-num { font-family: 'Satoshi'; font-weight: 700; font-size: 26px; line-height: 1; color: #9E0050; }
.circle-label { font-family: 'Satoshi'; font-weight: 400; font-size: 11px; line-height: 1.35; color: #6B7786; text-align: center; margin-top: 10px; max-width: 110px; }
.proteksi-cols { display: flex; justify-content: center; align-items: stretch; column-gap: 40px !important; }
.proteksi-card, .proteksi-third { background-color: #FFFFFF; border: 1px solid #E8EDF2; border-radius: 12px; box-shadow: 0 4px 16px rgba(20, 54, 95, 0.10); text-align: center; }
.proteksi-card { display: flex; flex-direction: column; flex: 0 0 auto; width: auto; min-width: 0; padding: 16px 18px; }
.proteksi-cols .wp-block-column { flex: 0 0 calc(50% - 20px) !important; box-sizing: border-box; }
.proteksi-third { padding: 16px 24px; margin: 40px auto 0 !important; width: 60% !important; box-sizing: border-box; }
.title-pink em { font-style: italic; font-weight: 400; }
@media ( max-width: 781px ) {
	.proteksi-third { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 16px !important; text-align: left !important; }
	.proteksi-cols .wp-block-column { flex: 1 1 auto !important; width: 100% !important; text-align: left !important; }
}
.nifty-steps .wp-block-column { justify-content: flex-start; text-align: left; }
.steps-card { background-color: #FFFFFF; border: 1px solid #EDEEF1; border-radius: 14px; box-shadow: 0 4px 16px rgba(20, 54, 95, 0.10); padding: 16px 18px; }
.step-col { flex-basis: 25%; display: flex; }
.step-divider { display: none !important; flex: none; width: 1px; background-color: #E9EBF0; }
.step-divider--spacer { background-color: #FFFFFF; }
@media ( min-width: 782px ) {
	.step-divider { display: block !important; }
}
@media ( max-width: 781px ) {
	.nifty-steps .wp-block-columns { gap: 14px; }
}
.step-content { padding-left: 16px; padding-right: 16px; display: flex; align-items: center; gap: 12px; }
.step-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.step-icon { flex: none; width: 40px; height: 40px; }
.step-title { color: #E6006E; font-family: 'Satoshi'; font-weight: 700; font-size: 14px; line-height: 1.3; }
.step-text .body { margin: 0; }

/* ponytail: !important outranks WP's zeroed heading margins on the not-yet-refactored product pages. */
.wp-block-group.alignfull > .wp-block-heading:not(.sec-h2):not(.sec-h3),
.wp-block-group.alignfull > .wp-block-group > .wp-block-heading:not(.sec-h2):not(.sec-h3) {
	margin-bottom: 16px !important;
}
.ngi-hero .wp-block-button__link {
	border-radius: 6px !important;
	font-size: 12px !important;
	padding: 10px 22px !important;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Accessibility & interaction: visible focus, 44px touch targets, hover feedback, mobile type floor. */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid #14365E;
	outline-offset: 2px;
}
.hp-dark a:focus-visible,
.hp-dark button:focus-visible,
.hp-dark .wp-block-button__link:focus-visible,
.ngi-footer a:focus-visible,
.ngi-footer button:focus-visible,
.cta-band a:focus-visible,
.cta-band button:focus-visible {
	outline-color: #FFFFFF;
}
/* ponytail: shelf is the one light band inside .hp-dark, so it keeps the blue ring */
.hp-dark .hp-cine-logos-item:focus-visible { outline-color: var(--hp-blue); }
a.btn-order, a.btn-talk {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
a.btn-order:hover { background-color: #C4005F; }
    a.btn-talk:hover { background-color: #0F2A4A; }
@media ( max-width: 781px ) {
	.body, .title-pink, .title-who, .title-navy { font-size: 16px; }
	.sublist-text, .step-title { font-size: 15px; }
}

/* === Proof strip, CTA band, section banding, smooth scroll === */
.band-muted { background-color: #F9FAFB; }

.cta-band { background-color: #14365E; padding: 64px 80px; }
.cta-band-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.cta-band-title { color: #FFFFFF; font-family: 'Satoshi'; font-weight: 800; font-size: 22px; line-height: 1.3; margin: 0; }
.cta-band-sub { color: #C9D6E4; font-family: 'Satoshi'; font-weight: 400; font-size: 15px; line-height: 1.55; margin: 0; max-width: 60ch; }
.cta-band-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
a.btn-light { background-color: #FFFFFF; color: #14365E; border-radius: 6px; padding: 10px 22px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-family: 'Satoshi'; font-weight: 600; font-size: 12px; transition: background-color 0.2s ease; }
a.btn-light:hover { background-color: #E6EDF5; }
html { scroll-behavior: smooth; }
@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
}

/* === A: multi-column list flow (independent items, no row-height gaps) === */
@media ( min-width: 1200px ) {
	.list-cols-2 { display: block; column-count: 2; column-gap: 56px; }
	.list-cols-2 > * { break-inside: avoid; margin-bottom: 16px; }
	.list-cols-2 > *:last-child { margin-bottom: 0; }
}

/* ==========================================================================
   News section — listing grid (Query Loop), cards, pagination, article.
   ========================================================================== */
.ngi-news-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ngi-news-grid-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 380px;
	background-color: #FFFFFF;
	border: 1px solid #E4EAF1;
	border-radius: 16px;
	padding: 0 0 24px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Grid items stretch so every card in a row shares the tallest height. */
.ngi-news-grid > * {
	display: flex;
}

.ngi-news-grid-card:hover {
	transform: translateY( -2px );
	box-shadow: 0 8px 20px rgba( 20, 54, 94, 0.10 );
}

.ngi-news-grid-media {
	margin: 0;
	line-height: 0;
}

.ngi-news-grid-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

/* Placeholder media — NGI mark on a brand tint when a card has no image.
   Scoped under .ngi-news-grid-media so it overrides the real-image rule above. */
.ngi-news-grid-media .ngi-news-media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	background-color: #E8F0F8;
}

.ngi-news-grid-media .ngi-news-media-placeholder img {
	width: 40%;
	height: auto;
	aspect-ratio: auto;
	object-fit: fill;
	display: block;
	opacity: 0.5;
}

/* Post-type badge (Press Release / Event / Blog / Article) on a content card.
   align-self keeps it at its content width instead of stretching in the
   card's flex column, so the pill silhouette survives. */
.ngi-card-type {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	margin: 16px 24px 0;
	padding: 3px 8px;
	border-radius: 999px;
	background-color: var(--badge-color, #5A6B80);
	color: #FFFFFF;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 9px;
	line-height: 1.4;
	letter-spacing: 1.1px;
	text-transform: uppercase;
}

.ngi-news-grid-date {
	margin: 0;
	padding: 0 24px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #B23A2E;
}

.ngi-news-grid-title {
	margin: 0;
	padding: 0 24px;
	font-family: 'Satoshi', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.35;
	color: #14365E;
}

.ngi-news-grid-title a {
	color: inherit;
	text-decoration: none;
}

.ngi-news-grid-title a:hover {
	color: #B23A2E;
}

.ngi-news-grid-excerpt {
	margin: 0;
	padding: 0 24px;
	font-family: 'Satoshi', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.6;
	color: #5A6B80;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Card with no featured image keeps its padding */
.ngi-news-grid-card > .ngi-news-grid-date:first-child {
	padding-top: 24px;
}

/* Pagination — numbered pills */
.ngi-news-grid-pagination {
	margin-top: 48px;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 13px;
}

.ngi-news-grid-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.ngi-news-grid-pagination a,
.ngi-news-grid-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid #DCE4ED;
	border-radius: 999px;
	color: #14365E;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ngi-news-grid-pagination a:hover {
	border-color: #14365E;
}

.ngi-news-grid-pagination .page-numbers.current {
	background-color: #B23A2E;
	border-color: #B23A2E;
	color: #FFFFFF;
}

/* ==========================================================================
   News article (single-news.php)
   ========================================================================== */
.ngi-news-article-main {
	padding: 64px 80px 80px;
}

.ngi-news-article {
	max-width: 1000px;
	margin: 0 auto;
}

.ngi-news-article-head {
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}

.ngi-news-article-eyebrow {
	margin: 0 0 10px;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #B23A2E;
}

.ngi-news-article-title {
	margin: 0;
	font-family: 'Satoshi', sans-serif;
	font-weight: 800;
	font-size: 40px;
	line-height: 1.2;
	color: #14365E;
}

.ngi-news-article-date {
	margin: 14px 0 0;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 400;
	font-size: 13px;
	color: #5A6B80;
}

.ngi-news-article-media {
	margin: 36px 0 0;
	line-height: 0;
}

.ngi-news-article-media img {
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.ngi-news-article-content {
	max-width: 720px;
	margin: 40px auto 0;
	font-family: 'Satoshi', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.75;
	color: #344054;
}

.ngi-news-article-content h2,
.ngi-news-article-content h3 {
	font-family: 'Satoshi', sans-serif;
	font-weight: 700;
	color: #14365E;
	line-height: 1.3;
}

.ngi-news-article-content h2 { font-size: 26px; margin: 40px 0 14px; }
.ngi-news-article-content h3 { font-size: 20px; margin: 32px 0 12px; }
.ngi-news-article-content p { margin: 0 0 20px; }
.ngi-news-article-content a { color: #B23A2E; text-decoration: underline; text-underline-offset: 2px; }
.ngi-news-article-content img,
.ngi-news-article-content figure img { max-width: 100%; height: auto; border-radius: 12px; }
.ngi-news-article-content ul,
.ngi-news-article-content ol { margin: 0 0 20px; padding-left: 22px; }
.ngi-news-article-content li { margin-bottom: 8px; }

.ngi-news-article-back {
	margin: 48px auto 0;
	max-width: 720px;
	text-align: center;
}

a.ngi-news-article-back-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 26px;
	border-radius: 999px;
	background-color: #14365E;
	color: #FFFFFF;
	font-family: 'Satoshi', sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

a.ngi-news-article-back-btn:hover {
	background-color: #0E2A4A;
}

/* Related news */
.ngi-related-news {
	margin: 72px auto 0;
	max-width: 1200px;
	background-color: #F0F5F8;
	border-radius: 24px;
	padding: 48px 40px;
}

.ngi-related-news-title {
	margin: 0 0 28px;
	font-family: 'Satoshi', sans-serif;
	font-weight: 800;
	font-size: 24px;
	color: #14365E;
}

.ngi-related-news-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 24px;
}

a.ngi-related-news-card {
	text-decoration: none;
	padding-bottom: 22px;
	/* Card is the grid item here: compact height, stretched to the row. */
	min-height: 0;
	height: auto;
	align-self: stretch;
}

a.ngi-related-news-card .ngi-news-grid-title {
	font-size: 17px;
}

/* News — mobile */
@media ( max-width: 781px ) {
	.ngi-news-grid { grid-template-columns: 1fr !important; gap: 24px; }
	.ngi-related-news-grid { grid-template-columns: 1fr; }
	.ngi-news-article-main { padding: 40px 20px 56px; }
	.ngi-news-article-title { font-size: 28px; }
	.ngi-related-news { padding: 32px 20px; }
}

/* Content listing pages (News & Event / Genome Insights) */
.ngi-listing-band {
	background-color: #F0F5F8;
	padding: 96px 80px 56px;
}

.ngi-listing-band--grid {
	background-color: #FFFFFF;
	padding: 56px 80px 96px;
}

.ngi-listing-inner {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	box-sizing: border-box;
}

.ngi-listing-title {
	margin: 0;
	font-family: 'Satoshi', sans-serif;
	font-weight: 800;
	font-size: 40px;
	line-height: 1.2;
	color: #14365E;
}

.ngi-listing-intro {
	margin: 16px 0 0;
	max-width: 720px;
	font-family: 'Satoshi', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #5A6B80;
}

.ngi-listing-empty {
	margin: 0;
	text-align: center;
	font-family: 'Satoshi', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #5A6B80;
}

.ngi-listing-pagination {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

@media ( max-width: 781px ) {
	.ngi-listing-band { padding: 64px 20px 40px; }
	.ngi-listing-band--grid { padding: 40px 20px 64px; }
	.ngi-listing-title { font-size: 30px; }
}

/* ==========================================================================
   Homepage system — brand tokens and primitives for patterns/home-*.php.
   Tokens live on .hp-section; the primitives are global but hp- namespaced.
   .hp-h2 is the one name page-hpv.php also uses, hence the :where() scope.
   ========================================================================== */

.hp-section {
	--hp-navy: #0B3358;
	--hp-blue: #165AA2;
	--hp-crimson: #B23A2E;
	--hp-crimson-dark: #8E2C22;
	--hp-mist: #EEF4FA;
	--hp-charcoal: #1C2733;
	--hp-muted: #42556B;
	--hp-line: #D9E2EC;
	--hp-line-dark: rgba(255, 255, 255, 0.22);
	--hp-on-dark: #FFFFFF;
	--hp-on-dark-soft: #C9DAEA;
	--hp-on-dark-label: #AFC4DA;
	--hp-bleed: -80px;
	box-sizing: border-box;
	color: var(--hp-charcoal);
	font-family: 'Satoshi', sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

/* Matches the theme's own responsive gutters, so the bleed always lands
   exactly on the section edge: 80px, then 32px, then 16px. */
@media ( max-width: 1080px ) {
	.hp-section { --hp-bleed: -32px; }
}

@media ( max-width: 480px ) {
	.hp-section { --hp-bleed: -16px; }
}

.hp-section *, .hp-section *::before, .hp-section *::after { box-sizing: border-box; }

.hp-inner { width: 100%; max-width: 1440px; margin-inline: auto; }

.hp-bleed { margin-left: var(--hp-bleed); margin-right: var(--hp-bleed); }

.hp-dark { background-color: var(--hp-navy); color: var(--hp-on-dark); }

.hp-dark .hp-h2, .hp-dark .hp-h3, .hp-dark .hp-h4 { color: var(--hp-on-dark); }
.hp-dark .hp-body, .hp-dark .hp-lead { color: var(--hp-on-dark-soft); }
.hp-dark .hp-label { color: var(--hp-on-dark-label); }

/* --- Type scale (brand: Display 56/64 Black, H2 40/48 Bold, H3 20/28
       Medium, Body 16/24 Regular, Label 12/16 Space Grotesk Medium). --- */

.hp-display {
	margin: 0;
	font-weight: 900;
	font-size: 56px;
	line-height: 1.143;
	letter-spacing: -0.025em;
	color: inherit;
	text-wrap: balance;
}

@media ( max-width: 1080px ) { .hp-display { font-size: 46px; } }
@media ( max-width: 781px ) { .hp-display { font-size: 36px; line-height: 1.15; } }

/* :where() keeps specificity at 0,1,0 so .hp-dark .hp-h2 still wins on colour,
   while the ancestor requirement keeps this rule out of page-hpv.php, which
   uses its own .hp-h2 class. */
:where( .hp-section ) .hp-h2 {
	margin: 0;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: inherit;
	text-wrap: balance;
}

@media ( max-width: 1080px ) { :where( .hp-section ) .hp-h2 { font-size: 34px; } }
@media ( max-width: 781px ) { :where( .hp-section ) .hp-h2 { font-size: 28px; line-height: 1.286; } }

/* Phone step: 28px on a 343px measure is seven characters of tracking-heavy
   headroom per line, so long headings ate the screen. 24/1.3 keeps the H2
   clearly above the 20px H3 while giving the line back its reading rhythm. */
@media ( max-width: 480px ) { :where( .hp-section ) .hp-h2 { font-size: 24px; line-height: 1.3; } }

.hp-h3 {
	margin: 0;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
	color: inherit;
}

.hp-h4 {
	margin: 0;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
}

.hp-lead { margin: 0; font-size: 18px; line-height: 1.55; color: var(--hp-muted); }

.hp-body { margin: 0; font-size: 16px; line-height: 1.5; color: var(--hp-muted); }

.hp-small { margin: 0; font-size: 14px; line-height: 1.55; color: var(--hp-muted); }

.hp-label {
	margin: 0;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hp-muted);
}

/* Eyebrow: label with its crimson marker. The marker flips to white on
   dark grounds — Crimson stays reserved for buttons and glyphs there.
   Top-aligned so it stays on the first line when the label wraps. */
.hp-eyebrow { display: flex; align-items: flex-start; gap: 12px; }

.hp-eyebrow::before {
	content: "";
	flex: none;
	width: 22px;
	height: 2px;
	margin-top: 7px;
	background-color: var(--hp-crimson);
}

.hp-dark .hp-eyebrow::before { background-color: rgba(255, 255, 255, 0.6); }

/* --- Buttons --- */

.hp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 26px;
	border: 1px solid transparent;
	border-radius: 12px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.hp-btn--primary { background-color: var(--hp-crimson); color: #FFFFFF; }

.hp-btn--ghost { background-color: transparent; color: var(--hp-on-dark); border-color: rgba(255, 255, 255, 0.45); }

.hp-btn:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 3px; }

.hp-dark .hp-btn:focus-visible { outline-color: #FFFFFF; }

@media ( max-width: 480px ) {
	.hp-btn { width: 100%; }
}

/* --- Read-depth track (brand motif) --- */

.hp-track { display: flex; align-items: flex-end; gap: 5px; overflow: hidden; }

.hp-bar {
	flex: 1 1 0;
	min-width: 2px;
	border-radius: 1px 1px 0 0;
	background-color: #2C6394;
}

.hp-bar.is-lit { background-color: #A9C8E4; }

.hp-bar.is-signal { background-color: var(--hp-crimson); }

/* --- Links and inline focus --- */

.hp-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
	color: var(--hp-blue);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.hp-link svg { flex: none; }

.hp-link:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 4px; border-radius: 4px; }

@media ( prefers-reduced-motion: no-preference ) {
	.hp-link { transition: color 0.18s ease; }
	.hp-link svg { transition: transform 0.18s ease; }
	.hp-link:hover { color: var(--hp-navy); }
	.hp-link:hover svg { transform: translateX(3px); }
	.hp-btn { transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; }
	.hp-btn--primary:hover { background-color: var(--hp-crimson-dark); }
	.hp-btn--ghost:hover { border-color: #FFFFFF; background-color: rgba(255, 255, 255, 0.1); }
}

@media ( prefers-reduced-motion: no-preference ) {
	/* One orchestrated moment: the hero track resolves bar by bar, left to
	   right. Everything below the fold stays static. */
	.hp-section .hp-track.is-animated .hp-bar {
		transform-origin: bottom;
		animation: hp-bar-rise 0.7s cubic-bezier(0.22, 0.85, 0.3, 1) both;
		animation-delay: calc(220ms + var(--i, 0) * 13ms);
	}

	@keyframes hp-bar-rise {
		from { transform: scaleY(0.05); opacity: 0.25; }
		to { transform: none; opacity: 1; }
	}
}

/* ==========================================================================
   Cinematic layer — homepage only. Every selector below is hp-cine-* and
   exists nowhere else in the theme, so nothing here can reach a product page.
   Photography is NGI's own; scrim gradients are permitted over images only.
   ========================================================================== */

.hp-cine-media { position: relative; overflow: hidden; background-color: #0B3358; }

.hp-cine-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Graded, not decorative: the photography is documentary, so it is pushed
   toward the brand navy rather than shown raw. */
.hp-cine-graded img { filter: grayscale( 0.55 ) contrast( 1.06 ) brightness( 0.86 ); }

.hp-cine-scrim { position: absolute; inset: 0; pointer-events: none; }

/* Hero: type left, photograph right, scrim dissolving the seam. */
.hp-cine-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	/* Fills the screen exactly. nav.js publishes the sticky header's measured
	   height as --ngi-header-h, so nothing of the next section shows. */
	min-height: calc( 100vh - var( --ngi-header-h, 117px ) );
	min-height: calc( 100svh - var( --ngi-header-h, 117px ) );
}

/* No photograph in the hero. Depth comes from three layers: a soft Assay Blue
   glow, the read-depth track fading up from the base, and an oversized ghost
   wordmark behind the type. All decorative, all aria-hidden. */
.hp-cine-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* The laboratory photograph. Graded and scrimmed so the headline keeps its
   contrast on the left while the bench reads on the right. */
.hp-cine-hero-photo { position: absolute; inset: 0; z-index: 0; }

.hp-cine-hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 64% 50%;
	filter: saturate( 0.78 ) contrast( 1.05 ) brightness( 0.9 );
}

.hp-cine-hero-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient( to right, rgba( 11, 51, 88, 0.97 ) 0%, rgba( 11, 51, 88, 0.93 ) 30%, rgba( 11, 51, 88, 0.62 ) 56%, rgba( 11, 51, 88, 0.3 ) 100% ),
		linear-gradient( to top, rgba( 11, 51, 88, 0.96 ) 0%, rgba( 11, 51, 88, 0.18 ) 46%, rgba( 11, 51, 88, 0.62 ) 100% );
}

.hp-cine-hero-trackbg {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 46%;
	opacity: 0.32;
	-webkit-mask-image: linear-gradient( to top, #000000 0%, rgba( 0, 0, 0, 0 ) 100% );
	mask-image: linear-gradient( to top, #000000 0%, rgba( 0, 0, 0, 0 ) 100% );
}

.hp-cine-hero-trackbg .hp-track { height: 100%; }

.hp-cine-hero-grid {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 auto;
	padding-block: 40px;
}

/* Every content wrapper must outrank the photo and background layers, or the
   photograph paints over the proof figures. */
.hp-cine-hero .hp-inner { position: relative; z-index: 1; }

/* Product logo shelf, pinned to the base of the hero.
   The NALEYA lockups are light-background artwork, so they cannot sit on the
   navy. The shelf is therefore a white band that bleeds the full width of
   the viewport and closes the hero — the photo runs to its top edge. */
/* The band is its own section below the hero, so the hero keeps its full
   height and the marquee gets a floor of its own. */
.hp-cine-logos {
	position: relative;
	margin-top: 44px;
	padding-top: 32px;
	border-top: 1px solid var(--hp-line);
	overflow: hidden;
}




.hp-cine-logos-window { flex: 1 1 auto; min-width: 0; overflow: hidden; }

.hp-cine-logos-inner { display: flex; width: max-content; }

.hp-cine-logos-track { display: flex; align-items: center; gap: 48px; padding-right: 48px; }

.hp-cine-logos-item {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	white-space: nowrap;
	text-decoration: none;
}

.hp-cine-logos-logo { display: block; height: 30px; width: auto; }

.hp-cine-logos-text {
	font-weight: 800;
	font-size: 19px;
	line-height: 1;
	letter-spacing: -0.01em;
}

.hp-cine-logos-item:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 4px; border-radius: 4px; }

/* Kinetic headline: each word is its own mask, so the line rises word by word
   while the h1 itself stays visible to search engines and assistive tech. */
.hp-kin-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	/* Room for descenders and the swash of a comma, without moving the baseline. */
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}

.hp-kin-word > span { display: inline-block; }

/* Pointer spotlight. Invisible until a pointer is present, so touch devices
   never see a stray highlight. */
.hp-cine-spot {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background-image: radial-gradient( 320px circle at var( --mx, 50% ) var( --my, 50% ), rgba( 255, 255, 255, 0.08 ), rgba( 255, 255, 255, 0 ) 68% );
}

.hp-cine-hero.is-pointer .hp-cine-spot,
.hp-cine-cta.is-pointer .hp-cine-spot { opacity: 1; }

.hp-cine-hero .hp-display { font-size: clamp( 40px, 6.4vw, 88px ); line-height: 0.98; letter-spacing: -0.04em; }

.hp-cine-hero .hp-lead { margin-top: 24px; max-width: 46ch; }

.hp-cine-hero .hp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hp-cine-scrollcue {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 56px;
	min-height: 44px;
	color: #C9DAEA;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}

.hp-cine-scrollcue:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }

.hp-cine-scrollcue svg { flex: none; }

/* Split: copy and a panel image sharing the grid. */
.hp-cine-split {
	display: grid;
	grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
	column-gap: 24px;
	row-gap: 48px;
	align-items: center;
}

.hp-cine-split-copy { grid-column: 1 / span 6; }
.hp-cine-split-media { grid-column: 7 / -1; }

.hp-cine-split-media .hp-cine-media { border-radius: 12px; aspect-ratio: 16 / 9; }

.hp-cine-caption {
	display: block;
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.5;
	color: #42556B;
}

.hp-dark .hp-cine-caption { color: #AFC4DA; }

/* Full-bleed photographic band with content sitting on the scrim. */
.hp-cine-band { position: relative; min-height: 560px; display: flex; align-items: flex-end; }

.hp-cine-band .hp-cine-media { position: absolute; inset: 0; }

.hp-cine-band .hp-cine-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient( to top, rgba( 11, 51, 88, 0.96 ) 6%, rgba( 11, 51, 88, 0.72 ) 44%, rgba( 11, 51, 88, 0.28 ) 100% );
}

.hp-cine-band-body { position: relative; z-index: 1; padding-block: 72px; max-width: 62ch; }

.hp-cine-band .hp-display { font-size: 48px; }

/* Counting statistics. */
.hp-cine-stats {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 0;
	margin: 0;
	padding: 24px 0 22px;
	border-top: 1px solid var(--hp-line-dark);
	list-style: none;
}

.hp-cine-stats li { padding-left: 28px; border-left: 1px solid var(--hp-line-dark); }

.hp-cine-stats li:first-child { padding-left: 0; border-left: 0; }

.hp-cine-stat-n {
	display: block;
	font-weight: 900;
	font-size: 44px;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--hp-on-dark);
	font-variant-numeric: tabular-nums;
}

.hp-cine-stat-c {
	display: block;
	margin-top: 12px;
	max-width: 22ch;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hp-on-dark-label);
}

/* Short laptops (1366x768 and similar): the hero must still complete without
   scrolling, so the display type and padding step down again. */
@media ( max-height: 820px ) and ( min-width: 1081px ) {
	.hp-cine-hero .hp-display { font-size: clamp( 34px, 5.2vw, 64px ); }
	.hp-cine-hero-grid { padding-block: 24px; }
	.hp-cine-hero .hp-lead { margin-top: 20px; }
	.hp-cine-hero .hp-actions { margin-top: 22px; }
	.hp-cine-stats { padding-top: 20px; }
	.hp-cine-logos { padding-top: 20px; }
}

@media ( max-width: 919px ) {
	.hp-cine-hero { min-height: calc( 100svh - var( --ngi-header-h, 88px ) ); }
}

@media ( max-width: 1080px ) {
	.hp-cine-hero .hp-display { font-size: 56px; }

	.hp-cine-split { grid-template-columns: minmax( 0, 1fr ); row-gap: 32px; }
	.hp-cine-split-copy,
	.hp-cine-split-media { grid-column: 1 / -1; }

	.hp-cine-band { min-height: 480px; }
	.hp-cine-band .hp-display { font-size: 38px; }

	.hp-cine-stats { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); row-gap: 32px; }
	.hp-cine-stats li:nth-child( odd ) { padding-left: 0; border-left: 0; }
}

@media ( max-width: 781px ) {
	.hp-cine-hero .hp-display { font-size: 42px; }
	.hp-cine-scrollcue { margin-top: 40px; }
	.hp-cine-band { min-height: 420px; }
	.hp-cine-band .hp-display { font-size: 30px; }
	.hp-cine-band-body { padding-block: 48px; }
}

@media ( max-width: 480px ) {
	.hp-cine-hero .hp-display { font-size: 40px; }
	.hp-cine-hero-grid { padding-block: 72px 48px; }
	.hp-cine-stat-n { font-size: 34px; }
	.hp-cine-stats { grid-template-columns: minmax( 0, 1fr ); row-gap: 24px; }
	.hp-cine-stats li { padding-left: 0; border-left: 0; }
}

/* Motion. Everything is defined only when motion is welcome, so the static
   page is the default and needs no JavaScript to be complete. */
@media ( prefers-reduced-motion: no-preference ) {
	.hp-cine-reveal {
		opacity: 0;
		transform: translate3d( 0, 26px, 0 );
	}

	.hp-cine-reveal.is-inview {
		opacity: 1;
		transform: none;
		transition: opacity 0.75s ease, transform 0.85s cubic-bezier( 0.22, 1, 0.36, 1 );
	}

	/* Stagger via --d set in markup. */
	.hp-cine-reveal.is-inview { transition-delay: var( --d, 0ms ); }

	.hp-cine-kenburns img {
		transform-origin: 60% 40%;
		animation: hp-kenburns 28s ease-in-out infinite alternate;
	}

	@keyframes hp-kenburns {
		from { transform: scale( 1.04 ) translate3d( 0, 0, 0 ); }
		to { transform: scale( 1.14 ) translate3d( -1.5%, -2%, 0 ); }
	}

	.hp-cine-parallax img { will-change: transform; }

	.hp-cine-media img { transition: filter 0.6s ease; }

	.hp-cine-split-media:hover.hp-cine-parallax img { filter: grayscale( 0.15 ) contrast( 1.04 ) brightness( 0.94 ); }

	.hp-cine-scrollcue svg { animation: hp-cue-bob 2.4s ease-in-out infinite; }

	@keyframes hp-cue-bob {
		0%, 100% { transform: translateY( 0 ); }
		50% { transform: translateY( 5px ); }
	}

	/* Two identical halves, so a -50% shift loops without a seam. */
	.hp-cine-logos-inner { animation: hp-marquee 34s linear infinite; }

	.hp-cine-logos:hover .hp-cine-logos-inner,
	.hp-cine-logos:focus-within .hp-cine-logos-inner { animation-play-state: paused; }

	.hp-cine-logos-item { transition: opacity 0.18s ease; }
	.hp-cine-logos-item:hover { opacity: 0.62; }

	@keyframes hp-marquee {
		from { transform: translate3d( 0, 0, 0 ); }
		to { transform: translate3d( -50%, 0, 0 ); }
	}

	.hp-cine-kinetic .hp-kin-word > span { transform: translate3d( 0, 110%, 0 ); }

	/* Hero bars ripple like a waveform: each bar pulses on the same curve, but
	   its negative delay shifts it along the band, so the crest travels left to
	   right. scaleY only — no layout thrashes at 150 bars. */
	.hp-cine-hero-trackbg .hp-bar {
		transform-origin: bottom;
		animation: hp-wave 2.8s ease-in-out infinite;
		animation-delay: calc( var( --i, 0 ) * -22ms );
	}

	@keyframes hp-wave {
		0%, 100% { transform: scaleY( 0.72 ); }
		50% { transform: scaleY( 1 ); }
	}

	.hp-cine-kinetic.is-inview .hp-kin-word > span {
		transform: none;
		transition: transform 0.95s cubic-bezier( 0.22, 1, 0.36, 1 );
		transition-delay: calc( var( --i, 0 ) * 85ms );
	}

	.hp-cine-spot { transition: opacity 0.4s ease; }
}




/* The test-menu band gets a cap of its own: it is the only place on the
   homepage where the whole product range is on show. */
.hp-menu-band { border-top: 3px solid var(--hp-crimson); }

.hp-menu-band-head .hp-h2 { max-width: 22ch; }

.hp-menu-band-head .hp-body { margin-top: 12px; max-width: 62ch; }