/* umka-mobile-bundle — merged 2026-08-10 */
/* --- mobile-tune --- */

/* Mobile tune-up — 2026-03-17 */
.header-quicklink{display:none}
@media (max-width:900px){
  body{padding-bottom:0 !important;}
  .float,
  .floating-cta{display:none !important;}
  .home-page .topbar,
  .page-service .topbar{
    position:sticky;
    top:0;
    z-index:120;
    background:rgba(11,15,20,.88);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  .home-page .topbar__row,
  .page-service .topbar__row,
  .home-page .toprow,
  .page-service .toprow,
  .home-page .navwrap,
  .page-service .navwrap{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:10px;
    min-height:64px;
  }
  .home-page .topbar .nav,
  .page-service .topbar .nav,
  .home-page .top .nav,
  .page-service .top .nav,
  .home-page .topbar .right > .iconbtn,
  .page-service .topbar .right > .iconbtn,
  .home-page .topbar .right > .phone,
  .page-service .topbar .right > .phone,
  .home-page .topbar .right > .btn.btn--accent,
  .page-service .topbar .right > .btn.btn--accent,
  .home-page .top .phone,
  .page-service .top .phone,
  .home-page .top .iconbtn,
  .page-service .top .iconbtn,
  .home-page .top .btn.btn--accent,
  .page-service .top .btn.btn--accent,
  .home-page .top-actions,
  .page-service .top-actions,
  .home-page .nav__dropdown,
  .page-service .nav__dropdown,
  .home-page .nav__dropbtn,
  .page-service .nav__dropbtn{
    display:none !important;
  }
  .home-page .topbar .right,
  .page-service .topbar .right,
  .home-page .top .right,
  .page-service .top .right{
    min-width:0 !important;
    justify-content:flex-end !important;
    gap:8px !important;
  }
  .home-page .brand,
  .page-service .brand{
    min-width:0 !important;
    gap:8px !important;
  }
  .home-page .brand__text,
  .page-service .brand__text,
  .home-page .brand__meta,
  .page-service .brand__meta,
  .home-page .brand span,
  .page-service .brand span,
  .home-page .brand strong,
  .page-service .brand strong,
  .home-page .topbar .brand small,
  .page-service .topbar .brand small,
  .home-page .top .brand small,
  .page-service .top .brand small{
    display:none !important;
  }
  .home-page .brand img,
  .page-service .brand img,
  .home-page .brand__logo,
  .page-service .brand__logo,
  .home-page .logo.js-brand-logo,
  .page-service .logo.js-brand-logo{
    height:30px !important;
    width:auto !important;
  }
  .header-quicklink{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
  }
  .home-page .hamb,
  .page-service .hamb{
    display:grid !important;
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
    flex:0 0 auto;
  }
  .drawer{
    z-index:200 !important;
  }
  .drawer__panel{
    width:min(420px,100vw) !important;
    padding:16px 16px calc(24px + env(safe-area-inset-bottom)) !important;
  }
  .drawer__head{
    align-items:center;
    gap:12px;
  }
  .drawer__head .brand__text,
  .drawer__head .brand__meta,
  .drawer__head .logo-switcher,
  .drawer__head .logo{
    display:none !important;
  }
  .drawer__nav{
    gap:8px !important;
  }
  .drawer__nav > a,
  .drawer__nav > details > summary{
    width:100%;
    display:block;
    padding:14px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
    text-decoration:none;
    font-weight:800;
  }
  .drawer__details{
    border-radius:14px;
    overflow:hidden;
  }
  .drawer__details > summary{
    list-style:none;
    cursor:pointer;
  }
  .drawer__details > summary::-webkit-details-marker{display:none;}
  .drawer__submenu{
    margin:8px 0 0 !important;
    padding:10px 0 0 10px !important;
  }
  .drawer__submenu a{
    font-size:14px !important;
    padding:10px 12px !important;
  }
  .drawer__cta{
    margin-top:12px;
  }
  .drawer__cta .btn{
    min-height:48px;
  }

  .home-page .hero{
    padding:34px 0 18px !important;
  }
  .home-page .hero__grid{
    grid-template-columns:1fr !important;
    gap:16px !important;
    min-height:0 !important;
  }
  .home-page .hero__left{
    padding:0 !important;
  }
  .home-page .visual{
    display:none !important;
  }
  .home-page .hero h1{
    font-size:32px !important;
    line-height:1.14 !important;
    margin:14px 0 10px !important;
  }
  .home-page .hero p{
    font-size:15px !important;
    line-height:1.58 !important;
    margin:12px 0 18px !important;
  }
  .home-page .hero__actions{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:10px !important;
  }
  .home-page .hero__actions .btn{
    width:100% !important;
    min-height:48px;
  }
  .home-page .hero__actions a[href="#contact"],
  .home-page .hero__actions a[href="#services"]{
    display:none !important;
  }
  .home-page .hero__meta{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px !important;
  }
  .home-page .hero__meta .tag{
    text-align:center;
    justify-content:center;
  }
  .home-page .case-slide__actions,
  .home-page .contact .formrow{
    display:grid !important;
    grid-template-columns:1fr;
    gap:10px;
  }
  .home-page .contact .formrow .btn,
  .home-page .case-slide__actions .btn{
    width:100% !important;
  }
  .home-page .photorow,
  .home-page .uigallery,
  .home-page .logos,
  .home-page .details-pro,
  .home-page .casestrip{
    grid-template-columns:1fr !important;
  }
  .home-page .sectionhead{
    align-items:flex-start !important;
  }
  .home-page .sectionhead .pill{
    display:none !important;
  }
}
@media (max-width:560px){
  .header-quicklink{
    padding:0 10px;
    font-size:12px;
  }
  .home-page .hero__actions,
  .home-page .hero__meta{
    grid-template-columns:1fr !important;
  }
}


/* Mobile tune-up — iteration 2 */
@media (max-width:900px){
  .page-case .topbar{
    position:sticky;
    top:0;
    z-index:120;
    background:rgba(11,15,20,.88);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  .page-case .topbar__row,
  .page-case .toprow,
  .page-case .navwrap{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:10px;
    min-height:64px;
  }
  .page-case .topbar .nav,
  .page-case .top .nav,
  .page-case .topbar .right > .iconbtn,
  .page-case .topbar .right > .phone,
  .page-case .topbar .right > .btn.btn--accent,
  .page-case .top .phone,
  .page-case .top .iconbtn,
  .page-case .top .btn.btn--accent,
  .page-case .top-actions,
  .page-case .nav__dropdown,
  .page-case .nav__dropbtn{
    display:none !important;
  }
  .page-case .topbar .right,
  .page-case .top .right{
    min-width:0 !important;
    justify-content:flex-end !important;
    gap:8px !important;
  }
  .page-case .brand{
    min-width:0 !important;
    gap:8px !important;
  }
  .page-case .brand__text,
  .page-case .brand__meta,
  .page-case .brand span,
  .page-case .brand strong,
  .page-case .topbar .brand small,
  .page-case .top .brand small{
    display:none !important;
  }
  .page-case .brand img,
  .page-case .brand__logo,
  .page-case .logo.js-brand-logo{
    height:30px !important;
    width:auto !important;
  }
  .page-case .header-quicklink{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
  }
  .page-case .hamb{
    display:grid !important;
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
    flex:0 0 auto;
  }
  .page-case .drawer{z-index:200 !important;}
  .page-case .drawer__panel{
    width:min(420px,100vw) !important;
    padding:16px 16px calc(24px + env(safe-area-inset-bottom)) !important;
  }
  .page-case .drawer__head{align-items:center;gap:12px;}
  .page-case .drawer__head .brand__text,
  .page-case .drawer__head .brand__meta,
  .page-case .drawer__head .logo-switcher,
  .page-case .drawer__head .logo{display:none !important;}
  .page-case .drawer__nav{gap:8px !important;}
  .page-case .drawer__nav > a,
  .page-case .drawer__nav > details > summary{
    width:100%;
    display:block;
    padding:14px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
    text-decoration:none;
    font-weight:800;
  }
  .page-case .drawer__details{border-radius:14px;overflow:hidden;}
  .page-case .drawer__details > summary{list-style:none;cursor:pointer;}
  .page-case .drawer__details > summary::-webkit-details-marker{display:none;}
  .page-case .drawer__submenu{margin:8px 0 0 !important;padding:10px 0 0 10px !important;}
  .page-case .drawer__submenu a{font-size:14px !important;padding:10px 12px !important;}
  .page-case .drawer__cta{margin-top:12px;}
  .page-case .drawer__cta .btn{min-height:48px;}

  .page-service .hero,
  .page-case .case-hero{padding:22px 0 14px !important;}
  .page-service .hero .container{display:grid;gap:14px;}
  .page-service .heroimg{
    width:100%;
    height:auto;
    display:block;
    border-radius:18px;
  }
  .page-service .hwrap{padding:0 !important;max-width:none !important;}
  .page-service .hero h1{font-size:30px !important;line-height:1.12 !important;margin:10px 0 10px !important;}
  .page-service .hero .lead{font-size:15px !important;line-height:1.58 !important;margin:0 0 16px !important;}
  .page-service .hero .hwrap > div[style*="display:flex"]{
    display:grid !important;
    grid-template-columns:1fr;
    gap:10px !important;
    align-items:stretch !important;
  }
  .page-service .hero .btn{width:100%;justify-content:center;}
  .page-service .hero-points{margin:14px 0 0 !important;padding-left:18px !important;}
  .page-service .section{padding:26px 0 !important;}
  .page-service .grid{gap:14px !important;}
  .page-service .card{padding:18px !important;}
  .page-service .sectionhead{align-items:flex-start !important;}

  .page-case .case-hero__grid{grid-template-columns:1fr !important;gap:14px !important;}
  .page-case .case-hero__media,
  .page-case .case-hero__box{border-radius:18px !important;}
  .page-case .case-hero__media img{min-height:240px !important;}
  .page-case .case-hero__box{padding:18px !important;}
  .page-case .case-hero__box h1{font-size:30px !important;line-height:1.12 !important;margin:8px 0 10px !important;}
  .page-case .case-hero__box p{font-size:15px !important;line-height:1.62 !important;}
  .page-case .case-summary{grid-template-columns:1fr 1fr !important;gap:10px !important;}
  .page-case .case-summary .kpi{padding:14px !important;}
  .page-case .case-summary .kpi strong{font-size:20px !important;}
  .page-case .case-slide__actions{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;}
  .page-case .case-slide__actions .btn,
  .page-case .case-slide__actions button.btn,
  .page-case .case-open-trigger{width:100% !important;}
  .page-case .case-section{padding:14px 0 24px !important;}
  .page-case .sectionhead{align-items:flex-start !important;margin-bottom:14px !important;}
  .page-case .grid{gap:14px !important;}
  .page-case .grid > .card[style*="grid-column:span 4"]{grid-column:1 / -1 !important;}
  .page-case .case-gallery-grid{gap:14px !important;}
  .page-case .case-gallery-card__caption{padding:12px 12px 14px !important;}
}
@media (max-width:560px){
  .page-case .header-quicklink{padding:0 10px;font-size:12px;}
  .page-case .case-summary{grid-template-columns:1fr !important;}
  .page-service .hero h1,
  .page-case .case-hero__box h1{font-size:28px !important;}
}


/* v20260317d swipe feedback */
#projects .slider.slider--swipe-ready{overflow:hidden;overscroll-behavior-x:contain;}
#projects .slider.slider--swipe-ready .slides{transition:transform .42s cubic-bezier(.22,.8,.22,1);will-change:transform;}
#projects .slider.slider--swipe-ready .slides.is-dragging{transition:none !important;cursor:grabbing;}
#projects .slider.slider--swipe-ready .slide{backface-visibility:hidden;transform:translateZ(0);}
.case-modal__media--swipe-ready{overflow:hidden;overscroll-behavior-x:contain;}
.case-modal__media--swipe-ready img{will-change:transform,opacity;backface-visibility:hidden;transform:translateZ(0);}
@media (max-width:980px){
  #projects .slider.slider--swipe-ready,
  #projects .slider.slider--swipe-ready .slides,
  .case-modal__media--swipe-ready{
    touch-action:pan-y pinch-zoom;
    -webkit-user-select:none;
    user-select:none;
  }
}

/* Mobile text flow fix — 2026-04-13 */
@media (max-width:768px){
  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  .home-page .hero,
  .page-service .hero,
  .page-case .case-hero{
    max-width:100vw !important;
    overflow-x:hidden !important;
  }

  .home-page .hero .container,
  .home-page .hero__grid,
  .home-page .hero__left,
  .page-service .hero .container,
  .page-service .hero .hwrap,
  .page-case .case-hero__grid,
  .page-case .case-hero__box{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .home-page .hero__grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
  }

  header.hero.hero--photo-bg-mobile > .container{
    box-sizing:border-box;
    max-width:100vw !important;
    overflow:visible !important;
  }

  header.hero.hero--photo-bg-mobile .hwrap{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .home-page .hero h1,
  .page-service .hero h1,
  .page-case .case-hero__box h1{
    max-width:100% !important;
    font-size:30px !important;
    line-height:1.13 !important;
    letter-spacing:0 !important;
    overflow-wrap:break-word;
    word-break:normal;
  }

  .home-page .hero p,
  .page-service .hero .lead,
  .page-service .hero .hwrap p,
  .page-case .case-hero__box p{
    max-width:100% !important;
    overflow-wrap:break-word;
    word-break:normal;
  }

  .home-page .hero .pill,
  .page-service .hero .pill,
  .home-page .hero .tag,
  .page-service .hero .tag,
  .page-case .pill,
  .tagrow .tag{
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
    text-align:center;
  }

  .home-page .hero__actions,
  .page-service .hero .hwrap > div[style*="display:flex"],
  .page-case .case-slide__actions,
  .ctabtns{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px !important;
  }

  .home-page .hero .btn,
  .page-service .hero .btn,
  .page-case .case-hero .btn,
  .case-slide__actions .btn,
  .ctabtns .btn{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
    text-align:center;
    line-height:1.25;
    padding-left:14px !important;
    padding-right:14px !important;
  }
}

@media (max-width:360px){
  .home-page .hero h1,
  .page-service .hero h1,
  .page-case .case-hero__box h1{
    font-size:27px !important;
    line-height:1.14 !important;
  }

  .home-page .hero p,
  .page-service .hero .lead,
  .page-case .case-hero__box p{
    font-size:14px !important;
    line-height:1.55 !important;
  }

  .header-quicklink,
  .page-case .header-quicklink{
    display:none !important;
  }
}

@media (max-width:900px){
  .page-service .topbar__row{
    grid-template-columns:minmax(0,1fr) auto !important;
    position:relative !important;
    padding-right:58px !important;
  }

  .page-service .topbar .right{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    min-width:0 !important;
  }

  .page-service .header-quicklink{
    display:none !important;
  }

  .page-service .hamb{
    position:absolute !important;
    right:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    background:rgba(255,255,255,.06) !important;
    place-items:center !important;
    z-index:2 !important;
  }

  .page-service .hamb span,
  .page-service .hamb span::before,
  .page-service .hamb span::after{
    content:"" !important;
    display:block !important;
    width:18px !important;
    height:2px !important;
    border-radius:999px !important;
    background:#fff !important;
  }

  .page-service .hamb span{
    position:relative !important;
  }

  .page-service .hamb span::before{
    position:absolute !important;
    top:-6px !important;
    left:0 !important;
  }

  .page-service .hamb span::after{
    position:absolute !important;
    top:6px !important;
    left:0 !important;
  }

  body.page-service #hamb{
    display:grid !important;
    position:fixed !important;
    top:12px !important;
    right:16px !important;
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    background:rgba(255,255,255,.08) !important;
    place-items:center !important;
    z-index:180 !important;
  }

  body.page-service #hamb span,
  body.page-service #hamb span::before,
  body.page-service #hamb span::after{
    content:"" !important;
    display:block !important;
    width:18px !important;
    height:2px !important;
    border-radius:999px !important;
    background:#fff !important;
  }

  body.page-service #hamb span{
    position:relative !important;
  }

  body.page-service #hamb span::before{
    position:absolute !important;
    top:-6px !important;
    left:0 !important;
  }

  body.page-service #hamb span::after{
    position:absolute !important;
    top:6px !important;
    left:0 !important;
  }
}

/* Home hero readability fix — 2026-04-13 */
@media (max-width:768px){
  .home-page .hero{
    padding:22px 0 24px !important;
    min-height:auto !important;
  }

  .home-page .hero .container{
    display:block !important;
    min-height:auto !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .home-page .hero__grid{
    display:block !important;
    min-height:0 !important;
  }

  .home-page .hero__left{
    padding:22px 0 8px !important;
  }

  .home-page .hero .pill{
    display:inline-flex !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:6px !important;
    max-width:100% !important;
    padding:7px 10px !important;
    border-radius:8px !important;
    font-size:12px !important;
    line-height:1.35 !important;
    text-align:left !important;
  }

  .home-page .hero .pill span:nth-child(2){
    display:none !important;
  }

  .home-page .hero h1{
    max-width:12ch !important;
    margin:12px 0 10px !important;
    font-size:28px !important;
    line-height:1.18 !important;
  }

  .home-page .hero p{
    max-width:34ch !important;
    margin:0 0 16px !important;
    font-size:14px !important;
    line-height:1.55 !important;
  }

  .home-page .hero__actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:8px !important;
    max-width:320px !important;
  }

  .home-page .hero .btn{
    min-height:46px !important;
    padding:12px 14px !important;
    border-radius:8px !important;
    font-size:14px !important;
    line-height:1.25 !important;
  }

  .home-page .hero__meta{
    display:none !important;
  }
}

@media (max-width:360px){
  .home-page .hero .container{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .home-page .hero h1{
    font-size:26px !important;
  }

  .home-page .hero p{
    font-size:13.5px !important;
  }
}

/* Home card grid readability fix — 2026-04-13 */
@media (max-width:768px){
  .home-page .grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
  }

  .home-page .grid > .card{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
    padding:14px !important;
    border-radius:12px !important;
  }

  .home-page .card__inner{
    width:100% !important;
    min-width:0 !important;
  }

  .home-page .card h3{
    font-size:17px !important;
    line-height:1.25 !important;
    overflow-wrap:break-word;
  }

  .home-page .card p,
  .home-page .card li{
    font-size:14px !important;
    line-height:1.6 !important;
    overflow-wrap:break-word;
  }

  .home-page #trust .grid{
    gap:14px !important;
  }
}

/* Service hub card grid readability fix - 2026-04-13 */
@media (max-width:768px){
  .page-service .grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
  }

  .page-service .grid > .card{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
    padding:14px !important;
    border-radius:12px !important;
  }

  .page-service .card h2,
  .page-service .card h3{
    font-size:17px !important;
    line-height:1.25 !important;
    overflow-wrap:break-word;
  }

  .page-service .card p,
  .page-service .card li{
    font-size:14px !important;
    line-height:1.6 !important;
    overflow-wrap:break-word;
  }

  .page-service main > .section:first-child{
    padding-top:22px !important;
  }

  .page-service main > .section:first-child h1{
    font-size:28px !important;
    line-height:1.18 !important;
    letter-spacing:0 !important;
    overflow-wrap:break-word;
  }

  .page-service main > .section:first-child .lead,
  .page-service main > .section:first-child .sectionhead p{
    font-size:14px !important;
    line-height:1.55 !important;
  }

  .page-service main > .section:first-child div[style*="display:flex"]{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:8px !important;
    max-width:320px !important;
  }

  .page-service main > .section:first-child .btn{
    width:100% !important;
    min-height:46px !important;
    border-radius:8px !important;
  }
}

/* Hero media: keep the LCP poster discoverable before the video starts. */
.hero-video-bg{
  overflow:hidden;
  background:#05080d;
}
.hero-video-bg .hero-bg-poster,
.hero-video-bg .hero-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.hero-video-bg .hero-bg-poster{
  filter:contrast(1.04) saturate(1.03) brightness(.82);
  transform:scale(1.02);
}
.hero-video-bg .hero-bg-video{
  opacity:0;
  transition:opacity .35s ease;
}
.hero-video-bg .hero-bg-video.is-ready{
  opacity:1;
}
.shot__open picture{
  display:block;
  width:100%;
  height:100%;
}

@media (max-width:360px){
  .page-service main > .section:first-child h1{
    font-size:26px !important;
  }
}

/* Home theater mobile header guard — 2026-05-03 */
body.page-service #hamb{
  display:grid !important;
  position:fixed !important;
  top:12px !important;
  right:16px !important;
  width:42px !important;
  height:42px !important;
  padding:0 !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(11,15,20,.74) !important;
  place-items:center !important;
  z-index:180 !important;
  box-shadow:0 10px 28px rgba(0,0,0,.24) !important;
}

@media (min-width:901px){
  body.page-service #hamb{
    display:none !important;
  }
}

body.page-service #hamb span,
body.page-service #hamb span::before,
body.page-service #hamb span::after{
  content:"" !important;
  display:block !important;
  width:18px !important;
  height:2px !important;
  border-radius:999px !important;
  background:#fff !important;
}

body.page-service #hamb span{
  position:relative !important;
}

body.page-service #hamb span::before,
body.page-service #hamb span::after{
  position:absolute !important;
  left:0 !important;
}

body.page-service #hamb span::before{
  top:-6px !important;
}

body.page-service #hamb span::after{
  top:6px !important;
}

@media (max-width:640px){
  .page-service .hero h1,
  .page-service main > .section:first-child h1{
    font-size:28px !important;
    line-height:1.15 !important;
    letter-spacing:0 !important;
    max-width:100% !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }
}

@media (max-width:380px){
  .page-service .hero h1,
  .page-service main > .section:first-child h1{
    font-size:26px !important;
  }
}

/* Home mobile hero centering fix - 2026-04-17 */
@media (max-width:768px){
  .home-page .hero__left{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
  }

  .home-page .hero .pill{
    justify-content:center !important;
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .home-page .hero h1{
    max-width:13ch !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  .home-page .hero p{
    max-width:31ch !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  .home-page .hero__actions{
    width:100% !important;
    max-width:320px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* Form and quiz UX fix - 2026-04-18 */
.quiz-opt,
.quiz-opt input[type="radio"],
.quiz-form label,
.quiz-form input[type="radio"],
.field label.small,
input[type="radio"],
input[type="checkbox"],
select{
  cursor:pointer !important;
}

.quiz-opt{
  transition:color .18s ease, opacity .18s ease;
}

.quiz-opt:hover,
.quiz-opt:focus-within{
  color:var(--text, #e9eef6) !important;
}

.quiz-opt input[type="radio"],
input[type="checkbox"]{
  accent-color:var(--accent, #d7a544);
}

.quiz-opt input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible,
select:focus-visible{
  outline:2px solid rgba(215,165,68,.88);
  outline-offset:3px;
}

.umka-toast{
  position:fixed;
  left:50%;
  bottom:28px;
  width:min(calc(100% - 32px), 520px);
  z-index:10050;
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(22px);
  transition:opacity .22s ease, transform .22s ease;
}

.umka-toast.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.umka-toast__card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border:1px solid rgba(146,240,166,.28);
  border-radius:8px;
  background:rgba(12,18,17,.94);
  box-shadow:0 18px 60px rgba(0,0,0,.42), 0 0 34px rgba(146,240,166,.10);
  color:var(--text, #e9eef6);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.umka-toast__icon{
  flex:0 0 36px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#92f0a6;
  color:#0b0f14;
  font-size:12px;
  font-weight:900;
  letter-spacing:0;
}

.umka-toast__body{
  min-width:0;
  flex:1;
}

.umka-toast__title{
  display:block;
  font-size:15px;
  line-height:1.25;
  font-weight:900;
}

.umka-toast__text{
  display:block;
  margin-top:2px;
  color:var(--muted, #a9b4c2);
  font-size:13px;
  line-height:1.45;
}

.umka-toast__close{
  flex:0 0 32px;
  width:32px;
  height:32px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:var(--text, #e9eef6);
  cursor:pointer !important;
  font-weight:900;
  line-height:1;
}

@media (max-width:640px){
  .umka-toast{
    bottom:calc(16px + env(safe-area-inset-bottom));
    width:min(calc(100% - 24px), 420px);
  }

  .umka-toast__card{
    align-items:flex-start;
    padding:12px;
  }
}

/* PageSpeed UX fixes - 2026-04-18 */
footer a,
footer .nav__dropbtn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}

footer .small a{
  padding:6px 0;
}

footer .nav__submenu a{
  min-height:44px;
  padding:10px 12px;
}

@media (max-width:640px){
  a.header-tel,
  a[href^="mailto:"]{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }

  footer .small > div{
    margin-top:4px;
  }

footer .small a{
  margin-right:10px;
  }
}

/* Lighting automation page: keep cinematic desktop hero, use a vertical real photo on phones. */
.heroimg--mobile{
  display:none;
}

@media (max-width:768px){
  header.hero.hero--photo-bg-mobile .heroimg--desktop{
    display:none !important;
  }

  header.hero.hero--photo-bg-mobile .heroimg--mobile{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    transform:none !important;
    border:0 !important;
    border-radius:0 !important;
    margin:0 !important;
    object-fit:cover !important;
    object-position:74% center;
  }
}

@media (min-width:769px){
  header.hero.hero--photo-bg-mobile .heroimg--desktop{
    display:block;
  }

  header.hero.hero--photo-bg-mobile .heroimg--mobile{
    display:none !important;
  }
}

/* Mobile header alignment fix - 2026-05-03 */
@media (max-width:900px){
  .home-page .topbar__row,
  .page-service .topbar__row,
  .page-case .topbar__row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    min-height:68px !important;
    padding:10px 0 !important;
    padding-right:0 !important;
    gap:14px !important;
    position:relative !important;
  }

  .home-page .topbar .brand,
  .page-service .topbar .brand,
  .page-case .topbar .brand{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    flex:0 1 auto !important;
  }

  .home-page .topbar .right,
  .page-service .topbar .right,
  .page-case .topbar .right{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    min-width:0 !important;
    margin-left:auto !important;
    gap:0 !important;
  }

  body.home-page #hamb,
  body.page-service #hamb,
  body.page-case #hamb,
  .home-page .hamb,
  .page-service .hamb,
  .page-case .hamb{
    display:grid !important;
    position:static !important;
    inset:auto !important;
    transform:none !important;
    flex:0 0 44px !important;
    width:44px !important;
    height:44px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:14px !important;
    place-items:center !important;
  }
}

/* Service photo hero single-image guard - 2026-05-03 */
@media (max-width:768px){
  .u-cursor,
  .u-cursor__dot,
  .u-cursor__ring,
  .u-cursor__trail{
    display:none !important;
  }

  header.hero.hero--photo-bg-mobile > .container > .heroimg{
    position:absolute !important;
    inset:0 !important;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    object-fit:cover !important;
    object-position:74% center !important;
    transform:none !important;
    z-index:0 !important;
  }
}


/* ===== UmkaPro hero tiles/layout hotfix 2026-06-08 ===== */
html,
body{
  max-width:100%;
  overflow-x:hidden !important;
}
body.home-page .hero{
  overflow:hidden !important;
}
body.home-page .hero > .container{
  width:min(calc(100% - 40px), var(--max, 1160px)) !important;
  max-width:var(--max, 1160px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  display:block !important;
  min-width:0 !important;
}
body.home-page .hero__grid{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(340px, .92fr) !important;
  gap:clamp(18px, 2vw, 26px) !important;
  align-items:stretch !important;
}
body.home-page .hero__left,
body.home-page .visual{
  min-width:0 !important;
  max-width:100% !important;
}
body.home-page .visual{
  width:100% !important;
  overflow:hidden !important;
}
body.home-page .visual__top,
body.home-page .visual__bottom{
  min-width:0 !important;
  max-width:100% !important;
}
body.home-page .visual .pill{
  max-width:100% !important;
  white-space:normal !important;
}
body.home-page .kpis{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
body.home-page .kpi{
  min-width:0 !important;
  max-width:100% !important;
}
body.home-page .kpi strong,
body.home-page .kpi span{
  overflow-wrap:break-word !important;
  word-break:normal !important;
}
@media (max-width:1180px){
  body.home-page .hero > .container{
    width:min(calc(100% - 32px), var(--max, 1160px)) !important;
  }
  body.home-page .hero__grid{
    grid-template-columns:1fr !important;
  }
  body.home-page .visual{
    min-height:auto !important;
  }
}

/* ===== UmkaPro homepage hero polish 2026-06-09 ===== */
body.home-page .visual__top{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  align-items:stretch !important;
  gap:12px !important;
}
body.home-page .visual__top > div:first-child,
body.home-page .visual__top > .pill{
  min-width:0 !important;
  min-height:86px !important;
  padding:12px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.05) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body.home-page .visual__top > .pill{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  white-space:normal !important;
  line-height:1.25 !important;
  color:var(--text) !important;
}
body.home-page .visual__top > .pill b{
  font-size:16px !important;
  line-height:1.18 !important;
  font-weight:850 !important;
}
body.home-page .visual__title{
  font-size:16px !important;
  line-height:1.18 !important;
  font-weight:850 !important;
}
body.home-page .visual__sub{
  max-width:none !important;
  font-size:13px !important;
  line-height:1.35 !important;
}
@media (max-width:1180px) and (min-width:769px){
  body.home-page .hero__grid{
    grid-template-columns:minmax(0, 1fr) minmax(330px, .88fr) !important;
  }
}
@media (max-width:768px){
  body.home-page .hero__left{
    align-items:flex-start !important;
    text-align:left !important;
  }
  body.home-page .hero .pill{
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
    justify-content:flex-start !important;
  }
  body.home-page .hero h1{
    max-width:340px !important;
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
    font-size:30px !important;
    line-height:1.12 !important;
  }
  body.home-page .hero p{
    max-width:350px !important;
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
    font-size:15px !important;
    line-height:1.55 !important;
  }
  body.home-page .hero__actions{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  body.home-page .visual{
    display:flex !important;
    margin-top:16px !important;
    padding:12px !important;
    border-radius:20px !important;
  }
  body.home-page .visual__top{
    grid-template-columns:minmax(0, 1fr) !important;
  }
  body.home-page .visual__top > div:first-child,
  body.home-page .visual__top > .pill{
    min-height:76px !important;
    padding:12px !important;
  }
  body.home-page .kpis{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:8px !important;
  }
  body.home-page .kpi{
    min-height:76px !important;
    padding:10px !important;
    border-radius:14px !important;
  }
  body.home-page .kpi strong{
    font-size:17px !important;
  }
  body.home-page .kpi span{
    font-size:11.5px !important;
    line-height:1.32 !important;
  }
  body.home-page .visual__bottom{
    display:none !important;
  }
}
@media (max-width:380px){
  body.home-page .hero h1{
    font-size:28px !important;
  }
  body.home-page .kpis{
    grid-template-columns:minmax(0,1fr) !important;
  }
}
@media (max-width:640px){
  body.home-page .hero > .container{
    width:min(calc(100% - 28px), var(--max, 1160px)) !important;
  }
  body.home-page .kpis{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
  body.home-page .visual__bottom{
    display:none !important;
  }
  body.home-page .visual__bottom .btn,
  body.home-page .hero__actions .btn{
    width:100% !important;
    justify-content:center !important;
  }
}


/* UmkaPro messenger CTA v20260618 */
.umka-messenger{position:fixed;right:28px;bottom:28px;z-index:10000;font-family:inherit}.umka-messenger__details{position:relative}.umka-messenger__details>summary{list-style:none}.umka-messenger__details>summary::-webkit-details-marker{display:none}.umka-messenger__button{display:flex;align-items:center;gap:18px;min-width:344px;padding:17px 30px 17px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,#8b0618 0%,#a00b23 55%,#7a0618 100%);color:#fff;box-shadow:0 24px 70px rgba(90,0,14,.46),0 6px 22px rgba(0,0,0,.32);cursor:pointer;user-select:none;transition:transform .22s ease,filter .22s ease,box-shadow .22s ease}.umka-messenger__button:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 30px 82px rgba(90,0,14,.56),0 8px 26px rgba(0,0,0,.36)}.umka-messenger__icon{width:54px;height:54px;flex:0 0 54px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}.umka-messenger__text{display:flex;flex-direction:column;line-height:1.08}.umka-messenger__title{font-weight:900;font-size:25px;letter-spacing:.02em}.umka-messenger__subtitle{margin-top:6px;font-weight:800;font-size:14px;letter-spacing:.09em;opacity:.92}.umka-messenger__menu{position:absolute;right:0;bottom:calc(100% + 12px);min-width:250px;padding:10px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:rgba(12,15,20,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 22px 64px rgba(0,0,0,.42);display:grid;gap:6px;transform:translateY(8px);opacity:0;pointer-events:none;transition:.18s ease}.umka-messenger__details[open] .umka-messenger__menu{transform:translateY(0);opacity:1;pointer-events:auto}.umka-messenger__menu a{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-radius:14px;color:#fff;text-decoration:none;font-weight:850;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06)}.umka-messenger__menu a:hover{background:rgba(160,11,35,.32);border-color:rgba(255,255,255,.14)}@media(max-width:760px){body{padding-bottom:calc(96px + env(safe-area-inset-bottom))}.umka-messenger{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom))}.umka-messenger__button{width:100%;min-width:0;padding:13px 18px 13px 14px;gap:13px;border-radius:24px}.umka-messenger__icon{width:46px;height:46px;flex-basis:46px}.umka-messenger__title{font-size:22px}.umka-messenger__subtitle{font-size:12px;letter-spacing:.07em}.umka-messenger__menu{left:0;right:0;min-width:0}}


/* UmkaPro mobile repair pass 20260627 — hero/text/CTA stabilization */
@media (max-width:760px){
  html,
  body{
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* Fixed contact button: smaller, stable, and with enough safe bottom space. */
  html body{
    padding-bottom:calc(108px + env(safe-area-inset-bottom)) !important;
  }
  html body .umka-messenger{
    left:14px !important;
    right:14px !important;
    bottom:calc(12px + env(safe-area-inset-bottom)) !important;
    width:auto !important;
    max-width:none !important;
    z-index:10000 !important;
  }
  html body .umka-messenger__button{
    width:100% !important;
    min-width:0 !important;
    min-height:58px !important;
    padding:10px 14px 10px 12px !important;
    gap:10px !important;
    border-radius:22px !important;
  }
  html body .umka-messenger__icon{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px !important;
  }
  html body .umka-messenger__title{
    font-size:17px !important;
    line-height:1.05 !important;
  }
  html body .umka-messenger__subtitle{
    margin-top:3px !important;
    font-size:10.5px !important;
    line-height:1.15 !important;
    letter-spacing:.055em !important;
    white-space:normal !important;
  }
  html body .umka-messenger__menu{
    left:0 !important;
    right:0 !important;
    min-width:0 !important;
    bottom:calc(100% + 9px) !important;
  }

  /* Service hero cards should not be hidden under the fixed contact button. */
  body.page-service .service-hero-facts,
  body.home-page .hero__proof{
    margin-bottom:88px !important;
  }

  /* Photo hero guard for pages that use hero--photo-bg-mobile. */
  body.page-service header.hero.hero--photo-bg-mobile{
    min-height:100svh !important;
    padding:0 !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile > .container{
    min-height:100svh !important;
    width:100% !important;
    max-width:100vw !important;
    overflow:visible !important;
    display:flex !important;
    align-items:flex-end !important;
    padding:calc(94px + env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom)) !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile > .container > .heroimg{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    transform:none !important;
    z-index:0 !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .hwrap{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* Design page grid/text fix: the global .card grid-column was breaking this block. */
  body.page-design-service .design-lead-grid,
  body.page-design-service .design-feature-grid,
  body.page-design-service .design-package-grid,
  body.page-design-service .design-docs,
  body.page-design-service .design-result-grid,
  body.page-design-service .design-steps,
  body.page-design-service .design-audience{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
    width:100% !important;
    max-width:100% !important;
  }
  body.page-design-service .design-lead-grid > *,
  body.page-design-service .design-feature-grid > *,
  body.page-design-service .design-package-grid > *,
  body.page-design-service .design-docs > *,
  body.page-design-service .design-result-grid > *,
  body.page-design-service .design-steps > *,
  body.page-design-service .design-audience > *{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  body.page-design-service .design-note,
  body.page-design-service .design-feature,
  body.page-design-service .design-package-card,
  body.page-design-service .design-warning,
  body.page-design-service .design-result,
  body.page-design-service .design-step,
  body.page-design-service .design-audience .card,
  body.page-design-service .design-lead-grid > .card{
    padding:18px !important;
    border-radius:18px !important;
  }
  body.page-design-service .design-note strong{
    font-size:24px !important;
    line-height:1.16 !important;
  }
  body.page-design-service .design-note p,
  body.page-design-service .design-note strong,
  body.page-design-service .card p,
  body.page-design-service .card li,
  body.page-design-service .design-feature p,
  body.page-design-service .design-warning li,
  body.page-design-service .design-result p,
  body.page-design-service .design-step p{
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }

  /* Language switch: consistent position below the mobile header. */
  body:not(.en-page) .language-switch{
    top:82px !important;
    right:22px !important;
    z-index:90 !important;
  }
  body.page-service #hamb{
    z-index:180 !important;
  }
}

@media (min-width:761px){
  body.page-design-service .design-lead-grid > .card,
  body.page-design-service .design-audience > .card{
    grid-column:auto !important;
  }
}

/* UmkaPro mobile repair pass 2 — header/order/cards/galleries v20260627mobile2 */
@media (max-width:760px){
  html, body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* Make the late mobile stylesheet the authority after page inline styles. */
  body:not(.en-page) .language-switch,
  body.elektro-page .language-switch,
  body.page-service .language-switch{
    position:fixed !important;
    top:calc(82px + env(safe-area-inset-top)) !important;
    right:18px !important;
    height:44px !important;
    min-width:50px !important;
    padding:0 13px !important;
    border-radius:16px !important;
    z-index:170 !important;
  }

  body:not(.en-page) .topbar{
    z-index:160 !important;
  }
  body:not(.en-page) .topbar .topbar__row,
  body:not(.en-page) .navwrap,
  body:not(.en-page) .toprow{
    min-height:64px !important;
  }
  body:not(.en-page) .topbar .brand,
  body:not(.en-page) .brand{
    min-width:0 !important;
  }
  body:not(.en-page) .topbar .brand__text,
  body:not(.en-page) .brand__meta,
  body:not(.en-page) .brand span{
    display:none !important;
  }
  body:not(.en-page) .topbar .brand img,
  body:not(.en-page) .brand img,
  body:not(.en-page) .brand__logo{
    height:30px !important;
    width:auto !important;
    max-width:142px !important;
  }
  body:not(.en-page) .topbar .right,
  body:not(.en-page) .right{
    gap:8px !important;
  }
  body:not(.en-page) .topbar .phone,
  body:not(.en-page) .topbar .right > .btn,
  body:not(.en-page) .topbar .right > .iconbtn,
  body:not(.en-page) .header-quicklink{
    display:none !important;
  }
  body:not(.en-page) #hamb,
  body:not(.en-page) .hamb{
    display:grid !important;
    width:56px !important;
    height:56px !important;
    border-radius:18px !important;
    z-index:190 !important;
  }

  /* More readable mobile hero text without losing the photo. */
  body.page-service header.hero.hero--photo-bg-mobile::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:
      linear-gradient(180deg, rgba(4,7,10,.58) 0%, rgba(4,7,10,.24) 34%, rgba(4,7,10,.88) 100%),
      linear-gradient(90deg, rgba(4,7,10,.88) 0%, rgba(4,7,10,.58) 42%, rgba(4,7,10,.18) 100%) !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile > .container{
    padding-top:calc(118px + env(safe-area-inset-top)) !important;
    padding-left:18px !important;
    padding-right:18px !important;
    padding-bottom:calc(126px + env(safe-area-inset-bottom)) !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .hwrap,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.show{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    padding:0 !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile h1{
    font-size:clamp(32px, 10vw, 42px) !important;
    line-height:1.07 !important;
    letter-spacing:-.035em !important;
    margin:14px 0 14px !important;
    text-shadow:0 3px 24px rgba(0,0,0,.45) !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .lead{
    font-size:16px !important;
    line-height:1.48 !important;
    max-width:100% !important;
    margin-bottom:18px !important;
    color:rgba(255,255,255,.86) !important;
    text-shadow:0 2px 16px rgba(0,0,0,.35) !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .pill{
    max-width:100% !important;
    white-space:normal !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:12px !important;
    line-height:1.35 !important;
    padding:8px 12px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .hero-actions,
  body.page-service header.hero.hero--photo-bg-mobile .hero__actions,
  body.page-service header.hero.hero--photo-bg-mobile .design-hero__actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .btn,
  body.page-service header.hero.hero--photo-bg-mobile a.btn{
    width:100% !important;
    min-height:54px !important;
    justify-content:center !important;
    border-radius:16px !important;
  }

  /* Compact hero facts so the fixed messenger does not hide the meaning. */
  body.page-service .service-hero-facts{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:9px !important;
    margin-top:16px !important;
    margin-bottom:82px !important;
    width:100% !important;
  }
  body.page-service .service-hero-fact{
    min-width:0 !important;
    padding:12px 14px !important;
    border-radius:16px !important;
    background:rgba(12,16,22,.58) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
  }
  body.page-service .service-hero-fact b{
    font-size:14px !important;
    line-height:1.2 !important;
  }
  body.page-service .service-hero-fact span{
    margin-top:5px !important;
    font-size:12px !important;
    line-height:1.35 !important;
  }

  /* Standard content cards: one column, no accidental narrow columns. */
  body.page-service .grid,
  body.page-service main .grid,
  body.page-service .section .grid,
  body.page-service .cards,
  body.page-service .features,
  body.page-service .price-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
  }
  body.page-service .grid > *,
  body.page-service main .grid > *,
  body.page-service .section .grid > *,
  body.page-service .cards > *,
  body.page-service .features > *,
  body.page-service .price-grid > *{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  body.page-service .card{
    padding:17px !important;
    border-radius:19px !important;
  }
  body.page-service .card h2,
  body.page-service .card h3{
    line-height:1.2 !important;
  }
  body.page-service .card p,
  body.page-service .card li{
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }
  body.page-service .sectionhead{
    display:block !important;
    margin-bottom:14px !important;
  }
  body.page-service .sectionhead h2{
    font-size:26px !important;
    line-height:1.12 !important;
  }
  body.page-service .sectionhead p{
    margin-top:8px !important;
    font-size:15px !important;
    line-height:1.52 !important;
  }

  /* Galleries: keep photos readable and avoid desktop spans on mobile. */
  body.page-service .savant-gallery,
  body.page-service .knx-gallery,
  body.page-service .shchity-gallery,
  body.page-service .case-gallery-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:14px !important;
  }
  body.page-service .savant-gallery__item,
  body.page-service .knx-gallery__item,
  body.page-service .shchity-gallery__item,
  body.page-service .case-gallery-card{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }
  body.page-service .savant-gallery__item img,
  body.page-service .knx-gallery__item img,
  body.page-service .shchity-gallery__item img{
    width:100% !important;
    height:auto !important;
    max-height:360px !important;
    aspect-ratio:4/3 !important;
    object-fit:cover !important;
    border-radius:16px !important;
  }
  body.uslugi-knx .knx-gallery__item img,
  body.uslugi-shchity .shchity-gallery__item img,
  body.uslugi-savant .savant-gallery__item img{
    object-fit:contain !important;
    background:#0b1018 !important;
  }

  /* Dedicated design-service hero and below-hero blocks. */
  body.page-design-service .design-hero{
    min-height:auto !important;
    padding:calc(118px + env(safe-area-inset-top)) 0 calc(122px + env(safe-area-inset-bottom)) !important;
  }
  body.page-design-service .design-hero__content,
  body.page-design-service .design-hero__inner{
    width:100% !important;
    max-width:100% !important;
  }
  body.page-design-service .design-hero h1{
    font-size:clamp(32px, 10vw, 42px) !important;
    line-height:1.07 !important;
    letter-spacing:-.035em !important;
  }
  body.page-design-service .design-hero .lead{
    font-size:16px !important;
    line-height:1.48 !important;
  }
  body.page-design-service .design-hero__meta{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:8px !important;
  }
  body.page-design-service .design-hero__actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px !important;
  }
  body.page-design-service .design-hero__actions .btn{
    width:100% !important;
  }
}

@media (max-width:380px){
  body.page-service header.hero.hero--photo-bg-mobile h1,
  body.page-design-service .design-hero h1{
    font-size:30px !important;
  }
  body:not(.en-page) .language-switch{
    right:14px !important;
  }
}

/* UmkaPro mobile repair pass 3 — lift service heroes and refine homepage text v20260627mobile3 */
@media (max-width:760px){
  /* The previous pass anchored service hero content to the bottom. On real iPhone Safari
     that made almost every service page feel shifted down. Keep the photo hero,
     but start the text block higher and let the section height follow content. */
  body.page-service header.hero.hero--photo-bg-mobile{
    min-height:auto !important;
    height:auto !important;
    overflow:hidden !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile > .container{
    min-height:auto !important;
    height:auto !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    padding-top:72px !important;
    padding-left:18px !important;
    padding-right:18px !important;
    padding-bottom:calc(104px + env(safe-area-inset-bottom)) !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile .hwrap,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.show{
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile h1{
    font-size:clamp(34px, 9.2vw, 40px) !important;
    line-height:1.06 !important;
    margin-top:12px !important;
    margin-bottom:14px !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile .lead{
    margin-bottom:18px !important;
    font-size:16px !important;
    line-height:1.48 !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile .pill{
    width:max-content !important;
    max-width:100% !important;
    justify-content:flex-start !important;
    text-align:left !important;
    margin-top:0 !important;
  }

  body.page-service .service-hero-facts{
    margin-top:14px !important;
    margin-bottom:72px !important;
  }

  /* Wi-Fi has chips instead of fact cards; keep them visible above the fixed button. */
  body.page-service .keyword-list,
  body.page-service .chips,
  body.page-service .hero-tags{
    margin-bottom:72px !important;
  }

  /* EN should not visually create an empty band between header and hero copy. */
  body:not(.en-page) .language-switch,
  body.elektro-page .language-switch,
  body.page-service .language-switch{
    top:calc(72px + env(safe-area-inset-top)) !important;
    right:18px !important;
    z-index:170 !important;
  }

  /* Homepage: make the hero copy look intentional on mobile, not like raw text
     floating over the image/video. */
  body.home-page .hero{
    min-height:auto !important;
    height:auto !important;
    padding-top:26px !important;
    padding-bottom:calc(112px + env(safe-area-inset-bottom)) !important;
  }

  body.home-page .hero > .container{
    width:min(calc(100% - 34px), var(--max, 1160px)) !important;
  }

  body.home-page .hero__grid{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }

  body.home-page .hero__left{
    width:100% !important;
    max-width:100% !important;
    padding:18px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:24px !important;
    background:linear-gradient(180deg, rgba(7,10,15,.72), rgba(7,10,15,.44)) !important;
    box-shadow:0 22px 70px rgba(0,0,0,.26) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
  }

  body.home-page .hero .pill{
    max-width:100% !important;
    margin:0 0 12px !important;
    padding:8px 12px !important;
    font-size:12px !important;
    line-height:1.3 !important;
    white-space:normal !important;
  }

  body.home-page .hero h1{
    max-width:100% !important;
    margin:0 0 14px !important;
    font-size:clamp(34px, 9.2vw, 40px) !important;
    line-height:1.06 !important;
    letter-spacing:-.04em !important;
    text-wrap:balance !important;
    text-shadow:0 3px 26px rgba(0,0,0,.42) !important;
  }

  body.home-page .hero p{
    max-width:100% !important;
    margin:0 0 18px !important;
    font-size:15.5px !important;
    line-height:1.52 !important;
    color:rgba(255,255,255,.86) !important;
    text-shadow:0 2px 18px rgba(0,0,0,.34) !important;
  }

  body.home-page .hero__actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px !important;
    width:100% !important;
    margin:0 !important;
  }

  body.home-page .hero__actions .btn,
  body.home-page .hero__actions a.btn{
    width:100% !important;
    min-height:54px !important;
    justify-content:center !important;
    border-radius:16px !important;
  }

  body.home-page .visual{
    margin-top:14px !important;
    padding:14px !important;
    border-radius:22px !important;
    background:rgba(7,10,15,.46) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
  }

  body.home-page .visual__top > div:first-child,
  body.home-page .visual__top > .pill,
  body.home-page .kpi{
    background:rgba(7,10,15,.58) !important;
    border-color:rgba(255,255,255,.12) !important;
  }
}

@media (max-width:380px){
  body.page-service header.hero.hero--photo-bg-mobile h1,
  body.home-page .hero h1{
    font-size:32px !important;
  }
}


/* UmkaPro mobile repair pass 4 — unified mobile hero style v20260627mobile4 */
@media (max-width:760px){
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* One mobile header rhythm on all Russian pages. */
  body:not(.en-page) .topbar{
    position:sticky !important;
    top:0 !important;
    z-index:240 !important;
    background:rgba(6,10,15,.94) !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    backdrop-filter:blur(16px) !important;
    -webkit-backdrop-filter:blur(16px) !important;
  }
  body:not(.en-page) .topbar > .container{
    width:100% !important;
    max-width:none !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
  body:not(.en-page) .topbar__row,
  body:not(.en-page) .navwrap,
  body:not(.en-page) .toprow{
    min-height:64px !important;
    padding:9px 0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }
  body:not(.en-page) .topbar .brand img,
  body:not(.en-page) .brand img,
  body:not(.en-page) .brand__logo,
  body:not(.en-page) .logo.js-brand-logo{
    height:30px !important;
    width:auto !important;
    max-width:150px !important;
  }
  body:not(.en-page) #hamb,
  body:not(.en-page) .hamb{
    width:54px !important;
    height:54px !important;
    flex:0 0 54px !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.055) !important;
    border:1px solid rgba(255,255,255,.15) !important;
    box-shadow:none !important;
  }

  body:not(.en-page) .language-switch,
  body.elektro-page .language-switch,
  body.page-service .language-switch{
    position:fixed !important;
    top:calc(76px + env(safe-area-inset-top)) !important;
    right:18px !important;
    height:44px !important;
    min-width:52px !important;
    padding:0 13px !important;
    border-radius:16px !important;
    background:rgba(8,12,18,.82) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    z-index:210 !important;
  }

  /* Unified service hero: image background + compact glass text card. */
  body.page-service header.hero.hero--photo-bg-mobile{
    position:relative !important;
    display:block !important;
    min-height:620px !important;
    height:auto !important;
    padding:0 !important;
    overflow:hidden !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:
      linear-gradient(180deg, rgba(5,8,12,.60) 0%, rgba(5,8,12,.34) 34%, rgba(5,8,12,.84) 100%),
      linear-gradient(90deg, rgba(5,8,12,.86) 0%, rgba(5,8,12,.60) 48%, rgba(5,8,12,.22) 100%) !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile > .container{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    max-width:none !important;
    min-height:620px !important;
    height:auto !important;
    display:block !important;
    padding:92px 18px calc(98px + env(safe-area-inset-bottom)) !important;
    margin:0 !important;
    overflow:visible !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile > .container > .heroimg,
  body.page-service header.hero.hero--photo-bg-mobile .heroimg--desktop,
  body.page-service header.hero.hero--photo-bg-mobile .heroimg--mobile{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    min-height:100% !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    transform:none !important;
    filter:saturate(1.02) contrast(1.03) brightness(.82) !important;
    z-index:0 !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .hwrap,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.show{
    position:relative !important;
    z-index:3 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:18px !important;
    border:1px solid rgba(255,255,255,.13) !important;
    border-radius:24px !important;
    background:linear-gradient(180deg, rgba(7,10,15,.68), rgba(7,10,15,.42)) !important;
    box-shadow:0 20px 60px rgba(0,0,0,.28) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .pill{
    width:auto !important;
    max-width:100% !important;
    display:inline-flex !important;
    justify-content:flex-start !important;
    text-align:left !important;
    white-space:normal !important;
    flex-wrap:wrap !important;
    margin:0 0 12px !important;
    padding:7px 10px !important;
    border-radius:14px !important;
    font-size:12px !important;
    line-height:1.32 !important;
    color:rgba(233,238,246,.72) !important;
    background:rgba(255,255,255,.055) !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile h1{
    max-width:100% !important;
    margin:0 0 13px !important;
    font-size:clamp(30px, 8.4vw, 36px) !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
    text-shadow:0 3px 24px rgba(0,0,0,.42) !important;
    overflow-wrap:break-word !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .lead,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap p.lead{
    max-width:100% !important;
    margin:0 0 16px !important;
    font-size:15.5px !important;
    line-height:1.5 !important;
    color:rgba(255,255,255,.86) !important;
    text-shadow:0 2px 18px rgba(0,0,0,.30) !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .hwrap > div[style*="display:flex"],
  body.page-service header.hero.hero--photo-bg-mobile .hero-actions,
  body.page-service header.hero.hero--photo-bg-mobile .hero__actions,
  body.page-service header.hero.hero--photo-bg-mobile .design-hero__actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:9px !important;
    margin-top:0 !important;
    width:100% !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .btn,
  body.page-service header.hero.hero--photo-bg-mobile a.btn{
    width:100% !important;
    min-height:50px !important;
    justify-content:center !important;
    border-radius:16px !important;
    padding:12px 14px !important;
    font-size:15px !important;
    line-height:1.24 !important;
  }

  /* Remove overloaded below-button facts from mobile hero. They are repeated lower on the page. */
  body.page-service header.hero.hero--photo-bg-mobile .service-hero-facts,
  body.page-service header.hero.hero--photo-bg-mobile .keyword-list,
  body.page-service header.hero.hero--photo-bg-mobile .chips,
  body.page-service header.hero.hero--photo-bg-mobile .hero-tags{
    display:none !important;
  }

  /* Design-service page uses its own hero class; make it match service pages. */
  body.page-design-service .design-hero{
    position:relative !important;
    display:block !important;
    min-height:620px !important;
    height:auto !important;
    padding:0 !important;
    align-items:initial !important;
    overflow:hidden !important;
  }
  body.page-design-service .design-hero__image{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    filter:saturate(1.02) contrast(1.03) brightness(.82) !important;
  }
  body.page-design-service .design-hero__inner{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    max-width:none !important;
    min-height:620px !important;
    display:block !important;
    padding:92px 18px calc(98px + env(safe-area-inset-bottom)) !important;
    margin:0 !important;
  }
  body.page-design-service .design-hero__content,
  body.page-design-service .design-hero__content.reveal,
  body.page-design-service .design-hero__content.show{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:18px !important;
    border:1px solid rgba(255,255,255,.13) !important;
    border-radius:24px !important;
    background:linear-gradient(180deg, rgba(7,10,15,.68), rgba(7,10,15,.42)) !important;
    box-shadow:0 20px 60px rgba(0,0,0,.28) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    opacity:1 !important;
    transform:none !important;
  }
  body.page-design-service .design-hero__kicker{
    margin:0 0 8px !important;
    font-size:11px !important;
    line-height:1.25 !important;
    letter-spacing:.08em !important;
  }
  body.page-design-service .design-hero .pill{
    margin:0 0 12px !important;
    padding:7px 10px !important;
    border-radius:14px !important;
    font-size:12px !important;
    line-height:1.32 !important;
    justify-content:flex-start !important;
    text-align:left !important;
  }
  body.page-design-service .design-hero h1{
    max-width:100% !important;
    margin:0 0 13px !important;
    font-size:clamp(30px, 8.4vw, 36px) !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
    overflow-wrap:break-word !important;
  }
  body.page-design-service .design-hero .lead{
    max-width:100% !important;
    margin:0 0 16px !important;
    font-size:15.5px !important;
    line-height:1.5 !important;
  }
  body.page-design-service .design-hero__actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:9px !important;
    width:100% !important;
  }
  body.page-design-service .design-hero__actions .btn{
    width:100% !important;
    min-height:50px !important;
    border-radius:16px !important;
  }
  body.page-design-service .design-hero__meta{
    display:none !important;
  }

  /* Home page: same visual language as service pages. */
  body.home-page .hero{
    position:relative !important;
    display:block !important;
    min-height:620px !important;
    height:auto !important;
    padding:0 !important;
    overflow:hidden !important;
  }
  body.home-page .hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:
      linear-gradient(180deg, rgba(5,8,12,.58) 0%, rgba(5,8,12,.30) 34%, rgba(5,8,12,.84) 100%),
      linear-gradient(90deg, rgba(5,8,12,.88) 0%, rgba(5,8,12,.62) 52%, rgba(5,8,12,.22) 100%) !important;
  }
  body.home-page .hero > .container{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    max-width:none !important;
    min-height:620px !important;
    display:block !important;
    padding:82px 18px calc(98px + env(safe-area-inset-bottom)) !important;
    margin:0 !important;
  }
  body.home-page .hero__grid{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }
  body.home-page .hero__left,
  body.home-page .hero__left.reveal,
  body.home-page .hero__left.show{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:18px !important;
    align-items:flex-start !important;
    text-align:left !important;
    border:1px solid rgba(255,255,255,.13) !important;
    border-radius:24px !important;
    background:linear-gradient(180deg, rgba(7,10,15,.68), rgba(7,10,15,.42)) !important;
    box-shadow:0 20px 60px rgba(0,0,0,.28) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    opacity:1 !important;
    transform:none !important;
  }
  body.home-page .hero .pill{
    max-width:100% !important;
    margin:0 0 12px !important;
    padding:7px 10px !important;
    border-radius:14px !important;
    font-size:12px !important;
    line-height:1.32 !important;
    justify-content:flex-start !important;
    text-align:left !important;
  }
  body.home-page .hero h1{
    max-width:100% !important;
    margin:0 0 13px !important;
    font-size:clamp(30px, 8.4vw, 36px) !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
    text-align:left !important;
  }
  body.home-page .hero p{
    max-width:100% !important;
    margin:0 0 16px !important;
    font-size:15.5px !important;
    line-height:1.5 !important;
    color:rgba(255,255,255,.86) !important;
    text-align:left !important;
  }
  body.home-page .hero__actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:9px !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }
  body.home-page .hero__actions .btn,
  body.home-page .hero__actions a.btn{
    width:100% !important;
    min-height:50px !important;
    justify-content:center !important;
    border-radius:16px !important;
    padding:12px 14px !important;
    font-size:15px !important;
  }
  body.home-page .hero__meta,
  body.home-page .hero__proof,
  body.home-page .visual{
    display:none !important;
  }

  /* Messenger: keep it compact so it does not eat the first screen. */
  html body{
    padding-bottom:calc(86px + env(safe-area-inset-bottom)) !important;
  }
  html body .umka-messenger{
    left:14px !important;
    right:14px !important;
    bottom:calc(12px + env(safe-area-inset-bottom)) !important;
    z-index:10000 !important;
  }
  html body .umka-messenger__button{
    min-height:56px !important;
    padding:9px 14px 9px 12px !important;
    border-radius:20px !important;
  }
}

@media (max-width:380px){
  body.page-service header.hero.hero--photo-bg-mobile,
  body.page-service header.hero.hero--photo-bg-mobile > .container,
  body.page-design-service .design-hero,
  body.page-design-service .design-hero__inner,
  body.home-page .hero,
  body.home-page .hero > .container{
    min-height:590px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile > .container,
  body.page-design-service .design-hero__inner,
  body.home-page .hero > .container{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .hwrap,
  body.page-design-service .design-hero__content,
  body.home-page .hero__left{
    padding:16px !important;
    border-radius:22px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile h1,
  body.page-design-service .design-hero h1,
  body.home-page .hero h1{
    font-size:29px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .lead,
  body.page-design-service .design-hero .lead,
  body.home-page .hero p{
    font-size:14.5px !important;
  }
}


/* Mobile tune-up — iteration 5 unified top-overlay hero */
@media (max-width:900px){
  /* Shared service-page hero: text over image, aligned to top, transparent card */
  body.page-service header.hero.hero--photo-bg-mobile{
    position:relative !important;
    overflow:hidden !important;
    min-height:620px !important;
    padding:0 !important;
    background:#08101a !important;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  body.page-service header.hero.hero--photo-bg-mobile::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
      linear-gradient(180deg, rgba(5,10,18,.54) 0%, rgba(5,10,18,.36) 22%, rgba(5,10,18,.50) 60%, rgba(5,10,18,.72) 100%),
      linear-gradient(90deg, rgba(5,10,18,.38) 0%, rgba(5,10,18,.10) 58%, rgba(5,10,18,.28) 100%);
    pointer-events:none;
  }
  body.page-service header.hero.hero--photo-bg-mobile > .container{
    position:relative !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    min-height:620px !important;
    padding:124px 16px 24px !important;
    z-index:2 !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile > .container > .heroimg,
  body.page-service header.hero.hero--photo-bg-mobile .heroimg--desktop,
  body.page-service header.hero.hero--photo-bg-mobile .heroimg--mobile{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    border-radius:0 !important;
    margin:0 !important;
    z-index:0 !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .hwrap,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.show{
    position:relative !important;
    z-index:3 !important;
    width:min(100%, 560px) !important;
    margin:0 !important;
    padding:16px 16px 14px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:22px !important;
    background:rgba(8,14,24,.34) !important;
    backdrop-filter:blur(14px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(14px) saturate(125%) !important;
    box-shadow:0 18px 46px rgba(0,0,0,.24) !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .pill{
    display:inline-flex !important;
    align-items:center !important;
    max-width:100% !important;
    margin:0 0 12px !important;
    padding:8px 14px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    color:rgba(255,255,255,.92) !important;
    font-size:13px !important;
    line-height:1.3 !important;
    white-space:normal !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile h1{
    margin:0 0 12px !important;
    font-size:clamp(34px, 7vw, 46px) !important;
    line-height:1.06 !important;
    letter-spacing:-0.02em !important;
    text-wrap:balance;
  }
  body.page-service header.hero.hero--photo-bg-mobile .lead,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap p.lead{
    margin:0 0 14px !important;
    font-size:16px !important;
    line-height:1.56 !important;
    color:rgba(255,255,255,.96) !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .hwrap > div[style*="display:flex"],
  body.page-service header.hero.hero--photo-bg-mobile .hero-actions,
  body.page-service header.hero.hero--photo-bg-mobile .hero__actions,
  body.page-service header.hero.hero--photo-bg-mobile .design-hero__actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:0 !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .btn,
  body.page-service header.hero.hero--photo-bg-mobile a.btn{
    width:100% !important;
    min-height:52px !important;
    justify-content:center !important;
    text-align:center !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .service-hero-facts,
  body.page-service header.hero.hero--photo-bg-mobile .keyword-list,
  body.page-service header.hero.hero--photo-bg-mobile .chips,
  body.page-service header.hero.hero--photo-bg-mobile .hero-tags{
    display:none !important;
  }

  /* Homepage hero: same top-overlay card language */
  body.home-page .hero{
    position:relative !important;
    overflow:hidden !important;
    min-height:650px !important;
    padding:0 !important;
    background:#08101a !important;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  body.home-page .hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
      linear-gradient(180deg, rgba(5,10,18,.56) 0%, rgba(5,10,18,.40) 24%, rgba(5,10,18,.50) 62%, rgba(5,10,18,.76) 100%),
      linear-gradient(90deg, rgba(5,10,18,.40) 0%, rgba(5,10,18,.12) 60%, rgba(5,10,18,.32) 100%);
    pointer-events:none;
  }
  body.home-page .hero-video-bg,
  body.home-page .hero-bg-poster,
  body.home-page .hero-bg-video{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  body.home-page .hero > .container{
    position:relative !important;
    z-index:2 !important;
    display:block !important;
    min-height:650px !important;
    padding:124px 16px 24px !important;
  }
  body.home-page .hero__grid{
    display:block !important;
    min-height:0 !important;
  }
  body.home-page .hero__left,
  body.home-page .hero__left.reveal,
  body.home-page .hero__left.show{
    position:relative !important;
    z-index:3 !important;
    width:min(100%, 560px) !important;
    margin:0 !important;
    padding:16px 16px 14px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:22px !important;
    background:rgba(8,14,24,.34) !important;
    backdrop-filter:blur(14px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(14px) saturate(125%) !important;
    box-shadow:0 18px 46px rgba(0,0,0,.24) !important;
  }
  body.home-page .visual,
  body.home-page .hero__proof,
  body.home-page .hero__meta{
    display:none !important;
  }
  body.home-page .hero .pill{
    display:inline-flex !important;
    align-items:center !important;
    max-width:100% !important;
    margin:0 0 12px !important;
    padding:8px 14px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    color:rgba(255,255,255,.92) !important;
    font-size:13px !important;
    line-height:1.3 !important;
    white-space:normal !important;
  }
  body.home-page .hero h1{
    margin:0 0 12px !important;
    font-size:clamp(34px, 7.6vw, 48px) !important;
    line-height:1.06 !important;
    letter-spacing:-0.02em !important;
    text-wrap:balance;
  }
  body.home-page .hero p{
    margin:0 0 14px !important;
    font-size:16px !important;
    line-height:1.56 !important;
    color:rgba(255,255,255,.96) !important;
    max-width:none !important;
  }
  body.home-page .hero__actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:0 !important;
  }
  body.home-page .hero__actions .btn,
  body.home-page .hero__actions a.btn{
    width:100% !important;
    min-height:52px !important;
    justify-content:center !important;
    text-align:center !important;
  }
}
@media (max-width:560px){
  body.page-service header.hero.hero--photo-bg-mobile,
  body.page-service header.hero.hero--photo-bg-mobile > .container,
  body.home-page .hero,
  body.home-page .hero > .container{
    min-height:590px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile > .container,
  body.home-page .hero > .container{
    padding:116px 14px 22px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .hwrap,
  body.home-page .hero__left{
    padding:14px 14px 12px !important;
    border-radius:20px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile h1,
  body.home-page .hero h1{
    font-size:clamp(30px, 9vw, 42px) !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .lead,
  body.home-page .hero p{
    font-size:15px !important;
    line-height:1.52 !important;
  }
}


/* Mobile tune-up — iteration 6 language switch in scrolling bar */
@media (max-width:900px){
  /* Header bar should be part of the page flow, not fixed/sticky. */
  body .topbar,
  body.home-page .topbar,
  body.page-service .topbar,
  body.page-case .topbar,
  body.en-page .topbar{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    z-index:120 !important;
  }

  /* Old floating EN/RU button is hidden on mobile; language now lives in the bar. */
  body .language-switch,
  body:not(.en-page) .language-switch,
  body.elektro-page .language-switch,
  body.page-service .language-switch{
    display:none !important;
  }

  body .topbar .right,
  body:not(.en-page) .topbar .right,
  body.en-page .topbar .right{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex:0 0 auto !important;
  }

  body .topbar .header-lang-switch,
  body:not(.en-page) .topbar .header-lang-switch,
  body.en-page .topbar .header-lang-switch,
  body .topbar .header-quicklink.header-lang-switch{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 46px !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    padding:0 !important;
    border-radius:16px !important;
    border:1px solid rgba(255,255,255,.16) !important;
    background:rgba(255,255,255,.055) !important;
    color:#fff !important;
    font-size:16px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.02em !important;
    text-decoration:none !important;
    box-shadow:none !important;
  }

  body:not(.en-page) #hamb,
  body:not(.en-page) .hamb,
  body.en-page #hamb,
  body.en-page .hamb,
  body .topbar .hamb{
    display:grid !important;
    width:54px !important;
    height:54px !important;
    flex:0 0 54px !important;
    border-radius:18px !important;
  }

  /* Header logo / right controls stay in one clean line with language + burger. */
  body .topbar__row,
  body .navwrap,
  body .toprow,
  body:not(.en-page) .topbar__row,
  body.en-page .topbar__row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  body .topbar .brand,
  body:not(.en-page) .topbar .brand,
  body.en-page .topbar .brand{
    min-width:0 !important;
    flex:1 1 auto !important;
  }
}

@media (max-width:380px){
  body .topbar .header-lang-switch,
  body .topbar .header-quicklink.header-lang-switch{
    flex-basis:42px !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:14px !important;
    font-size:15px !important;
  }
  body .topbar .hamb,
  body #hamb{
    width:50px !important;
    height:50px !important;
    flex-basis:50px !important;
  }
}

/* Mobile tune-up — iteration 6.1 hero offset after non-sticky header */
@media (max-width:900px){
  body.page-service header.hero.hero--photo-bg-mobile > .container,
  body.home-page .hero > .container{
    padding-top:28px !important;
  }
  body.page-design-service .design-hero{
    align-items:flex-start !important;
    padding:28px 0 48px !important;
  }
  body.page-design-service .design-hero__inner{
    padding-top:0 !important;
  }
  body.page-design-service .design-hero__content,
  body.page-design-service .design-hero__content.reveal,
  body.page-design-service .design-hero__content.show{
    margin-top:0 !important;
  }
}
@media (max-width:560px){
  body.page-service header.hero.hero--photo-bg-mobile > .container,
  body.home-page .hero > .container{
    padding-top:22px !important;
  }
  body.page-design-service .design-hero{
    padding-top:22px !important;
  }
}


/* Mobile tune-up — iteration 7 multimedia hero style */
@media (max-width:900px){
  /* Make the first screen lighter, richer and more multimedia. */
  body.page-service header.hero.hero--photo-bg-mobile::before,
  body.home-page .hero::before{
    background:
      radial-gradient(120% 80% at 100% 0%, rgba(255,124,63,.18) 0%, rgba(255,124,63,0) 48%),
      radial-gradient(120% 90% at 100% 100%, rgba(54,118,255,.16) 0%, rgba(54,118,255,0) 46%),
      linear-gradient(180deg, rgba(5,10,18,.38) 0%, rgba(5,10,18,.18) 24%, rgba(5,10,18,.34) 60%, rgba(5,10,18,.62) 100%),
      linear-gradient(90deg, rgba(5,10,18,.30) 0%, rgba(5,10,18,.08) 52%, rgba(5,10,18,.22) 100%) !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile > .container,
  body.home-page .hero > .container{
    align-items:flex-start !important;
    justify-content:flex-start !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile > .container > .heroimg,
  body.page-service header.hero.hero--photo-bg-mobile .heroimg--desktop,
  body.page-service header.hero.hero--photo-bg-mobile .heroimg--mobile,
  body.home-page .hero-bg-poster,
  body.home-page .hero-bg-video{
    filter:saturate(1.06) contrast(1.03) brightness(.92) !important;
    transform:scale(1.02) !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile .hwrap,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.show,
  body.home-page .hero__left,
  body.home-page .hero__left.reveal,
  body.home-page .hero__left.show{
    width:min(88vw, 500px) !important;
    margin:16px auto 0 0 !important;
    padding:18px 18px 16px !important;
    border-radius:26px !important;
    border:1px solid rgba(255,255,255,.14) !important;
    background:linear-gradient(180deg, rgba(10,16,27,.42) 0%, rgba(8,14,24,.28) 100%) !important;
    backdrop-filter:blur(16px) saturate(132%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(132%) !important;
    box-shadow:0 20px 54px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04) !important;
    position:relative !important;
    overflow:hidden !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .hwrap::after,
  body.home-page .hero__left::after{
    content:"";
    position:absolute;
    inset:auto -20% -36% auto;
    width:190px;
    height:190px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,124,63,.16) 0%, rgba(255,124,63,0) 72%);
    pointer-events:none;
  }

  body.page-service header.hero.hero--photo-bg-mobile .pill,
  body.home-page .hero .pill{
    margin:0 0 14px !important;
    padding:10px 16px !important;
    font-size:12px !important;
    font-weight:700 !important;
    letter-spacing:.01em !important;
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.16) !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile h1,
  body.home-page .hero h1{
    margin:0 0 12px !important;
    font-size:clamp(28px, 8vw, 40px) !important;
    line-height:1.04 !important;
    letter-spacing:-0.025em !important;
    max-width:12ch;
  }

  body.page-service header.hero.hero--photo-bg-mobile .lead,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap p.lead,
  body.home-page .hero p{
    margin:0 0 14px !important;
    font-size:15px !important;
    line-height:1.5 !important;
    color:rgba(255,255,255,.94) !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile .hwrap > div[style*="display:flex"],
  body.page-service header.hero.hero--photo-bg-mobile .hero-actions,
  body.page-service header.hero.hero--photo-bg-mobile .hero__actions,
  body.page-service header.hero.hero--photo-bg-mobile .design-hero__actions,
  body.home-page .hero__actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin:0 0 12px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .btn,
  body.page-service header.hero.hero--photo-bg-mobile a.btn,
  body.home-page .hero__actions .btn,
  body.home-page .hero__actions a.btn{
    width:100% !important;
    min-height:54px !important;
    border-radius:18px !important;
  }

  /* Bring back compact proof/facts to make the hero more informative and lively. */
  body.page-service header.hero.hero--photo-bg-mobile .service-hero-facts{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    margin-top:2px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .service-hero-fact{
    position:relative !important;
    min-width:0 !important;
    padding:11px 12px 10px 12px !important;
    border-radius:16px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    background:rgba(255,255,255,.055) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .service-hero-fact::before{
    content:"";
    display:block;
    width:8px;
    height:8px;
    border-radius:50%;
    margin-bottom:8px;
    background:linear-gradient(135deg, #ff9f63 0%, #ff6c35 100%);
    box-shadow:0 0 0 4px rgba(255,108,53,.12);
  }
  body.page-service header.hero.hero--photo-bg-mobile .service-hero-fact b{
    display:block !important;
    margin:0 0 4px !important;
    font-size:13px !important;
    line-height:1.28 !important;
    color:#fff !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .service-hero-fact span{
    display:block !important;
    font-size:12px !important;
    line-height:1.35 !important;
    color:rgba(255,255,255,.78) !important;
  }

  body.home-page .hero__meta{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin:2px 0 12px !important;
  }
  body.home-page .hero__meta .tag{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:34px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    background:rgba(255,255,255,.055) !important;
    color:rgba(255,255,255,.92) !important;
    font-size:12px !important;
    font-weight:700 !important;
  }
  body.home-page .hero__proof{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    margin-top:2px !important;
  }
  body.home-page .hero__proof-item{
    min-width:0 !important;
    padding:11px 10px 10px !important;
    border-radius:16px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    background:rgba(255,255,255,.055) !important;
  }
  body.home-page .hero__proof-item b{
    display:block !important;
    font-size:13px !important;
    line-height:1.28 !important;
    margin-bottom:4px !important;
    color:#fff !important;
  }
  body.home-page .hero__proof-item span{
    display:block !important;
    font-size:11px !important;
    line-height:1.3 !important;
    color:rgba(255,255,255,.75) !important;
  }
}

@media (max-width:560px){
  body.page-service header.hero.hero--photo-bg-mobile > .container,
  body.home-page .hero > .container{
    padding-top:18px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .hwrap,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.show,
  body.home-page .hero__left,
  body.home-page .hero__left.reveal,
  body.home-page .hero__left.show{
    width:min(90vw, 460px) !important;
    padding:16px 16px 14px !important;
    border-radius:22px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile h1,
  body.home-page .hero h1{
    font-size:clamp(28px, 8.8vw, 38px) !important;
    max-width:11.5ch;
  }
  body.page-service header.hero.hero--photo-bg-mobile .lead,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap p.lead,
  body.home-page .hero p{
    font-size:14px !important;
    line-height:1.48 !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .service-hero-facts{
    grid-template-columns:1fr !important;
  }
  body.home-page .hero__proof{
    grid-template-columns:1fr !important;
  }
}


/* Mobile tune-up — iteration 8 multimedia hero stage 2 */
@media (max-width:900px){
  /* Differentiate homepage and services more strongly. */
  body.home-page .hero > .container{
    min-height:680px !important;
    padding-top:22px !important;
  }
  body.home-page .hero__left,
  body.home-page .hero__left.reveal,
  body.home-page .hero__left.show{
    width:min(84vw, 470px) !important;
    margin:18px auto 0 0 !important;
    padding:18px 18px 16px !important;
    background:linear-gradient(180deg, rgba(6,12,22,.34) 0%, rgba(8,14,24,.22) 100%) !important;
  }
  body.home-page .hero__left::before,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap::before,
  body.page-design-service .design-hero__content::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    border-radius:3px;
    background:linear-gradient(180deg, rgba(255,147,94,.95) 0%, rgba(68,137,255,.88) 100%);
    opacity:.95;
  }
  body.home-page .hero::before{
    background:
      radial-gradient(125% 88% at 100% 0%, rgba(255,124,63,.24) 0%, rgba(255,124,63,0) 50%),
      radial-gradient(120% 100% at 92% 100%, rgba(54,118,255,.22) 0%, rgba(54,118,255,0) 48%),
      linear-gradient(180deg, rgba(5,10,18,.30) 0%, rgba(5,10,18,.12) 24%, rgba(5,10,18,.30) 60%, rgba(5,10,18,.56) 100%),
      linear-gradient(90deg, rgba(5,10,18,.24) 0%, rgba(5,10,18,.06) 52%, rgba(5,10,18,.18) 100%) !important;
  }
  body.home-page .hero h1{
    max-width:10.5ch !important;
    font-size:clamp(30px, 8vw, 40px) !important;
  }
  body.home-page .hero p{
    max-width:28ch !important;
  }
  body.home-page .hero__meta{
    gap:7px !important;
  }
  body.home-page .hero__proof{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:9px !important;
  }
  body.home-page .hero__proof-item{
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
  }

  /* Service pages: keep the card more compact so the hero image remains visible and expressive. */
  body.page-service header.hero.hero--photo-bg-mobile > .container{
    min-height:620px !important;
    padding-top:18px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .hwrap,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.show{
    width:min(82vw, 450px) !important;
    margin:10px auto 0 0 !important;
    padding:16px 16px 14px 18px !important;
    background:linear-gradient(180deg, rgba(6,12,22,.30) 0%, rgba(8,14,24,.18) 100%) !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile h1{
    max-width:10.2ch !important;
    font-size:clamp(30px, 8.2vw, 42px) !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .lead,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap p.lead{
    max-width:29ch !important;
  }

  /* More nuanced CTA styling for multimedia feel. */
  body.page-service header.hero.hero--photo-bg-mobile .btn:not(.btn--accent),
  body.home-page .hero__actions .btn:not(.btn--accent),
  body.page-design-service .design-hero__actions .btn:not(.btn--accent){
    background:rgba(255,255,255,.04) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    color:#fff !important;
  }

  /* Page-specific framing and color moods. */
  body.uslugi-savant header.hero.hero--photo-bg-mobile > .container > .heroimg{object-position:76% 50% !important;}
  body.uslugi-savant header.hero.hero--photo-bg-mobile .hwrap::after{background:radial-gradient(circle, rgba(88,124,255,.22) 0%, rgba(88,124,255,0) 72%) !important;}

  body.uslugi-knx header.hero.hero--photo-bg-mobile > .container > .heroimg{object-position:72% 48% !important;}
  body.uslugi-knx header.hero.hero--photo-bg-mobile .hwrap::after{background:radial-gradient(circle, rgba(0,196,255,.18) 0%, rgba(0,196,255,0) 72%) !important;}

  body.uslugi-climate header.hero.hero--photo-bg-mobile > .container > .heroimg{object-position:56% 50% !important;}
  body.uslugi-climate header.hero.hero--photo-bg-mobile .hwrap::after{background:radial-gradient(circle, rgba(255,163,82,.20) 0%, rgba(255,163,82,0) 72%) !important;}

  body.uslugi-wifi header.hero.hero--photo-bg-mobile > .container > .heroimg{object-position:56% 32% !important;}
  body.uslugi-wifi header.hero.hero--photo-bg-mobile .hwrap::after{background:radial-gradient(circle, rgba(79,145,255,.20) 0%, rgba(79,145,255,0) 72%) !important;}

  body.uslugi-theater header.hero.hero--photo-bg-mobile > .container > .heroimg{object-position:62% 50% !important;}
  body.uslugi-theater header.hero.hero--photo-bg-mobile .hwrap::after{background:radial-gradient(circle, rgba(255,140,74,.22) 0%, rgba(255,140,74,0) 72%) !important;}

  body.uslugi-light header.hero.hero--photo-bg-mobile > .container > .heroimg{object-position:60% 46% !important;}
  body.uslugi-light header.hero.hero--photo-bg-mobile .hwrap::after{background:radial-gradient(circle, rgba(255,179,88,.22) 0%, rgba(255,179,88,0) 72%) !important;}

  body.uslugi-shchity header.hero.hero--photo-bg-mobile > .container > .heroimg{object-position:72% 46% !important;}
  body.uslugi-shchity header.hero.hero--photo-bg-mobile .hwrap::after{background:radial-gradient(circle, rgba(71,201,255,.20) 0%, rgba(71,201,255,0) 72%) !important;}

  body.elektro-page header.hero.hero--photo-bg-mobile > .container > .heroimg{object-position:60% 48% !important;}
  body.elektro-page header.hero.hero--photo-bg-mobile .hwrap::after{background:radial-gradient(circle, rgba(255,135,72,.18) 0%, rgba(255,135,72,0) 72%) !important;}

  body.page-turnkey header.hero.hero--photo-bg-mobile > .container > .heroimg,
  body.uslugi-turnkey header.hero.hero--photo-bg-mobile > .container > .heroimg{object-position:64% 48% !important;}

  body.uslugi-price header.hero.hero--photo-bg-mobile > .container > .heroimg{object-position:66% 50% !important;}

  /* Design page gets the same multimedia language. */
  body.page-design-service .design-hero{
    position:relative !important;
    overflow:hidden !important;
    min-height:620px !important;
  }
  body.page-design-service .design-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(255,124,63,.18) 0%, rgba(255,124,63,0) 46%),
      radial-gradient(120% 100% at 92% 100%, rgba(54,118,255,.18) 0%, rgba(54,118,255,0) 46%),
      linear-gradient(180deg, rgba(5,10,18,.36) 0%, rgba(5,10,18,.16) 26%, rgba(5,10,18,.34) 60%, rgba(5,10,18,.60) 100%);
    pointer-events:none;
  }
  body.page-design-service .design-hero__image{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:64% 50% !important;
    filter:saturate(1.05) brightness(.92) !important;
  }
  body.page-design-service .design-hero__inner{
    position:relative !important;
    z-index:2 !important;
    min-height:620px !important;
    display:flex !important;
    align-items:flex-start !important;
    padding-top:18px !important;
    padding-bottom:24px !important;
  }
  body.page-design-service .design-hero__content,
  body.page-design-service .design-hero__content.reveal,
  body.page-design-service .design-hero__content.show{
    position:relative !important;
    width:min(82vw, 450px) !important;
    margin:10px auto 0 0 !important;
    padding:16px 16px 14px 18px !important;
    border-radius:24px !important;
    border:1px solid rgba(255,255,255,.14) !important;
    background:linear-gradient(180deg, rgba(6,12,22,.30) 0%, rgba(8,14,24,.18) 100%) !important;
    backdrop-filter:blur(16px) saturate(132%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(132%) !important;
    box-shadow:0 20px 54px rgba(0,0,0,.26) !important;
    overflow:hidden !important;
  }
  body.page-design-service .design-hero__content::after{
    content:"";
    position:absolute;
    inset:auto -20% -36% auto;
    width:190px;
    height:190px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(91,132,255,.18) 0%, rgba(91,132,255,0) 72%);
    pointer-events:none;
  }
  body.page-design-service .design-hero__kicker{
    margin:0 0 10px !important;
    color:rgba(255,255,255,.82) !important;
    font-size:13px !important;
  }
  body.page-design-service .design-hero .pill{
    margin:0 0 12px !important;
    padding:10px 16px !important;
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(255,255,255,.16) !important;
  }
  body.page-design-service .design-hero h1{
    margin:0 0 12px !important;
    font-size:clamp(30px, 8.2vw, 42px) !important;
    line-height:1.04 !important;
    letter-spacing:-0.025em !important;
    max-width:11ch;
  }
  body.page-design-service .design-hero .lead{
    margin:0 0 14px !important;
    max-width:29ch !important;
    font-size:15px !important;
    line-height:1.5 !important;
    color:rgba(255,255,255,.94) !important;
  }
  body.page-design-service .design-hero__actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin:0 0 12px !important;
  }
  body.page-design-service .design-hero__actions .btn{
    width:100% !important;
    min-height:54px !important;
    border-radius:18px !important;
  }
  body.page-design-service .design-hero__meta{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  body.page-design-service .design-hero__meta span{
    display:block !important;
    padding:10px 12px !important;
    border-radius:16px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    background:rgba(255,255,255,.055) !important;
    color:rgba(255,255,255,.84) !important;
    font-size:12px !important;
    line-height:1.35 !important;
  }
}

@media (max-width:560px){
  body.home-page .hero > .container{
    min-height:640px !important;
  }
  body.home-page .hero__left,
  body.home-page .hero__left.reveal,
  body.home-page .hero__left.show,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.show,
  body.page-design-service .design-hero__content,
  body.page-design-service .design-hero__content.reveal,
  body.page-design-service .design-hero__content.show{
    width:min(90vw, 430px) !important;
    padding:15px 15px 14px 17px !important;
  }
  body.home-page .hero__proof{
    grid-template-columns:1fr 1fr !important;
  }
  body.home-page .hero__proof-item:last-child{
    grid-column:1 / -1 !important;
  }
}


/* Mobile tune-up — iteration 9 multimedia hero stage 3 fine tuning */
@media (max-width:900px){
  /* Global fine tuning */
  body.page-service header.hero.hero--photo-bg-mobile > .container,
  body.page-design-service .design-hero__inner{
    min-height:600px !important;
  }
  body.home-page .hero > .container{
    min-height:650px !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile .btn,
  body.page-service header.hero.hero--photo-bg-mobile a.btn,
  body.home-page .hero__actions .btn,
  body.home-page .hero__actions a.btn,
  body.page-design-service .design-hero__actions .btn{
    min-height:50px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    font-size:15px !important;
    font-weight:800 !important;
    letter-spacing:-0.01em !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile .service-hero-facts{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .service-hero-fact:nth-child(3){
    grid-column:1 / -1 !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .service-hero-fact,
  body.home-page .hero__proof-item,
  body.page-design-service .design-hero__meta span{
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
  }

  /* Homepage: make title and summary slightly cleaner and more editorial */
  body.home-page .hero__left,
  body.home-page .hero__left.reveal,
  body.home-page .hero__left.show{
    width:min(84vw, 455px) !important;
    padding:17px 17px 15px !important;
  }
  body.home-page .hero h1{
    font-size:clamp(28px, 7.2vw, 38px) !important;
    line-height:1.05 !important;
    max-width:10.2ch !important;
    margin-bottom:10px !important;
  }
  body.home-page .hero p{
    font-size:14px !important;
    line-height:1.48 !important;
    max-width:27ch !important;
    margin-bottom:12px !important;
  }
  body.home-page .hero__meta .tag{
    min-height:32px !important;
    padding:0 11px !important;
    font-size:11px !important;
  }
  body.home-page .hero__proof-item b{
    font-size:12px !important;
  }
  body.home-page .hero__proof-item span{
    font-size:10.5px !important;
  }

  /* KNX page: long heading needs extra tightening */
  body.uslugi-knx header.hero.hero--photo-bg-mobile .hwrap,
  body.uslugi-knx header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.uslugi-knx header.hero.hero--photo-bg-mobile .hwrap.show{
    width:min(80vw, 430px) !important;
  }
  body.uslugi-knx header.hero.hero--photo-bg-mobile h1{
    font-size:clamp(27px, 7.3vw, 37px) !important;
    max-width:9.4ch !important;
  }
  body.uslugi-knx header.hero.hero--photo-bg-mobile .lead{
    max-width:26ch !important;
  }
  body.uslugi-knx header.hero.hero--photo-bg-mobile > .container > .heroimg{object-position:74% 44% !important;}

  /* Savant page: allow more image presence on the right */
  body.uslugi-savant header.hero.hero--photo-bg-mobile .hwrap,
  body.uslugi-savant header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.uslugi-savant header.hero.hero--photo-bg-mobile .hwrap.show{
    width:min(79vw, 420px) !important;
  }
  body.uslugi-savant header.hero.hero--photo-bg-mobile h1{
    font-size:clamp(28px, 7.6vw, 38px) !important;
    max-width:9.7ch !important;
  }
  body.uslugi-savant header.hero.hero--photo-bg-mobile > .container > .heroimg{object-position:80% 48% !important;}

  /* Climate page: keep title strong but prevent oversized stack */
  body.uslugi-climate header.hero.hero--photo-bg-mobile .hwrap,
  body.uslugi-climate header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.uslugi-climate header.hero.hero--photo-bg-mobile .hwrap.show{
    width:min(81vw, 435px) !important;
  }
  body.uslugi-climate header.hero.hero--photo-bg-mobile h1{
    font-size:clamp(27px, 7.1vw, 36px) !important;
    max-width:9.6ch !important;
  }
  body.uslugi-climate header.hero.hero--photo-bg-mobile .lead{
    max-width:25ch !important;
  }
  body.uslugi-climate header.hero.hero--photo-bg-mobile > .container > .heroimg{object-position:58% 46% !important;}

  /* Wi-Fi page: compact text with more hero background */
  body.uslugi-wifi header.hero.hero--photo-bg-mobile .hwrap,
  body.uslugi-wifi header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.uslugi-wifi header.hero.hero--photo-bg-mobile .hwrap.show{
    width:min(78vw, 410px) !important;
  }
  body.uslugi-wifi header.hero.hero--photo-bg-mobile h1{
    font-size:clamp(28px, 7.4vw, 37px) !important;
    max-width:8.9ch !important;
  }
  body.uslugi-wifi header.hero.hero--photo-bg-mobile > .container > .heroimg{object-position:58% 30% !important;}

  /* Theater page: cinematic and more premium */
  body.uslugi-theater header.hero.hero--photo-bg-mobile .hwrap,
  body.uslugi-theater header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.uslugi-theater header.hero.hero--photo-bg-mobile .hwrap.show{
    width:min(79vw, 425px) !important;
  }
  body.uslugi-theater header.hero.hero--photo-bg-mobile h1{
    font-size:clamp(28px, 7.4vw, 37px) !important;
    max-width:9.7ch !important;
  }
  body.uslugi-theater header.hero.hero--photo-bg-mobile > .container > .heroimg{object-position:66% 48% !important;}

  /* Design page: a little calmer and more precise */
  body.page-design-service .design-hero__content,
  body.page-design-service .design-hero__content.reveal,
  body.page-design-service .design-hero__content.show{
    width:min(80vw, 430px) !important;
  }
  body.page-design-service .design-hero h1{
    font-size:clamp(27px, 7.2vw, 37px) !important;
    max-width:10.1ch !important;
  }
  body.page-design-service .design-hero .lead{
    font-size:14px !important;
    line-height:1.48 !important;
    max-width:27ch !important;
  }
  body.page-design-service .design-hero__meta span{
    font-size:11.5px !important;
  }

  /* Turnkey and price pages */
  body.page-turnkey header.hero.hero--photo-bg-mobile h1,
  body.uslugi-turnkey header.hero.hero--photo-bg-mobile h1,
  body.uslugi-price header.hero.hero--photo-bg-mobile h1{
    font-size:clamp(27px, 7.1vw, 36px) !important;
    max-width:9.8ch !important;
  }
}

@media (max-width:560px){
  body.page-service header.hero.hero--photo-bg-mobile > .container,
  body.page-design-service .design-hero__inner{
    min-height:580px !important;
    padding-top:16px !important;
  }
  body.home-page .hero > .container{
    min-height:620px !important;
    padding-top:16px !important;
  }
  body.home-page .hero__left,
  body.home-page .hero__left.reveal,
  body.home-page .hero__left.show,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.show,
  body.page-design-service .design-hero__content,
  body.page-design-service .design-hero__content.reveal,
  body.page-design-service .design-hero__content.show{
    width:min(91vw, 420px) !important;
    padding:14px 14px 13px 16px !important;
  }
  body.home-page .hero h1{
    font-size:clamp(27px, 8.2vw, 35px) !important;
    max-width:9.8ch !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile h1,
  body.page-design-service .design-hero h1{
    font-size:clamp(26px, 8vw, 35px) !important;
    max-width:9.5ch !important;
  }
  body.home-page .hero__proof{
    grid-template-columns:1fr !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .service-hero-facts{
    grid-template-columns:1fr !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .service-hero-fact:nth-child(3){
    grid-column:auto !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .btn,
  body.page-service header.hero.hero--photo-bg-mobile a.btn,
  body.home-page .hero__actions .btn,
  body.home-page .hero__actions a.btn,
  body.page-design-service .design-hero__actions .btn{
    min-height:48px !important;
    font-size:14px !important;
  }
}


/* Mobile tune-up — iteration 10 final polish stage 4 */
@media (max-width:900px){
  /* Header gets a lighter premium polish. */
  body .topbar{
    background:rgba(7,12,20,.84) !important;
    backdrop-filter:blur(14px) saturate(120%) !important;
    -webkit-backdrop-filter:blur(14px) saturate(120%) !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }
  body .topbar .brand img,
  body .topbar .brand__logo,
  body .logo.js-brand-logo{
    height:28px !important;
  }
  body .topbar .header-lang-switch,
  body .topbar .header-quicklink.header-lang-switch{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    border-radius:15px !important;
    font-size:15px !important;
  }
  body .topbar .hamb,
  body #hamb{
    width:50px !important;
    height:50px !important;
    flex-basis:50px !important;
    border-radius:17px !important;
  }

  /* First screens feel more editorial and less bulky. */
  body.home-page .hero > .container,
  body.page-service header.hero.hero--photo-bg-mobile > .container,
  body.page-design-service .design-hero__inner{
    padding-bottom:72px !important;
  }
  body.home-page .hero__left,
  body.home-page .hero__left.reveal,
  body.home-page .hero__left.show,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.show,
  body.page-design-service .design-hero__content,
  body.page-design-service .design-hero__content.reveal,
  body.page-design-service .design-hero__content.show{
    box-shadow:0 18px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile .pill,
  body.home-page .hero .pill,
  body.page-design-service .design-hero .pill{
    font-size:11.5px !important;
    padding:9px 14px !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile .lead,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap p.lead,
  body.home-page .hero p,
  body.page-design-service .design-hero .lead{
    color:rgba(255,255,255,.92) !important;
  }

  /* Secondary content inside hero is compact and visually quieter. */
  body.page-service header.hero.hero--photo-bg-mobile .service-hero-fact{
    padding:10px 11px 9px 11px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .service-hero-fact b{
    font-size:12.5px !important;
  }
  body.page-service header.hero.hero--photo-bg-mobile .service-hero-fact span{
    font-size:11.5px !important;
  }
  body.home-page .hero__proof-item{
    padding:10px 9px 9px !important;
  }
  body.home-page .hero__proof-item b{font-size:11.5px !important;}
  body.home-page .hero__proof-item span{font-size:10px !important;}

  /* The fixed messenger should feel smaller and obstruct less content. */
  html body .umka-messenger{
    left:12px !important;
    right:12px !important;
    bottom:calc(10px + env(safe-area-inset-bottom)) !important;
  }
  html body .umka-messenger__button{
    padding:9px 14px 9px 11px !important;
    gap:11px !important;
    border-radius:20px !important;
    min-height:0 !important;
    box-shadow:0 12px 30px rgba(215,165,68,.20),0 6px 16px rgba(0,0,0,.18) !important;
  }
  html body .umka-messenger__icon{
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
  }
  html body .umka-messenger__title{
    font-size:16px !important;
    letter-spacing:0 !important;
  }
  html body .umka-messenger__subtitle{
    font-size:10px !important;
    letter-spacing:.04em !important;
  }
  html body .umka-messenger__menu{
    border-radius:16px !important;
  }

  /* Smooth transition to next sections */
  body.page-service header.hero.hero--photo-bg-mobile + .service-flow-v7,
  body.page-design-service .design-hero + main,
  body.home-page .hero + #main,
  body.home-page .hero + main{
    margin-top:-10px !important;
    position:relative;
    z-index:3;
  }
}

@media (max-width:560px){
  body .topbar .brand img,
  body .topbar .brand__logo,
  body .logo.js-brand-logo{
    height:26px !important;
  }
  body .topbar .header-lang-switch,
  body .topbar .header-quicklink.header-lang-switch{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:14px !important;
    font-size:14px !important;
  }
  body .topbar .hamb,
  body #hamb{
    width:48px !important;
    height:48px !important;
    flex-basis:48px !important;
    border-radius:16px !important;
  }

  body.home-page .hero > .container,
  body.page-service header.hero.hero--photo-bg-mobile > .container,
  body.page-design-service .design-hero__inner{
    padding-bottom:66px !important;
  }
  html body .umka-messenger__button{
    padding:8px 13px 8px 10px !important;
    border-radius:18px !important;
  }
  html body .umka-messenger__icon{
    width:32px !important;
    height:32px !important;
    flex-basis:32px !important;
  }
  html body .umka-messenger__title{font-size:15px !important;}
  html body .umka-messenger__subtitle{font-size:9.5px !important;}
}


/* Mobile tune-up — iteration 11 enlarge mobile logo */
@media (max-width:900px){
  body .topbar .brand img,
  body .topbar .brand__logo,
  body .logo.js-brand-logo{
    height:34px !important;
    width:auto !important;
    max-width:none !important;
  }
}
@media (max-width:560px){
  body .topbar .brand img,
  body .topbar .brand__logo,
  body .logo.js-brand-logo{
    height:32px !important;
    width:auto !important;
    max-width:none !important;
  }
}


/* Mobile tune-up — iteration 12 larger logo + header scrolls with page */
@media (max-width:900px){
  /* Header should scroll with content, not stick/fix to viewport. */
  html body .topbar,
  html body header.topbar,
  html body .site-header,
  html body .header,
  html body .topbar.is-sticky,
  html body .topbar.sticky,
  html body .topbar.fixed{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    z-index:40 !important;
  }

  /* Bigger mobile logo */
  body .topbar .brand img,
  body .topbar .brand__logo,
  body .logo.js-brand-logo{
    height:40px !important;
    width:auto !important;
    max-width:none !important;
  }

  /* Keep controls balanced against larger logo */
  body .topbar .header-lang-switch,
  body .topbar .header-quicklink.header-lang-switch{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:14px !important;
    font-size:14px !important;
  }
  body .topbar .hamb,
  body #hamb{
    width:46px !important;
    height:46px !important;
    flex-basis:46px !important;
    border-radius:15px !important;
  }
}
@media (max-width:560px){
  body .topbar .brand img,
  body .topbar .brand__logo,
  body .logo.js-brand-logo{
    height:38px !important;
    width:auto !important;
    max-width:none !important;
  }
  body .topbar .header-lang-switch,
  body .topbar .header-quicklink.header-lang-switch{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:13px !important;
    font-size:13px !important;
  }
  body .topbar .hamb,
  body #hamb{
    width:44px !important;
    height:44px !important;
    flex-basis:44px !important;
    border-radius:14px !important;
  }
}


/* Mobile tune-up — iteration 13 adaptive hero text inside card */
@media (max-width:900px){
  body.home-page .hero__left,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap,
  body.page-design-service .design-hero__content{
    box-sizing:border-box !important;
  }

  body.home-page .hero h1,
  body.page-service header.hero.hero--photo-bg-mobile h1,
  body.page-design-service .design-hero h1{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    font-size:clamp(28px, 7.2vw, 38px) !important;
    line-height:1.08 !important;
    letter-spacing:-0.026em !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
    -webkit-hyphens:none !important;
    text-wrap:balance !important;
  }

  body.home-page .hero .lead,
  body.home-page .hero p,
  body.page-service header.hero.hero--photo-bg-mobile .lead,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap p.lead,
  body.page-design-service .design-hero .lead{
    width:100% !important;
    max-width:100% !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
    -webkit-hyphens:none !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile .pill,
  body.home-page .hero .pill,
  body.page-design-service .design-hero .pill{
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
}

@media (max-width:560px){
  body.home-page .hero h1,
  body.page-service header.hero.hero--photo-bg-mobile h1,
  body.page-design-service .design-hero h1{
    font-size:clamp(25px, 7.1vw, 32px) !important;
    line-height:1.1 !important;
  }

  body.uslugi-knx header.hero.hero--photo-bg-mobile h1,
  body.uslugi-climate header.hero.hero--photo-bg-mobile h1,
  body.page-design-service .design-hero h1{
    font-size:clamp(24px, 6.8vw, 31px) !important;
    line-height:1.1 !important;
  }

  body.home-page .hero__left,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap,
  body.page-design-service .design-hero__content{
    width:min(92vw, 430px) !important;
  }
}

@media (max-width:380px){
  body.home-page .hero h1,
  body.page-service header.hero.hero--photo-bg-mobile h1,
  body.page-design-service .design-hero h1{
    font-size:clamp(23px, 6.7vw, 29px) !important;
  }
}


/* Mobile tune-up — iteration 14: sticky header + better balanced hero titles */
@media (max-width:900px){
  /* Header must follow the user while scrolling down the page */
  html body .topbar,
  html body header.topbar,
  html body .topbar.is-sticky,
  html body .topbar.sticky,
  html body .topbar.fixed{
    position:sticky !important;
    position:-webkit-sticky !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:1200 !important;
    transform:none !important;
  }

  /* Hero titles: adaptive, no ugly word cuts, but not stretched into one huge line */
  body.page-service header.hero.hero--photo-bg-mobile h1,
  body.home-page .hero h1,
  body.page-design-service .design-hero h1{
    width:auto !important;
    max-width:min(100%, 15.8ch) !important;
    font-size:clamp(29px, 7.2vw, 38px) !important;
    line-height:1.08 !important;
    letter-spacing:-0.026em !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
    text-wrap:balance !important;
  }

  body.uslugi-knx header.hero.hero--photo-bg-mobile h1{
    max-width:min(100%, 16.2ch) !important;
    font-size:clamp(28px, 7vw, 37px) !important;
  }

  body.uslugi-savant header.hero.hero--photo-bg-mobile h1,
  body.uslugi-climate header.hero.hero--photo-bg-mobile h1,
  body.uslugi-wifi header.hero.hero--photo-bg-mobile h1,
  body.uslugi-theater header.hero.hero--photo-bg-mobile h1{
    max-width:min(100%, 15.4ch) !important;
  }

  body.home-page .hero h1{
    max-width:min(100%, 15.8ch) !important;
    font-size:clamp(29px, 7vw, 37px) !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile .lead,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap p.lead,
  body.home-page .hero p,
  body.page-design-service .design-hero .lead{
    max-width:100% !important;
    font-size:clamp(14px, 3.55vw, 16px) !important;
    line-height:1.48 !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
    text-wrap:pretty !important;
  }

  /* Keep the card responsive, but avoid the feeling of text being glued to the edges */
  body.page-service header.hero.hero--photo-bg-mobile .hwrap,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.show,
  body.home-page .hero__left,
  body.home-page .hero__left.reveal,
  body.home-page .hero__left.show,
  body.page-design-service .design-hero__content,
  body.page-design-service .design-hero__content.reveal,
  body.page-design-service .design-hero__content.show{
    width:min(91vw, 470px) !important;
    padding-inline:clamp(16px, 4.2vw, 22px) !important;
  }
}

@media (max-width:560px){
  body.page-service header.hero.hero--photo-bg-mobile h1,
  body.home-page .hero h1,
  body.page-design-service .design-hero h1{
    max-width:min(100%, 15.6ch) !important;
    font-size:clamp(27px, 7.35vw, 33px) !important;
    line-height:1.09 !important;
  }

  body.uslugi-knx header.hero.hero--photo-bg-mobile h1{
    max-width:min(100%, 16ch) !important;
    font-size:clamp(27px, 7.25vw, 32px) !important;
  }

  body.home-page .hero h1{
    font-size:clamp(27px, 7.3vw, 33px) !important;
  }

  body.page-service header.hero.hero--photo-bg-mobile .hwrap,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.reveal,
  body.page-service header.hero.hero--photo-bg-mobile .hwrap.show,
  body.home-page .hero__left,
  body.home-page .hero__left.reveal,
  body.home-page .hero__left.show,
  body.page-design-service .design-hero__content,
  body.page-design-service .design-hero__content.reveal,
  body.page-design-service .design-hero__content.show{
    width:min(91vw, 430px) !important;
    padding-inline:16px !important;
  }
}

/* Mobile tune-up — iteration 15: real fixed header that follows the user */
@media (max-width:900px){
  :root{
    --umka-mobile-header-h:82px;
  }

  html body{
    padding-top:var(--umka-mobile-header-h) !important;
  }

  html body .topbar,
  html body header.topbar,
  html body div.topbar,
  html body .topbar.is-sticky,
  html body .topbar.sticky,
  html body .topbar.fixed,
  html body .site-header,
  html body .header{
    position:fixed !important;
    position:-webkit-fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-height:var(--umka-mobile-header-h) !important;
    transform:none !important;
    translate:none !important;
    margin:0 !important;
    z-index:20000 !important;
    background:rgba(5,10,16,.94) !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.20) !important;
    backdrop-filter:blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(125%) !important;
    will-change:transform !important;
    backface-visibility:hidden !important;
  }

  html body .topbar > .container,
  html body header.topbar > .container,
  html body div.topbar > .container{
    width:100% !important;
    max-width:none !important;
    padding-left:18px !important;
    padding-right:18px !important;
    box-sizing:border-box !important;
  }

  html body .topbar__row,
  html body .topbar .topbar__row,
  html body .navwrap,
  html body .toprow{
    min-height:64px !important;
    padding:9px 0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    box-sizing:border-box !important;
  }

  html body .topbar .brand,
  html body .topbar a.brand{
    min-width:0 !important;
    flex:1 1 auto !important;
    display:flex !important;
    align-items:center !important;
  }

  html body .topbar .right{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
  }

  html body .drawer,
  html body .drawer.is-open{
    z-index:21000 !important;
  }

  html body .drawer__panel{
    z-index:21001 !important;
  }

  /* Fixed header already reserves space via body padding. Keep hero copy close to the top of the hero image. */
  body.home-page .hero > .container,
  body.page-service header.hero.hero--photo-bg-mobile > .container,
  body.page-design-service .design-hero__inner{
    padding-top:18px !important;
  }
}

@media (max-width:560px){
  :root{
    --umka-mobile-header-h:82px;
  }
  html body .topbar > .container,
  html body header.topbar > .container,
  html body div.topbar > .container{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}


/* Mobile tune-up — iteration 16: compact fixed header, forced by CSS + JS */
@media (max-width:900px){
  :root{ --umka-mobile-header-h:64px !important; }
  html body,
  html body.umka-mobile-header-fixed{
    padding-top:64px !important;
  }
  html body .topbar,
  html body header.topbar,
  html body div.topbar,
  html body .topbar.is-sticky,
  html body .topbar.sticky,
  html body .topbar.fixed{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:auto !important;
    width:100% !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    translate:none !important;
    z-index:2147483000 !important;
    background:rgba(5,10,16,.92) !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 8px 22px rgba(0,0,0,.22) !important;
    backdrop-filter:blur(16px) saturate(125%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(125%) !important;
    box-sizing:border-box !important;
  }
  html body .topbar > .container,
  html body header.topbar > .container,
  html body div.topbar > .container{
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    width:100% !important;
    max-width:none !important;
    padding:0 16px !important;
    box-sizing:border-box !important;
  }
  html body .topbar__row,
  html body .topbar .topbar__row,
  html body .navwrap,
  html body .toprow{
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    box-sizing:border-box !important;
  }
  html body .topbar .brand,
  html body .topbar a.brand{
    display:flex !important;
    align-items:center !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    height:64px !important;
  }
  html body .topbar .brand img,
  html body .topbar .brand__logo,
  html body .logo.js-brand-logo{
    height:34px !important;
    width:auto !important;
    max-width:180px !important;
    object-fit:contain !important;
  }
  html body .topbar .right{
    height:64px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    flex:0 0 auto !important;
  }
  html body .topbar .header-lang-switch,
  html body .topbar .header-quicklink.header-lang-switch{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    flex:0 0 42px !important;
    padding:0 !important;
    border-radius:14px !important;
    font-size:14px !important;
    line-height:1 !important;
  }
  html body .topbar .hamb,
  html body #hamb{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    min-height:46px !important;
    flex:0 0 46px !important;
    border-radius:15px !important;
    padding:0 !important;
  }
  body.home-page .hero > .container,
  body.page-service header.hero.hero--photo-bg-mobile > .container,
  body.page-design-service .design-hero__inner{
    padding-top:18px !important;
  }
}
@media (max-width:560px){
  :root{ --umka-mobile-header-h:62px !important; }
  html body,
  html body.umka-mobile-header-fixed{
    padding-top:62px !important;
  }
  html body .topbar,
  html body header.topbar,
  html body div.topbar,
  html body .topbar.is-sticky,
  html body .topbar.sticky,
  html body .topbar.fixed{
    height:62px !important;
    min-height:62px !important;
    max-height:62px !important;
  }
  html body .topbar > .container,
  html body header.topbar > .container,
  html body div.topbar > .container,
  html body .topbar__row,
  html body .topbar .topbar__row,
  html body .navwrap,
  html body .toprow,
  html body .topbar .brand,
  html body .topbar a.brand,
  html body .topbar .right{
    height:62px !important;
    min-height:62px !important;
    max-height:62px !important;
  }
  html body .topbar > .container,
  html body header.topbar > .container,
  html body div.topbar > .container{
    padding-left:15px !important;
    padding-right:15px !important;
  }
  html body .topbar .brand img,
  html body .topbar .brand__logo,
  html body .logo.js-brand-logo{
    height:32px !important;
    max-width:170px !important;
  }
  html body .topbar .header-lang-switch,
  html body .topbar .header-quicklink.header-lang-switch{
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    flex-basis:40px !important;
    border-radius:13px !important;
    font-size:13px !important;
  }
  html body .topbar .hamb,
  html body #hamb{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    flex-basis:44px !important;
    border-radius:14px !important;
  }
}


/* Mobile tune-up — iteration 18: version 16 base, tighter home hero card + larger proof tile text */
@media (max-width:900px){
  /* Keep version 16 fixed header behaviour, only improve homepage hero composition. */
  body.home-page .hero,
  body.home-page header.hero{
    padding-bottom:34px !important;
  }
  body.home-page .hero > .container{
    min-height:auto !important;
    padding-bottom:40px !important;
  }
  body.home-page .hero__grid{
    align-items:start !important;
  }
  body.home-page .hero__left,
  body.home-page .hero__left.reveal,
  body.home-page .hero__left.show{
    align-self:start !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding-bottom:20px !important;
    margin-bottom:0 !important;
  }

  /* Make the bottom engineering tiles more readable and intentional. */
  body.home-page .hero__proof{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:min(100%, 372px) !important;
    max-width:372px !important;
    margin-top:14px !important;
  }
  body.home-page .hero__proof-item,
  body.home-page .hero__proof-item:last-child{
    grid-column:auto !important;
    width:100% !important;
    min-height:68px !important;
    padding:14px 17px 13px !important;
    border-radius:18px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.072), rgba(255,255,255,.035)) !important;
    border-color:rgba(255,255,255,.13) !important;
  }
  body.home-page .hero__proof-item b{
    font-size:17px !important;
    line-height:1.14 !important;
    margin-bottom:6px !important;
    letter-spacing:-.015em !important;
  }
  body.home-page .hero__proof-item span{
    font-size:14px !important;
    line-height:1.36 !important;
    color:rgba(255,255,255,.76) !important;
  }
}

@media (max-width:560px){
  body.home-page .hero,
  body.home-page header.hero{
    padding-bottom:28px !important;
  }
  body.home-page .hero > .container{
    min-height:auto !important;
    padding-bottom:34px !important;
  }
  body.home-page .hero__left,
  body.home-page .hero__left.reveal,
  body.home-page .hero__left.show{
    padding-bottom:18px !important;
  }
  body.home-page .hero__proof{
    width:100% !important;
    max-width:355px !important;
    gap:9px !important;
    margin-top:13px !important;
  }
  body.home-page .hero__proof-item,
  body.home-page .hero__proof-item:last-child{
    min-height:64px !important;
    padding:13px 16px 12px !important;
    border-radius:17px !important;
  }
  body.home-page .hero__proof-item b{
    font-size:16px !important;
  }
  body.home-page .hero__proof-item span{
    font-size:13.5px !important;
  }
}


/* Desktop header polish — iteration 19, based on mobile18 */
@media (min-width:901px){
  /* Keep desktop navigation visible while scrolling, but compact enough not to steal the hero. */
  html body .topbar,
  html body header.topbar,
  html body div.topbar{
    position:sticky !important;
    top:0 !important;
    z-index:260 !important;
    background:rgba(5,10,16,.88) !important;
    backdrop-filter:blur(18px) saturate(120%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(120%) !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.18) !important;
  }

  html body .topbar > .container,
  html body header.topbar > .container,
  html body div.topbar > .container{
    max-width:1680px !important;
    padding-left:44px !important;
    padding-right:44px !important;
  }

  html body .topbar__row,
  html body .topbar .topbar__row{
    min-height:86px !important;
    height:86px !important;
    padding:10px 0 !important;
    gap:28px !important;
    align-items:center !important;
  }

  /* The SVG already contains the small descriptor, so the extra grey text duplicates it. */
  html body .topbar .brand__text,
  html body .topbar .brand__meta,
  html body .topbar .brand strong,
  html body .topbar .brand span{
    display:none !important;
  }

  html body .topbar .brand,
  html body .topbar a.brand{
    min-width:0 !important;
    flex:0 0 auto !important;
    gap:0 !important;
    padding:0 !important;
  }

  html body .topbar .brand img,
  html body .topbar .brand__logo,
  html body .topbar .logo.js-brand-logo{
    height:64px !important;
    width:auto !important;
    max-width:none !important;
    display:block !important;
  }

  html body .topbar .nav{
    flex:1 1 auto !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:26px !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  html body .topbar .nav a,
  html body .topbar .nav__summary{
    font-size:17px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    letter-spacing:-.01em !important;
    white-space:nowrap !important;
    opacity:.88 !important;
    padding:10px 0 !important;
  }

  html body .topbar .nav a:hover,
  html body .topbar .nav__summary:hover{
    opacity:1 !important;
  }

  html body .topbar .right{
    flex:0 0 auto !important;
    gap:10px !important;
    min-width:0 !important;
  }
}

@media (min-width:901px) and (max-width:1320px){
  html body .topbar .nav{
    gap:18px !important;
  }
  html body .topbar .nav a,
  html body .topbar .nav__summary{
    font-size:15px !important;
  }
  html body .topbar .brand img,
  html body .topbar .brand__logo,
  html body .topbar .logo.js-brand-logo{
    height:58px !important;
  }
}


/* Desktop fixed header — iteration 20, keeps pass19 design */
@media (min-width:901px){
  html body{
    padding-top:86px !important;
  }
  html body .topbar,
  html body header.topbar,
  html body div.topbar,
  html body .topbar.is-sticky,
  html body .topbar.sticky,
  html body .topbar.fixed{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:9999 !important;
    transform:none !important;
    background:rgba(5,10,16,.90) !important;
    backdrop-filter:blur(18px) saturate(120%) !important;
    -webkit-backdrop-filter:blur(18px) saturate(120%) !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.18) !important;
  }
  html body .topbar__row,
  html body .topbar .topbar__row{
    min-height:86px !important;
    height:86px !important;
  }
}
@media (min-width:901px) and (max-width:1320px){
  html body{padding-top:82px !important;}
  html body .topbar__row,
  html body .topbar .topbar__row{
    min-height:82px !important;
    height:82px !important;
  }
}
/* --- mobile-fix-v1 --- */
/* =========================================================
   UmkaPro — Mobile polish v1.1 (2026-08-10)
   Stronger hero spacing, smaller type, FAB clearance.
   ========================================================= */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
}
img, video, svg, iframe {
  max-width: 100%;
  height: auto;
}

/* Trust line always wraps cleanly */
body.home-page .hero-clean__trust {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
  row-gap: 8px !important;
}
body.home-page .hero-clean__trust span {
  white-space: normal !important;
  padding-left: 12px !important;
  line-height: 1.35 !important;
  max-width: 100%;
}

/* ========== Phones ≤ 640px ========== */
@media (max-width: 640px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* --- Hero: more air, smaller text --- */
  body.home-page.home-hero-v111 .hero {
    padding: 16px 0 20px !important;
  }
  body.home-page.home-hero-v111 .hero__grid.hero-clean {
    gap: 16px !important;
    min-height: 0 !important;
  }

  body.home-page.home-hero-v111 .hero-clean__pill {
    font-size: 11px !important;
    padding: 6px 10px !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
  }

  body.home-page.home-hero-v111 .hero h1 {
    font-size: clamp(28px, 8.2vw, 36px) !important;
    line-height: 1.08 !important;
    margin: 12px 0 10px !important;
    letter-spacing: -0.035em !important;
    max-width: 100% !important;
  }

  body.home-page.home-hero-v111 .hero__left > p {
    font-size: 14.5px !important;
    line-height: 1.45 !important;
    margin: 0 0 14px !important;
    max-width: 100% !important;
  }

  body.home-page.home-hero-v111 .hero__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body.home-page.home-hero-v111 .hero__actions .btn {
    width: 100% !important;
    min-height: 46px !important;
    padding: 12px 16px !important;
    font-size: 14.5px !important;
    border-radius: 12px !important;
    justify-content: center !important;
  }

  body.home-page .hero-clean__trust {
    margin-top: 12px !important;
    gap: 5px 10px !important;
  }
  body.home-page .hero-clean__trust span {
    font-size: 11.5px !important;
    padding-left: 11px !important;
  }

  /* Right panel — compact, more padding bottom for FAB */
  body.home-page.home-hero-v111 .visual.hero-clean__panel {
    padding: 16px 14px 20px !important;
    border-radius: 16px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  body.home-page .hero-clean__eyebrow,
  body.home-page .hero-clean__panel-head .hero-clean__eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
  }
  body.home-page .hero-clean__panel h2 {
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin: 6px 0 8px !important;
  }
  body.home-page .hero-clean__panel-head > p {
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }
  body.home-page .hero-clean__step {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px 0 !important;
  }
  body.home-page .hero-clean__num {
    font-size: 12px !important;
  }
  body.home-page .hero-clean__step strong {
    font-size: 14px !important;
  }
  body.home-page .hero-clean__step small {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  body.home-page .hero-clean__panel-foot {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 8px !important;
    padding-top: 10px !important;
  }
  body.home-page .hero-clean__panel-foot > span {
    font-size: 12px !important;
  }
  body.home-page .hero-clean__panel-foot .btn {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 13.5px !important;
  }

  /* Sections */
  section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .sectionhead h2 {
    font-size: clamp(24px, 6.5vw, 30px) !important;
    line-height: 1.15 !important;
  }
  .sectionhead p {
    font-size: 14.5px !important;
    line-height: 1.45 !important;
  }
  .card__inner {
    padding: 16px 14px !important;
  }
  .card h3 {
    font-size: 17px !important;
  }

  /* FAB clearance — body + last hero block */
  body {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.home-page.home-hero-v111 .hero {
    /* extra bottom so panel isn't under FAB when scrolled to top */
    padding-bottom: 28px !important;
  }
  body.home-page.home-hero-v111 .visual.hero-clean__panel {
    margin-bottom: 8px !important;
  }
}

/* ========== Very small phones ≤ 390px ========== */
@media (max-width: 390px) {
  body.home-page.home-hero-v111 .hero h1 {
    font-size: 26px !important;
    line-height: 1.1 !important;
  }
  body.home-page.home-hero-v111 .hero__left > p {
    font-size: 13.5px !important;
  }
  body.home-page .hero-clean__panel h2 {
    font-size: 20px !important;
  }
  body.home-page .hero-clean__trust span {
    font-size: 11px !important;
  }
  body.home-page.home-hero-v111 .hero-clean__pill {
    font-size: 10.5px !important;
    padding: 5px 9px !important;
  }
}

/* ========== Tablet narrow 641–900 ========== */
@media (min-width: 641px) and (max-width: 900px) {
  body.home-page.home-hero-v111 .hero h1 {
    font-size: clamp(34px, 5vw, 44px) !important;
  }
  body.home-page .hero-clean__trust span {
    white-space: normal !important;
  }
  body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ========== Messenger FAB: compact chip, no full-width bar ========== */
@media (max-width: 760px) {
  /* Override messenger-compact full-width bar */
  html body .umka-messenger,
  html body .umka-messenger__root,
  html body details.umka-messenger__details {
    left: auto !important;
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 10000 !important;
  }

  html body .umka-messenger__button,
  html body .umka-messenger summary.umka-messenger__button,
  html body details.umka-messenger__details > summary.umka-messenger__button {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 16px 0 12px !important;
    gap: 8px !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
  }

  html body .umka-messenger__icon {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
  }

  html body .umka-messenger__title {
    font-size: 14px !important;
  }

  html body .umka-messenger__subtitle {
    display: none !important;
  }

  html body .umka-messenger__menu {
    left: auto !important;
    right: 0 !important;
    min-width: 200px !important;
    width: max-content !important;
    max-width: calc(100vw - 28px) !important;
  }

  /* Hero panel: keep last steps clear of FAB */
  body.home-page.home-hero-v111 .visual.hero-clean__panel {
    padding-bottom: 28px !important;
  }
  body.home-page .hero-clean__steps {
    padding-right: 0 !important;
  }
  body.home-page .hero-clean__panel-foot {
    margin-bottom: 4px !important;
  }
}

/* Very small: icon-only round FAB — minimal overlap */
@media (max-width: 420px) {
  html body .umka-messenger__button,
  html body .umka-messenger summary.umka-messenger__button,
  html body details.umka-messenger__details > summary.umka-messenger__button {
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
  }
  html body .umka-messenger__text {
    display: none !important;
  }
  html body .umka-messenger__icon {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    margin: 0 !important;
  }
}

/* Grids safety */
@media (max-width: 900px) {
  .grid,
  .hero__grid,
  .cards,
  .services-grid,
  .cases-grid {
    min-width: 0 !important;
  }
  .grid > *,
  .hero__grid > *,
  .card {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   v1.2 — Fix "ущербный" first block
   Kill glass card + forced 620px height from mobile-tune
   ========================================================= */

@media (max-width: 900px) {
  /* No forced tall hero */
  body.home-page .hero,
  body.home-page.home-hero-v111 .hero {
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 0 20px !important;
  }
  body.home-page .hero::before {
    /* softer overlay, not a heavy dark wash */
    background:
      linear-gradient(180deg, rgba(5,8,12,.42) 0%, rgba(5,8,12,.22) 40%, rgba(5,8,12,.72) 100%) !important;
  }
  body.home-page .hero > .container {
    min-height: 0 !important;
    padding: 12px 16px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* FIRST BLOCK: no glass card — open text on photo */
  body.home-page .hero__left,
  body.home-page .hero__left.reveal,
  body.home-page .hero__left.show,
  body.home-page.home-hero-v111 .hero__left {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 4px 0 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  /* Type scale — readable but not bulky */
  body.home-page .hero h1,
  body.home-page.home-hero-v111 .hero h1 {
    max-width: 100% !important;
    font-size: clamp(26px, 7.6vw, 32px) !important;
    line-height: 1.1 !important;
    margin: 10px 0 10px !important;
    letter-spacing: -0.03em !important;
  }
  body.home-page .hero p,
  body.home-page.home-hero-v111 .hero__left > p {
    max-width: 100% !important;
    font-size: 14.5px !important;
    line-height: 1.45 !important;
    margin: 0 0 14px !important;
    color: rgba(239, 243, 249, 0.88) !important;
  }
  body.home-page .hero .pill,
  body.home-page.home-hero-v111 .hero-clean__pill {
    margin: 0 0 8px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    border-radius: 999px !important;
    background: rgba(11, 15, 20, 0.55) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
  }

  body.home-page .hero__actions,
  body.home-page.home-hero-v111 .hero__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 4px !important;
  }
  body.home-page .hero__actions .btn {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 12px !important;
    font-size: 14.5px !important;
  }

  body.home-page .hero-clean__trust {
    margin-top: 12px !important;
    gap: 6px 12px !important;
  }
  body.home-page .hero-clean__trust span {
    font-size: 11.5px !important;
    white-space: normal !important;
  }

  /* Second block (panel) stays, but lighter */
  body.home-page .visual,
  body.home-page .visual.hero-clean__panel,
  body.home-page.home-hero-v111 .visual.hero-clean__panel {
    display: block !important;
    margin-top: 14px !important;
    padding: 16px 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(215, 165, 68, 0.28) !important;
    background: rgba(7, 10, 15, 0.72) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.22) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  body.home-page .hero-clean__panel h2 {
    font-size: 20px !important;
    margin: 4px 0 6px !important;
  }
  body.home-page .hero-clean__panel-head > p {
    font-size: 13.5px !important;
    margin-bottom: 6px !important;
  }
  body.home-page .hero-clean__step {
    padding: 9px 0 !important;
  }
  body.home-page .hero-clean__step strong {
    font-size: 14px !important;
  }
  body.home-page .hero-clean__step small {
    font-size: 12px !important;
  }
}

@media (max-width: 390px) {
  body.home-page .hero h1,
  body.home-page.home-hero-v111 .hero h1 {
    font-size: 24px !important;
  }
  body.home-page .hero > .container {
    padding: 10px 14px 16px !important;
  }
}

/* =========================================================
   v1.3 — /uslugi/ + drawer mobile fix
   ========================================================= */

/* Drawer: closed = fully hidden; open = usable menu */
@media (max-width: 900px) {
  html body .drawer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 30000 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    display: none !important;
    pointer-events: none !important;
  }
  html body .drawer.open,
  html body .drawer.is-open {
    display: block !important;
    pointer-events: auto !important;
  }
  html body .drawer__panel {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(360px, 88vw) !important;
    max-width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 14px calc(24px + env(safe-area-inset-bottom)) !important;
    background: #0d1218 !important;
    border-left: 1px solid rgba(255,255,255,.12) !important;
    transform: translateX(100%) !important;
    transition: transform .25s ease !important;
    z-index: 30001 !important;
    box-shadow: -12px 0 40px rgba(0,0,0,.4) !important;
  }
  html body .drawer.open .drawer__panel,
  html body .drawer.is-open .drawer__panel {
    transform: translateX(0) !important;
  }
  html body .drawer__nav a,
  html body .drawer__nav summary,
  html body .drawer__submenu a {
    color: #e9eef6 !important;
    opacity: 1 !important;
  }
  html body .drawer__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }
  html body .drawer__head .brand,
  html body .drawer__head .logo {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* /uslugi/ layout safety */
  body.page-service,
  body.page-service-v6 {
    overflow-x: hidden !important;
  }
  body.page-service .services-v6-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.page-service .service-tile,
  body.page-service .service-tile--wide,
  body.page-service .service-tile--compact {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.page-service .service-tile::before,
  body.page-service .service-tile::after {
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
  }
  body.page-service .process-v6,
  body.page-service .mini-grid-v6,
  body.page-service .services-hero__facts {
    grid-template-columns: 1fr !important;
  }
  body.page-service .services-hero {
    min-height: 0 !important;
    padding: 24px 0 32px !important;
  }
  body.page-service .services-hero h1 {
    font-size: clamp(26px, 7vw, 34px) !important;
  }
  body.page-service .container {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* =========================================================
   v1.4 — hero first block: shift text slightly right
   ========================================================= */
@media (max-width: 900px) {
  body.home-page .hero > .container,
  body.home-page.home-hero-v111 .hero > .container {
    padding-left: 20px !important;
    padding-right: 16px !important;
  }
  body.home-page .hero__left,
  body.home-page .hero__left.reveal,
  body.home-page .hero__left.show,
  body.home-page.home-hero-v111 .hero__left {
    padding-left: 6px !important;
    padding-right: 2px !important;
  }
  body.home-page .hero .pill,
  body.home-page.home-hero-v111 .hero-clean__pill,
  body.home-page .hero h1,
  body.home-page.home-hero-v111 .hero h1,
  body.home-page .hero p,
  body.home-page.home-hero-v111 .hero__left > p,
  body.home-page .hero__actions,
  body.home-page .hero-clean__trust {
    margin-left: 0 !important;
    padding-left: 0 !important; /* container already shifts */
  }
}
@media (max-width: 640px) {
  body.home-page .hero > .container,
  body.home-page.home-hero-v111 .hero > .container {
    padding-left: 22px !important;
    padding-right: 14px !important;
  }
  body.home-page .hero__left,
  body.home-page.home-hero-v111 .hero__left {
    padding-left: 8px !important;
  }
}

/* =========================================================
   v1.5 — hero pill stays inside viewport
   ========================================================= */
@media (max-width: 900px) {
  body.home-page .hero .pill,
  body.home-page .hero-clean__pill,
  body.home-page.home-hero-v111 .hero-clean__pill {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 6px !important;
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
    margin: 0 0 10px 0 !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: hidden !important;
    word-break: break-word !important;
  }
  body.home-page .hero .pill span,
  body.home-page .hero-clean__pill span,
  body.home-page .hero-clean__pill b {
    white-space: normal !important;
    max-width: 100% !important;
  }
}
@media (max-width: 400px) {
  body.home-page .hero .pill,
  body.home-page .hero-clean__pill,
  body.home-page.home-hero-v111 .hero-clean__pill {
    font-size: 10.5px !important;
    padding: 5px 9px !important;
  }
}

/* =========================================================
   v1.6 — kill remaining mobile-tune conflicts
   ========================================================= */
@media (max-width: 900px) {
  /* Override iteration-8 narrow ch limits */
  body.home-page .hero h1,
  body.home-page.home-hero-v111 .hero h1 {
    max-width: 100% !important;
    width: 100% !important;
  }
  body.home-page .hero p,
  body.home-page.home-hero-v111 .hero__left > p {
    max-width: 100% !important;
  }
  body.home-page .hero > .container {
    min-height: 0 !important;
  }
  body.home-page .hero__left,
  body.home-page .hero__left.reveal,
  body.home-page .hero__left.show {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative !important;
  }
  /* Soften left accent line — keep but don't crowd text */
  body.home-page .hero__left::before {
    left: 0 !important;
    width: 2px !important;
    opacity: 0.7 !important;
  }
  body.home-page .hero__left {
    padding-left: 12px !important; /* room for accent line */
  }
}
/* --- perf-scroll-v1 --- */
/* UmkaPro scroll performance — 2026-08-10
   Kill heavy blur layers + smooth-scroll lag */

html {
  scroll-behavior: auto !important;
}

/* --- Desktop: keep light header blur only --- */
.card,
.service-tile,
.service-card-premium,
.hero-clean__panel,
.visual.hero-clean__panel,
.drawer__panel,
.umka-messenger__button,
.umka-messenger__menu,
.pill,
.hero-clean__pill,
.proof-card,
.process-step,
.cta-band-v6,
.install-card,
.kpi,
.shot,
.case-gallery-card,
.nav__submenu,
.mini-card-v6 {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Header: solid-ish, light blur only */
html body .topbar,
html body header.topbar,
html body div.topbar {
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  background: rgba(5, 10, 16, 0.92) !important;
}

/* Stop parallax transforms fighting the compositor */
.hero-parallax,
body.home-page .hero__left,
body.home-page .hero-video-bg,
body.home-page .hero-bg-video,
body.home-page .hero-bg-poster {
  transform: none !important;
  will-change: auto !important;
}

/* Below-fold sections: skip rendering work when offscreen */
@media (min-width: 901px) {
  body.home-page main > section:not(:first-of-type),
  body.page-service main > section:not(:first-of-type) {
    /* content-visibility disabled */
    /* contain-intrinsic disabled */
  }
}

/* --- Mobile: no blur at all (biggest win) --- */
@media (max-width: 900px) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body .topbar,
  html body header.topbar,
  html body div.topbar {
    background: rgba(5, 10, 16, 0.97) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
  }
  body.home-page .hero-clean__panel,
  body.home-page .visual.hero-clean__panel {
    background: rgba(7, 10, 15, 0.92) !important;
  }
  /* Lighter shadows = less paint */
  .card,
  .service-tile,
  .service-card-premium {
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  }
}

/* Prefer reduced motion globally when set */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Anti stuck-scroll on /uslugi/ and service pages (mobile)
   ========================================================= */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pinch-zoom !important;
  }
  body.page-service,
  body.page-service-v6 {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: static !important;
    height: auto !important;
  }
  body.page-service main,
  body.page-service-v6 main {
    overflow: visible !important;
    touch-action: pan-y pinch-zoom !important;
  }
  /* Only lock scroll when drawer truly open */
  body.drawer-open {
    overflow: hidden !important;
  }
  /* Service tiles must not capture vertical gestures oddly */
  body.page-service .service-tile,
  body.page-service .services-v6-grid {
    touch-action: pan-y pinch-zoom !important;
  }
}

/* Global anti-stuck scroll (all pages) */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
    position: static !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pinch-zoom !important;
  }
  body.drawer-open {
    overflow: hidden !important;
    position: relative !important;
  }
  /* FAB clearance for final sections sitewide */
  main section:last-of-type,
  main .cta-section,
  main #contact {
    padding-bottom: calc(24px + 70px + env(safe-area-inset-bottom)) !important;
  }
}
/* perf-scroll latest */
/* UmkaPro scroll performance — 2026-08-10
   Kill heavy blur layers + smooth-scroll lag */

html {
  scroll-behavior: auto !important;
}

/* --- Desktop: keep light header blur only --- */
.card,
.service-tile,
.service-card-premium,
.hero-clean__panel,
.visual.hero-clean__panel,
.drawer__panel,
.umka-messenger__button,
.umka-messenger__menu,
.pill,
.hero-clean__pill,
.proof-card,
.process-step,
.cta-band-v6,
.install-card,
.kpi,
.shot,
.case-gallery-card,
.nav__submenu,
.mini-card-v6 {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Header: solid-ish, light blur only */
html body .topbar,
html body header.topbar,
html body div.topbar {
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  background: rgba(5, 10, 16, 0.92) !important;
}

/* Stop parallax transforms fighting the compositor */
.hero-parallax,
body.home-page .hero__left,
body.home-page .hero-video-bg,
body.home-page .hero-bg-video,
body.home-page .hero-bg-poster {
  transform: none !important;
  will-change: auto !important;
}

/* Below-fold sections: skip rendering work when offscreen */
@media (min-width: 901px) {
  body.home-page main > section:not(:first-of-type),
  body.page-service main > section:not(:first-of-type) {
    /* content-visibility disabled */
    /* contain-intrinsic disabled */
  }
}

/* --- Mobile: no blur at all (biggest win) --- */
@media (max-width: 900px) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body .topbar,
  html body header.topbar,
  html body div.topbar {
    background: rgba(5, 10, 16, 0.97) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
  }
  body.home-page .hero-clean__panel,
  body.home-page .visual.hero-clean__panel {
    background: rgba(7, 10, 15, 0.92) !important;
  }
  /* Lighter shadows = less paint */
  .card,
  .service-tile,
  .service-card-premium {
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  }
}

/* Prefer reduced motion globally when set */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mid-page scroll freeze fixes */
html, body {
  overflow-x: clip !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  height: auto !important;
  min-height: 100% !important;
}

@media (max-width: 900px) {
  /* No reveal animations — they hitch mid-scroll on mobile */
  .reveal,
  .reveal:not(.show):not(.in):not(.is-inview),
  [data-animate],
  .umka-motion-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
    visibility: visible !important;
  }
  .reveal.show,
  .reveal.in,
  .is-inview {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Avoid sticky thrash mid-page */
  main [style*="position: sticky"],
  main .sticky {
    position: relative !important;
    top: auto !important;
  }

  /* Cards/sections must not create nested scroll traps */
  main section,
  main .card,
  main .service-tile,
  main .feature-card {
    overflow: visible !important;
    touch-action: pan-y pinch-zoom !important;
  }

  /* Slider only: allow pan-x when clearly a slider */
  .slider,
  .slides,
  .slider--swipe-ready {
    touch-action: pan-y pinch-zoom !important;
  }
}

/* Desktop: keep mild motion but no content-visibility */
@supports (content-visibility: auto) {
  main section {
    content-visibility: visible !important;
  }
}
/* contact scroll margin */
/* UmkaPro scroll performance — 2026-08-10
   Kill heavy blur layers + smooth-scroll lag */

html {
  scroll-behavior: auto !important;
}

/* --- Desktop: keep light header blur only --- */
.card,
.service-tile,
.service-card-premium,
.hero-clean__panel,
.visual.hero-clean__panel,
.drawer__panel,
.umka-messenger__button,
.umka-messenger__menu,
.pill,
.hero-clean__pill,
.proof-card,
.process-step,
.cta-band-v6,
.install-card,
.kpi,
.shot,
.case-gallery-card,
.nav__submenu,
.mini-card-v6 {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Header: solid-ish, light blur only */
html body .topbar,
html body header.topbar,
html body div.topbar {
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  background: rgba(5, 10, 16, 0.92) !important;
}

/* Stop parallax transforms fighting the compositor */
.hero-parallax,
body.home-page .hero__left,
body.home-page .hero-video-bg,
body.home-page .hero-bg-video,
body.home-page .hero-bg-poster {
  transform: none !important;
  will-change: auto !important;
}

/* Below-fold sections: skip rendering work when offscreen */
@media (min-width: 901px) {
  body.home-page main > section:not(:first-of-type),
  body.page-service main > section:not(:first-of-type) {
    /* content-visibility disabled */
    /* contain-intrinsic disabled */
  }
}

/* --- Mobile: no blur at all (biggest win) --- */
@media (max-width: 900px) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body .topbar,
  html body header.topbar,
  html body div.topbar {
    background: rgba(5, 10, 16, 0.97) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;
  }
  body.home-page .hero-clean__panel,
  body.home-page .visual.hero-clean__panel {
    background: rgba(7, 10, 15, 0.92) !important;
  }
  /* Lighter shadows = less paint */
  .card,
  .service-tile,
  .service-card-premium {
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  }
}

/* Prefer reduced motion globally when set */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mid-page scroll freeze fixes */
html, body {
  overflow-x: clip !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  height: auto !important;
  min-height: 100% !important;
}

@media (max-width: 900px) {
  /* No reveal animations — they hitch mid-scroll on mobile */
  .reveal,
  .reveal:not(.show):not(.in):not(.is-inview),
  [data-animate],
  .umka-motion-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
    visibility: visible !important;
  }
  .reveal.show,
  .reveal.in,
  .is-inview {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Avoid sticky thrash mid-page */
  main [style*="position: sticky"],
  main .sticky {
    position: relative !important;
    top: auto !important;
  }

  /* Cards/sections must not create nested scroll traps */
  main section,
  main .card,
  main .service-tile,
  main .feature-card {
    overflow: visible !important;
    touch-action: pan-y pinch-zoom !important;
  }

  /* Slider only: allow pan-x when clearly a slider */
  .slider,
  .slides,
  .slider--swipe-ready {
    touch-action: pan-y pinch-zoom !important;
  }
}

/* Desktop: keep mild motion but no content-visibility */
@supports (content-visibility: auto) {
  main section {
    content-visibility: visible !important;
  }
}

/* Anchor offset under fixed header */
#contact,
section#contact {
  scroll-margin-top: 80px;
}

/* Kontakty page */
@media (max-width: 900px) {
  .page-kontakty .kontakty-grid {
    grid-template-columns: 1fr !important;
  }
  .page-kontakty .kontakty-hero {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .page-kontakty .formrow {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .page-kontakty .formrow .btn {
    width: 100% !important;
  }
}