.contact-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(5, 5, 7, 0.94);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--content-pad);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-expo),
              visibility var(--dur-base) var(--ease-out-expo);
}
.contact-overlay[hidden] { display: none; }
.contact-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.contact-overlay__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: rgba(255,255,255,0.04);
  display: grid;
  place-items: center;
  color: var(--c-text);
  transition: background var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-expo);
}
.contact-overlay__close:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--c-line-strong);
  transform: rotate(90deg);
}

.contact-overlay__content {
  max-width: 900px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.contact-overlay__heading {
  font-family: var(--ff-display);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--c-text);
  text-wrap: balance;
}

.contact-overlay__sub {
  color: var(--c-text-2);
  font-size: 1.05rem;
  max-width: 46ch;
}

.contact-overlay__grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 100%;
}

.contact-card {
  padding: 2rem 1.25rem;
  background: linear-gradient(180deg, var(--c-surface), var(--c-surface-2));
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  transition: transform var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) var(--ease-out-expo),
              background var(--dur-base) var(--ease-out-expo);
}
.contact-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-line-strong);
  background: linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
}
.contact-card__icon {
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(236,72,153,0.12));
  border: 1px solid var(--c-line);
  color: var(--c-text);
  margin-bottom: 0.5rem;
}
.contact-card__label {
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-text);
}
.contact-card__sub {
  font-size: 0.85rem;
  color: var(--c-text-3);
  font-family: var(--ff-mono);
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .contact-overlay__grid { grid-template-columns: 1fr; }
}