/* ==========================================================
   TygerLabs.ai · Contact
   Page-only composition. Components come from ui-kit.css.
   ========================================================== */

/* ---------- Form ---------- */
.contact-form-title {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: var(--fw-ultra);
  letter-spacing: -0.04em;
}
.contact-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

/* ---------- Direct contact: icon tiles, no dividers ---------- */
.contact-aside { display: grid; gap: var(--s-4); align-content: start; }
.contact-aside-title { margin: 0; font-size: var(--text-2xl); }
.contact-aside > p { margin: 0; color: var(--ink-2); }
.contact-aside > p a { color: var(--tiger-2); }
.contact-direct { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.contact-direct li { display: flex; align-items: center; gap: var(--s-4); color: var(--ink); font-size: var(--text-lg); }
.contact-direct a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.contact-direct a:hover { color: var(--tiger-2); }

/* ---------- What happens next ---------- */
.contact-next-head { margin-bottom: var(--s-6); }
.contact-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.contact-next-step { padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface-1); }
.contact-next-step h3 { margin: 0 0 var(--s-2); font-size: var(--text-xl); color: var(--tiger-2); }
.contact-next-step p { margin: 0; color: var(--ink-2); }
@media (max-width: 767.98px) { .contact-next { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 575.98px) {
  .contact-form-foot .btn { width: 100%; }
}

.contact-form-sub { margin: var(--s-2) 0 var(--s-5); color: var(--muted); }