/* Шрифты лежат у нас, а не на Google Fonts.
   Причина не в скорости: @import с fonts.googleapis.com блокирует отрисовку,
   а в России без VPN этот адрес не отвечает — страница висит пустой, пока
   браузер не сдастся. На телевизоре это выглядело чёрным экраном.
   Файлы нарезаны по подмножествам: браузер берёт только нужные знаки.
   font-display:swap — текст виден сразу, своим шрифтом становится позже. */
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jost-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jost-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jost-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jost-500-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jost-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jost-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/jost-600-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/jost-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/jost-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-400-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-500-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-500-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-600-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-600-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/manrope-700-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/manrope-700-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/manrope-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/manrope-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/prata-400-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/prata-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Prata';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/prata-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/unbounded-300-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/unbounded-300-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/unbounded-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/unbounded-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/unbounded-400-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/unbounded-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/unbounded-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/unbounded-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Sora — шрифт марки coBroking: латиница и цифры; кириллица идёт Manrope */
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/sora-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/sora-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/sora-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/sora-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/sora-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/sora-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


/* Tropicana OS — редакционная типографика, прямые углы, тонкие линии.
   Без карточек-коробок, без скруглений, без «пилюль».
   Mobile-first: база — iPhone, десктоп в media-запросах. */
:root{
  --ink:oklch(29% .016 62);
  --ink-deep:oklch(19% .014 58);
  --ink-soft:oklch(48% .014 60);
  --gold:oklch(73% .085 76);
  --gold-bright:oklch(85% .09 84);
  --gold-deep:oklch(58% .062 70);
  --sand:oklch(95% .011 76);
  --paper:oklch(98% .006 78);
  --line:oklch(86% .012 76);
  --hair:oklch(90% .008 76);
  --brand:var(--gold-deep);
  --ease:cubic-bezier(.22,1,.36,1);
  /* пружина: затухающий осциллятор, перелёт ~1.4% — посадка с весом,
     но без отскока. Только для объектов с «массой», не для текста */
  --spring:linear(0, 0.0522, 0.1719, 0.3183, 0.4658, 0.5999, 0.7136, 0.805,
    0.8752, 0.9266, 0.9626, 0.9865, 1.0012, 1.0094, 1.0132, 1.014, 1.0132,
    1.0114, 1.0094, 1.0073, 1.0054, 1.0039, 1.0026);
  --font-display:"Prata",Georgia,serif;
  --font-body:"Manrope",system-ui,-apple-system,sans-serif;
  --font-eyebrow:"Jost",system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  /* внутри Telegram во весь экран отступ сверху даёт сам Telegram */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Масштабирование щипком и двойным тапом выключено: на телефоне оно
   срабатывало случайно при свайпе карусели и оставляло страницу «уехавшей».
   touch-action ставим на body, а не на html: в Safari ограничение на корне
   ломает прокрутку вложенных областей, и карусель перестаёт листаться.
   Сам щипок в Safari глушится событиями gesture* — см. скрипт страницы. */
body{touch-action:pan-x pan-y}
/* длинные названия проектов переносятся, а не режутся о край */
h1,h2,h3,.card h3{overflow-wrap:anywhere}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;color:var(--ink-deep);margin:0}
img{max-width:100%}
a{color:inherit;text-decoration:none}
/* На десктопе по странице ходят с клавиатуры: рамка фокуса должна быть
   видна, но только при навигации с клавиш — по клику она мешает. */
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
/* полотно: контент до краёв экрана, поле задаёт один кламп на весь продукт */
:root{--gut:clamp(20px,4vw,56px)}
.bleed{padding-inline:var(--gut)}
.site-header .wrap,footer .wrap{max-width:none;padding-inline:var(--gut)}
.eyebrow,.t-lbl,.co-l,.hero-meta,.card .meta,table th{
  font-family:var(--font-eyebrow);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;font-size:11px;
}

/* ---------- шапка ---------- */
.site-header{
  position:sticky;top:0;z-index:40;padding-top:var(--safe-t);
  background:var(--paper);border-bottom:1px solid var(--hair);
}
/* Механика шапки над галереей. На страницах с тёмным верхом (hdr-over)
   шапка лежит поверх фото: у самого верха — прозрачная вуаль, чтобы
   галерею ничего не перекрывало; после прокрутки — обычное стекло.
   На узком экране прокрутка вниз убирает шапку целиком, первое движение
   вверх возвращает (контроллер в fx_script). */
.hdr-over .site-header{position:fixed;left:0;right:0;top:0}
.js .site-header{
  transition:transform .5s var(--ease),background .5s var(--ease),
             border-color .5s var(--ease);
}
.js .site-header.hdr-hide{transform:translateY(-100%)}
.site-header.hdr-clear{
  background:linear-gradient(to bottom,oklch(10% 0 0/.5),transparent);
  border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.site-header.hdr-clear .brand .name{color:#fff}
.site-header.hdr-clear .brand .name b{color:var(--gold-bright)}
.site-header.hdr-clear .lang-switch a{color:oklch(85% .01 76/.85)}
.site-header.hdr-clear .lang-switch a.on{color:#fff}
.site-header.hdr-clear .nav-cta{color:#fff;border-color:oklch(100% 0 0/.4)}
.site-header.hdr-clear .nav-acc{color:#fff;border-bottom-color:var(--gold-bright)}
.site-header.hdr-clear .nav-acc.on{color:var(--gold-bright)}
/* Стекло — только там, где движок умеет backdrop-filter: без него
   полупрозрачную шапку просвечивает текст страницы, поэтому базой
   остаётся непрозрачная бумага. */
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;gap:12px}
.brand{display:flex;align-items:center;gap:9px}
.brand .mark{
  width:28px;height:28px;background:var(--ink-deep);color:var(--gold-bright);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:15px;
}
.brand .name{font-family:var(--font-display);font-size:17px;color:var(--ink-deep)}
.brand .name b{color:var(--gold-deep);font-weight:400}
.nav-right{display:flex;align-items:center;gap:14px}
.lang-switch{display:flex;gap:2px}
.lang-switch a{
  font-family:var(--font-eyebrow);font-size:11px;font-weight:500;letter-spacing:.1em;
  padding:6px 7px;color:var(--ink-soft);border-bottom:1px solid transparent;
  transition:.35s var(--ease);min-width:26px;text-align:center;
}
.lang-switch a.on{color:var(--ink-deep);border-bottom-color:var(--brand)}
.cur-switch a{font-family:var(--font-body);font-size:14px;padding:6px 5px}
.nav-cta{display:none}

/* ---------- кнопки: прямые, тонкие ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:52px;padding:15px 22px;border:1px solid currentColor;background:none;
  font-family:var(--font-eyebrow);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
  margin-bottom:8px;
}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:active,.btn-primary:hover{background:transparent;color:var(--brand)}
.btn-ghost{color:var(--paper);border-color:oklch(85% .09 84/.4)}
.btn-ghost:active,.btn-ghost:hover{background:oklch(97% .008 78/.1)}

/* вторичные действия — не коробки, а строки, разделённые волоском */
.acts{margin-top:18px;border-top:1px solid oklch(85% .09 84/.22)}
.act{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:54px;padding:15px 0;color:var(--paper);
  border-bottom:1px solid oklch(85% .09 84/.22);
  font-family:var(--font-eyebrow);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  transition:padding .45s var(--ease),color .45s var(--ease);
}
.act::after{content:'→';font-size:15px;letter-spacing:0;opacity:.55;transition:.45s var(--ease)}
.act:hover,.act:active{padding-left:8px}
.act:hover::after,.act:active::after{opacity:1;transform:translateX(4px)}
.act-gold{color:var(--gold-bright)}
/* «Поделиться» — такая же строка, как ссылки рядом, только это кнопка */
button.act{width:100%;background:none;border:0;border-bottom:1px solid oklch(85% .09 84/.22);
  text-align:left;cursor:pointer;font:inherit;font-family:var(--font-eyebrow);
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.acts + p{margin-top:16px}

/* ---------- главная ----------
   Полотно от края до края: тёмная шапка тем же языком, что герои проектов
   и /os/, лента районов с живыми цифрами базы, каталог на волосках без
   мёртвых полей по бокам. */
.hero{position:relative;background:oklch(14% .004 270);color:var(--paper);overflow:clip}

/* ---------- киносцена ----------
   Видео — первый и главный слой, во весь экран под прозрачной шапкой.
   Два ролика лежат один под другим и перетекают классом .on. Поверх —
   титры: карточки лежат стопкой в нижней трети, скрипт по очереди
   проявляет (.on) и растворяет (.out) каждую. svh, а не dvh: полотно не
   дёргается, когда Safari прячет адресную строку. */
.stage{position:relative;height:calc(100svh - 44px);min-height:520px;
  background:oklch(10% .003 270);overflow:clip}
.stage video,.stage noscript img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center 40%;
}

.stage .hv{transition:opacity 1.2s var(--ease)}
.stage .hv:not(.on){opacity:0}
/* вуаль: сверху — под шапку, снизу — под титры; кадр светлый, без неё
   белый текст на белой стене не читается */
.stage-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,oklch(8% 0 0/.55),transparent 24%,transparent 50%,
    oklch(8% 0 0/.3) 68%,oklch(8% 0 0/.82))}
.ttl{position:absolute;left:0;right:0;bottom:clamp(30px,5svh,48px);text-align:center}
.tc{position:absolute;left:var(--gut);right:var(--gut);bottom:0;
  margin:0 auto;max-width:900px;pointer-events:none;
  opacity:0;transform:translateY(14px);
  transition:opacity 1.4s var(--ease),transform 1.4s var(--ease)}
.tc.on{opacity:1;transform:none}
.tc.out{opacity:0;transform:translateY(-8px);transition-duration:1.1s}
.hero .eyebrow{color:var(--gold-bright);display:block;margin-bottom:16px;
  text-shadow:0 1px 10px oklch(0% 0 0/.5)}
/* Unbounded — голос «нового формата»: широкий, современный, кириллица
   родная. Prata остаётся голосом проектов — классика для недвижимости,
   а здесь говорит система. */
.hero h1{color:#fff;font-family:'Unbounded',var(--font-body);font-weight:400;
  font-size:clamp(21px,5.6vw,44px);line-height:1.18;letter-spacing:0;
  margin:0;text-wrap:balance;text-shadow:0 2px 18px oklch(0% 0 0/.45)}
/* золото в заголовке — только у слов, помеченных на сборке (**…**) */
/* слова заголовка выезжают из масок, когда карточка включается */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em}
.hero h1 .w i{display:inline-block;font-style:normal;transform:translateY(110%)}
.hero h1 .w.g i{color:var(--gold-bright)}
.tc.on h1 .w i{animation:rise-up .9s var(--ease) both;animation-delay:calc(var(--wi,0)*60ms + 120ms)}
@keyframes rise-up{to{transform:none}}
.hero p.lead{font-size:clamp(16px,4.2vw,21px);color:oklch(92% .004 260);line-height:1.5;
  margin:0 auto;max-width:44ch;text-shadow:0 1px 12px oklch(0% 0 0/.5)}
.hero .pt{font-family:var(--font-eyebrow);font-weight:500;font-size:clamp(13px,3.4vw,16px);
  letter-spacing:.18em;text-transform:uppercase;line-height:1.7;margin:0;
  color:oklch(97% 0 0/.94);text-shadow:0 1px 10px oklch(0% 0 0/.5)}
/* цитата про Пхукет — второй голос титров: серифом, крупнее пункта,
   с короткой золотой чертой сверху, как эпиграф */
.hero .qt{font-family:var(--font-display);font-size:clamp(21px,5.4vw,34px);line-height:1.25;
  margin:0 auto;max-width:26ch;color:oklch(97% .004 80);text-shadow:0 1px 14px oklch(0% 0 0/.55);
  padding-top:18px;position:relative}
.hero .qt::before{content:'';position:absolute;left:50%;top:0;width:28px;height:1px;
  background:var(--gold-bright);transform:translateX(-50%)}
.stat-row{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:0 clamp(22px,7vw,64px)}
.stat b{display:block;font-family:'Unbounded',var(--font-body);font-weight:300;
  font-size:clamp(30px,9vw,54px);color:#fff;line-height:1.1;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 18px oklch(0% 0 0/.45)}
.stat span{font-family:var(--font-eyebrow);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:oklch(82% .006 260);text-wrap:balance;display:block;max-width:12ch;margin:4px auto 0}
/* цифры выходят лесенкой вслед за карточкой */
.tc .stat{opacity:0;transform:translateY(10px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
  transition-delay:calc(var(--i,0)*180ms + 200ms)}
.tc.on .stat{opacity:1;transform:none}
.tc.out .stat{transition-delay:0s}
/* без скрипта и при reduced-motion: заголовок и цифры стоят на месте,
   плюсы OS не показываем — им нужна смена кадров */
.stage.still .ttl,html:not(.js) .ttl{display:grid;gap:26px;justify-items:center}
.stage.still .tc,html:not(.js) .tc{position:static;opacity:1;transform:none;transition:none}
.stage.still .tc-lead,.stage.still .tc-pt,.stage.still .tc-qt,html:not(.js) .tc-pt,html:not(.js) .tc-qt{display:none}
.stage.still h1 .w i,html:not(.js) h1 .w i{transform:none}
.stage.still .stat,html:not(.js) .stat{opacity:1;transform:none}

/* ---------- кинетическая строка ----------
   Две встречные бегущие линии тем же голосом, что чипы районов: мелкий
   Jost в верхнем регистре. Верхняя — свежие комплексы, цена «от» золотом;
   нижняя едет навстречу — плюсы Tropicana OS. Ничего не кликается:
   каталог сразу под строкой. Позже сюда встанут новости застройщиков. */
.kin{border-top:1px solid oklch(100% 0 0/.12);overflow:clip}
.kin-line{display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.kin-b{border-top:1px solid oklch(100% 0 0/.07)}
.kin-track{
  display:flex;flex:0 0 auto;align-items:center;
  animation:tick 120s linear infinite;will-change:transform;
}
/* нижняя едет навстречу и чуть медленнее — глубина без единого скрипта */
.kin-b .kin-track{animation:tick-r 150s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}
@keyframes tick-r{from{transform:translateX(-100%)}to{transform:none}}
.kin-i{
  display:flex;align-items:center;min-height:44px;white-space:nowrap;
  font-family:var(--font-eyebrow);font-weight:500;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:oklch(80% .008 76);
}
.kin-i b{font-weight:500;color:var(--gold-bright);margin-left:8px}
.kin-sep{color:var(--gold-deep);font-size:8px;padding:0 18px;flex:0 0 auto}
.kin-b .kin-i{color:oklch(58% .009 74)}
@media (prefers-reduced-motion:reduce){
  .kin-track{animation:none}
  .kin-track[aria-hidden]{display:none}
  .kin-line{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scrollbar-width:none}
  .hero h1 .w i{animation:none;transform:none}
}

/* панель фильтров на своей линии; на большом экране прилипает под шапкой */
.filterbar{background:var(--paper);z-index:30}
.filters{
  display:flex;gap:0;padding:12px 0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.filters+.filters{border-top:1px solid var(--hair)}
.filters::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;border:none;background:none;padding:8px 2px;margin-right:20px;
  font-family:var(--font-eyebrow);font-size:12px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);cursor:pointer;white-space:nowrap;
  border-bottom:1px solid transparent;transition:.35s var(--ease);
}
.chip.active{color:var(--ink-deep);border-bottom-color:var(--brand)}
/* ряд фильтров по бюджету и спальням: подписи групп, разделитель, счётчик */
.filters-q{align-items:center}
.f-lbl{flex:0 0 auto;font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin-right:14px}
.f-sep{flex:0 0 1px;height:18px;background:var(--hair);margin:0 20px 0 4px}
.f-count{flex:0 0 auto;font-size:12px;color:var(--ink-soft);margin-right:16px;white-space:nowrap}
.f-reset{color:var(--gold-deep)}
/* Пустой список не оставляем белым полем: строка объясняет, почему пусто,
   и рядом стоит выход — тот же «Сбросить», что в панели фильтров */
.grid-empty{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px;padding:64px 20px 80px;margin:0;text-align:center;
  font:400 15px/1.5 var(--font-body);color:var(--ink-soft)}
.grid-empty[hidden]{display:none}
.grid-empty .chip{color:var(--gold-deep)}
.chip[data-bd]{margin-right:14px;min-width:20px;text-align:center}

.grid{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 70px -1px;
  border-bottom:1px solid var(--hair);overflow:clip;scroll-margin-top:130px}
/* 60 fps на длинном каталоге: карточки за экраном не рендерятся вовсе,
   браузер тратит кадр только на видимые. Заглушка задаёт только высоту:
   с `contain-intrinsic-size` одно значение уходит и в ширину, и на узком
   экране нерасрисованная карточка становится шире вьюпорта — страница
   начинает ездить вбок */
.cell{content-visibility:auto;contain-intrinsic-block-size:auto 420px;
  border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.card{display:block;padding:0 0 24px}
.card .media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink-deep)}
.card .media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.card:active .media img,.card:hover .media img{transform:scale(1.03)}
.card .media .glyph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:44px;color:oklch(85% .09 84/.5);
}
.card .hot-badge{
  position:absolute;top:0;left:0;z-index:2;background:var(--ink-deep);color:var(--gold-bright);
  font-family:var(--font-eyebrow);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;padding:7px 12px;
}
.card .body{padding:16px 20px 0;display:flex;flex-direction:column;gap:5px}
.card h3{font-size:20px;line-height:1.25}
.card .meta{color:var(--ink-soft)}
.card .price{margin-top:8px;font-size:21px;line-height:1.2;color:var(--ink-deep)}

/* ---------- цифры: один голос на весь продукт ----------
   Число — Unbounded, как счётчики на главной; знак валюты — тем же шрифтом,
   «от» и единица (млн THB, K, M) — мелким Jost в верхнем регистре, как
   подписи под счётчиками. Единица подменяется сразу, число докручивается. */
.mn,.ms{font-family:'Unbounded',var(--font-body);font-weight:300;font-style:normal;
  font-variant-numeric:tabular-nums;letter-spacing:0}
.mu,.pf,.ask{font-family:var(--font-eyebrow);font-weight:500;font-style:normal;
  font-size:.5em;letter-spacing:.12em;text-transform:uppercase;vertical-align:.2em}
.mu{margin-left:.5em}
.pf{margin-right:.5em}
.ms:empty{display:none}
.ask{font-size:12px;color:var(--ink-soft);vertical-align:baseline}
.card .price .ask{display:block;padding-top:6px}
/* в таблице юнитов и в бегущей строке — вес и голос окружения */
table .mn,table .ms{font-weight:400}
.kin-i .mn,.kin-i .ms,.kin-i .mu,.kin-i .pf{font:inherit;letter-spacing:inherit;vertical-align:baseline}
.kin-i .mu,.kin-i .pf{margin:0 0 0 .45em}
.kin-i .pf{margin:0 .45em 0 0}

/* ---------- hero проекта ---------- */
.hero-shot{position:relative;background:var(--ink-deep);overflow:clip}
/* overscroll-behavior: свайп у первого кадра не должен перерастать в
   системный жест «назад» — из него карусель возвращается замершей между
   кадрами, с полосой фона вместо фото */
.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.carousel::-webkit-scrollbar{display:none}
/* слайд обрезает свой кадр: «дыхание» увеличивает фото до 105%, и без
   обрезки оно вылезает за поля в соседний слайд */
.carousel .slide{flex:0 0 100%;scroll-snap-align:center;overflow:hidden}
.hero-shot .carousel .slide{height:var(--hh,62dvh);min-height:380px}
.carousel .slide img{width:100%;height:100%;object-fit:cover;display:block}
/* ролик застройщика — такой же кадр, как фото: то же кадрирование, тот же
   ритм листания. Тёмная подложка, чтобы до первого кадра не белело */
.slide-vid{background:var(--ink-deep)}
.slide-vid video{width:100%;height:100%;object-fit:cover;display:block}

.hero-overlay{
  position:absolute;left:0;right:0;bottom:0;padding:58px 0 22px;pointer-events:none;
  background:linear-gradient(to top,
    oklch(19% .014 58/.94) 0%, oklch(19% .014 58/.84) 13%,
    oklch(19% .014 58/.64) 28%, oklch(19% .014 58/.42) 44%,
    oklch(19% .014 58/.22) 60%, oklch(19% .014 58/.08) 78%,
    transparent 94%);
}
.hero-overlay .wrap{pointer-events:auto}
/* на кадрах со второго и дальше текст с вуалью растушёвываются на месте;
   спрятанный слой гасим совсем, чтобы невидимая хлебная крошка не ловила тапы */
.hero-overlay{will-change:opacity}
.hero-overlay.gone{visibility:hidden}
.crumb{
  font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:oklch(98% .006 78/.72);display:inline-flex;align-items:center;
  min-height:44px;margin-bottom:2px;
}
.hero-overlay h1,.hero-plain h1{color:#fff;font-size:clamp(28px,8vw,54px);line-height:1.06;margin-bottom:8px}
.hero-meta{color:var(--gold-bright);margin-bottom:14px}
.hero-price{
  display:inline-block;font-size:26px;line-height:1.2;color:#fff;
  border-left:2px solid var(--gold);padding-left:12px;
}
.hero-price .mu,.hero-price .pf{color:oklch(85% .01 76/.85)}
.hero-hot{
  display:inline-block;background:var(--brand);color:#fff;
  font-family:var(--font-eyebrow);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;padding:5px 11px;margin-bottom:12px;
}
.hero-plain{background:var(--ink-deep);padding:50px 0 40px}
.hdr-over .hero-plain{padding-top:calc(106px + var(--safe-t))}
.no-photo{margin-top:16px;font-size:12px;color:oklch(98% .006 78/.5)}
.car-btn{display:none}
.car-count{
  position:absolute;bottom:14px;right:20px;z-index:5;
  font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.14em;color:#fff;opacity:.85;
}

/* ---------- цифры ---------- */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid var(--hair);margin-bottom:8px}
.tile{padding:16px 0;display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--hair)}
.tile:nth-child(odd){padding-right:16px}
.tile:nth-child(even){padding-left:16px;border-left:1px solid var(--hair)}
/* длинная строка (сдача с двумя датами) набирается мельче: тем же кеглем она
   уходит в пять строк и растягивает весь ряд, оставляя соседа пустым */
.tile.long .t-val{font-size:15px;line-height:1.3}
/* диапазон не рвётся по тире: «43.3–» на одной строке, «108.8 м²» на другой */
.t-val .nb{white-space:nowrap}
.t-lbl{color:var(--ink-soft)}
.t-val{font-family:'Unbounded',var(--font-body);font-weight:300;font-size:19px;line-height:1.25;color:var(--ink-deep);text-wrap:balance;font-variant-numeric:tabular-nums}

/* ---------- секции ---------- */
.content{padding:6px 0 0}
.block{padding:26px 0;border-bottom:1px solid var(--hair)}
.block h2{font-size:21px;margin-bottom:14px}
.lead-p{font-size:15.5px;color:var(--ink-soft);margin:0}
.lead-p a{color:var(--brand);border-bottom:1px solid color-mix(in oklch,var(--brand) 35%,transparent)}
/* пальцем в ссылку 23 пикселя высотой не попасть. Зону касания растим
   невидимым слоем: отступы сдвинули бы подчёркивание вниз от текста. */
.lead-p a,[data-internal] a{position:relative}
.lead-p a::after,[data-internal] a::after{content:'';position:absolute;left:0;right:0;top:-13px;bottom:-13px}
.lead-p{line-height:1.7}
.muted{color:var(--ink-soft)}
.small{font-size:12.5px}
table.units{width:100%;border-collapse:collapse;font-size:15px}
table.units th{text-align:left;padding:0 0 10px;color:var(--ink-soft);border-bottom:1px solid var(--line)}
table.units td{padding:13px 0;border-bottom:1px solid var(--hair);vertical-align:top}
table.units td:nth-child(2),table.units th:nth-child(2){padding-left:12px;white-space:nowrap}
table.units td:last-child,table.units th:last-child{text-align:right}
table.units td:last-child{font-weight:600;color:var(--ink-deep)}
/* Вместо цены в колонке иногда стоит примечание из прайса — строка
   длиннее суммы. Пусть переносится и набирается мельче, а не вылезает
   за край таблицы */
table.units td:last-child{overflow-wrap:anywhere}
table.units td:last-child:not(:has(.money)){font-weight:500;font-size:13.5px;color:var(--ink-soft)}
/* когда площадь не указана, столбцы съезжаются и заголовки слипаются */
table.units th:nth-child(2){padding-right:12px}
/* график платежей */
.pay{border-top:1px solid var(--hair)}
.pay-row{display:flex;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--hair)}
.pay-share{
  /* «200 000 THB» в 88px не помещается и рвётся на «200 000» / «THB»:
     колонка тянется по содержимому, но не уже минимума */
  flex:0 0 auto;min-width:88px;font-family:'Unbounded',var(--font-body);font-weight:300;font-size:17px;
  color:var(--brand);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pay-what{font-size:15px;color:var(--ink-soft)}
.pay-note{margin-top:14px}

ul.invest{margin:0;padding-left:18px;font-size:15.5px;color:var(--ink-soft)}
ul.invest li{margin-bottom:8px}
.dev-block{display:flex;align-items:center;gap:18px}
/* знак застройщика бывает и квадратным, и вытянутым словом: держим высоту,
   ширину отпускаем, иначе горизонтальный логотип сжимается в полоску */
.dev-logo{width:auto;max-width:132px;height:62px;object-fit:contain;flex-shrink:0}
.dev-logo.on-dark{background:var(--ink-deep);padding:9px}
.dev-logo-text{
  display:flex;align-items:center;justify-content:center;
  color:var(--brand);font-family:var(--font-display);font-size:26px;
  border-bottom:1px solid var(--brand);height:auto;padding-bottom:6px;align-self:center;
}
.dev-block a{
  font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);
  display:inline-flex;align-items:center;min-height:44px;
}

/* ---------- калькулятор ---------- */
.calc-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:22px}
.calc-grid label{display:flex;flex-direction:column;gap:6px;
  font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.calc-grid .cval{font-family:'Unbounded',var(--font-body);font-weight:300;font-size:19px;color:var(--ink-deep);text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums}
/* ползунок: волосок-дорожка и узкая засечка вместо «квадрата с рамкой».
   Зона касания добирается прозрачным padding, сама засечка остаётся тонкой. */
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;
  background:none;outline:none;margin:2px 0 0;cursor:pointer;
  touch-action:pan-y;
}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--line)}
input[type=range]::-moz-range-track{height:1px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:3px;height:22px;margin-top:-10.5px;
  background:var(--brand);border:0;cursor:pointer;
  transition:height .3s var(--ease),width .3s var(--ease);
}
input[type=range]::-moz-range-thumb{
  width:3px;height:22px;background:var(--brand);border:0;border-radius:0;cursor:pointer;
}
input[type=range]:active::-webkit-slider-thumb{height:28px;width:5px}
input[type=range]:focus-visible::-webkit-slider-thumb{height:28px;width:5px}
.calc-out{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:14px}
.co{padding:14px 0;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:2px}
.co:nth-child(even){padding-left:16px;border-left:1px solid var(--hair)}
.co:nth-child(odd){padding-right:16px}
.co-l{color:var(--ink-soft)}
.co b{font-family:'Unbounded',var(--font-body);font-size:21px;font-weight:300;line-height:1.2;color:var(--ink-deep);font-variant-numeric:tabular-nums}
.co i{font-style:normal;font-size:12px;color:var(--ink-soft)}
.co b .ms{font-size:1em;color:inherit}
.co b .mu{font-size:.5em;color:inherit}
.co.accent b,.co.accent i{color:var(--brand)}

/* ---------- панель действий ---------- */
.cta-box{background:var(--ink-deep);color:var(--paper);padding:28px 20px calc(28px + var(--safe-b));margin:0 -20px}
.cta-box h2{color:#fff;font-size:20px;margin-bottom:8px}
.cta-box .btn{margin-bottom:0}
.cta-box p{font-size:14.5px;color:oklch(98% .006 78/.75);margin:0 0 20px}
.disclaimer{font-size:11.5px;color:var(--ink-soft);border-top:1px solid var(--hair);margin-top:16px;padding-top:14px}
.cta-box .disclaimer{color:oklch(98% .006 78/.6);border-top-color:oklch(85% .09 84/.2)}
.cta-box .muted{color:oklch(98% .006 78/.75)}

footer{border-top:1px solid var(--hair);padding:24px 0 calc(24px + var(--safe-b));font-size:12px;color:var(--ink-soft)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
footer a{color:var(--gold-deep)}
/* реквизиты и дисклеймер: вторая строка подвала, мельче и тише */
footer .legal-line{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);
  flex-direction:column;gap:6px;font-size:11px;line-height:1.45;color:var(--ink-soft)}
/* согласие под кнопкой входа */
.join-consent{margin:0 0 4px;font-size:12px;line-height:1.4;color:var(--ink-soft)}
.join-consent a{color:var(--gold-deep)}
/* ---------- политика и условия ----------
   Текст для чтения: одна колонка, ширина строки под 65 знаков, без эффектов */
.legal .wrap{max-width:720px;padding:36px var(--gut) 72px}
.legal h1{font-size:clamp(28px,5vw,38px);margin:8px 0 8px}
.legal h2{font-size:19px;margin:30px 0 8px}
.legal p{font-size:15.5px;line-height:1.6;margin:0 0 12px;max-width:66ch}
.legal .muted{color:var(--ink-soft);margin-bottom:8px}
.legal .muted a{color:var(--gold-deep)}

/* ---------- планшет ---------- */
@media (min-width:640px){
  .wrap{padding:0 32px}
  /* горизонтальную ленту мышью не прокрутить: с мыши фильтры переносятся
     на следующую строку, и последние районы перестают уезжать за край */
  .filters{flex-wrap:wrap;overflow-x:visible;row-gap:2px}
  .site-header .wrap{height:64px}
  .nav-cta{
    display:inline-flex;align-items:center;min-height:38px;padding:0 18px;
    border:1px solid var(--ink-deep);color:var(--ink-deep);
    font-family:var(--font-eyebrow);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
    transition:.4s var(--ease);
  }
  .nav-cta:hover{background:var(--ink-deep);color:var(--paper)}
  .grid{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .tile{padding:18px 16px;border-left:1px solid var(--hair);border-top:1px solid var(--hair)}
  .tile:first-child{padding-left:0;border-left:none}
  .calc-grid{grid-template-columns:1fr 1fr;gap:20px 32px}
  .calc-out{grid-template-columns:repeat(4,1fr)}
  .co{padding:16px;border-left:1px solid var(--hair)}
  .co:first-child{padding-left:0;border-left:none}
  .cta-box{margin:0;padding:30px}
  /* с планшета кадр показывается целиком: 16:9 — то, в чём застройщики
     их и рисуют, а доля высоты экрана резала рендер по краям */
  .hero-shot .carousel .slide{height:auto;min-height:0;aspect-ratio:var(--hero-ar,1.78);max-height:78dvh}
  /* стрелки карусели: тёмная полупрозрачная плашка с волосяной рамкой —
     голый знак с тенью терялся на светлом небе, а половина кадров вторички
     снята днём против неба */
  .car-btn{
    display:flex;position:absolute;top:50%;transform:translateY(-50%);z-index:5;
    width:44px;height:44px;border:1px solid oklch(98% .006 78/.28);
    background:oklch(19% .014 58/.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    color:#fff;font-size:24px;line-height:1;align-items:center;justify-content:center;
    padding:0 0 3px;cursor:pointer;opacity:.85;
    transition:opacity .4s var(--ease),background .4s var(--ease);
  }
  .car-btn:hover{opacity:1;background:oklch(19% .014 58/.7)}
  .car-prev{left:24px}
  .car-next{right:24px}
}

/* ---------- десктоп ---------- */
@media (min-width:1000px){
  /* Ролик вертикальный, экран широкий: кадр стоит колонной во весь рост
     по центру, по бокам — чёрное поле, как в кино. Титры идут по центру
     через весь экран, поверх колонны и поля. */
  .stage{height:calc(100svh - 44px);min-height:600px}
  .stage video{left:50%;right:auto;width:auto;aspect-ratio:9/16;
    transform:translateX(-50%);object-position:center}
  /* горизонтальную версию резать колонной незачем: она уже в пропорции
     экрана и раскрывается во всю ширину */
  .stage.wide video{left:0;right:0;width:100%;aspect-ratio:auto;
    transform:none;object-position:center center}
  .stage-veil{background:linear-gradient(to bottom,oklch(8% 0 0/.5),transparent 22%,transparent 46%,
    oklch(8% 0 0/.35) 66%,oklch(8% 0 0/.86))}
  .ttl{bottom:clamp(44px,7svh,72px)}
  .hero h1{font-size:clamp(34px,3.2vw,48px)}
  .stat b{font-size:56px}
  .stat span{font-size:11.5px}
  .filterbar{position:sticky;top:56px}

  .grid{grid-template-columns:repeat(3,1fr)}
  .content{display:grid;grid-template-columns:1.7fr 1fr;gap:56px;padding-bottom:70px}
  .side{position:sticky;top:96px;align-self:start}
  .hero-overlay{padding:140px 0 40px}
  .hero-price{font-size:30px}

  /* мера строки: на 700px абзац растягивается знаков на девяносто, читать
     такое тяжело — держим в районе шестидесяти пяти */
  .block p.lead-p,.block ul.invest,.pay-note{max-width:64ch}

  /* строка юнита кликабельна — под курсором это должно быть видно */
  tbody tr:hover{background:oklch(95% .011 76/.6)}
}

/* на широком экране в ряд помещается четвёртая карточка — иначе колонки
   разъезжаются до полуметра и каталог теряет плотность */
@media (min-width:1560px){
  .grid{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:2100px){
  .grid{grid-template-columns:repeat(5,1fr)}
}

/* ---------- герой проекта на большом экране ----------
   Кадры у застройщиков в основном 16:9. Растянутый во всю ширину герой
   высотой в долю экрана превращал их в полосу 2.8:1 — от рендера оставалась
   середина, а смысл кадра (двор, бассейн, силуэт корпусов) уезжал за края.
   На широком экране кадр получает свои 16:9, а освободившаяся справа
   колонка занята названием и ценой: ширина уходит под содержание, а не под
   обрезку. */
@media (min-width:1000px){
  .hero-shot{
    display:grid;grid-template-columns:minmax(0,1.62fr) minmax(300px,1fr);
    align-items:stretch;
  }
  .hero-shot .carousel{grid-area:1 / 1 / 2 / 2}
  .hero-shot .carousel .slide{height:auto;min-height:0;aspect-ratio:var(--hero-ar,1.78);max-height:78dvh}
  /* стрелки и счётчик больше не абсолютные: раскладываем их в ячейку кадра,
     иначе «вперёд» уезжает на текстовую колонку */
  .hero-shot .car-btn,.car-count{position:static;grid-area:1 / 1 / 2 / 2;align-self:center;transform:none}
  .hero-shot .car-prev{justify-self:start;margin-left:18px}
  .hero-shot .car-next{justify-self:end;margin-right:18px}
  .car-count{align-self:end;justify-self:end;margin:0 18px 16px 0}
  .hero-overlay{
    position:static;grid-area:1 / 2 / 2 / 3;background:var(--ink-deep);
    display:flex;align-items:center;padding:44px 0;
  }
  .hero-overlay .wrap{max-width:none;padding:0 40px}
  .hero-overlay h1{font-size:clamp(30px,2.5vw,44px)}
}

/* ---------- планировка: строка типа и окно ---------- */
/* Тип в таблице юнитов — кнопка: за ним лежит планировка. Кнопка не должна
   выглядеть кнопкой, поэтому берёт вид ячейки и подчёркивается волоском. */
.plan-open{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  text-align:left;cursor:pointer;min-height:44px;justify-content:center;
}
.plan-open b{border-bottom:1px solid var(--brand);padding-bottom:1px}
.plan-open:hover b,.plan-open:focus-visible b{color:var(--brand)}
.plan-hint{
  font-family:var(--font-eyebrow);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);
}
.plan-hint::before{content:'📐 '}

.hot-agent{background:oklch(48% .12 258/.92)}   /* заметка агенту — другой цвет, чтобы не путать с офертой клиенту */

.plan-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center}
/* display:flex перебивает атрибут hidden, и закрытое окно продолжает
   перехватывать клики по странице — гасим явно */
.plan-modal[hidden]{display:none}
.plan-scrim{position:absolute;inset:0;background:oklch(19% .014 58/.82)}
.plan-panel{
  position:relative;z-index:1;background:var(--paper);width:100%;height:100%;
  display:flex;flex-direction:column;
  padding:calc(12px + var(--safe-t)) 16px calc(12px + var(--safe-b));
}
.plan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding-bottom:10px;border-bottom:1px solid var(--hair)}
.plan-head .eyebrow{display:block;color:var(--ink-deep)}
.plan-meta{font-size:12.5px;color:var(--ink-soft)}
button.plan-close{
  background:none;border:0;font-size:22px;line-height:1;color:var(--ink-soft);
  cursor:pointer;padding:6px 4px;min-width:44px;min-height:44px;
}
button.plan-close:hover{color:var(--ink-deep)}
.plan-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:12px 0}
.plan-stage img{max-width:100%;max-height:100%;object-fit:contain}
.plan-nav{display:flex;align-items:center;justify-content:center;gap:20px;
  padding-top:10px;border-top:1px solid var(--hair)}
.plan-nav[hidden]{display:none}
.plan-arrow{background:none;border:1px solid var(--line);color:var(--ink-deep);
  min-width:52px;min-height:44px;font-size:17px;cursor:pointer;transition:.35s var(--ease)}
.plan-arrow:hover{background:var(--ink-deep);color:var(--paper);border-color:var(--ink-deep)}
.plan-count{font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.14em;color:var(--ink-soft)}

@media (min-width:760px){
  .plan-panel{width:min(920px,92vw);height:auto;max-height:88vh;padding:22px 24px}
}

/* ---------- движение ----------
   Смена страниц — мягкий наплыв (cross-document view transition без
   общих элементов), активный кадр карусели медленно дышит камерой, как в
   люксовых CGI-роликах. Всё движение выключается системной настройкой
   reduced motion. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}
/* смена страниц — мягкий наплыв на месте: ничего не летит и не тянется,
   старая страница растворяется в новую одним темпом и одной кривой */
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.45s;animation-timing-function:var(--ease);
}

/* Стекло — только у шапки, которая лежит поверх страницы (hdr-over,
   position:fixed). У sticky-шапки в потоке (/russia/, /exclusive/, лоты)
   WebKit рисует размытие отдельным слоем, который отстаёт от прокрутки и
   от transform: шапка дёргается и при уходе наверх оставляет мутную
   полосу. Там остаётся непрозрачная бумага. */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hdr-over .site-header{
    background:oklch(98% .006 78/.88);
    -webkit-backdrop-filter:blur(16px) saturate(1.6);
    backdrop-filter:blur(16px) saturate(1.6);
  }
}
/* На узком экране шапка уезжает transform-ом на каждую прокрутку: свой
   слой заранее, чтобы уход не ждал перерисовки страницы под ней */
@media (max-width:999px){.js .site-header{will-change:transform}}

@media (prefers-reduced-motion:no-preference){
  .hero-shot .slide img{transition:transform 1.4s var(--ease)}
  .hero-shot .slide img.breathe{animation:breathe 14s var(--ease) both}
}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.055)}}

/* лист планировки въезжает снизу и садится с весом; подложка проявляется */
@media (prefers-reduced-motion:no-preference){
  .plan-modal:not([hidden]) .plan-panel{animation:sheetIn .6s var(--spring)}
  .plan-modal:not([hidden]) .plan-scrim{animation:fadeIn .3s var(--ease)}
}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* подчёркивание валюты скользит между позициями, а не мигает; базой
   остаётся статичная черта на активной кнопке — на случай без JS */
.cur-switch{position:relative}
.cur-switch.has-bar .cur-btn{border-bottom-color:transparent!important}
.cur-switch.has-bar::after{
  content:'';position:absolute;bottom:0;height:1px;background:var(--brand);
  left:var(--u-x,0);width:var(--u-w,0);transition:left .4s var(--ease),width .4s var(--ease);
}


/* офлайн-блок на главной */
.offline-block{border-top:1px solid var(--hair);padding:34px 20px 46px}
.offline-block h2{font-size:24px;margin-bottom:8px}
.off-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.off-status{font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.off-bar{margin-top:14px;height:2px;background:var(--hair)}
.off-bar i{display:block;height:100%;width:0;background:var(--brand);
  transition:width .3s var(--ease)}

/* Приближение на трёх пальцах: жест осознанный, случайно не сработает.
   Своего touch-action у области нет — панорамирование наследуется от body,
   иначе браузер перестаёт листать карусель одним пальцем. Слой поднимаем
   только на время жеста: постоянный will-change на прокручиваемой области
   в Safari отнимает инерцию. */
.zoomable.zooming{will-change:transform}
.zoom-hint{
  position:absolute;left:0;right:0;bottom:12px;text-align:center;pointer-events:none;
  font-family:var(--font-eyebrow);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:oklch(98% .006 78/.72);opacity:0;transition:opacity .4s var(--ease);
}
.zoom-hint.on{opacity:1}

/* ---------- появление блоков ----------
   Механика с /os/: блок входит в кадр снизу с растушёвкой, лесенка задаётся
   через --i. Прячем только при работающем скрипте (класс js ставит head) —
   без него страница просто статична. */
.js .rv{opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--i,0)*70ms);}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
}

/* ---------- телефон лёжа: галерея во весь экран ----------
   В горизонтальной развёртке кадр — главный и единственный: галерея
   занимает весь экран, подпись живёт на первых кадрах и растворяется,
   остальная страница — свайпом вниз. Ограничение по высоте отсекает
   десктопные мониторы: они тоже «горизонтальные». */
@media (orientation:landscape) and (max-height:620px){
  /* телефон лежит: сцена во весь экран, кадр колонной по центру */
  .stage{height:100svh;min-height:0}
  .stage video{left:50%;right:auto;width:auto;aspect-ratio:9/16;
    transform:translateX(-50%);object-position:center}
  .stage.wide video{left:0;right:0;width:100%;aspect-ratio:auto;
    transform:none;object-position:center center}
  .ttl{bottom:22px}
  .hero h1{font-size:clamp(20px,4.6vh,30px)}
  .stat b{font-size:clamp(26px,8vh,40px)}
  .hero-shot .carousel .slide,
  .hero-shot .carousel .slide[style]{
    height:100dvh;max-height:none;min-height:0;aspect-ratio:auto;
  }
  .hero-overlay{padding:44px 0 18px}
  .hero-overlay h1{font-size:clamp(26px,5.5vh,40px)}
}

/* ---------- кино: телефон лёг ----------
   Поворот убирает шапку и титр вниз, как уехавший субтитр: кадр остаётся
   один. Только transform и opacity, обратно тем же путём. Вуаль под
   текстом уходит вместе с ним. */
.js .hero-overlay{will-change:transform,opacity}
body.cine .site-header,body.decine .site-header{
  transition:transform .8s var(--ease),opacity .45s var(--ease),background .5s var(--ease)}
body.cine .site-header{transform:translateY(28px);opacity:0;pointer-events:none}
body.cine .hero-overlay,body.decine .hero-overlay{
  transition:transform .9s var(--ease),opacity .55s var(--ease)}
body.cine .hero-overlay{transform:translateY(72px);opacity:0!important;pointer-events:none}
body.cine .car-count{opacity:.5}

/* ---------- задержка взгляда на ролике ----------
   Экран замер на ролике: страница под ним плавно гаснет, кадр вырастает
   вниз до полного экрана. Рост кадра — единственная высота, которую
   страница анимирует: один блок в самом верху; всё, что ниже, уходит в
   прозрачность и не рисуется. Выход — пропорционально прокрутке, без
   переходов: кадр следует за пальцем. */
.dw{transition:opacity .8s var(--ease)}
body.dwell .hero-shot .carousel .slide{transition:height .9s var(--ease)}
body.dwell .dw{opacity:var(--dwo,0)}
body.dwell{background:var(--ink-deep);transition:background .8s var(--ease)}
body.dwell-scrub .hero-shot .carousel .slide,body.dwell-scrub .dw,body.dwell-scrub{transition:none}

/* Лист планировки под воротами приходит редиректом, и картинка ломается
   крестиком браузера. Вместо него — экран с понятным выходом на доступ. */
.plan-miss{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;padding:28px 22px}
.plan-miss[hidden]{display:none}
.plan-miss b{font-family:'Unbounded',var(--font-body);font-weight:400;font-size:19px}
.plan-miss p{max-width:34ch;color:var(--ink-soft);font-size:14px;margin:0}
.plan-miss .btn{margin:6px 0 0}

/* ---------- подборка лотов для клиента ----------
   Отмеченная ячейка загорается золотом и чуть вздыхает, остальные
   отступают в полутон. Подходящие по фильтру проявляются по очереди. */
.lot{transition:background .3s var(--ease),opacity .45s var(--ease),transform .45s var(--ease)}
.lot.pick{background:oklch(93% .05 84);box-shadow:inset 0 0 0 1.5px var(--gold-deep);opacity:1}
.lot.pick b{color:var(--gold-deep)}
.lot.pick b::before{content:'✓ ';font-size:11px}
.lot.pick.rs{box-shadow:inset 0 0 0 1.5px var(--gold-deep),inset 0 2px 0 var(--gold)}
.ch-grid.has-pick .lot:not(.pick){opacity:.5}
.ch-grid.picking .lot.ok{cursor:copy}
@keyframes lotIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes lotPop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.js .lot.fit{animation:lotIn .5s var(--ease) both;animation-delay:calc(var(--i,0)*45ms)}
.js .lot.pop{animation:lotPop .45s var(--ease)}
.ch-pick{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin:12px 0 0}
.ch-pick .act{margin:0;flex:0 0 auto}
.ch-pick .act.on{color:var(--gold-deep);border-color:var(--gold-deep)}
.ch-pick .hint{font-size:13px;color:var(--ink-soft);flex:1 1 100%}
.ch-bar{position:sticky;bottom:calc(10px + var(--safe-b));z-index:30;display:flex;align-items:center;
  flex-wrap:wrap;justify-content:space-between;gap:2px 12px;background:var(--ink-deep);color:#fff;
  padding:12px var(--gut);margin:14px calc(-1*var(--gut)) 0;
  transform:translateY(130%);opacity:0;transition:transform .5s var(--ease),opacity .4s var(--ease)}
.ch-bar.in{transform:none;opacity:1}
.ch-bar b{flex:1 0 100%;font-family:'Unbounded',var(--font-body);font-weight:400;font-size:14px;letter-spacing:0;white-space:nowrap}
.ch-bar .acts{display:flex;gap:6px;margin:0;flex:1 1 100%;justify-content:space-between;min-width:0}
.ch-bar .act{color:#fff;border-color:oklch(100% 0 0/.3);min-height:40px;padding:0 9px;margin:0;font-size:11px;letter-spacing:.08em;flex:0 1 auto;white-space:nowrap}
.ch-bar .act span::after{display:none}
.ch-bar .act.gold{color:var(--gold-bright);border-color:var(--gold-bright)}
@media (min-width:520px){
  .ch-bar b{flex:0 0 auto}
  .ch-bar .acts{flex:0 1 auto;justify-content:flex-end}
}
@media (min-width:1000px){.ch-bar{margin-inline:0;bottom:16px}}
@media (prefers-reduced-motion:reduce){
  body.cine .site-header,body.cine .hero-overlay{transform:none;transition:opacity .3s}
  body.dwell .hero-shot .carousel .slide,.dw,body.dwell,.lot{transition:none}
  .js .lot.fit,.js .lot.pop{animation:none}
  .ch-bar{transition:opacity .2s}
}

/* ---------- приглашение клиенту ----------
   Нижний лист после второго просмотренного комплекса. Не стена: каталог
   открыт, лист один раз, его можно отложить. Языки — кнопками без флагов. */
.kin-v{font-style:normal;font-size:8px;color:var(--gold-bright);margin-right:8px;vertical-align:.1em}
/* Лист не перекрывает страницу: вуаль не ловит касания, под ней всё
   листается и нажимается; сам лист — только на своей площади. */
.join{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:oklch(10% 0 0/.0);transition:background .6s var(--ease);pointer-events:none}
/* display:flex перебивает атрибут hidden: без этого правила закрытый лист
   торчал снизу на широком экране, а «Позже» ничего не убирала */
.join[hidden]{display:none}
.join.in{background:oklch(10% 0 0/.22)}
.join-sheet{pointer-events:auto;box-shadow:0 -1px 0 var(--hair),0 -24px 48px oklch(10% 0 0/.18);
  width:100%;max-width:560px;background:var(--paper);color:var(--ink);
  padding:22px var(--gut) calc(22px + var(--safe-b));border-top:1px solid var(--hair);
  transform:translateY(100%);transition:transform .7s var(--ease)}
.join.in .join-sheet{transform:none}
.join-sheet .eyebrow{display:block;color:var(--gold-deep);margin-bottom:10px}
.join-sheet h3{font-size:24px;line-height:1.15;margin:0 0 8px}
.join-sheet p{margin:0 0 16px;font-size:15px;color:var(--ink-soft)}
.join-langs{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--hair);border-left:1px solid var(--hair);margin-bottom:18px}
.jl{flex:1 0 25%;min-height:44px;padding:0 6px;background:none;border:0;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  font-family:var(--font-eyebrow);font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease)}
.jl.on{background:var(--ink-deep);color:var(--gold-bright)}
.join-sheet .btn{margin-bottom:6px}
.join-later{width:100%;min-height:44px;background:none;border:0;cursor:pointer;
  font-family:var(--font-eyebrow);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
@media (min-width:1000px){
  .join{align-items:center}
  .join-sheet{border:1px solid var(--hair);padding:28px 32px}
  .jl{flex-basis:20%}
}
@media (prefers-reduced-motion:reduce){.join,.join-sheet{transition:none}}

/* ---------- шахматка ----------
   Корпус — вкладки, этажи — строки сверху вниз, лоты — клетки на волосках.
   Свободный — бумага, холд — золото, продан — зачёркнут и погашен. */
/* право владения над шахматкой: лизхолд и фрихолд. Кнопки прямоугольные,
   как весь интерфейс, активная набрана чернилами по бумаге */
.ch-own{display:flex;align-items:center;gap:0;margin:18px 0 0;border:1px solid var(--line);width:max-content;max-width:100%}
.ch-ow{min-height:44px;padding:0 20px;background:none;border:0;border-right:1px solid var(--line);
  font-family:'Unbounded',var(--font-body);font-weight:400;font-size:13px;letter-spacing:.04em;
  color:var(--ink-soft);cursor:pointer;transition:color .15s ease,background .15s ease}
.ch-ow:last-of-type{border-right:0}
.ch-ow.on{background:var(--ink-deep);color:var(--paper)}
.ch-own-n{padding:0 16px;font-size:13px;color:var(--ink-soft);white-space:nowrap}
.ch-own-note{margin:8px 0 0}
@media(max-width:520px){.ch-own{width:100%}.ch-ow{flex:1;padding:0 12px}.ch-own-n{display:none}}
.ch-tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--hair);margin:14px 0 0}
.ch-tab{flex:0 0 auto;min-height:44px;padding:0 16px;background:none;border:0;border-bottom:2px solid transparent;
  font-family:'Unbounded',var(--font-body);font-weight:400;font-size:13px;color:var(--ink-soft);cursor:pointer;margin-bottom:-1px}
.ch-tab.on{color:var(--ink-deep);border-bottom-color:var(--brand)}
/* Сколько свободно в корпусе — прямо на вкладке: иначе выбор корпуса
   вслепую, и первым открывается тот, где продано всё. */
.ch-tab i{font-style:normal;font-size:11px;color:var(--gold-deep);margin-left:7px;vertical-align:1px}
.ch-tab.out{color:oklch(48% .014 60/.5)}
.ch-tab.out i{color:inherit}
.ch-tab.out::after{content:'';display:inline-block;width:0}
/* Сводка по всему комплексу над вкладками */
.ch-sum{margin:16px 0 0;font-family:var(--font-eyebrow);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.ch-sum.none{color:var(--ink-soft)}
.ch-sum:empty{display:none}
/* то же наличие — в боковой панели: она видна всю прокрутку */
.cta-free{margin:14px 0 0;font-family:var(--font-eyebrow);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-bright)}
.cta-free.none{color:oklch(97.5% .008 78/.55)}
.cta-free[hidden]{display:none}
.ch-grid{margin-top:8px}
.ch-row{display:grid;grid-template-columns:52px 1fr;border-bottom:1px solid var(--hair)}
.ch-fl{font-family:var(--font-eyebrow);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding:12px 0;align-self:center}
.ch-cells{display:flex;flex-wrap:wrap;gap:0;border-left:1px solid var(--hair)}
/* Статус лота читается тремя способами сразу: фоном, полосой слева и словом.
   Одного оттенка на телефоне не хватало — свободный, бронь и продан сливались.
   Свободный лот — чистая бумага без пометок, это и есть товар. */
.lot{position:relative;flex:1 0 25%;min-width:72px;min-height:56px;padding:8px 6px 8px 9px;background:var(--paper);border:0;border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);margin-bottom:-1px;text-align:left;cursor:pointer;color:var(--ink-deep);transition:background .3s var(--ease)}
.lot b{display:block;font-family:'Unbounded',var(--font-body);font-weight:500;font-size:12px;letter-spacing:0}
.lot span{display:block;font-family:var(--font-eyebrow);font-size:10px;letter-spacing:.08em;color:var(--ink-soft);margin-top:3px}
.lot i.st{display:block;font-style:normal;font-family:var(--font-eyebrow);font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-top:5px}
.lot:hover{background:var(--sand)}
.lot.hold{background:oklch(94% .06 84)}
.lot.hold::before{content:'';position:absolute;left:0;top:0;bottom:-1px;width:3px;background:var(--gold-deep)}
.lot.hold i.st{color:var(--gold-deep)}
.lot.na{color:var(--ink-soft);background:none}
.lot.na b{font-weight:500}
.ch-dot.na{background:oklch(88% .006 78)}
.fac{display:flex;flex-wrap:wrap;gap:0;list-style:none;padding:0;margin:0;border-top:1px solid var(--hair)}
.fac li{flex:1 1 46%;min-width:150px;padding:11px 14px 11px 0;border-bottom:1px solid var(--hair);font-size:14px}
@media(max-width:560px){.fac li{flex:1 1 100%}}
.lot.res{background:oklch(96% .012 78)}
.lot.res::before{content:'';position:absolute;left:0;top:0;bottom:-1px;width:0;border-left:3px dotted var(--ink-soft)}
.lot.res i.st{color:var(--ink-soft)}
/* продан — штриховка: читается и на тусклом экране, и без цвета */
.lot.sold{color:var(--ink-soft);background:repeating-linear-gradient(135deg,oklch(95% .004 78) 0 5px,oklch(89.5% .006 78) 5px 6px)}
.lot.sold b{text-decoration:line-through;opacity:.55}
.lot.sold span{opacity:.65}
.lot.sold i.st{opacity:.8}
.ch-legend{display:flex;gap:16px 20px;flex-wrap:wrap;margin:14px 0 6px;font-family:var(--font-eyebrow);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.ch-legend b{font-weight:500;color:var(--ink-deep);margin-left:6px}
.ch-legend b:empty{display:none}
.ch-dot{display:inline-block;width:14px;height:14px;border:1px solid var(--line);margin-right:8px;vertical-align:-3px;background:var(--paper);box-sizing:border-box}
.ch-dot.hold{background:oklch(94% .06 84);border-left:3px solid var(--gold-deep)}
.ch-dot.res{background:oklch(96% .012 78);border-left:3px dotted var(--ink-soft)}
.ch-dot.sold{background:repeating-linear-gradient(135deg,oklch(95% .004 78) 0 3px,oklch(89.5% .006 78) 3px 4px)}
.lot-sheet[hidden],.lot-card [hidden]{display:none!important}
/* лот, который продаёт собственник: тонкая золотая черта сверху ячейки */
.lot.rs{box-shadow:inset 0 2px 0 var(--gold)}
/* эксклюзив: объект ведём мы, и это видно в сетке — полоса плотнее */
.lot.excl{box-shadow:inset 0 3px 0 var(--gold-deep)}
/* фотографии объекта вторички в карточке лота: лента в одну строку */
.lot-shots{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--gut)) 16px;padding:0 var(--gut)}
.lot-shots::-webkit-scrollbar{display:none}
.lot-shots[hidden]{display:none}
.lot-shots img{flex:0 0 auto;width:132px;height:99px;object-fit:cover;display:block;background:var(--sand)}
/* фильтр с главной: подходящие лоты выделены, остальные приглушены */
.lot.dim{opacity:.32}
.lot.fit b{color:var(--gold-deep)}
.lot.fit{box-shadow:inset 0 0 0 1px var(--gold-deep)}
.lot.fit.rs{box-shadow:inset 0 0 0 1px var(--gold-deep),inset 0 2px 0 var(--gold)}
.ch-fit{margin:0 0 10px}.ch-fit a{color:var(--gold-deep)}
.lot-sheet{position:fixed;inset:0;z-index:61;display:flex;align-items:flex-end;justify-content:center;background:oklch(10% 0 0/0);transition:background .35s var(--ease)}
.lot-sheet.in{background:oklch(10% 0 0/.45)}
.lot-card{position:relative;width:100%;max-width:560px;background:var(--paper);padding:22px var(--gut) calc(22px + var(--safe-b));
  border-top:1px solid var(--hair);transform:translateY(100%);transition:transform .45s var(--ease)}
.lot-sheet.in .lot-card{transform:none}
.lot-x{position:absolute;top:10px;right:14px;width:44px;height:44px;background:none;border:0;font-size:26px;color:var(--ink-soft);cursor:pointer}
.lot-card .eyebrow{display:block;color:var(--gold-deep);margin-bottom:6px}
.lot-card h3{font-family:'Unbounded',var(--font-body);font-weight:300;font-size:30px;margin:0 0 12px}
.lot-facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair);margin-bottom:14px}
.lot-facts>div{padding:10px 0;border-bottom:1px solid var(--hair);display:flex;flex-direction:column;gap:2px}
.lot-facts>div:nth-child(even){padding-left:14px;border-left:1px solid var(--hair)}
.lot-facts .t-val{font-size:17px}
.lot-hold{margin:0 0 14px;padding:10px 12px;background:oklch(93% .05 84);font-size:14px;line-height:1.5}
.mask{filter:blur(2.5px);user-select:none}
.lot-card .act{color:var(--ink-deep);border-color:var(--hair)}
@media (min-width:1000px){.lot-sheet{align-items:center}.lot-card{border:1px solid var(--hair);padding:28px 32px}.lot{flex-basis:12.5%}}
@media (prefers-reduced-motion:reduce){.lot-sheet,.lot-card{transition:none}}
/* ход стройки */
.pg-row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--hair)}
.pg-row:first-child{border-top:1px solid var(--hair)}
.pg-l{font-size:15px}
.pg-v{font-size:15px;text-align:right}
.pg-bar{grid-column:1/-1;height:2px;background:var(--hair);overflow:hidden}
.pg-bar i{display:block;height:100%;background:var(--gold-deep);transform-origin:left}
/* сетка вилл: готовность на ячейке */
.chess-villas .lot{position:relative}
.lot em{position:absolute;right:8px;top:8px;font-style:normal;font-size:11px;letter-spacing:.04em;color:var(--gold-deep);font-variant-numeric:tabular-nums}
.lot.sold em{color:var(--ink-soft)}

/* ---------- доступ: ворота, вход, роли (docs/20_access.md) ---------- */
.gate{position:relative}
.gate .eyebrow{display:block;color:var(--gold-deep);margin-bottom:10px}
.gate h2{max-width:34ch}
.gate>p{margin:16px 0 18px;font-size:15px;color:var(--ink-soft);max-width:52ch}
.gate .btn{max-width:420px}
.gate-alt{margin:0;font-size:13px;color:var(--ink-soft)}
.gate-alt a{color:var(--gold-deep);border-bottom:1px solid oklch(58% .062 70/.35)}
/* призрачная таблица: три строки, как в закрытом разделе, без чисел */
.gate-ghost{border-top:1px solid var(--hair);margin-top:16px}
.gate-row{display:flex;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--hair)}
.gate-row span{flex:0 0 96px;font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.gate-row i{display:block;height:10px;width:var(--w);background:linear-gradient(90deg,var(--sand),var(--line));opacity:.9}
.nav-acc{font-family:var(--font-eyebrow);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-deep);border-bottom:1px solid var(--brand);padding:6px 0;margin-left:10px;white-space:nowrap;
  max-width:38vw;overflow:hidden;text-overflow:ellipsis}
.nav-acc.on{color:var(--gold-deep);border-bottom-color:transparent;text-transform:none;letter-spacing:.02em;font-size:13px}
.auth-only{display:none}
body.auth .auth-only{display:inline}
.join-roles{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair);border-left:1px solid var(--hair);margin-bottom:14px}
.jr{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;min-height:76px;padding:12px 12px 11px;
  background:none;border:0;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);cursor:pointer;color:var(--ink);
  transition:background .35s var(--ease),color .35s var(--ease)}
.jr b{font-family:var(--font-eyebrow);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.jr span{font-size:12px;color:var(--ink-soft);line-height:1.35}
.jr.on{background:var(--ink-deep);color:var(--paper)}
.jr.on span{color:oklch(97.5% .008 78/.62)}
.toast{position:fixed;left:50%;top:calc(12px + var(--safe-t));z-index:80;transform:translate(-50%,-140%);
  background:var(--ink-deep);color:var(--gold-bright);font-family:var(--font-eyebrow);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;padding:12px 18px;transition:transform .6s var(--ease);pointer-events:none}
.toast.in{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
@media (min-width:1000px){.nav-acc{max-width:none;margin-left:16px}}
/* узкий экран: шапке нужно место под «Вход» — сжимаем зазоры, не прячем валюты */
@media (max-width:430px){
  .site-header .wrap{gap:6px}
  .cur-switch a{padding:6px 3px}
  .lang-switch a{padding:6px 5px;min-width:24px}
  .nav-acc{margin-left:4px;font-size:10px;letter-spacing:.1em}
}
/* совсем узко: имя бренда уходит, остаётся знак — иначе «Вход» не помещается */
@media (max-width:430px){.site-header .brand .name{display:none}}

/* ---------- пульт показа ----------
   Только у агента: телефон ведёт, экран в комнате повторяет. Полоса стоит
   внизу слева, поверх страницы, и не мешает листать — она в одну строку и
   уходит под карточку лота (z-index ниже её слоя). */
.show-bar{position:fixed;left:0;bottom:0;z-index:59;
  display:flex;align-items:center;gap:12px;max-width:calc(100vw - 12px);
  padding:11px 14px calc(11px + var(--safe-b));
  background:var(--ink-deep);color:var(--paper);
  border-top:1px solid oklch(85% .09 84/.26);border-right:1px solid oklch(85% .09 84/.26);
  font-family:var(--font-eyebrow);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;line-height:1}
.show-bar button{background:transparent;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
.show-bar .show-go{color:var(--gold-bright)}
.show-bar.on .show-live{color:var(--gold-bright)}
.show-bar.on .show-live::before{content:'';display:inline-block;width:6px;height:6px;
  background:var(--gold-bright);margin-right:8px;vertical-align:1px;
  animation:showPulse 2.4s var(--ease) infinite}
.show-bar b{font-family:var(--font-body);font-size:17px;font-weight:600;
  letter-spacing:.16em;color:#fff}
.show-bar .show-where{color:oklch(97.5% .008 78/.5);letter-spacing:.06em;
  text-transform:none;font-size:11px;display:none}
.show-bar .show-x{color:oklch(97.5% .008 78/.62);border-bottom:1px solid oklch(85% .09 84/.3);
  padding-bottom:2px;margin-left:2px}
.show-bar.fail{color:var(--gold-bright);text-transform:none;letter-spacing:.02em}
@keyframes showPulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.show-bar.on .show-live::before{animation:none}}
@media (min-width:560px){.show-bar .show-where{display:inline}}
/* телефон: пять кнопок в одну строку не влезают, «Завершить» уходило за край.
   Первая строка — статус, код и завершение; вторая — три действия во всю ширину */
@media (max-width:559px){
  .show-bar.on{right:0;max-width:none;flex-wrap:wrap;row-gap:10px;border-right:0;padding-top:12px}
  .show-bar.on .show-x{margin-left:auto}
  .show-bar.on::after{content:'';flex-basis:100%;height:0;order:1}
  .show-bar.on .show-air,.show-bar.on .show-add,.show-bar.on .show-geo{order:2;flex:1 1 0;margin:0;
    padding:11px 4px;text-align:center;white-space:nowrap;border:1px solid oklch(85% .09 84/.3);color:var(--gold-bright);
    font-size:11px;letter-spacing:.12em}
  .show-bar.on .show-air.on{background:var(--gold-deep);border-color:transparent;color:#fff}
}

.show-bar{transition:opacity .3s var(--ease),transform .3s var(--ease)}
/* жест «потянуть вниз» — наш: системное обновление страницы его не перехватывает */
body{overscroll-behavior-y:contain}

/* ---------- условия сделки и рассрочка ----------
   Открывается из карточки лота. Сверху график застройщика как он записан в
   карточке проекта, ниже три ручки расчёта и расклад по месяцам. «Показать
   на экране» отправляет тот же расклад на телевизор. */
.terms-card{max-height:86vh;overflow:auto}
.terms-card .tc-lab{display:block;color:var(--gold-deep);margin:18px 0 8px}
.terms-card .tc-lab:first-of-type{margin-top:6px}
.tc-grid{display:grid;gap:14px}
.tc-grid label{display:block;font-family:var(--font-eyebrow);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.tc-v{float:right;font-family:var(--font-body);font-size:14px;letter-spacing:0;
  text-transform:none;color:var(--ink-deep)}
.tc-grid input[type=range]{width:100%;margin-top:8px;accent-color:var(--gold-deep)}
.tc-out{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair);margin-top:18px}
.tc-out div{padding:12px 0;border-bottom:1px solid var(--hair)}
.tc-out div+div{padding-left:12px;border-left:1px solid var(--hair)}
.tc-out span{display:block;font-family:var(--font-eyebrow);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.tc-out b{display:block;font-size:17px;margin-top:4px}
.tc-plan{margin:16px 0 18px;max-height:38vh;overflow:auto;border-top:1px solid var(--hair)}
.tc-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--hair);font-size:15px}
.tc-row span{color:var(--ink-soft)}
.tc-row:first-child span,.tc-row:first-child b{color:var(--gold-deep)}
@media (min-width:560px){.tc-grid{grid-template-columns:repeat(3,1fr);gap:18px}}

/* ---------- личное приглашение /i/<код> ---------- */
/* листалка презентации: у большого пальца, над полосой показа */
.deck-pad{position:fixed;left:0;right:0;bottom:var(--bar-h,calc(58px + var(--safe-b)));z-index:42;
  display:flex;align-items:stretch;background:var(--ink-deep);color:var(--paper);
  border-top:1px solid oklch(100% 0 0/.14)}
.deck-pad[hidden]{display:none}
.deck-pad button{flex:0 0 64px;background:none;border:0;border-left:1px solid oklch(100% 0 0/.14);
  color:var(--paper);font-size:26px;line-height:1;padding:14px 0;cursor:pointer;
  transition:background .2s,transform .12s}
.deck-pad button:first-child{border-left:0}
.deck-pad button:active{transform:scale(.94);background:oklch(100% 0 0/.08)}
.deck-pad span{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--font-eyebrow);font-size:12px;letter-spacing:.14em;color:oklch(97.5% .008 78/.62)}
.deck-pad span b{font-size:16px;font-weight:500;color:var(--paper)}
.deck-pad .deck-x{flex:0 0 56px;font-size:22px;color:oklch(97.5% .008 78/.6)}
.btn.deck-tv{margin-top:10px}
/* несколько колод у одного комплекса: подпись над второй и дальше */
.deck-title{font-family:var(--font-eyebrow);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:22px 0 8px}
.deck-row{margin:0}
/* эфир: панель ведущего. Сверху — что идёт и выход; в середине — кадр и
   что видит клиент; внизу — четыре плитки настроек под большой палец.
   Тап по кадру — крупнее, ещё тап — обратно. */
.air-pad{position:fixed;left:0;right:0;bottom:var(--bar-h,calc(58px + var(--safe-b)));z-index:43;
  display:flex;flex-direction:column;background:var(--ink-deep);color:var(--paper);
  border-top:1px solid oklch(100% 0 0/.14)}
.air-pad[hidden]{display:none}
.air-pad button{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .2s}
.air-head{display:flex;align-items:center;gap:12px;padding-left:14px;border-bottom:1px solid oklch(100% 0 0/.1);
  font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.air-live{color:var(--gold-bright);white-space:nowrap}
.air-live::before{content:'';display:inline-block;width:6px;height:6px;background:var(--gold-bright);
  margin-right:8px;vertical-align:1px;animation:showPulse 2.4s var(--ease) infinite}
.air-tech{flex:1;min-width:0;color:oklch(97.5% .008 78/.5);letter-spacing:.08em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.air-head .air-x{flex:0 0 auto;padding:15px 16px;border-left:1px solid oklch(100% 0 0/.1);color:var(--gold-bright)}
.air-head .air-x:active{background:oklch(100% 0 0/.08)}
.air-body{display:flex;gap:12px;padding:12px 14px;align-items:flex-start}
.air-cam{position:relative;flex:0 0 40%;max-width:240px;background:#000;border:1px solid oklch(100% 0 0/.16);
  cursor:pointer;transition:flex-basis .28s var(--ease),max-width .28s var(--ease)}
.air-cam video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
/* переднюю камеру показываем зеркалом, как в любом видеозвонке;
   основную — как есть, иначе текст на стене читается наоборот */
.air-cam.mir video{transform:scaleX(-1)}
.air-lab{position:absolute;left:0;right:0;bottom:0;background:oklch(19% .014 58/.78);
  color:oklch(97.5% .008 78/.85);font-family:var(--font-eyebrow);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 6px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.air-ui{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.air-eyebrow{font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:oklch(97.5% .008 78/.55);line-height:1}
/* один ряд вариантов: презентация, моё видео, видео коллег; выбранный — золотом */
.air-seg{display:flex;flex-wrap:wrap;gap:1px;background:oklch(100% 0 0/.16);border:1px solid oklch(100% 0 0/.16)}
.air-seg button{flex:1 1 auto;min-width:0;min-height:44px;padding:8px 10px;background:var(--ink-deep);
  font-family:var(--font-body);font-size:14px;font-weight:600;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.air-seg button:active{background:oklch(100% 0 0/.12)}
.air-seg button.on{background:var(--gold-deep);color:#fff}
/* плитки: значок, что это, в каком состоянии; включённая — золотом */
.air-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:oklch(100% 0 0/.1);
  border-top:1px solid oklch(100% 0 0/.1)}
.air-tiles button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:76px;padding:9px 4px;background:var(--ink-deep);text-align:center}
.air-tiles button:active{background:oklch(100% 0 0/.12)}
.air-tiles svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:square;stroke-linejoin:miter;color:var(--gold-bright)}
.air-tiles b{font-family:var(--font-body);font-size:12px;font-weight:600;line-height:1.15;max-width:100%}
.air-tiles span{font-family:var(--font-eyebrow);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:oklch(97.5% .008 78/.55);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.air-tiles button.on{background:var(--gold-deep);color:#fff}
.air-tiles button.on svg,.air-tiles button.on span{color:#fff}
.air-tiles button.wait{opacity:.5;pointer-events:none}
/* крупный кадр: окно во всю ширину, выбор картинки под ним */
.air-pad.wide .air-body{flex-direction:column;align-items:stretch}
.air-pad.wide .air-cam{flex-basis:auto;max-width:none;width:100%}
.air-pad.wide .air-lab{font-size:11px;padding:6px 10px}
@media (min-width:720px){.air-pad{right:auto;width:640px;border-right:1px solid oklch(100% 0 0/.14)}}
html.in-tg{--safe-t:var(--tg-top,0px)}
.show-bar .show-air.on{color:var(--gold-bright)}
/* карта на экране: категории, поиск, что рядом — панель у большого пальца */
.show-bar .show-geo{color:var(--gold-bright);margin-left:auto;margin-right:14px;font-family:var(--font-eyebrow);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
/* «Добавить менеджера»: та же кнопка, что карта, стоит перед ней; ссылка на этот показ */
.show-bar .show-add{color:var(--gold-bright);margin-left:auto;margin-right:14px;font-family:var(--font-eyebrow);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.show-bar .show-add+.show-geo{margin-left:0}
.geo-pad{position:fixed;left:0;right:0;bottom:var(--bar-h,calc(58px + var(--safe-b)));z-index:43;max-height:64vh;
  display:flex;flex-direction:column;background:var(--ink-deep);color:var(--paper);
  border-top:1px solid oklch(100% 0 0/.14)}
.geo-pad[hidden]{display:none}
.geo-row{display:flex;flex:0 0 auto;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid oklch(100% 0 0/.1)}
.geo-row::-webkit-scrollbar{display:none}
.geo-row button{flex:0 0 auto;background:none;border:0;border-right:1px solid oklch(100% 0 0/.1);color:var(--paper);
  font-family:var(--font-eyebrow);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:15px 16px;cursor:pointer;
  transition:background .2s}
.geo-row button.geo-map{color:var(--gold-bright)}
.geo-row button:active{background:oklch(100% 0 0/.08)}
.geo-find{display:flex;flex:0 0 auto;border-bottom:1px solid oklch(100% 0 0/.1)}
.geo-find input{flex:1;min-width:0;background:none;border:0;border-radius:0;color:var(--paper);font:16px/1.2 var(--font-body);padding:13px 16px;outline:none;-webkit-appearance:none}
.geo-find input::placeholder{color:oklch(97.5% .008 78/.45)}
.geo-find .geo-x,.geo-pad>.geo-x{flex:0 0 56px;background:none;border:0;border-left:1px solid oklch(100% 0 0/.1);color:oklch(97.5% .008 78/.6);font-size:22px;cursor:pointer}
.geo-list{overflow-y:auto;flex:1 1 auto}
/* панорама 360° на пульте: просмотрщик в панели «Локация» */
.pano-box{width:100%;aspect-ratio:16/9;max-height:340px;background:#000;touch-action:none}
.pano-box .pnlm-load-box,.pano-box .pnlm-about-msg{display:none!important}

.geo-list button{display:flex;width:100%;justify-content:space-between;align-items:baseline;gap:12px;background:none;border:0;
  border-bottom:1px solid oklch(100% 0 0/.08);color:var(--paper);text-align:left;padding:11px 16px;cursor:pointer;font:inherit}
.geo-list button b{font-weight:500;font-size:15px;line-height:1.3}
.geo-list button span{font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:oklch(97.5% .008 78/.55);white-space:nowrap}
.geo-note{padding:16px;font-size:14px;line-height:1.4;color:oklch(97.5% .008 78/.72)}
.geo-pad.busy .geo-row,.geo-pad.busy .geo-list{opacity:.5;pointer-events:none}
.geo-pad.fail{box-shadow:inset 0 0 0 1px oklch(65% .2 25)}

/* ---------- экран запуска /launch/ ----------
   Приложение до срока показывает его вместо каталога: кадр во весь экран,
   знак, отсчёт до минуты запуска и две кнопки. Двигается только кадр, и
   только по transform. */
.lx-body{background:#0d0b09;color:var(--paper)}
.lx-body .site-header,.lx-body footer{display:none}
.lx{position:fixed;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.lx-bg{position:absolute;inset:0;z-index:0}
.lx-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:lx-slow 26s var(--ease) infinite alternate}
.lx-bg .lx-h{display:none}
.lx-bg i{position:absolute;inset:0;display:block;
  background:linear-gradient(to bottom,oklch(6% .01 60/.72),oklch(6% .01 60/.45) 42%,oklch(6% .01 60/.94))}
@keyframes lx-slow{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.lx-in{position:relative;z-index:2;width:100%;max-width:560px;padding:0 24px;text-align:center}
.lx-mark{display:block;width:min(180px,46vw);height:auto;margin:0 auto 22px;
  animation:lx-up .9s var(--ease) both}
.lx-eyebrow{display:block;font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-bright);animation:lx-up .9s var(--ease) .08s both}
.lx-in h1{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,8vw,52px);
  line-height:1.06;margin:14px 0 0;color:#fff;animation:lx-up .9s var(--ease) .16s both}
.lx-lead{font-size:15px;color:oklch(97.5% .008 78/.72);margin:12px 0 0;
  animation:lx-up .9s var(--ease) .24s both}
@keyframes lx-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lx-clock{display:grid;grid-template-columns:repeat(4,1fr);margin:30px 0 0;
  border-top:1px solid oklch(100% 0 0/.16);border-bottom:1px solid oklch(100% 0 0/.16);
  animation:lx-up .9s var(--ease) .32s both}
.lx-clock[hidden]{display:none}
.lx-clock div{padding:14px 4px;border-left:1px solid oklch(100% 0 0/.1)}
.lx-clock div:first-child{border-left:0}
.lx-clock b{display:block;font-family:'Unbounded',var(--font-body);font-weight:300;
  font-size:clamp(24px,7vw,34px);font-variant-numeric:tabular-nums;color:#fff;line-height:1}
.lx-clock span{display:block;font-family:var(--font-eyebrow);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:oklch(97.5% .008 78/.5);margin-top:7px}
.lx-when{font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-bright);margin:14px 0 0;animation:lx-up .9s var(--ease) .4s both}
.lx-acts{display:flex;flex-direction:column;gap:12px;margin:26px auto 0;max-width:380px;
  animation:lx-up .9s var(--ease) .48s both}
.lx-btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;
  border:1px solid oklch(100% 0 0/.28);background:none;color:var(--paper);cursor:pointer;
  font-family:var(--font-eyebrow);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;transition:transform .16s var(--ease),background .2s}
.lx-btn:active{transform:scale(.975)}
.lx-btn:hover{background:oklch(100% 0 0/.08)}
.lx-btn-gold{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--ink-deep)}
.lx-btn-gold:hover{background:#fff;border-color:#fff}
.lx-btn[hidden]{display:none}
.lx-who{font-size:12px;color:oklch(97.5% .008 78/.45);margin:20px 0 0;
  animation:lx-up .9s var(--ease) .56s both}
.lx-sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;
  background:oklch(6% .01 60/0);transition:background .38s var(--ease)}
.lx-sheet.in{background:oklch(6% .01 60/.72)}
.lx-sheet[hidden]{display:none}
.lx-card{position:relative;width:100%;max-width:520px;background:#141210;
  border-top:1px solid oklch(100% 0 0/.16);padding:24px 20px calc(24px + var(--safe-b));
  display:flex;flex-direction:column;gap:12px;
  transform:translateY(100%);transition:transform .38s var(--ease)}
.lx-sheet.in .lx-card{transform:none}
.lx-card .lx-eyebrow{text-align:left;margin-bottom:4px}
.lx-x{position:absolute;top:8px;right:12px;width:44px;height:44px;background:none;border:0;
  font-size:26px;line-height:1;color:oklch(97.5% .008 78/.6);cursor:pointer}
@media (min-width:860px){
  .lx-bg .lx-v{display:none}
  .lx-bg .lx-h{display:block}
  .lx-bg i{background:linear-gradient(to bottom,oklch(6% .01 60/.6),oklch(6% .01 60/.3) 40%,oklch(6% .01 60/.9))}
  .lx-acts{flex-direction:row;justify-content:center;max-width:none}
  .lx-btn{min-width:220px}
}
@media (prefers-reduced-motion:reduce){
  .lx-bg img{animation:none}
  .lx-mark,.lx-eyebrow,.lx-in h1,.lx-lead,.lx-clock,.lx-when,.lx-acts,.lx-who{animation:none}
}
/* знак бренда в шапке: настоящий логотип в тёмном квадрате */
.brand .mark img{width:22px;height:auto;display:block}

/* ---------- поиск по каталогу ----------
   Лупа в шапке раздвигает строку под ней. Движение — только по transform и
   opacity: строка не толкает вёрстку, а выезжает поверх. */
.nav-find{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;color:var(--ink-deep);cursor:pointer;
  transition:transform .18s var(--ease),color .2s;
}
.nav-find svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5}
.nav-find:active{transform:scale(.9)}
.nav-find.on{color:var(--gold-deep)}
.site-header.hdr-clear .nav-find{color:#fff}
.find{
  max-height:0;overflow:hidden;background:var(--paper);
  transition:max-height .38s var(--ease);
}
body.find-on .find{max-height:76px;border-top:1px solid var(--hair)}
/* пока ищем, шапка над героем становится обычной: строку должно быть видно */
body.find-on .site-header{background:var(--paper);backdrop-filter:none}
body.find-on .site-header.hdr-clear .name{color:var(--ink-deep)}
body.find-on .site-header.hdr-clear .name b{color:var(--gold-deep)}
body.find-on .site-header .lang-switch a{color:var(--ink-soft)}
body.find-on .site-header .lang-switch a.on,body.find-on .site-header .cur-btn.on{color:var(--ink-deep)}
body.find-on .site-header .nav-acc,body.find-on .site-header .nav-cta{color:var(--ink-deep);border-color:var(--line)}
body.find-on .site-header .nav-find{color:var(--gold-deep)}
.find-row{display:flex;align-items:center;gap:12px;min-height:56px}
.find-ico{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:var(--gold-deep);stroke-width:1.5}
.find-row input{
  flex:1;min-width:0;border:0;background:none;padding:16px 0;
  font-family:var(--font-body);font-size:17px;color:var(--ink-deep);
}
.find-row input:focus{outline:0}
.find-row input::placeholder{color:var(--ink-soft)}
.find-row input::-webkit-search-cancel-button{display:none}
.find-n{
  flex:0 0 auto;font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;
}
.find-x{
  flex:0 0 44px;width:44px;height:44px;background:none;border:0;padding:0;
  font-size:24px;line-height:1;color:var(--ink-soft);cursor:pointer;
  transition:transform .16s var(--ease),color .2s;
}
.find-x:hover{color:var(--ink-deep)}
.find-x:active{transform:scale(.9)}
.find-row{opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ease) .06s,transform .3s var(--ease) .06s}
body.find-on .find-row{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .find,.find-row{transition:none}
}

/* ---- «Локация» на странице комплекса: расстояния по дороге и карта в оверлее ---- */
.geo-rows{border-top:1px solid var(--hair)}
.geo-item{display:grid;grid-template-columns:84px 1fr;grid-template-areas:"k n" "k d";column-gap:10px;row-gap:3px;align-items:baseline;width:100%;padding:12px 0;background:none;border:0;border-bottom:1px solid var(--hair);text-align:left;font:inherit;color:inherit;cursor:pointer}
.geo-item .geo-k{grid-area:k;font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.geo-item b{grid-area:n;font-weight:500;font-size:15.5px;line-height:1.3;min-width:0}
.geo-item .geo-d{grid-area:d;font-size:13.5px;color:var(--ink-soft)}
@media(min-width:640px){.geo-item{grid-template-columns:96px 1fr auto;grid-template-areas:"k n d"}.geo-item .geo-d{white-space:nowrap}}
.geo .btn.geo-open{margin-top:16px}
.geo>.muted{margin-top:10px}
body.geo-lock{overflow:hidden}
.geo-ov{position:fixed;inset:0;z-index:60;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .34s var(--ease,cubic-bezier(.2,.7,.2,1));will-change:transform}
.geo-ov.on{transform:none}
.geo-ov-top{display:flex;align-items:center;justify-content:space-between;height:calc(52px + var(--safe-t));padding:var(--safe-t) 0 0 16px;border-bottom:1px solid var(--hair);flex:0 0 auto}
.geo-ov-top b{font-weight:500;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.geo-ov-x{flex:0 0 52px;height:52px;background:none;border:0;border-left:1px solid var(--hair);font-size:26px;line-height:1;color:inherit;cursor:pointer}
.geo-ov-map{flex:1 1 auto;min-height:0;position:relative;background:#cfe0e6}
.geo-ov-map .maplibregl-canvas{outline:none}
.geo-ov-osm{position:absolute;right:6px;bottom:4px;z-index:2;font-size:10px;color:oklch(35% .01 78/.7);pointer-events:none}
/* пока грузятся библиотеки карты, в окне пустой прямоугольник — подпись
   говорит, что происходит, и мигает, чтобы это читалось как работа */
.geo-ov-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:oklch(35% .01 78/.8);text-align:center;padding:0 24px;pointer-events:none;
  animation:geoPulse 1.5s var(--ease) infinite}
@keyframes geoPulse{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.geo-ov-load{animation:none;opacity:.8}}
.geo-ov-rows{flex:0 0 auto;display:flex;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--hair);padding-bottom:var(--safe-b)}
.geo-ov-rows::-webkit-scrollbar{display:none}
/* справа ещё есть объекты: край гаснет, пока полосу можно прокрутить.
   Докрутили до конца — маска снимается, последняя кнопка целая */
.geo-ov-rows{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.geo-ov-rows.at-end{-webkit-mask-image:none;mask-image:none}
.geo-ov-rows button{flex:0 0 auto;max-width:62vw;background:none;border:0;border-right:1px solid var(--hair);padding:11px 14px;text-align:left;font:inherit;color:inherit;cursor:pointer;box-shadow:inset 0 -2px 0 transparent;transition:box-shadow .2s}
.geo-ov-rows button.on{box-shadow:inset 0 -2px 0 var(--gold)}
.geo-ov-rows b{display:block;font-size:14px;font-weight:500;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.geo-ov-rows span{font-size:12px;color:var(--ink-soft);white-space:nowrap}
.geo-pin{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ink-deep,#1a1815);box-shadow:0 0 0 3px var(--paper),0 6px 18px oklch(0% 0 0/.25)}
.geo-pin img{width:24px;height:auto;display:block}
/* пин с логотипом комплекса: круг уже нарисован в самом PNG */
.geo-pin.has-logo{background:none;border-radius:50%;box-shadow:0 0 0 3px var(--paper),0 6px 18px oklch(0% 0 0/.25)}
.geo-pin.has-logo img{width:44px;height:44px}
.geo-dot{width:12px;height:12px;background:var(--gold);box-shadow:0 0 0 3px var(--paper);position:relative}
.geo-dot i{position:absolute;left:16px;top:-5px;white-space:nowrap;font:500 12px/1.3 var(--font-body);font-style:normal;background:var(--paper);color:var(--ink);padding:3px 7px;box-shadow:0 1px 4px oklch(0% 0 0/.15)}
@media(min-width:900px){.geo-ov{left:auto;right:0;width:min(560px,100%);box-shadow:-1px 0 0 var(--hair)}}

/* ---------- планировки комплекса ---------- */
/* Лист на тип: сетка кнопок с волосяными границами, как у карточек лотов. */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.plan-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  padding:16px 14px;background:none;border:0;border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);cursor:pointer;text-align:left;
  transition:background .2s var(--ease)}
.plan-cell:hover{background:var(--paper-deep)}
/* Длинный список свёрнут: видны первые листы, остальные — по кнопке.
   Скрываем display'ем, а не высотой: сотня ячеек в потоке тормозит прокрутку */
.plan-grid.is-fold .plan-hid{display:none}
.plan-fold{display:block;width:100%;min-height:48px;padding:0 14px;background:none;
  border:0;border-bottom:1px solid var(--hair);cursor:pointer;text-align:left;
  font-family:'Unbounded',var(--font-body);font-weight:400;font-size:13px;letter-spacing:.04em;
  color:var(--ink-deep);transition:background .2s var(--ease)}
.plan-fold:hover{background:var(--paper-deep)}
.plans-n{font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-left:10px;vertical-align:middle}
.plan-cell b{font:500 15px/1.2 var(--font-body);color:var(--ink-deep)}
.plan-cell span{font-family:var(--font-eyebrow);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
/* у типа есть интерьеры шоу-юнита: их видно в том же окне за планировкой */
.plan-cell .plan-in{color:var(--gold-deep)}

/* ---------- раздел «Tropicana Эксклюзив» ----------
   Карточка та же, что в каталоге: человек, пришедший из каталога, не должен
   заново учиться читать плитку. Разница в одной строке — цена собственника —
   и в метке на тех объектах, что стоят на лоте в шахматке. */
/* на телефоне шапка раздела съедала весь первый экран, и объектов не было
   видно вовсе: до первой карточки уходило больше тысячи точек */
.exc-hero{padding:calc(var(--safe-t) + 72px) 0 22px}
@media (min-width:1000px){.exc-hero{padding:calc(var(--safe-t) + 96px) 0 34px}}
.exc-h1{font-family:var(--font-display);font-size:clamp(28px,6vw,58px);
  line-height:1.05;margin:8px 0 10px}
.exc-lead{max-width:58ch;color:var(--ink-soft);line-height:1.55;font-size:15px}
.exc-stats{margin-top:14px;font-family:var(--font-eyebrow);font-size:12px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.exc-stats:empty{display:none}
/* метка стоит на том же месте, что «горячее» в каталоге, и тем же голосом:
   два разных ярлыка в одном углу читались бы как один */
.exc-badge{position:absolute;top:0;left:0;z-index:2;
  background:var(--gold-deep);color:var(--paper);
  font-family:var(--font-eyebrow);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;padding:7px 12px}
.exc-facts{color:var(--ink-soft);font-size:14px}
.exc-note{font-family:var(--font-eyebrow);font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px}
/* карточки приходят из сети, а не из разметки: наблюдатель появления их уже
   не видит, поэтому выезд живёт своей анимацией — прозрачность и сдвиг */
.exc-cell{animation:exc-in .5s var(--ease) both;animation-delay:calc(var(--i, 0) * 60ms)}
@keyframes exc-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.exc-cell{animation:none}}
/* вход в раздел с главной: полоса во всю ширину между каталогом и подвалом.
   Не карточка — карточка встала бы в один ряд с комплексами и читалась бы
   как ещё один комплекс */
.exc-strip{display:block;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:var(--sand);margin:0 0 70px;padding:38px 0;color:inherit}
.exc-strip .bleed{display:grid;gap:6px}
.exc-strip b{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,5vw,34px);
  line-height:1.15}
.exc-strip-p{color:var(--ink-soft);max-width:52ch}
.exc-strip-go{margin-top:10px;font-family:var(--font-eyebrow);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);
  transition:transform .4s var(--ease)}
.exc-strip:hover .exc-strip-go{transform:translateX(4px)}
/* на широком экране приглашение уходит вправо: иначе полоса во всю ширину
   держит текст в левой трети и правые две трети стоят пустыми */
@media (min-width:1000px){
  .exc-strip .bleed{grid-template-columns:1fr auto;align-items:center;column-gap:40px}
  .exc-strip .eyebrow{grid-column:1}
  .exc-strip b{grid-column:1}
  .exc-strip-p{grid-column:1}
  .exc-strip-go{grid-column:2;grid-row:1/4;margin:0;justify-self:end}
}

/* ---------- лендинг объекта вторички ----------
   Тот же каркас, что у комплекса: герой, плитки, блоки. Отличия только
   там, где у объекта есть то, чего у новостройки нет, — строка «цена
   собственника, подтверждена такого-то» и замеры до пляжа и школы. */
.rl .hero-sub{margin-top:6px;font-family:var(--font-eyebrow);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:oklch(98% .006 78/.62)}
.rl-about{margin-top:14px}
.rl-pts li{color:var(--ink-soft)}
.rl-cta{border-bottom:none}
.rl-cta .btn{margin:18px 0 10px}
.rl footer .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
/* плашка «Tropicana Эксклюзив» в строке фильтров: она переключает не
   признак, а само население сетки, поэтому отделена от соседей чертой
   и держит цвет марки даже погашенной */
.chip-exc,.chip-ru{color:var(--gold-deep);margin-left:14px;padding-left:18px;position:relative}
.chip-exc::before,.chip-ru::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:var(--hair)}
.chip-exc.active{color:var(--ink-deep)}
/* «Россия · Сочи» — ссылка на раздел второго региона, стоит в ряду фишек */
.chip-ru{text-decoration:none;display:inline-flex;align-items:center}
.show-bar .show-send{color:oklch(97.5% .008 78/.8);border-bottom:1px solid oklch(85% .09 84/.3)}
/* планировки на лендинге объекта: листы на бумаге, подпись под листом */
/* линии — рамками ячеек, а не фоном сетки: с фоном незаполненный хвост
   последнего ряда на десктопе выходил серым прямоугольником */
/* лента комплекса на лендинге вторички: обёртка держит стрелки на кадре */
.rl-strip-wrap{position:relative;margin:0 calc(-1*var(--gut)) 18px}
.rl-strip{height:52vw;max-height:360px}
.rl-plans{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hair);border-width:1px 0 0 1px}
.rl-plan{display:block;background:var(--paper);color:inherit;text-decoration:none;padding:0 0 10px;border:1px solid var(--hair);border-width:0 1px 1px 0}
.rl-plan img{width:100%;aspect-ratio:4/3;object-fit:contain;display:block;background:#faf7f2;padding:10px;box-sizing:border-box}
.rl-plan span{display:block;padding:8px 10px 0;font-size:13px;line-height:1.3}
@media (min-width:640px){.rl-plans{grid-template-columns:repeat(3,1fr)}}
/* раздел региона: полосы с заголовком — эксклюзивные дома, посёлки */
.region-grids .grid-h{font-family:var(--font-display);font-weight:400;font-size:clamp(22px,4vw,34px);margin:28px var(--gut) 6px}
.region-grids .grid-p{margin:0 var(--gut) 14px;max-width:62ch;color:var(--ink-soft);font-size:14px;line-height:1.5}
.card .media .exc-badge{top:12px;left:12px}


/* ---------- марка coBroking (html[data-brand=cobroking]) ----------
   Те же токены, другие значения: глубокий чёрный вместо бумаги, белый
   текст, тропический зелёный вместо золота, Sora в заголовках и цифрах.
   Разметка и механика витрины общие с Tropicana OS; отличается только
   этот блок и знак в шапке (scripts/brand.py). */
html[data-brand=cobroking]{
  --ink:oklch(91% .005 240);
  --ink-deep:oklch(98% .003 240);
  --ink-soft:oklch(68% .008 240);
  --gold:oklch(76% .17 160);
  --gold-bright:oklch(85% .15 160);
  --gold-deep:oklch(64% .15 160);
  --sand:oklch(17% .005 240);
  --paper:oklch(12% .004 240);
  --line:oklch(27% .008 240);
  --hair:oklch(21% .006 240);
  --font-display:"Sora","Manrope",system-ui,-apple-system,sans-serif;
  --font-eyebrow:"Manrope",system-ui,sans-serif;
  color-scheme:dark;
}
html[data-brand=cobroking] .site-header{background:oklch(12% .004 240/.86)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html[data-brand=cobroking] .hdr-over .site-header{background:oklch(12% .004 240/.72)}
}
html[data-brand=cobroking] .brand .name{font-family:"Sora","Manrope",system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
html[data-brand=cobroking] .brand .name b{color:var(--ink-deep)}
/* знак coBroking — картинка целиком, без квадрата под буквой */
html[data-brand=cobroking] .brand .mark{background:none;width:auto;height:28px}
html[data-brand=cobroking] .brand .mark img{width:34px;height:auto}
/* Панели, которые на бумаге были тёмными (фон var(--ink-deep) с белым
   текстом), в чёрной марке становятся графитом: иначе инверсия токенов
   даёт белую плашку с белым заголовком. Текст в них — светлый. */
html[data-brand=cobroking] :is(.hero-plain,.hero-overlay,.cta-box,.hero-shot,.card .media,.slide-vid,
  .dev-logo.on-dark,.card .hot-badge,.ch-bar,.toast,.deck-pad,.air-pad,.geo-pad,.air-tiles button,
  .air-seg button,.jl.on,.ch-ow.on,.jr.on,body.dwell){background:oklch(17% .005 240)}
html[data-brand=cobroking] :is(.cta-box,.ch-bar,.toast,.deck-pad,.air-pad,.geo-pad,.jl.on,.ch-ow.on,.jr.on){color:var(--ink-deep)}
html[data-brand=cobroking] :is(.nav-cta:hover,.plan-arrow:hover){background:var(--gold);color:oklch(12% .004 240);border-color:var(--gold)}
html[data-brand=cobroking] .site-header.hdr-clear .brand .name b,
html[data-brand=cobroking] .brand .name b{color:var(--ink-deep)}
html[data-brand=cobroking] .site-header.hdr-clear .brand .name{color:#fff}