/* ======= RESET (минимальный) ======= */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; 
font-family: 'Nunito Sans', sans-serif;}
img { max-width:100%; height:auto; display:block; }
ul,ol { list-style:none; }
a { text-decoration:none; color:inherit; }
:focus-visible { outline:2px solid #9FBD8F; outline-offset:2px; }




@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&display=swap');

body {
  font-family: 'Nunito Sans', sans-serif;
}











/* ======= БАЗОВАЯ СЕТКА ======= */
.container { max-width:1440px; margin:0 auto; padding:0 20px; }

/* ======= ХЕДЕР ======= */
.site-header{
  background:#fff;
  padding:12px 0;
  position:sticky; top:0;
  z-index:10005; /* ниже бургера/меню, но выше контента */
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
}
.logo img{ height:48px; width:auto; }

/* ======= ДЕСКТОП-МЕНЮ ======= */
.main-nav{ display:block; }
.main-nav__list{ display:flex; gap:32px; }
.main-nav__list a{
  font:400 16px/1.2;
  color:#222; transition:color .2s ease;
}
.main-nav__list a:hover{ color:#F0CA0F; }

/* ======= БУРГЕР ======= */
.burger{
  display:none; /* скрыт на десктопе */
  position:relative;
  width:36px; height:28px;
  border:0; background:transparent; cursor:pointer;
  z-index:10010; /* всегда выше сайдбара/бэкдропа */
}
.burger__line{
  position:absolute; left:0; right:0; height:2px; border-radius:2px;
  background:#222;
  transform-origin:center;
  transition:transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease;
}
.burger__line:nth-child(1){ top:4px; }
.burger__line:nth-child(2){ top:13px; }
.burger__line:nth-child(3){ bottom:4px; }

/* состояние крестика */
.burger.is-open .burger__line:nth-child(1){ top:13px; transform:rotate(45deg); }
.burger.is-open .burger__line:nth-child(2){ opacity:0; }
.burger.is-open .burger__line:nth-child(3){ bottom:auto; top:13px; transform:rotate(-45deg); }

/* ======= МОБИЛЬНЫЙ OFF-CANVAS ======= */
.backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.4);
  backdrop-filter:saturate(120%) blur(2px);
  z-index:9990;
  opacity:0; transition:opacity .25s ease;
  pointer-events:none;
}
.backdrop.is-visible{ opacity:1; pointer-events:auto; }

.mobile-drawer{
  position:fixed; top:0; right:0; bottom:0;
  width:280px; 
  max-width:85vw;
  background:#fff;
  transform:translateX(100%); /* полностью за пределами экрана */
  transition:transform .3s ease;
  z-index:10000; /* ниже бургера, выше бэкдропа */
  padding:24px; overflow:auto;
  box-shadow:none; /* в закрытом состоянии тени нет — не просвечивает */
}
.mobile-drawer.is-open{
  transform:translateX(0);
  box-shadow:-14px 0 28px rgba(0,0,0,.10);
}
.mobile-drawer__list{
	margin-top: 100px;
  display:flex; flex-direction:column; gap:18px;
}
.mobile-drawer__list a{
  display:block; padding:8px 0;
  font:400 18px/1.3;
  color:#222; transition:color .2s ease;
}
.mobile-drawer__list a:hover{ color:#0073e6; }

/* Блокируем прокрутку страницы при открытом меню */
.no-scroll{ overflow:hidden; }

/* ======= АДАПТИВ ======= */
@media (max-width:1200px){
  .main-nav{ display:none !important; }   /* ссылки скрыты на мобиле */
  .burger{ display:inline-flex !important; align-items:center; justify-content:center; }
}
@media (min-width:1201px){
  .main-nav{ display:block !important; }  /* ссылки видны на десктопе */
  .burger{ display:none !important; }
}

/* ======= ПОЛИРОВКА ======= */










/* === Два блока наверху === */
.top-blocks{
  margin-top:40px;
  display:flex;
  gap:20px;
  align-items:stretch;
}

.top-block{
  flex:1 1 0;
  position:relative;
  border-radius:40px;
}

/* цвета */
.top-block--gray{ background:#F3F3F5; }
.top-block--black{ background:#272727; }

/* Внутренняя сетка левого блока */
.top-block__inner{
  display:flex;
  flex-direction:column;
  justify-content:center;   /* центрируем контент по вертикали */
  padding:80px 40px;
}

/* Плашки-кнопки (телефон/звонок) */
.top-block__actions{
  display:flex;
  flex-wrap:wrap;       /* разрешаем перенос */
  gap:12px;
  margin-bottom:28px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#fff;
  color:#272727;
  border-radius:40px;
  padding:12px 20px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  will-change:transform;
}
.pill:hover{
    background:#e4e4e4;
}
.pill__icon{ width:18px; height:18px; display:block; }
.pill__text{ font-weight:600; font-size:14px; }

/* Контент слева */
.eyebrow{
  font-size:16px;
  color:#272727;
  margin-bottom:20px;
}

.hero-title{
  font-weight:400;
  font-size:40px;
  line-height:1.15;
  color:#272727;
  margin-bottom:20px;
}


.hero-desc{
  font-size:16px;
  line-height:1.6;
  color:#272727;
  margin:14px 0 36px;
  max-width:48ch;
}

/* Кнопка отправки */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 68px;
  border-radius:40px;
  border:1px solid transparent;
  font-weight:500;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer;
}
.btn--primary{ background:#FFDD2D; 
	color:#272727; 
  font-size: 16px;
margin-bottom: 10px;}

.btn--primary:hover{
  background:#F0CA0f;
}
.btn__icon{ width:18px; height:18px; display:block; }

/* Видео справа */
.video-wrap{ position:absolute; inset:0; }
.video-bg{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius: 40px;
}

/* ====== Десктоп ====== */
@media (min-width:1201px){
  .top-block{ 
    min-height:520px;    /* базовая высота */
    overflow:hidden;     /* обрезаем видео и тени */
  }
  .top-block--black{ aspect-ratio:auto; }
}

/* ====== Мобилка/планшет ====== */
@media (max-width:1200px){
  .top-blocks{ flex-direction:column; 
    gap:10px;}

  /* чёрный блок (видео) выше серого */
  .top-block--black{ 
    order:-1;
    aspect-ratio:16/9;   /* фиксируем высоту через пропорцию */
    min-height:auto;
  }

  .top-block--gray{
    overflow:visible;    /* контент формирует высоту */
    min-height:auto;
  }

  .top-block__inner{ padding:20px; }
  .hero-title{ font-size:34px; }
  .hero-desc{ font-size:15px; }

  .video-bg{
  border-radius: 20px;
}
.top-block{
  border-radius:20px;
}
}

/* мелкие девайсы */
@media (max-width:600px){
  .pill{ padding:9px 12px; }
  .pill__text{ font-size:14px; }
  .hero-title{ font-size:28px; }

  .top-block__actions{
    flex-direction:column; /* вертикально */
    align-items:flex-start;
  }
  .pill{
    width:100%;            /* на всю ширину */
    justify-content:center;
  }

  .btn--primary{
    width:100%;
    justify-content:center;
  }
}





















/* === Почему выбирают нас === */
.why{
  padding: 80px 0;
}
.why__title{
  font-weight:400;
  font-size:40px;   /* как h1 */
  line-height:1.15;
  color:#272727;
  margin-bottom:50px;
}
.why__content{
  display:flex;
  gap:40px;
  align-items:flex-start;
}
.why__image img{
  display:block;
  max-width:100%;
  border-radius:12px;
}
.why__points{
  flex:1;
  display:flex;
  gap:40px;
}
.why__col{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:28px;
}

.why-point{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.why-point__icon{
  width:22px;
  height:22px;
  flex-shrink:0;
  margin-top:3px;
}
.why-point__title{
  font-weight:500;
  font-size:18px;
  margin-bottom:6px;
  color:#272727;
}
.why-point__text{
  font-size:15px;
  line-height:1.5;
  color:#444;
}

/* ====== Адаптив ====== */
@media (max-width:1200px){
  .why__content{
    flex-direction:column;
    gap:30px;
  }
  .why__image{ display:none; }   /* картинка скрывается */
  .why__points{ flex-direction:column; gap:30px; }
  .why__col{ gap:24px; }
  .why__title{ font-size:34px; }
}

@media (max-width:600px){
  .why{ padding:60px 0; }
  .why__title{ font-size:28px; margin-bottom:30px; }
  .why-point__title{ font-size:16px; }
  .why-point__text{ font-size:14px; }
}














/* === Баннер "Онлайн-конструктор" (правильно) === */
.banner{
  background:#F3F3F5;
  border-radius:40px;
  margin-top:20px;
  overflow:hidden;                 /* чтобы картинка обрезалась по скруглению */
}
.banner__inner{
  display:flex;
  align-items:stretch;             /* тянем колонки по высоте друг друга */
  gap:40px;
  max-width:1440px;                /* центр + ограничение ширины */
  margin:0 auto;
  padding:0;                  /* боковые поля секции */
}

/* Левая колонка (контент) — даём вертикальные отступы здесь */
.banner__content{
  flex:1;
  padding:70px 40px 70px 40px;     /* верх/низ 70, слева 40 */
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width: 600px;
}

.banner__title{
  font-weight:400;
  font-size:40px;
  line-height:1.15;
  color:#272727;
  margin-bottom:20px;
}
.banner__text{
  font-size:16px;
  line-height:1.6;
  color:#333;
  margin-bottom:28px;
  max-width:50ch;
}

/* Ссылка с иконкой */
.banner__link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:500;
  font-size:16px;
  color:#272727;
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}

.banner__icon{
  width:108px;                     /* фиксированная ширина иконки */
  height:auto;
  display:block;
  flex-shrink:0;
}

/* Правая колонка (картинка) — без паддингов, во весь блок */
.banner__image{
  flex:1;
  display:flex;                    /* чтобы img мог занять 100% высоты колонки */
}
.banner__image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;                /* заполняет колонку без искажений */
  /* border-radius не нужен — секция режет углы через overflow:hidden */
}

/* ====== Адаптив ====== */
@media (max-width:1200px){
  .banner__inner{
    flex-direction:column;
    gap:20px;
  }
  .banner__image{ order:-1; }      /* картинка наверху */
  .banner__content{
    padding:20px 10px 30px 20px;             /* компактнее на мобиле */
  }
  .banner__title{ font-size:24px; }
  .banner__text{ margin-left:auto; margin-right:auto; }

  .banner__inner{
  padding:0 0px;                  /* боковые поля секции */
}
}

@media (max-width:600px){
  .banner{ border-radius:20px; }
  .banner__title{ font-size:20px; }
  .banner__text{ font-size:14px; }
  .banner__link{ font-size:14px; }
  .banner__icon{ width:108px; }
}






















/* === Технологии строительства === */
.tech{ padding:120px 0 60px 0; }
.tech__inner{ max-width:1440px; margin:0 auto; padding:0 20px; }



/* Сетка: четыре карточки в ряд */
.tech__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}

/* Карточка (вертикальная) */
.tech-card{
  border-radius:20px;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}


/* Медиа: десктоп — горизонтальная, высота 150px, кроп */
.tech-card__media{
  width:100%;
  height:150px;
  overflow:hidden;
}
.tech-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;   /* кропим без искажений */
  display:block;
}

/* Тело карточки (заголовок + текст) */
.tech-card__body{
  display:flex;
  flex-direction:column;
}
.tech-card__title{
  font-weight:700;
  font-size:18px;
  color:#111;
  padding:16px 16px 6px;
}
.tech-card__desc{
  font-size:15px;
  line-height:1.55;
  color:#444;
  padding:0 16px 18px;
}

/* ====== Адаптив ====== */
@media (max-width:1200px){
  .tech{ padding:70px 0 30px 0; }
  .tech__title{ font-size:34px; margin-bottom:28px; }

  /* Одна колонка; карточка — горизонтальная */
  .tech__grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .tech-card{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:12px;               /* внутренний отступ, т.к. теперь горизонтальная */
  }

  /* Слева квадрат 96×96, справа заголовок+текст (в одном столбце) */

  .tech-card{
  border-radius:0px;
}

  .tech-card__media{
    width:96px;
    height:96px;
    flex:0 0 96px;
    border-radius:8px;
    overflow:hidden;
  }
  .tech-card__body{ flex:1; }
  .tech-card__title{
    padding:0 0 6px;
    font-size:16px;
  }
  .tech-card__desc{
    padding:0;
    font-size:14px;
  }
}

@media (max-width:600px){
  .tech__title{ font-size:28px; }
  .tech-card{ padding:0px; gap:12px; }
  .tech-card__media{ width:88px; height:88px; flex-basis:88px; }
}





/* Ховер-зум только на устройствах с курсором (десктоп) */
@media (hover:hover) and (pointer:fine){
  /* вход быстрее */
  .tech-card:hover .tech-card__media img{
    transform: scale(1.06);
    transition: transform .32s cubic-bezier(.2,.6,.2,1);
  }
  /* выход медленнее */
  .tech-card:not(:hover) .tech-card__media img{
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
  }
}

/* Доступность: по табу тоже зум, если в карточке есть фокусируемые эл-ты */
.tech-card:focus-within .tech-card__media img{
  transform: scale(1.08);
}

/* Если у пользователя включено "уменьшить анимацию" */
@media (prefers-reduced-motion: reduce){
  .tech-card__media img{ transition: none; }
}



























/* === Типовые проекты === */
.projects{
  position:relative;            /* контейнер для стрелок */
  margin-top:80px;
  overflow:visible;             /* стрелки могут выступать */
}
.projects__inner{
  max-width:1440px;
  margin:0 auto;
  padding:0 20px;               /* боковые поля */
}

/* Заголовок используем why__title (уже есть стили) */

/* Табы */
.projects__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:24px 0 28px;
}
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border:1px solid #272727;
  border-radius:999px;
  background:#fff;
  color:#272727;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.chip:hover{
  background:#F0CA0F;
  color: #272727;
    border:1px solid #F0CA0F;
}
.chip--active{
  background:#FFDD2D;
  color:#272727;
  border-color:#FFDD2D;
}

/* Сцена и сетка 1:2 */
.projects__stage{
  position:relative;
}
.projects__grid{
  display:grid;
  grid-template-columns: 1.4fr 2fr;    /* 1:2 по ширине */
  gap:20px;
  align-items:stretch;
}
.projects__media{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  min-height:360px;                 /* базовая высота; можно менять */
}
.projects__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.projects__panel{
  background:#F3F3F5;
  border-radius:24px;
  min-height:360px;
}






/* Стрелки по бокам, выступающие за 1440 */
.projects__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border:0; border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  z-index:5;
}
.projects__arrow img{
  width:22px; height:22px; display:block;
}
.projects__arrow:hover{
    background:#F3F3F5;
}

/* Расположение за пределами контейнера 1440 */
/* Величина смещения = расстояние от края viewport до контейнера минус небольшой отрицательный отступ */
.projects__arrow--left{
  left: -60px;
  /* разворачиваем SVG */
}
.projects__arrow--left img{
  transform: scaleX(-1);
}
.projects__arrow--right{
  right: -60px;
}

/* Безопасные пределы на узких экранах, чтобы не уехали слишком далеко */
@media (max-width:1480px){
  .projects__arrow--left{ left: 8px; }
  .projects__arrow--right{ right: 8px; }
}

/* Адаптив: мобилка — стрелки скрыть, блоки в столбик */
@media (max-width:1200px){
  .projects__grid{
    grid-template-columns: 1fr;     /* одна колонка */
  }
  .projects__media{
    min-height:220px;
  }
  .projects__panel{
    min-height:220px;
  }
  .projects__arrow{
    display:none;
  }
}
@media (max-width:600px){
  .chip{ font-size:13px; padding:9px 12px; }

  .projects__grid {
  gap: 10px;
  }
}













/* === Карточка проекта в сером блоке === */
.project-card{
  padding:40px;
  display:flex;
  flex-direction:column;
  height:100%;
}

.project-card__title{
  font-weight:700;
  font-size:28px;
  margin-bottom:18px;
  color:#111;
}

.project-card__desc{
  font-size:15px;
  line-height:1.6;
  color:#333;
  margin-bottom:28px;
}

/* Теги-характеристики */
.project-card__tags{

  gap:16px 28px;
  margin-bottom:36px;
}

.project-tag{
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border-radius:40px;
  padding:10px 20px;
  border:none;
  margin-bottom: 12px;
}

.project-tag img{
  width:20px;
  height:20px;
  flex-shrink:0;
}

.project-tag__label{
  font-size:14px;
  color:#666;
}

.project-tag__value{
  font-size:14px;
  font-weight:700;
  color:#111;
  margin-left:4px;
}







/* Кнопка "Подробнее" */
.project-card__link{
  margin-top:auto; /* прижмёт вниз */
}

/* ====== Адаптив ====== */
@media (max-width:1200px){
  .project-card{
    padding:24px;
  }
  .project-card__title{ font-size:22px; }
  .project-card__desc{ font-size:14px; }
  .project-card__tags{
    grid-template-columns:1fr; /* все теги в колонку */
  }
}






/* Вьюпорт/трек/слайды */
.projects__viewport{
  overflow:hidden;            /* скрываем «соседние» слайды */
  border-radius:12px;         /* аккуратно режем углы содержимого */
}

/* трек может иметь зазор между слайдами на мобилке (см. п.3) */
.projects__track{
  display:flex;
  transition:transform .35s ease;
  will-change:transform;
}

/* контент слайда анимируем (а не сам контейнер ширины) */
.projects__slide .projects__grid{
  transition: transform .35s ease, opacity .35s ease;
}



.projects__slide{
  flex:0 0 100%;              /* ширина слайда = ширина вьюпорта */
  padding:0;                  /* внутренние отступы не нужны */
}


.projects__arrow[disabled]{
  opacity:.35;
  cursor:default;
  pointer-events:none;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}


@media (max-width:1200px){
  /* показываем край следующего: правый паддинг у окна + промежуток между карточками */
  .projects__viewport{
    overflow:hidden;
    padding-right:20px;   /* видно хвост следующего слайда */
  }
  .projects__track{
    gap:10px;             /* зазор между карточками */
  }
  .projects__slide{
    flex:0 0 calc(100% - 40px); /* каждая карточка уже ширины вьюпорта */
  }
}



.projects__viewport{ overflow:hidden; border-radius:12px; }
.projects__track{
  display:flex;
  will-change:transform;
  /* базовый transition можно оставить, но inline-стиль из JS важнее */
}
.projects__slide{ flex:0 0 100%; padding:0; }

/* Анимация “соседей” */
.projects__slide .projects__grid{ transition: transform .35s ease, opacity .35s ease; }
.projects__slide.is-active  .projects__grid{ opacity:1; }
.projects__slide.is-prev    .projects__grid,
.projects__slide.is-next    .projects__grid{  opacity:.9; }

/* Мобильный “пик” */
@media (max-width:1200px){
  .projects__viewport{ padding-right:10px; }
  .projects__track{ gap:10px; }
  .projects__slide{ flex:0 0 calc(100% - 48px); }
}


/* Режим выравнивания: тянем оба столбца на высоту слайда */
/* Выравнивание высоты карточек (вкл. на десктопе) */
/* Выравнивание высоты слайдов */
.projects--equalized .projects__slide,
.projects--equalized .projects__grid { height:100%; }

/* Внутренние колонки растягиваем только на десктопе (две колонки) */
@media (max-width:1200px){
  .projects__grid{ grid-template-columns: 1fr; }

  /* Фиксированная одинаковая высота верхнего блока с изображением */
  .projects__media{
    height:220px;        /* была min-height:220px — ставим фикс */
    border-radius:24px;
    overflow:hidden;
  }
  .projects__media img{
    width:100%; height:100%; object-fit:cover; display:block;
  }

  /* Нижний серый блок будет выравниваться JS-ом */
  .projects__panel{
    /* height задаст скрипт */
  }

  /* Стрелки скрываем как раньше */
  .projects__arrow{ display:none; }
}


















.btn-more {
  color: #272727;
  background-color: #fff;
    border: 1px solid #272727;
      margin-top: 40px;
      margin-bottom: 60px;
}

@media (max-width:1200px){
  .btn-more {
font-size: 14px;
      margin-top: 30px;
      margin-bottom: 50px;
}
}

.btn-more:hover {
  color: #272727;
  background-color: #FFDD2D;
    border: 1px solid #FFDD2D;
}






.bannerkids {
  background: #fff16c;
  margin-bottom: 120px;
}
@media (max-width:1200px){
.bannerkids {
  margin-bottom: 50px;
}
}


.work-card {
margin-bottom: 20px;
}
































/* === Наши работы === */
.works{ position:relative; margin-top:80px; overflow:visible; }
.works__inner{ max-width:1440px; margin:0 auto; padding:0 20px; }

/* Вьюпорт/трек/слайды */
.works__viewport{ overflow:hidden; }
.works__track{
  display:flex;
  gap:20px;                 /* промежуток между карточками */
  will-change:transform;
  transition:transform .35s ease;
}
.works__slide{
  flex:0 0 calc(50% - 10px); /* 2 карточки в ряд (gap=20 => по 10px на сторону) */
}

.works__stage{
  position: relative;   /* якорь для стрелок */
  overflow: visible;    /* стрелки не режутся за границей блока */
  z-index: 1;           /* на всякий случай выше фоновых слоёв */
}

/* Карточка */
.work-card{
  background:#F3F3F5;
  border-radius:24px;
  overflow:hidden;          /* чтобы картинка была без отступов */
  display:flex;
  flex-direction:column;
  height:100%;
}
.work-card__media img{
  display:block;
  width:100%;
  height:280px;             /* единая высота превью */
  object-fit:cover;
}
.work-card__body{
  padding:18px 20px 22px;
}
.work-card__title{
  font-weight:700;
  font-size:20px;
  color:#111;
  margin-bottom:10px;
}
.work-card__desc{
  font-size:15px;
  line-height:1.6;
  color:#333;
}







/* Мобилка: без слайдера, просто одна под другой */
@media (max-width:1200px){
  .works__viewport{ overflow:visible; }
  .works__track{ display:block; gap:0; transform:none !important; }
  .works__slide{ flex:none; width:auto; }
  .work-card + .work-card{ margin-top:16px; }
  .works__arrow{ display:none; } /* стрелки скрываем */
}


















/* === Наши работы (добавления) === */
.work-card{ position:relative; }
.work-card__media.work-media{
  position: relative;
  background:#000; /* подложка при загрузке */
  overflow: hidden;
}

.work-media__viewport{
  position: relative;
  width: 100%;
  height: 280px;        /* синхронизировано с .work-card__media img */
  touch-action: pan-y;  /* позволяем вертикальный скролл страницы */
  cursor: pointer;
}
.work-media__track{
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform .25s ease;
}
.work-media__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex: 0 0 100%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none; /* клики ловим контейнером */
}

/* Точки пагинации */
.work-media__dots{
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.work-media__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.5);
  padding: 0;
  line-height: 0;
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
}
.work-media__dot.is-active{
  background: #fff;
  transform: scale(1.1);
}
.work-media__dot:hover{ opacity: .85; }

/* Ховер-скраб на десктопе — легкая подсказка */
@media (hover:hover){
  .work-media__viewport {
    cursor: zoom-in; /* иконка лупы с плюсиком */
  }
}

/* Мобилка: карточки в столбик (оставляем из твоего блока) */
/* + дополнения для высоты на маленьких экранах */
@media (max-width: 600px){
  .work-media__viewport{ height: 220px; }
}

/* Лайтбокс (минимальный стиль, общий с сертификатами, можно переиспользовать твой) */
.lb{ position: fixed; inset: 0; background: rgba(0,0,0,.82); display: none; align-items: center; justify-content: center; z-index: 9999; }
.lb.is-open{ display: flex; }
.lb__frame{ position: relative; outline: none; max-width: 92vw; max-height: 92vh; }
.lb__img{ max-width: 92vw; max-height: 92vh; display:block; }
.lb__close, .lb__prev, .lb__next{
  position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 0; cursor: pointer;
}
.lb__close{ top: 0; right: 0; transform: none; padding: 10px; }
.lb__prev{ left: -56px; }
.lb__next{ right: -56px; transform: translateY(-50%) rotate(180deg); } /* та же стрелка, разворот для next */
.lb__btn-img{ width: 40px; height: 40px; opacity: .9; }
.lb__close .lb__btn-img{ width: 28px; height: 28px; opacity: .9; }
@media (max-width: 768px){
  .lb__prev{ left: 6px; }
  .lb__next{ right: 6px; }
}
















/* Стек баннеров — просто вертикальный список */
.banners-stack {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  gap: 10px;             /* расстояние между баннерами */
}
@media (max-width:1200px){
.banners-stack {
  margin-top: 50px;
    gap: 0px; 
}

.btn-works {
  margin-top: 10px;
}
}
/* Если вдруг без gap — страховка: */
.banners-stack .banner + .banner { margin-top: 20px; }

/* На мобилках всё уже учтено вашими баннер-стилями (картинка сверху и т.п.) */



.banner{
  position: relative;          /* якорь для бейджа */
  overflow: hidden;            /* уже есть — оставляем, чтобы скругления работали */
}

.banner__badge{
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  background: #fff;
  color: #272727;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;        /* клики проходят сквозь бейдж */
  white-space: nowrap;
}



/* Адаптив — уменьшим бейдж и отступы на мобилках */
@media (max-width:1200px){
  .banner__badge{
    left: 20px;      /* ставим к левому краю */
    right: auto;     /* убираем привязку к правому */
    padding: 7px 10px;
    font-size: 13px;
  }
}
@media (max-width:600px){
  .banner__badge{
    left: 20px;      /* ставим к левому краю */
    right: auto;     /* убираем привязку к правому */
    top: 20px;
    padding: 6px 10px;
    font-size: 12px;
  }
}





















/* === CTA: Оставьте заявку === */
/* Фон на всю ширину */
.cta{
  position:relative;
  background:#F3F3F5;
  overflow:hidden; /* если у картинки есть выступающие края */
}

/* Внутренний контейнер 1440 и «запас» справа под картинку */
.cta__inner{
  max-width:1440px;
  margin:0 auto;
  padding:60px 20px;
  position:relative;
  /* чтобы текст не налез на картинку справа — резервируем место */
  padding-right:clamp(20px, 35vw, 700px);
}

.cta__content{ max-width:720px; }
.cta__lead{ font-size:16px; line-height:1.6; color:#333; margin:12px 0 22px; }

/* Поля формы */
.field{ display:block; }
.field + .field{ margin-top:12px; }

.field input,
.field textarea{
  width:100%;
  background:#fff;
  border:1px solid #e7e7ea;
  border-radius:12px;
  padding:14px 16px;
  font:400 16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#222;
}
.field input::placeholder,
.field textarea::placeholder{ color:#9aa0a6; }
.field--textarea textarea{ min-height:120px; resize:vertical; }

/* Кнопка и чекбокс */
.cta__actions{ margin:18px 0 12px; }
.check{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14px; color:#555; max-width:56ch;
}
.check input{ width:18px; height:18px; margin-top:2px; }
.check a{ text-decoration:underline; }

/* Картинка справа: от верха до низа секции, упёрта в правый край */
.cta__image{
  position:absolute; right:0; top:0; bottom:0;
  display:block;
}
.cta__image img{
  height:100%; width:auto; display:block; object-fit:cover;
}

/* Адаптив */
@media (max-width:1200px){
  .cta__image{ display:none; }                 /* картинку скрываем */
  .cta__inner{ padding:40px 20px; padding-right:20px; }
  .cta__content{ max-width:none; }
  .btn--primary{ width:100%; justify-content:center; }
}
@media (max-width:600px){
  .field input, .field textarea{ font-size:15px; }
}










  .checkbox-wrapper-21 .control {
    display: block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: 18px;
  }
  .checkbox-wrapper-21 .control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }
  .checkbox-wrapper-21 .control__indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    background: #e6e6e6;
        border-radius: 4px;
  }
  .checkbox-wrapper-21 .control:hover input ~ .control__indicator,
  .checkbox-wrapper-21 .control input:focus ~ .control__indicator {
    background: #ccc;
  }
  .checkbox-wrapper-21 .control input:checked ~ .control__indicator {
    background: #272727;
  }
  .checkbox-wrapper-21 .control:hover input:not([disabled]):checked ~ .control__indicator,
  .checkbox-wrapper-21 .control input:checked:focus ~ .control__indicator {
    background: #272727;
  }
  .checkbox-wrapper-21 .control input:disabled ~ .control__indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
  }
  .checkbox-wrapper-21 .control__indicator:after {
    content: '';
    position: absolute;
    display: none;
  }
  .checkbox-wrapper-21 .control input:checked ~ .control__indicator:after {
    display: block;
  }
  .checkbox-wrapper-21 .control--checkbox .control__indicator:after {
    left: 8px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .checkbox-wrapper-21 .control--checkbox input:disabled ~ .control__indicator:after {
    border-color: #7b7b7b;
  }

  .check__text {
  font-size: 14px;
  color: #555;
  line-height: 1.4;
  display: inline-block;
  max-width: 56ch;   /* ограничиваем ширину, чтобы текст красиво переносился */
}

.check__text a {
  text-decoration: underline;
  color: inherit;
}







/* Ошибки формы */
.field.is-error input,
.field.is-error textarea{
  border-color:#e53935 !important;
  box-shadow:0 0 0 2px rgba(229,57,53,.08);
}

.check__text.is-error{
  color:#e53935;
  text-decoration:underline;
}






















/* ======= FOOTER ======= */
.site-footer{
  padding:48px 0 28px;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.04);
}
.site-footer__inner{
  max-width:1440px;
  margin:0 auto;
  padding:0 20px;
}

/* Верхняя часть */
.site-footer__top{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr 1.2fr; /* близко к макету */
  gap:40px;
  align-items:start;
}

.footer-logo img{ display:block; height:auto; }
.footer-legal{
  margin-top:18px;
  color:#9aa0a6;
  font-size:14px;
  line-height:1.6;
}

/* Меню */
.footer-menu{ list-style:none; margin:0; padding:0; }
.footer-menu li + li{ margin-top:16px; }
.footer-menu a{
  color:#272727;
  text-decoration:none;
  font-size:16px;
}
.footer-menu a:hover{ text-decoration:underline; }

/* Контакты и кнопка */
.footer-contacts{
  margin:0 0 22px;
  font-style:normal;
  color:#6b6f76;
  font-size:16px;
  line-height:1.6;
}
.footer-contacts a{
  color:#6b6f76;
  text-decoration:none;
}
.footer-contacts a:hover{ text-decoration:underline; }

/* Кнопка "Заказать звонок" — пилюля с контуром */
.footer-call{
  display:flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 28px;
  border-radius:999px;
  border:1.5px solid #272727;
  color:#272727;
  text-decoration:none;
  font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
}
.footer-call:hover{
  background:#272727;
color: #fff;
}

/* Нижняя полоса */
.site-footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid rgba(0,0,0,.06);
  color:#9aa0a6;
  font-size:14px;
}
.footer-dev a{
  color:#9aa0a6;
  text-decoration:none;
}
.footer-dev a:hover{ text-decoration:underline; }

/* ======= Адаптив ======= */
@media (max-width:1200px){
  .site-footer{ padding:32px 0 22px; }
  .site-footer__top{
    grid-template-columns: 1fr 1fr; /* как в макете — две колонки */
    gap:28px 24px;
  }

  /* растаскиваем блоки ближе к макету */
  .footer-col--brand{ grid-column:1 / -1; }
  .footer-col--contacts{ grid-column:1 / -1; }

  .footer-contacts{ margin-top:8px; }
  .footer-call{
    width:100%;
    height:56px;
    font-size:18px;
  }

  .site-footer__bottom{
    flex-wrap:wrap;
    gap:12px 20px;
  }
}

@media (max-width:600px){
  .footer-menu a{ font-size:16px; }
  .footer-contacts{ font-size:16px; }
  .footer-legal{ font-size:14px; }
}















/* === Страница "О компании" === */
.about-page{ margin:60px 0; }

.about__inner{
  display:flex;
  align-items:center;
  gap:90px;
}

.about__content{ flex:1; }
.about__image{ flex:1; }
.about__image img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:40px;
}

.about__eyebrow{
  font-size:16px;
  color:#272727;
  margin-bottom:12px;
}
.about__text p{ margin-bottom:16px; line-height:1.6; color:#272727; }

/* Адаптив */
@media (max-width:1200px){
  .about__inner{ flex-direction:column; gap:28px; }
  .about__image{ order:-1; }

  .about__image img{
  border-radius:20px;
}
}









/* === Секция "Собственное производство" === */
.about-prod{
  margin:80px 0;
}

.about-prod__inner{
  display:flex;
  align-items:center;
  gap:60px;
  margin-top:28px;
}

.about-prod__image{ flex:1; }
.about-prod__image img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:40px;
}

.about-prod__content{ flex:1; font-size:16px; line-height:1.6; color:#333; }
.about-prod__content p{ margin-bottom:16px; }

/* Мобилки */
@media (max-width:1200px){
  .about-prod__inner{ flex-direction:column; gap:24px; }

  .about-prod__image img{
  border-radius:24px;
}
}














/* === Этапы работ (десктоп: 2 ряда по 4 слота) === */
.about-steps{ margin:80px 0; }

.steps-grid{ margin-top:28px; display:flex; flex-direction:column; gap:34px; }

.steps-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:80px;                        /* расстояние между слотами */
  align-items:start;
}

.step{
  position:relative;               /* якорь для стрелки */
  display:flex; gap:12px; align-items:flex-start;
  max-width:320px;
}
.step--empty{ pointer-events:none; }

/* Номера + текст */
.step__num{
  font-weight:700; font-size:28px; line-height:1; color:#111; flex:0 0 auto;
}
.step__text{
  font-size:16px; line-height:1.4; color:#272727;
}

/* Стрелки: только между занятыми слотами */
.steps-row--top .step:not(.step--empty):nth-child(-n+3)::after{
  content:""; position:absolute; top:50%; right:-40px; transform:translateY(-50%);
  width:16px; height:16px;
  background:url('<?php echo esc_url(get_template_directory_uri()."/img/about/about-arrow.svg"); ?>') no-repeat center / contain;
  opacity:.4;
}
.steps-row--bottom .step:not(.step--empty):nth-last-child(n+2)::after{
  /* у 4 и 5 ставим стрелку вправо; у последнего (6) — нет */
  content:""; position:absolute; top:50%; right:-40px; transform:translateY(-50%);
  width:16px; height:16px;
  background:url('<?php echo esc_url(get_template_directory_uri()."/img/about/about-arrow.svg"); ?>') no-repeat center / contain;
  opacity:.4;
}

/* Адаптив: мобилка — просто список, без стрелок и пустых слотов */
@media (max-width:1200px){
  .steps-grid{ gap:20px; }
  .steps-row{ display:block; }
  .step--empty{ display:none; }
  .step{ max-width:none; }
  .step::after{ display:none !important; }
  .steps-row .step + .step{ margin-top:20px; }
}








/* === Секция "Факты/преимущества" === */
.about-facts{ margin:80px 0; }

.facts-grid{
  margin-top:40px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:40px 60px;
}

.fact{
  display:flex;
  flex-direction:row;    /* иконка + текст в строку */
  align-items:center;
  gap:14px;
  text-align:left;
}

.fact__icon{
  width:40px; height:40px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
}
.fact__text{
  font-size:16px;
  line-height:1.4;
  color:#272727;
  max-width:30ch;
}

/* Планшет: 2 колонки */
@media (max-width:1200px){
  .facts-grid{
    grid-template-columns: repeat(2, 1fr);
    gap:30px 20px;
  }
}

/* Мобилка: 1 колонка, выравнивание слева */
@media (max-width:600px){
  .facts-grid{
    grid-template-columns: 1fr;
    gap:20px;
  }
  .fact{ justify-content:flex-start; }
  .fact__icon{ width:32px; height:32px; }
  .fact__text{ font-size:15px; }
}












/* === Сертификаты === */
/* === Сертификаты === */
.certs { margin-top: 60px; 
margin-bottom: 100px;}

/* используем общие классы projects__* */
.certs .projects__viewport{ overflow:hidden; }
.certs .projects__track{ display:flex; gap:20px; will-change:transform; transition:transform .35s ease; }

/* 4 штуки по ширине контейнера с учётом gap */
.certs .projects__slide{
  flex: 0 0 calc((100% - 3 * 20px) / 4);
}

.cert{
  margin:0;
  background:#F3F3F5;
  border-radius:12px;
  overflow:hidden;
  display:block;
}
.cert img{
  display:block;
  width:100%;
  height:auto;
}

/* мобилки: свайп + «хвост» справа, стрелки скрыть */
@media (max-width:1200px){

  .certs { margin-top: 60px; 
margin-bottom: 60px;}

  .certs .projects__viewport{ padding-right:20px; }
  .certs .projects__track{ gap:10px; }
  .certs .projects__slide{ flex:0 0 calc(100% - 40px); } /* полноэкранная карточка с небольшим хвостом */
  .certs .projects__arrow{ display:none; }
}






/* Lightbox */
.lb {
  position:fixed; inset:0; z-index:1000; display:none;
  background:rgba(0,0,0,.7);
}
.lb.is-open{ display:flex; align-items:center; justify-content:center; 
z-index: 10006;}
.lb__frame{
  position:relative; max-width:90vw; max-height:90vh; outline:none;
}
.lb__img{
  display:block; max-width:90vw; max-height:90vh; object-fit:contain; border-radius:8px; background:#fff;
}

/* кнопки */
.lb__close, .lb__prev, .lb__next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px;height:44px;border:0;border-radius:50%;
  background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.lb__prev{ left:-60px; }
.lb__next{ right:-60px; }
.lb__close{
  top:-60px; right:0; transform:none; width:40px;height:40px;
}
.lb__btn-img{ width:22px; height:22px; display:block; }
.lb__prev .lb__btn-img{ transform:scaleX(-1); }

/* ужмём кнопки на узких экранах */
@media (max-width:900px){
  .lb__prev{ left:0px; top:50%; }
  .lb__next{ right:0px; top:50%; }
  .lb__close{ top:-50px; right:0px; }
}













.serv-title {
margin-top: 80px;
margin-bottom: 20px;
font-size: 52px;
}

.serv-text {
  max-width: 600px;
}


@media (max-width:1200px){
.serv-title {
margin-top: 40px;
margin-bottom: 20px;
font-size: 32px;
}

.serv-text {
font-size: 14px;
}
}












/* === Услуги === */
.services{ margin:80px 0; }
.services__lead{
  color:#6b6f76;
  font-size:16px;
  line-height:1.6;
  margin:8px 0 28px;
}

/* Гибкая сетка: 4 в ряд, перенос слева направо */
.services__grid{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}

/* 4 колонки на десктопе: вычисляем ширину с учётом gap */
.service-card{
  flex:0 0 calc((100% - 3 * 24px) / 4);
  background:#F3F3F5;
  border-radius:20px;
  padding:22px 24px;
  color:#272727;
}
.service-card__title{
  font-weight:700;
  font-size:20px;
  line-height:1.2;
  margin-bottom:10px;
  color:#222;
}
.service-card__text{
  font-size:15px;
  line-height:1.7;
  color:#555;
  margin-top:8px;
}

/* 3 колонки — если контейнер уже (планшеты/малые ноуты) */
@media (max-width:1200px){
  .service-card{ flex:0 0 calc((100% - 2 * 24px) / 3); }
}

/* 2 колонки */
@media (max-width:900px){
  .service-card{ flex:0 0 calc((100% - 24px) / 2); }
}

/* 1 колонка на мобилках */
@media (max-width:600px){
  .service-card{ flex:1 1 100%; }
  .service-card__title{ font-size:18px; }
  .service-card__text{ font-size:14.5px; }
}






















/* === Проект (детальная) === */
.project-page{ margin:40px 0 80px; }
.proj-hero{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:100px;
  align-items:start;
}

/* Галерея */
.proj-gallery{ position:relative; }
.proj-gallery__viewport{
  border-radius:40px;
  overflow:hidden;
  background:#eee;
  /* важно для жестов: вертикальный скролл разрешён, горизонталь — отдаём JS */
  touch-action: pan-y;
}

.proj-gallery__img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;
  object-fit:cover;
  /* отключаем нативный drag/select, чтобы свайп работал стабильно */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}



.proj-thumbs{
  display:flex; gap:12px; margin-top:14px; flex-wrap:wrap;
}
.proj-thumb{
  display:block; padding:0; border:0; cursor:pointer; background:none;
  border-radius:14px; overflow:hidden;
  width:96px; height:72px;
  outline:1.5px solid transparent;
  transition:outline-color .15s ease, transform .1s ease;
}
.proj-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.proj-thumb:hover{ transform:translateY(-1px); }
.proj-thumb.is-active{ outline-color:#272727; }

/* Правая колонка */
.proj-info{}
.proj-title{ font-weight:800; font-size:44px; line-height:1.15; color:#111; margin-bottom:14px; }
.proj-desc{ font-size:16px; line-height:1.6; color:#333; margin-bottom:18px; }

.proj-tags{
  display:flex; flex-wrap:wrap; gap:10px 12px; margin-bottom:18px;
}
.project-tag{
  display:inline-flex; align-items:center; gap:5px;
  color:#222; border-radius:90px; 
}
.project-tag img{ width:18px; height:18px; display:block; }
.project-tag__label{ color:#777; margin-right:4px; }
.project-tag__value{ font-weight:700; }

.proj-meta{ margin:10px 0 18px; }
.proj-meta__row{ 
  display:flex; 
  align-items:center; 
  gap:14px; 
  margin-top:8px; 
  margin-bottom: 20px;
  flex-wrap:wrap; 

}


.proj-meta__key{ color:#7a7a7a; }
.radio{ display:inline-flex; align-items:center; gap:8px; margin-right:16px; }
.radio input{ width:16px; height:16px; }

.proj-price{ font-weight:800; font-size:26px; margin:30px 0 30px; }
.proj-cta{ padding-left:24px; padding-right:24px; border-radius:999px; }

/* Адаптив: мобилка — галерея без стрелок и без миниатюр, только свайп */
@media (max-width:1200px){


  .proj-gallery__viewport{
  border-radius:24px;
}


  .proj-hero{
    grid-template-columns: 1fr;
    gap:22px;
  }
  .proj-title{ font-size:34px; }
  .proj-gallery .projects__arrow{ display:none; }
  .proj-thumbs{ display:none; }
  .proj-gallery__img{ aspect-ratio: 16 / 10; }
  .proj-cta{ width:100%; justify-content:center; }
}
@media (max-width:600px){
  .proj-title{ font-size:28px; }
}




/* Десктоп: как было — чуть за рамками картинки */


/* Мобилки/планшеты: показываем стрелки и утапливаем внутрь изображения */
@media (max-width:1200px){
  .proj-gallery .projects__arrow{
    display:flex;                 /* раньше скрывали — теперь показываем */
    width:36px; height:36px;      /* компактнее */
    background:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.15);
  }
  .proj-gallery .projects__arrow img{
    width:18px; height:18px;
  }
  .proj-gallery .projects__arrow--left{ left:-10px; }
  .proj-gallery .projects__arrow--right{ right:-10px; }
}



/* Кастомные радиобатоны */
.radio {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-right:16px;
  cursor:pointer;
}

.radio input[type="radio"] {
  appearance: none;        /* убираем стандартный кружок */
  -webkit-appearance: none;
  -moz-appearance: none;
  width:18px;
  height:18px;
  border:2px solid #e6e6e6;
  border-radius:50%;
  display:inline-block;
  position:relative;
  cursor:pointer;
  outline:none;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.radio input[type="radio"]:checked::after {
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:10px; height:10px;
  border-radius:50%;
  background:#F0CA0F;
}

.radio input[type="radio"]:focus {
  box-shadow:0 0 0 3px rgba(159,189,143,.3);
}






.projects__set.is-hidden{ display:none; }
.projects__set.is-active{ display:block; }




.banner_ot {
margin-top: 80px;
margin-bottom: 100px;
}


@media (max-width:1200px){
.banner_ot {
margin-top: 50px;
margin-bottom: 60px;
}

}


























/* Страница-листинг: стэк карточек */
.projects--list .projects__tabs{ margin:18px 0 22px; }
.projects--list .projects__set.is-hidden{ display:none; }
.projects--list .projects__set.is-active{ display:block; }

.projects__list{ display:flex; flex-direction:column; gap:50px; }



.projects__item{
  display:grid;
  grid-template-columns: 1.4fr 2fr;
  gap:18px;
  align-items:stretch;
}

.projects__item .projects__media img{
  display:block; width:100%; 
  height:100%; 
  border-radius:14px; object-fit:cover;
}

.projects__item .projects__panel{
  background:#F3F3F5;
  border-radius:24px;
  padding:18px 18px;
  display:flex; /* чтобы растягивать внутреннюю карточку */
}

.projects__item .project-card{ display:flex; flex-direction:column; gap:12px; }



.title_proj {
margin-bottom: 20px;
}

.proj-intro {
max-width: 720px;
margin-bottom: 60px;
}



/* Мобильная колонка */
@media (max-width:1200px){
  .projects__item{ grid-template-columns: 1fr; }
  .projects__item .projects__panel{ padding:16px; }

  .projects__list{ gap:30px; }

.projects__item{
  gap:10px;
}

.proj-intro {
font-size: 14px;
}

.projects--list{
  margin-top: 30px;
}

}

/* Выровнять заголовки/тексты с уже существующими стилями карточки */
.projects--list .project-card__title{ margin:0; }
.projects--list .project-card__desc{ margin:0; }

.projects--list {
margin-bottom: 100px;}


/* Стационарная сетка */
.works-grid { position: relative; margin-top: 80px; margin-bottom: 80px;}
.works-grid__inner { max-width: 1440px; margin: 0 auto; padding: 0 20px; }

/* 2 колонки с переносом, на мобилке — 1 */
.works-grid__list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 20px;
}

/* При узком экране — по одной карточке в ряд */
@media (max-width: 1200px){

  .projects--list {
margin-bottom: 60px;}

  .works-grid__list{
    grid-template-columns: 1fr;
  }

  .works-grid {
    margin-bottom: 60px;}
  
}

/* Используем уже имеющиеся стили карточек:
   .work-card, .work-card__media, .work-media__viewport (height), .work-media__track,
   .work-media__img, .work-media__dots, .work-card__body, .work-card__title, .work-card__desc
   — менять не нужно.
*/

/* Курсор-лупа на десктопе (из предыдущего фикса) */
@media (hover:hover){
  .work-media__viewport { cursor: zoom-in; }
}

























/* Курсор-лупа для всех мини-слайдеров */
@media (hover:hover){
  .work-media__viewport { cursor: zoom-in; }
}

/* --- Земельные участки: вёрстка правой панели --- */
.project-card.land-card{
  display: grid;
  grid-template-columns: 1fr auto; /* слева цена, справа кнопка */
  gap: 14px 24px;
}

/* Полноширинные элементы сверху */
.project-card.land-card .project-card__title,
.project-card.land-card .work-card__desc,
.project-card.land-card .project-card__tags{
  grid-column: 1 / -1;
}

/* Строка цены (слева) */
.land-card__price{
  grid-column: 1;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.land-card__price-label{ margin: 0; font-size: 18px; color: #666; white-space: nowrap; }
.land-card__price-value{ font-size: 28px; font-weight: 700; color: #111; }

/* Кнопка (справа) */
.land-card__actions{
  grid-column: 2;
  margin: 0;
  align-self: center;
  display: flex;
  justify-content: flex-end;
}
.land-card__btn{
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid #111;
  background: #F3F3F5;
  color: #111;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.land-card__btn:hover{
  background:#111; color:#fff; border-color:#111;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Мобилка: цена и кнопка в столбик */
@media (max-width: 600px){
  .project-card.land-card{ grid-template-columns: 1fr; }
  .land-card__actions{ grid-column: 1; justify-content: flex-start; margin-top: 12px; }
}

/* --- Земельные участки: левая колонка (медиа на всю высоту) --- */
.lands .projects__item{ align-items: stretch; }   /* если родитель — флекс */
.lands .projects__media{ display: flex; }
.lands .work-media{ display: flex; flex: 1 1 auto; }
.lands .work-media__viewport{
  height: 100%;
  min-height: 280px;
  flex: 1 1 auto;
}
.lands .work-media__track{ height: 100%; }
.lands .work-media__img{ height: 100%; object-fit: cover; }

/* Мобилка: ограничим высоту медиа */
@media (max-width: 900px){
  .lands .work-media__viewport{ height: 220px; min-height: 220px; }
}



/* Компактный режим тегов — не растягиваются на 1/2 карточки */
.project-card.land-card .project-card__tags--compact{
  display: inline-flex;     /* переопределяем grid */
  flex-wrap: wrap;
  gap: 16px 12px;
  margin-bottom: 24px;
}
.project-card.land-card .project-card__tags--compact .project-tag{
  display: inline-flex;     /* ширина по контенту */
  width: auto;
  max-width: 100%;
  background: #fff;
}



.promo-page {
margin-bottom: 100px;
}

@media (max-width: 1200px){
.promo-page {
margin-bottom: 60px;
}
}





















/* Обёртка шага */
.constructor{ margin-top: 32px; }
.constructor__step-head{ margin: 20px 0 18px; }
.constructor__step-counter{ font-size:14px; color:#666; margin-bottom:8px; }
.constructor__step-title{ font-size:36px; line-height:1.2; font-weight:800; }

/* Сетка карточек (десктоп) */
.constructor__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 24px;
}
.constructor__card{
  background:#fff; border-radius:20px; overflow:hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  display:flex; flex-direction:column;
}
.constructor__card .tech-card__media img{
  display:block; width:100%; height:180px; object-fit:cover;
}
.constructor__card .tech-card__body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:12px; }
.constructor__card .tech-card__title{ font-size:18px; font-weight:700; }
.constructor__card .tech-card__desc{ font-size:14px; color:#666; line-height:1.6; }

/* Кнопка "Выбрать" в карточке */
.constructor__choose{
  margin-top:auto;
  display:inline-flex; justify-content:center; align-items:center;
  width:100%;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid #111;
  background:#fff; color:#111;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.constructor__card.is-selected .constructor__choose{
  background:#FFDD2D; color:#272727; border-color:#FFDD2D;
}

/* Кнопка "Далее" */
.constructor__actions{ margin-top: 24px; display:flex; justify-content:flex-start; }
.constructor__next{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 220px;
  padding: 20px 137px;
  border-radius: 999px;
  border: none;
  background:#272727; color:#fff;
  font-weight:700;
  transition: opacity .2s ease, background .2s ease;
}
.constructor__next.is-disabled{
  background:#D9D9D9; color:#fff; cursor:not-allowed; pointer-events:none;
}

/* Радио-версия (мобилка) */
.constructor__radio-list{ display:none; margin-top: 6px; }
.constructor-radio{
  display:block;
  padding:12px 0;
  border-bottom:1px solid #eee;
}
.constructor-radio:last-child{ border-bottom:0; }
.constructor-radio input{ margin-right:10px; }
.constructor-radio > span{ font-weight:700; }
.constructor-radio__desc{ font-size:14px; color:#666; margin:6px 0 0 28px; line-height:1.6; }

/* Адаптив */

@media (max-width: 1200px){
  .constructor__grid{ display:none; }          /* карточки скрываем */
  .constructor__radio-list{ display:block; }   /* показываем радиокнопки */
  .constructor__step-title{ font-size:24px; }
}




/* тянем карточку по высоте ячейки грида */
.constructor__grid{ align-items: stretch; }

.constructor__card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.constructor__card .tech-card__media{
  flex:0 0 180px;           /* фикс высоты картинки, как у тебя */
}

.constructor__card .tech-card__body{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1 1 auto;            /* вот этого не хватало */
}

.constructor__choose{
  margin-top:auto;          /* кнопка уезжает в самый низ карточки */
}



.constructor__choose,
.constructor__next{
  cursor: pointer;
}
.constructor__next.is-disabled{
  cursor: not-allowed;
}

/* на мобилке — кликабельные лейблы радиокнопок */
.constructor-radio{
  cursor: pointer;
}









.construct {
background: #F3F3F5;
padding: 40px;
margin-bottom: 80px;
border-radius: 40px;
}

@media (max-width: 1200px){
.construct {
background: #F3F3F5;
padding: 20px;
margin-bottom: 80px;
border-radius: 20px;
}
}




@media (max-width:1100px){
  .c2-grid{
    grid-template-columns: 1fr;         /* одна колонка */
    align-items: start;
  }
  /* Разрываем левую колонку на отдельные грид-элементы */
  .c2-left{ display: contents; }

  /* Порядок элементов: группы радио → картинка → кнопка */
  .c2-group{ order: 1; }                /* обе группы подряд */
  .c2-right{ order: 2; }                /* блок с превью */
  .constructor__actions{ order: 3; }    /* кнопка "Далее" */

  /* косметика отступов */
  .c2-preview{ margin-top: 12px; }
  .constructor__actions{ margin-top: 16px; }
}












/* ===== ШАГИ 2–3: общий каркас ===== */
.c2-grid, .c3-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr; /* слева список, справа превью */
  gap: 36px;
  align-items: start;
}
.c2-preview{
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: #f2f2f2;
}
.c2-preview img{
  display:block; width:100%; height:100%;
  aspect-ratio: 16 / 10; object-fit: cover;
}

/* Мобилка: радио → картинка → кнопка */
@media (max-width:1100px){
  .c2-grid, .c3-grid{ grid-template-columns: 1fr; }
  .c2-left, .c3-left{ display: contents; }  /* разрываем левую колонку на элементы сетки */
  .c2-right, .c3-right{ order: 2; }
  .constructor__actions{ order: 3; margin-top: 16px; }
  .c2-preview{ margin-top: 12px; }
}

/* ===== ШАГ 2: "Площадь(м²) 35.39" — в одну строку, радио по центру строки ===== */
.c2-group{ margin-bottom: 22px; }
.c2-group__title{ font-weight: 700; margin: 12px 0 10px; }

.c2-radio{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.c2-radio:last-child{ border-bottom: 0; }
.c2-radio input{ margin: 0; flex: 0 0 auto; }
.c2-radio > span{
  display: inline-flex;
  align-items: baseline;        /* метка + число по базовой линии */
  gap: 6px;
  line-height: 1.6;
  white-space: nowrap;          /* не переносим на 2 строки */
}
.c2-radio .c2-radio__label{ color:#7a7a7a; }
.c2-radio .c2-radio__value{ color:#111; }

/* ===== ШАГ 3: радио на уровне названия, описание ниже ===== */
.c3-radio{
  display: flex;
  align-items: flex-start;       /* кружок выравниваем по верху строки */
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.c3-radio input{ margin: 0; position: relative; top: 2px; } /* микро-подгон */
.c3-radio__main{
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.6;
}
.c3-radio__desc{ color:#7a7a7a; font-weight: 400; }

/* Заголовки (если нужно уменьшать на узких) */
@media (max-width:1100px){
  .constructor--step2 .constructor__step-title,
  .constructor--step3 .constructor__step-title{ font-size: 28px; }
}
/* Растягиваем строки выбора на всю ширину, поверх базового .radio */
label.radio.c2-radio,
label.radio.c3-radio{
  display: flex;        /* перекрываем inline-flex из .radio */
  width: 100%;
}

/* Шаг 2: текстовая часть тянется, но не ломает пару "Площадь(м²) 35.39" */
label.radio.c2-radio > span{
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.c2-radio .c2-radio__label,
.c2-radio .c2-radio__value{
  white-space: nowrap;  /* не переносим внутри метки и числа */
}

/* Шаг 2: сам круг и отступы */
.c2-radio input{ margin: 0 10px 0 0; flex: 0 0 auto; }

/* Шаг 3: круг на уровне заголовка варианта, текст — в колонку и тянется */
label.radio.c3-radio{
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.c3-radio input{ margin: 2px 10px 0 0; flex: 0 0 auto; } /* микро-подъём */
.c3-radio__main{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.c3-radio__desc{ color:#7a7a7a; }

/* Мобилка: порядок "радио → картинка → кнопка" остаётся прежним */
@media (max-width:1100px){
  .c2-grid, .c3-grid{ grid-template-columns: 1fr; }
  .c2-left, .c3-left{ display: contents; }
  .c2-right, .c3-right{ order: 2; }
  .constructor__actions{ order: 3; margin-top: 16px; }
}






/* Шаг 4 — сетка как на шагах 2/3 */
.c4-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap:36px; align-items:start; }

/* Строки выбора тянутся на всю ширину, не сплющиваются */
label.radio.c4-radio{ display:flex; width:100%; align-items:flex-start; gap:10px; padding:14px 0; border-bottom:1px solid #eee; cursor:pointer; }
.c4-radio input{ margin:2px 10px 0 0; flex:0 0 auto; }      /* кружок у заголовка */
.c4-radio__main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }

/* Мобилка: порядок — список → картинка → кнопка */
@media (max-width:1100px){
  .c4-grid{ grid-template-columns:1fr; gap:16px;}
  .c4-left{ display:contents; }
  .c4-right{ order:2; }
  .constructor__actions{ order:3; margin-top:16px; }

    .c3-grid{gap:16px;}
}













/* Шаг 5: сетка опций — 2 колонки на десктопе, 1 на мобилке */
.c5-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 20px 24px;
}
.c5-item{ width: 100%; }

/* Растянем label на всю ширину строки, чтобы кликабельная зона была широкой */
.c5-item .control{
  display: flex;            /* не ломает твой индикатор */
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.c5-item .check__text{
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.6;
}

/* Мобилка */
@media (max-width: 1100px){
  .c5-list{ grid-template-columns: 1fr; 
  margin-bottom: 30px;}
}
















/* Шаг 6: сетка — 3 колонки (>=1200px), 2 колонки (>=800px), 1 колонка на мобилке */
.c6-list{
  display:grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 12px 24px;
}
@media (max-width:1199px){
  .c6-list{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width:799px){
  .c6-list{ grid-template-columns: 1fr; }
}

/* Растягиваем кликабельную зону чекбокса на всю ширину ячейки */
.c6-item .control{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
}
.c6-item .check__text{ flex:1 1 auto; min-width:0; line-height:1.6; }

/* Группы с радиокнопками внутри сетки */
.c6-item--group{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: 6px 0;
}
.c6-item__label{
font-size: 14px;
color: #555
}
.c6-sub{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
}
.c6-radio{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }

.c6-radio {
  font-size: 14px;
color: #555
}












/* Шаг 7: сетка с area-раскладкой (картинка справа; на мобилке — под кнопкой) */
.c7-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-areas:
    "fields  preview"
    "actions preview"
    "policy  preview";
  gap: 24px 36px;
  align-items: start;
}
.c7-fields{  grid-area: fields;  display:flex; flex-direction:column; gap:12px; }
.c7-actions{ grid-area: actions; }
.c7-policy{  grid-area: policy; }
.c7-preview{ grid-area: preview; } /* сама картинка стилизуется классом .c2-preview */

.constructor__lead{ margin: 6px 0 18px; color:#555; }

/* Мобилка: порядок — поля → кнопка → картинка → политика */
@media (max-width:1100px){
  .c7-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "fields"
      "actions"
      "policy"
      "preview";
    gap: 16px;
  }
  .c7-actions{ margin-top: 6px; }
  .c7-preview{display:none;  } /* небольшой отступ от политики */
}



.thanks {
  margin-top: 60px;
  min-height: 600px;
}

@media (max-width:1100px){
.thanks {
  margin-top: 60px;
    margin-bottom: 60px;
  min-height: auto;
}
}













.top-block-kids {
background-color: #E6F3DE;
}

.btn--primary-kids {
  background-color: #73558B;
  color: #fff;
}

.btn--primary-kids:hover {
  background-color: #5d4272;
}


.why__image-kids img {
  max-height: 400px;
}


.why__points {
margin-top: 80px;
}

@media (max-width:1200px){ 
.why__points {
margin-top: 0px;
}
}









/* ===== Детские домики: ровные высоты без «раздутий» ===== */

/* ===== Детские домики: стабильная высота медиа без раздуваний ===== */

/* строка карточек тянется по самой высокой колонке */
.kids-projects .projects__item { align-items: stretch; }

/* левая колонка не диктует высоту всей карточке */
.kids-projects .projects__media { align-self: stretch; }

/* контейнер медиа */
.kids-projects .work-media { width: 100%; height: 100%; }

/* фиксируем соотношение сторон у окна просмотра */
.kids-projects .work-media__viewport {
  width: 100%;
  aspect-ratio: 4 / 3;     /* при желании поменяй на 16/9, 3/2 и т.п. */
  overflow: hidden;
  position: relative;
}

/* трек занимает всю высоту вьюпорта (важно для свайпа/точек) */
.kids-projects .work-media__track { height: 100%; }

/* картинка заполняет вьюпорт, не вылезая */
.kids-projects .work-media__img {
  display: block;          /* убираем baseline-зазор */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* опционально: другое соотношение на десктопе
@media (min-width: 1200px) {
  .kids-projects .work-media__viewport { aspect-ratio: 16 / 9; }
}
*/

.work-media__viewport {
  height: 100%;
  width: auto;
}


/* Только на странице домиков */
.kids-projects .projects__panel--universal { background-color: #E6F3DE;
  padding: 0;
}
.kids-projects .projects__panel--boys      { background-color: #DEEDF3;
padding: 0;}
.kids-projects .projects__panel--girls     { background-color: #F3DEEC;
padding: 0;}



.land-card__btn-kids {
  background-color: #0073e600;
}








/* Футер карточки: цена + кнопка в одну линию */
.kids-projects .land-card__footer{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;          /* на узких — в две строки */
}

/* На десктопе держим в одну строку и расталкиваем по сторонам */
@media (min-width: 992px){
  .kids-projects .land-card__footer{ flex-wrap: nowrap; }
  .kids-projects .land-card__actions{ margin-left: auto; }
}

/* Выровнять внутренности по центру, убрать возможные внешние отступы темы */
.kids-projects .land-card__price{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kids-projects .land-card__actions{ 
  display: inline-flex; 
  align-items: center; 
  margin-top: 0;           /* если тема добавляла сверху отступ — обнуляем */
}


.project-card__tags--compact-kids {
margin-bottom: 0!important;
gap: 0 12px!important;
}


.card1 {
  background: #E6F3DE;
}
.card2 {
  background: #DEEDF3;
}
.card3 {
  background: #F3DEEC;
}
.card4 {
  background: #FFF2D5;
}









/* ===== Секция: Маленький мир для больших игр ===== */
.kids-about__grid{
  display: grid;
  grid-template-columns: 1fr;   /* мобилка: сверху картинка, ниже текст */
  gap: 24px;
  margin-bottom: 80px;
}

.kids-about__media img{
  display: block;
  width: 100%;
  height: auto;
 border-radius: 40px;
}

.kids-about__text {
color: #272727;
}


/* десктоп: две колонки рядом */
@media (min-width: 992px){
  .kids-about__grid{
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 32px;
  }

}

@media (max-width: 1200px){
  .kids-about__media img{
 border-radius: 20px;
}

.kids-about__grid{
  margin-bottom: 50px;
}

}



.cta-kids {
  background: #E6F3DE;
}

.control__indicator-kids {
    background: #b7c4af!important;
}



.project-tag-gr{
  background-color: #F3F3F5;
}















/* ===== Топ-строка (только десктоп) ===== */
.header-top {
  display: none;
  font-size: 14px;
  line-height: 1.4;
}

.header-top__inner {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 16px;
  padding: 0 20px 10px 0;
}



.header-top__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.top-phone {
  font-weight: 700;
  color: #111;
  text-decoration: none;
  white-space: nowrap;
}
.top-phone:hover { text-decoration: underline; }

/* Показываем топ-строку на десктопе */
@media (min-width: 992px) {
  .header-top { display: block; }
}

/* ===== Кнопка pill (как прежде) ===== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #f4f4f4;
  border-radius: 50px;
  text-decoration: none;
  transition: background .25s ease, transform .1s ease;
}
.pill:hover { background: #e7e7e7; }
.pill:active { transform: translateY(1px); }

.pill__icon { display: block; }
.pill__text { font-weight: 600; color: #222; }

/* Кнопка по центру в моб-хедере */
.pill--header { position: absolute; left: 50%; transform: translateX(-50%); }

/* Контейнер основного ряда должен быть относительно позиционирован */
.site-header .container.header-inner { position: relative; }

/* Показываем/скрываем нужные элементы по брейкпоинтам */
@media (min-width: 992px) {
  .pill--header { display: none; }          /* в десктопе центральная моб-кнопка не нужна */
}

@media (max-width: 991px) {
  /* в мобилке верхнюю строку скрываем через display:none у .header-top выше */
  /* при необходимости можно добавить адаптив для отступов */
}


@media (max-width: 600px) {
.pill2 {
width: auto;
margin-left: 40px;
}

}

@media (max-width: 419px) {
.pill__icon2 {
  display: none;
}
}

.pill3{
  background-color: #fff;
}

.pill4 {
    background-color: #FFDD2D;
}

.pill4:hover {
    background-color: #F0CA0F;
}













.about__gallery {
max-width: 700px;
}



















.complect { padding: 60px 0; }
.complect__title { font-size: 32px; margin-bottom: 24px; }

.complect__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}

.complect-table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.complect-table thead th {
  background: #f7f7f7;
  font-weight: 800;
  text-align: left;
  padding: 14px 16px;
    font-size: 18px;
  border-bottom: 1px solid #0000000c;
}

.complect-table tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid #0000000c;
  vertical-align: top;
  word-break: break-word;
}

.complect-table tfoot td {
  padding: 14px 16px;
  font-weight: 700;
  background: #FFDD2D;
  font-size: 24px;
  border-top: 2px solid #0000000c;
}

.complect-price { white-space: nowrap; 
font-size: 44px;
}

.complect-table th:not(:last-child),
.complect-table td:not(:last-child) { border-right: 1px solid #0000000c; }



@media (max-width: 1200px){
  .complect { padding: 40px 0; }
  .complect__title { font-size: 24px; }

.complect-table thead th {
    font-size: 14px;
}

.complect-table tfoot td {
  font-size: 16px;
}

.complect-table tbody td{
  font-size: 12px;
}
}




















 .spin360-wrap {max-width: 980px; margin: 40px auto; padding: 0 16px;}
  .spin360-title {margin: 0 0 12px; font-size: 24px; line-height: 1.3;}

  .spin360 {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* подгони при желании */
    border-radius: 12px;
    overflow: hidden;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none; /* нужен для корректного drag на мобилках */
  }
  .spin360-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
  }
  .spin360-progress {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.12));
  }
  .spin360-progress .bar {
    position: relative; display: block; width: 60%; height: 6px;
    background: rgba(255,255,255,.55); border-radius: 999px; overflow: hidden;
  }
  .spin360-progress .bar::after {
    content: ""; position: absolute; inset: 0;
    width: 0%; background: #1a73e8; /* системный цвет — можешь заменить */
  }
  .spin360-progress .pct {
    position: absolute; bottom: 18px; font-style: normal; font-size: 12px;
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5);
  }
  .spin360-help {
    position: absolute; left: 12px; bottom: 10px; font-size: 12px;
    padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.45);
    color: #fff; pointer-events: none;
  }

  .spin360.grab {cursor: grab;}
  .spin360.grabbing {cursor: grabbing;}


  .spin360-progress .bar::after { width: var(--w, 0%); }







.proj-360-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  margin-top: 20px;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* наведение */
.proj-360-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* иконка */
.proj-360-btn img {
  width: 70px;
}

/* позиционирование слева */
.proj-thumbs + .proj-360-btn {
  margin-left: 0; /* прижать к левому краю контейнера */
}








/* базово модалка невидима */
/* модалка скрыта по умолчанию */
/* ТВОИ ранние стили .spin360-wrap оставь как есть */

/* ===== модалка — отдельные классы, без конфликтов ===== */
.spin360-modal[hidden] { display: none !important; }
.spin360-modal {
  position: fixed; inset: 0; z-index: 10006;
  display: flex; align-items: center; justify-content: center;
}
.spin360-modal__backdrop {
  position: absolute; inset: 0;
  background: transparent;
}
.spin360-modal__box {
  position: relative; z-index: 1; background: #fff;
  border-radius: 12px; padding: 20px;
  max-width: 90vw; max-height: 90vh; width: min(980px, 90vw);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  display: flex; flex-direction: column;
}
.spin360-modal__inner { flex: 1; min-height: 0; }
/* .spin360 внутри уже управляет aspect-ratio; просто не даём переполнить */
.spin360-modal .spin360 { width: 100%; height: auto; }

.spin360-modal__close {
  position: absolute; top: 10px; right: 14px;
  font-size: 32px; background: none; border: 0; cursor: pointer; line-height: 1;
  color: #333;
  z-index: 10007;
}

/* простая анимация появления */
.spin360-modal.show { animation: spin360Fade .2s ease forwards; }
@keyframes spin360Fade { from {opacity:.0} to {opacity:1} }

























.post-two-cols__inner { display:grid; grid-template-columns:1fr; gap:32px; 
  margin-top: 60px;
  margin-bottom: 60px;
}
@media (min-width: 992px){
  .post-two-cols__inner { grid-template-columns:1.5fr .9fr; gap:40px; }
}
.post-head__date { display:block; font-size:14px; color:#6c6c6c; margin-bottom:6px; }
.post-head__title { margin:0 0 16px; font-size:clamp(28px,4vw,48px); line-height:1.1; }

.post-hero__figure { margin:16px 0 0; 
margin-bottom: 30px;}
.post-hero { width:100%; height:auto; display:block; border-radius:24px; }
.post-hero__cap { font-size:13px; color:#777; margin-top:6px; }

.post-content img, .post-content video, .post-content figure { max-width:100%; height:auto; border-radius: 24px;
margin-bottom: 20px;}
.post-pages { margin-top:16px; }

.aside-title { margin:0; font-size:28px; }
.also-list { display:grid; gap:16px; margin-top:12px; }

.also-item { display:flex; 
  flex-direction:column; 
  gap:10px; 
  border-radius:14px; 
  padding:12px; 
  background:#F3F3F5; }

  .post-content p {
    margin-bottom: 20px;
  }


.also-item__thumb { display:block; border-radius:12px; overflow:hidden; aspect-ratio:16/10; background:#f4f4f4; }
.also-item__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.also-item__title { margin:0; font-size:16px; line-height:1.3; }
.also-item__title a { text-decoration:none; color:inherit; font-size: 18px; }
.also-item__more { margin-top:auto; text-decoration:underline; font-size:16px; align-self:flex-start; }






/* ==== SHARE BUTTON ==== */
.post-share { margin-top: 24px; }
.share-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border:0; border-radius:12px;
  background:#111; color:#fff; cursor:pointer;
  font-weight:600; line-height:1; text-decoration:none;
}
.share-btn:focus-visible { outline:2px solid #222; outline-offset:2px; }
.share-btn__icon { display:block; width:18px; height:18px;}

/* ==== MODAL ==== */
.share-modal__backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:1000;
}
.share-modal {
  position:fixed; inset:0; display:grid; place-items:center;
  z-index:1001;
}
.share-modal[hidden],
.share-modal__backdrop[hidden] { display:none; }

.share-modal__inner {
  width:min(640px, 92%);
  background:#fff; border-radius:16px;
  padding:20px; position:relative;
  box-shadow:0 10px 40px rgba(0,0,0,.15);
}
.share-modal__close {
  position:absolute; top:10px; right:10px;
  border:0; background:transparent; font-size:18px; cursor:pointer;
}

.share-modal__title { margin:0 0 16px; font-size:22px; font-weight:800; }

.share-copy {
  display:grid; grid-template-columns:1fr auto; gap:10px; margin-bottom:16px;
}
.share-copy__input {
  width:100%; padding:12px; border:1px solid #ddd; border-radius:10px;
  font-size:14px; color:#333;
}
.share-copy__btn {
  padding:12px 14px; border:0; border-radius:10px; background:#111; color:#fff; cursor:pointer;
  font-weight:600;
}

.share-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.share-item {
  display:inline-flex; width:44px; height:44px; border-radius:10px; overflow:hidden;
  background:#f4f4f4; align-items:center; justify-content:center;
}
.share-item img { width:26px; height:26px; display:block; }

/* Small tweaks */
@media (max-width: 480px){
  .share-copy { grid-template-columns:1fr; }
  .share-copy__btn { width:100%; }
}








.proj-cat {
  display: inline-block;
  color: var(--tag-color, #777);
  font-weight: 500;
  font-size: 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  line-height: 1;
}