/* Theme Name: ADSIC Blog Theme URI: https://adsic.kz/blog/ Author: Arizzone · Али Бейсенгали Author URI: https://arizzone.com/ Description: Тема блога adsic.kz. Шапка, подвал и дизайн один в один с основным сайтом ADS Inspection & Consulting. Нумерованный список статей 01 / 02 / 03, страница статьи с заявкой и блоком «Читайте также». Поддерживает Polylang (RU / KZ / EN). Version: 1.1 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later Text Domain: ads-blog */ /* ===== Стили основного сайта adsic.kz (скопированы из index.html) ===== */ :root{ --ink:#232A33; --body:#5C6C74; --faint:#9AA6AC; --rule:#E6E9EB; --hair:#F0F2F3; --dark:#101F27; --accent:#D84156; --accent-dk:#B8283C; --f:"Montserrat","Segoe UI","Helvetica Neue",system-ui,-apple-system,Arial,sans-serif; --gut:clamp(72px,10vw,150px); --panel:min(34vw,460px); --lbl:200px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:hidden;max-width:100vw} body{overflow-x:hidden;background:#fff;color:var(--body);font-family:var(--f);font-size:16.5px;line-height:1.78;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} .wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 40px} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--accent);outline-offset:4px} h1,h2,h3{color:var(--ink);font-weight:700;letter-spacing:-.028em;line-height:1.05} .lbl{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)} /* mobile menu */ .burger{display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.3);background:none; cursor:pointer;position:relative;flex:none;padding:0} .burger span{position:absolute;left:11px;right:11px;height:1.6px;background:#fff;transition:transform .3s ease,opacity .2s ease} .burger span:nth-child(1){top:15px} .burger span:nth-child(2){top:20px} .burger span:nth-child(3){top:25px} .burger.on span:nth-child(1){transform:translateY(5px) rotate(45deg)} .burger.on span:nth-child(2){opacity:0} .burger.on span:nth-child(3){transform:translateY(-5px) rotate(-45deg)} .mnav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);border-top:1px solid rgba(255,255,255,.14);z-index:65} .mnav.on{display:block} .mnav a{display:block;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.1); color:#fff;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase} .mnav .mphone{color:var(--accent);font-size:17px;letter-spacing:0;text-transform:none;border-bottom:0;padding-bottom:26px} /* hero video — desktop only, muted, looped, poster underneath */ .bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;animation:heroPush 34s ease-in-out infinite alternate;transform-origin:58% 52%;filter:saturate(.55) contrast(1.02) brightness(.86) hue-rotate(-6deg)} @media(max-width:980px){.bgvid{display:none}} @media(prefers-reduced-motion:reduce){.bgvid{display:none}} @media(prefers-reduced-motion:reduce){.bgvid{animation:none}} /* photos — each one framed like a survey report exhibit */ .shot{position:relative;background:#17262E;overflow:hidden} .shot img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.6) contrast(1.03) brightness(.95) hue-rotate(-6deg)} .frame{position:absolute;inset:clamp(16px,2vw,28px);z-index:5;pointer-events:none} .frame::before,.frame::after,.frame span::before,.frame span::after{content:"";position:absolute;width:22px;height:22px;border:1px solid rgba(255,255,255,.55)} .frame::before{top:0;left:0;border-right:0;border-bottom:0} .frame::after{bottom:0;right:0;border-left:0;border-top:0} .frame span{position:absolute;inset:0} .frame span::before{top:0;right:0;border-left:0;border-bottom:0} .frame span::after{bottom:0;left:0;border-right:0;border-top:0} .stamp{position:absolute;z-index:6;top:auto;bottom:calc(clamp(16px,2vw,28px) - 7px);left:calc(clamp(16px,2vw,28px) + 40px);font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.72);line-height:14px} .shot .note{position:absolute;left:0;bottom:0;z-index:2;padding:9px 14px;font-size:10.5px;line-height:1.5;color:rgba(255,255,255,.24);font-weight:500;max-width:44ch;background:rgba(0,0,0,.2)} .hero .shot .note,.cta .shot .note{z-index:4} .shot:has(img) .note{display:none} /* header */ header{position:absolute;top:0;left:0;right:0;z-index:60} .bar{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);padding:34px 0;flex-wrap:nowrap} .mark{font-size:clamp(15px,1.15vw,18px);font-weight:700;color:#fff;letter-spacing:-.02em;white-space:nowrap;flex:none} .mark i{font-style:normal;color:var(--accent)} nav.main{display:flex;gap:clamp(14px,1.7vw,30px);font-size:clamp(10px,.78vw,11.5px);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.7);white-space:nowrap;flex:none} nav.main a:hover{color:#fff} .right{margin-left:auto;display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);flex:none} .emerg{color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.04em;white-space:nowrap;border:1px solid rgba(255,255,255,.3);padding:11px 18px} .emerg:hover{background:var(--accent);border-color:var(--accent)} .langs{display:flex;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.5)} .langs button{background:none;border:0;font:inherit;color:inherit;cursor:pointer; padding:5px 7px;font-size:11.5px;font-weight:700;letter-spacing:.1em;line-height:1; opacity:.55;transition:opacity .22s ease,color .22s ease;display:inline-flex;position:relative} .langs button.on::after{content:"";position:absolute;left:7px;right:7px;bottom:1px;height:2px;background:var(--accent)} .langs button:hover:not([disabled]){opacity:1;transform:translateY(-2px)} .langs button.on{opacity:1} .langs button[disabled]{opacity:.45;cursor:default} .langs button:hover{opacity:1} .langs button.on{opacity:1} .langs button.on{color:#fff} .langs button[disabled]{opacity:.45;cursor:not-allowed} /* hero */ .hero{position:relative;min-height:100vh;display:flex;align-items:center} .hero .shot{position:absolute;inset:0} .hero .shot img,.hero .bgvid{filter:saturate(.32) contrast(1.06) brightness(.72) hue-rotate(-8deg)} .hero .shot::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(100deg,rgba(8,20,26,.92) 0%,rgba(8,20,26,.8) 45%,rgba(8,20,26,.6) 100%),linear-gradient(180deg,rgba(8,20,26,.75) 0%,rgba(8,20,26,0) 26%),linear-gradient(0deg,rgba(8,20,26,.55) 0%,rgba(8,20,26,0) 30%)} .hero .wrap{position:relative;z-index:3;padding-top:150px;padding-bottom:120px} .hero h1{color:#fff;font-size:clamp(34px,4.2vw,58px);max-width:19ch;letter-spacing:-.03em;line-height:1.06} .hero p{color:rgba(255,255,255,.84);font-size:16px;max-width:46ch;margin-top:26px;line-height:1.7} .hero .act{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:20px 34px;border:1px solid transparent;transition:background .18s,color .18s} .btn-p{background:var(--accent);color:#fff} .btn-p:hover{background:var(--accent-dk)} .btn-w{border-color:rgba(255,255,255,.36);color:#fff} .btn-w:hover{background:#fff;color:var(--ink)} .rail{position:absolute;left:40px;top:50%;transform:translateY(-50%);z-index:4;writing-mode:vertical-rl;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.38);font-weight:700} section{padding:var(--gut) 0} section.sep{border-top:1px solid var(--rule)} section.tint{background:#F2F4F4} section.tint details{border-color:#DFE4E5} section.tint .det li{border-bottom-color:#E9ECEC} section.tint .parties li{border-bottom-color:#DFE4E5} /* section head: label column + heading */ .head{display:grid;grid-template-columns:var(--lbl) 1fr;gap:0;margin-bottom:clamp(48px,6vw,88px)} .head .lbl{position:relative;padding-top:18px} .head .lbl::before{content:"";position:absolute;top:0;left:0;width:28px;height:1px;background:#C6CDD1} /* modal form */ .cform{display:grid} .cform .fld{margin-top:0} .cform .send{grid-column:1/-1;justify-self:start;margin-top:6px;border:0;font-family:inherit;cursor:pointer} .cform .ok{grid-column:1/-1;font-size:16.5px;color:var(--ink);font-weight:600} .cform.done .fld,.cform.done .send{display:none} .cform .ok{display:none} .cform.done .ok{display:block} .ctwo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,88px);margin-top:clamp(30px,3.6vw,52px);align-items:start} .ctwo .contact{grid-template-columns:1fr;margin-top:0;border-top:0} .ctwo .contact > div{padding:0 0 32px;border-bottom:1px solid var(--rule)} .ctwo .contact > div:last-child{border-bottom:0;padding-bottom:0} .ctwo .contact > div + div{padding-top:32px} .cform{margin-top:0;grid-template-columns:1fr;gap:26px;border-top:0;padding-top:0;align-content:start} .cform .fhead{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)} .cform .fnote{margin-top:0;font-size:15.5px;color:var(--body);line-height:1.7;max-width:42ch} .cform .send{justify-self:start;margin-top:4px} @media(max-width:900px){.ctwo{grid-template-columns:1fr}} .mdl{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px} .mdl.open{display:flex} body.modal .mbar{display:none} .mdl-bg{position:absolute;inset:0;background:rgba(10,20,26,.68);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mdlFade .28s ease} .mdl-box{position:relative;background:#fff;width:min(560px,100%);padding:clamp(32px,4vw,52px); max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;-webkit-overflow-scrolling:touch; animation:mdlUp .34s cubic-bezier(.2,.8,.25,1)} .mdl-box::before,.mdl-box::after{content:"";position:absolute;width:20px;height:20px;border:1px solid var(--accent)} .mdl-box::before{top:14px;left:14px;border-right:0;border-bottom:0} .mdl-box::after{bottom:14px;right:14px;border-left:0;border-top:0} .mdl-x{position:absolute;top:14px;right:16px;background:none;border:0;font:inherit;font-size:22px;line-height:1; color:var(--faint);cursor:pointer;padding:6px} .mdl-x:hover{color:var(--accent)} .mdl h3{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.03em;color:var(--ink)} .mdl p.note{margin-top:12px;font-size:14.5px;color:var(--body);max-width:44ch} .fld{margin-top:26px} .fld label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)} .fld label em{font-style:normal;color:var(--accent)} .fld input{width:100%;border:0;border-bottom:1px solid var(--rule);background:none;font:inherit; font-size:17px;color:var(--ink);padding:11px 0;outline:none;transition:border-color .25s ease} .fld input:focus{border-bottom-color:var(--accent)} .fld input::placeholder{color:#B9C1C6} .mdl-send{margin-top:34px;width:100%;justify-content:center;border:0;font-family:inherit;cursor:pointer} .mdl-ok{display:none;text-align:left} .mdl.done .mdl-form{display:none} .mdl.done .mdl-ok{display:block} @keyframes mdlFade{from{opacity:0}to{opacity:1}} @keyframes mdlUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.mdl-box,.mdl-bg{animation:none}} .act-text{display:inline-flex;align-items:center;gap:18px;margin-top:clamp(38px,4.5vw,64px); position:relative;padding-bottom:14px;font-size:clamp(18px,1.9vw,24px);font-weight:700; letter-spacing:-.02em;color:var(--accent);align-self:flex-start} .act-text::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--accent); transform-origin:0 50%;transition:transform .38s cubic-bezier(.5,0,.2,1),background .3s ease} .act-text svg{color:inherit;transition:transform .38s cubic-bezier(.5,0,.2,1)} .act-text:hover{color:var(--ink)} .act-text:hover::after{background:var(--ink);transform:scaleX(1.12)} .act-text:hover svg{transform:translateX(10px)} .act-line{display:inline-flex;align-self:flex-start;width:-moz-fit-content;width:fit-content;align-items:center;gap:18px;margin-top:clamp(28px,2.6vw,38px);padding:20px 32px; position:relative;overflow:hidden;border:1px solid var(--accent);background:var(--accent);color:#fff; font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; transition:color .28s ease,border-color .28s ease} .act-line::before{content:"";position:absolute;inset:0;background:var(--ink); transform:scaleX(0);transform-origin:0 50%;transition:transform .38s cubic-bezier(.5,0,.2,1);z-index:0} .act-line span,.act-line svg{position:relative;z-index:1} .act-line::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:38%;z-index:0;pointer-events:none; background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 100%); transform:translateX(-180%) skewX(-16deg); animation:btnGlint 3.2s cubic-bezier(.5,0,.3,1) infinite} @keyframes btnGlint{0%{transform:translateX(-180%) skewX(-16deg)}55%{transform:translateX(360%) skewX(-16deg)}100%{transform:translateX(360%) skewX(-16deg)}} @media(prefers-reduced-motion:reduce){.act-line::after{animation:none;opacity:0}} .act-line svg{transition:transform .38s cubic-bezier(.5,0,.2,1)} .act-line:hover{color:#fff;border-color:var(--ink)} .act-line:hover::before{transform:scaleX(1)} .act-line:hover svg{transform:translateX(6px)} /* laptops 1280–1440 */ @media(max-width:1440px){ :root{--panel:min(30vw,380px);--lbl:176px;--gut:clamp(64px,7.5vw,110px)} .lbl{letter-spacing:.15em} .wrap{padding:0 32px} .seal,.dial,.radar{width:120px} .passport{max-width:320px} .passport .wm{max-width:250px} } /* narrow laptops 1000–1280 */ @media(max-width:1280px){ :root{--panel:min(28vw,320px);--lbl:168px} .lbl{letter-spacing:.13em;font-size:10.5px} .wrap{padding:0 28px} .head h2,.sechead h2{font-size:clamp(26px,3.6vw,40px)} .head .big{font-size:clamp(22px,2.8vw,32px)} .num{font-size:clamp(46px,6.4vw,84px)} .logos{grid-template-columns:repeat(2,1fr)} .creds{grid-template-columns:1fr 1fr} .passport{max-width:280px;padding:20px} .passport .wm{max-width:210px;margin-bottom:22px} .passport dd{font-size:14.5px} .index .a{font-size:17.5px} .index .b{font-size:13px} .bigmq-track{font-size:clamp(30px,5.6vw,68px)} } @media(max-width:1000px){.act-line{margin-top:34px;padding:17px 24px}} .edge .logoshot{background:#fff;display:flex;align-items:center;justify-content:center;padding:0;overflow:visible} .edge .logoshot img{width:100%;height:auto;max-height:none;object-fit:contain;filter:contrast(1.04) saturate(.92); -webkit-mask-image:linear-gradient(90deg,#000 0,#000 52%,rgba(0,0,0,.35) 82%,transparent 100%), linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 52%,rgba(0,0,0,.35) 82%,transparent 100%), linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%); -webkit-mask-composite:source-in;mask-composite:intersect} @supports not ((-webkit-mask-composite:source-in) or (mask-composite:intersect)){ .edge .logoshot img{-webkit-mask-image:none;mask-image:none}} .edge .logoshot .frame,.edge .logoshot .stamp{display:none} .edge .txt{position:relative} .netwrap{margin:14px 0 clamp(40px,5vw,72px)} .net{display:block;width:100%;height:auto} .net .arc{fill:none;stroke:#D8DEE2;stroke-width:1;transition:stroke .3s ease,stroke-width .3s ease} .net .arc.lit{stroke:var(--accent);stroke-width:2} .net .pulse{fill:var(--accent)} .net .nd circle{fill:#fff;stroke:#BAC3C8;stroke-width:1.4;transition:stroke .3s ease,fill .3s ease} .net .nd text{font-family:Montserrat,system-ui,-apple-system,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:1.6;fill:#7C8891;text-transform:uppercase;transition:fill .3s ease} .net .nd.lit circle{fill:var(--accent);stroke:var(--accent)} .net .nd.lit text{fill:var(--ink)} .net .hub circle{fill:var(--accent)} .net .hub text{font-family:Montserrat,system-ui,-apple-system,Arial,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:2.6;fill:var(--ink)} .net .hubring{fill:none;stroke:var(--accent);stroke-width:1;transform-box:view-box;transform-origin:406px 261px;animation:netRing 3.4s ease-out infinite} .net .hubring.hr2{animation-delay:1.7s} @keyframes netRing{0%{opacity:.55;transform:scale(.5)}70%{opacity:0;transform:scale(2.6)}100%{opacity:0;transform:scale(2.6)}} @media(prefers-reduced-motion:reduce){.net .hubring{animation:none;opacity:0}.net .pulse{display:none}} @media(max-width:760px){.netwrap{display:none}} .dial .seg{cursor:pointer;pointer-events:stroke} .dial .seg.hov{stroke-width:5.5} .dial .hit{fill:none;stroke:transparent;stroke-width:16;cursor:pointer;pointer-events:stroke} details .det li{opacity:0;transform:translateY(10px)} details[open] .det li{animation:liIn .5s cubic-bezier(.2,.8,.25,1) forwards} details[open] .det li:nth-child(1){animation-delay:.05s} details[open] .det li:nth-child(2){animation-delay:.11s} details[open] .det li:nth-child(3){animation-delay:.17s} details[open] .det li:nth-child(4){animation-delay:.23s} details[open] .det li:nth-child(5){animation-delay:.29s} @keyframes liIn{to{opacity:1;transform:translateY(0)}} summary.hot .ttl{color:var(--accent)} @media(prefers-reduced-motion:reduce){details .det li{opacity:1;transform:none;animation:none}} .dial{display:block;width:138px;height:138px;margin-top:34px} .dial .seg{fill:none;stroke:url(#segGrad);stroke-width:3.4;stroke-linecap:round;transition:stroke-width .3s ease} .dial .seg.on{stroke-width:7} .dial .ticks{transform-box:view-box;transform-origin:70px 70px;animation:dialSpin 30s linear infinite} .dial .idx{font-family:Montserrat,system-ui,-apple-system,Arial,sans-serif;font-size:26px;font-weight:700;fill:var(--ink);letter-spacing:-1} .dial .cap{font-family:Montserrat,system-ui,-apple-system,Arial,sans-serif;font-size:8px;font-weight:700;letter-spacing:2.4;fill:#9AA6AC} @keyframes dialSpin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.dial .ticks{animation:none}} @media(max-width:1000px){.dial{display:none}} .seal{display:block;width:138px;height:138px;margin-top:34px} .seal .ring{transform-box:view-box;transform-origin:70px 70px;animation:sealSpin 26s linear infinite} @keyframes sealSpin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.seal .ring{animation:none}} @media(max-width:1000px){.seal{display:none}} .hl{color:var(--ink);font-weight:600} .uline{position:relative;color:var(--ink);font-weight:600;white-space:nowrap} .uline::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--accent); transform:scaleX(0);transform-origin:0 50%;animation:ulGo 6.5s cubic-bezier(.5,0,.2,1) infinite} @keyframes ulGo{0%{transform:scaleX(0);transform-origin:0 50%}16%{transform:scaleX(1);transform-origin:0 50%}64%{transform:scaleX(1);transform-origin:100% 50%}82%{transform:scaleX(0);transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}} @media(prefers-reduced-motion:reduce){.uline::after{animation:none;transform:scaleX(1)}} .flow{color:transparent;background-color:#1D2730; background-image:repeating-linear-gradient(102deg, rgba(27,37,48,.9) 0px, rgba(17,58,70,.82) 62px, rgba(142,36,56,.72) 104px, rgba(27,37,48,.9) 166px, rgba(27,37,48,.9) 240px), url("https://images.pexels.com/videos/6618337/pexels-photo-6618337.jpeg?auto=compress&cs=tinysrgb&w=1920"); background-size:auto,auto 420%;background-position:0 0,50% 50%;background-repeat:repeat,repeat-x; -webkit-background-clip:text;background-clip:text; animation:numFlow 3.4s linear infinite} @media(prefers-reduced-motion:reduce){.flow{animation:none}} .bigmq{padding:clamp(52px,7vw,104px) 0;overflow:hidden;border-top:1px solid var(--rule)} .bigmq-row{overflow:hidden} .bigmq-row + .bigmq-row{margin-top:clamp(6px,1vw,16px)} .bigmq-track{display:flex;align-items:center;width:max-content; font-size:clamp(38px,7.4vw,104px);font-weight:700;letter-spacing:-.015em;line-height:1.16} .bigmq-track span{display:inline-flex;align-items:center;gap:clamp(16px,2.2vw,38px); padding-right:clamp(16px,2.2vw,38px);white-space:nowrap} .bigmq .r1 .bigmq-track{color:var(--ink);animation:bigmqGo 34s linear infinite} .bigmq .r2 .bigmq-track{color:#E8AEB7;font-size:clamp(26px,4.6vw,64px);letter-spacing:-.005em;animation:bigmqGo 46s linear infinite reverse} .ast{width:.3em;height:.3em;flex:none;color:var(--accent);-webkit-text-stroke:0} @keyframes bigmqGo{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.bigmq-track{animation:none}} .chapline{border-top:1px solid var(--rule);margin-top:clamp(30px,4vw,60px)} .chapline .wrap{display:flex;align-items:center;gap:16px;padding-top:0;padding-bottom:0} .chapline b{display:inline-block;transform:translateY(-50%);background:#fff;padding-right:16px; font-size:12px;font-weight:700;letter-spacing:.24em;color:var(--accent)} .chapline i{flex:1;height:1px;background:transparent} .chapline u{transform:translateY(-50%);background:#fff;padding-left:16px;text-decoration:none; font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)} .stripe{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden;padding:15px 0;background:#fff} .stripe-track{display:flex;width:max-content;animation:stripeGo 46s linear infinite} .stripe-track span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;white-space:nowrap; font-size:11.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#7C8891} .stripe-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none} @keyframes stripeGo{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.stripe-track{animation:none}} .railline{position:absolute;right:clamp(18px,2.6vw,40px);top:8%;bottom:8%;width:2px;background:#D7DDE1;overflow:visible} .railline::before{content:"";position:absolute;left:-6px;top:0;width:14px;height:100%; background:repeating-linear-gradient(to bottom,#C3CCD2 0 1px,transparent 1px 26px)} .railline i{position:absolute;left:-3px;width:8px;height:104px;top:-104px;border-radius:4px; background:linear-gradient(to bottom,rgba(15,92,122,0),#0F5C7A 42%,#12718F 58%,rgba(15,92,122,0)); box-shadow:0 0 18px rgba(18,113,143,.55),0 0 44px rgba(18,113,143,.28); animation:railGo 4.4s linear infinite} @keyframes railGo{from{top:-104px}to{top:100%}} @media(max-width:1000px){.railline{display:none}} @media(prefers-reduced-motion:reduce){.railline i{animation:none;top:40%}} .tickline{display:block;position:relative;width:1px;height:clamp(150px,20vw,260px);background:var(--rule);margin-top:26px} .tickline::before{content:"";position:absolute;left:0;top:0;width:9px;height:100%; background:repeating-linear-gradient(to bottom,#DDE2E5 0 1px,transparent 1px 18px)} .tickline::after{content:"";position:absolute;left:-6px;bottom:0;width:13px;height:1px;background:var(--rule)} .tickline i{position:absolute;left:-3.5px;top:0;width:8px;height:8px;background:var(--accent); animation:tlGo 4.2s cubic-bezier(.55,0,.35,1) infinite} @keyframes tlGo{0%{top:0;opacity:0}7%{opacity:1}72%{top:calc(100% - 8px);opacity:1}86%{opacity:0}100%{top:calc(100% - 8px);opacity:0}} @media(prefers-reduced-motion:reduce){.tickline i{animation:none;top:calc(50% - 4px)}} .head h2{font-size:clamp(30px,4.6vw,54px);max-width:17ch} .head .sub{margin-top:26px;font-size:17px;max-width:50ch} /* opening statement — its own screen, nothing else on it */ .state{min-height:78vh;display:flex;align-items:center;padding-top:0;padding-bottom:0;position:relative;overflow:hidden} .passport{position:relative;width:100%;max-width:390px;padding:clamp(24px,2.4vw,34px)} .passport::before,.passport::after{content:"";position:absolute;width:18px;height:18px;border:1px solid #CFD6DA} .passport::before{top:0;left:0;border-right:0;border-bottom:0} .passport::after{bottom:0;right:0;border-left:0;border-top:0} .passport .wm{width:100%;height:auto;max-width:300px;margin:0 auto 30px} .passport dl{border-top:1px solid var(--rule)} .passport dt{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding-top:15px} .passport dd{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.4;padding:5px 0 15px;border-bottom:1px solid var(--rule)} @media(max-width:1000px){.passport{max-width:none}} .state .sidefoto{position:absolute;right:0;top:clamp(30px,4vw,64px);bottom:clamp(30px,4vw,64px);width:var(--panel);z-index:1;display:flex;align-items:center;justify-content:center;padding-right:40px;border-left:1px solid var(--rule)} .state .sidefoto svg{width:100%;height:auto;max-width:400px;overflow:visible} .wm .rule,.wm .outMask,.wm .fillMask{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0)} .wm .ticks,.wm .mk,.wm .sub,.wm .cap{opacity:0} .wm .dot,.wm .ring{transform-box:fill-box;transform-origin:center;opacity:0} .wm .beamMask,.wm .beam{transform:translateX(-120px)} .wm .beam{opacity:0} .wm.on .ticks{animation:wmIn .5s ease forwards .05s} .wm.on .rule{animation:wmScale 1s cubic-bezier(.5,0,.2,1) forwards .1s} .wm.on .outMask{animation:wmScale 1.25s cubic-bezier(.42,0,.2,1) forwards .18s} .wm.on .fillMask{animation:wmScale 1.25s cubic-bezier(.42,0,.2,1) forwards .58s} .wm.on .dot{animation:wmDot .5s cubic-bezier(.3,1.5,.4,1) forwards 1.5s} .wm.on .ring{animation:wmRing 3.4s ease-out infinite 2.1s} .wm.on .mk{animation:wmIn .6s ease forwards 1.6s} .wm.on .sub{animation:wmIn .7s ease forwards 1.8s} .wm.on .cap{animation:wmIn .7s ease forwards 2s} .wm.on .beamMask{animation:wmBeam 3.4s cubic-bezier(.55,0,.3,1) infinite 3.4s} .wm.on .beam{animation:wmBeamL 3.4s cubic-bezier(.55,0,.3,1) infinite 3.4s} @keyframes wmScale{to{transform:scaleX(1)}} @keyframes wmIn{to{opacity:1}} @keyframes wmDot{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}} @keyframes wmRing{0%{opacity:.5;transform:scale(1)}70%{opacity:0;transform:scale(3.6)}100%{opacity:0;transform:scale(3.6)}} @keyframes wmBeam{0%{transform:translateX(-120px)}62%{transform:translateX(420px)}100%{transform:translateX(420px)}} @keyframes wmBeamL{0%{opacity:0;transform:translateX(-120px)}8%{opacity:1}55%{opacity:1}62%{opacity:0;transform:translateX(420px)}100%{opacity:0;transform:translateX(420px)}} @media(prefers-reduced-motion:reduce){ .wm .rule,.wm .outMask,.wm .fillMask{transform:scaleX(1)} .wm .ticks,.wm .mk,.wm .sub,.wm .cap,.wm .dot{opacity:1} .wm .ring,.wm .beam,.wm .beamMask{display:none} .wm.on *{animation:none} } .state .wrap{position:relative;z-index:2;padding-right:calc(max(0px, var(--panel) - max(0px,(100vw - 1200px)/2)) + 56px)} .state .head{margin-bottom:0} .head .big br{display:inline} @media(max-width:900px){.head .big br{display:none}} .head .big{font-size:clamp(24px,3.1vw,41px);line-height:1.3;color:var(--ink);font-weight:700;letter-spacing:-.03em;max-width:27ch} .state .sub{margin-top:38px;max-width:54ch;font-size:17.5px} /* figures */ .figs{display:grid;grid-template-columns:var(--lbl) repeat(3,1fr);gap:0} .fig{padding:0 34px;border-left:1px solid var(--rule)} .fig:last-child{padding-right:0} .fig i{display:block;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:26px} .num{display:flex;align-items:flex-start;font-size:clamp(60px,8.6vw,126px);font-weight:700;letter-spacing:-.05em;line-height:1;white-space:nowrap;color:var(--ink)} .num .d{display:block;height:1.04em;overflow:hidden} .num .col{display:block;will-change:transform} .num .col b{display:block;height:1.04em;line-height:1.04em;font-weight:700} .num .g{position:relative;display:inline-block;line-height:1.04em;color:var(--ink)} /* flowing fill — applied to the glyphs themselves so every engine renders it */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .num .g{ color:transparent; background-color:#1D2730; background-image:repeating-linear-gradient(102deg, rgba(27,37,48,.9) 0px, rgba(17,58,70,.82) 62px, rgba(142,36,56,.72) 104px, rgba(27,37,48,.9) 166px, rgba(27,37,48,.9) 240px), url("https://images.pexels.com/videos/6618337/pexels-photo-6618337.jpeg?auto=compress&cs=tinysrgb&w=1920"); background-size:auto,auto 420%; background-position:0 0,50% 50%; background-repeat:repeat,repeat-x; background-attachment:fixed,fixed; -webkit-background-clip:text;background-clip:text; animation:numFlow 3.4s linear infinite; } } @keyframes numFlow{to{background-position:240px 0,50% 50%}} /* radar in the left column of the figures strip */ .radar{align-self:center;justify-self:start;width:min(176px,100%);height:auto;margin-left:-22px;margin-right:34px} .radar .sweep{transform-box:view-box;transform-origin:60px 60px;animation:rdSpin 4s linear infinite} .radar .p1{transform-box:view-box;transform-origin:60px 60px;animation:rdPulse 4s ease-out infinite} .radar .blip{transform-box:fill-box;transform-origin:center;opacity:0;animation:rdBlip 4s ease-out infinite} .radar .b1{animation-delay:.44s} .radar .b2{animation-delay:1.61s} .radar .b3{animation-delay:2.78s} .radar .b4{animation-delay:3.44s} @keyframes rdSpin{to{transform:rotate(360deg)}} @keyframes rdPulse{0%{opacity:.42;transform:scale(.16)}55%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}} @keyframes rdBlip{0%{opacity:0;transform:scale(.4)}3%{opacity:1;transform:scale(1)}30%{opacity:.35}55%{opacity:0}100%{opacity:0}} @media(prefers-reduced-motion:reduce){ .num{animation:none;background-color:#1D2730} .radar .sweep,.radar .p1,.radar .blip{animation:none} .radar .blip{opacity:.5} } .figline{height:1px;background:var(--rule);margin:22px 0 0;transform-origin:0 50%;transform:scaleX(0)} .figs.on .figline{animation:figRule .9s cubic-bezier(.5,0,.2,1) forwards .3s} @keyframes figRule{to{transform:scaleX(1)}} @media(prefers-reduced-motion:reduce){ .figline{transform:scaleX(1)} .figs.on .figline{animation:none} } .fig > span{display:block;margin-top:20px;font-size:14px;font-weight:500;color:var(--body);max-width:24ch;line-height:1.6} /* band */ .band{position:relative;height:min(38vw,420px)} .band .shot{position:absolute;inset:0} .band .shot img{filter:saturate(.5) contrast(.98) brightness(.72) hue-rotate(-6deg) blur(2px);transform:scale(1.03)} .band .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,22,29,.62),rgba(9,22,29,.78))} .ticker{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.2vw,30px);overflow:hidden;z-index:3} .ticker-row{overflow:hidden} .ticker-track{display:flex;width:max-content;align-items:center} .ticker-track span{font-size:clamp(20px,2.9vw,38px);font-weight:700;letter-spacing:-.025em;padding:0 30px;white-space:nowrap} .tk-a .ticker-track{animation:tkSlide 40s linear infinite} .tk-a .ticker-track span{color:#fff} .tk-b .ticker-track{animation:tkSlide 62s linear infinite reverse} .tk-b .ticker-track span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55)} .route{position:relative;height:1px;background:rgba(255,255,255,.28);overflow:hidden} .route .rt{display:flex;width:max-content;animation:tkSlide 40s linear infinite} .route .rt i{display:block;width:7px;height:7px;background:var(--accent);margin:-3px 0 0;flex:none} .route .rt u{display:block;width:150px;height:1px;flex:none;text-decoration:none} @keyframes tkSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.ticker-track,.route .rt{animation:none}} /* accordion */ details{border-bottom:1px solid var(--rule)} details:first-of-type{border-top:1px solid var(--rule)} summary{list-style:none;cursor:pointer;padding:36px 0;display:grid;grid-template-columns:var(--lbl) 1fr 40px;align-items:baseline} summary::-webkit-details-marker{display:none} summary .idx{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--accent)} summary .ttl{font-size:clamp(20px,2.3vw,29px);font-weight:700;color:var(--ink);letter-spacing:-.028em;transition:transform .2s} summary .sign{justify-self:end;color:var(--faint);font-size:22px;line-height:1;font-weight:400;transition:transform .22s} details[open] summary .sign{transform:rotate(45deg);color:var(--accent)} summary:hover .ttl{color:var(--accent)} .det{padding:0 0 38px var(--lbl)} .det .lead{margin:0 0 22px;font-size:16px;line-height:1.75;color:var(--body);max-width:74ch} .det .sub{margin:22px 0 12px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)} .det ul{columns:2;column-gap:56px;list-style:none;max-width:840px} .det li{font-size:16.5px;font-weight:500;color:var(--ink);padding:11px 0;break-inside:avoid;display:flex;gap:14px;align-items:baseline;border-bottom:1px solid #E3E7E8} .det li::before{content:"—";color:var(--accent);flex:none;font-size:12px;position:relative;top:-1px} /* edge statement */ .edge{display:grid;grid-template-columns:1.18fr 1fr;align-items:center} .edge .shot{min-height:min(50vw,580px)} .edge .txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,7vw,100px) clamp(40px,5vw,72px) clamp(56px,7vw,100px) clamp(40px,6vw,96px)} .edge h2{font-size:clamp(23px,2.4vw,32px);max-width:26ch;line-height:1.16} .edge .lbl{padding-bottom:16px;border-bottom:1px solid var(--rule);display:block;width:-moz-fit-content;width:fit-content;padding-right:56px} @media(max-width:900px){.edge h2 br{display:none}} .edge p{margin-top:26px;font-size:15.5px;max-width:50ch;line-height:1.74;text-wrap:pretty} html[lang="kz"] .sec p,html[lang="kz"] .edge p{max-width:56ch} html[lang="kz"] .hero h1{font-size:clamp(30px,3.6vw,50px);max-width:21ch} html[lang="kz"] .creed-ru{font-size:clamp(26px,5.2vw,74px)} /* казахские метки разделов длиннее — даём им колонку пошире и перенос */ html[lang="kz"]{--lbl:232px} html[lang="kz"] .lbl{letter-spacing:.16em;line-height:1.5;padding-right:24px;max-width:15ch} html[lang="kz"] .head{gap:0 12px} @media(max-width:1000px){html[lang="kz"]{--lbl:176px}html[lang="kz"] .lbl{max-width:none}} .edge p:first-of-type{font-size:17px;line-height:1.6;color:var(--ink);max-width:48ch} .edge p + p{margin-top:20px} /* register */ .index{border-top:1px solid var(--rule)} .index .ln{position:relative;display:grid;grid-template-columns:1fr auto;align-items:baseline;padding:24px 0 24px 26px;border-bottom:1px solid var(--rule);gap:20px;transition:padding-left .25s ease} .index .ln::before{content:"";position:absolute;left:0;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%; background:var(--accent);opacity:.16;animation:lnPing 5.6s ease-in-out infinite} .index .ln:nth-child(1)::before{animation-delay:0s} .index .ln:nth-child(2)::before{animation-delay:.28s} .index .ln:nth-child(3)::before{animation-delay:.56s} .index .ln:nth-child(4)::before{animation-delay:.84s} .index .ln:nth-child(5)::before{animation-delay:1.12s} .index .ln:nth-child(6)::before{animation-delay:1.4s} .index .ln:nth-child(7)::before{animation-delay:1.68s} @keyframes lnPing{0%{opacity:.16;transform:scale(1)}5%{opacity:1;transform:scale(1.7)}16%{opacity:.16;transform:scale(1)}100%{opacity:.16;transform:scale(1)}} .index .ln:hover{padding-left:34px} .index .ln:hover .a{color:var(--accent)} .index .ln:hover::before{opacity:1;transform:scale(1.7)} @media(prefers-reduced-motion:reduce){.index .ln::before{animation:none}} .index .a{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.02em;transition:color .25s ease;position:relative;overflow:hidden;white-space:nowrap} .index .a::after{content:" ....................................................................................................................";color:#DBE0E3;letter-spacing:3px;font-weight:400} .index .b{font-size:14px;white-space:nowrap;color:var(--body)} /* parties */ .creds{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:0} .cr{background:#fff;padding:clamp(28px,3vw,40px) clamp(26px,2.8vw,36px);position:relative} .cr::after{content:"";position:absolute;left:clamp(26px,2.8vw,36px);bottom:clamp(24px,2.6vw,34px);width:22px;height:1px;background:var(--accent);opacity:.5} .cr b{display:block;font-size:clamp(17px,1.6vw,21px);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.25} .cr u{display:block;margin-top:12px;margin-bottom:34px;font-size:12px;font-weight:700;color:var(--faint); text-decoration:none;letter-spacing:.14em;text-transform:uppercase} .cr i{display:block;margin-top:14px;font-style:normal;font-family:inherit;font-size:12.5px;color:var(--body)} .subhead{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:20px} @media(max-width:900px){.creds{grid-template-columns:1fr}} .logos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)} .lg{background:#fff;padding:26px 24px 24px;min-height:186px;display:flex;flex-direction:column} .lg .ph{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:74px; font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#C7CFD4} .lg .ph::before,.lg .ph::after{content:"";position:absolute;width:14px;height:14px;border:1px solid #D9E0E4} .lg .ph::before{top:0;left:0;border-right:0;border-bottom:0} .lg .ph::after{bottom:0;right:0;border-left:0;border-top:0} .lg b{display:block;margin-top:20px;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.3} .lg u{display:block;margin-top:6px;font-size:11.5px;font-weight:600;color:var(--faint);text-decoration:none;letter-spacing:.02em} @media(max-width:1000px){.logos{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.logos{grid-template-columns:1fr}} .parties{columns:2;column-gap:72px} .parties li{list-style:none;padding:24px 0;border-bottom:1px solid var(--rule);font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.015em;break-inside:avoid} .parties li span{display:block;font-size:12.5px;font-weight:600;color:var(--faint);margin-top:6px;letter-spacing:.02em} /* contact */ .contact{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule)} .contact > div{padding:46px 56px 50px 0;border-bottom:1px solid var(--rule)} .contact h3{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:20px} .contact .big{font-size:clamp(24px,2.6vw,32px);font-weight:700;color:var(--ink);letter-spacing:-.03em} .contact .big.red{color:var(--accent)} .contact p{font-size:15.5px;margin-top:18px;max-width:42ch;line-height:1.7} .contact a.big:hover{color:var(--accent)} /* closing */ .cta .shot img{filter:saturate(.46) contrast(1.05) brightness(.92) hue-rotate(-4deg);object-position:50% 55%;transform-origin:60% 55%;animation:ctaZoom 26s ease-in-out infinite alternate} .cta h2,.cta .ctaact{opacity:0;transform:translateY(26px)} .cta.on h2{animation:ctaUp .95s cubic-bezier(.2,.8,.25,1) forwards} .cta.on .ctaact{animation:ctaUp .95s cubic-bezier(.2,.8,.25,1) forwards .22s} .ctaact{margin-top:clamp(34px,4vw,54px);display:flex;flex-wrap:wrap;align-items:center;gap:clamp(22px,3vw,52px)} .ctaphone{display:inline-flex;align-items:center;gap:14px;color:#fff;font-size:clamp(22px,2.6vw,34px);font-weight:700;letter-spacing:-.02em} .ctaphone .pd{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;animation:ctaDot 2s ease-in-out infinite} .ctaphone small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:8px} .ctalink{display:inline-flex;align-items:center;gap:16px;color:#fff;font-size:16px;font-weight:700; padding-bottom:10px;border-bottom:2px solid rgba(255,255,255,.4);transition:border-color .3s ease,color .3s ease} .ctalink svg{color:var(--accent);transition:transform .35s cubic-bezier(.5,0,.2,1)} .ctalink:hover{border-bottom-color:var(--accent)} .ctalink:hover svg{transform:translateX(9px)} @keyframes ctaZoom{from{transform:scale(1)}to{transform:scale(1.12)}} @keyframes heroPush{from{transform:scale(1.04)}to{transform:scale(1.16)}} @keyframes ctaUp{to{opacity:1;transform:translateY(0)}} @keyframes ctaDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}} @media(prefers-reduced-motion:reduce){.cta .shot img,.ctaphone .pd{animation:none}.cta h2,.cta .ctaact{opacity:1;transform:none}} .cta{position:relative;padding:clamp(100px,13vw,180px) 0} .cta .shot{position:absolute;inset:0} .cta .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,14,20,.9) 0%,rgba(6,14,20,.78) 34%,rgba(6,14,20,.42) 66%,rgba(6,14,20,.26) 100%),linear-gradient(180deg,rgba(6,14,20,.55) 0%,rgba(6,14,20,0) 26%),linear-gradient(0deg,rgba(6,14,20,.5) 0%,rgba(6,14,20,0) 24%)} .cta .wrap{position:relative;z-index:3} .cta h2{color:#fff;font-size:clamp(28px,4.4vw,54px);max-width:19ch;letter-spacing:-.035em;text-shadow:0 2px 26px rgba(6,14,20,.55)} .cta p{color:rgba(255,255,255,.62);margin-top:34px;font-size:14px;letter-spacing:.06em} /* mobile action bar — hidden on desktop */ .mbar{display:none} @media(min-width:1001px){.mbar{display:none !important}} @media(max-width:1000px){ .wrap{padding:0 22px} nav.main,.rail,.right .emerg{display:none} .burger{display:block} header{position:absolute} .bar{gap:16px;padding:18px 0} .mark{font-size:15px} .hero{min-height:auto} .hero .wrap{padding-top:130px;padding-bottom:70px} .hero h1{font-size:clamp(28px,7.6vw,44px);max-width:none} .hero p{margin-top:24px;font-size:15.5px} .hero .act{margin-top:32px;gap:10px} .btn{padding:15px 20px;font-size:11px;letter-spacing:.1em} .head{grid-template-columns:1fr} .head .lbl{padding-top:0;margin-bottom:16px} .state{min-height:auto;flex-direction:column;align-items:stretch;padding:56px 0} .state .wrap{padding-right:22px;order:1} .state .sidefoto{position:static;order:2;width:auto;border-left:0;padding:0 22px; display:block;margin-top:44px} .passport{max-width:none;padding:24px 0 0;border-top:1px solid var(--rule)} .passport::before,.passport::after{display:none} .passport .wm{max-width:240px;margin-bottom:24px} .tickline{display:none} .figs,.contact,.edge,.ctwo{grid-template-columns:1fr} .figs::before{display:none} .seal,.railline{display:none} .figs{gap:36px} .fig{padding:0;border-left:0;border-top:1px solid var(--rule);padding-top:24px} .num{font-size:clamp(44px,13vw,68px)} .det ul{columns:1} .edge .txt{padding:36px 22px 0} .edge .shot{min-height:260px} summary{grid-template-columns:1fr 40px;padding:24px 0} summary .idx{display:none} .det{padding-left:0;padding-bottom:26px} .contact > div{padding-right:0} .index .ln{grid-template-columns:1fr;gap:6px;padding-left:22px} .index .b,.index .a{white-space:normal} .uline{white-space:normal} .index .a::after{content:""} .creds,.logos{grid-template-columns:1fr} .chapline .wrap{gap:10px} .bigmq{padding:44px 0} .cta{padding:80px 0} .ctaact{gap:22px} } @media(max-width:560px){ .mkfull{display:none} .mark{font-size:19px;letter-spacing:-.02em} .hero .act{flex-direction:column;align-items:stretch} .btn{justify-content:center} .act-line{width:100%;justify-content:center} .mdl{padding:14px;align-items:flex-start} .mdl-box{max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px)} .mdl-box .fld{margin-top:16px} .mdl-box{padding:26px 20px} .stripe-track span{font-size:10.5px;letter-spacing:.18em} footer .wrap{flex-direction:column;gap:8px} } @media(max-width:1000px){ /* iOS: text-clipped fills can fail — render solid */ .num,.num .g{color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important; background:none !important;animation:none !important;-webkit-text-stroke:0 !important} .num .g::after{display:none !important} .flow{color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important; background:none !important;animation:none !important} .state .sidefoto svg{overflow:hidden} .mnav{padding-top:88px} .netwrap{overflow:hidden} /* running text: readable sizes on phones */ .ticker{gap:10px} .ticker-track span{font-size:clamp(16px,5.2vw,24px);padding:0 16px} .tk-b{display:none} .route .rt u{width:96px} .bigmq{padding:40px 0} .bigmq-track{font-size:clamp(26px,8.6vw,44px);letter-spacing:-.02em} .bigmq-track span{gap:14px;padding-right:14px} .bigmq .r2 .bigmq-track{font-size:clamp(18px,5.6vw,28px)} .ast{width:.26em;height:.26em} .stripe{padding:12px 0} .stripe-track span{gap:16px;padding-right:16px} /* headings */ .sechead h2,.head h2{font-size:clamp(26px,7.4vw,36px);line-height:1.1} .head .big{font-size:clamp(22px,6.4vw,30px);line-height:1.32} .edge h2{font-size:clamp(22px,6.4vw,30px)} .cta h2{font-size:clamp(24px,7vw,34px)} .contact .big{font-size:clamp(21px,6vw,26px)} .index .a{font-size:17px} /* header on phones: logo + burger only */ .bar{gap:12px;padding:14px 22px;align-items:center} .mark{font-size:16px;white-space:nowrap} .right{gap:12px} .bar .langs{display:none} .burger{width:38px;height:38px} .burger span{left:10px;right:10px} .burger span:nth-child(1){top:13px} .burger span:nth-child(2){top:18px} .burger span:nth-child(3){top:23px} .hero .frame,.hero .stamp{display:none} .mnav .mlangs{display:flex;gap:16px;margin-top:26px;font-size:14px} .mnav .mlangs button{color:rgba(255,255,255,.5);font-weight:700;letter-spacing:.1em} .mnav .mlangs button.on{color:#fff} .mnav .mphone{margin-top:auto} /* full-screen menu */ .mnav{position:fixed;inset:0;top:0;height:100vh;height:100dvh;background:var(--ink);border-top:0; display:none;padding:96px 0 40px;overflow-y:auto} .mnav.on{display:block} .mnav .wrap{display:flex;flex-direction:column;height:100%} .mnav a{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.12); font-family:var(--f);font-size:clamp(24px,7vw,34px);font-weight:700;letter-spacing:-.03em; text-transform:none;opacity:0;transform:translateY(16px)} .mnav.on a{animation:mnIn .5s cubic-bezier(.2,.8,.25,1) forwards} .mnav.on a:nth-child(1){animation-delay:.06s} .mnav.on a:nth-child(2){animation-delay:.12s} .mnav.on a:nth-child(3){animation-delay:.18s} .mnav.on a:nth-child(4){animation-delay:.24s} .mnav.on a:nth-child(5){animation-delay:.32s} .mnav .mphone{margin-top:auto;border-bottom:0;color:var(--accent);font-size:22px;letter-spacing:-.02em;padding-bottom:0} @keyframes mnIn{to{opacity:1;transform:translateY(0)}} body.lock{overflow:hidden} /* sticky action bar */ .mbar{position:fixed;left:0;right:0;bottom:0;z-index:150;display:grid;grid-template-columns:1fr 1fr; box-shadow:0 -10px 30px rgba(10,22,29,.18)} .mbar a{display:flex;align-items:center;justify-content:center;gap:10px;padding:17px 10px; font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none} .mbar-call{background:#1FA855;color:#fff !important} .mbar-req{background:var(--accent);color:#fff !important} .mbar .pd{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:ctaDot 2s ease-in-out infinite} body{padding-bottom:56px} footer{padding-bottom:26px} /* bring the instruments back, compact */ .radar{display:block;width:104px;margin:0 0 26px -6px} .dial{display:block;width:96px;margin:14px 0 0} .head .lbl{position:relative;display:flex;align-items:center;gap:12px;padding-top:0;margin-bottom:20px;font-size:11px} .head .lbl::before{content:"";position:static;width:22px;height:2px;background:var(--accent);flex:none} .head .lbl::after{content:"";flex:1;height:1px;background:var(--rule)} .netwrap{display:block;margin:0 0 34px} .net{min-height:210px} /* photos taller, text tighter */ .band{height:52vw;min-height:230px} .cta{padding:88px 0 96px} } @media(max-width:1000px) and (prefers-reduced-motion:reduce){ .mnav.on a{opacity:1;transform:none;animation:none} } /* --- embed safety: platforms (Tilda, WP themes) override link colours --- */ header .mark,header .mark i{color:#fff !important} header .mark i{color:var(--accent) !important} header .emerg{color:#fff !important;text-decoration:none !important} header .emerg:hover{background:var(--accent) !important;color:#fff !important} header nav.main a{color:rgba(255,255,255,.7) !important;text-decoration:none !important} header nav.main a:hover{color:#fff !important} header:not(.stuck) .langs button{color:rgba(255,255,255,.5) !important} header:not(.stuck) .langs button.on{color:#fff !important} .hero .btn-p{color:#fff !important;text-decoration:none !important} .hero .btn-w{color:#fff !important;text-decoration:none !important} .hero .btn-w:hover{color:var(--ink) !important} .rail{color:rgba(255,255,255,.38) !important} .ctaphone,.ctalink{color:#fff !important;text-decoration:none !important} .act-line{color:#fff !important;text-decoration:none !important} .act-text{color:var(--accent) !important;text-decoration:none !important} .act-text:hover{color:var(--ink) !important} .stamp{color:rgba(255,255,255,.72) !important} .band .ticker-track span{color:#fff !important} /* услуги плитками */ .svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:clamp(28px,3.4vw,48px)} .svc-grid details{border:1px solid var(--rule);border-top:1px solid var(--rule);background:#fff;position:relative; padding:clamp(22px,2.2vw,30px);transition:border-color .25s ease,box-shadow .25s ease} .svc-grid details:hover{border-color:#CBD3D7;box-shadow:0 10px 30px rgba(16,31,39,.06)} .svc-grid details[open]{grid-column:1/-1;border-color:var(--ink)} .svc-grid summary{display:block;padding:0 34px 0 0;grid-template-columns:none} .svc-grid summary .idx{display:block;margin-bottom:16px;font-size:11px;letter-spacing:.2em;color:var(--accent)} .svc-grid summary .ttl{display:block;font-size:clamp(18px,1.45vw,21px);line-height:1.22} .svc-grid summary .sign{position:absolute;top:clamp(20px,2.2vw,28px);right:clamp(20px,2.2vw,28px);justify-self:auto} .svc-grid .det{padding:22px 0 0} .svc-grid .det .lead{font-size:15px;line-height:1.7;max-width:78ch} .svc-grid .det ul{columns:2;column-gap:48px;max-width:none} .svc-grid .det li{font-size:15.5px;padding:10px 0} @media(max-width:760px){.svc-grid{gap:12px}.svc-grid .det ul{columns:1}} /* карта региона */ .net .water path{fill:#EAF1F4;stroke:#DDE7EA;stroke-width:.6} .net .grat path{fill:none;stroke:#E5EAEC;stroke-width:.7;stroke-dasharray:3 6} .net .land.ctx path{fill:#F7F9F9;stroke:#EAEEEF;stroke-width:.8} .net .land.focus path{fill:url(#landG);stroke:#AEB9C0;stroke-width:1} .net .relief.mtn path{fill:#B9C6CD;opacity:.45} .net .relief.des path{fill:#E6E0D3;opacity:.55} .net .cname text{font-family:Montserrat,system-ui,-apple-system,Arial,sans-serif;font-size:9.5px;font-weight:700;letter-spacing:2.4;fill:#9FAAB1;text-transform:uppercase} .net .mk path{fill:none;stroke:#C7CDD1;stroke-width:1} .net .arc{stroke:#B9C2C8;stroke-width:1.1;stroke-dasharray:5 4;animation:arcFlow 3.4s linear infinite} .net marker path{fill:#B9C2C8} .net .arc.lit{stroke:var(--accent);stroke-width:1.8;stroke-dasharray:none;animation:none} .net .nd circle{fill:#fff;stroke:#95A2A9} .net .nd text{fill:#6C7981} @keyframes arcFlow{to{stroke-dashoffset:-36}} @media(prefers-reduced-motion:reduce){.net .arc{animation:none}} /* галерея */ .gal{display:grid;grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(2,clamp(132px,13.5vw,196px)) auto; grid-auto-rows:clamp(132px,13.5vw,196px);gap:clamp(10px,1.1vw,16px);margin-top:clamp(28px,3.4vw,48px)} .gitem:nth-child(4){aspect-ratio:64/30} .gitem:nth-child(4) img{object-position:50% 50%} .gitem{position:relative;margin:0;overflow:hidden;background:#EDF0F1;cursor:pointer;outline:none} .gitem:nth-child(1){grid-column:1/8;grid-row:1/3} .gitem:nth-child(2){grid-column:8/13;grid-row:1/2} .gitem:nth-child(3){grid-column:8/13;grid-row:2/3} .gitem:nth-child(4){grid-column:1/13;grid-row:3/4} .gitem img{width:100%;height:100%;object-fit:cover;display:block; filter:saturate(.62) contrast(1.04) brightness(.94) hue-rotate(-6deg); transition:transform .7s cubic-bezier(.2,.8,.25,1),filter .4s ease} .gitem:hover img,.gitem:focus-visible img{filter:saturate(.72) contrast(1.06) brightness(1);--z:1.17} .gitem::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(8,20,26,0) 45%,rgba(8,20,26,.72) 100%)} .gitem figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,1.6vw,22px); display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;color:#fff} .gitem .gnum{font-size:10.5px;font-weight:700;letter-spacing:.2em;color:var(--accent)} .gitem .gttl{font-size:clamp(15px,1.3vw,18px);font-weight:700;letter-spacing:-.02em} .gitem .gen{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)} .gitem:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .gitem .frm{position:absolute;top:16px;right:16px;bottom:16px;left:16px;z-index:3;pointer-events:none; opacity:0;transform:scale(.965);transform-origin:50% 50%;transition:opacity .35s ease,transform .35s ease} .gitem .frm span{position:absolute;width:16px;height:16px;border:1px solid rgba(255,255,255,.75)} .gitem .frm span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0} .gitem .frm span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0} .gitem .frm span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0} .gitem .frm span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0} .gitem:hover .frm,.gitem:focus-visible .frm{opacity:1;transform:scale(1)} .gitem figcaption{transition:transform .4s cubic-bezier(.2,.8,.25,1)} .gitem:hover figcaption{transform:translateY(-4px)} @media(max-width:760px){ .gal{grid-auto-rows:clamp(190px,52vw,260px)} .gitem:nth-child(n){grid-column:1/13;grid-row:auto} } /* просмотр */ .lb{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center; background:rgba(6,14,20,.93);padding:clamp(16px,4vw,54px)} .lb.open{display:flex} .lb-box{margin:0;max-width:min(1200px,92vw);max-height:86vh;display:flex;flex-direction:column;gap:14px} .lb-box img{max-width:100%;max-height:78vh;object-fit:contain;display:block} .lb-box figcaption{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.66)} .lb-x,.lb-nav{position:absolute;background:none;border:0;color:#fff;cursor:pointer;font-family:inherit;line-height:1} .lb-x{top:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px);font-size:34px;opacity:.75} .lb-nav{top:50%;transform:translateY(-50%);font-size:44px;opacity:.6;padding:10px 16px} .lb-prev{left:clamp(4px,1.6vw,22px)}.lb-next{right:clamp(4px,1.6vw,22px)} .lb-x:hover,.lb-nav:hover{opacity:1;color:var(--accent)} /* плашка под галереей */ .gcta{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center; gap:6px clamp(20px,3vw,60px);width:100%;margin-top:clamp(14px,1.6vw,22px); padding:clamp(26px,3.2vw,44px) clamp(22px,2.6vw,40px); border:1px solid #E1E5E6;background:#F2F4F4;overflow:hidden;isolation:isolate; transition:border-color .35s ease,color .35s ease} .gcta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink); transform:scaleY(0);transform-origin:50% 100%;transition:transform .42s cubic-bezier(.5,0,.2,1)} .gcta .gcta-t{grid-column:1;font-size:clamp(20px,2.4vw,32px);font-weight:700;color:var(--ink); letter-spacing:-.03em;line-height:1.1;transition:color .35s ease} .gcta .gcta-sub{grid-column:1;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--faint);transition:color .35s ease} .gcta .gcta-ar{grid-column:2;grid-row:1/3;display:inline-flex;align-items:center;justify-content:center; width:clamp(56px,5vw,76px);height:clamp(56px,5vw,76px);border-radius:50%; border:1px solid #D8DDDE;background:#fff;color:var(--accent);flex:none; transition:transform .42s cubic-bezier(.5,0,.2,1),border-color .35s ease,background .35s ease} .gcta:hover{border-color:var(--ink)} .gcta:hover::before{transform:scaleY(1)} .gcta:hover .gcta-t{color:#fff} .gcta:hover .gcta-sub{color:rgba(255,255,255,.6)} .gcta:hover .gcta-ar{border-color:var(--accent);background:var(--accent);color:#fff;transform:translateX(8px)} .gcta:focus-visible{outline:2px solid var(--accent);outline-offset:3px} @media(max-width:760px){ .gcta{grid-template-columns:1fr;gap:14px;text-align:left} .gcta .gcta-ar{grid-column:1;grid-row:auto} } /* разделитель с орнаментом */ .orndv{height:clamp(15px,1.7vw,21px);margin:clamp(40px,5vw,76px) 0 0; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22427%22%20height%3D%2280%22%20viewBox%3D%220%200%20427%2080%22%3E%3Cg%20fill%3D%22%23D3DADE%22%3E%3Cg%20transform%3D%22translate%28-26.33%2C105%29%20rotate%28-90%29%22%3E%3Cg%20transform%3D%22scale%28.48%29%22%3E%20%3Cg%20id%3D%22kz-f%22%3E%20%3Cg%20id%3D%22kz-e%22%3E%20%3Cpath%20d%3D%22M120%2073s-9.6-8.2-12.9-4.1c-5.2%206.5%2016.2%2039%2016.2%2050.4%200%2018.8-12.6%2023.9-28%2026.5-10.4%201.8-27.3-.7-27.3-.7%203.2-4.3%205.3-5.6%2010.6-5.9-6-3-12-9.8-12-20.3%200-16.1%206.6-22.8%206.6-41C73.2%2068%2065%2055%2065%2055c14.6%201.5%2021.8%2015%2017.7%2025.8a7%207%200%200%200%206.3-1.9c1%203-.6%206.5-2.9%209.5%201.8%201%203.2.4%206-.2-.2%203-2%206.4-6.6%209.5%2013.2-3.4%2021.2%205.7%2021.2%2015.3%200%207.3-5%2012.5-10%2012.5-1.6%200-4-.7-5.3-1.7-1%202-.4%204.7.5%206.7-3.6-1-6-3.2-4.3-7.7q-4.2-.3-6.5-3%202.3-3%206.5-3c-2-4.2.3-6.5%203.6-8.4%200%200-2.1%208.4%203.2%208.4%202.4%200%204.6-.7%204.6-4.3%200-3.1-2.7-7.4-9-7.1s-11.3%204.3-11.3%2014.3c0%209.2%207.5%2013.8%2017.3%2014%208.8.4%2015.5-4.4%2015.5-13.5C111.5%20108%2094%2080.4%2094%2069.6c0-8.1%207.2-12.7%2014.4-12.7%209.2%200%2017%209.2%2017%209.2l-5.4%206.8z%22%2F%3E%20%3Cpath%20id%3D%22kz-d%22%20d%3D%22M122%20292.1c0%2020.3-18.2%2030.7-32.5%2030.7-19.2%200-29.5-11.5-29.5-26.6%200-8.5%201.6-13.9%205.5-22l44.2-91.7a27%2027%200%200%200%202-12.2c0-8.2-8-14.9-16.3-15-7.6-.3-16%207-16%2015.3%200%2010.1%205.3%2014.6%2010.7%2014.6%206.6%200%209.2-2.7%209.2-7.4q-.2-4.7-3.8-4.6c-5.7%200-4%207.6-4%207.6a5.2%205.2%200%200%201-3.9-7%2010%2010%200%200%201-5.5-3.3q2.2-2.3%205.5-3c-1.3-4.4.5-6.5%204.3-7.5a8%208%200%200%200-.5%204.8c6-1.8%2015.3%201%2015.3%2011.4s-7.2%2019.1-20.7%2017c3.2%201.5%204.8%204.6%205.2%208.1-2.5-1-5.2-1-5.2-1%201.6%202.7%203.8%205%203.7%2010.6-2.5-1.2-4.9-3.3-8-2%205%2010-1.2%2023.6-17%2026.8q8.6-10.3%208.6-21.3c0-23.5-6.5-27.4-6.5-43.8a24%2024%200%200%201%2010.5-19.2v.3A14%2014%200%200%201%2068%20145a62%2062%200%200%201%2034%20.3%2025%2025%200%200%201%2018%2012%2036%2036%200%200%201%200%2028.9c-6.3%2013-35.7%2075.6-44.9%2095.2q-3%206.3-3.1%2013.4c0%2012%2011%2016.2%2017.2%2016.2%207.5%200%2015.2-5.7%2015.2-12.8%200-4.5-2.5-7.3-6-7.3-8.5%200-8%207.2-6.3%2011.8-5.3-2.4-8.3-6.6-7.5-11a14%2014%200%200%201-8.4-4.8c2-2.6%204.6-4.6%208.4-4.7-1.7-6.9%203-9.8%207.5-11.4-1.4%205-2.4%2010.9%206.3%2010.9%206.3%200%2011.2%201%2014.1%205.2l.7-27c.4-8.1-10.8-8-18-5.5%202.7-9.3%208.2-14.4%2021-13.1a10%2010%200%200%201-6.4-9.8c0-7.6%206.2-16%2010.2-18.5l2%2079z%22%2F%3E%20%3Cuse%20xlink%3Ahref%3D%22%23kz-d%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20transform%3D%22matrix%281%200%200%20-1%200%20645%29%22%2F%3E%20%3C%2Fg%3E%20%3Cuse%20xlink%3Ahref%3D%22%23kz-e%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20transform%3D%22matrix%28-1%200%200%201%20240%200%29%22%2F%3E%20%3C%2Fg%3E%20%3Cuse%20xlink%3Ahref%3D%22%23kz-f%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20transform%3D%22matrix%281%200%200%20-1%200%201000%29%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28400.67%2C105%29%20rotate%28-90%29%22%3E%3Cg%20transform%3D%22scale%28.48%29%22%3E%20%3Cg%20id%3D%22kz-f%22%3E%20%3Cg%20id%3D%22kz-e%22%3E%20%3Cpath%20d%3D%22M120%2073s-9.6-8.2-12.9-4.1c-5.2%206.5%2016.2%2039%2016.2%2050.4%200%2018.8-12.6%2023.9-28%2026.5-10.4%201.8-27.3-.7-27.3-.7%203.2-4.3%205.3-5.6%2010.6-5.9-6-3-12-9.8-12-20.3%200-16.1%206.6-22.8%206.6-41C73.2%2068%2065%2055%2065%2055c14.6%201.5%2021.8%2015%2017.7%2025.8a7%207%200%200%200%206.3-1.9c1%203-.6%206.5-2.9%209.5%201.8%201%203.2.4%206-.2-.2%203-2%206.4-6.6%209.5%2013.2-3.4%2021.2%205.7%2021.2%2015.3%200%207.3-5%2012.5-10%2012.5-1.6%200-4-.7-5.3-1.7-1%202-.4%204.7.5%206.7-3.6-1-6-3.2-4.3-7.7q-4.2-.3-6.5-3%202.3-3%206.5-3c-2-4.2.3-6.5%203.6-8.4%200%200-2.1%208.4%203.2%208.4%202.4%200%204.6-.7%204.6-4.3%200-3.1-2.7-7.4-9-7.1s-11.3%204.3-11.3%2014.3c0%209.2%207.5%2013.8%2017.3%2014%208.8.4%2015.5-4.4%2015.5-13.5C111.5%20108%2094%2080.4%2094%2069.6c0-8.1%207.2-12.7%2014.4-12.7%209.2%200%2017%209.2%2017%209.2l-5.4%206.8z%22%2F%3E%20%3Cpath%20id%3D%22kz-d%22%20d%3D%22M122%20292.1c0%2020.3-18.2%2030.7-32.5%2030.7-19.2%200-29.5-11.5-29.5-26.6%200-8.5%201.6-13.9%205.5-22l44.2-91.7a27%2027%200%200%200%202-12.2c0-8.2-8-14.9-16.3-15-7.6-.3-16%207-16%2015.3%200%2010.1%205.3%2014.6%2010.7%2014.6%206.6%200%209.2-2.7%209.2-7.4q-.2-4.7-3.8-4.6c-5.7%200-4%207.6-4%207.6a5.2%205.2%200%200%201-3.9-7%2010%2010%200%200%201-5.5-3.3q2.2-2.3%205.5-3c-1.3-4.4.5-6.5%204.3-7.5a8%208%200%200%200-.5%204.8c6-1.8%2015.3%201%2015.3%2011.4s-7.2%2019.1-20.7%2017c3.2%201.5%204.8%204.6%205.2%208.1-2.5-1-5.2-1-5.2-1%201.6%202.7%203.8%205%203.7%2010.6-2.5-1.2-4.9-3.3-8-2%205%2010-1.2%2023.6-17%2026.8q8.6-10.3%208.6-21.3c0-23.5-6.5-27.4-6.5-43.8a24%2024%200%200%201%2010.5-19.2v.3A14%2014%200%200%201%2068%20145a62%2062%200%200%201%2034%20.3%2025%2025%200%200%201%2018%2012%2036%2036%200%200%201%200%2028.9c-6.3%2013-35.7%2075.6-44.9%2095.2q-3%206.3-3.1%2013.4c0%2012%2011%2016.2%2017.2%2016.2%207.5%200%2015.2-5.7%2015.2-12.8%200-4.5-2.5-7.3-6-7.3-8.5%200-8%207.2-6.3%2011.8-5.3-2.4-8.3-6.6-7.5-11a14%2014%200%200%201-8.4-4.8c2-2.6%204.6-4.6%208.4-4.7-1.7-6.9%203-9.8%207.5-11.4-1.4%205-2.4%2010.9%206.3%2010.9%206.3%200%2011.2%201%2014.1%205.2l.7-27c.4-8.1-10.8-8-18-5.5%202.7-9.3%208.2-14.4%2021-13.1a10%2010%200%200%201-6.4-9.8c0-7.6%206.2-16%2010.2-18.5l2%2079z%22%2F%3E%20%3Cuse%20xlink%3Ahref%3D%22%23kz-d%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20transform%3D%22matrix%281%200%200%20-1%200%20645%29%22%2F%3E%20%3C%2Fg%3E%20%3Cuse%20xlink%3Ahref%3D%22%23kz-e%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20transform%3D%22matrix%28-1%200%200%201%20240%200%29%22%2F%3E%20%3C%2Fg%3E%20%3Cuse%20xlink%3Ahref%3D%22%23kz-f%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20transform%3D%22matrix%281%200%200%20-1%200%201000%29%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/auto 100% repeat-x; -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)} @media(max-width:760px){.orndv{margin-top:30px;height:14px}} /* кнопка-маршрут под географией */ .routebtn{position:relative;display:flex;align-items:center;gap:clamp(16px,2vw,30px);width:100%; margin-top:clamp(30px,3.6vw,50px);padding:clamp(26px,3vw,40px) clamp(24px,3vw,44px); background:var(--dark);color:#fff;text-decoration:none;overflow:hidden;isolation:isolate} .routebtn::before{content:"";position:absolute;inset:0;z-index:-1; background:radial-gradient(120% 160% at 12% 0%,rgba(216,65,86,.22) 0%,rgba(216,65,86,0) 55%); opacity:0;transition:opacity .45s ease} .routebtn:hover::before{opacity:1} .rb-frm{position:absolute;inset:12px;pointer-events:none} .rb-frm span{position:absolute;width:14px;height:14px;border:1px solid rgba(255,255,255,.28)} .rb-frm span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0} .rb-frm span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0} .rb-frm span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0} .rb-frm span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0} .rb-box{display:flex;flex-direction:column;gap:9px;flex:none} .rb-sub{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)} .routebtn .rb-t{font-size:clamp(19px,2.1vw,28px);font-weight:700;letter-spacing:-.03em; line-height:1.05;color:#fff;white-space:nowrap;transition:color .3s ease} .routebtn .rb-line{flex:1;height:2px;min-width:24px;align-self:flex-end;margin-bottom:9px; background-image:linear-gradient(90deg,rgba(255,255,255,.4) 0 6px,transparent 6px 14px); background-size:14px 2px;background-repeat:repeat-x;background-position:0 50%;transition:background-image .3s ease} .routebtn .rb-ar{flex:none;display:inline-flex;align-items:center;justify-content:center; width:clamp(46px,4.2vw,60px);height:clamp(46px,4.2vw,60px);border-radius:50%; border:1px solid rgba(255,255,255,.35);color:#fff; transition:transform .4s cubic-bezier(.5,0,.2,1),background .3s ease,border-color .3s ease} .routebtn:hover .rb-line{background-image:linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 14px); animation:rbFlow 1.1s linear infinite} .routebtn:hover .rb-ar{background:var(--accent);border-color:var(--accent);transform:translateX(7px)} .routebtn:focus-visible{outline:2px solid var(--accent);outline-offset:4px} @keyframes rbFlow{to{background-position:14px 50%}} @media(prefers-reduced-motion:reduce){.routebtn:hover .rb-line{animation:none}} @media(max-width:700px){ .routebtn{flex-wrap:wrap;gap:18px} .routebtn .rb-t{white-space:normal} .routebtn .rb-line{display:none} .rb-box{flex:1} } /* рамка вокруг карты, списка и кнопки */ .geobox{position:relative;border:1px solid var(--rule);background:#fff; padding:clamp(22px,2.6vw,40px) clamp(18px,2.4vw,38px) clamp(18px,2.4vw,38px); margin-top:clamp(18px,2.2vw,30px)} .geobox::before,.geobox::after{content:"";position:absolute;width:18px;height:18px;pointer-events:none} .geobox::before{top:-1px;left:-1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent)} .geobox::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent)} .geobox .gb-tag{position:absolute;top:0;left:clamp(28px,3.4vw,52px);transform:translateY(-50%); background:#fff;padding:0 12px;font-size:10.5px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--faint)} .geobox .netwrap{margin-top:8px} .geobox .index{border-top:1px solid var(--rule)} @media(max-width:760px){.geobox{padding:18px 14px 14px}} /* почтовые ящики */ .mails{display:grid;gap:2px;margin-top:6px} .mails a{display:flex;align-items:center;gap:12px;padding:11px 0; font-size:clamp(15px,1.35vw,18.5px);font-weight:700;color:var(--ink);letter-spacing:-.01em; border-bottom:1px solid var(--hair);transition:color .25s ease,padding-left .25s ease} .mails a:last-child{border-bottom:0} .mails a .pd{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.3;flex:none; transition:opacity .25s ease,transform .25s ease} .mails a:hover{color:var(--accent);padding-left:8px} .mails a:hover .pd{opacity:1;transform:scale(1.4)} /* закреплённая шапка */ header{transition:background .3s ease,box-shadow .3s ease} header.stuck{position:fixed;background:#fff;box-shadow:0 1px 0 var(--rule),0 10px 30px rgba(16,31,39,.06); animation:hdrDrop .38s cubic-bezier(.2,.8,.25,1)} @keyframes hdrDrop{from{transform:translateY(-100%)}to{transform:translateY(0)}} header.stuck .bar{padding:16px 0} header.stuck .mark{color:var(--ink);font-size:clamp(15px,1.15vw,18px)} header.stuck .mark i{color:var(--accent)} header.stuck .mkfull{display:inline} @media(max-width:1000px){header.stuck .mkfull{display:none}} header.stuck nav.main a{color:var(--body) !important} header.stuck nav.main a:hover{color:var(--accent) !important} header.stuck .emerg{color:var(--ink) !important;border-color:var(--rule)} header.stuck .emerg:hover{border-color:var(--accent)} header.stuck .langs button{color:var(--body) !important} header.stuck .langs button.on{color:var(--ink) !important} header.stuck .burger{border-color:rgba(16,31,39,.25)} header.stuck .burger span{background:var(--ink)} .hbtn{display:none;align-items:center;flex:none;background:var(--accent);color:#fff !important; font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; padding:14px 22px;text-decoration:none !important;white-space:nowrap; transition:background .25s ease,transform .25s ease} .hbtn:hover{background:var(--accent-dk);transform:translateY(-1px)} header.stuck .hbtn{display:inline-flex} @media(max-width:1000px){header.stuck .hbtn{display:none}} /* ===== мобильная отделка ===== */ @media(max-width:1000px){ html,body{max-width:100%;overflow-x:hidden} /* карта: подписи в единицах viewBox, иначе на телефоне они микроскопические */ .net .nd text{font-size:19px;letter-spacing:.05em} .net .hub text{font-size:20px;letter-spacing:.12em} .net .cname text{display:none} .net .grat path{display:none} .net .nd circle{r:6.5;stroke-width:2} .net .arc{stroke-width:2;stroke-dasharray:7 6} .net .mk path{display:none} .netwrap{margin-left:-4vw;margin-right:-4vw;width:auto} /* зона выезда */ .geobox{padding:16px 12px 12px} .geobox .gb-tag{left:16px;font-size:9.5px;letter-spacing:.16em} /* почта: пальцем попасть */ .mails a{padding:15px 0;font-size:16px} /* флаги: увеличиваем область нажатия, не увеличивая сам флаг */ .langs button{padding:9px 7px} /* просмотр фото: кнопки под палец, стрелки внизу */ .lb-x{top:10px;right:10px;font-size:30px;width:46px;height:46px} .lb-nav{top:auto;bottom:14px;transform:none;width:56px;height:56px;font-size:34px; display:flex;align-items:center;justify-content:center; border:1px solid rgba(255,255,255,.25);border-radius:50%} .lb-prev{left:22%}.lb-next{right:22%} .lb-box{max-height:72vh} .lb-box img{max-height:62vh} /* галерея: подписи не наезжают на кадр */ .gitem figcaption{padding:14px 16px;gap:4px 10px} .gitem .gttl{font-size:16px} .gitem .gen{font-size:9.5px;letter-spacing:.12em} /* плашка под галереей */ .gcta{padding:24px 20px} .gcta .gcta-t{font-size:22px} /* закреплённая шапка ниже, чтобы не съедала экран */ header.stuck .bar{padding:10px 22px} header.stuck{box-shadow:0 1px 0 var(--rule),0 6px 18px rgba(16,31,39,.08)} /* услуги: плитки в одну колонку, воздух внутри меньше */ .svc-grid details{padding:20px 18px} .svc-grid summary .ttl{font-size:17px} .svc-grid .det li{font-size:15px;padding:9px 0} /* разделитель тоньше и ближе */ .orndv{height:13px} } @media(max-width:560px){ .net .nd text{font-size:23px} .net .hub text{font-size:24px} .lb-prev{left:14%}.lb-next{right:14%} .gcta .gcta-t{font-size:20px} .routebtn .rb-t{font-size:20px} .routebtn{padding:22px 18px} } /* девиз с фотозаливкой */ .creed{background:var(--dark);padding:clamp(56px,8vw,120px) 0;overflow:hidden} .creed .creed-lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.24em; text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:clamp(20px,2.4vw,34px)} .creed-ru{font-size:clamp(28px,6.4vw,92px);font-weight:700;line-height:1;letter-spacing:-.04em; color:#fff;margin:0;width:100%;white-space:nowrap} @media(max-width:620px){.creed-ru{white-space:normal;font-size:clamp(26px,7.6vw,44px)}} .creed-en{margin:clamp(18px,2vw,28px) 0 0;font-size:clamp(13px,1.5vw,20px);font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} .creed-kz{margin:10px 0 0;font-size:clamp(11px,1.1vw,14px);font-weight:600;letter-spacing:.1em; color:rgba(255,255,255,.42)} @supports ((-webkit-background-clip:text) or (background-clip:text)){ @media(min-width:1001px){ .creed-ru{ background-image:none; background-size:300% auto;background-position:0% 50%;background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.42); animation:creedPan 34s linear infinite alternate; filter:saturate(1.25) brightness(1.18) contrast(.95)} } } @keyframes creedPan{from{background-position:0% 50%}to{background-position:100% 50%}} @media(prefers-reduced-motion:reduce){.creed-ru{animation:none}} /* галерея: проявление и лёгкий параллакс */ .gitem{--rise:26px} .gitem.rise{opacity:0;transform:translateY(var(--rise)); transition:opacity .75s cubic-bezier(.2,.8,.25,1),transform .75s cubic-bezier(.2,.8,.25,1)} .gitem.rise.in{opacity:1;transform:none} .gitem img{--z:1.12;will-change:transform;transform:scale(var(--z))} .gitem .zoom{position:absolute;z-index:3;right:clamp(14px,1.6vw,22px);top:clamp(14px,1.6vw,22px); width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.45); display:flex;align-items:center;justify-content:center;color:#fff; opacity:0;transform:scale(.85);transition:opacity .35s ease,transform .35s ease,background .3s ease} .gitem:hover .zoom,.gitem:focus-visible .zoom{opacity:1;transform:scale(1)} .gitem .zoom:hover{background:var(--accent);border-color:var(--accent)} @media(prefers-reduced-motion:reduce){ .gitem.rise{opacity:1;transform:none;transition:none} .gitem img{transform:none !important} } @media(max-width:760px){.gitem .zoom{display:none}} /* круглая эмблема в блоке девиза */ .creed .wrap{display:flex;align-items:center;gap:clamp(24px,3.2vw,56px);flex-wrap:nowrap} .creed-seal{order:-1} .creed-txt{flex:1 1 auto;min-width:0} .creed-seal{flex:none;width:clamp(112px,11vw,158px);height:clamp(112px,11vw,158px)} .creed-seal svg{width:100%;height:100%;overflow:visible} .creed-seal .cs-o{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1} .creed-seal .cs-i{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1;stroke-dasharray:2 5} .creed-seal .cs-t{fill:rgba(255,255,255,.55);font-size:11.4px;font-weight:700;letter-spacing:2.6px; font-family:var(--f)} .creed-seal .cs-spin{transform-origin:100px 100px;animation:creedSpin 34s linear infinite} .creed-seal .cs-dia{fill:var(--accent)} .creed-seal .cs-y{fill:rgba(255,255,255,.42);font-size:9px;font-weight:700;letter-spacing:2.2px; text-anchor:middle;font-family:var(--f)} .creed-seal .cs-ticks line{stroke:rgba(255,255,255,.28);stroke-width:1} @keyframes creedSpin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.creed-seal .cs-spin{animation:none}} @media(max-width:900px){.creed .wrap{flex-wrap:wrap;gap:24px}.creed-seal{order:-1;width:104px;height:104px}} .hero .hkick{font-size:clamp(10.5px,1vw,12px);font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--accent);margin-bottom:clamp(14px,1.6vw,22px)} .hero .hkick:empty{display:none} .crnote{display:flex;align-items:flex-start;gap:12px;margin:clamp(20px,2.2vw,28px) 0 0; font-size:13.5px;line-height:1.6;color:var(--faint);max-width:62ch} .crnote .crn-m{flex:none;width:18px;height:1px;background:var(--accent);margin-top:11px} .mails a{flex-wrap:wrap} .mails .ml-a{flex:none} .mails .ml-r{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--faint);margin-left:auto;padding-left:18px;transition:color .25s ease} .mails a:hover .ml-r{color:var(--accent)} @media(max-width:700px){.mails .ml-r{margin-left:0;padding-left:18px;width:100%;margin-top:4px}} /* принципы работы */ .prin{padding:clamp(56px,7vw,104px) 0} .prin .head{margin-bottom:clamp(30px,3.4vw,48px)} .prin .head .sub{margin-top:16px} .prin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#DFE4E5; border:1px solid #DFE4E5} @media(max-width:1000px){.prin-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.prin-grid{grid-template-columns:1fr}} .prin-c{display:flex;flex-direction:column;gap:10px;background:#F2F4F4;padding:clamp(24px,2.6vw,36px); transition:background .35s ease} .prin-c:hover{background:#fff} .prin-n{font-size:10.5px;font-weight:700;letter-spacing:.2em;color:var(--accent)} .prin-t{font-size:clamp(16px,1.4vw,19px);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.2} .prin-d{font-size:14px;line-height:1.64;color:var(--body);max-width:34ch} .prin-t{min-height:2.4em;display:flex;align-items:flex-end} /* закрывающая линия блока принципов */ .prin-end{display:flex;align-items:center;gap:0;margin-top:clamp(28px,3.2vw,44px)} .prin-end .pe-bar{flex:none;width:clamp(40px,5vw,72px);height:2px;background:var(--accent)} .prin-end .pe-line{flex:1;height:1px;background:linear-gradient(90deg,#CCD4D7,#CCD4D7 70%,rgba(204,212,215,0))} .prin-end .pe-dot{flex:none;width:7px;height:7px;background:var(--accent);transform:rotate(45deg); margin-left:10px;opacity:.55} .fld textarea{width:100%;border:0;border-bottom:1px solid var(--rule);background:none;font:inherit; font-size:16px;color:var(--ink);padding:12px 0;resize:vertical;min-height:76px;outline:none; transition:border-color .25s ease} .fld textarea:focus{border-color:var(--accent)} .msgr{margin-top:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px} .msgr .msgr-l{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)} .msgr a{font-size:17px;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.01em; border-bottom:1px solid var(--rule);transition:color .25s ease,border-color .25s ease} .msgr a:hover{color:var(--accent);border-color:var(--accent)} /* ===== мобильная отделка: блоки, добавленные позже ===== */ @media(max-width:1000px){ /* принципы */ .prin{padding:clamp(44px,7vw,72px) 0} .prin-c{padding:20px 18px;gap:8px} .prin-t{min-height:0;font-size:17px} .prin-d{font-size:14px;max-width:none} .prin-end{margin-top:22px} .prin-end .pe-bar{width:34px} /* телефон и мессенджеры */ .msgr{margin-top:14px;gap:4px 12px} .msgr a{font-size:16px} .msgr .msgr-l{width:100%} /* поля формы */ .fld textarea{font-size:16px;min-height:88px} /* переключатель языков в мобильном меню — крупнее и в строку */ .mlangs{gap:4px} .mlangs button{padding:10px 12px;font-size:12.5px} /* английская строка над заголовком */ .hero .hkick{letter-spacing:.18em;margin-bottom:12px} /* эмблема девиза не должна жать текст */ .creed .wrap{align-items:flex-start} } @media(max-width:620px){ .prin-end .pe-dot{display:none} .msgr a{font-size:15.5px} } footer{background:#0C1A21;color:rgba(255,255,255,.45);padding:clamp(44px,5vw,68px) 0 clamp(26px,3vw,38px); font-size:12px;letter-spacing:.05em} footer .ft-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between; gap:14px clamp(24px,4vw,70px);padding-bottom:clamp(22px,2.6vw,32px)} footer .ft-brand{font-size:clamp(15px,1.5vw,19px);font-weight:700;color:#fff;letter-spacing:-.02em} footer .ft-brand i{font-style:normal;color:var(--accent)} footer .ft-motto{font-size:11.5px;letter-spacing:.12em;color:rgba(255,255,255,.4);text-align:right;max-width:62ch} footer .ft-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:10px 24px;padding-top:clamp(18px,2.2vw,24px);border-top:1px solid rgba(255,255,255,.1); font-size:11.5px;letter-spacing:.1em;color:rgba(255,255,255,.38)} footer .fdev{display:inline-flex;align-items:center;gap:12px;text-decoration:none; padding:10px 16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03); transition:border-color .3s ease,background .3s ease} footer .fdev:hover{border-color:rgba(216,65,86,.55);background:rgba(216,65,86,.08)} footer .fdev-l{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:rgba(255,255,255,.34);transition:color .3s ease} footer .fdev-n{font-size:13px;font-weight:700;letter-spacing:.02em;color:#fff} footer .fdev-ar{display:inline-flex;color:var(--accent);opacity:.55; transition:opacity .3s ease,transform .3s ease} footer .fdev:hover .fdev-l{color:rgba(255,255,255,.6)} footer .fdev:hover .fdev-ar{opacity:1;transform:translateX(4px)} footer .fdev:focus-visible{outline:2px solid var(--accent);outline-offset:3px} @media(max-width:820px){ footer .ft-top{flex-direction:column;align-items:flex-start;gap:12px} footer .ft-motto{text-align:left;line-height:1.7} footer .ft-bot{flex-direction:column;gap:10px} } /* всплывающая форма на телефоне */ @media(max-width:760px){ .mdl{padding:0;align-items:stretch} .mdl-box{width:100%;max-height:100vh;max-height:100dvh;padding:22px 18px calc(22px + env(safe-area-inset-bottom)); display:flex;flex-direction:column} .mdl-box::before,.mdl-box::after{display:none} .mdl-box h3{font-size:24px;letter-spacing:-.03em;padding-right:40px} .mdl-box .fld{margin-top:14px} .mdl-box .fld label{font-size:9.5px;letter-spacing:.14em;line-height:1.4} .mdl-box .fld input{padding:9px 0;font-size:16px} .mdl-box .fld textarea{min-height:64px;padding:9px 0} .mdl-box .mdl-send{margin-top:18px;width:100%;justify-content:center;position:sticky;bottom:0} .mdl-x{top:14px;right:14px} } .mbar-call .wa{flex:none;margin-right:9px} .mbar-call span{white-space:nowrap} .mbar-call{display:inline-flex;align-items:center;justify-content:center} .gal-hint{display:none} /* ================= МОБИЛЬНАЯ ВЕРСИЯ: доводка ================= */ @media(max-width:760px){ /* контент не прячется под нижней панелью */ body{padding-bottom:calc(64px + env(safe-area-inset-bottom))} .mbar{padding-bottom:env(safe-area-inset-bottom)} /* якоря не уезжают под шапку */ section,[id]{scroll-margin-top:76px} /* --- первый экран --- */ .hero{min-height:auto;padding:88px 0 34px} .hero .shot img,.hero .bgvid{object-position:60% 50%} .hero h1{font-size:clamp(22px,5.9vw,28px);line-height:1.16;letter-spacing:-.025em;max-width:none} .hero p{font-size:13.5px;line-height:1.55;margin-top:14px;max-width:none;color:rgba(255,255,255,.78)} .hero .act{margin-top:20px;gap:8px} .hero .act .btn{flex:1 1 100%;justify-content:center;padding:14px 18px;font-size:10.5px;letter-spacing:.14em} .hero .hkick{margin-bottom:10px;font-size:9.5px} .rail{display:none} /* --- заголовки разделов --- */ .head h2{font-size:clamp(23px,6.2vw,30px);line-height:1.14;letter-spacing:-.03em} .head .lbl{margin-bottom:14px} .sub{font-size:14.5px;line-height:1.62} /* --- услуги --- */ .svc-grid summary{padding-right:38px} .svc-grid summary .idx{margin-bottom:10px} .svc-grid details{padding:18px 16px} .svc-grid .det .lead{font-size:14.5px} /* --- галерея: листается пальцем --- */ .gal{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none; margin-left:-22px;margin-right:-22px;padding:0 22px} .gal::-webkit-scrollbar{display:none} .gitem:nth-child(n){grid-column:auto;grid-row:auto} .gitem{flex:0 0 82%;scroll-snap-align:center;aspect-ratio:4/3;height:auto} .gitem:nth-child(4){aspect-ratio:4/3} .gal-hint{display:block;margin-top:12px;font-size:10px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--faint)} /* --- бегущие строки тише --- */ .bigmq-track span{font-size:clamp(26px,8vw,40px)} .stripe-track span{font-size:10px;letter-spacing:.16em} /* --- девиз --- */ .creed{padding:44px 0} .creed-ru{font-size:clamp(25px,7.4vw,34px);line-height:1.08} .creed-seal{width:88px;height:88px} /* --- контакты --- */ .contact .big{font-size:24px;letter-spacing:-.02em} .mails a{padding:16px 0} .mails .ml-r{font-size:10px} /* --- подвал --- */ footer{padding:36px 0 26px} footer .ft-brand{font-size:15px} footer .ft-motto{font-size:10.5px;letter-spacing:.1em;line-height:1.8} footer .fdev{width:100%;justify-content:space-between;padding:12px 14px} } /* ===== цифры на телефоне: простой список без коробок ===== */ @media(max-width:760px){ .figs{display:block;background:none;border:0;margin-top:4px} .figs .radar{display:none !important} .fig{display:block;background:none;border:0;padding:22px 0;position:relative} .fig + .fig{border-top:1px solid var(--rule)} .fig i{display:block;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--accent);margin:0 0 6px} .fig .num,.fig .num *{font-size:60px !important;line-height:1 !important;letter-spacing:-.05em; color:var(--ink)} .fig .num{margin:0} .fig .figline{display:none} .fig span{display:block;margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--body);max-width:30ch} .fig::after{display:none} } /* ===== мобилка: разделитель, плашки, знак ADS ===== */ @media(max-width:760px){ /* разделитель главы: без белых плашек, одной строкой */ .chapline{border-top:0;margin-top:34px} .chapline .wrap{gap:10px;padding-top:0} .chapline b{transform:none;background:none;padding:0;font-size:10.5px;letter-spacing:.2em} .chapline i{flex:1;height:1px;background:var(--rule)} .chapline u{transform:none;background:none;padding:0;font-size:10px;letter-spacing:.16em} /* плашка «Хочу узнать ваши условия» */ .gcta{grid-template-columns:1fr auto;align-items:center;gap:6px 14px;padding:20px 16px} .gcta .gcta-t{font-size:19px;line-height:1.15} .gcta .gcta-sub{font-size:9.5px;letter-spacing:.14em} .gcta .gcta-ar{grid-column:2;grid-row:1/3;width:44px;height:44px} /* тёмная кнопка «Согласовать выезд» */ .routebtn{padding:20px 16px;gap:12px} .routebtn .rb-sub{font-size:9px;letter-spacing:.12em} .routebtn .rb-t{font-size:20px} .routebtn .rb-ar{width:42px;height:42px} .rb-frm{inset:8px} .geobox::before,.geobox::after{width:12px;height:12px} /* знак ADS: сплошной, без картинки в буквах и без розовой полосы */ .wm g[mask="url(#wmOut)"]{display:none !important} .wm g[mask="url(#wmBeamM)"],.wm .beam{display:none !important} .wm g[mask="url(#wmFill)"] text{fill:#101F27 !important} } /* ===== мобилка: бегущая лента и циферблат ===== */ /* ===== лента со странами на телефоне ===== */ /* ===== мобилка: знак ADS между текстом и кнопкой ===== */ @media(max-width:760px){ .edge{display:flex;flex-direction:column;padding:0} .edge .txt{display:contents} .edge .txt > *{order:1;padding-left:22px;padding-right:22px} .edge .txt > .railline{display:none} .edge .txt > .lbl{padding-top:34px} .edge .logoshot{order:2;margin:22px 0 0;padding:0 14px;background:none} .edge .logoshot img{width:100%;height:auto} .edge .txt > .act-line{order:3;margin:26px 22px 6px;align-self:flex-start; width:auto;padding:16px 26px;font-size:11px;letter-spacing:.14em} } /* ===== мобилка: переносы и поля текста ===== */ @media(max-width:760px){ .edge .txt > p{font-size:15px;line-height:1.62;max-width:none;text-wrap:pretty; hyphens:auto;-webkit-hyphens:auto} .edge .txt > h2{font-size:clamp(26px,7.4vw,34px);line-height:1.12;margin-bottom:4px} .sub,.head .sub,.edge .txt > p{overflow-wrap:break-word} p,li,.sub{text-wrap:pretty} } /* ===== мобилка: блок «Убыток уже произошёл» ===== */ @media(max-width:760px){ .head .big br{display:inline !important} .head .big br::after{content:" "} .head .big{font-size:clamp(25px,7vw,32px) !important;line-height:1.14 !important;letter-spacing:-.03em} .state .head{margin-bottom:18px} .state p,.state .sub{font-size:15px;line-height:1.6} .state .act-line,.head + .act-line{width:auto;align-self:flex-start;padding:16px 26px; font-size:11px;letter-spacing:.14em;margin-top:26px} } /* ================= МОБИЛЬНАЯ ВЕРСИЯ: единый ритм по всем блокам ================= */ @media(max-width:760px){ /* поля и вертикальный ритм */ .wrap{padding-left:22px;padding-right:22px} section{padding-top:52px;padding-bottom:52px} section.sep{padding-top:46px;padding-bottom:46px} /* заголовки разделов — одинаковые по всему сайту */ .head{display:block;margin-bottom:22px} .head .lbl{margin-bottom:12px;font-size:9.5px;letter-spacing:.18em} .head h2{font-size:clamp(25px,7vw,32px);line-height:1.14;letter-spacing:-.03em;max-width:none} .head .sub{margin-top:14px;font-size:15px;line-height:1.6;max-width:none} .tickline,.railline{display:none} /* все кнопки: по содержимому, одинаковый размер */ .act-line,.act-text{width:auto;align-self:flex-start;padding:15px 24px; font-size:11px;letter-spacing:.14em;margin-top:24px} .act-text{padding:0 0 12px;font-size:16px;letter-spacing:-.01em} .btn{padding:15px 22px;font-size:11px;letter-spacing:.14em} /* услуги */ #services .head{margin-bottom:20px} .svc-grid{gap:10px;margin-top:18px} .svc-grid details{padding:18px 16px} .svc-grid summary .idx{font-size:10px;margin-bottom:8px} .svc-grid summary .ttl{font-size:17px;line-height:1.24} .svc-grid .det{padding-top:16px} .svc-grid .det .lead{font-size:14.5px;line-height:1.6} .svc-grid .det li{font-size:14.5px;padding:8px 0} /* принципы */ .prin{padding:48px 0} .prin .head{margin-bottom:20px} .prin-grid{grid-template-columns:1fr;gap:0;border:1px solid var(--rule);background:#fff} .prin-c{padding:18px 16px;border-bottom:1px solid var(--rule)} .prin-c:last-child{border-bottom:0} .prin-t{min-height:0;font-size:16.5px} .prin-d{font-size:14px;max-width:none} .prin-end{margin-top:20px} /* галерея */ #gallery .head{margin-bottom:18px} .gal{margin-top:16px} .gcta{margin-top:14px} /* география */ .geobox{padding:14px 12px 12px;margin-top:14px} .geobox .gb-tag{font-size:9px;left:14px;padding:0 8px} .index .ln{padding:14px 0} .index .a{font-size:16px} .index .b{font-size:12.5px} /* членство */ .creds{grid-template-columns:1fr} .cr{padding:20px 16px} .cr b{font-size:17px} .cr u{margin-bottom:26px;font-size:10.5px} .crnote{font-size:12.5px;margin-top:16px} .subhead{font-size:9.5px;letter-spacing:.16em} /* контакты */ #contact .ctwo{gap:26px} .contact h3{font-size:11px;letter-spacing:.18em} .contact p{font-size:13px;line-height:1.55} .cform{margin-top:6px} /* финальная полоса */ .cta{padding:64px 0} .cta h2{font-size:clamp(24px,7vw,32px);line-height:1.14} .ctaact{margin-top:22px;gap:16px} .ctaphone .big{font-size:22px} /* бегущая строка услуг */ .stripe{padding:14px 0} .stripe-track span{font-size:9.5px;letter-spacing:.14em;gap:16px;padding-right:16px} /* разделитель с орнаментом */ .orndv{margin-top:26px} } @media(max-width:760px){ /* пустая белая полоса между блоками — на телефоне не нужна */ .stripe{display:none} } /* ===== мобилка: география и подвал ===== */ @media(max-width:760px){ /* рамку «зона выезда» убираем, карту делаем во всю ширину */ .geobox{border:0;padding:0;margin-top:16px} .geobox::before,.geobox::after{display:none} .geobox .gb-tag{position:static;transform:none;background:none;padding:0 0 12px;display:block; font-size:9.5px;letter-spacing:.18em} .netwrap{display:block !important;margin-left:-22px;margin-right:-22px;width:auto} .net .nd text{font-size:26px} .net .hub text{font-size:27px} /* список стран: страна и город в одну строку, точка не съезжает */ .index{border-top:0} .index .ln{grid-template-columns:1fr auto;gap:12px;align-items:baseline;padding:15px 0 15px 18px} .index .ln::before{top:22px;left:0} .index .a{font-size:16px;color:var(--ink)} .index .b{font-size:12.5px;white-space:normal;text-align:right} /* подвал: без разрядки, компактнее */ footer{padding:34px 0 24px} footer .ft-brand{font-size:16px} footer .ft-motto{font-size:11px;letter-spacing:.04em;line-height:1.65} footer .ft-bot{font-size:11px;letter-spacing:.04em;gap:14px} footer .fdev{width:100%;justify-content:space-between;padding:12px 14px;gap:10px} footer .fdev-l{font-size:9px;letter-spacing:.14em} footer .fdev-n{font-size:12.5px} /* плашка «Хочу узнать ваши условия» */ .gcta{padding:18px 14px} .gcta .gcta-t{font-size:18px;line-height:1.2} .gcta .gcta-sub{font-size:9px;letter-spacing:.1em} .gcta .gcta-ar{width:40px;height:40px} } /* ===== мобилка: список стран без вылезаний ===== */ @media(max-width:760px){ .index{overflow:hidden} .index .ln{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:10px; padding:14px 0 14px 18px;align-items:baseline} .index .a{white-space:normal;overflow:visible;font-size:16px;line-height:1.25} .index .a::after{content:"" !important;display:none} .index .b{white-space:normal;text-align:right;font-size:12.5px;line-height:1.35; overflow-wrap:break-word;hyphens:none} /* на тач-экранах не залипает наведение */ .index .ln:hover{padding-left:18px} .index .ln:hover .a{color:var(--ink)} .index .ln:hover::before{opacity:.45;transform:none} /* лишний белый блок над списком */ .geobox .gb-tag{padding-bottom:10px} .netwrap{margin-bottom:0} } /* воздух в контактах (десктоп) */ @media(min-width:761px){ .mails{margin-top:14px} .mails a{padding:16px 0;gap:16px} .mails .ml-r{padding-left:28px} .contact > div + div{margin-top:clamp(30px,3vw,44px)} .contact p{margin-top:14px} .msgr{margin-top:20px} #contact .ctwo{gap:clamp(40px,5vw,88px)} .cform .fld{margin-top:26px} .cform .fld input,.cform .fld textarea{padding:14px 0} .cform .fld label{margin-bottom:6px} } /* контакты: правый блок чуть левее (десктоп) */ @media(min-width:1001px){ #contact .ctwo{grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,104px);align-items:start} #contact .ctwo > .cform{margin-left:12px} #contact .ctwo > .contact{margin-left:-7px} } /* ===== форма: нормальные поля и воздух ===== */ .cform,.mdl-form{gap:0 !important} .fld{margin:0 0 26px !important} .fld:last-of-type{margin-bottom:0 !important} .fld label{margin-bottom:10px;line-height:1.3} .fld input{padding:12px 0 14px;font-size:16px} .fld textarea{padding:12px 0 14px;min-height:96px} .cform .act-line,.mdl-send{margin-top:30px} @media(max-width:760px){ .fld{margin:0 0 20px !important} .fld label{margin-bottom:8px;font-size:9.5px;letter-spacing:.14em} .fld input{padding:11px 0 12px} .fld textarea{min-height:80px;padding:11px 0 12px} .mdl-box .fld{margin:0 0 18px !important} .cform .act-line,.mdl-send{margin-top:24px} } /* ===== форма в контактах: компактно, в две колонки (десктоп) ===== */ @media(min-width:1001px){ #cform{display:grid;grid-template-columns:1fr 1fr;column-gap:26px;row-gap:0;align-content:start} #cform .fnote{grid-column:1/-1;margin:0 0 22px} #cform .fld{margin:0 0 20px !important} #cform .fld:nth-of-type(1){order:1} #cform .fld:nth-of-type(2){order:2} #cform .fld:nth-of-type(3){order:3} #cform .fld:nth-of-type(5){order:4} #cform .fld:nth-of-type(4){order:5;grid-column:1/-1} #cform .fld:nth-of-type(6){order:6;grid-column:1/-1} #cform .fld label{margin-bottom:8px;font-size:10px;letter-spacing:.16em} #cform .fld input{padding:10px 0 12px} #cform .fld textarea{min-height:76px;padding:10px 0 12px} #cform .act-line{order:7;grid-column:1/-1;justify-self:start;margin-top:14px} } /* ========================================================= БЛОГ ADSIC: стили поверх дизайна основного сайта ========================================================= */ .bhero{min-height:auto;padding:0;background:#101F27;overflow:hidden} .bhero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 85% 0%,rgba(216,65,86,.16) 0%,rgba(16,31,39,0) 55%);pointer-events:none} .bhero .wrap{padding-top:160px;padding-bottom:90px} .bhero .lbl{color:rgba(255,255,255,.5);display:block;margin-bottom:22px} .bhero .lbl a{color:rgba(255,255,255,.5);text-decoration:none} .bhero .lbl a:hover{color:#fff} .bhero h1{color:#fff;font-size:clamp(32px,4vw,54px);max-width:22ch;letter-spacing:-.03em;line-height:1.08} .bhero p{color:rgba(255,255,255,.72);font-size:16px;max-width:56ch;margin-top:22px;line-height:1.7} .bhero .bmeta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)} .bhero .bmeta a{color:var(--accent);text-decoration:none} /* список статей 01 / 02 / 03 */ .blist{padding:90px 0 110px} .bitem{display:grid;grid-template-columns:120px 1fr 48px;gap:28px;align-items:start;padding:42px 0;border-top:1px solid var(--rule);text-decoration:none;color:inherit;transition:background .18s} .bitem:last-child{border-bottom:1px solid var(--rule)} .bitem .bc,.bitem .bt,.bitem .bx,.bitem .bd{display:block} .bitem .bn{font-size:clamp(34px,3.4vw,52px);font-weight:700;letter-spacing:-.04em;line-height:1;color:#CDD4D8;transition:color .18s} .bitem .bt{font-size:clamp(20px,1.9vw,26px);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.25;transition:color .18s} .bitem .bx{margin-top:12px;font-size:15.5px;line-height:1.7;color:var(--body);max-width:68ch} .bitem .bd{margin-top:16px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)} .bitem .ba{width:48px;height:48px;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:18px;transition:all .18s} .bitem:hover .bn{color:var(--accent)} .bitem:hover .bt{color:var(--accent)} .bitem:hover .ba{background:var(--accent);border-color:var(--accent);color:#fff} .bempty{padding:40px 0;color:var(--body)} .bpag{display:flex;gap:8px;flex-wrap:wrap;margin-top:56px} .bpag a,.bpag span{min-width:48px;height:48px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--rule);font-size:13px;font-weight:700;color:var(--ink);text-decoration:none} .bpag .current{background:var(--ink);border-color:var(--ink);color:#fff} .bpag a:hover{border-color:var(--accent);color:var(--accent)} /* страница статьи */ .bpost{padding:80px 0 40px} .bpost .in{max-width:760px} .bthumb{margin:0 0 48px} .bthumb img{width:100%;height:auto;display:block} .bbody{font-size:17px;line-height:1.8;color:var(--body)} .bbody > *+*{margin-top:1.15em} .bbody h2{font-size:clamp(24px,2.4vw,32px);margin-top:1.9em;line-height:1.2} .bbody h3{font-size:clamp(19px,1.8vw,22px);margin-top:1.6em;line-height:1.3} .bbody a{color:var(--accent);text-decoration:underline;text-underline-offset:3px} .bbody strong{color:var(--ink)} .bbody ul,.bbody ol{padding-left:1.3em} .bbody li+li{margin-top:.45em} .bbody ul li::marker{color:var(--accent)} .bbody ol li::marker{color:var(--accent);font-weight:700} .bbody blockquote{border-left:3px solid var(--accent);padding:6px 0 6px 24px;color:var(--ink);font-weight:500} .bbody img{max-width:100%;height:auto} .bbody figure{margin:2em 0} .bbody figcaption{font-size:13px;color:var(--faint);margin-top:10px} .bbody table{width:100%;border-collapse:collapse;font-size:15px} .bbody th,.bbody td{border:1px solid var(--rule);padding:12px 14px;text-align:left;vertical-align:top} .bbody th{background:var(--hair);color:var(--ink)} /* блок заявки */ .bcta{margin:70px 0 0;background:#101F27;color:#fff;padding:clamp(32px,4vw,56px);position:relative;overflow:hidden} .bcta::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border:1px solid rgba(216,65,86,.35);border-radius:50%} .bcta .lbl{color:var(--accent)} .bcta h2{color:#fff;font-size:clamp(24px,2.6vw,34px);margin-top:14px;max-width:20ch;line-height:1.15} .bcta p{color:rgba(255,255,255,.72);margin-top:16px;max-width:52ch;font-size:15.5px} .bcta .act{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;position:relative;z-index:2} .bcta .btn{text-decoration:none} .bcta .btn-p,.bcta .btn-w{color:#fff} .bcta .btn-w:hover{color:var(--ink)} /* читайте также */ .brel{padding:70px 0 110px} .brel h2{font-size:clamp(24px,2.4vw,32px);margin-bottom:26px} @media(max-width:1000px){ .bhero .wrap{padding-top:130px;padding-bottom:60px} .blist{padding:56px 0 80px} .bitem{grid-template-columns:64px 1fr;gap:18px;padding:30px 0} .bitem .ba{display:none} .bpost{padding:50px 0 20px} .bbody{font-size:16px} .brel{padding:50px 0 80px} } @media(max-width:560px){ .bitem{grid-template-columns:1fr;gap:10px} .bitem .bn{font-size:30px} .bcta .act{flex-direction:column} .bcta .btn{justify-content:center} }