/* =========================================================
   SITE INFO — protected contact text, contacts block layout,
   privacy link, cookie notice. Loaded last on every page.
========================================================= */

/* ---------- Protected text ----------
   Text lives in data-attributes and is drawn by ::before, so it
   can't be selected, copied or clicked. The e-mail is split in two
   attributes so the full address never appears in the HTML. */
.ns{
    display:block;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
    cursor:default;
}
.ns::before{ content:attr(data-t); }
.ns-mail::before{ content:attr(data-u) "\40" attr(data-d); }

/* ---------- Contacts block on the homepage ----------
   Wider info card so the address sits on three even lines and the
   title fits one line; the map keeps the remaining width. */
@media (min-width:1101px){
    html body .contacts .contacts-grid{
        grid-template-columns:440px 1fr !important;
        gap:28px !important;
    }
    html body .contacts .contacts-card{
        padding:30px 34px !important;
        justify-content:flex-start !important;
    }
}

.contacts-card h3{ font-size:26px !important; line-height:1.2 !important; }

.contacts-card .contact-link .ns + .ns{ margin-top:2px; }



/* ---------- Footer bottom line: identical on every page ----------
   The bottom row used to be narrower than the columns above it on
   inner pages, so the privacy link never lined up with them. It now
   shares the exact width, padding and columns of .footer-content. */
html body .footer .footer-bottom{
    box-sizing:border-box;
    /* same inner width as the columns above, so the divider line
       never runs wider than the content */
    width:min(1320px, calc(100% - 80px)) !important;
    margin:0 auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    display:grid !important;
    grid-template-columns:1.25fr 0.8fr 0.8fr !important;
    column-gap:70px !important;
    align-items:center;
}

html body .footer .footer-bottom p{ grid-column:1; }

.footer-privacy{
    grid-column:3;
    justify-self:start;
    /* same 35px inset as the slogan column */
    padding-left:35px;
    color:#FFFFFF;
    font-size:14px;
    font-weight:400;
    line-height:1.4;
    letter-spacing:.15px;
    text-decoration:none;
    transition:color .25s ease;
}

.footer-privacy:hover{ color:#167BFF; }

/* narrow desktop: the slogan column shrinks away, so the link
   lines up under "Навигация" instead */
@media (max-width:1199px){
    html body .footer .footer-bottom{
        grid-template-columns:1fr 1fr !important;
        column-gap:40px !important;
    }
    .footer-privacy{ grid-column:2; padding-left:32px; }
}

/* ---------- Cookie notice ---------- */
.geo-cookie{
    position:fixed;
    left:24px;
    bottom:24px;
    z-index:1500;
    display:flex;
    align-items:center;
    gap:24px;
    max-width:760px;
    padding:18px 22px;
    background:rgba(9,16,30,.97);
    border:1px solid rgba(120,185,255,.25);
    border-radius:16px;
    box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 0 30px rgba(22,123,255,.14), 0 20px 50px rgba(0,0,0,.5);
    opacity:0;
    transform:translateY(16px);
    transition:opacity .35s ease, transform .35s ease;
}
.geo-cookie.is-visible{ opacity:1; transform:none; }
.geo-cookie-text{
    margin:0;
    color:#C7D2E0;
    font-size:14px;
    line-height:1.55;
}
.geo-cookie-text a{ color:#4DA3FF; text-decoration:none; }
.geo-cookie-text a:hover{ text-decoration:underline; }
.geo-cookie-actions{ display:flex; gap:10px; flex-shrink:0; }
.geo-cookie-actions button{
    min-width:112px;
    height:42px;
    padding:0 18px;
    border-radius:10px;
    border:1px solid #167BFF;
    color:#fff;
    font:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:background .3s ease;
}
.geo-cookie-accept{ background:#167BFF; }
.geo-cookie-accept:hover{ background:#2D8BFF; }
.geo-cookie-decline{ background:transparent; }
.geo-cookie-decline:hover{ background:rgba(22,123,255,.15); }
@media (max-width:767px){
    .geo-cookie{
        left:12px; right:12px; bottom:12px;
        flex-direction:column; align-items:stretch; gap:14px;
        padding:16px;
    }
    .geo-cookie-text{ font-size:13px; }
    .geo-cookie-actions button{ flex:1; }
}

/* ---------- Contacts intro: equal space text → button → contacts ---------- */
html body .contacts .contacts-top{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}
html body .contacts .contacts-top p{ margin-bottom:36px !important; }
html body .contacts .contacts-button{ margin-top:0 !important; margin-bottom:0 !important; }
html body .contacts .contacts-grid{ margin-top:36px !important; }

@media (max-width:767px){
    html body .contacts .contacts-top p{ margin-bottom:26px !important; }
    html body .contacts .contacts-grid{ margin-top:26px !important; }
}

/* =========================================================
   Photo fades — kill the hard line at the bottom of card photos.
   The overlay now ends fully opaque in exactly the colour that
   sits underneath, so the photo melts into the card instead of
   stopping at a visible edge.
========================================================= */

/* catalog panel: photo → panel body (page #050A14 under a .5 veil ≈ #070C16) */
html body .dir-panel-photo::after{
    background:linear-gradient(180deg,
        rgba(7,12,22,0) 55%,
        rgba(7,12,22,.28) 76%,
        rgba(7,12,22,.72) 92%,
        #070C16 100%) !important;
}

/* project card photo → its own frame (#07111E) */
.project-feature-image{ position:relative; }
.project-feature-image::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:46%;
    pointer-events:none;
    border-radius:inherit;
    /* same soft curve as the catalog photos */
    background:linear-gradient(180deg,
        rgba(7,17,30,0) 0%,
        rgba(7,17,30,.20) 48%,
        rgba(7,17,30,.66) 80%,
        #07111E 100%);
}

/* project thumbnails: same treatment, softer */
.project-thumb button{ position:relative; }
.project-thumb button::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:45%;
    pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(180deg, rgba(5,10,20,0) 0%, rgba(5,10,20,.75) 100%);
}

/* =========================================================
   TABLET FIX (768–1199, touch)
   landing.css pulls every section up by -130px and pays it
   back with ~130px of inner padding. The tablet rules in
   responsive.css zero that padding, so the sections ended up
   overlapping each other by 130px. Here the pull is removed
   and normal section padding restored.
========================================================= */
@media (min-width:768px) and (max-width:1199px) and (hover:none) and (pointer:coarse){

    html body.home #about,
    html body.home #directions,
    html body.home #projects,
    html body.home #contacts{
        margin-top:0 !important;
    }

    html body.home .about,
    html body.home .directions,
    html body.home .projects,
    html body.home .contacts,
    html body .service-page .pump-equipment,
    html body .service-page .service-partners{
        padding:clamp(64px, 7vw, 100px) 0 !important;
        min-height:0 !important;
        height:auto !important;
    }

    /* the contacts block still overlaps the footer on purpose */
    html body.home #contacts{
        margin-bottom:-64px !important;
        padding-bottom:calc(clamp(64px, 7vw, 100px) + 64px) !important;
    }
}

/* ---------- Hero text is not selectable ---------- */
.hero h1,
.hero .hero-text,
.hero .hero-scroll-hint,
.hero .hero-stats,
.hero .hero-subtitle{
    -webkit-user-select:none;
    user-select:none;
}

/* =========================================================
   About block in a narrow desktop window (769–1023px):
   the layout switches to one column, but the photo kept a
   fixed 520px width inside a full-width box, so it filled
   only half of it and the numbers plate hung past its edge.
========================================================= */
@media (min-width:769px) and (max-width:1023px) and (hover:hover) and (pointer:fine){

    html body .about-image{
        height:auto !important;
        aspect-ratio:16 / 9;
        overflow:hidden;
    }

    html body .about-image img{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        aspect-ratio:auto !important;
        object-fit:cover !important;
    }
}

/* =========================================================
   FOOTER — tablet & phone layout
   The desktop footer is a fixed-height 3-column grid with a
   40px transform; on narrow screens that left a sparse block
   with the bottom line spilling out of it. Here it becomes a
   natural-height stack with the navigation kept visible.
========================================================= */
@media (max-width:1199px){

    /* .footer.footer outweighs the body:not(.home) .footer rules
       that pin the footer to a fixed 400px height */
    html body .footer.footer{
        height:auto !important;
        min-height:0 !important;
        overflow:visible !important;
    }

    html body .footer.footer .footer-content{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        column-gap:40px !important;
        row-gap:32px !important;
        align-items:start !important;
        width:100% !important;
        min-height:0 !important;
        /* +64px clears the rounded section that overlaps the footer */
        padding:120px 40px 32px !important;
        transform:none !important;
    }

    /* the decorative slogan is hidden here — it needs the wide column */
    html body .footer.footer .footer-visual{ display:none !important; }

    html body .footer.footer .footer-nav{
        display:flex !important;
        flex-direction:column;
        gap:10px;
        padding-left:32px;
        border-left:1px solid rgba(255,255,255,.12);
    }

    /* the rounded corner of the section above must stay visible */
    html body .footer.footer{ overflow:visible !important; }

    html body .footer.footer .footer-bottom{
        width:calc(100% - 80px) !important;
        margin:0 auto !important;
        padding:20px 0 28px !important;
        column-gap:40px !important;
        grid-template-columns:1fr 1fr !important;
        transform:none !important;
    }

    html body .footer.footer .footer-privacy{
        grid-column:2;
        padding-left:32px;
    }
}

@media (max-width:767px){

    html body .footer.footer .footer-content{
        grid-template-columns:1fr !important;
        row-gap:26px !important;
        padding:104px 22px 24px !important;
    }

    /* navigation is not repeated in the footer on phones —
       the burger menu already carries it */
    html body .footer.footer .footer-nav{ display:none !important; }

    html body .footer.footer .footer-bottom{
        display:flex !important;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
        width:calc(100% - 44px) !important;
        margin:0 auto !important;
        padding:18px 0 26px !important;
    }
    html body .footer.footer .footer-privacy{ padding-left:0; }
}

/* Service page hero on tablets: the tablet rules strip its padding,
   so the title slid under the fixed header. */
@media (min-width:768px) and (max-width:1199px) and (hover:none) and (pointer:coarse){
    html body .hero.hero-service{
        padding:130px 0 70px !important;
        min-height:0 !important;
        height:auto !important;
    }
}

/* =========================================================
   Projects card between 768 and 1199px
   The slide keeps a fixed height while the text column grows
   in the narrower layout, so the photo used to spill out of
   the card. The card now stacks with a free height.
========================================================= */
@media (min-width:768px) and (max-width:1199px){

    html body .projects-slider.projects-slider .swiper-slide.swiper-slide{
        height:auto !important;
        display:block !important;
    }

    html body .project-feature.project-feature{
        grid-template-columns:1fr !important;
        gap:26px !important;
        height:auto !important;
    }

    html body .project-feature-image.project-feature-image{
        height:auto !important;
        aspect-ratio:16 / 9;
    }

    html body .project-feature-image.project-feature-image img{
        height:100% !important;
        object-fit:cover;
    }

    html body .project-feature-info.project-feature-info{
        height:auto !important;
        padding:0 !important;
    }
}


/* ---------- Contacts card: left-aligned on phones ---------- */
@media (max-width:767px){
    html body .contacts-card,
    html body .contacts-card h3,
    html body .contacts-card .contact-item,
    html body .contacts-card .contact-title,
    html body .contacts-card .contact-link{
        text-align:left !important;
        align-items:flex-start !important;
    }
    html body .contacts-card{ align-items:flex-start !important; }
    html body .contacts-card .contact-item{ width:100%; }
}

/* ---------- Service pages: no zoom on the hero photo ---------- */
.hero-service .hero-image:hover img,
html body .hero-service .hero-image:hover img{
    transform:none !important;
}

/* =========================================================
   404 / privacy: short pages stretch <main> so the footer
   stays at the bottom. Let the section itself grow instead,
   otherwise its rounded bottom edge floated mid-screen with
   an empty strip under it.
========================================================= */
html body.page-404 main,
html body.page-legal main{
    display:flex;
    flex-direction:column;
}

html body.page-404 .e404,
html body.page-legal .legal{
    flex:1 0 auto;
}

/* =========================================================
   Project page below 1200px: the info card had the height of
   the photo next to it, so its rows spilled out above and
   below the frame. Stack the two and let both grow.
========================================================= */
@media (max-width:1199px){
    html body .project-main{
        grid-template-columns:1fr !important;
        gap:24px !important;
        align-items:start !important;
    }
    html body .project-image{
        height:auto !important;
        aspect-ratio:3 / 2;
    }
    html body .project-image img{ height:100% !important; object-fit:cover; }
    html body .project-info{ height:auto !important; }
}

/* On wide screens the card must never be shorter than its rows either */
@media (min-width:1200px){
    html body .project-info{ align-self:stretch; overflow:visible; }
}

/* =========================================================
   The rounded bottom of the last section only reads when the
   footer under it is a touch lighter. On some pages the footer
   texture happens to be dark right there, so the curve looked
   like a straight cut. A soft band at the top of the footer
   makes the transition identical everywhere.
========================================================= */
html body .footer{ position:relative; }

html body .footer::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:150px;
    pointer-events:none;
    z-index:0;
    background:linear-gradient(180deg, rgba(26,64,126,.55) 0%, rgba(20,44,88,.28) 45%, rgba(10,20,40,0) 100%);
}

html body .footer .footer-content,
html body .footer .footer-bottom{ position:relative; z-index:1; }

/* a hairline along the rounded bottom edge makes the curve read
   on every page, whatever the footer texture looks like there */
html body .contacts,
html body .project,
html body .service-partners,
html body .e404,
html body .legal{
    border-bottom:1px solid rgba(130,180,255,.16);
}

/* the bottom fade of the project page was a square-cornered layer
   painted over the section's rounded bottom, which flattened it */
html body .project::after{
    border-bottom-left-radius:inherit;
    border-bottom-right-radius:inherit;
}


/* ---------- Section labels: one size everywhere ----------
   "О КОМПАНИИ" was rendered smaller than "НАПРАВЛЕНИЯ" and
   "ПРОЕКТЫ" on tablets and phones. */
html body .about-label span,
html body .directions-label span,
html body .projects-label span{
    font-size:15px;
    font-weight:400;
    color:#F4F7FB;
    letter-spacing:normal;
}

@media (max-width:767px){
    html body .about-label span,
    html body .directions-label span,
    html body .projects-label span{ font-size:14px; }
}

/* =========================================================
   Direction pages: the hero photo was hidden on tablets and
   phones, so those pages had no picture at all. Show it under
   the text, full width of the container.
========================================================= */
@media (max-width:1199px){
    html body .hero.hero-service .hero-image{
        display:block !important;
        position:relative !important;
        width:100% !important;
        height:auto !important;
        max-width:none !important;
        margin:30px 0 0 !important;
        /* the desktop layout pulls the photo up by 70px; here it must
           simply follow the buttons */
        top:0 !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        transform:none !important;
        aspect-ratio:16 / 9;
        border-radius:20px;
        overflow:hidden;
    }

    html body .hero.hero-service .hero-image img{
        display:block !important;
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
    }

    /* the hero is a two-column grid on tablets; stack it so the photo
       spans the full width under the text */
    html body .hero.hero-service .hero-container{
        display:block !important;
    }

    html body .hero.hero-service .hero-content{ width:100% !important; }
}

@media (max-width:767px){
    html body .hero.hero-service .hero-image{
        margin-top:24px !important;
        aspect-ratio:16 / 10;
        border-radius:16px;
    }
}


/* thumbnails sit a little lower under the card */
@media (min-width:768px){
    html body .projects-thumbnails{ margin-top:26px !important; }
}

/* ---------- About: icons instead of 01–04 ---------- */
html body .about-col h4 em.about-ico{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    margin-right:10px;
    flex:0 0 26px;
    color:#167BFF;
}
html body .about-col h4 em.about-ico svg{ display:block; width:22px; height:22px; }
html body .about-col h4{ display:flex; align-items:center; gap:0; }

/* =========================================================
   Touch targets: footer links were only 20px tall, below the
   44px that finger taps need.
========================================================= */
@media (hover:none) and (pointer:coarse){
    html body .footer .footer-nav a,
    html body .footer .footer-privacy,
    html body .geo-cookie-text a{
        display:inline-flex;
        align-items:center;
        min-height:44px;
    }
    html body .footer .footer-nav{ gap:0 !important; }
}

/* =========================================================
   Hero buttons on phones: the 11px type came from the old
   side-by-side layout; the buttons are full width now.
========================================================= */
@media (max-width:767px){
    html body .hero-buttons .btn{
        font-size:15px !important;
        min-height:50px !important;
        padding:14px 20px !important;
        border-radius:12px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }
    html body .hero-buttons{ gap:12px !important; }
}

/* =========================================================
   Photo viewer: arrows only where there is a mouse. On touch
   the photos are changed with a swipe.
========================================================= */
@media (hover:none) and (pointer:coarse){
    html body .pg-lightbox .pg-prev,
    html body .pg-lightbox .pg-next{ display:none !important; }
    html body .pg-lightbox img{ touch-action:pan-y; }
}

/* the viewer arrows match the project slider arrows */
html body .pg-lightbox button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    padding:0;
    font-size:0;
    background:rgba(15,23,40,.5);
    border:1px solid rgba(22,123,255,.45);
    border-radius:12px;
    color:#FFFFFF;
    transition:background .25s ease, border-color .25s ease;
}

html body .pg-lightbox button svg{ display:block; transition:transform .25s ease; }

html body .pg-lightbox button:hover{
    background:#167BFF;
    border-color:#167BFF;
}

html body .pg-lightbox .pg-prev:hover svg{ transform:translateX(-3px); }
html body .pg-lightbox .pg-next:hover svg{ transform:translateX(3px); }

/* =========================================================
   Service tabs: the active tab used to switch to weight 700,
   which widened the words and pushed long names ("Промышленное
   оборудование") onto a second line. Same weight in both states;
   the active one looks bolder through a hairline text shadow,
   which does not change the width of the text.
========================================================= */
html body .pump-nav-item,
html body .pump-nav-item.active{
    font-weight:500 !important;
}
html body .pump-nav-item.active{
    text-shadow:0 0 .6px currentColor, 0 0 .6px currentColor;
}

/* protected e-mail inside running text */
.ns.ns-inline{ display:inline; }

/* =========================================================
   Project pages: the bottom fade sat on the same layer as the
   content and, being later, covered it — on phones the
   "Все проекты" button fell inside it and looked dimmed.
   Content goes above the fade.
========================================================= */
html body .project > .container{ position:relative; z-index:2; }
html body .project::after{ z-index:1; }

/* =========================================================
   Projects slider: the next slide starts flush with the right
   edge, and the glow of its photo frame leaked back into view
   as a vertical stripe. Each slide now clips its own content.
========================================================= */
html body .projects-slider .swiper-slide{ overflow:hidden; }

/* ---------- Customer / Location / Year: tidier block ---------- */
html body .project-feature-info .project-meta{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:0 !important;
    padding:0 !important;
    border-top:1px solid rgba(120,185,255,.14) !important;
    border-bottom:1px solid rgba(120,185,255,.14) !important;
}
html body .project-feature-info .project-meta > div{
    display:flex;
    flex-direction:column;
    align-items:center !important;
    justify-content:flex-start;
    text-align:center !important;
    gap:6px;
    padding:14px 18px !important;
    border-left:1px solid rgba(120,185,255,.12);
}
html body .project-feature-info .project-meta > div:first-child{
    border-left:none;
}
html body .project-feature-info .project-meta span{
    color:#7C8BA1 !important;
    font-size:11px !important;
    font-weight:600 !important;
    letter-spacing:1.6px !important;
    text-transform:uppercase;
}
html body .project-feature-info .project-meta strong{
    color:#FFFFFF !important;
    font-size:15px !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    text-align:center !important;
}
@media (max-width:767px){
    html body .project-feature-info .project-meta > div{ padding:12px 10px !important; }
    html body .project-feature-info .project-meta strong{ font-size:14px !important; }
}

/* ---------- thumbnails: lighter veil ---------- */
html body .project-thumb button::after{
    height:35% !important;
    background:linear-gradient(180deg, rgba(5,10,20,0) 0%, rgba(5,10,20,.35) 100%) !important;
}

/* inactive thumbnails: less veiled (were opacity .58 + brightness .62) */
html body .project-thumb{ opacity:.85 !important; }
html body .project-thumb img{ filter:brightness(.86) saturate(.92) !important; }
html body .project-thumb.active,
html body .project-thumb.active img,
html body .project-thumb button:hover img{ opacity:1 !important; filter:none !important; }

/* =========================================================
   Burger menu open: the header bar becomes one solid colour
   with the menu under it (it was 62% transparent, so page
   text showed through at the top).
========================================================= */
html.responsive-menu-open body .header,
body.responsive-menu-open .header{
    background:#08111F !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    border-bottom-color:rgba(120,185,255,.12) !important;
}
body.responsive-menu-open .responsive-menu{
    background:#08111F !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
}
body.responsive-menu-open .responsive-menu-panel{
    background:#08111F !important;
}


/* =========================================================
   Direction pages: the same ambient backdrop as the project
   pages (project 4 photo, blurred and tinted), instead of the
   dark picture and grid of the old hero.
========================================================= */
html body .hero.hero-service{
    position:relative;
    overflow:hidden;
    background:#050A14 !important;
    background-image:none !important;
}
html body .hero.hero-service .hero-grid,
html body .hero.hero-service .hero-glow{ display:none !important; }

html body .hero.hero-service::before{
    content:"" !important;
    position:absolute !important;
    top:-60px !important;
    left:-8% !important;
    right:-8% !important;
    bottom:auto !important;
    height:calc(100% + 120px) !important;
    z-index:0 !important;
    pointer-events:none;
    background:var(--proj-bg, none) center 30% / cover no-repeat !important;
    filter:none;
    opacity:.92 !important;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.18) 82%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.18) 82%, rgba(0,0,0,0) 100%);
}
html body .hero.hero-service::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    /* an older rule gave this veil height:220px, which left a hard edge */
    height:auto !important;
    width:auto !important;
    z-index:0 !important;
    pointer-events:none;
    opacity:1 !important;
    background:
        radial-gradient(1100px 600px at 70% 0%, rgba(22,123,255,.14), transparent 65%),
        linear-gradient(180deg, rgba(5,10,20,.42) 0%, rgba(5,10,20,.52) 28%, rgba(5,10,20,.70) 55%, rgba(5,10,20,.88) 80%, #050A14 100%) !important;
}
html body .hero.hero-service > .container{ position:relative; z-index:2; }

@media (max-width:767px){
    html body .hero.hero-service::before{ filter:none; }
}


/* ---------- About: text cannot be selected ---------- */
html body #about, html body #about *{
    -webkit-user-select:none !important;
    user-select:none !important;
    -webkit-touch-callout:none;
}

/* ---------- phone number inside the application form ---------- */
.lead-phone{ color:#4DA3FF; white-space:nowrap; -webkit-user-select:none; user-select:none; cursor:default; }
.lead-phone::before{ content:attr(data-t); }

/* ---------- phones and tablets: the header never changes size ---------- */
@media (max-width:1199px){
    html body .header .container,
    html body .header .logo,
    html body .header .logo img,
    html body .responsive-menu-toggle{ transition:none !important; }
}

/* burger menu open: no header border or shadow showing through */
html.responsive-menu-open body .header,
body.responsive-menu-open .header{
    border-bottom-color:transparent !important;
    box-shadow:none !important;
}

/* ---------- directions catalog on phones ---------- */
@media (max-width:767px){
    /* the highlight fades out completely instead of stopping at the edge */
    html body .dir-row.active,
    html body .dir-row:hover{
        background:linear-gradient(90deg, rgba(22,123,255,.16) 0%, rgba(22,123,255,.07) 45%, rgba(22,123,255,0) 88%) !important;
    }
    /* the round button no longer sits flush against the edge */
    html body .dir-row{ padding-right:8px !important; }
}


/* ---------- phones: header content stays put when the page scrolls ----------
   the side padding was 14px at the top and 16px once scrolled, so the
   logo and the menu button jumped 2px sideways */
@media (max-width:767px){
    html body .header .container,
    html body .header.scrolled .container{
        padding-left:16px !important;
        padding-right:16px !important;
    }
}

/* ---------- directions catalog on phones: centred rows, no edge ---------- */
@media (max-width:767px){
    /* hidden accordion tracks added empty space under the text */
    html body .dir-row{
        row-gap:0 !important;
        grid-template-rows:auto !important;
        align-items:center !important;
        padding:20px 16px 20px 4px !important;
    }
    html body .dir-row > :not(.dir-row-num):not(.dir-row-text):not(.dir-row-arrow){ display:none !important; }
    /* the highlight fades out well before the round button */
    html body .dir-row.active,
    html body .dir-row:hover{
        background:linear-gradient(90deg, rgba(22,123,255,.16) 0%, rgba(22,123,255,.06) 38%, rgba(22,123,255,0) 62%) !important;
    }
}

/* phones: the round button's glow fades out inside the row (it used to
   reach the row's right edge and read as a thin blue stripe) */
@media (max-width:767px){
    html body .dir-row.active .dir-row-arrow,
    html body .dir-row:hover .dir-row-arrow{
        box-shadow:0 0 7px rgba(22,123,255,.28) !important;
    }
}

/* ---------- directions catalog on tablets and narrow screens (≤1199px) ----------
   the same two issues as on phones: empty hidden tracks pushed the text up,
   and the highlight / button glow ended at the row edge as a thin stripe */
@media (max-width:1199px){
    html body .dir-row{
        row-gap:0 !important;
        grid-template-rows:auto !important;
        align-items:center !important;
        padding-top:20px !important;
        padding-bottom:20px !important;
        padding-right:16px !important;
    }
    html body .dir-row > :not(.dir-row-num):not(.dir-row-text):not(.dir-row-arrow){ display:none !important; }
    html body .dir-row.active,
    html body .dir-row:hover{
        background:linear-gradient(90deg, rgba(22,123,255,.16) 0%, rgba(22,123,255,.06) 38%, rgba(22,123,255,0) 62%) !important;
    }
    html body .dir-row.active .dir-row-arrow,
    html body .dir-row:hover .dir-row-arrow{
        box-shadow:0 0 7px rgba(22,123,255,.28) !important;
    }
}

/* =========================================================
   Direction page: "Инжиниринг и сервис" block
========================================================= */
.svc-engineering{ position:relative; z-index:1; padding:40px 0 110px; }
.svc-eng-head{ max-width:760px; margin-bottom:34px; }
.svc-eng-label{
    display:flex; align-items:center; gap:12px; margin-bottom:14px;
    color:#FFFFFF; font-size:13px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
}
.svc-eng-label span{ width:34px; height:2px; background:#167BFF; border-radius:2px; }
.svc-eng-head h2{ margin:0 0 14px; font-size:clamp(28px, 2.6vw, 40px); line-height:1.15; }
.svc-eng-head p{ margin:0; color:#AEBACB; font-size:16px; line-height:1.7; }

.svc-eng-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.svc-eng-card{
    padding:28px 26px 26px;
    border-radius:18px;
    background:rgba(12,20,36,.72);
    border:1px solid rgba(120,185,255,.18);
    transition:border-color .3s ease, box-shadow .3s ease;
}
.svc-eng-card:hover{ border-color:rgba(22,123,255,.55); box-shadow:0 0 28px rgba(22,123,255,.16); }
.svc-eng-icon{
    display:flex; align-items:center; justify-content:center;
    width:52px; height:52px; margin-bottom:18px;
    border-radius:14px; border:1px solid rgba(22,123,255,.4);
    background:rgba(22,123,255,.08); color:#4DA3FF;
}
.svc-eng-icon svg{ width:26px; height:26px; }
.svc-eng-card h3{ margin:0 0 10px; font-size:19px; line-height:1.3; }
.svc-eng-card p{ margin:0; color:#AEBACB; font-size:15px; line-height:1.65; }

@media (max-width:1199px){
    .svc-eng-grid{ grid-template-columns:1fr 1fr; }
    .svc-eng-grid .svc-eng-card:first-child{ grid-column:1 / -1; }
}
@media (max-width:767px){
    .svc-engineering{ padding:24px 0 80px; }
    .svc-eng-grid{ grid-template-columns:1fr; gap:14px; }
    .svc-eng-card{ padding:22px 20px; }
}