/* ================================================================
   CONTACT.CSS — Contact grid, info cards, and form
================================================================ */

.contact-grid { display: grid; grid-template-columns: 1fr 1.45fr; gap: 3.5rem; padding: 3.5rem 0 5rem; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-intro { font-size: 1.05rem; color: var(--muted); line-height: 1.8; margin-bottom: 2rem; }

/* Info cards */
.contact-cards { display: flex; flex-direction: column; gap: 0.8rem; }
.contact-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 1.15rem;
  display: flex; gap: 0.9rem; align-items: center;
  transition: border-color var(--ease), background var(--ease);
}
.contact-card:hover { border-color: rgba(var(--accent-r), 0.32); background: rgba(var(--accent-r), 0.03); }
.contact-card:hover .cc-icon { background: var(--accent); color: #060c18; }
.cc-icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--accent-d); display: flex; align-items: center; justify-content: center;
  color: var(--accent-b); font-size: 1.1rem; flex-shrink: 0; transition: all var(--ease);
}
.cc-label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.73rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted2); margin-bottom: 0.15rem; }
.cc-val   { font-size: 0.92rem; font-weight: 500; color: var(--text); }

/* Form */
.form-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 2.25rem; }
.form-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

.form-group { margin-bottom: 1.15rem; }
.form-label {
  display: block; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.73rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted2); margin-bottom: 0.45rem;
}
.form-input, .form-textarea {
  width: 100%; background: rgba(255,255,255,0.03);
  border: 1.5px solid var(--border2); border-radius: var(--r-sm);
  padding: 0.72rem 1rem; color: var(--text); font-size: 0.95rem;
  outline: none; transition: border-color var(--ease), box-shadow var(--ease);
}
.form-input:focus, .form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-r), 0.14);
}
.form-textarea { resize: vertical; min-height: 130px; }