/* Black canvas, white typography, light panels for report and data examples. */
:root {
  --ink: #f5f5f2;
  --paper: #0b0b0b;
  --muted: #b8b8b2;
  --rule: #363633;
  --wash: #141414;
  color-scheme: dark;
}
.site-header { background: var(--paper); }
.logo-crop img { filter: none; }
.menu-toggle { color: var(--ink); }
h1 > span { color: #b8b8b2; }
.hero-description > p { color: #d7d7d2; }
.button { border-color: var(--ink); }
.button-dark { background: var(--ink); color: var(--paper); }
.button-dark:hover { background: #d7d7d2; }
.button-outline { color: var(--ink); }
.button-outline:hover { background: #242424; }
.skip-link { background: var(--ink); color: var(--paper); }
.project,
.case-details,
.case-grid > div,
.service-navigation { border-color: var(--rule); }
.project-description { color: #c9c9c3; }
.preparation-label { border-color: #686862; }
.signature-name { color: var(--ink); }
.project-link { border-color: #8a8a82; }
.project-link:hover { border-color: var(--ink); }
.service-navigation a { text-decoration-color: #686862; }
.service-navigation a:hover { text-decoration-color: var(--ink); }

/* Keep light demonstration surfaces distinct from their dark surroundings. */
.visual-scouting,
.visual-report,
.mini-report {
  color: #111;
  color-scheme: light;
}
.visual-intelligence,
.visual-content { border: 1px solid var(--rule); }
.mini-report:focus-visible { outline-color: #111; }
.contact-section,
.site-footer { background: var(--paper); }
.contact-section { border-top: 1px solid var(--rule); }

.contact-bottom { align-items: start; }
.message-contact { margin-top: 18px; }
.message-number { margin: 8px 0 14px; font-size: 18px; line-height: 1.5; }
.message-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.message-actions a { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 20px; border: 1px solid #73736d; color: var(--ink); font-size: 15px; line-height: 1.4; }
.message-actions a:hover { background: var(--wash); border-color: var(--ink); }
.footer-social { display: flex; justify-content: center; align-items: center; gap: 12px; width: auto; order: initial; margin: 0; padding: 20px 0 0; }
.footer-social a { display: inline-flex; justify-content: center; align-items: center; flex: none; width: 44px; height: 44px; padding: 0; color: var(--muted); }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--ink); text-decoration: none; }
.footer-social svg { display: block; width: 22px; height: 22px; }
@media (max-width: 370px) {
  .contact-section h2 { font-size: 34px; }
}