/* ==========================================================================
   base.css — базовый слой вёрстки (замена tilda-grid / tilda-blocks)
   Проект: shtukaturnye-pravila.ru
   ========================================================================== */

/* ---------- 1. Reset / базовая типографика ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.t-body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #000;
  background-color: #fff;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; border: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }

.t-body a,
.t-body button,
.t-body .tn-atom { -webkit-tap-highlight-color: transparent; }

/* ---------- 2. Служебные классы Tilda ---------- */
.t-clear { clear: both; }
.t-align_center { text-align: center; }
.t-align_left { text-align: left; }
.t-align_right { text-align: right; }
.t-margin_auto { margin-left: auto; margin-right: auto; }
.t-width { max-width: 100%; }
.t-video-lazyload { position: relative; }

.t-col { float: left; position: relative; }
.t-col::after { content: ""; display: table; clear: both; }

.t-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.t-section__container { max-width: 1000px; }
.t-col_12 { width: 100%; }
.t-col_6 { width: 50%; }
.t-width_6 { max-width: 300px; }
.t-width_10 { max-width: 500px; }
.t-width_12 { max-width: 600px; }

@media (max-width: 959px) {
  .t-col_6 { width: 100%; float: none; }
  .t-width_6 { max-width: 100%; }
  .t-width_10 { max-width: 100%; }
}

/* ---------- 3. Records ---------- */
.t-records { overflow: hidden; }
.t-rec {
  position: relative;
  box-sizing: border-box;
}
.t-rec_pt_15  { padding-top: 15px; }
.t-rec_pt_30  { padding-top: 30px; }
.t-rec_pt_0   { padding-top: 0; }
.t-rec_pb_0   { padding-bottom: 0; }
.t-rec_pb_15  { padding-bottom: 15px; }
.t-rec_pb_75  { padding-bottom: 75px; }
.t-rec_pb_90  { padding-bottom: 90px; }
.t-rec_pb_105 { padding-bottom: 105px; }

/* Ширина экрана: блоки только для своих диапазонов */
.t-screenmin-980px { display: block; }
.t-screenmax-980px { display: none; }
@media screen and (max-width: 980px) {
  .t-screenmin-980px { display: none; }
  .t-screenmax-980px { display: block; }
}

/* ---------- 4. Zero Block T396 ---------- */
/* display:flow-root создаёт блочный форматирующий контекст, width:100%
   не даёт схлопнуться по контенту. Без обоих контейнер .t396 уезжал
   вбок и вниз — так «уезжал» подвал на policenew.html. */
.t396 {
  position: relative;
  z-index: 1;
  display: flow-root;
  width: 100%;
}
.t396__artboard {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  /* Артборд — блок во всю ширину. Без явной ширины он схлопывался
     по контенту (все элементы внутри абсолютные) и уезжал вправо. */
  width: 100%;
}
.t396__carrier {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.t396__filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.t396__elem {
  position: absolute;
  box-sizing: border-box;
}
.t396__elem > .tn-atom {
  width: 100%;
  box-sizing: border-box;
}
.tn-atom__html { height: 100%; }
.tn-atom__html > div { height: 100%; }

.tn-atom__img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}
.tn-elem[data-elem-type="image"] .tn-atom { line-height: 0; }
.tn-elem[data-elem-type="image"] .tn-atom__img { max-width: 100%; }

.tn-atom[data-atom-type="button"] { display: block; }
a.tn-atom {
  display: inline-block;
  padding: 20px 30px;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  border-radius: 4px;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.2s ease;
}
.t396__elem[data-elem-type="button"] .tn-atom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
}
.t396__elem[data-elem-type="button"] .tn-atom:hover { opacity: 0.88; }

.tn-elem[data-elem-type="shape"] .tn-atom { height: 100%; }

.t396__elem h1.tn-atom,
.t396__elem h2.tn-atom,
.t396__elem h3.tn-atom,
.t396__elem h4.tn-atom,
.t396__elem h5.tn-atom,
.t396__elem h6.tn-atom {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}
.t396__elem .tn-atom p { margin: 0; }

/* ---------- 5. Анимации появления ---------- */
/* Скрываем только если JS точно работает (класс ставится инлайн-скриптом).
   Иначе контент остаётся видимым даже при отказе скриптов. */
html.js-anim .t-animate {
  opacity: 0;
  will-change: transform, opacity;
}
html.js-anim .t-animate.t-animate_started {
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
.t-animate.t-animate_fadeinup.t-animate_started { animation-name: fadeinup; }
.t-animate.t-animate_fadein.t-animate_started  { animation-name: fadein; }
.t-animate.t-animate_zoomin.t-animate_started  { animation-name: zoomin; }
/* Финальное состояние: гарантированно видим, даже если анимация не проигралась */
html.js-anim .t-animate.t-animate_done {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
}
.t-animate_no { opacity: 1 !important; animation: none !important; }

@keyframes fadeinup {
  from { opacity: 0; transform: translate3d(0, 100px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes zoomin {
  from { opacity: 0; transform: scale3d(0.9, 0.9, 0.9); }
  to   { opacity: 1; transform: scale3d(1, 1, 1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .t-animate { opacity: 1 !important; animation: none !important; }
}

/* ---------- 6. Заголовки / описания (типографические шкалы) ---------- */.t-title_xxs { font-size: 45px; line-height: 1.1; font-weight: 500; }
.t-title_xs  { font-size: 40px; line-height: 1.15; font-weight: 500; }

.t-descr_xl  { font-size: 24px; line-height: 1.4; font-weight: 300; }
.t-descr_md  { font-size: 20px; line-height: 1.4; font-weight: 300; }
.t-descr_xs  { font-size: 18px; line-height: 1.45; font-weight: 300; }
.t-descr_xxs { font-size: 16px; line-height: 1.5; font-weight: 300; }

.t-name_xl  { font-size: 24px; line-height: 1.2; font-weight: 500; }
.t-name_lg  { font-size: 22px; line-height: 1.2; font-weight: 500; }
.t-name_md  { font-size: 18px; line-height: 1.3; font-weight: 500; }
.t-name_xs  { font-size: 16px; line-height: 1.35; font-weight: 500; }

.t-text_md { font-size: 18px; line-height: 1.45; }
.t-text_xs { font-size: 16px; line-height: 1.45; }
.t-text_xxs { font-size: 14px; line-height: 1.45; }

@media (max-width: 959px) {
  .t-title_xxs { font-size: 34px; }
  .t-title_xs  { font-size: 30px; }
  .t-descr_xl  { font-size: 20px; }
}
@media (max-width: 639px) {
  .t-title_xxs { font-size: 27px; }
  .t-title_xs  { font-size: 25px; }
  .t-descr_xl  { font-size: 18px; }
  .t-name_xl,
  .t-name_lg  { font-size: 20px; }
}

/* ---------- 7. Кнопки Tilda ---------- */
.t-btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out,
              box-shadow 0.2s ease-in-out, opacity 0.2s ease;
  cursor: pointer;
}
.t-btn table { width: 100%; height: 100%; }
.t-btn td { padding: 0; text-align: center; vertical-align: middle; }
.t-btn_sm { padding: 14px 30px; font-size: 16px; }
.t-btn_md { padding: 16px 34px; font-size: 17px; }
.t-btn_xs { padding: 10px 22px; font-size: 14px; }
.t-btn:hover { opacity: 0.9; }

/* ---------- 8. Формы ---------- */
.t-form { position: relative; }
.t-form__inputsbox { position: relative; }
.t-form__inputsbox_inrow { margin: 0 -10px; }
.t-form__inputsbox_inrow::after { content: ""; display: table; clear: both; }
.t-form__inputsbox_vertical-form { max-width: 500px; }

.t-input-group { position: relative; }
.t-input-block { position: relative; }

.t-input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 58px;
  padding: 0 20px;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
/* Honeypot — скрытое поле против ботов: человеку не видно, но
   заполненное значение позволяет отбросить спам */
.t-form__hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.t-input:focus {
  border-color: #b3b3b3;
  box-shadow: 0 0 0 2px rgba(178, 34, 34, 0.12);
}
.t-input::placeholder { color: #999; opacity: 1; }
textarea.t-input { height: auto; padding: 15px 20px; resize: vertical; }

.t-form__inputsbox_inrow .t-input-group {
  width: 50%;
  float: left;
  padding: 0 10px;
  margin-bottom: 20px;
}
.t-form__inputsbox_inrow .t-input-group.t-input-group_nm,
.t-form__inputsbox_inrow .t-input-group.t-input-group_ph,
.t-form__inputsbox_inrow .t-input-group.t-input-group_em {
  width: 50%;
  float: left;
  padding: 0 10px;
  margin-bottom: 20px;
}
/* На узких экранах поля формы в столбец — иначе плейсхолдер телефона обрезается */
@media screen and (max-width: 560px) {
  .t-form__inputsbox_inrow { margin: 0; }
  .t-form__inputsbox_inrow::after { content: none; }
  .t-form__inputsbox_inrow .t-input-group,
  .t-form__inputsbox_inrow .t-input-group.t-input-group_nm,
  .t-form__inputsbox_inrow .t-input-group.t-input-group_ph,
  .t-form__inputsbox_inrow .t-input-group.t-input-group_em {
    width: 100%;
    float: none;
    padding: 0;
    margin-bottom: 16px;
  }
}

.t-input-title {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 5px;
}

.t-input-error {
  color: #e2402c;
  font-size: 12px;
  line-height: 1.3;
  margin-top: 4px;
  min-height: 0;
}
.t-input-error:empty { display: none; }
.t-input.t-input-error { border-color: #e2402c !important; }

.t-form__errorbox-wrapper {
  display: none;
  background-color: #ffe9e6;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 12px 0;
}
.t-form__errorbox-text { font-size: 14px; line-height: 1.4; color: #e2402c; }
.t-form__errorbox-item { display: none; }
.t-form__errorbox-item.t-form__errorbox-item_shown { display: block; }

.t-form__successbox {
  display: none;
  background-color: #e9f7ef;
  border: 1px solid #4cd964;
  border-radius: 4px;
  padding: 16px 18px;
  color: #215c31;
  font-size: 16px;
  line-height: 1.45;
}
.t-form__submit {
  margin-top: 10px;
  width: 100%;
  /* text-align вместо flex: в flex-контейнере кнопка центрировалась
     относительно схлопнувшейся в 0 ширины основы */
  text-align: center;
}
.t-submit {
  display: inline-block;
  width: auto;
  min-width: 200px;
  max-width: 100%;
  padding: 18px 30px;
  border: none;
  border-radius: 4px;
  color: #fff;
  background-color: #000;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.t-submit:hover { opacity: 0.88; }
.t-submit:disabled { opacity: 0.6; cursor: default; }

/* Радиокнопки */
.t-radio__wrapper { position: relative; }
.t-radio__item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
}
.t-radio__item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.t-radio__indicator {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  border: 2px solid #f26b09;
  border-radius: 50%;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}
.t-radio__item input:checked + .t-radio__indicator {
  background-color: #f26b09;
  box-shadow: inset 0 0 0 4px #fff;
}
.t-radio__item:hover .t-radio__indicator { background-color: rgba(242, 107, 9, 0.12); }
.t-radio__item input:checked:hover ~ * { color: inherit; }

/* Картинка-радиокнопка (T862) */
.t-img-select__container { position: relative; }
.t-img-select__control {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
}
.t-img-select__control input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.t-img-select__indicator {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 50%;
  background-size: cover;
  background-position: center center;
  border: 2px solid transparent;
  box-sizing: border-box;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.t-img-select__control input:checked + .t-img-select__indicator {
  border-color: #f26b09;
  opacity: 0.85;
}
.t-img-select__control:hover .t-img-select__indicator { opacity: 0.85; }
.t-img-select__text { font-size: 16px; line-height: 1.4; }

/* ---------- 9. Popup (T702 / T862) ---------- */
.t-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 20px;
  box-sizing: border-box;
  z-index: 100000;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: rgba(0, 0, 0, 0.65);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.t-popup.t-popup_show { display: flex; }
.t-popup.t-popup_visible { opacity: 1; }

/* margin:auto вместо align-items:center — окно центрируется
   и при этом корректно прокручивается, если не влезает по высоте */
.t-popup__container {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  padding: 40px 35px 35px;
  box-sizing: border-box;
  transform: translateY(20px);
  transition: transform 0.25s ease;
}
.t-popup__container-static { margin: auto; }
.t-popup.t-popup_visible .t-popup__container { transform: translateY(0); }
.t-popup__container.t-width_10 { max-width: 700px; }
.t-popup__container.t-width_6 { max-width: 480px; }

.t-popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}
/* Крестик белый в SVG, поэтому кладём подложку — иначе
   на белом окне кнопка закрытия не видна */
.t-popup__close-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #f0f0f0;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.t-popup__close-wrapper:hover {
  transform: rotate(90deg);
  background-color: #e2e2e2;
}
.t-popup__close-icon { display: block; width: 20px; height: 20px; }
/* В разметке у иконок стоит fill:#ffffff !important — перебиваем
   более специфичным селектором, чтобы крестик был тёмным */
#rec456855154 .t-popup__close .t-popup__close-icon g,
#rec457269409 .t-popup__close .t-popup__close-icon g {
  fill: #333333 !important;
}

body.t-popup_opened { overflow: hidden; }

@media (max-width: 600px) {
  /* Отступы остаются — по ним видно затемнение фона, и понятно,
     что это всплывающее окно, а не отдельная страница */
  .t-popup { padding: 16px; }
  .t-popup__container {
    max-width: 100%;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    border-radius: 10px;
    padding: 46px 20px 26px;
  }
  .t-popup__close { top: 8px; right: 8px; }
  .t-popup__close-wrapper { width: 34px; height: 34px; }
  .t-popup__close-icon { width: 18px; height: 18px; }
  /* На узком экране кнопка отправки — во всю ширину формы */
  .t-submit { display: block; width: 100%; min-width: 0; padding: 16px 18px; }
}

/* ---------- 10. T702 (попап с формой) ---------- */
.t702__img { display: none; }
.t702__wrapper { width: 100%; }
.t702__text-wrapper { margin-bottom: 25px; }
.t702__title { font-size: 28px; line-height: 1.25; font-weight: 500; }
.t702__descr { margin-top: 10px; }
.t702__form-bottom-text { margin-top: 20px; font-size: 13px; line-height: 1.5; }
.t702__form-bottom-text a { text-decoration: underline; }
@media (max-width: 600px) {
  .t702__title { font-size: 22px; }
}

/* ---------- 11. T862 (степ-форма в попапе) ---------- */
.t862 { width: 100%; }
.t862__wrapper { width: 100%; }
.t862__quiz { width: 100%; }
.t862__quiz-wrapper { width: 100%; }
.t862__quiz-description-wrapper { margin-bottom: 20px; }
.t862__quiz-description { font-size: 15px; line-height: 1.5; }
.t862__quiz-description-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.t862__quiz-description-title svg {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  fill: none;
  stroke-width: 4;
}
.t862__quiz-description-title .st61 { stroke: #f26b09; }
.t862__result-title-block { display: none; }
.t862__progressbar {
  height: 4px;
  background-color: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 25px;
}
.t862__progress {
  height: 100%;
  width: 25%;
  background-color: #f26b09;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.t862__quiz-form-wrapper .t-input-group { margin-bottom: 22px; }
.t862__btn-wrapper { display: flex; gap: 12px; margin-top: 25px; }
.t862__btn-wrapper .t-btn { flex: 1 1 0; }
.t862__btn_prev { background-color: #cdcdcd !important; color: #fff !important; }
.t862__btn_prev:disabled { opacity: 0.5; cursor: default; }
.t862__btn_result { display: none; }
.t862__quiz-published .t862__btn_next { display: inline-block; }
@media (max-width: 600px) {
  .t862__btn-wrapper { flex-direction: column-reverse; }
  .t862__btn-wrapper .t-btn { width: 100%; }
}

/* ---------- 12. T121 (видео) ---------- */
.t121 { width: 100%; }
.t121 center { display: block; }
.t121 .t-width_10 { margin: 0 auto; }
.t121 iframe { display: block; width: 100%; border: 0; }
@media (max-width: 767px) {
  .t121 .t-width_10 { max-width: 100% !important; }
  .t121 iframe { height: 56.25vw !important; min-height: 200px; }
}

/* ---------- 13. T923 (галерея-карусель 7 этапов) ---------- */
.t923 { position: relative; }
.t-slds { position: relative; }
.t-slds__main { position: relative; }
.t-slds__container { position: relative; overflow: hidden; padding: 12px 2px 20px; }
.t-slds__items-wrapper {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.5s ease;
  will-change: transform;
}
.t-slds_animated-slow { transition-duration: 0.5s; }
.t-slds_animated-none { transition: none; }
.t-slds__item {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 0 10px;
}
.t-slds__item_active { display: block; }

.t923__width_12 { max-width: 100%; }
.t923__slds-wrapper { width: 100%; }
/* Ширину карточки слайдера задаёт JS (initSliders) — она обязана
   совпадать с числом видимых элементов, иначе карточки «обрезаются». */
.t923__col {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
.t923__wrapper {
  position: relative;
  width: 100%;
  height: 360px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #1f1f1f;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.t923__wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
}
.t923__imgwrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background-color: #1f1f1f !important;
}
.t923__imgwrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.88) 100%);
  pointer-events: none;
  z-index: 1;
}
.t923__bgimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform 0.45s ease;
}
.t923__wrapper:hover .t923__bgimg {
  transform: scale(1.05);
}
.t923__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px 18px;
  background-color: transparent !important;
  box-sizing: border-box;
}
.t923__paddingsmall {
  padding: 0 0 0 12px;
  border-left: 3px solid #B22222;
}
.t-card__title { font-weight: 600; color: #ffffff; }
.t-card__descr { font-size: 16px; font-weight: 300; color: rgba(255, 255, 255, 0.85); }
.t-card__title > div {
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 600;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

.t-slds__arrow_container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.t-slds__arrow_wrapper {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
}
.t-slds__arrow_wrapper-left { left: -16px; }
.t-slds__arrow_wrapper-right { right: -16px; }
.t-slds__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.85);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.t-slds__arrow:hover { background-color: #B22222 !important; }
.t-slds__arrow_body { display: flex; align-items: center; }
.t-slds__arrow_body-left { transform: scaleX(-1); }
.t-slds__arrow_body svg { width: 100%; height: auto; }

@media (max-width: 1260px) {
  .t-slds__arrow_wrapper-left { left: 6px; }
  .t-slds__arrow_wrapper-right { right: 6px; }
}
@media (max-width: 960px) {
  /* стрелки внутри кадра, чтобы не закрывать карточки */
  .t-slds__arrow_wrapper-left { left: 6px; }
  .t-slds__arrow_wrapper-right { right: 6px; }
  .t-slds__arrow { width: 38px; height: 38px; opacity: 0.9; }
  .t-slds__arrow:hover { opacity: 1; }
  .t923__wrapper { height: 340px; }
}
@media (max-width: 640px) {
  .t-slds__arrow_wrapper-left { left: 4px; }
  .t-slds__arrow_wrapper-right { right: 4px; }
  .t-slds__arrow { width: 36px; height: 36px; }
  .t923__wrapper { height: 320px; }
  .t-card__title > div { font-size: 19px !important; }
}

/* ---------- 14. T776 (каталог работ) ---------- */
.t776 { position: relative; }
/* Контейнер сам центрируется. Раньше здесь был margin: 0 -15px,
   который перебивал margin: 0 auto от .t-container и уводил сетку вбок. */
.t776__parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.t776__col {
  width: 50%;
  max-width: 600px;
  padding: 0 15px;
  margin: 0 0 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
/* Ссылка-обёртка карточки обязана быть блочной:
   иначе кнопка «Подробнее» выпадает из колонки и наезжает на следующую карточку */
a.js-product-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.js-product-link:hover { text-decoration: none; }

.t776__content {
  display: block;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  flex: 1 1 auto;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.t776__col:hover .t776__content {
  transform: translateY(-4px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
}

.t776__imgwrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  overflow: hidden;
  background-color: #1b1b1b;
}
/* Видео и постер заполняют кадр полностью (object-fit: cover),
   поэтому чёрных полей по бокам нет */
.t776__poster,
.t776__video,
.t776__imgwrapper iframe,
.t776__imgwrapper .t776__bgimg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}
.t776__static { position: absolute; inset: 0; }

.t776__play {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.t776__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85) inset;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.t776__play-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  margin: -12px 0 0 -10px;
  border-left: 20px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.t776__play:hover .t776__play-btn {
  background-color: rgba(178, 34, 34, 0.85);
  transform: scale(1.08);
}
.t776__play:focus-visible { outline: 3px solid #B22222; outline-offset: -3px; }

.t776__bgimg_first_hover { z-index: 2; }
.t776__textwrapper { padding: 18px 18px 12px; }
.t776__title { font-weight: 700; font-size: 20px; line-height: 1.25; margin-bottom: 8px; }
.t776__descr { font-size: 14px; line-height: 1.5; font-weight: 300; color: #333; }
/* margin-top:auto прижимает кнопки к низу — они выравниваются по карточкам */
.t776__btn-wrapper { padding: 6px 18px 20px; margin-top: auto; }
.t776__btn { display: block; width: 100%; text-align: center; }
.t776__separator { display: none; }

.t776__product-full { display: none; }

@media (max-width: 640px) {
  .t776__parent { display: block; max-width: 100%; padding: 0 15px; }
  .t776__col { width: 100%; max-width: none; padding: 0; margin-bottom: 20px; }
  .t776__title { font-size: 18px; }
  .t776__descr { font-size: 14px; }
  .t776__play-btn { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .t776__play-btn::before {
    margin: -9px 0 0 -8px;
    border-left-width: 16px;
    border-top-width: 9px;
    border-bottom-width: 9px;
  }
}

/* ---------- 15. T527 (персонал) ---------- */
.t527 { position: relative; }
/* Как и .t776__parent: центрируем явно, без отрицательного margin */
.t527__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.t527__col {
  flex: 0 0 auto;
  width: 220px;
  max-width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.t527__itemwrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  background-color: #f2f2f2;
}
.t527__bgimg {
  width: 100%;
  padding-bottom: 116%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.t527__wrapperleft {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  color: #fff;
}
.t527__persname { font-size: 22px; font-weight: 500; }
.t527__persdescr { font-size: 14px; font-weight: 300; margin-top: 4px; }
.t527__bottommargin_sm { margin-bottom: 4px; }
/* Класс-перекрёсток .t-list__container_inrow2 имеет специфичность 0,2,0,
   поэтому мобильные правила пишем с той же специфичностью. */
.t527__container.t-list__container_inrow2 { display: flex; justify-content: center; }
@media (max-width: 640px) {
  .t527__container.t-list__container_inrow2 {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    gap: 0;
  }
  .t527__col {
    display: block;
    width: 100%;
    max-width: 220px;
    margin: 0 auto 20px;
    padding: 0;
  }
}

/* ---------- 16. T190 (плавающая кнопка «наверх») ---------- */
.t190 { position: fixed; }
.t190__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, opacity 0.3s ease;
  opacity: 0;
  visibility: hidden;
}
.t190__button.is-visible { opacity: 1; visibility: visible; }
.t190__button:hover { transform: translateY(-3px); }
.t190__button svg { width: 50px; height: 50px; }
.t190__button path { fill: #B22222; transition: fill 0.3s ease; }
.t190__button:hover path { fill: #8B0000; }

/* ---------- 17. Видео-фон ---------- */
.videoBackground { position: relative; width: 100%; height: 100%; }
.videoBackground > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  background-color: #000;
}

/* ---------- 18. Меню T228 (десктоп) ---------- */
.t228 {
  position: relative;
  width: 100%;
  z-index: 20;
}
.t228__maincontainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.t228__padding40px { display: none; }
.t228__leftside,
.t228__centerside,
.t228__rightside {
  position: relative;
  display: flex;
  align-items: center;
}
.t228__leftside { flex: 0 0 auto; }
.t228__centerside { flex: 1 1 auto; justify-content: center; }
.t228__rightside { flex: 0 0 auto; }
.t228__leftcontainer,
.t228__centercontainer,
.t228__rightcontainer { display: flex; align-items: center; }

/* Правая часть шапки: текст → соцсети → кнопка.
   gap даёт свободное пространство между блоками — раньше иконки
   соцсетей примыкали вплотную к кнопке телефона, т.к. зазор внутри
   списка держался на   в разметке, а между блоками его не было. */
.t228__rightcontainer { gap: 22px; }

.t228__imgwrapper { display: block; line-height: 0; }
.t228__imglogo { display: block; max-width: 100%; height: auto; }

.t228__list { display: flex; align-items: center; }
.t228__list_item { position: relative; }
.t-menu__link-item {
  display: inline-block;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: #000;
  text-transform: uppercase;
  padding: 10px 0;
  transition: color 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
}
.t-menu__link-item::after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  background-color: #B22222;
  transition: width 0.25s ease;
}
.t-menu__link-item:hover,
.t228__list_item.t-active .t-menu__link-item { color: #B22222; }
.t-menu__link-item:hover::after,
.t228__list_item.t-active .t-menu__link-item::after { width: 100%; }
.t228__list_hidden { display: none; }

.t228__right_descr {
  font-size: 12px;
  line-height: 1.35;
  color: #666;
  max-width: 165px;
  margin-right: 15px;
  text-align: right;
}
/* На узких десктопных места в шапке не хватает: описание убираем,
   его роль выполняет заголовок первого экрана */
@media screen and (min-width: 981px) and (max-width: 1099px) {
  .t228__right_descr { display: none; }
}

.t-sociallinks__wrapper { display: flex; align-items: center; gap: 8px; }
.t-sociallinks__item { margin: 0; line-height: 0; }
.t-sociallinks__item a { display: block; line-height: 0; transition: opacity 0.2s ease; }
.t-sociallinks__item a:hover { opacity: 0.55; }
.t-sociallinks__svg { display: block; width: 30px; height: 30px; }

.t228__right_buttons { display: flex; align-items: center; }
.t228__right_buttons_but { display: block; }

/* ---------- 19. Мобильное меню T228 ---------- */
.tmenu-mobile { display: none; }
.tmenu-mobile__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 60px;
  box-sizing: border-box;
}
/* Логотип в мобильной шапке: слева, бургер — справа */
.tmenu-mobile__logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}
.tmenu-mobile__logo img {
  display: block;
  width: auto;
  height: 44px;
  max-width: 130px;
  object-fit: contain;
}
.tmenu-mobile__imglogo { display: block; max-width: 300px; height: auto; margin: 0 auto; }

@media screen and (max-width: 980px) {
  .tmenu-mobile { display: block; position: relative; z-index: 30; }

  .tmenu-mobile__menucontent_hidden {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow-y: auto;
    z-index: 1000;
    padding: 10px 0 40px;
  }
  /* !important — инлайновые <style> блока идут после custom.css */
  .tmenu-mobile__menucontent_shown { display: block !important; }

  /* Раскрытая панель: вертикальная раскладка */
  .tmenu-mobile__menucontent_shown .t228__maincontainer {
    display: block;
    height: auto !important;
    max-width: 100%;
    padding: 0 20px;
  }
  .tmenu-mobile__menucontent_shown .t228__leftside,
  .tmenu-mobile__menucontent_shown .t228__centerside,
  .tmenu-mobile__menucontent_shown .t228__rightside {
    display: block;
    width: 100%;
    float: none;
  }
  .tmenu-mobile__menucontent_shown .t228__leftcontainer { padding: 0 0 20px; }
  .tmenu-mobile__menucontent_shown .t228__leftcontainer .t228__imglogo {
    max-height: 70px;
    width: auto;
  }
  .tmenu-mobile__menucontent_shown .t228__centercontainer { display: block; }
  .tmenu-mobile__menucontent_shown .t228__list { display: block; }
  .tmenu-mobile__menucontent_shown .t228__list_item {
    display: block;
    padding: 0 !important;
    border-bottom: 1px solid #ececec;
  }
  .tmenu-mobile__menucontent_shown .t-menu__link-item {
    display: block;
    width: 100%;
    padding: 15px 0;
    font-size: 16px;
    font-weight: 500;
    color: #000;
  }
  .tmenu-mobile__menucontent_shown .t-menu__link-item::after { display: none; }
  .tmenu-mobile__menucontent_shown .t-menu__link-item:hover { color: #B22222; }

  .tmenu-mobile__menucontent_shown .t228__rightcontainer {
    display: block;
    padding: 25px 0 10px;
  }
  .tmenu-mobile__menucontent_shown .t228__right_descr {
    max-width: 100%;
    text-align: center;
    font-size: 14px;
    margin: 0 0 20px;
  }
  .tmenu-mobile__menucontent_shown .t-sociallinks__wrapper {
    justify-content: center;
    gap: 10px;
  }
  .tmenu-mobile__menucontent_shown .t228__right_buttons_but { margin-top: 20px; }
  .tmenu-mobile__menucontent_shown .t228__right_buttons_but .t-btn {
    display: block;
    text-align: center;
  }
}

@media screen and (max-width: 480px) {
  .tmenu-mobile__container { padding: 0 14px; height: 56px; }
  .tmenu-mobile__logo img { height: 38px; }
}


.t228__leftcontainer .t228__imgwrapper {
	margin: 0 auto;
}

.t228__right_buttons .t228__right_buttons_wrap {
	margin: 0 auto;
}