:root{
 --blue:#123d72;--dark:#082c59;--yellow:#ffbd16;
 --text:#18202b;--muted:#69727d;--light:#f5f6f7;
 --shadow:0 8px 28px rgba(9,38,74,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:85px}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text)}
a{text-decoration:none}
button,input,select{font:inherit}
.site-header{height:76px;background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 12px #00000012}
.header-inner{height:100%;display:flex;align-items:center;gap:25px}
.logo{display:flex;align-items:center;gap:8px;color:var(--blue);font-size:12px;line-height:1.05;font-weight:800}
.logo-mark{display:grid;place-items:center;background:var(--yellow);width:36px;height:36px;font-size:23px;color:#111}
.main-nav{display:flex;gap:20px;flex:1}
.main-nav a{font-size:13px;color:#333}
.main-nav a:hover{color:var(--blue)}
.header-phone{text-align:right;font-size:13px;font-weight:700}
.header-phone small{display:block;color:#777;font-weight:400;font-size:10px}
.burger{display:none;background:none;border:0;font-size:27px}
.hero{min-height:550px;color:#fff;background:linear-gradient(90deg,#061c34ed,#082d5166),linear-gradient(135deg,#526f82,#b4c3ca,#273d4b)}
.hero-content{min-height:550px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.hero-copy{max-width:690px;padding:55px 0}
.eyebrow{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:800;color:var(--yellow);margin-bottom:12px}
.eyebrow.dark{color:var(--blue)}
.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.08;font-weight:800;margin:0 0 22px}
.hero h1 span{color:var(--yellow)}
.hero p{max-width:590px;color:#e5edf5;font-size:16px;line-height:1.7}
.hero-note{background:#092d54e8;border-left:4px solid var(--yellow);padding:20px;min-width:220px}
.hero-note strong{display:block;color:var(--yellow);font-size:25px}
.hero-note span{font-size:11px;line-height:1.5}
/* .section-pad{padding:72px 0} */
.section-heading{text-align:center;max-width:780px;margin:0 auto 35px}
.section-heading h2{font-size:clamp(25px,3vw,35px);font-weight:800;margin:0 0 12px}
.section-heading p{color:var(--muted);font-size:14px;line-height:1.7}
.brand-tabs{display:flex;border-bottom:1px solid #ddd;margin-bottom:25px}
.brand-tab{flex:1;padding:14px 8px;border:1px solid #ddd;border-bottom:0;background:#f3f4f5;font-weight:700;color:#555}
.brand-tab small{display:block;font-size:10px;font-weight:400}
.brand-tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.configurator{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:25px;align-items:start}
.config-main{border:1px solid #e0e3e6;padding:25px;background:white}
.config-group{margin-bottom:28px}
.config-group:last-child{margin-bottom:0}
.config-group h3{font-size:15px;font-weight:800;margin-bottom:13px}
.size-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.size-option{border:1px solid #d9dee3;background:#fff;text-align:left;padding:12px;border-radius:3px}
.size-option b{display:block;font-size:13px}
.size-option small{display:block;color:#555;font-size:12px;margin-top:5px}
.size-option.active{border:2px solid var(--blue);background:#f1f6fc}
.custom-size{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:13px}
.custom-size input{width:110px;max-width:40%;padding:9px;border:1px solid #cbd1d8;border-radius:3px}
.field-label{font-size:12px;color:#555;display:block;margin-bottom:7px}
.series-options{display:flex;gap:10px}
.series-option{flex:1;border:1px solid #d7dce1;padding:15px;background:#fff;text-align:left}
.series-option.active{border:2px solid var(--blue);background:#f1f6fc}
.series-option b{display:block;font-size:14px}
.series-option small{font-size:11px;color:#777}
.color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.color-card{border:1px solid #ddd;padding:7px;background:#fff;text-align:center}
.color-card.active{border:2px solid var(--yellow)}
.color-card i{display:block;height:38px;margin-bottom:5px;border:1px solid #ddd}
.color-card span{font-size:10px}
.check-option{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid #ddd;margin-top:9px;cursor:pointer}
.check-option input{margin-top:4px}
.check-option b{font-size:12px;display:block}
.check-option small{font-size:11px;color:#777}
.price-card{position:sticky;top:95px;background:var(--dark);color:white;padding:23px;box-shadow:var(--shadow)}
.price-card h3{font-size:18px;font-weight:800}
.price-card .price-main{font-size:31px;font-weight:800;color:var(--yellow);margin:10px 0}
.price-line{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:9px 0;border-bottom:1px solid #ffffff24}
.price-line span:last-child{text-align:right;font-weight:600}
.price-card p{font-size:11px;color:#d8e1eb;line-height:1.65}
.price-card .btn{font-weight:700}
.price-note{font-size:10px;color:#bdccdb;line-height:1.5;margin-top:12px}
.price-explainer{margin-top:65px}
.table-prices{font-size:13px}
.table-prices thead{background:var(--dark);color:white}
.table-prices th,.table-prices td{padding:13px 10px}
.info-card{height:100%;border:1px solid #e0e3e6;padding:23px}
.info-card h3{font-size:16px;font-weight:800}
.info-card p{font-size:12px;line-height:1.7;color:var(--muted);margin:0}
.explain-box{background:#f5f7f9;border-left:4px solid var(--yellow);padding:24px}
.explain-box p,.explain-box li{font-size:13px;line-height:1.8}
.consult{background:#eef2f5;padding:28px 0}
.consult-box{background:white;box-shadow:var(--shadow);padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}
.consult h2{font-size:27px;font-weight:800}
.consult p{font-size:13px;color:#666;line-height:1.7}
.lead-form{display:grid;gap:10px}
.lead-form .form-control,.lead-form .form-select{font-size:13px;padding:12px}
.consent{font-size:10px;color:#666;line-height:1.5}
/* .about{background:linear-gradient(135deg,var(--dark),#174d8b);color:white} */

/* .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} */



/* .about-grid p{font-size:13px;line-height:1.9;color:#e0e9f1} */

.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.adv-grid article{border:1px solid #e1e4e7;padding:23px;background:white;min-height:155px}
.adv-grid span{display:grid;place-items:center;background:var(--yellow);width:38px;height:38px;margin-bottom:13px;font-size:19px}
.adv-grid b{font-size:inherit}
.adv-grid p{font-size:inherit;color:#777;line-height:1.6;margin:7px 0 0}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.steps-grid article{display:flex;gap:15px;align-items:center}
.steps-grid strong{font-size:37px;font-weight:300;color:var(--yellow)}
.steps-grid span{font-size:inherit;line-height:1.6}
.works-slider{position:relative;overflow:hidden}
.work-track{display:flex;transition:transform .35s}
.work-slide{min-width:100%;padding:0 45px;text-align:center}
.work-picture{max-width:800px;height:350px;margin:auto;background:linear-gradient(#d7d9d7,#f4f4f2);position:relative;display:grid;place-items:center}
.work-picture:after{content:"";width:72%;height:82%;border:10px solid #34404a;background:repeating-linear-gradient(to bottom,#687986 0 27px,#3b4b57 28px 30px)}
.work-picture.light:after{background:repeating-linear-gradient(to bottom,#f0f0ee 0 27px,#c5c8c9 28px 30px)}
.work-picture.wood:after{background:repeating-linear-gradient(to bottom,#8c5d35 0 27px,#654327 28px 31px)}
.work-slide span{display:block;font-size:13px;font-weight:700;margin-top:14px}
.slider-btn{position:absolute;top:45%;z-index:2;border:0;background:#123d72dd;color:white;width:40px;height:40px;border-radius:50%;font-size:25px}
.slider-btn.prev{left:0}.slider-btn.next{right:0}
.bottom-cta{background:var(--yellow);padding:40px 0}
.cta-inner{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.bottom-cta h2{font-size:27px;font-weight:800}
.bottom-cta p{font-size:13px}
.footer{background:#072b56;color:white;padding:24px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px}
.footer a{color:white}
.modal-backdrop-custom{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:100;opacity:0;visibility:hidden;transition:.2s;padding:15px}
.modal-backdrop-custom.show{opacity:1;visibility:visible}
.callback-modal{width:min(460px,100%);max-height:90vh;overflow:auto;background:white;padding:28px;position:relative;transform:translateY(-10px);transition:.2s}
.show .callback-modal{transform:translateY(0)}
.modal-close{position:absolute;right:10px;top:5px;border:0;background:none;font-size:27px}
.callback-modal h2{font-size:23px;font-weight:800}
.callback-modal p{font-size:12px;color:#777}
.toast-message{position:fixed;right:15px;bottom:15px;background:#123d72;color:white;padding:15px 18px;z-index:200;box-shadow:var(--shadow);display:none;font-size:12px;max-width:360px}
.toast-message.show{display:block}
@media(max-width:991px){
 .header-phone{display:none}.configurator{grid-template-columns:1fr}
 .price-card{position:static}.hero-note{min-width:190px}
}
@media(max-width:767px){
 .site-header{height:64px}.header-inner{gap:12px}
 .main-nav{position:absolute;top:64px;left:0;right:0;background:white;display:none;flex-direction:column;padding:17px 22px;box-shadow:var(--shadow)}
 .main-nav.open{display:flex}.burger{display:block;margin-left:auto}
 .hero-content{min-height:650px;align-items:flex-start;flex-direction:column;justify-content:center;padding-top:20px;padding-bottom:140px;gap:0}
 .hero-note{position:absolute;bottom:25px;left:12px;right:12px}
 .section-pad{padding:52px 0}.config-main{padding:17px}
 .size-grid{grid-template-columns:1fr 1fr}.consult-box,.about-grid,.cta-inner{grid-template-columns:1fr}
 .adv-grid{grid-template-columns:1fr 1fr}.steps-grid{grid-template-columns:1fr}
 .work-picture{height:230px}.work-slide{padding:0 30px}
 .footer-inner{flex-direction:column;align-items:flex-start}
}
@media(max-width:420px){
 .logo{font-size:10px}.logo-mark{width:30px;height:30px}
 .brand-tab{font-size:11px}.brand-tab small{font-size:9px}
 .size-grid{grid-template-columns:1fr}.color-grid{grid-template-columns:repeat(3,1fr)}
 .series-option{padding:11px 8px}.price-card .price-main{font-size:27px}
 .table-prices{font-size:11px}.table-prices th,.table-prices td{padding:9px 5px}
}
.hero h1 .city{
 font-family:"Playfair Display",Georgia,serif;
 font-style:italic;
 font-weight:700;
 color:var(--yellow);
 white-space:nowrap;
}

.brand-tabs{
  display:flex;
  border-bottom:1px solid #ddd;
  margin-bottom:25px;
  /* важно: даём логотипам вылезать за пределы */
  overflow:visible;
}

.brand-tab{
  position:relative;              /* якорь для абсолютного лого */
  overflow:visible;               /* лого может выходить за рамки */
  flex:1;
  padding:24px 8px 14px 56px;     /* слева отступ под лого */
  border:1px solid #ddd;
  border-bottom:0;
  background:#f3f4f5;
  font-weight:700;
  color:#555;
  text-align:left;
}

.brand-tab.active{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
  /* поверх соседей, чтобы лого не резалось */
  z-index:3;
}

/* логотип: верхний слой, выходит за рамки */
.brand-tab .brand-logo{
  position:absolute;
  left:-14px;                     /* вылезает влево за границу ячейки */
  top:-14px;                      /* вылезает вверх за границу ячейки */
  width:64px;
  height:64px;
  object-fit:contain;
  pointer-events:none;            /* клики идут по кнопке, а не по картинке */
  z-index:10;                     /* самый верхний слой */
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.18));
}

.fw-bold {
    font-weight: 700 !important;
}

/* адаптив: на мобильных лого меньше */
@media(max-width:420px){
  .brand-tab{
    padding:20px 6px 10px 44px;
    font-size:11px;
  }
  .brand-tab .brand-logo{
    width:48px;
    height:48px;
    left:-10px;
    top:-10px;
  }
}




/* ================================
   СЕКЦИЯ «О НАС»
================================ */

.about {
    background: linear-gradient(135deg, var(--dark), #174d8b);
    color: #fff;
    overflow: hidden;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: stretch;
}

/* Текстовая часть */

.about-grid p {
    font-size: inherit;
    line-height: 1.9;
    color: #e0e9f1;
}

/* Контейнер фотографии */

.about-visual {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    align-self: stretch;

    min-width: 0;
    min-height: 290px;

    margin: 0;
    padding: 0;

    background: transparent;
    overflow: hidden;
}

/* Фотография установщика */

.about-worker {
    display: block;

    width: 218px;
    max-width: 100%;
    height: auto;
    max-height: 300px;

    object-fit: contain;
    object-position: center bottom;

    align-self: flex-end;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;
    box-shadow: none;
}

/* ================================
   ПЛАНШЕТЫ
================================ */

@media (max-width: 991.98px) {
    .about-grid {
        grid-template-columns: 1fr 0.8fr;
        gap: 25px;
    }

    .about-visual {
        min-height: 270px;
    }

    .about-worker {
        width: 200px;
        max-height: 280px;
    }
}

/* ================================
   МОБИЛЬНЫЕ УСТРОЙСТВА
================================ */

@media (max-width: 767.98px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .about-visual {
        min-height: 240px;
        margin: 0;
        padding: 0;
    }

    .about-worker {
        width: 175px;
        max-height: 240px;
    }

    .about-grid p {
        font-size: 14px;
        line-height: 1.8;
    }
}

/* ================================
   МАЛЕНЬКИЕ ЭКРАНЫ
================================ */

@media (max-width: 380px) {
    .about-visual {
        min-height: 220px;
    }

    .about-worker {
        width: 160px;
        max-height: 220px;
    }
}

@media (max-width: 767px){
  .adv-grid{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .adv-grid article{
    min-height: auto;      /* убираем фиксированную высоту */
  }
}
.custom-size{
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 13px;
}
.custom-size .size-field{
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.custom-size input{
  width: 110px;
  max-width: 100%;
  padding: 9px;
  border: 1px solid #cbd1d8;
  border-radius: 3px;
}

@media (max-width: 767px){
  .custom-size{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .custom-size .size-field{
    width: 100%;
  }
  .custom-size input{
    flex: 1;
    width: auto;
  }
}
/* ================================
   МОДАЛКА «УСПЕШНО ОТПРАВЛЕНО»
================================ */
.success-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 22, 43, 0.55);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  padding: 15px;
}

.success-modal-backdrop.show {
  opacity: 1;
  visibility: visible;
}

.success-modal {
  background: #fff;
  border-radius: 10px;
  padding: 36px 30px 28px;
  width: min(420px, 100%);
  text-align: center;
  box-shadow: 0 25px 60px rgba(9, 38, 74, 0.35);
  transform: translateY(-12px) scale(.96);
  transition: transform .25s ease;
}

.success-modal-backdrop.show .success-modal {
  transform: translateY(0) scale(1);
}

.success-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 38px;
  font-weight: 700;
  line-height: 68px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.4);
}

.success-modal h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 10px;
}

.success-modal p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 22px;
}

.success-modal .btn {
  min-width: 140px;
}
/* Кнопки в hero — на одной линии */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.hero-actions .btn {
  margin: 0;                  /* убираем все возможные внешние отступы */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;           /* одинаковая высота у обеих кнопок */
  padding: 12px 22px;
  line-height: 1.2;
}

/* ================================
   СЕКЦИЯ «НАШИ РАБОТЫ» — СЕТКА ФОТО
================================ */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 60px;
}

.work-card {
  margin: 0;
  background: #fff;
  border: 1px solid #e1e4e7;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: zoom-in;
  display: flex;
  flex-direction: column;
}

.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(9, 38, 74, 0.15);
}

.work-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  background: #eef1f4;
}

.work-card figcaption {
  padding: 12px 14px 14px;
  font-size: 13px;
  line-height: 1.45;
}

.work-card figcaption b {
  display: block;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

.work-card figcaption span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

/* ================================
   СЕТКА ВИДЕО
================================ */
.works-video-heading {
  margin-top: 20px;
}

.works-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 50px;
}

.video-card {
  margin: 0;
  background: #fff;
  border: 1px solid #e1e4e7;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #000;
}

.video-card figcaption {
  padding: 12px 14px 14px;
  font-size: 13px;
  line-height: 1.45;
}

.video-card figcaption b {
  display: block;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

.video-card figcaption span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

/* ================================
   CTA ПОД РАБОТАМИ
================================ */
.works-cta {
  background: linear-gradient(135deg, var(--dark), #174d8b);
  color: #fff;
  padding: 30px 34px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  flex-wrap: wrap;
  margin-bottom: 20px;

}

.works-cta h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px;
}

.works-cta p {
  font-size: 13px;
  color: #d8e1eb;
  margin: 0;
  max-width: 560px;
  line-height: 1.6;
}

.works-cta .btn {
  white-space: nowrap;
}

/* ================================
   ЛАЙТБОКС
================================ */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(2, 16, 32, 0.92);
  z-index: 9999;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  padding: 40px 20px;
}

.lightbox.show {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  max-width: min(92vw, 900px);
  max-height: 88vh;
  display: grid;
  place-items: center;
}

.lightbox-content img {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 20px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity .2s ease;
}

.lightbox-close:hover { opacity: 1; }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

.lightbox-nav.prev { left: 20px; }
.lightbox-nav.next { right: 20px; }

/* ================================
   АДАПТИВ
================================ */
@media (max-width: 991px) {
  .works-grid,
  .works-video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .works-cta {
    padding: 26px 22px;
  }
}

@media (max-width: 575px) {
  .works-grid,
  .works-video-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .work-card img,
  .video-card video {
    aspect-ratio: 4 / 5;      /* на мобильных чуть менее вытянутые */
  }
  .works-cta {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 22px 18px;
  }
  .works-cta .btn {
    width: 100%;
    text-align: center;
  }
  .lightbox-nav {
    width: 42px;
    height: 42px;
    font-size: 22px;
  }
  .lightbox-nav.prev { left: 8px; }
  .lightbox-nav.next { right: 8px; }
  .lightbox-close {
    top: 8px;
    right: 12px;
    font-size: 36px;
  }
}
.hero-side {
  flex: 0 0 auto;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-left: auto;
}

.hero-badge {
  width: 100%;
  animation: heroBadgeFloat 4s ease-in-out infinite;
}

.hero-badge img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
}

@keyframes heroBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@media (max-width: 991px) {
  .hero-side {
    max-width: 420px;
  }
}

@media (max-width: 767px) {
  .hero-side {
    max-width: 320px;
    margin: 0 auto;
  }
  .hero-note {
    position: static;   /* важно: на мобильных в текущей вёрстке .hero-note absolute */
    margin: 0 0 12px;
  }
}