/* =========================================================
   GEO-ENGINEERING — RESPONSIVE LAYOUT
   ---------------------------------------------------------
   IMPORTANT:
   - Desktop (1200px and above) is intentionally untouched.
   - This file is loaded after the desktop styles.
   - Tablet/iPad: 768px–1199px
   - Mobile: 0–767px
   ========================================================= */

/* =========================
   TABLET / IPAD
========================= */
@media (min-width: 768px) and (max-width: 1199px) and (hover: none) and (pointer: coarse) {

    html {
        scroll-behavior: smooth;
    }

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

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

    .container {
        width: 100%;
        max-width: 1200px;
        padding-left: 28px;
        padding-right: 28px;
        margin-left: auto;
        margin-right: auto;
    }

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

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

    .header .container,
    .header.scrolled .container {
        height: 72px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 28px;
    }

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

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

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

    /* injected by responsive.js */
    .responsive-menu-toggle {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 12px;
        background: rgba(10,18,32,.72);
        color: #fff;
        cursor: pointer;
        z-index: 10002;
        -webkit-tap-highlight-color: transparent;
    }

    .responsive-menu-toggle span {
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: #fff;
        transition: transform .25s ease, opacity .2s 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;
        inset: 0;
        z-index: 9998;
        visibility: hidden;
        pointer-events: none;
        background: rgba(0,0,0,.52);
        opacity: 0;
        transition: opacity .25s ease, visibility .25s ease;
    }

    .responsive-menu-panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(440px, 82vw);
        padding: 96px 28px 30px;
        overflow-y: auto;
        background:
            linear-gradient(180deg, rgba(8,17,31,.99), rgba(3,9,19,.99));
        border-left: 1px solid rgba(255,255,255,.08);
        box-shadow: -25px 0 70px rgba(0,0,0,.42);
        transform: translateX(100%);
        transition: transform .3s cubic-bezier(.22,1,.36,1);
    }

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

    .responsive-menu.is-open .responsive-menu-panel {
        transform: translateX(0);
    }

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

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

    .responsive-menu-nav a:hover,
    .responsive-menu-nav a.active {
        color: #167BFF;
        padding-left: 8px;
    }

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

    .responsive-menu-contact:hover {
        background: #167BFF;
        border-color: #167BFF;
    }

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

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

    .language-switcher-btn {
        display:flex;
        align-items:center;
        gap:8px;
        min-height:38px;
        padding:6px 11px;
        border:1px solid rgba(255,255,255,.10);
        border-radius:9px;
        background:rgba(255,255,255,.035);
        color:#AEBACB;
        font:700 12px/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:22px;
        height:15px;
        flex:0 0 22px;
        overflow:hidden;
        border-radius:2px;
        box-shadow:0 0 0 1px rgba(255,255,255,.16);
    }

    .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;
    }

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


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

    /* iPad/tablet: keep the hero background and text, remove the
       foreground pump/compressor artwork and company-logo artwork. */
    .hero-container {
        display:block;
        padding-top:82px;
        padding-bottom:30px;
    }

    .hero-content {
        width:100%;
        max-width:760px;
    }

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

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

    .hero-container {
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        gap: 20px;
        padding-top: 82px;
        padding-bottom: 30px;
    }

    .hero-content {
        top: 0;
        z-index: 3;
    }

    .hero h1 {
        max-width: 560px;
        font-size: clamp(40px, 4.6vw, 52px);
        line-height: 1.02;
        letter-spacing: -.8px;
        margin-bottom: 18px;
    }

    .hero-text {
        max-width: 520px;
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 24px;
    }

    .hero-buttons,
    body.home .hero-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 24px;
        transform: none !important;
    }

    .hero-buttons .btn {
        padding: 14px 22px;
        font-size: 14px;
        border-radius: 11px;
    }

    .hero-image {
        width: 100%;
        min-width: 0;
        transform: none !important;
        justify-content: center;
    }

    .hero-image img {
        width: min(700px, 125%);
        max-width: none;
        transform: translate(18px, 0) !important;
    }

    .hero-stats {
        margin-top: 0;
        padding: 20px 0 28px;
        gap: 14px;
    }

    .stat h2 {
        width: auto;
        height: auto;
        font-size: clamp(34px, 4vw, 46px);
    }

    .stat p {
        font-size: 12px;
        white-space: normal;
        line-height: 1.3;
    }

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

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

    .about > .container {
        height: auto !important;
        padding-top: 78px;
        padding-bottom: 72px;
    }

    .about-container {
        height: auto !important;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr);
        gap: 42px;
        align-items: center;
        padding: 0;
        transform: none;
    }

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

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

    .about-line {
        width: 34px;
    }

    .about h2 {
        font-size: clamp(34px, 4.2vw, 46px);
        line-height: 1.08;
        margin-bottom: 20px;
    }

    .about-text {
        max-width: 680px;
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 14px;
    }

    .about-image {
        width: 100%;
        justify-content: flex-end;
    }

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

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

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

    .directions .container {
        height: auto !important;
        padding-top: 78px;
        padding-bottom: 72px;
    }

    .directions .section-title {
        font-size: clamp(36px, 4.4vw, 48px);
        line-height: 1.08;
        margin-bottom: 12px;
    }

    .directions .section-subtitle {
        max-width: 900px;
        margin: 0 0 46px;
        font-size: 15px;
        line-height: 1.65;
    }

    .directions-slider-wrap {
        margin-top: 0;
        overflow: visible;
    }

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

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

    .directions-slider {
        height: 400px !important;
        overflow: hidden;
    }

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

    .direction-card {
        min-height: 0 !important;
        height: 400px !important;
        padding: 26px;
        border-radius: 20px;
    }

    .direction-content {
        padding-top: 60px;
    }

    .direction-content h3 {
        font-size: 23px;
        line-height: 1.15;
        min-height: 0;
        margin-bottom: 14px;
    }

    .direction-content p {
        font-size: 13px;
        line-height: 1.55;
    }

    .direction-link {
        width: 150px;
        height: 44px;
        font-size: 13px;
    }

    .directions-progress {
        margin-top: 18px;
    }

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

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

    .projects .container {
        display: block !important;
        height: auto !important;
        padding-top: 78px;
        padding-bottom: 72px;
        transform: none !important;
    }

    .projects-header {
        margin-bottom: 22px;
    }

    .projects .section-title {
        font-size: clamp(36px, 4.4vw, 48px);
        line-height: 1.08;
    }

    .projects-navigation {
        display: flex !important;
        gap: 10px;
    }

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

    .projects-slider {
        padding-bottom: 44px;
        overflow: hidden;
    }

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

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

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

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

    .contacts-top {
        max-width: 820px;
        margin: 0 auto 34px;
        transform: none !important;
    }

    .contacts-top h2 {
        font-size: clamp(36px, 4.4vw, 48px);
        line-height: 1.08;
        margin-bottom: 12px;
    }

    .contacts-top p {
        max-width: 720px;
        font-size: 15px;
        line-height: 1.6;
    }

    .contacts-button {
        min-height: 48px;
        padding: 0 24px;
        font-size: 14px;
    }

    .contacts-grid {
        grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
        gap: 18px;
        margin-bottom: 24px;
    }

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

    .contacts-card h3 {
        margin-bottom: 16px;
        font-size: 23px;
    }

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

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

    .contact-link {
        font-size: 14px;
    }

    .contacts-map {
        min-height: 390px;
        border-radius: 20px;
    }

    .contacts-map iframe {
        min-height: 390px;
        height: 390px;
    }

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

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

    .hero.hero-service {
        min-height: 0 !important;
        padding: 72px 0 0;
        background-position: center top;
    }

    .hero.hero-service .hero-container {
        display: grid;
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        gap: 24px;
        align-items: center;
        padding-top: 68px;
        padding-bottom: 54px;
    }

    .hero-service h1 {
        max-width: 600px;
        font-size: clamp(40px, 4.8vw, 54px);
        line-height: 1.05;
        margin-bottom: 18px;
    }

    .hero-service .hero-text {
        max-width: 560px;
        font-size: 15px;
        line-height: 1.65;
        margin-bottom: 24px;
    }

    .hero-service .hero-buttons {
        flex-wrap: wrap;
        gap: 10px;
    }

    .hero-service .btn {
        padding: 14px 20px;
        font-size: 14px;
    }

    .hero-service .hero-image {
        height: 360px;
        border-radius: 20px;
    }

    .service-products {
        padding: 56px 0 72px;
    }

    .service-section-header {
        margin-bottom: 22px;
    }

    .service-section-header h2 {
        font-size: 34px;
    }

    .service-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .service-product-card {
        min-height: 0;
        border-radius: 16px;
    }

    .service-product-image {
        height: 210px;
    }

    .service-product-content {
        padding: 18px;
    }

    .service-product-content h3 {
        font-size: 19px;
        line-height: 1.2;
    }

    .service-product-content p {
        font-size: 13px;
        line-height: 1.55;
    }

    .service-partners {
        padding: 54px 0 72px;
    }

    .service-partners-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .service-partner {
        min-height: 150px;
        border-radius: 16px;
    }

    /* ---------- PROJECT DETAIL ---------- */

    .project {
        margin-top: 0;
        padding: 118px 0 72px;
        background-size: auto 760px;
        background-position: center top;
    }

    .project h1 {
        max-width: 850px;
        font-size: clamp(38px, 4.7vw, 52px);
        line-height: 1.08;
        margin-bottom: 32px;
    }

    .project-main {
        grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
        gap: 18px;
        margin-bottom: 52px;
    }

    .project-image,
    .project-info {
        height: 400px;
    }

    .project-image {
        border-radius: 20px;
    }

    .project-info {
        border-radius: 20px;
        padding: 28px;
    }

    .info-row {
        gap: 16px;
        padding: 14px 0;
    }

    .info-row span {
        font-size: 13px;
    }

    .info-row strong {
        font-size: 14px;
    }

    .project-content {
        grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
        gap: 32px;
        margin-top: 0;
    }

    .project-about h2,
    .project-work h2 {
        font-size: 34px;
        margin-bottom: 20px;
    }

    .project-about p {
        font-size: 15px;
        line-height: 1.75;
        margin-bottom: 20px;
    }

    .project-work li {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 13px;
    }

    .footer {
        margin-top: 0;
    }

    .footer-bottom {
        padding: 0 28px;
    }




    /* HERO: center the complete content on iPad Mini / Air / Pro. */
    .hero-content {
        max-width: 820px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .hero h1,
    .hero-text {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero h1 {
        max-width: 760px !important;
    }

    .hero-text {
        max-width: 680px !important;
    }

    .hero-buttons,
    body.home .hero-buttons {
        justify-content: center !important;
    }

    /* Direction cards: heading + text + button all sit together at the bottom. */
    .directions-slider .direction-card {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
    }

    .directions-slider .direction-content {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
    }

    .directions-slider .direction-content h3 {
        margin: 0 0 10px !important;
        min-height: 0 !important;
    }

    .directions-slider .direction-content p {
        margin: 0 !important;
    }

    .directions-slider .direction-link {
        margin-top: 16px !important;
    }

    /* Real flag assets: stable on every iPad/browser, including English. */
    .responsive-menu-meta .language-flag.flag-ru,
    .responsive-menu-meta .language-flag.flag-en {
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 100% 100% !important;
    }

    .responsive-menu-meta .language-flag.flag-ru {
        background-image: url("../icons/flag-ru.svg") !important;
    }

    .responsive-menu-meta .language-flag.flag-en {
        background-image: url("../icons/flag-gb.svg") !important;
    }

    /* Footer is inside the contacts section; give it a full tablet-width row. */
    .footer,
    .footer-bottom {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    .footer-bottom {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }



    body:not(.home) .project + .footer {
        width: 100% !important;
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        margin-top: 0 !important;
        padding: 0 !important;
        flex: none !important;
    }

    body:not(.home) .project + .footer .footer-bottom {
        width: 100% !important;
        height: 64px !important;
        min-height: 64px !important;
        padding: 0 28px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }




    /* Projects: one card visible at a time, not stacked vertically. */
    .projects .projects-navigation {
        display: none !important;
    }

    /* The slider is shown on tablets as well: the mobile duplicate that
       used to replace it was never built (its markup no longer exists),
       which left this section empty. */
    .projects .projects-slider {
        display: block !important;
    }

    /* Contacts map: fill the complete available tablet width/height. */
    .contacts-map {
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .contacts-map iframe {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 390px !important;
        min-height: 390px !important;
        border: 0 !important;
    }

    /* Project detail pages: natural content height, then a normal 64px footer.
       Prevent the 100vh section rule from creating a huge empty footer area. */
    body:not(.home) .project {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body:not(.home) .project + .footer,
    body:not(.home) .project + .footer .footer-bottom {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        flex: 0 0 64px !important;
    }

    /* Header drawer: center every text label. */
    .responsive-menu-nav {
        width: 100% !important;
        align-items: stretch !important;
    }

    .responsive-menu-nav a,
    .responsive-menu-nav a:hover,
    .responsive-menu-nav a.active {
        justify-content: center !important;
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .responsive-menu-meta {
        justify-content: center !important;
        text-align: center !important;
    }

    .responsive-menu-meta .language-switcher {
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .responsive-menu-contact {
        text-align: center !important;
        justify-content: center !important;
    }



    body:not(.home) {
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body:not(.home) main {
        flex: 1 0 auto !important;
    }

    body:not(.home) .project + .footer {
        margin-top: auto !important;
    }



    .hero {
        padding-top: 0 !important;
    }

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



    .directions-navigation {
        z-index: 50 !important;
        pointer-events: auto !important;
    }

    .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 {
        transform: none !important;
        box-shadow: none !important;
        background: #121C2E !important;
        color: #167BFF !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        cursor: pointer !important;
    }



    .directions-navigation .swiper-button-prev,
    .directions-navigation .swiper-button-next {
        transition:
            background .18s ease,
            color .18s ease,
            border-color .18s ease,
            box-shadow .18s ease,
            transform .18s ease !important;
    }

    .directions-navigation .swiper-button-prev.is-tapped,
    .directions-navigation .swiper-button-next.is-tapped {
        background: #167BFF !important;
        color: #fff !important;
        border-color: rgba(110, 190, 255, .9) !important;
        transform: translateY(-2px) scale(1.04) !important;
        box-shadow: 0 10px 28px rgba(22,123,255,.42) !important;
    }



    .responsive-menu-panel {
        padding-top: 96px !important;
    }

    .responsive-menu-close {
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 11px !important;
        background: rgba(10,18,32,.82) !important;
        box-shadow: 0 0 18px rgba(22,123,255,.08) !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        z-index: 10005 !important;
    }

    .responsive-menu-close span {
        position: absolute !important;
        width: 20px !important;
        height: 2px !important;
        border-radius: 2px !important;
        background: #fff !important;
        box-shadow: 0 0 8px rgba(22,123,255,.35) !important;
    }

    .responsive-menu-close span:first-child { transform: rotate(45deg) !important; }
    .responsive-menu-close span:last-child { transform: rotate(-45deg) !important; }

    .responsive-menu-close:active {
        transform: scale(.94) !important;
        border-color: rgba(22,123,255,.9) !important;
        box-shadow: 0 0 24px rgba(22,123,255,.32) !important;
    }
}

/* =========================
   SMALL TABLET
========================= */
@media (min-width: 768px) and (max-width: 899px) and (hover: none) and (pointer: coarse) {

    .container {
        padding-left: 22px;
        padding-right: 22px;
    }

    .hero-container,
    .hero.hero-service .hero-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding-top: 54px;
    }

    .hero-content {
        top: 0;
    }

    .hero h1,
    .hero-service h1 {
        font-size: 42px;
    }

    .hero-image,
    .hero-service .hero-image {
        width: 100%;
        height: 320px;
        max-width: 620px;
        margin: 0 auto;
    }

    .hero-stats {
        padding-top: 16px;
    }

    .about-container {
        grid-template-columns: 1fr;
    }

    .about-image {
        justify-content: flex-start;
    }

    .about-image img {
        height: 420px;
        max-width: 620px;
    }

    .contacts-grid,
    .project-main,
    .project-content {
        grid-template-columns: 1fr;
    }

    .contacts-map {
        min-height: 360px;
    }

    .contacts-map iframe {
        min-height: 360px;
        height: 360px;
    }

    .project-image,
    .project-info {
        height: 380px;
    }

    .service-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-partners-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }



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

    .about-content,
    .about-image {
        width: 100% !important;
        max-width: none !important;
    }

    .about-image {
        justify-content: stretch !important;
    }

    .about-image img {
        width: 100% !important;
        max-width: none !important;
        height: 420px !important;
        object-fit: cover !important;
    }



    .contacts-card,
    .contacts-card h3,
    .contacts-card .contact-item,
    .contacts-card .contact-title,
    .contacts-card .contact-link {
        text-align: center !important;
    }

    .contacts-card .contact-link {
        display: block;
    }
}

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

    html {
        scroll-behavior: smooth;
    }

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

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

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

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

    .header {
        height: 64px;
        background: rgba(5,10,20,.88);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .header .container,
    .header.scrolled .container {
        height: 64px !important;
        padding: 0 16px;
    }

    .header .logo,
    .header.scrolled .logo {
        height: 64px;
    }

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

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

    .responsive-menu-toggle {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 10px;
    }

    .responsive-menu-panel {
        width: min(390px, 88vw);
        padding: 82px 20px 24px;
    }

    .responsive-menu-nav a {
        min-height: 54px;
        font-size: 16px;
    }

    .responsive-menu-meta {
        margin-top: 22px;
        font-size: 13px;
    }

    .responsive-menu-contact {
        min-height: 48px;
        font-size: 14px;
    }

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

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

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

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

    .hero h1 {
        font-size: clamp(32px, 9vw, 40px);
        line-height: 1.03;
        letter-spacing: -.6px;
        margin-bottom: 16px;
    }

    .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 26px;
        transform: none !important;
    }

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

    .hero-image {
        width: 100%;
        margin-top: 0;
        transform: none !important;
    }

    .hero-image img {
        width: 115%;
        max-width: none;
        transform: translate(8px, 0) !important;
    }

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

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

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

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

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

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

    .about > .container {
        height: auto !important;
        padding-top: 70px;
        padding-bottom: 48px;
    }

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

    .about-label {
        gap: 10px;
        margin-bottom: 20px;
        font-size: 11px;
    }

    .about-line {
        width: 28px;
    }

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

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

    .about-image {
        width: 100%;
    }

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

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

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

    .directions .container {
        height: auto !important;
        padding-top: 70px;
        padding-bottom: 48px;
    }

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

    .directions .section-subtitle {
        max-width: none;
        margin: 0 0 18px;
        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 10px;
    }

    .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: 14px;
    }

    .directions-slider {
        height: 360px !important;
        overflow: hidden;
    }

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

    .direction-card {
        width: 100%;
        height: 360px !important;
        min-height: 360px !important;
        padding: 20px;
        border-radius: 17px;
    }

    .direction-content {
        height: 100%;
        padding-top: 52px;
    }

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

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

    .direction-link {
        width: 128px;
        height: 38px;
        font-size: 11px;
        border-radius: 9px;
    }

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

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

    .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: 70px;
        padding-bottom: 48px;
        transform: none !important;
    }

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

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

    .projects-navigation {
        display: flex !important;
        gap: 7px;
        flex: 0 0 auto;
    }

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

    .projects-slider {
        padding-bottom: 34px;
        overflow: hidden;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .hero.hero-service {
        min-height: 0 !important;
        padding: 64px 0 0;
    }

    .hero.hero-service .hero-container {
        display: block;
        padding-top: 52px;
        padding-bottom: 38px;
    }

    .hero-service h1 {
        max-width: none;
        font-size: 34px;
        line-height: 1.04;
        margin-bottom: 16px;
    }

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

    .hero-service .hero-buttons {
        display: flex;
        gap: 8px;
        margin-bottom: 22px;
    }

    .hero-service .btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 13px 8px;
        font-size: 11px;
    }

    .hero-service .hero-image {
        height: 280px;
        border-radius: 17px;
    }

    .service-products {
        padding: 44px 0 54px;
    }

    .service-section-header {
        margin-bottom: 17px;
    }

    .service-section-header h2 {
        font-size: 28px;
        line-height: 1.1;
    }

    .service-products-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .service-product-card {
        min-height: 0;
        border-radius: 15px;
    }

    .service-product-image {
        height: 190px;
    }

    .service-product-content {
        padding: 16px;
    }

    .service-product-content h3 {
        font-size: 18px;
        line-height: 1.2;
    }

    .service-product-content p {
        font-size: 12px;
        line-height: 1.5;
    }

    .service-partners {
        padding: 44px 0 54px;
    }

    .service-partners-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .service-partner {
        min-height: 110px;
        border-radius: 14px;
    }

    /* ---------- PROJECT DETAIL ---------- */

    .project {
        margin-top: 0;
        padding: 96px 0 48px;
        background-size: auto 560px;
        background-position: center top;
    }

    .project h1 {
        font-size: 31px;
        line-height: 1.08;
        margin-bottom: 24px;
    }

    .project-main {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 38px;
    }

    .project-image {
        width: 100%;
        height: 250px;
        border-radius: 17px;
    }

    .project-info {
        width: 100%;
        height: auto;
        min-height: 0;
        border-radius: 17px;
        padding: 18px;
        display: flex;
        justify-content: center;
    }

    .info-row {
        gap: 12px;
        padding: 11px 0;
    }

    .info-row span {
        font-size: 11px;
        white-space: normal;
    }

    .info-row strong {
        font-size: 12px;
        line-height: 1.5;
    }

    .project-content {
        display: flex;
        flex-direction: column;
        gap: 30px;
        margin-top: 0;
    }

    .project-about h2,
    .project-work h2 {
        font-size: 27px;
        margin-bottom: 16px;
    }

    .project-about p {
        font-size: 13px;
        line-height: 1.65;
        margin-bottom: 17px;
    }

    .project-work li {
        padding-left: 26px;
        font-size: 13px;
        line-height: 1.55;
        margin-bottom: 11px;
    }

    .project-subtitle {
        font-size: 12px;
    }

    .footer {
        margin-top: 0;
    }

    .footer-bottom {
        padding: 0 16px;
    }




    /* Directions: same overall card height as the mobile projects card. */
    .directions-slider,
    .directions-slider .swiper-wrapper,
    .directions-slider .swiper-slide,
    .directions-slider .direction-card {
        height: 360px !important;
        min-height: 360px !important;
    }

    /* Keep the direction card content positioned like the desktop card:
       title/description flow from the top, button stays at the bottom. */
    .directions-slider .direction-card {
        padding: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
    }

    .directions-slider .direction-content {
        height: 100% !important;
        padding-top: 80px !important;
        padding-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

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

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

    .directions-slider .direction-link {
        width: 128px !important;
        height: 38px !important;
        margin-top: auto !important;
        font-size: 11px !important;
        border-radius: 9px !important;
    }

    /* Do not let a tap leave the arrow in the desktop hover state. */
    .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 {
        transform: none !important;
        box-shadow: none !important;
    }

    .directions-navigation .swiper-button-prev:hover,
    .directions-navigation .swiper-button-next:hover,
    .directions-navigation .swiper-button-prev:active,
    .directions-navigation .swiper-button-next:active {
        background: #121C2E !important;
        color: #167BFF !important;
    }

    /* Language selector: compact flag icons + text, no emoji dependency. */
    .responsive-menu-meta .language-switcher {
        gap: 14px !important;
    }

    .responsive-menu-meta .language-switcher-btn {
        min-height: 28px !important;
        padding: 2px 0 !important;
        gap: 7px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #AEBACB !important;
    }

    .responsive-menu-meta .language-switcher-btn.is-active {
        border: 0 !important;
        background: transparent !important;
        color: #fff !important;
    }

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

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

    .responsive-menu-meta .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 !important;
    }



    .responsive-menu-meta .language-flag.flag-ru,
    .responsive-menu-meta .language-flag.flag-en {
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 100% 100% !important;
    }

    .responsive-menu-meta .language-flag.flag-ru {
        background-image: url("../icons/flag-ru.svg") !important;
    }

    .responsive-menu-meta .language-flag.flag-en {
        background-image: url("../icons/flag-gb.svg") !important;
    }



    .contacts-card,
    .contacts-card h3,
    .contacts-card .contact-item,
    .contacts-card .contact-title,
    .contacts-card .contact-link {
        text-align: center !important;
    }

    .contacts-card .contact-link {
        display: block;
    }



    .responsive-menu-nav a,
    .responsive-menu-nav a:hover,
    .responsive-menu-nav a.active {
        justify-content: center !important;
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .responsive-menu-meta {
        justify-content: center !important;
        text-align: center !important;
    }

    .responsive-menu-meta .language-switcher {
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .responsive-menu-contact {
        text-align: center !important;
        justify-content: center !important;
    }



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

    .directions-slider .direction-card {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .directions-slider .direction-content {
        height: 100% !important;
        padding: 0 !important;
        justify-content: flex-start !important;
    }

    .directions-slider .direction-content h3 {
        font-size: 16px !important;
        line-height: 1.15 !important;
        margin: 0 0 5px !important;
    }

    .directions-slider .direction-content p {
        font-size: 9px !important;
        line-height: 1.35 !important;
        max-width: 100% !important;
    }

    .directions-slider .direction-link {
        width: 98px !important;
        height: 29px !important;
        min-height: 29px !important;
        margin-top: auto !important;
        font-size: 9px !important;
        border-radius: 7px !important;
    }



    .hero-content {
        text-align: center !important;
    }

    .hero h1,
    .hero-text {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }



    .directions-slider {
        overflow: hidden !important;
    }

    .directions-slider .swiper-slide {
        width: 155px !important;
        flex: 0 0 155px !important;
    }

    .directions-slider .direction-card {
        width: 155px !important;
        min-width: 155px !important;
    }



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

    .directions-slider .swiper-slide {
        width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 100% !important;
        box-sizing: border-box !important;
    }

    .directions-slider .direction-card {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ---------- VERY SMALL PHONES ---------- */
@media (max-width: 380px) and (hover: none) and (pointer: coarse) {
    .hero h1,
    .hero-service h1 {
        font-size: 31px;
    }

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

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

    .project-image {
        height: 220px;
    }
}


/* =========================================================
   FINAL MOBILE CARD / NAVIGATION FIXES
   Mobile/tablet only. Desktop >=1200px is untouched.
========================================================= */



/* =========================================================
   FINAL IPAD / TABLET POLISH — 26.08.2026
   Scoped to 768–1199px. Desktop >=1200px is untouched.
========================================================= */


/* iPad Mini / Air: the About image uses the full available content width. */





/* =========================================================
   FINAL IPAD / MOBILE REQUEST — 26.08.2026
   Only 0–1199px. Desktop >=1200px is untouched.
========================================================= */

/* iPad Mini / Air: center contact information as requested. */


/* iPad Pro: restore the original left-aligned contact layout. */
@media (min-width: 900px) and (max-width: 1199px) and (hover: none) and (pointer: coarse) {
    .contacts-card,
    .contacts-card h3,
    .contacts-card .contact-item,
    .contacts-card .contact-title,
    .contacts-card .contact-link {
        text-align: left !important;
    }

    .contacts-card .contact-link {
        display: inline;
    }
}

/* Mobile: center all content inside the contact information card. */



/* =========================================================
   PROJECT DETAIL — IPAD FOOTER FIX
   Tablet only. Desktop remains untouched.
========================================================= */



/* =========================================================
   FINAL IPAD PRO / TABLET REQUEST — 26.08.2026
   Only 768–1199px. Desktop >=1200px is untouched.
========================================================= */


/* Same menu alignment for phones. */


/* =========================================================
   FINAL MOBILE DIRECTIONS CARD SIZE
   Match the compact card shown in the reference.
   Desktop and iPad are untouched.
========================================================= */


/* =========================================================
   INTERNAL TABLET PAGES — FOOTER MUST END AT THE VIEWPORT
   Prevent the dark body area below the footer on iPad Pro.
   Desktop >=1200px is untouched.
========================================================= */



/* =========================================================
   BREAKPOINT CLEANUP — NORMAL DESKTOP AFTER DEVTOOLS
   Never allow the responsive drawer/scroll lock to cover the desktop
   when switching from an emulated iPad/mobile viewport back to desktop.
========================================================= */
@media (min-width: 1200px) {
    body.responsive-menu-open {
        overflow-x: clip !important;
        overflow-y: auto !important;
    }

    .responsive-menu,
    .responsive-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }



}

/* =========================================================
   RESTORE GEO-ENGINEERING HERO LOGO ON TABLETS
   iPad Mini / Air / Pro only. Desktop >=1200px untouched.
========================================================= */


/* =========================================================
   V12 — CENTER HERO LOGO / MINIMAL HEADER GAP
   Based strictly on v11. iPad Mini / Air / Pro only.
========================================================= */


/* =========================================================
   MOBILE HERO TEXT CENTERING
   Mobile phones only. iPad / desktop are untouched.
========================================================= */


/* =========================================================
   IPAD DIRECTIONS ARROWS — SAME BEHAVIOUR AS MOBILE
   Only iPad Mini / Air / Pro. No other layout changes.
========================================================= */


/* =========================================================
   FINAL — DIRECTIONS: keep compact cards from being squeezed
   on narrow mobile layouts, matching the reference carousel.
   ========================================================= */


/* =========================================================
   FINAL — IPAD DIRECTIONS ARROWS: touch feedback.
   Do not leave the button stuck in a hover state; show a short
   press glow on every real tap.
   ========================================================= */


/* Phones: exactly one directions card in view. The next card must not
   compress into the current slide. */


/* Short blue press flash for every directions/projects arrow on phones
   and iPads. It is deliberately independent from :hover, because iOS/iPadOS
   touch taps can retain hover styles and otherwise show no visible feedback. */
@media (max-width: 1199px) and (hover: none) and (pointer: coarse) {
    .directions-navigation .swiper-button-prev,
    .directions-navigation .swiper-button-next,
    .projects-navigation .swiper-button-prev,
    .projects-navigation .swiper-button-next {
        transition: transform .18s ease, background .18s ease, color .18s ease,
                    border-color .18s ease, box-shadow .18s ease, filter .18s ease !important;
        will-change: transform, box-shadow !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    .directions-navigation .swiper-button-prev.geo-arrow-flash,
    .directions-navigation .swiper-button-next.geo-arrow-flash,
    .projects-navigation .swiper-button-prev.geo-arrow-flash,
    .projects-navigation .swiper-button-next.geo-arrow-flash {
        background: #167BFF !important;
        color: #ffffff !important;
        border-color: rgba(125,198,255,.95) !important;
        transform: translateY(-2px) scale(1.07) !important;
        box-shadow: 0 0 0 4px rgba(22,123,255,.12),
                    0 10px 30px rgba(22,123,255,.58),
                    0 0 22px rgba(55,154,255,.8) !important;
        filter: brightness(1.16) !important;
    }



    .directions-navigation .swiper-button-prev.geo-arrow-flash-v3,
    .directions-navigation .swiper-button-next.geo-arrow-flash-v3,
    .projects-navigation .swiper-button-prev.geo-arrow-flash-v3,
    .projects-navigation .swiper-button-next.geo-arrow-flash-v3 {
        animation: geoArrowTapV3 .38s ease-out both !important;
        background: #167BFF !important;
        color: #fff !important;
        border-color: #8bc8ff !important;
        box-shadow: 0 0 26px rgba(22,123,255,.9), 0 10px 32px rgba(22,123,255,.55) !important;
    }

    @keyframes geoArrowTapV3 {
        0%   { transform: translateX(0) scale(1); filter: brightness(1); }
        35%  { transform: translateX(5px) scale(1.10); filter: brightness(1.35); }
        100% { transform: translateX(0) scale(1); filter: brightness(1); }
    }
}




/* =========================================================
   DESKTOP CLEANUP — hide decorative section numbers only on desktop
========================================================= */



/* =========================================================
   IPAD / TABLET MENU CLOSE BUTTON
========================================================= */


/* =========================================================
   FLUID DESKTOP WINDOW RESIZE
   Real desktop browsers: keep the same composition, but scale
   dimensions and spacing with the browser window instead of clipping.
========================================================= */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
    html,
    body {
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
        overflow-x: hidden !important;
    }

    .container {
        width: 100% !important;
        max-width: 1400px !important;
        min-width: 0 !important;
        padding-left: clamp(24px, 3.3vw, 40px) !important;
        padding-right: clamp(24px, 3.3vw, 40px) !important;
    }

    /* Hero remains a two-column desktop composition and scales smoothly. */
    body.home section {
        min-width: 0 !important;
        width: 100% !important;
    }

    .hero-container {
        gap: clamp(26px, 5vw, 60px) !important;
        padding-top: clamp(145px, 18vw, 220px) !important;
        padding-bottom: clamp(18px, 2.4vw, 32px) !important;
    }

    .hero-content,
    .hero-image {
        min-width: 0 !important;
    }

    .hero-content {
        top: clamp(-70px, -5.8vw, -42px) !important;
    }

    /* Homepage positions its hero purely through padding. */
    body.home .hero-content {
        top: 0 !important;
    }

    .hero h1 {
        font-size: clamp(40px, 5vw, 60px) !important;
        line-height: 1.02 !important;
        margin-bottom: clamp(16px, 2vw, 24px) !important;
    }

    body.home .hero h1 {
        margin-bottom: clamp(14px, 1.6vw, 22px) !important;
    }

    .hero-text {
        max-width: min(700px, 100%) !important;
        font-size: clamp(16px, 1.67vw, 20px) !important;
        line-height: 1.55 !important;
        margin-bottom: clamp(18px, 2.4vw, 28px) !important;
    }

    body.home .hero-text {
        margin-bottom: clamp(16px, 2vw, 24px) !important;
    }

    .hero-buttons {
        gap: clamp(10px, 1.5vw, 18px) !important;
        margin-bottom: clamp(42px, 7vw, 85px) !important;
    }

    body.home .hero-buttons {
        margin-bottom: clamp(20px, 2.6vw, 34px) !important;
    }

    body.home .hero-buttons {
        transform: translateX(clamp(0px, 5vw, 60px)) !important;
    }

    .btn {
        padding: clamp(13px, 1.5vw, 18px) clamp(20px, 3vw, 36px) !important;
        border-radius: clamp(10px, 1.15vw, 14px) !important;
        font-size: clamp(12px, 1.4vw, 16px) !important;
        white-space: nowrap;
    }

    .hero:not(.hero-service) .hero-image img {
        width: min(135%, 780px) !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .hero-service .hero-image img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
    }

    .hero-stats {
        gap: clamp(12px, 2vw, 25px) !important;
        margin-top: clamp(24px, 3.7vw, 45px) !important;
    }

    .stat h2 {
        font-size: clamp(34px, 4.2vw, 50px) !important;
    }

    /* Keep the other sections fluid as well instead of creating a fixed canvas. */
    .about > .container,
    .directions > .container,
    .projects > .container,
    .contacts > .container {
        padding-top: clamp(86px, 9vw, 108px) !important;
        padding-bottom: clamp(24px, 3vw, 36px) !important;
    }
}


/* =========================================================
   INTERNAL PAGES — FOOTER 1:1 WITH HOMEPAGE
========================================================= */
@media (min-width: 901px) {
    body:not(.home) .footer {
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
        height: 400px !important;
        min-height: 400px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: none !important;

        background-color: rgba(0, 0, 0, .25) !important;
        background-image: url("../images/footer-bg.webp?v=3") !important;
        background-position: center center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-blend-mode: multiply !important;

        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;

        font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
    }

    body:not(.home) .footer::before {
        display: none !important;
    }

    body:not(.home) .footer-content {
        position: relative !important;
        z-index: 1 !important;
        width: min(1400px, 100%) !important;
        min-height: 285px !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 55px 40px 45px !important;
        display: grid !important;
        grid-template-columns: 1.25fr 0.8fr 0.8fr !important;
        column-gap: 70px !important;
        align-items: center !important;
        transform: translateY(40px) !important;
    }

    body:not(.home) .footer-logo {
        display: block !important;
        width: auto !important;
        height: clamp(36px, 3.3654vw + 1.54px, 50px) !important;
        margin-bottom: 20px !important;
        object-fit: contain !important;
    }

    body:not(.home) .footer-brand p {
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
    }

    body:not(.home) .footer-nav h3 {
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    body:not(.home) .footer-nav a {
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
    }

    body:not(.home) .footer-visual-content span,
    body:not(.home) .footer-visual-content strong {
        font-size: 21px !important;
        line-height: 1.05 !important;
        letter-spacing: 2px !important;
    }

    body:not(.home) .footer-bottom {
        position: relative !important;
        z-index: 1 !important;
        /* Линия начинается и заканчивается точно по внутреннему
           краю содержимого футера (там же, где логотип). */
        width: min(1320px, calc(100% - 80px)) !important;
        min-height: 65px !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 20px 0 28px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        display: flex !important;
        align-items: center !important;
        transform: translateY(40px) !important;
    }

    body:not(.home) .footer-bottom p {
        margin: 0 !important;
        color: #FFFFFF !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        letter-spacing: .15px !important;
        transform: none !important;
    }
}


/* =========================================================
   PROJECT META — tablet/phone
   Three tight columns made long industry names collide with
   the next value, so narrow screens stack them instead.
========================================================= */

@media (max-width: 1024px){

    .project-meta{
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 20px !important;
    }

    .project-meta strong{
        font-size: 13.5px !important;
        line-height: 1.35 !important;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .project-meta span{
        font-size: 11px !important;
    }

}

@media (max-width: 560px){

    .project-meta{
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

}