/* ============================================================
   PHALANX SYSTEMS - next.css
   Site design system: scroll-story direction (ref. santionispirits.com)
   Loaded on every page. Everything is prefixed nx-; the inner-page skin
   at the end restyles the older page markup into the same system.

   Two layers, always:
   - base rules render a complete, static, stacked page;
   - .nx-anim rules (motion allowed, JS present) add pinning, intro and
     scroll-linked transforms. next.js feeds them through custom
     properties (--p, --in, --out, --draw, --x) and never writes layout.
   ============================================================ */

.nx-page {
  --nx-ink: #0B1730;
  --nx-paper: #F4F0E6;
  --nx-gold: #B98D2F;
  --nx-gold-deep: #8A6A22;
  --nx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nx-gutter: clamp(16px, 4vw, 56px);
  overflow-x: clip;
}

.nx-page h1,
.nx-page h2,
.nx-page h3 { letter-spacing: 0; }

.nx-wrap {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: var(--nx-gutter);
}

.nx-kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-700);
  margin-bottom: 14px;
}
.nx-kicker.on-dark { color: var(--nx-gold); }

/* ---------- Mega display type ---------- */
.nx-mega {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -0.01em;
}
.nx-line { display: block; }
.nx-mega-ink { color: var(--navy-800); }

/* Split text: next.js wraps each character. The readable copy stays in a
   visually hidden span, the animated glyphs are aria-hidden. */
.nx-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.nx-chars { display: inline-block; white-space: nowrap; }
/* No will-change: it made every animated letter its own GPU layer, hundreds
   per page, enough to make iOS Safari run out of memory and reload. */
.nx-ch { display: inline-block; }

.nx-anim .nx-line { overflow: hidden; padding-bottom: 0.04em; margin-bottom: -0.04em; }
.nx-anim .nx-ch {
  transform: translate3d(0, 108%, 0);
  transition: transform 1.15s var(--nx-ease);
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 32ms);
}
.nx-anim.nx-ready .nx-hero .nx-ch,
.nx-anim .is-in .nx-ch,
.nx-anim .is-in.nx-ch { transform: none; }

/* ---------- Buttons and links ---------- */
.nx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.35s var(--nx-ease);
}
.nx-btn-light { background: var(--ivory); color: var(--navy-900); }
.nx-btn-light:hover { background: var(--nx-gold); color: var(--navy-900); }
.nx-btn-line-light { border-color: rgba(255, 255, 255, 0.5); color: var(--white); }
.nx-btn-line-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }
.nx-btn-dark { background: var(--navy-800); color: var(--white); }
.nx-btn-dark:hover { background: var(--navy-900); }
.nx-btn:focus-visible,
.nx-link:focus-visible,
.nx-caps-pager button:focus-visible,
.nx-prod h3 a:focus-visible {
  outline: 2px solid var(--nx-gold);
  outline-offset: 3px;
}

.nx-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy-800);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1.5px no-repeat;
  transition: background-size 0.45s var(--nx-ease);
}
.nx-link::after { content: "\2192"; transition: transform 0.35s var(--nx-ease); }
.nx-link:hover { background-size: calc(100% - 26px) 1.5px; }
.nx-link:hover::after { transform: translateX(4px); }
.nx-link-light { color: var(--white); }

/* ============================================================
   NAV on this page: transparent, tone-aware
   ============================================================ */
/* Transparent only when next.js is running to set the tone; the static page
   keeps the site's solid white bar so the wordmark never lands on navy. */
.nx-anim body:has(.nx-page) .site-nav {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  transition: transform 0.42s var(--nx-ease), background-color 0.3s ease;
}
/* Once the page has moved, the bar gets a solid backing in the tone of
   whatever is under it, with a hairline edge, so pinned sections scrolling
   past (the Build / Connect / Own switcher on a phone) never print through
   the wordmark. */
.nx-anim body:has(.nx-page) .site-nav.scrolled {
  background: #F7F4EC;
  border-bottom-color: rgba(4, 24, 56, 0.12);
}
.nx-anim body:has(.nx-page) .site-nav.scrolled[data-nx-tone="dark"] { background: #061430; border-bottom-color: rgba(255, 255, 255, 0.1); }
body:has(.nx-page) .site-nav .nav-links {
  border: 1.5px solid var(--navy-800);
  background: var(--ivory);
  padding: 4px;
  gap: 0;
  border-radius: 0;
}
body:has(.nx-page) .site-nav .nav-links a {
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body:has(.nx-page) .site-nav .nav-links a + a { border-left: 1px solid var(--line); }
body:has(.nx-page) .site-nav[data-nx-tone="dark"] .bw-name { color: var(--white); }
body:has(.nx-page) .site-nav[data-nx-tone="dark"] .bw-sub { color: var(--mist); }
body:has(.nx-page) .site-nav[data-nx-tone="dark"] .nav-links {
  background: var(--navy-900);
  border-color: rgba(255, 255, 255, 0.6);
}
body:has(.nx-page) .site-nav[data-nx-tone="dark"] .nav-links a { color: var(--white); }
body:has(.nx-page) .site-nav[data-nx-tone="dark"] .nav-links a + a { border-left-color: var(--line-dark); }
body:has(.nx-page) .site-nav[data-nx-tone="dark"] .nav-social { color: var(--white); }
body:has(.nx-page) .site-nav[data-nx-tone="dark"] .nav-cta { background: var(--ivory); color: var(--navy-900); }
body:has(.nx-page) .site-nav[data-nx-tone="dark"] .nav-toggle span { background: var(--white); }
body:has(.nx-page) .site-nav .brand-mark img { border-radius: 50%; }
body:has(.nx-page) .site-nav.nav-open { background: var(--white); }
body:has(.nx-page) .site-nav.nav-open .bw-name { color: var(--navy-800); }
body:has(.nx-page) .site-nav.nav-open .nav-toggle span { background: var(--navy-800); }
body:has(.nx-page) .scroll-progress { display: none; }

/* ============================================================
   PRELOADER
   ============================================================ */
.nx-loader { display: none; }
.nx-intro .nx-loader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 300;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
  pointer-events: none;
}
.nx-curtain {
  position: absolute;
  left: 0; right: 0;
  height: 50.5%;
  background: var(--navy-900);
  z-index: -1;
  transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}
.nx-curtain-top { top: 0; }
.nx-curtain-bottom { bottom: 0; }
.nx-loader-inner,
.nx-loader-foot { transition: opacity 0.45s ease, transform 0.8s var(--nx-ease); }
.nx-loader-inner { display: grid; justify-items: center; gap: 18px; }
.nx-loader-coin { width: 112px; height: 112px; overflow: visible; }
.nx-loader-coin .nx-draw {
  fill: none;
  stroke: var(--nx-gold);
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  animation: nx-draw 1.2s var(--nx-ease) forwards;
}
.nx-loader-coin .nx-draw-2 { stroke-width: 0.6; animation-delay: 0.15s; }
.nx-loader-coin .nx-dots {
  stroke-dasharray: 0.6 3.2;
  stroke-dashoffset: 0;
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0;
  animation: nx-fade 0.6s ease 0.5s forwards;
}
.nx-loader-p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 58px;
  fill: transparent;
  stroke: var(--ivory);
  stroke-width: 0.8;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: nx-draw-p 1.3s ease 0.3s forwards, nx-fill-p 0.5s ease 1.2s forwards;
}
.nx-loader-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--mist);
}
.nx-loader-foot {
  position: absolute;
  bottom: clamp(28px, 7vh, 64px);
  left: var(--nx-gutter);
  right: var(--nx-gutter);
  display: flex;
  align-items: center;
  gap: 20px;
}
.nx-loader-bar { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.16); }
.nx-loader-bar span { display: block; height: 100%; background: var(--nx-gold); transform-origin: left; transform: scaleX(0); }
.nx-loader-count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--mist);
}
.nx-ready .nx-loader-inner { opacity: 0; transform: scale(0.92); }
.nx-ready .nx-loader-foot { opacity: 0; }
.nx-ready .nx-curtain-top { transform: translateY(-101%); transition-delay: 0.2s; }
.nx-ready .nx-curtain-bottom { transform: translateY(101%); transition-delay: 0.2s; }

@keyframes nx-draw { to { stroke-dashoffset: 0; } }
@keyframes nx-draw-p { to { stroke-dashoffset: 0; } }
@keyframes nx-fill-p { to { fill: var(--ivory); } }
@keyframes nx-fade { to { opacity: 1; } }

/* ============================================================
   HERO
   ============================================================ */
.nx-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 24px) var(--nx-gutter) 40px;
  background: var(--navy-900);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.nx-hero-atmos {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(22, 48, 124, 0.75), transparent 70%),
    radial-gradient(40% 40% at 50% 46%, rgba(185, 141, 47, 0.14), transparent 70%);
}
.nx-rosette {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: min(118vw, 1080px);
  aspect-ratio: 1;
  translate: -50% -50%;
  overflow: visible;
  pointer-events: none;
}
.nx-rosette path {
  fill: none;
  stroke: var(--nx-gold);
  stroke-width: 0.55;
  vector-effect: non-scaling-stroke;
  opacity: 0.5;
}
.nx-rosette .r-soft { stroke: #6E86C2; opacity: 0.35; }
.nx-hero-mega {
  text-align: center;
  font-size: clamp(2.9rem, 13.2vw, 11.6rem);
  color: var(--ivory);
}
.nx-hero-mega .nx-line:nth-child(2) { --d: 120ms; }
.nx-hero-mega .nx-line:nth-child(3) { --d: 240ms; color: var(--nx-gold); }

.nx-hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-top: clamp(28px, 5vh, 56px);
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
}
.nx-hero-foot h1 {
  max-width: 30ch;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.02rem, 0.9rem + 0.5vw, 1.3rem);
  line-height: 1.45;
  color: #D8E0EE;
}
.nx-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; flex: none; }
.nx-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mist);
}
.nx-scroll-cue span { width: 1px; height: 34px; background: linear-gradient(var(--nx-gold), transparent); }

/* Intro + scroll-out */
.nx-anim .nx-rosette path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 3.2s cubic-bezier(0.45, 0, 0.2, 1);
  transition-delay: calc(var(--k, 0) * 140ms + 250ms);
}
.nx-anim.nx-ready .nx-rosette path { stroke-dashoffset: 0; }
.nx-anim .nx-rosette { animation: nx-spin 160s linear infinite; }
.nx-anim .nx-hero-foot,
.nx-anim .nx-scroll-cue {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease 0.85s, transform 1s var(--nx-ease) 0.85s;
}
.nx-anim.nx-ready .nx-hero-foot,
.nx-anim.nx-ready .nx-scroll-cue { opacity: 1; transform: none; }
.nx-anim .nx-hero-mega .nx-line:nth-child(1) { translate: calc(var(--p, 0) * -22vw) 0; }
.nx-anim .nx-hero-mega .nx-line:nth-child(2) { translate: calc(var(--p, 0) * 22vw) 0; }
.nx-anim .nx-hero-mega .nx-line:nth-child(3) { translate: calc(var(--p, 0) * -22vw) 0; }
.nx-anim .nx-hero-atmos { opacity: calc(1 - var(--p, 0) * 0.8); }
.nx-anim .nx-hero { --p: 0; }
.nx-anim .nx-rosette { scale: calc(1 + var(--p, 0) * 0.5); }
@keyframes nx-spin { to { rotate: 360deg; } }

/* ============================================================
   CAPABILITIES: the coin
   ============================================================ */
.nx-caps {
  position: relative;
  background: var(--ivory);
  color: var(--ink);
}
.nx-stage { position: relative; }

/* Static base: words hidden, coin once, three blocks stacked. */
.nx-caps .nx-stage {
  padding: clamp(64px, 10vw, 120px) var(--nx-gutter);
  display: grid;
  gap: 40px;
  justify-items: center;
}
.nx-caps-words { display: none; }
.nx-caps-pager { display: none; }
.nx-caps-copy {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  width: 100%;
  max-width: 1200px;
}
.nx-cap h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  color: var(--navy-800);
  margin-bottom: 12px;
}
.nx-cap p { color: var(--slate); max-width: 44ch; }
.nx-cap-list { list-style: none; margin: 18px 0 10px; display: grid; gap: 8px; }
.nx-cap-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-weight: 500;
  color: var(--ink);
}
.nx-cap-list li::before {
  content: "";
  flex: none;
  width: 14px; height: 1.5px;
  background: var(--nx-gold);
  translate: 0 -4px;
}

/* The coin */
.nx-coin-wrap {
  position: relative;
  width: clamp(200px, 30vw, 380px);
  aspect-ratio: 1;
  perspective: 1400px;
}
.nx-coin {
  --rot: 0deg;
  --tilt: 0deg;
  --thick: 22px;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt)) rotateY(var(--rot));
}
.nx-coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.nx-coin-face svg { width: 100%; height: 100%; display: block; }
.nx-coin-front { transform: translateZ(calc(var(--thick) / 2)); }
.nx-coin-back { transform: rotateY(180deg) translateZ(calc(var(--thick) / 2)); }
.nx-coin-edge { position: absolute; inset: 0; transform-style: preserve-3d; }
/* Each slice of the edge is a ring, not a solid disc. Chrome on desktop can
   sort a stack of solid discs in front of the back face, which left the coin
   a blank gold circle once it turned over. A ring only ever covers the rim,
   which reads as milled edge whichever way the sort goes. */
.nx-coin-edge i {
  position: absolute;
  inset: 0.6%;
  border-radius: 50%;
  border: clamp(4px, 1.1vw, 7px) solid var(--nx-gold-deep);
}
.nx-coin-edge i:nth-child(odd) { border-color: #A07B2A; }
.nx-coin-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: translateZ(calc(var(--thick) / 2 + 0.5px));
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 46%, transparent 60%) calc(var(--shine, 0.5) * 300% - 100%) 0 / 300% 100% no-repeat;
  pointer-events: none;
  mix-blend-mode: screen;
}
.nx-coin-shadow {
  position: absolute;
  left: 12%; right: 12%;
  bottom: -14%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(4, 24, 56, 0.28), transparent);
  scale: var(--shadow, 1) 1;
}
.cf-fill { fill: var(--navy-800); }
.cf-rim { fill: none; stroke: var(--nx-gold); stroke-width: 3; }
.cf-hair { fill: none; stroke: var(--nx-gold); stroke-width: 0.7; opacity: 0.8; }
.cf-dots { fill: none; stroke: var(--nx-gold); stroke-width: 2; stroke-dasharray: 0.5 4.2; stroke-linecap: round; }
.cf-ring, .cb-ring {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  fill: var(--nx-gold);
}
.cf-p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 92px;
  fill: var(--ivory);
}
.cb-fill { fill: var(--nx-gold); }
.cb-rim { fill: none; stroke: var(--navy-900); stroke-width: 3; }
.cb-hair { fill: none; stroke: var(--navy-900); stroke-width: 0.7; opacity: 0.7; }
.cb-ring { fill: var(--navy-900); }
.cb-lambda { fill: none; stroke: var(--navy-900); stroke-width: 11; stroke-linejoin: miter; }

/* Pinned version */
.nx-anim .nx-caps { height: 340svh; }
.nx-anim .nx-caps .nx-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  padding: 0;
  display: block;
  overflow: hidden;
}
.nx-anim .nx-caps-words {
  display: block;
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--nav-h) + 2svh);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(3.6rem, 16vw, 15.5rem);
  line-height: 0.86;
  color: var(--navy-800);
}
.nx-caps-word {
  position: absolute;
  left: 0; right: 0;
  overflow: hidden;
  padding-bottom: 0.04em;
}
.nx-caps-word .nx-ch { transform: translate3d(0, 108%, 0); transition-duration: 0.9s; }
.nx-caps-word.is-active .nx-ch { transform: none; }
.nx-caps-word.is-past .nx-ch { transform: translate3d(0, -108%, 0); }

.nx-anim .nx-coin-wrap {
  position: absolute;
  left: 50%;
  top: 56%;
  translate: -50% -50%;
  width: clamp(210px, min(31vw, 46svh), 400px);
}
.nx-anim .nx-caps-copy {
  position: absolute;
  inset: 0;
  display: block;
  max-width: none;
  pointer-events: none;
}
.nx-anim .nx-cap {
  position: absolute;
  left: var(--nx-gutter);
  bottom: clamp(70px, 12svh, 120px);
  width: min(30vw, 400px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.8s var(--nx-ease), visibility 0s linear 0.5s;
  pointer-events: auto;
}
.nx-anim .nx-cap.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.15s, 0.15s, 0s;
}
/* The list moves to the right-hand column. It stays inside its cap (so it
   fades with it) and is offset from the cap's left edge, which sits at the
   gutter: the result lands flush with the right gutter. */
.nx-anim .nx-cap .nx-cap-list {
  position: absolute;
  left: calc(100vw - 2 * var(--nx-gutter) - min(26vw, 340px));
  bottom: 0;
  width: min(26vw, 340px);
  margin: 0;
}
.nx-anim .nx-caps-pager {
  display: flex;
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4svh, 36px);
  translate: -50% 0;
  gap: 4px;
  border: 1.5px solid var(--navy-800);
  padding: 4px;
  background: var(--ivory);
}
.nx-caps-pager button {
  min-height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.nx-caps-pager button.is-active { background: var(--navy-800); color: var(--white); }

/* ============================================================
   BAND
   ============================================================ */
.nx-band {
  background: var(--navy-800);
  color: var(--white);
  padding: clamp(28px, 5vw, 56px) 0;
  overflow: hidden;
  border-block: 1px solid var(--line-dark);
}
.nx-band-row { display: flex; width: max-content; white-space: nowrap; }
.nx-band-row > span { flex: none; padding-right: 0.3em; }
.nx-band-big {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(3rem, 11vw, 10rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.55);
}
.nx-band-big i { font-style: normal; color: var(--nx-gold); -webkit-text-stroke: 0; font-size: 0.4em; vertical-align: middle; }
.nx-band-small {
  margin-top: clamp(14px, 2vw, 24px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 0.7rem + 0.6vw, 1.2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist);
}
.nx-band-row { transform: translate3d(var(--x, 0px), 0, 0); }

/* ============================================================
   STORY: comic panels
   ============================================================ */
.nx-story {
  position: relative;
  background: var(--nx-paper);
  color: var(--nx-ink);
}
.nx-story-head {
  padding: clamp(80px, 12vw, 160px) var(--nx-gutter) clamp(32px, 5vw, 64px);
  text-align: center;
}
/* Split by word, not by letter, so each line can wrap: a letter split joins
   the words with no-break spaces and ran "Built by one team," off the edge
   of a phone. The column is held to the screen so a long word cannot widen
   the whole header and push the lede off centre with it. */
.nx-story-head { grid-template-columns: minmax(0, 1fr); }
.nx-story-head .nx-mega { font-size: clamp(2.4rem, 7.2vw, 6.4rem); line-height: 0.94; overflow-wrap: anywhere; }
.nx-story-head .nx-line { display: inline-block; max-width: 100%; }
.nx-defs { position: absolute; }

/* Static base: chapters stacked as comic strips. */
.nx-story-stage {
  display: grid;
  gap: clamp(48px, 7vw, 96px);
  padding: 0 var(--nx-gutter) clamp(80px, 10vw, 140px);
  max-width: 1360px;
  margin-inline: auto;
}
.nx-chapter {
  position: relative;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 16px;
  --draw: 1;
  --in: 1;
  --out: 0;
}
.nx-panel {
  border: 3px solid var(--nx-ink);
  background: #FBF9F3;
  box-shadow: 8px 8px 0 var(--nx-ink);
}
.nx-panel-main { grid-row: 1 / span 2; aspect-ratio: 16 / 9; overflow: hidden; }
.nx-panel-main svg { width: 100%; height: 100%; display: block; }
/* Illustrated panels: printed in, not wiped in. As the chapter draws, the art
   comes up as halftone dots that swell until they merge, while a solid patch
   spreads out from the panel's focal point. Both are mask layers driven by
   --draw, so nothing but compositing runs per frame. */
.nx-panel-main { position: relative; }
.nx-panel-art { width: 100%; height: 100%; display: block; object-fit: cover; }
.nx-anim .nx-panel-main {
  --dot: clamp(7px, 0.85vw, 12px);
  --fx: 50%;
  --fy: 45%;
  background-image: radial-gradient(rgba(11, 23, 48, 0.14) 1.1px, transparent 1.4px);
  background-size: var(--dot) var(--dot);
}
.nx-anim .nx-panel-art {
  -webkit-mask-image:
    radial-gradient(circle, #000 calc(var(--draw) * 96%), transparent calc(var(--draw) * 96% + 5%)),
    radial-gradient(circle at var(--fx) var(--fy), #000 calc(var(--draw) * 150% - 50%), transparent calc(var(--draw) * 150% - 18%));
  -webkit-mask-size: var(--dot) var(--dot), 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-image:
    radial-gradient(circle, #000 calc(var(--draw) * 96%), transparent calc(var(--draw) * 96% + 5%)),
    radial-gradient(circle at var(--fx) var(--fy), #000 calc(var(--draw) * 150% - 50%), transparent calc(var(--draw) * 150% - 18%));
  mask-size: var(--dot) var(--dot), 100% 100%;
  mask-repeat: repeat, no-repeat;
  /* A slow push in while it prints, and on past 1 as the panel leaves, so the
     art and the frame move at different depths. */
  scale: calc(1.22 - var(--draw) * 0.22 + var(--out) * 0.12);
}
/* Once it has printed, a gold glint runs across the panel. */
.nx-anim .nx-panel-main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 226, 150, 0.5) 48%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 226, 150, 0.5) 52%, transparent 62%);
  translate: calc((clamp(0, var(--draw) * 2 - 0.9, 1.1) * 2.6 - 1.4) * 100%) 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Where each panel's story sits, so the solid print spreads from there. */
.nx-chapter[data-chapter="0"] .nx-panel-main { --fx: 52%; --fy: 30%; }
.nx-chapter[data-chapter="1"] .nx-panel-main { --fx: 50%; --fy: 50%; }
.nx-chapter[data-chapter="2"] .nx-panel-main { --fx: 70%; --fy: 50%; }
.nx-chapter[data-chapter="3"] .nx-panel-main { --fx: 25%; --fy: 25%; }
/* Panel IV is cropped from the left edge so the bubble is never cut, and
   the bubble is drawn empty: its words are live text laid over it. */
.nx-chapter[data-chapter="3"] .nx-panel-art { object-position: 0 50%; }
/* Panel III keeps the client at the end of the shield wall in frame. */
.nx-chapter[data-chapter="2"] .nx-panel-art { object-position: 100% 50%; }
.nx-panel-say {
  position: absolute;
  left: 3%;
  top: 0;
  width: 39.5%;
  height: 15.5%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.8rem, 0.4rem + 1.3vw, 1.6rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy-900);
  pointer-events: none;
}
.nx-anim .nx-panel-say { opacity: clamp(0, var(--draw) * 3 - 2, 1); }
.nx-panel-card {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  padding: clamp(18px, 2.4vw, 32px);
  background: var(--navy-800);
  color: var(--ivory);
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.2px, transparent 1.4px);
  background-size: 8px 8px;
}
.nx-card-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 0.9;
  color: var(--nx-gold);
}
.nx-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.8vw, 1.7rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nx-caption {
  align-self: end;
  border: 2px solid var(--nx-ink);
  background: var(--ivory);
  padding: 16px 18px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.12rem);
  line-height: 1.5;
  text-transform: none;
}
.nx-caption em {
  font-style: normal;
  color: var(--navy-800);
  background: linear-gradient(transparent 58%, rgba(185, 141, 47, 0.42) 58%);
}
.nx-chapter-flip { grid-template-columns: 1fr 1.7fr; }
.nx-chapter-flip .nx-panel-main { grid-column: 2; }
.nx-chapter-flip .nx-panel-card,
.nx-chapter-flip .nx-caption { grid-column: 1; }
.nx-chapter-flip .nx-panel-card { grid-row: 1; }
.nx-chapter-flip .nx-caption { grid-row: 2; }

/* Line art */
.nx-panel svg .ink {
  fill: none;
  stroke: var(--nx-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--draw));
}
.nx-panel svg .ink.thin { stroke-width: 1.5; }
.nx-panel svg .ink.rim { stroke-width: 4; }
.nx-panel svg .ink.lam { stroke-width: 7; stroke-linecap: square; stroke-linejoin: miter; }
.nx-panel svg .ink.dash { stroke-dasharray: 0.04 0.03; stroke-dashoffset: 0; opacity: var(--draw); }
.nx-panel svg .ink.solid { fill: var(--nx-ink); stroke-dasharray: none; opacity: var(--draw); }
.nx-panel svg .ink.bold { stroke-width: 3.6; }
.nx-panel svg .ink.cable { stroke-width: 9; }
.nx-panel svg .fill-dots { fill: url(#nxDots); opacity: calc(var(--draw) * 0.55); }
/* Shading lands after the linework, the way an inker hatches last. */
.nx-panel svg .fill-hatch { fill: url(#nxHatch); opacity: calc(clamp(0, var(--draw) * 2 - 1, 1) * 0.55); }
.nx-panel svg .fill-gold { fill: var(--nx-gold); opacity: clamp(0, var(--draw) * 2 - 0.8, 1); }
.nx-panel svg .fill-gold-dots { fill: url(#nxDotsGold); opacity: calc(var(--draw) * 0.8); }
.nx-panel svg .lbl-sm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  fill: var(--nx-ink);
  opacity: var(--draw);
}
.nx-panel svg .lbl-sm.on-body { font-size: 9.5px; letter-spacing: 0.08em; }
.nx-sfx-a b { font-size: clamp(0.62rem, 0.5rem + 0.45vw, 0.9rem); }
.nx-panel svg .stamp,
.nx-panel svg .code,
.nx-panel svg .stencil {
  font-family: var(--font-display);
  font-weight: 700;
  fill: var(--nx-ink);
  opacity: var(--draw);
}
.nx-panel svg .stamp { font-size: 15px; }
.nx-panel svg .code { font-family: "Courier New", monospace; font-size: 30px; }
.nx-panel svg .stencil { font-size: 22px; letter-spacing: 0.18em; }
.nx-panel svg .paper { fill: #FBF9F3; }
.nx-panel svg .paper.gold { fill: url(#nxDotsGold); }
.nx-panel svg .shield .paper { fill: #FBF9F3; }
.nx-panel svg .lbl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  fill: var(--nx-ink);
  opacity: var(--draw);
}
.nx-panel svg .qm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  fill: var(--nx-gold);
  opacity: var(--draw);
}
.nx-panel svg .coin-p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  fill: var(--nx-ink);
  opacity: var(--draw);
}
.nx-story-progress { display: none; }

/* Pinned version: one chapter at a time on a fixed comic page. */
.nx-anim .nx-story { height: calc(100svh * 5 + 40svh); }
.nx-anim .nx-story-head { height: auto; min-height: 40svh; display: grid; align-content: end; padding-bottom: 4svh; }
.nx-anim .nx-story-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: block;
  padding: 0;
  max-width: none;
  overflow: hidden;
}
.nx-anim .nx-chapter {
  position: absolute;
  inset: 0;
  display: block;
  visibility: hidden;
}
.nx-anim .nx-chapter.is-on { visibility: visible; }
.nx-anim .nx-chapter .nx-panel,
.nx-anim .nx-chapter .nx-caption { position: absolute; will-change: transform; }

.nx-anim .nx-panel-main {
  left: var(--nx-gutter);
  top: calc(var(--nav-h) + 3svh);
  width: 58vw;
  /* Exactly the artwork's 16:9, so nothing is cropped at any screen size;
     capped by the viewport height on very wide, short windows. */
  height: min(calc(100svh - var(--nav-h) - 13svh), calc(58vw * 9 / 16));
  aspect-ratio: auto;
  /* The panel slams down onto the page out of the camera: it starts close and
     turned, and backOut's overshoot on --in carries it a touch past flat
     before it settles. It leaves by tipping back into the page. Its ink
     shadow only lands with it. */
  --land: clamp(0, var(--in), 1);
  --side: 1;
  transform:
    perspective(1600px)
    translate3d(0, calc(var(--out) * -10svh), calc((1 - var(--in)) * 700px - var(--out) * 500px))
    rotateY(calc((1 - var(--in)) * 32deg * var(--side)))
    rotateX(calc((1 - var(--in)) * -14deg + var(--out) * 34deg))
    rotateZ(calc((1 - var(--in)) * -5deg * var(--side)));
  /* The ink shadow, then the shockwave: a gold halo and a wider ink one
     that run out from the frame on --wave and fade as they go. */
  box-shadow:
    calc(var(--land) * 8px) calc(var(--land) * 8px) 0 var(--nx-ink),
    0 0 0 calc(var(--wave, 1) * 34px) rgba(201, 162, 74, calc((1 - var(--wave, 1)) * 0.75)),
    0 0 0 calc(var(--wave, 1) * 90px) rgba(11, 23, 48, calc((1 - var(--wave, 1)) * 0.16));
  opacity: calc(clamp(0, var(--in) * 2.5, 1) - var(--out));
}
.nx-anim .nx-chapter-flip .nx-panel-main { --side: -1; }

/* Speed lines: a comic action burst behind the panel while it is in the air,
   crackling while it prints, flaring on impact and again as the print
   finishes (next.js mixes all of that into --burst).
   Two line sets at different spacings so the burst
   never looks ruled. */
.nx-anim .nx-chapter { --cx: 31%; --cy: 46%; }
.nx-anim .nx-chapter-flip { --cx: 69%; }
.nx-anim .nx-chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-conic-gradient(from calc(var(--in) * 14deg + var(--draw) * 24deg) at var(--cx) var(--cy), rgba(11, 23, 48, 0.5) 0deg 0.5deg, transparent 0.5deg 3.1deg),
    repeating-conic-gradient(from calc(var(--in) * -9deg - var(--draw) * 16deg) at var(--cx) var(--cy), rgba(185, 141, 47, 0.55) 0deg 0.9deg, transparent 0.9deg 7.3deg);
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent 22%, #000 58%);
  mask-image: radial-gradient(circle at var(--cx) var(--cy), transparent 22%, #000 58%);
  opacity: calc(var(--burst, 0) * (1 - var(--out)));
  scale: calc(1.25 - var(--hit, 0) * 0.25);
}

/* Misprint: mid-print, a cyan plate sits off register over the art and snaps
   into place as the dots merge. Desktop only, and only while printing, so
   phones never fetch it and finished panels pay nothing. */
@media (hover: hover) and (pointer: fine) {
  .nx-anim .nx-chapter.is-printing .nx-panel-main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(#00AEEF, #00AEEF), var(--art) 50% 50% / cover no-repeat;
    background-blend-mode: screen;
    mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(circle, #000 calc(var(--draw) * 70%), transparent calc(var(--draw) * 70% + 5%));
    -webkit-mask-size: var(--dot) var(--dot);
    mask-image: radial-gradient(circle, #000 calc(var(--draw) * 70%), transparent calc(var(--draw) * 70% + 5%));
    mask-size: var(--dot) var(--dot);
    translate: calc((1 - var(--draw)) * 12px) calc((1 - var(--draw)) * -5px);
    scale: calc(1.22 - var(--draw) * 0.22);
    opacity: calc(var(--draw) * (1 - var(--draw)) * 2.2);
  }
}
.nx-anim .nx-panel-card {
  right: var(--nx-gutter);
  top: calc(var(--nav-h) + 6svh);
  width: min(30vw, 420px);
  height: 26svh;
  --cin: clamp(0, calc(var(--in) * 1.6 - 0.4), 1);
  transform:
    translate3d(calc((1 - var(--cin)) * 60vw), calc(var(--out) * -30svh), 0)
    rotate(calc((1 - var(--cin)) * 6deg));
  opacity: calc(1 - var(--out));
}
.nx-anim .nx-caption {
  right: var(--nx-gutter);
  bottom: 12svh;
  width: min(32vw, 440px);
  --kin: clamp(0, calc(var(--in) * 2 - 1), 1);
  transform: translate3d(0, calc((1 - var(--kin)) * 40svh + var(--out) * -20svh), 0);
  opacity: calc(var(--kin) - var(--out));
}
.nx-anim .nx-chapter-flip .nx-panel-main { left: auto; right: var(--nx-gutter); }
.nx-anim .nx-chapter-flip .nx-panel-card,
.nx-anim .nx-chapter-flip .nx-caption { right: auto; left: var(--nx-gutter); }
.nx-anim .nx-chapter-flip .nx-panel-card {
  transform:
    translate3d(calc((1 - var(--cin)) * -60vw), calc(var(--out) * -30svh), 0)
    rotate(calc((1 - var(--cin)) * -6deg));
}
.nx-anim .nx-story-progress {
  display: block;
  position: absolute;
  left: var(--nx-gutter);
  right: var(--nx-gutter);
  bottom: 5svh;
  height: 2px;
  background: rgba(11, 23, 48, 0.12);
}
.nx-story-progress span {
  display: block;
  height: 100%;
  background: var(--nx-ink);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

/* ============================================================
   PRODUCTS: horizontal rail
   ============================================================ */
.nx-products {
  position: relative;
  background: var(--navy-900);
  color: var(--white);
}
.nx-products .nx-stage { padding: clamp(80px, 10vw, 140px) var(--nx-gutter); }
.nx-rail {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 1360px;
  margin-inline: auto;
}
.nx-rail-intro { grid-column: 1 / -1; max-width: 560px; }
.nx-rail-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem);
  line-height: 0.95;
  margin-bottom: 18px;
}
.nx-rail-intro p { color: var(--mist); margin-bottom: 10px; }
.nx-prod {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--navy-800);
  min-height: 360px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.nx-prod:hover { border-color: var(--nx-gold); background: #0A2662; }
.nx-prod-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4.5rem, 8vw, 8rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(185, 141, 47, 0.9);
  margin-bottom: auto;
}
.nx-prod-icon {
  width: 30px; height: 30px;
  fill: none;
  stroke: var(--nx-gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 24px;
}
.nx-prod h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem);
}
.nx-prod h3 a::after { content: ""; position: absolute; inset: 0; }
.nx-prod p { color: #C8D2E4; }
.nx-prod-stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nx-gold);
  padding-top: 12px;
  border-top: 1px solid var(--line-dark);
}
.nx-rail-progress { display: none; }

.nx-anim .nx-products .nx-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.nx-anim .nx-rail {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  max-width: none;
  margin: 0;
  padding: var(--nav-h) var(--nx-gutter) 0;
  align-items: stretch;
  transform: translate3d(var(--x, 0px), 0, 0);
  will-change: transform;
}
.nx-anim .nx-rail-intro {
  flex: none;
  width: min(84vw, 520px);
  align-self: center;
  padding-right: clamp(10px, 4vw, 60px);
}
.nx-anim .nx-prod {
  flex: none;
  width: clamp(280px, 30vw, 440px);
  height: min(64svh, 560px);
  min-height: 0;
}
.nx-anim .nx-rail-progress {
  display: block;
  position: absolute;
  left: var(--nx-gutter);
  right: var(--nx-gutter);
  bottom: 5svh;
  height: 2px;
  background: var(--line-dark);
}
.nx-rail-progress span {
  display: block;
  height: 100%;
  background: var(--nx-gold);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

/* ============================================================
   PROCESS: outline to filled type
   ============================================================ */
.nx-process {
  background: var(--ivory);
  padding: clamp(80px, 11vw, 160px) 0;
}
.nx-sec-head { margin-bottom: clamp(36px, 5vw, 72px); max-width: 760px; }
.nx-sec-head h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.12;
  color: var(--navy-800);
}
.nx-sec-head-row {
  display: flex;
  max-width: none;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.nx-steps { list-style: none; border-top: 1.5px solid var(--navy-800); }
.nx-step {
  display: grid;
  grid-template-columns: 56px 1fr minmax(240px, 380px);
  gap: clamp(12px, 3vw, 40px);
  align-items: center;
  padding: clamp(18px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--line);
}
.nx-step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  color: var(--nx-gold-deep);
  align-self: start;
  padding-top: 0.6em;
}
.nx-step-name {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.3rem, 8.4vw, 7.6rem);
  line-height: 0.9;
  color: var(--navy-800);
}
.nx-step-body p { color: var(--slate); margin-bottom: 8px; }
.nx-step-art {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-700);
}
.nx-anim .nx-step-name {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--navy-800);
}
.nx-anim .nx-step-name::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--navy-800);
  -webkit-text-stroke: 0;
  clip-path: inset(0 calc(100% - var(--f, 0) * 100%) 0 0);
}

/* ============================================================
   WORK: partners, active and completed project cards
   ============================================================ */
.nx-work {
  position: relative;
  background: var(--navy-800);
  color: var(--white);
  padding: clamp(80px, 11vw, 160px) 0;
}
.nx-work .nx-sec-head h2 { color: var(--white); }

/* Partners */
.nx-partners {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 34px) 0;
  margin-bottom: clamp(44px, 6vw, 80px);
  border-block: 1px solid rgba(185, 141, 47, 0.55);
}
.nx-partners-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--nx-gold);
}
.nx-partner-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px clamp(16px, 2.4vw, 32px);
}
.nx-partner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
}
.nx-partner + .nx-partner { padding-left: clamp(16px, 2.4vw, 32px); border-left: 1px solid var(--line-dark); }
.nx-partner-logo {
  display: grid;
  place-items: center;
  width: clamp(64px, 6vw, 84px);
  aspect-ratio: 1;
  padding: 9px;
  background: var(--white);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.6);
}
.nx-partner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.nx-partner-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.25rem);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ivory);
}
.nx-partner-sub { display: block; margin-top: 4px; font-size: var(--t-small); color: var(--mist); }

/* Group headings */
.nx-work-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
}
.nx-proj-grid + .nx-work-group { margin-top: clamp(56px, 7vw, 96px); }
.nx-work-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0;
  color: var(--white);
}
.nx-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--nx-gold);
  box-shadow: 0 0 0 0 rgba(185, 141, 47, 0.6);
}
.nx-anim .nx-live-dot { animation: nx-pulse 2s ease-out infinite; }
@keyframes nx-pulse {
  70% { box-shadow: 0 0 0 9px rgba(185, 141, 47, 0); }
  100% { box-shadow: 0 0 0 0 rgba(185, 141, 47, 0); }
}

/* Project cards */
.nx-proj-grid { display: grid; gap: clamp(16px, 2vw, 28px); }
.nx-proj-grid + .nx-proj-grid { margin-top: clamp(16px, 2vw, 28px); }
.nx-proj-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-proj-grid-done { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.nx-proj-grid-done > :nth-child(-n + 2) { grid-column: span 3; }
.nx-proj-grid-done > :nth-child(n + 3) { grid-column: span 2; }

.nx-proj {
  border: 1px solid var(--line-dark);
  background: rgba(4, 24, 56, 0.45);
  transition: border-color 0.35s ease, background-color 0.35s ease;
}
.nx-proj:hover { border-color: rgba(185, 141, 47, 0.8); background: var(--navy-900); }
.nx-proj > a,
.nx-proj-in { display: flex; flex-direction: column; height: 100%; color: inherit; }
.nx-proj > a:focus-visible { outline: 2px solid var(--nx-gold); outline-offset: 4px; }

.nx-proj-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy-900);
}
.nx-proj-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 1.1s var(--nx-ease);
}
.nx-proj-media > img:is([src*="-stage-"], [src*="-folio-"]) { object-position: center; }
.nx-proj:hover .nx-proj-media > img { transform: scale(1.05); }
.nx-proj-media.is-plate {
  display: grid;
  place-items: center;
  background-color: var(--navy-900);
  background-image: radial-gradient(rgba(185, 141, 47, 0.28) 1.2px, transparent 1.4px);
  background-size: 10px 10px;
}
.nx-plate-mark {
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 4 / 3;
  padding: 7%;
  background: var(--white);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7);
  transition: transform 0.6s var(--nx-ease);
}
.nx-plate-mark img { max-width: 100%; max-height: 100%; object-fit: contain; }
.nx-proj:hover .nx-plate-mark { transform: translateY(-6px) rotate(-1.5deg); }

.nx-proj-status {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--navy-900);
  border: 1px solid rgba(185, 141, 47, 0.6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nx-gold);
}
.nx-proj-status > span { width: 6px; height: 6px; border-radius: 50%; background: var(--nx-gold); }
.nx-anim .nx-proj-status.is-active > span { animation: nx-pulse 2s ease-out infinite; }

.nx-proj-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 48px clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 28px);
}
.nx-proj-logo {
  position: absolute;
  top: -34px;
  left: clamp(18px, 2vw, 26px);
  display: grid;
  place-items: center;
  min-width: 68px;
  max-width: 172px;
  height: 68px;
  padding: 9px 12px;
  background: var(--white);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.65);
  transition: transform 0.5s var(--nx-ease);
}
/* Height-led so wide wordmarks (Pamir, Corona) widen the plate instead of shrinking. */
.nx-proj-logo img { height: 50px; width: auto; max-width: 148px; object-fit: contain; }
.nx-proj-feature .nx-proj-logo img { height: 66px; }
.nx-proj:hover .nx-proj-logo { transform: translateY(-4px); }
/* Logo-led cards already show the mark large; no second, smaller copy. */
.nx-proj-media.is-plate + .nx-proj-body { padding-top: clamp(20px, 2.2vw, 28px); }
.nx-proj-media.is-plate + .nx-proj-body .nx-proj-logo { display: none; }
.nx-proj-meta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nx-gold);
}
.nx-proj-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 0.95rem + 0.8vw, 1.7rem);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--ivory);
}
.nx-proj-desc { color: #C8D2E4; font-size: var(--t-body); line-height: 1.55; }
.nx-proj-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--white);
}
.nx-proj-cta svg { width: 16px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--nx-ease); }
.nx-proj:hover .nx-proj-cta { color: var(--nx-gold); }
.nx-proj:hover .nx-proj-cta svg { transform: translateX(4px); }

/* Featured card: picture left, story and numbers right */
.nx-proj-feature > a { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.nx-proj-feature .nx-proj-media { aspect-ratio: auto; min-height: 100%; }
.nx-proj-feature .nx-proj-body { justify-content: center; padding: clamp(24px, 3vw, 44px); gap: 12px; }
.nx-proj-feature .nx-proj-logo { position: static; align-self: flex-start; height: 84px; margin-bottom: 6px; }
.nx-proj-feature .nx-proj-name { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); }
.nx-proj-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 4px clamp(18px, 2.4vw, 32px);
  margin: 8px 0 4px;
  padding: 14px 0;
  border-block: 1px solid var(--line-dark);
}
.nx-proj-stats div { display: flex; flex-direction: column-reverse; }
.nx-proj-stats dd {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  line-height: 1;
  color: var(--nx-gold);
}
.nx-proj-stats dt { margin-top: 6px; font-size: 0.75rem; color: var(--mist); }

/* Reveal: the picture wipes open and settles as the card arrives. */
.nx-anim .nx-proj[data-nx-rise] .nx-proj-media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.25s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: calc(var(--ri, 0) * 90ms + 120ms);
}
.nx-anim .nx-proj[data-nx-rise] .nx-proj-media > img { scale: 1.18; transition: scale 1.8s var(--nx-ease), transform 1.1s var(--nx-ease); }
.nx-anim .nx-proj[data-nx-rise].is-in .nx-proj-media { clip-path: inset(0); }
.nx-anim .nx-proj[data-nx-rise].is-in .nx-proj-media > img { scale: 1; }

/* ---------- Work: the motion layer ----------
   next.js writes three numbers per card while it is near the viewport:
   --e (0 to 1 as the card climbs into view), --v (0 to 1 across its whole
   pass, for parallax) and, under a fine pointer, --mx/--my for the tilt.
   The section itself gets --wp for the ghost word. */
.nx-work { position: relative; overflow: clip; }
.nx-work > .nx-wrap { position: relative; z-index: 1; }
.nx-work-title { color: var(--white); font-size: clamp(2.3rem, 1rem + 5.4vw, 6.2rem); line-height: 0.98; }

.nx-work-ghost {
  position: absolute;
  top: clamp(40px, 8vw, 120px);
  left: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6rem, 22vw, 22rem);
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(185, 141, 47, 0.16);
  pointer-events: none;
  user-select: none;
}
.nx-anim .nx-work-ghost { transform: translate3d(calc(var(--wp, 0) * -55%), 0, 0); will-change: transform; }

/* Partners: rules draw out from the left, plates flip up one by one. */
.nx-anim .nx-partners[data-nx-rise] { border-color: transparent; position: relative; }
.nx-anim .nx-partners::before,
.nx-anim .nx-partners::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(185, 141, 47, 0.55);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--nx-ease);
}
.nx-anim .nx-partners::before { top: 0; }
.nx-anim .nx-partners::after { bottom: 0; transition-delay: 0.25s; }
.nx-anim .nx-partners.is-in::before,
.nx-anim .nx-partners.is-in::after { transform: none; }
.nx-anim .nx-partner-logo {
  transform: perspective(500px) rotateY(-100deg) scale(0.7);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
  transition-delay: calc(var(--ri, 0) * 140ms + 250ms);
}
.nx-anim .nx-partner.is-in .nx-partner-logo { transform: none; opacity: 1; animation: nx-bob 5s ease-in-out calc(var(--ri, 0) * -1.6s) infinite; }
@keyframes nx-bob { 50% { translate: 0 -5px; } }
.nx-anim .nx-partner:hover .nx-partner-logo { transform: rotate(-4deg) scale(1.08); transition-delay: 0s; }

/* Group headings: the count ticks up, a gold rule races out to the edge. */
.nx-work-group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(185, 141, 47, 0.7), rgba(185, 141, 47, 0));
}
.nx-anim .nx-work-group::after { transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--nx-ease) 0.2s; }
.nx-anim .nx-work-group.is-in::after { transform: none; }

/* Verticals strip between the two groups. */
.nx-work-strip {
  margin: clamp(56px, 7vw, 96px) calc(50% - 50vw) clamp(40px, 5vw, 64px);
  padding: 18px 0;
  overflow: hidden;
  border-block: 1px solid var(--line-dark);
  background: rgba(4, 24, 56, 0.6);
}
.nx-work-strip-row {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 0.7rem + 1.6vw, 2.2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ivory);
}
.nx-work-strip-row i { font-style: normal; color: var(--nx-gold); font-size: 0.5em; vertical-align: middle; padding: 0 0.5em; }
.nx-work-strip + .nx-work-group { margin-top: 0; }

/* Cards: scroll-linked 3D climb, parallax inside the frame, tilt and glare. */
.nx-anim .nx-proj-grid { perspective: 1600px; }
.nx-anim .nx-proj {
  transform-origin: 50% 100%;
  rotate: x calc((1 - var(--e, 1)) * 24deg);
  translate: calc((1 - var(--e, 1)) * var(--side, 0) * 90px) calc((1 - var(--e, 1)) * 60px);
}
.nx-anim .nx-proj-grid-3 > :nth-child(1),
.nx-anim .nx-proj-grid-done > :nth-child(odd) { --side: -1; }
.nx-anim .nx-proj-grid-3 > :nth-child(3),
.nx-anim .nx-proj-grid-done > :nth-child(even) { --side: 1; }
.nx-anim .nx-proj-media > img {
  position: absolute;
  inset: -9% 0 auto;
  height: 118%;
  translate: 0 calc((0.5 - var(--v, 0.5)) * 14%);
}
/* Designed covers carry text to their edges, so they are never cropped or
   drifted: they sit exactly in the frame. The feature card is taller than
   its picture, so the picture is letterboxed on the stage's own colours. */
.nx-anim .nx-proj-media > img:is([src*="-folio-"], [src*="-stage-"]) { inset: 0; height: 100%; translate: none; }
.nx-proj-feature .nx-proj-media { background: linear-gradient(180deg, rgb(8, 55, 39), rgb(3, 28, 31) 50%, rgb(2, 18, 32)); }
.nx-proj-feature .nx-proj-media > img { object-fit: contain; }

.nx-cursor-on .nx-proj > a,
.nx-cursor-on .nx-proj-in {
  position: relative;
  transform: perspective(1100px) rotateX(calc((0.5 - var(--my, 0.5)) * 7deg)) rotateY(calc((var(--mx, 0.5) - 0.5) * 9deg));
  transition: transform 0.6s var(--nx-ease);
}
.nx-cursor-on .nx-proj > a::after,
.nx-cursor-on .nx-proj-in::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(420px circle at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), rgba(214, 176, 92, 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.nx-cursor-on .nx-proj:hover > a::after,
.nx-cursor-on .nx-proj:hover .nx-proj-in::after { opacity: 1; }

/* Inside each card: the badge and logo pop after the picture opens, then
   the words climb in. */
.nx-anim .nx-proj[data-nx-rise] .nx-proj-status {
  scale: 0;
  transition: scale 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--ri, 0) * 90ms + 900ms);
}
.nx-anim .nx-proj[data-nx-rise] .nx-proj-logo {
  scale: 0.4;
  rotate: -12deg;
  opacity: 0;
  transition: scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), rotate 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease, transform 0.4s var(--nx-ease);
  transition-delay: calc(var(--ri, 0) * 90ms + 1000ms);
}
.nx-anim .nx-proj[data-nx-rise] :is(.nx-proj-meta, .nx-proj-name, .nx-proj-desc, .nx-proj-stats, .nx-proj-cta) {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 0.7s ease, translate 0.9s var(--nx-ease), color 0.3s ease;
}
.nx-anim .nx-proj[data-nx-rise] .nx-proj-meta { transition-delay: calc(var(--ri, 0) * 90ms + 650ms); }
.nx-anim .nx-proj[data-nx-rise] .nx-proj-name { transition-delay: calc(var(--ri, 0) * 90ms + 740ms); }
.nx-anim .nx-proj[data-nx-rise] .nx-proj-desc { transition-delay: calc(var(--ri, 0) * 90ms + 830ms); }
.nx-anim .nx-proj[data-nx-rise] .nx-proj-stats { transition-delay: calc(var(--ri, 0) * 90ms + 920ms); }
.nx-anim .nx-proj[data-nx-rise] .nx-proj-cta { transition-delay: calc(var(--ri, 0) * 90ms + 1010ms); }
.nx-anim .nx-proj[data-nx-rise].is-in .nx-proj-status { scale: 1; }
.nx-anim .nx-proj[data-nx-rise].is-in .nx-proj-logo { scale: 1; rotate: 0deg; opacity: 1; }
.nx-anim .nx-proj[data-nx-rise].is-in :is(.nx-proj-meta, .nx-proj-name, .nx-proj-desc, .nx-proj-stats, .nx-proj-cta) { opacity: 1; translate: none; }

/* ============================================================
   CTA
   ============================================================ */
.nx-cta {
  background: var(--ivory);
  padding: clamp(90px, 13vw, 180px) 0 clamp(80px, 10vw, 140px);
}
.nx-cta-title { font-size: clamp(2.2rem, 10vw, 9.6rem); }
.nx-cta-title .nx-line:nth-child(2) { --d: 90ms; }
.nx-cta-title .nx-line:nth-child(3) { --d: 180ms; }
.nx-swash {
  width: min(70vw, 760px);
  height: clamp(16px, 2.4vw, 30px);
  margin: 6px 0 0 clamp(0px, 6vw, 80px);
  overflow: visible;
}
.nx-swash path {
  fill: none;
  stroke: var(--nx-gold);
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.nx-anim .nx-swash path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--nx-ease) 0.6s;
}
.nx-anim .nx-swash.is-in path { stroke-dashoffset: 0; }
.nx-cta-foot {
  display: grid;
  grid-template-columns: minmax(0, 560px) auto;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  margin-top: clamp(36px, 5vw, 64px);
}
.nx-cta-foot p { color: var(--slate); font-size: var(--t-lede); }
.nx-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

/* ============================================================
   PAGE LAYERS: grain, cursor, exit wipe
   ============================================================ */
.nx-grain {
  position: fixed;
  inset: -50%;
  z-index: 99;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.nx-anim .nx-grain { animation: nx-grain 0.8s steps(5) infinite; }
/* Touch screens skip the grain: a fixed noise layer four times the viewport,
   repainted continuously, costs tens of megabytes at phone pixel densities. */
@media (hover: none), (pointer: coarse) { .nx-grain { display: none; } }
@keyframes nx-grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); }
  80% { transform: translate(7%, 2%); }
  100% { transform: translate(0, 0); }
}

.nx-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .nx-anim .nx-cursor {
    display: block;
    position: fixed;
    left: 0; top: 0;
    z-index: 400;
    pointer-events: none;
    --c: var(--ivory);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .nx-anim .nx-cursor.is-on { opacity: 1; }
  .nx-anim .nx-cursor[data-tone="light"],
  .nx-anim .nx-cursor[data-tone="gold"] { --c: var(--navy-900); }
  .nx-cursor-on body:has(.nx-page),
  .nx-cursor-on body:has(.nx-page) a,
  .nx-cursor-on body:has(.nx-page) button { cursor: none; }
}
.nx-cursor-dot,
.nx-cursor-ring {
  position: absolute;
  left: 0; top: 0;
  border-radius: 50%;
}
.nx-cursor-dot {
  width: 6px; height: 6px;
  background: var(--c);
  transform: translate3d(var(--dx, -99px), var(--dy, -99px), 0) translate(-50%, -50%);
}
.nx-cursor-ring {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1.5px solid var(--c);
  transform: translate3d(var(--rx, -99px), var(--ry, -99px), 0) translate(-50%, -50%);
  transition: width 0.4s var(--nx-ease), height 0.4s var(--nx-ease), background-color 0.3s ease, border-color 0.3s ease;
}
.nx-cursor.is-link .nx-cursor-ring { width: 62px; height: 62px; background: rgba(185, 141, 47, 0.18); }
.nx-cursor.is-label .nx-cursor-ring { width: 86px; height: 86px; background: var(--nx-gold); border-color: var(--nx-gold); }
.nx-cursor.is-label .nx-cursor-dot { opacity: 0; }
.nx-cursor.is-down .nx-cursor-ring { width: 28px; height: 28px; }
.nx-cursor-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-900);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nx-cursor.is-label .nx-cursor-label { opacity: 1; transition-delay: 0.12s; }

.nx-wipe {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  background: var(--navy-900);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.nx-wipe span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 14vw, 9rem);
  color: var(--nx-gold);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease 0.3s, transform 0.5s var(--nx-ease) 0.3s;
}
.nx-leaving .nx-wipe { transform: scaleY(1); pointer-events: auto; }
.nx-leaving .nx-wipe span { opacity: 1; transform: none; }

/* ---------- Hero: dust and tilt ---------- */
.nx-dust {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.nx-anim .nx-hero-mega {
  transform: perspective(1000px) rotateX(calc(var(--ty, 0) * -7deg)) rotateY(calc(var(--tx, 0) * 9deg));
}

/* ---------- Scroll velocity skew ---------- */
.nx-anim .nx-step-name,
.nx-anim .nx-story-head .nx-mega,
.nx-anim .nx-cta-title,
.nx-anim .nx-nums-title,
.nx-anim .nx-outro-word { transform: skewY(var(--skew, 0deg)); }

/* ---------- Comic sound effects ---------- */
.nx-sfx {
  position: absolute;
  z-index: 2;
  width: clamp(76px, 9vw, 128px);
  aspect-ratio: 1;
  filter: drop-shadow(4px 4px 0 var(--nx-ink));
  /* --pop comes from next.js with a back-ease, so the burst overshoots and
     settles like a stamp. Static pages leave it unset: fully shown. */
  transform: rotate(calc(var(--rot-s, -12deg) * var(--pop, 1))) scale(var(--pop, 1));
  pointer-events: none;
}
.nx-sfx b {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--nx-gold);
  clip-path: polygon(50.0% 0.0%, 58.0% 14.9%, 71.7% 5.0%, 72.4% 21.9%, 89.1% 18.8%, 82.4% 34.4%, 98.7% 38.9%, 86.0% 50.0%, 98.7% 61.1%, 82.4% 65.6%, 89.1% 81.2%, 72.4% 78.1%, 71.7% 95.0%, 58.0% 85.1%, 50.0% 100.0%, 42.0% 85.1%, 28.3% 95.0%, 27.6% 78.1%, 10.9% 81.2%, 17.6% 65.6%, 1.3% 61.1%, 14.0% 50.0%, 1.3% 38.9%, 17.6% 34.4%, 10.9% 18.8%, 27.6% 21.9%, 28.3% 5.0%, 42.0% 14.9%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.78rem, 0.6rem + 0.6vw, 1.15rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy-900);
}
/* Bottom-left is the one empty corner of the sketched panel I. */
.nx-sfx-a { bottom: 4%; left: 3%; --rot-s: -10deg; }
.nx-sfx-b { bottom: 3%; right: 3%; --rot-s: 12deg; }
.nx-sfx-c { top: 5%; left: 4%; --rot-s: -14deg; }
.nx-sfx-d { bottom: 4%; left: 3%; --rot-s: 9deg; }

/* ---------- Story: plain-language labels ---------- */
.nx-story-lede {
  max-width: 52ch;
  margin: clamp(18px, 2.4vw, 28px) auto 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--t-lede);
  color: var(--slate);
}
.nx-card-step {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 6px;
}

/* ---------- Rise-in reveals ----------
   next.js tags elements with data-nx-rise and a stagger index; the IO adds
   .is-in. Without .nx-anim none of this applies. */
.nx-anim [data-nx-rise] {
  opacity: 0;
  transform: translate3d(0, 46px, 0);
  transition: opacity 0.9s ease, transform 1.2s var(--nx-ease);
  transition-delay: calc(var(--ri, 0) * 90ms);
}
.nx-anim [data-nx-rise].is-in { opacity: 1; transform: none; }

/* ============================================================
   NUMBERS: flat gold block
   ============================================================ */
.nx-nums {
  background: var(--nx-gold);
  color: var(--navy-900);
  padding: clamp(80px, 11vw, 150px) 0;
}
.nx-nums-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 8vw, 7.4rem);
  line-height: 0.9;
  margin-bottom: clamp(36px, 5vw, 64px);
  color: var(--navy-900);
}
.nx-nums-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--navy-900);
}
.nx-num {
  display: grid;
  align-content: start;
  padding: clamp(20px, 2.6vw, 34px) clamp(14px, 2vw, 28px) 0;
  border-left: 1px solid rgba(4, 24, 56, 0.35);
}
.nx-num:first-child { border-left: 0; }
.nx-num dd:not(.nx-num-note) {
  order: -1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 8vw, 8rem);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.nx-num dt {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(4, 24, 56, 0.35);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.85rem, 0.7rem + 0.45vw, 1.1rem);
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}
.nx-num-note { margin-top: 6px; font-size: var(--t-small); line-height: 1.4; color: rgba(4, 24, 56, 0.78); }
.nx-anim .nx-num dt { border-top-color: transparent; position: relative; }
.nx-anim .nx-num dt::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--navy-900);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--nx-ease);
  transition-delay: calc(var(--ri, 0) * 120ms + 300ms);
}
.nx-anim .nx-num.is-in dt::before { transform: none; }

/* Journey clock: incorporation to now, ticking every second. */
.nx-journey {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(18px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 34px);
  background: var(--navy-900);
  color: var(--ivory);
  box-shadow: 8px 8px 0 rgba(4, 24, 56, 0.35);
}
.nx-journey-label,
.nx-journey-date {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.nx-journey-label { color: var(--nx-gold); }
.nx-journey-date { margin-left: auto; color: var(--mist); }
.nx-journey-clock { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px clamp(10px, 1.6vw, 22px); }
.nx-j-unit { display: inline-flex; flex-direction: column; align-items: center; min-width: 3.2ch; }
.nx-j-unit b {
  display: block;
  padding: 4px 10px;
  border: 1px solid rgba(185, 141, 47, 0.55);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3.2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.nx-j-days b { color: var(--nx-gold); border-color: var(--nx-gold); }
.nx-j-unit small { margin-top: 6px; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); }
.nx-j-ago { padding-bottom: 26px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mist); }
.nx-anim .nx-j-unit b.is-tick { animation: nx-tick 0.45s var(--nx-ease); }
@keyframes nx-tick {
  from { transform: translateY(-35%); opacity: 0.15; }
  to { transform: none; opacity: 1; }
}
@media (max-width: 560px) {
  .nx-journey-date { margin-left: 0; }
  /* Four even columns on a phone, with "ago" as its own line under them
     rather than wrapping on its own wherever the row breaks. */
  .nx-journey-clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .nx-j-unit { min-width: 0; }
  .nx-j-unit b { width: 100%; padding: 6px 0; text-align: center; font-size: 1.75rem; }
  .nx-j-ago { grid-column: 1 / -1; padding: 2px 0 0; font-size: 0.85rem; }
}

/* ============================================================
   OUTRO: wordmark
   ============================================================ */
.nx-outro {
  background: var(--navy-900);
  color: var(--ivory);
  padding: clamp(64px, 9vw, 130px) var(--nx-gutter) clamp(28px, 4vw, 56px);
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line-dark);
}
.nx-outro-word {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17vw;
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--ivory);
}
.nx-anim .nx-outro-word .nx-ch {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--nx-gold);
  transition: transform 1.2s var(--nx-ease), color 0.9s ease;
  transition-delay: calc(var(--i) * 70ms), calc(0.7s + var(--i) * 90ms);
}
.nx-anim .nx-outro-word .is-in .nx-ch { color: var(--ivory); }
.nx-outro-tag {
  margin-top: clamp(18px, 2.4vw, 32px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.66rem, 0.6rem + 0.3vw, 0.85rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--mist);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .nx-nums-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .nx-num:nth-child(3) { border-left: 0; }
  .nx-num:nth-child(3) { border-left: 0; padding-left: 0; }
  .nx-num:nth-child(n + 3) { border-top: 1px solid rgba(4, 24, 56, 0.35); margin-top: 22px; }
  .nx-sfx { width: 58px; }
}
@media (max-width: 1100px) {
  body:has(.nx-page) .site-nav .nav-links { display: none; }
}

@media (max-width: 860px) {
  .nx-hero-foot { flex-direction: column; align-items: flex-start; }
  .nx-hero-foot h1 { max-width: none; }

  .nx-anim .nx-caps-words { top: calc(var(--nav-h) + 1svh); }
  .nx-anim .nx-coin-wrap { top: 36%; width: clamp(160px, 50vw, 300px); }
  .nx-anim .nx-cap {
    left: var(--nx-gutter);
    right: var(--nx-gutter);
    width: auto;
    bottom: calc(clamp(18px, 4svh, 36px) + 64px);
  }
  .nx-anim .nx-cap .nx-cap-list { display: none; }
  .nx-cap .nx-kicker { margin-bottom: 6px; }
  .nx-anim .nx-cap h2 { font-size: 1.4rem; margin-bottom: 6px; }
  .nx-anim .nx-cap p { font-size: 0.92rem; line-height: 1.5; }

  .nx-chapter,
  .nx-chapter-flip { grid-template-columns: 1fr; }
  .nx-chapter .nx-panel-main,
  .nx-chapter-flip .nx-panel-main,
  .nx-chapter-flip .nx-panel-card,
  .nx-chapter-flip .nx-caption { grid-column: 1; grid-row: auto; }

  /* Panel height follows the artwork's 16:9, so nothing is cropped. */
  /* --sy drops the card, panel and caption together so the group sits in the
     middle of the screen instead of leaving the bottom third empty. 300px is
     the card row, the caption and the gaps around the panel. */
  .nx-story-stage {
    --ph: min(40svh, calc((100vw - 2 * var(--nx-gutter)) * 0.5625));
    --sy: max(0px, calc((100svh - var(--nav-h) - var(--ph) - 300px) / 2));
  }
  .nx-anim .nx-chapter,
  .nx-anim .nx-chapter-flip { --cx: 50%; --cy: calc(var(--nav-h) + 76px + var(--sy) + var(--ph) / 2); }
  .nx-anim .nx-panel-main,
  .nx-anim .nx-chapter-flip .nx-panel-main {
    left: var(--nx-gutter);
    right: var(--nx-gutter);
    width: auto;
    top: calc(var(--nav-h) + 76px + var(--sy));
    height: var(--ph);
  }
  .nx-anim .nx-panel-card,
  .nx-anim .nx-chapter-flip .nx-panel-card {
    left: auto;
    right: calc(var(--nx-gutter) - 4px);
    top: calc(var(--nav-h) + 1svh + var(--sy));
    width: auto;
    height: auto;
    padding: 10px 14px;
    grid-auto-flow: column;
    align-items: baseline;
    gap: 10px;
    box-shadow: 5px 5px 0 var(--nx-ink);
  }
  .nx-anim .nx-card-num { font-size: 1.8rem; }
  .nx-anim .nx-card-title { font-size: 0.85rem; }
  .nx-anim .nx-card-step { display: none; }
  .nx-anim .nx-panel-card,
  .nx-anim .nx-chapter-flip .nx-panel-card { left: calc(var(--nx-gutter) + 24px); }
  .nx-anim .nx-caption,
  .nx-anim .nx-chapter-flip .nx-caption {
    left: var(--nx-gutter);
    right: var(--nx-gutter);
    width: auto;
    top: calc(var(--nav-h) + 76px + var(--sy) + var(--ph) + 28px);
    bottom: auto;
  }

  .nx-step { grid-template-columns: 1fr; gap: 10px; }
  .nx-step-num { padding-top: 0; }

  .nx-partner-list,
  .nx-proj-grid-3,
  .nx-proj-grid-done { grid-template-columns: 1fr; }
  .nx-proj-grid-done > :nth-child(n) { grid-column: auto; }
  .nx-partner + .nx-partner { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--line-dark); }
  .nx-proj-feature > a { grid-template-columns: 1fr; }
  .nx-proj-feature .nx-proj-media { aspect-ratio: 16 / 10; }

  .nx-cta-foot { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .nx-hero-cta { width: 100%; }
  .nx-hero-cta .nx-btn { flex: 1 1 auto; }
  /* At phone width the bursts crowd the labels; the drawings carry it alone. */
  .nx-sfx { display: none; }
}

/* Short landscape screens: the pinned stages need height to breathe. */
@media (max-height: 520px) and (orientation: landscape) {
  .nx-anim .nx-caps-words { font-size: 22svh; }
  .nx-anim .nx-cap .nx-cap-list { display: none; }
}

/* Reduced motion never gets .nx-anim, so the static base above already
   applies. This block only stops the few things that animate without it. */
@media (prefers-reduced-motion: reduce) {
  .nx-loader { display: none !important; }
  .nx-rosette { animation: none !important; }
  .nx-link, .nx-link::after, .nx-btn, .nx-proj-media > img, .nx-plate-mark, .nx-proj-logo { transition: none !important; }
  .nx-live-dot, .nx-proj-status > span { animation: none !important; }
}


/* ============================================================
   INNER PAGES
   Every page now loads this file. The homepage is built from nx-
   components; the inner pages keep their own markup and copy, and this
   block reskins it into the same system: navy hero with the rosette and
   dust, Cinzel kickers, paper sections, and cards drawn as hard-shadow
   panels like the homepage story. Static first; .nx-anim only adds motion.
   ============================================================ */

/* ---------- Page hero ---------- */
.nx-phero {
  min-height: clamp(560px, 88svh, 920px);
  justify-content: flex-end;
  padding-bottom: clamp(64px, 11vh, 120px);
}
.nx-phero .nx-rosette { left: 76%; top: 42%; width: min(120vw, 1000px); }
.nx-phero .nx-hero-atmos {
  background:
    radial-gradient(55% 60% at 76% 40%, rgba(22, 48, 124, 0.8), transparent 70%),
    radial-gradient(35% 40% at 76% 42%, rgba(185, 141, 47, 0.14), transparent 70%);
}
.nx-phero-in { position: relative; z-index: 1; padding-inline: 0; }
.nx-phero-crumb { margin-bottom: clamp(20px, 3vh, 34px); }
.nx-phero-title {
  max-width: 17ch;
  margin: 4px 0 clamp(20px, 3vh, 30px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 0.9rem + 5.4vw, 6.4rem);
  line-height: 0.96;
  text-transform: uppercase;
  color: var(--ivory);
}
.nx-phero-lede {
  max-width: 62ch;
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
  line-height: 1.62;
  color: #D8E0EE;
}
.nx-phero .status-flag { margin-bottom: 14px; }

/* Word-split headings: words never break, characters rise inside them. */
.nx-word { display: inline-block; white-space: nowrap; }
.nx-anim .nx-word { overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.nx-anim .nx-words .nx-ch { transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 16ms); }
.nx-anim .nx-phero-crumb,
.nx-anim .nx-phero .nx-kicker,
.nx-anim .nx-phero .status-flag,
.nx-anim .nx-phero-lede {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s ease 0.55s, transform 1s var(--nx-ease) 0.55s;
}
.nx-anim .nx-phero-lede { transition-delay: 0.85s; }
.nx-anim.nx-ready .nx-phero-crumb,
.nx-anim.nx-ready .nx-phero .nx-kicker,
.nx-anim.nx-ready .nx-phero .status-flag,
.nx-anim.nx-ready .nx-phero-lede { opacity: 1; transform: none; }
/* Scrolling out, the copy lifts away and fades while the rosette swells. */
.nx-anim .nx-phero-in { translate: 0 calc(var(--p, 0) * -14vh); opacity: calc(1 - var(--p, 0) * 1.3); }

/* ---------- Sections ---------- */
.nx-page .container { max-width: 1360px; padding-inline: var(--nx-gutter); }
.nx-page .section { padding: clamp(80px, 11vw, 150px) 0; background: var(--ivory); }
.nx-page .section.alt { background: var(--nx-paper); border-block: 0; box-shadow: none; }
.nx-page .amb::before { display: none; }
.nx-page .section-head { max-width: 920px; margin-bottom: clamp(40px, 5vw, 72px); }
.nx-page .section-head h2,
.nx-page .work-note h2,
.nx-page .why-copy h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 1.1rem + 3.2vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--navy-800);
}
.nx-page .section-head .lede { font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem); max-width: 62ch; }
.nx-page .kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  color: var(--navy-700);
}
.nx-page .kicker::before { width: 34px; height: 2px; opacity: 1; }

/* ---------- Cards: hard-shadow panels ---------- */
.nx-page .nx-card {
  position: relative;
  background: var(--white);
  border: 1.5px solid var(--navy-900);
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--navy-900);
  overflow: visible;
  transition: box-shadow 0.4s var(--nx-ease), border-color 0.3s ease, background-color 0.3s ease;
}
.nx-page .nx-card:hover { transform: none; box-shadow: 12px 12px 0 var(--nx-gold); }
.nx-page .nx-card::before { display: none; }
.nx-page .nx-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(360px circle at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), rgba(185, 141, 47, 0.12), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.nx-page .nx-card:hover::after { opacity: 1; }
.nx-page :is(.svc-grid, .belief-grid, .combo-grid, .depth-grid, .cap-split) { gap: clamp(22px, 2.6vw, 36px); perspective: 1600px; }
.nx-page .contact-side { perspective: 1600px; }
.nx-anim .nx-card {
  transform-origin: 50% 100%;
  rotate: x calc((1 - var(--e, 1)) * 20deg);
  translate: 0 calc((1 - var(--e, 1)) * 50px);
}
.nx-page .svc-num,
.nx-page .cap-num,
.nx-page .belief-num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--nx-gold);
}
.nx-page .svc h3,
.nx-page .cap-card h3,
.nx-page .belief h3,
.nx-page .combo h3 { font-family: var(--font-head); font-weight: 700; color: var(--navy-800); }

/* Lists: gold squares instead of dots. */
.nx-page .cap-list li::before,
.nx-page .checklist li::before {
  width: 7px;
  height: 7px;
  border-radius: 0;
  background: var(--nx-gold);
  transform: rotate(45deg);
}

/* Expanders read like the homepage links. */
.nx-page .cap-more { border-top: 1.5px solid var(--navy-900); }
.nx-page .cap-more > summary {
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.nx-page .cap-more[open] > summary { color: var(--nx-gold-deep); }
.nx-page .cap-more-body h4 { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-700); }

/* ---------- Tables ---------- */
.nx-page .matrix {
  border: 1.5px solid var(--navy-900);
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--navy-900);
  background: var(--white);
}
.nx-page .matrix-head { background: var(--navy-900); color: var(--ivory); }
.nx-page .matrix-head span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nx-page .matrix-head .matrix-us { color: var(--nx-gold); }
.nx-page .matrix-row { border-top: 1px solid rgba(4, 24, 56, 0.16); transition: background-color 0.25s ease; }
.nx-page .matrix-row:nth-child(odd) { background: var(--white); }
.nx-page .matrix-row:nth-child(even) { background: #FBF9F3; }
.nx-page .matrix-row:hover { background: #F6EFDD; }
.nx-page .matrix-topic { font-family: var(--font-head); font-weight: 700; color: var(--navy-800); }

/* ---------- Buttons and links ---------- */
.nx-page .btn {
  min-height: 48px;
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 700;
  border-width: 1.5px;
}
.nx-page .btn-primary { background: var(--navy-800); }
.nx-page .btn-primary:hover { background: var(--navy-900); transform: none; box-shadow: 0 0 0 4px rgba(185, 141, 47, 0.35); }
.nx-page .link-arrow,
.nx-page .link-sm { font-family: var(--font-head); font-weight: 700; color: var(--navy-800); }

/* ---------- Case studies ---------- */
.nx-page .glance { border: 1.5px solid var(--navy-900); border-radius: 0; box-shadow: 8px 8px 0 var(--navy-900); background: var(--navy-900); }
.nx-page .glance dt { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.18em; color: var(--nx-gold-deep); }
.nx-page .case-visual { border-radius: 0; box-shadow: 10px 10px 0 var(--navy-900); }
.nx-page .work-stats strong,
.nx-page .work-stats-lg strong { font-family: var(--font-display); font-weight: 700; color: var(--navy-800); }

/* ---------- Contact ---------- */
.nx-page .field input,
.nx-page .field select,
.nx-page .field textarea {
  min-height: 48px;
  background: var(--white);
  border: 1.5px solid var(--navy-900);
  border-radius: 0;
}
.nx-page .field input:focus,
.nx-page .field select:focus,
.nx-page .field textarea:focus {
  border-color: var(--navy-900);
  box-shadow: 4px 4px 0 var(--nx-gold);
}
.nx-page .field label { font-family: var(--font-head); font-weight: 700; color: var(--navy-800); }
.nx-page .side-card-quiet { background: var(--nx-paper); }

/* ---------- Prose ---------- */
.nx-page .prose h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); }
.nx-page .prose a { color: var(--navy-800); text-decoration: underline; text-decoration-color: var(--nx-gold); text-underline-offset: 3px; }

/* Notes and asides get the panel treatment without the motion. */
.nx-page :is(.work-note, .partnership-note, .result-panel, .quote-panel) {
  background: var(--white);
  border: 1.5px solid var(--navy-900);
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--navy-900);
}

/* ---------- Work page: the showcase sits on its own navy section ---------- */
.nx-work-page { padding-top: clamp(72px, 9vw, 120px); }

@media (prefers-reduced-motion: reduce) {
  .nx-page .nx-card, .nx-page .nx-card::after, .nx-page .matrix-row { transition: none; }
}


/* ============================================================
   ABOUT: people, journey, what we build
   ============================================================ */
.nx-team { background: var(--nx-paper); padding: clamp(80px, 11vw, 150px) 0; }
.nx-team .nx-sec-head h2,
.nx-about-journey .nx-sec-head h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 1.1rem + 3.2vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--navy-800);
  max-width: 18ch;
}
.nx-team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  max-width: 1120px;
  perspective: 1600px;
}
.nx-person {
  position: relative;
  background: var(--white);
  border: 1.5px solid var(--navy-900);
  box-shadow: 10px 10px 0 var(--navy-900);
  transition: box-shadow 0.45s var(--nx-ease);
}
.nx-person:nth-child(2) { margin-top: clamp(0px, 6vw, 90px); }
.nx-person:hover { box-shadow: 14px 14px 0 var(--nx-gold); }
.nx-person-photo { position: relative; aspect-ratio: 1; overflow: hidden; border-bottom: 1.5px solid var(--navy-900); background: var(--navy-900); }
.nx-person-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--nx-ease), filter 0.6s ease; }
.nx-person:hover .nx-person-photo img { transform: scale(1.04); }
.nx-person-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 32%;
  background: linear-gradient(to top, rgba(4, 24, 56, 0.45), transparent);
  pointer-events: none;
}
.nx-person-body { display: grid; gap: 6px; padding: clamp(20px, 2.4vw, 30px); }
.nx-person-role {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nx-gold-deep);
}
.nx-person-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--navy-800);
}
.nx-person-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  min-height: 44px;
  margin-top: 4px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy-800);
}
.nx-person-link svg {
  box-sizing: content-box;
  padding: 7px;
  border: 1.5px solid var(--navy-900);
  border-radius: 50%;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.nx-person-link:hover svg { background: var(--navy-900); color: var(--white); }
.nx-person-link:focus-visible { outline: 2px solid var(--nx-gold); outline-offset: 3px; }

/* Photos open like the project pictures: a wipe from the top, then settle. */
.nx-anim .nx-person[data-nx-rise] .nx-person-photo { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s cubic-bezier(0.76, 0, 0.24, 1) 0.15s; }
.nx-anim .nx-person[data-nx-rise] .nx-person-photo img { scale: 1.2; transition: scale 1.8s var(--nx-ease), transform 1.2s var(--nx-ease); }
.nx-anim .nx-person[data-nx-rise].is-in .nx-person-photo { clip-path: inset(0); }
.nx-anim .nx-person[data-nx-rise].is-in .nx-person-photo img { scale: 1; }

/* Journey */
.nx-about-journey { position: relative; background: var(--navy-900); color: var(--white); padding: clamp(80px, 11vw, 150px) 0; overflow: clip; }
.nx-about-journey .nx-sec-head h2 { color: var(--white); }
.nx-miles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--nx-gold);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.nx-mile { padding: clamp(20px, 2.6vw, 34px) clamp(14px, 2vw, 26px) 0; border-left: 1px solid var(--line-dark); }
.nx-mile:first-child { border-left: 0; padding-left: 0; }
.nx-mile-mark {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.6rem);
  line-height: 1;
  color: var(--nx-gold);
  margin-bottom: 16px;
}
.nx-mile-mark.is-word { font-size: clamp(1.35rem, 0.9rem + 1.5vw, 2.2rem); padding-top: 0.35em; }
.nx-mile h3 { font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); margin-bottom: 8px; }
.nx-mile p { color: var(--mist); font-size: var(--t-small); line-height: 1.6; }
.nx-about-journey .nx-journey { border: 1px solid rgba(185, 141, 47, 0.5); box-shadow: 8px 8px 0 rgba(185, 141, 47, 0.25); background: rgba(255, 255, 255, 0.03); }

/* What we build */
.nx-build-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 36px); perspective: 1600px; }
.nx-page .nx-build { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.4vw, 30px); }
.nx-build-num { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--nx-gold); }
.nx-build h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; line-height: 1.25; color: var(--navy-800); }
.nx-build p { color: var(--slate); font-size: var(--t-small); line-height: 1.62; }

@media (max-width: 1100px) {
  .nx-build-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-miles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .nx-mile:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .nx-team-grid, .nx-build-grid, .nx-miles { grid-template-columns: 1fr; }
  .nx-person:nth-child(2) { margin-top: 0; }
  .nx-mile { border-left: 0; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-person, .nx-person-photo img, .nx-person-link svg { transition: none; }
}


/* ---------- About: the founder's story ----------
   Night in his room: navy, a pinned line drawing of the first setup, and
   five beats. data-nx-scene-beat (set by next.js) picks the monitor text;
   --glow warms the screen as the story goes on. */
.nx-founder {
  position: relative;
  background:
    radial-gradient(60% 50% at 25% 45%, rgba(185, 141, 47, calc(0.06 + var(--glow, 0.2) * 0.22)), transparent 70%),
    var(--navy-900);
  color: var(--white);
  padding: clamp(80px, 11vw, 150px) 0;
  overflow: clip;
}
.nx-founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.nx-founder-side { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: clamp(20px, 3vh, 32px); }
.nx-founder-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.4rem);
  line-height: 0.96;
  text-transform: uppercase;
  color: var(--ivory);
}
.nx-founder-scene {
  margin: 0;
  border: 1.5px solid rgba(185, 141, 47, 0.7);
  box-shadow: 10px 10px 0 rgba(185, 141, 47, 0.35);
  background: #071C3F;
}
.nx-room { display: block; width: 100%; height: auto; }
.nx-founder-sig {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 14px 18px;
  border-top: 1.5px solid rgba(185, 141, 47, 0.7);
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--white);
}
.nx-founder-sig span { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nx-gold); }

/* the drawing: a painted night room. Only the screen changes with the story. */
.nx-room .r2-frame,
.nx-room .r2-line { fill: none; stroke: #1A3970; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.nx-room .r2-line { stroke: #2B4F8F; stroke-width: 3; }
.nx-room .r2-sword { fill: none; stroke: var(--nx-gold); stroke-width: 3; stroke-linecap: round; }
.nx-room .r2-star { fill: #F4F0E6; }
.nx-room .r2-bloom { opacity: calc(0.35 + var(--glow, 0.2) * 0.65); transition: opacity 1s ease; }
.nx-room .r2-glass { fill: none; stroke: rgba(243, 213, 140, 0.25); stroke-width: 1; }
.nx-room .r2-view { opacity: 0; transition: opacity 0.6s ease; }
.nx-founder-scene[data-nx-scene-beat="1"] .r2-view[data-beat="1"],
.nx-founder-scene[data-nx-scene-beat="2"] .r2-view[data-beat="2"],
.nx-founder-scene[data-nx-scene-beat="3"] .r2-view[data-beat="3"],
.nx-founder-scene[data-nx-scene-beat="4"] .r2-view[data-beat="4"],
.nx-founder-scene[data-nx-scene-beat="5"] .r2-view[data-beat="5"] { opacity: 1; }
.nx-room .r2-say { fill: var(--nx-gold); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; }
.nx-room .r2-small { fill: #E2BE6A; font-family: var(--font-display); font-weight: 700; font-size: 8px; letter-spacing: 0.2em; }
.nx-room .r2-p { fill: var(--nx-gold); font-family: var(--font-display); font-weight: 700; font-size: 34px; }
.nx-room .r2-check { fill: var(--nx-gold); }
.nx-room .r2-tick { fill: none; stroke: #061433; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nx-room .r2-modbar { fill: rgba(233, 226, 208, 0.55); }
.nx-room .r2-code.k { fill: var(--nx-gold); }
.nx-room .r2-code.t { fill: rgba(233, 226, 208, 0.75); }
.nx-room .r2-code.s { fill: #6E86C2; }
.nx-room .r2-gpu { fill: var(--nx-gold); }
.nx-room .r2-gpu-label { fill: var(--navy-900); font-family: var(--font-head); font-weight: 800; font-size: 8px; letter-spacing: 0.06em; }
.nx-room .r2-power { fill: #F3D58C; }
.nx-room .r2-rim { fill: none; stroke: #E2BE6A; stroke-width: 1.6; stroke-linecap: round; opacity: calc(0.35 + var(--glow, 0.2) * 0.5); transition: opacity 1s ease; }

/* the story: one paragraph, one font, a gold drop cap */
.nx-founder-body { max-width: 34em; padding-top: clamp(4px, 1vw, 12px); }
.nx-founder-text {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(1.32rem, 1rem + 1.15vw, 1.95rem);
  line-height: 1.52;
  letter-spacing: 0.005em;
  color: var(--ivory);
  text-wrap: pretty;
  hanging-punctuation: first;
}
.nx-founder-text em { font-style: italic; font-weight: 600; color: #E2BE6A; }
.nx-founder-text p + p { margin-top: 0.9em; }
.nx-founder-text > p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.9em;
  line-height: 0.74;
  padding: 0.12em 0.12em 0 0;
  color: var(--nx-gold);
  text-shadow: 0 0 34px rgba(185, 141, 47, 0.45);
}
/* Words brighten in reading order as the paragraph scrolls up the screen.
   next.js splits the text and feeds --read (0 to 1); --n is the word count. */
.nx-anim .nx-founder-text .nx-rw {
  opacity: clamp(0.16, calc((var(--read, 0) * var(--n, 1) - var(--i, 0)) / 7 + 0.16), 1);
  transition: opacity 0.2s linear;
}

/* Motion: the room fades up, then lives quietly: stars twinkle, the fan
   turns, the boot bar fills, the dragon drifts, the caret blinks. */
.nx-anim .nx-founder-scene .nx-room { opacity: 0; scale: 0.97; transition: opacity 1.2s ease, scale 1.4s var(--nx-ease); }
.nx-anim .nx-founder-scene.is-drawn .nx-room { opacity: 1; scale: 1; }
.nx-anim .nx-room .r2-star { animation: nx-twinkle 3.2s ease-in-out var(--tw, 0s) infinite; }
.nx-anim .nx-room .r2-fan { transform-origin: var(--fx) var(--fy); animation: nx-spin 1.4s linear infinite; }
.nx-anim .nx-room .r2-power { animation: nx-pulse-dot 2s ease-in-out infinite; }
.nx-anim .nx-room .r2-load { transform-box: fill-box; transform-origin: left; animation: nx-load 2.6s ease-in-out infinite; }
.nx-anim .nx-room .r2-dragon { animation: nx-fly 5.2s ease-in-out infinite; }
.nx-anim .nx-room .r2-caret { animation: nx-pulse-dot 1s steps(2) infinite; }
@keyframes nx-pulse-dot { 50% { opacity: 0.2; } }
@keyframes nx-twinkle { 50% { opacity: 0.25; } }
@keyframes nx-load { from { transform: scaleX(0.05); } to { transform: scaleX(1); } }
@keyframes nx-fly { 0% { translate: -30px 6px; } 50% { translate: 40px -4px; } 100% { translate: 110px 8px; } }

@media (max-width: 860px) {
  .nx-founder-grid { grid-template-columns: 1fr; }
  .nx-founder-side { position: static; }
  .nx-founder-head h2 { font-size: clamp(1.7rem, 1rem + 4vw, 2.4rem); }
  .nx-founder-scene { max-width: 420px; }
  .nx-founder-sig { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-room .r2-view, .nx-room .r2-bloom, .nx-room .r2-rim { transition: none; }
}

/* Phones: the story panels keep every effect, but only in forms the
   compositor can run without repainting. The speed lines hold still (their
   turning angle repainted the whole stage each frame) and use one line set,
   and the shockwave drops its wide outer ring, the largest shadow repaint. */
@media (hover: none), (pointer: coarse) {
  .nx-anim .nx-chapter::before {
    background: repeating-conic-gradient(at var(--cx) var(--cy), rgba(11, 23, 48, 0.42) 0deg 0.7deg, transparent 0.7deg 4.2deg);
  }
  .nx-anim .nx-panel-main {
    box-shadow:
      calc(var(--land) * 6px) calc(var(--land) * 6px) 0 var(--nx-ink),
      0 0 0 calc(var(--wave, 1) * 22px) rgba(201, 162, 74, calc((1 - var(--wave, 1)) * 0.75));
  }
}

/* ---------- Small and short screens (QA, November 2026) ---------- */
/* Short phones (iPhone SE and the like): a smaller, higher coin so its floor
   shadow clears the step copy, and no scroll cue under the hero lede. */
@media (max-width: 860px) and (max-height: 700px) {
  .nx-anim .nx-coin-wrap { top: 34%; width: clamp(110px, 20svh, 200px); }
}
@media (max-height: 640px) {
  .nx-scroll-cue { display: none; }
}
/* Touch screens: every tap target at least 44px tall. */
@media (hover: none), (pointer: coarse) {
  .nav-toggle { width: 44px; height: 44px; }
  .brand { min-height: 44px; }
  .nav-social { width: 44px; height: 44px; }
  .footer-col a:not(.btn) { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  .footer-col a.footer-wa { display: inline-flex; }
  .side-email,
  .side-wa,
  .combo .link-arrow { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Phones on their side (short landscape): the stacked phone layout crops the
   story panels to a strip and runs the captions off the bottom, and the coin
   lands on the big step word. Side by side instead: the panel at its full
   16:9 on one side, card and caption beside it; the coin to the right of the
   step copy. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .nx-story-stage { --ph: min(calc(100svh - var(--nav-h) - 28px), calc(52vw * 0.5625)); --sy: 0px; }
  .nx-anim .nx-chapter { --cx: calc(var(--nx-gutter) + var(--ph) * 8 / 9); --cy: calc(var(--nav-h) + 14px + var(--ph) / 2); }
  .nx-anim .nx-chapter-flip { --cx: calc(100% - var(--nx-gutter) - var(--ph) * 8 / 9); }
  .nx-anim .nx-panel-main,
  .nx-anim .nx-chapter-flip .nx-panel-main {
    top: calc(var(--nav-h) + 14px);
    left: var(--nx-gutter);
    right: auto;
    width: calc(var(--ph) * 16 / 9);
    height: var(--ph);
  }
  .nx-anim .nx-chapter-flip .nx-panel-main { left: auto; right: var(--nx-gutter); }
  .nx-anim .nx-panel-card,
  .nx-anim .nx-caption {
    left: calc(2 * var(--nx-gutter) + var(--ph) * 16 / 9);
    right: var(--nx-gutter);
    width: auto;
  }
  .nx-anim .nx-chapter-flip .nx-panel-card,
  .nx-anim .nx-chapter-flip .nx-caption {
    left: var(--nx-gutter);
    right: calc(2 * var(--nx-gutter) + var(--ph) * 16 / 9);
    width: auto;
  }
  .nx-anim .nx-panel-card,
  .nx-anim .nx-chapter-flip .nx-panel-card {
    top: calc(var(--nav-h) + 14px);
    height: auto;
    padding: 8px 12px;
    grid-auto-flow: column;
    justify-content: start;
    align-items: baseline;
    gap: 10px;
    box-shadow: 5px 5px 0 var(--nx-ink);
  }
  .nx-anim .nx-card-num { font-size: 1.6rem; }
  .nx-anim .nx-card-title { font-size: 0.8rem; }
  .nx-anim .nx-card-step { display: none; }
  .nx-anim .nx-caption,
  .nx-anim .nx-chapter-flip .nx-caption {
    top: calc(var(--nav-h) + 78px);
    bottom: auto;
    padding: 10px 12px;
    font-size: 0.84rem;
    line-height: 1.45;
  }
  .nx-anim .nx-coin-wrap { left: 74%; top: 60%; width: clamp(110px, 36svh, 180px); }
  .nx-coin-shadow { display: none; }
  .nx-anim .nx-cap { left: var(--nx-gutter); right: auto; width: 52vw; }
}
/* The shortest landscape phones (iPhone SE on its side, 375px tall): a
   smaller step word so it clears the kicker of the copy under it. */
@media (orientation: landscape) and (max-height: 400px) {
  .nx-anim .nx-caps-words { font-size: 16svh; }
  /* Wider and a little lower, so the longest step copy stays on three lines
     and its kicker clears the word above. */
  .nx-anim .nx-cap { width: 58vw; bottom: 68px; }
}