.contact {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 936;
  background: var(--color-bg);
  overflow: hidden;
}
.contact::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-divider-dark);
}

.contact__noise {
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/hero-noise.png");
  background-size: 256px 256px;
  background-repeat: repeat;
  opacity: 0.05;
  pointer-events: none;
  animation: grain-shift 1s steps(8) infinite;
}

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

.contact__title {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 14.21%;
  font-weight: 700;
  font-size: clamp(86.94px, 7.245vw, 139.1px);
  line-height: 0.85;
  letter-spacing: clamp(-2.782px, -0.145vw, -1.739px);
  text-transform: uppercase;
  color: var(--color-off-white);
  white-space: nowrap;
}

.contact__col {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(25.81px, 2.151vw, 41.29px);
  width: clamp(532.38px, 44.365vw, 851.8px);
}
.contact__col--email {
  left: 2.907%;
  top: 31.554%;
  align-items: flex-end;
}
.contact__col--whatsapp {
  left: 52.37%;
  top: 77.51%;
  align-items: flex-start;
}

.contact__desc {
  font-weight: 500;
  font-size: clamp(16.63px, 1.386vw, 26.6px);
  line-height: 1.2;
  letter-spacing: clamp(-0.266px, -0.014vw, -0.166px);
  margin: 0;
}
.contact__col--email .contact__desc {
  color: var(--color-off-white);
  text-align: right;
}
.contact__col--whatsapp .contact__desc {
  color: var(--color-gray-9d9);
  text-align: left;
}
.contact__col--whatsapp .contact__desc strong {
  font-weight: 700;
  color: var(--color-white);
}

.contact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7.92px, 0.66vw, 12.67px);
  height: clamp(39.86px, 3.322vw, 63.78px);
  padding-inline: clamp(26.67px, 2.222vw, 42.67px);
  background: var(--color-off-white);
  color: var(--color-black);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(21.38px, 1.781vw, 34.2px);
  letter-spacing: clamp(-0.342px, -0.018vw, -0.214px);
  white-space: nowrap;
}
.contact__btn img {
  width: clamp(14.98px, 1.249vw, 23.97px);
}

.contact__btn--whatsapp {
  background: var(--color-whatsapp-green);
}
.contact__btn-icon {
  width: clamp(24.94px, 2.078vw, 39.9px);
  aspect-ratio: 29.9277 / 30.0782;
}

.contact__qr {
  position: absolute;
  z-index: 1;
  left: 35.683%;
  top: 62.437%;
  width: clamp(138.86px, 11.572vw, 222.18px);
  height: clamp(223.07px, 18.589vw, 356.91px);
  background: var(--color-off-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(13.17px, 1.097vw, 21.07px);
  padding-bottom: clamp(13.46px, 1.121vw, 21.53px);
}
.contact__qr img {
  width: clamp(112.53px, 9.377vw, 180.05px);
  height: auto;
  aspect-ratio: 1 / 1;
  margin-bottom: clamp(21.86px, 1.822vw, 34.98px);
}
.contact__qr-line {
  width: clamp(112.78px, 9.398vw, 180.44px);
  height: 1px;
  background: var(--color-gray-777);
  margin-bottom: clamp(50.47px, 4.206vw, 80.75px);
}
.contact__qr-label {
  font-weight: 700;
  font-size: clamp(16.15px, 1.346vw, 25.83px);
  letter-spacing: clamp(-0.155px, -0.008vw, -0.097px);
  text-transform: uppercase;
  color: var(--color-black);
  text-align: center;
  margin: 0;
}