/* ===== Мобильная версия =====
   Десктоп не трогаем: всё ниже — только для узких экранов.
   ≤ 900px — телефон и планшет в портрете, ≤ 400px — маленькие телефоны. */

.hdr__call { display: none; }

@media (max-width: 900px) {
  :root { --gut: 16px; }
  body { font-size: 15px; }
  .display { font-size: clamp(46px, 13.4vw, 110px); }
  .h-big { font-size: clamp(40px, 11.6vw, 90px); }
  .label { margin-bottom: 18px; }

  /* ---------- Шапка ---------- */
  .hdr { grid-template-columns: 1fr auto; padding: 14px var(--gut); }
  .hdr__status { display: none; }
  .logo { font-size: 17px; }
  .logo i { width: 8px; height: 18px; }
  .logo__pill { font-size: 11px; padding: 5px 9px 6px; margin-top: 5px; }
  .hdr__actions .btn { display: none; }
  .hdr__call {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    box-shadow: 0 1px 2px rgba(12, 13, 18, .08), 0 6px 18px -8px rgba(12, 13, 18, .35);
  }
  .hdr.on-dark .hdr__call { background: #fff; color: var(--ink); }
  .menu-btn { height: 44px; }

  /* ---------- Меню ---------- */
  .jelly-pad { padding: 20px 20px 22px; }
  .menu-form__row input { font-size: 16px; }
  .menu-label { font-size: 28px; }
  .menu-link { padding: 7px 0; }
  .menu-link:hover .menu-label { transform: none; }
  .menu-link:hover .menu-arrow { opacity: 0; }

  /* ---------- Первый экран ---------- */
  .hx { height: auto; min-height: 0; }
  .hx__ui,
  .hx__ui--photo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: auto;
    padding: 112px var(--gut) 28px;
  }
  /* порядок: заголовок → текст → «Позвоните» → три факта → фото → купон */
  .hx__ui--photo .hx__copy, .hx__deal { display: contents; }
  .hx__title { order: 1; }
  .hx__lead { order: 2; }
  .hx__deal .hcall { order: 3; }
  .hx__facts3 { order: 4; }
  .hx__ui--photo .hx__media { order: 5; }
  .hx__deal .hcoupon { order: 6; }

  .hx--photo .hx__title { font-size: 10.6vw; line-height: .92; }
  .hx__lead { margin-top: 4px; font-size: 16px; }
  /* три факта — одна строка-карточка: крупное значение, под ним подпись */
  .hx__facts3 { margin-top: 0; gap: 0; padding: 14px 0; border-radius: 18px; background: #fff; }
  .hx__facts3 .fact { align-self: stretch; gap: 6px; padding: 0 14px; border-top: 0; }
  .hx__facts3 .fact + .fact { border-left: 1px solid var(--line); }
  .hx__facts3 .fact b { font-size: 27px; white-space: nowrap; }
  /* единицы — средние, на одной линии с числом: «30 мин», «0 ₽», «2 года» */
  .hx__facts3 .fact b sup, .hx__facts3 .fact b .u { font-size: .62em; letter-spacing: -.02em; vertical-align: baseline; top: 0; margin-left: .18em; }
  .hx__facts3 .fact b .u { margin-left: 0; }
  .hx__facts3 .fact__n { order: 2; }
  .fact__n > span:first-child { display: none; }
  .m-only { display: inline; }
  .d-only { display: none; }
  .hx__facts3 .fact p { display: none; }

  .hx__media, .hx__ui--photo .hx__media { margin-top: 0; aspect-ratio: 4 / 4.4; border-radius: 22px; }
  .hx__media img { object-position: 52% 22%; }
  .hx__badge { left: 12px; top: 12px; font-size: 9px; padding: 7px 11px 7px 10px; }
  .hx__cap { left: 16px; right: 16px; bottom: 14px; gap: 10px; }
  .hx__cap q { font-size: 18px; }
  .hx__cap .hx__who { font-size: 9px; padding: 7px 11px; }

  .hcall { padding: 18px 18px 16px; }
  .hcall__num { font-size: 28px; }
  .hcall__btns .btn { height: 50px; font-size: 16px; }
  .mbtn { height: 48px; }

  .hcoupon { padding: 20px 18px 16px; border-radius: 22px; }
  .hx__deal .hcoupon__head b { font-size: 40px; }
  .hcoupon__head p { font-size: 13px; }
  .hcoupon__form { flex-direction: column; border-radius: 18px; padding: 6px; gap: 6px; }
  .hcoupon__form input { flex: none; height: 52px; padding: 0 16px; border-radius: 13px; background: #f1f2f5; font-size: 17px; }
  .hcoupon__form .btn { height: 50px; width: 100%; justify-content: space-between; font-size: 15px; padding-left: 20px; }
  .hcoupon__form .btn-ico { width: 38px; height: 38px; }
  .hcoupon::before, .hcoupon::after { top: 36%; }

  /* ---------- Шапки секций ---------- */
  .sec-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 40px; }
  .sec-head__note { max-width: none; padding-bottom: 0; }

  /* ---------- Обо мне ---------- */
  .about { grid-template-columns: 1fr; gap: 28px; padding: 64px var(--gut) 90px; }
  .stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .stats li { padding: 14px 0 16px; }
  .stats li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .stats b { font-size: 38px; }
  .stats span { font-size: 13px; margin-top: 6px; }
  .about__main { padding-top: 0; }
  .lead { font-size: 27px; line-height: 1.14; text-wrap: pretty; }
  .about__foot { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 32px; }

  /* ---------- Услуги ---------- */
  .sheet { margin-top: -28px; border-radius: 28px 28px 0 0; }
  .services { padding: 70px var(--gut) 60px; }
  .acc__row {
    grid-template-columns: auto 1fr 40px;
    grid-template-areas: "t t pm" "time p pm";
    gap: 8px 12px;
    padding: 18px 0;
  }
  .acc__row .n, .acc__row .d { display: none; }
  .acc__row .t { grid-area: t; font-size: 24px; }
  .acc__row .time { grid-area: time; }
  .acc__row .p { grid-area: p; text-align: left; font-size: 15px; color: rgba(255, 255, 255, .85); }
  .acc__row:hover .t { transform: none; }
  .acc__row > span:last-child { grid-area: pm; }
  .pm { width: 40px; height: 40px; }
  .acc__in { display: block; }
  .acc__in > p { font-size: 15px; padding-bottom: 18px; }
  .acc__in > div { padding-bottom: 26px; }

  /* ---------- Правила ---------- */
  .rules { padding: 40px var(--gut) 90px; }
  .rules__grid { grid-template-columns: 1fr; gap: 28px; }
  .rules__head .muted { margin-top: 16px; }
  .rtable li { grid-template-columns: 1fr auto; gap: 6px 16px; padding: 16px 0; }
  .rtable li:hover { padding-left: 0; }
  .rtable .t { font-size: 22px; }
  .rtable .d { grid-column: 1 / -1; grid-row: 2; font-size: 10px; }
  .rtable .v::before { width: 28px; height: 28px; background-size: 14px; }
  .bignums { grid-template-columns: 1fr 1fr; gap: 30px 16px; margin-top: 70px; }
  .bignums > div { padding-left: 14px; }
  .bignums b { font-size: 46px; }
  .bignums p { font-size: 13px; margin-top: 8px; }

  /* ---------- Скидки ---------- */
  .promo { padding: 70px var(--gut) 40px; }
  .coupons { grid-template-columns: 1fr; gap: 14px; }
  .coupon { grid-template-columns: 1fr; min-height: 0; border-radius: 22px; }
  .coupon__l { padding: 22px 22px 20px; }
  .coupon__v { font-size: 96px; margin: 26px 0 12px; }
  .coupon__l p:last-child { font-size: 15px; }
  .coupon__r {
    border-left: 0;
    border-top: 2px dashed rgba(12, 13, 18, .18);
    flex-direction: row;
    align-items: center;
    padding: 16px 22px;
  }
  .coupon__r::before { left: -16px; top: -17px; }
  .coupon__r::after { left: auto; right: -16px; top: -17px; bottom: auto; }
  .coupon__r .mono { writing-mode: horizontal-tb; transform: none; }

  /* ---------- Как вызвать: без «залипания», все шаги раскрыты, телефон-макет прячем ---------- */
  .process { height: auto; }
  .process__sticky { position: static; height: auto; display: block; padding: 80px var(--gut) 40px; }
  .process__left .h-big { margin-bottom: 0; }
  .process__right { display: none; }
  .steps { margin-top: 30px; }
  .step h3 { font-size: 23px; color: var(--ink); }
  .step p { margin-left: 50px; max-height: none; opacity: 1; margin-top: 8px; font-size: 15px; }
  .step__bar { display: none; }

  /* ---------- Отзывы ---------- */
  /* стрелки — под отзывом, ближе к пальцу */
  .reviews { display: flex; flex-direction: column; gap: 26px; padding: 80px var(--gut) 80px; }
  .reviews__side { display: contents; }
  .reviews__side .label { order: 1; margin-bottom: 0; }
  .reviews__main { order: 2; }
  .reviews__nav { order: 3; }
  .rslides { min-height: 0; }
  .rslide blockquote { font-size: 25px; line-height: 1.16; }
  .rslide figcaption { margin-top: 24px; }
  .rprog { margin-top: 30px; }
  .rnav { width: 48px; height: 48px; }

  /* ---------- Кейсы ---------- */
  .works { padding: 20px var(--gut) 90px; }
  .works__grid { grid-template-columns: 1fr; row-gap: 48px; }
  /* на телефоне сначала три квартирные и срочные работы, остальные — по кнопке */
  .works:not(.is-all) .works__grid > .case:nth-child(n+4) { display: none; }
  .works__more { display: inline-flex; margin-top: 40px; width: 100%; justify-content: space-between; }
  .works.is-all .works__more { display: none; }
  .case:nth-child(even),
  .case:nth-child(even).fu.is-in { transform: none; }
  .case:nth-child(even).fu { transform: translateY(26px); }
  .case__img { border-radius: 18px; }
  .case__cap { left: 12px; bottom: 12px; font-size: 10px; }
  .case__meta { margin-top: 16px; }
  .case__meta h3 { font-size: 24px; }

  /* ---------- Вопросы ---------- */
  .faq { grid-template-columns: 1fr; gap: 26px; padding: 20px var(--gut) 100px; }
  .faq__side .muted { margin: 16px 0 10px; }
  .acc--light .acc__row { grid-template-columns: 1fr 36px; grid-template-areas: none; padding: 18px 0; }
  .acc--light .acc__row .t { grid-area: auto; font-size: 19px; }
  .acc--light .acc__row > span:last-child { grid-area: auto; }
  .acc--light .acc__in.one p { font-size: 15px; padding-bottom: 20px; }

  /* ---------- Контакты и форма ---------- */
  .contact { padding: 70px var(--gut) 20px; }
  .contact__grid { grid-template-columns: 1fr; gap: 34px; }
  .contact .display { font-size: 13.4vw; }
  .contact__info { grid-template-columns: 1fr; gap: 26px; padding-top: 36px; }
  .big-link, .links { font-size: 28px; }
  .form { padding: 22px 18px; gap: 20px; border-radius: 22px; }
  .form__row { grid-template-columns: 1fr; gap: 18px; }
  .chip { font-size: 13px; padding: 9px 13px; }
  .form .btn-wide { height: 56px; }

  /* ---------- Подвал ---------- */
  .foot { margin-top: 70px; }
  .foot__mark { display: none; }
  .foot__logo { display: inline-grid; grid-template-columns: auto auto; align-items: center; justify-content: start; row-gap: 10px; font-size: 30px; color: #fff; }
  .foot__logo i { width: 13px; height: 30px; margin-left: 4px; background: #fff; }
  .foot__logo .logo__pill { position: static; grid-column: 1 / -1; justify-self: start; margin-top: 0; font-size: 14px; padding: 7px 12px 8px; background: #fff; color: var(--electric); }
  .foot__row { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 24px; }
  .foot__links { flex-wrap: wrap; gap: 10px 20px; }

  /* ---------- Прелоадер ---------- */
  .preloader { padding: 20px var(--gut); }
  .preloader__top span:last-child { display: none; }
  .preloader__mono { bottom: 30px; }
}

@media (max-width: 400px) {
  .hx--photo .hx__title { font-size: 10.4vw; }
  .hcall__num { font-size: 25px; }
  .hx__facts3 .fact b { font-size: 27px; }
  .lead { font-size: 24px; }
  .menu-label { font-size: 25px; }
  .acc__row .t { font-size: 21px; }
}

/* Касания: без ховер-эффектов, которые на телефоне «залипают» */
@media (hover: none) {
  .cur { display: none; }
  .hover-hint { display: none; }
  /* наведения нет — ток по схемам кейсов бежит сам, когда карточка на экране */
  .case.is-in svg .flow { opacity: 1; animation: flow 1.1s linear infinite; }
  .case.is-in svg .lamp { opacity: 1 !important; }
  .case, .coupon { cursor: auto; }
  .coupon:hover .coupon__v { transform: none; }
}

/* Планшет в портрете: фото пониже, купоны и цифры в две колонки */
@media (min-width: 600px) and (max-width: 900px) {
  .hx__media { aspect-ratio: 16 / 11; }
  .hx__media img { object-position: 50% 28%; }
  .coupons { grid-template-columns: 1fr 1fr; }
  .bignums { grid-template-columns: repeat(4, 1fr); }
  .bignums b { font-size: 40px; }
  .works__grid { grid-template-columns: 1fr 1fr; column-gap: 16px; }
}

@media (max-width: 900px) {
  .montazh { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; padding: 26px 22px 24px; border-radius: 22px; }
  .montazh__t { font-size: 40px; }
  .montazh__d { font-size: 15px; }
  .montazh__art { width: 80%; opacity: .6; }
  .montazh__btn { width: 100%; justify-content: space-between; }
}

/* название длиннее прежнего — на узких телефонах кнопка меню становится круглой, без слова */
@media (max-width: 900px) {
  .hdr { column-gap: 10px; }
}
@media (max-width: 400px) {
  .menu-btn { width: 44px; padding: 0; justify-content: center; }
  .menu-btn .roll { display: none; }
}