/* ======================================================================
   BYROVIK — ЕДИНАЯ МОБИЛЬНАЯ СИСТЕМА
   Применяется только на мобильных экранах. Десктоп не изменяется.
   ====================================================================== */

@media (max-width: 767.98px) {
  :root {
    --m-gutter: 20px;
    --m-section-y: 52px;
    --m-card-pad: 18px;
    --m-radius: 16px;
    --m-radius-sm: 12px;
    --m-border: #dfe7e9;
    --m-text: #102043;
    --m-muted: #56627a;
    --m-green: #079638;
    --m-green-dark: #087e32;
    --m-soft: #f2f6f7;
    --m-card: #ffffff;
    --m-shadow: 0 10px 26px rgba(9, 34, 50, 0.08);

    /* Четыре размера шрифта на всём мобильном сайте */
    --m-fs-small: 14px;
    --m-fs-body: 16px;
    --m-fs-title: 24px;
    --m-fs-hero: 34px;
  }

  html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body,
  body.site-page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: clip;
    color: var(--m-text);
    font-family: "Onest", "Segoe UI", Arial, sans-serif !important;
    font-size: var(--m-fs-body) !important;
    line-height: 1.5 !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  picture,
  video,
  iframe,
  svg,
  canvas {
    max-width: 100%;
  }

  img,
  video {
    height: auto;
  }

  /* ------------------------------------------------------------------
     1. ЕДИНАЯ ШИРИНА КОНТЕНТА
     ------------------------------------------------------------------ */

  body :is(
    .header-container,
    .site-header__inner,
    .site-inner,
    .home-inner,
    .info-hero__inner,
    .ob-inner,
    .ob-wrap,
    .work-modern-inner,
    .pw-inner,
    .fc-inner,
    .well-faq__container,
    .works-hero__inner,
    .org-footer__inner
  ) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }

  /* Блок без собственной внутренней обёртки */
  .works-empty-section {
    width: 100% !important;
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }

  /* Убираем случайные отрицательные сдвиги и ширину больше экрана */
  main,
  main > section,
  main > div,
  footer,
  .site-header,
  .site-header__mobile-contact-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ------------------------------------------------------------------
     2. ЕДИНАЯ ТИПОГРАФИКА
     ------------------------------------------------------------------ */

  body :where(
    p,
    li,
    dt,
    dd,
    label,
    input,
    textarea,
    select,
    button,
    a,
    span,
    strong,
    b,
    em,
    td,
    th
  ) {
    font-size: var(--m-fs-body) !important;
    line-height: 1.5 !important;
  }

  body :where(
    small,
    .home-eyebrow,
    .home-kicker,
    .hp-eyebrow,
    .ob-eyebrow,
    .ob-hero__eyebrow,
    .water-scenarios__eyebrow,
    .works-description-card__label,
    .contact-simple-call__eyebrow,
    [class*="eyebrow"],
    [class*="kicker"],
    [class*="caption"],
    [class*="micro"],
    [class*="note"],
    [class*="meta"]
  ),
  body :where(
    small,
    .home-eyebrow,
    .home-kicker,
    .hp-eyebrow,
    .ob-eyebrow,
    .ob-hero__eyebrow,
    .water-scenarios__eyebrow,
    .works-description-card__label,
    .contact-simple-call__eyebrow,
    [class*="eyebrow"],
    [class*="kicker"],
    [class*="caption"],
    [class*="micro"],
    [class*="note"],
    [class*="meta"]
  ) * {
    font-size: var(--m-fs-small) !important;
    line-height: 1.4 !important;
  }

  body h1,
  body h1 * {
    margin-top: 0;
    color: var(--m-text);
    font-size: var(--m-fs-hero) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
    overflow-wrap: anywhere;
  }

  body h2,
  body h2 * {
    color: var(--m-text);
    font-size: var(--m-fs-title) !important;
    font-weight: 800 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.025em !important;
    overflow-wrap: anywhere;
  }

  body h3,
  body h3 *,
  body h4,
  body h4 *,
  body h5,
  body h5 *,
  body h6,
  body h6 * {
    color: var(--m-text);
    font-size: var(--m-fs-body) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
  }

  body p,
  body li {
    color: var(--m-muted);
  }

  body :where(p, ul, ol) {
    max-width: 100%;
  }

  /* Цифры и итог калькулятора используют размер заголовка */
  body :is(
    .calc-result-total-value,
    .calc-result-total strong,
    .calc-depth-value,
    .calc-modern-depth-value,
    .ob-price,
    .contact-hero__phone,
    .org-footer__phone
  ),
  body :is(
    .calc-result-total-value,
    .calc-result-total strong,
    .calc-depth-value,
    .calc-modern-depth-value,
    .ob-price,
    .contact-hero__phone,
    .org-footer__phone
  ) * {
    font-size: var(--m-fs-title) !important;
    line-height: 1.15 !important;
  }

  /* ------------------------------------------------------------------
     3. ЕДИНЫЙ ВЕРТИКАЛЬНЫЙ РИТМ
     ------------------------------------------------------------------ */

  main > section:not(.hp-hero-section):not(.info-hero):not(.works-hero):not(.ob-hero) {
    padding-top: var(--m-section-y) !important;
    padding-bottom: var(--m-section-y) !important;
  }

  main > .info-hero,
  main > .works-hero,
  main > .ob-hero,
  main > .hp-hero-section {
    padding-top: 34px !important;
    padding-bottom: 42px !important;
  }

  main > section + section {
    margin-top: 0 !important;
  }

  .home-section-head,
  .well-faq__header,
  .calc-head,
  .work-modern-head,
  .pw-copy,
  .water-scenarios__intro,
  .ob-scope__intro {
    margin-bottom: 24px !important;
  }

  body :where(h1, h2, h3, h4, p) {
    max-width: 100%;
  }

  body h1 {
    margin-bottom: 18px !important;
  }

  body h2 {
    margin-top: 0;
    margin-bottom: 16px !important;
  }

  body h3 {
    margin-top: 0;
    margin-bottom: 8px !important;
  }

  body p {
    margin-top: 0;
    margin-bottom: 14px;
  }

  /* ------------------------------------------------------------------
     4. ЕДИНАЯ СИСТЕМА КАРТОЧЕК
     ------------------------------------------------------------------ */

  body :is(
    .benefits-modern-card,
    .calc-box-modern,
    .calc-modern-panel,
    .calc-modern-result,
    .ob-card,
    .work-modern-card,
    .well-faq__item,
    .info-sidebar,
    .info-card,
    .info-benefit,
    .info-cta-panel,
    .contact-quick-info__grid,
    .contact-simple-call__box,
    .contact-step-grid > article,
    .water-scenarios__variant,
    .choice-editorial__panel,
    .choice-editorial__info-card,
    .ob-scope__panel,
    .ob-scope__item,
    .works-video-card,
    .works-description-card
  ) {
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    background: var(--m-card) !important;
    box-shadow: var(--m-shadow) !important;
  }

  body :is(
    .benefits-modern-card,
    .calc-box-modern,
    .calc-modern-panel,
    .calc-modern-result,
    .ob-card,
    .work-modern-card,
    .info-sidebar,
    .info-card,
    .info-benefit,
    .info-cta-panel,
    .contact-simple-call__box,
    .contact-step-grid > article,
    .water-scenarios__variant,
    .choice-editorial__panel,
    .choice-editorial__info-card,
    .ob-scope__panel,
    .ob-scope__item,
    .works-video-card,
    .works-description-card
  ) {
    padding: var(--m-card-pad) !important;
  }

  /* FAQ — одна строка с аккуратным раскрытием */
  .well-faq__item {
    overflow: hidden !important;
  }

  .well-faq__item + .well-faq__item {
    margin-top: 10px !important;
  }

  .well-faq__item button,
  .well-faq__item summary,
  .well-faq__item-header {
    min-height: 56px !important;
    padding: 14px 16px !important;
  }

  /* Сетки на мобильном всегда переходят в одну колонку */
  body :is(
    .benefits-modern-grid,
    .ob-cards,
    .work-modern-grid,
    .fc-split,
    .info-layout,
    .info-card-list,
    .info-benefit-grid,
    .contact-quick-info__grid,
    .contact-region,
    .contact-step-grid,
    .water-scenarios__variants,
    .choice-editorial__grid,
    .ob-scope,
    .pw-layout,
    .works-gallery,
    .works-video-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
  }

  body :is(
    .benefits-modern-grid,
    .ob-cards,
    .work-modern-grid,
    .info-card-list,
    .info-benefit-grid,
    .contact-step-grid,
    .water-scenarios__variants,
    .ob-scope__panel,
    .works-video-grid
  ) {
    gap: 14px !important;
  }

  /* ------------------------------------------------------------------
     5. КНОПКИ И ФОРМЫ
     ------------------------------------------------------------------ */

  body :is(
    .hp-phone-button,
    .calc-lead-form button,
    .fc-submit,
    .contact-hero__button,
    .contact-simple-call__form button,
    .ob-more-link
  ) {
    min-height: 52px !important;
    width: 100% !important;
    padding: 13px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: var(--m-radius-sm) !important;
    color: #fff !important;
    background: var(--m-green) !important;
    box-shadow: 0 8px 18px rgba(7, 150, 56, 0.18) !important;
    font-size: var(--m-fs-body) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
  }

  body :is(input, textarea, select) {
    width: 100%;
    min-width: 0;
    min-height: 52px !important;
    padding: 13px 14px !important;
    border: 1px solid #d5dde2 !important;
    border-radius: var(--m-radius-sm) !important;
    background: #fff !important;
    color: var(--m-text) !important;
    font-family: inherit !important;
    font-size: var(--m-fs-body) !important;
    line-height: 1.35 !important;
  }

  textarea {
    min-height: 120px !important;
    resize: vertical;
  }

  body :is(.hp-phone-box, .calc-lead-form, .fc-form, .contact-simple-call__form) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hp-phone-box {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hp-phone-input {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;
    border: 1px solid #d5dde2 !important;
    border-radius: var(--m-radius-sm) !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .hp-phone-input > span,
  .hp-phone-input > b,
  .hp-phone-prefix {
    min-width: 0 !important;
    padding: 0 12px !important;
    text-align: center !important;
  }

  .hp-phone-input input {
    border: 0 !important;
    border-left: 1px solid #d5dde2 !important;
    border-radius: 0 !important;
  }

  /* ------------------------------------------------------------------
     6. ШАПКА И ПЛАВАЮЩИЕ КНОПКИ
     ------------------------------------------------------------------ */

  .site-header {
    min-height: 72px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid #e3e8ea !important;
    box-shadow: 0 4px 16px rgba(9, 34, 50, 0.05) !important;
  }

  .site-header__inner {
    min-height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .site-header__logo {
    min-width: 0 !important;
    max-width: calc(100% - 112px) !important;
  }

  [data-header-logo-text] {
    font-size: 0 !important;
  }

  [data-header-logo-text]::before,
  [data-header-logo-text]::after {
    font-size: var(--m-fs-title) !important;
    line-height: 1 !important;
  }

  .site-header__phone,
  .site-header__mobile-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .site-header__mobile-toggle {
    margin-left: 0 !important;
  }

  .site-header__mobile-panel,
  .site-header__mobile-panel-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  .site-header__mobile-panel-inner {
    padding: 18px var(--m-gutter) 24px !important;
  }

  .site-header__desktop-floating-contact,
  .site-header__floating-contact {
    right: 16px !important;
    bottom: 18px !important;
    width: 56px !important;
    height: 56px !important;
    z-index: 1000 !important;
  }

  .back-to-top {
    right: 20px !important;
    bottom: 86px !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    z-index: 999 !important;
  }

  /* ------------------------------------------------------------------
     7. ГЛАВНАЯ СТРАНИЦА
     ------------------------------------------------------------------ */

  .hp-hero {
    display: block !important;
  }

  .hp-copy,
  .hp-empty {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hp-empty {
    display: none !important;
  }

  .hp-subtitle {
    max-width: 100% !important;
    margin-bottom: 24px !important;
  }

  .hp-benefits {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 24px 0 !important;
  }

  .hp-benefit {
    min-width: 0 !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--m-border) !important;
  }

  .hp-benefit:last-child {
    border-bottom: 0 !important;
  }

  .benefits-modern-card,
  .calc-box-modern {
    width: 100% !important;
  }

  .benefits-modern-item {
    padding: 16px 0 !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    border-bottom: 1px solid var(--m-border) !important;
  }

  .benefits-modern-item:last-child {
    border-bottom: 0 !important;
  }

  .calc-section {
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }

  .calc-section > .site-inner {
    padding-left: var(--m-card-pad) !important;
    padding-right: var(--m-card-pad) !important;
  }

  .calc-box-modern,
  .calc-modern-left,
  .calc-modern-result {
    min-width: 0 !important;
  }

  .calc-box-modern {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .calc-modern-panel,
  .calc-modern-result {
    width: 100% !important;
    margin: 0 !important;
  }

  .calc-modern-panel + .calc-modern-panel {
    margin-top: 14px !important;
  }

  .obustroystvo-block {
    padding-top: var(--m-section-y) !important;
    padding-bottom: var(--m-section-y) !important;
  }

  .ob-cards,
  .work-modern-grid {
    display: grid !important;
  }

  .ob-card,
  .work-modern-card {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .ob-card-head,
  .work-modern-card-head {
    min-width: 0 !important;
  }

  .work-modern-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
  }

  .pw-layout,
  .fc-split {
    display: grid !important;
    gap: 22px !important;
  }

  .pw-gallery {
    min-width: 0 !important;
  }

  /* ------------------------------------------------------------------
     8. СТРАНИЦА КОНТАКТОВ
     ------------------------------------------------------------------ */

  .contact-hero__inner {
    display: block !important;
  }

  .contact-hero__actions {
    position: static !important;
    width: 100% !important;
    margin-top: 24px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .contact-hero__phone,
  .contact-hero__button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .contact-hero__phone {
    min-height: 52px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-sm) !important;
    background: #fff !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  .contact-quick-info__grid {
    padding: 0 var(--m-card-pad) !important;
    overflow: hidden !important;
  }

  .contact-quick-card {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 22px 0 22px 64px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--m-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .contact-quick-card:last-child {
    border-bottom: 0 !important;
  }

  .contact-quick-card__icon {
    position: absolute !important;
    top: 22px !important;
    left: 0 !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .contact-quick-card__icon svg {
    width: 34px !important;
    height: 34px !important;
  }

  .contact-quick-card h2 {
    margin-bottom: 6px !important;
    font-size: var(--m-fs-body) !important;
    line-height: 1.3 !important;
  }

  .contact-quick-card h2 * {
    font-size: var(--m-fs-body) !important;
  }

  .contact-quick-card__main-link,
  .contact-quick-card__messengers,
  .contact-quick-card__schedule,
  .contact-quick-card__region,
  .contact-quick-card p {
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow-wrap: anywhere;
  }

  .contact-quick-card__main-link {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
    white-space: normal !important;
  }

  .contact-quick-card__messengers {
    display: grid !important;
    gap: 2px !important;
  }

  .contact-quick-card__action {
    display: inline-flex !important;
    margin-top: 14px !important;
    color: var(--m-green) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
  }

  .contact-region {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .contact-region__cities {
    columns: 2 !important;
    column-gap: 18px !important;
  }

  .contact-region__cities li {
    break-inside: avoid;
  }

  .contact-region__map {
    width: 100% !important;
    min-height: 220px !important;
    overflow: hidden !important;
    border-radius: var(--m-radius) !important;
  }

  .contact-simple-call__box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .contact-step-grid {
    display: grid !important;
  }

  /* ------------------------------------------------------------------
     9. ОБУСТРОЙСТВО
     ------------------------------------------------------------------ */

  .ob-hero__grid {
    display: block !important;
  }

  .ob-hero__content,
  .ob-visual {
    width: 100% !important;
    min-width: 0 !important;
  }

  .ob-visual {
    margin-top: 24px !important;
    min-height: 250px !important;
    overflow: hidden !important;
    border-radius: var(--m-radius) !important;
  }

  .ob-hero__facts {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-top: 22px !important;
  }

  .ob-hero__facts > * {
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--m-border) !important;
  }

  .water-scenarios {
    display: block !important;
  }

  .water-scenarios__variants {
    display: grid !important;
  }

  .water-scenarios__variant {
    min-height: 0 !important;
  }

  .choice-editorial__tabs {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px !important;
    padding-bottom: 4px !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .choice-editorial__tabs::-webkit-scrollbar {
    display: none;
  }

  .choice-editorial__tabs > * {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    scroll-snap-align: start;
    white-space: nowrap !important;
  }

  .choice-editorial__grid {
    display: grid !important;
    gap: 18px !important;
  }

  .ob-scope {
    display: grid !important;
    gap: 20px !important;
  }

  .ob-scope__panel {
    display: grid !important;
    gap: 12px !important;
  }

  .ob-scope__item {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  /* ------------------------------------------------------------------
     10. ПРИМЕРЫ РАБОТ
     ------------------------------------------------------------------ */

  .works-hero__inner {
    display: block !important;
  }

  .works-hero__highlights {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-top: 20px !important;
  }

  .works-hero__highlights > * {
    min-height: 52px !important;
    padding: 14px 0 !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid var(--m-border) !important;
  }

  .works-gallery {
    display: grid !important;
    gap: 12px !important;
  }

  .works-photo,
  .works-photo--tall,
  .works-photo--wide {
    width: 100% !important;
    min-height: 250px !important;
    grid-column: auto !important;
    grid-row: auto !important;
    border-radius: var(--m-radius) !important;
    overflow: hidden !important;
  }

  .works-video-grid {
    display: grid !important;
  }

  .works-video-card {
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
  }

  .works-description-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* ------------------------------------------------------------------
     11. ИНФОРМАЦИОННЫЕ СТРАНИЦЫ
     ------------------------------------------------------------------ */

  .info-hero__inner {
    min-height: 0 !important;
  }

  .info-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .info-sidebar {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    order: 2 !important;
  }

  .info-article {
    width: 100% !important;
    min-width: 0 !important;
    order: 1 !important;
    padding: var(--m-card-pad) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    background: #fff !important;
    box-shadow: var(--m-shadow) !important;
  }

  .info-sidebar a,
  .info-related a {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border: 1px solid #d7e7df !important;
    border-radius: var(--m-radius-sm) !important;
    background: #f7fbf8 !important;
    color: var(--m-text) !important;
    text-decoration: none !important;
  }

  .info-sidebar a + a,
  .info-related a + a {
    margin-top: 8px !important;
  }

  .info-card-list,
  .info-benefit-grid,
  .info-related {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .info-card,
  .info-benefit,
  .info-cta-panel {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .info-article :where(ul, ol) {
    margin: 0 0 20px !important;
    padding-left: 22px !important;
  }

  .info-article :where(li + li) {
    margin-top: 8px !important;
  }

  /* ------------------------------------------------------------------
     12. ПОДВАЛ
     ------------------------------------------------------------------ */

  .org-footer {
    padding-top: 42px !important;
    padding-bottom: 34px !important;
  }

  .org-footer__inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .org-footer__brand-row,
  .org-footer__contact-card,
  .org-footer__contact-card-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .org-footer h2,
  .org-footer h2 * {
    font-size: var(--m-fs-title) !important;
  }

  .org-footer h3,
  .org-footer h3 * {
    font-size: var(--m-fs-small) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em !important;
  }
}

/* Узкие телефоны: сохраняем сетку и удобные кнопки */
@media (max-width: 339.98px) {
  :root {
    --m-gutter: 16px;
    --m-card-pad: 16px;
    --m-fs-hero: 34px;
  }

  .contact-region__cities {
    columns: 1 !important;
  }
}

/* ======================================================================
   ЖЁСТКИЙ ФИНАЛЬНЫЙ СЛОЙ
   Два несуществующих ID повышают специфичность и гарантируют, что старые
   локальные mobile-правила не вернут разные размеры и отступы.
   ====================================================================== */
@media (max-width: 767.98px) {
  /* Единый боковой ритм всех основных контейнеров */
  html body:not(#m-system-a):not(#m-system-b) :is(
    .header-container,
    .site-header__inner,
    .site-inner,
    .home-inner,
    .info-hero__inner,
    .ob-inner,
    .ob-wrap,
    .work-modern-inner,
    .pw-inner,
    .fc-inner,
    .well-faq__container,
    .works-hero__inner,
    .org-footer__inner
  ) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }

  /* Сначала всему тексту назначается базовый размер */
  html body:not(#m-system-a):not(#m-system-b) * {
    font-size: var(--m-fs-body) !important;
  }

  /* Служебный элемент логотипа остаётся нулевого размера */
  html body:not(#m-system-a):not(#m-system-b) [data-header-logo-text] {
    font-size: 0 !important;
  }

  html body:not(#m-system-a):not(#m-system-b) [data-header-logo-text]::before,
  html body:not(#m-system-a):not(#m-system-b) [data-header-logo-text]::after {
    font-size: var(--m-fs-title) !important;
  }

  /* Мелкие подписи — 14 px */
  html body:not(#m-system-a):not(#m-system-b) :is(
    small,
    .home-eyebrow,
    .home-kicker,
    .hp-eyebrow,
    .ob-eyebrow,
    .ob-hero__eyebrow,
    .water-scenarios__eyebrow,
    .works-description-card__label,
    .contact-simple-call__eyebrow,
    .site-header__mobile-toggle-label,
    [class*="eyebrow"],
    [class*="kicker"],
    [class*="caption"],
    [class*="micro"],
    [class*="note"],
    [class*="meta"]
  ),
  html body:not(#m-system-a):not(#m-system-b) :is(
    small,
    .home-eyebrow,
    .home-kicker,
    .hp-eyebrow,
    .ob-eyebrow,
    .ob-hero__eyebrow,
    .water-scenarios__eyebrow,
    .works-description-card__label,
    .contact-simple-call__eyebrow,
    .site-header__mobile-toggle-label,
    [class*="eyebrow"],
    [class*="kicker"],
    [class*="caption"],
    [class*="micro"],
    [class*="note"],
    [class*="meta"]
  ) * {
    font-size: var(--m-fs-small) !important;
    line-height: 1.4 !important;
  }

  /* Главные заголовки — 34 px */
  html body:not(#m-system-a):not(#m-system-b) h1,
  html body:not(#m-system-a):not(#m-system-b) h1 * {
    font-size: var(--m-fs-hero) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
  }

  /* Заголовки секций — 24 px */
  html body:not(#m-system-a):not(#m-system-b) h2,
  html body:not(#m-system-a):not(#m-system-b) h2 *,
  html body:not(#m-system-a):not(#m-system-b) :is(
    .calc-result-total-value,
    .calc-result-total strong,
    .calc-depth-value,
    .calc-modern-depth-value,
    .ob-price,
    .contact-hero__phone,
    .org-footer__phone
  ),
  html body:not(#m-system-a):not(#m-system-b) :is(
    .calc-result-total-value,
    .calc-result-total strong,
    .calc-depth-value,
    .calc-modern-depth-value,
    .ob-price,
    .contact-hero__phone,
    .org-footer__phone
  ) * {
    font-size: var(--m-fs-title) !important;
    line-height: 1.16 !important;
  }

  /* Заголовки карточек и весь обычный текст — 16 px */
  html body:not(#m-system-a):not(#m-system-b) :is(h3, h4, h5, h6),
  html body:not(#m-system-a):not(#m-system-b) :is(h3, h4, h5, h6) * {
    font-size: var(--m-fs-body) !important;
    line-height: 1.35 !important;
  }

  html body:not(#m-system-a):not(#m-system-b) :is(
    p, li, dt, dd, a, button, label, input, textarea, select, td, th
  ) {
    line-height: 1.5 !important;
  }

  /* Общая карточная геометрия */
  html body:not(#m-system-a):not(#m-system-b) :is(
    .benefits-modern-card,
    .calc-box-modern,
    .calc-modern-panel,
    .calc-modern-result,
    .ob-card,
    .work-modern-card,
    .well-faq__item,
    .info-sidebar,
    .info-article,
    .info-card,
    .info-benefit,
    .info-cta-panel,
    .contact-quick-info__grid,
    .contact-simple-call__box,
    .contact-step-grid > article,
    .water-scenarios__variant,
    .choice-editorial__panel,
    .choice-editorial__info-card,
    .ob-scope__panel,
    .ob-scope__item,
    .works-description-card
  ) {
    border-color: var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow) !important;
  }

  /* Сильные точечные правила для страниц с прежними !important */
  html body.site-page.contact-page:not(#m-system-a):not(#m-system-b) .contact-quick-card {
    padding: 22px 0 22px 64px !important;
  }

  html body.site-page.contact-page:not(#m-system-a):not(#m-system-b) .contact-quick-card__icon {
    top: 22px !important;
    left: 0 !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  html body.site-page.contact-page:not(#m-system-a):not(#m-system-b) .contact-quick-card__icon svg {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  html body.site-page.contact-page:not(#m-system-a):not(#m-system-b) .contact-quick-card h2,
  html body.site-page.contact-page:not(#m-system-a):not(#m-system-b) .contact-quick-card h2 * {
    font-size: var(--m-fs-body) !important;
  }

  /* Главная: одинаковые интервалы без случайных 62 px */
  html body:not(#m-system-a):not(#m-system-b) #hero .hp-subtitle {
    width: 100% !important;
    max-width: 280px !important;
    margin-top: 20px !important;
  }

  html body:not(#m-system-a):not(#m-system-b) #hero .hp-benefits {
    width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
  }

  html body:not(#m-system-a):not(#m-system-b) #hero .hp-benefit {
    min-height: 0 !important;
    padding: 14px 0 !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  html body:not(#m-system-a):not(#m-system-b) #hero .hp-benefit-icon {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
  }

  /* Обустройство: сохраняем фон героя, но выравниваем текст и факты */
  html body.site-page.obustroystvo-page:not(#m-system-a):not(#m-system-b) #hero .ob-title {
    max-width: 100% !important;
    font-size: var(--m-fs-hero) !important;
  }

  html body.site-page.obustroystvo-page:not(#m-system-a):not(#m-system-b) #hero .ob-lead {
    max-width: 280px !important;
    font-size: var(--m-fs-body) !important;
    line-height: 1.5 !important;
  }

  html body.site-page.obustroystvo-page:not(#m-system-a):not(#m-system-b) #hero .ob-hero__facts {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body.site-page.obustroystvo-page:not(#m-system-a):not(#m-system-b) #hero .ob-fact {
    min-height: 0 !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px 0 !important;
  }

  html body.site-page.obustroystvo-page:not(#m-system-a):not(#m-system-b) #hero .ob-fact__icon {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
  }

  /* Примеры работ: единый размер первого экрана */
  html body.site-page.works-page:not(#m-system-a):not(#m-system-b) .works-hero__inner > h1,
  html body.site-page.works-page:not(#m-system-a):not(#m-system-b) .works-hero__inner > h1 * {
    max-width: 100% !important;
    font-size: var(--m-fs-hero) !important;
  }

  html body.site-page.works-page:not(#m-system-a):not(#m-system-b) .works-hero__inner > p:not(.home-eyebrow) {
    font-size: var(--m-fs-body) !important;
  }

  html body.site-page.works-page:not(#m-system-a):not(#m-system-b) .works-hero .hp-phone-button,
  html body.site-page.works-page:not(#m-system-a):not(#m-system-b) .works-hero .hp-phone-button * {
    font-size: var(--m-fs-body) !important;
  }

  /* Информационные страницы */
  html body.site-page.info-page:not(#m-system-a):not(#m-system-b) .info-hero h1,
  html body.site-page.info-page:not(#m-system-a):not(#m-system-b) .info-hero h1 * {
    font-size: var(--m-fs-hero) !important;
  }

  html body.site-page.info-page:not(#m-system-a):not(#m-system-b) .info-article h2,
  html body.site-page.info-page:not(#m-system-a):not(#m-system-b) .info-article h2 * {
    font-size: var(--m-fs-title) !important;
  }
}

@media (max-width: 767.98px) {
  /* Убираем старые внешние padding, чтобы не складывались 12/18/20 + 20 px */
  html body:not(#m-system-a):not(#m-system-b) :is(
    .work-modern-section,
    .pw-section,
    .fc-section,
    .well-faq,
    .org-footer,
    .contact-quick-info,
    .ob-section--water-scenarios,
    .choice-editorial
  ) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Калькулятор — карточка на общей линии 20 px */
  html body:not(#m-system-a):not(#m-system-b) .calc-section {
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }

  html body:not(#m-system-a):not(#m-system-b) .calc-section > .calc-box-modern {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Списки не выступают за правую границу на ширине 320 px */
  html body:not(#m-system-a):not(#m-system-b) :is(ul, ol) {
    max-width: 100% !important;
    padding-right: 0 !important;
  }

  html body:not(#m-system-a):not(#m-system-b) li {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
}
/* Главная: белая карточка начинается выше, текст остаётся на месте */
@media (max-width: 767.98px) {
  html body main #benefits > .site-inner > .benefits-modern-card {
    margin-top: -22px !important;
    padding-top: 22px !important;
  }
}
/* Мобильная версия: продлеваем белый фон калькулятора вверх,
   не двигая заголовок и остальной контент */
@media (max-width: 767.98px) {
  html body #price .calc-box-modern {
    position: relative !important;
    z-index: 1 !important;
    background: #ffffff !important;
  }

  html body #price .calc-box-modern::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -28px !important;
    height: 28px !important;
    background: #ffffff !important;
    border-radius: 18px 18px 0 0 !important;
    z-index: -1 !important;
  }
}
/* Липкая мобильная шапка на всех страницах */
@media (max-width: 767px) {
  html body .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    z-index: 5000 !important;
  }

  /* На главной компенсируем место фиксированной шапки */
  html body:not(.site-page) {
    padding-top: 68px !important;
  }

  /* Выпадающее меню начинается сразу под шапкой */
  html body .site-header__mobile-panel {
    top: 68px !important;
  }
}