/* =========================================================
   V8 — photographic contact backdrop
   ========================================================= */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f4f7f6;
}

.contact-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.contact-bg picture,
.contact-bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.contact-bg img {
  object-fit: cover;
  object-position: 50% 43%;
  filter: saturate(0.92) contrast(1.02);
}

/* The left side stays near-white so the big copy remains dark and legible;
   the photograph opens up on the right, behind the glass contact card. */
.contact-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(247, 250, 249, 0.97) 0%,
      rgba(247, 250, 249, 0.94) 27%,
      rgba(247, 250, 249, 0.78) 45%,
      rgba(247, 250, 249, 0.46) 62%,
      rgba(247, 250, 249, 0.2) 82%,
      rgba(247, 250, 249, 0.1) 100%),
    linear-gradient(180deg,
      rgba(247, 250, 249, 0.48) 0%,
      rgba(247, 250, 249, 0.04) 42%,
      rgba(247, 250, 249, 0.76) 100%);
}

.contact-shell {
  position: relative;
  z-index: 1;
}

.contact-direct {
  background:
    radial-gradient(ellipse at 90% 0%, rgba(119, 177, 222, 0.12), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(246, 252, 249, 0.7)),
    rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.99),
    0 24px 62px rgba(20, 40, 38, 0.13);
}

.contact .footer {
  border-top-color: rgba(0, 0, 0, 0.12);
}

.contact .footer-bottom {
  border-top-color: rgba(0, 0, 0, 0.08);
}

@media (max-width: 960px) {
  .contact-bg img {
    object-position: 58% 36%;
  }

  .contact-bg::after {
    background:
      linear-gradient(180deg,
        rgba(247, 250, 249, 0.98) 0%,
        rgba(247, 250, 249, 0.95) 25%,
        rgba(247, 250, 249, 0.8) 47%,
        rgba(247, 250, 249, 0.55) 67%,
        rgba(247, 250, 249, 0.88) 100%),
      linear-gradient(90deg,
        rgba(247, 250, 249, 0.88) 0%,
        rgba(247, 250, 249, 0.52) 58%,
        rgba(247, 250, 249, 0.42) 100%);
  }

  .contact-direct {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.93), rgba(245, 251, 248, 0.78)),
      rgba(255, 255, 255, 0.58);
  }
}