/* Current's selected palette: true black, white and a restrained lime accent.
   Loaded after component styles; the photographs retain their natural color. */
:root {
  --paper: #fff;
  --ink: #080808;
  --deep: #000;
  --muted: #bdbdbd;
  --line: #d9d9d9;
}

.header,
.approach,
.detail-hero {
  background: var(--deep);
}

.demo-bar { color: #ccc; }
.hero-description { color: #e5e5e5; }
.hero-caption { color: #d7d7d7; }
.hero-caption-copy small { color: #ccc; }

/* Neutral shading preserves contrast without tinting the image green. */
.hero-shade {
  background:
    linear-gradient(90deg, rgb(0 0 0 / 97%), rgb(0 0 0 / 82%) 34%, rgb(0 0 0 / 16%) 78%),
    linear-gradient(0deg, rgb(0 0 0 / 70%), transparent 35%);
}

.detail-overlay {
  background: linear-gradient(90deg, rgb(0 0 0 / 93%), rgb(0 0 0 / 79%) 35%, rgb(0 0 0 / 17%));
}

.approach-photo::after { background: rgb(0 0 0 / 7%); }
.breadcrumb { color: #d3d3d3; }
.detail-hero .wrap > p:not(.eyebrow) { color: #ddd; }
.image-note { color: #ddd; }

.approach-copy > p:not(.eyebrow),
.principles li p { color: #c5c5c5; }
.footer-top > p { color: #ccc; }
.footer-bottom { color: #b8b8b8; }

/* Quiet text on light surfaces stays neutral and comfortably readable. */
.service-rail > span,
.section-head > p,
.service-image figcaption,
.service-content p,
.faq-list p,
.page-intro > p:last-child,
.service-feature > div > p:not(.eyebrow),
.scope-list p,
.contact-copy aside p,
.form-note,
.service-overview-copy > p:last-child,
.service-overview-content > p { color: #555; }

.service-overview-content ul { color: #3d3d3d; }
.service-overview-note { color: #646464; }
.service-overview-image { background: #e5e5e5; }

.service-item,
.service-item:last-child,
.faq-list details,
.service-feature,
.scope-list article,
.contact-copy aside,
.service-overview-content li { border-color: var(--line); }

.text-link { border-color: #aaa; }
.text-link.dark { border-color: #777; }
.service-rail a:hover { color: #080808; }

/* Former cream and green-tinted panels now use white with neutral dividers. */
.lighting-explorer,
.prepare,
.project-form { background: var(--paper); }
.lighting-explorer,
.prepare,
.project-form { border: 1px solid var(--line); }
.idea-controls { border-color: #ccc; }
.idea-controls button { color: #555; }

.project-form input,
.project-form select,
.project-form textarea {
  border-color: #aaa;
  background: #fff;
  color: var(--ink);
}

.project-form input::placeholder,
.project-form textarea::placeholder { color: #666; }
.form-result { border-color: #888; background: #fff; }

/* Black review gallery, with a slight charcoal lift for each review. */
.reviews-intro > p { color: #c6c6c6; }
.review-demo-note,
.review-foot,
.review-attribution { color: #bbb; }
.review-placeholder { color: #b4b4b4; }
.review-copy { color: #f2f2f2; }
.review-card { background: #111; border-color: #3e3e3e; }
.review-attribution { border-color: #414141; }
.review-controls button { border-color: #777; }
.review-track { scrollbar-color: #818181 #292929; }
.review-track::-webkit-scrollbar-track { background: #292929; }
.review-track::-webkit-scrollbar-thumb { background: #818181; }

.scene-choice { color: #ddd; border-bottom-color: rgb(255 255 255 / 30%); }
.scene-choice[aria-pressed="true"] { color: var(--lime); border-bottom-color: var(--lime); }
.scene-choice:hover { color: #fff; border-bottom-color: #fff; }
.motion-toggle,
.video-toggle { background: rgb(0 0 0 / 65%); border-color: rgb(255 255 255 / 50%); }
.motion-toggle:hover,
.video-toggle:hover { background: var(--lime); color: var(--ink); }

/* Clear CTA interiors and the established lime current remain intact. */
.button,
.button:hover,
.nav-cta,
.nav-cta:hover {
  --charge-edge: #898989;
  --charge-tip: #fff;
}

.next-step .button,
.next-step .button:hover,
.project-form .button,
.project-form .button:hover {
  --charge-edge: #666;
  --charge-trail: #222;
  --charge-tip: #000;
  --charge-glow: rgb(0 0 0 / 18%);
}

.text-link,
.header nav > a:not(.nav-cta),
.service-overview a.service-link { --edge-highlight: #fff; }
.text-link.dark,
.service-overview a.service-link {
  --edge-light: #333;
  --edge-highlight: var(--lime);
  --edge-glow: rgb(0 0 0 / 12%);
}

/* Replace the former amber focus fallback with a neutral outline. Components
   on black surfaces retain their more specific lime keyboard-focus states. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline-color: currentColor; }

@media (max-width: 760px) {
  .header nav { background: var(--deep); border-bottom-color: #444; }
  .hero-shade {
    background:
      linear-gradient(90deg, rgb(0 0 0 / 91%), rgb(0 0 0 / 55%)),
      linear-gradient(0deg, rgb(0 0 0 / 84%), transparent 75%);
  }
  .detail-overlay { background: linear-gradient(90deg, rgb(0 0 0 / 90%), rgb(0 0 0 / 58%)); }
  .service-rail a:not(:last-child) { border-bottom-color: var(--line); }
}