/* =========================================================================
   Nexro — theme styles
   Palette and typography are sampled from the Nexro brand material.
   Tokens are declared in PHP (inc/setup.php) so they can be changed
   without editing this file.
   ========================================================================= */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.75;
	color: var(--nx-ink);
	background: var(--nx-paper);
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--nx-cyan-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--nx-navy); }

:focus-visible {
	outline: 3px solid var(--nx-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.nx-skip {
	position: absolute; left: -9999px;
	background: var(--nx-slate); color: #fff;
	padding: .75rem 1.25rem; z-index: 999;
}
.nx-skip:focus { left: 1rem; top: 1rem; }

/* ---------- Type scale ---------- */

h1, h2, h3, h4 {
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--nx-slate);
	margin: 0 0 .6em;
}

.nx-h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
.nx-h2--light { color: #fff; }

.nx-eyebrow {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--nx-cyan-deep);
	margin: 0 0 .9rem;
}
.nx-eyebrow--light { color: var(--nx-cyan); }

.nx-lead { font-size: 1.15rem; }

/* The stencilled capacity plate, taken from the lettering on Nexro's
   own tanks. Used for capacities and key figures. */
.nx-plate {
	display: inline-block;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nx-slate);
	background: rgba(255, 255, 255, .92);
	border: 1px solid rgba(22, 33, 43, .28);
	padding: .35rem .75rem;
	border-radius: 2px;
}
.nx-plate--onimg {
	position: absolute;
	left: 1rem; bottom: 1rem;
	backdrop-filter: blur(2px);
}

/* ---------- Layout ---------- */

.nx-wrap { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }

.nx-sec { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.nx-sec--tight { padding: clamp(2.5rem, 4vw, 3.5rem) 0; }
.nx-sec--tall { padding: clamp(5rem, 12vw, 9rem) 0; }
.nx-sec--paper { background: var(--nx-paper); }
.nx-sec--mist { background: var(--nx-mist); }
.nx-sec--dark { background: var(--nx-slate); color: rgba(255, 255, 255, .82); }
.nx-sec--slate { background: var(--nx-slate-deep); color: rgba(255, 255, 255, .82); }
.nx-sec--dark h1, .nx-sec--dark h2, .nx-sec--dark h3,
.nx-sec--slate h1, .nx-sec--slate h2, .nx-sec--slate h3 { color: #fff; }
.nx-sec--dark .nx-eyebrow, .nx-sec--slate .nx-eyebrow { color: var(--nx-cyan); }

.nx-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.nx-head--center { margin-inline: auto; text-align: center; }
.nx-head__text { color: inherit; opacity: .85; }
.nx-head__text p:last-child { margin-bottom: 0; }

.nx-center { text-align: center; }

.nx-grid { display: grid; gap: 1.5rem; }
.nx-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }

.nx-split {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
	.nx-split { grid-template-columns: 1fr 1fr; }
	.nx-split--reverse .nx-split__text { order: 2; }
	.nx-split--sticky { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
	.nx-split--sticky .nx-aside { position: sticky; top: 7rem; }
}
.nx-split__media img { width: 100%; border-radius: 4px; }

.nx-prose p { margin: 0 0 1.15rem; }
.nx-prose--page { max-width: 44rem; }
.nx-prose--page h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin-top: 2.5rem; }
.nx-prose--page h3 { font-size: 1.15rem; margin-top: 2rem; }
.nx-prose--page ul, .nx-prose--page ol { padding-left: 1.15rem; }
.nx-prose--page li { margin-bottom: .5rem; }

/* ---------- Buttons ---------- */

.nx-btn {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: "Montserrat", sans-serif;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .02em;
	padding: .85rem 1.5rem;
	border-radius: 2px;
	border: 2px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.nx-btn:hover { transform: translateY(-1px); }
.nx-btn .nx-icon { width: 1.05em; height: 1.05em; transition: transform .18s ease; }
.nx-btn:hover .nx-icon { transform: translateX(3px); }

.nx-btn--primary { background: var(--nx-cyan); color: #08222E; border-color: var(--nx-cyan); }
.nx-btn--primary:hover { background: var(--nx-cyan-deep); border-color: var(--nx-cyan-deep); color: #fff; }

.nx-btn--ghost { border-color: rgba(22, 33, 43, .3); color: var(--nx-slate); }
.nx-btn--ghost:hover { border-color: var(--nx-slate); background: var(--nx-slate); color: #fff; }

.nx-btn--light { border-color: rgba(255, 255, 255, .5); color: #fff; }
.nx-btn--light:hover { background: #fff; color: var(--nx-slate); border-color: #fff; }

.nx-btn--lg { padding: 1.05rem 1.9rem; font-size: .95rem; }
.nx-btn--block { display: flex; justify-content: center; width: 100%; margin-top: 1.25rem; }

.nx-icon { width: 1.5rem; height: 1.5rem; flex: none; }

/* ---------- Top bar and header ---------- */

.nx-topbar {
	background: var(--nx-slate-deep);
	color: rgba(255, 255, 255, .72);
	font-size: .8rem;
}
.nx-topbar__inner {
	display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
	align-items: center; justify-content: space-between;
	min-height: 2.6rem;
}
.nx-topbar p { margin: 0; }
.nx-topbar__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.nx-topbar a {
	display: inline-flex; align-items: center; gap: .4rem;
	color: inherit; text-decoration: none;
}
.nx-topbar a:hover { color: var(--nx-cyan); }
.nx-topbar .nx-icon { width: 1rem; height: 1rem; }
@media (max-width: 48rem) { .nx-topbar__note { display: none; } }

/* Frosted glass. The bar stays legible while whatever scrolls beneath it
   blurs through, so the header reads as a layer above the page rather than
   a lid on top of it. */
.nx-header {
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
	border-bottom: 1px solid rgba(22, 33, 43, .07);
	z-index: 90;
	transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nx-sticky-header .nx-header { position: sticky; top: 0; }

/* Once the page has moved, the bar tightens: more opaque, a shadow to lift
   it off the content, and a shorter row. */
.nx-header.is-stuck {
	background: rgba(255, 255, 255, .9);
	border-bottom-color: rgba(22, 33, 43, .12);
	box-shadow: 0 8px 30px rgba(22, 33, 43, .09);
}

/* The open mobile panel needs a solid bar behind it, not a blurred one. */
.nx-header.nx-menu-open { background: #fff; }

/* Older browsers, and anyone who has asked their device to reduce
   transparency, get a plain white bar instead. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.nx-header, .nx-header.is-stuck { background: #fff; }
}
@media (prefers-reduced-transparency: reduce) {
	.nx-header, .nx-header.is-stuck {
		background: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

.nx-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1.5rem; min-height: 5rem;
	transition: min-height .32s cubic-bezier(.2, .7, .2, 1);
}
.nx-sticky-header .nx-header.is-stuck .nx-header__inner { min-height: 4rem; }

.nx-brand img, .nx-brand .custom-logo {
	height: 2.6rem; width: auto;
	transition: height .32s cubic-bezier(.2, .7, .2, 1);
}
.nx-sticky-header .nx-header.is-stuck .nx-brand img,
.nx-sticky-header .nx-header.is-stuck .nx-brand .custom-logo { height: 2.1rem; }

@media (prefers-reduced-motion: reduce) {
	.nx-header__inner, .nx-brand img, .nx-brand .custom-logo { transition: none; }
}
.nx-brand__link { display: block; }

.nx-menu {
	display: flex; flex-wrap: nowrap; align-items: center;
	gap: .25rem; list-style: none; margin: 0; padding: 0;
}
.nx-menu a {
	display: block;
	white-space: nowrap;
	font-family: "Montserrat", sans-serif;
	font-size: .85rem; font-weight: 600;
	color: var(--nx-slate);
	text-decoration: none;
	padding: .6rem .85rem;
	border-radius: 2px;
}
.nx-menu a:hover, .nx-menu .current-menu-item > a { color: var(--nx-cyan-deep); background: var(--nx-mist); }
.nx-menu .sub-menu { display: none; }

.nx-nav { display: flex; align-items: center; gap: 1.25rem; }

/* The header button is a compact anchor, not a hero call to action. It never
   wraps, never grows to the height of the bar, and drops the arrow — at this
   size the arrow is clutter rather than direction. */
.nx-nav__cta { flex: none; }
.nx-nav__cta .nx-btn {
	padding: .58rem 1.05rem;
	font-size: .78rem;
	letter-spacing: .01em;
	white-space: nowrap;
	border-width: 1px;
	border-radius: 2px;
	line-height: 1.3;
	box-shadow: 0 1px 2px rgba(22, 33, 43, .08);
}
.nx-nav__cta .nx-btn .nx-icon { display: none; }
.nx-nav__cta .nx-btn:hover { transform: none; }

/* Between the phone menu and a wide desktop there is a band where eight menu
   items, a logo and a button are genuinely tight. Tighten the menu rather than
   letting anything wrap. */
@media (min-width: 72rem) and (max-width: 86rem) {
	.nx-menu { gap: 0; }
	.nx-menu a { font-size: .8rem; padding: .55rem .55rem; }
	.nx-nav { gap: .85rem; }
	.nx-nav__cta .nx-btn { padding: .55rem .85rem; font-size: .74rem; }
	.nx-header__inner { gap: 1rem; }
}

.nx-burger { display: none; background: none; border: 0; padding: .6rem; cursor: pointer; }
.nx-burger__box { display: block; width: 1.5rem; }
.nx-burger__box span {
	display: block; height: 2px; background: var(--nx-slate);
	margin: 4px 0; transition: transform .2s ease, opacity .2s ease;
}
.nx-burger[aria-expanded="true"] .nx-burger__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nx-burger[aria-expanded="true"] .nx-burger__box span:nth-child(2) { opacity: 0; }
.nx-burger[aria-expanded="true"] .nx-burger__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 71.99rem) {
	.nx-burger { display: block; }
	.nx-nav {
		position: absolute; left: 0; right: 0; top: 100%;
		background: #fff;
		border-bottom: 1px solid var(--nx-line);
		flex-direction: column; align-items: stretch;
		gap: 0; padding: 1rem 1.25rem 1.5rem;
		display: none;
	}
	.nx-nav.is-open { display: flex; }
	.nx-header__inner { position: relative; }
	.nx-menu { flex-direction: column; flex-wrap: wrap; align-items: stretch; }
	.nx-menu a { padding: .8rem .5rem; border-bottom: 1px solid var(--nx-line); }
	.nx-nav__cta { margin-top: 1rem; }
	.nx-nav__cta .nx-btn { width: 100%; justify-content: center; padding: .85rem 1.5rem; font-size: .875rem; }
	.nx-nav__cta .nx-btn .nx-icon { display: block; }
}

/* ---------- Hero ---------- */

.nx-hero {
	position: relative;
	display: grid; align-items: center;
	min-height: clamp(30rem, 76vh, 44rem);
	background: var(--nx-slate);
	overflow: hidden;
}
.nx-hero__bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.nx-hero__veil {
	position: absolute; inset: 0;
	background:
		linear-gradient(105deg, rgba(18, 37, 47, .93) 0%, rgba(18, 37, 47, .78) 45%, rgba(18, 37, 47, .35) 100%);
}
.nx-hero__inner { position: relative; padding: 4rem 0; max-width: 46rem; }
.nx-hero__title {
	color: #fff;
	font-size: clamp(2.1rem, 5.4vw, 3.9rem);
	margin-bottom: .5em;
}
.nx-hero__text {
	color: rgba(255, 255, 255, .88);
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	max-width: 38rem;
	margin: 0 0 2rem;
}
.nx-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin: 0; }

/* A hairline cyan rule anchored to the hero base, echoing a weld seam. */
.nx-hero::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0;
	height: 3px; background: var(--nx-cyan);
}

/* ---------- Page head ---------- */

.nx-pagehead {
	background: var(--nx-slate);
	color: rgba(255, 255, 255, .8);
	padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
	border-bottom: 3px solid var(--nx-cyan);
}
.nx-pagehead__title {
	color: #fff;
	font-size: clamp(1.9rem, 4.4vw, 3.1rem);
	margin-bottom: .3em;
	display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.nx-pagehead__icon { color: var(--nx-cyan); }
.nx-pagehead__icon .nx-icon { width: 2.2rem; height: 2.2rem; }
.nx-pagehead__text, .nx-pagehead__meta { max-width: 44rem; margin: 0; }
.nx-pagehead__meta {
	font-family: "IBM Plex Mono", monospace;
	font-size: .82rem; letter-spacing: .04em;
	color: rgba(255, 255, 255, .7);
	margin-bottom: 1rem;
}

.nx-crumbs {
	font-size: .78rem;
	color: rgba(255, 255, 255, .6);
	margin-bottom: 1.25rem;
	display: flex; flex-wrap: wrap; gap: .5rem;
}
.nx-crumbs a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.nx-crumbs a:hover { color: var(--nx-cyan); text-decoration: underline; }

.nx-hero-img img { width: 100%; max-height: 32rem; object-fit: cover; }

/* ---------- Service cards ---------- */

.nx-svc {
	display: block;
	background: #fff;
	border: 1px solid var(--nx-line);
	border-top: 3px solid transparent;
	border-radius: 3px;
	padding: 1.9rem 1.6rem;
	text-decoration: none;
	color: inherit;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nx-svc:hover {
	border-top-color: var(--nx-cyan);
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(22, 33, 43, .1);
	color: inherit;
}
.nx-svc__icon {
	display: inline-flex;
	width: 3rem; height: 3rem;
	align-items: center; justify-content: center;
	background: var(--nx-mist);
	color: var(--nx-cyan-deep);
	border-radius: 3px;
	margin-bottom: 1.1rem;
}
.nx-svc:hover .nx-svc__icon { background: var(--nx-cyan); color: #fff; }
.nx-svc__title { font-size: 1.15rem; margin-bottom: .5rem; }
.nx-svc__text { margin: 0 0 1rem; font-size: .95rem; color: var(--nx-steel); }
.nx-svc__points { list-style: none; margin: 0 0 1.1rem; padding: 0; font-size: .88rem; }
.nx-svc__points li { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .35rem; }
.nx-svc__points .nx-icon { width: 1.1rem; height: 1.1rem; color: var(--nx-cyan-deep); margin-top: .35rem; }
.nx-svc__more, .nx-card__more {
	display: inline-flex; align-items: center; gap: .4rem;
	font-family: "Montserrat", sans-serif;
	font-size: .8rem; font-weight: 700;
	color: var(--nx-cyan-deep);
	text-transform: uppercase; letter-spacing: .06em;
}
.nx-svc__more .nx-icon, .nx-card__more .nx-icon { width: 1rem; height: 1rem; transition: transform .18s ease; }
.nx-svc:hover .nx-svc__more .nx-icon, .nx-card:hover .nx-card__more .nx-icon { transform: translateX(4px); }

.nx-divgroup { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ---------- Cards ---------- */

.nx-card {
	background: #fff;
	border: 1px solid var(--nx-line);
	border-radius: 3px;
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}
.nx-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(22, 33, 43, .12); }
.nx-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--nx-mist); }
.nx-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nx-card:hover .nx-card__img { transform: scale(1.04); }
.nx-card__img--empty { display: block; height: 100%; }
.nx-card__body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.nx-card__kicker {
	font-family: "IBM Plex Mono", monospace;
	font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
	color: var(--nx-steel); margin: 0;
}
.nx-card__title { font-size: 1.1rem; margin: 0; }
.nx-card__title a { color: var(--nx-slate); text-decoration: none; }
.nx-card__title a:hover { color: var(--nx-cyan-deep); }
.nx-card__text { margin: 0; font-size: .92rem; color: var(--nx-steel); }
.nx-card__more { margin-top: auto; padding-top: .5rem; }

/* ---------- Tick lists ---------- */

.nx-ticks { list-style: none; margin: 1.5rem 0; padding: 0; }
.nx-ticks li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .7rem; }
.nx-ticks .nx-icon { width: 1.25rem; height: 1.25rem; color: var(--nx-cyan); margin-top: .35rem; }
.nx-ticks--sm { font-size: .9rem; }
.nx-ticks--sm .nx-icon { width: 1.05rem; height: 1.05rem; }

/* ---------- Statistics ---------- */

.nx-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 0;
	border-top: 1px solid var(--nx-line);
	border-left: 1px solid var(--nx-line);
}
.nx-stat {
	background: transparent;
	padding: 2rem 1.5rem;
	text-align: center;
	border-right: 1px solid var(--nx-line);
	border-bottom: 1px solid var(--nx-line);
}
.nx-stat__value {
	font-family: "Montserrat", sans-serif;
	font-size: clamp(2.2rem, 4.5vw, 3.2rem);
	font-weight: 800;
	line-height: 1;
	color: var(--nx-slate);
	margin: 0 0 .5rem;
	font-variant-numeric: tabular-nums;
}
.nx-stat__label {
	margin: 0;
	font-size: .85rem;
	color: var(--nx-steel);
	line-height: 1.5;
}

/* ---------- Industries ---------- */

.nx-inds {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	/* Fixed column counts rather than auto-fit: six items then land as two
	   clean rows of three instead of four plus a ragged pair. */
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 34rem) { .nx-inds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58rem) { .nx-inds { grid-template-columns: repeat(3, 1fr); } }

.nx-ind {
	display: flex; align-items: center; gap: .9rem;
	background: #fff;
	border: 1px solid var(--nx-line);
	border-radius: 3px;
	padding: 1.15rem 1.35rem;
	min-height: 4.5rem;
	font-size: .95rem;
	font-weight: 400;
	/* Keep hyphenated phrases like "office fit-out" on one line where the
	   column is wide enough to hold them. */
	hyphens: none;
}
.nx-ind .nx-icon { color: var(--nx-cyan-deep); }

/* ---------- Why ---------- */

.nx-grid--rules .nx-why {
	border-left: 2px solid rgba(48, 188, 241, .35);
	padding-left: 1.35rem;
	border-radius: 0;
}
.nx-why__num {
	font-family: "IBM Plex Mono", monospace;
	font-size: .78rem; letter-spacing: .1em;
	color: var(--nx-cyan);
	display: block; margin-bottom: .6rem;
}
.nx-why__title { font-size: 1.1rem; margin-bottom: .4rem; }
.nx-why__text { margin: 0; font-size: .93rem; color: rgba(255, 255, 255, .72); }

/* ---------- Locations ---------- */

.nx-locs { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.nx-locs li {
	display: flex; align-items: center; gap: .7rem;
	background: var(--nx-mist);
	padding: .85rem 1.1rem;
	border-left: 2px solid var(--nx-cyan);
	font-size: .95rem;
}
.nx-locs .nx-icon { width: 1.15rem; height: 1.15rem; color: var(--nx-cyan-deep); }

/* ---------- Call to action ---------- */

.nx-cta { position: relative; overflow: hidden; background: var(--nx-slate-deep); }
.nx-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nx-cta__veil {
	position: absolute; inset: 0;
	background: linear-gradient(100deg,
		rgba(18, 37, 47, .95) 0%,
		rgba(18, 37, 47, .88) 42%,
		rgba(18, 37, 47, .58) 100%);
}
.nx-cta__inner {
	position: relative;
	padding: clamp(3rem, 6vw, 5rem) 0;
	display: grid; gap: 2rem; align-items: center;
}
@media (min-width: 56rem) { .nx-cta__inner { grid-template-columns: 1.4fr 1fr; } }
.nx-cta__text { color: rgba(255, 255, 255, .84); margin: 0; max-width: 34rem; }
.nx-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin: 0; }
.nx-cta__phone {
	display: inline-flex; align-items: center; gap: .5rem;
	color: #fff; text-decoration: none;
	font-family: "IBM Plex Mono", monospace; font-size: .9rem;
}
.nx-cta__phone:hover { color: var(--nx-cyan); }

/* ---------- 3D tank ---------- */

.nx-tank3d {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: stretch;
}
@media (min-width: 62rem) { .nx-tank3d { grid-template-columns: 1.05fr 1fr; } }

.nx-tank3d__stage {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #0D1D26;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 3px;
	overflow: hidden;
	/* Vertical page scrolling passes straight through the model on touch;
	   rotation is a horizontal drag. */
	touch-action: pan-y;
}
.nx-tank3d__poster {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	opacity: .55;
	transition: opacity .5s ease;
}
.nx-tank3d.is-live .nx-tank3d__poster { opacity: 0; pointer-events: none; }
.nx-tank3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nx-tank3d__hint {
	position: absolute; left: 1rem; bottom: .9rem;
	margin: 0;
	font-family: "IBM Plex Mono", monospace;
	font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}
.nx-tank3d--static img { width: 100%; border-radius: 3px; }
.nx-tank3d__list { margin: 1.5rem 0 0; padding-left: 1.1rem; font-size: .95rem; }
.nx-tank3d__list li { margin-bottom: .6rem; }

.nx-tank3d__nav { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 2px; }
.nx-tank3d__tab {
	display: flex; align-items: baseline; gap: .75rem;
	width: 100%; text-align: left;
	background: rgba(255, 255, 255, .04);
	border: 0; border-left: 2px solid transparent;
	color: rgba(255, 255, 255, .7);
	font-family: "Montserrat", sans-serif;
	font-size: .85rem; font-weight: 600;
	padding: .7rem 1rem;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.nx-tank3d__tab:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nx-tank3d__tab.is-active { background: rgba(48, 188, 241, .14); border-left-color: var(--nx-cyan); color: #fff; }
.nx-tank3d__num { font-family: "IBM Plex Mono", monospace; font-size: .72rem; color: var(--nx-cyan); }
.nx-tank3d__pane { display: none; }
.nx-tank3d__pane.is-active { display: block; }
.nx-tank3d__pane h3 { color: #fff; font-size: 1.2rem; margin-bottom: .5rem; }
.nx-tank3d__pane p { margin: 0; color: rgba(255, 255, 255, .78); }

/* ---------- Before / after ---------- */

.nx-ba {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 3px;
	user-select: none;
	margin: 1.5rem 0 2rem;
	background: var(--nx-mist);
}
.nx-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nx-ba__clip { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.nx-ba__clip .nx-ba__img { width: 100vw; max-width: none; }
.nx-ba__handle {
	position: absolute; top: 0; bottom: 0; left: 50%;
	width: 2px; background: #fff;
	transform: translateX(-1px);
	pointer-events: none;
}
.nx-ba__handle::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 2.5rem; height: 2.5rem;
	transform: translate(-50%, -50%);
	border: 2px solid #fff; border-radius: 50%;
	background: rgba(18, 37, 47, .45);
}
.nx-ba__label {
	position: absolute; top: 1rem;
	font-family: "IBM Plex Mono", monospace;
	font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
	background: rgba(18, 37, 47, .78); color: #fff;
	padding: .3rem .6rem; border-radius: 2px;
	pointer-events: none;
}
.nx-ba__label--b { left: 1rem; }
.nx-ba__label--a { right: 1rem; }
.nx-ba__range {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	opacity: 0; cursor: ew-resize; margin: 0;
}
.nx-ba__sr { position: absolute; left: -9999px; }

/* ---------- Gallery ---------- */

.nx-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: .75rem;
	margin: 1.5rem 0 2rem;
}
.nx-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }

/* ---------- Aside ---------- */

.nx-aside__card {
	background: var(--nx-mist);
	border-top: 3px solid var(--nx-cyan);
	padding: 1.75rem 1.5rem;
	border-radius: 3px;
}
.nx-aside__title { font-size: 1.05rem; margin-bottom: 1rem; }
.nx-aside__sub { font-size: .95rem; margin: 1.5rem 0 .5rem; }
.nx-aside__list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: .9rem; }
.nx-aside__list dt { color: var(--nx-steel); }
.nx-aside__list dd { margin: 0; font-weight: 500; }

/* ---------- Filter chips ---------- */

.nx-filter { background: var(--nx-mist); border-bottom: 1px solid var(--nx-line); }
.nx-filter__inner { display: flex; flex-wrap: wrap; gap: .5rem; padding: 1.1rem 0; }
.nx-chip {
	font-family: "Montserrat", sans-serif;
	font-size: .8rem; font-weight: 600;
	padding: .5rem 1rem;
	border: 1px solid var(--nx-line);
	border-radius: 2px;
	background: #fff;
	color: var(--nx-slate);
	text-decoration: none;
}
.nx-chip:hover { border-color: var(--nx-cyan); color: var(--nx-cyan-deep); }
.nx-chip.is-active { background: var(--nx-slate); border-color: var(--nx-slate); color: #fff; }

/* ---------- Contact block ---------- */

.nx-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}
.nx-contact__item {
	background: var(--nx-mist);
	border-top: 3px solid var(--nx-cyan);
	padding: 1.5rem;
	border-radius: 3px;
}
.nx-contact__item .nx-icon { color: var(--nx-cyan-deep); margin-bottom: .75rem; }
.nx-contact__item h3 { font-size: 1rem; margin-bottom: .4rem; }
.nx-contact__item p { margin: 0 0 .3rem; font-size: .95rem; }

/* ---------- Form ---------- */

.nx-form { margin: 2rem 0; }
.nx-form__grid { display: grid; gap: 1.25rem; }
@media (min-width: 45rem) {
	.nx-form__grid { grid-template-columns: 1fr 1fr; }
	.nx-form__row--full { grid-column: 1 / -1; }
}
.nx-form__row { margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.nx-form__row label {
	font-family: "Montserrat", sans-serif;
	font-size: .82rem; font-weight: 600;
	color: var(--nx-slate);
}
.nx-req { color: #C0392B; }
.nx-form input[type="text"], .nx-form input[type="email"], .nx-form input[type="tel"],
.nx-form input[type="date"], .nx-form select, .nx-form textarea {
	width: 100%;
	font-family: inherit; font-size: .95rem;
	padding: .8rem .9rem;
	border: 1px solid rgba(22, 33, 43, .25);
	border-radius: 2px;
	background: #fff;
	color: var(--nx-ink);
}
.nx-form textarea { resize: vertical; }
.nx-form input:focus, .nx-form select:focus, .nx-form textarea:focus {
	border-color: var(--nx-cyan);
	outline: 2px solid rgba(48, 188, 241, .3);
	outline-offset: 0;
}
.nx-form input[type="file"] { font-size: .9rem; }
.nx-form__hint { font-size: .8rem; color: var(--nx-steel); }
.nx-form__consent label {
	flex-direction: row; align-items: flex-start; gap: .6rem;
	display: flex; font-weight: 400; font-family: inherit; font-size: .9rem;
	line-height: 1.6;
}
.nx-form__consent input { margin-top: .35rem; flex: none; }

/* The honeypot must be reachable by nothing and visible to no one. */
.nx-hp { position: absolute !important; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.nx-notice { padding: 1rem 1.25rem; border-radius: 2px; margin-bottom: 1.5rem; }
.nx-notice--ok { background: #E7F6EC; border-left: 3px solid #1D9E75; }
.nx-notice--error { background: #FDECEA; border-left: 3px solid #C0392B; }
.nx-notice ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.nx-notice p { margin: 0; }

/* ---------- Footer ---------- */

.nx-footer { background: var(--nx-slate-deep); color: rgba(255, 255, 255, .7); font-size: .92rem; }
.nx-footer__grid {
	display: grid; gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.nx-footer__logo { height: 2.6rem; width: auto; margin-bottom: 1.25rem; }
.nx-footer__about { margin: 0 0 1.25rem; }
.nx-footer__title { color: #fff; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1.1rem; }
.nx-footer__contact, .nx-footer__menu { list-style: none; margin: 0; padding: 0; }
.nx-footer__contact li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .8rem; }
.nx-footer__contact .nx-icon { width: 1.15rem; height: 1.15rem; color: var(--nx-cyan); margin-top: .3rem; flex: none; }
.nx-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.nx-footer a:hover { color: var(--nx-cyan); text-decoration: underline; }
.nx-footer__menu li { margin-bottom: .6rem; }
.nx-footer__social { display: flex; gap: 1rem; margin: 0; }
.nx-footer__bar { border-top: 1px solid rgba(255, 255, 255, .12); font-size: .82rem; }
.nx-footer__barinner {
	display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
	justify-content: space-between; padding: 1.25rem 0;
}
.nx-footer__bar p { margin: 0; }

.nx-widget__title { color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Floating WhatsApp ---------- */

.nx-float {
	position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 80;
	width: 3.25rem; height: 3.25rem;
	display: flex; align-items: center; justify-content: center;
	background: #1D9E75; color: #fff;
	border-radius: 50%;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
	transition: transform .18s ease;
}
.nx-float:hover { transform: scale(1.06); color: #fff; }

/* ---------- Pagination ---------- */

.nx-pagination { margin-top: 3rem; }
.nx-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.nx-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.5rem; height: 2.5rem; padding: 0 .6rem;
	border: 1px solid var(--nx-line);
	border-radius: 2px;
	text-decoration: none; color: var(--nx-slate);
	font-family: "Montserrat", sans-serif; font-size: .85rem; font-weight: 600;
}
.nx-pagination .page-numbers.current,
.nx-pagination .page-numbers:hover { background: var(--nx-slate); border-color: var(--nx-slate); color: #fff; }

/* ---------- Scroll reveal ---------- */

.nx-js .nx-anim-on .nx-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1);
}
.nx-js .nx-anim-on .nx-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.nx-js .nx-anim-on .nx-reveal { opacity: 1 !important; transform: none !important; transition: none; }
	.nx-btn, .nx-card, .nx-svc, .nx-card__img { transition: none !important; }
	.nx-btn:hover, .nx-card:hover, .nx-svc:hover { transform: none; }
}

/* ---------- Print ---------- */

@media print {
	.nx-topbar, .nx-header, .nx-float, .nx-cta, .nx-tank3d__stage { display: none !important; }
	body { color: #000; }
}

/* ---------- 3D hotspot markers ---------- */

.nx-tank3d__markers { position: absolute; inset: 0; pointer-events: none; }

.nx-marker {
	position: absolute;
	top: 0; left: 0;
	display: flex; align-items: center; gap: .4rem;
	background: rgba(13, 29, 38, .82);
	border: 1px solid rgba(48, 188, 241, .6);
	border-radius: 2rem;
	color: #fff;
	padding: .25rem .6rem .25rem .3rem;
	cursor: pointer;
	transition: opacity .25s ease, background-color .18s ease, border-color .18s ease;
	pointer-events: auto;
}
.nx-marker:hover, .nx-marker.is-active {
	background: var(--nx-cyan);
	border-color: var(--nx-cyan);
	color: #08222E;
}
.nx-marker__dot {
	width: .6rem; height: .6rem;
	border-radius: 50%;
	background: var(--nx-cyan);
	box-shadow: 0 0 0 3px rgba(48, 188, 241, .25);
	flex: none;
}
.nx-marker.is-active .nx-marker__dot { background: #08222E; box-shadow: none; }
.nx-marker__n {
	font-family: "IBM Plex Mono", monospace;
	font-size: .68rem;
	letter-spacing: .06em;
}

@media (prefers-reduced-motion: reduce) {
	.nx-marker { transition: none; }
}

/* ---------- Tank condition toggle ---------- */

.nx-tank3d__left { display: flex; flex-direction: column; gap: 1.25rem; }

.nx-state[hidden] { display: none; }

.nx-state__legend {
	font-family: "IBM Plex Mono", monospace;
	font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
	margin: 0 0 .6rem;
}
.nx-state__btns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 3px;
	padding: 2px;
}
.nx-state__btn {
	display: flex; flex-direction: column; gap: .2rem;
	background: transparent;
	border: 0;
	border-radius: 2px;
	color: rgba(255, 255, 255, .68);
	font-family: "Montserrat", sans-serif;
	font-size: .78rem; font-weight: 600;
	text-align: left;
	padding: .6rem .75rem;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}
.nx-state__btn:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nx-state__btn.is-active { background: var(--nx-cyan); color: #08222E; }
.nx-state__n {
	font-family: "IBM Plex Mono", monospace;
	font-size: .64rem; letter-spacing: .1em;
	color: var(--nx-cyan);
}
.nx-state__btn.is-active .nx-state__n { color: rgba(8, 34, 46, .7); }

.nx-state__caption {
	display: none;
	margin: .9rem 0 0;
	font-size: .88rem;
	color: rgba(255, 255, 255, .72);
	border-left: 2px solid var(--nx-cyan);
	padding-left: .9rem;
}
.nx-state__caption.is-active { display: block; }

@media (max-width: 30rem) {
	.nx-state__btns { grid-template-columns: 1fr; }
	.nx-state__btn { flex-direction: row; align-items: baseline; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.nx-state__btn { transition: none; }
}

/* =========================================================================
   Motion pass
   Transform and opacity only. Everything here is inside .nx-anim-on, so the
   Scroll animations switch in Nexro Settings removes all of it, and the
   reduced-motion block at the end of this file overrides the lot.
   ========================================================================= */

/* ---------- Letter roll on buttons and navigation ---------- */

.nx-roll {
	display: inline-block;
	position: relative;
	overflow: hidden;
	vertical-align: top;
	/* Padding keeps descenders (g, y, p) from being clipped by the
	   overflow that makes the roll work. */
	padding: .14em 0;
	margin: -.14em 0;
}
.nx-roll__line { display: block; white-space: nowrap; }
.nx-roll__line--b { position: absolute; left: 0; top: .14em; }
.nx-roll span { display: inline-block; }

.nx-anim-on .nx-roll span {
	transition: transform .42s cubic-bezier(.2, .7, .2, 1);
}
.nx-anim-on .nx-roll__line--b span { transform: translateY(105%); }

@media (hover: hover) {
	.nx-anim-on .nx-btn:hover .nx-roll__line--a span,
	.nx-anim-on .nx-menu a:hover .nx-roll__line--a span,
	.nx-anim-on .nx-chip:hover .nx-roll__line--a span { transform: translateY(-105%); }

	.nx-anim-on .nx-btn:hover .nx-roll__line--b span,
	.nx-anim-on .nx-menu a:hover .nx-roll__line--b span,
	.nx-anim-on .nx-chip:hover .nx-roll__line--b span { transform: translateY(0); }
}

/* Keyboard users get the same effect, so focus is never a lesser state. */
.nx-anim-on .nx-btn:focus-visible .nx-roll__line--a span,
.nx-anim-on .nx-menu a:focus-visible .nx-roll__line--a span { transform: translateY(-105%); }
.nx-anim-on .nx-btn:focus-visible .nx-roll__line--b span,
.nx-anim-on .nx-menu a:focus-visible .nx-roll__line--b span { transform: translateY(0); }

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

.nx-menu a { position: relative; }
.nx-menu a::after {
	content: "";
	position: absolute;
	left: .85rem; right: .85rem; bottom: .32rem;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .32s cubic-bezier(.2, .7, .2, 1);
}
.nx-menu a:hover, .nx-menu .current-menu-item > a { background: transparent; }
.nx-menu a:hover::after,
.nx-menu a:focus-visible::after,
.nx-menu .current-menu-item > a::after { transform: scaleX(1); }

@media (max-width: 71.99rem) {
	/* In the stacked mobile menu an underline fights the row dividers. */
	.nx-menu a::after { display: none; }
	.nx-menu a:hover { background: var(--nx-mist); }
}

/* ---------- Headings arriving word by word ---------- */

.nx-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: .08em;
}
.nx-js .nx-anim-on .nx-word > span {
	display: inline-block;
	transform: translateY(110%);
	transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.nx-js .nx-anim-on .nx-words.is-in .nx-word > span { transform: none; }

/* ---------- Images wiping up ---------- */

.nx-js .nx-anim-on .nx-wipe {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.05s cubic-bezier(.2, .7, .2, 1);
}
.nx-js .nx-anim-on .nx-wipe.is-in { clip-path: inset(0 0 0 0); }

/* ---------- Hero settling ---------- */

@keyframes nx-settle {
	from { transform: scale(1.07); }
	to   { transform: scale(1); }
}
.nx-anim-on .nx-hero__bg {
	animation: nx-settle 22s cubic-bezier(.15, .6, .25, 1) forwards;
	will-change: transform;
}

/* ---------- Reduced motion overrides everything above ---------- */

@media (prefers-reduced-motion: reduce) {
	.nx-anim-on .nx-roll span,
	.nx-js .nx-anim-on .nx-word > span { transition: none !important; transform: none !important; }
	.nx-roll__line--b { display: none; }
	.nx-js .nx-anim-on .nx-wipe { clip-path: none !important; transition: none; }
	.nx-anim-on .nx-hero__bg { animation: none; }
	.nx-menu a::after { transition: none; }
}

/* =========================================================================
   Sections placed inside a page
   A page's body copy is capped at a readable measure, but a whole section
   dropped in with a shortcode should span the full width. This lets the
   normal flow keep its measure while section-level blocks break out.
   ========================================================================= */

.nx-flow {
	display: grid;
	grid-template-columns: 1fr min(44rem, 100%) 1fr;
	max-width: none;
}
.nx-flow > * { grid-column: 2; }
.nx-flow > .nx-sec,
.nx-flow > .nx-cta,
.nx-flow > .nx-tank3d,
.nx-flow > .nx-contact,
.nx-flow > .nx-form { grid-column: 1 / -1; }

/* A breakout section still needs breathing room at its own edges — it is
   only the outer page gutter that would otherwise double up. */
.nx-flow > .nx-sec > .nx-wrap,
.nx-flow > .nx-cta > .nx-wrap { width: calc(100% - 3.5rem); }

/* Sitting inside a page, these sections do not need the full standalone
   vertical rhythm they get on the homepage. */
.nx-flow > .nx-sec { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.nx-flow > .nx-cta .nx-cta__inner { padding-top: clamp(2.5rem, 4.5vw, 3.5rem); padding-bottom: clamp(2.5rem, 4.5vw, 3.5rem); }

/* ---------- The 3D block used outside the dark homepage band ---------- */

.nx-tank3d--standalone {
	background: var(--nx-slate-deep);
	color: rgba(255, 255, 255, .82);
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border-radius: 3px;
	margin: 2.5rem 0;
}
.nx-tank3d--standalone .nx-tank3d__list { color: rgba(255, 255, 255, .8); }
.nx-tank3d--standalone .nx-tank3d__list strong { color: #fff; }

/* The static fallback is a figure rather than a grid, so it needs its own
   sizing when it carries the standalone surface. */
figure.nx-tank3d--standalone { display: block; }

/* ---------- Hint and marker layering ---------- */

.nx-tank3d__hint {
	/* Sits under the markers and never intercepts a tap meant for one. */
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(to right, rgba(13, 29, 38, .85), rgba(13, 29, 38, 0));
	padding: .3rem 2.5rem .3rem .1rem;
	border-radius: 2px;
	transition: opacity .4s ease;
}
.nx-tank3d__stage.nx-has-dragged .nx-tank3d__hint { opacity: 0; }
.nx-tank3d__markers { z-index: 2; }

/* ---------- Footer widgets ---------- */

.nx-widget { margin-bottom: 1.5rem; }
.nx-widget ul { list-style: none; margin: 0; padding: 0; }
.nx-widget li { margin-bottom: .6rem; }
.nx-widget a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.nx-widget a:hover { color: var(--nx-cyan); text-decoration: underline; }
.nx-widget select,
.nx-widget input[type="search"] {
	width: 100%;
	padding: .55rem .7rem;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 2px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-family: inherit;
	font-size: .9rem;
}
.nx-widget select option { color: var(--nx-ink); }

/* =========================================================================
   Overlay header
   On pages that open with the dark hero or the dark page head, the bar sits
   on top of that band as clear glass — the photograph runs behind the
   navigation. Once you scroll away from the dark band it returns to the
   frosted white bar with dark text.

   Applied via the .nx-overlay body class, which PHP only adds where the top
   of the page is genuinely dark. Everywhere else the frosted white bar is
   used from the start.
   ========================================================================= */

:root { --nx-header-h: 5rem; }

/* Pull the first section up so it begins behind the bar. */
.nx-overlay .nx-main { margin-top: calc(-1 * var(--nx-header-h)); }

/* A static element ignores z-index, so with the sticky header switched off
   the bar needs positioning of its own to stay above the content it now
   overlaps. */
body.nx-overlay:not(.nx-sticky-header) .nx-header { position: relative; }

.nx-overlay .nx-header {
	background: rgba(255, 255, 255, .04);
	-webkit-backdrop-filter: blur(12px) saturate(130%);
	backdrop-filter: blur(12px) saturate(130%);
	border-bottom-color: rgba(255, 255, 255, .14);
	box-shadow: none;
}

/* Light type while the bar is over the dark band. Once stuck, or with the
   mobile panel open, everything reverts to the normal dark-on-white bar. */
.nx-overlay .nx-header:not(.is-stuck):not(.nx-menu-open) .nx-menu a { color: #fff; }
.nx-overlay .nx-header:not(.is-stuck):not(.nx-menu-open) .nx-menu a:hover { background: transparent; }
.nx-overlay .nx-header:not(.is-stuck):not(.nx-menu-open) .nx-burger__box span { background: #fff; }

.nx-menu a { transition: color .25s ease, background-color .25s ease; }

/* Content has to clear the bar it is now sitting underneath. */
.nx-overlay .nx-hero__inner { padding-top: calc(4rem + var(--nx-header-h)); }
.nx-overlay .nx-pagehead { padding-top: calc(clamp(2.5rem, 6vw, 4.5rem) + var(--nx-header-h)); }

/* The mobile panel drops from a solid bar, not a clear one. */
.nx-overlay .nx-header.nx-menu-open {
	background: #fff;
	border-bottom-color: var(--nx-line);
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	/* Without blur, clear glass over a photograph is unreadable, so fall
	   back to a tinted bar that still lets the band show through. */
	.nx-overlay .nx-header { background: rgba(18, 37, 47, .55); }
}
@media (prefers-reduced-transparency: reduce) {
	.nx-overlay .nx-main { margin-top: 0; }
	.nx-overlay .nx-header { background: #fff; border-bottom-color: var(--nx-line); }
	.nx-overlay .nx-header .nx-menu a { color: var(--nx-slate); }
	.nx-overlay .nx-header .nx-burger__box span { background: var(--nx-slate); }
	.nx-overlay .nx-hero__inner { padding-top: 4rem; }
	.nx-overlay .nx-pagehead { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
}

/* =========================================================================
   Glass surfaces

   One rule decides where this is used: is there something behind it worth
   seeing? Over a photograph or the dark 3D scene, glass reads as glass. Over
   a white section it is just a grey box that costs a repaint on every scroll
   frame, so cards, forms, the aside panel and the filter chips are all left
   solid on purpose.

   To use it on something of your own, add class="nx-glass" (light surfaces)
   or class="nx-glass nx-glass--dark".
   ========================================================================= */

:root {
	--nx-glass-light: rgba(255, 255, 255, .14);
	--nx-glass-dark: rgba(13, 29, 38, .5);
	--nx-glass-blur: blur(14px) saturate(140%);
}

.nx-glass {
	background: var(--nx-glass-light);
	-webkit-backdrop-filter: var(--nx-glass-blur);
	backdrop-filter: var(--nx-glass-blur);
	border: 1px solid rgba(255, 255, 255, .22);
}
.nx-glass--dark {
	background: var(--nx-glass-dark);
	border-color: rgba(255, 255, 255, .14);
}

/* ---------- Buttons sitting over photography ---------- */

.nx-btn--light {
	background: var(--nx-glass-light);
	-webkit-backdrop-filter: var(--nx-glass-blur);
	backdrop-filter: var(--nx-glass-blur);
	border-color: rgba(255, 255, 255, .42);
	color: #fff;
}
.nx-btn--light:hover {
	background: #fff;
	color: var(--nx-slate);
	border-color: #fff;
}

/* The phone number beside the quotation button becomes a glass pill so the
   two actions read as a pair rather than a button and some loose text. */
.nx-cta__phone {
	background: var(--nx-glass-light);
	-webkit-backdrop-filter: var(--nx-glass-blur);
	backdrop-filter: var(--nx-glass-blur);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 2px;
	padding: .75rem 1.1rem;
	transition: background-color .2s ease, border-color .2s ease;
}
.nx-cta__phone:hover {
	background: rgba(255, 255, 255, .24);
	border-color: rgba(255, 255, 255, .4);
	color: #fff;
}

/* ---------- Labels over photographs ---------- */

.nx-plate--onimg {
	background: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	border-color: rgba(255, 255, 255, .5);
	color: var(--nx-slate-deep);
}

.nx-ba__label {
	background: rgba(13, 29, 38, .5);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .16);
}

/* ---------- The 3D scene ---------- */

.nx-tank3d__hint {
	background: var(--nx-glass-dark);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, .1);
	padding: .3rem .7rem;
}

.nx-marker {
	background: var(--nx-glass-dark);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
	border-color: rgba(48, 188, 241, .5);
}

.nx-tank3d__tab {
	background: rgba(255, 255, 255, .05);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.nx-tank3d__tab:hover { background: rgba(255, 255, 255, .1); }
.nx-tank3d__tab.is-active { background: rgba(48, 188, 241, .18); }

.nx-state__btns {
	background: rgba(255, 255, 255, .05);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* ---------- The mobile menu panel ---------- */

@media (max-width: 71.99rem) {
	.nx-nav {
		background: rgba(255, 255, 255, .88);
		-webkit-backdrop-filter: blur(20px) saturate(150%);
		backdrop-filter: blur(20px) saturate(150%);
	}
}

/* ---------- Fallbacks ---------- */

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.nx-glass { background: rgba(255, 255, 255, .2); }
	.nx-glass--dark, .nx-marker, .nx-tank3d__hint { background: rgba(13, 29, 38, .88); }
	.nx-btn--light, .nx-cta__phone { background: rgba(255, 255, 255, .18); }
	.nx-plate--onimg { background: rgba(255, 255, 255, .93); }
	.nx-ba__label { background: rgba(13, 29, 38, .85); }
	.nx-nav { background: #fff; }
}

@media (prefers-reduced-transparency: reduce) {
	.nx-glass, .nx-btn--light, .nx-cta__phone,
	.nx-plate--onimg, .nx-ba__label, .nx-marker,
	.nx-tank3d__hint, .nx-tank3d__tab, .nx-state__btns, .nx-nav {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.nx-btn--light, .nx-cta__phone { background: transparent; }
	.nx-plate--onimg { background: #fff; }
	.nx-ba__label, .nx-marker, .nx-tank3d__hint { background: var(--nx-slate-deep); }
	.nx-nav { background: #fff; }
}

/* -------------------------------------------------------------------------
   Overlay header, scrolled state

   .nx-overlay .nx-header and .nx-header.is-stuck carry the same specificity,
   so whichever is written last wins. The overlay rule sits later in this
   file, which meant the clear-glass background was still winning after the
   page had scrolled — leaving dark text on a near-transparent bar, and
   nothing readable over the dark sections. Stating the scrolled state at
   overlay specificity settles it.
   ---------------------------------------------------------------------- */

.nx-overlay .nx-header.is-stuck {
	background: rgba(255, 255, 255, .94);
	border-bottom-color: rgba(22, 33, 43, .12);
	box-shadow: 0 8px 30px rgba(22, 33, 43, .09);
}

/* The plain frosted bar gains the same margin of safety. */
.nx-header.is-stuck { background: rgba(255, 255, 255, .94); }

/* -------------------------------------------------------------------------
   Accessibility and support fallbacks, restated last

   The scrolled-state rules above are written after the earlier fallback
   blocks, which means they would otherwise re-introduce transparency for
   people who have asked their device to avoid it, and for browsers that
   cannot blur. Repeating the solid values here, last, keeps those promises.
   ---------------------------------------------------------------------- */

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.nx-header,
	.nx-header.is-stuck,
	.nx-overlay .nx-header.is-stuck { background: #fff; }
}

@media (prefers-reduced-transparency: reduce) {
	.nx-header,
	.nx-header.is-stuck,
	.nx-overlay .nx-header.is-stuck {
		background: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* =========================================================================
   Glass material

   A blur alone reads as a translucent panel, not as glass. Four things make
   the difference, and all of them are here:

     1. Vibrancy — a heavy saturation lift so colour behind bleeds through
        richer rather than washing out grey.
     2. A bright hairline on the top edge, where light catches the lip, and a
        darker one underneath. This is what gives the surface thickness.
     3. A soft outward shadow, so it floats above the page rather than being
        painted onto it.
     4. A faint grain, which stops large blurred areas banding into visible
        steps of colour.

   Corner radius stays at the theme's 2px rather than Apple's deep rounding.
   The rest of this site is built on square, engineered edges, and soft
   pill-shaped glass sitting inside it would read as borrowed.
   ========================================================================= */

:root {
	--nx-glass-blur: blur(24px) saturate(185%);
	--nx-glass-blur-sm: blur(14px) saturate(170%);

	/* Light glass, over photography or dark bands. */
	--nx-glass-tint: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .08) 100%);
	--nx-glass-edge:
		inset 0 1px 0 rgba(255, 255, 255, .55),
		inset 0 -1px 0 rgba(255, 255, 255, .07);

	/* Dark glass, over the 3D scene. */
	--nx-glass-tint-dark: linear-gradient(180deg, rgba(13, 29, 38, .58) 0%, rgba(13, 29, 38, .42) 100%);
	--nx-glass-edge-dark:
		inset 0 1px 0 rgba(255, 255, 255, .18),
		inset 0 -1px 0 rgba(0, 0, 0, .18);

	--nx-glass-lift: 0 10px 30px rgba(10, 26, 34, .16);

	--nx-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* Grain sits on the large surfaces only. On a small button it is invisible
   and would just cost another composited layer. */
.nx-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--nx-grain);
	opacity: .035;
	pointer-events: none;
	mix-blend-mode: overlay;
}
.nx-header { position: relative; }

@media (max-width: 71.99rem) {
	.nx-nav::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image: var(--nx-grain);
		opacity: .035;
		pointer-events: none;
		mix-blend-mode: overlay;
	}
}

/* ---------- Header ---------- */

.nx-header {
	background: linear-gradient(180deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .64) 100%);
	-webkit-backdrop-filter: var(--nx-glass-blur);
	backdrop-filter: var(--nx-glass-blur);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .7),
		inset 0 -1px 0 rgba(22, 33, 43, .05);
}
.nx-header.is-stuck,
.nx-overlay .nx-header.is-stuck {
	background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .9) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 10px 30px rgba(10, 26, 34, .12);
}

/* Clear glass over the hero: almost no tint, but the edge highlight and the
   vibrancy are what stop it looking like a plain transparent strip. */
.nx-overlay .nx-header:not(.is-stuck) {
	background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .03) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .3),
		inset 0 -1px 0 rgba(255, 255, 255, .08);
}

/* ---------- Buttons and pills over imagery ---------- */

.nx-btn--light,
.nx-cta__phone {
	background: var(--nx-glass-tint);
	-webkit-backdrop-filter: var(--nx-glass-blur-sm);
	backdrop-filter: var(--nx-glass-blur-sm);
	border-color: rgba(255, 255, 255, .34);
	box-shadow: var(--nx-glass-edge), var(--nx-glass-lift);
}
.nx-btn--light:hover {
	background: #fff;
	color: var(--nx-slate);
	border-color: #fff;
	box-shadow: var(--nx-glass-lift);
}
.nx-cta__phone:hover {
	background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .18) 100%);
	border-color: rgba(255, 255, 255, .5);
}

.nx-plate--onimg {
	background: linear-gradient(180deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .62) 100%);
	-webkit-backdrop-filter: var(--nx-glass-blur-sm);
	backdrop-filter: var(--nx-glass-blur-sm);
	border-color: rgba(255, 255, 255, .55);
	box-shadow: var(--nx-glass-edge), 0 4px 14px rgba(10, 26, 34, .18);
}

/* ---------- Dark glass in the 3D scene ---------- */

.nx-marker,
.nx-tank3d__hint,
.nx-ba__label {
	background: var(--nx-glass-tint-dark);
	-webkit-backdrop-filter: var(--nx-glass-blur-sm);
	backdrop-filter: var(--nx-glass-blur-sm);
	box-shadow: var(--nx-glass-edge-dark);
}
.nx-marker { border-color: rgba(48, 188, 241, .45); }
.nx-marker.is-active {
	background: linear-gradient(180deg, rgba(48, 188, 241, .95) 0%, rgba(21, 150, 198, .9) 100%);
	border-color: rgba(255, 255, 255, .5);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 14px rgba(10, 26, 34, .3);
}

.nx-tank3d__tab,
.nx-state__btns {
	background: linear-gradient(180deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .03) 100%);
	-webkit-backdrop-filter: var(--nx-glass-blur-sm);
	backdrop-filter: var(--nx-glass-blur-sm);
	box-shadow: var(--nx-glass-edge-dark);
}
.nx-tank3d__tab.is-active {
	background: linear-gradient(180deg, rgba(48, 188, 241, .26) 0%, rgba(48, 188, 241, .12) 100%);
}
.nx-state__btn.is-active {
	background: linear-gradient(180deg, rgba(48, 188, 241, 1) 0%, rgba(21, 150, 198, .94) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* ---------- Mobile menu panel ---------- */

@media (max-width: 71.99rem) {
	.nx-nav {
		position: absolute;
		background: linear-gradient(180deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .86) 100%);
		-webkit-backdrop-filter: var(--nx-glass-blur);
		backdrop-filter: var(--nx-glass-blur);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 18px 40px rgba(10, 26, 34, .16);
	}
}

/* -------------------------------------------------------------------------
   Support and accessibility fallbacks — restated last, again

   Every glass rule above uses backdrop-filter. Anything written after these
   blocks would quietly reinstate transparency for people who have asked
   their device to avoid it, so this has to stay at the foot of the file.
   ---------------------------------------------------------------------- */

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.nx-header,
	.nx-header.is-stuck,
	.nx-overlay .nx-header:not(.is-stuck),
	.nx-overlay .nx-header.is-stuck { background: #fff; }
	.nx-header::before, .nx-nav::before { display: none; }
	.nx-btn--light, .nx-cta__phone { background: rgba(255, 255, 255, .18); }
	.nx-plate--onimg { background: rgba(255, 255, 255, .93); }
	.nx-marker, .nx-tank3d__hint, .nx-ba__label { background: rgba(13, 29, 38, .88); }
	.nx-nav { background: #fff; }
}

@media (prefers-reduced-transparency: reduce) {
	.nx-header,
	.nx-header.is-stuck,
	.nx-overlay .nx-header:not(.is-stuck),
	.nx-overlay .nx-header.is-stuck {
		background: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
		border-bottom: 1px solid var(--nx-line);
	}
	.nx-header::before, .nx-nav::before { display: none; }
	.nx-btn--light, .nx-cta__phone,
	.nx-plate--onimg, .nx-ba__label, .nx-marker,
	.nx-tank3d__hint, .nx-tank3d__tab, .nx-state__btns, .nx-nav {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.nx-btn--light, .nx-cta__phone { background: transparent; }
	.nx-plate--onimg { background: #fff; }
	.nx-ba__label, .nx-marker, .nx-tank3d__hint { background: var(--nx-slate-deep); }
	.nx-nav { background: #fff; }
}

/* =========================================================================
   Atoll map
   ========================================================================= */

.nx-map { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 56rem) { .nx-map { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }

.nx-map__chart svg { width: 100%; height: auto; max-height: 70vh; }
.nx-map__note {
	font-family: "IBM Plex Mono", monospace;
	font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
	color: rgba(255, 255, 255, .4);
	margin: .5rem 0 0;
}

.nx-map__empty { fill: rgba(255, 255, 255, .22); }

.nx-map__atoll { cursor: pointer; }
.nx-map__halo { fill: rgba(48, 188, 241, .12); opacity: 0; transition: opacity .25s ease; }
.nx-map__dot {
	fill: rgba(48, 188, 241, .8);
	stroke: rgba(255, 255, 255, .5);
	stroke-width: 1;
	transition: fill .25s ease;
}
.nx-map__count {
	font-family: "Montserrat", sans-serif;
	font-size: 11px; font-weight: 800;
	fill: #08222E;
	pointer-events: none;
}
.nx-map__name {
	font-family: "IBM Plex Mono", monospace;
	font-size: 10px; letter-spacing: .08em;
	fill: rgba(255, 255, 255, .62);
	pointer-events: none;
	transition: fill .25s ease;
}
.nx-map__atoll:hover .nx-map__halo,
.nx-map__atoll:focus-visible .nx-map__halo,
.nx-map__atoll.is-active .nx-map__halo { opacity: 1; }
.nx-map__atoll:hover .nx-map__dot,
.nx-map__atoll.is-active .nx-map__dot { fill: #30BCF1; }
.nx-map__atoll:hover .nx-map__name,
.nx-map__atoll.is-active .nx-map__name { fill: #fff; }
.nx-map__atoll:focus { outline: none; }
.nx-map__atoll:focus-visible .nx-map__dot { stroke: #fff; stroke-width: 2.5; }

.nx-map__panel { min-width: 0; }
.nx-map__pane { display: none; }
.nx-map__pane.is-active { display: block; }
.nx-map__kicker {
	font-family: "IBM Plex Mono", monospace;
	font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--nx-cyan); margin: 0 0 .5rem;
}
.nx-map__title { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin-bottom: 1rem; }
.nx-map__hint { color: rgba(255, 255, 255, .6); margin: 0; }

.nx-map__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nx-map__list a {
	display: block;
	padding: .85rem 1.1rem;
	background: rgba(255, 255, 255, .05);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-left: 2px solid transparent;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}
.nx-map__list a:hover { background: rgba(48, 188, 241, .14); border-left-color: var(--nx-cyan); }
.nx-map__proj {
	display: block;
	font-family: "Montserrat", sans-serif;
	font-size: .92rem; font-weight: 600; color: #fff;
}
.nx-map__meta {
	display: block;
	font-family: "IBM Plex Mono", monospace;
	font-size: .72rem; letter-spacing: .05em;
	color: rgba(255, 255, 255, .55);
	margin-top: .2rem;
}

@media (prefers-reduced-motion: reduce) {
	.nx-map__halo, .nx-map__dot, .nx-map__name, .nx-map__list a { transition: none; }
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.nx-map__list a { background: rgba(255, 255, 255, .09); }
}
@media (prefers-reduced-transparency: reduce) {
	.nx-map__list a { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* =========================================================================
   Stage slider
   Built for photography that exists as a sequence rather than as two matched
   shots. Images are stacked and cross-faded, so nothing reflows as you move.
   ========================================================================= */

.nx-stages { margin: 1.5rem 0 2.5rem; }

.nx-stages__frame {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 3px;
	background: var(--nx-mist);
}
.nx-stages__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	opacity: 0;
	transition: opacity .45s ease;
}
.nx-stages__img.is-active { opacity: 1; }

.nx-stages__badge {
	position: absolute; left: 1rem; bottom: 1rem;
	display: flex; align-items: baseline; gap: .6rem;
	padding: .5rem .9rem;
	border-radius: 2px;
	background: var(--nx-glass-tint-dark, rgba(13, 29, 38, .5));
	-webkit-backdrop-filter: var(--nx-glass-blur-sm, blur(14px));
	backdrop-filter: var(--nx-glass-blur-sm, blur(14px));
	box-shadow: var(--nx-glass-edge-dark, none);
	color: #fff;
	max-width: calc(100% - 2rem);
}
.nx-stages__num {
	font-family: "IBM Plex Mono", monospace;
	font-size: .68rem; letter-spacing: .1em;
	color: var(--nx-cyan);
}
.nx-stages__label {
	font-family: "Montserrat", sans-serif;
	font-size: .85rem; font-weight: 600;
}

.nx-stages__control { margin-top: 1rem; }

.nx-stages__range {
	width: 100%;
	margin: 0 0 .75rem;
	accent-color: var(--nx-cyan);
	cursor: ew-resize;
}

.nx-stages__steps {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 2px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
}
.nx-stages__step {
	display: flex; flex-direction: column; gap: .15rem;
	width: 100%; text-align: left;
	background: var(--nx-mist);
	border: 0; border-top: 2px solid transparent;
	padding: .6rem .75rem;
	cursor: pointer;
	font-family: "Montserrat", sans-serif;
	color: var(--nx-steel);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.nx-stages__step:hover { background: #E8EEF2; color: var(--nx-slate); }
.nx-stages__step.is-active {
	background: var(--nx-slate);
	border-top-color: var(--nx-cyan);
	color: #fff;
}
.nx-stages__stepnum {
	font-family: "IBM Plex Mono", monospace;
	font-size: .64rem; letter-spacing: .1em;
	color: var(--nx-cyan-deep);
}
.nx-stages__step.is-active .nx-stages__stepnum { color: var(--nx-cyan); }
.nx-stages__steplabel { font-size: .8rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.nx-stages__img, .nx-stages__step { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
	.nx-stages__badge {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--nx-slate-deep);
	}
}

/* ---------- Stage rows in the admin ---------- */

/* =========================================================================
   Phase 1 — submenu, accessibility and layout corrections
   ========================================================================= */

/* ---------- Services submenu ---------- */

.nx-menu .nx-has-sub { position: relative; display: flex; align-items: center; }

.nx-subtoggle {
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; cursor: pointer;
	color: inherit;
	/* A 44px target, but visually tight against the link. */
	width: 2.75rem; height: 2.75rem;
	margin-left: -.55rem;
	padding: 0;
}
.nx-subtoggle__i { width: 1rem; height: 1rem; transition: transform .2s ease; }
.nx-has-sub.is-open > .nx-subtoggle .nx-subtoggle__i { transform: rotate(180deg); }

.nx-submenu {
	list-style: none; margin: 0; padding: .4rem;
	display: none;
}
.nx-has-sub.is-open > .nx-submenu { display: block; }

@media (min-width: 72rem) {
	.nx-submenu {
		position: absolute;
		top: 100%; left: 0;
		min-width: 17rem;
		background: rgba(255, 255, 255, .96);
		-webkit-backdrop-filter: var(--nx-glass-blur, blur(20px));
		backdrop-filter: var(--nx-glass-blur, blur(20px));
		border: 1px solid var(--nx-line);
		border-top: 2px solid var(--nx-cyan);
		border-radius: 0 0 3px 3px;
		box-shadow: 0 14px 34px rgba(10, 26, 34, .14);
		z-index: 95;
	}
	/* Hover opens it too, but hover is never the only route in. */
	.nx-has-sub:hover > .nx-submenu,
	.nx-has-sub:focus-within > .nx-submenu { display: block; }
	.nx-submenu a { white-space: normal; padding: .6rem .8rem; }
	.nx-submenu a::after { display: none; }
}

@media (max-width: 71.99rem) {
	.nx-menu .nx-has-sub { flex-wrap: wrap; }
	.nx-menu .nx-has-sub > a { flex: 1; }
	.nx-submenu { width: 100%; padding: 0 0 .5rem 1rem; }
	.nx-submenu a { border-bottom: 0; padding: .65rem .5rem; font-weight: 400; }
}

@media (prefers-reduced-motion: reduce) {
	.nx-subtoggle__i { transition: none; }
}

/* ---------- Contrast corrections ---------- */

/* The old secondary grey fell below 4.5:1 on white. This clears it. */
:root { --nx-steel: #55636F; }

.nx-crumbs { color: rgba(255, 255, 255, .82); }
.nx-crumbs a { color: #fff; }
.nx-crumbs__sep { color: rgba(255, 255, 255, .6); }

.nx-pagehead__meta { color: rgba(255, 255, 255, .88); }
.nx-why__text { color: rgba(255, 255, 255, .85); }
.nx-cta__text { color: rgba(255, 255, 255, .92); }
.nx-map__hint { color: rgba(255, 255, 255, .78); }
.nx-map__meta { color: rgba(255, 255, 255, .72); }
.nx-tank3d__pane p { color: rgba(255, 255, 255, .88); }
.nx-tank3d__tab { color: rgba(255, 255, 255, .82); }
.nx-state__caption { color: rgba(255, 255, 255, .85); }
.nx-footer { color: rgba(255, 255, 255, .8); }
.nx-footer a { color: rgba(255, 255, 255, .9); }
.nx-tank3d__hint { color: rgba(255, 255, 255, .8); }
.nx-map__note { color: rgba(255, 255, 255, .6); }
.nx-form__hint { color: #55636F; }
.nx-topbar { color: rgba(255, 255, 255, .85); }

/* ---------- Focus visibility ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--nx-cyan);
	outline-offset: 3px;
	border-radius: 2px;
}
.nx-sec--dark a:focus-visible,
.nx-sec--slate a:focus-visible,
.nx-footer a:focus-visible,
.nx-hero a:focus-visible,
.nx-cta a:focus-visible,
.nx-pagehead a:focus-visible { outline-color: #fff; }

/* ---------- Touch targets ---------- */

@media (pointer: coarse) {
	.nx-menu a { padding-top: .85rem; padding-bottom: .85rem; }
	.nx-topbar a { padding: .45rem 0; }
	.nx-footer__menu a,
	.nx-footer__contact a { display: inline-block; padding: .3rem 0; }
	.nx-chip { padding: .7rem 1.1rem; }
	.nx-tank3d__tab { padding: .9rem 1rem; }
	.nx-state__btn { padding: .85rem .75rem; }
}

/* Hover effects are a bonus on pointer devices, never a requirement. */
@media (hover: none) {
	.nx-card:hover, .nx-svc:hover, .nx-btn:hover { transform: none; }
	.nx-card:hover .nx-card__img { transform: none; }
}

/* ---------- Project cards fully clickable ---------- */

.nx-card--project { position: relative; }
.nx-card--project .nx-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* The plate and the "view project" cue sit above the blanket link so they
   still read, but the whole card is the target.

   The plate keeps position:absolute — it is anchored over the photograph, and
   z-index works on it as it stands. Setting position:relative here dropped it
   back into normal flow and the card's overflow clipped it in half. */
.nx-card--project .nx-plate--onimg { z-index: 2; }
.nx-card--project .nx-card__more { position: relative; z-index: 2; }

/* ---------- Layout stability ---------- */

/* Images loaded from a URL have no intrinsic dimensions in the markup, so a
   declared ratio is what stops the page jumping as they arrive. */
.nx-hero__bg, .nx-cta__bg { aspect-ratio: 16 / 9; }
.nx-split__media img { aspect-ratio: 4 / 3; object-fit: cover; }
.nx-hero-img img { aspect-ratio: 16 / 9; }
.nx-footer__logo, .nx-brand__img { aspect-ratio: 188 / 153; }

/* ---------- Header logo ---------- */

.nx-brand img, .nx-brand .custom-logo { height: 3.1rem; }
.nx-sticky-header .nx-header.is-stuck .nx-brand img,
.nx-sticky-header .nx-header.is-stuck .nx-brand .custom-logo { height: 2.5rem; }
@media (max-width: 30rem) {
	.nx-brand img, .nx-brand .custom-logo { height: 2.5rem; }
}

/* ---------- Wide screens ---------- */

/* Above about 1600px the single 1200px column left large empty margins and
   the hero text stranded on the left. */
@media (min-width: 100rem) {
	.nx-wrap { width: min(1440px, 100% - 4rem); }
	.nx-hero__inner { max-width: 54rem; }
	.nx-head { max-width: 52rem; }
	.nx-prose--page { max-width: 48rem; }
	.nx-flow { grid-template-columns: 1fr min(48rem, 100%) 1fr; }
}

/* ---------- Reduced motion, restated ---------- */

@media (prefers-reduced-motion: reduce) {
	.nx-hero__bg { animation: none !important; }
	.nx-card__img, .nx-svc__icon { transition: none !important; }
}

/* Quotation intro sits above the form and reads as guidance, not as a field. */
.nx-form__intro {
	max-width: 44rem;
	margin: 0 0 1.75rem;
	font-size: 1.02rem;
	color: var(--nx-ink);
}

/* The admin bar is fixed at the top of the viewport, so a sticky header needs
   to start below it or the first row of navigation is hidden underneath. */
body.admin-bar.nx-sticky-header .nx-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar.nx-sticky-header .nx-header { top: 46px; }
}

/* =========================================================================
   Phase 2 — quotation wizard
   ========================================================================= */

.nx-wiz__form { display: block; }
.nx-wiz__step { border: 0; margin: 0; padding: 0; }
.nx-wiz.is-stepped .nx-wiz__step[hidden] { display: none; }
.nx-wiz__legend {
	font-family: "Montserrat", sans-serif;
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-weight: 800;
	color: var(--nx-slate);
	padding: 0;
	margin-bottom: .5rem;
}
.nx-wiz__legend:focus-visible { outline: 3px solid var(--nx-cyan); outline-offset: 4px; }
.nx-wiz__note { color: var(--nx-steel); margin: 0 0 1.5rem; font-size: .95rem; }

/* ---------- Progress ---------- */

.nx-wiz__progress {
	list-style: none;
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: .35rem;
	margin: 0 0 2rem; padding: 0;
	counter-reset: nxstep;
}
.nx-wiz__progress li {
	counter-increment: nxstep;
	font-family: "IBM Plex Mono", monospace;
	font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--nx-steel);
	border-top: 3px solid var(--nx-line);
	padding-top: .55rem;
	transition: color .25s ease, border-color .25s ease;
}
.nx-wiz__progress li::before { content: counter(nxstep, decimal-leading-zero) " "; }
.nx-wiz__progress li.is-done { border-top-color: var(--nx-cyan-deep); color: var(--nx-cyan-deep); }
.nx-wiz__progress li.is-active { border-top-color: var(--nx-cyan); color: var(--nx-slate); font-weight: 600; }
@media (max-width: 34rem) {
	.nx-wiz__progress li span { display: none; }
}

/* ---------- Service choice ---------- */

.nx-wiz__choices {
	display: grid; gap: .75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.nx-wiz__choice { position: relative; display: block; cursor: pointer; }
.nx-wiz__choice input {
	position: absolute; opacity: 0;
	width: 1px; height: 1px;
}
.nx-wiz__choicebody {
	display: block;
	height: 100%;
	background: #fff;
	border: 1px solid var(--nx-line);
	border-top: 3px solid transparent;
	border-radius: 3px;
	padding: 1.25rem 1.15rem;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.nx-wiz__choice:hover .nx-wiz__choicebody {
	border-top-color: var(--nx-cyan);
	box-shadow: 0 12px 28px rgba(22, 33, 43, .09);
}
.nx-wiz__choice input:checked + .nx-wiz__choicebody {
	border-color: var(--nx-cyan);
	border-top-color: var(--nx-cyan);
	box-shadow: 0 0 0 2px rgba(48, 188, 241, .3);
}
.nx-wiz__choice input:focus-visible + .nx-wiz__choicebody {
	outline: 3px solid var(--nx-cyan);
	outline-offset: 3px;
}
.nx-wiz__choiceicon {
	display: inline-flex; width: 2.5rem; height: 2.5rem;
	align-items: center; justify-content: center;
	background: var(--nx-mist); color: var(--nx-cyan-deep);
	border-radius: 3px; margin-bottom: .85rem;
}
.nx-wiz__choice input:checked + .nx-wiz__choicebody .nx-wiz__choiceicon {
	background: var(--nx-cyan); color: #fff;
}
.nx-wiz__choicelabel {
	display: block;
	font-family: "Montserrat", sans-serif;
	font-size: 1rem; font-weight: 700; color: var(--nx-slate);
	margin-bottom: .2rem;
}
.nx-wiz__choicenote { display: block; font-size: .85rem; color: var(--nx-steel); }

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

.nx-wiz__nav {
	display: flex; flex-wrap: wrap; gap: .75rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--nx-line);
}
.nx-wiz__nav [hidden] { display: none; }
.nx-wiz__next, .nx-wiz__send { margin-left: auto; }

.nx-wiz__ref {
	font-family: "IBM Plex Mono", monospace;
	letter-spacing: .05em;
}

@media (prefers-reduced-motion: reduce) {
	.nx-wiz__progress li, .nx-wiz__choicebody { transition: none; }
	.nx-wiz__choice:hover .nx-wiz__choicebody { transform: none; }
}
@media (hover: none) {
	.nx-wiz__choice:hover .nx-wiz__choicebody { box-shadow: none; border-top-color: transparent; }
}

/* =========================================================================
   Phase 2 — contextual contact bar
   ========================================================================= */

.nx-contactbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 85;
	display: none;
	grid-template-columns: repeat(3, 1fr);
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: var(--nx-glass-blur, blur(20px));
	backdrop-filter: var(--nx-glass-blur, blur(20px));
	border-top: 1px solid var(--nx-line);
	box-shadow: 0 -6px 24px rgba(10, 26, 34, .1);
	padding-bottom: env(safe-area-inset-bottom, 0);
}
.nx-contactbar a {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: .2rem;
	min-height: 3.75rem;
	font-family: "Montserrat", sans-serif;
	font-size: .7rem; font-weight: 700;
	letter-spacing: .02em;
	color: var(--nx-slate);
	text-decoration: none;
	border-right: 1px solid var(--nx-line);
}
.nx-contactbar a:last-child { border-right: 0; }
.nx-contactbar a:active { background: var(--nx-mist); }
.nx-contactbar .nx-icon { width: 1.25rem; height: 1.25rem; color: var(--nx-cyan-deep); }
.nx-contactbar a.nx-contactbar__quote { background: var(--nx-cyan); color: #08222E; }
.nx-contactbar a.nx-contactbar__quote .nx-icon { color: #08222E; }

@media (max-width: 47.99rem) {
	.nx-contactbar { display: grid; }
	/* The floating WhatsApp button would sit on top of the bar. */
	body.nx-has-contactbar .nx-float { display: none; }
	body.nx-has-contactbar .nx-footer__bar { padding-bottom: 4.5rem; }
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.nx-contactbar { background: #fff; }
}
@media (prefers-reduced-transparency: reduce) {
	.nx-contactbar { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* =========================================================================
   MOTION SYSTEM

   One set of tokens, used everywhere. Timings that existed before this block
   were picked ad hoc; anything below refers to these instead.

   Two rules govern the whole system:

   1. Nothing essential is hidden by CSS alone. Every entrance is scoped to
      html.nx-js, a class only JavaScript can add. Scripts fail, content shows.
   2. Everything collapses under prefers-reduced-motion, at the foot of this
      file, where it cannot be overridden by anything written later.
   ========================================================================= */

:root {
	--nx-motion-fast:   200ms;   /* hover, focus, small state changes       */
	--nx-motion-normal: 450ms;   /* panel and content transitions           */
	--nx-motion-slow:   700ms;   /* section entrances                       */
	--nx-motion-hero:   800ms;   /* the one large entrance on the page      */
	--nx-stagger:       80ms;    /* between siblings in a group             */
	--nx-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
	--nx-ease-inout:    cubic-bezier(0.65, 0, 0.35, 1);
	--nx-lift:          5px;     /* how far a card rises                    */
	--nx-shift:         24px;    /* how far content travels on entrance     */
}

@media (max-width: 47.99rem) {
	:root {
		/* Shorter distances and tighter stagger on a phone: the same motion
		   at desktop scale feels sluggish on a small screen. */
		--nx-shift:   16px;
		--nx-stagger: 55ms;
		--nx-motion-slow: 550ms;
	}
}

/* -------------------------------------------------------------------------
   Homepage hero entrance
   Background, then eyebrow, headline, paragraph, buttons. About 1.2s total.
   ---------------------------------------------------------------------- */

@keyframes nx-rise {
	from { opacity: 0; transform: translate3d(0, var(--nx-shift), 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes nx-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.nx-js .nx-anim-on .nx-hero__bg {
	animation:
		nx-fade var(--nx-motion-hero) var(--nx-ease-out) both,
		nx-hero-zoom 14s var(--nx-ease-inout) 900ms forwards;
}
@keyframes nx-hero-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.035); }
}

.nx-js .nx-anim-on .nx-hero__inner > * {
	animation: nx-rise var(--nx-motion-hero) var(--nx-ease-out) both;
}
.nx-js .nx-anim-on .nx-hero__inner > .nx-eyebrow      { animation-delay: 180ms; }
.nx-js .nx-anim-on .nx-hero__inner > .nx-hero__title  { animation-delay: 280ms; }
.nx-js .nx-anim-on .nx-hero__inner > .nx-hero__text   { animation-delay: 520ms; }
.nx-js .nx-anim-on .nx-hero__inner > .nx-hero__actions{ animation-delay: 640ms; }

/* The headline arrives word by word inside that. Capped so a long heading
   never keeps the last word waiting. */
.nx-js .nx-anim-on .nx-hero__title .nx-word > span {
	transition-duration: var(--nx-motion-slow);
	transition-timing-function: var(--nx-ease-out);
}

@media (max-width: 47.99rem) {
	/* Background movement earns nothing on a phone and costs compositing. */
	.nx-js .nx-anim-on .nx-hero__bg { animation: nx-fade var(--nx-motion-hero) var(--nx-ease-out) both; }
}

/* -------------------------------------------------------------------------
   Section reveal
   ---------------------------------------------------------------------- */

.nx-js .nx-anim-on .nx-reveal {
	transition:
		opacity var(--nx-motion-slow) var(--nx-ease-out),
		transform var(--nx-motion-slow) var(--nx-ease-out);
}
.nx-js .nx-anim-on .nx-word > span {
	transition: transform var(--nx-motion-slow) var(--nx-ease-out);
}
.nx-js .nx-anim-on .nx-wipe {
	transition: clip-path var(--nx-motion-slow) var(--nx-ease-out);
}

/* A cyan rule beside each section label, drawing itself as the heading
   arrives.

   It defaults to drawn. The undrawn state is applied only where JavaScript is
   running AND the browser supports :has() — so if either is missing, the rule
   is simply there, rather than invisible forever. The heading carries
   .nx-words once the script has split it, and .is-in once it has been
   revealed, which is what the selector keys off. */
.nx-eyebrow { position: relative; }
.nx-head .nx-eyebrow::after {
	content: "";
	position: absolute;
	left: 0; bottom: -.45rem;
	height: 2px; width: 2.5rem;
	background: currentColor;
	transform: scaleX(1);
	transform-origin: left center;
}
.nx-js .nx-anim-on .nx-head:has(.nx-words) .nx-eyebrow::after {
	transform: scaleX(0);
	transition: transform var(--nx-motion-slow) var(--nx-ease-out) 120ms;
}
.nx-js .nx-anim-on .nx-head:has(.nx-words.is-in) .nx-eyebrow::after {
	transform: scaleX(1);
}

/* -------------------------------------------------------------------------
   Cards
   ---------------------------------------------------------------------- */

.nx-svc, .nx-card {
	transition:
		transform var(--nx-motion-fast) var(--nx-ease-out),
		box-shadow var(--nx-motion-fast) var(--nx-ease-out),
		border-color var(--nx-motion-fast) var(--nx-ease-out);
}
.nx-svc:focus-within, .nx-svc:hover {
	transform: translate3d(0, calc(var(--nx-lift) * -1), 0);
}
.nx-svc__icon {
	transition:
		background-color var(--nx-motion-fast) var(--nx-ease-out),
		color var(--nx-motion-fast) var(--nx-ease-out),
		transform var(--nx-motion-fast) var(--nx-ease-out);
}
.nx-svc:hover .nx-svc__icon,
.nx-svc:focus-within .nx-svc__icon { transform: scale(1.04); }

/* Keyboard focus gets the same treatment as hover, not a lesser one. */
.nx-card--project:focus-within {
	transform: translate3d(0, calc(var(--nx-lift) * -1), 0);
	box-shadow: 0 18px 40px rgba(22, 33, 43, .14);
}
.nx-card--project:focus-within .nx-card__img,
.nx-card--project:hover .nx-card__img { transform: scale(1.04); }
.nx-card__img { transition: transform var(--nx-motion-normal) var(--nx-ease-out); }

/* A restrained darkening as the image scales, so the plate stays legible. */
.nx-card__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(10, 26, 34, .34), rgba(10, 26, 34, 0) 55%);
	opacity: 0;
	transition: opacity var(--nx-motion-normal) var(--nx-ease-out);
	pointer-events: none;
}
.nx-card--project:hover .nx-card__media::after,
.nx-card--project:focus-within .nx-card__media::after { opacity: 1; }

/* Capacity plates settle into place with the card. */
.nx-js .nx-anim-on .nx-card--project.is-in .nx-plate--onimg {
	animation: nx-rise var(--nx-motion-normal) var(--nx-ease-out) 180ms both;
}

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */

.nx-btn {
	transition:
		background-color var(--nx-motion-fast) var(--nx-ease-out),
		color var(--nx-motion-fast) var(--nx-ease-out),
		border-color var(--nx-motion-fast) var(--nx-ease-out),
		transform var(--nx-motion-fast) var(--nx-ease-out);
}
.nx-btn .nx-icon { transition: transform var(--nx-motion-fast) var(--nx-ease-out); }
.nx-btn:hover .nx-icon, .nx-btn:focus-visible .nx-icon { transform: translate3d(4px, 0, 0); }
/* Movement stays under 2px so the target never slides out from under a cursor. */
.nx-btn:hover, .nx-btn:focus-visible { transform: translate3d(0, -1px, 0); }

/* -------------------------------------------------------------------------
   Tank
   ---------------------------------------------------------------------- */

.nx-marker { transition: opacity var(--nx-motion-normal) var(--nx-ease-out), transform var(--nx-motion-fast) var(--nx-ease-out), background-color var(--nx-motion-fast) var(--nx-ease-out); }
.nx-marker:hover, .nx-marker:focus-visible { transform: translate(-50%, -50%) scale(1.12); }
.nx-marker.is-active .nx-marker__dot { box-shadow: 0 0 0 4px rgba(48, 188, 241, .35); }

/* Stage panes crossfade in place rather than snapping. */
.nx-tank3d__body { display: grid; }
.nx-tank3d__pane {
	grid-area: 1 / 1;
	display: block;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 8px, 0);
	transition:
		opacity var(--nx-motion-normal) var(--nx-ease-out),
		transform var(--nx-motion-normal) var(--nx-ease-out),
		visibility 0s linear var(--nx-motion-normal);
}
.nx-tank3d__pane.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

/* A progress line down the six stages, filled to the active one. */
.nx-tank3d__nav { position: relative; padding-left: 2px; }
.nx-tank3d__nav::before,
.nx-tank3d__nav::after {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 2px;
}
.nx-tank3d__nav::before { background: rgba(255, 255, 255, .12); }
.nx-tank3d__nav::after {
	background: var(--nx-cyan);
	transform-origin: top center;
	transform: scaleY(var(--nx-stage-progress, 0));
	transition: transform var(--nx-motion-normal) var(--nx-ease-out);
}
.nx-tank3d__tab { border-left: 0; }

/* -------------------------------------------------------------------------
   WhatsApp — one gentle prompt, then silence
   ---------------------------------------------------------------------- */

@keyframes nx-attention {
	0%, 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
	50%      { transform: scale(1.07); box-shadow: 0 8px 30px rgba(29, 158, 117, .5); }
}
.nx-js .nx-anim-on .nx-float.is-prompting {
	animation: nx-attention 1.1s var(--nx-ease-inout) 2;
}

/* -------------------------------------------------------------------------
   Page transitions
   Native browser feature. Unsupported browsers navigate as they always did.
   ---------------------------------------------------------------------- */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: nx-fade 200ms var(--nx-ease-out) reverse; }
::view-transition-new(root) { animation: nx-fade 220ms var(--nx-ease-out); }

/* -------------------------------------------------------------------------
   Reduced motion — the last word in this file
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }

	.nx-js .nx-anim-on .nx-hero__bg,
	.nx-js .nx-anim-on .nx-hero__inner > *,
	.nx-js .nx-anim-on .nx-float.is-prompting,
	.nx-js .nx-anim-on .nx-card--project.is-in .nx-plate--onimg {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.nx-head .nx-eyebrow::after { transform: scaleX(1) !important; transition: none !important; }
	.nx-tank3d__pane {
		transition: none !important;
		transform: none !important;
	}
	.nx-tank3d__nav::after { transition: none !important; }
	.nx-svc:hover, .nx-svc:focus-within,
	.nx-card--project:hover, .nx-card--project:focus-within,
	.nx-btn:hover, .nx-btn:focus-visible { transform: none !important; }
	.nx-card__img, .nx-svc__icon, .nx-marker { transform: none !important; transition: none !important; }
	.nx-card__media::after { transition: none !important; }
}

/* -------------------------------------------------------------------------
   Submenu contrast

   The overlay header turns its links white so they read against the dark
   band behind them. That rule was also reaching the submenu, whose panel is
   light — producing white text on a white panel. The submenu is light in
   every header state, so its links are dark in every header state.
   ---------------------------------------------------------------------- */

.nx-menu .nx-submenu a,
.nx-overlay .nx-header:not(.is-stuck):not(.nx-menu-open) .nx-submenu a {
	color: var(--nx-slate);
}
.nx-menu .nx-submenu a:hover,
.nx-menu .nx-submenu a:focus-visible,
.nx-overlay .nx-header:not(.is-stuck):not(.nx-menu-open) .nx-submenu a:hover {
	color: var(--nx-cyan-deep);
	background: var(--nx-mist);
}
.nx-menu .nx-submenu .current-menu-item > a { color: var(--nx-cyan-deep); }

@media (min-width: 72rem) {
	/* Nearly opaque: a dropdown has to be readable over whatever it lands on,
	   and it lands on photographs. */
	.nx-submenu {
		background: rgba(255, 255, 255, .98);
		border-top-color: var(--nx-cyan);
	}
}