/* =========================================================
   GEO-ENGINEERING — MOBILE ONLY
   IMPORTANT: all rules below are scoped to <=767px.
   Desktop layout is intentionally untouched.
========================================================= */

@media (max-width: 767px)  and (hover: none) and (pointer: coarse) {

    html {
        scroll-behavior: smooth;
    }

    .hero:not(.hero-service)::before{
        background:
            linear-gradient(
                180deg,
                rgba(2,8,18,.55) 0%,
                rgba(2,8,18,.72) 45%,
                rgba(2,8,18,.88) 100%
            ),
            linear-gradient(
                90deg,
                rgba(2,8,18,.55) 0%,
                rgba(2,8,18,.35) 100%
            );
    }

    body,
    body.home {
        padding-top: 0 !important;
        overflow-x: hidden;
    }

    /* -------------------------
       MOBILE HEADER
    ------------------------- */

    .header {
        height: 64px;
        background: rgba(5,10,20,.78);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .header .container {
        height: 64px !important;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:0 14px;
    }

    .header .logo {
        height:64px;
        padding:0;
        flex:0 0 auto;
    }

    .header .logo img,
    .header.scrolled .logo img {
        height:40px;
        width:auto;
        transform:scaleY(1.08);
    }

    .header .nav,
    .header .right-menu {
        display:none !important;
    }

    /* responsive.js uses these classes for the mobile menu.
       Keep the menu fixed to the viewport so it can never fall into the footer. */
    .responsive-menu-toggle {
        width:40px;
        height:40px;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:5px;
        flex:0 0 40px;
        padding:0;
        margin:0;
        border:1px solid rgba(255,255,255,.12);
        border-radius:10px;
        background:rgba(10,18,32,.75);
        color:#fff;
        cursor:pointer;
        z-index:10002;
        -webkit-tap-highlight-color:transparent;
    }

    .responsive-menu-toggle span {
        display:block;
        width:17px;
        height:2px;
        border-radius:2px;
        background:#fff;
        transition:transform .25s ease, opacity .25s ease;
    }

    .responsive-menu-toggle.is-open span:nth-child(1) {
        transform:translateY(7px) rotate(45deg);
    }

    .responsive-menu-toggle.is-open span:nth-child(2) {
        opacity:0;
    }

    .responsive-menu-toggle.is-open span:nth-child(3) {
        transform:translateY(-7px) rotate(-45deg);
    }

    .responsive-menu {
        position:fixed !important;
        top:64px !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        width:auto !important;
        height:auto !important;
        z-index:9998 !important;
        display:flex !important;
        align-items:stretch;
        justify-content:flex-start;
        padding:0 !important;
        margin:0 !important;
        background:rgba(3,9,19,.97);
        backdrop-filter:blur(22px);
        -webkit-backdrop-filter:blur(22px);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        overflow-y:auto;
        transition:opacity .25s ease, visibility .25s ease;
    }

    .responsive-menu-panel {
        position:relative !important;
        inset:auto !important;
        width:100% !important;
        min-height:100%;
        box-sizing:border-box;
        padding:12px 16px 30px !important;
        margin:0 !important;
        background:linear-gradient(180deg, rgba(8,17,31,.99), rgba(3,9,19,.99));
        border:0;
        box-shadow:none;
        transform:none !important;
        overflow:visible;
    }

    .responsive-menu.is-open {
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .responsive-menu-nav {
        width:100%;
        display:flex;
        flex-direction:column;
    }

    .responsive-menu-nav a {
        display:flex;
        align-items:center;
        min-height:54px;
        padding:0 4px;
        border-bottom:1px solid rgba(255,255,255,.07);
        color:#fff;
        text-decoration:none;
        font-size:15px;
        font-weight:700;
    }

    .responsive-menu-nav a.active {
        color:#167BFF;
    }

    .responsive-menu-contact {
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        min-height:46px;
        margin-top:16px;
        border:1px solid rgba(22,123,255,.72);
        border-radius:10px;
        background:rgba(22,123,255,.06);
        color:#fff;
        text-decoration:none;
        font-size:12px;
        font-weight:700;
    }

    body.responsive-menu-open {
        overflow:hidden !important;
    }

    .mobile-menu-toggle {
        width:40px;
        height:40px;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:5px;
        flex:0 0 40px;
        padding:0;
        border:1px solid rgba(255,255,255,.12);
        border-radius:10px;
        background:rgba(10,18,32,.75);
        cursor:pointer;
        z-index:10002;
    }

    .mobile-menu-toggle span {
        display:block;
        width:17px;
        height:2px;
        border-radius:2px;
        background:#fff;
        transition:transform .25s ease, opacity .25s ease;
    }

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform:translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity:0;
    }

    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform:translateY(-7px) rotate(-45deg);
    }

    .mobile-menu {
        position:fixed;
        top:64px;
        left:0;
        right:0;
        bottom:0;
        z-index:9998;
        display:flex;
        justify-content:flex-start;
        align-items:stretch;
        padding:14px 16px 30px;
        background:rgba(3,9,19,.97);
        backdrop-filter:blur(22px);
        -webkit-backdrop-filter:blur(22px);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity .25s ease, visibility .25s ease;
        overflow-y:auto;
    }

    .mobile-menu.is-open {
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .mobile-menu-nav {
        width:100%;
        display:flex;
        flex-direction:column;
    }

    .mobile-menu-nav a {
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:54px;
        border-bottom:1px solid rgba(255,255,255,.07);
        color:#fff;
        text-decoration:none;
        font-size:15px;
        font-weight:700;
    }

    .mobile-menu-nav a.active {
        color:#167BFF;
    }

    /* -------------------------
       LANGUAGE SWITCHER
    ------------------------- */

    .responsive-menu-meta {
        display:block;
        margin-top:22px;
        color:#AEBACB;
        font-size:12px;
    }

    .language-switcher {
        display:flex;
        align-items:center;
        gap:8px;
    }

    .language-switcher-btn {
        display:flex;
        align-items:center;
        gap:7px;
        min-height:34px;
        padding:5px 9px;
        border:1px solid rgba(255,255,255,.10);
        border-radius:8px;
        background:rgba(255,255,255,.035);
        color:#AEBACB;
        font:700 11px/1 "Manrope",sans-serif;
        cursor:pointer;
    }

    .language-switcher-btn.is-active {
        border-color:rgba(22,123,255,.75);
        background:rgba(22,123,255,.10);
        color:#fff;
    }

    .language-flag {
        position:relative;
        display:inline-block;
        width:18px;
        height:12px;
        flex:0 0 18px;
        overflow:hidden;
        border-radius:1px;
        box-shadow:0 0 0 1px rgba(255,255,255,.18);
    }

    .language-flag.flag-ru {
        background:linear-gradient(to bottom,
            #fff 0 33.333%,
            #1f5fbf 33.333% 66.666%,
            #d52b1e 66.666% 100%);
    }

    .language-flag.flag-en {
        background:
            linear-gradient(90deg, transparent 42%, #fff 42% 58%, transparent 58%),
            linear-gradient(0deg, transparent 40%, #fff 40% 60%, transparent 60%),
            linear-gradient(90deg, transparent 46%, #cf142b 46% 54%, transparent 54%),
            linear-gradient(0deg, transparent 44%, #cf142b 44% 56%, transparent 56%),
            #17408b;
    }

    /* -------------------------
       COMMON MOBILE SECTIONS
    ------------------------- */

    body.home section {
        height:auto !important;
        min-height:0 !important;
        overflow:visible !important;
    }

    .container {
        width:100%;
        max-width:none;
        padding-left:16px;
        padding-right:16px;
    }

    .about > .container,
    .directions > .container,
    .projects > .container,
    .contacts > .container {
        height:auto !important;
        padding-left:16px;
        padding-right:16px;
    }

    /* -------------------------
       HERO
       Keep ONLY the background.
       Remove both the GEO-Inzhiniring image
       and the pump/compressor foreground image.
    ------------------------- */

    .hero {
        min-height:0 !important;
        background-size:cover;
        background-position:center top;
    }

    .hero-container {
        display:block;
        min-height:0;
        padding:88px 16px 0;
    }

    .hero-content {
        top:0 !important;
        width:100%;
    }

    .hero-image {
        display:none !important;
    }

    .hero h1 {
        font-size:34px;
        line-height:1.04;
        letter-spacing:-.6px;
        margin:0 0 18px;
    }

    .hero-text {
        max-width:none;
        font-size:14px;
        line-height:1.55;
        margin-bottom:20px;
    }

    .hero-buttons,
    body.home .hero-buttons {
        display:flex;
        gap:8px;
        width:100%;
        margin:0 0 28px;
        transform:none !important;
    }

    .hero-buttons .btn {
        flex:1 1 0;
        min-width:0;
        padding:13px 8px;
        border-radius:11px;
        text-align:center;
        font-size:11px;
        white-space:nowrap;
    }

    .hero > .container:last-child {
        margin-top:0;
        padding-bottom:30px;
    }

    .hero-stats {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px 8px;
        margin:0;
        padding-top:14px;
    }

    .stat h2 {
        width:auto;
        height:auto;
        font-size:27px;
    }

    .stat p {
        margin-top:4px;
        font-size:9px;
        white-space:normal;
        line-height:1.25;
    }

    /* -------------------------
       ABOUT
       No empty space after the header.
    ------------------------- */

    .about {
        min-height:0 !important;
        padding:0 !important;
        display:block;
    }

    .about > .container {
        padding-top:76px;
        padding-bottom:42px;
    }

    .about-container {
        height:auto !important;
        display:flex;
        flex-direction:column;
        gap:26px;
        padding:0;
        transform:none;
    }

    .about-content {
        max-width:none;
    }

    .about-label {
        gap:12px;
        margin-bottom:24px;
        font-size:12px;
    }

    .about-line {
        width:28px;
    }

    .about h2 {
        font-size:28px;
        line-height:1.08;
        letter-spacing:-.5px;
        margin-bottom:22px;
    }

    .about-text {
        max-width:none;
        margin-bottom:18px;
        font-size:13px;
        line-height:1.6;
    }

    .about-image {
        width:100%;
    }

    .about-image img {
        width:100%;
        height:330px;
        border-radius:18px;
        object-fit:cover;
    }

    /* -------------------------
       DIRECTIONS
       One card at a time.
       The whole card is visible.
    ------------------------- */

    .directions {
        min-height:0 !important;
        height:auto !important;
        padding:0 !important;
        display:block;
    }

    .directions .container {
        height:auto !important;
        padding-top:76px;
        padding-bottom:38px;
        justify-content:flex-start;
    }

    .directions .section-title {
        font-size:28px;
        line-height:1.1;
        margin:0 0 14px;
    }

    .directions .section-subtitle {
        max-width:none;
        margin:0 0 20px;
        font-size:13px;
        line-height:1.55;
    }

    .directions-slider-wrap {
        width:100%;
        margin-top:0;
        padding-bottom:0;
        overflow:visible;
    }

    .directions-navigation {
        position:relative;
        top:auto;
        right:auto;
        justify-content:flex-end;
        gap:8px;
        margin:0 0 12px;
    }

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

    .directions-navigation .swiper-button-prev::after,
    .directions-navigation .swiper-button-next::after {
        font-size:15px;
    }

    .directions-slider {
        width:100%;
        height:380px !important;
        overflow:hidden;
    }

    .directions-slider .swiper-wrapper,
    .directions-slider .swiper-slide {
        height:380px !important;
    }

    .directions-slider .swiper-slide {
        display:flex;
        padding-top:0;
        box-sizing:border-box;
    }

    .directions-slider .direction-card,
    .direction-card {
        width:100%;
        height:380px !important;
        min-height:380px !important;
        padding:22px;
        border-radius:18px;
        overflow:hidden;
    }

    .direction-content {
        height:100%;
        padding-top:0;
        padding-bottom:0;
    }

    .direction-content h3 {
        font-size:21px;
        line-height:1.12;
        min-height:0;
        margin:0 0 12px;
    }

    .direction-content p {
        font-size:12px;
        line-height:1.45;
    }

    .direction-link {
        width:132px;
        height:40px;
        font-size:12px;
        border-radius:10px;
    }

    .directions-progress {
        width:155px;
        height:3px;
        margin:14px auto 0;
    }

    /* -------------------------
       PROJECTS
       Original desktop slider remains untouched.
       Mobile gets its own single-card slider.
    ------------------------- */

    .projects {
        display:block !important;
        height:auto !important;
        min-height:0 !important;
        padding:0 !important;
    }

    .projects .container {
        display:block !important;
        height:auto !important;
        min-height:0;
        padding-top:76px;
        padding-bottom:42px;
        transform:none !important;
    }

    .projects-header {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        margin-bottom:14px;
    }

    .projects .section-title {
        font-size:28px;
        line-height:1.1;
        margin:0;
    }

    .projects-header .projects-navigation {
        display:none !important;
    }

    .projects-slider {
        display:none !important;
    }

    /* -------------------------
       CONTACTS
       Start below the header,
       like directions/projects.
    ------------------------- */

    .contacts {
        height:auto !important;
        min-height:0 !important;
        padding:0 !important;
        display:block;
    }

    .contacts .container {
        height:auto !important;
        padding-top:76px;
        padding-bottom:38px;
        transform:none !important;
    }

    .contacts-top {
        max-width:none;
        margin:0 0 34px;
        text-align:center;
        transform:none !important;
    }

    .contacts-top h2 {
        font-size:28px;
        line-height:1.08;
        margin:0 0 14px;
    }

    .contacts-top p {
        max-width:none;
        margin:0 auto 18px;
        font-size:12px;
        line-height:1.55;
    }

    .contacts-button {
        width:100%;
        height:44px;
        padding:0 14px;
        border-radius:10px;
        font-size:12px;
    }

    .contacts-grid {
        display:flex;
        flex-direction:column;
        gap:10px;
        margin:0;
    }

    .contacts-card {
        border-radius:16px;
        padding:18px;
    }

    .contacts-card h3 {
        margin-bottom:14px;
        font-size:18px;
    }

    .contact-item {
        padding:9px 0;
    }

    .contact-title {
        margin-bottom:5px;
        font-size:9px;
    }

    .contact-link {
        font-size:12px;
        line-height:1.4;
    }

    .contacts-map {
        height:300px;
        min-height:300px;
        border-radius:16px;
    }

    .contacts-map iframe {
        width:100%;
        height:100%;
        min-height:300px;
    }

    .contacts .footer-bottom {
        padding:0 16px;
        font-size:10px;
    }

    .footer nav,
    .footer .mobile-menu-nav,
    .footer .responsive-menu-nav,
    .footer .mobile-menu,
    .footer .responsive-menu {
        display:none !important;
    }

    /* no right-side section numbers on mobile */

}

@media (max-width:380px)  and (hover: none) and (pointer: coarse) {
    .hero h1,
    .about h2,
    .directions .section-title,
    .projects .section-title,
    .contacts-top h2 {
        font-size:26px;
    }

    .hero-buttons {
        flex-direction:column;
    }

    .hero-buttons .btn {
        width:100%;
    }
}

/* =========================================================
   MOBILE DIRECTIONS — FINAL CARD LAYOUT
   One full-height image card, like the reference.
   Desktop/tablet styles are not affected.
========================================================= */
@media (max-width: 767px)  and (hover: none) and (pointer: coarse) {

    .directions-slider,
    .directions-slider .swiper-wrapper,
    .directions-slider .swiper-slide,
    .directions-slider .direction-card {
        height: 410px !important;
        min-height: 410px !important;
    }

    .directions-slider .swiper-slide {
        display: flex !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .directions-slider .direction-card {
        width: 100% !important;
        height: 410px !important;
        min-height: 410px !important;
        padding: 24px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        box-sizing: border-box !important;
    }

    .directions-slider .direction-image,
    .directions-slider .direction-image img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .directions-slider .direction-image img {
        object-fit: cover !important;
        object-position: center center !important;
    }

    .directions-slider .direction-content {
        position: relative !important;
        z-index: 3 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 80px 0 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        box-sizing: border-box !important;
    }

    .directions-slider .direction-content h3 {
        font-size: 22px !important;
        line-height: 1.15 !important;
        min-height: 0 !important;
        margin: 0 0 10px !important;
        display: block !important;
        align-items: initial !important;
    }

    .directions-slider .direction-content p {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    .directions-slider .direction-link {
        width: 132px !important;
        height: 40px !important;
        min-height: 40px !important;
        margin-top: 18px !important;
        flex-shrink: 0 !important;
        font-size: 12px !important;
        border-radius: 10px !important;
    }
}

/* =========================================================
   V12 — CENTER HERO LOGO / MINIMAL HEADER GAP
   Based strictly on v11. Mobile only.
========================================================= */
@media (max-width: 767px)  and (hover: none) and (pointer: coarse) {
    .hero {
        padding-top: 0 !important;
    }

    .hero-container {
        padding-top: 72px !important;
    }
}


/* Tablet drawer close control is intentionally hidden on phones: the header toggle itself becomes the X. */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
    .responsive-menu-close { display: none !important; }
}

/* =========================================================
   GEO — НАВИГАЦИОННЫЕ СТРЕЛКИ В СТИЛЕ ЛОГО
   Финальный override для блока «Основные направления».
   Использует отдельные прозрачные изображения стрелок.
========================================================= */

.directions-navigation .swiper-button-prev,
.directions-navigation .swiper-button-next,
.directions-navigation .swiper-button-prev:hover,
.directions-navigation .swiper-button-next:hover,
.directions-navigation .swiper-button-prev:active,
.directions-navigation .swiper-button-next:active,
.directions-navigation .swiper-button-prev:focus,
.directions-navigation .swiper-button-next:focus {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    box-shadow: none !important;

    color: transparent !important;
    transform: none !important;

    overflow: visible !important;
}

.directions-navigation .swiper-button-prev {
    background-image: url("../images/ui/arrow-prev.png") !important;
}

.directions-navigation .swiper-button-next {
    background-image: url("../images/ui/arrow-next.png") !important;
}

.directions-navigation .swiper-button-prev::after,
.directions-navigation .swiper-button-next::after {
    content: "" !important;
    display: none !important;
}

/* Лёгкая подсветка при наведении — без увеличения и сдвига. */
.directions-navigation .swiper-button-prev:hover,
.directions-navigation .swiper-button-next:hover {
    filter: brightness(1.12) drop-shadow(0 0 12px rgba(22,123,255,.35));
}

/* =========================================================
   GEO — ЕДИНЫЕ НЕОНОВЫЕ СТРЕЛКИ ДЛЯ НАПРАВЛЕНИЙ И ПРОЕКТОВ
   Default = спокойное свечение
   Hover   = яркая подсветка
   Active  = визуальное нажатие
========================================================= */

.directions-navigation .swiper-button-prev,
.directions-navigation .swiper-button-next,
.projects-navigation .swiper-button-prev,
.projects-navigation .swiper-button-next,
.directions-navigation .swiper-button-prev:hover,
.directions-navigation .swiper-button-next:hover,
.projects-navigation .swiper-button-prev:hover,
.projects-navigation .swiper-button-next:hover,
.directions-navigation .swiper-button-prev:active,
.directions-navigation .swiper-button-next:active,
.projects-navigation .swiper-button-prev:active,
.projects-navigation .swiper-button-next:active,
.directions-navigation .swiper-button-prev:focus,
.directions-navigation .swiper-button-next:focus,
.projects-navigation .swiper-button-prev:focus,
.projects-navigation .swiper-button-next:focus {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    box-shadow: none !important;
    color: transparent !important;

    transform: none !important;
    transition: filter .22s ease, transform .12s ease !important;
    overflow: visible !important;
}

.directions-navigation .swiper-button-prev,
.projects-navigation .swiper-button-prev {
    background-image: url("../images/ui/arrow-prev.png") !important;
}

.directions-navigation .swiper-button-next,
.projects-navigation .swiper-button-next {
    background-image: url("../images/ui/arrow-next.png") !important;
}

.directions-navigation .swiper-button-prev::after,
.directions-navigation .swiper-button-next::after,
.projects-navigation .swiper-button-prev::after,
.projects-navigation .swiper-button-next::after {
    content: "" !important;
    display: none !important;
}

/* Обычное состояние */
.directions-navigation .swiper-button-prev,
.directions-navigation .swiper-button-next,
.projects-navigation .swiper-button-prev,
.projects-navigation .swiper-button-next {
    opacity: .90;
    filter: drop-shadow(0 0 7px rgba(22,123,255,.18));
}

/* Наведение — яркое свечение, как в выбранном макете */
.directions-navigation .swiper-button-prev:hover,
.directions-navigation .swiper-button-next:hover,
.projects-navigation .swiper-button-prev:hover,
.projects-navigation .swiper-button-next:hover {
    opacity: 1;
    filter:
        brightness(1.22)
        drop-shadow(0 0 7px rgba(22,123,255,.55))
        drop-shadow(0 0 18px rgba(22,123,255,.42));
    cursor: pointer;
}

/* Нажатие — заметный, но аккуратный эффект */
.directions-navigation .swiper-button-prev:active,
.directions-navigation .swiper-button-next:active,
.projects-navigation .swiper-button-prev:active,
.projects-navigation .swiper-button-next:active {
    opacity: 1;
    filter:
        brightness(.92)
        drop-shadow(0 0 8px rgba(22,123,255,.70));
    transform: scale(.90) !important;
    transition: filter .08s ease, transform .08s ease !important;
}


/* =========================================================
   MOBILE REFINEMENTS
   Loaded after the older mobile rules, so this block is the
   single place that defines the current phone layout.
========================================================= */

@media (max-width: 767px){

    /* ---------- HERO ---------- */

    body.home .hero-container{
        padding: 104px 20px 0 !important;
    }

    body.home .hero h1{
        font-size: clamp(30px, 8.2vw, 38px) !important;
        line-height: 1.14 !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 18px !important;
    }

    body.home .hero-text{
        font-size: 15.5px !important;
        line-height: 1.6 !important;
        margin-bottom: 26px !important;
    }

    body.home .hero-buttons{
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100%;
    }

    body.home .hero-buttons .btn{
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 15px 20px !important;
    }

    /* The scroll hint competes with the buttons on short screens. */
    body.home .hero-scroll-hint{
        display: none !important;
    }

    /* ---------- SECTION RHYTHM ---------- */

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

    body.home .about,
    body.home .directions,
    body.home .projects,
    body.home .contacts{
        padding: 64px 0 !important;
    }

    body.home .about > .container,
    body.home .directions > .container,
    body.home .projects > .container,
    body.home .contacts > .container{
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* ---------- SECTION HEADINGS ---------- */

    body.home .section-title,
    body.home .about h2,
    body.home .directions .section-title,
    body.home .projects .section-title{
        font-size: clamp(26px, 7.4vw, 32px) !important;
        line-height: 1.16 !important;
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
    }

    body.home .projects-intro,
    body.home .directions-intro{
        font-size: 15px !important;
        line-height: 1.6 !important;
        text-align: left !important;
        max-width: none !important;
        margin: 14px 0 0 !important;
        padding: 0 !important;
    }

    body.home .directions-head{
        display: block !important;
        margin-bottom: 30px !important;
    }

    /* ---------- ABOUT ---------- */

    body.home .about-container{
        display: flex !important;
        flex-direction: column !important;
        gap: 26px !important;
    }

    .about-image{
        width: 100%;
        display: block !important;
    }

    .about-image img{
        width: 100% !important;
        border-radius: 16px;
    }

    .about-plate{
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 14px 10px;
        border-radius: 12px;
    }

    .about-plate-item b{ font-size: 19px; }
    .about-plate-item span{ font-size: 10.5px; }

    .about-cols{
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        margin-top: 30px !important;
        padding-top: 26px !important;
    }

    /* ---------- DIRECTIONS ---------- */

    .directions-split{
        display: flex !important;
        flex-direction: column !important;
        gap: 22px !important;
    }

    /* List first on phones: the visitor picks, then sees the panel. */
    .directions-preview{ order: 2 !important; }
    .directions-rows{ order: 1 !important; }

    .dir-row{
        grid-template-columns: 34px 1fr 32px !important;
        gap: 12px !important;
        padding: 18px 4px !important;
    }

    .dir-row-title{ font-size: 16.5px !important; }
    .dir-row-sub{ font-size: 12.5px !important; }

    .dir-row-arrow{
        width: 32px !important;
        height: 32px !important;
    }

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

    .dir-panel-body{ padding: 20px 18px 22px !important; }
    .dir-panel-body h3{ font-size: 19px !important; }
    .dir-panel-body p{ font-size: 14px !important; }

    .dir-chip{ font-size: 12px !important; padding: 5px 11px !important; }

    .dir-panel-cta{
        width: 100%;
        justify-content: center;
        padding: 14px 18px !important;
    }

    /* ---------- PROJECTS ---------- */

    /* The standard slider works on touch — show it instead of the
       removed mobile duplicate that left this section empty. */
    body.home .projects-slider,
    .projects .projects-slider{
        display: block !important;
        overflow: hidden;
        padding-bottom: 8px;
    }

    .projects-slider .swiper-slide{ height: auto !important; }

    .project-feature{
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
    }

    .project-feature-image{
        width: 100% !important;
        height: 230px !important;
        border-radius: 14px;
        overflow: hidden;
    }

    .project-feature-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .project-feature-info h3{ font-size: 23px !important; line-height: 1.2 !important; }
    .project-feature-lead{ font-size: 14.5px !important; }
    .project-feature-description{ font-size: 14px !important; }

    .project-feature-button{
        width: 100% !important;
        justify-content: center;
    }

    .projects-thumbnails{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .projects-thumbnails::-webkit-scrollbar{ display: none; }

    /* ---------- CONTACTS ---------- */

    .contacts-button{
        width: 100%;
        justify-content: center;
    }

    /* ---------- FOOTER ---------- */

    .footer-bottom p{
        font-size: 12.5px !important;
        text-align: left;
    }

    /* ---------- TAP TARGETS ---------- */

    .dir-row,
    .dir-row-arrow,
    .btn,
    .contacts-button,
    .project-feature-button{
        -webkit-tap-highlight-color: rgba(22,123,255,.18);
    }

}


@media (max-width: 767px){

    /* About: lead with the section label and heading, then the photo.
       Image-first left the block with no visible title on entry. */
    body.home .about-content{ order: 1 !important; }
    body.home .about-image{ order: 2 !important; }

    body.home .about-label{
        margin-bottom: 18px !important;
    }

    body.home .about h2{
        margin-bottom: 18px !important;
    }

    body.home .about-container{ display: flex !important; }

}


@media (max-width: 767px){

    /* ---------- SERVICE PAGES ---------- */

    /* "Что поставляем": the row layout overflowed and clipped labels,
       so on phones it becomes a plain vertical list. */
    .pump-layout{
        display: flex !important;
        flex-direction: column !important;
        gap: 22px !important;
    }

    .pump-navigation{
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .pump-nav-item{
        width: 100% !important;
        gap: 14px !important;
        padding: 16px 14px !important;
        font-size: 14.5px !important;
        white-space: normal !important;
    }

    .pump-nav-item span{
        min-width: 22px !important;
        font-size: 12px !important;
    }

    .pump-content{ width: 100% !important; }

    .pump-panel-top{
        gap: 14px !important;
    }

    .pump-panel h3{ font-size: 20px !important; line-height: 1.2 !important; }

    .pump-list{
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .pump-description{ font-size: 14px !important; }

    .hero-service .hero-container{
        padding-top: 104px !important;
    }

    .hero-service h1{
        font-size: clamp(27px, 7.6vw, 34px) !important;
        line-height: 1.16 !important;
    }

    .hero-service .hero-image{
        width: 100% !important;
        height: 220px !important;
    }

    .hero-service .hero-buttons{
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .hero-service .hero-buttons .btn{
        width: 100%;
        justify-content: center;
    }

    /* ---------- PROJECT PAGES ---------- */

    .project{
        padding-top: 104px !important;
    }

    .project-main{
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .project-image{
        height: 240px !important;
        width: 100% !important;
    }

    .project h1{
        font-size: clamp(25px, 7.2vw, 31px) !important;
        line-height: 1.18 !important;
    }

    .project-info{ width: 100% !important; }

    .project-content{
        display: flex !important;
        flex-direction: column !important;
        gap: 26px !important;
    }

}