.contact-page main {
  padding-top: 78px;
  background: #080808;
  color: #fff;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(32px, 7vw, 108px);
  padding-block: clamp(54px, 9vw, 138px);
}

.contact-intro h1 {
  margin: 0;
  font-size: clamp(58px, 9vw, 138px);
  line-height: .92;
  letter-spacing: -.065em;
}

.contact-intro > p {
  max-width: 34ch;
  margin: 24px 0 30px;
  color: #e1e1e1;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.55;
}

.contact-page .contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-details {
  background: var(--mustard);
  color: #080808;
  padding: clamp(22px, 4vw, 52px);
  font-style: normal;
}

.contact-details > div + div { border-top: 1px solid rgb(0 0 0 / .28); }
.contact-details > div { padding-block: 18px; }
.contact-details > div:first-child { padding-top: 0; }
.contact-details > div:last-child { padding-bottom: 0; }

.contact-details h2 {
  margin: 0 0 6px;
  font-size: .75rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.contact-details p,
.contact-details a {
  margin: 0;
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.contact-details a { display: inline-block; text-underline-offset: .2em; }
.contact-details .contact-directions { margin-top: 8px; font-size: 1rem; font-weight: 700; }
.contact-page .contact-details a:focus-visible { outline: 2px solid #080808; outline-offset: 3px; }

@media (max-width: 760px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
}