/* =========================================================================
   CONTACT TEMPLATE (template-contact.php)

   The closing folds (CTA, reviews, visit) reuse existing classes from
   folds.css verbatim — this file only styles what's actually new here: the
   top form section's two columns, the contact-details list, the social
   links, and the form itself.
   ========================================================================= */

/* -------------------------------------------------------------------------
   HERO

   Same shape as .svc-hero / .opol-hero — copy on one side, a photograph on
   the other, at the same column ratio and the same frame height, so the
   contact page opens the way the rest of the site does. Deliberately NOT
   .svc-hero itself: those rules live in service.css / service-1.css, which
   this template does not load, and enqueuing a whole service stylesheet to
   borrow one block would couple two templates that have no other reason to
   know about each other.
   ------------------------------------------------------------------------- */
.contact-hero.fold { padding-top: calc(var(--fold) + var(--sp-2)); padding-bottom: var(--sp-6); }

.contact-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(1.75rem, 3.4vw, 3.6rem);
  align-items: center;
}
.contact-hero-copy .eyebrow + h1 { margin-top: var(--sp-2); }
.contact-hero-copy .lead { margin-top: var(--sp-3); }
.contact-hero-actions {
  display: flex; flex-wrap: wrap;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-top: var(--sp-4);
}
.contact-hero-shot {
  position: relative;
  margin: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--n-10);
  height: 538px;
  box-shadow: 0 30px 60px -34px rgba(var(--deep-rgb), 0.35);
}
.contact-hero-shot img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-3) var(--ease);
}
@media (hover: hover) {
  .contact-hero-shot:hover img { transform: scale(1.05); }
}

.contact-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

/* .fold's own padding-block (clamp(5rem, 9vw, 9rem)) bottom, stacked on top
   of #location-tour's own top padding right below, is what was reading as
   a huge gap under the form — cut here, same as #location-tour's own
   reduction, so the two sides of the gap match. Less severe than it was
   now that this band is tinted: the fold needs enough of its own padding
   for the tint to read as a band rather than as a box drawn round the
   content. */
.contact-form { padding-bottom: clamp(2.5rem, 4.5vw, 4.5rem); }

/* Same fix as .svc-hero-copy in service.css/service-1.css: h1 inherits
   margin:0 from the reset, and --lh-display's 1.04 leaves almost no natural
   leading above its glyphs on its own. */
.contact-form-copy .eyebrow + h2 { margin-top: var(--sp-2); }

/* The details list used to follow a lede; it now follows the section
   heading directly, so it carries the larger gap that lede provided. */
.contact-details { margin-top: var(--sp-5); display: grid; gap: 0.85rem; }
.contact-details li, .contact-details a {
  display: flex; align-items: flex-start; gap: 0.65rem;
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-mid);
  line-height: 1.5;
}
.contact-details a { transition: color var(--t-1) var(--ease); }
.contact-details a:hover { color: var(--leaf); }
.contact-details svg { width: 17px; height: 17px; flex: none; margin-top: 0.15rem; color: var(--graphic); }

.contact-social { margin-top: var(--sp-4); display: flex; gap: 0.6rem; }
.contact-social-link {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--surface-quiet); color: var(--ink);
  box-shadow: inset 0 0 0 var(--hair) var(--rule);
  transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease), transform var(--t-1) var(--ease);
}
.contact-social-link svg { width: 18px; height: 18px; }
.contact-social-link:hover { background: var(--deep); color: var(--sage); transform: translateY(-2px); }

/* -------------------------------------------------------------------------
   CALLBACK FORM
   ------------------------------------------------------------------------- */
.contact-form-card {
  display: grid; gap: var(--sp-3);
  padding: clamp(1.75rem, 3.2vw, 2.5rem);
  background: var(--white); border-radius: var(--r-md);
  box-shadow: inset 0 0 0 var(--hair) var(--rule),
              0 26px 62px -42px rgba(var(--deep-rgb), 0.5);
}

/* Off-screen rather than display:none/visibility:hidden — some spam bots
   skip fields those hide, but still fill in anything merely positioned
   away from view. */
.contact-form-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.contact-form-notice {
  padding: 0.85rem 1.05rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500;
}
.contact-form-notice--ok { background: var(--tint-open); color: var(--leaf); }
.contact-form-notice--err { background: var(--n-05); color: var(--ink); box-shadow: inset 0 0 0 var(--hair) var(--rule); }
.contact-form-notice--err a { color: inherit; box-shadow: 0 1px 0 currentColor; }

/* Name/Phone side by side at 50% each — .contact-form-card is itself a
   single-column grid, so this wrapper is just one more row in it, split
   into its own 2-column grid internally. */
.contact-form-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.contact-form-row { display: flex; flex-direction: column; gap: 0.4rem; }
.contact-form-row label {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--track-tight); color: var(--ink);
}
.contact-form-row label span { font-weight: 400; color: var(--ink-quiet); }

.contact-form-row input, .contact-form-row textarea {
  width: 100%;
  padding: 0.75rem 0.95rem;
  background: var(--surface-quiet);
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-body); color: var(--ink);
  transition: box-shadow var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.contact-form-row textarea { resize: vertical; min-height: 6rem; }
.contact-form-row input::placeholder, .contact-form-row textarea::placeholder { color: var(--ink-quiet); }
.contact-form-row input:focus-visible, .contact-form-row textarea:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(var(--sage-rgb), 0.35);
}

.contact-form-submit { justify-content: center; }

/* -------------------------------------------------------------------------
   MAP + 360° TOUR — side by side, own #location-tour section between the
   callback form and .visit below. Each column carries its own .visit-tag
   label above the embed so it reads clearly which is which. Top padding cut
   further than the bottom — .contact-form's own (now-reduced) bottom
   padding right above already provides the gap the top padding would
   otherwise duplicate; the bottom padding still needs to hold its own
   space before .visit.
   ------------------------------------------------------------------------- */
#location-tour { padding-top: clamp(0.5rem, 1vw, 1rem); padding-bottom: calc(clamp(1.5rem, 2.7vw, 2.7rem) + 30px); }

/* The location intro added above the two map panels. Measure-capped and
   centred so a four-sentence paragraph does not run the full page width,
   which at this section's width would be well past a comfortable line
   length. */
.contact-loc-head {
  max-width: 68ch;
  margin: 0 auto clamp(1.75rem, 3vw, 2.6rem);
  text-align: center;
}
.contact-loc-head .lead { margin-top: var(--sp-2); margin-inline: auto; }
.contact-loc-head em { font-style: normal; color: var(--accent-text); }

.visit-maps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
}
.visit-map {
  margin-top: 0.6rem;
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: inset 0 0 0 var(--hair) var(--rule),
              0 26px 62px -42px rgba(var(--deep-rgb), 0.5);
}
.visit-map iframe {
  display: block; width: 100%; height: clamp(280px, 32vw, 420px);
  border: 0;
}

@media (max-width: 1024px) {
  .contact-hero-grid { grid-template-columns: minmax(0, 1fr); }
  /* No order:-1 here, unlike .svc-hero-shot. On this page the sequence is
     the point: title, lede, photograph, then the form. Hoisting the photo
     above the copy the way the service heroes do would put a picture in
     front of the words that say which page you are on. */
  .contact-hero-shot { aspect-ratio: 16 / 9; height: auto; }

  .contact-form-grid { grid-template-columns: minmax(0, 1fr); }
  .visit-maps { grid-template-columns: minmax(0, 1fr); }
}

/* Name/Phone back to stacked below ~560px — at 1024px the form column
   still has room for two fields side by side, this is about the fields
   themselves getting too narrow to type in comfortably, not the page grid. */
@media (max-width: 560px) {
  .contact-form-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .contact-hero.fold { padding-bottom: var(--sp-5); }
  .contact-hero-shot { aspect-ratio: 4 / 3; }
}