/* =========================================================================
   504 GROUP — копия устройства facen.ru на наших данных.
   Размеры, цвета и поведение повторяют образец: тёмная полоса меню 45px,
   слайдер 649px, контент поднят на -180px поверх слайдера, левая сетка
   плиток 292px, аккордеон по центру прописными.
   Цвета вынесены в переменные — менять на свои в одном месте.
   ========================================================================= */

:root{
  --c-dark:#42475a;        /* шапка, плитки, подвал */
  --c-dark-2:#3d4459;      /* плитки на слайдере */
  --c-line:#6a7393;        /* разделители плиток */
  --c-green:#34a375;       /* наведение */
  --c-green-2:#3ec491;     /* акценты в подвале */
  --c-mint:#35faaf;        /* подписи в выпадающем меню */
  --c-text:#3e3e3e;
  --c-title:#42475a;
  --c-sheet:#f6f7fa;       /* лист контента — чуть темнее страницы */
  --wrap:1100px;
}

*{padding:0;margin:0;box-sizing:border-box}
body{background:#fff;font-family:'Golos Text',Arial,sans-serif;color:#999;
  -webkit-font-smoothing:antialiased}
img{border:0;max-width:100%;display:block}
a{text-decoration:none;cursor:pointer}
:focus{outline:none}
.clr{clear:both}
.main{max-width:1920px;margin:0 auto}

/* ============================ ШАПКА ============================ */
.menu{width:100%;min-width:300px;height:45px;background:var(--c-dark);
  position:fixed;top:0;left:0;z-index:500}
.menu-cont{max-width:var(--wrap);height:45px;margin:0 auto;display:block;overflow:hidden;
  position:relative}
a.img-logo{display:flex;align-items:center;gap:9px;height:34px;margin:6px 0 0 35px;float:left;
  color:#fff;font-weight:800;font-size:18px;line-height:16px;letter-spacing:-.01em}
a.img-logo:hover{opacity:.8}
a.img-logo .logo-sub{display:block;font-size:8px;letter-spacing:.14em;font-weight:600;
  color:rgba(255,255,255,.6);margin-top:3px}

#nav{display:block;width:28px;height:20px;position:absolute;top:12px;left:50%;
  transform:translateX(-50%);cursor:pointer;border:0;background:none;padding:0}
#nav span{display:block;height:3px;background:#fff;border-radius:1px;margin-bottom:5px;
  transition:background .16s}
#nav span:last-child{margin-bottom:0}
#nav:hover span{background:var(--c-mint)}
#nav.is-open span{background:var(--c-mint)}

ul.r-menu{float:right;list-style:none;overflow:hidden;margin-top:13px;margin-right:10px}
ul.r-menu li{float:left;margin-right:20px}
ul.r-menu li:last-child{margin-right:0}
ul.r-menu li a{display:block;width:20px;height:20px;color:#fff;opacity:.9;
  transition:opacity .16s,color .16s;background:none;border:0;padding:0;cursor:pointer}
ul.r-menu li a:hover{opacity:1;color:var(--c-mint)}
ul.r-menu li a svg{display:block}

/* ---- строка поиска поверх шапки ----
   Лежит в .menu-cont (у него position:relative) и накрывает её целиком.
   Логотип повторяет отступ обычного — при открытии он не прыгает. */
.menu-search{position:absolute;inset:0;background:var(--c-dark);z-index:3;
  display:none;align-items:center}
.menu-search.show{display:flex}
.menu-search .img-logo{float:none;margin:0 0 0 35px;flex:0 0 auto}
.menu-search .ms-go{background:none;border:0;color:rgba(255,255,255,.75);cursor:pointer;
  padding:0;margin-left:26px;display:grid;place-items:center;transition:color .16s}
.menu-search .ms-go:hover{color:var(--c-mint)}
.ms-input{flex:1 1 auto;min-width:0;height:45px;background:none;border:0;color:#fff;
  font-family:inherit;font-size:15px;padding:0 12px;appearance:none}
.ms-input::placeholder{color:rgba(255,255,255,.5)}
.ms-input::-webkit-search-cancel-button{display:none}
.ms-x{background:none;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;
  padding:0 4px;margin-right:10px;flex:0 0 auto;transition:color .16s}
.ms-x:hover{color:var(--c-mint)}

/* отступ под фиксированной шапкой на страницах без слайдера */
.menu-pad{height:45px}

/* ---- выпадающее меню ---- */
.menu-open{width:100%;max-width:560px;min-height:180px;overflow:hidden;padding-top:10px;
  background:rgba(66,71,90,.94);position:fixed;top:45px;left:50%;margin-left:-280px;
  z-index:500;display:none}
.menu-open.show{display:block}
.menu-open a{color:#fff;font-size:13px}
.menu-open-left,.menu-open-right{width:50%;min-height:160px;float:left;position:relative;
  overflow:hidden}
.menu-open ul{list-style:none;overflow:hidden;min-height:133px;margin:18px 0 0 48px}
.menu-open ul li{font-size:13px;margin-bottom:7px}
.menu-open ul li a{position:relative}
.menu-open ul li a:hover{color:#78fbc9}
.menu-open ul li a:hover:after{display:block;width:10px;height:10px;background:var(--c-mint);
  content:'';position:absolute;bottom:2px;right:-17px}

/* Подпись колонки стоит боком, вплотную к своей полоске.
   Крутим вокруг левого верхнего угла, а не вокруг центра: тогда полоска
   занимает ровно x = left…left+height и y = top−width…top, и её место не
   зависит от длины надписи. На повороте вокруг центра смещение приходилось
   подбирать под каждый текст — «504 GROUP» наезжало на список, а «Наши
   услуги» отставало от полоски на 27px. */
.menu-open p{position:absolute;left:12px;top:150px;display:block;width:138px;height:22px;
  transform:rotate(-90deg);transform-origin:0 0;
  color:var(--c-mint);border-bottom:1px solid var(--c-mint);font-size:14px;line-height:20px}

/* ============================ СЛАЙДЕР ============================ */
.fotorama{position:relative;top:45px;height:649px;overflow:hidden;background:#111}
/* Слайды не растворяются друг в друге, а листаются вбок, как в образце:
   текущий уезжает влево, следующий приходит справа. Положение каждого задаёт
   скрипт через translateX, значения ниже — раскладка на случай, если он не
   отработал: виден первый слайд, остальные ждут за правым краем. */
.fotorama__slide{position:absolute;inset:0;z-index:1;transform:translateX(100%);
  transition:transform .6s cubic-bezier(.33,0,.2,1)}
.fotorama__slide.active{transform:translateX(0);z-index:2}
.fotorama__slide img{width:100%;height:100%;object-fit:cover}
.fotorama-text{display:table;max-width:900px;height:424px;text-align:center;margin:0 auto;
  padding:0 100px;position:relative;z-index:3}
.fotorama-text p{display:table-cell;vertical-align:middle}
.fotorama-text span{display:inline-block;background:rgba(255,255,255,.6);
  font-size:22px;line-height:32px;color:var(--c-title);text-align:center;text-transform:uppercase;
  padding:25px 20px;border-radius:10px}
/* Стрелки не прижаты к краям экрана, а стоят по краям колонки контента
   (1100px) — как в образце. max() не даёт им уехать за экран, когда окно уже
   этой колонки. По вертикали — по центру плашки с подписью: .fotorama-text
   высотой 424px, значит центр 212, минус половина высоты стрелки. */
.fotorama__arr{position:absolute;top:171px;width:72px;height:82px;z-index:4;cursor:pointer;
  background:rgba(255,255,255,.35);border:0;color:var(--c-title);display:grid;place-items:center;
  transition:background .16s}
.fotorama__arr:hover{background:rgba(255,255,255,.6)}
.fotorama__arr--prev{left:max(0px,calc((100% - var(--wrap)) / 2))}
.fotorama__arr--next{right:max(0px,calc((100% - var(--wrap)) / 2))}

/* ============ Плитки услуг поверх слайдера (главная) ============ */
.slider-cont-mini{max-width:var(--wrap);overflow:hidden;margin:-180px auto 20px auto;
  display:block;position:relative;z-index:2}
.block-img-mini{box-sizing:border-box;width:var(--mini-w,25%);float:left;text-align:center;
  position:relative;margin-bottom:-4px;background:#000}
.block-img-mini a{display:block}
.block-img-mini img{width:100%;height:273px;object-fit:cover;opacity:.8;cursor:pointer;
  transition:opacity .2s}
.block-img-mini a:hover img{opacity:1}
.block-img-mini div{width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
/* Отступ плашки от краёв плитки. Проценты считаются от ширины плитки, поэтому
   поля держатся одинаковыми на любой ширине; длинная подпись переносится
   внутри плашки, а не растягивает её до краёв. */
.block-img-mini em{font-style:normal;display:inline-block;padding:0 8%}
.block-img-mini span{font-size:18px;line-height:28px;padding:5px 7px 3px;color:#fff;
  background:var(--c-dark-2);opacity:.7;text-transform:uppercase;display:block}

/* ============ Блоки главной страницы (как в образце) ============ */
.title-main{width:100%;height:45px;background:var(--c-dark);display:block;margin-top:20px}
.title-main h2{font-weight:400;font-size:24px;line-height:31px;text-transform:uppercase;
  color:#fff;text-align:center;padding-top:7px}
.plusu{max-width:var(--wrap);overflow:hidden;margin:20px auto 0 auto}
.plus,.plus-right{width:29.5%;float:left;text-align:center;margin-right:5.7%}
.plus-right{margin-right:0}
.plus img,.plus-right img{width:100%;height:208px;object-fit:cover;margin-bottom:14px}
.plus h3,.plus-right h3{font-size:18px;line-height:22px;text-transform:uppercase;color:#3e3e3e;
  font-weight:400;margin-bottom:8px}
.plus p,.plus-right p{font-size:14px;line-height:18px;color:var(--c-text);text-align:left}
.about{max-width:var(--wrap);overflow:hidden;margin:45px auto 0 auto;position:relative;
  padding-bottom:20px}
.about h2{font-weight:400;font-size:24px;line-height:28px;text-transform:uppercase;
  color:var(--c-title);text-align:center;margin-bottom:16px}
.about p{font-size:14px;line-height:20px;color:var(--c-text);margin-bottom:12px;max-width:820px}
.about .sign{font-weight:700;color:var(--c-title)}

/* ============================ КОНТЕНТ ============================ */
/* Лист контента не белый, а светло-серый с диагональной сеточкой шагом 3px —
   так он читается на белой странице как отдельный лист. Картинка повторяет
   образец точь-в-точь: PNG 3×3, базовый #f6f7fa, диагональ #e5e5e8. */
.addContent{background:var(--c-sheet)
  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAG0lEQVR42mN4+vTF/2/ff4ExA4iACTDAREECAJ+CInjddt/NAAAAAElFTkSuQmCC")
  top left repeat;
  max-width:var(--wrap);overflow:hidden;margin:-180px auto 26px auto;
  position:relative;z-index:2}

/* Две колонки — флексом, а не флоатами: у нас всего три услуги, и левая
   сетка плиток вдвое ниже правой колонки. На флоатах под ней оставалась
   белая дыра во всю высоту страницы; флекс тянет тёмную колонку до низа. */
.addContent-row{display:flex;align-items:stretch}
.addContent-side{flex:0 0 292px;width:292px;background:var(--c-dark);
  border-left:1px solid var(--c-line);display:flex;flex-direction:column}

/* левая сетка плиток */
.addContent-nav{overflow:hidden;list-style:none}
.addContent-nav .menu-item{background:var(--c-dark);width:50%;height:126px;float:left;
  border:1px solid var(--c-line);border-left:none;border-top:none;list-style:none;
  transition:background .16s}
/* нечётная последняя плитка занимает весь ряд — иначе в сетке зияет
   пустая ячейка, и блок выглядит недоделанным */
.addContent-nav .menu-item:last-child:nth-child(odd){width:100%}
.addContent-nav .menu-item.current-menu-item{background:#fff}
.addContent-nav .menu-item.current-menu-item a{color:var(--c-dark)}
.addContent-nav .menu-item:hover:not(.current-menu-item){background:var(--c-green)}
.addContent-nav .menu-item p{display:table;height:100%;margin:0 auto}
.addContent-nav .menu-item a{display:table-cell;vertical-align:middle;padding:15px;
  font-size:10px;line-height:14px;color:#fff;text-transform:uppercase;text-align:center}

/* нижняя часть тёмной колонки: ссылки на разделы сайта */
.side-links{list-style:none;padding:18px 20px 20px}
.side-links li{margin-bottom:11px;font-size:12px;line-height:14px}
.side-links li:last-child{margin-bottom:0}
.side-links a{color:#fff;position:relative}
.side-links a:hover{color:var(--c-mint)}

/* правая колонка. Базовая типографика задана прямо здесь: текст из админки
   часто приходит голыми строками без <p>, и без этого он наследовал бы от
   body серый #999 в 16px — на странице это выглядело как чужая вставка. */
.addContent-content{flex:1 1 auto;min-width:0;padding:0 15px 32px;overflow:hidden;
  color:var(--c-text);font-size:13px;line-height:15px}

/* Тёмная плашка с названием стоит НАД средней колонкой, а не во всю ширину
   листа: слева её место занимает сетка плиток. Отрицательных отступов у неё
   нет — в образце плашка ограничена шириной колонки (777px при листе 1100),
   с воздухом по 15px с обеих сторон. */
/* Отступ снизу — на самой плашке, а не на первом абзаце: текст из админки
   часто приходит без <p>, и тогда отступать было бы нечему. Соседние поля
   схлопываются, поэтому если у текста свой отступ больше — возьмётся он. */
.addContent-content > h1{background:var(--c-dark);display:block;font-weight:400;font-size:21px;
  line-height:23px;color:#fff;text-transform:uppercase;text-align:center;padding:20px 10px;
  margin:14px 0 16px}

.addContent-content h3{font-size:24px;line-height:26px;color:var(--c-title);
  text-transform:uppercase;text-align:center;margin:32px 0 0;font-weight:400}
/* Заголовок элемента списка (акция, проект) — не раздел. Прописными по центру
   он выглядел как заголовок аккордеона, на который надо нажать. */
.addContent-content h3.item-head{font-size:19px;line-height:24px;text-transform:none;
  text-align:left;margin:30px 0 0;font-weight:700}
.addContent-content p{font-size:13px;line-height:15px;color:var(--c-text);margin:12px 0 0}
.addContent-content ul,.addContent-content ol{margin-left:25px;margin-bottom:12px}
.addContent-content ul li,.addContent-content ol li{font-size:13px;line-height:15px;
  color:var(--c-text);margin:13px 0 0;list-style-type:none}
.addContent-content ul li:before{content:"• "}
/* Картинки, вставленные в текст через админку, образец приводит к одному
   размеру и пускает обтеканием — так три подряд встают в ряд. Добавлен только
   object-fit: у образца снимки другой пропорции растягивало. */
.addContent-content img{width:235px;height:193px;object-fit:cover;border:none;float:left;
  margin:5px 14px 15px 0}
.addContent-content a{color:#004988}
.addContent-content a:hover{color:var(--c-green)}

/* --- наши сетки идут ПОСЛЕ правила выше: у них та же специфичность,
       и без этого порядка картинки в них получали 235×193 и float --- */

/* Единственное фото услуги стоит слева, текст обтекает его справа — как в
   образце и как в карточке админки. Во всю ширину одиночный снимок читался
   полосой, оторванной от текста. */
.svc-lead{float:left;width:300px;padding:0;border:0;background:none;cursor:pointer;
  margin:2px 18px 12px 0}
.svc-lead img{width:100%;height:225px;object-fit:cover;margin:0;float:none}

/* ряд фотографий под описанием — в образце их три в строку */
.ref-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 4px;clear:both}
.ref-row.one{grid-template-columns:minmax(0,1fr)}
.ref-row.one img{height:320px}
.ref-row.two{grid-template-columns:repeat(2,1fr)}
.ref-row button,.ref-gal button{padding:0;border:0;background:none;cursor:pointer;display:block;
  width:100%}
.ref-row img{width:100%;height:190px;object-fit:cover;margin:0;float:none}

/* галерея фото внутри раздела */
.ref-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;
  margin-top:14px}
.ref-gal img{width:100%;height:170px;object-fit:cover;margin:0;float:none}
/* Ролик стоит в рамке постоянного размера. Раньше он тянулся во всю ширину
   колонки, и вертикальное видео уходило вниз на пол-экрана: у 9:16 при
   ширине 778px высота выходит под 1400px. object-fit:contain вписывает любую
   пропорцию целиком, поля закрывает чёрный фон. */
.ref-vid{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.ref-vid > div{width:300px}
.ref-vid video{width:100%;height:320px;object-fit:contain;background:#000;display:block}


/* карта и форма на странице контактов — тот же вид, что у формы в модалке */
.ref-map{width:100%;height:340px;margin-top:18px;background:#eee}
.page-form{max-width:405px;margin-top:14px}
.page-form input[type=text],.page-form input[type=email],.page-form select,.page-form textarea{
  width:100%;border:1px solid #a0a0a0;color:#000;font-size:16px;padding:0 20px;
  margin:0 0 15px;height:48px;font-family:inherit;background:#fff}
.page-form textarea{height:110px;padding:10px 20px;resize:vertical}
.page-form input:focus,.page-form select:focus,.page-form textarea:focus{border-color:var(--c-green)}
.page-form input[type=submit]{width:230px;height:44px;background:var(--c-dark);border:none;
  cursor:pointer;color:#fff;font-size:21px;font-family:inherit;display:block}
.page-form input[type=submit]:hover{background:var(--c-green)}
.page-form .note{font-size:12px;color:#777;margin-top:10px}
.page-form input[type=search]{width:100%;border:1px solid #a0a0a0;color:#000;font-size:16px;
  padding:0 20px;margin:0 0 15px;height:48px;font-family:inherit;background:#fff;appearance:none}

/* ---- результаты поиска ---- */
.search-again{max-width:520px}
.found{margin-top:6px}
.found-list{margin-top:6px}
.found-item{border-top:1px solid #dbdbdb;padding:16px 0}
.found-item:last-child{border-bottom:1px solid #dbdbdb}
.found-kind{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#8b90a3;margin-bottom:4px}
a.found-title{display:inline-block;font-size:17px;line-height:22px;color:#004988;
  margin-bottom:4px}
a.found-title:hover{color:var(--c-green)}
.found-item p{margin:0}
.found-item mark{background:#d8f3e6;color:var(--c-title);padding:0 2px}

/* ============================ АККОРДЕОН ============================ */
.accordion{border-bottom:1px solid #dbdbdb;margin-bottom:20px;clear:both}
.accordion-title{border-top:1px solid #dbdbdb;margin:0;padding:20px 0 14px;cursor:pointer;
  opacity:.7;font-weight:400;font-size:24px;line-height:26px;color:var(--c-title);
  text-transform:uppercase;text-align:center;background:none;width:100%;border-left:0;
  border-right:0;transition:opacity .16s,background .16s,color .16s}
/* при наведении заголовок только проявляется — как в образце, без заливки */
.accordion-title:hover{opacity:1}
.accordion-title.open{cursor:pointer;opacity:1;background:#e3ecf7;color:var(--c-dark)}
/* Раскрывается плавно. display:none анимировать нельзя, поэтому раздел
   свёрнут нулевой высотой, а точное значение при открытии подставляет скрипт:
   заранее оно неизвестно — в разделе может быть и абзац, и галерея из девяти
   фотографий. Отступ снизу живёт на внутренней обёртке, иначе у свёрнутого
   раздела он торчал бы полосой под заголовком. */
.accordion-content{height:0;overflow:hidden;transition:height .34s ease}
.acc-in{padding:16px 0 20px}
.accordion-content h3{font-size:21px !important;line-height:30px !important;color:#333 !important;
  text-transform:none !important;text-align:left !important}

/* ============================ ПОДВАЛ ============================ */
.footer-top{width:100%;background:var(--c-dark)}
.footer-top-cont{max-width:var(--wrap);overflow:hidden;margin:0 auto;padding:24px 0 20px}
/* Колонок три: отдельная «Контакты» убрана, телефон и почта и так стоят слева
   крупно. Доли в сумме ровно 100%: 32+3 / 24+3 / 38.
   Полезная ширина текста = ширина колонки − 29px (margin-left 20 + border 1 +
   padding 8); у колонки услуг это 389px против 186px самой длинной подписи.
   min-height задан не под содержимое, а под повёрнутую подпись: она занимает
   по вертикали 130px, ниже — пустая тёмная плита. */
.block-footer1{width:32%;float:left;text-align:center;margin-right:3%;min-height:140px}
/* Знак и название в одну строку. Подписи «тел.» и «E-mail:» — обычные inline,
   без флоатов с отступом в 30px: в образце ими имитировали центрирование,
   здесь строка и так центрируется целиком. */
.footer-brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;color:#fff}
.footer-brand svg{flex:0 0 auto}
.footer-brand > span{font-size:24px;font-weight:800;line-height:26px;letter-spacing:-.01em;
  text-align:left}
.footer-brand b{display:block;font-size:9px;letter-spacing:.13em;font-weight:600;
  color:rgba(255,255,255,.6);margin-top:3px}
.block-footer1 p{font-size:13px;line-height:18px;color:#fdfdfd;font-weight:700}
.block-footer1 p span{font-size:12px;margin-right:5px;font-weight:700}
.block-footer1 p.tel{font-size:21px;line-height:24px;color:var(--c-green-2)}
.block-footer1 p.tel a{color:var(--c-green-2)}
.block-footer1 p.tel span{color:#fdfdfd}
.block-footer1 p.email{font-size:16px;line-height:22px;color:#ededed;margin-top:6px}
.block-footer1 p.email a{color:#fefefe}
.block-footer1 p.email span{color:#fefefe}
.block-footer1 p.addr{margin-top:12px}
.block-footer2,.block-footer3{position:relative;float:left;min-height:140px;overflow:hidden}
.block-footer2{width:24%;margin-right:3%}
.block-footer3{width:38%}
/* Подпись колонки стоит боком слева от списка, белым — как в образце.
   Крутим вокруг левого верхнего угла: полоска занимает ровно
   x = left…left+height, y = top−width…top, и её место не зависит от длины
   надписи. Своей черты у подписи нет — вертикальную линию рисует граница
   списка (border-left ниже), иначе линий было бы две.
   text-align:right — это и есть «вверху»: после поворота на -90° левый край
   строки смотрит вниз, поэтому по умолчанию короткая надпись висела у нижнего
   конца полоски, а не у начала списка. */
.footer-top-cont .rot{position:absolute;left:2px;top:132px;display:block;width:130px;height:16px;
  transform:rotate(-90deg);transform-origin:0 0;color:#fff;font-size:14px;line-height:16px;
  text-align:right}
.footer-top-cont ul{list-style:none;overflow:hidden;margin-left:20px;
  border-left:1px solid #fff;padding-left:8px}
.footer-top-cont ul li{font-size:12px;margin-bottom:12px;line-height:13px}
.footer-top-cont ul li a{color:#fff}
.footer-top-cont ul li a:hover{color:#78fbc9}
.footer-bottom{width:100%;background:#fff}
.footer-bottom-cont{max-width:var(--wrap);overflow:hidden;margin:0 auto;padding:10px 0}
.footer-bottom-cont p{font-size:12px;color:#303030;text-align:center}
.footer-bottom-cont p a{color:#303030}

/* ============================ МОДАЛКИ ============================ */
#modal-layer{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:999;visibility:hidden;
  opacity:0;transition:all .4s linear}
#modal-layer.show{visibility:visible;opacity:1}
.modal-form{position:fixed;top:50%;left:50%;width:455px;transform:translate(-50%,-50%);
  z-index:1000;background:#fff;visibility:hidden;opacity:0;
  transition:opacity .4s linear,visibility .4s linear;padding-bottom:24px}
.modal-form.show{visibility:visible;opacity:1}
.modal-form .closer{width:15px;height:14px;position:absolute;right:10px;top:8px;cursor:pointer;
  border:0;background:none;color:#666;font-size:20px;line-height:1}
.modal-form .closer:hover{color:#000}
.modal-form h3{color:#3e3e3e;font-size:18px;text-transform:uppercase;font-weight:400;
  text-align:center;margin:26px 0 18px}
.modal-form form{width:405px;margin:0 auto}
.modal-form input[type=text],.modal-form input[type=email],.modal-form textarea{
  width:363px;border:1px solid #a0a0a0;color:#000;font-size:16px;padding:0 20px;
  margin:0 0 15px 20px;height:48px;font-family:inherit}
.modal-form textarea{height:94px;padding:10px 20px;resize:vertical}
.modal-form input:focus,.modal-form textarea:focus{border-color:var(--c-green)}
.modal-form input[type=submit]{width:230px;height:44px;margin:0 auto;display:block;
  background:var(--c-dark);border:none;cursor:pointer;color:#fff;font-size:21px;font-family:inherit}
.modal-form input[type=submit]:hover{background:var(--c-green)}
.modal-form .bottom-note{width:330px;margin:12px auto 0;text-align:center}
.modal-form .bottom-note p{color:#4d4d4d;font-size:12px}
.modal-form .bottom-note a{color:#000}

/* лайтбокс галереи */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:1100;display:none;
  align-items:center;justify-content:center;padding:40px}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:84vh;border-radius:3px}
.lb button{position:absolute;background:rgba(255,255,255,.25);border:0;color:#fff;
  width:54px;height:54px;font-size:26px;cursor:pointer}
.lb .lb-x{top:20px;right:22px}
.lb .lb-p{left:18px;top:50%;transform:translateY(-50%)}
.lb .lb-n{right:18px;top:50%;transform:translateY(-50%)}
.lb .lb-c{bottom:22px;left:0;right:0;text-align:center;color:#d1d1d1;font-size:15px;
  background:none;position:absolute;width:auto;height:auto}

/* ============================ АДАПТИВ ============================ */
@media screen and (max-width:1100px){
  a.img-logo{margin-left:2%}
  /* Колонки в один столбец. Порядок меняем: сначала содержимое с названием
     услуги, тёмная панель уходит вниз. Иначе на планшете страница начиналась
     с сетки плиток и контактов, а заголовок оказывался четвёртым экраном. */
  .addContent-row{display:flex;flex-direction:column}
  .addContent-content{order:1;max-width:100%;float:none}
  .addContent-side{order:2;width:100%;flex:none;border-left:0;display:block}
  .addContent-nav{display:flex;flex-wrap:wrap}
  .addContent-nav .menu-item{flex:1 1 25%;width:auto;float:none;
    border-left:1px solid var(--c-line);border-top:1px solid var(--c-line)}
  .addContent-nav .menu-item:last-child:nth-child(odd){width:auto}
  .side-links{display:flex;flex-wrap:wrap;gap:0 26px;border-bottom:0;padding:16px 20px}
  .side-links li{margin-bottom:8px}
  /* здесь тоже ровно 100%: 34+2 / 26+2 / 36. Переопределять надо все ширины
     и все margin-right разом — иначе часть значений остаётся от базовых
     правил, сумма перескакивает 100%, и последняя колонка как float
     сваливается под соседей */
  .block-footer1{width:34%;margin-right:2%}
  .block-footer2{width:26%;margin-right:2%}
  .block-footer3{width:36%;margin-right:0}
}
@media screen and (max-width:900px){
  .fotorama{height:460px}
  .fotorama-text{height:300px;padding:0 80px}
  .fotorama-text span{font-size:18px;line-height:26px}
  .fotorama__arr{top:109px}                 /* центр плашки 150 − половина высоты */
  .slider-cont-mini,.addContent{margin-top:-120px}
  .block-img-mini img{height:190px}
  .plus,.plus-right{width:100%;float:none;margin:0 0 26px}
  .plus img,.plus-right img{height:200px}
  .plusu,.about{padding:0 15px}
  .title-main{height:auto;padding-bottom:8px}
  .title-main h2{font-size:19px;line-height:24px}
  .block-footer1{width:100%;margin-right:0;min-height:0;margin-bottom:24px}
  .block-footer2,.block-footer3{width:100%;min-height:auto;margin:0 0 24px}
  .footer-top-cont .rot{position:static;transform:none;width:auto;height:auto;line-height:normal;
    margin:0 0 8px 20px;border-bottom:1px solid rgba(255,255,255,.5);display:inline-block;
    color:#fff;text-align:left}
}
@media screen and (max-width:600px){
  /* в полосе 45px помещается только логотип, бургер и три значка:
     подпись под логотипом и номер уводим — иначе строка переносится
     и уезжает под обрез .menu-cont */
  a.img-logo{margin-left:8px;font-size:15px;gap:6px}
  a.img-logo .logo-sub{display:none}
  a.img-logo svg{width:22px;height:22px}
  ul.r-menu{margin-right:8px}
  ul.r-menu li{margin-right:13px}
  .menu-search .img-logo{margin-left:8px}
  .menu-search .img-logo span{display:none}   /* в 45px помещается только знак */
  .menu-search .ms-go{margin-left:12px}
  .ms-x{margin-right:4px}

  .menu-open{max-width:100%;left:0;margin-left:0;height:calc(100vh - 45px);overflow:auto}
  .menu-open-left,.menu-open-right{width:100%;float:none}
  .menu-open ul{margin-left:30px}
  .menu-open p{position:static;transform:none;width:auto;height:auto;line-height:normal;
    margin:0 0 6px 30px;display:inline-block}
  .fotorama{height:320px}
  .fotorama-text{height:200px;padding:0 60px}
  .fotorama-text span{font-size:14px;line-height:20px;padding:14px 12px}
  .fotorama__arr{width:44px;height:60px;top:70px}   /* центр плашки 100 */
  .slider-cont-mini,.addContent{margin-top:-70px}
  /* Инлайновое значение стоит на контейнере, поэтому сюда плитка получает его
     наследованием — а собственное объявление из таблицы стилей наследование
     перебивает. Если поставить это правило на сам .slider-cont-mini, оно
     проиграет его же инлайновому стилю, и на телефоне остались бы три
     плитки в ряд по 125px. */
  .block-img-mini{--mini-w:50%}
  .block-img-mini img{height:120px}
  .block-img-mini span{font-size:12px;line-height:18px}
  .addContent-nav .menu-item{flex:1 1 50%;height:100px}
  .addContent-content > h1{font-size:16px;padding:14px 10px}
  .accordion-title{font-size:16px;line-height:20px;padding:14px 8px}
  .ref-row{grid-template-columns:repeat(2,1fr)}
  .ref-row img{height:130px}
  .ref-vid > div{width:100%}          /* на телефоне рамка 300px уже экрана незачем */
  .ref-vid video{height:280px}
  /* обтекание на узком экране не работает — фото становится над текстом */
  .svc-lead{float:none;width:100%;margin:0 0 12px}
  .svc-lead img{height:200px}
  .modal-form{width:92%;max-width:340px}
  .modal-form form{width:100%}
  .modal-form input[type=text],.modal-form input[type=email],.modal-form textarea{
    width:calc(100% - 40px);margin-left:20px;height:42px;font-size:14px}
}