/* A single midnight canvas carries the navigation, artwork and every route. */
@media screen {
  :root {
    color-scheme: dark;
    --bg: #080b16;
    --night: #080b16;
    --ink: #f1f0fa;
    --muted: #b5b7ca;
    --purple: #c5b8ff;
    --electric: #c5b8ff;
    --line: #292d43;
    --surface: #101423;
    --surface-hover: #181b30;
    --button-ink: #17142c;
  }

  html, body { background: var(--bg); color: var(--ink); }
  ::selection { background: #c5b8ff; color: #17142c; }
  .site-header { background: #080b16f2; border-bottom-color: transparent; }
  /* Reversed wordmark artwork: no filters or blending (brand misuse rule). */
  .brand img, .footer-brand img {
    filter: none;
    mix-blend-mode: normal;
  }
  .nav a { color: var(--muted); }
  .nav a:hover, .nav a[aria-current=page] { color: var(--electric); }
  .menu-toggle { color: var(--ink); border-color: var(--line); }
  .nav-cta, .button, .button-purple, .button-white, .button-electric, .skip-link {
    background: var(--electric); border-color: var(--electric); color: var(--button-ink);
  }
  .nav-cta:hover, .button:hover, .button-purple:hover, .button-white:hover, .button-electric:hover {
    background: #ddd4ff; border-color: #ddd4ff; color: var(--button-ink);
  }
  .text-link, .light-link { color: var(--ink); }
  .text-link:hover, .light-link:hover { color: var(--electric); }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
  textarea:focus-visible, summary:focus-visible { outline-color: var(--electric); }

  .future-hero, .global-section, .human-section, .resources-band, .page-hero,
  .contact-page-hero, .meeting-page-hero, .payments-intro, .site-footer,
  .policy-teaser, .approach { background: var(--bg); color: var(--ink); }
  .page-hero { border-bottom-color: transparent; }
  .future-hero:after, .global-section:after, .payments-intro:after {
    background:
      linear-gradient(180deg, var(--bg), transparent 22%, transparent 72%, var(--bg)),
      linear-gradient(90deg, #080b16f5 0%, #080b16ba 29%, #080b1615 70%);
  }
  .hero-visual, .global-art, .payments-intro-art {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 75%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 15%, #000 75%, transparent);
  }
  .future-hero .eyebrow, .global-content .eyebrow, .payments-intro .eyebrow,
  .future-hero h1 em, .payments-intro h1 em { color: var(--electric); }
  .hero-description, .hero-proof, .global-content>p:not(.eyebrow), .payments-intro .lead,
  .inline-points { color: var(--muted); }
  .rail-strip { color: var(--ink); border-color: var(--line); }

  /* Reuse the chrome artwork, with its light canvas dissolving into midnight. */
  .human-art, .page-art, .hero-art {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: screen;
    opacity: .68;
  }
  .human-art {
    -webkit-mask-image: radial-gradient(ellipse 74% 67% at 72% 50%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 74% 67% at 72% 50%, #000 30%, transparent 78%);
  }
  .human-section:after {
    background: linear-gradient(90deg, var(--bg) 0%, #080b16e6 31%, #080b1610 76%);
  }
  .human-content .human-lead { color: var(--ink) !important; }
  .human-support-line span { color: var(--muted); border-color: var(--line); }
  .hero:after, .page-heading-row:after {
    background: linear-gradient(90deg, var(--bg) 10%, #080b16eb 38%, #080b1640 68%, transparent);
  }

  /* Panels use only a small tonal lift, never a new section colour. */
  .payment-card, .payment-card-accent, .document-card, .form-card, .inbox-card,
  .source-page, .no-results, .small-service, .licence-callout, .licence-download,
  .contact-panel, .meeting-banner, .booking-note, .pill {
    background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: none;
  }
  .payment-card:hover, .small-service:hover {
    background: var(--surface-hover); border-color: #625887; box-shadow: 0 12px 36px #00000024;
  }
  .card-bottom, .payment-card-accent .card-bottom, .resource-links a,
  .document-bottom, .footer-legal, .footer-meta { border-color: var(--line); }
  .card-kicker, .document-number, .document-bottom, .document-details summary,
  .document-status, .document-status.source-approved, .service-index, .licence-nav p,
  .company-grid dt, .secondary-phone, .footer-brand p, .footer-links,
  .footer-legal p, .footer-meta, .contact-panel p, .contact-links address { color: var(--muted); }
  .card-bottom>span, .detail-tags span, .document-category, .pdf-icon,
  .resource-links a>span:last-child { color: var(--electric); }
  .footer-links strong, .footer-legal p>strong, .footer-meta strong { color: var(--ink); }
  .footer-brand>a:not(:first-child) { color: var(--electric); }
  .detail-tags span, .contact-email-small, .contact-email, .payment-side-nav { border-color: var(--line); }
  .payment-side-nav { color: var(--muted); }
  .payment-side-nav a:hover { background: var(--surface-hover); color: var(--electric); }
  .service-icon, .inbox-message { background: var(--surface-hover); color: var(--ink); }

  .search-box, .page-jump select, .inbox-toolbar select, .inbox-status-select {
    background: var(--surface); border-color: var(--line); color: var(--ink);
  }
  .search-box svg { color: var(--muted); }
  .search-box input::placeholder { color: #969aaf; opacity: 1; }
  .filter-button { color: var(--muted); border-color: var(--line); }
  .filter-button:hover { background: var(--surface-hover); color: var(--ink); }
  .filter-button[aria-pressed=true] {
    background: var(--electric); border-color: var(--electric); color: var(--button-ink);
  }
  .form-field label { color: var(--ink); }
  .form-field label>span, .consent-label { color: var(--muted); }
  .form-field input, .form-field select, .form-field textarea {
    background: var(--bg); border-color: #373c55; color: var(--ink);
  }
  .form-field input::placeholder, .form-field textarea::placeholder { color: #969aaf; opacity: 1; }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus,
  .search-box:focus-within { border-color: var(--electric); box-shadow: 0 0 0 3px #c5b8ff1f; }
  .consent-label a { color: var(--electric); }
  .form-status { background: #201c36; border-color: #605780; color: var(--ink); }
  .form-status.error { background: #2d1726; border-color: #91566e; color: #ffc4d7; }
  .form-status.success { background: #142924; border-color: #497c6a; color: #bcebd9; }
  .form-field input:-webkit-autofill {
    -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
    caret-color: var(--ink);
  }
  .footer-legal p, .footer-meta, .eyebrow, .card-kicker,
  .future-hero .eyebrow, .global-content .eyebrow, .hero-proof,
  .detail-tags span, .meeting-banner .eyebrow { font-size: 12px; }

  @media (max-width: 850px) {
    .nav, .nav.open { background: var(--bg); border-color: var(--line); }
    .human-art { opacity: .52; }
    .future-hero:after, .global-section:after, .payments-intro:after {
      background:
        linear-gradient(180deg, var(--bg), transparent 22%, transparent 72%, var(--bg)),
        linear-gradient(90deg, #080b16ee, #080b16a6 62%, #080b1622);
    }
  }
  @media (max-width: 600px) {
    .future-hero:after, .payments-intro:after {
      background: linear-gradient(180deg, var(--bg) 0%, #080b16f5 38%, #080b1630 78%, var(--bg));
    }
    .global-section:after, .human-section:after {
      background: linear-gradient(180deg, var(--bg) 0%, #080b16f0 43%, #080b1630 72%, var(--bg));
    }
    .human-art {
      opacity: .8;
      -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 65%, #000 82%, transparent);
      mask-image: linear-gradient(180deg, transparent 30%, #000 65%, #000 82%, transparent);
    }
    .page-heading-row:after { background: linear-gradient(90deg, #080b16f5, #080b1699 70%, transparent); }
    .footer-links { font-size: 14px; }
    .footer-links strong { font-size: 12px; }
  }
}