/* Page-specific: only the tabs + the 2-column form grid (rest is shared in components.css) */
.contact-tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-7);
  border-bottom: 1px solid var(--ink-3);
  flex-wrap: wrap;
}
.contact-tab {
  position: relative;
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--smoke);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.contact-tab:hover { color: var(--bone); }
.contact-tab[aria-selected="true"] {
  color: var(--bone);
  border-bottom-color: var(--accent);
}

.contact-form__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr 1fr;
}

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