/* ───────────────────────────────────────────────────────────────
   Nightjar Aeroworks — one dark visual world.

   Every colour is painted explicitly. The page commits to a single
   dark look rather than following the OS theme: the WebGL viewport is
   lit for a dark ground, and a light variant would need a second
   lighting rig to hold together.
   ─────────────────────────────────────────────────────────────── */

:root {
  --ink-950: #07080a;
  --ink-900: #0b0d11;
  --ink-850: #0f1217;
  --ink-800: #14181f;
  --ink-750: #1a1f27;
  --line:      #232833;
  --line-soft: #191d25;

  --text: #eef1f5;
  --dim:  #9aa3b0;
  --mute: #6a727f;

  --hot:      #ff5a1f;
  --hot-dim:  #c9410f;
  --hot-wash: rgba(255, 90, 31, 0.10);
  --ice:      #8fb6ff;
  --ok:       #45d483;
  --warn:     #f0bd4a;

  --f-disp: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --notice-h: 40px;
  --head-h: 68px;
  --pad: clamp(20px, 5vw, 56px);
  --maxw: 1280px;
  --r: 14px;
}

* { box-sizing: border-box; }

/* Author `display` beats the UA rule for [hidden], so anything given a
   display value below would ignore the attribute without this. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header. */
  scroll-padding-top: calc(var(--notice-h) + var(--head-h) + 12px);
  background: var(--ink-950);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink-950);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-disp);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }

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

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--hot); color: #120602; font-weight: 600;
  padding: 10px 16px; border-radius: 8px;
  transition: top 0.15s;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%; max-width: var(--maxw);
  margin: 0 auto; padding: 0 var(--pad);
}

/* ---- buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; font-family: var(--f-disp); font-weight: 600;
  font-size: 14.5px; letter-spacing: -0.01em;
  padding: 11px 20px; border-radius: 9px;
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.16s;
}
.btn-lg { font-size: 16px; padding: 14px 26px; }
.btn-block { width: 100%; }
.btn-solid {
  background: var(--hot); color: #160701;
  box-shadow: 0 8px 30px rgba(255, 90, 31, 0.22);
}
.btn-solid:hover { background: #ff7040; transform: translateY(-1px); }
.btn-ghost {
  border-color: var(--line); color: var(--text);
  background: rgba(255, 255, 255, 0.02);
}
.btn-ghost:hover { border-color: #39404e; background: rgba(255, 255, 255, 0.05); }

/* ---- eyebrow --------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hot); margin: 0 0 20px;
}
.eyebrow .tick {
  width: 22px; height: 1px; background: var(--hot); opacity: 0.7;
}

/* ---- notice bar ------------------------------------------------ */
.notice {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  height: var(--notice-h);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px;
  background: #1c0d05;
  border-bottom: 1px solid #33190a;
  font-size: 12.5px; color: #f0c3a8;
  text-align: center;
}
.notice strong { color: var(--hot); font-weight: 600; }
.notice span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- header ---------------------------------------------------- */
.site-head {
  position: fixed; top: var(--notice-h); left: 0; right: 0; z-index: 110;
  height: var(--head-h);
  background: rgba(7, 8, 10, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, background 0.2s;
}
.site-head.is-stuck {
  border-bottom-color: var(--line-soft);
  background: rgba(7, 8, 10, 0.9);
}
.head-in {
  height: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad);
  display: flex; align-items: center; gap: 28px;
}

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.mark { width: 26px; height: 26px; color: var(--hot); flex: none; }
.wordmark {
  font-family: var(--f-disp); font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em;
}
.wordmark-dim {
  color: var(--mute); font-weight: 500; margin-left: 6px;
}

.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a {
  font-size: 14.5px; color: var(--dim); position: relative;
  padding: 6px 0; transition: color 0.16s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: var(--hot);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.2s;
}
.nav a:hover { color: var(--text); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: var(--text); }

.head-cta { display: flex; align-items: center; gap: 12px; flex: none; }

.nav-toggle {
  display: none; width: 40px; height: 36px;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 17px; height: 1.5px; background: var(--text);
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.nav-drawer {
  display: none; flex-direction: column;
  background: var(--ink-900); border-bottom: 1px solid var(--line);
  padding: 8px var(--pad) 18px;
}
.nav-drawer a {
  padding: 13px 0; font-size: 16px; color: var(--dim);
  border-bottom: 1px solid var(--line-soft);
}
.nav-drawer a:last-child { border-bottom: none; }

/* ---- 3D stage -------------------------------------------------- */
.stage { position: relative; width: 100%; height: 100%; }
.nj-canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block; touch-action: none;
  pointer-events: none;
}
.nj-canvas.is-live { pointer-events: auto; cursor: grab; }
.nj-canvas.is-live:active { cursor: grabbing; }

/* ---- hero ------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: calc(var(--notice-h) + var(--head-h));
  display: flex; align-items: center;
  overflow: hidden;
  /* Lighting for the airframe comes from the WebGL environment; this
     is the ground it sits against. */
  background:
    radial-gradient(1100px 700px at 68% 34%, #1b2330 0%, transparent 66%),
    radial-gradient(900px 620px at 22% 88%, #17100c 0%, transparent 60%),
    linear-gradient(175deg, #0a0c10 0%, #07080a 60%, #050608 100%);
}
.hero .stage { position: absolute; inset: 0; }
.hero-grad {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(7, 8, 10, 0.94) 0%, rgba(7, 8, 10, 0.72) 34%, rgba(7, 8, 10, 0) 60%),
    linear-gradient(to top, rgba(7, 8, 10, 0.85) 0%, transparent 34%);
}
.hero-in {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 40px var(--pad) 96px;
}
.hero h1 {
  font-size: clamp(42px, 7.4vw, 92px);
  font-weight: 700; letter-spacing: -0.042em;
  margin: 0 0 26px; max-width: 15ch;
}
.lede {
  font-size: clamp(16px, 1.6vw, 19px); color: var(--dim);
  max-width: 46ch; margin: 0 0 34px;
}
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 44px;
  margin: 60px 0 0; padding: 26px 0 0;
  border-top: 1px solid var(--line-soft);
  max-width: 620px;
}
.hero-stats div { min-width: 90px; }
.hero-stats dt {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 7px;
}
.hero-stats dd {
  margin: 0; font-family: var(--f-disp); font-weight: 600;
  font-size: 34px; letter-spacing: -0.03em; line-height: 1;
  display: flex; align-items: baseline; gap: 6px;
}
.hero-stats dd span {
  font-family: var(--f-body); font-size: 12.5px; font-weight: 500;
  color: var(--dim); letter-spacing: 0;
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; z-index: 3;
  transform: translateX(-50%);
  width: 26px; height: 42px; border: 1px solid var(--line);
  border-radius: 14px; display: flex; justify-content: center;
  padding-top: 8px;
}
.scroll-cue span {
  width: 3px; height: 8px; border-radius: 2px; background: var(--hot);
  animation: cue 1.9s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(15px); opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue span { animation: none; }
}

/* ---- sections -------------------------------------------------- */
.section { padding: clamp(72px, 10vw, 132px) 0; position: relative; }
.section-build {
  background: linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 12%, var(--ink-900) 88%, var(--ink-950) 100%);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.sec-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 68px); }
.sec-head-wide { max-width: 860px; }
.sec-head h2 {
  font-size: clamp(30px, 4.2vw, 50px); letter-spacing: -0.035em;
  margin-bottom: 20px;
}
.sec-lede { color: var(--dim); font-size: clamp(15.5px, 1.4vw, 17.5px); max-width: 58ch; }

/* ---- pillars --------------------------------------------------- */
.pillars {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pillar {
  background: var(--ink-850); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 30px 28px 28px;
  transition: border-color 0.2s, transform 0.2s;
}
.pillar:hover { border-color: var(--line); transform: translateY(-2px); }
.pillar-art {
  width: 100%; height: 76px; color: var(--hot);
  opacity: 0.85; margin-bottom: 24px;
}
.pillar h3 { font-size: 22px; margin-bottom: 12px; }
.pillar p { color: var(--dim); font-size: 15.5px; }
.pillar-list {
  list-style: none; margin: 22px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--f-mono); font-size: 12.5px; color: var(--mute);
}
.pillar-list li { padding: 5px 0; }
.pillar-list li::before { content: "— "; color: var(--hot); }

/* ---- builder --------------------------------------------------- */
.builder {
  display: grid; gap: 22px;
  grid-template-columns: minmax(0, 1.62fr) minmax(320px, 1fr);
  align-items: start;
}

.bv { position: sticky; top: calc(var(--notice-h) + var(--head-h) + 18px); }
.bv-stage {
  position: relative;
  /* A rotorcraft is wide and flat; 4:3 wastes most of its height and
     leaves the aircraft small. */
  aspect-ratio: 16 / 10;
  min-height: 400px;
  border: 1px solid var(--line);
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
  background:
    radial-gradient(720px 460px at 30% 26%, #1d2531 0%, transparent 68%),
    radial-gradient(560px 420px at 78% 82%, #16100d 0%, transparent 62%),
    linear-gradient(168deg, #0d1015 0%, #090b0f 100%);
}
/* Fine grid, so the viewport reads as an instrument rather than a photo. */
.bv-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 78%);
}

.bv-badge {
  position: absolute; left: 16px; top: 14px; z-index: 4;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim);
  background: rgba(7, 8, 10, 0.6); border: 1px solid var(--line-soft);
  padding: 7px 12px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.bv-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--hot); box-shadow: 0 0 10px var(--hot);
}

.bv-fallback {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px; gap: 12px;
  background: var(--ink-850);
}
.bv-fallback h3 { font-size: 20px; }
.bv-fallback p { color: var(--dim); max-width: 44ch; font-size: 15px; }

/* Exploded-view callouts.

   The labels are parked at the four corners of the stage rather than
   pinned over their parts: four labels tracking anchors that all sit
   within about 150px of each other end up stacked on top of the
   aircraft, hiding it and each other. Fixed positions cannot collide,
   the leader lines carry the association, and holding still reads as
   deliberate on video instead of jittering with the camera. */
.callouts { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.callout-lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 0.24s;
  overflow: visible;
}
.callout-lines line {
  stroke: var(--hot); stroke-width: 1.25; opacity: 0.65;
  stroke-dasharray: 3 3;
}
.callout-lines circle { fill: var(--hot); }
.callout-lines .halo { fill: none; stroke: var(--hot); stroke-width: 1; opacity: 0.45; }

.callout {
  position: absolute; opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.24s, transform 0.24s;
  background: rgba(9, 11, 15, 0.9);
  border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 11px;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  max-width: calc(50% - 18px);
}
/* The accent edge faces the model, so each label points at its part. */
.callout[data-anchor="battery"] { top: 54px; right: 14px; border-right: 2px solid var(--hot); }
.callout[data-anchor="motor"]   { top: 50%; left: 14px; border-left: 2px solid var(--hot);
  transform: translateY(-50%) scale(0.97); }
.callout[data-anchor="gimbal"]  { bottom: 14px; left: 14px; border-left: 2px solid var(--hot); }
.callout[data-anchor="gear"]    { bottom: 14px; right: 14px; border-right: 2px solid var(--hot); }

.callouts.is-on .callout { opacity: 1; transform: scale(1); }
.callouts.is-on .callout[data-anchor="motor"] { transform: translateY(-50%) scale(1); }
.callouts.is-on .callout-lines { opacity: 1; }

.callout b {
  display: block; font-family: var(--f-disp); font-size: 12.5px;
  font-weight: 600; letter-spacing: -0.01em;
}
.callout span {
  display: block; font-family: var(--f-mono); font-size: 10.5px;
  color: var(--dim); margin-top: 2px;
}

/* Tight stages: trim the labels rather than let them crowd the model. */
@media (max-width: 620px) {
  .callout { padding: 5px 8px; }
  .callout b { font-size: 11px; }
  .callout span { font-size: 9.5px; }
  .callout[data-anchor="battery"] { top: 46px; }
}

.bv-bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--r) var(--r);
  background: var(--ink-850);
}
.bv-views { display: flex; flex-wrap: wrap; gap: 4px; }
.bv-views button {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase;
  background: none; border: 1px solid transparent; color: var(--mute);
  padding: 7px 11px; border-radius: 7px; cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.bv-views button:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.bv-views button.is-on {
  color: var(--hot); border-color: rgba(255, 90, 31, 0.4);
  background: var(--hot-wash);
}

.bv-toggles { display: flex; gap: 8px; }
.tgl {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase;
  background: none; border: 1px solid var(--line); color: var(--dim);
  padding: 7px 12px; border-radius: 7px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tgl:hover { color: var(--text); border-color: #39404e; }
.tgl-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); transition: background 0.15s, box-shadow 0.15s;
}
.tgl[aria-pressed="true"] {
  color: var(--hot); border-color: rgba(255, 90, 31, 0.45);
  background: var(--hot-wash);
}
.tgl[aria-pressed="true"] .tgl-dot {
  background: var(--hot); box-shadow: 0 0 9px var(--hot);
}

/* ---- option panel --------------------------------------------- */
.bo { min-width: 0; }
.ns {
  background: var(--ink-850); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px; color: var(--dim);
}
.ns a { color: var(--hot); text-decoration: underline; }
.bo-groups { display: flex; flex-direction: column; gap: 12px; }

.grp {
  border: 1px solid var(--line-soft); border-radius: var(--r);
  background: var(--ink-850); padding: 0;
  overflow: hidden;
}
/* A legend is laid out by the fieldset, not by us — it breaks the
   border box and ignores most layout. The accessible name lives in a
   visually hidden legend and the visible header is an ordinary row. */
.grp > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.grp-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 15px 18px 13px; width: 100%;
  border-bottom: 1px solid var(--line-soft);
}
.grp-name {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mute);
}
.grp-cur {
  font-family: var(--f-disp); font-size: 13px; font-weight: 600;
  color: var(--text); text-align: right;
}
.grp-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; }

/* Real radios and checkboxes, visually replaced. */
.opt { position: relative; display: block; }
.opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.opt-face {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 13px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}
.opt-face:hover { background: rgba(255, 255, 255, 0.035); }
.opt input:focus-visible + .opt-face {
  outline: 2px solid var(--hot); outline-offset: 1px;
}
.opt input:checked + .opt-face {
  background: var(--hot-wash); border-color: rgba(255, 90, 31, 0.38);
}
.opt input:disabled + .opt-face {
  opacity: 0.4; cursor: not-allowed;
}
.opt input:disabled + .opt-face:hover { background: none; }

.opt-tick {
  flex: none; width: 15px; height: 15px; margin-top: 3px;
  border: 1.5px solid var(--line); border-radius: 50%;
  position: relative; transition: border-color 0.14s;
}
.opt-check .opt-tick { border-radius: 4px; }
.opt input:checked + .opt-face .opt-tick { border-color: var(--hot); }
.opt input:checked + .opt-face .opt-tick::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: inherit; background: var(--hot);
}
.opt-body { min-width: 0; flex: 1; }
.opt-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.opt-name {
  font-family: var(--f-disp); font-size: 14.5px; font-weight: 600;
  letter-spacing: -0.012em;
}
.opt-price {
  font-family: var(--f-mono); font-size: 11.5px; color: var(--mute);
  white-space: nowrap;
}
.opt-sub {
  font-family: var(--f-mono); font-size: 11px; color: var(--hot);
  opacity: 0.75; margin-top: 3px;
}
.opt-blurb {
  font-size: 13px; color: var(--dim); line-height: 1.5; margin-top: 7px;
}
.opt-flag {
  display: inline-block; margin-top: 7px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warn); border: 1px solid rgba(240, 189, 74, 0.3);
  background: rgba(240, 189, 74, 0.08);
  padding: 3px 7px; border-radius: 5px;
}

/* colour swatches sit in a row rather than a list */
.grp-swatches { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }
.sw { position: relative; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-face {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px 8px 8px; border-radius: 9px;
  border: 1px solid var(--line-soft); cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
}
.sw-face:hover { border-color: var(--line); }
.sw input:focus-visible + .sw-face { outline: 2px solid var(--hot); outline-offset: 1px; }
.sw input:checked + .sw-face {
  border-color: var(--hot); background: var(--hot-wash);
}
.sw-chip {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.sw-lab { font-size: 13px; font-weight: 500; }
.sw-lab i {
  display: block; font-family: var(--f-mono); font-style: normal;
  font-size: 10px; color: var(--mute);
}

/* ---- readout --------------------------------------------------- */
.readout {
  display: grid; gap: 22px; margin-top: 22px;
  grid-template-columns: minmax(0, 1.62fr) minmax(320px, 1fr);
  align-items: start;
}
.ro-specs {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--r);
  overflow: hidden;
}
.ro-spec { background: var(--ink-850); padding: 18px 18px 16px; }
.ro-spec dt {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 9px;
}
.ro-spec dd {
  margin: 0; display: flex; align-items: baseline; gap: 5px;
  font-family: var(--f-disp);
}
.ro-spec dd b {
  font-size: 27px; font-weight: 600; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ro-spec dd i {
  font-style: normal; font-family: var(--f-body);
  font-size: 12px; color: var(--dim); font-weight: 500;
}
.ro-spec-bar { grid-column: 1 / -1; }
.bar {
  height: 5px; border-radius: 3px; background: var(--ink-750);
  margin-top: 12px; overflow: hidden;
}
.bar span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--hot-dim), var(--hot));
  transition: width 0.35s ease, background 0.3s;
}
.bar.is-over span { background: linear-gradient(90deg, #a11b1b, #ef4444); }
.bar.is-tight span { background: linear-gradient(90deg, #a8791b, var(--warn)); }

.ro-buy {
  background: var(--ink-850); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px;
}
.ro-issues { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.ro-issues:empty { display: none; }
.iss {
  display: flex; gap: 9px; font-size: 13px; line-height: 1.45;
  padding: 10px 12px; border-radius: 9px;
  border: 1px solid transparent;
}
.iss::before {
  font-family: var(--f-mono); font-weight: 500; flex: none;
}
.iss-block {
  color: #ffb4a4; background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}
.iss-block::before { content: "✕"; color: #ef4444; }
.iss-warn {
  color: #f4d79a; background: rgba(240, 189, 74, 0.08);
  border-color: rgba(240, 189, 74, 0.26);
}
.iss-warn::before { content: "!"; color: var(--warn); }
.iss-note {
  color: var(--dim); background: rgba(143, 182, 255, 0.06);
  border-color: rgba(143, 182, 255, 0.2);
}
.iss-note::before { content: "i"; color: var(--ice); }

.ro-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
  padding-bottom: 18px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.ro-price-label {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--mute); width: 100%;
}
.ro-price strong {
  font-family: var(--f-disp); font-size: 34px; font-weight: 600;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.ro-lead { font-size: 12.5px; color: var(--dim); }
.ro-fine { font-size: 11.5px; color: var(--mute); margin-top: 12px; line-height: 1.5; }

.btn-solid:disabled {
  background: var(--ink-750); color: var(--mute);
  box-shadow: none; cursor: not-allowed; transform: none;
}

/* ---- spec table ------------------------------------------------ */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line-soft); border-radius: var(--r);
  background: var(--ink-850);
}
.spec-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.spec-table th, .spec-table td {
  text-align: left; padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
}
.spec-table thead th {
  padding: 20px 18px; vertical-align: bottom;
  border-bottom: 1px solid var(--line);
  background: var(--ink-800);
}
.th-lab {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--mute);
}
.th-name {
  display: block; font-family: var(--f-disp); font-size: 16px;
  font-weight: 600; letter-spacing: -0.02em;
}
.th-sub {
  display: block; font-family: var(--f-mono); font-size: 10.5px;
  color: var(--mute); margin-top: 5px;
}
.th-yours { background: rgba(255, 90, 31, 0.07) !important; }
.th-yours .th-name { color: var(--hot); }
.spec-table tbody th {
  font-family: var(--f-body); font-weight: 500; color: var(--dim);
}
.spec-table tbody th em {
  font-style: normal; font-family: var(--f-mono); font-size: 10.5px;
  color: var(--mute); display: block; margin-top: 2px;
}
.spec-table td {
  font-family: var(--f-mono); font-size: 13.5px;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.spec-table td:last-child {
  background: rgba(255, 90, 31, 0.05); color: var(--hot); font-weight: 500;
}
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table tr:hover td:not(:last-child) { background: rgba(255, 255, 255, 0.02); }
.row-em td, .row-em th { background: rgba(255, 255, 255, 0.016); }
.row-price td { font-size: 15px; }
.table-note {
  font-size: 12.5px; color: var(--mute); margin-top: 16px; max-width: 76ch;
}

/* ---- shot library ---------------------------------------------- */
.section-footage { background: var(--ink-900); border-top: 1px solid var(--line-soft); }
.shots {
  display: grid; gap: 16px;
  grid-template-columns: repeat(6, 1fr);
}
.shot {
  margin: 0; grid-column: span 2;
  border: 1px solid var(--line-soft); border-radius: var(--r);
  overflow: hidden; background: var(--ink-850);
}
.shot-wide { grid-column: span 3; }
.shot-art {
  aspect-ratio: 16 / 9; position: relative;
  border-bottom: 1px solid var(--line-soft);
}
/* Abstract graphics, deliberately not photographic. */
.art-1 {
  background:
    radial-gradient(60% 100% at 30% 110%, #2a3646 0%, transparent 70%),
    linear-gradient(190deg, #f2a25a 0%, #b45a2e 22%, #2a2b3c 52%, #0e1220 100%);
}
.art-1::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 26px);
}
.art-2 {
  background:
    linear-gradient(180deg, #1b2a3d 0%, #3c5772 44%, #7b93a8 62%, #c9d6de 100%);
}
.art-2::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(174deg, transparent 54%, rgba(12, 16, 22, 0.9) 56%, #0b0e14 100%),
    linear-gradient(168deg, transparent 62%, rgba(20, 26, 34, 0.7) 64%);
}
.art-3 {
  background:
    conic-gradient(from 210deg at 62% 38%, #16202c 0deg, #2f4054 90deg, #101822 200deg, #253345 300deg, #16202c 360deg);
}
.art-3::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(143, 182, 255, 0.09) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(143, 182, 255, 0.09) 0 1px, transparent 1px 34px);
  mask-image: radial-gradient(circle at 62% 38%, #000 10%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at 62% 38%, #000 10%, transparent 74%);
}
.art-4 {
  background:
    radial-gradient(3px 3px at 22% 62%, #ffd9a0 0%, transparent 100%),
    radial-gradient(2px 2px at 38% 74%, #cfe4ff 0%, transparent 100%),
    radial-gradient(2px 2px at 61% 58%, #ffca7a 0%, transparent 100%),
    radial-gradient(2px 2px at 76% 70%, #a8c8ff 0%, transparent 100%),
    radial-gradient(140% 90% at 50% 130%, #3a2a1c 0%, transparent 62%),
    linear-gradient(178deg, #05070d 0%, #0a1020 60%, #14100c 100%);
}
.art-4::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 200, 130, 0.055) 0 1px, transparent 1px 18px);
}
.art-5 {
  background:
    linear-gradient(90deg, #0d1218 0%, #1b2432 26%, #38485c 50%, #1b2432 74%, #0d1218 100%);
}
.art-5::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 90, 31, 0.32) 0 2px, transparent 2px 84px),
    linear-gradient(180deg, transparent 62%, rgba(6, 8, 12, 0.92) 100%);
}
.shot figcaption { padding: 15px 17px 17px; }
.shot-title {
  display: block; font-family: var(--f-disp); font-size: 15px;
  font-weight: 600; letter-spacing: -0.015em;
}
.shot-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px;
  font-family: var(--f-mono); font-size: 10.5px; color: var(--mute);
}
.shot-meta i { font-style: normal; }
.shot-meta i:first-child { color: var(--hot); }

/* ---- ownership ------------------------------------------------- */
.owns {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.own {
  border-top: 2px solid var(--line); padding-top: 22px;
}
.own-n {
  font-family: var(--f-mono); font-size: 11.5px; color: var(--hot);
  letter-spacing: 0.14em;
}
.own h3 { font-size: 20px; margin: 12px 0 12px; }
.own p { color: var(--dim); font-size: 15.5px; }

/* ---- cta ------------------------------------------------------- */
.cta-band {
  padding: clamp(56px, 8vw, 96px) 0;
  background:
    radial-gradient(760px 460px at 82% 18%, rgba(255, 90, 31, 0.14) 0%, transparent 64%),
    linear-gradient(168deg, #0d1015 0%, #0a0c10 100%);
  border-top: 1px solid var(--line-soft);
}
.cta-in {
  display: flex; flex-wrap: wrap; gap: 32px;
  align-items: center; justify-content: space-between;
}
.cta-in h2 { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 12px; }
.cta-in p { color: var(--dim); }
.cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- footer ---------------------------------------------------- */
.site-foot {
  background: var(--ink-950); border-top: 1px solid var(--line-soft);
  padding: clamp(48px, 6vw, 76px) 0 40px;
}
.foot-in {
  display: grid; gap: 40px;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.4fr);
  padding-bottom: 40px; border-bottom: 1px solid var(--line-soft);
}
.foot-brand { display: flex; flex-direction: column; }
.foot-brand .mark { margin-bottom: 14px; }
.foot-addr {
  font-family: var(--f-mono); font-size: 12.5px; color: var(--mute);
  line-height: 1.9; margin-top: 18px;
}
.foot-addr a { color: var(--dim); }
.foot-addr a:hover { color: var(--hot); }
.foot-nav {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.foot-nav h4 {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 14px;
  font-weight: 500;
}
.foot-nav a {
  display: block; font-size: 14px; color: var(--dim); padding: 5px 0;
}
.foot-nav a:hover { color: var(--hot); }
.foot-fine { padding-top: 28px; }
.foot-fine p { font-size: 12px; color: var(--mute); max-width: 92ch; line-height: 1.65; }
.foot-fine strong { color: var(--dim); font-weight: 600; }
.foot-tech { margin-top: 12px !important; }

/* ---- quote dialog ---------------------------------------------- */
.quote-dlg {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--ink-850); color: var(--text);
  padding: 0; max-width: 520px; width: calc(100% - 32px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.66);
}
.quote-dlg::backdrop {
  background: rgba(4, 5, 7, 0.72);
  backdrop-filter: blur(3px);
}
.quote-dlg form { padding: 26px; }
.qd-head { margin-bottom: 20px; }
.qd-head .eyebrow { margin-bottom: 12px; }
.qd-head h3 { font-size: 26px; }
.qd-list {
  display: flex; flex-direction: column; gap: 1px; margin: 0;
  background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: 10px; overflow: hidden;
}
.qd-list > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 10px 14px; background: var(--ink-800);
}
.qd-list dt {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mute); flex: none;
}
.qd-list dd {
  margin: 0; font-size: 13.5px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.qd-list > div:last-child dd {
  font-family: var(--f-disp); font-weight: 600; font-size: 17px; color: var(--hot);
}
.qd-note { font-size: 12px; color: var(--mute); line-height: 1.6; margin: 16px 0 20px; }
.qd-btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ---- responsive ------------------------------------------------ */
@media (max-width: 1080px) {
  .builder, .readout { grid-template-columns: 1fr; }
  .bv { position: static; }
  .shots { grid-template-columns: repeat(4, 1fr); }
  .shot, .shot-wide { grid-column: span 2; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .head-cta { margin-left: auto; }
  .site-head.is-open .nav-drawer { display: flex; }
  .hero-stats { gap: 28px 36px; }
  .shots { grid-template-columns: 1fr 1fr; }
  .shot, .shot-wide { grid-column: span 1; }
  .foot-in { grid-template-columns: 1fr; }
}

/* Below this width there is not enough room to set the copy beside the
   airframe, so the stage moves above it in the flow and the overlay
   scrim comes off. The heading order still reads top-to-bottom. Same
   breakpoint as the builder, which stacks for the same reason. */
@media (max-width: 1080px) {
  .hero {
    min-height: auto; padding-bottom: 64px;
    flex-direction: column; align-items: stretch;
  }
  .hero .stage { position: relative; height: 52svh; inset: auto; }
  .hero-grad { display: none; }
  .hero-in { padding-top: 28px; padding-bottom: 32px; }
  .scroll-cue { display: none; }
}

@media (max-width: 620px) {
  :root { --pad: 18px; --notice-h: 52px; }
  body { font-size: 16px; }
  .notice { font-size: 11.5px; line-height: 1.35; padding: 6px 14px; }
  .notice span { white-space: normal; }
  .hero-in { padding-top: 24px; }
  .hero h1 { font-size: 38px; }
  .hero-stats { margin-top: 40px; }
  .hero-stats dd { font-size: 27px; }
  .bv-stage { aspect-ratio: 1 / 1; min-height: 320px; }
  .bv-bar { justify-content: flex-start; }
  .shots { grid-template-columns: 1fr; }
  .ro-price strong { font-size: 29px; }
}

/* ---- notice bar: mid-width wrap -------------------------------
   Added when this prototype moved to tinybytestudio.com/prototypes and became
   an INDEXED page. Between 621px and 1024px the disclosure was hitting the
   nowrap/ellipsis rule above and truncating mid-word ("...demonstrating a
   real-..."), which is not acceptable for the sentence that tells people the
   company is fictional. Same wrap treatment as the <=620px block, with the
   height token raised to fit two lines — everything else keys off --notice-h,
   so the header, hero padding and sticky viewer follow automatically. */
@media (min-width: 621px) and (max-width: 1024px) {
  :root { --notice-h: 58px; }
  .notice { line-height: 1.35; padding: 6px 16px; }
  .notice span { white-space: normal; }
}

/* ---- header: small-phone fit ----------------------------------
   Added 2026-09-27. .brand and .head-cta are both flex:none, so under ~430px
   they need more room than the bar has and the nav-toggle was rendering past
   the right edge. Because .site-head is position:fixed the overflow creates no
   page scroll — the button just gets clipped and is hard to tap. Drop the dim
   half of the wordmark (the brand still reads "Nightjar") and tighten the gap. */
@media (max-width: 620px) {
  .head-in { gap: 12px; }
  .brand { min-width: 0; }
  .wordmark { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wordmark-dim { display: none; }
}