/* ---- studios-washington-dc.html — page-specific styles (kept out of styles.css) ---- */

/* nav: mark Studios as the active link on this page */
.nav__dd-simple-link.is-active{color:var(--blue)}

/* ---- DC hero ---- */
.dc-hero{max-width:var(--maxw);margin:0 auto;padding-top:clamp(2rem,4vw,3.5rem)}
.dc-hero__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.dc-hero__back{display:inline-block;font-size:.9rem;font-weight:500;color:var(--muted);margin-bottom:1.2rem;text-decoration:none}
.dc-hero__back:hover{color:var(--ink)}
.dc-hero__copy .eyebrow{display:block;margin:0 0 .6rem}
.dc-hero__copy h1{margin-bottom:1.2rem}
.dc-hero__copy p{font-size:1.1rem;max-width:44ch}
.dc-hero__cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
.dc-hero__media img{width:100%;border-radius:var(--radius);object-fit:cover;aspect-ratio:1/1.05}

/* ---- studio grid (real neighborhoods + addresses) ---- */
.dc-grid-section{background:#fff}
.dc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.dc-card{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.5rem;text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease}
.dc-card:hover{border-color:var(--green-dk);box-shadow:0 12px 30px -22px rgba(30,25,15,.4)}
.dc-card__badge{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--green);background:var(--lime);border-radius:999px;padding:.3rem .7rem}
.dc-card h3{font-size:1.2rem;margin:0}
.dc-card p{font-size:.92rem;margin:0;color:var(--muted)}
.dc-card .link-arrow{margin-top:.3rem;font-family:var(--sans);font-weight:600;font-size:.92rem;color:var(--blue)}
.dc-card .link-arrow::after{content:" →"}

/* ---- why Ora DC (clinical team + real studio photo) ---- */
.dc-why__inner{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.dc-why__media img{width:100%;border-radius:var(--radius);object-fit:cover;aspect-ratio:4/5}
.dc-why__copy h2{margin-bottom:1.8rem;max-width:16ch}

/* ---- responsive ---- */
@media(max-width:900px){
  .dc-hero__inner{grid-template-columns:1fr}
  .dc-hero__media{order:-1}
  .dc-grid{grid-template-columns:repeat(2,1fr)}
  .dc-why__inner{grid-template-columns:1fr}
}
@media(max-width:560px){
  .dc-grid{grid-template-columns:1fr}
}