/* ==========================================================
   FRANKEVICH — SERVICES 2026
   ========================================================== */

#services.frservices26 {

    position: relative;

    width: 100%;

    padding:
        70px
        0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f7faff 0%,
            #ffffff 100%
        );

    border-top:
        1px solid rgba(20, 59, 105, .06);

    border-bottom:
        1px solid rgba(20, 59, 105, .07);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    color:
        #142238;

}


#services.frservices26,
#services.frservices26 * {

    box-sizing:
        border-box;

}



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

#services .frservices26__inner {

    width:
        min(
            1380px,
            calc(100% - 70px)
        );

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        
        minmax(680px, 1.65fr)
        minmax(300px, .75fr);

    gap:
        60px;

    align-items:
        stretch;

}



/* ==========================================================
   LEFT
   ========================================================== */

#services .frservices26__intro {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        10px
        0
        5px;

}



/* EYEBROW */

#services .frservices26__eyebrow {

    margin-bottom:
        18px;

    font-size:
        14px;

    line-height:
        1;

    font-weight:
        750;

    letter-spacing:
        2.2px;

    color:
        #2876e8;

}



/* TITLE */

#services .frservices26__heading {

    max-width:
        450px;

    padding: 0;

    margin:
        0
        0
        22px;

    font-size:
        clamp(
            38px,
            3.3vw,
            54px
        );

    line-height:
        .98;

    font-weight:
        650;

    letter-spacing:
        -2.5px;

    color:
        #122035;

}


#services .frservices26__heading span {

    display:
        block;

    color:
        #2875e6;

}



/* TEXT */

#services .frservices26__text {

    max-width:
        420px;

    padding: 0;

    margin:
        0
        0
        25px;

    font-size:
        15px;

    line-height:
        1.65;

    color:
        #68778c;

}



/* ==========================================================
   ALL SERVICES LINK
   ========================================================== */

#services .frservices26__all {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    width:
        fit-content;

    color:
        #236dd7 !important;

    font-size:
        16px;

    line-height:
        1;

    font-weight:
        650;

    text-decoration:
        none !important;

}


#services .frservices26__all b {

    position:
        relative;

    left:
        0;

    font-size:
        17px;

    line-height:
        1;

    font-weight:
        400;

    transition:
        left .25s ease;

}


#services .frservices26__all:hover b {

    left:
        5px;

}



/* ==========================================================
   CONTACT
   ========================================================== */

#services .frservices26__contact {

    margin-top:
        50px;

    padding-top:
        25px;

    border-top:
        1px solid
        rgba(17,56,103,.11);

}


#services .frservices26__contact-label {

    margin-bottom:
        8px;

    font-size:
        14px;

    line-height:
        1;

    font-weight:
        650;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;

    color:
        #8592a5;

}



/* PHONE */

#services .frservices26__phone {

    display:
        inline-block;

    margin-bottom:
        15px;

    font-size:
        22px;

    line-height:
        1.2;

    font-weight:
        650;

    letter-spacing:
        -.7px;

    color:
        #16263d !important;

    text-decoration:
        none !important;

    transition:
        color .25s ease;

}


#services .frservices26__phone:hover {

    color:
        #2876e8 !important;

}



/* ==========================================================
   MESSENGERS
   ========================================================== */

#services .frservices26__messengers {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

}


#services .frservices26__messenger {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        36px;

    padding:
        5px
        11px
        5px
        5px;

    border:
        1px solid
        rgba(24,63,110,.10);

    border-radius:
        30px;

    background:
        rgba(255,255,255,.72);

    color:
        #45566d !important;

    font-size:
        14px;

    line-height:
        1;

    font-weight:
        600;

    text-decoration:
        none !important;

    transition:
        border-color .25s ease,
        background .25s ease,
        transform .25s ease;

}


#services .frservices26__messenger:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(40,118,232,.25);

    background:
        #fff;

}


#services .frservices26__messenger-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        26px;

    height:
        26px;

    border-radius:
        50%;

    background:
        #edf4ff;

    color:
        #2875e5;

    font-size:
        13px;

    line-height:
        1;

    font-weight:
        750;

}



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

#services .frservices26__grid {

    display:
        grid;

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

    border-top:
        1px solid
        rgba(21,58,102,.11);

    border-left:
        1px solid
        rgba(21,58,102,.11);

}



/* ==========================================================
   SERVICE CARD
   ========================================================== */

#services .frservice26 {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        270px;

    padding:
        25px
        26px
        22px;

    overflow:
        hidden;

    background:
        rgba(255,255,255,.58);

    border-right:
        1px solid
        rgba(21,58,102,.11);

    border-bottom:
        1px solid
        rgba(21,58,102,.11);

    color:
        inherit !important;

    text-decoration:
        none !important;

    transition:
        background .35s ease,
        box-shadow .35s ease;

}


/*
   Синий элемент появляется при hover.
*/

#services .frservice26::before {

    content: "";

    position:
        absolute;

    top: 0;
    left: 0;

    width:
        3px;

    height:
        0;

    background:
        #2876e8;

    transition:
        height .35s ease;

}


#services .frservice26:hover {

    z-index:
        2;

    background:
        #fff;

    box-shadow:
        0 16px 38px
        rgba(20,49,84,.08);

}


#services .frservice26:hover::before {

    height:
        100%;

}



/* ==========================================================
   TOP
   ========================================================== */

#services .frservice26__top {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        20px;

}



/* ==========================================================
   ICON
   ========================================================== */

#services .frservice26__icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    flex:
        0 0 46px;

    border-radius:
        13px;

    background:
        #eef5ff;

    color:
        #2876e8;

    transition:
        background .3s ease,
        transform .3s ease;

}


#services .frservice26:hover
.frservice26__icon {

    transform:
        translateY(-2px);

    background:
        #e5f0ff;

}



/*
   Поле svgicon уже содержит HTML/SVG.
   Ограничиваем SVG именно внутри этой иконки,
   чтобы никакие глобальные стили сайта
   не раздули его.
*/

#services .frservice26__icon svg {

    display:
        block !important;

    width:
        53px !important;

    height:
        53px !important;

    min-width:
        53px !important;

    min-height:
        53px !important;

    max-width:
        53px !important;

    max-height:
        53px !important;

    overflow:
        visible;

    fill:
        none;

    stroke:
        currentColor;

}



/* ==========================================================
   NUMBER
   ========================================================== */

#services .frservice26__number {

    padding-top:
        4px;

    font-size:
        13px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        1px;

    color:
        #a3afbf;

}



/* ==========================================================
   TITLE
   ========================================================== */

#services .frservice26__title {

    max-width:
        330px;

    padding: 0;

    margin:
        0
        0
        12px;

    font-size:
        22px;

    line-height:
        1.15;

    font-weight:
        650;

    letter-spacing:
        -.8px;

    color:
        #15243b;

    transition:
        color .25s ease;

}


#services .frservice26:hover
.frservice26__title {

    color:
        #236fdc;

}



/* ==========================================================
   DESCRIPTION
   ========================================================== */

#services .frservice26__description {

    max-width:
        350px;

    margin-bottom:
        23px;

    font-size:
        16px;

    line-height:
        1.55;

    color:
        #6b788b;

}


#services .frservice26__description p {

    padding: 0;

    margin:
        0
        0
        6px;

}


#services .frservice26__description p:last-child {

    margin-bottom:
        0;

}



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

#services .frservice26__bottom {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        15px;

    margin-top:
        auto;

    padding-top:
        15px;

    border-top:
        1px solid
        rgba(20,58,104,.08);

}



/* PRICE */

#services .frservice26__price {

    font-size:
        15px;

    line-height:
        1.3;

    font-weight:
        650;

    color:
        #384b64;

}


#services .frservice26__price:empty {

    display:
        none;

}



/* MORE */

#services .frservice26__more {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-left:
        auto;

    white-space:
        nowrap;

    font-size:
        15px;

    line-height:
        1;

    font-weight:
        650;

    color:
        #2872df;

}


#services .frservice26__more b {

    position:
        relative;

    left:
        0;

    font-size:
        16px;

    line-height:
        1;

    font-weight:
        400;

    transition:
        left .25s ease;

}


#services .frservice26:hover
.frservice26__more b {

    left:
        4px;

}



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

@media (max-width: 1050px) {

    #services.frservices26 {

        padding:
            58px
            0;

    }


    #services .frservices26__inner {

        width:
            calc(100% - 40px);

        grid-template-columns:
            1fr;

        gap:
            40px;

    }


    #services .frservices26__intro {

        display:
            grid;

        grid-template-columns:
            minmax(300px, 1fr)
            minmax(280px, .8fr);

        gap:
            50px;

        align-items:
            end;

    }


    #services .frservices26__contact {

        margin-top:
            0;

    }

}



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

@media (max-width: 720px) {

    #services.frservices26 {

        padding:
            45px
            0
            40px;

    }


    #services .frservices26__inner {

        width:
            calc(100% - 30px);

        gap:
            32px;

    }


    #services .frservices26__intro {

        display:
            block;

    }


    #services .frservices26__heading {

        max-width:
            100%;

        font-size:
            clamp(
                34px,
                9vw,
                42px
            );

        letter-spacing:
            -1.7px;

    }


    #services .frservices26__text {

        font-size:
            16px;

    }


    #services .frservices26__contact {

        margin-top:
            32px;

    }


    #services .frservices26__phone {

        font-size:
            25px;

    }



    /* SERVICES */

    #services .frservices26__grid {

        grid-template-columns:
            1fr;

    }


    #services .frservice26 {

        min-height:
            0;

        padding:
            22px
            20px
            20px;

    }


    #services .frservice26__title {

        max-width:
            100%;

        font-size:
            21px;

    }


    #services .frservice26__description {

        max-width:
            100%;

    }

}