/* ==========================================================================
   NORTHKEEPERS — Design System
   Youth mentoring. Cinematic, minimal, premium.

   Contents
   01. Tokens
   02. Reset & base
   03. Typography
   04. Layout primitives
   05. Atmosphere (grain, glow, horizon, coordinates)
   06. Header & navigation
   07. Buttons & links
   08. Hero
   09. Sections & statements
   10. Components (cards, steps, list, quote, meta grid, compass)
   11. Forms
   12. Footer
   13. Motion & reveals
   14. Utilities
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* Brand palette */
  --nk-navy:        #07111F;  /* main background */
  --nk-slate:       #14202E;  /* secondary sections, depth */
  --nk-ivory:       #F2EEE6;  /* primary type */
  --nk-amber:       #D99A2B;  /* signal in the darkness — use sparingly */
  --nk-steel:       #6F8798;  /* secondary type, subtle detail */

  /* Derived surfaces */
  --nk-navy-deep:   #050C15;
  --nk-slate-lift:  #1A2836;
  --nk-line:        rgba(242, 238, 230, 0.10);
  --nk-line-strong: rgba(242, 238, 230, 0.20);
  --nk-amber-soft:  rgba(217, 154, 43, 0.14);
  --nk-amber-glow:  rgba(217, 154, 43, 0.30);

  /* Type roles */
  --nk-text:        var(--nk-ivory);
  --nk-text-body:   rgba(242, 238, 230, 0.76);
  --nk-text-mute:   var(--nk-steel);

  /* Type families */
  --nk-font-display: "Inter Tight", -apple-system, BlinkMacSystemFont,
                     "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --nk-font-body:    "Inter", -apple-system, BlinkMacSystemFont,
                     "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --nk-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                     "Roboto Mono", monospace;

  /* Fluid type scale */
  --nk-size-micro:   clamp(0.625rem, 0.60rem + 0.10vw, 0.6875rem);
  --nk-size-eyebrow: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
  --nk-size-body:    clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --nk-size-lead:    clamp(1.125rem, 1.02rem + 0.55vw, 1.5rem);

  /* Floor and slope are set by the longest unbreakable word in the brand —
     "NORTHKEEPERS." is ~7.4em of uppercase Inter Tight and must fit inside the
     gutters at 320px without overflowing. Don't raise the minimum. */
  --nk-display-xl:   clamp(2.35rem, 0.60rem + 9vw, 9.5rem);
  --nk-display-lg:   clamp(2.35rem, 1.20rem + 5.4vw, 6rem);
  --nk-display-md:   clamp(1.85rem, 1.25rem + 2.8vw, 3.4rem);
  --nk-display-sm:   clamp(1.3rem, 1.10rem + 0.9vw, 1.75rem);

  /* Spacing */
  --nk-space-3xs: 0.25rem;
  --nk-space-2xs: 0.5rem;
  --nk-space-xs:  0.75rem;
  --nk-space-s:   1rem;
  --nk-space-m:   1.5rem;
  --nk-space-l:   2.5rem;
  --nk-space-xl:  4rem;
  --nk-space-2xl: clamp(4rem, 3rem + 5vw, 8rem);
  --nk-space-3xl: clamp(5.5rem, 3.5rem + 8vw, 12rem);

  /* Structure */
  --nk-shell:     78rem;
  --nk-shell-narrow: 52rem;
  --nk-gutter:    clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --nk-header-h:  clamp(4.25rem, 4rem + 1.5vw, 5.5rem);

  /* Motion */
  --nk-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --nk-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --nk-dur:       0.5s;
  --nk-dur-slow:  0.9s;
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

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

* { margin: 0; }

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

body {
  background-color: var(--nk-navy);
  color: var(--nk-text);
  font-family: var(--nk-font-body);
  font-size: var(--nk-size-body);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.nk-nav-open { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
svg { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { list-style: none; padding: 0; }

:target { scroll-margin-top: calc(var(--nk-header-h) + 2rem); }

/* Visible, on-brand focus for keyboard users */
:focus-visible {
  outline: 2px solid var(--nk-amber);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--nk-amber);
  color: var(--nk-navy);
}

.nk-skip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -110%);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--nk-amber);
  color: var(--nk-navy);
  font: 600 var(--nk-size-eyebrow)/1 var(--nk-font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.25s var(--nk-ease);
}
.nk-skip:focus { transform: translate(-50%, 0); }


/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */

.nk-display,
.nk-display-lg,
.nk-display-md,
.nk-display-sm {
  font-family: var(--nk-font-display);
  font-weight: 800;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--nk-ivory);
}

/* Movie-poster scale: tight leading, negative tracking, no orphan drift. */
.nk-display {
  font-size: var(--nk-display-xl);
  line-height: 0.88;
  letter-spacing: -0.035em;
}

.nk-display-lg {
  font-size: var(--nk-display-lg);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

.nk-display-md {
  font-size: var(--nk-display-md);
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.nk-display-sm {
  font-size: var(--nk-display-sm);
  line-height: 1.15;
  letter-spacing: -0.005em;
  font-weight: 700;
}

/* Eyebrow — a small signal above a large statement. */
.nk-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--nk-font-display);
  font-size: var(--nk-size-eyebrow);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--nk-steel);
  margin-bottom: var(--nk-space-m);
}
.nk-eyebrow::before {
  content: "";
  width: clamp(1.5rem, 3vw, 2.75rem);
  height: 1px;
  background: var(--nk-amber);
  flex: none;
}
.nk-eyebrow--center { justify-content: center; }
.nk-eyebrow--center::after {
  content: "";
  width: clamp(1.5rem, 3vw, 2.75rem);
  height: 1px;
  background: var(--nk-amber);
  flex: none;
}
.nk-eyebrow--plain::before { display: none; }

/* Lead paragraph */
.nk-lead {
  font-size: var(--nk-size-lead);
  line-height: 1.5;
  color: var(--nk-text-body);
  max-width: 34ch;
  text-wrap: pretty;
}
.nk-lead--wide { max-width: 46ch; }

.nk-body { color: var(--nk-text-body); max-width: 62ch; text-wrap: pretty; }
.nk-body + .nk-body { margin-top: var(--nk-space-s); }
.nk-body strong { color: var(--nk-ivory); font-weight: 600; }

.nk-mono {
  font-family: var(--nk-font-mono);
  font-size: var(--nk-size-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nk-steel);
}

.nk-amber { color: var(--nk-amber); }
.nk-dim   { color: var(--nk-text-mute); }

/* De-emphasised second line of a two-line statement. */
.nk-outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 238, 230, 0.42);
  paint-order: stroke fill;
}


/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */

.nk-shell {
  width: 100%;
  max-width: var(--nk-shell);
  margin-inline: auto;
  padding-inline: var(--nk-gutter);
}
.nk-shell--narrow { max-width: var(--nk-shell-narrow); }
.nk-shell--wide   { max-width: 92rem; }

.nk-section {
  position: relative;
  padding-block: var(--nk-space-3xl);
  overflow: clip;
}
.nk-section--tight { padding-block: var(--nk-space-2xl); }
.nk-section--slate { background: var(--nk-slate); }
.nk-section--deep  { background: var(--nk-navy-deep); }

/* Two-column editorial split: sticky heading, scrolling detail. */
.nk-split {
  display: grid;
  gap: var(--nk-space-xl) var(--nk-space-2xl);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 62rem) {
  .nk-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
  .nk-split--even { grid-template-columns: 1fr 1fr; }
  .nk-split__sticky { position: sticky; top: calc(var(--nk-header-h) + 3rem); }
}

.nk-stack > * + * { margin-top: var(--nk-space-m); }
.nk-stack-s > * + * { margin-top: var(--nk-space-s); }
.nk-stack-l > * + * { margin-top: var(--nk-space-l); }

.nk-center { text-align: center; }
.nk-center .nk-lead,
.nk-center .nk-body { margin-inline: auto; }


/* ==========================================================================
   05. ATMOSPHERE
   Grain, drifting glow, horizon lines, coordinate marks.
   All decorative, all aria-hidden, all cheap to composite.
   ========================================================================== */

/* Film grain — one fixed layer over the whole document. */
.nk-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Vignette — scoped to a cinematic band, never over body copy, so it can
   never eat text contrast. Drop it inside .nk-hero / .nk-statement / .nk-cta. */
.nk-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(115% 80% at 50% 45%,
    transparent 45%, rgba(3, 8, 14, 0.62) 100%);
}

/* Slow-moving atmospheric light. Transform/opacity only. */
.nk-aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
  will-change: transform;
}
.nk-aura--amber {
  background: radial-gradient(circle, var(--nk-amber-glow) 0%, transparent 70%);
  animation: nk-drift 26s var(--nk-ease) infinite alternate;
}
.nk-aura--steel {
  background: radial-gradient(circle, rgba(111, 135, 152, 0.22) 0%, transparent 70%);
  animation: nk-drift 34s var(--nk-ease) infinite alternate-reverse;
}

@keyframes nk-drift {
  from { transform: translate3d(-4%, 3%, 0) scale(1); }
  to   { transform: translate3d(5%, -4%, 0) scale(1.14); }
}

/* Horizon — a distant line of light. Draws itself in on reveal. */
.nk-horizon {
  position: relative;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg,
    transparent, var(--nk-line-strong) 22%, var(--nk-amber) 50%,
    var(--nk-line-strong) 78%, transparent);
  transform: scaleX(0.12);
  opacity: 0;
  transform-origin: center;
  transition: transform 1.4s var(--nk-ease-out), opacity 0.8s var(--nk-ease);
}
.nk-horizon.is-visible { transform: scaleX(1); opacity: 0.75; }

/* Thin rule used between blocks. */
.nk-rule {
  height: 1px;
  border: 0;
  background: var(--nk-line);
}

/* Coordinate marks — navigation detail in the corners of a frame. */
.nk-coords {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  font-family: var(--nk-font-mono);
  font-size: var(--nk-size-micro);
  letter-spacing: 0.2em;
  color: rgba(111, 135, 152, 0.55);
}
.nk-coords span {
  position: absolute;
  white-space: nowrap;
}
.nk-coords span::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
/* Inset from the frame edge: below the fixed header, clear of the bottom. */
.nk-coords__tl { top: calc(var(--nk-header-h) + 1.25rem); left: calc(var(--nk-gutter) + 1.75rem); }
.nk-coords__tl::before { left: -1.75rem; }
.nk-coords__br { bottom: 1.75rem; right: calc(var(--nk-gutter) + 1.75rem); }
.nk-coords__br::before { right: -1.75rem; }
@media (max-width: 48rem) { .nk-coords { display: none; } }

/* Faint directional grid — a chart, not a checkerboard. */
.nk-grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(90deg, var(--nk-line) 1px, transparent 1px),
    linear-gradient(var(--nk-line) 1px, transparent 1px);
  background-size: clamp(4rem, 9vw, 8rem) clamp(4rem, 9vw, 8rem);
  mask-image: radial-gradient(75% 70% at 50% 45%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 70% at 50% 45%, #000 0%, transparent 100%);
}

/* Scroll progress — one hairline of amber across the top of the viewport. */
.nk-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, var(--nk-amber));
  pointer-events: none;
}


/* ==========================================================================
   06. HEADER & NAVIGATION
   ========================================================================== */

.nk-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nk-header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color 0.45s var(--nk-ease),
              border-color 0.45s var(--nk-ease),
              backdrop-filter 0.45s var(--nk-ease);
}
.nk-header.is-stuck {
  background: rgba(7, 17, 31, 0.82);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-bottom-color: var(--nk-line);
}

.nk-header__inner {
  width: 100%;
  max-width: 92rem;
  margin-inline: auto;
  padding-inline: var(--nk-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-space-m);
}

/* Wordmark: compass mark + locked-up letterspacing. */
.nk-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--nk-ivory);
  flex: none;
}
.nk-wordmark__mark {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  overflow: visible;
}
.nk-wordmark__ring {
  fill: none;
  stroke: var(--nk-line-strong);
  stroke-width: 1.25;
  transition: stroke 0.4s var(--nk-ease);
}
.nk-wordmark__needle {
  fill: var(--nk-amber);
  transform-origin: 12px 12px;
  transition: transform 0.7s var(--nk-ease-out);
}
.nk-wordmark__tick { stroke: var(--nk-steel); stroke-width: 1.25; }
.nk-wordmark:hover .nk-wordmark__ring { stroke: var(--nk-amber-glow); }
.nk-wordmark:hover .nk-wordmark__needle { transform: rotate(-14deg); }

.nk-wordmark__text {
  font-family: var(--nk-font-display);
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}

/* Desktop nav */
.nk-nav { display: none; }
.nk-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.6vw, 2rem);
}
.nk-nav__link {
  position: relative;
  display: block;
  padding-block: 0.5rem;
  font-family: var(--nk-font-display);
  font-size: var(--nk-size-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nk-text-body);
  transition: color 0.3s var(--nk-ease);
  white-space: nowrap;
}
.nk-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.125rem;
  width: 100%;
  height: 1px;
  background: var(--nk-amber);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.35s var(--nk-ease-out);
}
.nk-nav__link:hover { color: var(--nk-ivory); }
.nk-nav__link:hover::after { transform: scaleX(1); }
.nk-nav__link[aria-current="page"] { color: var(--nk-ivory); }
.nk-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nk-header__actions { display: flex; align-items: center; gap: var(--nk-space-s); }
/* Scoped to .nk-header deliberately: .nk-btn sets `display: inline-flex` later
   in this stylesheet, so a single-class rule here loses on source order and the
   CTA leaks onto mobile. */
.nk-header .nk-header__cta { display: none; }

/* 68rem is the width at which six tracked-out nav labels, the wordmark and
   the CTA all fit without crowding. Keep in sync with the drawer breakpoint
   and the matchMedia query in northkeepers.js. */
@media (min-width: 68rem) {
  .nk-nav { display: block; }
  .nk-header .nk-header__cta { display: inline-flex; }
  .nk-burger { display: none; }
}

/* Burger */
.nk-burger {
  --bar: 1px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem;
  background: none;
  border: 1px solid var(--nk-line);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.3s var(--nk-ease);
}
.nk-burger:hover { border-color: var(--nk-line-strong); }
.nk-burger span {
  display: block;
  height: var(--bar);
  background: var(--nk-ivory);
  transition: transform 0.35s var(--nk-ease-out), opacity 0.2s linear;
}
.nk-burger span:nth-child(1) { width: 100%; }
.nk-burger span:nth-child(2) { width: 65%; }
.nk-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nk-burger[aria-expanded="true"] span:nth-child(2) { width: 100%; transform: translateY(-3px) rotate(-45deg); }

/* Mobile drawer */
.nk-drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nk-header-h) + 2rem) var(--nk-gutter) var(--nk-space-l);
  background: var(--nk-navy-deep);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  transition: opacity 0.4s var(--nk-ease), transform 0.5s var(--nk-ease-out),
              visibility 0.4s;
}
.nk-drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.nk-drawer__list { display: flex; flex-direction: column; }
.nk-drawer__list li { border-top: 1px solid var(--nk-line); }
.nk-drawer__list li:last-child { border-bottom: 1px solid var(--nk-line); }
.nk-drawer__link {
  display: flex;
  align-items: baseline;
  gap: var(--nk-space-s);
  padding-block: clamp(0.7rem, 1.6vh, 1.1rem);
  font-family: var(--nk-font-display);
  font-size: clamp(1.4rem, 5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nk-ivory);
  transition: color 0.3s var(--nk-ease), padding-left 0.35s var(--nk-ease-out);
}
.nk-drawer__link:hover,
.nk-drawer__link:focus-visible { color: var(--nk-amber); padding-left: 0.5rem; }
.nk-drawer__link[aria-current="page"] { color: var(--nk-amber); }
.nk-drawer__link span {
  font-family: var(--nk-font-mono);
  font-size: var(--nk-size-micro);
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--nk-steel);
}
.nk-drawer__foot { margin-top: var(--nk-space-l); }
@media (min-width: 68rem) { .nk-drawer { display: none; } }


/* ==========================================================================
   07. BUTTONS & LINKS
   ========================================================================== */

.nk-btn {
  --btn-bg: transparent;
  --btn-fg: var(--nk-ivory);
  --btn-bd: var(--nk-line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 2px;
  font-family: var(--nk-font-display);
  font-size: var(--nk-size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--nk-ease), border-color 0.35s var(--nk-ease),
              transform 0.35s var(--nk-ease-out);
}
/* Light sweeps across from the left on hover. */
.nk-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--nk-amber);
  transform: translateX(-101%);
  transition: transform 0.5s var(--nk-ease-out);
}
.nk-btn:hover { transform: translateY(-2px); }
.nk-btn:hover::before { transform: translateX(0); }
.nk-btn__arrow {
  width: 1rem;
  flex: none;
  transition: transform 0.4s var(--nk-ease-out);
}
.nk-btn:hover .nk-btn__arrow { transform: translateX(4px); }

.nk-btn--primary {
  --btn-bg: var(--nk-amber);
  --btn-fg: var(--nk-navy);
  --btn-bd: var(--nk-amber);
}
.nk-btn--primary::before { background: var(--nk-ivory); }
.nk-btn--primary:hover { color: var(--nk-navy); }

.nk-btn--ghost:hover { color: var(--nk-navy); border-color: var(--nk-amber); }

.nk-btn--quiet {
  padding-inline: 0;
  border: 0;
  border-bottom: 1px solid var(--nk-line-strong);
  border-radius: 0;
  padding-bottom: 0.5rem;
}
.nk-btn--quiet::before { display: none; }
.nk-btn--quiet:hover { color: var(--nk-amber); border-bottom-color: var(--nk-amber); }

.nk-btn--sm { padding: 0.75rem 1.25rem; }
.nk-btn--block { width: 100%; justify-content: center; }

.nk-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nk-space-s);
  align-items: center;
}
.nk-btn-row--center { justify-content: center; }

/* Inline text link */
.nk-link {
  color: var(--nk-ivory);
  text-decoration: none;
  border-bottom: 1px solid var(--nk-amber-glow);
  padding-bottom: 1px;
  transition: border-color 0.3s var(--nk-ease), color 0.3s var(--nk-ease);
}
.nk-link:hover { color: var(--nk-amber); border-bottom-color: var(--nk-amber); }


/* ==========================================================================
   08. HERO
   ========================================================================== */

.nk-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding-top: calc(var(--nk-header-h) + var(--nk-space-l));
  /* Reserves room for the scroll cue so it can never overlap the CTA row. */
  padding-bottom: clamp(6.5rem, 14vh, 9rem);
  overflow: clip;
  isolation: isolate;
}

/* Layered night sky: deep base, rising horizon light. */
.nk-hero__sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(115% 62% at 50% 108%, rgba(217, 154, 43, 0.22) 0%,
      rgba(217, 154, 43, 0.05) 34%, transparent 62%),
    radial-gradient(90% 60% at 78% 8%, rgba(111, 135, 152, 0.16) 0%, transparent 60%),
    linear-gradient(180deg, var(--nk-navy-deep) 0%, #08131F 46%, #0A1928 100%);
}
.nk-hero__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}
.nk-hero__aura-a { width: 34rem; height: 34rem; bottom: -14rem; left: -6rem; }
.nk-hero__aura-b { width: 28rem; height: 28rem; top: -10rem; right: -8rem; }

/* The distant horizon line, permanently lit in the hero. */
.nk-hero__horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(217, 154, 43, 0.45) 50%, transparent);
  opacity: 0.7;
}

.nk-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--nk-shell);
  margin-inline: auto;
  padding-inline: var(--nk-gutter);
}

.nk-hero__title { margin-bottom: var(--nk-space-m); }

/* The two brand statements, stacked and weighted differently. */
.nk-hero__line-1 { display: block; }
.nk-hero__line-2 {
  display: block;
  margin-top: 0.15em;
  font-size: clamp(1.25rem, 0.55rem + 3.1vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--nk-text-body);
}
.nk-hero__line-2 em {
  font-style: normal;
  color: var(--nk-amber);
}

.nk-hero__foot {
  display: grid;
  gap: var(--nk-space-l);
  margin-top: var(--nk-space-l);
  align-items: end;
}
@media (min-width: 52rem) {
  .nk-hero__foot { grid-template-columns: minmax(0, 1fr) auto; gap: var(--nk-space-2xl); }
}

/* Scroll cue */
.nk-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--nk-font-mono);
  font-size: var(--nk-size-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nk-steel);
  text-decoration: none;
  transition: color 0.3s var(--nk-ease);
}
.nk-scroll-cue:hover { color: var(--nk-amber); }
.nk-scroll-cue__track {
  position: relative;
  width: 1px;
  height: 3rem;
  background: var(--nk-line-strong);
  overflow: hidden;
}
.nk-scroll-cue__track::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 45%;
  background: var(--nk-amber);
  animation: nk-cue 2.4s var(--nk-ease) infinite;
}
@keyframes nk-cue {
  0%   { transform: translateY(-100%); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(240%); opacity: 0; }
}
/* On short viewports the cue is dropped, so reclaim the space reserved for it. */
@media (max-height: 44rem) {
  .nk-scroll-cue { display: none; }
  .nk-hero { padding-bottom: clamp(2.5rem, 7vh, 4rem); }
}

/* Compact page hero for interior pages */
.nk-pagehead {
  position: relative;
  padding-top: calc(var(--nk-header-h) + clamp(4rem, 11vh, 8rem));
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: clip;
  isolation: isolate;
}
.nk-pagehead__sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(217, 154, 43, 0.13) 0%, transparent 58%),
    linear-gradient(180deg, var(--nk-navy-deep) 0%, var(--nk-navy) 100%);
}
.nk-pagehead__aura { width: 26rem; height: 26rem; top: -9rem; right: -7rem; }
.nk-pagehead__title { max-width: 22ch; }
.nk-pagehead .nk-lead { margin-top: var(--nk-space-m); }


/* ==========================================================================
   09. SECTIONS & STATEMENTS
   ========================================================================== */

/* Full-bleed cinematic statement. Two lines, one amber rule between. */
.nk-statement {
  position: relative;
  padding-block: clamp(6rem, 16vh, 12rem);
  background: var(--nk-navy-deep);
  overflow: clip;
  isolation: isolate;
  text-align: center;
}
.nk-statement__aura {
  width: 42rem;
  height: 42rem;
  top: 50%;
  left: 50%;
  margin: -21rem 0 0 -21rem;
  opacity: 0.7;
}
.nk-statement__inner { position: relative; z-index: 2; }
.nk-statement__a { display: block; }
.nk-statement__b {
  display: block;
  margin-top: 0.12em;
  color: var(--nk-amber);
}
.nk-statement__divider {
  width: min(100%, 22rem);
  margin: var(--nk-space-l) auto;
}
.nk-statement .nk-body { margin-inline: auto; max-width: 48ch; }

/* Section header block */
.nk-sechead { margin-bottom: var(--nk-space-xl); }
.nk-sechead__title { max-width: 26ch; }
.nk-sechead .nk-lead { margin-top: var(--nk-space-m); }
.nk-center .nk-sechead__title { margin-inline: auto; }


/* ==========================================================================
   10. COMPONENTS
   ========================================================================== */

/* --- Card grid -----------------------------------------------------------
   Hairlines are drawn per card (right + bottom) with the container supplying
   the top and left edges. The obvious alternative — a 1px gap over a
   line-coloured container background — breaks on a partial final row, where
   the empty cells show that background as a large light block. */
.nk-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--nk-line);
  border-left: 1px solid var(--nk-line);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .nk-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 40rem) { .nk-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .nk-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40rem) { .nk-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .nk-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.nk-card {
  position: relative;
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  background: transparent;
  border-right: 1px solid var(--nk-line);
  border-bottom: 1px solid var(--nk-line);
  overflow: hidden;
  transition: background-color 0.45s var(--nk-ease);
}
/* A line of light traces the top edge on hover. */
.nk-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--nk-amber);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s var(--nk-ease-out);
}
.nk-card:hover { background: var(--nk-slate-lift); }
.nk-card:hover::after { transform: scaleX(1); }

.nk-card__index {
  display: block;
  font-family: var(--nk-font-mono);
  font-size: var(--nk-size-micro);
  letter-spacing: 0.22em;
  color: var(--nk-amber);
  margin-bottom: var(--nk-space-m);
}
.nk-card__title {
  font-family: var(--nk-font-display);
  font-size: var(--nk-display-sm);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: var(--nk-space-xs);
}
.nk-card__body { color: var(--nk-text-body); font-size: 0.9375rem; line-height: 1.6; }
.nk-card__icon { width: 2rem; height: 2rem; margin-bottom: var(--nk-space-m); color: var(--nk-amber); }

/* --- Marker list — directional ticks instead of bullets ------------------ */
.nk-marks {
  display: grid;
  gap: var(--nk-space-s);
}
@media (min-width: 44rem) { .nk-marks--2col { grid-template-columns: 1fr 1fr; column-gap: var(--nk-space-l); } }
.nk-marks li {
  position: relative;
  padding-left: 2rem;
  padding-bottom: var(--nk-space-s);
  border-bottom: 1px solid var(--nk-line);
  color: var(--nk-text-body);
}
.nk-marks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.75rem;
  height: 1px;
  background: var(--nk-amber);
}
.nk-marks li strong { display: block; color: var(--nk-ivory); font-weight: 600; }

/* --- Numbered process ----------------------------------------------------
   Also container-queried, so a process list stays readable if it is ever
   placed inside a narrow column rather than a full-width section. */
.nk-steps { counter-reset: nk-step; position: relative; container-type: inline-size; }
.nk-steps > li {
  counter-increment: nk-step;
  position: relative;
  display: grid;
  gap: var(--nk-space-2xs) var(--nk-space-m);
  grid-template-columns: 3rem 1fr;
  padding-block: var(--nk-space-m);
  border-top: 1px solid var(--nk-line);
}
.nk-steps > li:last-child { border-bottom: 1px solid var(--nk-line); }
.nk-steps > li::before {
  content: "0" counter(nk-step);
  grid-row: 1 / span 2;
  font-family: var(--nk-font-mono);
  font-size: var(--nk-size-micro);
  letter-spacing: 0.18em;
  color: var(--nk-amber);
  padding-top: 0.45em;
}
.nk-steps__title {
  font-family: var(--nk-font-display);
  font-size: var(--nk-size-lead);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.nk-steps__body { color: var(--nk-text-body); font-size: 0.9375rem; line-height: 1.6; max-width: 56ch; }
@container (min-width: 44rem) {
  .nk-steps > li { grid-template-columns: 4rem minmax(0, 18rem) minmax(0, 1fr); }
  .nk-steps > li::before { grid-row: 1; }
  .nk-steps__body { grid-column: 3; }
}

/* --- Pull quote ---------------------------------------------------------- */
.nk-quote {
  position: relative;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--nk-amber);
}
.nk-quote__text {
  font-family: var(--nk-font-display);
  font-size: var(--nk-display-sm);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--nk-ivory);
  text-wrap: pretty;
}
.nk-quote__source {
  margin-top: var(--nk-space-s);
  font-family: var(--nk-font-mono);
  font-size: var(--nk-size-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nk-steel);
}

/* --- Definition rows (safeguarding, contact details) ---------------------
   Container-queried, not viewport-queried: these lists get dropped inside
   narrow split columns, where a viewport-width switch would force a
   two-column layout the container can't fit and long strings would overflow.
   Browsers without container queries simply stay stacked. */
.nk-defs {
  display: grid;
  gap: 0;
  container-type: inline-size;
}
.nk-defs > div {
  display: grid;
  gap: var(--nk-space-2xs) var(--nk-space-l);
  padding-block: var(--nk-space-m);
  border-top: 1px solid var(--nk-line);
}
.nk-defs > div:last-child { border-bottom: 1px solid var(--nk-line); }
@container (min-width: 34rem) {
  .nk-defs > div { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
}
.nk-defs dt {
  font-family: var(--nk-font-display);
  font-size: var(--nk-size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nk-ivory);
  padding-top: 0.2em;
}
.nk-defs dd {
  margin: 0;
  color: var(--nk-text-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  /* Email addresses have no break opportunities and must not escape the track. */
  overflow-wrap: anywhere;
}
.nk-defs dd + dd { margin-top: var(--nk-space-2xs); }

/* --- Audience chips ----------------------------------------------------- */
.nk-chips { display: flex; flex-wrap: wrap; gap: var(--nk-space-2xs); }
.nk-chips li {
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--nk-line);
  border-radius: 2px;
  font-family: var(--nk-font-display);
  font-size: var(--nk-size-eyebrow);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nk-text-body);
  transition: border-color 0.3s var(--nk-ease), color 0.3s var(--nk-ease);
}
.nk-chips li:hover { border-color: var(--nk-amber); color: var(--nk-ivory); }

/* --- Figure / compass graphic ------------------------------------------- */
.nk-compass { position: relative; width: 100%; max-width: 30rem; margin-inline: auto; }
.nk-compass svg { width: 100%; overflow: visible; }
.nk-compass__ring { fill: none; stroke: var(--nk-line-strong); }
.nk-compass__ring--inner { stroke: var(--nk-line); }
.nk-compass__tick { stroke: var(--nk-steel); stroke-width: 1; }
.nk-compass__tick--n { stroke: var(--nk-amber); stroke-width: 1.5; }
.nk-compass__label {
  fill: var(--nk-steel);
  font-family: var(--nk-font-mono);
  font-size: 9px;
  letter-spacing: 2px;
}
.nk-compass__label--n { fill: var(--nk-amber); }
.nk-compass__needle {
  fill: var(--nk-amber);
  transform-origin: 150px 150px;
  animation: nk-seek 14s var(--nk-ease) infinite;
}
.nk-compass__glow { fill: var(--nk-amber); filter: blur(14px); opacity: 0.35; }
@keyframes nk-seek {
  0%, 100% { transform: rotate(-11deg); }
  28%      { transform: rotate(14deg); }
  55%      { transform: rotate(-5deg); }
  78%      { transform: rotate(3deg); }
}
/* Dashed path that draws itself when scrolled into view. */
.nk-path {
  fill: none;
  stroke: var(--nk-amber);
  stroke-width: 1.25;
  stroke-dasharray: 5 7;
  stroke-dashoffset: 640;
  opacity: 0;
  transition: stroke-dashoffset 2.6s var(--nk-ease-out), opacity 0.6s var(--nk-ease);
}
.nk-path.is-visible { stroke-dashoffset: 0; opacity: 0.85; }

/* --- Stat / figure row -------------------------------------------------- */
.nk-figures { display: grid; gap: var(--nk-space-l); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .nk-figures { grid-template-columns: repeat(3, 1fr); } }
.nk-figure__value {
  font-family: var(--nk-font-display);
  font-size: var(--nk-display-md);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--nk-ivory);
}
.nk-figure__label {
  margin-top: var(--nk-space-xs);
  padding-top: var(--nk-space-xs);
  border-top: 1px solid var(--nk-line);
  font-size: 0.9375rem;
  color: var(--nk-text-body);
}

/* --- Callout / notice --------------------------------------------------- */
.nk-callout {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border: 1px solid var(--nk-line);
  border-left: 2px solid var(--nk-amber);
  background: rgba(217, 154, 43, 0.045);
  border-radius: 2px;
}
.nk-callout__title {
  font-family: var(--nk-font-display);
  font-size: var(--nk-size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nk-amber);
  margin-bottom: var(--nk-space-2xs);
}
.nk-callout p { color: var(--nk-text-body); font-size: 0.9375rem; line-height: 1.65; }
.nk-callout--urgent { border-left-color: #E2544A; background: rgba(226, 84, 74, 0.06); }
.nk-callout--urgent .nk-callout__title { color: #F0857D; }

/* --- Final CTA band ----------------------------------------------------- */
.nk-cta {
  position: relative;
  padding-block: clamp(6rem, 18vh, 13rem);
  background: var(--nk-navy-deep);
  overflow: clip;
  isolation: isolate;
  text-align: center;
}
.nk-cta__sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(100% 70% at 50% 118%, rgba(217, 154, 43, 0.30) 0%,
      rgba(217, 154, 43, 0.07) 38%, transparent 68%),
    linear-gradient(180deg, var(--nk-navy) 0%, var(--nk-navy-deep) 60%, #0A1726 100%);
}
.nk-cta__inner { position: relative; z-index: 2; }
.nk-cta__title span { display: block; }
.nk-cta__title span:last-child { color: var(--nk-amber); }


/* ==========================================================================
   11. FORMS
   ========================================================================== */

/* Container-queried so paired fields never sit side by side in a column too
   narrow for them — the enquiry form lives inside a split column. */
.nk-form { display: grid; gap: var(--nk-space-m); container-type: inline-size; }

.nk-fieldset { border: 0; padding: 0; margin: 0; }
.nk-fieldset + .nk-fieldset { margin-top: var(--nk-space-l); }
.nk-fieldset__legend {
  display: block;
  width: 100%;
  padding-bottom: var(--nk-space-xs);
  margin-bottom: var(--nk-space-m);
  border-bottom: 1px solid var(--nk-line);
  font-family: var(--nk-font-display);
  font-size: var(--nk-size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nk-steel);
}

.nk-field { display: grid; gap: 0.5rem; }
.nk-field-row { display: grid; gap: var(--nk-space-m); grid-template-columns: 1fr; }
@container (min-width: 32rem) { .nk-field-row--2 { grid-template-columns: 1fr 1fr; } }

.nk-label {
  font-family: var(--nk-font-display);
  font-size: var(--nk-size-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nk-text-body);
}
.nk-label__req { color: var(--nk-amber); }
.nk-hint { font-size: 0.8125rem; line-height: 1.5; color: var(--nk-text-mute); }

.nk-input,
.nk-select,
.nk-textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(242, 238, 230, 0.03);
  border: 1px solid var(--nk-line);
  border-radius: 2px;
  color: var(--nk-ivory);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.3s var(--nk-ease), background-color 0.3s var(--nk-ease);
}
.nk-input::placeholder, .nk-textarea::placeholder { color: rgba(111, 135, 152, 0.75); }
.nk-input:hover, .nk-select:hover, .nk-textarea:hover { border-color: var(--nk-line-strong); }
.nk-input:focus, .nk-select:focus, .nk-textarea:focus {
  outline: none;
  border-color: var(--nk-amber);
  background: rgba(242, 238, 230, 0.05);
  box-shadow: 0 0 0 3px var(--nk-amber-soft);
}
.nk-textarea { min-height: 8rem; resize: vertical; }

.nk-select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236F8798' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem;
}
.nk-select option { background: var(--nk-slate); color: var(--nk-ivory); }

/* Checkbox */
.nk-check { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; }
.nk-check input {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.2rem;
  border: 1px solid var(--nk-line-strong);
  border-radius: 2px;
  background: rgba(242, 238, 230, 0.03);
  cursor: pointer;
  transition: border-color 0.25s var(--nk-ease), background-color 0.25s var(--nk-ease);
  flex: none;
}
.nk-check input:hover { border-color: var(--nk-amber); }
.nk-check input:checked {
  background: var(--nk-amber);
  border-color: var(--nk-amber);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2307111F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5.5'/%3E%3C/svg%3E");
  background-size: 0.75rem;
  background-position: center;
  background-repeat: no-repeat;
}
.nk-check span { font-size: 0.9375rem; line-height: 1.55; color: var(--nk-text-body); }
.nk-check a { color: var(--nk-ivory); }

/* Validation */
.nk-input[aria-invalid="true"],
.nk-select[aria-invalid="true"],
.nk-textarea[aria-invalid="true"] { border-color: #E2544A; }
.nk-error {
  font-size: 0.8125rem;
  color: #F0857D;
  min-height: 0;
}
.nk-error:empty { display: none; }

/* Submission result panel */
.nk-form__result {
  display: none;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--nk-amber);
  background: rgba(217, 154, 43, 0.07);
  border-radius: 2px;
}
.nk-form__result.is-shown { display: block; }
.nk-form__result h3 {
  font-family: var(--nk-font-display);
  font-size: var(--nk-display-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: var(--nk-space-2xs);
}
.nk-form__result p { color: var(--nk-text-body); font-size: 0.9375rem; }
.nk-form.is-submitted { display: none; }


/* --- Container-query fallback -------------------------------------------
   .nk-defs, .nk-steps and .nk-field-row size themselves against their
   container so they behave correctly both full-width and inside a split
   column. Container queries are available in every current browser; where
   they aren't, those components stay stacked — readable, just taller. These
   viewport approximations restore the two-column layouts for that case.
   ------------------------------------------------------------------------ */
@supports not (container-type: inline-size) {
  @media (min-width: 48rem) {
    .nk-defs > div { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
  }
  @media (min-width: 56rem) {
    .nk-steps > li { grid-template-columns: 4rem minmax(0, 18rem) minmax(0, 1fr); }
    .nk-steps > li::before { grid-row: 1; }
    .nk-steps__body { grid-column: 3; }
  }
  @media (min-width: 44rem) {
    .nk-field-row--2 { grid-template-columns: 1fr 1fr; }
  }
  /* Inside the Contact split the column is too narrow for either pairing. */
  @media (min-width: 62rem) and (max-width: 78rem) {
    .nk-split .nk-defs > div,
    .nk-split .nk-field-row--2 { grid-template-columns: 1fr; }
  }
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.nk-footer {
  position: relative;
  padding-top: var(--nk-space-2xl);
  padding-bottom: var(--nk-space-l);
  background: var(--nk-navy-deep);
  border-top: 1px solid var(--nk-line);
  font-size: 0.9375rem;
}
.nk-footer__top {
  display: grid;
  gap: var(--nk-space-xl);
  grid-template-columns: 1fr;
  padding-bottom: var(--nk-space-xl);
}
@media (min-width: 56rem) {
  .nk-footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--nk-space-2xl); }
}
.nk-footer__brand .nk-wordmark { margin-bottom: var(--nk-space-m); }
.nk-footer__statement {
  font-family: var(--nk-font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 20ch;
}
.nk-footer__statement em { font-style: normal; color: var(--nk-amber); }

.nk-footer__heading {
  font-family: var(--nk-font-display);
  font-size: var(--nk-size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nk-steel);
  margin-bottom: var(--nk-space-m);
}
.nk-footer__list { display: grid; gap: 0.375rem; }
.nk-footer__list a {
  display: inline-block;
  /* Keeps footer links a comfortable tap target on touch devices. */
  padding-block: 0.25rem;
  color: var(--nk-text-body);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.3s var(--nk-ease);
}
.nk-footer__list a:hover { color: var(--nk-amber); }

.nk-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nk-space-s);
  padding-top: var(--nk-space-m);
  border-top: 1px solid var(--nk-line);
}
.nk-footer__bottom p { font-family: var(--nk-font-mono); font-size: var(--nk-size-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--nk-steel); }


/* ==========================================================================
   13. MOTION & REVEALS
   ========================================================================== */

/* Scroll reveal: opacity + a short rise. Set by IntersectionObserver. */
.nk-reveal {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  transition: opacity var(--nk-dur-slow) var(--nk-ease),
              transform var(--nk-dur-slow) var(--nk-ease-out);
  will-change: opacity, transform;
}
.nk-reveal.is-visible { opacity: 1; transform: none; will-change: auto; }

/* Stagger children of a revealed container. */
.nk-reveal[data-nk-delay="1"] { transition-delay: 0.09s; }
.nk-reveal[data-nk-delay="2"] { transition-delay: 0.18s; }
.nk-reveal[data-nk-delay="3"] { transition-delay: 0.27s; }
.nk-reveal[data-nk-delay="4"] { transition-delay: 0.36s; }
.nk-reveal[data-nk-delay="5"] { transition-delay: 0.45s; }
.nk-reveal[data-nk-delay="6"] { transition-delay: 0.54s; }

/* Hero intro — plays once on load, no observer needed. */
.nk-intro { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
.js .nk-intro {
  animation: nk-intro-in 1.15s var(--nk-ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 0.12s + 0.15s);
}
.no-js .nk-intro { opacity: 1; transform: none; }
@keyframes nk-intro-in {
  to { opacity: 1; transform: none; }
}

/* Parallax target — offset written by JS as a custom property. */
.nk-parallax { transform: translate3d(0, var(--nk-shift, 0px), 0); }

/* Without JS, everything is simply visible. */
.no-js .nk-reveal { opacity: 1; transform: none; }
.no-js .nk-horizon { transform: scaleX(1); opacity: 0.75; }
.no-js .nk-path { stroke-dashoffset: 0; opacity: 0.85; }
.no-js .nk-drawer { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  .nk-reveal { opacity: 1; transform: none; }
  .nk-horizon { transform: scaleX(1); opacity: 0.75; }
  .nk-path { stroke-dashoffset: 0; opacity: 0.85; }
  .nk-intro { opacity: 1; transform: none; }
  .nk-parallax { transform: none; }
  .nk-scroll-cue__track::after { display: none; }
}


/* ==========================================================================
   14. UTILITIES
   ========================================================================== */

.nk-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nk-relative { position: relative; z-index: 2; }
.nk-mt-l { margin-top: var(--nk-space-l); }
.nk-mt-xl { margin-top: var(--nk-space-xl); }
.nk-mt-m { margin-top: var(--nk-space-m); }
.nk-mb-m { margin-bottom: var(--nk-space-m); }
.nk-nowrap { white-space: nowrap; }

@media print {
  .nk-header, .nk-drawer, .nk-grain, .nk-vignette, .nk-progress,
  .nk-scroll-cue, .nk-aura, .nk-hero__canvas { display: none !important; }
  body { background: #fff; color: #000; }
  .nk-reveal { opacity: 1 !important; transform: none !important; }
}