/* ============================================================
   Contacts page. Pixel values transcribed from the
   contacts.html mockup (1440px reference width).
   ============================================================ */

/* Both columns stretch to the tallest one; the message field below soaks up
   the leftover height so the form and the info column end on the same line. */
.contacts-grid{display:grid;grid-template-columns:.85fr 1.3fr;gap:24px;align-items:stretch;padding:36px max(56px,calc((100% - var(--content-w))/2)) 0;animation:sm-rise .85s ease .46s both}

/* Info cards */
.info-list{display:flex;flex-direction:column;gap:16px}
.info-card{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:20px 22px}
.info-icon{flex:none;width:46px;height:46px;border-radius:12px;background:var(--indigo-tint);display:grid;place-items:center}
.info-icon svg{width:22px;height:22px}
.info-card h2{font:700 15.5px var(--font)}
.info-card p{margin-top:4px;font:400 14px/1.55 var(--font);color:var(--ink-2)}
.info-card a{transition:color .25s}
.info-card a:hover{color:var(--indigo)}
.info-stack{display:flex;flex-direction:column;gap:2px}
.info-note{background:var(--indigo-dark);color:#fff;border-radius:var(--r-card);padding:22px}
.info-note strong{font:700 15.5px var(--font)}
.info-note p{margin-top:5px;font:400 13.5px/1.6 var(--font);color:rgba(255,255,255,.7)}

/* Enquiry form */
.contact-form{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--r-card-lg);padding:30px;box-shadow:0 16px 40px rgba(34,29,68,.08)}
.contact-form h2{font:700 20px var(--font)}
.form-lead{margin-top:8px;font:400 14.5px/1.6 var(--font);color:var(--ink-2)}
.field{margin:14px 0 0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.field-row .field{margin:0}
.field input,.field textarea{width:100%;border:1px solid var(--border);border-radius:var(--r-field);padding:14px 16px;font:400 14px var(--font);color:var(--ink);background:#fff;transition:border-color .25s}
.field textarea{min-height:118px;line-height:1.55;resize:vertical}
.field-message{flex:1;display:flex;flex-direction:column}
.field-message textarea{flex:1}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--indigo)}
.field.has-error input,.field.has-error textarea{border-color:#d64545}
.field-error{display:none;margin-top:6px;font:500 12px var(--font);color:#d64545}
.field.has-error .field-error{display:block}
.form-submit{display:block;width:100%;background:var(--indigo);color:#fff;border:0;border-radius:var(--r-pill);padding:15px;font:700 14.5px var(--font);margin-top:18px;cursor:pointer;transition:background .25s}
.form-submit:hover{background:var(--orange)}
.form-note{margin-top:12px;font:400 12px var(--font);color:var(--ink-3);text-align:center}
.form-note a{color:var(--indigo);font-weight:600}

/* Map */
.map-wrap{padding:40px max(56px,calc((100% - var(--content-w))/2)) 56px}
/* Positioning context for .map-card. The card is a sibling of the frame, not a
   child of it, so it can leave the map and become a caption block on a phone. */
.map-shell{position:relative}
.map-frame{position:relative;height:420px;border-radius:var(--r-card-lg);overflow:hidden;border:1px solid var(--border);box-shadow:0 16px 40px rgba(34,29,68,.1)}
/* Desaturate rather than grey out: the filter hits the whole cross-origin frame,
   marker included, and grayscale(.82) turned Google's red pin muddy brown.
   saturate() mutes the map's greens and blues but keeps the pin clearly red.
   Knobs: 1 = full colour, lower = calmer map but a duller pin. */
.map-frame iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.55) contrast(1.02)}
.map-card{position:absolute;left:20px;top:20px;display:flex;gap:14px;align-items:flex-start;max-width:320px;background:#fff;border-radius:16px;padding:16px 20px;box-shadow:0 14px 34px rgba(34,29,68,.18)}
.map-pin{flex:none;width:40px;height:40px;border-radius:50%;background:var(--orange);display:grid;place-items:center}
.map-pin svg{width:20px;height:20px}
.map-card strong{font:700 14.5px var(--font)}
.map-card p{margin-top:3px;font:400 13px/1.5 var(--font);color:var(--ink-2)}
/* Coordinates are for copying, so they get tabular figures and a tint of the
   surrounding text - present, but not competing with the street address. */
.map-card p.map-coords{margin-top:7px;font:500 12px/1.4 var(--font);font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--ink-3)}
.map-link{display:inline-block;margin-top:8px;font:600 13px var(--font);color:var(--indigo);transition:color .25s}
.map-link:hover{color:var(--orange)}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .contacts-grid{padding:32px 32px 0}
  .map-wrap{padding:32px 32px 40px}
}
@media (max-width:1100px){
  .contacts-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .contacts-grid{padding:28px 20px 0;gap:20px}
  .contact-form{padding:24px 20px}
  /* Phone and e-mail are the conversion actions on a phone - give them a real
     row to hit instead of a 19px line of text. */
  .info-card p a{display:inline-flex;align-items:center;min-height:44px}
  .info-stack{gap:0}
  .info-note{padding:20px}
  /* Under 16px iOS Safari zooms the viewport on focus and the page can then be
     panned sideways, which reads as a broken layout. */
  .field input,.field textarea{font-size:16px}
  .field textarea{min-height:132px}
  .form-submit{padding:16px}
  /* 14px is the mobile body bar; at 13px this note read a size smaller than
     every paragraph around it. */
  .form-note{margin-top:14px;font-size:14px;color:var(--ink-2)}
  /* The inline address was an 18px-tall tap target inside a line of text.
     A centred 44px row is the only way to hit it reliably with a thumb. */
  .form-note a{display:inline-flex;align-items:center;justify-content:center;
               min-height:44px;padding:0 6px}

  .map-wrap{padding:32px 20px 36px}
  .map-frame{height:280px}
  /* The overlay card covered ~90% of a phone-width map, so below 760 it drops
     out of the frame and reads as a caption under it. The pin floats so the
     Google Maps pill can clear it and span the whole card instead of being
     indented by the icon column. */
  .map-card{display:block;position:static;max-width:none;margin-top:14px;padding:18px;
            border:1px solid var(--border);border-radius:var(--r-card);box-shadow:none}
  .map-pin{float:left;margin:2px 14px 4px 0}
  .map-card strong{display:block}
  .map-card p{font-size:14px;line-height:1.55}
  /* The raw pair is 12px in --ink-3 (3.47:1, under AA) and on a phone it only
     separates the address from the button that already does the job - the same
     coordinates are what the Google Maps link opens. Dropped rather than
     enlarged: nothing here is lost, and the card gets address -> action. */
  .map-coords{display:none}
  /* A vertical swipe that starts on the embed pans the map instead of the page;
     the Google Maps link below is the way in. */
  .map-frame iframe{pointer-events:none}
  .map-link{clear:both;display:block;margin-top:14px;padding:13px 18px;font-size:14px;
            border:1px solid var(--border);border-radius:var(--r-pill);text-align:center;white-space:nowrap}
}
@media (max-width:560px){
  .field-row{grid-template-columns:1fr;gap:0}
  .field-row .field+.field{margin-top:14px}
  .info-card{gap:14px;padding:18px}
}