/* NOERAVEN design system — global layer, injected last on every page by the build.
   Monochrome field, one signal colour, Space Grotesk display, Space Mono telemetry. */
@font-face {
  font-family:"Space Mono";
  src:url("./fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face {
  font-family:"Space Mono";
  src:url("./fonts/SpaceMono-Bold.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap;
}
:root {
  --ink:#050606;
  --ink-2:#0b0d0d;
  --ink-3:#121515;
  --ink-4:#1b1f1f;
  --fg:#f3f2ed;
  --fg-2:#c9cac4;
  --mute:#868b87;
  --dim:#5a5f5c;
  --rule:#ffffff1c;
  --rule-strong:#ffffff33;
  --bone:#e9e7e0;
  --bone-2:#dcd9d0;
  --bone-ink:#0a0b0b;
  --bone-mute:#5c5f5b;
  --bone-rule:#0a0b0b24;
  --signal:#c3d0bb;
  --signal-soft:#c3d0bb33;
  --signal-ink:#55634e;
  --live:#9fd8a8;
  --font-mono:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  --g:clamp(20px,3.4vw,56px);
  --nr-gutter:var(--g);
  --nr-inset:max(var(--g),calc((100vw - 1680px)/2));
  --nr-header-height:68px;
}
html { background:var(--ink); scrollbar-color:#3a3f3d var(--ink); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
::selection { background:var(--signal); color:#000; }
:where(a,button,[tabindex]):focus-visible { outline:2px solid var(--signal) !important; outline-offset:4px !important; border-radius:0; }

.mono { font-family:var(--font-mono); font-size:11px; line-height:1.45; letter-spacing:.06em; text-transform:uppercase; font-weight:400; }
.visually-hidden { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

.sig-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 3px var(--signal-soft); flex:none; vertical-align:middle; }
.sig-dot.is-live { background:var(--live); box-shadow:0 0 0 3px #9fd8a826; }
.sig-dot.is-dev { background:transparent; box-shadow:inset 0 0 0 1px var(--mute); }
@media (prefers-reduced-motion:no-preference) {
  html:not(.motion-paused) .sig-dot:not(.is-dev) { animation:sigPulse 2.4s var(--ease-out) infinite; }
}
@keyframes sigPulse { 0%{box-shadow:0 0 0 0 var(--signal-soft)} 70%,100%{box-shadow:0 0 0 7px #c3d0bb00} }

/* Section index — "§ 03  SIGNAL → DECISION" */
.section-index { display:flex; gap:18px; align-items:center; color:var(--mute); }
.section-index span:first-child { color:var(--signal); }

/* Buttons — square, mono-labelled, with a travelling arrow */
.btn {
  --b-bg:transparent; --b-fg:var(--fg); --b-bd:var(--rule-strong);
  position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:28px;
  min-height:52px; padding:0 18px 0 20px; border:1px solid var(--b-bd); background:var(--b-bg); color:var(--b-fg);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  white-space:nowrap; overflow:hidden; isolation:isolate; transition:color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.btn::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--b-hover,var(--fg)); transform:scaleY(0); transform-origin:bottom; transition:transform .45s var(--ease-out); }
.btn:hover::before, .btn:focus-visible::before { transform:scaleY(1); }
.btn:hover, .btn:focus-visible { color:var(--b-hover-fg,var(--ink)); border-color:var(--b-hover,var(--fg)); }
.btn svg { width:16px; height:16px; }
.btn-light { --b-bg:var(--fg); --b-fg:var(--ink); --b-bd:var(--fg); --b-hover:var(--signal); --b-hover-fg:#000; }
.btn-ghost { --b-bd:var(--rule-strong); }
.btn-signal { --b-bg:var(--signal); --b-fg:#000; --b-bd:var(--signal); --b-hover:var(--fg); }
.text-link { display:inline-flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid var(--rule-strong); color:var(--fg); font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; transition:border-color .3s, color .3s; }
.text-link:hover { border-color:var(--signal); }

/* ───────── Header ───────── */
.site-header {
  height:var(--nr-header-height) !important; padding-inline:var(--g) !important;
  background:color-mix(in srgb, var(--ink) 72%, transparent) !important;
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:0 !important; box-shadow:none !important; color:var(--fg);
}
.site-header .brand-lockup { width:158px !important; }
.desktop-nav, .desktop-nav button { font-family:var(--font-mono) !important; font-size:12px !important; letter-spacing:.07em !important; text-transform:uppercase; line-height:1 !important; }
.desktop-nav { column-gap:34px !important; }
.desktop-nav button { color:var(--fg-2) !important; padding:10px 0 !important; position:relative; }
.desktop-nav button::after { content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--signal); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out); }
.desktop-nav button:hover, .desktop-nav button.is-active { color:var(--fg) !important; }
.desktop-nav button:hover::after, .desktop-nav button.is-active::after { transform:scaleX(1); }
.header-contact {
  font-family:var(--font-mono) !important; font-size:12px !important; letter-spacing:.07em !important; text-transform:uppercase;
  border:1px solid var(--rule-strong) !important; padding:0 16px !important; height:38px; align-items:center; gap:10px; color:var(--fg) !important;
  transition:background .3s, color .3s, border-color .3s;
}
.header-contact::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--signal); }
.header-contact:hover, .header-contact.is-active { background:var(--fg) !important; color:var(--ink) !important; border-color:var(--fg) !important; }
.desktop-mega { background:var(--ink-2) !important; border-bottom:1px solid var(--rule) !important; padding-inline:var(--g) !important; }
.desktop-mega-kicker { font-family:var(--font-mono) !important; color:var(--signal) !important; text-transform:uppercase; }
.desktop-mega-panel>div:last-child a:hover { color:var(--signal) !important; }


/* ───────── Praxis request demo (shared by home and the Praxis page) ───────── */
.praxis-demo { background:#000 !important; color:var(--fg) !important; border:1px solid var(--rule); }
.praxis-demo-heading { font-family:var(--font-mono); font-size:10.5px !important; letter-spacing:.07em; text-transform:uppercase; color:var(--mute) !important; }
.praxis-demo-controls { border-bottom-color:var(--rule-strong) !important; }
.praxis-demo-controls button { font-family:var(--font-mono); font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--mute) !important; }
.praxis-demo-controls button[aria-pressed="true"] { color:var(--fg) !important; border-color:var(--signal) !important; }
.praxis-demo-controls button:hover { background:#ffffff08 !important; color:var(--fg) !important; }
.praxis-demo code, .praxis-demo pre { font-family:var(--font-mono) !important; }
.praxis-demo pre { color:var(--fg-2) !important; }
.praxis-demo-output { border-top-color:var(--rule) !important; }
.praxis-demo-output > span, .praxis-demo-note { font-family:var(--font-mono); font-size:10.5px !important; letter-spacing:.07em; text-transform:uppercase; color:var(--mute) !important; }
.praxis-demo-output code { color:var(--signal); }


/* Adaptive header on pages that alternate light and dark fields. */
.site-header:is([data-nav-theme="light"],[data-nav-theme="sage"]) { background:var(--bone) !important; color:var(--bone-ink) !important; }
.site-header:is([data-nav-theme="light"],[data-nav-theme="sage"]) .desktop-nav button { color:#3d403e !important; }
.site-header:is([data-nav-theme="light"],[data-nav-theme="sage"]) .desktop-nav button:hover { color:var(--bone-ink) !important; }
.site-header:is([data-nav-theme="light"],[data-nav-theme="sage"]) .header-contact { color:var(--bone-ink) !important; border-color:#0a0b0b40 !important; }
.site-header:is([data-nav-theme="light"],[data-nav-theme="sage"]) .header-contact:hover { background:var(--bone-ink) !important; color:var(--bone) !important; }
.mission-page .site-header:not([data-nav-theme]) { background:var(--bone) !important; color:var(--bone-ink) !important; }

/* Primary actions on inner pages adopt the system button. */
:is(.harness-page,.praxis-page) :is(.button.product-button,.button.cta-button,.button.praxis-primary) {
  position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; border:1px solid var(--fg) !important; border-radius:0 !important;
  background:var(--fg) !important; color:var(--ink) !important; clip-path:none !important;
  font-family:var(--font-mono) !important; font-size:12px !important; letter-spacing:.06em !important; text-transform:uppercase; white-space:nowrap;
  transition:background .3s, border-color .3s, color .3s;
}
:is(.harness-page,.praxis-page) :is(.button.product-button,.button.cta-button,.button.praxis-primary):hover { background:var(--signal) !important; border-color:var(--signal) !important; color:#000 !important; }
:is(.praxis-page) .praxis-link, .harness-page :is(.method-link,.inline-arrow,.product-back), .mission-page .commitment-mission-link { font-family:var(--font-mono) !important; font-size:12px !important; letter-spacing:.06em !important; text-transform:uppercase; }

/* Praxis: tabular results read as instrument data. */
.praxis-page table td, .praxis-page table th[scope="col"] { font-variant-numeric:tabular-nums; }
.praxis-page table thead th { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--mute); font-weight:400; }
.praxis-page table tbody tr:hover { background:#ffffff06; }
.praxis-page .praxis-hero { background:radial-gradient(90% 120% at 100% 0%,#c3d0bb10,transparent 55%), var(--ink) !important; }

/* Labels are plain sentence-case text; monospace is reserved for data. */
.label { font-family:var(--font-sans); font-size:13px; line-height:1.4; letter-spacing:-.005em; text-transform:none; color:var(--mute); }
.data { font-family:var(--font-mono); font-size:12px; line-height:1.45; letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums; }

/* Controls and navigation read as words, not tags: sentence-case Grotesk throughout. */
.btn,.text-link,.header-contact,.desktop-nav,.desktop-nav button,.praxis-demo-controls button,.motion-toggle,.home-page .hero.hero-reel .hero-bottom .motion-toggle {
  font-family:var(--font-sans) !important; text-transform:none !important; letter-spacing:-.01em !important;
}
.btn { font-size:15px; font-weight:500; padding:0 18px 0 20px; }
.text-link { font-size:15px; font-weight:500; }
.desktop-nav,.desktop-nav button { font-size:15px !important; }
.header-contact { font-size:15px !important; font-weight:500; }
.praxis-demo-controls button { font-size:14px !important; }
.motion-toggle { font-size:13px !important; }
:is(.desktop-mega-kicker,.praxis-demo-heading,.praxis-demo-output > span,.praxis-demo-note) {
  font-family:var(--font-sans) !important; text-transform:none !important; letter-spacing:-.005em !important; font-size:13px !important;
}
.desktop-mega-kicker { color:var(--mute) !important; }

/* Every mega-menu panel shares one rhythm: heading, 30px gap, 21px links. */
.desktop-mega-kicker { margin:0 0 30px !important; }
.desktop-mega-panel:not(.domain-panel) > div:last-child a,
.desktop-mega .domain-capabilities button,
.desktop-mega .domain-product-list > a,
.desktop-mega .domain-product-link { font-size:21px !important; line-height:1.35 !important; letter-spacing:-.03em !important; padding:4px 0 !important; }
.desktop-mega .domain-product-status { font-family:var(--font-sans) !important; font-size:13px !important; letter-spacing:-.005em !important; text-transform:none !important; color:var(--mute) !important; }
.desktop-mega-panel:not(.domain-panel) > div:last-child a:hover { color:var(--fg) !important; }
.desktop-mega .mega-plus { display:inline-block; margin-right:8px; font-size:18px; color:var(--mute); }
.desktop-mega-panel > div:last-child a:has(.mega-plus) { display:flex !important; align-items:baseline; gap:0 !important; }
.desktop-mega .domain-capabilities button > span[aria-hidden="true"] { color:var(--mute); }
/* Every button fills with sage from its bottom edge, the same direction the aperture opens. */
.btn-ghost { --b-hover:var(--signal); --b-hover-fg:#000; }
.btn-signal { --b-hover:var(--fg); --b-hover-fg:#000; }
