:root {
  color-scheme: dark;
  --contact-ink: #f3f1ec;
  --contact-line: rgb(243 241 236 / .5);
  --contact-ease: cubic-bezier(.42, 0, .18, 1);
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { overflow: hidden; background: #111110; color: var(--contact-ink); font-family: "Helvetica Neue", "Neue Haas Grotesk Text Pro", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.contact-page { position: relative; min-height: 100dvh; isolation: isolate; }
.contact-video, .contact-scrim { position: fixed; inset: 0; width: 100%; height: 100%; }
.contact-video { z-index: -2; display: block; object-fit: cover; object-position: center; }
.contact-scrim { z-index: -1; background: linear-gradient(118deg, rgb(8 12 16 / .7) 0%, rgb(8 12 16 / .36) 52%, rgb(8 12 16 / .7) 100%); }

.contact-header { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 68px; padding: 0 29px; font-size: 10px; font-weight: 500; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.contact-logo { justify-self: start; display: block; }
.contact-logo img { display: block; width: 104px; height: auto; filter: brightness(0) invert(1); }
.contact-nav { display: flex; gap: 27px; }
.contact-nav a { transition: opacity 220ms var(--contact-ease); }
.contact-nav a:hover, .contact-nav a:focus-visible { opacity: .5; }

.contact-main { min-height: calc(100dvh - 68px); display: grid; align-items: end; padding: 0 29px 40px; }
.contact-intro { max-width: 920px; }
.contact-kicker { margin: 0 0 20px; font-size: 10px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.contact-intro h1 { margin: 0; font-size: clamp(76px, 12.2vw, 194px); font-weight: 400; letter-spacing: -.085em; line-height: .78; }
.email-reveal { margin-top: 40px; min-height: 37px; }
.reveal-email, .revealed-email { display: inline-flex; align-items: center; min-height: 37px; padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--contact-line); border-radius: 0; background: none; color: var(--contact-ink); font: inherit; font-size: 16px; letter-spacing: -.02em; cursor: pointer; transition: border-color 220ms var(--contact-ease), opacity 220ms var(--contact-ease); }
.reveal-email:hover, .reveal-email:focus-visible, .revealed-email:hover, .revealed-email:focus-visible { border-color: currentColor; opacity: .72; }
.reveal-email:focus-visible, .revealed-email:focus-visible, .contact-nav a:focus-visible, .contact-logo:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
.contact-socials { display: flex; gap: 8px; margin-top: 24px; }
.contact-social { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--contact-line); border-radius: 50%; color: var(--contact-ink); font-size: 10px; font-weight: 500; letter-spacing: -.03em; line-height: 1; text-transform: uppercase; transition: background-color 220ms var(--contact-ease), border-color 220ms var(--contact-ease), color 220ms var(--contact-ease), transform 220ms var(--contact-ease); }
.contact-social:hover, .contact-social:focus-visible { border-color: var(--contact-ink); background: var(--contact-ink); color: #111110; }
.contact-social:active { transform: scale(.96); }
.contact-social:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }

@media (prefers-reduced-motion: reduce) {
  .contact-video { display: none; }
  .contact-page { background: linear-gradient(125deg, #182a36, #111110 58%, #24313b); }
  .contact-nav a, .reveal-email, .revealed-email, .contact-social { transition: none; }
}

@media (max-width: 767px) {
  .contact-header { grid-template-columns: 1fr auto; height: 60px; padding: 0 17px; font-size: 8px; }
  .contact-logo img { width: 84px; }
  .contact-nav { gap: 16px; }
  .contact-nav a:nth-child(2) { display: none; }
  .contact-main { min-height: calc(100dvh - 60px); padding: 0 17px 27px; }
  .contact-intro h1 { font-size: clamp(61px, 18vw, 100px); line-height: .82; }
  .email-reveal { margin-top: 28px; }
  .contact-socials { margin-top: 20px; }
}