/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   NAME — ремонт и отделка. Блоки 1–2.
   Токены и компоненты перенесены из брендбука «Ровно».
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* ───────── шрифт ───────── */
@font-face{
  font-family:'Evolventa';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/Evolventa-Regular.woff') format('woff');
}
@font-face{
  font-family:'Evolventa';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/Evolventa-Bold.woff') format('woff');
}

/* ───────── токены ───────── */
:root{
  /* палитра — маршрут 01 «Сигнальный» из брендбука */
  --orange:#FE4F02;
  --violet:#6239E2;
  --graphite:#1E1E23;
  --mist:#F6F7F9;
  --white:#FFFFFF;

  --line:rgba(30,30,35,.12);
  --line-d:rgba(255,255,255,.14);
  /* основной текст всегда плотный: выцветший серый читался дёшево */
  --ink-60:#1E1E23;
  --ink-40:rgba(30,30,35,.42);
  --w-60:rgba(255,255,255,.88);
  --muted:rgba(30,30,35,.62);   /* приглушённый остался только там, где он значит «неактивно» */

  /* ← одна точка правки шрифта */
  --font:'Evolventa', Arial, sans-serif;

  --ease:cubic-bezier(.32,.72,0,1);
  --r-shell:2rem;
  --r-pad:.375rem;
  --r-core:calc(var(--r-shell) - var(--r-pad));

  /* пропорции сняты с bushkovgroup при вьюпорте 1440:
     контейнер ~1370, поля ~35, вертикаль секций ~90-110, а не 150+ */
  /* Контейнер растёт вместе с экраном, а не стоит колом на 1368.
     Потолок взят под 27" (2560): на нём поля остаются ~180px, а сайт
     занимает экран, а не висит узкой полосой посреди пустоты.
     Длинные строки текста от этого не страдают — лиды ограничены в ch. */
  --wrap:min(92vw, 2200px);
  --gut:clamp(1.25rem, 2.6vw, 3rem);
  --sec-pad:clamp(4rem, 7vw, 9rem);   /* единое поле секции сверху и снизу */
  --panel-r:1.75rem;

  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
}

/* ───────── база ───────── */
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}

/* Корневой кегль растёт вместе с шириной окна — за ним тянется всё, что
   задано в rem: типографика, отступы, скругления, кнопки. Это и есть
   «сайт занимает экран» на большом мониторе. До 1440 база остаётся 16px,
   выше плавно доходит до 20px и останавливается: без потолка на 27"
   строка уезжает за сотню знаков и текст перестаёт читаться. */
html{
  font-size:clamp(16px, 8px + 0.6vw, 23px);
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font);
  font-size:1rem;
  line-height:1.62;
  color:var(--graphite);
  background:var(--white);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* зерно — фиксированный слой, не трогает скроллящийся контент */
body::after{
  content:"";
  position:fixed;inset:0;z-index:60;
  pointer-events:none;
  background-image:var(--noise);
  background-size:180px;
  opacity:.035;
  mix-blend-mode:multiply;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}

/* убирает задержку тапа и двойной тап-зум на интерактивных элементах */
a,button,label,summary,select,input[type="range"]{touch-action:manipulation}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.05}

:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:.35rem;
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* якорь из меню не должен загонять заголовок секции под шапку */
main > section{scroll-margin-top:var(--nav-h,5.75rem)}

/* ───────── вертикальный ритм ─────────
   Высоту секции задаёт контент, а не экран: тогда поле сверху и снизу
   у каждой секции одинаковое — --sec-pad. Растягивать секции до 100svh
   больше нельзя: при центрировании поле становится остатком места
   и у каждой секции разным. */
main > section > .wrap{width:100%}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--graphite);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 .75rem 0;
}
.skip:focus{left:0}

/* ───────── появление при скролле ─────────
   Прячем только если JS жив: класс .js ставится инлайном в <head>.
   Без JS и без IntersectionObserver контент виден сразу. */
.js .reveal{
  opacity:0;
  transform:translateY(2rem);
  filter:blur(6px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
  transition-delay:calc(var(--d, 0) * 80ms);
}
.js .reveal.is-in{opacity:1;transform:none;filter:none}

/* Кадры в парных блоках не выезжают, а раскрываются снизу вверх шторкой.
   Через clip-path намеренно: transform у этих картинок занят параллаксом,
   и вторая анимация на нём затёрла бы первую.

   Важно, что базовое состояние — ВИДИМОЕ, а обрезка живёт только внутри
   keyframes. Если наблюдатель сорвётся и класс .is-in не придёт,
   фотография просто останется на месте без анимации. Обратный порядок
   (спрятать в базе, показать по классу) однажды уже съел все кадры. */
.js .split-media.reveal,
.js .team-media.reveal,
.js .design-media.reveal,
.js .offer-media.reveal{opacity:1;filter:none;transform:none;clip-path:none}

/* Кадр наводится на резкость: приходит чуть приближённым и размытым и
   встаёт на место. Анимируется сама картинка, а не рамка, — рамка с тенью
   стоит неподвижно, двигается только изображение внутри неё.

   Масштаб задан отдельным свойством scale, а не в transform: transform у
   этих картинок занят параллаксом, и вторая запись затёрла бы первую.
   Свойство scale перемножается с transform, а не спорит с ним. */
.js .split-media.reveal.is-in img,
.js .team-media.reveal.is-in img,
.js .design-media.reveal.is-in img,
.js .offer-media.reveal.is-in img{
  /* без задержки намеренно: в паузе перед стартом действует первый кадр
     анимации, то есть кадр висел бы невидимым лишние доли секунды */
  animation:media-focus 1s var(--ease) both;
}
/* Прозрачности в кадрах нет намеренно. Пока фотография не попала в зону
   видимости, она показана как есть; в момент старта анимации первый кадр
   применяется мгновенно, и если бы там стоял opacity:0 — картинка сначала
   гасла бы в ноль и проявлялась заново. Именно этот скачок читался как
   рывок. Теперь кадр всегда на месте, меняется только резкость. */
@keyframes media-focus{
  from{scale:1.06;filter:blur(8px)}
  to{scale:1;filter:blur(0)}
}

@media (prefers-reduced-motion:reduce){
  .js .split-media.reveal.is-in img,
  .js .team-media.reveal.is-in img,
  .js .design-media.reveal.is-in img,
  .js .offer-media.reveal.is-in img{animation:none}
}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;filter:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ══════════════════════ КОМПОНЕНТЫ БРЕНДБУКА ══════════════════════ */

/* карточка без внешней обоймы: рамка вокруг рамки только утяжеляла */
.shell{border-radius:var(--r-shell)}
.core{
  border-radius:var(--r-shell);
  background:var(--white);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(30,30,35,.04);
  height:100%;
}

/* пилюля-кнопка с вложенным кружком */
.btn{
  display:inline-flex;align-items:center;gap:.75rem;
  border-radius:99px;
  padding:10px 25px;
  min-height:3rem;
  font-weight:700;font-size:1rem;letter-spacing:-.01em;
  white-space:nowrap;cursor:pointer;border:0;
  background:var(--orange);
  color:#fff;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.btn .ic{
  width:2rem;height:2rem;border-radius:99px;flex:none;
  background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s var(--ease), background .5s var(--ease);
}
.btn .ic svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{transform:translateY(-2px);box-shadow:0 1.25rem 2.25rem -1.25rem rgba(254,79,2,.85)}
.btn:hover .ic{transform:translate(3px,-1px) scale(1.05);background:rgba(255,255,255,.32)}
.btn:active{transform:scale(.98)}

.btn.ghost{
  background:transparent;color:var(--graphite);
  box-shadow:inset 0 0 0 1px rgba(30,30,35,.18);
}
.btn.ghost .ic{background:rgba(30,30,35,.07)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px rgba(30,30,35,.32), 0 1rem 2rem -1rem rgba(30,30,35,.35)}
.btn.ghost:hover .ic{background:rgba(30,30,35,.12)}

.btn.bare{padding-inline:1.4rem}
.btn.btn-sm{min-height:2.375rem;font-size:.9063rem;padding:10px 15px}
.btn.btn-sm .ic{width:1.75rem;height:1.75rem}
.btn.btn-block{width:100%;justify-content:space-between}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ РЁРђРџРљРђ в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.nav-wrap{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:1rem 0 0;
  transition:padding .5s var(--ease);
}
.nav-wrap.is-stuck{padding-top:.5rem}

/* пилюля стоит ровно в контентной колонке: её края совпадают с текстом
   первого экрана слева и с карточкой расчёта справа */
.nav{
  width:calc(100% - var(--gut) * 2);
  max-width:calc(var(--wrap) - var(--gut) * 2);
  margin-inline:auto;
  display:flex;align-items:center;gap:1.5rem;
  padding:.375rem .375rem .375rem 1.375rem;
  border-radius:99px;
  /* Стекло, а не белая плашка: сквозь пилюлю видно фотографию под ней.
     Держится это на blur — без него текст лёг бы прямо на кадр и поплыл.
     Насыщенность поднята, иначе размытое стекло сереет. */
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 .75rem 2rem -1rem rgba(30,30,35,.28);
  transition:box-shadow .5s var(--ease), background .5s var(--ease);
}
/* при скролле под шапку заезжает светлый контент — стекло чуть плотнее,
   чтобы навигация не терялась на белом */
.nav-wrap.is-stuck .nav{
  background:rgba(255,255,255,.78);
  box-shadow:inset 0 0 0 1px rgba(30,30,35,.08), 0 1rem 2.5rem -1rem rgba(30,30,35,.3);
}

.brand{display:flex;flex-direction:column;line-height:1;flex:none}
.brand-name{font-weight:700;font-size:1.0625rem;letter-spacing:.02em;text-transform:uppercase}
.brand-desc{
  font-size:.5313rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-40);margin-top:.1875rem;
}

.nav-links{display:flex;align-items:center;gap:.25rem;list-style:none;margin-inline:auto}
.nav-links > li > a{
  display:block;padding:.4375rem .6875rem;border-radius:99px;
  font-size:.9063rem;color:var(--graphite);   /* по стеклу серый читается плохо */
  transition:color .4s var(--ease), background .4s var(--ease);
}
.nav-links > li > a:hover{color:var(--orange);background:rgba(30,30,35,.06)}

.nav-side{display:flex;align-items:center;gap:1rem;flex:none}
.nav-phone{font-weight:700;font-size:.9063rem;white-space:nowrap;transition:color .4s var(--ease)}
.nav-phone:hover{color:var(--orange)}

/* бургер */
.burger{
  display:none;
  width:2.75rem;height:2.75rem;flex:none;
  border:0;background:transparent;cursor:pointer;
  position:relative;border-radius:99px;
}
.burger span{
  position:absolute;left:50%;width:1.25rem;height:1.5px;
  background:var(--graphite);border-radius:2px;
  transition:transform .5s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1){transform:translate(-50%,-6px)}
.burger span:nth-child(2){transform:translate(-50%,0)}
.burger span:nth-child(3){transform:translate(-50%,6px)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,0) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:translate(-50%,0) scaleX(.4)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translate(-50%,0) rotate(-45deg)}

/* мобильное меню */
.menu{
  position:fixed;inset:0;z-index:45;
  display:flex;flex-direction:column;justify-content:center;gap:2.5rem;
  padding:6rem var(--gut) 3rem;
  overscroll-behavior:contain;   /* прокрутка меню не утягивает страницу под ним */
  background:rgba(246,247,249,.86);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  backdrop-filter:blur(28px) saturate(150%);
  opacity:0;transition:opacity .45s var(--ease);
}
.menu.is-open{opacity:1}
.menu-list{list-style:none;display:flex;flex-direction:column;gap:.25rem}
.menu-list a{
  display:block;padding:.35rem 0;
  font-size:clamp(1.75rem,7vw,2.5rem);font-weight:700;letter-spacing:-.02em;
}
.menu-list li,.menu-foot{
  opacity:0;transform:translateY(1.5rem);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay:calc(var(--i) * 55ms);
}
.menu.is-open .menu-list li,.menu.is-open .menu-foot{opacity:1;transform:none}
.menu-foot{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem;padding-top:2rem;border-top:1px solid var(--line)}
.menu-phone{font-size:1.375rem;font-weight:700}

body.is-locked{overflow:hidden}

/* ══════════════════════ БЛОК 1 — ПЕРВЫЙ ЭКРАН ══════════════════════ */
/* фото — подложка всего экрана, шапка лежит поверх неё;
   контент в две колонки: слева текст, справа карточка расчёта */
.hero{
  position:relative;
  isolation:isolate;
  display:flex;align-items:center;
  min-height:100svh;            /* ровно экран: иначе снизу выглядывает полоса следующей секции */
  /* поле над карточкой (считая от шапки) равно полю под ней — секция дышит симметрично */
  padding:calc(var(--nav-h,5.75rem) + clamp(.875rem,1.5vw,1.25rem)) 0 clamp(.875rem,1.5vw,1.25rem);
  background:#0F0C0A;
  color:#fff;
}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}

/* Направляющие сетки поверх фотографии — приём с архитектурных портфолио:
   намекают, что за картинкой стоит проект, а не случайный кадр.
   Линии почти невидимы, их задача — снять ощущение пустого фото. */
.hero::before{
  content:"";
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:25% 100%;
  mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent);
}
@media (max-width:768px){.hero::before{background-size:50% 100%}}

/* ── слайдер интерьеров ──
   Кадры лежат стопкой, виден тот, у кого .is-on. Смена — длинная растяжка
   прозрачности, чтобы кадр «проявлялся», а не перещёлкивался. Поверх идёт
   медленный наезд (Ken Burns): картинка живёт всё время показа, поэтому
   первый экран не выглядит статичной подложкой. */
.hero-slides{position:absolute;inset:0}
.hero-slides .photo-real{
  opacity:0;
  transition:opacity 1.6s var(--ease);
  will-change:opacity,transform;
}
.hero-slides .photo-real.is-on{opacity:1}

.js .hero-slides .photo-real{transform:scale(1.06)}
.js .hero-slides .photo-real.is-on{
  animation:hero-zoom 9s linear forwards;
}
@keyframes hero-zoom{
  from{transform:scale(1.06)}
  to{transform:scale(1.14)}
}

@media (prefers-reduced-motion:reduce){
  .hero-slides .photo-real{transition:none;transform:none}
  .js .hero-slides .photo-real.is-on{animation:none;transform:none}
}

/* подсказка: экран не заканчивается на первом развороте.
   три шеврона гаснут книзу и «стекают» волной — как свайп в сторис */
.scroll-hint{
  position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);
  z-index:3;
  display:flex;flex-direction:column;align-items:center;
  color:#fff;
  transition:opacity .4s var(--ease);
}
.scroll-hint:hover{opacity:.75}
.scroll-hint span{
  display:block;
  margin-top:-.5rem;
  animation:hint-wave 1.8s var(--ease) infinite;
}
.scroll-hint span:nth-child(1){opacity:.75}
.scroll-hint span:nth-child(2){opacity:.45;animation-delay:.18s}
.scroll-hint span:nth-child(3){opacity:.2;animation-delay:.36s}
.scroll-hint svg{
  width:2.25rem;height:1.125rem;display:block;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
@keyframes hint-wave{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(.4375rem)}
}
@media (prefers-reduced-motion:reduce){.scroll-hint span{animation:none}}
/* на телефоне подсказка не нужна и лезет на кнопку карточки */
@media (max-width:860px){.scroll-hint{display:none}}

/* кнопки-призраки на фото: тёмная обводка тут не читается */
.hero .btn.ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.hero .btn.ghost .ic{background:rgba(255,255,255,.14)}
.hero .btn.ghost:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.42), 0 1rem 2rem -1rem rgba(0,0,0,.5)}
.hero .btn.ghost:hover .ic{background:rgba(255,255,255,.22)}

.hero-in{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 25rem;
  column-gap:clamp(2rem,4.5vw,4.5rem);
  align-items:center;
}

.hero-head{
  grid-column:1;grid-row:1;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(1rem,2vw,1.5rem);
  max-width:42rem;
}

/* надзаголовок: тонкая строка с чертой — задаёт городу место
   и отбивает заголовок от верхнего края */
.hero-kicker{
  display:flex;align-items:center;gap:.75rem;
  font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
  margin-bottom:clamp(1rem,1.6vw,1.5rem);
}
.hero-kicker::before{
  content:"";width:clamp(1.75rem,3vw,3.5rem);height:1px;flex:none;
  background:var(--orange);
}

.hero-title{
  /* Крупно, но не тяжело: обычное начертание вместо жирного. На таком
     кегле жир смотрится вывеской, а тонкая линия — дизайнерской работой.
     63px РїСЂРё 1440, 84px РїСЂРё 1920, 106px РїСЂРё 2560. */
  font-size:clamp(1.75rem,4.4vw,4.6rem);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.hero-title em{font-style:normal;color:var(--orange)}

.lead{color:rgba(255,255,255,.9);max-width:46ch;font-size:1.125rem}

.cta-row{display:flex;flex-wrap:wrap;gap:.75rem}

/* ЗАГЛУШКА ВМЕСТО ФОТО — градиент из брендбука.
   Ставишь реальное фото — удаляешь .photo и кладёшь <img class="photo-real"> */
.photo{
  position:absolute;inset:0;
  background:
    /* «оконный» тёплый ключевой свет */
    radial-gradient(64% 74% at 70% -6%, rgba(255,214,163,.78) 0%, rgba(255,182,116,.22) 42%, rgba(255,182,116,0) 70%),
    /* холодная подсветка от пола */
    radial-gradient(62% 52% at 2% 100%, rgba(150,178,210,.2) 0%, rgba(150,178,210,0) 74%),
    /* виньетка */
    radial-gradient(135% 115% at 55% 40%, rgba(0,0,0,0) 32%, rgba(0,0,0,.66) 100%),
    linear-gradient(146deg,#4A4034 0%,#2A231B 44%,#120F0A 100%);
}
/* обмерная сетка — проявляется только там, куда «падает свет» */
.photo::after{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.11) 0 1px, transparent 1px 4.5rem),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.11) 0 1px, transparent 1px 4.5rem);
  -webkit-mask-image:radial-gradient(72% 78% at 68% 4%, #000 0%, transparent 76%);
          mask-image:radial-gradient(72% 78% at 68% 4%, #000 0%, transparent 76%);
}
.photo-real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* затемнение: сильнее слева под текстом, к правому краю отпускает кадр */
.scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(15,12,10,.9) 0%, rgba(15,12,10,.74) 32%, rgba(15,12,10,.34) 58%, rgba(15,12,10,.5) 100%),
    linear-gradient(to top, rgba(15,12,10,.72) 0%, rgba(15,12,10,.15) 42%, rgba(15,12,10,.35) 100%);
}

/* факты — три равные плашки, ряд заканчивается ровно под заголовком.
   без кнопок это единственный объект под текстом, поэтому он крупный */
.hero-stats{
  align-self:stretch;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;
  margin-top:.75rem;
}
.hero-stats .stat{
  display:flex;flex-direction:column;justify-content:center;gap:.375rem;
  padding:1.375rem 1.5rem;
  border-radius:1.25rem;
  background:rgba(20,16,13,.42);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.hero-stats dt{font-weight:700;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.025em;line-height:1.05;color:#fff}
.hero-stats dd{font-size:.9375rem;line-height:1.35;color:rgba(255,255,255,.85)}

/* ── карточка «Сметный штаб» ── */
.calc{
  grid-column:2;grid-row:1;
  z-index:2;
  align-self:center;
  color:var(--graphite);          /* hero белый по тексту — карточка светлая, цвет возвращаем */
}
/* Карточка расчёта должна помещаться в экран целиком — иначе кнопка
   «Вызвать сметчика» уезжает за нижний край и первый экран выглядит
   обрезанным. Вертикальные интервалы поэтому привязаны не только к кеглю,
   но и к высоте окна: на низком экране карточка сама поджимается. */
.calc-core{
  display:flex;flex-direction:column;
  gap:clamp(.5rem, 1.1vh, 1rem);
  padding:clamp(1rem, 2vh, 1.5rem);
  box-shadow:0 2rem 4rem -1.5rem rgba(15,12,10,.6);
}
.calc .radios{gap:clamp(.25rem, .5vh, .3125rem)}
.calc .radio{padding:clamp(.35rem, .85vh, .5rem) .875rem}
.calc .field{gap:clamp(.3rem, .7vh, .5rem)}

/* подписи спокойные, без капса и разрядки: в карточке и так много элементов */
.calc-label{font-size:.875rem;color:var(--graphite)}
.calc-total{
  font-size:clamp(1.75rem,2.6vw,2.125rem);font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1;
  margin-top:-.625rem;
}
.calc-value{font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums}

.field{display:flex;flex-direction:column;gap:.5rem;border:0}
.field legend{padding:0}

/* select */
.select{position:relative}
.select select{
  appearance:none;-webkit-appearance:none;
  width:100%;padding:.6rem 2.5rem .6rem 1rem;
  border-radius:.75rem;border:0;
  background:var(--mist);
  box-shadow:inset 0 0 0 1px var(--line);
  font-weight:700;font-size:1rem;cursor:pointer;   /* меньше 16px — Safari зумит страницу на фокусе */
  transition:box-shadow .4s var(--ease);
}
.select select:hover{box-shadow:inset 0 0 0 1px rgba(30,30,35,.28)}
.select-arrow{
  position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  width:1.125rem;height:1.125rem;pointer-events:none;
  fill:none;stroke:var(--ink-40);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* range */
.range{
  appearance:none;-webkit-appearance:none;
  width:100%;height:1.25rem;background:transparent;cursor:pointer;
}
.range::-webkit-slider-runnable-track{height:.25rem;border-radius:99px;background:linear-gradient(var(--orange),var(--orange)) 0/var(--fill,25%) 100% no-repeat, rgba(30,30,35,.12)}
.range::-moz-range-track{height:.25rem;border-radius:99px;background:rgba(30,30,35,.12)}
.range::-moz-range-progress{height:.25rem;border-radius:99px;background:var(--orange)}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:1.25rem;height:1.25rem;border-radius:99px;margin-top:-.5rem;
  background:var(--white);
  box-shadow:0 0 0 3px var(--orange) inset, 0 .25rem .625rem rgba(30,30,35,.28);
  transition:transform .3s var(--ease);
}
.range::-moz-range-thumb{
  width:1.25rem;height:1.25rem;border-radius:99px;border:0;
  background:var(--white);
  box-shadow:0 0 0 3px var(--orange) inset, 0 .25rem .625rem rgba(30,30,35,.28);
}
.range:hover::-webkit-slider-thumb{transform:scale(1.12)}

/* radio-строки */
.radios{display:flex;flex-direction:column;gap:.3125rem}
.radio{
  display:flex;align-items:center;gap:.625rem;
  padding:.5rem .875rem;border-radius:.75rem;
  font-size:.9375rem;font-weight:700;cursor:pointer;
  background:var(--mist);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease);
}
.radio input{position:absolute;opacity:0;width:0;height:0;font-size:1rem}
.radio .mark{
  width:1rem;height:1rem;border-radius:99px;flex:none;
  box-shadow:inset 0 0 0 1.5px rgba(30,30,35,.3);
  transition:box-shadow .4s var(--ease);
}
.radio:hover{box-shadow:inset 0 0 0 1px rgba(30,30,35,.24)}
.radio:has(input:checked){
  background:rgba(254,79,2,.09);
  box-shadow:inset 0 0 0 1px rgba(254,79,2,.5);
}
.radio:has(input:checked) .mark{box-shadow:inset 0 0 0 5px var(--orange)}
.radio:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.375rem}
.chip{cursor:pointer}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:block;
  padding:.5rem .875rem;border-radius:99px;
  font-size:.875rem;font-weight:700;
  background:var(--mist);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease);
}
.chip:hover span{box-shadow:inset 0 0 0 1px rgba(30,30,35,.26)}
.chip:has(input:checked) span{background:var(--graphite);color:#fff;box-shadow:none}
.chip:has(input:focus-visible) span{outline:2px solid var(--orange);outline-offset:2px}

/* срок — строкой, без плашки: это следствие расчёта, а не отдельный блок */
.calc-meta{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-top:.875rem;border-top:1px solid var(--line);
  font-size:.9375rem;
}
.calc-meta b{font-weight:700;font-variant-numeric:tabular-nums}

.calc-note{
  margin-top:-.375rem;
  font-size:.875rem;line-height:1.45;color:var(--ink-40);text-align:center;
}
.calc .btn{min-height:3rem}

/* ══════════════════════ БЛОК 2 — ПОЧЕМУ МЫ ══════════════════════ */
.reasons{background:var(--mist);padding:var(--sec-pad) 0}

/* шапка секции всегда по центру — так секции читаются как единый ритм */
/* Поле под заголовком секции. Крупный заголовок требует больше воздуха
   под собой, иначе следующий блок липнет к нему и композиция сжимается. */
.sec-head{
  display:flex;flex-direction:column;align-items:center;gap:1.25rem;
  margin-bottom:clamp(2.5rem,4.5vw,4.5rem);
  max-width:min(100%,56rem);margin-inline:auto;   /* заголовок секции влезает в одну строку */
  text-align:center;
}
.sec-title{font-size:clamp(1.75rem,3.6vw,4rem);letter-spacing:-.025em;text-wrap:balance}
.sec-lead{color:var(--ink-60);max-width:62ch}

.reasons-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.reason{transition:transform .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease)}
/* карточка живёт по трём этажам: иконка, крупный заголовок, описание внизу.
   auto-отступ разводит заголовок и текст, поэтому описания стоят на одной линии */
.reason .core{
  display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem;
  min-height:17rem;
  padding:clamp(1.75rem,2.6vw,2.25rem);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 .625rem 1.75rem -.875rem rgba(30,30,35,.18);
}
.reason-ic{
  display:flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;flex:none;
  color:var(--orange);
  transition:transform .6s var(--ease);
}
.reason-ic svg{
  width:2.75rem;height:2.75rem;
  fill:none;stroke:currentColor;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round;
}
.reason h3{font-size:clamp(1.25rem,1.9vw,1.625rem);letter-spacing:-.02em;line-height:1.15;margin-bottom:auto}
.reason p{font-size:1rem;line-height:1.6;color:var(--ink-60)}

/* первая причина — тёмная: блоку нужен якорь, иначе шесть равных плашек читаются как обои */
.reason.is-dark{background:rgba(30,30,35,.1)}
.reason.is-dark .core{
  background:var(--graphite);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1rem 2.5rem -1rem rgba(30,30,35,.5);
}
.reason.is-dark h3{color:#fff}
.reason.is-dark p{color:rgba(255,255,255,.85)}

.reason:hover{
  transform:translateY(-4px);
  background:rgba(30,30,35,.08);
  box-shadow:inset 0 0 0 1px rgba(30,30,35,.11);
}
.reason.is-dark:hover{background:rgba(30,30,35,.16)}
.reason:hover .reason-ic{transform:translateY(-2px)}

/* ══════════════════════ ОБЩЕЕ ДЛЯ СЕКЦИЙ ══════════════════════ */
.sec-head-center{align-items:center;text-align:center;margin-inline:auto}

/* Тёмные секции: плоская заливка выглядит дешёвым прямоугольником.
   Мягкое тёплое свечение сверху слева даёт объём и подхватывает
   фирменный оранжевый, не превращая секцию в цветную. */
.dark{
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(254,79,2,.09), transparent 58%),
    var(--graphite);
  color:#fff;
}
.dark .sec-title,.dark h2,.dark h3{color:#fff}
.dark p{color:var(--w-60)}
.dark .shell{background:transparent;box-shadow:none}
.dark .core{background:#26262c;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.dark .btn.ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ══════════════════════ БЛОК 3 — ЭТАПЫ ══════════════════════ */
.steps{padding:var(--sec-pad) 0}

/* таймлайн: колонка кружков по центру, шаги в зигзаг по сторонам линии */
.steps-line{
  --dot:3.25rem;
  --step-h:10rem;              /* один ритм для всех шагов: кружки идут через равные интервалы */
  position:relative;
  list-style:none;
  display:flex;flex-direction:column;
}
/* Линия живёт от центра первого кружка до центра последнего.
   Бледная — это рельс. Поверх него ::after заливает оранжевым ровно на ту
   долю, до которой человек долистал: путь по этапам рисуется на глазах. */
.steps-line::before,
.steps-line::after{
  content:"";
  position:absolute;z-index:0;
  left:50%;transform:translateX(-50%);
  top:calc(var(--dot) / 2);
  width:2px;                                     /* в толщину обводки кружка */
}
.steps-line::before{bottom:calc(var(--dot) / 2);background:rgba(254,79,2,.2)}
.steps-line::after{
  height:calc((100% - var(--dot)) * var(--go, 0));
  background:var(--orange);
  transition:height .25s linear;
}
@media (prefers-reduced-motion:reduce){
  .steps-line::after{height:calc(100% - var(--dot));transition:none}
}

.step{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--dot) minmax(0,1fr);
  column-gap:clamp(1.5rem,3.2vw,2.75rem);
  align-items:start;
  min-height:var(--step-h);
  padding-bottom:1rem;         /* воздух под последним шагом сверх ритма не нужен */
}
.step:last-child{min-height:0;padding-bottom:0}

.step-n{
  grid-column:2;grid-row:1;
  width:var(--dot);height:var(--dot);border-radius:99px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.125rem;line-height:1;
  color:var(--orange);
  background:var(--white);                       /* кружок перекрывает линию */
  box-shadow:inset 0 0 0 2px var(--orange);
}
/* нечётные шаги слева и текстом к линии, чётные — справа.
   верхний отступ ставит первую строку заголовка на ось кружка */
.step-txt{grid-column:1;grid-row:1;justify-self:end;text-align:right;max-width:34rem;padding-top:.5rem}
.step:nth-child(even) .step-txt{grid-column:3;justify-self:start;text-align:left}

.step h3{font-size:clamp(1.25rem,1.9vw,1.625rem);letter-spacing:-.02em;line-height:1.2;margin-bottom:.625rem}
.step p{font-size:1rem;line-height:1.6;color:var(--ink-60)}

/* ══════════════════════ БЛОК 4 — ПОРТФОЛИО ══════════════════════ */
.works{background:var(--mist);padding:var(--sec-pad) 0}

.works-tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.375rem;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
.wtab{
  border:0;cursor:pointer;
  padding:.5rem .875rem;border-radius:99px;
  font-size:.875rem;font-weight:700;
  background:transparent;color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease);
}
.wtab:hover{color:var(--graphite);box-shadow:inset 0 0 0 1px rgba(30,30,35,.26)}
.wtab.is-on{background:var(--graphite);color:#fff;box-shadow:none}

.works-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:11rem;
  gap:.75rem;
}
.wcell{
  position:relative;overflow:hidden;border-radius:1.25rem;
  background:rgba(30,30,35,.06);
  box-shadow:inset 0 0 0 1px rgba(30,30,35,.07);
}
.wcell img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.wcell:hover img{transform:scale(1.04)}
.wcell:first-child{grid-column:span 2;grid-row:span 2}

.wchip{
  position:absolute;left:.875rem;bottom:.875rem;
  display:flex;gap:1.25rem;
  padding:.75rem 1rem;border-radius:.75rem;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 .75rem 1.5rem -.75rem rgba(30,30,35,.4);
}
.wchip div{display:flex;flex-direction:column;gap:.125rem}
.wchip span{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40);font-weight:700}
.wchip b{font-size:1rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

.wall{
  position:absolute;right:.875rem;bottom:.875rem;
  padding:.625rem 1.125rem;border-radius:99px;
  font-size:.875rem;font-weight:700;
  background:rgba(255,255,255,.92);color:var(--graphite);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.wall:hover{background:#fff;transform:translateY(-2px)}

.works-empty{grid-column:1/-1;padding:3rem 1rem;text-align:center;color:var(--ink-40)}

.works-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1.125rem;
}
.works-addr{display:flex;align-items:center;gap:.5rem;font-size:1rem;color:var(--ink-60)}
.works-addr svg{width:1.125rem;height:1.125rem;flex:none;fill:none;stroke:var(--orange);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.works-nav{display:flex;align-items:center;gap:.625rem}
.works-count{font-size:.875rem;color:var(--ink-40);font-variant-numeric:tabular-nums}
.rnd{
  width:2.5rem;height:2.5rem;border-radius:99px;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--graphite);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease);
}
.rnd svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rnd:hover{box-shadow:inset 0 0 0 1px rgba(30,30,35,.3);transform:translateY(-1px)}
.rnd-on{background:var(--orange);color:var(--graphite);box-shadow:none}
.rnd-on:hover{box-shadow:0 .75rem 1.5rem -.75rem rgba(254,79,2,.8)}

/* ══════════════════════ БЛОК 5 — ТАРИФЫ ══════════════════════ */
.rates{padding:var(--sec-pad) 0}

.switch-row{display:flex;align-items:center;justify-content:center;gap:.875rem;margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.switch-lab{font-size:.9375rem;font-weight:700;color:var(--ink-40);transition:color .4s var(--ease)}
.switch-lab.is-on{color:var(--graphite)}
.switch{
  width:3.5rem;height:2rem;border-radius:99px;border:0;cursor:pointer;padding:.25rem;
  background:var(--graphite);position:relative;flex:none;
}
.switch .knob{
  display:block;width:1.5rem;height:1.5rem;border-radius:99px;background:#fff;
  transition:transform .5s var(--ease);
}
.switch[aria-checked="true"]{background:var(--orange)}
.switch[aria-checked="true"] .knob{transform:translateX(1.5rem)}

.rates-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.rate .core{
  --pad:clamp(1.375rem,2vw,1.75rem);
  display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;
  padding:0 var(--pad) var(--pad);
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 .625rem 1.75rem -.875rem rgba(30,30,35,.16);
}
/* полоса тянется ровно по ширине ядра и режется его скруглением */
/* цветная линия стоит под картинкой: у самого верха её края срезало скругление карточки */
.rate-cap{
  display:block;align-self:stretch;order:1;
  margin-inline:calc(var(--pad) * -1);
  margin-bottom:1.25rem;
  height:.375rem;background:var(--graphite);
}
.rate-pic{order:0}
.rate h3{order:2}
.rate-items{order:3}
.rate-price{order:4}
.rate .btn{order:5}
.rate[data-rate="capital"] .rate-cap{background:var(--orange)}
.rate[data-rate="design"] .rate-cap{background:var(--violet)}
/* картинка тарифа: тянется на всю ширину ядра, как и цветная полоса */
.rate-pic{
  align-self:stretch;
  margin-inline:calc(var(--pad) * -1);
  margin-bottom:1.25rem;
  width:calc(100% + var(--pad) * 2);max-width:none;   /* база режет img по max-width:100% */
  aspect-ratio:4/3;height:auto;
  object-fit:cover;            /* кадр уже 4:3, поэтому cover ничего не срезает */
  background:#E4E5E7;
}
.rate h3{font-size:clamp(1.25rem,1.9vw,1.625rem);letter-spacing:-.02em}
.rate-items{list-style:none;display:flex;flex-direction:column;gap:.5rem;font-size:1rem;line-height:1.45;color:var(--ink-60);padding-left:.125rem}
.rate-items li{position:relative;padding-left:.875rem}
.rate-items li::before{content:"";position:absolute;left:0;top:.55em;width:.3125rem;height:.3125rem;border-radius:99px;background:var(--orange)}
/* цена в две строки: старая сверху, актуальная снизу — обе от левого края карточки */
.rate-price{
  margin-top:auto;padding-top:1rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:.125rem;
}
.rate-price s{
  color:#C2113C;text-decoration-thickness:1px;
  font-size:.875rem;font-variant-numeric:tabular-nums;
}
.rate-now{display:flex;align-items:baseline;gap:.4375rem}
.rate-price i{font-style:normal;font-size:1rem;color:var(--ink-40)}
.rate-price b{
  font-size:clamp(1.75rem,2.6vw,2.125rem);line-height:1;letter-spacing:-.03em;
  color:var(--graphite);font-variant-numeric:tabular-nums;
}
.rate .btn{margin-top:1rem}

/* ══════════════════════ БЛОК 6 — ДИЗАЙН-ПРОЕКТ ══════════════════════ */
.design{padding:var(--sec-pad) 0}
.design-in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.design-txt{display:flex;flex-direction:column;align-items:flex-start;gap:1.125rem}
.design-title{font-size:clamp(1.75rem,3.6vw,4rem);letter-spacing:-.025em;text-wrap:balance}
.design-yes{font-weight:700;color:#fff!important}
.design-media .core{overflow:hidden;padding:0}
.design-media img{width:100%;height:100%;object-fit:cover;display:block}

/* ══════════════════════ БЛОК 7 — КОММЕРЧЕСКОЕ ПРЕДЛОЖЕНИЕ ══════════════════════
   раскладка повторяет дизайн-проект, только картинка слева */
/* Верх секции перетекает из цвета дизайн-проекта в собственный, более
   тёмный. Оттенки близкие, поэтому встык между ними читалась ровная
   горизонтальная полоса — «две панели друг на друге». Растяжка на 14rem
   идёт по S-кривой: у линейного градиента глаз ловит оба конца, там, где
   изменение начинается и где обрывается (полосы Маха). */
.offer{
  padding:var(--sec-pad) 0;
  /* свечения здесь нет намеренно: оно светлее graphite на два десятка
     единиц и на самом верху секции давало видимую ступеньку — ровно ту
     границу, которую убирал линейный переход. Свечения соседа хватает */
  background:
    linear-gradient(to bottom,
    #1E1E23 0,
    #1D1D22 1.4rem,
    #1C1C21 2.8rem,
    #1B1B20 5.6rem,
    #1A1A1F 8.4rem,
    #18181d 11.2rem,
    #17171b 14rem);
  background-repeat:no-repeat;
}
.offer-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.offer-txt{display:flex;flex-direction:column;align-items:flex-start;gap:1.125rem}
.offer-media .core{overflow:hidden;padding:0}
.offer-media img{width:100%;height:100%;object-fit:cover;display:block}

/* заглушка обложки: живёт ровно в пропорции будущей картинки */
.offer-ph{
  width:100%;aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px),
    linear-gradient(160deg,#33333c,#22222a);
}
.offer-ph span{
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
  padding:.5rem 1rem;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

/* ══════════════════════ БЛОК 8 — FAQ ══════════════════════ */
.faq{background:var(--mist);padding:var(--sec-pad) 0}
.faq-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2rem}
.faq-col{display:flex;flex-direction:column;gap:1rem}
.faq-i{
  border-radius:1.25rem;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(30,30,35,.08), 0 .5rem 1.25rem -.75rem rgba(30,30,35,.12);
  overflow:hidden;
}
.faq-i summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:.75rem;
  padding:1.25rem 1.5rem;
  font-size:1rem;font-weight:700;
}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{
  content:"";margin-left:auto;flex:none;
  width:.625rem;height:.625rem;
  border-right:1.6px solid var(--orange);border-bottom:1.6px solid var(--orange);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .4s var(--ease);
}
.faq-i[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq-i > div{padding:0 1.25rem 1.125rem}
.faq-i p{font-size:1rem;line-height:1.6;color:var(--ink-60)}

/* ══════════════════════ БЛОК 9 — МАТЕРИАЛЫ ══════════════════════ */
/* ══════════════════════ ПАРНЫЙ БЛОК: ТЕКСТ И КАДР ══════════════════════
   Один приём на материалы, партнёрство и клининг. Раньше каждая из этих
   секций растягивала фотографию на всю ширину и клала текст поверх под
   плотным скримом — кадр превращался в блёклую подложку, и все три блока
   выглядели одинаково никак. Теперь фотография показана честно, карточкой,
   а текст стоит рядом. Стороны чередуются, чтобы страница не гудела. */
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem);
  align-items:stretch;   /* кадр подстраивается под высоту текста, блок ровный */
}
.split-txt{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1.125rem}
.split-txt h2{font-size:clamp(1.625rem,2.9vw,2.5rem);letter-spacing:-.025em;line-height:1.15;text-wrap:balance}
.split-txt > p{color:var(--ink-60);font-size:1.125rem;line-height:1.6}
.dark .split-txt > p{color:var(--w-60)}

/* подпись-рубрика над заголовком */
.split-lab{
  font-size:.75rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);
}
.split-lab.is-hot{
  padding:.4rem .875rem;border-radius:99px;
  background:rgba(254,79,2,.12);
  box-shadow:inset 0 0 0 1px rgba(254,79,2,.35);
}

/* Высоту пары задаёт текстовая колонка, кадр её заполняет. Поэтому картинка
   вынута из потока: иначе высоту диктует она сама, и портретный снимок
   растягивает блок вдвое против соседнего текста. */
.split-media{
  position:relative;
  min-height:22rem;
  border-radius:var(--r-shell);
  overflow:hidden;
  box-shadow:0 2rem 4rem -2rem rgba(30,30,35,.5);
}
.split-media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
  /* слой заводится заранее — иначе первый кадр анимации уходит на его
     создание, и появление начинается с рывка */
  will-change:transform,scale,filter;
}
.split--flip .split-media{order:-1}   /* кадр слева */

/* Белый, а не mist: соседи слева и справа по странице — «6 причин» и
   «Наши работы», обе серые. Три серых секции подряд сливались в одну
   зону, и границы блоков переставали читаться. */
.materials{background:var(--white);padding:var(--sec-pad) 0}
/* карточка формы на белом фоне держится обводкой, а не заливкой */
.materials .mat-form{box-shadow:inset 0 0 0 1px rgba(30,30,35,.1), 0 1.5rem 3rem -1.5rem rgba(30,30,35,.28)}
.mat-txt{display:flex;flex-direction:column;gap:1rem}
.mat-txt h2{font-size:clamp(1.625rem,2.8vw,2.25rem);letter-spacing:-.025em;line-height:1.15;text-wrap:balance}
.mat-txt p{color:var(--ink-60);font-size:1.125rem;line-height:1.6}
.mat-form{
  display:flex;flex-direction:column;gap:.75rem;
  padding:clamp(1.5rem,2.2vw,1.75rem);border-radius:2rem;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(30,30,35,.08), 0 1.5rem 3rem -1.5rem rgba(30,30,35,.45);
}
.mat-q{font-size:1.125rem;font-weight:700;line-height:1.3;letter-spacing:-.015em;margin-bottom:.25rem}
.inp{
  width:100%;padding:.8rem 1rem;border-radius:.75rem;border:0;
  background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);
  font-size:1rem;                                  /* меньше 16px — Safari зумит страницу на фокусе */
  transition:box-shadow .4s var(--ease);
}
.inp::placeholder{color:var(--ink-40)}
.inp:hover{box-shadow:inset 0 0 0 1px rgba(30,30,35,.26)}
.inp:focus{outline:none;box-shadow:inset 0 0 0 2px var(--orange)}
.inp.is-bad{box-shadow:inset 0 0 0 2px #C2113C}
.mat-note{font-size:.875rem;line-height:1.45;color:var(--ink-40)}

/* ══════════════════════ БЛОК 10 — ПРОМО ══════════════════════ */
/* фото на всю ширину, поверх — оффер слева и состав уборки справа:
   та же схема, что на первом экране, поэтому акция читается как часть договора */
/* Белый по той же причине, что и материалы: сверху идут «Вопросы и ответы»
   на mist, и две серые секции подряд сливались в одну зону. */
.promo{background:var(--white);padding:var(--sec-pad) 0}
.promo-lead{font-size:1.125rem;line-height:1.6;color:var(--ink-60)}
.promo-list{list-style:none;display:flex;flex-direction:column;gap:.625rem;font-size:1rem;line-height:1.45}
.promo-list li{position:relative;padding-left:1.5rem}
.promo-list li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:.75rem;height:.4375rem;
  border-left:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:rotate(-45deg);
}
/* ценник лежит плашкой на самом кадре — так подарок читается сразу,
   а секция перестаёт быть «текст слева, фото справа» и получает акцент */
.promo-price{
  position:absolute;left:1.25rem;bottom:1.25rem;z-index:1;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem;
  padding:.875rem 1.25rem;border-radius:1.25rem;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  backdrop-filter:blur(14px) saturate(170%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 1rem 2rem -1rem rgba(30,30,35,.5);
  font-size:.9375rem;color:var(--ink-40);
}
.promo-price s{color:#C2113C;text-decoration-thickness:1px}
.promo-price b{font-size:1.875rem;line-height:1;letter-spacing:-.03em;color:var(--graphite)}

/* ══════════════════════ БЛОК 11 — КОНТАКТЫ ══════════════════════ */
.contacts{padding:var(--sec-pad) 0}

/* Карта раскрыта на всю ширину секции, реквизиты лежат на ней стеклянной
   карточкой. Раньше карта была зажата в узкую колонку рядом со списком —
   на ней не читались ни улицы, ни соседние ориентиры, ради которых карту
   и ставят. */
.contacts-in{position:relative;isolation:isolate}
.contacts-list{
  position:absolute;left:clamp(1rem,2.5vw,2.5rem);top:50%;transform:translateY(-50%);
  z-index:1;width:min(24rem,42%);
  display:flex;flex-direction:column;gap:1.25rem;
  padding:clamp(1.5rem,2.4vw,2rem);
  border-radius:var(--r-shell);
  background:rgba(30,30,35,.72);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 1.5rem 3rem -1.5rem rgba(0,0,0,.6);
}
.contacts-list dt{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:.375rem}
.contacts-list dd{font-size:1rem;line-height:1.55;color:rgba(255,255,255,.88)}
.contacts-list a{transition:color .4s var(--ease)}
.contacts-list a:hover{color:var(--orange)}

.map{
  position:relative;overflow:hidden;
  min-height:clamp(24rem,38vw,34rem);
  border-radius:var(--r-shell);
  background:#202027;
}
.map iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
  filter:grayscale(.15);          /* карта не перебивает палитру секции */
}

/* ══════════════════════════ ФУТЕР ══════════════════════════ */
/* нижняя вставка — под жест-бар айфона, иначе телефон в футере лежит под ним */
.foot{
  background:var(--graphite);color:#fff;
  padding:2rem 0 calc(2rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-d);
}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.foot .brand-desc{color:rgba(255,255,255,.45)}
.foot-copy{font-size:.875rem;line-height:1.5;color:rgba(255,255,255,.45)}
/* ссылка на политику должна читаться как ссылка, иначе её не найдут —
   а именно её ищут, когда решают, оставлять ли номер */
.foot-copy a{color:rgba(255,255,255,.75);text-underline-offset:.15em}
.foot-copy a:hover{color:var(--orange)}
.foot-phone{font-weight:700;font-size:1rem;transition:color .4s var(--ease)}
.foot-phone:hover{color:var(--orange)}

/* ══════════════════════════ АДАПТИВ ══════════════════════════ */

/* планшет: карточка расчёта уезжает под фото */
@media (max-width:1100px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-side{margin-left:auto}

  /* карточка расчёта уезжает под текст, фото остаётся подложкой всей секции */
  .hero{display:block;min-height:0;padding-bottom:clamp(3rem,6vw,4.5rem)}
  .hero-in{grid-template-columns:minmax(0,1fr);row-gap:clamp(1.75rem,4vw,2.5rem)}
  .hero-head{max-width:none}
  .lead{max-width:60ch}

  /* В одну колонку заголовок перестаёт делить строку с карточкой расчёта и
     может занять всю ширину — держать его на десктопном минимуме 28px здесь
     незачем: на телефоне это выглядело подписью, а не заголовком.
     Потолок 3rem состыкован с базовым правилом: на 1100px оба дают ~48px,
     поэтому на границе кегль не прыгает. Балансировка строк выключена —
     на узкой колонке она вывешивала одинокое «и» отдельной строкой.

     Крутой наклон 20vw работает только на телефонах: на 320px выражение
     даёт ровно нижнюю границу 32px, на 480px упирается в потолок 3rem, и
     дальше — планшет, десктоп, стык на 1100px — всё как было. Прибавка
     ложится ровно в диапазон 360–430, то есть на реальные телефоны.

     Прежние 10vw давали 39px на 390px, и это был потолок в две строки:
     строка «дизайн интерьера» занимала 346px из 350 доступных. Заголовок
     при этом проигрывал лиду — шесть строк по 16px весят вдвое больше
     двух строк по 39px, и первым в глаза бросался именно лид. Поэтому
     сознательно пускаем заголовок в три строки: масса важнее числа строк. */
  .hero-title{font-size:clamp(2rem, calc(20vw - 32px), 3rem);text-wrap:wrap}
  .br-lg{display:none}   /* перенос ставит сам браузер по фактической ширине */
  .calc{grid-column:1;grid-row:2}
  .scrim{background:linear-gradient(180deg, rgba(15,12,10,.86) 0%, rgba(15,12,10,.7) 45%, rgba(15,12,10,.82) 100%)}

  .reasons-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rates-grid{grid-template-columns:minmax(0,1fr);max-width:34rem;margin-inline:auto}
  .design-in{grid-template-columns:minmax(0,1fr)}

  /* на узком экране карточка не лезет поверх карты — уходит под неё */
  .contacts-list{
    position:static;transform:none;width:auto;
    margin-top:1rem;
  }
  .design-media{order:-1}
  .works-grid{grid-auto-rows:9rem}
  .offer-in{grid-template-columns:minmax(0,1fr)}
  .offer-ph{min-height:15rem}
}

/* таймлайн: зигзаг рассыпается на узких колонках — линия уходит влево */
@media (max-width:860px){
  .steps-line{--dot:2.75rem}
  .steps-line::before,
  .steps-line::after{left:calc(var(--dot) / 2)}
  /* в одну колонку ритм задаёт сам текст, фиксированная высота шага только мешает */
  .step{grid-template-columns:var(--dot) minmax(0,1fr);column-gap:1.125rem;min-height:0;padding-bottom:1.75rem}
  .step-txt{padding-top:.5rem}
  .step-n{grid-column:1;font-size:.9375rem}
  .step-txt,.step:nth-child(even) .step-txt{
    grid-column:2;justify-self:start;text-align:left;max-width:none;
  }
}

@media (max-width:820px){
  .nav-phone{display:none}
}

@media (max-width:768px){
  :root{--r-shell:1.5rem}

  .nav{padding-left:1.125rem}
  .hero{padding-top:calc(var(--nav-h,5.75rem) + 1.75rem)}

  /* пальцем в 40px не попадают: минимальная цель — 44px */
  .radio{padding-block:.6875rem}
  /* у строк в карточке расчёта свой вертикальный ритм, и он перебивал
     правило выше специфичностью — палец попадал в 38px */
  .calc .radio{padding-block:.6875rem}
  /* Дорожка ползунка тонкая, но брать её нужно пальцем, а не курсором.
     Отрицательные поля возвращают прежний вертикальный ритм карточки:
     зона нажатия остаётся 44px, а на глаз строка не раздувается. */
  .calc .range{height:2.75rem;margin-block:-.4375rem}
  .chip span{padding-block:.6875rem}
  .wtab{padding-block:.6875rem}
  .faq-i summary{padding-block:1.125rem}
  .rnd{width:2.75rem;height:2.75rem}
  .brand{padding-block:.5625rem}
  .wall{padding-block:.6875rem}
  .foot-phone,.contacts-list a,.menu-phone{display:inline-block;padding-block:.625rem}
  /* переключатель и ссылки-иконки: зона нажатия шире самого элемента */
  .switch{position:relative}
  .switch::after{content:"";position:absolute;inset:-.375rem -.5rem}
  .switch-lab{padding-block:.375rem}

  .reasons-grid{grid-template-columns:minmax(0,1fr)}
  .reason .core{min-height:0;gap:.875rem}   /* в один столбец разгон по высоте не нужен */
  /* Жёсткие переносы в заголовках карточек считались под три колонки:
     в одну ширины хватает, и <br> оставлял висеть обрывок вроде «своим».
     Делит браузер, balance выравнивает строки по длине. */
  .br-md{display:none}
  .reason h3{margin-bottom:0;text-wrap:balance}
  .reason:hover{transform:none}

  .faq-cols{grid-template-columns:minmax(0,1fr);gap:.75rem}

  .hero-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .hero-stats .stat{padding:.75rem 1rem}

  /* Все девять фильтров видны сразу, в несколько рядов. Горизонтальная лента
     прятала половину категорий за краем экрана: листать вбок догадывались
     не все, и «Косметический» с «Под ключ» просто не находили.
     Кегль и поля ужаты, чтобы ряды не съели пол-экрана. */
  .works-tabs{flex-wrap:wrap;justify-content:center;gap:.375rem}
  .wtab{padding:.75rem .6875rem;font-size:.8125rem}

  .map{min-height:15rem}                     /* заглушка карты занимала треть экрана */

  .works-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:8rem}
  .wcell:first-child{grid-column:span 2;grid-row:span 2}
  .wchip{left:.625rem;bottom:.625rem;gap:.875rem;padding:.625rem .75rem}
  .wall{right:.625rem;bottom:.625rem;padding:.6875rem .875rem;font-size:.875rem}
}

/* телефон: длинные подписи кнопок перестают распирать сетку */
@media (max-width:560px){
  /* На телефоне поле у края задаёт только --gut. Раньше сверху сидело ещё
     и ограничение контейнера в 92vw, и края съедали двойной отступ: на 320px
     под контент оставалось 254px из 320. От этого пилюля навигации не
     вмещала бренд, кнопку и бургер — бургер уезжал за экран, и меню
     становилось недоступным. */
  :root{--wrap:100%}

  .btn{
    white-space:normal;
    line-height:1.25;
    text-align:left;
    padding-block:.75rem;
  }

  /* Город снят: на телефоне первый экран весь уходит под заголовок и лид,
     и строка-надзаголовок только съедала верх, ничего не добавляя.
     На планшете и десктопе она осталась. */
  .hero-kicker{display:none}

  /* Кикер держал заголовок на расстоянии от пилюли навигации. Без него
     28px под шапкой мало: крупный заголовок начинал липнуть к стеклу. */
  .hero{padding-top:calc(var(--nav-h,5.75rem) + 2.5rem)}

  /* Лид уступает заголовку: 18px на узкой колонке давали семь строк подряд —
     стену текста, по массе спорившую с самим заголовком. */
  .lead{font-size:1rem;line-height:1.5}

  /* Плашки с фактами сняты с телефона: первый экран отдан заголовку и
     карточке расчёта, а три полосы между ними отодвигали калькулятор вниз.
     На планшете и десктопе они на месте — там места хватает и ряд стоит
     под заголовком, ничего не оттесняя. */
  .hero-stats{display:none}

  .calc-core{padding:1.25rem}

  /* Шесть карточек в один столбец — это лента почти на три экрана.
     Поля и иконка ужимаются, чтобы блок читался, а не пролистывался. */
  .reason .core{padding:1.5rem;gap:.75rem}
  .reason-ic,.reason-ic svg{width:2.25rem;height:2.25rem}

  /* Плашка на кадре: три колонки в исходном кегле не помещались в ширину
     телефона и разъезжались в три ряда — «Стоимость работ» уходила под
     «2 месяца». Кегль меньше, подписи не переносятся — всё встаёт в строку. */
  .wchip{gap:.75rem;padding:.5rem .75rem}
  .wchip span{font-size:.5625rem;letter-spacing:.06em;white-space:nowrap}
  .wchip b{font-size:.875rem;white-space:nowrap}

  /* «Показать все фото» шире половины сетки — кнопка ломалась на две строки.
     Растягиваем по ячейке: подпись встаёт в строку и не спорит с кадром. */
  .wall{left:.625rem;right:.625rem;text-align:center;font-size:.75rem;padding:.8125rem .5rem}
}

/* узкие телефоны: шапка перестаёт распирать вьюпорт бургером */
@media (max-width:480px){
  .nav{gap:.5rem;padding-left:1rem;padding-right:.375rem}
  .nav-side{gap:.5rem}
  .nav-side .btn.btn-sm .ic{display:none}
  .burger{width:2.75rem;margin-right:-.25rem}
  .brand-name{font-size:.9375rem}
  .brand-desc{font-size:.5rem}
}

@media (max-width:400px){
  /* на 320px бренд, кнопка и бургер делят 280px — без этого сжатия
     троице не хватает места и крайний элемент выдавливается за край */
  .brand-name{font-size:.875rem}
  /* девять фильтров на самом узком корпусе: ещё на шаг компактнее,
     иначе ряды разрастаются до четырёх */
  .wtab{padding-inline:.5625rem;font-size:.78125rem}
}

/* ══════════════════════ ПРИВЕТСТВИЕ В УГЛУ ══════════════════════
   Кружок с мастером и репликой. Этаж 55: выше шапки (50), но ниже
   просмотрщика фото (70) — иначе кружок висел бы поверх открытого кадра. */
.greet{
  position:fixed;
  right:clamp(.75rem,1.6vw,1.25rem);
  bottom:clamp(.75rem,1.6vw,1.25rem);
  z-index:55;
  display:flex;
}
/* без этого hidden не работает: display:flex выше по весу, чем [hidden] */
.greet[hidden]{display:none}
/* пока не показан — не ловит нажатия: прозрачный, но кликабельный
   угол экрана ловил бы нажатия по кнопкам под ним */
.greet:not(.is-in){pointer-events:none}

/* Мобильное меню лежит на этаже 45, ниже виджета, — без этого кружок
   висел бы поверх раскрытого меню. Класс is-locked вешают и меню,
   и просмотрщик фото, так что одно правило закрывает оба случая. */
body.is-locked .greet{opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}

/* Одна карточка, а не кружок с отдельным облачком реплики: аватар,
   подпись и вопрос лежат в общей плашке. Так виджет читается как
   строка чата, а не как всплывшая подсказка, и по нему понятно,
   что внутри разговор, а не реклама. */
.greet-in{
  display:flex;align-items:center;gap:.75rem;
  max-width:min(23rem, calc(100vw - 2.5rem));
  padding:.625rem 1rem .625rem .625rem;
  border-radius:1.25rem;
  background:var(--white);
  text-decoration:none;
  box-shadow:0 1.25rem 2.5rem -.75rem rgba(30,30,35,.32),
             inset 0 0 0 1px rgba(30,30,35,.07);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.greet-in:hover{
  transform:translateY(-2px);
  box-shadow:0 1.5rem 3rem -.75rem rgba(30,30,35,.38),
             inset 0 0 0 1px rgba(30,30,35,.12);
}

/* Появление в два такта: сперва подаётся плашка, следом внутри неё
   проступает текст. Одновременный выезд читался как «выехал баннер»,
   а нужно, чтобы это выглядело как подошедший человек.
   Уход быстрее прихода и без задержек: исчезновение никогда не должно
   заставлять ждать. Задержка живёт в состоянии is-in, поэтому
   на обратном ходу её нет. */
.greet-in,.greet-txt{
  opacity:0;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.greet-in{transform:translateY(.75rem) scale(.96);transform-origin:right bottom}
.greet-txt{transform:translateX(-.5rem)}

.greet.is-in .greet-in{
  opacity:1;transform:none;
  /* лёгкий перелёт: плашка «подаётся» вперёд, а не выплывает */
  transition:transform .55s cubic-bezier(.34,1.4,.64,1), opacity .3s var(--ease),
             box-shadow .4s var(--ease);
}
.greet.is-in .greet-txt{
  opacity:1;transform:none;
  transition:opacity .4s var(--ease) .18s, transform .5s var(--ease) .18s;
}

.greet-txt{
  display:flex;flex-direction:column;gap:.125rem;
  min-width:0;
  color:var(--graphite);
}

/* Имя, точка «на связи» и должность в одну строку. */
.greet-who{
  display:flex;align-items:center;gap:.4375rem;
  font-size:.8125rem;line-height:1.2;
}
.greet-who b{font-weight:700}
.greet-role{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Зелёная точка читается как «сейчас ответит». Единственный зелёный
   на сайте: в палитре его нет, потому что больше он нигде не нужен. */
.greet-dot{
  width:.4375rem;height:.4375rem;border-radius:50%;flex:none;
  background:#2FBF5C;
}

.greet-q{
  font-size:.9375rem;line-height:1.3;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Ладонь машет один раз при появлении и затихает: бесконечная анимация
   в углу экрана тянет взгляд на себя всё время чтения страницы. */
.greet-wave{
  flex:none;font-size:1.125rem;line-height:1;
  transform-origin:70% 80%;
}
.greet.is-in .greet-wave{animation:greet-wave 1.6s var(--ease) .5s 2}
@keyframes greet-wave{
  0%,60%,100%{transform:none}
  15%{transform:rotate(16deg)}
  30%{transform:rotate(-10deg)}
  45%{transform:rotate(12deg)}
}

/* Двойная обводка аватара — белая и оранжевая — не декор: виджет висит
   поверх произвольного места страницы, и без неё лицо сливалось с фото. */
.greet-pic{
  flex:none;
  width:clamp(2.5rem,3.4vw,2.875rem);aspect-ratio:1;
  border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 2px var(--white), 0 0 0 3.5px var(--orange);
}
.greet-pic img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:480px){
  /* На узком экране длинный вопрос упирался в край: режем должность,
     она вторична, а имя и вопрос должны читаться целиком. */
  .greet-role{display:none}
  .greet-in{gap:.625rem;padding:.5rem .875rem .5rem .5rem}
}

@media (prefers-reduced-motion:reduce){
  .greet.is-in .greet-wave{animation:none}
  .greet-in,.greet-txt{transition:opacity .2s linear}
  .greet-in{transform:none}
}

.greet-x{
  position:absolute;top:-.4375rem;right:-.4375rem;z-index:2;
  width:1.375rem;height:1.375rem;padding:0;border:0;border-radius:50%;
  background:var(--graphite);color:#fff;
  display:grid;place-items:center;cursor:pointer;
  opacity:0;transition:opacity .3s var(--ease);
}
.greet-x svg{width:.6875rem;height:.6875rem;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
.greet:hover .greet-x,.greet-x:focus-visible{opacity:1}
/* на тач-экранах наведения нет — крестик там виден всегда,
   иначе виджет невозможно закрыть */
@media (hover:none){.greet-x{opacity:1}}

/* На телефоне мера была почти во весь экран, и виджет растягивался от края
   до края — читался нижней панелью, а не репликой в углу. Держим слева
   свободное поле: угол должен оставаться углом. */
@media (max-width:560px){
  .greet-txt{
    font-size:.875rem;padding:.625rem .8125rem;
    max-width:min(15rem, calc(100vw - 8.5rem));
  }
}

/* при выключенной анимации виджет просто проявляется */
@media (prefers-reduced-motion:reduce){
  .greet-pic,.greet-txt,
  .greet.is-in .greet-pic,.greet.is-in .greet-txt{transform:none;transition:opacity .2s}
}

/* ══════════════════════ ПРОСМОТР ФОТО ══════════════════════ */
.lb{
  position:fixed;inset:0;z-index:70;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(.5rem,2vw,1.5rem);
  padding:clamp(1rem,3vw,2.5rem);
  background:rgba(10,8,7,.94);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .35s var(--ease);
  overscroll-behavior:contain;
}
.lb.is-open{opacity:1}

.lb-stage{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:.875rem;
  max-width:min(100%,72rem);max-height:100%;
  margin:0;
}
.lb-stage img{
  max-width:100%;max-height:calc(100svh - 9rem);
  width:auto;height:auto;
  border-radius:1.25rem;
  background:rgba(255,255,255,.06);
  transform:scale(.97);
  transition:transform .35s var(--ease);
}
.lb.is-open .lb-stage img{transform:none}

.lb-cap{
  display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;justify-content:center;
  font-size:.875rem;color:rgba(255,255,255,.72);
}
.lb-count{color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}

.lb-arrow,.lb-close{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:3rem;height:3rem;border-radius:99px;border:0;cursor:pointer;
  background:rgba(255,255,255,.1);
  color:#fff;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.lb-arrow:hover,.lb-close:hover{background:rgba(255,255,255,.2)}
.lb-arrow:active{transform:scale(.94)}
.lb-arrow svg,.lb-close svg{
  width:1.25rem;height:1.25rem;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.lb-close{position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);z-index:2}

/* фото в сетке кликабельно */
.wcell{cursor:zoom-in}

@media (prefers-reduced-motion:reduce){
  .lb,.lb-stage img{transition:none}
}

/* телефон: кадр во всю ширину, стрелки — строкой сразу под ним */
@media (max-width:768px){
  .lb{flex-wrap:wrap;align-content:center;gap:1.25rem;padding:1rem}
  .lb-stage{order:1;flex:0 0 100%}
  .lb-stage img{max-height:calc(100svh - 13rem)}
  .lb-prev{order:2}
  .lb-next{order:3}
  .lb-arrow{width:3.25rem;height:3.25rem}
}

/* ══════════════════════ БЛОК 12 — КОМАНДА ══════════════════════ */
.team{background:var(--mist);padding:var(--sec-pad) 0}

/* та же раскладка, что у дизайн-проекта: слева текст, справа кадр бригады.
   Карточек ролей нет — роли названы прямо в тексте, а пустые плашки
   под портреты рядом с живым кадром читались как недоделка */
/* Текст выровнен по центру кадров, а не по верху: рассказ короткий,
   кадров три, и при выравнивании по верху слева зияла пустая половина. */
.team-in{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:center;
}
.team-txt{display:flex;flex-direction:column;align-items:flex-start;gap:1.125rem}
.team-title{font-size:clamp(1.75rem,3.6vw,4rem);letter-spacing:-.025em;text-wrap:balance}
.team-yes{font-weight:700}   /* строка-вывод, как .design-yes в дизайн-проекте */
.team-media img{width:100%;height:100%;object-fit:cover;display:block}

/* ── кадры бригад: крупный сверху, миниатюры под ним ──
   Раскладка сама себя чинит: крупный кадр занимает всю строку, остальные
   делят следующую поровну. Пропорцию держит рамка, а не файл — кадры
   сняты в разное время и разного размера, общий 3:2 сводит их к одному.

   Именно 3:2, а не 4:3: три кадра столбиком в 4:3 вытягивали блок почти
   на 800px, вдвое выше текста рядом. Кадры перекадрированы под 3:2
   в файлах, а не обрезаны здесь по месту, — иначе cover рубил бы им
   головы вслепую. */
.team-media{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.5rem,.9vw,.875rem);
}

/* Рамка — кнопка, а не div с обработчиком: клавиатура, фокус и Enter
   достаются даром, руками их пришлось бы доделывать. */
.team-shot{
  position:relative;
  display:block;padding:0;border:0;background:none;
  aspect-ratio:3/2;
  border-radius:var(--r-shell);
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 .625rem 1.75rem -.875rem rgba(30,30,35,.28);
  transition:box-shadow .5s var(--ease);
}
.team-shot.is-lead{grid-column:1 / -1}
/* миниатюры мельче — и скругление у них мельче, иначе угол съедает кадр */
.team-shot:not(.is-lead){border-radius:calc(var(--r-shell) * .7)}

/* Затемнение и значок — единственный намёк, что кадр открывается.
   Наведение не трогает саму картинку: её transform занят параллаксом,
   и вторая запись затёрла бы первую. */
.team-shot::before{
  content:"";
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(15,12,10,0) 55%, rgba(15,12,10,.45));
  opacity:0;
  transition:opacity .5s var(--ease);
}
.team-shot::after{
  content:"";
  position:absolute;right:.75rem;bottom:.75rem;z-index:2;
  width:2.25rem;height:2.25rem;border-radius:50%;
  background:rgba(255,255,255,.92) center / 1rem 1rem no-repeat;
  /* лупа: инлайном, чтобы не тянуть отдельный файл ради одной иконки */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E23' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity:0;transform:translateY(.375rem);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.team-shot:hover{box-shadow:0 1.25rem 2.5rem -1rem rgba(30,30,35,.4)}
.team-shot:hover::before,.team-shot:focus-visible::before{opacity:1}
.team-shot:hover::after,.team-shot:focus-visible::after{opacity:1;transform:none}
.team-shot:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
/* на миниатюрах значок мельче — иначе он занимает четверть кадра */
.team-shot:not(.is-lead)::after{width:1.75rem;height:1.75rem;right:.5rem;bottom:.5rem;background-size:.8125rem .8125rem}

/* ══════════════════════ БЛОК 13 — ПАРТНЁРСТВО ══════════════════════ */
.partner{padding:var(--sec-pad) 0}

@media (max-width:1100px){
  /* схлопывание живёт здесь, а не в общем медиазапросе выше: базовые правила
     .team-* и .split объявлены ниже него, и при равной специфичности
     побеждали бы они */
  .team-in{grid-template-columns:minmax(0,1fr)}
  .team-media{order:-1}

  /* парные блоки в одну колонку, кадр всегда сверху — на узком экране
     сначала показываем картинку, потом рассказываем */
  .split{grid-template-columns:minmax(0,1fr)}
  /* пропорцию держит сама рамка: картинка внутри лежит абсолютом */
  .split-media{order:-1;min-height:0;aspect-ratio:16/10}
}

/* ══════════════════════ СТЫК СЕКЦИЙ ══════════════════════
   Стыки прямые: секции просто ложатся друг за другом, без нахлёста и
   скруглений. Скруглённый угол — признак карточки, а карточка читается
   как «лежит поверх»: от этого блоки выглядели наложенными друг на друга.
   Скругления на сайте остались только у карточек (--r-shell), у секций их нет.
   Обрезку фото по коробке секции держат сами .materials/.partner/.promo —
   у них свой overflow:hidden, класс-обёртка для этого больше не нужен. */


/* ══════════════════════ ОКНО ЗАЯВКИ И КВИЗ ══════════════════════
   Одна оболочка на два случая: быстрая заявка (.md) и опросник (.md--qz).
   Этаж 80 — выше приветствия (55) и просмотрщика фото (70): окно заявки
   всегда верхний слой, иначе кружок в углу лезет поверх формы.

   Своих чисел здесь нет, всё из общих шкал: карточка --r-shell,
   поля ввода .75rem, пилюли 99px, кегли из набора. */
.md{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(.75rem,3vw,2rem);
  background:rgba(10,8,7,.72);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .32s var(--ease);
  overscroll-behavior:contain;
}
.md[hidden]{display:none}
.md.is-open{opacity:1}

.md-card{
  position:relative;
  width:min(100%,30rem);
  /* dvh, а не vh: на телефоне адресная строка съезжает, и по vh низ
     карточки с кнопкой уходит под браузер */
  max-height:90vh;max-height:90dvh;
  display:flex;flex-direction:column;
  background:var(--white);
  box-shadow:0 2.5rem 5rem rgba(10,8,7,.32);
  overflow:hidden;
  transform:translateY(1rem) scale(.98);
  opacity:0;
  transition:transform .4s var(--ease), opacity .32s var(--ease);
}
.md--qz .md-card{width:min(100%,32rem)}
.md.is-open .md-card{transform:none;opacity:1}

.md-x{
  position:absolute;top:.75rem;right:.75rem;z-index:2;
  width:2.75rem;height:2.75rem;border-radius:99px;border:0;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(30,30,35,.06);color:var(--graphite);
  transition:background .35s var(--ease);
}
.md-x:hover{background:rgba(30,30,35,.12)}
.md-x svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.md-body,.md-done{
  display:flex;flex-direction:column;gap:.75rem;
  padding:clamp(1.5rem,4vw,2.25rem);
  overflow-y:auto;
  /* жест «назад» на айфоне цеплял край карточки и уводил со страницы */
  overscroll-behavior:contain;
}
.md-body[hidden],.md-done[hidden]{display:none}

.md-lab{
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);
}
.md-title{font-size:clamp(1.375rem,3vw,1.625rem);line-height:1.15;letter-spacing:-.02em}
.md-sub{font-size:1rem;line-height:1.5;color:var(--muted)}
.md-note{font-size:.875rem;line-height:1.45;color:var(--ink-40)}
.md-note.is-bad{color:#C2113C}
.md-note[hidden]{display:none}
.md-body .btn{margin-top:.25rem}

/* экран «принято» */
.md-done{align-items:flex-start;text-align:left}
.md-ok{
  width:3.5rem;height:3.5rem;border-radius:99px;
  display:grid;place-items:center;
  background:var(--orange);color:#fff;
}
.md-ok svg{width:1.75rem;height:1.75rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ── согласие на обработку ──
   Чекбокс, а не строчка «нажимая кнопку, вы соглашаетесь»: согласие
   на обработку персональных данных должно быть действием, а не
   умолчанием в мелком тексте под кнопкой. */
.agree{
  display:flex;align-items:flex-start;gap:.625rem;
  font-size:.875rem;line-height:1.45;color:var(--muted);
  cursor:pointer;
  /* палец попадает в строку целиком, а не в квадратик 20px */
  padding:.375rem 0;
}
.agree input{position:absolute;opacity:0;width:0;height:0}
.agree-box{
  width:1.25rem;height:1.25rem;border-radius:.375rem;flex:none;
  margin-top:.05rem;
  background:var(--white);
  box-shadow:inset 0 0 0 1.5px rgba(30,30,35,.3);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.agree input:checked + .agree-box{
  background:var(--orange);box-shadow:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size:.8rem;background-position:center;background-repeat:no-repeat;
}
.agree input:focus-visible + .agree-box{outline:2px solid var(--orange);outline-offset:2px}
.agree a{color:var(--graphite);text-underline-offset:.15em}
.agree.is-bad .agree-box{box-shadow:inset 0 0 0 2px #C2113C}

/* ловушка для ботов: не display:none — часть автозаполнялок такие поля
   пропускает. Уводим за экран, но для робота поле остаётся «настоящим» */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ══════════════════════ КВИЗ ══════════════════════ */
.qz-top{
  display:flex;align-items:center;gap:.75rem;
  padding:1.25rem clamp(1.5rem,4vw,2.25rem) .875rem;
  padding-right:4rem;                       /* место под крестик */
}
.qz-ava{
  width:2.75rem;height:2.75rem;border-radius:99px;flex:none;
  overflow:hidden;background:var(--mist);
}
.qz-ava img{width:100%;height:100%;object-fit:cover;display:block}
.qz-who{display:flex;flex-direction:column;line-height:1.25}
.qz-who b{font-size:1rem}
.qz-who i{font-style:normal;font-size:.875rem;color:var(--muted)}

.qz-bar{height:.25rem;background:var(--mist);flex:none}
.qz-bar span{
  display:block;height:100%;width:0;
  background:var(--orange);
  transition:width .45s var(--ease);
}

.qz-body{
  display:flex;flex-direction:column;gap:.75rem;
  padding:clamp(1.25rem,3.5vw,1.75rem) clamp(1.5rem,4vw,2.25rem);
  overflow-y:auto;overscroll-behavior:contain;
}

.qz-step{display:none;flex-direction:column;gap:.75rem}
.qz-step.is-on{display:flex}
/* шаг проявляется, а не подменяется рывком — резкая подмена читалась как сбой */
.js .qz-step.is-on{animation:qz-in .35s var(--ease) both}
@keyframes qz-in{from{opacity:0;transform:translateX(.75rem)}to{opacity:1;transform:none}}

.qz-q{font-size:clamp(1.25rem,2.6vw,1.5rem);line-height:1.2;letter-spacing:-.02em}
.qz-note{font-size:.9375rem;line-height:1.45;color:var(--muted)}

.qz-opts{display:grid;gap:.5rem;margin-top:.25rem}
.qz-opt{
  display:flex;align-items:center;gap:.75rem;
  min-height:3.25rem;                        /* тач-цель с запасом */
  padding:.75rem 1rem;border-radius:1rem;
  font-size:1rem;font-weight:700;cursor:pointer;
  background:var(--white);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.qz-opt input{position:absolute;opacity:0;width:0;height:0}
.qz-opt .mark{
  width:1.25rem;height:1.25rem;border-radius:99px;flex:none;
  background:var(--mist);
  box-shadow:inset 0 0 0 1.5px rgba(30,30,35,.28);
  transition:box-shadow .35s var(--ease), background .35s var(--ease);
}
.qz-opt:hover{box-shadow:inset 0 0 0 1px rgba(30,30,35,.28)}
.qz-opt:has(input:checked){
  background:rgba(254,79,2,.07);
  box-shadow:inset 0 0 0 2px var(--orange);
}
.qz-opt:has(input:checked) .mark{
  background:var(--orange);
  box-shadow:inset 0 0 0 .3rem var(--white), inset 0 0 0 1.5px var(--orange);
}
.qz-opt:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:2px}
.qz-t{flex:1}

.qz-area{font-size:2rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.qz-ends{display:flex;justify-content:space-between;font-size:.875rem;color:var(--ink-40)}

.qz-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:.5rem;padding-top:1rem;
  border-top:1px solid var(--line);
}
.qz-count{font-size:.875rem;color:var(--ink-40)}
.qz-nav{display:flex;align-items:center;gap:.625rem}
.qz-nav .rnd:disabled{opacity:.35;cursor:default}

/* «Далее» не должна прыгать по ширине при смене подписи на «Отправить
   заявку» — иначе низ окна дёргается на каждом шаге */
.qz-nav .btn{min-width:9.5rem;justify-content:space-between}

@media (max-width:560px){
  /* Окно прижато к низу: до кнопки дотягивается большой палец,
     а не приходится тянуться к середине экрана. */
  .md{align-items:flex-end;padding:0}
  .md-card{
    width:100%;max-height:92dvh;
    border-radius:var(--r-shell) var(--r-shell) 0 0;
    /* жест-бар айфона перекрывал кнопку отправки */
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(2rem);
  }
  .qz-nav .btn{min-width:0;flex:1}
  .qz-foot{gap:.75rem}
  .qz-count{white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  .md,.md-card{transition:none}
  .js .qz-step.is-on{animation:none}
  .qz-bar span{transition:none}
}


/* ── калькулятор: из чего сложился итог ──
   Строка «работы / материалы» под суммой. Без неё калькулятор («под ключ»)
   и тарифы («только работы») выглядят как два разных прайса на одной
   странице — а это первое, за что цепляется человек с деньгами. */
.calc-split{
  display:flex;flex-wrap:wrap;gap:.25rem 1rem;
  margin-top:-.25rem;
  font-size:.8125rem;line-height:1.4;color:var(--muted);
}
.calc-split b{font-weight:700;color:var(--graphite)}

/* та же мысль со стороны тарифов */
.rate-mat{
  font-size:.8125rem;line-height:1.4;color:var(--ink-40);
  margin-top:-.25rem;
}


/* ══════════════════════ ТАЧ-ЦЕЛИ ══════════════════════
   Норма Apple и Google: палец надёжно попадает в 44px. Сам элемент
   при этом растить нельзя, иначе поедет вёрстка, поэтому расширяем
   невидимую зону нажатия через ::after. Вид не меняется, промахов нет. */

/* Переключатель тарифов: 56x32, по высоте не добирал 12px. */
.switch{position:relative}
.switch::after{
  content:"";position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);
  height:2.75rem;
}

/* Таб «Все» в фильтре портфолио: текст короткий, кнопка выходила 41px
   по ширине. Остальные табы шире и правило им не мешает. */
.wtab{min-width:2.75rem}

/* Ссылка на политику в подвале: строка 14px высотой, попасть тяжело. */
.foot-copy a{position:relative;display:inline-block}
.foot-copy a::after{
  content:"";position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);
  height:2.75rem;
}

/* Ссылка внутри чекбокса согласия. Зону расширяем только по вертикали:
   по горизонтали она упирается в сам чекбокс, и перехват нажатий
   мешал бы поставить галочку. */
.agree a{position:relative;display:inline-block;padding:.375rem 0;margin:-.375rem 0}

/* SEO-посадочные WordPress */
.seo-landing{padding-top:0}.seo-hero{position:relative;min-height:42rem;color:#fff;display:flex;align-items:flex-end;overflow:hidden}.seo-hero-bg{position:absolute;inset:0}.seo-hero-bg img{width:100%;height:100%;object-fit:cover}.seo-hero-bg span{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,24,.9),rgba(20,20,24,.44) 62%,rgba(20,20,24,.18))}.seo-hero-in{position:relative;z-index:1;padding-top:10rem;padding-bottom:5rem}.seo-hero h1{max-width:15ch;font-size:clamp(3rem,6.7vw,7rem);line-height:.95;margin:.8rem 0 1.5rem}.seo-hero .lead{max-width:48rem;color:rgba(255,255,255,.9)}.seo-breadcrumbs{display:flex;gap:.65rem;flex-wrap:wrap;font-size:.85rem;color:rgba(255,255,255,.72);margin-bottom:2rem}.seo-breadcrumbs a{text-decoration:underline;text-underline-offset:.2rem}.seo-actions{display:flex;align-items:center;gap:1.5rem;margin-top:2rem}.seo-phone{font-weight:700;font-size:1.1rem}.seo-features .reasons-grid{grid-template-columns:repeat(3,1fr)}.seo-feature-num{display:block;color:var(--orange);font-weight:700;margin-bottom:auto}.seo-projects{display:grid;gap:2rem}.seo-project-gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,14rem);gap:.5rem;overflow:hidden;border-radius:var(--r-core)}.seo-project-gallery img{width:100%;height:100%;object-fit:cover}.seo-project-gallery img:first-child{grid-row:1/3}.seo-project-gallery img:nth-child(4),.seo-project-gallery img:nth-child(5){display:none}.seo-project-info{padding:1.4rem .5rem .5rem}.seo-project-info h3{font-size:1.6rem;margin-bottom:1rem}.seo-project-info dl{display:flex;gap:2rem;flex-wrap:wrap}.seo-project-info dt{font-size:.75rem;color:var(--muted)}.seo-project-info dd{font-weight:700}.seo-editor-content{padding-block:var(--sec-pad)}.seo-editor-content .wrap{max-width:60rem}.seo-editor-content h2{font-size:2rem;margin:2rem 0 1rem}.seo-editor-content p{margin:1rem 0}
@media(max-width:900px){.seo-features .reasons-grid{grid-template-columns:1fr}.seo-project-gallery{grid-template-columns:1fr 1fr;grid-template-rows:18rem 10rem}.seo-project-gallery img:first-child{grid-column:1/3;grid-row:auto}.seo-project-gallery img:nth-child(3){display:none}.seo-hero{min-height:38rem}.seo-hero h1{font-size:clamp(2.75rem,12vw,5rem)}}
@media(max-width:560px){.seo-actions{align-items:flex-start;flex-direction:column}.seo-project-gallery{grid-template-rows:14rem 8rem}.seo-hero-in{padding-top:8rem;padding-bottom:3rem}}

/* Посадочные используют ту же hero-систему, что и главная: крупный H1 слева,
   фотография на весь экран и интерактивный калькулятор справа. */
.seo-hero.hero{min-height:clamp(44rem,92vh,60rem);display:flex;align-items:center;padding:calc(var(--nav-h,5.75rem) + 1.25rem) 0 2.5rem}
.seo-hero .seo-hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.seo-hero .seo-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,12,10,.9) 0%,rgba(15,12,10,.72) 34%,rgba(15,12,10,.36) 65%,rgba(15,12,10,.58) 100%),linear-gradient(0deg,rgba(15,12,10,.72),rgba(15,12,10,.12) 60%,rgba(15,12,10,.42))}
.seo-hero .seo-hero-bg .hero-slides,.seo-hero .seo-hero-bg .photo-real{position:absolute;inset:0;width:100%;height:100%}
.seo-hero .seo-hero-bg .photo-real{object-fit:cover;object-position:50% 45%}
.seo-hero .hero-in{width:100%;max-width:var(--wrap);display:grid;grid-template-columns:minmax(0,1fr) 25rem;column-gap:clamp(2rem,4.5vw,4.5rem);align-items:center}
.seo-hero .hero-head{grid-column:1;grid-row:1;max-width:42rem}
.seo-hero .hero-title{max-width:14ch;margin:0;color:#fff}
.seo-landing .seo-hero .hero-title{font-size:clamp(1.5rem,3.35vw,3.5rem);line-height:1.08;max-width:24ch}
.seo-hero .lead{color:rgba(255,255,255,.9)}
.seo-hero .seo-breadcrumbs{margin-bottom:0}
.seo-hero .seo-actions{display:flex;align-items:center;gap:1.5rem;margin-top:.25rem}
.seo-hero .calc{grid-column:2;grid-row:1}
@media(max-width:1100px){.seo-hero.hero{display:block;min-height:0;padding-bottom:clamp(3rem,6vw,4.5rem)}.seo-hero .hero-in{grid-template-columns:minmax(0,1fr);row-gap:clamp(1.75rem,4vw,2.5rem)}.seo-hero .hero-head{grid-column:1;grid-row:1;max-width:none}.seo-hero .calc{grid-column:1;grid-row:2}.seo-hero .hero-title{max-width:16ch}}
@media(max-width:560px){.seo-hero.hero{padding-top:calc(var(--nav-h,5.75rem) + 1.75rem)}.seo-hero .hero-title{font-size:clamp(2rem,calc(20vw - 32px),3rem);text-wrap:wrap}.seo-hero .seo-actions{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.seo-landing .seo-hero .hero-title{font-size:1.5rem;max-width:none}}

.site-footer{padding-top:clamp(3rem,5vw,5rem)}
.footer-grid{display:grid;grid-template-columns:minmax(12rem,1.1fr) minmax(8rem,.7fr) minmax(14rem,1.25fr) minmax(15rem,1.15fr);gap:clamp(1.5rem,3vw,3rem)}
.footer-about{display:flex;align-items:flex-start;flex-direction:column;gap:1.2rem}
.footer-about .foot-phone{font-size:1.1rem}
.footer-note,.footer-bottom,.footer-details{color:rgba(255,255,255,.62);font-size:.875rem;line-height:1.65}
.footer-column h2{margin:0 0 1.25rem;color:#fff;font-size:1rem;line-height:1.3;text-transform:uppercase;letter-spacing:.08em}
.footer-column-title{display:block;margin:0 0 1.25rem;color:#fff;font-size:1rem;line-height:1.3;text-transform:uppercase;letter-spacing:.08em}
.footer-column ul{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.footer-column li{line-height:1.45}
.footer-column a{color:rgba(255,255,255,.8);text-decoration:none;text-underline-offset:.2em;transition:color .2s}
.footer-column a:hover,.footer-column a:focus-visible{color:var(--orange);text-decoration:underline}
.footer-placeholder{color:rgba(255,255,255,.5);cursor:default}
.footer-details{margin-top:2rem}
.footer-details h3{color:#fff;font-size:.95rem;margin:0 0 .7rem}
.footer-details p{margin:0;overflow-wrap:anywhere}
.footer-bottom{border-top:1px solid rgba(255,255,255,.17);margin-top:3rem;padding-top:1.4rem}
.footer-bottom p{margin:0}
.site-footer{position:relative}.footer__dev-link{position:absolute;right:max(1.25rem,calc((100vw - 1200px)/2));bottom:1.35rem;display:flex;align-items:center;justify-content:flex-end;gap:.65rem;color:rgba(255,255,255,.5);text-decoration:none;opacity:.5;transition:opacity .2s ease}.footer__dev-link:hover,.footer__dev-link:focus-visible{opacity:.9}.footer__dev-logo{display:block;width:144px;height:15px;object-fit:contain}.footer__dev-text{font-size:.75rem;line-height:1.3;white-space:nowrap}
@media(max-width:1050px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr}.footer-column h2,.footer-column-title{margin-bottom:.9rem}.footer-bottom{margin-top:2rem}.footer__dev-link{position:static;margin:1rem 1.25rem 0;justify-content:flex-start}.footer__dev-text{white-space:normal}}

/* Единая шапка и хаб услуг: ссылки берутся из одного списка посадочных. */
.nav{position:relative}
.nav-services summary{display:block;padding:.4375rem .6875rem;border-radius:99px;font-size:.9063rem;color:var(--graphite);cursor:pointer;list-style:none;white-space:nowrap}
.nav-services summary::-webkit-details-marker{display:none}
.nav-services summary:hover,.nav-services[open] summary{color:var(--orange);background:rgba(30,30,35,.06)}
.nav-chevron{display:inline-block;width:.38rem;height:.38rem;margin:0 0 .16rem .3rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.nav-services[open] .nav-chevron{transform:rotate(225deg);margin-bottom:0}
.services-mega{position:absolute;top:calc(100% + .75rem);left:0;right:0;z-index:60;padding:1.5rem 1.75rem 1.75rem;background:#fff;border:1px solid rgba(30,30,35,.1);border-radius:1.25rem;box-shadow:0 1.5rem 3rem rgba(15,15,20,.2);color:var(--graphite)}
.services-mega-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1.2rem}
.services-mega-head strong{font-size:1.15rem}
.services-mega-head a{color:var(--orange);font-weight:700;text-decoration:underline;text-underline-offset:.25em}
.services-mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.services-mega-group{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem}
.services-mega-group h2{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .25rem}
.services-mega-group-title{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .25rem}
.services-mega-group a{display:block;padding:.2rem 0;color:var(--graphite);font-size:.95rem;line-height:1.35;text-decoration:none}
.services-mega-group a:hover,.services-mega-group a:focus-visible,.services-mega-group a[aria-current="page"]{color:var(--orange);text-decoration:underline;text-underline-offset:.2em}
.menu[hidden]{display:none}
.menu{overflow-y:auto;justify-content:flex-start;padding-top:calc(var(--nav-h,5.75rem) + 2rem)}
.mobile-services summary{display:block;padding:.35rem 0;font-size:clamp(1.75rem,7vw,2.5rem);font-weight:700;letter-spacing:-.02em;cursor:pointer;list-style:none}
.mobile-services summary::-webkit-details-marker{display:none}
.mobile-services summary::after{content:"+";font-weight:400;margin-left:.5rem;color:var(--orange)}
.mobile-services[open] summary::after{content:"в€’"}
.mobile-services-inner{display:grid;gap:1.3rem;padding:.75rem 0 1.25rem}
.mobile-services-group{display:grid;gap:.5rem}
.mobile-services-group strong{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.menu-list .mobile-services-inner a{padding:.15rem 0;font-size:1rem;font-weight:400;line-height:1.4;letter-spacing:normal}
.menu-list .mobile-services-inner .mobile-services-all{font-weight:700;color:var(--orange)}
@media(min-width:1101px) and (max-width:1230px){.nav{gap:.65rem}.nav-links a,.nav-services summary{padding-inline:.45rem;font-size:.82rem}.nav-side{gap:.5rem}}

.services-hub-page{padding:calc(var(--nav-h,5.75rem) + 5rem) 0 var(--sec-pad);background:var(--paper)}
.services-hub-page .seo-breadcrumbs{color:var(--muted);margin:0 0 2rem}
.services-hub-intro{max-width:58rem;margin-bottom:4rem}
.services-hub-intro h1{font-size:clamp(2.5rem,5vw,5rem);line-height:1.05;margin:.7rem 0 1.4rem}
.services-hub-intro>p:last-child{font-size:1.15rem;line-height:1.6;color:var(--muted)}
.services-hub-section{margin-top:3.5rem}
.services-hub-section h2{font-size:clamp(1.7rem,2.5vw,2.4rem);margin:0 0 1.5rem}
.services-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.services-hub-card{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;text-decoration:none;min-height:15rem;transition:transform .2s,box-shadow .2s}
.services-hub-card:hover,.services-hub-card:focus-visible{transform:translateY(-3px);box-shadow:0 1rem 2rem rgba(30,30,35,.12)}
.services-hub-card-title{font-size:1.35rem;font-weight:700;line-height:1.2;color:var(--graphite)}
.services-hub-card-desc{font-size:.93rem;line-height:1.5;color:var(--muted)}
.services-hub-card-more{margin-top:auto;color:var(--orange);font-weight:700}
.services-hub-cta{margin-top:4rem;padding:clamp(1.5rem,4vw,3rem);border-radius:var(--r-core);background:var(--graphite);color:#fff}
.services-hub-cta h2{font-size:clamp(1.6rem,3vw,2.5rem);margin:0 0 1rem}
.services-hub-cta p{max-width:44rem;line-height:1.6;margin:0 0 1.5rem;color:rgba(255,255,255,.8)}
@media(max-width:900px){.services-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.services-hub-page{padding-top:calc(var(--nav-h,5.75rem) + 3rem)}.services-hub-grid{grid-template-columns:1fr}.services-hub-card{min-height:0}.services-hub-intro{margin-bottom:2.5rem}}

/* CTA в мобильной навигации: кнопка меню занимает всю доступную колонку. */
@media(max-width:1100px){
  .menu-foot{align-items:stretch}
  .menu-foot .btn{width:100%;min-height:3.25rem;justify-content:center;text-align:center;padding:.75rem 1rem;white-space:nowrap}
}
@media(max-width:359px){
  .nav-side{display:none}
  .nav .burger{margin-left:auto;margin-right:0}
  .nav{padding-right:.5rem}
}

.seo-answer{position:relative;padding:clamp(4.5rem,8vw,8rem) 0;background:var(--mist);overflow:hidden}
.seo-answer::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--line)}
.seo-answer-intro{max-width:60rem;margin-bottom:clamp(2.25rem,5vw,4rem)}
.seo-answer-intro .split-lab{margin-bottom:1rem}
.seo-answer-intro .sec-title{max-width:18ch;margin-bottom:1.25rem}
.seo-answer-intro>p:last-child{max-width:52rem;font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.65;color:var(--ink-60)}
.seo-answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.seo-answer-grid .shell{min-width:0}
.seo-answer-grid .core{height:100%;min-height:0;padding:clamp(1.5rem,3vw,2.75rem);border:1px solid rgba(30,30,35,.08);box-shadow:0 1rem 2.5rem -2rem rgba(30,30,35,.4)}
.seo-answer-grid h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.1;margin-bottom:1.25rem}
.seo-answer-grid ul{margin:0;padding:0;list-style:none;display:grid;gap:.9rem;color:var(--ink-60);line-height:1.55}
.seo-answer-grid li{position:relative;padding-left:1.4rem}
.seo-answer-grid li::before{content:"";position:absolute;left:0;top:.65em;width:.45rem;height:.45rem;border-radius:50%;background:var(--orange)}
.seo-answer-dark .core{background:var(--graphite);border-color:transparent;color:#fff;box-shadow:0 1.25rem 3rem -1.5rem rgba(30,30,35,.65)}
.seo-answer-dark h3{color:#fff}
.seo-answer-dark p{color:rgba(255,255,255,.76);line-height:1.65;margin:0 0 1rem}
.seo-answer-dark p:last-child{margin-bottom:0}
.seo-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:clamp(1.25rem,3vw,2rem);overflow:hidden;border-radius:var(--r-shell);background:var(--line)}
.seo-facts>div{padding:clamp(1.25rem,2.5vw,2rem);background:#fff}
.seo-facts b{display:block;color:var(--orange);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.75rem}
.seo-facts p{color:var(--ink-60);line-height:1.6;margin:0;max-width:34rem}
.seo-commercial{padding:0 0 var(--sec-pad);background:var(--mist)}
.seo-commercial .sec-head{margin-bottom:2rem}
@media(max-width:700px){.seo-answer-grid,.seo-facts{grid-template-columns:1fr}.seo-answer-grid .core{padding:1.35rem}.seo-answer-intro>p:last-child{font-size:1rem}.seo-answer-intro .sec-title{max-width:none}}
.seo-related{padding:var(--sec-pad) 0;background:var(--mist)}
.seo-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.seo-related-link{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.4rem;color:var(--ink);transition:transform .25s var(--ease),background .25s var(--ease)}
.seo-related-link:hover{transform:translateY(-3px);background:#fff}
.seo-related-link span{font-weight:700;line-height:1.3}
.seo-related-link b{color:var(--orange);font-size:1.25rem}
@media(max-width:700px){.seo-related-grid{grid-template-columns:1fr}.seo-related-link{padding:1rem 1.15rem}}
/* Prices page */
.prices-page{background:var(--mist,#f4f3ef)}
.prices-hero{min-height:31rem;background:var(--ink,#202027);color:#fff;display:flex;align-items:center}
.about-intro{padding:var(--sec-pad,6rem) 0;background:#fff}.about-intro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.about-intro article{padding:2.25rem;border:1px solid rgba(32,32,39,.12);border-radius:1.25rem}.about-intro h2{margin:.75rem 0 1rem;font-size:clamp(1.5rem,2vw,2.2rem)}.about-intro p{max-width:32rem;color:#68666e}.about-page .team{margin-top:0}.about-cta{padding:var(--sec-pad,6rem) 0;background:var(--orange,#ff5b1a);color:#fff}.about-cta-in{max-width:48rem}.about-cta h2{max-width:40rem;margin:0 0 1rem;font-size:clamp(2rem,4vw,4rem);letter-spacing:-.04em}.about-cta p{max-width:36rem;margin:0 0 1.5rem;color:rgba(255,255,255,.82)}.about-cta .btn{background:#fff;color:var(--ink,#202027)}
.prices-hero .hero-in{padding-block:7rem 4rem}.prices-hero .hero-title{max-width:52rem}.prices-hero .lead{max-width:48rem;color:rgba(255,255,255,.78)}
.price-table-section,.prices-rates,.price-explainer{padding:var(--sec-pad,6rem) 0}.price-table-section{background:#fff}.price-table-wrap{overflow-x:auto;border:1px solid rgba(32,32,39,.12);border-radius:1.25rem;background:#fff}.price-table{width:100%;min-width:860px;border-collapse:collapse;text-align:left}.price-table caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.price-table th,.price-table td{padding:1.15rem 1rem;border-bottom:1px solid rgba(32,32,39,.1);vertical-align:middle}.price-table thead th{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#68666e;background:#f7f6f2}.price-table tbody th{font-size:1rem}.price-table tbody td{font-variant-numeric:tabular-nums;white-space:nowrap}.price-table tbody tr:last-child th,.price-table tbody tr:last-child td{border-bottom:0}.price-table .is-featured{background:#fff5ed}.price-table .is-featured th{color:var(--orange,#ff5b1a)}.price-note{max-width:58rem;margin:1.25rem 0 0;color:#68666e;font-size:.9rem}.prices-rates{background:var(--mist,#f4f3ef)}.prices-rates .rate-intro{min-height:6rem}.prices-rates .rate-detail{margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(32,32,39,.12);font-size:.9rem;color:#68666e}.price-explainer{background:#202027;color:#fff}.price-explainer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.price-explainer article{padding:2.25rem;border:1px solid rgba(255,255,255,.16);border-radius:1.25rem}.price-explainer h2{margin:.75rem 0 1rem;font-size:clamp(1.5rem,2vw,2.2rem)}.price-explainer p{max-width:30rem;color:rgba(255,255,255,.72)}
.prices-rates .rate-cap{height:12rem;background-size:cover;background-position:center;border-radius:.75rem;margin-bottom:1.25rem}.prices-rates .rate:nth-child(1) .rate-cap{background-image:url('../img/rate-cosmetic.webp')}.prices-rates .rate:nth-child(2) .rate-cap{background-image:url('../img/rate-capital.webp')}.prices-rates .rate:nth-child(3) .rate-cap{background-image:url('../img/rate-design.webp')}
.prices-rates .rate h3{order:2}.prices-rates .rate-intro{order:3}.prices-rates .rate-items{order:4}.prices-rates .rate-detail{order:5}.prices-rates .rate .btn{order:6}
@media(max-width:760px){.prices-hero .hero-in{padding-block:6rem 3rem}.price-table-section,.prices-rates,.price-explainer{padding:4rem 0}.price-explainer-grid{grid-template-columns:1fr}.price-explainer article{padding:1.5rem}.prices-rates .rate-intro{min-height:0}}
@media(max-width:760px){.about-intro{padding:4rem 0}.about-intro-grid{grid-template-columns:1fr}.about-intro article{padding:1.5rem}.about-cta{padding:4rem 0}}

/* Реквизиты под картой контактов (28.09.2026) */
.contacts-legal{margin-top:1.25rem;padding:clamp(1.25rem,2vw,1.75rem);border-radius:var(--r-shell);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.contacts-legal-title{display:block;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:.875rem}
.contacts-legal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem 2.5rem;margin:0}
.contacts-legal-grid p{margin:0 0 .375rem;font-size:.875rem;line-height:1.55;color:rgba(255,255,255,.82);overflow-wrap:anywhere}
.contacts-legal-grid span{color:rgba(255,255,255,.5)}
@media (max-width:768px){.contacts-legal-grid{grid-template-columns:minmax(0,1fr)}}