/* ═══════════════════════════════════════════════════════
   Contact Page — Empower LO
   ═══════════════════════════════════════════════════════ */

/* ═══ HERO ═══ */
.contact-hero { padding: 140px 0 60px; text-align: center; }
.contact-hero-content { max-width: 700px; margin: 0 auto; }
.contact-hero h1 { margin-bottom: 20px; }
.contact-hero-sub { font-size: 18px; line-height: 1.7; color: var(--text-secondary); }

/* ═══ MAIN GRID ═══ */
.contact-main { padding: 40px 0 100px; }
.contact-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px;
  align-items: start;
}

/* ═══ FORM ═══ */
.contact-form-wrapper h2 { margin-bottom: 8px; }
.form-intro { font-size: 16px; color: var(--text-secondary); margin-bottom: 32px; line-height: 1.7; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; }
.form-group-full { margin-bottom: 16px; }
.form-group label {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 6px; letter-spacing: 0.3px;
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px; border: 1px solid var(--border);
  border-radius: 10px; font-size: 15px; font-family: inherit;
  color: var(--text); background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(91,62,140,0.1);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group select { cursor: pointer; }

.contact-form .btn-primary { width: 100%; justify-content: center; margin-top: 8px; }

/* ═══ SIDEBAR ═══ */
.contact-sidebar { display: flex; flex-direction: column; gap: 24px; }
.contact-info-card {
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: 16px; padding: 28px;
}
.info-card-icon { color: var(--purple); margin-bottom: 12px; }
.contact-info-card h3 { font-size: 17px; margin-bottom: 16px; }
.response-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 14px;
}
.response-item:last-of-type { border-bottom: none; }
.response-item strong { color: var(--text); }
.response-item span { color: var(--text-secondary); }
.info-note { font-size: 14px; color: var(--text-secondary); margin-bottom: 12px; }
.info-sub { font-size: 13px; color: var(--text-muted); margin-top: 12px; line-height: 1.6; }
.email-link {
  display: inline-block; font-size: 17px; font-weight: 700;
  color: var(--purple); text-decoration: none; margin-bottom: 4px;
}
.email-link:hover { text-decoration: underline; }

/* ═══ STRATEGY CALL ═══ */
.contact-call { padding: 100px 0; background: var(--bg-subtle); }
.call-wrapper {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: start; max-width: 1200px; margin: 0 auto;
}
.call-content h2 { margin-bottom: 16px; }
.call-content p { font-size: 17px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 24px; }
.call-benefits { list-style: none; padding: 0; }
.call-benefits li {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; color: var(--text-secondary); padding: 8px 0;
}
.call-benefits svg { color: var(--purple); flex-shrink: 0; }

.calendly-placeholder {
  background: white; border: 2px dashed var(--border);
  border-radius: 16px; padding: 48px 32px; text-align: center;
}
.calendly-placeholder svg { color: var(--purple); margin-bottom: 16px; }
.calendly-placeholder h3 { margin-bottom: 8px; }
.calendly-placeholder p { font-size: 15px; color: var(--text-muted); margin-bottom: 24px; }

/* ═══ FAQ ═══ */
.contact-faq { padding: 100px 0; }
.contact-faq .section-header { text-align: center; margin-bottom: 60px; }
.faq-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  max-width: 900px; margin: 0 auto;
}
.faq-item {
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: 16px; padding: 28px;
}
.faq-item h3 { font-size: 16px; margin-bottom: 8px; }
.faq-item p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.faq-item a { color: var(--purple); text-decoration: none; }
.faq-item a:hover { text-decoration: underline; }

/* ═══ EXPLORE ═══ */
.contact-explore { padding: 40px 0; text-align: center; }
.contact-explore p { font-size: 16px; color: var(--text-muted); }
.contact-explore a { color: var(--purple); text-decoration: none; }
.contact-explore a:hover { text-decoration: underline; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .contact-hero { padding: 120px 16px 40px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .form-row { grid-template-columns: 1fr; }
  .call-wrapper { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
}