/**
 * Northbridge Studio — theme CSS.
 *
 * Design tokens live in theme.json and are exposed as --wp--preset--* custom
 * properties. Use those here rather than hard-coding values, so changing a
 * token in theme.json updates everything.
 */

/* ── Base ──────────────────────────────────────────────────────────── */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/*
 * Core's default is-layout-constrained block-gap puts 40px between every
 * direct child of .wp-site-blocks: <main> after <header>, and the footer's
 * own wp-block-template-part wrapper after <main>. Both are flat,
 * pattern-less seams between sections that already handle their own
 * spacing (hero's grid continuity, final-cta's padding sized against the
 * footer's own padding-top) — this is the outer gap between top-level
 * regions, not between blocks inside them.
 */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/*
 * Faint technical grid shared by every full-bleed navy section (header,
 * hero, care plans, …). Fixed to the viewport rather than each element's own
 * box so the lines tile straight across a section's borders instead of
 * stopping dead at the edge. Each section still needs its own z-index (and
 * optionally a mask, see .nbs-hero::before) since stacking context and
 * fade-out requirements differ per component.
 */
.nbs-grid-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(232, 184, 75, 0.10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(232, 184, 75, 0.10) 1px, transparent 1px);
	background-size: 120px 120px;
	background-attachment: fixed;
}

/* Navy gradient shared by every full-bleed section that isn't a flat colour (hero, care plans, …). */
.nbs-navy-gradient {
	background: linear-gradient(180deg, #16304F 0%, #132A47 60%, #0F2340 100%);
}

/*
 * Centred eyebrow with a rule flanking each side, shared by every section
 * that wants it (care plans, proof, steps, …). Pair with a plain span for
 * the label text between two .nbs-eyebrow-lined__rule spans.
 */
.nbs-eyebrow-lined {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 0 24px;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.2;
	text-transform: uppercase;
}

.nbs-eyebrow-lined__rule {
	flex: 0 0 50px;
	height: 1px;
	background-color: rgba(232, 184, 75, 0.4);
}

/* Left-aligned eyebrow with a single trailing rule, for copy blocks that aren't centred. */
.nbs-eyebrow-trailing {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 24px;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.2;
	text-transform: uppercase;
}

.nbs-eyebrow-trailing::after {
	content: "";
	flex: 0 0 50px;
	height: 1px;
	background-color: rgba(232, 184, 75, 0.4);
}

/* Small pulsing status dot, shared by anything signalling "live"/"active" (the proof dashboard, the footer's availability badge, …). */
.nbs-pulse-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #0CCE6B;
	animation: nbs-pulse 2s infinite;
}

@keyframes nbs-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(12, 206, 107, 0.5);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(12, 206, 107, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(12, 206, 107, 0);
	}
}

/*
 * Small gold "EXPLORE →"-style link, shared by every component that needs
 * one (feature-split's CTAs, the industries grid, …): an underline that
 * draws itself in left-to-right on hover, and an arrow that nudges right.
 * Pair with .nbs-link-draw__arrow on the trailing icon span.
 */
.nbs-link-draw {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	color: var(--wp--preset--color--gold);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.nbs-link-draw:hover,
.nbs-link-draw:focus-visible {
	text-decoration: none;
}

.nbs-link-draw::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.nbs-link-draw:hover::after,
.nbs-link-draw:focus-visible::after {
	transform: scaleX(1);
}

.nbs-link-draw__arrow {
	display: inline-block;
	transition: transform 0.18s ease;
}

.nbs-link-draw:hover .nbs-link-draw__arrow,
.nbs-link-draw:focus-visible .nbs-link-draw__arrow {
	transform: translateX(3px);
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ── Accessibility ─────────────────────────────────────────────────── */

.skip-link:focus {
	background-color: var(--wp--preset--color--page-background);
	color: var(--wp--preset--color--page-text);
	clip: auto !important;
	clip-path: none;
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	left: 8px;
	padding: 16px 24px;
	top: 8px;
	text-decoration: none;
	z-index: 100000;
}

:where(a:focus-visible),
:where(button:focus-visible),
:where(input:focus-visible),
:where(textarea:focus-visible),
:where(select:focus-visible) {
	outline: 2px solid var(--wp--preset--color--color-2);
	outline-offset: 2px;
}

/* ── Header / navigation ───────────────────────────────────────────── */

.nbs-header {
	position: sticky;
	top: 0;
	z-index: 100;
	overflow: hidden;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	background-color: color-mix(in srgb, var(--wp--preset--color--navy) 88%, transparent);
}

/* Grid pattern itself comes from .nbs-grid-bg::before (see Base); header only needs its own stacking. */
.nbs-header::before {
	z-index: -1;
}

/* Fallback for browsers without color-mix(). */
@supports not (background-color: color-mix(in srgb, red 50%, transparent)) {
	.nbs-header {
		background-color: var(--wp--preset--color--navy);
	}
}

.nbs-header__inner {
	min-height: 72px;
}

/* Brand ------------------------------------------------------------- */

.nbs-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

/*
 * Bundled with the theme (not uploaded via Site Identity) so it deploys
 * identically to every environment through the normal code pipeline,
 * instead of depending on each install's own Media Library.
 */
.nbs-logo__mark {
	display: block;
	width: auto;
	height: 32px;
}

.nbs-logo__name {
	color: var(--wp--preset--color--light);
}

.nbs-logo__accent {
	color: var(--wp--preset--color--gold);
}

.nbs-logo:hover,
.nbs-logo:focus-visible {
	text-decoration: none;
}

.nbs-logo:hover .nbs-logo__name {
	color: var(--wp--preset--color--gold);
}

/* Navigation -------------------------------------------------------- */

.nbs-nav {
	gap: clamp(20px, 2.4vw, 36px);
}

.nbs-nav .wp-block-navigation-item__content {
	padding-block: 6px;
	transition: color 0.16s ease;
}

/* Underline that grows from the left on hover. */
.nbs-nav .wp-block-navigation-item__content {
	position: relative;
}

.nbs-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.nbs-nav .wp-block-navigation-item__content:hover::after,
.nbs-nav .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

/* Current page gets a persistent gold marker. */
.nbs-nav .current-menu-item > .wp-block-navigation-item__content,
.nbs-nav .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--gold);
}

.nbs-nav .current-menu-item > .wp-block-navigation-item__content::after,
.nbs-nav .current_page_item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Submenus ---------------------------------------------------------- */

.nbs-nav .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--navy-deep);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 12px;
	padding: 8px;
	min-width: 220px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.nbs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 8px;
	padding: 10px 14px;
}

.nbs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

.nbs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: rgba(255, 255, 255, 0.06);
}

/* Header call-to-action --------------------------------------------- */

.nbs-header__cta .wp-block-button__link {
	padding: 12px 26px;
	font-size: 15px;
	white-space: nowrap;
}

.nbs-header__cta .wp-block-button__link span {
	display: inline-block;
	margin-left: 4px;
	transition: transform 0.18s ease;
}

.nbs-header__cta .wp-block-button__link:hover span {
	transform: translateX(3px);
}

/* Mobile overlay ---------------------------------------------------- */

/* Keep the toggle comfortably tappable. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-height: 44px;
	min-width: 44px;
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: 28px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

@media (max-width: 781px) {
	.nbs-header__inner {
		min-height: 64px;
		flex-wrap: nowrap;
	}

	.nbs-header__actions {
		flex-wrap: nowrap;
		gap: 12px;
	}

	.nbs-header__cta .wp-block-button__link {
		padding: 10px 18px;
		font-size: 14px;
	}
}

/*
 * Below 600px the brand, toggle and CTA can't share a row without wrapping,
 * which doubles the header height. The CTA is dropped here — the same action
 * is the first thing in the hero and is present in the menu overlay.
 */
@media (max-width: 600px) {
	/*
	 * Specificity has to beat core's .wp-block-buttons.is-layout-flex
	 * (0,2,0), which sets display:flex — a bare class selector loses to it.
	 */
	.nbs-header .nbs-header__cta.wp-block-buttons {
		display: none;
	}

	.nbs-logo {
		font-size: 19px;
	}
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.wp-block-button__link {
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* ── Media ─────────────────────────────────────────────────────────── */

.wp-block-image img {
	height: auto;
	max-width: 100%;
}

/* ── Footer ────────────────────────────────────────────────────────── */

.nbs-footer {
	position: relative;
	overflow: hidden;
	margin-block-start: 0;
}

.nbs-footer::before {
	z-index: 0;
}

.nbs-footer__inner {
	position: relative;
	z-index: 1;
}

.nbs-footer__cols {
	/* Otherwise core's is-layout-constrained block-gap adds another 40px on top of .nbs-footer__inner's own padding-top. */
	margin-block-start: 0 !important;
	margin-bottom: 48px;
}

/* Brand column ------------------------------------------------------- */

/* Header's logo is white-on-transparent by design; the footer sits on the same navy, so no colour override needed — just reuse .nbs-logo as-is. */
.nbs-footer__logo {
	margin-bottom: 16px;
}

.nbs-footer__location {
	margin: 0 0 20px;
	color: var(--wp--preset--color--gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.nbs-footer__tagline {
	margin: 0 0 24px;
	max-width: 26ch;
	color: var(--wp--preset--color--cream-dim);
	font-family: var(--wp--preset--font-family--display);
	font-size: 17px;
	font-style: italic;
}

.nbs-footer__cta {
	margin: 0;
}

/* Link columns --------------------------------------------------------- */

.nbs-footer__col-heading {
	margin: 0 0 20px;
	color: var(--wp--preset--color--gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.nbs-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nbs-footer__list li {
	margin: 0 0 14px;
}

.nbs-footer__list li:last-child {
	margin-bottom: 0;
}

.nbs-footer__list a {
	color: var(--wp--preset--color--cream-dim);
	font-size: 15px;
	text-decoration: none;
	transition: color 0.18s ease;
}

.nbs-footer__list a:hover,
.nbs-footer__list a:focus-visible {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

/* Rule + bottom bar ------------------------------------------------------ */

.nbs-footer__rule {
	margin-block: 0 32px;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
	background: none;
}

.nbs-footer__bottom {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px 24px;
}

/* Overrides core's is-layout-flow block-gap (margin-block-start: 40px on each child), which would otherwise fight the grid row alignment above. */
.nbs-footer__bottom > * {
	margin-block-start: 0;
}

.nbs-footer__copyright {
	justify-self: start;
	margin: 0;
	color: rgba(247, 240, 228, 0.45);
	font-size: 13px;
}

.nbs-footer__status {
	display: flex;
	align-items: center;
	justify-self: center;
	gap: 8px;
	margin: 0;
	color: rgba(247, 240, 228, 0.55);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.nbs-footer__legal {
	display: flex;
	justify-self: end;
	gap: 20px;
	margin: 0;
}

.nbs-footer__legal a {
	color: rgba(247, 240, 228, 0.45);
	font-size: 13px;
	text-decoration: none;
	transition: color 0.18s ease;
}

.nbs-footer__legal a:hover,
.nbs-footer__legal a:focus-visible {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
}

@media (max-width: 781px) {
	.nbs-footer__cols {
		text-align: center;
	}

	.nbs-footer__tagline {
		margin-left: auto;
		margin-right: auto;
	}

	.nbs-footer__cta {
		display: flex;
		justify-content: center;
	}

	.nbs-footer__bottom {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.nbs-footer__copyright,
	.nbs-footer__status,
	.nbs-footer__legal {
		justify-self: center;
	}
}

/* ── Utilities ─────────────────────────────────────────────────────── */

/* Applied by the "Page (full width)" template. */
.nbs-full-width > .wp-block-post-content > * {
	max-width: none;
}

/* ── Hero ──────────────────────────────────────────────────────────── */

.nbs-hero {
	position: relative;
	overflow: hidden;
	/* Core's default is-layout-constrained block-gap; the hero is always the first thing on the page. */
	margin-block-start: 0 !important;
}

/*
 * Grid pattern itself comes from .nbs-grid-bg::before (see Base); the hero
 * additionally masks it so it fades out towards the edges and never competes
 * with the copy.
 */
.nbs-hero::before {
	z-index: 0;
	-webkit-mask-image: radial-gradient(ellipse 100% 100% at 70% 40%, #000 40%, transparent 85%);
	mask-image: radial-gradient(ellipse 100% 100% at 70% 40%, #000 40%, transparent 85%);
}

.nbs-hero__stage {
	position: relative;
	z-index: 1;
}

.nbs-hero__cols {
	display: flex;
	gap: 20px;
	align-items: center;
}

.nbs-hero__copy {
	flex: 0 1 52%;
	min-width: 0;
}

.nbs-hero__art {
	position: relative;
	flex: 0 1 48%;
	min-width: 0;
}

/* Copy -------------------------------------------------------------- */

.nbs-eyebrow {
	margin-bottom: 24px;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.2;
	text-transform: uppercase;
}

.nbs-hero__title {
	/*
	 * 10ch is deliberate: it breaks the line before the italic accent so the
	 * emphasis sits on its own line, matching the design. Wider values pull
	 * the first italic word up onto the previous line.
	 */
	max-width: 10ch;
	margin-bottom: 24px;
	text-wrap: pretty;
}

/*
 * Any text italicised in the editor turns gold — the shared "accent" look
 * used by every section heading. Keeps the accent fully editable — no
 * custom class needed on the text itself, just hit italic.
 */
.nbs-hero__title em,
.nbs-split__title em,
.nbs-split__heading em,
.nbs-stay__title em,
.nbs-industries__title em,
.nbs-proof__title em,
.nbs-steps__title em,
.nbs-about__title em,
.nbs-final-cta__title em {
	color: var(--wp--preset--color--gold);
	font-style: italic;
}

.nbs-hero__sub {
	max-width: 440px;
	margin-bottom: 34px;
	color: var(--wp--preset--color--cream-dim);
	font-size: 18px;
	line-height: 1.7;
}

.nbs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 26px;
}

.nbs-btn--lg .wp-block-button__link {
	padding: 16px 34px;
	font-size: 16px;
}

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

/* Compact button, e.g. the footer's ghost CTA — combine with .nbs-btn--ghost. */
.nbs-btn--sm .wp-block-button__link {
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Secondary action: core's outline style, restyled for the navy ground. */
.nbs-btn--ghost .wp-block-button__link {
	padding: 16px 30px;
	border: 1px solid rgba(247, 240, 228, 0.28);
	background-color: transparent;
	color: var(--wp--preset--color--cream);
	font-size: 16px;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.nbs-btn--ghost .wp-block-button__link:hover,
.nbs-btn--ghost .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--gold);
	background-color: rgba(232, 184, 75, 0.08);
	color: var(--wp--preset--color--gold);
}

.nbs-hero__micro {
	margin: 0;
	color: rgba(247, 240, 228, 0.55);
	font-size: 12px;
	letter-spacing: 0.16em;
	line-height: 1.6;
	text-transform: uppercase;
}

.nbs-hero__micro strong {
	color: var(--wp--preset--color--gold);
	font-weight: 600;
}

/* Illustration ------------------------------------------------------ */

.nbs-hero__img {
	margin: 0;
}

.nbs-hero__img img {
	display: block;
	width: 90%;
	margin-inline: auto;
	height: auto;
	filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.35));
}

/* Markers ------------------------------------------------------------ */

/*
 * Gold service markers, pinned to the four corners of .nbs-hero__art (not to
 * any part of the illustration itself) so they land in the breathing room
 * around whatever image is set, rather than depending on this bridge's
 * specific silhouette. The background chip keeps them legible over any
 * artwork underneath. Hidden below the stacking breakpoint where the image
 * is too small for them to sit on without overlapping it.
 */
.nbs-hero__marker {
	position: absolute;
	max-width: 150px;
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba(13, 31, 56, 0.55);
}

.nbs-hero__marker::before {
	content: "+";
	display: block;
	margin-bottom: 4px;
	color: var(--wp--preset--color--gold);
	font-size: 15px;
	line-height: 1;
}

.nbs-hero__marker--top-left {
	top: 4%;
	left: 0;
}

.nbs-hero__marker--top-right {
	top: 4%;
	right: 0;
}

.nbs-hero__marker--bottom-left {
	bottom: 6%;
	left: 0;
}

.nbs-hero__marker--bottom-right {
	bottom: 6%;
	right: 0;
}

.nbs-fact__label {
	margin: 0 0 4px;
	color: var(--wp--preset--color--cream);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
}

.nbs-fact__value {
	margin: 0;
	color: var(--wp--preset--color--gold);
	font-size: 12px;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

/*
 * 781px is where the copy/art pair stacks. Kept distinct from 900px so there
 * is no dead zone where columns are still side by side but centred styles
 * have already kicked in.
 */
@media (max-width: 781px) {
	.nbs-hero__cols {
		flex-direction: column;
		text-align: center;
	}

	.nbs-hero__copy,
	.nbs-hero__art {
		flex-basis: auto;
		width: 100%;
	}

	.nbs-hero__art {
		order: -1;
		max-width: 480px;
		margin: 0 auto 8px;
	}

	.nbs-hero__title,
	.nbs-hero__sub {
		margin-left: auto;
		margin-right: auto;
	}

	.nbs-hero__actions {
		justify-content: center;
	}

	/* The image shrinks too far for the overlaid markers to stay legible. */
	.nbs-hero__marker {
		display: none;
	}
}

@media (min-width: 782px) and (max-width: 1100px) {
	.nbs-hero__sub {
		font-size: 17px;
	}
}

/* ── Feature split ─────────────────────────────────────────────────── */

.nbs-split {
	position: relative;
	/* Same is-layout-constrained block-gap as .nbs-hero; the section's own padding-block already provides the breathing room. */
	margin-block-start: 0 !important;
	background: var(--wp--preset--color--navy-deep);
	padding-block: var(--wp--preset--spacing--70);
}

.nbs-split__title {
	max-width: 16ch;
	margin-bottom: 40px;
}

.nbs-split__grid {
	display: flex;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 6px;
	overflow: hidden;
}

.nbs-split__panel {
	position: relative;
	flex: 1 1 50%;
	min-width: 0;
	padding: 56px 48px 44px;
	background-image:
		linear-gradient(rgba(232, 184, 75, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(232, 184, 75, 0.08) 1px, transparent 1px);
	background-size: 60px 60px;
	/*
	 * background-color (rather than a translateY lift) so the hover state
	 * can't get clipped by .nbs-split__grid's rounded-corner overflow:hidden.
	 */
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.nbs-split__panel:hover {
	background-color: rgba(232, 184, 75, 0.035);
	box-shadow: inset 0 0 0 1px rgba(232, 184, 75, 0.3);
}

.nbs-split__panel--one {
	border-right: 1px solid var(--wp--preset--color--hairline);
}

/* A faint teal wash differentiates the build panel from the rescue one. */
.nbs-split__panel--two {
	background-image:
		linear-gradient(rgba(232, 184, 75, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(232, 184, 75, 0.08) 1px, transparent 1px),
		linear-gradient(135deg, rgba(45, 140, 130, 0.16), transparent 60%);
	background-size: 60px 60px, 60px 60px, 100% 100%;
}

.nbs-split__marker {
	position: absolute;
	top: 24px;
	left: 24px;
	color: var(--wp--preset--color--gold);
	font-size: 16px;
	line-height: 1;
}

.nbs-split__ruler {
	position: relative;
	margin: 0 0 40px;
	padding-top: 16px;
	border-top: 1px solid rgba(247, 240, 228, 0.15);
}

.nbs-split__ruler::before,
.nbs-split__ruler::after {
	content: "";
	position: absolute;
	top: -4px;
	width: 1px;
	height: 8px;
	background: rgba(247, 240, 228, 0.15);
}

.nbs-split__ruler::before {
	left: 0;
}

.nbs-split__ruler::after {
	right: 0;
}

.nbs-split__ruler-label {
	display: block;
	text-align: center;
	color: rgba(247, 240, 228, 0.4);
	font-family: var(--wp--preset--font-family--monospace);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.nbs-split__meta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 16px;
}

.nbs-split__number {
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px;
	font-style: italic;
}

.nbs-split__meta-rule {
	color: rgba(247, 240, 228, 0.3);
}

.nbs-split__eyebrow {
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.nbs-split__heading {
	max-width: 14ch;
	margin-bottom: 16px;
}

.nbs-split__copy {
	max-width: 42ch;
	margin-bottom: 28px;
	color: var(--wp--preset--color--cream-dim);
	font-size: 16px;
	line-height: 1.7;
}

.nbs-split__cta-price {
	color: rgba(247, 240, 228, 0.55);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
}

.nbs-split__figure {
	margin: 28px 0 0;
	text-align: center;
}

/*
 * A fixed box with object-fit: contain, not just a max-width, so any two
 * illustrations line up at the same visual size regardless of their own
 * native dimensions or however much transparent padding is baked into the
 * source file — they won't always be this clock and this laptop.
 */
.nbs-split__figure img {
	display: inline-block;
	width: 100%;
	max-width: 340px;
	height: 300px;
	object-fit: contain;
}

.nbs-split__caption {
	position: absolute;
	right: 24px;
	bottom: 24px;
	margin: 0;
	color: rgba(247, 240, 228, 0.35);
	font-family: var(--wp--preset--font-family--monospace);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (max-width: 781px) {
	.nbs-split__grid {
		flex-direction: column;
	}

	.nbs-split__panel--one {
		border-right: none;
		border-bottom: 1px solid var(--wp--preset--color--hairline);
	}

	.nbs-split__title {
		max-width: none;
	}
}

/* ── Care plans ────────────────────────────────────────────────────── */

.nbs-stay {
	position: relative;
	overflow: hidden;
	/* Same is-layout-constrained block-gap fixed for .nbs-hero and .nbs-split. */
	margin-block-start: 0 !important;
	padding-block: var(--wp--preset--spacing--70);
	text-align: center;
}

.nbs-stay::before {
	z-index: 0;
}

/*
 * Deliberately narrower than the theme's wide size (1280px): this content is
 * a centred single column, not a two-up layout, so it relies on the default
 * is-layout-constrained content-size (720px) rather than opting into
 * alignwide. Nudged slightly past that default to fit the pricing row.
 */
.nbs-stay__stage {
	position: relative;
	z-index: 1;
	max-width: 760px;
}

.nbs-stay__icon {
	display: block;
	width: 100%;
	max-width: 160px;
	height: auto;
	margin: 0 auto 40px;
}


.nbs-stay__title {
	margin-bottom: 28px;
}

.nbs-stay__copy {
	margin: 0 auto 28px;
	max-width: 640px;
	color: var(--wp--preset--color--cream-dim);
	font-size: 17px;
	line-height: 1.75;
}

.nbs-stay__quote {
	margin: 0 auto 48px;
	max-width: 560px;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--display);
	font-size: 20px;
	font-style: italic;
	line-height: 1.5;
}

.nbs-stay__tiers {
	display: flex;
	gap: 24px;
	margin-bottom: 40px;
}

.nbs-stay__tier {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	padding: 28px 24px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 8px;
	background-color: rgba(13, 31, 56, 0.35);
	/* Same hover language as .nbs-split__panel: tint + border, no transform, so nothing clips against a rounded ancestor. */
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.nbs-stay__tier:hover {
	border-color: var(--wp--preset--color--gold);
	background-color: rgba(232, 184, 75, 0.05);
}

.nbs-stay__tier--highlighted {
	border-color: var(--wp--preset--color--gold);
	background-color: rgba(232, 184, 75, 0.06);
}

.nbs-stay__tier-badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 14px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.nbs-stay__tier-name {
	margin: 0 0 12px;
	color: var(--wp--preset--color--gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.nbs-stay__tier-price {
	margin: 0 0 12px;
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--display);
	font-size: 32px;
	font-weight: 600;
}

.nbs-stay__tier-period {
	color: rgba(247, 240, 228, 0.5);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	font-weight: 400;
}

.nbs-stay__tier-desc {
	margin: 0;
	color: var(--wp--preset--color--cream-dim);
	font-size: 14px;
	line-height: 1.6;
}

.nbs-stay__actions {
	display: flex;
	justify-content: center;
}

@media (max-width: 781px) {
	.nbs-stay__tiers {
		flex-direction: column;
	}
}

/* ── Industries ────────────────────────────────────────────────────── */

.nbs-industries {
	position: relative;
	overflow: hidden;
	/* Same is-layout-constrained block-gap fixed for .nbs-hero, .nbs-split and .nbs-stay. */
	margin-block-start: 0 !important;
	padding-block: var(--wp--preset--spacing--70);
}

.nbs-industries::before {
	z-index: 0;
}

.nbs-industries__stage {
	position: relative;
	z-index: 1;
}

/* Eyebrow with a single trailing rule — the pattern the original hero eyebrow used before it was dropped there; kept here since this design calls for it. */
.nbs-industries__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.2;
	text-transform: uppercase;
}

.nbs-industries__eyebrow::after {
	content: "";
	flex: 0 0 50px;
	height: 1px;
	background-color: rgba(232, 184, 75, 0.4);
}

.nbs-industries__title {
	max-width: 20ch;
	margin-bottom: 20px;
}

.nbs-industries__copy {
	max-width: 640px;
	margin-bottom: 48px;
	color: var(--wp--preset--color--cream-dim);
	font-size: 17px;
	line-height: 1.7;
}

.nbs-industries__grid {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 6px;
	overflow: hidden;
}

.nbs-industries__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.nbs-industries__row--bottom {
	grid-template-columns: repeat(2, 1fr);
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.nbs-industries__card {
	position: relative;
	padding: 40px 32px;
	border-right: 1px solid var(--wp--preset--color--hairline);
	background-color: rgba(13, 31, 56, 0.35);
	transition: background-color 0.25s ease;
}

.nbs-industries__card:last-child {
	border-right: none;
}

.nbs-industries__card:hover {
	background-color: rgba(232, 184, 75, 0.035);
}

.nbs-industries__index {
	position: absolute;
	top: 24px;
	right: 28px;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px;
	font-style: italic;
}

/*
 * Fixed box + object-fit so any uploaded icon lines up the same regardless
 * of its own native size — see .nbs-split__figure img. Forced to flat white
 * via filter rather than trusting the source file's own colour: whatever
 * gold an uploaded icon ships with reads as camouflage against the equally
 * gold background grid at this thin a line weight. brightness(0) flattens
 * every opaque pixel to black (alpha untouched), invert(1) flips that to
 * white — works regardless of the icon's original colour.
 */
.nbs-industries__icon {
	display: block;
	width: 100px;
	height: 100px;
	margin-bottom: 24px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.nbs-industries__name {
	margin: 0 0 16px;
	padding-right: 40px;
	font-size: 22px;
}

.nbs-industries__field {
	margin: 0 0 14px;
	color: var(--wp--preset--color--cream-dim);
	font-size: 14px;
	line-height: 1.6;
}

.nbs-industries__label {
	margin-right: 4px;
	color: var(--wp--preset--color--gold);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.nbs-industries__tags {
	margin: 20px 0 16px;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--hairline);
	color: rgba(148, 178, 214, 0.75);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (max-width: 781px) {
	.nbs-industries__row,
	.nbs-industries__row--bottom {
		grid-template-columns: 1fr;
	}

	.nbs-industries__card {
		border-right: none;
		border-bottom: 1px solid var(--wp--preset--color--hairline);
	}

	.nbs-industries__card:last-child {
		border-bottom: none;
	}
}

/* ── Proof dashboard ──────────────────────────────────────────────── */

/*
 * Typed custom property, registered so the browser can interpolate it
 * frame-by-frame (a conic-gradient() angle can't otherwise be transitioned
 * at all). Unsupported browsers (pre-2023 roughly) just skip the smooth
 * animation and jump straight to the final value set below — never stuck
 * at 0. The bars don't need this: they animate a plain width instead.
 */
@property --nbs-pct {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}

.nbs-proof {
	position: relative;
	overflow: hidden;
	/* Same is-layout-constrained block-gap fixed for every other full-bleed section. */
	margin-block-start: 0 !important;
	padding-block: var(--wp--preset--spacing--70);
	text-align: center;
}

.nbs-proof::before {
	z-index: 0;
}

.nbs-proof__stage {
	position: relative;
	z-index: 1;
}


.nbs-proof__title {
	margin: 0 auto 20px;
	max-width: 18ch;
}

.nbs-proof__copy {
	margin: 0 auto 56px;
	max-width: 620px;
	color: var(--wp--preset--color--cream-dim);
	font-size: 17px;
	line-height: 1.7;
}

/* Window card --------------------------------------------------------- */

.nbs-proof__window {
	max-width: 1100px;
	margin: 0 auto 48px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 10px;
	overflow: hidden;
	background-color: rgba(13, 31, 56, 0.55);
	text-align: left;
	/*
	 * Rises and fades in once view.js adds is-visible to this element itself
	 * (not the outer section) — the window is observed independently of the
	 * stat row below so each reveals when it's actually on screen, not both
	 * at once as soon as any 30% of the whole (tall) section is visible.
	 */
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.nbs-proof__window.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.nbs-proof__chrome {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.nbs-proof__dots {
	display: flex;
	gap: 6px;
}

.nbs-proof__dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba(247, 240, 228, 0.2);
}

.nbs-proof__window-label {
	flex: 1 1 auto;
	color: rgba(247, 240, 228, 0.55);
	font-family: var(--wp--preset--font-family--monospace);
	font-size: 13px;
}

.nbs-proof__live {
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(247, 240, 228, 0.55);
	font-family: var(--wp--preset--font-family--monospace);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.nbs-proof__tabs {
	display: flex;
	gap: 28px;
	padding: 0 20px;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.nbs-proof__tab {
	position: relative;
	padding: 14px 0;
	color: rgba(247, 240, 228, 0.45);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.nbs-proof__tab.is-active {
	color: var(--wp--preset--color--gold);
}

.nbs-proof__tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background-color: var(--wp--preset--color--gold);
}

.nbs-proof__panels {
	display: grid;
	grid-template-columns: 1fr 1.3fr 1fr;
}

.nbs-proof__col {
	padding: 32px 28px;
}

.nbs-proof__col--before {
	border-right: 1px solid var(--wp--preset--color--hairline);
	text-align: center;
}

.nbs-proof__col--after {
	border-left: 1px solid var(--wp--preset--color--hairline);
	text-align: center;
}

.nbs-proof__col-head {
	display: flex;
	justify-content: space-between;
	margin-bottom: 24px;
	color: rgba(247, 240, 228, 0.4);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.nbs-proof__col--before .nbs-proof__col-head,
.nbs-proof__col--after .nbs-proof__col-head {
	justify-content: center;
	gap: 12px;
}

/* Score rings ----------------------------------------------------------- */

.nbs-proof__ring {
	--nbs-pct: 0;
	position: relative;
	width: 148px;
	height: 148px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: conic-gradient(var(--nbs-ring-color, var(--wp--preset--color--gold)) calc(var(--nbs-pct) * 3.6deg), rgba(247, 240, 228, 0.1) 0);
	transition: --nbs-pct 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Coloured like a real PageSpeed report: red/orange for a poor score, green for a good one. */
.nbs-proof__ring--before {
	--nbs-ring-color: #FFA400;
}

.nbs-proof__ring--after {
	--nbs-ring-color: #0CCE6B;
}

.nbs-proof__ring::before {
	content: "";
	position: absolute;
	inset: 10px;
	z-index: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--navy-deep);
}

.nbs-proof__ring-inner {
	position: relative;
	z-index: 1;
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--display);
}

.nbs-proof__ring-value {
	font-size: 34px;
	font-weight: 600;
	line-height: 1;
}

.nbs-proof__ring-max {
	margin-top: 4px;
	color: rgba(247, 240, 228, 0.4);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
}

.nbs-proof__col-caption {
	margin: 16px 0 0;
	color: rgba(247, 240, 228, 0.45);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Metrics ---------------------------------------------------------------- */

.nbs-proof__metric {
	margin-bottom: 28px;
}

.nbs-proof__metric:last-child {
	margin-bottom: 0;
}

.nbs-proof__metric-top {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	color: var(--wp--preset--color--cream);
	font-size: 14px;
}

.nbs-proof__metric-delta {
	color: #0CCE6B;
	font-weight: 600;
}

/*
 * Track + fill (not the earlier hard-stop-gradient-shift approach): the fill
 * carries its own fixed green/orange split as a static background and grows
 * in width from 0, so the ratio between the two colours stays correct at
 * every point of the animation and the bar genuinely fills up rather than
 * shrinking from a fully-green starting state. Plain width transition, so
 * no @property registration needed here at all.
 */
.nbs-proof__bar-track {
	height: 7px;
	border-radius: 999px;
	background-color: rgba(247, 240, 228, 0.12);
	overflow: hidden;
}

.nbs-proof__bar-fill {
	width: 0;
	height: 100%;
	border-radius: 999px;
	transition: width 2.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nbs-proof__window.is-visible .nbs-proof__bar-fill {
	width: 100%;
}

.nbs-proof__metric-bottom {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	color: rgba(247, 240, 228, 0.45);
	font-size: 12px;
}

.nbs-proof__metric-before {
	color: #FFA400;
}

.nbs-proof__metric-after {
	color: #0CCE6B;
}

/* Banner + CTA ------------------------------------------------------------ */

.nbs-proof__banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 28px;
	border-top: 1px solid var(--wp--preset--color--hairline);
	background-color: rgba(232, 184, 75, 0.04);
}

.nbs-proof__banner-text {
	margin: 0;
	max-width: 640px;
	color: var(--wp--preset--color--cream-dim);
	font-size: 15px;
	line-height: 1.6;
}

.nbs-proof__banner-text strong {
	color: var(--wp--preset--color--cream);
}

.nbs-proof__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 24px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy-ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 0 0 0 rgba(232, 184, 75, 0);
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.nbs-proof__cta:hover,
.nbs-proof__cta:focus-visible {
	background-color: var(--wp--preset--color--gold-soft);
	color: var(--wp--preset--color--navy-ink);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(232, 184, 75, 0.35);
	text-decoration: none;
}

/* Real SVG rather than a text glyph, so the size is exact and consistent instead of relying on the font's own tiny glyph. */
.nbs-proof__cta-icon {
	display: inline-flex;
	transition: transform 0.2s ease;
}

.nbs-proof__cta-icon svg {
	display: block;
}

.nbs-proof__cta:hover .nbs-proof__cta-icon,
.nbs-proof__cta:focus-visible .nbs-proof__cta-icon {
	transform: translateX(2px) scale(1.15);
}

/* Stat row ------------------------------------------------------------------ */

.nbs-proof__stats {
	display: flex;
	max-width: 1100px;
	margin: 0 auto;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 10px;
	overflow: hidden;
}

.nbs-proof__stat {
	flex: 1 1 0;
	padding: 24px;
	border-right: 1px solid var(--wp--preset--color--hairline);
	/* Staggered rise-in, see the nth-child delays below. */
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.nbs-proof__stat:last-child {
	border-right: none;
}

/* Observed independently of the window above, same reason. */
.nbs-proof__stats.is-visible .nbs-proof__stat {
	opacity: 1;
	transform: translateY(0);
}

.nbs-proof__stat:nth-child(1) {
	transition-delay: 0.05s;
}

.nbs-proof__stat:nth-child(2) {
	transition-delay: 0.15s;
}

.nbs-proof__stat:nth-child(3) {
	transition-delay: 0.25s;
}

.nbs-proof__stat:nth-child(4) {
	transition-delay: 0.35s;
}

.nbs-proof__stat-value {
	margin: 0 0 6px;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--display);
	font-size: 32px;
	font-weight: 600;
}

.nbs-proof__stat-label {
	margin: 0;
	color: rgba(247, 240, 228, 0.55);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.nbs-proof__panels {
		grid-template-columns: 1fr;
	}

	.nbs-proof__col--before,
	.nbs-proof__col--after {
		border-right: none;
		border-left: none;
		border-bottom: 1px solid var(--wp--preset--color--hairline);
	}
}

@media (max-width: 700px) {
	.nbs-proof__stats {
		flex-wrap: wrap;
	}

	.nbs-proof__stat {
		flex: 1 1 50%;
		border-bottom: 1px solid var(--wp--preset--color--hairline);
	}

	.nbs-proof__stat:nth-child(2n) {
		border-right: none;
	}

	.nbs-proof__stat:nth-last-child(-n+2) {
		border-bottom: none;
	}
}

@media (max-width: 500px) {
	.nbs-proof__tabs {
		gap: 16px;
		overflow-x: auto;
	}

	.nbs-proof__banner {
		justify-content: center;
		text-align: center;
	}
}

/* ── Live test modal ──────────────────────────────────────────────── */

/*
 * Built once by view.js and appended to <body> on first use (not
 * server-rendered: its content is fetched live), so these rules are scoped
 * to the modal's own classes rather than nested under .nbs-proof.
 */
.nbs-proof-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.nbs-proof-modal[hidden] {
	display: none;
}

.nbs-proof-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(13, 31, 56, 0.75);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.nbs-proof-modal.is-open .nbs-proof-modal__backdrop {
	opacity: 1;
}

.nbs-proof-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 440px;
	max-height: 85vh;
	overflow-y: auto;
	padding: 32px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 14px;
	background: linear-gradient(180deg, #16304F 0%, #132A47 60%, #0F2340 100%);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nbs-proof-modal.is-open .nbs-proof-modal__dialog {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.nbs-proof-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background-color: rgba(247, 240, 228, 0.08);
	color: var(--wp--preset--color--cream);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.nbs-proof-modal__close:hover,
.nbs-proof-modal__close:focus-visible {
	background-color: rgba(247, 240, 228, 0.16);
}

.nbs-proof-modal__eyebrow {
	margin: 0 0 6px;
	color: var(--wp--preset--color--gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.nbs-proof-modal__url {
	margin: 0 0 28px;
	color: rgba(247, 240, 228, 0.5);
	font-family: var(--wp--preset--font-family--monospace);
	font-size: 12px;
	word-break: break-all;
}

/* Loading state ---------------------------------------------------------- */

.nbs-proof-modal__spinner {
	width: 40px;
	height: 40px;
	margin: 12px auto 24px;
	border: 3px solid rgba(247, 240, 228, 0.15);
	border-top-color: var(--wp--preset--color--gold);
	border-radius: 50%;
	animation: nbs-proof-spin 0.9s linear infinite;
}

@keyframes nbs-proof-spin {
	to {
		transform: rotate(360deg);
	}
}

.nbs-proof-modal__status {
	margin: 0;
	color: var(--wp--preset--color--cream-dim);
	font-size: 14px;
	text-align: center;
}

/* Result state ------------------------------------------------------------ */

.nbs-proof-modal__score-ring {
	--nbs-pct: 0;
	position: relative;
	width: 128px;
	height: 128px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: conic-gradient(var(--nbs-ring-color, var(--wp--preset--color--gold)) calc(var(--nbs-pct) * 3.6deg), rgba(247, 240, 228, 0.1) 0);
	transition: --nbs-pct 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.nbs-proof-modal__score-ring::before {
	content: "";
	position: absolute;
	inset: 9px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--navy-deep);
}

.nbs-proof-modal__score-value {
	position: relative;
	z-index: 1;
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--display);
	font-size: 32px;
	font-weight: 600;
}

.nbs-proof-modal__metrics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 0;
}

.nbs-proof-modal__metric {
	padding: 14px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 8px;
	text-align: center;
}

.nbs-proof-modal__metric dt {
	margin: 0 0 6px;
	color: rgba(247, 240, 228, 0.5);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.nbs-proof-modal__metric dd {
	margin: 0;
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	font-weight: 600;
}

.nbs-proof-modal__attribution {
	margin: 24px 0 0;
	color: rgba(247, 240, 228, 0.35);
	font-size: 11px;
	text-align: center;
}

.nbs-proof-modal__attribution a {
	color: rgba(247, 240, 228, 0.5);
}

/* Error state -------------------------------------------------------------- */

.nbs-proof-modal__error {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid rgba(255, 78, 66, 0.35);
	border-radius: 8px;
	background-color: rgba(255, 78, 66, 0.08);
	color: var(--wp--preset--color--cream);
	font-size: 14px;
	line-height: 1.5;
}

.nbs-proof-modal__error a {
	color: var(--wp--preset--color--gold);
}

/* ── Steps ─────────────────────────────────────────────────────────── */

.nbs-steps {
	position: relative;
	overflow: hidden;
	/* Same is-layout-constrained block-gap fixed for every other full-bleed section. */
	margin-block-start: 0 !important;
	padding-block: var(--wp--preset--spacing--70);
	text-align: center;
}

.nbs-steps::before {
	z-index: 0;
}

.nbs-steps__stage {
	position: relative;
	z-index: 1;
}

.nbs-steps__title {
	margin: 0 auto 20px;
	max-width: 20ch;
}

.nbs-steps__copy-intro {
	margin: 0 auto 64px;
	max-width: 560px;
	color: var(--wp--preset--color--cream-dim);
	font-size: 17px;
	line-height: 1.7;
}

.nbs-steps__row {
	position: relative;
	display: flex;
}

/*
 * Dashed connector between the three circles, drawn once behind them rather
 * than per-step: with three equal flex columns each circle's centre sits at
 * 1/6, 1/2 and 5/6 of the row width, so a line inset 16.6667% each side runs
 * exactly between the first and last circle's centres.
 */
.nbs-steps__row::before {
	content: "";
	position: absolute;
	top: 75px;
	left: 16.6667%;
	right: 16.6667%;
	z-index: 0;
	border-top: 1px dashed rgba(247, 240, 228, 0.25);
}

.nbs-steps__step {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	min-width: 0;
	padding: 0 32px;
}

.nbs-steps__circle {
	position: relative;
	width: 150px;
	height: 150px;
	margin: 0 auto 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed rgba(247, 240, 228, 0.3);
	border-radius: 50%;
	/* So the connector line never shows through the circle's own interior. */
	background-color: var(--wp--preset--color--navy);
	transition: border-color 0.25s ease;
}

.nbs-steps__step:hover .nbs-steps__circle {
	border-color: var(--wp--preset--color--gold);
}

.nbs-steps__step--highlighted .nbs-steps__circle {
	border-style: solid;
	border-color: var(--wp--preset--color--gold);
}

.nbs-steps__plus {
	color: rgba(247, 240, 228, 0.35);
	font-size: 22px;
}

.nbs-steps__step--highlighted .nbs-steps__plus {
	color: var(--wp--preset--color--gold);
}

/* Fixed box + object-fit, same sizing fix used for every other uploaded icon in this theme. */
.nbs-steps__icon {
	display: block;
	width: 120px;
	height: 120px;
	object-fit: contain;
}

.nbs-steps__badge {
	position: absolute;
	top: -4px;
	right: 6px;
	display: flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy-ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	font-weight: 700;
	font-style: italic;
}

.nbs-steps__label {
	margin: 0 0 8px;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--monospace);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.nbs-steps__heading {
	margin: 0 0 12px;
	font-size: 22px;
}

.nbs-steps__step--highlighted .nbs-steps__heading {
	color: var(--wp--preset--color--gold);
	font-style: italic;
}

.nbs-steps__copy {
	margin: 0 auto;
	max-width: 280px;
	color: var(--wp--preset--color--cream-dim);
	font-size: 14px;
	line-height: 1.7;
}

@media (max-width: 781px) {
	.nbs-steps__row {
		flex-direction: column;
		gap: 48px;
	}

	.nbs-steps__row::before {
		display: none;
	}

	.nbs-steps__step {
		padding: 0 16px;
	}
}

/* ── About ─────────────────────────────────────────────────────────── */

.nbs-about {
	position: relative;
	overflow: hidden;
	/* Same is-layout-constrained block-gap fixed for every other full-bleed section. */
	margin-block-start: 0 !important;
	padding-block: var(--wp--preset--spacing--70);
}

.nbs-about::before {
	z-index: 0;
}

.nbs-about__stage {
	position: relative;
	z-index: 1;
}

.nbs-about__cols {
	display: flex;
	align-items: flex-start;
	gap: 64px;
}

.nbs-about__photo-col {
	flex: 0 0 36%;
	min-width: 0;
}

.nbs-about__copy-col {
	flex: 1 1 auto;
	min-width: 0;
}

/* Photo -------------------------------------------------------------- */

/*
 * Corner brackets bound the whole composition (frame + overlapping card),
 * not just the frame — the wrap's own box already stretches to the card's
 * bottom edge since the card is pulled up over the frame with a negative
 * margin rather than positioned absolutely.
 */
.nbs-about__photo-wrap {
	position: relative;
	padding: 10px;
}

.nbs-about__photo-wrap::before,
.nbs-about__photo-wrap::after {
	content: "";
	position: absolute;
	width: 28px;
	height: 28px;
	border: 1px solid var(--wp--preset--color--gold);
}

.nbs-about__photo-wrap::before {
	top: 0;
	left: 0;
	border-right: none;
	border-bottom: none;
}

.nbs-about__photo-wrap::after {
	bottom: 0;
	right: 0;
	border-left: none;
	border-top: none;
}

.nbs-about__photo-frame {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--hairline);
	background-color: rgba(13, 31, 56, 0.4);
	transition: border-color 0.25s ease;
}

.nbs-about__photo-wrap:hover .nbs-about__photo-frame {
	border-color: rgba(232, 184, 75, 0.4);
}

.nbs-about__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nbs-about__photo-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: rgba(247, 240, 228, 0.3);
	font-family: var(--wp--preset--font-family--monospace);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
}

.nbs-about__card {
	position: relative;
	margin: -44px 20px 0;
	padding: 18px 22px;
	border: 1px solid var(--wp--preset--color--hairline);
	background-color: var(--wp--preset--color--navy-deep);
}

.nbs-about__card-name {
	margin: 0 0 4px;
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--display);
	font-size: 17px;
	font-weight: 600;
}

.nbs-about__card-meta {
	margin: 0;
	color: var(--wp--preset--color--gold);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Copy ----------------------------------------------------------------- */

.nbs-about__title {
	margin: 0 0 28px;
	max-width: 16ch;
}

.nbs-about__para {
	margin: 0 0 24px;
	max-width: 640px;
	color: var(--wp--preset--color--cream-dim);
	font-size: 17px;
	line-height: 1.75;
}

.nbs-about__para strong {
	color: var(--wp--preset--color--cream);
	font-weight: 600;
}

.nbs-about__quote {
	margin: 0 0 24px;
	padding: 4px 0 4px 24px;
	border-left: 2px solid var(--wp--preset--color--gold);
}

.nbs-about__quote p {
	margin: 0;
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	font-style: italic;
	line-height: 1.6;
}

.nbs-about__signature {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
}

.nbs-about__signature-name {
	margin: 0;
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	font-style: italic;
}

.nbs-about__signature-divider {
	width: 1px;
	height: 32px;
	background-color: var(--wp--preset--color--hairline);
}

.nbs-about__signature-role {
	margin: 0;
	color: rgba(247, 240, 228, 0.5);
	font-size: 12px;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.nbs-about__cols {
		flex-direction: column;
		gap: 56px;
	}

	.nbs-about__photo-col {
		flex-basis: auto;
		width: 100%;
		max-width: 340px;
		margin: 0 auto;
	}
}

/* ── Final CTA ─────────────────────────────────────────────────────── */

.nbs-final-cta {
	position: relative;
	overflow: hidden;
	/* Same is-layout-constrained block-gap fixed for every other full-bleed section. */
	margin-block-start: 0 !important;
	padding-top: var(--wp--preset--spacing--70);
	/*
	 * Deliberately smaller than the top: this block is always the last thing
	 * on the page, and parts/footer.html has its own padding-top: spacing--70
	 * on the footer immediately below. Full spacing--70 here stacked with the
	 * footer's own padding produced a much bigger gap than either alone.
	 */
	padding-bottom: var(--wp--preset--spacing--40);
	text-align: center;
}

.nbs-final-cta::before {
	z-index: 0;
}

/*
 * Large, faint illustration watermark behind the copy. Sized as a
 * percentage of the section (not a fixed pixel width) so it always fits
 * within view — a fixed width wider than the viewport meant overflow:hidden
 * was clipping it down to just the cropped-in middle slice, reading as
 * "too big and too close up" rather than the whole bridge silhouette.
 */
.nbs-final-cta__bg {
	position: absolute;
	bottom: -4%;
	left: 50%;
	z-index: 0;
	width: 78%;
	max-width: 1100px;
	height: auto;
	opacity: 0.12;
	transform: translateX(-50%);
	pointer-events: none;
}

/*
 * Narrower than the theme's wide size, same reasoning as .nbs-stay__stage:
 * a centred single column relies on the default is-layout-constrained
 * content-size rather than opting into alignwide.
 */
.nbs-final-cta__stage {
	position: relative;
	z-index: 1;
	max-width: 720px;
}

.nbs-final-cta__title {
	margin: 0 auto 20px;
	max-width: 16ch;
}

.nbs-final-cta__copy {
	margin: 0 auto 40px;
	max-width: 560px;
	color: var(--wp--preset--color--cream-dim);
	font-size: 17px;
	line-height: 1.7;
}

.nbs-final-cta__actions {
	display: flex;
	justify-content: center;
	margin-bottom: 24px;
}

.nbs-final-cta__micro {
	margin: 0 0 20px;
	color: rgba(247, 240, 228, 0.55);
	font-size: 12px;
	letter-spacing: 0.16em;
	line-height: 1.6;
	text-transform: uppercase;
}

.nbs-final-cta__micro strong {
	color: var(--wp--preset--color--gold);
	font-weight: 600;
}

.nbs-final-cta__closing {
	margin: 0 auto;
	max-width: 480px;
	color: rgba(247, 240, 228, 0.45);
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px;
	font-style: italic;
	line-height: 1.6;
}

@media (max-width: 500px) {
	.nbs-final-cta__bg {
		width: 900px;
	}
}