/* Local vector architecture. Content remains above a dark, readable overlay. */
.hero:has(.hero-build) {
  background: radial-gradient(ellipse at 78% 38%, #546f78 0%, #2c424a 42%, #1f2e33 78%);
}
.hero:has(.hero-build)::before {
  background: linear-gradient(90deg, #1f2e33f5 0%, #1f2e33e6 24%, #1f2e3370 47%, #1f2e3300 76%),
    linear-gradient(0deg, #1f2e33b3, transparent 55%);
}
.hero:has(.hero-build)::after { display: none; }
.hero-build {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
}
.hero-build svg {
  position: absolute;
  width: min(67%, 920px);
  height: 80%;
  right: -8%;
  top: -15%;
  overflow: visible;
  stroke: #bfd4da;
  stroke-width: 1;
}
.hero-build__grid { opacity: .3; }
.hero:has(.hero-build) .hero-note.card { transform: translateY(58px); }
.build-grid { stroke: #72afc0; stroke-width: .6; }
.build-plan { stroke: #8ec4d3; stroke-width: 1.5; stroke-dasharray: 7 5; }
.build-shadow { fill: #15252b; stroke: none; opacity: .35; }
.build-face { fill: #546f78; }
.build-side { fill: #354c54; }
.build-top { fill: #a0b6bc; }
.build-foundation.build-top { fill: #647f88; }
.build-step.build-top { fill: #8aa2aa; }
.build-column, .build-beam { stroke: #d5e2e5; stroke-width: 1.2; }
.build-column.build-top, .build-beam.build-top { fill: #d0e0e4; }
.build-inner-wall { fill: #526d77; }
.build-partition.build-face { fill: #b8c9cb; }
.build-sofa.build-top { fill: #e0dcd3; }
.build-sofa.build-face { fill: #a9b5b3; }
.build-table.build-top { fill: #82b7c5; }
.build-unit.build-top { fill: #afbfc2; }
.build-glass { fill: #8ec9d12b; stroke: #b4d7e1; }
.build-mullion { stroke: #c4e0e6; stroke-width: 1.6; }
.build-cladding { fill: #3d5863; }
.build-side-window { fill: #8dbdcd; stroke: #d1e8ec; }
.build-door { fill: #233b45; stroke: #93becb; }
.build-roof.build-top { fill: #a4b9bc; stroke: #e1ecec; }
.build-roof.build-face { fill: #6b8791; }
.build-roof.build-side { fill: #4f6c78; }
.build-skylight { fill: #355c6b; stroke: #d1e4e9; }
.build-roof-seam { stroke: #7fb1be; }
.build-light { stroke: #b9e9ec; stroke-width: 3; }
.build-planter.build-top { fill: #5d7c85; }
.build-leaf.build-top { fill: #789b93; }
.build-leaf.build-face { fill: #436f68; }
.hero-build__stage { animation-duration: 18s; animation-delay: -14s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.hero-build__foundation { animation-name: hero-house-foundation; }
.hero-build__frame { animation-name: hero-house-frame; }
.hero-build__interior { animation-name: hero-house-interior; }
.hero-build__facade { animation-name: hero-house-facade; }
.hero-build__roof { animation-name: hero-house-roof; }
.hero-build__finish { animation-name: hero-house-finish; }
@keyframes hero-house-foundation {
  0%, 3%, 100% { opacity: 0; transform: translateY(12px); }
  11%, 91% { opacity: 1; transform: none; }
  98% { opacity: 0; transform: none; }
}
@keyframes hero-house-frame {
  0%, 11%, 100% { opacity: 0; transform: translateY(-28px); }
  23%, 91% { opacity: 1; transform: none; }
  98% { opacity: 0; transform: none; }
}
@keyframes hero-house-interior {
  0%, 25%, 100% { opacity: 0; transform: translateY(-16px); }
  37%, 91% { opacity: 1; transform: none; }
  98% { opacity: 0; transform: none; }
}
@keyframes hero-house-facade {
  0%, 39%, 100% { opacity: 0; transform: translateY(-22px); }
  51%, 91% { opacity: 1; transform: none; }
  98% { opacity: 0; transform: none; }
}
@keyframes hero-house-roof {
  0%, 53%, 100% { opacity: 0; transform: translateY(-42px); }
  65%, 91% { opacity: 1; transform: none; }
  98% { opacity: 0; transform: none; }
}
@keyframes hero-house-finish {
  0%, 67%, 100% { opacity: 0; transform: translateY(5px); }
  77%, 91% { opacity: 1; transform: none; }
  98% { opacity: 0; transform: none; }
}
.motion-paused .hero-build__stage,
.ambient-outside.hero-build .hero-build__stage { animation-play-state: paused; }
@media (max-width: 980px) {
  .hero-build svg { width: 90%; right: -20%; top: -6%; }
  .hero:has(.hero-build) .hero-note.card { transform: none; }
}
@media (max-width: 760px) {
  .hero-build svg { width: 110%; right: -26%; top: 5%; height: 65%; opacity: .75; }
  .hero:has(.hero-build)::before {
    background: linear-gradient(90deg, #1f2e33f5, #1f2e33a8 62%, #1f2e3366),
      linear-gradient(0deg, #1f2e33cc, transparent 70%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-build__stage { animation: none; opacity: 1; transform: none; }
}
@media (forced-colors: active) { .hero-build { display: none; } }