/* Хром сайта: шапка и футер — перенос 1:1 из Zubritsky Hero Desktop.dc.html.
   Секции страниц добавляются в Блоке 3. */

/* ---------- Шапка ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 78px; padding: 0 40px;
  background: rgba(242, 237, 228, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(23, 19, 15, .14);
  animation: headerFadeIn .9s ease both;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.site-header.hide { transform: translateY(-100%); }
.site-nav { display: flex; gap: 30px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; }
.site-nav a { color: var(--ink); padding: 6px 0; text-decoration: none;
  border-bottom: 1px solid transparent; }
.site-nav a:hover { color: var(--terra); border-bottom: 1px solid var(--terra); }
.site-logo { text-align: center; font-family: var(--font-head); font-weight: 800;
  font-size: 20px; letter-spacing: .2em; padding: 0 40px; white-space: nowrap;
  color: var(--ink); text-decoration: none; }
.site-phone { justify-self: end; display: flex; align-items: center; gap: 12px;
  color: var(--ink); font-weight: 700; font-size: 14px; white-space: nowrap;
  text-decoration: none; }
.site-phone:hover { color: var(--terra); }
.phone-ic { width: 42px; height: 42px; border-radius: 50%; background: var(--ink);
  color: var(--bg); display: flex; align-items: center; justify-content: center; }

/* Отступ контента под фиксированную шапку */
/* Шапка sticky сама занимает место в потоке — доп. отступ не нужен */

/* ---------- Мобильная шапка (720px, правила из макета 1:1) ---------- */
@media (max-width: 720px) {
  .site-header { grid-template-columns: 44px 1fr 44px; height: auto; padding: 8px 12px 0; }
  .site-logo { grid-column: 2; grid-row: 1; padding: 10px 4px; font-size: 15px; }
  .site-phone { grid-column: 3; grid-row: 1; }
  .phone-num { display: none; }           /* .m-hide из макета */
  .site-nav { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; gap: 18px;
    padding: 6px 4px 10px; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; font-size: 11.5px; }
}

/* ============ ГЛАВНАЯ (перенос стилей макета 1:1) ============ */

/* --- HERO --- */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 138px 40px 90px;
  text-align: center; overflow: hidden; }
/* На главной шапка висит ПОВЕРХ героя (в макете — position: fixed), чтобы
   вертикальные «швы» шли от самого верха экрана, а не начинались из-под
   шапки. На остальных страницах шапка остаётся в потоке (sticky). */
.page-home .site-header { position: fixed; left: 0; right: 0; }
/* «Швы» плитки. Сетка привязана к контентной колонке, а не к краю экрана:
   шаг 260px = 1040 / 4, где 1040 — ширина .hero-inner. Полотно центрируется,
   поэтому линии всегда попадают на края контента и на его центр при ЛЮБОЙ
   ширине экрана. Горизонтальный разделитель над галочками (тоже 1040)
   упирается концами ровно в вертикальные линии — сетка читается как единая.
   У дизайнера сетка была от края экрана (6 равных долей): при его 1440 это
   выглядело верно, но на широких мониторах доли растягивались и края кнопок
   попадали на линии (на 1900 — 5px). */
.hero-grout { position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(6, 520px); justify-content: center;
  pointer-events: none; }
.hero-grout div { position: relative; border-right: 1px solid rgba(23,19,15,.07);
  transform-origin: top; animation: drawY 2.2s cubic-bezier(.22,1,.36,1) both; }
/* Промежуточный шов посередине каждой ячейки — даёт шаг 260px */
.hero-grout div::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  border-left: 1px solid rgba(23,19,15,.07); }
.hero-inner { position: relative; display: flex; flex-direction: column;
  align-items: center; width: 100%; max-width: 1040px; }
.hero-kicker { display: flex; align-items: center; gap: 22px; font-size: 12px;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  animation: fadeUp 1.1s .2s cubic-bezier(.22,1,.36,1) both; }
.hk-city { display: flex; align-items: center; gap: 8px; }
.hk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--terra);
  animation: pulseDot 2.4s ease infinite; }
.hk-line { width: 26px; height: 1px; background: rgba(23,19,15,.3); }
.hk-name { color: rgba(23,19,15,.55); }
.hero-h1 { margin: 30px 0 0; font-weight: 900; line-height: .92;
  letter-spacing: -.025em; font-size: clamp(58px, 7.6vw, 118px); }
.hero-h1 .rise { display: block; overflow: hidden; padding-bottom: .05em; }
.hero-h1 .rise > span { display: block; animation: riseIn 1.5s cubic-bezier(.22,1,.36,1) both; }
.terra { color: var(--terra); }
.acc { color: var(--accent); }
.hero-sub { margin: 30px 0 0; font-size: 18px; line-height: 1.6; max-width: 640px;
  color: rgba(23,19,15,.75); animation: fadeUp 1.2s 1s cubic-bezier(.22,1,.36,1) both; }
.hero-cta { display: flex; gap: 14px; margin-top: 38px;
  animation: fadeUp 1.2s 1.25s cubic-bezier(.22,1,.36,1) both; }
.cta-main { display: flex; align-items: center; gap: 18px; background: var(--terra);
  color: var(--bg); font-family: var(--font-head); font-weight: 600; font-size: 13.5px;
  padding: 21px 32px; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; transition: background .3s ease; }
.cta-main:hover { background: #9c3c1a; }
.cta-main:active { transform: scale(.98); }
.cta-main .arr, .cc-btn .arr, .rev-btn .arr, .lead-form button .arr {
  font-family: var(--font-text); font-size: 20px; line-height: 1; }
.cta-ghost { display: flex; align-items: center; background: none; color: var(--ink);
  border: 1px solid var(--ink); font-family: var(--font-head); font-weight: 600;
  font-size: 13.5px; padding: 20px 32px; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; transition: all .3s ease; }
.cta-ghost:hover { background: var(--ink); color: var(--bg); }
.hero-checks { display: flex; justify-content: center; gap: 34px; margin-top: 40px;
  padding-top: 26px; width: 100%;
  /* Горизонтальный разделитель убран по решению заказчика: он спорил с
     вертикальными швами. Ширину оставляем контентной. */
  max-width: 1040px; animation: fadeUp 1.2s 1.5s cubic-bezier(.22,1,.36,1) both; }
.check { display: flex; align-items: center; gap: 10px; font-size: 13.5px;
  font-weight: 600; color: rgba(23,19,15,.82); }
.hero-scroll { position: absolute; bottom: 26px; left: 50%; margin-left: -1px;
  width: 2px; height: 44px; pointer-events: none; }
.hero-scroll i { position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: rgba(23,19,15,.18); }
.hero-scroll b { position: absolute; left: -2px; top: 0; width: 5px; height: 5px;
  background: var(--terra); animation: scrollDot 2.2s ease-in-out infinite; }

/* --- ТИКЕР --- */
.ticker { background: var(--ink); color: var(--paper-75); overflow: hidden;
  padding: 15px 0; border-bottom: 1px solid var(--paper-15); }
/* 6 копий, сдвиг на -50% (= 3 копии) → длительность втрое больше 30s,
   чтобы визуальная скорость осталась прежней (≈ одна копия за 30с). */
.ticker-track { display: flex; width: max-content;
  animation: marquee 90s linear infinite; font-family: var(--font-head);
  font-weight: 600; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.ticker-track span { white-space: nowrap; }

/* --- СЕКЦИИ ОБЩЕЕ --- */
.sec { padding: 90px 40px; }
/* Линия-разделитель между хиро и первым блоком (перенос из макета) */
#advantages { border-top: 1px solid rgba(23,19,15,.14); }
.sec-dark { background: var(--ink); color: var(--bg); }
.wrap { max-width: 1200px; margin: 0 auto; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.sec-head-dark { padding-bottom: 26px; border-bottom: 1px solid rgba(242,237,228,.2); }
.sec-h2 { margin: 0; font-weight: 800; text-transform: uppercase;
  font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.01em; }
.sec-count { font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(23,19,15,.5); white-space: nowrap; }
.sec-count-dark { color: rgba(242,237,228,.5); }

/* --- СЕТКА 4 КАРТОЧЕК (преимущества/этапы/гарантии) --- */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px;
  background: rgba(23,19,15,.18); border: 1px solid rgba(23,19,15,.18); margin-top: 40px; }
.cell { background: var(--bg); padding: 26px 26px 30px; display: flex;
  flex-direction: column; transition: background .5s ease; }
.cell:hover { background: var(--bg-2); }
.cell-n { font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--terra); }
.cell-t { font-family: var(--font-head); font-weight: 700; font-size: 15px;
  text-transform: uppercase; line-height: 1.3; min-height: 2.6em;
  display: flex; align-items: flex-end; margin-top: 26px; }
.cell-d { font-size: 13.5px; line-height: 1.55; color: rgba(23,19,15,.65); margin-top: 8px; }
.step-n { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: rgba(23,19,15,.22); }
.step-t { font-family: var(--font-head); font-weight: 700; font-size: 14.5px;
  text-transform: uppercase; line-height: 1.25; margin-top: 18px; }
.step-d { font-size: 13.5px; line-height: 1.5; color: rgba(23,19,15,.65); margin-top: 7px; }

/* --- УСЛУГИ --- */
.srv-row { display: grid; grid-template-columns: 64px 1fr 44px; align-items: center;
  gap: 20px; padding: 30px 8px; border-bottom: 1px solid rgba(242,237,228,.14);
  color: var(--bg); text-decoration: none;
  transition: background .6s cubic-bezier(.22,1,.36,1), padding .6s cubic-bezier(.22,1,.36,1); }
.srv-row:hover { background: var(--terra); padding-left: 28px; padding-right: 28px; }
.srv-n { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: rgba(242,237,228,.45); }
.srv-t { font-family: var(--font-head); font-weight: 600;
  font-size: clamp(20px, 2.5vw, 34px); text-transform: uppercase; letter-spacing: -.01em; }
.srv-arr { font-size: 22px; text-align: right; }

/* --- КАЛЬКУЛЯТОР CTA --- */
.calc-cta-sec { padding: 0 40px 90px; }
.calc-cta { max-width: 1200px; margin: 0 auto; background: var(--terra); color: var(--bg);
  padding: 60px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
.cc-txt { display: flex; flex-direction: column; gap: 12px; }
.cc-h { font-family: var(--font-head); font-weight: 800; text-transform: uppercase;
  font-size: clamp(24px, 2.8vw, 38px); letter-spacing: -.01em; line-height: 1.1; }
.cc-d { font-size: 16px; line-height: 1.55; color: rgba(242,237,228,.85); max-width: 560px; }
.cc-btn { flex: none; display: flex; align-items: center; gap: 16px; background: var(--bg);
  color: var(--ink); font-family: var(--font-head); font-weight: 600; font-size: 13.5px;
  padding: 22px 34px; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; transition: all .3s ease; }
.cc-btn:hover { background: var(--ink); color: var(--bg); }

/* --- ОТЗЫВЫ --- */
.reviews-sec { padding: 0 0 90px; overflow: hidden; }
.rev-head { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: flex;
  align-items: baseline; justify-content: space-between; gap: 24px; }
.rev-nav { display: flex; gap: 10px; }
.rev-nav button { width: 48px; height: 48px; border: 1px solid var(--ink);
  background: none; cursor: pointer; font-size: 18px; color: var(--ink); transition: all .4s ease; }
.rev-nav button:hover { background: var(--ink); color: var(--bg); }
.rev-outer { position: relative; margin-top: 40px; overflow: hidden; }
/* Лента движется через transform, а не scrollLeft: прокрутка браузера
   даёт дрожание (округление до пикселя + обратная связь через событие
   scroll). Трансформ идёт субпиксельно и плавно. */
.rev-rail { display: flex; gap: 24px; width: max-content;
  /* НИКАКИХ отступов по краям: любой отступ — это пустая полоса, в которую
     лента упирается при прокрутке, то есть «начало». У бесконечной ленты
     начала быть не должно; края закрывают градиенты .rev-fade-l/.rev-fade-r. */
  padding: 4px 0;
  will-change: transform; cursor: grab; user-select: none; }
.rev-rail:active { cursor: grabbing; }
.rev-card img, .rev-card blockquote { pointer-events: none; }
.rev-card { margin: 0; flex: none; width: 380px; background: var(--white);
  border: 1px solid rgba(23,19,15,.14); padding: 32px 30px; display: flex;
  flex-direction: column; gap: 20px; }
.rev-q { font-family: var(--font-head); font-size: 26px; color: var(--terra); line-height: 1; }
.rev-card blockquote { margin: 0; font-size: 15px; line-height: 1.65;
  color: rgba(23,19,15,.8); flex: 1; }
.rev-card figcaption { display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px; border-top: 1px solid rgba(23,19,15,.12); }
.rev-name { font-weight: 700; font-size: 14px; }
.rev-area { font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(23,19,15,.5); }
.rev-fade-l, .rev-fade-r { position: absolute; top: 0; bottom: 0; width: 90px; pointer-events: none; }
.rev-fade-l { left: 0; background: linear-gradient(90deg, var(--bg), rgba(242,237,228,0)); }
.rev-fade-r { right: 0; background: linear-gradient(270deg, var(--bg), rgba(242,237,228,0)); }
.rev-cta { max-width: 1200px; margin: 34px auto 0; padding: 0 40px; }
.rev-btn { display: flex; align-items: center; gap: 14px; width: fit-content;
  color: var(--ink); border: 1px solid var(--ink); font-family: var(--font-head);
  font-weight: 600; font-size: 12.5px; padding: 17px 26px; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; transition: all .3s ease; }
.rev-btn:hover { background: var(--ink); color: var(--bg); }

/* --- О МАСТЕРЕ --- */
.about-sec { padding: 100px 40px; }
.about-grid { max-width: 1040px; margin: 0 auto; display: grid;
  grid-template-columns: auto 1fr; gap: 60px; align-items: start; }
.about-side { font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(242,237,228,.5);
  writing-mode: vertical-rl; transform: rotate(180deg); }
.about-body { display: flex; flex-direction: column; gap: 26px; }
.about-quote { margin: 0; font-family: var(--font-head); font-weight: 600;
  font-size: clamp(20px, 2.3vw, 30px); line-height: 1.35; letter-spacing: -.01em; text-wrap: balance; }
.about-text { margin: 0; font-size: 16px; line-height: 1.65;
  color: rgba(242,237,228,.7); max-width: 640px; }
.about-more { display: flex; align-items: center; gap: 12px; color: var(--accent);
  font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  width: fit-content; text-decoration: none; transition: color .3s ease; }
.about-more:hover { color: var(--bg); }
.about-more span { font-size: 18px; }

/* --- КОНТАКТЫ --- */
#contacts { padding: 100px 40px 90px; }
.contacts-grid { max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: 1fr 1fr; gap: 80px; }
.ct-left { display: flex; flex-direction: column; gap: 30px; }
.ct-h { line-height: 1.05; }
.ct-d { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(242,237,228,.7); max-width: 440px; }
.ct-phone { font-family: var(--font-head); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px); color: var(--bg); width: fit-content;
  text-decoration: none; transition: color .3s ease; }
.ct-phone:hover { color: var(--accent); }
.ct-meta { display: flex; flex-direction: column; gap: 8px; font-size: 14px;
  color: rgba(242,237,228,.6); }
.lead-form { display: flex; flex-direction: column; gap: 16px; }
.lead-form label { display: flex; flex-direction: column; gap: 8px; font-size: 12px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(242,237,228,.6); }
.lead-form input, .lead-form textarea { background: none;
  border: 1px solid rgba(242,237,228,.3); color: var(--bg); padding: 17px 18px;
  font-size: 15px; outline: none; font-family: var(--font-text); resize: vertical; }
.lead-form input:focus, .lead-form textarea:focus { border-color: var(--accent); }
.lead-form button { margin-top: 8px; display: flex; align-items: center;
  justify-content: center; gap: 16px; background: var(--terra); color: var(--bg);
  border: none; cursor: pointer; font-family: var(--font-head); font-weight: 600;
  font-size: 13.5px; padding: 21px 32px; letter-spacing: .04em;
  text-transform: uppercase; transition: background .3s ease; }
.lead-form button:hover { background: #9c3c1a; }
.lead-form button:active { transform: scale(.98); }
.form-done { border: 1px solid rgba(242,237,228,.25); padding: 60px 46px;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 18px; }
.fd-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center; }
.fd-h { font-family: var(--font-head); font-weight: 700; font-size: 22px; text-transform: uppercase; }
.fd-d { font-size: 15px; line-height: 1.6; color: rgba(242,237,228,.7); }

/* --- КНОПКА НАВЕРХ --- */
.top-btn { position: fixed; right: 30px; bottom: 30px; z-index: 49; width: 52px;
  height: 52px; border-radius: 50%; border: none; cursor: pointer; background: var(--ink);
  color: var(--bg); font-size: 19px; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 8px 24px rgba(23,19,15,.25);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1),
              background .4s ease, bottom .5s cubic-bezier(.22,1,.36,1);
  }
.top-btn.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.top-btn:hover { background: var(--terra); }

/* --- Reveal по скроллу (в макете — reactive op/ty; здесь IntersectionObserver) --- */
[data-reveal] { opacity: 0; transform: translateY(26px);
  transition: opacity 1.5s cubic-bezier(.22,1,.36,1), transform 1.5s cubic-bezier(.22,1,.36,1); }
[data-reveal].in { opacity: 1; transform: translateY(0); }

/* --- Мобильные правила секций (из @media-блока макета) --- */
@media (max-width: 720px) {
  .m-sec { padding-left: 18px; padding-right: 18px; }
  .reviews-sec.m-sec { padding-left: 0; padding-right: 0; }
  .hero { min-height: calc(100vh - 100px); padding: 32px 18px 52px; }
  .m-grid1 { grid-template-columns: minmax(0, 1fr) !important; }
  .contacts-grid { gap: 44px; }
  .m-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .m-grid2 > div { min-height: 0 !important; }
  .m-stack { display: flex !important; flex-direction: column !important;
    align-items: stretch !important; gap: 14px !important; }
  .m-stack > a { justify-content: center !important; }
  .m-wrap { flex-wrap: wrap !important; gap: 12px 22px !important; }
  .m-pad { padding-left: 18px !important; padding-right: 18px !important; }
  .m-padcard { padding: 26px 20px !important; }
  /* Ленте отзывов боковой отступ не нужен и на мобильном: он даёт
     пустую полосу при прокрутке. Края закрыты градиентами. */
  .m-rail { padding: 4px 0 !important; }
  .m-hlabel { writing-mode: horizontal-tb !important; transform: none !important; }
  .about-grid { display: flex; flex-direction: column; gap: 20px; }
  .cell-t { min-height: 0; }
}

/* ============ /USLUGI (перенос 1:1) ============ */
.usl-main { max-width: 1100px; margin: 0 auto; padding: 60px 32px 100px; }
.a-head { animation: fadeUp .9s .1s cubic-bezier(.22,1,.36,1) both; }
.usl-h1 { margin: 0; font-weight: 800; text-transform: uppercase;
  font-size: clamp(28px, 3.8vw, 48px); letter-spacing: -.01em; }
.usl-sub { margin: 18px 0 0; font-size: 16px; line-height: 1.6; max-width: 620px;
  color: rgba(23,19,15,.7); text-wrap: pretty; }
.usl-group { margin-top: 56px; animation: fadeUp .9s cubic-bezier(.22,1,.36,1) both; }
.usl-ghead { display: flex; align-items: baseline; gap: 18px; padding-bottom: 18px;
  border-bottom: 2px solid var(--ink); }
.usl-gn { font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--terra); }
.usl-gt { margin: 0; font-family: var(--font-head); font-weight: 700;
  text-transform: uppercase; font-size: clamp(20px, 2.4vw, 30px); }
.usl-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 24px; padding: 18px 8px; border-bottom: 1px solid rgba(23,19,15,.14);
  transition: background .35s ease, padding .35s ease; }
.usl-row:hover { background: var(--bg-2); padding-left: 18px; padding-right: 18px; }
.usl-name { font-size: 15.5px; font-weight: 600; }
.usl-price { font-size: 15px; font-weight: 700; color: var(--terra); white-space: nowrap; }
.usl-cta { margin-top: 70px; background: var(--ink); color: var(--bg); padding: 50px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px;
  animation: fadeUp .9s .5s cubic-bezier(.22,1,.36,1) both; }
.uc-txt { display: flex; flex-direction: column; gap: 10px; }
.uc-h { font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 28px); }
.uc-d { font-size: 15px; line-height: 1.55; color: rgba(242,237,228,.7); max-width: 520px; }
.uc-btn { flex: none; display: flex; align-items: center; gap: 16px; background: var(--bg);
  color: var(--ink); font-family: var(--font-head); font-weight: 600; font-size: 13px;
  padding: 20px 30px; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; transition: all .3s ease; }
.uc-btn:hover { background: var(--terra); color: var(--bg); }
.uc-btn .arr { font-family: var(--font-text); font-size: 18px; }

/* ============ /ABOUT (перенос 1:1) ============ */
.ab-main { max-width: 900px; margin: 0 auto; padding: 70px 32px 100px; }
.ab-kick { font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(23,19,15,.5); }
.ab-h1 { margin: 16px 0 0; font-weight: 800; text-transform: uppercase;
  font-size: clamp(28px, 3.8vw, 48px); letter-spacing: -.01em; line-height: 1.05; }
.ab-body { margin-top: 44px; display: flex; flex-direction: column; gap: 44px; }
.ab-quote { margin: 0; border-left: 3px solid var(--terra); padding: 6px 0 6px 28px;
  font-family: var(--font-head); font-weight: 600; font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.55; max-width: 760px; letter-spacing: -.01em;
  animation: fadeUp .9s .25s cubic-bezier(.22,1,.36,1) both; text-wrap: balance; }
.ab-block { display: grid; grid-template-columns: 200px 1fr; gap: 36px; padding-top: 36px;
  border-top: 1px solid rgba(23,19,15,.16); animation: fadeUp .9s cubic-bezier(.22,1,.36,1) both; }
.ab-bt { font-family: var(--font-head); font-weight: 700; font-size: 15px;
  text-transform: uppercase; line-height: 1.35; }
.ab-bd { margin: 0; font-size: 15.5px; line-height: 1.7; color: rgba(23,19,15,.75); text-wrap: pretty; }
.ab-cta { margin-top: 70px; background: var(--ink); color: var(--bg); padding: 50px;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px;
  animation: fadeUp .9s .7s cubic-bezier(.22,1,.36,1) both; }
.ab-btn { flex: none; display: flex; align-items: center; gap: 16px; background: var(--terra);
  color: var(--bg); font-family: var(--font-head); font-weight: 600; font-size: 13px;
  padding: 20px 30px; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; transition: all .3s ease; }
.ab-btn:hover { background: var(--bg); color: var(--ink); }
.ab-btn .arr { font-family: var(--font-text); font-size: 18px; }
@media (max-width: 720px) { .ab-block { display: flex; flex-direction: column; gap: 10px; } }

/* ============ /CONTACTS (перенос 1:1, тёмная страница) ============ */
.page-dark { background: var(--ink); color: var(--bg); }
.ct-main { width: 100%; max-width: 1200px; margin: 0 auto; padding: 80px 40px 100px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.ct-info { display: flex; flex-direction: column; gap: 30px;
  animation: fadeUp .9s .15s cubic-bezier(.22,1,.36,1) both; }
.ct-h1 { margin: 0; font-weight: 800; text-transform: uppercase;
  font-size: clamp(30px, 3.8vw, 50px); letter-spacing: -.01em; line-height: 1.05; }
.ct-p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(242,237,228,.7);
  max-width: 440px; text-wrap: pretty; }
.ct-phone-big { font-family: var(--font-head); font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px); color: var(--bg); width: fit-content;
  text-decoration: none; transition: color .3s ease; }
.ct-phone-big:hover { color: var(--accent); }
.ct-facts { display: flex; flex-direction: column; gap: 14px; padding-top: 26px;
  border-top: 1px solid rgba(242,237,228,.16); font-size: 14.5px;
  color: rgba(242,237,228,.65); max-width: 440px; }
.ct-facts > div { display: flex; justify-content: space-between; gap: 20px; }
.ctf-k { font-weight: 700; color: rgba(242,237,228,.45); text-transform: uppercase;
  font-size: 12px; letter-spacing: .1em; }
.ct-formwrap { animation: fadeUp .9s .3s cubic-bezier(.22,1,.36,1) both; }

/* Тёмная тема страницы (contacts и др.): фон, тёмная шапка из макета */
body.theme-dark { background: var(--ink); color: var(--bg); }
.theme-dark .site-header { background: rgba(23,19,15,.92); border-bottom-color: var(--paper-15); }
.theme-dark .site-nav a { color: var(--bg); }
.theme-dark .site-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.theme-dark .site-logo { color: var(--bg); }
.theme-dark .site-phone { color: var(--bg); }
.theme-dark .site-phone:hover { color: var(--accent); }
.theme-dark .phone-ic { background: var(--bg); color: var(--ink); }

/* ============ /LEGAL (перенос 1:1 из Docs) ============ */
.lg-main { width: 100%; max-width: 1100px; margin: 0 auto; padding: 60px 32px 100px;
  display: grid; grid-template-columns: 280px 1fr; gap: 50px; align-items: start; }
.lg-side { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 20px;
  animation: fadeUp .8s .1s cubic-bezier(.22,1,.36,1) both; }
.lg-h1 { margin: 0; font-weight: 800; text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.01em; line-height: 1.1; }
.lg-nav { display: flex; flex-direction: column; border: 1px solid rgba(23,19,15,.18);
  background: var(--white); }
.lg-nav a { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-align: left; color: rgba(23,19,15,.6); border-bottom: 1px solid rgba(23,19,15,.1);
  border-left: 3px solid transparent; font-weight: 700; font-size: 13.5px;
  padding: 16px 18px; text-decoration: none; transition: all .35s ease; }
.lg-nav a:hover { background: #FAF7F2; }
.lg-nav a.on { background: var(--bg); color: var(--ink); border-left-color: var(--terra); }
.lg-arr { font-size: 14px; opacity: .4; }
.lg-doc { background: var(--white); border: 1px solid rgba(23,19,15,.18);
  padding: 46px 48px 52px; animation: fadeUp .5s cubic-bezier(.22,1,.36,1) both; }
.lg-dochead { display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; padding-bottom: 22px; border-bottom: 2px solid var(--ink); }
.lg-dochead h2 { margin: 0; font-weight: 700; text-transform: uppercase;
  font-size: clamp(17px, 1.9vw, 24px); letter-spacing: -.01em; }
.lg-date { font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(23,19,15,.45); white-space: nowrap; }
.lg-sec { margin-top: 30px; }
.lg-sec h3 { margin: 0; font-weight: 700; font-size: 14px; text-transform: uppercase; }
.lg-sec p { margin: 12px 0 0; font-size: 15px; line-height: 1.7;
  color: rgba(23,19,15,.72); text-wrap: pretty; }
@media (max-width: 720px) {
  .lg-main { display: flex; flex-direction: column; }
  .lg-side { position: static; }
  .lg-doc { padding: 26px 20px; }
}

/* ============ /CALCULATOR (перенос 1:1) ============ */
.cl-main { width: 100%; max-width: 820px; margin: 0 auto; padding: 60px 32px 90px; }
.cl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  animation: fadeUp .9s .1s cubic-bezier(.22,1,.36,1) both; }
.cl-h1 { margin: 0; font-weight: 800; text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.01em; }
.cl-step-label { font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(23,19,15,.5); white-space: nowrap; }
.cl-dots { display: flex; align-items: center; margin-top: 28px;
  animation: fadeUp .9s .2s cubic-bezier(.22,1,.36,1) both; }
.cl-dot-wrap { display: flex; align-items: center; flex: 1; }
.cl-dot { width: 13px; height: 13px; flex: none; background: var(--bg);
  border: 1px solid rgba(23,19,15,.3); transition: background .6s ease, border .6s ease; }
.cl-dot.on { background: var(--terra); border-color: var(--terra); }
.cl-dot-line { flex: 1; height: 1px; background: rgba(23,19,15,.2); transition: background .6s ease; }
.cl-dot-line.on { background: var(--terra); }
.cl-card { margin-top: 40px; border: 1px solid rgba(23,19,15,.18); background: var(--white);
  padding: 46px 46px 50px; animation: fadeUp .9s .3s cubic-bezier(.22,1,.36,1) both; overflow: hidden; }
.cl-step { display: flex; flex-direction: column; gap: 28px; }
.cl-h2 { margin: 0; font-weight: 700; font-size: 22px; text-transform: uppercase; }
.cl-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cl-opt { padding: 26px 18px; border: 1px solid rgba(23,19,15,.25); background: #F9F6F0;
  color: var(--ink); cursor: pointer; font-family: var(--font-head); font-weight: 600;
  font-size: 14px; text-transform: uppercase; letter-spacing: .03em; transition: all .35s ease; }
.cl-opt:hover, .cl-chip:hover, .cl-extra:hover { border-color: var(--terra); }
.cl-opt.on, .cl-chip.on, .cl-extra.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cl-lbl { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(23,19,15,.6); }
.cl-lbl em { font-style: normal; color: rgba(23,19,15,.4); text-transform: none; letter-spacing: 0; }
.cl-areas { display: flex; flex-direction: column; gap: 34px; max-width: 520px; }
.cl-area { display: flex; flex-direction: column; }
.cl-area-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cl-area-val { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--terra); }
.cl-scale { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600;
  color: rgba(23,19,15,.4); margin-top: 14px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 3px; background: linear-gradient(90deg, #B2461F 0%, #C97B54 100%);
  background-size: var(--fill, 0%) 100%; background-repeat: no-repeat;
  background-color: rgba(23,19,15,.14); outline: none; margin: 20px 0 0;
  transition: background-size .25s ease; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px;
  border-radius: 50%; background: var(--terra); cursor: grab; border: 4px solid #FFFFFF;
  box-shadow: 0 2px 12px rgba(23,19,15,.3); transition: transform .25s ease, box-shadow .25s ease; }
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); }
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.2); cursor: grabbing;
  box-shadow: 0 4px 16px rgba(178,70,31,.4); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%;
  background: var(--terra); cursor: grab; border: 4px solid #FFFFFF; }
.cl-dims { border-top: 1px solid rgba(23,19,15,.12); padding-top: 22px;
  display: flex; flex-direction: column; gap: 14px; }
.cl-dims-t { font-size: 13px; font-weight: 700; color: rgba(23,19,15,.55); }
.cl-dims-row { display: flex; gap: 12px; max-width: 420px; }
.cl-dims-row input { width: 33%; border: 1px solid rgba(23,19,15,.25); background: #F9F6F0;
  padding: 13px 14px; font-size: 14px; outline: none; font-family: var(--font-text); }
.cl-dims-row input:focus { border-color: var(--terra); }
.cl-dims-hint { font-size: 13.5px; font-weight: 600; color: var(--terra); }
.cl-fgroup { display: flex; flex-direction: column; gap: 12px; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-chip { padding: 14px 20px; border: 1px solid rgba(23,19,15,.25); background: #F9F6F0;
  color: var(--ink); cursor: pointer; font-weight: 700; font-size: 13.5px;
  font-family: var(--font-text); transition: all .35s ease; }
.cl-hint { font-size: 12.5px; line-height: 1.45; color: rgba(23,19,15,.5); }
.cl-note { background: var(--bg); border: 1px solid rgba(23,19,15,.14); padding: 16px 18px;
  font-size: 13px; line-height: 1.5; color: rgba(23,19,15,.6); }
.cl-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cl-extra { padding: 18px 22px; text-align: left; border: 1px solid rgba(23,19,15,.25);
  background: #F9F6F0; color: var(--ink); cursor: pointer; font-family: var(--font-text);
  transition: all .35s ease; }
.ce-t { display: block; font-weight: 700; font-size: 14px; }
.ce-h { display: block; font-weight: 500; font-size: 12.5px; line-height: 1.4;
  margin-top: 5px; color: rgba(23,19,15,.5); }
.cl-extra.on .ce-h { color: var(--paper-55); }
.cl-lbl-caps { font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(23,19,15,.5); }
.cl-result { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 18px;
  font-family: var(--font-head); letter-spacing: -.01em; color: var(--terra); }
.cl-r { display: flex; align-items: baseline; gap: 10px; }
.cl-r-pre { font-weight: 600; font-size: 17px; color: rgba(23,19,15,.5); }
.cl-r-num { font-weight: 800; font-size: clamp(30px, 3.4vw, 42px); white-space: nowrap; }
.cl-r-rub { font-weight: 600; font-size: 22px; }
.cl-r-inc { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(23,19,15,.7);
  max-width: 620px; text-wrap: pretty; }
.cl-bonus { background: var(--bg); border: 1px solid rgba(23,19,15,.14); padding: 20px 24px;
  font-size: 14.5px; line-height: 1.6; color: rgba(23,19,15,.75); }
.cl-r-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.cl-r-main { display: flex; align-items: center; gap: 16px; background: var(--terra);
  color: var(--bg); font-family: var(--font-head); font-weight: 600; font-size: 13px;
  padding: 19px 28px; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; transition: background .3s ease; }
.cl-r-main:hover { background: #9c3c1a; }
.cl-r-main .arr { font-family: var(--font-text); font-size: 18px; }
.cl-r-ghost { display: flex; align-items: center; background: none; color: var(--ink);
  border: 1px solid var(--ink); font-family: var(--font-head); font-weight: 600;
  font-size: 13px; padding: 18px 28px; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; transition: all .3s ease; }
.cl-r-ghost:hover { background: var(--ink); color: var(--bg); }
.cl-nav { display: flex; justify-content: space-between; align-items: center;
  margin-top: 42px; padding-top: 26px; border-top: 1px solid rgba(23,19,15,.12); }
.cl-back, .cl-restart { background: none; border: none; cursor: pointer; font-weight: 700;
  font-size: 14px; color: rgba(23,19,15,.6); display: flex; align-items: center; gap: 8px;
  padding: 10px 0; font-family: var(--font-text); transition: color .3s ease; }
.cl-back:hover, .cl-restart:hover { color: var(--terra); }
.cl-next { display: flex; align-items: center; gap: 14px; background: var(--ink);
  color: var(--bg); border: none; cursor: pointer; font-family: var(--font-head);
  font-weight: 600; font-size: 13px; padding: 17px 28px; letter-spacing: .04em;
  text-transform: uppercase; transition: background .3s ease, opacity .3s ease; }
.cl-next:hover:not(:disabled) { background: var(--terra); }
.cl-next:disabled { cursor: default; }
.cl-next .arr { font-family: var(--font-text); font-size: 18px; }
@media (max-width: 720px) {
  .cl-grid3 { grid-template-columns: 1fr; }
  .cl-extras { grid-template-columns: 1fr; }
  .cl-card { padding: 26px 20px; }
}

/* ============ КАБИНЕТ (перенос Cabinet 1:1; вход — email по п.0 плана) ============ */
.cab-main { width: 100%; max-width: 860px; margin: 0 auto; padding: 60px 32px 100px;
  display: flex; flex-direction: column; gap: 22px; }
.cab-login { max-width: 480px; display: flex; flex-direction: column; gap: 18px;
  animation: fadeUp .8s .1s cubic-bezier(.22,1,.36,1) both; }
.cab-h1 { margin: 0; font-weight: 800; text-transform: uppercase;
  font-size: clamp(24px, 3vw, 36px); letter-spacing: -.01em; }
.cab-p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(23,19,15,.7); }
.cab-form { display: flex; flex-direction: column; gap: 12px; }
.cab-form input { border: 1px solid rgba(23,19,15,.25); background: var(--white);
  padding: 15px 16px; font-size: 15px; outline: none; font-family: var(--font-text); }
.cab-form input:focus { border-color: var(--terra); }
.cab-note { font-size: 13.5px; font-weight: 600; color: var(--terra); }
.cab-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  animation: fadeUp .8s .1s cubic-bezier(.22,1,.36,1) both; }
.cab-exit { background: none; border: none; cursor: pointer; font-size: 12.5px;
  font-weight: 700; color: rgba(23,19,15,.5); font-family: var(--font-text); }
.cab-exit:hover { color: var(--terra); }
.cab-objects { display: flex; gap: 10px; flex-wrap: wrap; }
.cab-obj { border: 1px solid rgba(23,19,15,.22); background: #FAF7F2; color: var(--ink);
  font-weight: 700; font-size: 13px; padding: 12px 16px; text-decoration: none;
  transition: all .35s ease; }
.cab-obj.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cab-card { background: var(--white); border: 1px solid rgba(23,19,15,.16);
  padding: 30px 32px 34px; animation: fadeUp .8s cubic-bezier(.22,1,.36,1) both; }
.cab-addr { font-weight: 700; font-size: 14px; margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(23,19,15,.1); }
.cab-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.cab-card-head h2 { margin: 0; font-weight: 700; font-size: 15px; text-transform: uppercase; }
.cab-right { display: flex; align-items: center; gap: 10px; }
.muted-caps { font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(23,19,15,.45); }
.cab-closed { font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bg); background: #3B7A45; padding: 5px 10px; }
.cab-progress { font-size: 12px; font-weight: 700; color: var(--terra); }
.cab-bar { height: 4px; background: rgba(23,19,15,.14); margin: 18px 0 26px; }
.cab-bar div { height: 4px; background: var(--terra);
  transition: width 1.2s cubic-bezier(.22,1,.36,1); }
.cab-stages { display: flex; flex-direction: column; }
.cab-stage { display: grid; grid-template-columns: 26px 1fr 130px 110px; gap: 18px;
  align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(23,19,15,.1); }
.cab-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(23,19,15,.3);
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--bg); }
.cab-dot.done { background: var(--terra); border-color: var(--terra); }
.cab-dot.active { background: var(--accent); border-color: var(--accent); }
.cab-st-t { font-size: 14.5px; font-weight: 600; }
.cab-st-t.muted { color: rgba(23,19,15,.45); }
.cab-st-s { font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(23,19,15,.4); text-align: right; }
.cab-st-s.act { color: var(--terra); }
.cab-photos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px; margin-top: 22px; }
.cab-photo { position: relative; aspect-ratio: 4/3; overflow: hidden;
  border: 1px solid rgba(23,19,15,.16); display: block; }
.cab-photo img { width: 100%; height: 100%; object-fit: cover; }
.cab-photo span { position: absolute; left: 0; bottom: 0; right: 0;
  background: rgba(23,19,15,.72); color: var(--bg); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; }
.cab-photo-empty { grid-column: 1/-1; aspect-ratio: auto; border: 1px dashed rgba(23,19,15,.25);
  background: var(--bg-2); padding: 26px; font-size: 13px; color: rgba(23,19,15,.55);
  text-align: center; }
.cab-revform { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin-top: 14px; }
.cab-revform textarea { border: 1px solid rgba(23,19,15,.25); background: #FAF7F2;
  padding: 14px 16px; font-size: 14px; outline: none; resize: vertical; font-family: var(--font-text); }
.cab-revform textarea:focus { border-color: var(--terra); }
@media (max-width: 720px) { .cab-photos { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.cab-est { display: flex; flex-direction: column; margin-top: 18px; }
.cab-est-row { display: grid; grid-template-columns: 1fr 90px 110px; gap: 12px;
  align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgba(23,19,15,.1);
  font-size: 13.5px; }
.cab-est-row b { text-align: right; }
.cab-est-tot { display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; margin-top: 18px; }
.cab-est-sum { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--terra); }


/* ---------- Футер (из нового макета, 4 колонки) ---------- */
.site-footer {
  background: var(--ink); color: rgba(242,237,228,.6);
  padding: 52px 40px 26px; font-size: 13.5px;
  border-top: 1px solid rgba(242,237,228,.14);
}
.foot-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px; padding-bottom: 30px;
}
.foot-col { display: flex; flex-direction: column; gap: 13px; }
.foot-logo { font-family: var(--font-head); font-weight: 800; font-size: 18px;
  letter-spacing: .2em; color: var(--bg); }
.foot-dot { display: inline-block; width: .2em; height: .2em;
  background: var(--terra); margin-left: -.06em; vertical-align: baseline; }
.foot-copy { font-size: 12px; line-height: 1.5; color: rgba(242,237,228,.4); margin-top: 3px; }
.foot-heading { font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bg); }
.foot-col a { color: rgba(242,237,228,.65); font-weight: 600;
  text-decoration: none; transition: color .3s ease; }
.foot-col a:hover { color: var(--bg); }
.foot-social { display: flex; align-items: center; gap: 12px; }
.foot-social svg, .foot-social img { flex: none; }
.foot-legal { display: block; font-size: 11.5px; color: rgba(242,237,228,.4);
  margin-top: 4px; line-height: 1.5; text-decoration: none;
  transition: color .3s ease; }
.foot-legal:hover { color: rgba(242,237,228,.75); }
@media (max-width: 720px) {
  .site-footer { padding: 40px 18px 24px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
}
@media (max-width: 480px) {
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* Кнопка кабинета (публичная страница, не зависит от admin.css) */
.cab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--terra); color: var(--bg); border: none; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: 13px;
  padding: 19px 28px; letter-spacing: .04em; text-transform: uppercase;
  transition: background .3s ease; width: 100%; }
.cab-btn:hover { background: var(--terra-hover); }

/* Тёмная тема: футер на тёмных страницах (contacts) не должен дублировать border */
.theme-dark .site-footer { border-top-color: rgba(242,237,228,.08); }

/* Страница подтверждения входа (по email) */
.confirm-main { max-width: 1200px; margin: 0 auto; padding: 80px 32px;
  min-height: calc(100vh - 78px - 200px); display: flex; align-items: center; justify-content: center; }
.confirm-card { background: var(--white); border: 1px solid rgba(23,19,15,.16);
  padding: 48px 44px; max-width: 460px; width: 100%; text-align: center;
  animation: fadeUp .7s cubic-bezier(.22,1,.36,1) both; }
.confirm-h1 { margin: 0 0 14px; font-weight: 800; text-transform: uppercase;
  font-size: clamp(24px, 3vw, 34px); letter-spacing: -.01em; }
.confirm-p { margin: 0 0 26px; font-size: 15px; line-height: 1.6; color: rgba(23,19,15,.7); }

/* ---------- Кабинет: отдельный layout (мини-шапка + центр-карточка) ---------- */
.cab-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; height: 74px; padding: 0 34px;
  background: rgba(242,237,228,.94); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(23,19,15,.14); }
.cab-header-left { display: flex; align-items: center; gap: 22px; }
.cab-header-tag { font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(23,19,15,.45); }
.cab-header-right { display: flex; align-items: center; gap: 12px; }
.cab-header-back { display: flex; align-items: center; gap: 9px; background: none; border: none;
  font-family: var(--font-text); font-size: 12.5px; font-weight: 700; color: rgba(23,19,15,.65);
  text-decoration: none; padding: 11px 4px 11px 0; transition: color .3s ease; }
.cab-header-back .chb-arr { font-size: 15px; }
.cab-header-back:hover { color: var(--terra); }
/* Кнопка выхода — рамочная, как в макете (hover заливкой в чернильный) */
.cab-header-exit button { background: none; cursor: pointer;
  border: 1px solid rgba(23,19,15,.25); font-family: var(--font-text); font-weight: 700;
  font-size: 12.5px; color: var(--ink); padding: 11px 18px; transition: all .35s ease; }
.cab-header-exit button:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cab-body { min-height: calc(100vh - 74px); }
/* Экран входа: карточка по центру */
.cab-login-wrap { min-height: calc(100vh - 74px); display: flex; align-items: center;
  justify-content: center; padding: 40px 24px; }
.cab-login-card { background: var(--white); border: 1px solid rgba(23,19,15,.16);
  padding: 44px 40px; max-width: 460px; width: 100%;
  display: flex; flex-direction: column; gap: 16px;
  animation: fadeUp .7s cubic-bezier(.22,1,.36,1) both; }
.cab-login-card .ab-kick { margin-bottom: 4px; color: rgba(23,19,15,.5); }
.cab-login-card .cab-form { margin-top: 6px; }
.cab-inner { max-width: 860px; margin: 0 auto; padding: 40px 32px 90px;
  display: flex; flex-direction: column; gap: 22px; }

/* Страницы ошибок 404/500 */
.err-main { max-width: 1200px; margin: 0 auto; padding: 100px 32px;
  min-height: calc(100vh - 78px - 220px); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; }
.err-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(70px, 12vw, 140px);
  color: var(--terra); line-height: 1; letter-spacing: -.02em; }
.err-h1 { margin: 12px 0 10px; font-weight: 800; text-transform: uppercase;
  font-size: clamp(24px, 3vw, 36px); }
.err-p { margin: 0 0 28px; font-size: 15px; color: rgba(23,19,15,.7); max-width: 440px; }

/* ---------- Кабинет: блоки, добавленные по Cabinet.dc.html ---------- */
.cab-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; }
.cab-head-l { display: flex; flex-direction: column; gap: 10px; }
.cab-head-r { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.cab-master { font-size: 13px; color: rgba(23,19,15,.55); }
.cab-master-tel { font-weight: 700; font-size: 15px; color: var(--terra); }
.cab-master-tel:hover { color: var(--terra-hover); }
/* Карточка договора — как в макете: серая подложка, тёмная кнопка */
.cab-doc { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 18px; background: var(--bg);
  border: 1px solid rgba(23,19,15,.14); margin-top: 18px; flex-wrap: wrap; }
.cab-doc-i { display: flex; flex-direction: column; gap: 4px; }
.cab-doc-n { font-weight: 700; font-size: 14px; }
.cab-doc-s { font-size: 12.5px; color: rgba(23,19,15,.5); }
.cab-doc-btn { background: var(--ink); color: var(--bg); border: none; cursor: pointer;
  font-family: var(--font-text); font-weight: 700; font-size: 12.5px; padding: 12px 18px;
  text-decoration: none; transition: background .3s ease; }
.cab-doc-btn:hover { background: var(--terra); color: var(--bg); }
/* Реквизиты */
.cab-legal { display: flex; flex-direction: column; margin-top: 14px; }
.cab-legal-row { display: flex; justify-content: space-between; gap: 18px;
  font-size: 13.5px; padding: 8px 0; border-bottom: 1px solid rgba(23,19,15,.1); }
.cab-legal-row span { color: rgba(23,19,15,.5); flex: none; }
.cab-legal-row b { font-weight: 600; text-align: right; }
@media (max-width: 720px) {
  .cab-head-r { align-items: flex-start; }
  .cab-legal-row { flex-direction: column; gap: 4px; }
  .cab-legal-row b { text-align: left; }
}
/* Подзаголовки разделов сметы в кабинете (работы / материалы) */
.cab-est-sub { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-top: 18px; font-family: var(--font-head); font-weight: 700;
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(23,19,15,.55); }
.cab-est-sub span { font-family: var(--font-text); font-weight: 800; font-size: 13px;
  color: var(--ink); }

/* Дата этапа — колонка из макета (Cabinet.dc.html, строка 154) */
.cab-st-d { font-size: 13px; color: rgba(23,19,15,.45); text-align: right; }
@media (max-width: 720px) {
  .cab-stage { grid-template-columns: 26px 1fr auto; }
  .cab-st-d { grid-column: 2 / -1; text-align: left; font-size: 12px; }
}

/* ---------- Юр-документы: подпункты и таблицы ---------- */
.lg-items { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.lg-item { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(23,19,15,.82); }
.lg-tablewrap { margin-top: 16px; overflow-x: auto; }
.lg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.55; }
.lg-table th { text-align: left; font-family: var(--font-head); font-weight: 700;
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(23,19,15,.55); padding: 10px 14px 10px 0;
  border-bottom: 2px solid var(--ink); vertical-align: bottom; }
.lg-table td { padding: 12px 14px 12px 0; border-bottom: 1px solid rgba(23,19,15,.12);
  vertical-align: top; color: rgba(23,19,15,.82); }
.lg-table td:first-child { font-weight: 600; color: var(--ink); }
@media (max-width: 720px) {
  .lg-table { font-size: 12.5px; }
  .lg-table th, .lg-table td { padding-right: 10px; }
}

/* Согласие на обработку — обязательная отметка в формах заявки (152-ФЗ).
   Перебиваем стиль обычных подписей формы: там колонка, uppercase и разрядка. */
.lead-form .lead-consent, .lead-consent {
  display: flex !important; flex-direction: row !important; align-items: flex-start;
  gap: 11px; margin-top: 2px; font-size: 12.5px !important; font-weight: 500 !important;
  line-height: 1.5; letter-spacing: normal !important; text-transform: none !important;
  color: rgba(23,19,15,.62); cursor: pointer; }
.lead-consent input[type="checkbox"] { width: 17px; height: 17px; flex: none;
  margin: 2px 0 0; accent-color: var(--terra); cursor: pointer; }
.lead-consent span { display: block; }
.lead-consent a { color: var(--terra); text-decoration: underline;
  text-underline-offset: 2px; white-space: nowrap; }
.lead-consent a:hover { color: var(--terra-hover); }
/* На тёмной секции с формой */
.sec-dark .lead-consent, .theme-dark .lead-consent { color: rgba(242,237,228,.6); }
.sec-dark .lead-consent a, .theme-dark .lead-consent a { color: var(--accent); }
/* Пояснение под справочным расчётом материалов в кабинете */
.cab-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55;
  color: rgba(23,19,15,.5); }

/* Две суммы в смете кабинета — визуально разного веса, чтобы клиент
   не принял расчёт материалов за часть цены договора. */
.cab-est-tot-main { border-top: 2px solid var(--ink); margin-top: 16px;
  padding-top: 16px; align-items: baseline; }
.cab-est-tot-mats { border-top: 1px solid rgba(23,19,15,.16); margin-top: 26px;
  padding-top: 14px; align-items: baseline; }
.cab-tot-l { font-family: var(--font-head); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
.cab-est-tot-mats .cab-tot-l { font-size: 12px; color: rgba(23,19,15,.6); }
.cab-tot-l em { font-style: normal; font-family: var(--font-text); font-weight: 500;
  font-size: 12px; letter-spacing: normal; text-transform: none;
  color: rgba(23,19,15,.5); }
/* Цена договора — крупно и цветом; материалы — спокойно и мельче */
.cab-est-sum { font-family: var(--font-head); font-weight: 800; font-size: 26px;
  color: var(--terra); white-space: nowrap; }
.cab-est-sum2 { font-family: var(--font-head); font-weight: 700; font-size: 17px;
  color: rgba(23,19,15,.75); white-space: nowrap; }
@media (max-width: 720px) {
  .cab-est-sum { font-size: 21px; }
  .cab-est-sum2 { font-size: 15px; }
}

/* ---------- Фото к отзыву ---------- */
.rev-photos { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  margin-top: -4px; padding: 9px 14px; cursor: pointer;
  background: none; border: 1px solid rgba(23,19,15,.2);
  font-family: var(--font-text); font-weight: 700; font-size: 12.5px;
  color: rgba(23,19,15,.7); transition: all .3s ease; }
.rev-photos:hover { border-color: var(--terra); color: var(--terra); }
.rev-photos-ic { font-size: 13px; color: var(--terra); }
.rev-photos-n { background: rgba(23,19,15,.1); font-size: 11px; padding: 1px 7px;
  border-radius: 9px; }
.rev-photos:hover .rev-photos-n { background: rgba(178,70,31,.12); }

/* Просмотрщик: затемнение, крупный кадр, стрелки, счётчик */
.ph-view { position: fixed; inset: 0; z-index: 120; display: none;
  background: #0C0A08; }
.ph-view.on { display: flex; flex-direction: column; }
.ph-top { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 22px; color: rgba(242,237,228,.75); font-size: 13px;
  border-bottom: 1px solid rgba(242,237,228,.12); }
.ph-close { background: none; border: none; cursor: pointer; color: var(--bg);
  font-size: 26px; line-height: 1; padding: 4px 10px; }
.ph-body { flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 0 14px 24px; min-height: 0; }
.ph-img { max-width: min(1100px, 92vw); max-height: 100%; object-fit: contain;
  user-select: none; }
.ph-nav { background: none; border: 1px solid rgba(242,237,228,.35); cursor: pointer;
  color: var(--bg); font-size: 20px; width: 46px; height: 46px; flex: none;
  transition: all .3s ease; }
.ph-nav:hover { background: rgba(242,237,228,.14); }
.ph-nav[disabled] { opacity: .25; cursor: default; }
@media (max-width: 720px) {
  .ph-body { padding: 0 8px 18px; gap: 8px; }
  .ph-nav { width: 38px; height: 38px; font-size: 17px; }
}
/* Прикрепление фото к отзыву в кабинете */
.cab-revphoto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  cursor: pointer; margin-top: -4px; }
.cab-revphoto-btn { border: 1px dashed rgba(23,19,15,.35); padding: 10px 16px;
  font-size: 12.5px; font-weight: 700; color: rgba(23,19,15,.7);
  transition: all .3s ease; }
.cab-revphoto:hover .cab-revphoto-btn { border-color: var(--terra); color: var(--terra); }
.cab-revphoto-hint { font-size: 12.5px; color: rgba(23,19,15,.45); }

/* ---------- Кабинет: аккордеон разделов ---------- */
/* Адрес объекта поднят над аккордеоном — виден при любом открытом разделе. */
.cab-addr-top { margin-bottom: 20px; }

.cab-acc-i { padding-bottom: 0; }
.cab-acc-i + .cab-acc-i { margin-top: 14px; }

/* Шапка-кнопка: сбрасываем браузерные стили button, оставляем вид заголовка. */
.cab-acc-head { width: 100%; background: none; border: 0; padding: 0 0 2px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cab-acc-head:hover h2 { color: var(--terra, #B2461F); }
.cab-acc-head:focus-visible { outline: 2px solid var(--terra, #B2461F); outline-offset: 4px; }
.cab-acc-head .cab-right { display: inline-flex; align-items: center; gap: 14px; }

/* Шеврон: поворачивается вниз у открытого раздела. */
.cab-acc-chev { width: 10px; height: 10px; flex: none;
  border-right: 2px solid rgba(23,19,15,.5); border-bottom: 2px solid rgba(23,19,15,.5);
  transform: rotate(-45deg); transition: transform .25s ease; margin-top: -4px; }
.cab-acc-i.is-open .cab-acc-chev { transform: rotate(45deg); margin-top: -2px; }

.cab-acc-body { display: none; padding-top: 18px; }
.cab-acc-i.is-open .cab-acc-body { display: block;
  animation: fadeUp .35s cubic-bezier(.22,1,.36,1) both; }

/* Подзаголовок внутри раздела (Фотоотчёты внутри «Этапы и фото»). */
.cab-sub { margin: 30px 0 14px; padding-top: 20px;
  border-top: 1px solid rgba(23,19,15,.12);
  font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: -.01em; text-transform: uppercase;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cab-sub-note { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(23,19,15,.45); }

/* Заголовки двух смет: работы входят в договор, материалы — нет.
   Различие должно читаться с одного взгляда, поэтому цвет и кегль. */
.cab-est-h { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 17px;
  letter-spacing: -.025em; text-transform: uppercase; color: var(--terra, #B2461F);
  margin: 0 0 16px; }
.cab-est-h-mats { color: rgba(23,19,15,.75); margin-top: 34px; padding-top: 24px;
  border-top: 1px solid rgba(23,19,15,.16); }
.cab-est-h-mats + .cab-est-tot-mats { border-top: 0; margin-top: 0; padding-top: 0; }

@media (max-width: 640px) {
  .cab-est-h { font-size: 15px; }
  .cab-acc-head .cab-right { gap: 10px; }
}