/* ============================================================
   CONTACT PAGE
   Layered on experience.css (which owns the form). Adds the two-tone
   heading's spacing and a row of other channels with the company details,
   so the page ends on something rather than an empty stretch.
   ============================================================ */
.contact-details__aside :is(h1, h2) { line-height: .9; }
.contact-details { padding-bottom: clamp(60px, 6vw, 90px); }

.contact-channels {
  padding: 0 var(--gutter) clamp(90px, 9vw, 140px);
  background: rgba(11, 14, 21, .94);
}
.contact-channels ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.contact-channels a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 22px 24px 24px;
  border: 1px solid var(--edge-soft, rgba(233, 238, 245, .12));
  border-radius: var(--r-md, 18px);
  background: linear-gradient(160deg, rgba(27, 31, 41, .86), rgba(12, 14, 20, .94));
  color: inherit;
  text-decoration: none;
  transition: border-color .25s ease, translate .25s var(--ease);
}
.contact-channels span { font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #8f9aa8; }
.contact-channels b { font: 800 clamp(24px, 2.2vw, 34px)/1 var(--display); text-transform: uppercase; color: #f1f4f8; overflow-wrap: anywhere; }
.contact-channels i { position: absolute; top: 18px; right: 20px; font-style: normal; color: var(--red); }
.contact-channels a:hover, .contact-channels a:focus-visible { border-color: rgba(214, 48, 76, .8); translate: 0 -2px; }
.contact-company { margin: 28px 0 0; font: 500 10px/1.8 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #7f8a97; }
.contact-company span { margin: 0 8px; color: var(--red); }

@media (max-width: 900px) {
  .contact-channels ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .contact-channels ul { grid-template-columns: minmax(0, 1fr); }
  .contact-company span { display: none; }
  .contact-company { display: grid; }
}
.contact-press { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }