/* Desktop: fill the viewport; trim only the added sides of the 3:1 outpaint.
   The original 3:2 composition stays inside the centered safe area.
   Keep the existing small-screen design and the original asset elsewhere. */
@media (min-width: 901px) {
  .hero {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: none;
  }
}
@media (min-width: 901px) and (min-aspect-ratio: 3/2) {
  .hero-image {
    object-fit: cover;
    object-position: 50% 50%;
  }
  .hero-copy {
    top: 22%;
    width: min(76%, 105vh);
    width: min(76%, 105dvh);
  }
  .hero h1 {
    font-size: clamp(48px, min(6vw, 9vh), 104px);
    font-size: clamp(48px, min(6vw, 9dvh), 104px);
  }
}
@media (min-width: 901px) and (max-height: 650px) and (min-aspect-ratio: 3/2) {
  .hero-copy .eyebrow { margin-bottom: 12px; }
  .hero-copy > p:not(.eyebrow) { margin-top: 14px; }
  .hero-cta { margin-top: 16px; padding-top: 12px; padding-bottom: 12px; }
  .hero-foot { bottom: 20px; }
}

/* Supplied lettering at 70% size, with deep ink and coral accents. */
.hero #hero-heading.portfolio-reference-title{display:block;width:min(70%,686px);margin:0 auto;padding:8px 0 14px;line-height:0;transform:none;color:#172727}
.hero .portfolio-reference-title img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}
@media(max-width:600px){.hero #hero-heading.portfolio-reference-title{width:70%;padding:10px 0 18px}}