/* ============================================================
   Цены для частных клиентов: первый экран, калькулятор, прайс.
   Токены, кнопки, шапка, блок вызова и подвал — из styles.css.
   Здесь только то, чего на главной нет.
   ============================================================ */

/* Лестница входа задаётся классами: без style= в разметке */
.at-100{ --d:100ms; } .at-200{ --d:200ms; } .at-300{ --d:300ms; }
.at-420{ --d:420ms; } .at-520{ --d:520ms; } .at-600{ --d:600ms; }
.at-760{ --d:760ms; } .at-900{ --d:900ms; } .at-1040{ --d:1040ms; }
.at-1200{ --d:1200ms; } .at-1300{ --d:1300ms; }

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

.btn__ico--down{ transition:transform 520ms var(--e), background 520ms var(--e); }
.btn--ghost:hover .btn__ico--down{ transform:translateY(4px); }

/* ---------- ПЕРВЫЙ ЭКРАН: схема C ----------
   Слева текст, прижатый к нижней трети; справа кадр на всю высоту,
   в край окна, без скругления. Оптический центр пустой. */
.phero{
  display:grid; grid-template-columns:60fr 40fr;
  min-height:100svh;
}
.phero__copy{
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(96px,14vh,140px) var(--pad) clamp(56px,13vh,128px);
}
.phero__title{
  margin-top:var(--s3);
  font-size:clamp(3rem,7.2vw,8.4rem);
  line-height:.9; letter-spacing:-.04em;
}
.phero__sub{ margin-top:var(--s3); max-width:58ch; color:var(--t2); }
.phero__act{ margin-top:var(--s4); display:flex; flex-wrap:wrap; gap:12px; }
.phero__calm{ margin-top:16px; }
.phero__tel{
  color:var(--t1); white-space:nowrap; position:relative;
}
.phero__tel::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform 520ms var(--e);
}
.phero__tel:hover::after{ transform:scaleX(1); }

.phero__media{ margin:0; position:relative; overflow:hidden; background:var(--surface); }
.phero__media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:22% 58%;
}

/* ---------- КАК ВЫЗВАТЬ: три шага сразу под первым экраном ---------- */
.how{ padding:var(--s5) var(--pad) 0; }
.how__list{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4) var(--s5);
}
.how__step{ border-top:1px solid var(--hair); padding-top:18px; }
.how__step h3{
  margin-top:12px;
  font-size:clamp(20px,1.8vw,26px); line-height:1.06; letter-spacing:-.02em;
}
.how__step p{ margin-top:10px; max-width:36ch; font-size:14px; color:var(--t2); text-wrap:balance; }

/* ---------- КАЛЬКУЛЯТОР ---------- */
.calc{ padding:var(--s7) var(--pad) var(--s6); }

.calc__head,
.plist__head{
  display:grid; grid-template-columns:minmax(180px,22%) 1fr; gap:var(--s4);
  padding-bottom:var(--s5);
}
.calc__head h2,
.plist__head h2{ font-size:clamp(2rem,4.6vw,4.4rem); }
.calc__head p:not(.label),
.plist__head p:not(.label):not(.plist__cash){
  margin-top:var(--s3); max-width:52ch; color:var(--t2); text-wrap:balance;
}

.calc__body{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:var(--s5) var(--s6); align-items:start;
}
.calc__form{ min-width:0; }
.calc__noscript{ margin-top:var(--s4); color:var(--t2); }

.step{ margin:0; padding:0; border:0; min-width:0; }
.step + .step{ margin-top:var(--s5); }
.step__legend{ padding:0; width:100%; }
.step__head{
  display:flex; align-items:baseline; gap:14px;
  padding-bottom:16px; border-bottom:1px solid var(--hair);
}
.step__title{
  font-size:clamp(20px,1.9vw,28px); font-weight:300;
  line-height:1.05; letter-spacing:-.02em;
}
.step__hint{ margin-top:16px; max-width:58ch; font-size:13px; line-height:1.55; color:var(--t3); text-wrap:balance; }

/* поля выбора прячем, но оставляем в фокусе клавиатуры */
.chip input,.opt input,.xtra input{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}

/* группы транспорта: прозрачная капсула с волосяной линией, выбранная — светлая, без рамки */
.chips{ margin-top:var(--s3); display:flex; flex-wrap:wrap; gap:8px; }
.chip{ position:relative; }
.chip span{
  display:inline-flex; align-items:center;
  min-height:44px; padding:0 20px;
  border:1px solid var(--hair); border-radius:var(--r-pill);
  font-size:14px; color:var(--t2); cursor:pointer;
  transition:background 500ms var(--e), color 320ms var(--e),
             border-color 500ms var(--e), transform 620ms var(--e);
}
.chip:hover span{ color:var(--t1); border-color:rgba(232,229,224,.34); transform:translateY(-2px); }
.chip input:checked + span{ background:var(--paper); color:var(--ink); border-color:transparent; transform:none; }
.chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:3px; }

/* варианты внутри группы */
.opts{ margin-top:var(--s3); display:grid; gap:4px; }
.opt{
  position:relative;
  display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:16px;
  min-height:58px; padding:10px 18px; margin:0 -18px;
  border-radius:14px; cursor:pointer;
  transition:background 500ms var(--e);
}
.opt:hover{ background:rgba(232,229,224,.035); }
.opt:has(input:checked){ background:var(--surface); }
.opt__mark{
  position:relative; width:20px; height:20px; border-radius:50%;
  border:1px solid rgba(232,229,224,.34);
  transition:border-color 320ms var(--e);
}
.opt__mark::after{
  content:""; position:absolute; inset:4px; border-radius:50%;
  background:var(--accent); transform:scale(0);
  transition:transform 520ms var(--e);
}
.opt input:checked ~ .opt__mark{ border-color:var(--accent); }
.opt input:checked ~ .opt__mark::after{ transform:scale(1); }
.opt input:focus-visible ~ .opt__mark{ outline:2px solid var(--accent); outline-offset:3px; }
.opt__name{ color:var(--t2); transition:color 320ms var(--e); text-wrap:balance; }
.opt input:checked ~ .opt__name{ color:var(--t1); }
.opt__price{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.opt__price b{ display:block; font-weight:400; font-size:15px; }
.opt__price small{ display:block; margin-top:2px; font-size:12px; color:var(--t3); }

/* масса спецтехники */
.mass{ margin-top:var(--s3); }
.mass__row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:10px 0;
}
.mass__label{ color:var(--t2); }

/* счётчик: круглые кнопки по бокам */
.stepper{ display:inline-flex; align-items:center; gap:6px; }
.stepper button{
  display:grid; place-items:center;
  width:44px; height:44px; padding:0;
  border:1px solid var(--hair); border-radius:var(--r-pill);
  background:transparent; color:var(--t1); cursor:pointer;
  transition:background 500ms var(--e), transform 620ms var(--e), opacity 320ms var(--e);
}
.stepper button:hover{ background:rgba(232,229,224,.08); transform:translateY(-2px); }
.stepper button:disabled{ opacity:.28; cursor:default; transform:none; background:transparent; }
.stepper button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.stepper output,
.stepper__field input{
  min-width:3.2ch; text-align:center; font-variant-numeric:tabular-nums;
  font-size:17px; color:var(--t1);
}
.stepper__field{ display:inline-flex; align-items:baseline; gap:4px; }
.stepper__field input{
  width:4ch; padding:6px 0; background:transparent; border:0;
  border-bottom:1px solid var(--hair); font-family:inherit;
  -moz-appearance:textfield; appearance:textfield;
}
.stepper__field span{ font-size:13px; color:var(--t3); }

/* расстояние */
.dist{
  margin-top:var(--s3);
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--s4);
}
.range{
  --p:6.67%;
  -webkit-appearance:none; appearance:none;
  width:100%; height:44px; margin:0; background:transparent; cursor:pointer;
}
.range::-webkit-slider-runnable-track{
  height:2px; border-radius:2px;
  background:linear-gradient(to right, var(--accent) var(--p), rgba(232,229,224,.16) var(--p));
}
.range::-moz-range-track{ height:2px; border-radius:2px; background:rgba(232,229,224,.16); }
.range::-moz-range-progress{ height:2px; border-radius:2px; background:var(--accent); }
.range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; margin-top:-11px; border-radius:50%;
  background:var(--paper); box-shadow:0 8px 20px -6px rgba(0,0,0,.8);
  transition:transform 620ms var(--e);
}
.range::-moz-range-thumb{
  width:24px; height:24px; border:0; border-radius:50%;
  background:var(--paper); box-shadow:0 8px 20px -6px rgba(0,0,0,.8);
}
.range:active::-webkit-slider-thumb{ transform:scale(1.14); }
.range:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:6px; }

.dist__num{
  display:inline-flex; align-items:baseline; gap:8px;
  padding-bottom:6px; border-bottom:1px solid var(--hair);
  transition:border-color 500ms var(--e);
}
.dist__num:focus-within{ border-bottom-color:var(--accent); }
.dist__num input{
  width:4.2ch; padding:0; background:transparent; border:0; outline:0;
  color:var(--t1); text-align:right;
  font-family:inherit; font-weight:300; font-size:clamp(30px,2.8vw,42px);
  line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  -moz-appearance:textfield; appearance:textfield;
}
.dist__num input::-webkit-outer-spin-button,
.dist__num input::-webkit-inner-spin-button,
.stepper__field input::-webkit-outer-spin-button,
.stepper__field input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.dist__num span{ font-size:14px; color:var(--t3); }

/* дополнительные услуги: название и цена слева, управление справа */
.extras{ margin-top:var(--s3); display:grid; gap:4px; }
.xtra{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--s3);
  min-height:62px; padding:8px 18px; margin:0 -18px;
  border-radius:14px;
  transition:background 500ms var(--e);
}
label.xtra{ cursor:pointer; }
.xtra:hover{ background:rgba(232,229,224,.035); }
.xtra.is-on{ background:var(--surface); }
.xtra__name{ display:block; color:var(--t2); transition:color 320ms var(--e); text-wrap:balance; }
.xtra.is-on .xtra__name{ color:var(--t1); }
.xtra__price{ display:block; margin-top:2px; font-size:12.5px; color:var(--t3); font-variant-numeric:tabular-nums; }
.xtra__box{
  display:grid; place-items:center;
  width:22px; height:22px; border-radius:6px;
  border:1px solid rgba(232,229,224,.34); color:var(--ink);
  transition:background 320ms var(--e), border-color 320ms var(--e);
}
.xtra__box svg{ opacity:0; transform:scale(.5); transition:opacity 320ms var(--e), transform 520ms var(--e); }
.xtra input:checked ~ .xtra__box{ background:var(--accent); border-color:var(--accent); }
.xtra input:checked ~ .xtra__box svg{ opacity:1; transform:none; }
.xtra input:focus-visible ~ .xtra__box{ outline:2px solid var(--accent); outline-offset:3px; }

/* итог сбоку: держится в поле зрения, пока крутят настройки */
.sum{
  position:sticky; top:104px;
  background:var(--surface); border-radius:var(--r);
  padding:32px 32px 30px;
}
.sum__total{
  margin-top:14px;
  font-size:clamp(3rem,4.8vw,5.2rem); font-weight:300;
  line-height:.9; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.sum__from{
  font-size:.4em; letter-spacing:-.01em; color:var(--t2);
  margin-right:.24em; vertical-align:.14em;
}
.sum__cash,
.plist__cash{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13.5px; color:var(--t1);
}
.sum__cash{ margin-top:18px; }
.sum__cash svg,
.plist__cash svg{ color:var(--accent); flex:none; }

.sum__lines{
  margin:var(--s3) 0 0; padding:18px 0 0; list-style:none;
  border-top:1px solid var(--hair);
  display:grid; gap:10px;
}
.sum__lines li{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  font-size:14px; color:var(--t2);
}
.sum__lines b{ font-weight:400; color:var(--t1); white-space:nowrap; font-variant-numeric:tabular-nums; }
.sum__lines li.is-what{ display:block; color:var(--t1); text-wrap:balance; }
.sum__note{ margin-top:var(--s3); font-size:12.5px; line-height:1.55; color:var(--t3); text-wrap:pretty; }
.sum__act{ margin-top:var(--s4); display:grid; gap:10px; }
.sum__act .btn{ justify-content:space-between; }
.sum__calm{ margin-top:14px; }

/* На узком экране итог уезжает под форму; чтобы цену было видно
   во время настройки, внизу экрана держится короткая плашка. */
.calc__bar{ display:none; }

/* ---------- ПРАЙС-ЛИСТ ---------- */
.plist{ padding:var(--s6) var(--pad); }
.plist__cash{ margin-top:var(--s3); }

.plist__grid{ columns:2; column-gap:var(--s6); }
.pl{ break-inside:avoid; margin:0 0 var(--s5); display:inline-block; width:100%; }
.pl__head{
  display:flex; align-items:baseline; gap:14px;
  padding-bottom:14px; border-bottom:1px solid var(--hair);
}
.pl__head h3{ font-size:clamp(20px,1.8vw,26px); }

.pl__table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.pl__table thead th{
  padding:16px 0 8px 16px;
  font-size:11px; line-height:1.6; font-weight:400;
  text-transform:uppercase; letter-spacing:.16em; color:var(--t3);
  text-align:right; white-space:nowrap;
}
.pl__table thead th:first-child{ padding-left:0; text-align:left; }
.pl__table tbody th{
  padding:12px 16px 12px 0;
  font-weight:400; text-align:left; color:var(--t2); text-wrap:balance;
}
.pl__table td{ padding:12px 0 12px 16px; text-align:right; white-space:nowrap; color:var(--t1); }
.pl__table td:last-child{ color:var(--t2); }
.pl__table tbody tr + tr > *{ border-top:1px solid rgba(232,229,224,.07); }
.pl__table .from{ color:var(--t3); }
.pl--extras .pl__table td:last-child{ color:var(--t1); }

.plist__note{ max-width:62ch; font-size:13px; line-height:1.55; color:var(--t3); }

/* ---------- планшет ---------- */
@media (max-width:1080px){
  .calc__head,.plist__head{ grid-template-columns:1fr; gap:var(--s3); }
  .calc__body{ grid-template-columns:1fr; }
  .sum{ position:static; }
}

/* ---------- мобильный ---------- */
@media (max-width:720px){
  /* Схема C на телефоне складывается: кадр полосой сверху, текст под ним.
     Кнопка остаётся в первом экране. */
  .phero{ grid-template-columns:1fr; grid-template-rows:auto 1fr; min-height:100svh; }
  .phero__media{ order:-1; height:32svh; min-height:210px; }
  .phero__copy{ justify-content:flex-start; padding:26px var(--pad) 32px; }
  .phero__title{ margin-top:12px; font-size:clamp(2.7rem,13vw,3.6rem); }
  .phero__sub{ margin-top:16px; font-size:15px; }
  .phero__sub br{ display:none; }
  .phero__act{ margin-top:22px; gap:10px; }
  .phero__act .btn{ flex:1 1 auto; justify-content:space-between; }
  /* звонок на телефоне уже в шапке и на кнопке — подпись оставляем короткой */
  .phero__sep,.phero__tel{ display:none; }

  .how{ padding-top:var(--s4); }
  .how__list{ grid-template-columns:1fr; gap:var(--s3); }

  .calc{ padding:var(--s6) var(--pad) var(--s5); }
  .opt,.xtra{ padding:10px 14px; margin:0 -14px; gap:12px; }
  /* у счётчика название занимает всю строку, цена и кнопки — под ним */
  .xtra--count{ row-gap:6px; padding-top:12px; padding-bottom:10px; }
  .xtra--count .xtra__txt{ display:contents; }
  .xtra--count .xtra__name{ grid-column:1 / -1; }
  .xtra--count .xtra__price{ grid-column:1; margin-top:0; }
  .xtra--count .stepper{ grid-column:2; }
  .dist{ gap:var(--s3); }
  .sum{ padding:26px 22px 24px; }

  .calc__bar{
    position:sticky; bottom:12px; z-index:5;
    display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:14px;
    margin-top:var(--s4); padding:12px 18px;
    background:var(--paper); color:var(--ink);
    border-radius:16px;
    box-shadow:0 24px 60px -24px rgba(0,0,0,.9);
  }
  .calc__bar-label{
    font-size:10.5px; text-transform:uppercase; letter-spacing:.16em;
    color:rgba(14,16,18,.55);
  }
  .calc__bar-total{
    grid-row:span 2; grid-column:2;
    font-size:28px; font-weight:300; letter-spacing:-.03em;
    font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  .calc__bar-cash{ font-size:12px; color:rgba(14,16,18,.6); }

  .plist__grid{ columns:1; }
  .pl__table thead th{ padding-left:10px; }
  .pl__table tbody th{ padding-right:10px; }
  .pl__table td{ padding-left:10px; }
}

/* Max не даёт ссылок по номеру — пишем номер текстом */
.lead__max{ margin-top:var(--s3); font-size:14px; color:var(--t2); }