.cities-hero { overflow: hidden; background: radial-gradient(circle at 80% 30%, rgba(212,137,26,.16), transparent 34%), var(--bg-body); }
.cities-hero-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(28px, 6vw, 80px); }
.cities-hero .lead { margin-top: 24px; }
.journey-art { position: relative; }
.journey-art::before { content: ""; position: absolute; inset: 10% 8%; border-radius: 50%; background: rgba(212,137,26,.14); filter: blur(55px); }
.journey-art img { position: relative; width: 100%; max-height: 640px; object-fit: contain; filter: drop-shadow(0 20px 38px rgba(0,0,0,.45)); }

.cities-list { background: var(--bg-elevated); border-top: 1px solid var(--color-border); }
.cities-list-head { max-width: 850px; margin-bottom: 38px; }
.city-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.city-card { overflow: hidden; display: grid; grid-template-rows: auto 1fr; background: var(--card-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.city-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: #050505; }
.city-card-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.city-card:hover .city-card-media img { transform: scale(1.045); }
.city-card-body { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; align-items: flex-start; }
.city-count { color: var(--gold); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.city-card h3 { margin: 8px 0 16px; font-family: var(--fd); font-size: clamp(36px, 4vw, 52px); line-height: .9; letter-spacing: .04em; text-transform: uppercase; }
.city-card ul { margin-bottom: 24px; }
.city-card li + li { margin-top: 8px; }
.city-card li a { color: var(--text-muted); font-size: 13px; line-height: 1.4; transition: color .25s; }
.city-card li a:hover { color: var(--gold); }
.city-card .btn-secondary { margin-top: auto; min-height: 40px; padding: 8px 15px; font-size: 12px; }

@media (max-width: 980px) {
  .city-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .cities-hero-grid { grid-template-columns: 1fr; }
  .journey-art { max-width: 700px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .city-card-media { aspect-ratio: 16 / 9; }
}