/* =============================================================
   Contact page styles (css/pages/contact.css)
   Loaded after css/main.css on contact.html only.
   ============================================================= */

/* ---------- Intro (carries the h1) ---------- */
.contact-intro { padding: 48px 0 0; }
.contact-intro .lede { max-width: 52ch; }
@media (min-width: 960px) { .contact-intro { padding: 80px 0 0; } }

/* ---------- Body: form left, info stack right ---------- */
.contact-body { padding: 40px 0 72px; }
@media (min-width: 960px) { .contact-body { padding: 56px 0 120px; } }
.contact-layout { display: grid; gap: 3rem; }
@media (min-width: 960px) {
  .contact-layout {
    grid-template-columns: 1.15fr .85fr;
    gap: 4.5rem;
    align-items: start;
  }
}

/* ---------- Form ---------- */
.form-row { display: grid; gap: 0 1.25rem; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.contact-form .btn { margin-top: .5rem; }
.contact-form .form-consent { margin-top: 1rem; }

/* Success heading is an h2 for a clean h1 > h2 outline, but should
   look like the compact h3 main.css styles on other success boxes. */
.form-success h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--navy-800);
  margin-bottom: .375rem;
}

/* ---------- Info card stack ---------- */
.contact-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-card { border-radius: var(--radius-card); padding: 1.75rem; }
.contact-card-light { background: var(--surface); border: 1px solid var(--line); }

.contact-card-head {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy-600);
  margin-bottom: .75rem;
}
.contact-card.band-dark .contact-card-head { color: var(--gold); }

/* Phone: the dominant element of the stack */
.contact-phone {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  letter-spacing: -0.01em;
  gap: .625rem;
}
.contact-phone svg { width: 22px; height: 22px; }
.contact-card.band-dark .contact-phone { color: var(--gold); }
.contact-card.band-dark .contact-phone:hover { color: var(--gold-600); text-decoration: none; }

.contact-note { margin-top: .5rem; font-size: .9375rem; }
.contact-email { font-weight: 500; overflow-wrap: anywhere; }

.contact-divider {
  border: 0;
  border-top: 1px solid var(--navy-800);
  margin: 1.5rem 0;
}
.contact-divider-light { border-top-color: var(--line); }

/* Service area card (the full town list lives in the Where we work section) */
.contact-area { color: var(--ink); font-weight: 500; }
.contact-license { margin-top: 1rem; font-size: .9375rem; font-weight: 500; color: var(--ink); }

/* Social icon row (light-surface variant; footer's is dark-only) */
.contact-social { display: flex; gap: .75rem; }
.contact-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--navy-600);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.contact-social a:hover {
  background: var(--navy-100);
  border-color: var(--navy-600);
  text-decoration: none;
}
.contact-social svg { width: 17px; height: 17px; }

/* =============================================================
   "Where we work." town index (typographic, on .section-stone)
   The ambient .draft-bg layer's component styles (opacity, draw
   loop, reduced-motion guard) live in main.css; this page only
   anchors the layer and keeps the content above it.
   ============================================================= */

.contact-areas { position: relative; }
.contact-areas .container { position: relative; z-index: 1; }

/* 3 columns desktop / 2 tablet / 1 mobile */
.town-index {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 720px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 40px;
}
@media (min-width: 640px) { .town-index { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .town-index { grid-template-columns: 1fr 1fr 1fr; } }

.town-index li {
  font-family: var(--font-stack);
  font-size: 1rem;
  color: var(--muted);
}

/* West Grove: the only embellished entry */

.town-index-note {
  margin-top: 2rem;
  font-size: .95rem;
  color: var(--muted);
}