/* Каталог «Пока нет дома» v2. Mobile-first. Решения — docs/08-design-shturm-v2.md */

@font-face{font-family:"Druk Cyr";src:url(fonts/DrukCyr-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#F3EFE7; --paper-2:#E9E2D6; --cream:#FBF8F2; --ink:#1D1A17; --ink-2:#3A3530; --muted:#7D756B; --hair:#D9CFC1;
  --brown:#685141; --brown-l:#B38C6D; --brown-d:#4E3C30;
  --green:#347554; --green-l:#54A256; --green-d:#26573E;
  --blue:#005F99; --blue-l:#3094D2; --blue-d:#00476F;
  --night:#2A2623;
  --accent:var(--brown); --accent-l:var(--brown-l); --accent-d:var(--brown-d);
  --gut:20px; --max:1680px;
  --f-text:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-druk:"Druk Cyr","Arial Narrow",Impact,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
.accent-brown{--accent:var(--brown);--accent-l:var(--brown-l);--accent-d:var(--brown-d)}
.accent-green{--accent:var(--green);--accent-l:var(--green-l);--accent-d:var(--green-d)}
.accent-blue{--accent:var(--blue);--accent-l:var(--blue-l);--accent-d:var(--blue-d)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;background:var(--paper)}
body{background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--f-text);overflow-x:clip}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-style:normal}
:focus-visible{outline:2px solid var(--accent-l);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:100}
.skip:focus{left:8px}
.nb{white-space:nowrap}

.wrap{padding-left:var(--gut);padding-right:var(--gut);max-width:var(--max);margin-left:auto;margin-right:auto}
.druk{font-family:var(--f-druk);font-weight:500;letter-spacing:.01em;line-height:.9}
.cap{font-size:12px;line-height:1.4;color:var(--muted);letter-spacing:.02em}
.light{color:var(--cream)!important}
.kicker{font-size:13px;line-height:1.3;color:var(--muted)}
.kicker.light{color:rgba(251,248,242,.82)!important}
.p-n{margin-right:.5em;font-variant-numeric:tabular-nums;opacity:.7}
.sec-title{font-size:min(14vw,64px);max-width:12em;text-wrap:balance}
h1,h2,h3,.p-lead,.chapter-lead,.about-text,.fear-q{text-wrap:balance}
p{text-wrap:pretty}
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:block}

/* полосы цвета бренда */
.band{position:relative;color:var(--cream);overflow:hidden}
.band-brown{background:var(--brown)}
.band-green{background:var(--green)}
.band-blue{background:var(--blue)}
.band-night{background:var(--night)}
.band .cap,.band .kicker{color:rgba(251,248,242,.7)}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:0 22px;background:var(--cream);color:var(--ink);text-decoration:none;font-weight:500;font-size:16px;transition:background .3s,color .3s}
.btn i{font-style:normal;transition:transform .4s var(--ease)}
.btn:hover i{transform:translateX(5px)}
.btn:hover{background:#fff}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:var(--brown)}
.link{display:inline-flex;align-items:baseline;gap:.5em;text-decoration:none;font-weight:500;font-size:15px}
.link u{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px}
.link i{font-style:normal}

/* ---------- верхняя полоса ---------- */
.topbar{position:fixed;left:0;top:0;z-index:40;padding:calc(12px + env(safe-area-inset-top)) var(--gut) 0;pointer-events:none}
@property --lc{syntax:"<color>";inherits:true;initial-value:#005F99}
.topbar-logo{pointer-events:auto;position:relative;display:block;width:46px;aspect-ratio:260.4/291.76;transition:transform .5s var(--ease);animation:brandcycle 12s ease-in-out infinite}
.topbar-logo:hover{transform:scale(1.06) rotate(-2deg)}
@keyframes brandcycle{0%,22%{--lc:#005F99}33%,55%{--lc:#347554}66%,88%{--lc:#685141}100%{--lc:#005F99}}
.logo-glass{position:absolute;inset:0;clip-path:polygon(82.63% 19.41%,82.63% 0,0 19.23%,0 84.63%,17.34% 84.63%,17.34% 100%,100% 100%,100% 15.38%);background:var(--lc);transition:background-color .6s var(--ease),-webkit-backdrop-filter .6s,backdrop-filter .6s}
.logo-glass::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.25) 100%);opacity:0;transition:opacity .6s}
.brand-letters{position:absolute;inset:0;width:100%;height:100%;transition:filter .6s}
.topbar-logo::before{content:"";position:absolute;inset:6% 0 -4% 0;background:rgba(0,0,0,.22);filter:blur(10px);clip-path:none;z-index:-1;border-radius:20%;opacity:.7;transition:opacity .6s}
/* во время прокрутки знак становится «жидким стеклом»: видно, что под ним, цвет бренда остаётся лёгким оттенком */
.scrolling .logo-glass{background:color-mix(in srgb,var(--lc) 34%,rgba(255,255,255,.08));-webkit-backdrop-filter:blur(12px) saturate(1.8);backdrop-filter:blur(12px) saturate(1.8)}
.scrolling .logo-glass::after{opacity:1}
.scrolling .brand-letters{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.scrolling .topbar-logo::before{opacity:.15}
.logo{width:28px;height:auto}
.logo-mark{fill:currentColor}

/* ---------- обложка ---------- */
.cover{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--night);color:var(--cream)}
.cover-media{position:absolute;inset:0}
.cover-media picture,.p-hero picture{display:contents}
@media (max-width:899px){.cover-media{--focus:50%}}
.cover-media img,.p-hero img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50%) 50%}
.cover-media canvas,.p-hero canvas,.cover-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s}
.cover-video{transition-duration:.15s}
.cover-media canvas.on,.p-hero canvas.on,.cover-video.on{opacity:1}
.cover::after{content:"";position:absolute;inset:auto 0 0 0;height:65%;background:linear-gradient(to top,rgba(20,16,12,.75),rgba(20,16,12,0));pointer-events:none}
.cover-text{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:max(28px,env(safe-area-inset-bottom))}
.cover-kicker{font-size:12px;letter-spacing:.06em;opacity:.8;margin-bottom:14px}
.cover-title{font-size:min(19vw,96px);line-height:.86}
.cover-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:22px}
.cover-lead{font-size:14px;line-height:1.4;opacity:.9}
.cover-price{font:500 20px/1 var(--f-text);white-space:nowrap}
.cover-price small{font-size:13px;opacity:.75;margin-right:4px}

/* ---------- цифры ---------- */
.stats{background:var(--night);color:var(--cream);padding:34px 0}
.stats-in{display:grid;grid-template-columns:1fr 1fr;gap:26px 16px}
.stat b{display:block;font-size:44px;color:var(--brown-l)}
.stat span{display:block;margin-top:8px;font-size:13px;line-height:1.35;color:rgba(251,248,242,.72)}

/* ---------- навигатор: карточки ---------- */
.index{padding:84px 0 70px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.flt{font-size:13px;padding:9px 14px;border:1px solid var(--hair);color:var(--ink-2);transition:background .25s,color .25s,border-color .25s}
.flt.is-on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.cards{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:28px var(--gut) 6px;scrollbar-width:none}
.cards::-webkit-scrollbar{display:none}
.card{flex:0 0 70%;scroll-snap-align:start}
.card[hidden]{display:none}
.card a{display:block;text-decoration:none}
.card-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);margin-bottom:14px;position:relative}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card a:hover .card-img img{transform:scale(1.05)}
.card-name{display:block;font-size:34px}
.card-price{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:baseline;gap:5px;padding:8px 12px 7px;background:var(--accent);color:var(--cream);font:500 15px/1 var(--f-text);letter-spacing:-.01em;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .5s var(--ease)}
.card-price small{font-size:12px;opacity:.8}
.card a:hover .card-price{transform:translateY(-3px)}
.index-empty{color:var(--muted);margin-top:20px}

/* ---------- о компании ---------- */
.about{padding:20px 0 0;overflow:hidden}
.about-text{font:400 25px/1.25 var(--f-text);letter-spacing:-.02em;max-width:24em}
.about-text em{font:500 1.5em/.9 var(--f-druk);letter-spacing:.01em;color:var(--brown);white-space:nowrap}
.about-sub{margin-top:22px;font-size:14px;color:var(--muted);max-width:30em}
.about-strip{margin-top:48px;overflow:hidden}
.about-track{display:flex;gap:10px;width:max-content;animation:marq 80s linear infinite}
.about-track img{height:220px;width:auto;aspect-ratio:4/5;object-fit:cover}
@keyframes marq{to{transform:translateX(-50%)}}
.about-strip{padding:26px 0 34px}
.about-track{gap:22px}
.polaroid{flex:none;background:#FFFDF8;padding:9px 9px 34px;box-shadow:0 10px 26px rgba(60,40,20,.16),0 1px 3px rgba(60,40,20,.12);transform:rotate(var(--r,0deg))}
.polaroid img{display:block;height:230px;width:auto;aspect-ratio:4/5;object-fit:cover}

/* ---------- сезоны ---------- */
.seasons{position:relative;background:var(--night)}
/* шторка «было/стало»: человек сам двигает границу пальцем или мышью */
.cmp{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--night);touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.cmp figure{position:absolute;inset:0;margin:0}
.cmp img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp-b{clip-path:inset(0 0 0 var(--p))}
.cmp-handle{position:absolute;z-index:2;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:var(--cream);box-shadow:0 0 12px rgba(0,0,0,.35)}
.cmp-handle i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--cream);color:var(--ink);display:grid;place-items:center;font:500 18px/1 var(--f-text);font-style:normal;letter-spacing:2px;box-shadow:0 6px 22px rgba(0,0,0,.3);transition:transform .3s var(--ease)}
.cmp.drag .cmp-handle i{transform:scale(1.12)}
.cmp-l,.cmp-r{position:absolute;z-index:2;bottom:14px;padding:6px 10px;background:rgba(20,16,12,.55);color:var(--cream);font-size:12px;font-weight:500;letter-spacing:.03em;pointer-events:none}
.cmp-l{left:12px}.cmp-r{right:12px}

/* ---------- процесс ---------- */
.process{padding:96px 0 90px}
.band-mark{position:absolute;right:-12%;top:-8%;width:62%;color:rgba(0,0,0,.12);pointer-events:none}
.track{position:relative;margin-top:44px;display:grid;gap:36px;padding-left:28px}
.track-line{position:absolute;left:4px;top:8px;bottom:8px;width:1px;height:auto;background:var(--brown-l);transform-origin:top}
.track-line line{display:none}
.stop{position:relative}
.stop::before{content:"";position:absolute;left:-28px;top:10px;width:9px;height:9px;border-radius:50%;background:var(--brown-l)}
.stop-big{font-size:52px;margin-bottom:10px}
.stop p:not(.stop-big){color:rgba(251,248,242,.82);max-width:24em}

/* ---------- стена ---------- */
.wall{position:relative;background:var(--paper-2)}
.wall-pin{padding-top:96px;padding-bottom:96px}
.wall-lead{margin-top:16px;max-width:26em;color:var(--ink-2)}
.wall{background:#F2E9DD}
.wall-fig{position:relative;margin-top:32px}
.wall-fig img{width:100%;height:auto}
.spot{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--ink);color:var(--cream);font:500 12px/26px var(--f-text);text-align:center;box-shadow:0 0 0 4px rgba(242,233,221,.85)}
.spot.on{background:var(--brown)}
.layers{margin-top:26px;display:grid;gap:2px;counter-reset:l}
.layer{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--hair);transition:opacity .4s}
.layer-n{width:24px;height:24px;border-radius:50%;border:1px solid var(--ink);font:500 12px/22px var(--f-text);text-align:center;margin-top:1px;transition:background .4s,color .4s,border-color .4s}
.layer.on .layer-n{background:var(--brown);border-color:var(--brown);color:var(--cream)}
.layer-text{display:flex;flex-direction:column;font-size:15px;line-height:1.3}
.layer-text b{font-weight:500}
.layer-text span{color:var(--muted);font-size:13px;margin-top:2px}

.fears{padding:96px 0 90px}
.fears-kicker{max-width:30em;margin-bottom:18px;color:rgba(251,248,242,.75);font-size:15px}
.fears-title{font-size:min(11vw,60px);max-width:11em}
.fear-list{margin-top:40px;display:grid;gap:30px}
.fear{border-top:1px solid rgba(251,248,242,.25);padding-top:16px}
.fear-n{font-size:12px;letter-spacing:.04em;color:var(--brown-l)}
.fear-q{font:500 34px/.95 var(--f-druk);letter-spacing:.01em;text-transform:uppercase;margin-top:8px}
.fear-dl{margin-top:14px;display:grid;gap:10px}
.fear-dl dt{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:rgba(251,248,242,.55)}
.fear-dl dd{margin-top:3px;color:rgba(251,248,242,.88);max-width:26em}
.fear-get dd{color:var(--cream);font-weight:500}

/* ---------- что входит ---------- */
.included{padding:96px 0 110px;overflow:hidden}
.incl-lead{margin-top:16px;max-width:30em;color:var(--ink-2)}
.mind-hint{color:var(--muted)}
.mind{position:relative;margin:24px auto 0;max-width:1400px;display:flex;flex-wrap:wrap;gap:8px;padding:0 var(--gut)}
.mind-node{font-size:14px;line-height:1.25;padding:8px 12px;background:var(--cream);border:1px solid var(--hair);color:var(--ink)}
.mind-node.is-root{background:var(--ink);color:var(--cream);border-color:var(--ink);font:500 22px/.95 var(--f-druk);letter-spacing:.02em;padding:14px 16px 12px}
.mind-node.is-branch{background:var(--accent);border-color:var(--accent);color:var(--cream);font:500 20px/.95 var(--f-druk);letter-spacing:.03em;text-transform:uppercase;padding:11px 14px 9px}
.mind-node.is-leaf{border-left:3px solid var(--accent)}
.mind-lines{display:none}
.js .mind{display:block;height:900px;padding:0}
.js .mind-lines{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.mind-lines path{stroke-width:1.5}
.js .mind-node{position:absolute;left:0;top:0;max-width:calc(50vw - 47px);will-change:transform;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;box-shadow:0 4px 16px rgba(60,40,20,.08);opacity:0}
.js .mind-node.is-root,.js .mind-node.is-branch{max-width:none;white-space:nowrap}
.mind-node.drag{cursor:grabbing;box-shadow:0 10px 30px rgba(60,40,20,.22);z-index:3}
.incl-more{margin-top:40px;max-width:720px}
.incl-more .qa summary{font-size:18px}
.dash{display:grid;gap:10px;padding:0 0 22px}
.dash li{padding-left:20px;position:relative;color:var(--ink-2)}
.dash li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--brown)}
.dash.ask li{font-weight:500;color:var(--ink)}

/* ---------- главы ---------- */
.chapter-wrap{padding-bottom:40px}
.chapter{position:relative;padding:130px var(--gut) 90px;text-align:center;overflow:hidden}
.chapter-mark{position:absolute;left:50%;top:50%;width:min(90vw,700px);transform:translate(-50%,-50%);color:var(--accent);opacity:.22;pointer-events:none}
.chapter-n{position:relative;font-size:13px;letter-spacing:.08em;opacity:.75}
.chapter-title{position:relative;font-size:min(16vw,120px);margin:14px auto 0;max-width:9em}
.chapter-lead{position:relative;margin:22px auto 0;max-width:26em;color:rgba(251,248,242,.85)}

/* ---------- проект ---------- */
.proj{position:relative;padding:40px 0 70px}
.proj+.proj{border-top:1px solid rgba(251,248,242,.14)}
.hero{position:relative;height:88svh;min-height:520px}
.hero .p-hero{position:absolute;inset:0;overflow:hidden;background:var(--accent-d)}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(16,13,10,.65),transparent);pointer-events:none;z-index:1}
.hero-title{position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:26px}
.hero-title .kicker{margin-bottom:10px}
.p-name{font-size:min(24vw,150px);color:var(--cream)}
.intro{padding-top:44px;display:grid;gap:28px}
.p-lead{font:400 22px/1.3 var(--f-text);letter-spacing:-.015em;max-width:24em}
.facts{display:grid;gap:0;border-top:1px solid rgba(251,248,242,.22)}
.rooms{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px}
.rooms li{display:flex;align-items:center;gap:8px;font-size:14px}
.rooms svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.facts div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid rgba(251,248,242,.22)}
.facts dt{font-size:14px;opacity:.7}
.facts dd{font-size:17px;font-weight:500;text-align:right}

.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:44px}
.tile{position:relative;overflow:hidden;background:var(--accent-d)}
.tile img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.tile-1{grid-column:1/3}
.tile-1 img{aspect-ratio:4/3}
.tile figcaption{position:absolute;left:10px;bottom:10px;font-size:12px;font-weight:500;padding:5px 9px;background:rgba(20,16,12,.55);color:var(--cream);letter-spacing:.03em}

.dusk{margin-top:44px;position:relative}
.dusk-still{position:relative;margin:0}
.dusk-still img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.dusk-still figcaption{position:absolute;left:12px;bottom:14px;padding:6px 10px;background:rgba(20,16,12,.55);color:var(--cream);font-size:12px;font-weight:500}

.buy-row{margin-top:44px;display:grid;gap:36px}
.plan-card{background:var(--cream);color:var(--ink);padding:18px 14px 14px}
.plan-card .cap{color:var(--muted)}
.plans{display:grid;gap:22px;margin-top:10px}
.plan-floor{font-size:13px;font-weight:500;margin-bottom:6px}
.plan-open{display:block;width:100%;position:relative;text-align:left;cursor:zoom-in}
.plan-svg{display:grid;width:100%}
.plan-svg img{grid-area:1/1;width:100%;height:100%;object-fit:contain}
.plan-zoom{display:block;text-align:right;font-size:12px;color:var(--muted);margin-top:4px}

.price-big{font:500 36px/1.05 var(--f-text);letter-spacing:-.03em}
.price-big small,.price-sub small{display:block;font:400 13px/1.4 var(--f-text);letter-spacing:0;opacity:.75;margin-bottom:6px}
.price-sub{margin-top:18px;padding-top:16px;border-top:1px solid rgba(251,248,242,.25);font:500 22px/1.1 var(--f-text);letter-spacing:-.02em}
.price-var{margin-top:10px;font-size:14px;opacity:.75}
.acts{display:flex;flex-direction:column;align-items:stretch;gap:16px;margin-top:24px}
.acts .link{align-self:flex-start}
.facade{margin-bottom:22px}
.facade-cap{font-size:12px;opacity:.7;margin-bottom:8px}
.facade-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.facade-btn{min-height:44px;padding:8px 10px;border:1px solid rgba(251,248,242,.4);color:var(--cream);font-size:13px;line-height:1.25;text-align:left;transition:background .3s,color .3s}
.facade-btn.is-on{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid rgba(251,248,242,.45)}
.btn-ghost:hover{background:rgba(251,248,242,.1)}
.watch summary{list-style:none;cursor:pointer;width:100%}
.watch summary::-webkit-details-marker{display:none}
.watch summary span{display:flex;align-items:center;gap:12px}
.watch summary b{font-weight:400;font-size:22px;transition:transform .4s var(--ease)}
.watch[open] summary b{transform:rotate(45deg)}
.watch-play{position:relative;flex:none;width:26px;height:26px;border-radius:50%;background:var(--cream)}
.watch-play::after{content:"";position:absolute;left:10px;top:7px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent var(--accent)}
.watch-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.watch-opts a{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 16px;background:rgba(251,248,242,.12);text-decoration:none;font-weight:500;font-size:15px;transition:background .3s}
.watch-opts a:hover{background:rgba(251,248,242,.22)}
.watch-opts a i{font-style:normal;opacity:.7}
.watch-opts a:only-child{grid-column:1/3}
.mort{margin-top:20px;font-size:13px;opacity:.7;max-width:26em}

/* ---------- ещё проекты ---------- */
.more{padding:110px 0 80px}
.more-lead{margin-top:14px;color:var(--ink-2);max-width:26em}
.more-list{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:28px var(--gut) 6px;scrollbar-width:none}
.more-list::-webkit-scrollbar{display:none}
.more-list li{flex:0 0 62%;scroll-snap-align:start}
.more-list a{display:block;text-decoration:none}
.more-img{display:block;aspect-ratio:4/3;overflow:hidden;margin-bottom:10px;background:var(--paper-2)}
.more-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.more-list a:hover img{transform:scale(1.05)}
.more-name{display:block;font-size:30px}
.more-price{display:block;font-size:14px;font-weight:500;margin-top:4px;color:var(--ink-2)}

/* ---------- видеоотзывы ВК: блок закрепляется, ролики едут вбок ---------- */
.vk{padding:0}
.vk-pin{position:relative;padding:80px 0 90px;overflow:hidden}
.vk-arrows{display:none;gap:10px;margin-top:18px}
.vk-arrow{width:48px;height:48px;border:1px solid rgba(251,248,242,.45);color:var(--cream);font-size:20px;transition:background .3s}
.vk-arrow:hover{background:rgba(251,248,242,.12)}
.vk-list{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.vk-lead{margin-top:14px;max-width:28em;color:rgba(251,248,242,.82);font-size:15px}
.vk-list{display:flex;gap:14px;padding:28px var(--gut) 0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;width:100%}
.vk-list::-webkit-scrollbar{display:none}
.vk-list li{flex:0 0 min(80vw,420px);scroll-snap-align:start}
.vk-list a{display:block;text-decoration:none;color:var(--cream)}
.vk-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--brown-d);border-radius:2px}
.vk-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.vk-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,22,16,.55),rgba(30,22,16,0) 45%)}
.vk-list a:hover img{transform:scale(1.04)}
.vk-play{position:absolute;z-index:1;left:16px;bottom:16px;width:56px;height:56px;border-radius:50%;background:var(--cream);box-shadow:0 8px 26px rgba(0,0,0,.28);transition:transform .45s var(--ease)}
.vk-play::after{content:"";position:absolute;left:22px;top:18px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent var(--brown)}
.vk-list a:hover .vk-play{transform:scale(1.12)}
.vk-dur{position:absolute;z-index:1;right:12px;bottom:14px;font-size:13px;font-weight:500;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.vk-title{display:block;margin-top:14px;font-size:17px;font-weight:500;line-height:1.3;max-width:22em}
.vk-more{display:flex;flex-direction:column;gap:14px;flex-basis:min(60vw,260px)!important}
.vk-more a{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:20px;border:1px solid rgba(251,248,242,.35);transition:background .3s}
.vk-more a:hover{background:rgba(251,248,242,.08)}
.vk-more .druk{font-size:38px}

/* ---------- покупка, вопросы ---------- */
.buy{padding:96px 0 50px}
.buy-text{margin-top:24px;display:grid;gap:16px;max-width:34em}
.buy-text p{color:var(--ink-2)}
.faq{padding:70px 0 110px}
.warranty{margin-top:22px;font-size:16px;line-height:1.5}
.warranty b{font-size:2.2em;color:var(--brown);line-height:1;margin-right:6px}
.faq-list{margin-top:36px}
.qa{border-top:1px solid var(--hair)}
.qa:last-child{border-bottom:1px solid var(--hair)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-size:17px;font-weight:500}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;width:14px;height:14px;flex:none}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink);transition:transform .4s var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0)}
.qa p{padding:0 0 20px;color:var(--ink-2);max-width:34em}

/* ---------- финал ---------- */
.final{position:relative;overflow:hidden;background:var(--night);color:var(--cream);padding:120px 0 calc(110px + env(safe-area-inset-bottom))}
.final-bg{position:absolute;inset:0}
.final-bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.final::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,12,.92) 25%,rgba(20,16,12,.3));z-index:1}
.final-mark{position:absolute;right:-18%;top:-6%;width:78%;color:rgba(255,255,255,.06);pointer-events:none;z-index:1}
.final-logo{width:100%}
.final-in{position:relative;z-index:2}
.final-title{font-size:min(15vw,110px);max-width:8em}
.final-cta{margin-top:40px;width:100%;max-width:520px;min-height:64px;font-size:18px}
.final-lead{margin-top:22px;max-width:30em;font-size:16px;line-height:1.5;color:rgba(251,248,242,.85)}
.p-badge{display:inline-block;margin-bottom:12px;padding:6px 10px 5px;background:var(--accent-l);color:#fff;font:500 13px/1 var(--f-druk);letter-spacing:.08em}
.final-acts{display:grid;gap:10px;margin-top:40px;max-width:520px}
.final-acts .final-cta{margin-top:0}
.to-top{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin-top:22px;font-size:14px;color:var(--cream);text-decoration:none;opacity:.85}
.to-top i{font-style:normal;font-size:18px}
.to-top small{font-size:13px;opacity:.65}
.to-top:hover{opacity:1}
.final-cols{display:grid;gap:18px;margin-top:40px;font-size:14px;color:rgba(251,248,242,.78);max-width:36em}
.final-cols p{text-wrap:balance}
.final-cols b{color:var(--cream);font-weight:500}

/* ---------- липкая, cookie, зум ---------- */
.sticky-cta{position:fixed;z-index:50;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:0 18px;background:var(--accent);color:var(--cream);text-decoration:none;font-size:15px;font-weight:500;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease),background .5s}
.sticky-cta.on{opacity:1;transform:none;pointer-events:auto}
.sticky-cta i{font-style:normal}
.cookie{position:fixed;z-index:60;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--cream);font-size:11px;line-height:1.35;color:var(--ink-2);box-shadow:0 4px 20px rgba(0,0,0,.12)}
.cookie[hidden],.gleb[hidden]{display:none}
.cookie-ok{flex:none;font-weight:500;font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.gleb{position:fixed;z-index:61;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));padding:16px 16px 16px;background:var(--cream);color:var(--ink);box-shadow:0 18px 50px rgba(20,16,12,.3);transform-origin:20% 100%}
.gleb-x{position:absolute;right:6px;top:4px;width:40px;height:40px;font-size:26px;line-height:1;color:var(--muted)}
.gleb-who{display:flex;align-items:center;gap:12px;padding-right:30px}
.gleb-ava{flex:none;width:44px;height:44px;border-radius:50%;background:var(--brown);display:grid;place-items:center}
.gleb-ava .logo{width:20px;color:var(--cream)}
.gleb-who p{display:flex;flex-direction:column;font-size:12px;line-height:1.3;color:var(--muted)}
.gleb-who b{font-size:15px;color:var(--ink);font-weight:500}
.gleb-typing{display:flex;gap:4px;margin:14px 0 2px;height:16px;align-items:center}
.gleb-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:dots 1s infinite ease-in-out}
.gleb-typing i:nth-child(2){animation-delay:.15s}.gleb-typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,100%{opacity:.25;transform:none}50%{opacity:1;transform:translateY(-3px)}}
.gleb-text{margin-top:12px;font-size:15px;line-height:1.45;padding:12px 14px;background:var(--paper);border-radius:2px 14px 14px 14px}
.gleb.typing .gleb-text,.gleb.typing .gleb-acts{display:none}
.gleb:not(.typing) .gleb-typing{display:none}
.gleb.mini{left:auto;right:12px;width:60px;height:60px;padding:0;border-radius:50%;cursor:pointer;overflow:hidden;background:var(--brown)}
.gleb.mini>*:not(.gleb-who),.gleb.mini .gleb-who p{display:none}
.gleb.mini .gleb-who{padding:0;width:60px;height:60px;justify-content:center}
.gleb.mini .gleb-ava{width:60px;height:60px}
.gleb.mini::after{content:"1";position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#E5533D;color:#fff;font:600 11px/18px var(--f-text);text-align:center}
.gleb-acts{display:flex;align-items:center;gap:18px;margin-top:14px}
.gleb-acts .btn{min-height:46px;padding:0 18px;font-size:15px}
.zoom{border:0;padding:0;max-width:none;max-height:none;width:100vw;height:100dvh;background:var(--cream)}
.zoom::backdrop{background:rgba(20,16,12,.6)}
.zoom-close{position:fixed;top:10px;right:12px;z-index:2;width:44px;height:44px;font-size:30px;line-height:1;background:var(--ink);color:var(--cream)}
.zoom-body{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch;display:grid;place-items:center;padding:60px 16px}
.zoom-body img{width:260vw;max-width:none;height:auto}

.js [data-reveal]{opacity:0;transform:translateY(26px)}

/* ======================= десктоп ======================= */
@media (min-width:900px){
  :root{--gut:48px}
  .grid12{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
  .topbar{padding-top:22px}
  .topbar-logo{width:58px}
  .sec-title{font-size:min(8vw,120px)}

  /* заголовок слева, подпись и цена справа в одну линию — терраса и крыльцо дома остаются открытыми */
  .cover-text{bottom:48px;display:grid;grid-template-columns:auto 1fr;column-gap:56px;align-items:end}
  .cover-kicker{grid-column:1/-1}
  .cover-title{font-size:min(10.5vw,190px,22vh);line-height:.82;margin-left:-.02em}
  .cover-meta{flex-direction:column;align-items:flex-end;justify-self:end;text-align:right;gap:14px;margin:0 0 .3em}
  .cover-lead{font-size:16px}
  .cover-price{font-size:28px}
  .cover::after{height:45%}

  .stats{padding:48px 0}
  .stats-in{grid-template-columns:repeat(4,1fr);gap:24px}
  .stat b{font-size:76px}

  .index{padding:150px 0 110px}
  .index-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
  .filters{margin-top:0;justify-content:flex-end;max-width:640px}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px;overflow:visible;padding:56px var(--gut) 0;max-width:var(--max);margin:0 auto}
  .card-name{font-size:48px}
  .card-price{left:16px;bottom:16px;font-size:18px;padding:10px 14px 9px}

  .about{padding:60px 0 0}
  .about-in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
  .about-text{grid-column:1/10;font-size:48px;line-height:1.12;letter-spacing:-.035em}
  .about-sub{grid-column:9/13;font-size:15px;margin-top:32px}
  .about-strip{margin-top:90px}
  .about-track img{height:340px}
  .polaroid{padding:12px 12px 46px}
  .about-track{gap:34px}


  .process{padding:170px 0 160px}
  .track{grid-template-columns:repeat(3,1fr);gap:48px;padding-left:0;padding-top:42px;margin-top:72px}
  .track-line{left:0;right:0;top:4px;bottom:auto;width:auto;height:1px;transform-origin:left}
  .stop::before{left:0;top:-42px}
  .stop-big{font-size:96px}

  .wall-pin{min-height:100vh;padding-top:90px;padding-bottom:60px;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr;column-gap:32px;align-content:center}
  .wall-head{grid-column:1/5;grid-row:1}
  .wall-head .sec-title{font-size:min(6vw,96px)}
  .wall-fig{grid-column:5/13;grid-row:1/3;margin-top:0;align-self:center;width:min(100%,calc((100vh - 120px) * 1.34));justify-self:end}

  .layers{grid-column:1/5;grid-row:2;margin-top:24px;align-self:start}
  .layer{padding:8px 0}
  .layer-text{font-size:16px}
  .spot{width:32px;height:32px;margin:-16px 0 0 -16px;font-size:14px;line-height:32px}

  .fears{padding:160px 0 150px}
  .fear-list{grid-template-columns:repeat(3,1fr);gap:56px 40px;margin-top:64px}
  .fear-q{font-size:48px}

  .included{padding:160px 0 160px}
  .js .mind{height:640px;margin-top:20px}
  .js .mind-node{max-width:220px;font-size:15px}
  .mind-node.is-root{font-size:34px;padding:18px 22px 15px}
  .mind-node.is-branch{font-size:26px}
  .incl-more{margin-top:56px;margin-left:auto;margin-right:auto}

  .chapter{padding:220px var(--gut) 160px}
  .chapter-title{font-size:min(11vw,200px)}
  .chapter-lead{font-size:18px}

  .proj{padding:60px 0 120px}
  .hero{height:100vh;margin:0 var(--gut)}
  .p-name{font-size:min(17vw,280px);line-height:.82}
  .hero-title{left:40px;bottom:40px}
  .intro{grid-template-columns:repeat(12,1fr);column-gap:24px;padding-top:80px}
  .p-lead{grid-column:1/7;font-size:32px;line-height:1.18;letter-spacing:-.025em}
  .facts dd{font-size:21px}
  .intro-side{grid-column:8/13;align-self:start}
  .is-flip .intro-side{grid-column:1/6;grid-row:1}
  .rooms li{font-size:15px}
  .is-flip .p-lead{grid-column:7/13;grid-row:1}

  .mosaic{grid-template-columns:repeat(12,1fr);gap:24px;margin-top:90px;align-items:start}
  .tile-1{grid-column:1/7;grid-row:1/3}
  .tile-1 img{aspect-ratio:4/5}
  .tile img{aspect-ratio:4/5}
  .tile-2{grid-column:7/10;margin-top:120px}
  .tile-3{grid-column:10/13}
  .is-flip .tile-1{grid-column:7/13}
  .is-flip .tile-2{grid-column:1/4;margin-top:0}
  .is-flip .tile-3{grid-column:4/7;margin-top:120px}
  .tile figcaption{left:16px;bottom:16px;font-size:13px}

  .dusk{margin:90px var(--gut) 0}
  .cmp{aspect-ratio:16/9;max-height:92vh;width:100%}
  .seasons .cmp{max-height:none}
  .dusk-still img{aspect-ratio:16/9;max-height:92vh}
  .cmp-l,.cmp-r{bottom:24px;font-size:14px;padding:8px 12px}
  .cmp-l{left:24px}.cmp-r{right:24px}

  .buy-row{grid-template-columns:repeat(12,1fr);column-gap:24px;margin-top:90px;align-items:center}
  .plan-card{grid-column:1/8;padding:28px 28px 20px}
  .plans.is-multi{grid-template-columns:1fr 1fr}
  .price{grid-column:9/13}
  .is-flip .plan-card{grid-column:6/13}
  .is-flip .price{grid-column:1/5;grid-row:1}
  .price-big{font-size:52px}
  .price-sub{font-size:26px}
  .acts{gap:18px}

  .more{padding:180px 0 120px}
  .more-list{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px;overflow:visible;padding:56px var(--gut) 0;max-width:var(--max);margin:0 auto}
  .more-name{font-size:44px}

  .vk-pin{padding:110px 0}
  .vk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
  .vk-lead{margin-top:0;max-width:26em;font-size:16px}
  .vk-arrows{display:flex}
  .vk-list{padding-top:48px;gap:24px}
  .vk-list li{flex-basis:clamp(360px,30vw,480px)}
  .vk-title{font-size:19px}

  .buy{padding:150px 0 70px}
  .buy .sec-title{grid-column:1/6}
  .buy-text{grid-column:7/12;margin-top:10px}
  .faq{padding:90px 0 180px}
  .faq-head{grid-column:1/6}
  .faq-list{grid-column:7/13;margin-top:10px}
  .qa summary{font-size:20px;padding:24px 0}

  .final{padding:220px 0}
  .final-mark{right:-6%;top:-12%;width:52%}
  .final-title{font-size:min(10vw,180px)}
  .final-cta{margin-top:64px;font-size:20px;min-height:72px}
  .final-cols{grid-template-columns:repeat(3,1fr);max-width:none;gap:40px;margin-top:80px}

  .sticky-cta{left:auto;right:24px;bottom:24px;min-width:300px}
  .cookie{left:24px;right:auto;bottom:24px;max-width:420px}
  .gleb{left:auto;right:24px;bottom:96px;width:400px;padding:20px}
  .zoom-body img{width:min(1600px,96vw)}
}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none}
  .about-track{animation:none}
  *{transition:none!important}
}