:root {
  --contact-gap: clamp(40px, 6.25svh, 96px);
  color-scheme: dark;
  color: #fff;
  background: #000;
  font-family: "Special Gothic", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  margin: 0;
  padding-block: max(72px, env(safe-area-inset-top), env(safe-area-inset-bottom));
}
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

.contact-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px var(--contact-gap);
  text-align: center;
}

.contact-intro h1 {
  margin: 0;
  font-size: clamp(30px, 2.5vw, 96px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.contact-intro p {
  margin: 8px 0 0;
  font-size: clamp(21px, 1.6667vw, 64px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.contact-intro__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: max(172px, 8.9583vw);
  min-height: max(44px, 2.0833vw);
  margin-top: var(--contact-gap);
  padding: 10px 24px;
  color: #000;
  background: #fff;
  font-size: clamp(16px, .8333vw, 32px);
  font-weight: 500;
  line-height: 1.25;
  transition: background-color 180ms ease;
}

.contact-intro__button:hover { background: #d9d9d9; }
.contact-intro__button:focus-visible { outline-color: #fff; }

.contact-reel {
  --frame-width: 18.75vw;
}

.contact-reel__viewport {
  overflow: clip;
  /* This is a moving filmstrip, not a scrollable or draggable carousel. */
  pointer-events: none;
  user-select: none;
}

.contact-reel__track {
  display: flex;
  width: max-content;
  animation: contact-reel-loop var(--reel-duration) linear infinite;
  animation-play-state: paused;
}

.contact-reel.is-playing .contact-reel__track { animation-play-state: running; }
.contact-reel__group { display: flex; flex: none; }
.contact-reel__frame {
  display: block;
  flex: none;
  width: var(--frame-width);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.contact-footer {
  padding: var(--contact-gap) max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
}

.contact-footer nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px clamp(28px, 2.6042vw, 100px);
  font-size: clamp(16px, .8333vw, 32px);
  font-weight: 700;
}

.contact-footer a { display: inline-flex; align-items: center; min-height: 44px; transition: opacity 180ms ease; }
.contact-footer a:hover { opacity: .65; }

@keyframes contact-reel-loop {
  to { transform: translateX(-50%); }
}

@media (max-width: 700px) {
  :root { --contact-gap: clamp(32px, 5svh, 48px); }
  .contact-intro { padding-inline: 20px; }
  .contact-intro h1 { font-size: clamp(27px, 6.4vw, 40px); }
  .contact-intro p { font-size: clamp(20px, 4.5vw, 28px); }
  .contact-reel { --frame-width: 66.6667vw; }
}

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