.hero-copy { z-index: 3; }
.hero-mastiff {
  position: absolute;
  z-index: 2;
  right: 2vw;
  top: 50%;
  width: min(43vw, 650px);
  transform: translateY(-47%);
  opacity: .84;
  filter: drop-shadow(0 28px 60px #000);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle, #000 48%, transparent 73%);
  mask-image: radial-gradient(circle, #000 48%, transparent 73%);
}
.mastiff-mark {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  min-height: 760px;
  background: #0d0e10;
  overflow: hidden;
}
.mastiff-art { position: relative; min-height: 760px; }
.mastiff-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, #0d0e10), linear-gradient(0deg, #0d0e10, transparent 30%);
}
.mastiff-art img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.mastiff-copy { position: relative; z-index: 2; align-self: center; padding: 80px 8vw 80px 4vw; }
.mastiff-copy h2 { margin: 20px 0 30px; }
.mastiff-copy > p:not(.kicker) { max-width: 530px; color: #b8b6af; font-size: 18px; line-height: 1.7; }
.mastiff-copy small { display: block; margin-top: 36px; color: #666; font: 700 9px Inter; letter-spacing: 1.5px; }
.online-signup .signup-mark { width: 84px; height: 84px; object-fit: cover; flex: 0 0 auto; border: 1px solid #343434; }
@media (max-width: 800px) {
  .hero-mastiff { width: 78vw; right: -25vw; top: 35%; opacity: .42; }
  .mastiff-mark { grid-template-columns: 1fr; min-height: 0; }
  .mastiff-art { min-height: 440px; }
  .mastiff-art::after { background: linear-gradient(0deg, #0d0e10 0%, transparent 65%); }
  .mastiff-copy { padding: 20px 6vw 80px; margin-top: -55px; }
  .online-signup .signup-mark { width: 72px; height: 72px; }
}