/* «Авто-ателье · Руль Ростов» — пакет «Бюджет» (spec.md v1.1). Облик «Сшито по контуру»: поля цвета материалов,
   строчка только графикой по коже, кадры в рамках не крупнее 1,3× родного размера. */
:root{
 --rr-graphite:#141414;--rr-graphite-2:#1E1D1C;--rr-deep:#0E0E0F;--rr-ivory:#EFEBE4;--rr-stone:#A8A39B;--rr-ink-2:#56514A;
 --rr-cognac:#8A4B24;--rr-velvet:#1E2740;--rr-cut:#3A3633;--rr-stitch:#B8372B;
 --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);--ease-drawer:cubic-bezier(0.32,0.72,0,1);
 --hd:64px;--pad:32px;--f:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;--fu:'Unbounded','Onest',system-ui,sans-serif;
}
@media (max-width:1023px){:root{--hd:56px;--pad:20px}}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hd) + 12px);-webkit-text-size-adjust:100%}
body.rr{margin:0;background:var(--rr-graphite);color:var(--rr-ivory);font:400 18px/28px var(--f);font-feature-settings:'tnum' 1;-webkit-font-smoothing:antialiased;overflow-x:clip}
@media (max-width:1023px){body.rr{font-size:17px;line-height:26px}}
.rr img{display:block;max-width:100%}
.rr a{color:inherit}
:where(.rr) :where(p,h1,h2,h3,dl,dd,ol,ul,figure,blockquote){margin:0}
:where(.rr) :where(ol,ul){padding:0;list-style:none}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--rr-ivory);color:var(--rr-graphite);padding:10px 16px;border-radius:999px}
.skip:focus{left:12px}
.rr :focus-visible{outline:2px solid var(--rr-ivory);outline-offset:2px;box-shadow:0 0 0 4px var(--rr-graphite)}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--pad)}

/* ---------- типографика ---------- */
.h1{font:700 clamp(36px,5.4vw,84px)/1 var(--f);letter-spacing:-.03em;text-wrap:balance}
.h2{font:600 clamp(30px,3.8vw,60px)/1.05 var(--f);letter-spacing:-.02em;text-wrap:balance}
.h3{font:600 clamp(22px,2vw,30px)/1.15 var(--f);letter-spacing:-.01em}
.sub{margin-top:20px;max-width:34em;opacity:.86}
.kick{font:500 13px/1 var(--fu);letter-spacing:.08em;text-transform:uppercase;color:var(--rr-stone);margin-bottom:24px;display:flex;align-items:center;gap:10px}
.kick::before{content:"";width:28px;height:2px;background:repeating-linear-gradient(90deg,var(--rr-stitch) 0 7px,transparent 7px 12px)}
.light .sub{opacity:1;color:var(--rr-ink-2)}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font:600 16px/1 var(--f);text-decoration:none;position:relative;overflow:hidden;
 transition:transform 160ms var(--ease-out),background-color 200ms var(--ease-out);-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn-ivory{background:var(--rr-ivory);color:var(--rr-graphite)!important}
.btn-dark{background:var(--rr-graphite);color:var(--rr-ivory)!important}
@media (hover:hover){.btn-ivory:hover{background:#F7F4EE}.btn-dark:hover{background:#2A2826}}
.btn-s{min-height:44px;padding:0 20px;font-size:15px}
.rr .btn:focus-visible{outline:2px solid var(--rr-graphite);outline-offset:0;box-shadow:0 0 0 4px var(--rr-ivory)}

/* ---------- шапка ---------- */
.hd{position:sticky;top:0;z-index:50;height:var(--hd);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 var(--pad);background:var(--rr-graphite);border-bottom:1px solid #26241f}
.hd-l{display:flex;align-items:center;gap:20px;min-width:0}
.hd .siteNavigation{display:flex;gap:6px}
.hd .siteNavigation a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:999px;color:var(--rr-ivory);text-decoration:none;font:500 14px/1 var(--f);border:1px solid #34312c}
.hd .siteNavigation svg{width:18px;height:18px}
.hd-n{display:none;gap:22px}
.hd-n a{text-decoration:none;font:500 15px/1 var(--f);color:var(--rr-stone)}
.hd-n a:hover{color:var(--rr-ivory)}
@media (min-width:1280px){.hd-n{display:flex}}
.brand{font:700 20px/1 var(--f);letter-spacing:-.01em;text-decoration:none;color:var(--rr-ivory)}
.hd>.btn{justify-self:end}
@media (max-width:1023px){
 .hd{gap:8px;padding:0 12px}
 .hd .siteNavigation a{width:44px;padding:0;justify-content:center}
 .hd .siteNavigation span{display:none}
 .brand{font-size:17px}
 .hd>.btn{padding:0 14px;font-size:13px;min-height:40px}
}
@media (max-width:420px){.hd>.btn{display:none}.hd{grid-template-columns:auto 1fr auto}.brand{justify-self:center}}
.demoBuyerContext{position:relative;z-index:51}

/* ---------- рамка кадра: шторка, посадка, зерно (spec §1.5) ---------- */
.fr{position:relative;overflow:hidden;aspect-ratio:var(--ar);background:var(--rr-graphite-2);isolation:isolate}
.fr-in{position:absolute;inset:-4% 0;will-change:transform}
.fr .ph,.fr .ph img{display:block;width:100%;height:100%}
.fr .ph img{object-fit:cover}
.grain{position:absolute;inset:0;z-index:2;pointer-events:none;background:url(media/grain.png) repeat;background-size:128px;opacity:.06;mix-blend-mode:overlay}
.cur{position:absolute;inset:0;z-index:3;background:var(--cur,var(--lm-bg,var(--rr-graphite)));transform:translateX(0);pointer-events:none}
.js .fr[data-rv] .ph{transform:scale(1.08);transition:transform 1100ms var(--ease-out) 80ms}
.js .fr[data-rv] .cur{transition:transform 700ms var(--ease-in-out)}
.js .fr[data-rv].is-in .ph{transform:none}
.js .fr[data-rv].is-in .cur{transform:translateX(101%)}
html:not(.js) .cur,.rm .cur{display:none}

/* ---------- Э1 герой ---------- */
.e1{min-height:calc(100svh - var(--hd));display:flex;align-items:center;position:relative}
.e1-g{width:100%;display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:48px;align-items:center;padding:40px 0 40px var(--pad)}
.e1-t{max-width:620px}
.e1 .h1{font-size:clamp(36px,4.3vw,72px)}
.e1 .btn{margin-top:32px}
.facts{margin-top:22px;font:600 16px/1.4 var(--f);color:var(--rr-stone)}
.e1-f{position:relative;justify-self:end;width:100%;max-width:1430px;height:min(78svh,940px);overflow:hidden;background:#121212}
.e1-in{position:absolute;inset:0;transform-origin:50% 40%}
.e1-in .ph,.e1-in .ph img{width:100%;height:100%;object-fit:cover}
.e1-f::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12%;background:linear-gradient(transparent,rgba(20,20,20,.85));z-index:2;pointer-events:none}
.hook{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hook-m{display:none}
.hk path{fill:none;stroke:#FF6A55;stroke-width:3;stroke-dasharray:7 5;stroke-linecap:round}
.hk .glow{stroke-width:9;opacity:.28}
.hk-m{fill:none;stroke:#fff;stroke-width:14;stroke-dasharray:1;stroke-dashoffset:1;animation:hk-draw 600ms var(--ease-in-out) var(--d) forwards}
.hk{animation:hk-out 400ms linear 1900ms forwards}
@keyframes hk-draw{to{stroke-dashoffset:0}}
@keyframes hk-out{to{opacity:0}}
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.w{display:inline-block;transform:translateY(105%);animation:w-in 600ms var(--ease-out) calc(var(--i) * 60ms + 80ms) forwards}
@keyframes w-in{to{transform:none}}
.hint{position:absolute;left:20px;bottom:20px;z-index:4;background:var(--rr-ivory);color:var(--rr-graphite);font:500 12px/1 var(--fu);letter-spacing:.06em;text-transform:uppercase;padding:12px 14px;border-radius:6px;transition:opacity 300ms var(--ease-out)}
.hint.is-gone{opacity:0}
@media (max-width:1023px){
 .e1{min-height:0;display:block}
 .e1-g{display:flex;flex-direction:column-reverse;padding:0;gap:28px}
 .e1-t{padding:0 var(--pad) 48px}
 .e1-f{width:100%;height:auto;aspect-ratio:631/779;max-height:52svh;justify-self:auto}
 .hook-pc{display:none}.hook-m{display:block}
 .h1{font-size:36px;line-height:1.05}
 .e1 .btn{width:100%}
}

/* ---------- закреплённые сцены ---------- */
.sticky{position:sticky;top:var(--hd);height:calc(100svh - var(--hd));overflow:hidden}
.tts{position:relative;min-height:9em}
.tt{position:absolute;inset:0 auto auto 0;opacity:0;transform:translateY(12px);transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out)}
.tt.is-on{opacity:1;transform:none;transition-duration:200ms}
.tt-c{display:inline-block;font:500 13px/1 var(--fu);letter-spacing:.08em;text-transform:uppercase;background:var(--rr-graphite-2);color:var(--rr-ivory);padding:9px 12px;border-radius:6px}
.tt-p{margin-top:16px;font:600 clamp(24px,2.2vw,32px)/1.15 var(--f);letter-spacing:-.01em;max-width:12em}
.tt-x{margin-top:12px;max-width:24em;opacity:.86}
.cnt{display:flex;align-items:baseline;gap:10px;font:500 clamp(64px,7vw,120px)/1 var(--fu);letter-spacing:-.04em}
.cnt-n{position:relative;display:inline-block;width:1.62em;height:1em}
.cnt-n span{position:absolute;left:0;top:0;opacity:0;transition:opacity 250ms var(--ease-out)}
.cnt-n span.is-on{opacity:1}
.cnt-of{font-size:.25em;color:var(--rr-stone);letter-spacing:0}

/* ---------- Э2 вау ---------- */
.e2{height:380svh}
.e2-g{height:100%;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,3.4fr);gap:32px;align-items:center;padding:0 var(--pad)}
.e2-c{display:flex;justify-content:center;height:100%;align-items:center}
.wheel{position:relative;height:min(80%,1000px);aspect-ratio:960/1050;max-width:100%}
.wheel-ph{position:absolute;inset:0;transform-origin:50% 50%}
.wheel-ph .ph,.wheel-ph img{width:100%;height:100%;object-fit:cover}
.wheel-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.contour .ln{fill:none;stroke:var(--rr-ivory);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.sec{transform-box:fill-box;transform-origin:center}
.sec-f{fill:var(--rr-cut);stroke:var(--rr-ivory);stroke-width:1.5;vector-effect:non-scaling-stroke}
.sec-h{fill:none;stroke:rgba(239,235,228,.28);stroke-width:8;stroke-linecap:round}
.stitch path{fill:none;stroke:#FF6A55;stroke-width:4.5;stroke-dasharray:9 6;stroke-linecap:round}
.stitch .glow{stroke-width:11;opacity:.25}
.sm{fill:none;stroke:#fff;stroke-width:16;stroke-dasharray:1;stroke-dashoffset:1}
.e2-r .h2{font-size:clamp(30px,3vw,48px)}
.e2-cta{margin-top:32px;opacity:0;transform:translateY(12px);transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out);pointer-events:none}
.e2-cta.is-on{opacity:1;transform:none;pointer-events:auto}
.e2-rm{display:none}
@media (max-width:1023px){
 .e2{height:320svh}
 .e2-g{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:16px;padding:16px var(--pad) 20px}
 .e2-r{order:-1}.e2-r .h2{font-size:28px}.e2-r .sub{margin-top:8px;font-size:15px;line-height:22px}
 .e2-c{height:auto;flex:1 1 auto;min-height:0;width:100%}
 .wheel{height:100%;max-height:50svh}
 .e2-l{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center}
 .e2-l .cnt{font-size:40px}
 .e2-l .tts{min-height:4.6em;grid-column:1/-1}
 .e2-l .tt-c{font-size:12px}
 .e2-l .tt-p{font-size:19px;margin-top:8px;max-width:none}
 .e2-cta{margin-top:0;position:absolute;left:var(--pad);right:var(--pad);bottom:16px}
 .e2-cta .btn{width:100%}
}

/* ---------- Э3 услуги ---------- */
.e3{height:300svh;color:var(--rr-graphite)}
.e3-g{height:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,1fr) minmax(0,6fr);align-items:center;padding:0 var(--pad);max-width:1440px;margin:0 auto}
.e3-l{grid-column:1}
.e3-r{grid-column:3;display:flex;justify-content:center}
.svs{margin:28px 0 28px;border-top:1px solid rgba(20,20,20,.14)}
.sv{padding:14px 0;border-bottom:1px solid rgba(20,20,20,.14);transition:opacity 250ms var(--ease-out)}
.sv h3{font:600 20px/1.2 var(--f);display:flex;align-items:center;gap:12px}
.sv h3::before{content:"";width:8px;height:8px;border-radius:50%;background:transparent;border:1.5px solid var(--rr-ink-2);transition:background-color 250ms var(--ease-out),border-color 250ms}
.sv p{color:var(--rr-ink-2);font-size:16px;line-height:24px;max-height:0;overflow:hidden;opacity:0;transition:max-height 400ms var(--ease-out),opacity 300ms var(--ease-out),margin 300ms}
.sv.is-on h3::before{background:var(--rr-stitch);border-color:var(--rr-stitch)}
.sv.is-on p{max-height:5em;opacity:1;margin-top:6px}
.sv .fr-m{display:none}
.js .e3 .sv:not(.is-on){opacity:.55}
.stack{position:relative;height:min(74svh,1000px);aspect-ratio:4/5;overflow:hidden;background:var(--rr-graphite-2)}
.st{position:absolute;inset:0;opacity:0;transition:opacity 250ms var(--ease-out)}
.st.is-on{opacity:1;z-index:1}
.st .ph,.st img{width:100%;height:100%;object-fit:cover}
.st .ph{transform:scale(1.02);transition:transform 900ms var(--ease-out)}
.st.is-on .ph{transform:none}
.st .cur{background:var(--rr-ivory);transform:translateX(0);transition:transform 700ms var(--ease-in-out)}
.st.is-on .cur{transform:translateX(101%)}
.st-ceil{background:var(--rr-cognac);display:flex;align-items:center;justify-content:center}
.ceil{width:84%;height:auto}
.ceil path{fill:none;stroke:var(--rr-ivory);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 600ms var(--ease-in-out)}
.st-ceil.is-on .ceil path,.fr-ceil.is-in .ceil path{stroke-dashoffset:0}
.cap,.fr-ceil figcaption{position:absolute;left:16px;bottom:16px;font:500 12px/1 var(--fu);letter-spacing:.08em;text-transform:uppercase;color:var(--rr-ivory)}
@media (max-width:1023px){
 .e3{height:auto}
 .e3 .sticky{position:static;height:auto;overflow:visible}
 .e3-g{display:block;padding:96px var(--pad)}
 .e3-r{display:none}
 .sv{padding:28px 0;opacity:1!important}
 .sv .fr-m{display:block;margin-bottom:18px}
 .sv p{max-height:none;opacity:1;margin-top:8px}
 .sv h3::before{display:none}
 .fr-ceil{background:var(--rr-cognac);display:flex;align-items:center;justify-content:center}
 .e3 .btn{width:100%}
}

/* ---------- Э4 лента ---------- */
.e4{height:340svh;position:relative}
.e4 .sticky{display:flex;flex-direction:column;justify-content:center}
.track{display:flex;gap:32px;align-items:flex-end;padding:0 var(--pad);will-change:transform;width:max-content}
.wk-intro{width:34vw;align-self:center;padding-right:24px}
.wk-hint{margin-top:28px;font:500 12px/1 var(--fu);letter-spacing:.08em;text-transform:uppercase;color:var(--rr-stone)}
.wk figure{display:flex;flex-direction:column;gap:14px}
.wk-f{position:relative;overflow:hidden;height:min(68svh,980px);aspect-ratio:var(--ar);background:var(--rr-graphite-2)}
.wk-f .ph{position:absolute;inset:0 -3%;width:106%}
.wk-f img{width:100%;height:100%;object-fit:cover}
.wk figcaption{font:600 16px/1.3 var(--f);display:flex;gap:12px;align-items:baseline;max-width:30ch}
.wk-n{font:500 12px/1 var(--fu);color:var(--rr-stone)}
.wk-end{width:30vw;align-self:center;background:var(--rr-graphite-2);padding:40px;border-radius:6px}
.wk-end .btn{margin-top:28px}
.bar{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;height:2px;background:#2A2826}
.bar i{display:block;height:100%;background:var(--rr-stitch);transform:scaleX(0);transform-origin:0 50%}
@media (max-width:1023px),(orientation:portrait){
 .e4{height:auto;padding:96px 0}
 .e4 .sticky{position:static;height:auto;overflow:visible}
 .track{will-change:auto;width:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;transform:none!important;padding-bottom:8px;scroll-padding:0 var(--pad)}
 .track::-webkit-scrollbar{display:none}
 .e4 .sticky{display:block}
 .wk-intro{position:absolute;left:var(--pad);right:var(--pad);top:96px;width:auto;padding:0}
 .e4{padding-top:calc(96px + 11em)}
 .wk{scroll-snap-align:start;flex:0 0 78vw}
 .wk-f{height:auto;width:100%;aspect-ratio:2/3}
 .wk-end{flex:0 0 78vw;width:auto;scroll-snap-align:start;padding:28px}
 .wk-hint{display:none}
 .bar{position:relative;left:auto;right:auto;bottom:auto;margin:20px var(--pad) 0}
}
@media (max-width:1023px){.wk-intro{top:96px}}

/* ---------- Э5 кожа и нить ---------- */
.e5{padding:0 0 160px;overflow:hidden}
.mq{overflow:hidden;padding:56px 0 64px}
.mq p{white-space:nowrap;font:500 clamp(40px,6vw,96px)/1 var(--fu);letter-spacing:-.03em;opacity:.9}
.e5-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;padding:0 var(--pad);max-width:1440px;margin:0 auto;align-items:start}
.e5-ph{position:relative;padding-bottom:120px}
.e5-a .fr{width:100%;max-width:1400px}
.e5-b{position:absolute;right:-24px;bottom:0;width:min(42%,336px);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.e5-b .fr .ph{transition-delay:200ms}.e5-b .fr .cur{transition-delay:120ms}
.e5-t .sub{opacity:.92}
.pk{position:relative;margin-top:32px;padding:28px;border-radius:6px;background:rgba(20,20,20,.22);border:1px solid rgba(239,235,228,.18)}
.opt{position:absolute;top:16px;right:16px;font:500 11px/1 var(--fu);letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(239,235,228,.5);padding:6px 9px;border-radius:999px}
.pk-t{font:600 18px/1 var(--f)}
.pk-svg{display:block;width:280px;max-width:100%;height:auto;margin:18px auto 8px}
.pk-sec{fill:var(--pk-col,#1B1B1C);stroke:rgba(239,235,228,.5);stroke-width:2;transition:fill 200ms var(--ease-out)}
.pk-perf path{fill:url(#perf);opacity:0;transition:opacity 200ms var(--ease-out)}
.pk[data-mat="perf"] .pk-perf path{opacity:1}
.pk[data-mat="alc"] .pk-rim{filter:url(#alc)}
.pk-hub{fill:#121212;stroke:rgba(239,235,228,.35);stroke-width:2;stroke-linejoin:round}
.pk-hub-c{fill:#1c1c1c;stroke:rgba(239,235,228,.25);stroke-width:2}
.pk-st{fill:none;stroke:var(--pk-thr,#B8372B);stroke-width:6;stroke-dasharray:14 10;stroke-linecap:round;transition:stroke 200ms var(--ease-out)}
.pk fieldset{border:0;padding:0;margin:16px 0 0}
.pk legend{font:500 12px/1 var(--fu);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(239,235,228,.4);cursor:pointer;font:500 15px/1 var(--f);transition:background-color 200ms var(--ease-out),color 200ms}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip i{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1px rgba(239,235,228,.6)}
.chip:has(input:checked){background:var(--rr-ivory);color:var(--rr-graphite);border-color:var(--rr-ivory)}
.chip:has(input:focus-visible){outline:2px solid var(--rr-ivory);outline-offset:2px}
.pk-out{display:block;margin:20px 0 16px;font:600 17px/1.4 var(--f)}
@media (max-width:1023px){
 .e5{padding-bottom:96px}
 .mq{padding:40px 0}.mq p{font-size:40px}
 .e5-g{display:block}
 .e5-ph{padding-bottom:80px;margin-bottom:40px}
 .e5-b{right:0;width:60%}
 .pk{padding:22px}.pk-svg{width:240px}
 .pk .btn{width:100%}
}

/* ---------- Э6 цена ---------- */
.e6{padding:160px 0;color:var(--rr-graphite)}
.e6-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;padding:0 var(--pad);max-width:1440px;margin:0 auto;align-items:start}
.dl-t{margin-top:44px;font:500 13px/1 var(--fu);letter-spacing:.08em;text-transform:uppercase;color:var(--rr-ink-2)}
.dl{margin-top:16px}
.dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;padding:22px 16px}
.dl>div:nth-child(odd){background:#E6E1D8}
.dl dt{font:600 20px/1.3 var(--f)}
.dl dd{color:var(--rr-ink-2)}
.e6-card{background:var(--rr-graphite);color:var(--rr-ivory);padding:36px;border-radius:6px}
.phs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0}
.ph-s svg{width:100%;max-width:150px;height:auto;display:block;margin:0 auto}
.ph-s rect,.ph-s path,.ph-s circle{fill:none;stroke:var(--rr-ivory);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 400ms var(--ease-in-out) calc(var(--i) * 120ms)}
.ph-s.is-in rect,.ph-s.is-in path,.ph-s.is-in circle{stroke-dashoffset:0}
.ph-s figcaption{margin-top:12px;font-size:15px;line-height:21px;text-align:center;color:var(--rr-stone)}
.e6-card>p:not(.h3){color:var(--rr-stone)}
.e6-card .btn{margin-top:24px}
@media (max-width:1023px){.e6{padding:96px 0}.e6-g{display:block}.e6-card{margin-top:40px;padding:26px}.dl>div{grid-template-columns:1fr;gap:6px}.e6-card .btn{width:100%}}

/* ---------- появления слева (характер «игла»: 500 мс / 40 px, Stagger 70 мс) ---------- */
.js [data-rv]:not(.fr):not(.ph-s):not(.wk-f){opacity:0;transform:translateX(-40px);transition:opacity 500ms var(--ease-out) calc(var(--i,0) * 70ms),transform 500ms var(--ease-out) calc(var(--i,0) * 70ms)}
.js [data-rv].is-in:not(.fr):not(.ph-s):not(.wk-f){opacity:1;transform:none}

/* ---------- Э7 порядок ---------- */
.e7{padding-top:160px}
.e7-s{height:220svh}
.e7-g{height:100%;display:grid;grid-template-columns:minmax(0,2.6fr) minmax(0,4fr) minmax(0,.6fr) minmax(0,4.8fr);column-gap:24px;align-items:center;padding:0 var(--pad);max-width:1440px;margin:0 auto}
.e7-g .cnt{font-size:clamp(72px,7vw,120px);align-self:center;flex-direction:column;align-items:flex-start;gap:4px}
.e7-g .tts{grid-column:2;min-height:16em}
.e7-g .tt-c{background:var(--rr-ivory);color:var(--rr-velvet)}
.e7-r{grid-column:4;display:flex;flex-direction:column;align-items:center;gap:12px}
.fr-h{height:min(80svh,1150px);max-height:calc(100svh - var(--hd) - 80px)}
.figc{font-size:15px;color:var(--rr-stone)}
.e7-cta{position:absolute;left:0;top:13em;opacity:0;transform:translateY(12px);transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out);pointer-events:none}
.e7-cta.is-on{opacity:1;transform:none;pointer-events:auto}
.e7-rm{display:none}
@media (max-width:1023px){
 .e7{padding-top:96px}.e7-s{height:200svh}
 .e7-g{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:12px var(--pad);gap:14px}
 .e7-r{order:-1}.fr-h{height:48svh;max-height:none}
 .e7-g .cnt{flex-direction:row;font-size:44px;align-items:baseline}
 .e7-g .tts{min-height:11em}
 .e7-g .tt-p{font-size:22px}
 .e7-cta{top:auto;bottom:0;position:relative;margin-top:12em}
 .figc{display:none}
}

/* ---------- Э8 мастерская ---------- */
.e8{padding:160px 0}
.e8-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,1fr) minmax(0,6fr);padding:0 var(--pad);max-width:1440px;margin:0 auto;align-items:start}
.e8-l{grid-column:1;position:sticky;top:calc(var(--hd) + 32px)}
.fr-w{height:min(82svh,940px);max-width:100%}
.e8-r{grid-column:3}
.rate{font:500 clamp(96px,12vw,200px)/.9 var(--fu);letter-spacing:-.05em}
.rate-s{margin:16px 0 48px;color:var(--rr-stone);font-size:16px}
.q-t{margin-top:44px;font:600 18px/1 var(--f)}
.q{margin-top:22px;padding-left:20px;border-left:2px solid transparent;border-image:repeating-linear-gradient(180deg,var(--rr-stitch) 0 7px,transparent 7px 12px) 2}
.q p{font:600 clamp(22px,2vw,28px)/1.25 var(--f)}
.q cite{display:block;margin-top:8px;font-style:normal;color:var(--rr-stone);font-size:15px}
.q1{margin-left:48px}.q2{margin-left:12px}
.q-n{margin-top:24px;font-size:14px;line-height:20px;color:var(--rr-stone)}
.e8 .btn{margin-top:32px}
@media (max-width:1023px){
 .e8{padding:96px 0}.e8-g{display:block}.e8-l{position:static}
 .fr-w{height:auto;width:100%;aspect-ratio:4/5!important}
 .rate{margin-top:40px;font-size:96px}
 .q1,.q2{margin-left:0}
 .e8 .btn{width:100%}
}

/* ---------- Э9 вопросы ---------- */
.e9{padding:160px 0;color:var(--rr-graphite)}
.faq{margin:44px 0 40px}
.faq>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;padding:28px 16px}
.faq>div:nth-child(odd){background:#E6E1D8}
.faq dt{font:600 22px/1.3 var(--f)}
.faq dd{color:var(--rr-ink-2)}
@media (max-width:1023px){.e9{padding:96px 0}.faq>div{grid-template-columns:1fr;gap:8px;padding:22px 14px}.faq dt{font-size:19px}.e9 .btn{width:100%}}

/* ---------- Э10 финал ---------- */
.e10{padding:160px 0 120px}
.e10-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;padding:0 var(--pad);max-width:1440px;margin:0 auto}
.e10-t .btn{margin-top:36px}
.glossbtn{display:inline-flex;vertical-align:top;line-height:0;border-radius:999px}
.e10-r{display:flex;justify-content:flex-end}
.fr-p{height:min(80svh,1150px);max-height:1150px}
@media (max-width:1023px){.e10{padding:96px 0 72px}.e10-g{display:flex;flex-direction:column-reverse;gap:36px}.fr-p{height:auto;width:100%;aspect-ratio:730/912!important}.e10-t .btn,.glossbtn{width:100%}.e10-r{width:100%}}

/* ---------- блок Lendmix и подвал ---------- */
.rr .buyerGuide{background:var(--rr-ivory);color:var(--rr-graphite)}
.ft{padding:56px var(--pad) 0;color:var(--rr-stone);font-size:15px;line-height:22px;overflow:hidden;background:var(--rr-graphite)}
.ft-big{font:700 14vw/.8 var(--f);letter-spacing:-.05em;color:var(--rr-graphite-2);margin-top:40px;white-space:nowrap}

/* ---------- плавающая кнопка телефона ---------- */
.fab{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;transform:translateY(140%);transition:transform 400ms var(--ease-drawer);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.fab.is-shown{transform:none}
@media (min-width:1024px){.fab{display:none}}

/* ---------- смена фона (эффект 12): секции прозрачные, красится main ---------- */
main[data-lm-bgshift]{--lm-bg:#141414;--lm-fg:#EFEBE4}
main[data-lm-bgshift].is-live [data-bg]{background:transparent}
main[data-lm-bgshift] .light .btn-dark{background:var(--rr-graphite)}

/* ---------- reduce-motion: всё читается без сцен ---------- */
.rm .e2,.rm .e3,.rm .e4,.rm .e7-s{height:auto}
.rm .sticky{position:static;height:auto;overflow:visible}
.rm .e2-g{display:block;padding:96px var(--pad)}
.rm .e2-l .tts,.rm .e2-l .cnt{display:none}
.rm .wheel-ph{opacity:1!important}
.rm .wheel{height:auto;width:min(100%,640px);margin:32px auto}
.rm .e2-rm,.rm .e7-rm{display:block;margin-top:24px}
.rm .e2-rm li,.rm .e7-rm li{padding:10px 0;border-top:1px solid rgba(239,235,228,.2)}
.rm .e2-cta,.rm .e7-cta{opacity:1;transform:none;pointer-events:auto;position:static;margin-top:24px}
.rm.js .e3 .sv:not(.is-on){opacity:1}
.rm .e3-g{display:block;padding:96px var(--pad)}.rm .e3-r{display:none}.rm .sv .fr-m{display:block;max-width:420px;margin-bottom:16px}.rm .sv p{max-height:none;opacity:1}.rm .e3 .sv{opacity:1}
.rm .track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory}
.rm .e4{padding-bottom:96px}
@media (min-width:1024px) and (orientation:landscape){.rm .e4{padding-top:96px}}
.rm .e7-g .tts,.rm .e7-g .cnt{display:none}
.rm .e7-g{display:block;padding:24px var(--pad)}
.rm .w{transform:none;animation:none}.rm .hook{display:none}
.rm [data-rv]{opacity:1!important;transform:none!important}
.rm .fr .ph{transform:none!important}
@media (prefers-reduced-motion:reduce){*{animation-duration:1ms!important;transition-duration:1ms!important}}

/* reduce-motion, Э2: схема (контур, секторы, строчка) и фото рядом — без прокрутки */
.rm .wheel{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:min(100%,1100px);aspect-ratio:auto;height:auto}
.rm .wheel-ph,.rm .wheel-svg{position:relative;inset:auto;aspect-ratio:960/1050;height:auto;width:100%}
.rm .contour,.rm .secs,.rm .stitch{display:inline}
.rm .sec,.rm .stitch,.rm .ln{opacity:1!important}
.rm .ln,.rm .sm{stroke-dashoffset:0}
.rm .ln-in{display:none}

/* ---------- 25.10 Николай: фото со скруглением, крупно, детали лупами ---------- */
:root{--rp:22px}
@media (max-width:1023px){:root{--rp:16px}}
.fr,.e1-f,.stack,.wk-f,.wheel-ph,.st-ceil,.fr-ceil{border-radius:var(--rp)}
.e1-f{overflow:hidden}
.wheel-ph{overflow:hidden}
/* крупнее */
.e3-g{grid-template-columns:minmax(0,4.6fr) minmax(0,.4fr) minmax(0,7fr)}
.stack{height:min(82svh,1000px)}
.wk-f{height:min(76svh,980px)}
.e5-b{width:min(46%,420px)}
.e8-g{grid-template-columns:minmax(0,6fr) minmax(0,.6fr) minmax(0,5.4fr)}
.fr-w{height:min(84svh,940px)}
.fr-p{height:min(84svh,1000px)}
.e10-g{grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr)}
@media (min-width:1024px) and (orientation:landscape){.fr-h{height:min(84svh,1150px)}}
/* лупа: точка на детали + круглая врезка с подписью */
.lp{position:absolute;left:var(--x);top:var(--y);z-index:4;width:0;height:0;pointer-events:none}
.lp-dot{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;border:2px solid var(--rr-ivory);box-shadow:0 0 0 4px rgba(20,20,20,.35);background:rgba(239,235,228,.18)}
.lp-dot::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(239,235,228,.6);animation:lp-ping 2.4s var(--ease-out) infinite}
.lp-dot::after{animation-iteration-count:3}
@keyframes lp-ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.6);opacity:0}}
.lp-c{position:absolute;width:clamp(150px,13vw,200px);display:flex;flex-direction:column;align-items:center;gap:10px}
.lp-r .lp-c{left:28px}.lp-l .lp-c{right:28px}
.lp-d .lp-c{top:-30px}.lp-u .lp-c{bottom:-30px}
.lp-c picture{display:block;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid var(--rr-ivory);box-shadow:0 18px 40px rgba(0,0,0,.45);background:#222}
.lp-c img{width:100%;height:100%;object-fit:cover}
.lp-c b{font:600 13px/1.25 var(--f);background:var(--rr-ivory);color:var(--rr-graphite);padding:7px 11px;border-radius:999px;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.js .lp-c{opacity:0;transform:scale(.6);transition:opacity 400ms var(--ease-out) 450ms,transform 600ms cubic-bezier(.34,1.4,.64,1) 450ms;transform-origin:center}
.js .lp-dot{opacity:0;transition:opacity 300ms var(--ease-out) 300ms}
.js .st.is-on .lp-c,.js .wk-f.is-in .lp-c,.js .fr.is-in .lp-c,.rm .lp-c{opacity:1;transform:none}
.js .st.is-on .lp-dot,.js .wk-f.is-in .lp-dot,.js .fr.is-in .lp-dot,.rm .lp-dot{opacity:1}
@media (max-width:1023px){.lp-c{width:118px;gap:6px}.lp-c b{font-size:11px;padding:5px 8px}.lp-r .lp-c{left:16px}.lp-l .lp-c{right:16px}}

/* ================= v2 «впечатлить» (spec §9) ================= */
/* амбиент: размытый кадр под рамкой на весь экран, скрим, зерно */
.e1,.e8,.e10{position:relative;isolation:isolate}
.e2 .sticky,.e3 .sticky,.e4 .sticky,.e7 .sticky{isolation:isolate}
.e8,.e10{overflow:hidden}
.amb-l{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.amb{position:absolute;inset:0;background:center/cover no-repeat;transform:scale(1.15)}
.amb-x{opacity:0;transition:opacity 400ms var(--ease-out)}
.amb-x.is-on{opacity:1}
.amb-ceil{background:var(--rr-cognac)}
.scrim{position:absolute;inset:0;background:var(--rr-graphite);opacity:var(--sc)}
.scrim-ivory{background:var(--rr-ivory)}
.scrim-velvet{background:var(--rr-velvet)}
.amb-l .grain{opacity:.08}
.e10 .e10-t{position:relative}
.e10 .e10-t::before{content:"";position:absolute;inset:-80px -120px -80px -200px;z-index:-1;background:radial-gradient(closest-side,rgba(20,20,20,.55),rgba(20,20,20,0));pointer-events:none}
/* рамка-глянец: кромка света, тень */
.fr,.e1-f,.stack,.wk-f,.wheel-ph{box-shadow:0 40px 90px -30px rgba(0,0,0,.65)}
.e3 .stack{box-shadow:0 30px 70px -30px rgba(20,20,20,.30)}
.fr::after,.e1-f>.grain::after,.stack::after,.wk-f::before,.wheel-ph::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.04)}
.wheel-ph{position:absolute}
/* Э7, Э8, Э10 — рамки не ниже 70 % окна */
@media (min-width:1024px) and (orientation:landscape){.fr-h{height:min(84svh,1150px);max-height:calc(100svh - var(--hd) - 60px)}}

/* лупа-сканер Э2 */
.scan-pos{position:absolute;left:0;top:0;width:0;height:0;z-index:6;will-change:transform;pointer-events:none}
.scan{position:absolute;width:var(--ld,clamp(150px,18vw,280px));height:var(--ld,clamp(150px,18vw,280px));left:calc(var(--ld,clamp(150px,18vw,280px)) / -2);top:calc(var(--ld,clamp(150px,18vw,280px)) / -2);border-radius:50%;overflow:hidden;
 border:3px solid rgba(239,235,228,.9);box-shadow:0 24px 48px -12px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.3);background:#222}
.scan-in{position:absolute;left:0;top:0;will-change:transform}
.scan-in .ph,.scan-in img{display:block;width:100%;height:100%}
.scan-gl{position:absolute;inset:0;border-radius:50%;background:radial-gradient(120% 80% at 30% 15%,rgba(255,255,255,.35),rgba(255,255,255,0) 40%);pointer-events:none}
.scan-cap{position:absolute;left:50%;top:calc(var(--ld,clamp(150px,18vw,280px)) / 2 + 12px);transform:translateX(-50%);white-space:nowrap;font:600 15px/1 var(--f);background:var(--rr-ivory);color:var(--rr-graphite);padding:8px 12px;border-radius:999px;opacity:0;transition:opacity 250ms var(--ease-out)}
.scan-cap.is-on{opacity:1}
@media (max-width:1023px){.scan-pos{--ld:130px}.scan-cap{font-size:13px}}
.rm .scan-pos{display:none}

/* строчка-прогресс по кромке шапки (крышка уезжает — стежки стоят) */
.hd{position:sticky}
.sp{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;background:repeating-linear-gradient(90deg,var(--rr-stitch) 0 7px,transparent 7px 12px)}
.sp-cap{position:absolute;inset:0;background:var(--rr-graphite);transform:translateX(0);will-change:transform}
.rr .mfx-bar{display:none}
/* полоса ленты Э4 — тем же пунктиром */
.bar{overflow:hidden;background:repeating-linear-gradient(90deg,var(--rr-stitch) 0 7px,transparent 7px 12px)!important}
.bar i{position:absolute;inset:0;background:var(--rr-graphite)!important;transform:translateX(0);transform-origin:0 50%}
.bar{position:absolute}
@media (max-width:1023px),(orientation:portrait){.bar{position:relative}}

/* «отрез»: поле Э5 и Э7 въезжает скруглённой панелью и расправляется */
.e5,.e7{position:relative;isolation:isolate;color:var(--rr-ivory);background:transparent}
.cut{position:absolute;inset:0;z-index:-2;transform-origin:top center;will-change:transform}
.cut-cognac{background:var(--rr-cognac)}.cut-velvet{background:var(--rr-velvet)}
.js .cut{transform:scaleX(.92);border-radius:28px}
.rm .cut{transform:none!important;border-radius:0!important}
.e7 .e7-s .amb-l{z-index:-1}

/* объёмный руль подбора */
.pw-wrap{position:relative;width:440px;max-width:100%;margin:18px auto 8px;transform-origin:50% 50%}
.pw-wrap::before{content:"";position:absolute;left:8%;right:8%;top:14%;bottom:-6%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0));pointer-events:none}
.pw-wrap.is-spin{animation:pw-spin 520ms cubic-bezier(.34,1.56,.64,1)}
.pw{position:relative;width:100%;height:auto;display:block;--leather:#1B1B1C;--thread:#B8372B;--glint:.55}
.pw-whl{transform-box:fill-box;transform-origin:center}
@keyframes pw-spin{from{transform:rotate(-6deg)}to{transform:none}}
.pw-rim{fill:var(--leather);transition:fill 200ms var(--ease-out)}
.pw-grain{mix-blend-mode:multiply;opacity:.55}
.pw-grain-a{display:none}
.pk[data-mat="alc"] .pw-grain-l{display:none}.pk[data-mat="alc"] .pw-grain-a{display:block}
.pk[data-col="#E6E0D4"] .pw-grain{opacity:.25}
.pw-perf{display:none}.pk[data-mat="perf"] .pw-perf{display:block}
.pw-lite{mix-blend-mode:soft-light}.pw-shade{mix-blend-mode:multiply}
.pw-edge-o{fill:none;stroke:rgba(239,235,228,.25);stroke-width:1}
.pw-edge-i{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1}
.pw-seam{stroke:rgba(0,0,0,.55);stroke-width:1.5}
.pw-st{fill:none;stroke:var(--thread);stroke-width:1.6;stroke-dasharray:3.2 2.6;stroke-linecap:round;transition:stroke 200ms var(--ease-out)}
.pw-st-sh{fill:none;stroke:rgba(0,0,0,.45);stroke-width:1.6;stroke-dasharray:3.2 2.6;stroke-linecap:round;transform:translate(.6px,.6px)}
.pw-gw{transform-box:view-box;transform-origin:200px 200px;transition:transform 120ms linear}
.pw-glint{fill:none;stroke:url(#pw-glint);stroke-width:10;stroke-linecap:round;mix-blend-mode:screen;opacity:var(--glint)}
.pk[data-mat="perf"] .pw{--glint:.35}.pk[data-mat="alc"] .pw{--glint:.06}
.pw-spoke{fill:#161617;stroke:rgba(255,255,255,.10);stroke-width:1}
.pw-hub{fill:#111}.pw-hub-r{fill:none;stroke:#2A2A2B;stroke-width:3}
@media (max-width:1023px){.pw-wrap{width:300px}}
.rm .pw-wrap{animation:none}

/* наклон и глянец карточек ленты (ПК с мышью) */
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
 .wk{perspective:1100px}
 .wk figure{transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sz,1));will-change:transform}
 .wk figcaption{transform:translateZ(30px)}
 .wk-f::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;mix-blend-mode:soft-light;opacity:var(--go,0);transition:opacity 200ms var(--ease-out);
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 42%)}
}
/* телефон: карточка в центре выделена */
@media (max-width:1023px),(orientation:portrait){
 .wk{transition:transform 300ms var(--ease-out),opacity 300ms var(--ease-out);transform:scale(.94);opacity:.72}
 .wk.is-center{transform:none;opacity:1}
 .rm .wk{transform:none;opacity:1}
}
/* без закрепления (телефон, reduce-motion) амбиент должен держаться своей секции, а не документа */
@media (max-width:1023px){.e3 .sticky,.e3{position:relative}}
.rm .e2 .sticky,.rm .e3 .sticky,.rm .e4 .sticky,.rm .e7 .sticky,.rm .e2,.rm .e3,.rm .e7-s{position:relative}

.e5 .cur{--cur:var(--rr-cognac)}.e7 .cur{--cur:var(--rr-velvet)}
.e5{overflow:hidden}
.js .mq{opacity:0;transition:opacity 300ms var(--ease-out)}
.js .mq.is-wide,.rm .mq{opacity:1}