/* ===== Overlay + slide panel ===== */


.mobile-menu-wrap {
  display: flex;
    justify-content: space-between;
    height: 60px;
    align-items: center;
    padding: 0 15px;
}


@media (min-width:1024px) {
  .mobile-menu-wrap {
    display: none;
  }
}



.mobile-menu-wrap  .custom-logo-link {
  width: 15.5rem;
   border-right: 0; 
   height: auto; 
   flex: unset;
}

@media (max-width:1023px) {
  .header-top , .header-main {
    display: none;
  }
}


.mh-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:10000;

  /* для плавного появления затемнения */
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}

.mh-overlay.is-open{
  opacity:1;
  visibility:visible;
}

.mh-panel{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:min(86vw, 420px);
  background:#fff;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:18px 18px 28px;

  /* выезд слева */
  transform:translateX(-100%);
  transition:transform .28s ease;
  will-change:transform;
}

.mh-overlay.is-open .mh-panel{
  transform:translateX(0);
}

/* lock body */
body.mh-lock{ overflow:hidden; }

/* ===== Close button (X) ===== */
.mh-close{
  appearance:none;
  border:0;
  background:transparent;
  width:44px;
  height:44px;
  position:relative;
  cursor:pointer;
  margin-left:auto;
  display: none;
}

.mh-close::before,
.mh-close::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:22px;
  height:2px;
  background:#111;
  transform-origin:center;
}

.mh-close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.mh-close::after { transform:translate(-50%,-50%) rotate(-45deg); }

/* ===== Burger morph to X ===== */
.mh-burger{
  appearance:none;
  border:0;
  background:transparent;
  padding:10px;
  cursor:pointer;
  position:relative;
  z-index:10001;
}

.mh-burger__box{
  display:inline-block;
  width:28px;
  height:20px;
  position:relative;
}

.mh-burger__inner{
  position:absolute;
  left:0;
  top:50%;
  width:28px;
  height:2px;
  background:#fff;
  transform:translateY(-50%);
  transition:transform .22s ease, background .22s ease;
}

.mh-burger__inner::before,
.mh-burger__inner::after{
  content:"";
  position:absolute;
  left:0;
  width:28px;
  height:2px;
  background:#fff;
  transition:transform .22s ease, top .22s ease, opacity .18s ease;
}

.is-active .mh-burger__inner, .is-active .mh-burger__inner::before,
.is-active .mh-burger__inner::after{
  background:#000;
}

.mh-burger__inner::before{ top:-8px; }
.mh-burger__inner::after { top: 8px; }

/* when open */
.mh-burger.is-active .mh-burger__inner{
  background:transparent; /* средняя линия исчезает */
}

.mh-burger.is-active .mh-burger__inner::before{
  top:0;
  transform:rotate(45deg);
}

.mh-burger.is-active .mh-burger__inner::after{
  top:0;
  transform:rotate(-45deg);
}

/* ===== Menu styles ===== */
.mh-nav{ margin-top:50px; }

.mh-menu{
  list-style:none;
  margin:0;
  padding:0;
}

.mh-menu li{
  border-bottom:1px solid #eee;
}

.mh-menu a{
  display:block;
  padding:14px 10px;
  text-decoration:none;
  color:#111;
  font-size:18px;
}

/* submenu */
.mh-menu .sub-menu{
  list-style:none;
  margin:0;
  padding:0 0 10px 14px;
  display:none;
}

.mh-menu li.is-open > .sub-menu{
  display:block;
}

/* visual indicator for parent items */
.mh-menu .menu-item-has-children > a{
  position:relative;
  padding-right:34px;
}

.mh-menu .menu-item-has-children > a::after{
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  width:10px;
  height:10px;
  border-right:2px solid #111;
  border-bottom:2px solid #111;
  transform:translateY(-50%) rotate(45deg);
  transition:transform .2s ease;
}

.mh-menu li.is-open > a::after{
  transform:translateY(-50%) rotate(-135deg);
}

/* END mobile-menu */


/* =======================================================================
   ADAPTIVE (MOBILE + TABLETS) — up to 1023px
   Учитывает ориентацию экрана (portrait/landscape)
   Добавь этот блок В КОНЕЦ style.css (после всех текущих правил)
======================================================================= */

/* ---------- <= 1023px (общие правила для планшетов/мобилок) ---------- */
@media (max-width: 1023px){
	
	.tab-border {
    justify-content: space-evenly;
}

  /* базовая типографика/контейнер */
  html{ font-size: 56.25%; } /* ~9px, чтобы rem не был слишком огромным */
  .container{ padding: 0 1.6rem; }

  section{ padding: 3rem 0; }

  /* заголовки и тексты (уменьшаем гигантские rem) */
  .h2{ font-size: 3.2rem; }
  .h3{ font-size: 1.8rem; text-align: left; }
  h3{ font-size: 2.0rem; }
  h4{ font-size: 1.8rem; }
  .muted{ font-size: 2.0rem; text-align: left; }

  /* ---------- Header ---------- */
  .top-nav{
    gap: 1.6rem;
    padding: 1.2rem 0;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .top-nav::-webkit-scrollbar{ display:none; }
  .top-nav a{ font-size: 1.4rem; white-space: nowrap; }

  .header-row{
    gap: 1.4rem;
    padding: 1.2rem 0;
    flex-wrap: wrap;
  }

  .custom-logo-link{
    width: auto;
    border-right: 0;
    flex: 0 0 auto;
  }
  .custom-logo{ height: 3.2rem; }

  .header-row-area{
    width: 100%;
    flex-wrap: wrap;
    gap: 1.2rem;
    justify-content: space-between;
  }

  .town{ width: auto; }

  .work-area{
    font-size: 1.4rem;
    order: 3;
    flex: 1 1 100%;
  }

  .header-right{
    gap: 1.2rem;
    margin-left: auto;
  }

  .phone__link{ font-size: 1.6rem; }
  .phone__hours{ font-size: 1.2rem; }

  .btn{
    font-size: 1.6rem;
    padding: 1rem 1.6rem;
  }

  /* ---------- HERO ---------- */
  .hero{
    margin-top: 6rem;              /* меньше, т.к. шапка на мобилке выше/ниже */
    height: 62rem;   /* svh лучше на мобильных (адресная строка) */
    min-height: 60rem;
  }

  .hero__grid{
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2.2rem;
    padding: 2rem 0;
  }

  .hero__left,
  .hero__right{
    flex: 1 1 auto;
    width: 100%;
  }

  .hero__title{
    margin-top: 10rem;
    font-size: 4.2rem;
    line-height: 1.05;
  }
  .hero__title-accent{
    margin: 1.2rem 0 0 0;
    font-size: 4.2rem;
  }
  .hero__lead{
    margin: 2rem 0 1rem;
    font-size: 3.2rem;
  }
  .hero__bullets{
    margin: 2rem 0 0;
    padding-left: 2.2rem;
  }
  .hero__bullets li{ font-size: 1.8rem; }

  .hero__actions{
    width: 100%;
    gap: 1rem;
  }
  .hero__actions .btn{
    width: 100%;
    justify-content: center;
  }

  .hero__badge{ display:none; } /* чтобы не перекрывала контент */
  .hero__scroll_wrap{ display:none; }

  /* ---------- Tabs / Catalog card ---------- */
  .tab-border{
    padding: 1.2rem 1.6rem;
    height: auto;
    border-radius: 2.8rem;
  }
  .nav-link{ font-size: 1.8rem; }

  .catalog-card{
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 0;
  }
  .catalog-card__media{ flex: 0 0 auto; }
  .ph--card{
    width: 100%;
    height: 32rem;
  }

  .price{
    font-size: 2.2rem;
    text-align: left;
    margin: 1.6rem 0;
  }

  .catalog-card__actions{
    justify-content: flex-start;
    gap: 1rem;
  }
  .catalog-card__actions .btn{
    width: 100%;
    justify-content: center;
  }

  .potolok-subtitle{ margin: 1.6rem 0; }
  .potolok-subtitle p,
  .potolok-subtitle a,
  .potolok-subtitle li,
  .potolok-subtitle{
    font-size: 1.6rem;
  }

  /* ---------- Stats ---------- */
  .stats__grid{
    flex-direction: column;
    gap: 1.2rem;
  }
  .stat{
    height: auto;
    padding: 2.4rem;
  }
  .stat__num{ font-size: 5rem; }
  .stat__text{ font-size: 2.2rem; text-align: left; margin-top: .6rem; }
  .stat__text-big{ font-size: 2.6rem; height: auto; }

  /* ---------- Works ---------- */
  .works__grid{
    height: auto;
    flex-direction: column;
    gap: 2rem;
  }

  .work-small,
  .work-big{
    width: 100%;
    height: 34rem;
  }

  .work-item-1,
  .work-item-2{
    top: auto;
    bottom: auto;
    position: relative;
  }

  .work__cap{ font-size: 1.6rem; }

  /* на тач-устройствах hover-оверлей не обязателен */
  .cart--work::before{ opacity: 1; transform: translate(-50%,-50%); font-size: 1.6rem; }
  .cart--work::after{ opacity: .25; }

  /* ---------- Forms (FOS) ---------- */
  .fos-wrap{
    flex-direction: column;
    padding: 2.2rem 2rem;
    gap: 2rem;
  }
  .fos-title{ font-size: 2.6rem; }
  .fos-subtitle{ font-size: 1.4rem; }

  .inline-input{
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
  }

  input[type="text"],
  input[type="tel"]{
    width: 100%;
    height: 4.8rem;
    font-size: 1.8rem;
  }

  .input-label p{ font-size: 1.6rem; }
  ::placeholder{ font-size: 1.6rem; }
  .wpcf7-list-item-label{ font-size: 1.6rem; }

  input.btn{
    min-width: 0;
    width: 100%;
  }

  .acceptance{ max-width: 100%; }

  /* ---------- Map (Yandex) ---------- */
  .yandex-map-wrapper{
    grid-template-columns: 1fr;
    height: auto;
    row-gap: 1.2rem;
  }
  .yandex-map-wrapper .object-list{
    max-height: 26rem;
    padding-right: .6rem;
  }
  .object-list h3{ font-size: 1.8rem; padding: 0 1.6rem; }
  .object-list-item{ font-size: 1.6rem; padding-left: 1.6rem; padding-right: 1.6rem; }
  .ymap-container{ min-height: 34rem; }

  /* ---------- Team circles ---------- */
  .team-block{ padding: 3rem 0; }
  .team-block__inner{
    height: auto;
    min-height: 56rem;
  }

  .team-card{
    position: relative;
    left: auto;
    top: auto;
    margin-bottom: 2rem;
  }

  .team-card__photo--big,
  .team-card__photo--small{
    width: 28rem;
    height: 28rem;
    margin: 0 auto;
  }

  .team-card__title{
    position: static;
    transform: none!important;
    text-align: center;
    margin-top: 1.2rem;
    white-space: normal;
    font-size: 2.2rem;
  }
  .team-card__title span{ font-size: 1.8rem; }

  /* ---------- Accordion ---------- */
  .accordion-button{
    padding: 2rem 1.2rem 2rem 1.6rem;
    font-size: 2.2rem;
  }
  .accordion-button::after{
    width: 3.6rem;
    height: 3.6rem;
    background-size: 2rem;
  }
  .accordion-body,
  .accordion-body p,
  .accordion-body a,
  .accordion-body li{
    font-size: 1.8rem;
  }
  .accordion-body{ padding: 1rem 1.2rem 1.2rem 1.6rem; }

  /* ---------- Partners ---------- */
  .partners__grid{
    gap: 1rem;
    justify-content: center;
  }
  .partner{
    width: calc(50% - .5rem);
    flex: 0 0 calc(50% - .5rem);
    aspect-ratio: 1 / 1;
  }

  /* ---------- Footer ---------- */
  footer{
    padding: 3rem 1.6rem;
  }
  .footer-wrap{
    flex-direction: column;
    gap: 2.2rem;
  }
  .footer-col{ flex: 1 1 auto; }
  footer p{ font-size: 1.4rem; }

  /* ---------- Breadcrumbs / content pages ---------- */
  .breadcrums{
    padding-top: 7rem;
    margin-top: 2rem;
  }

  .project-content{
    margin: 3rem 0 0 0;
  }
  .project-content p,
  .project-content a,
  .project-content li{
    font-size: 1.6rem;
  }

  .content p,
  .content a,
  .content li{
    font-size: 1.6rem;
  }

  /* ---------- Catalog projects ---------- */
  .catalog-project-wrap{
    gap: 1.2rem;
    justify-content: center;
  }
  .catalog-project-item{
    width: 100%;
    max-width: 48rem;
  }
  .catalog-project-item__border{
    width: 100%;
    height: 42rem;
  }
  .catalog-project-item__title{ font-size: 1.8rem; padding: 1.2rem; }

  /* ---------- Gallery ---------- */
  .gallary__grid{ gap: 1rem; }
  .gallary-item{
    width: calc(25% - .5rem);
    height: 20rem;
    padding: 1.2rem;
  }
  .gallary-item-title{ font-size: 1.6rem; }

  .gallary-item-wrap .gallary-item{
    width: 100%;

  }

  /* ---------- Modal menu ---------- */
  .modal-menu .modal-dialog{
    width: auto;
    min-width: 0;
    max-width: 90%;
    margin: 1.2rem auto;
  }
  .modal-menu .modal-body{ padding: 2rem 1.6rem 2.4rem; }
  .modal-menu ul.fakturi{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 1rem;
  }
  .modal-menu ul.fakturi > li > a{ font-size: 1.6rem; }
  .modal-menu .modal-header-title{ font-size: 3.2rem; }
}

/* ---------- Телефоны: <= 767px ---------- */
@media (max-width: 767px){
  html{ font-size: 56.25%; } /* оставляем ~9px */

  .h2{ font-size: 2.8rem; }
  .hero__title,
  .hero__title-accent{ font-size: 3.6rem; }
  .hero__lead{ font-size: 2.8rem; }



  .gallary-item{
    width: calc(50% - .5rem);
    height: 22rem;
    margin-bottom: 4rem;
  }

  .ph--card{ height: 28rem;margin-bottom: 4rem; }
  .work-small,
  .work-big{ height: 28rem; margin-bottom: 4rem;}

  /* контакты */
  .kontakti-block{ gap: 2rem; }
  .kontakti-block-item__tel a{ font-size: 2.4rem; }
  .kontakti-block-item__info{ font-size: 1.6rem; }
}

/* ---------- Очень маленькие: <= 479px ---------- */
@media (max-width: 479px){
  .btn{ width: 100%; }
  .top-nav{ gap: 1.2rem; }
  .top-nav a{ font-size: 1.3rem; }

  .hero{ min-height: 58rem; }
  .hero__bullets li{ font-size: 1.6rem; }

  .accordion-button{ font-size: 2.0rem; }
  .accordion-body,
  .accordion-body p,
  .accordion-body a,
  .accordion-body li{ font-size: 1.6rem; }

  .team-card__photo--big,
  .team-card__photo--small{
    width: 24rem;
    height: 24rem;
  }
}

/* ---------- ORIENTATION: landscape (<=1023px) ---------- */
@media (max-width: 1023px) and (orientation: landscape){
  /* чтобы hero не был слишком высоким в альбомной ориентации */
  .hero{
    min-height: 48rem;
    height: auto;
    padding: 2rem 0;
  }

  .hero__grid{
    flex-direction: row;
    align-items: center;
  }

  .hero__title,
  .hero__title-accent{ font-size: 3.4rem; }
  .hero__lead{ font-size: 2.6rem; }

  .hero__actions .btn{
    width: auto;
  }

  .work-small,
  .work-big{
    height: 26rem;
  }

  .yandex-map-wrapper .object-list{ max-height: 22rem; }
  .ymap-container{ min-height: 28rem; }
}

/* ---------- ORIENTATION: portrait (<=1023px) ---------- */
@media (max-width: 1023px) and (orientation: portrait){
  .hero__actions .btn{ width: 100%; }
}