/*
Theme Name: Newborn Advantage
Theme URI: https://newbornadvantage.com
Author: Charly Agency
Author URI: https://charlyagency.com
Description: Custom block theme for Newborn Advantage Surrogacy, built from the approved Figma design. Every section is editable from wp-admin via block patterns and ACF fields.
Version: 1.2.4
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: newborn-advantage
*/

/* ---- Anchor scrolling under the sticky header ----
   The bar re-attaches to the top of the viewport once it has been scrolled past,
   so anything an in-page link jumps to would land underneath it. scroll-padding
   on the scrolling element is the one place that fixes this for every kind of
   scroll at once: a clicked #hash, a page loaded with a hash already in the URL,
   and any scrollIntoView the theme's own scripts call.

   The height is measured and published by na-menu.js rather than written here,
   because the bar is 100px on the design width and 72px on a phone. The literal
   below is only the fallback for the moment before that script runs, and is the
   taller of the two so a target is never left under the bar. */
:root {
	--na-header-h: 100px;
}
html {
	scroll-padding-top: calc(var(--na-header-h) + 24px);
}

/* ---- Scroll reveal (reveal.js adds .na-will-reveal / .is-visible) ---- */
.na-will-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.na-will-reveal.is-visible {
	opacity: 1;
	transform: none;
}
.na-no-motion .na-will-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

/* ---- Header ---- */
.na-header {
	position: relative;
}
.na-header__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0 !important;
	z-index: 1;
	width: 279px !important;
}
.na-header__logo img {
	width: 279px;
	height: auto;
}
/* Core's font-size presets beat the theme's on colliding slugs (see LESSONS),
   so the nav's type is stated here in the design's own numbers. */
.na-header__menu-label {
	margin: 0;
	font-size: 18px !important;
	line-height: 23px;
}
/* The frame's menu mark is two 28px rules 8px apart. Core's handle icon is the
   right idea at the wrong size, so the button draws the rules itself. */
.na-header__menu .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--ink);
	position: relative;
	width: 28px;
	height: 24px;
	padding: 0;
}
.na-header__menu .wp-block-navigation__responsive-container-open svg {
	display: none;
}
.na-header__menu .wp-block-navigation__responsive-container-open::before,
.na-header__menu .wp-block-navigation__responsive-container-open::after {
	content: "";
	position: absolute;
	left: 0;
	width: 28px;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.3s ease;
}
.na-header__menu .wp-block-navigation__responsive-container-open::before {
	top: 9px;
}
.na-header__menu .wp-block-navigation__responsive-container-open::after {
	top: 17px;
}
.na-header__menu .wp-block-navigation__responsive-container-open:hover::before {
	transform: translateY(-1px);
}
.na-header__menu .wp-block-navigation__responsive-container-open:hover::after {
	transform: translateY(1px);
}

/* ---- Sticky header ----
   The bar stays where the design puts it until it has scrolled away, then comes
   back from the top on white so it is always reachable. */
/* The selectors repeat the page-level ones that make the bar transparent over a
   hero photo, so the stuck state can put its white back. */
.na-header.is-stuck,
body.home .na-header.is-stuck,
body:has(main .na-hero--light) .na-header.is-stuck {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	background: var(--wp--preset--color--white) !important;
	background-color: var(--wp--preset--color--white) !important;
	box-shadow: 0 2px 18px rgba(42, 42, 40, 0.08);
	animation: na-header-drop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes na-header-drop {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.na-header.is-stuck {
		animation: none;
	}
}

/* ---- Menu panel ----
   Core's overlay is a full-screen sheet that appears and disappears on a
   display switch. This turns it into a panel that slides in from the left over
   a dimmed page: display has to stay put for the transition to run, so the
   closed state is carried by visibility and pointer-events instead. */
.na-header .wp-block-navigation__responsive-container {
	display: flex !important;
	position: fixed;
	inset: 0;
	z-index: 100000;
	padding: 0 !important;
	background-color: rgba(42, 42, 40, 0.32) !important;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	overflow: hidden;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}
.na-header .wp-block-navigation__responsive-container.is-menu-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.na-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close {
	width: min(420px, 88vw);
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
	background: var(--wp--preset--color--mint-bg);
	box-shadow: 0 0 60px rgba(42, 42, 40, 0.18);
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.na-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	transform: none;
}
.na-header .wp-block-navigation__responsive-dialog {
	width: 100%;
	box-sizing: border-box;
	padding: 40px 40px 48px;
	position: relative;
	margin: 0;
}
.na-header .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 32px;
	right: 34px;
	color: var(--wp--preset--color--ink);
}
/* Core pads this wrapper by 56px on top of its own margin, which left the links
   floating a third of the way down the panel. */
.na-header .wp-block-navigation__responsive-container-content {
	width: 100%;
	padding: 0 !important;
	margin-top: 64px;
}
.na-header .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	gap: 26px;
	align-items: flex-start;
}
.na-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	font-size: 24px;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color 0.2s ease;
}
.na-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover,
.na-header .wp-block-navigation__responsive-container-content .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--teal);
}
/* Surrogate-only pages hang off the Surrogates entry. Core only unfolds a
   submenu into the panel while `is-menu-open` is set, which would snap it back
   to a floating dropdown for the length of the close animation; this menu is
   `overlayMenu: always`, so the panel is the only presentation there is and the
   submenu can stay unfolded in both states. The doubled class matches core's
   own specificity trick, which otherwise wins on padding and gap.
   Subordinate, not three more top-level links: smaller, indented, tied to its
   parent by a rule instead of sitting on the panel's 26px pitch. */
.na-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	position: static;
	width: auto;
	min-width: 0;
	height: auto;
	opacity: 1;
	/* `inherit`, never `visible`: core picks the overlay's first focusable by
	   computed visibility, so a hard `visible` here makes the submenu the only
	   focusable link while the panel is still shut and steals opening focus from
	   the first menu item. Inheriting keeps it hidden with the panel. */
	visibility: inherit;
	overflow: visible;
	border: none;
	border-left: 1px solid rgba(42, 42, 40, 0.16);
	background: transparent !important;
	margin-left: 2px;
	padding: 16px 0 0 20px;
	gap: 14px;
}
.na-header .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 18px;
	line-height: 1.25;
}
/* The header's calls to action, carried into the panel for the widths where the
   navbar cannot hold them. */
.na-menu__ctas {
	display: none;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid rgba(42, 42, 40, 0.12);
	flex-direction: column;
	gap: 12px;
}
.na-menu__cta {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 16px 24px;
	border-radius: 250px;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: -0.16px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.na-menu__cta--primary {
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
	font-weight: 500;
}
.na-menu__cta--primary:hover {
	background: var(--wp--preset--color--green-deep);
	color: var(--wp--preset--color--white);
}
.na-menu__cta--outline {
	background: transparent;
	color: var(--wp--preset--color--green-deep);
	border: 1px solid var(--wp--preset--color--green-deep);
}
.na-menu__cta--outline:hover {
	background: var(--wp--preset--color--green-deep);
	color: var(--wp--preset--color--white);
}
@media (max-width: 1023px) {
	.na-menu__ctas {
		display: flex;
	}
}
.na-header__menu-label {
	cursor: pointer;
}

@media (max-width: 781px) {
	/* Phones keep the full-screen sheet, still sliding in from the left. */
	.na-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close {
		width: 100%;
		box-shadow: none;
	}
	.na-header .wp-block-navigation__responsive-dialog {
		padding: 32px 24px 40px;
	}
	.na-header .wp-block-navigation__responsive-container-close {
		top: 26px;
		right: 20px;
	}
	.na-header .wp-block-navigation__responsive-container-content {
		margin-top: 48px;
	}
}
/* A phone held sideways has ~390px of height for eight links: tighten so the
   whole menu is reachable without scrolling the panel. */
@media (max-height: 520px) {
	.na-header .wp-block-navigation__responsive-dialog {
		padding: 24px 32px 32px;
	}
	.na-header .wp-block-navigation__responsive-container-close {
		top: 20px;
		right: 24px;
	}
	.na-header .wp-block-navigation__responsive-container-content {
		margin-top: 20px;
	}
	.na-header .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		gap: 6px;
	}
	.na-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		font-size: 18px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.na-header .wp-block-navigation__responsive-container,
	.na-header .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close {
		transition: none;
	}
}
.na-header__cta-link {
	font-size: 16px !important;
	line-height: 20px;
}
/* The text CTA grows a bubble on hover (client request, QA round 2026-08-20:
   both header CTAs were wanted as pills; the compromise is a pill that appears
   under the pointer). Constant padding paid back by negative margins, so the
   navbar's geometry never moves — hover only paints. */
.na-header__cta-link a {
	color: var(--wp--preset--color--green-deep);
	text-decoration: none;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: -0.16px;
	display: inline-block;
	padding: 15px 22px;
	margin: -15px -22px;
	border: 1px solid transparent;
	border-radius: 250px;
	white-space: nowrap;
}
.na-header .wp-block-button__link {
	font-size: 16px !important;
	line-height: 20px;
	letter-spacing: -0.16px;
	padding: 16px 23px;
}
.na-header__cta-link a:hover,
.na-header__cta-link a:focus-visible {
	color: var(--wp--preset--color--green-deep);
	border-color: var(--wp--preset--color--green-deep);
	background: var(--wp--preset--color--white);
}

.na-header .wp-block-button__link {
	white-space: nowrap;
}
@media (max-width: 1023px) {
	.na-header__cta-link {
		display: none;
	}
	.na-header__logo {
		width: 180px !important;
	}
}
@media (max-width: 600px) {
	.na-header .wp-block-buttons {
		display: none;
	}
}
@media (max-width: 480px) {
	.na-header__menu-label {
		display: none;
	}
	.na-header__logo {
		width: 150px !important;
	}
	.na-header .wp-block-button__link {
		font-size: 14px;
		padding: 12px 18px;
	}
	.na-header {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

/* ---- Buttons: smooth hover everywhere ---- */
.wp-block-button__link,
.na-header__cta-link a,
.na-footer a {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* ---- Hero (homepage) ---- */
body.home .na-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	background: transparent;
	/* the pattern's white preset carries !important, and the design runs the
	   hero photo up behind the nav */
	background-color: transparent !important;
}
.na-hero {
	position: relative;
	min-height: 690px;
	background: var(--wp--preset--color--white);
	overflow: hidden;
	display: flex;
	align-items: center;
}
.na-hero__photo {
	position: absolute;
	top: 100px;
	right: 0;
	bottom: 0;
	width: 52.8%;
	margin: 0;
	z-index: 1;
}
.na-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
	mask-image: linear-gradient(to right, transparent, #000 22%);
}
/* Homepage hero: the design's photo is the band's own full-bleed frame fill,
   with a white gradient wash (Rectangle 1) opaque to 40% and clear by 62.5%. */
body.home .na-hero__photo {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	max-width: none;
	overflow: hidden;
}
body.home .na-hero__photo img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	-webkit-mask-image: none;
	mask-image: none;
}
/* The white wash is baked into the band-derived asset (see
   scripts/build-hero-asset.mjs), so no gradient overlay here. Below the desktop
   layout the wash would read as a stray white edge, so the photo pans right. */
@media (max-width: 781px) {
	body.home .na-hero__photo img {
		object-position: 78% center;
	}
}
.na-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding: 180px 24px 120px;
	box-sizing: border-box;
}
.na-hero__content > * {
	margin-left: 0 !important;
}
@media (min-width: 1329px) {
	.na-hero__content {
		padding-left: 0;
		padding-right: 0;
	}
}
.na-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-weight: 500;
	margin-bottom: 12px;
}
.na-hero__title {
	font-size: clamp(40px, 4.45vw, 64px);
	line-height: 1.06;
	max-width: 620px;
	margin: 0 auto 26px 0 !important;
}
.na-hero__sub {
	max-width: 620px;
	line-height: 1.3;
	margin: 0 auto 0 0 !important;
}
/* Homepage hero content block: Figma 234:373 — 620 wide at x=80, y=183,
   stack gaps 27 / 27 / 35, so the band closes on the design's 690. */
body.home .na-hero {
	align-items: flex-start;
}
body.home .na-hero__content {
	padding-top: 183px;
	padding-bottom: 0;
	margin-top: 0 !important;
}
body.home .na-hero .na-eyebrow {
	font-size: 18px !important;
	line-height: 23px;
	margin: 0 0 27px !important;
}
body.home .na-hero__title {
	font-size: 64px;
	line-height: 60px;
	margin: 0 0 27px !important;
}
body.home .na-hero__sub {
	font-size: 18px !important;
	line-height: 23px;
	margin: 0 0 35px !important;
}
body.home .na-hero__ctas {
	margin-top: 0 !important;
}
body.home .na-hero__ctas .wp-block-button__link {
	font-size: 16px !important;
	line-height: 20px;
	letter-spacing: -0.16px;
	padding: 17.5px 26px;
}
/* The outline pill carries a 1px border, so its box loses it back in padding
   and both CTAs measure the design's 55px. */
body.home .na-hero__ctas .na-btn-outline .wp-block-button__link {
	padding: 16.5px 25px;
}
body.home main {
	padding-top: 0;
	margin-top: 0;
}
body.home main > .na-hero {
	margin-top: 0;
}
.na-serif {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
}
.na-btn-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--green-deep);
	border: 1px solid var(--wp--preset--color--green-deep);
	padding-top: 15px;
	padding-bottom: 15px;
}
.na-btn-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--teal);
	border-color: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
}
.na-hero__curve {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	max-width: none;
	height: 3.68vw;
	max-height: 53px;
	z-index: 3;
	display: block;
}
.na-hero__curve--deep {
	height: 6.53vw;
	max-height: 94px;
}
@media (max-width: 781px) {
	.na-hero {
		min-height: 0;
	}
	.na-hero__photo {
		position: relative;
		width: 100%;
		height: 320px;
		order: 2;
	}
	.na-hero__photo img {
		-webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%);
		mask-image: linear-gradient(to bottom, transparent, #000 18%);
	}
	.na-hero {
		flex-direction: column;
		align-items: stretch;
	}
	.na-hero__content {
		padding: 140px 24px 24px;
	}
	/* Homepage hero on a phone keeps the desktop idea — copy over the photo —
	   but the frame's left-to-right wash turns top-to-bottom, clearing before it
	   reaches the baby. */
	body.home .na-hero {
		min-height: 860px;
		display: block;
		position: relative;
	}
	body.home .na-hero__photo {
		position: absolute;
		inset: 0;
		width: auto;
		height: auto;
		order: 0;
	}
	body.home .na-hero__photo img {
		/* Client QA round 2 (2026-08-20): the baby's face was cropped away on
		   phones. Cover scales this wide band by height, so vertical panning
		   is a no-op; instead the image is oversized and pulled up, which
		   drops the face (at 79%/36% of the asset) below the white text wash
		   where it reads clearly. */
		height: 150%;
		margin-top: -8%;
		object-position: 80% 0;
		-webkit-mask-image: none;
		mask-image: none;
	}
	body.home .na-hero__photo::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom, #fff 0%, #fff 40%, rgba(255, 255, 255, 0.78) 55%, rgba(255, 255, 255, 0.35) 68%, rgba(255, 255, 255, 0) 82%);
		pointer-events: none;
	}
	body.home .na-hero__content {
		position: relative;
		z-index: 2;
		padding: 128px 24px 40px;
	}
	body.home .na-hero__title {
		font-size: clamp(38px, 11vw, 52px);
	}
	/* The copy's lower half sits over the photo now, so the outline CTA takes a
	   white fill rather than relying on the wash for contrast. */
	body.home .na-hero__ctas .na-btn-outline .wp-block-button__link {
		background: var(--wp--preset--color--white);
	}
}

/* ---- Hero light variant (all inner pages) ---- */
body:has(main .na-hero--light) .na-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	background: linear-gradient(to bottom, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 60%, rgba(255,255,255,0) 100%);
	background-color: transparent !important;
}
body:has(main .na-hero--light) main {
	padding-top: 0;
	margin-top: 0;
}
.na-hero--light {
	min-height: 737px;
	justify-content: center;
}
.na-hero--light .na-hero__photo {
	top: 0;
	left: 0;
	width: 100%;
	max-width: none;
	height: 100%;
}
.na-hero--light .na-hero__photo img {
	-webkit-mask-image: none;
	mask-image: none;
}
.na-hero--light .na-hero__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.62) 50%, rgba(255,255,255,0.85) 100%);
}
.na-hero--light .na-hero__content {
	max-width: 820px;
	text-align: center;
	padding: 150px 24px 150px;
}
.na-hero--light .na-hero__title {
	line-height: 0.94;
	max-width: 640px;
	margin: 0 auto 27px !important;
}
.na-hero--light .na-hero__sub {
	max-width: 780px;
	font-size: 18px !important;
	margin: 0 auto !important;
}
@media (max-width: 781px) {
	.na-hero--light {
		min-height: 0;
		flex-direction: row;
	}
	.na-hero--light .na-hero__photo {
		position: absolute;
		height: auto;
		order: 0;
	}
	.na-hero--light .na-hero__content {
		padding: 150px 24px 90px;
	}
}

/* ---- Pay & Benefits hero variant ---- */
body:has(main .na-hero--pb) .na-header {
	background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%);
}
.na-hero--pb {
	min-height: 653px;
}
.na-hero--pb .na-hero__content {
	max-width: 1060px;
	position: relative;
	top: -12px;
}
.na-hero--pb .na-hero__title {
	max-width: none;
	margin-bottom: 0 !important;
}
.na-hero--pb .na-hero__photo::after {
	background: linear-gradient(100deg, rgba(255,255,255,0.71) 0%, rgba(255,255,255,0.73) 50%, rgba(255,255,255,0.79) 100%);
}
@media (max-width: 781px) {
	.na-hero--pb {
		min-height: 0;
	}
	.na-hero--pb .na-hero__title br {
		display: none;
	}
}

/* ---- Requirements & Disqualifications hero variant ---- */
body:has(main .na-hero--rq) .na-header {
	background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.25) 60%, rgba(255,255,255,0) 100%);
}
.na-hero--rq {
	min-height: 653px;
}
.na-hero--rq .na-hero__content {
	max-width: 1060px;
	position: relative;
	top: -12px;
}
.na-hero--rq .na-hero__eyebrow {
	font-size: 18px;
	margin-bottom: 27px;
}
.na-hero--rq .na-hero__title {
	max-width: none;
	margin: 0 auto !important;
}
.na-hero--rq .na-hero__photo::after {
	background: linear-gradient(100deg, rgba(255,255,255,0.71) 0%, rgba(255,255,255,0.73) 50%, rgba(255,255,255,0.79) 100%);
}
@media (max-width: 781px) {
	.na-hero--rq {
		min-height: 0;
	}
	.na-hero--rq .na-hero__title br {
		display: none;
	}
}

/* ---- Intended Parents hero variant ---- */
/* The design's nav sits on the flat hero wash: no extra header gradient. */
body:has(main .na-hero--ip) .na-header {
	background: transparent;
}
.na-hero--ip {
	min-height: 812px;
}
.na-hero--ip .na-hero__content {
	max-width: 828px;
	padding: 191px 24px 205px;
	margin-top: 0 !important;
}
.na-hero--ip .na-hero__eyebrow {
	font-size: 18px;
	line-height: 23px;
	margin: 0 auto 27px !important;
}
.na-hero--ip .na-hero__title {
	font-size: 64px;
	line-height: 0.9375;
	max-width: none;
	margin: 0 auto 27px !important;
}
.na-hero--ip .na-hero__sub {
	max-width: none;
	line-height: 1.28;
	margin: 0 auto 35px !important;
}
.na-hero--ip .na-hero__cta .wp-block-button__link {
	padding: 17.5px 25px;
	line-height: 20px;
}
/* Flat veil: the design's Rectangle 1 measures a uniform 0.648 white wash. */
.na-hero--ip .na-hero__photo::after {
	background: rgba(255, 255, 255, 0.648);
}
@media (max-width: 1099px) {
	.na-hero--ip .na-hero__title {
		font-size: clamp(36px, 5.8vw, 64px);
	}
}
@media (max-width: 781px) {
	.na-hero--ip {
		min-height: 0;
	}
	.na-hero--ip .na-hero__content {
		padding: 132px 24px 64px;
	}
	/* Markup keeps a space before each <br> so the lines still separate here. */
	.na-hero--ip .na-hero__title br {
		display: none;
	}
}

/* ---- Surrogates hero variant ---- */
body:has(main .na-hero--sur) .na-header {
	background: transparent;
}
.na-hero--sur {
	min-height: 699px;
}
.na-hero--sur .na-hero__content {
	max-width: 828px;
	padding: 201px 24px 202px;
	margin-top: 0 !important;
}
.na-hero--sur .na-hero__eyebrow {
	font-size: 18px;
	line-height: 23px;
	margin: 0 auto 27px !important;
}
.na-hero--sur .na-hero__title {
	font-size: 64px;
	line-height: 0.9375;
	max-width: none;
	margin: 0 auto 27px !important;
}
.na-hero--sur .na-hero__sub {
	max-width: none;
	line-height: 1.28;
	margin: 0 auto 35px !important;
}
.na-hero--sur .na-hero__cta .wp-block-button__link {
	padding: 17.5px 25px;
	line-height: 20px;
}
/* Same uniform veil the IP hero measures off the design's Rectangle 1. */
.na-hero--sur .na-hero__photo::after {
	background: rgba(255, 255, 255, 0.648);
}
/* Hero video: autoplaying, muted, looped cover behind the veil. The still
   stays in the markup as the reduced-motion and small-screen fallback. */
.na-hero--sur .na-hero__photo--video {
	margin: 0;
}
.na-hero--sur .na-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.na-hero--sur .na-hero__photo--video .na-hero__still {
	display: none;
}
@media (max-width: 781px), (prefers-reduced-motion: reduce) {
	.na-hero--sur .na-hero__video {
		display: none;
	}
	.na-hero--sur .na-hero__photo--video .na-hero__still {
		display: block;
	}
}
@media (max-width: 1099px) {
	.na-hero--sur .na-hero__title {
		font-size: clamp(36px, 5.8vw, 64px);
	}
}
@media (max-width: 781px) {
	.na-hero--sur {
		min-height: 0;
	}
	.na-hero--sur .na-hero__content {
		padding: 132px 24px 64px;
	}
	/* The stacked layout puts the cream panel far below the hero, so the
	   curve's split fill makes no sense here: the whole curve goes white and
	   the second path (the cream half) disappears, along with the 1px seam
	   its edge painted. */
	.na-hero--sur .na-hero__curve path {
		clip-path: none;
	}
	.na-hero--sur .na-hero__curve path + path {
		display: none;
	}
}

/* ---- Pay & Benefits: At a Glance ---- */
.na-glance__grid {
	display: grid;
	grid-template-columns: 575px 1fr;
	gap: 70px;
	align-items: start;
}
.na-glance__grid > * {
	margin-block-start: 0;
}
.na-glance__p {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	color: var(--wp--preset--color--gray-body);
	margin: 0;
}
.na-glance__p + .na-glance__p {
	margin-top: 23px;
}
.na-glance__h {
	font-size: 32px;
	line-height: 0.9;
	font-weight: 700;
	max-width: 560px;
	margin: 0 0 33px !important;
}
ul.na-check {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.na-check li {
	position: relative;
	padding-left: 50px;
	min-height: 31px;
	display: flex;
	align-items: center;
	font-size: 19px;
	font-weight: 500;
	line-height: 24px;
	color: #000;
}
ul.na-check li + li {
	margin-top: 20px;
}
ul.na-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 31px;
	height: 31px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 31' fill='none'%3E%3Ccircle cx='15.5' cy='15.5' r='14.5' stroke='%2325A0A9' stroke-width='2'/%3E%3Cpath d='M10.2 15.6l3.9 3.9 7.6-8.6' stroke='%2325A0A9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (max-width: 900px) {
	.na-glance__grid {
		grid-template-columns: 1fr;
		gap: 40px;
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* ---- Pay & Benefits: text + bleeding-photo split ---- */
.na-split__grid {
	display: grid;
	grid-template-columns: 640px minmax(0, 1fr);
	gap: 38px;
	align-items: start;
}
.na-split__grid > * {
	margin-block-start: 0;
}
.na-split__h {
	font-size: clamp(34px, 3.4722vw, 50px);
	line-height: 0.9;
	font-weight: 700;
	margin: 0 0 33px !important;
}
.na-split__p {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	color: var(--wp--preset--color--gray-body);
	max-width: 622px;
	margin: 0;
}
.na-split__p + .na-split__p {
	margin-top: 23px;
}
.na-split__media {
	margin: 44px 0 0 !important;
	margin-right: min(0px, calc((1280px - 100vw) / 2)) !important;
	border-radius: 28px 28px 0 0;
	overflow: hidden;
}
.na-split__media img {
	width: 100%;
	height: 478px;
	object-fit: cover;
	object-position: left center;
	display: block;
}
@media (max-width: 1328px) {
	.na-split__grid {
		padding-left: 24px;
	}
}
@media (min-width: 901px) and (max-width: 1339px) {
	.na-split__grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
	.na-glance__grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		padding-left: 24px;
	}
	.na-split__media img,
	.na-split__media--benefits img,
	.na-split__media--support img,
	.na-split__media--difference img {
		height: auto;
	}
	.na-split__media img {
		aspect-ratio: 756 / 478;
	}
	.na-split__media--benefits img {
		aspect-ratio: 756 / 399;
	}
	.na-split__media--support img {
		aspect-ratio: 756 / 337;
	}
	.na-split__media--difference img {
		aspect-ratio: 734 / 515;
	}
	.na-split__media--difference {
		margin-top: 44px !important;
		margin-left: 0 !important;
	}
	.na-split__note {
		min-height: 0;
	}
	.na-paid__body {
		margin-left: 0 !important;
		margin-top: 45px !important;
	}
	.na-faq__cols {
		padding-left: 24px;
		padding-right: 24px;
	}
}
@media (max-width: 900px) {
	.na-split__grid {
		grid-template-columns: 1fr;
		gap: 12px;
		padding-right: 24px;
	}
	.na-split__media {
		margin-right: 0 !important;
		border-radius: 28px;
	}
	.na-split__media img {
		height: auto;
		aspect-ratio: 756 / 478;
	}
}

/* ---- Pay & Benefits: benefits package band ---- */
.na-split__lead {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	color: var(--wp--preset--color--gray-body);
	max-width: 622px;
	margin: 0 0 33px !important;
}
ul.na-check--top li {
	display: block;
	min-height: 31px;
	line-height: 23px;
	font-size: 18px;
	padding-top: 4px;
	box-sizing: border-box;
}
ul.na-check--top li::before {
	top: 0;
	transform: none;
}
.na-split__side {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.na-split__media--benefits {
	border-radius: 28px;
}
.na-split__media--benefits img {
	height: 399px;
}
@media (max-width: 900px) {
	.na-split__media--benefits img {
		height: auto;
		aspect-ratio: 756 / 399;
	}
}
.na-split__note {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sage-light, #B9CDB2);
	border-right: 0;
	border-radius: 28px 0 0 28px;
	box-shadow: 0 0 46px rgba(0, 0, 0, 0.05);
	padding: 20px;
	margin: 42px 0 0 !important;
	margin-right: min(0px, calc((1280px - 100vw) / 2)) !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 305px;
	box-sizing: border-box;
}
.na-split__note .na-split__p {
	max-width: none;
}
@media (max-width: 900px) {
	.na-split__note {
		margin-right: 0 !important;
		min-height: 0;
		border-radius: 28px;
		border-right: 1px solid var(--wp--preset--color--sage-light);
	}
}

/* ---- Pay & Benefits: support band ---- */
ul.na-bullets {
	list-style: disc;
	margin: 0;
	padding-left: 28px;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}
ul.na-bullets li::marker {
	font-size: 14px;
}
ul.na-bullets li + li {
	margin-top: 11px;
}
.na-split__note--cream {
	background: var(--wp--preset--color--cream-bg);
}
.na-split__media--support {
	margin-top: 0 !important;
}
.na-split__media--support img {
	height: 337px;
}
.na-split__note--support {
	margin-top: 15px !important;
	min-height: 201px;
}
@media (max-width: 900px) {
	.na-split__media--support img {
		height: auto;
		aspect-ratio: 756 / 337;
	}
}

/* ---- Pay & Benefits: final CTA mint wash over corner photos ---- */
.na-final--pb::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg,
		rgba(238, 249, 235, 0.25) 0%,
		rgba(238, 249, 235, 1) 49.7%,
		rgba(238, 249, 235, 0) 100%);
}

/* ---- Pay & Benefits: FAQ accordion ---- */
.na-faq__head {
	text-align: center;
	margin-bottom: 72px;
}
.na-faq__head .na-split__eyebrow {
	text-align: center;
}
.na-faq__h {
	font-size: clamp(34px, 3.4722vw, 50px);
	line-height: 0.9;
	font-weight: 700;
	margin: 0 !important;
}
.na-faq__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}
.na-faq__cols > * {
	margin-block-start: 0;
}
.na-faq__item {
	border-bottom: 1.5px solid var(--wp--preset--color--sage-light);
	padding-bottom: 24px;
}
.na-faq__item + .na-faq__item {
	margin-top: 26px;
}
.na-faq__q {
	margin: 0 !important;
	font-size: 21px;
	line-height: 41px;
}
.na-faq__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}
.na-faq__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 4px;
	border-radius: 4px;
}
.na-faq__qtext {
	font-size: 21px;
	line-height: 1.2;
}
.na-faq__icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wp--preset--color--mint-bg);
	color: var(--wp--preset--color--teal);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: rotate(90deg);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease, color 0.2s ease;
}
.na-faq__icon svg {
	width: 22px;
	height: 22px;
	display: block;
}
.na-faq__toggle:hover .na-faq__icon {
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
}
.na-faq__item.is-open .na-faq__icon {
	transform: rotate(-90deg);
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
}
.na-faq__body {
	margin-block-start: 0 !important;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.na-faq__inner {
	min-height: 0;
	overflow: hidden;
}
.na-faq__item.is-open .na-faq__body {
	grid-template-rows: 1fr;
}
.na-faq__a {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.28;
	color: var(--wp--preset--color--gray-body);
	margin: 24px 0 11px !important;
}
/* No-JS fallback: answers stay visible */
.no-js .na-faq__item .na-faq__a {
	display: block;
}
@media (prefers-reduced-motion: reduce) {
	.na-faq__icon,
	.na-faq__body {
		transition: none;
	}
}
@media (max-width: 900px) {
	.na-faq__cols {
		grid-template-columns: 1fr;
		gap: 26px;
		padding-left: 24px;
		padding-right: 24px;
	}
	.na-faq__qtext {
		font-size: 19px;
	}
	.na-faq__head {
		padding-inline: 24px;
	}
	.na-faq__h {
		font-size: 35px;
	}
	.na-ctaband__title,
	.na-ctaband__sub {
		padding-inline: 24px;
	}
}

/* ---- Pay & Benefits: difference band ---- */
.na-split__eyebrow {
	color: var(--wp--preset--color--green-deep);
	font-size: 18px;
	line-height: 1.28;
	margin: 0 0 21px !important;
}
.na-split--difference .na-split__p {
	max-width: 648px;
}
.na-split__media--difference {
	margin-top: 135px !important;
	margin-left: 22px !important;
	border-radius: 28px 28px 0 0;
}
.na-split__media--difference img {
	height: 515px;
}
@media (max-width: 900px) {
	.na-split__media--difference {
		margin-top: 12px !important;
		margin-left: 0 !important;
		border-radius: 28px;
	}
	.na-split__media--difference img {
		height: auto;
		aspect-ratio: 734 / 515;
	}
}

/* ---- Pay & Benefits: how/when paid band ---- */
.na-paid__body {
	margin-top: 78px !important;
	margin-left: 40px !important;
}
.na-paid__body .na-split__p {
	max-width: 562px;
	color: var(--wp--preset--color--ink);
}
ul.na-bullets--indent {
	margin-left: 24px;
	margin-top: 23px;
}
.na-split__p--narrow {
	max-width: 602px;
}
@media (max-width: 900px) {
	.na-paid__body {
		margin-top: 23px !important;
		margin-left: 0 !important;
	}
}

/* ---- Pay & Benefits: curious CTA band ---- */
.na-ctaband--pb .na-ctaband__rule {
	max-width: 392px;
}
.na-ctaband__title {
	font-size: 36px;
	line-height: 0.9;
	font-weight: 700;
	margin: 0 auto !important;
	max-width: 700px;
}
.na-ctaband__sub {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.3;
	color: var(--wp--preset--color--gray-body);
	max-width: 700px;
	margin: 33px auto 0 !important;
}

/* ---- Shared section type ---- */
.na-h2 {
	font-size: clamp(34px, 3.4722vw, 50px);
	line-height: 1.1;
	margin: 6px 0 0;
}
.na-lead {
	margin-top: 16px;
}

.na-section > .wp-block-columns {
	box-sizing: border-box;
}
@media (max-width: 1328px) {
	.na-section > .wp-block-columns {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* ---- Homepage type scale (Figma 156:194) ----
   Core's font-size presets win over the theme's on colliding slugs, so the
   homepage states its own sizes: eyebrows 18/500, leads 18/500 serif. */
body.home .na-eyebrow {
	font-size: 18px !important;
	line-height: 23px;
}
body.home .na-lead {
	font-size: 18px !important;
	line-height: 23px;
	font-weight: 500;
}
body.home .na-h2 {
	font-size: clamp(34px, 3.4722vw, 50px);
	/* the frame's 89.318% leading, kept as a ratio so it survives the clamp */
	line-height: 0.89318em;
}
body.home .wp-block-button__link {
	font-size: 16px !important;
	line-height: 20px;
	letter-spacing: -0.16px;
}

/* ---- Why Choose Us (feature tabs) ---- */
.na-why__head {
	max-width: 1280px;
	width: 100%;
	margin: 0 auto !important;
	padding: 0 24px;
	box-sizing: border-box;
}
.na-why__head > * {
	max-width: 620px;
}
@media (min-width: 1329px) {
	.na-why__head {
		padding-left: 0;
		padding-right: 0;
	}
}
/* Head stack: Figma 216:3 — eyebrow 57, h2 101 (50/44.66), lead 179. */
body.home .na-why .na-h2 {
	margin: 21px 0 0;
}
body.home .na-why .na-lead {
	margin-top: 33px;
}
.na-why__card {
	position: relative;
	max-width: 636px;
}
.na-why__img img {
	border-radius: 28px;
	width: 100%;
	height: auto;
	display: block;
}
.na-why__img {
	margin: 0;
}
.na-why__nav {
	position: absolute;
	top: 5.64%;
	right: 4.87%;
	display: flex;
	gap: 8px;
	margin: 0 !important;
}
.na-why__nav button {
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 8px;
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
	transition: transform 0.25s ease, background-color 0.25s ease;
}
.na-why__nav button:hover {
	transform: scale(1.06);
}
.na-why__nav button:focus-visible {
	outline: 2px solid var(--wp--preset--color--green-deep);
	outline-offset: 2px;
}
.na-why__prev {
	background: var(--wp--preset--color--white);
}
.na-why__next {
	background: var(--wp--preset--color--teal);
}
/* Tab rhythm is the design's own: titles 26/23.2 italic, the rule 49px under a
   title, its body 23px under the rule, 45px to the next title (49 when the tab
   is closed). Figma 216:19-25. */
.na-tabs__item {
	padding: 0;
	margin: 0 0 49px;
	position: relative;
}
.na-tabs__item:last-child {
	margin-bottom: 0;
}
.na-tabs__item.is-active {
	margin-bottom: 45px;
}
.na-tabs__title {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-style: italic;
	font-size: 26px;
	line-height: 0.89318em;
	margin: 0;
	color: #8d8d8d;
	cursor: pointer;
	transition: color 0.35s ease;
}
.na-tabs__item.is-active .na-tabs__title {
	color: var(--wp--preset--color--ink);
}
.na-tabs__title:focus-visible {
	outline: 2px solid var(--wp--preset--color--green-deep);
	outline-offset: 3px;
}
.na-tabs__body {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 16px;
	line-height: 21px;
	max-width: 567px;
	overflow: hidden;
	max-height: 0;
	margin: 0;
	transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), margin 0.5s ease;
}
.na-tabs__item.is-active .na-tabs__body {
	margin-top: 49px;
}
/* The active item's track: white, with the teal fill running along it. There is
   no divider under the other titles — the timeline is the only rule here. */
.na-tabs__item.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	top: 47.5px;
	width: 609px;
	max-width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--white);
}
/* The rule under the active title is a timeline: it fills across the item and
   hands over to the next tab (na-tabs.js). The frame catches it at 235 of 609,
   which is where a frozen capture holds it. */
.na-tabs__bar {
	position: absolute;
	/* WP's layout CSS puts a block-gap margin on every child, absolute ones
	   included, which pushed the fill 24px below its track. */
	margin: 0 !important;
	left: 0;
	top: 47.5px;
	width: 0;
	max-width: 609px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--teal);
	z-index: 1;
	display: none;
}
.na-tabs__item.is-active .na-tabs__bar {
	display: block;
}
.na-no-motion .na-tabs__item.is-active .na-tabs__bar {
	width: 235px;
	transition: none;
}
@media (max-width: 781px) {
	.na-why__cols {
		gap: 24px;
	}
	.na-tabs__title {
		font-size: 21px;
	}
	.na-tabs__item.is-active::after,
	.na-tabs__item.is-active .na-tabs__bar {
		top: 40px;
	}
}
/* A visitor who asked for reduced motion gets the design's static rule. */
@media (prefers-reduced-motion: reduce) {
	.na-tabs__item.is-active .na-tabs__bar {
		width: 235px;
		transition: none !important;
	}
}

/* ---- CTA band ---- */
.na-ctaband__row {
	gap: 24px;
}
/* Both pills carry the same box: sized to the copy they happen to hold, one
   ends up a few px shorter than the other and the pair reads as a mistake. */
/* An intrinsically sized grid with two 1fr tracks gives both pills the width of
   the wider one's content, so neither wraps and they still match. */
.na-ctaband .na-ctaband__pills {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	width: fit-content;
	max-width: 100%;
}
.na-ctaband .na-pill {
	justify-content: space-between;
}
.na-ctaband__rule {
	flex: 1 1 auto;
	max-width: 242px;
	height: 1px;
	background: #609c95;
	display: block;
}
/* Figma 156:270 / 416:507 — the pill's arrow sits 12px off its right edge and
   the label block 30px off its left, around a 48px button: 81px tall. */
.na-pill {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	background: var(--wp--preset--color--white);
	border-radius: 250px;
	padding: 16.5px 12px 16.5px 30px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.na-pill:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(42, 42, 40, 0.10);
}
.na-pill__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.na-pill__text strong {
	font-weight: 500;
	font-size: 20px;
	line-height: 20px;
	letter-spacing: -0.16px;
}
.na-pill__text em {
	font-style: normal;
	font-weight: 300;
	font-size: 17px;
	line-height: 20px;
	letter-spacing: -0.16px;
}
/* Titled variant (416:490): 36/32.15 headline, pills 52px under it. */
.na-ctaband--titled h2 {
	line-height: 0.89318em;
}
.na-ctaband--titled .na-ctaband__row {
	margin-top: 52px !important;
}
/* Surrogates mid-page variant (416:368): pills 37px under the lead. */
.na-ctaband--sur .na-ctaband__row {
	margin-top: 37px !important;
}
/* Archivo sets ~1.5% wider than the frame's GT America at 36px bold. */
.na-ctaband--sur .na-ctaband__title {
	letter-spacing: -0.0075em;
}
.na-pill__btn {
	width: 47px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	transition: transform 0.3s ease;
}
.na-pill:hover .na-pill__btn {
	transform: translateX(3px);
}
@media (max-width: 900px) {
	.na-ctaband__rule {
		display: none;
	}
	.na-ctaband__row {
		padding: 0 24px;
	}
	/* Two equal pills do not fit a phone: they stack, still equal. */
	.na-ctaband .na-ctaband__pills {
		grid-template-columns: 1fr;
		width: 100%;
		gap: 16px;
	}
}

/* ---- Generic 1280 container inside full sections ---- */
.na-container {
	max-width: 1280px;
	width: 100%;
	margin: 0 auto !important;
	padding: 0 24px;
	box-sizing: border-box;
}
@media (min-width: 1329px) {
	.na-container {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ---- IP promo (3 link cards) ---- */
.na-ipromo .na-h2 {
	max-width: 988px;
}
.na-ipromo__body {
	max-width: 1078px;
	margin-top: 33px !important;
	font-weight: 500;
	font-size: 18px !important;
	line-height: 23px;
}
/* Figma 156:316 — the closing pill measures 184x53 around 16/500 type. */
body.home .na-ipromo .wp-block-button__link {
	font-weight: 500;
	padding: 16.5px 25px;
}
.na-cardlinks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 39px;
	margin-top: 61px;
}
.na-cardlink {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	display: block;
}
.na-cardlink__media {
	position: relative;
	display: block;
	border-radius: 28px;
	overflow: hidden;
}
.na-cardlink__media > img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.na-cardlink:hover .na-cardlink__media > img {
	transform: scale(1.04);
}
.na-cardlink__btn {
	position: absolute;
	right: 3.2%;
	bottom: 5%;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	display: grid;
	place-items: center;
	box-shadow: 0 2px 8px rgba(42, 42, 40, 0.10);
	transition: box-shadow 0.25s ease;
}
/* Hover deepens the button's shadow. It used to slide diagonally while the
   photo behind it scaled, which read as the circle smearing. */
.na-cardlink:hover .na-cardlink__btn {
	box-shadow: 0 6px 18px rgba(42, 42, 40, 0.22);
}
.na-cardlink__label {
	display: block;
	margin-top: 27px;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-style: italic;
	font-size: 28px;
	line-height: 0.89318em;
}
.na-ipromo__rule {
	flex: 1 1 auto;
	max-width: 526px;
	height: 1px;
	background: #d2d2d2;
	display: block;
}
@media (max-width: 900px) {
	.na-cardlinks {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.na-cardlink__label {
		font-size: 22px;
	}
	.na-ipromo__rule {
		display: none;
	}
}

/* ---- Surrogate promo band ---- */
/* Figma 156:321: text column 620 at x=80, photo 635 at x=725, so the columns
   sit 25px apart. The headline here runs on a 107% leading, not the 89.3% the
   rest of the page uses. */
.na-spromo__body {
	font-weight: 500;
	font-size: 18px !important;
	line-height: 23px;
	margin-top: 33px !important;
	max-width: 620px;
}
/* The headline's own box is 635 wide in the frame — 15px past its column, into
   the gutter — which is what keeps it on two lines. */
body.home .na-spromo .na-h2 {
	line-height: 1.07em;
	margin-top: 21px;
	width: 635px;
	max-width: none;
}
body.home .na-spromo .na-btn-outline .wp-block-button__link {
	padding: 16.5px 25px;
}
.na-spromo__cols {
	gap: 25px;
}
.na-spromo__cols > .wp-block-column:first-child {
	flex-basis: 620px;
	flex-grow: 0;
}
.na-spromo__cols > .wp-block-column:last-child {
	flex-basis: 635px;
	flex-grow: 0;
}
body.home .na-spromo .wp-block-button__link {
	padding: 17.5px 26px;
}
.na-spromo__img img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---- Process flow (Two Journeys. One Team.) ----
   Every number here is read off Figma 156:336: cards 438 wide at x=184/828,
   rows 283 and 492, the match pill at 691, then five 742x166 cards on a 190px
   pitch. The rail and its connectors are dashed, not solid. */
.na-process__sub {
	max-width: 537px;
	margin-left: auto !important;
	margin-right: auto !important;
	font-weight: 500;
	font-size: 18px !important;
	line-height: 23px;
	margin-top: 32px !important;
}
body.home .na-process .na-h2 {
	margin-top: 21px;
}
.na-flow {
	position: relative;
	width: 1092px;
	max-width: 100%;
	margin: 61px auto 0;
	padding: 0 0 0 10px;
}
.na-flow,
.na-flow * {
	box-sizing: border-box;
}
/* One dashed run from the opening dot to the last step, sitting under every
   card so it reads as a single spine through the gaps. */
.na-flow__rail {
	position: absolute;
	left: 50%;
	top: -10px;
	bottom: 0;
	width: 1px;
	z-index: 0;
	background: repeating-linear-gradient(to bottom, #c0c0c0 0 6px, transparent 6px 11px);
	transform: translateX(-0.5px);
}
.na-flow__rail::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal);
}
.na-flow__row {
	display: grid;
	grid-template-columns: 438px 206px 438px;
	align-items: start;
	gap: 0;
	margin-bottom: 27px;
	position: relative;
}
.na-flow__num {
	display: flex;
	justify-content: center;
	padding-top: 77px;
	position: relative;
	z-index: 2;
}
.na-flow__num span {
	width: 37px;
	height: 37px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	font-size: 20px;
	display: grid;
	place-items: center;
}
/* One dashed run from card edge to card edge, passing behind the number. */
.na-flow__row::before {
	content: "";
	position: absolute;
	top: 95px;
	left: 438px;
	width: 206px;
	height: 1px;
	background: repeating-linear-gradient(to right, var(--wp--preset--color--teal) 0 6px, transparent 6px 11px);
	z-index: 1;
}
.na-flowcard {
	background: var(--wp--preset--color--white);
	border-radius: 10px;
	box-shadow: 0 0 46px rgba(0, 0, 0, 0.05);
	padding: 18px 19px 21px 41px;
	position: relative;
	z-index: 2;
}
/* The frame's cards carry a trailing empty line under the copy; the height it
   buys is real, the empty paragraph is not, so it lives as a min-height. */
.na-flow__row .na-flowcard {
	min-height: 182px;
}
.na-flow__row + .na-flow__row .na-flowcard {
	min-height: 180px;
}
/* The match pill sits 19px under the second row, so that row drops the 27px
   the first one carries. */
.na-flow__row + .na-flow__row {
	margin-bottom: 0;
}
/* Cards straddle the rail asymmetrically in the frame: the rail and the step
   numbers sit on the page centre, the columns do not. */
.na-flow__num span {
	position: relative;
	left: -6px;
}
.na-flowcard h3,
.na-flowwide h3 {
	font-size: 20px;
	line-height: 0.89318em;
	font-weight: 700;
	margin: 13px 0 0;
	color: var(--wp--preset--color--ink);
}
.na-flowcard p,
.na-flowwide p {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 15px;
	line-height: 19.95px;
	margin: 16px 0 0;
	color: var(--wp--preset--color--ink);
}
.na-flowcard__badge {
	display: block;
	text-align: center;
	border-radius: 46px;
	padding: 10px 12px;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-style: italic;
	font-size: 18px;
	line-height: 16.07px;
	color: var(--wp--preset--color--ink);
}
.na-badge--ip { background: #d7efce; }
.na-badge--s { background: #f9efe2; }
.na-badge--both { background: var(--wp--preset--color--teal); color: var(--wp--preset--color--white); }
.na-flow__match {
	position: relative;
	z-index: 2;
	width: 322px;
	height: 71px;
	box-sizing: border-box;
	margin: 19px auto 22px;
	left: -5px;
	border-radius: 10px;
	/* The fill's raw stops read #f5fdff to teal, but its transform lands the
	   rendered pill as a soft teal that only shades from bottom-left to
	   top-right — sampled off the frame, not read off the stops. */
	background: linear-gradient(to top right, #8bced3, #47afb7);
	color: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	gap: 35px;
	padding: 13px 14px;
}
.na-flow__matchnum {
	width: 37px;
	height: 37px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--teal);
	font-weight: 700;
	font-size: 20px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}
.na-flow__matchtitle {
	font-weight: 700;
	font-size: 24px;
	line-height: 21.4px;
}
.na-flowwide {
	position: relative;
	z-index: 2;
	width: 742px;
	max-width: 100%;
	margin: 0 auto 24px;
	left: -4px;
	box-sizing: border-box;
	background: var(--wp--preset--color--white);
	border-radius: 10px;
	box-shadow: 0 0 46px rgba(0, 0, 0, 0.05);
	padding: 18px 41px 36px;
}
/* The step name sat 13px under the number circle, which read as touching it.
   The air comes out of the card's generous bottom padding, so the card keeps
   the frame's 166. */
.na-flowwide h3 {
	margin-top: 22px;
}
.na-flowwide:last-child {
	margin-bottom: 0;
}
.na-flowwide__num {
	position: absolute;
	left: 41px;
	top: 18px;
	width: 37px;
	height: 37px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	font-size: 20px;
	display: grid;
	place-items: center;
}
.na-flowwide .na-flowcard__badge {
	width: 412px;
	max-width: calc(100% - 60px);
	margin: 0 auto;
}
/* ---- Process flow on phones ----
   There is no mobile frame for this diagram. Two columns astride a rail cannot
   survive 390px, so the pairing is carried vertically instead: each step's
   number leads, then its two cards, then the next step. The rail and its
   connectors are what the two columns needed; without columns they go. */
@media (max-width: 900px) {
	.na-flow {
		width: 100%;
		max-width: 100%;
		padding: 0 24px;
		box-sizing: border-box;
	}
	.na-flow__row {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		margin-bottom: 32px;
	}
	.na-flow__row + .na-flow__row {
		margin-bottom: 32px;
	}
	.na-flow__num {
		order: -1;
		padding: 0;
		justify-content: center;
	}
	.na-flow__num span {
		left: 0;
	}
	.na-flow__row::before,
	.na-flow__row::after {
		display: none;
	}
	.na-flow__rail {
		display: none;
	}
	.na-flowcard {
		width: auto;
		min-height: 0 !important;
		margin-bottom: 0;
		padding: 18px 20px 20px;
	}
	.na-flow__match {
		width: 100%;
		max-width: 322px;
		left: 0;
		margin: 0 auto 32px;
	}
	.na-flowwide {
		width: 100%;
		max-width: 100%;
		left: 0;
		padding: 18px 20px 22px;
	}
	/* The number keeps the desktop card's 41px inset while the card itself drops
	   to 20px of padding, which pushed the circle into the track badge beside it.
	   Line it up with the padding the rest of the card uses. */
	.na-flowwide__num {
		left: 20px;
	}
	/* The number and the track badge share the top line rather than stacking,
	   so a phone card keeps the desktop card's reading order. */
	.na-flowwide .na-flowcard__badge {
		width: auto;
		max-width: none;
		margin: 0 0 0 53px;
		text-align: center;
	}
	.na-flowwide h3 {
		margin-top: 16px;
	}
	.na-flow__matchtitle {
		font-size: 20px;
	}
}

/* ---- About band ----
   Figma 156:374: copy 620 wide on a 33px rhythm, photo 734x468 anchored at
   x=781 so it runs 75px past the frame and is cut by the band. */
.na-about__p {
	font-weight: 500;
	font-size: 18px !important;
	line-height: 23px;
	max-width: 620px;
}
.na-about__p + .na-about__p,
.na-about .na-h2 + .na-about__p,
.na-about .wp-block-buttons {
	margin-top: 33px !important;
}
/* Pin the photo to the top of its column: centring it makes every copy edit
   move the artwork. The frame puts it 60px below the band's inner edge. */
.na-about .wp-block-column:last-child {
	align-self: flex-start;
}
.na-about__img {
	margin-top: 60px !important;
}
body.home .na-about .wp-block-button__link {
	padding: 17.5px 26px;
}
.na-about__band {
	overflow: hidden;
}
.na-about__img img {
	width: 734px;
	max-width: none;
	height: auto;
	display: block;
}

/* ---- Team ---- */
.na-team__img img {
	width: 100%;
	height: auto;
	display: block;
}
/* Figma 156:381 — name 28/25, role 20/26 eight under it, bio 14/18 twenty under
   the role. */
.na-team__name {
	font-size: 28px;
	line-height: 0.89318em;
	font-weight: 700;
	margin: 33px 0 0;
}
.na-team__role {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 20px !important;
	line-height: 26px;
	color: var(--wp--preset--color--green-deep);
	margin: 8px 0 0;
}
.na-team__bio {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	margin: 20px 0 0;
}

/* ---- Consultation band ---- */
.na-consult {
	position: relative;
}
/* Figma 156:399 — 1281 card, copy column 557 at 80px in, photo 429x363 with
   113px to the card's right edge, both columns centred on the card. */
.na-consult__band {
	background: var(--wp--preset--color--mint-bg);
	border-radius: 28px;
	max-width: 1281px;
	margin: 0 auto !important;
	padding: 61px 113px 62px 80px;
	box-sizing: border-box;
}
.na-consult__body {
	font-weight: 500;
	font-size: 18px !important;
	line-height: 23px;
	max-width: 541px;
	margin-top: 56px !important;
}
.na-consult .na-h2 {
	max-width: 557px;
}
.na-consult__cols {
	gap: 102px;
}
.na-consult__cols > .wp-block-column:first-child {
	flex-basis: 557px;
	flex-grow: 0;
}
.na-consult__cols > .wp-block-column:last-child {
	flex-basis: 429px;
	flex-grow: 0;
}
body.home .na-consult .wp-block-button__link {
	padding: 17.5px 26px;
}
.na-consult__img img {
	width: 100%;
	height: auto;
	display: block;
}
/* Full-bleed chrome inside constrained sections: the layout clamps children to
   contentSize (1440), which past the design width leaves the curve and the
   coloured bands sitting in a 1440 box with the page colour beside them. */
.na-consult__curve {
	display: block;
	width: 100%;
	max-width: none;
	height: 53px;
	margin-top: 67px;
}
.na-spromo__band,
.na-about__band {
	max-width: none !important;
	width: 100%;
}
/* The bands bleed edge to edge, so their content needs the page's own gutters
   once the viewport drops under the design width. */
@media (max-width: 1328px) {
	.na-spromo__cols,
	.na-about__band .wp-block-columns {
		padding-left: 24px;
		padding-right: 24px;
		box-sizing: border-box;
	}
}
@media (max-width: 900px) {
	.na-consult__band {
		padding: 32px 24px;
		margin-left: 24px !important;
		margin-right: 24px !important;
	}
	.na-consult__body {
		margin-top: 24px !important;
	}
}

/* ---- Testimonials ----
   Figma 156:410 draws arrows either side of the row and three dots beneath it:
   three testimonials, one per state, the current one in the wide slot. */
.na-testi {
	position: relative;
}
.na-testi .na-h2 {
	max-width: 1245px;
	margin-top: 21px;
}

/* ---- Testimonials carousel ----
   One source of truth for how many cards are visible: --na-testi-per-view. The
   card's flex-basis is derived from it, and na-testi.js reads it back rather
   than carrying its own copy of these breakpoints. Change a number here and the
   arrows, the dots and the slide distance all follow. */
.na-testi__carousel {
	--na-testi-per-view: 3;
	--na-testi-gap: 40px;
	position: relative;
	margin-top: 63px;
}
.na-testi__viewport {
	overflow: hidden;
}
.na-testi__track {
	display: flex;
	align-items: stretch;
	gap: var(--na-testi-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.na-testi__card {
	flex: 0 0 calc(
		(100% - (var(--na-testi-per-view) - 1) * var(--na-testi-gap)) /
			var(--na-testi-per-view)
	);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 34px 32px 32px;
	border-radius: 28px;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(42, 42, 40, 0.08);
}
/* The frame lifts one card in every four so a row of quotes has a rhythm
   instead of reading as one flat block. */
.na-testi__card:nth-child(4n + 1) {
	background: var(--wp--preset--color--teal);
	border-color: transparent;
}
.na-testi__mark {
	width: 40px;
	height: 28px;
	flex: none;
	display: block;
	fill: rgba(42, 42, 40, 0.16);
}
.na-testi__card:nth-child(4n + 1) .na-testi__mark {
	fill: rgba(255, 255, 255, 0.34);
}
.na-testi__quote {
	margin: 26px 0 0;
	padding: 0;
	border: none;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 500;
	font-size: 17px;
	line-height: 27px;
	color: var(--wp--preset--color--ink);
}
.na-testi__card:nth-child(4n + 1) .na-testi__quote {
	color: var(--wp--preset--color--white);
}
/* Pushed to the foot of the card so the attributions line up across a row
   however uneven the quotes above them are. */
.na-testi__person {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
	padding-top: 34px;
}
.na-testi__avatar {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--mint-bg);
	color: var(--wp--preset--color--green-deep);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 17px;
	line-height: 1;
}
.na-testi__card:nth-child(4n + 1) .na-testi__avatar {
	background: rgba(255, 255, 255, 0.2);
	color: var(--wp--preset--color--white);
}
.na-testi__who {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.na-testi__name {
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	color: var(--wp--preset--color--ink);
}
.na-testi__role {
	font-size: 14px;
	line-height: 18px;
	color: var(--wp--preset--color--gray-body);
}
.na-testi__card:nth-child(4n + 1) .na-testi__name {
	color: var(--wp--preset--color--white);
}
.na-testi__card:nth-child(4n + 1) .na-testi__role {
	color: rgba(255, 255, 255, 0.78);
}
.na-testi__prev,
.na-testi__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	display: grid;
	place-items: center;
	padding: 0;
	cursor: pointer;
	z-index: 2;
	box-shadow: 0 4px 14px rgba(42, 42, 40, 0.1);
	transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
/* Clear of the cards, not half over them: the button is 40 wide, so -56 leaves
   a 16px gap between it and the track. The switch to stacked controls below is
   pinned to that number. */
.na-testi__prev {
	left: -56px;
}
.na-testi__next {
	right: -56px;
}
.na-testi__prev:hover,
.na-testi__next:hover {
	transform: translateY(-50%) scale(1.06);
	box-shadow: 0 6px 18px rgba(42, 42, 40, 0.16);
}
.na-testi__prev[disabled],
.na-testi__next[disabled] {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
}
.na-testi__prev[disabled]:hover,
.na-testi__next[disabled]:hover {
	transform: translateY(-50%);
}
.na-testi__prev:focus-visible,
.na-testi__next:focus-visible,
.na-testi__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--green-deep);
	outline-offset: 3px;
}
.na-testi__dots {
	display: flex;
	gap: 4px;
	justify-content: center;
	margin-top: 40px;
}
/* `display: grid`/`flex` on these outranks the user agent's [hidden] rule, so
   the attribute has to be honoured explicitly or the controls stay on screen in
   exactly the case they are meant to disappear: everything already fits. */
.na-testi__prev[hidden],
.na-testi__next[hidden],
.na-testi__dots[hidden] {
	display: none;
}
.na-testi__dot {
	width: 20px;
	height: 11px;
	padding: 0;
	border: none;
	border-radius: 16px;
	background: rgba(217, 217, 217, 0.85);
	cursor: pointer;
	transition: background-color 0.25s ease;
}
.na-testi__dot.is-active {
	background: var(--wp--preset--color--teal);
}
@media (prefers-reduced-motion: reduce) {
	.na-testi__track {
		transition: none;
	}
}
/* The arrows only have somewhere to sit beside the cards while the page is wider
   than the 1280 content column plus 56px of offset either side. 1280 + 112 is
   1392, so they stack from 1419 down and keep a little air at the boundary
   rather than hanging off the edge of the viewport.

   Stacked, the spacing belongs to the row rather than to each control: giving
   the arrows their own margin-top is what had them sitting 8px below the dots,
   whose margin the phone breakpoint had already tightened to 32. */
@media (max-width: 1419px) {
	.na-testi__carousel {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 40px 14px;
	}
	.na-testi__viewport {
		flex: 0 0 100%;
		order: 1;
	}
	.na-testi__prev {
		order: 2;
	}
	.na-testi__dots {
		order: 3;
	}
	.na-testi__next {
		order: 4;
	}
	.na-testi__prev,
	.na-testi__next {
		position: static;
		transform: none;
	}
	.na-testi__dots {
		margin-top: 0;
	}
	.na-testi__prev:hover,
	.na-testi__next:hover {
		transform: scale(1.06);
	}
	.na-testi__prev[disabled]:hover,
	.na-testi__next[disabled]:hover {
		transform: none;
	}
}

/* Two up once three no longer fit the width, one up on a phone. */
@media (max-width: 1023px) {
	.na-testi__carousel {
		--na-testi-per-view: 2;
		--na-testi-gap: 24px;
	}
}
@media (max-width: 767px) {
	.na-testi__carousel {
		--na-testi-per-view: 1;
	}
}

/* Design bands stack flush: kill root block gaps between page sections */
body.page main .wp-block-post-content > .na-section {
	margin-block-start: 0;
}
/* Blog templates render their bands straight into main, same rule applies. */
body.blog main > .na-section,
body.search main > .na-section,
body.archive main > .na-section,
body.single main > .na-section {
	margin-block-start: 0;
}

/* ---- Testimonial bands (testimonials page) ---- */
.na-tband__grid {
	display: grid;
	grid-template-columns: 1fr 598px;
	gap: 44px;
	align-items: start;
}
.na-tband--flip .na-tband__grid {
	grid-template-columns: 598px 1fr;
}
@media (min-width: 901px) {
	.na-tband__grid--wide {
		grid-template-columns: 598px 637px;
		gap: 62px;
	}
}
.na-tband--flip .na-tband__text {
	order: 2;
}
.na-tband__grid > .na-tband__text,
.na-tband__grid > .na-tband__photo {
	margin-block-start: 0;
}
.na-tband__mark {
	width: 62px;
	height: 54px;
	display: block;
}
.na-tband__quote {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 22px;
	line-height: 1.32;
	font-weight: 500;
	margin: 29px 0 0 !important;
}
.na-tband__quote + .na-tband__quote {
	margin-top: 29px !important;
}
.na-tcard__quote + .na-tcard__quote {
	margin-top: 29px !important;
}
.na-tband__attr {
	font-size: 20px;
	line-height: 1.25;
	font-weight: 500;
	border-left: 2px solid var(--wp--preset--color--teal);
	padding-left: 12px;
	margin: 46px 0 0 !important;
}
.na-tband__photo {
	margin: 0;
	align-self: center;
}
.na-tband__photo img {
	width: 100%;
	height: auto;
	border-radius: 28px;
	display: block;
}
.na-tcard__box {
	background: var(--wp--preset--color--cream-bg);
	border-radius: 28px;
	padding: 58px 72px 46px;
	text-align: center;
}
.na-tcard__box .na-tband__mark {
	margin: 0 auto;
}
.na-tcard__quote {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 22px;
	line-height: 1.32;
	font-weight: 500;
	max-width: 907px;
	margin: 36px auto 0 !important;
}
.na-tcard__rule {
	border: none;
	border-top: 1.5px solid var(--wp--preset--color--teal);
	width: 74px;
	margin: 44px auto 0;
}
.na-tcard__attr {
	font-size: 20px;
	line-height: 1.25;
	font-weight: 500;
	margin: 20px 0 0 !important;
}
@media (max-width: 900px) {
	.na-tband__grid,
	.na-tband--flip .na-tband__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.na-tband--flip .na-tband__text {
		order: 0;
	}
	.na-tband__grid > .na-tband__photo {
		order: 2;
		margin-top: 8px !important;
		align-self: auto !important;
	}
	/* Standard mobile gutters: no text container touches the viewport edge */
	.na-section > p,
	.na-section > .wp-block-heading {
		padding-inline: 24px;
	}
	.na-tband__grid {
		padding-inline: 24px;
	}
	.na-tcard {
		padding-inline: 16px;
	}
	.na-final__content {
		padding-inline: 24px;
	}
	.na-tband__quote,
	.na-tcard__quote {
		font-size: 19px;
	}
	.na-tcard__box {
		padding: 40px 24px 48px;
	}
}

/* ---- Our Story (our-team page) ---- */
.na-story__grid {
	display: grid;
	grid-template-columns: 620px 634px;
	gap: 66px;
	align-items: start;
}
.na-story__eyebrow {
	margin: 0;
}
.na-story__h2 {
	font-size: clamp(34px, 3.4722vw, 50px);
	line-height: 0.9;
	margin: 21px 0 0 !important;
}
.na-story__p {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 18px;
	line-height: 1.3;
	font-weight: 500;
	margin: 33px 0 0 !important;
}
.na-story__p + .na-story__p {
	margin-top: 27px !important;
}
.na-story__photo {
	margin: 0;
	align-self: start;
}
.na-story__photo img {
	width: 100%;
	height: auto;
	border-radius: 28px;
	display: block;
}

/* ---- Values (our-team page) ---- */
@media (min-width: 1340px) {
	.na-values__head {
		height: 168px;
	}
}
.na-values__grid {
	display: grid;
	grid-template-columns: 291px 290px 290px 290px;
	gap: 40px;
}
.na-values__grid > .na-values__card {
	margin-block-start: 0;
}
.na-values__img {
	margin: 0;
}
.na-values__img img {
	width: 100%;
	height: auto;
	border-radius: 28px;
	display: block;
}
.na-values__sub,
.na-team__sub {
	font-size: 18px !important;
	line-height: 1.28;
}
.na-values__title {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 500;
	font-size: 24px;
	line-height: 0.9;
	margin: 23px 0 0 !important;
}
.na-values__body {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
	margin: 24px 0 0 !important;
}
@media (min-width: 901px) and (max-width: 1339px) {
	.na-tband__grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		padding-inline: 24px;
	}
	.na-tband__grid--wide,
	.na-tband--flip .na-tband__grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
	.na-story__grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		padding-inline: 24px;
	}
	.na-values__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
		padding-inline: 24px;
	}
}
@media (max-width: 900px) {
	.na-story__grid {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-inline: 24px;
	}
	.na-story__photo {
		margin-top: 0 !important;
	}
	.na-values__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px;
		padding-inline: 24px;
	}
	.na-values__head {
		padding-inline: 24px;
	}
	.na-team__cols {
		padding-inline: 24px;
	}
}
@media (max-width: 600px) {
	.na-values__grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Final CTA ---- */
.na-final {
	position: relative;
	overflow: hidden;
}
.na-final__content {
	position: relative;
	z-index: 2;
}
.na-final__body {
	font-size: 18px !important;
	line-height: 23px;
	font-weight: 500;
	margin-top: 33px !important;
}
/* This headline runs on the 107% leading, like the surrogate promo. */
body.home .na-final h2 {
	font-size: clamp(34px, 3.4722vw, 50px);
	line-height: 1.07em;
}
/* Figma 156:437 washes the corner photos with mint. The fill's stops read
   0.25 / 1 / 0, and measuring the render back against the unwashed artwork puts
   the axis horizontal across the rect's 1471px, solid at 56%. */
body.home .na-final::after {
	content: "";
	position: absolute;
	left: -16px;
	right: -15px;
	top: 0;
	bottom: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg,
		rgba(238, 249, 235, 0.28) 0%,
		rgba(238, 249, 235, 1) 56%,
		rgba(238, 249, 235, 0) 100%);
}
body.home .na-final .wp-block-buttons {
	margin-top: 33px !important;
}
body.home .na-final .wp-block-button__link {
	padding: 17.5px 26px;
}
body.home .na-final .na-btn-outline .wp-block-button__link {
	padding: 16.5px 25px;
}
.na-final__p {
	position: absolute;
	margin: 0 !important;
	border-radius: 28px;
	z-index: 1;
	object-fit: cover;
}
.na-final__p1 { width: 154px; height: 130px; right: 180px; top: 41px; }
.na-final__p2 { width: 219px; height: 185px; right: -51px; bottom: 40px; }
.na-final__p3 { width: 200px; height: 168px; left: 159px; bottom: 40px; }
.na-final__p4 { width: 200px; height: 168px; left: -58px; top: 49px; }
@media (max-width: 1100px) {
	.na-final__p { display: none; }
}

/* ---- Homepage: the frame-exact desktop boxes let go below the design width ----
   Several homepage elements are pinned to the frame's own pixel widths (the
   about photo bleeds past the band, the surrogate headline overhangs its
   column). Those are desktop facts, not responsive ones. */
@media (max-width: 1339px) {
	body.home .na-spromo .na-h2 {
		width: auto;
		max-width: 100%;
	}
	.na-consult__cols {
		gap: 48px;
	}
	.na-footer .na-footer__cols > .wp-block-column {
		flex-basis: auto;
	}
}
/* Fixed pixel columns are only legal at the design width; between 901 and 1339
   the diagram goes fluid. Below 901 it stops being two columns at all, so this
   block must NOT reach mobile — that is what put the second card off-screen. */
@media (min-width: 901px) and (max-width: 1339px) {
	.na-flow {
		width: 100%;
		padding: 0 24px;
	}
	.na-flow__row {
		grid-template-columns: 1fr 140px 1fr;
	}
	.na-flow__row::before {
		left: calc(50% - 70px);
		width: 140px;
	}
	.na-flowwide,
	.na-flow__match {
		left: 0;
	}
	.na-flowwide {
		max-width: calc(100% - 48px);
	}
}
@media (max-width: 900px) {
	.na-about__img img {
		width: 100%;
	}
	.na-about__img {
		margin-top: 24px !important;
	}
	.na-consult__cols > .wp-block-column:first-child,
	.na-consult__cols > .wp-block-column:last-child,
	.na-spromo__cols > .wp-block-column:first-child,
	.na-spromo__cols > .wp-block-column:last-child,
	.na-footer__cols > .wp-block-column {
		flex-basis: 100% !important;
	}
	.na-consult__cols,
	.na-spromo__cols {
		gap: 24px;
	}
	/* Stacked columns need the gap the desktop grid gets from its own width.
	   Selectors repeat .na-footer so they outrank the desktop block below. */
	.na-footer .na-footer__cols {
		max-width: 100%;
		gap: 32px;
	}
	.na-footer .na-footer__heading {
		margin-bottom: 16px;
	}
	/* Tighter hand-off from the cards on a phone. On the row itself, so the
	   arrows and dots stay on one baseline. */
	.na-testi__carousel {
		gap: 32px 14px;
	}
}

/* ---- Legal pages (privacy policy, terms of service) ----
   A reading column on the brand's own scale: the client's approved text, set to
   be read rather than designed around. */
.na-legal__title {
	font-size: clamp(34px, 3.4722vw, 50px);
	line-height: 0.89318em;
	margin: 0;
}
.na-legal__meta {
	margin: 20px 0 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--wp--preset--color--gray-body);
}
.na-legal h2 {
	font-size: 28px;
	line-height: 1.2;
	margin: 56px 0 0;
}
.na-legal h3 {
	font-size: 20px;
	line-height: 1.3;
	margin: 36px 0 0;
}
.na-legal p,
.na-legal li {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 28px;
	color: var(--wp--preset--color--gray-body);
}
.na-legal h2 + p,
.na-legal h3 + p,
.na-legal p + p,
.na-legal p + ul,
.na-legal ul + p {
	margin-top: 20px;
}
.na-legal ul {
	padding-left: 22px;
	margin-bottom: 0;
}
.na-legal li + li {
	margin-top: 10px;
}
.na-legal a {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.na-legal a:hover {
	color: var(--wp--preset--color--green-deep);
}
@media (max-width: 900px) {
	.na-legal {
		padding-left: 24px;
		padding-right: 24px;
	}
	.na-legal h2 {
		margin-top: 40px;
	}
}

/* ---- Footer ---- */
.wp-site-blocks > footer {
	margin-block-start: 0;
}
.na-footer__rule {
	border: none;
	height: 1px;
	opacity: 1;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}
/* Figma 156:450 — logo at x=150, columns at 536 / 777 / 1000 / 1186, headings
   20/19.35 with their links starting 63 below on a 36px pitch. */
.na-footer__heading {
	font-size: 20px;
	line-height: 19.35px;
	margin-bottom: 44px;
}
.na-footer__nav .wp-block-navigation-item__content {
	text-decoration: none;
	line-height: 15.5px;
	display: block;
}
.na-footer__nav {
	gap: 21px;
}
.na-footer__cols {
	gap: 0;
	max-width: 1140px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.na-footer__cols > .wp-block-column {
	flex-grow: 0;
}
/* 8px of the logo column's trailing whitespace (the mark is 266px inside 386)
   pays for the socials column below, which was 5px too narrow to hold its own
   three icons. */
.na-footer__cols > .wp-block-column:nth-child(1) {
	flex-basis: 378px !important;
}
.na-footer__cols > .wp-block-column:nth-child(2) {
	flex-basis: 241px;
}
.na-footer__cols > .wp-block-column:nth-child(3) {
	flex-basis: 223px;
}
.na-footer__cols > .wp-block-column:nth-child(4) {
	flex-basis: 186px;
}
/* Three 25px glyphs in 1px rings, 14px apart, need 109px: at the frame's
   measured 104 the third icon wrapped to a second row. */
.na-footer__cols > .wp-block-column:nth-child(5) {
	flex-basis: 112px;
}
/* The frame rings each social glyph rather than setting it solid. The ring is
   the list item but the glyph lives in an anchor with its own padding, so the
   anchor is what has to centre it. */
.na-footer__socials.wp-block-social-links {
	gap: 14px;
	margin-top: 17px;
}
.na-footer__socials .wp-social-link {
	width: 25px;
	height: 25px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 50%;
	padding: 0;
	box-sizing: content-box;
}
.na-footer__socials .wp-social-link a {
	width: 100%;
	height: 100%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.na-footer__socials .wp-social-link svg {
	width: 13px;
	height: 13px;
	display: block;
}
.na-footer a {
	text-decoration: none;
}
.na-footer a:hover {
	text-decoration: underline;
}

/* ---- Reqs & Disq: intro ---- */
.na-intro__grid {
	display: grid;
	grid-template-columns: 620px 1fr;
	gap: 66px;
	align-items: start;
	padding-left: 40px;
}
.na-intro__grid > * {
	margin-block-start: 0;
}
.na-intro__p {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.28;
	color: var(--wp--preset--color--gray-body);
	margin: 0;
}
.na-intro__p + .na-intro__p {
	margin-top: 24px;
}
.na-intro__photo {
	margin: 0;
}
.na-intro__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 634 / 375;
	object-fit: cover;
	border-radius: 28px;
}
@media (max-width: 1339px) {
	.na-intro__grid {
		grid-template-columns: 1fr 1fr;
		padding-left: 24px;
		padding-right: 24px;
	}
}
@media (max-width: 900px) {
	.na-intro__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ---- Intended Parents: Option C intro ---- */
/* Text and photo sit on the 1280 content column: no extra gutter at 1440. */
.na-intro--ip .na-intro__grid {
	grid-template-columns: 675px 525px;
	gap: 79.5px;
	padding-left: 0;
	padding-right: 0;
}
.na-intro--ip .na-intro__text {
	margin-top: 35px;
}
.na-intro--ip .na-intro__eyebrow {
	font-size: 18px;
	line-height: 23px;
	margin: 0 0 21px;
}
.na-intro--ip .na-intro__h {
	font-size: clamp(34px, 3.4722vw, 50px);
	line-height: 0.89318;
	margin: 0 0 33px;
}
.na-intro--ip .na-intro__p {
	color: var(--wp--preset--color--ink);
	line-height: 23px;
}
.na-intro--ip .na-intro__p + .na-intro__p {
	margin-top: 23px;
}
.na-intro--ip .na-intro__photo img {
	aspect-ratio: 525 / 400;
}
@media (max-width: 1339px) {
	.na-intro--ip .na-intro__grid {
		grid-template-columns: 1.28fr 1fr;
		padding-left: 24px;
		padding-right: 24px;
		gap: 48px;
	}
}
@media (max-width: 900px) {
	.na-intro--ip .na-intro__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.na-intro--ip .na-intro__text {
		margin-top: 0;
	}
	.na-intro--ip .na-intro__h {
		line-height: 1.02;
	}
}

/* ---- Intended Parents: concierge services (sticky index + scrolling cards) ---- */
/* No overflow clip on the section itself: it would become the sticky column's
   scroll container and pin the index at top:78px forever. The only thing that
   overflows is the card photo, so the card does the clipping. */
.na-svc {
	background: var(--wp--preset--color--white);
}
.na-svc > .wp-block-group,
.na-svc__grid > *,
.na-svc__right > * {
	margin-block-start: 0;
}
/* Columns are measured off the section width, not vw, so a visible scrollbar
   cannot shift the cream panel. First track = the 1280 column's left gutter. */
.na-svc__grid {
	display: grid;
	grid-template-columns: calc((100% - 1280px) / 2) 620px 40px 1fr;
	align-items: stretch;
}
/* The 78px band inset is a MARGIN, not padding: sticky measures the border
   box, so padding here would push the content to 156px the moment the band
   reaches the top of the viewport. */
.na-svc__left {
	grid-column: 2;
	position: sticky;
	top: 78px;
	align-self: start;
	margin-top: 78px !important;
	padding: 0 0 40px;
}
.na-svc__eyebrow {
	font-size: 18px;
	line-height: 23px;
	margin: 0 0 21px;
}
.na-svc__h {
	font-size: clamp(34px, 3.4722vw, 50px);
	line-height: 0.89318;
	margin: 0 0 45px;
	max-width: 566px;
}
.na-svc__lead {
	font-size: 18px;
	font-weight: 500;
	line-height: 25px;
	color: var(--wp--preset--color--ink);
	max-width: 566px;
	margin: 0 0 35px;
}
.na-svc__index {
	list-style: none;
	margin: 0;
	padding: 0;
}
.na-svc__index li {
	margin: 0;
	border-bottom: 1px solid #609c95;
	padding-bottom: 25px;
}
.na-svc__index li + li {
	margin-top: 23px;
}
/* Same reason the last card drops its rule: a line under the closing entry
   reads as a list that continues below. Transparent rather than none, so the
   active-state rule below can still colour it in when that entry is the one
   being read. */
.na-svc__index li:last-child {
	border-bottom-color: transparent;
}
.na-svc__index a {
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 500;
	font-size: 26px;
	line-height: 23.22px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color 0.25s ease, transform 0.25s ease;
}
.na-svc__index a:hover,
.na-svc__index a:focus-visible {
	color: var(--wp--preset--color--teal);
	transform: translateX(4px);
}
.na-svc__index li.is-active {
	border-bottom-color: var(--wp--preset--color--teal);
}
.na-svc__index li.is-active a {
	color: var(--wp--preset--color--teal);
}

.na-svc__right {
	grid-column: 4;
	background: var(--wp--preset--color--cream-bg);
	padding: 78px 0 56px;
}
.na-svc__card {
	position: relative;
	height: 290px;
	box-sizing: border-box;
	padding: 61px 0 0 28px;
	border-bottom: 1px solid #609c95;
	overflow: hidden;
}
/* The last card closes the list. Keeping its rule made the band read as if a
   fifth item were scrolled just out of sight. */
.na-svc__right > .na-svc__card:last-child {
	border-bottom: none;
}
.na-svc__card-h {
	font-size: 24px;
	line-height: 21.44px;
	font-weight: 700;
	margin: 0;
}
.na-svc__card-p {
	font-size: 16px;
	font-weight: 500;
	line-height: 21px;
	color: var(--wp--preset--color--ink);
	width: 381px;
	max-width: 100%;
	margin: 21px 0 0;
}
/* Anchored to the right edge, not to a fixed left offset, so the photo keeps
   bleeding off the viewport on screens wider than the 1440 design frame. */
.na-svc__card-img {
	position: absolute;
	top: 26px;
	right: -4px;
	width: 270px;
	margin: 0;
}
.na-svc__card-img img {
	display: block;
	width: 100%;
	aspect-ratio: 270 / 239;
	object-fit: cover;
	border-radius: 28px 0 0 28px;
}

/* Mid range: keep the two columns, let them breathe fluidly. */
@media (max-width: 1339px) {
	.na-svc__grid {
		grid-template-columns: 24px minmax(0, 1fr) 32px minmax(0, 1.1fr);
	}
	.na-svc__card {
		height: auto;
		min-height: 290px;
		padding-right: 24px;
	}
	/* Three classes deliberately: core's layout stylesheet zeroes the bottom
	   margin of any flow container's last child at (0,2,0), and the photo is
	   always the card's last child. A single class loses to it and the photo
	   ends up flush against the card edge. */
	.na-svc__right .na-svc__card .na-svc__card-img {
		position: static;
		right: auto;
		width: 100%;
		max-width: 270px;
		margin: 24px 0 28px;
	}
	.na-svc__card-p {
		width: auto;
	}
}
@media (max-width: 900px) {
	.na-svc__grid {
		grid-template-columns: 1fr;
	}
	.na-svc__left {
		grid-column: 1;
		position: static;
		padding: 56px 24px 32px;
	}
	.na-svc__right {
		grid-column: 1;
		padding: 8px 0 40px;
	}
	.na-svc__card {
		min-height: 0;
		padding: 32px 24px;
	}
	.na-svc__right .na-svc__card .na-svc__card-img {
		max-width: none;
		margin: 20px 0;
	}
	.na-svc__card-img img {
		border-radius: 28px;
		aspect-ratio: 16 / 11;
	}
	/* The design's tight display leading only works on one or two long lines. */
	.na-svc__h {
		line-height: 1.02;
		margin-bottom: 32px;
	}
	.na-svc__h br {
		display: none;
	}
	.na-svc__index a {
		font-size: 24px;
		line-height: 1.15;
	}
}
@media (prefers-reduced-motion: reduce) {
	.na-svc__index a {
		transition: none;
	}
}

/* Surrogates "Why an Agency Matters" band: same component, but the frame
   centres each card's text block vertically instead of the IP page's fixed
   61px inset, and the heading sits 33px above its lead instead of 45px. */
.na-svc--sur .na-svc__h {
	margin-bottom: 33px;
	max-width: none;
}
.na-svc--sur .na-svc__lead {
	max-width: 509px;
	line-height: 23px;
}
.na-svc--sur .na-svc__card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 0;
}
/* Everything except the photo: this reset is here for the vertically centred
   desktop card, where the photo is absolutely positioned and its margins do
   nothing. Below 1339 the photo drops into the flow and those margins are the
   only thing keeping it off the paragraph above it. */
.na-svc--sur .na-svc__card > *:not(.na-svc__card-img) {
	margin-block-start: 0;
}
.na-svc--sur .na-svc__card-p {
	margin-top: 21px;
}
/* Frame's own inset: cards end 83px above the band edge, not the IP page's 56. */
.na-svc--sur .na-svc__right {
	padding-bottom: 82px;
}
/* This frame's index rhythm is a 71px pitch (the IP page's runs 72.2). */
.na-svc--sur .na-svc__index li {
	padding-bottom: 24px;
}
.na-svc--sur .na-svc__index li + li {
	margin-top: 22.8px;
}
.na-svc--sur .na-svc__eyebrow {
	letter-spacing: 0;
}
@media (max-width: 1339px) {
	.na-svc--sur .na-svc__card {
		display: block;
		padding-top: 32px;
	}
}
@media (max-width: 900px) {
	/* Tighter hand-over from the hero on phones: the sticky column's 78px
	   desktop margin has no job once the column is static. */
	.na-svc--sur .na-svc__left {
		margin-top: 0 !important;
		padding-top: 20px;
	}
}

/* ---- Journey steps (scroll-stacking cards) ----
   The cards flow normally with a gap between them; as the reader scrolls each
   one pins near the top of the viewport and the next card slides over it,
   leaving a thin edge behind. By the end of the band the cards read as a pile
   of stacked paper, which is the stack the design frame draws.

   Every card sticks 12px lower than the one before it (--na-step-offset), so
   the pile grows downwards instead of every card landing on the same line.
   The index is set per card below rather than in JavaScript, so the effect
   survives with scripts off and needs nothing but this stylesheet. Reused on
   any band that follows the .na-steps markup contract:
     .na-steps__list > .na-step
       h3.na-step__title  pill heading
       p.na-step__num     step number
       p.na-step__p       step copy  */
.na-steps {
	padding: 74px 0 73px;
}
.na-steps__eyebrow {
	font-size: 18px;
	line-height: 23px;
	margin: 0 auto 21px;
}
.na-steps__h {
	font-size: clamp(34px, 3.4722vw, 50px);
	line-height: 0.89318;
	margin: 0 auto;
}
.na-steps__list {
	/* Where the first card pins, and how far below it each later card pins. */
	--na-step-pin: 110px;
	--na-step-offset: 12px;
	margin-top: 61px;
}
.na-step {
	position: sticky;
	top: calc(var(--na-step-pin) + var(--na-step-i, 0) * var(--na-step-offset));
	box-sizing: border-box;
	/* Card height comes from the design frame; the copy is always readable, so
	   a tall step simply grows past it. */
	min-height: 290px;
	margin: 0 0 26px;
	padding: 57px 35px 26px 35px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--green-deep);
	border-radius: 10px;
	overflow: hidden;
}
.na-step:last-child {
	margin-bottom: 0;
}
/* One rule per position instead of a script. Covers more cards than any band
   needs; a card past the last index pins with the one before it. */
.na-step:nth-child(1) { --na-step-i: 0; }
.na-step:nth-child(2) { --na-step-i: 1; }
.na-step:nth-child(3) { --na-step-i: 2; }
.na-step:nth-child(4) { --na-step-i: 3; }
.na-step:nth-child(5) { --na-step-i: 4; }
.na-step:nth-child(6) { --na-step-i: 5; }
.na-step:nth-child(7) { --na-step-i: 6; }
.na-step:nth-child(8) { --na-step-i: 7; }
.na-step:nth-child(9) { --na-step-i: 8; }
.na-step:nth-child(10) { --na-step-i: 9; }
.na-step:nth-child(11) { --na-step-i: 10; }
.na-step:nth-child(12) { --na-step-i: 11; }
/* The pill is the heading itself, so the band reads with scripts off. */
.na-step__title {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 48px;
	margin: 0;
	padding: 5px 25px;
	background: transparent;
	border: 2px solid var(--wp--preset--color--teal);
	border-radius: 26px;
	color: var(--wp--preset--color--ink);
	font-size: 28px;
	font-weight: 600;
	line-height: 34px;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.na-step__num {
	position: absolute;
	top: 33px;
	right: 65px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	margin: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
	font-size: 48px;
	font-weight: 300;
	line-height: 42.87px;
}
.na-step__p {
	width: 949px;
	max-width: 100%;
	margin: 39px 0 0;
	font-size: 20px;
	line-height: 24px;
	color: var(--wp--preset--color--ink);
}
@media (max-width: 1339px) {
	.na-step__num {
		right: 32px;
	}
	.na-step__p {
		max-width: calc(100% - 60px);
	}
}
/* Below the desktop layout a card is a large share of the screen, so pinning
   pins closer to the top edge and the pile is tighter, so the tallest card
   still clears the fold: 64 + 8 * 8 + 468 = 596 inside a 844px screen. */
@media (max-width: 900px) {
	/* Standard 24px page gutter. */
	.na-steps {
		padding: 56px 24px;
	}
	.na-steps__list {
		--na-step-pin: 64px;
		--na-step-offset: 8px;
		margin-top: 36px;
	}
	.na-step {
		min-height: 0;
		margin-bottom: 12px;
		padding: 24px 24px 24px 20px;
	}
	.na-step__title {
		font-size: 20px;
		line-height: 26px;
		padding: 5px 18px;
		max-width: calc(100% - 76px);
	}
	.na-step__num {
		top: 20px;
		right: 16px;
		width: 60px;
		height: 60px;
		font-size: 28px;
		line-height: 1;
	}
	.na-step__p {
		width: auto;
		max-width: none;
		margin-top: 16px;
		font-size: 17px;
		line-height: 24px;
	}
}
/* A viewport too short to hold the pinned pile plus a whole card would pin a
   card whose bottom the reader can never reach, so there the cards just
   scroll. The phone threshold is higher because its cards are taller.
   `relative`, never `static`: the number circle is positioned against the
   card, and a static card would throw it out to the nearest positioned
   ancestor. */
@media (max-height: 560px), (max-width: 900px) and (max-height: 640px) {
	.na-step {
		position: relative;
		top: auto;
	}
}

/* ---- Intended Parents: FAQ ----
   The shared `.na-faq__h { margin: 0 !important }` beats the block layout's
   auto margins, so the head has to centre its own children. */
.na-faq__head > * {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* One grid for all six items instead of two independent columns, so the rule
   under the first item lines up across both columns exactly as drawn. */
.na-faq--ip .na-faq__cols {
	grid-template-columns: 620px 620px;
	grid-template-rows: auto auto auto;
	grid-auto-flow: column;
	column-gap: 40px;
	row-gap: 26px;
	align-items: stretch;
	justify-content: space-between;
}
.na-faq--ip .na-faq__item {
	display: flex;
	flex-direction: column;
}
.na-faq--ip .na-faq__item + .na-faq__item {
	margin-top: 0;
}
/* Frame 126: 41px question row, 24px to the answer, 35px down to the rule. */
.na-faq--ip .na-faq__toggle {
	min-height: 41px;
}
.na-faq--ip .na-faq__item {
	padding-bottom: 24px;
}
.na-faq--ip .na-faq__item.is-open {
	padding-bottom: 35px;
}
/* Surrogates FAQ (349:1556): answers 27px under the question row, 65px rows. */
.na-faq--sur .na-faq__a {
	margin-top: 27px !important;
	line-height: 23px;
}
.na-faq--sur .na-faq__item {
	min-height: 65px;
}
.na-faq--ip .na-faq__a {
	margin-top: 24px !important;
	margin-bottom: 0 !important;
	line-height: 23px;
	color: var(--wp--preset--color--gray-body);
}
@media (max-width: 1339px) {
	.na-faq--ip .na-faq__cols {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 900px) {
	.na-faq--ip .na-faq__cols {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-flow: row;
	}
}

/* ---- Intended Parents: meet our founder ---- */
.na-founder {
	position: relative;
	background: var(--wp--preset--color--mint-bg);
	border-radius: 24px 24px 0 0;
	padding: 53px 0 158px;
	overflow: hidden;
}
.na-founder__grid {
	display: grid;
	grid-template-columns: 620px 443px;
	column-gap: 118px;
	align-items: start;
	margin-block-start: 0;
}
.na-founder__grid > * {
	margin-block-start: 0;
}
/* Beats the block layout's first-child margin reset. */
.na-founder__text {
	margin-top: 106px !important;
}
.na-founder__eyebrow {
	font-size: 18px;
	line-height: 23px;
	margin: 0 0 21px;
}
.na-founder__h {
	font-size: clamp(34px, 3.4722vw, 50px);
	line-height: 0.89318;
	margin: 0 0 33px;
}
.na-founder__p {
	font-size: 18px;
	font-weight: 500;
	line-height: 23px;
	color: var(--wp--preset--color--gray-body);
	margin: 0 0 33px;
}
.na-founder__cta .wp-block-button__link {
	padding: 17.5px 25px;
	line-height: 20px;
}
.na-founder__photo {
	margin: 0;
}
.na-founder__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 443 / 632;
	object-fit: cover;
	border-radius: 28px;
}
.na-founder__curve {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	max-width: none;
	height: 5.76vw;
	max-height: 83px;
	display: block;
}
@media (max-width: 1339px) {
	.na-founder__grid {
		grid-template-columns: 1.2fr 1fr;
		column-gap: 56px;
	}
}
@media (max-width: 900px) {
	.na-founder {
		padding: 40px 24px 96px;
	}
	.na-founder__grid {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}
	.na-founder__text {
		margin-top: 0 !important;
		order: 2;
	}
	.na-founder__h {
		line-height: 1.02;
	}
	.na-founder__h br {
		display: none;
	}
	.na-founder__photo img {
		max-width: 443px;
		margin: 0 auto;
	}
}

/* ---- Intended Parents: next-step CTA + contact form ---- */
.na-contact {
	padding: 96px 0 54px;
}
.na-contact__top {
	display: grid;
	grid-template-columns: 557px 620px;
	justify-content: space-between;
	align-items: start;
	margin-block-start: 0;
}
.na-contact__top > * {
	margin-block-start: 0;
}
.na-contact__h {
	font-size: clamp(34px, 3.4722vw, 50px);
	line-height: 0.89318;
	margin: 0 0 35px;
}
.na-contact__p {
	max-width: 541px;
	font-size: 18px;
	font-weight: 500;
	line-height: 23px;
	color: var(--wp--preset--color--gray-body);
	margin: 0 0 45px;
}
.na-contact__cta .wp-block-button__link {
	font-size: 18px;
	line-height: 20px;
	padding: 21px 36px;
}
.na-contact__photo {
	margin: 0;
}
.na-contact__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 620 / 347;
	object-fit: cover;
	border-radius: 28px;
}

/* The form card */
.na-form-card {
	max-width: 1281px;
	margin: 59px auto 0;
	background: var(--wp--preset--color--white);
	border-radius: 10px;
	/* Frame 108 drop shadow: 0/0, 46.3 blur, black at 5%. */
	box-shadow: 0 0 46.3px rgba(0, 0, 0, 0.05);
	box-sizing: border-box;
	padding: 54px 56px 53px;
}
.na-form {
	display: grid;
	grid-template-columns: 559px 559px;
	justify-content: space-between;
	align-items: start;
}
.na-form__col {
	display: flex;
	flex-direction: column;
	gap: 25px;
}
.na-form__head {
	margin-bottom: 20px;
}
.na-form__h {
	font-size: 36px;
	font-weight: 700;
	line-height: 32px;
	margin: 0 0 10px;
	color: var(--wp--preset--color--ink);
}
.na-form__sub {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 18px;
	font-weight: 500;
	line-height: 23px;
	color: var(--wp--preset--color--gray-body);
	margin: 0;
}
/* The right column starts level with the left column's first field. */
.na-form__col--right {
	margin-top: 110px;
	gap: 24px;
}
.na-field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Two fields side by side inside a column (surrogate form name row). */
.na-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
}
.na-form__row > * {
	margin-block-start: 0;
}
.na-field__label {
	font-size: 18px;
	font-weight: 700;
	line-height: 16px;
	color: var(--wp--preset--color--ink);
}
.na-field__control {
	box-sizing: border-box;
	width: 100%;
	height: 42px;
	padding: 0 15px;
	background: var(--wp--preset--color--white);
	border: 1px solid #ebebeb;
	border-radius: 15px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	color: var(--wp--preset--color--ink);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.na-field__control::placeholder {
	color: #b7b7b7;
}
.na-field__control:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--teal);
	box-shadow: 0 0 0 3px rgba(37, 160, 169, 0.16);
}
.na-field__select,
.na-field__multi {
	appearance: none;
	text-align: left;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 7'%3E%3Cpath d='M1 1l5.5 5L12 1' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 21px center;
	background-size: 13px 7px;
	padding-right: 48px;
}
.na-field__select:invalid,
.na-field__multi[data-empty="1"] .na-field__multi-text {
	color: #b7b7b7;
}
.na-field__textarea {
	height: 121px;
	padding: 11px 15px;
	resize: vertical;
	line-height: 20px;
}
.na-field__menu {
	position: absolute;
	z-index: 5;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 6px;
	padding: 8px;
	background: var(--wp--preset--color--white);
	border: 1px solid #ebebeb;
	border-radius: 15px;
	box-shadow: 0 14px 40px rgba(42, 42, 40, 0.12);
}
.na-field__menu label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 15px;
	cursor: pointer;
}
.na-field__menu label:hover {
	background: var(--wp--preset--color--mint-bg);
}
.na-field__menu input {
	accent-color: var(--wp--preset--color--teal);
}
.na-field__error {
	margin: 0;
	font-size: 14px;
	line-height: 18px;
	color: #b3261e;
}
.na-field.has-error .na-field__control {
	border-color: #b3261e;
}
.na-form__actions {
	margin-top: 33px;
}
.na-form__submit {
	width: 100%;
	height: 55px;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 250px;
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.na-form__submit:hover {
	background: var(--wp--preset--color--green-deep);
	transform: translateY(-1px);
}
.na-form__submit[disabled] {
	opacity: 0.6;
	cursor: progress;
	transform: none;
}
.na-form__status:empty {
	display: none;
}
.na-form__status {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 20px;
	color: var(--wp--preset--color--gray-body);
	min-height: 0;
}
.na-form__status.is-error {
	color: #b3261e;
}
.na-form__status.is-success {
	color: var(--wp--preset--color--green-deep);
}
@media (max-width: 1339px) {
	.na-contact__top {
		grid-template-columns: 1fr 1fr;
		column-gap: 48px;
	}
	.na-form-card {
		padding: 40px;
	}
	.na-form {
		grid-template-columns: 1fr 1fr;
		column-gap: 40px;
	}
}
@media (max-width: 900px) {
	.na-contact {
		padding: 56px 24px 40px;
	}
	.na-contact__top {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}
	.na-contact__h {
		line-height: 1.02;
	}
	.na-contact__h br {
		display: none;
	}
	.na-form-card {
		margin-top: 48px;
		padding: 28px 20px;
	}
	.na-form {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}
	.na-form__col--right {
		margin-top: 0;
	}
	.na-form__h {
		font-size: 28px;
		line-height: 1.05;
	}
	/* The design's 16px label leading only fits one line. */
	.na-field__label {
		line-height: 1.25;
	}
}
@media (prefers-reduced-motion: reduce) {
	.na-form__submit {
		transition: none;
	}
}

/* ---- Intended Parents: closing CTA band ----
   Rectangle 3 in the frame is a HORIZONTAL mint gradient that is opaque in
   the middle and clear at both edges: it washes the centre so the headline
   reads, while leaving the corner photos untouched. */
.na-final--ip {
	position: relative;
	/* Raw <section> markup (blog patterns) does not get the block editor's
	   border-box, and min-height would then stack on top of the padding. */
	box-sizing: border-box;
	min-height: 453px;
	padding: 78px 0 77px;
	overflow: hidden;
}
.na-final--ip::after {
	content: "";
	position: absolute;
	inset: -42px -16px;
	background: linear-gradient(
		to right,
		rgba(238, 249, 235, 0.25) 0%,
		rgba(238, 249, 235, 1) 49.75%,
		rgba(238, 249, 235, 0) 100%
	);
	pointer-events: none;
	z-index: 1;
}
.na-final--ip .na-final__photo {
	position: absolute;
	margin: 0;
	z-index: 0;
}
.na-final--ip .na-final__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 28px;
}
/* Anchored to the nearest edges, the same way the homepage and Pay & Benefits
   closing bands are, so the arrangement holds on screens wider than 1440. */
/* Surrogates final band (349:1767): one-line heading sits 26px lower. */
.na-final--sur .na-final__content {
	padding-top: 26px;
}
.na-final--ip .na-final__photo--1 {
	left: -58px;
	top: 49px;
	width: 200px;
	height: 168px;
}
.na-final--ip .na-final__photo--2 {
	left: 158px;
	bottom: 41px;
	width: 200px;
	height: 168px;
}
.na-final--ip .na-final__photo--3 {
	right: 180px;
	top: 41px;
	width: 154px;
	height: 130px;
}
.na-final--ip .na-final__photo--4 {
	right: -51px;
	bottom: 41px;
	width: 219px;
	height: 185px;
}
.na-final--ip .na-final__content {
	position: relative;
	z-index: 2;
	max-width: 620px;
	margin: 0 auto !important;
	text-align: center;
}
.na-final--ip .na-final__h {
	font-size: clamp(34px, 3.4722vw, 50px);
	line-height: 1.08;
	margin: 0 auto 33px;
	max-width: 660px;
}
.na-final--ip .na-final__lead {
	font-size: 18px;
	font-weight: 500;
	line-height: 23px;
	margin: 0 auto 33px;
}
.na-final--ip .na-final__cta {
	gap: 10px;
}
.na-final--ip .na-final__cta .wp-block-button__link {
	padding: 17.5px 25px;
	line-height: 20px;
}
.na-final--ip .na-btn-outline .wp-block-button__link {
	padding: 16.5px 25px;
}
/* Below the design width the photos would collide with the copy. */
@media (max-width: 1023px) {
	.na-final--ip .na-final__photo--2,
	.na-final--ip .na-final__photo--3 {
		display: none;
	}
	/* Surrogates final band (349:1767): one-line heading sits 26px lower. */
.na-final--sur .na-final__content {
	padding-top: 26px;
}
.na-final--ip .na-final__photo--1 {
		top: 20px;
	}
	.na-final--ip .na-final__photo--4 {
		top: auto;
		bottom: 20px;
	}
}
@media (max-width: 781px) {
	.na-final--ip {
		padding: 56px 24px;
	}
	.na-final--ip .na-final__photo {
		display: none;
	}
	.na-final--ip::after {
		display: none;
	}
	.na-final--ip .na-final__h {
		line-height: 1.05;
	}
	.na-final--ip .na-final__lead br {
		display: none;
	}
}

/* ---- Reqs & Disq: quick-qualify table ---- */
.na-qq__h {
	font-size: 50px;
	line-height: 0.9;
	font-weight: 700;
	margin: 0 auto 53px !important;
}
.na-qtable {
	margin: 0;
}
.na-qtable table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--green-deep);
	border-radius: 10px;
	overflow: hidden;
}
.na-qtable th,
.na-qtable td {
	border: none;
	box-sizing: border-box;
	text-align: left;
	vertical-align: middle;
	color: var(--wp--preset--color--ink);
}
.na-qtable th:first-child,
.na-qtable td:first-child {
	width: 414px;
	padding-left: 59px;
	padding-right: 20px;
}
.na-qtable th:last-child,
.na-qtable td:last-child {
	border-left: 1px solid var(--wp--preset--color--sage-light);
	padding-left: 57px;
	padding-right: 40px;
}
.na-qtable thead th {
	font-size: 28px;
	font-weight: 600;
	height: 82px;
	padding-top: 0;
	padding-bottom: 0;
	box-sizing: border-box;
}
.na-qtable tbody td {
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
	padding-top: 15px;
	padding-bottom: 14px;
	border-top: 1px solid var(--wp--preset--color--sage-light);
}
.na-qtable tbody tr:last-child td {
	padding-bottom: 25px;
}
.na-qq__note {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.28;
	color: var(--wp--preset--color--gray-body);
	margin: 43px auto 0 !important;
}
.na-qq__cta {
	display: flex;
	align-items: center;
	gap: 111px;
	margin-top: 36px;
}
.na-qq__cta::before,
.na-qq__cta::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #609c95;
}
.na-qq__cta .wp-block-buttons {
	flex: none;
}
@media (max-width: 900px) {
	.na-qq__h {
		font-size: 35px;
		padding-inline: 24px;
	}
	.na-qtable {
		margin-left: 24px !important;
		margin-right: 24px !important;
	}
	.na-qq__note {
		padding-inline: 24px;
	}
	.na-qq__cta {
		padding-inline: 24px;
	}
	.na-qtable th:first-child,
	.na-qtable td:first-child {
		width: 130px;
		padding: 10px 12px;
	}
	.na-qtable th:last-child,
	.na-qtable td:last-child {
		padding: 10px 16px;
	}
	.na-qtable thead th {
		font-size: 20px;
		height: 56px;
	}
	.na-qtable tbody td {
		font-size: 16px;
		height: auto;
	}
	.na-qq__cta {
		gap: 24px;
	}
}

/* ---- Reqs & Disq: basic requirements ---- */
.na-breqs {
	position: relative;
}
.na-breqs__grid {
	display: grid;
	grid-template-columns: 740px 1fr;
	align-items: start;
}
.na-breqs__grid > * {
	margin-block-start: 0;
	min-width: 0;
}
.na-breqs__intro {
	padding: 110px 60px 40px 80px;
	position: sticky;
	top: 0;
}
.na-breqs__h {
	font-size: 50px;
	line-height: 0.9;
	font-weight: 700;
	margin: 0 0 33px !important;
}
.na-breqs__p {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.28;
	color: var(--wp--preset--color--ink);
	margin: 0;
	max-width: 541px;
}
.na-breqs__p + .na-breqs__p {
	margin-top: 33px;
}
.na-breqs__cards {
	background: var(--wp--preset--color--cream-bg);
	padding: 77px 0 24px;
}
.na-breqs__cards > * {
	margin-block-start: 0;
}
.na-breqs__card:nth-child(2),
.na-breqs__card:nth-child(5),
.na-breqs__card:nth-child(7) {
	min-height: 343px;
}
.na-breqs__card:nth-child(7) {
	align-items: start;
}
.na-breqs__card:nth-child(7) .na-breqs__body {
	padding-top: 44px;
}
.na-breqs__card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 247px;
	align-items: center;
	min-height: 290px;
	border-bottom: 1px solid #609c95;
	padding: 25px 0;
	box-sizing: border-box;
}
.na-breqs__body {
	padding-left: 27px;
	max-width: 435px;
	box-sizing: border-box;
}
.na-breqs__title {
	font-size: 24px;
	line-height: 1.05;
	font-weight: 700;
	max-width: 400px;
	margin: 0 0 18px !important;
}
.na-breqs__text {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 16px;
	line-height: 21px;
	color: var(--wp--preset--color--ink);
	margin: 0;
	max-width: 410px;
}
.na-breqs__photo {
	margin: 0;
	justify-self: end;
}
.na-breqs__photo img {
	display: block;
	width: 247px;
	height: 239px;
	object-fit: cover;
	border-radius: 28px 0 0 28px;
}
@media (max-width: 1339px) {
	.na-breqs__grid {
		grid-template-columns: 1fr 1fr;
	}
	.na-breqs__intro {
		padding: 60px 40px 40px 24px;
	}
	.na-breqs__card {
		grid-template-columns: 1fr 200px;
	}
	.na-breqs__photo img {
		width: 200px;
	}
}
@media (max-width: 900px) {
	.na-breqs__grid {
		grid-template-columns: 1fr;
	}
	.na-breqs__h {
		font-size: 35px;
	}
	.na-breqs__intro {
		position: static;
		padding: 48px 24px 32px;
	}
	.na-breqs__cards {
		padding: 24px 0;
	}
	.na-breqs__card {
		grid-template-columns: 1fr;
		min-height: 0;
		padding: 28px 24px;
	}
	.na-breqs__body {
		padding-left: 0;
		max-width: none;
	}
	.na-breqs__text {
		max-width: none;
	}
	.na-breqs__photo {
		justify-self: start;
		margin-top: 20px;
	}
	.na-breqs__photo img {
		width: 100%;
		max-width: 340px;
		height: 200px;
		border-radius: 20px;
	}
}

/* ---- Reqs & Disq: disqualifiers ---- */
.na-disq__grid {
	display: grid;
	grid-template-columns: 648px 1fr;
	gap: 30px;
	align-items: start;
	padding-left: 80px;
}
.na-disq__grid > * {
	margin-block-start: 0;
	min-width: 0;
}
.na-disq__h {
	font-size: 50px;
	line-height: 0.9;
	font-weight: 700;
	margin: 0 0 33px !important;
}
.na-disq__p {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.28;
	color: var(--wp--preset--color--ink);
	margin: 0 0 33px !important;
}
ul.na-xlist {
	list-style: none;
	margin: 0 !important;
	padding: 0;
	max-width: 620px;
}
ul.na-xlist li {
	position: relative;
	padding-left: 50px;
	min-height: 30px;
	font-size: 18px;
	font-weight: 500;
	line-height: 23px;
	color: #000000;
	margin-bottom: 17px;
}
ul.na-xlist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Ccircle cx='15' cy='15' r='14.2' stroke='%23305549' stroke-width='1.5'/%3E%3Cpath d='M11 11l8 8M19 11l-8 8' stroke='%23305549' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: 30px 30px;
	background-repeat: no-repeat;
}
.na-disq__right {
	display: flex;
	flex-direction: column;
}
.na-disq__photo {
	margin: 0 0 35px;
}
.na-disq__photo img {
	display: block;
	width: 100%;
	height: 399px;
	object-fit: cover;
	border-radius: 28px 0 0 28px;
}
.na-disq__note {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sage-light);
	border-radius: 28px 0 0 28px;
	padding: 20px;
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 23px;
	color: var(--wp--preset--color--ink);
	margin: 0 0 26px !important;
}
.na-disq__note strong {
	font-weight: 700;
}
@media (max-width: 1100px) {
	.na-disq__grid {
		grid-template-columns: 1fr;
		padding-left: 24px;
		padding-right: 24px;
	}
}
@media (max-width: 900px) {
	.na-disq__h {
		font-size: 35px;
	}
	.na-disq__photo img {
		height: auto;
		aspect-ratio: 682 / 399;
		border-radius: 28px;
	}
	.na-disq__note {
		border-radius: 20px;
	}
}

/* ---- Surrogates: Do I Qualify (check list + bleeding photo) ---- */
.na-qual {
	position: relative;
	padding: 66px 0 69px;
	/* The photo bleeds past the right viewport edge; without a clip it widens
	   the document and shifts every centred column on the page. */
	overflow-x: clip;
}
/* The frame draws a 1px ink rule across the 1280 column at the band's top. */
.na-qual::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1280px;
	max-width: calc(100% - 48px);
	height: 1px;
	background: var(--wp--preset--color--ink);
}
.na-qual__grid {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
}
.na-qual__grid > * {
	margin-block-start: 0;
}
.na-qual__left {
	max-width: 640px;
}
.na-qual__eyebrow {
	font-size: 18px;
	line-height: 23px;
	margin: 0 0 21px;
}
.na-qual__h {
	font-size: clamp(34px, 3.4722vw, 50px);
	line-height: 0.89318;
	margin: 0 0 33px;
}
.na-qual__p {
	font-size: 18px;
	font-weight: 500;
	line-height: 23px;
	color: var(--wp--preset--color--ink);
	max-width: 617px;
	margin: 0 0 33px;
}
/* Anchored to the column's centre so the photo keeps bleeding off the right
   viewport edge past 1440, as the frame draws it (758..1514 of 1440). */
.na-qual__photo {
	position: absolute;
	top: 44px;
	left: calc(50% + 38px);
	width: 756px;
	margin: 0;
}
.na-qual__photo img {
	display: block;
	width: 100%;
	height: 528px;
	object-fit: cover;
	border-radius: 28px;
}
/* This frame's list rhythm is a 50px pitch (30px row + 20px gap). */
.na-qual .na-check li {
	min-height: 30px;
}
.na-qual .na-check li + li {
	margin-top: 20.33px;
}
@media (max-width: 1100px) {
	.na-qual {
		padding: 56px 24px;
	}
	.na-qual__photo {
		position: static;
		width: 100%;
		max-width: 640px;
		margin-top: 32px;
	}
	.na-qual__photo img {
		height: auto;
		aspect-ratio: 756 / 528;
	}
}

/* ---- Surrogates: LP guide links (circle photo + serif lead + pill) ---- */
.na-lpx {
	position: relative;
	padding: 73px 0 77px;
}
.na-lpx::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1280px;
	max-width: calc(100% - 48px);
	height: 1px;
	background: var(--wp--preset--color--ink);
}
.na-lpx__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 76px;
	max-width: 1280px;
	margin: 0 auto;
}
.na-lpx__grid > * {
	margin-block-start: 0;
}
/* The frame's centre divider: a 242px teal hairline between the halves. */
.na-lpx__grid::before {
	content: "";
	position: absolute;
	top: -51px;
	left: 50%;
	width: 1px;
	height: 242px;
	background: #609c95;
}
.na-lpx__item {
	display: grid;
	grid-template-columns: 137px 1fr;
	column-gap: 33px;
	align-items: start;
}
.na-lpx__item > * {
	margin-block-start: 0;
}
.na-lpx__photo {
	margin: 0;
	grid-row: 1 / 3;
}
.na-lpx__photo img {
	display: block;
	width: 137px;
	height: 137px;
	border-radius: 50%;
	object-fit: cover;
}
.na-lpx__p {
	font-size: 18px;
	font-weight: 500;
	line-height: 23px;
	color: var(--wp--preset--color--ink);
	margin: 2px 0 0;
	max-width: 440px;
	/* The frame fixes the pill row at 84px below the item top for both halves,
	   independent of the lead's line count. */
	min-height: 69px;
}
.na-lpx__cta {
	grid-column: 2;
	margin-top: 13px;
}
.na-lpx__cta .wp-block-button__link {
	padding: 17.5px 26px;
	line-height: 20px;
}
@media (max-width: 1100px) {
	.na-lpx {
		padding: 56px 24px;
	}
	.na-lpx__grid {
		grid-template-columns: 1fr;
		row-gap: 44px;
	}
	.na-lpx__grid::before {
		display: none;
	}
}
/* Phones keep the two-column row: circle photo left, text right with the
   pill under it — the same treatment the IP page uses. */
@media (max-width: 600px) {
	.na-lpx__item {
		grid-template-columns: 96px 1fr;
		column-gap: 18px;
	}
	.na-lpx__photo img {
		width: 96px;
		height: 96px;
	}
	.na-lpx__p {
		min-height: 0;
		margin-top: 0;
	}
	.na-lpx__p br {
		display: none;
	}
	.na-lpx__cta {
		margin-top: 14px;
	}
}

/* ---- Reqs & Disq: screening journey timeline ---- */
.na-journey__eyebrow {
	font-size: 18px;
	margin-bottom: 21px;
}
.na-journey__h {
	font-size: 50px;
	line-height: 0.9;
	font-weight: 700;
	margin: 0 auto 33px !important;
}
.na-journey__sub {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.28;
	color: var(--wp--preset--color--gray-body);
	max-width: 725px;
	margin: 0 auto !important;
}
.na-journey__list {
	position: relative;
	max-width: 790px;
	margin: 95px auto 0;
}
.na-journey__list::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -40px;
	bottom: 54px;
	border-left: 2px dashed var(--wp--preset--color--teal);
	transform: translateX(-1px);
}
.na-journey__list::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -46px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal);
	transform: translateX(-6px);
}
.na-jcard {
	position: relative;
	background: var(--wp--preset--color--white);
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(42, 42, 40, 0.07);
	display: grid;
	grid-template-columns: 63px 1fr;
	align-items: start;
	padding: 29px 96px 29px 41px;
	margin-bottom: 25px;
	box-sizing: border-box;
}
.na-jcard > * {
	margin-block-start: 0;
}
.na-jcard__num {
	width: 37px;
	height: 37px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
	font-size: 20px;
	font-weight: 700;
	line-height: 37px;
	text-align: center;
	margin: 0 !important;
	grid-row: 1 / 3;
}
.na-jcard__title {
	font-size: 20px;
	line-height: 1;
	font-weight: 700;
	margin: 0 0 16px !important;
	padding-top: 1px;
}
.na-jcard__text {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 15px;
	line-height: 20px;
	color: var(--wp--preset--color--ink);
	margin: 0;
	max-width: 586px;
}
@media (max-width: 900px) {
	.na-journey__h {
		font-size: 35px;
	}
	.na-journey__list {
		margin-top: 48px;
		padding-inline: 24px;
	}
	.na-journey__list::before {
		top: -28px;
	}
	.na-journey__list::after {
		top: -34px;
	}
	.na-journey__h,
	.na-journey__sub {
		padding-inline: 24px;
	}
	.na-jcard {
		padding: 24px;
		grid-template-columns: 53px 1fr;
	}
}

/* ---- Reqs & Disq: compensation & support ---- */
.na-supp__grid {
	display: grid;
	grid-template-columns: 640px 1fr;
	gap: 38px;
	align-items: start;
	padding-left: 80px;
}
.na-supp__grid > * {
	margin-block-start: 0;
	min-width: 0;
}
.na-supp__eyebrow {
	font-size: 18px;
	margin-bottom: 21px;
}
.na-supp__h {
	font-size: 50px;
	line-height: 0.9;
	font-weight: 700;
	margin: 0 0 33px !important;
}
.na-supp__p {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.28;
	color: var(--wp--preset--color--gray-body);
	margin: 0 0 33px !important;
	max-width: 617px;
}
.na-supp__list {
	max-width: 620px;
}
ul.na-supp__list li {
	font-size: 18px;
	line-height: 23px;
}
.na-supp__right {
	padding-top: 44px;
}
.na-supp__right > * {
	margin-block-start: 0;
}
.na-supp__photo {
	margin: 0 0 61px;
}
.na-supp__photo img {
	display: block;
	width: 100%;
	height: 484px;
	object-fit: cover;
	border-radius: 28px 0 0 28px;
}
.na-supp__row {
	display: flex;
	align-items: flex-start;
	gap: 39px;
}
.na-supp__row > * {
	margin-block-start: 0;
}
.na-supp__circle {
	margin: 0;
	flex: none;
}
.na-supp__circle img {
	display: block;
	width: 137px;
	height: 137px;
	border-radius: 50%;
	object-fit: cover;
}
.na-supp__cta {
	padding-top: 13px;
	max-width: 470px;
}
.na-supp__cta .wp-block-buttons,
.na-supp__cta .wp-block-button {
	margin-block-start: 0;
	margin-top: 0;
}
.na-supp__ctatext {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.28;
	color: var(--wp--preset--color--gray-body);
	margin: 0 0 21px !important;
}
@media (max-width: 1100px) {
	.na-supp__grid {
		grid-template-columns: 1fr;
		padding-left: 24px;
		padding-right: 24px;
	}
	.na-supp__right {
		padding-top: 0;
	}
	.na-supp__photo img {
		height: auto;
		aspect-ratio: 682 / 484;
		border-radius: 28px;
	}
}
@media (max-width: 600px) {
	.na-supp__row {
		gap: 20px;
	}
	.na-supp__circle img {
		width: 110px;
		height: 110px;
	}
}
@media (max-width: 900px) {
	.na-supp__h {
		font-size: 35px;
	}
	.na-supp__cta {
		padding-top: 0;
	}
	.na-supp__photo img {
		max-width: 100%;
	}
}

/* ================================================================
   Blog archive (/blog/) — hero
   ================================================================ */

/* The hero band is 758 tall in the frame, with the content block starting at
   191 and the search row ending at 524. */
.na-hero--blog {
	min-height: 758px;
}
/* The blog frame washes the photo once, flat: no extra gradient behind the
   nav (that belongs to the heroes whose photo runs dark at the top). */
body:has(main .na-hero--blog) .na-header {
	background: transparent;
}
/* Rectangle 1 on this frame is a near-uniform 0.65 white wash: the diagonal
   gradient's live range sits outside the frame, so it reads flat. */
.na-hero--blog .na-hero__photo::after {
	background: rgba(255, 255, 255, 0.63);
}
.na-hero--blog .na-hero__content {
	max-width: 830px;
	text-align: center;
	padding: 191px 24px 234px;
}
.na-hero--blog .na-hero__title {
	font-size: 64px;
	line-height: 60px;
	/* The frame breaks after "Insights"; Archivo sets narrower than GT America,
	   so the box has to hold the break rather than the glyph widths. */
	max-width: 660px;
	margin: 0 auto 27px !important;
}
.na-hero--blog .na-hero__sub {
	max-width: 790px;
	line-height: 23px;
	margin: 0 auto !important;
}
.na-hero--blog .na-eyebrow {
	line-height: 23px;
	margin: 0 0 27px;
}

/* Search: 345x55 pill + a 71x55 teal button, 10 apart. */
.na-blog-search {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 35px;
}
.na-blog-search__field {
	width: 345px;
	max-width: 100%;
	height: 55px;
	padding: 0 26px;
	border: 1px solid var(--wp--preset--color--deep-green, #305549);
	border-radius: 250px;
	background: #fff;
	color: var(--wp--preset--color--deep-green, #305549);
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: -0.16px;
}
.na-blog-search__field::placeholder {
	color: var(--wp--preset--color--deep-green, #305549);
	opacity: 1;
}
.na-blog-search__field:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal, #25a0a9);
	outline-offset: 2px;
}
.na-blog-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 71px;
	height: 55px;
	padding: 0;
	border: 0;
	border-radius: 250px;
	background: var(--wp--preset--color--teal, #25a0a9);
	cursor: pointer;
	transition: background-color 220ms cubic-bezier(0.2, 0, 0.2, 1), transform 220ms cubic-bezier(0.2, 0, 0.2, 1);
}
.na-blog-search__submit:hover {
	background: #1d8087;
	transform: translateY(-1px);
}
.na-blog-search__submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--deep-green, #305549);
	outline-offset: 2px;
}
.na-blog-search__submit img {
	width: 20px;
	height: 20px;
}

@media (max-width: 900px) {
	.na-hero--blog {
		min-height: 0;
	}
	.na-hero--blog .na-hero__content {
		padding: 150px 24px 120px;
	}
	.na-hero--blog .na-hero__title {
		font-size: 40px;
		line-height: 1.05;
	}
}
@media (max-width: 480px) {
	.na-blog-search__field {
		width: 100%;
	}
}

/* ---- Blog: featured article band (Option C) ---- */
.na-featured {
	background: var(--wp--preset--color--mint-bg, #eef9eb);
	padding: 0;
}
.na-featured__grid {
	position: relative;
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	min-height: 597px;
	padding: 81px 80px;
}
.na-featured__text {
	max-width: 540px;
}
/* Meta row: 31px calendar icon, 10 to the date, 26 to the category pill. */
.na-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 21px;
	font-size: 18px;
	font-weight: 500;
	line-height: 23px;
	color: var(--wp--preset--color--deep-green, #305549);
}
.na-meta__icon {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
}
.na-meta__date {
	margin-right: 16px;
}
.na-meta__icon + .na-meta__date {
	margin-left: 7px;
}
.na-meta__pill {
	display: inline-flex;
	align-items: center;
	padding: 5px 8px;
	border-radius: 10px;
	background: #d6e8cf;
	color: var(--wp--preset--color--deep-green, #305549);
	text-decoration: none;
	transition: background-color 220ms cubic-bezier(0.2, 0, 0.2, 1);
}
.na-meta__pill:hover {
	background: #c4dcb9;
}
.na-featured__title {
	margin: 0 0 33px;
	max-width: 440px;
	font-size: 50px;
	font-weight: 700;
	line-height: 44.66px;
	color: var(--wp--preset--color--ink, #2a2a28);
}
.na-featured__title a {
	color: inherit;
	text-decoration: none;
}
.na-featured__title a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.na-featured__excerpt {
	margin: 0 0 33px;
	font-size: 18px;
	line-height: 23px;
	color: var(--wp--preset--color--ink, #2a2a28);
}
.na-featured__cta {
	margin: 0;
}
/* The design's link pill: 55 tall, fully round, teal. */
.na-btn-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 55px;
	padding: 0 26px;
	border-radius: 250px;
	background: var(--wp--preset--color--teal, #25a0a9);
	color: #fff;
	font-size: 16px;
	line-height: 20px;
	text-decoration: none;
	transition: background-color 220ms cubic-bezier(0.2, 0, 0.2, 1), transform 220ms cubic-bezier(0.2, 0, 0.2, 1);
}
.na-btn-pill:hover {
	background: #1d8087;
	color: #fff;
	transform: translateY(-1px);
}
/* The rule above dresses a bare <a>. On a core button block the editor puts
   the class on the WRAPPER instead, and the wrapper then painted a second,
   wider pill behind the link's own — invisible at rest, because both were
   teal, but obvious on hover: the link took the theme's green-deep while the
   strips either side of it took this rule's darker teal. As a wrapper the
   class must paint nothing and let the link be the only pill. */
.na-btn-pill:has(> .wp-block-button__link) {
	display: inline-block;
	min-height: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	transition: none;
}
.na-btn-pill:has(> .wp-block-button__link):hover {
	background: none;
	transform: none;
}
.na-featured__photo {
	position: absolute;
	top: 45px;
	left: 725px;
	display: block;
	width: 634px;
	height: 465px;
	border-radius: 28px;
	overflow: hidden;
}
.na-featured__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.na-featured__photo:hover img {
	transform: scale(1.03);
}

@media (max-width: 1200px) {
	.na-featured__grid {
		display: flex;
		flex-direction: column;
		gap: 40px;
		min-height: 0;
		padding: 60px 24px;
	}
	.na-featured__photo {
		position: static;
		width: 100%;
		height: auto;
		aspect-ratio: 634 / 465;
		order: -1;
	}
	.na-featured__text {
		max-width: none;
	}
	.na-featured__title {
		max-width: none;
		font-size: 35px;
		line-height: 1.05;
	}
}

/* ---- Blog: listing (heading, toolbar, article cards, pagination) ---- */
.na-listing {
	background: #fff;
}
.na-listing__inner {
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	padding: 53px 80px 96px;
}
.na-listing__h {
	margin: 0;
	font-size: 50px;
	font-weight: 700;
	line-height: 44.66px;
	color: var(--wp--preset--color--ink, #2a2a28);
}

/* Toolbar: filters left at 80, sort group right, both on the 151 row. */
.na-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 53px 0 0;
	min-height: 57px;
}
.na-toolbar__group {
	display: flex;
	align-items: center;
	gap: 65px;
}
.na-toolbar__group--sort {
	gap: 41px;
}
.na-toolbar__label {
	/* The frame's own label boxes: 84 for Filters:, 88 for SORT BY:, so the
	   controls line up at 229.5 and 952.5 whatever the font metrics do. */
	min-width: 84px;
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 700;
	line-height: 57px;
	color: #25272a;
}
.na-toolbar__group--sort .na-toolbar__label {
	min-width: 88px;
}
/* Sort control box is 240 in the frame (211 label + caret); pinning it keeps
   the control anchored while the count stays flush right at 1360. */
.na-toolbar__group--sort .na-select__input,
.na-toolbar__group--sort .na-select__button {
	min-width: 241px;
	justify-content: space-between;
}
.na-toolbar__group--sort .na-toolbar__label {
	font-weight: 600;
}
.na-toolbar__count {
	font-size: 20px;
	font-weight: 700;
	line-height: 57px;
	letter-spacing: 1px;
	color: #25272a;
	white-space: nowrap;
}
.na-select {
	position: relative;
	display: inline-flex;
	align-items: center;
}
/* No-JS baseline: the native control, with the brand chevron drawn on. */
.na-select__input {
	appearance: none;
	-webkit-appearance: none;
	padding: 0 24px 0 0;
	border: 0;
	background: url("assets/img/icon-caret-down.svg") no-repeat right center / 13px 8px;
	color: #25272a;
	font-family: inherit;
	font-size: 20px;
	font-weight: 500;
	line-height: 57px;
	letter-spacing: 1px;
	cursor: pointer;
}
.na-select__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal, #25a0a9);
	outline-offset: 4px;
}
/* Enhanced: the native select stays as the submitted value, out of sight. */
.na-select--custom .na-select__native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.na-select__button {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #25272a;
	font-family: inherit;
	font-size: 20px;
	font-weight: 500;
	line-height: 57px;
	letter-spacing: 1px;
	cursor: pointer;
}
.na-select__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal, #25a0a9);
	outline-offset: 4px;
	border-radius: 4px;
}
.na-select__chevron {
	width: 13px;
	height: 8px;
	flex: 0 0 auto;
	background: url("assets/img/icon-caret-down.svg") no-repeat center / contain;
	transition: transform 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
.na-select.is-open .na-select__chevron {
	transform: rotate(180deg);
}
.na-select__list {
	position: absolute;
	top: calc(100% - 6px);
	left: -16px;
	z-index: 30;
	min-width: calc(100% + 32px);
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 8px;
	list-style: none;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(42, 42, 40, 0.14);
	border: 1px solid rgba(48, 85, 73, 0.12);
	animation: na-select-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes na-select-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}
.na-no-motion .na-select__list {
	animation: none;
}
.na-select__option {
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--wp--preset--color--ink, #2a2a28);
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: 0;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 160ms cubic-bezier(0.2, 0, 0.2, 1), color 160ms cubic-bezier(0.2, 0, 0.2, 1);
}
.na-select__option:hover,
.na-select__option:focus-visible {
	background: var(--wp--preset--color--mint-bg, #eef9eb);
	outline: none;
}
.na-select__option[aria-selected="true"] {
	background: var(--wp--preset--color--mint-bg, #eef9eb);
	color: var(--wp--preset--color--deep-green, #305549);
	font-weight: 500;
}
.na-select__option[aria-selected="true"]::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal, #25a0a9);
	vertical-align: middle;
}
.na-toolbar__apply {
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 250px;
	background: var(--wp--preset--color--teal, #25a0a9);
	color: #fff;
	cursor: pointer;
}

/* Cards: 1280x404, photo 634 wide flush left, text column at 698. */
.na-cardlist {
	display: flex;
	flex-direction: column;
	gap: 53px;
	margin-top: 53px;
}
.na-card {
	position: relative;
	display: grid;
	grid-template-columns: 634px 1fr;
	align-items: start;
	height: 404px;
	border-radius: 10px;
	background: var(--wp--preset--color--cream-bg, #fffaf4);
	overflow: hidden;
}
.na-card__photo {
	display: block;
	width: 634px;
	height: 404px;
	overflow: hidden;
}
.na-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.na-card:hover .na-card__photo img {
	transform: scale(1.03);
}
/* Posts whose legacy image is gone upstream keep the band's rhythm with the
   brand wash and the mark, instead of a hole (CONTENT-NEEDED #8). */
.na-blog-card__img--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(140deg, #eef9eb 0%, #d6e8cf 100%);
}
.na-blog-card__img--fallback img {
	width: 200px;
	height: auto;
	opacity: 0.55;
	object-fit: contain;
}
.na-card__text {
	padding: 54px 41px 0 64px;
	max-width: 605px;
}
.na-card__title {
	margin: 0 0 20px;
	max-width: 440px;
	/* Two lines for the title, three for the excerpt: the frame's card is a
	   fixed 404 box, and legacy posts have wildly different copy lengths. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 36px;
	font-weight: 700;
	line-height: 38.88px;
	color: var(--wp--preset--color--ink, #2a2a28);
}
.na-card__title a {
	color: inherit;
	text-decoration: none;
}
.na-card__title a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.na-card__excerpt {
	margin: 0 0 20px;
	max-width: 540px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 18px;
	line-height: 23px;
	color: var(--wp--preset--color--ink, #2a2a28);
}
.na-card__cta {
	margin: 0;
}

/* Pagination is not drawn in the frame; 166 posts need it (BUILD_LOG). */
.na-pagination {
	margin-top: 53px;
}
.na-pagination ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.na-pagination a,
.na-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--deep-green, #305549);
	border-radius: 250px;
	color: var(--wp--preset--color--deep-green, #305549);
	font-size: 16px;
	text-decoration: none;
	transition: background-color 220ms cubic-bezier(0.2, 0, 0.2, 1), color 220ms cubic-bezier(0.2, 0, 0.2, 1);
}
.na-pagination a:hover {
	background: var(--wp--preset--color--mint-bg, #eef9eb);
}
.na-pagination .current {
	background: var(--wp--preset--color--teal, #25a0a9);
	border-color: var(--wp--preset--color--teal, #25a0a9);
	color: #fff;
}
.na-pagination .dots {
	border-color: transparent;
}
.na-listing__empty {
	margin: 53px 0 24px;
	font-size: 18px;
	color: var(--wp--preset--color--ink, #2a2a28);
}
.na-listing__empty-cta {
	margin: 0;
}

@media (max-width: 1328px) {
	.na-listing__inner {
		padding: 53px 24px 100px;
	}
	.na-card {
		grid-template-columns: 45% 1fr;
	}
	.na-card__photo {
		width: 100%;
		height: 100%;
	}
	.na-card__text {
		padding: 40px 32px;
	}
}
@media (max-width: 900px) {
	.na-listing__h {
		font-size: 35px;
		line-height: 1.1;
	}
	.na-toolbar {
		flex-wrap: wrap;
		gap: 12px 24px;
	}
	.na-toolbar__group {
		flex-wrap: wrap;
		gap: 12px 20px;
	}
	/* The frame's fixed control boxes are desktop geometry; on a phone they
	   would push the row past the viewport. */
	.na-toolbar__group--sort .na-select__input,
	.na-toolbar__group--sort .na-select__button {
		min-width: 0;
	}
	.na-toolbar__label,
	.na-toolbar__group--sort .na-toolbar__label {
		min-width: 0;
		line-height: 1.4;
	}
	.na-toolbar__count {
		line-height: 1.4;
	}
	.na-card {
		grid-template-columns: 1fr;
		height: auto;
	}
	.na-card__photo {
		height: auto;
		aspect-ratio: 634 / 404;
	}
	.na-card__title {
		font-size: 28px;
		line-height: 1.1;
		max-width: none;
	}
	.na-cardlist {
		gap: 32px;
	}
}

/* ---- Blog: closing CTA (same band as Intended Parents, own markup) ---- */
.na-final--ip .na-final__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
}
.na-btn-pill--outline {
	background: transparent;
	border: 1px solid var(--wp--preset--color--deep-green, #305549);
	color: var(--wp--preset--color--deep-green, #305549);
}
.na-btn-pill--outline:hover {
	background: var(--wp--preset--color--deep-green, #305549);
	color: #fff;
}

/* ================================================================
   Blog single article — derived from the design system, no Figma frame
   ================================================================ */
.na-single {
	position: relative;
	display: block;
	padding: 0 24px;
	background: #fff;
}
.na-single__head {
	position: relative;
	box-sizing: border-box;
	max-width: 820px;
	margin: 0 auto;
	padding: 72px 0 40px;
	text-align: center;
}
.na-single__crumbs {
	margin: 0 0 21px;
	font-size: 18px;
	font-weight: 500;
	color: var(--wp--preset--color--deep-green, #305549);
}
.na-single__crumbs a {
	color: inherit;
	text-decoration: none;
}
.na-single__crumbs a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.na-single__title {
	margin: 0 0 27px;
	font-size: clamp(34px, 3.9vw, 56px);
	font-weight: 700;
	line-height: 1.05;
	color: var(--wp--preset--color--ink, #2a2a28);
}
.na-single__meta {
	justify-content: center;
}
.na-single__read {
	margin-left: 16px;
}
.na-single__photo {
	/* Sits with the reading column rather than dominating the viewport. */
	max-width: 820px;
	max-height: 420px;
	margin: 0 auto 48px;
	border-radius: 28px;
	overflow: hidden;
}
.na-single__photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 420px;
	object-fit: cover;
}
.na-single__body {
	max-width: 800px;
	margin: 0 auto;
	padding-bottom: 96px;
	/* The press-mention posts are two lines long; keep them off the band below
	   instead of letting the footer ride up under the headline. */
	min-height: 220px;
	font-family: var(--wp--preset--font-family--serif, "IBM Plex Serif", Georgia, serif);
	font-size: 18px;
	line-height: 30px;
	color: #373737;
}
.na-single__body > * + * {
	margin-top: 24px;
}
.na-single__body h2,
.na-single__body h3,
.na-single__body h4 {
	font-family: var(--wp--preset--font-family--sans, inherit);
	color: var(--wp--preset--color--ink, #2a2a28);
	line-height: 1.15;
	margin-top: 48px;
}
.na-single__body h2 {
	font-size: 35px;
	font-weight: 700;
}
.na-single__body h3 {
	font-size: 26px;
	font-weight: 700;
}
.na-single__body h4 {
	font-size: 21px;
	font-weight: 500;
}
.na-single__body a {
	color: var(--wp--preset--color--teal, #25a0a9);
	text-underline-offset: 3px;
}
.na-single__body a:hover {
	color: var(--wp--preset--color--deep-green, #305549);
}
.na-single__body ul,
.na-single__body ol {
	padding-left: 24px;
}
.na-single__body li + li {
	margin-top: 10px;
}
.na-single__body img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}
.na-single__body blockquote {
	margin: 40px 0;
	padding: 8px 0 8px 24px;
	border-left: 3px solid var(--wp--preset--color--sage, #76a9a3);
	font-size: 21px;
}

/* Related articles */
.na-related {
	background: var(--wp--preset--color--mint-bg, #eef9eb);
}
.na-related__inner {
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	padding: 80px 80px 96px;
}
.na-related__h {
	margin: 0 0 40px;
	font-size: 50px;
	font-weight: 700;
	line-height: 44.66px;
	color: var(--wp--preset--color--ink, #2a2a28);
}
.na-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.na-rcard {
	display: flex;
	flex-direction: column;
	padding: 0 0 28px;
	border-radius: 10px;
	background: var(--wp--preset--color--cream-bg, #fffaf4);
	overflow: hidden;
}
.na-rcard__photo {
	display: block;
	aspect-ratio: 634 / 404;
	overflow: hidden;
}
.na-rcard__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.na-rcard:hover .na-rcard__photo img {
	transform: scale(1.03);
}
.na-rcard__meta {
	margin: 24px 28px 12px;
}
.na-rcard__title {
	margin: 0 28px 20px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--ink, #2a2a28);
}
.na-rcard__title a {
	color: inherit;
	text-decoration: none;
}
.na-rcard__title a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.na-rcard__cta {
	margin: auto 28px 0;
}

@media (max-width: 1023px) {
	.na-related__inner {
		padding: 56px 24px 64px;
	}
	.na-related__h {
		font-size: 35px;
		line-height: 1.1;
	}
	.na-related__grid {
		grid-template-columns: 1fr;
	}
	.na-single__head {
		padding: 48px 0 28px;
	}
}

/* Press-mention posts from the old site are a sentence plus "Link: <file>",
   pointing at a PDF, MP3 or doc in the uploads folder. Give those links a real
   affordance instead of a bare inline link. */
.na-single__body a[href$=".pdf"],
.na-single__body a[href*=".pdf?"],
.na-single__body a[href$=".mp3"],
.na-single__body a[href*=".mp3?"],
.na-single__body a[href$=".doc"],
.na-single__body a[href$=".docx"] {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border: 1px solid var(--wp--preset--color--deep-green, #305549);
	border-radius: 250px;
	color: var(--wp--preset--color--deep-green, #305549);
	font-family: var(--wp--preset--font-family--sans, inherit);
	font-size: 16px;
	line-height: 20px;
	text-decoration: none;
	transition: background-color 220ms cubic-bezier(0.2, 0, 0.2, 1), color 220ms cubic-bezier(0.2, 0, 0.2, 1);
}
.na-single__body a[href$=".pdf"]::before,
.na-single__body a[href*=".pdf?"]::before,
.na-single__body a[href$=".mp3"]::before,
.na-single__body a[href*=".mp3?"]::before,
.na-single__body a[href$=".doc"]::before,
.na-single__body a[href$=".docx"]::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: url("assets/img/icon-document.svg") no-repeat center / contain;
	mask: url("assets/img/icon-document.svg") no-repeat center / contain;
}
.na-single__body a[href$=".mp3"]::before,
.na-single__body a[href*=".mp3?"]::before {
	-webkit-mask-image: url("assets/img/icon-audio.svg");
	mask-image: url("assets/img/icon-audio.svg");
}
.na-single__body a[href$=".pdf"]:hover,
.na-single__body a[href*=".pdf?"]:hover,
.na-single__body a[href$=".mp3"]:hover,
.na-single__body a[href*=".mp3?"]:hover,
.na-single__body a[href$=".doc"]:hover,
.na-single__body a[href$=".docx"]:hover {
	background: var(--wp--preset--color--deep-green, #305549);
	color: #fff;
}

/* ---- Document viewer (press PDFs, MP3s and docs opened inside the site) ---- */
/* The viewer can be a one-line page ("that file is not available"), so this
   template keeps the footer on the bottom edge instead of letting it ride up. */
body.page-template-page-document .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
body.page-template-page-document .wp-site-blocks > main {
	flex: 1 0 auto;
}
.na-doc {
	display: flex;
	background: #fff;
}
.na-doc__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1000px;
	/* auto on all sides: centred horizontally, and vertically too when the file
	   is missing and the page would otherwise sit against the header. */
	margin: auto;
	padding: 56px 24px 96px;
}
.na-doc__back {
	margin: 0 0 20px;
	font-size: 16px;
}
.na-doc__back a {
	color: var(--wp--preset--color--deep-green, #305549);
	text-decoration: none;
}
.na-doc__back a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.na-doc__title {
	margin: 0 0 10px;
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--ink, #2a2a28);
}
.na-doc__meta {
	margin: 0 0 28px;
	font-size: 16px;
	color: var(--wp--preset--color--deep-green, #305549);
}
.na-doc__frame {
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--cream-bg, #fffaf4);
	border: 1px solid rgba(48, 85, 73, 0.15);
}
.na-doc__object {
	display: block;
	width: 100%;
	height: 78vh;
	min-height: 520px;
	border: 0;
}
.na-doc__fallback {
	margin: 0;
	padding: 40px 24px;
	text-align: center;
	color: var(--wp--preset--color--ink, #2a2a28);
}
.na-doc__audio {
	padding: 32px;
	border-radius: 10px;
	background: var(--wp--preset--color--mint-bg, #eef9eb);
}
.na-doc__audio audio {
	width: 100%;
}
.na-doc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 28px 0 0;
}

/* Phones cannot render a PDF in an object reliably; offer the file instead. */
@media (max-width: 781px) {
	.na-doc__inner {
		padding: 40px 20px 64px;
	}
	.na-doc__frame {
		display: none;
	}
}

/* Restored video and podcast embeds inside an article. */
.na-embed {
	position: relative;
	margin: 32px 0;
	border-radius: 10px;
	overflow: hidden;
	background: #000;
	aspect-ratio: 16 / 9;
}
.na-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.na-embed--audio {
	aspect-ratio: auto;
	height: 150px;
	background: var(--wp--preset--color--mint-bg, #eef9eb);
}

/* ---- 404 page (renders the "page-not-found" page; no Figma frame — reuses
   the blog single reading layout). The page always fills the viewport so the
   footer sits on the bottom edge even with a short body. ---- */
body:has(.na-404) .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
body:has(.na-404) .wp-site-blocks > main {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}
.na-404 {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.na-404__code {
	margin: 0 0 8px;
	font-size: clamp(56px, 8vw, 96px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--teal, #25a0a9);
}
.na-404__head {
	padding: 48px 0;
}
.na-404__title {
	margin-bottom: 24px;
}
.na-404__body {
	padding-top: 8px;
}

/* ---- Intended Parents: journey path (Process Section C) ----
   Nine steps zig-zagging around a serpentine spine. The layout is a plain
   three-column grid, one row per step: text in the outer column, the numbered
   circle in the middle one, aligned to the vertical centre of its own text
   block. That centring is the design's real rule, and because it comes from
   align-self rather than fixed offsets the band survives the client rewriting
   any step to any length.

   The spine itself is drawn by assets/js/na-path.js: it measures where the
   circles actually landed and builds the curve through them, so the line
   follows edited content and needs no second set of coordinates to keep in
   sync. With scripts off there is a static rule down the middle instead.
   Markup contract:
     .na-path__list > .na-pstep
       p.na-pstep__num     step number (becomes the circle)
       h3.na-pstep__title  pill heading
       p.na-pstep__p       step copy                                        */
.na-path {
	padding: 74px 0 73px;
}
.na-path__eyebrow {
	font-size: 18px;
	line-height: 23px;
	/* .na-eyebrow tracks out by 0.02em; this frame's eyebrow is set solid, so
	   the band's own line is 21px wider than drawn without this. */
	letter-spacing: 0;
	margin: 0 auto 21px;
}
.na-path__h {
	font-size: clamp(34px, 3.4722vw, 50px);
	line-height: 0.89318;
	margin: 0 auto;
}
.na-path__list {
	--na-path-col: 281px;
	--na-path-mid: 340px;
	/* Circle centres inside the middle column: the design puts the odd steps'
	   circle at x586 and the even steps' at x806 on a 1440 frame. */
	--na-path-lane-a: 62px;
	--na-path-lane-b: 282px;
	--na-path-circle: 76.5px;
	/* How far the dashed connector reaches from the circle centre. */
	--na-path-dash: 252px;
	position: relative;
	box-sizing: border-box;
	display: grid;
	row-gap: 0;
	width: 902px;
	max-width: 100%;
	margin: 92px auto 0;
	/* The frame does not centre this block under its own heading: the columns
	   sit 243 from the left edge and 295 from the right. Kept as drawn, as a
	   single offset that is trivial to drop if Angelo says it was a nudge. */
	left: -26px;
}
/* The spine sits behind everything and is never a hit target. */
.na-path__spine {
	position: absolute;
	left: 0;
	top: 0;
	overflow: visible;
	pointer-events: none;
	z-index: 0;
}
.na-path__spine path {
	fill: none;
	stroke: var(--wp--preset--color--sage-light, #b9cdb2);
	stroke-width: 11;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.na-path__spine circle {
	fill: var(--wp--preset--color--sage-light, #b9cdb2);
}
/* Scripts off: a straight rule stands in for the drawn curve so the band
   still reads as one connected journey. */
.na-path__list::before {
	content: "";
	position: absolute;
	top: -114px;
	bottom: 0;
	left: calc(var(--na-path-col) + (var(--na-path-lane-a) + var(--na-path-lane-b)) / 2);
	width: 11px;
	margin-left: -5.5px;
	border-radius: 5.5px;
	background: var(--wp--preset--color--sage-light, #b9cdb2);
	z-index: 0;
}
.na-path__list.has-spine::before {
	display: none;
}
.na-path__list > .na-pstep {
	margin-block: 0;
}
.na-pstep {
	position: relative;
	display: grid;
	grid-template-columns: var(--na-path-col) var(--na-path-mid) var(--na-path-col);
	grid-template-rows: repeat(3, auto);
	align-items: start;
	z-index: 1;
}
/* Each step owns a slot as tall as the gap the frame leaves between one
   step's copy and the next one's. The copy starts at the top of its slot and
   the circle centres itself against the copy, which is the frame's actual
   rule and the reason a long step still reads as pinned to its own
   paragraph.

   The slot values belong to a frame, not to the component, so they live
   under the band's modifier: --ip is the nine-step Intended Parents frame,
   --sur the seven-step one on Surrogates. Both frames put their circles on
   the same rhythm (345, 644, 920, 1189, 1468, 1770, 2037 ...); the slots
   differ only because the copy under each circle is a different length. */
.na-pstep {
	height: var(--na-pstep-slot, 280px);
	align-content: start;
	/* A step longer than its slot overflows into the gap opposite it, which is
	   what the frame does: neighbouring steps sit on opposite sides, so they
	   pass each other rather than collide. Same-side steps are two slots
	   (~560px) apart, so there is room for a client to write well past the
	   drawn length before anything meets. */
	overflow: visible;
}
.na-path--ip .na-pstep:nth-of-type(1) { --na-pstep-slot: 212px; }
.na-path--ip .na-pstep:nth-of-type(2) { --na-pstep-slot: 356px; }
.na-path--ip .na-pstep:nth-of-type(3) { --na-pstep-slot: 263px; }
.na-path--ip .na-pstep:nth-of-type(4) { --na-pstep-slot: 302px; }
.na-path--ip .na-pstep:nth-of-type(5) { --na-pstep-slot: 300px; }
.na-path--ip .na-pstep:nth-of-type(6) { --na-pstep-slot: 269px; }
.na-path--ip .na-pstep:nth-of-type(7) { --na-pstep-slot: 193px; }
.na-path--ip .na-pstep:nth-of-type(8) { --na-pstep-slot: 295px; }
.na-path--ip .na-pstep:nth-of-type(9) { --na-pstep-slot: 295px; }
/* Step 07 is the one circle the frame does not centre on its own copy: it
   sits 19px high of it. Kept, because the line is drawn through the circles
   and moving it moves the curve with it. */
.na-path--ip .na-pstep:nth-of-type(7) .na-pstep__num {
	top: -19px;
}
/* Surrogates frame (2126:17): seven steps, same circle rhythm, its own copy
   lengths. Its first step opens with a two-line pill, so the block starts
   higher than the Intended Parents one to keep circle 01 on the same line. */
.na-path--sur .na-path__list {
	margin-top: 79px;
}
.na-path--sur .na-pstep:nth-of-type(1) { --na-pstep-slot: 271.0px; }
.na-path--sur .na-pstep:nth-of-type(2) { --na-pstep-slot: 305.0px; }
.na-path--sur .na-pstep:nth-of-type(3) { --na-pstep-slot: 233.0px; }
.na-path--sur .na-pstep:nth-of-type(4) { --na-pstep-slot: 251.0px; }
.na-path--sur .na-pstep:nth-of-type(5) { --na-pstep-slot: 375.0px; }
.na-path--sur .na-pstep:nth-of-type(6) { --na-pstep-slot: 270.0px; }
.na-path--sur .na-pstep:nth-of-type(7) { --na-pstep-slot: 181.5px; }
/* Two steps in this frame run their copy wider than the 281px column: the
   frame gives step 05 374px and step 07 300px, and at 281 they would be a
   third taller and drag their circles off the rhythm. */
.na-path--sur .na-pstep:nth-of-type(5) .na-pstep__p {
	width: 374px;
}
.na-path--sur .na-pstep:nth-of-type(7) .na-pstep__p {
	width: 300px;
}
.na-pstep__title {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 36px;
	margin: 0;
	padding: 5px 23px;
	border: 2px solid var(--wp--preset--color--teal);
	border-radius: 26px;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
}
.na-pstep__p {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 19px;
	color: var(--wp--preset--color--ink);
}
/* The circle spans both text rows and centres against them, which is how the
   design pins every step to the middle of its own paragraph. */
.na-pstep__num {
	position: relative;
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
	justify-self: start;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--na-path-circle);
	height: var(--na-path-circle);
	margin: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--teal);
	box-shadow: 0 0 0 4.25px var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
	font-size: 48px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0;
}
/* The dashed run out to the copy, and the dot that terminates it. */
.na-pstep__num::before,
.na-pstep__num::after {
	content: "";
	position: absolute;
	top: 50%;
	z-index: -1;
}
.na-pstep__num::before {
	height: 2px;
	width: var(--na-path-dash);
	margin-top: -1px;
	background-image: repeating-linear-gradient(
		to right,
		var(--wp--preset--color--teal) 0 5px,
		transparent 5px 10.1px
	);
}
.na-pstep__num::after {
	width: 10.6px;
	height: 10.6px;
	margin-top: -5.3px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal);
}
/* Odd steps: circle on the near lane, copy in the right-hand column. */
.na-pstep:nth-of-type(odd) .na-pstep__num {
	margin-left: calc(var(--na-path-lane-a) - var(--na-path-circle) / 2);
}
.na-pstep:nth-of-type(odd) .na-pstep__title,
.na-pstep:nth-of-type(odd) .na-pstep__p {
	grid-column: 3;
}
.na-pstep:nth-of-type(odd) .na-pstep__num::before {
	left: 50%;
}
.na-pstep:nth-of-type(odd) .na-pstep__num::after {
	left: calc(50% + var(--na-path-dash) - 5.3px);
}
/* Even steps mirror it. */
.na-pstep:nth-of-type(even) .na-pstep__num {
	margin-left: calc(var(--na-path-lane-b) - var(--na-path-circle) / 2);
}
.na-pstep:nth-of-type(even) .na-pstep__title,
.na-pstep:nth-of-type(even) .na-pstep__p {
	grid-column: 1;
}
/* The frame's left-hand pills are not hugged to their words: they run to a
   common 264-283 band with the label centred, which is what stops a one-word
   step like "Insurance" reading as a stray tag against the long ones
   opposite. Expressed as a range so a client's longer label still fits and a
   shorter one still lines up. */
.na-path--ip .na-pstep:nth-of-type(even) .na-pstep__title {
	justify-content: center;
	min-width: 264px;
	max-width: 283px;
	text-align: center;
}
/* Measured from the circle centre: 838 - 586 on the right, 806 - 557 on the
   left. The frame is 3px asymmetric and the dot lands on the text edge. */
.na-pstep:nth-of-type(even) .na-pstep__num::before {
	width: 249px;
}
.na-pstep:nth-of-type(even) .na-pstep__num::after {
	right: calc(50% + 249px - 5.3px);
}
.na-pstep:nth-of-type(even) .na-pstep__num::before {
	right: 50%;
}
.na-pstep:nth-of-type(even) .na-pstep__num::after {
	right: calc(50% + var(--na-path-dash) - 5.3px);
}
.na-pstep__title {
	grid-row: 1;
}
/* Motion. The class is added by na-path.js, so nothing is hidden unless the
   script is there to reveal it again, and reduced-motion never gets it. */
.na-path--motion .na-pstep__num {
	opacity: 0;
	transform: scale(0.72);
	transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}
.na-path--motion .na-pstep__num::before {
	transform: scaleX(0);
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.09s;
}
.na-path--motion .na-pstep:nth-of-type(odd) .na-pstep__num::before {
	transform-origin: left center;
}
.na-path--motion .na-pstep:nth-of-type(even) .na-pstep__num::before {
	transform-origin: right center;
}
.na-path--motion .na-pstep__num::after {
	opacity: 0;
	transition: opacity 0.3s ease 0.5s;
}
.na-path--motion .na-pstep__title,
.na-path--motion .na-pstep__p {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.na-path--motion .na-pstep__title {
	transition-delay: 0.14s;
}
.na-path--motion .na-pstep__p {
	transition-delay: 0.2s;
}
.na-path--motion .na-pstep.is-on .na-pstep__num,
.na-path--motion .na-pstep.is-on .na-pstep__title,
.na-path--motion .na-pstep.is-on .na-pstep__p {
	opacity: 1;
	transform: none;
}
.na-path--motion .na-pstep.is-on .na-pstep__num::before {
	transform: scaleX(1);
}
.na-path--motion .na-pstep.is-on .na-pstep__num::after {
	opacity: 1;
}
/* The dot riding the head of the line while it draws. */
.na-path__spine .na-path__head {
	fill: var(--wp--preset--color--teal, #25a0a9);
	opacity: 0;
	transition: opacity 0.35s ease;
}
.na-path__list.is-drawing .na-path__head {
	opacity: 1;
}

/* Tablet and phone: the zig-zag collapses to a single lane on the left, which
   is the only honest way to keep a two-sided timeline readable once the
   columns can no longer sit side by side. The spine is rebuilt from the new
   circle positions by the same script, so the curve simply straightens. */
@media (max-width: 900px) {
	.na-path {
		padding: 56px 0 56px;
	}
	.na-path__list {
		--na-path-circle: 60px;
		/* Single lane: the desktop frame's off-centre nudge means nothing. */
		left: 0;
		width: 100%;
		max-width: 640px;
		margin-top: 56px;
		padding-inline: 24px;
		row-gap: 34px;
	}
	.na-path__list::before {
		/* Matches the shortened lead-in the script draws at this width. */
		top: -30px;
		left: calc(24px + var(--na-path-circle) / 2);
		width: 8px;
		margin-left: -4px;
	}
	.na-path__spine path {
		stroke-width: 8;
	}
	.na-pstep {
		grid-template-columns: var(--na-path-circle) 1fr;
		column-gap: 20px;
		/* The frame's slot heights are desktop geometry: in one narrow lane the
		   same copy runs far longer, so the rows have to size themselves or
		   the steps would sit on top of each other. */
		height: auto;
	}
	/* Nothing to nudge against once the circles share a lane. */
	.na-pstep:nth-of-type(7) .na-pstep__num {
		top: 0;
	}
	.na-path--sur .na-pstep:nth-of-type(5) .na-pstep__p,
	.na-path--sur .na-pstep:nth-of-type(7) .na-pstep__p {
		width: auto;
	}
	/* The common pill width belongs to the two-column frame. */
	.na-pstep:nth-of-type(even) .na-pstep__title {
		justify-content: flex-start;
		min-width: 0;
		max-width: 100%;
		text-align: left;
	}
	.na-pstep:nth-of-type(odd) .na-pstep__num,
	.na-pstep:nth-of-type(even) .na-pstep__num {
		grid-column: 1;
		margin-left: 0;
	}
	.na-pstep:nth-of-type(odd) .na-pstep__title,
	.na-pstep:nth-of-type(even) .na-pstep__title,
	.na-pstep:nth-of-type(odd) .na-pstep__p,
	.na-pstep:nth-of-type(even) .na-pstep__p {
		grid-column: 2;
	}
	/* The dashed run only means something when the copy sits across a gap. */
	.na-pstep__num::before,
	.na-pstep__num::after {
		content: none;
	}
	.na-pstep__num {
		align-self: start;
		font-size: 30px;
	}
	.na-pstep__title {
		min-height: 34px;
		padding: 5px 20px;
		font-size: 17px;
		line-height: 21px;
	}
	/* The frame's 19px leading belongs to a 281px column. In one wide lane the
	   lines get long, and 19px on a long line is hard to track. */
	.na-pstep__p {
		line-height: 23px;
	}
}
@media (max-width: 600px) {
	.na-path__list {
		--na-path-circle: 52px;
		padding-inline: 20px;
		row-gap: 30px;
	}
	.na-path__list::before {
		left: calc(20px + var(--na-path-circle) / 2);
	}
	.na-pstep {
		column-gap: 16px;
	}
	.na-pstep__num {
		font-size: 26px;
	}
	.na-pstep__title {
		font-size: 16px;
		padding: 5px 18px;
	}
	.na-pstep__p {
		font-size: 15px;
		line-height: 21px;
	}
}

/* ---- Founder media: portrait, video or written message ----
   The band's media slot takes whichever of the three the client wants, with
   no code change and no developer:

     photo            an Image block, exactly as the frame draws it
     video message    the same Image block with its link set to a video file
                      in the media library: the play button and the lightbox
                      appear by themselves (assets/js/na-media.js)
     written message  delete the image and type: the paragraphs get the
                      framed treatment below

   Keeping the poster as a normal Image block is what makes the switch a
   two-click job in wp-admin, and it means the band still matches the frame
   at rest. */
.na-founder__photo a {
	position: relative;
	display: block;
	/* The image already carries the frame's 28px radius. Rounding the anchor
	   too clips the same corners a second time, which shows up as a hairline
	   all the way round the portrait. */
}
/* Only a link that resolves to a video gets the play affordance, so an image
   linked to a normal page keeps looking like a plain photo. */
.na-founder__photo.is-video a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 28px;
	background: linear-gradient(180deg, rgba(42, 42, 40, 0) 55%, rgba(42, 42, 40, 0.34) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}
.na-founder__photo.is-video a:hover::before,
.na-founder__photo.is-video a:focus-visible::before {
	opacity: 1;
}
.na-founder__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	/* Flat white, no drop shadow: the portrait behind it is busy enough that a
	   soft shadow only reads as a smudge, and it cost more of the band's pixel
	   budget against the frame than the button itself. */
	background: rgba(255, 255, 255, 0.94);
	z-index: 2;
	pointer-events: none;
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.32s ease;
}
/* The triangle is drawn rather than shipped as an asset: one less file for
   the client to lose, and it stays crisp at any size. */
.na-founder__play::after {
	content: "";
	width: 0;
	height: 0;
	margin-left: 6px;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 18px solid var(--wp--preset--color--teal, #25a0a9);
}
.na-founder__photo a:hover .na-founder__play,
.na-founder__photo a:focus-visible .na-founder__play {
	transform: scale(1.08);
	background: #fff;
}
.na-founder__photo a:focus-visible {
	outline: 3px solid var(--wp--preset--color--teal, #25a0a9);
	outline-offset: 4px;
}
/* Written-message variant: no image in the slot, so the copy takes the frame
   the portrait would have had. */
.na-founder__media--text {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 632px;
	padding: 48px 44px;
	border-radius: 28px;
	background: var(--wp--preset--color--white, #fff);
}
.na-founder__media--text > * {
	margin-block: 0 18px;
}
.na-founder__media--text > *:last-child {
	margin-block-end: 0;
}

/* The video itself opens over the page, where a portrait clip has the room
   the band's own column cannot give it. */
.na-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: rgba(20, 26, 23, 0.82);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.na-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}
.na-lightbox__inner {
	position: relative;
	max-width: min(460px, 100%);
	max-height: 100%;
	transform: translateY(12px) scale(0.98);
	transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.na-lightbox.is-open .na-lightbox__inner {
	transform: none;
}
.na-lightbox video {
	display: block;
	width: 100%;
	max-height: calc(100vh - 64px);
	border-radius: 20px;
	background: #000;
}
.na-lightbox__close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset--color--ink, #2a2a28);
	font-size: 22px;
	line-height: 44px;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.na-lightbox__close:focus-visible {
	outline: 3px solid var(--wp--preset--color--teal, #25a0a9);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.na-lightbox,
	.na-lightbox__inner,
	.na-founder__play {
		transition: none;
	}
}
@media (max-width: 900px) {
	.na-founder__play {
		width: 68px;
		height: 68px;
		margin: -34px 0 0 -34px;
	}
	.na-founder__play::after {
		border-top-width: 11px;
		border-bottom-width: 11px;
		border-left-width: 18px;
	}
	.na-founder__media--text {
		min-height: 0;
		padding: 32px 24px;
	}
	.na-lightbox {
		padding: 20px;
	}
	.na-lightbox__close {
		top: -10px;
		right: -10px;
		width: 38px;
		height: 38px;
		line-height: 38px;
	}
}

/* ==== Client QA round, 2026-08-20 (Courtney via Giuseppe) ====
   Deliberate departures from the Figma frames, requested by the client after
   reviewing staging. Each rule cites the request it answers. */

/* "White space on the left, photos cut off at the edge" (IP concierge band,
   its Surrogates twin, and the Basic Requirements band). The Figma bleeds the
   cream panel and its photos off the right edge of a 1440 canvas; the client
   wants the band centered and the photos whole. On anything wider than the
   design frame the whole grid is capped at 1440 and centered, and the panel
   closes with rounded corners instead of running to the viewport edge. The
   photos come off the edge at every width: inset and rounded on all corners. */
.na-svc__card-img {
	right: 20px;
}
.na-svc__card-img img {
	border-radius: 20px;
}
.na-breqs__photo {
	margin-right: 20px;
}
.na-breqs__photo img {
	border-radius: 20px;
}
@media (min-width: 1441px) {
	.na-svc__grid,
	.na-breqs__grid {
		max-width: 1440px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.na-svc__right,
	.na-breqs__cards {
		border-radius: 0 28px 28px 0;
	}
}
@media (max-width: 900px) {
	.na-breqs__photo {
		margin-right: 0;
	}
}

/* "Extra space in the beige colored section right before the following
   module" (Surrogates, Why an Agency Matters): the cream column kept an 82px
   foot below its last card. */
.na-svc--sur .na-svc__right {
	padding-bottom: 24px;
}

/* Menu panel labels reported cut off on one reviewer's machine (screenshot,
   QA round). Not reproduced here; these keep a long label wrapping inside the
   panel instead of clipping, whatever the zoom or font scaling. */
.na-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
.na-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Split consultation calendar (/schedule): every generic "Schedule a Free
   Consultation" CTA lands here and the visitor picks their calendar, Mindy
   for intended parents, Jemma for surrogates (client QA round 2026-08-20). */
.na-sched {
	text-align: center;
}
.na-sched .na-eyebrow {
	margin-bottom: 16px;
}
.na-sched__lead {
	max-width: 620px;
	margin: 0 auto !important;
}
.na-sched__cards {
	max-width: 1060px;
	margin: 48px auto 0 !important;
	gap: 24px;
}
.na-sched__card {
	background: var(--wp--preset--color--white);
	border-radius: 28px;
	padding: 44px 40px 40px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.na-sched__card > * {
	margin-block-start: 0;
}
.na-sched__card-h {
	font-size: 28px;
	line-height: 1.1;
	margin: 0 0 14px !important;
}
.na-sched__card-p {
	max-width: 380px;
	margin: 0 0 12px !important;
}
.na-sched__note {
	font-size: 15px;
	color: var(--wp--preset--color--gray-body);
	margin: 0 0 24px !important;
}
.na-sched__card .wp-block-buttons {
	margin-top: auto !important;
}
.na-sched__phone {
	margin-top: 40px !important;
}
.na-sched__phone a {
	color: var(--wp--preset--color--green-deep);
	font-weight: 600;
	text-decoration: none;
}
.na-sched__phone a:hover {
	text-decoration: underline;
}
@media (max-width: 781px) {
	.na-sched__card {
		padding: 32px 24px 28px;
	}
}
.na-founder__sig {
	font-style: italic;
}

/* ==== Suvi post-launch note (2026-08-21): mid-viewport edge gutters ====
   Between the tablet breakpoints and the 1280 content column (roughly
   800-1340px) the constrained layout's side gutter shrinks to zero and these
   bands ran flush to the viewport edge. Each gets the 24px gutter over
   exactly the window its own responsive rules do not already pad. */
@media (min-width: 901px) and (max-width: 1339px) {
	.na-founder__grid {
		padding-left: 24px;
		padding-right: 24px;
	}
}
@media (min-width: 801px) and (max-width: 1339px) {
	.na-contact__top {
		padding-left: 24px;
		padding-right: 24px;
	}
	/* The form card is a sibling of the intro grid, not a child of it, and
	   the constrained layout pins children with margin auto !important, so
	   the gutter comes out of the width and the auto margins centre it. */
	.na-contact .na-form-card {
		width: calc(100% - 48px);
	}
}
@media (min-width: 1101px) and (max-width: 1339px) {
	.na-qual {
		padding-left: 24px;
		padding-right: 24px;
	}
}
@media (min-width: 782px) and (max-width: 1339px) {
	.na-qq > *,
	.na-ctaband > * {
		padding-left: 24px;
		padding-right: 24px;
	}
}