/* =========================================================
   DOC WASH — responsive.css
   Breakpoints: 1440 / 1280 / 1024 / 768 / 640 / 480 / 375 / 320
   ========================================================= */

/* Large desktop */
@media (max-width: 1440px) {
  :root { --container: 1160px; }
}

@media (max-width: 1280px) {
  :root { --container: 1080px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-contact-col { grid-column: 1 / -1; }
}

/* Tablet landscape */
@media (max-width: 1080px) {
  .process-grid { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .process-line { display: none; }
  .masonry { columns: 2; }
}

@media (max-width: 1024px) {
  .nav-links, .nav-phone { display: none; }
  .hamburger { display: block; }
  .about { grid-template-columns: 1fr; }
  .about__media { max-width: 520px; margin-inline: auto; }
  .blog-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; grid-template-columns: repeat(2, 1fr); }
  .split-cta { grid-template-columns: 1fr; text-align: center; }
  .split-cta .cta-band__actions, .split-cta .hero__actions { justify-content: center; }
}

/* Tablet portrait */
@media (max-width: 768px) {
  :root { --header-h: 100px; }
  .brand img { height: 84px; }
  .site-header.scrolled .brand img, .site-header.solid .brand img { height: 74px; }
  .topbar__left { gap: 14px; }
  .topbar { font-size: .78rem; }
  .counters { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
  .sidebar { grid-template-columns: 1fr; }
  .hero__inner { padding-bottom: 44px; }
  /* Lighter overlay on phones so the video stays the highlight; just enough shade to keep the CTA buttons legible */
  .hero__overlay { background: linear-gradient(178deg, rgba(8,26,54,.50) 0%, rgba(10,31,60,.30) 45%, rgba(10,31,60,.46) 100%); }
  .about__media .badge-float.b1 { left: 6px; bottom: 12px; }
  .about__media .badge-float.b2 { right: 6px; top: 14px; padding: 12px 16px; }
  .badge-float .num { font-size: 1.1rem; }
  .mobile-cta { display: grid; }
  .floaters { bottom: 76px; }
  body { padding-bottom: 0; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* Large phone */
@media (max-width: 640px) {
  .masonry { columns: 1; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .cta-band__actions .btn, .hero__actions .btn { width: 100%; }
  .hero__actions { width: 100%; }
  .topbar__left a:not(:first-child) { display: none; }
  .topbar__right { display: none; }
  .brand img { height: 72px; }
  .site-header.scrolled .brand img, .site-header.solid .brand img { height: 64px; }
  .brand .brand__tag { display: none; }
}

/* Small phone */
@media (max-width: 480px) {
  :root { --gutter: 18px; }
  .hero h1 { font-size: 2rem; }
  .section-title { font-size: 1.6rem; }
  .counters { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .gallery-filters button { font-size: .82rem; padding: 8px 15px; }
  .testi-card { padding: 26px 20px; }
  .why-grid { grid-template-columns: 1fr; }
}

@media (max-width: 375px) {
  .hero h1 { font-size: 1.8rem; }
  .btn { padding: 13px 20px; font-size: .92rem; }
  .process-grid { grid-template-columns: 1fr; }
}

@media (max-width: 320px) {
  :root { --gutter: 14px; }
  .hero__badge { font-size: .76rem; }
  .counters { grid-template-columns: 1fr; }
}

/* Landscape short screens for hero video */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 620px; }
  .scroll-ind { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__media video, .hero__media img { animation: none; }
}

/* Print */
@media print {
  .site-header, .floaters, .mobile-cta, .loader, .scroll-ind, .hero__media, video { display: none !important; }
  body { color: #000; }
}
@media (max-width:768px){

    /* Existing mobile CSS */
    

    /* Hero Mobile Video */
    .hero{
        height:55vh;
        min-height:400px;
    }

    .hero__media video{
        width:100%;
        height:120%;
        object-fit:contain;
        object-position:center;
        background:#fff;
    }
    
}