/* Studio detail pages — split hero: copy on the left, one image on the right (shared hero media shadow). */
.sd-hero { background: var(--bg); padding: 128px 0 64px; }
.sd-hero-grid {
  max-width: var(--site-max-w);
  margin: 0 auto;
  padding: 0 var(--site-pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.sd-hero-badge {
  display: inline-block;
  margin-bottom: 16px;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}
.sd-hero-copy h1 { margin: 0 0 20px; text-align: left; color: var(--fg-primary); }
.sd-hero-copy p {
  margin: 0;
  font-size: var(--text-body-lg);
  line-height: 1.7;
  color: var(--fg-secondary);
}
.sd-hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.sd-hero-media { margin: 0; }
.sd-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--hero-media-shadow);
}

/* Side padding is var(--site-pad-x), the same as the footer (global.css .footer-main). */
@media (max-width: 899px) {
  .sd-hero { padding: 108px 0 48px; }
  .sd-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .sd-hero-media { order: -1; }
}