/* ==================================================
   MAIN.CSS
================================================== */

:root{
    --purple:#663366;
    --purple2:#81416D;
    --button:#6c4182;
    --yellow:#E5DFA0;
    --cream:#F3F2E0;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:var(--cream);
    color:var(--purple);
}

.container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 30px;
}


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

.header{
    height:95px;
    position:relative;
    z-index:20;
    background:var(--cream);
}

.header-inner{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
    text-decoration:none;
}

.logo img{
    width:187px;
    height:auto;
    display:block;
}

.desktop-menu{
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:25px;
}

.desktop-menu a{
    display:inline-block;
    color:var(--purple);
    text-decoration:none;
    font-size:16px;
    line-height:1.2;
    white-space:nowrap;

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

.desktop-menu a:hover{
    color:var(--purple2);
    transform:translateY(-1px);
}

.mobile-menu-btn{
    display:none;
}


.mobile-menu-panel{
    display:none;
}


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

.lav-hero{
    height:600px;
    position:relative;
    overflow:hidden;
    margin:0;
    background:var(--cream);
}

.lav-hero-bg{
    position:absolute;
    inset:0;

    background-image:
        url('/assets/images/hero/background.webp');

    background-repeat:no-repeat;
    background-position:right -35px;
    background-size:auto 100%;
    background-color:var(--cream);

    opacity:.5;

    z-index:1;
    pointer-events:none;
}

.lav-hero-waves{
    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:300px;

    display:block;

    z-index:2;
    pointer-events:none;
}

.lav-hero-content{
    height:100%;

    display:flex;
    align-items:center;

    position:relative;
    z-index:5;
}

.lav-hero-text{
    width:480px;

    position:relative;
    z-index:5;
}

.lav-hero-title{
    display:block;
    width:auto;
    margin:0 0 25px;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:58px;
    line-height:1.08;
    font-weight:700;
    color:var(--purple);
    letter-spacing:normal;
    text-transform:none;
}

.lav-hero-title span{
    color:var(--purple2);
}

.lav-hero p{
    font-size:18px;
    line-height:1.5;
    max-width:450px;
    margin:0;
}


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

.lav-hero-girl{
    position:absolute;

    left:50%;
    transform:translateX(80px);

    bottom:6px;

    height:567px;
    width:auto;

    z-index:4;
    display:block;

    pointer-events:none;
}


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

.hero-buttons{
    margin-top:35px;

    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;

    align-items:center;

    gap:15px;
}

.lav-btn{
    height:54px;

    padding:0 28px;

    display:inline-flex;

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

    gap:9px;

    white-space:nowrap;

    border-radius:11px;

    font-size:16px;
    line-height:1.2;

    font-weight:700;

    text-decoration:none;

    border:1px solid transparent;

    box-shadow:
        0 5px 12px rgba(0,0,0,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease,
        border-color .25s ease;
}

.lav-btn-primary{
    color:#fff;

    border-color:#5A2D5A;

    background:
        linear-gradient(
            120deg,
            #6c4182,
            #b06dcc,
            #6c4182
        );

    background-size:200% 100%;

    animation:
        lav-shine 2.5s linear infinite;
}

.lav-btn-light{
    color:var(--purple);

    background:#fff;

    border-color:#B7AEB7;

    animation:none;
}

.lav-btn:hover{
    transform:translateY(-3px);

    box-shadow:
        0 8px 16px rgba(0,0,0,.24);

    filter:brightness(1.04);
}

.lav-btn-light:hover{
    border-color:var(--purple);

    filter:none;
}

.btn-icon{
    width:24px;
    height:24px;

    display:flex;

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

    flex-shrink:0;
}

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

    display:block;

    object-fit:contain;
}

@keyframes lav-shine{

    0%{
        background-position:0 center;
    }

    100%{
        background-position:200% center;
    }
}


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

.advantages-section{
    padding:0 0 70px;

    margin-top:-7px;

    position:relative;

    z-index:6;
}

.advantages-grid{
    width:calc(100% - 60px);

    max-width:1200px;

    margin:0 auto;

    background:var(--purple);

    border-radius:22px;

    display:grid;

    grid-template-columns:
        repeat(6,1fr);

    overflow:hidden;
}

.adv-item{
    min-height:115px;

    display:flex;

    flex-direction:column;

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

    color:var(--yellow);

    text-align:center;

    position:relative;

    padding:15px;
}

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

    position:absolute;

    right:0;

    top:18px;
    bottom:18px;

    width:2px;

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

.adv-item img{
    width:42px;
    height:42px;

    object-fit:contain;

    margin-bottom:12px;
}

.adv-item span{
    font-size:15px;

    line-height:1.3;
}


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

.directions-section{
    padding:35px 0 70px;

    background:var(--cream);
}

.directions-heading{
    text-align:center;

    transform:
        translateY(-20px);

    margin-bottom:15px;
}

.directions-title{
    margin:0 0 7px;

    color:var(--purple);

    font-size:36px;

    line-height:1.15;

    font-weight:700;
}

.directions-decor{
    height:22px;

    display:flex;

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

    gap:9px;
}

.directions-decor-wave{
    display:block;

    width:42px;
    height:10px;

    border-top:
        2px solid #B06DCC;

    border-radius:50%;
}

.directions-decor-wave:first-child{
    transform:
        rotate(-7deg)
        translateY(2px);
}

.directions-decor-wave:last-child{
    transform:
        rotate(7deg)
        translateY(2px);
}

.directions-decor-note{
    display:flex;

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

    width:18px;
    height:18px;

    color:var(--purple);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:22px;

    line-height:1;

    transform:
        translateY(-1px);
}

.directions-grid{
    display:grid;

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

    gap:20px;

    align-items:start;
}

.direction-card{
    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    color:var(--purple);

    text-decoration:none;
}

.direction-photo{
    width:154px;
    height:154px;

    border-radius:50%;

    padding:0 !important;

    margin-bottom:18px;

    background:none !important;

    border:0 !important;

    outline:0 !important;

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

    position:relative;

    display:flex;

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

    overflow:visible;

    transition:
        transform .28s cubic-bezier(.22,.8,.25,1),
        box-shadow .28s ease;
}

.direction-photo img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    border-radius:50%;

    border:0 !important;

    outline:0 !important;
}

@media(hover:hover) and (pointer:fine){

    .direction-card:hover .direction-photo{

        transform:scale(1.10);

        box-shadow:
            0 16px 38px rgba(0,0,0,.45);
    }

    .direction-card:hover
    .direction-card-title{

        text-decoration:underline;
    }
}

.direction-card-title{
    color:var(--purple);

    font-size:16px;

    line-height:1.25;

    font-weight:600;

    text-decoration:none;
}


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

.services-section{
    padding:40px 0 25px;

    background:var(--cream);
}

.services-heading{
    text-align:center;

    margin-bottom:24px;
}

.services-title{
    margin:0 0 7px;

    color:var(--purple);

    font-size:36px;

    line-height:1.15;

    font-weight:700;
}

.services-decor{
    height:22px;

    display:flex;

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

    gap:9px;
}

.services-decor-wave{
    display:block;

    width:42px;
    height:10px;

    border-top:
        2px solid #B06DCC;

    border-radius:50%;
}

.services-decor-wave:first-child{
    transform:
        rotate(-7deg)
        translateY(2px);
}

.services-decor-wave:last-child{
    transform:
        rotate(7deg)
        translateY(2px);
}

.services-decor-note{
    display:flex;

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

    width:18px;
    height:18px;

    color:var(--purple);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:22px;

    line-height:1;

    transform:
        translateY(-1px);
}


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

.services-carousel-wrap{
    position:relative;

    width:100%;

    padding:
        14px 57px 15px;
}

.services-carousel{
    width:100%;

    overflow:hidden;

    position:relative;
}

.services-track{
    display:flex;

    gap:14px;

    width:max-content;

    padding:
        8px 5px 12px;

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

    will-change:transform;
}

.service-card{
    flex:
        0 0 225px;

    width:225px;

    min-width:225px;

    min-height:265px;

    padding:
        11px 18px 24px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    background:#E8E0B7;

    border:
        1px solid #A9A9A9;

    border-radius:18px;

    color:var(--purple);

    text-decoration:none;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

@media(hover:hover) and (pointer:fine){

    .service-card:hover{

        transform:
            translateY(-5px);

        box-shadow:
            0 10px 24px rgba(0,0,0,.18);

        border-color:#000;
    }
}

.service-icon{
    width:96px;
    height:96px;

    display:flex;

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

    margin-bottom:10px;
}

.service-icon img{
    width:46px;
    height:46px;

    object-fit:contain;

    display:block;
}

.service-card-title{
    min-height:48px;

    margin:0 0 13px;

    color:var(--purple);

    font-size:18px;

    line-height:1.18;

    font-weight:700;
}

.service-card-text{
    margin:0;

    color:#5F5262;

    font-size:14px;

    line-height:1.45;
}


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

.services-arrow{
    position:absolute;

    top:50%;

    transform:
        translateY(-50%);

    width:40px;
    height:40px;

    padding:
        0 0 6px;

    border:0;

    border-radius:50%;

    background:var(--purple);

    color:var(--yellow);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:34px;

    line-height:34px;

    display:flex;

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

    cursor:pointer;

    z-index:10;

    box-shadow:
        0 4px 12px rgba(0,0,0,.20);

    transition:
        transform .2s ease,
        filter .2s ease,
        opacity .2s ease;
}

.services-arrow:hover{

    transform:
        translateY(-50%) scale(1.08);

    filter:
        brightness(1.08);
}

.services-arrow:disabled{

    opacity:.35;

    cursor:default;
}

.services-arrow-prev{
    left:4px;
}

.services-arrow-next{
    right:4px;
}


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

.services-dots{
    display:flex;

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

    gap:8px;

    margin-top:12px;
}

.services-dot{
    width:8px;
    height:8px;

    padding:0;

    border:0;

    border-radius:50%;

    background:#C9B8C8;

    cursor:pointer;

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

.services-dot.active{
    background:var(--purple);

    transform:
        scale(1.25);
}

.services-swipe-hint{
    display:none;

    text-align:center;

    margin-top:9px;

    color:#856F82;

    font-size:12px;
}


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

.services-buttons-section{
    padding:
        0 0 80px;

    background:var(--cream);
}

.services-buttons{
    display:flex;

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

    gap:18px;

    flex-wrap:wrap;
}

.services-action{
    height:54px;

    padding:0 28px;

    display:inline-flex;

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

    gap:9px;

    white-space:nowrap;

    border-radius:11px;

    font-size:16px;

    line-height:1.2;

    font-weight:700;

    text-decoration:none;

    border:1px solid transparent;

    box-shadow:
        0 5px 12px rgba(0,0,0,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease,
        border-color .25s ease;
}

.services-action-light{
    color:var(--purple);

    background:#fff;

    border-color:#B7AEB7;
}

.services-action-light:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 16px rgba(0,0,0,.24);

    border-color:
        var(--purple);

    filter:none;
}

.services-action-primary{

    color:#fff;

    border-color:#5A2D5A;

    background:
        linear-gradient(
            120deg,
            #6c4182,
            #b06dcc,
            #6c4182
        );

    background-size:200% 100%;

    animation:
        services-button-shine 2.5s linear infinite;
}

.services-action-primary:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 16px rgba(0,0,0,.24);

    filter:brightness(1.04);
}

.services-action-icon{

    width:24px;
    height:24px;

    display:flex;

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

    flex-shrink:0;
}

.services-action-icon img{

    width:24px;
    height:24px;

    display:block;

    object-fit:contain;
}

@keyframes services-button-shine{

    0%{
        background-position:0 center;
    }

    100%{
        background-position:200% center;
    }
}


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

.content-section{

    padding:
        0 0 60px;

    background:var(--cream);
}

.content-article{

    width:100%;

    max-width:none;

    margin:0 auto;

    text-align:left;
}

.content-title,
.content-article h1.content-title,
.content-article h2.content-title,
.content-article h3.content-title,
.content-article h4.content-title{

    margin:0 0 16px;

    color:var(--purple);

    font-size:32px;

    line-height:1.2;

    font-weight:700;
}

.content-text{

    margin:0;

    color:#5F5262;

    font-size:17px;

    line-height:1.65;
}


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

.why-section{

    padding:
        45px 0 70px;

    background:var(--cream);
}

.why-heading{

    text-align:center;

    margin-bottom:24px;
}

.why-title{

    margin:0 0 7px;

    color:var(--purple);

    font-size:36px;

    line-height:1.15;

    font-weight:700;
}

.why-decor{

    height:22px;

    display:flex;

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

    gap:9px;
}

.why-decor-wave{

    display:block;

    width:42px;

    height:10px;

    border-top:
        2px solid #B06DCC;

    border-radius:50%;
}

.why-decor-wave:first-child{

    transform:
        rotate(-7deg)
        translateY(2px);
}

.why-decor-wave:last-child{

    transform:
        rotate(7deg)
        translateY(2px);
}

.why-decor-note{

    display:flex;

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

    width:18px;
    height:18px;

    color:var(--purple);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:22px;

    line-height:1;

    transform:
        translateY(-1px);
}

.why-panel{

    width:100%;

    display:grid;

    grid-template-columns:
        repeat(6,1fr);

    background:#E8E0B7;

    border:
        1px solid #A9A9A9;

    border-radius:22px;

    overflow:hidden;

    box-shadow:
        0 6px 18px rgba(0,0,0,.08);
}

.why-item{

    min-height:280px;

    padding:
        28px 20px 30px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    position:relative;
}

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

    content:"";

    position:absolute;

    top:30px;
    bottom:30px;

    right:0;

    width:1px;

    background:#AAA;

    opacity:.85;
}

.why-icon{

    width:76px;
    height:76px;

    display:flex;

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

    margin-bottom:16px;
}

.why-icon img{

    width:68px;
    height:68px;

    object-fit:contain;

    display:block;
}

.why-item-title{

    margin:0 0 13px;

    min-height:43px;

    color:var(--purple);

    font-size:18px;

    line-height:1.18;

    font-weight:700;
}

.why-item-text{

    margin:0;

    color:#625766;

    font-size:14px;

    line-height:1.45;
}


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

.reviews-section{

    padding:
        45px 0 70px;

    background:var(--cream);
}

.reviews-heading{

    text-align:center;

    margin-bottom:24px;
}

.reviews-title{

    margin:0 0 7px;

    color:var(--purple);

    font-size:36px;

    line-height:1.15;

    font-weight:700;
}

.reviews-decor{

    height:24px;

    display:flex;

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

    gap:10px;
}

.reviews-decor-wave{

    position:relative;

    width:38px;

    height:14px;

    display:block;

    flex-shrink:0;
}

.reviews-decor-wave::before{

    content:"";

    position:absolute;

    inset:0;

    border-top:
        2px solid #B06DCC;

    border-radius:
        55% 45% 55% 45% /
        70% 60% 40% 30%;

    transform:
        rotate(8deg);
}

.reviews-decor-wave:first-child::before{

    transform:
        rotate(8deg)
        scaleX(-1);
}

.reviews-decor-wave:last-child::before{

    transform:
        rotate(8deg);
}

.reviews-decor-note{

    width:18px;
    height:22px;

    display:flex;

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

    flex-shrink:0;

    color:var(--purple);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:22px;

    line-height:1;
}

.reviews-carousel-wrap{

    position:relative;

    width:calc(100% + 20px);

    margin-left:-10px;

    padding:
        14px 17px 15px;
}

.reviews-carousel{

    width:100%;

    overflow:hidden;

    position:relative;
}

.reviews-track{

    display:flex;

    gap:18px;

    width:max-content;

    padding:
        12px 6px 16px;

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

    will-change:transform;
}

.review-card{

    flex:
        0 0 340px;

    width:340px;

    min-width:340px;

    min-height:240px;

    padding:
        19px 19px 17px;

    display:flex;

    flex-direction:column;

    background:var(--purple);

    border:
        1px solid #552A55;

    border-radius:19px;

    color:var(--yellow);

    text-decoration:none;

    position:relative;

    overflow:visible;

    transform-origin:
        center bottom;

    transition:
        border-color .22s ease,
        box-shadow .22s ease;
}

@media(hover:hover) and (pointer:fine){

    .review-card:hover{

        animation:
            review-spring-scale
            1s
            cubic-bezier(.18,.82,.25,1);

        border-color:#000;

        box-shadow:
            0 14px 28px rgba(0,0,0,.25);
    }
}

@keyframes review-spring-scale{

    0%{
        transform:
            translateY(0)
            scale(1);
    }

    10%{
        transform:
            translateY(1px)
            scale(.97);
    }

    30%{
        transform:
            translateY(-10px)
            scale(1.01);
    }

    52%{
        transform:
            translateY(3px)
            scale(1);
    }

    72%{
        transform:
            translateY(-3px)
            scale(1);
    }

    88%{
        transform:
            translateY(1px)
            scale(1);
    }

    100%{
        transform:
            translateY(0)
            scale(1);
    }
}

.review-top{

    display:flex;

    align-items:center;

    gap:15px;

    min-height:90px;
}

.review-photo{

    width:60px;
    height:90px;

    flex:
        0 0 60px;

    display:flex;

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

    overflow:hidden;

    background:
        rgba(229,223,160,.08);

    border:
        2px solid var(--yellow);

    border-radius:7px;

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

.review-photo img{

    width:60px;
    height:90px;

    display:block;

    object-fit:cover;
}

.review-person{

    min-width:0;

    text-align:left;
}

.review-name{

    margin:0 0 6px;

    color:var(--yellow);

    font-size:18px;

    line-height:1.12;

    font-weight:700;
}

.review-role{

    color:
        rgba(243,242,224,.84);

    font-size:13px;

    line-height:1.25;

    font-weight:400;
}

.review-city{

    margin-top:3px;

    color:
        rgba(243,242,224,.68);

    font-size:10px;

    line-height:1.15;

    font-style:italic;
}

.review-rating{

    margin:
        11px 0 11px;

    color:var(--yellow);

    font-size:18px;

    line-height:1;

    letter-spacing:2px;
}

.review-text{

    margin:0;

    color:
        rgba(243,242,224,.95);

    font-size:13px;

    line-height:1.45;

    flex:1;
}

.reviews-arrow{

    position:absolute;

    top:50%;

    transform:
        translateY(-50%);

    width:40px;
    height:40px;

    padding:
        0 0 6px;

    border:0;

    border-radius:50%;

    background:var(--purple);

    color:var(--yellow);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:34px;

    line-height:34px;

    display:flex;

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

    cursor:pointer;

    z-index:10;

    box-shadow:
        0 4px 12px rgba(0,0,0,.20);

    transition:
        transform .2s ease,
        filter .2s ease,
        opacity .2s ease;
}

.reviews-arrow:hover{

    transform:
        translateY(-50%) scale(1.08);

    filter:
        brightness(1.08);
}

.reviews-arrow:disabled{

    opacity:.35;

    cursor:default;
}

.reviews-arrow-prev{

    left:-21px;
}

.reviews-arrow-next{

    right:-21px;
}

.reviews-dots{

    display:flex;

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

    gap:8px;

    margin-top:12px;
}

.reviews-dot{

    width:8px;
    height:8px;

    padding:0;

    border:0;

    border-radius:50%;

    background:#C9B8C8;

    cursor:pointer;

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

.reviews-dot.active{

    background:var(--purple);

    transform:
        scale(1.25);
}


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

.site-footer{

    position:relative;

    overflow:visible;

    margin:0;

    background:#663366;

    color:#E5DFA0;

    padding-top:65px;

    z-index:2;
}


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

.footer-wave-layer{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    width:100%;

    /*
       Высота области волн.
       НАСТРАИВАЕТСЯ ЗДЕСЬ.
    */
    height:400px;

    overflow:visible;

    pointer-events:none;

    z-index:1;

    /*
       Минимальный зазор между волнами.
       Если нужно больше — меняем здесь.
    */
    --wave-gap:80px;
}

.footer-wave{

    position:absolute;

    display:block;

    height:auto;

    max-width:none;

    opacity:.90;

    pointer-events:none;

    user-select:none;

    -webkit-user-drag:none;
}


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

   Ширина вычисляется от доступного места.
   Минимальный промежуток -- 80px.
====================================================
*/

.footer-wave-left{

    left:0;

    bottom:0;

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

    height:auto;
}


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

.footer-wave-right{

    right:0;

    bottom:0;

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

    height:auto;
}


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

.footer-container{

    position:relative;

    z-index:3;
}


/* ==================================================
   FOOTER MAIN
   ПОДНЯТ НА 55PX
================================================== */

.footer-main{

    display:grid;

    grid-template-columns:
        1.55fr
        1fr
        1.35fr
        1.35fr;

    gap:55px;

    padding:
        25px 0 32px;

    transform:
        translateY(-55px);
}


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

.footer-brand{

    min-width:0;
}

.footer-logo{

    display:inline-flex;

    align-items:center;

    width:max-content;

    text-decoration:none;
}

.footer-logo img{

    display:block;

    width:143px;

    height:auto;

    max-width:100%;

    object-fit:contain;
}

.footer-tagline{

    margin-top:10px;

    color:
        rgba(243,242,224,.92);

    font-size:14px;

    line-height:1.35;
}


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

.footer-column{

    min-width:0;
}

.footer-column-title{

    margin:4px 0 14px;

    color:#E5DFA0;

    font-size:17px;

    line-height:1.2;

    font-weight:700;
}

.footer-links{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:8px;
}

.footer-links a{

    display:inline-block;

    color:
        rgba(243,242,224,.88);

    text-decoration:none;

    font-size:14px;

    line-height:1.25;

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

.footer-links a:hover{

    color:#fff;

    transform:
        translateX(3px);
}


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

.footer-contact{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:11px;

    color:
        rgba(243,242,224,.90);

    text-decoration:none;

    font-size:14px;

    line-height:1.3;

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

.footer-contact:hover{

    color:#fff;

    transform:
        translateX(3px);
}

.footer-contact-icon{

    width:20px;

    height:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;
}

.footer-contact-icon img{

    width:18px;

    height:18px;

    display:block;

    object-fit:contain;
}

.footer-contact-message{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:5px;

    color:#E5DFA0;

    font-size:14px;

    line-height:1.3;

    font-weight:600;
}

.footer-heart{

    width:20px;

    height:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;
}

.footer-heart img{

    width:18px;

    height:18px;

    display:block;

    object-fit:contain;
}


/* ==================================================
   FOOTER BOTTOM
   ПОЛОСА И ТЕКСТ ПОД НЕЙ НЕ ДВИГАЮТСЯ
================================================== */

.footer-bottom{

    min-height:32px;

    position:relative;

    z-index:5;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    border-top:
        1px solid
        rgba(229,223,160,.28);

    color:
        rgba(243,242,224,.72);

    font-size:12px;

    line-height:1.3;
}

.footer-copyright{

    white-space:nowrap;
}

.footer-policy{

    color:
        rgba(243,242,224,.78);

    text-decoration:none;

    white-space:nowrap;

    transition:
        color .2s ease;
}

.footer-policy:hover{

    color:#fff;

    text-decoration:underline;
}


/* ==================================================
   LARGE DESKTOP
================================================== */

@media(min-width:1201px){

    .site-footer{

        padding-top:65px;

        overflow:visible;
    }

    .footer-wave-layer{

        bottom:0;

        height:390px;

        --wave-gap:80px;
    }

    .footer-wave-left{

        left:0;

        bottom:0;

        width:
            min(
                680px,
                calc(
                    (100vw - var(--wave-gap))
                    * .52
                )
            );
    }

    .footer-wave-right{

        right:0;

        bottom:0;

        width:
            min(
                620px,
                calc(
                    (100vw - var(--wave-gap))
                    * .48
                )
            );
    }

    .footer-main{

        gap:70px;

        padding:
            25px 0 35px;

        transform:
            translateY(-55px);
    }

    .footer-logo img{

        width:153px;
    }

}


/* ==================================================
   TABLET
================================================== */

@media(max-width:1100px) and (min-width:901px){

    .desktop-menu{

        gap:16px;
    }

    .desktop-menu a{

        font-size:14px;
    }

    .logo img{

        width:187px;
    }

    .lav-hero-girl{

        right:180px;
    }

    .service-card{

        flex-basis:225px;

        width:225px;

        min-width:225px;
    }

    .why-panel{

        grid-template-columns:
            repeat(3,1fr);
    }

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

        display:none;
    }

    .review-card{

        flex-basis:300px;

        width:300px;

        min-width:300px;
    }

    .footer-main{

        grid-template-columns:
            1.4fr
            1fr
            1fr
            1.2fr;

        gap:28px;

        transform:
            translateY(-55px);
    }

    .footer-logo img{

        width:123px;
    }

    .footer-wave-layer{

        bottom:0;

        height:350px;

        --wave-gap:80px;
    }

    .footer-wave-left{

        width:
            min(
                720px,
                calc(
                    (100vw - var(--wave-gap))
                    * .52
                )
            );
    }

    .footer-wave-right{

        width:
            min(
                690px,
                calc(
                    (100vw - var(--wave-gap))
                    * .48
                )
            );
    }

}

/* ==================================================
   МОБИЛЬНАЯ КНОПКА — ТОЛЬКО НА МОБИЛЬНЫХ
   ================================================== */

.mobile-menu-btn {
    display: none !important;
}

@media (max-width: 900px) {

    .mobile-menu-btn {
        display: flex !important;
    }

}

/* ==================================================
   FOOTER — DESKTOP UPDATE
   Изменения действуют только при ширине от 901px.
   ================================================== */

@media (min-width:901px){

    /*
       Текстовая область футера уже на 50px
       с каждой стороны.
    */
    .footer-container{
        max-width:1100px;
        margin-left:auto;
        margin-right:auto;
    }

    /*
       Логотип футера на 50px правее.
    */
    .footer-logo{
        transform:translateX(50px);
    }

    /*
       ВОЛНЫ ФУТЕРА

       Важно:
       мы не задаём отдельно width/height,
       которые могли бы исказить PNG.
       Масштабирование происходит пропорционально.

       --wave-gap = минимальное расстояние
       между внутренними краями двух волн.
    */
    .footer-wave-layer{
        --wave-gap:250px;
    }

    .footer-wave-left{
        width:min(
            calc((100vw - var(--wave-gap)) * .58),
            700px
        );
        height:auto;
    }

    .footer-wave-right{
        width:min(
            calc((100vw - var(--wave-gap)) * .53),
            650px
        );
        height:auto;
    }
}

/* ==================================================
   ARTICLE IMAGES
================================================== */

.article-image{
    display:block;
    width:var(--article-image-width,40%) !important;
    max-width:100%;
    box-sizing:border-box;
    margin:0 0 25px;
    padding:0;
    border-radius:22px;
    overflow:hidden;
}

.article-image img{
    display:block;
    width:100%;
    height:auto;
    margin:0;
}

.article-image-right{
    float:right !important;
    margin:0 0 25px 35px;
}

.article-image-left{
    float:left !important;
    margin:0 35px 25px 0;
}

.article-image-center{
    margin:25px auto;
}

.article-image-full{
    width:100%;
    margin:25px 0;
}

.article-image-style-yellow{
    border:2px solid #f2df8e !important;
}

.article-image-style-plain{
    border:0;
}

.article-image-style-shadow{
    border:2px solid #f2df8e;
    box-shadow:0 8px 24px rgba(0,0,0,.14);
}

.article-image-style-card{
    padding:8px;
    background:#fff;
    border:1px solid #e5dfe7;
    box-shadow:0 5px 18px rgba(0,0,0,.08);
}

.content-article::after{
    content:"";
    display:table;
    clear:both;
}

   WHY — CARD TITLES
   Desktop and mobile
   ================================================== */

.why-item-title{
    /* Desktop: 18px -> 17px */
    font-size:17px;
    transform-origin:center center;
    display:block;

    /*
       Scale only. The browser keeps the same line wrapping
       because font-size itself does not change during animation.
    */
    animation:why-title-pulse 5s ease-in-out infinite;
}

@keyframes why-title-pulse{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(.94);
    }
}

@media (prefers-reduced-motion:reduce){
    .why-item-title{
        animation:none;
        transform:scale(1);
    }
}

/* FINAL DESKTOP OVERRIDE — WHY CARD TITLE PULSE */
@media (min-width:901px){
    .why-panel .why-item .why-item-title{
        font-size:17px;
        transform-origin:center center;
        animation:why-title-pulse 5s ease-in-out infinite !important;
    }
}