/* =============================================
   PropertyServiceHelp.com — Responsive CSS
   ============================================= */

/* ---- Hamburger active animation ---- */
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hamburger span { transition: all 0.22s ease; }

/* ---- Mobile backdrop ---- */
.mob-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,45,82,0.45);
  z-index: 997;
  backdrop-filter: blur(2px);
}
.mob-backdrop.show { display: block; }

/* ---- Mobile close button ---- */
.mob-close {
  position: absolute; top: 18px; right: 18px;
  background: var(--lgray); border: none; border-radius: 8px;
  width: 40px; height: 40px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy); transition: background 0.2s;
}
.mob-close:hover { background: var(--border); }

/* ---- Mobile menu: hidden by default at ALL sizes, shown only via JS .open class on mobile ---- */
.mobile-menu {
  display: none !important;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 998;
  pointer-events: none;
}
.mobile-menu.open {
  pointer-events: all;
}

/* ---- Tablet (≤1024px) ---- */
@media (max-width: 1024px) {
  .hero-grid         { grid-template-columns: 1fr; gap: 36px; }
  .hero h1           { font-size: clamp(1.8rem,5vw,2.6rem); }
  .hero-form-card    { max-width: 600px; }
  .services-grid     { grid-template-columns: repeat(3,1fr); }
  .why-grid          { grid-template-columns: 1fr; }
  .why-img-wrap      { max-height: 380px; }
  .why-img-wrap img  { height: 380px; }
  .process-grid      { grid-template-columns: repeat(2,1fr); gap: 32px; }
  .process-grid::before { display: none; }
  .counters-grid     { grid-template-columns: repeat(2,1fr); }
  .testimonials-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid       { grid-template-columns: 1fr 1fr; gap: 32px; }
  .contact-grid      { grid-template-columns: 1fr; }
  .team-grid         { grid-template-columns: repeat(2,1fr); }
  .mega-menu         { min-width: 520px; grid-template-columns: repeat(2,1fr); left: 0; }
  .areas-grid        { grid-template-columns: repeat(3,1fr); }
}

/* ---- Mobile Large (≤768px) ---- */
@media (max-width: 768px) {
  section { padding: 48px 0; }
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.5rem; }

  /* Topbar */
  .topbar-left  { display: none; }
  .topbar .container { justify-content: center; }

  /* Navbar */
  .nav-menu, .nav-actions .btn { display: none; }
  .hamburger { display: flex; flex-direction: column; justify-content: center; }
  .nav-phone { font-size: .82rem; }

  /* Mobile Menu — full-screen overlay sliding in from top */
  .mobile-menu {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--white);
    overflow-y: auto;
    z-index: 998;
    padding: 80px 20px 32px;
    gap: 4px;
    /* Hidden state */
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .mobile-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }
  .mob-link {
    display: block; padding: 13px 16px; font-size: .95rem; font-weight: 600;
    color: var(--navy); border-radius: 8px; border-bottom: 1px solid var(--border);
  }
  .mob-link:hover { background: var(--lgray); color: var(--royal); }
  .mob-section-title {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--orange); font-weight: 700; padding: 14px 16px 6px;
  }
  .mob-cta { margin-top: 16px; }
  .mob-cta .btn { width: 100%; justify-content: center; }

  /* Hero */
  .hero { min-height: auto; padding: 56px 0 44px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-stats { gap: 20px; }
  .hero-stat .num { font-size: 1.5rem; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { justify-content: center; }

  /* Form */
  .form-row { grid-template-columns: 1fr; }
  .hero-form-card { padding: 24px 18px; }

  /* Services */
  .services-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }
  .service-card  { padding: 20px 16px; }

  /* Why Choose */
  .why-features { grid-template-columns: 1fr; }
  .why-img-wrap img { height: 260px; }

  /* Process */
  .process-grid { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* Counters */
  .counters-grid { grid-template-columns: repeat(2,1fr); gap: 24px; }
  .counter-num   { font-size: 2rem; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Areas */
  .areas-grid { grid-template-columns: repeat(2,1fr); }

  /* CTA Banner */
  .cta-banner-inner { flex-direction: column; text-align: center; }
  .cta-banner-actions { justify-content: center; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom-links { justify-content: center; flex-wrap: wrap; gap: 12px; }

  /* Newsletter */
  .newsletter-inner { flex-direction: column; text-align: center; }
  .newsletter-form  { max-width: 100%; }

  /* Benefits */
  .benefits-list { grid-template-columns: 1fr; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; }

  /* Team */
  .team-grid { grid-template-columns: 1fr 1fr; }

  /* Float btns */
  .float-quote-btn { bottom: 86px; right: 16px; padding: 10px 14px; font-size: .78rem; }
  .float-call-btn  { bottom: 20px; right: 16px; width: 48px; height: 48px; }
  .back-top        { bottom: 20px; left: 16px; width: 40px; height: 40px; }

  /* Map */
  .map-section iframe { height: 280px; }
}

/* ---- Mobile Small (≤480px) ---- */
@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
  .areas-grid    { grid-template-columns: repeat(2,1fr); }
  .process-grid  { grid-template-columns: 1fr; }
  .counters-grid { grid-template-columns: 1fr 1fr; }
  .hero-stats    { justify-content: center; }
  .team-grid     { grid-template-columns: 1fr; }
  .mega-menu     { min-width: 90vw; grid-template-columns: 1fr; }
  .newsletter-form { flex-direction: column; }
  .newsletter-input { border-radius: 8px; }
  .newsletter-btn   { border-radius: 8px; width: 100%; justify-content: center; }
}

/* ---- Print ---- */
@media print {
  .navbar, footer, .float-quote-btn, .float-call-btn, .back-top, .topbar { display: none !important; }
  section { padding: 24px 0; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}