/* =====================================================================

   RADIATORVAM — шапка сайта

   Все классы начинаются с «rh-», чтобы не конфликтовать со стилями сайта.

   Точки перелома: ≥1200 — десктоп, 768–1199 — планшет, ≤767 — мобильная.

   ===================================================================== */



:root {

  --rh-navy: #0a2b4b;          /* верхняя полоса и меню */

  --rh-navy-text: #0b2f5a;     /* тёмно-синий текст */

  --rh-navy-light: #12406e;

  --rh-orange: #fd6f00;

  --rh-orange-light: #ff9416;

  --rh-orange-grad: linear-gradient(180deg, #ff9416 0%, #fd6a00 100%);

  --rh-orange-grad-hover: linear-gradient(180deg, #ffa53a 0%, #ff7a12 100%);

  --rh-white: #fff;

  --rh-font: "Roboto", Arial, sans-serif;

  --rh-font-cond: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

  --rh-font-script: "Caveat", "Marck Script", cursive;

  --rh-container: 1266px;      /* 1234 px контента + поля по 16 px */

}



.rh, .rh *, .rh *::before, .rh *::after,

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



body { margin: 0; } /* если на сайте уже есть сброс отступов — строку можно удалить */

header{
  overflow: hidden;
}

:where(.rh, .rh-perks) ul { list-style: none; margin: 0; padding: 0; }

:where(.rh) a { text-decoration: none; color: inherit; }

:where(.rh) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:where(.rh, .rh-perks) svg { display: block; flex: none; }



.rh-defs { position: absolute; width: 0; height: 0; overflow: hidden; }



.rh {

  position: relative;

  z-index: 50;

  font-family: var(--rh-font);

  color: var(--rh-navy-text);

  -webkit-font-smoothing: antialiased;

}



.rh-container {

  position: relative;

  width: 100%;

  max-width: var(--rh-container);

  margin: 0 auto;

  padding: 0 16px;

}



.rh-only-narrow, .rh-only-xs { display: none; }



/* ---------------------------------------------------------------------

   Кнопки

   --------------------------------------------------------------------- */

.rh .rh-btn, .rh-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  

  color: var(--rh-white);

  background: var(--rh-orange-grad);

  font-weight: 500;

  white-space: nowrap;

  transition: background .2s, box-shadow .2s, transform .2s;

}

.rh-btn:hover { background: var(--rh-orange-grad-hover); box-shadow: 0 6px 18px rgba(253, 106, 0, .38); }

.rh-btn:active { transform: translateY(1px); }

.rh-btn:focus-visible,

.rh a:focus-visible,

.rh button:focus-visible { outline: 3px solid #ffc27a; outline-offset: 2px; }



/* ---------------------------------------------------------------------

   1. Верхняя полоса

   --------------------------------------------------------------------- */

.rh-top {

  position: relative;

  z-index: 3;

  background: var(--rh-navy);

  color: var(--rh-white);

  font-family: var(--rh-font-cond);

}

.rh-top__inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 44px;

}

.rh-top__list { display: flex; align-items: center; height: 100%; }

.rh-top__item {

  display: flex;

  align-items: center;

  gap: 15px;

  font-size: 15.5px;

  font-weight: 500;

  letter-spacing: .1px;

  white-space: nowrap;

}

.rh-top__item + .rh-top__item { position: relative; margin-left: 39px; padding-left: 31px; }

.rh-top__item + .rh-top__item::before {

  content: "";

  position: absolute;

  left: 0; top: 50%;

  width: 1px; height: 22px;

  transform: translateY(-50%);

  background: rgba(255, 255, 255, .55);

}

.rh-top__item--guarantee { padding-left: 27px; }

.rh-top__icon { width: 28px; height: 28px; }

.rh-top__item--prepay .rh-top__icon { width: 31px; height: 31px; margin-top: -4px; }



/* Оранжевая плашка «Скидка 10%» — тянется до правого края экрана */

.rh-promo {

  position: relative;

  align-self: flex-start;

  display: flex;

  align-items: center;

  gap: 8px;

  height: 47px;                     /* на 3 px ниже полосы, как в макете */

  margin-right: -16px;

  padding: 0 40px 0 60px;

  color: var(--rh-white);

  background: linear-gradient(90deg, #ff7f00 0%, #fd6a00 100%);

  clip-path: polygon(34px 0, 100% 0, 100% 100%, 0 100%);

  white-space: nowrap;

  transition: filter .2s;

}

/* продолжение плашки до правого края экрана, когда экран шире контейнера */

.rh-top::after {

  content: "";

  position: absolute;

  top: 0; right: 0;

  height: 47px;

  width: max(0px, calc(50% - var(--rh-container) / 2));

  background: #fd6a00;

}

.rh-promo:hover { filter: brightness(1.08); }

.rh-promo__big { font-size: 24px; font-weight: 700; letter-spacing: .1px; }

.rh-promo__small { font-size: 20px; font-weight: 500; margin-right: 26px; }

.rh-promo__icon { width: 32px; height: 32px; }



/* ---------------------------------------------------------------------

   2. Основной блок

   --------------------------------------------------------------------- */

.rh-main {

  position: relative;

  z-index: 2;

  overflow: hidden;

  background:

    /*radial-gradient(ellipse 60% 90% at 62% 20%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%),

    linear-gradient(180deg, #e9f2fc 0%, #e3eefb 55%, #dbe9f9 100%);*/

}



/* Фото слева (батарея, растения) — привязано к левому краю контейнера */

.rh-main__photo {

  position: absolute;

  top: 0; bottom: 0;

  left: max(0px, calc(50% - var(--rh-container) / 2 + 16px));

  width: 343px;

  background: url("../img/hero-photo.png") left top / 343px 100% no-repeat;

  pointer-events: none;

}

/* Термоголовка и чертёж справа */

.rh-main__thermo {

  position: absolute;

  top: 3px;

  right: max(0px, calc(50% - var(--rh-container) / 2 + 16px));

  width: 262px; height: 129px;

  background: url("../img/thermostat.png") right top / 100% 100% no-repeat;

  pointer-events: none;

}

/* Сине-белые диагональные полосы в правом нижнем углу */

.rh-main__stripes {

  position: absolute;

  bottom: 0;

  right: max(0px, calc(50% - var(--rh-container) / 2 + 16px));

  width: 128px; height: 122px;

  background: linear-gradient(127deg,

    transparent 0 55%, #fff 55% 59%, #1d57ab 59% 75%, #fff 75% 78%, #0d3775 78% 100%);

  pointer-events: none;

}

.rh-main__stripes::before {        /* оранжевый уголок под кнопкой */

  content: "";

  position: absolute;

  left: 18px; bottom: 0;

  width: 40px; height: 12px;

  background: var(--rh-orange);

  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);

}

/* Когда экран шире контейнера — мягко растворяем края фото */

@media (min-width: 1300px) {

  .rh-main__photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px); mask-image: linear-gradient(90deg, transparent 0, #000 40px); }

  .rh-main__thermo, .rh-main__stripes { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 30px); mask-image: linear-gradient(270deg, transparent 0, #000 30px); }

}



.rh-main__inner {

  position: relative;

  z-index: 1;

  display: flex;

  height: 215px;

  padding-left: 244px;             /* место под фото слева */

}



/* Логотип */

.rh-logo {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  flex: none;

  width: 402px;

  padding-top: 36px;

  transition: opacity .2s;

}

.rh-logo:hover { opacity: .9; }

.rh-logo__mark { width: 107px; height: 100px; margin-top: 1px; }

.rh-logo__text { position: relative; display: flex; flex-direction: column; padding-top: 28px; }

.rh-logo__name {

  font-weight: 900;

  font-size: 40.5px;

  line-height: 1;

  letter-spacing: -.2px;

  color: var(--rh-navy-text);

}

.rh-logo__accent { color: var(--rh-orange); }

.rh-logo__tagline {

  margin-top: 8px;

  font-weight: 700;

  font-size: 16.5px;

  line-height: 1.25;

  text-transform: uppercase;

  color: var(--rh-navy-text);

  white-space: nowrap;

}

.rh-logo__swoosh { width: 182px; height: 12px; margin: 6px 0 0 29px; }



/* Правая часть: преимущества + контакты */

.rh-main__right {

  display: flex;

  flex-direction: column;

  flex: 1 1 auto;

  min-width: 0;

}

.rh-features { display: flex; margin: 34px 0 0 25px; }

.rh-features__item {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 9px;

  padding: 0 3px;

  border-left: 2px solid rgba(11, 47, 90, .85);

  font-family: var(--rh-font-cond);

  font-weight: 500;

  font-size: 13.6px;

  line-height: 1.17;

  text-align: center;

  color: var(--rh-navy-text);

  min-height: 74px;

}

.rh-features__item:nth-child(1) { width: 114px; }

.rh-features__item:nth-child(2) { width: 106px; }

.rh-features__item:nth-child(3) { width: 108px; }

.rh-features__icon { width: 38px; height: 38px; }



.rh-contacts {

  display: flex;

  align-items: center;

  margin-top: auto;

  margin-bottom: 18px;

}

.rh-phone {

  display: flex;

  align-items: center;

  gap: 13px;

  margin-right: 14px;

  color: var(--rh-navy-text);

  transition: color .2s;

}

.rh-phone__icon { width: 36px; height: 40px; color: var(--rh-navy-text); transform: scaleX(-1); }

.rh-phone__text { display: flex; flex-direction: column; }

.rh-phone__num { font-size: 25px; font-weight: 500; line-height: 1.12; letter-spacing: 0; white-space: nowrap; }

.rh-phone__note { margin-top: 3px; font-size: 16px; font-weight: 500; line-height: 1.2; }

.rh-phone:hover { color: var(--rh-orange); }

.rh-phone:hover .rh-phone__icon { color: var(--rh-orange); }



.rh-messengers { display: flex; gap: 7px; margin-right: 9px; }

.rh-messengers__link {

  display: block;

  width: 43px; height: 43px;

  border-radius: 50%;

  box-shadow: 0 3px 8px rgba(10, 43, 75, .18);

  transition: transform .2s, box-shadow .2s;

}

.rh-messengers__link svg { width: 100%; height: 100%; }

.rh-messengers__link:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 14px rgba(10, 43, 75, .28); }



.rh-btn--call {

  position: relative;

  z-index: 2;

  gap: 18px;

  width: 162px; height: 66px;

  padding: 0 14px 0 26px;

  border: 3px solid var(--rh-white);

  border-radius: 33px;

  font-size: 18px;

  line-height: 1.2;

  text-align: center;

  box-shadow: 0 4px 14px rgba(10, 43, 75, .25);

}

.rh-btn--call__text { white-space: normal; }

.rh-btn__chevron { width: 22px; height: 22px; }



/* Бургер — только на мобильной */

.rh-burger { display: none; }



/* ---------------------------------------------------------------------

   3. Меню

   --------------------------------------------------------------------- */

.rh-nav {

  position: relative;

  z-index: 4;

  background: var(--rh-navy);

  color: var(--rh-white);

  font-family: var(--rh-font-cond);

}

.rh-nav__inner { display: flex; align-items: center; height: 55px; }

.rh-menu { display: flex; align-items: center; flex: 1 1 auto; height: 100%; margin-right: 20px; }

.rh-menu__item { position: relative; display: flex; align-items: center; height: 100%; flex: 1 1 auto; justify-content: center; }

.rh-menu__item + .rh-menu__item + .rh-menu__item::before {

  content: "";

  position: absolute;

  left: 0; top: 50%;

  width: 1px; height: 31px;

  transform: translateY(-50%);

  background: rgba(255, 255, 255, .38);

}

.rh-menu__link {

  display: flex;

  align-items: center;

  gap: 14px;

  height: 100%;

  padding: 0 4px;

  font-size: 17.5px;

  font-weight: 500;

  white-space: nowrap;

  transition: color .2s;

}

.rh-menu__link:hover,

.rh-menu__item--has-sub:hover > .rh-menu__link,

.rh-menu__item--has-sub:hover > .rh-menu__toggle { color: #ffa94d; }



.rh-menu__item--active { flex: 0 0 150px; margin-left: 10px; }

.rh-menu__item--active .rh-menu__link {

  justify-content: center;

  width: 100%;

  height: 51px;

  margin-top: 1px;

  border-radius: 8px;

  background: var(--rh-orange-grad);

  color: var(--rh-white);

  box-shadow: 0 3px 10px rgba(253, 106, 0, .35);

}

.rh-menu__item--active .rh-menu__link:hover { color: var(--rh-white); background: var(--rh-orange-grad-hover); }

.rh-menu__home { width: 27px; height: 27px; }



.rh-menu__toggle {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 16px; height: 30px;

  margin-left: 0;

  transition: color .2s;

}

.rh-menu__toggle svg { width: 11px; height: 11px; transition: transform .2s; }

.rh-menu__item.is-open > .rh-menu__toggle svg { transform: rotate(180deg); }



/* Выпадающие списки (десктоп/планшет) */

.rh-submenu {

  position: absolute;

  top: 100%; left: 50%;

  min-width: 250px;

  padding: 8px 0;

  border-radius: 0 0 10px 10px;

  background: var(--rh-white);

  box-shadow: 0 14px 30px rgba(10, 43, 75, .22);

  border-top: 3px solid var(--rh-orange);

  opacity: 0;

  visibility: hidden;

  transform: translate(-50%, 8px);

  transition: opacity .2s, transform .2s, visibility .2s;

}

.rh-submenu a {

  display: block;

  padding: 10px 20px;

  font-family: var(--rh-font);

  font-size: 15px;

  font-weight: 500;

  color: var(--rh-navy-text);

  white-space: nowrap;

  transition: background .15s, color .15s;

}

.rh-submenu a:hover { background: #fff3e8; color: var(--rh-orange); }

@media (hover: hover) and (min-width: 768px) {

  .rh-menu__item--has-sub:hover > .rh-submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

}

@media (min-width: 768px) {

  .rh-menu__item--has-sub:focus-within > .rh-submenu,

  .rh-menu__item.is-open > .rh-submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

}



.rh-btn--calc {

  flex: none;

  width: 254px; height: 46px;

  gap: 0;

  padding: 0 14px;

  border-radius: 10px;

  font-size: 17px;

  margin-right: 12px;

}

.rh-btn--calc__icon { width: 28px; height: 28px; margin-right: 0px; }

.rh-btn--calc__arrow { width: 19px; height: 19px; margin-left: 4px; transition: transform .2s; }

.rh-btn--calc:hover .rh-btn--calc__arrow { transform: translateX(3px); }



/* ---------------------------------------------------------------------

   4. Полоса преимуществ с баннером (отдельный блок .rh-perks)

   --------------------------------------------------------------------- */

.rh-perks {

  position: relative;

  overflow: hidden;

  height: 147px;

  font-family: var(--rh-font-cond);

  color: var(--rh-navy-text);

 /* background: linear-gradient(180deg, #eef1f6 0%, #e1e5ec 60%, #d6dbe3 100%);*/

}

.rh-perks__panel {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  height: 88px;

  margin-top: 9px;

  width: calc(max(0px, 50% - var(--rh-container) / 2) + 16px + 695px);

  padding-left: calc(max(0px, 50% - var(--rh-container) / 2) + 16px);

  border-radius: 0 22px 22px 0;

  background: linear-gradient(90deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .92));

  box-shadow: 0 6px 20px rgba(10, 43, 75, .08);

}

.rh-perks__list { display: flex; align-items: center; }

.rh-perks__item {

  display: flex;

  align-items: center;

  gap: 16px;

  font-size: 16.2px;

  font-weight: 500;

  line-height: 1.24;

  white-space: nowrap;

}

.rh-perks__item:nth-child(1) { padding-left: 20px; padding-right: 24px; }

.rh-perks__item:nth-child(2) { padding: 0 18px 0 16px; border-left: 2px solid rgba(11, 47, 90, .8); }

.rh-perks__item:nth-child(3) { padding-left: 23px; border-left: 2px solid rgba(11, 47, 90, .8); }

.rh-perks__item:nth-child(n+2) { min-height: 64px; }

.rh-perks__icon { width: 47px; height: 47px; }

.rh-perks__icon--wide { width: 68px; height: 48px; }



.rh-perks__city {

  position: absolute;

  z-index: 1;

  top: 0; bottom: 0;

  right: max(0px, calc(50% - var(--rh-container) / 2 + 16px));

  width: 545px;

  background: url("../img/moscow-background.png") left center / cover no-repeat;

}

@media (min-width: 1300px) {

  .rh-perks__city { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 40px); mask-image: linear-gradient(270deg, transparent 0, #000 40px); }

}

.rh-perks__slogan {

  position: absolute;

  top: 2px; right: 100px;

  width: 312px; height: 116px;

}

.rh-perks__brush { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 4px 8px rgba(120, 40, 0, .25)); }

.rh-perks__slogan-text {

  position: absolute;

  left: 4px; right: 0; top: 19px;

  margin: 0;

  font-family: var(--rh-font-script);

  font-weight: 700;

  font-size: 34px;

  line-height: .98;

  color: var(--rh-white);

  text-align: center;

  white-space: nowrap;

  transform: rotate(-8.5deg);

  text-shadow: 0 2px 3px rgba(120, 40, 0, .25);

}



/* =====================================================================

   Десктоп 1200–1265: немного ужимаем, чтобы всё влезло

   ===================================================================== */

@media (max-width: 1265px) and (min-width: 1200px) {

  .rh-top__item--guarantee { padding-left: 6px; }

  .rh-top__item + .rh-top__item { margin-left: 24px; padding-left: 22px; }

  .rh-promo { padding: 0 22px 0 50px; }

  .rh-promo__small { margin-right: 12px; }

  .rh-main__inner { padding-left: 222px; }

  .rh-logo { width: 390px; }

  .rh-logo__mark { width: 100px; height: 94px; }

  .rh-logo__name { font-size: 39px; }

  .rh-logo__tagline { font-size: 15.8px; }

  .rh-phone { margin-right: 8px; gap: 10px; }

  .rh-phone__num { font-size: 24px; }

  .rh-messengers { gap: 5px; margin-right: 6px; }

  .rh-btn--call { width: 148px; padding-left: 20px; gap: 12px; }

  .rh-menu__link { font-size: 17px; }

  .rh-perks__slogan-text { font-size: 32px; }

}



/* =====================================================================

   Планшет 768–1199

   ===================================================================== */

@media (max-width: 1199px) {

  .rh-top__item { font-size: 14px; gap: 10px; }

  .rh-top__item + .rh-top__item { margin-left: 22px; padding-left: 22px; }

  .rh-top__item--guarantee { padding-left: 0; }

  .rh-top__icon { width: 24px; height: 24px; }

  .rh-top__item--prepay .rh-top__icon { width: 26px; height: 26px; }

  .rh-promo { padding: 0 24px 0 48px; }

  .rh-promo__big { font-size: 19px; }

  .rh-promo__small { font-size: 16px; margin-right: 10px; }

  .rh-promo__icon { width: 26px; height: 26px; }



  .rh-main__photo, .rh-main__thermo { display: none; }

  .rh-main {

    background:

      /*url("../images/thermostat.png") right -30px top -4px / 200px auto no-repeat,*/

      radial-gradient(ellipse 60% 90% at 40% 20%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%),

      linear-gradient(180deg, #edf4fd 0%, #e3eefb 60%, #dbe9f9 100%);

  }

  .rh-main__stripes { right: 0; width: 110px; height: 100px; }

  .rh-main__stripes::before { display: none; }

  .rh-main__inner {

    display: grid;

    grid-template-columns: auto 1fr;

    grid-template-areas: "logo features" "contacts contacts";

    align-items: center;

    row-gap: 14px;

    height: auto;

    padding: 22px 16px 20px;

  }

  .rh-main__right { display: contents; }

  .rh-logo { grid-area: logo; width: auto; padding-top: 0; }

  .rh-logo__mark { width: 90px; height: 84px; }

  .rh-logo__text { padding-top: 12px; }

  .rh-logo__name { font-size: 38px; }

  .rh-logo__tagline { font-size: 15.4px; margin-top: 10px; }

  .rh-logo__swoosh { width: 160px; }

  .rh-features { grid-area: features; justify-self: end; margin: 0 180px 0 0; }

  .rh-contacts { grid-area: contacts; justify-content: flex-end; margin: 0; }

  .rh-phone { margin-right: auto; }



  .rh-menu { margin-right: 14px; }

  .rh-menu__link { font-size: 15.5px; gap: 9px; }

  .rh-menu__item--active { flex-basis: 128px; margin-left: 0; }

  .rh-menu__home { width: 22px; height: 22px; }

  .rh-btn--calc { width: auto; font-size: 15.5px; margin-right: 0; }

  .rh-btn--calc__icon { width: 24px; height: 24px; margin-right: 10px; }



  .rh-perks { display: flex; flex-direction: column; height: auto; }

  .rh-perks__panel { order: 1; width: 100%; height: auto; margin: 0; padding: 16px; border-radius: 0; background: rgba(255, 255, 255, .85); }

  .rh-perks__list { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: var(--rh-container); margin: 0 auto; }

  .rh-perks__item { justify-content: center; font-size: 16px; gap: 14px; }

  .rh-perks__item:nth-child(n) { padding: 4px 8px; min-height: 0; }

  .rh-perks__icon { width: 40px; height: 40px; }

  .rh-perks__icon--wide { width: 56px; height: 40px; }

  .rh-perks__city { order: 2; position: relative; right: auto; width: 100%; height: 140px; background-position: left 30% center; }

  .rh-perks__slogan { right: 3%; top: 14px; }

}



@media (max-width: 991px) {

  .rh-top__item--prepay { display: none; }

  .rh-only-wide { display: none; }

  .rh-only-narrow { display: inline; }

  .rh-features { margin-right: 0; }

  .rh-features__item:nth-child(n) { width: 100px; }

  .rh-main { background:

      radial-gradient(ellipse 60% 90% at 40% 20%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%),

      linear-gradient(180deg, #edf4fd 0%, #e3eefb 60%, #dbe9f9 100%); }

  .rh-menu { margin-right: 10px; }

  .rh-menu__link { font-size: 14.5px; }

  .rh-menu__item--active { flex-basis: 112px; }

  .rh-btn--calc { width: 46px; padding: 0; }

  .rh-btn--calc__icon { margin: 0; }

  .rh-btn--calc__text, .rh-btn--calc__arrow { display: none; }

  .rh-perks__item { font-size: 14.5px; gap: 10px; }

  .rh-perks__icon { width: 34px; height: 34px; }

  .rh-perks__icon--wide { width: 46px; height: 34px; }

}



/* =====================================================================

   Мобильная ≤767

   ===================================================================== */

@media (max-width: 767px) {

  .rh-container { padding: 0 14px; }



  /* Верхняя полоса: только часы работы и скидка */

  .rh-top__inner { height: 36px; }

  .rh-top__item--guarantee { display: none; }

  .rh-only-narrow { display: none; }

  .rh-only-xs { display: inline; }

  .rh-top__item + .rh-top__item { margin: 0; padding: 0; }

  .rh-top__item + .rh-top__item::before { display: none; }

  .rh-top__item { font-size: 13px; gap: 7px; }

  .rh-top__icon { width: 18px; height: 18px; }

  .rh-promo { height: 36px; margin-right: -14px; padding: 0 14px 0 26px; gap: 6px; clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%); }

  .rh-promo__big { font-size: 14.5px; }

  .rh-promo__small { font-size: 13px; margin-right: 2px; }

  .rh-promo__icon { width: 18px; height: 18px; }



  /* Основной блок */

  .rh-main__stripes { display: none; }

  .rh-main__inner {

    grid-template-columns: 1fr auto;

    grid-template-areas: "logo burger" "contacts contacts" "features features";

    row-gap: 14px;

    padding-top: 14px;

    padding-bottom: 14px;

  }

  .rh-logo { gap: 9px; align-items: center; }

  .rh-logo__mark { width: 52px; height: 49px; margin: 0; }

  .rh-logo__text { padding-top: 0; }

  .rh-logo__name { font-size: 25px; }

  .rh-logo__tagline { font-size: 10.2px; margin-top: 5px; line-height: 1.2; }

  .rh-logo__swoosh { display: none; }



  .rh-burger {

    grid-area: burger;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

    width: 46px; height: 46px;

    border-radius: 10px;

    background: var(--rh-navy);

    transition: background .2s;

  }

  .rh-burger:hover { background: var(--rh-navy-light); }

  .rh-burger__line { display: block; width: 22px; height: 2.6px; border-radius: 2px; background: var(--rh-white); transition: transform .25s, opacity .2s; }

  .rh--nav-open .rh-burger__line:nth-child(1) { transform: translateY(7.6px) rotate(45deg); }

  .rh--nav-open .rh-burger__line:nth-child(2) { opacity: 0; }

  .rh--nav-open .rh-burger__line:nth-child(3) { transform: translateY(-7.6px) rotate(-45deg); }



  .rh-contacts {

    display: grid;

    grid-template-columns: 1fr auto;

    grid-template-areas: "phone messengers" "call call";

    align-items: center;

    gap: 12px 8px;

  }

  .rh-phone { grid-area: phone; gap: 9px; margin: 0; }

  .rh-phone__icon { width: 26px; height: 28px; }

  .rh-phone__num { font-size: 20.5px; font-weight: 700; }

  .rh-phone__note { font-size: 13px; margin-top: 1px; }

  .rh-messengers { grid-area: messengers; gap: 6px; margin: 0; }

  .rh-messengers__link { width: 38px; height: 38px; }

  .rh-btn--call {

    grid-area: call;

    width: 100%; height: 50px;

    padding: 0 20px;

    gap: 10px;

    border-width: 0;

    border-radius: 25px;

    font-size: 17px;

  }

  .rh-btn--call__text br { display: none; }

  .rh-btn__chevron { width: 20px; height: 20px; }



  .rh-features {

    justify-self: stretch;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    margin: 0;

    padding-top: 12px;

    border-top: 1px solid rgba(11, 47, 90, .12);

  }

  .rh-features__item:nth-child(n) { width: auto; min-height: 0; padding: 0 4px; font-size: 12.5px; gap: 6px; border-left-width: 1px; }

  .rh-features__item:first-child { border-left: 0; }

  .rh-features__icon { width: 28px; height: 28px; }



  /* Меню — выпадает по бургеру */

  .rh-nav { display: none; }

  .rh--nav-open .rh-nav { display: block; box-shadow: 0 16px 30px rgba(10, 43, 75, .3); }

  .rh-nav__inner { flex-direction: column; align-items: stretch; height: auto; padding-top: 10px; padding-bottom: 16px; }

  .rh-menu { flex-direction: column; align-items: stretch; height: auto; margin: 0; }

  .rh-menu__item { flex-wrap: wrap; justify-content: flex-start; height: auto; border-bottom: 1px solid rgba(255, 255, 255, .1); }

  .rh-menu__item + .rh-menu__item + .rh-menu__item::before { display: none; }

  .rh-menu__item--active { flex-basis: auto; border-bottom: 0; margin: 0 0 6px; }

  .rh-menu__item--active .rh-menu__link { justify-content: flex-start; height: 48px; padding: 0 14px; margin: 0; }

  .rh-menu__link { flex: 1 1 auto; height: 50px; padding: 0 14px; font-size: 17px; }

  .rh-menu__toggle { width: 50px; height: 50px; }

  .rh-menu__toggle svg { width: 16px; height: 16px; }

  .rh-submenu {

    position: static;

    flex: 0 0 100%;

    display: none;

    min-width: 0;

    padding: 4px 0 10px;

    border: 0;

    border-radius: 8px;

    background: rgba(255, 255, 255, .06);

    box-shadow: none;

    opacity: 1; visibility: visible; transform: none;

    margin-bottom: 10px;

  }

  .rh-menu__item.is-open > .rh-submenu { display: block; }

  .rh-submenu a { padding: 10px 26px; color: rgba(255, 255, 255, .9); font-size: 15px; white-space: normal; }

  .rh-submenu a:hover { background: transparent; color: #ffa94d; }

  .rh-btn--calc { width: 100%; height: 50px; margin-top: 14px; padding: 0 16px; }

  .rh-btn--calc__icon { margin-right: 12px; }

  .rh-btn--calc__text, .rh-btn--calc__arrow { display: inline-block; }

  .rh-btn--calc__arrow { display: block; }



  /* Полоса преимуществ: в столбик, баннер ниже */

  .rh-perks { display: flex; flex-direction: column; }

  .rh-perks__panel { order: 1; padding: 6px 14px; }

  .rh-perks__list { display: flex; flex-direction: column; align-items: stretch; }

  .rh-perks__item { justify-content: flex-start; }

  .rh-perks__item:nth-child(n) { padding: 10px 0; border-left: 0; font-size: 15.5px; gap: 14px; white-space: normal; }

  .rh-perks__item + .rh-perks__item { border-top: 1px solid rgba(11, 47, 90, .12); }

  .rh-perks__item br { display: none; }

  .rh-perks__icon, .rh-perks__icon--wide { width: 40px; height: 32px; }

  .rh-perks__city { order: 2; height: 128px; background-position: left 20% center; }

  .rh-perks__slogan { width: 268px; height: 98px; top: 14px; right: 0; }

  .rh-perks__slogan-text { font-size: 25px; left: 14px; top: 19px; }

}



@media (max-width: 380px) {

  .rh-promo__small { display: none; }

  .rh-perks__slogan { width: 240px; }

  .rh-perks__slogan-text { font-size: 23px; }

  .rh-logo__name { font-size: 22px; }

  .rh-logo__tagline { font-size: 9.2px; }

  .rh-phone__num { font-size: 18px; }

  .rh-messengers__link { width: 34px; height: 34px; }

}



@media (max-width: 350px) {

  .rh-contacts { grid-template-columns: 1fr; grid-template-areas: "phone" "messengers" "call"; }

  .rh-messengers { justify-self: start; padding-left: 35px; }

}


/* Full-width desktop layout. No zoom or transforms: no viewport clipping. */
@media (min-width: 1200px) {
  :root { --rh-container: 100%; }
  .rh, .rh-perks { width: 100%; max-width: 100%; zoom: 1; }
  .rh-container { width: 100%; max-width: none; padding-inline: clamp(16px, 2vw, 40px); }
  .rh-top__inner, .rh-nav__inner { width: 100%; }
  .rh-main__inner { justify-content: space-between; gap: clamp(12px, 2vw, 36px); }
  .rh-main__right { align-items: flex-end; }
  .rh-features { margin-left: 0; margin-right: clamp(8px, 5vw, 110px); }
  .rh-contacts { width: 100%; justify-content: flex-end; }
  .rh-main__photo { left: 0; }
  .rh-main__thermo, .rh-main__stripes, .rh-perks__city { right: 0; }
  .rh-top::after { display: none; }
  .rh-promo { margin-right: calc(-1 * clamp(16px, 2vw, 40px)); }
  .rh-perks__panel { width: min(58%, 950px); padding-left: clamp(16px, 2vw, 40px); }
  .rh-perks__city { width: 42%; }
}
@media (min-width: 1500px) {
  .rh-top__inner { height: clamp(44px, 3.1vw, 66px); }
  .rh-top__item { font-size: clamp(15.5px, 1.15vw, 23px); }
  .rh-main__inner { height: clamp(215px, 15vw, 320px); padding-left: clamp(244px, 19vw, 365px); }
  .rh-main__photo { width: clamp(343px, 24vw, 515px); background-size: 100% 100%; }
  .rh-logo { width: clamp(402px, 29vw, 603px); padding-top: clamp(36px, 2.5vw, 54px); }
  .rh-logo__mark { width: clamp(107px, 7.5vw, 160px); height: clamp(100px, 7vw, 150px); }
  .rh-logo__name { font-size: clamp(40.5px, 2.8vw, 60px); }
  .rh-logo__tagline { font-size: clamp(16.5px, 1.15vw, 24px); }
  .rh-features__item { font-size: clamp(13.6px, 0.95vw, 20px); }
  .rh-features__item:nth-child(n) { width: clamp(108px, 7.7vw, 160px); }
  .rh-features__icon { width: clamp(38px, 2.65vw, 57px); height: clamp(38px, 2.65vw, 57px); }
  .rh-phone__num { font-size: clamp(25px, 1.7vw, 37px); }
  .rh-phone__note { font-size: clamp(16px, 1.1vw, 24px); }
  .rh-nav__inner { height: clamp(55px, 3.8vw, 82px); }
  .rh-menu__link { font-size: clamp(17.5px, 1.2vw, 26px); }
  .rh-perks { height: clamp(147px, 10.3vw, 220px); }
  .rh-perks__panel { height: clamp(88px, 6.15vw, 132px); }
  .rh-perks__item { font-size: clamp(16.2px, 1.1vw, 24px); }
  .rh-perks__city { width: 42%; }
}

/* Keep rh-features next to the logo rather than pinning it to the right edge. */
@media (min-width: 1200px) {
  .rh-main__right { align-items: flex-start; }
  .rh-features { margin: 34px 0 0 clamp(25px, 2vw, 38px); }
  .rh-contacts { align-self: stretch; }
}
@media (min-width: 1500px) {
  .rh-features { margin-top: clamp(34px, 2.4vw, 51px); }
}

/* Thermostat: proportional scaling with the full-width desktop header. */
@media (min-width: 1200px) {
  .rh-main__thermo {
    right: clamp(16px, 2vw, 40px);
    top: clamp(3px, 0.22vw, 5px);
    width: 262px;
    height: 129px;
    aspect-ratio: 262 / 129;
    background-size: contain;
    background-position: right top;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
@media (min-width: 1500px) {
  .rh-main__thermo {
    width: clamp(262px, 18.3vw, 393px);
    height: auto;
    aspect-ratio: 262 / 129;
  }
}

/* Align thermostat flush with the right edge; keep its responsive scale. */
@media (min-width: 1200px) {
  .rh-main__thermo { right: 0; }
}

/* Thermostat at true 150% of original 262 × 129px on wide desktops. */
@media (min-width: 1200px) {
  .rh-main__thermo {
    width: 393px;
    height: 193.5px;
    right: 0;
    background-size: contain;
  }
}

/* Keep decorative stripes flush with the same right edge as the thermostat. */
@media (min-width: 1200px) {
  .rh-main__stripes { right: 0; }
}

/* Move desktop contact group slightly left without changing its scale. */
@media (min-width: 1200px) {
  .rh-contacts { position: relative; left: -30%; }
}

/* Keep the main photo and desktop hero scaling smoothly from 1200px upward.
   No layout jump at 1500px; tablet breakpoint remains below 1200px. */
@media (min-width: 1200px) {
  .rh-main__photo {
    left: 0;
    width: clamp(343px, 24vw, 515px);
    background-size: 100% 100%;
  }
  .rh-main__inner {
    height: clamp(215px, 15vw, 320px);
    padding-left: clamp(244px, 19vw, 365px);
  }
}

/* Масштабирование rh-promo на широких экранах */
@media (min-width: 1500px) {
  .rh-promo {
    height: clamp(47px, 3.13vw, 70.5px);
    gap: clamp(8px, 0.53vw, 12px);
    padding: 0 clamp(40px, 2.67vw, 60px)
             0 clamp(60px, 4vw, 90px);
    margin-right: calc(-1 * clamp(16px, 2vw, 40px));
    clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%);
  }

  .rh-promo__big {
    font-size: clamp(24px, 1.6vw, 36px);
  }

  .rh-promo__small {
    font-size: clamp(20px, 1.33vw, 30px);
    margin-right: clamp(26px, 1.73vw, 39px);
  }

  .rh-promo__icon {
    width: clamp(32px, 2.13vw, 48px);
    height: clamp(32px, 2.13vw, 48px);
  }
}

/* Масштабирование фона города на широких экранах */






@media (min-width: 1500px) {
  .rh-perks__city {
    
width: clamp(545px, 61.33vw, 1380px);

    right: 0;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;

    
  }
}
.rh-perks__city{
-webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 15%,
      black 85%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 15%,
      black 85%,
      transparent 100%
    );
}


  
 
  .rh-perks__panel {
    -webkit-mask-image: none;
    mask-image: none;

    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.92) 65%,
      rgba(255, 255, 255, 0) 100%
    );
  }

.order_header{
  cursor: pointer;
}







@media (min-width: 768px) {
    #rh-nav.rh-nav--fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
    }
}

@media (max-width: 767px) {
    .rh-mobile-sticky.rh-mobile-sticky--fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
    }
}