@font-face{font-family:Unbounded;font-weight:200 900;font-display:swap;src:url(fonts/unb-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Unbounded;font-weight:200 900;font-display:swap;src:url(fonts/unb-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:Onest;font-weight:100 900;font-display:swap;src:url(fonts/onest-cyr.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-weight:100 900;font-display:swap;src:url(fonts/onest-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
:root{--bg:#eeede8;--ink:#16181a;--ink2:#222527;--mut:#686a66;--line:#d6d4cc;--oak:#c79b67;--cut:#d8381e;--ply:#dcd8cd;--white:#fbfaf7}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 Onest,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--cut);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:Unbounded,Onest,sans-serif;font-weight:500;letter-spacing:-.02em;margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-left:40px;padding-right:40px}

/* top */
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:22px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font:500 13px/1.25 Unbounded,sans-serif;letter-spacing:-.01em}
.logo img{display:block;flex:none}
.logo i{width:42px;height:42px;background:var(--ink);color:var(--white);display:grid;place-items:center;font:600 16px Unbounded,sans-serif;font-style:normal;letter-spacing:-.04em;border-radius:10px;position:relative}
.logo i::after{content:"";position:absolute;left:6px;right:6px;bottom:7px;height:2px;background:var(--cut)}
nav{display:flex;gap:28px;font-size:15px;font-weight:500}
nav a{text-decoration:none;color:var(--ink);padding:6px 0;background:linear-gradient(var(--cut),var(--cut)) 0 100%/0 2px no-repeat;transition:background-size .25s}
nav a:hover{background-size:100% 2px}
.btn{display:inline-flex;align-items:center;justify-content:center;font:500 15px Onest,sans-serif;color:var(--white);background:var(--ink);text-decoration:none;padding:15px 26px;border-radius:14px;border:0;cursor:pointer;min-height:50px;transition:background .2s,transform .2s}
.btn:hover{background:var(--cut)}
.btn:active{transform:scale(.98)}
.btn.o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.o:hover{background:var(--ink);color:var(--white)}
.btn.s{min-height:44px;padding:11px 20px;font-size:14px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;align-items:center;padding-top:24px;padding-bottom:72px}
h1{font-size:clamp(2.3rem,4.7vw,4.3rem);line-height:1.04;margin:0 0 28px}
h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
h1 .ln span{display:block;transform:translateY(105%);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards}
h1 .ln:nth-child(2) span{animation-delay:.12s}h1 .ln:nth-child(3) span{animation-delay:.24s}
@keyframes up{to{transform:none}}
.lead{font-size:19px;line-height:1.55;color:var(--ink2);max-width:460px;margin:0 0 28px}
.plan{position:relative}
.kit{width:100%;height:auto;display:block;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(22,24,26,.35)}
.kit{--up:#c79b67;--lo:#2a2d2f;--ta:#bdb9ae;--hd:#f1efe8;--ct:#f3f1ea;--gr:.9}
.kit[data-t="2"]{--up:#e9e6de;--lo:#dedad0;--ta:#d2cdc2;--hd:#2a2d2f;--ct:#fbfaf6;--gr:0}
.kit[data-t="3"]{--up:#2f4a44;--lo:#2f4a44;--ta:#27403a;--hd:#d9b98a;--ct:#ece9e2;--gr:0}
.kit[data-t="4"]{--up:#b98a5a;--lo:#8a5f3c;--ta:#a67a4e;--hd:#f1e6d4;--ct:#ece9e2;--gr:.9}
.kit .cu.u,.kit .cu.t{fill:var(--up)}.kit .cu.l{fill:var(--lo)}.kit .cu.t{fill:var(--ta)}
.kit .hd{fill:var(--hd)}.kit .ct{fill:var(--ct)}.kit .gr{opacity:var(--gr)}
.kit .cu,.kit .hd,.kit .ct,.kit .gr{transition:fill .7s ease,opacity .7s ease}
.kit .a0,.kit .a1,.kit .a2,.kit .a3,.kit .a4,.kit .a5,.kit .led{opacity:0;animation:kin 1s cubic-bezier(.2,.8,.2,1) forwards}
.kit .a1{animation-delay:.15s}.kit .a2{animation-delay:.3s;transform:translateX(-24px);animation-name:kl}
.kit .a3{animation-delay:.5s;transform:translateY(-22px);animation-name:kd}
.kit .a4{animation-delay:.7s;transform:translateY(22px);animation-name:ku}
.kit .a5{animation-delay:1.1s}
.kit .led{animation:kin 1.4s ease 1.5s forwards,glow 5s ease-in-out 3s infinite}
@keyframes kin{to{opacity:1}}
@keyframes kl{to{opacity:1;transform:none}}@keyframes kd{to{opacity:1;transform:none}}@keyframes ku{to{opacity:1;transform:none}}
@keyframes glow{50%{opacity:.78}}
.kit .ray{animation:ray 9s ease-in-out infinite}
@keyframes ray{50%{opacity:.55;transform:translateX(18px)}}
.kit .steam path{stroke-dasharray:60;animation:steam 3.4s ease-in-out infinite;opacity:0}
.kit .steam .s2,.pic.s2{animation-delay:1.1s}
@keyframes steam{0%{stroke-dashoffset:60;opacity:0}30%{opacity:.85}100%{stroke-dashoffset:0;opacity:0;transform:translateY(-14px)}}
.kit .leaves{transform-box:fill-box;transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(2.2deg)}}
.swh{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.swb{display:flex;align-items:center;gap:10px;font:500 14px Onest,sans-serif;color:var(--ink);background:transparent;border:1.5px solid var(--line);border-radius:12px;padding:6px 14px 6px 6px;cursor:pointer;min-height:44px;transition:border-color .2s,background .2s}
.swb i{width:30px;height:30px;border-radius:8px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.swb:hover{border-color:var(--ink)}.swb[aria-pressed=true]{border-color:var(--ink);background:#fff}

/* calc */
.hero{align-items:start}
.hl h1{font-size:clamp(1.55rem,3.1vw,2.75rem);line-height:1.1}
.chk{margin:0;padding:0;list-style:none;display:grid;gap:12px;max-width:470px}
.chk li{display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:16px;color:var(--ink2);align-items:start}
.chk svg{width:24px;height:24px;stroke:var(--cut);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.calc{background:var(--white);border-radius:24px;padding:24px;box-shadow:0 30px 70px -30px rgba(22,24,26,.35);scroll-margin-top:24px}
.ct{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.ct b{display:block;font:500 16px Unbounded,sans-serif;letter-spacing:-.02em}.ct small{color:var(--mut);font-size:13px}
.av{width:46px;height:46px;border-radius:14px;background:var(--ink);color:#fff;display:grid;place-items:center;font:600 16px Unbounded,sans-serif;overflow:hidden;flex:none}.av img{width:100%;height:100%;object-fit:cover}
.tabs{display:flex;gap:4px;background:#eceae3;border-radius:14px;padding:4px;margin-bottom:18px}
.tabs button{flex:1;font:500 14px Onest,sans-serif;border:0;background:none;border-radius:10px;padding:10px 6px;cursor:pointer;color:var(--mut);min-height:42px}
.tabs button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.fld{margin-bottom:14px}.fl{display:block;font-size:13px;color:var(--mut);margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 14px Onest,sans-serif;color:var(--ink);background:#fff;border:1.5px solid #c9c6bd;border-radius:10px;padding:8px 13px;cursor:pointer;min-height:42px;transition:background .15s,color .15s,border-color .15s}
.chip:hover{border-color:var(--ink)}.chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.step{display:inline-flex;align-items:center;gap:0;border:1.5px solid #c9c6bd;border-radius:12px;background:#fff}
.step button{width:48px;height:44px;font:500 22px Onest,sans-serif;border:0;background:none;cursor:pointer;color:var(--ink)}.step button:disabled{opacity:.3;cursor:default}
.step output{min-width:84px;text-align:center;font:500 17px Unbounded,sans-serif;letter-spacing:-.02em}
.pr{background:var(--ink);color:#fff;border-radius:16px;padding:16px 18px;margin:6px 0 16px}.pr b{display:block;font:500 22px/1.25 Unbounded,sans-serif;letter-spacing:-.02em;margin:5px 0}.pr b.pt{font-size:16px}.pr small{color:#b9b9b3;font-size:13px;display:block}
.cform{display:grid;gap:12px}
label.f{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--mut)}
input[type=text]{font:16px Onest,sans-serif;color:var(--ink);background:#fff;border:1.5px solid #c9c6bd;border-radius:12px;padding:12px 14px;min-height:48px;width:100%}
input:focus{outline:2px solid var(--cut);outline-offset:1px;border-color:transparent}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cons{font-size:12.5px;color:var(--mut);line-height:1.5}
.err{color:#b02a14;font-size:14px}
.ok .big{font:500 clamp(1.4rem,2.6vw,1.9rem)/1.15 Unbounded,sans-serif;letter-spacing:-.02em;margin:0 0 12px}
.ok .pr{margin:16px 0}
.band{padding:72px 0;margin-top:96px;background:#e5e2d9}
.two2{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:center}
.two2 h2{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1;margin-bottom:16px}
.mats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.mats div{display:grid;gap:6px;align-content:start}.mats i{display:block;aspect-ratio:1.6;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);margin-bottom:6px}
.mats b{font:500 17px Unbounded,sans-serif;letter-spacing:-.02em}.mats span{font-size:15px;color:var(--ink2);line-height:1.5}
.faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font:500 17px Unbounded,sans-serif;letter-spacing:-.02em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-9px;background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 18px;max-width:560px;color:var(--ink2)}
.budget{background:var(--ink);color:#fff;border-radius:24px;padding:36px 40px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.budget h2{font-size:clamp(1.5rem,2.6vw,2.2rem)}.budget p{margin:0;color:#b9b9b3}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}.num{background:#fff;border-radius:16px;padding:20px}.num b{display:block;font:500 34px Unbounded,sans-serif;letter-spacing:-.03em}.num span{color:var(--mut);font-size:14px}
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.rev{margin:0;background:#fff;border-radius:16px;padding:20px}.rev img{width:100%;border-radius:10px;margin-bottom:12px}.rev blockquote{margin:0 0 10px}.rev figcaption{color:var(--mut);font-size:14px}
.tile.photo::before{background:var(--photo) center/cover}.tile.photo span{position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.7));z-index:-1}
.stick{display:none}
/* works */
.sec{padding-top:104px;padding-bottom:0}
.sec h2{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1;margin-bottom:16px}
.sec .sub{color:var(--mut);max-width:520px;margin:0 0 40px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{position:relative;aspect-ratio:3/4;border-radius:20px;background:var(--ink2);color:var(--white);overflow:hidden;padding:22px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;isolation:isolate}
.tile::before{content:"";position:absolute;inset:0;background:var(--photo,none) center/cover;z-index:-1;transition:transform .6s}
.tile:hover::before{transform:scale(1.04)}
.tile svg{width:100%;height:auto;max-height:58%;stroke:var(--oak);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile svg *{stroke-dasharray:1;stroke-dashoffset:1}
.tile.in svg *{animation:dr 1.4s cubic-bezier(.4,0,.2,1) forwards}
.tile.in svg *:nth-child(2){animation-delay:.15s}.tile.in svg *:nth-child(3){animation-delay:.3s}.tile.in svg *:nth-child(4){animation-delay:.45s}.tile.in svg *:nth-child(5){animation-delay:.6s}
@keyframes dr{to{stroke-dashoffset:0}}
.tile h3{font-size:20px;line-height:1.2}
.tile small{display:block;font:400 14px Onest,sans-serif;color:#aaa9a2;margin-top:6px;letter-spacing:0}
.tile:nth-child(2){background:#3a3631}.tile:nth-child(3){background:#2c3a38}.tile:nth-child(4){background:#34383f}
.more{margin-top:24px;font-size:15px;color:var(--mut)}
.more a{color:var(--ink);text-underline-offset:3px}

/* people */
.two{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:center}
.two p{max-width:560px;margin:0 0 16px;color:var(--ink2)}
.roles{display:grid;gap:0;border-top:1.5px solid var(--ink)}
.roles div{padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:120px 1fr;gap:16px}
.roles b{font:500 18px Unbounded,sans-serif;letter-spacing:-.02em}
.roles span{color:var(--ink2);font-size:16px}

/* materials */
.sw{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.sw div{font-size:15px;font-weight:500}
.sw i{display:block;aspect-ratio:1.25;border-radius:14px;margin-bottom:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .3s}
.sw div:hover i{transform:translateY(-4px) rotate(-1.5deg)}
.s1,.pic.s1{background:repeating-linear-gradient(92deg,#c8975f 0 3px,#bd8b53 3px 5px,#d0a06a 5px 9px,#b98650 9px 10px)}
.s2{background:#e9e7e1}.s3,.pic.s3{background:#2f4a44}.s4,.pic.s4{background:repeating-linear-gradient(90deg,#d9cdb8 0 2px,#cfc2aa 2px 4px,#e2d7c4 4px 8px)}
.s5,.pic.s5{background:#3c3d40 radial-gradient(#55575b 1px,transparent 1.4px) 0 0/7px 7px}
.s6,.pic.s6{background:#ece9e2 radial-gradient(#b8b3a8 .8px,transparent 1.2px) 0 0/9px 9px,radial-gradient(#d4cfc4 1px,transparent 1.5px) 4px 4px/11px 11px}
.s7,.pic.s7{background:#cfcac0}

/* process */
.proc{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px}
.proc .st{position:sticky;top:40px;align-self:start}
.tl{position:relative;list-style:none;margin:0;padding:0 0 0 44px}
.tl::before,.tl .fill{content:"";position:absolute;left:11px;top:8px;width:2px;background:var(--line)}
.tl::before{bottom:8px}
.tl .fill{background:var(--cut);height:0;bottom:auto}
.tl li{position:relative;padding:0 0 40px;opacity:.42;transition:opacity .4s}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-41px;top:7px;width:14px;height:14px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--line);transition:box-shadow .3s,background .3s}
.tl li.on{opacity:1}
.tl li.on::before{background:var(--cut);box-shadow:inset 0 0 0 2px var(--cut)}
.tl h3{font-size:20px;margin-bottom:6px}
.tl p{margin:0;color:var(--ink2);max-width:460px;font-size:16px}
.tl .n{font:500 13px Onest,sans-serif;color:var(--mut);margin-right:10px;letter-spacing:0}

/* contacts */
.contacts{margin-top:112px;background:var(--ink);color:var(--white);padding:80px 0 40px}
.contacts .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px}
.contacts h2{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1;margin-bottom:20px}
.contacts p{color:#b9b9b3;margin:0 0 28px;max-width:440px}
.lnk{display:grid;gap:0;border-top:1px solid #3a3d40}
.lnk a{display:flex;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid #3a3d40;text-decoration:none;font:500 18px Unbounded,sans-serif;letter-spacing:-.02em;transition:padding .25s,color .25s}
.lnk a span{font:400 15px Onest,sans-serif;color:#aaa9a2;align-self:center;letter-spacing:0}
.lnk a:hover{padding-left:12px;color:var(--oak)}
.legal{grid-column:1/-1;margin-top:48px;font-size:13px;color:#8d8d87;line-height:1.7}
.legal a{color:#b9b9b3}

@media(max-width:900px){
 .hero,.two2,.two,.proc,.contacts .wrap{grid-template-columns:1fr}
 .hero{gap:32px}.proc{gap:32px}.proc .st{position:static}
 .tiles{grid-template-columns:repeat(2,1fr)}.sec{padding-top:72px}.two{gap:36px}
 nav{display:none}
}
@media(max-width:600px){
 .wrap{padding-left:20px;padding-right:20px}.tile{aspect-ratio:1/1.1;padding:16px}.tile h3{font-size:16px}
 .roles div{grid-template-columns:1fr;gap:6px}.calc{padding:18px 16px}.tabs button{font-size:13px;padding:10px 2px}.band{padding:48px 0;margin-top:64px}.stick{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(238,237,232,.94);backdrop-filter:blur(8px);z-index:6;border-top:1px solid var(--line)}.stick .btn{flex:1;padding:12px 6px;font-size:14px}.contacts{padding-bottom:90px}.budget{padding:28px 22px}
 .tiles{gap:10px}.lnk a{font-size:16px;flex-direction:column;gap:4px}
}
@media(prefers-reduced-motion:reduce){.kit *{animation:none!important;opacity:1!important;transform:none!important}
 html{scroll-behavior:auto}h1 .ln span{animation:none;transform:none}.m{animation:none}
 .tile svg *{stroke-dashoffset:0;animation:none!important}.tl li{transition:none}
}

.flogo{display:block;width:min(280px,70%);height:auto;margin:0 0 36px}

/* фото-кухня с кроссфейдом */
.kitph{position:relative;aspect-ratio:761/413;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(22,24,26,.4);background:#d6d4cc}
.kitph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .9s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.kitph[data-t="1"] img:nth-child(1),.kitph[data-t="2"] img:nth-child(2),.kitph[data-t="3"] img:nth-child(3),.kitph[data-t="4"] img:nth-child(4){opacity:1;transform:scale(1)}
.kcap{position:absolute;left:14px;bottom:14px;background:rgba(238,237,232,.92);backdrop-filter:blur(6px);color:var(--ink);font:500 13px Onest,sans-serif;padding:8px 14px;border-radius:999px}
/* образцы материалов */
.swb i.s1,.mats i.s1{background:url(img/mat-1.webp) center/cover}
.swb i.s3,.mats i.s3{background:url(img/mat-2.webp) center/cover}
.swb i.s2,.mats i.s2{background:url(img/mat-3.webp) center/cover}
.swb i.s4,.mats i.s4{background:url(img/mat-4.webp) center/cover}
.mats i.s5{background:url(img/mat-5.webp) center/cover}
.mats i.s6{background:url(img/mat-6.webp) center/cover}
.mats i{aspect-ratio:2.1}
/* калькулятор: фото комнаты и планировки */
.rimg{position:relative;aspect-ratio:2.3;border-radius:14px;overflow:hidden;margin-bottom:16px;background:#d6d4cc}
.rimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s ease}
.lcs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lc2{border:1.5px solid #c9c6bd;background:#fff;border-radius:12px;padding:6px 6px 8px;cursor:pointer;font:500 13px Onest,sans-serif;color:var(--ink);display:grid;gap:6px;text-align:center;transition:border-color .15s,box-shadow .15s}
.lc2 img{width:100%;aspect-ratio:1.5;object-fit:cover;border-radius:8px;display:block}
.lc2:hover{border-color:var(--ink)}.lc2[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
@media(prefers-reduced-motion:reduce){.kitph img{transition:none;transform:none}}
.mats i.s7{background:url(img/mat-7.webp) center/cover}

/* квиз по шагам */
.wz{display:flex;flex-direction:column;gap:16px}
.wzh{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:end}
.ap{width:104px;height:132px;border-radius:18px;overflow:hidden;background:#e4dfd2;box-shadow:0 10px 24px -12px rgba(22,24,26,.5);flex:none}
.apimg{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block;animation:apin .5s ease}
@keyframes apin{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.bb{position:relative;background:#f1eee6;border-radius:18px 18px 18px 4px;padding:14px 16px;min-width:0}
.bb::before{content:"";position:absolute;left:-8px;bottom:14px;border:8px solid transparent;border-right-color:#f1eee6;border-left:0}
.bb b{display:block;font:500 12px Unbounded,sans-serif;letter-spacing:.02em;color:var(--cut);text-transform:uppercase;margin-bottom:4px}
.bb p{margin:0;font:500 18px/1.3 Unbounded,sans-serif;letter-spacing:-.02em}
.bb small{display:block;margin-top:8px;font-size:13px;line-height:1.45;color:var(--mut)}
.pg{height:4px;border-radius:2px;background:#e4dfd2;overflow:hidden}.pg i{display:block;height:100%;background:var(--cut);transition:width .35s ease}
.wzb{animation:wzin .35s ease}.wzb.b{animation-name:wzinb}
@keyframes wzin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes wzinb{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.ocs{display:grid;gap:10px}.ocs.c2{grid-template-columns:1fr 1fr}.ocs.c3{grid-template-columns:repeat(3,1fr)}
.oc{display:flex;flex-direction:column;gap:8px;text-align:left;background:#fff;border:1.5px solid #cfcbc0;border-radius:16px;padding:6px 6px 12px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.oc:hover{border-color:var(--ink);transform:translateY(-2px)}
.oc[aria-pressed=true]{border-color:var(--cut);box-shadow:0 0 0 2px var(--cut)}
.oi{display:block;aspect-ratio:1.5;border-radius:11px;overflow:hidden;background:#e9e4d8}
.oi img,.oi svg{width:100%;height:100%;display:block;object-fit:cover}
.ot{font:500 14px/1.25 Onest,sans-serif;padding:0 8px}.oc small{padding:0 8px;font-size:12px;color:var(--mut);line-height:1.35;margin-top:-4px}
.ocs.c3 .ot{font-size:13px}
.nb{display:grid;gap:16px;justify-items:center}.nb .rimg{width:100%;margin:0}
.step.big{border-radius:16px}.step.big button{width:64px;height:56px;font-size:26px}.step.big output{min-width:130px;font-size:24px}
.wzf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.sn{font-size:13px;color:var(--mut)}.nv{display:flex;gap:8px;align-items:center}
.bk{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;font-size:20px;cursor:pointer;color:var(--ink)}.bk:disabled{opacity:.3;cursor:default}
.nx:disabled{opacity:.35;cursor:default}
.chs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.chs span{font-size:12.5px;background:#eceae3;border-radius:999px;padding:4px 10px}
.okh{display:grid;grid-template-columns:84px 1fr;gap:16px;align-items:center;margin-bottom:12px}.okh .ap{width:84px;height:104px}.okh .big{margin:0}
@media(max-width:560px){.wzh{grid-template-columns:84px 1fr;gap:12px}.ap{width:84px;height:108px}.bb p{font-size:16px}.ocs.c3 .ot{font-size:12px}.ocs.c3{gap:6px}.oc{padding:5px 5px 10px;border-radius:14px}}
@media(prefers-reduced-motion:reduce){.wzb,.apimg{animation:none}}

.pcs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pcs figure{margin:0;background:var(--white);border-radius:20px;overflow:hidden;box-shadow:0 20px 44px -28px rgba(22,24,26,.5)}
.pcs img{width:100%;aspect-ratio:.82;object-fit:cover;object-position:50% 15%;display:block}
.pcs figcaption{padding:14px 16px 18px;display:grid;gap:4px}.pcs figcaption b{font:500 18px Unbounded,sans-serif;letter-spacing:-.02em}.pcs figcaption span{font-size:14px;color:var(--mut);line-height:1.4}
@media(max-width:560px){.pcs{gap:10px}.pcs figcaption{padding:10px 12px 14px}.pcs figcaption b{font-size:16px}.pcs figcaption span{font-size:13px}}
.ocs.c2 .oi{aspect-ratio:1.2}.ocs.c3 .oi{aspect-ratio:.9}.oi img{object-position:50% 50%}

/* ---- разделы: преимущества, производство, гарантия, партнёры, формы ---- */
.top{position:relative}
.mn{display:none;font:500 14px Onest,sans-serif;color:var(--ink);background:transparent;border:0;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--ink);min-height:44px;padding:0 18px;cursor:pointer}
.sec .sub.w{max-width:640px}
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.why>div{background:var(--white);border-radius:20px;padding:26px 24px 28px;display:grid;gap:10px;align-content:start}
.why i{font:500 15px Unbounded,sans-serif;font-style:normal;color:var(--oak);letter-spacing:-.02em}
.why b{font:500 18px/1.25 Unbounded,sans-serif;letter-spacing:-.02em}
.why span{color:var(--ink2);font-size:15.5px;line-height:1.55}
.prodw{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.prodw h2{margin-bottom:16px}
.prodw p{color:var(--ink2);max-width:520px;margin:0 0 16px}
.psteps{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0;counter-reset:ps}
.psteps li{counter-increment:ps;display:grid;grid-template-columns:44px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line);align-items:baseline}
.psteps li:last-child{border-bottom:1px solid var(--line)}
.psteps li::before{content:counter(ps);font:500 15px Unbounded,sans-serif;color:var(--oak)}
.psteps b{font-weight:600}.psteps span{color:var(--mut);display:block;font-size:15px}
.pimg{position:relative;border-radius:24px;overflow:hidden;background:var(--ply);box-shadow:0 30px 60px -30px rgba(22,24,26,.35)}
.pimg img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%}
.pimg figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 22px 20px;color:#fff;background:linear-gradient(transparent,rgba(22,24,26,.78));font-size:15px}
.pimg figcaption b{display:block;font:500 17px Unbounded,sans-serif;letter-spacing:-.02em}
.shop{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:20px}.shop img{width:100%;border-radius:14px;aspect-ratio:4/3;object-fit:cover}
.gar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gar>div{background:var(--white);border-radius:22px;padding:28px 28px 30px}
.gar h3{font-size:20px;margin-bottom:14px}
.gar ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.gar li{display:grid;grid-template-columns:26px 1fr;gap:10px;color:var(--ink2);font-size:16px}
.gar li svg{width:22px;height:22px;stroke:var(--cut);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.gar p{margin:0 0 14px;color:var(--ink2)}
.pj{background:var(--ink);color:#fff;border-radius:26px;padding:44px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:44px;align-items:start}
.pj h2{font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1.12;margin-bottom:14px;color:#fff}
.pj p{color:#c9cbc6;margin:0 0 12px}
.pj .pf label.f{color:#b9b9b3}
.pf{display:grid;gap:14px}
.pf textarea{font:16px Onest,sans-serif;color:var(--ink);background:#fff;border:1.5px solid #c9c6bd;border-radius:12px;padding:12px 14px;min-height:92px;width:100%;resize:vertical}
.pf textarea:focus{outline:2px solid var(--cut);outline-offset:1px;border-color:transparent}
.pf .cons{color:var(--mut)}.pj .pf .cons{color:#a8aaa5}.pj .pf .cons a{color:#d6d4cc}
.fu{display:flex;align-items:center;gap:12px;border:1.5px dashed #9a9c97;border-radius:14px;padding:14px 16px;cursor:pointer;color:inherit;font-size:15px;min-height:56px;background:rgba(255,255,255,.04)}
.fu:hover{border-color:var(--oak)}
.fu svg{width:22px;height:22px;stroke:var(--oak);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fu small{display:block;color:#8d8f8a;font-size:12.5px}
.fu input{position:absolute;opacity:0;width:1px;height:1px}
.fls{display:grid;gap:6px;margin-top:-4px}
.fls div{display:flex;justify-content:space-between;gap:10px;font-size:14px;background:rgba(255,255,255,.08);border-radius:10px;padding:8px 12px}
.sand-f .fls div,.lt-f .fls div{background:#fff}
.fls button{background:none;border:0;color:inherit;cursor:pointer;font-size:18px;line-height:1}
.pf .ok2{background:#fff;color:var(--ink);border-radius:16px;padding:22px}
.pj .ok2{background:rgba(255,255,255,.08);color:#fff}
.ok2 b{display:block;font:500 20px Unbounded,sans-serif;letter-spacing:-.02em;margin-bottom:8px}
.lt-f{background:var(--white);border-radius:24px;padding:28px;box-shadow:0 30px 70px -40px rgba(22,24,26,.35)}
.lt-f .fu{color:var(--ink);background:#f4f2ec;border-color:#bdb9ae}
.lt-f .fu small{color:var(--mut)}
.prt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.prt a{display:grid;gap:8px;background:var(--white);border-radius:22px;padding:28px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.prt a:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(22,24,26,.4)}
.prt b{font:500 20px Unbounded,sans-serif;letter-spacing:-.02em}.prt span{color:var(--ink2);font-size:15.5px}.prt em{font-style:normal;font-weight:600;color:var(--cut);font-size:15px;margin-top:6px}
.pgx{padding-top:24px}
.pgx .hd{padding-top:32px}
.pgx .hd h1{font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.06;margin-bottom:20px;max-width:820px}
.pgx .hd p{font-size:19px;color:var(--ink2);max-width:640px;margin:0 0 28px}
.cr{font-size:14px;color:var(--mut);margin:0 0 6px}.cr a{color:var(--mut)}
.stp4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:s4}
.stp4>div{counter-increment:s4;background:var(--white);border-radius:20px;padding:22px 22px 26px;display:grid;gap:8px;align-content:start}
.stp4>div::before{content:counter(s4);font:500 15px Unbounded,sans-serif;color:var(--oak)}
.stp4 b{font:500 17px/1.25 Unbounded,sans-serif;letter-spacing:-.02em}.stp4 span{color:var(--ink2);font-size:15.5px}
.stp4.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.note2{color:var(--mut);font-size:14px;max-width:640px;margin-top:18px}
@media(max-width:1100px){nav{gap:18px;font-size:14px}.why{grid-template-columns:repeat(2,minmax(0,1fr))}.stp4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
 .mn{display:inline-flex;align-items:center}
 nav.open{display:flex;flex-direction:column;gap:0;position:absolute;left:16px;right:16px;top:74px;background:var(--white);padding:6px 22px;border-radius:18px;box-shadow:0 24px 50px -20px rgba(22,24,26,.5);z-index:60}
 nav.open a{padding:15px 0;border-bottom:1px solid var(--line);background:none;font-size:17px}nav.open a:last-child{border-bottom:0}
 .top>.btn.s{display:none}
 .prodw,.pj{grid-template-columns:1fr;gap:28px}.pj{padding:28px 22px}.gar,.prt{grid-template-columns:1fr}
 .why,.stp4,.stp4.c3{grid-template-columns:1fr}
}
.two3{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
@media(max-width:900px){.two3{grid-template-columns:1fr}.lt-f{padding:20px 18px}}