/* ======================================================
   CONTACT.CSS — Ultra Responsive & iOS fixes (Vitronet)
   Append at end of contact.css OR use this file after it.
   ====================================================== */

/* 0) Safety rails */
*,*::before,*::after{ box-sizing:border-box }
html,body{ max-width:100%; overflow-x:hidden }
img,video{ max-width:100%; height:auto; display:block }

/* 1) Fluid headings */
.contact-hero h1{ font-size: clamp(1.4rem, 4.5vw, 2.2rem); line-height:1.15 }
.card h2{ font-size: clamp(1.05rem, 3vw, 1.35rem) }

/* 2) Containers + spacing on very small */
@media (max-width: 360px){
  .contact-grid{ padding: 20px 10px 36px }
  .card{ padding: 14px; border-radius: 14px }
  .actions .btn-ghost{ padding: 9px 12px; border-radius: 10px }
  .map-wrap iframe{ height: 240px }
}

/* 3) Grid robustness */
.contact-grid{ grid-template-columns: 1fr; gap: 16px }
@media (min-width: 981px){
  .contact-grid{ grid-template-columns: 1.05fr .95fr }
}

/* 4) Form fields: iOS-friendly */
.field input,.field select,.field textarea{ font-size:16px; -webkit-appearance:none }
.field textarea{ min-height: 120px }
.row{ grid-template-columns: 1fr }
@media (min-width: 700px){ .row{ grid-template-columns: 1fr 1fr } }

/* 5) Avoid long strings breaking layout */
.help, .legal, .contact-list li, .muted { overflow-wrap:anywhere; word-break:break-word }

/* 6) CTA wrap on narrow */
.actions{ flex-wrap: wrap }
.cta-row{ flex-wrap: wrap }