/* A8 hero only: one warm charcoal field behind copy and the original sculptures. */
.hero-stage {
  --hero-dark-stage: #191817;
  --hero-dark-ink: #FCF1E7;
  --hero-dark-body: #e1d6cc;
  --hero-dark-muted: #c2b5a8;
  --hero-dark-line: #817970;
  background: var(--hero-dark-stage);
  color: var(--hero-dark-ink);
}

.hero-stage::after { display: none; }
.hero-stage .hero-copy h1 { color: var(--hero-dark-ink); }
.hero-stage .hero-intro { color: var(--hero-dark-body); }
.hero-stage .stage-top,
.hero-stage .stage-top::before,
.hero-stage .hero-copy::before,
.hero-stage .hero-copy h1::before,
.hero-stage .hero-service,
.hero-stage .stage-index { color: var(--hero-dark-muted); }

.hero-stage .hero-cta {
  color: var(--hero-dark-ink);
  border-color: var(--hero-dark-line);
}
.hero-stage .hero-cta:hover { border-color: var(--brand-key); }
.hero-stage :is(a, button):focus-visible {
  outline: 3px solid var(--hero-dark-ink);
  outline-offset: 5px;
}
.hero-stage .stage-top button {
  background: var(--hero-dark-stage);
  color: var(--hero-dark-ink);
  border-color: var(--hero-dark-line);
}
.hero-stage .scene-fallback { background: var(--hero-dark-stage); }

/* The three-line intro keeps the CTA above the original foreground bracket. */
@media (min-width: 701px) {
  .hero-stage .hero-copy { top: 80px; }
  .hero-stage .hero-cta { margin-top: 16px; }
}
@media (max-width: 700px) {
  /* Clear the upper porcelain form in both the live scene and its SVG fallback. */
  .hero-stage .hero-copy { top: 64px; }
}