/* Лестницы на металлокаркасе, Ульяновск.
   Мир страницы — цех и чертёж: графит каркаса, оцинковка, белый лист, дуб ступени.
   Дуб (--oak) только там, где в жизни дерево: главная кнопка и ступени схемы.
   Форма: радиус 4px везде, без пилюль и плашек. Структуру держат линии и сетка. */

:root{
  --graphite:#23282E;
  --graphite-2:#343B43;
  --steel:#5E6873;        /* второстепенный текст на светлом */
  --zinc:#EEF0F2;         /* фон-оцинковка для чередования секций */
  --rule:#D5DADF;         /* линии на светлом */
  --rule-dark:rgba(255,255,255,.16);
  --ink:#15191D;
  --oak:#D3913F;          /* кнопка: графитовый текст на дубе */
  --oak-hover:#DE9D4C;
  --oak-ink:#8C5414;      /* дуб как цвет текста на белом */
  --r:4px;
  --display:'Fira Sans Condensed', 'Arial Narrow', sans-serif;
  --text:'Golos Text', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:#fff; color:var(--ink);
  font:400 17px/1.6 var(--text);
  -webkit-font-smoothing:antialiased;
}
::selection{ background:rgba(211,145,63,.32); }
h1,h2,h3{ font-family:var(--display); font-weight:700; margin:0; text-wrap:balance; }
p{ margin:0; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--oak); outline-offset:3px; }

.container{ max-width:1200px; margin:0 auto; padding:0 32px; }
.shell{ max-width:1440px; margin:0 auto; padding:0 32px; }

/* ── Кнопки: прямоугольные, как торец профиля ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:0 28px;
  background:var(--graphite); color:#fff;
  border:0; border-radius:var(--r); cursor:pointer;
  font:600 18px/1.1 var(--display); letter-spacing:.01em;
  text-decoration:none; text-align:center;
  transition:background-color .15s ease, box-shadow .15s ease;
}
.btn:hover{ background:var(--graphite-2); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn--oak{ background:var(--oak); color:var(--graphite); }
.btn--oak:hover{ background:var(--oak-hover); }
.btn--line{ background:transparent; color:var(--graphite); box-shadow:inset 0 0 0 1.5px var(--rule); }
.btn--line:hover{ background:var(--zinc); box-shadow:inset 0 0 0 1.5px var(--steel); }
.btn--line-light{ color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4); }
.btn--line-light:hover{ background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1.5px #fff; }
.btn--quiet{ background:transparent; color:var(--steel); padding:0 8px; }
.btn--quiet:hover{ background:transparent; color:var(--ink); }
.btn--block{ width:100%; }

/* ── Шапка ── */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--rule);
}
.header__row{ display:flex; align-items:center; gap:28px; min-height:72px; }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--graphite); }
.logo__mark{ width:30px; height:30px; color:var(--oak-ink); }
.logo__name{ font:700 23px/1 var(--display); letter-spacing:.01em; }
.nav{ display:flex; gap:26px; margin-right:auto; margin-left:20px; }
.nav a{ font-size:15.5px; color:var(--steel); text-decoration:none; padding:10px 0; }
.nav a:hover{ color:var(--ink); }
.socials{ display:flex; gap:6px; }
.socials a{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--r); }
.socials a:hover{ background:var(--zinc); }
.socials svg{ width:20px; height:20px; fill:var(--graphite-2); }
.header__phone{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; }
.header__phone a{ font:700 19px/1.2 var(--display); text-decoration:none; color:var(--ink);
  font-variant-numeric:tabular-nums; padding:4px 0; }
.header__hours{ font-size:13px; color:var(--steel); }
.header__call{ min-height:46px; font-size:16px; padding:0 18px; }
.header__spacer{ flex:1; }

/* ── Первый экран: текст на графите слева, фото до края справа ── */
.hero{ background:var(--graphite); color:#fff; }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  min-height:min(calc(100dvh - 72px), 820px);
}
.hero__text{
  padding:64px 64px 56px max(32px, calc((100vw - 1440px) / 2 + 32px));
  display:flex; flex-direction:column; justify-content:center;
}
.hero__where{ font-size:15.5px; color:rgba(255,255,255,.72); margin-bottom:22px; }
.hero h1{
  font-size:clamp(44px, 4.9vw, 80px); line-height:.98; letter-spacing:-.015em;
  max-width:15ch; margin-bottom:26px;
}
.hero__lead{ font-size:18.5px; line-height:1.55; color:rgba(255,255,255,.82); max-width:56ch; }
.hero__lead strong{ color:#fff; font-weight:600; }

.facts{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  margin:36px 0 38px; border-top:1px solid var(--rule-dark);
}
.fact{ padding:18px 22px 0 0; }
.fact + .fact{ padding-left:22px; border-left:1px solid var(--rule-dark); }
.fact dt{ font:700 30px/1.05 var(--display); color:#fff; font-variant-numeric:tabular-nums; margin-bottom:6px; }
.fact dd{ margin:0; font-size:14.5px; line-height:1.45; color:rgba(255,255,255,.66); }

.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero__cta .btn{ min-height:60px; }

.hero__media{ position:relative; margin:0; overflow:hidden; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:42% 50%; }
/* Размерная линия, как на чертеже: подпись профиля вдоль левого края фото */
.hero__dim{
  position:absolute; left:28px; top:18%; bottom:18%; width:14px;
  border-left:1.5px solid rgba(255,255,255,.85);
  display:flex; align-items:center;
}
.hero__dim::before, .hero__dim::after{
  content:""; position:absolute; left:-7px; width:13px; border-top:1.5px solid rgba(255,255,255,.85);
}
.hero__dim::before{ top:0; } .hero__dim::after{ bottom:0; }
.hero__dim span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  margin-left:8px; padding:8px 4px; background:rgba(35,40,46,.78); border-radius:2px;
  font:600 14px/1 var(--display); letter-spacing:.04em; color:#fff;
}

/* ── Условия строкой под первым экраном ── */
.terms{
  list-style:none; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--rule);
}
.terms li{ padding:22px 24px 22px 0; font-size:15px; line-height:1.45; color:var(--steel); }
.terms li + li{ padding-left:24px; border-left:1px solid var(--rule); }
.terms b{ color:var(--ink); font-weight:600; }

/* ── Секции ── */
.sec{ padding:112px 0; }
.sec--zinc{ background:var(--zinc); }
.sec--deep{ background:var(--graphite); color:#fff; }
.section-title{
  font-size:clamp(32px, 3.4vw, 52px); line-height:1.02; letter-spacing:-.01em;
  color:var(--graphite); margin-bottom:18px;
}
.sec--deep .section-title{ color:#fff; }
.section-sub{ color:var(--steel); font-size:17.5px; line-height:1.6; max-width:52ch; }

/* Заголовок слева, содержание справа — как штамп и поле чертежа */
.split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px 72px; align-items:start; }
.split__head{ position:sticky; top:112px; }
.split--wide{ align-items:end; margin-bottom:56px; }
.split--wide .split__head{ position:static; }

/* Пункты: заголовок и текст под линией, без карточек */
.points{ display:grid; grid-template-columns:1fr 1fr; gap:44px 48px; }
.point{ border-top:2px solid var(--graphite); padding-top:20px; }
.point h3{ font-size:24px; line-height:1.15; color:var(--graphite); margin-bottom:10px; }
.point p{ font-size:16px; color:var(--steel); }
.points--dark .point{ border-top-color:var(--oak); }
.points--dark .point h3{ color:#fff; }
.points--dark .point p{ color:rgba(255,255,255,.72); }

/* ── Схема лестницы ── */
.diagram-wrap{ margin:0; }
.diagram{ width:100%; height:auto; display:block; }
.d-floor{ stroke:#9AA3AC; stroke-width:2; }
.d-slab{ fill:#D5DADF; }
.d-stringer{ fill:none; stroke:var(--graphite); stroke-width:9; stroke-linejoin:miter; }
.d-tread{ fill:var(--oak); }
.d-post{ stroke:var(--graphite); stroke-width:3; }
.d-rail{ stroke:var(--graphite); stroke-width:5; stroke-linecap:round; }
.d-call line{ stroke:var(--graphite); stroke-width:1.5; }
.d-call circle{ fill:#fff; stroke:var(--graphite); stroke-width:1.5; }
.d-call text{ font:700 15px var(--display); text-anchor:middle; fill:var(--graphite); }

.parts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.part{ padding:28px 32px 0 0; border-top:2px solid var(--graphite); }
.part + .part{ padding-left:32px; border-left:1px solid var(--rule); }
.part h3{ display:flex; align-items:center; gap:12px; font-size:30px; color:var(--graphite); margin-bottom:12px; }
.part__n{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--graphite); background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font:700 15px/1 var(--display);
}
.part p{ font-size:16px; color:var(--steel); }

/* ── Наши работы ── */
.works{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px 20px; }
.work{ display:block; text-decoration:none; color:var(--ink); }
.work__img{ display:block; aspect-ratio:3/4; overflow:hidden; border-radius:var(--r); background:var(--zinc); }
.work__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.work:hover .work__img img{ transform:scale(1.03); }
.work__cap{ display:block; margin-top:12px; font-size:14.5px; line-height:1.4; color:var(--steel); }
.work:hover .work__cap{ color:var(--ink); }
.modal--photo .modal__photo{ max-width:100%; max-height:88vh; border-radius:var(--r); display:block; }

/* ── Пять шагов: настоящая лестница. Каждая следующая ступень выше на одну подступёнку ── */
.stair{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:end;
  --rise:56px;
}
.stair__step{
  position:relative; background:#fff;
  border-top:8px solid var(--oak);
  padding:22px 22px 28px;
  min-height:calc(260px + var(--i) * var(--rise));
  box-shadow:inset 1px 0 0 var(--rule);
}
.stair__step:nth-child(1){ --i:0; } .stair__step:nth-child(2){ --i:1; } .stair__step:nth-child(3){ --i:2; }
.stair__step:nth-child(4){ --i:3; } .stair__step:nth-child(5){ --i:4; }
.stair__n{
  display:block; font:700 56px/1 var(--display); color:var(--graphite);
  font-variant-numeric:tabular-nums; margin-bottom:18px;
}
.stair__step h3{ font-size:22px; line-height:1.15; color:var(--graphite); margin-bottom:8px; }
.stair__step p{ font-size:15px; line-height:1.5; color:var(--steel); }
/* Единственное движение на странице: ступени поднимаются по очереди, когда блок попадает в экран */
.stair.is-ready .stair__step{ transform:translateY(24px); opacity:0; }
.stair.is-in .stair__step{
  transform:none; opacity:1;
  transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .5s ease;
  transition-delay:calc(var(--i) * 90ms);
}
@media (prefers-reduced-motion:reduce){
  .stair.is-ready .stair__step{ transform:none; opacity:1; }
}

/* ── P.S. ── */
.ps{ display:grid; gap:0; }
.ps__item{
  padding:26px 0; border-top:1px solid var(--rule);
  font-size:16.5px; line-height:1.6; color:var(--steel);
}
.ps__item:last-child{ border-bottom:1px solid var(--rule); }
.ps__item b{ color:var(--ink); font-weight:600; }
.ps__label{ display:block; font:700 15px/1 var(--display); color:var(--oak-ink); margin-bottom:10px; letter-spacing:.02em; }

/* ── Финальный призыв ── */
.final{ background:var(--graphite); color:#fff; padding:96px 0; }
.final__row{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:end; }
.final h2{ font-size:clamp(36px, 4vw, 64px); line-height:1; letter-spacing:-.01em; }
.final p{ color:rgba(255,255,255,.74); margin-bottom:24px; }
.final .btn{ min-height:60px; }

/* ── Квиз ── */
.quiz{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:40px; }
.consultant{ align-self:start; position:sticky; top:112px; }
.consultant__avatar{
  width:72px; height:72px; border-radius:50%; overflow:hidden; white-space:nowrap;
  background:var(--graphite); color:var(--oak);
  display:flex; align-items:center; justify-content:center;
  font:700 24px var(--display); margin-bottom:14px;
}
.consultant__name{ font:700 20px/1.2 var(--display); }
.consultant__role{ font-size:14px; color:var(--steel); margin-bottom:16px; }
.consultant__note{ font-size:15px; line-height:1.55; color:var(--ink); padding-top:16px; border-top:1px solid var(--rule); }
.quiz__panel{
  background:#fff; border:1px solid var(--rule); border-radius:var(--r);
  padding:36px 40px; min-height:560px; display:flex; flex-direction:column;
  box-shadow:0 30px 60px -40px rgba(35,40,46,.35);
}
.quiz__progress{ height:4px; background:var(--zinc); border-radius:2px; margin-bottom:10px; overflow:hidden; }
.quiz__progress-bar{ height:100%; background:var(--oak); transition:width .3s cubic-bezier(.16,1,.3,1); }
.quiz__step-label{ font-size:14px; color:var(--steel); margin-bottom:22px; font-variant-numeric:tabular-nums; }
.quiz__question{ font:700 30px/1.1 var(--display); color:var(--graphite); margin:0 0 10px; }
.quiz__why{ font-size:14.5px; line-height:1.55; color:var(--steel); margin:0 0 24px; max-width:64ch; }
.quiz__options{ display:grid; gap:8px; margin-bottom:24px; }
.quiz__options--2col{ grid-template-columns:1fr 1fr; }
.option{
  display:flex; align-items:center; gap:14px;
  border:1.5px solid var(--rule); border-radius:var(--r);
  padding:15px 18px; cursor:pointer; user-select:none;
  font-size:16.5px; line-height:1.35; transition:border-color .12s, background-color .12s;
}
.option:hover{ border-color:var(--steel); }
.option input{ accent-color:var(--graphite); width:18px; height:18px; flex-shrink:0; margin:0; }
.option--checked{ border-color:var(--graphite); background:var(--zinc); }
.option:focus-within{ outline:2px solid var(--oak); outline-offset:2px; }
.quiz__nav{ margin-top:auto; display:flex; gap:12px; align-items:center; }
.quiz__err{ color:#B3401A; font-size:14px; display:none; }

.quiz__summary{ background:var(--zinc); border-radius:var(--r); padding:18px 20px; margin-bottom:20px; font-size:15px; }
.quiz__summary div{ margin-bottom:6px; }
.quiz__summary b{ color:var(--graphite); font-weight:600; }
.quiz__form .field{ margin-bottom:12px; }
.input{
  width:100%; min-height:54px; padding:14px 16px;
  border:1.5px solid var(--rule); border-radius:var(--r); background:#fff;
  font:400 16.5px var(--text); color:var(--ink);
}
.input::placeholder{ color:#7A838D; }
.input:hover{ border-color:var(--steel); }
.input:focus{ outline:none; border-color:var(--graphite); box-shadow:0 0 0 3px rgba(211,145,63,.35); }

/* ── Расчёт в финале квиза ── */
.calc{ border:1.5px solid var(--graphite); border-radius:var(--r); padding:24px; margin-bottom:26px; }
.calc__head{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.calc__lot{ font:700 20px/1.2 var(--display); color:var(--graphite); }
.calc__price{ font:700 32px/1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.calc__hint{ font-size:14px; color:var(--steel); margin:0 0 14px; }
.calc__label{ font:600 15px/1 var(--display); color:var(--steel); margin:18px 0 10px; }
.calc__table{ border-top:1px solid var(--rule); }
.calc__row{
  display:grid; grid-template-columns:1.5fr .7fr 1.1fr 1fr; gap:10px;
  padding:14px 0; align-items:center; font-size:15px; font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--rule);
}
.calc__row--head{ font-size:13px; color:var(--steel); font-weight:600; }
.calc__row--base{ background:rgba(211,145,63,.1); }
.calc__note{ display:block; font-size:13px; color:var(--steel); font-weight:400; }
.calc__start{ margin-top:14px; padding:15px 17px; border-radius:var(--r); background:var(--zinc); font-size:15px; line-height:1.5; }
.calc__start--on{ background:var(--graphite); color:#fff; }
.calc__start--on b{ color:var(--oak); }
.calc__disclaimer{ font-size:13.5px; line-height:1.5; color:var(--steel); margin:14px 0 0; }

/* ── Согласие ── */
.consent{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer; user-select:none;
  font-size:13.5px; line-height:1.45; color:var(--steel); margin:0 0 14px;
}
.consent__input{ position:absolute; opacity:0; width:0; height:0; }
.consent__box{
  flex-shrink:0; width:20px; height:20px; margin-top:1px;
  border:1.5px solid #9AA3AC; border-radius:3px; background:#fff; position:relative;
  transition:background-color .15s, border-color .15s;
}
.consent__input:checked + .consent__box{ background:var(--graphite); border-color:var(--graphite); }
.consent__input:checked + .consent__box::after{
  content:""; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border:solid var(--oak); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.consent__input:focus-visible + .consent__box{ outline:2px solid var(--oak); outline-offset:2px; }
.consent a{ color:var(--graphite-2); text-decoration:underline; display:inline-block; padding:0; margin:0; }
.consent--error .consent__box{ border-color:#B3401A; }

/* ── Попап и окна документов ── */
.popup, .modal{
  position:fixed; inset:0; z-index:9400; background:rgba(21,25,29,.66);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal{ z-index:9500; }
.popup[hidden], .modal[hidden]{ display:none; }
.popup__box{ background:#fff; border-radius:var(--r); padding:40px 36px 32px; max-width:440px; width:100%; position:relative; }
.popup__close, .modal__close{
  position:absolute; top:12px; right:12px; width:44px; height:44px;
  border:0; border-radius:var(--r); background:transparent; color:var(--graphite);
  font-size:26px; line-height:1; cursor:pointer;
}
.popup__close:hover, .modal__close:hover{ background:var(--zinc); }
.popup__title{ font:700 28px/1.1 var(--display); color:var(--graphite); margin:0 0 8px; }
.popup__text{ font-size:15px; color:var(--steel); margin:0 0 20px; }
.modal__box{
  background:#fff; border-radius:var(--r); padding:40px;
  max-width:760px; width:100%; max-height:86vh; overflow:auto; position:relative;
}
.modal--photo .modal__close{ background:#fff; }
.doc{ font-size:14.5px; line-height:1.65; color:var(--graphite-2); }
.doc h2{ font:700 24px/1.15 var(--display); margin:0 0 16px; color:var(--ink); }
.doc h3{ font:700 18px/1.2 var(--display); margin:22px 0 8px; color:var(--ink); }
.doc p{ margin:0 0 10px; }

/* ── Куки ── */
.cookie{
  position:fixed; right:16px; bottom:16px; z-index:9000;
  width:min(420px, calc(100vw - 32px));
  background:var(--graphite); color:#fff; border-radius:var(--r);
  box-shadow:0 20px 50px -20px rgba(21,25,29,.6);
  padding:18px 20px; display:flex; flex-direction:column; gap:14px;
}
.cookie[hidden]{ display:none; }
.cookie__text{ margin:0; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.78); }
.cookie__text a{ color:#fff; text-decoration:underline; cursor:pointer; }
.cookie__actions{ display:flex; }
.cookie__btn{
  min-height:44px; padding:0 22px; border:0; border-radius:var(--r); cursor:pointer;
  font:600 16px var(--display); background:var(--oak); color:var(--graphite);
}
.cookie__btn:hover{ background:var(--oak-hover); }

/* ── Подвал ── */
.footer{ background:var(--ink); color:rgba(255,255,255,.66); padding:56px 0 44px; }
.footer a{ color:#fff; }
.footer__row{ display:flex; gap:48px; flex-wrap:wrap; justify-content:space-between; }
.footer__col{ font-size:14.5px; line-height:1.7; max-width:520px; }
.footer__docs{ display:grid; gap:10px; font-size:14.5px; align-content:start; }
.footer__docs a, .footer__col a{ display:inline-block; padding:10px 0; margin:-10px 0; }
.footer__requisites{ margin-top:20px; font-size:13px; color:rgba(255,255,255,.5); }

/* ── Страница «Спасибо» ── */
.thanks{ padding:56px 0 96px; background:var(--zinc); }
.thanks__box{ max-width:780px; margin:0 auto; background:#fff; border-radius:var(--r); padding:48px 44px; }
.thanks__check{
  width:56px; height:56px; border-radius:50%; background:var(--oak); color:var(--graphite);
  display:flex; align-items:center; justify-content:center; font:700 26px var(--display); margin-bottom:18px;
}
.thanks__check[hidden]{ display:none; }
.thanks h1{ font-size:clamp(32px,3.4vw,44px); line-height:1.05; color:var(--graphite); margin:0 0 12px; }
.thanks__when{ background:var(--zinc); border-radius:var(--r); padding:16px 20px; margin:20px 0; font-size:15.5px; }
.thanks__box p a, .thanks__when a{ display:inline-block; padding:11px 0; margin:-11px 0; }
.thanks__answers{ margin:18px 0; font-size:15px; }
.thanks__answers div{ margin-bottom:5px; }
.thanks__steps{ margin:22px 0 0; padding:0 0 0 20px; font-size:16px; }
.thanks__steps li{ margin-bottom:10px; }
.thanks .section-sub{ max-width:none; }

/* ══ Адаптив ══ */
@media (max-width:1180px){
  .nav{ display:none; }
  .header__row{ gap:20px; }
  .header__phone{ margin-left:auto; }
  .works{ grid-template-columns:repeat(3,1fr); }
  .terms{ grid-template-columns:1fr 1fr; }
  .terms li:nth-child(3){ padding-left:0; border-left:0; }
  .terms li:nth-child(n+3){ border-top:1px solid var(--rule); }
}
@media (max-width:1024px){
  .hero__grid{ grid-template-columns:1fr; min-height:0; }
  .hero__media{ order:-1; aspect-ratio:16/10; }
  .hero__text{ padding:44px 32px 52px; }
  .split, .final__row{ grid-template-columns:1fr; gap:32px; }
  .split__head, .consultant{ position:static; }
  .split--wide{ margin-bottom:40px; }
  .stair{ grid-template-columns:1fr; }
  .stair__step{
    min-height:0; display:grid; grid-template-columns:64px 1fr; column-gap:16px;
    box-shadow:none; background:transparent;
    border-top-width:6px; padding:20px 4px 24px 0;
  }
  .stair__n{ grid-row:1 / span 2; font-size:44px; margin:0; }
  .quiz{ grid-template-columns:1fr; gap:20px; }
  .consultant{ display:flex; gap:14px; align-items:center; }
  .consultant__avatar{ width:56px; height:56px; font-size:18px; margin:0; flex-shrink:0; }
  .consultant__note{ display:none; }
}
@media (max-width:760px){
  body{ font-size:16.5px; }
  .container, .shell{ padding:0 18px; }
  .header__row{ min-height:60px; gap:12px; }
  .socials, .header__call, .header__hours{ display:none; }
  .header__phone a{ font-size:17px; }
  .logo__name{ font-size:21px; }
  .hero__media{ aspect-ratio:4/3; }
  .hero__dim{ left:16px; }
  .hero__text{ padding:30px 18px 40px; }
  .hero__where{ font-size:14.5px; margin-bottom:16px; }
  .hero h1{ font-size:clamp(38px, 11vw, 48px); max-width:none; }
  .hero__lead{ font-size:17px; }
  .facts{ grid-template-columns:1fr; margin:28px 0 30px; }
  .fact, .fact + .fact{ padding:14px 0; border-left:0; display:grid; grid-template-columns:minmax(0,9.5em) 1fr; gap:14px; align-items:baseline; }
  .fact + .fact{ border-top:1px solid var(--rule-dark); }
  .fact dt{ font-size:24px; margin:0; }
  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width:100%; }
  .terms{ grid-template-columns:1fr; padding:0 18px; }
  .terms li, .terms li + li{ padding:16px 0; border-left:0; }
  .terms li + li{ border-top:1px solid var(--rule); }
  .sec{ padding:72px 0; }
  .section-title{ font-size:clamp(32px, 9vw, 40px); }
  .points, .parts{ grid-template-columns:1fr; gap:32px; }
  .part, .part + .part{ padding:22px 0 0; border-left:0; }
  .works{ grid-template-columns:1fr 1fr; gap:24px 12px; }
  .work__cap{ font-size:13.5px; }
  .quiz__panel{ padding:24px 18px; min-height:0; }
  .quiz__question{ font-size:25px; }
  .quiz__options--2col{ grid-template-columns:1fr; }
  .final{ padding:72px 0; }
  .final .btn{ width:100%; }
  .footer__row{ flex-direction:column; gap:28px; }
  .modal__box{ padding:32px 22px; }
  .popup__box{ padding:36px 22px 26px; }
  .thanks{ padding:24px 0 64px; }
  .thanks__box{ padding:32px 20px; }

  .calc{ padding:18px 14px 14px; }
  .calc__row--head{ display:none; }
  .calc__row{ grid-template-columns:1fr auto; gap:4px 12px; }
  .calc__row > div:nth-child(1){ grid-column:1 / -1; }
  .calc__row > div:nth-child(2){ color:var(--steel); font-size:14px; }
  .calc__row > div:nth-child(3){ text-align:right; }
  .calc__row > div:nth-child(4){ display:none; }
  .calc__price{ font-size:27px; }

  .cookie{ left:8px; right:8px; bottom:8px; width:auto; flex-direction:row; align-items:center; padding:12px 14px; gap:12px; }
  .cookie__text{ font-size:12.5px; line-height:1.4; }
  .cookie__actions{ flex-shrink:0; }
}
@media (max-width:400px){
  .hero h1{ font-size:36px; }
  .fact, .fact + .fact{ grid-template-columns:1fr; gap:2px; }
}