/* ═══════════════════════════════════════════════════
   HOMEPAGE — Elementor ↔ Production CSS Bridge
   Maps Elementor section classes to exact production styles.
   Native Elementor widgets inherit the right look.
   ═══════════════════════════════════════════════════ */

/* ─── HERO (HTML widget handles this, but ensure section is clean) ─── */
.h5-hero,
.h5-hero > .elementor-container {
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 100% !important;
}
.h5-hero .elementor-widget-wrap { padding: 0 !important; }
.h5-hero .elementor-widget { margin-bottom: 0 !important; }

/* ─── PROBLEM SECTION ─── */
.h5-problem {
  background: var(--warm-50) !important;
  padding: 6rem 3rem !important;
}
.h5-problem > .elementor-container {
  max-width: 1200px !important;
  text-align: center;
}
.h5-problem .elementor-widget-wrap { padding: 0 !important; }
.h5-problem .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-size: 2.6rem !important;
  line-height: 1.2 !important;
  margin-bottom: 1.5rem !important;
  font-weight: 400 !important;
}
.h5-problem .elementor-heading-title em {
  font-style: italic !important;
  color: var(--amber) !important;
}
.h5-problem .elementor-text-editor {
  font-size: 1.1rem !important;
  color: var(--slate-400) !important;
  line-height: 1.8 !important;
  font-weight: 300 !important;
  max-width: 1200px !important;
  margin: 0 auto 3.5rem !important;
}
.h5-problem .elementor-widget-html {
  margin-bottom: 0 !important;
}

/* ─── PAIN CARDS (inside h5-problem, rendered by HTML widget) ─── */
/* Production CSS handles .pain-grid, .pain-card, .pain-icon already */

/* ─── SERVICES SECTION ─── */
.h5-services {
  background: var(--warm-100) !important;
  padding: 6rem 3rem !important;
}
.h5-services > .elementor-container {
  max-width: 1200px !important;
  text-align: center;
}
.h5-services .elementor-widget-wrap { padding: 0 !important; }
.h5-services .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-size: 2.6rem !important;
  line-height: 1.2 !important;
  margin-bottom: 1rem !important;
  font-weight: 400 !important;
}
.h5-services .elementor-text-editor {
  font-size: 1.05rem !important;
  color: var(--slate-400) !important;
  font-weight: 300 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  margin-bottom: 4rem !important;
}

/* ─── APPROACH SECTION ─── */
.h5-approach {
  background: var(--warm-50) !important;
  padding: 7rem 3rem !important;
}
.h5-approach > .elementor-container {
  max-width: 1200px !important;
  text-align: center;
}
.h5-approach .elementor-widget-wrap { padding: 0 !important; }
.h5-approach .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-size: 2.5rem !important;
  line-height: 1.15 !important;
  margin-bottom: 1.5rem !important;
  font-weight: 400 !important;
}
.h5-approach .elementor-heading-title em {
  font-style: italic !important;
  color: var(--amber) !important;
}
.h5-approach .elementor-text-editor {
  font-size: 1.05rem !important;
  color: var(--slate-400) !important;
  line-height: 1.8 !important;
  font-weight: 300 !important;
  margin-bottom: 1.5rem !important;
}
.h5-approach .elementor-text-editor p {
  margin-bottom: 1.5rem;
}
.h5-approach .elementor-button-wrapper {
  margin-top: 0.5rem;
}
.h5-approach .elementor-button {
  background: var(--slate-900) !important;
  color: white !important;
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 0.9rem 1.8rem !important;
  border: none !important;
  transition: all 0.3s !important;
}
.h5-approach .elementor-button:hover {
  background: var(--slate-800) !important;
  transform: translateY(-2px);
}

/* ─── PRINCIPLES (HTML widget, production CSS handles everything) ─── */
.h5-principles {
  padding: 0 !important;
}
.h5-principles > .elementor-container { max-width: 100% !important; padding: 0 !important; }
.h5-principles .elementor-widget-wrap { padding: 0 !important; }
.h5-principles .elementor-widget { margin-bottom: 0 !important; }

/* ─── TESTIMONIALS ─── */
.h5-testimonials {
  background: var(--warm-100) !important;
  padding: 6rem 3rem !important;
}
.h5-testimonials > .elementor-container {
  max-width: 1200px !important;
}
.h5-testimonials .elementor-widget-wrap { padding: 0 !important; }
.h5-testimonials .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-size: 2.4rem !important;
  font-weight: 400 !important;
  margin-bottom: 3rem !important;
}

/* ─── CTA SECTION ─── */
.h5-cta {
  background: var(--slate-900) !important;
  padding: 6rem 3rem !important;
  position: relative;
  overflow: hidden;
}
.h5-cta::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,146,42,0.06), transparent 70%);
  pointer-events: none;
}
.h5-cta > .elementor-container {
  max-width: 1200px !important;
  text-align: center;
  position: relative;
  z-index: 2;
}
.h5-cta .elementor-widget-wrap { padding: 0 !important; }
.h5-cta .elementor-heading-title {
  font-family: var(--font-display) !important;
  font-size: 2.6rem !important;
  color: white !important;
  line-height: 1.15 !important;
  margin-bottom: 1rem !important;
  font-weight: 400 !important;
}
.h5-cta .elementor-heading-title em {
  font-style: italic !important;
  color: var(--amber-soft) !important;
}
.h5-cta .elementor-text-editor,
.h5-cta .elementor-text-editor p {
  font-size: 1.1rem !important;
  color: var(--slate-300) !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  margin-bottom: 2.5rem !important;
}
.h5-cta .elementor-button-wrapper { display: inline-flex; }
.h5-cta .h5-btn-amber .elementor-button {
  background: var(--amber) !important;
  color: white !important;
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 0.9rem 1.8rem !important;
  border: none !important;
}
.h5-cta .h5-btn-amber .elementor-button:hover {
  background: var(--amber-soft) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(232,146,42,0.3);
}
.h5-cta .h5-btn-ghost .elementor-button {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.8) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 0.9rem 1.8rem !important;
}
.h5-cta .h5-btn-ghost .elementor-button:hover {
  background: rgba(255,255,255,0.1) !important;
  color: white !important;
}
/* CTA buttons side by side */
.h5-cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.h5-cta-buttons .elementor-column {
  width: auto !important;
  flex: none !important;
}

/* ─── SECTION LABEL (used inside text-editor widgets) ─── */
/* Production CSS already handles .section-label */

/* ─── RESPONSIVE ─── */
@media (max-width: 960px) {
  .h5-problem { padding: 3.5rem 1.5rem !important; }
  .h5-problem .elementor-heading-title { font-size: 2rem !important; }
  .h5-problem .elementor-text-editor { font-size: 1rem !important; margin-bottom: 2.5rem !important; }

  .h5-services { padding: 3.5rem 1.5rem !important; }
  .h5-services .elementor-heading-title { font-size: 2rem !important; }
  .h5-services .elementor-text-editor { margin-bottom: 2.5rem !important; }

  .h5-approach { padding: 3.5rem 1.5rem !important; }
  .h5-approach .elementor-heading-title { font-size: 2rem !important; }

  .h5-testimonials { padding: 3.5rem 1.5rem !important; }
  .h5-testimonials .elementor-heading-title { font-size: 2rem !important; }

  .h5-cta { padding: 3.5rem 1.5rem !important; }
  .h5-cta .elementor-heading-title { font-size: 1.8rem !important; }
  .h5-cta .elementor-text-editor { font-size: 1rem !important; }
  .h5-cta-buttons { flex-direction: column; align-items: center; }
}
@media (max-width: 600px) {
  .h5-problem .elementor-heading-title { font-size: 1.6rem !important; }
}