/* Contact section containment and responsive layout */
#contact .two-col > * { min-width: 0; }

#contact .card,
#contact .contact-card {
  border: 1px solid #2b3240;
  border-radius: 12px;
  padding: clamp(16px, 2vw, 24px);
  background: #111827;
  color: #e5e7eb;
  overflow: hidden;
}

#contact form,
#contact .row,
#contact input[type="text"],
#contact input[type="email"],
#contact select,
#contact textarea,
#contact button {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

#contact .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#contact .mtop { margin-top: 12px; }
#contact .muted { color: #9aa4b2; }

#contact .btn { cursor: pointer; }
#contact .btn.btn-primary { background: #1e5fff; color: #fff; border: none; padding: 12px 16px; border-radius: 8px; }
#contact .btn.btn-ghost { background: #0b1b3a; color: #c7d2fe; border: 1px solid #334155; padding: 10px 14px; border-radius: 8px; }
#contact .btn:disabled { opacity: 0.7; cursor: not-allowed; }

#contact .alert { margin: 8px 0 0 0; padding: 10px 12px; border-radius: 8px; background: #1f2937; color: #e5e7eb; }
#contact .alert.success { background: #063; color: #e7fff6; }
#contact .alert.error   { background: #4b1111; color: #ffeaea; }

[hidden] { display: none !important; }

@media (max-width: 768px) { #contact .row { grid-template-columns: 1fr; } }