:root { color-scheme: dark; }
html, body, #root { background: #0c0c0c; color: #d7e2ea; }
html { scroll-behavior: smooth; }
h1 .hero-heading { font-size: clamp(3.2rem, 13.3vw, 210px); letter-spacing: -.055em; }
#services { background: #111615 !important; color: #d7e2ea; }
#services h2 span, #services h3, #services p, #services h3 + p,
#services .flex.flex-col, #services .min-w-\[clamp\(4\.5rem\,13vw\,10rem\)\] { color: #d7e2ea !important; }
#services .grid > div { background: rgba(255,255,255,.025); border-color: rgba(215,226,234,.12); box-shadow: none; }
#services h3 { color: #61ffb0 !important; }
#services .grid > div > div:first-child { color: #61ffb0 !important; opacity: .6; }
#services .pointer-events-none { opacity: .12 !important; }
a:focus-visible, button:focus-visible { outline: 2px solid #61ffb0; outline-offset: 5px; }
.contact-panel { border-color: rgba(97,255,176,.2); }
.hero-portrait-base { width: 70% !important; margin-inline: auto; }
.hero-copy-motion { max-width: 310px; }
@media (max-width: 639px) {
  h1 .hero-heading { font-size: 13vw; }
  section > div:has(.hero-copy-motion) { display: block !important; top: 72% !important; left: 6% !important; max-width: 88%; }
  .hero-copy-motion { max-width: 100%; }
  .hero-copy-motion p { font-size: .82rem; }
  .hero-copy-line { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }