/* =====================================================================
  CONTACT PAGE
  Contact details, enquiry form, map, and success dialog.
  ===================================================================== */
.contact-page-section {
  padding-top:32px;
}
.contact-page-head {
  text-align:center;
  max-width:760px;
  margin:0 auto 48px;
}
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:start;
}
.contact-column {
  display:grid;
  gap:24px;
}
.contact-card {
  padding:32px;
  border-radius:28px;
  background:#fff;
  box-shadow:0 25px 60px -35px rgba(15,27,61,0.35);
}
.contact-card + .contact-card {
  margin-top:24px;
}
.contact-form-card {
  padding:36px;
  border-radius:28px;
  background:#fff;
  box-shadow:0 25px 60px -35px rgba(15,27,61,0.35);
}
.contact-form-card .eyebrow {
  display:block;
  margin-bottom:20px;
}
.contact-form-card label {
  display:block;
  margin-bottom:10px;
  font-weight:600;
  color:#0F1B3D;
}
.contact-form-input,
.contact-form-textarea {
  width:100%;
  padding:14px 16px;
  margin:10px 0 18px;
  border:1px solid rgba(15,27,61,0.12);
  border-radius:12px;
  font-family:var(--font-body);
  font-size:1rem;
}
.contact-form-input.contact-form-fullname {
  border-color:rgba(15,27,61,0.18);
}
/* Inline per-field validation feedback (see js/main.js validateField()).
   The error <span> is inserted right after its input/select/textarea; the
   negative top margin pulls it up under the field's existing bottom margin
   instead of stacking an extra gap, and it collapses to nothing when empty
   so a valid, untouched form looks exactly like it did before. */
.field-error {
  display:block;
  min-height:0;
  margin:-14px 0 0;
  font-size:0.82rem;
  line-height:1.3;
  font-weight:600;
  color:#C0362C;
}
.field-error:empty {
  margin:0;
}
.contact-form-input.field-invalid,
.contact-form-textarea.field-invalid {
  border-color:#C0362C;
  background:rgba(192,54,44,0.04);
}
.contact-form-input.field-invalid:focus,
.contact-form-textarea.field-invalid:focus {
  outline-color:#C0362C;
}
.contact-form-select {
  appearance:auto;
  background:#fff;
  cursor:pointer;
}
.required-mark {
  color:#d94b0b;
}
.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
  color:rgba(15,27,61,0.45);
}
.contact-form-textarea {
  margin-bottom:22px;
  min-height:180px;
  resize:vertical;
}
.form-status {
  margin-top:18px;
  font-size:0.95rem;
  color:#0F1B3D;
}
.contact-consent-note {
  margin:14px 0 0;
  color:var(--label-gray);
  font-size:13px;
  line-height:1.55;
}
.contact-consent-note a {
  color:var(--brand-blue);
  text-decoration:underline;
  text-underline-offset:2px;
}
.form-status.success {
  color:#1F9D55;
  background:rgba(31,157,85,0.1);
  border:1px solid rgba(31,157,85,0.25);
  padding:12px 16px;
  border-radius:12px;
}
.form-status.error {
  color:#E0483E;
  background:rgba(224,72,62,0.1);
  border:1px solid rgba(224,72,62,0.25);
  padding:12px 16px;
  border-radius:12px;
}
@media (max-width:980px) {
  .contact-grid {
    grid-template-columns:1fr;
  }
  .contact-page-section {
    padding-top:24px;
  }
}
@media (max-width:768px) {
  .contact-page-section {
    padding-top:20px;
  }
  .contact-page-head {
    margin-bottom:32px;
  }
  .contact-card {
    padding:24px;
  }
  .contact-form-card {
    padding:26px;
  }
}
@media (max-width:640px) {
  .contact-page-section {
    padding-top:16px;
  }
  .contact-grid {
    gap:24px;
  }
  .contact-column {
    gap:16px;
  }
  .contact-card + .contact-card {
    margin-top:16px;
  }
  .contact-card {
    padding:20px;
    border-radius:20px;
  }
  .contact-form-card {
    padding:20px;
    border-radius:20px;
  }
  .contact-form-input,
  .contact-form-textarea {
    padding:12px 14px;
    font-size:0.95rem;
  }
}
@media (max-width:480px) {
  .contact-page-section {
    padding-top:12px;
  }
  .contact-page-head {
    margin-bottom:24px;
  }
  .contact-card {
    padding:16px;
  }
  .contact-form-card {
    padding:16px;
  }
  .contact-form-textarea {
    min-height:140px;
  }
  .contact-map {
    margin-top:20px;
  }
}
.contact-map {
  margin-top:32px;
}
.map-frame {
  position:relative;
  padding-top:56.25%;
  overflow:hidden;
  border-radius:20px;
  box-shadow:0 24px 60px -35px rgba(15,27,61,0.35);
}
.map-frame iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.contact-modal {
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  visibility:hidden;
  opacity:0;
  transition:opacity .25s ease,visibility .25s ease;
}
.contact-modal.open {
  visibility:visible;
  opacity:1;
}
.contact-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(15,27,61,0.55);
  backdrop-filter:blur(3px);
}
.contact-modal-card {
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  background:#fff;
  border-radius:28px;
  padding:40px 34px 34px;
  text-align:center;
  box-shadow:0 40px 100px -40px rgba(15,27,61,0.5);
  transform:translateY(14px) scale(0.97);
  transition:transform .25s ease;
}
.contact-modal.open .contact-modal-card {
  transform:translateY(0) scale(1);
}
.contact-modal-close {
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border:none;
  border-radius:50%;
  background:rgba(15,27,61,0.06);
  color:rgba(15,27,61,0.6);
  font-size:1rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease,color .2s ease;
}
.contact-modal-close:hover {
  background:rgba(15,27,61,0.12);
  color:var(--navy);
}
.contact-modal-icon {
  width:74px;
  height:74px;
  margin:0 auto 20px;
  border-radius:50%;
  background:linear-gradient(135deg,#1F9D55,#34D399);
  color:#fff;
  font-size:1.7rem;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 40px -16px rgba(31,157,85,0.6);
}
.contact-modal-card h3 {
  margin:0 0 10px;
  font-size:1.25rem;
  color:var(--navy);
}
.contact-modal-card p {
  margin:0 0 24px;
  color:rgba(15,27,61,0.7);
  line-height:1.6;
  font-size:0.98rem;
}
.contact-modal-btn {
  width:100%;
  justify-content:center;
}

body .contact-page-head h2 { font-size:26px; }
body .contact-card h3,body .contact-form-card h3 { font-size:18px; }
body .contact-card p,body .contact-form-card p,body .contact-form-card label { font-size:13px; }