/* ===== Contact page ===== */

/* Two-column layout on wide screens */
.contact-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(18px, 3vw, 26px);
}
@media (max-width: 900px){
  .contact-grid{ grid-template-columns:1fr; }
}

/* Form fields */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width: 640px){ .form-row{ grid-template-columns:1fr; } }

label{ font-weight:700; }
.req{ color:#cf3d3d; margin-left:4px; }

input, select, textarea{
  background:#fff;
  border:1px solid #d8e1f0;
  border-radius:10px;
  padding:12px 12px;
  font:inherit;
  color:inherit;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--brand);
  box-shadow:0 0 0 3px rgba(11,92,173,.12);
}

.hint{ color:var(--muted); }

/* Sidebar */
.contact-aside h3 { margin-top:0; }
.contact-aside hr{
  border:0; height:1px; background:#eef2f7; margin:14px 0;
}

/* Success message */
.hidden{ display:none; }
.card-soft{
  background:#f7fbff;
  border:1px solid #d8e9ff;
}

/* Make the button sit a bit away from the bottom */
#contactForm .btn{ margin-top:6px; }