/* studios-city.css — shared styles for the 6 metro studios pages
   (studios-new-york-city.html, studios-washington-dc-metro.html, studios-boston.html,
   studios-atlanta.html, studios-connecticut.html, studios-nashville.html)
   Layered on top of styles.css. Do not edit styles.css/index.html/script.js.
   Naming convention: everything new here is prefixed `.studio-city-` so sibling
   pages/agents can extend this file additively without colliding. */

/* ---- Hero ---- */
.studio-city-hero{padding-bottom:0}
.studio-city-hero__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.studio-city-hero__copy .eyebrow{display:block;margin-bottom:1rem}
.studio-city-hero__copy h1{max-width:14ch}
.studio-city-hero__copy p{margin:1.2rem 0 1.8rem;max-width:44ch;font-size:1.08rem}
.studio-city-hero__cta{display:flex;gap:.9rem;flex-wrap:wrap}
.studio-city-hero__media img{width:100%;border-radius:var(--radius);object-fit:cover;aspect-ratio:4/3.4}

/* ---- Studio list address line (reuses .studio-list em for the street address) ---- */
.studio-city-list-note{font-size:.92rem;color:var(--muted);margin-top:-1rem;margin-bottom:1.6rem}

/* ---- Closing CTA band ---- */
.studio-city-cta{background:#fff}
.studio-city-cta .wrap{background:var(--green-pale);border-radius:28px;padding:clamp(2.5rem,5vw,3.5rem)}
.studio-city-cta__inner{text-align:center;max-width:640px;margin:0 auto}
.studio-city-cta__inner p{margin:1rem auto 1.8rem;max-width:46ch;font-size:1.08rem}
.studio-city-cta__actions{display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap}

@media (max-width:860px){
  .studio-city-hero__inner{grid-template-columns:1fr}
  .studio-city-hero__media{order:-1}
}