/* novuskey.css: "secure lab" identity: graphite + steel-cyan, geometric sans +
   mono labels, precise/architectural. Theme-aware (light + dark). */
:root {
  --nk-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nk-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --nk-bg: #eef1f5;
  --nk-surface: #ffffff;
  --nk-surface-2: #f5f8fb;
  --nk-border: #d3dae3;
  --nk-text: #10151d;
  --nk-muted: #55606f;
  --nk-faint: #8a94a3;
  --nk-accent: #0d7794;
  --nk-accent-ink: #0a5e76;
  --nk-grid: rgba(13,119,148,.07);
  --nk-glow: rgba(13,119,148,.16);
  --nk-shadow: 0 1px 2px rgba(16,21,29,.04), 0 8px 24px rgba(16,21,29,.05);
  --nk-shadow-lg: 0 1px 2px rgba(16,21,29,.05), 0 24px 60px rgba(16,21,29,.10);
  --nk-radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --nk-bg: #0b0e13; --nk-surface: #12161d; --nk-surface-2: #171c25; --nk-border: #262d38;
    --nk-text: #e5eaf1; --nk-muted: #96a1b1; --nk-faint: #667081;
    --nk-accent: #38bdf8; --nk-accent-ink: #7dd3fc; --nk-grid: rgba(56,189,248,.06); --nk-glow: rgba(56,189,248,.15);
    --nk-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5);
    --nk-shadow-lg: 0 1px 2px rgba(0,0,0,.45), 0 24px 70px rgba(0,0,0,.55);
  }
}
:root[data-theme="light"] { --nk-bg:#eef1f5; --nk-surface:#fff; --nk-surface-2:#f5f8fb; --nk-border:#d3dae3; --nk-text:#10151d; --nk-muted:#55606f; --nk-faint:#8a94a3; --nk-accent:#0d7794; --nk-accent-ink:#0a5e76; --nk-grid:rgba(13,119,148,.07); --nk-glow:rgba(13,119,148,.16); }
:root[data-theme="dark"] { --nk-bg:#0b0e13; --nk-surface:#12161d; --nk-surface-2:#171c25; --nk-border:#262d38; --nk-text:#e5eaf1; --nk-muted:#96a1b1; --nk-faint:#667081; --nk-accent:#38bdf8; --nk-accent-ink:#7dd3fc; --nk-grid:rgba(56,189,248,.06); --nk-glow:rgba(56,189,248,.15); }

body { font-family: var(--nk-sans); background: var(--nk-bg); color: var(--nk-text); }
/* soft accent glow anchored top-left/top-right, sits behind everything as texture */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vw 30vw at 12% -4%, var(--nk-glow), transparent 70%),
    radial-gradient(30vw 26vw at 92% 2%, var(--nk-glow), transparent 72%);
  opacity: .9;
}

/* ---- header ---- */
.nk-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--nk-bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--nk-border); }
.nk-header .container { display: flex; align-items: stretch; justify-content: space-between; height: 62px; gap: 20px; }
/* .nk-brand and .nk-nav a stretch to the full 62px header height (well over the 44px tap-target
   minimum) and center their own content, so mobile tap targets stay comfortable. */
.nk-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; letter-spacing: -.01em; font-size: 17px; text-decoration: none; }
.nk-brand b { color: var(--nk-text); } .nk-brand span { color: var(--nk-accent); }
.nk-brand .mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; align-self: center; flex-shrink: 0; }
.nk-brand .mark img { width: 100%; height: 100%; object-fit: contain; }
/* Real keyhole-diamond mark, theme-swapped the same way the color tokens are. */
.nk-brand .mark .mark-dark { display: none; }
@media (prefers-color-scheme: dark) { .nk-brand .mark .mark-light { display: none; } .nk-brand .mark .mark-dark { display: inline; } }
:root[data-theme="light"] .nk-brand .mark .mark-light { display: inline; }
:root[data-theme="light"] .nk-brand .mark .mark-dark { display: none; }
:root[data-theme="dark"] .nk-brand .mark .mark-light { display: none; }
:root[data-theme="dark"] .nk-brand .mark .mark-dark { display: inline; }
.nk-nav { display: flex; align-items: stretch; gap: 26px; font-size: 14.5px; }
.nk-nav a { display: inline-flex; align-items: center; color: var(--nk-muted); text-decoration: none; }
.nk-nav a:hover, .nk-nav a[aria-current] { color: var(--nk-text); }
.nk-nav-toggle { display: none; }

/* mobile hamburger */
.nk-menu-btn { display: none; align-items: center; justify-content: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--nk-border); border-radius: 8px; background: var(--nk-surface); color: var(--nk-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.nk-menu-btn .bars { display: inline-grid; gap: 3px; }
.nk-menu-btn .bars span { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
@media (max-width: 640px) {
  .nk-header .container { align-items: center; }
  .nk-menu-btn { display: inline-flex; }
  .nk-nav {
    position: absolute; left: 12px; right: 12px; top: 60px; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px; background: var(--nk-surface); border: 1px solid var(--nk-border); border-radius: 14px; box-shadow: var(--nk-shadow-lg);
    transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
    /* visibility flips to hidden only after the fade-out finishes, so closed links leave the tab
       order without clipping the transition; opening flips visibility back immediately. */
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .nk-nav a { min-height: 44px; padding: 0 12px; border-radius: 8px; }
  .nk-nav a:hover, .nk-nav a[aria-current] { background: var(--nk-surface-2); }
  .nav-open .nk-nav { transform: none; opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s; }
}

/* ---- primitives ---- */
.nk-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--nk-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--nk-accent); font-weight: 600; }
.nk-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .65; }
.nk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px; min-height: 44px; padding: 11px 20px; border-radius: 8px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, background .15s ease, box-shadow .15s ease; }
/* Light theme: #0d7794 accent clears ~3.69:1 with dark text (fails AA). White text on that accent is
   ~5.14:1 (passes). Dark theme's brighter accent (#38bdf8) needs the opposite: white text is only
   ~2.14:1, dark text is ~8.86:1, so the two themes intentionally use different button text colors. */
.nk-btn-primary { background: var(--nk-accent); color: #fff; }
@media (prefers-color-scheme: dark) { .nk-btn-primary { color: #04121a; } }
:root[data-theme="dark"] .nk-btn-primary { color: #04121a; }
:root[data-theme="light"] .nk-btn-primary { color: #fff; }
/* The global :focus-visible ring (base.css) uses currentColor, which is the button's own text
   color (#fff light / #04121a dark) sitting on the page background just outside the button
   (outline-offset: 3px). That is near-invisible: white-on-#eef1f5 and near-black-on-#0b0e13 both
   fail 1.4.11. --nk-text is the page's own body-text color, so it always reads >=14:1 against
   nk-bg/nk-surface in both themes. */
.nk-btn-primary:focus-visible { outline-color: var(--nk-text); }
.nk-btn-ghost { border-color: var(--nk-border); color: var(--nk-text); background: var(--nk-surface); }
.nk-btn .arrow { transition: transform .15s ease; }
@media (prefers-reduced-motion: no-preference) {
  .nk-btn:hover { transform: translateY(-1px); box-shadow: var(--nk-shadow); }
  .nk-btn-primary:hover { box-shadow: 0 8px 24px color-mix(in srgb, var(--nk-accent) 44%, transparent); }
  .nk-btn:hover .arrow { transform: translateX(3px); }
}
.nk-section { padding-block: clamp(56px, 9vw, 104px); }
.nk-lede { font-size: clamp(16px, 2vw, 19px); color: var(--nk-muted); max-width: 60ch; }

/* ---- hero (blueprint grid + panel) ---- */
.nk-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--nk-border); background:
  linear-gradient(var(--nk-grid) 1px, transparent 1px) 0 0 / 100% 34px,
  linear-gradient(90deg, var(--nk-grid) 1px, transparent 1px) 0 0 / 34px 100%,
  transparent; }
.nk-hero .container { padding-block: clamp(56px, 10vw, 116px); position: relative; }
.nk-hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(300px,.95fr); gap: clamp(36px, 6vw, 76px); align-items: center; }
@media (max-width: 900px) { .nk-hero-grid { grid-template-columns: 1fr; } }
.nk-hero h1 { font-size: clamp(34px, 6.2vw, 60px); letter-spacing: -.03em; max-width: 15ch; margin-top: 16px; }
.nk-hero h1 em { font-style: normal; color: var(--nk-accent); }
.nk-hero .nk-lede { margin-top: 20px; }
.nk-hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* signal pills */
.nk-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.nk-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid var(--nk-border); border-radius: 999px; background: color-mix(in srgb, var(--nk-surface) 70%, transparent); color: var(--nk-muted); font-size: 13px; font-weight: 600; }
.nk-pill::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--nk-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nk-accent) 16%, transparent); }

/* ---- private data path panel ---- */
.nk-panel { position: relative; background: linear-gradient(180deg, var(--nk-surface), var(--nk-surface-2)); border: 1px solid var(--nk-border); border-radius: 20px; padding: 20px; box-shadow: var(--nk-shadow-lg), 0 0 50px var(--nk-glow); overflow: hidden; isolation: isolate; }
.nk-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .7;
  background: linear-gradient(var(--nk-grid) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, var(--nk-grid) 1px, transparent 1px) 0 0 / 22px 22px; }
.nk-panel::after { content: ""; position: absolute; z-index: -1; width: 160px; height: 160px; right: -50px; top: -46px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--nk-accent) 24%, transparent), transparent 70%); }
.nk-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.nk-dots { display: flex; gap: 7px; }
.nk-dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--nk-border); }
.nk-panel-label { font-family: var(--nk-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--nk-accent); }
.nk-flow { display: grid; gap: 12px; }
.nk-flow-row { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center; padding: 15px; border-radius: 14px; border: 1px solid var(--nk-border); background: color-mix(in srgb, var(--nk-surface) 85%, transparent); transition: border-color .15s ease, box-shadow .15s ease; }
.nk-flow-row .step { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--nk-border); background: var(--nk-surface-2); transition: box-shadow .2s ease, border-color .2s ease; }
@media (prefers-reduced-motion: no-preference) {
  .nk-flow-row:hover { border-color: color-mix(in srgb, var(--nk-accent) 34%, var(--nk-border)); box-shadow: 0 8px 24px var(--nk-glow); }
  .nk-flow-row:hover .step { border-color: var(--nk-accent); box-shadow: 0 0 0 4px var(--nk-glow); }
}
.nk-flow-row .step::before { content: ""; width: 11px; height: 11px; border: 2px solid var(--nk-accent); border-radius: 2px; transform: rotate(45deg); }
.nk-flow-row p { color: var(--nk-muted); font-size: 13.5px; margin: 0; }
.nk-flow-row .fl-t { font-size: 15.5px; font-weight: 600; margin: 0 0 2px; letter-spacing: -.01em; color: var(--nk-text); }
.nk-flow-row:not(:last-child)::after { content: ""; position: absolute; left: 35px; bottom: -13px; width: 1px; height: 14px; background: var(--nk-accent); opacity: .5; }
.nk-orbit { position: absolute; z-index: -1; width: 140px; height: 140px; right: -30px; bottom: -36px; border: 1px dashed color-mix(in srgb, var(--nk-accent) 36%, transparent); border-radius: 50%; }
.nk-orbit::before, .nk-orbit::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 999px; background: var(--nk-accent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--nk-accent) 12%, transparent); }
.nk-orbit::before { left: 20px; top: 12px; } .nk-orbit::after { right: 16px; bottom: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .nk-orbit { animation: nk-spin 24s linear infinite; }
  .nk-panel.float { animation: nk-float 8s ease-in-out infinite; }
}
@keyframes nk-spin { to { transform: rotate(360deg); } }
@keyframes nk-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---- stat strip ---- */
.nk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.nk-stat { padding: 18px; border-radius: 14px; background: color-mix(in srgb, var(--nk-surface) 80%, transparent); border: 1px solid var(--nk-border); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
@media (prefers-reduced-motion: no-preference) {
  .nk-stat:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--nk-accent) 36%, var(--nk-border)); box-shadow: var(--nk-shadow), 0 8px 22px var(--nk-glow); }
}
.nk-stat strong { display: block; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.03em; }
.nk-stat span { color: var(--nk-muted); font-size: 13px; font-weight: 600; }
@media (max-width: 720px) { .nk-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---- section heading ---- */
.nk-h2 { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.02em; margin: 12px 0 0; }
.nk-section-head { max-width: 62ch; }

/* ---- feature grid ---- */
.nk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.nk-card { position: relative; background: var(--nk-surface); border: 1px solid var(--nk-border); border-radius: var(--nk-radius); padding: 24px; box-shadow: var(--nk-shadow); display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
@media (prefers-reduced-motion: no-preference) {
  .nk-card.lift:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--nk-accent) 40%, var(--nk-border)); box-shadow: var(--nk-shadow), 0 14px 34px var(--nk-glow); }
  .nk-card.lift:hover .mark-sm { box-shadow: 0 0 0 5px var(--nk-glow); }
}
.nk-card .mark-sm { width: 12px; height: 12px; border: 2px solid var(--nk-accent); border-radius: 2px; transform: rotate(45deg); margin-bottom: 16px; transition: box-shadow .2s ease; }
.nk-card .idx { font-family: var(--nk-mono); font-size: 12px; color: var(--nk-accent); letter-spacing: .1em; }
.nk-card h2, .nk-card h3 { font-size: 18px; margin: 10px 0 8px; letter-spacing: -.01em; }
.nk-card .mark-sm + h3 { margin-top: 0; }
.nk-card p { color: var(--nk-muted); font-size: 14.5px; }
.nk-card-cta { margin-top: auto; padding-top: 14px; }

/* ---- data / trust map ---- */
.nk-map { position: relative; border-radius: 20px; border: 1px solid var(--nk-border); background: color-mix(in srgb, var(--nk-surface) 82%, transparent); box-shadow: var(--nk-shadow); padding: clamp(22px, 4vw, 38px); overflow: hidden; margin-top: 30px; }
.nk-map::before { content: ""; position: absolute; inset: 0; opacity: .7; background: linear-gradient(var(--nk-grid) 1px, transparent 1px) 0 0 / 26px 26px, linear-gradient(90deg, var(--nk-grid) 1px, transparent 1px) 0 0 / 26px 26px; }
.nk-map-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .nk-map-grid { grid-template-columns: 1fr; } }
.nk-node { position: relative; padding: 22px; border-radius: 14px; background: var(--nk-surface); border: 1px solid var(--nk-border); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
@media (prefers-reduced-motion: no-preference) {
  .nk-node:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--nk-accent) 36%, var(--nk-border)); box-shadow: var(--nk-shadow), 0 12px 30px var(--nk-glow); }
}
.nk-node .label { font-family: var(--nk-mono); color: var(--nk-accent); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.nk-node strong { display: block; font-size: 18px; margin: 10px 0 8px; letter-spacing: -.01em; }
.nk-node p { color: var(--nk-muted); font-size: 14px; }
.nk-node:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--nk-accent); font-weight: 700; z-index: 1; }
@media (max-width: 820px) { .nk-node:not(:last-child)::after { right: 50%; top: auto; bottom: -20px; transform: translateX(50%) rotate(90deg); } }

/* ---- principles ---- */
.nk-principles { display: grid; gap: 0; border-top: 1px solid var(--nk-border); margin-top: 28px; }
.nk-principles > div { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--nk-border); }
.nk-principles dt { font-family: var(--nk-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--nk-text); }
.nk-principles dd { margin: 0; color: var(--nk-muted); font-size: 15px; }
@media (max-width: 560px) { .nk-principles > div { grid-template-columns: 1fr; gap: 6px; } }

/* ---- product callout (Nibhaus teaser, secure-lab styled, full border, no side stripe) ---- */
.nk-callout { position: relative; background: linear-gradient(180deg, var(--nk-surface), var(--nk-surface-2)); border: 1px solid var(--nk-border); border-radius: 16px; padding: clamp(26px,4vw,44px); display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; box-shadow: var(--nk-shadow-lg); overflow: hidden; }
.nk-callout::before { content: ""; position: absolute; inset: 0; opacity: .5; background: linear-gradient(var(--nk-grid) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--nk-grid) 1px, transparent 1px) 0 0 / 24px 24px; }
.nk-callout > * { position: relative; }
.nk-callout .tag { font-family: var(--nk-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--nk-accent); }
.nk-callout h3 { font-size: 24px; letter-spacing: -.01em; margin-top: 8px; }
.nk-callout p { color: var(--nk-muted); margin-top: 8px; max-width: 52ch; }
@media (max-width: 680px) { .nk-callout { grid-template-columns: 1fr; } }

/* ---- CTA band ----
   The fill is a fixed deep-cyan gradient (#0a5e76 to #0d7794) in both themes, not the theme
   accent tokens. White text on that range stays at 5.14:1 or better, so it passes AA in light
   and dark. Buttons on the band flip to white fill with dark-cyan text. */
.nk-band { position: relative; border-radius: 18px; padding: clamp(30px,5vw,52px); background: linear-gradient(135deg, #0a5e76, #0d7794); color: #fff; box-shadow: var(--nk-shadow-lg), 0 0 48px color-mix(in srgb, var(--nk-accent) 18%, transparent); overflow: hidden; }
.nk-band h2 { font-size: clamp(24px, 3.6vw, 36px); letter-spacing: -.02em; max-width: 18ch; }
.nk-band p { margin-top: 12px; color: rgba(255,255,255,.92); max-width: 56ch; }
.nk-band .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; position: relative; z-index: 1; }
.nk-band .nk-btn-primary { background: #fff; color: #0a5e76; border-color: transparent; }
/* The default ring would use currentColor (#0a5e76), the same dark-cyan family as the band's own
   gradient fill (#0a5e76 to #0d7794), so it would nearly disappear against the band. White reads
   5.14:1 (against #0d7794) to 7.30:1 (against #0a5e76). The box-shadow adds a soft halo behind the
   ring for extra separation on the saturated fill. */
.nk-band .nk-btn-primary:focus-visible { outline-color: #fff; outline-offset: 4px; box-shadow: 0 0 0 8px rgba(255,255,255,.22); }
.nk-band .nk-btn-ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.nk-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); transform: translateX(-100%); }
@media (prefers-reduced-motion: no-preference) { .nk-band::after { animation: nk-scan 7s ease-in-out infinite; } }
@keyframes nk-scan { 0%,45% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ---- prose (legal / markdown pages) ---- */
.nk-prose { max-width: 720px; }
.nk-prose h1 { font-size: clamp(28px, 4vw, 38px); letter-spacing: -.02em; margin-bottom: 8px; }
.nk-prose h2 { font-size: 20px; margin: 34px 0 10px; letter-spacing: -.01em; padding-bottom: 6px; border-bottom: 1px solid var(--nk-border); }
.nk-prose p, .nk-prose li { color: var(--nk-text); font-size: 15.5px; line-height: 1.7; }
.nk-prose p, .nk-prose ul { margin-top: 12px; }
.nk-prose ul { padding-left: 22px; } .nk-prose li { margin-top: 6px; }
.nk-prose em { color: var(--nk-muted); }
.nk-prose a { color: var(--nk-accent); }
.nk-prose strong { color: var(--nk-text); }

/* ---- footer ---- */
.nk-footer { position: relative; border-top: 1px solid var(--nk-border); background: var(--nk-surface-2); margin-top: auto; }
.nk-footer .container { padding-block: 40px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.nk-footer .fnav { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; }
.nk-footer a { color: var(--nk-muted); text-decoration: none; }
.nk-footer a:hover { color: var(--nk-text); }
.nk-footer small { color: var(--nk-muted); font-size: 13px; }

/* ---- entrance stagger: cards in a grid reveal in sequence.
   Only ever applies to motion-welcome visitors (the .js-anim hook is added by the first-party
   script solely when prefers-reduced-motion is not set), so reduced-motion users are unaffected. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .nk-grid > .reveal:nth-child(2), .js-anim .nk-map-grid > .reveal:nth-child(2) { transition-delay: .07s; }
  .js-anim .nk-grid > .reveal:nth-child(3), .js-anim .nk-map-grid > .reveal:nth-child(3) { transition-delay: .14s; }
  .js-anim .nk-grid > .reveal:nth-child(4) { transition-delay: .21s; }
}