/* ================================================
   EA Spotless Rides — City Page Styles
   Loaded after global.css for /cities/*.html pages.
   ================================================ */

/* CSS file is in /css, so ../hero-bg.jpg points to the site root image. */
.cities .hero-index,
.hero-city { background-image: url("https://images.unsplash.com/photo-1614972973290-3b2f6f6cab49?fm=jpg&q=80&w=1600&fit=crop"); min-height: 380px; }
.service-section { background: var(--black); padding: 2rem 1.5rem; }
.service-section+.service-section { padding-top: 0; }
.service-block { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; max-width: 1200px; margin: 0 auto; }
.service-copy .btn,
.service-copy .btn-primary { margin-top: 1.25rem; }
.service-copy ul { margin-bottom: 0; }
.service-copy li { margin-bottom: .65rem; }
.service-section .btn-primary { margin-top: 1.25rem; }
.service-block .btn-primary { margin-top: 1.25rem; }
.hero-city .hero-content { padding: 5rem 0 3rem; }
.service-visual { background: var(--dark2); border: 1px solid var(--dark3); border-radius: 8px; padding: 2rem 1.5rem; position: relative; overflow: hidden; }
.service-visual-title { font-family: var(--font-display); font-weight: 800; font-size: 52px; text-transform: uppercase; color: rgba(212, 158, 23, .8); line-height: 1; margin-bottom: 1rem; }
.reverse { direction: rtl; }
.reverse>* { direction: ltr; }
.areas-inner,
.travel-inner { max-width: 960px; margin: 0 auto; }
.current { color: var(--white); font-weight: 600; }
.gold { color: var(--gold); }
@media(max-width:768px) { .service-block { grid-template-columns: 1fr; } .reverse { direction: ltr; } }