/* ==========================================================
   SonSec Responsive
   Sprint 2
========================================================== */

body.menu-open{
    overflow:hidden;
}

/* ===========================
   Tablet
=========================== */

@media (max-width:1024px){

    html,
    body{
        max-width:100%;
        overflow-x:hidden;
        overflow-x:clip;
    }

    .primary-navigation.desktop-navigation{
        display:none;
    }

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        margin-left:auto;
        position:relative;
        z-index:2101;
    }

    .site-header .header-container{
        flex-direction:row;
        flex-wrap:nowrap;
        min-height:80px;
        gap:20px;
        padding:8px 0;
    }

    .site-branding{
        min-width:0;
    }

    .site-logo{
        width:60px;
        height:60px;
    }

    .company-name{
        font-size:1.05rem;
    }

}

/* ===========================
   Mobile
=========================== */

@media (max-width:768px){

    .site-header .header-container{
        min-height:74px;
        gap:16px;
    }

    .site-branding{
        flex:1 1 auto;
        min-width:0;
        max-width:calc(100% - 64px);
        gap:10px;
    }

    .branding-text{
        display:flex;
        min-width:0;
        overflow:hidden;
    }

    .company-name{
        display:block;
        min-width:0;
        max-width:100%;
        overflow:hidden;
        font-size:.98rem;
        line-height:1.15;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .company-name__desktop{
        display:none;
    }

    .company-name__mobile{
        display:inline;
    }

    .company-tagline{
        max-width:100%;
        overflow:hidden;
        margin-top:2px;
        font-size:.68rem;
        line-height:1.2;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .site-logo{
        width:56px;
        height:56px;
    }

}

/* ===========================
   Responsive Hero
=========================== */

@media (max-width:768px){

    .hero{
        min-height:auto;
        padding:56px 0 48px;
    }

    .hero .hero-grid{
        display:flex;
        flex-direction:column;
        gap:32px;
        min-width:0;
        max-width:100%;
    }

    .hero-content{
        width:100%;
        min-width:0;
        max-width:100%;
        text-align:center;
    }

    .hero-kicker{
        justify-content:center;
        gap:10px;
        margin-bottom:20px;
        font-size:.8rem;
        letter-spacing:1.5px;
    }

    .hero-kicker::before{
        width:40px;
        flex:0 0 40px;
    }

    .hero h1{
        max-width:100%;
        margin:0 0 20px;
        font-size:clamp(1.75rem,8.5vw,2.6rem);
        line-height:1.1;
        overflow-wrap:break-word;
    }

    .hero-text{
        width:100%;
        max-width:36rem;
        margin:0 auto 28px;
        font-size:1rem;
        line-height:1.7;
        overflow-wrap:break-word;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
        gap:12px;
        width:100%;
        margin:0 0 28px;
    }

    .hero-buttons .button{
        width:100%;
        max-width:360px;
        min-width:0;
        margin:0;
        padding:15px 24px;
        white-space:normal;
    }

    .hero-contact{
        flex-direction:column;
        align-items:center;
        gap:8px;
        width:100%;
        padding-top:24px;
    }

    .hero-contact a{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        max-width:100%;
        min-height:44px;
        overflow-wrap:anywhere;
    }

    .hero-image{
        order:-1;
        width:100%;
        min-width:0;
        max-width:100%;
        margin-top:0;
    }

    .hero-image picture{
        width:100%;
        max-width:420px;
        margin:0 auto;
    }

    .hero-image img{
        width:100%;
        max-width:420px;
        margin:0 auto;
    }

}

/* ===========================
   Small Phones
=========================== */

@media (max-width:480px){

    .site-header .header-container{
        min-height:68px;
        gap:10px;
    }

    .site-logo{
        width:48px;
        height:48px;
    }

    .mobile-navigation{
        width:280px;
        padding:100px 24px 32px;
    }

    .mobile-menu a{
        font-size:1rem;
    }

    .hero{
        padding:40px 0;
    }

    .hero .hero-grid{
        gap:24px;
    }

    .hero-kicker{
        gap:8px;
        font-size:.72rem;
        letter-spacing:1px;
    }

    .hero-kicker::before{
        width:24px;
        flex-basis:24px;
    }

    .hero h1{
        font-size:clamp(1.7rem,8.5vw,2.1rem);
    }

    .hero-text{
        line-height:1.65;
    }

    .hero-image img{
        max-width:340px;
    }

    .hero-image picture{
        max-width:340px;
    }

}

/* ===========================
   Reduced Motion
=========================== */

@media (prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }

}

/* ===========================
   Homepage polish - RC7.18.57
=========================== */

@media (max-width:768px){

    .hero{
        padding:34px 0 30px;
    }

    .hero .hero-grid{
        gap:24px;
    }

    .hero h1{
        margin-bottom:18px;
        font-size:2.2rem;
    }

    .hero-text{
        max-width:35rem;
        margin:0 auto;
        line-height:1.62;
    }

    .hero-buttons{
        gap:10px;
        margin:24px 0 22px;
    }

    .hero-buttons .button{
        min-height:48px;
        max-width:340px;
        padding:13px 22px;
    }

    .hero-contact{
        flex-direction:row;
        justify-content:center;
        gap:8px 18px;
        padding-top:18px;
    }

    .hero-contact a{
        min-height:44px;
        font-size:.94rem;
    }

    .trust-grid{
        grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
    }

}

@media (max-width:480px){

    .hero{
        padding:30px 0 28px;
    }

    .hero h1{
        font-size:2rem;
    }

    .hero-image picture,
    .hero-image img{
        max-width:330px;
    }

}

/* ===========================
   Homepage contact actions - RC7.18.58
=========================== */

@media (max-width:768px){

    .hero-contact{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        align-items:stretch;
        width:100%;
        max-width:560px;
        gap:8px;
        padding-top:16px;
    }

    .hero-contact__action{
        flex-direction:column;
        justify-content:center;
        min-height:86px;
        padding:11px 8px;
        gap:8px;
        text-align:center;
    }

    .hero-contact__icon{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .hero-contact__content{
        gap:3px;
        text-align:center;
    }

    .hero-contact__label{
        font-size:.9rem;
    }

    .hero-contact__meta{
        font-size:.72rem;
        line-height:1.18;
    }

}

@media (max-width:430px){

    .hero-contact{
        grid-template-columns:1fr;
        max-width:330px;
        gap:7px;
    }

    .hero-contact__action{
        flex-direction:row;
        justify-content:flex-start;
        min-height:58px;
        padding:10px 12px;
        text-align:left;
    }

    .hero-contact__content{
        text-align:left;
    }

}

/* ===========================
   Google actions and fixed controls - RC7.18.60
=========================== */

@media (max-width:768px){

    :root{
        --sonsec-mobile-contact-bar-height:88px;
        --sonsec-mobile-fixed-control-gap:20px;
        --sonsec-mobile-fixed-control-bottom:calc(
            var(--sonsec-mobile-contact-bar-height) + var(--sonsec-mobile-fixed-control-gap) + env(safe-area-inset-bottom, 0px)
        );
    }

    .google-actions{
        padding:28px 0 32px;
    }

    .google-actions__inner{
        padding:18px;
        gap:18px;
    }

    .google-actions__copy h2{
        font-size:1.45rem;
    }

    .google-actions__list{
        grid-template-columns:1fr;
        gap:10px;
    }

    .google-action{
        min-height:72px;
        padding:12px;
    }

    body{
        padding-bottom:calc(var(--sonsec-mobile-contact-bar-height) + 24px + env(safe-area-inset-bottom, 0px));
    }

    html body button.cookieadmin_re_consent{
        top:auto !important;
        right:auto !important;
        bottom:var(--sonsec-mobile-fixed-control-bottom) !important;
        left:16px !important;
        margin:0 !important;
        transform:none !important;
    }

    html body .cookieadmin_law_container{
        top:auto !important;
        right:12px !important;
        bottom:var(--sonsec-mobile-fixed-control-bottom) !important;
        left:12px !important;
        width:auto !important;
        max-width:calc(100vw - 24px) !important;
        max-height:calc(100vh - var(--sonsec-mobile-fixed-control-bottom) - 24px);
        overflow:auto;
    }

}

@media (max-width:390px){

    .company-name{
        font-size:.92rem;
    }

    .company-tagline{
        display:none;
    }

}

@media (max-width:430px){

    .google-actions__inner{
        padding:16px;
    }

    .google-action__icon{
        width:36px;
        height:36px;
        flex-basis:36px;
    }

    .google-action__label{
        font-size:.9rem;
    }

    .google-action__meta{
        font-size:.78rem;
    }

}

@media (max-width:768px) and (orientation:landscape){

    :root{
        --sonsec-mobile-contact-bar-height:76px;
        --sonsec-mobile-fixed-control-gap:16px;
    }

}