/* ============================================================
   FAKTOR - фірмові шрифти, свої файли
   ============================================================

   Раніше шрифти підключалися рядком <link> на fonts.googleapis.com. Файл там
   важить 1,4 КБ, а коштує близько 266 мс: чужий домен - це окремий DNS,
   окреме TLS-рукостискання й окремий запит, і все це ПЕРЕД тим, як браузер
   узагалі дізнається адреси самих woff2 на третьому домені (gstatic).
   Лістинг каталогу впирався саме в цей рядок - він був найдорожчим із того,
   що блокує показ сторінки.

   Тепер і опис, і файли лежать у нас: опис приїжджає тим самим з'єднанням,
   що й решта стилів, а woff2 - наступним кроком без нових рукостискань.

   Шрифти - ВАРІАТИВНІ (font-weight: 400 800 - це діапазон, а не два числа):
   один файл на підмножину символів замість окремого файлу на кожну жирність.
   Було п'ять накреслень Inter і три Manrope, тобто до шістнадцяти запитів на
   сторінку; стало чотири. Заразом коректно малюється font-weight:650, який у
   статичних накресленнях округлявся до 700.

   Підмножини - лише ті, якими сайт користується: кирилиця й латиниця в двох
   варіантах кожна. Грецьку й в'єтнамську, які віддає Google, не тримаємо.
   unicode-range лишається тим самим: файл качається, тільки якщо на сторінці
   є хоч один його символ.

   Оновлення: файли взяті з Google Fonts (Inter v20). Щоб оновити -
   завантажити css2 з тими самими параметрами (Inter:wght@400..800,
   скачати woff2 у css/fonts/ і замінити src.
   ============================================================ */


/* ---------- NAMU 1990: заголовки й ціни ----------

   Шрифт Дмитра Растворцева для Національного художнього музею України,
   ліцензія Creative Commons BY-ND 4.0: безкоштовно для веба й друку, з
   двома умовами.

   BY - авторство вказане в "Умовах користувача".

   ND - не змінювати. Тому файл повний, без субсетингу: вирізати з нього
   зайві символи заради кількох кілобайтів означало б зробити похідний
   твір, а це рівно те, чого ліцензія не дозволяє. Конвертація OTF у WOFF2
   похідним твором не є - це те саме, інакше запаковане.

   Один файл на всі накреслення: у шрифті одне, і font-weight на
   заголовках синтетичного жирного не просить.
   ---------------------------------------------------------------- */
@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');
}

/* cyrillic-ext */
@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;
}

/* cyrillic */
@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;
}

/* ЧОМУ З ЛАТИНСЬКОГО ДІАПАЗОНУ ВИРІЗАНА ОДНА ЛІТЕРА (406).

   U+20B4 - це "₴". Формально вона стоїть у наборі валютних знаків
   U+20AD-20C0, і Google роздає її і в latin-ext, і в cyrillic-ext. Наслідок
   був такий: на сторінці з гривневими цінами - тобто на будь-якій нашій,
   бо гривня стоїть за замовчуванням, - браузер тягнув inter-latin-ext.woff2
   заради ОДНОГО знака. Це 83 КБ, найважчий файл сторінки після фотографії.
   Заміряно: інших символів із latin-ext на головній немає жодного.

   Тепер "₴" лишається тільки в cyrillic-ext, який і так завантажується.
   Латиною сторінка нічого не втрачає: якщо десь трапиться справжній
   latin-ext (польське "ł", румунське "ș"), файл прийде як і раніше.

   Перевірено до коміту: рядок ціни "₴ 2 990 000" до і після правки дає
   ОДНАКОВИЙ знімок екрана, побайтово. Змінюється не вигляд, а те, з якого
   файлу береться той самий знак. */

/* latin-ext */
@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;
}

/* latin */
@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;
}

/* MANROPE ТУТ БІЛЬШЕ НЕМАЄ, І ОСЬ ЧОМУ.

   Він стояв другим у --font-brand, тобто запасним після NAMU-1990. Поки
   NAMU завантажується - а він завантажується, - черга до запасного не
   доходить ніколи. Заміряно на бойовому 18.09: Inter 1 471 елемент,
   NAMU-1990 18, Manrope НУЛЬ.

   Самі по собі @font-face браузер не качає, качав їх preload у шаблоні -
   примусово й з високим пріоритетом, конкуруючи за канал із фотографією
   першого екрана. Прибрано разом: і рядок preload, і оголошення, і файли
   (чотири підмножини, 57 КБ).

   Якщо NAMU колись відпаде, наступним у стеку стоїть Inter - він уже
   завантажений і на сторінці, тож запасний із нього кращий, ніж третій
   шрифт, який довелося б качати. */


/* =====================================================================
   FAKTOR - ДИЗАЙН-ТОКЕНИ (єдине джерело правди)
   Кольори та типографіка для всього сайту. Підключати ПЕРШИМ,
   до style.css. Усі значення в розмітці беруться лише звідси через var().
   Джерело шкали - Figma (див. REFERENCE.md).
   ===================================================================== */
:root{

  /* ---------------- АДАПТИВ-ЛЕЙАУТ ---------------- */
  /* Обернений коефіцієнт zoom-у .frame (1/zoom). На широких екранах zoom=1, тож
     counter=1. На вужчих - перевизначається в style.css на тих самих zoom-
     сходинках (1/.93, 1/.87, ...). Навбар контр-масштабується ним, щоб лишатись
     1:1 поверх стиснутого фрейма. Усе на CSS, без JS. */
  --nav-counter:1;

  /* ---------------- ШРИФТИ ---------------- */
  --font-brand:'NAMU-1990','Inter',system-ui,sans-serif;                  /* H1 / великі категорії (ТЗ) */
  --font-base :'Inter','SFT Schrifted Sans','Helvetica Neue',Arial,sans-serif; /* основний текст / UI */

  /* ---------------- РОЗМІРИ ТЕКСТУ (кегль) ---------------- */
  /* Одна шкала на весь сайт, без стрибків між екранами.
     clamp(мінімум, гумова частина, максимум): розмір їде плавно від
     телефона до великого монітора, і окремі значення "для мобільного" більше
     не потрібні - саме вони й давали стрибок на межі 900 пікселів.

     Верхні межі не випадкові: H2 на 56 пікселях займав два рядки і сам по
     собі важив 118 пікселів висоти ("Хочете продати нерухомість?"). */
  --fs-display:clamp(28px, 3.4vw, 44px);  /* H1 сторінки */
  --fs-h1     :clamp(24px, 2.3vw, 32px);  /* заголовок секції (H2 за змістом) */
  --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);   /* мікромітки */

  /* ---------------- ТРЕКІНГ (letter-spacing, пара до кегля) ---------------- */
  --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;

  /* ---------------- ІНТЕРЛІНЬЯЖ (line-height) ---------------- */
  --lh-none   :1;      /* однорядкові кнопки / великі цифри */
  --lh-tight  :1.05;   /* заголовки */
  --lh-snug   :1.2;    /* підзаголовки карток */
  --lh-base   :1.3;    /* основний текст */
  --lh-relaxed:1.55;   /* hero-підзаголовок */

  /* ---------------- НАСИЧЕНІСТЬ (font-weight) ---------------- */
  --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,.60);    /* вторинний текст (Dark 60%) */
  --white:#fff;
  --gold :#DEB87A;               /* фірмове золото: значки, риски, бейдж "Комісія 0%" */
  --gold-hover :#E7C68C;            /* єдиний hover золотої кнопки на весь сайт */

  /* Прозоре золото: тонкі лінії й підкладки. Було шість однакових
     rgba(222,184,122,...) у пʼятьох файлах - тобто той самий колір, який
     ніхто не міг змінити в одному місці. */
  --gold-line :rgba(222,184,122,.55);   /* лінія-роздільник на темному */
  --gold-edge :rgba(222,184,122,.35);   /* рамка золотої кнопки-привида */
  --gold-soft :rgba(222,184,122,.22);   /* підкладка під золотим акцентом */
  /* Золото на світлому тлі як ТЕКСТ не читається (контраст 1.9:1), тому
     другого, темнішого золота більше немає: там, де раніше стояло
     --gold-deep, текст тепер navy. Золотим лишається те, що читається
     формою, а не кольором: значки, риски, бейдж на темному. */
  --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);/* напівпрозорий navy-бейдж типу на фото (Обране) */

  /* ---------------- КОЛЬОРИ · поверхні ---------------- */
  --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);         /* пігулка-лейбл під hero */
  --pay-pill   :rgba(222,184,122,.18);         /* фон пігулки "Перший внесок" (картка новобудови) */
  --placeholder:rgba(20,20,20,.16);         /* плейсхолдери зображень (колір-fallback) */
  --placeholder-img:url("/img/decor/property-placeholder.webp"); /* картинка-заглушка фото об'єктів */
  /* Слова-категорії під пошуком. Вони стоять НА БІЛОМУ, а не на фото:
     темна підкладка шапки закінчується вище. Тому це світло-сірий від
     чорного, а не білий з прозорістю - білим по білому їх не видно
     взагалі, і півекрана виглядало порожнім. */
  --hero-word  :rgba(20,20,20,.22);
  --hero-bg-fallback:rgba(20,20,20,.22);    /* суцільний fallback під hero-фото (.hero__bg) */
  --img-fallback    :rgba(20,20,20,.21);    /* fallback під inline-фото (.hw-img) */
  --excl-ph-1       :rgba(20,20,20,.21);    /* теплий плейсхолдер-градієнт, верх (.excl__img) */
  --excl-ph-2       :rgba(20,20,20,.29);    /* теплий плейсхолдер-градієнт, низ (.excl__img) */
  --hero-sup        :rgba(20,20,20,.30);       /* лічильники біля слів-категорій - там само, на білому */

  /* ---------------- КОЛЬОРИ · лінії та межі ---------------- */
  --line       :rgba(20,20,20,.08);         /* розділювачі, тонкі межі */
  --border-field:rgba(20,20,20,.10);        /* межа полів пошуку */
  --border-soft:rgba(20,20,20,.15);         /* підкреслення полів форми */
  --pick-div   :rgba(20,20,20,.11);         /* вертикальні розділювачі в блоці ціни (пікер пошуку) */
  --pick-cat   :rgba(20,20,20,.06);         /* фон неактивної категорії-pill у пікері локацій */
  --hl-bg      :rgba(222,184,122,.22);         /* підсвітка збігу в живому пошуку (фон) */
  --hl-fg      :var(--navy);         /* підсвітка збігу в живому пошуку (текст) */
  --navy-08    :rgba(0,29,75,.08); /* фокус-кільце полів пошуку (навколо --navy) */
  --navy-hover :rgba(0,29,75,.88);         /* hover navy-кнопки "Знайти" */

  /* ---------------- КОЛЬОРИ · темна шкала (на світлому) ---------------- */
  --ink-05:rgba(20,20,20,.05);
  --ink-08:rgba(20,20,20,.08);
  --ink-10:rgba(20,20,20,.10);
  --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,.40);
  /* --ink-70 стояв у двадцяти девʼяти місцях восьми файлів (підписи під
     числами, примітки, години роботи в підвалі) - і НЕ БУВ визначений
     ніде. Браузер такий рядок просто викидає, і "дрібний сірий підпис"
     малювався кольором батька, тобто основним чорним. Виглядало це не
     як помилка, а як "щось тут занадто чорне", тому й прожило довго.
     .70 від чорного на білому - 5,3:1, тобто AA і для дрібного тексту. */
  --ink-70:rgba(20,20,20,.70);

  /* ---------------- КОЛЬОРИ · світла шкала (на темному футері/hero) ---------------- */
  --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,.60);
  --white-72:rgba(255,255,255,.72); /* посилання в підвалі */
  --white-73:rgba(255,255,255,.73); /* напівпрозорі плашки поверх фото картки */

  /* СКЛО: одна підкладка на всі плашки поверх фото (383 §4б, §4в).

     Плашка з роком, плашка забудовника, тип угоди й сердечко раніше мали
     три різні стилі на одній картці: щільний білий прямокутник, щільний
     navy і напівпрозоре скло. Тепер усі три - це одне скло.

     Запасний варіант для браузерів без backdrop-filter - НАПІВПРОЗОРЕ
     ТЕМНЕ, а не білий прямокутник: на світлому фото біла плашка без
     розмиття зливається з небом, і цифру стає не видно зовсім. */
  --glass      :rgba(255,255,255,.55);   /* скло поверх фото */
  --glass-line :rgba(255,255,255,.55);   /* тонка світла межа по краю */
  --glass-dark :rgba(0,29,75,.82);     /* темне скло: той самий вагою, що "Комісія 0%" (383 §4е) */
  --glass-edge :rgba(255,255,255,.30);   /* межа запасного варіанта */
  --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;/* пігулкові кнопки (CTA) */
  --r-pill-full:999px;/* чипи, лічильники, круглі мітки - повне коло країв */
  --r-badge:14px;/* бейджі-оверлеї на фото (рік на картці новобудови) */

  /* ---------------- ЛЕЙАУТ ---------------- */
  /* ШИРИНА КОНТЕНТУ. Це БАЗОВЕ значення - для широких моніторів (>1600px).
     Для вужчих екранів перевизначається в style.css медіазапитами (шукай блок
     "ШИРИНА КОНТЕНТУ ПО ДІАПАЗОНАХ"). Один рядок = один діапазон, задаєш точну
     ширину в px. Менше = вужчі картки + ширші поля. */
  --content:1344px;
  --content-fixed:1344px;  /* стала ширина для .excl (його координати зашиті під 1344) - не чіпати */
  /* коефіцієнт стиснення .excl під --content, щоб слайдер збігався завширшки з
     рештою на будь-якій ширині. Адаптивний: --content / 1344 (ширина .excl).
     Рахується автоматично, чіпати не треба. */
  --excl-scale:calc(var(--content) / 1344px);
  --card-h :513px;   /* єдина висота карток об'єктів на головній (суцільні + лістинг; крім карток агентів) */

  /* Вертикальний ритм між секціями. Базове значення - макетні 160px; на
     вузьких екранах (13-14" ноутбуки) перевизначається меншим у медіазапитах
     style.css, щоб сторінка була компактнішою без горизонтального скролу.
     --sec-gap-half - рівно половина (футер: 80 над лінією + 80 під), тримає
     той самий ритм. Усі вертикальні проміжки секцій тягнуть лише ці токени. */
  --sec-gap     :48px;  /* проміжок між секціями (.section, відгуки, агенти, забудовники) */
  --sec-gap-half:32px;   /* половина ритму (розділювач/мапа сайту/seo/футер) */
  --sec-head-gap:36px;   /* відступ під шапкою секції (заголовок, далі сітка карток) */

  /* =====================================================================
     СТОРІНКА "ПРО КОМПАНІЮ" (about.html)
     Hifi-хендоф design_handoff_about_company/ має власну, м'якшу
     дизайн-мову (заокруглені картки, тіні, темно-синій градієнт),
     відмінну від строгого лістингового стилю сайту. Її токени -
     лише тут; css/about.css тягне їх через var(), без magic-значень.
     Дублі базової шкали (#001D4B ≈ навбарний navy, але інший hex із
     макета) свідомо ізольовані під --about-*, щоб не зачіпати решту.
     ===================================================================== */
  --about-ink     :#001D4B;            /* акцент/бренд блоку (темні картки, заголовки, плашки іконок) */
  --about-ink-2   :rgba(20,20,20,.80);            /* текст у параграфах місії */
  --about-muted   :rgba(20,20,20,.66);            /* вторинний текст (описи карток, підзаголовки) */
  --about-muted-2 :rgba(20,20,20,.60);            /* uppercase-лейбли на світлому */
  --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,.10);           /* бордери карток і роздільники */
  --about-tl-line :rgba(20,20,20,.13);           /* лінія таймлайна */
  --about-hero-sub:rgba(255,255,255,.72);            /* підзаголовок hero */
  --about-accent  :var(--gold);            /* світло-блакитний лейбл на темному */
  --about-grad    :var(--navy); /* hero / темна CTA-картка */
  --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,.10);
  --about-w-12 :rgba(255,255,255,.12);
  --about-w-28 :rgba(255,255,255,.28);
  --about-w-70 :rgba(255,255,255,.70);
  --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;  /* hero, темні блоки, CTA-картки */
  --about-r-md  :0;  /* картки переваг, смуга фактів */
  --about-r-sm  :0;  /* картки послуг, кроки, плашки команди */
  --about-r-icon:0;  /* плашки іконок */
  --about-r-btn :0;  /* кнопки */

  /* ---- спільні токени контент-сторінок (Власникам/Кар'єра/Франшиза/
          Офіси/Блог/FAQ/Політика - той самий хендоф-стиль, що "Про компанію").
          Усі ці сторінки тягнуть --about-* через css/handoff.css. ---- */
  --about-ink-3   :rgba(20,20,20,.83);            /* основний текст довгих абзаців (політика, статті) */
  --about-ink-4   :rgba(20,20,20,.86);            /* тіло статті блогу */
  --about-q       :rgba(20,20,20,.89);            /* заголовок закритого питання (FAQ) */
  --about-head    :#141414;            /* заголовки карток статей, ціни об'єктів */
  --about-fieldbd :rgba(20,20,20,.14);            /* межа полів форм */
  --about-fieldbd2:rgba(20,20,20,.11);            /* тонша межа (пошук, TOC) */
  --about-chip2   :rgba(20,20,20,.09);            /* неактивний чип-фільтр */
  --about-muted-3 :rgba(20,20,20,.60);            /* номери TOC / дуже світлий muted */
  /* Зелений "усе гаразд": галочка переваг, "зараз відчинено", "надіслано".
     Світліший відтінок давав 4.38 до 1 на дрібному тексті - трохи нижче
     норми; цей проходить із запасом і лишається тим самим зеленим. */
  --about-ok      :#17603F;
  --about-w-14    :rgba(255,255,255,.14); /* межа плашок месенджерів на темному */
  --about-w-60    :rgba(255,255,255,.60); /* субтекст у месенджерах */
  --about-w-72    :rgba(255,255,255,.72); /* лід на темних блоках */
  --about-card-hover:0 10px 26px rgba(0,29,75,.12); /* hover карток-лінків (офіси/блог) */
  --about-form-shadow:0 10px 30px rgba(0,0,0,.18);   /* тінь спливної форми оцінки (hero owners) */
}

/* =====================================================================
   ТЕЛЕФОН: ЗАГОЛОВКИ БЕЗ СТИСНЕННЯ

   Трекінг у нас абсолютний, у пікселях, а кегель заголовків - ні. На 1440
   дисплейний рядок 44 px і -2,88 px це близько -6 %: щільно й доречно. На
   390 той самий заголовок 28 px, а трекінг лишається -2,88 px - це вже
   -10 %, і літери злипаються (Вадим, скриншот 01:27: "Продаж квартир в
   Одесі та області").

   Тому на вузькому екрані заголовки йдуть без стиснення. Дрібний текст
   (base/sm/xs) лишається як був: там -0,3 px це відсоток-два.

   Селектор навмисно з `html :is(...)`: tokens.css підключається ПЕРШИМ, а
   власні правила сторінок (.bl-hero h1, .ff-h1) мають ту саму вагу і
   виграють за порядком. Зайвий `html` додає вагу, і правило працює
   незалежно від того, скільки ще css підключить сторінка.
   ===================================================================== */
@media (max-width:768px){
  :root{
    --ls-display:0;
    --ls-h1     :0;
    --ls-h2     :0;
    --ls-h3     :0;
    --ls-h4     :0;
    --ls-lg     :0;
  }

  /* Інтерліньяж 1,15: на двох рядках заголовка 1,05 злипався по вертикалі
     так само, як літери по горизонталі. */
  html :is(h1, h2, h3, .ff-h1, .pp-title, .hf-hero__body h1){ line-height:1.15; }

  /* Трекінг нулем - і для тих заголовків, які задають його повз токени.
     Обнулити самі токени було мало: .ff-h1 у каталозі, .bl-hero h1 у
     блозі, .hf-hero h1 і .pp-title на обʼєкті мають власний
     letter-spacing у em, і на 390 він знову стискав рядок (-0,42 px при
     28 px). Правило одне на всі: на вузькому екрані заголовки без
     стиснення, звідки б воно не приходило. */
  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; }

  /* Кегель H1 - 28 px, H2 - 24 px. Плавний розмір на головній розганяв
     заголовок до 34 px уже на 606 px завширшки: три слова в рядок, і
     перенос падає посеред словосполучення. */
  html :is(h1, .ff-h1, .pp-title, .bl-hero h1, .hf-hero h1, .pr__h1){ font-size:28px; }
  html :is(h2){ font-size:24px; }

  /* Вага - лише 700. Восьма вага лишалась подекуди від старої шкали, і
     поруч із 700 на сусідньому екрані це видно як різні заголовки. */
  html body :is(h1, h2, h3, .ff-h1, .pp-title){ font-weight:700; }
}

/* СИНТЕТИЧНОГО ЖИРНОГО НЕМАЄ.

   NAMU-1990 підключений як змінний (font-weight: 400 800), і коли браузер
   не встиг його завантажити, заголовок малюється запасним Inter, до якого
   при font-weight:800 домальовується ще й синтетична жирність. Саме це й
   виглядає "занадто товстим": не шрифт, а шрифт плюс обведення.

   font-synthesis:none означає "або справжня жирна накреслення, або
   звичайна" - і ніколи не домальована. */
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);}
.see-all{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-base);letter-spacing:var(--ls-base);color:var(--dark);}
.see-all img{width:20px;height:20px;display:block;transition:transform .2s;}
.see-all:hover img{transform:translateX(3px);}
.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;}



/* =================== КАРТКИ =================== */
/* Усі картки на головній зведені до однієї висоти (--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: лінію від секції
   вище вже відсуває той самий ритм, і два відступи поспіль давали між
   забудовниками й першим заголовком порожню смугу в півтори сотні
   пікселів. Колонки вирівнюємо по верху - інакше коротка колонка
   розтягується на висоту найдовшої й додає порожнечі вже під собою. */
/* Шість колонок: пʼять розділів і країни новобудов. Не 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;}
.sitemap .col a.gap{margin-top:18px;color:var(--muted);}

.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); }
.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. Смуга дотику росте пседоелементом: на розмітку це не
     впливає, рядок стоїть там само, просто промах угору чи вниз тепер
     влучає. Обидва стоять у своєму рядку, тож чужого дотику не перехоплять. */
  .tabsec__tab, .see-all{ position:relative; }
  .tabsec__tab::after, .see-all::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;
}

/* =====================================================================
   FAKTOR - .card · ЕТАЛОННА картка об'єкта (єдиний компонент для всього сайту)
   Джерело дизайну 1:1: design_handoff_favorites/ ("Обране").
   Використовується в: favorites.html (сітка + стрічка), catalog.html
   (сітка лістингу), property.html / zhk.html (стрічки "Дивіться також").

   Структура:
     .card
       .card__media            фото 16/11, гострий кут; <img> або bg-заглушка
         .card__badge          бейдж типу (navy 82%) зверху-ліворуч  [опц.]
         .card__year           рік новобудови (білий бейдж)          [опц.]
         .card__dev            забудовник: лого+назва знизу-ліворуч  [опц.]
       .card__body
         .card__top            ряд ціни + серце
           .card__price        21px / bold / dark
           (.card__from        "від" + ціна - для новобудови)
           .card__heart        серце-кнопка (обране)                 [опц.]
         .card__title          назва, 1 рядок ellipsis
         .card__addr           адреса, 2 рядки clamp, фікс. висота
         .card__stats          стат-рядок (золоті іконки)   - звичайні
         .card__nbfoot         "Перший внесок" - новобудова
         .card__drows          інфо-рядки (рік/місто/комплекси) - забудовник
         .card__devfoot        роздільник + "Детальніше ›"     - забудовник

   Модифікатори:
     .card--strip   фіксована ширина для горизонтальних стрічок (280px)

   Розміри - px-точні з прототипу; кольори/радіуси - через css/tokens.css.
   ===================================================================== */
.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);}

/* фото 16/11 - <img> накладається поверх bg-заглушки */
.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;}
/* color:transparent - про биті фото.

   Коли картинка не завантажилась, браузер малює на її місці текст alt.
   Поверх нашого ескізу-заглушки виходив напис "TIMES - Одеса, Хаджибейський"
   упоперек картки. Прибирати alt не можна: його читає читалка екрана й
   бачить пошук. Тому лишаємо текст, але робимо його невидимим - на місці
   фото лишається чистий ескіз. */
.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;}

/* бейдж типу - navy 82%, дрібний, гострий кут */
/* Бейдж - один рядок і не ширший за дві третини фото. Довгий тип із CRM
   ("земля сільськогосподарського призначення") розтягував його майже на всю
   картку і переносив у два рядки: замість позначки виходила плашка. */
.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__badge).
   Фон - спільний токен --white-73 із плашкою забудовника: обидва оверлеї на
   одному фото мають бути однаково прозорі. */
.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);}

/* лого/назва забудовника - біла плашка знизу-ліворуч фото (для новобудов):
   кругле лого + назва в один рядок. Кут - var(--r-card), як у сусідніх
   оверлеях (.card__badge / .card__year), щоб три бейджі на одному фото були
   в одній мові форм. Фон - спільний токен --white-73, той самий, що в
   .card__year. */
.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;}
/* ЛОГОТИП ЦІЛКОМ, А НЕ ВИРІЗАНИЙ У КОЛО.
   position:static - скидаємо absolute від ширшого .card__media img.

   Коло "вирівнювало логотипи до одного вигляду" рівно доти, доки логотип
   не ширший за коло: Kadorr, Heritage, Будова й ZEZMAN перетворювались на
   нечитабельний фрагмент - вирізану середину слова. Логотип забудовника
   існує, щоб його впізнали, тож показуємо його повністю: висота 20,
   ширина за пропорцією до 88 пікселів, кут 0 - як у решти плашок. */
.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;}
/* назва - один рядок; довге ім'я забудовника обрізаємо трикрапкою,
   плашка не має розповзатися на пів-фото. */
/* НАЗВУ ЗАБУДОВНИКА НЕ РІЖЕМО (383 §4д).

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

   Тому довга назва переноситься на другий рядок усередині тієї самої
   скляної плашки: висота росте тільки там, де це справді потрібно, а
   коротким назвам лишається та сама висота 26 px. Ширину плашка має до
   краю фото й далі не лізе. */
.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;}

/* ============================================================
   СКЛО ПОВЕРХ ФОТО - одна підкладка на всі плашки (383 §4б, §4в)

   Було три різні стилі на одній картці: щільний білий прямокутник із роком,
   щільний navy з типом угоди й напівпрозоре скло під сердечком. Виглядало
   як три наліпки з різних наборів.

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

   ЗАПАСНИЙ ВАРІАНТ. Там, де backdrop-filter не працює, підкладка стає
   напівпрозорою ТЕМНОЮ зі світлим текстом, а не білим прямокутником: біле
   без розмиття зливається з небом, і цифри не видно зовсім.
   ============================================================ */
.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);
}

/* ТЕМНЕ СКЛО НА ОБʼЄКТАХ, СВІТЛЕ НА КОМПЛЕКСАХ (383 §4е).

   Плашка типу угоди ("Продаж квартири") лежить на фотографії кімнати, а
   кімнати знімають при світлі: на світлій стіні темний текст по світлому
   склу зникав. Рік і забудовник лежать на фасаді й небі, там світле скло
   читається добре.

   Тому механіка та сама - напівпрозоре скло з розмиттям, - а колір
   підкладки різний: на обʼєктах темний із білим текстом, бо білий на
   темному читається на будь-якому фото, а темний на світлому - ні. */
.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{color:var(--white);}
  .card__heart img,
  .card__heart .card__heart-ic{color:var(--white);}
}

/* ---- .card--dev: картка забудовника ----
   Фото в забудовника немає, є ЛОГО - і воно в круглій медальйон-подачі, тій
   самій, що плашка забудовника на фото новобудови (.card__dev img). Картка -
   світла панель із тонкою рамкою: коло-лого зверху по центру, під ним назва
   й інфо-рядки, знизу відбита лінією кількість комплексів.
   Композиція центрована - коло по центру вимагає симетрії, інакше "висить". */
.card--dev{box-sizing:border-box;padding:18px 14px 14px;background:var(--white);
  border:1px solid var(--line);border-radius:12px;}
/* Ховер-ефектів немає навмисно: картка не підіймається, не змінює рамку й не
   приглушується - єдиний відгук на наведення це курсор-рука (базовий .card).
   Тому нижче гасимо й успадковане .card:hover .card__media{opacity:.9}. */

/* медіа-блок = коло-медальйон під лого. Розмір задає --logo (перевизначається
   в каруселі головної, де картка вдвічі вужча). Тло БІЛЕ, не сіре: сіра
   плитка "бруднила" кольорові лого; сірим лишається тільки коло-заглушка
   (див. :has нижче) - щоб порожній стан читався як порожній. */
.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%;}
/* Логотип показуємо ЦІЛКОМ (Вадим 08.09: "фото це логотип"). Заповнення від
   краю до краю робило з нього медальйон, але зрізало те, заради чого логотип
   і існує - назву компанії. Поле невидиме: тло кола теж біле. */
.card--dev .card__media img{box-sizing:border-box;object-fit:contain;padding:14%;}
/* лого на білому/прозорому тлі (KADORR Group, вордмарки): заповнення зрізало б
   назву компанії, тож вписуємо цілком, із полем. Поле невидиме - тло кола теж
   біле. Клас ставить сервер (LogoFit за пікселями картинки), запобіжник для
   широких вордмарків - onload у card.js. */
.card--dev .card__media img.card__logo--fit{object-fit:contain;padding:12%;}
/* Квадратне коло під лого - але сама рамка кола лишається: вона тримає ряд
   карток однаковим, коли лого різної форми (вордмарк проти значка). */
/* Заглушка (лого в CRM не заповнене / посилання недоступне) - навмисно дрібна
   й приглушена, щоб її не читали як логотип компанії. Розмір у % від кола,
   не в px: та сама картка живе і в сітці /developers (~285px), і в каруселі
   головної. inset:auto + top/left - центруємо, перебиваючи inset:0 від
   .card__media img. Селектор із img обов'язковий, щоб виграти за
   специфічністю в правила вище (клас + елемент). */
.card--dev .card__media img.card__logo--stub{inset:auto;top:32%;left:32%;width:36%;height:36%;opacity:.3;padding:0;}
/* сіре коло - ЛИШЕ під заглушкою; :has не підтримано, тоді лишиться біле, що теж коректно */
.card--dev .card__media:has(img.card__logo--stub){background:var(--soft);}
/* лого не приглушуємо на hover - це не фото (гасимо .card:hover .card__media) */
.card--dev:hover .card__media{opacity:1;}

/* текст під колом - по центру; назва велика й жирна (головне в картці), може
   займати два рядки, тож знімаємо nowrap-обрізання від базового .card__title. */
.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;}

/* підвал - два лічильники ЖК ("Будується | Здано"), розділені вертикальною
   лінією, як у картці-референсі. Притиснутий донизу (margin-top:auto), тож
   ряди карток вирівняні попри різну довжину назв. */
.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);}
/* фолбек-підвал (у забудовника немає ЖК із роком здачі) - один рядок
   "N комплексів", без колонок і роздільника */
.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:-0.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;}
/* Крапка-роздільник між ціною й ціною метра: без неї два числа читались як
   одне довге ("від $45 253 $1 300 / м²"). */
.card__priceline .card__pricem::before{content:'· ';color:var(--secondary);}

/* ціна + ціна за м² в один ряд (новобудова): ціна зліва, "/ м²" поруч muted.
   align-items:baseline дає спільну базову лінію, висота ряду не росте. */
.card__priceline{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1;}
/* ціна за м² - тим самим muted-кольором, що й адреса; обрізається за потреби */
.card__pricem{font-size:var(--fs-sm);line-height:1.2;color:var(--addr);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* серце-кнопка - системні іконки img/icons/fav.svg (контур) / like.svg
   (залите, в обраному). Кнопка без власного фону: like.svg несе пігулку. */
.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:rgba(255,255,255,.85);}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card__media .card__heart{background:rgba(255,255,255,.9);}
}
.card__heart:hover{transform:scale(1.1);}
/* Обведення - тим, хто ходить клавіатурою, а не тим, хто клікнув мишею
   (409 §6). Було видно синю рамку, яка лишалась на картці після кліку. */
.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);}

/* назва - 1 рядок ellipsis */
.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;}

/* адреса - пін + текст (2 рядки clamp), фікс. висота під вирівнювання рядів.
   Пін не масштабується (flex-shrink:0), текст клемпиться у власному span. */
.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;}

/* стат-рядок - в один рядок, притиснутий донизу. Іконки: системні <img>
   (кімнати, площа) + inline-гліфи золотим (поверх, ділянка). */
.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;}
/* КОЛІР ЗНАЧКІВ - ТОКЕНАМИ, І ЗАДАНИЙ ТУТ, А НЕ УСПАДКОВАНИЙ.

   Значки малюються currentColor, тож без цих рядків вони брали колір
   тексту картки й виходили чорними.

   Правило (Вадим 07.09): усі значки картки - золоті, бо золото в нас і є
   акцентом для значків; navy лишається текстові, діям і серцю. У
   шістнадцяти пікселях на білому navy читається просто як чорний, і сенс
   акценту зникає. */
.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;}

/* картка забудовника - інфо-рядки; останній (к-сть комплексів) несе праворуч
   "Детальніше ›" в один рядок. Преміальна ієрархія: золоті іконки, підпис
   muted, значення navy/600. Рядок-підвал притиснутий донизу (margin-top:auto),
   тож ряди карток вирівняні попри різну довжину назв. */
.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{font-weight:var(--fw-semibold);color:var(--navy);}
.card__dval{font-weight:var(--fw-semibold);color:var(--navy);}
.card__dic{flex:none;color:var(--gold);}
/* останній інфо-рядок: ліворуч "N комплексів", праворуч "Детальніше ›" */
.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;}

/* --- телефон: футер/стат-рядок картки без верхнього відступу.
   Правило тут (а не в style.css), бо card.css підключається ПІСЛЯ style.css -
   інакше базовий padding-top:13px перебивав би переозначення за порядком. --- */
@media (max-width:900px){
  .card__nbfoot,.card__stats{padding-top:0;}
}


/* ---------- фірмові кольори: рівно там, де сказано (020 §12) ----------
   navy - структура, gold - акцент. Золотого тексту на світлому немає:
   контраст 1.9:1, його не видно. Золото на білому - тільки лінії й значки. */

/* 3. Ціна на картці - navy: головне число картки має читатись як головне. */
.card__price{ color:var(--navy); }

/* 4. Бейдж "Комісія 0%" - єдиний золотий текст на сайті, і той на navy. */
.card__badge{ letter-spacing:.04em; }
.card--commission .card__badge,
/* Без капсу (167 п.5): бейдж і так помітний кольором, а капс на
   картці читається як крик. */
.card__badge--commission{ background:var(--navy); color:var(--gold); border-radius:0; }

/* "Перший внесок" у картці новобудови - navy замість другого золота
   (--gold-deep тепер вказує на navy, правило лишається на місці). */



/* "ДЕРЖПРОГРАМИ": СЛОВО, А НЕ ЩИТ (435).

   Було коло 24 px зі щитом усередині. Символ 14 px не розшифровується:
   людина бачила значок і не мала способу дізнатись, що він означає.
   Пояснення жило в `title`, а на телефоні `title` не існує - наведення
   миші там немає, і саме з телефона до нас приходить більшість.

   Друге, що не працювало: золота підкладка напівпрозора. На світлому
   знімку вона зливалась із фотографією, і позначка читалась як частина
   кадру. Тепер фон щільний - той самий navy, що під "Комісія 0", і те
   саме золото на ньому. Це готові змінні теми, а не новий відтінок.

   Місце - верхній ряд, поруч із типом угоди. Ряд загорнутий у
   .card__badges, щоб дві плашки стояли поруч, а не одна на одній. */
.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%;
}

/* Плашка "Держпрограми" - ТА САМА, ЩО "Продаж квартири": та сама висота,
   те саме скло, та сама прозорість, той самий синій. Відрізняється тільки
   текст - золотий замість білого, бо це інша річ, а не інший стиль.

   Було: щільний navy проти напівпрозорого скла поруч. Два сині різної
   густини в одному ряду читаються як помилка верстки. */
.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 rgba(0, 29, 75, .28);
}

/* Плашка без логотипа лишається порожньою (ТЗ 143: "без лого - лише назва").
   Ані іконки, ані ініціалів: і те, і те виглядає як логотип, якого немає.
   Коло при цьому не зникає - воно тримає ряд карток однакової висоти. */
.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;}

/* ЗАПАС ДЛЯ БРАУЗЕРІВ БЕЗ aspect-ratio (Safari до 15).

   Висоту блока з фото тримає ТІЛЬКИ aspect-ratio: своєї висоти в нього
   немає, а <img> усередині лежить absolute і теж нічого не додає. Браузер,
   який про aspect-ratio не знає, робить блок заввишки нуль - фото зникає
   зовсім, текст підтягується вгору.

   Саме це Вадим і зняв 18.09 на iPad у Safari: картки з ціною, назвою й
   метрами, і жодного знімка. У Chrome на тих самих ширинах (1440, 1024,
   820, 768, 390) битих зображень нуль - різниця не в даних, а в движку.

   aspect-ratio зʼявився в Safari 15 (вересень 2021). Нижче - класичний
   запас через padding-top: висота = ширина × (висота/ширина пропорції).
   Сучасні браузери цього блока навіть не читають.
   .card__media - 16/11
   .card--dev .card__media - 1/1
 */
@supports not (aspect-ratio: 16 / 11) {
  .card__media{padding-top:68.75%;}
  .card--dev .card__media{padding-top:100.0%;}
}

/* =====================================================================
   FAKTOR - ЛІД-ФОРМА В САЙДБАРІ (.pp-form / .pp-agent / .pp-contacts)
   Спільний блок "зворотного зв'язку": картка агента, форма заявки та ряд
   месенджерів під нею. Розмітка - resources/views/partials/lead-form.blade.php.

   Спочатку жив у css/property.css (сторінка об'єкта). Винесений окремо, бо
   ту саму форму показує й сторінка забудовника (/developers/{slug}) -
   один файл стилів на обидві, щоб вигляд не розходився.

   Підключати на кожній сторінці, де є @include('partials.lead-form').
   Ширину/липкість колонки задає сторінка (.pp-side у property.css,
   .dev-aside у developer.css) - тут лише вміст картки.
   Палітра й кеглі - токени css/tokens.css.
   ===================================================================== */

/* ---------------- картка агента / відділу продажу ---------------- */
.pp-agent{background:var(--soft);padding:24px;border-radius:var(--r-card);}
.pp-agent__top{display:flex;align-items:center;gap:18px;}
/* Квадратні кути, а не коло (рішення Вадима 18.09). Уся система радіусів
   на сайті - нулі: --r-ctrl, --r-field, --r-card. Кругла аватарка була
   єдиним колом на сторінці й читалась як чужий елемент, принесений із
   месенджера. Радіус беремо токеном, щоб він їхав разом із системою, а не
   лишився зашитим нулем. */
.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:rgba(20,20,20,.06);}
/* Знак дрібніший за фото: він не портрет, а позначка "тут мав би бути
   агент". На 58px він займав дві третини кола й читався як логотип
   компанії посеред картки; 34 - це приблизно та сама вага, що в ініціалів,
   і коло лишається колом, а не рамкою навколо знака. */
.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;}
/* Поля - 48, як кнопка поруч (167 п.5). Було 44-46 залежно від типу
   поля, і рядок "ім'я - телефон - дата" стояв сходинкою. */
.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);}
/* згода (partials/consent) - усередині flex-колонки форми свій gap 10px,
   тож базовий margin-top:14px замінюємо на симетричні 4px з обох боків */
.pp-form__fields .consent{margin:4px 0;}
/* Висота з ряду 40/48/56 (167 п.5): кнопка була 46, і в парі з полем на
   48 рядок "плавав". */
.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;}
/* Месенджери - вторинна дія під основною кнопкою форми: контур у navy,
   на hover заливається navy. Лого - монохромні (currentColor), без брендових
   кольорів, щоб не сперечались із фірмовим стилем. */
.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);
}

/* =====================================================================
   FAKTOR - СТОРІНКА ОБ'ЄКТА (Property Page)
   Картка одного об'єкта нерухомості. Розмітка: property.html.
   Самодостатній компонент - усі класи з префіксом .pp- не конфліктують
   з рештою сайту. Палітра й кеглі - через дизайн-токени css/tokens.css
   (var(--...)), без локальних magic-значень кольору/кегля. Гострі кути
   (--r-card/--r-ctrl/--r-field:0) - як на решті сайту; пігулки/чипи 100px,
   круглі іконки 50% - наявні патерни сайту. Відступи лишаються в px
   (у проєкті немає spacing-токенів - як і в style.css).
   Шапка, breadcrumb, sitemap, SEO, футер - спільні зі style.css.
   ===================================================================== */

/* ---------------- верхня панель: breadcrumb + код об'єкта ---------------- */
.pp-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.pp-topbar .cat-crumbs{margin-top:0;}
.pp-meta{color:var(--muted);font-size:var(--fs-sm);letter-spacing:var(--ls-sm);white-space:nowrap;}
.pp-meta b{color:var(--dark);font-weight:var(--fw-medium);}

/* ---------------- шапка об'єкта: назва/адреса + ціна ---------------- */
.pp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-top:28px;}
.pp-head__l{min-width:280px;}
/* Назва обʼєкта і ЖК - брендовим шрифтом, трекінг відносний: у
   пікселях він на телефоні з'їдав проміжки між літерами. */
.pp-title{font-family:var(--font-brand);font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:-.01em;font-weight:var(--fw-bold);max-width:680px;}
.pp-addr{margin-top:10px;display:flex;align-items:center;gap:7px;color:var(--muted);font-size:var(--fs-base);letter-spacing:var(--ls-base);}
.pp-addr svg,.pp-addr img{flex:0 0 auto;}
/* Ціна й код одним рядком.

   Код був окремою плашкою під ціною: рамка, підпис, порожнє місце навколо
   - маленька коробка, яка важила як третій блок, хоч несе три слова.
   Поруч із ціною він читається за ту саму секунду й не займає висоти. */
.pp-priceline{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.pp-priceline__l{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0;}

.pp-code{display:inline-flex;align-items:baseline;gap:7px;padding:0;border:0;background:none;
  font-family:inherit;cursor:pointer;text-align:left;white-space:nowrap;}
.pp-code:hover .pp-code__val{color:var(--navy);}
.pp-code:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
.pp-code__lbl{font-size:var(--fs-xs);line-height:1;color:var(--muted);}
.pp-code__val{font-size:var(--fs-h4);line-height:1.15;color:rgba(20,20,20,.7);letter-spacing:.01em;}
.pp-code__val b{font-weight:var(--fw-bold);color:var(--dark);}

@media (max-width:520px){
  /* Не вміщається в рядок - код іде під ціну по лівому краю, а не висить
     окремим блоком з порожнечею навколо. */
  .pp-priceline{flex-direction:column;align-items:flex-start;gap:6px;}
}

.pp-pricebox{text-align:right;}
.pp-price{font-size:var(--fs-h2);line-height:var(--lh-none);letter-spacing:var(--ls-h2);font-weight:var(--fw-bold);}
.pp-perm{margin-top:8px;color:var(--muted);font-size:var(--fs-base);letter-spacing:var(--ls-base);}

/* ЗНАК ВАЛЮТИ - ВІН ЖЕ ПЕРЕМИКАЧ.

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

   ПІДКАЗКА ВИДНА ЗАВЖДИ, А НЕ ПРИ НАВЕДЕННІ (рішення Вадима 18.09).

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

   Тепер під знаком лежить світла підкладка кольору navy на 8 %: вона
   читається як кнопка з першого погляду й НЕ ДОДАЄ ШИРИНИ - десята
   частина em ліворуч і праворуч лягає в поля, які в рядку й так є. Саме
   число лишається недоторканим.

   Кути гострі, як і скрізь: радіус беремо токеном --r-ctrl (він нуль),
   а не власним значенням, щоб підкладка їхала разом із рештою кнопок.

   На наведенні й фокусі підкладка стає суцільною navy, знак - білим: те
   саме, що роблять наші кнопки. */
.cur-sym{font:inherit;color:inherit;border:0;margin:0;cursor:pointer;
  background:var(--navy-08);border-radius:var(--r-ctrl);padding:0 .1em;
  transition:background .18s ease,color .18s ease;}
/* Розділено навмисно, не злито через кому.

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

   Перевірено 18.09: таких правил було пʼять. */
.cur-sym:hover{background:var(--navy);color:var(--white);}
.cur-sym:focus-visible{background:var(--navy);color:var(--white);}
/* Блок ціни в біткоїні прибрано з розмітки ще раніше (курс був зашитий у
   код і застарівав наступного дня). Прибираємо й правило: колір --btc у
   токенах більше не існує, і це правило лишало б у файлі мертве посилання. */

/* ---------------- ряд швидких фактів ---------------- */
.pp-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.pp-fact{display:inline-flex;align-items:center;gap:8px;background:var(--soft);border:1px solid var(--line);padding:10px 15px;font-size:var(--fs-sm);letter-spacing:var(--ls-sm);font-weight:var(--fw-medium);color:var(--dark);border-radius:var(--r-card);}
.pp-fact svg,.pp-fact img{flex:0 0 auto;}

/* ---------------- двоколонковий лейаут ---------------- */
.pp-cols{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-start;margin-top:30px;}
.pp-main{flex:1 1 600px;min-width:320px;}
/* Права колонка липка: агент і форма їдуть із людиною, поки вона читає
   опис і характеристики. Верх - під шапкою (80 + 16).

   Якщо колонка вища за екран, липне її верх, а вміст гортається всередині:
   інакше низ форми лишався б за межами вікна, і кнопку "Замовити перегляд"
   не було б чим натиснути. */
.pp-side{flex:1 1 340px;min-width:300px;max-width:384px;position:sticky;top:96px;
  max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;display:flex;flex-direction:column;gap:16px;}
.pp-side::-webkit-scrollbar{display:none;}

/* ---------------- галерея ---------------- */
.pp-gallery{position:relative;overflow:hidden;background:var(--placeholder) var(--placeholder-img) center/cover no-repeat;aspect-ratio:16/10;border-radius:var(--r-card);}
.pp-gallery__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:zoom-in;}
/* Плашки поверх фото - скляні: під ними завжди рухається зображення, і
   саме там скло має сенс. Темні лишаються темними (білий текст), світлі -
   світлими (navy іконка); кольору й відблисків не додаємо. */
.pp-count{position:absolute;right:16px;bottom:16px;background:rgba(20,20,20,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--white);font-size:var(--fs-xs);letter-spacing:var(--ls-xs);font-weight:var(--fw-medium);padding:7px 13px;border-radius:var(--r-pill-full);}
/* СТРІЛКИ НА ФОТО.

   Без кружків і підкладки: це підказка "є ще кадри", а не елемент
   керування, який має змагатися з самим фото. Тінь потрібна не для краси -
   без неї біла стрілка зникає на світлому знімку.

   Зона кліку 56×56 при значку 28: палець і мишка влучають у площу, а не в
   тонку лінію. */
.pp-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  border:0; background:none; color:var(--white); cursor:pointer;
  opacity:.75; transition:opacity .18s ease-out;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,.45));
  z-index:2;
}
.pp-nav:hover{opacity:1;}
.pp-nav:focus-visible{opacity:1;outline:2px solid var(--white);outline-offset:-4px;}
.pp-nav svg{width:28px;height:28px;}
.pp-nav--prev{left:4px;}
.pp-nav--next{right:4px;}

/* На телефоні гортають пальцем. Стрілка під великим пальцем лише закриває
   кадр, тому її там немає зовсім. */
@media (max-width:767px){
  .pp-nav{display:none;}
}

.pp-iconbtn{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--navy);transition:background .18s ease-out;}
.pp-iconbtn:hover{background:rgba(255,255,255,.85);}
.pp-iconbtn--dark{background:rgba(20,20,20,.45);color:var(--white);}
.pp-iconbtn--dark:hover{background:rgba(20,20,20,.65);}

/* Без скла - щільний фон: напівпрозора кнопка без розмиття зникає на
   світлому фото. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pp-iconbtn{background:rgba(255,255,255,.94);}
  .pp-iconbtn--dark{background:rgba(0,29,75,.8);}
  .pp-count{background:rgba(0,29,75,.82);}
}
.pp-gallery__zoom{position:absolute;left:16px;bottom:16px;}
.pp-gallery__tools{position:absolute;right:16px;top:16px;display:flex;gap:8px;}
.pp-thumbs{display:flex;gap:10px;margin-top:11px;overflow-x:auto;padding-bottom:4px;}
.pp-thumb{flex:0 0 96px;height:70px;overflow:hidden;cursor:pointer;background:var(--placeholder) var(--placeholder-img) center/cover no-repeat;border:2px solid transparent;padding:0;border-radius:var(--r-card);}
.pp-thumb.on{border-color:var(--navy);}
.pp-thumb img{width:100%;height:100%;object-fit:cover;}
.pp-scroll::-webkit-scrollbar{height:6px;}
.pp-scroll::-webkit-scrollbar-thumb{background:var(--ink-18);border-radius:var(--r-pill-full);}
.pp-scroll::-webkit-scrollbar-track{background:transparent;}

/* ---------------- картка-секція ---------------- */
.pp-card{background:var(--soft);padding:26px 28px;margin-top:22px;border-radius:var(--r-card);}
.pp-card--gallerygap{margin-top:26px;}
.pp-card__title{font-size:var(--fs-h4);line-height:var(--lh-snug);letter-spacing:var(--ls-h4);font-weight:var(--fw-bold);}

/* ---------------- характеристики ---------------- */
.pp-chargroup{margin-top:18px;}
/* Без капсу (167 п.5): підпис над заголовком читається як слово, а не
   як напис на табличці. */
.pp-cat{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--muted);margin-bottom:2px;}
.pp-rows{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;}
.pp-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);}
.pp-row .k{font-size:var(--fs-sm);letter-spacing:var(--ls-sm);color:var(--muted);}
.pp-row .v{font-size:var(--fs-sm);letter-spacing:var(--ls-sm);font-weight:var(--fw-semibold);color:var(--dark);text-align:right;}

/* ---------------- теги / інфраструктура (пігулки) ---------------- */
.pp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.pp-tag{display:inline-flex;align-items:center;gap:6px;background:var(--field-2);color:var(--dark);border-radius:var(--r-pill-full);padding:7px 14px;font-size:var(--fs-xs);letter-spacing:var(--ls-xs);font-weight:var(--fw-medium);}
.pp-tag svg{flex:0 0 auto;color:var(--navy);}
.pp-tag img{flex:0 0 auto;}

/* ---------------- будинок і інфраструктура ---------------- */
.pp-complex{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:18px;}
.pp-complex__thumb{width:128px;height:96px;flex:none;overflow:hidden;background:var(--placeholder) var(--placeholder-img) center/cover no-repeat;border-radius:var(--r-card);}
.pp-complex__thumb img{width:100%;height:100%;object-fit:cover;}
.pp-complex__box{flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px;}
.pp-complex__label{font-size:var(--fs-sm);letter-spacing:var(--ls-sm);color:var(--muted);}
.pp-complex__name{font-size:var(--fs-lg);letter-spacing:var(--ls-lg);font-weight:var(--fw-bold);color:var(--dark);}
/* Плашка-посилання на сторінку ЖК (/novobudovy/{slug}) - коли комплекс є в
   довіднику CRM. Стрілка "Про ЖК" підсвічується разом із назвою на ховері. */
.pp-complex--link{transition:opacity .15s;}
.pp-complex--link:hover{opacity:.82;}
.pp-complex__more{display:inline-flex;align-items:center;gap:7px;flex:none;font-size:var(--fs-sm);letter-spacing:var(--ls-sm);font-weight:var(--fw-semibold);color:var(--navy);}

/* ---------------- опис ---------------- */
.pp-desc{font-size:var(--fs-base);line-height:var(--lh-relaxed);letter-spacing:var(--ls-base);color:var(--dark);}

/* ---------------- чому через FAKTOR ---------------- */
.pp-why{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 24px;margin-top:20px;}
.pp-why__item{display:flex;gap:14px;align-items:flex-start;}
.pp-why__ic{width:44px;height:44px;flex:none;border-radius:50%;background:var(--navy);color:var(--white);display:inline-flex;align-items:center;justify-content:center;}
.pp-why__h{font-size:var(--fs-base);letter-spacing:var(--ls-base);font-weight:var(--fw-bold);color:var(--dark);}
.pp-why__t{margin-top:4px;font-size:var(--fs-sm);line-height:var(--lh-base);letter-spacing:var(--ls-sm);color:var(--muted);}

/* ---------------- розташування / карта ---------------- */
.pp-map{position:relative;overflow:hidden;background:var(--placeholder);height:280px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-card);margin-top:15px;}
.pp-map__pin{color:var(--navy);}
/* Адреса замість карти, якщо координат немає (412 §2). Не сіра пляма зі
   шпилькою, яка виглядає як карта, що не завантажилась, - просто рядок. */
.pp-map__addr{margin:15px 0 0;font-size:var(--fs-base);letter-spacing:var(--ls-base);color:var(--dark);}

.pp-map__lbl{position:absolute;left:18px;bottom:18px;background:var(--white);border:1px solid var(--line);font-size:var(--fs-sm);letter-spacing:var(--ls-sm);color:var(--muted);padding:9px 13px;border-radius:var(--r-card);}

/* ---------------- сайдбар: агент + форма + месенджери ----------------
   Стилі .pp-agent / .pp-form / .pp-contacts переїхали в css/leadform.css -
   ту саму картку показує сторінка забудовника (/developers/{slug}).
   Тут лишається тільки лейаут колонки (.pp-side вище). */

/* ---------------- стрічки "Дивіться також" / "Переглянуті" ---------------- */
.pp-feed{margin-top:56px;}
.pp-feed__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 18px;}
.pp-feed__title{font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:var(--ls-h3);font-weight:var(--fw-medium);}
.pp-feed__tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-bottom:26px;flex-wrap:wrap;}
.pp-feed__tab{border:none;background:none;cursor:pointer;font-family:var(--font-base);font-size:var(--fs-base);letter-spacing:var(--ls-base);font-weight:var(--fw-medium);padding:0 0 14px;margin-bottom:-1px;white-space:nowrap;color:var(--muted);border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.pp-feed__tab.on{color:var(--dark);border-bottom-color:var(--navy);}
.pp-feed__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:stretch;}

/* flex-колонка + margin-top:auto на футері дає однакову висоту карток у ряду
   (grid stretch), стат-рядок притиснутий донизу попри різну довжину назв. */
.pp-fcard{display:flex;flex-direction:column;background:var(--soft);overflow:hidden;border-radius:var(--r-card);}
.pp-fcard__img{position:relative;aspect-ratio:16/10;background:var(--placeholder) var(--placeholder-img) center/cover no-repeat;flex:none;}
.pp-fcard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pp-fcard__heart{position:absolute;right:11px;top:11px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;}
.pp-fcard__body{flex:1;display:flex;flex-direction:column;padding:14px 16px 16px;}
.pp-fcard__price{font-size:var(--fs-lg);letter-spacing:var(--ls-lg);font-weight:var(--fw-bold);color:var(--dark);}
.pp-fcard__cx{margin-top:6px;font-size:var(--fs-sm);letter-spacing:var(--ls-sm);font-weight:var(--fw-semibold);color:var(--dark);}
.pp-fcard__ad{margin-top:4px;font-size:var(--fs-xs);letter-spacing:var(--ls-xs);color:var(--muted);line-height:var(--lh-base);min-height:34px;}
.pp-fcard__row{display:flex;gap:14px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-xs);letter-spacing:var(--ls-xs);font-weight:var(--fw-medium);color:var(--muted);}
.pp-fcard__row span{display:inline-flex;align-items:center;gap:5px;}
.pp-fcard__row svg{flex:0 0 auto;color:var(--muted);}

/* ---------------- лайтбокс (фуллскрин) ---------------- */
/* Повноекранна галерея: скло замість суцільної темряви (118 п.4).

   Сторінка під нею лишається впізнаваною, і повний екран читається як шар
   над нею, а не як інша сторінка. Розмиття тут важливіше за прозорість:
   без нього текст, що просвічує, змагався б із фото. */
.pp-lb{position:fixed;inset:0;z-index:9999;background:rgba(0,29,75,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:none;flex-direction:column;}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pp-lb{background:rgba(0,29,75,.94);}
}
.pp-lb.open{display:flex;}
.pp-lb__bar{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;color:var(--white);}
.pp-lb__label{font-size:var(--fs-base);letter-spacing:var(--ls-base);font-weight:var(--fw-medium);}
.pp-lb__btn{width:44px;height:44px;border-radius:50%;border:none;background:var(--white-22);color:var(--white);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s;}
.pp-lb__btn:hover{background:rgba(255,255,255,.34);}
.pp-lb__stage{flex:1;display:flex;align-items:center;justify-content:center;gap:18px;padding:0 18px 16px;min-height:0;}
.pp-lb__nav{width:52px;height:52px;flex:none;}
.pp-lb__imgwrap{flex:1;max-width:1100px;height:100%;display:flex;align-items:center;justify-content:center;}
.pp-lb__imgwrap img{max-width:100%;max-height:100%;object-fit:contain;}
.pp-lb__thumbs{display:flex;gap:8px;justify-content:center;padding:0 18px 22px;overflow-x:auto;}
.pp-lb__thumb{flex:0 0 72px;height:52px;overflow:hidden;cursor:pointer;padding:0;background:none;border:2px solid transparent;opacity:.5;}
.pp-lb__thumb.on{opacity:1;border-color:var(--white);}
.pp-lb__thumb img{width:100%;height:100%;object-fit:cover;}

/* ============================================================================
   МОБІЛЬНИЙ РЕЖИМ (≤900px)

   ПЕРЕДУМОВА: show.blade.php віддає адаптивний viewport (@section('viewport') дає
   width=device-width). Глобальний style.css у своєму ≤900 знімає .frame{zoom},
   робить .container гумовим (padding 16px), зменшує токени (--fs-h2:30px, і
   .pp-price автоматично меншає) і переверстує nav. Тут - лише pp-специфіка:
   дві колонки .pp-cols стають вертикальним стеком (сайдбар під контентом, без sticky),
   двоколонкові сітки (рядки/"чому FAKTOR"/стрічка) стають однією колонкою, і головне -
   зняти десктопні min-width, інакше на вузьких телефонах з'явився б
   горизонтальний скрол.
   ============================================================================ */
@media (max-width:900px){

  /* верхня панель: код/оновлено переносимо, а не тримаємо в один рядок */
  .pp-meta{white-space:normal;}

  /* шапка об'єкта: назва/адреса й ціна стеком, ціна вирівнюється ліворуч.
     Ціна та ціна/м² - в один рядок (по базовій лінії), з переносом,
     якщо в дуже вузький екран не вміщаються. */
  .pp-head{gap:14px;margin-top:22px;}
  .pp-head__l{min-width:0;}
  .pp-pricebox{text-align:left;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;}
  .pp-perm{margin-top:0;}

  /* швидкі факти - один ряд без переносу. Чіпи щільніші (менші поля/шрифт,
     компактніша іконка), тож у типовому випадку 3-4 факти влазять у 360px;
     якщо ні - ряд горизонтально гортається, розтікаючись у поля .container
     (margin -16px / padding 16px), а скролбар ховаємо (як .fav-chiprow). */
  .pp-facts{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:20px -16px 0;padding:0 16px 2px;
    scrollbar-width:none;-ms-overflow-style:none;}
  .pp-facts::-webkit-scrollbar{display:none;}
  .pp-fact{flex:0 0 auto;white-space:nowrap;gap:6px;padding:9px 12px;font-size:var(--fs-sm);}
  .pp-fact img{width:14px;height:14px;}

  /* дві колонки стають стеком: контент зверху, сайдбар (агент+форма) під ним.
     Знімаємо sticky/обмеження ширини та десктопні min-width колонок
     (600/320/300px розпирали б макет ширше за екран телефона). */
  .pp-cols{gap:24px;margin-top:24px;}
  .pp-main{flex-basis:100%;min-width:0;}
  .pp-side{flex-basis:100%;min-width:0;max-width:none;position:static;top:auto;}

  /* картки-секції: щільніші поля під вузький екран */
  .pp-card,.pp-card--gallerygap{padding:22px 18px;}

  /* "Чому через FAKTOR": 2 колонки стають 1 */
  .pp-why{grid-template-columns:1fr;gap:18px;}

  /* стрічка "Дивіться також / Переглянуті": 4 колонки стають 1 (свій grid,
     не успадковує .grid4, тож згортаємо явно) */
  .pp-feed{margin-top:44px;}
  .pp-feed__grid{grid-template-columns:1fr;gap:28px;}

  /* лайтбокс: стрілки й поля компактніші, щоб фото займало більше ширини */
  .pp-lb__bar{padding:14px 16px;}
  .pp-lb__stage{gap:8px;padding:0 8px 12px;}
  .pp-lb__nav{width:40px;height:40px;}
  .pp-lb__thumb{flex-basis:64px;height:46px;}
}

/* Планшет / великий телефон-ландшафт (600-900px): стрічка схожих об'єктів -
   у 2 колонки (як .cat-grid у каталозі), щоб не було завеликих карток. */
@media (min-width:600px) and (max-width:900px){
  .pp-feed__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px;}
}

/* Телефони (≤560px): двоколонкові пари "ключ-значення" характеристик/будинку
   у вузькому стовпці зливаються - розкладаємо в одну колонку. */
@media (max-width:560px){
  .pp-rows{grid-template-columns:1fr;gap:0;}

  /* Плашка ЖК: прев'ю + "Проєкт / назва" + "Про ЖК" в один ряд не влазять,
     і при flex-переносі напис "Про ЖК" зависав по центру пари підпис/назва.
     Розкладаємо гридом: прев'ю - окремим рядком, під ним "назва | Про ЖК"
     з вирівнюванням по низу, тож напис стоїть в один рядок із назвою ЖК. */
  .pp-complex{display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px 18px;}
  .pp-complex__thumb{grid-column:1/-1;justify-self:start;}
  .pp-complex__box{min-width:0;}
}


/* Бейдж "Комісія 0%" у ціновому блоці квартири від забудовника. */
.pp-commission {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--gold-soft);
    color: var(--navy);
    font-size:var(--fs-sm);
    font-weight: 600;
}




/* "Ціну знижено на 5 % - 12.08".

   Під самою ціною й тихо: це факт, а не банер. Кольором тут керує зміст -
   зниження єдине, що ми показуємо, - але сенс тримається на словах, а не на
   кольорі: людині, яка не розрізняє відтінки, зелений напис нічого не
   повідомляє. */
.pp-pricedrop {
    margin: 6px 0 0;
    font-size:var(--fs-sm);
    font-weight: 600;
    color: #1F7A4D;
}




/* Карта переїхала у власний файл css/map.css: той самий блок стоїть на
   картці обʼєкта, на сторінці ЖК і на сторінці офісу, а стилі лежали лише
   тут - і на сторінці офісу карта виходила без них. */



/* ---------- "Дивіться також": вкладки ----------
   Вкладки в одному стилі з рештою сайту: 14px, без капсу, активна -
   підкреслення 2px, лічильник пігулкою. */
.pp-also__tabs{display:flex;flex-wrap:wrap;gap:18px;margin:4px 0 18px;border-bottom:1px solid var(--line);}
.pp-also__tab{display:inline-flex;align-items:center;gap:8px;padding:0 0 10px;background:none;border:0;cursor:pointer;
  font-size:var(--fs-md);color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;}
.pp-also__tab:hover{color:var(--dark);}
.pp-also__tab.is-active{color:var(--dark);border-bottom-color:var(--navy);}
.pp-also__count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--r-pill-full);background:var(--chip-bg);font-size:var(--fs-xs);color:var(--muted);}
.pp-also__tab.is-active .pp-also__count{background:var(--navy);color:var(--white);}
.pp-also__pane.hidden{display:none;}

@media (max-width:720px){
  .pp-also__tabs{flex-wrap:nowrap;overflow-x:auto;gap:14px;scrollbar-width:none;}
  .pp-also__tabs::-webkit-scrollbar{display:none;}
  .pp-also__tab{white-space:nowrap;}
}

/* ---------- "Помилка в оголошенні?" ----------
   Дрібне посилання під описом і шторка на місці: воно потрібне тим
   небагатьом, хто помітив неточність, і не має відволікати решту. */
.pp-fix{ margin:0 0 20px; }
.pp-fix__link{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:var(--fs-md); color:var(--muted); list-style:none;
  text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:4px; transition:color .16s ease, text-decoration-color .16s ease;
}
.pp-fix__link::-webkit-details-marker{ display:none; }
.pp-fix__link:hover{ color:var(--navy); text-decoration-color:var(--gold); }
.pp-fix[open] .pp-fix__link{ color:var(--navy); }

/* Кнопка "Надіслати" у формі правки: та сама, що в решті форм картки, і з
   висотою, придатною для пальця. */
.pp-fix__send{ min-height:44px; padding:12px 24px; }

.pp-fix__form{
  margin-top:14px; padding:18px; background:var(--white);
  border:1px solid var(--ink-12);
  display:flex; flex-direction:column; gap:14px; align-items:flex-start; max-width:520px;
}
.pp-fix__field{ display:flex; flex-direction:column; gap:6px; width:100%; font-size:var(--fs-sm); color:var(--muted); }
.pp-fix__field select,
.pp-fix__field input,
.pp-fix__field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--ink-12); border-radius:var(--r-field);
  background:var(--white); color:var(--dark); font-family:var(--font-base);
  font-size:var(--fs-base); font-weight:var(--fw-regular); line-height:1.45;
}
.pp-fix__field select{ height:48px; padding:0 12px; }
.pp-fix__field textarea{ resize:vertical; min-height:76px; }
.pp-fix__field :focus-visible{ outline:2px solid var(--navy); outline-offset:1px; }

/* Пастка для ботів: людина її не бачить і не може сфокусувати. */
.pp-fix__trap{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.pp-fix__note{ margin:0; font-size:var(--fs-sm); line-height:1.45; color:var(--navy); }

/* ---------------------------------------------------------------
   НИЖНЯ СМУГА НА ТЕЛЕФОНІ.

   На десктопі ціна, агент і форма їдуть з людиною в липкій колонці. На
   телефоні колонки немає: усе стоїть одне під одним, і поки людина
   дочитує характеристики, ціна з кнопкою лишаються десь угорі.

   Скло, а не суцільний фон: під смугою видно, що сторінка триває, і вона
   не читається як кінець екрана.
   --------------------------------------------------------------- */
.pp-bar{ display:none; }

@media (max-width:900px){
  .pp-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    /* 56 px смуги плюс безпечна зона: унизу екрана iPhone живе системна
       риска, і без цього відступу кнопки опинялись під нею. */
    min-height:56px; padding:0 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);
  }

  .pp-bar[hidden]{ display:none; }

  .pp-bar__l{ min-width:0; display:flex; flex-direction:column; gap:2px; }
  .pp-bar__price{ font-family:var(--font-brand); font-size:var(--fs-h4); line-height:1.1; font-weight:var(--fw-bold); color:var(--dark); }
  .pp-bar__code{ padding:0; border:0; background:none; font-family:inherit; font-size:var(--fs-xs); line-height:1; color:var(--muted); text-align:left; cursor:pointer; white-space:nowrap; }
  .pp-bar__code b{ color:var(--dark); font-weight:var(--fw-bold); }

  .pp-bar__r{ flex:none; display:flex; gap:8px; }
  .pp-bar__call,
  .pp-bar__write,
  .pp-bar__view{
    display:inline-flex; align-items:center; justify-content:center;
    height:44px; padding:0 14px; border:0; border-radius:var(--r-ctrl);
    font-family:inherit; font-size:var(--fs-md); font-weight:var(--fw-bold);
    text-decoration:none; cursor:pointer; white-space:nowrap;
  }
  .pp-bar__call{ background:var(--navy); color:var(--white); }
  .pp-bar__view{ background:var(--gold); color:var(--navy); }
  .pp-bar__write{ background:transparent; color:var(--navy); border:1px solid var(--navy); }

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

  /* ЛАУНЧЕРА НА ЦІЙ СТОРІНЦІ НЕМАЄ.

     Три липкі шари на 390 - хедер, лаунчер і смуга - і кнопка "Надіслати
     запит" під ними не була видна взагалі, а коло лаунчера лягало на
     текст згоди (074 21:1x). Усе, що вмів лаунчер, тепер робить смуга:
     подзвонити - кнопкою, написати - шторкою. */
  body:has(.pp-bar) .cl{ display:none; }

  /* Форма закінчується вище за смугу, а не під нею: кнопку "Надіслати
     запит" має бути видно цілком, без прокрутки навпомацки. */
  body:has(.pp-bar) #pp-form{ padding-bottom:calc(56px + env(safe-area-inset-bottom) + 16px); }
}

/* ---------------------------------------------------------------
   ШТОРКА "НАПИСАТИ" (мобільна).

   Месенджери й "Записатись на перегляд" одним списком, знизу - там, де
   палець. Розмітка - resources/views/object/show.blade.php.

   Б-9: хрестик 44 px, Esc, клік по підкладці; сторінка під шторкою не
   гортається (спільний замок FLock), і замок знімається при закритті.
   --------------------------------------------------------------- */
.pp-write{ position:fixed; inset:0; z-index:140; display:flex; align-items:flex-end; }
.pp-write[hidden]{ display:none; }
.pp-write__backdrop{ position:absolute; inset:0; background:rgba(0,29,75,.45); }
.pp-write__box{
  position:relative; width:100%;
  padding:20px 16px calc(16px + env(safe-area-inset-bottom));
  background:var(--white); border-top:1px solid var(--ink-12);
  display:flex; flex-direction:column; gap:8px;
  max-height:80dvh; overflow-y:auto;
}
.pp-write__close{
  position:absolute; top:4px; right:6px; width:44px; height:44px;
  display:grid; place-items:center;
  border:0; background:none; color:var(--muted); font-size:26px; line-height:1; cursor:pointer;
}
.pp-write__close:focus-visible{ outline:2px solid var(--navy); outline-offset:-2px; }
.pp-write__title{ margin:0 44px 8px 0; font-size:var(--fs-h4); font-weight:var(--fw-bold); }
.pp-write__act{
  display:flex; align-items:center; justify-content:center;
  height:48px; padding:0 16px; border:1px solid var(--navy); border-radius:var(--r-ctrl);
  background:transparent; color:var(--navy); cursor:pointer;
  font-family:inherit; font-size:var(--fs-base); font-weight:var(--fw-medium); text-decoration:none;
}
.pp-write__act--gold{ background:var(--gold); border-color:var(--gold); color:var(--navy); }
.pp-write__act:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }

/* На ПК шторки немає: там і смуги немає - ціна, агент і форма їдуть
   з людиною в липкій колонці. */
@media (min-width:901px){
  .pp-write{ display:none; }
}

/* ЗАПАС ДЛЯ БРАУЗЕРІВ БЕЗ aspect-ratio (Safari до 15).

   Висоту блока з фото тримає ТІЛЬКИ aspect-ratio: своєї висоти в нього
   немає, а <img> усередині лежить absolute і теж нічого не додає. Браузер,
   який про aspect-ratio не знає, робить блок заввишки нуль - фото зникає
   зовсім, текст підтягується вгору.

   Саме це Вадим і зняв 18.09 на iPad у Safari: картки з ціною, назвою й
   метрами, і жодного знімка. У Chrome на тих самих ширинах (1440, 1024,
   820, 768, 390) битих зображень нуль - різниця не в даних, а в движку.

   aspect-ratio зʼявився в Safari 15 (вересень 2021). Нижче - класичний
   запас через padding-top: висота = ширина × (висота/ширина пропорції).
   Сучасні браузери цього блока навіть не читають.
   .pp-gallery - 16/10
 */
@supports not (aspect-ratio: 16 / 11) {
  .pp-gallery{padding-top:62.5%;}
}

/* ============================================================
   NAV - спільна навігація (шапка-пігулка).
   Самодостатній компонент: розмітка у resources/views/partials/nav.blade.php,
   стилі тут. Файл підключається автоматично самим партіалом через @push('styles').

   --nav-counter = 1/zoom (фолбек 1 - у tokens.css на :root). scale(1/zoom)
   нейтралізує zoom фрейма, тож навбар рендериться 1:1. top теж множимо на
   counter, щоб 24px лишались справжніми 24px від краю після множення zoom-ом.
   width задаємо у frame-просторі, але рендер = width × zoom × counter = width
   (zoom і counter скорочуються). Саме тому ширину контейнера сюди не можна
   підставити як є: .container рендериться --content × zoom, а навбар - рівно
   стільки, скільки написано. Щоб вийшла та сама ширина, ділимо на counter
   (тобто множимо на zoom) - див. width нижче.
   (Самі значення --nav-counter по брейкпойнтах - у style.css, бо це частина
   глобальної zoom-системи фрейму.)
   ============================================================ */
/* МАТОВЕ СКЛО В ШАПЦІ.

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

   Ледь помітно, без "ефекту": 72% білизни, розмиття 14, трохи насиченості -
   щоб колір під склом не сірів. Жодних відблисків і градієнтів.

   Де скла немає - там, де під ним білий фон: розмивати білий нема сенсу,
   видно лише те, що текст став гіршим. */
/* ШИРИНА ОСТРОВА = ШИРИНА КОНТЕНТУ, ПОКИ КОНТЕНТ ШИРШИЙ.

   Було рівно 890px на будь-якому вікні. Заміряно 18.09 на проді
   (.nav проти .container, обидва в реальних пікселях):

     вікно 1600: контейнер 1280, навбар 890   (по 195px з боку повз шапку)
     вікно 1440: контейнер 1200, навбар 890   (по 155px)
     вікно 1366: контейнер  992, навбар 890   (по  51px)
     вікно 1280: контейнер  886, навбар 890   (збіг)
     вікно 1024: контейнер  650, навбар 890   (острів ширший за контент)

   Тобто на великих вікнах повз шапку їхали чужі картки: адреси й ціни
   стояли на одному рівні з меню, лише збоку. Робимо ширину контейнера,
   але не вужче за сьогоднішні 890: інакше на 1024 острів став би 650px,
   і пункти меню туди просто не влізли б.

   Ділення на --nav-counter - це множення на zoom фрейма (див. шапку
   файлу). Без нього на 13" вийшло б 1140 замість 992, тобто острів
   виліз би за контент замість збігтися з ним.

   Нижче 900px діє окреме правило в @media - width:calc(100% - 32px),
   і воно лишається як було.

   Z-INDEX ЛИШАЄТЬСЯ 5, І ЦЕ НАВМИСНО.

   Підняття до 100 перевірено 18.09 на проді, elementFromPoint у центрі
   шапки:

     карта на весь екран (.cat-split__map, z-index 60)
       z-index 5: під курсором DIV.fk-cluster, шапка знизу
       z-index 100: під курсором A.nav, шапка накрила карту
     шторка фільтрів над картою на телефоні (.cat-ffback, z-index 44)
       z-index 5: під курсором DIV.cat-ffback, шапка знизу
       z-index 100: під курсором A.nav__icon, шапка стирчить крізь затемнення

   Плюс body.loc-lock .searchbar (home.css) навмисно піднятий до 6, щоб
   випадалка локації не різалась шапкою. Усе, що вище за 5, стоїть вище
   свідомо; 5 тут не "замало", а рівно стільки, скільки треба. */
.nav{position:fixed;top:calc(24px * var(--nav-counter));left:50%;transform:translateX(-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:rgba(255,255,255,.72);-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 rgba(0,29,75,.10);z-index:5;}

/* Прокручена сторінка - щільніше скло.

   Угорі, над фото hero, шапка навмисно майже прозора: вона там частина
   кадру. Але щойно під нею починає їхати вміст, прозорість перетворюється
   на накладання: рядок пошуку просвічує крізь меню, і текст двоїться.

   Тому в прокрутці - біле скло 85 % з розмиттям і тонкою лінією знизу.
   Клас вішає nav.js за позицією прокрутки.

   85 % ПЕРЕВІРЕНО І ЗАЛИШАЄТЬСЯ. У ТЗ 18.09 стояло, що крізь скло видно
   чужі адреси й ціни. Зняв смугу самої шапки (її rect, масштаб 3:1) на
   проді, вікно 1600, каталог квартир, прокрутка 200 / 420 / 600 / 800 /
   1100 - під склом іде і текст карток, і фото: жодного разу нічого не
   читається, лише ледь помітний сірий градієнт. Адреси карток справді
   стоять на одному рівні з меню (їх rect 17-55 проти шапки 24-80), але
   збоку від неї, а не під нею - це лікується шириною, не склом. Тож скло
   тут не міняємо. */
.nav.is-stuck{
  background:rgba(255,255,255,.85);
  -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 rgba(0,29,75,.12);
}

/* Браузер без скла (старий Firefox, режим економії) отримує щільний білий:
   напівпрозорий фон без розмиття - це просто погано читаний текст. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav{background:rgba(255,255,255,.95);}
  .nav.is-stuck{background:#fff;}
}
.nav__logo{display:flex;align-items:center;flex:none;}
/* max-width:none - знімаємо глобальний img{max-width:100%}, що стискав широкий
   горизонтальний логотип (viewBox 96×16) до кількох пікселів у flex-навбарі */
.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;}

/* Обране: бейдж-лічильник у куті іконки. Ставить FFav (js/favorites-store.js)
   з localStorage; поки обраного немає - [hidden]. */
.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;}

/* ============================================================
   МЕНЮ-ПАНЕЛЬ - відкривається бургером на будь-якій ширині.
   Одна розмітка (partials/nav-drawer.blade.php) на ПК і на телефон:
   на ПК - панель 360px справа на всю висоту, на телефоні - на весь екран.
   Нічого не ховається медіазапитом: склад пунктів однаковий скрізь.
   ============================================================ */
.nav-drawer{display:block;position:fixed;inset:0;z-index:120;}
.nav-drawer[hidden]{display:none;}
.nav-drawer__backdrop{position:absolute;inset:0;background:rgba(0,29,75,.55);
  opacity:0;transition:opacity .25s ease;}
.nav-drawer.is-open .nav-drawer__backdrop{opacity:1;}

/* Панель: navy-скло, виїжджає справа.

   Скло, а не суцільна заливка: під меню лишається видно сторінку, з якої
   людина його відкрила, і зрозуміло, що вона нікуди не пішла. Так само
   зроблені шапка при прокрутці й лаунчер - більше ніде на сайті скла
   немає (118/146).

   Без підтримки backdrop-filter - суцільний navy: напівпрозорий фон без
   розмиття дав би нечитабельний текст поверх фотографій. */
.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:translateX(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:rgba(0,29,75,.94);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  }
}

/* Лаунчер лежить вище за меню (z-index 150 проти 120) і накривав собою
   правий нижній кут панелі. Поки меню відкрите, його немає: одна кнопка
   зв'язку поверх іншого способу зв'язатись - це не вибір, а перешкода. */
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:rgba(255,255,255,.10);}
.nav-drawer__close:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* Гортається саме цей блок, а не сторінка під ним.

   На iOS панель на всю висоту без власного overflow-y не гортається
   взагалі: body заблокований, а всередині панелі прокрутки немає - меню
   виглядає завислим, і половини пунктів не видно. */
.nav-drawer__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-bottom:8px;}

/* Підпис секції: 12px, не капс - у меню з чотирнадцяти пунктів він
   потрібен як межа між групами, а не як окремий заголовок. */
.nav-drawer__cap{margin:16px 0 4px;font-size:12px;line-height:1.2;
  font-weight:var(--fw-regular);color:rgba(255,255,255,.55);}
.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;}
/* display:flex вище перебивав атрибут hidden, і "Кабінет клієнта" бачили
   всі, а не тільки ті, у кого він є. */
.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);}

/* МОВА Й ВАЛЮТА - ЧІПАМИ.

   Випадайка в панелі 360px відкривалась поверх телефону й виглядала
   системним елементом; трьох значень вона й не варта. Чіпи однакові за
   розміром, активний - золотою заливкою по 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;}

/* МОВА, ВАЛЮТА І ЗВʼЯЗОК - завжди внизу панелі, поза прокруткою.

   Спершу мова стояла в загальному списку, і на екрані 900 пікселів чіпи
   опинялись нижче краю: людина бачила чотирнадцять розділів і жодної
   мови - рівно та скарга, з якої почалась переробка. Тепер список
   гортається сам по собі, а мова, валюта й телефон закріплені. */
.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:rgba(255,255,255,.10);border-color:var(--gold);}
.nav-drawer__msg-ic:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* На телефоні панель - на весь екран (100dvh: адресний рядок Safari
   інакше зʼїдає низ), із запасом під безпечну зону. */
@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;}

  /* Значок на око лишається 32 px, а пальцю дістається 44: дотик ловить не
     коло, а прозорий прямокутник навколо нього (норма дотику - 44). Розмір
     і вигляд не змінились, тож шапка виглядає так само.

     Проміжок 12 замість 8 - щоб області сусідніх значків торкались, а не
     налазили: 32 + 6 + 6 = 44, і між ними лишається рівно нуль. Інакше
     тап біля краю відкривав би не те, у що людина цілилась. */
  .nav__right{gap:12px;}
  .nav__icon{position:relative;}
  .nav__icon::after{content:'';position:absolute;inset:-6px;border-radius:50%;}
}

/* Прокрутку під панеллю тримає спільний замок FLock (body.fk-lock у
   style.css) - той самий, що в галереях і шторках. Свого класу в меню
   більше немає: два різні замки знімали один одного. */

/* =====================================================================
   КАРТА (partials/map.blade.php)

   Один блок на три сторінки: картка обʼєкта, сторінка ЖК, сторінка офісу.
   Стилі лежали всередині property.css, який сторінка офісу не підключає, -
   і карта там показувалась без них: смуга OpenStreetMap лізла поверх мапи,
   а замість значка "i" у кутку в тексті стояли самотні трикутник і літера.

   Тому файл окремий і його підключає сам блок карти: хто вставив карту,
   той отримав і стилі, без окремої згадки на кожній сторінці.
   ===================================================================== */

/* ---------- карта обʼєкта і ЖК ----------
   Вбудований перегляд OpenStreetMap приносить власну смугу внизу з
   авторством, посиланням "повідомити про проблему" і проханням підтримати
   проєкт. На телефоні вона займає третину висоти й закриває саме те, заради
   чого карту відкривають.

   Смугу ховаємо: кадр робимо вищим за видиму частину рівно на її висоту.
   Авторство при цьому не зникає - воно своє, дрібним рядком у нижньому
   кутку, з обома обовʼязковими посиланнями. */
.fk-map{
  position:relative;
  /* `clip`, а не тільки `hidden`. `hidden` робить блок прокручуваним - і
     браузер справді прокручує його сам, коли кадр усередині отримує фокус:
     карта зʼїжджає на 52 пікселі вгору, а підпис авторства повисає над
     нижнім краєм. `clip` просто відрізає зайве й прокрутки не створює.
     Рядок із `hidden` лишаємо запасним для старих браузерів. */
  overflow:hidden;
  overflow:clip;
}
.fk-map__frame{
  position:absolute; left:0; top:0; width:100%;
  /* Кадр вищий за видиму частину рівно на висоту смуги OpenStreetMap -
     так вона опиняється за нижнім краєм.

     52px, а не 26: смуга не має сталої висоти. На вужчому екрані її текст
     ("Повідомити про проблему | © Учасники OpenStreetMap ❤ Підтримайте
     проєкт. Умови користування") переноситься на другий рядок, і половина
     смуги знову лізе на карту. Беремо висоту двох рядків - тоді сховано в
     будь-якому разі. */
  height:calc(100% + 52px); border:0;
}
/* Фільтр плиток (saturate/brightness/contrast) тут був і його прибрано.
   Кольори він приглушував правильно, але ціна виявилась зависокою: фільтр
   на цілий шар змушує браузер перемальовувати КОЖНУ плитку на кожен рух
   карти, і перетягування починає смикатись. Стриманіші кольори варті того,
   щоб зробити їх у самих плитках (векторний стиль, крок 2 у 134 п.9), а не
   поверх готових. */

/* Авторство карти. За ліцензією ODbL його прибирати не можна, а рядком
   через пів карти воно з'їдає той самий кадр, заради якого карту й
   відкрили. Тому значок "i" у кутку, що розкривається під курсором,
   дотиком або з клавіатури - ліцензія такий згорнутий вигляд дозволяє,
   поки сам значок видно.

   Без скрипта навмисно: та сама розмітка стоїть у партіалі карти й у
   карті каталогу, і поведінка, написана двічі, розійдеться. */
.fk-map__attr{
  position:absolute; right:6px; bottom:6px; z-index:2; margin:0;
  display:flex; align-items:flex-end; gap:6px; flex-direction:row-reverse;
}
.fk-map__attr-i{
  flex:none; width:20px; height:20px; padding:0;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.8); color:var(--navy);
  font:700 12px/20px var(--font-ui, inherit); cursor:pointer;
}
.fk-map__attr-i:hover{ background:#fff; }
.fk-map__attr-i:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.fk-map__attr-txt{
  display:none; margin:0; padding:2px 7px; border-radius:2px;
  background:rgba(255,255,255,.9);
  font-size:var(--fs-xs); line-height:1.5; color:rgba(20,20,20,.55); white-space:nowrap;
}
.fk-map__attr:hover .fk-map__attr-txt,
.fk-map__attr:focus-within .fk-map__attr-txt{ display:block; }
.fk-map__attr a{ color:inherit; text-decoration:none; }
.fk-map__attr a:hover{ text-decoration:underline; }
.fk-map__attr a:focus-visible{ outline:2px solid var(--dark); outline-offset:2px; }

/* Мітка. Стоїть у центрі кадру вістрям на точку: зсуваємо на пів ширини
   вбік і на всю висоту вгору, щоб у точку впиралось саме вістря, а не
   середина краплі. filter замість box-shadow - тінь має повторювати
   форму краплі, а не її прямокутник. */
.fk-map__pin{
  position:absolute; left:50%; z-index:2; pointer-events:none;
  /* Не 50%, а на 26 пікселів нижче. Кадр карти на 52 пікселі вищий за
     видиму частину (там ховається смуга OpenStreetMap), і сама точка
     припадає на центр КАДРУ, тобто на половину цих 52 нижче за центр
     видимого прямокутника. Без цієї поправки мітка стоїть поруч із
     будинком, а не на ньому. */
  top:calc(50% + 26px);
  transform:translate(-50%, -100%);
  filter:drop-shadow(0 2px 3px rgba(0,29,75,.35));
}

/* ---------------------------------------------------------------
   КАРТА В ПОТОЦІ НЕ ЗАБИРАЄ ЖЕСТ (074 21:12).

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

   На ПК миша нічого не "застрягає", тож там карта лишається живою і
   кнопки немає.
   --------------------------------------------------------------- */
.fk-map__open{ display:none; }
.fk-map__close{ display:none; }

@media (max-width:768px){
  /* Не вище за 45 відсотків екрана: карта - довідка, а не сторінка. */
  .fk-map[data-map-embed]{ height:min(45dvh, 340px) !important; touch-action:pan-y; }
  .fk-map[data-map-embed] .fk-map__frame{ pointer-events:none; }

  .fk-map__open{
    position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:3;
    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(--navy); cursor:pointer;
    font-family:inherit; font-size:var(--fs-md); font-weight:var(--fw-bold);
    box-shadow:0 2px 8px rgba(0,29,75,.20);
  }
  .fk-map__open[hidden]{ display:none; }

  /* Повний екран: карта живе, сторінка під нею заблокована (FLock). */
  .fk-map[data-map-embed].is-full{
    position:fixed; inset:0; z-index:140; height:100dvh !important;
    margin:0; touch-action:none;
  }
  .fk-map[data-map-embed].is-full .fk-map__frame{ pointer-events:auto; }

  .fk-map__close{
    position:absolute; top:12px; right:12px; z-index:4;
    width:44px; height:44px; display:grid; place-items:center;
    border:1px solid var(--ink-12); border-radius:var(--r-ctrl);
    background:var(--white); color:var(--navy);
    font-family:inherit; font-size:26px; line-height:1; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,29,75,.20);
  }
  .fk-map__close[hidden]{ display:none; }
}

/* =====================================================================
   "ШУКАЮТЬ ТАКОЖ" - три підписані рядки.

   Плитки лишились ті самі, що були (щоб блок не виглядав чужим на
   сторінці), змінилась будова: замість однієї купи - рядки з підписами.
   ===================================================================== */

.also-rows { margin: 40px 0 0; }

.also-rows__h2 {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
}

.also-rows__row + .also-rows__row { margin-top: 12px; }

/* Підпис - дрібний і тихий: він пояснює рядок, а не змагається з
   посиланнями за увагу. */
.also-rows__label {
  display: block;
  margin-bottom: 6px;
  font-size:var(--fs-sm);
  color: rgba(20, 20, 20, .7);
}

.also-rows__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.also-rows__link {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--ink-08);
  border-radius: var(--r-card);
  font-size: var(--fs-base);
  color: var(--dark);
  text-decoration: none;
}

.also-rows__link:hover { border-color: var(--gold); }
.also-rows__link:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

@media (max-width: 640px) {
  /* На телефоні рядок гортається вбік, а не переноситься: три рядки по
     шість плиток стовпчиком з'їдають екран цілком. */
  .also-rows__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px 2px;
    scrollbar-width: none;
  }

  .also-rows__list::-webkit-scrollbar { display: none; }
  .also-rows__link { flex: 0 0 auto; }
}

/* Смуга згоди. Fixed - тож нічого не зсуває; на телефоні стає стовпчиком і
   лишає місце під системну смугу (safe-area). Z-index вищий за плаваючу
   кнопку дзвінка (.cl, 150) - згода має бути зверху й перекривати її. */
.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 rgba(0,29,75,.18);
}
.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:rgba(255,255,255,.45); 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;}

/* На телефоні смуга займала майже чверть екрана (152 px із 667 на iPhone SE)
   і закривала те, заради чого людина прийшла. Тому тут вона компактна:
   дрібніший кегль, тісніші відступи. Текст лишається повністю - ховати або
   різати його не можна, це згода; місце віддає оформлення, а не зміст.
   Кнопки при цьому не меншають, а ростуть до 44 px: їх треба натиснути. */
@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;}
}

/* Пункт "Куки" в підвалі. Кнопка, бо нікуди не веде, але виглядати має
   як сусідні посилання: людина шукає його очима серед них (360 §1). */
.dark__cookies{ background:none; border:0; padding:0; font:inherit; color:inherit;
  cursor:pointer; text-decoration:none; }
.dark__cookies:hover{ text-decoration:underline; }