/* ============================================================
   СТРОЙГОСТ — главная страница. Фрагмент для 1С-Битрикс.
   Все классы с префиксом sg-. Переменные — в скоупе .sg-page,
   не в :root, чтобы не влиять на шаблон сайта и админ-панель.
   Ресетов и селекторов на голые теги здесь нет намеренно.
   ============================================================ */

/* --- Шрифты. Если шаблон сайта уже подключает Montserrat,
       этот блок можно удалить целиком. ------------------------ */
@font-face{font-family:"SG Montserrat";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/montserrat-cyrillic-400.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"SG Montserrat";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/montserrat-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:"SG Montserrat";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/montserrat-cyrillic-500.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"SG Montserrat";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/montserrat-latin-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:"SG Montserrat";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/montserrat-cyrillic-600.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"SG Montserrat";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/montserrat-latin-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:"SG Montserrat";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/montserrat-cyrillic-700.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"SG Montserrat";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/montserrat-latin-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:"SG Montserrat";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/montserrat-cyrillic-800.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"SG Montserrat";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/montserrat-latin-800.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:"SG Montserrat";font-style:normal;font-weight:900;font-display:swap;
  src:url("../fonts/montserrat-cyrillic-900.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"SG Montserrat";font-style:normal;font-weight:900;font-display:swap;
  src:url("../fonts/montserrat-latin-900.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:"SG Caveat";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/caveat-cyrillic-700.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"SG Caveat";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/caveat-latin-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215;}

/* --- Единственный «звёздочный» селектор, и он ограничен .sg-page.
       Запрет на * { } в брифе защищает админ-панель и попапы Битрикса —
       внутрь .sg-page они не попадают, поэтому здесь это безопасно.
       Без border-box все min-height и width:100% с паддингами раздуваются. --- */
.sg-page,
.sg-page *,
.sg-page *::before,
.sg-page *::after{box-sizing:border-box;}

/* --- Токены дизайн-системы «Стройгост. Лифлет.» ------------- */
.sg-page{
  --sg-green:#2f7d3e;
  --sg-green-dark:#22602f;
  --sg-lime:#7cba3f;
  --sg-lime-pale:#bfe08a;
  --sg-green-mid:#4c9a3f;
  --sg-lime-head:#d6e8a6;
  --sg-ink:#2b2b29;
  --sg-muted:#6c6c66;
  --sg-line:#d8d8d2;
  --sg-bg:#ededeb;
  --sg-tint:#eaf3de;
  --sg-star:#f5a623;
  --sg-card:#fff;
  --sg-font:"SG Montserrat","Montserrat",Arial,sans-serif;
  --sg-script:"SG Caveat","Caveat",cursive;
  --sg-r:16px;
  --sg-r-lg:24px;
  --sg-r-pill:999px;
  --sg-gap:24px;
  --sg-pad:clamp(28px,3.4vw,56px);
  --sg-offset-top:0px;

  font-family:var(--sg-font);
  color:var(--sg-ink);
  background:var(--sg-bg);
  line-height:1.55;
  overflow-wrap:anywhere;
}

/* Обнуление браузерных отступов внутри своего скоупа.
   Перечислять классы бессмысленно: <p> используется ещё для ~35
   классов, и каждый тащил UA-margin 1em. Из-за этого, например,
   .sg-card__price нёс margin:22px 0 — тело карточки раздувалось
   с 74 до 99 px, а цена уезжала на 22 px ниже кнопки.
   Селекторы по тегам ограничены .sg-page, поэтому админ-панели
   и попапов Битрикса не касаются — та же категория, что box-sizing. */
.sg-page h1,
.sg-page h2,
.sg-page h3,
.sg-page h4,
.sg-page p,
.sg-page dl,
.sg-page dt,
.sg-page dd,
.sg-page figure,
.sg-page blockquote{margin:0;padding:0;}
.sg-page ul,
.sg-page ol{margin:0;padding:0;}
.sg-page .sg-list{list-style:none;}
.sg-page .sg-media{display:block;max-width:100%;}


/* --- Броня от стилей шаблона сайта -------------------------
       Аспро оформляет ГОЛЫЕ теги: h1..h6 получают свой
       font-family, li — серую чёрточку в ::before и отступ,
       blockquote — рамку слева и зелёную полосу в ::before.
       Голый тег специфичнее наследования, поэтому нужное
       возвращаем явно. Свои правила на классах внутри
       .sg-page специфичнее этих и работают как прежде.  --- */
.sg-page h1,.sg-page h2,.sg-page h3,
.sg-page h4,.sg-page h5,.sg-page h6{font-family:inherit;}
.sg-page .sg-list > li{margin:0;}
.sg-page .sg-list > li::before,
.sg-page .sg-list > li::after{content:none;}
.sg-page blockquote{border:0;}
.sg-page blockquote::before,
.sg-page blockquote::after{content:none;}

.sg-wrap{max-width:1600px;margin:0 auto;padding-left:clamp(20px,3vw,32px);padding-right:clamp(20px,3vw,32px);}
.sg-wrap--narrow{max-width:720px;}
.sg-nowrap{white-space:nowrap;}

/* Запас сверху для перехода по якорю (хеш в адресе, JS выключен) */
.sg-page [id]{scroll-margin-top:96px;}
.sg-section{padding-top:var(--sg-pad);padding-bottom:var(--sg-pad);}
.sg-section--card{background:#fff;}
/* Белая секция после цветной: чуть больше воздуха сверху */
.sg-section--card{padding-top:var(--sg-pad);}
.sg-section--tint{background:var(--sg-tint);}
.sg-section--dark{background:var(--sg-green-dark);color:#fff;}
.sg-section--flush{padding-top:0;}

/* --- Типографика -------------------------------------------- */
.sg-eyebrow{font-family:var(--sg-script);font-weight:700;font-size:clamp(21px,2.2vw,26px);color:var(--sg-green);line-height:1;}
.sg-section--dark .sg-eyebrow{color:var(--sg-lime-head);}
.sg-h1{font-size:clamp(30px,4.6vw,54px);font-weight:800;line-height:1.04;letter-spacing:-1.1px;text-wrap:balance;}
.sg-h2{font-size:clamp(25px,3.4vw,40px);font-weight:800;line-height:1.08;letter-spacing:-.7px;color:var(--sg-green-dark);text-wrap:balance;}
.sg-section--dark .sg-h2{color:#fff;}
.sg-accent{color:var(--sg-lime);}
.sg-h3{font-size:clamp(18px,2vw,22px);font-weight:800;line-height:1.25;letter-spacing:-.2px;}
.sg-h4{font-size:16px;font-weight:800;line-height:1.3;}
.sg-p{font-size:clamp(15px,1.5vw,17px);line-height:1.65;color:#46463f;}
.sg-section--dark .sg-p{color:#cfe3c2;}
.sg-p--lead{font-size:clamp(16px,1.7vw,19px);}
.sg-p--small{font-size:13.5px;line-height:1.5;color:var(--sg-muted);}
.sg-note{font-size:12.5px;line-height:1.5;color:var(--sg-muted);font-style:italic;}
.sg-section--dark .sg-note{color:#a9c79a;}
.sg-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 28px;margin-bottom:clamp(22px,3vw,34px);}
.sg-head__side{font-size:14.5px;font-weight:600;color:var(--sg-muted);max-width:340px;}
.sg-section--dark .sg-head__side{color:#bcd6ac;}

/* --- Кнопки. min-height, не height: текст в две строки ок --- */
.sg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:14px 30px;border:2px solid transparent;border-radius:var(--sg-r-pill);
  font-family:var(--sg-font);font-size:15.5px;font-weight:700;line-height:1.25;text-align:center;
  text-decoration:none;cursor:pointer;transition:background-color .18s,border-color .18s,color .18s,transform .18s;
}
.sg-btn--primary{background:var(--sg-green);color:#fff;}
.sg-btn--primary:hover{background:var(--sg-green-dark);color:#fff;}
.sg-btn--lime{background:var(--sg-lime);color:#11340f;}
.sg-btn--lime:hover{background:#6cab34;color:#11340f;}
.sg-btn--ghost{background:transparent;border-color:var(--sg-green);color:var(--sg-green);}
.sg-btn--ghost:hover{background:var(--sg-green);color:#fff;}
.sg-btn--on-dark{background:transparent;border-color:rgba(255,255,255,.5);color:#fff;}
.sg-btn--on-dark:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff;}
.sg-btn--block{width:100%;}
.sg-btn[disabled]{opacity:.6;cursor:default;}
.sg-btns{display:flex;flex-wrap:wrap;gap:12px;}
/* anywhere нужен длинным адресам и таблицам, но не кнопкам и пунктам меню —
   иначе слово рвётся посимвольно при узком контейнере */
.sg-btn,.sg-catnav__link,.sg-channel,.sg-tile__big,.sg-card__name,.sg-card__price,.sg-faq__btn{overflow-wrap:normal;}

.sg-link{color:var(--sg-green);font-weight:700;text-decoration:none;border-bottom:2px solid rgba(47,125,62,.28);}
.sg-link:hover{color:var(--sg-green-dark);border-bottom-color:var(--sg-green-dark);}
.sg-section--dark .sg-link{color:var(--sg-lime-head);border-bottom-color:rgba(214,232,166,.4);}
.sg-section--dark .sg-link:hover{color:#fff;border-bottom-color:#fff;}

.sg-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;padding:7px 15px;border-radius:var(--sg-r-pill);background:var(--sg-tint);color:var(--sg-green);}
.sg-tag--lime{background:var(--sg-lime);color:#11340f;}
.sg-tag--stock{background:var(--sg-green);color:#fff;box-shadow:0 3px 10px rgba(20,40,20,.2);}
.sg-tag--hit{background:#fff;color:var(--sg-green-dark);box-shadow:0 3px 10px rgba(20,40,20,.2);}

/* --- 2. Первый экран ---------------------------------------- */
.sg-hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(520px,72vh,720px);background:#33402f;}
.sg-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.sg-hero__slides{position:absolute;inset:0;overflow:hidden;}
.sg-hero__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease;}
.sg-hero__slide.sg-is-on{opacity:1;}
.sg-hero__dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:9px;}
/* Полоска тонкая, а палец — нет: сама кнопка 34×22 с прозрачными
   полями, видимая полоска рисуется фоном по центру. */
.sg-hero__dot{width:34px;height:22px;padding:0;border:0;background:none;cursor:pointer;position:relative;}
.sg-hero__dot::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:5px;border-radius:var(--sg-r-pill);background:rgba(255,255,255,.42);transition:background-color .2s;}
.sg-hero__dot:hover::after{background:rgba(255,255,255,.7);}
.sg-hero__dot.sg-is-on::after{background:#fff;}
@media (prefers-reduced-motion:reduce){.sg-hero__slide{transition:none;}}

.sg-hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,24,14,.62) 0%,rgba(12,24,14,.2) 34%,rgba(12,24,14,.42) 66%,rgba(12,24,14,.88) 100%);}
.sg-hero__inner{position:relative;z-index:1;width:100%;padding-top:clamp(48px,7vw,80px);padding-bottom:clamp(34px,4.5vw,52px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:clamp(24px,3.5vw,44px);}
.sg-hero__col{flex:1 1 520px;min-width:280px;color:#fff;}
.sg-hero__h1{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.45);}
.sg-hero__sub{font-family:var(--sg-script);font-size:clamp(28px,3.8vw,44px);font-weight:700;line-height:1.05;color:var(--sg-lime-head);margin-top:14px;text-shadow:0 2px 16px rgba(0,0,0,.4);}
.sg-hero__pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.sg-hero__pill{display:inline-flex;align-items:center;min-height:38px;padding:8px 15px;border-radius:10px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24);font-size:14px;font-weight:700;color:#fff;backdrop-filter:blur(3px);}
.sg-hero__rating{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:13.5px;font-weight:600;color:#e3eeda;text-decoration:none;}
.sg-hero__rating:hover{color:#fff;}
.sg-hero__star{color:var(--sg-star);font-size:15px;}
.sg-hero__aside{flex:0 1 330px;min-width:270px;}
.sg-hero__card{background:#fff;border-radius:var(--sg-r-lg);padding:clamp(20px,2.4vw,26px);box-shadow:0 24px 60px rgba(8,18,10,.4);}
.sg-hero__cardlabel{font-size:12.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--sg-muted);}
.sg-hero__date{font-size:clamp(24px,2.8vw,31px);font-weight:800;line-height:1.1;color:var(--sg-green-dark);margin-top:6px;letter-spacing:-.5px;}
.sg-hero__hr{height:1px;background:var(--sg-line);margin:16px 0;}
.sg-hero__fine{font-size:12.5px;line-height:1.5;color:var(--sg-muted);}
/* Блок захвата контактов в шапке — компактный: заголовок,
   имя, телефон, согласие, кнопка. Подписи полей визуально
   скрыты (.sg-vh), их роль играет placeholder. */
/* Форма лежит внутри .sg-hero__card — свои отступы, фон и тень
   ей не нужны, иначе паддинг удваивается. */
.sg-hero__card .sg-hero__form{padding:0;background:transparent;box-shadow:none;border-radius:0;}
.sg-hero__form .sg-form__title{font-size:19px;}
.sg-hero__form .sg-form__body{margin-top:14px;}
.sg-hero__form .sg-field{margin-bottom:9px;}
.sg-hero__form .sg-field__input{min-height:46px;padding:11px 14px;font-size:14.5px;border-radius:12px;}
.sg-hero__form .sg-agree{margin:2px 0 11px;font-size:11.5px;}
.sg-hero__form .sg-btn{min-height:48px;padding:12px 22px;}
.sg-hero__form .sg-form__done{padding:16px 4px;}
.sg-hero__form .sg-form__doneico{width:50px;height:50px;margin-bottom:12px;}

/* --- Строка доверия ---------------------------------------- */
.sg-trust{background:#fff;border-bottom:1px solid var(--sg-line);}
.sg-trust__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px 28px;padding-top:24px;padding-bottom:24px;}
.sg-trust__item{display:flex;align-items:center;gap:12px;}
.sg-trust__ico{flex:none;width:38px;height:38px;border-radius:10px;background:var(--sg-tint);display:flex;align-items:center;justify-content:center;color:var(--sg-green);}
.sg-trust__big{font-size:19px;font-weight:800;line-height:1.1;color:var(--sg-green-dark);}
.sg-trust__small{font-size:12.5px;font-weight:600;color:var(--sg-muted);line-height:1.35;}

/* --- Липкая навигация по каталогу -------------------------- */
.sg-catnav{position:sticky;top:var(--sg-offset-top,0px);z-index:40;background:rgba(255,255,255,.95);border-bottom:1px solid var(--sg-line);backdrop-filter:blur(6px);}
.sg-catnav__row{display:flex;gap:6px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none;}
.sg-catnav__row::-webkit-scrollbar{display:none;}
.sg-catnav__link{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:10px;font-size:14px;font-weight:700;color:var(--sg-ink);text-decoration:none;white-space:nowrap;transition:background-color .18s,color .18s;}
.sg-catnav__link{border-bottom:3px solid transparent;border-radius:0;padding:8px 4px;margin-right:12px;}
.sg-catnav__link:hover{color:var(--sg-green-dark);}
.sg-catnav__link.sg-is-current{color:var(--sg-green);border-bottom-color:var(--sg-green);}

/* --- Боковое меню (ДС: вертикальное от 1280 px) -------------
       Ниже 1280 px скрыто — работает .sg-catnav.
       Лежит в левом жёлобе: на широких экранах .sg-wrap сужается,
       поэтому меню не перекрывает контент.                    --- */
.sg-rail{display:none;}
.sg-rail__list{display:flex;flex-direction:column;gap:2px;}
.sg-rail__link{display:block;padding:7px 12px;border-left:3px solid transparent;font-size:12px;font-weight:600;line-height:1.3;color:var(--sg-muted);text-decoration:none;transition:color .16s,border-color .16s,background-color .16s;}
.sg-rail__link:hover{color:var(--sg-green-dark);background:rgba(47,125,62,.06);}
.sg-rail__link.sg-is-current{color:var(--sg-green);border-left-color:var(--sg-green);font-weight:800;background:rgba(47,125,62,.08);}
.sg-rail__cta{margin-top:12px;width:100%;min-height:39px;padding:10px 15px;font-size:12px;}

@media (min-width:1280px){
  /* Появляется, когда прокрутили ниже второго блока (класс ставит JS) */
  .sg-rail{
    display:block;position:fixed;left:var(--sg-rail-left,20px);top:50%;z-index:35;
    width:var(--sg-rail-w,180px);padding:14px 10px;background:#fff;border-radius:var(--sg-r-lg);
    box-shadow:0 14px 40px rgba(20,30,22,.14);
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-50%) translateX(-14px);
    transition:opacity .3s ease,transform .3s ease,visibility .3s;
  }
  .sg-rail.sg-is-shown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%);}
  @media (prefers-reduced-motion:reduce){.sg-rail{transition:none;}}
  /* Контент НЕ сужаем и отступ под меню не резервируем: меню живёт
     в свободном жёлобе слева. Если жёлоба нет — JS ставит .sg-no-room
     и меню не показывается, работает горизонтальная .sg-catnav. */
}
.sg-rail.sg-no-room{display:none;}
@media print{.sg-rail{display:none;}}

/* Кнопка расчёта в свёрнутой строке — всегда справа */
.sg-catnav__cta{flex:none;margin-left:auto;min-height:40px;padding:9px 20px;font-size:14px;box-shadow:none;}

/* --- 3. Каталог: карточки ----------------------------------- */
/* Разделы каталога идут вплотную — но только пока фон один и тот же.
   Белая секция после серой снова получает свой верхний отступ. */
.sg-cat + .sg-cat:not(.sg-section--card){padding-top:0;}
.sg-cat__intro{font-size:14.5px;font-weight:600;color:var(--sg-muted);max-width:420px;}
/* Колонки заданы явно, а не auto-fit: боковое меню забирает
   264 px слева, и auto-fit по minmax считал ширину без учёта
   этого — четвёртая карточка уезжала на второй ряд. */
.sg-cards{display:grid;grid-template-columns:1fr;gap:var(--sg-gap);align-items:stretch;}
@media (min-width:660px){.sg-cards{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.sg-cards{grid-template-columns:repeat(3,1fr);}}
@media (min-width:1440px){.sg-cards{grid-template-columns:repeat(4,1fr);}}

.sg-card{position:relative;display:flex;flex-direction:column;background:var(--sg-card);border-radius:var(--sg-r-lg);overflow:hidden;color:inherit;box-shadow:0 4px 16px rgba(20,30,22,.07);transition:box-shadow .22s,transform .22s;}
.sg-card__link{position:absolute;inset:0;z-index:1;border-radius:inherit;text-decoration:none;}
.sg-card__link:focus-visible{outline:3px solid var(--sg-green);outline-offset:2px;}
.sg-card:hover{box-shadow:0 22px 48px rgba(20,30,22,.17);transform:translateY(-4px);}
/* flex:1 — лишнюю высоту ряда забирает фото, а не тело карточки.
   Иначе кнопка «Смотреть» центрируется в растянутом теле и уезжает
   выше кнопки в плитке. object-fit:cover тянется без искажений. */
/* Без aspect-ratio: с ним высота фото становится определённой и
   лишнюю высоту ряда забирало тело карточки — кнопка «Смотреть»
   центрировалась в растянутом теле и уезжала выше кнопки плитки.
   Теперь запас забирает фото (object-fit:cover), тело — по контенту,
   и обе кнопки стоят на одном отступе от низа. */
/* Формат фото 5:4. flex:1 оставлен, чтобы редкий растянутый ряд
   забирало фото, а не тело карточки — иначе кнопка «Смотреть»
   уезжает от нижнего края. object-fit:cover тянет без искажений. */
.sg-card__media{position:relative;flex:1 1 auto;min-height:0;aspect-ratio:5/4;background:#e6e8e3;overflow:hidden;}
.sg-card__photo,.sg-card__plan{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .28s ease;}
.sg-card__plan{opacity:0;background:#fff;object-fit:contain;}
/* У бытовок под наведением не чертёж, а второй ракурс. Фото кадрируем
   так же, как основное, а не вписываем в белое поле. */
.sg-card__plan--photo{background:none;object-fit:cover;}
.sg-card:hover .sg-card__plan,
.sg-card.sg-is-plan .sg-card__plan{opacity:1;}
.sg-card:hover .sg-card__photo,
.sg-card.sg-is-plan .sg-card__photo{opacity:0;}
/* Карточка без чертежа. Обычно при наведении фото гасится, а под ним
   проявляется схема. Если схемы нет — гасить нечего, и плитка просто
   пустела (так было у бытовок на главной и у Честер 33 в каталоге).
   :has() ловит это сам; класс sg-card--noplan оставлен как подстраховка
   для браузеров постарше. */
.sg-card:not(:has(.sg-card__plan)):hover .sg-card__photo,
.sg-card:not(:has(.sg-card__plan)).sg-is-plan .sg-card__photo,
.sg-card--noplan:hover .sg-card__photo,
.sg-card--noplan.sg-is-plan .sg-card__photo{opacity:1;}
/* Плейсхолдер: фото модели ещё нет. Лучше честная заглушка,
   чем чужой снимок с подписью другого товара. */
.sg-card__ph,.sg-case__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:repeating-linear-gradient(135deg,#e8e8e3 0 14px,#e2e2dc 14px 28px);color:#8a8a82;text-align:center;padding:16px;}
.sg-card__ph svg,.sg-case__ph svg{opacity:.55;}
.sg-card__phtxt{font-size:12.5px;font-weight:700;line-height:1.35;}
.sg-card__flags{position:absolute;top:14px;left:14px;right:14px;z-index:2;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px;pointer-events:none;}
.sg-card__hint{position:absolute;bottom:12px;left:14px;z-index:2;max-width:calc(100% - 28px);font-size:12.5px;font-weight:700;line-height:1.3;color:#fff;background:rgba(12,24,14,.66);padding:7px 14px;border-radius:var(--sg-r-pill);backdrop-filter:blur(2px);}
.sg-card__planbtn{position:absolute;top:10px;right:10px;z-index:3;display:none;width:44px;height:44px;align-items:center;justify-content:center;border:0;border-radius:10px;background:rgba(255,255,255,.92);color:var(--sg-green-dark);cursor:pointer;}
/* Тело карточки — одна строка: цена слева, кнопка справа.
   Название и метраж переехали на фото. */
.sg-card__body{flex:none;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:10px;padding:clamp(14px,1.6vw,18px);}
.sg-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.sg-card__name{font-size:clamp(20px,2vw,24px);font-weight:800;line-height:1.15;color:var(--sg-green);letter-spacing:-.3px;}
.sg-card__meta{flex:none;font-size:14px;font-weight:700;color:var(--sg-ink);}
/* Размер фиксированный, не clamp по вьюпорту: при 4 колонках
   вьюпорт широкий, а карточка узкая — clamp давал максимум 26 px
   и цена переносилась на две строки. nowrap нужен потому, что
   .sg-page наследует overflow-wrap:anywhere и рвёт число. */
.sg-card__price{flex:0 0 auto;font-size:22px;font-weight:800;color:var(--sg-ink);line-height:1.15;letter-spacing:-.5px;white-space:nowrap;}
/* Размеры подобраны по замеру самой длинной цены («2 979 000 ₽»)
   против ширины карточки: при 4 колонках на 1440–1599 бюджет
   под цену 117 px, поэтому там кегль меньше и кнопка компактнее. */
@media (min-width:1440px) and (max-width:1599px){
  .sg-card__price{font-size:19px;}
  .sg-card__ctatext{padding:11px 14px;}
}
@media (min-width:1600px){.sg-card__price{font-size:25px;}}
/* Цена и строка доставки — колонкой слева, кнопка остаётся справа. */
.sg-card__pricebox{flex:0 1 auto;min-width:0;}
.sg-card__ship{font-size:12px;line-height:1.35;color:var(--sg-muted);margin-top:3px;white-space:nowrap;}
@media (min-width:1440px) and (max-width:1599px){.sg-card__ship{font-size:11px;}}
.sg-card__break{font-size:12px;line-height:1.45;color:var(--sg-muted);margin-top:4px;}
.sg-card__date{font-size:13.5px;font-weight:700;color:var(--sg-ink);margin-top:12px;padding-top:12px;border-top:1px dashed var(--sg-line);}
.sg-card__date-em{color:var(--sg-green);}
.sg-card__flex{font-size:12.5px;font-style:italic;color:var(--sg-muted);margin-top:6px;}
.sg-card__cta{margin-top:auto;padding-top:16px;}
.sg-card__ctatext{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 18px;border-radius:var(--sg-r-pill);background:var(--sg-green);color:#fff;font-size:14.5px;font-weight:700;white-space:nowrap;}
.sg-card:hover .sg-card__ctatext{background:var(--sg-green-dark);}

/* Плитка-ссылка: вся зелёная карточка — одна кнопка.
   Внутри только надпись по центру, отдельной кнопки нет. */
.sg-tile{display:flex;align-items:center;justify-content:center;min-height:220px;
  padding:clamp(24px,3vw,34px);text-align:center;
  background:var(--sg-green-dark);border-radius:var(--sg-r-lg);
  text-decoration:none;color:#fff;
  box-shadow:0 4px 16px rgba(20,30,22,.07);
  transition:box-shadow .22s,transform .22s,background-color .18s;}
.sg-tile:hover{background:#1c5228;box-shadow:0 22px 48px rgba(20,30,22,.22);transform:translateY(-4px);color:#fff;}
.sg-tile__label{font-size:clamp(19px,2.1vw,23px);font-weight:800;line-height:1.25;letter-spacing:-.3px;color:#fff;text-wrap:balance;}


/* --- 4. Нестандартные решения ------------------------------- */
.sg-case{display:flex;flex-direction:column;background:#fff;border-radius:var(--sg-r-lg);overflow:hidden;box-shadow:0 4px 16px rgba(20,30,22,.07);}
.sg-case__media{position:relative;aspect-ratio:4/3;background:#e6e8e3;}
.sg-case__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Второй кадр по наведению. На тач-устройствах наведения нет,
   поэтому там кадры сменяются по тапу (класс ставит браузерный :hover не всегда) */
.sg-case__img--alt{opacity:0;transition:opacity .35s;}
.sg-case:hover .sg-case__img--alt,
.sg-case:focus-within .sg-case__img--alt{opacity:1;}
.sg-case__body{display:flex;flex-direction:column;flex:1;gap:12px;padding:clamp(16px,1.8vw,20px);}
.sg-case__step{font-size:14px;line-height:1.5;}
.sg-case__lbl{display:block;font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--sg-lime);margin-bottom:2px;}
.sg-case__term{margin-top:auto;font-size:13.5px;font-weight:800;color:var(--sg-green);}

/* --- 8. Таблицы -------------------------------------------- */
.sg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--sg-r);}
.sg-table{width:100%;border-collapse:collapse;min-width:620px;font-size:14px;background:#fff;}
.sg-table th{background:var(--sg-green-dark);color:#fff;font-weight:800;text-align:left;padding:13px 14px;}
.sg-table td{padding:12px 14px;border-top:1px solid #ecece6;vertical-align:top;}
.sg-table__row--alt td{background:#fafaf7;}
.sg-table__row--honest td{background:#fdf8ec;}
.sg-table strong{font-weight:800;}

/* --- 9. Пирог стены ---------------------------------------- */
.sg-pie{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,52px);align-items:center;}
.sg-pie__col{flex:1 1 320px;min-width:270px;}
.sg-pie__layers{display:flex;flex-direction:column;gap:7px;counter-reset:sglayer;}
.sg-pie__layer{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--sg-line);border-radius:10px;padding:11px 14px;counter-increment:sglayer;}
.sg-pie__num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--sg-tint);color:var(--sg-green);font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.sg-pie__num::before{content:counter(sglayer);}
.sg-pie__name{font-size:14px;font-weight:700;}
.sg-pie__spec{font-size:12.5px;color:var(--sg-muted);}
.sg-pie__key{border-color:var(--sg-lime);background:#fbfff5;}
.sg-brands{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.sg-brands__i{font-size:12.5px;font-weight:800;letter-spacing:.6px;color:var(--sg-muted);background:#fff;border:1px solid var(--sg-line);border-radius:7px;padding:6px 12px;}
.sg-quote{font-family:var(--sg-script);font-size:clamp(22px,2.6vw,30px);line-height:1.2;color:var(--sg-green);margin-top:18px;}

/* --- 10. Площадки ------------------------------------------ */
.sg-sites{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--sg-gap);}
.sg-site{display:flex;flex-direction:column;background:#fff;border-radius:var(--sg-r-lg);overflow:hidden;box-shadow:0 12px 30px rgba(20,30,22,.1);}
.sg-site__media{position:relative;aspect-ratio:16/10;background:#e6e8e3;}
.sg-site__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.sg-site__map{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.sg-site__body{display:flex;flex-direction:column;flex:1;gap:8px;padding:clamp(18px,2vw,24px);}
.sg-site__city{font-size:19px;font-weight:800;color:var(--sg-green-dark);}
.sg-site__addr{font-size:14px;line-height:1.5;}
.sg-site__rate{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;}
.sg-site__cta{margin-top:auto;padding-top:14px;}

/* --- 12. Гарантии ------------------------------------------ */
.sg-guar{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sg-gap);}
.sg-guar__i{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:var(--sg-r-lg);padding:clamp(18px,2vw,26px);}
.sg-guar__big{font-size:clamp(30px,3.6vw,42px);font-weight:800;line-height:1;color:var(--sg-lime-head);letter-spacing:-1px;}
.sg-guar__t{font-size:16.5px;font-weight:800;color:#fff;margin-top:8px;}
.sg-pay{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:var(--sg-gap);}
.sg-pay__i{background:rgba(255,255,255,.06);border-radius:var(--sg-r);padding:16px 18px;}
.sg-pay__pct{font-size:22px;font-weight:800;color:var(--sg-lime);}
.sg-pay__when{font-size:13px;color:#cfe3c2;margin-top:2px;}

/* --- 13 / 18. Формы ---------------------------------------- */
.sg-split{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px);align-items:flex-start;}
.sg-split__col{flex:1 1 340px;min-width:280px;}
.sg-gift{display:flex;align-items:flex-start;gap:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--sg-r);padding:16px 18px;margin-top:20px;}
.sg-gift__ico{flex:none;color:var(--sg-lime);}

.sg-form{background:#fff;border-radius:var(--sg-r-lg);padding:clamp(20px,2.6vw,32px);box-shadow:0 20px 50px rgba(8,18,10,.28);color:var(--sg-ink);}
/* Форма — белая карточка, в том числе внутри тёмной секции. Светлые
   «тёмные» цвета секции внутрь карточки не пускаем: на белом фоне
   салатовая ссылка про 152-ФЗ была почти нечитаемой. */
.sg-section--dark .sg-form .sg-p{color:var(--sg-muted);}
.sg-section--dark .sg-form .sg-link{color:var(--sg-green);border-bottom-color:rgba(47,125,62,.4);}
.sg-section--dark .sg-form .sg-link:hover{color:var(--sg-green-dark);border-bottom-color:var(--sg-green-dark);}
.sg-form__title{font-size:20px;font-weight:800;color:var(--sg-green-dark);}
.sg-form__sub{font-size:13.5px;color:var(--sg-muted);margin-top:4px;}
.sg-form__body{margin-top:18px;}
.sg-field{margin-bottom:14px;}
.sg-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.sg-field__label{display:block;font-size:12.5px;font-weight:700;color:#52524c;margin-bottom:6px;}
.sg-field__opt{font-weight:500;color:#9a9a92;}
.sg-field__input{
  width:100%;min-height:48px;padding:12px 15px;
  font-family:var(--sg-font);font-size:15px;color:var(--sg-ink);
  background:#fff;border:1.5px solid var(--sg-line);border-radius:11px;
  transition:border-color .16s,box-shadow .16s;
}
.sg-field__input:focus{outline:none;border-color:var(--sg-green);box-shadow:0 0 0 3px rgba(47,125,62,.14);}
.sg-field__input--area{min-height:88px;resize:vertical;line-height:1.5;}
.sg-field__err{display:none;font-size:12.5px;font-weight:600;color:#c62828;margin-top:5px;}
.sg-field.sg-has-error .sg-field__input{border-color:#c62828;background:#fffafa;}
.sg-field.sg-has-error .sg-field__err{display:block;}

.sg-form__alert{display:none;align-items:flex-start;gap:10px;background:#fdecea;border:1px solid #f3b9b3;border-radius:11px;padding:12px 14px;margin-bottom:16px;font-size:13.5px;font-weight:600;color:#a02017;}
.sg-form.sg-has-alert .sg-form__alert{display:flex;}

/* Каналы связи */
.sg-channels{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.sg-channel{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:9px 15px;border:1.5px solid var(--sg-line);border-radius:11px;font-size:13.5px;font-weight:700;color:#52524c;background:#fff;cursor:pointer;transition:border-color .16s,background-color .16s,color .16s;}
.sg-channel:hover{border-color:#bcd0b3;}
.sg-channel.sg-is-on{border-color:var(--sg-green);background:var(--sg-tint);color:var(--sg-green-dark);}

/* Согласие 152-ФЗ */
.sg-agree{display:flex;align-items:flex-start;gap:10px;margin:4px 0 16px;font-size:12.5px;line-height:1.5;color:var(--sg-muted);cursor:pointer;}
.sg-agree__box{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--sg-green);cursor:pointer;}

/* Место под капчу Битрикса */
.sg-captcha{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:14px;}
.sg-captcha__img{flex:none;width:180px;height:40px;background:#f2f2ee;border:1px solid var(--sg-line);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#a5a59d;}
.sg-captcha__field{flex:1 1 150px;min-width:130px;}

/* Спиннер на кнопке */
.sg-spin{display:none;width:17px;height:17px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;}
.sg-form.sg-is-sending .sg-spin{display:inline-block;animation:sg-spin .7s linear infinite;}
@keyframes sg-spin{to{transform:rotate(360deg);}}

/* Успех */
.sg-form__done{display:none;text-align:center;padding:26px 6px;}
.sg-form.sg-is-done .sg-form__done{display:block;}
.sg-form.sg-is-done .sg-form__body{display:none;}
.sg-form__doneico{width:62px;height:62px;margin:0 auto 16px;border-radius:50%;background:var(--sg-tint);display:flex;align-items:center;justify-content:center;}
.sg-form__donet{font-size:21px;font-weight:800;color:var(--sg-green-dark);}

/* --- Блок «Дом дешевле Нивы». Переоценка цены после каталога -----
       Фото на всю ширину, поверх — зелёная плашка с тезисом и
       скриншот объявления о машине. Ширину задаём явно: при
       aspect-ratio вместе с min-height браузер считает её из высоты
       и на узком экране раздувает блок (см. историю на проекте). --- */
.sg-niva{width:100%;max-width:1100px;margin:0 auto;position:relative;border-radius:var(--sg-r-lg);
  overflow:hidden;box-shadow:0 24px 60px rgba(20,30,22,.22);aspect-ratio:2200/1101;min-height:340px;
  background:#3a4a36;}
.sg-niva__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.sg-niva__veil{position:absolute;inset:0;background:linear-gradient(115deg,rgba(12,24,12,.82) 0%,
  rgba(12,24,12,.5) 28%,rgba(12,24,12,.08) 52%,transparent 72%);}
.sg-niva__body{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(20px,3vw,38px);}
.sg-niva__plaque{position:relative;max-width:min(470px,100%);background:rgba(34,96,47,.92);color:#fff;
  border-radius:18px;padding:clamp(20px,3vw,28px) clamp(22px,3.5vw,34px);
  box-shadow:0 18px 40px rgba(0,0,0,.32);}
.sg-niva__eyebrow{font-family:var(--sg-script);font-weight:700;font-size:clamp(20px,2.2vw,24px);
  line-height:1;color:var(--sg-lime-head);}
.sg-niva__h{font-size:clamp(24px,3.4vw,34px);font-weight:800;line-height:1.06;letter-spacing:-.6px;
  margin-top:6px;color:#fff;}
.sg-niva__t{font-size:clamp(14px,1.6vw,16px);line-height:1.55;color:#dbe9cf;margin-top:10px;
  max-width:340px;}
/* Скриншот вынесен из плашки и позиционируется от всего блока —
   так его можно увеличить, не отъедая ширину у текста. */
.sg-niva__phone{position:absolute;z-index:3;right:clamp(16px,5vw,90px);bottom:-22px;
  width:clamp(150px,20vw,250px);height:auto;filter:drop-shadow(0 22px 38px rgba(0,0,0,.5));
  transform-origin:right bottom;transform:rotate(6deg);}
/* На узком экране плашка закрывала всё фото и наезжала на скриншот.
   Ниже 700 px раскладываем вертикально: сверху фото, под ним тезис. */
@media (max-width:700px){
  .sg-niva{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column;background:var(--sg-green-dark);}
  .sg-niva__bg{position:static;height:190px;flex:none;}
  .sg-niva__veil{display:none;}
  .sg-niva__body{position:static;padding:0;}
  .sg-niva__plaque{max-width:none;border-radius:0;background:none;box-shadow:none;
    padding:20px 22px 26px;padding-right:146px;}
  .sg-niva__phone{right:10px;bottom:10px;width:132px;transform:rotate(5deg);}
  .sg-niva__t{font-size:14px;max-width:none;}
}

/* --- 14. Отзывы -------------------------------------------- */
.sg-rate{background:#fff;border-radius:var(--sg-r-lg);padding:clamp(20px,2.4vw,28px);box-shadow:0 12px 30px rgba(34,96,47,.1);}
.sg-rate__num{display:flex;align-items:baseline;gap:10px;}
.sg-rate__val{font-size:clamp(40px,5vw,54px);font-weight:800;line-height:1;letter-spacing:-1.5px;}
.sg-rate__stars{color:var(--sg-star);font-size:20px;letter-spacing:2px;}
.sg-rate__src{font-size:13.5px;font-weight:600;color:var(--sg-muted);margin-top:8px;}
.sg-rate__split{margin-top:14px;padding-top:14px;border-top:1px solid #efefe9;display:flex;flex-direction:column;gap:8px;}
.sg-rate__one{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;}
/* Облако отзывов: три ленты, едут от курсора. Без JS ленты просто
   прокручиваются пальцем (overflow-x:auto), контент не пропадает. */
.sg-revsec{overflow:hidden;}
.sg-revhead{display:flex;align-items:center;gap:clamp(18px,2.2vw,30px);background:#fff;border-radius:var(--sg-r-lg);padding:clamp(16px,1.8vw,22px) clamp(20px,2.2vw,28px);box-shadow:0 10px 26px rgba(34,96,47,.1);}
.sg-revhead__score{flex:0 0 auto;text-align:center;padding-right:clamp(16px,2vw,26px);border-right:1px solid #eceee7;}
.sg-page .sg-revhead__val{font-size:clamp(44px,4.4vw,58px);font-weight:800;line-height:.95;letter-spacing:-2px;color:var(--sg-green-dark);}
.sg-page .sg-revhead__stars{margin-top:6px;color:var(--sg-star);font-size:14px;letter-spacing:3px;}
.sg-revhead__body{display:flex;flex-direction:column;gap:3px;}
.sg-page .sg-revhead__cap{font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--sg-muted);margin-bottom:4px;}
.sg-page .sg-revhead__site{font-size:14.5px;font-weight:600;color:var(--sg-ink);}
.sg-revhead__site strong{font-weight:800;color:var(--sg-green-dark);}
.sg-revhead__cnt{color:var(--sg-muted);font-weight:600;}
.sg-revhead__link{color:inherit;text-decoration:none;border-bottom:1px solid rgba(47,125,62,.3);}
.sg-revhead__link:hover{color:var(--sg-green-dark);border-bottom-color:var(--sg-green-dark);}
.sg-page .sg-revhead__all{margin-top:8px;font-size:14px;}

@media (max-width:479px){
  .sg-revhead{flex-direction:column;align-items:flex-start;}
  .sg-revhead__score{display:flex;align-items:baseline;gap:12px;padding:0 0 12px;border-right:0;border-bottom:1px solid #eceee7;width:100%;}
  .sg-page .sg-revhead__stars{margin-top:0;}
}

.sg-cloud{display:flex;flex-direction:column;gap:16px;margin-top:clamp(18px,2.4vw,28px);}
.sg-cloud__row{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
.sg-cloud__row::-webkit-scrollbar{display:none;}
.sg-cloud__track{display:flex;gap:16px;padding:2px 20px;width:max-content;will-change:transform;}
.sg-page .sg-rev{width:min(78vw,340px);flex:0 0 auto;background:#fff;border-radius:var(--sg-r-lg);padding:18px 20px;margin:0;box-shadow:0 8px 22px rgba(34,96,47,.07);cursor:pointer;transition:box-shadow .2s,transform .2s;}
.sg-page .sg-rev:hover{box-shadow:0 14px 30px rgba(34,96,47,.14);transform:translateY(-3px);}
.sg-page .sg-rev:focus-visible{outline:2px solid var(--sg-green);outline-offset:3px;}
.sg-page .sg-rev__stars{color:var(--sg-star);font-size:13px;letter-spacing:1.5px;margin:0 0 9px;}
.sg-page .sg-rev__txt{font-size:14px;line-height:1.6;color:#3c3c37;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.sg-rev__pics{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.sg-rev__pic{width:46px;height:46px;border-radius:9px;object-fit:cover;background:#e6e8e3;}
.sg-rev__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:12px;padding-top:10px;border-top:1px solid #efefe9;}
.sg-rev__who{font-size:13.5px;font-weight:800;}
.sg-rev__what{font-size:12px;font-weight:600;color:var(--sg-muted);}

/* Раскрытая карточка: полный текст и крупные фото */
.sg-page .sg-rev.sg-is-open{width:min(88vw,520px);box-shadow:0 18px 40px rgba(34,96,47,.18);}
.sg-page .sg-rev.sg-is-open .sg-rev__txt{-webkit-line-clamp:unset;display:block;overflow:visible;}
.sg-page .sg-rev.sg-is-open .sg-rev__pic{width:84px;height:84px;}

@media (max-width:659px){
  .sg-revhead{margin-top:6px;}
}

/* --- 15. Как мы работаем ----------------------------------- */
.sg-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--sg-gap);}
.sg-step{position:relative;background:#fff;border-radius:var(--sg-r-lg);box-shadow:0 3px 12px rgba(20,30,22,.06);padding:clamp(18px,2vw,24px);}
.sg-step__n{width:34px;height:34px;border-radius:50%;background:var(--sg-green);color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.sg-step__t{font-size:16px;font-weight:800;margin-top:12px;color:var(--sg-green-dark);}
.sg-step__d{font-size:13.5px;line-height:1.5;color:var(--sg-muted);margin-top:5px;}
.sg-step__term{display:inline-block;font-size:12px;font-weight:800;color:var(--sg-green);background:var(--sg-tint);border-radius:5px;padding:3px 9px;margin-top:10px;}
.sg-noreturn{margin-top:var(--sg-gap);background:var(--sg-tint);border-radius:var(--sg-r-lg);padding:clamp(18px,2.2vw,26px);}
.sg-noreturn__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:12px;}
.sg-noreturn__i{background:#fff;border-radius:11px;padding:13px 15px;}
.sg-noreturn__k{font-size:13px;font-weight:800;color:var(--sg-green-dark);}
.sg-noreturn__v{font-size:12.5px;color:var(--sg-muted);margin-top:2px;}

/* --- 16. FAQ (dl, содержимое всегда в DOM) ----------------- */
.sg-faq{display:grid;grid-template-columns:1fr;gap:10px;margin:0;align-content:start;}
@media (min-width:1024px){
  .sg-faq{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;}
}
.sg-faq__i{background:#fff;border-radius:var(--sg-r);overflow:hidden;box-shadow:0 3px 12px rgba(20,30,22,.06);}
.sg-faq__q{margin:0;}
.sg-faq__btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:76px;padding:18px 26px;background:transparent;border:0;font-family:var(--sg-font);font-size:15.5px;font-weight:700;line-height:1.35;color:var(--sg-ink);text-align:left;cursor:pointer;}
.sg-faq__btn:hover{color:var(--sg-green-dark);}
.sg-faq__sign{flex:none;position:relative;width:18px;height:18px;}
.sg-faq__sign::before,.sg-faq__sign::after{content:"";position:absolute;background:var(--sg-green);border-radius:2px;transition:transform .2s;}
.sg-faq__sign::before{top:8px;left:0;width:18px;height:2px;}
.sg-faq__sign::after{top:0;left:8px;width:2px;height:18px;}
.sg-faq__i.sg-is-open .sg-faq__sign::after{transform:scaleY(0);}
.sg-faq__a{margin:0;max-height:0;overflow:hidden;transition:max-height .26s ease;}
.sg-faq__i.sg-is-open .sg-faq__a{max-height:640px;}
.sg-faq__inner{padding:0 26px 22px;font-size:14.5px;line-height:1.62;color:#4b4b44;}

/* --- 17. Статьи -------------------------------------------- */
.sg-arts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--sg-gap);}
.sg-art{display:flex;flex-direction:column;background:#fff;border-radius:var(--sg-r-lg);box-shadow:0 4px 16px rgba(20,30,22,.07);padding:clamp(18px,2vw,26px);text-decoration:none;color:inherit;transition:box-shadow .18s,transform .18s;}
.sg-art:hover{box-shadow:0 16px 36px rgba(34,96,47,.12);transform:translateY(-3px);}
.sg-art__t{font-size:18px;font-weight:800;line-height:1.28;color:var(--sg-green-dark);margin-top:14px;}
.sg-art__d{font-size:14px;line-height:1.55;color:#5a5a53;margin-top:10px;flex:1;}
.sg-art__more{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:800;color:var(--sg-green);margin-top:16px;}
.sg-art__time{font-size:12px;font-weight:600;color:#9a9a92;margin-top:8px;}

/* --- Анимация появления (сдержанная) ----------------------- */
/* Скрываем ТОЛЬКО когда JS подтвердил готовность (.sg-anim).
   Без JS и до инициализации весь контент видим — это важно и для поиска. */
.sg-anim .sg-reveal{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform;}
.sg-anim .sg-reveal.sg-is-in{opacity:1;transform:none;}
/* «Нива»: появление по прокрутке ступенями — фото, плашка, телефон.
   Правила стоят после общих: у них та же специфичность, а телефону
   нужен собственный transform, иначе общий сбросит поворот.
   transition-delay с !important — скрипт ставит свою задержку инлайном. */
.sg-anim .sg-niva__plaque.sg-reveal.sg-is-in{transition-delay:.24s!important;}
.sg-anim .sg-niva__phone.sg-reveal{opacity:0;transform:translate(46px,30px) rotate(16deg);
  transition-duration:.7s;}
.sg-anim .sg-niva__phone.sg-reveal.sg-is-in{opacity:1;transform:rotate(6deg);
  transition-delay:.52s!important;}
@media (max-width:700px){
  .sg-anim .sg-niva__phone.sg-reveal{transform:translate(34px,24px) rotate(15deg);}
  .sg-anim .sg-niva__phone.sg-reveal.sg-is-in{transform:rotate(5deg);}
}
@media (prefers-reduced-motion:reduce){
  .sg-anim .sg-reveal{opacity:1;transform:none;transition:none;}
  .sg-card:hover,.sg-art:hover{transform:none;}
}

/* --- Адаптив ----------------------------------------------- */
@media (max-width:1024px){
  .sg-hero__aside{flex:1 1 100%;}
  .sg-hero__card{max-width:420px;}
}
@media (max-width:768px){
  .sg-hero{min-height:0;}
  .sg-hero__inner{padding-top:36px;padding-bottom:32px;}
  .sg-head{align-items:flex-start;}
  .sg-card__planbtn{display:flex;}
  .sg-card:hover .sg-card__plan{opacity:0;}
  .sg-card:hover .sg-card__photo{opacity:1;}
  .sg-card.sg-is-plan .sg-card__plan{opacity:1;}
  .sg-card.sg-is-plan .sg-card__photo{opacity:0;}
  .sg-card:hover{transform:none;box-shadow:none;}
}
@media (max-width:560px){
  .sg-page{--sg-pad:36px;--sg-gap:16px;}
  .sg-btns .sg-btn{flex:1 1 100%;}
  .sg-hero__pill{font-size:13px;}
  .sg-trust__row{grid-template-columns:1fr 1fr;}
  .sg-trust__ico{width:32px;height:32px;}
  .sg-trust__big{font-size:16.5px;}
}
@media (max-width:400px){
  .sg-trust__row{grid-template-columns:1fr;}
}

/* --- Утилиты отступов (вместо инлайновых style="") ---------- */
.sg-mt-6{margin-top:6px;}
.sg-mt-10{margin-top:10px;}
.sg-mt-12{margin-top:12px;}
.sg-mt-14{margin-top:14px;}
.sg-mt-16{margin-top:16px;}
.sg-mt-22{margin-top:22px;}
.sg-mt-26{margin-top:26px;}
.sg-mt-gap{margin-top:var(--sg-gap);}
.sg-page .sg-arts__all{margin-top:clamp(26px,3.2vw,40px);}

.sg-p--white{color:#fff;}
.sg-hero__btns{margin-top:24px;}
.sg-split__col--narrow{flex:1 1 260px;}
.sg-split__col--wide{flex:2 1 460px;}
.sg-site__star{color:var(--sg-star);}
.sg-pie__img{border-radius:var(--sg-r-lg);}
.sg-form__alertico{flex:none;margin-top:1px;}
.sg-gift--light{background:var(--sg-tint);border-color:#a9c79a;}
.sg-gift__ico--green{color:var(--sg-green);}
.sg-gift__t{display:block;color:var(--sg-green-dark);}
.sg-gift__d{display:block;margin-top:4px;}
.sg-contacts{margin-top:26px;display:flex;flex-direction:column;gap:12px;}
/* Две площадки. На телефоне каждый адрес переносится на две строки,
   и раньше они сливались в один абзац. Теперь это два блока: город
   строкой сверху, между блоками — воздух от gap выше. */
.sg-contacts__addr{display:flex;flex-direction:column;gap:2px;}
.sg-contacts__addr b{font-weight:800;}

/* --- Преимущества перед каталогом --------------------------- */
.sg-why__row{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(28px,3.6vw,56px);align-items:start;}
.sg-why__head .sg-h2{margin-top:10px;white-space:pre-line;}
.sg-page .sg-why__lead{margin-top:14px;max-width:34ch;}
.sg-why__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,3vw,44px) clamp(28px,3.4vw,56px);}
.sg-why__item{position:relative;}
.sg-page .sg-why__num{font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--sg-lime);line-height:1;}
.sg-page .sg-why__title{margin-top:10px;color:var(--sg-green-dark);}
.sg-page .sg-why__text{margin-top:9px;max-width:38ch;}
.sg-why__fine{display:block;margin-top:6px;font-size:13px;color:var(--sg-muted);}

@media (max-width:1199px){
  .sg-why__row{grid-template-columns:1fr;}
  .sg-page .sg-why__lead{max-width:52ch;}
}
@media (max-width:1023px){
  .sg-why__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sg-why__head .sg-h2{white-space:normal;}
}
@media (max-width:659px){
  .sg-why__grid{grid-template-columns:1fr;}
}

/* --- Квиз подбора ------------------------------------------- */
.sg-quiz__row{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:start;}
.sg-quiz__intro .sg-h2{margin-top:10px;}
.sg-quiz__accent{color:var(--sg-lime);}
.sg-quiz__pluses{margin-top:22px;display:grid;gap:12px;}
.sg-quiz__plus{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;font-weight:700;line-height:1.4;}
.sg-quiz__check{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-top:1px;border-radius:var(--sg-r-pill);background:var(--sg-green);color:#fff;}
.sg-page .sg-quiz__hint{margin-top:18px;}

.sg-quiz__form{padding-top:0;overflow:hidden;}
.sg-quiz__bar{padding:20px clamp(18px,2vw,26px) 0;}
.sg-quiz__count{font-size:12.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--sg-muted);}
.sg-quiz__track{display:block;height:4px;margin-top:10px;border-radius:var(--sg-r-pill);background:var(--sg-line);overflow:hidden;}
.sg-quiz__fill{display:block;height:100%;width:14%;border-radius:var(--sg-r-pill);background:var(--sg-lime);transition:width .3s;}
.sg-quiz__step{border:0;margin:0;padding:0;}
.sg-quiz__q{font-size:clamp(19px,2vw,23px);font-weight:800;line-height:1.25;color:var(--sg-green-dark);padding:0;margin-bottom:16px;}
.sg-quiz__step--last .sg-quiz__q{margin-bottom:8px;}
.sg-page .sg-quiz__lead{margin:0 0 20px;}
.sg-quiz__opt{display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 16px;margin-bottom:10px;border:1px solid var(--sg-line);border-radius:var(--sg-r);background:#fff;font-size:15px;font-weight:600;line-height:1.35;cursor:pointer;transition:border-color .16s,background-color .16s;}
.sg-quiz__opt:hover{border-color:var(--sg-green);}
.sg-quiz__mark{flex:0 0 auto;width:20px;height:20px;border-radius:var(--sg-r-pill);border:2px solid var(--sg-line);transition:border-color .16s,box-shadow .16s;}
.sg-quiz__radio:checked ~ .sg-quiz__mark{border-color:var(--sg-green);box-shadow:inset 0 0 0 4px var(--sg-green);}
.sg-quiz__opt.sg-is-on{border-color:var(--sg-green);background:var(--sg-tint);}
.sg-quiz__radio:focus-visible ~ .sg-quiz__mark{outline:2px solid var(--sg-green);outline-offset:3px;}
.sg-quiz__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;}
.sg-quiz__back{padding:8px 0;border:0;background:none;font-family:var(--sg-font);font-size:14px;font-weight:700;color:var(--sg-muted);cursor:pointer;}
.sg-quiz__back:hover{color:var(--sg-green-dark);}
.sg-quiz__next{min-height:44px;padding:10px 22px;font-size:14.5px;margin-left:auto;}
.sg-quiz__nav [hidden]{display:none;}

/* Пока JS не отработал, видны все шаги: контент не пропадает */
.sg-quiz__form.sg-quiz--js .sg-quiz__step{display:none;}
.sg-quiz__form.sg-quiz--js .sg-quiz__step.sg-is-on{display:block;}

@media (min-width:560px){
  .sg-quiz__step{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .sg-quiz__step .sg-quiz__q,
  .sg-quiz__step .sg-quiz__lead{grid-column:1/-1;}
  .sg-quiz__opt{margin-bottom:0;}
  .sg-quiz__step--last{display:block;}
  .sg-quiz__form.sg-quiz--js .sg-quiz__step.sg-is-on{display:grid;}
  .sg-quiz__form.sg-quiz--js .sg-quiz__step--last.sg-is-on{display:block;}
}
@media (max-width:1023px){
  .sg-quiz__row{grid-template-columns:1fr;}
}

/* Нестандартные решения: название зелёным + короткое описание */
.sg-page .sg-case__name{font-size:17px;font-weight:800;line-height:1.3;letter-spacing:-.2px;color:var(--sg-green);}
.sg-page .sg-case__desc{margin-top:8px;}

/* --- Производство. Миниатюры; по клику — крупный просмотр ---- */
.sg-prod{display:grid;grid-template-columns:minmax(230px,25.5%) minmax(0,1fr);gap:clamp(20px,2.6vw,40px);align-items:start;}
.sg-page .sg-prod__lead{max-width:none;}
.sg-prod__text{display:flex;flex-direction:column;gap:24px;}
.sg-prod__list{display:grid;gap:24px;}
.sg-prod__li{position:relative;padding-left:18px;font-size:14px;line-height:1.5;color:#46463f;}
.sg-page .sg-prod__list .sg-prod__li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:var(--sg-r-pill);background:var(--sg-lime);}
.sg-prod__li strong{color:var(--sg-green-dark);}
.sg-page .sg-prod__cta{margin-top:0;}
/* Галерея: крупный кадр + миниатюры. Клик по миниатюре меняет её
   местами с крупным кадром — без отдельного окна на весь экран. */
.sg-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"main main main side" "row row row row";gap:12px;}
.sg-gal__main{grid-area:main;margin:0;border-radius:var(--sg-r-lg);overflow:hidden;background:#e6e8e3;box-shadow:0 10px 26px rgba(20,30,22,.1);}
.sg-gal__main img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;}
.sg-gal__side{grid-area:side;display:grid;grid-template-rows:repeat(2,1fr);gap:12px;}
.sg-gal__row{grid-area:row;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.sg-gal__thumb{position:relative;width:100%;margin:0;padding:0;border:0;background:#e6e8e3;border-radius:var(--sg-r);overflow:hidden;cursor:pointer;box-shadow:0 6px 16px rgba(20,30,22,.1);transition:transform .18s,box-shadow .18s;}
.sg-gal__thumb:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(20,30,22,.16);}
.sg-gal__thumb:focus-visible{outline:2px solid var(--sg-green);outline-offset:3px;}
.sg-gal__thumb img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;}
/* Правая колонка тянется ровно по высоте крупного кадра: картинки
   лежат абсолютно, иначе их собственная высота растягивает ряд. */
.sg-gal__side .sg-gal__thumb img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;}
.sg-gal__plus{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--sg-r-pill);background:rgba(255,255,255,.92);color:var(--sg-green-dark);font-size:15px;font-weight:800;line-height:1;}

/* Галерея поднимается на высоту шапки секции, чтобы её верх шёл
   в один уровень с надзаголовком слева. */
@media (min-width:1024px){
  .sg-prodsec .sg-gal{margin-top:calc(-1 * (clamp(22px,3vw,34px) + 74px));}
}

@media (max-width:659px){
  .sg-gal{grid-template-columns:1fr;grid-template-areas:"main" "side" "row";}
  .sg-gal__side{grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr));}
  .sg-gal__row{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:899px){
  .sg-prod{grid-template-columns:1fr;}
  .sg-prod__thumbs{max-width:none;}
}

/* --- Что в договоре ----------------------------------------- */
.sg-doc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,32px) clamp(24px,3vw,44px);}
.sg-doc__i{display:block;}
.sg-page .sg-doc__n{display:block;font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--sg-lime);line-height:1;}
.sg-page .sg-doc__t{margin-top:9px;font-size:17px;color:var(--sg-green-dark);}
.sg-page .sg-doc__d{margin-top:7px;font-size:14.5px;}

@media (max-width:1023px){ .sg-doc{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:599px){ .sg-doc{grid-template-columns:1fr;} }

/* Обложка статьи в карточке блога */
.sg-art__media{display:block;margin:-4px -4px 14px;border-radius:var(--sg-r);overflow:hidden;background:#e6e8e3;}
.sg-art__media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .3s;}
.sg-art:hover .sg-art__media img{transform:scale(1.03);}