/* ============================================================
   PAGE: CONTACT (contact.html)
   Visit block + map come from home.css; the form fields reuse
   the outlined rf-* system from refer.css. This file only adds
   the "Get in touch" split and the file-upload control.
   ============================================================ */

/* visit block: paper here (the paper-2 band variant belongs to the home page) */
body[data-page="contact"] .visit{background: var(--c-paper)}

/* ---- Get in touch — title/description left, form right ---- */
.getintouch{background: var(--c-paper-2); padding: var(--section-pb) var(--section-px)}
.gt-grid{display: grid; grid-template-columns: 1fr; gap: var(--gap-block)}
/* two columns only on desktop — in a tablet-landscape half-column the paired
   fields drop under ~130px each, so the form stays full-width until 1240 */
@media (min-width: 1240px){ .gt-grid{grid-template-columns: 1fr 1fr; align-items: start} }
.gt-intro{display: flex; flex-direction: column; gap: var(--gap-text)}
.gt-intro .t-lead{color: var(--c-navy-80)}

/* form fields: two columns from tablet up (name pairs), stacked on phone */
.gt-form{display: grid; gap: var(--gap-subblock)}
.gt-fields{display: grid; grid-template-columns: 1fr; gap: var(--s-4)}   /* phone: 16, like .rf-grid */
@media (min-width: 600px){
  .gt-fields{grid-template-columns: 1fr 1fr; gap: var(--gap-subblock)}
  .gt-span2{grid-column: 1 / -1}
}

/* (the rf-upload file control lives in refer.css — shared with the booking form) */

/* ---- success state — swaps in for the form after submit ---- */
.gt-done{display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-text)}
.gt-done[hidden]{display: none}
.gt-done .sent-icon{margin-bottom: 0}