/* The media stays behind the copy and never participates in page layout. */
.hero.hero-city {
  padding: 160px 0 0;
  background: #080f1c;
  isolation: isolate;
}
.hero-city::before,
.hero-city::after { content: none; }
.hero-city-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hero-city-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,14,25,.16), transparent 30%, rgba(7,14,25,.12) 70%, #080f1c 100%),
    linear-gradient(90deg, rgba(7,14,25,.62) 0%, rgba(7,14,25,.52) 28%, rgba(7,14,25,.3) 48%, rgba(7,14,25,.04) 76%, rgba(7,14,25,.06) 100%);
}
.hero-city-poster,
.hero-city-video { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; object-position: 62% 46%; }
.hero-city-video { opacity: 0; transition: opacity .7s ease; }
.hero-city.has-city-video .hero-city-video { opacity: 1; }
.hero-city .wrap { max-width: 1280px; }
.hero-city .hero-grid { grid-template-columns: minmax(0,1fr); min-height: 500px; gap: 0; align-items: center; }
.hero-city .hero-copy { max-width: 770px; padding: 24px 0 34px; }
.hero-city .hero-badge {
  border: 0; border-left: 2px solid #8abef9; border-radius: 0;
  padding: 0 0 0 13px; margin-bottom: 28px;
  color: #c1d2e8; background: none; box-shadow: none;
  font-size: .875rem; font-weight: 500; line-height: 1.65;
}
.hero-city .hero-badge::before { content: none; }
.hero-city h1 {
  font-size: clamp(2.8rem,4.7vw,4.25rem); font-weight: 800;
  line-height: 1.25; letter-spacing: -.055em;
  text-shadow: 0 3px 32px rgba(0,0,0,.18);
}
.hero-city h1 em { background: none; color: #9dcbff; }
.hero-city .hero-sub { max-width: 560px; margin-top: 29px; font-size: 1.0625rem; line-height: 1.85; color: #c2cddd; }
.hero-city .hero-sub strong { color: #f0f4fa; font-weight: 500; }
.hero-city .hero-sub p { margin-bottom: 12px; }
.hero-city .hero-actions { margin-top: 32px; gap: 12px; }
.hero-city .btn { border-radius: 7px; min-height: 54px; font-size: 1rem; }
.hero-city .btn-primary { background: #377de8; box-shadow: 0 8px 28px rgba(5,16,36,.24); }
.hero-city .btn-ghost { background: rgba(13,24,40,.52); border-color: rgba(203,222,247,.4); }
.hero-city .hero-note { font-size: .875rem; color: #acbbce; margin-top: 19px; }
.hero-city-controls { min-height: 54px; display: flex; justify-content: flex-end; align-items: flex-start; padding-bottom: 12px; }
.hero-motion-toggle {
  display: inline-flex; gap: 9px; align-items: center; justify-content: center;
  min-height: 44px; padding: 9px 14px; border-radius: 6px;
  border: 1px solid rgba(201,218,244,.25); background: rgba(9,18,32,.6);
  color: #d4deec; font-size: .875rem; font-weight: 500; line-height: 1.4; font-family: inherit; cursor: pointer;
}
.hero-motion-toggle[hidden] { display: none; }
.hero-motion-toggle:hover { background: rgba(34,53,77,.9); border-color: rgba(201,218,244,.65); }
.hero-motion-toggle:focus-visible { outline: 2px solid #a9d2ff; outline-offset: 4px; }
.hero-motion-toggle .motion-pause,
.hero-motion-toggle[aria-pressed="true"] .motion-play { display: none; }
.hero-motion-toggle[aria-pressed="true"] .motion-pause { display: block; }
.hero-city .ticker { margin-top: 0; z-index: 1; background: rgba(7,14,25,.58); border-top-color: rgba(174,201,236,.15); }
@media (min-width:1600px) {
  .hero.hero-city { padding-top: 185px; }
  .hero-city .hero-grid { min-height: 540px; }
}
@media (max-width:1100px) {
  .header .nav { display: none; }
  .header .menu-btn { display: flex; }
  .hero.hero-city { padding-top: 132px; }
  .hero-city .hero-copy { max-width: 700px; }
}
@media (max-width:680px) {
  .hero.hero-city { padding-top: 130px; }
  .hero-city .wrap { max-width: 100%; margin-inline: auto; padding-inline: 24px; }
  .hero-city .hero-grid { min-height: 0; }
  .hero-city .hero-copy { max-width: 100%; padding: 14px 0 28px; }
  .hero-city .hero-badge { max-width: 295px; font-size: .875rem; line-height: 1.7; margin-bottom: 27px; }
  .hero-city h1 { font-size: clamp(2rem,7.4vw,3.1rem); line-height: 1.35; letter-spacing: -.055em; }
  .hero-city .hero-sub { margin-top: 26px; max-width: 440px; }
  .hero-city .hero-sub p { font-size: 1rem; line-height: 1.85; }
  .hero-city .hero-actions { margin-top: 28px; }
  .hero-city .hero-note { font-size: .875rem; }
  .hero-city-media::after {
    background: linear-gradient(180deg, rgba(7,14,25,.18), rgba(7,14,25,.5) 23%, rgba(7,14,25,.8) 55%, #080f1c 100%),
      linear-gradient(90deg, rgba(7,14,25,.48), rgba(7,14,25,.12));
  }
  .hero-city-poster,.hero-city-video { object-position: 67% top; }
  .hero-city-controls { min-height: 52px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-city-video { transition: none; }
}