/* Вилла в Дубае — интерактивный концепт WOLF & CODE. Сцены на весь экран, травертин и тёмная земля, прямые края */
:root{--sand:oklch(0.935 0.018 75);--sand2:oklch(0.9 0.024 72);--paper:oklch(0.965 0.01 80);--ink:oklch(0.21 0.016 55);--ink2:oklch(0.36 0.018 55);--mute:oklch(0.5 0.02 60);--bronze:oklch(0.58 0.09 55);--bronze2:oklch(0.78 0.08 70);--line:oklch(0.21 0.016 55 / 0.16);--on:oklch(0.97 0.008 80);--on2:oklch(0.97 0.008 80 / 0.74);--disp:'Forum',Georgia,serif;--hand:'Marck Script',cursive;--text:'Golos Text',system-ui,sans-serif;--gut:clamp(16px,4vw,72px);--ease:cubic-bezier(0.16,1,0.3,1);--sp-xs:4px;--sp-sm:8px;--sp-md:16px;--sp-lg:24px;--sp-xl:48px;--sp-2xl:96px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--ink);font:400 clamp(15px,1vw,17px)/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--gut)}

/* Типографика: Forum — заголовки, Marck Script — слова этапов, Golos — текст */
.kicker{margin:0 0 var(--sp-md);font:500 11px/1.4 var(--text);letter-spacing:0.28em;text-transform:uppercase;color:var(--bronze)}
.h-hero{margin:0;font:400 clamp(44px,6.4vw,112px)/0.94 var(--disp);letter-spacing:-0.01em}
.h-sec{margin:0;font:400 clamp(34px,3.8vw,64px)/1 var(--disp);letter-spacing:-0.005em;max-width:16ch}

/* Шапка поверх первой сцены, прокручивается вместе со страницей */
.hdr{position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;gap:clamp(16px,3vw,48px);padding:24px var(--gut);color:var(--on)}
.mark{display:flex;flex-direction:column;text-decoration:none;line-height:1}
.mark__w{font:400 32px/0.9 var(--disp);letter-spacing:0.06em}
.mark__s{margin-top:7px;font:500 9px/1 var(--text);letter-spacing:0.34em;text-transform:uppercase;color:var(--on2)}
.hdr__nav{display:flex;gap:clamp(16px,2.4vw,40px);margin-left:auto}
.hdr__nav a{font-size:14px;text-decoration:none;color:var(--on2);transition:color 0.3s}
.hdr__nav a:hover{color:var(--on)}
.hdr__cta{padding:12px 22px;border:1px solid oklch(0.97 0.008 80 / 0.5);font-size:13px;font-weight:500;letter-spacing:0.06em;text-decoration:none;color:var(--on);white-space:nowrap;transition:background 0.3s,color 0.3s}
.hdr__cta:hover{background:var(--on);color:var(--ink)}

/* ---------- Сцена по прокрутке: общая механика ---------- */
.room{--x:0%;--p:0;position:relative;height:calc(var(--len,260) * 1vh)}
.room__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.cmp{position:relative;margin:0;overflow:hidden;background:var(--ink);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp picture{position:absolute;inset:0}
.cmp__st{clip-path:inset(0 calc(100% - var(--x,0%)) 0 0)}
.cmp>.cmp__st:first-child,.cmp>picture:first-child .cmp__st{clip-path:none}
.room--fade .cmp__st{clip-path:none}
.cmp__b{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmp__film{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.cmp__fog{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cmp__seam{position:absolute;top:0;bottom:0;left:var(--x);width:1px;background:oklch(0.97 0.008 80 / 0.9);opacity:var(--seam,0);transition:opacity 0.3s;pointer-events:none}
.cmp__seam i{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid oklch(0.97 0.008 80 / 0.9);border-radius:50%;background:oklch(0.21 0.016 55 / 0.35)}
.cmp__seam i::before{content:'‹ ›';position:absolute;inset:0;display:grid;place-items:center;font:500 16px/1 var(--text);letter-spacing:4px;color:var(--on)}
.cmp__tag{position:absolute;bottom:20px;padding:7px 12px;background:oklch(0.21 0.016 55 / 0.7);font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--on);transition:opacity 0.4s}
.cmp__tag--a{right:20px;opacity:var(--ta,1)}
.cmp__tag--b{left:20px;opacity:var(--tb,0)}

/* ---------- Сцена из роликов ---------- */
.film{--p:0;position:relative;height:calc(var(--len,600) * 1vh)}
.film__poster,.film__cv{position:absolute;inset:0;width:100%;height:100%}
.film__poster{object-fit:cover}

/* ---------- Полноэкранная сцена ---------- */
.room--full .cmp{position:absolute;inset:0}
.room--full .cmp::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,oklch(0.16 0.014 55 / 0.6),oklch(0.16 0.014 55 / 0.1) 46%,transparent 66%),linear-gradient(0deg,oklch(0.16 0.014 55 / 0.78),transparent 38%),linear-gradient(180deg,oklch(0.16 0.014 55 / 0.45),transparent 22%);pointer-events:none}
.room--kb .cmp__st{transform:scale(var(--kb,1));transform-origin:50% 60%;will-change:transform}

/* Заголовок сцены: виден в начале, уходит вверх с первыми шагами прокрутки */
.scene__intro{position:absolute;z-index:3;left:var(--gut);top:50%;transform:translateY(calc(-50% - var(--p) * 900px));opacity:calc(1 - var(--p) * 9);color:var(--on);max-width:15ch}
.room--hero .scene__intro{max-width:none}
.scene__intro .kicker{color:var(--bronze2)}

/* Подписи этапов: рукописное слово проявляется слева направо, пояснение выезжает из-под маски */
.caps{position:absolute;z-index:3;left:var(--gut);bottom:clamp(110px,16vh,180px);width:min(640px,calc(100% - var(--gut) * 2));height:clamp(150px,21vh,220px);color:var(--on);pointer-events:none}
.cap{position:absolute;left:0;right:0;bottom:0}
.cap__n{display:block;margin-bottom:var(--sp-sm);font:500 11px/1 var(--text);letter-spacing:0.3em;text-transform:uppercase;color:var(--bronze2);opacity:0;transition:opacity 0.6s var(--ease)}
.cap__t{margin:0;font:400 clamp(48px,5.6vw,96px)/1 var(--hand);color:var(--on);clip-path:inset(-20% 100% -20% 0);transition:clip-path 1.1s var(--ease)}
.cap__d{margin:var(--sp-sm) 0 0;max-width:38ch;overflow:hidden;font-size:clamp(15px,1.1vw,18px);line-height:1.5;color:var(--on2)}
.cap__d span{display:block;transform:translateY(105%);transition:transform 0.8s var(--ease) 0.2s}
.cap.is-on .cap__n{opacity:1}
.cap.is-on .cap__t{clip-path:inset(-20% -5% -20% 0)}
.cap.is-on .cap__d span{transform:none}
.cap:not(.is-on) .cap__t{transition-duration:0.35s;clip-path:inset(-20% -5% -20% 105%)}
.cap:not(.is-on) .cap__d span{transform:translateY(-105%);transition-duration:0.4s;transition-delay:0s}
.room--full:not(.is-run) .cap{visibility:hidden}

/* Процент готовности справа */
.meter{position:absolute;z-index:3;right:var(--gut);bottom:clamp(110px,16vh,180px);margin:0;text-align:right;color:var(--on2);font-size:11px;letter-spacing:0.28em;text-transform:uppercase}
.meter{text-shadow:0 1px 16px oklch(0.16 0.014 55 / 0.6)}
.meter b{text-shadow:0 2px 28px oklch(0.16 0.014 55 / 0.55);display:block;margin-top:var(--sp-sm);font:400 clamp(56px,7vw,124px)/0.85 var(--disp);letter-spacing:-0.02em;color:var(--on);font-variant-numeric:tabular-nums}

/* Шкала этапов по нижнему краю */
.rail{position:absolute;z-index:3;left:var(--gut);right:var(--gut);bottom:clamp(28px,5vh,48px);display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid oklch(0.97 0.008 80 / 0.28)}
.rail::before{content:'';position:absolute;left:0;top:-2px;height:3px;width:var(--pp,0%);background:var(--bronze2)}
.rail li{padding-top:14px;padding-right:12px;font:400 clamp(14px,1.15vw,19px)/1.15 var(--disp);color:oklch(0.97 0.008 80 / 0.45);transition:color 0.4s}
.rail li.is-on{color:var(--on)}

/* ---------- Коротко ---------- */
.facts{max-width:1360px;margin:0 auto;padding:clamp(64px,9vw,128px) var(--gut)}
.facts__dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-top:1px solid var(--line)}
.facts__dl>div{display:flex;flex-direction:column;gap:var(--sp-sm);padding:28px 24px 28px 0}
.facts__dl>div+div{padding-left:24px;border-left:1px solid var(--line)}
.facts dt{font-size:11px;font-weight:500;letter-spacing:0.26em;text-transform:uppercase;color:var(--bronze)}
.facts dd{margin:0;font:400 clamp(36px,3.6vw,60px)/1 var(--disp)}
.facts__dl span{font-size:14px;color:var(--mute)}
.facts__note{margin:var(--sp-lg) 0 0;max-width:68ch;font-size:14px;color:var(--mute)}

/* ---------- Сейчас → будет: экран пополам ---------- */
.sec-head{padding-top:clamp(80px,11vw,150px);padding-bottom:clamp(32px,4vw,56px)}
.sec-head .h-sec{max-width:20ch}
.sec-head__p{margin:var(--sp-lg) 0 0;max-width:58ch;color:var(--mute)}
.room--pair .room__stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--sand)}
.room--pair .cmp{height:100%;cursor:ew-resize}
.room--pair.room--r .cmp{order:2}
.pair__txt{display:flex;flex-direction:column;justify-content:center;padding:var(--sp-xl) clamp(32px,6vw,112px)}
.pair__n{display:flex;align-items:baseline;gap:var(--sp-sm);margin:0 0 var(--sp-lg);font:400 clamp(72px,8vw,132px)/0.8 var(--disp);color:var(--bronze)}
.pair__n span{font-size:20px;color:var(--mute)}
.pair__txt .h-sec{margin-bottom:clamp(24px,3vw,40px)}
.pair__dl{display:grid;gap:var(--sp-lg);margin:0;max-width:46ch}
.pair__dl div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--sp-md);padding-top:var(--sp-md);border-top:1px solid var(--line);transition:opacity 0.5s}
.pair__dl dt{font-size:11px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--mute);padding-top:4px}
.pair__dl dd{margin:0;color:var(--ink2)}
.room--pair:not(.is-will) .pair__will,.room--pair.is-will .pair__now{opacity:0.42}
.room--pair.is-will .pair__will dt{color:var(--bronze)}
.pair__bar{position:relative;display:flex;justify-content:space-between;align-items:baseline;margin:clamp(32px,4vw,56px) 0 0;max-width:46ch;padding-bottom:12px;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--mute)}
.pair__bar b{font:400 28px/1 var(--disp);letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}
.pair__bar i{position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--line)}
.pair__bar i::after{content:'';position:absolute;left:0;top:-1px;height:3px;width:var(--pp,0%);background:var(--bronze)}

/* ---------- Два типа ---------- */
.types{padding:clamp(80px,11vw,150px) 0;background:var(--paper)}
.types__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,80px);margin-top:clamp(40px,5vw,72px)}
.tcol__img{display:block;width:100%;padding:0;border:0;background:var(--sand2);overflow:hidden;cursor:zoom-in}
.tcol__img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1s var(--ease)}
.tcol__img:hover img{transform:scale(1.035)}
.tcol h3{margin:var(--sp-lg) 0 var(--sp-sm);font:400 clamp(28px,2.4vw,40px)/1.05 var(--disp)}
.tcol p{margin:0 0 var(--sp-lg);max-width:48ch;color:var(--mute)}
.spec{margin:0;border-bottom:1px solid var(--line)}
.spec div{display:flex;justify-content:space-between;gap:var(--sp-md);padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.spec dt{color:var(--mute)}
.spec dd{margin:0;font-weight:500}

/* ---------- Галерея: свайп, перетаскивание мышью, стрелки ---------- */
.more{padding:clamp(80px,11vw,150px) 0}
.more__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-lg);margin-bottom:clamp(32px,4vw,56px)}
.arrows{display:flex;gap:var(--sp-sm)}
.arr{width:56px;height:56px;border:1px solid var(--line);background:none;font-size:20px;cursor:pointer;transition:background 0.3s,color 0.3s,border-color 0.3s}
.arr:hover{border-color:var(--ink);background:var(--ink);color:var(--sand)}
.track{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);padding:0 var(--gut);scrollbar-width:none;cursor:grab;outline-offset:-4px}
.track::-webkit-scrollbar{display:none}
.track.is-drag{cursor:grabbing;scroll-snap-type:none}
.track.is-drag *{pointer-events:none}
.gcard{flex:0 0 clamp(240px,21vw,320px);scroll-snap-align:start;margin:0}
.gcard__img{position:relative;display:block;width:100%;padding:0;border:0;background:var(--sand2);overflow:hidden;cursor:zoom-in}
.gcard__img img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:opacity 0.6s var(--ease),transform 1s var(--ease)}
.gcard__img:hover img{transform:scale(1.03)}
.gcard__img .gcard__a{position:absolute;inset:0;opacity:0}
.gcard.is-now .gcard__a{opacity:1}
.gcard__hint{position:absolute;left:12px;bottom:12px;padding:6px 10px;background:oklch(0.21 0.016 55 / 0.72);font-size:12px;font-weight:500;letter-spacing:0.04em;color:var(--on);opacity:0;transform:translateY(6px);transition:opacity 0.4s var(--ease),transform 0.4s var(--ease)}
.gcard__img:hover .gcard__hint,.gcard__img:focus-visible .gcard__hint{opacity:1;transform:none}
@media (hover:none){.gcard__hint{opacity:1;transform:none}}
.more__lead{margin:0;max-width:44ch;font-size:15px;color:var(--mute)}
.more__nav{display:flex;align-items:center;gap:var(--sp-lg);margin-top:clamp(24px,3vw,40px)}
.more__count{margin:0;font:400 20px/1 var(--disp);color:var(--mute)}
.more__count b{font-weight:400;color:var(--ink)}
.gcard figcaption{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.gcard figcaption span{font:400 18px/1 var(--disp);color:var(--bronze)}
.gcard figcaption b{font:400 20px/1.15 var(--disp)}
.flip{padding:6px 10px;border:1px solid var(--line);background:none;font-size:12px;font-weight:500;cursor:pointer;transition:background 0.3s,color 0.3s}
.flip[aria-pressed="true"]{background:var(--ink);color:var(--sand)}

/* ---------- Что готово ---------- */
.ready{padding:clamp(80px,11vw,150px) 0;background:var(--ink);color:var(--on)}
.ready .kicker{color:var(--bronze2)}
.ready__in{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);gap:clamp(40px,7vw,120px)}
.ready__lead{margin:var(--sp-lg) 0 0;max-width:40ch;color:var(--on2)}
.ready__photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:440px;margin-top:clamp(32px,4vw,56px)}
.ready__photos button{display:block;padding:0;border:0;background:none;overflow:hidden;cursor:zoom-in}
.ready__photos img{width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(0.85);transition:transform 1s var(--ease),filter 0.6s}
.ready__photos button:hover img{transform:scale(1.05);filter:none}
.ready__cap{grid-column:1/-1;margin:8px 0 0;font-size:12px;letter-spacing:0.08em;color:var(--on2)}
.ready__list{margin:0;padding:0;list-style:none;counter-reset:r;align-self:start}
.ready__list li{counter-increment:r;display:grid;grid-template-columns:56px minmax(0,0.6fr) minmax(0,1fr);gap:var(--sp-md);align-items:baseline;padding:22px 0;border-top:1px solid oklch(0.97 0.008 80 / 0.16);color:var(--on2)}
.ready__list li::before{content:counter(r,decimal-leading-zero);font:400 22px/1 var(--disp);color:var(--bronze2)}
.ready__list b{font:400 25px/1.1 var(--disp);color:var(--on)}

/* ---------- Заявка на фоне вечера ---------- */
.lead{position:relative;padding:clamp(80px,12vw,170px) 0;color:var(--on);overflow:hidden}
.lead__bg{position:absolute;inset:0}
.lead__bg img,.lead__bg picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lead__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,oklch(0.16 0.014 55 / 0.75),oklch(0.16 0.014 55 / 0.35))}
.lead__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(40px,7vw,120px);align-items:center}
.lead .kicker{color:var(--bronze2)}
.lead__txt p:last-child{margin:var(--sp-lg) 0 0;max-width:40ch;color:var(--on2)}
.lf{display:grid;gap:var(--sp-md);padding:clamp(24px,3vw,40px);background:var(--paper);color:var(--ink)}
.lf__f{display:grid;gap:6px}
.lf__f span,.lf__cap{margin:0;font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--mute)}
.lf__f input{width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;font-size:17px;color:var(--ink);transition:border-color 0.3s}
.lf__f input:focus{outline:none;border-color:var(--bronze)}
.lf__how{display:flex;flex-wrap:wrap;gap:var(--sp-sm)}
.lf__how .lf__cap{flex-basis:100%;margin-bottom:2px}
.lf__how label{position:relative}
.lf__how input{position:absolute;opacity:0;inset:0;cursor:pointer}
.lf__how span{display:inline-flex;align-items:center;gap:var(--sp-sm);padding:9px 16px 9px 12px;border:1px solid var(--line);border-radius:99px;background:var(--paper);font-size:14px;font-weight:500;transition:border-color 0.3s,box-shadow 0.3s}
.lf__how span img{width:22px;height:22px}
.lf__how input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.lf__how input:focus-visible+span{outline:2px solid var(--bronze);outline-offset:2px}
.lf__ok{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--mute)}
.lf__ok input{margin-top:3px;accent-color:var(--ink)}
.btn{padding:17px 26px;border:0;background:var(--bronze);font-weight:500;letter-spacing:0.04em;color:var(--on);cursor:pointer;transition:background 0.3s}
.btn:hover{background:var(--ink)}
.lf__done{margin:0;font-size:14px;color:var(--bronze)}

.ftr{padding:28px 0 40px;background:var(--ink);font-size:13px;color:var(--on2)}
.ftr__in{display:flex;justify-content:space-between;gap:var(--sp-lg);flex-wrap:wrap}
.ftr p{margin:0;max-width:72ch}
.ftr b{color:var(--on);font-weight:500}

/* ---------- Просмотрщик сравнения ---------- */
.lb{position:fixed;z-index:80;inset:0;display:grid;place-items:center;align-content:center;gap:18px;padding:20px;background:oklch(0.14 0.012 55 / 0.94)}
.lb[hidden]{display:none}
.lb__fig{position:relative;height:min(80svh,1000px);aspect-ratio:3/4;max-width:calc(100vw - 40px);margin:0;overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none}
.lb__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.lb__fig .cmp__seam{opacity:1}
.lb__x{position:absolute;top:14px;right:14px;width:48px;height:48px;border:1px solid oklch(0.97 0.008 80 / 0.3);background:none;font-size:26px;line-height:1;color:var(--on);cursor:pointer}
.lb__range{width:min(420px,80vw)}
.lb__range input{width:100%;height:28px;accent-color:var(--bronze2);touch-action:none;cursor:grab}
.lb__range input:active{cursor:grabbing}

/* Появление блоков при прокрутке */
.rv{opacity:0;transform:translateY(28px);transition:opacity 0.8s var(--ease),transform 0.9s var(--ease)}
.rv.is-in{opacity:1;transform:none}

@media (max-width:1100px){
.types__grid{grid-template-columns:minmax(0,1fr)}
.ready__list li{grid-template-columns:44px minmax(0,1fr);row-gap:4px}
.ready__list li>span{grid-column:2}
.pair__txt{padding:var(--sp-xl) clamp(24px,4vw,56px)}
}

@media (max-width:900px){
.hdr__nav{display:none}
.hdr__cta{margin-left:auto}
.ready__in,.lead__in{grid-template-columns:minmax(0,1fr)}
.facts__dl{grid-template-columns:repeat(2,minmax(0,1fr))}
.facts__dl>div:nth-child(3){padding-left:0;border-left:0}
.facts__dl>div:nth-child(n+3){border-top:1px solid var(--line)}
}

/* Телефон: всё на весь экран, текст внизу на затемнении */
@media (max-width:767px){
.room,.film{height:calc(var(--len,260) * 0.8svh)}
.room--full .cmp::after,.room--pair .cmp::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,oklch(0.16 0.014 55 / 0.86),oklch(0.16 0.014 55 / 0.3) 46%,transparent 62%),linear-gradient(180deg,oklch(0.16 0.014 55 / 0.55),transparent 26%);pointer-events:none}
.scene__intro{top:auto;bottom:calc(110px + env(safe-area-inset-bottom));left:16px;right:16px;transform:translateY(calc(var(--p) * -700px));max-width:none}
.h-hero{font-size:46px}
.caps{left:16px;bottom:calc(64px + env(safe-area-inset-bottom));width:calc(100% - 32px);height:170px}
.cap__t{font-size:52px}
.meter{top:84px;bottom:auto;right:16px}
.meter b{font-size:56px}
.rail{left:16px;right:16px;bottom:calc(24px + env(safe-area-inset-bottom))}
.rail li{font-size:0;padding-top:0;height:10px}
.room--pair .room__stage{display:block}
.room--pair .cmp{position:absolute;inset:0}
.pair__txt{position:absolute;z-index:3;left:16px;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));padding:0;color:var(--on)}
.pair__n{margin-bottom:var(--sp-sm);font-size:56px;color:var(--bronze2)}
.pair__n span{color:var(--on2)}
.pair__txt .h-sec{margin-bottom:var(--sp-md);font-size:32px;color:var(--on)}
.pair__dl{gap:0}
.pair__dl div{border:0;padding:0;grid-template-columns:minmax(0,1fr)}
.pair__dl dt{display:none}
.pair__dl dd{color:var(--on2);font-size:15px}
.room--pair:not(.is-will) .pair__will,.room--pair.is-will .pair__now{display:none}
.pair__bar{margin-top:var(--sp-md);color:var(--on2)}
.pair__bar b{color:var(--on)}
.pair__bar i{background:oklch(0.97 0.008 80 / 0.25)}
.cmp__tag{top:16px;bottom:auto}
.cmp__tag--a{right:16px}
.cmp__tag--b{left:16px}
.more__head{flex-direction:column;align-items:flex-start}
.gcard{flex-basis:78vw}
}

@media (prefers-reduced-motion:reduce){
.rv{opacity:1;transform:none;transition:none}
.cap__t,.cap__d span,.cap__n{transition:none}
.room--kb .cmp__st{transform:none}
}

/* Первый экран: заголовок и шапка проявляются при загрузке */
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.room--hero .scene__intro .kicker{animation:rise 1s var(--ease) 0.2s both}
.room--hero .scene__intro .h-hero{animation:rise 1.2s var(--ease) 0.35s both}
.hdr{animation:rise 1s var(--ease) 0.6s both}
.room--hero .rail,.room--hero .meter{animation:rise 1s var(--ease) 0.9s both}
@media (prefers-reduced-motion:reduce){.room--hero .scene__intro .kicker,.room--hero .scene__intro .h-hero,.hdr,.room--hero .rail,.room--hero .meter{animation:none}}

/* ---------- WOLF & CODE: переключатель языка и плашка концепта ---------- */
.lang{display:flex;align-items:center;gap:2px;font:500 12px/1 var(--text);letter-spacing:0.14em}
.lang a,.lang span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 8px;text-decoration:none;color:var(--on2);transition:color 0.3s}
.lang a:hover{color:var(--on)}
.lang span{color:var(--on);border-bottom:1px solid var(--bronze2)}
.ftr__by{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border:1px solid oklch(0.97 0.008 80 / 0.22);font-size:12px;letter-spacing:0.08em;text-decoration:none;color:var(--on2);white-space:nowrap;transition:border-color 0.3s,color 0.3s}
.ftr__by:hover{border-color:var(--bronze2);color:var(--on)}
.ftr__by i{width:6px;height:6px;border-radius:50%;background:var(--bronze2)}
.ftr__by b{color:var(--on);font-weight:500}
@media (max-width:900px){
.lang{margin-left:auto}
.hdr__cta{margin-left:0}
}
@media (max-width:767px){
.hdr{gap:10px}
.lang a,.lang span{min-width:32px;padding:0 6px}
.hdr__cta{padding:10px 14px;font-size:12px}
}