/* ============================================
   МОБИЛЬНЫЕ СТИЛИ ДЛЯ 320PX
   Оптимизированная версия - только используемые стили
   ============================================ */

/* Подключение шрифта DIN Pro Regular (единственный вес по дизайн-решению клиента) */
@font-face {
  font-family: 'DIN Pro';
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/DINPro.1bb077b5c0ca.otf") format('opentype');
  font-display: swap;
}

/* Базовые стили */
*, *:before, *:after {
	box-sizing: border-box;
}

body {
	padding: 0;
	margin: 0;
	font-family: 'DIN Pro', sans-serif;
	color: #626161;
	background: #f7f7f7;
	max-width: 1023px;
	margin: 0 auto;
	min-height: 100vh;
}

html {
  scroll-behavior: smooth;
  background: #fff;
}

/* Якорный скролл к #portfolio-block останавливается на «высоте шапки + 12»
   ниже элемента, чтобы блок не ушёл под плавающую шапку. То же значение,
   что у #breadcrumbs_container margin-top. */
#portfolio-block {
  scroll-margin-top: calc(var(--grid-column-width) + 24px + 12px);
}

/* Базовые стили для заголовков */
h1, h2, h3, h4, h5, h6 {
	font-family: 'DIN Pro', sans-serif;
	font-weight: 400;
	line-height: 1;
}

/* Жирный текст использует DIN Pro Bold */
strong, b {
	font-family: 'DIN Pro', sans-serif;
	font-weight: 400;
}

/* Фаза 1 (5 кол, 320-479px): источник истины для базы мобайла.
   Линейная интерполяция через clamp() от 320 до 479:
     margin: 12 → 18 (множитель 6/159 ≈ 0.0377)
     gutter: 12 → 16 (множитель 4/159 ≈ 0.0252)
   На 480+ переключаемся на 6-колоночную фазу (см. @media ниже). */

:root {
  --grid-margin: clamp(12px, calc(12px + (100vw - 320px) * 0.0377), 18px);
  --grid-gutter: clamp(12px, calc(12px + (100vw - 320px) * 0.0252), 16px);
  --grid-columns: 5;
  --grid-width: min(100vw, 479px);
  --grid-content-width: calc(var(--grid-width) - var(--grid-margin) * 2);
  --grid-column-width: calc((var(--grid-content-width) - var(--grid-gutter) * 4) / 5);
}

/* Заглушка поднята до 1023px — эксперимент по визуализации проблемы 5 кол на больших экранах */
#page {
	width: 100%;
	max-width: 1023px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	background: #fff;
}

aside {
  float: none;
  width: 100%;
  margin: 0;
  padding: 10px;
}
#contactform_aside {
  background: #D3D3D3;
  width: 100%;
  border: 2px solid #C0C0C0;
  border-radius: 3px;
  text-align: center;
  margin-bottom: 25px;
    padding-bottom: 15px;
}
#contactform_aside input {
  height: 33px;
  margin-bottom: 15px;
  border-radius: 1px;
  padding-left: 10px;
}
#contactform_aside p {
  margin-top: 10px;
}
.name_aside {
  text-align: center;
  border-bottom: 1px solid #C0C0C0;
  border-top: 1px solid #C0C0C0;
  width: 100%;
  text-transform: uppercase;
  padding: 7px 0;
  font-size: 14px;
  margin-bottom: 15px;
}
#download_kp {
    background: #faab21;
    border: 2px solid #708090;
    border-radius: 3px;
    width: 100%;
    line-height: 5px;
    text-align: center;
    margin-bottom: 15px;
    color: #626161;
    display: block;
    padding: 15px 10px;
    text-decoration: none;
}
#download_kp:hover {
    background: #df9100;
}
#peter_aside {
    text-align: center;
    width: 100%;
    margin: 25px 0;
}
#peter_aside img {
    border: 10px solid #fff;
    box-shadow: 0 0 1px rgba(0,0,0,0.5);
    margin-bottom: 10px;
}
#peter_aside p {
    text-align: center;
    font-style: italic;
    margin-top: 5px;
}
#peter_aside a {
    font-style: normal;
    color: #8CC540;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

#peter_aside a:hover {
    color: #7ab330;
    text-decoration: underline;
}
#news_aside {
  width: 100%;
  text-align: center;
  height: 100%;
}
#news_aside img {
  width: 255px;
  border: 10px solid #fff;
  box-shadow: 0 0 1px rgba(0,0,0,0.5);
  margin-bottom: 10px;
}
#news_aside p {
  text-align: center;
  font-style: italic;
  margin-top: 5px;
}
#news_aside a {
  font-style: normal;
  color: #8CC540;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

#news_aside a:hover {
  color: #7ab330;
  text-decoration: underline;
}
#content {
  overflow: hidden;
}
main {
    overflow: hidden;
    padding: 0 var(--grid-margin);
    float: none;
    width: 100%;
    max-width: var(--grid-width);
    margin: 0 auto;
    box-sizing: border-box;
}
main a {
  color: #8CC540;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

main a:hover {
  color: #7ab330;
  text-decoration: underline;
}
#breadcrumbs {
  border: none;
  padding: 0;
  display: block;
  border-radius: 0;
  margin-top: 12px;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 1;
  width: 100%;
  box-sizing: border-box;
  color: rgba(65, 65, 66, 0.7);
}
#breadcrumbs p {
  text-indent: 0;
  margin: 0;
  line-height: 1;
}
#breadcrumbs a {
  color: #8CC540;
  font-size: 12px;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

#breadcrumbs a:hover {
  color: #7ab330;
  text-decoration: underline;
}
#breadcrumbs .divider {
  margin: 0 4px;
  font-size: 13px;
}
#breadcrumbs .current {
  font-size: 13px;
}
#breadcrumbs.breadcrumbs-smart.breadcrumbs-collapsed .breadcrumbs-middle {
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
}
#breadcrumbs.breadcrumbs-smart.breadcrumbs-collapsed .breadcrumbs-first-divider {
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  width: 0;
}
#breadcrumbs.breadcrumbs-smart.breadcrumbs-expanded .breadcrumbs-first-divider {
  visibility: visible;
  opacity: 1;
  max-height: none;
  overflow: visible;
  font-size: inherit;
  line-height: inherit;
  margin: 0 4px;
  padding: 0;
  width: auto;
}
#breadcrumbs.breadcrumbs-smart .breadcrumbs-ellipsis {
  display: none;
}
#breadcrumbs.breadcrumbs-smart.breadcrumbs-collapsed .breadcrumbs-ellipsis {
  display: inline;
  margin: 0;
  visibility: visible;
  opacity: 1;
  font-family: 'DIN Pro', sans-serif;
  font-weight: 400;
}
#breadcrumbs.breadcrumbs-smart.breadcrumbs-expanded .breadcrumbs-middle {
  visibility: visible;
  opacity: 1;
  max-height: none;
  overflow: visible;
  font-size: inherit;
  line-height: inherit;
  margin: 0 4px;
  padding: 0;
}
#breadcrumbs.breadcrumbs-smart.breadcrumbs-expanded .breadcrumbs-ellipsis {
  display: none;
  visibility: hidden;
  opacity: 0;
}
#top_panel_container .cupid-green {
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
}
.name_main {
  margin-top: 0;
}
/* На корне сайта (главная) крошек нет — .name_main становится первым
   элементом под fixed-шапкой, и та распорка, что обычно висит на
   #breadcrumbs_container, отсутствует → шапка наезжает на H1. Даём ту же
   распорку первому .name_main. На страницах с крошками .name_main не
   :first-child → правило не срабатывает, регресса нет.
   См. concepts/prmaket2-root-page-implicit-assumptions.md */
main > .name_main:first-child {
  margin-top: calc(var(--grid-column-width) + 24px + 12px);
}
.name_main h1 {
  text-align: center;
  border: none;
  width: 100%;
  text-transform: uppercase;
  padding: 0;
  font-size: 18px;
  font-family: 'DIN Pro', sans-serif;
  font-weight: 400;
  margin: 0 !important;
  margin-bottom: 4px !important;
  margin-left: 0;
  letter-spacing: 0.5px;
  position: static;
  background: none;
}

.name_main h1::before,
.name_main h1::after {
  content: none;
}
.name_main h2 {
  text-align: center;
  border-bottom: 1px solid #C0C0C0;
  border-top: 1px solid #C0C0C0;
  width: 100%;
  text-transform: uppercase;
  padding: 7px 0;
  font-size: 22px;
  font-family: 'DIN Pro', sans-serif;
  font-weight: 400;
  margin-bottom: 15px;
  margin-left: 0;
}

/* Текст портфолио */
.portfolio_text {
  width: 100%;
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 0;
  box-sizing: border-box;
}

.portfolio_text p {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1;
}

.portfolio_text p:last-child {
  margin-bottom: 0;
}

.contactform_main {
  background: #D3D3D3;
  width: 100%;
  border: 2px solid #708090;
  border-radius: 3px;
  padding: 5px 20px 20px 20px;
  margin-bottom: 12px;
  overflow: hidden;
  margin-left: 0;
  box-sizing: border-box;
}
.contactform_main input {
  height: 33px;
  margin-bottom: 15px;
  border-radius: 1px;
  padding-left: 10px;
}
.form_text {
  float: left;
  width: 50%; 
  text-align: center;
  font-size: 18px;
  margin-top: 40px;
}
.form {
    float: left;
    width: 50%;
    text-align: center;
    font-size: 18px;
    height: 100%;
}
/* legacy `footer { height:100px }` removed — was clipping the m-footer to 100px */
#copy {
  float: left;
  margin-left: 90px;
  font-size: 18px;
  line-height: 10px;
}
#copy a {
  font-style: normal;
  color: #8CC540;
  font-size: 16px;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}
.footer-menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-menu ul li{
    display: inline-block;
    vertical-align: baseline;
    margin-right: 5px;
}
.footer-menu a{
    font-style: normal;
    color: #8CC540;
    font-size: 16px;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.footer-menu a:hover {
    color: #7ab330;
    text-decoration: underline;
}
.footer-menu  .current {
    font-size: 16px;
    color: #C0C0C0;
}
#copy a:hover {
  color: #7ab330;
  text-decoration: underline;
}
footer #f_button {
  margin-top: 30px;
  margin-left: 80px;
  margin-right: 80px;
  float: left;
}
#f_phones {
  padding-top: 20px;
  line-height: 5px;
}
#f_phones p {
  font-size: 18px;
}
#f_phones span {
  font-size: 24px;
}
#f_phones .icon {
  font-size: 20px;
  color: #C0C0C0;
}
footer #f_phones a {
  color: #8CC540;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

footer #f_phones a:hover {
  color: #7ab330;
  text-decoration: underline;
}
#activ_form_2 input {
  height: 33px;
  width: 250px;
  margin-bottom: 15px;
  border-radius: 1px;
  padding-left: 10px;
}
.error_msg2 {
  color: red;
  display: none;
}
.success_msg2 {
  color: #FFFF00;
  display: none;
}
#slider_bottom .slides img {
    width: 100%;
}
.form_messages {
    font-size: 14px;
}
.hidden {
    display: none;
}
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    font-weight: 400;
    display: block;
    margin-bottom: 3px;
}
.form-group input[type="text"], .form-group textarea {
    display: block;
    width: 100%;
    border-radius: 1px;
    padding: 3px 10px;
    border: 1px solid #dcdcdc;
}
.h3 {
    font-size: 18px;
    font-family: 'DIN Pro', sans-serif;
    font-weight: 400;
}
.page-callback .form p, .contactform_main .form p {
    font-family: 'DIN Pro', sans-serif;
    font-weight: 400;
    font-size: 22px;
    margin-bottom: 10px;
}
.news-item {
    overflow: hidden;
    margin-bottom: 15px;
    border-bottom: 1px solid #C0C0C0;
    padding: 2px 0 12px;
}
.news-item-image {
    float: left;
    width: 80px;
    margin-right: 9px;
    margin-left: 1px;
}
.news-item-image img {
    width: 80px !important;
    height: 80px;
    border-width: 3px !important;
    margin-bottom: 0 !important;
}
.news-item-info {
    float: left;
    width: 190px;
    text-align: left;
}
.news-item-info a {
    color: #8CC540;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.news-item-info a:hover {
    color: #7ab330;
    text-decoration: underline;
}
#reviews_slider ul {
    width: 20000em;
    position: relative;

    /* Optional, required in this case since it's a <ul> element */
    list-style: none;
    margin: 0;
    padding: 0;
}
#reviews_slider li {
    float: left;
}
.privacy {
    font-size: 16px;
    clear: both;
    margin-left: 90px;
}
.privacy a{
    color: #8CC540;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.privacy a:hover {
    color: #7ab330;
    text-decoration: underline;
}
.form-privacy {
    font-size: 12px;
    text-align: left;
    clear: both;
    margin-left: 0;
    text-indent: 0;
    padding-top: 10px;
}
#contactform_aside .form-privacy{
    padding: 10px 30px;
}.glyph {
	font-family: sans-serif;
	line-height: 1;
	color: #555;
	font-size: 1em;
	width: 12em;
	margin: 5px;
	float: left;
	overflow: hidden;
}
@font-face {
	font-family: 'Stroke-Gap-Icons';
	src: url("vendor/prmaket.ru/assets/fonts/Stroke-Gap-Icons.db3aeb6f9a50.eot");
}
@font-face {
	font-family: 'Stroke-Gap-Icons';
	src: url("vendor/prmaket.ru/assets/fonts/Stroke-Gap-Icons.96782a74da80.woff") format('woff');
	font-weight: normal;
	font-style: normal;
}
.icon {
	font-family: 'Stroke-Gap-Icons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	font-size: 32px;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-Phone2:before {
	content: "\e674";
}
.icon-Mail:before {
	content: "\e6b7";
}
@media screen and (max-width:320px) {
    .portfolio_item {
        min-height: 190px;
    }
    .portfolio_item img {
        height: 110px;
    }
}
/* Мобильный header */
.m-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--grid-width);
  background: #fff;
  z-index: 1000;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  box-sizing: border-box;
}

.m-header.hide {
  transform: translate(-50%, -100%);
}

/* При открытом сэндвич-меню — без тени шапки, чтобы не было полосы над меню */
body.menu-open {
  overflow: hidden;
}

body.menu-open .m-header {
  box-shadow: none;
}

.m-header__logo {
  flex: 0 0 auto;
  padding-left: var(--grid-margin);
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
  margin: 0;
}

/* Логотип масштабируется с сеткой: высота = column-width (та же что у кнопок),
   ширина пропорциональна по aspect ratio SVG. На 320: 49.6 высокий, на 360 — 57.6.
   Так шапка визуально однородная: лого и кнопки одной высоты. */
.m-header__logo img {
  height: var(--grid-column-width);
  width: auto;
  display: block;
  object-fit: contain;
}

.m-header__actions {
  display: flex;
  gap: var(--grid-gutter);
  flex: 0 0 auto;
  padding-right: var(--grid-margin);
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  margin: 0;
}

/* EN и бургер — квадратные кнопки шириной = высотой = одна колонка сетки.
   Размер fluid через --grid-column-width: 51.2×51.2 на 320, 59.2×59.2 на 360.
   Тач-таргет ≥ 44 на любом viewport фазы. */
.m-header__btn {
  width: var(--grid-column-width);
  height: var(--grid-column-width);
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  flex-shrink: 0;
}

.m-header__btn img,
.m-header__btn-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  box-shadow: none !important;
  filter: none !important;
}

/* Labels (EN/МЕНЮ) скрыты на мобайле — показываются на 480+. SVG-иконки — наоборот. */
.m-header__btn-label { display: none; }

.m-header__btn--active {
  background-color: #f0f0f0;
}

/* SVG-кнопки в шапке мигрированы на CSS для viewport <480.
   Внутренний "face"-блок 50/62 от ширины кнопки сохраняет визуальные пропорции
   из исходных Sandwich.svg / Language.svg (rect 50×50 в viewBox 62×62).
   Контейнер .m-header__btn остаётся тач-таргетом, не визуальным элементом.
   На 480+ — face скрыт, видна исходная SVG (для бургера + MenuButton3 как bg). */
@media (max-width: 479.98px) {
  .m-header__btn img { display: none; }
}

.m-header__btn-face {
  width: var(--grid-column-width);
  height: var(--grid-column-width);
  background: #ffffff;
  border: 1px solid #E5E5E5;
  border-radius: calc(var(--grid-column-width) * 10 / 50);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.m-header__btn-face--en {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: calc(var(--grid-column-width) * 30 / 50);
  line-height: 1;
  color: #000;
  letter-spacing: 0;
}

.m-header__btn-face--burger {
  /* default <480: только палочки центрированы; на 480+ — row с label слева */
}

.m-header__burger-label {
  display: none;
}

.m-header__burger-lines {
  display: flex;
  flex-direction: column;
  gap: calc(var(--grid-column-width) * 7 / 50);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.m-header__burger-line {
  width: calc(var(--grid-column-width) * 25 / 50);
  height: calc(var(--grid-column-width) * 3 / 50);
  background-color: #8CC540;
  border-radius: calc(var(--grid-column-width) * 1.5 / 50);
}

@media (min-width: 480px) {
  .m-header__btn-face { display: none; }
}
.similar-projects {
  margin-top: 12px;
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
}
.similar-projects__filters-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 10px;
}
.similar-projects__quick-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.similar-projects__quick-filters .filter-pill {
  flex: 0 0 auto;
}
.similar-projects__quick-filters::-webkit-scrollbar {
  display: none;
}
.similar-projects__active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
  align-items: center;
}
.similar-projects__hidden-field-wrap {
  display: none;
}
.similar-projects__filters-toolbar .similar-projects__open-filters {
  width: 100%;
  margin: 0;
  text-transform: none;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #8CC540;
  background-color: #FFFFFF;
  color: #414142;
  border-radius: 999px;
  padding: 8px 14px;
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-size: 14px;
  line-height: 1;
  min-height: 32px;
  box-sizing: border-box;
  cursor: pointer;
}
.filter-pill:disabled {
  pointer-events: none;
}
.filter-pill--active {
  background-color: #8CC540;
  color: #FFFFFF;
}
.filter-pill--secondary {
  background-color: #FFFFFF;
  color: #414142;
}
.filter-pill--disabled {
  background-color: #EFEFEF;
  border-color: #C7C7C7;
  color: #8F8F8F;
  cursor: not-allowed;
}
.filter-pill--chip {
  max-width: 100%;
  background: #F2F2F2;
  border-color: #E0E0E0;
  color: #414142;
  padding: 6px 10px;
  min-height: 30px;
  flex: 0 0 auto;
}
.filter-pill--chip .filter-pill__close {
  display: inline-flex;
  background: #E4E4E4;
}
.filter-pill--chip .filter-pill__close::before,
.filter-pill--chip .filter-pill__close::after {
  background: #6F6F6F;
}
.filter-pill__label {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.filter-pill__close {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.filter-pill__close::before,
.filter-pill__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: #FFFFFF;
}
.filter-pill__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.filter-pill__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.filter-pill--active .filter-pill__close {
  display: inline-flex;
}
.filter-pill--disabled .filter-pill__close {
  display: none !important;
}
.filter-pill--active:hover .filter-pill__close {
  background: rgba(255, 255, 255, 0.30);
}
.filter-pill--active:active .filter-pill__close {
  background: rgba(255, 255, 255, 0.42);
}

.filters-sheet {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.filters-sheet--open {
  pointer-events: auto;
  opacity: 1;
}
.filters-sheet__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.filters-sheet__panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  width: calc(100% - 24px);
  max-width: 320px;
  margin: 0 auto;
  max-height: calc(100vh - 12px);
  max-height: calc(100dvh - 12px);
  background: #FFFFFF;
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
}
.filters-sheet__handle {
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: #D7D7D7;
  margin: 8px auto 4px;
}
.filters-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 10px;
  border-bottom: 1px solid #EBEBEB;
}
.filters-sheet__header h3 {
  margin: 0;
  font-family: "DIN Pro", "Trebuchet MS", sans-serif;
  font-size: 18px;
  color: #414142;
}
.filters-sheet__close {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: #414142;
  width: 32px;
  height: 32px;
  border-radius: 0;
  font-size: 28px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.filters-sheet__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 12px;
}
.filters-sheet__section {
  grid-column: 1 / -1;
  border-bottom: 1px solid #EFEFEF;
  padding-bottom: 9px;
  margin-bottom: 9px;
}
.filters-sheet__section:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
.filters-sheet__summary {
  list-style: none;
  cursor: pointer;
  font-family: "DIN Pro", "Trebuchet MS", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #414142;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.filters-sheet__summary::-webkit-details-marker {
  display: none;
}
.filters-sheet__summary::after {
  content: "▾";
  font-size: 13px;
  color: #8CC540;
  transition: transform 0.2s ease;
}
.filters-sheet__section[open] .filters-sheet__summary::after {
  transform: rotate(180deg);
}
.filters-sheet__options {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filters-sheet__range {
  margin-top: 10px;
}
.filters-sheet__range-sliders {
  position: relative;
  height: 30px;
}
.filters-sheet__range-track,
.filters-sheet__range-track-fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 8px;
  border-radius: 999px;
  pointer-events: none;
}
.filters-sheet__range-track {
  left: 0;
  right: 0;
  background: #3F3F42;
}
.filters-sheet__range-track-fill {
  left: 0;
  width: 0;
  background: #8CC540;
}
.filters-sheet__slider {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 30px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  z-index: 4;
}
.filters-sheet__slider--min {
  z-index: 4;
}
.filters-sheet__slider--max {
  z-index: 4;
}
.filters-sheet__slider--active {
  z-index: 5;
}
.filters-sheet__slider::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border: none;
  background: transparent;
  pointer-events: none;
}
.filters-sheet__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -10px;
  border: none;
  border-radius: 50%;
  background: #8CC540;
  pointer-events: auto;
  cursor: pointer;
}
.filters-sheet__slider::-moz-range-track {
  height: 8px;
  border: none;
  background: transparent;
  pointer-events: none;
}
.filters-sheet__slider::-moz-range-progress {
  height: 8px;
  border: none;
  background: transparent;
}
.filters-sheet__slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: #8CC540;
  pointer-events: auto;
  cursor: pointer;
}
.filters-sheet__range-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.filters-sheet__input {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(65, 65, 66, 0.2);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: "DIN Pro", "Trebuchet MS", sans-serif;
  font-size: 14px;
  color: #414142;
  box-sizing: border-box;
}
.filters-sheet__footer {
  flex-shrink: 0;
  border-top: 1px solid #EBEBEB;
  padding: 10px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #FFFFFF;
}
.filters-sheet__footer .filters-sheet__reset {
  width: 100%;
  margin: 0;
}
.filters-sheet__done {
  width: 100%;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}
.similar-projects__active-reset {
  border: none;
  background: transparent;
  color: #6D982F;
  font-family: "DIN Pro", "Trebuchet MS", sans-serif;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
}
body.filters-sheet-open {
  overflow: hidden;
}

@media (max-width: 360px) {
  .filter-pill {
    font-size: 13px;
    min-height: 30px;
    padding: 6px 12px;
  }
  .similar-projects__active-filters {
    gap: 6px;
  }
  .filters-sheet__header h3 {
    font-size: 18px;
  }
  .filters-sheet__summary {
    font-size: 14px;
  }
  .filters-sheet__input {
    min-height: 34px;
    font-size: 13px;
  }
}

/* Baseline for smallest common mobile viewport: 320x568 */
@media (max-width: 320px) and (max-height: 568px) {
  .filters-sheet__panel {
    max-height: calc(100vh - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 24px 24px 0 0;
  }
}
.similar-projects__gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gutter);
  padding: 0;
  margin-top: 12px;
  width: 100%;
  box-sizing: border-box;
}
.similar-projects__item {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  margin-bottom: 12px;
  width: 100%;
  /* Рамка и подложка карточки (мобильная версия): без изменения размеров */
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(65, 65, 66, 0.14);
  padding-bottom: 16px;
}
/* Карточка similar-projects: aspect-ratio задаётся на ОБЁРТКЕ, а не на img.
   Раньше aspect-ratio: 1/1 + height: auto на самом <img> не всегда срабатывал
   (Safari после загрузки image мог использовать его natural ratio).
   Теперь wrapper квадратный, img заполняет 100%×100% и обрезается через
   object-fit: cover — работает одинаково на всех браузерах. */
.similar-projects__image-wrap {
  position: relative;
  display: block;
  line-height: 0;
  background: transparent;
  overflow: hidden;
  width: 100%;
  max-width: var(--grid-content-width);
  aspect-ratio: 1 / 1;
  margin-left: auto;
  margin-right: auto;
}
.similar-projects__image-wrap img:not(.similar-projects__tag) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
/* Fallback для img в карточке вне image-wrap (если такие появятся) — без
   обязательного квадрата, ровно по ширине родителя. */
.similar-projects__item img {
  max-width: 100%;
  height: auto;
}
/* Бейджи всегда выравниваются от правого края изображения.
   Если бейдж один — он крайний справа. */
.similar-projects__item .similar-projects__image-wrap .similar-projects__tag {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  width: 52px;
  height: 52px;
  min-width: 52px;
  max-width: 52px;
  object-fit: none;
  background: transparent;
}
.similar-projects__item .similar-projects__image-wrap .similar-projects__tag:nth-of-type(1) {
  right: 12px;
  z-index: 4;
}
.similar-projects__item .similar-projects__image-wrap .similar-projects__tag:nth-of-type(2) {
  right: 24px;
  z-index: 3;
}
.similar-projects__item .similar-projects__image-wrap .similar-projects__tag:nth-of-type(3) {
  right: 36px;
  z-index: 2;
}
.similar-projects__item .similar-projects__image-wrap .similar-projects__tag:nth-of-type(4) {
  right: 48px;
  z-index: 1;
}
.similar-projects__item p {
  margin-top: 8px;
  font-size: 13px;
  text-align: center;
  color: #626161;
  margin-bottom: 0;
  width: 100%;
}

/* Стиль заголовка и подзаголовка карточек как в блоке «Примеры работ» */
.similar-projects__item .examples-slider__content {
  margin-top: 8px;
  text-align: center;
}
.similar-projects__item .examples-slider__title-link {
  display: block;
  font-family: "DIN Pro", "Trebuchet MS", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #8CC540;
  text-decoration: none;
  margin-bottom: 4px;
  transition: color 0.2s ease;
}
.similar-projects__item .examples-slider__title-link:hover {
  color: #7AAE37;
  text-decoration: underline;
}
.similar-projects__item .examples-slider__subtitle {
  font-family: "DIN Pro", "Trebuchet MS", sans-serif;
  font-size: 13px;
  color: #414142;
  opacity: 0.7;
  margin: 0;
  line-height: 1;
}
.similar-projects__empty {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 8px;
  margin-bottom: 4px;
}
.similar-projects .similar-projects__more,
.similar-projects .similar-projects__empty .similar-projects__reset {
  margin: 12px auto 0;
  width: 100%;
  max-width: var(--grid-content-width);
  min-height: 50px;
  padding: 12px 24px;
  box-sizing: border-box;
  white-space: nowrap;
}
.similar-projects .similar-projects__empty .similar-projects__reset {
  border: 1px solid #8CC540;
}

.m-btn-more {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 172px;
  margin: 12px auto 0;
  background: #FFFFFF;
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 12px 24px;
  font-family: "DIN Pro", "Trebuchet MS", sans-serif;
  font-size: 15px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  color: #414142;
  cursor: pointer;
  transition: background-color 0.2s ease;
  box-sizing: border-box;
  text-align: center;
}

.m-btn-more:hover {
  background-color: rgba(140, 197, 64, 0.08);
}

.m-btn-more:active {
  background-color: rgba(140, 197, 64, 0.15);
}

/* Кнопка "Отправить" - Primary CTA (копия m-btn-more с зелёной заливкой) */
.m-btn-submit {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #8CC540;
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 12px 24px;
  font-family: "DIN Pro", "Trebuchet MS", sans-serif;
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s ease;
  box-sizing: border-box;
  text-align: center;
}

.m-btn-submit:hover {
  background-color: #7AAE37;
}

.m-btn-submit:active {
  background-color: #6D982F;
}

/* Явный override для нижней кнопки в попапе фильтров */
.filters-sheet__footer .m-btn-submit.filters-sheet__done {
  text-transform: none;
  letter-spacing: 0;
}

/* Контейнер для кнопок действий - CSS Grid с 5 колонками */
.action-buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--grid-gutter);
  margin-top: 12px;
  margin-bottom: 12px;
  width: 100%;
  max-width: var(--grid-content-width);
  box-sizing: border-box;
}

/* Кнопки занимают все 5 колонок */
.action-buttons .m-btn {
  grid-column: 1 / -1;
  width: 100%;
  height: 50px;
  border-radius: 10px;
  margin: 0;
  padding: 0;
  text-transform: none;
}

/* Блок "Примеры работ" */
.examples-section {
  width: 100%;
  max-width: var(--grid-content-width);
  margin-top: 16px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.examples-section__title {
  font-family: 'DIN Pro', sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #414142;
  margin: 0 0 12px 0;
  text-align: left;
}

/* Слайдер примеров работ */
.examples-slider {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.examples-slider::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.examples-slider__track {
  display: flex;
  gap: var(--grid-gutter);
  width: max-content;
}

.examples-slider__card {
  flex: 0 0 calc(var(--grid-column-width) * 4 + var(--grid-gutter) * 3);
  width: calc(var(--grid-column-width) * 4 + var(--grid-gutter) * 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}

.examples-slider__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.examples-slider__content {
  margin-top: 8px;
  text-align: center;
}

.examples-slider__title-link {
  display: block;
  font-family: "DIN Pro", "Trebuchet MS", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #8CC540;
  text-decoration: none;
  margin-bottom: 4px;
  transition: color 0.2s ease;
}

.examples-slider__title-link:hover {
  color: #7AAE37;
  text-decoration: underline;
}

.examples-slider__subtitle {
  font-family: "DIN Pro", "Trebuchet MS", sans-serif;
  font-size: 13px;
  color: #414142;
  opacity: 0.7;
  margin: 0;
  line-height: 1;
}

/* CTA-карточка в слайдере */
.examples-slider__card--cta {
  flex: 0 0 calc(var(--grid-column-width) * 4 + var(--grid-gutter) * 3);
  width: calc(var(--grid-column-width) * 4 + var(--grid-gutter) * 3);
  aspect-ratio: 1 / 1;
  align-self: flex-start;  /* высота = картинка (aspect-ratio), не растягивается на полную высоту карточки */
  background: #FFFFFF;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  text-decoration: none;
  box-sizing: border-box;
  padding: 20px;
}

.examples-slider__cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
}

.examples-slider__cta-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.examples-slider__cta-title span {
  font-family: "DIN Pro", "Trebuchet MS", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #8CC540;
  line-height: 1;
  display: block;
}

.examples-slider__cta-subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.examples-slider__cta-subtitle span {
  font-family: "DIN Pro", "Trebuchet MS", sans-serif;
  font-size: 21px;
  color: #414142;
  opacity: 0.7;
  line-height: 1;
  display: block;
}

.examples-slider__cta-arrow {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-size: 24px;
  color: #8CC540;
  line-height: 1;
  font-family: "DIN Pro", "Trebuchet MS", sans-serif;
}

.examples-slider__card--cta:hover {
  background-color: #F8F8F8;
}

.examples-slider__card--cta:hover .examples-slider__cta-title span,
.examples-slider__card--cta:hover .examples-slider__cta-arrow {
  color: #7AAE37;
}

/* Блок "Варианты отображения планировок" */
.layouts-section {
  width: 100%;
  max-width: var(--grid-content-width);
  margin-top: 24px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.layouts-section__title {
  font-family: 'DIN Pro', sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #414142;
  margin: 0 0 8px 0;
  text-align: left;
}

.layouts-section__intro {
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #626161;
  margin: 0 0 20px 0;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.layouts-section__subtitle {
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #414142;
  margin: 0 0 0 0;
  text-align: left;
}

.layouts-section__image-wrapper {
  width: 100%;
  max-width: var(--grid-content-width);
  margin: 0 auto 20px auto;
  display: flex;
  justify-content: center;
}

.layouts-section__image {
  width: 100%;
  max-width: var(--grid-content-width);
  height: auto;
  aspect-ratio: 297 / 396;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Базовые стили для всех ссылок */
a {
  color: #8CC540;
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

a:hover {
  color: #7ab330;
  text-decoration: underline;
}

a:active {
  color: #6a9a20;
}

a:visited {
  color: #8CC540;
}

/* Стили для ссылки "Читать условия акции" с прерывистой линией */
a.promotion-link,
a[href*="акци"],
a.dotted-link {
  color: #8CC540;
  text-decoration: none;
  border-bottom: 1px dotted #8CC540;
  display: inline;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

a.promotion-link:hover,
a[href*="акци"]:hover,
a.dotted-link:hover {
  color: #7ab330;
  border-bottom-color: #7ab330;
}

a.promotion-link:visited,
a[href*="акци"]:visited,
a.dotted-link:visited {
  color: #999;
  border-bottom-color: #999;
}

a.promotion-link:active,
a[href*="акци"]:active,
a.dotted-link:active {
  color: #6a9a20;
  border-bottom-color: #6a9a20;
}

/* Мобильное меню — модальное окно в пределах сетки, под шапкой.
   top = высота .m-header = column-width + 24 (padding 12+12).
   Шапка переменной высоты: 75.2 на 320, 83.2 на 360.
   padding-bottom: 100px — запас под скроллом, чтобы плавающая кнопка
   связи не закрывала последний элемент (VK-иконку). */
.m-menu {
  position: fixed;
  top: calc(var(--grid-column-width) + 24px);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--grid-width);
  background: #fff;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  overflow-y: auto;
  padding-bottom: 100px;
}

.m-menu--open {
  opacity: 1;
  visibility: visible;
}

.m-menu__close {
  position: absolute;
  top: 0;
  right: var(--grid-margin);
  width: var(--grid-column-width);
  height: calc(2em + 32px);  /* = first menu item row: 2x line-height + 2x 16px padding, scales with font */
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.2s ease;
}

.m-menu__close:hover { opacity: 0.7; }
.m-menu__close:active { opacity: 0.5; }

.m-menu__close-icon {
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-size: 28px;
  line-height: 1;
  color: #414142;
  font-weight: 300;
}

.m-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #fff;
  width: 100%;
}

/* Горизонтальный разделитель между пунктами — ограничен сеткой (отступы
   слева/справа = --grid-margin), чтобы линия не пересекала margin'ы и
   делала колоночную структуру меню очевидной. Реализовано через ::after
   вместо border-bottom, чтобы можно было ограничить длину. */
.m-menu__list > li {
  position: relative;
}

.m-menu__list > li::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--grid-margin);
  right: var(--grid-margin);
  height: 1px;
  background: #f0f0f0;
}

.m-menu__list > li:last-child::after {
  content: none;
}

/* Все верх-уровневые пункты бургера: один шрифт и один кегль; цвет — по роли.
   Левый padding = --grid-margin, чтобы текст начинался на левой линии сетки. */
.m-menu__list a,
.m-menu__sub-row-link,
.m-menu__sub-row-label,
.m-menu__item-label {
  display: block;
  padding: 16px var(--grid-margin);
  text-decoration: none;
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* Ссылки — зелёные */
.m-menu__list a,
.m-menu__sub-row-link {
  color: #8CC540;
}
/* Заголовки разделов без ссылки — серые */
.m-menu__sub-row-label,
.m-menu__item-label {
  color: #626161;
}

.m-menu__list a:hover {
  background-color: #f5f5f5;
  color: #7ab330;
  text-decoration: none;
}

.m-menu__list a:active {
  background-color: #f0f0f0;
  color: #6a9a20;
}

/* Аккордеон-подменю (Портфолио) */
.m-menu__item--has-sub {
  position: relative;
}

.m-menu__sub-row {
  display: flex;
  align-items: stretch;
}

.m-menu__sub-row-link {
  flex: 1;
}

.m-menu__sub-row-label {
  flex: 1;
}

.m-menu__sub-row-link:hover {
  background-color: #f5f5f5;
  color: #7ab330;
}

.m-menu__sub-row-link:active {
  background-color: #f0f0f0;
  color: #6a9a20;
}

/* Кнопка-стрелка аккордеона = последняя колонка сетки.
   Ширина = --grid-column-width, отступ справа = --grid-margin (поле сетки). */
.m-menu__sub-toggle {
  width: var(--grid-column-width);
  margin-right: var(--grid-margin);
  border: none;
  border-left: 1px solid #f0f0f0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.m-menu__sub-toggle:hover {
  background-color: #f5f5f5;
}

.m-menu__sub-toggle:active {
  background-color: #f0f0f0;
}

.m-menu__arrow {
  transition: transform 0.3s ease;
}

.m-menu__item--has-sub.is-open .m-menu__arrow {
  transform: rotate(90deg);
}

.m-menu__sub {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  background: #f7faf2;
}

.m-menu__item--has-sub.is-open .m-menu__sub {
  max-height: 500px;
}

.m-menu__sub > li {
  border-bottom: 1px solid #efefef;
  border-left: 3px solid #8CC540;
}

.m-menu__sub > li:last-child {
  border-bottom: none;
}

.m-menu__sub a {
  display: block;
  padding: 14px 20px;
  text-decoration: none;
  color: #8CC540;
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.m-menu__sub a:hover {
  background-color: #eff7e6;
  color: #7ab330;
  text-decoration: none;
}

.m-menu__sub a:active {
  background-color: #e8f0df;
  color: #6a9a20;
}

/* Мобильный слайдер для 320px */
.m-photo-slider {
  width: 100%;
  max-width: var(--grid-content-width);
  margin: 0 auto;
  padding: 0;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slider__track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
}

.slider__track::-webkit-scrollbar {
  display: none;
}

.slider__slide {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  scroll-snap-align: start;
  box-sizing: border-box;
}

.slider__image {
  width: 100%;
  max-width: var(--grid-content-width);
  height: auto;
  aspect-ratio: 297 / 396;
  display: block;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
}

/* Стрелки навигации */
.slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  border-radius: 999px;
  padding: 0;
  margin: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.slider__arrow--left {
  left: 10px;
}

.slider__arrow--right {
  right: 10px;
}

.slider__arrow--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.slider__arrow img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 7px;
}

/* Плашка с точками */
.slider__dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  min-width: 110px;
  width: auto;
  height: 30px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 999px;
  padding: 0 16px;
  margin: 0;
  z-index: 10;
  box-sizing: border-box;
}

.slider__dot {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.slider__dot-icon {
  display: block;
  width: 12px;
  height: 12px;
}

.slider__dot:not(.slider__dot--active) .slider__dot-icon {
  width: 10px;
  height: 10px;
}

/* Контент слайда с заголовком */
.slider__slide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: var(--grid-content-width);
  box-sizing: border-box;
  padding: 0;
}

.slider__slide-title {
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #414142;
  margin: 0 0 12px 0;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}

/* Заголовок секции "Виды подсветки" */
.lighting-section__title {
  font-family: 'DIN Pro', sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #414142;
  margin: 20px 0 12px 0;
  text-align: left;
  width: 100%;
  max-width: var(--grid-content-width);
  box-sizing: border-box;
}

.lighting-section__intro {
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #626161;
  margin: 0 0 12px 0;
  text-align: left;
  width: 100%;
  max-width: var(--grid-content-width);
  box-sizing: border-box;
}

/* Блок "Способы управления подсветкой" */
.control-methods-section {
  width: 100%;
  max-width: var(--grid-content-width);
  margin-top: 24px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.control-methods-section__title {
  font-family: 'DIN Pro', sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #414142;
  margin: 0 0 12px 0;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

/* Чипы управления используют стандартные классы chip-tag--primary и chip-tag--secondary */

/* Контент способа управления */
.control-method-content {
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
}

.control-method-content__subtitle {
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #414142;
  margin: 0 0 12px 0;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.control-method-content__description {
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #626161;
  margin: 12px 0 0 0;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.control-method-content__image-wrapper {
  width: 100%;
  max-width: var(--grid-content-width);
  margin: 0 auto 12px auto;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.control-method-content__image {
  width: 100%;
  max-width: var(--grid-content-width);
  height: auto;
  aspect-ratio: 297 / 396;
  object-fit: cover;
  object-position: center;
  display: block;
  box-sizing: border-box;
}

/* Breadcrumbs для мобильной версии. margin-top сдвигает контент ниже
   плавающей шапки (.m-header position: fixed) и оставляет 12px воздуха,
   чтобы крошки не упирались впритык в нижний край шапки.
   Высота шапки = column-width + 24 (padding 12 сверху + 12 снизу).
   Меняется автоматически с viewport, как и шапка. */
#breadcrumbs_container {
  margin-top: calc(var(--grid-column-width) + 24px + 12px);
  margin-bottom: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

#breadcrumbs {
  width: 100%;
  box-sizing: border-box;
}

#content {
  margin-top: 0;
  padding: 0;
  width: 100%;
  max-width: var(--grid-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Плавающая кнопка связи. position: fixed, но привязана к ЛЕВОЙ КОЛОНКЕ
   сетки сайта, а не к viewport. На viewport >= --grid-width окно сайта
   центрировано — кнопка живёт у его левого margin. На узких экранах
   max() гарантирует, что кнопка не вылезет за край viewport.
   Размер = одна колонка сетки (квадрат), масштабируется с viewport
   как и кнопки шапки: 49.6 на 320, 57.6 на 360. */
.floating-contact-btn {
  position: fixed;
  left: max(var(--grid-margin), calc(50% - var(--grid-width) / 2 + var(--grid-margin)));
  bottom: 16px;
  width: var(--grid-column-width);
  height: var(--grid-column-width);
  background-color: #AFD355;
  border: 2px solid #8CC540;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  animation: pulse 2s ease-in-out infinite;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.floating-contact-btn:active {
  animation: none;
  transform: scale(0.95);
}

/* Иконка занимает всю кнопку. inset: 0 (= top/right/bottom/left: 0)
   вместо top:50%/left:50%/translate(-50%,-50%) — Safari иногда рендерит
   transform-центрирование с sub-pixel ошибкой и pulse-анимацией родителя,
   из-за чего иконка вылезала за круг. inset надёжнее. */
.floating-contact-btn__icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.5s ease-in-out;
}

.floating-contact-btn__icon.fade-out {
  opacity: 0;
}

.floating-contact-btn__icon.fade-in {
  opacity: 1;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Стили для раскрытия/скрытия характеристик - текстовая ссылка с линией */
.characteristics-wrapper {
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  margin-bottom: 12px;
}

.characteristics-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  padding-bottom: 8px;
  margin-bottom: 0;
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
  display: inline-block;
}

.characteristics-toggle:hover .characteristics-toggle__text {
  color: #7ab330;
  border-bottom-color: #7ab330;
}

.characteristics-toggle:hover .characteristics-toggle__arrow {
  color: #7ab330;
}

.characteristics-toggle:active .characteristics-toggle__text {
  color: #6a9a20;
  border-bottom-color: #6a9a20;
}

.characteristics-toggle:active .characteristics-toggle__arrow {
  color: #6a9a20;
}

.characteristics-toggle--clicked .characteristics-toggle__text {
  color: #999;
  border-bottom-color: #999;
}

.characteristics-toggle--clicked .characteristics-toggle__arrow {
  color: #999;
}

.characteristics-toggle__text {
  display: inline;
  color: #8CC540;
  border-bottom: 1px dotted #8CC540;
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.characteristics-toggle__arrow {
  display: inline;
  margin-left: 4px;
  color: #8CC540;
  transition: color 0.2s ease;
}

.characteristics-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.16s ease;
  margin: 0;
  padding: 0;
}

.characteristics-content.characteristics-content--expanded {
  max-height: 2000px;
  padding-top: 12px;
  margin-top: 0;
}

/* ============================================
   КОМПОНЕНТ ЧИПОВ (CHIP-TAGS)
   ============================================ */

/* Контейнер для чипов */
.chip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  margin-bottom: 12px;
}

/* Базовые стили для всех чипов */
.chip-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  box-sizing: border-box;
  text-decoration: none;
  box-shadow: none;
  background-image: none;
  height: 32px;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.chip-tag__label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
}

/* Главный чип (Primary Chip) */
.chip-tag--primary {
  background-color: #8CC540;
  color: #FFFFFF;
  padding: 0 14px;
}

.chip-tag--primary:hover {
  background-color: #7EAF36;
  color: #FFFFFF;
}

.chip-tag--primary:active {
  background-color: #6D982F;
  color: #FFFFFF;
}

/* Второстепенные чипы (Secondary Chips) */
.chip-tag--secondary {
  background-color: #FFFFFF;
  color: #414142;
  border: 1px solid #8CC540;
  padding: 0 13px;
}

.chip-tag--secondary:hover {
  background-color: rgba(140, 197, 64, 0.12);
  color: #414142;
  border-color: #8CC540;
}

.chip-tag--secondary:active {
  background-color: rgba(140, 197, 64, 0.12);
  color: #414142;
  border-color: #6D982F;
}

/* Цвет текста на чипе-ссылке. Без явного селектора с тегом 'a' глобальное
   правило `a { color: #8CC540 }` (зелёный = цвет фона primary-чипа) делает
   текст невидимым; `main a:hover` добавляет underline. Specificity
   `a.chip-tag--*` (1 класс + 1 тег) перебивает оба. */
a.chip-tag--primary,
a.chip-tag--primary:hover,
a.chip-tag--primary:visited,
a.chip-tag--primary:focus,
a.chip-tag--primary:active {
  color: #FFFFFF;
  text-decoration: none;
}

a.chip-tag--secondary,
a.chip-tag--secondary:hover,
a.chip-tag--secondary:visited,
a.chip-tag--secondary:focus,
a.chip-tag--secondary:active {
  color: #414142;
  text-decoration: none;
}

/* ============================================
   БЛОК С ОПИСАНИЕМ МАКЕТА
   ============================================ */
.maket-description {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0 !important;
  margin-bottom: 12px;
  padding: 0;
}

.maket-description p {
  margin: 0;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1;
  color: #626161;
  font-family: 'DIN Pro', sans-serif;
  font-weight: 400;
  text-align: left;
}

.maket-description p:last-child {
  margin-bottom: 0;
}

/* ============================================
   Контейнеры секций без явных стилей
   (ранее наследовали ширину от main: 320 - 24 = 296)
   Привязка к --grid-content-width делает их
   готовыми к расширению при будущих брейкпойнтах.
   ============================================ */
.lighting-section,
.delivery-section,
.reviews-section {
  width: 100%;
  max-width: var(--grid-content-width);
  margin-left: auto;
  margin-right: auto;
  margin-top: 24px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

/* ============================================
   ПОДВАЛ (m-footer) — 320px baseline
   ============================================ */

.m-footer {
  width: 100%;
  max-width: var(--grid-width);
  margin: 0 auto;
  background: #f7f7f7;
  box-sizing: border-box;
}

.m-footer__inner {
  padding: 24px var(--grid-margin) 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Соцсети — ряд между nav и legal */
.m-footer__socials {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 4px;
}

.m-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #efefef;
  color: #626161;
  transition: background 0.2s ease, color 0.2s ease;
}

.m-footer__social-link:hover { background: #e0e0e0; }

.m-footer__social-link svg { display: block; }

.m-footer__social-link--vk {
  background: #0077FF;
  color: #fff;
}

.m-footer__social-link--vk:hover { background: #0066DD; }

/* Навигация */
.m-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.m-footer__nav-group { display: flex; flex-direction: column; gap: 4px; }

.m-footer__nav-heading {
  display: block;
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #626161;
  margin-bottom: 4px;
  text-decoration: none;
}

a.m-footer__nav-heading { color: #8CC540; }
a.m-footer__nav-heading:hover { color: #7ab330; }

.m-footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.m-footer__nav-link {
  display: block;
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-size: 16px;
  color: #8CC540;
  text-decoration: none;
  padding: 3px 0;
  transition: color 0.2s ease;
}

.m-footer__nav-link:hover { color: #7ab330; }

/* Юридический ряд */
.m-footer__legal {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.m-footer__copyright,
.m-footer__requisites {
  font-size: 12px;
  color: #aaa;
  margin: 0;
}

.m-footer__privacy-link {
  font-size: 12px;
  color: #aaa;
  text-decoration: underline;
}

.m-footer__privacy-link:hover { color: #8CC540; }

/* Кредит исполнителя */
.m-footer__madeby {
  font-size: 12px;
  color: #bbb;
  text-align: center;
  padding-top: 4px;
}

.m-footer__madeby a {
  color: #aaa;
  text-decoration: none;
}

.m-footer__madeby a:hover { color: #8CC540; }

/* Span-заглушки для пунктов меню без ссылки — типографика унифицирована с .m-menu__list a выше */

/* CTA-кнопка "Связаться с нами" в бургере — по сеточной ширине.
   Линия-разделитель отключена через :last-child::after (см. m-menu__list > li). */
.m-menu__cta-item {
  padding: 16px var(--grid-margin);
  background: #fff;
}

.m-menu__cta {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  margin: 0;
  padding: 0;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Соц-ссылка ВКонтакте в бургере — отдельный блок-sibling под <ul>,
   чтобы не цепляться за .m-menu__list a. Разделитель сверху ограничен сеткой
   через ::before (отступы --grid-margin слева/справа). */
.m-menu__socials {
  position: relative;
  padding: 16px var(--grid-margin);
  display: flex;
  gap: 12px;
  align-items: center;
}

.m-menu__socials::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--grid-margin);
  right: var(--grid-margin);
  height: 1px;
  background: #f0f0f0;
}

.m-menu__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #efefef;
  color: #626161;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.m-menu__social-link:hover { text-decoration: none; }
.m-menu__social-link svg { display: block; }

.m-menu__social-link--vk {
  background: #0077FF;
  color: #fff;
}

.m-menu__social-link--vk:hover { background: #0066DD; }


/* ============================================================
   === SECTION: Migrated design (formerly experiment_v3) ===
   Перенос правил из бывшей секции Experimental v3 в ядро без
   обёртки body.page--*. Теперь применяется ко всем страницам,
   которые рендерят соответствующие компоненты.
   См. concepts/prmaket2-css-cleanup-2026-05-01.md.
   ============================================================ */

/* Typography (formerly --exp-font-scale: 1.5; explicit values now) */
.name_main h1 {
  font-size: 33px;
}

.name_main h2 {
  font-size: 33px;
}

#breadcrumbs p,
#breadcrumbs a,
.maket-description p,
.portfolio_text p,
.chip-tag,
.examples-slider__subtitle,
.layouts-section__intro,
.lighting-section__intro,
.control-method-content__description,
.yandex-review-card__meta,
.yandex-review-card__date,
.yandex-review-card__text,
.delivery-section__text {
  font-size: 21px;
}

.brand-highlight {
  color: #8cc540;
  font-weight: 400;
  white-space: nowrap;
}

main .m-btn-more,
.m-btn-submit,
.examples-slider__title-link,
.slider__slide-title,
.layouts-section__subtitle,
.control-method-content__subtitle,
.yandex-review-card__name,
.lighting-slider__title,
.trust-feature__title {
  font-size: 24px;
}

.examples-section__title,
.layouts-section__title,
.lighting-section__title,
.control-methods-section__title,
.clients-ribbon__title,
.trust-section__title,
.delivery-section__title,
.reviews-section__title {
  font-size: 33px;
  line-height: 1;
  color: #414142;
  text-shadow: none;
}

/* Unified image radius */
.slider__image,
.examples-slider__image,
.layouts-section__image,
.control-method-content__image,
.similar-projects__item img,
.similar-projects__image-wrap img:not(.similar-projects__tag),
.lighting-circles__photo {
  border-radius: 10px;
}

/* CTA style based on "Сбросить фильтры" */
.cta-cost-btn {
  background: #ffffff;
  border: 1px solid #8cc540;
  color: #414142;
  text-transform: none;
  letter-spacing: 0;
  width: 100%;
  max-width: var(--grid-content-width);
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
}

.cta-cost-btn:hover {
  background-color: rgba(140, 197, 64, 0.08);
}

.cta-cost-btn:active {
  background-color: rgba(140, 197, 64, 0.15);
}

/* Client logos ribbon */
.clients-ribbon {
  /* Единственный источник истины для зазора: внутренний gap логотипов И
     зазор между группами берутся отсюда же → рассинхрон «стык == шаг»
     руками невозможен. См. concepts/prmaket2-clients-ribbon-marquee.md */
  --clients-ribbon-gap: 12px;
  width: 100%;
  max-width: var(--grid-content-width);
  margin: 12px auto 14px;
}

.clients-ribbon__title {
  margin: 0 0 8px;
  font-family: 'DIN Pro', sans-serif;
}

.clients-ribbon__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 10px 0;
  border-top: 1px solid #C0C0C0;
  border-bottom: 1px solid #C0C0C0;
  /* Стабильный 3D-контекст для дочерних композитных слоёв (iOS Safari). */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.clients-ribbon__track {
  display: flex;
  /* Зазор между группами == внутреннему шагу, из одной переменной. */
  gap: var(--clients-ribbon-gap);
  /* Только контейнер-обёртка; НЕ анимируемый элемент (иначе один слой
     шириной 2×группы уходит за texture cap iOS Safari → пустой кадр). */
  width: max-content;
}

.clients-ribbon__group {
  display: flex;
  gap: var(--clients-ribbon-gap);
  flex: 0 0 auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Анимация включается ТОЛЬКО когда JS (clients-ribbon.js) достроил ленту:
   набор логотипов клонирован ровно до перекрытия вьюпорта (слой остаётся
   меньше texture-cap iOS Safari ~4096px → нет «исчезновения»), добавлена
   вторая группа-дубль, длительность выставлена от ширины (постоянная
   скорость). Без JS класса .is-ready нет → статичный ряд, не пусто.
   translate3d в keyframe промоутит слой стабильно; -100% = собственная
   ширина группы → инвариант стыка держится сам. Анимируем ОБЕ группы
   в лок-степе. См. concepts/prmaket2-clients-ribbon-marquee.md (Тир 2). */
.clients-ribbon.is-ready .clients-ribbon__group {
  animation: clients-ribbon-marquee var(--clients-ribbon-duration, 16s) linear infinite;
}

.clients-ribbon__logo {
  flex: 0 0 auto;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.clients-ribbon__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: 52px;
  object-fit: contain;
}

@keyframes clients-ribbon-marquee {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    /* -100% ширины СВОЕЙ группы + межгрупповой зазор: при добавлении
       логотипа ширина и сдвиг растут вместе → стык остаётся бесшовным
       без ручной подгонки. */
    -webkit-transform: translate3d(calc(-100% - var(--clients-ribbon-gap)), 0, 0);
    transform: translate3d(calc(-100% - var(--clients-ribbon-gap)), 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-ribbon__group { animation: none; }
  .clients-ribbon__group + .clients-ribbon__group { display: none; }
}

/* Layout chips section */
.layout-methods-section__chips {
  margin-bottom: 12px;
}

/* Lighting slider */
.lighting-section--circles {
  width: 100%;
  max-width: var(--grid-content-width);
  margin: 24px auto 12px;
}

.lighting-section__title--accent {
  color: #414142;
  text-shadow: none;
}

.lighting-slider {
  --lighting-circle-size: var(--grid-content-width);
  --lighting-title-height: 72px;
  width: 100%;
  max-width: var(--grid-content-width);
  margin: 0 auto;
}

.lighting-slider .slider__slide {
  align-items: flex-start;
}

.lighting-slider .slider__arrow {
  top: calc(var(--lighting-title-height) + (var(--lighting-circle-size) / 2));
}

.lighting-slider__slide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.lighting-slider__title {
  min-height: var(--lighting-title-height);
  margin: 0;
  color: #414142;
  line-height: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lighting-slider__circle {
  width: var(--lighting-circle-size);
  height: var(--lighting-circle-size);
  border-radius: 50%;
  border: 2px solid #8cc540;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.lighting-slider__image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Portfolio filters remain in code, but hidden in UI */
.similar-projects__filters-toolbar,
.similar-projects__active-filters,
.similar-projects__hidden-field-wrap,
.filters-sheet,
.similar-projects__empty {
  display: none !important;
}

.similar-projects__more-link {
  display: table;
  margin: 12px auto 0;
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
}

.similar-projects__more-link[hidden] {
  display: none;
}

.similar-projects__cta {
  margin: 12px auto 0;
  width: 100%;
  max-width: var(--grid-content-width);
}

.similar-projects__item.is-hidden-by-more,
.similar-projects__item.is-hidden-overflow {
  display: none !important;
}

.similar-projects__item {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(65, 65, 66, 0.14);
  padding-bottom: 16px;
}

/* (geometry of .similar-projects__image-wrap and its img is set by the
   core rule above; here only adjust corner radius for the migrated design.) */
.similar-projects__image-wrap img {
  border-radius: 10px;
}

.similar-projects__item .examples-slider__content {
  margin-top: 8px;
  text-align: center;
}

.similar-projects__item .examples-slider__title-link {
  display: block;
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #8cc540;
  text-decoration: none;
  margin-bottom: 4px;
}

.similar-projects__item .examples-slider__subtitle {
  margin: 0;
  font-size: 21px;
  color: #414142;
  opacity: 0.7;
  line-height: 1;
}

.similar-projects__item.is-hidden-by-more {
  display: none !important;
}

/* Trust block */
.trust-section,
.delivery-section,
.reviews-section {
  width: 100%;
  max-width: var(--grid-content-width);
  margin: 24px auto 12px;
}

.trust-section__title,
.delivery-section__title,
.reviews-section__title {
  margin: 0 0 12px;
  text-align: left;
}

.trust-section__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.trust-feature {
  min-height: 138px;
  border-radius: 12px;
  border: 1px solid rgba(140, 197, 64, 0.35);
  background: #fbfdf7;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trust-feature__icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-feature__icon-image {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.trust-feature__title {
  margin: 0;
  color: #414142;
  font-family: 'DIN Pro', sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1;
}

.delivery-section__text {
  margin: 0;
  color: #626161;
  line-height: 1;
}

/* Yandex-like reviews cards */
.reviews-section__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.yandex-review-card {
  border: 1px solid #e4e4e4;
  border-radius: 14px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.yandex-review-card__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.yandex-review-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #414142;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DIN Pro', sans-serif;
  font-size: 27px;
  font-weight: 400;
  flex-shrink: 0;
}

.yandex-review-card__name {
  margin: 0;
  color: #111;
  line-height: 1;
}

.yandex-review-card__meta,
.yandex-review-card__date {
  margin: 2px 0 0;
  color: #767676;
  line-height: 1;
}

.yandex-review-card__rating {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  color: #ffcc00;
  line-height: 0;
}

.yandex-review-card__star {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.yandex-review-card__text {
  margin: 0;
  color: #222;
  line-height: 1;
}

.yandex-review-card__text--collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

/* "Показать полностью" / "Показать еще отзывы" — единый эталонный стиль c .similar-projects__more-link */
.yandex-review-card__more {
  display: table;
  margin: 12px auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: #8cc540;
  font: inherit;
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.yandex-review-card__more:hover {
  color: #7ab330;
  text-decoration: none;
}

.action-buttons--bottom {
  margin-top: 14px;
  margin-bottom: 24px;
}

/* Селектор .maket-description .page-stat-line только для margin: 0 — нужен
   повышенный приоритет (0,2,0) над .maket-description p (0,1,1).
   font-size намеренно НЕ задаём, чтобы наследовался 21px от .maket-description p
   («увеличенный» текст согласованного дизайна). */
.maket-description .page-stat-line {
  margin: 0;
}

.maket-description:has(.page-stat-line) {
  margin-bottom: 16px;
}


/* ============================================================
   === SECTION: Modal — Contact ===
   Merged from assets/css/contact-modal.css on 2026-05-01.
   ============================================================ */

/* ============================================
   МОДАЛЬНОЕ ОКНО СВЯЗИ (BOTTOM-SHEET)
   Адаптив для 320px
   ============================================ */

/* Затемнение фона */
.contact-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.contact-modal.contact-modal--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.contact-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

/* Контент модального окна */
.contact-modal__content {
  position: relative;
  width: 100%;
  max-width: var(--grid-width);
  max-height: 90vh;
  background: #FFFFFF;
  border-radius: 24px 24px 0 0;
  padding: 20px 16px 24px;
  box-sizing: border-box;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 1;
}

.contact-modal--open .contact-modal__content {
  transform: translateY(0);
}

/* Шапка */
.contact-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.contact-modal__header-text {
  flex: 1;
  padding-right: 12px;
}

.contact-modal__title {
  font-family: 'DIN Pro Condensed', 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #414142;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}

.contact-modal__subtitle {
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #414142;
  margin: 0;
}

.contact-modal__close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

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

.contact-modal__close:active {
  opacity: 0.5;
}

.contact-modal__close-icon {
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-size: 28px;
  line-height: 1;
  color: #414142;
  font-weight: 300;
}

/* Блок мессенджеров */
.contact-modal__messengers {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.contact-modal__messenger-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.contact-modal__messenger-btn:hover {
  opacity: 0.7;
}

.contact-modal__messenger-btn:active {
  opacity: 0.5;
}

.contact-modal__messenger-btn--disabled {
  opacity: 0.85;
  cursor: default;
}

.contact-modal__messenger-btn--disabled:active {
  opacity: 0.85;
}

.contact-modal__messenger-btn--disabled:hover {
  opacity: 0.85;
}

.contact-modal__messenger-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F5F5F5;
  transition: background-color 0.2s ease;
}

.contact-modal__messenger-btn:hover .contact-modal__messenger-icon {
  background: #E8E8E8;
}

.contact-modal__messenger-btn--disabled:hover .contact-modal__messenger-icon {
  background: transparent;
}

.contact-modal__messenger-icon svg,
.contact-modal__messenger-icon .contact-modal__messenger-img {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}

.contact-modal__messenger-icon--brand {
  background: transparent;
}

.contact-modal__messenger-btn:hover .contact-modal__messenger-icon--brand {
  background: transparent;
}

.contact-modal__messenger-icon .contact-modal__messenger-img--telegram {
  width: 56px;
  height: 56px;
}

.contact-modal__messenger-icon .contact-modal__messenger-img--whatsapp {
  width: 67px;
  height: 67px;
}

.contact-modal__messenger-icon .contact-modal__messenger-img--email {
  width: 56px;
  height: 56px;
}

.contact-modal__messenger-label {
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: #414142;
  text-align: center;
}

/* Форма обратной связи */
.contact-modal__form {
  margin-bottom: 20px;
}

.contact-modal__form-group {
  margin-bottom: 16px;
}

.contact-modal__form-group:last-of-type {
  margin-bottom: 20px;
}

.contact-modal__input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #DCDCDC;
  padding: 12px 0;
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: #414142;
  background: transparent;
  box-sizing: border-box;
  transition: border-bottom-color 0.2s ease;
  outline: none;
}

.contact-modal__input::placeholder {
  color: #999;
}

.contact-modal__input:focus {
  border-bottom-color: #8CC540;
}

/* Согласие 152-ФЗ — по образцу десктопной модалки (.dtm-consent) */
.contact-modal__consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 20px;
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-size: 13px;
  line-height: 1;
  color: #666;
}

.contact-modal__consent input {
  margin-top: 3px;
  flex: 0 0 auto;
}

.contact-modal__consent a {
  color: #8CC540;
}

.contact-modal__submit {
  width: 100%;
  height: 44px;
  background: #8CC540;
  border: none;
  border-radius: 12px;
  font-family: 'DIN Pro Condensed', 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-transform: uppercase;
  box-sizing: border-box;
}

.contact-modal__submit:hover {
  background: #7ab330;
}

.contact-modal__submit:active {
  background: #6a9a20;
}

/* Кнопка "Отправить" - Primary CTA (копия m-btn-more с зелёной заливкой) */
.contact-modal__form .m-btn-submit {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  min-height: 50px;
  margin: 0;
  background: #8CC540;
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 0 24px;
  font-family: "DIN Pro", "Trebuchet MS", sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s ease;
  box-sizing: border-box;
  text-align: center;
}

.contact-modal__form .m-btn-submit:hover {
  background-color: #7AAE37;
}

.contact-modal__form .m-btn-submit:active {
  background-color: #6D982F;
}

/* Ссылка на калькулятор */
.contact-modal__calculator-link {
  margin-bottom: 24px;
  text-align: center;
}

.contact-modal__calculator-link-text {
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #8CC540;
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-modal__calculator-link-text:hover {
  color: #7ab330;
  text-decoration: underline;
}

.contact-modal__calculator-link-text:active {
  color: #6a9a20;
}

/* Контактные данные */
.contact-modal__contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #E8E8E8;
}

.contact-modal__contact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-modal__contact-label {
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: #999;
}

.contact-modal__contact-value {
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #414142;
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-modal__contact-value[href]:hover {
  color: #8CC540;
  text-decoration: underline;
}

.contact-modal__contact-value[href]:active {
  color: #7ab330;
}

/* Блокировка скролла фона (без position: fixed — сохраняет позицию скролла) */
body.contact-modal-open {
  overflow: hidden;
}


/* ============================================================
   === SECTION: Modal — Badges ===
   Merged from assets/css/badges-modal.css on 2026-05-01.
   ============================================================ */

/* ============================================
   МОДАЛЬНОЕ ОКНО СПРАВКИ ПО МЕТКАМ ПРОЕКТА
   Стиль как у contact-modal (320px)
   ============================================ */

.badges-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.badges-modal.badges-modal--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.badges-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.badges-modal__content {
  position: relative;
  width: 100%;
  max-width: var(--grid-width);
  max-height: 90vh;
  background: #FFFFFF;
  border-radius: 24px 24px 0 0;
  padding: 20px 16px 24px;
  box-sizing: border-box;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 1;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

.badges-modal--open .badges-modal__content {
  transform: translateY(0);
}

.badges-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.badges-modal__title {
  flex: 1;
  font-family: 'DIN Pro Condensed', 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #414142;
  margin: 0;
  padding-right: 12px;
  text-transform: uppercase;
}

.badges-modal__close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.badges-modal__close:hover {
  opacity: 0.7;
}

.badges-modal__close:active {
  opacity: 0.5;
}

.badges-modal__close-icon {
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-size: 28px;
  line-height: 1;
  color: #414142;
  font-weight: 300;
}

.badges-modal__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.badges-modal__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.badges-modal__icon-wrap {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}

.badges-modal__icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

/* Неактивные иконки: grayscale + opacity 0.4 */
.badges-modal__item.badges-modal__item--inactive .badges-modal__icon {
  filter: grayscale(100%);
  opacity: 0.4;
}

.badges-modal__text {
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #414142;
  margin: 0;
  padding-top: 4px;
}

/* Блокировка скролла фона (без position: fixed — сохраняет позицию скролла) */
body.badges-modal-open {
  overflow: hidden;
}

/* ============================================================
   Фаза 2 (6 кол, 480-1023px): 5→6 структурный переход.
   margin: 18 → 28, gutter: 16 → 24, column = (content − gutter*5) / 6.
   ============================================================ */
@media (min-width: 480px) {
  :root {
    --grid-margin: clamp(18px, calc(18px + (100vw - 480px) * 0.0184), 28px);
    --grid-gutter: clamp(16px, calc(16px + (100vw - 480px) * 0.0147), 24px);
    --grid-columns: 6;
    --grid-width: min(100vw, 1023px);
    --grid-column-width: calc((var(--grid-content-width) - var(--grid-gutter) * 5) / 6);
  }

  /* Бургер на 480+: контейнер растянут на 2 кол + gutter, CSS-разметка face--burger
     (текст «МЕНЮ» слева, палочки в правой колонке). Числа из Menu Button3.svg
     (visible rect 111×50 в viewBox 123×63, палочки x=85.5..110.5). */
  .m-header__btn--menu {
    width: calc(var(--grid-column-width) * 2 + var(--grid-gutter));
  }
  .m-header__btn--menu img { display: none; }
  .m-header__btn--menu .m-header__btn-face--burger {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
  .m-header__btn--menu .m-header__burger-label {
    display: inline-block;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: calc(var(--grid-column-width) * 30 / 50);
    line-height: 1;
    color: #8CC540;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .m-header__btn--menu .m-header__burger-lines {
    display: none;
  }

  /* EN на 480+: завершение миграции SVG -> CSS. Показываем CSS-face--en и прячем
     Language.svg, чтобы высота бокса (= 1 колонка) и размер текста (col x 30/50)
     совпадали с кнопкой МЕНЮ. Эталон — прототип 320 (бокс = ширина колонки). */
  .m-header__btn--lang .m-header__btn-face--en {
    display: flex;
  }
  .m-header__btn--lang img {
    display: none;
  }

  /* Page-stat-line: "Выполнено макетов" + "Работаем с" в 2 колонки. */
  .maket-description:has(.page-stat-line) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--grid-gutter);
  }

  /* Action-buttons (top CTA): сетка 6 кол, .m-btn span 4 центрировано (cols 2-5). */
  .action-buttons {
    grid-template-columns: repeat(6, 1fr);
  }
  .action-buttons .m-btn {
    grid-column: 2 / 6;
  }

  /* Прочие full-page CTA: 4 кол центрированно. */
  .similar-projects__cta,
  .similar-projects__reset {
    width: calc(var(--grid-column-width) * 4 + var(--grid-gutter) * 3);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  /* Examples-slider: ВСЕ карточки 4 кол + 3 gutter. */
  .examples-slider__card,
  .examples-slider__card--cta {
    flex: 0 0 calc(var(--grid-column-width) * 4 + var(--grid-gutter) * 3);
    width: calc(var(--grid-column-width) * 4 + var(--grid-gutter) * 3);
  }

  /* CTA-карточка: рамка как у image. */
  .examples-slider__card--cta {
    border: 1px solid #e4e4e4;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  }

  /* Портфолио: 2 в ряд. */
  .similar-projects__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--grid-gutter);
    row-gap: var(--grid-gutter);
  }
  .similar-projects__item {
    flex: none;
    width: 100%;
  }

  /* Отзывы: 2 в ряд. */
  .reviews-section__list {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--grid-gutter);
    row-gap: var(--grid-gutter);
  }

  /* Подвал: 2 col grid. */
  .m-footer__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--grid-gutter);
    row-gap: 16px;
  }
  .m-footer__nav { display: contents; }
  /* 4 nav-колонки (Каталог/Выставки/Компания/Сервис) в сетке 2×2, ниже — VK и реквизиты. */
  .m-footer__nav-group:nth-child(1) { grid-column: 1; grid-row: 1; }
  .m-footer__nav-group:nth-child(2) { grid-column: 2; grid-row: 1; }
  .m-footer__nav-group:nth-child(3) { grid-column: 1; grid-row: 2; }
  .m-footer__nav-group:nth-child(4) { grid-column: 2; grid-row: 2; }
  .m-footer__socials { grid-column: 1; grid-row: 3; }
  .m-footer__legal   { grid-column: 1 / -1; grid-row: 4; }
  .m-footer__madeby  { grid-column: 1 / -1; grid-row: 5; }
}


/* <picture> для art-direction не должна создавать свой бокс — иначе ломает
   flex/sizing слайда и обёрток (img перестаёт быть прямым ребёнком контейнера).
   display:contents убирает picture из layout, <img> ведёт себя как на project_page. */
.slider__slide picture,
.layouts-section__image-wrapper picture,
.control-method-content__image-wrapper picture {
  display: contents;
}

/* ============================================================
   ПЛАНШЕТ 768-1023: фаза 8 колонок (Тест 1 - переход шапки).
   Канон проекта: лестница 5 (320) / 6 (480) / 8 (768) / 12 (1024).
   Размеры элементов остаются параметрическими (col), но col сужается
   (делитель 8 вместо 6) -> кнопки/лого/floating автоматически компактнее.
   margin/gutter/grid-width продолжают clamp из 480-фазы (гладкий переход).
   Центральные ~3 колонки шапки пока воздух (space-between) - наполнение в Тест 2.
   ============================================================ */
@media (min-width: 600px) {
  :root {
    --grid-columns: 8;
    --grid-column-width: calc((var(--grid-content-width) - var(--grid-gutter) * 7) / 8);
  }

  /* Action-buttons (top CTA): сетка 8 кол, .m-btn span 4 центрировано (cols 3-6). */
  .action-buttons {
    grid-template-columns: repeat(8, 1fr);
  }
  .action-buttons .m-btn {
    grid-column: 3 / 7;
  }

  /* Art direction изображений 768+: hero 16:9, контентные блоки 4:3.
     aspect-ratio задаётся на ОБЁРТКЕ (надёжный sizing для replaced-img в flex),
     картинка заполняет cover. Кадр (focal point) меняется в шаблоне через <picture>. */
  .m-photo-slider:not(.lighting-slider) .slider__slide {
    aspect-ratio: 16 / 9;
  }
  .layouts-section__image-wrapper,
  .control-method-content__image-wrapper {
    aspect-ratio: 4 / 3;
  }
  .slider__image,
  .layouts-section__image,
  .control-method-content__image {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  /* Examples-slider: на 8 кол карточка 4 кол = 50% (2 влезают, scroll-эффект пропадает).
     5 кол (~62%) -> 1 целая + край второй выглядывает. */
  .examples-slider__card,
  .examples-slider__card--cta {
    flex: 0 0 calc(var(--grid-column-width) * 5 + var(--grid-gutter) * 4);
    width: calc(var(--grid-column-width) * 5 + var(--grid-gutter) * 4);
  }
}

.contact-modal__messenger-icon .contact-modal__messenger-img--vk {
  width: 56px;
  height: 56px;
}


/* ============================================================
   Карточки категорий.
   Каркас и типографика НЕ дублируются: карточка использует те же
   классы, что карточка макета (.similar-projects__item,
   .similar-projects__image-wrap, .examples-slider__title-link,
   .examples-slider__subtitle) — размеры, шрифты, скругления и ховер
   совпадают по построению. Здесь только: сетка блока + наложение
   на изображение (тёмный скрим и заглавное фото / счётчик).
   ============================================================ */
.category-cards {
  width: 100%;
  box-sizing: border-box;
}
.category-cards__intro {
  margin: 4px 0 0;
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
  color: #414142;
  opacity: 0.7;
}
.category-cards__gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gutter);
  margin-top: 12px;
  width: 100%;
  box-sizing: border-box;
}
.category-cards__gallery > .similar-projects__item {
  flex: 0 0 100%;
  width: 100%;
  margin-bottom: 12px;
}
.similar-projects__item.is-hidden-more {
  display: none !important;
}

/* --- наложение на изображение --- */
.category-card .similar-projects__image-wrap {
  position: relative;
  /* Контейнер для cqw-единиц: крупное число масштабируется от ширины самой
     карточки, а не от вьюпорта — одинаково крупно и в 1, и в 2 колонки. */
  container-type: inline-size;
}
.category-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 10px; /* совпадает со скруглением img карточки макета */
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 28, 40, 0.45), rgba(20, 28, 40, 0.62));
}
/* Заглавное фото: перебиваем базовое правило img (cover/100%) внутри image-wrap. */
.category-card .similar-projects__image-wrap img.category-card__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 66%;
  max-height: 66%;
  object-fit: contain;
  border-radius: 0;
  opacity: 0.92;
  z-index: 2;
  pointer-events: none;
}
/* Фолбэк: заглавного фото нет -> крупный счётчик макетов. */
.category-card__count {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 0 12px;
  pointer-events: none;
  font-family: 'DIN Pro', 'Trebuchet MS', sans-serif;
}
.category-card__count b {
  /* Фолбэк для браузеров без container queries. */
  font-size: 96px;
  /* 46% ширины карточки: «888» (максимум 3 цифры) укладывается с запасом,
     двузначное число выглядит как в согласованном макете. */
  font-size: 46cqw;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.category-card__count span {
  font-size: 16px;
  font-size: 5.5cqw;
  opacity: 0.92;
  margin-top: 2cqw;
}

/* Сетка как у карточек макетов: 2 в ряд с 480px. */
@media (min-width: 480px) {
  .category-cards__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--grid-gutter);
    row-gap: var(--grid-gutter);
  }
  .category-cards__gallery > .similar-projects__item {
    flex: none;
    width: 100%;
  }
}