/* =========================================
   ПРОПОРЦИОНАЛЬНАЯ ДИЗАЙН-ЕДИНИЦА (--pf)

   1px на десктопе (>=1440px) — все размеры совпадают с исходными.
   На 768–1439px уменьшается пропорционально (см. конец mobile.css),
   благодаря чему секции услуг и портфолио сжимаются целиком, сохраняя
   десктопную раскладку: пропорции, переносы строк и отступы не меняются.
   ========================================= */
:root {
    /* портфолио и услуги (эталонная ширина блока 1121px) */
    --pf: 1px;
    /* секция «о нас»: слоган + описание + телефон (эталон 1400px) */
    --pa: 1px;
}

html {
    height: 100%;
    cursor: url('../img/cursor.svg'), auto;
}

a,
button,
input,
textarea,
select,
label,
.header-burger,
.slider-arrow,
.dot,
.close-expand,
[onclick] {
    cursor: url('../img/cursor.svg'), pointer !important;
}

/* Скрываем бургер на ПК по умолчанию */
.header-burger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1000 !important;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    padding: 0;
    z-index: 1100;
}

.header-burger span {
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: 0.3s;
}

/* =========================================
   BASE SETTINGS
   ========================================= */
body {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    background-color: #F0E7FF;
    margin: 0;
    padding-top: 100px;
    position: relative;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    cursor: url('../img/cursor.svg'), auto;
}

.container {
    width: 1357.5px;
    margin: 0 auto;
    padding: 0 15px;
}

/* =========================================
   HEADER
   ========================================= */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    background-color: #5D3A99;
    color: #FFFFFF;
    box-sizing: border-box;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 0 65px;
    z-index: 1000;
}

.header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* Лого не сжимается никогда: при нехватке места ужимается nav-сторона */
    flex-shrink: 0;
}

.header-img {
    flex-shrink: 0;
}

.header-content {
    display: flex;
    justify-content: flex-end;
    /* Снимает встроенный минимум flex-элемента, иначе блок кнопок
       отказывается сжиматься и выдавливает лого */
    min-width: 0;
}

.header-btns {
    display: flex;
    align-items: center;
    /* Отступ текучий, а не фиксированный. С жёсткими 93px на 1426px
       оставалось всего 33px запаса до лого — а разные браузеры меряют
       ширину строки чуть по-разному, и в Firefox этого запаса могло
       не хватить. Формула линейна: 70px при 1426px, 93px при 1920px. */
    column-gap: clamp(70px, calc(3.6px + 4.66vw), 93px);
    /* nowrap вместо wrap: с wrap меню при нехватке места переносилось бы
       на вторую строку — в одном браузере переносилось бы, в другом нет.
       Теперь вместо переноса просто сжимаются отступы. */
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.btn {
    font-family: "Montserrat", sans-serif;
    font-size: 21px;
    font-weight: 300;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-btn {
    font-family: "Montserrat", sans-serif;
    background-color: #FFFFFF;
    border-radius: 7px;
    padding: 5.5px 27px;
    font-size: 21px;
    font-weight: 500;
    color: #5D3A99;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.header-rect {
    height: 17px;
    width: 1px;
    margin: 0 12px;
    flex-shrink: 0;
}

/* =========================================
   MAIN SECTION (About Us)
   ========================================= */
.main-container {
    /* Отступ сверху у блока слогана. Ровно на столько же опущен телефон,
       чтобы его верх совпал с верхом слогана, а низ — с низом описания. */
    --about-top: calc(39 * var(--pa));
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    gap: calc(20 * var(--pa));
    align-items: stretch;
}

.left-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: calc(39 * var(--pa));
}

.aboutus {
    padding-top: var(--about-top, 39px);
    padding-bottom: 0;
}

.aboutus .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 calc(20 * var(--pa));
    height: calc(201 * var(--pa));
    border-radius: calc(20 * var(--pa));
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.8));
    background-size: 120%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

/* Слоган — единственный h1 страницы. Раньше это были два блочных <div>;
   flex-колонка сохраняет ту же раскладку в две строки, а margin-top
   у подзаголовка продолжает работать. */
.aboutus-heading {
    display: flex;
    flex-direction: column;
}

.abotus-title {
    font-weight: 500;
    font-size: calc(54 * var(--pa));
    text-transform: uppercase;
    color: #000;
}

.aboutus-subtitle {
    font-weight: 700;
    font-size: calc(54 * var(--pa));
    text-transform: uppercase;
    color: #000;
    margin-top: calc(10 * var(--pa));
}

.aboutus-desc-container {
    width: calc(1000 * var(--pa));
    margin: auto;
    height: calc(350 * var(--pa));
    padding: calc(34 * var(--pa)) calc(46 * var(--pa)) calc(34 * var(--pa)) calc(44 * var(--pa));
    border-radius: calc(20 * var(--pa));
    border: calc(2 * var(--pa)) solid #5D3A99;
    background-image: linear-gradient(rgba(34, 34, 34, 0.02), rgba(34, 34, 34, 0.02));
    background-size: cover;
    background-position: center;
    font-size: calc(22 * var(--pa));
    line-height: 160%;
    color: #000000;
    box-sizing: border-box;
}

.aboutus-desc-hivens {
    font-weight: 800;
    font-size: calc(24 * var(--pa));
}

.mobile {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Телефон по высоте равен двум блокам «о нас» (слоган + описание)
   и выровнен по ним сверху и снизу. Ширина считается из высоты по
   исходным пропорциям мокапа 254x516, поэтому видео, кнопка play
   и панель плеера внутри масштабируются вместе с ним (они заданы в %). */
.mobile-container {
    margin-top: var(--about-top, 39px);
    height: calc(100% - var(--about-top, 39px));
    width: auto;
    max-width: 100%;
    aspect-ratio: 254 / 516;
    border-radius: 11.811% / 5.814%;
    overflow: hidden;
}

.mobile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   SERVICES
   ========================================= */
.services {
    padding: 39px 0 0 0;
    width: 100%;
}

/* Заголовок секции услуг. Намеренно вынесен ЗА пределы .services-container:
   тот — grid с четырьмя фиксированными колонками, и заголовок внутри него
   стал бы пятым элементом сетки и сломал бы раскладку. Геометрия
   (max-width, margin, padding-right) повторяет контейнер, чтобы заголовок
   был выровнен по левому краю первой плитки. */
.services-title {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto calc(20 * var(--pf)) auto;
    padding-right: 15px;
    box-sizing: border-box;
    font-weight: 800;
    font-size: calc(28 * var(--pf));
    line-height: 1.2;
    color: #000;
}

.services-container {
    display: grid;
    grid-template-columns: calc(200 * var(--pf)) calc(230 * var(--pf)) calc(270 * var(--pf)) calc(300 * var(--pf));
    gap: calc(40 * var(--pf));
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 15px;
    box-sizing: border-box;
    justify-content: start;
}

.service-block {
    height: calc(90 * var(--pf));
    border-radius: calc(20 * var(--pf));
    background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
    display: flex;
    align-items: center;
    padding: 0 calc(20 * var(--pf));
    box-sizing: border-box;
    transition: opacity 0.3s ease;
    min-width: 0;
}

.services-container:hover .service-block:not(:hover) {
    opacity: 0.45;
}

.service-logo {
    width: calc(40 * var(--pf));
    height: calc(40 * var(--pf));
    margin-right: calc(15 * var(--pf));
    flex-shrink: 0;
}

.service-text {
    font-weight: 700;
    font-size: calc(18 * var(--pf));
    line-height: 1.2;
    color: #000;
    /* Слова не рвутся посреди слова — перенос возможен только между словами */
    word-break: normal;
    overflow-wrap: normal;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
    min-width: 0;
}

/* =========================================
   PORTFOLIO CONTAINER
   ========================================= */
.portfolio {
    padding: 39px 0 0 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
}

.portfolio-container {
    position: relative;
    width: calc(1121 * var(--pf));
    height: calc(411 * var(--pf));
    /* Высота закрытого слайдера */
    background-image: linear-gradient(rgba(240, 231, 255, 0.5), rgba(240, 231, 255, 0.5));
    border: 1px solid #7B61FF;
    border-radius: calc(40 * var(--pf));
    margin: 0;
    padding: calc(30 * var(--pf));
    box-sizing: border-box;
    overflow: hidden;
    transition: height 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ОТКРЫТОЕ СОСТОЯНИЕ (Базовый класс) */
.portfolio-container.expanded {
    display: block !important;
    transition: height 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* === ВЫСОТЫ ДЛЯ 7 КЕЙСОВ (ДЕСКТОП) === */
.portfolio-container.expanded.case-1 {
    height: calc(1099 * var(--pf));
}

.portfolio-container.expanded.case-2 {
    height: calc(916 * var(--pf));
}

.portfolio-container.expanded.case-3 {
    height: calc(638 * var(--pf));
}

.portfolio-container.expanded.case-4 {
    height: calc(656 * var(--pf));
}

.portfolio-container.expanded.case-5 {
    height: calc(712 * var(--pf));
}

.portfolio-container.expanded.case-6 {
    height: calc(717 * var(--pf));
}

.portfolio-container.expanded.case-7 {
    height: calc(743 * var(--pf));
}

/* =========================================
   SLIDER VIEW (PREVIEW)
   ========================================= */
#slider-view {
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease;
}

.portfolio-title {
    align-self: flex-start;
    margin-left: calc(60 * var(--pf));
    margin-top: 0;
    margin-bottom: calc(20 * var(--pf));
    font-weight: 800;
    font-size: calc(28 * var(--pf));
}

.slides-window {
    width: calc(931 * var(--pf));
    height: calc(270 * var(--pf));
    position: relative;
    overflow: hidden;
    margin: auto;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(44 * var(--pf));
    height: calc(44 * var(--pf));
    background-color: #5D3A99;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-arrow img {
    width: calc(5 * var(--pf));
    height: calc(6 * var(--pf));
    display: block;
}

.slider-arrow.prev {
    left: calc(30 * var(--pf));
}

.slider-arrow.next {
    right: calc(30 * var(--pf));
}

/* ТОЧКИ (ФИКСИРОВАННЫЕ ВНИЗУ) */
.portfolio-dots {
    display: flex;
    gap: calc(8 * var(--pf));
    justify-content: center;
    position: absolute;
    bottom: calc(30 * var(--pf));
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    z-index: 20;
    margin: 0;
}

.dot {
    width: calc(10 * var(--pf));
    height: calc(10 * var(--pf));
    background-color: #D6C7FF;
    border-radius: 50%;
    cursor: pointer;
}

.dot.active {
    background-color: #5D3A99;
}

.slide {
    display: none;
    width: 100%;
    height: 100%;
}

.slide.active {
    display: block;
}

.btn-more {
    width: calc(177 * var(--pf));
    height: calc(40 * var(--pf));
    background-color: #5D3A99;
    color: #FFFFFF;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(12 * var(--pf));
    font-weight: 500;
    font-size: calc(18 * var(--pf));
    transition: 0.3s ease;
    z-index: 5;
}

.btn-more:hover {
    background-color: #4B3191;
    opacity: 0.9;
}

/* Контейнер, который накладывается на угол правой картинки и имитирует пустоту */
.btn-cutout {
    position: absolute;
    bottom: calc(-1 * var(--pf));
    right: calc(-1 * var(--pf));
    background-color: #F0E7FF;
    /* Цвет фона твоего сайта */
    padding: calc(12 * var(--pf)) 0 0 calc(12 * var(--pf));
    /* Пространство от кнопки до краев "выреза" */
    border-top-left-radius: calc(20 * var(--pf));
    z-index: 10;
}

/* Эти два псевдоэлемента рисуют обратные скругления, чтобы вырез был плавным */
.btn-cutout::before {
    content: "";
    position: absolute;
    top: calc(-20 * var(--pf));
    right: 0;
    width: calc(20 * var(--pf));
    height: calc(20 * var(--pf));
    background-color: transparent;
    border-bottom-right-radius: calc(20 * var(--pf));
    box-shadow: calc(10 * var(--pf)) calc(10 * var(--pf)) 0 0 #F0E7FF;
}

.btn-cutout::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(-20 * var(--pf));
    width: calc(20 * var(--pf));
    height: calc(20 * var(--pf));
    background-color: transparent;
    border-bottom-right-radius: calc(20 * var(--pf));
    box-shadow: calc(10 * var(--pf)) calc(10 * var(--pf)) 0 0 #F0E7FF;
}

/* Сетки для превью слайдов (Desktop) */
.portfolio-grid {
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: 100%;
}

/* Правая колонка: картинка + кнопка */
.grid-right {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: calc(359 * var(--pf));
}

/* Картинка в правой колонке */
.grid-right .img-main {
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: calc(20 * var(--pf));
    flex-shrink: 0;
}

/* Кнопка Подробнее — под правой картинкой, 9px отступ */
.grid-right .btn-more-wrap {
    margin-top: calc(9 * var(--pf));
    width: 100%;
}

.grid-right .btn-more-wrap .btn-more {
    width: 100%;
    height: calc(40 * var(--pf));
}

/* Левая картинка: высота = высота правой картинки + 9px + 40px кнопки, 12px справа */
.grid-left {
    flex: 1;
    margin-right: calc(12 * var(--pf));
    align-self: stretch;
}

.grid-left .img-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(20 * var(--pf));
    display: block;
}

/* Слайд 5 — одна картинка + кнопка под ней справа */
.portfolio-grid-single {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
}

.img-main-single {
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: calc(20 * var(--pf));
}

.btn-more-wrap--single {
    margin-top: calc(9 * var(--pf));
    width: calc(359 * var(--pf));
}

.btn-more-wrap--single .btn-more {
    width: 100%;
    height: calc(40 * var(--pf));
}

.img-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(20 * var(--pf));
}

.img-side-top {
    width: 100%;
    height: calc(218 * var(--pf));
    object-fit: cover;
    border-radius: calc(20 * var(--pf));
}

.grid-right-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: calc(40 * var(--pf));
    width: 100%;
}

.img-side-small {
    width: calc(170 * var(--pf));
    height: calc(80 * var(--pf));
    object-fit: cover;
    border-radius: calc(20 * var(--pf));
    position: absolute;
    left: 0;
    bottom: 0;
    border: calc(5 * var(--pf)) solid #ffffff;
    box-sizing: border-box;
    z-index: 10;
}

.grid-1img-2slides {
    width: calc(341 * var(--pf));
    height: calc(268 * var(--pf));
}

.grid-1img-3slides,
.grid-1img-4slides,
.grid-1img-5slides,
.grid-1img-6slides,
.grid-1img-7slides {
    width: calc(385 * var(--pf));
    height: calc(290 * var(--pf));
}

.grid-2img-2slides,
.grid-2img-3slides,
.grid-2img-4slides,
.grid-2img-5slides,
.grid-2img-6slides,
.grid-2img-7slides {
    width: calc(452 * var(--pf));
    height: calc(230 * var(--pf));
}

.img1-2slides,
.img1-3slides,
.img1-4slides,
.img1-5slides,
.img1-6slides,
.img1-7slides {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(20 * var(--pf));
}

.img2-2slides,
.img2-3slides,
.img2-4slides,
.img2-5slides,
.img2-6slides,
.img2-7slides {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(20 * var(--pf));
}


/* =========================================================
   DETAILED CASES (ОТКРЫТЫЕ КЕЙСЫ - DESKTOP)
   ========================================================= */
#cases-wrapper {
    width: 100%;
    height: 100%;
}

.case-view-item {
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease;
    display: none;
    opacity: 0;
}

.case-header {
    position: absolute;
    top: calc(40 * var(--pf));
    left: calc(60 * var(--pf));
    right: calc(60 * var(--pf));
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    margin-bottom: 0;
}

.close-expand {
    width: calc(44 * var(--pf));
    height: calc(44 * var(--pf));
    background-color: #5D3A99;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}

.close-expand svg {
    width: calc(24 * var(--pf));
    height: calc(24 * var(--pf));
}

.close-expand:hover {
    background-color: #4B3191;
}

/* Общая сетка для контента кейса */
.case-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.case-grid .item {
    position: absolute;
}

.case-grid .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(20 * var(--pf));
    display: block;
}

.case-grid .text-1,
.case-grid .text-2,
.case-grid .text-3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: calc(18 * var(--pf));
    line-height: 1.2;
    color: #000;
}

/* --- КЕЙС 1 (Peugeot) - DESKTOP (Top 100px - сохранено) --- */
#case-1 .case-grid {
    width: calc(950 * var(--pf));
    left: calc(40 * var(--pf));
    top: calc(100 * var(--pf));
}

#case-1 .img-1 {
    top: 0;
    left: 0;
    width: calc(574 * var(--pf));
    height: calc(267 * var(--pf));
}

#case-1 .img-2 {
    top: 0;
    left: calc(582 * var(--pf));
    width: calc(343 * var(--pf));
    height: calc(447 * var(--pf));
}

#case-1 .text-1 {
    top: calc(286 * var(--pf));
    left: 0;
    width: calc(550 * var(--pf));
}

#case-1 .img-3 {
    top: calc(460 * var(--pf));
    left: calc(0 * var(--pf));
    width: calc(569 * var(--pf));
    height: calc(239 * var(--pf));
}

#case-1 .text-2 {
    top: calc(490 * var(--pf));
    left: calc(580 * var(--pf));
    width: calc(369 * var(--pf));
}

#case-1 .img-4 {
    top: calc(649 * var(--pf));
    left: calc(465 * var(--pf));
    width: calc(465 * var(--pf));
    height: calc(280 * var(--pf));
}

#case-1 .text-3 {
    top: calc(730 * var(--pf));
    left: 0;
    width: calc(450 * var(--pf));
}

/* --- КЕЙС 2 (Solgar) --- */
#case-2 .case-grid {
    width: 100%;
    height: 100%;
    left: calc(50 * var(--pf));
    top: calc(20 * var(--pf));
}

#case-2 .img-1 {
    top: calc(80 * var(--pf));
    left: 0;
    width: calc(290 * var(--pf));
    height: calc(447 * var(--pf));
}

#case-2 .text-1 {
    top: calc(80 * var(--pf));
    left: calc(310 * var(--pf));
    width: calc(600 * var(--pf));
}

#case-2 .img-2 {
    top: calc(210 * var(--pf));
    left: calc(300 * var(--pf));
    width: calc(650 * var(--pf));
    height: calc(280 * var(--pf));
}

#case-2 .img-3 {
    top: calc(540 * var(--pf));
    left: 0;
    width: calc(205 * var(--pf));
    height: calc(292 * var(--pf));
}

#case-2 .img-4 {
    top: calc(500 * var(--pf));
    left: calc(210 * var(--pf));
    width: calc(501 * var(--pf));
    height: calc(350 * var(--pf));
}

#case-2 .text-2 {
    top: calc(515 * var(--pf));
    left: calc(610 * var(--pf));
    width: calc(300 * var(--pf));
}

/* --- КЕЙС 3 (Autorepar) --- */
#case-3 .case-grid {
    position: absolute;
    top: calc(30 * var(--pf));
    left: calc(50 * var(--pf));
    width: 100%;
    height: 100%;
}

#case-3 .img-1 {
    top: calc(270 * var(--pf));
    left: 0;
    width: calc(341 * var(--pf));
    height: calc(268 * var(--pf));
}

#case-3 .text-1 {
    top: calc(80 * var(--pf));
    left: 0;
    width: calc(350 * var(--pf));
}

#case-3 .img-2 {
    top: calc(80 * var(--pf));
    left: calc(355 * var(--pf));
    width: calc(302 * var(--pf));
    height: calc(372 * var(--pf));
}

#case-3 .img-3 {
    top: calc(80 * var(--pf));
    left: calc(670 * var(--pf));
    width: calc(262 * var(--pf));
    height: calc(372 * var(--pf));
}

#case-3 .text-2 {
    top: calc(457 * var(--pf));
    left: calc(352 * var(--pf));
    width: calc(600 * var(--pf));
}

/* --- КЕЙС 4 (Citroen Wraps) --- */
#case-4 .case-grid {
    position: absolute;
    top: calc(30 * var(--pf));
    left: calc(50 * var(--pf));
    width: 100%;
    height: 100%;
}

#case-4 .img-1 {
    top: calc(80 * var(--pf));
    left: calc(0 * var(--pf));
    width: calc(385 * var(--pf));
    height: calc(338 * var(--pf));
}

#case-4 .text-1 {
    top: calc(100 * var(--pf));
    left: calc(400 * var(--pf));
    width: calc(500 * var(--pf));
}

#case-4 .img-2 {
    top: calc(240 * var(--pf));
    left: calc(400 * var(--pf));
    width: calc(532 * var(--pf));
    height: calc(338 * var(--pf));
}

#case-4 .text-2 {
    top: calc(440 * var(--pf));
    left: calc(0 * var(--pf));
    width: calc(400 * var(--pf));
}

/* --- КЕЙС 5 (Video) --- */
#case-5 .case-grid {
    position: absolute;
    top: calc(30 * var(--pf));
    left: calc(50 * var(--pf));
    width: 100%;
    height: 100%;
}

#case-5 .img-1 {
    top: calc(190 * var(--pf));
    left: calc(0 * var(--pf));
    width: calc(935 * var(--pf));
    height: calc(348 * var(--pf));
}

#case-5 .text-1 {
    top: calc(80 * var(--pf));
    left: calc(0 * var(--pf));
    width: calc(1000 * var(--pf));
}

#case-5 .text-2 {
    top: calc(550 * var(--pf));
    left: calc(0 * var(--pf));
    width: calc(950 * var(--pf));
}

/* --- КЕЙС 6 (Citroen SMM) --- */
#case-6 .case-grid {
    position: absolute;
    top: calc(20 * var(--pf));
    left: calc(40 * var(--pf));
    width: 100%;
    height: 100%;
}

#case-6 .img-1 {
    top: calc(220 * var(--pf));
    left: calc(0 * var(--pf));
    width: calc(300 * var(--pf));
    height: calc(414 * var(--pf));
}

#case-6 .text-1 {
    top: calc(85 * var(--pf));
    left: 0;
    width: calc(700 * var(--pf));
}

#case-6 .img-2 {
    top: calc(220 * var(--pf));
    left: calc(270 * var(--pf));
    width: calc(513 * var(--pf));
    height: calc(246 * var(--pf));
}

#case-6 .img-3 {
    top: calc(90 * var(--pf));
    left: calc(750 * var(--pf));
    width: calc(294 * var(--pf));
    height: calc(378 * var(--pf));
}

#case-6 .text-2 {
    top: calc(485 * var(--pf));
    left: calc(320 * var(--pf));
    width: calc(600 * var(--pf));
}

/* --- КЕЙС 7 (Peugeot SMM) --- */
#case-7 .case-grid {
    position: absolute;
    top: calc(30 * var(--pf));
    left: calc(50 * var(--pf));
    width: 100%;
    height: 100%;
}

#case-7 .img-1 {
    top: calc(60 * var(--pf));
    left: calc(30 * var(--pf));
    width: calc(262 * var(--pf));
    height: calc(262 * var(--pf));
}

#case-7 .img-2 {
    top: calc(335 * var(--pf));
    left: calc(35 * var(--pf));
    width: calc(237 * var(--pf));
    height: calc(109 * var(--pf));
}

#case-7 .img-3 {
    top: calc(230 * var(--pf));
    left: calc(280 * var(--pf));
    width: calc(211 * var(--pf));
    height: calc(211 * var(--pf));
}

#case-7 .img-4 {
    top: calc(230 * var(--pf));
    left: calc(500 * var(--pf));
    width: calc(462 * var(--pf));
    height: calc(211 * var(--pf));
}

#case-7 .img-5 {
    top: calc(425 * var(--pf));
    left: calc(750 * var(--pf));
    width: calc(211 * var(--pf));
    height: calc(211 * var(--pf));
}

#case-7 .text-1 {
    top: calc(65 * var(--pf));
    left: calc(300 * var(--pf));
    width: calc(650 * var(--pf));
}

#case-7 .text-2 {
    top: calc(450 * var(--pf));
    left: calc(30 * var(--pf));
    width: calc(600 * var(--pf));
}

#case-7 .text-3 {
    top: calc(510 * var(--pf));
    left: calc(30 * var(--pf));
    width: calc(700 * var(--pf));
}


/* =========================================
   CONTACTS, FOOTER, MODALS
   ========================================= */
.contacts {
    margin-top: 39px;
    padding-bottom: 50px;
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: flex-start;
}

.contacts-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 64px;
    width: 1121px;
    justify-content: flex-end;
}

.contacts-info {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 16px 0;
    align-items: center;
}

.contact-row {
    display: contents;
    font-weight: 500;
    font-size: 18px;
    color: #000;
}

.contact-row .contact-text {
    font-weight: 500;
    font-size: 18px;
}

.contact-row .contact-text:first-child {
    text-align: left;
}

.contact-row .contact-text:last-child {
    text-align: left;
    white-space: nowrap;
}

.contact-sep {
    /* Полей нет намеренно: линия — прямой потомок .contacts-wrapper,
       и расстояние до почты слева и до кнопки справа задаёт её gap.
       Собственный margin здесь снова сделал бы зазоры разными. */
    margin: 0;
    flex-shrink: 0;
}

.contact-text {
    text-decoration: none;
    color: #000;
    transition: opacity 0.3s;
}

.contact-text:hover {
    opacity: 0.7;
}

.contact-button {
    width: 300px;
    height: 60px;
    background-color: #5D3A99;
    color: #FFF;
    font-weight: 500;
    font-size: 22px;
    border-radius: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: 0.3s;
}

.contact-button:hover {
    background-color: #4B3191;
}

.footer {
    height: 100px;
    background-color: #5D3A99;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-top: auto;
}

.footer-inner {
    display: flex;
    align-items: flex-start;
}

.footer-logo {
    margin-left: 65px;
    margin-top: 33px;
}

.footer-copyright {
    margin-left: 17px;
    margin-top: 33px;
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    color: #FFF;
    line-height: 1.4;
}

/* MODAL */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* dvh учитывает панели встроенных браузеров (Telegram, TikTok):
       там окно ниже обычного, и 100% отсчитывалось бы от неверной высоты. */
    height: 100dvh;
    background: rgba(18, 11, 31, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 9999;
    justify-content: center;
    /* align-items: center здесь НЕ годится: если форма выше экрана,
       флексбокс обрезает её сверху, и до верха уже не докрутить.
       Центрирование делает margin: auto на .modal-content. */
    opacity: 0;
    /* Без прокрутки кнопка «Отправить» недостижима на экранах ниже 631px:
       это телефоны в ландшафте, iPhone SE и окно TikTok на iOS. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 0;
    transition: all 0.4s;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    position: relative;
    width: 850px;
    height: auto;
    /* Центрирует по обеим осям и при этом позволяет прокрутку,
       когда форма выше окна (см. комментарий у .modal-overlay). */
    margin: auto;
    background: #5D3A99;
    border-radius: 30px;
    padding: 50px 80px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(30px) scale(0.9);
    transition: all 0.4s;
}

.modal-overlay.active .modal-content {
    transform: translateY(0) scale(1);
}

.modal-title {
    color: #FFF;
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 30px;
    width: 100%;
}

.modal-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.input-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modal-input {
    width: 100%;
    height: 50px;
    background: #F1E9FF;
    border: none;
    border-radius: 15px;
    padding: 0 25px;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
}

.modal-textarea {
    width: 100%;
    height: 160px;
    background: #F1E9FF;
    border: none;
    border-radius: 15px;
    padding: 20px 25px;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    resize: none;
}

.textarea-wrapper {
    width: 100%;
    position: relative;
}

.file-upload-label {
    position: absolute;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
}

.modal-recaptcha {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 5px;
}

.modal-submit {
    width: 228px;
    height: 40px;
    background: #FFF;
    color: #5D3A99;
    border: none;
    border-radius: 15px;
    font-size: 20px;
    font-weight: 600;
    margin-top: 15px;
    cursor: pointer;
    transition: 0.3s;
}

.modal-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Обёртка поле + подсказка */
.input-field-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Подсказка под полем */
.field-hint {
    font-size: 11px;
    color: #C084FC;
    margin-top: 4px;
    min-height: 16px;
    display: none;
    padding-left: 6px;
}

.field-hint--textarea {
    margin-top: 6px;
    margin-bottom: 2px;
    display: none;
}

/* Подсветка невалидного поля */
.modal-input.field-invalid,
.modal-textarea.field-invalid {
    border: 1.5px solid #C084FC !important;
    box-shadow: 0 0 0 1px #C084FC;
}

/* Цвет placeholder-предупреждения */
.modal-input.field-invalid::placeholder,
.modal-textarea.field-invalid::placeholder {
    color: #C084FC;
}

.modal-close {
    position: absolute;
    top: 25px;
    right: 25px;
    background: none;
    border: none;
    cursor: pointer;
    transition: 0.3s;
}

.modal-close:hover {
    transform: rotate(90deg);
}

.modal-consent {
    width: 100%;
    margin-top: 4px;
    margin-bottom: 4px;
}

.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.consent-checkbox {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #fff;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s;
}

.consent-checkbox:checked {
    background: #fff;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%235D3A99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

.consent-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.consent-link {
    color: #fff;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    cursor: pointer;
}

.consent-link:hover {
    opacity: 0.8;
}

/* SVG Backgrounds */
.svg-background,
.svg-background4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.svg-background2,
.svg-background3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.svg-background img {
    position: absolute;
    top: 40px;
    right: 0;
    width: 1200px;
    height: 1700px;
}

.svg-background2 img {
    position: absolute;
    top: -550px;
    left: 25%;
    transform: translateX(100px);
    width: 1200px;
    height: 1409px;
}

.svg-background3 img {
    position: absolute;
    top: 100px;
    left: 0%;
    transform: translateX(-700px);
    width: 2219px;
    height: 1088px;
}

.svg-background4 img {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-400px);
    width: 2219px;
    height: 1988px;
}

/* Privacy */

.privacy-policy-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10001;
    justify-content: center;
    align-items: center;
}

.privacy-policy-content {
    background: white;
    padding: 30px;
    border-radius: 15px;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.privacy-policy-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #5D3A99;
}

/* =========================================
   КНОПКА PLAY
   SVG теперь чистый вектор без SVG-фильтров и без shape-rendering="crispEdges"
   (именно они давали пиксельные края: фильтр растризуется в размер 80×80
   и растягивается, а crispEdges отключает сглаживание).
   Тень возвращена через CSS — она рисуется в разрешении экрана.
   ========================================= */
.case5-play-icon,
#mobilePlayBtn img {
    -webkit-filter: drop-shadow(0 2px 3px rgba(93, 58, 153, 0.28));
    filter: drop-shadow(0 2px 3px rgba(93, 58, 153, 0.28));
    image-rendering: auto;
}

/* =========================================
   СЛАЙД 5 (1 КАРТИНКА НА ВЕСЬ ЭКРАН)
   ========================================= */
.portfolio-grid-full {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: calc(20 * var(--pf));
}

.img-main-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(20 * var(--pf));
    display: block;
}

/* Третья картинка (только мобилка) — скрыта на десктопе */
.img-third {
    display: none;
}

/* Десктоп: обёртка для слайдов 6/7 ведёт себя как обычный блок */
.grid-right-img-wrap {
    display: block;
    width: 100%;
}

.grid-right-img-wrap picture {
    display: block;
    width: 100%;
}

.grid-right-img-wrap picture img {
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: calc(20 * var(--pf));
}
/* =========================================
   Переносы абзацев внутри текстов кейсов.
   .brk-desktop — разделитель для десктопной раскладки,
   .brk-mobile  — пустой блок-разрыв, включается только на мобилке
   (см. css/mobile.css, блок «ОТКРЫТЫЕ КЕЙСЫ — МОБИЛЬНАЯ РАСКЛАДКА»).
   ========================================= */
.brk-mobile {
    display: none;
}

.brk-desktop {
    /* Разрыв абзаца внутри одного текстового блока. Раньше здесь стояли
       22 символа U+2800 (BRAILLE PATTERN BLANK), которые «добивали»
       строку до конца и тем выталкивали следующий текст на новую.
       В Montserrat такого глифа нет: Chrome подставлял шрифт, где он
       невидим, а Safari — где он рисуется точками, и на слайде
       появлялись странные значки. Теперь это блок высотой в одну
       строку (1.2em при line-height 1.2) — тот же результат,
       одинаково во всех браузерах. */
    display: block;
    height: 1.2em;
}

/* Пустой абзац-разделитель между абзацами в блоке «о нас».
   Высота — ровно одна строка (line-height 1.6), как давал прежний
   символ U+2800 внутри <p>. Причина замены та же: в Safari этот
   символ рисовался видимыми точками. */
.text-gap {
    height: 1.6em;
}