/* ============================================================
   NEBLI — Fonts
   Display / wordmark : Montserrat  (geometric, wide-tracked)
   Body / UI          : Inter       (quiet tie to the Hover product)
   Technical accent    : IBM Plex Mono (coordinates, readouts, IDs)

   Loaded from Google Fonts via the <link> in templates/partials/nebli-head.hbs.
   No custom binaries were provided; if Nebli wants self-hosted webfonts, drop
   the .woff2 files in tokens/webfonts/ and swap that link for @font-face rules.
   ============================================================ */



:root {
  --font-display: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
}


/* ============================================================
   NEBLI — Color
   Restrained by design: warm cream, near-black ink, olive.
   No blue, red, neon, or gradients. Olive is an accent, not a
   field color. On cream, use DEEP olive (--olive-700) for any
   text or fine element — bright olive (--olive-500) fails
   contrast at small sizes and is reserved for fills, the eye,
   the wordmark wedge, and the offset falcon shadow.
   ============================================================ */

:root {
  /* ---- Warm neutral ramp : paper → ink ---------------------- */
  --cream-50:  #FBFAF6;  /* lightest paper — raised cards        */
  --cream-100: #F4F1EB;  /* canonical brand cream — page ground  */
  --cream-200: #EBE7DC;  /* sunken / hover wash on cream         */
  --cream-300: #DED8C9;  /* soft divider on cream                */
  --sand-400:  #C4BCA8;  /* hairline / disabled edge             */
  --stone-500: #8C8676;  /* muted text, captions                 */
  --stone-600: #5E594E;  /* secondary text                       */
  --stone-700: #3A362E;  /* strong secondary / ink on cream      */
  --ink-800:   #201E19;  /* soft ink                             */
  --ink-900:   #0A0A0A;  /* near-black — primary ink & line-art  */
  --black:     #000000;  /* pure black — rare, heavy line-art    */

  /* ---- Olive ramp ------------------------------------------- */
  --olive-200: #ECE7CB;  /* faint olive wash                     */
  --olive-300: #DCD3A4;  /* light olive tint                     */
  --olive-400: #CBC084;  /* soft olive                           */
  --olive-500: #BBB06A;  /* PRIMARY olive — accent, fills, eye   */
  --olive-600: #9A9147;  /* mid olive                            */
  --olive-700: #7C7320;  /* DEEP olive — text/lines on cream     */
  --olive-800: #5B551A;  /* darkest olive — pressed / on-olive   */

  /* ---- Dark-surface family (redrawn, not inverted) ---------- */
  --dark-950: #06060A;  /* deepest field                         */
  --dark-900: #0A0A0A;  /* dark page ground                      */
  --dark-850: #121210;  /* raised on dark                        */
  --dark-800: #1B1A16;  /* card on dark                          */
  --dark-line: #2C2B25; /* divider on dark                       */
  --dark-fg:  #ECECEF;  /* off-white text on dark                */
  --dark-fg-muted: #A6A59B;

  /* ============================================================
     Semantic aliases — LIGHT (default). Author against these.
     ============================================================ */
  --surface-page:     var(--cream-100);
  --surface-raised:   var(--cream-50);
  --surface-card:     var(--cream-50);
  --surface-sunken:   var(--cream-200);
  --surface-wash:     var(--olive-200);
  --surface-inverse:  var(--ink-900);   /* dark block on a light page */

  --text-primary:   var(--ink-900);
  --text-secondary: var(--stone-600);
  --text-muted:     var(--stone-500);
  --text-inverse:   var(--cream-100);
  --text-accent:    var(--olive-700);   /* deep olive for legibility  */

  --accent:         var(--olive-500);   /* brand olive — fills/marks  */
  --accent-strong:  var(--olive-700);   /* deep olive — text/lines    */
  --accent-contrast:var(--ink-900);     /* ink sits on olive fills    */

  --line:        rgba(10, 10, 10, 0.12);  /* thin brand divider       */
  --line-strong: rgba(10, 10, 10, 0.26);
  --line-ink:    var(--ink-900);           /* full-strength line-art   */

  --focus-ring:  var(--olive-700);
  --selection:   rgba(187, 176, 106, 0.30);
}

/* ============================================================
   Dark theme — for dark surfaces / dark-mode collateral.
   Apply on a container: [data-theme="dark"] or class .on-dark.
   The falcon uses its dark-adapted asset here, never inverted.
   ============================================================ */
[data-theme="dark"] {
  --surface-page:     var(--dark-900);
  --surface-raised:   var(--dark-850);
  --surface-card:     var(--dark-800);
  --surface-sunken:   var(--dark-950);
  --surface-wash:     rgba(187, 176, 106, 0.10);
  --surface-inverse:  var(--cream-100);

  --text-primary:   var(--dark-fg);
  --text-secondary: var(--dark-fg-muted);
  --text-muted:     #77766D;
  --text-inverse:   var(--ink-900);
  --text-accent:    var(--olive-500);   /* bright olive reads on dark */

  --accent:         var(--olive-500);
  --accent-strong:  var(--olive-500);
  --accent-contrast:var(--ink-900);

  --line:        rgba(236, 236, 239, 0.14);
  --line-strong: rgba(236, 236, 239, 0.30);
  --line-ink:    var(--dark-fg);

  --focus-ring:  var(--olive-500);
  --selection:   rgba(187, 176, 106, 0.28);
}

/* ============================================================
   Explicit LIGHT scope. Mirrors :root, but as a [data-theme]
   selector so `data-theme="light"` can restore light tokens
   even when nested inside a [data-theme="dark"] ancestor
   (otherwise the background would inherit the dark value).
   ============================================================ */
[data-theme="light"] {
  --surface-page:     var(--cream-100);
  --surface-raised:   var(--cream-50);
  --surface-card:     var(--cream-50);
  --surface-sunken:   var(--cream-200);
  --surface-wash:     var(--olive-200);
  --surface-inverse:  var(--ink-900);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--stone-600);
  --text-muted:     var(--stone-500);
  --text-inverse:   var(--cream-100);
  --text-accent:    var(--olive-700);

  --accent:         var(--olive-500);
  --accent-strong:  var(--olive-700);
  --accent-contrast:var(--ink-900);

  --line:        rgba(10, 10, 10, 0.12);
  --line-strong: rgba(10, 10, 10, 0.26);
  --line-ink:    var(--ink-900);

  --focus-ring:  var(--olive-700);
  --selection:   rgba(187, 176, 106, 0.30);
}


/* ============================================================
   NEBLI — Typography scale
   Display is Montserrat, wide-tracked and confident. Body is
   Inter at comfortable reading measures. Eyebrows, taglines and
   labels are UPPERCASE with generous tracking — the wordmark's
   wide setting is the system's signature and echoes through
   every small label.
   ============================================================ */

:root {
  /* ---- Family roles are declared in fonts.css --------------- */

  /* ---- Size scale (px in comments; rem for scaling) --------- */
  --text-2xs: 0.6875rem;  /* 11 — micro labels                  */
  --text-xs:  0.75rem;    /* 12 — captions, mono readouts        */
  --text-sm:  0.875rem;   /* 14 — secondary UI                   */
  --text-base:1rem;       /* 16 — body                           */
  --text-md:  1.125rem;   /* 18 — lead body                      */
  --text-lg:  1.25rem;    /* 20 — large body / small headings    */
  --text-xl:  1.5rem;     /* 24 — H5                             */
  --text-2xl: 1.875rem;   /* 30 — H4                             */
  --text-3xl: 2.375rem;   /* 38 — H3                             */
  --text-4xl: 3rem;       /* 48 — H2                             */
  --text-5xl: 3.875rem;   /* 62 — H1                             */
  --text-6xl: 5rem;       /* 80 — display                        */
  --text-7xl: 6.5rem;     /* 104 — hero display                  */

  /* ---- Weights --------------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* ---- Line height ----------------------------------------- */
  --leading-none:    1;
  --leading-tight:   1.05;   /* hero display                     */
  --leading-snug:    1.18;   /* headings                         */
  --leading-normal:  1.5;    /* body                             */
  --leading-relaxed: 1.65;   /* long-form editorial              */

  /* ---- Letter-spacing (tracking) --------------------------- */
  --tracking-tighter:-0.03em; /* very large display              */
  --tracking-tight:  -0.015em;/* headings                        */
  --tracking-normal:  0;      /* body                            */
  --tracking-wide:    0.04em; /* buttons, lead labels            */
  --tracking-wider:   0.12em; /* eyebrows, small caps            */
  --tracking-widest:  0.22em; /* wordmark, taglines              */
  --tracking-mega:    0.34em; /* logo lockups, favicon labels    */

  /* ---- Semantic type roles (font / size / weight / lh / ls) -- */
  --title-display: var(--weight-extrabold) var(--text-6xl)/var(--leading-tight) var(--font-display);
  --title-h1:      var(--weight-bold) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --title-h2:      var(--weight-bold) var(--text-4xl)/var(--leading-snug) var(--font-display);
  --title-h3:      var(--weight-semibold) var(--text-3xl)/var(--leading-snug) var(--font-display);
  --title-h4:      var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --title-h5:      var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-display);

  --body-lead: var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-body);
  --body-base: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-body);
  --body-sm:   var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
}

/* ---- Eyebrow / label utility values ------------------------ */
:root {
  --eyebrow-size: var(--text-xs);
  --eyebrow-weight: var(--weight-semibold);
  --eyebrow-tracking: var(--tracking-wider);
}


/* ============================================================
   NEBLI — Spacing & layout
   4px base grid. Generous whitespace is a brand value — the
   identity board "keeps lots of negative space." Prefer larger
   section rhythm over dense packing.
   ============================================================ */

:root {
  --space-0:  0;
  --space-px: 1px;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */
  --space-40: 10rem;    /* 160 */

  /* ---- Semantic spacing ------------------------------------ */
  --gap-inline:   var(--space-2);   /* icon ↔ label             */
  --gap-tight:    var(--space-3);
  --gap-default:  var(--space-4);
  --gap-loose:    var(--space-8);
  --pad-control:  var(--space-3) var(--space-5);  /* buttons     */
  --pad-card:     var(--space-8);
  --pad-card-sm:  var(--space-5);
  --section-y:    var(--space-24);  /* vertical section rhythm  */
  --section-y-sm: var(--space-16);
  --page-margin:  var(--space-8);

  /* ---- Layout measures ------------------------------------- */
  --measure-prose:  66ch;   /* comfortable reading column       */
  --measure-narrow: 44ch;
  --container-sm:  640px;
  --container-md:  920px;
  --container-lg:  1140px;
  --container-xl:  1320px;
  --container-full:1600px;
}


/* ============================================================
   NEBLI — Radius
   Editorial and geometric: corners stay crisp. Controls are
   near-square; the app-icon squircle is the one generous radius.
   ============================================================ */

:root {
  --radius-none: 0;
  --radius-xs:  2px;
  --radius-sm:  4px;    /* default control radius — crisp        */
  --radius-md:  6px;    /* cards, inputs                         */
  --radius-lg:  10px;   /* larger panels                         */
  --radius-xl:  16px;
  --radius-2xl: 22px;   /* app-icon squircle at ~96px            */
  --radius-pill: 999px; /* used sparingly — status dots, avatars */

  --radius-control: var(--radius-sm);
  --radius-card:    var(--radius-md);
  --radius-app-icon: 22.5%;  /* proportional squircle for marks  */
}


/* ============================================================
   NEBLI — Elevation, borders & the olive offset
   Depth is restrained: hairline borders do most of the work,
   soft shadows are quiet and warm-tinted (never neutral gray,
   never heavy). The signature motif is the FLAT OLIVE OFFSET —
   a hard, blur-free olive shadow that echoes the falcon mark's
   line-art-with-offset construction. Use it on framed art,
   feature cards, and emblem tiles; never a soft blurred version.
   ============================================================ */

:root {
  /* ---- Borders --------------------------------------------- */
  --border-width:       1px;
  --border-width-thick: 2px;
  --border-hairline: 1px solid var(--line);
  --border-soft:     1px solid var(--line-strong);
  --border-ink:      2px solid var(--ink-900);   /* line-art frame */
  --border-olive:    2px solid var(--olive-700);

  /* ---- Soft warm shadows (quiet elevation) ----------------- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(32, 30, 25, 0.06);
  --shadow-sm: 0 1px 2px rgba(32, 30, 25, 0.06),
               0 2px 6px rgba(32, 30, 25, 0.05);
  --shadow-md: 0 4px 10px rgba(32, 30, 25, 0.07),
               0 10px 28px rgba(32, 30, 25, 0.07);
  --shadow-lg: 0 8px 20px rgba(32, 30, 25, 0.08),
               0 24px 56px rgba(32, 30, 25, 0.10);

  /* ---- Signature flat olive offset (NO blur) --------------- */
  --offset-olive-sm: 4px 4px 0 var(--olive-500);
  --offset-olive:    7px 7px 0 var(--olive-500);
  --offset-olive-lg: 12px 12px 0 var(--olive-500);
  --offset-ink:      7px 7px 0 var(--ink-900);   /* ink offset variant */

  /* ---- Focus ring ------------------------------------------ */
  --ring: 0 0 0 3px rgba(124, 115, 32, 0.35);
  --ring-offset: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--focus-ring);
}


/* ============================================================
   NEBLI — Motion
   Precise and decisive, never playful. Short fades and clean
   translations; no bounce, no overshoot, no spring. Motion
   should feel like an instrument settling, not a toy reacting.
   ============================================================ */

:root {
  --duration-instant: 80ms;  /* @kind other */
  --duration-fast:    140ms; /* @kind other */
  --duration-base:    220ms; /* @kind other */
  --duration-slow:    360ms; /* @kind other */
  --duration-slower:  560ms; /* @kind other */

  /* Decisive, weighted easing — quick to commit, soft to land   */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);/* @kind other */

  --transition-colors: color var(--duration-fast) var(--ease-standard),
                       background-color var(--duration-fast) var(--ease-standard),
                       border-color var(--duration-fast) var(--ease-standard),
                       box-shadow var(--duration-fast) var(--ease-standard);
  --transition-transform: transform var(--duration-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms; /* @kind other */
    --duration-fast: 0ms;    /* @kind other */
    --duration-base: 0ms;    /* @kind other */
    --duration-slow: 0ms;    /* @kind other */
    --duration-slower: 0ms;  /* @kind other */
  }
}


/* ============================================================
   NEBLI — Base & branded utilities
   Element defaults plus a small set of utilities that encode
   brand motifs (eyebrow labels, the olive offset, the wordmark
   setting, line-art frames). Consumers get these for free by
   linking styles.css.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--body-base);
  color: var(--text-primary);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--text-accent);
  text-decoration: none;
  transition: var(--transition-colors);
}
a:hover { color: var(--olive-800); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---- Eyebrow / small-caps label ---------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* ---- Monospace technical readout --------------------------- */
.u-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.02em;
}

/* ---- Wordmark setting (for CSS-set NEBLI) ------------------ */
.u-wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* ---- Tagline setting --------------------------------------- */
.u-tagline {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* ---- Signature flat olive offset --------------------------- */
.u-offset-olive { box-shadow: var(--offset-olive); }
.u-offset-olive-sm { box-shadow: var(--offset-olive-sm); }
.u-offset-ink { box-shadow: var(--offset-ink); }

/* ---- Line-art frame (2px ink border) ----------------------- */
.u-linework {
  border: var(--border-ink);
  background: var(--surface-card);
}

/* ---- Hairline divider -------------------------------------- */
.u-hairline { border: 0; border-top: 1px solid var(--line); }

/* ---- Reticle dot (eye/target motif) ------------------------ */
.u-reticle {
  display: inline-block;
  width: 0.7em; height: 0.7em;
  border-radius: var(--radius-pill);
  border: 0.14em solid var(--olive-700);
  position: relative;
}
.u-reticle::after {
  content: "";
  position: absolute; inset: 30%;
  border-radius: var(--radius-pill);
  background: var(--olive-700);
}


/* ============================================================
   NEBLI — Component styles
   Classes consumed by the React components in /components. Kept
   here (not inline) so hover / focus / active / disabled states
   are real CSS. Everything references the design tokens, so
   components adapt automatically under [data-theme="dark"].
   ============================================================ */

/* ---------- Button ----------------------------------------- */
.nb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.625rem 1.125rem;
  border: var(--border-width-thick) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: var(--transition-colors), transform var(--duration-instant) var(--ease-standard);
}
.nb-btn:active { transform: translateY(1px); }
.nb-btn:disabled,
.nb-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; transform: none; }
.nb-btn__icon { display: inline-flex; }

.nb-btn--sm { padding: 0.4375rem 0.75rem; font-size: 0.78rem; }
.nb-btn--lg { padding: 0.875rem 1.625rem; font-size: 0.95rem; }
.nb-btn--block { display: flex; width: 100%; }

.nb-btn--primary {
  background: var(--surface-inverse);
  color: var(--surface-page);
  border-color: var(--surface-inverse);
}
.nb-btn--primary:hover { background: var(--ink-800); border-color: var(--ink-800); }
[data-theme="dark"] .nb-btn--primary:hover { background: #FFFFFF; border-color: #FFFFFF; }

.nb-btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--text-primary);
}
.nb-btn--secondary:hover { background: var(--text-primary); color: var(--surface-page); }

.nb-btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: transparent;
}
.nb-btn--ghost:hover { background: var(--surface-sunken); }

.nb-btn--accent {
  background: var(--olive-500);
  color: var(--ink-900);
  border-color: var(--olive-500);
}
.nb-btn--accent:hover { background: var(--olive-600); border-color: var(--olive-600); }

/* ---------- Text link -------------------------------------- */
.nb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  color: var(--text-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--transition-colors);
}
.nb-link:hover { border-bottom-color: currentColor; }
.nb-link__arrow { transition: transform var(--duration-base) var(--ease-out); }
.nb-link:hover .nb-link__arrow { transform: translateX(3px); }
.nb-link--muted { color: var(--text-secondary); }

/* ---------- Eyebrow ---------------------------------------- */
.nb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-accent);
}
.nb-eyebrow__rule { width: 1.6rem; height: 2px; background: var(--olive-500); }

/* ---------- Badge ------------------------------------------ */
.nb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22em 0.6em;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  line-height: 1.1;
  white-space: nowrap;
}
.nb-badge--mono { font-family: var(--font-mono); letter-spacing: 0.04em; }
.nb-badge--default { background: var(--surface-sunken); color: var(--stone-700); border-color: var(--line); }
.nb-badge--olive   { background: var(--olive-200); color: var(--olive-800); }
.nb-badge--solid   { background: var(--ink-900); color: var(--cream-100); }
.nb-badge--outline { background: transparent; color: var(--text-primary); border-color: var(--line-strong); }
.nb-badge__dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
.nb-badge--live { background: var(--olive-200); color: var(--olive-800); }
.nb-badge--live .nb-badge__dot { background: var(--olive-700); }

/* ---------- Tag -------------------------------------------- */
.nb-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  padding: 0.28em 0.75em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: var(--transition-colors);
}
a.nb-tag:hover, button.nb-tag:hover { border-color: var(--text-primary); color: var(--text-primary); cursor: pointer; }
.nb-tag__remove { display: inline-flex; margin-right: -0.15em; opacity: 0.6; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; font: inherit; }
.nb-tag__remove:hover { opacity: 1; }

/* ---------- Divider ---------------------------------------- */
.nb-divider { border: 0; border-top: 1px solid var(--line); margin: 0; }
.nb-divider--strong { border-top-color: var(--line-strong); }
.nb-divider--labeled {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border: 0;
}
.nb-divider--labeled::before,
.nb-divider--labeled::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.nb-divider__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.nb-divider--vertical { border: 0; border-left: 1px solid var(--line); align-self: stretch; width: 0; height: auto; }

/* ---------- Card ------------------------------------------- */
.nb-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--pad-card);
}
.nb-card--sm { padding: var(--pad-card-sm); }
.nb-card--raised { border-color: transparent; box-shadow: var(--shadow-md); }
.nb-card--linework {
  border: var(--border-ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--offset-olive);
}
.nb-card--flat { background: transparent; border: 0; border-top: 2px solid var(--ink-900); border-radius: 0; padding-left: 0; padding-right: 0; }
.nb-card--interactive { transition: var(--transition-colors), transform var(--duration-base) var(--ease-out); cursor: pointer; }
.nb-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.nb-card__media { margin: calc(-1 * var(--pad-card)) calc(-1 * var(--pad-card)) 0; border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; }
.nb-card__title { font: var(--title-h5); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.nb-card__body { font: var(--body-base); color: var(--text-secondary); }
.nb-card__footer { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }

/* ---------- Stat block ------------------------------------- */
.nb-stat { display: flex; flex-direction: column; gap: var(--space-2); }
.nb-stat__value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.nb-stat__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.nb-stat__delta { display: inline-flex; align-items: center; gap: 0.3em; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--olive-700); }
.nb-stat__delta--down { color: var(--stone-600); }

/* ---------- Pull quote ------------------------------------- */
.nb-quote { display: flex; flex-direction: column; gap: var(--space-5); padding-left: var(--space-6); border-left: 2px solid var(--olive-500); }
.nb-quote__text { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--text-primary); text-wrap: balance; }
.nb-quote__cite { display: flex; flex-direction: column; gap: 2px; }
.nb-quote__name { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text-primary); }
.nb-quote__role { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); }

/* ---------- Data readout ----------------------------------- */
.nb-readout { display: inline-flex; align-items: baseline; gap: 0.5em; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.02em; }
.nb-readout__label { color: var(--text-muted); text-transform: uppercase; }
.nb-readout__value { color: var(--text-primary); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.nb-readout--accent .nb-readout__value { color: var(--text-accent); }

/* ---------- Field ------------------------------------------ */
.nb-field { display: flex; flex-direction: column; gap: var(--space-2); }
.nb-field__label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-secondary); }
.nb-field__input {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.75rem;
  transition: var(--transition-colors);
  width: 100%;
}
.nb-field__input::placeholder { color: var(--text-muted); }
.nb-field__input:focus { outline: none; border-color: var(--olive-700); box-shadow: var(--ring); }
[data-theme="dark"] .nb-field__input:focus { border-color: var(--olive-500); }
.nb-field__help { font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); }
.nb-field--error .nb-field__input { border-color: var(--stone-600); }
.nb-field--error .nb-field__help { color: var(--stone-700); }


/* Nebli corporate site — layout only. Brand visuals come from styles.css
   (tokens + utilities) and the design-system components. */

.site { min-height: 100vh; background: var(--surface-page); color: var(--text-primary); }

/* ---- Header ---------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface-page) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--container-xl); margin: 0 auto;
  padding: 16px var(--space-8);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
}
.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav__link {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-secondary); text-decoration: none; padding: 6px 2px; cursor: pointer;
  border: 0; background: none; letter-spacing: 0.01em; position: relative;
  transition: var(--transition-colors);
}
.site-nav__link:hover { color: var(--text-primary); }
.site-nav__link[aria-current="true"] { color: var(--text-primary); }
.site-nav__link[aria-current="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -17px; height: 2px; background: var(--olive-500);
}
.site-header__actions { display: flex; align-items: center; gap: var(--space-4); }
.lang-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.lang-toggle button {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; padding: 5px 9px;
  background: transparent; border: 0; color: var(--text-muted); cursor: pointer; transition: var(--transition-colors);
}
.lang-toggle button[aria-pressed="true"] { background: var(--ink-900); color: var(--cream-100); }

/* ---- Brand falcon lockup (header + footer) -----------------------------
   The light-theme falcon art has dark strokes; the dark-theme art has light
   strokes. Show the variant that reads on the current surface, swapped by
   [data-theme] (set on <html> by the head auto-theme script, and literally on
   the always-dark footer). The wordmark uses --text-primary so it adapts too.
   Fixes the dark-mode header smudge; mirrors the 404.html treatment. */
.brand-falcon { height: 32px; width: auto; display: block; }
.brand-falcon--dark { display: none; }
[data-theme="dark"] .brand-falcon--light { display: none; }
[data-theme="dark"] .brand-falcon--dark { display: block; }
.site-footer .brand-falcon { height: 38px; }

/* ---- Layout primitives ----------------------------------- */
.container { max-width: var(--container-xl); margin: 0 auto; padding-left: var(--space-8); padding-right: var(--space-8); }
.container--narrow { max-width: var(--container-md); }
.section { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.section--tight { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.section--ink { background: var(--ink-900); }
.section--sunken { background: var(--surface-sunken); }
.stack { display: flex; flex-direction: column; }
.measure { max-width: var(--measure-prose); }

/* ---- Hero ------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-16); align-items: center; }
.hero__title { font: var(--title-display); font-size: clamp(2rem, 4.4vw, 3.25rem); letter-spacing: var(--tracking-tighter); margin-top: var(--space-5); }
.hero__lead { font: var(--body-lead); font-size: var(--text-lg); color: var(--text-secondary); margin-top: var(--space-6); max-width: 46ch; }
.hero__actions { display: flex; gap: var(--space-3); margin-top: var(--space-8); flex-wrap: wrap; }
.hero__visual { position: relative; display: flex; align-items: center; justify-content: center; }
.hero__frame {
  background: var(--cream-50); border: var(--border-ink); border-radius: var(--radius-sm);
  box-shadow: var(--offset-olive-lg); padding: var(--space-10);
  display: flex; align-items: center; justify-content: center; width: 100%;
}
.hero__readout { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: var(--space-4); background: var(--ink-900); color: var(--cream-100);
  padding: 8px 16px; border-radius: var(--radius-sm); white-space: nowrap; box-shadow: var(--shadow-md); }
.hero__readout .nb-readout__label { color: rgba(236,236,239,0.55); }
.hero__readout .nb-readout__value { color: var(--cream-100); }

/* ---- Feature grid ---------------------------------------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-10); align-items: center; }
.feature { display: flex; flex-direction: column; gap: var(--space-3); }
.feature__head { display: flex; align-items: center; gap: var(--space-3); }
.feature__title { font: var(--title-h5); }
.feature__body { color: var(--text-secondary); font: var(--body-base); }

/* ---- Metrics --------------------------------------------- */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.metrics--ink .nb-stat__value { color: var(--cream-100); }
.metrics--ink .nb-stat__label { color: rgba(236,236,239,0.6); }

/* ---- CTA band -------------------------------------------- */
.cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-10); flex-wrap: wrap; }
.cta__title { font: var(--title-h2); color: var(--cream-100); letter-spacing: var(--tracking-tight); }

/* ---- Section heading ------------------------------------- */
.sec-head { display: flex; flex-direction: column; gap: var(--space-4); }
.sec-head__title { font: var(--title-h2); letter-spacing: var(--tracking-tight); }

/* ---- Footer ---------------------------------------------- */
.site-footer { background: var(--dark-900); color: var(--dark-fg); padding-top: var(--space-20); padding-bottom: var(--space-10); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr; gap: var(--space-10); }
.foot-col { display: flex; flex-direction: column; gap: var(--space-3); }
.foot-col__h { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--dark-fg-muted); margin-bottom: 4px; }
.foot-link { font-family: var(--font-body); font-size: var(--text-sm); color: var(--dark-fg); text-decoration: none; opacity: 0.82; transition: opacity var(--duration-fast) var(--ease-standard); }
.foot-link:hover { opacity: 1; }
.site-footer__base { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--dark-line); flex-wrap: wrap; }
.foot-meta { font-family: var(--font-mono); font-size: 11px; color: var(--dark-fg-muted); letter-spacing: 0.03em; }

/* ---- Legal pages ----------------------------------------- */
.legal-page { background: var(--surface-page); color: var(--text-primary); min-height: 100vh; font-family: var(--font-body); }
.legal-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-8); background: color-mix(in srgb, var(--surface-page) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.legal-brand { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-primary); text-decoration: none; }
.legal-brand .n { color: var(--text-accent); }
.legal-back { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-decoration: none; letter-spacing: 0.03em; white-space: nowrap; }
.legal-back:hover { color: var(--text-primary); }
.legal { max-width: 760px; margin: 0 auto; padding: var(--space-16) var(--space-8) var(--space-24); }
.legal__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-accent); }
.legal__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.02em; margin: var(--space-3) 0 0; }
.legal__meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin: var(--space-3) 0 0; }
.legal__note { margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--line-strong); border-left-width: 3px; border-left-color: var(--olive-500); border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.legal__body { margin-top: var(--space-10); }
.legal__body h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--text-primary); margin: var(--space-10) 0 var(--space-3); }
.legal__body h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text-primary); margin: var(--space-6) 0 var(--space-2); }
.legal__body p, .legal__body li { font-size: 15.5px; line-height: 1.65; color: var(--text-secondary); }
.legal__body p { margin: 0 0 var(--space-3); }
.legal__body ul { margin: 0 0 var(--space-4); padding-left: 1.2em; }
.legal__body li { margin: 0 0 var(--space-2); }
.legal__body a { color: var(--text-accent); }
.legal-foot { border-top: 1px solid var(--line); margin-top: var(--space-8); padding: var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.03em; }
.legal-foot a { color: var(--text-muted); text-decoration: none; }
.legal-foot a:hover { color: var(--text-primary); }

/* ---- Content pages (Company) ----------------------------- */
.page { max-width: 1040px; margin: 0 auto; padding: var(--space-16) var(--space-8) var(--space-16); }
.page__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-accent); }
.page__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.025em; line-height: 1.04; margin: var(--space-3) 0 0; }
.page__lead { font-size: 1.15rem; line-height: 1.6; color: var(--text-secondary); margin: var(--space-5) 0 0; }
.page__section { margin-top: var(--space-16); }
.page__section-h { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 var(--space-6); }
.page-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.info-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--surface-raised); display: flex; flex-direction: column; gap: var(--space-2); }
.info-card__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.info-card__h { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--text-primary); }
.info-card__b { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }
.info-card a { color: var(--text-accent); text-decoration: none; }
.info-card a:hover { text-decoration: underline; }
.prose p { font-size: 16px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 var(--space-4); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text-primary); font-weight: 600; }
.roles { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.role-row { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.role-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.role-row__title { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--text-primary); }
.role-row__meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.03em; }
.role-row__scope { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); max-width: 62ch; }
.page-cta { background: var(--olive-500); border-radius: var(--radius-lg); padding: var(--space-12); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; margin-top: var(--space-16); }
.page-cta__t { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.01em; color: var(--ink-900); max-width: 22ch; line-height: 1.1; }
.page-cta__link { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--ink-900); text-decoration: none; border: 2px solid var(--ink-900); border-radius: var(--radius-md); padding: 11px 20px; background: transparent; transition: var(--transition-colors); white-space: nowrap; }
.page-cta__link:hover { background: var(--ink-900); color: var(--olive-500); }

/* ---- Footer coming-soon tag ------------------------------ */
.foot-soon { margin-left: 8px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--olive-400); border: 1px solid color-mix(in oklab, var(--olive-400) 45%, transparent); border-radius: 3px; padding: 1px 5px; vertical-align: middle; white-space: nowrap; }

/* ---- Responsive ------------------------------------------ */
@media (max-width: 900px) {
  .hero, .grid-2 { grid-template-columns: 1fr; }
  .grid-3, .metrics { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-nav { display: none; }
}