/* Contact page (form removed, centered card) */

.contact-hero { padding: clamp(1.5rem, 4vw, 2.5rem) 0 .5rem; }

/* Center the single card nicely */
.contact-center {
  display: grid;
  place-items: center;
  padding: .5rem 0;
}

/* Clickable card */
.contact-card {
  display: grid;
  gap: .5rem;
  text-align: center;
  max-width: 560px;
  width: min(100%, 620px);
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius, .9rem);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: pointer;
}

.contact-card:hover,
.contact-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0,0,0,.32);
  border-color: rgba(255,255,255,.2);
  outline: none;
}

.contact-card .icon.badge {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: #001018;
  margin: 0 auto .15rem;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: inset 0 0 20px rgba(255,255,255,.15), 0 10px 18px rgba(0,0,0,.25);
  background: linear-gradient(180deg,#bff0c6,#58d38a);
}

.contact-card h2 { margin: 0 0 .15rem; }
.contact-card .big { font-size: 1.1rem; }
.contact-card .muted.small { margin-top: .25rem; }

.meta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  justify-content: center;
  color: var(--muted);
}
.loc-dot {
  width: .55rem; height: .55rem;
  border-radius: 999px;
  background: var(--brand-accent-2, #6ac6ff);
  box-shadow: 0 0 10px rgba(106,198,255,.4);
}