/* ПАЛАШЁВСКИЙ 11 — «Чёрное перо». Fashion-editorial с Патриарших.
  
   Собственный визуальный язык дома: Commissioner + Prata, чёрная база,
   шампанское золото, росчерк пера как фирменный приём. Никакой связи со
   стилями ERA / AURUS / Фрунзенской набережной — см. ARTDIRECTION.md. */

/* шрифты подключены <link>-ом в head — @import блокировал отрисовку на iOS */

:root{
  --black: #0B0A0A;
  --black-soft: #141210;
  --panel: #1C1713;
  --choc: #3F2A1F;
  --choc-deep: #2C1C13;
  --cream: #EDE7DA;
  --cream-2: #E3D9C4;
  --ink: #241C16;
  --stone: #8C8171;
  --stone-soft: #6F6558;
  --gold: #A9C4B0;  /* зеленоватый отлив стеклянного фасада — из презентации; золото запрещено */
  --gold-deep: #8FB09A;
  --glass: #2E5B52;
  --line-dark: rgba(237,231,218,0.14);
  --line-light: rgba(36,28,22,0.14);
  --radius: 18px;       /* карточки и фото — общий UI-слой, ARTDIRECTION.md */
  --radius-sm: 10px;     /* внутренние вложенные фото/мат */
  --radius-btn: 11px;    /* кнопки */
  --radius-field: 10px;  /* поля форм */
  --radius-sheet: 20px;  /* шторка мобильного виджета */
  --shadow-soft: 0 8px 30px rgba(0,0,0,.28);
  --shadow-soft-light: 0 8px 30px rgba(0,0,0,.1);
  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1440px;
  --pad-x: clamp(20px,5vw,64px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:'Commissioner', sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto обязателен рядом с max-width: без него браузер держит высоту
   из атрибута height, а ширину сжимает по контейнеру — кадр растягивается
   по вертикали. Так «поехали» лобби, приватность и паркинг. */
img,video{max-width:100%;height:auto;display:block;}
figure{margin:0;}
a{color:inherit;text-decoration:none;}
.num{font-family:'Prata', serif;font-weight:400;}

h1,h2,h3,h4{
  font-family:'Commissioner', sans-serif;
  font-weight:300;
  text-transform:uppercase;
  margin:0;
  color:var(--cream);
  line-height:1.12;
  overflow-wrap:break-word;
  hyphens:auto;
}
h1{letter-spacing:0.16em;}
h2{letter-spacing:0.1em;}
h3,h4{letter-spacing:0.06em;}

/* секции со светлой (кремовой) базой — переопределяем цвет текста */
.on-light, .on-light h1, .on-light h2, .on-light h3, .on-light h4, .on-light p, .on-light span{color:var(--ink);}
.on-light{background:var(--cream);}

.eyebrow{
  font-family:'Commissioner', sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.on-light .eyebrow{color:var(--choc);}
.eyebrow::before{
  content:"";
  width:22px;height:1px;background:currentColor;display:inline-block;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px);}
section{position:relative;}

/* ---------- фактура пера — едва читаемая, только на чёрной базе ---------- */
.pero-bg{position:relative;}
.pero-bg::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('../assets/pero-texture.svg');
  background-repeat:repeat;background-size:420px 480px;
  opacity:0.5; /* opacity уже частично запечена в самом svg (0.4–0.55 на штрихах) */
  mix-blend-mode:screen;
}
.pero-bg > *{position:relative;z-index:1;}

/* ---------- росчерк пера — фирменный разделитель ---------- */
.pero-divider{display:flex;justify-content:center;margin:0 auto;padding:0;}
.pero-divider img{width:200px;height:auto;opacity:0.85;}
.pero-divider--left{justify-content:flex-start;}

/* ---------- маска появления фотографий: жест «пера», разворачивающегося по кадру ---------- */
.feather-mask{
  clip-path: polygon(0% 0%, 100% 0%, 100% 3%, 100% 1%, 100% 5%, 100% 2%, 100% 4%, 100% 1%, 100% 3%, 0% 3%);
  transition: clip-path 1.05s var(--ease);
}
.reveal.in .feather-mask,
.feather-mask.in{
  clip-path: polygon(0% 0%, 100% 0%, 100% 14%, 100% 28%, 100% 42%, 100% 57%, 100% 71%, 100% 85%, 100% 100%, 0% 100%);
}
@media (prefers-reduced-motion: reduce){
  .feather-mask{clip-path:none !important;transition:none !important;}
}

/* ---------- заголовок секции: копия слева, «фолио» справа (издательский разворот) ---------- */
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;}
.head-copy{max-width:640px;}
.head-copy h2{margin-top:16px;font-size:clamp(28px,4vw,52px);}
.head-copy p{margin-top:18px;font-size:15px;line-height:1.75;color:rgba(237,231,218,0.7);max-width:520px;}
.on-light .head-copy p{color:var(--stone-soft);}
.head-folio{
  flex:0 0 auto;text-align:right;padding-bottom:6px;white-space:nowrap;
}
.head-folio .num{font-size:20px;color:var(--gold);display:block;}
.on-light .head-folio .num{color:var(--choc);}
.head-folio span{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(237,231,218,0.4);display:block;margin-top:4px;}
.on-light .head-folio span{color:var(--stone);}
@media (max-width:760px){
  .head-row{flex-direction:column;align-items:flex-start;gap:14px;}
  .head-folio{text-align:left;}
}

.wrap{position:relative;}

/* ---------- reveal ---------- */
.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 .8s var(--ease), transform .8s 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;}
.stagger.in > *:nth-child(5){transition-delay:.34s;}
.stagger.in > *:nth-child(6){transition-delay:.42s;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Commissioner', sans-serif;font-weight:500;font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;
  min-height:44px;padding:13px 28px;border:1px solid currentColor;border-radius:var(--radius-btn);
  cursor:pointer;background:transparent;color:inherit;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .2s var(--ease);
  white-space:nowrap;max-width:100%;
}
.btn:active{transform:scale(0.97);}
.btn-solid{background:var(--gold);border-color:var(--gold);color:var(--black);box-shadow:var(--shadow-soft-light);}
.btn-solid:hover{background:var(--gold-deep);border-color:var(--gold-deep);}
.btn-ghost-dark{color:#fff;border-color:rgba(255,255,255,0.9);background:rgba(8,8,8,0.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-shadow:0 1px 3px rgba(0,0,0,0.5);}
.btn-ghost-dark:hover{background:#fff;color:var(--black);text-shadow:none;}
.btn-ghost-light{color:var(--ink);border-color:rgba(36,28,22,0.35);}
.btn-ghost-light:hover{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.btn-ghost-gold{color:var(--gold);border-color:rgba(169,196,176,0.55);}
.btn-ghost-gold:hover{background:var(--gold);color:var(--black);border-color:var(--gold);}
@media (max-width:480px){
  .btn{white-space:normal;text-align:center;line-height:1.3;}
}

/* ---------- заставка загрузки ----------
   Название проекта на фирменном фоне заливается акцентом слева направо по мере
   загрузки: вместо пустого белого экрана человек с первой секунды видит, куда
   пришёл. Два слоя одного текста — нижний приглушённый, верхний обрезается
   по --p (0…1), который ведёт скрипт. */
.preloader{
  position:fixed;inset:0;z-index:9999;background:var(--black);
  display:flex;align-items:center;justify-content:center;padding:0 24px;
  transition:opacity .7s ease, visibility .7s ease;
}
.preloader-name{
  position:relative;display:inline-block;
  font-family:'Commissioner', sans-serif;text-transform:uppercase;
  font-size:clamp(26px,8.2vw,52px);font-weight:300;letter-spacing:0.14em;line-height:1.2;
  text-align:center;white-space:nowrap;
}
.preloader-base{color:rgba(237,231,218,0.22)}
.preloader-fill{
  position:absolute;left:0;top:0;width:100%;color:var(--cream);
  clip-path:inset(0 calc(100% - var(--p, 0) * 100%) 0 0);
  transition:clip-path .35s cubic-bezier(.22,.61,.36,1);
}
@media (max-width:520px){
  .preloader-name{white-space:normal;max-width:8em}
  .preloader-fill{position:absolute}
}
@media (prefers-reduced-motion: reduce){
  .preloader-fill{transition:none}
}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px clamp(20px,5vw,64px);
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav .logo{font-family:'Prata', serif;font-size:18px;letter-spacing:0.04em;color:#fff;}
.nav-links{display:flex;gap:32px;align-items:center;}
.nav-links a{
  font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.82);
  transition:color .25s;
}
.nav-links a:hover{color:var(--gold);}
.nav .btn{margin-left:8px;}
.nav.scrolled{
  padding:14px clamp(20px,5vw,64px);
  background:rgba(11,10,10,0.94);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 30px rgba(0,0,0,0.3);
}

/* якорный переход по меню/кнопкам: не-scrolled шапка выше (~96-97px, 26px
   паддинг), запас воздуха ~14px поверх — иначе надзаголовок секции
   проваливается под шапку (замер Playwright 390×844 и 1440×900). */
section[id]{scroll-margin-top:112px}
@media (max-width:980px){
  section[id]{scroll-margin-top:110px}
}

/* ---------- hero ---------- */
.hero{
  height:100svh;min-height:640px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media video, .hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 34%;
}
/* На телефоне подставляется вертикальный кроп (см. <picture> в разметке).
   Прижимаем его к верхнему краю, иначе небо над домом уходит за экран
   и кадр снова превращается в сплошную стену. */
@media (max-width:820px){
  .hero-media img{object-position:center top;}
}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(11,10,10,0.5) 0%, rgba(11,10,10,0.12) 32%, rgba(11,10,10,0.4) 66%, rgba(11,10,10,0.88) 100%),
    linear-gradient(96deg, rgba(11,10,10,0.55) 0%, rgba(11,10,10,0.16) 40%, rgba(11,10,10,0) 66%);
}
.hero-frame{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(120px,16vh,168px) 0 clamp(40px,7vh,88px);}
.hero-top,.hero-bottom{max-width:var(--maxw);margin:0 auto;width:100%;padding:0 clamp(20px,5vw,64px);}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;}
.hero-colophon{font-family:'Prata', serif;font-size:14px;letter-spacing:0.08em;color:rgba(255,255,255,0.8);white-space:nowrap;padding-top:8px;flex:0 0 auto;margin-left:auto;text-align:right;}
@media (max-width:600px){
  .hero-colophon{font-size:12px;padding-top:4px;}
}
.hero-colophon i{font-style:normal;color:var(--gold);}
.hero-title{
  font-size:clamp(38px,11vw,120px);line-height:1.04;font-weight:300;
  letter-spacing:0.1em;color:#fff;text-shadow:0 2px 40px rgba(0,0,0,0.5);
  max-width:760px;
}
.hero-title em{font-style:normal;color:var(--gold);}
.hero-sub{
  margin-top:22px;font-family:'Commissioner',sans-serif;font-weight:400;text-transform:none;letter-spacing:0;font-size:clamp(15px,1.5vw,18px);
  max-width:540px;color:rgba(255,255,255,0.86);line-height:1.65;
}
/* поверх светлого стекла фасада зелёный отлив тонул — берём светлый тон с тенью */
.hero-eyebrow{color:#DCE8DF;text-shadow:0 1px 14px rgba(0,0,0,.62);}
.hero-cta{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap;}
.hero-scroll{
  position:absolute;right:clamp(20px,5vw,64px);bottom:36px;z-index:2;color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero-scroll .line{width:1px;height:52px;background:rgba(255,255,255,0.5);position:relative;overflow:hidden;}
.hero-scroll .line i{position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--gold);animation:scrollline 2.2s ease-in-out infinite;}
@keyframes scrollline{0%{top:-100%;}50%{top:0;}100%{top:100%;}}
.hero-scroll span{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;writing-mode:vertical-rl;color:rgba(255,255,255,0.7);}

/* ---------- первый экран на телефоне ----------
   Крупный заголовок, видео во весь экран, кнопка заявки видна без прокрутки —
   проверено на высоте 667 и 844px (см. отчёт). Меньше верхнего отступа —
   видео читается на весь экран, а не полосой за текстом. */
@media (max-width:600px){
  .hero-frame{padding:clamp(92px,15vh,128px) 0 clamp(28px,5vh,44px);}
  /* «ПАЛАШЁВСКИЙ» в разрядку упирался в правый край на 390px — режем кегль
     и разрядку, чтобы слово держалось в поле с воздухом по краям */
  .hero-title{font-size:clamp(30px,8.4vw,44px);letter-spacing:0.04em;}
  .hero-sub{margin-top:16px;font-size:14.5px;line-height:1.6;}
  .hero-cta{margin-top:20px;gap:10px;}
  .hero-eyebrow{font-size:10.5px;}
}

/* ---------- цифры-показатели (Prata, до 200px по спеку — верхняя строка intro) ---------- */
.numbers{background:var(--black-soft);padding:clamp(64px,9vh,100px) 0;}
.numbers .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;}
.num-item{border-top:1px solid var(--line-dark);padding-top:22px;}
.num-item .val{font-family:'Prata', serif;font-size:clamp(40px,5vw,88px);color:var(--gold);line-height:1;}
.num-item .val sup{font-size:0.36em;margin-left:4px;color:var(--cream-2);}
.num-item .lbl{margin-top:14px;font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(237,231,218,0.68);line-height:1.5;}

/* ---------- intro (позиционирование) ---------- */
.intro-numbers{background:var(--black);}
.intro{padding:clamp(140px,17vh,190px) 0 clamp(56px,8vh,84px);}
.intro-quote{
  font-family:'Commissioner', serif;font-weight:400;font-size:clamp(17px,1.6vw,21px);color:var(--gold);
  line-height:1.55;border-left:2px solid var(--gold);padding-left:22px;max-width:420px;margin-top:34px;
}

/* ---------- location ---------- */
.location{padding:clamp(90px,13vh,150px) 0;}
.location .head{margin-bottom:52px;}
.loc-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:start;}
.loc-media{position:relative;overflow:hidden;border-radius:var(--radius);box-shadow:0 30px 70px rgba(0,0,0,0.22);}
.loc-media img,.loc-media video{width:100%;height:100%;object-fit:cover;}
.dist-list{display:flex;flex-direction:column;}
.dist-item{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--line-light);
}
.dist-item .name{font-size:15px;color:var(--ink);}
.dist-item .name small{display:block;color:var(--stone);font-size:12.5px;margin-top:3px;}
.dist-item .time{font-family:'Prata', serif;font-size:18px;color:var(--choc);white-space:nowrap;text-align:right;flex:0 0 auto;}
@media (max-width:480px){
  .dist-item{flex-wrap:wrap;row-gap:4px;}
  .dist-item .time{white-space:normal;max-width:100%;font-size:16px;}
}
.loc-media figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:18px 22px;
  background:linear-gradient(0deg, rgba(11,10,10,0.75) 0%, rgba(11,10,10,0) 100%);
  color:#fff;font-size:12.5px;letter-spacing:0.04em;
}

/* ---------- полоса фасадов (полноширинный кадр-«полоса») ---------- */
.facade-strip{padding:0 0 clamp(60px,9vh,100px);}
.facade-strip .band{position:relative;overflow:hidden;}
.facade-strip .band img,.facade-strip .band video{width:100%;height:clamp(240px,42vh,480px);object-fit:cover;display:block;}
.facade-strip .band-cap{
  max-width:var(--maxw);margin:22px auto 0;padding:0 clamp(20px,5vw,64px);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(237,231,218,0.55);
}
.on-light .facade-strip .band-cap{color:var(--stone);}

/* ---------- архитектура ---------- */
.architecture{padding:clamp(90px,13vh,150px) 0;}
.arch-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.arch-media{position:relative;}
.arch-media img{border-radius:var(--radius);}
.arch-facts{list-style:none;margin:26px 0 0;padding:0;}
.arch-facts li{padding:16px 0;border-top:1px solid var(--line-dark);font-size:14.5px;color:rgba(237,231,218,0.72);line-height:1.6;}
.on-light .arch-facts li{border-top-color:var(--line-light);color:var(--stone-soft);}

/* лёгкое паспарту — фото на тёмном фоне никогда не встык с краем */
.matted{background:var(--cream);padding:12px;border-radius:var(--radius);box-shadow:0 26px 60px rgba(0,0,0,0.35);}
.matted img,.matted picture{display:block;border-radius:var(--radius-sm);overflow:hidden;}

.two-up{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px;}
.two-up figure{margin:0;}
.two-up img{width:100%;height:auto;display:block;border-radius:var(--radius);}
.two-up figcaption{margin-top:12px;font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(237,231,218,0.55);}
.on-light .two-up figcaption{color:var(--stone);}

/* ---------- триптих: фирменная форма подачи (три вертикальных кадра 3:4, паспарту, капс-подписи) ---------- */
.triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.triptych figure{margin:0;}
.triptych .tript-frame{background:var(--cream);padding:10px;border-radius:var(--radius);box-shadow:0 26px 60px rgba(0,0,0,0.35);}
.triptych .tript-frame img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-sm);}
.triptych figcaption{margin-top:14px;text-align:center;}
.triptych figcaption b{
  display:block;font-family:'Commissioner',sans-serif;font-weight:500;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);
}
.on-light .triptych figcaption b{color:var(--choc);}
.triptych figcaption span{display:block;margin-top:5px;font-size:12px;color:rgba(237,231,218,0.55);line-height:1.5;}
.on-light .triptych figcaption span{color:var(--stone);}

/* ---------- баннер-разворот (полноэкранное фото с текстом поверх) ---------- */
.spread{position:relative;height:82vh;min-height:520px;overflow:hidden;}
.spread img,.spread video{width:100%;height:100%;object-fit:cover;}
.spread::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(11,10,10,0.85) 0%, rgba(11,10,10,0.08) 42%, rgba(11,10,10,0.42) 100%);}
.spread-copy{position:absolute;left:0;right:0;bottom:0;padding:clamp(36px,6vh,72px) 0;z-index:2;}
.spread-copy h2{color:#fff;max-width:760px;font-size:clamp(28px,4.2vw,52px);}
.spread-copy p{color:rgba(255,255,255,0.8);max-width:500px;margin-top:16px;font-size:15px;line-height:1.7;}

/* ---------- двор-сад ---------- */
.courtyard-extra{padding:clamp(64px,9vh,100px) 0;}
.courtyard-note{margin-top:44px;max-width:620px;font-size:15px;line-height:1.75;color:var(--stone-soft);}

/* ---------- интерьеры резиденций ---------- */
.interiors{padding:clamp(90px,13vh,150px) 0;}
.interiors .head{margin-bottom:44px;}
.interiors-hero{aspect-ratio:1.78;position:relative;overflow:hidden;border-radius:var(--radius);}
.interiors-hero img{width:100%;height:100%;object-fit:cover;}
@media (max-width:760px){
  .interiors-hero img{height:auto;aspect-ratio:16/10;object-fit:cover;}
}
.interiors-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px;}
.interiors-facts div .n{font-family:'Prata',serif;font-size:clamp(30px,3.6vw,46px);color:var(--gold);line-height:1;}
.interiors-facts div .l{font-size:12px;letter-spacing:0.06em;color:rgba(237,231,218,0.6);margin-top:10px;line-height:1.55;}

.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.service-card{
  background:var(--panel);padding:34px 28px;min-height:200px;display:flex;flex-direction:column;justify-content:space-between;
  border-radius:var(--radius);box-shadow:var(--shadow-soft);
  transition:background .3s, transform .25s var(--ease);
}
.service-card:hover{transform:translateY(-3px);}
.on-light .service-card{background:var(--cream-2);box-shadow:var(--shadow-soft-light);}
.service-card:hover{background:var(--choc-deep);}
.on-light .service-card:hover{background:#d9cdb2;}
.service-card .n{font-family:'Prata', serif;font-size:14px;color:var(--gold);}
.on-light .service-card .n{color:var(--choc);}
.service-card h4{color:#fff;font-size:17px;margin-top:22px;line-height:1.3;letter-spacing:0.04em;}
.on-light .service-card h4{color:var(--ink);}
.service-card p{color:rgba(237,231,218,0.6);font-size:13px;margin-top:10px;line-height:1.6;}
.on-light .service-card p{color:var(--stone-soft);}

/* ---------- пентхаусы / паркинг: узкая вводная секция + полоса-кадр ---------- */
.chapter-intro{padding:clamp(80px,11vh,120px) 0 0;}
.chapter-intro .head-copy{max-width:600px;}
.auto-facts{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;}
.auto-facts li{font-size:13.5px;color:var(--stone-soft);padding-left:16px;position:relative;line-height:1.5;}
.auto-facts li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:1px;background:var(--choc);}

/* ---------- дом / clubhouse блок ---------- */
.house-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;}
.house-media{position:relative;overflow:hidden;border-radius:var(--radius);}
.house-media img{width:100%;height:auto;object-fit:cover;}
.house-copy-col .eyebrow{margin-bottom:0;}
.house-copy{margin-top:20px;font-size:15px;line-height:1.75;max-width:480px;color:rgba(237,231,218,0.7);}
.on-light .house-copy{color:var(--stone-soft);}

/* ---------- developer ---------- */
.developer{padding:clamp(90px,13vh,150px) 0;}
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
.dev-col h3{font-size:19px;margin-bottom:16px;}
.dev-col p{font-size:14.5px;color:rgba(237,231,218,0.68);line-height:1.75;margin-bottom:10px;}
.dev-list{list-style:none;padding:0;margin:14px 0 0;}
.dev-list li{font-size:14px;color:rgba(237,231,218,0.68);padding:12px 0;border-top:1px solid var(--line-dark);}

/* ---------- светлая вставка между «Девелопер» и «Заявка» ----------
   Обе секции тёмные подряд — по общему UI-слою чёрный не должен заливать
   экран без пауз. Карточка стандартов дома получает кремовую подложку —
   воздух и скругление внутри тёмной секции, без смены базы всего сайта. */
.dev-col--card{
  background:var(--cream);color:var(--ink);
  border-radius:var(--radius);padding:clamp(28px,4vw,40px);
  box-shadow:var(--shadow-soft);
}
.dev-col--card .eyebrow{color:var(--choc);}
.dev-col--card h3{color:var(--ink);}
.dev-col--card .dev-list li{color:var(--stone-soft);border-top-color:var(--line-light);}

/* ---------- заявка ---------- */
.lead{padding:clamp(90px,13vh,150px) 0;position:relative;overflow:hidden;}
.lead-bg{position:absolute;inset:0;z-index:0;opacity:0.16;}
.lead-bg img{width:100%;height:100%;object-fit:cover;}
.lead > .wrap{position:relative;z-index:1;}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.lead h2{color:#fff;font-size:clamp(28px,4vw,50px);}
.lead p{color:rgba(237,231,218,0.7);margin-top:18px;font-size:15px;line-height:1.7;max-width:440px;}
.lead-facts{display:flex;gap:30px;margin-top:34px;flex-wrap:wrap;}
.lead-facts div .n{font-family:'Prata', serif;color:var(--gold);font-size:24px;}
.lead-facts div .l{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(237,231,218,0.55);margin-top:4px;}
.lead-card{background:var(--panel);padding:clamp(30px,4vw,48px);border-radius:var(--radius);border:1px solid var(--line-dark);box-shadow:var(--shadow-soft);}
.lead-tabs{display:flex;gap:8px;margin-bottom:28px;}
.lead-tab{
  flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:12px 10px;font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;
  border:1px solid rgba(237,231,218,0.22);border-radius:var(--radius-btn);color:rgba(237,231,218,0.68);cursor:pointer;transition:all .25s;
  background:transparent;font-family:'Commissioner',sans-serif;
}
.lead-tab.active{background:var(--gold);border-color:var(--gold);color:var(--black);}
.field{margin-bottom:16px;}
.field label{display:block;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(237,231,218,0.5);margin-bottom:8px;}
.field input{
  width:100%;min-height:48px;box-sizing:border-box;
  background:rgba(237,231,218,0.05);border:1px solid rgba(237,231,218,0.24);border-radius:var(--radius-field);
  color:#fff;font-family:'Commissioner',sans-serif;font-size:16px;padding:12px 14px;outline:none;
  transition:border-color .25s, background .25s;
}
.field input:focus{border-color:var(--gold);background:rgba(237,231,218,0.09);}
.field input::placeholder{color:rgba(237,231,218,0.32);}
.hp{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;}
.lead-submit{width:100%;margin-top:8px;justify-content:center;}
.lead-note{font-size:11.5px;color:rgba(237,231,218,0.42);margin-top:16px;line-height:1.6;}
.lead-status{margin-top:16px;font-size:13.5px;padding:12px 14px;border-radius:var(--radius-field);display:none;}
.lead-status.ok{display:block;background:rgba(46,91,82,0.24);color:#a9d6c8;border:1px solid rgba(46,91,82,0.5);}
.lead-status.err{display:block;background:rgba(120,60,40,0.22);color:#e0ab8f;border:1px solid rgba(120,60,40,0.5);}

/* ---------- footer ---------- */
footer{background:#050505;color:rgba(237,231,218,0.58);padding:60px 0 26px;}
.footer-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line-dark);}
.footer-top .logo{font-family:'Prata', serif;color:#fff;font-size:19px;letter-spacing:0.04em;}
.footer-top p{font-size:13px;line-height:1.7;margin-top:14px;max-width:320px;}
.footer-col h5{color:#fff;font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:16px;font-weight:400;}
.footer-col a,.footer-col span{display:block;font-size:13.5px;margin-bottom:10px;color:rgba(237,231,218,0.6);}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;font-size:11.5px;color:rgba(237,231,218,0.36);}

/* ---------- кинематографичный вход изображений (масштаб чуть вперёд, догоняет на reveal) ---------- */
@media (prefers-reduced-motion: no-preference){
  .house-media,.arch-media,.interiors-hero,.loc-media{overflow:hidden;}
  .house-media img,.arch-media img,.interiors-hero img{
    transform:scale(1.06);transition:transform 1.3s var(--ease);
  }
  .reveal.in .house-media img,.reveal.in .arch-media img,.reveal.in img{transform:scale(1);}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav-links{display:none;}
  .loc-grid,.arch-grid,.dev-grid,.lead-grid{grid-template-columns:1fr;}
  .house-grid{grid-template-columns:1fr;}
  .numbers .grid{grid-template-columns:1fr 1fr;}
  .service-grid{grid-template-columns:1fr 1fr;}
  .interiors-facts{grid-template-columns:1fr;gap:22px;}
  .footer-top{grid-template-columns:1fr;}
  .triptych{grid-template-columns:1fr 1fr;}
  .triptych figure:nth-child(3){grid-column:1 / span 2;max-width:340px;margin:0 auto;}
}
@media (max-width:600px){
  .hero-scroll{display:none;}
  .hero-title{letter-spacing:0.03em;}
  /* «Инфраструктура только для жителей дома» — одно длинное капс-слово почти
     не помещается на 320px при letter-spacing 0.1em, чуть уже минимум клампа */
  .head-copy h2{font-size:clamp(24px,7.5vw,40px);letter-spacing:0.08em;}
  .service-grid{grid-template-columns:1fr;}
  .numbers .grid{grid-template-columns:1fr 1fr;gap:24px;}
  .num-item .val{font-size:clamp(28px,9vw,44px);}
  .auto-facts{grid-template-columns:1fr;}
  .two-up{grid-template-columns:1fr;}
  /* триптих на телефоне: три вертикальных кадра в ряд не помещаются — переводим
     в горизонтальную свайп-ленту со скролл-снапом, кадры «выбегают» к краю экрана
     (bleed через var(--pad-x)), третий кадр чуть виден — приглашение пролистнуть.
     Это разрешённое исключение из правила «нет горизонтального скролла» (DESIGN.md §3). */
  .triptych{
    display:flex;grid-template-columns:none;gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x);
    padding-bottom:6px;scrollbar-width:none;
  }
  .triptych::-webkit-scrollbar{display:none;}
  .triptych figure{flex:0 0 68%;scroll-snap-align:start;}
  .triptych figure:nth-child(3){grid-column:auto;max-width:none;margin:0;}

  /* полосы-кадры — только горизонтальные исходники, максимум 60vh */
  .facade-strip .band img,.facade-strip .band video{height:auto;max-height:60vh;}

  /* портретные слоты — натуральная пропорция, максимум 76vh */
  .house-media img,.arch-media img{height:auto;max-height:76vh;width:auto;max-width:100%;margin:0 auto;}

  /* локация — кадр сверху, список ниже */
  .loc-media img,.loc-media video{height:52vh;object-position:78% center;}

  /* тач-зона футера — ссылки навигации минимум 44px по высоте */
  .footer-col a{padding:12px 0;margin-bottom:0;}
}

@media (prefers-reduced-motion: reduce){
  .reveal,.stagger > *{opacity:1 !important;transform:none !important;}
  html{scroll-behavior:auto;}
}

/* ---------- мобильная плотность (по правилам DESIGN.md §2) ---------- */
@media (max-width:820px){
  .location,.house,.service,.chapter-intro,.developer,.lead,.interiors,.architecture,.courtyard-extra,.intro{
    padding-top:clamp(48px,7vh,72px);
    padding-bottom:clamp(48px,7vh,72px);
  }
  .arch-grid,.loc-grid,.dev-grid,.lead-grid,.house-grid{gap:26px;}
  .interiors .head{margin-bottom:26px;}
  .house-media img,.arch-media img{max-height:62vh;width:100%;object-fit:cover;}
  .interiors-hero img{max-height:52vh;}
  .spread{height:56vh;min-height:0;}
  .facade-strip{padding-top:clamp(28px,4vh,44px) !important;padding-bottom:clamp(28px,4vh,44px) !important;}
  .facade-strip .band-cap{margin-top:14px;gap:6px;font-size:12px;line-height:1.5;}
  .service-head,.interiors .head{margin-bottom:22px;}
  .num-item{padding-top:16px;}
  .numbers{padding:clamp(44px,6vh,64px) 0;}
  .intro{padding:clamp(96px,13vh,140px) 0 clamp(36px,5vh,52px);}
  .reveal.in{transition:opacity .45s var(--ease), transform .45s var(--ease);}
  .stagger.in > *{transition:opacity .45s var(--ease), transform .45s var(--ease);}
  .feather-mask{transition:clip-path .5s var(--ease);}
}

/* ==================================================================
   ВИДЖЕТ ЗАЯВКИ — постоянный лид-магнит (нижний бар / пилюля / шторка).
   DOM и вся логика открытия/закрытия — унаследованы без изменений,
   здесь только цвета и типографика под «Чёрное перо».
   ================================================================== */

.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(11,10,10,0.97);backdrop-filter:blur(8px);
  border-top:1px solid var(--line-dark);
  transform:translateY(100%);transition:transform .35s var(--ease);
}
.lw-bar.lw-bar--show{transform:translateY(0);}
.lw-bar-text{color:#fff;font-size:12.5px;font-family:'Prata', serif;line-height:1.3;}
.lw-bar-btn{padding:11px 20px;font-size:11px;flex:0 0 auto;min-height:44px;}
.lw[data-state="submitted"] .lw-bar-btn{display:none;}

/* ---------- плавающая круглая кнопка (десктоп) ----------
   Общий UI-слой ARTDIRECTION.md: 56-64px, заливка тёмным цветом проекта, мягкий
   ореол вокруг. У Палашёвского — чёрная кнопка с шампанским золотом, не эталонная
   заливка чужого проекта: характер сохраняется, меняется только «механика». */
.lw-pill{
  display:none;position:fixed;right:28px;bottom:28px;z-index:610;
  width:60px;height:60px;padding:0;
  align-items:center;justify-content:center;
  background:var(--black-soft);color:var(--gold);border:1px solid rgba(169,196,176,0.4);
  border-radius:50%;cursor:pointer;box-shadow:0 14px 34px rgba(0,0,0,0.45);
  transition:background .25s, transform .25s;
}
.lw-pill::before{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  background:rgba(169,196,176,0.16);z-index:-1;
  animation:lwHalo 2.6s ease-in-out infinite;
}
@keyframes lwHalo{
  0%,100%{transform:scale(1);opacity:.7;}
  50%{transform:scale(1.14);opacity:.25;}
}
.lw-pill svg{width:22px;height:22px;display:block;}
.lw-pill:hover{background:var(--choc-deep);}
.lw-pill[aria-expanded="true"]{transform:scale(0.94);}
@media (prefers-reduced-motion: reduce){
  .lw-pill::before{animation:none;}
}

.lw-overlay{
  position:fixed;inset:0;z-index:615;background:rgba(0,0,0,0.6);
  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:var(--panel);color:var(--cream);border-radius:var(--radius);
  border:1px solid var(--line-dark);box-shadow:var(--shadow-soft);
}
.lw-handle{display:none;}
.lw-close{
  position:absolute;top:8px;right:8px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:rgba(237,231,218,0.6);
  font-size:15px;cursor:pointer;transition:color .2s;
}
.lw-close:hover{color:#fff;}
.lw-body{padding:26px 24px 24px;}
.lw-title{font-family:'Prata', serif;font-weight:400;font-size:16px;line-height:1.45;color:var(--cream);padding-right:40px;}
.lw-tabs{display:flex;gap:8px;margin:20px 0;}
.lw-tab{
  flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:10px 8px;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  border:1px solid rgba(237,231,218,0.22);border-radius:var(--radius-btn);color:rgba(237,231,218,0.68);cursor:pointer;
  background:transparent;font-family:'Commissioner',sans-serif;transition:all .25s;
}
.lw-tab.active{background:var(--gold);border-color:var(--gold);color:var(--black);}
.lw-panel .field{margin-bottom:14px;}
.lw-panel .field label{display:block;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(237,231,218,0.5);margin-bottom:7px;}
.lw-panel .field input{
  width:100%;min-height:46px;box-sizing:border-box;
  background:rgba(237,231,218,0.05);border:1px solid rgba(237,231,218,0.24);border-radius:var(--radius-field);
  color:#fff;font-family:'Commissioner',sans-serif;font-size:16px;padding:11px 14px;outline:none;
  transition:border-color .25s, background .25s;
}
.lw-panel .field input:focus{border-color:var(--gold);background:rgba(237,231,218,0.09);}
.lw-panel .field input::placeholder{color:rgba(237,231,218,0.32);}
.lw-submit{width:100%;margin-top:6px;justify-content:center;}
.lw-status{margin:0 24px 20px;font-size:13px;padding:10px 12px;border-radius:var(--radius-field);display:none;}
.lw-status.ok{display:block;background:rgba(46,91,82,0.24);color:#a9d6c8;border:1px solid rgba(46,91,82,0.5);}
.lw-status.err{display:block;background:rgba(120,60,40,0.22);color:#e0ab8f;border:1px solid rgba(120,60,40,0.5);}
.lw-success{padding:34px 24px 30px;}
.lw-success p{font-family:'Prata', serif;font-size:16px;line-height:1.5;color:var(--cream);margin:0;}
.lw-note{margin:14px 0 0;font-size:11px;line-height:1.5;color:rgba(237,231,218,0.42);}

@media (min-width:601px){
  .lw-pill{display:flex;}
  .lw-panel{
    right:28px;bottom:92px;width:320px;max-width:calc(100vw - 40px);
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
    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:var(--radius-sheet) var(--radius-sheet) 0 0;
    max-height:80vh;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(237,231,218,0.3);margin:12px auto 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .lw-bar,.lw-panel,.lw-overlay{transition:none !important;}
}

/* ==================================================================
   ОГЛАВЛЕНИЕ (TOC) — боковая панель-книга, выезжает справа.
   Логика открытия/закрытия/подсветки главы — без изменений в JS,
   здесь только визуальный слой под «Чёрное перо».
   ================================================================== */
.nav-toggle{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-width:44px;min-height:44px;
  background:none;border:none;color:#fff;cursor:pointer;
  padding:6px;font-family:'Commissioner',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.14em;text-transform:uppercase;}
@media (max-width:640px){
  .nav-toggle-label{display:none;}
}

.toc-overlay{
  position:fixed;inset:0;z-index:900;background:rgba(0,0,0,0.6);
  opacity:0;pointer-events:none;transition:opacity .34s var(--ease);
}
.toc-overlay.toc-overlay--show{opacity:1;pointer-events:auto;}

.toc-panel:not([hidden]){
  position:fixed;top:0;right:0;bottom:0;z-index:910;
  width:320px;max-width:86vw;
  background:var(--panel);color:var(--cream);
  display:flex;flex-direction:column;
  box-shadow:-24px 0 60px rgba(0,0,0,0.5);
  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:var(--line-dark);flex:0 0 auto;}
.toc-progress i{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--gold);display:block;transition:width .15s linear;}

.toc-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 14px 16px 24px;flex:0 0 auto;
}
.toc-head-label{
  font-family:'Commissioner',sans-serif;font-size:11px;letter-spacing:0.26em;
  text-transform:uppercase;color:rgba(237,231,218,0.5);
}
.toc-close{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:rgba(237,231,218,0.6);
  font-size:15px;cursor:pointer;transition:color .2s;
}
.toc-close:hover{color:#fff;}

.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:14px 24px;border-top:1px solid var(--line-dark);
  transition:background .2s, color .2s;
}
.toc-list > .toc-item:first-child{border-top:none;}
.toc-num{
  font-family:'Prata',serif;font-size:14px;color:rgba(237,231,218,0.4);
  flex:0 0 auto;min-width:22px;transition:color .2s;
}
.toc-label{
  font-family:'Commissioner',sans-serif;font-size:12px;letter-spacing:0.12em;
  text-transform:uppercase;color:rgba(237,231,218,0.82);line-height:1.4;transition:color .2s;
}
.toc-item:hover{background:rgba(237,231,218,0.06);}
.toc-item:hover .toc-label,.toc-item:hover .toc-num{color:#fff;}
.toc-item.active{background:rgba(237,231,218,0.07);}
.toc-item.active .toc-num{color:var(--gold);}
.toc-item.active .toc-label{color:#fff;}

.toc-item--accent{margin-top:auto;}
.toc-item--accent .toc-num,.toc-item--accent .toc-label{color:var(--gold);}
.toc-item--accent:hover{background:rgba(169,196,176,0.14);}
.toc-item--accent:hover .toc-num,.toc-item--accent:hover .toc-label{color:#fff;}
.toc-item--accent.active{background:rgba(169,196,176,0.18);}

@media (prefers-reduced-motion: reduce){
  .toc-panel,.toc-overlay,.toc-progress i{transition:none !important;}
}

html.toc-scrolling{scroll-snap-type:none;}

/* ================================================================
   03.08 — контраст текста (WCAG AA).
   --stone (#8C8171) задавался как «песочный» акцент и по кремовому
   давал 3.1 вместо 4.5 на подписях 10–12,5px. Берём более глубокий
   тон той же песочной линии — палитра не меняется.
   ================================================================ */
.on-light .head-folio span,.dist-item .name small,
.on-light .facade-strip .band-cap,.on-light .two-up figcaption,
.on-light .triptych figcaption span{color:var(--stone-soft);}

/* текст «разворота» лежит прямо на кадре — на светлых участках стекла
   белый по белому. Подложка-градиент снизу, как на loc-media */
.spread-copy::before{
  content:"";position:absolute;inset:-40px 0 -20px;z-index:-1;
  background:linear-gradient(0deg, rgba(11,10,10,0.82) 0%, rgba(11,10,10,0.55) 55%, rgba(11,10,10,0) 100%);
  pointer-events:none;
}

/* ---------- переносы: слова в заголовках не рвём ----------
   hyphens:auto ломал «ФРУНЗЕН-СКАЯ НАБЕ-РЕЖНАЯ» и «ПРИ-ВАТНЫЙ САД».
   Оставляем перенос только для действительно длинных слов (от 14 букв),
   с минимум шестью буквами по обе стороны. Название проекта не рвём никогда. */
h1,h2,h3,h4{
  hyphens:auto;-webkit-hyphens:auto;
  hyphenate-limit-chars:14 6 6;
  -webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:6;
  -webkit-hyphenate-limit-lines:1;
  overflow-wrap:break-word;
}
.hero-title,.hero h1,.nav .logo{
  hyphens:manual !important;-webkit-hyphens:manual !important;
  /* break-word рвал «ФРУНЗЕНСК/АЯ» по буквам — название переносим только по пробелу */
  overflow-wrap:normal !important;word-break:normal !important;
}


/* ══ iOS-блок (05.08.2026) ══
   На сенсорных устройствах:
   - blur на фиксированной шапке дёргает прокрутку — заменяем плотным цветом;
   - скролл-скраб отключён (fx.js не запускается), секции показывают финальное
     состояние и занимают один экран вместо 200-300vh мёртвой прокрутки. */
@media (pointer:coarse){
  .nav,.toc-panel,.lead-bar{-webkit-backdrop-filter:none;backdrop-filter:none;}
  /* Плотная заливка нужна только когда шапка висит НАД контентом. На первом
     экране она закрывала небо над домом, и кадр превращался в голую стену.
     Наверху страницы — прозрачная, с лёгкой тенью для читаемости логотипа. */
  .nav{background:transparent;
    background-image:linear-gradient(180deg,rgba(11,10,10,.55) 0%,rgba(11,10,10,0) 100%);}
  .nav.scrolled{background:rgba(16,17,20,0.97);background-image:none;}
  /* замороженный скраб читался как глюк — на телефоне этих секций нет */
  .fx-morph,.fx-wipe,.fx-iris,.fx-facets,.fx-quill,.fx-plan,.fx-petal{display:none !important;}
  .fx-reel{height:100svh !important;}
  .fx-morph .fx-sticky,.fx-wipe .fx-sticky,.fx-iris .fx-sticky,
  .fx-facets .fx-sticky,.fx-quill .fx-sticky,.fx-plan .fx-sticky,
  .fx-petal .fx-sticky,.fx-reel .fx-sticky{position:relative !important;height:100svh !important;}
  .fx-reel .fx-track{overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;transform:none !important;}
  .fx-reel .fx-track figure{scroll-snap-align:center;}
  .fx-reel .fx-progress{display:none;}
}

/* ══ Аудит перед доменом (05.08.2026, вечер) ══ */
@media (max-width:640px){
  /* подпись-колофон висела поверх кадра нечитаемо и дублировала eyebrow */
  .hero-colophon{display:none;}
  /* панорама города 1.34 стояла в вертикальном слоте 0.80 — теряла половину */
  .loc-media{aspect-ratio:1.34;height:auto;}
  .loc-media img{position:static;height:100%;}
  /* горизонтальный кадр галереи 1.63 в слоте 0.83 — резался вдвое */
  .spread{height:auto;min-height:0;aspect-ratio:1.28;}
}

/* ---------- тач-зона ≥44px (палец, iPhone 390×844) ----------
   Логотип в шапке визуально мельче 44px — раздуваем кликабельную область
   через padding, текст остаётся по центру строки навигации как раньше. */
@media (pointer:coarse){
  .nav .logo{padding:9px 0;}
}


/* ── кнопка скачивания презентации ──
   Показывается только после успешной отправки формы (см. lead-done в main.js):
   человек оставил телефон — материалы отдаём сразу, а не «после звонка». */
.lead-done{margin-top:16px}
.lead-done .lead-download{width:100%;text-align:center}
@media (min-width:640px){.lead-done .lead-download{width:auto}}

/* Атрибут hidden слабее правил вроде display:inline-flex у .btn — без этого
   спрятанные кнопка отправки и блок скачивания продолжали показываться. */
[hidden]{display:none !important}

/* Кнопка скачивания в плавающем виджете заявки — тот же принцип, что и в
   основной форме: оставил телефон, сразу получил презентацию. */
.lw-success .lw-download{display:inline-flex;width:100%;text-align:center;margin-top:14px}