/* ============================================================
   УЛУЧШЕНИЯ ПОВЕРХ ОРИГИНАЛЬНОГО ДИЗАЙНА
   Подключается последним. Оригинальные main.css / media.css
   не тронуты — всё можно откатить, удалив один файл.
   ============================================================ */

:root{
    --brand-dark:#47626c;
    --brand-mid:#89a2ad;
    --brand-light:#e1e8ea;
    /* акцент — стальной голубой из логотипа (жёлтый убран) */
    --brand-accent:#9dbecd;
    --ink:#1d1d1b;
    --hero-ink:#10181c;
}

/* ---------- общая полировка ---------- */
html{scroll-behavior:smooth}
body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
}
::selection{background:var(--brand-mid);color:#fff}
img{max-width:100%}

/* фикс оригинала: полосы на всю ширину собраны на .row
   с отрицательными полями — убираем горизонтальное переполнение */
.main > section > .row,
.main > section.row,
#contact > .row{
    margin-left:0;
    margin-right:0;
}
.main > section > .row > [class*="col-"],
#contact > .row > [class*="col-"]{
    padding-left:0;
    padding-right:0;
}

/* доступность: оригинал полностью убил outline */
a:focus-visible,
button:focus-visible{
    outline:2px solid var(--brand-dark)!important;
    outline-offset:3px;
}

/* остатки жёлтого из main.css: бургер и ховер выпадающего меню */
.mobile-menu,
.mobile-menu:hover{color:var(--brand-dark)}
header .menu ul li a:hover,
.menu ul li:hover > a{background:var(--brand-light)}

/* заголовки секций: аккуратный акцент */
.title h2{
    letter-spacing:.06em;
    position:relative;
}

/* ---------- шапка: липкая, компактная ---------- */
.main > section.header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:box-shadow .3s;
}
.main > section.header.is-scrolled{
    box-shadow:0 4px 24px rgba(29,29,27,.14);
}
header{padding:18px 35px}
header .logo img{transition:transform .3s}
header .logo a:hover img{transform:scale(1.03)}
header .menu a{
    border-bottom:3px solid transparent;
    padding:0 0 6px;
    font-size:15px;
    letter-spacing:.08em;
    transition:color .25s,border-color .25s;
}
header .menu a:hover{
    border-bottom:3px solid var(--brand-dark);
    color:#000;
    text-decoration:none;
}

/* ============================================================
   HERO — первый экран с заголовком и ключевыми фактами
   ============================================================ */
.hero{
    position:relative;
    min-height:clamp(560px,88vh,820px);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--hero-ink);
    color:#fff;
}
.hero-bg{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background-size:cover;
    background-position:center 70%;
    /* приглушаем фото, оставляя тёплые огни площадки живыми */
    filter:grayscale(.45) brightness(1.12);
    transform:scale(1.04);
}
.hero::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:linear-gradient(180deg,
        rgba(16,24,28,.5) 0%,
        rgba(30,44,52,.55) 55%,
        rgba(16,24,28,.9) 100%);
    z-index:1;
}
.hero-inner{
    position:relative;
    z-index:2;
    text-align:center;
    padding:120px 24px 90px;
    max-width:900px;
}
.hero-kicker{
    text-transform:uppercase;
    letter-spacing:.32em;
    font-size:12px;
    color:var(--brand-accent);
    margin-bottom:26px;
}
.hero h1{
    font-family:'HelveticaNeueCyr-Black';
    font-size:clamp(30px,4.6vw,58px);
    line-height:1.12;
    letter-spacing:.02em;
    margin:0 0 22px;
    text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.hero-sub{
    font-size:clamp(15px,1.5vw,19px);
    line-height:1.6;
    color:rgba(255,255,255,.82);
    max-width:640px;
    margin:0 auto 38px;
}
.hero-actions{
    display:flex;
    gap:16px;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:56px;
}
.btn-hero{
    display:inline-block;
    padding:15px 36px;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.12em;
    border-radius:10px;
    border:1px solid transparent;
    transition:background .25s,border-color .25s,color .25s,transform .25s,box-shadow .25s;
}
.btn-hero:hover{text-decoration:none;transform:translateY(-2px)}
.btn-hero--primary{
    background:var(--brand-mid);
    color:var(--hero-ink);
    font-family:'HelveticaNeueCyr-Black';
}
.btn-hero--primary:hover{
    background:var(--brand-light);
    color:var(--hero-ink);
    box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.btn-hero--ghost{
    border-color:rgba(255,255,255,.45);
    color:#fff;
}
.btn-hero--ghost:hover{
    border-color:#fff;
    background:rgba(255,255,255,.08);
    color:#fff;
}
.hero-facts{
    list-style:none;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px 0;
    padding:0;
    margin:0;
    color:rgba(255,255,255,.78);
    font-size:14px;
}
.hero-facts li{
    display:flex;
    align-items:baseline;
    gap:8px;
    padding:0 28px;
    border-left:1px solid rgba(255,255,255,.22);
}
.hero-facts li:first-child{border-left:none}
.hero-facts span{
    font-family:'HelveticaNeueCyr-Black';
    font-size:30px;
    color:#fff;
    line-height:1;
}
.hero-scroll{
    position:absolute;
    left:50%;
    bottom:26px;
    transform:translateX(-50%);
    z-index:2;
    width:26px;
    height:42px;
    border:2px solid rgba(255,255,255,.5);
    border-radius:14px;
    transition:border-color .25s;
}
.hero-scroll::after{
    content:"";
    position:absolute;
    left:50%;
    top:8px;
    width:4px;
    height:8px;
    margin-left:-2px;
    border-radius:2px;
    background:rgba(255,255,255,.75);
    animation:hero-scroll-dot 1.8s ease-in-out infinite;
}
.hero-scroll:hover{border-color:#fff}
@keyframes hero-scroll-dot{
    0%{transform:translateY(0);opacity:1}
    70%{transform:translateY(12px);opacity:0}
    100%{transform:translateY(0);opacity:0}
}

/* мягкое появление контента hero при загрузке */
.hero-kicker,.hero h1,.hero-sub,.hero-actions,.hero-facts{
    animation:hero-rise .8s cubic-bezier(.2,.6,.2,1) both;
}
.hero h1{animation-delay:.12s}
.hero-sub{animation-delay:.24s}
.hero-actions{animation-delay:.36s}
.hero-facts{animation-delay:.5s}
@keyframes hero-rise{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
    .hero-scroll::after{animation:none}
    .hero-kicker,.hero h1,.hero-sub,.hero-actions,.hero-facts{animation:none}
}

/* ---------- шапка секции «Реализованные объекты» ---------- */
.builds-head{
    text-align:center;
    padding:64px 24px 40px;
}
.builds-head h2{
    font-family:'HelveticaNeueCyr-Black';
    font-size:clamp(24px,2.6vw,34px);
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#575756;
    margin:0 0 10px;
}
.builds-head h2::after{
    content:"";
    display:block;
    width:56px;
    height:3px;
    background:var(--brand-mid);
    margin:16px auto 0;
    border-radius:2px;
}
.builds-head p{
    color:#7a8489;
    font-size:15px;
    margin:14px 0 0;
}

/* ---------- галерея объектов ---------- */
.builds article{display:block}
.builds article img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s cubic-bezier(.2,.6,.2,1),filter .8s;
}
/* градиент, чтобы подпись всегда читалась */
.builds article::before{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:70%;
    background:linear-gradient(to top,rgba(15,22,27,.88) 0%,rgba(15,22,27,.38) 55%,transparent 100%);
    z-index:1;
    transition:opacity .5s;
}
.builds article .title{
    z-index:2;
    font-size:15px;
    line-height:1.35;
    text-shadow:0 1px 3px rgba(0,0,0,.5);
    transition:transform .4s;
}
.builds article .title::before{
    content:"";
    display:block;
    width:30px;
    height:2px;
    background:rgba(255,255,255,.65);
    margin-bottom:10px;
    transition:width .4s,background .4s;
}
.builds article:hover .title::before{
    width:52px;
    background:#fff;
}
.builds article:hover .title{transform:translateY(-5px)}
.builds article:hover img{
    transform:scale(1.07);
    filter:saturate(1.15);
}
.builds article:hover::after{background:rgba(0,0,0,.1)}

/* ---------- промежуточные меню-ленты: современный вид ---------- */
.menu-main{
    padding:34px 20px!important;
}
.menu-main ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
.menu-main ul li{margin:4px 26px}
/* устаревшие стрелки-иконки убираем */
.menu-main ul li a::after{display:none!important}
.menu-main ul li a{
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:13px;
    line-height:1.5;
    text-align:center;
    padding:8px 2px 10px;
    position:relative;
    transition:color .25s;
}
/* анимированное подчёркивание в цвет текста */
.menu-main ul li a::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:2px;
    height:2px;
    width:0;
    background:currentColor;
    opacity:.55;
    transition:width .3s,left .3s;
}
.menu-main ul li a:hover::before{width:100%;left:0}
.menu-main ul li a:hover{text-decoration:none}

.menu-main__full-color{
    background:linear-gradient(135deg,#93abb6 0%,#7e97a3 100%);
}
.menu-main__full-color ul li a{color:#10181c}
.menu-main__full-color ul li a:hover{color:#000}

.menu-main__full-color-2{
    background:linear-gradient(135deg,#4d6a75 0%,#3a525c 100%);
}
.menu-main__full-color-2 ul li a{color:#d9e2e6}
.menu-main__full-color-2 ul li a:hover{color:#fff}

.menu-main__background ul li a:hover{color:#fff}

/* лента с подписью: подпись сверху, ссылки под ней */
.menu-main--labeled{
    flex-direction:column;
    align-items:center;
}
.menu-main-label{
    text-transform:uppercase;
    letter-spacing:.3em;
    font-size:11px;
    color:rgba(255,255,255,.55);
    margin:0 0 14px;
    text-align:center;
}

/* ============================================================
   «О КОМПАНИИ» — блок статистики.
   Было: цифры, разбросанные absolute-координатами по фото.
   Стало: тёмный оверлей + аккуратные стеклянные карточки.
   ============================================================ */
.background-about{
    background-size:cover!important;
    background-position:center!important;
    position:relative;
}
.background-about::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:linear-gradient(180deg,rgba(16,24,28,.62) 0%,rgba(16,24,28,.5) 45%,rgba(16,24,28,.85) 100%);
}
.background-about .container{position:relative;z-index:1}

/* заголовок секции: вместо absolute — обычный центрированный блок */
.about .title{
    position:static!important;
    width:auto!important;
    margin:0!important;
    padding:86px 0 8px;
}
.about .title .row{
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;
}
.about .title .col-6{
    flex:0 0 auto;
    max-width:none;
    width:auto;
}
.about .title span,
.about .title .title-logo{margin:0!important}
.about .title .title-name{margin:0!important;text-align:center}
.about .title h2{
    text-shadow:0 2px 14px rgba(0,0,0,.35);
}
/* заголовки секций без логотипов: единый акцент-подчёркивание */
.about .title h2::after,
.services .title-services h2::after,
.projects .title-projects h2::after{
    content:"";
    display:block;
    width:56px;
    height:3px;
    background:var(--brand-mid);
    margin:18px auto 0;
    border-radius:2px;
}

/* сетка карточек вместо диаграммы */
.about-diagram{
    padding:56px 0 96px!important;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:22px;
}
.about-diagram > img{display:none!important}

.diagram-count{
    position:static!important;
    width:auto!important;
    height:auto!important;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    text-align:center;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.18);
    border-radius:18px;
    padding:36px 14px 30px;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    transition:transform .35s,border-color .35s,background .35s;
}
.diagram-count:hover{
    transform:translateY(-6px);
    border-color:rgba(225,232,234,.75);
    background:rgba(255,255,255,.11);
}
/* старые контуры-кружки и подложки не нужны */
.diagram-count::before{display:none!important}

.diagram-count span{
    font-size:58px!important;
    line-height:1.05;
}
.diagram-count div{
    position:static!important;
    width:auto!important;
    top:auto!important;
    left:auto!important;
    text-align:center!important;
    font-size:14px!important;
    line-height:1.45;
    color:rgba(255,255,255,.85);
}
/* тонкий разделитель между цифрой и подписью */
.diagram-count div::before{
    content:"";
    display:block;
    width:44px;
    height:1px;
    background:rgba(255,255,255,.35);
    margin:16px auto 12px;
}
/* серый круг вокруг «73» больше не нужен */
.count-opacity{
    background:transparent!important;
    color:#fff!important;
    width:auto!important;
    height:auto!important;
    border-radius:0!important;
}
.count-opacity span{font-size:58px!important}

/* ---------- секция «О компании» (текстовая) ---------- */
/* декоративные «полосы» из оригинала выглядели как глюк — убираем */
.about2{background:none}
.about2 p{line-height:1.65}
.about2 .descr{line-height:1.55}
/* годы в хронологии — акцентом */
.about2 strong{
    font-family:'HelveticaNeueCyr-Black';
    color:var(--brand-dark);
    font-weight:normal;
}
/* ПРОЕКТИРОВАНИЕ / СТРОИТЕЛЬСТВО / СЕРВИС: вместо чёрточек — чипы */
.about2 ul li{
    padding:10px 22px;
    margin:0 14px 10px 0;
    background:#eef2f4;
    border:1px solid #dde5e9;
    border-radius:10px;
    color:var(--ink);
}
.about2 ul li::after{display:none!important}

/* ============================================================
   УСЛУГИ — три колонки превращаем в карточки
   ============================================================ */
/* стоковые фоны (мужчина в костюме, эллипсы) убираем —
   секция держится на карточках */
.background-services{background:linear-gradient(180deg,#f4f7f8 0%,#fff 70%)}
.services{
    padding:90px 40px 60px;
    background:none;
}
.services .title-services{margin-bottom:70px}
.services .row{align-items:stretch}
.services .col1,
.services .col2,
.services .col3{
    width:auto;
    flex:1 1 0;
    max-width:none;
    margin:0 11px 24px;
    background:rgba(255,255,255,.94);
    border-radius:18px;
    border:1px solid #e3e9ec;
    box-shadow:0 14px 38px rgba(29,29,27,.08);
    padding:32px 28px 26px;
    transition:transform .35s,box-shadow .35s,border-color .35s;
}
.services .col1:hover,
.services .col2:hover,
.services .col3:hover{
    transform:translateY(-6px);
    border-color:var(--brand-mid);
    box-shadow:0 24px 54px rgba(29,29,27,.14);
}
.services .block-left{
    border-right:none;
    padding-right:0;
    padding-bottom:0;
}
.services .block-left .title{
    font-size:17px;
    margin-bottom:22px;
    padding-bottom:14px;
    border-bottom:2px solid var(--brand-light);
}
/* кривые чёрточки над пунктами убираем совсем,
   вместо них — ровные квадратные маркеры у первой строки */
.services .list li::after,
.projects .list li::after{display:none!important}
/* специфичность выше, чем у .projects .list.list-line li из main.css,
   иначе маркер наезжает на текст */
.services .list li,
.services .list.list__line li,
.projects .list li,
.projects .list.list-line li{
    padding-left:20px;
    line-height:1.5;
}
.services .list li::before,
.projects .list li::before{
    content:"";
    position:absolute;
    left:0;
    width:8px;
    height:8px;
    border-radius:2px;
}
.services .list li::before{
    top:14px;
    background:var(--brand-mid);
}
.projects .list li::before{
    top:20px;
    background:rgba(255,255,255,.6);
}

/* ---------- проекты ---------- */
.projects .list.list-line{border-left:1px solid rgba(255,255,255,.4)}
.projects .my-paroller img{
    filter:drop-shadow(0 24px 40px rgba(0,0,0,.35));
}

/* ---------- футер ---------- */
footer{
    padding:80px 60px 40px;
    background:linear-gradient(160deg,#23282b 0%,#1d1d1b 55%);
}
footer .descr a{
    transition:color .25s;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.25);
}
footer .descr a:hover{
    color:var(--brand-light);
    border-bottom-color:var(--brand-light);
}
footer .descr::after{background:var(--brand-mid)}
footer .social li a{transition:transform .25s,opacity .25s}
footer .social li a:hover{
    transform:translateY(-3px);
    opacity:.85;
}
.footer-bottom{
    margin-top:48px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.14);
    text-align:center;
}
.footer-bottom p{
    margin:0;
    font-size:13px;
    letter-spacing:.06em;
    color:rgba(255,255,255,.55);
}

/* ============================================================
   СТРАНИЦЫ ОБЪЕКТОВ (project-*.html)
   ============================================================ */

/* шапка на тёмных страницах: липкая тёмная, а не белая */
.page-project > section.header{
    background:rgba(46,50,52,.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.page-project > section.header.is-scrolled{
    box-shadow:0 4px 24px rgba(0,0,0,.35);
}
.page-project header .menu a:hover{
    border-bottom-color:#fff;
    color:#fff;
}

/* полоса категории в шапке: спокойнее, без рамок по бокам */
.page-project header .title{
    background:transparent;
    margin-top:0;
    padding:0;
    font-size:13px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgba(255,255,255,.75);
}
.page-project header .title a > div{
    border-left:2px solid rgba(255,255,255,.35);
    border-right:none;
    padding:2px 0 2px 18px;
    color:rgba(255,255,255,.75);
    transition:color .25s,border-color .25s;
}
.page-project header .title a:hover > div{
    color:#fff;
    border-left-color:#fff;
}
.page-project header .title p{margin:0}

/* инфоблок: компактная сетка одинаковой высоты на всех страницах.
   Было: absolute-круг вылезал из блока и наезжал на фотографии */
.page-project .info{
    padding:48px 0 52px;
    margin-bottom:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto 1fr;
    column-gap:56px;
    align-items:start;
    min-height:340px;
    width:100%;
}
.page-project .info > .descr:first-child{grid-column:1;grid-row:1}
.page-project .info h1{
    grid-column:1;
    grid-row:2;
    font-size:clamp(26px,3vw,40px);
    line-height:1.15;
    margin:14px 0 18px;
}
.page-project .info h1 + .descr{grid-column:1;grid-row:3}
.page-project .info .descr{
    font-size:clamp(16px,1.4vw,20px);
    line-height:1.55;
    margin-bottom:0;
    max-width:760px;
}
.page-project .info .descr span{
    display:inline-block;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.25);
    border-radius:8px;
    padding:4px 14px;
    margin-right:10px;
}

/* круг с площадью: в потоке (правая колонка сетки), а не absolute.
   relative, а не static — иначе кольцо .duga улетает в угол инфоблока */
.page-project .circle{
    position:relative!important;
    grid-column:2;
    grid-row:1 / 4;
    align-self:center;
    right:auto;
    margin:0;
    border:1px solid rgba(255,255,255,0);
}
.page-project .circle .duga{border-color:rgba(255,255,255,.55)}
/* подписи внутри круга — в столбик по центру, без выноса за края */
.page-project .circle > div{
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:0;
}
.page-project .circle > div .l{
    position:static;
    width:auto;
    height:auto;
    text-align:center;
    order:0;
    margin-bottom:6px;
}
.page-project .circle > div > span{order:1}
.page-project .circle > div .r{
    position:static;
    width:auto;
    height:auto;
    order:2;
    margin-top:2px;
}

/* стрелки навигации между объектами */
.btn-circle{
    opacity:.75;
    transition:opacity .25s,transform .25s;
}
.btn-circle:hover{
    opacity:1;
    transform:scale(1.08);
}

/* фотогалерея объекта */
.page-project .images{position:relative;z-index:2}
.page-project .image{
    padding-bottom:70%;
    overflow:hidden;
}
.page-project .image img{
    width:100%;
    height:100%;
    object-fit:cover;
    min-height:0;
    transition:transform .8s cubic-bezier(.2,.6,.2,1),filter .8s;
}
.page-project .image:hover img{
    transform:scale(1.06);
    filter:saturate(1.12);
}

@media only screen and (max-width:991px){
    /* стрелки-колонки убираем (d-flex у bootstrap с !important) */
    .page-project section.row > .col-1{display:none!important}
    .page-project section.row > .col-10{
        flex:0 0 100%;
        max-width:100%;
    }
    .page-project .info{
        display:block;
        padding:44px 22px;
        min-height:0;
    }
    /* круг по центру под текстом */
    .page-project .circle{
        margin:26px auto 0;
    }
    /* подписи внутри круга: из absolute в столбик по центру */
    .page-project .circle > div{
        display:flex;
        flex-direction:column;
        align-items:center;
        min-width:0;
    }
    .page-project .circle > div .l{
        position:static;
        width:auto;
        height:auto;
        text-align:center;
        order:0;
        margin-bottom:6px;
    }
    .page-project .circle > div > span{order:1}
    .page-project .circle > div .r{
        position:static;
        width:auto;
        height:auto;
        order:2;
        margin-top:2px;
    }
    /* фото объекта в столбик на планшете: 2, на телефоне 1 */
    .page-project .images .col-4{
        flex:0 0 50%;
        max-width:50%;
    }
}
@media only screen and (max-width:767px){
    .page-project .images .col-4{
        flex:0 0 100%;
        max-width:100%;
    }
    .page-project header .title{display:none}
    /* мобильное меню на тёмной шапке */
    .page-project header .menu{background:#33383a}
    .page-project header .menu a:hover{background:#41474a;color:#fff}
    .page-project header .col-md-3{
        flex:0 0 50%;
        max-width:50%;
    }
    .page-project header .col-md-6{
        flex:0 0 50%;
        max-width:50%;
    }
    .page-project header .logo{width:190px}
}

/* ---------- кнопка «наверх» ---------- */
.btn-top{
    opacity:0;
    pointer-events:none;
    transition:opacity .35s,transform .35s;
    transform:translateY(12px);
    background-size:100%!important;
}
.btn-top.is-visible{
    opacity:1;
    pointer-events:auto;
    transform:none;
}
.btn-top:hover{transform:translateY(-4px)}

/* ---------- появление блоков при скролле ---------- */
.rv{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .7s ease,transform .7s ease;
}
.rv.rv-in{
    opacity:1;
    transform:none;
}
/* при системном «уменьшенном движении» отключаем только крупные
   анимации страницы; плавный ховер на карточках оставляем */
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .rv{opacity:1;transform:none;transition:none}
}

/* ============================================================
   АДАПТИВНОСТЬ — в оригинале ниже 1200px всё разваливалось
   ============================================================ */

@media only screen and (max-width:1199px){
    header{padding:16px 20px}
    .about-diagram{grid-template-columns:repeat(3,minmax(0,1fr))}
    .diagram-count span,
    .count-opacity span{font-size:48px!important}
}

@media only screen and (max-width:991px){

    .hero{min-height:clamp(460px,78vh,640px)}
    .hero-inner{padding:90px 20px 70px}
    .hero-facts li{padding:0 18px}
    .builds-head{padding:48px 18px 30px}

    /* галерея: 2 фото в ряд вместо 4 крошечных */
    .builds .col-3{
        flex:0 0 50%;
        max-width:50%;
    }

    .menu-main{padding:24px 12px!important}
    .menu-main ul li{margin:2px 16px}
    .menu-main__background{
        padding-top:120px!important;
        background-size:cover;
        background-attachment:scroll;
    }

    .about .title{padding:56px 12px 0}
    .about .title span img{height:44px}
    .about .title .title-name{margin:0 0 0 18px!important}

    .about-diagram{
        padding:40px 16px 70px!important;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:16px;
    }
    .diagram-count:last-child{grid-column:1 / -1}

    /* текстовая «О компании» */
    .about2{
        padding:60px 10px 30px;
        background-position:center top;
        background-size:cover;
    }
    .about2 .row > .col-4,
    .about2 .row > .col-8,
    .about2 .col-8 .row > .col-6{
        flex:0 0 100%;
        max-width:100%;
    }
    .about2 .col-4{
        padding-right:15px!important;
        margin-bottom:30px;
    }
    .about2 ul li{margin:0 10px 10px 0}

    /* услуги: карточки в столбик */
    .services{
        padding:60px 14px 30px;
        background-position:center -95px;
    }
    .services .title-services{margin-bottom:44px}
    .services .col1,
    .services .col2,
    .services .col3{
        flex:0 0 100%;
        max-width:100%;
        margin:0 0 18px;
    }

    /* проекты */
    .projects{
        padding:60px 20px 30px;
        background-position:center 30px;
    }
    .projects .title-projects{margin-bottom:50px}
    .projects .list{
        margin:0 0 30px 10px;
        padding:0 10px 0 20px;
    }
    .projects .list::after{display:none}

    /* контакты */
    footer{
        padding:50px 25px;
        background-position:center center;
        background-size:cover;
    }
    footer .title{margin:0 0 30px}
    #contact .col-8,
    #contact .col-4{
        flex:0 0 100%;
        max-width:100%;
    }
}

/* --- телефон --- */
@media only screen and (max-width:767px){

    /* мобильное меню: в оригинале его не было вовсе */
    header{padding:12px 16px}
    header .row{align-items:center}
    header .logo{width:170px}
    .header-nav{text-align:right}
    .mobile-menu{
        display:inline-block;
        font-size:22px;
        padding:6px 10px;
    }
    header .menu{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#fff;
        box-shadow:0 14px 30px rgba(29,29,27,.18);
        padding:10px 0 14px;
        z-index:60;
    }
    header .menu li{display:block}
    header .menu a{
        display:block;
        margin:0;
        padding:12px 24px;
        text-align:left;
        border-bottom:none;
    }
    header .menu a:hover{
        border-bottom:none;
        background:var(--brand-light);
    }
    header .col-md-2,
    header .col-md-10{
        flex:0 0 50%;
        max-width:50%;
    }

    .hero{min-height:0}
    .hero-inner{padding:80px 18px 64px}
    .hero-kicker{letter-spacing:.2em;font-size:11px}
    .hero-sub{margin-bottom:30px}
    .hero-actions{gap:10px;margin-bottom:40px}
    .btn-hero{padding:13px 26px;font-size:13px}
    .hero-facts{flex-direction:column;gap:14px;align-items:center}
    .hero-facts li{border-left:none;padding:0}
    .hero-facts span{font-size:26px}
    .hero-scroll{display:none}

    .footer-bottom{margin-top:30px}
    .footer-bottom p{font-size:12px}

    .builds article .title{font-size:13px;margin:12px 16px}

    .title h2{font-size:26px}
    .title span img{height:30px;margin-left:10px}

    /* заголовок «О компании» по центру */
    .about .title .row{
        flex-wrap:wrap;
        flex-direction:column;
        align-items:center;
    }
    .about .title .title-name{margin:0!important}

    .about-diagram{grid-template-columns:1fr 1fr;gap:12px}
    .diagram-count span,
    .count-opacity span{font-size:42px!important}

    .about2 .descr{font-size:16px}
    .about2 ul li{
        font-size:15px;
        display:inline-block;
        margin:0 8px 10px 0;
        padding:8px 16px;
    }

    .menu-main ul li{margin:2px 10px}
    .menu-main ul li a{font-size:12px}

    footer{padding:40px 18px}
    footer .title{margin:0 0 24px}
    footer .title span img{height:30px}
}

@media only screen and (max-width:479px){
    .builds .col-3{
        flex:0 0 100%;
        max-width:100%;
    }
    .about-diagram{grid-template-columns:1fr}
    .diagram-count:last-child{grid-column:auto}
}

/* ============================================================
   ТЁМНАЯ ТЕМА — весь сайт в тёмных стальных тонах логотипа.
   Блок идёт последним и перекрывает светлые правила выше.
   ============================================================ */
body{
    background:#10161a;
    color:#dfe6ea;
}

/* --- шапка: тёмное стекло --- */
.main > section.header{
    background:rgba(13,19,23,.88);
    border-bottom:1px solid rgba(255,255,255,.07);
}
.main > section.header.is-scrolled{
    box-shadow:0 6px 26px rgba(0,0,0,.55);
}
header .logo img{filter:brightness(0) invert(.94)}
header .menu a{color:#c7d3d9}
header .menu a:hover{
    color:#fff;
    border-bottom-color:var(--brand-accent);
}
.mobile-menu,
.mobile-menu:hover{color:#dfe6ea}

/* --- заголовки секций --- */
.title h2{color:#eef3f5}
.builds-head h2{color:#eef3f5}
.builds-head p{color:#8fa0a9}
#builds{background:#10161a}

/* --- галерея: лёгкая стальная рамка между плитками --- */
.builds article{background:#0d1317}

/* --- «О компании» (текстовая) --- */
.background-about2{
    background:linear-gradient(180deg,#10161a 0%,#151d22 100%);
}
.about2 .descr{color:#eef3f5}
.about2 p{color:#b6c3ca}
.about2 ul li{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.14);
    color:#eef3f5;
}
.about2 strong{color:var(--brand-accent)}
.about2 img{filter:brightness(0) invert(.9)}

/* --- лента ссылок: чуть темнее, со стальной кромкой --- */
.menu-main__full-color-2{
    background:linear-gradient(135deg,#233239 0%,#1a262c 100%);
    border-top:1px solid rgba(157,190,205,.16);
    border-bottom:1px solid rgba(157,190,205,.16);
}

/* --- услуги: тёмные стеклянные карточки --- */
.background-services{
    background:linear-gradient(180deg,#10161a 0%,#141c21 100%);
}
.services .col1,
.services .col2,
.services .col3{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.11);
    box-shadow:0 14px 38px rgba(0,0,0,.35);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}
.services .col1:hover,
.services .col2:hover,
.services .col3:hover{
    border-color:rgba(157,190,205,.55);
    box-shadow:0 24px 54px rgba(0,0,0,.5);
    background:rgba(255,255,255,.07);
}
.services .block-left{color:#b6c3ca}
.services .block-left .title{
    color:#eef3f5;
    border-bottom-color:rgba(157,190,205,.35);
}
.services .list li{color:#b6c3ca}
.services .list li::before{background:var(--brand-accent)}
.services .title-services span img{filter:brightness(0) invert(.6)}

/* --- проекты: в общую тёмную гамму --- */
/* белое «свечение» из main.css на стыке секций — убираем */
.background-services::before{display:none}
.background-projects{
    background:linear-gradient(180deg,#141c21 0%,#1c2930 100%);
}
.projects .list.list-line{border-left-color:rgba(157,190,205,.35)}
.projects .list li::before{background:var(--brand-accent)}

/* --- контакты --- */
footer{
    background:linear-gradient(160deg,#151b1f 0%,#0d1215 60%);
}
footer .title h2{color:#8fa0a9}

/* --- мобильное меню на тёмной шапке --- */
@media only screen and (max-width:767px){
    header .menu{
        background:#151e24;
        box-shadow:0 14px 30px rgba(0,0,0,.55);
    }
    header .menu a{color:#dfe6ea}
    header .menu a:hover{
        background:#1e2a31;
        color:#fff;
    }
    /* карточки статистики: защита от переполнения узкого экрана */
    .about-diagram{grid-template-columns:repeat(2,minmax(0,1fr))}
    /* ленты ссылок: крупнее и удобнее для пальца */
    .menu-main ul li{margin:2px 8px}
    .menu-main ul li a{
        font-size:13px;
        padding:10px 6px 12px;
    }
    .menu-main-label{letter-spacing:.2em}
    /* карточки услуг: компактнее внутренние отступы */
    .services .col1,
    .services .col2,
    .services .col3{padding:24px 20px 20px}
    .about2 ul li{
        display:inline-block;
        margin:0 8px 10px 0;
    }
}