/* Avoid Safari compositing seams by painting the profile as one background layer. */
.profile {
  isolation: isolate;
  background: #111;
  background-image:
    linear-gradient(to bottom, #111 0%, transparent 18%, transparent 78%, #111 100%),
    linear-gradient(90deg, #111 0%, rgba(17, 17, 17, .86) 44%, rgba(17, 17, 17, .18)),
    url('./assets/frank-bts.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.profile::before,
.profile::after {
  display: none !important;
}

/* Exact V1 five-column / four-row collage from the approved reference. */
.contact-collage {
  display: block !important;
  /* Preserve the collage's native 2:1 ratio; crop only at the outer edges. */
  background: #000 url('./assets/contact-collage-v1.jpg') center / cover no-repeat !important;
  overflow: hidden;
  opacity: .62 !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

html,
body {
  overflow-x: hidden !important;
}

.contact-footer,
.contact-collage {
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box;
}

.contact-content {
  width: min(1600px, calc(100% - 110px)) !important;
  max-width: calc(100vw - 110px) !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}

.contact-collage img {
  display: none !important;
}

/* Remove the frosted film-grain overlay while retaining the dark monochrome grade. */
header::before {
  display: none !important;
}

.hero-video {
  filter: grayscale(1) contrast(1.05) brightness(.45) !important;
}

@media (max-width: 800px) {
  /* Keep the first two screens centred in Safari's mobile viewport. */
  header .hero,
  .profile > .shell {
    width: calc(100% - 44px) !important;
    margin-left: 22px !important;
    margin-right: 22px !important;
    transform: none !important;
  }

  .contact-collage {
    background-position: 48% center !important;
  }

  .contact-content {
    width: calc(100% - 44px) !important;
    max-width: calc(100vw - 44px) !important;
  }
}