/* Native light-dark colors follow the OS and respond live to preference changes. */
:root {
  scrollbar-gutter: stable;
  color-scheme: light dark;
  --ink: light-dark(#202e25, #edf2e8);
  --muted: light-dark(#667067, #b2bdb1);
  --paper: light-dark(#f7f8f4, #1c251f);
  --white: light-dark(#ffffff, #131c16);
  --surface: light-dark(#ffffff, #1c251f);
  --line: light-dark(#dce1d7, #475448);
  --highlight: light-dark(#294634, #bbcd8b);
  --link-hover: light-dark(#5d7437, #d0e3a8);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { background: var(--white); }
.site-header, #main-nav, .service-card, .filters button,
.secondary-button, .menu-toggle, input, select, textarea, .skip-link {
  background: var(--surface);
  color: var(--ink);
}
.eyebrow, .filters button { color: var(--highlight); }
.number { color: light-dark(#53683e, #bbcd8b); }
a:hover { color: var(--link-hover); }
.button:hover { color: white; }
.button.light:hover { color: #294634; }
.notice { background: light-dark(#f1f3e8, #2b3826); color: light-dark(#4f6041, #d0dfbd); }
input::placeholder, textarea::placeholder { color: light-dark(#7a8178, #a4aea0); }
input, select, textarea { border-color: var(--line); }
.image-label, .service-banner > span { color: #202e25; color-scheme: light; }
.image-label > span:last-child { color: #667067; }
.filters button[aria-pressed="true"] { background: var(--green); color: white; }
.footer-appearance { display: flex; justify-content: flex-end; padding-block: 0 20px; }
.theme-picker { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: .7rem; color: var(--muted); }
/* Reserve the selector's space before its event handlers are initialized. */
.theme-picker[hidden] { display: flex !important; visibility: hidden; }
.theme-picker select { margin: 0; width: auto; padding: 6px 8px; font-size: .7rem; background: transparent; color: var(--muted); border-color: var(--line); }
.header-inner { gap: 18px; }
#main-nav { gap: 22px; }
/* Active-page emphasis must not change link widths between pages. */
#main-nav a { font-weight: 500; }
#main-nav [aria-current="page"] { font-weight: 500; }
/* Invert only the black transparent logo, never the project photographs. */
:root[data-theme="dark"] .brand img { filter: invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand img { filter: invert(1); }
}
@media (max-width: 760px) {
  .menu-toggle[hidden] { display: flex !important; visibility: hidden; }
  :root[data-theme] #main-nav:not(.is-open) { display: none; }
  .header-inner { gap: 10px; }
  .footer-appearance { justify-content: flex-start; }
  .menu-toggle { padding: 10px; gap: 8px; }
  #main-nav { gap: 0; }
}
@media (min-width: 761px) and (max-width: 900px) {
  #main-nav { gap: 12px; }
  #main-nav a { font-size: .76rem; }
  .header-inner { gap: 12px; }
}