/* ============================================================
   Portfolio redesign — Vexoo-inspired
   Affects: homepage "наши работы" block + /portfolio (.m-portfolio)
   Markup НЕ меняется. Только переопределяем визуал поверх site.css.
   ============================================================ */

/* ---------- Lenis smooth scroll: обязательные стили ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ---------- highlight-text spans ---------- */
/* Слово — не рвётся; буквы внутри инлайн-блочные для анимации opacity */
.ht-word {
    display: inline-block;
    white-space: nowrap;
}
.ht-char {
    display: inline-block;
    will-change: opacity;
}

/* ---------- Отключаем старую wow/fadeInLeft на списке и заголовках ---------- */
/* (теперь работает scroll-highlight через JS) */
.first-content .list-x li.wow,
.first-content .list-x li.fadeInLeft,
.first-content .list-x li.animated,
.first-content .title-main.wow,
.first-content .title-main.fadeInLeft,
.first-content .title-main.animated {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* ---------- "Почему BrainTeam" список — большой quote-стиль (monolog-style) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&display=swap');

.first-content .list-x {
    padding: 0 !important;
    margin: 40px 0 0 !important;
    list-style: none;
}

/* Убираем розовые крестики */
.first-content .list-x li::after,
.first-content .list-x li::before {
    display: none !important;
    content: none !important;
}

/* Большой текст-цитата */
.first-content .list-x li {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: clamp(16px, 1.6vw, 22px) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.005em !important;
    color: rgba(240, 238, 232, 0.92) !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
    position: relative;
}

/* Последний пункт — мягкий фейд правого края, как «understood.» у monolog */
.first-content .list-x li:last-child {
    -webkit-mask-image: linear-gradient(90deg, #000 60%, rgba(0,0,0,0.35) 100%);
            mask-image: linear-gradient(90deg, #000 60%, rgba(0,0,0,0.35) 100%);
}

/* На мобиле текст чуть меньше и фейд аккуратнее */
@media (max-width: 767.98px) {
    .first-content .list-x li {
        font-size: clamp(15px, 4vw, 18px) !important;
        margin-bottom: 10px !important;
    }
    .first-content .list-x li:last-child {
        -webkit-mask-image: none;
                mask-image: none;
        opacity: 0.7;
    }
}

/* ---------- Hero (bymonolog-style): фон-фото + halftone canvas сверху ---------- */
#h-main,
#h-service {
    background: #0e0e0e !important; /* убираем родной радиал-градиент / inline фон */
    position: relative;
    overflow: hidden;
}

/* На страницах с #h-service inline-style фон стоит на .h-service-main — убиваем его. */
#h-service .h-service-main {
    background: transparent !important;
}

/* Фон-картинка (keyvisual) как pseudo */
#h-main::before,
#h-service::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/img/hero-keyvisual.avif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
    filter: brightness(0.85) saturate(0.95);
}

/* Canvas с halftone — над фото */
#h-main .bt-hero-canvas,
#h-service .bt-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    display: block;
    mix-blend-mode: soft-light;
    opacity: 0.8;
    /* фейд только снизу — сверху canvas виден ровно до края, без светлой полосы под шапкой */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,0.4) 92%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,0.4) 92%, transparent 100%);
}

/* Контент hero — выше всего. Шапку (.h-fixed-top) НЕ трогаем — она fixed. */
#h-main > *:not(.bt-hero-canvas):not(.h-fixed-top),
#h-service > *:not(.bt-hero-canvas):not(.h-fixed-top) {
    position: relative;
    z-index: 2;
}

/* Если .h-fixed-top находится глубже (через include head.php), вытащим её обратно как fixed */
#h-service .h-fixed-top,
#h-main .h-fixed-top {
    position: fixed !important;
    z-index: 12 !important;
}

/* ---------- «О нас»: фон hero под цвет фоток (чёрный), чтобы квадрат фото не выделялся ----------
   #slider растянут на всю ширину и имел background:#141414 — это и был светлый «квадрат»
   вокруг фото. Делаем чёрным под цвет фона фоток (#000). */
.h-slider-team { background: #000; }
#slider { background: #000 !important; }

/* Мобайл: слайдер «О нас» рисует фото квадратом innerHeight×innerHeight —
   на узком экране лица выходят слишком крупными. Уменьшаем ~на 35%. */
@media (max-width: 768px) {
    #slider canvas { transform: scale(0.65) translateY(-130px); transform-origin: center; }
    .slider-inner { position: absolute !important; left: 15px; right: 15px; bottom: 248px; }
    /* высота по контенту — длинные цитаты больше не режутся нижней границей */
    #slider-content { width: auto !important; height: auto !important; min-height: 88px; padding: 14px 20px !important; }
    .title-contact-page { bottom: 132px; }
    .title-contact-page .double__arrow { bottom: -52px; }
    #pagination { bottom: 90px; }
}

/* ---------- Мобайл: CTA только фикс-кнопкой внизу, не в хедере ----------
   В хедере на мобиле «оставить заявку» налезала на иконки. Убираем её из
   шапки и оставляем только нижнюю прилипшую кнопку (.button-application-mobile). */
@media (max-width: 768px) {
    /* Цезарь на мобиле был приглушён до opacity .2 (site.css) — почти не видно.
       Поднимаем, чтобы статуя читалась под меню. */
    #h-cesare_container { opacity: 0.5 !important; }
    .h-open-modal { display: none !important; }
    /* Форсируем прилипание к низу: что-то сбивало position на relative,
       из-за чего кнопка вылезала наверх и налезала на хедер. */
    .button-application-mobile {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 12 !important;
    }
}

/* ---------- Заглушка обложки кейса (когда фон ещё не загружен) ---------- */
.bt-cover-ph {
    object-fit: cover;
    filter: none !important;       /* снять brightness(15%) карточек главной */
    transform: none !important;    /* и масштаб — заглушка статична и приглушена */
    background: #1d1d1d;
}

/* ---------- intl-tel-input v23: адаптация под тёмные формы ---------- */
/* Скрытый текст для скринридеров. Штатный clip:rect ломается, когда у
   родителя .iti__flag стоит transform: scale() (transform создаёт containing
   block и клиппинг старого clip перестаёт работать) — поэтому жёстко прячем,
   иначе «Kazakhstan +7» вылезает поверх поля (видно на форме r-s-number). */
.iti__a11y-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.iti { width: 100%; display: block; }
.iti input.f-input,
.iti input.r-s-number {
    padding-left: 52px !important;   /* место под флаг */
}
/* Форма «обратный звонок»: штатный шрифт инпута 32px — номер не помещался
   целиком. Уменьшаем, чтобы +7 700 400 3202 влезал полностью. */
.iti input.r-s-number,
.r-s-left-button input.r-s-number {
    font-size: 22px !important;
    position: relative;
    top: -4px;   /* номер на уровне флага */
    height: auto !important;
    padding-bottom: 14px !important;  /* отлепляем номер/флаг от линии — граница ниже */
}
/* Флаг и стрелка — только на форме «обратный звонок» (модалку не трогаем) */
.r-s-left-button .iti__selected-country-primary {
    top: -12px;
}
/* Светлая форма: стрелка вниз должна быть тёмной, иначе не видно */
.r-s-left-button .iti__arrow {
    border-top-color: #1f1f1f !important;
}
.r-s-left-button .iti__arrow--up {
    border-top-color: transparent !important;
    border-bottom-color: #1f1f1f !important;
}
/* Кнопка выбора страны (флаг) */
.iti__country-container { z-index: 5; }
.iti__selected-country,
.iti__selected-country-primary {
    background: transparent !important;
    border-radius: 0;
}
.iti__selected-country:hover,
.iti__selected-country-primary:hover,
.iti__selected-country:focus,
.iti__selected-country-primary:focus { background: transparent !important; }

/* Флаг крупнее и аккуратнее (scale не ломает выравнивание спрайта) */
.iti__flag {
    transform: scale(1.45);
    transform-origin: center;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12) !important;
}
.iti__flag-box { margin-right: 18px !important; margin-left: 2px; }
/* Флаг + стрелку поднимаем на ~5px, чтобы совпали по центру с цифрами +7 */
.iti__selected-country-primary {
    position: relative;
    top: -5px;
}
/* Выбранный флаг (без flag-box) — лёгкий сдвиг влево */
.iti__selected-country-primary .iti__flag {
    margin-right: 4px;
    margin-left: 2px;
}
/* Стрелка ближе к флагу */
.iti__selected-country .iti__arrow {
    margin-left: 5px;
}
/* Флаги в выпадающем списке тоже чуть крупнее */
.iti__country-list .iti__flag { transform: scale(1.25); }
.iti__country-list .iti__flag-box { margin-right: 14px !important; }
.iti__arrow {
    border-top-color: rgba(255,255,255,0.4) !important;   /* темнее */
    border-left-width: 3px !important;
    border-right-width: 3px !important;
    border-top-width: 4px !important;
}
.iti__arrow--up { border-bottom-color: rgba(255,255,255,0.4) !important; }

/* Выпадашка целиком — тёмное стекло */
.iti__dropdown-content {
    background: #161616;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7);
    color: #fff;
    overflow: hidden;
}
/* Строка поиска */
.iti__search-input {
    background: rgba(255,255,255,0.04);
    color: #fff;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 12px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    outline: none;
}
.iti__search-input::placeholder { color: rgba(255,255,255,0.4); }

/* Список стран — собственный скролл, не передаёт его странице */
.iti__country-list {
    background: transparent;
    max-height: 320px !important;          /* выше — видно больше стран */
    overflow-y: auto !important;
    overscroll-behavior: contain;          /* колесо скроллит список, а не страницу */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.iti__country-list::-webkit-scrollbar { width: 8px; }
.iti__country-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.22);
    border-radius: 8px;
}
.iti__country { color: rgba(255,255,255,0.85); padding: 9px 12px; }
.iti__country.iti__highlight,
.iti__country:hover { background: rgba(255,255,255,0.08); }
.iti__dial-code { color: rgba(255,255,255,0.5); }

/* ---------- Крестики (×) закрытия: × рисуем CSS-линиями, вращение строго по центру ---------- */
.close,
.close-menu {
    position: absolute;
    display: block !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;          /* прячем текстовый глиф × */
    color: transparent !important;
    transform-origin: 50% 50% !important;
    transition: transform 0.5s ease !important;
}
/* Размеры кликабельной области */
.close { width: 42px; height: 42px; top: 20px !important; right: 20px !important; }
.close-menu { width: 60px; height: 60px; }

/* Две линии, образующие × — идеально по центру */
.close::before,
.close::after,
.close-menu::before,
.close-menu::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62%;
    height: 2px;
    border-radius: 2px;
    background: var(--white);
    transform-origin: center;
}
.close-menu::before,
.close-menu::after { background: #1f1f1f; height: 3px; }

.close::before  { transform: translate(-50%, -50%) rotate(45deg); }
.close::after   { transform: translate(-50%, -50%) rotate(-45deg); }
.close-menu::before { transform: translate(-50%, -50%) rotate(45deg); }
.close-menu::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Hover: вращение всего бокса вокруг центра (× нарисован в центре → крутится ровно) */
.close:hover,
.close-menu:hover { transform: rotate(180deg); }

/* ---------- Блок «Довольные клиенты»: сетка 8 в ряд ---------- */
/* Ячейки с тонкими рамками формируют чёткую сетку, логотипы нормализованы по высоте */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 56px;
    margin-bottom: 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.clients-grid .item-client {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;   /* паддинг внутри трека грида — иначе колонки вылезают (обрезка на мобайле) */
    min-width: 0;             /* разрешаем ячейке сжиматься (grid min-width:auto иначе держит ширину) */
    height: 150px;
    padding: 26px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: filter 0.35s ease, opacity 0.35s ease, background 0.35s ease;
    filter: grayscale(1) brightness(1.7) contrast(0.85);
    opacity: 0.62;
}
.clients-grid .item-client:hover {
    filter: none;
    opacity: 1;
    background: rgba(255, 255, 255, 0.03);
}
.clients-grid .item-client img {
    max-height: 58px;          /* средний аспект — базовый */
    max-width: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
/* Компактные/квадратные эмблемы — даём больше высоты, иначе кажутся мелкими */
.clients-grid .item-client.cl-compact img {
    max-height: 84px;
    max-width: 72%;
}
/* Широкие вордмарки — ограничиваем по ширине, высота меньше */
.clients-grid .item-client.cl-wide img {
    max-height: 50px;
    max-width: 92%;
}
.clients-grid .item-client picture { display: contents; }
/* Логотип-ссылка на кейс: занимает всю ячейку и центрирует лого */
.clients-grid .item-client-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}

/* Кнопка «Показать ещё» */
.clients-more-wrap {
    text-align: center;
    margin-bottom: 80px;
}
.clients-more-btn {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 14px 30px;
    cursor: pointer;
    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}
.clients-more-btn:hover {
    color: #0e0e0e;
    background: #ffffff;
    border-color: #ffffff;
}

@media (max-width: 991.98px) {
    .clients-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .clients-grid .item-client { height: 120px; padding: 18px; }
    .clients-grid .item-client img { max-height: 46px; }
    .clients-grid .item-client.cl-compact img { max-height: 68px; }
    .clients-grid .item-client.cl-wide img { max-height: 40px; }
}
@media (max-width: 575.98px) {
    .clients-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .clients-grid .item-client { height: 96px; padding: 14px; }
    .clients-grid .item-client img { max-height: 36px; }
    .clients-grid .item-client.cl-compact img { max-height: 54px; }
    .clients-grid .item-client.cl-wide img { max-height: 32px; }
}

/* ---------- Поля форм: вводимый текст обычным регистром (плейсхолдер — заглавные) ---------- */
.f-input { text-transform: none !important; }
.f-input::placeholder { text-transform: uppercase; }
.f-input::-webkit-input-placeholder { text-transform: uppercase; }
.f-input:-moz-placeholder { text-transform: uppercase; }
.f-input::-moz-placeholder { text-transform: uppercase; }
.f-input:-ms-input-placeholder { text-transform: uppercase; }

/* ---------- Hover на ссылки в футере ---------- */
.menu-footer a {
    transition: color 0.3s ease, padding-left 0.3s ease;
}
.menu-footer a:hover {
    color: #ffffff !important;
    padding-left: 6px;
}

/* ---------- Подпись "Перейти в портфолио" слева от стрелки (на hover) ---------- */
.right-service-imgs .link-portfolio-current .bt-arrow-label {
    position: absolute;
    right: calc(100% + 14px);   /* слева от квадрата-стрелки */
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.01em;
    color: #fff;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 10px 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
}
.right-service-imgs .link-portfolio-current:hover .bt-arrow-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ---------- Меню услуг: название в одну строку, меню переносится целыми пунктами ---------- */
#h-service .menu-services {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 14px;
}
#h-service .menu-services li {
    flex: 0 0 auto;          /* не растягивать/сжимать пункт */
    white-space: nowrap;      /* название услуги не ломается */
    padding: 0 30px;          /* отступы + место под разделитель "/" */
}
@media (max-width: 767.98px) {
    #h-service .menu-services li {
        flex: 0 0 auto;
        padding: 0 16px;
        white-space: nowrap;
    }
}

/* ---------- Фильтр по отраслям (чипы) — под меню услуг, по центру ---------- */
#h-service .container-service .bt-filter {
    margin-top: 28px;
}
.bt-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;   /* центрируем чипы */
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}
.bt-filter-chip {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.62);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 11px 18px;
    cursor: pointer;
    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}
.bt-filter-chip:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.07);
}
.bt-filter-chip.is-active {
    color: #0e0e0e;
    background: #ffffff;
    border-color: #ffffff;
}
.bt-filter-empty {
    padding: 60px 0 100px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 1199.98px) { .wrapper-portfolio-filter { padding: 0 32px; } }
@media (max-width: 767.98px) {
    .wrapper-portfolio-filter { padding: 0 16px; margin-bottom: 20px; }
    .bt-filter { gap: 8px; }
    .bt-filter-chip { font-size: 13px; padding: 9px 14px; }
}

/* ---------- Маркеры отрасли на карточке ---------- */
.m-portfolio .m-portfolio-item .bt-card-badges {
    position: absolute;
    top: 26px;
    left: 26px;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: none;
    max-width: calc(100% - 90px); /* не наезжать на hover-стрелку справа */
}
.m-portfolio .m-portfolio-item .bt-card-badge {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -0.005em;
    color: #fff;
    background: rgba(10, 10, 10, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 7px 12px;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .m-portfolio .m-portfolio-item .bt-card-badges { top: 18px; left: 18px; gap: 5px; }
    .m-portfolio .m-portfolio-item .bt-card-badge { font-size: 11px; padding: 6px 10px; }
}

/* ---------- Header: прозрачная сверху, с подложкой при скролле ---------- */
/* Наверху (над hero) — прозрачная. При скролле (.sticked) — лёгкое тёмное стекло,
   чтобы контент под фиксированной шапкой не просвечивал и не наезжал на иконки. */
.h-fixed-top {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    transition: background 0.35s ease, backdrop-filter 0.35s ease, top 0.3s ease;
}

.h-fixed-top.sticked {
    background: rgba(10, 10, 10, 0.72) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Лого: уменьшаем на 30%, оставляя точку привязки слева */
.h-fixed-top .h-logo {
    display: inline-block;
    transform-origin: left center;
    transform: scale(0.8);
}

.m-portfolio,
.m-portfolio.mt-0,
.wrapper-portfolio .m-portfolio {
    margin-top: 48px !important;     /* такой же зазор как боковые отступы */
    margin-bottom: 120px;
    padding-left: 48px;
    padding-right: 48px;
}

@media (max-width: 1199.98px) {
    .m-portfolio,
    .m-portfolio.mt-0,
    .wrapper-portfolio .m-portfolio { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 767.98px) {
    .m-portfolio,
    .m-portfolio.mt-0,
    .wrapper-portfolio .m-portfolio { padding-left: 16px; padding-right: 16px; }
}

/* Equal gutters via flex gap; override Bootstrap negative margins */
.m-portfolio .row {
    margin: 0 !important;
    gap: 24px;
    justify-content: flex-start;
}

/* ---------- 2-column grid ---------- */
@media (min-width: 768px) {
    .m-portfolio .row > .col-lg-4 {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
        padding: 0 !important;
    }
}

/* On phones — 1 column, smaller gap */
@media (max-width: 767.98px) {
    .m-portfolio .row { gap: 16px; }
    .m-portfolio .row > .col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 !important;
    }
}

/* ---------- Card frame ---------- */
.m-portfolio .m-portfolio-item {
    padding: 14px 14px 64px !important;
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, #1a1a1a 0%, #0e0e0e 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 22px;
    transition:
        border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    isolation: isolate;
    will-change: transform;
}

.m-portfolio .m-portfolio-item:hover {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 24px 80px -24px rgba(0, 0, 0, 0.75);
}

/* Чуть приподнимаем карточку при hover на десктопе */
@media (min-width: 992px) and (hover: hover) {
    .m-portfolio .m-portfolio-item:hover {
        transform: translateY(-4px);
    }
}

/* убираем старый тёмный градиент-оверлей снизу карточки */
.m-portfolio .m-portfolio-item::after {
    content: none !important;
}

/* ---------- Picture-wrapper = клипящая рамка с border-radius ---------- */
/* В карточке два <picture>: первый — с logo (скрыт), второй — с фоновой картинкой */
.m-portfolio .m-portfolio-item > picture:first-of-type {
    display: none !important;
}

.m-portfolio .m-portfolio-item > picture {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden; /* зум картинки клипится этим радиусом, не наезжает на текст */
    background: #0a0a0a;
}

/* ---------- Image inside the picture-frame ---------- */
.m-portfolio .m-portfolio-item .portfolio-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0 !important; /* радиус теперь на picture */
    transition:
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    display: block;
    filter: brightness(0.94) saturate(1.02);
    transform: scale(1.08);
    backface-visibility: hidden;
}

.m-portfolio .m-portfolio-item:hover .portfolio-bg {
    transform: scale(1.001);
    filter: brightness(1.02) saturate(1.08);
}

/* ---------- Slideshow overlay (только во время crossfade) ---------- */
/* Overlay создаётся в DOM только в момент swap и удаляется после.
   Поэтому он сразу должен совпадать с bg-img по transform/filter
   (включая hover-состояние, если пользователь сейчас наводит). */
.m-portfolio .m-portfolio-item .bt-slideshow-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.08);
    filter: brightness(0.94) saturate(1.02);
    transition:
        opacity 0.7s ease-out,
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    display: block;
}

/* На hover overlay скейл/фильтр синхронизирован с bg-img */
.m-portfolio .m-portfolio-item:hover .bt-slideshow-overlay {
    transform: scale(1.001);
    filter: brightness(1.02) saturate(1.08);
}

.m-portfolio .m-portfolio-item .bt-slideshow-overlay.is-visible {
    visibility: visible;
    opacity: 1;
}


/* ---------- Hover arrow в правом верхнем углу карточки ---------- */
.m-portfolio .m-portfolio-item .responsive-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
}
.m-portfolio .m-portfolio-item .responsive-link::after {
    content: '';
    position: absolute;
    top: 26px;
    right: 26px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M7 17L17 7M17 7H9M17 7V15' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    opacity: 0;
    transform: translate(-6px, 6px) scale(0.85);
    transition:
        opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 4;
}
.m-portfolio .m-portfolio-item:hover .responsive-link::after {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* ---------- Скрываем элементы старого дизайна ---------- */
.m-portfolio .m-portfolio-item .portfolio-logo,
.m-portfolio .m-portfolio-item .link-portfolio {
    display: none !important;
}

/* ---------- Подпись внизу карточки ---------- */
.m-portfolio .m-portfolio-item .c-i-portfolio {
    position: absolute !important;
    bottom: 22px !important;
    left: 44px !important;
    right: 44px !important;
    width: auto !important;
    opacity: 1 !important;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-right: 0 !important;
    z-index: 3;
}

.m-portfolio .m-portfolio-item .t-portfolio {
    font-family: 'Inter', sans-serif;
    font-weight: 500 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    color: #ffffff;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.m-portfolio .m-portfolio-item .desc-portfolio {
    font-family: 'Inter', sans-serif;
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, 0.5);
    padding-right: 0 !important;
    text-align: right;
    max-width: 55%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.8;
}

.m-portfolio .m-portfolio-item:hover .desc-portfolio {
    color: rgba(255, 255, 255, 0.95);
    opacity: 1;
}

/* ---------- Per-character Wipe with wave stagger (Vexoo style) ---------- */
/* JS оборачивает каждую букву: <span.bt-wipe --i=N><span.bt-wipe-orig>M</span><span.bt-wipe-dup>M</span></span> */
.m-portfolio .m-portfolio-item .bt-wipe {
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.2;
}

/* Space — просто промежуток, без вайп-слоёв */
.m-portfolio .m-portfolio-item .bt-wipe-space {
    overflow: visible;
    width: 0.28em; /* ширина пробела */
}

.m-portfolio .m-portfolio-item .bt-wipe-orig,
.m-portfolio .m-portfolio-item .bt-wipe-dup {
    display: block;
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
    transition-delay: calc(var(--i, 0) * 0.015s);
    transform-origin: center center;
    backface-visibility: hidden;
}

/* Original: в покое на месте */
.m-portfolio .m-portfolio-item .bt-wipe-orig {
    transform: translateY(0) skewY(0deg);
}

/* Duplicate: лежит снизу с запасом */
.m-portfolio .m-portfolio-item .bt-wipe-dup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(160%) skewY(8deg);
}

/* HOVER — буквы заменяются по очереди, создавая волну */
.m-portfolio .m-portfolio-item:hover .bt-wipe-orig {
    transform: translateY(-160%) skewY(8deg);
}
.m-portfolio .m-portfolio-item:hover .bt-wipe-dup {
    transform: translateY(0) skewY(0deg);
}


/* На мобильной — title чуть меньше, caption под title */
@media (max-width: 575.98px) {
    .m-portfolio .m-portfolio-item .c-i-portfolio {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        left: 24px !important;
        right: 24px !important;
        bottom: 18px !important;
    }
    .m-portfolio .m-portfolio-item .t-portfolio { font-size: 19px !important; }
    .m-portfolio .m-portfolio-item .desc-portfolio {
        font-size: 13px !important;
        text-align: left;
        max-width: 100%;
    }
    .m-portfolio .m-portfolio-item .responsive-link::after {
        top: 18px; right: 18px;
        width: 36px; height: 36px;
        background-size: 16px 16px;
    }
}

/* ---------- "Посмотреть все работы" — в стиле карточки ---------- */
.m-portfolio .all-portfolio {
    height: 100%;
    background: linear-gradient(180deg, #1a1a1a 0%, #0e0e0e 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 22px;
    padding: 0 !important;
    font-size: 26px !important;
    transition:
        border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    position: relative;
}
.m-portfolio .all-portfolio:hover {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 24px 80px -24px rgba(0, 0, 0, 0.75);
}
@media (min-width: 992px) and (hover: hover) {
    .m-portfolio .all-portfolio:hover { transform: translateY(-4px); }
}
.m-portfolio .all-portfolio > .container-a-p {
    border: 0 !important;
    background: transparent !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
}
.m-portfolio .all-portfolio > .container-a-p > span {
    padding: 0 32px !important;
    font-weight: 500 !important;
    font-size: 28px !important;
    text-transform: none !important;
    letter-spacing: -0.01em;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.m-portfolio .all-portfolio:hover > .container-a-p > span {
    transform: translateX(6px);
}
.m-portfolio .all-portfolio .border_text { padding-right: 10px; }

/* ---------- Scroll-in: переопределяем wow .fadeIn ---------- */
.m-portfolio .wow.fadeIn {
    opacity: 0;
    transform: translateY(56px);
    filter: blur(10px);
    transition:
        opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1s cubic-bezier(0.22, 1, 0.36, 1);
    animation: none !important;
}
.m-portfolio .wow.fadeIn.animated {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Стагер: внутри каждой пары задержка для второй карточки */
.m-portfolio .row > .col-lg-4:nth-child(2n) .wow.fadeIn {
    transition-delay: 0.12s;
}

/* Уважение к reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .m-portfolio .m-portfolio-item,
    .m-portfolio .m-portfolio-item .portfolio-bg,
    .m-portfolio .m-portfolio-item::before,
    .m-portfolio .wow.fadeIn,
    .m-portfolio .m-portfolio-item .responsive-link::after,
    .m-portfolio .m-portfolio-item .bt-wipe-orig,
    .m-portfolio .m-portfolio-item .bt-wipe-dup {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }
    .m-portfolio .wow.fadeIn { opacity: 1; }
    /* В reduced-motion дубль текста не нужен */
    .m-portfolio .m-portfolio-item .bt-wipe-dup { display: none !important; }
}

/* ============================================================
   Услуги «ЧТО МЫ УМЕЕМ» на мобилке — свободный горизонтальный scroll
   (owl-инициализация отключена в script.js: листал по 1 со снапом)
   ============================================================ */
@media (max-width: 767.98px) {
    .container-mobile-slider .carousel-service-mobile {
        display: -webkit-box !important;
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;   /* инерционный свайп на iOS */
        scroll-snap-type: x proximity;        /* мягкое выравнивание, не «рвёт» */
        scroll-padding-left: 16px;
        gap: 14px;
        padding: 20px 16px 8px;
        margin: 0 -16px;                       /* лента до краёв экрана */
        scrollbar-width: none;                 /* Firefox */
    }
    .container-mobile-slider .carousel-service-mobile::-webkit-scrollbar {
        display: none;                         /* WebKit */
    }
    .container-mobile-slider .carousel-service-mobile .can-do-item {
        flex: 0 0 80%;                         /* видно край следующей карточки */
        max-width: 80%;
        min-width: 0;
        scroll-snap-align: start;
        margin: 0;
    }
    .container-mobile-slider .carousel-service-mobile .c-img {
        width: 100%;
    }
}