/* =========================================================
   ОБУСТРОЙСТВО — ЧИСТЫЙ МОБИЛЬНЫЙ HERO
   ========================================================= */
/* =====================================================
   ПК — показываем старый desktop hero
   ===================================================== */
@media (min-width: 768px) {

  html body.site-page.obustroystvo-page .obm-mobile-hero {
    display: none !important;
  }

  html body.site-page.obustroystvo-page
  .ob-page > #hero.ob-hero {
    display: block !important;
  }

}


/* Мобильный hero по умолчанию скрыт на ПК */
.obm-mobile-hero {
  display: none !important;
}

@media (max-width: 767.98px) {

  /* Старый hero */
  html body.obustroystvo-page .ob-page > #hero {
    display: none !important;
  }


  /* Сбрасываем все предыдущие эксперименты */
  html body.obustroystvo-page .obm-mobile-hero,
  html body.obustroystvo-page .obm-mobile-hero * {
    box-sizing: border-box !important;
  }

 html body.obustroystvo-page .obm-mobile-hero {
  display: grid !important;
  grid-template-rows: 345px 190px !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  zoom: 1 !important;
  transform: none !important;

  overflow: hidden !important;
  background: #fff !important;
}


 html body.obustroystvo-page .obm-mobile-hero__photo {
  position: relative !important;

  width: 100% !important;
  height: 345px !important;

  min-height: 345px !important;
  max-height: 345px !important;

  margin: 0 !important;
  padding: 0 !important;

  zoom: 1 !important;
  transform: none !important;

  overflow: hidden !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.88) 14%,
      rgba(255,255,255,.56) 28%,
      rgba(255,255,255,.18) 46%,
      rgba(255,255,255,0) 68%
    ),
    url("images/obustroystvo-hero-new.webp")
    63% 50% / cover no-repeat !important;
}

  /* Текст поверх фото */
  html body.obustroystvo-page .obm-mobile-hero__copy {
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    /* Вот здесь воздух после шапки */
    padding: 25px 22px 12px !important;

    position: relative !important;
    z-index: 2 !important;
  }


  /* Гродненская область */
  html body.obustroystvo-page .obm-mobile-hero__region {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;

    margin: 0 0 15px !important;
    padding: 0 !important;

    color: #119b43 !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  html body.obustroystvo-page .obm-mobile-hero__region svg {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
  }



  /* SVG-иконки нового мобильного hero */
  html body.obustroystvo-page .obm-mobile-hero__region svg,
  html body.obustroystvo-page .obm-benefit__icon svg {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  /* Главный заголовок */
  html body.obustroystvo-page .obm-mobile-hero__title {
    width: auto !important;
    max-width: 300px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #09275f !important;

    font-size: 35px !important;
    font-weight: 850 !important;

    line-height: .96 !important;
    letter-spacing: -.045em !important;
  }

  html body.obustroystvo-page .obm-mobile-hero__title span {
    display: block !important;
    white-space: nowrap !important;
  }


  /* Подзаголовок */
  html body.obustroystvo-page .obm-mobile-hero__lead {
    margin: 17px 0 0 !important;
    padding: 0 !important;

    color: #172944 !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
  }


  /* =====================================================
     БЕЛАЯ ЧАСТЬ — специально компактная
     ===================================================== */

  html body.obustroystvo-page .obm-mobile-hero__bottom {
    width: 100% !important;

    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;

    margin: 0 !important;
    padding: 4px 20px 6px !important;

    display: block !important;

    zoom: 1 !important;
    transform: none !important;

    overflow: hidden !important;

    background: #fff !important;
  }


  /* Две строки преимуществ */
  html body.obustroystvo-page .obm-benefit {
    width: 100% !important;

    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;

    margin: 0 !important;
    padding: 2px 0 !important;

    display: grid !important;
    grid-template-columns: 35px minmax(0,1fr) !important;

    column-gap: 8px !important;
    align-items: center !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    zoom: 1 !important;
    transform: none !important;
  }

  html body.obustroystvo-page .obm-benefit + .obm-benefit {
    border-top: 1px solid rgba(8,38,95,.10) !important;
  }


  /* Иконки */
  html body.obustroystvo-page .obm-benefit__icon {
    width: 31px !important;
    height: 31px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 7px !important;

    background: #f4faf6 !important;
    color: #0aa44a !important;
  }

  html body.obustroystvo-page .obm-benefit__icon svg {
    width: 16px !important;
    height: 16px !important;
  }


  /* Заголовок преимущества */
  html body.obustroystvo-page .obm-benefit__text strong {
    display: block !important;

    margin: 0 0 1px !important;
    padding: 0 !important;

    color: #09275f !important;

    font-size: 11.5px !important;
    font-weight: 800 !important;

    line-height: 1.03 !important;

    white-space: nowrap !important;
  }


  /* Описание — чуть меньше, как ты и просил */
  html body.obustroystvo-page .obm-benefit__text span {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #29374b !important;

    font-size: 9px !important;
    font-weight: 400 !important;

    line-height: 1.1 !important;
  }


  /* =====================================================
     ФОРМА
     ===================================================== */

  html body.obustroystvo-page .obm-mobile-form.hp-phone-box {
    width: 100% !important;
    max-width: none !important;

    margin: 4px 0 0 !important;
    padding: 0 !important;

    display: block !important;

    zoom: 1 !important;
    transform: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
  }


  html body.obustroystvo-page .obm-mobile-form__phone {
    width: 100% !important;

    height: 41px !important;
    min-height: 41px !important;
    max-height: 41px !important;

    display: flex !important;
    align-items: stretch !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border: 1px solid #d5dae0 !important;
    border-radius: 7px !important;

    background: #fff !important;
  }


  /* +375 */
  html body.obustroystvo-page .obm-mobile-form__prefix {
    flex: 0 0 88px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border-right: 1px solid #d5dae0 !important;

    color: #09275f !important;

    font-size: 12px !important;
    font-weight: 800 !important;
  }


  html body.obustroystvo-page .obm-mobile-form__phone input {
    flex: 1 1 auto !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 13px !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    font-size: 12px !important;
  }

  html body.obustroystvo-page
  .obm-mobile-form__phone input::placeholder {
    color: #adb3ba !important;
    opacity: 1 !important;
  }


  /* Зеленая кнопка */
  html body.obustroystvo-page .obm-mobile-form__button {
    width: 100% !important;

    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;

    margin: 5px 0 0 !important;
    padding: 3px 10px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 7px !important;

    background: #08a23a !important;
    color: #fff !important;
  }

  html body.obustroystvo-page .obm-mobile-form__button span {
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  html body.obustroystvo-page .obm-mobile-form__button small {
    margin-top: 1px !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

}
@media (max-width: 767.98px) {

  /* Поднимаем весь блок под шапку, размер фото не меняем */
  html body.obustroystvo-page .obm-mobile-hero {
    margin-top: -68px !important;
  }

  /* Текст не прячем под шапкой */
  html body.obustroystvo-page .obm-mobile-hero__copy {
    padding-top: 45px !important;
  }

}
/* =====================================================
   НИЖНИЙ БЕЛЫЙ БЛОК — финальная аккуратная версия
   ===================================================== */
@media (max-width: 767.98px) {

  /* Убираем жесткие 190px — блок заканчивается сразу после кнопки */
  html body.obustroystvo-page .obm-mobile-hero {
    grid-template-rows: 345px auto !important;
  }

  html body.obustroystvo-page .obm-mobile-hero__bottom {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 7px 22px 10px !important;

    overflow: visible !important;
  }


  /* ===== ДВА ПРЕИМУЩЕСТВА ===== */

  html body.obustroystvo-page .obm-benefit {
    height: auto !important;
    min-height: 55px !important;
    max-height: none !important;

    grid-template-columns: 50px minmax(0, 1fr) !important;
    column-gap: 10px !important;

    padding: 7px 0 !important;

    align-items: center !important;
  }

  html body.obustroystvo-page .obm-benefit + .obm-benefit {
    border-top: 1px solid rgba(8, 38, 95, .11) !important;
  }


  /* Иконки */
  html body.obustroystvo-page .obm-benefit__icon {
    width: 48px !important;
    height: 48px !important;

    border-radius: 11px !important;
  }

  html body.obustroystvo-page .obm-benefit__icon svg {
    width: 26px !important;
    height: 26px !important;
  }


  /* Заголовки */
  html body.obustroystvo-page .obm-benefit__text strong {
    margin: 0 0 3px !important;

    font-size: 12.5px !important;
    line-height: 1.08 !important;

    white-space: normal !important;
  }


  /* Описание */
  html body.obustroystvo-page .obm-benefit__text span {
    font-size: 10.5px !important;
    line-height: 1.18 !important;
  }


  /* ===== ФОРМА ===== */

  html body.obustroystvo-page .obm-mobile-form.hp-phone-box {
    margin-top: 8px !important;
  }

  html body.obustroystvo-page .obm-mobile-form__phone {
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
  }

  html body.obustroystvo-page .obm-mobile-form__prefix {
    flex-basis: 94px !important;

    font-size: 13px !important;
  }

  html body.obustroystvo-page .obm-mobile-form__phone input {
    padding: 0 14px !important;

    font-size: 13px !important;
  }


  /* Зеленая кнопка */
  html body.obustroystvo-page .obm-mobile-form__button {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

    margin-top: 7px !important;
  }

  html body.obustroystvo-page .obm-mobile-form__button span {
    font-size: 13px !important;
  }

  html body.obustroystvo-page .obm-mobile-form__button small {
    margin-top: 2px !important;

    font-size: 9.5px !important;
  }

}
@media (max-width: 767.98px) {

  html body.obustroystvo-page .obm-mobile-form__prefix {
    gap: 8px !important;
  }

  html body.obustroystvo-page .obm-mobile-form__phone-icon {
    width: 20px !important;
    height: 20px !important;

    flex: 0 0 20px !important;

    fill: #08a13a !important;
    stroke: none !important;
  }

}
@media (max-width: 767.98px) {

  html body.site-page.obustroystvo-page
  #price .choice-editorial__tabs {
    border-bottom: 0 !important;
  }

}
@media (max-width: 767.98px) {

  /* Правая колонка вкладок — не обрезаем рамку */
  html body.site-page.obustroystvo-page
  #price .choice-editorial__tab:nth-child(even) {
    width: calc(100% - 5px) !important;
    max-width: calc(100% - 5px) !important;

    justify-self: start !important;
    margin-right: 5px !important;

    box-sizing: border-box !important;
  }

}
@media (max-width: 767.98px) {

  html body.site-page.obustroystvo-page
  #price .choice-editorial__tab:last-child {
    border-right: 1px solid #d7dfe3 !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
  }

}
@media (max-width: 767.98px) {

  /* Поле телефона без вертикальной полоски */
  html body.site-page.obustroystvo-page
  #price .choice-editorial__phone-field {
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
  }

  html body.site-page.obustroystvo-page
  #price .choice-editorial__phone-divider {
    display: none !important;
  }

  html body.site-page.obustroystvo-page
  #price .choice-editorial__input {
    width: 100% !important;
    min-width: 0 !important;
  }

}

/* =========================================================
   25.07.2026 — desktop hero photo only
   IMPORTANT: no choice-editorial/grid overrides here.
   ========================================================= */
@media (min-width: 768px) {
  html body.site-page.obustroystvo-page
  main.ob-page > section#hero.ob-hero.ob-hero--drilling-style {
    display: block !important;
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.93) 27%,
        rgba(255,255,255,.58) 46%,
        rgba(255,255,255,.10) 65%,
        rgba(255,255,255,0) 77%
      ),
      url("images/obustroystvo-hero.webp") center 58% / cover no-repeat !important;
  }

  html body.site-page.obustroystvo-page .obm-mobile-hero {
    display: none !important;
  }
}