/* =========================================================
   KVS Premier Group — Responsive Styles
========================================================= */

/* ----- Tablets (<=1024px) ----- */
@media(max-width:1024px){
    .nav-menu{
        gap:22px;
    }

    .nav-menu > li > a{
        font-size:14px;
    }

    .btn-quote{
        padding:11px 18px;
        font-size:13px;
    }

    .footer-container{
        grid-template-columns:1fr 1fr;
    }
}

/* ----- Small tablets / large mobile (<=880px) ----- */
@media(max-width:880px){

    :root{
        --header-height:72px;
    }

    .header-container{
        padding:0 16px;
    }

    .site-logo img{
        height:44px;
    }

    .mobile-toggle{
        display:flex;
    }

    /* Slide-in nav */
    .main-nav{
        position:fixed;
        top:calc(var(--header-height) + 4px);
        left:0;
        width:100%;
        height:calc(100vh - var(--header-height) - 4px);
        background:var(--clr-white);
        flex-direction:column;
        justify-content:flex-start;
        transform:translateX(-100%);
        opacity:0;
        visibility:hidden;
        transition:all 0.3s ease;
        overflow-y:auto;
        box-shadow:4px 0 20px rgba(0,0,0,0.1);
    }

    .main-nav.active{
        transform:translateX(0);
        opacity:1;
        visibility:visible;
    }

    .nav-menu{
        flex-direction:column;
        align-items:stretch;
        gap:0;
        width:100%;
        padding:10px 0 30px;
    }

    .nav-menu > li{
        width:100%;
        border-bottom:1px solid var(--clr-border);
    }

    .nav-menu > li > a{
        padding:16px 24px;
        justify-content:space-between;
        width:100%;
    }

    .nav-menu > li > a::after{
        display:none;
    }

    .arrow{
        margin-top:0;
    }

    /* Dropdown becomes accordion-style, static */
    .dropdown-menu{
        position:static;
        opacity:1;
        visibility:visible;
        transform:none;
        box-shadow:none;
        border-top:none;
        border-radius:0;
        max-height:0;
        overflow:hidden;
        background:#f9f9f9;
        transition:max-height 0.3s ease;
    }

    .has-dropdown.open .dropdown-menu{
        max-height:400px;
    }

    .has-dropdown.open .arrow{
        transform:rotate(-135deg);
    }

    .dropdown-menu li a{
        padding:13px 36px;
    }

    .header-actions{
        gap:12px;
    }

    .btn-quote{
        padding:9px 14px;
        font-size:12px;
    }

    .search-toggle{
        width:34px;
        height:34px;
    }

    .footer-container{
        grid-template-columns:1fr;
        gap:34px;
        padding:40px 20px;
    }
}

/* ----- Mobile phones (<=520px) ----- */
@media(max-width:520px){

    :root{
        --header-height:64px;
    }

    .site-logo img{
        height:38px;
    }

    .btn-quote{
        display:none;
    }

    .header-actions{
        gap:10px;
    }

    .search-form{
        padding:12px 16px;
    }
}

/* =========================================================
   Shared Page Components — Responsive
========================================================= */
@media(max-width:960px){
    .split-block{
        grid-template-columns:1fr;
    }

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

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

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

    .contact-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:620px){
    .card-grid,
    .team-grid,
    .blog-grid{
        grid-template-columns:1fr;
    }

    .form-row{
        grid-template-columns:1fr;
    }

    .page-banner,
    .contact-hero,
    .blog-hero{
        padding:40px 20px;
    }

    .blog-hero-inner img{
        display:none;
    }
}

/* =========================================================
   Contact Page v2 — Responsive
========================================================= */
@media(max-width:960px){
    .contact-main-grid{
        grid-template-columns:1fr;
    }

    .faq-grid{
        grid-template-columns:1fr;
        gap:36px;
    }

    .contact-hero-v2::before{
        background-size:60% auto;
        opacity:0.3;
    }
}

@media(max-width:700px){
    .contact-hero-v2-inner{
        flex-direction:column;
        align-items:flex-start;
    }

    .contact-hero-badge{
        display:none;
    }

    .contact-icon-row{
        gap:10px;
        padding:10px;
    }

    .contact-icon-box{
        width:48px;
        height:48px;
    }
}

@media(max-width:560px){
    .form-row-2{
        grid-template-columns:1fr;
    }

    .office-box,
    .form-box{
        padding:26px;
    }

    .contact-map{
        height:300px;
    }
}