/* Keep the comparison layout unchanged; replace only its atmosphere. */
.network-scene { background: var(--navy, #082b46); }
.city-fallback, .city-tone { position: absolute; inset: 0; width: 100%; height: 100%; }
.city-tone { background: rgb(8 43 70 / 10%); }
.city-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 63% 50%; }
.network-fallback { opacity: .6; }
.hero[data-render-ready="true"] .network-fallback { visibility: hidden; }
.shade { background: linear-gradient(90deg,rgb(6 27 50 / 91%),rgb(6 27 50 / 82%) 28%,rgb(6 27 50 / 58%) 49%,rgb(6 27 50 / 8%) 78%),linear-gradient(0deg,rgb(6 27 50 / 93%),transparent 26%,transparent 80%,rgb(6 27 50 / 30%)); }
.hero.is-background-preview .shade { background: linear-gradient(0deg,rgb(6 27 50 / 80%),transparent 23%,transparent 84%,rgb(6 27 50 / 40%)); }
@media (max-width: 1099px) { .shade { background: linear-gradient(90deg,rgb(6 27 50 / 89%),rgb(6 27 50 / 70%) 48%,rgb(6 27 50 / 22%)),linear-gradient(0deg,rgb(6 27 50 / 88%),transparent 40%); } }
@media (max-width: 599px) {
  /* Keep the full sun clear of the main copy in the revised sky composition. */
  .city-photo { object-position: 67% 50%; }
  .shade { background: linear-gradient(90deg,rgb(6 27 50 / 94%),rgb(6 27 50 / 76%) 55%,rgb(6 27 50 / 40%)),linear-gradient(0deg,rgb(6 27 50 / 90%),transparent 40%); }
}