body.public-site:has(.contact-page) { background: #000; }

.contact-page {
  box-sizing: border-box;
  width: min(1024px, 100%);
  min-height: 100svh;
  margin: 0 auto;
  padding-top: 64px;
  color: #fff;
}

.contact-page__content {
  box-sizing: border-box;
  position: relative;
  min-height: calc(100svh - 64px);
  padding: 72px 0 112px;
}
.contact-page__content h1 { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -.045em; line-height: 56px; }
.contact-page__channels {
  position: absolute;
  top: calc(50svh - 64px);
  left: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 96px;
  transform: translate(-50%, -50%);
}
.contact-page__channel { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.contact-page__channel h2 { margin: 0; color: #aaa; font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.contact-page__email { color: #fff; font-size: 18px; font-weight: 500; text-decoration: underline; text-decoration-color: #666; text-underline-offset: 5px; }
.contact-page__email:hover { text-decoration-color: #fff; }

@media (max-width: 820px) {
  .contact-page { width: 100%; padding: 64px 24px 0; }
  .contact-page__content { min-height: calc(100svh - 64px); padding: 48px 0 80px; }
  .contact-page__content h1 { font-size: 30px; }
  .contact-page__channels { flex-direction: column; gap: 32px; }
}