@font-face{font-family:NAMU-1990;font-style:normal;font-weight:400 800;font-display:swap;src:url("/css/fonts/namu-1990.woff2") format("woff2"),url("/css/fonts/namu-1990.otf") format("opentype")}@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url("/css/fonts/inter-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:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url("/css/fonts/inter-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url("/css/fonts/inter-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-20B3,U+20B5-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url("/css/fonts/inter-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:Inter fallback;src:local("Arial"),local("Roboto"),local("Helvetica Neue");size-adjust:105.3%;ascent-override:90%;descent-override:22.43%;line-gap-override:0%}@font-face{font-family:NAMU fallback;src:local("Arial"),local("Roboto"),local("Helvetica Neue");size-adjust:106.9%;ascent-override:90%;descent-override:22.43%;line-gap-override:0%}

:root{--nav-counter:1;--font-brand:"NAMU-1990","NAMU fallback","Inter",system-ui,sans-serif;--font-base:"Inter","Inter fallback","SFT Schrifted Sans","Helvetica Neue",Arial,sans-serif;--fs-display:clamp(28px, 3.4vw, 44px);--fs-h1:clamp(24px, 2.3vw, 32px);--fs-h2:clamp(26px, 2.6vw, 36px);--fs-h3:clamp(17px, 1.5vw, 20px);--fs-h4:clamp(16px, 1.3vw, 18px);--fs-lg:clamp(15px, 1.2vw, 17px);--fs-base:clamp(15px, 1vw, 16px);--fs-md:clamp(13px, .95vw, 14px);--fs-sm:clamp(12px, .9vw, 13px);--fs-xs:clamp(11px, .8vw, 12px);--ls-display:-2.88px;--ls-h1:-2.24px;--ls-h2:-1.6px;--ls-h3:-.96px;--ls-h4:-.6px;--ls-lg:-.72px;--ls-base:-.3px;--ls-sm:-.26px;--ls-xs:-.24px;--lh-none:1;--lh-tight:1.05;--lh-snug:1.2;--lh-base:1.3;--lh-relaxed:1.55;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-heavy:800;--fw-black:900;--navy:#001D4B;--dark:#141414;--slate:rgba(20,20,20,.87);--muted:rgba(20,20,20,.6);--white:#fff;--gold:#DEB87A;--gold-hover:#E7C68C;--gold-line:rgba(222,184,122,.55);--gold-edge:rgba(222,184,122,.35);--gold-soft:rgba(222,184,122,.22);--gold-deep:var(--navy);--danger:#b4422f;--ok:#1F7A4D;--danger-bd:#f0d4d4;--ok-bg:#E8F5EE;--ok-bd:#BFE3D0;--ok-fg:#17603F;--danger-bg:#FDECEC;--danger-fg:#8A1F1F;--secondary:rgba(20,20,20,.66);--addr:rgba(20,20,20,.62);--navy-82:rgba(0,29,75,.82);--soft:rgba(20,20,20,.03);--field:rgba(20,20,20,.04);--field-2:rgba(20,20,20,.06);--chip-bg:rgba(20,20,20,.08);--pay-pill:rgba(222,184,122,.18);--placeholder:rgba(20,20,20,.16);--placeholder-img:url("/img/decor/property-placeholder.webp");--hero-word:rgba(20,20,20,.22);--hero-bg-fallback:rgba(20,20,20,.22);--img-fallback:rgba(20,20,20,.21);--excl-ph-1:rgba(20,20,20,.21);--excl-ph-2:rgba(20,20,20,.29);--hero-sup:rgba(20,20,20,.3);--line:rgba(20,20,20,.08);--border-field:rgba(20,20,20,.1);--border-soft:rgba(20,20,20,.15);--pick-div:rgba(20,20,20,.11);--pick-cat:rgba(20,20,20,.06);--hl-bg:rgba(222,184,122,.22);--hl-fg:var(--navy);--navy-08:rgba(0,29,75,.08);--navy-hover:rgba(0,29,75,.88);--ink-05:rgba(20,20,20,.05);--ink-08:rgba(20,20,20,.08);--ink-10:rgba(20,20,20,.1);--ink-12:rgba(20,20,20,.12);--ink-14:rgba(20,20,20,.14);--ink-18:rgba(20,20,20,.18);--ink-28:rgba(20,20,20,.28);--ink-40:rgba(20,20,20,.4);--ink-70:rgba(20,20,20,.7);--white-06:rgba(255,255,255,.06);--white-22:rgba(255,255,255,.22);--white-55:rgba(255,255,255,.55);--white-60:rgba(255,255,255,.6);--white-72:rgba(255,255,255,.72);--white-73:rgba(255,255,255,.73);--glass:rgba(255,255,255,.55);--glass-line:rgba(255,255,255,.55);--glass-dark:rgba(0,29,75,.82);--glass-edge:rgba(255,255,255,.3);--glass-shade:0 2px 10px rgba(0,29,75,.18);--white-82:rgba(255,255,255,.82);--r-ctrl:0;--r-field:0;--r-nav:0;--r-card:0;--r-pill:30px;--r-pill-full:999px;--r-badge:14px;--content:1344px;--content-fixed:1344px;--excl-scale:calc(var(--content) / 1344px);--card-h:513px;--sec-gap:48px;--sec-gap-half:32px;--sec-head-gap:36px;--about-ink:#001D4B;--about-ink-2:rgba(20,20,20,.8);--about-muted:rgba(20,20,20,.66);--about-muted-2:rgba(20,20,20,.6);--about-crumb:rgba(20,20,20,.62);--about-bg:rgba(20,20,20,.04);--about-surface:#fff;--about-chip:rgba(20,20,20,.06);--about-line:rgba(20,20,20,.1);--about-tl-line:rgba(20,20,20,.13);--about-hero-sub:rgba(255,255,255,.72);--about-accent:var(--gold);--about-grad:var(--navy);--about-shadow:0 1px 4px rgba(0,0,0,.06);--about-w-04:rgba(255,255,255,.04);--about-w-06:rgba(255,255,255,.06);--about-w-07:rgba(255,255,255,.07);--about-w-08:rgba(255,255,255,.08);--about-w-10:rgba(255,255,255,.1);--about-w-12:rgba(255,255,255,.12);--about-w-28:rgba(255,255,255,.28);--about-w-70:rgba(255,255,255,.7);--about-w-74:rgba(255,255,255,.74);--about-w-76:rgba(255,255,255,.76);--about-w-78:rgba(255,255,255,.78);--about-r-lg:0;--about-r-md:0;--about-r-sm:0;--about-r-icon:0;--about-r-btn:0;--about-ink-3:rgba(20,20,20,.83);--about-ink-4:rgba(20,20,20,.86);--about-q:rgba(20,20,20,.89);--about-head:#141414;--about-fieldbd:rgba(20,20,20,.14);--about-fieldbd2:rgba(20,20,20,.11);--about-chip2:rgba(20,20,20,.09);--about-muted-3:rgba(20,20,20,.6);--about-ok:#17603F;--about-w-14:rgba(255,255,255,.14);--about-w-60:rgba(255,255,255,.6);--about-w-72:rgba(255,255,255,.72);--about-card-hover:0 10px 26px rgba(0,29,75,.12);--about-form-shadow:0 10px 30px rgba(0,0,0,.18)}@media(max-width:768px){:root{--ls-display:0;--ls-h1:0;--ls-h2:0;--ls-h3:0;--ls-h4:0;--ls-lg:0}html :is(h1,h2,h3,.ff-h1,.pp-title,.hf-hero__body h1){line-height:1.15}html :is(h1,h2,h3,h4,.ff-h1,.pp-title,.bl-hero h1,.hf-hero h1,.hf-hero__body h1,.cat-h1,.pr__h1,.bl-hero__t){letter-spacing:0}html :is(h1,.ff-h1,.pp-title,.bl-hero h1,.hf-hero h1,.pr__h1){font-size:28px}html :is(h2){font-size:24px}html body :is(h1,h2,h3,.ff-h1,.pp-title){font-weight:700}}h1,h2,h3,h4,.ff-h1,.pp-title{font-synthesis:none;-webkit-font-synthesis:none}

/* Шрифти Inter і NAMU-1990 підключені в <head> (layouts/app.blade.php).
   Через @import тут вони чекали, поки завантажиться і розпарситься
   цей файл: браузер дізнавався про них аж на 356 мс, а самі woff2
   приходили на 572 мс. З <link> у head запит іде одразу з HTML. */

/* Усі токени (кольори, кеглі, трекінг, шрифти, радіуси) - у css/tokens.css.
   Підключати tokens.css ПЕРШИМ. Тут лише розкладка та компоненти, що
   посилаються на токени через var(). Нових "магічних" значень не додавати -
   спершу заводити токен у tokens.css.

   Фірмовий шрифт NAMU-1990 (за ТЗ). Оголошення живе у fonts.css; цей блок
   лишився як слід від часу, коли файлів ще не було. Запасний у стеку -
   Inter, він і так завантажений.
@font-face{
  font-family:'NAMU-1990';
  src:url('fonts/NAMU-1990.woff2') format('woff2'),
      url('fonts/NAMU-1990.woff')  format('woff');
  font-weight:400 700;font-style:normal;font-display:swap;
}
*/


*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{font-family:var(--font-base);color:var(--dark);background:var(--white);font-size:var(--fs-base);line-height:var(--lh-base);}
a{color:inherit;text-decoration:none;}

/* ФОРМИ БЕРУТЬ ШРИФТ СТОРІНКИ, А НЕ СИСТЕМНИЙ.

   Браузер малює select, input і кнопку власним шрифтом - у нас це виходив
   Arial. На бойовому 18.09 їх було 118 елементів: перемикачі мови й валюти
   в шапці та в підвалі, нативні списки у фільтрах. Поруч із Inter це видно
   як чужа гарнітура в тому самому рядку.

   inherit, а не назва шрифту: якщо стек колись зміниться, форми поїдуть
   за ним самі. */
button, input, select, optgroup, textarea{ font: inherit; }

/* ЗАМОК ПРОКРУТКИ (FLock, js/scroll-lock.js).

   Один клас на всі оверлеї сайту - меню, галереї, шторки. position:fixed,
   а не сам overflow:hidden: на iOS Safari один overflow сторінку не тримає,
   палець далі гортає те, що під шаром. top виставляє скрипт, щоб сторінка
   лишилась на тому самому місці, а не стрибнула вгору. */
body.fk-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden;}
img{display:block;max-width:100%;}

/* .page - обгортка над .frame. На широких екранах фрейм віддає горизонтальне
   обрізання сюди (.frame стає overflow:visible >1440), щоб фони-банери лилися в
   бічні поля. .page обрізає все зайве по ширині контенту: бічні прев'ю, hero-слова
   та надлишок 100vw-фонів від скролбара - тож сторінка не отримує горизонтального
   скролу. overflow-x:clip (не hidden) не створює scroll-контейнер і не обрізає
   position:fixed навбар, на відміну від overflow на корені (html/body). */
.page{overflow-x:clip;}
.frame{width:1440px;margin:0 auto;background:var(--white);position:relative;overflow-x:clip;}
.container{width:var(--content);margin:0 auto;}

/* ---------- типографіка ---------- */
.h-hero{font-family:var(--font-brand);font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--ls-display);font-weight:var(--fw-medium);text-transform:uppercase;}
/* Заголовки секцій - navy, як у "Відгуках компанії". Один колір на всі
   заголовки сайту: різні відтінки чорного й синього поруч читаються як
   недогляд, а не як задум (рішення Вадима). На темних блоках .h-sec не
   стоїть ніде - перевірено по восьми сторінках. */
.h-sec {font-family:var(--font-brand);font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-h1);font-weight:var(--fw-medium);color:var(--navy);}
/* Ціна - теж брендовим: це друге, на що дивляться після заголовка, і
   цифри в NAMU виглядають як частина того самого голосу. */
.price-xl{font-family:var(--font-brand);font-size:var(--fs-h2);line-height:var(--lh-none);letter-spacing:var(--ls-h2);font-weight:var(--fw-medium);}
.t24{font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:var(--ls-h3);font-weight:var(--fw-medium);}
.t18{font-size:var(--fs-lg);line-height:var(--lh-base);letter-spacing:var(--ls-lg);}
.t15{font-size:var(--fs-base);line-height:var(--lh-base);letter-spacing:var(--ls-base);}
.muted{color:var(--muted);}

/* ---------- кнопки / службові ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 28px;border-radius:var(--r-pill);border:none;cursor:pointer;background:var(--navy);color:var(--white);font-family:var(--font-base);font-weight:var(--fw-medium);font-size:var(--fs-base);line-height:var(--lh-none);letter-spacing:var(--ls-base);}
/* "ДИВИТИСЬ УСІ": ОДНЕ ПОСИЛАННЯ НА ВЕСЬ САЙТ (рішення Вадима 30.09, 653).

   Рамки тут немає навмисно: Вадим її не просив, а просив, щоб скрізь було
   видно, що можна подивитись усі. Тому це посилання, а не кнопка: темно-
   синій напівжирний рядок, золотий шеврон праворуч і тонка золота лінія
   під текстом. При наведенні лінія стає вдвічі товщою, а шеврон зсувається
   вправо.

   Кнопки дій ("Написати відгук", "Отримати консультацію") лишаються
   кнопками: тут тільки переходи до повного списку.

   Стрілку малює CSS, бо золотий колір картинці не задаси; сама картинка
   лишилась у розмітці й просто не показується. */
.see-all{display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:2px 0;
  border:0;background:transparent;
  font-family:var(--font-base);font-size:var(--fs-md);font-weight:600;
  letter-spacing:var(--ls-base);line-height:var(--lh-none);color:var(--navy);
  text-decoration:none;cursor:pointer;
  border-bottom:1px solid var(--gold);
  transition:border-bottom-width .2s ease;}
.see-all::after{content:'\203A';color:var(--gold);font-size:1.3em;line-height:1;
  transition:transform .2s ease;}
.see-all:hover{border-bottom-width:2px;}
.see-all:hover::after{transform:translateX(4px);}
.see-all img{display:none;}
.pill-tag{display:inline-flex;align-items:center;height:24px;padding:0 16px;border-radius:100px;border:1px solid var(--ink-18);font-size:var(--fs-xs);letter-spacing:var(--ls-xs);color:var(--dark);}

/* серця (іконки fav.svg / like.svg) */
.heart{display:inline-grid;place-items:center;}
.heart img{display:block;width:32px;height:32px;}

/* стрілки/крапки на зображеннях */
.arrow-circle{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:var(--white);display:grid;place-items:center;box-shadow:0 4px 14px var(--ink-14);cursor:pointer;z-index:2;}
.arrow-circle.l{left:12px;}
.arrow-circle.r{right:12px;}
.arrow-circle img{width:14px;height:14px;display:block;}
.arrow-circle.l img{transform:scaleX(-1);}
.arrow-circle.filled{background:var(--navy);}
.arrow-circle.filled img{filter:brightness(0) invert(1);}
.dots{display:flex;gap:6px;align-items:center;}
.dots .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-28);display:block;}
.dots .dot.on{background:var(--dark);width:18px;border-radius:3px;}
.img-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:2;}
.arrow-lg{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--white);box-shadow:0 6px 20px var(--ink-10);cursor:pointer;}
.arrow-lg img{width:48px;height:48px;display:block;border-radius:50%;}
.arrow-lg.l img,.excl__arrow--l img{transform:scaleX(-1);}
.cd{display:block;transform:rotate(90deg);}

/* ---------- секції ---------- */
.section{margin-top:var(--sec-gap);}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--sec-head-gap);}
.sec-head--center{flex-direction:column;align-items:center;gap:16px;text-align:center;}
.sec-sub{margin-top:8px;font-size:var(--fs-base);font-weight:var(--fw-regular);line-height:var(--lh-base);letter-spacing:var(--ls-base);color:var(--muted);}
/* компенсація лівого side-bearing великого заголовка: вирівнюємо перші гліфи назви й підзаголовка */
.sec-head:not(.sec-head--center) > div:has(.sec-sub) .h-sec{text-indent:-3px;}


/* Навбар (шапка-пігулка) - винесений у самодостатній компонент.
   Стилі: public/css/nav.css · Розмітка: resources/views/partials/nav.blade.php.
   CSS підключає сам партіал (@push('styles')). Тут лишились ЛИШЕ значення
   --nav-counter по брейкпойнтах (нижче, у медіа-запитах), бо це частина
   глобальної zoom-системи фрейму, а не самого навбару. */



/* Селекти й поле ціни рядка пошуку (сам рядок - у css/home.css). Лишаються
   ТУТ, у базі, попри те що є лише на головній: далі в цьому ж файлі
   .fks__native ховає нативний <select> правилом такої самої ваги
   (width:1px). Виграє те, що нижче за потоком, тож у per-page файлі,
   який підключається ПІСЛЯ style.css, .fk-sel перебивав би .fks__native -
   і поверх кастомного селекта вилазив би нативний. */
/* 2. ТИП + спільний селект */
.fk-sel-wrap{position:relative;}
.fk-sel-wrap--type{flex:1.2 1 200px;min-width:0;}
.fk-sel{appearance:none;-webkit-appearance:none;width:100%;font-family:var(--font-base);font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--dark);cursor:pointer;background:transparent;border:none;outline:none;}
.fk-sel-wrap--type{display:flex;align-items:center;}
.fk-type{height:42px;padding:0 40px 0 16px;}
.fk-sel-wrap--type .fk-ic-cd{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;}

/* 3. ЦІНА */
.fk-price{flex:1.6 1 260px;min-width:0;display:flex;align-items:center;}
.fk-sel-wrap--cur{flex:0 0 76px;height:100%;}
.fk-cur{height:100%;padding:0 20px 0 14px;font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--navy);}

.fk-sel-wrap--cur .fk-ic-cd{position:absolute;right:6px;top:50%;transform:translateY(-50%);pointer-events:none;}


/* ============================================================
   .fks - універсальний кастомний селект (js/fk-select.js).
   Нативний <select> лишається джерелом правди (прихований),
   поверх нього - стилізований тригер + попап у фірмовому стилі.
   Базовий вигляд = самодостатній контрол (owners/career/фільтри).
   Усередині пошукового бару (.fk-sel-wrap) - прозорий, зливається
   з .fk-field. ============================================================ */
.fks{position:relative;display:inline-flex;width:100%;}
.fks__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0;pointer-events:none;}

/* тригер (кнопка, що замінює нативний select) */
.fks__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;height:48px;
  padding:0 14px;border:1px solid var(--border-field);border-radius:var(--r-field);background:var(--white);
  font-family:var(--font-base);font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--dark);
  cursor:pointer;outline:none;text-align:left;transition:border-color .15s,box-shadow .15s;}
.fks__trigger:hover{border-color:var(--ink-28);}
/* Розділено навмисно, не злито через кому.

   Safari до 15.4 не знає :focus-visible, а невідомий псевдоклас у списку
   селекторів робить НЕДІЙСНИМ УСЕ правило - разом із сусіднім селектором,
   який браузер прекрасно розуміє. Тобто на iOS 14.8 разом із фокусом
   зникав би й вигляд відкритого списку.

   Перевірено 18.09: таких правил було пʼять. */
.fks__trigger:focus-visible{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-08);}
.fks.is-open .fks__trigger{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-08);}
.fks__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* стрілка-каретка (малюється CSS, без зовнішнього svg) */
.fks__caret{flex:none;width:10px;height:10px;position:relative;margin-left:2px;color:var(--muted);transition:transform .18s ease;}
.fks__caret::before{content:"";position:absolute;left:1px;top:1px;width:6px;height:6px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);}
.fks.is-open .fks__caret{transform:rotate(180deg);color:var(--navy);}

/* попап зі списком опцій */
.fks__pop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;min-width:100%;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-field);
  box-shadow:0 16px 40px var(--ink-14);padding:6px;max-height:320px;overflow:auto;
  animation:fks-in .14s ease;}
.fks__pop[hidden]{display:none;}
@keyframes fks-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

.fks__opt{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-field);
  cursor:pointer;font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--dark);white-space:nowrap;}
.fks__opt-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.fks__opt-check{flex:none;width:16px;height:16px;position:relative;opacity:0;}
.fks__opt-check::before{content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg);}
.fks__opt.is-active{background:var(--soft);}
.fks__opt.is-sel{color:var(--navy);}
.fks__opt.is-sel .fks__opt-check{opacity:1;}
.fks__opt.is-disabled{color:var(--ink-28);cursor:default;}
.fks__opt.is-disabled.is-active{background:transparent;}

/* компактний варіант (валюта у блоці ціни): label+каретка як єдина
   щільна група по центру. Каретку робимо вужчою (7px), щоб не було
   зайвого повітря між текстом і стрілкою. */
.fks--compact{height:100%;}
.fks--compact .fks__trigger{justify-content:center;gap:4px;}
.fks--compact .fks__label{flex:0 0 auto;}
.fks--compact .fks__caret{width:8px;height:8px;margin-left:0;}
.fks--compact .fks__caret::before{width:5px;height:5px;left:0;top:0;}
.fks--compact .fks__pop{min-width:120px;right:auto;}

/* ============================================================
   .fkd - календар поля дати мовою сайту (js/fk-date.js).
   Нативний <input type="date"> прихований і лишається джерелом
   значення. Кнопка поверх нього бере класи поля (pp-input,
   fav-input), тож тут лише те, чого ті класи не задають.
   Попап fixed: розміри й місце ставить скрипт (place()).
   ============================================================ */
.fkd{position:relative;width:100%;}
/* Два класи, а не один: .pp-input у leadform.css іде ПІСЛЯ style.css і
   повернув би прихованому полю висоту й рамку (та сама історія, що з
   .fks__native вище). */
.fkd > .fkd__native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0;pointer-events:none;}
.fkd__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer;}
.fkd__val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fkd__val.is-empty{color:var(--muted);}
.fkd__icon{flex:none;color:var(--muted);}
.fkd.is-open .fkd__icon{color:var(--navy);}

.fkd__pop{position:fixed;z-index:110;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-field);box-shadow:0 16px 40px var(--ink-14);padding:12px;
  animation:fks-in .14s ease;}
.fkd__pop[hidden]{display:none;}
.fkd__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.fkd__title{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--dark);}
.fkd__nav{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;
  border:0;border-radius:var(--r-field);background:transparent;color:var(--navy);cursor:pointer;}
.fkd__nav:hover{background:var(--soft);}
.fkd__nav:disabled{color:var(--ink-28);background:transparent;cursor:default;}
.fkd__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.fkd__wd{padding:4px 0 6px;text-align:center;font-size:var(--fs-xs);color:var(--muted);}
.fkd__day{height:34px;padding:0;border:0;border-radius:var(--r-field);background:transparent;
  font-family:var(--font-base);font-size:var(--fs-sm);color:var(--dark);cursor:pointer;}
.fkd__day:hover{background:var(--soft);}
.fkd__day.is-today{box-shadow:inset 0 0 0 1px var(--gold);}
.fkd__day.is-sel{background:var(--navy);color:var(--white);box-shadow:none;}
.fkd__day:disabled{color:var(--ink-28);background:transparent;cursor:default;}
/* Окремими правилами, не через кому: див. коментар до .fks__trigger. */
.fkd__day:focus-visible{outline:2px solid var(--navy);outline-offset:1px;}
.fkd__nav:focus-visible{outline:2px solid var(--navy);outline-offset:1px;}
.fkd__clear:focus-visible{outline:2px solid var(--navy);outline-offset:1px;}
.fkd__foot{display:flex;justify-content:flex-end;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);}
.fkd__clear{padding:6px 10px;border:0;border-radius:var(--r-field);background:transparent;
  font-family:var(--font-base);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--navy);cursor:pointer;}
.fkd__clear:hover{background:var(--soft);}



/* =================== КАРТКИ =================== */
/* Усі картки на головній зведені до однієї висоти (--card-h), щоб ряди й секції
   були вирівняні. Виняток - картки агентів (.fa-card) у блоці "Топ агенти",
   які мають власну розмітку й сюди не входять. */
/* minmax(0,1fr), а не 1fr: дозволяє колонці стискатись ВУЖЧЕ за вміст. Інакше
   nowrap-назва картки (.card__title) задає min-content і розпирає колонку - за
   вузького контейнера картки вилазять за край. min-width:0 на картці вмикає
   ellipsis (текст обрізається, а не штовхає сусідів). */
/* align-items:stretch, тож усі картки в ряду однакової висоти; .card має
   margin-top:auto на футері, тож стат-рядок притискається донизу. */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch;}
.grid4 > *{min-width:0;}




/* ====== ЗГОДА НА ОБРОБКУ ПЕРСОНАЛЬНИХ ДАНИХ (partials/consent) ======
   Спільний блок під усіма лід-формами сайту, тому живе в базовому style.css,
   а не в per-page css. Чекбокс - нативний (accent-color), щоб браузер міг
   показати підказку required і сфокусувати його. */
.consent{display:flex;align-items:flex-start;gap:10px;margin-top:14px;cursor:pointer;}
.consent__box{flex:0 0 auto;width:16px;height:16px;margin:1px 0 0;accent-color:var(--navy);cursor:pointer;}
.consent__text{color:var(--muted);font-size:var(--fs-sm);letter-spacing:var(--ls-sm);line-height:1.45;}
.consent__text a{color:var(--dark);text-decoration:underline;}
.consent__text a:hover{color:var(--navy);}

/* Блоки "ВІДГУКИ" (.fr-*) і "ТОП АГЕНТИ" (.fa-*) - у власних css/reviews.css та css/top-agents.css */

/* =================== ФУТЕР =================== */
/* Розділювач + карта сайту вирівняні з рештою макета: колонки починаються
   від лівого краю .container (як секції вище і темний футер нижче), а не з
   відступом 114px. Вертикаль на ритмі секцій: 80px над лінією + 80px під нею
   = 160px до контенту (як проміжок між .section). Сітка - 5 рівних колонок на
   повну ширину .container (repeat(5,1fr)): однакові поля зліва й справа, а
   зайвий простір іде в ширші проміжки між колонками, а не в порожнечу праворуч. */
/* =====================================================================
   ЛАУНЧЕР "МИ НА ЗВʼЯЗКУ" (partials/contact-launcher.blade.php)

   Одне коло в правому нижньому куті й панель із трьома рівними рядками.
   Свідомо не сторонній скін: віджет дзвінка оформлюється у своєму
   кабінеті, а панель - наша, у типографіці сайту.

   Зʼявляється через три секунди після завантаження, щоб не заважати
   першому екрану й не чіпати LCP. Позиція фіксована - зсуву верстки не
   дає навіть у момент появи. Без пульсацій і бейджів: кнопка має бути
   помітною, а не настирливою.
   ===================================================================== */
.cl{
  position:fixed; right:24px; bottom:24px; z-index:150;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.cl.is-ready{ opacity:1; transform:none; pointer-events:auto; }

.cl__btn{
  width:56px; height:56px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer;
  background:var(--navy); color:#fff;
  box-shadow:0 8px 24px rgba(0,29,75,.22);
}
.cl__btn:hover{ opacity:.92; }
.cl__btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.cl__ico{ width:24px; height:24px; }

/* Панель - те саме скло, що в шапці при прокрутці: біле 85 % з розмиттям
   12. Лаунчер висить над сторінкою, і суцільна біла плита виглядала на
   ній чужою наліпкою; крізь скло видно, що під нею. Скло на сайті рівно
   в трьох місцях: шапка, мобільне меню й тут. */
.cl__panel{
  width:280px; max-width:calc(100vw - 32px);
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(0,29,75,.12); border-radius:var(--r-card);
  box-shadow:0 16px 48px rgba(0,29,75,.14);
  padding:14px;
}

/* Браузер без скла отримує щільний білий - напівпрозорий фон без
   розмиття зробив би текст нечитабельним поверх фотографій. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cl__panel{ background:var(--white); }
}
.cl__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; }
.cl__title{ font-size:var(--fs-base); font-weight:var(--fw-bold); color:var(--dark); }
.cl__close{
  border:0; background:none; cursor:pointer; padding:0 4px;
  font-size:22px; line-height:1; color:var(--muted);
}
.cl__close:hover{ color:var(--dark); }

/* Три рядки однакової ваги: жодна дія не головніша за інші, бо люди
   різні - хтось пише, хтось дзвонить. */
.cl__act{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 12px; margin:0 0 8px; cursor:pointer; text-align:left;
  background:#fff; border:1px solid var(--ink-08); border-radius:2px;
  color:var(--dark); font:inherit; font-size:var(--fs-base);
  text-decoration:none;
}
.cl__act:last-child{ margin-bottom:0; }
/* Обвідка при наведенні - navy, не золото: золота лінія на білому
   ледь помітна, і рядок виглядає так само, як до наведення (080 Е). */
.cl__act:hover{ border-color:var(--navy); }
.cl__act:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.cl__act-ic{
  width:32px; height:32px; flex:none; border-radius:2px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--navy); color:#fff;
}
.cl__act-ic svg{ width:18px; height:18px; }

@media (max-width:700px){
  .cl{ right:16px; bottom:16px; left:16px; align-items:flex-end; }
  /* Панель на всю ширину - у неї три рядки, і тулити їх у 280 пікселів
     на вузькому екрані немає потреби.

     І скло: на телефоні панель лежить поверх контенту, який під нею
     прокручується. Матове скло показує, що там щось є, і панель перестає
     виглядати вирізаною з іншої сторінки. */
  .cl__panel{
    width:100%; max-width:none;
    background:rgba(255,255,255,.8);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
    backdrop-filter:blur(14px) saturate(1.3);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cl__panel{ background:rgba(255,255,255,.97); }
  }
}

/* Кругла кнопка постачальника колтрекінгу в лівому куті - прибрана.

   Вона робить те саме, що наш рядок "Замовити дзвінок", тільки чужим
   виглядом і з пульсацією, а два плаваючі кола на екрані - це вже не
   зручність, а перешкода: на телефоні вони вдвох накривають картку.

   Ховаємо саме КНОПКУ, а не віджет: форму колбеку відкриває наш рядок, і
   вона має лишитись робочою. Правильне місце для цього - налаштування
   віджета в його кабінеті; доти цей рядок тримає слово, дане на сайті.

   pointer-events - щоб невидиме коло не перехоплювало натискання по
   картках, які під ним. */
.rngst_phone_button{
  display:none !important;
  pointer-events:none !important;
}

/* Друк і рамка: плаваюча кнопка там ні до чого. */
@media print{ .cl{ display:none; } }

/* Перехід за якорем не має ховати заголовок під шапкою.

   Шапка плаває над сторінкою (fixed, 24 зверху + 56 висоти), тож браузер,
   доводячи якір до верху вікна, ставив його рівно за нею: на /franchise від
   слова "Новобудови" лишалось "...дови". Одне правило на корені знімає це
   скрізь - і в меню, і в змісті статті, і в посиланнях мапи сайту, - тому
   поодинокі scroll-margin-top по файлах більше не потрібні.

   Значення - висота шапки плюс ковток повітря. */
:root{ --nav-space:96px; }
html{ scroll-padding-top:var(--nav-space); }

@media (max-width:900px){
  :root{ --nav-space:92px; }
}

/* Мапа сайту сама задає свій ритм над собою.

   Було так: сторінка закінчувалась секцією з власним нижнім відступом (у
   .hf це 80px), і зверху додавались іще 80 від лінії - разом 160. А на
   головній остання секція нижнього відступу не має, і виходило 80. Той
   самий блок на різних сторінках висів на різній висоті - і саме це
   впадало в око: на /owners і /terms над "Квартири" біла пляма, на
   головній - ні.

   Тепер відступ один і належить блоку, а остання секція сторінки свій
   нижній відступ віддає. :has() тут доречний: правило звучить рівно так,
   як його треба прочитати - "секція, за якою одразу йде мапа сайту". */
:where(section, div, article):has(+ .container > .footer-divider){
  padding-bottom:0;
  margin-bottom:0;
}
.footer-divider{height:1px;background:var(--line);margin:var(--sec-gap-half) 0 0;}
/* Мапа сайту під лінією. Відступ згори - 40, а не 80: лінію від секції
   вище вже відсуває той самий ритм, і два відступи поспіль давали між
   забудовниками й першим заголовком порожню смугу в півтори сотні
   пікселів. Колонки вирівнюємо по верху - інакше коротка колонка
   розтягується на висоту найдовшої й додає порожнечі вже під собою. */
/* Шість колонок: квартири, будинки, ділянки, комерція, райони й
   новобудови. Країни стоять підгрупою в колонці новобудов, а не сьомою
   колонкою: сьома переносилась на другий рядок і ламала рівний ряд
   (Вадим, 01.10). Не auto-fit, у колонок різна довжина списків, і рівна
   сітка тримає їх на одній лінії. */
.sitemap{display:grid;grid-template-columns:repeat(6,1fr);gap:0 16px;padding:40px 0 0;align-items:start;}
.sitemap .col h5{margin-bottom:24px;}
.sitemap .col a{display:block;color:var(--dark);margin-bottom:5px;font-size:var(--fs-base);letter-spacing:var(--ls-base);}
.sitemap .col a:hover{opacity:.6;}
/* Підзаголовок усередині колонки: "За районом", "За кордоном". Раніше
   ним міг бути тільки рядок-посилання, тепер і просто підпис: країни
   новобудов переїхали підгрупою в колонку новобудов (Вадим, 01.10), а
   підгрупа, це не посилання. Вигляд той самий. */
/* "Ще": решта посилань колонки. Згортає сам браузер, без скрипта, і
   посилання при цьому стоять у коді, тож пошук бачить усі (724 п.3). */
.sitemap__more{ margin:0; }
.sitemap__more > summary{ list-style:none; cursor:pointer; margin-top:10px; margin-bottom:5px;
  color:var(--muted); font-size:var(--fs-base); letter-spacing:var(--ls-base); }
.sitemap__more > summary::-webkit-details-marker{ display:none; }
.sitemap__more > summary:hover{ opacity:.6; }
.sitemap .col a.gap,
.sitemap .col span.gap{display:block;margin-top:18px;margin-bottom:5px;color:var(--muted);font-size:var(--fs-base);letter-spacing:var(--ls-base);}

.seo{background:var(--soft);margin-top:var(--sec-gap-half);padding:64px 0;}
.seo__in{width:var(--content);margin:0 auto;}
.seo__in h3{font-weight:var(--fw-medium);margin-bottom:12px;}
.seo__in > p{color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;}
.seo__in.is-open > p{-webkit-line-clamp:unset;overflow:visible;}

/* Текстові блоки з Content & SEO Hub: заголовки, абзаци, питання-відповіді,
   перелінковка. line-clamp тут не годиться - він обрізав би КОЖЕН абзац
   окремо, тож ріжемо блок цілком по висоті чотирьох рядків, як і власний
   текст, а "Читати повністю" розкриває його весь. */
.seo__in > .seo__html{color:var(--muted);max-height:calc(4em * var(--lh-base));overflow:hidden;}
.seo__in.is-open > .seo__html{max-height:none;overflow:visible;}
.seo__in > .seo__html > * + *{margin-top:12px;}
.seo__in > .seo__html h2,.seo__in > .seo__html h3,.seo__in > .seo__html h4{color:var(--dark);font-weight:var(--fw-medium);margin-top:22px;}
.seo__in > .seo__html a{text-decoration:underline;text-underline-offset:3px;}
.seo__in > .seo__html ul,.seo__in > .seo__html ol{padding-left:20px;list-style:revert;}
.seo__in > .seo__html li + li{margin-top:6px;}
.seo__faq-q{margin-top:18px;}
.seo__faq-a{margin-top:6px;}
.seo__links{margin-top:22px;}
.seo__links-title{color:var(--dark);font-weight:var(--fw-medium);display:block;margin-bottom:12px;}
.seo__links ul{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none;}
.seo__links li + li{margin-top:0;}
.seo__links a{background:var(--white);border-radius:999px;padding:6px 14px;display:inline-block;text-decoration:none;}
.seo__links a:hover{opacity:.7;}
/* "Читати повністю" - текстова кнопка сайту: navy, без рамки й заливки,
   золоте підкреслення при наведенні. Шеврон малюємо самі й повертаємо
   його, коли текст розгорнуто, - тоді напис і стрілка кажуть одне й те
   саме. */
.seo__more{
  color:var(--navy); font-weight:var(--fw-semibold); margin-top:22px;
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; padding:0; cursor:pointer;
  font-size:var(--fs-base); font-family:inherit;
  text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:4px; transition:text-decoration-color .16s ease;
}
.seo__more::after{
  content:''; width:8px; height:8px; margin-top:-3px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg); transition:transform .16s ease;
}
.seo__more[aria-expanded="true"]::after{ transform:rotate(-135deg); margin-top:2px; }
.seo__more:hover{ text-decoration-color:var(--gold); }
.seo__more:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }

.dark{background:var(--navy);color:var(--white);padding:var(--sec-gap-half) 0 0;}
/* Мінімальної висоти більше немає. Вона тримала підвал "великим", коли
   колонок було пʼять; тепер їх три (оренда зʼявиться сама, коли в ній
   будуть обʼєкти), і 460 пікселів просто домальовували порожнечу під
   посиланнями. */
.dark .container{display:flex;flex-direction:column;}
.dark__logo{margin-bottom:32px;}
.dark__logo img{height:18px;width:auto;display:block;filter:brightness(0) invert(1);}
.dark__cols{display:grid;grid-template-columns:227px 228px 228px 226px 228px 1fr;gap:0;}
.dark__cols h5{margin-bottom:18px;color:var(--white);font-weight:var(--fw-medium);}
/* Заголовок колонки, який ще й посилання, має виглядати як решта
   заголовків: колір бере в них, а не в звичайних посилань підвалу. */
.dark__cols h5 a{color:inherit;}
.dark__cols h5 a:hover{color:var(--gold);}
.dark__cols a{display:block;color:var(--white-72);margin-bottom:7px;font-size:var(--fs-base);letter-spacing:var(--ls-base);}
.dark__cols a:hover{color:var(--white);}
/* Нижній ряд підвала: гнучкий, а не сітка з фіксованих колонок.

   У сітці перемикачі стояли в останній колонці шириною двісті пікселів і
   вилазили за неї - рівно під плаваючу кнопку звʼязку, яка накривала
   вибір валюти. Тепер вони просто останні в ряду, а праворуч лишається
   місце під кнопку. */
/* НИЖНІЙ РЯДОК ПІДВАЛУ - В ОДИН РЯДОК.

   Було: `flex-wrap:wrap` і `gap:40px`, копірайт із `white-space:nowrap`.
   Разом елементи займали ширше за контейнер, і перемикач мови й валюти
   падав на другий рядок - висота 129 пікселів замість сорока (385).

   Тепер на десктопі рядок не переноситься, а стискається копірайт: він
   єдиний, кому є що віддати. Посилання й перемикачі лишаються цілими -
   обрізаний "Вхід для аг..." гірший за коротший копірайт. */
.dark__bottom{display:flex;flex-wrap:nowrap;align-items:center;gap:16px 24px;margin-top:auto;padding:24px 0 20px;font-size:var(--fs-base);letter-spacing:var(--ls-base);}
.dark__bottom > span:empty{display:none;}
.dark__bottom > a{white-space:nowrap;flex:0 0 auto;}
/* Копірайт короткий і не ріжеться. Був довгий рядок із правами, і щоб
   рядок тримався в одну лінію, він обрізався трьома крапками: "Все права
   защищ...". Недописане слово в підвалі гірше за короткий напис (385). */
.dark__bottom .muted2{color:var(--white-73);white-space:nowrap;flex:0 0 auto;margin-right:auto;}
/* Праворуч від перемикачів лишається місце під плаваючу кнопку звʼязку:
   вона висить у правому нижньому куті над усім і накривала собою вибір
   валюти - "USD" було видно наполовину. Відступ дає сам ряд, а не
   перемикачі: у ряду шість колонок фіксованої ширини, і зовнішній відступ
   останньої з них сітку не звужував. */
.dark__switch{margin-left:auto;display:flex;gap:12px;flex:0 0 auto;}
.dark__bottom{padding-right:96px;}

@media (max-width:900px){
  /* На телефоні переноси дозволені: рядок ділиться на групи, і це
     нормально - місця для одного рядка там немає ні в якій мові. */
  .dark__bottom{padding-right:0;flex-wrap:wrap;}
  .dark__bottom .muted2{flex:1 1 100%;overflow:visible;text-overflow:clip;white-space:normal;}
  .dark__switch{margin-left:0;}
}
.dark__switch .sw{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--white-22);border-radius:var(--r-ctrl);font-size:var(--fs-xs);cursor:pointer;}
/* мова + валюта як окремі .fks-випадашки на темному футері: рамка-пігулка,
   білий текст, попап лишається світлим (успадковує базовий .fks__pop) */
.dark__switch .fks{width:auto;}
.dark__switch .fks__trigger{height:40px;padding:0 14px;gap:8px;border:1px solid var(--white-22);
  background:transparent;box-shadow:none;border-radius:var(--r-ctrl);
  font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--white);}
.dark__switch .fks__trigger:hover{border-color:var(--white-55);background:var(--white-06);}
/* Розділено навмисно, не злито через кому.

   Safari до 15.4 не знає :focus-visible, а невідомий псевдоклас у списку
   селекторів робить НЕДІЙСНИМ УСЕ правило - разом із сусіднім селектором,
   який браузер прекрасно розуміє. Тобто на iOS 14.8 разом із фокусом
   зникав би й вигляд відкритого списку.

   Перевірено 18.09: таких правил було пʼять. */
.dark__switch .fks__trigger:focus-visible{border-color:var(--white);box-shadow:none;background:var(--white-06);}
.dark__switch .fks.is-open .fks__trigger{border-color:var(--white);box-shadow:none;background:var(--white-06);}
.dark__switch .fks__caret{color:var(--white);}
.dark__switch .fks.is-open .fks__caret{color:var(--white);}
/* ВИПАДАЙКИ В ПІДВАЛІ РОЗКРИВАЮТЬСЯ ВГОРУ.

   Вони стоять у найнижчому рядку сторінки, і список, що падає вниз,
   вилазив білою плямою під темний підвал - на тло, якого там уже немає.
   Виглядало як помилка верстки, а не як меню.

   Угору місця завжди досить: над рядком перемикачів лежить увесь підвал.
   Анімація теж перевертається, інакше список "виїжджав" згори вниз,
   тобто в бік, протилежний до того, куди відкрився. */
.dark__switch .fks__pop{left:auto;right:0;min-width:96px;
  top:auto;bottom:calc(100% + 8px);animation:fks-up .14s ease;}
@keyframes fks-up{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}


/* тост */
/* ПОВІДОМЛЕННЯ - У КУТКУ, А НЕ ПОСЕРЕД ТОВАРУ (409 §6).

   Стояло по центру внизу й лягало просто поверх картки: людина прибирає
   обране, а замість фотографії бачить темну плашку "Видалено з обраного".
   Тепер у правому нижньому кутку, з відступом від краю; на вузькому екрані
   притискається до обох країв, але лишається внизу й гасне саме через 2,6 с. */
.toast{position:fixed;right:24px;left:auto;bottom:24px;max-width:min(360px, calc(100vw - 32px));transform:translateY(16px);background:var(--navy);color:var(--white);padding:14px 24px;font-size:var(--fs-base);letter-spacing:var(--ls-base);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:200;}
.toast.show{opacity:1;transform:translateY(0);}

/* =================== КАТАЛОГ (сторінка лістингу) =================== */
/* Розпірка під фіксованою шапкою.

   Шапка (.nav) стоїть position:fixed і живе в координатах вікна: 24px
   зверху плюс 56px висоти = 80 реальних пікселів. А ця розпірка лежить
   ВСЕРЕДИНІ .frame, який на вузьких екранах стиснутий через zoom, - і
   80px тут перетворюються на 80 × zoom реальних. На 13-дюймовому
   ноутбуці (zoom .87) це 70 замість 80, і шапка накриває заголовок
   сторінки на десять пікселів; що вужчий екран, то більше (321).

   Тому множимо на той самий --nav-counter (1/zoom), яким компенсує себе
   сама шапка: 80 × 1.149 × .87 = 80 реальних. На широких екранах
   --nav-counter = 1, і нічого не змінюється. */
.cat-header{position:relative;height:calc(80px * var(--nav-counter));}

/* Хлібні крихти - ЄДИНИЙ компонент для всього сайту (розмітку дає
   partials/crumbs.blade.php): знак FAKTOR, далі іконка-роздільник, далі пункти,
   останній неактивний. Живе у style.css, бо він глобальний. */
.cat-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px;color:var(--muted);font-size:var(--fs-sm);letter-spacing:var(--ls-sm);}
.cat-crumbs a{color:inherit;text-decoration:none;}
.cat-crumbs a:hover{color:var(--dark);}
/* Перша ланка - слова, а не знак: Google читає крихти як текст, і на місці
   логотипа в нього була порожнеча. */
.cat-crumbs .crumb-home{display:inline-flex;align-items:center;}
.cat-crumbs .sep{display:grid;place-items:center;color:var(--ink-40);font-size:var(--fs-md);line-height:1;}
.cat-crumbs .sep svg,.cat-crumbs .sep img{width:12px;height:12px;}
.cat-crumbs .cur{color:var(--dark);}
/* крихти першими у власному блоці з паддінгом - верхній відступ зайвий */
.cat-crumbs--flush{margin-top:0;}

/* Заголовок, швидкі теги, панель фільтрів та обрані чипи каталогу - окремий
   самодостатній компонент .ff-block (css/catalog-filters.css + js/catalog-filters.js). */

/* розділювач під блоком фільтрів */
.cat-hr{height:1px;background:var(--line);}

/* --- результати: лічильник зліва + сортування справа --- */
.cat-resultrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:33px;margin-bottom:56px;}
.cat-count{font-size:var(--fs-base);letter-spacing:var(--ls-base);color:var(--muted);}
.cat-count b{font-weight:var(--fw-medium);color:var(--dark);}
.cat-sortrow{display:flex;justify-content:flex-end;margin-top:33px;margin-bottom:56px;}
.sort-wrap{position:relative;}
.sort-btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;background:var(--white);border:1px solid var(--ink-14);color:var(--dark);font-family:var(--font-base);font-weight:var(--fw-regular);font-size:var(--fs-base);line-height:var(--lh-none);letter-spacing:var(--ls-base);cursor:pointer;border-radius:var(--r-ctrl);}
.sort-btn svg,.sort-btn img{flex:0 0 auto;}
.sort-menu{position:absolute;top:calc(100% + 8px);right:0;width:230px;list-style:none;background:var(--white);border:1px solid var(--line);box-shadow:0 18px 44px var(--ink-14);z-index:30;padding:6px;display:none;}
.sort-wrap.open .sort-menu{display:block;}
.sort-menu li{padding:11px 14px;font-size:var(--fs-base);letter-spacing:var(--ls-base);color:var(--dark);cursor:pointer;}
.sort-menu li:hover{background:var(--soft);}
.sort-menu li.sel{color:var(--navy);font-weight:var(--fw-medium);}

/* --- сітка карток (ЕТАЛОН .card - компактні; ряди вирівнюються згори) --- */
.cat-grid{gap:32px 20px;align-items:start;}

/* --- пагінація --- */
.pagination{margin-top:56px;display:flex;flex-direction:column;align-items:center;gap:20px;}
.showmore{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border:1px solid var(--ink-14);border-radius:var(--r-ctrl);background:var(--white);color:var(--dark);font-family:var(--font-base);font-weight:var(--fw-regular);font-size:var(--fs-base);letter-spacing:var(--ls-base);cursor:pointer;transition:border-color .15s,background .15s;}
.showmore:hover{border-color:var(--ink-40);}
.showmore.is-loading{opacity:.6;cursor:progress;}
.showmore svg,.showmore img{width:16px;height:16px;flex:0 0 auto;}
.pages{display:flex;gap:7px;}
.pg{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--ink-14);background:var(--white);color:var(--dark);font-family:var(--font-base);font-weight:var(--fw-regular);font-size:var(--fs-base);line-height:var(--lh-none);letter-spacing:var(--ls-base);cursor:pointer;border-radius:var(--r-ctrl);}
.pg:hover{border-color:var(--ink-40);}
.pg.on{background:var(--navy);border-color:var(--navy);color:var(--white);}
.pg.arrow{color:var(--dark);}
.pg.arrow.prev svg,.pg.arrow.prev img{transform:scaleX(-1);}

/* =================== АДАПТИВ · підгонка 1440-макета =================== */
/* Макет зафіксований на 1440px. На вужчих екранах (13" ноутбуки тощо)
   пропорційно зменшуємо весь .frame через zoom - композиція 1:1, без
   горизонтального скролу. Усе на CSS (без JS): ступінчастий zoom за шириною
   вікна. Кожен крок підібрано так, щоб zoom×1440 влазив у нижню межу свого
   діапазону навіть зі скролбаром. Порядок: від ширшого до вужчого -
   спрацьовує найвужчий збіг. --nav-counter = 1/zoom на кожному кроці -
   контр-масштабує навбар, щоб він лишався 1:1 поверх стиснутого фрейма. */

/* Вертикальний ритм окремо від zoom: zoom стискає лише ширину-композицію, тож
   на ноутбуках сторінка лишається дуже високою. На вужчих екранах стискаємо
   міжсекційні відступи понад zoom - сторінка стає коротшою, контент щільніший,
   без впливу на горизонталь. --sec-gap-half тримає пропорцію 2:1 футера;
   --sec-head-gap підтискає шапку секції в тому ж ритмі. */
@media (max-width:1439px){ :root{ --sec-gap:104px; --sec-gap-half:52px; --sec-head-gap:28px; } }  /* 13-14" */
@media (max-width:1200px){ :root{ --sec-gap: 88px; --sec-gap-half:44px; --sec-head-gap:24px; } }
@media (max-width: 960px){ :root{ --sec-gap: 72px; --sec-gap-half:36px; --sec-head-gap:20px; } }

/* =================== ШИРИНА КОНТЕНТУ ПО ДІАПАЗОНАХ ===================
   Базове --content (для >1600px) - у tokens.css. Тут перевизначаєш ширину
   колонки на кожному діапазоні монітора. ОДИН РЯДОК = ОДИН ДІАПАЗОН.
   Просто став потрібну ширину в px. Менше = вужчі картки + ширші поля.
   .excl і навбар підлаштуються самі. Порядок: від ширшого до вужчого. */
@media (max-width:1600px){ :root{ --content:1280px; } }  /* великі ноути / 1440-1600 */
@media (max-width:1440px){ :root{ --content:1200px; } }  /* 14-15" / 1367-1440 */
@media (max-width:1366px){ :root{ --content:1140px; } }  /* типові 13" / 1281-1366 */
@media (max-width:1280px){ :root{ --content:1080px; } }  /* 1201-1280 */
@media (max-width:1120px){ :root{ --content:1000px; } }  /* 1025-1120 */
@media (max-width: 960px){ :root{ --content: 900px; } }  /*  ≤960 */

@media (max-width:1439px){ .frame{ zoom:.93; } :root{ --nav-counter:1.075; } }  /* 1367-1439 */
@media (max-width:1366px){ .frame{ zoom:.87; } :root{ --nav-counter:1.149; } }  /* 1281-1366 (типові 13") */
@media (max-width:1280px){ .frame{ zoom:.82; } :root{ --nav-counter:1.220; } }  /* 1201-1280 */
@media (max-width:1200px){ .frame{ zoom:.76; } :root{ --nav-counter:1.316; } }  /* 1121-1200 */
@media (max-width:1120px){ .frame{ zoom:.69; } :root{ --nav-counter:1.449; } }  /* 1025-1120 */
@media (max-width:1024px){ .frame{ zoom:.65; } :root{ --nav-counter:1.538; } }  /*  961-1024 */
@media (max-width: 960px){ .frame{ zoom:.58; } :root{ --nav-counter:1.724; } }  /*  861-960  */
@media (max-width: 860px){ .frame{ zoom:.52; } :root{ --nav-counter:1.923; } }  /*  769-860  */
@media (max-width: 768px){ .frame{ zoom:.46; } :root{ --nav-counter:2.174; } }  /*  ≤768 (нижче - планшет/моб., окрема історія) */

/* =================== FULL-BLEED ФОНІВ (екрани > 1440) ===================
   Макет зафіксований на 1440px (.frame центрований). На вузьких екранах він
   масштабується zoom-ом і вже заповнює всю ширину - там нічого не потрібно.
   На широких (Full HD тощо) zoom = 1, тож фрейм стоїть 1440px по центру, а
   ліворуч/праворуч лишалися білі поля. Тут фон-фото хедера і темний футер
   розтягуються на всю ширину вікна, а КОНТЕНТ (контейнери) лишається в колонці
   1440px - вирівняний з рештою секцій. Бо медіазапит вмикається лише >1440,
   де zoom завжди = 1, прийом із 100vw не конфліктує з масштабуванням. */
@media (min-width:1441px){
  /* фрейм перестає обрізати по горизонталі - зайве підбирає обгортка .page вище */
  .frame{overflow:visible;}


  /* темний футер: ФОН на всю ширину через псевдоелемент, колонки лишаються центровані в 1440 */
  .dark{position:relative;isolation:isolate;}
  .dark::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;background:var(--navy);z-index:-1;}

  /* SEO-блок: сірий ФОН на всю ширину вікна через псевдоелемент, текст лишається центрованим у 1440 */
  .seo{position:relative;isolation:isolate;background:transparent;}
  .seo::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;background:var(--soft);z-index:-1;}
}

/* ============================================================================
   МОБІЛЬНИЙ РЕЖИМ (≤900px) - справжнє переверстання головної під телефон.

   Вище 900px працює zoom-система: увесь 1440-макет пропорційно стискається.
   На телефоні це дало б нечитабельно дрібний текст, тож із 900px і нижче ми
   ВИМИКАЄМО zoom (zoom:1) і скидаємо фрейм у гумову колонку (width:100%). Далі
   кожен блок переверстано у вертикальний потік: абсолютні координати hero/excl
   знімаємо, багатоколонкові сітки згортаємо в одну колонку.

   ПЕРЕДУМОВА: home віддає адаптивний viewport (@section('viewport') у
   home/index.blade.php дає width=device-width). Без нього телефон рендерив би
   сторінку в 1440px і ці медіазапити не спрацювали б.
   ============================================================================ */
@media (max-width:900px){

  /* --- фрейм: знімаємо zoom і фіксовану ширину, лишаємо гумову колонку --- */
  .frame{width:100%;zoom:1;overflow-x:clip;}
  :root{--nav-counter:1;--sec-gap:80px;--sec-gap-half:44px;--sec-head-gap:18px;}
  .container{width:auto;padding:0 16px;}

  /* ширші токени кеглів під мобільний масштаб (заголовки секцій, ціна) */
  /* Кегль тут більше не перевизначаємо: шкала в tokens.css гумова (clamp),
     і друге значення "для мобільного" лише поверталo б стрибок. */


  /* колонку sitemap "Райони Одеси" на телефоні ховаємо */
  .col--districts{display:none;}





  /* =============== СІТКИ ОБ'ЄКТІВ =============== */
  /* grid4 стає ДВОМА колонками, а не однією.

     Одна колонка тут була помилкою масштабу: 900 пікселів - це не телефон,
     це вікно ноутбука або браузер із збільшенням 150 %. Картка розтягувалась
     на всі 868 пікселів, фото ставало заввишки з пів екрана, і в ряду
     лишалась одна плитка замість чотирьох. На телефоні одна колонка
     правильна - вона нижче, від 600. */
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}






  /* =============== ФУТЕР =============== */
  /* карта сайту: 5 колонок стають 2; темний футер: 6 фіксованих колонок стають 1 стеком */
  .sitemap{grid-template-columns:1fr 1fr;gap:28px 20px;}
  .seo{padding:40px 0;}
  .seo__in{width:auto;padding:0 16px;}

  .dark__logo{margin-bottom:36px;}
  .dark__cols{grid-template-columns:1fr 1fr;gap:28px 20px;}
  .dark__bottom{grid-template-columns:1fr;gap:20px;padding:32px 0 24px;}
  .dark__switch{justify-self:start;}
}

/* ============================================================================
   КАТАЛОГ (сторінка лістингу) - МОБІЛЬНИЙ РЕЖИМ (≤900px)

   Блок фільтрів .ff-block переверстує css/catalog-filters.css (свій медіазапит).
   Тут - "хром" сторінки навколо нього: шапка-пігулка, рядок результатів +
   сортування, сітка карток і пагінація. Сітка .cat-grid успадковує .grid4, яка
   вже згорнута в 1 колонку вище; тут лише щільніший проміжок під компактні .card.
   ПЕРЕДУМОВА та сама - адаптивний viewport каталогу (width=device-width).
   ============================================================================ */
@media (max-width:900px){
  /* шапка-пігулка: фіксований навбар (top:24px, h:52px, тобто низ ≈76px) -
     лишаємо запас під breadcrumb блоку фільтрів */
  .cat-header{height:calc(80px * var(--nav-counter));}

  /* лічильник + сортування: щільніші відступи, лічильник може перенестись */
  .cat-resultrow{margin-top:18px;margin-bottom:24px;gap:12px;}
  .sort-menu{width:min(230px,calc(100vw - 32px));}

  /* сітка карток: 1 колонка (від .grid4), під компактну .card - вужчий проміжок */
  .cat-grid{gap:26px;}

  /* пагінація: менші кнопки + перенос, щоб ряд не вилазив за вузький екран */
  .pagination{margin-top:36px;gap:16px;}
  .pages{flex-wrap:wrap;justify-content:center;gap:6px;}
  .pg{width:42px;height:42px;}
}

/* Планшет / великий телефон-ландшафт (600-900px): каталог показує картки у 2
   колонки. .card компактна й розрахована на сітку, тож на планшеті 1 колонка
   давала б завелике фото - 2 колонки краще заповнюють ширину. Стосується лише
   .cat-grid (перебиває .grid4 з 1fr вище саме в цьому діапазоні). */
@media (min-width:600px) and (max-width:900px){
  .cat-grid{grid-template-columns:1fr 1fr;gap:32px 20px;}
}

/* Дуже вузькі телефони (≤380px) - прибираємо зайву щільність у 2-колонкових зонах */
/* Телефон: одна колонка на всю ширину. Ширший проміжок, щоб між обʼєктами
   лишалось повітря. */
@media (max-width:600px){
  .grid4{grid-template-columns:1fr;gap:32px;}
}

@media (max-width:380px){
  .sitemap,.dark__cols{grid-template-columns:1fr;}
}


/* Відповідь на заявку, надіслану без JavaScript (partials/lead-status).
   Зі скриптом не показується взагалі: відповідь малює сам JS. */
.lead-note {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size:var(--fs-md);
    line-height: 1.4;
}
.lead-note--ok  { background: var(--ok-bg); color: var(--ok-fg); border: 1px solid var(--ok-bd); }
.lead-note--err { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid var(--danger-bd); }


/* ---------- мережі агентства в підвалі ----------
   Рядок зʼявляється лише якщо адреси заведені в налаштуваннях: порожньо -
   немає ні рядка, ні кнопок. */
/* Знизу теж потрібен відступ: під рядком соцмереж іде золота лінія, і без
   цього вона проходить рівно по нижньому краю плиток - виглядає як
   підкреслення, а не як межа блоку. */
.dark__soc{ display:flex; align-items:center; gap:10px; margin-top:20px; margin-bottom:4px; flex-wrap:wrap; }
.dark__soc-a{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  /* Золота волосина замість білої заливки: у брендбуку золото - це тонка
     лінія й значок, а не плашка. Заливка робила з підвалу сітку сірих
     квадратів. */
  border-radius:2px; color:#fff; background:transparent;
  border:1px solid var(--gold-edge); transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.dark__soc-a:hover{ background:transparent; border-color:var(--gold); color:var(--gold); }
.dark__soc-a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.dark__soc-t{ font-size:var(--fs-sm); color:var(--white-73); }
@media (max-width:620px){ .dark__soc{ margin-top:20px; } }


/* ---------- фірмові кольори (020 §12) ----------
   Один прохід по компонентах: акцент навмисно дрібний - помітно, що бренд
   navy+gold, але золота на екрані менше, ніж білого простору навколо. */

/* 1. Активний пункт шапки - navy текст і золоте підкреслення 2px. */
.nav__link.is-active,
.nav a[aria-current="page"]{ color:var(--navy); box-shadow:inset 0 -2px 0 var(--gold); }
.nav__link:hover{ box-shadow:inset 0 -2px 0 var(--gold); }

/* 6. Підвал: тонка золота лінія над копірайтом - єдине золото в підвалі. */
.dark__bottom{ border-top:1px solid var(--gold-line); }
.dark a:hover{ color:var(--gold); }

/* "Написати в Telegram" у підвалі (318). Той самий рядок, що телефон, -
   не кнопка: у підвалі кнопка кричала б голосніше за все інше на
   сторінці. Іконка перед текстом, вирівняна по базовій лінії. */
.dark__tg{ display:inline-flex; align-items:center; gap:7px; }
.dark__tg svg{ flex:none; opacity:.72; }
.dark__tg:hover svg{ opacity:1; }

/* 7. Хлібні крихти: поточний рівень navy, решта приглушена. */
.cat-crumbs [aria-current="page"],
.cat-crumbs__cur{ color:var(--navy); font-weight:var(--fw-semibold); }

/* 8. Фокус - navy, а не золото: рамку має бути видно, а золото на білому
   майже не видно. Це доступність, не декор. */
:where(a, button, input, select, textarea, summary):focus-visible{
  outline:2px solid var(--navy); outline-offset:2px;
}


/* Плаваюча шапка стоїть поверх сторінки, тож перехід за якорем ставив
   заголовок рівно під нею. Відступ прокрутки прибирає це скрізь одразу:
   80px - висота шапки з її верхнім відступом. */
:where(h1, h2, h3, section, [id]){ scroll-margin-top: 96px; }

/* ---------- "Шукають також": тег-сторінки поруч ----------
   Рядок посилань, а не картки: це навігація, і виглядати вона має як
   навігація. Дванадцять штук у два-три рядки й нічого більше. */
.also{ margin-top:var(--sec-gap); }

/* Популярні запити стоять НАД списком, тож відступ там менший: це рядок
   переходів, а не окремий розділ (663). */
.also__title{ font-size:var(--fs-h4); letter-spacing:var(--ls-h4); margin:0 0 16px; }
.also__list{ display:flex; flex-wrap:wrap; gap:8px; }
.also__link{
  display:inline-flex; align-items:center; height:40px; padding:0 16px;
  border:1px solid var(--ink-08); border-radius:var(--r-ctrl);
  font-size:var(--fs-base); color:var(--dark); text-decoration:none;
}
.also__link:hover{ border-color:var(--gold); }

/* ---------------------------------------------------------------
   ВКЛАДКИ ТОВАРНИХ СЕКЦІЙ (головна: "Нові пропозиції", "Новобудови")

   Той самий словник, що й у решти вкладок сайту: без капсу, активна -
   navy з підкресленням. Підкреслення золоте: це єдиний акцент на блок,
   і саме воно каже, де ти зараз.
   --------------------------------------------------------------- */
/* Ряд карток у секції з вкладками - завжди ЧОТИРИ плитки в один ряд, як і
   було в стрічках до вкладок. На вузькому екрані ряд не ламається на два, а
   гортається вбік: два ряди по дві плитки - це вже не "ряд пропозицій", а
   півсторінки карток, заради чого все й переробляли.

   Тому тут свій розкид колонок, а не спільний .grid4: у каталозі дві
   колонки на вузькому екрані правильні, бо там список, а не ряд. */
/* Відступ під липку шапку.

   Шапка сайту плаває над сторінкою, її низ - на 80-му пікселі. Коли людина
   зупиняла прокрутку рівно на секції, заголовок опинявся на нульовій
   позначці, тобто просто під шапкою: "Новобудови Одеси" не було видно.

   scroll-margin - для переходів за якорем, padding - для звичайної
   прокрутки: разом заголовок завжди лишається нижче шапки. */
.tabsec{ scroll-margin-top:96px; }
.tabsec .h-sec{ scroll-margin-top:96px; }

@media (max-width:700px){
  .tabsec{ scroll-margin-top:76px; }
}

/* Прихована панель має бути прихованою. `hidden` вимикає показ правилом
   браузера, а воно слабше за наш клас: .grid4 з display:grid перебивав його,
   і на екрані стояли ВСІ набори одразу - вісім плиток у два ряди замість
   чотирьох в один. Видно це тільки очима: у розмітці атрибут стоїть, і
   будь-яка перевірка "чи прихована панель" відповідала "так". */
.row4[hidden]{ display:none; }

/* .row4 - "рівно один ряд із чотирьох плиток". Один клас на всі товарні
   блоки головної: обидві секції з вкладками і ряд ексклюзивів. На вузькому
   екрані ряд не розсипається в стовпчик на чотири екрани, а гортається
   вбік - як вкладки над ним.

   Ексклюзиви цього спершу не мали: вони лежать поза .tabsec, і правило
   їх не діставало. Ряд ставав стовпчиком у 1607 пікселів. */
.row4{
  grid-template-columns:repeat(4, minmax(210px, 1fr));
  overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity;
  padding-bottom:4px;
}
.row4::-webkit-scrollbar{ display:none; }
.row4 > *{ scroll-snap-align:start; }

.tabsec__tabs{ display:flex; gap:22px; margin:0 0 22px; overflow-x:auto; scrollbar-width:none; }
.tabsec__tabs::-webkit-scrollbar{ display:none; }
.tabsec__tab{
  flex:none; padding:0 0 8px; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:var(--fs-base); line-height:1.2; color:var(--dark);
  border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
.tabsec__tab:hover{ color:var(--navy); }
.tabsec__tab.is-on{ color:var(--navy); font-weight:600; border-bottom-color:var(--gold); }
.tabsec__tab:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; }

/* ПОЛЕ ВВОДУ НА ТЕЛЕФОНІ - 16 px, І ЦЕ НЕ ПРО ТИПОГРАФІКУ (402).

   Safari на iPhone САМ збільшує сторінку, коли фокус іде в поле з кеглем
   меншим за 16 px. Після цього все ширше за екран: заголовок підбирача
   обрізаний зліва, назви впираються в край, сторінку доводиться совати
   вбік. Виглядає як зламана верстка, а насправді це зум браузера, і в
   емуляції його не видно взагалі - тільки на самому телефоні.

   У нас такі були всі поля: 13-15 px. Тому правило спільне, а не для
   одного підбирача: вилікувати його й лишити ту саму пастку в ціні й у
   пошуку за кодом означало б лікувати скріншот, а не причину. */
@media (max-width:700px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea, select{ font-size:16px; }
}

@media (max-width:700px){
  .tabsec__tabs{ gap:16px; margin-bottom:16px; padding-bottom:2px; }
  .tabsec__tab{ font-size:var(--fs-md); }

  /* Стрічка гортається вбік, і сказати про це має вона сама: правий край
     розчиняється, тобто ряд не закінчується там, де закінчився екран.
     28 px вистачає, щоб це прочиталось, і замало, щоб заважати дивитись
     на останню картку, коли догортали до кінця. */
  /* Колір у масці значення не має - працює лише прозорість, тому й
     записано через rgba: видно, що це не фарба, а альфа. */
  .row4{
    -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,1) calc(100% - 28px), rgba(0,0,0,0));
    mask-image:linear-gradient(to right, rgba(0,0,0,1) calc(100% - 28px), rgba(0,0,0,0));
  }

  /* Вкладка й "Дивитись всі" - рядки тексту 16-26 px заввишки, а пальцю
     треба 44. Смуга дотику росте пседоелементом: на розмітку це не
     впливає, рядок стоїть там само, просто промах угору чи вниз тепер
     влучає. Обидва стоять у своєму рядку, тож чужого дотику не перехоплять. */
  /* Смуга дотику лишилась тільки вкладкам: у кнопки "Дивитись усі" тепер
     своя висота 44 px, і псевдоелемент у неї зайнятий стрілкою. */
  .tabsec__tab{ position:relative; }
  .tabsec__tab::after{
    content:''; position:absolute; left:0; right:0; top:50%;
    height:44px; transform:translateY(-50%);
  }
}

/* Підпис лише для читалки. Поле з плейсхолдером виглядає підписаним, але
   плейсхолдер зникає при вводі й читалці не належить: без цього класу
   людина з екранним читачем чує "поле вводу" і все. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Крихти на вузькому екрані.

   Рядок із шести ланок не вміщається й переносився на два-три рядки,
   забираючи пів екрана перед заголовком. До 520 px середина ховається за
   "...": видно перший крок, передостанній і поточний. Тап розгортає повний
   список - ланки нікуди не зникають, вони просто не займають місця, поки
   їх не спитали. */
.cat-crumbs .crumb-more{
  display:none; padding:0 4px; border:0; background:none; cursor:pointer;
  font:inherit; color:var(--ink-40); line-height:1;
}

@media (max-width:520px){
  .cat-crumbs{ flex-wrap:nowrap; overflow:hidden; }
  .cat-crumbs .crumb-more{ display:inline-block; }
  .cat-crumbs .crumb-more[hidden]{ display:none; }

  /* Сховане - середина. Перший крок і два останні лишаються завжди. */
  .cat-crumbs.is-short > :not(.crumb-home):not(.crumb-more):not(.cur):not(.sep:last-of-type){ display:none; }
  .cat-crumbs.is-short > a:not(.crumb-home){ display:none; }
  .cat-crumbs.is-short > .cur{ display:inline; }
}

/* =====================================================================
   СМУГА НАД ПІДВАЛОМ (partials/footer-tools.blade.php)

   Підвал із самих посилань - це кінець сторінки, куди людина доїжджає,
   нічого не знайшовши. Тут три дії в один ряд: ввести код, який
   продиктували в слухавці; підписатись на нові обʼєкти; побачити, чи ми
   на звʼязку зараз.

   Ряд світлий, підвал темний - смуга читається як частина сторінки, а не
   як початок футера.
   ===================================================================== */
.ftools{ background:var(--soft); border-top:1px solid var(--line); }

.ftools__in{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding-top:20px; padding-bottom:20px;
}

.ftools__code{ position:relative; display:flex; gap:8px; flex:1 1 320px; min-width:0; }
.ftools__code input{
  flex:1 1 auto; min-width:0; height:44px; padding:0 14px;
  border:1px solid var(--line); border-radius:var(--r-field);
  background:var(--white); font:inherit; font-size:var(--fs-base); color:var(--dark);
}
.ftools__code input:focus-visible{ outline:2px solid var(--navy); outline-offset:1px; }
.ftools__code button{
  flex:none; height:44px; padding:0 20px; border:0; border-radius:var(--r-field);
  background:var(--navy); color:var(--white); font:inherit; font-size:var(--fs-base); cursor:pointer;
}
.ftools__code button:hover{ background:var(--navy-82); }

/* Не знайшли - кажемо про це під полем, а не мовчимо. */
.ftools__miss{
  position:absolute; top:100%; left:0; right:0; margin:6px 0 0;
  font-size:var(--fs-sm); color:var(--danger);
}

.ftools__tg{ display:inline-flex; align-items:center; gap:10px; color:var(--navy); }
.ftools__tg svg{ flex:none; }
.ftools__tg b{ display:block; font-size:var(--fs-base); font-weight:var(--fw-semibold); }
.ftools__tg .t-note{ display:block; font-size:var(--fs-sm); color:var(--ink-70); }
.ftools__tg:hover b{ text-decoration:underline; text-underline-offset:3px; }

.ftools__live{ margin:0; margin-left:auto; display:flex; align-items:center; gap:14px; font-size:var(--fs-sm); }
.ftools__num{ font-weight:var(--fw-semibold); color:var(--navy); }
.ftools__hours{ color:var(--ink-70); }

/* Крапка стану - CSS, а не символ у тексті: колір каже те саме швидше. */
.ftools__state{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-70); }
.ftools__state::before{
  content:''; width:8px; height:8px; border-radius:50%; background:var(--ink-28);
}
.ftools__state.is-open{ color:var(--navy); }
.ftools__state.is-open::before{ background:var(--ok); }

@media (max-width:900px){
  .ftools__in{ gap:14px; padding-top:16px; padding-bottom:16px; }
  .ftools__live{ margin-left:0; width:100%; flex-wrap:wrap; gap:8px 14px; }
}

/* Пропустити навігацію: посилання видно лише під фокусом.

   Людина з клавіатури проходила всю шапку - логотип, пʼять розділів,
   телефон, обране, мову й валюту, - перш ніж дійти до сторінки. Для
   решти нічого не змінюється: поза фокусом посилання не займає місця. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--navy);
  color: #fff;
  border-radius: 0 0 8px 0;
  font-size: 14px;
  text-decoration: none;
}

.skip-link:focus-visible,
.skip-link:focus {
  left: 0;
}

/* ---------------------------------------------------------------
   ЗАКРІПЛЕНА СМУГА КАТАЛОГУ НА ТЕЛЕФОНІ (666 п.0).

   Виглядає так само, як смуга на картці обʼєкта й на сторінці ЖК, але
   описана тут окремо й самодостатньо: каталог не підключає ні
   property.css, ні zhk.css, а тягнути їх заради двох кнопок означало б
   привезти на кожен каталог сотні правил чужої сторінки.

   Кольори, висоти й заокруглення, це ті самі змінні, тож вигляд один.
   --------------------------------------------------------------- */
.cbar{ display:none; }

@media (max-width:900px){
  .cbar{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:flex; align-items:center; gap:8px;
    min-height:56px; padding:6px 14px env(safe-area-inset-bottom);
    background:rgba(255,255,255,.88);
    -webkit-backdrop-filter:blur(12px) saturate(1.2);
    backdrop-filter:blur(12px) saturate(1.2);
    border-top:1px solid rgba(0,29,75,.12);
    box-shadow:0 -6px 24px rgba(0,29,75,.10);
  }

  .cbar[hidden]{ display:none; }

  .cbar__r{ flex:1; display:flex; gap:8px; }

  .cbar__pick,
  .cbar__call{
    flex:1 1 0; min-width:0;
    display:inline-flex; align-items:center; justify-content:center;
    height:44px; padding:0 8px; border:0; border-radius:var(--r-ctrl);
    font-family:inherit; font-size:var(--fs-sm); font-weight:var(--fw-bold);
    text-decoration:none; cursor:pointer; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
  }

  .cbar__pick{ background:var(--navy); color:var(--white); }
  .cbar__call{ background:transparent; color:var(--navy); border:1px solid var(--navy); }

  /* Сторінка не має закінчуватись під смугою. */
  body:has(.cbar) .dark{ padding-bottom:72px; }
}

.card{display:flex;flex-direction:column;cursor:pointer;transition:opacity .3s ease,transform .3s ease;color:inherit}.card.is-removing{opacity:0;transform:scale(.95)}.card__media{position:relative;aspect-ratio:16/11;background:var(--placeholder) var(--placeholder-img) center/cover no-repeat;border-radius:var(--r-card);overflow:hidden;transition:opacity .18s}.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;color:transparent;font-size:0}.card:hover .card__media{opacity:.9}.card__badge{position:absolute;top:10px;left:10px;z-index:2;max-width:calc(100% - 20px);display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--r-card);background:var(--glass-dark);color:var(--white);font-size:var(--fs-xs);line-height:1;letter-spacing:.02em;font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card__year{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--r-card);background:var(--glass);color:var(--navy);font-size:var(--fs-xs);line-height:1;font-weight:var(--fw-bold)}.card__dev{position:absolute;left:10px;bottom:10px;z-index:2;max-width:calc(100% - 20px);min-height:26px;padding:4px 8px;box-sizing:border-box;border-radius:var(--r-ctrl);background:var(--glass);display:flex;flex-direction:row;align-items:center;gap:6px}.card__dev img{position:static;inset:auto;width:auto;max-width:72px;height:16px;flex:none;display:block;border-radius:0;object-fit:contain;background:transparent}.card__dev b{display:block;min-width:0;font-size:var(--fs-xs);line-height:var(--lh-tight,1.15);letter-spacing:var(--ls-sm);font-weight:var(--fw-semibold);color:var(--navy);white-space:normal;overflow-wrap:anywhere}.card__year,.card__badge,.card__gov,.card__dev,.card__media .card__heart{-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);border:1px solid var(--glass-line);box-shadow:var(--glass-shade)}.card__badge,.card__gov{border-color:var(--glass-edge)}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.card__year,.card__badge,.card__gov,.card__dev,.card__media .card__heart{background:var(--glass-dark);border-color:var(--glass-edge);color:var(--white)}.card__dev b,.card__heart img,.card__heart .card__heart-ic{color:var(--white)}}.card--dev{box-sizing:border-box;padding:18px 14px 14px;background:var(--white);border:1px solid var(--line);border-radius:12px}.card--dev{--logo:82px}.card--dev .card__media{aspect-ratio:1;width:var(--logo);margin:0 auto;box-sizing:border-box;background:var(--white);border:1px solid var(--line);border-radius:50%}.card--dev .card__media img{box-sizing:border-box;object-fit:contain;padding:14%}.card--dev .card__media img.card__logo--fit{object-fit:contain;padding:12%}.card--dev .card__media img.card__logo--stub{inset:32% auto auto 32%;width:36%;height:36%;opacity:.3;padding:0}.card--dev .card__media:has(img.card__logo--stub){background:var(--soft)}.card--dev:hover .card__media{opacity:1}.card--dev .card__body{padding-top:13px;text-align:center}.card--dev .card__title{justify-content:center;white-space:normal;font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--navy)}.card--dev .card__title>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card--dev .card__drows{flex:none;margin-top:7px;gap:6px}.card--dev .card__drow{justify-content:center}.card__devstats{margin-top:auto;padding-top:11px;display:flex;align-items:stretch}.card__devstat{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 9px}.card__devstat+.card__devstat{border-left:1px solid var(--line)}.card__devstat-lbl{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);line-height:1.2;color:var(--secondary);white-space:nowrap}.card__devstat-ic{flex:none;display:block;width:13px;height:13px}.card__devstat-val{font-size:var(--fs-base);line-height:1.1;font-weight:var(--fw-bold);color:var(--navy)}.card__devstats--one .card__devstat{flex-direction:row;justify-content:center}.card__devstats--one .card__devstat-lbl{gap:6px;font-size:var(--fs-sm);color:var(--secondary)}.card__devstats--one b{font-weight:var(--fw-semibold);color:var(--navy)}.card__body{flex:1;display:flex;flex-direction:column;padding-top:15px}.card__top{display:flex;align-items:center;justify-content:space-between;gap:10px}.card__price{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.01em;font-weight:var(--fw-bold);color:var(--dark);white-space:nowrap}.card__from{display:flex;align-items:baseline;gap:6px}.card__from-lbl{font-size:var(--fs-sm);color:var(--secondary);margin-right:4px}.card__priceline .card__pricem:before{content:"· ";color:var(--secondary)}.card__priceline{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1}.card__pricem{font-size:var(--fs-sm);line-height:1.2;color:var(--addr);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card__heart{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border:none;background:none;cursor:pointer;color:var(--navy);padding:0;margin:-4px -6px -4px 0;transition:transform .15s}.card__media .card__heart{width:30px;height:30px;border-radius:50%;background:var(--glass)}.card__media .card__heart:hover{background:#ffffffd9}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.card__media .card__heart{background:#ffffffe6}}.card__heart:hover{transform:scale(1.1)}.card__heart:focus{outline:none}.card__heart:focus-visible{outline:2px solid var(--navy);outline-offset:2px}.card__heart img,.card__heart .card__heart-ic{display:block;width:28px;height:28px;color:var(--navy)}.card__title{margin-top:9px;font-size:var(--fs-base);line-height:1.3;font-weight:var(--fw-semibold);color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card__title--zhk{display:flex;align-items:center;gap:6px}.card__title--zhk .card__zhk-ic{flex:none;display:block;width:16px;height:16px;color:var(--gold)}.card__title--zhk>span{overflow:hidden;text-overflow:ellipsis}.card__addr{margin-top:6px;font-size:var(--fs-sm);line-height:1.45;color:var(--addr);height:38px;display:flex;gap:5px;overflow:hidden}.card__addr-ic{flex:0 0 auto;width:14px;height:14px;margin-top:2px;color:var(--gold);opacity:.85}.card__addr>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card__stats{margin-top:auto;padding-top:13px;display:flex;gap:12px;white-space:nowrap}.card__stat{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--dark)}.card__stat svg,.card__stat img{flex:none}.card__ic{flex:none;display:block;color:var(--gold)}.card__ic-img{flex:none;display:block;width:18px;height:18px;color:var(--gold)}.card__code{margin-top:8px;font-size:var(--fs-xs);line-height:1;color:var(--addr)}.card__code b{font-weight:var(--fw-bold);color:var(--dark)}.card__nbfoot{margin-top:auto;padding-top:13px;display:flex;align-items:center;justify-content:space-between;gap:10px}.card__pay{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--gold-deep);white-space:nowrap}.card__drows{margin-top:13px;flex:1;display:flex;flex-direction:column;gap:9px}.card__drow{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);line-height:1.3;color:var(--secondary)}.card__drow b,.card__dval{font-weight:var(--fw-semibold);color:var(--navy)}.card__dic{flex:none;color:var(--gold)}.card__drow--foot{margin-top:auto;justify-content:space-between}.card__drow-main{display:inline-flex;align-items:center;gap:10px}.card--strip{flex:0 0 280px;scroll-snap-align:start}@media(max-width:900px){.card__nbfoot,.card__stats{padding-top:0}}.card__price{color:var(--navy)}.card__badge{letter-spacing:.04em}.card--commission .card__badge,.card__badge--commission{background:var(--navy);color:var(--gold);border-radius:0}.card__badges{position:absolute;top:10px;left:10px;z-index:2;max-width:calc(100% - 20px);display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px}.card__badges .card__badge,.card__badges .card__year{position:static;top:auto;left:auto;max-width:100%}.card__gov{display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--r-card);background:var(--glass-dark);color:var(--gold);font-size:var(--fs-xs);line-height:1;letter-spacing:.02em;font-weight:var(--fw-semibold);white-space:nowrap;cursor:pointer}.card__gov:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.card__govpop{position:absolute;top:44px;left:10px;right:10px;z-index:4;padding:8px 10px;border-radius:var(--r-card);background:var(--navy);color:var(--white);font-size:var(--fs-xs);line-height:1.35;font-weight:var(--fw-regular);white-space:normal;box-shadow:0 8px 24px #001d4b47}.card--dev .card__media:not(:has(img)){background:var(--soft)}.card__nbfoot{display:flex;align-items:center;justify-content:space-between;gap:10px}.card__objs{flex:none;font-size:var(--fs-xs);color:var(--secondary);white-space:nowrap}.card__year--done{background:var(--white);color:var(--navy)}.card__devstats{flex-wrap:wrap;row-gap:10px}.card__devstat{flex:1 1 40%}.card__devstat:nth-child(3){border-left:0}@supports not (aspect-ratio: 16 / 11){.card__media{padding-top:68.75%}.card--dev .card__media{padding-top:100%}}

.pp-agent{background:var(--soft);padding:24px;border-radius:var(--r-card)}.pp-agent__top{display:flex;align-items:center;gap:18px}.pp-agent__ava{width:96px;height:96px;flex:none;border-radius:var(--r-card);overflow:hidden;background:var(--placeholder);display:flex;align-items:center;justify-content:center}.pp-agent__ava img{width:100%;height:100%;object-fit:cover}.pp-agent__ava--ph{background:#1414140f}.pp-agent__ava--ph img{width:34px;height:auto;opacity:.22}.pp-agent__name{font-size:var(--fs-lg);letter-spacing:var(--ls-lg);font-weight:var(--fw-bold);color:var(--dark)}.pp-agent__office{font-size:var(--fs-sm);letter-spacing:var(--ls-sm);color:var(--muted);margin-top:5px}.pp-call{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;background:var(--navy);color:var(--white);font-size:var(--fs-base);letter-spacing:var(--ls-base);font-weight:var(--fw-medium);padding:14px;border-radius:var(--r-ctrl)}.pp-form{background:var(--soft);padding:24px;border-radius:var(--r-card)}.pp-form__title{font-size:var(--fs-lg);letter-spacing:var(--ls-lg);font-weight:var(--fw-bold);color:var(--dark)}.pp-form__sub{margin-top:5px;font-size:var(--fs-sm);letter-spacing:var(--ls-sm);color:var(--muted)}.pp-form__note{margin-top:10px;padding:7px 10px;border-radius:var(--r-card);background:var(--soft);font-size:var(--fs-sm);letter-spacing:var(--ls-sm);color:var(--dark)}.pp-form__fields{display:flex;flex-direction:column;gap:10px;margin-top:16px}.pp-input{width:100%;height:48px;border:1px solid var(--border-field);padding:0 14px;font-family:var(--font-base);font-size:var(--fs-base);letter-spacing:var(--ls-base);color:var(--dark);background:var(--white);border-radius:var(--r-field)}.pp-input::placeholder{color:var(--muted)}.pp-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}textarea.pp-input{height:auto;min-height:96px;padding:12px 14px;resize:vertical;font-family:var(--font-base)}.pp-form__fields .consent{margin:4px 0}.pp-submit{display:flex;align-items:center;justify-content:center;height:48px;background:var(--navy);color:var(--white);border:none;font-family:var(--font-base);font-size:var(--fs-base);letter-spacing:var(--ls-base);font-weight:var(--fw-medium);padding:0 14px;cursor:pointer;border-radius:var(--r-ctrl)}.pp-submit:disabled{opacity:.6;cursor:default}.pp-contacts{margin-top:18px}.pp-contacts__lbl{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:var(--fs-sm);letter-spacing:var(--ls-sm)}.pp-contacts__lbl:before,.pp-contacts__lbl:after{content:"";flex:1;height:1px;background:var(--line)}.pp-contacts__row{display:flex;gap:10px;margin-top:14px}.pp-contact{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:var(--r-ctrl);border:1px solid var(--ink-18);background:var(--white);color:var(--navy);font-size:var(--fs-base);letter-spacing:var(--ls-base);font-weight:var(--fw-medium);transition:background .15s,color .15s,border-color .15s}.pp-contact:hover{background:var(--navy);border-color:var(--navy);color:var(--white)}.pp-contact svg{flex:none}.pp-form__datelabel{display:block;margin:4px 0 -4px;font-size:12px;color:var(--muted)}.pp-form--band{max-width:760px;margin:28px auto 0}@media(min-width:821px){.pp-form--band .pp-form__fields{flex-direction:row;flex-wrap:wrap;align-items:center}.pp-form--band .pp-form__fields .pp-input{flex:1 1 220px;width:auto}.pp-form--band .pp-form__fields .pp-submit{flex:0 0 auto;padding:0 24px}.pp-form--band .pp-form__fields .consent{flex:1 1 100%;order:2;margin:0}.pp-form--band .pp-form__fields .pp-submit{order:1}}

.ff-block{--ff-navy:var(--navy);--ff-ink:var(--dark);--ff-muted:rgba(20,20,20,.66);--ff-faint:rgba(20,20,20,.4);--ff-field:#fff;--ff-fieldline:rgba(20,20,20,.15);--ff-line:rgba(20,20,20,.06);--ff-border:rgba(20,20,20,.15);--ff-chip:rgba(20,20,20,.09);--ff-sep:rgba(20,20,20,.24);--ff-r:var(--r-field);--ff-pill:999px;--ff-h:48px;--ff-fborder:1px solid var(--ff-fieldline);color:var(--ff-navy);font-family:var(--font-base);padding:8px 0 4px}.ff-block *{box-sizing:border-box}.ff-block__inner{width:var(--content);margin:0 auto}.ff-h1{margin:0 0 24px;font-family:var(--font-brand);font-size:var(--fs-display);font-weight:var(--fw-bold);letter-spacing:-.015em;text-align:center}@media(max-width:900px){.ff-block{padding:4px 0}.ff-block__inner{width:100%;padding:0 16px}.ff-h1{line-height:1.15;margin-bottom:18px;text-align:left}}.cat-market{display:flex;gap:8px;flex-wrap:wrap}.cat-market__btn{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid var(--ink-12);border-radius:var(--r-ctrl);background:var(--white);color:var(--dark);font-size:var(--fs-md);text-decoration:none;white-space:nowrap}.cat-market__btn:hover{border-color:var(--navy)}.cat-market__btn.is-on{background:var(--navy);border-color:var(--navy);color:#fff}@media(max-width:640px){.cat-market{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}.cat-market::-webkit-scrollbar{display:none}}.cat-view{display:inline-flex;gap:0}.cat-view__btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;font-size:var(--fs-md);font-weight:600;color:var(--navy);background:transparent;border:1px solid var(--ink-12);border-radius:0;text-decoration:none;transition:background .16s ease,border-color .16s ease}.cat-view__btn+.cat-view__btn{border-left:0}.cat-view__btn:hover{background:var(--ink-05)}.cat-view__btn.is-on{background:var(--navy);border-color:var(--navy);color:var(--white)}.cat-view__btn svg{flex:none}.cat-savesearch{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;font-size:var(--fs-md);font-weight:600;color:var(--navy);background:transparent;cursor:pointer;border:1px solid var(--ink-12);border-radius:0;transition:background .16s ease,border-color .16s ease}.cat-savesearch:hover{background:var(--ink-05)}.cat-savesearch:focus-visible{outline:2px solid var(--navy);outline-offset:2px}.cat-savesearch[disabled]{cursor:default}.cat-savesearch.is-done{color:var(--white);background:var(--navy);border-color:var(--navy)}.cat-savesearch svg{flex:none}.cat-empty--rent{max-width:560px;margin:40px auto 56px;text-align:center}.cat-empty--rent .t18{font-size:var(--fs-h3);font-weight:700;margin-bottom:8px}.cat-empty--rent .t15{color:var(--muted);margin-bottom:24px}.cat-empty--rent .pp-form{text-align:left}.cat-empty__back{margin-top:20px}@media(min-width:821px){.cat-resultrow{gap:10px;flex-wrap:nowrap}.cat-resultrow .cat-count{flex:0 1 auto;min-width:0;white-space:nowrap}.cat-market{gap:6px;flex:0 0 auto}.cat-market__btn{padding:0 12px}.cat-resultrow .sort-btn{height:40px;padding:0 14px;gap:7px;font-size:var(--fs-md)}.cat-resultrow .sort-wrap{flex:0 0 auto}.cat-resultrow .ssm-chip{padding:0 12px;gap:6px;flex:0 0 auto}.cat-view__btn{padding:0 12px}}@media(min-width:821px)and (max-width:1360px){.cat-resultrow .ssm-chip [data-save-label]{font-size:0}.cat-resultrow .ssm-chip [data-save-label]:after{content:attr(data-short);font-size:var(--fs-md)}}

.fk-field{height:44px;background:var(--field);border:1px solid var(--border-field);border-radius:var(--r-field);transition:border-color .15s,box-shadow .15s}.fk-field:focus-within,.fk-field.is-open{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-08)}.fk-in{border:none;background:transparent;font-family:var(--font-base);font-size:var(--fs-base);letter-spacing:var(--ls-base);color:var(--dark);outline:none}.fk-in::placeholder{color:var(--muted)}.fk-ic-cd{color:var(--muted);flex:none}.fk-loc{position:relative;flex:2.4 1 360px;min-width:0}.fk-loc__field{display:flex;align-items:center;gap:8px;padding:0 14px;cursor:text;overflow:hidden}.fk-ic-pin{color:var(--muted);flex:none}.fk-loc__in{flex:1;min-width:90px}.fk-chips{display:inline-flex;align-items:center;gap:6px;flex:none}.fk-chip{display:inline-flex;align-items:center;background:var(--navy);overflow:hidden;white-space:nowrap;flex:none}.fk-chip__kind{font-size:9px;font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--white-60);background:var(--white-06);padding:6px 8px}.fk-chip__label{color:var(--white);font-weight:var(--fw-semibold);font-size:var(--fs-sm);padding:0 6px 0 8px}.fk-chip__x{border:none;background:var(--white-22);color:var(--white);cursor:pointer;margin-left:3px;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:none}.fk-chip__x:hover{background:var(--white-55)}.fk-chip-more{display:inline-flex;align-items:center;background:var(--chip-bg);color:var(--dark);font-size:var(--fs-sm);font-weight:var(--fw-bold);padding:7px 10px;white-space:nowrap;cursor:pointer;flex:none}.fk-pop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:50;background:var(--white);border:1px solid var(--line);border-radius:var(--r-field);box-shadow:0 16px 40px var(--ink-14);padding:10px}.fk-pop[hidden],.fk-loc__mhead,.fk-loc__mfoot{display:none}.fk-tabs{display:flex;gap:8px;margin-bottom:10px}.fk-tab{flex:1;height:36px;border:1px solid var(--border-field);border-radius:var(--r-field);background:var(--white);color:var(--dark);font-family:var(--font-base);font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer}.fk-tab.is-on{background:var(--navy);color:var(--white);border-color:var(--navy)}.fk-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.fk-cats[hidden]{display:none}.fk-cat{cursor:pointer;font-family:var(--font-base);font-size:var(--fs-sm);font-weight:var(--fw-semibold);border:none;padding:8px 15px;border-radius:var(--r-pill);background:var(--pick-cat);color:var(--muted);transition:background .15s,color .15s}.fk-cat.is-on{background:var(--navy);color:var(--white)}.fk-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:10px}.fk-crumbs[hidden]{display:none}.fk-crumb{font-size:var(--fs-sm);color:var(--muted);text-decoration:none;font-weight:var(--fw-semibold);cursor:pointer}.fk-crumb-sep{color:var(--ink-28);font-size:var(--fs-sm)}.fk-list{max-height:340px;overflow:auto;margin:0 -4px}.fk-loc-head{padding:12px 10px 5px;font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.fk-locrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-field);cursor:pointer}.fk-locrow:hover{background:var(--soft)}.fk-box{width:18px;height:18px;border-radius:var(--r-field);flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--white);border:1.5px solid var(--ink-28)}.fk-box.is-checked{background:var(--navy);border-color:var(--navy)}.fk-box svg{color:var(--white)}.fk-box img{display:block}.fk-locrow__label{flex:1;font-size:var(--fs-md);color:var(--dark);font-weight:var(--fw-semibold)}.fk-locrow__label .hl{background:var(--hl-bg);color:var(--hl-fg);border-radius:var(--r-field);padding:0 1px}.fk-locrow__label .sub{color:var(--muted);font-weight:var(--fw-regular)}.fk-locrow__count{font-size:var(--fs-sm);color:var(--muted)}.fk-locrow__drill{color:var(--muted);flex:none;display:block}.fk-locrow__drillbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-13px -10px -13px 0;padding:0;border:0;background:none;cursor:pointer}.fk-locrow__drillbtn:hover .fk-locrow__drill{color:var(--navy)}.fk-locrow__drillbtn:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}@media(max-width:900px){.fk-field{height:52px}body.loc-lock{overflow:hidden}.fk-loc__pop{position:fixed;inset:0;z-index:130;border:none;border-radius:0;box-shadow:none;padding:0;display:flex;flex-direction:column}.fk-loc__mhead{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid var(--line);flex:none}.fk-loc__mfoot{display:block}.fk-loc__mtitle{font-size:var(--fs-lg);font-weight:var(--fw-medium);color:var(--dark)}.fk-loc__mclose{border:none;background:transparent;font-size:32px;line-height:1;color:var(--dark);cursor:pointer;width:40px;height:40px;display:grid;place-items:center;margin-right:-6px}.fk-loc__pop .fk-tabs{margin:14px 16px 10px}.fk-loc__pop .fk-cats,.fk-loc__pop .fk-crumbs{margin:0 16px 10px}.fk-loc__pop .fk-list{flex:1;max-height:none;overflow:auto;margin:0;padding:0 12px 8px}.fk-loc__pop .fk-locrow{padding:12px 10px}.fk-loc__pop{max-width:100%;overflow-x:hidden}.fk-loc__pop .fk-locrow__label{min-width:0;overflow-wrap:anywhere}.fk-loc__pop .fk-locrow__count{flex:none;white-space:nowrap}.fk-loc__mfoot{flex:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--white)}.fk-loc__done{width:100%;height:52px}}

.ff-slot:empty{min-height:202px}.ff-slot[data-slot=rooms]:empty,.ff-slot[data-slot=lands]:empty,.ff-slot[data-slot=commerces]:empty{min-height:166px}@media(max-width:900px){.ff-slot:empty{min-height:472px}.ff-slot[data-slot=rooms]:empty,.ff-slot[data-slot=houses]:empty{min-height:414px}.ff-slot[data-slot=lands]:empty,.ff-slot[data-slot=commerces]:empty{min-height:385px}}.ff-mainrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ff-seg{position:relative;min-width:0;height:var(--ff-h);background:var(--ff-field);border:var(--ff-fborder);border-radius:var(--ff-r)}.ff-seg--deal{flex:0 0 116px}.ff-seg--cat{flex:1 1 120px}.ff-seg select{appearance:none;-webkit-appearance:none;width:100%;height:100%;border:none;background:transparent;font-family:var(--font-base);font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--ff-navy);padding:0 30px 0 16px;cursor:pointer}.ff-seg .ff-chev{position:absolute;right:11px;top:50%;transform:translateY(-50%);pointer-events:none}.ff-mainrow .fk-loc{flex:2 1 150px;min-width:0}.ff-mainrow .fk-field{height:var(--ff-h);background:var(--ff-field);border:var(--ff-fborder);border-radius:var(--ff-r)}.ff-mainrow .fk-field:focus-within,.ff-mainrow .fk-field.is-open{border-color:var(--ff-fieldline);box-shadow:none}.ff-mainrow .fk-in{font-size:var(--fs-md);color:var(--ff-navy)}.ff-mainrow .fk-in::placeholder{color:var(--ff-faint)}.ff-mainrow .fk-loc__in{min-width:50px}.ff-price{flex:1 1 180px;min-width:0;display:flex;align-items:center;height:var(--ff-h);background:var(--ff-field);border:var(--ff-fborder);border-radius:var(--ff-r)}.ff-price .ff-seg--cur{flex:0 0 72px;height:100%;border:none;background:transparent}.ff-price .ff-seg--cur select{padding:0 24px 0 14px}.ff-price .ff-seg--cur .ff-chev{right:8px}.ff-price-div{width:1px;height:24px;background:var(--ff-fieldline);flex:none}.ff-price .ff-in{width:0;flex:1;min-width:0;padding:0 10px;font-size:var(--fs-sm);color:var(--ff-navy)}.ff-in{flex:1;min-width:0;border:none;background:transparent;font-family:var(--font-base);font-size:var(--fs-md);color:var(--ff-navy)}.ff-in::placeholder{color:var(--ff-faint)}.ff-in:focus{outline:none}.ff-dash{color:#14141499}.ff-more{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;height:var(--ff-h);padding:0 14px;border:1px solid var(--ff-border);border-radius:var(--ff-r);background:#fff;color:var(--ff-navy);font-family:var(--font-base);font-size:var(--fs-md);font-weight:var(--fw-semibold);cursor:pointer;transition:border-color .15s,background .15s}.ff-more:hover{border-color:#14141440;background:#14141405}.ff-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--ff-navy);color:#fff;font-size:var(--fs-xs);font-weight:var(--fw-bold)}.ff-search{flex:0 0 auto;height:var(--ff-h);padding:0 24px;border:none;border-radius:var(--ff-r);background:var(--ff-navy);color:#fff;font-family:var(--font-base);font-size:var(--fs-md);font-weight:var(--fw-bold);cursor:pointer;transition:background .15s}.ff-search:hover{background:var(--navy)}.ff-search.is-dirty{box-shadow:0 0 0 3px var(--gold)}.ff-search.is-dirty:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.ff-reset{margin-left:auto;border:none;background:none;color:var(--ff-navy);font-family:var(--font-base);font-size:var(--fs-md);font-weight:var(--fw-bold);cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;position:relative}.ff-reset:after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}.ff-reset:hover{color:var(--ff-muted)}.ff-add{max-height:0;overflow:hidden;opacity:0;transition:max-height .34s ease,opacity .25s ease,margin-top .25s ease}.ff-add.open{max-height:3000px;opacity:1;margin-top:14px;overflow:visible}.ff-add-inner{border-top:1px solid var(--ff-line);padding-top:24px;padding-bottom:4px}.ff-addgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 22px;align-items:end}.ff-add-field{min-width:0}.ff-field-span2{grid-column:span 2}.ff-field-full{grid-column:1 / -1}.ff-fieldlabel{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--ff-faint);margin-bottom:9px}.ff-chips{display:flex;flex-wrap:wrap;gap:8px}.ff-chip{cursor:pointer;display:inline-flex;align-items:center;height:40px;font-family:var(--font-base);font-size:var(--fs-sm);font-weight:var(--fw-semibold);padding:0 16px;transition:.15s;background:var(--ff-chip);color:var(--ff-muted);border:none;border-radius:999px}.ff-chip.active{background:var(--ff-navy);color:#fff}.ff-num{display:flex;align-items:center;gap:6px;height:50px;background:var(--ff-field);border:var(--ff-fborder);border-radius:var(--ff-r);padding:0 14px}.ff-ms{position:relative}.ff-add-field:has(.ff-ms.is-open){position:relative;z-index:40}.ff-ms.is-open{z-index:40}.ff-ms-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:48px;border:var(--ff-fborder);border-radius:var(--ff-r);background:var(--ff-field);font-family:var(--font-base);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ff-faint);padding:0 14px;cursor:pointer;text-align:left;transition:border-color .15s}.ff-ms-btn:hover{border-color:#14141440}.ff-ms-btn.has-val{color:var(--ff-navy)}.ff-ms-btn>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ff-ms-panel{position:absolute;left:0;right:0;top:54px;z-index:30;background:#fff;border:1px solid rgba(20,20,20,.09);border-radius:var(--ff-r);box-shadow:0 12px 30px #001d4b24;padding:6px;max-height:260px;overflow:auto}.ff-ms-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--ff-r);cursor:pointer;font-size:var(--fs-sm);color:var(--ff-navy)}.ff-ms-opt:hover{background:#1414140a}.ff-ms-box{width:16px;height:16px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ff-r);background:#fff;border:1px solid rgba(20,20,20,.24)}.ff-ms-opt.on .ff-ms-box{background:var(--ff-navy);border-color:var(--ff-navy)}.ff-selected{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}.ff-selected-label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--ff-muted)}.ff-selchip{display:inline-flex;align-items:center;gap:7px;background:var(--ff-navy);color:#fff;border-radius:999px;padding:7px 12px 7px 14px;font-size:var(--fs-sm);font-weight:var(--fw-semibold)}.ff-selchip button{display:inline-flex;align-items:center;border:none;background:none;color:#fffc;cursor:pointer;padding:0}.ff-selchip button img{filter:brightness(0) invert(1);opacity:.75;transition:opacity .15s}.ff-selchip button:hover img{opacity:1}.ff-controls{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;margin-top:16px}.ff-il{display:flex;align-items:center;flex-wrap:nowrap;gap:18px;margin-top:16px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.ff-il::-webkit-scrollbar{display:none}.ff-il a{white-space:nowrap}.ff-il-title{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--ff-navy);white-space:nowrap}.ff-il a{color:var(--ff-muted);font-size:var(--fs-md);font-weight:var(--fw-semibold);text-decoration:none;transition:color .15s}.ff-il a:hover,.ff-il a.is-on{color:var(--ff-navy)}.ff-block .fk-pop{top:56px;border:1px solid rgba(20,20,20,.09);border-radius:var(--ff-r);box-shadow:0 16px 40px #001d4b29}.ff-block .fk-tab{border-radius:var(--ff-r);border-color:var(--ff-fieldline)}.ff-block .fk-tab.is-on{background:var(--ff-navy);border-color:var(--ff-navy)}.ff-block .fk-cat{background:var(--ff-chip);color:var(--ff-muted)}.ff-block .fk-cat.is-on{background:var(--ff-navy);color:#fff}.ff-block .fk-chip{background:var(--ff-navy);border-radius:0}.ff-block .fk-chip__kind{color:#ffffffb8;background:#ffffff24}.ff-block .fk-chip-more{background:var(--ff-chip);color:var(--ff-navy)}.ff-block .fk-box{border-radius:var(--ff-r);border:1.5px solid rgba(20,20,20,.24)}.ff-block .fk-box.is-checked{background:var(--ff-navy);border-color:var(--ff-navy)}.ff-block .fk-locrow{border-radius:var(--ff-r)}.ff-block .fk-locrow:hover{background:#1414140a}.ff-block .fk-locrow__label .hl{background:var(--hl-bg);color:var(--hl-fg)}@media(max-width:900px){.ff-mainrow{gap:10px}.ff-seg--deal,.ff-seg--cat{flex:1 1 calc(50% - 5px)}.ff-mainrow .fk-loc,.ff-price{flex:1 1 100%}.ff-more{flex:1 1 calc(50% - 5px);justify-content:center}.ff-search{flex:1 1 calc(50% - 5px);justify-content:center;text-align:center;padding:0 12px}.ff-controls{margin-top:12px}.ff-addgrid{grid-template-columns:1fr;gap:18px}.ff-field-span2,.ff-field-full{grid-column:auto}.ff-block .fk-loc__pop{position:absolute;inset:56px 0 auto;width:auto;height:auto;max-height:min(70vh,420px);overflow:auto;border:1px solid rgba(20,20,20,.09);border-radius:var(--ff-r);box-shadow:0 16px 40px #001d4b29;padding:10px;display:block}.ff-block .fk-loc__mhead,.ff-block .fk-loc__mfoot{display:none}.ff-selected{margin-top:16px}.ff-il{gap:12px 14px;margin-top:14px}}.ff-seg .fks{width:100%;height:100%}.ff-seg .fks__trigger{height:100%;border:none;background:transparent;box-shadow:none;border-radius:0;gap:0;padding:0 30px 0 16px;font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--ff-navy)}.ff-seg .fks__trigger:hover,.ff-seg .fks__trigger:focus-visible,.ff-seg .fks.is-open .fks__trigger{border:none;box-shadow:none}.ff-seg .fks__caret{display:none}.ff-seg .fks__label{flex:1;min-width:0}.ff-price .ff-seg--cur .fks__trigger{padding:0 24px 0 14px}.ff-price .ff-seg--cur .fks__pop{left:0;right:auto;min-width:120px}

.nav{position:fixed;top:calc(24px * var(--nav-counter));left:50%;transform:translate(-50%) scale(var(--nav-counter));transform-origin:top center;width:min(max(890px,calc(var(--content) / var(--nav-counter))),calc(100vw - 40px));height:56px;background:#ffffffb8;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid rgba(0,29,75,.08);border-radius:var(--r-nav);display:flex;align-items:center;padding:0 18px;gap:16px;box-shadow:0 4px 20px #001d4b1a;z-index:5}.nav.is-stuck{background:#ffffffd9;-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid rgba(0,29,75,.12);box-shadow:0 6px 24px #001d4b1f}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.nav{background:#fffffff2}.nav.is-stuck{background:#fff}}.nav__logo{display:flex;align-items:center;flex:none}.nav__logo img{height:16px;width:auto;max-width:none;display:block}.nav__links{display:flex;gap:16px;margin-left:14px}.nav__links a{font-size:var(--fs-base);letter-spacing:var(--ls-base);color:var(--slate);transition:color .18s ease}.nav__links a:hover{color:var(--navy)}.nav__right{margin-left:auto;display:flex;align-items:center;gap:12px}.nav__icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--navy);transition:background .18s ease,transform .18s ease}.nav__icon:hover{background:var(--soft);transform:translateY(-1px)}.nav__icon img{transition:opacity .18s ease}.nav__icon:hover img{opacity:.85}.nav__fav{position:relative}.nav__fav-n{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;padding:0 4px;display:grid;place-items:center;border-radius:var(--r-pill);background:var(--navy);color:var(--white);font-size:10px;line-height:1;font-weight:var(--fw-bold);letter-spacing:0;pointer-events:none}.nav__fav-n[hidden]{display:none}.nav__logo img{transition:opacity .18s ease}.nav__logo a:hover img{opacity:.7}.nav__burger{display:grid;border:none;background:transparent;padding:0}.nav-drawer{display:block;position:fixed;inset:0;z-index:120}.nav-drawer[hidden]{display:none}.nav-drawer__backdrop{position:absolute;inset:0;background:#001d4b8c;opacity:0;transition:opacity .25s ease}.nav-drawer.is-open .nav-drawer__backdrop{opacity:1}.nav-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,100vw);background:var(--navy);display:flex;flex-direction:column;padding:16px 20px calc(16px + env(safe-area-inset-bottom));transform:translate(16px);opacity:0;transition:transform .28s ease,opacity .28s ease}.nav-drawer.is-open .nav-drawer__panel{transform:none;opacity:1}@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav-drawer__panel{background:#001d4bf0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}}body.fk-lock .cl{display:none}.nav-drawer__top{display:flex;align-items:center;justify-content:space-between;flex:none;padding-bottom:8px}.nav-drawer__top .nav__logo img{height:18px;filter:brightness(0) invert(1)}.nav-drawer__close{border:none;background:transparent;font-size:30px;line-height:1;color:var(--white);cursor:pointer;width:44px;height:44px;display:grid;place-items:center;margin-right:-10px;border-radius:var(--r-field)}.nav-drawer__close:hover{background:#ffffff1a}.nav-drawer__close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.nav-drawer__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:8px}.nav-drawer__cap{margin:16px 0 4px;font-size:12px;line-height:1.2;font-weight:var(--fw-regular);color:#ffffff8c}.nav-drawer__scroll>.nav-drawer__cap:first-child{margin-top:4px}.nav-drawer__links{display:flex;flex-direction:column}.nav-drawer__links a{display:flex;align-items:center;gap:8px;padding:11px 0;font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--white);border-bottom:1px solid rgba(255,255,255,.14)}.nav-drawer__links a:last-child{border-bottom:none}.nav-drawer__links a[hidden]{display:none}.nav-drawer__links a:hover{color:var(--gold)}.nav-drawer__links a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.nav-drawer__links a:active{opacity:.6}.nav-drawer__links a.is-here{color:var(--gold);box-shadow:inset 3px 0 0 var(--gold);padding-left:10px}.nav-drawer__n{position:static;margin-left:auto;background:var(--gold);color:var(--navy)}.nav-drawer__set{display:flex;flex-direction:column;gap:8px;margin-top:4px}.nav-drawer__chips{display:flex;gap:8px}.nav-chip{flex:1 1 0;min-width:0;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-field);background:transparent;color:var(--white);cursor:pointer;font-family:inherit;font-size:var(--fs-base);font-weight:var(--fw-medium);letter-spacing:var(--ls-base);transition:background .18s ease,border-color .18s ease,color .18s ease}.nav-chip:hover{border-color:var(--gold);color:var(--gold)}.nav-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.nav-chip.is-on,.nav-chip[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:var(--navy)}.nav-chip[hidden]{display:none}.nav-drawer__foot{flex:none;margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;gap:10px}.nav-drawer__foot .nav-drawer__cap{margin:0}.nav-drawer__row{display:flex;align-items:center;justify-content:space-between;gap:12px}.nav-drawer__phone{font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--white);white-space:nowrap}.nav-drawer__phone:hover{color:var(--gold)}.nav-drawer__msg{display:flex;gap:8px}.nav-drawer__msg-ic{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--gold);border:1px solid rgba(255,255,255,.22);transition:background .18s ease,border-color .18s ease}.nav-drawer__msg-ic:hover{background:#ffffff1a;border-color:var(--gold)}.nav-drawer__msg-ic:focus-visible{outline:2px solid var(--gold);outline-offset:2px}@media(max-width:900px){.nav-drawer__panel{width:100vw;height:100dvh;padding:14px 16px calc(14px + env(safe-area-inset-bottom));transform:translateY(-12px)}.nav-drawer__foot{flex-wrap:wrap}.nav{width:calc(100% - 32px);gap:12px;padding:0 16px;height:52px}.nav__links{display:none}.nav__right{gap:12px}.nav__icon{position:relative}.nav__icon:after{content:"";position:absolute;inset:-6px;border-radius:50%}}

.fk-consent{position:fixed;left:0;right:0;bottom:0;z-index:160;background:var(--navy);color:var(--white);padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 24px #001d4b2e}.fk-consent__in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between}.fk-consent__txt{margin:0;font-size:var(--fs-sm);line-height:1.5;max-width:760px}.fk-consent__txt a{color:var(--gold);text-decoration:underline}.fk-consent__acts{display:flex;gap:10px;flex:none}.fk-consent__btn{height:40px;padding:0 20px;border:1px solid var(--gold);background:var(--gold);color:var(--navy);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer}.fk-consent__btn:hover{filter:brightness(1.06)}.fk-consent__btn--ghost{background:transparent;border-color:#ffffff73;color:var(--white)}.fk-consent__btn--ghost:hover{border-color:var(--white);filter:none}.fk-consent__btn:focus-visible{outline:2px solid var(--white);outline-offset:2px}@media(max-width:700px){.fk-consent{padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px))}.fk-consent__in{flex-direction:column;align-items:stretch;gap:10px}.fk-consent__txt{font-size:var(--fs-xs);line-height:1.4}.fk-consent__acts{width:100%;gap:8px}.fk-consent__btn{flex:1;height:44px;padding:0 12px}}.dark__cookies{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none}.dark__cookies:hover{text-decoration:underline}