/* ============================================================================
   CONTACT PAGE — layout and contact-detail list
   ----------------------------------------------------------------------------
   Loaded by : contact.html
   Depends on: base/tokens.css, base/layout.css, components/forms.css

   Two columns: contact details on the left, the enquiry form on the right.
   The form card itself is styled in components/forms.css.
   ============================================================================ */

.contact-hero{
  padding-top:60px;padding-bottom:55px;
  background:var(--light);border-bottom:1px solid var(--border);
}
.contact-hero-inner{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter);}
.contact-hero h1{font-size:clamp(1.9rem,3vw,2.6rem);font-weight:800;color:var(--text-dark);margin-bottom:0.6rem;}
.contact-hero p{font-size:1rem;color:var(--text-mid);}

.contact-wrap{background:var(--white);padding:70px var(--gutter);}
/* `stretch` (not `start`) so the form card fills the column and both sides
   finish on the same line. The card distributes the slack internally — see
   the flex rules in components/forms.css. */
.contact-inner{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1.5fr;gap:5rem;align-items:stretch;
}

/* ── Left column: contact info ──────────────────────────────────────────── */
.ci h2{font-size:1.6rem;font-weight:800;color:var(--text-dark);margin-bottom:0.7rem;}
.ci > p{font-size:0.92rem;color:var(--text-mid);line-height:1.8;margin-bottom:2rem;}

/* min-height keeps every row on the same pitch whether it holds one value or
   two, so the icon column reads as an even rhythm instead of bunching up on
   the single-line rows. It matches the natural height of a two-value row. */
.info-row{
  display:flex;align-items:flex-start;gap:1rem;
  min-height:66px;margin-bottom:1.1rem;   /* 66 clears a two-value row's 65.1px */
}
.i-icon{
  width:42px;height:42px;background:var(--light2);
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;margin-top:2px;color:var(--navy);
}
.i-text .i-lbl{
  font-size:0.7rem;font-weight:700;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--blue);margin-bottom:2px;
}
.i-text .i-val{font-size:0.9rem;color:var(--text-dark);line-height:1.55;}
/* Email and phone are links but should read as plain text, not blue. */
.i-text .i-val a{color:var(--text-dark);}
.i-text .i-val a:hover{color:var(--navy);text-decoration:underline;}

/* Secondary line in a row that lists two addresses or numbers. Muted so the
   first one reads as the one to use, without hiding the alternative. Kept at
   full size — it is still a tap target on mobile. */
.i-text .i-alt,
.i-text .i-alt a{color:var(--text-mid);}
.i-text .i-alt a:hover{color:var(--navy);}

/* ── Partner links ──────────────────────────────────────────────────────── */
.partners-bar{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border);}
.partners-bar p{
  font-size:0.75rem;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--text-light);margin-bottom:0.7rem;font-weight:600;
}
.partner-links a{
  color:var(--navy);font-size:0.88rem;font-weight:700;
  margin-right:1rem;transition:opacity 0.25s;
}
.partner-links a:hover{opacity:0.6;}

@media(max-width:960px){
  .contact-inner{grid-template-columns:1fr;gap:3rem;}
}