/* Homepage excerpt: every visible footprint comes from an existing z14 tile. */
.bd-hero-stage {
  isolation: isolate;
  aspect-ratio: 16 / 9;
  min-height: 0;
}
.bd-stage-buildings {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  /* The SVG is already 16:9 (and the stage is 16:9 on desktop).  Contain
     keeps the real building geometry intact instead of allowing a generic
     cover crop to trim edge buildings at any responsive size. */
  object-fit: contain;
  object-position: center;
}
.bd-hero-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.86), transparent 35%, transparent 65%, rgba(0,0,0,.88));
}
.bd-stage-label, .bd-stage-note { z-index: 2; }
.bd-stage-label span, .bd-stage-note { color: #ddd; }
.bd-stage-note a { display: inline-block; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.bd-stage-note a:hover { color: #fff; }
@media (max-width: 1050px) {
  .bd-hero-stage { min-height: 0; }
}
@media (max-width: 720px) {
  main { padding-left: 20px; padding-right: 20px; }
  .bd-hero { gap: 28px; }
  .bd-hero-stage { aspect-ratio: 4 / 5; min-height: 0; }
  .bd-stage-label { left: 18px; top: 18px; right: 18px; }
  .bd-stage-note { left: 18px; right: 18px; bottom: 16px; font-size: 11px; }
  .bd-actions > * { max-width: 100%; }
  .bd-button { line-height: 1.4; }
}
@media (max-width: 380px) {
  .bd-hero h1 { font-size: clamp(44px, 13vw, 62px); }
  .bd-hero-stage { aspect-ratio: 1 / 1.25; }
  .bd-metrics strong { font-size: 23px; }
}