/* ============================================================
   contact.css — CONTACT page-specific styles.
   Shared chrome + hero + page-hero + banner + primitives in /site.css.
   ============================================================ */

/* ---- GET IN TOUCH (intro + form) ---- */
.get-touch { padding: 74px 0 92px; }
.get-grid { display: grid; grid-template-columns: 440px 1fr; gap: 32px; align-items: start; }
.get-intro .serif-title { margin-bottom: 22px; }
.get-intro .gt-sub {
  font-family: var(--sans); font-weight: 400;
  font-size: 30px; line-height: 38px; letter-spacing: -0.03em; color: var(--ink);
  margin-bottom: 22px; max-width: 380px;
}
.get-intro p { color: var(--ink-soft); font-size: 15px; line-height: 23px; max-width: 380px; }

/* form */
/* .cform / .field lifted to site.css (Campaign LP reuses the form) */

/* ---- OUR LOCATION (.our-loc + location cards) is shared in site.css ---- */
/* (the "Wherever you are…" water band was removed — client feedback CON-01) */

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .get-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
  .cform .row, .loc-grid { grid-template-columns: 1fr; }
}

/* Sub-site subheading under the office name — "Formerly The Cruise Centre" /
   "Formerly Main Beach Travel" (R3-CONT-01/02). Mirrors .page-sub scale on navy. */
.our-loc .loc-formerly {
  color: rgba(255,255,255,.85);
  font-size: 18px; line-height: 26px; letter-spacing: -0.02em;
  margin: -6px 0 18px;
}

/* ---- Office contact details (address / hours / phone / email + map) ----
   Content authored on the office CPT; main site shows all offices, sub-sites their own. */
.office-details {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px 22px;
  margin-top: 44px; text-align: left;
}
/* Each office is a two-column card — details left, its own map right (map ~55%
   of the card, 4:3), two offices per row (client call, 2026-07). */
.office { display: grid; grid-template-columns: minmax(0, 1fr) 55%; gap: 20px; align-items: center; }
/* A location site shows only its own office: details centred, map full width
   (a single 640px column read as an afterthought — client call, 2026-07). */
.office-details-single { grid-template-columns: 1fr; text-align: center; }
.office-details-single .office { display: block; }
.office-details-single .office-map { aspect-ratio: auto; height: 440px; margin-top: 26px; }
.office h3 { color: var(--white); font-size: 20px; letter-spacing: -0.02em; margin-bottom: 10px; }
.office-address { color: rgba(255,255,255,.92); font-size: 15px; line-height: 23px; margin-bottom: 6px; }
.office-line { color: rgba(255,255,255,.78); font-size: 14px; line-height: 22px; }
.office-line a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.office-map {
  width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: 10px;
  display: block; background: rgba(255,255,255,.08);
}
@media (max-width: 760px) {
  .office-details { grid-template-columns: 1fr; }
  .office { grid-template-columns: 1fr; }
}

/* ============================================================
   GLOB-03 — MOBILE SECTION RHYTHM (contact). The form band kept its
   desktop 74/92px padding on phones; .page-hero (124px top) and .our-loc
   (56/40) ride the shared GLOB-03 block in site.css. Additive only.
   ============================================================ */
@media (max-width: 900px) {
  .get-touch { padding: 56px 0 64px; }
  .office-details { margin-top: 36px; }
}