.contact-scene {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 8vw, 8rem);
  background: linear-gradient(
    180deg,
    #f1f1f1 0%,
    #f3f3f2 20%,
    #f2f2f1 40%,
    #f0efef 55%,
    #eeeeed 70%,
    #f1f1f1 86%,
    #f5f5f4 100%
  );
}

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

.contact-visual {
  position: relative;
  isolation: isolate;
}

.contact-visual > img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: normal;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 3%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 3%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.contact-scene .contact-head {
  position: absolute;
  z-index: 2;
  top: 10%;
  left: 40%;
  display: block;
  width: min(37%, 34rem);
}

.contact-scene .contact-head h2 {
  max-width: 10ch;
  margin: .65rem 0 0;
  font-size: clamp(2.15rem, 3.5vw, 4rem);
  line-height: .91;
  letter-spacing: -.065em;
  color: var(--ink);
  text-shadow:
    0 2px 0 rgba(255, 255, 255, .95),
    0 7px 24px rgba(1, 27, 53, .2);
}

.contact-scene .contact-head h2 span {
  color: var(--teal-dark);
  text-shadow:
    0 2px 0 rgba(255, 255, 255, .95),
    0 7px 22px rgba(0, 113, 124, .22);
}

.contact-scene .contact-head .label {
  text-shadow:
    0 1px 0 #fff,
    0 3px 12px rgba(1, 27, 53, .2);
}

.contact-scene .contact-note {
  max-width: 39ch;
  margin: clamp(.8rem, 1.4vw, 1.3rem) 0 0;
  padding-left: .9rem;
  border-left: 3px solid var(--gold);
  color: #31455a;
  font-size: clamp(.85rem, 1.08vw, 1.05rem);
  font-weight: 650;
  line-height: 1.55;
  text-shadow:
    0 1px 1px rgba(255, 255, 255, .98),
    0 3px 12px rgba(255, 255, 255, .9);
}

.contact-scene .contact-form {
  position: relative;
  z-index: 3;
  width: min(68rem, calc(100% - clamp(1rem, 5vw, 5rem)));
  margin: clamp(-3.5rem, -4vw, -2.2rem) auto 0;
  border: 1px solid rgba(1, 27, 53, .22);
  border-radius: 1.3rem;
  box-shadow: 0 1.6rem 4rem rgba(1, 27, 53, .22), 0 .35rem 0 var(--teal);
}

@media (max-width: 960px) {
  .contact-scene .contact-head {
    top: 7%;
    left: 38%;
    width: 46%;
  }

  .contact-scene .contact-head h2 {
    font-size: clamp(2rem, 5.2vw, 3.4rem);
  }

  .contact-scene .contact-note {
    font-size: .82rem;
  }
}

@media (max-width: 720px) {
  .contact-scene {
    padding-block: 4rem;
  }

  .contact-visual {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .contact-scene .contact-head {
    position: relative;
    inset: auto;
    order: 0;
    width: 100%;
  }

  .contact-scene .contact-head h2 {
    max-width: 11ch;
    font-size: clamp(2.8rem, 13vw, 4.5rem);
  }

  .contact-scene .contact-note {
    max-width: 42ch;
    font-size: 1rem;
  }

  .contact-visual > img {
    order: 1;
    min-height: 15rem;
    object-fit: cover;
    object-position: 51% center;
  }

  .contact-scene .contact-form {
    width: 100%;
    margin-top: 1.5rem;
  }
}

@media (max-width: 430px) {
  .contact-visual > img {
    min-height: 13rem;
  }
}