.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 610px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contact::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(980px, 82vw);
  height: 76%;
  left: 50%;
  top: 48%;
  background: url("assets/deer-symbols.png") center / contain no-repeat;
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: .11;
  transform: translate(-50%, -50%);
  animation: contact-symbols-float 12s ease-in-out infinite alternate;
  pointer-events: none;
}

.contact::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(228, 218, 208, .06), transparent 54%);
  pointer-events: none;
}

.contact .eyebrow { margin-bottom: 26px; }
.contact h2 { text-shadow: 0 2px 28px rgba(28, 36, 19, .25); }

@keyframes contact-symbols-float {
  from { transform: translate(-50%, -51%) scale(.985); }
  to { transform: translate(-50%, -49%) scale(1.015); }
}

@media (max-width: 750px) {
  .contact { min-height: 560px; }
  .contact::before {
    width: 130vw;
    height: 64%;
    top: 45%;
    opacity: .09;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact::before { animation: none; }
}