/* Базовые Стили */ 

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#fff;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

td {
    border: none;
}

/* ===== Layout ===== */
.wrap{ padding:22px 14px 52px; }
.container{ max-width:var(--container); margin:0 auto; }

/* ===== Sections ===== */
.section{ margin-top:18px; }

.section-title{
  margin:0 0 14px;
  font-size:28px;
  letter-spacing:.2px;
  color:#2a6e85;
  font-weight:900;
  line-height:1.15;
}

.divider{ border-top:1px solid var(--line); margin:12px 0; }

.card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow: var(--shadow-soft);
    }

    /* ===== Micro-interactions / hover ===== */
    .hover-card{
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      will-change: transform;
      border-radius: 7px;
      cursor: pointer;
    }
    .hover-card:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      border-color: rgba(45,150,177,.28);
    }

    /* 1) Большие блоки (карточки секций) не подпрыгивают и не усиливают тень */
    .card.hover-card{
      will-change: auto;
      transition: border-color .18s ease;
    }
    .card.hover-card:hover{
      transform: none;
      box-shadow: var(--shadow-soft);
      border-color: rgba(45,150,177,.28);
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      height:40px;
      padding:0 16px;
      border-radius:10px;
      border:1px solid transparent;
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
      transition: transform .12s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .btn:active{transform: translateY(1px)}
    .btn-primary{background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff; box-shadow: 0 10px 18px rgba(45,150,177,.22)}
    .btn-primary:hover{filter: brightness(1.03)}
    .btn-ghost{background:#fff; border-color: var(--line); color:var(--text)}
	.btn-ghost-fix {margin-top: 21px;}
    .btn-ghost:hover{border-color: rgba(45,150,177,.35); box-shadow: 0 10px 18px rgba(14,33,43,.06)}
    .btn-accent{background: linear-gradient(90deg, #f6a623, #f39c12); color:#fff; }
    
    .btn-accent:hover{
      background: #111;
      color:#fff;

    }
	
/* ROOT */ 

:root{
  --bg:#f3f6f8;
  --card:#ffffff;

  --text:#1b2a35;
  --muted:#6b7c88;
  --line:#e7eef2;

  --brand:#2d96b1;
  --brand-2:#4bb0c8;
  --accent:#f39c12;

  --shadow: 0 14px 34px rgba(14, 33, 43, .03);
  --shadow-soft: 0 10px 22px rgba(14, 33, 43, .06);

  --radius: 14px;
  --radius-sm: 12px;

  --container: 1120px;
  --hl: rgba(45, 150, 177, .12);
}

/* СТИЛИ Шапки */ 

.h-fixed {
	background: rgba(20, 31, 38, 0.4); 
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid #334554;
	font-family: Open Sans, sans-serif;
    position: fixed;
    z-index: 1001;
    top: 30px;
    width: 100%;
    padding: 10px 0;
    color: #fff;
}

.top_header {
    background-color: #273a49;
}

#massangers-container {
    margin-top: 0px;
}

.h-fixed_massangers {
    display: flex;
    flex-direction: row;
    align-items: end;
    margin-right: -20px;
}

.fix-menus-vivoz:before {
    content: "";
    -webkit-mask: none;
    background-image: url(/assets/redesign/img/header-1.png);
    background-size: contain;
    background-color: inherit;
    background-repeat: no-repeat;
  background-position: #center center;
    width: 25px;
    height: 25px;
    display: block;
    position: absolute;
    left: -34px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-mask-size: cover;
}

.fix-menus-price:before {
    content: "";
    -webkit-mask: none;
    background-image: url(/assets/redesign/img/header-2.png);
    background-size: contain;
    background-color: inherit;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    display: block;
    position: absolute;
    left: -34px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-mask-size: cover;
}

.fix-menus-vivoz:hover {
    color: #ff8d00;
}

.top-menu {
	background: rgba(34, 159, 186, 0.7); 
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	line-height: 57px;
	border-top: 1px #7bb0bf solid;
	border-bottom: 1px #d0d6dc solid;
}

.header-design {
	background-image: url(/assets/redesign/img/header.jpg);
	position: relative;
    background-color: inherit;
    background-repeat: no-repeat;
   background-position: center center;
    background-color: #0d1a22;

}
	
.header-design a:focus, .header-design a:hover {     color: #cedbe7;     text-decoration: underline; }
	
.main-page	{
	position: relative;
}

.left-sidebar 	{
	position: relative;
}



.top-baner, .top-menu_item__top>.top-menu_link, .top-menu_item__top>.top-menu_link {
    background: none;
}
    
.justify-content-end {
    display: flex;
    justify-content: flex-end;
}
    
.top-baner {
    margin-top: 30px !important;
        padding-top: 80px;
}

.h-btm-prices {
  position: relative;
  padding: 24px;
  color: #fff;

  /* форма */
  clip-path: polygon(
    0 var(--cut),
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );

  overflow: hidden; /* важно, чтобы фон/блюр не вылезал за скосы */
}


.h-btm-prices::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(20,31,38,.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index:0;
}

.h-btm-prices > *{ position: relative; z-index: 1; }




    .top-menu_item__top ul .top-menu_link {
        border: none !important;
        background: none  !important;
    }
    
    .top-menu_item__top ul ul .top-menu_item>.top-menu_link {
        color: #fff !important;
    }
    
    .top-menu_link {
        font-size: 14px  !important;
        padding: 6px 40px 6px 23px;
        white-space: nowrap;
    }
    
    .top-menu_item__top ul .top-menu_link {
    color: #fff;
}
    
    .top-menu_item:hover>ul, .top-menu_item:hover>ul>li.top-menu_item__hiden>ul {
        display: inline-block;
        background: rgba(11, 51, 68, 0.9);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(32px);
            line-height: 20px;

    }
    
        .top-menu_item__folder:after, .top-menu_item__top>ul .top-menu_folder-marker {
        color: #fff;
    }
    
        .top-menu_item__top>ul>.top-menu_item:before {
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
        height: 1px;
        content: "";
        -webkit-transform: scaleX(.85);
        transform: scaleX(.85);
        background-color: #2c5669;
    }








.price-box{
  --skew: clamp(24px, 6vw, 72px); /* размер “скоса” боковых граней */
  position: relative;
  padding: 28px 32px;
  color: #fff;

  /* форма как на картинке */
  clip-path: polygon(
    var(--skew) 0,
    100% 0,
    calc(100% - var(--skew)) 100%,
    0 100%
  );

  overflow: hidden; /* чтобы фон/блюр не вылезал за грани */
}

/* подложка + блюр (если нужен эффект стекла) */
.price-box::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(20,31,38,.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index:0;
}



.h-btm-prices-lists, .aside-menu {
    border: none;
}
    
    
.h-btm-prices_t, .h-btm-prices-list, .h-btm-prices_note, .h-btm-prices_date {
    color: #FFF;
}

.price-box > * {
    position: relative;
    z-index: 1;
    display: flex;
    width: auto;
    justify-content: center;
}

.h-btm-prices_all {
    font-size: 16px;
    font-weight: 400;
    width: max-content !important;
    margin: 0 auto;
    padding: 7px 20px;
    color: #3090a6;
    border-radius: 5px;
    background: linear-gradient(to top, #f8f4f1 0%, #cee7dc 100%);
}

.top-menu_item__top:first-of-type>.top-menu_link {
	background: none !important;
}
    
    
/* СТИЛИ САЙДБАРА */    
    
.aside-menu_link {
    font-size: 16px;
    font-weight: 400;
    position: relative;
    display: block;
    padding: 16px 0px 16px 78px;
    color: #067ca8;
    align-items: center;
}

.aside-menu_link a {
    font-size: 16px;
    font-weight: 400;
    color: #067ca8 !important;
}
.aside-menu_li:after {
    display: none;
}    
.aside-menu_li {
    margin-bottom: 21px;
}
.aside-menu_item-icon {
    position: relative;
    flex-direction: row;
    display: inline-flex;
    width: 64px;
    height: 64px;
    /* margin-top: -17px; */
    margin-right: 21px;
    line-height: 14px;
    align-items: center;
}
.aside-menu_link {
    font-size: 16px;
    display: flex;
    font-weight: 400;
    padding: 0px;
    color: #067ca8;
}
/* Второй блок */

.aside-baner {
    background: linear-gradient(45deg, #5ab9c4 0%, #298aa2 100%);
    -webkit-box-shadow: none;
    box-shadow: none
}

.aside-baner_btn {
    font-size: 16px;
    font-weight: 400;
    width: max-content !important;
    margin: 0 auto;
    padding: 7px 20px;
    color: #3090a6;
    border-radius: 5px;
    background: linear-gradient(to top, #f8f4f1 0%, #cee7dc 100%);
}

/* Третий блок */

.aside-algorithm_msg, .aside-algorithm_order {
    border: none;
    border-radius: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: 42px;
    padding: 0px 0px 0px 0px;
}

.aside-algorithm_number-frame {
    display: none;
}

.aside-algorithm_t {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
}

.aside-algorithm_item {
    padding: 12px 0;
    border-bottom: none;
}

.aside-algorithm-list_tx {
    font-size: 14px;
    font-weight: 400;
    color: #308193;
}

.aside-algorithm_icon {
    width: 64px;
    height: auto;
    margin-right: 21px;
}

/* Четвертый блок */

.aside-algorithm_msg {
    border: none;
    border-radius: 7px;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: 42px;
    padding: 10px;
    background: linear-gradient(45deg, #f8f4f1 0%, #cee7dc 100%);
}

.aside-algorithm_msg-text {
    font-size: 16px;
    font-weight: 700;
    margin-top: 20px;
    padding: 0 10px;
    text-align: center;
    color: #2c8ca4;
}

.aside-algorithm_msg-notice {
    font-size: 11px;
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #507b63;
}

.aside-algorithm_msg-btn {
    font-size: 14px;
    display: inline-block;
    margin-top: 19px;
    padding: 8px 20px;
    color: #fff;
    border: none;
    border-radius: 5px;
    background: linear-gradient(to right, #5ab9c4 0%, #298aa2 100%);
}

/* СТИЛИ ПОДВАЛА */  

footer {
    margin-top: 42px;
    background: #3e4e59;
}

    .f-info:before {
        display: none;
    }
    
.f-map{
  padding: 0;
  position: relative;
  overflow: hidden; /* чтобы оверлей не выходил за блок */
}

.f-map #map {
    height: 396px;
}

/* левый и правый плавный затемняющий градиент */
.f-map::before,
.f-map::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33%;              /* ширина плавного перехода, подберите */
  pointer-events: none;    /* чтобы карта оставалась кликабельной */
  z-index: 10;             /* выше карты */
}

.f-map::before{
  left: 0;
  background: linear-gradient(to right,
    #3e4e59 0%,
    rgba(62,78,89,0.0) 100%
  );
}

.f-map::after{
  right: 0;
  background: linear-gradient(to left,
    #3e4e59 0%,
    rgba(62,78,89,0.0) 100%
  );
}


.f-map {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  height: 100%;
  min-height: 396px; /* подстрахуйте на мобиле/когда мало контента */
}

/* iframe — на всю высоту контейнера */
.f-map > iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.f-info {
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 17px;
    padding: 20px 0;
    text-align: center;
}

.f-info_t {
    font-size: 32px;
    line-height: 25px;
    font-weight: 700;
}

.f-info_tx p {
    font-size: 17px;
    font-weight: 400;
    margin-top: 1em;
}

.f-info_bc {
    font-size: 16px;
    font-weight: 400;
    padding: 7px 25px;
    color: #fffefe;
    border: 1px solid #ffaa23;
    border-radius: 5px;
    width: max-content !important;
}


.f-menu {
    padding: 21px 0;
    		background-image: url(/assets/redesign/img/footer.png);
    		background-size: cover;
}

.footer-tel {
    display: flex;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 21px;
}

.footer-tel a {
    color: #fff;
    font-size: 21px;
    font-weight: 700;
}

.copyright {
    z-index: 200;
    padding: 3px 0;
    border-top: 1px solid #3e4e59;
    background: none;
}

.f-menu_menus-list>.f-menu_menu-item>.f-menu_menu-link {
    font-size: 18px;
    font-weight: 700;
    color: #d4f5fd;
}
    
.f-menu_menu-link {
    font-size: 14px;
    color: #d4f5fd;
}

/* СТИЛИ ГЛАВОНЙ СТРАНИЦЫ */    


    /* ===== Tabs ===== */
    .tabs{
      border-radius: 12px;
      overflow:hidden;
      border:1px solid var(--line);
      background:#fff;
    }
    .tabbar{
      display:flex;
      gap:0;
      background: #f6fbfd;
      border-bottom:1px solid var(--line);
    }
    .tab{
      flex:1;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 10px;
      border:0;
      background:transparent;
      color: var(--muted);
      cursor:pointer;
      font-weight:600;
      letter-spacing:.2px;
      transition: background .18s ease, color .18s ease;
      position:relative;
    }

    /* 2) Точки в табах как в макете */
    .tab-dot{
      width:10px;
      height:10px;
      border-radius:999px;
      border:2px solid rgba(45,150,177,.45);
      background: transparent;
      flex: 0 0 10px;
    }
    .tab:hover .tab-dot{border-color: rgba(45,150,177,.75)}
    .tab[aria-selected="true"] .tab-dot{background: var(--brand); border-color: var(--brand)}

    .tab:hover{background: rgba(45,150,177,.06); color:#2a6e85}
    .tab[aria-selected="true"]{
      color:#1f5f73;
      background:#fff;
    }
    .tab[aria-selected="true"]::after{
      content:"";
      position:absolute;
      left:16px; right:16px; bottom:-1px;
      height:3px;
      border-radius:3px 3px 0 0;
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
    }
    .tabpanel{display:none; padding:16px}
    .tabpanel.is-active{display:block}

    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:6px 10px;
      border-radius:999px;
      background: #f1f7fa;
      color:#2a6e85;
      border: 1px solid rgba(45,150,177,.18);
      font-weight:600;
    }

    /* ===== Layout blocks ===== */

    /* Блок руководителя (отдельно, на всю ширину) */
    .leader{padding:18px}
    .leader-grid{
      display:grid;
      grid-template-columns: 220px 1fr;
      gap: 14px;
      align-items:center;
    }

    /* Аватар: отдельно от цитаты, расположен сбоку от треугольника */
    .leader-left{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height: 220px;
      padding: 10px;
    }
    .avatar{
      position:relative;
    }
    .worker {
      background-image: url(/assets/redesign/img/avatar-2.png);
      background-size: contain;
      background-color: inherit;
      background-repeat: no-repeat;
    }
    .user {
      background-image: url(/assets/redesign/img/avatar-1.png);
      background-size: contain;
      background-color: inherit;
      background-repeat: no-repeat;
    }

    .leader-right{padding:0; border:0; background:transparent}

    /* Цитата: все активные элементы внутри цитаты */
    .speech{
      margin: 0;
      padding: 26px 26px;
      border-radius: 12px;
      background: #ffffff;
      border: 1px solid rgba(45,150,177,.22);
      position:relative;
      box-shadow: 0 12px 26px rgba(14,33,43,.06);
    }
    .speech::before{
      content:"";
      position:absolute;
      left:-11px;
      top:50%;
      width: 20px;
      height: 20px;
      background:#ffffff;
      border-left:1px solid rgba(45,150,177,.22);
      border-bottom:1px solid rgba(45,150,177,.22);
      transform: translateY(-50%) rotate(45deg);
    }

    .speech-content{
      color: var(--text);
      font-size: 15px;
      line-height: 1.65;
    }
    .speech-content b{color:#111; font-weight:900}

    .speech-meta{
      margin-top: 18px;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 16px;
    }
    .speech-role{
      font-weight:900;
      color:#111;
      letter-spacing:.2px;
    }

    .sign{
      font-family: "Brush Script MT", "Segoe Script", cursive;
      font-size: 30px;
      color:#2a6e85;
      opacity:.95;
      transform: rotate(-2deg);
      user-select:none;
      white-space:nowrap;
      position:relative;
      padding-bottom: 6px;
    }
    .sign::after{
      content:"";
      position:absolute;
      left: 6px;
      right: 6px;
      bottom: 2px;
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, #ffb14a, var(--accent));
      opacity: .95;
    }

    .speech-cta{margin-top:16px}
    .speech-cta .btn{height:44px; padding:0 18px; border-radius:10px}

    /* Блок табов: отдельным блоком, на всю ширину */
    .about-tabs-block{margin-top:14px; padding:0}
    .about-tabs-block .tabs{width:100%; border:0}

    /* Tab panel content (top tabs) */
    .info-grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 14px;
      align-items:start;
    }
    .info-text{color:var(--muted)}
    .info-media{
      border-radius: 12px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(45,150,177,.08), rgba(45,150,177,.02));
      min-height: 170px;
      position:relative;
      overflow:hidden;
    }
    .info-media::after{
      content:"Изображение / схема";
      position:absolute;
      left:12px; bottom:10px;
      font-size:12px;
      color: rgba(27,42,53,.45);
    }

    .mini-cards{
      margin-top: 14px;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .mini{
      padding: 12px;
      border-radius: 12px;
      border:1px solid var(--line);
      background:#fff;
    }
    .mini .t{font-weight:700; color:#2a6e85; font-size:12px; text-transform:uppercase; letter-spacing:.35px}
    .mini .d{margin-top:8px; color:var(--muted); font-size:12.5px}

    /* Advantages */
    .advantages{padding: 18px
	
	-webkit-box-shadow: none;
    box-shadow:none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 30px 0;
    border-radius: none;
    background: none;
	}
    .adv-list{
      display: flex;
      flex-direction: column;
      gap: 21px
      
    }
    .adv-item{
      display: flex;
      flex-direction: row;
	  align-items: center;
      gap: 21px;
    }
    .adv-ico{
      width:200px; height:auto;
      display: flex;
      align-items: center;
      justify-content: center;
      display: none;
    }
    
    .adv-ico img {
      max-width: 90%;
      max-height: auto;
    }
    
    .adv-newtext {
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
    
    .adv-item .h{margin:0; font-weight:800; color:#2a6e85}
    .adv-item .p{margin:4px 0 0; color:var(--muted)}

    /* Offer */
    .offer{padding: 21px 0px}
    .offer-grid{display:grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items:center}
    .offer-title{margin:0; font-size:18px; color:#2a6e85}
    .offer-text{margin:8px 0 0; color:var(--muted)}
    .offer-actions{margin-top:14px; display:flex; gap:12px; flex-wrap:wrap}
    .offer-media{
      border-radius: 14px;
      display: flex;
      justify-content: center;
      min-height: 140px;
      position:relative;
      overflow:hidden;
    }

    /* Gallery */
    .gallery{padding: 0px}
    .gallery-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      padding: 21px 0px;
    }
    .ph{
      border-radius: 12px;
      border:1px solid var(--line);
      background: linear-gradient(180deg, rgba(45,150,177,.06), rgba(45,150,177,.02));
      min-height: 132px;
      position:relative;
      overflow:hidden;
    }
    .gallery-grid .ph:nth-child(4){grid-column: 1 / span 2}

    /* Photo evaluation */
    .photo-eval{padding: 18px}
    .form{
      margin-top: 10px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: #fff;
      overflow:hidden;
    }
    .form-body{padding: 14px}
    .fields{display:grid; grid-template-columns: 1fr 1fr; gap: 10px}
    .field{display:flex; flex-direction:column; gap:6px}
    .label{font-size:12px; color:#2a6e85; font-weight:700}
    .control{
      height:40px;
      padding: 0 12px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: #fbfeff;
      outline: none;
      transition: box-shadow .18s ease, border-color .18s ease;
    }
    .control:focus{
      border-color: rgba(45,150,177,.45);
      box-shadow: 0 0 0 4px var(--hl);
      background:#fff;
    }
    .chips{display:flex; gap:8px; flex-wrap:wrap}
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 10px;
      border-radius:999px;
      border: 1px solid var(--line);
      background:#fff;
      cursor:pointer;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
      user-select:none;
    }
    .chip:hover{border-color: rgba(45,150,177,.35); box-shadow: 0 10px 16px rgba(14,33,43,.05)}
    .chip input{margin:0}
    .form-actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top: 12px; flex-wrap:wrap}
    .add-row{
      color:#2a6e85;
      font-weight:700;
      border-bottom: 1px dashed rgba(45,150,177,.45);
      padding-bottom:1px;
      transition: color .18s ease;
    }
    .add-row:hover{color:#1f5f73}

    /* Telegram */
    .telegram{
      padding: 16px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 16px;
      background: linear-gradient(90deg, rgba(45,150,177,.12), rgba(45,150,177,.02));
      border:1px solid rgba(45,150,177,.18);
    }
    .tg-left{display:flex; align-items:center; gap:12px}
    .tg-ico{
      width:86px; height:86px;
      display: flex;
      position:relative;
    }
    .tg-ico::after{
      content:"✈";
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:20px;
      color:#1f5f73;
      opacity:.9;
    }
    .tg-title{margin:0; font-weight:900; font-size:15px}
    .tg-text{margin:2px 0 0; color:var(--muted)}

    /* Calculator */
    .calc{padding: 21px 0px}
    .calc-grid{display:grid; grid-template-columns: 1.4fr .6fr; gap: 14px; align-items:start}
    .calc-price{
      border-radius: 14px;
      border:1px solid var(--line);
      background:#fff;
      padding: 14px;
    }
    .calc-price .k{font-size:12px; color:var(--muted)}
    .calc-price .v{font-size:22px; font-weight:950; margin-top:6px}

    /* Contacts */
    .contacts{padding: 18px}
    .map{
      margin-top: 12px;
      border-radius: 14px;
      overflow:hidden;
      border: 1px solid var(--line);
      background:#fff;
      min-height: 390px;
      position:relative;
    }
    .map iframe{width:100%; height:260px; border:0; display:block}
    .map-fallback{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      color: rgba(27,42,53,.55);
      font-weight:700;
      pointer-events:none;
    }
    .contact-info{margin-top:12px; display:grid; grid-template-columns: 1fr 1fr; gap: 12px}
    .ci{padding:12px; border-radius: 12px; border:1px solid var(--line); background:#fff}
    .ci b{color:#2a6e85}
    .ci p{margin:6px 0 0; color:var(--muted)}

    /* Footer spacing */
    .spacer{height: 8px}

    
/* СТИЛИ СТРАНИЦЫ СОТРУДНИЧЕСТВА */    	


    /* ===== Layout blocks ===== */

   

    /* Блок табов: отдельным блоком, на всю ширину */
    .about-tabs-block{margin-top:14px; padding:0}
    .about-tabs-block .tabs{width:100%; border:0}

    /* Tab panel content (top tabs) */
    .info-grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 14px;
      align-items:start;
    }
    .info-text{color:var(--muted)}
    .info-media{
      border-radius: 12px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(45,150,177,.08), rgba(45,150,177,.02));
      min-height: 170px;
      position:relative;
      overflow:hidden;
    }
    .info-media::after{
      content:"Изображение / схема";
      position:absolute;
      left:12px; bottom:10px;
      font-size:12px;
      color: rgba(27,42,53,.45);
    }

    .mini-cards{
      margin-top: 14px;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .mini{
      padding: 12px;
      border-radius: 12px;
      border:1px solid var(--line);
      background:#fff;
    }
    .mini .t{font-weight:700; color:#2a6e85; font-size:12px; text-transform:uppercase; letter-spacing:.35px}
    .mini .d{margin-top:8px; color:var(--muted); font-size:12.5px}

    

    /* Footer spacing */
    .spacer{height: 8px}

    /* ===== Collaboration page ===== */
    .lead{
      margin: 0 0 14px;
      color: var(--muted);
      max-width: 920px;
      color: #000000;
      font-size: 16px;
      line-height: 21px;
    }

    .stat-row{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 14px;
      align-items:stretch;
    }
    .stat-big{
      border: 1px solid var(--line);
      background: linear-gradient(90deg, rgba(45,150,177,.10), rgba(45,150,177,.04));
      min-height: 165px;
      position:relative;
      overflow:hidden;
	        border-radius: var(--radius-sm);
    }
    .stat-big::after{
      content:">70%";
      position:absolute;
      left: 25%;
      top: 50%;
      transform: translateY(-50%);
      font-weight: 950;
      font-size: 84px;
      letter-spacing: -1px;
      color: rgba(45,150,177,.40);
      white-space:nowrap;
    }
    .stat-note{
	  background: #f2fafc;
	  padding: 21px;
	  display: flex;
	  align-items: center;
	  color: var(--muted);
	  border-radius: var(--radius-sm);
	}

	/* каждый второй, начиная со 2-го */
	.stat-note:nth-child(even){
	  background: #f8f8f8;
	}

	/* исключение: второй тоже оставляем #f2fafc (первые два одинаковые) */
	.stat-note:nth-child(2){
	  background: #f2fafc;
	}
	
    .stat-note b{color:#244554}

    .segments{
      margin-top: 14px;
      display:grid;
	  color: #525252;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
	
	.segments > *:nth-child(even){
		  background: #f2fafc;
	}

    .seg{
      padding: 14px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--line);
      background: #fff;
    }
    .seg h3{
      margin:0;
      font-size: 13px;
      color:#2a6e85;
      font-weight: 900;
      letter-spacing:.25px;
      text-transform:none;
    }
    .seg p{
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 12.8px;
      line-height: 1.6;
    }

    .adv-business .adv-ico{}

    .request{}
    .request-title{
      margin: 0 0 12px;
      font-size: 20px;
      color:#2a6e85;
      font-weight: 950;
      text-align:center;
    }
    .request-box{
      border-radius: 14px;
      border:1px solid var(--line);
      background: none;
      padding: 14px;
    }
    .request-fields{display:grid; grid-template-columns: 1fr 1fr; gap: 10px}
    .request-fields .field{margin:0}

    .row-2{
      display:grid;
      grid-template-columns: 1.35fr .65fr;
      gap: 10px;
    }

    .chips-rect{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .chip-rect{
      height: 42px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: #ffffff;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      color:#244554;
      cursor:pointer;
      user-select:none;
      transition: border-color .18s ease, box-shadow .18s ease;
      font-weight:700;
    }
    .chip-rect:hover{border-color: rgba(45,150,177,.35); box-shadow: 0 10px 16px rgba(14,33,43,.05)}
    .chip-rect input{position:absolute; opacity:0; pointer-events:none}
    .chip-rect.is-on{border-color: rgba(45,150,177,.50); box-shadow: 0 0 0 4px var(--hl)}

    .request-actions{
      margin-top: 14px;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap: 12px;
      flex-wrap:wrap;
    }

    /* ===== Responsive ===== */
    @media (max-width: 980px){
      .info-grid{grid-template-columns: 1fr;}
      .mini-cards{grid-template-columns: 1fr;}
      .offer-grid{grid-template-columns: 1fr;}
      .fields{grid-template-columns: 1fr}
      .calc-grid{grid-template-columns: 1fr}
      .contact-info{grid-template-columns: 1fr} 
      .segments, .request-fields, .row-2  {grid-template-columns: 1fr} 
    }

    @media (max-width: 520px){
      .wrap{padding: 18px 10px 44px}
      .section-title{font-size:20px}
      .tab{justify-content:flex-start; padding:12px 12px}
      .about-actions{flex-direction:column; align-items:flex-start}
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{transition:none !important; scroll-behavior:auto !important}
    }
	
	/* СТИЛИ СТРАНИЦЫ ДЕМОНТАЖА */   
	




   

 

    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:6px 10px;
      border-radius:999px;
      background: #f1f7fa;
      color:#2a6e85;
      border: 1px solid rgba(45,150,177,.18);
      font-weight:600;
    }

    /* ===== Layout blocks ===== */

    

   

    

    /* ===== Demolition page ===== */
    .hero{padding:18px}
    .hero-box{
      border-radius: 14px;
      border: 1px solid var(--line);
      background: #fbfeff;
      padding: 14px;
      display:grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items:center;
    }
    .hero-box .k{color: var(--muted); font-size: 13px}
    .hero-box .k b{color:#2a6e85}
    .hero-box .s{margin-top:6px; color:#2a6e85; font-weight:800; font-size:12px}

    .reasons{padding:18px 0px}
    .reasons .adv-ico{}

    .steps{padding:0px}
    .steps-wrap{
      border-radius: 14px;
      border: 1px solid var(--line);
      background: #fff;
      padding: 14px;
      position:relative;
    }

    /* Схема порядка работ как в макете (2 колонки + стрелки + скобки) */
    .flow{
      position:relative;
      display:grid;
      grid-template-columns: 1fr 78px 1fr;
      gap: 12px 12px;
      align-items:start;
    }
    .flow-row{display:contents}

    .flow-step{
      display:grid;
      grid-template-columns: 54px 1fr;
      gap: 12px;
      align-items:start;
      padding: 10px 6px;
    }
    .flow-num{
      font-weight: 950;
      font-size: 44px;
      line-height: 1;
      color: var(--brand);
      letter-spacing: -1px;
      text-align:left;
    }
    .flow-text{margin:0; font-weight:900; color:#111; line-height:1.15}
    .flow-sub{margin:4px 0 0; color: var(--muted); font-size: 12.8px; line-height:1.45}

    .flow-mid{
      position:relative;
      min-height: 66px;
      align-self:stretch;
    }
    .flow-mid::before{
      content:"";
      position:absolute;
      left: 10px;
      right: 10px;
      top: 50%;
      height: 0;
      border-top: 4px solid rgba(27,42,53,.78);
      transform: translateY(-50%);
      border-radius: 8px;
      opacity:.9;
    }
    .flow-mid::after{
      content:"";
      position:absolute;
      top: 50%;
      width: 0;
      height: 0;
      border-top: 9px solid transparent;
      border-bottom: 9px solid transparent;
      transform: translateY(-50%);
      opacity:.9;
    }
    .dir-right .flow-mid::after{
      right: 6px;
      border-left: 12px solid rgba(27,42,53,.78);
    }
    .dir-left .flow-mid::after{
      left: 6px;
      border-right: 12px solid rgba(27,42,53,.78);
    }

    /* Скобки-группировки (приближенно к макету) */
    .brace{
      position:absolute;
      width: 20px;
      border-right: 6px solid rgba(27,42,53,.78);
      border-top: 6px solid rgba(27,42,53,.78);
      border-bottom: 6px solid rgba(27,42,53,.78);
      border-radius: 18px;
      opacity:.9;
      pointer-events:none;
    }
    .brace.right{right: -6px}
    .brace.left{left: -6px; transform: scaleX(-1)}

    /* 4-5 слева */
    .brace.l45{top: 78px; height: 132px}
    /* 2-3 справа */
    .brace.r23{top: 6px; height: 132px}
    /* 6-7 справа */
    .brace.r67{top: 216px; height: 132px}

    .steps-actions{margin-top:14px}

    .price{padding:0px}
    .price p{ color:var(--muted)}
    .tbl{
      margin-top: 12px;
      width:100%;
      border-collapse: collapse;
      overflow:hidden;
      border: 1px solid var(--line);
      background:#fff;
    }
    .tbl th, .tbl td{padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px}
    .tbl th{background:#f6fbfd; color:#2a6e85; text-align:left; font-weight:900}
    .tbl td:last-child{text-align:right; font-weight:800; color:#244554}
    .tbl tr:last-child td{border-bottom:0}

    .service-cards{padding:0px}
    .service-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px}
    .tile{
      overflow:hidden;
    }
    .tile .ph{min-height: 118px; border:0; border-radius:0}
    .tile a{display:block; padding: 10px 12px; color:#2a6e85; font-weight:900; text-align:center}
    .tile a:hover{text-decoration: underline}

    .other{padding:18px; }
    .other ul{margin: 10px 0 0; margin-bottom: 21px; padding-left: 18px; color: var(--muted)}
    .share{
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      flex-wrap:wrap;
      color: var(--muted);
      font-size: 13px;
    }
    .share-icons{display:flex; gap:10px; align-items:center}
    .ico{
      width: 28px;
      height: 28px;
      border-radius: 10px;
      border:1px solid var(--line);
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      color:#89a3af;
    }


   

    /* ===== Responsive ===== */
    @media (max-width: 980px){
      .flow{grid-template-columns: 1fr;}
      .flow-mid{display:none}
      .brace{display:none}
      .flow-step{padding: 10px 2px}


      .info-grid{grid-template-columns: 1fr;}
      .mini-cards{grid-template-columns: 1fr;}
      .offer-grid{grid-template-columns: 1fr;}
      .fields{grid-template-columns: 1fr}
      .calc-grid{grid-template-columns: 1fr}
      .contact-info{grid-template-columns: 1fr}
    }

    @media (max-width: 520px){
      .wrap{padding: 18px 10px 44px}
      .section-title{font-size:20px}
      .tab{justify-content:flex-start; padding:12px 12px}
      .about-actions{flex-direction:column; align-items:flex-start}
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{transition:none !important; scroll-behavior:auto !important}
    }
	
/* СТИЛИ Приёма Чермета  */ 	

    /* ===== Block "Рассчитать цену приема металлолома" (как в макете) ===== */
    .bmcalc{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      align-items:start;
    }
    .bmcalc-left{
      border-radius: 14px;
      overflow:hidden;
      border: 1px solid #d9ebf2;
      background: #eaf6fa;
    }
    .bmcalc-cap{
      padding: 18px 18px;
      background: #e2f0f3;
      color: rgba(27,42,53,.45);
      font-weight: 700;
      font-size: 18px;
	  color: #799ca3;
    }
    .bmcalc-body{padding: 18px}
    .bmcalc-stack{display:grid; gap: 14px}

    /* Поля как "блок данных" */
    .bmfield{
      height: 56px;
      border-radius: 12px;
      border: 1px solid #cfe6ee;
      background: rgba(255,255,255,.35);
      padding: 0 16px;
      color: rgba(27,42,53,.45);
      
      outline: none;
      width: 100%;
      appearance: none;
    }
    .bmfield::placeholder{color: rgba(27,42,53,.35)}
    select.bmfield{background-image: linear-gradient(45deg, transparent 50%, rgba(27,42,53,.35) 50%), linear-gradient(135deg, rgba(27,42,53,.35) 50%, transparent 50%);
      background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
      background-size: 6px 6px, 6px 6px;
      background-repeat: no-repeat;
    }
    .bmfield:focus{border-color: rgba(45,150,177,.45); box-shadow: 0 0 0 4px var(--hl); background:#fff}

    .bmnote{margin-top:-6px; color: rgba(45,150,177,.70); font-weight:800}

    .bmrow{display:flex; gap: 26px; align-items:center; flex-wrap:wrap; padding: 4px 2px}
    .bmr{
      display:inline-flex;
      align-items:center;
      gap: 12px;
      color: rgba(45,150,177,.75);
      
      user-select:none;
      cursor:pointer;
    }
    .bmr input{position:absolute; opacity:0; pointer-events:none}
    .bmr-dot{
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 2px solid #cfe6ee;
      background: transparent;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex: 0 0 18px;
    }
    .bmr.is-on .bmr-dot{border-color: rgba(45,150,177,.55)}
    .bmr.is-on .bmr-dot::after{
      content:"";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: rgba(45,150,177,.55);
    }

    .bmconsent{
      display:flex;
      align-items:center;
      gap: 12px;
      color: rgba(45,150,177,.70);
      
      margin-top: 2px;
    }
    .bmconsent .bmr-dot{width:18px; height:18px}

    .bmsubmit{
      height: 56px;
      border-radius: 12px;
      border: 0;
      background: #cfe9e8;
      color: rgba(45,150,177,.95);
      font-weight: 900;
      cursor:pointer;
      transition: filter .18s ease, transform .12s ease;
    }
    .bmsubmit:hover{filter: brightness(1.02)}
    .bmsubmit:active{transform: translateY(1px)}

    .bmcalc-right {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .bmcalc-right p{margin:0; color: #111; font-size: 16px; line-height: 1.35; font-weight: 700}
    .bmcalc-right .small{margin-top: 12px; color: var(--muted); font-size: 12.8px; line-height: 1.55; font-weight: 600}
    .bmcalc-actions{margin-top: 18px; display:grid; gap: 12px; max-width: 420px}
.bmbtn-outline {
    display: flex;
    height: 52px;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfe6ee;
    background: #fff;
    color: #2a6e85;
    font-weight: 900;
    cursor: pointer;
    transition: border-color .18s 
ease, box-shadow .18s 
ease;
}
    .bmbtn-outline:hover{border-color: rgba(45,150,177,.45); box-shadow: 0 12px 18px rgba(14,33,43,.06)}
    .bmlink{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height: 22px;
      color:#2a6e85;
      font-weight:900;
      border-bottom: 1px solid rgba(45,150,177,.25);
      width: fit-content;
    }
    .bmlink:hover{border-bottom-color: rgba(45,150,177,.55)}

    @media (max-width: 980px){
      .bmcalc{grid-template-columns: 1fr;}
      .bmcalc-right{padding: 0}
      .bmcalc-actions{max-width: none}
    }

    

    /* ===== Demolition page ===== */
    /* (оставлено для других страниц) */

    /* ===== Black metal page ===== */
    .hero-banner{
      border-radius: var(--radius);
      border:1px solid var(--line);
      overflow:hidden;
      background:
        radial-gradient(520px 320px at 70% 35%, rgba(45,150,177,.32), transparent 62%),
        radial-gradient(420px 260px at 40% 70%, rgba(243,156,18,.18), transparent 62%),
        linear-gradient(180deg, #f6fbfd, #eef6f9);
      position:relative;
    }
    .hero-banner::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.86), rgba(255,255,255,.48) 48%, rgba(255,255,255,.18));
      pointer-events:none;
    }
    .hero-inner{
      position:relative;
      z-index:1;
      padding: 16px;
      display:grid;
      grid-template-columns: 320px 1fr;
      gap: 16px;
      align-items:stretch;
    }
   
    
    .hero-form .field {
      margin-bottom: 21px;
    }
    
    
    .hero-form .control{background:#fff}
    .hero-form .btn{width:100%}
    .hero-cta{

      display:flex;
      flex-direction:column;
      justify-content:flex-end;
    }
    .hero-cta .k{color:var(--muted); font-size:14px}
    .hero-cta .bar{
      margin-top: 10px;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid rgba(45,150,177,.18);
      background: #fff;
      display:flex;
      align-items:center;
      justify-content:space-between;
      font-size: 12px;
      flex-wrap:wrap;
    }
    .hero-cta .bar .phone{font-weight:950; color:#244554}
    .mini-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height: 34px;
      padding: 0 10px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background:#fff;
      color:#2a6e85;
      font-weight:700;
      transition: border-color .18s ease, box-shadow .18s ease;
      white-space:nowrap;
    }
    .mini-link:hover{border-color: rgba(45,150,177,.35); box-shadow: 0 10px 16px rgba(14,33,43,.05)}

    .subnav{
      margin-top: 10px;
      display:flex;
      gap: 14px;
      flex-wrap:wrap;
      color:#2a6e85;
      font-weight:700;
      font-size: 13px;
    }
    .subnav a{opacity:.9; border-bottom: 1px dashed rgba(45,150,177,.35)}
    .subnav a:hover{opacity:1; border-bottom-color: rgba(45,150,177,.65)}

    .content{
      display:grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .article{padding: 0px}
    .article h3{margin: 14px 0 6px; color:#2a6e85; font-size: 15px}
    .article p{margin: 0 0 10px;}

    .table-title{
      margin: 16px 0 10px;
      text-align:center;
      font-weight:950;
      color:#244554;
      line-height:1.2;
    }
    .table-title small{display:block; font-weight:800; color: var(--muted)}

    /* ===== Таблица цен (как в макете) ===== */
    .tbl{
      margin-top: 10px;
      width: 100%;
      border-collapse: collapse;
      background: transparent;
      border: 0;
    }

    /* Только горизонтальные линии, без карточной рамки */
    .tbl thead th{
      padding: 16px 12px;
      font-size: 14px;
      color:#2b3f4a;
      font-weight: 900;
      text-align:left;
      border-bottom: 1px solid #d9ebf2;
      vertical-align: top;
    }
    .tbl thead th:nth-child(2),
    .tbl thead th:nth-child(3){
      text-align:center;
    }
    .tbl thead tr:first-child th{
      border-top: 1px solid #d9ebf2;
    }
    .tbl thead th span{
      display:block;
      margin-top: 8px;
      font-size: 12.5px;
      
      color:#2b3f4a;
      opacity: .85;
    }

    .tbl tbody td{
      padding: 12px 12px;
      border-bottom: 1px solid #edf5f8;
      font-size: 14px;
      vertical-align: middle;
    }
    .tbl tbody td:first-child{
      color:#2b3f4a;
      
    }
    .tbl tbody td:not(:first-child){
      text-align:center;
      color: var(--brand);
      
      white-space: nowrap;
    }
    .tbl tbody tr:last-child td{border-bottom:0}

    .calc-block{padding: 18px}
    .calc-2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      align-items:start;
    }
    .calc-panel{
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fbfeff;
      padding: 12px;
    }
    .calc-panel .btn{width:100%}
    .calc-side{
      border: 1px solid var(--line);
      border-radius: 14px;
      background:#fff;
      padding: 12px;
    }
    .calc-side .k{margin:0; font-weight:950; color:#244554}
    .calc-side p{margin:8px 0 0; color: var(--muted); font-size:13px}
    .calc-side .actions{margin-top: 12px; display:grid; gap: 10px}

    .benefits{padding: 0px}
    .benefits-grid{
      margin-top: 8px;
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    .benefit{
      display:grid;
      grid-template-columns: 44px 1fr;
      gap: 12px;
      align-items:center;
      padding: 12px;
      background:#fff;
    }
    .benefit .ico{
      width:44px; height:44px;
      border-radius: 14px;
      border: 1px solid rgba(45,150,177,.22);
      background: linear-gradient(180deg, rgba(45,150,177,.16), rgba(45,150,177,.06));
      color:#2a6e85;
    }
    .benefit .t{margin:0; font-weight:900; color:#2a6e85}
    .benefit .d{margin:4px 0 0; color: var(--muted); font-size: 13px}

    .faqnew {padding: 18px 0px}
    .faq-list{margin-top: 10px; display:grid; gap: 10px}
    .faqnew details{
      border: 1px solid var(--line);
      border-radius: 14px;
      background:#fff;
      padding: 10px 12px;
    }
    .faqnew summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      font-weight:900;
      color:#244554;
    }
    .faqnew summary::-webkit-details-marker{display:none}
    .faqnew .ans{margin-top: 8px; color: var(--muted); font-size: 13px}
    .faqnew .plus{
      width: 26px; height: 26px;
      border-radius: 10px;
      border: 1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#2a6e85;
      font-weight:950;
      background:#fff;
      flex: 0 0 26px;
    }
    details[open] .plus{background: rgba(45,150,177,.08); border-color: rgba(45,150,177,.30)}

    .features{padding: 21px 0px}
    .photo-row{margin-top: 12px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px}
    .photo-row .ph{min-height: 112px}

    .reviews{padding: 18px}
    .review-card{
      margin-top: 10px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background:#fff;
      padding: 12px;
      max-width: 920px;
    }
    .review-card .name{font-weight:950; color:#244554}
    .review-card .role{margin-top:2px; color: var(--muted); font-size: 12px}
    .review-card p{margin: 10px 0 0; color: var(--muted)}

    /* ===== Reviews block (как в макете) ===== */
    .reviews-shell{
      background:#fff;
      text-align: justify;
      box-shadow: none;
    }
    .reviews-name{
      text-align:center;
      font-weight: 950;
      font-size: 22px;
      color:#244554;
      letter-spacing:.2px;
    }
    .reviews-grid{
      margin-top: 18px;
      display:grid;
      grid-template-columns: 180px 1fr;
      gap: 28px;
      align-items:start;
    }
    .reviews-ava{
      width: 150px;
      height: 150px;
      border-radius: 999px;
      background: #dceff4;
      margin-left: 12px;
    }
    .reviews-text{
      color:#264760;
      font-size: 16px;
    }
    .reviews-text b{font-weight: 950; color:#244554}
    .reviews-text p{margin: 0 0 14px}
    .reviews-text p:last-child{margin-bottom:0}

    .reviews-actions{
      margin-top: 22px;
      display:flex;
      justify-content:center;
    }
    .reviews-more{
      line-height: 54px;
      text-align: center;
      padding: 0 26px;
      min-width: 360px;
      max-width: 100%;
      border-radius: 12px;
      border: 1px solid #cfe6ee;
      background: #fff;
      color: #2a6e85;
      font-weight: 900;
      text-transform: lowercase;
      cursor:pointer;
      transition: border-color .18s ease, box-shadow .18s ease;
    }
    .reviews-more:hover{
      border-color: rgba(45,150,177,.45);
      box-shadow: 0 12px 18px rgba(14,33,43,.06);
    }

    @media (max-width: 980px){
      .reviews-grid{grid-template-columns: 1fr; justify-items:center; text-align:left}
      .reviews-ava{margin-left:0}
      .reviews-text{max-width: 760px}
    }


    /* ===== Responsive ===== */
    @media (max-width: 980px){
      .flow{grid-template-columns: 1fr;}
      .flow-mid{display:none}
      .brace{display:none}
      .flow-step{padding: 10px 2px}

      .info-grid{grid-template-columns: 1fr;}
      .mini-cards{grid-template-columns: 1fr;}
      .offer-grid{grid-template-columns: 1fr;}
      .fields{grid-template-columns: 1fr}
      .calc-grid{grid-template-columns: 1fr}
      .contact-info{grid-template-columns: 1fr}
    }

    @media (max-width: 520px){
      .wrap{padding: 18px 10px 44px}
      .section-title{font-size:20px}
      .tab{justify-content:flex-start; padding:12px 12px}
      .about-actions{flex-direction:column; align-items:flex-start}
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{transition:none !important; scroll-behavior:auto !important}
    }
	
	



    


    /* ===== Layout blocks ===== */

 
    

    /* ===== Demolition page ===== */
    /* (оставлено для других страниц) */

    /* ===== Black metal page ===== */
    /* (оставлено для других страниц) */

    /* ===== Export / Pickup page (Вывоз металлолома) ===== */
    .notice{
      margin-top: 12px;
      padding: 20px 22px;
      border-radius: 10px;
      background: #f7efd9;
      color: rgba(122,90,35,.72);
      font-weight: 950;
      font-size: 18px;
      letter-spacing: .2px;
      border: 1px solid rgba(215,196,153,.45);
    }

    .article.is-flat{box-shadow:none}

    /* Таблица цен вывоза (как в макете): плоская, без внешней рамки, с пунктирными разделителями */
    table.tbl.tbl-price{
      width: 100%;
      border-collapse: collapse;
      margin-top: 16px;
      background: transparent;
    }

    table.tbl.tbl-price thead th{
      padding: 14px 18px;
      font-size: 14px;
      font-weight: 900;
      color: #2a6e85;
      background: #f6fbfd;
      border-top: 1px solid #d9ebf2;
      border-bottom: 1px solid #d9ebf2;
      text-align:left;
    }
    table.tbl.tbl-price thead th:last-child{ text-align:right; }

    table.tbl.tbl-price tbody td{
      padding: 12px 18px;
      font-size: 13.5px;
      border-bottom: 1px dotted #d9ebf2;
    }
    table.tbl.tbl-price tbody td:first-child{
      color: #2a6e85;
      
    }
    table.tbl.tbl-price tbody td:last-child{
      text-align: right;
      color: #000;
      white-space: nowrap;
    }
    .tbl-price tbody td:first-child{
      color:#2a6e85;
      
    }
    .tbl-price tbody td:last-child{
      color:#111;
      font-weight: 900;
    }

/* Таблица цен вывоза (как в макете): плоская, без внешней рамки, с пунктирными разделителями */
   .post-body table{
      width: 100%;
      border-collapse: collapse;
      margin-top: 16px;
      background: transparent;
    }

    .post-body thead th{
      padding: 14px 18px;
      font-size: 14px;
      font-weight: 900;
      color: #2a6e85;
      background: #f6fbfd;
      border-top: 1px solid #d9ebf2;
      border-bottom: 1px solid #d9ebf2;
      text-align:left;
    }
    .post-body thead th:last-child{ text-align:right; }

    .post-body tbody td{
      padding: 12px 18px;
      font-size: 13.5px;
      border-bottom: 1px dotted #d9ebf2;
    }
   .post-body tbody td:first-child{
      color: #2a6e85;
      
    }
    .post-body tbody td:last-child{
      text-align: left;
      color: #000;
      white-space: nowrap;
    }
    .post-body tbody td:first-child{
      color:#2a6e85;
      
    }
   .post-body tbody td:last-child{
      color:#111;
      font-weight: 900;
    }
    
    .advnum{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 34px 26px;
      padding: 10px 6px 0;
    }
    .advnum-item{
    display: flex;
    justify-content: center;
    align-items: anchor-center;
      gap: 16px;
    }
    .advnum-item .n{
      font-size: 56px;
      line-height: 1;
      font-weight: 950;
      color: var(--brand);
      letter-spacing: -1px;
      min-width: 40px;
    }
    .advnum-item .t{
      color:#111;
      font-size: 16px;
      margin: auto;
    }

    .transport{
      margin-top: 14px;
      display:grid;
      gap: 24px;
    }
    .transport-row{
      display:grid;
      grid-template-columns: 360px 1fr;
      gap: 22px;
      align-items:center;
    }
    .transport-img{
      display: flex;
      justify-content: center;
      position:relative;
      overflow:hidden;
    }
  
    .transport-body p{
      margin: 0;
      color:#000;
      font-size: 16px;
      max-width: 520px;
    }
    .transport-actions{margin-top: 12px}




    @media (max-width: 980px){
      .advnum{grid-template-columns: 1fr}
      .transport-row{grid-template-columns: 1fr;}
      .transport-img{height: 160px}
    }

    /* ===== Responsive ===== */
    @media (max-width: 980px){
      .flow{grid-template-columns: 1fr;}
      .flow-mid{display:none}
      .brace{display:none}
      .flow-step{padding: 10px 2px}

      .info-grid{grid-template-columns: 1fr;}
      .mini-cards{grid-template-columns: 1fr;}
      .offer-grid{grid-template-columns: 1fr;}
      .fields{grid-template-columns: 1fr}
      .calc-grid{grid-template-columns: 1fr}
      .contact-info{grid-template-columns: 1fr}
    }

    @media (max-width: 520px){
      .wrap{padding: 18px 10px 44px}
      .section-title{font-size:20px}
      .tab{justify-content:flex-start; padding:12px 12px}
      .about-actions{flex-direction:column; align-items:flex-start}
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{transition:none !important; scroll-behavior:auto !important}
    }
	


    

    /* ===== Demolition page ===== */
    /* (оставлено для других страниц) */

    /* ===== Black metal page ===== */
    /* (оставлено для других страниц) */

    /* ===== Export / Pickup page (Вывоз металлолома) ===== */
    /* (оставлено для других страниц) */

    /* ===== Blog page (Сетка статей) ===== */
    .blog-hero{
      padding: 8px 0 0;
    }
    .blog-hero .section-title{font-size: 26px}
    .blog-lead{
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
      max-width: 980px;
    }

    .blog-cta{margin-top: 18px}
    .blog-cta .btn{
      height: 48px;
      min-width: 320px;
      border-radius: 12px;
      border-color: #cfe6ee;
      color: #2a6e85;
      font-weight: 900;
      background:#fff;
      box-shadow: none;
    }

    .posts{
      margin-top: 14px;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
    .post{
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
    .post-media{
      border-radius: 0;
      border: 1px solid var(--line);
      background:
        radial-gradient(160px 140px at 28% 30%, rgba(45,150,177,.18), transparent 60%),
        radial-gradient(200px 160px at 78% 72%, rgba(243,156,18,.10), transparent 60%),
        #f7fbfd;
      height: 170px;
      position:relative;
      overflow:hidden;
    }


    .post-title{
      margin: 0;
      color: var(--brand);
      font-weight: 900;
      font-size: 15px;
      line-height: 1.25;
    }
    .post-title a{color: inherit}
    .post-title a:hover{color:#1f5f73; text-decoration: underline}

    .post-cat{
      margin-top: 10px;
      display:flex;
      align-items:center;
      gap: 8px;
      color:#8aa0ad;
      
      font-size: 12.5px;
    }
    .post-cat .ico{
      width: 21px;
      height: 21px;
      border-radius: none;
      border: none;
      background:none;
      position:relative;
    }
    .post-cat .ico::after{
      content:"";
      position:absolute;
      inset: 3px;
      background-image: url(/assets/redesign/img/article-1.png);
      background-size: cover;
    }

    .post-excerpt{
      margin: 10px 0 0;
      color: #2b3f4a;
      font-size: 13.2px;
      line-height: 1.6;
      max-height: 64px;
      overflow:hidden;
    }

    .post-meta{
      margin-top: 12px;
      display:flex;
      justify-content:space-between;
      gap: 12px;
      color:#8aa0ad;
      
      font-size: 12px;
    }

    .pager{
      margin-top: 22px;
      display:flex;
      justify-content:center;
      gap: 18px;
      color:#b1c2cb;
      font-weight: 900;
      user-select:none;
    }
    .pager a{color: inherit}
    .pager a:hover{color:#7ea8b9}
    .pager .is-active{color:#2a6e85}

    @media (max-width: 980px){
      .blog-hero .section-title{font-size: 24px}
      .posts{grid-template-columns: repeat(2, 1fr)}
      .post-media{height: 160px}
      .blog-cta .btn{min-width: 0; width: 100%}
    }
    @media (max-width: 620px){
      .posts{grid-template-columns: 1fr}
      .post-media{height: 190px;
        background-repeat: no-repeat;
        background-size: cover;
        
        
      }
      .tags{gap: 10px 14px}
    }

    /* ===== Responsive ===== */
    @media (max-width: 980px){
      .flow{grid-template-columns: 1fr;}
      .flow-mid{display:none}
      .brace{display:none}
      .flow-step{padding: 10px 2px}


      .info-grid{grid-template-columns: 1fr;}
      .mini-cards{grid-template-columns: 1fr;}
      .offer-grid{grid-template-columns: 1fr;}
      .fields{grid-template-columns: 1fr}
      .calc-grid{grid-template-columns: 1fr}
      .contact-info{grid-template-columns: 1fr}
    }

    @media (max-width: 520px){
      .wrap{padding: 18px 10px 44px}
      .section-title{font-size:20px}
      .tab{justify-content:flex-start; padding:12px 12px}
      .about-actions{flex-direction:column; align-items:flex-start}
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{transition:none !important; scroll-behavior:auto !important}
    }
	
	
	/* ===== Примеры статей  ===== */
	
 

   

    /* ===== Demolition page ===== */
    /* (оставлено для других страниц) */

    /* ===== Black metal page ===== */
    /* (оставлено для других страниц) */

    /* ===== Export / Pickup page (Вывоз металлолома) ===== */
    /* (оставлено для других страниц) */

    /* ===== Blog page (Сетка статей) ===== */
    /* (оставлено для других страниц) */

    /* ===== Works page (Примеры работ) ===== */
    .works-hero{
      padding: 8px 0 0;
    }
    .works-hero .section-title{font-size: 26px}
    .works-lead{
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
      max-width: 980px;
    }

    .works-cta{margin-top: 18px}
    .works-cta .btn{
      height: 48px;
      min-width: 320px;
      border-radius: 12px;
      border-color: #cfe6ee;
      color: #2a6e85;
      font-weight: 900;
      background:#fff;
      box-shadow: none;
    }

    .tags{
      margin-top: 18px;
      display:flex;
      flex-wrap:wrap;
      gap: 10px 18px;
      align-items:center;
      padding-top: 10px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      color:#2a6e85;
      font-weight: 700;
      font-size: 13.5px;
      opacity: .35;
      transition: opacity .18s ease, color .18s ease;
      white-space: nowrap;
    }
    .tag .sym{
      font-weight: 950;
      letter-spacing: .2px;
      opacity: .55;
    }
    .tag:hover{opacity: .7}
    .tag.is-active{opacity: 1; color:#1f5f73}
    .tag.is-active .sym{opacity: 1}

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

    .work{
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .work-media{
      border: 1px solid var(--line);
      background:
        radial-gradient(160px 140px at 28% 30%, rgba(45,150,177,.18), transparent 60%),
        radial-gradient(200px 160px at 78% 72%, rgba(243,156,18,.10), transparent 60%),
        #f7fbfd;
      height: 170px;
      background-size: cover;
      position:relative;
      overflow:hidden;
    }
    .work-body{padding: 14px 2px 0}
    .work-title{
      margin: 0;
      color: var(--brand);
      font-weight: 900;
      font-size: 15px;
      line-height: 1.25;
    }
    .work-title a{color: inherit}
    .work-title a:hover{color:#1f5f73; text-decoration: underline}

    .work-meta{
      margin-top: 12px;
      display:grid;
      gap: 8px;
      color:#8aa0ad;
      
      font-size: 12.6px;
    }
    .work-row{display:flex; align-items:center; gap: 10px}

    .wico{
      width: 18px;
      height: 18px;
      position:relative;
      flex: 0 0 18px;
    }

    /* простые пиктограммы без внешних ассетов */

    .wico.pin::before{
      content:"";
      position:absolute;
      left: 0px; top: 0px;
      width: 18px; height: 18px;
	  background-image: url(/assets/redesign/img/article-2.png);
	  background-repeat: no-repeat;
	  background-size: contain;
    }

    .wico.weight::before{
      content:"";
      position:absolute;
      left: 0px; top: 0px;
      width: 18px; height: 18px;
	  background-image: url(/assets/redesign/img/article-3.png);
	  background-repeat: no-repeat;
	  background-size: contain;
    }
    .wico.truck::before{
      content:"";
      position:absolute;
      left: 0px; top: 0px;
      width: 18px; height: 18px;
	  background-image: url(/assets/redesign/img/article-5.png);
	  background-repeat: no-repeat;
	  background-size: contain;
    }
    .wico.user-2::before{
      content:"";
      position:absolute;
      left: 0px; top: 0px;
      width: 18px; height: 18px;
	  background-image: url(/assets/redesign/img/article-4.png);
	  background-repeat: no-repeat;
	  background-size: contain;
    }

    .work-notes{
      margin-top: 14px;
      color:#111;
      font-size: 12.8px;
      line-height: 1.5;
    }

    .pager{
      margin-top: 22px;
      display:flex;
      justify-content:center;
      gap: 18px;
      color:#b1c2cb;
      font-weight: 900;
      user-select:none;
    }
    .pager a{color: inherit}
    .pager a:hover{color:#7ea8b9}
    .pager .is-active{color:#2a6e85}

    @media (max-width: 980px){
      .works-hero .section-title{font-size: 24px}
      .works{grid-template-columns: repeat(2, 1fr)}
      .work-media{height: 160px}
      .works-cta .btn{min-width: 0; width: 100%}
    }
    @media (max-width: 620px){
      .works{grid-template-columns: 1fr}
      .work-media{height: 190px}
      .tags{gap: 10px 14px}
    }

    /* ===== Responsive ===== */
    @media (max-width: 980px){
      .flow{grid-template-columns: 1fr;}
      .flow-mid{display:none}
      .brace{display:none}
      .flow-step{padding: 10px 2px}
      .info-grid{grid-template-columns: 1fr;}
      .mini-cards{grid-template-columns: 1fr;}
      .offer-grid{grid-template-columns: 1fr;}
      .fields{grid-template-columns: 1fr}
      .calc-grid{grid-template-columns: 1fr}
      .contact-info{grid-template-columns: 1fr}
    }

    @media (max-width: 520px){
      .wrap{padding: 18px 10px 44px}
      .section-title{font-size:20px}
      .tab{justify-content:flex-start; padding:12px 12px}
      .about-actions{flex-direction:column; align-items:flex-start}
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{transition:none !important; scroll-behavior:auto !important}
    }
	
/* Полная страница блога */ 	
	



    /* ===== Post meta header ===== */
    .post-head{
      display:grid;
      grid-template-columns: 1fr 420px;
      gap: 18px;
      align-items:start;
      padding: 6px 0 10px;
    }

    .meta{display:grid; gap: 8px; color:#111; font-size: 14px}
    .meta-row{display:flex; gap: 12px; align-items:baseline}
    .meta-row b{min-width: 92px; color:#111; font-weight: 900}
    .meta-row span{color: var(--brand); font-weight: 800}

    .author{display:flex; justify-content:flex-end; gap: 14px; align-items:flex-start}
    .author-text{min-width: 240px; text-align:right}
    .author-name{color: var(--brand); font-weight: 900; margin: 0 0 4px}
    .author-lines{margin:0; color:#111;  line-height: 1.45}

    /* простая «аватарка» как в макете (круг + каска) */
.author-avatar {
    width: 78px;
    height: 78px;
    position: relative;
    flex: 0 0 78px;
    overflow: hidden;
    background-size: contain;
}

    .divider{border-top: 1px solid var(--line); margin: 8px 0 0}



    /* ===== Related posts (нижняя сетка) ===== */
    .rel{padding: 18px 0 0}
    .rel .section-title{margin: 0 0 14px}

    .rel-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .post-card{background: transparent; border: 0; border-radius: 0; box-shadow: none}

    .post-media{
      border: 1px solid var(--line);
      background:
        radial-gradient(160px 140px at 28% 30%, rgba(45,150,177,.18), transparent 60%),
        radial-gradient(200px 160px at 78% 72%, rgba(0,0,0,.05), transparent 60%),
        #f7fbfd;
      height: 170px;
      position:relative;
      overflow:hidden;
    }


    .post-bodycard{padding: 14px 2px 0}
    .post-title{
      margin: 0;
      color: var(--brand);
      font-weight: 900;
      font-size: 15px;
      line-height: 1.25;
    }
    .post-title a{color: inherit}
    .post-title a:hover{color:#1f5f73; text-decoration: underline}



    /* ===== Responsive ===== */
    @media (max-width: 980px){
      .post-head{grid-template-columns: 1fr;}
      .author{justify-content:flex-start}
      .author-text{text-align:left}
      .rel-grid{grid-template-columns: repeat(2, 1fr)}
      .post-media{height: 160px;        background-repeat: no-repeat;
        background-size: cover;}
      .section-title{font-size: 26px}
    }
    @media (max-width: 620px){
      .rel-grid{grid-template-columns: 1fr}
      .post-media{height: 190px}
      .wrap{padding: 18px 10px 44px}
    }

    @media (prefers-reduced-motion: reduce){
      *{transition:none !important}
    }
	
	
	/* ===== СТРАНИЦА ПРИМЕРОВ РАБОТ  ===== */
	




    /* ===== Work gallery ===== */
    .work-gallery{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 8px;
    }

    .work-shot{
      border: 1px solid var(--line);
      background:
        radial-gradient(180px 140px at 30% 30%, rgba(45,150,177,.16), transparent 65%),
        radial-gradient(200px 160px at 80% 70%, rgba(0,0,0,.06), transparent 65%),
        
        #f7fbfd;
      background-size: cover;  
      height: 170px;
      overflow:hidden;
      position:relative;
    }

.work-shot{
  display:block;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  cursor: zoom-in;
}
.work-shot:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

    /* ===== Work details ===== */
    .work-details{
      display:grid;
      grid-template-columns: 1fr 340px;
      gap: 28px;
      padding: 10px 0 4px;
      align-items:start;
    }

    .facts{display:grid; gap: 10px}
    .fact{
      display:grid;
      grid-template-columns: 18px 170px 1fr;
      align-items:center;
      gap: 10px;
      color:#111;
    }
    .fact b{font-weight: 900}
    .fact .val{color: var(--brand); font-weight: 900}
    .ico{
      width: 18px;
      height: 18px;
      color: rgba(45,150,177,.55);
    }

    .delivered{justify-self:end; width: 100%}
    .delivered-title{
      margin: 0 0 10px;
      text-align:right;
      font-weight: 950;
      color:#111;
    }
    .delivered-list{display:grid; gap: 10px}
    .delivered-item{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap: 10px;
      color: var(--brand);
      font-weight: 900;
    }
    .check{
      width: 14px;
      height: 14px;
      color: rgba(45,150,177,.75);
      flex: 0 0 14px;
    }


    /* ===== Article body ===== */
    .post-body{
      padding: 16px 0 10px;
      color:#111;
      font-size: 14px;
      line-height: 1.75;
      max-width: 980px;
    }

    .post-body p{margin: 0 0 12px}
    .post-body h2{margin: 18px 0 10px; font-size: 16px; font-weight: 950; color:#111}
    .post-body h3{margin: 16px 0 8px; font-size: 14px; font-weight: 950; color:#111}
    .post-body ul{margin: 10px 0 14px 18px}
    .post-body li{margin: 6px 0}
    .post-body ol{margin: 10px 0 14px 18px}
    .post-body strong{font-weight: 950}

    /* ===== CTA form ===== */
    .cta{
      margin-top: 18px;
      background: #f3fbfd;
      border: 1px solid #d9eef5;
      border-radius: 16px;
      padding: 18px 18px 16px;
      max-width: 980px;
    }

    .cta-title{
      margin: 0 0 14px;
      font-size: 26px;
      font-weight: 950;
      letter-spacing: .2px;
      color:#2a6e85;
      line-height:1.15;
    }
    .cta-title .accent{color: var(--accent)}

    .form-grid{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14px;
    }

    .field{display:grid; gap: 8px}
    .label{font-weight: 900; color:#111}

    .input, .file {
      height: 44px;
      border-radius: 10px;
      border: 1px solid #d2e8f1;
      background: #fff;
      padding: 0 14px;
      font: inherit;
      color:#111;
      outline:none;
    }

    .input::placeholder{color: rgba(107,124,136,.65); font-weight: 700}

    .file{
      display:flex;
      align-items:center;
      color: rgba(107,124,136,.75);
      
      cursor:pointer;
    }



    .form-bottom{
      margin-top: 12px;
      display:flex;
      gap: 12px;
      align-items:center;
    }

    .checkline{
      display:flex;
      gap: 10px;
      align-items:center;
      color:#111;
      
    }
    .checkline input{width: 16px; height: 16px}

    /* ===== Responsive ===== */
    @media (max-width: 980px){
      .work-details{grid-template-columns: 1fr;}
      .delivered{justify-self:start}
      .delivered-title{text-align:left}
      .delivered-item{justify-content:flex-start}
      .work-gallery{grid-template-columns: 1fr;}
      .work-shot{height: 190px}
      .form-grid{grid-template-columns: 1fr;}
	  .hero-box {grid-template-columns: 1fr;}
      .cta-title{font-size: 24px}
	  
	  .adv-ico {
    width: 500px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
	
.hero-inner {
    position: relative;
    z-index: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    grid-template-columns: 320px 1fr;
    gap: 16px;
    align-items: stretch;
}

    }
    
    
    
    
    
    /* ===== FAQ list ===== */
    .faqnew{
      display:grid;
      gap: 32px;
      padding-top: 6px;
    }

    .qa{
      display:grid;
      gap: 14px;
    }

    .q-row,
    .a-row{
      display:grid;
      gap: 18px;
      align-items:center;
    }

    .q-row{grid-template-columns: 92px 1fr;}
    .a-row{grid-template-columns: 1fr 92px;}

    /* ===== Avatars ===== */
    .avatar{
          background-size: contain;
      position:relative;
      overflow:hidden;
      justify-self:center;
    }

    /* ===== Bubbles ===== */
    .bubble{
      border-radius: 10px;
      padding: 18px 22px 16px;
      border: 1px solid #d9eef5;
      background: #eef8fb;
      position:relative;
      min-height: 78px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    .bubble.q::before{
      content:"";
      position:absolute;
      left: -10px;
      top: 28px;
      width: 18px;
      height: 18px;
      background: #eef8fb;
      border-left: 1px solid #d9eef5;
      border-bottom: 1px solid #d9eef5;
      transform: rotate(45deg);
    }

    .bubble.a{
      border-color: #f2e1c9;
      background: #fbf0e2;
    }

    .bubble.a::after{
      content:"";
      position:absolute;
      right: -10px;
      top: 34px;
      width: 18px;
      height: 18px;
      background: #fbf0e2;
      border-right: 1px solid #f2e1c9;
      border-top: 1px solid #f2e1c9;
      transform: rotate(45deg);
    }

    .q-label{
      font-weight: 950;
      color: var(--brand-2);
      margin-bottom: 6px;
    }

    .q-text{
      font-weight: 800;
      color: #2f6f83;
    }

    .a-text{
      color: #2b3f4a;
      font-weight: 600;
      line-height: 1.6;
    }

    /* ===== Pagination ===== */
    .pager{
      margin-top: 40px;
      display:flex;
      justify-content:center;
      gap: 28px;
      user-select:none;
    }
    .pager a{
      font-weight: 950;
      color: rgba(45,150,177,.25);
      padding: 6px 6px;
    }
    .pager a.active{color: var(--brand)}
    .pager a:hover{color: rgba(45,150,177,.55)}

    /* ===== Responsive ===== */
    @media (max-width: 920px){
      .q-row{grid-template-columns: 78px 1fr}
      .a-row{grid-template-columns: 1fr 78px}
      .avatar{width: 70px; height: 70px}
      .bubble{min-height: 70px}
    }

    @media (max-width: 620px){
      .q-row,
      .a-row{grid-template-columns: 1fr;}
      .q-row{grid-auto-flow: row}
      .a-row{grid-auto-flow: row}
      .avatar{justify-self:start}
      .avatar.worker{justify-self:end}
      .bubble.q::before{left: 18px; top: -10px; transform: rotate(135deg)}
      .bubble.a::after{display: none;}
      .bubble.a::before {
        content: "";
        position: absolute;
        right: 20px;
        bottom: -10px;
        width: 18px;
        height: 18px;
        background: #fbf0e2;
        border-right: none; 
        border-top: none; 
        transform: rotate(45deg);
    }
    }

    @media (prefers-reduced-motion: reduce){
      *{transition:none !important}
    } 
    
   
   
   
   
   
   
   
   
   .workflow{
      position:relative;
      padding:8px 0 0;
    }

    /* Десктоп-сетка: 2 колонки + узкий "коридор" под стрелки/скобки */
    .grid{
      display:grid;
      grid-template-columns: 1fr 110px 1fr;
      grid-auto-rows:minmax(86px,auto);
      align-items:center;
      gap:18px 18px;
    }

    .step{
      display:flex;
      align-items:center; /* текст по центру относительно цифры */
      gap:16px;
      min-height:72px;
    }

    .n{
      flex:0 0 auto;
      font-weight:800;
      font-size:56px;
      line-height:1;
      color:var(--num);
      letter-spacing:-1px;
      margin-top:0;
    }

    .t{
      font-size:18px;
      color:var(--text);
      max-width:360px;
    }

    /* Стрелки в центре */
    .mid{
      display:flex;
      justify-content:center;
      align-items:center;
      height:100%;
    }
    .arrow{
      width:64px;
      height:22px;
      opacity:.9;
    }/* Поворотные (полукруглые) стрелки вниз
   ВРЕМЕННО СКРЫТЫ (оставил код, чтобы быстро вернуть)
*/
    /*
    .turn{
      position:absolute;
      width:74px;
      height:74px;
      opacity:.92;
      pointer-events:none;
    }
    .turn svg{display:block;width:100%;height:100%}

    .turn.r1{right:10px;top:86px;transform:scaleX(-1) rotate(-45deg);transform-origin:50% 50%}
    .turn.l1{left:10px;top:188px;transform:scaleX(-1) rotate(45deg);transform-origin:50% 50%}
    .turn.r2{right:10px;top:278px;transform:scaleX(-1) rotate(-45deg);transform-origin:50% 50%}
    */

    .actions{
      margin-top:18px;
      display:flex;
      justify-content:flex-start;
    }

    /* Адаптив: на мобильном складываем в одну колонку */
    @media (max-width:820px){
      .grid{grid-template-columns:1fr;gap:14px}
      .mid{display:none}
      .brace{display:none}
      .t{max-width:none}
      .n{font-size:48px}
    }

    /* На очень узких: уменьшаем числа */
    @media (max-width:420px){
      .n{font-size:42px}
      .t{font-size:16px}
    }
    
    .mid.is-reverse .arrow{
  transform: scaleX(-1);
  transform-origin: 50% 50%;
}













/* ===== Pagination (макетный минимализм) ===== */

main .pagi .pagi__item{ /* или ваш родительский контейнер */
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


.pagi{
  margin: 18px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  user-select: none;
}

.pagi__item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 2px;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  color: #cfd6dd; /* неактивные */
  border: 0;
  background: transparent;
  transition: color .15s ease, transform .15s ease, opacity .15s ease;
}

.pagi__item:hover{
  color: #9aa6b1;
}

.pagi__item.is-active{
  color: var(--brand, #2a6e85);
  font-weight: 800;
  transform: translateY(-1px);
}

.pagi__dots{
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  color: #cfd6dd;
}





/* ===== GALLERY: albums grid ===== */
.gallery{
  margin-top: 12px;
}



/* плитка альбома */
.ph{
  position: relative;
  display: block;
  min-height: 120px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 20% 15%, rgba(255,255,255,.30), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.35)),
    var(--bg, linear-gradient(135deg, #e9f3f6, #dfeff4));
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ph:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 14px 32px rgba(0,0,0,.12);
}

/* подпись альбома */
.ph-title{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 10px;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .2px;

  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* если hover-card у вас общий, можно не трогать.
   если hover-card вдруг отсутствует, вот базовая страховка: */
.hover-card{
  transition: transform .18s ease, box-shadow .18s ease;
}

/* адаптив */
@media (max-width: 1199px){
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .ph{ min-height: 110px; }
}
@media (max-width: 420px){
  .gallery-grid{ grid-template-columns: 1fr; }
}

/* ===== LIGHTBOX (lb) ===== */
.lb{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.lb.is-open{
  display: block;
}

.lb-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 22, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lb-dialog{
  position: relative;
  width: min(980px, calc(100vw - 24px));
  height: min(720px, calc(100vh - 24px));
  margin: 12px auto;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(20, 28, 34, .88);
  box-shadow: 0 30px 90px rgba(0,0,0,.50);
  overflow: hidden;

  display: grid;
  grid-template-rows: auto 1fr;
}

.lb-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.lb-title{
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-counter{
  color: rgba(255,255,255,.78);
  font-size: 13px;
  white-space: nowrap;
}

.lb-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: rgba(0,0,0,.25);
}

/* кнопка закрытия */
.lb-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.lb-close:hover{
  background: rgba(0,0,0,.50);
}

/* навигация */
.lb-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.lb-nav.prev{ left: 10px; }
.lb-nav.next{ right: 10px; }

.lb-nav:hover{
  background: rgba(0,0,0,.50);
}

@media (max-width: 560px){
  .lb-dialog{
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    margin: 8px auto;
  }
  .lb-nav{
    width: 40px;
    height: 52px;
  }
}


/* ===== LOCATIONS (tabs + cards) ===== */
.loc{ margin-top: 12px; }

.loc-tabs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.loc-tab{
  text-align: left;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  padding: 12px 12px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.loc-tab:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0,0,0,.10);
}

.loc-tab[aria-selected="true"]{
  border-color: rgba(42,110,133,.35);
  background: linear-gradient(180deg, #f2fafc 0%, #ffffff 100%);
}

.loc-name{
  display: block;
  font-weight: 800;
  color: var(--text);
  font-size: 14px;
  letter-spacing: .2px;
}

.loc-sub{
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.loc-panel{ display: none; }
.loc-panel.is-active{ display: block; }

.loc-grid{
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 12px;
  align-items: stretch;
}

.loc-map{ padding: 12px; }
.loc-map-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.loc-map-title{
  font-weight: 800;
  color: var(--text);
}
.loc-map-link{
  color: #2a6e85;
  font-size: 12px;
  text-decoration: underline;
  opacity: .9;
}

.loc-map-box{
  height: 320px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--line);
  background: #f7fbfd;
}

.loc-card{ padding: 12px; display: flex; flex-direction: column; }
.loc-card-top{ display: grid; gap: 8px; }
.loc-card-title{ font-weight: 900; color: var(--text); }

.loc-badges{ display: flex; flex-wrap: wrap; gap: 8px; }
.badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f2fafc;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--text);
  font-weight: 700;
}
.badge.ghost{
  background: #fff;
}

.loc-lines{ margin-top: 10px; display: grid; gap: 10px; }
.loc-line{ display: grid; gap: 2px; }
.loc-line .k{ color: var(--muted); font-size: 12px; }
.loc-line .v{ color: var(--text); font-weight: 700; }
.loc-line a{ text-decoration: underline; }

.loc-actions{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.loc-actions .btn{ width: 100%; }

@media (max-width: 1199px){
  .loc-tabs{ grid-template-columns: 1fr; }
  .loc-grid{ grid-template-columns: 1fr; }
  .loc-map-box{ height: 280px; }
}

.transport-row{ position: relative; }
.transport-actions{ position: relative; z-index: 2; }
.transport-row::before{ pointer-events: none; }


/* Scoped styles: only inside .table-of-blockages */
  .table-of-blockages{
    --bg:#ffffff;
    --text:#1b2b33;
    --muted:#6c7f88;
    --line:#e6eef1;
    --dash:#dfe7ea;
    --headbg:#f7fbfc;
    --groupbg:#f3f6f7;
    --accent:#2a8aa0;

    font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--text);
    background:var(--bg);
    margin-top: 21px;
  }
  
  
  .hero-table-of-blockages {
    display: flex;
    justify-content: space-between;
  }

  .table-of-blockages,
  .table-of-blockages *{box-sizing:border-box}

  .table-of-blockages .wrap{max-width:860px;margin:0 auto;}

  .table-of-blockages h1{
    margin:0 0 14px;
    font-size:34px;
    line-height:1.15;
    letter-spacing:.2px;
    color:var(--accent);
    font-weight:750;
  }

  .table-of-blockages .table-box{
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    background:#fff;
  }

  .table-of-blockages table{width:100%;border-collapse:separate;border-spacing:0;}

  .table-of-blockages thead th{
    background:var(--headbg);
    color:var(--accent);
    font-weight:650;
    text-align:left;
    padding:14px 18px;
    font-size:15px;
    border-bottom:1px solid var(--line);
  }
  .table-of-blockages thead th:nth-child(2){width:160px;}
  .table-of-blockages thead th:nth-child(3){width:48%;}

  .table-of-blockages tbody td{
    padding:14px 18px;
    vertical-align:top;
    border-bottom:1px dotted var(--dash);
    font-size:15px;
  }
  .table-of-blockages tbody tr:last-child td{border-bottom:none;}

  .table-of-blockages .group td{
    background:var(--groupbg);
    color:var(--muted);
    font-weight:650;
    border-bottom:1px solid var(--line);
    padding:12px 18px;
  }

  .table-of-blockages td.name{color:#4a6c78; font-weight:550;}
  .table-of-blockages td.perc{color:#111; font-weight:700; white-space:nowrap;}
  .table-of-blockages td.desc{color:#111; font-weight:600;}

  .table-of-blockages tbody tr:not(.group) td{padding-top:13px;padding-bottom:13px;}

  @media (max-width:560px){
    .table-of-blockages{padding:18px 12px 34px;}
    .table-of-blockages h1{font-size:28px;}
    .table-of-blockages thead th,
    .table-of-blockages tbody td,
    .table-of-blockages .group td{padding-left:14px;padding-right:14px;}
    .table-of-blockages thead th:nth-child(2){width:120px;}
  }
  
  /* =========================================================
   PAGE: Маркировка металлов (скоуп по aria-label)
   ========================================================= */

.section[aria-label="Маркировка металлов"]{
  --mk-accent: #2a8fa5;       /* бирюзовый как на скрине */
  --mk-muted:  #6c7a80;       /* серый текст в строках */
  --mk-line:   #d9e9ef;       /* тонкие линии */
  --mk-dash:   #cfe6ee;       /* пунктир в теле */
  --mk-headbg: #f2fafc;       /* фон шапки таблицы */
  --mk-groupbg:#f6f6f6;       /* фон строк-групп */
  --mk-openbg: #eef8fb;       /* фон открытой группы */
}

/* ===== HERO (заголовок слева, кнопка справа) ===== */
.section[aria-label="Маркировка металлов"] .hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:10px;
}

.section[aria-label="Маркировка металлов"] .section-title{
  margin:0;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--mk-accent);
  line-height:1.05;
  font-size:34px;
}

@media (max-width: 575px){
  .section[aria-label="Маркировка металлов"] .hero{
    flex-direction:column;
    align-items:stretch;
  }
  .section[aria-label="Маркировка металлов"] .section-title{
    font-size:28px;
  }
}

/* lead как в примере, без “карточки” */
.section[aria-label="Маркировка металлов"] .lead{
  margin:8px 0 0;
  color:#2b2b2b;
  max-width: 980px;
}

/* ===== Photos ===== */
.section[aria-label="Маркировка металлов"] .pics{
  margin-top:14px;
  padding: 21px 0px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.section[aria-label="Маркировка металлов"] .pics:empty{ display:none; }

.section[aria-label="Маркировка металлов"] .pic{
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  aspect-ratio: 16/9;
}
.section[aria-label="Маркировка металлов"] .pic img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width: 991px){
  .section[aria-label="Маркировка металлов"] .pics{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px){
  .section[aria-label="Маркировка металлов"] .pics{ grid-template-columns:1fr; }
}

/* ===== Table wrapper ===== */
.section[aria-label="Маркировка металлов"] .m-table{
  margin-top:18px;
  border-top:1px solid var(--mk-line);
  border-bottom:1px solid var(--mk-line);
  background:#fff;
}

/* Header row */
.section[aria-label="Маркировка металлов"] .m-head{
  display:grid;
  grid-template-columns: 1fr 1fr 52px;
  align-items:center;
  padding:10px 16px;
  background:var(--mk-headbg);
  border-bottom:1px solid var(--mk-line);
  color:var(--mk-accent);
  font-weight:700;
}

.section[aria-label="Маркировка металлов"] .m-head .ghost{
  opacity:0;
  pointer-events:none;
}

/* ===== Accordion groups ===== */
/* Ожидается: details.m-group, внутри summary (любого класса) */
.section[aria-label="Маркировка металлов"] details.m-group{
  border-bottom:1px solid rgba(0,0,0,.04);
}

/* summary row */
.section[aria-label="Маркировка металлов"] details.m-group > summary{
  display:grid;
  grid-template-columns: 1fr 1fr 52px;
  align-items:center;
  padding:12px 16px;
  cursor:pointer;
  user-select:none;
  background:var(--mk-groupbg);
  color:var(--mk-muted);
  font-weight:700;
  list-style:none;
  border-bottom:1px solid rgba(0,0,0,.03);
}

.section[aria-label="Маркировка металлов"] details.m-group[open] > summary{
  background:var(--mk-openbg);
}

/* убрать маркер */
.section[aria-label="Маркировка металлов"] details.m-group > summary::-webkit-details-marker{
  display:none;
}

/* плюс/крестик справа без правок tpl */
.section[aria-label="Маркировка металлов"] details.m-group > summary::after{
  content:"+";
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  font-size:28px;
  font-weight:800;
  color:#556168;
  line-height:1;
}

.section[aria-label="Маркировка металлов"] details.m-group[open] > summary::after{
  content:"×";
  font-size:26px;
}

/* фокус */
.section[aria-label="Маркировка металлов"] details.m-group > summary:focus{
  outline:2px solid rgba(42,143,165,.25);
  outline-offset:-2px;
}

/* ===== Body rows inside open group ===== */
/* Поддержка двух вариантов: .m-body/.m-row или просто любые div после summary */
.section[aria-label="Маркировка металлов"] details.m-group > .m-body,
.section[aria-label="Маркировка металлов"] details.m-group > summary + *{
  background:#fff;
}

/* универсальный селектор для строк */
.section[aria-label="Маркировка металлов"] .m-row,
.section[aria-label="Маркировка металлов"] details.m-group > summary + * > *{
  display:grid;
  grid-template-columns: 1fr 1fr 52px;
  align-items:center;
  padding:10px 16px;
  background:#fff;
  border-top:1px dashed var(--mk-dash);
}

.section[aria-label="Маркировка металлов"] .m-row:first-child{
  border-top:none;
}

.section[aria-label="Маркировка металлов"] .m-row .ghost{
  opacity:0;
  pointer-events:none;
}

/* мобильная: 2 колонки (вторая колонка скрыта как у вас в макетах часто) */
@media (max-width: 575px){
  .section[aria-label="Маркировка металлов"] .m-head,
  .section[aria-label="Маркировка металлов"] details.m-group > summary,
  .section[aria-label="Маркировка металлов"] .m-row,
  .section[aria-label="Маркировка металлов"] details.m-group > summary + * > *{
    grid-template-columns: 1fr 52px;
  }

  .section[aria-label="Маркировка металлов"] .m-head > :nth-child(2),
  .section[aria-label="Маркировка металлов"] details.m-group > summary > :nth-child(2),
  .section[aria-label="Маркировка металлов"] .m-row > :nth-child(2),
  .section[aria-label="Маркировка металлов"] details.m-group > summary + * > * > :nth-child(2){
    display:none;
  }
}

/* FIX: правый контрол (плюс/крест) всегда справа, не зависит от структуры summary */
.section[aria-label="Маркировка металлов"] details.m-group > summary{
  position: relative;
  padding-right: 64px; /* место под иконку справа */
}

/* если у тебя уже был summary::after с +/× */
.section[aria-label="Маркировка металлов"] details.m-group > summary::after{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== RELATED POSTS ===== */
.related{ margin-top: 22px; }

.related-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

@media (max-width: 991px){
  .related-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 575px){
  .related-grid{ grid-template-columns: 1fr; }
}

.post-card{
  border:1px solid var(--line, #d9e3e8);
  border-radius: var(--radius, 16px);
  overflow:hidden;
  background:#fff;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.post-media{
  height: 170px;
  background: #eef4f7;
  background-size: cover;
  background-position: center;
}

.post-bodycard{
  padding: 12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.post-title{
  margin:0;
  font-size: 16px;
  line-height: 1.25;
}
.post-title a{ text-decoration:none; }
.post-title a:hover{ text-decoration:underline; }

.post-cat{
  display:flex;
  align-items:center;
  gap:8px;
  color: var(--muted, #5b6b73);
  font-size: 13px;
}

.post-excerpt{
  margin:0;
  color: var(--text, #141f26);
  opacity:.9;
  font-size: 13px;
  line-height: 1.5;
}

.post-meta{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  gap:10px;
  color: var(--muted, #5b6b73);
  font-size: 12px;
}

.bmcalc-left .form-get-price_calc, .form-get-price_info {
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-box-flex: 1;
}

.bmcalc-left .form-get-price_calc {
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    padding: 0px;
    border: none;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    background: none;
}

.bmcalc-left .form-get-price_calc-t {
       font-weight: 600;
    font-size: 20px;
    text-align: center;
    margin-top: 7px;
    padding-bottom: 22px;
    color: #799ca3;
    border-bottom: 1px solid #d9eaf3;
    padding-left: 21px;
    padding-right: 21px;
}

.control {
    height: 40px;
    width: 100%;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fbfeff;
    outline: none;
    margin-bottom: 21px;
}

.mt-20 {
    margin-top: 0px;
}

.agree_text a {
    color: #000;
    text-decoration: underline;
}

.agree_text {
    color: #000; 
    text-decoration: underline;
}



/* ===== Responsive ===== */
    @media (max-width: 980px){
      .leader-grid{grid-template-columns: 1fr;}
      .info-grid{grid-template-columns: 1fr;}
      .mini-cards{grid-template-columns: 1fr;}
      .offer-grid{grid-template-columns: 1fr;}
      .benefits-grid {grid-template-columns: 1fr;}
      .gallery-grid{grid-template-columns: repeat(2, 1fr)}
      .gallery-grid .ph:nth-child(4){grid-column: auto}
      .fields{grid-template-columns: 1fr}
      .calc-grid{grid-template-columns: 1fr}
      .contact-info{grid-template-columns: 1fr}
      
      
      .benefit .ico {
    width: 44px;
    height: 44px;
    border-radius: 0px;
    border: none;
    background: none;
    color: #2a6e85;
}
    }

    @media (max-width: 520px){
      .wrap{padding: 18px 10px 44px}
      .section-title{font-size:20px}
      .tab{justify-content:flex-start; padding:12px 12px}
      .about-actions{flex-direction:column; align-items:flex-start}
            .benefits-grid {grid-template-columns: 1fr;}
            
          
            .telegram, .tg-left {
    flex-direction: column;
}
.speech::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -1px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-left: 1px solid rgba(45, 150, 177, .22);
    border-bottom: 1px solid rgba(45, 150, 177, .22);
    transform: translateY(-50%) rotate(135deg);
}
    .leader-grid{
    padding: 0px;
    display: block;
}
    
.leader {
    padding: 0px;
    display: block;
}

.stat-big::after {
    content: ">70%";
    font-size: 3em;
}

.h-fixed_massangers {
    background: none;
}
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{transition:none !important; scroll-behavior:auto !important}
    }
	
	
.bmcalc-left .bmr {
    color: #5e94a8;
    font-size: 14px;
}

.bmnote {
        color: #5e94a8;
    font-size: 14px;
    font-weight: 400;
}

.bmcalc-left span {
        color: #5e94a8;
    font-size: 14px;
    font-weight: 400;
}

.bmsubmit {
    height: 56px;
    border-radius: 12px;
    border: 0;
    background: #cfe9e8;
    color: #3090a6;
    font-weight: 400;
background: linear-gradient(to top, #addfec 0%, #cee7dc 100%);
}
	
	
.bmsubmit :hover {
    background: #fff;
background: linear-gradient(to top, #6db8cb 0%, #b2e1cc 100%);
}

/* Правки Игоря */ 	

.f-contacts_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    margin-bottom: 10px;
    text-align: center;
}

#locations > a { display: contents; }
#locations .loc > a { display: contents; }
#locations .loc-panels > a { display: contents; }
#locations .loc-panel > a { display: contents; }
#locations .loc-grid > a { display: contents; }

.f-menu_menu-link {
    font-size: 14px;
    font-weight: 600;
    color: #d4f5fd;
}

.f-menu_menu-link:hover {
    color: #fff;
}

.adv-list{
  display:flex;
  flex-direction:column;
  gap:18px;              /* настройте под макет */
}

.adv-item{
  display:flex;
  align-items:flex-start; /* важно: не baseline */
  gap:16px;               /* расстояние между иконкой и текстом */
}

.adv-newtext {
    min-width: 0;
    height: -webkit-fill-available;
}
.adv-ico{
  flex:0 0 96px;         /* ширина колонки (подберите под дизайн) */
  width:96px;
  height:90px;           /* одинаковая высота под ваши width/height=90 */
  display:flex;
  align-items:center;
  justify-content:center;
}

.adv-ico img{
  display:block;         /* убирает baseline-подложку */
  width:90px;            /* можно auto, но лучше фикс как в разметке */
  height:90px;
  object-fit:contain;
}

.adv-newtext .h,
.adv-newtext .p{
  margin:0;
}

.adv-newtext .p{
  margin-top:6px;        /* настройте под макет */
}

.adv-newtext{
  min-width:0;           /* важно для flex, чтобы переносы работали нормально */
}

@media (max-width: 640px){
  .adv-item{
    align-items:flex-start;
    gap:12px;
  }
  .adv-ico{
    flex-basis:72px;
    width:72px;
    height:72px;
  }
  .adv-ico img{
    width:72px;
    height:72px;
  }
  
  .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-right: 0px;
    padding-left: 0px;
}

.table-of-blockages {
        padding: 0px;
    }
    
 .row {
    margin-right: 0px;
    margin-left: 0px;
}   
}

.advnum{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 48px;
}

.advnum-item{
  display: flex;
  align-items: flex-start;
  gap: 22px;            /* единый интервал между цифрой и текстом */
  margin: 0;
  padding: 0;
}

.advnum-item .n{
  flex: 0 0 56px;       /* фикс ширины цифры, чтобы текст всегда стартовал одинаково */
  line-height: 1;
}

.advnum-item .t{
  margin: 0;
  padding: 0;
  text-indent: 0;
  white-space: normal;
}



/* Sharebar */

  .sharebar{
    border-top: 1px solid #d6eaef;
    border-bottom: 1px solid #d6eaef;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

.sharebar__inner {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 21px 0px;
    gap: 16px;
    width: 100%;
}

  .sharebar__label{
    font: 600 16px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #111;
    letter-spacing: .1px;
  }

  .sharebar__links{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
  }

  .sharebar__btn{
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    opacity: .9;
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
  }

  .sharebar__btn:hover{
    opacity: 1;
    transform: translateY(-1px);
  }

  .sharebar__btn:focus-visible{

  }

.sharebar__ico {
    width: max-content;
    height: auto;
    display: block;
}

  /* Адаптация: на узких экранах иконки уезжают вниз, выравнивание остается аккуратным */
  @media (max-width: 560px){
    .sharebar__inner{
      flex-direction: column;
      align-items: flex-start;
      min-height: unset;
    }
    .sharebar__links{
      width: 100%;
      justify-content: center;
    }
  }
  
  
  .top-menu {
    position: relative;
    z-index: 1000;
}


.tbl-wrap{
  clear: both;
  width: 100%;
  margin: 16px 0;
  overflow-x: auto; /* на мобилке если не влезет */
}

.tbl{
  width: 100%;
  border-collapse: collapse;
}

.tbl th,
.tbl td{
  padding: 10px 12px;
  border-bottom: 1px solid #e6eef2;
  text-align: left;
  vertical-align: top;
}

.tbl-price th:last-child,
.tbl-price td:last-child{
  text-align: right;
  white-space: nowrap;
}

/* Левая колонка калькулятора */
.calc .fields{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  align-items: end;
}

/* "Вид металла" на всю ширину */
.calc .fields .field:first-child{
  grid-column: 1 / -1;
}

/* На всякий случай: элементы управления на 100% */
.calc .control{
  width: 100%;
}

/* Мобилка: все в одну колонку */
@media (max-width: 768px){
  .calc .fields{
    grid-template-columns: 1fr;
  }
  .calc .fields .field:first-child{
    grid-column: auto;
  }
}

.calc-price {
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 14px;
    margin-top: 11px;
    display: block;
}

.reviews-shell{
  padding: 18px 0;
  border-top: 1px solid var(--line, #e6eef2);
}
.reviews-shell:first-child{ border-top: 0; }

.reviews-name{
  font-size: 20px;
  font-weight: 800;
  color: var(--text, #123a4a);
  margin: 0 0 10px;
}

.reviews-grid{
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px;
  align-items: start;
}

.reviews-ava{
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: hsl(var(--ava-h, 200) 45% 90%);
  border: 1px solid rgba(0,0,0,.06);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.reviews-ava.is-photo{
  background-size: cover;
  background-position: center;
}
.reviews-ava.is-photo .reviews-ava-initials{
  display: none;
}

.reviews-ava-initials{
  font-weight: 800;
  font-size: 28px;
  letter-spacing: .5px;
  color: rgba(18,58,74,.75);
  user-select: none;
}

.reviews-text{
  max-width: 720px;
}

.reviews-service{
  margin: 0 0 10px;
  color: var(--text, #123a4a);
  line-height: 1.45;
}

.reviews-body{
  color: var(--text, #123a4a);
  line-height: 1.65;
}

/* мобильная адаптация */
@media (max-width: 640px){
  .reviews-grid{
    grid-template-columns: 72px 1fr;
    gap: 12px;
  }
  .reviews-ava{
    width: 64px;
    height: 64px;
  }
  .reviews-ava-initials{ font-size: 18px; }
  .reviews-name{ font-size: 18px; }
  
  
  .f-contacts {
    display: none !important;
}

}


.advantages-old {
	display: flex;
	flex-direction: row;
	margin: 30px 0;
}

.advantages_image {
	border-top: 1px solid #00b6de;
	border-right: 1px solid #00b6de;
	border-left: 1px solid #00b6de;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px
}

.advantages_image>img {
	width: 100%
}

.advantages_sign-wp {
	padding: 20px;
	border-right: 1px solid #00b6de;
	border-bottom: 1px solid #00b6de;
	border-left: 1px solid #00b6de;
	border-bottom-right-radius: 7px;
	border-bottom-left-radius: 7px;
	background-color: #32607e;
	background-image: url(/assets/img/punkty-priemy-metalloloma-3.jpg);
	background-size: cover
}

.advantages_sign {
	padding: 15px;
	border-radius: 7px;
	background-color: hsla(0, 0%, 100%, .8)
}

.advantages_sign-t {
	font-size: 20px;
	font-weight: 600;
	margin: 5px 0;
	text-transform: uppercase;
	color: #00b6de
}

    .f-contacts {
        position: fixed;
        z-index: 9999;
        right: 0;
        bottom: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        height: 100vh;
        padding: 0;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
.advantages_sign-tx {
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 10px;
	color: #333
}

.advantages_link {
	font-size: 18px;
	font-weight: 600;
	display: inline-block;
	padding: 8px 20px;
	color: #fffefe;
	border-radius: 5px;
	background-color: #00b6de
}

.advantages_link:hover {
	color: #fffefe;
	background-color: #006278
}

.work-media{
  display:block;
  /* если высота задавалась для div — она нужна и для a */
  /* height: 220px; */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== Breadcrumbs ===== */
.breadcrumbs{
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.3;
  color: #6b7b86;
}

.breadcrumbs ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li{
  display: inline-flex;
  align-items: center;
  min-height: 18px;
}

.breadcrumbs li + li::before{
  content: "/";
  opacity: .45;
  margin: 0 8px 0 4px;
}

.breadcrumbs a{
  color: #2a86a0;            /* под вашу бирюзу */
  text-decoration: none;
  transition: color .15s ease, text-decoration-color .15s ease;
}

.breadcrumbs a:hover{
  color: #1f6f85;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.breadcrumbs [aria-current="page"] span{
  color: #2a2f33;
  font-weight: 600;
}

/* Мобилка */
@media (max-width: 640px){
  .breadcrumbs{ font-size: 12px; margin-bottom: 10px; }
  .breadcrumbs li + li::before{ margin: 0 6px 0 3px; }
}













/* ===== Demo frame (не влияет на боевую верстку) ===== */
    :root{
      --bg:#eef3f6;
      --ink:#2c353a;
      --muted:#7d8c93;

      /* палитра InvestMet */
      --pl-accent:#2e6b7a;
      --pl-accent-2:#5a8e9e;
      --pl-line:#b9d6df;
      --pl-soft:#f4f8fa;
      --pl-soft-2:#fbfdfe;
      --pl-card:#ffffff;
      --pl-shadow: 0 10px 26px rgba(20, 45, 55, .10);
    }
    
    /* =====================================================================
       BASE: исходные стили (выжимка из main.css для price-list)
       ВАЖНО: сетку/структуру не меняем, только «скиним» и исправляем коллизии.
    ===================================================================== */

    /* критично для того, чтобы проценты + padding + border НЕ ломали ширины */
    .price-list, .price-list *{ box-sizing: border-box; }

    .price-list {
      border: 1px solid #00b6de;
      -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, .15);
      box-shadow: 4px 4px 10px rgba(0, 0, 0, .15);
      border-radius: 7px;
      overflow: hidden;
      margin: 30px 0;
    }

    .price-list_t {
      background: #fff;
      text-align: center;
      padding: 9px 0;
    }

    .price-list_date,
    .price-list_t {
      color: #006278;
      font-weight: 600;
      font-size: 15px;
    }

    .price-list-head {
      font-size: 15px;
      border-top: 1px solid #00b6de;
    }

    .price-list-head,
    .price-list-head_t {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
    }

    .price-list-head_t {
      width: 21.5%;
      border-right: 1px solid #00b6de;
      font-weight: 600;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding-left: 5px;
      padding-right: 5px;
      text-align: center;
    }

    .price-list-head-cat {
      width: 79.5%;
      text-align: center;
    }

    .price-list-head-cat,
    .price-list-head-cat-roz {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
    }

    .price-list-head-cat-roz {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      width: 56%;
      border-right: 1px solid #00b6de;
    }

    .price-list-head-cat-roz_t {
      width: 100%;
      border-bottom: 1px solid #00b6de;
      padding: 2px 0;
      background: rgba(58, 44, 42, .05);
    }

    .price-list-head-cat-roz_btm {
      width: 33.3%;
      padding: 3px 0;
    }

    .price-list-head-cat-roz_btm:not(:last-child) {
      border-right: 1px solid #00b6de;
    }

    .price-list-head-cat-roz_btm:nth-child(2) { background: rgba(58, 44, 42, .05); }
    .price-list-head-cat-roz_btm:nth-child(3) { background: rgba(170, 145, 141, .2); }
    .price-list-head-cat-roz_btm:nth-child(4) { background: rgba(166, 124, 118, .3); }

    .price-list-head-cat-opt {
      width: 45%;
      text-align: center;
      background: rgba(58, 44, 42, .3);
    }

    .price-list-head-cat-opt_t {
      width: 100%;
      border-bottom: 1px solid #00b6de;
      padding: 2px 0;
    }

    .price-list-head-cat-opt_btm { padding: 3px 0; }

    .price-list-lv1_t {
      border-top: 1px solid #00b6de;
      border-bottom: 1px solid #00b6de;
      text-align: center;
      padding: 5px 0;
      font-size: 14px;
      color: #006278;
      font-weight: 600;
    }

    .price-list-lv2 { -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; }

    .price-list-lv2,
    .price-list-lv2-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-direction: normal;
    }

    .price-list-lv2-list {
      -webkit-box-orient: horizontal;
      -ms-flex-direction: row;
      flex-direction: row;
      font-size: 13px;
      font-weight: 600;
    }

    .price-list-lv2-list:not(:last-child) { border-bottom: 1px solid #00b6de; }

    .price-list-lv2-list_t {
      width: 21.5%;
      border-right: 1px solid #00b6de;
      padding: 8px;
    }

    .price-list-lv2-list-prices {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      width: 79.5%;
    }

    .price-list-lv2-list_price {
      text-align: center;
      padding: 8px;
    }

    .price-list-lv2-list_price:not(:last-child) {
      border-right: 1px solid #00b6de;
      width: 27.8%;
    }

    .price-list-lv2-list_price:last-child { width: 44%; }

    .price-list-lv2-list_price:first-child { background: rgba(58, 44, 42, .05); }
    .price-list-lv2-list_price:nth-child(3) { background: rgba(166, 124, 118, .3); }
    .price-list-lv2-list_price:nth-child(4) { background: rgba(58, 44, 42, .3); }

    @media (max-width:1199px) {
      .price-list-head_t {
        font-size: 13px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 10px;
      }
      .price-list-head-cat { font-size: 12px; }
      .price-list-head-cat-roz { width: 66%; }
      .price-list-head-cat-opt { width: 34%; }
    }

    @media (max-width:639px) {
      .price-list-head { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
      .price-list-head_t { width: 100%; border-right: none; border-bottom: 1px solid #00b6de; }
      .price-list-head-cat { width: 100%; }
      .price-list-lv2-list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
      .price-list-lv2-list_t { width: 100%; border-right: none; border-bottom: 1px solid #00b6de; text-align: center; }
      .price-list-lv2-list-prices { width: 100%; }
      .price-list-lv2-list_price { width: 33.4%!important; }
    }

    /* =====================================================================
       SKIN: меняем только оформление (цвета/фоны/типографика/отступы),
       сетка и разметка остаются как в исходнике.
       + исправляем «поехавшую» верстку из-за сумм процентов > 100.
    ===================================================================== */

    .price-list{
      margin: 18px 0;
      border-color: var(--pl-line);
      border-radius: 12px;
      box-shadow: var(--pl-shadow);
      background: var(--pl-card);
    }

    /* верхняя строка: делаем как в макете (заголовок слева, дата справа) */
    .price-list_t{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 12px;
      padding: 16px 18px;
      text-align:left;
      background: linear-gradient(180deg, var(--pl-soft-2), #fff);
      border-bottom: 1px solid var(--pl-line);
    }

    .price-list_t > span{
      font-size: 18px;
      line-height: 1.25;
      font-weight: 800;
      color: var(--pl-accent);
      letter-spacing: .15px;
      min-width: 0;
    }

    .price-list_date{
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .price-list-head{
      border-top: none;
      background: var(--pl-soft);
      font-size: 13px;
      color: var(--ink);
    }

    .price-list-head_t{
      border-right-color: var(--pl-line);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: #3f5c67;
      padding: 12px 10px;
    }

    .price-list-head-cat{ width: 79.5%; }

    /* НОРМАЛИЗАЦИЯ: 3 колонки розницы + 1 колонка опта должны давать 100%.
       Сохраняем исходное соотношение (27.8 vs 44), но приводим к 100%.
       retail: 21.82% * 3, opt: 34.54%.
    */
    .price-list-head-cat-roz{ width: 65.46%; border-right-color: var(--pl-line); }
    .price-list-head-cat-opt{ width: 34.54%; }

    .price-list-head-cat-roz_t{
      background: rgba(46, 107, 122, .06);
      border-bottom-color: var(--pl-line);
      padding: 10px 8px;
      font-weight: 800;
      color: var(--pl-accent);
    }

    .price-list-head-cat-opt{
      background: rgba(46, 107, 122, .10);
    }

    .price-list-head-cat-opt_t{
      border-bottom-color: var(--pl-line);
      padding: 10px 8px;
      font-weight: 800;
      color: var(--pl-accent);
    }

    .price-list-head-cat-roz_btm,
    .price-list-head-cat-opt_btm{
      padding: 10px 8px;
      font-size: 12px;
      color: #4b6b76;
      line-height: 1.15;
    }

    .price-list-head-cat-roz_btm:not(:last-child){ border-right-color: var(--pl-line); }

    /* убираем «коричневую шахматку», делаем спокойные колоночные фоны */
    .price-list-head-cat-roz_btm:nth-child(2),
    .price-list-lv2-list_price:nth-child(1){ background: rgba(90, 142, 158, .06); }

    .price-list-head-cat-roz_btm:nth-child(3),
    .price-list-lv2-list_price:nth-child(2){ background: rgba(90, 142, 158, .09); }

    .price-list-head-cat-roz_btm:nth-child(4),
    .price-list-lv2-list_price:nth-child(3){ background: rgba(90, 142, 158, .12); }

    .price-list-lv2-list_price:nth-child(4){ background: rgba(46, 107, 122, .12); }

    .price-list-lv1_t{
      border-top-color: var(--pl-line);
      border-bottom-color: var(--pl-line);
      padding: 10px 12px;
      font-size: 14px;
      font-weight: 800;
      color: #35525c;
      background: #f1f6f8;
    }

    .price-list-lv2-list{ font-size: 13px; }

    .price-list-lv2-list:not(:last-child){ border-bottom-color: rgba(185, 214, 223, .8); }

    .price-list-lv2-list_t{
      border-right-color: rgba(185, 214, 223, .8);
      padding: 12px 12px;
      font-weight: 700;
      color: #2f3b40;
      background: #fff;
    }

    .price-list-lv2-list-prices{ width: 79.5%; }

    /* ключевой фикс стабильности колонок на боевом:
       вместо width у ячеек используем flex-basis (как и должно быть для flex-строки).
       Это не меняет сетку, только делает её предсказуемой.
    */
    .price-list-lv2-list_price{
      width: auto !important;
      flex: 0 0 21.82%;
      padding: 12px 10px;
      border-right: 1px solid rgba(185, 214, 223, .8);
      text-align: right;
      font-weight: 800;
      color: var(--pl-accent-2);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .price-list-lv2-list_price:last-child{
      flex-basis: 34.54%;
      border-right: none;
      color: var(--pl-accent);
    }

    /* «Не принимаем» */
    .price-list-lv2-list_price--na{
      color: #8b9aa1;
      font-weight: 700;
      text-transform: lowercase;
      text-align: center;
    }

    /* hover как в «чистой» таблице */
    .price-list-lv2-list:hover .price-list-lv2-list_t{ background: var(--pl-soft-2); }


.price-list-lv2-list_price:not(:last-child) {
    border-right: 1px solid rgba(185, 214, 223, .8) !important;
    width: 27.8%;
}

    /* адаптивная косметика, сетку не ломаем */
    @media (max-width: 639px){
      .price-list_t{ flex-direction: column; align-items: flex-start; }
      .price-list_t > span{ font-size: 16px; }
      
      .advantages-old {
    display: flex;
    flex-direction: column;
    margin: 30px 0;
}
    }



:root{
      --bg:#eef3f6;
      --ink:#2c353a;
      --muted:#7d8c93;

      /* палитра под твой дизайн InvestMet */
      --im-accent:#2e6b7a;
      --im-accent-2:#5a8e9e;
      --im-line:#b9d6df;
      --im-soft:#f4f8fa;
      --im-soft-2:#fbfdfe;
      --im-card:#ffffff;
      --im-orange:#F08A2A;
      --im-shadow: 0 10px 26px rgba(20, 45, 55, .10);
    }

 
    /* ============================================================
       ARTICLE LISTS
       База: стили из main.css (как есть) + скин под макеты.
       СЕТКУ/РАЗМЕТКУ НЕ ТРОГАЕМ.
    ============================================================ */

    /* превью-сетка (на боевом обычно bootstrap) */
    .row{ display:flex; flex-wrap:wrap; margin: 0 -10px; }
    .col-xs-6{ width:50%; padding: 0 10px; }
    @media (max-width:639px){ .col-xs-6{ width:100%; } }

    /* ===== BASE (main.css) ===== */
    .article-list,
    .article-lists {
      display: -ms-flexbox;
      display: -webkit-box;
      display: flex;
      -ms-flex-wrap: wrap;
      overflow: hidden;
      flex-wrap: wrap;
    }

    .article-list {
      border: 1px solid #00b6de;
      margin-bottom: 15px;
      padding: 15px;
      min-height: 200px;
    }

    .article-list-img { width: 35%; }

    @media (min-width:1200px) {
      .article-list-img { padding-right: 15px; }
    }

    .article-list-info { width: 65%; }

    .article-list-info_t {
      font-size: 18px;
      font-weight: 600;
      color: #00b6de;
      display: block;
      transition: .25s;
      -webkit-transition: .25s;
      -moz-transition: .25s;
      -o-transition: .25s;
      -ms-transition: .25s;
      margin-bottom: 10px;
    }

    .article-list-info_t:focus,
    .article-list-info_t:hover {
      text-decoration: none;
      color: #ffe400;
    }

    .article-list-info_tx { font-size: 15px; }

    @media (max-width:1199px) {
      .article-list {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        min-height: 350px;
      }
      .article-list-img {
        width: 100%;
        margin-bottom: 15px;
        text-align: center;
      }
      .article-list-info { width: 100%; }
    }

    /* ===== SKIN (под твой дизайн) ===== */

    /* чтобы внешние стили не ломали карточки */
    .article-lists, .article-lists *{ box-sizing: border-box; }

    /* важно: не обрезаем тени/скругления */
    .article-lists{ overflow: visible; }

    .article-list{
      border-color: var(--im-line);
      border-radius: 0px 12px 12px 0px;

    -webkit-border-top-left-radius: 0px
    -webkit-border-top-right-radius: 12px
    -webkit-border-bottom-left-radius: 12px
    -webkit-border-bottom-right-radius: 0px
    
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 12px;
    -moz-border-radius-bottomleft: 12px;
    -moz-border-radius-bottomright: 0px;
      background: linear-gradient(180deg, var(--im-soft-2), #fff);
      box-shadow: var(--im-shadow);
      padding: 14px;
      gap: 14px;
      position: relative;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    /* Чередующиеся «плашки» */
    .article-lists .col-xs-6:nth-child(odd) .article-list{
      background: linear-gradient(180deg, rgba(90,142,158,.12), #fff);
    }
    /* каждая вторая — чуть светлее */
    .article-lists .col-xs-6:nth-child(even) .article-list{
      background: linear-gradient(180deg, rgba(46,107,122,.06), #fff);
    }

    /* Небольшой акцент-метка слева */
    .article-list::before{
      content:"";
      position:absolute;
      left: 0;
      top: 0px;
      bottom: 0px;
      width: 4px;
      border-radius: 999px;
      background: rgba(46,107,122,.28);
    }

    .article-list:hover{
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(20,45,55,.12);
      border-color: rgba(46,107,122,.35);
    }

    .article-list-img{
      overflow: hidden;
      border-radius: 10px;
    }

    .article-list_img{
      display:block;
      width:100%;
      height:auto;
      border-radius: 10px;
      transform: scale(1);
      transition: transform .25s ease;
    }

    .article-list:hover .article-list_img{ transform: scale(1.03); }

    .article-list-info{ display:flex; flex-direction:column; }

    .article-list-info_t{
      color: var(--im-accent);
      font-weight: 800;
      letter-spacing: .15px;
      line-height: 1.25;
      margin-bottom: 8px;
    }

    .article-list-info_t:hover{ color: var(--im-orange); }

    .article-list-info_tx{
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    /* Последний элемент — цветовой акцент */
    .article-lists .col-xs-6:last-child .article-list{
      border-color: rgba(240,138,42,.55);
      background: linear-gradient(180deg, rgba(240,138,42,.16), #fff);
      box-shadow: 0 16px 34px rgba(240,138,42,.14);
    }

    .article-lists .col-xs-6:last-child .article-list::before{
      background: var(--im-orange);
      box-shadow: 0 0 0 3px rgba(240,138,42,.18);
    }

    .article-lists .col-xs-6:last-child .article-list .article-list-info_t{
      color: #B85C12;
    }

    .article-lists .col-xs-6:last-child .article-list .article-list-info_t:hover{
      color: var(--im-orange);
    }

    @media (max-width:1199px){
      .article-list{ padding: 14px 14px 16px; }
      .article-list::before{ top: 12px; bottom: 12px; }
    }

    @media (max-width:639px){
      .article-list{ border-radius: 12px; }
      /* на мобиле делаем метку сверху, чтобы не «ломала» восприятие */
      .article-list::before{
        left: 10px;
        right: 10px;
        top: 0;
        bottom: auto;
        height: 4px;
        width: auto;
      }
      .article-list-img{ border-radius: 12px; }
      .article-list_img{ border-radius: 12px; }
      .article-list-info_t{ text-align: left; }
    }


.main_header { display: block; }

.mid .arrow{
  display:block;
}

.mid.is-reverse .arrow{
  transform: scaleX(-1);
  transform-origin: 50% 50%;
}

.arrow{ display:block; }


/* ===== PRICE LIST: фикс переполнения и динамика колонок ===== */
.price-list, .price-list * { box-sizing: border-box; }

/* 1) Убираем 21.5% + 79.5% (101%) и переводим в flex-раскладку */
.price-list .price-list-head,
.price-list .price-list-lv2-list {
  display: flex;
}

.price-list .price-list-head_t,
.price-list .price-list-lv2-list_t {
  width: auto !important;
  flex: 0 0 22% !important;
  max-width: 22%;
}

.price-list .price-list-head-cat,
.price-list .price-list-lv2-list-prices {
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0;
}

/* 2) Шапка: физики/розница и юрики/опт */
.price-list .price-list-head-cat {
  display: flex;
}

.price-list .price-list-head-cat-roz,
.price-list .price-list-head-cat-opt {
  width: auto !important;
  min-width: 0;
}

.price-list .price-list-head-cat-roz { flex: 0 0 65.46%; }
.price-list .price-list-head-cat-opt { flex: 0 0 34.54%; }

/* Заголовки и нижние подписи в шапке */
.price-list .price-list-head-cat-roz { flex-wrap: wrap; }
.price-list .price-list-head-cat-roz_t,
.price-list .price-list-head-cat-opt_t { flex: 0 0 100%; }

/* Важно: убиваем inline width:50% и делим автоматически */
.price-list .price-list-head-cat-roz_btm {
  width: auto !important;
  flex: 1 1 0;
}

.price-list .price-list-head-cat-opt_btm { flex: 0 0 100%; }

/* 3) Тело: последняя колонка (юрики) фиксированная, остальные делятся поровну */
.price-list .price-list-lv2-list-prices { display: flex; }

.price-list .price-list-lv2-list_price {
  width: auto !important;
  flex: 1 1 0;
  min-width: 0;
}

.price-list .price-list-lv2-list_price:last-child {
  flex: 0 0 34.54%;
}

/* 4) Мобильный фикс: отменяем жесткие 33.4% */
@media (max-width: 639px) {
  .price-list .price-list-lv2-list_price {
    width: auto !important;
    flex: 1 1 0 !important;
  }
  /* если на мобиле хочешь все цены одинаковой ширины, раскомментируй */
  /* .price-list .price-list-lv2-list_price:last-child { flex: 1 1 0 !important; } */
}


/* ===== price-table (старый table) под стиль прайсов ===== */
.price-table{
  margin: 20px 0;
  border: 1px solid #cce4ef;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  font-family: inherit;
}

.price-table table{
  width: 100%;
  border-collapse: collapse;
}

.price-table th,
.price-table td{
  padding: 14px 16px;
  border-right: 1px solid #cce4ef;
  border-bottom: 1px solid #cce4ef;
  vertical-align: middle;
  font-size: 14px;
  line-height: 1.25;
}

.price-table tr > *:last-child{ border-right: 0; }
.price-table tr:last-child > *{ border-bottom: 0; }

/* верхняя шапка */
.price-table tr:first-child th{
  background: #eaf4f9;
  color: #0b5163;
  font-weight: 700;
  font-size: 18px;
  text-align: left;
}

/* строка с колонками (вид лома / цены) */
.price-table tr:nth-child(2) td{
  background: #f6fbfe;
  font-weight: 600;
  color: #2d3a40;
}

/* промежуточные заголовки разделов */
.price-table th[colspan]{
  background: #f3f8fb;
  color: #0b5163;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
}

/* немного “табличной” читабельности в строках */
.price-table tbody tr td:first-child{
  font-weight: 600;
  color: #2d3a40;
}

/* адаптив: превращаем в карточки */
@media (max-width: 640px){
  .price-table{
    border-radius: 10px;
  }

  .price-table table,
  .price-table tbody,
  .price-table tr,
  .price-table th,
  .price-table td{
    display: block;
    width: 100%;
  }

  .price-table tr{
    border-bottom: 1px solid #cce4ef;
  }

  .price-table tr > *{
    border-right: 0;
    border-bottom: 0;
    padding: 12px 14px;
  }

  .price-table tr:first-child th{
    font-size: 16px;
  }

  /* строку “заголовков колонок” делаем обычным блоком */
  .price-table tr:nth-child(2) td{
    background: #f6fbfe;
  }

  /* разделители между “строками данных” */
  .price-table tr + tr{
    border-top: 1px solid #cce4ef;
  }
}




/* Фиксы старого дизайна */

/* Для текстовых без отступа и всего остального */

.categ-tx, .tx, .prod-tx, .point-tx2, .rezka-tx, .point-list {
    background: #fff;
    border: none !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0px;
    padding: 0px;
    margin: 21px 0;
}

.v-point, .v-point-tx, .v-point-city, .v-point-area, .prc-tx  {
    background: #fff;
    border: none !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0px;
    padding: 0px;
    margin: 21px 0;
}


/* Для блоков с картинками */

.point-slogan, .point-tx, .categ-subcat, .categ-preim, .prc-slogan {
    border: 1px solid #dfe6e7;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 7px;
    padding: 21px;
}

.prod-slogan, .prod-slogan-top, .prod-slogan-btm, .buying_up, .sect  {
    border: 1px solid #b5b5b5;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 25px 20px 30px;
    margin: 21px 0;
}

.rezka-preim {
    border: 1px solid #b5b5b5;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 25px 20px 30px;
    margin: 21px 0;
}

.reasons .adv-list .adv-item .adv-ico {
    display: none;
}

.categ-preim {
    background: #fff;
    border: 1px solid #00b6de;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 7px;
    padding: 15px 20px;
    margin: 30px 0;
}


.rezka-preim-list {
    padding: 7px 10px 7px 100px;
    margin: 3px 0;
    position: relative;
    background-repeat: no-repeat;
    background-position: 50px 10px;
    background-color: rgb(230 236 237 / 40%);
    font-size: 16px;
    line-height: 19px;
    color: #187a87;
}


.faq {
    background-color: #fafafa;
    border: 1px solid #f4f6f6;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 7px;
    padding: 21px;
    margin: 21px 0;
}

.faq-list_t:after {
    content: "+";
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 0;
    border: 1px solid #d5e1e4;
    border-radius: 50%;
    color: #d5e1e4;
    line-height: 28px;
    text-align: center;
    font-size: 20px;
}

.prod-slogan-top-tx {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 444px;
    max-width: 100%;
    background: rgb(38 58 63 / 80%);
    padding: 30px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    margin: 0 -10px;
}

.row2 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin: 0 -10px;
}

//* База: кружок чекбокса */
form.bmcalc-body.form-get-price-form label.bmconsent[data-bm-check] > .bmr-dot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #cfe6ee;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

/* Внутренняя точка (появится при checked) */
form.bmcalc-body.form-get-price-form label.bmconsent[data-bm-check] > .bmr-dot::after{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #cfe6ee;
  transform: scale(0);
  opacity: 0;
  transition: transform .12s ease, opacity .12s ease;
}

/* Состояние checked без перестановки DOM: через :has() */
form.bmcalc-body.form-get-price-form label.bmconsent[data-bm-check]:has(#bm-consent:checked) > .bmr-dot{
  background: #cfe6ee;
  border-color: #cfe6ee;
}

form.bmcalc-body.form-get-price-form label.bmconsent[data-bm-check]:has(#bm-consent:checked) > .bmr-dot::after{
  background: #2b7a8b; /* можно убрать, если нужна просто заливка */
  transform: scale(1);
  opacity: 1;
}

/* Фокус с клавиатуры */
form.bmcalc-body.form-get-price-form label.bmconsent[data-bm-check]:has(#bm-consent:focus-visible) > .bmr-dot{
  outline: 2px solid #2b7a8b;
  outline-offset: 2px;
}

label.bmconsent[data-bm-check]{
  display: inline-flex;
  gap: 10px;
  align-items: flex-start;
}

/* сам кружок */
label.bmconsent input[type=checkbox] {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;

  box-sizing: border-box !important;
  border-radius: 999px !important;
  border: 2px solid #cfe6ee !important;
  background: transparent !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Селективно только для твоей формы */
form.bmcalc-body.form-get-price-form label.bmconsent{
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
}

/* Делаем input видимым и стилизуем */
form.bmcalc-body.form-get-price-form label.bmconsent #bm-consent{
  position: static !important;
  opacity: 1 !important;

  width: 18px;
  height: 18px;
  flex: 0 0 18px;

  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;

  border-radius: 999px;
  border: 2px solid #cfe6ee;
  background: transparent;

  display: inline-grid;
  place-content: center;

  margin: 0;
}

/* Точка внутри при checked */
form.bmcalc-body.form-get-price-form label.bmconsent #bm-consent::after{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2b7a8b;
  transform: scale(0);
  opacity: 0;
  transition: transform .12s ease, opacity .12s ease;
}

form.bmcalc-body.form-get-price-form label.bmconsent #bm-consent:checked{
  background: #cfe6ee;
  border-color: #cfe6ee;
}

form.bmcalc-body.form-get-price-form label.bmconsent #bm-consent:checked::after{
  transform: scale(1);
  opacity: 1;
}

.show-block .row  {
  align-items: center;
  justify-content: space-between;
  align-content: space-between;
  align-content: justify;
}

.show-block .top_header-content {
    justify-content: space-between;
    width: 100%;
}

.top-baner .row {
  flex-direction: row;
}

/* investmet-mega-menu.css
   Styles for investmet-mega-menu.js
   Load AFTER main.css/new.css (and after any legacy menu CSS).
*/

/* ========= Guards (only when JS enables modes) ========= */

/* Hide legacy cascades (nested UL are kept only as data source) */
html.mega-enhanced-desktop #top-menu ul ul,
html.mega-enhanced-phone   #top-menu ul ul{
  display:none !important;
}

/* Desktop: keep the original top row visible */
html.mega-enhanced-desktop #top-menu .top-menu__mobilebar{ display:none !important; }

/* Phone mode: replace top row with a single button */
html.mega-enhanced-phone #top-menu .top-menu_menu{ display:none !important; }
html.mega-enhanced-phone #top-menu .top-menu__mobilebar{ display:flex !important; }

/* Scroll lock (matches JS: html.is-mega-open) */
html.is-mega-open{ overflow:hidden; }

/* ========= Top level arrows ========= */

/* Make marker clickable only for top-level folders (JS binds click there) */
html.mega-enhanced-desktop #top-menu .top-menu_menu > li.top-menu_item__top.top-menu_item__folder > .top-menu_folder-marker,
html.mega-enhanced-phone   #top-menu .top-menu_menu > li.top-menu_item__top.top-menu_item__folder > .top-menu_folder-marker{
  cursor:pointer;
  user-select:none;
}

/* Normalize marker: hide legacy ">" glyph and draw chevron */
html.mega-enhanced-desktop #top-menu .top-menu_folder-marker,
html.mega-enhanced-phone   #top-menu .top-menu_folder-marker{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  margin-left:6px;

  font-size:0;
  line-height:0;
  opacity:1;
}

html.mega-enhanced-desktop #top-menu .top-menu_folder-marker::before,
html.mega-enhanced-phone   #top-menu .top-menu_folder-marker::before{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid rgba(255,255,255,.92);
  border-bottom:2px solid rgba(255,255,255,.92);
  transform:rotate(45deg);
  transform-origin:50% 50%;
  transition:transform 160ms ease, opacity 160ms ease;
  opacity:.95;
}

/* Flip arrow when this top item is active (JS sets li.is-mega-active) */
html.mega-enhanced-desktop #top-menu .top-menu_menu > li.top-menu_item__top.is-mega-active > .top-menu_folder-marker::before,
html.mega-enhanced-phone   #top-menu .top-menu_menu > li.top-menu_item__top.is-mega-active > .top-menu_folder-marker::before{
  transform:rotate(-135deg);
  opacity:1;
}

/* Desktop: spacing in the top row (as requested: space-between) */
html.mega-enhanced-desktop #top-menu .top-menu_menu{
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  gap:0;
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
}

html.mega-enhanced-desktop #top-menu .top-menu_menu > li.top-menu_item__top{
  display:flex;
  align-items:stretch;
  position:relative;
  border-bottom:0;
  justify-content: flex-end;
}

/* Folder: link stretches, marker sits at the right edge */
html.mega-enhanced-desktop #top-menu .top-menu_menu > li.top-menu_item__top.top-menu_item__folder > .top-menu_link{
  flex:1 1 auto;
}

/* Make top-level marker a proper click target */
html.mega-enhanced-desktop #top-menu .top-menu_menu > li.top-menu_item__top.top-menu_item__folder > .top-menu_folder-marker{
width: 34px;
    transform: none;
    top: 0;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ========= Mobile button (created by JS) ========= */

#top-menu .top-menu__mobilebar{
  display:none;
  padding:10px 0;
}

#top-menu .top-menu__mobilebtn{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: #eaf5f7;
    font: inherit;
    font-weight: 600;
    font-size: 21px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

#top-menu .top-menu__mobilebtn::after{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid rgba(255,255,255,.92);
  border-bottom:2px solid rgba(255,255,255,.92);
  transform:rotate(45deg);
  transform-origin:50% 50%;
  transition:transform 160ms ease, opacity 160ms ease;
  opacity:.95;
  flex:0 0 auto;
}

#top-menu .top-menu__mobilebtn[aria-expanded="true"]::after{
  transform:rotate(-135deg);
  opacity:1;
}

/* ========= Backdrop + Panel ========= */

/* Backdrop starts under the top menu on desktop (JS sets --mega-top) */
.mega-backdrop{
  position:fixed;
  left:0;
  right:0;
  top:var(--mega-top, 0px);
  bottom:0;

  background:rgba(0,0,0,0);
  display:none;

  z-index:9998;
}
.mega-backdrop.is-open{
  display:block;
  background:rgba(0,0,0,.18);
}
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
  .mega-backdrop.is-open{
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

/* Panel wrapper */
.mega{
  position:fixed;
  left:0;
  right:0;
  top:var(--mega-top, 0px);
  bottom:0;

  display:none;
  z-index:9999;

  padding:10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  pointer-events:none;
}
.mega.is-open{ display:block; }

.mega__inner{
  pointer-events:auto;

  width:100%;
  max-width:1200px;            /* as requested */
  margin:0 auto;

  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 18px 55px rgba(0,0,0,.22);
  overflow:hidden;

  display:flex;
  flex-direction:column;
  min-height:0;

  position:relative;
  max-height:calc(100vh - var(--mega-top, 0px) - 26px);
}
@supports (height: 100dvh){
  .mega__inner{ max-height:calc(100dvh - var(--mega-top, 0px) - 26px); }
}

.mega__close{
  position:absolute;
  top:10px;
  right:10px;

  width:40px;
  height:40px;

  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;

  cursor:pointer;
  display:grid;
  place-items:center;

  font-size:20px;
  line-height:1;
  color:#1b2a30;
}
.mega__close:hover{ background:rgba(22,92,108,.06); }

.mega__crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  padding:14px 56px 14px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:linear-gradient(180deg, rgba(15,66,80,.06), rgba(15,66,80,0));

  flex:0 0 auto;
}

.crumb{
  appearance:none;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;

  border-radius:999px;
  padding:10px 14px;

  font:inherit;
  font-weight:800;
  cursor:pointer;

  display:inline-flex;
  align-items:center;

  min-height:40px;
  max-width:100%;
}
.crumb[aria-current="true"]{ background:#f2f6f8; }

.mega__scroll{
  flex:1 1 auto;
  min-height:0;

  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

.mega__cols{
  --cols:3;
  display:grid;
  grid-template-columns:repeat(var(--cols), minmax(0, 1fr));
}
.mega__col{ border-left:1px solid rgba(0,0,0,.08); }
.mega__col:first-child{ border-left:0; }

.mega__list{
  list-style:none;
  margin:0;
  padding:10px;

  display:grid;
  gap:6px;
}

/* Basic item button */
.mega__item{
  width:100%;
  text-align:left;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:10px 10px;

  border-radius:12px;
  border:1px solid transparent;
  background:transparent;

  cursor:pointer;
  font:inherit;
  color:#0c1a1f;
}
.mega__item:hover{ background:rgba(22,92,108,.06); }

.mega__item[data-has-children="1"]::after{
  content:"›";
  opacity:.55;
  font-size:18px;
  line-height:1;
  transform:translateY(-1px);
}

/* Folder row: link + next button */
.mega__row{
  display:flex;
  align-items:stretch;
  gap:6px;
}

.mega__item-link{
  flex:1 1 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:10px 10px;

  border-radius:12px;
  border:1px solid transparent;
  background:transparent;

  font:inherit;
  color:#0c1a1f;
  text-decoration:none;
}
.mega__item-link:hover{ background:rgba(22,92,108,.06); }

.mega__item-next {
    flex: 0 0 40px;
    opacity: .85;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    color: #1b2a30;
}
.mega__item-next:hover{ background:rgba(22,92,108,.06); }

/* ========= Phone: fullscreen popup ========= */
html.mega-enhanced-phone .mega{
  top:0 !important;
  padding:0;
}
html.mega-enhanced-phone .mega-backdrop{
  top:0 !important;
}
html.mega-enhanced-phone .mega__inner{
  max-width:none;
  margin:0;

  height:100%;
  max-height:none;

  border-radius:0;
  border-left:0;
  border-right:0;
}

html.mega-enhanced-phone .mega__cols{ --cols:1; }

html.mega-enhanced-phone .mega__crumbs{
  flex-wrap:nowrap;
  overflow:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:12px 56px 12px 12px;
}
html.mega-enhanced-phone .mega__crumbs::-webkit-scrollbar{ display:none; }

html.mega-enhanced-phone .crumb{
  flex:0 0 auto;
  white-space:nowrap;
  max-width:78vw;
  overflow:hidden;
  text-overflow:ellipsis;

  min-height:38px;
  padding:9px 12px;
}

/* focus */
.mega__close:focus-visible,
.crumb:focus-visible,
.mega__item:focus-visible,
.mega__item-link:focus-visible,
.mega__item-next:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(25,118,210,.22);
}

.h-fixed_massangers {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 0px;
}
.h-fixed_massangers {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0px 10px;
    list-style: none;
    /* text-align: left; */
    background-color: inherit;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

#top-menu .top-menu_folder-marker{ pointer-events:none; }
#top-menu .top-menu_menu > li.top-menu_item__top.top-menu_item__folder > .top-menu_folder-marker{
  pointer-events:auto;
  cursor:pointer;
}
#top-menu .top-menu_folder-marker:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(25,118,210,.22);
  border-radius: 10px;
}

.top-menu_item__top>.top-menu_link {
    display: block;
    cursor: pointer;
    color: #fff;
    border: none;
}

.top-menu_folder-marker {
    padding: 5px;
    content: ">";
    color: #fff;
}

@media (min-width: 1200px) {
    .top-menu_item__top.top-menu_item__folder>.top-menu_link {
        padding-right: 37px;
    }
}

.bc_form .fancybox-skin {
    background: #006278 !important;
    border-radius: 7px;
    color: #fff;
}

.top-menu.fixed {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1001;
}

.ph-title {
    display: none;
}

.breadcrumb {
    padding: 0px;
    margin: 20px 0px;
    list-style: none;
    background: inherit;
    border-radius: 0px;
}

.point-list-metal-list:not(:last-child) {
    margin-bottom: 3px;
    display: flex;
}