/* ---------- short desktop screens ---------- */
@media (min-width:881px) and (max-height:720px){
.chart{height:min(24vh,200px)}
.s12 .q{min-height:11vh}
.s12 h2{font-size:clamp(24px,2.6vw,38px)}
.s13 .grid{gap:14px}
.card img{margin-bottom:10px}
.card .nm{font-size:15px;margin-bottom:8px}
.card .ct{font-size:12px}
.s14 h2{font-size:clamp(26px,3vw,44px)}
.s3 h2{margin-bottom:4vh}
}
/* ---------- very large screens ---------- */
@media (min-width:1700px){
.wrap{max-width:1440px}
.s4 .cards,.s4 .band .in{max-width:1440px}
body{font-size:17px}
}
/* ---------- tablet landscape (1024-1180) ---------- */
@media (min-width:881px) and (max-width:1180px) and (orientation:landscape){
.wrap{padding:0 36px}
.s13 .grid{gap:12px}
.card .ct{font-size:11.5px}
.card .nm{font-size:14px}
.s2 .cols{gap:36px}
.s9 .b img{width:min(8.5vw,100px)}
.s10 ol li{font-size:13.5px}
}
/* ---------- phone landscape ---------- */
@media (max-height:500px) and (orientation:landscape){
.slide{height:auto;min-height:100svh}
.deck{scroll-snap-type:none}
}
/* ---------- mobile ---------- */
@media (max-width:880px), (max-width:1040px) and (orientation:portrait){
/* прокрутку ведёт сама страница, без снапа: иначе на телефонах
снап борется с инерцией пальца и листание подвисает */
html,body{height:auto;overflow-x:hidden}
.deck{scroll-snap-type:none;height:auto;overflow:visible}
.slide{
height:auto;min-height:100svh;
scroll-snap-align:none;scroll-snap-stop:normal;
}
.rv{transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.wrap{padding:76px 22px 60px}
.dots,.hint,.plus{display:none}
.chrome{padding:14px 18px;font-size:11px}
.chrome{position:fixed}
.chrome .mid{position:absolute;left:50%;transform:translateX(-50%)}
.s1{grid-template-columns:1fr;min-height:100svh}
.s1 .left{padding:86px 24px 30px;justify-content:center}
.s1 .left h1{text-align:center;font-size:clamp(34px,10.2vw,44px)}
.s1 .plate{left:0;top:12%;font-size:30px;padding:10px 26px}
.s1 .art{padding:0;align-items:flex-start}
.s1 .art img{width:min(88%,480px);margin:4px -3% 0 auto}
.s1 .stats{padding:16px 12px 40px}
.s2 .cols,.s5 .cols,.s7 .cols,.s9 .cols,.s11 .cols{grid-template-columns:1fr;gap:34px;height:auto}
.s2 h3{margin-bottom:44px}
.chart{height:200px}
.s3 .wrap{min-height:100svh;justify-content:center}
.s3 h2{margin-bottom:5vh}
.s3 .grid{grid-template-columns:1fr 1fr;gap:4.5vh 18px}
.s3 .st b{font-size:clamp(26px,7.8vw,34px)}
.s3 .st span{font-size:16px}
.s4 .cards{grid-template-columns:1fr 1fr;gap:18px;padding:26px 22px 46px}
.s4 .c{display:flex;flex-direction:column}
.s4 .c p{min-height:0}
.s4 .c h4{min-height:0}
.s4 .c img{margin-top:auto}
.s4 .band .in{padding:0 22px}
.s5 .phone{height:auto;display:flex;justify-content:center}
.s5 .phone img{position:static;width:min(88%,420px);margin-bottom:-16vh}
.s7 .phones{height:auto}
.s7 .phones img{height:auto;max-height:64vh}
.s6 .lgrid{grid-template-columns:repeat(2,1fr)}
.s6 .lc{height:88px}
.s9 .road .base{stroke-width:20px}
.s8{grid-template-columns:1fr}
.s8 .left{padding:86px 24px 40px}
.s8 .crumb{display:none}
.s8 .right img{height:44svh}
.s9 .grid{grid-template-columns:repeat(3,1fr);gap:20px 12px}
.s9 .b img{width:76px}
.s9 .owner img{width:96px}
.s10{grid-template-columns:1fr}
.s10 .left{padding:86px 24px 34px}
.s10 img{width:100%}
.s10 .right{padding:34px 24px 46px}
.s11 .phone img{height:auto;max-height:64vh}
.s12 .grid{grid-template-columns:1fr;gap:14px}
.s14 .panel{grid-template-columns:1fr;gap:22px}
.s12 .q{min-height:0;gap:18px}
.s13 .grid{grid-template-columns:1fr 1fr;gap:14px}
.card .reg{min-height:0}
.card img{width:min(100%,280px);margin:0 auto 14px}
}
@media (max-width:520px){
.s13 .grid{grid-template-columns:1fr}
.s9 .grid{grid-template-columns:1fr 1fr 1fr}
}