/* ===== Общие стили для всех страниц ===== */

/* Цвета и шрифты. Меняются в одном месте */
:root {
  --bg: #1a1b1d;
  --bg2: #222326;
  --bg3: #2a2b2f;
  --line: #37383c;
  --tx: #efe6d8;
  --mut: #a9a193;
  --br: #b8895a;
  --br2: #d3a977;
  --r: 0.875rem;
  --serif: 'Noto Serif Display', 'Noto Serif', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* Всё в rem: на широких экранах (1920 и больше) сайт сам становится крупнее.
     До 1360 пикселей ширины = 16px, на 1920 = 24px (в 1,5 раза), потолок 30px. */
  font-size: clamp(16px, calc(1.43vw - 3.43px), 30px);
}
body {
  background: var(--bg);
  color: var(--tx);
  font: 400 1.0625rem/1.6 var(--sans);
  overflow-x: hidden;
  animation: page-in .16s ease-out;
}
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) { body { padding-bottom: 5.25rem; } }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.wrap { max-width: 70rem; margin: 0 auto; padding: 0 1.25rem; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1.125rem; }
section { padding: 3.5rem 0; }
p { color: var(--mut); max-width: 62ch; }
p + p { margin-top: 0.75rem; }
.eyebrow {
  font-size: clamp(1.1875rem, 2.6vw, 1.5rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--br2);
  margin-bottom: 0.875rem;
  font-weight: 700;
}

/* ===== Шапка ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(26, 27, 29, .92);
  backdrop-filter: blur(0.625rem);
  border-bottom: 1px solid var(--line);
}
.hd { display: flex; align-items: center; gap: 0.875rem; height: 4rem; }
.brand {
  display: flex; align-items: center; gap: 0.6875rem;
  font-family: var(--serif); font-size: 1.0625rem; letter-spacing: .06em; line-height: 1.1;
  flex: 1;
}
.brand .lg { height: 2.375rem; width: auto; }
.brand small {
  display: block; font-family: var(--sans); font-size: 0.625rem; letter-spacing: .3em; color: var(--br2);
}
nav.d { display: none; gap: 1.625rem; font-size: 0.9375rem; color: var(--mut); }
nav.d a:hover, nav.d a.on { color: var(--tx); }
.fl { display: flex; align-items: center; }
.fl button {
  min-width: 2.25rem; height: 2.75rem; padding: 0 0.5rem;
  font: 600 0.8125rem var(--sans); letter-spacing: .08em; color: var(--mut);
  transition: color .2s;
}
.fl button { position: relative; }
.fl button + button::before { content: "/"; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); color: var(--mut); opacity: .5; font-weight: 400; }
.fl button:hover { color: var(--tx); }
.fl button.on { color: var(--br2); }
.burger { width: 2.75rem; height: 2.75rem; display: grid; place-content: center; gap: 0.3125rem; }
.burger i { display: block; width: 1.375rem; height: 2px; background: var(--tx); }
.menu { display: none; border-top: 1px solid var(--line); background: var(--bg); }
.menu.open { display: block; }
.menu a { display: block; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); font-size: 1.125rem; }
@media (min-width: 860px) {
  nav.d { display: flex; }
  .burger { display: none; }
  .menu { display: none !important; }
}

/* ===== Кнопки и ссылки ===== */
.btn {
  display: inline-flex; align-items: center; gap: 0.875rem;
  min-height: 3.625rem; padding: 0 1.375rem; border-radius: 0.75rem;
  background: linear-gradient(115deg, #6e5233 0%, #a07b4b 55%, #7d5e39 100%);
  border: 1px solid rgba(235, 200, 150, .28);
  color: #fff; font-weight: 600; font-size: 1.0625rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, .35);
  transition: filter .2s, opacity .25s;
}
.btn span { flex: 1; }
.btn .ar { width: 1.375rem; height: 1.375rem; opacity: .9; transition: transform .2s; }
.btn .wi { width: 1.625rem; height: 1.625rem; flex: none; }
.btn:hover { filter: brightness(1.08); }
.btn:hover .ar { transform: translateX(0.25rem); }
.btn.bk { display: flex; width: min(100%, 23.75rem); margin: 0 auto; padding-right: 3.125rem; }
.btn.bk span { text-align: center; }
.btn.bk:hover .ar { transform: translateX(-0.25rem); }

.link {
  color: var(--br2); font-weight: 600; font-size: 1.125rem;
  display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.75rem 0;
}
.link svg { width: 1.625rem; height: 1.625rem; transition: transform .2s; }
.link:hover svg { transform: translateX(0.25rem); }
.link:hover { text-decoration: underline; }

.back {
  display: inline-flex; align-items: center; gap: 0.625rem;
  padding: 1.25rem 0 0; color: var(--br2); font-weight: 600; font-size: 1.125rem;
}
.back svg { width: 1.625rem; height: 1.625rem; transition: transform .2s; }
.back:hover svg { transform: translateX(-0.25rem); }

/* ===== Слайдер «до / после» ===== */
.ba {
  position: relative; border-radius: var(--r); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--bg3);
  --pos: 50%; user-select: none; touch-action: pan-y;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .b { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba .ln { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--br2); transform: translateX(-1px); }
.ba .kn {
  position: absolute; top: 50%; left: var(--pos); width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
  border-radius: 50%; background: var(--br); color: #1a1208;
  display: grid; place-content: center; font-weight: 700; pointer-events: none;
}
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba .tag {
  position: absolute; top: 0.75rem; padding: 0.3125rem 0.75rem; border-radius: 6.1875rem;
  background: rgba(26, 27, 29, .7); font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase;
}
.ba .tag.l { left: 0.75rem; }
.ba .tag.r { right: 0.75rem; }

/* ===== Отзывы ===== */
blockquote {
  white-space: pre-line;
  font-family: var(--serif); font-size: clamp(1.375rem, 3.4vw, 2rem); line-height: 1.35;
  border-left: 2px solid var(--br); padding-left: 1.375rem; margin: 0.5rem 0; max-width: 30em;
}
.who { margin-top: 0.875rem; color: var(--mut); font-size: 0.9375rem; }

/* ===== Блок «Обсудим ваш ремонт» ===== */
.cta {
  background: var(--bg2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-align: center;
}
.cta p { margin: 0 auto 1.5rem; }
.cta .btn { display: flex; width: min(100%, 23.75rem); margin: 0 auto; }
.cta .ph {
  display: flex; justify-content: center; align-items: center; gap: 0.625rem;
  margin-top: 1.25rem; font-size: 1.5rem; font-family: var(--serif);
}
.cta .ph svg { width: 1.375rem; height: 1.375rem; color: var(--br2); }
@media (max-width: 640px) { .cta .btn { width: 100%; } }

/* ===== Подвал ===== */
.site-footer { padding: 2.5rem 0 1.75rem; }
.ft { display: flex; flex-direction: column; gap: 1.25rem; align-items: center; justify-content: center; }
.ft nav { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: center; }
.ft nav a { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0; color: var(--mut); }
.ft nav a:hover { color: var(--tx); }
.ft nav svg { width: 1.375rem; height: 1.375rem; flex: none; color: var(--br2); }
.ft nav .ar { width: 1rem; height: 1rem; opacity: .7; margin-left: 2px; }
.ft .brand { flex: none; justify-content: center; }
.copy { margin: 1.125rem auto 0; font-size: 0.8125rem; color: #6f6a60; text-align: center; }
/* WhatsApp и телефон в подвале показываем только на страницах объектов */
.xo { display: none !important; }
[data-page="project"] .xo { display: inline-flex !important; }
@media (max-width: 640px) {
  .ft { align-items: stretch; }
  .ft nav { flex-direction: column; gap: 0; }
  .ft nav a { padding: 1rem 0; border-bottom: 1px solid var(--line); }
  .ft nav a .ar { margin-left: auto; }
  [data-page="project"] .xo { display: flex !important; }
}

/* ===== Закреплённая кнопка WhatsApp ===== */
.wa { transition: opacity .25s; position: fixed; z-index: 45; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); will-change: transform; }
.wa .btn { box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, .55); min-width: 18.125rem; }
@media (max-width: 640px) {
  .wa { left: max(0.75rem, env(safe-area-inset-left)); right: max(0.75rem, env(safe-area-inset-right)); }
  .wa .btn { width: 100%; min-height: 3.5rem; }
}

/* Плашка «Номер скопирован» */
.toast {
  position: fixed; left: 50%; bottom: 6rem; transform: translate(-50%, 0.625rem); z-index: 120;
  background: var(--bg3); border: 1px solid var(--br); color: var(--tx);
  padding: 0.75rem 1.25rem; border-radius: 0.75rem; opacity: 0; pointer-events: none; transition: .2s;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Плавное появление блоков при прокрутке */
html.js .rvl { opacity: 0; transform: translateY(1.125rem); transition: .7s; }
html.js .rvl.in { opacity: 1; transform: none; }

/* Если у человека в системе отключены анимации */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; animation: none !important; }
  html.js .rvl { opacity: 1; transform: none; }
}

/* Фото в слайдере «до/после» вертикальные: на телефоне рамка выше */
.ba.real img { object-position: 50% 42%; }
@media (max-width: 640px) { .ba.real { aspect-ratio: 4 / 5; } }

/* ===== Лента фото: сама плывёт справа налево, пока её не тронули ===== */
.mq { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.mq::-webkit-scrollbar { display: none; }
.mq.drag { cursor: grabbing; }
.mqt { display: flex; gap: 0.75rem; width: max-content; }
.mi { flex: none; height: clamp(17rem, 52vw, 30rem); border-radius: var(--r); overflow: hidden; background: var(--bg3); cursor: zoom-in; }
.mi img { display: block; height: 100%; width: auto; -webkit-user-drag: none; }
.mq.card .mi { height: clamp(15rem, 44vw, 24rem); cursor: grab; }
.mq.big { margin-top: 1.375rem; }
.mq.big { margin-bottom: 1.75rem; }
.card .mq { margin-bottom: 0; }

/* ===== Видео ===== */
.vid { position: relative; border-radius: var(--r); overflow: hidden; background: var(--bg3); aspect-ratio: 9 / 16; cursor: pointer; }
.vid video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vrow { display: flex; gap: 0.75rem; margin: 1.375rem 0 1.75rem; }
.card .vrow { margin: 0; }
.vrow .vid { flex: none; height: clamp(17rem, 52vw, 30rem); }
.vrow .mq { flex: 1; min-width: 0; margin: 0; }
@media (max-width: 640px) {
  .vrow { flex-direction: column; }
  .vrow .vid { height: auto; width: min(100%, 15rem); }
}
.vpair { display: grid; grid-template-columns: repeat(2, minmax(0, 18rem)); gap: 0.75rem; }
.more { padding: 2.75rem 0 3rem; border-top: 1px solid var(--line); }
.vgrid { display: grid; gap: 1.5rem 0.75rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); margin-top: 1.25rem; }
.vw h3 { font: 500 1.125rem/1.25 var(--serif); margin: 0.75rem 0 0.375rem; color: var(--tx); }
.vw p { font-size: 0.9375rem; color: var(--mut); }
.tgp { margin-top: 2.25rem; }
.tgl { margin-top: 0.5rem; display: inline-flex; }
.card .vrow .vid { height: clamp(15rem, 44vw, 24rem); }
@media (max-width: 640px) { .card .vrow .vid { height: auto; } }
.rvlink { display: block; color: inherit; text-decoration: none; }
.rvlink blockquote { transition: border-color .25s; max-width: none; }
.rvlink:hover blockquote { border-left-color: var(--br2, var(--br)); }
.rvtg { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; margin-top: 0.625rem; font-size: 0.875rem; color: var(--br); transition: color .25s; }
.rvlink:hover .rvtg { color: var(--tx); }
a.vw { display: block; color: inherit; text-decoration: none; }
a.vw .rvtg { justify-content: flex-start; }
a.vw:hover h3 { color: var(--br2); }
a.tgc { display: block; color: inherit; text-decoration: none; }
a.vw { display: flex; flex-direction: column; }
a.vw .rvtg { margin-top: auto; padding-top: 0.75rem; }

@media (max-width: 640px) { .vrow .vid, .vid.intro { margin-left: auto; margin-right: auto; } }

/* ===== Видео на весь экран ===== */
#vb { position: fixed; inset: 0; z-index: 90; display: none; background: rgba(12, 12, 13, .96); }
#vb.on { display: grid; place-items: center; }
#vb video { max-width: 100%; max-height: 100svh; background: #000; }
.vbx { position: absolute; top: max(0.75rem, env(safe-area-inset-top)); right: 0.875rem; width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: rgba(40, 40, 42, .8); color: #fff; display: grid; place-items: center; cursor: pointer; }
.vbx svg { width: 1.375rem; height: 1.375rem; }

/* Просмотр фото на весь экран */
#lb {
  position: fixed; inset: 0; z-index: 100; background: #0b0b0c; display: none;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; overflow: hidden;
}
#lb.on { display: block; }
.lbt { position: absolute; inset: 0; display: flex; transition: transform .25s ease; will-change: transform; }
.lbs { flex: 0 0 100%; display: grid; place-items: center; padding: 4rem 0.875rem 3.5rem; min-width: 0; }
.lbs > img { width: 100%; max-height: calc(100svh - 8.125rem); object-fit: contain; border-radius: 0.5rem; }
.lbs .ba { width: min(100%, 68.75rem); margin: 0; }
#lb button {
  position: absolute; z-index: 3; width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(40, 41, 44, .85); border: 1px solid var(--line);
  display: grid; place-content: center; color: var(--tx);
}
#lb button svg { width: 1.375rem; height: 1.375rem; }
.lbx { top: max(0.75rem, env(safe-area-inset-top)); right: 0.875rem; }
.lbp, .lbn { top: 50%; margin-top: -1.5rem; }
.lbp { left: 0.875rem; }
.lbn { right: 0.875rem; }
.lbp svg { transform: scaleX(-1); }
.lbc {
  position: absolute; bottom: max(1.125rem, env(safe-area-inset-bottom)); left: 0; right: 0;
  text-align: center; color: var(--mut); font-size: 0.9375rem; letter-spacing: .1em;
}
@media (max-width: 640px) { .lbp, .lbn { display: none !important; } }

.rvlbl { margin: 1.25rem 0 0; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--br); }
.rvlbl + blockquote { margin-top: 0.5rem; }

.copy.legal { margin-top: 0.5rem; letter-spacing: 0.14em; color: #8a8478; }
@media (min-width: 640px) { .vgrid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.25rem; } }