/* =============================================================
   CONTACT.CSS — Citizens Reverse Mortgage.
   Conditionally enqueued for the page with slug "contact".
   Contact is not specced in the wireframe/DOCX; assembled from
   approved contact details + a GHL form placeholder + office map.
   ============================================================= */

/* ── SECTION 01 — CONTACT HERO (centered) ────────────────── */
.contact-hero {
  position: relative;
  background: var(--grad-hero);
  color: #fff;
  padding-block: clamp(56px, 7vw, 100px);
  overflow: hidden;
  text-align: center;
}
.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(620px circle at 50% -8%, rgba(184, 148, 58, 0.26), transparent 58%),
    radial-gradient(440px circle at 90% 100%, rgba(61, 122, 138, 0.24), transparent 60%);
  pointer-events: none;
}
.contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
  mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
  pointer-events: none;
}
.contact-hero__inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; }
.contact-hero__eyebrow { color: var(--gold-soft); }
.contact-hero h1 { color: #fff; margin-bottom: var(--space-md); }
.contact-hero__sub { font-size: clamp(21px, 1.9vw, 25px); color: #d8e0f2; margin-bottom: 0; }

/* ── SECTION 02 — CONTACT DETAILS + FORM ─────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.contact-info__list { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: grid; gap: var(--space-lg); }
.contact-info__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: start; }
.contact-info__icon {
  width: 52px; height: 52px;
  flex-shrink: 0;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: var(--gold);
  background: linear-gradient(150deg, rgba(184, 148, 58, 0.16), rgba(184, 148, 58, 0.06));
  border: 1px solid rgba(184, 148, 58, 0.22);
}
.contact-info__list h3 { font-size: 17px; margin-bottom: 4px; }
.contact-info__list p { margin: 0; color: var(--text-body); }
.contact-info__list a { color: var(--teal); font-weight: 600; }
.contact-info__cta { margin-top: var(--space-xs); }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ── SECTION 03 — MAP ────────────────────────────────────── */
.contact-map {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.contact-map iframe { display: block; width: 100%; height: 440px; border: 0; }