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

.directions{

    position:relative;
    overflow:hidden;

    height:100vh;

    display:flex;
    align-items:center;

    

}.directions .container{

    height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-top:115px;
    padding-bottom:70px;

    position:relative;
    z-index:2;

}.section-title{

    font-size:clamp(30px, 3.2738vw + 4.86px, 52px);

    margin:0 0 0px;

}.section-subtitle{

    max-width:980px;

    margin:24px 0 80px;

    font-size:20px;
    line-height:1.8;

    color:#B8C2D1;

    font-weight:400;

    text-transform:none;
    letter-spacing:.3px;

}/*=========================
    SLIDER
=========================*/

.directions-slider{

    width:100%;

    height:100%;

    overflow:hidden;

}.directions-slider .swiper-wrapper{

    height:100%;

}.directions-slider .swiper-slide{

    height:100%;

    

}/*=========================
    CARD
=========================*/

.direction-card-number{
    position:absolute;
    top:22px;
    left:24px;
    z-index:5;
    color:#A9B8CC;
    font-size:13px;
    font-weight:500;
    line-height:1;
    letter-spacing:1px;
    pointer-events:none;
}.direction-card:hover .direction-card-number{
    color:#FFFFFF;
}.direction-card{

    position:relative;

    width:100%;
    height:100%;

    min-height:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:34px;

    overflow:hidden;

    border-radius:24px;

    text-decoration:none;

    color:#fff;

    background:#101827;

    border:1px solid rgba(255,255,255,.08);

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

}.direction-card:hover{

    transform:translateY(-8px);

    border-color:#167BFF;

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

}/*=========================
    IMAGE
=========================*/

.direction-image{

    position:absolute;

    inset:0;

    z-index:0;

}.direction-card:hover .direction-image img{

    transform:scale(1.08);

    opacity:.95;

    filter:brightness(1.12);

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

.direction-number{

    position:absolute;

    top:15px;

    right:20px;

    z-index:2;

    font-size:70px;

    font-weight:800;

    color:rgba(255,255,255,.06);

}.direction-card:hover .direction-link{

    background:#167BFF;

    border-color:#167BFF;

    transform:translateY(-2px);

    box-shadow:
        0 12px 30px rgba(22,123,255,.35);

}


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




/*=========================
    ADAPTIVE
=========================*/

@media(max-width:1200px){

    .direction-card{

        padding:28px;

    }

}


@media(max-width:992px){

    .direction-card{

        min-height:420px;

    }

}


@media(max-width:600px){

    .directions-slider-wrap{

        padding-bottom:40px;

    }

    .direction-card{

        padding:24px;

    }

    .direction-content h3{

        font-size:22px;

    }

}/* =========================
   DIRECTIONS SLIDER
========================= */

.directions-slider-wrap{

    position:relative;

    width:100%;

    flex:1;

    min-height:0;

    margin-top:-35px;

    overflow:visible;

}/* =========================
   SLIDER
========================= */

.directions-slider{

    width:100%;

    overflow:visible;

}.directions-slider .swiper-wrapper{

    align-items:stretch;

}.directions-slider .swiper-slide{

    height:420px;

    display:flex;

    padding-top:8px;

    box-sizing:border-box;

}.directions-slider .direction-card{

    width:100%;

}/* =========================================
   DIRECTIONS — GEO ARROW BUTTONS
========================================= */

.directions-navigation .swiper-button-prev,
.directions-navigation .swiper-button-next{

    position:static !important;

    margin:0 !important;

    width:58px !important;
    height:58px !important;

    padding:0 !important;

    display:flex !important;

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

    background:transparent !important;

    border:0 !important;

    box-shadow:none !important;

    color:transparent !important;

    overflow:visible !important;

    cursor:pointer;

}.directions-navigation .swiper-button-prev::after,
.directions-navigation .swiper-button-next::after{

    content:none !important;

}.directions-navigation .swiper-button-prev img,
.directions-navigation .swiper-button-next img{

    display:block;

    width:58px;
    height:58px;

    margin:0;
    padding:0;

    object-fit:contain;

    transform:none;

    filter:
        brightness(1.12)
        saturate(1.08)
        drop-shadow(0 0 6px rgba(22,123,255,.20));

    transition:
        filter .25s ease,
        transform .15s ease;

}.directions-navigation .swiper-button-prev:hover img,
.directions-navigation .swiper-button-next:hover img{

    filter:
        brightness(1.28)
        saturate(1.12)
        drop-shadow(0 0 14px rgba(22,123,255,.52));


}.directions-navigation .swiper-button-prev:active img,
.directions-navigation .swiper-button-next:active img{

    transform:scale(.91);

    filter:
        brightness(1.38)
        saturate(1.15)
        drop-shadow(0 0 16px rgba(22,123,255,.70));

}

@media (min-width: 993px) {

    .directions-slider .direction-card {
        width: calc(100% - 6px);
    }

}/* =========================================================
   GEO — DIRECTIONS: SIDE ARROWS CENTERED ON CARDS
========================================================= */

.directions-slider-wrap{
    position:relative;
}.directions-navigation{
    position:absolute !important;
    top:218px !important;
    left:-48px !important;
    right:-48px !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:0 !important;

    transform:translateY(-50%) !important;
    z-index:20 !important;
    pointer-events:none;
}.directions-navigation .swiper-button-prev,
.directions-navigation .swiper-button-next{
    pointer-events:auto !important;
    flex:0 0 58px !important;
}/* Keep the existing GEO progress/scroll indicator centered below cards. */
.directions-progress{
    position:relative;
    z-index:5;
}

/* Tablet */
@media (min-width:768px) and (max-width:1199px){
    .directions-navigation{
        left:-34px !important;
        right:-34px !important;
        top:50% !important;
    }
}

/* Mobile: arrows stay on the sides of the visible card. */
@media (max-width:767px){
    .directions-navigation{
        top:50% !important;
        left:4px !important;
        right:4px !important;
        transform:translateY(-50%) !important;
    }

    .directions-navigation .swiper-button-prev,
    .directions-navigation .swiper-button-next{
        width:46px !important;
        height:46px !important;
    }

    .directions-navigation .swiper-button-prev img,
    .directions-navigation .swiper-button-next img{
        width:46px !important;
        height:46px !important;
    }
}/* =========================================================
   DIRECTIONS — match PROJECTS typography / labels / counter
========================================================= */

.directions-top{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:30px;
    flex:0 0 auto;
}.directions-label{
    display:flex;
    align-items:center;
    gap:16px;
    color:#F4F7FB;
    font-size:15px;
    font-weight:400;
    line-height:1;
    letter-spacing:0;
    text-transform:uppercase;
}.directions-label-line{
    width:42px;
    height:2px;
    flex:0 0 42px;
    background:#167BFF;
    border-radius:10px;
}.directions-current{
    color:#A9B8CC;
}.directions .section-title{
    font-size:44px !important;
    line-height:1.1 !important;
}.directions .section-subtitle{
    max-width:900px !important;
    margin:12px auto 30px !important;
    font-size:16px !important;
    line-height:1.55 !important;
}/* Five independent segments. Only one segment is blue at a time. */
.directions-progress{
    width:130px !important;
    height:3px !important;
    margin:60px auto 0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:5px !important;
    background:transparent !important;
    overflow:visible !important;
    position:relative !important;
}.directions-progress-segment{
    display:block !important;
    width:21px !important;
    height:2px !important;
    flex:0 0 21px !important;
    background:rgba(123,146,176,.38) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transition:
        background .25s ease,
        box-shadow .25s ease !important;
}.directions-progress-segment.active{
    background:#168FFF !important;
    box-shadow:0 0 8px rgba(22,143,255,.48) !important;
}

@media (min-width:993px){
    .directions{
        height:100vh !important;
        min-height:720px !important;
        box-sizing:border-box !important;
    }

    .directions .container{
        box-sizing:border-box !important;
        padding-top:60px !important;
        padding-bottom:60px !important;
        transform:translateY(10px) !important;
    }

    .directions-slider-wrap{
        margin-top:0 !important;
    }

    .directions-slider .swiper-slide{
        height:460px !important;
    }
}/* =========================================================
   DIRECTIONS — ACCORDION + VISUAL
   Left column: expandable list of direction categories.
   Right column: image for the currently active category,
   cross-fading in place. One item open at a time.
========================================================= */

.directions-accordion{

    display:block;

}.direction-item.active{

    background:linear-gradient(90deg, rgba(22,123,255,.14), rgba(22,123,255,0) 85%);

    box-shadow:none;

}.direction-item.active .direction-item-number{

    color:#5CA8FF;

}.direction-item.active .direction-item-icon{

    transform:rotate(90deg);

    border-color:#167BFF;

    color:#fff;

    box-shadow:0 0 16px rgba(22,123,255,.55);

}.direction-item.active .direction-item-body{

    max-height:900px;

}.direction-item.active .direction-item-body{

    grid-template-rows:1fr;


}.direction-visual-image.active{

    opacity:1;

    transform:scale(1);

}


@media (max-width:900px){

    .directions-accordion{
        grid-template-columns:minmax(0, 1fr);
    }

    .directions-accordion-visual{
        min-height:280px;
        order:-1;
    }

}/* =========================================================
   DIRECTIONS — CATALOG INDEX
   Flat list of links, styled like a parts catalog: a mono
   reference code, title + spec, a small thumbnail and a
   circular arrow — no accordion, each row opens the service
   page directly.
========================================================= */

.directions-catalog{

    border-top:1px solid rgba(255,255,255,.1);

}.dir-row{

    display:grid;
    grid-template-columns: 90px 1fr 120px 110px;

    align-items:center;

    gap:28px;

    padding:26px 20px;

    border-bottom:1px solid rgba(255,255,255,.1);

    text-decoration:none;

    color:#fff;

    transition:background .3s ease;

}.dir-row:hover,
.dir-row.is-active{

    background:linear-gradient(90deg, rgba(22,123,255,.14), rgba(22,123,255,0) 80%);

}.dir-row:hover .dir-code,
.dir-row.is-active .dir-code{

    color:#5CA8FF;

}.dir-row:hover .dir-thumb img{

    transform:scale(1.08);

}.dir-row:hover .dir-arrow,
.dir-row.is-active .dir-arrow{

    border-color:#167BFF;

    color:#5CA8FF;

    transform:translateX(3px);

}

@media (max-width:900px){

    .dir-row{

        grid-template-columns: 60px 1fr;
        grid-template-areas:
            "code thumb"
            "title thumb"
            "go go";

        row-gap:12px;

    }

    .dir-code{grid-area:code;}
    .dir-title{grid-area:title; font-size:19px;}
    .dir-thumb{grid-area:thumb; width:88px; justify-self:end;}
    .dir-go{grid-area:go; justify-self:start;}

}/* =========================================================
   DIRECTIONS — EXPANDED PANEL
   Large image on the left duplicating the row thumbnail,
   copy on the right, and a borderless "Узнать больше" link
   pinned to the bottom-right of the copy column.
========================================================= */

.direction-item-body-inner{

    overflow:hidden;

    min-height:0;

    display:grid;
    grid-template-columns:minmax(0,420px) minmax(0,1fr);

    gap:40px;

    /* Flush left like the reference: the photo runs to the panel
       edge, so only the copy column carries side padding. */
    padding:0 24px 0 0;

    align-items:stretch;

}/* Reset the inherited paragraph offsets — the grid handles spacing now. */
.direction-item-body .direction-body-copy p{

    margin:0;

    padding-left:0;

    max-width:none;

}/* Borderless link, bottom-right of the copy column. */
.direction-item .direction-body-copy .direction-link{

    margin:auto 0 0 auto;

    width:auto;
    height:auto;

    padding:0;

    border:none !important;

    background:none !important;

    border-radius:0;

    box-shadow:none !important;

    display:inline-flex;
    align-items:center;
    gap:9px;

    color:#5CA8FF;

    font-size:15px;
    font-weight:600;

    transition:gap .25s ease, color .25s ease;

}

@media (max-width:900px){

    .direction-item-body-inner{

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

        gap:18px;

    }

    .direction-body-media{

        min-height:170px;

    }

    .direction-body-copy .direction-link{

        margin:18px 0 0 0;

    }

}/* =========================================================
   EXPANDED PANEL — divider, list, CTA
========================================================= */

/* Divider running across the top of the expanded panel,
   flush with the top edge of the large image. */
.direction-item.active .direction-item-body-inner{

    border-top:1px solid rgba(255,255,255,.12);

}/* CTA — square glowing button matching the site's arrow buttons. */
.direction-item .direction-body-copy .direction-link{

    margin:26px 0 0 auto;

    width:auto;
    height:auto;

    padding:13px 24px;

    border:1px solid rgba(22,123,255,.55) !important;

    border-radius:6px;

    background:rgba(22,123,255,.10) !important;

    box-shadow:
        0 0 0 1px rgba(22,123,255,.08) inset,
        0 0 16px rgba(22,123,255,.18) !important;

    display:inline-flex;
    align-items:center;
    gap:12px;

    color:#fff;

    font-size:14.5px;
    font-weight:600;

    letter-spacing:.2px;

    transition:
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        gap .3s ease;

}

@media (max-width:900px){

    .direction-body-list ul{

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

    }

    .direction-item .direction-body-copy .direction-link{

        margin:22px 0 0 0;

    }

}/* =========================================================
   DIRECTIONS — SPLIT LAYOUT (list + live preview)
   Left: compact list of directions. Right: a panel that
   swaps to match the selected row. Nothing shifts on click.
========================================================= */

.directions-split{

    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);

    gap:clamp(30px, 4vw, 56px);

    align-items:start;

}/* ---------- left: rows ---------- */

.directions-rows{

    border-top:1px solid rgba(255,255,255,.10);

}.dir-row{

    position:relative;

    width:100%;

    display:grid;
    grid-template-columns:44px 1fr 36px;

    align-items:center;

    gap:18px;

    padding:24px 16px 24px 8px;

    background:none;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.10);

    text-align:left;

    font-family:inherit;

    cursor:pointer;

    transition:background .3s ease;

}.dir-row:hover{

    background:linear-gradient(90deg, rgba(22,123,255,.08), rgba(22,123,255,0) 88%);

}.dir-row.active{

    background:linear-gradient(90deg, rgba(22,123,255,.14), rgba(22,123,255,0) 88%);

}.dir-row.active::before{

    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:2px;

    background:#167BFF;

}.dir-row-num{

    font-size:13px;
    font-weight:700;

    color:#5E6979;

    letter-spacing:.04em;

    transition:color .3s ease;

}.dir-row.active .dir-row-num{

    color:#167BFF;

}.dir-row-text{

    display:block;

    min-width:0;

}.dir-row-title{

    display:block;

    color:#fff;

    font-size:19px;
    font-weight:700;

    line-height:1.3;

}.dir-row-sub{

    display:block;

    margin-top:5px;

    color:#5E6979;

    font-size:13.5px;
    font-weight:400;

    line-height:1.4;

}.dir-row-arrow{

    width:36px;
    height:36px;

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

    border-radius:50%;

    border:1px solid rgba(255,255,255,.18);

    color:#fff;

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

}.dir-row-arrow svg{

    width:17px;
    height:17px;

}.dir-row:hover .dir-row-arrow,
.dir-row.active .dir-row-arrow{

    border-color:#167BFF;

    color:#5CA8FF;

    box-shadow:0 0 14px rgba(22,123,255,.28);

}/* ---------- right: preview ---------- */

.directions-preview{

    position:relative;

    border:1px solid rgba(255,255,255,.10);

    border-radius:14px;

    overflow:hidden;

    background:rgba(9,14,24,.5);

}.dir-panel{

    display:none;

}.dir-panel.active{

    display:block;

    animation:dirPanelIn .4s ease;

}

@keyframes dirPanelIn{

    from{opacity:0; transform:translateY(6px);}
    to{opacity:1; transform:none;}

}.dir-panel-photo{

    position:relative;

    /* Source photos are 3:2 — matching the ratio shows the whole
       frame instead of cropping the top and bottom off. */
    aspect-ratio:3 / 2;

    height:auto;

}.dir-panel-photo img{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

}.dir-panel-photo::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(180deg, rgba(6,9,16,0) 55%, rgba(6,9,16,.92) 100%);

}.dir-panel-body{

    padding:26px 26px 28px;

}.dir-panel-body h3{

    margin:0 0 12px;

    color:#fff;

    font-size:23px;
    font-weight:700;

    line-height:1.25;

}.dir-panel-body p{

    margin:0 0 20px;

    color:#96A2B4;

    font-size:14.5px;

    line-height:1.65;

}.dir-chips{

    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-bottom:24px;

}.dir-chip{

    padding:6px 13px;

    border:1px solid rgba(255,255,255,.14);

    border-radius:20px;

    color:#B8C6D8;

    font-size:12.5px;

}.dir-panel-cta{

    display:inline-flex;
    align-items:center;

    gap:11px;

    padding:13px 22px;

    border:1px solid rgba(22,123,255,.55);

    border-radius:6px;

    background:rgba(22,123,255,.10);

    color:#fff;

    font-size:14.5px;
    font-weight:600;

    text-decoration:none;

    box-shadow:
        0 0 0 1px rgba(22,123,255,.08) inset,
        0 0 16px rgba(22,123,255,.18);

    transition:
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        gap .3s ease;

}.dir-panel-cta span{

    color:#5CA8FF;

    font-size:17px;

    line-height:1;

    transition:color .3s ease;

}.dir-panel-cta:hover{

    gap:15px;

    background:#167BFF;

    border-color:#167BFF;

    box-shadow:
        0 0 0 1px rgba(22,123,255,.2) inset,
        0 0 28px rgba(22,123,255,.55),
        0 14px 30px rgba(22,123,255,.28);

}.dir-panel-cta:hover span{

    color:#fff;

}

@media (max-width:900px){

    .directions-split{

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

        gap:26px;

    }

    .directions-preview{

        order:-1;

    }

    .dir-panel-photo{

        aspect-ratio:3 / 2;

        height:auto;

    }

    .dir-row-title{

        font-size:17px;

    }

}/* The row arrow is a real link to the direction's page, so it needs
   its own affordance separate from the row's panel-switching click. */
.dir-row{

    cursor:pointer;

}a.dir-row-arrow{

    text-decoration:none;

    cursor:pointer;

}a.dir-row-arrow:hover{

    background:#167BFF;

    border-color:#167BFF;

    color:#fff;

    box-shadow:0 0 20px rgba(22,123,255,.45);

}.dir-row:focus-visible{

    outline:2px solid #167BFF;

    outline-offset:-2px;

}


/* =========================================================
   DIRECTIONS — ONE-SCREEN FIT
   Section was ~923px tall against ~820px of usable screen.
   Tighter header spacing, a 16:9 preview photo (from 3:2 —
   trims ~8% top and bottom) and a denser preview body bring
   it under one screen; list rows get a little more air so
   both columns end at a similar height.
========================================================= */

@media (min-width: 901px){

    body.home .directions-top{ margin-bottom: 12px !important; }
    body.home .directions-head{ margin-bottom: 26px !important; }

    .dir-row{ padding: 29px 16px 29px 8px !important; }

    .dir-panel-photo{
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
    }

    .dir-panel-body{ padding: 18px 24px 20px !important; }

    .dir-panel-body h3{
        font-size: 21px !important;
        margin: 0 0 10px !important;
    }

    .dir-panel-body p{
        margin: 0 0 14px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .dir-chips{ margin-bottom: 18px !important; gap: 7px !important; }

}

/* Short laptop screens */
@media (min-width: 901px) and (max-height: 820px){

    .dir-row{ padding: 17px 16px 17px 8px !important; }
    .dir-panel-photo{ aspect-ratio: 2.1 / 1 !important; }
    .dir-panel-body p{ display: none !important; }
    body.home .directions-head{ margin-bottom: 24px !important; }

}