/* ==========================================================================
   SIL-VEX ENGINEERING — contact.css  (contact.html only)
   ========================================================================== */

.contact-grid{
  display:grid; grid-template-columns: 1.3fr .9fr; gap: 50px; align-items:start;
}
.contact-form{
  background: var(--paper); border:1px solid var(--line);
  padding: clamp(24px, 4vw, 40px);
}
.contact-form h2{ font-size:1.5rem; margin-bottom: 22px; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field{ margin-bottom: 18px; display:flex; flex-direction:column; gap:6px; }
.field label{
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color: var(--steel-soft);
}
.field input, .field select, .field textarea{
  font-family: var(--font-body); font-size:.94rem;
  padding: .75em .9em; border:1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--red); outline-offset:1px; background: #fff;
}
.field.invalid input, .field.invalid textarea{ border-color: var(--red); }
.form-note{ margin-top:14px; font-size:.68rem; letter-spacing:.03em; color: var(--steel-soft); }
.form-note.success{ color: #1B7A43; }

@media (max-width: 640px){ .field-row{ grid-template-columns:1fr; } }

.contact-side{ display:flex; flex-direction:column; gap: 22px; }
.side-block h3{ font-size:.85rem; letter-spacing:.1em; margin-bottom:.5em; }
.side-block p{ font-size:.92rem; margin:0 0 .3em; }

.map-frame{
  position:relative; aspect-ratio: 4/3; overflow:hidden;
  background: var(--navy-deep); border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center;
}
.map-frame .panel-grid{
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 28px 28px;
}
.map-pin{
  position:relative; color:#fff; font-size:.68rem; letter-spacing:.1em;
  padding: .6em 1em; border:1px solid rgba(255,255,255,.3); border-radius:2px;
  background: rgba(255,255,255,.06);
}

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