/* ==== Добавлено при переносе на статику: замена Radix Dialog/Tabs и lucide-react ==== */
.icon{width:24px;height:24px;flex:none}
.modal-root{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-root[hidden]{display:none}
.modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.modal-panel{position:relative;z-index:1;background:var(--paper);color:var(--ink);width:100%;max-width:32rem;border-radius:18px;padding:24px;box-shadow:0 25px 60px rgba(0,0,0,.35);max-height:calc(100vh - 32px);overflow-y:auto}
.modal-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border:0;border-radius:999px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted)}
.modal-close:hover{background:#eee5dc;color:var(--ink)}
.modal-close svg{width:16px;height:16px}
.legal-panel{max-height:85vh;max-width:48rem;overflow-y:auto;background:#f7f2eb;color:#211b18}
[data-slot="dialog-header"]{margin:0 34px 10px 0}
[data-slot="dialog-title"]{font:400 22px/1.2 Georgia,serif;margin:0}
.legal-panel .legalcopy{margin-top:12px}
.portfolio-tab{border:0;background:none;cursor:pointer;font-family:inherit}
@media(max-width:600px){.modal-panel{padding:20px 16px}}
/* .fullscreen-photo{display:flex} и .projects-list{display:grid} в исходном CSS перекрывают display:none от [hidden] — фиксируем явно */
.fullscreen-photo[hidden]{display:none}
.projects-list[hidden]{display:none}

/* ==== Логотип-картинка (заменяет текстовый .brand) и слоган в шапке — везде справа от логотипа ==== */
.brand{min-width:0;flex:none}
.logo-img{height:46px;width:auto;display:block}
footer .logo-img{height:52px}
.header-slogan{
  font:italic 400 13px/1.3 Georgia,serif;color:var(--wine);margin:0;
  max-width:240px;min-width:0;white-space:normal;overflow:visible;text-overflow:clip
}
@media(max-width:1150px){
  .header-slogan{max-width:205px;font-size:12px}
}
@media(max-width:900px){
  header{gap:12px;height:auto;min-height:70px;padding:11px 16px}
  .open{top:100%!important}
  .logo-img{height:40px!important}
  footer .logo-img{height:46px!important}
  .header-slogan{
    max-width:205px;font-size:12.5px;font-weight:600;line-height:1.32;
    white-space:normal;overflow:visible;text-overflow:clip
  }
  .slogan-break{display:none}
  .menub,.phone{color:var(--wine)}
}
@media(max-width:600px){
  header{padding:10px 14px;min-height:62px}
  .header-slogan{max-width:180px;font-size:11.5px;font-weight:600}
}

/* ==== Заголовок hero в мобильной версии — в две строки ==== */
.kicker-break{display:inline}
@media(max-width:900px){
  .hero-kicker .kicker-break{display:block}
}

/* ==== Синий -> красный: акцент чекбокса и подсветка нажатия на тач-устройствах ==== */
a,button,input,textarea,select,label{-webkit-tap-highlight-color:rgba(143,20,32,.28)}
:focus-visible{outline-color:var(--wine)}
input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;min-width:20px;flex:none;margin:2px 0 0;
  border:1.5px solid var(--wine);border-radius:6px;background:#fff;
  accent-color:var(--wine);cursor:pointer;position:relative
}
input[type="checkbox"]:checked{background:var(--wine)}
input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg)
}
input[type="checkbox"]:focus-visible{outline:2px solid var(--wine);outline-offset:2px}

/* ==== Ссылки на политику конфиденциальности/согласие внутри чекбоксов форм ==== */
.check span a,
.quiz-form label span a{
  color:var(--wine);text-decoration:underline;text-underline-offset:2px
}
.check span a:hover,
.quiz-form label span a:hover{color:var(--ink)}
.quiz-form label.check{
  display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--muted);
  text-transform:none;letter-spacing:0
}

/* ==== Карточки каталога (Кухни/Шкафы/...) кликабельны целиком — открывают квиз ==== */
.grid article{cursor:pointer}
.grid article:focus-visible{outline:2px solid #fff;outline-offset:-4px}

/* ==== Скругление углов у прямоугольных блоков без радиуса ==== */
.grid article{border-radius:24px}
.benefits{border-radius:24px;overflow:hidden}
.reasons{border-radius:26px;overflow:hidden}
.project-thumbs button{border-radius:11px}
@media(max-width:600px){
  .grid article{border-radius:18px}
  .reasons{border-radius:20px}
}

/* ==== Увеличение мелкого шрифта ==== */
.foot small,.project-meta>span{font-size:11px}
.bottom,.legal,.photo-grid button span,.project-meta p,.slide-count{font-size:12px}
.kicker,.benefits b,.benefits small,.facts>div>span,.reasoncopy>a,.request label,.quiz-top>span,.quiz-form label,.quiz-link{font-size:12.5px}
nav,.btn,.years,.grid p,.note,.steps p,.placeholder span,.foot span{font-size:13px}
.legalcopy{font-size:14px}
@media(max-width:600px){.portfolio-tabs button{font-size:12px!important}}
/* .count-num всегда наследует размер/цвет/начертание от своего родителя (b), а не от общих правил для span вроде .facts span */
b span.count-num{font-size:inherit;font-weight:inherit;color:inherit;line-height:inherit}

/* ==== Блок преимуществ («Бесплатный замер», «Свой салон» и т.д.) крупнее в мобильной версии ==== */
@media(max-width:900px){
  .benefits .icon{width:29px;height:29px}
  .benefits>div{padding:16px 15px;gap:15px}
  .benefits b{font-size:15px}
  .benefits small{font-size:13px;margin-top:3px}
}
@media(max-width:600px){
  .benefits>div{padding:15px}
  .benefits b{font-size:16px}
  .benefits small{font-size:13.5px}
}

/* ==== «15 лет создаём мебель...» — жирнее и больше отступ до блока преимуществ ==== */
.years{font-weight:600;margin-top:38px}
.years b{font-weight:700}
@media(max-width:900px){
  .hero{padding-bottom:215px}
}
@media(max-width:600px){
  .hero{padding-bottom:325px}
}

/* ==== Цифры «15 лет на рынке / 5 городов / 100% индивидуально» — крупнее и жирнее ==== */
.facts b{font-weight:700}
@media(max-width:900px){
  .facts b{font-size:44px}
}
@media(max-width:600px){
  .facts b{font-size:48px}
  .facts{gap:8px}
}

/* ==== Квиз: стрелочки и название варианта — чёрным, а не бордовым ==== */
.options button,
.options button:hover,
.options button.selected{color:var(--ink)}

/* ==== Отправка заявок (форма замера + квиз): статус отправки и ошибка ==== */
.form-status{margin-top:14px;font-size:12.5px;line-height:1.5}
.form-status.error{color:var(--wine)}
form.is-sending .btn{opacity:.6;pointer-events:none}

/* ==== Появление элементов при скролле ==== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1)}
.reveal.in-view{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}