/* ==========================================================
   21 REALTORS — RESPONSIVE OVERRIDES
   ========================================================== */

/* Laptop / small desktop */
@media (max-width: 1199px) {
    .section { padding: 100px 0; }
    .cta-banner { padding: 60px; }
    .main-nav ul { gap: 26px; }
}

/* Tablet */
@media (max-width: 991px) {
    .nav-toggle { display: flex; }
    .main-nav, .navbar-actions .btn-luxury, .navbar-actions .nav-phone { display: none !important; }
    .section { padding: 80px 0; }
    .hero { min-height: 92vh; }
    .hero-stats { gap: 34px; margin-top: 60px; }
    .floating-badge { display: none; }
    .overview-media .exp-badge { left: 14px; bottom: -20px; padding: 18px 20px; }
    .cta-banner { padding: 50px 34px; text-align: center; }
    .cta-banner::before { display: none; }
    .cta-actions { justify-content: center; }
    .timeline-item::before, .timeline-dot { display: none; }
    .timeline-item { flex-direction: column; gap: 10px; }
    .pd-info-strip { margin-top: 20px; }
    .enquiry-sticky { position: static; margin-top: 40px; }
}

/* Mobile */
@media (max-width: 767px) {
    .section { padding: 64px 0; }
    .section-head { margin-bottom: 40px; }
    .hero h1 { font-size: 38px; }
    .hero p.lead { font-size: 16px; }
    .hero-actions { flex-direction: column; align-items: flex-start; gap: 14px; }
    .hero-actions .btn-luxury, .hero-actions .btn-outline-luxury { width: 100%; justify-content: center; }
    .hero-stats { flex-wrap: wrap; gap: 24px 40px; }
    .contact-form-wrap { padding: 30px 22px; }
    .cta-banner h2 { font-size: 26px; }
    .pd-info-item { min-width: 50%; border-right: none; border-bottom: 1px solid var(--c-border); }
    .why-media { min-height: 300px; }
    .footer-bottom .container { flex-direction: column; text-align: center; }
    .page-header { padding: 160px 0 70px; }
}

/* Small mobile */
@media (max-width: 480px) {
    .hero h1 { font-size: 32px; }
    .brand-text strong { font-size: 16px; }
    .brand-num { width: 40px; height: 40px; font-size: 22px; }
    .float-btn { width: 46px; height: 46px; font-size: 17px; right: 16px; }
    .float-whatsapp { bottom: 16px; }
    .float-top { bottom: 74px; }
    .cta-banner { padding: 40px 20px; }
}