:root {
  color-scheme: light;
  --page: #ffffff;
  --card: #ffffff;
  --header: #fffffff5;
  --ink: #142535;
  --muted: #536b7a;
  --surface: #f4f9fb;
  --line: #dfeaf0;
  --blue: #146d9e;
  --detail: #087b9b;
  --nav: #435f71;
  --step-line: #9fcbdc;
  --button-dark: #0d2331;
  --button-text: #ffffff;
  --focus: #087b9b;
  --hover-border: #087b9b;
  --theme-shadow: 0 15px 30px #08121c26;
  --portfolio-shadow: 0 16px 36px #0a587018;
  --portfolio-error: #b23a48;
  --on-art-muted: #b4d5e3;
  --on-art-accent: #69d8f2;
  --on-art: #ffffff;
  --art-blue: #146d9e;
  --portfolio-hero: linear-gradient(135deg,var(--dark),var(--art-blue));
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #08121c;
  --card: #102635;
  --header: #08121cf5;
  --ink: #e8f4fa;
  --muted: #acc4d1;
  --surface: #0b1c29;
  --line: #2c495b;
  --blue: #69d8f2;
  --detail: #69d8f2;
  --nav: #c4dce8;
  --step-line: #36728c;
  --button-dark: #69d8f2;
  --button-text: #08121c;
  --focus: #69d8f2;
  --hover-border: #69d8f2;
  --theme-shadow: 0 15px 30px #00000066;
  --portfolio-shadow: 0 16px 36px #00000040;
  --portfolio-error: #ffacb5;
}
html, body { background: var(--page); color: var(--ink); letter-spacing: 0; }
h1, h2, h3, .brand { letter-spacing: 0; }
.site-header { background: var(--header); border-color: var(--line); }
.topbar { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 18px; }
.brand, .links { min-width: 0; }
.links { justify-content: flex-end; gap: 20px; }
.brand small, .metric span { color: var(--muted); }
.links { color: var(--nav); }
.links a:hover, .eyebrow, .label, .service .number, .check i, .step b { color: var(--detail); }
.btn-dark { background: var(--button-dark); color: var(--button-text); }
.btn-outline { border-color: var(--step-line); color: var(--nav); }
.metric strong { color: var(--blue); }
.service, .work { background: var(--card); border-color: var(--line); }
.service:hover { border-color: var(--hover-border); box-shadow: var(--portfolio-shadow); }
.service p, .work-copy p, .about p, .step p, #portfolio > .container > .muted { color: var(--muted) !important; }
.steps { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 24px; }
.step { min-width: 0; border-color: var(--step-line); }
.step h3 { font-size: 20px; }
.step p, .step b { overflow-wrap: anywhere; }
.hero p, .hero-note, .about-visual:after { color: var(--on-art-muted); }
.hero .eyebrow, .cta .eyebrow, .footer a:hover { color: var(--on-art-accent); }
.hero, .cta, .footer .brand { color: var(--on-art); }
.footer .brand small { color: var(--on-art-muted); }
#publicPortfolio .cover-placeholder small { color: var(--on-art-accent); }
.theme-toggle, .menu-toggle {
  width: 44px; height: 44px; display: inline-grid; place-items: center;
  flex-shrink: 0; padding: 0; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink);
}
.menu-toggle { display: none; }
.theme-toggle:hover { border-color: var(--detail); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: none; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
@media (max-width:1100px) {
  .links { gap: 12px; font-size: 12px; }
  .links .btn { padding: 12px; }
  .steps { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:1000px) {
  .topbar { grid-template-columns: minmax(0,1fr) auto auto; }
  .menu-toggle { display: inline-grid; }
  .links { display: none; position: absolute; top: 78px; left: 0; right: 0; padding: 22px; background: var(--card); box-shadow: var(--theme-shadow); flex-direction: column; align-items: stretch; max-height: calc(100dvh - 78px); overflow-y: auto; }
  .links.open { display: flex; }
  .links a { min-height: 44px; display: flex; align-items: center; }
  .links .btn { width: 100%; }
}
@media (max-width:900px) { .steps { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:680px) {
  .topbar { gap: 8px; }
  .brand { gap: 6px; font-size: 16px; }
  .brand svg { width: 36px; height: 36px; flex-shrink: 0; }
  .links { top: 68px; max-height: calc(100dvh - 68px); }
  .steps { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .step p { margin-bottom: 0; }
  .hero h1 { font-size: 40px; }
  .footer-grid > div { min-width: 0; }
  .footer a { overflow-wrap: anywhere; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } .reveal { animation: none; } .btn, .service, #publicPortfolio .work { transition: none; } }