/* ==========================================================================
   FABSOL ENGINEERS — Responsive
   ========================================================================== */

@media (max-width: 1199.98px){
  :root{ --section-pad: 5rem; }
  .hero-meta .item{ padding: 1.3rem 1.2rem; }
  .hero-meta .num{ font-size: 1.3rem; }
  .hero-meta .ico-wrap{ width: 44px; height: 44px; font-size: 1rem; }
  .hero-slider-controls{ bottom: 110px; }
  
  /* Gallery responsive */
  .gallery-grid{
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-auto-rows: 240px;
    gap: 1rem;
  }
}

@media (max-width: 991.98px){
  :root{ --section-pad: 4rem; }
  .hero{ min-height: 88vh; }
  .hero h1{ font-size: clamp(2.2rem, 7vw, 3.6rem); }
  .navbar-nav .nav-link{ padding: .75rem 0 !important; }
  
  /* Gallery responsive */
  .gallery-grid{
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 200px;
    gap: .9rem;
  }
  .gallery-item.size-w2{
    grid-column: span 2;
  }

  /* timeline mobile */
  .timeline::before{ left: 22px; }
  .timeline-item{ width: 100%; padding-left: 60px !important; padding-right: 0 !important; text-align:left !important; margin-left: 0 !important; }
  .timeline-item .dot{ left: 13px !important; right:auto !important; }

  .about-experience{ left: 12px; bottom: -22px; padding: 1rem 1.4rem; }
  .about-experience .num{ font-size: 2.2rem; }

  .hero-slider-controls{ display:none; }
}

@media (max-width: 767.98px){
  :root{ --section-pad: 3.5rem; }
  .topbar{ display:none !important; }
  .site-header .navbar{ padding: .2rem 0 !important; }
  .brand-logo{ height: 60px !important; }
  .brand-text strong{ font-size: 1rem; }
  .brand-text small{ font-size: .58rem; letter-spacing: 4px; }

  .page-header{ padding: 6rem 0 4rem; }

  .hero-content{ padding: 5rem 0 3rem; }
  .hero-heading-wrap{ padding-left: 1rem; }
  .hero-heading-wrap::before{ width: 4px; }
  .scroll-indicator{ display: none !important; }

  /* Gallery mobile - single column */
  .gallery-grid{
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-auto-rows: 160px;
    gap: .8rem;
  }
  .gallery-item.size-w2{
    grid-column: span 1;
  }
  .gallery-filters{
    margin-bottom: 2rem;
    gap: .5rem;
  }
  .gallery-filters button{
    padding: .55rem 1.2rem;
    font-size: .75rem;
  }
  
  .contact-card{ padding: 1.6rem; }
  .contact-info-card{ padding: 1.6rem; }
  .map-frame iframe{ height: 360px; }

  .cta-strip{ padding: 3rem 0; text-align:center; }
  .cta-strip .text-lg-end{ text-align:center !important; }
  .cta-strip .btn{ margin-bottom:.6rem; }
}

@media (max-width: 575.98px){
  .float-btns .fab{ width: 44px; height: 44px; font-size: .95rem; }
  .float-btns .fab span{ display:none; }
  .hero h1{ letter-spacing: 1px; }
  .stat-box .num{ font-size: 2.2rem; }
  
  /* Mobile drawer adjustments */
  .fab-offcanvas{ width: 100vw !important; }
  .brand-mobile img{ height: 42px; }
  .mobile-nav-list li a{ padding: .8rem 1.2rem; font-size: .86rem; }
  .mobile-cta{ padding: 1rem 1.2rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .reveal, .reveal-left, .reveal-right{ opacity:1; transform: none; }
}