.contact-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:48px; align-items:start;}
.form-field{margin-bottom:20px;}
.form-field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:8px; color:var(--text);}
.form-field input,.form-field select,.form-field textarea{
  width:100%; padding:13px 16px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface); font-size:14.5px; color:var(--text);
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none; border-color:var(--violet); box-shadow:0 0 0 4px rgba(139,92,246,0.12); background:#fff;
}
.form-row{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px;}
.form-note{font-size:12.5px; color:var(--text-secondary); margin-top:14px; text-align:center;}

.contact-info-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--sp-4);}
.contact-info-row{display:flex; gap:14px; align-items:flex-start; margin-bottom:18px;}
.contact-info-row:last-child{margin-bottom:0;}
.contact-info-row .ic{width:40px; height:40px; border-radius:10px; background:rgba(139,92,246,0.1); color:var(--violet); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.contact-info-row .contact-info-title{font-size:14.5px; margin-bottom:2px;}
.contact-info-row p,.contact-info-row a{font-size:14px; color:var(--text-secondary);}
/* The rule above deliberately makes the email, phone and WhatsApp links read as
   plain detail text rather than as links, which is right for them. A contextual
   link in this column is different - it goes somewhere else on the site and has
   to look like it does, so .inline-link keeps its own colour here. Its size
   still comes from the rule above. */
.contact-info-row a.inline-link{color:var(--violet-ink);}
.contact-info-row a.inline-link:hover{color:var(--violet);}

.map-section{
  border-radius:28px; overflow:hidden; box-shadow:0 24px 60px rgba(8,31,77,0.14);
  border:1px solid var(--border);
}
.map-embed{
  position:relative; width:100%; height:420px;
}
.map-embed iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

@media (max-width:1024px){
  .contact-grid{grid-template-columns:minmax(0, 1fr);}
}
@media (max-width:768px){
  .map-embed{height:340px;}
}
@media (max-width:600px){
  .form-row{grid-template-columns:minmax(0, 1fr);}
  .map-embed{height:280px;}
}

/* Role label in front of the technical address in the contact card, so the
   two email addresses are visibly distinct rather than an unexplained pair. */
.contact-email-role{display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--text-secondary); margin-top:4px;}
.form-note a{color:var(--violet-ink); font-weight:600;}