/* =========================================================
   MARKET CHAKRA — Contact Page styles
   Additive only. Depends on tokens (--navy, --coral, --border,
   --font-display, --radius, etc.) and shared components
   (.hero, .card, .process-track, .stats-strip, .testimonial-card,
   .cta-band, .btn, .form-control, .live-dot, .eyebrow, .dash-eyebrow)
   already defined in style.css. Load this file AFTER style.css.
========================================================= */

/* --- Hero split: story + floating quote form --- */
.contact-hero-inner{ grid-template-columns:1fr 1.05fr; gap:60px; }

.trust-badges-row{ display:flex; gap:30px; flex-wrap:wrap; margin:24px 0 28px; }
.trust-badges-row strong{ display:block; font-family:var(--font-display); color:#fff; font-size:1.4rem; }
.trust-badges-row span{ font-size:.8rem; color:#a9b1e2; }

.quick-contact-row{ display:flex; gap:12px; flex-wrap:wrap; }
.contact-pill{
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:30px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); color:#fff;
  font-size:.86rem; font-weight:600; font-family:var(--font-display); transition:all .2s ease;
}
.contact-pill:hover{ background:rgba(255,255,255,.15); transform:translateY(-2px); }
.contact-pill.is-whatsapp{ background:#25D366; border-color:#25D366; }
.contact-pill.is-whatsapp:hover{ background:#1fb958; }

/* --- Floating "live" quote card (echoes the dashboard glass-card language) --- */
.quote-card{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(18px); border-radius:20px; padding:30px;
  box-shadow:0 25px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.quote-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.quote-card-head h3{ color:#fff; margin:0; font-size:1.2rem; }
.quote-card-head .dash-eyebrow{ color:#ff8a76; margin-bottom:6px; }
.quote-online{ display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:30px; background:rgba(255,255,255,.07); color:#c9cfef; font-size:.68rem; white-space:nowrap; }

.quote-card .form-group label{ color:#dfe3fa; }
.quote-card .form-control{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#fff; }
.quote-card .form-control::placeholder{ color:#8890c2; }
.quote-card .form-control:focus{ border-color:var(--coral); background:rgba(255,255,255,.1); }
.quote-card select.form-control option{ color:#14183a; }

.optional-fields{ border-top:1px dashed rgba(255,255,255,.16); margin-top:4px; padding-top:4px; }
.optional-fields summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px;
  color:#ff8a76; font-weight:600; font-family:var(--font-display); font-size:.86rem; padding:14px 0;
}
.optional-fields summary::-webkit-details-marker{ display:none; }
.optional-fields summary::before{ content:"+"; font-size:1.15rem; line-height:1; }
.optional-fields[open] summary::before{ content:"–"; }
.optional-fields .optional-fields-inner{ padding-top:6px; }

.form-fine-print{ text-align:center; font-size:.76rem; color:#8890c2; margin:14px 0 0; }
.form-fine-print span{ color:#c9cfef; }

/* --- 4-step "what happens next" (variant of process-track) --- */
.process-track-4{ grid-template-columns:repeat(4,1fr); }
.process-track-4::before{ left:12%; right:12%; }

/* --- Direct-contact cards row --- */
.contact-card-value{ font-family:var(--font-display); font-weight:700; color:var(--navy); font-size:1.02rem; margin-top:2px; }
.contact-card-value:hover{ color:var(--coral); }

/* --- FAQ accordion --- */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px 22px; }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px;
  font-family:var(--font-display); font-weight:600; color:var(--navy); font-size:.98rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--coral); font-size:1.3rem; flex-shrink:0; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin:12px 0 0; font-size:.92rem; }

@media (max-width:1024px){
  .contact-hero-inner{ grid-template-columns:1fr; }
  .process-track-4{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .process-track-4::before{ display:none; }
}
@media (max-width:640px){
  .process-track-4{ grid-template-columns:1fr; }
  .trust-badges-row{ gap:20px; }
}