/* ============================================================
   Northern Edge Software — cinema.css
   THE REDESIGN LAYER. Load LAST on every page.
   Direction: cinematic documentary — dark, photographic, film
   grade, minimal UI. Imagery carries everything; type is a
   serious grotesk (Archivo) with sparse mono accents (IBM Plex
   Mono). Kills the neon/glow/HUD-everywhere feel: muted accents,
   hairline borders, flat surfaces, restrained motion.
   Re-themes styles.css + enhance.css + immersive.css by override
   — no markup changes required on inner pages.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* muted, film-graded accent set (overrides immersive.css) */
  --cyan: #7fb4c4;
  --cyan-strong: #6aa3b5;
  --blue: #5e7ca6;
  --blue-strong: #54719a;
  --amber: #d8a256;
  --amber-strong: #e4b878;
  --magenta: #a98bc0;
  --teal: #5fb3a1;

  --glow-cyan: rgba(127, 180, 196, 0.18);
  --glow-amber: rgba(216, 162, 86, 0.18);
  --glow-blue: rgba(94, 124, 166, 0.16);
  --glow-magenta: rgba(169, 139, 192, 0.16);

  --ink: #ece9e2;          /* warm white */
  --ink-soft: #b9bcbe;
  --ink-mute: #8a8d90;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --surface: rgba(13, 14, 16, 0.55);
}

/* ---------- base: flat, neutral, photographic ---------- */
html {
  background: linear-gradient(180deg, #0a0c0f 0%, #090a0d 55%, #08090b 100%) !important;
  background-attachment: fixed !important;
}

body {
  font-family: "Archivo", system-ui, sans-serif;
  color: var(--ink-soft);
}

::selection { background: rgba(216, 162, 86, 0.3); color: #fff; }

h1, h2, h3, h4 {
  font-family: "Archivo", system-ui, sans-serif;
  color: var(--ink);
  letter-spacing: -0.025em;
  font-weight: 600;
  text-shadow: none;
}
.hero-copy h1 {
  font-size: clamp(2.7rem, 5.2vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
h2 { letter-spacing: -0.025em; }
p, .lead { color: #a4a6a8; }
.lead { font-size: 1.06rem; line-height: 1.65; }

/* sparse mono accents */
.eyebrow,
code, pre, kbd,
.marquee-item,
.hero-stat span,
.impact-card small,
.cap-card .cap-tag,
.process-step .step-meta {
  font-family: "IBM Plex Mono", monospace;
}
.eyebrow {
  color: var(--ink-mute);
  letter-spacing: 0.22em;
  font-size: 0.68rem;
  text-shadow: none;
}
.accent {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--amber);
}

/* ---------- buttons: solid + hairline, zero glow ---------- */
.btn-primary {
  background: var(--amber);
  color: #16120b;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: none;
  border: 0;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--amber-strong);
  box-shadow: none;
  transform: none;
}
.btn-secondary {
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  box-shadow: none;
  color: var(--ink);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  border-color: var(--amber);
  color: var(--amber-strong);
  box-shadow: none;
}
.inline-link { color: var(--amber-strong); }

/* ---------- surfaces: flat, hairline, quiet ---------- */
.frame, .glass-card, .frame-impact, .command-shell {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.impact-card, .cap-card, .process-step, .testimonial, .case-card, .stack-panel {
  background: rgba(15, 16, 18, 0.5);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: none;
}
.impact-card:hover, .cap-card:hover, .cap-card[data-tone="gold"]:hover,
.process-step:hover, .testimonial:hover, .case-card:hover {
  box-shadow: none;
  border-color: var(--hairline-strong);
  transform: translateY(-2px);
}
.impact-card strong, .hero-stat strong {
  font-family: "Archivo", sans-serif;
  color: var(--ink);
  text-shadow: none;
  letter-spacing: -0.02em;
}
.impact-card strong em, .impact-card strong .accent { color: var(--amber); }

/* scroll progress: thin amber line */
.nes-scroll-progress {
  height: 2px;
  background: var(--amber);
  box-shadow: none;
}
.marquee-item .dot { box-shadow: none; background: var(--amber); }
.marquee-item { color: var(--ink-mute); letter-spacing: 0.14em; font-size: 0.72rem; }

/* header */
.site-header, header.site-header {
  background: rgba(9, 10, 12, 0.72);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}
.btn-nav, .btn.btn-nav {
  background: var(--amber);
  color: #16120b;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  text-shadow: none;
}
.btn-nav:hover, .btn.btn-nav:hover { background: var(--amber-strong); box-shadow: none; }

/* forms: neutral hairlines, amber focus */
input, textarea, select {
  border-color: var(--hairline-strong) !important;
  background: rgba(12, 13, 15, 0.6) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-family: "Archivo", system-ui, sans-serif !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--amber) !important;
  outline: none;
}
label { color: var(--ink-mute); font-family: "IBM Plex Mono", monospace; letter-spacing: 0.12em; font-size: 0.62rem; }

/* ---------- journey background: film regrade ---------- */
.nes-bg__canvas {
  filter: saturate(0.68) contrast(1.06) brightness(0.84);
}
.nes-bg.is-surge .nes-bg__canvas {
  filter: saturate(0.74) contrast(1.06) brightness(0.92);
}
.nes-bg__grain { opacity: 0.055; }

.nes-hud {
  border: 1px solid var(--hairline);
  background: rgba(9, 10, 12, 0.55);
  border-radius: 6px;
  gap: 0.65rem;
  padding: 0.42rem 0.7rem;
}
.nes-hud__alt {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--amber-strong);
  text-shadow: none;
  letter-spacing: -0.01em;
}
.nes-hud__chapter { color: var(--ink-soft); letter-spacing: 0.2em; font-size: 0.56rem; }
.nes-hud__sub { color: var(--ink-mute); }

.nes-rail__dot { border-color: rgba(255, 255, 255, 0.32); width: 6px; height: 6px; }
.nes-rail__stop.is-active .nes-rail__dot {
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: none;
}
.nes-rail__stop.is-active .nes-rail__label { color: var(--amber-strong); }
.nes-rail__label { color: var(--ink-mute); }

/* click ripple: thin neutral ring */
.nes-ripple {
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
.nes-ripple.is-amber { border-color: var(--amber); box-shadow: none; }

/* ---------- hero mission reel: film grade + letterbox ---------- */
.mission-scene__canvas {
  filter: saturate(0.78) contrast(1.12) brightness(0.96);
}
/* cinema letterbox bars */
.mission-scene::before, .mission-scene::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 5.5%;
  background: #050505;
  z-index: 3;
}
.mission-scene::before { top: 0; }
.mission-scene::after { bottom: 0; }

.mission-hud__corner {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 9, 10, 0.55);
  border-radius: 4px;
  color: #c7cacc;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}
.mission-hud__corner b { color: var(--amber-strong); }
.mission-hud__corner--tl { top: 8.5%; }
.mission-hud__corner--tr { top: 8.5%; }

.mission-pill {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 9, 10, 0.62);
  border-radius: 6px;
  box-shadow: none;
  bottom: 9%;
}
.mission-pill__dot { background: var(--amber); box-shadow: none; }
.mission-pill__tag {
  font-family: "Archivo", sans-serif;
  color: var(--ink);
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}
.mission-pill__sub { color: var(--ink-mute); }
.mission-dots span.is-on { background: var(--amber); box-shadow: none; }

/* floating hero stat cards: quiet chips */
.hero-stat, .float-card {
  background: rgba(10, 11, 13, 0.66);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------- film strip: user-filled real imagery ---------- */
.frame-filmstrip {
  max-width: 1180px;
  margin: 4.5rem auto;
  padding: 0 1.4rem;
}
.filmstrip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.filmstrip-head .eyebrow { margin: 0; }
.filmstrip-head small {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.filmstrip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.filmstrip-grid figure { margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.filmstrip-grid image-slot {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  filter: saturate(0.85) contrast(1.06);
}
.filmstrip-grid figcaption {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@media (max-width: 860px) {
  .filmstrip-grid { grid-template-columns: 1fr; }
}

/* ---------- chatbot bubble: mute it ---------- */
.chat-bubble, .chatbot-toggle, #chat-toggle {
  filter: saturate(0.5) brightness(0.85);
}

/* ---------- restraint pass: kill remaining glow/gradients ---------- */
.cap-card:hover, .cap-card[data-tone="gold"]:hover { box-shadow: none; }
.contact-card, .contact-copy { box-shadow: none; }
.testimonial::before { opacity: 0.25; }
.scan-lines { opacity: 0.35; }