﻿

@media(max-width:900px){
  
  #hdr-a > * { display:none !important; }
  #hdr-a > a:first-child { display:flex !important; }
  #hdr-a .burger, #hdr-a > button.burger { display:flex !important; }
  #hdr-a, .hdr {
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding:0 14px !important;
  }

  
  
  .hnav, .hna, .hph, .hbtn,
  .hpills, .hdiv,
  .hpill, .hpill-dot { display:none !important; }

  
  .burger { display:flex !important; }

  
  .hdr {
    padding:0 14px !important;
    justify-content:space-between !important;
  }

  
  .hero-ticker { display:flex !important; right:0 !important; }
}
.mob-menu-btn { display:none !important; }

.mob-menu-btn{
  display:none;
  flex-direction:column;gap:5px;
  width:40px;height:40px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;
  cursor:pointer;align-items:center;justify-content:center;
  flex-shrink:0;margin-left:auto;
  transition:background .2s;
}
.mob-menu-btn:hover{background:rgba(255,255,255,.1)}
.mob-menu-btn span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .25s}
.mob-menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mob-menu-btn.open span:nth-child(2){opacity:0}
.mob-menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mob-drawer{
  position:fixed;inset:0;z-index:850;
  background:rgba(7,9,13,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;flex-direction:column;padding:80px 28px 100px;
  overflow-y:auto;
  transform:translateX(-100%);transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.mob-drawer.open{transform:translateX(0)}
.mob-drawer-link{
  display:block;padding:16px 0;
  font-family:'Exo 2',sans-serif;font-size:1.5rem;font-weight:700;
  color:rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .15s;
}
.mob-drawer-link:hover{color:#fff}
.mob-drawer-link.on{color:#5DCDE8}
.mob-drawer-sub{display:flex;flex-direction:column;gap:4px;padding:8px 0 12px 16px}
.mob-drawer-sub a{font-size:.9375rem;color:rgba(255,255,255,.5);padding:6px 0;display:block;transition:color .15s}
.mob-drawer-sub a:hover{color:#fff}
.mob-drawer-actions{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.mob-drawer-cta{padding:14px;background:#00A8C8;color:#fff;font-family:'Manrope',sans-serif;font-size:1rem;font-weight:700;border:none;border-radius:8px;cursor:pointer;text-align:center}
.mob-drawer-tel{padding:13px;background:transparent;color:#fff;font-family:'Manrope',sans-serif;font-size:1rem;font-weight:600;border:1px solid rgba(255,255,255,.2);border-radius:8px;text-align:center;display:block}

.mob-nav-bottom{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:800;
  background:rgba(7,9,13,.96);border-top:1px solid rgba(0,168,200,.12);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));
}
.mob-nav-inner{display:flex;align-items:stretch;justify-content:space-around}
.mob-nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 12px;color:rgba(255,255,255,.5);font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:color .15s;flex:1;min-width:0}
.mob-nav-item:hover,.mob-nav-item.on{color:#00A8C8}
.mob-nav-item svg{width:20px;height:20px;flex-shrink:0}
@media(max-width:768px){
  .mob-nav-bottom{display:flex}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}

@media(max-width:768px){
  .container{padding:0 16px!important;margin:0 auto!important}
  
  .hero-main .container,
  .hero-body .container,
  .hero-ct .container,
  .hero-content .container{padding:0 16px!important}
  
  .hero-text,.hero-h1-new,.hero-sub-new,.hero-btns-new,
  .hero-tag-new,.hero-stat-row,.hero-sr{margin-left:0!important;padding-left:0!important}
}
@media(max-width:480px){
  .container{padding:0 14px!important}
}

@media(max-width:768px){
  .hero-new{min-height:90vh}
  
  .hero-new{justify-content:center!important;align-items:flex-start!important}
  .hero-main{margin-top:auto!important;padding-bottom:24px!important}
  .hero-panel{display:none!important}
  
  .hero-main,.hero-content{
    padding-right:0!important;
    padding-left:0!important;
    margin-left:0!important;
    width:100%!important;
  }
  .hero-h1-new{font-size:clamp(1.875rem,8.5vw,2.625rem)!important;line-height:1.05!important;margin-bottom:12px!important}
  .hero-sub-new{font-size:.9375rem!important;line-height:1.55!important;opacity:.75!important;margin-bottom:20px!important}
  .hero-btns-new{margin-bottom:24px!important}
  .hero-stat-row,.hero-sr{
    display:flex!important;
    flex-direction:row!important;
    justify-content:space-between!important;
    align-items:flex-start!important;
    gap:4px!important;
    padding-bottom:80px!important;
    border-top:1px solid rgba(255,255,255,.1)!important;
    padding-top:16px!important;
    margin-top:0!important;
  }
  .hero-si,.hero-stat-item{
    flex:1!important;
    text-align:center!important;
    border-right:none!important;
    padding:0!important;
    margin:0!important;
    min-width:0!important;
  }
  .hero-sv,.hero-stat-val{
    font-size:1.0625rem!important;
    display:block!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }
  .hero-sl{
    font-size:.5625rem!important;
    display:block!important;
    line-height:1.35!important;
    opacity:.55!important;
    white-space:nowrap!important;
    margin-top:2px!important;
    letter-spacing:.01em!important;
  }
  .hero-brands,.hero-brand-logos{display:none!important}
  
  .hero-btns-new,.hero-actions{
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    gap:10px!important;
    width:100%!important;
  }
  .hero-btns-new .btn-pr,.hero-actions .btn-pr{
    flex:1!important;
    justify-content:center!important;
    text-align:center!important;
    padding:14px 16px!important;
    font-size:.8125rem!important;
  }
  .hero-btns-new .btn-ol,.hero-actions .btn-ol{
    flex:1!important;
    justify-content:center!important;
    text-align:center!important;
    padding:14px 16px!important;
    font-size:.8125rem!important;
  }
}

@media(max-width:768px){
  .hero{height:52vh!important;min-height:260px!important}
  .htitle{font-size:clamp(1.75rem,7vw,2.5rem)!important}
  .hero-title{font-size:clamp(1.75rem,7vw,2.5rem)!important}
  .hct,.hero-body,.hero-ct{padding-bottom:28px}
}

@media(max-width:768px){
  .svc-grid{grid-template-columns:1fr 1fr!important}
  .svc-cell{height:240px!important}
  .svc-cell.wide{grid-column:span 2!important;height:360px!important}
  .svc-cell.wide .svc-cell-ct{flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;padding:22px 20px!important}
  .svc-cell.wide .svc-cell-title{border-right:none!important;border-bottom:1px solid rgba(255,255,255,.18)!important;padding-right:0!important;padding-bottom:14px!important;margin-bottom:0!important;font-size:1.25rem!important}
  .svc-cell.wide .svc-links{flex-direction:column!important;max-height:400px!important}
}
@media(max-width:480px){
  .svc-grid{grid-template-columns:1fr!important}
  .svc-cell.wide{grid-column:span 1!important;height:360px!important}
}

@media(max-width:768px){
  .fgrid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:480px){
  .fgrid{grid-template-columns:1fr!important}
}

@media(max-width:768px){
  .vgrid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:480px){
  .vgrid{grid-template-columns:1fr 1fr!important}
}

@media(max-width:768px){
  .ytgrid{grid-template-columns:1fr!important}
}

@media(max-width:768px){
  .step,.step.rev{grid-template-columns:1fr!important}
  .step.rev .step-img,.step.rev .step-ct{order:unset!important}
  .step-img{min-height:260px!important}
  .step-ct{padding:28px 22px!important}
  .step-h{font-size:1.375rem!important}
}

@media(max-width:768px){
  .case{grid-template-columns:1fr!important}
  .case-photo{height:240px;min-height:auto!important}
  .case-photo img{position:static!important;width:100%;height:100%}
  .case-info{padding:28px 22px!important}
  .case-stats{grid-template-columns:repeat(3,1fr);gap:12px}
  .cstat-val{font-size:1.5rem!important}
}

@media(max-width:768px){
  .related-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:480px){
  .related-grid{grid-template-columns:1fr!important}
}

@media(max-width:768px){
  .prices-wrap,.prices-layout{grid-template-columns:1fr!important;gap:28px!important}
  .prow-top{flex-wrap:wrap;gap:8px}
  .prow-meta{gap:12px}
  .prow-price{font-size:1rem!important}
}

@media(max-width:768px){
  .svc-card{grid-template-columns:1fr!important}
  .svc-card-img{min-height:200px}
  .svc-card-body{padding:20px 18px!important}
}

@media(max-width:768px){
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px}
  .see-all{align-self:flex-start}
}

@media(max-width:768px){
  .tabs{padding:0 18px!important}
  .tab{padding:12px 14px!important;font-size:.8rem!important}
  .tabs-label{padding:8px 18px 0!important}
}

@media(max-width:768px){
  .signals,.signals-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:480px){
  .signals,.signals-grid{grid-template-columns:1fr!important}
}

@media(max-width:768px){
  .sec{padding:48px 0!important}
  .section{padding:48px 0!important}
  .sec-h,.sh{font-size:clamp(1.5rem,5vw,2rem)!important}
}

@media(max-width:900px){
  .foot-top{grid-template-columns:1fr 1fr!important;gap:28px}
}
@media(max-width:600px){
  .foot-top{grid-template-columns:1fr!important}
  .foot-bot{flex-direction:column;text-align:center;gap:6px}
  .foot-leg{justify-content:center;flex-wrap:wrap;gap:12px}
  
  .gl-g,.gl-s{font-size:80px!important}
  .gl-d,.gl-t,.gl-l,.gl-n,.gl-g2{font-size:44px!important}
}

@media(max-width:768px){
  .about-inner{grid-template-columns:1fr!important}
  .about-studio-img{min-height:260px!important;max-height:300px!important}
  .about-right{padding:28px 0!important}
  .about-nums{grid-template-columns:1fr 1fr!important}
}

@media(max-width:768px){
  .vsm-outer::before,.vsm-outer::after{width:40px!important}
  .story{width:130px!important}
  .vsm-title{font-size:1.25rem!important}
}

@media(max-width:768px){
  .lbt{padding:10px 14px}
  .lbstrip{padding:8px 14px}
  .lbthumb{width:44px;height:44px}
  .lbnav{width:38px;height:38px;font-size:1.25rem}
  .lbprev{left:6px}.lbnext{right:6px}
}

@media(max-width:480px){
  .mbox,.modal-box{padding:28px 18px 22px!important}
  .mrow{grid-template-columns:1fr!important}
  .mttl,.modal-h{font-size:1.375rem!important}
}

@media(max-width:480px){
  .crumbs{font-size:.7rem;gap:5px}
}

@media(max-width:480px){
  .hero-actions,.cta-actions{flex-direction:column;gap:10px}
  .hero-actions a,.hero-actions button,.cta-actions a,.cta-actions button{width:100%;justify-content:center;text-align:center}
}

@media(max-width:900px){
  .vid-player{display:none!important}
}

@media(max-width:768px){
  .ticker-track{animation-duration:3s!important}
  .strip-tr{animation-duration:3s!important}
  .vsm-track{animation-duration:8s!important}
  .brands-track{animation-duration:3s!important}
  .pm-track{animation-duration:8s!important}
  .panel-list-inner{animation-duration:5s!important}
  
  .hero-ticker{
    display:flex!important;
    position:absolute!important;
    top:60px!important;
    left:0!important;
    right:0!important;
    z-index:10!important;
  }
  
  .ticker-track{animation-duration:1.5s!important}
  
  .vsm-track{animation-duration:28s!important}
}

.fsi.wa-btn{display:none}
.fsi.max-btn{display:flex}

.mob-nav-item.wa-link{display:none!important}
.mob-nav-item.max-link{display:flex!important}

@media(max-width:768px){
  @keyframes tickerLoop{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
  .ticker-track{animation-name:tickerLoop;animation-duration:12s!important}
}

@media(max-width:768px){
  
  .rev-summary{grid-template-columns:1fr!important}
  .rev-sum-plat:first-child{border-right:none!important;border-bottom:1px solid var(--brd2)}
  .rev-sum-plat:last-child{border-left:none!important;border-top:1px solid var(--brd2)}
  .rev-sum-center{border-top:1px solid var(--brd2);border-bottom:1px solid var(--brd2);padding:24px 20px!important}
  .rev-sum-plat{padding:20px 24px!important}
  
  .rev-outer{margin:0 -16px!important}
  .rev-track{padding:6px 16px 6px!important}
  .rev-card{width:260px!important}
  
  .rev-cta{flex-direction:column!important;gap:8px!important}
  .rev-cta-btn{width:100%!important;justify-content:center!important}
}
@media(max-width:480px){
  .rev-outer{margin:0 -14px!important}
  .rev-track{padding:6px 14px 6px!important}
  .rev-card{width:240px!important}
  .rev-total{font-size:3rem!important}
}

/* ═══ МОБИЛЬНАЯ ВЕРСИЯ — СТРАНИЦЫ УСЛУГ ═══════════════════════════════ */

/* Hero шапка услуги */
@media(max-width:768px){
  .hero-h1{font-size:clamp(2rem,8vw,3rem)!important;text-transform:none!important;line-height:1.05!important}
  .hero-badge-text{font-size:.5rem!important;letter-spacing:.14em!important}
  .hero-body{padding:56px 0 0!important}

  /* Стат-бар снизу героя */
  .hero-bottom{padding:0!important}
  .hero-stats-bar{flex-wrap:wrap!important;gap:0!important}
  .hstat{width:50%!important;padding:12px 16px!important;border-right:none!important;border-bottom:1px solid rgba(255,255,255,.07)!important}
  .hstat-val{font-size:1.25rem!important}
  .hstat-btns{width:100%!important;padding:12px 16px!important;justify-content:stretch!important;gap:8px!important}
  .hstat-btns .btn-p,.hstat-btns .btn-ph{flex:1!important;justify-content:center!important}
}
@media(max-width:480px){
  .hstat{width:100%!important}
}

/* Sticky навигация */
@media(max-width:768px){
  .inner-nav-wrap{padding:0 8px!important}
  .in-link{padding:0 12px!important;font-size:.75rem!important;height:42px!important}
}

/* Стейтмент блок */
@media(max-width:768px){
  .statement{padding:48px 0!important}
  .stmt-h2{font-size:clamp(1.5rem,6vw,2.25rem)!important;white-space:normal!important}
  .stmt-stats{gap:24px!important}
  .stat-val{font-size:1.75rem!important}
}

/* Шаги процесса */
@media(max-width:768px){
  .steps-sec{padding:48px 0!important}
  .steps-list{margin-top:28px!important}
  .step-img-wrap{max-height:360px!important;min-height:220px!important}
  .step-content{padding:28px 20px!important}
  .step-big-num{font-size:4rem!important;margin-bottom:16px!important}
  .step-title{font-size:1.25rem!important}
}

/* Ценовая таблица */
@media(max-width:768px){
  .pricing-sec{padding:48px 0!important}
  .price-row{padding:14px 16px!important}
  .price-name{font-size:.875rem!important}
  .price-val{font-size:1rem!important}
  .pricing-cta{padding:20px!important}
  .pricing-cta-ph{font-size:1.25rem!important}
}

/* FAQ */
@media(max-width:768px){
  .faq-section{padding:48px 0!important}
  .faq-main-h2{font-size:clamp(1.5rem,5vw,2rem)!important}
  .faq-cats{gap:2px!important}
  .faq-cat-btn{padding:12px 14px!important}
  .faq-seo-q{font-size:.9rem!important;padding:16px 0!important}
}

/* SEO блок */
@media(max-width:768px){
  .seo-section{padding:48px 0!important}
  .seo-main-h2{font-size:clamp(1.5rem,5vw,2rem)!important}
  .seo-toc{display:none!important}
}

/* Похожие услуги */
@media(max-width:768px){
  .related-sec{padding:48px 0!important}
  .related-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}
}
@media(max-width:480px){
  .related-grid{grid-template-columns:1fr!important}
}

/* Форма записи */
@media(max-width:768px){
  .booking{padding:48px 0!important}
  .book-inner{grid-template-columns:1fr!important;gap:32px!important}
  .book-h2{font-size:clamp(1.5rem,5vw,2rem)!important}
  .frow{grid-template-columns:1fr!important;gap:10px!important}
  .form-btn{font-size:.9375rem!important}
  .book-mess{flex-wrap:wrap!important}
}

/* ═══ КАТАЛОГ УСЛУГ (template-uslugi) ═════════════════════════════════ */
@media(max-width:768px){
  .filter-bar{gap:6px!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:8px!important;-webkit-overflow-scrolling:touch!important}
  .f-tab{white-space:nowrap!important;padding:7px 14px!important;font-size:.75rem!important;flex-shrink:0!important}
  .svc-grid{grid-template-columns:1fr!important}
  .cat-title{font-size:1rem!important}
  .svc-name{font-size:.875rem!important}
}

/* ═══ ШАПКА НА МОБИЛЬНОМ ══════════════════════════════════════════════ */
@media(max-width:900px){
  .gh-pills{display:none!important}
  .gh-cta span{display:none!important}
  .gh-inner{height:60px!important;padding:0 16px!important}
  .hero,.hero-new{padding-top:60px!important}
}

/* Фиксированная нижняя панель не перекрывает контент */
@media(max-width:768px){
  footer,.booking,section{padding-bottom-extra:0}
  .foot-bot{padding-bottom:72px!important}
}

/* ═══ ПОРТФОЛИО ════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .pgrid{grid-template-columns:1fr 1fr!important;gap:2px!important}
}
@media(max-width:480px){
  .pgrid{grid-template-columns:1fr!important}
}

/* ═══ ФОТОРАБОТЫ — группы авто ═════════════════════════════════════════ */
@media(max-width:768px){
  /* Заголовок группы */
  .cg-head{gap:8px!important;margin-bottom:14px!important}
  .cg-name{font-size:1.125rem!important}
  .cg-svc{font-size:.6rem!important;padding:3px 9px!important}
  .cg-cnt{font-size:.7rem!important}

  /* Полоса фото */
  .cg-strip-wrap::before,.cg-strip-wrap::after{width:24px!important}
  .cg-strip{gap:4px!important;padding-bottom:16px!important}
  .cg-photo img{width:130px!important;height:180px!important}
  .cg-photo:first-child img{width:180px!important;height:180px!important}

  /* Секции группы */
  .cg{padding:28px 0 0!important}

  /* Счётчик в шапке */
  .pg-stat-n{font-size:2rem!important}

  /* Лайтбокс */
  #plb-prev{left:4px!important;width:40px!important;height:40px!important}
  #plb-next{right:4px!important;width:40px!important;height:40px!important}
  #plb-img{max-width:96vw!important;max-height:80vh!important}
  #plb-bar{padding:10px 16px!important}
  #plb-cap{font-size:.75rem!important}
}
@media(max-width:480px){
  .cg-photo img{width:110px!important;height:155px!important}
  .cg-photo:first-child img{width:155px!important;height:155px!important}
  .cg-name{font-size:1rem!important;word-break:break-word!important}
}

/* ═══ ВИДЕО-КАРТОЧКИ портфолио ══════════════════════════════════════════ */
@media(max-width:768px){
  /* 2 видео-карточки в ряд, чуть меньше высота */
  .vgrid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .vcth{aspect-ratio:3/4!important}  /* менее вытянутые на мобильном */
  .vcpbtn{width:40px!important;height:40px!important}
  .vcpbtn svg{width:16px!important;height:16px!important}
}
@media(max-width:480px){
  .vgrid{grid-template-columns:1fr 1fr!important}
}

/* ═══ КОНТАКТЫ ═════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .contact-grid{grid-template-columns:1fr!important;gap:32px!important}
  .req-strip{flex-wrap:wrap!important}
  .req-cell{min-width:50%!important}
}

/* ═══ КАТЕГОРИИ УСЛУГ ══════════════════════════════════════════════════ */
@media(max-width:768px){
  .svc-list{grid-template-columns:1fr!important}
  .svc-card{grid-template-columns:1fr!important}
  .svc-card-img{height:200px!important}
}

/* ═══ ОБЩЕЕ ════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  h1,h2{word-break:break-word!important}
  img{max-width:100%!important}
  table{display:block!important;overflow-x:auto!important}
}
@media(max-width:480px){
  .container{padding:0 14px!important}
  .sec,.section{padding:40px 0!important}
}

/* ═══ RUTUBE — горизонтальные видео 16:9 ══════════════════════════════ */
@media(max-width:768px){
  #rt-grid{grid-template-columns:1fr!important;gap:14px!important}
  .rt-vcth{aspect-ratio:16/9!important}
  .vm{padding:48px 16px;align-items:center}
  .vmi iframe{max-height:70vh}
}
@media(max-width:480px){
  #rt-grid{grid-template-columns:1fr!important}
}
