/* V5.43 · Premium self-contained WebGL building viewer */
.hero-building-3d {
  position: absolute;
  right: 12.5%;
  bottom: -1%;
  z-index: 4;
  width: 48%;
  height: 96%;
  min-width: 420px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transition: opacity 620ms ease;
}

.hero-scene.has-3d-building .hero-building-3d { opacity: 1; }
.hero-scene.has-3d-building .hero-building-render {
  opacity: 0;
  transition: opacity 480ms ease;
}
.hero-scene.has-3d-building .hero-building-wireframe { opacity: 0.13; }

.hero-building-3d.is-dragging { cursor: grabbing; }
.hero-building-3d.is-inspecting { cursor: default; }
.hero-building-3d:focus-visible {
  outline: 1px solid rgba(105,216,240,.8);
  outline-offset: -8px;
  box-shadow: inset 0 0 0 5px rgba(105,216,240,.08);
}

.hero-building-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: inherit;
  filter: drop-shadow(-26px 28px 40px rgba(0,0,0,.48)) drop-shadow(0 0 18px rgba(80,128,148,.06));
  transition: filter 420ms ease;
}
.hero-building-3d.is-inspecting canvas {
  filter: drop-shadow(-18px 22px 32px rgba(0,0,0,.50)) drop-shadow(0 0 22px rgba(196,30,58,.07));
}

.hero-building-3d-status {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 2;
  transform: translate(-50%,-50%);
  color: rgba(220,228,238,.56);
  font: 500 8px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-building-3d.is-ready .hero-building-3d-status { display: none; }

.hero-building-3d-controls {
  position: absolute;
  right: 7%;
  bottom: 6%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border: 1px solid rgba(207,216,228,.17);
  background: rgba(5,8,12,.72);
  color: rgba(231,237,244,.78);
  font: 500 8px/1 'IBM Plex Mono', monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  opacity: .68;
  transform: translateY(3px);
  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.hero-building-3d:hover .hero-building-3d-controls,
.hero-building-3d:focus-within .hero-building-3d-controls,
.hero-building-3d.is-dragging .hero-building-3d-controls {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(105,216,240,.34);
}

.hero-building-step {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(207,216,228,.14);
  background: rgba(255,255,255,.025);
  color: rgba(223,232,242,.78);
  font: 400 18px/1 'IBM Plex Mono', monospace;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.hero-building-step:hover,
.hero-building-step:focus-visible {
  color: #fff;
  background: rgba(105,216,240,.09);
  border-color: rgba(105,216,240,.48);
  outline: none;
}
.hero-building-step:active { background: rgba(196,30,58,.16); }
.hero-building-step:disabled {
  cursor: default;
  opacity: .34;
}

.hero-building-inspect-controls {
  position: absolute;
  left: 0;
  bottom: 16%;
  z-index: 4;
  display: flex;
  align-items: center;
}

.hero-building-action {
  min-height: 48px;
  padding: 0 17px;
  border: 1px solid rgba(211,221,232,.22);
  background: rgba(5,8,12,.82);
  color: rgba(238,243,248,.88);
  font: 600 9px/1.2 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  white-space: nowrap;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.hero-building-inspect {
  min-height: 52px;
  padding: 0 18px;
  border-color: rgba(230,57,70,.78);
  background: linear-gradient(180deg, rgba(55,10,18,.94), rgba(18,7,11,.94));
  color: #fff;
  box-shadow: 0 9px 28px rgba(0,0,0,.42), 0 0 0 1px rgba(230,57,70,.12), inset 0 1px 0 rgba(255,255,255,.045);
}
.hero-building-action[hidden] { display: none !important; }
.hero-building-action:hover,
.hero-building-action:focus-visible {
  color: #fff;
  border-color: rgba(226,55,75,.72);
  background: rgba(40,8,14,.88);
  box-shadow: 0 0 0 3px rgba(196,30,58,.10), inset 0 0 18px rgba(196,30,58,.07);
  outline: none;
}
.hero-building-action:active { background: rgba(76,10,20,.92); }
.hero-building-action:disabled {
  cursor: wait;
  opacity: .52;
}
.hero-building-action-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e63946;
  box-shadow: 0 0 9px rgba(230,57,70,.72);
}
.hero-building-action-arrow {
  margin-left: 4px;
  color: #ff6a78;
  font-size: 13px;
  line-height: 1;
  transform: translateY(-1px);
}
.hero-building-return { border-color: rgba(105,216,240,.28); }
.hero-building-return:hover,
.hero-building-return:focus-visible {
  border-color: rgba(105,216,240,.58);
  background: rgba(7,28,35,.90);
  box-shadow: 0 0 0 3px rgba(105,216,240,.08);
}

/* Compact credibility band between hero and audience pathways. */
.apex-trust-strip {
  position: relative;
  z-index: 7;
  border-top: 1px solid rgba(196,30,58,.28);
  border-bottom: 1px solid rgba(211,220,232,.12);
  background: linear-gradient(90deg, #07080a, #0b0d10 50%, #07080a);
  color: rgba(229,234,240,.82);
}
.apex-trust-strip-inner {
  width: min(1180px, calc(100% - 48px));
  min-height: 48px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 0;
  padding: 10px 0;
}
.apex-trust-strip span {
  display: inline-flex;
  align-items: center;
  font: 500 9px/1.3 'IBM Plex Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.apex-trust-strip span:not(:last-child)::after {
  content: '';
  width: 3px;
  height: 3px;
  margin: 0 clamp(12px, 2.2vw, 28px);
  border-radius: 50%;
  background: #d51f38;
  box-shadow: 0 0 8px rgba(213,31,56,.55);
}

@media (max-width: 1280px) {
  .hero-building-3d { right: 9%; width: 51%; }
}
@media (max-width: 1100px) {
  .hero-building-3d { right: 2%; width: 58%; height: 89%; min-width: 390px; opacity: .88; }
  .hero-building-inspect-controls { left: 5%; bottom: 15%; }
}
@media (max-width: 900px) {
  .hero-building-3d { right: -9%; bottom: 0; width: 66%; height: 82%; min-width: 350px; }
  .hero-building-3d-controls { right: 12%; }
  .hero-building-inspect-controls { left: 8%; bottom: 15%; }
}
@media (max-width: 768px) {
  .hero-building-3d { right: -22%; bottom: 2%; width: 79%; height: 72%; min-width: 330px; opacity: .68; }
  .hero-building-3d-controls { right: 25%; bottom: 1%; opacity: .92; }
  .hero-building-3d-controls > span { display: none; }
  .hero-building-inspect-controls { left: 14%; bottom: 10%; }
  .hero-building-action { min-width: 174px; padding: 0 13px; font-size: 8.5px; letter-spacing: .10em; }
  .apex-trust-strip-inner { width: min(100% - 30px, 620px); min-height: 52px; }
  .apex-trust-strip span { font-size: 8.5px; letter-spacing: .12em; }
  .apex-trust-strip span:not(:last-child)::after { margin: 0 10px; }
}
@media (max-width: 480px) {
  .hero-building-3d { right: -30%; bottom: 4%; width: 86%; height: 62%; min-width: 300px; opacity: .54; }
  .hero-building-3d-controls { right: 34%; }
  .hero-building-inspect-controls { left: 16%; bottom: 12%; }
  .apex-trust-strip-inner { width: calc(100% - 24px); gap: 8px 0; padding: 11px 0; }
  .apex-trust-strip span { font-size: 8px; }
  .apex-trust-strip span:not(:last-child)::after { margin: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-building-3d,
  .hero-building-render,
  .hero-building-3d-controls,
  .hero-building-3d canvas,
  .hero-building-action { transition: none !important; }
}

/* Projected 3D façade marker → microscope tether */
.hero.has-3d-building {
  --tether-facing-opacity: 1;
}
.hero.has-3d-building .diagnostic-tether {
  inset: 0;
  right: auto;
  bottom: auto;
  z-index: 5;
  width: 100%;
  height: 100%;
  opacity: var(--tether-facing-opacity);
  overflow: visible;
  transition: opacity 180ms linear;
}
.hero.has-3d-building .diagnostic-tether path {
  vector-effect: non-scaling-stroke;
}
.hero.has-3d-building .unit-origin-anchor {
  display: block;
  inset: 0;
  right: auto;
  bottom: auto;
  z-index: 6;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  opacity: var(--tether-facing-opacity);
  transition: opacity 180ms linear;
}
.hero.has-3d-building .unit-origin-anchor .unit-origin {
  top: 0;
  left: 0;
  right: auto;
  width: 92px;
  height: 53px;
  min-width: 92px;
  min-height: 53px;
  transform-origin: right center;
}

@media (max-width: 760px) {
  .hero.has-3d-building .diagnostic-tether,
  .hero.has-3d-building .unit-origin-anchor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero.has-3d-building .diagnostic-tether,
  .hero.has-3d-building .unit-origin-anchor { transition: none !important; }
}