/* Hero rhythm — keep the photograph and portfolio visually distinct. */
body.studio[data-page="home"] .hero {
  --reef-hero-bleed: 0px;
  overflow: hidden;
  align-items: flex-start;
}
body.studio[data-page="home"] .hero__media {
  bottom: 0 !important;
  transform: none !important;
}
body.studio[data-page="home"] .hero::after {
  inset: 0 !important;
}
body.studio[data-page="home"] .hero__media::after {
  background: linear-gradient(to bottom,
    rgba(0,0,0,.14) 0%,
    transparent 20%,
    transparent 61%,
    rgba(46,46,46,.10) 71%,
    rgba(46,46,46,.48) 85%,
    rgba(46,46,46,.88) 95%,
    #2e2e2e 100%) !important;
}
body.studio[data-page="home"] .work {
  background: #2e2e2e;
  padding-top: 36px;
}
@media (min-width: 901px) {
  body.studio[data-page="home"] .hero {
    min-height: clamp(700px, 88svh, 960px);
  }
  body.studio[data-page="home"] .hero__sub {
    font-size: clamp(20px, 1.65vw, 23px);
    line-height: 1.48;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  body.studio[data-page="home"] .hero {
    min-height: 640px;
  }
}
@media (max-width: 600px) and (orientation: portrait) {
  body.studio[data-page="home"] .hero {
    min-height: 660px;
    padding-bottom: 88px;
  }
  body.studio[data-page="home"] .hero__media::before {
    background-position: 27% center;
  }
  body.studio[data-page="home"] .work {
    padding-top: 28px;
  }
}
/* Landscape phones keep the existing wide framing; only add breathing room. */
@media (max-width: 1000px) and (max-height: 600px) and (orientation: landscape) {
  body.studio[data-page="home"] .hero {
    min-height: 580px;
    padding-bottom: 128px;
  }
  body.studio[data-page="home"] .hero__media::before {
    background-position: 53% center;
  }
}