/* Лендинг ЖК «МУЗА». Палитра и типографика — из ARTDIRECTION-раздела PLAN.md,
каркас классов — по образцу портфеля (index.reference.html). Агентство не
упоминается нигде, включая комментарии, — правило №8 CLAUDE.md.
Шрифты подключены только через в (никогда @import — иначе
на мобильной сети это лишняя цепочка запросов и белый экран). */
:root{
--pearl: #F4F0E9; /* жемчуг — светлая база */
--graphite: #26211C; /* тёплый графит — тёмная база */
--accent: #8E3B34; /* красный клён — CTA, активные элементы */
--accent-deep: #6E2E29;/* акцент, затемнённый для hover */
--stone: #A08F7B; /* камень — тонкие линии, рубрики на тёмном, орнамент */
--stone-text: #786B5C; /* тот же камень, затемнён для контраста 4.5 на жемчуге (мелкий текст) */
--ink: #332C25; /* текст на светлом */
--cream: #EFE9DF; /* текст на тёмном */
--line: rgba(51,44,37,0.14);
--line-dark: rgba(239,233,223,0.16);
--radius: 6px;
--radius-card: 18px;
--shadow: 0 8px 30px rgba(38,33,28,0.08);
--ease: cubic-bezier(.22,.61,.36,1);
--maxw: 1360px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
background:var(--pearl);
color:var(--ink);
font-family:'Golos Text', sans-serif;
font-weight:400;
font-size:17px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block;}
figure{margin:0;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;}
h1,h2,h3,h4{
font-family:'Cormorant Garamond', serif;
font-weight:500;
margin:0;
line-height:1.08;
color:var(--ink);
}
.on-dark, .on-dark h2, .on-dark h3, .on-dark p{color:var(--cream);}
em{font-style:italic;font-weight:500;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px);}
section{position:relative;}
/* ---------- рубрика + графический мотив «линия мелодии» ---------- */
.eyebrow{
font-family:'Golos Text', sans-serif;
font-weight:600;
font-size:12px;
letter-spacing:0.22em;
text-transform:uppercase;
color:var(--stone-text);
display:block;
}
.on-dark .eyebrow{color:var(--stone);}
.motif{display:block;margin-top:12px;color:var(--stone);}
.motif path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;}
.on-dark .motif{color:var(--cream);opacity:0.5;}
.section-head{max-width:720px;margin-bottom:clamp(36px,5vh,56px);}
.section-head h2{font-size:clamp(30px,4.5vw,58px);margin-top:16px;}
.section-head p{margin-top:18px;font-size:16px;line-height:1.7;color:var(--ink);max-width:640px;}
.on-dark.section-head p,.section-head.on-dark p{color:rgba(239,233,223,0.78);}
/* ---------- фигуры / подписи ---------- */
figcaption{font-size:13px;color:var(--stone-text);margin-top:12px;line-height:1.5;}
.on-dark figcaption{color:rgba(239,233,223,0.6);}
.cap-overlay{
position:absolute;left:0;right:0;bottom:0;padding:18px 22px;margin:0;
background:linear-gradient(0deg, rgba(20,17,13,0.78) 0%, rgba(20,17,13,0) 100%);
color:var(--cream);font-size:13px;line-height:1.5;
}
/* ---------- кнопки ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:46px;
font-family:'Golos Text', sans-serif;font-weight:600;font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;
padding:13px 28px;border:1px solid currentColor;border-radius:var(--radius);
cursor:pointer;background:transparent;color:inherit;
transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
white-space:normal;text-align:center;
}
.btn-solid{background:var(--accent);border-color:var(--accent);color:var(--pearl);}
.btn-solid:hover{background:var(--accent-deep);border-color:var(--accent-deep);}
.btn-ghost-light{color:var(--accent);border-color:rgba(142,59,52,0.5);}
.btn-ghost-light:hover{background:var(--accent);color:var(--pearl);border-color:var(--accent);}
.btn-ghost-dark{color:var(--cream);border-color:rgba(239,233,223,0.4);}
.btn-ghost-dark:hover{background:var(--cream);color:var(--graphite);border-color:var(--cream);}
.btn-small{min-height:40px;padding:10px 20px;font-size:11.5px;}
/* ---------- nav ---------- */
.nav{
position:fixed;top:0;left:0;right:0;z-index:500;
display:flex;align-items:center;justify-content:space-between;
padding:22px clamp(20px,5vw,64px);
transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav .logo{font-family:'Cormorant Garamond', serif;font-size:22px;letter-spacing:0.06em;color:var(--cream);font-weight:500;}
.nav-actions{display:flex;align-items:center;gap:14px;}
.nav .btn{color:var(--cream);border-color:rgba(239,233,223,0.5);}
.nav .btn:hover{background:var(--cream);color:var(--graphite);border-color:var(--cream);}
.nav.scrolled{
padding:13px clamp(20px,5vw,64px);
background:rgba(38,33,28,0.94);
backdrop-filter:blur(10px);
box-shadow:0 6px 30px rgba(0,0,0,0.18);
}
@media (pointer:coarse){
.nav.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(38,33,28,0.97);}
}
.nav-toggle{
display:flex;align-items:center;gap:10px;
background:none;border:none;color:var(--cream);cursor:pointer;padding:6px;
font-family:'Golos Text',sans-serif;
}
.nav-toggle-icon{display:flex;flex-direction:column;gap:4px;width:22px;flex:0 0 auto;}
.nav-toggle-icon i{display:block;height:1px;background:currentColor;}
.nav-toggle-icon i:nth-child(1){width:100%;}
.nav-toggle-icon i:nth-child(2){width:72%;}
.nav-toggle-icon i:nth-child(3){width:86%;}
.nav-toggle-label{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;}
@media (max-width:640px){.nav-toggle-label{display:none;}}
/* ---------- hero ---------- */
.hero{
height:100vh;height:100svh;min-height:600px;position:relative;overflow:hidden;
display:flex;align-items:flex-end;
}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media video, .hero-media img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;
}
/* переключение кадра героя делает , отдельных классов не нужно */
.hero-media::after{
content:"";position:absolute;inset:0;
/* Подложка героя. Плотность в зоне текста подобрана замером, а не на глаз:
под надзаголовком (≈55% высоты) фасад светлый, rgb(225,223,222) — при
прежних 0.27 контраст падал до 1.31 при норме 4.5. Верх кадра остаётся
чистым, темнеет только нижняя половина. */
background:linear-gradient(180deg,
rgba(20,17,13,0.04) 0%,
rgba(20,17,13,0.10) 30%,
rgba(20,17,13,0.36) 45%,
rgba(20,17,13,0.66) 57%,
rgba(20,17,13,0.76) 80%,
rgba(20,17,13,0.86) 100%);
}
.hero-content{position:relative;z-index:2;width:100%;padding:0 0 clamp(44px,7vh,88px);color:var(--cream);}
.hero-content .inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px);}
/* Камень на светлом фасаде не проходит ни при какой плотности подложки
(максимум 2.60 при норме 4.5) — он сам среднего тона. Здесь только сливки. */
.hero-content .eyebrow{color:var(--cream);margin-bottom:20px;text-shadow:0 1px 12px rgba(20,17,13,0.5);}
.hero-title{
font-size:clamp(44px,7vw,96px);line-height:1.08;font-weight:500;
color:var(--cream);text-shadow:0 2px 40px rgba(20,17,13,0.45);
}
.hero-sub{
margin-top:22px;font-family:'Golos Text',sans-serif;font-weight:400;font-size:clamp(15px,1.5vw,19px);
max-width:580px;color:rgba(239,233,223,0.92);line-height:1.6;
text-shadow:0 1px 16px rgba(20,17,13,0.4);
}
.hero-facts{
margin-top:22px;font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;
color:rgba(239,233,223,0.78);
}
.hero-cta{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap;}
/* ---------- цифры проекта (3.2) ---------- */
.numbers{padding:clamp(90px,13vh,150px) 0;background:var(--pearl);}
.numbers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px;margin-top:44px;}
.num-item{border-top:1px solid var(--line);padding-top:20px;}
.num-item .val{font-family:'Cormorant Garamond', serif;font-weight:300;font-size:clamp(34px,4vw,62px);color:var(--accent);line-height:1.05;}
.num-item .lbl{margin-top:10px;font-size:13.5px;color:var(--ink);line-height:1.5;}
.numbers-note{margin-top:44px;font-size:15px;color:var(--ink);max-width:640px;line-height:1.7;}
.numbers-cta{margin-top:32px;}
/* ---------- резиденции (3.3) ---------- */
.residences{padding:clamp(90px,13vh,150px) 0;background:var(--pearl);}
.residences-copy{max-width:760px;}
.residences-copy p{margin-top:18px;font-size:16px;line-height:1.75;color:var(--ink);}
.unit-list{list-style:none;margin:44px 0 0;padding:0;}
.unit-row{
display:grid;grid-template-columns:1.3fr 1.4fr 1fr auto;gap:18px;align-items:center;
padding:20px 4px;border-top:1px solid var(--line);
}
.unit-list li:last-child .unit-row{border-bottom:1px solid var(--line);}
.unit-type{font-family:'Cormorant Garamond',serif;font-size:21px;color:var(--ink);}
.unit-area{font-size:14.5px;color:var(--ink);}
.unit-count{font-size:13px;letter-spacing:0.04em;color:var(--stone-text);}
.residences-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px;}
.ratio-5-4{aspect-ratio:5/4;overflow:hidden;border-radius:var(--radius-card);position:relative;}
.ratio-5-4 img{width:100%;height:100%;object-fit:cover;}
.residences-formats{margin-top:44px;max-width:720px;font-size:16px;line-height:1.75;color:var(--ink);}
.residences-strip{margin-top:44px;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-card);position:relative;}
.residences-strip img{width:100%;height:100%;object-fit:cover;}
/* ---------- архитектура (3.4, тёмная) ---------- */
.architecture{background:var(--graphite);color:var(--cream);padding-bottom:clamp(90px,13vh,150px);}
.architecture .band-full{width:100%;aspect-ratio:2.12;overflow:hidden;}
.architecture .band-full img{width:100%;height:100%;object-fit:cover;}
.architecture .band-full + .wrap{padding-top:clamp(70px,10vh,110px);}
.architecture .wrap > .section-head{padding-top:clamp(70px,10vh,110px);}
.arch-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:64px;}
.arch-split:first-of-type{margin-top:0;}
.arch-split p{margin-top:16px;font-size:15px;line-height:1.75;color:rgba(239,233,223,0.78);}
.arch-media-capped{max-width:660px;}
.arch-media-capped img{border-radius:var(--radius-card);}
.ratio-16-9{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-card);position:relative;}
.ratio-16-9 img{width:100%;height:100%;object-fit:cover;}
/* ---------- лобби и сервис (3.5) ---------- */
.service{padding:clamp(90px,13vh,150px) 0;background:var(--pearl);}
.service-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.ratio-7-5{aspect-ratio:7/5;overflow:hidden;border-radius:var(--radius-card);position:relative;}
.ratio-7-5 img{width:100%;height:100%;object-fit:cover;}
.service-copy p{margin-top:18px;font-size:15.5px;line-height:1.75;color:var(--ink);}
.service-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px;}
.ratio-8-5{aspect-ratio:8/5;overflow:hidden;border-radius:var(--radius-card);position:relative;}
.ratio-8-5 img{width:100%;height:100%;object-fit:cover;}
/* ---------- двор — лента (3.6) ---------- */
.courtyard{padding:clamp(90px,13vh,150px) 0;background:var(--pearl);}
.courtyard-copy{max-width:760px;}
.courtyard-copy p{margin-top:18px;font-size:16px;line-height:1.75;color:var(--ink);}
.ribbon{
margin-top:52px;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;padding-bottom:8px;
}
.ribbon-card{
flex:0 0 auto;scroll-snap-align:start;position:relative;overflow:hidden;
border-radius:var(--radius-card);height:70vh;max-height:560px;aspect-ratio:16/9;
}
.ribbon-card img{width:100%;height:100%;object-fit:cover;}
/* ---------- для резидентов (3.7) ---------- */
.residents{padding:clamp(90px,13vh,150px) 0;background:var(--pearl);}
.residents-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.residents-copy p{margin-top:18px;font-size:15.5px;line-height:1.75;color:var(--ink);}
.residents-cta{margin-top:28px;}
/* ---------- район (3.8) ---------- */
.district{padding:clamp(90px,13vh,150px) 0;background:var(--pearl);}
.district-copy{max-width:760px;}
.district-copy p{margin-top:18px;font-size:15.5px;line-height:1.75;color:var(--ink);}
.district-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:52px;}
.district-item{border-top:1px solid var(--line);padding-top:18px;}
.district-item .val{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(28px,3vw,40px);color:var(--accent);}
.district-item .lbl{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--ink);}
/* ---------- инженерия (3.9, тёмная) ---------- */
.engineering{padding:clamp(90px,13vh,150px) 0;background:var(--graphite);color:var(--cream);}
.engineering-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:52px;background:rgba(239,233,223,0.1);}
.eng-item{background:#211c17;padding:32px 26px;min-height:180px;}
.eng-item h4{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--cream);font-weight:500;}
.eng-item p{margin-top:12px;font-size:13.5px;line-height:1.6;color:rgba(239,233,223,0.66);}
/* ---------- паркинг (3.10, тёмная) ---------- */
.parking{padding:clamp(90px,13vh,150px) 0;background:var(--graphite);color:var(--cream);}
.parking-copy{max-width:680px;}
.parking-copy p{margin-top:18px;font-size:15.5px;line-height:1.75;color:rgba(239,233,223,0.78);}
.parking-media{margin-top:52px;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-card);position:relative;}
.parking-media img{width:100%;height:100%;object-fit:cover;}
.parking-cta{margin-top:28px;}
/* ---------- девелопер (3.11) ---------- */
.developer{padding:clamp(90px,13vh,150px) 0;background:var(--pearl);}
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:44px;}
.dev-col p{font-size:14.5px;color:var(--ink);line-height:1.75;}
/* ---------- вопросы и ответы (3.12) ---------- */
.faq{padding:clamp(90px,13vh,150px) 0;background:var(--pearl);}
/* 720px, а не 820: при ширине окна около 1024 строка ответа доезжала
до плавающей кнопки заявки и уходила под неё. Заодно короче мера строки. */
.faq-list{margin-top:44px;max-width:720px;}
.faq-item{
border-top:1px solid var(--line);padding:6px 0;
}
.faq-list .faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item summary{
list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
content:"+";position:absolute;right:2px;top:16px;font-family:'Golos Text',sans-serif;
font-size:20px;color:var(--accent);transition:transform .25s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(135deg);}
.faq-item .a{padding:0 34px 22px 0;font-size:15px;line-height:1.7;color:var(--ink);}
/* ---------- финал: форма (3.13) ---------- */
.lead{position:relative;overflow:hidden;padding:clamp(90px,13vh,150px) 0;background:var(--graphite);color:var(--cream);}
.lead-bg{position:absolute;inset:0;z-index:0;}
.lead-bg img{width:100%;height:100%;object-fit:cover;}
/* 0.62, а не 0.55: под текстом кадр светлый, rgb(178,178,178) — абзац давал
4.20 при норме 4.5. Заголовок проходил и раньше, абзац нет. */
.lead-bg::after{content:"";position:absolute;inset:0;background:rgba(20,17,13,0.62);}
.lead > .wrap{position:relative;z-index:1;}
/* Заголовок наследовал общий тёмный цвет h2 и пропадал на тёмном кадре:
.lead{color:cream} до самого h2 не доходит — у h1..h4 свой цвет. */
.lead h2{color:var(--cream);}
/* Плавающая кнопка и мобильный бар не нужны там, где форма уже перед глазами. */
.lw-pill.is-hidden,.lw-bar.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);}
.lw-pill,.lw-bar{transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.lead-copy p{margin-top:18px;font-size:15.5px;line-height:1.75;color:rgba(239,233,223,0.85);max-width:460px;}
.lead-card{background:rgba(33,28,23,0.92);padding:clamp(30px,4vw,44px);border-radius:var(--radius-card);box-shadow:var(--shadow);}
.field{margin-bottom:18px;}
.field label{display:block;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(239,233,223,0.6);margin-bottom:8px;}
.field input{
width:100%;background:transparent;border:none;border-bottom:1px solid rgba(239,233,223,0.32);
color:var(--cream);font-family:'Golos Text',sans-serif;font-size:16px;padding:10px 2px;outline:none;
transition:border-color .25s;
}
.field input:focus{border-color:var(--stone);}
.field input::placeholder{color:rgba(239,233,223,0.35);}
.hp{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;}
.lead-submit{width:100%;margin-top:6px;}
.lead-note{font-size:11.5px;color:rgba(239,233,223,0.5);margin-top:16px;line-height:1.6;}
/* ---------- подвал ---------- */
footer{background:#1c1712;color:rgba(239,233,223,0.6);padding:48px 0 26px;}
.footer-line{font-size:13.5px;line-height:1.7;max-width:820px;}
.footer-legal{margin-top:20px;padding-top:20px;border-top:1px solid rgba(239,233,223,0.12);font-size:11.5px;line-height:1.7;color:rgba(239,233,223,0.42);max-width:820px;}
/* ==================================================================
ПОЯВЛЕНИЕ БЛОКОВ ПРИ СКРОЛЛЕ (общий класс .reveal / .stagger).
Блок раскрывается заранее (start:"top 99%" в main.js), страховка —
видимое сразу получает .in при загрузке. Никогда не оставлять
opacity:0 без страховки. ================================================================== */
.reveal{opacity:0;transform:translateY(22px);}
.reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease), transform .7s var(--ease);}
.stagger > *{opacity:0;transform:translateY(20px);}
.stagger.in > *{opacity:1;transform:none;transition:opacity .6s var(--ease), transform .6s var(--ease);}
.stagger.in > *:nth-child(1){transition-delay:.02s;}
.stagger.in > *:nth-child(2){transition-delay:.1s;}
.stagger.in > *:nth-child(3){transition-delay:.18s;}
.stagger.in > *:nth-child(4){transition-delay:.26s;}
@media (prefers-reduced-motion: reduce){
.reveal,.stagger > *{opacity:1 !important;transform:none !important;}
html{scroll-behavior:auto;}
}
/* ==================================================================
ОГЛАВЛЕНИЕ (TOC) — боковая панель-книга, выезжает справа.
Открывается кнопкой .nav-toggle. Выпадающего меню сверху нет —
явное требование постановки (раздел 3, «Навигация»).
================================================================== */
.toc-overlay{
position:fixed;inset:0;z-index:900;background:rgba(20,17,13,0.55);
opacity:0;pointer-events:none;transition:opacity .34s var(--ease);
}
.toc-overlay.toc-overlay--show{opacity:1;pointer-events:auto;}
.toc-panel{
position:fixed;top:0;right:0;bottom:0;z-index:910;
width:320px;max-width:86vw;
background:#211c17;color:var(--cream);
display:flex;flex-direction:column;
box-shadow:-24px 0 60px rgba(0,0,0,0.35);
transform:translateX(100%);
transition:transform .36s var(--ease);
}
.toc-panel.toc-panel--show{transform:translateX(0);}
@media (min-width:768px){.toc-panel{width:340px;}}
.toc-progress{position:relative;height:2px;background:rgba(239,233,223,0.12);flex:0 0 auto;}
.toc-progress i{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--accent);display:block;transition:width .15s linear;}
.toc-head{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 16px;flex:0 0 auto;}
.toc-head-label{font-family:'Golos Text',sans-serif;font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(239,233,223,0.5);}
.toc-close{
width:30px;height:30px;display:flex;align-items:center;justify-content:center;
background:transparent;border:none;color:rgba(239,233,223,0.6);font-size:15px;cursor:pointer;transition:color .2s;
}
.toc-close:hover{color:var(--cream);}
.toc-list{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;padding:2px 0 20px;}
.toc-item{
display:flex;align-items:baseline;gap:14px;
padding:16px 24px;border-top:1px solid rgba(239,233,223,0.1);
transition:background .2s, color .2s;
}
.toc-list > .toc-item:first-child{border-top:none;}
.toc-num{font-family:'Cormorant Garamond',serif;font-size:16px;color:rgba(239,233,223,0.4);flex:0 0 auto;min-width:22px;transition:color .2s;}
.toc-label{font-family:'Golos Text',sans-serif;font-size:12.5px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(239,233,223,0.82);line-height:1.4;transition:color .2s;}
.toc-item:hover{background:rgba(239,233,223,0.06);}
.toc-item:hover .toc-label,.toc-item:hover .toc-num{color:var(--cream);}
.toc-item.active{background:rgba(239,233,223,0.07);}
.toc-item.active .toc-num{color:var(--stone);}
.toc-item.active .toc-label{color:var(--cream);}
.toc-item--accent{margin-top:auto;}
.toc-item--accent .toc-num,.toc-item--accent .toc-label{color:#c99790;}
.toc-item--accent:hover{background:rgba(142,59,52,0.18);}
.toc-item--accent:hover .toc-num,.toc-item--accent:hover .toc-label{color:var(--cream);}
.toc-item--accent.active{background:rgba(142,59,52,0.24);}
@media (prefers-reduced-motion: reduce){
.toc-panel,.toc-overlay,.toc-progress i{transition:none !important;}
}
html.toc-scrolling{scroll-snap-type:none;}
/* ==================================================================
ВИДЖЕТ ЗАЯВКИ — постоянный лид-магнит: нижний бар на мобиле,
пилюля на десктопе. Открывает одну и ту же панель (#lw-panel) для
всех четырёх приманок раздела 7 постановки — заголовок/подзаголовок
переключает следующий исполнитель по data-lead кнопки.
================================================================== */
.lw-bar{
position:fixed;left:0;right:0;bottom:0;z-index:610;
height:56px;display:none;align-items:center;justify-content:space-between;gap:14px;
padding:0 16px;background:rgba(38,33,28,0.97);backdrop-filter:blur(8px);
border-top:1px solid rgba(239,233,223,0.14);
transform:translateY(100%);transition:transform .35s var(--ease);
}
@media (pointer:coarse){.lw-bar{-webkit-backdrop-filter:none;backdrop-filter:none;}}
.lw-bar.lw-bar--show{transform:translateY(0);}
.lw-bar-text{color:var(--cream);font-size:12.5px;font-family:'Cormorant Garamond', serif;font-style:italic;line-height:1.3;}
.lw-bar-btn{padding:11px 20px;font-size:11px;flex:0 0 auto;min-height:38px;}
.lw[data-state="submitted"] .lw-bar-btn{display:none;}
.lw-pill{
display:none;position:fixed;right:28px;bottom:28px;z-index:610;
align-items:center;gap:10px;padding:14px 24px;min-height:56px;
background:var(--graphite);color:var(--cream);border:1px solid rgba(239,233,223,0.18);
border-radius:999px;font-family:'Golos Text', sans-serif;font-size:12px;letter-spacing:0.08em;
text-transform:uppercase;cursor:pointer;box-shadow:0 12px 34px rgba(0,0,0,0.28);
transition:background .25s, transform .25s;
}
.lw-pill:hover{background:#302923;}
.lw-pill-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto;display:block;}
.lw-pill[aria-expanded="true"]{transform:scale(0.97);}
.lw-overlay{
position:fixed;inset:0;z-index:615;background:rgba(20,17,13,0.55);
opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.lw-overlay.lw-overlay--show{opacity:1;pointer-events:auto;}
.lw-panel{position:fixed;z-index:620;background:#211c17;color:var(--cream);border-radius:var(--radius-card);}
.lw-handle{display:none;}
.lw-close{
position:absolute;top:14px;right:14px;width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
background:transparent;border:none;color:rgba(239,233,223,0.6);font-size:15px;cursor:pointer;transition:color .2s;
}
.lw-close:hover{color:var(--cream);}
.lw-body{padding:26px 24px 24px;}
.lw-title{font-family:'Cormorant Garamond', serif;font-weight:500;font-style:italic;font-size:18px;line-height:1.4;color:var(--cream);padding-right:26px;}
.lw-subtitle{margin-top:10px;font-size:13.5px;line-height:1.55;color:rgba(239,233,223,0.7);}
.lw-panel .field{margin:18px 0 14px;}
.lw-panel .field label{display:block;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(239,233,223,0.55);margin-bottom:7px;}
.lw-panel .field input{
width:100%;background:transparent;border:none;border-bottom:1px solid rgba(239,233,223,0.3);
color:var(--cream);font-family:'Golos Text',sans-serif;font-size:16px;padding:9px 2px;outline:none;
transition:border-color .25s;
}
.lw-panel .field input:focus{border-color:var(--stone);}
.lw-panel .field input::placeholder{color:rgba(239,233,223,0.35);}
.lw-submit{width:100%;margin-top:6px;}
.lw-status{margin:0 24px 20px;font-size:13px;padding:10px 12px;border-radius:var(--radius);display:none;}
.lw-status.ok{display:block;background:rgba(115,168,111,0.16);color:#a9d6a4;border:1px solid rgba(115,168,111,0.4);}
.lw-status.err{display:block;background:rgba(196,90,74,0.16);color:#e0a89b;border:1px solid rgba(196,90,74,0.4);}
.lw-note{margin:14px 0 0;font-size:11px;line-height:1.5;color:rgba(239,233,223,0.45);}
.lw-success{padding:34px 24px 30px;}
.lw-success p{font-family:'Cormorant Garamond', serif;font-style:italic;font-size:17px;line-height:1.5;color:var(--cream);margin:0;}
@media (min-width:601px){
.lw-pill{display:flex;}
.lw-panel{
right:28px;bottom:92px;width:340px;max-width:calc(100vw - 40px);
box-shadow:0 20px 60px rgba(0,0,0,0.35);
opacity:0;transform:translateY(12px);pointer-events:none;
transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.lw-panel.lw-panel--show{opacity:1;transform:none;pointer-events:auto;}
}
@media (max-width:600px){
.lw-bar{display:flex;}
.lw-panel{
left:0;right:0;bottom:0;width:100%;border-radius:16px 16px 0 0;
max-height:82vh;overflow-y:auto;
transform:translateY(100%);transition:transform .32s var(--ease);
}
.lw-panel.lw-panel--show{transform:translateY(0);}
.lw-handle{display:block;width:36px;height:4px;border-radius:2px;background:rgba(239,233,223,0.3);margin:12px auto 0;}
}
@media (prefers-reduced-motion: reduce){
.lw-bar,.lw-panel,.lw-overlay{transition:none !important;}
}
/* ==================================================================
RESPONSIVE
================================================================== */
@media (max-width:980px){
.numbers-grid{grid-template-columns:repeat(2,1fr);}
.residences-split,.arch-split,.service-split,.residents-split,.dev-grid{grid-template-columns:1fr;gap:28px;}
.district-grid{grid-template-columns:repeat(3,1fr);}
.engineering-grid{grid-template-columns:1fr 1fr;}
.service-cards{grid-template-columns:1fr;}
}
@media (max-width:820px){
/* десктопные отступы секций превращаются в экраны пустоты на телефоне */
.numbers,.residences,.architecture .wrap > .section-head,.service,.courtyard,.residents,
.district,.engineering,.parking,.developer,.faq,.lead{
padding-top:clamp(48px,7vh,72px);
padding-bottom:clamp(48px,7vh,72px);
}
.architecture{padding-bottom:clamp(48px,7vh,72px);}
.architecture .band-full + .wrap{padding-top:clamp(40px,6vh,56px);}
.section-head{margin-bottom:clamp(28px,4vh,40px);}
.numbers-grid,.residences-split,.arch-split,.service-split,.residents-split,.dev-grid{gap:22px;}
.unit-row{grid-template-columns:1fr;gap:8px;align-items:start;text-align:left;}
.unit-row .btn{margin-top:10px;justify-self:start;}
.district-grid{grid-template-columns:1fr 1fr;gap:24px;}
.engineering-grid{grid-template-columns:1fr;}
.lead-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
.hero-media img,.hero-media video{object-position:center 30%;}
}
@media (max-width:600px){
.hero-cta{flex-direction:column;align-items:stretch;}
.numbers-grid{grid-template-columns:1fr 1fr;gap:26px;}
.district-grid{grid-template-columns:1fr 1fr;}
.service-cards{grid-template-columns:1fr;}
/* полосы во всю ширину — ограничиваем высоту, чтобы не съедать экран целиком */
.architecture .band-full{aspect-ratio:auto;height:auto;}
.ratio-16-9,.ratio-7-5,.ratio-8-5,.ratio-5-4{max-height:60vh;}
/* лента двора — нативный свайп-скролл, карточки короче */
.ribbon-card{height:auto;width:82vw;aspect-ratio:16/9;max-height:none;scroll-snap-align:center;}
/* финальная секция: кадр родной пропорции сверху, форма ниже на тёмном фоне */
.lead-bg{position:relative;inset:auto;aspect-ratio:1.42;}
.lead-bg::after{background:rgba(20,17,13,0.35);}
.lead > .wrap{padding-top:28px;}
}
@media (max-width:390px){
.numbers-grid,.district-grid{grid-template-columns:1fr 1fr;}
}