@charset "UTF-8";

/* Мобильная версия страниц сервисов. Собирается в /assets/css/media/340/service.css
   и подключается только на этих страницах.

   ВАЖНО: мобильного макета для страницы сервиса нет — раскладка собрана по логике
   мобильной главной (одна колонка, картинка над текстом, карточки во всю ширину).
   Размеры пишем в px от базы 340, сборка переводит их в vw. */

@media (max-width: 680px) {
  /* ── кнопка ── */

  .sv_btn {
    gap: 3.58824vw;
    padding: 1.52941vw 1.52941vw 1.52941vw 4.61765vw;
    border-radius: 4.61765vw;
    font-size: 3.58824vw;
  }

  .sv_btn i {
    width: 10.26471vw;
    height: 10.26471vw;
    border-radius: 3.32353vw;
  }

  .sv_btn i::after {
    left: 3.20588vw;
    top: 3.47059vw;
    width: 3.85294vw;
    height: 3.41176vw;
  }

  /* ── хлебные крошки ── */

  .svb {
    margin-bottom: 3.08824vw;
  }

  /* на мобильной подтягивать вверх некуда — там шапка */

  .sv1--crumbs .svb {
    margin-top: 0;
    margin-bottom: 3.08824vw;
  }

  .svb ol {
    flex-wrap: nowrap;
    gap: 1.02941vw;
  }

  .svb li {
    gap: 1.02941vw;
    font-size: 3.08824vw;
  }

  /* ── SV1 герой ── */

  .sv1 {
    padding-top: 20.64706vw;
  }

  .sv1_grid {
    flex-direction: column;
  }

  .sv1_txt {
    width: 100%;
  }

  .sv1_txt h1 {
    font-size: 8.20588vw;
  }

  .sv1_check {
    gap: 3.58824vw;
    margin-top: 6.14706vw;
  }

  .sv1_check img {
    width: 4.61765vw;
    height: 4.61765vw;
  }

  .sv1_check span {
    font-size: 3.85294vw;
  }

  .sv1 .sv_btn {
    margin-top: 6.14706vw;
  }

  /* холст ужимаем целиком, чтобы не пересчитывать каждый слой */

  .sv1_img_wrap {
    width: 100%;
    height: 73.82353vw;
    margin-top: 5.11765vw;
    /* overflow: hidden; */
  }

  .sv1_img {
    transform: translate(0, 3.08824vw) scale(0.525);
    transform-origin: 0 0;
  }

  /* ── SV2 картинка + текст (и «Безопасность») ── */

  .sv2 {
    padding-top: 16.41176vw;
  }

  .sv2_grid {
    flex-direction: column;
    gap: 6.14706vw;
  }

  .sv2_img,
  .sv2--safety .sv2_img {
    width: 100%;
    height: auto;
    overflow: visible;
    order: 2;
  }

  .sv2_img img,
  .sv2--safety .sv2_img img {
    position: relative;
    left: auto;
    top: auto;
    width: 114%;
    height: auto;
  }

  .sv2_txt,
  .sv2--safety .sv2_txt {
    width: 100%;
    height: auto;
    gap: 4.08824vw;
  }

  .sv2_txt h2 {
    font-size: 7.17647vw;
  }

  .sv2_lead {
    width: 100%;
    gap: 3.08824vw;
  }

  .sv2_lead p {
    font-size: 3.85294vw;
  }

  .sv2--safety .sv_btn {
    margin-top: 1.02941vw;
  }

  /* ── SV3 коричневая карточка ── */

  .sv3 {
    padding-top: 0;
    margin: 0 0 0;
  }

  .sv3_card {
    height: auto;
    border-radius: 6.14706vw;
  }

  /* на узкой карточке предметы всё равно оказывались за кадром — прячем сцену,
     остаётся только текстура фона */

  .sv_scene {
    display: none;
  }

  /* слева на картинке чистая текстура — держим её под текстом */

  .sv3_card_bg {
    -o-object-position: 22% center;
    object-position: 22% center;
  }

  .sv3_body {
    padding: 6.14706vw 5.11765vw;
  }

  .sv3_txt {
    width: 100%;
    gap: 4.08824vw;
  }

  .sv3_txt h2 {
    font-size: 7.17647vw;
  }

  .sv3_lead {
    width: 100%;
    font-size: 3.85294vw;
  }

  .sv3_lead br {
    display: none;
  }

  .sv3_chips {
    width: 100%;
    gap: 1.52941vw;
  }

  .sv3_chips li {
    height: 8.20588vw;
    padding: 0 2.55882vw;
    border-radius: 2.55882vw;
    gap: 1.52941vw;
  }

  .sv3_chips img {
    width: 3.58824vw;
    height: 3.58824vw;
  }

  .sv3_chips span {
    font-size: 2.72353vw;
  }

  .sv3 .sv_btn {
    margin-top: 6.14706vw;
  }

  .sv3_notes {
    flex-direction: column;
    gap: 3.08824vw;
    margin-top: 3.08824vw;
  }

  .sv3_note {
    width: 100%;
    min-height: 0;
    padding: 5.11765vw;
    border-radius: 5.11765vw;
    gap: 3.08824vw;
  }

  .sv3_note_head {
    gap: 3.08824vw;
  }

  .sv3_note_ico {
    width: 12.29412vw;
    height: 12.29412vw;
    border-radius: 3.58824vw;
  }

  .sv3_note_ico img {
    width: 6.14706vw;
    height: 6.14706vw;
  }

  .sv3_note h3 {
    font-size: 4.08824vw;
  }

  .sv3_note p {
    font-size: 3.58824vw;
  }

  /* ── SV4 шаги ── */

  .sv4 {
    padding-top: 16.41176vw;
  }

  .sv4_bg {
    display: none;
  }

  .sv4_head {
    flex-direction: column;
    gap: 4.08824vw;
  }

  .sv4_head h2 {
    width: 100%;
    font-size: 7.17647vw;
  }

  .sv4_head_txt {
    width: 100%;
    padding-top: 0;
    gap: 3.08824vw;
  }

  .sv4_head_txt p {
    font-size: 3.58824vw;
  }

  .sv4_list {
    gap: 4.08824vw;
    margin-top: 6.14706vw;
  }

  /* порядок в колонке: заголовок с номером, текст, снизу экран телефона */

  .sv4_step {
    flex-direction: column;
    height: auto;
    padding: 5.11765vw 5.11765vw 0;
    border-radius: 5.11765vw;
  }

  .sv4_step_lf {
    order: 1;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    height: auto;
  }

  .sv4_step h3 {
    font-size: 4.61765vw;
  }

  .sv4_step_num {
    font-size: 7.17647vw;
  }

  .sv4_step_rg {
    order: 2;
    width: 100%;
    height: auto;
    margin-top: 3.08824vw;
  }

  .sv4_step_txt {
    gap: 3.08824vw;
  }

  .sv4_step_txt p {
    font-size: 3.58824vw;
  }

  /* стрелка на мобильной не нужна — это подсказка про прокрутку */

  .sv4_step_arrow {
    display: none;
  }

  .sv4_step_phone {
    order: 3;
    position: relative;
    left: auto;
    top: auto;
    width: 51.29412vw;
    height: 56.26471vw;
    margin: 4.08824vw auto 0;
  }

  /* плашка уведомления и размытие тянутся за телефоном (заданы в процентах),
     вручную ужимаем только скругления, отступы и текст */

  .sv4_step_blur {
    border-radius: 6.32353vw;
  }

  .sv4_note {
    gap: 1.70588vw;
    padding: 2.67647vw 3.05882vw;
    border-radius: 3.76471vw;
  }

  .sv4_note_ico {
    width: 6.47059vw;
    height: 6.47059vw;
  }

  .sv4_note_top {
    gap: 1.70588vw;
  }

  .sv4_note_top b {
    font-size: 2.47059vw;
  }

  .sv4_note_top time {
    font-size: 1.88235vw;
  }

  .sv4_note_descr {
    font-size: 2.29412vw;
  }

  /* ── SV5 где ещё использовать ── */

  .sv5 {
    padding-top: 16.41176vw;
  }

  .sv5_card {
    height: auto;
    border-radius: 5.11765vw;
  }

  .sv5_txt {
    width: 100%;
    height: auto;
    padding: 6.14706vw 5.11765vw;
  }

  .sv5_txt h2 {
    font-size: 7.17647vw;
  }

  .sv5_lead {
    width: 100%;
    gap: 3.08824vw;
    margin-top: 4.08824vw;
  }

  .sv5_lead p {
    font-size: 3.85294vw;
  }

  .sv5 .sv_btn {
    margin-top: 6.14706vw;
  }

  /* На узком экране ряды логотипов кладём горизонтально: вертикальная лента
     съедала бы высоту. Пятый ряд прячем — так 24 иконки раскладываются
     по четырём рядам ровно, без повторов (скрипт скрытые ряды пропускает). */

  .sv5_logos {
    position: relative;
    left: auto;
    flex-direction: column;
    gap: 3.08824vw;
    width: 100%;
    height: auto;
    margin-top: 5.11765vw;
    margin: 5.11765vw 0;
  }

  .sv5_col {
    width: 100%;
    height: 15.38235vw;
  }

  .sv5_col:nth-child(5) {
    display: none;
  }

  .sv5_col_in {
    flex-direction: row;
    gap: 3.08824vw;
    top: 0;
    left: -2.55882vw;
    -webkit-animation-name: sv5_scroll_left;
    animation-name: sv5_scroll_left;
  }

  .sv5_logo {
    width: 15.38235vw;
    height: 15.38235vw;
    border-radius: 2.91176vw;
  }

  .sv5_col--tall .sv5_col_in {
    top: 0;
    left: -7.67647vw;
    -webkit-animation-name: sv5_scroll_right;
    animation-name: sv5_scroll_right;
  }

  /* ── SV6 почему выбирают ── */

  .sv6 {
    padding-top: 58.41176vw;
  }

  .sv6_grid {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  /* холст ужимаем целиком — как в герое, чтобы не пересчитывать каждый слой */

  .sv6_img_wrap {
    width: 100%;
    height: 73vw;
    overflow: hidden;
  }

  /* масштаб считаем по всей ширине композиции: от левого края карты (-42)
     до правого края картонки с подписью (679) */

  .sv6_img {
    transform: translate(5.26471vw, 0) scale(0.49);
    transform-origin: 0 0;
  }

  .sv6_txt {
    width: 100%;
    gap: 5.11765vw;
    margin-top: 6.14706vw;
  }

  .sv6_title {
    gap: 3.08824vw;
  }

  .sv6_title h2 {
    font-size: 7.17647vw;
  }

  .sv6_title p {
    width: 100%;
    font-size: 4.61765vw;
  }

  .sv6_check {
    gap: 3.58824vw;
  }

  .sv6_check img {
    width: 4.61765vw;
    height: 4.61765vw;
  }

  .sv6_check span {
    font-size: 3.85294vw;
  }

  /* ── SV7 стоимость ── */

  .sv7 {
    padding-top: 16.41176vw;
  }

  .sv7_card {
    height: auto;
    border-radius: 6.14706vw;
  }

  .sv7_card_bg {
    -o-object-position: 22% center;
    object-position: 22% center;
  }

  .sv7_body {
    padding: 6.14706vw 5.11765vw;
  }

  .sv7_txt {
    width: 100%;
    gap: 5.11765vw;
  }

  .sv7_txt h2 {
    font-size: 7.17647vw;
  }

  .sv7_offer {
    gap: 4.08824vw;
  }

  .sv7_price {
    height: 11.26471vw;
    padding: 0 3.58824vw;
    gap: 4.08824vw;
    border-radius: 3.08824vw;
  }

  .sv7_price b {
    font-size: 6.14706vw;
  }

  .sv7_price s {
    font-size: 4.61765vw;
  }

  .sv7_offer_txt {
    gap: 3.08824vw;
  }

  .sv7_accent {
    font-size: 3.85294vw;
  }

  .sv7_note {
    font-size: 3.32353vw;
  }

  .sv7_check {
    gap: 3.58824vw;
  }

  .sv7_check img {
    width: 3.85294vw;
    height: 3.85294vw;
  }

  .sv7_check span {
    font-size: 3.58824vw;
  }

  .sv7_action {
    flex-direction: column;
    align-items: flex-start;
    gap: 3.58824vw;
    margin-top: 6.14706vw;
    margin-left: 0;
  }

  .sv7_small {
    width: 100%;
    font-size: 3.08824vw;
  }

  /* ── SVL: список сервисов ── */

  .svl_hero {
    padding-top: 25.64706vw;
  }

  /* Шапка витрины складывается в колонку — тем же приёмом, что и шапка
     страницы сервиса выше. Без этого текст сжимается до трети экрана,
     а сцена с картой встаёт сбоку и уезжает за правый край.
     min-height десктопная (600px) в колонке дала бы пустую полосу. */

  .svl_hero_grid {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .svl_hero_txt {
    width: 100%;
  }

  /* на десктопе сцену подтягивает вверх отрицательный отступ; в колонке
     он не нужен, иначе картинка наезжает на кнопку */

  .svl_hero .sv6_img_wrap {
    margin: 6.14706vw 0 0;
  }

  .svl_hero h1 {
    font-size: 8.20588vw;
  }

  .svl_hero h1 br {
    display: none;
  }

  .svl_lead {
    width: 100%;
    gap: 3.08824vw;
    margin-top: 5.11765vw;
  }

  .svl_lead p {
    font-size: 3.85294vw;
  }

  .svl_hero .sv_btn {
    margin-top: 6.14706vw;
  }

  .svl {
    padding-top: 16.41176vw;
  }

  .svl_title {
    font-size: 7.17647vw;
  }

  .svl_group {
    margin-top: 7.17647vw;
    font-size: 4.61765vw;
  }

  .svl_grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 3.08824vw;
    margin-top: 3.58824vw;
  }

  .svl_card {
    gap: 3.08824vw;
    padding: 4.08824vw;
    border-radius: 4.08824vw;
  }

  .svl_ico {
    width: 10.26471vw;
    height: 10.26471vw;
    border-radius: 2.55882vw;
  }

  .svl_txt b {
    font-size: 3.85294vw;
  }

  .svl_txt i {
    font-size: 3.32353vw;
  }

  .svl_note {
    margin-top: 6.14706vw;
    font-size: 3.58824vw;
  }

  .svl_cta {
    padding-top: 16.41176vw;
  }

  .svl_cta_card {
    height: auto;
    border-radius: 6.14706vw;
  }

  .svl_cta_bg {
    -o-object-position: 22% center;
    object-position: 22% center;
  }

  .svl_cta_body {
    width: 100%;
    height: auto;
    gap: 4.08824vw;
    padding: 6.14706vw 5.11765vw;
  }

  .svl_cta_body h2 {
    font-size: 7.17647vw;
  }

  .svl_cta_body h2 br {
    display: none;
  }

  .svl_cta_body p {
    width: 100%;
    font-size: 3.85294vw;
  }

  /* ── SV8 SEO-текст ── */

  .sv8 {
    padding-top: 16.41176vw;
  }

  .sv8 .main {
    gap: 4.08824vw;
  }

  .sv8 p {
    font-size: 3.32353vw;
  }

  .b8_body p br {
    display: none;
  }
}