/* Страховка от горизонтальной прокрутки на планшете и телефоне: всё, что выходит за экран внутри блоков, обрезается, страница не ездит вбок и не уменьшается. Обрезаем только контейнер с блоками, а не html и body: иначе при открытии попапа (Тильда ставит body overflow:hidden) страница прыгала в самый верх */
@media (max-width: 959px) {
  #allrecords { overflow-x: clip !important; max-width: 100% !important; }
}

/* Услуги и цены: высота блока следует за содержимым при раскрытии карточек */
#rec5074907901 .t396__artboard {
  height: auto !important;
  min-height: 0 !important;
}
#rec5074907901 .t396__filter,
#rec5074907901 .t396__carrier {
  height: 100% !important;
}

/* Услуги и цены, планшет и мобила: разделитель между рядами (с десктопа) не занимает ячейку сетки */
@media (max-width: 959px) {
  #rec5074907901 .tn-elem[data-elem-id="1792681900000000001"] {
    display: none !important;
  }
}

/* Главный экран: подпись белая, лёгкая, курсив, с мягкой тенью (тень Тильды по умолчанию отключена) */
#rec4718315101 .tn-elem[data-elem-id="1791813000000000021"] .tn-atom {
  font-weight: 300 !important;
  font-style: italic !important;
  text-shadow: 0 1px 3px rgba(0, 20, 40, 0.55), 0 2px 14px rgba(0, 20, 40, 0.45) !important;
}

/* Главный экран, мобила 360–479: блок фиксированной ширины 328, заголовок: синяя часть в одну строку, чёрная в две */
@media (max-width: 479px) {
  html body #rec4718315101 .tn-elem[data-elem-id="1791813000000000010"] .tn-atom {
    font-size: min(24px, calc((100vw - 32px) / 13.7)) !important;
  }
}

/* Главный экран, планшет 640–959: заголовок крупнее и занимает почти всю ширину (самая длинная строка ≈ 92% при 768, потолок 48px), подзаголовок 20–24px */
@media (min-width: 640px) and (max-width: 959px) {
  html body #rec4718315101 .tn-elem[data-elem-id="1791813000000000010"] .tn-atom {
    font-size: min(48px, calc((100vw - 80px) * 0.0675)) !important;
    line-height: 1.12 !important;
  }
  html body #rec4718315101 .tn-elem[data-elem-id="1791813000000000011"] .tn-atom {
    font-size: clamp(20px, calc((100vw - 80px) * 0.035), 24px) !important;
    line-height: 1.3 !important;
  }
}

/* Главный экран, мобила: нижний блок приподнят, чтобы кнопка MAX не заходила на «Получить консультацию»; сверху отступ от шапки 32px */
@media (max-width: 639px) {
  html body #rec4718315101 .t396__artboard {
    padding-top: 112px !important;
    padding-bottom: 64px !important;
  }
}

/* Главный экран, все экраны: плашки «Ваша ситуация» цвета фона меню (#EFF4FD) вместо белого */
html body #rec4718315101 :is(.tn-elem[data-elem-id="1791813000000000013"], .tn-elem[data-elem-id="1791813000000000014"], .tn-elem[data-elem-id="1791813000000000015"], .tn-elem[data-elem-id="1791813000000000016"], .tn-elem[data-elem-id="1791813000000000017"], .tn-elem[data-elem-id="1791813000000000018"]) .tn-atom {
  background-color: #EFF4FD !important;
}

/* Главный экран, мобила: отступы по близости. Заголовок и подзаголовок рядом (10), подпись к плашкам близко (6), плашки от кнопки (28). Верхний блок (заголовок и подзаголовок) прижат к верху, нижний («Ваша ситуация», плашки, кнопка) к низу экрана, как на планшете; между ними минимум 36px */
@media (max-width: 639px) {
  html body #rec4718315101 .t396__artboard {
    row-gap: 36px !important;
    justify-content: space-between !important;
  }
  html body #rec4718315101 .t396__artboard > .tn-group {
    flex: 0 0 auto !important;
    height: auto !important;
  }
  html body #rec4718315101 #molecule-1791813000000000101 { row-gap: 10px !important; }
  html body #rec4718315101 #molecule-1792670856762000001 { row-gap: 6px !important; }
  html body #rec4718315101 #molecule-1792818344914000005 { row-gap: 28px !important; }
}

/* Шапка, все экраны: нижняя линия светло-серая, того же цвета, что обводка плашек «Ваша ситуация» на главном экране (была синяя) */
html body #rec4716488401 .t396__artboard {
  border-bottom-color: rgba(100, 116, 139, 0.6) !important;
}

/* «С какими объектами работаем», планшет и мобила: тексты внутри карточек не шире самой карточки (в Тильде им задана фиксированная ширина 336px при ширине карточки 296–328). Контейнеры не шире родителя, текстовые блоки могут сжиматься и переносить слова */
@media (max-width: 959px) {
  html body #rec4712578401 .tn-group,
  html body #rec4712578401 [id^="molecule-"] {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body #rec4712578401 [id^="molecule-"] > .tn-elem[data-elem-type="text"] {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Подвал, мобила: лого и подпись того же размера, что в шапке */
@media (max-width: 639px) {
  #rec4714297101 .tn-elem[data-elem-id="1791811000000000010"] { width: 152px !important; margin-left: -13px !important; }
  #rec4714297101 .tn-elem[data-elem-id="1791811000000000010"] .tn-atom,
  #rec4714297101 .tn-elem[data-elem-id="1791811000000000010"] svg { width: 100% !important; height: auto !important; display: block; }
  #rec4714297101 .tn-elem[data-elem-id="1791811000000000011"] { margin-top: -11px !important; }
  #rec4714297101 .tn-elem[data-elem-id="1791811000000000011"] .tn-atom { font-size: 10px !important; line-height: 1.15 !important; letter-spacing: 0 !important; white-space: nowrap !important; }
}

/* Полоса прокрутки: тонкая, 6px, цвет сайта (перебивает настройку Тильды) */
::-webkit-scrollbar { width: 6px !important; height: 6px !important; }

/* Сложные проекты, планшет: карточки в одном ряду одной высоты, кнопка прижата к низу */
@media (min-width: 640px) and (max-width: 959px) {
  #rec4997372301 #molecule-1792910000000000001 {
    align-items: stretch !important;
  }
  #rec4997372301 #molecule-1792910000000000001 > .tn-group > [id^="molecule-"] {
    height: 100% !important;
  }
  #rec4997372301 #molecule-1792910000000000001 > .tn-group > [id^="molecule-"] > .tn-group:last-child {
    flex: 1 1 auto !important;
  }
  #rec4997372301 #molecule-1792910000000000001 > .tn-group > [id^="molecule-"] > .tn-group:last-child > [id^="molecule-"] {
    height: 100% !important;
  }
}

/* Услуги и цены, планшет и мобила: карточки в ряду одной высоты */
@media (max-width: 959px) {
  html body #rec5074907901 #molecule-1791797000000000007 { align-items: stretch !important; }
  html body #rec5074907901 .tn-group[data-group-id="1791797000000000008"],
  html body #rec5074907901 .tn-group[data-group-id="1791797000000000026"],
  html body #rec5074907901 .tn-group[data-group-id="1791797000000000046"],
  html body #rec5074907901 .tn-group[data-group-id="1791797000000000066"],
  html body #rec5074907901 .tn-group[data-group-id="1791797000000000084"],
  html body #rec5074907901 .tn-group[data-group-id="1791797000000000102"] { height: auto !important; }
  html body #rec5074907901 #molecule-1791797000000000008,
  html body #rec5074907901 #molecule-1791797000000000026,
  html body #rec5074907901 #molecule-1791797000000000046,
  html body #rec5074907901 #molecule-1791797000000000066,
  html body #rec5074907901 #molecule-1791797000000000084,
  html body #rec5074907901 #molecule-1791797000000000102 { height: 100% !important; }
}

/* Инженеры, планшет и мобила: кнопки стоят в потоке, а не по абсолютным координатам */
@media (max-width: 959px) {
  #rec4714296401 #molecule-1792868116671000005 > *,
  #rec4714296401 #molecule-1791810000000000009 > *,
  #rec4714296401 #molecule-1791810000000000023 > * {
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }
}

/* Инженеры, мобила: слева портрет, справа имя и две кнопки друг под другом (по высоте фото), ниже удостоверение и галерея в одну строку */
@media (max-width: 639px) {
  html body #rec4714296401 #molecule-1792920000000000003,
  html body #rec4714296401 #molecule-1792920000000000001 {
    column-gap: 12px !important;
    row-gap: 16px !important;
    container-type: inline-size;
    --oks-p: min(34cqw, 150px);
    --oks-h2: min(43cqw, 200px);
    --oks-gw: calc(65cqw - 6.5px) !important;
  }
  html body #rec4714296401 .tn-elem[data-elem-id="1791810000000000027"],
  html body #rec4714296401 .tn-group[data-group-id="1791810000000000012"] {
    order: -3 !important;
    flex: 0 0 var(--oks-p) !important;
    width: var(--oks-p) !important;
    height: var(--oks-p) !important;
  }
  html body #rec4714296401 .tn-group[data-group-id="1792920000000000002"],
  html body #rec4714296401 .tn-group[data-group-id="1791810000000000007"] {
    order: -2 !important;
    flex: 0 0 calc(100% - var(--oks-p) - 12px) !important;
    width: calc(100% - var(--oks-p) - 12px) !important;
    height: var(--oks-p) !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  html body #rec4714296401 #molecule-1792920000000000002,
  html body #rec4714296401 #molecule-1791810000000000007 {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    height: 100% !important;
    row-gap: 0 !important;
  }
  html body #rec4714296401 .tn-elem[data-elem-id="1791810000000000022"],
  html body #rec4714296401 .tn-elem[data-elem-id="1791810000000000008"] {
    width: 100% !important;
  }
  html body #rec4714296401 .tn-group[data-group-id="1792868116671000005"],
  html body #rec4714296401 .tn-group[data-group-id="1791810000000000009"] {
    width: 100% !important;
  }
  html body #rec4714296401 #molecule-1792868116671000005,
  html body #rec4714296401 #molecule-1791810000000000009 {
    flex-direction: column !important;
    align-items: flex-start !important;
    row-gap: 6px !important;
    width: 100% !important;
  }
  html body #rec4714296401 #molecule-1792868116671000005 > *,
  html body #rec4714296401 #molecule-1791810000000000009 > * {
    flex: none !important;
    width: 140px !important;
    max-width: 100% !important;
  }
  html body #rec4714296401 #molecule-1792868116671000005 > .tn-elem[data-elem-id="1791810000000000024"],
  html body #rec4714296401 #molecule-1791810000000000009 > .tn-elem[data-elem-id="1791810000000000011"] {
    width: 76px !important;
  }
  html body #rec4714296401 #molecule-1791810000000000023 {
    width: 100% !important;
  }
  html body #rec4714296401 .tn-elem[data-elem-type="button"] {
    width: 100% !important;
    height: 28px !important;
  }
  html body #rec4714296401 .tn-elem[data-elem-type="button"] .tn-atom {
    width: 100% !important;
    height: 100% !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    line-height: 28px !important;
  }
  html body #rec4714296401 .tn-elem[data-elem-id="1792697900507000016"],
  html body #rec4714296401 .tn-elem[data-elem-id="1792697981095000017"] {
    order: 1 !important;
    flex: 0 0 calc(35% - 6.5px) !important;
    width: calc(35% - 6.5px) !important;
    height: var(--oks-h2) !important;
  }
  html body #rec4714296401 .tn-elem[data-elem-id="1792696985796000013"],
  html body #rec4714296401 .tn-elem[data-elem-id="1792696722574"] {
    order: 2 !important;
    flex: 0 0 calc(65% - 6.5px) !important;
    width: calc(65% - 6.5px) !important;
    height: var(--oks-h2) !important;
  }
}

/* Инженеры: ширина галереи удостоверений считается явно (Тильда зашивает ей фиксированные 200px) */
@media (min-width: 640px) and (max-width: 719px) {
  html body #rec4714296401 #molecule-1792920000000000003,
  html body #rec4714296401 #molecule-1792920000000000001 {
    --oks-gw: calc(100vw - 86px - var(--oks-h) * 1.7 - 16px);
  }
}
@media (min-width: 640px) and (max-width: 959px) {
  html body #rec4714296401 .tn-elem[data-elem-id="1792696985796000013"],
  html body #rec4714296401 .tn-elem[data-elem-id="1792696722574"] {
    flex: 0 0 var(--oks-gw) !important;
    width: var(--oks-gw) !important;
  }
}
@media (max-width: 959px) {
  html body #rec4714296401 .tn-elem[data-elem-type="gallery"] .t-slds__main {
    width: var(--oks-gw) !important;
  }
}
/* Инженеры, планшет от 720: слева имя и под ним кнопки, справа ряд фото на всю остальную ширину */
@media (min-width: 720px) and (max-width: 959px) {
  html body #rec4714296401 #molecule-1792920000000000003,
  html body #rec4714296401 #molecule-1792920000000000001 {
    flex-wrap: nowrap !important;
    align-items: center !important;
    column-gap: 12px !important;
    --oks-h: calc((100vw - 86px) * 0.172) !important;
    --oks-gw: calc((100vw - 86px) * 0.66 - var(--oks-h) * 1.7 - 36px) !important;
  }
  html body #rec4714296401 .tn-group[data-group-id="1792920000000000002"],
  html body #rec4714296401 .tn-group[data-group-id="1791810000000000007"] {
    flex: 0 0 34% !important;
    width: 34% !important;
    max-width: 34% !important;
  }
  html body #rec4714296401 #molecule-1792920000000000002,
  html body #rec4714296401 #molecule-1791810000000000007 {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    row-gap: 16px !important;
  }
  html body #rec4714296401 .tn-elem[data-elem-id="1791810000000000022"],
  html body #rec4714296401 .tn-elem[data-elem-id="1791810000000000008"] {
    flex: none !important;
    width: 100% !important;
  }
  html body #rec4714296401 .tn-group[data-group-id="1792868116671000005"],
  html body #rec4714296401 .tn-group[data-group-id="1791810000000000009"] {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body #rec4714296401 #molecule-1792868116671000005,
  html body #rec4714296401 #molecule-1791810000000000009,
  html body #rec4714296401 #molecule-1791810000000000023 {
    width: 100% !important;
    justify-content: flex-start !important;
  }
  html body #rec4714296401 #molecule-1792868116671000005 > *,
  html body #rec4714296401 #molecule-1791810000000000009 > * {
    flex: 1 1 0 !important;
    width: auto !important;
  }
  html body #rec4714296401 #molecule-1792868116671000005 > .tn-elem[data-elem-id="1791810000000000024"],
  html body #rec4714296401 #molecule-1791810000000000009 > .tn-elem[data-elem-id="1791810000000000011"] {
    flex: 0 0 64px !important;
    width: 64px !important;
  }
  html body #rec4714296401 .tn-elem[data-elem-type="button"] {
    width: 100% !important;
  }
  html body #rec4714296401 .tn-elem[data-elem-type="button"] .tn-atom {
    width: 100% !important;
    padding: 0 8px !important;
    font-size: 14px !important;
  }
}

/* Попапы кейсов: слайдер на всю ширину контейнера. Ширина задана числом (100% даёт 0: слайдер считает её, пока попап скрыт) */
@media (min-width: 640px) and (max-width: 959px) {
  html body :is(#rec5110567401, #rec5111055101, #rec5111150201, #rec5111298101) .tn-elem[data-elem-type="gallery"] .t-slds__main {
    width: calc(100vw - 86px) !important;
  }
}
@media (max-width: 639px) {
  html body :is(#rec5110567401, #rec5111055101, #rec5111150201, #rec5111298101) .tn-elem[data-elem-type="gallery"] .t-slds__main {
    width: calc(100vw - 38px) !important;
  }
}

/* Попапы кейсов: высота слайдера равна высоте рамки. Тильда уменьшает рамку по ширине экрана (на 390 она 220), а сам слайдер оставался 256: рамка с overflow:hidden срезала его низ, и снизу не было скругления. Рамка становится контейнером, слайдер берёт её высоту */
html body :is(#rec5110567401, #rec5111055101, #rec5111150201, #rec5111298101) .tn-elem[data-elem-type="gallery"] {
  container-type: size;
}
html body :is(#rec5110567401, #rec5111055101, #rec5111150201, #rec5111298101) .tn-elem[data-elem-type="gallery"] :is(.tn-atom, .t-slds__main, .t-slds__container, .t-slds__items-wrapper, .t-slds__item, .t-slds__wrapper, .t-bgimg) {
  height: 100cqh !important;
}

/* Контакты, планшет и мобила: строки «иконка + текст» не вылезают за карточку */
@media (max-width: 959px) {
  #rec4719969501 [id^="molecule-"] .tn-group[data-group-id="1792687096500000028"],
  #rec4719969501 [id^="molecule-"] .tn-group[data-group-id="1792686871976000008"],
  #rec4719969501 [id^="molecule-"] .tn-group[data-group-id="1792687982781000004"] {
    width: auto !important;
    flex: 1 1 0 !important;
  }
}

/* Контакты, мобила до 479: ФИО справа от фото переносится внутри карточки (в Safari на iPhone «Пузанков Сергей Сергеевич» шло одной строкой за край). width:0 + flex 1 даёт ширину строго по остатку, min-width:0 разрешает сжатие. С 480 карточки устроены иначе, там правило не нужно */
@media (max-width: 479px) {
  html body #rec4719969501 :is(.tn-elem[data-elem-id="1792687096500000035"], .tn-elem[data-elem-id="1792686981081000016"]) {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body #rec4719969501 :is(.tn-elem[data-elem-id="1792687096500000035"], .tn-elem[data-elem-id="1792686981081000016"]) .tn-atom {
    width: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* Контакты, мобила и планшет 640–959: у карточки Пузанкова имя стоит на 8px от фото (Тильда задала абсолютное left 108 при ширине фото 100), у Калугина на 16. Выравниваем: отступ 16px и по высоте по центру фото, как у Калугина */
@media (max-width: 479px), (min-width: 640px) and (max-width: 959px) {
  html body #rec4719969501 #molecule-1792686981081000015 > .tn-elem[data-elem-id="1792686981081000016"] {
    left: 116px !important;
    top: 31px !important;
    width: calc(100% - 116px) !important;
  }
}

/* Контакты, 480–959: карточка с адресом на всю ширину в два столбца; инженеры рядом с 640. Селектор артборда усилен (html body), иначе его перебивает собственное правило блока Тильды (column) */
@media (min-width: 480px) and (max-width: 959px) {
  html body #rec4719969501 .t396__artboard { flex-direction: row !important; flex-wrap: wrap !important; column-gap: 20px !important; row-gap: 20px !important; align-content: flex-start !important; align-items: stretch !important; }
  #rec4719969501 .t396__artboard > .tn-elem[data-elem-id="1791816000000000001"] { flex: 0 0 100% !important; width: 100% !important; }
  #rec4719969501 .t396__artboard > .tn-group[data-group-id="1792688067691000010"] { flex: 0 0 100% !important; width: 100% !important; }
  #rec4719969501 .t396__artboard > .tn-group[data-group-id="1792687096499000021"],
  #rec4719969501 .t396__artboard > .tn-group[data-group-id="1792687757017000003"] { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
  #rec4719969501 #molecule-1792688053375000009 { flex-direction: row !important; gap: 24px !important; align-items: flex-start !important; }
  #rec4719969501 #molecule-1792688053375000009 > .tn-group { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
}
/* Контакты, 480–639: карточки друг под другом, внутри два столбца */
@media (min-width: 480px) and (max-width: 639px) {
  #rec4719969501 .t396__artboard > .tn-group[data-group-id="1792687096499000021"],
  #rec4719969501 .t396__artboard > .tn-group[data-group-id="1792687757017000003"] { flex: 0 0 100% !important; }
  #rec4719969501 :is(#molecule-1792687096500000022, #molecule-1792687753749000002) { flex-direction: row !important; gap: 20px !important; align-items: flex-start !important; }
  #rec4719969501 :is(#molecule-1792687096500000034, #molecule-1792686981081000015) { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  #rec4719969501 :is(#molecule-1792687096500000022, #molecule-1792687753749000002) > .tn-group { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
}
