/* ==================================================
   ULTRAWIDE SCREENS
================================================== */
@media (min-width: 1921px) {
    .hero-layout { max-width: 1600px; }
    .hero-heading { font-size: 7rem; }
}

/* ==================================================
   TABLETS LANDSCAPE & SMALL DESKTOPS (<1200px)
================================================== */
@media (max-width: 1200px) {
    /* Home Hero */
    .hero-heading { font-size: clamp(3rem, 5vw, 5rem); }
    
    /* Global Map Adjustments */
    .global-layout { grid-template-columns: 1fr; }
    .global-content { text-align: center; margin-bottom: 40px; }
    .global-desc { margin: 0 auto 40px; }
    .global-stats { justify-content: center; }
    .hub-list { justify-content: center; }
}

/* ==================================================
   TABLET PORTRAIT (<992px)
================================================== */
@media (max-width: 992px) {
    /* About Grids (Home & About Pages) */
    .about-grid, .editorial-grid, .team-grid { grid-template-columns: 1fr; gap: 40px; }
    .editorial-grid.reverse > * { direction: ltr; } /* Reset reverse alignment */
    
    /* Service Details Layout (SEO Page) */
    .service-details-layout { grid-template-columns: 1fr; gap: 40px; }
    .sd-sidebar { position: static; }
    
    /* Image Stack specific to Home */
    .image-stack { height: 400px; }
    .img-back { width: 100%; height: 100%; }
    .img-front { display: none; }
    
    /* Stats Box */
    .stats-newsletter-box { flex-direction: column; align-items: stretch; }
    .stats-area { justify-content: space-between; }
    
    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; }
    
    /* Blog */
    .blog-card { min-width: calc(50% - 15px); }
    .blog-grid { grid-template-columns: 1fr 1fr; }
}

/* ==================================================
   MOBILE NAV BREAKPOINT (<860px)
================================================== */
@media (max-width: 860px) {
    /* Hide Desktop Elements */
    #desktopNav { display: none; }
    .d-none-mobile { display: none; }
    
    /* Home Hero Adjustments */
    .hero { 
        height: auto; 
        min-height: auto; 
        padding-top: calc(var(--nav-height) + 40px); 
        padding-bottom: 60px; 
    }
    .hero-layout { flex-direction: column; }
    .hero-content { padding: 0 var(--gutter) 60px; text-align: center; }
    .hero-content-inner { margin: 0 auto; }
    .hero-buttons { justify-content: center; }
    .hero-visual { padding: 0 var(--gutter); width: 100%; height: 500px; }
    
    /* About Features */
    .about-features-row { flex-direction: column; align-items: flex-start; }
    .progress-box { margin: 0 auto; }
}

/* ==================================================
   MOBILE PORTRAIT (<768px)
================================================== */
@media (max-width: 768px) {
    /* General Spacing */
    .section { padding: 80px 0; }
    .page-header { padding: 150px 0 60px; }
    
    /* Grids to Single Column */
    .services-grid, .why-grid, .values-grid, .blog-grid { 
        grid-template-columns: 1fr; 
    }
    
    /* Service Details Inner Grids (SEO Page) */
    .sd-highlights, .sd-subservices { grid-template-columns: 1fr; padding: 20px; }
    
    /* Blog Slider Override */
    .blog-card { min-width: 100%; }
    
    /* Typography Overrides */
    .ed-title, .section-title, .sd-title { font-size: 2rem; }
    
    /* Stats */
    .stats-area { flex-direction: column; gap: 40px; }
    
    /* Footer */
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .fb-links { justify-content: center; flex-wrap: wrap; }
    
    /* Map Interaction Hide (Fall back to text lists) */
    .map-container { display: none; } 
    .global-layout { display: block; }
}

/* ==================================================
   SMALL MOBILE (<480px)
================================================== */
@media (max-width: 480px) {
    .hero-heading { font-size: 2.5rem; }
    .page-title { font-size: 2.5rem; }
    .sc-image { display: none; } /* Reduce visual clutter */
    .newsletter-title { font-size: 2rem; }
}