/* ==========================================================================
   ProBuild — сайт-визитка мастера. Единый шаблон.
   Палитра и типографика — по дизайн-брифу (schema «нейтраль + один акцент»).
   Адаптив: mobile-first, десктоп включается на @media (min-width:900px)
   — брейкпоинт взят из исходного дизайна, чтобы вид совпадал 1:1.
   ========================================================================== */

:root {
  /* Поверхности */
  --bg: #FAF9F7;            /* фон страницы, тёплый почти-белый */
  --surface: #FFFFFF;       /* карточки; фото всегда на белом */
  --tint: #F6EDE7;          /* акцентная подложка иконок */
  --tint-2: #F4F1EC;        /* нейтральная подложка при ховере */

  /* Текст */
  --text: #1F1E1C;          /* основной, тёплый графит */
  --text-body: #403D37;     /* длинные абзацы */
  --text-muted: #726E66;    /* вторичный */
  --text-faint: #8A857C;    /* подписи, мета */

  /* Границы */
  --border: #E2DED6;        /* основная, ощутимая */
  --border-soft: #ECE8E1;   /* мягкая (шапка, разделители) */

  /* Акцент */
  --accent: #B5532E;        /* терракота: кнопки, плашки */
  --accent-deep: #9E4526;   /* глубже: мелкие ссылки, контраст 4.5:1 */

  /* Радиусы и тени */
  --shadow-sm: 0 1px 3px rgba(31, 30, 28, .05);
  --shadow-card: 0 1px 3px rgba(31, 30, 28, .06);
}

/* ------- Сброс и база ------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Golos Text', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* Горизонтальные «дорожки» карусели — прячем скроллбар, оставляя скролл */
.lane { scrollbar-width: none; }
.lane::-webkit-scrollbar { height: 0; }

/* Утилита: скрыть визуально, оставить для скринридеров */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Каркас (chrome): контейнер, кнопки, шапка, панель, поп-ап
   ========================================================================== */

/* --- Иконки (спрайт) --- */
.ic { display: inline-flex; flex: none; width: 20px; height: 20px; vertical-align: middle; fill: none; stroke: currentColor; }
.ic--13 { width: 13px; height: 13px; }
.ic--15 { width: 15px; height: 15px; }
.ic--16 { width: 16px; height: 16px; }
.ic--17 { width: 17px; height: 17px; }
.ic--18 { width: 18px; height: 18px; }
.ic--20 { width: 20px; height: 20px; }
.ic--22 { width: 22px; height: 22px; }
.accent { color: var(--accent); }

/* --- Контейнер и секции --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.section { padding-top: 38px; scroll-margin-top: 80px; }
.eyebrow {
  font: 600 12px/1 'Golos Text'; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent-deep);
}
.h2 { margin-top: 8px; font: 700 22px/1.15 'Golos Text'; color: var(--text); letter-spacing: -.015em; }

/* --- Утилиты адаптива --- */
.only-desktop { display: none; }              /* по умолчанию (мобильный) скрыто */
@media (min-width: 900px) { .only-mobile { display: none; } }  /* на десктопе скрыто */

/* --- Флаг «нет данных в базе» (заглушка) --- */
.needs-data {
  text-decoration: underline dashed; text-decoration-color: var(--accent);
  text-underline-offset: 3px; cursor: help;
}

/* --- Кнопки --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent;
  font: 600 15px 'Golos Text'; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-deep); }
.btn--ghost { background: #fff; border-color: var(--border); color: var(--text); }
.btn--ghost:hover { background: var(--tint-2); }
.btn--sm { height: 42px; padding: 0 18px; border-radius: 11px; font-size: 14.5px; }
.btn--lg { height: 54px; padding: 0 26px; border-radius: 13px; font-size: 16.5px; }
.btn--xl { height: 56px; padding: 0 26px; border-radius: 14px; font-size: 16.5px; }
.btn--block { width: 100%; }

.icon-btn {
  width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--border);
  background: #fff; color: var(--accent); display: inline-flex; align-items: center;
  justify-content: center; text-decoration: none; flex: none;
}
.icon-btn:hover { background: var(--tint-2); }

/* --- Шапка --- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 249, 247, .9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft);
}
.site-header__inner {
  height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand__logo {
  flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--accent);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font: 700 15px 'Golos Text'; letter-spacing: .02em;
}
.brand__text { min-width: 0; }
.brand__name { display: block; font: 600 16px/1.1 'Golos Text'; color: var(--text); letter-spacing: -.005em; }
.brand__sub { margin-top: 2px; font: 400 12.5px/1.1 'Golos Text'; color: var(--text-faint); }
/* display у .nav / .head-actions / .lane-arrows задаёт только media (десктоп);
   по умолчанию их скрывает .only-desktop — иначе base-правило перебивало бы его. */
.nav { align-items: center; gap: 26px; }
.nav a { font: 500 14.5px 'Golos Text'; color: #55524C; text-decoration: none; }
.nav a:hover { color: var(--accent); }
.head-actions { align-items: center; gap: 10px; flex: none; }

/* --- Прогресс-бар прокрутки --- */
.progress { height: 3px; background: #EDE7DE; }
.progress__bar { width: 3%; height: 100%; background: var(--accent); transition: width .12s linear; }

/* --- Липкая нижняя панель (мобильный) --- */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: #fff;
  border-top: 1px solid #E7E2DA; box-shadow: 0 -6px 20px -6px rgba(31, 30, 28, .10);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.mbar__inner { display: flex; gap: 8px; max-width: 520px; margin: 0 auto; }
.mbar__btn {
  flex: 1; height: 54px; border-radius: 13px; background: #fff; border: 1px solid var(--border);
  color: var(--text); text-decoration: none; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; font: 600 12.5px 'Golos Text';
}
.mbar__btn .ic { color: var(--accent); }
.mbar__btn:active { background: var(--tint-2); }
.mbar__btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.mbar__btn--accent .ic { color: #fff; }
.mbar__btn--accent:active { background: var(--accent-deep); }

/* --- Поп-ап «Позвонить» --- */
.popup { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 24px; }
.popup[hidden] { display: none; }
.popup__overlay { position: absolute; inset: 0; background: rgba(31, 30, 28, .5); }
.popup__card {
  position: relative; width: 100%; max-width: 420px; background: #fff; border-radius: 22px;
  padding: 24px 22px 22px; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .4);
}
.popup__head { display: flex; justify-content: space-between; align-items: flex-start; }
.popup__title { margin-top: 6px; font: 600 21px/1.1 'Golos Text'; color: var(--text); }
.popup__x {
  flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.popup__row { margin-top: 18px; display: flex; gap: 8px; align-items: center; }
.popup__input {
  flex: 1; min-width: 0; height: 54px; border: 1px solid var(--border); border-radius: 13px;
  background: var(--bg); padding: 0 16px; font: 600 19px 'Golos Text'; color: var(--text);
}
.popup__copy {
  flex: none; height: 54px; padding: 0 18px; border: none; border-radius: 13px;
  background: var(--accent); color: #fff; font: 600 15px 'Golos Text'; cursor: pointer; white-space: nowrap;
}
.popup__copy.is-copied { background: #3B7A57; }
.popup__dial { margin-top: 12px; width: 100%; height: 50px; border-radius: 13px; }

/* ==========================================================================
   Десктоп (≥900px) — каркас
   ========================================================================== */
@media (min-width: 900px) {
  .container { padding: 0 40px; }
  .section { padding-top: 72px; }
  .h2 { font-size: 30px; }
  .brand__sub.only-desktop { display: block; }
  .nav.only-desktop { display: flex; }
  .head-actions.only-desktop { display: flex; }
}

/* ==========================================================================
   Главная страница
   ========================================================================== */

/* Текстура-заглушка для пустых фото-рамок (как в дизайне) */
.photo-frame, .proj-cover {
  background: repeating-linear-gradient(135deg, #F2EFEA 0 10px, #ECE8E1 10px 20px);
}

.home { padding-top: 4px; }

/* --- Hero (десктоп) --- */
.hero-d { grid-template-columns: 384px minmax(0, 1fr); gap: 56px; align-items: center; }
.hero-d__photo { background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 10px; box-shadow: var(--shadow-card); }
.photo-frame { aspect-ratio: 4/5; border-radius: 15px; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.photo-frame__ph { font: 500 12px ui-monospace, Menlo, monospace; letter-spacing: .08em; color: #A79F92; text-transform: uppercase; }
.stat-badges { display: flex; gap: 9px; margin-bottom: 18px; }
.stat { font: 500 13px/1 'Golos Text'; color: #55524C; background: var(--tint-2); border: 1px solid #E7E2D9; border-radius: 999px; padding: 7px 13px; }
.hero-name { margin: 0; font: 700 44px/1.08 'Golos Text'; color: var(--text); letter-spacing: -.02em; }
.hero-spec { margin-top: 12px; font: 500 21px/1.35 'Golos Text'; color: var(--text); }
.hero-spec__city { color: var(--text-muted); font-weight: 400; }
.hero-about { margin: 20px 0 0; max-width: 60ch; font: 400 18px/1.62 'Golos Text'; color: var(--text-body); }
.trust-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.trust { display: inline-flex; align-items: center; gap: 8px; font: 500 14.5px 'Golos Text'; color: #38352F; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 9px 15px 9px 12px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* --- Hero (мобильный) --- */
.hero-m { background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card); }
.photo-frame--m { border-radius: 0; }
.hero-m__body { padding: 18px 18px 20px; }
.hero-name--m { font: 600 25px/1.15 'Golos Text'; letter-spacing: -.01em; }
.hero-spec--m { margin-top: 6px; font: 500 16px/1.4 'Golos Text'; }
.hero-city { margin-top: 2px; font: 400 15px/1.4 'Golos Text'; color: var(--text-muted); }
.hero-about--m { margin: 14px 0 0; font: 400 16px/1.62 'Golos Text'; color: var(--text-body); }

/* --- Услуги --- */
.svc-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.svc-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px 17px; box-shadow: 0 1px 2px rgba(31, 30, 28, .04); }
.svc-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--tint); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 13px; }
.svc-name { font: 600 16px/1.25 'Golos Text'; color: var(--text); }
.svc-desc { margin-top: 5px; font: 400 13.5px/1.45 'Golos Text'; color: var(--text-muted); }
/* «И другие работы — спрашивайте!» — плашка под сеткой услуг, ведёт к контактам */
.svc-more {
  margin-top: 10px;  /* = меж­рядный gap сетки услуг (мобильный) */
  min-height: 92px;  /* вдвое выше исходного (~46px) */
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 14px; border: 1px dashed #D8D1C5; border-radius: 14px;
  color: var(--accent-deep); font: 500 14.5px 'Golos Text'; text-decoration: none;
}
.svc-more:hover { background: var(--tint); border-color: #D7B9AC; }

/* --- Общая шапка секции с каруселью --- */
.proj-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.proj-head__actions { display: flex; align-items: center; gap: 14px; flex: none; font: 500 14px 'Golos Text'; color: var(--accent-deep); }
.lane-arrows { gap: 8px; }

/* --- Проекты --- */
/* Карточки — одинаковой высоты (align-items:stretch по умолчанию): высоту
   ленты задаёт карточка с самой высокой «шапкой» (длинный заголовок + локация),
   а описание (.proj-desc, flex:1) дотягивает остальные — где шапка короче, там
   строк описания больше. Так нет пустого зазора над бордером CTA. */
.proj-lane { margin-top: 20px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.proj-card { flex: none; width: 230px; display: flex; flex-direction: column; scroll-snap-align: start; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); }
.proj-card:hover { border-color: #D7B9AC; box-shadow: 0 6px 20px -10px rgba(31, 30, 28, .28); }
.proj-cover { position: relative; aspect-ratio: 16/11; }
.proj-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proj-tag { position: absolute; top: 10px; left: 10px; font: 600 11.5px 'Golos Text'; color: var(--accent-deep); background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 5px 11px; }
.proj-open { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(31, 30, 28, .18); }
.proj-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 14px 15px 15px; }
.proj-title { font: 600 17px/1.25 'Golos Text'; color: var(--text); }
.proj-loc { margin-top: 6px; display: flex; align-items: center; gap: 5px; font: 400 13px 'Golos Text'; color: var(--text-faint); }
/* Описание заполняет остаток карточки (flex:1), поэтому число видимых строк
   зависит от высоты «шапки»: короткий заголовок без локации → строк больше.
   min-height ≈ 2 строки — гарантия описания даже у самой «шапкастой» карточки
   (она и задаёт общую высоту ленты). Если текст не поместился — JS вешает
   .is-clamped, и последняя строка мягко уходит в градиент цвета карточки (#fff):
   виден намёк на продолжение, без «…» и кнопок. */
.proj-desc {
  position: relative;
  flex: 1 1 0; min-height: 2.9em;   /* растягиваем; низ описания ровняет карточки */
  margin-top: 9px; margin-bottom: 14px;
  overflow: hidden;
  font: 400 13.5px/1.45 'Golos Text'; color: #5E5A52;
}
.proj-desc.is-clamped::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.7em; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 88%);
}
/* Без margin-top:auto — иначе auto-margin съел бы свободное место раньше, чем
   flex-grow описания, и .proj-desc не растянулось бы. CTA и так внизу: описание
   заполняет остаток. */
.proj-open-cta { padding-top: 12px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 6px; font: 600 13px 'Golos Text'; color: var(--accent-deep); }

/* --- Отзывы --- */
.rev-rating { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.rev-rating__num { font: 700 22px/1 'Golos Text'; color: var(--text); letter-spacing: -.015em; }
.rev-rating__stars { display: flex; gap: 2px; }
.rev-rating__meta { font: 400 14px 'Golos Text'; color: var(--text-faint); }
.rev-lane { margin-top: 20px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.rev-card { flex: none; width: 284px; height: 311px; display: flex; flex-direction: column; scroll-snap-align: start; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-sm); }
.rev-card__head { display: flex; align-items: center; gap: 11px; }
.rev-stars { flex: none; display: flex; gap: 1px; }
.rev-star { color: var(--border); display: inline-flex; }
.rev-star.is-on { color: var(--accent); }
.rev-ava { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--tint); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; font: 600 15px 'Golos Text'; text-transform: uppercase; }
.rev-meta { min-width: 0; flex: 1; }
.rev-name { font: 600 15px/1.2 'Golos Text'; color: var(--text); }
.rev-date { margin-top: 2px; font: 400 12.5px 'Golos Text'; color: var(--text-faint); text-transform: capitalize; }
.rev-text { position: relative; flex: 1 1 auto; overflow: hidden; margin: 13px 0 0; font: 400 14.5px/1.55 'Golos Text'; color: var(--text-body); }
.rev-text::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 88%); pointer-events: none; }
.rev-more { flex: none; align-self: flex-start; margin-top: 12px; display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; cursor: pointer; font: 600 13px 'Golos Text'; color: var(--accent-deep); }
.rev-more[hidden] { display: none; }
.rev-more:hover { text-decoration: underline; }
.rev-foot { flex: none; margin-top: 13px; padding-top: 14px; border-top: 1px solid var(--border-soft); }

/* Поп-ап полного отзыва */
.popup__card--rev { max-width: 460px; }
.rvp__head { display: flex; align-items: center; gap: 12px; }
.rvp__id { min-width: 0; flex: 1; }
.rvp__stars { margin-top: 14px; display: flex; gap: 3px; }
.rvp__star { color: var(--border); }
.rvp__star.is-on { color: var(--accent); }
.rvp__text { margin: 13px 0 0; font: 400 15px/1.6 'Golos Text'; color: var(--text-body); max-height: 46vh; overflow-y: auto; }
.rvp__project { margin-top: 16px; display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--tint); border-radius: 12px; color: var(--text-body); font: 600 13.5px 'Golos Text'; }
.rvp__project .ic { flex: none; color: var(--accent-deep); }

/* --- Гарантии --- */
.guar-lead { margin-top: 9px; max-width: 60ch; font: 400 16px/1.55 'Golos Text'; color: #5E5A52; }
.guar-grid { margin-top: 22px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.guar-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-sm); }
.guar-icon { width: 48px; height: 48px; border-radius: 13px; background: var(--tint); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.guar-title { font: 600 17px/1.25 'Golos Text'; color: var(--text); }
.guar-desc { margin-top: 6px; font: 400 14px/1.55 'Golos Text'; color: #5E5A52; }

/* --- Контакты / призыв --- */
.home__contacts { padding-bottom: 110px; }
.cta-card { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 22px 18px; box-shadow: var(--shadow-sm); text-align: center; }
.cta-title { font: 700 24px/1.15 'Golos Text'; color: var(--text); letter-spacing: -.015em; }
.cta-lead { margin: 12px auto 0; max-width: 46ch; font: 400 16px/1.55 'Golos Text'; color: #5E5A52; }
.cta-actions { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cta-geo { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 7px; font: 400 14px/1.4 'Golos Text'; color: var(--text-faint); }
.home__signature { margin-top: 20px; text-align: center; font: 400 13px/1.5 'Golos Text'; color: #A79F92; }

/* --- Пустое состояние (нет данных) --- */
.empty { margin-top: 20px; background: #fff; border: 1px dashed var(--border); border-radius: 16px; padding: 20px; font: 400 15px 'Golos Text'; color: var(--text-muted); }

/* ==========================================================================
   Десктоп (≥900px) — главная
   ========================================================================== */
@media (min-width: 900px) {
  .hero-d.only-desktop { display: grid; }
  .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .svc-more { margin-top: 16px; }  /* = меж­рядный gap сетки услуг (десктоп) */
  .lane-arrows.only-desktop { display: flex; }
  .proj-card { width: 320px; }
  .rev-card { width: 340px; }
  .rev-rating__num { font-size: 30px; }
  .guar-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .home__contacts { padding-bottom: 90px; }
  .cta-card { padding: 52px 96px; }
  .cta-title { font-size: 34px; }
}

/* ==========================================================================
   Страница проекта
   ========================================================================== */
.ba__tile, .gal-tile {
  background: repeating-linear-gradient(135deg, #E6E5E0 0 11px, #DEDDD6 11px 22px);
}
.project { padding-bottom: 110px; }

/* breadcrumb */
.crumb { padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crumb__back { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 10px; border-radius: 11px; color: var(--text); text-decoration: none; font: 500 14.5px 'Golos Text'; border: 1px solid var(--border); background: #fff; }
.crumb__back:hover { background: var(--tint-2); }
.crumb__count { font: 500 12.5px 'Golos Text'; color: var(--text-faint); }

/* title */
.ptitle { margin-top: 20px; }
.ptag { display: inline-block; font: 600 12px 'Golos Text'; color: var(--accent-deep); background: var(--tint); border-radius: 999px; padding: 6px 13px; }
.ptitle__h { margin: 13px 0 0; font: 700 25px/1.12 'Golos Text'; color: var(--text); letter-spacing: -.02em; }
.ptitle__loc { margin-top: 9px; display: flex; align-items: center; gap: 6px; font: 400 15px 'Golos Text'; color: var(--text-faint); }

/* layout */
.pbody { margin-top: 28px; display: grid; grid-template-columns: 1fr; gap: 0; align-items: start; }
.pbody__main { min-width: 0; }

/* до / после */
.ba--after { margin-top: 24px; }
.ba__label { margin-bottom: 12px; font: 700 19px 'Golos Text'; letter-spacing: -.01em; }
.ba__label--before { color: var(--text-faint); }
.ba__label--after { color: var(--accent); }
.ba__lane { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; }
.ba__tile { flex: none; width: 264px; aspect-ratio: 4/3; scroll-snap-align: start; border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; }
.ba__tile img { width: 100%; height: 100%; object-fit: cover; }

/* поля проекта — общий вид рядов */
.fields-mobile { margin-top: 24px; background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.fields-mobile .pfield { display: flex; gap: 14px; padding: 14px 16px; border-top: 1px solid #EFEBE3; }
.fields-mobile .pfield:first-child { border-top: 0; }
.fields-mobile .pfield__k { flex: none; width: 96px; font: 400 13.5px/1.4 'Golos Text'; color: var(--text-faint); }
.fields-mobile .pfield__v { min-width: 0; flex: 1; font: 500 14px/1.45 'Golos Text'; color: var(--text); }

/* блоки описания/галереи/отзыва */
.pblock { margin-top: 28px; }
.pblock__head { display: flex; align-items: baseline; justify-content: space-between; }
.pblock__hint { font: 400 12.5px 'Golos Text'; color: #A79F92; }
.pdesc { margin: 11px 0 0; max-width: 66ch; font: 400 15px/1.62 'Golos Text'; color: var(--text-body); }

.gal-lane { margin-top: 14px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; }
.gal-tile { flex: none; width: 150px; aspect-ratio: 3/4; scroll-snap-align: start; border-radius: 14px; border: 1px solid var(--border); overflow: hidden; }
.gal-tile img { width: 100%; height: 100%; object-fit: cover; }

/* привязанный отзыв */
.lrev { margin-top: 14px; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-sm); }
.lrev__head { display: flex; align-items: center; gap: 12px; }
.lrev__ava { width: 46px; height: 46px; font-size: 16px; }
.lrev__stars { display: flex; gap: 2px; margin-left: auto; }
.lrev__text { margin: 14px 0 0; max-width: 64ch; font: 400 15px/1.55 'Golos Text'; color: var(--text-body); }
.lrev__tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.lrev__tag { font: 500 12.5px 'Golos Text'; color: var(--accent-deep); background: var(--tint); border-radius: 999px; padding: 7px 12px; }

/* навигация пред/след */
.pnav { margin-top: 30px; display: flex; gap: 12px; }
.pnav__item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; text-decoration: none; color: inherit; }
.pnav__item:hover { background: var(--tint-2); border-color: #D7B9AC; }
.pnav__item--next { justify-content: flex-end; }
.pnav__ico { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--tint); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.pnav__text { min-width: 0; }
.pnav__text--right { text-align: right; }
.pnav__label { display: block; font: 600 10px 'Golos Text'; letter-spacing: .1em; text-transform: uppercase; color: #A79F92; }
.pnav__name { display: block; margin-top: 2px; font: 600 14.5px/1.2 'Golos Text'; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pallbtn { margin-top: 22px; }

/* сайдбар (десктоп) */
.fields-side { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); }
.fields-side__title { padding: 14px 18px 12px; font: 600 11px 'Golos Text'; letter-spacing: .13em; text-transform: uppercase; color: var(--accent-deep); }
.fields-side .pfield { padding: 13px 18px; border-top: 1px solid #EFEBE3; }
.fields-side .pfield__k { font: 400 12.5px/1.3 'Golos Text'; color: var(--text-faint); }
.fields-side .pfield__v { margin-top: 4px; font: 500 14.5px/1.4 'Golos Text'; color: var(--text); }
.pcta { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-sm); }
.pcta__title { font: 600 17px/1.25 'Golos Text'; color: var(--text); }
.pcta__lead { margin: 7px 0 0; font: 400 13.5px/1.5 'Golos Text'; color: #5E5A52; }
.pcta .btn--block { margin-top: 14px; }
.pcta__row { margin-top: 10px; display: flex; gap: 10px; }
.pcta__row .btn { flex: 1; height: 46px; padding: 0 12px; font-size: 14px; }

/* ==========================================================================
   Десктоп (≥900px) — страница проекта
   ========================================================================== */
@media (min-width: 900px) {
  .project { padding-bottom: 80px; }
  .crumb { padding-top: 22px; }
  .ptitle__h { font-size: 44px; }
  .pbody { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
  .ba__label { font-size: 22px; }
  .ba__tile { width: 340px; }
  .gal-tile { width: 190px; }
  .lrev { padding: 22px; }
  .pdesc, .lrev__text { font-size: 17px; }
  .pbody__aside.only-desktop { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 90px; }
  /* «О проекте» — вровень с верхом первого фото (высота заголовка «Было» + отступ). Сдвиг на самом блоке фактов, чтобы при пустых фактах CTA не проваливался. */
  .pbody__aside.only-desktop .fields-side { margin-top: 39px; }
}

/* --- Фото клиента в привязанном отзыве (страница проекта) --- */
.lrev__result { margin-top: 17px; padding-top: 17px; border-top: 1px solid #EFEBE3; }
.lrev__result-label { font: 600 11px 'Golos Text'; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 11px; }
.lrev__photos { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2px; }
.lrev__photo { flex: none; width: 118px; aspect-ratio: 1/1; scroll-snap-align: start; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
.lrev__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Лайтбокс (крупный просмотр фото)
   ========================================================================== */
.is-zoomable { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox__overlay { position: absolute; inset: 0; background: rgba(20, 18, 16, .93); }
.lightbox__img { position: relative; z-index: 1; max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .7); }
.lightbox__close {
  position: absolute; top: 18px; right: 18px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .26); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, .14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox__nav[hidden], .lightbox__counter[hidden] { display: none; }
.lightbox__nav--prev { left: 18px; }
.lightbox__nav--next { right: 18px; }
.lightbox__counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2;
  color: #fff; font: 500 13px 'Golos Text'; background: rgba(0, 0, 0, .4); padding: 5px 12px; border-radius: 999px;
}
@media (max-width: 640px) {
  .lightbox__nav { width: 40px; height: 40px; font-size: 24px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}