:root {
  /* ---------- Brand core ---------- */
  --nx-navy: #041636; /* Primary. Dominant across all assets */
  --nx-blue: #47b4ff; /* Accent. CTAs, highlights, wave mark */
  --nx-white: #ffffff;

  /* ---------- Neutrals ---------- */
  --nx-charcoal: #2b2f3a; /* September 2026 brand guide: body copy on light. */
  --nx-slate: #5a6474; /* Secondary text, captions */
  --nx-mid-grey: #e7eaef;
  --nx-light-grey: #f4f5f7; /* Card + section backgrounds */

  /* ---------- Extended (data viz / digital) ---------- */
  --nx-teal: #0ea5a0;
  --nx-orange: #e8742a;
  --nx-light-blue: #6dc4ff;
  --nx-success: #16803c;

  /* ---------- Tonal navy ramp ---------- */
  --nx-navy-900: #020b1e;
  --nx-navy-800: #041636; /* = brand navy */
  --nx-navy-700: #0a1f48;
  --nx-navy-600: #14305e;
  --nx-navy-500: #254677;
  --nx-navy-400: #3e5f94;
  --nx-navy-300: #6b84ae;
  --nx-navy-200: #a8b6cc;
  --nx-navy-100: #d9dfe8;

  /* ---------- Tonal blue ramp ---------- */
  --nx-blue-700: #1478cc;
  --nx-blue-600: #2594e2;
  --nx-blue-500: #47b4ff; /* = brand blue */
  --nx-blue-400: #6dc4ff; /* = light-blue */
  --nx-blue-300: #9fd7ff;
  --nx-blue-200: #cbe8ff;
  --nx-blue-100: #e8f4ff;

  /* ---------- Typography ----------
     Pier Regular: LOGO / WORDMARK ONLY. Never editable text.
     Montserrat:   Headings, titles, eyebrows. 500/600/700.
     Nunito Sans:  Body copy, captions, UI labels. 400/600/700. */
  --nx-font-heading: 'Montserrat', 'Montserrat Fallback', system-ui, -apple-system,
    'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --nx-font-body: 'Nunito Sans', 'Nunito Sans Fallback', system-ui, -apple-system,
    'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --nx-font-mono: 'JetBrains Mono', Consolas, 'SF Mono', Menlo, monospace;

  /* Type scale (web) */
  --nx-text-h1: clamp(40px, 4.4vw, 56px);
  --nx-text-h2: clamp(28px, 2.6vw, 36px);
  --nx-text-h3: clamp(20px, 1.6vw, 24px);
  --nx-text-h4: 18px;
  --nx-text-body: 16px;
  --nx-text-body-lg: 18px;
  --nx-text-caption: 13px;
  --nx-text-eyebrow: 12px;

  --nx-weight-regular: 400;
  --nx-weight-medium: 500;
  --nx-weight-semibold: 600;
  --nx-weight-bold: 700;

  --nx-leading-tight: 1.15;
  --nx-leading-heading: 1.2;
  --nx-leading-body: 1.55;
  --nx-leading-loose: 1.7;

  --nx-tracking-tight: -0.015em;
  --nx-tracking-normal: 0;
  --nx-tracking-eyebrow: 0.14em;

  /* ---------- Radii ---------- */
  --nx-radius-xs: 2px;
  --nx-radius-sm: 4px;
  --nx-radius-md: 8px;
  --nx-radius-lg: 12px;
  --nx-radius-xl: 20px;
  --nx-radius-pill: 999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --nx-space-1: 4px;
  --nx-space-2: 8px;
  --nx-space-3: 12px;
  --nx-space-4: 16px;
  --nx-space-5: 24px;
  --nx-space-6: 32px;
  --nx-space-7: 40px;
  --nx-space-8: 56px;
  --nx-space-9: 80px;
  --nx-space-10: 120px;

  /* ---------- Motion ---------- */
  --nx-ease: cubic-bezier(0.2, 0, 0, 1);
  --nx-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --nx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nx-dur-fast: 120ms;
  --nx-dur-base: 200ms;
  --nx-dur-slow: 360ms;

  /* ---------- Layout ---------- */
  --nx-container: 1200px;
  --nx-gutter: 24px;

  /* ---------- Focus ---------- */
  --nx-shadow-focus: 0 0 0 3px rgba(71, 180, 255, 0.35);
}

/* ============================================================
   Constellation theme
   The dark, immersive dialect of the nexwave design system
   (PRD §13.1). Maps experience roles onto brand tokens. Every
   component stylesheet uses --nxc-* roles, never raw hex, so
   the dialect can be re-tuned against the brand in one place.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Space surfaces */
  --nxc-space: var(--nx-navy-900); /* #020B1E deep-space base */
  --nxc-surface: rgba(255, 255, 255, 0.04);
  --nxc-surface-raised: rgba(255, 255, 255, 0.07);
  --nxc-glow-blue: rgba(71, 180, 255, 0.16);
  --nxc-glow-teal: rgba(52, 199, 168, 0.1);

  /* Accents (experiential palette, PRD §13.1) */
  --nxc-accent: #7fd0ff; /* electric blue, primary experiential accent */
  --nxc-accent-strong: #56b7ff;
  --nxc-teal: #34c7a8; /* approach / people */
  --nxc-amber: #f2a65a; /* signal / proof */
  --nxc-light-blue: var(--nx-light-blue); /* #6DC4FF, industries */
  --nxc-brand-blue: var(--nx-blue); /* #47B4FF, official brand accent */

  /* Text on space. These four are the alpha's exact values (its
     --nx-white / --nx-body / --nx-muted), so the CSS port renders
     identical text colour to the proven experience. */
  --nxc-star-white: #f3f8ff;
  --nxc-body: rgba(216, 231, 249, 0.8);
  --nxc-muted: rgba(157, 181, 214, 0.66);

  /* Lines and borders. --nxc-line is the alpha's --nx-line; the
     component sheets keep its derived tints literal at the point of
     use, the way the alpha did. */
  --nxc-line: rgba(127, 208, 255, 0.16);
  --nxc-border-strong: rgba(127, 208, 255, 0.32);
  --nxc-hairline: rgba(255, 255, 255, 0.08);

  /* Shared reading scale. The held hero keeps its own display scale. */
  --nxc-reading-title: clamp(2rem, 4.1vw, 4rem);
  --nxc-reading-impact: clamp(1.25rem, 1.8vw, 1.5rem);
  --nxc-reading-body: 1rem;
  --nxc-reading-measure: 65ch;
  --nxc-reading-gap: clamp(1.5rem, 3vw, 2.5rem);
  --nxc-reading-muted: #b3c5db;

  /* Focus ring on dark */
  --nxc-focus: 0 0 0 3px rgba(127, 208, 255, 0.45);
}

/* Navigation controls and the selected Glass threshold menu.
   The masthead controls retain their existing layout; the menu uses the
   light chapter surface and dark glass wayfinding art selected on 18 Sep 2026. */

/* ------------------------------------------------------------
   The masthead group: Careers, Contact, Menu
   ------------------------------------------------------------ */

.nx-mast-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  /* .nx-mast is pointer-events: none so the hero art reads through
     it; the controls have to take their events back. */
  pointer-events: auto;
}

.nx-mast-link {
  display: inline-flex;
  align-items: center;
  /* The artboard's link is 13px text; the 44px box is the touch
     target around it and adds no visible height to the bar. */
  min-height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(226, 238, 252, 0.82);
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}

.nx-mast-link:hover {
  color: var(--nxc-accent);
}

/* ------------------------------------------------------------
   The trigger pill
   ------------------------------------------------------------ */

.nx-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(127, 208, 255, 0.3);
  border-radius: var(--nx-radius-pill);
  background: rgba(3, 12, 29, 0.62);
  color: rgba(234, 242, 255, 0.9);
  cursor: pointer;
  font-family: var(--nx-font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nx-menu-trigger:hover {
  border-color: rgba(127, 208, 255, 0.52);
  color: #fff;
}

.nx-menu-glyph {
  flex: none;
}

/* The masthead is hidden once the mapped page owns the view (the
   engine's view tween sets display on it), so the mapped page's own
   header carries a second trigger and the menu stays reachable for
   the whole journey. */
.nx-page-header .nx-menu-trigger {
  flex: none;
}

/* ------------------------------------------------------------
   Document pages: the same group beside the way back
   ------------------------------------------------------------ */

.nx-doc-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Glass threshold menu, selected 18 September 2026. The top stays reachable
   while the reading surface scrolls independently of the page underneath. */
.nx-menu {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh;
  max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden;
  color: #eef6ff; background: radial-gradient(ellipse at 86% 10%, #17467155, transparent 52%), var(--nx-navy);
}
.nx-menu[open] { display: flex; flex-direction: column; animation: nx-menu-in 220ms ease-out both; }
.nx-menu::backdrop { background: var(--nx-navy-900); }
@keyframes nx-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.nx-menu a { color: inherit; text-decoration: none; }
.nx-menu a:focus-visible, .nx-menu button:focus-visible { outline: 3px solid var(--nx-blue); outline-offset: 4px; }
.nx-menu-top { flex: none; display: flex; align-items: center; gap: 32px; width: min(1600px,100%); height: 110px; padding-inline: clamp(24px,4vw,72px); margin: auto; }
.nx-menu-logo { display: block; width: 148px; height: auto; flex: none; }
.nx-menu-brand { color: #a7bfd5; font-size: 12px; letter-spacing: .04em; }
.nx-menu-close { margin-left: auto; display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid #b9e2ff55; border-radius: 50%; color: #eef6ff; background: transparent; cursor: pointer; }
.nx-menu-close:hover { background: #b9e2ff22; }
.nx-menu-body { flex: 1; min-height: 0; width: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 0 max(clamp(24px,4vw,72px), calc((100% - 1600px) / 2 + 56px)); }
.nx-menu-composition { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
.nx-menu-index-col { min-width: 0; padding: clamp(28px,3vw,48px); background: #f7faff; border: 1px solid #fff; border-radius: 28px; color: var(--nx-navy); }
.nx-menu-directory-head { margin-bottom: 28px; }
.nx-menu-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.nx-menu-directory-head .nx-menu-eyebrow { color: #526781; }
.nx-menu-directory-head h2 { font: 600 clamp(28px,2.7vw,43px)/1.1 var(--nx-font-heading); letter-spacing: -.055em; margin: 12px 0; }
.nx-menu-directory-head > p:last-child { margin: 0; font-size: 15px; color: #53617a; }
.nx-menu-index { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 28px; }
.nx-menu-row { position: relative; display: grid; grid-template-columns: 1fr auto; padding: 21px 0 24px; gap: 13px 6px; border-top: 1px solid #bccbdc; min-width: 0; }
.nx-menu-num { font-size: 11px; color: #63748b; letter-spacing: .1em; }
.nx-menu-row-copy { grid-column: 1; display: grid; gap: 7px; }
.nx-menu-label { font: 600 clamp(20px,1.6vw,26px)/1.2 var(--nx-font-heading); letter-spacing: -.04em; }
.nx-menu-description { font-size: 14px; line-height: 1.4; color: #526078; }
.nx-menu-arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 22px; color: #376484; transition: transform .18s; }
.nx-menu-row:hover .nx-menu-arrow, .nx-menu-row:focus-visible .nx-menu-arrow { transform: translate(2px,-2px); }
.nx-menu-row:hover .nx-menu-label { color: #1478cc; }
.nx-menu-explore { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 44px; padding-top: 19px; border-top: 1px solid #bccbdc; font-size: 14px; font-weight: 700; }
.nx-menu-explore:hover { text-decoration: underline; text-underline-offset: 5px; }
.nx-menu-feature { position: relative; isolation: isolate; min-width: 0; overflow: hidden; border-radius: 28px; border: 1px solid #b3d9ff44; background: #020c1c; display: flex; flex-direction: column; }
.nx-menu-art { position: absolute; z-index: -1; inset: 38% -6% -6%; pointer-events: none; }
.nx-menu-art img { width: 100%; height: 100%; object-fit: cover; }
.nx-menu-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#020c1c, #020c1c00 25%, #020c1c00 82%, #020c1c77); }
.nx-menu-feature-copy { padding: clamp(28px,3vw,46px); }
.nx-menu-feature .nx-menu-eyebrow { color: #96d7ff; }
.nx-menu-feature h2 { font: 600 clamp(28px,2.5vw,40px)/1.13 var(--nx-font-heading); letter-spacing: -.05em; margin: 19px 0 17px; }
.nx-menu-feature-copy > p:not(.nx-menu-eyebrow) { color: #bed0e2; font-size: 16px; line-height: 1.6; margin: 0 0 24px; }
.nx-menu-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 48px; border-radius: 99px; border: 1px solid transparent; padding: 15px 23px; color: var(--nx-navy) !important; background: var(--nx-blue-300); font-size: 14px; font-weight: 800; cursor: pointer; }
.nx-menu-cta:hover { background: #e5f5ff; }
.nx-menu-art-caption { margin: auto 38px 23px; padding-top: 180px; color: #bad2e9; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; text-align: right; }
.nx-menu-footer { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 22px 5px; font-size: 14px; }
.nx-menu-company, .nx-menu-utilities { display: flex; align-items: center; gap: 28px; }
.nx-menu-utilities { font-size: 12px; color: #a3bbd1; gap: 20px; }
.nx-menu-co { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.nx-menu-co:hover { text-decoration: underline; text-underline-offset: 6px; }
.nx-menu-co span { color: #8dd3ff; }
@media(min-width:1600px) { .nx-menu-top { padding-inline: 56px; height: 124px; } .nx-menu-row { padding-block: 26px; } }
@media(min-width:1100px) and (max-height:850px) {
  .nx-menu-top { height: 82px; }
  .nx-menu-index-col { padding: 28px 36px; }
  .nx-menu-directory-head { margin-bottom: 18px; }
  .nx-menu-directory-head h2 { font-size: 34px; margin-block: 10px; }
  .nx-menu-directory-head > p:last-child { font-size: 14px; }
  .nx-menu-row { padding-block: 16px; gap: 9px; }
  .nx-menu-label { font-size: 25px; }
  .nx-menu-feature-copy { padding: 30px 36px; }
  .nx-menu-feature h2 { font-size: 32px; }
  .nx-menu-feature-copy > p:not(.nx-menu-eyebrow) { font-size: 15px; margin-bottom: 18px; }
  .nx-menu-art-caption { padding-top: 120px; }
  .nx-menu-footer { padding-block: 18px; }
}
@media(max-width:1080px) {
  .nx-menu-top, .nx-menu-body { padding-inline: 28px; }
  .nx-menu-composition { grid-template-columns: 1.25fr 1fr; }
  .nx-menu-index-col, .nx-menu-feature-copy { padding: 28px; }
  .nx-menu-index { column-gap: 18px; }
  .nx-menu-label { font-size: 21px; }
  .nx-menu-description { font-size: 13px; }
  .nx-menu-footer { align-items: flex-start; }
  .nx-menu-company { gap: 22px; flex-wrap: wrap; }
  .nx-menu-utilities { gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
}
@media(max-width:760px) {
  .nx-mast-link { display: none; }
  .nx-mast-nav { gap: 14px; }
  .nx-page-header .nx-menu-trigger { position: relative; width: 44px; padding: 0; gap: 0; justify-content: center; }
  .nx-page-header .nx-menu-trigger span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.js .nx-doc-back { display: none; }
  .nx-menu-top { height: 82px; gap: 16px; padding-inline: 20px; }
  .nx-menu-logo { width: 126px; }
  .nx-menu-brand { display: none; }
  .nx-menu-body { padding-inline: 16px; }
  .nx-menu-composition { grid-template-columns: 1fr; gap: 18px; }
  .nx-menu-index-col { border-radius: 24px; padding: 25px; }
  .nx-menu-directory-head { margin-bottom: 24px; }
  .nx-menu-directory-head h2 { font-size: 31px; }
  .nx-menu-directory-head > p:last-child { font-size: 14px; }
  .nx-menu-index { grid-template-columns: 1fr; }
  .nx-menu-row { grid-template-columns: 20px 1fr 20px; gap: 12px; align-items: center; padding: 16px 0; }
  .nx-menu-row-copy { grid-column: 2; gap: 4px; }
  .nx-menu-label { font-size: 22px; }
  .nx-menu-arrow { grid-column: 3; grid-row: 1; font-size: 20px; }
  .nx-menu-feature { border-radius: 24px; }
  .nx-menu-feature-copy { padding: 28px; }
  .nx-menu-feature h2 { font-size: 30px; }
  .nx-menu-art-caption { padding-top: 112px; margin-bottom: 20px; font-size: 9px; }
  .nx-menu-art { inset: 42% -4% -10%; }
  .nx-menu-footer { padding: 18px 5px max(18px, env(safe-area-inset-bottom)); display: grid; gap: 8px; }
  .nx-menu-company { gap: 8px 22px; }
  .nx-menu-utilities { justify-content: flex-start; gap: 22px; }
}
@media(prefers-reduced-motion:reduce) {
  .nx-menu[open] { animation: none; }
  .nx-menu * { transition: none; }
  .nx-menu-body { scroll-behavior: auto; }
}

/* Editorial destination leads the directory on desktop and mobile. */
.nx-menu-insights { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; margin-bottom: 24px; border: 1px solid #486984; border-radius: 18px; background: linear-gradient(115deg, #192c43, #29435d); color: #fafbfd !important; }
.nx-menu-insights > span:first-child { display: grid; gap: 4px; }
.nx-menu-insights strong { font: 600 24px/1.2 var(--nx-font-heading); letter-spacing: -.04em; }
.nx-menu-insights > span > span { color: #d5e2ed; font-size: 13px; }
.nx-menu-insights-arrow { font-size: 28px; color: #d5e2ed; }
.nx-menu-insights:hover { border-color: #96d7ff; background: #29435d; }

.nx-menu,.nx-menu *{box-sizing:border-box}.nx-menu{font:16px/1.6 var(--nx-font-body)}.nx-menu-trigger[hidden]{display:none}