/* ==================================================
   MOBILE.CSS
================================================== */

@media(max-width:900px){


    /* ==================================================
       HEADER
    ================================================== */

    .header{

        height:80px;
    }

    .header-inner{

        padding:0 20px;
    }

    .logo{

        display:flex;

        align-items:center;

        flex-shrink:0;
    }

    .logo img{

        width:154px;

        height:auto;

        display:block;
    }

    .desktop-menu{

        display:none;
    }

    .mobile-menu-btn{

        display:flex;

        align-items:center;
        justify-content:center;

        width:44px;
        height:44px;

        padding:0;

        border:0;

        background:transparent;

        color:#663366;

        font-size:32px;

        line-height:1;

        cursor:pointer;

        flex-shrink:0;
    }


    /* ==================================================
       HERO
    ================================================== */

    .lav-hero{

        height:610px;

        margin:0;

        overflow:hidden;
    }

    .lav-hero-content{

        align-items:flex-start;
    }

    .lav-hero-text{

        width:100%;

        padding-top:5px;

        position:relative;

        z-index:5;

        transform:
            translateX(-25px);
    }

    .lav-hero-title{

        display:block;

        width:auto;

        margin:0 0 20px;

        padding:0;

        font-family:Arial, Helvetica, sans-serif;

        font-size:38px;

        line-height:1.1;

        font-weight:700;

        color:var(--purple);

        letter-spacing:normal;

        text-transform:none;
    }

    .lav-hero p{

        font-size:16px;

        line-height:1.45;

        max-width:330px;
    }

    .lav-hero-bg{

        background-position:
            right center;

        background-size:
            auto 100%;

        background-repeat:no-repeat;

        background-color:
            #F3F2E0;

        opacity:.5;

        z-index:1;
    }

    .lav-hero-waves{

        left:0;

        bottom:0;

        width:100%;

        height:220px;

        z-index:2;

        pointer-events:none;
    }

    .lav-hero-girl{

        position:absolute;

        right:150px;

        bottom:20px;

        height:378px;

        width:auto;

        opacity:.9;

        z-index:4;

        display:block;
    }


    /* ==================================================
       HERO BUTTONS
    ================================================== */

    .hero-buttons{

        margin-top:15px;

        display:flex;

        flex-direction:column;

        flex-wrap:nowrap;

        align-items:flex-start;

        gap:15px;

        transform:
            translateY(-5px);

        position:relative;

        z-index:6;
    }

    .lav-btn{

        width:auto;

        min-width:240px;

        height:54px;

        padding:
            0 22px;

        gap:9px;

        border-radius:11px;

        font-size:15px;
    }


    /* ==================================================
       ADVANTAGES
    ================================================== */

    .advantages-section{

        padding:
            0 15px 40px;

        margin-top:-20px;

        position:relative;

        z-index:6;
    }

    .advantages-grid{

        width:100%;

        max-width:none;

        grid-template-columns:1fr;

        border-radius:18px;
    }

    .adv-item{

        min-height:95px;

        padding:15px;
    }

    .adv-item img{

        width:36px;

        height:36px;

        margin-bottom:10px;
    }

    .adv-item span{

        font-size:15px;

        line-height:1.3;
    }

    .adv-item:not(:last-child)::after{

        left:20px;

        right:20px;

        top:auto;

        bottom:0;

        width:auto;

        height:1px;

        background:
            rgba(229,223,160,.65);
    }


    /* ==================================================
       DIRECTIONS
    ================================================== */

    .directions-section{

        padding:
            22px 0 52px;
    }

    .directions-heading{

        transform:
            translateY(-20px);

        margin-bottom:15px;
    }

    .directions-title{

        font-size:30px;

        margin-bottom:7px;
    }

    .directions-decor{

        height:20px;

        gap:7px;
    }

    .directions-decor-wave{

        width:34px;
    }

    .directions-decor-note{

        font-size:20px;
    }

    .directions-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        column-gap:15px;

        row-gap:35px;
    }

    .direction-photo{

        width:149px;

        height:149px;

        padding:0 !important;

        background:none !important;

        border:0 !important;

        outline:0 !important;

        box-shadow:
            0 10px 27px rgba(0,0,0,.38);
    }

    .direction-photo img{

        border:0 !important;

        outline:0 !important;
    }

    .direction-card-title{

        font-size:15px;
    }


    /* ==================================================
       SERVICES
    ================================================== */

    .services-section{

        padding:
            25px 0 25px;
    }

    .services-heading{

        margin-bottom:21px;
    }

    .services-title{

        font-size:30px;
    }

    .services-carousel-wrap{

        width:100%;

        padding:
            14px 48px 15px;
    }

    .services-carousel{

        width:100%;

        overflow:hidden;

        position:relative;
    }

    .services-track{

        display:flex;

        gap:10px;

        width:max-content;

        padding:
            8px 0 10px;

        transition:
            transform .55s cubic-bezier(.22,.8,.25,1);

        will-change:transform;
    }

    .service-card{

        flex:
            0 0 auto;

        width:auto;

        min-width:0;

        min-height:280px;

        padding:
            10px 20px 24px;

        text-decoration:none;

        border:
            1px solid #A9A9A9;
    }

    .service-card:hover{

        border-color:#000;
    }

    .service-icon{

        width:90px;

        height:90px;

        margin-bottom:9px;
    }

    .service-icon img{

        width:40px;

        height:40px;
    }

    .services-arrow{

        width:36px;

        height:36px;

        padding:
            0 0 2px;

        font-size:30px;
    }

    .services-arrow-prev{

        left:0;
    }

    .services-arrow-next{

        right:0;
    }

    .services-dots{

        margin-top:12px;
    }

    .services-swipe-hint{

        display:block;

        text-align:center;

        margin-top:9px;

        color:#856F82;

        font-size:12px;
    }


    /* ==================================================
       SERVICE BUTTONS
    ================================================== */

    .services-buttons-section{

        padding:
            0 0 55px;

        background:var(--cream);
    }

    .services-buttons-container{

        width:100%;

        padding:
            0 20px;
    }

    .services-buttons{

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        gap:12px;

        width:100%;
    }

    .services-action{

        width:100%;

        max-width:340px;

        height:54px;

        min-height:54px;

        padding:
            0 22px;

        gap:9px;

        border-radius:11px;

        font-size:15px;

        white-space:nowrap;
    }

    .services-action-icon{

        width:24px;

        height:24px;
    }

    .services-action-icon img{

        width:24px;

        height:24px;
    }


    /* ==================================================
       CONTENT
    ================================================== */

    .content-section{

        padding:
            0 0 45px;
    }

    .content-container{

        padding:
            0 20px;
    }

    .content-article{

        max-width:none;
    }

    .content-title{

        font-size:27px;

        line-height:1.2;

        margin-bottom:14px;
    }

    .content-text{

        font-size:15px;

        line-height:1.6;
    }


    /* ==================================================
       WHY
    ================================================== */

    .why-section{

        padding:
            28px 0 52px;
    }

    .why-container{

        width:100%;

        padding:
            0 20px;
    }

    .why-heading{

        margin-bottom:21px;
    }

    .why-title{

        font-size:30px;

        margin-bottom:7px;
    }

    .why-decor{

        height:20px;

        gap:7px;
    }

    .why-decor-wave{

        width:34px;
    }

    .why-decor-note{

        font-size:20px;
    }

    .why-panel{

        width:100%;

        display:grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        border-radius:18px;
    }

.why-item{
    min-height:280px;

    padding:
        28px 15px 30px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    position:relative;
}

    .why-item:not(:last-child)::after{

        top:30px;

        bottom:30px;

        right:0;

        width:1px;

        background:#AAA;
    }

    .why-item:nth-child(2n)::after{

        display:none;
    }

    .why-item:nth-child(odd)::before{

        content:"";

        position:absolute;

        left:14px;

        right:-100%;

        bottom:0;

        height:1px;

        background:#AAA;
    }

    .why-item:nth-last-child(-n+2)::before{

        display:none;
    }

    .why-icon{

        width:68px;

        height:68px;

        margin-bottom:13px;
    }

    .why-icon img{

        width:61px;

        height:61px;
    }

    .why-item-title{

        min-height:auto;

        margin-bottom:10px;

        font-size:16px;

        line-height:1.2;
    }

    .why-item-text{

        font-size:13px;

        line-height:1.4;
    }


    /* ==================================================
       REVIEWS
    ================================================== */

    .reviews-section{

        padding:
            28px 0 52px;
    }

    .reviews-heading{

        margin-bottom:21px;
    }

    .reviews-title{

        font-size:30px;

        margin-bottom:7px;
    }

    .reviews-decor{

        height:22px;

        gap:8px;
    }

    .reviews-decor-wave{

        width:32px;

        height:13px;
    }

    .reviews-decor-wave::before{

        border-top-width:2px;
    }

    .reviews-decor-note{

        width:18px;

        height:20px;

        font-size:20px;
    }

    .reviews-carousel-wrap{

        width:100%;

        padding:
            14px 48px 15px;
    }

    .reviews-carousel{

        width:100%;

        overflow:hidden;

        position:relative;
    }

    .reviews-track{

        display:flex;

        gap:10px;

        width:max-content;

        padding:
            10px 0 14px;

        transition:
            transform 3s cubic-bezier(.22,.8,.25,1);

        will-change:transform;
    }

    .review-card{

        flex:
            0 0 100%;

        width:100%;

        min-width:100%;

        min-height:240px;

        padding:
            15px 13px 15px;

        border-radius:17px;
    }

    .review-photo{

        width:60px;

        height:90px;

        flex:
            0 0 60px;
    }

    .review-photo img{

        width:60px;

        height:90px;
    }

    .review-top{

        gap:12px;

        min-height:90px;
    }

    .review-name{

        font-size:17px;

        line-height:1.1;

        margin-bottom:5px;
    }

    .review-role{

        font-size:12px;

        line-height:1.2;
    }

    .review-city{

        margin-top:3px;

        font-size:9px;

        line-height:1.1;

        font-style:italic;
    }

    .review-rating{

        margin:
            10px 0 10px;

        font-size:17px;

        letter-spacing:2px;
    }

    .review-text{

        font-size:12px;

        line-height:1.42;
    }

    .reviews-arrow{

        width:36px;

        height:36px;

        padding:
            0 0 2px;

        font-size:30px;
    }

    .reviews-arrow-prev{

        left:0;
    }

    .reviews-arrow-next{

        right:0;
    }

    .reviews-dots{

        margin-top:12px;
    }


    /* ==================================================
       FOOTER
    ================================================== */

    .site-footer{

        position:relative;

        overflow:visible;

        padding-top:45px;

        z-index:2;
    }


    /* ==================================================
       FOOTER WAVES — MOBILE
    ================================================== */

    .footer-wave-layer{

        position:absolute;

        left:0;
        right:0;

        bottom:0;

        top:auto;

        width:100%;

        /*
           Высоту волновой зоны можно
           регулировать здесь.
        */
        height:300px;

        overflow:visible;

        pointer-events:none;

        z-index:1;

        /*
           МИНИМАЛЬНЫЙ ЗАЗОР МЕЖДУ ВОЛНАМИ.
           Для мобильного оставляем 10px.
        */
        --wave-gap:10px;
    }

    .footer-wave{

        position:absolute;

        display:block;

        height:auto;

        max-width:none;

        opacity:.90;

        pointer-events:none;

        user-select:none;

        -webkit-user-drag:none;
    }


    /*
    ==================================================
       ЛЕВАЯ ВОЛНА

       .58 — доля доступной ширины.
       Это главный параметр для экспериментов.
    ==================================================
    */

    .footer-wave-left{

        left:0;

        bottom:0;

        width:
            min(
                100vw,
                calc(
                    (100vw - var(--wave-gap))
                    * .58
                )
            );

        height:auto;
    }


    /*
    ==================================================
       ПРАВАЯ ВОЛНА

       .53 — доля доступной ширины.
    ==================================================
    */

    .footer-wave-right{

        right:0;

        bottom:0;

        width:
            min(
                100vw,
                calc(
                    (100vw - var(--wave-gap))
                    * .53
                )
            );

        height:auto;
    }


    /* ==================================================
       FOOTER CONTENT
    ================================================== */

    .footer-container{

        position:relative;

        z-index:3;

        padding:
            0 20px;
    }


    /*
       ВСЁ ВЫШЕ ПОЛОСЫ ПОДНИМАЕМ НА 55px.
    */

    .footer-main{

        grid-template-columns:1fr;

        gap:28px;

        padding:
            20px 0 28px;

        transform:
            translateY(-55px);
    }


    /* ==================================================
       BRAND
    ================================================== */

    .footer-brand{

        text-align:center;

        display:flex;

        flex-direction:column;

        align-items:center;
    }

    .footer-logo{

        justify-content:center;
    }

    .footer-logo img{

        width:127px;

        max-width:80vw;
    }

    .footer-tagline{

        margin-top:8px;

        font-size:12px;
    }


    /* ==================================================
       COLUMNS
    ================================================== */

    .footer-column{

        text-align:center;
    }

    .footer-column-title{

        margin:
            0 0 11px;

        font-size:15px;
    }

    .footer-links{

        align-items:center;

        gap:7px;
    }

    .footer-links a{

        font-size:13px;
    }


    /* ==================================================
       CONTACTS
    ================================================== */

    .footer-contacts{

        display:flex;

        flex-direction:column;

        align-items:center;
    }

    .footer-contact{

        justify-content:center;

        margin-bottom:9px;

        font-size:13px;
    }

    .footer-contact-message{

        justify-content:center;

        margin-top:3px;

        font-size:13px;
    }


    /* ==================================================
       FOOTER BOTTOM
       НЕ ДВИГАЕМ
    ================================================== */

    .footer-bottom{

        min-height:22px;

        position:relative;

        z-index:5;

        padding:
            10px 0 12px;

        flex-direction:column;

        justify-content:center;

        gap:7px;

        text-align:center;

        font-size:10px;
    }

    .footer-copyright{

        white-space:normal;
    }

    .footer-policy{

        white-space:normal;
    }

}


/* ==================================================
   SMALL PHONES
================================================== */

@media(max-width:420px){

    .site-footer{

        padding-top:37px;
    }


    /* ==================================================
       WAVES
    ================================================== */

    .footer-wave-layer{

        bottom:0;

        height:265px;

        /*
           Можно менять 10 → 5 → 0,
           если волны должны сблизиться ещё сильнее.
        */
        --wave-gap:10px;
    }

    .footer-wave-left{

        left:0;

        bottom:0;

        width:
            min(
                100vw,
                calc(
                    (100vw - var(--wave-gap))
                    * .58
                )
            );

        max-width:350px;

        height:auto;
    }

    .footer-wave-right{

        right:0;

        bottom:0;

        width:
            min(
                100vw,
                calc(
                    (100vw - var(--wave-gap))
                    * .53
                )
            );

        max-width:320px;

        height:auto;
    }


    /* ==================================================
       CONTENT ABOVE LINE
    ================================================== */

    .footer-container{

        padding:
            0 15px;
    }

    .footer-main{

        gap:24px;

        padding:
            16px 0 26px;

        transform:
            translateY(-55px);
    }


    /* ==================================================
       LOGO
    ================================================== */

    .footer-logo img{

        width:113px;
    }

    .footer-tagline{

        font-size:11px;
    }


    /* ==================================================
       COLUMNS
    ================================================== */

    .footer-column-title{

        font-size:14px;
    }

    .footer-links a{

        font-size:12px;
    }


    /* ==================================================
       CONTACTS
    ================================================== */

    .footer-contact{

        font-size:12px;
    }

    .footer-contact-message{

        font-size:12px;
    }


    /* ==================================================
       BOTTOM
    ================================================== */

    .footer-bottom{

        min-height:18px;

        padding:
            8px 0 10px;

        font-size:9px;
    }

}


/* ==================================================
   MOBILE MENU
================================================== */

@media(max-width:900px){

    .mobile-menu-panel{

        position:fixed;

        top:0;

        right:-320px;

        width:280px;

        height:100vh;

        padding:
            80px 35px 30px;

        display:flex;

        flex-direction:column;

        gap:25px;

        background:#663366;

        box-shadow:
            -8px 0 25px rgba(0,0,0,.2);

        z-index:100;

        transition:
            right .35s ease;
    }

    .mobile-menu-panel.active{

        right:0;
    }

    .mobile-menu-panel a{

        display:block;

        color:#E5DFA0;

        text-decoration:none;

        font-size:20px;

        line-height:1.2;

        transition:
            color .2s ease,
            transform .2s ease;
    }

    .mobile-menu-panel a:hover{

        color:#fff;

        transform:
            translateX(4px);
    }

    .mobile-menu-close{

        display:flex;

        align-items:center;

        justify-content:center;

        position:absolute;

        top:18px;

        right:20px;

        width:44px;

        height:44px;

        padding:0;

        border:0;

        background:transparent;

        color:#E5DFA0;

        font-size:38px;

        line-height:1;

        cursor:pointer;
    }

    .mobile-menu-panel::before{

        content:"";

        position:fixed;

        top:0;

        right:0;

        width:100vw;

        height:100vh;

        background:
            rgba(0,0,0,.25);

        z-index:-1;

        opacity:0;

        pointer-events:none;

        transition:
            opacity .35s ease;
    }

    .mobile-menu-panel.active::before{

        opacity:1;
    }

}

/* WHY — MOBILE CARD TITLES: sizing is handled by why-title-fit.js */

/* ==================================================
   CTA BUTTONS — MOBILE
   Полностью повторяет services-buttons
   ================================================== */

@media (max-width:900px){

    .lav-cta-buttons .cta-buttons{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:12px;
        width:100%;
    }

    .lav-cta-buttons .lav-btn{
        width:100%;
        max-width:340px;
        height:54px;
        min-height:54px;

        padding:0 22px;

        display:flex;
        align-items:center;
        justify-content:center;

        gap:9px;

        border-radius:11px;

        font-size:15px;
        white-space:nowrap;
    }

    .lav-cta-buttons .btn-icon{
        width:24px;
        height:24px;

        display:flex;
        align-items:center;
        justify-content:center;

        flex-shrink:0;
    }

    .lav-cta-buttons .btn-icon img{
        width:24px;
        height:24px;

        display:block;
        object-fit:contain;
    }

}
/* ==================================================
   ARTICLE IMAGES — MOBILE
================================================== */

@media(max-width:700px){
    .article-image,
    .article-image-right,
    .article-image-left,
    .article-image-center,
    .article-image-full{
        float:none !important;
        width:100% !important;
        max-width:100%;
        margin:0 0 25px;
    }
}

/* WHY — restored title pulse */
@keyframes why-title-pulse{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.025); }
}