/* =====================================================================
   CONTACT.CSS — page-specific styles for contact.html
   Shared nav / contact pill / footer / buttons / .cm-field form styling
   (from base.css, originally built for the contact modal) live in
   base.css and are reused here as-is.
   ===================================================================== */

/* ============ INTRO ============ */
.contact-intro{ background:var(--cream); padding:150px 0 90px; text-align:center; }
.contact-intro-wrap{ max-width:720px; margin:0 auto; padding:0 48px; }
.contact-intro h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(32px,4vw,48px);
  color:var(--ink); line-height:1.15;
}
.contact-intro p{
  margin-top:20px; font-family:var(--sans); font-weight:400; font-size:17px;
  line-height:1.7; color:var(--grey);
}

/* Both anchor targets need scroll-margin so the fixed header doesn't
   cover the section heading when jumped to via #book-a-call / #shortlist. */
#book-a-call, #shortlist{ scroll-margin-top:110px; }

/* ============ BOOK A CALL ============ */
.contact-book{ background:var(--white); padding:100px 0; }
.contact-book-wrap{ max-width:820px; margin:0 auto; padding:0 48px; text-align:center; }
.contact-book-wrap .eyebrow{ display:block; margin-bottom:16px; }
.contact-book-wrap h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.2vw,38px); color:var(--ink);
}
.contact-book-wrap > p{
  margin:18px auto 0; max-width:56ch;
  font-family:var(--sans); font-size:16px; line-height:1.7; color:var(--grey);
}

.calendly-inline-widget{ margin-top:48px; }

.contact-book-wa{
  display:inline-flex; align-items:center; gap:10px; margin-top:28px;
  border:1px solid var(--hairline); color:var(--ink);
  font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:16px 30px; transition:background .2s ease, border-color .2s ease;
}
.contact-book-wa:hover{ background:var(--cream); border-color:var(--ink); }
.contact-book-wa svg{ width:15px; height:15px; stroke:var(--ink); }

/* ============ WHATSAPP CTA ============ */
.contact-whatsapp{ background:var(--white); padding:120px 0; }
.contact-whatsapp-wrap{ max-width:640px; margin:0 auto; padding:0 48px; text-align:center; }
.contact-whatsapp-wrap .eyebrow{ display:block; margin-bottom:16px; }
.contact-whatsapp-wrap h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.6vw,42px); color:var(--ink);
}
.contact-whatsapp-wrap > p{
  margin:18px auto 0; max-width:48ch;
  font-family:var(--sans); font-size:16px; line-height:1.7; color:var(--grey);
}
.btn-whatsapp-big{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:44px auto 0; width:100%; max-width:440px;
  background:#25D366; color:#fff; border:none; cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:17px; letter-spacing:.01em;
  padding:22px 28px; border-radius:6px;
  box-shadow:0 10px 28px rgba(37,211,102,0.3);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-whatsapp-big:hover{ background:#1ebe5a; transform:translateY(-2px); box-shadow:0 14px 32px rgba(37,211,102,0.38); }
.btn-whatsapp-big svg{ width:24px; height:24px; stroke:#fff; flex-shrink:0; }
.contact-whatsapp-note{
  display:block; margin-top:18px;
  font-family:var(--sans); font-size:13px; color:var(--grey);
}

/* ============ WHATSAPP PRE-QUALIFICATION MODAL ============ */
.wa-modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(20,19,17,0.6); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.wa-modal-overlay.is-open{ display:flex; }

.wa-modal{
  position:relative; width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
  background:#EDEAE2; padding:48px 44px;
}
.wa-modal .eyebrow{ display:block; margin-bottom:14px; }
.wa-modal h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(24px,3vw,30px); color:var(--ink);
}
.wa-modal > p{
  margin:14px 0 36px; max-width:44ch;
  font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--grey);
}
.wa-modal .cm-actions{ justify-content:center; margin-top:8px; }
.wa-modal .cm-send{ width:100%; text-align:center; }

.wa-modal-close{
  position:absolute; top:20px; right:20px; z-index:1;
  width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(20,19,17,0.06);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.wa-modal-close:hover{ background:rgba(20,19,17,0.12); }
.wa-modal-close svg{ width:15px; height:15px; stroke:var(--ink); }

@media (max-width:640px){
  .wa-modal{ padding:56px 24px 36px; }
  .wa-modal > p{ max-width:none; }
}

/* ============ DIVIDER ============ */
.contact-divider{
  display:flex; align-items:center; gap:20px;
  max-width:820px; margin:0 auto; padding:0 48px;
}
.contact-divider::before, .contact-divider::after{
  content:""; flex:1; height:1px; background:var(--hairline);
}
.contact-divider span{
  font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey);
}

/* ============ GET SHORTLISTED ============ */
.contact-shortlist{ background:var(--cream); padding:100px 0 130px; }
.shortlist-card{ max-width:820px; margin:0 auto; padding:0 48px; }
.shortlist-card .eyebrow{ display:block; margin-bottom:16px; text-align:center; }
.shortlist-card h2{
  text-align:center;
  font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.2vw,38px); color:var(--ink);
}
.shortlist-card > p{
  margin:18px auto 0; max-width:56ch; text-align:center;
  font-family:var(--sans); font-size:16px; line-height:1.7; color:var(--grey);
}
.shortlist-card form{ margin-top:56px; }
.shortlist-card .cm-actions{ justify-content:center; margin-top:8px; }
.shortlist-card.is-sent form{ display:none; }
.shortlist-card.is-sent .cm-success{ display:block; }

@media (max-width:640px){
  .contact-intro{ padding:110px 0 64px; }
  .contact-book, .contact-shortlist, .contact-whatsapp{ padding:72px 0; }
  .calendly-inline-widget{ min-width:0; height:580px !important; margin-top:32px; }
  .shortlist-card form{ margin-top:40px; }
  .btn-whatsapp-big{ padding:20px 22px; font-size:16px; margin-top:36px; }
}