/* Подвал kuzart, версия 16.09.2026. Отдельный файл, а не style.min.css: сборка gulp в проекте не работает,
   и править собранный файл руками ради двухсот строк — лишний риск. Подключается из footer.php.
   Токены те же, что на сайте: тёмный #24221F, Manrope, тонкие белые линии, латунь #D2A044 — акцент виджета связи. */
.kzf{--kzf-dark:#24221f;--kzf-muted:rgba(255,255,255,.62);--kzf-quiet:rgba(255,255,255,.4);
  --kzf-line:rgba(255,255,255,.12);--kzf-surface:rgba(255,255,255,.05);--kzf-surface-h:rgba(255,255,255,.1);
  --kzf-brass:#d2a044;--kzf-warm:#efe9df;
  /* 16.09.2026, вечер. Ширину светлых полос по краям владелец подобрал сам ползунком на стенде
     и назвал число: 20px. Планшет и телефон — в тех же пропорциях, что были в исходнике
     (примерно две трети и сорок процентов): 13px и 8px.
     Плашка не растягивается на весь экран и не ограничивается по ширине «как блок портфолио» —
     оба варианта сегодня примеряли и отвергли. */
  position:relative;margin:20px 20px 0;padding:52px 44px 0;border-radius:20px 20px 0 0;background:var(--kzf-dark);
  overflow:hidden;color:#fff;font-family:Manrope,system-ui,Arial,sans-serif;font-size:16px;line-height:1.45;text-align:left}
.kzf *,.kzf *:before,.kzf *:after{box-sizing:border-box}
.kzf :where(p){margin:0;font:inherit;text-align:inherit}
.kzf :where(ul,li){margin:0;padding:0;list-style:none}
.kzf :where(a){color:inherit;text-decoration:none}
.kzf :where(address){font-style:normal}
.kzf__grid{display:grid;grid-template-columns:1.2fr 2.35fr .95fr;gap:38px 34px;align-items:start}

/* контакты: тихая подпись, крупное значение */
.kzf__contacts{display:grid;gap:16px}
.kzf__label{margin:0 0 5px;font-size:12.5px;font-weight:300;color:var(--kzf-quiet)}
.kzf__value{margin:0;font-size:20px;font-weight:500;line-height:1.3;transition:color .25s}
a.kzf__value:hover{color:var(--kzf-brass)}
.kzf__addr{font-size:15px;font-weight:400;line-height:1.45}

/* кнопка-пилюля: заливка расходится из точки, где курсор вошёл (как у кнопки «Закрыть» в виджете связи) */
.kzf__pill{position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:20px;height:46px;padding:0 22px;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;background:none;color:#fff;
  font:600 12px/1 Manrope,sans-serif;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;overflow:hidden;
  transition:color .3s ease-out,border-color .45s ease-out}
.kzf__pill:before{content:"";position:absolute;left:50%;top:50%;width:100%;padding-top:100%;border-radius:50%;
  background:#f4f4f4;transform:scale(0) translate(-50%,-50%);transform-origin:var(--x,50%) var(--y,50%);
  transition:transform .45s cubic-bezier(.35,.85,.4,1)}
.kzf__pill>*{position:relative;z-index:1}
.kzf__pill:hover{color:#24221f;border-color:rgba(36,34,31,.5)}
.kzf__pill:hover:before{transform:scale(1) translate(-50%,-50%)}
.kzf__pill svg{width:16px;height:16px;display:block}

/* каналы: мессенджеры и соцсети — одни площадки, поэтому делим по действию, а не по названию */
.kzf__talk{margin-top:24px;display:grid;gap:14px}
.kzf__box{display:inline-flex;flex-direction:column;gap:10px;padding:13px 15px 14px;
  border:1px solid rgba(210,160,68,.35);border-radius:18px;background:rgba(210,160,68,.06);justify-self:start}
.kzf__talk-t{margin:0;font-size:12.5px;font-weight:300;line-height:1.35;color:rgba(255,255,255,.72)}
.kzf__talk-t span{color:var(--kzf-quiet)}
.kzf__side{display:grid;gap:9px;justify-self:start}
.kzf__side .kzf__talk-t{color:var(--kzf-quiet)}
.kzf__ic{display:flex;flex-wrap:wrap;gap:8px}
.kzf__ic a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--kzf-surface);border:1px solid var(--kzf-line);color:var(--kzf-muted);
  transition:color .25s,background-color .25s,border-color .25s}
.kzf__ic a:hover{color:#fff;background:var(--kzf-surface-h);border-color:rgba(255,255,255,.22)}
.kzf__ic a[data-b]:hover{color:rgb(var(--b));border-color:rgba(var(--b),.55);background:rgba(var(--b),.14)}
.kzf__ic svg{width:19px;height:19px;display:block}
/* Значки мессенджеров приходят из формы заказа звонка (класс kz-chan__ico, там они 25×25) —
   подгоняем под размер кружков подвала, чтобы ряд не прыгал по величине. */
.kzf__ic .kz-chan__ico{width:19px;height:19px}
.kzf__ic--soc .kz-chan__ico{width:17px;height:17px}
.kzf__ic--soc a{width:36px;height:36px;background:none}
/* Значок без адреса: тот же кружок, но приглушённый и без наведения — видно, что площадка есть,
   но ссылки пока нет. Заполнили адрес в контактах — значок сам оживает. */
.kzf__ic-off{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--kzf-line);color:var(--kzf-quiet);opacity:.4;cursor:default}
.kzf__ic--soc .kzf__ic-off{width:36px;height:36px;border:0}
.kzf__ic-off svg,.kzf__ic-off .kz-chan__ico{width:19px;height:19px;display:block}
.kzf__ic--soc .kzf__ic-off svg,.kzf__ic--soc .kzf__ic-off .kz-chan__ico{width:17px;height:17px}
.kzf__ic--soc svg{width:17px;height:17px}
.kzf a[data-b=whatsapp]{--b:37,211,102}
.kzf a[data-b=telegram]{--b:42,171,238}
.kzf a[data-b=max]{--b:155,134,255}
.kzf a[data-b=vk]{--b:61,139,255}
.kzf a[data-b=youtube]{--b:255,78,78}
.kzf a[data-b=dzen]{--b:255,255,255}
.kzf a[data-b=pinterest]{--b:230,60,70}
.kzf a[data-b=instagram]{--b:225,48,108}
.kzf a[data-b=yauslugi]{--b:255,204,0}

/* колонки ссылок: своя подсетка, число колонок можно менять, не трогая внешнюю раскладку */
.kzf__nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:28px 24px}
.kzf__col h4{margin:0 0 14px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--kzf-quiet)}
.kzf__list{display:grid;gap:9px}
.kzf__list a{position:relative;font-size:14.5px;font-weight:400;transition:color .25s}
.kzf__list a:after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.3,1,.4,1)}
.kzf__list a:hover:after{transform:scaleX(1)}
/* Пункт, под который страницы ещё нет. Владелец просил показывать весь список целиком —
   так видно полноту разделов, — но глушить: это не ссылка, кликать нечего.
   Прозрачность 42% на тёмном фоне читается как «есть, но позже»; курсор обычный,
   подчёркивания при наведении нет. Как только в настройках подвала появится адрес,
   пункт сам станет обычной ссылкой. */
.kzf__list span{font-size:14.5px;font-weight:400;color:var(--kzf-text);opacity:.42;cursor:default}

/* карта: на компьютере вертикальная колонка, ниже — широкая полоса; сама картинка лежит у нас, чужих скриптов нет */
.kzf__map{position:relative;display:block;width:100%;aspect-ratio:460/690;border-radius:18px;overflow:hidden;
  border:1px solid var(--kzf-line)}
.kzf__map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.3,1),filter .4s}
.kzf__map:hover img{transform:scale(1.04);filter:brightness(1.07)}
/* Метка студии: точка с расходящимся кольцом. СЕЙЧАС НЕ ИСПОЛЬЗУЕТСЯ — владелец выбрал булавку,
   нарисованную на самой картинке карты (16.09.2026, вечер). Правила оставлены рабочими: чтобы
   вернуть живую точку, достаточно вернуть <span class="kzf__map-dot"> в footer-new.php и взять
   картинку карты без метки. Проценты подобраны по прежнему кадру карты. */
.kzf__map-dot{position:absolute;left:29%;top:44%;z-index:1;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:var(--kzf-brass);box-shadow:0 0 0 2px rgba(26,24,22,.55)}
.kzf__map-dot:before,.kzf__map-dot:after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;
  margin:-5.5px 0 0 -5.5px;border-radius:50%;border:1.5px solid var(--kzf-brass);
  animation:kzfPulse 2.6s cubic-bezier(.2,.7,.3,1) infinite}
.kzf__map-dot:after{animation-delay:1.3s}
@keyframes kzfPulse{
  0%{transform:scale(1);opacity:.75}
  70%{transform:scale(4.2);opacity:0}
  100%{transform:scale(4.2);opacity:0}
}
/* Тем, кому анимация мешает (системная настройка), оставляем просто точку. */
@media (prefers-reduced-motion:reduce){
  .kzf__map-dot:before,.kzf__map-dot:after{animation:none;opacity:0}
}
/* 16.09.2026, просьба владельца: кнопку «Маршрут» — наверх по центру карты, адрес — по центру внизу.
   Было: адрес слева, кнопка в правом нижнем углу, оба в одной затемнённой полосе.
   Кнопку выносим из полосы и вешаем на саму карту (absolute сверху): в нижней полосе она
   соперничала с адресом, а сверху висит над пустым куском карты и читается как действие. */
.kzf__map-in{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 15px;
  background:linear-gradient(180deg,rgba(26,24,22,0),rgba(26,24,22,.94));display:grid;gap:11px;
  justify-items:center;text-align:center}
.kzf__map-addr{font-size:14.5px;font-weight:500;line-height:1.35}
.kzf__map-addr small{display:block;margin-top:3px;font-size:12.5px;font-weight:300;color:var(--kzf-muted)}
.kzf__map-go{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:2;
  background:rgba(26,24,22,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;transition:background-color .25s,color .25s,border-color .25s}
.kzf__map:hover .kzf__map-go{background:var(--kzf-brass);border-color:var(--kzf-brass);color:#221f1a}
.kzf__map-go svg{width:14px;height:14px}

/* полоса «работаем по договору» — вместо сквозного текста: он ничего не даёт поиску, а это место работает на дело */
/* 16.09.2026: на широких мониторах текст и кнопка разъезжались к разным краям полосы — кнопка была
   прижата вправо через margin-left:auto. Теперь они стоят парой по центру: сама полоса по-прежнему
   во всю ширину подвала, а содержимое внутри держится вместе и читается как одна мысль. */
.kzf__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 34px;
  margin-top:34px;padding:18px 20px;
  border:1px solid var(--kzf-line);border-radius:20px;background:var(--kzf-surface)}
.kzf__cta-t{margin:0;font-size:14.5px;font-weight:500;line-height:1.4}
.kzf__cta-t small{display:block;margin-top:3px;font-size:12.5px;font-weight:300;color:var(--kzf-muted)}
.kzf__cta .kzf__pill{margin-top:0;flex:0 0 auto}

/* знак: логотип в разрыве линии, под ним рассказ о студии в две строки */
/* Линии по бокам знака идут во всю ширину плашки. 16.09 пробовали короткие (чуть шире текста
   под логотипом) — владелец посмотрел и попросил вернуть как было. */
.kzf__mark{display:flex;align-items:center;gap:26px;margin-top:38px;user-select:none}
.kzf__mark:before,.kzf__mark:after{content:"";flex:1 1 auto;height:1px;background:var(--kzf-line)}
.kzf__mark img{display:block;width:210px;height:auto;opacity:.5}
.kzf__about{max-width:82ch;margin:9px auto 0;text-align:center;font-size:15px;font-weight:300;line-height:1.6;color:var(--kzf-muted)}
.kzf__about b{font-weight:500;color:var(--kzf-warm)}
.kzf__about i{font-style:normal;color:var(--kzf-brass)}

/* строка жилых комплексов: тихая, медленная, под курсором замирает */
.kzf__zhk{margin-top:14px;padding:12px 0 6px;border-top:1px solid var(--kzf-line)}
.kzf__zhk-t{margin:0 0 9px;font-size:12.5px;font-weight:300;color:var(--kzf-quiet);text-align:center}
.kzf__ticker{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.kzf__ticker-line{display:flex;gap:10px;width:max-content;animation:kzf-ticker 95s linear infinite}
.kzf__ticker:hover .kzf__ticker-line{animation-play-state:paused}
.kzf__ticker .kzf__grp{display:flex;gap:10px}
.kzf__ticker a,.kzf__ticker span{flex:0 0 auto;padding:6px 14px;border:1px solid var(--kzf-line);border-radius:999px;font-size:13px;
  font-weight:400;line-height:1.3;white-space:nowrap;color:var(--kzf-muted);
  transition:color .25s,border-color .25s,background-color .25s}
.kzf__ticker a:hover,.kzf__ticker span:hover{color:#fff;border-color:rgba(255,255,255,.3);background:var(--kzf-surface)}
@keyframes kzf-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* реквизиты и юридические ссылки: две тихие строки по центру */
.kzf__meta{padding:14px 0 26px;text-align:center;font-size:12.5px;color:var(--kzf-quiet)}
.kzf__meta-legal{font-weight:300}
.kzf__meta-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-top:8px}
.kzf__meta a{transition:color .25s}
.kzf__meta a:hover{color:#fff}

@media (max-width:1180px){
  /* 16.09.2026, DESIGN. Здесь была единственная ширина, на которой обводка не сходилась:
     боковое поле 13px, а верхний зазор и скругление оставались «компьютерными» (20px) —
     их этот блок не переопределял. На экране это читалось как толстая линия сверху,
     тонкая по бокам и поджатый угол. Ставим все три величины одинаковыми: 18px —
     ступень между телефонными 16 и компьютерными 20. Дугу переопределяем ниже. */
  .kzf{margin:18px 18px 0;padding:44px 28px 0;border-radius:18px 18px 0 0}
  .kzf__grid{grid-template-columns:1fr 1.5fr;gap:34px 26px}
  .kzf__map{grid-column:1/-1;aspect-ratio:760/380}
  .kzf__map-dot{left:26%;top:52%}
  .kzf__map-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:38px 16px 14px}
}
@media (max-width:720px){
  .kzf{margin:16px 16px 0;padding:32px 18px 0;border-radius:16px 16px 0 0}
  .kzf__grid{grid-template-columns:1fr;gap:26px}
  .kzf__value{font-size:19px}
  .kzf__pill{width:100%;justify-content:center;height:50px}
  .kzf__box,.kzf__side{justify-self:stretch}
  .kzf__nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .kzf__list{gap:8px}
  .kzf__list a{font-size:14px}
  .kzf__map{aspect-ratio:760/380}
  .kzf__map-in{padding:36px 14px 13px}
  .kzf__cta{gap:12px;padding:16px}
  .kzf__cta .kzf__pill{margin-left:0;width:100%;justify-content:center}
  .kzf__mark{gap:16px;margin-top:28px}
  .kzf__mark img{width:150px}
  .kzf__about{margin-top:12px;font-size:14px;text-align:left}
  .kzf__meta{padding-bottom:20px;font-size:12px}
  .kzf__meta-links{gap:6px 16px}
}
/* меньше движения: строка не едет, ничего не масштабируется */
@media (prefers-reduced-motion:reduce){
  .kzf *{transition:none!important}
  .kzf__ticker{mask-image:none;-webkit-mask-image:none}
  .kzf__ticker-line{animation:none;flex-wrap:wrap;width:auto;gap:8px}
  .kzf__ticker .kzf__dup{display:none}
  .kzf__map:hover img{transform:none}
}

/* ═══ ПЕРЕХОД ОТ ПОСЛЕДНЕЙ ТЁМНОЙ СЕКЦИИ К ПОДВАЛУ ══════════════════════════════════
   Утверждено владельцем 16.09.2026. Это ТОЧНАЯ копия примерки, которую он одобрил
   (бывший ?perehod=8), без переделок: тёмная секция выпускает по краям два языка вниз,
   их внутренний край сходит на нет вогнутой дугой, светлая полоса заворачивает вниз.

   ДВЕ ВЕЩИ, БЕЗ КОТОРЫХ НЕ РАБОТАЕТ (обе стоили мне часа):
   1) `overflow:visible` — у секции в теме стоит `overflow:hidden`, и слой, выходящий за её
      нижний край, обрезался: на экране не появлялось ничего;
   2) цвет ЯВНО (#24221F), а не `var(--kzf-dark)` — переменная объявлена внутри `.kzf`,
      то есть внутри подвала, и на секции над ним не существует.

   ГЕОМЕТРИЯ (замеры DESIGN на бою, 16.09 вечером). Чтобы светлая обводка шла ОДНОЙ толщиной
   по всему периметру, должны совпасть две вещи:
     • верхний зазор = боковому полю подвала (20px на компьютере, 16px на телефоне);
     • радиус дуги = боковое поле + скругление подвала (20+20=40 и 16+16=32) — тогда центр дуги
       совпадает с центром скругления подвала и полоса не поджимается на повороте.
   До этой правки было 26 сверху против 20 по бокам и радиус 44: в углу полоса сужалась
   примерно до 18px, и обвод читался косым.
   ПРАВИЛО НА ВСЕ ШИРИНЫ (DESIGN, замеры 16.09 на 360…2560). Три величины всегда равны между
   собой, четвёртая считается: боковое поле = верхний зазор = скругление подвала = X,
   радиус дуги = 2X, высота слоя = 2X. Ступени: 16 (≤720), 18 (721–1180), 20 (≥1181).
   Меняешь одну — пересчитай остальные, иначе на повороте полоса поджимается.
   На 1920 и 2560 поле оставлено 20: обводка там читается тонкой линией, но ровной и
   осмысленной; отдельная ступень для широких мониторов не нужна — проверено глазом.
   16.09, финальная просьба владельца: скругление подвала тоже приравнено к полю и зазору —
   все три величины теперь одна и та же (20px на компьютере, 16px на телефоне), поэтому белая
   рамка читается ровной обводкой, а не рамкой с углами другого радиуса. */
main > section.dark-section:last-of-type{position:relative;overflow:visible}
main > section.dark-section:last-of-type::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:40px;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle 40px at 40px 40px, transparent 39.5px, #24221F 40px) left top/40px 40px no-repeat,
    radial-gradient(circle 40px at 0 40px,   transparent 39.5px, #24221F 40px) right top/40px 40px no-repeat;
}
/* Лёгкая тень подвала по периметру (просьба владельца). */
.kzf{box-shadow:0 0 42px rgba(26,24,22,.16)}

/* Планшет и узкий ноутбук (721–1180): поле = зазор = скругление = 18, значит дуга 36. */
@media (max-width:1180px){
  main > section.dark-section:last-of-type::after{
    height:36px;
    background:
      radial-gradient(circle 36px at 36px 36px, transparent 35.5px, #24221F 36px) left top/36px 36px no-repeat,
      radial-gradient(circle 36px at 0 36px,   transparent 35.5px, #24221F 36px) right top/36px 36px no-repeat;
  }
}
@media (max-width:720px){
  main > section.dark-section:last-of-type::after{
    height:32px;
    background:
      radial-gradient(circle 32px at 32px 32px, transparent 31.5px, #24221F 32px) left top/32px 32px no-repeat,
      radial-gradient(circle 32px at 0 32px,   transparent 31.5px, #24221F 32px) right top/32px 32px no-repeat;
  }
  .kzf{box-shadow:0 0 26px rgba(26,24,22,.14)}
}