/* ============================================
   KAASHI SAFETY NETS — COMPLETE RESPONSIVE STYLESHEET
   100% Flawless Layout on All Mobile, Tablet & Desktop Screens
   ============================================ */

/* Global Overflow Protection */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

/* Ensure all images and containers scale properly */
img, video, iframe, table {
  max-width: 100% !important;
}

.container {
  width: 100% !important;
  max-width: var(--container-max);
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════
   1. TABLET & MEDIUM SCREENS (max-width: 1024px)
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Header */
  .top-bar-left { gap: var(--space-4); font-size: 12px; }
  .top-bar-pill { display: none; }
  
  .nav-menu a { padding: 8px 12px; font-size: 13px; }
  .navbar-brand img { height: 75px !important; max-height: 78px !important; width: auto !important; }

  /* Hero Section */
  .hero-split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .hero-showcase-card {
    max-width: 600px;
    margin: 0 auto;
  }

  .hero-visual-wrapper {
    height: 380px;
  }

  /* Bento & Calculator */
  .calc-wrapper {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-large {
    grid-column: span 2;
  }

  /* Services & Grids */
  .services-grid-modern,
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-5);
  }

  .about-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-8);
  }

  .about-image {
    max-width: 500px;
    margin: 0 auto;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-8);
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .testimonials-grid-modern,
  .testimonials-track {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Footers */
  .footer-grid-modern,
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-8);
  }
}

/* ══════════════════════════════════════════════
   2. MOBILE PHONES (max-width: 768px)
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --topbar-height: 0px;
    --header-height: 80px;
    --section-padding: clamp(2.5rem, 5vw, 3.5rem);
  }

  /* Hide Top bar on mobile */
  .top-bar {
    display: none !important;
  }

  /* Navbar */
  .navbar {
    top: 0 !important;
    height: 80px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: var(--shadow-sm) !important;
  }

  .navbar .nav-menu,
  .navbar .nav-cta {
    display: none !important;
  }

  .navbar-brand img {
    height: 68px !important;
    max-height: 72px !important;
    width: auto !important;
    max-width: 220px !important;
  }

  .hamburger {
    display: flex !important;
    margin-left: auto !important;
  }

  .mobile-menu-overlay {
    display: block !important;
  }

  .mobile-menu {
    display: block !important;
  }

  /* Hero Section */
  .hero-nextgen {
    padding: calc(var(--header-height) + 1.5rem) 0 3rem !important;
  }

  .hero-title {
    font-size: clamp(1.85rem, 6vw, 2.4rem) !important;
    line-height: 1.2 !important;
  }

  .hero-subtitle {
    font-size: var(--fs-body) !important;
    margin-bottom: var(--space-6) !important;
  }

  .hero-visual-wrapper {
    height: 280px !important;
  }

  .floating-badge {
    display: none !important;
  }

  .hero-trust-badges {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Stats Counter Ribbon */
  .stats-strip {
    margin-top: 0 !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-4) !important;
    width: 100% !important;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-4) !important;
  }

  .stat-card::after {
    display: none !important;
  }

  .stat-number {
    font-size: 1.85rem !important;
  }

  /* Calculator Section */
  .calc-wrapper {
    padding: var(--space-6) !important;
    border-radius: var(--radius-lg) !important;
  }

  .calc-form-grid {
    grid-template-columns: 1fr !important;
  }

  .calc-group.full-width {
    grid-column: span 1 !important;
  }

  .calc-price-display {
    font-size: 2rem !important;
  }

  /* Bento Grid */
  .bento-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }

  .bento-large {
    grid-column: span 1 !important;
  }

  .bento-card {
    padding: var(--space-6) !important;
  }

  /* Services Grid */
  .services-grid-modern,
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-5) !important;
    width: 100% !important;
  }

  .service-img-box,
  .service-card-image {
    height: 200px !important;
  }

  .service-action-row,
  .service-card-buttons {
    flex-direction: row !important;
    gap: 8px !important;
  }

  /* Comparison Table */
  .comparison-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    border-radius: var(--radius-md) !important;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 12px 14px !important;
    font-size: 12px !important;
    white-space: normal !important;
  }

  /* Process Timeline */
  .process-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }

  .process-card {
    padding: var(--space-6) !important;
  }

  /* Testimonials */
  .testimonials-grid-modern,
  .testimonials-track {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
    width: 100% !important;
  }

  /* Areas / Locations */
  .areas-grid-modern,
  .locations-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-2) !important;
  }

  .area-pill,
  .location-card {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  /* Gallery Grid */
  .gallery-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-3) !important;
  }

  /* Ticker & Marquee Width Control */
  .ticker-section,
  .cta-strip,
  .cta-marquee,
  .cta-banner-nextgen {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .ticker-item {
    width: 200px !important;
  }

  .ticker-item img {
    height: 250px !important;
  }

  .cta-marquee-item {
    font-size: 13px !important;
    padding: 8px 18px !important;
  }

  /* Page Banner (Inner Pages) */
  .page-banner {
    padding: calc(var(--header-height) + var(--space-6)) 0 var(--space-8) !important;
  }

  .page-banner h1 {
    font-size: 1.85rem !important;
  }

  /* About & Features & Contact (Inner Pages) */
  .about-grid,
  .contact-grid,
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
    width: 100% !important;
  }

  .about-features {
    grid-template-columns: 1fr !important;
  }

  .contact-form-wrapper,
  .contact-info-card {
    padding: var(--space-6) !important;
  }

  /* Footers (Both .footer-grid-modern and .footer-grid) */
  .footer-nextgen,
  .footer {
    padding: var(--space-8) 0 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .footer-grid-modern,
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
    width: 100% !important;
    padding-bottom: var(--space-8) !important;
  }

  .footer-owner-photo {
    max-width: 180px !important;
  }

  .footer-bottom-bar,
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: var(--space-3) !important;
    padding: var(--space-4) 0 !important;
  }

  .footer-bottom-links {
    justify-content: center !important;
  }

  /* Floating Desktop Actions vs Mobile Bottom Bar */
  .floating-actions-desktop,
  .floating-buttons {
    display: none !important;
  }

  .mobile-bottom-bar,
  .mobile-cta {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: #FFFFFF !important;
    padding: 8px 12px !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    border-top: 1px solid var(--color-border) !important;
  }

  .mobile-bottom-inner,
  .mobile-cta-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .mobile-bottom-inner a,
  .mobile-cta-inner a {
    padding: 11px 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: var(--radius-full) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
  }

  body {
    padding-bottom: 75px !important;
  }

  /* Chatbot Widget on Mobile */
  .chatbot-widget {
    bottom: 80px !important;
    right: 14px !important;
  }

  .chatbot-toggle {
    width: 50px !important;
    height: 50px !important;
    font-size: 24px !important;
  }

  .chatbot-label,
  .chatbot-badge {
    display: none !important;
  }

  .chatbot-popup {
    position: fixed !important;
    bottom: 80px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
    box-sizing: border-box !important;
  }
}

/* ══════════════════════════════════════════════
   3. SMALL MOBILE PHONES (max-width: 480px)
   ══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero-cta-group {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .hero-cta-group .btn {
    width: 100% !important;
  }

  .cta-actions-row {
    flex-direction: column !important;
    width: 100% !important;
  }

  .cta-actions-row .btn {
    width: 100% !important;
  }

  .areas-grid-modern,
  .locations-grid {
    grid-template-columns: 1fr !important;
  }

  .gallery-grid {
    grid-template-columns: 1fr !important;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-3) !important;
  }

  .stat-number {
    font-size: 1.6rem !important;
  }
}