/* JOIS — стили.
   Арт-дирекшн задана брифом: «Удовольствие сиять», JOYFUL OPTIMISTIC ICONIC SAFE,
   арт-кураторство фонда Cosmoscow. Отсюда лавандовый градиент как фирменный
   знак (он и на обложке презентации, и на разделительных слайдах), тёплый
   оливковый — от интерьеров лобби, и широкая читаемая типографика Unbounded/Onest
   (замена Syne/Figtree 07.08 — у обоих не было кириллицы, русский текст
   молча падал на системный Georgia/Helvetica).
   Технический подход — по эталону: object-fit, aspect-ratio на каждый слот,
   100svh, hyphens, safe-area, без скролл-анимаций и clip-path. */

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

:root{
  --lavender:#B9A8CE;
  --lavender-deep:#6C568C;   /* та же лаванда, затемнена для текста на светлом фоне (AA) */
  --lavender-pale:#E4DCEC;
  --olive:#6F6A53;
  --olive-deep:#57532F;
  --ink:#1E1B24;
  --ink-2:#272330;
  --ink-3:#332D3F;
  --paper:#F5F2F7;
  --paper-2:#EBE6F0;
  --muted:#6E6878;
  --muted-on-dark:#B7B0C4;
  --line:rgba(30,27,36,0.12);
  --line-dark:rgba(245,242,247,0.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1360px;
  --radius:16px;
  --radius-sm:11px;
  --tap:44px;
  --grad:linear-gradient(90deg,#8FA0D6 0%,#C9A9D6 45%,#F2D4D9 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Onest',system-ui,sans-serif;font-weight:400;line-height:1.62;
  -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}

h1,h2,h3,h4{
  font-family:'Unbounded',sans-serif;font-weight:700;margin:0;
  letter-spacing:-0.01em;line-height:1.08;color:var(--ink);
  hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:14 6 6;
  -webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:6;
  overflow-wrap:break-word;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
}
.hero-title,.nav-logo{hyphens:manual !important;-webkit-hyphens:manual !important;
  overflow-wrap:normal !important;word-break:normal !important}

.mark{
  font-family:'Onest',sans-serif;font-weight:600;font-size:12.5px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--lavender-deep);
  display:inline-flex;align-items:center;gap:10px;
}
.mark::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--grad);flex:0 0 auto}
.on-dark .mark,.hero-body .mark,.lead .mark{color:var(--lavender)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px)}
section{position:relative}
/* якорный переход по меню/кнопкам: фикс.шапка ~73px + запас воздуха —
   иначе надзаголовок секции проваливается под шапку (замер Playwright 390×844) */
section[id]{scroll-margin-top:87px}

/* фирменная лавандовая полоса — как на разделительных слайдах презентации */
.gbar{height:5px;border-radius:3px;background:var(--grad);width:min(100%,180px);margin-bottom:28px}
.on-dark .gbar{opacity:.92}

/* ---------- заставка загрузки ----------
   Название проекта на фирменном фоне заливается акцентом слева направо по мере
   загрузки: вместо пустого белого экрана человек с первой секунды видит, куда
   пришёл. Два слоя одного текста — нижний приглушённый, верхний обрезается
   по --p (0…1), который ведёт скрипт. */
.preloader{
  position:fixed;inset:0;z-index:9999;background:var(--ink);
  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:'Unbounded', sans-serif;text-transform:uppercase;font-weight:700;
  font-size:clamp(40px,14vw,82px);letter-spacing:0.06em;line-height:1.1;
  text-align:center;white-space:nowrap;
}
.preloader-base{color:rgba(245,242,247,0.22)}
.preloader-fill{
  position:absolute;left:0;top:0;width:100%;color:var(--paper);
  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:9em}
  .preloader-fill{position:absolute}
}
@media (prefers-reduced-motion: reduce){
  .preloader-fill{transition:none}
}

/* ── навигация ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  gap:clamp(14px,3vw,36px);padding:14px clamp(16px,4vw,44px);
  background:rgba(30,27,36,0.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark);
}
.nav-logo{font-family:'Unbounded',sans-serif;font-weight:700;font-size:19px;
  letter-spacing:0.1em;color:var(--paper);display:inline-flex;align-items:center;min-height:var(--tap)}
.nav-links{display:flex;gap:clamp(10px,1.8vw,22px);margin-left:auto}
.nav-links a{font-family:'Onest',sans-serif;font-weight:500;font-size:13px;
  color:rgba(245,242,247,0.82);transition:color .25s}
.nav-links a:hover{color:var(--lavender)}
.nav-cta{
  font-family:'Onest',sans-serif;font-weight:600;font-size:13px;
  color:var(--ink);background:var(--grad);
  padding:10px 20px;border-radius:999px;min-height:var(--tap);display:inline-flex;
  align-items:center;transition:filter .25s,transform .25s;
}
.nav-cta:hover{filter:brightness(1.06)}

/* ── hero: кадр во весь экран, текст поверх ──
   Прежняя вёрстка ставила кадр узкой полосой сверху, а текст — на плоскую
   графитовую плашку под ним; на мобильном это дополнительно схлопывалось
   в рамочный блок. По эталону (Тессинский) кадр идёт край в край на весь
   100svh при любой ширине экрана, а затемнение поверх него держит текст
   читаемым на любом кадре — без отдельной плашки-подложки. Показатели
   (1306 квартир и т.д.) ушли из первого экрана в секцию .key-facts ниже:
   на 390px пять строк цифр поверх кадра занимали весь экран без остатка. */
.hero{position:relative;min-height:100svh;min-height:100vh;display:flex;flex-direction:column;
  justify-content:flex-end;color:var(--paper);background:var(--ink);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* Кадр дневной и светлый: на прежнем затемнении надзаголовок и заголовок
   тонули в небе. Зона под текстом затемнена сильнее. */
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,27,36,.62) 0%,rgba(30,27,36,.22) 22%,
    rgba(30,27,36,.55) 44%,rgba(30,27,36,.82) 62%,rgba(30,27,36,.93) 84%,rgba(30,27,36,.97) 100%)}
.hero-body{position:relative;z-index:1;padding:clamp(24px,3.6vh,44px) 0 clamp(30px,6vh,64px)}
.hero-title{font-size:clamp(34px,5.4vw,78px);line-height:1.0;font-weight:700;
  letter-spacing:-0.02em;color:var(--paper);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-title em{font-style:normal;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hero-sub{font-size:clamp(15px,1.3vw,18px);line-height:1.6;max-width:640px;
  margin-top:18px;color:rgba(245,242,247,0.92);text-shadow:0 1px 14px rgba(0,0,0,.4)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ── показатели: отдельная полоса под первым экраном ──
   Раньше пять строк были частью hero-meta внутри hero-body — теперь это
   самостоятельная секция сразу под кадром, на телефоне два столбца, шире —
   больше. */
.key-facts{background:var(--ink-2);color:var(--paper);
  padding:clamp(26px,4.4vh,46px) 0;border-top:1px solid var(--line-dark)}
.hero-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3.4vw,40px) clamp(16px,3vw,32px)}
@media (min-width:640px){.hero-meta{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.hero-meta{grid-template-columns:repeat(5,1fr)}}
.hero-meta b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:clamp(21px,2.4vw,30px);color:var(--paper);letter-spacing:-0.01em;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.hero-meta span{display:block;font-family:'Onest',sans-serif;font-size:12px;
  color:var(--muted-on-dark);margin-top:6px;line-height:1.5}

.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);
  font-family:'Onest',sans-serif;font-weight:600;font-size:14px;
  padding:13px 26px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;transition:filter .25s,background .25s,color .25s,border-color .25s;
}
.btn-solid{background:var(--grad);color:var(--ink)}
.btn-solid:hover{filter:brightness(1.06)}
.btn-ghost{color:var(--paper);border-color:rgba(245,242,247,0.5)}
.btn-ghost:hover{border-color:var(--paper);background:rgba(245,242,247,0.08)}
.btn-dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-dark:hover{background:var(--ink-3);border-color:var(--ink-3)}

/* ── общие секции ── */
.sec{padding:clamp(60px,10vh,128px) 0}
.sec.on-dark{background:var(--ink);color:var(--paper)}
.sec.on-dark h2,.sec.on-dark h3{color:var(--paper)}
.sec-head{max-width:800px;margin-bottom:clamp(30px,5vh,54px)}
.sec-head h2{font-size:clamp(27px,4vw,50px);margin-top:14px}
.sec-head p{margin-top:16px;font-size:16.5px;line-height:1.75;color:var(--muted);max-width:640px}
.on-dark .sec-head p{color:var(--muted-on-dark)}

/* ── позиционирование: платформа JOIS ── */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:clamp(26px,4vh,44px)}
.pillar{background:var(--paper);padding:clamp(20px,2.6vw,30px) clamp(16px,2vw,24px)}
.pillar i{display:block;font-family:'Onest',sans-serif;font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--lavender-deep);font-style:normal;margin-bottom:10px}
.pillar b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:18px;color:var(--ink)}
.pillar span{display:block;margin-top:8px;font-size:14px;line-height:1.6;color:var(--muted)}

/* ── медиа-блоки: полосы и пары ── */
.band{position:relative;border-radius:var(--radius);overflow:hidden;margin-top:clamp(26px,4vh,46px)}
.band img{width:100%;height:100%;object-fit:cover;display:block}
.band figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px clamp(18px,3vw,30px) 16px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:'Onest',sans-serif;font-size:12.5px;letter-spacing:0.03em;
  color:#fff;
  background:linear-gradient(180deg,rgba(30,27,36,0),rgba(30,27,36,.5) 40%,rgba(30,27,36,.92))}
.band figcaption span{text-shadow:0 1px 10px rgba(0,0,0,.85)}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.2vw,26px);margin-top:clamp(26px,4vh,46px)}
.pair figure{border-radius:var(--radius);overflow:hidden;background:transparent}
.pair img{width:100%;object-fit:cover;display:block}
.pair figure.tall img{max-height:70vh}
.pair figcaption{padding:13px 2px 0;font-family:'Onest',sans-serif;font-size:12.5px;
  color:var(--muted);line-height:1.5}
.on-dark .pair figcaption{color:var(--muted-on-dark)}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,22px);margin-top:clamp(26px,4vh,46px)}
.trio figure{border-radius:var(--radius);overflow:hidden}
.trio img{width:100%;object-fit:cover;display:block}
.trio figcaption{padding:12px 2px 0;font-family:'Onest',sans-serif;font-size:12px;color:var(--muted);line-height:1.5}
.on-dark .trio figcaption{color:var(--muted-on-dark)}

/* ── цитаты команды проекта ── */
.quote{margin-top:clamp(26px,4vh,44px);padding-left:22px;border-left:3px solid var(--lavender);
  max-width:760px}
.quote p{font-family:'Unbounded',sans-serif;font-weight:600;font-size:clamp(17px,1.8vw,22px);
  line-height:1.5;color:var(--ink)}
.on-dark .quote p{color:var(--paper)}
.quote cite{display:block;margin-top:12px;font-family:'Onest',sans-serif;font-style:normal;
  font-size:13px;color:var(--muted)}
.on-dark .quote cite{color:var(--muted-on-dark)}

/* ── список локации ── */
.loc{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(20px,3vw,44px);align-items:start;margin-top:clamp(26px,4vh,44px)}
.loc-media{border-radius:var(--radius);overflow:hidden}
.loc-media img{width:100%;object-fit:cover;display:block}
.loc-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.loc-list{display:flex;flex-direction:column}
.loc-list h4{font-family:'Onest',sans-serif;font-weight:600;font-size:12px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--muted-on-dark);margin-bottom:6px}
/* второй и следующие заголовки групп («на автомобиле») липли к строке выше */
.loc-list h4:not(:first-child){margin-top:22px}
/* Список пар «подпись — значение» родился в тёмной секции локации, поэтому цвета
   были жёстко светлыми. В секции застройщика (светлый фон) подпись оказалась
   белым по белому, а значение — бледной лавандой с контрастом ~1.9:1. Базовые
   цвета теперь под светлый фон, светлые варианты — только внутри .on-dark. */
.loc-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.on-dark .loc-row{border-bottom-color:var(--line-dark)}
.loc-row .n{font-size:14.5px;color:var(--ink);flex:0 1 auto}
.on-dark .loc-row .n{color:var(--paper)}
/* nowrap задумывался под короткие значения вроде «8 мин». Реквизиты застройщика
   (юрлицо + ИНН, адрес владения) в него не помещаются и на 390px распирали
   страницу до 459px — значение переносится по словам и прижимается вправо.
   flex-базис обязателен: без него длинное значение съедает подпись слева. */
.loc-row .t{font-family:'Unbounded',sans-serif;font-weight:700;font-size:14px;color:var(--lavender-deep);
  white-space:normal;text-align:right;flex:0 1 auto;min-width:0;hyphens:none;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.on-dark .loc-row .t{color:var(--lavender)}

/* ── сетка удобств / карточки-факты ── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);margin-top:clamp(26px,4vh,46px)}
.cell{background:var(--ink);padding:clamp(20px,2.4vw,30px)}
.cell b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:16.5px;color:var(--paper)}
.cell span{display:block;margin-top:9px;font-size:14px;line-height:1.6;color:var(--muted-on-dark)}
.cell i{display:block;font-family:'Onest',sans-serif;font-size:11px;color:var(--lavender);
  font-style:normal;letter-spacing:0.1em;margin-bottom:11px}

.grid-3.light{background:var(--line)}
.grid-3.light .cell{background:var(--paper)}
.grid-3.light .cell b{color:var(--ink)}
.grid-3.light .cell span{color:var(--muted)}
.grid-3.light .cell i{color:var(--lavender-deep)}

/* ── команда проекта ── */
.team{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:clamp(26px,4vh,44px)}
.team div{background:var(--paper);padding:18px 20px}
.team b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:15.5px;color:var(--ink)}
.team span{display:block;margin-top:5px;font-size:13px;color:var(--muted)}

/* ── заявка ── */
.lead{background:var(--ink);color:var(--paper)}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);align-items:start}
.lead h2{font-size:clamp(27px,3.6vw,46px);color:var(--paper)}
.lead p{margin-top:16px;color:var(--muted-on-dark);font-size:16px;line-height:1.72;max-width:520px}
.lead-facts{display:flex;gap:32px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--line-dark)}
.lead-facts b{display:block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:21px;color:var(--paper);
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.lead-facts span{display:block;font-family:'Onest',sans-serif;font-size:11.5px;
  color:var(--muted-on-dark);margin-top:6px}
.lead-form{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:clamp(22px,3vw,32px)}
.lead-tabs{display:flex;gap:8px;margin-bottom:20px}
.lead-tab{flex:1 1 0;font-family:'Onest',sans-serif;font-weight:600;font-size:12.5px;
  padding:12px 8px;border-radius:999px;cursor:pointer;text-align:center;
  border:1px solid var(--line-dark);color:var(--muted-on-dark);background:transparent;min-height:var(--tap)}
.lead-tab.active{background:var(--grad);border-color:transparent;color:var(--ink)}
.field{margin-bottom:15px}
.field label{display:block;font-family:'Onest',sans-serif;font-weight:600;font-size:12px;
  color:var(--muted-on-dark);margin-bottom:7px}
.field input{width:100%;min-height:var(--tap);background:var(--ink);border:1px solid var(--line-dark);
  border-radius:var(--radius-sm);padding:12px 14px;color:var(--paper);font-family:'Onest',sans-serif;
  font-size:15px}
.field input::placeholder{color:#7d7789}
.field input:focus{outline:none;border-color:var(--lavender)}
.field.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-submit{width:100%;margin-top:4px}
.lead-status{margin-top:13px;font-family:'Onest',sans-serif;font-size:12.5px;min-height:18px;color:var(--lavender)}
.lead-note{margin-top:13px;font-size:12.5px;line-height:1.55;color:#928d9e}

.foot{background:var(--ink);color:#928d9e;padding:32px 0 44px;border-top:1px solid var(--line-dark);
  font-family:'Onest',sans-serif;font-size:12.5px}
.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ── появление ── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (max-width:960px){
  .loc,.lead-grid{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr 1fr}
  .grid-3,.trio{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav-links{display:none}
  .pair,.trio,.grid-3{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .loc-cols{grid-template-columns:1fr}
  .sec{padding:clamp(46px,7vh,68px) 0}
  /* вертикальные/квадратные кадры не разворачиваются на два экрана */
  .pair img,.band img,.trio img{max-height:70vh}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}
@media (pointer:coarse){
  .reveal{opacity:1;transform:none;transition:none}
  .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(30,27,36,0.96)}
}


/* ── кнопка скачивания презентации ──
   Показывается только после успешной отправки формы (см. 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}