@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@400;500;600;700&display=swap');

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

   Фірмовий шрифт NAMU-1990 (за ТЗ). Покласти файли у css/fonts/ і розкоментувати —
   тоді він автоматично підхопиться першим у стеку --font-brand, Manrope лишиться fallback.
@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;}
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;}
.h-sec {font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-h1);font-weight:var(--fw-medium);}
.price-xl{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 i{width:6px;height:6px;border-radius:50%;background:var(--ink-28);display:block;}
.dots i.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;}

/* =================== HEADER + HERO =================== */
.hero{position:relative;height:1180px;}
.hero__bg{position:absolute;top:0;left:0;right:0;height:580px;z-index:1;
  background:
    radial-gradient(95% 95% at 50% 45%, rgba(41, 98, 177, 0.26) 0%, rgba(35, 110, 196, 0.48) 100%),
    linear-gradient(180deg, rgba(10,18,32,.38) 0%, rgba(13,22,38,.26) 45%, rgba(10,18,32,.42) 100%),
    var(--hero-bg-fallback) url("../img/photos/faktor-hero-1440x580.png") center/cover no-repeat;}
.hero__white{position:absolute;left:0;right:0;top:580px;bottom:0;background:var(--white);z-index:2;}
.hero__wave{position:absolute;left:0;top:502px;width:1440px;height:108px;z-index:2;}
.hero__wave svg{display:block;width:1440px;height:108px;}

/* Навбар живе всередині .frame, який стискається zoom-ом під вузькі екрани. Але
   навбар не повинен дрібнішати разом із макетом — він тримає реальні 890px і
   звужується ЛИШЕ коли вікно само дістає до його країв. responsive.js віддає
   --nav-counter = 1/zoom (фолбек 1 — у tokens.css на :root, НЕ тут, інакше
   локальне значення затінить живе від JS). scale(1/zoom) нейтралізує zoom
   фрейма → навбар рендериться 1:1. top теж множимо на counter, щоб 24px
   лишались справжніми 24px від краю після множення zoom-ом.
   width задаємо у frame-просторі, але рендер = width × zoom × counter = width
   (zoom і counter скорочуються), тож тут БЕЗ counter: поки вікно ширше за навбар
   — рівно 890px; щойно впритул — (вікно − 40px), майже вся ширина, поля ~20px. */
.nav{position:fixed;top:calc(24px * var(--nav-counter));left:50%;transform:translateX(-50%) scale(var(--nav-counter));transform-origin:top center;width:min(890px, calc(100vw - 40px));height:56px;background:var(--white);border-radius:var(--r-nav);display:flex;align-items:center;padding:0 20px;gap:24px;box-shadow:0 10px 34px var(--ink-08);z-index:5;}
.nav__logo{display:flex;align-items:center;}
.nav__logo img{height:16px;width:auto;display:block;}
.nav__links{display:flex;gap:24px;margin-left:24px;}
.nav__links a{font-size:var(--fs-base);letter-spacing:var(--ls-base);color:var(--slate);}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:18px;}
.nav__icon{display:grid;place-items:center;width:32px;height:32px;}
.nav__lang{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-base);letter-spacing:var(--ls-base);white-space:nowrap;}

/* ============================================================
   РЯДОК ПОШУКУ (hero) — 4 контролі: локація · тип · ціна · кнопка.
   Один горизонтальний рядок, контролі заввишки 44px (як у решти hero).
   Кольори/радіуси — через токени; пікер локацій будується в app.js.
   ============================================================ */
.searchbar{position:absolute;top:504px;left:50%;transform:translateX(-50%);width:1180px;display:flex;align-items:center;gap:14px;z-index:5; margin-top:30px}

/* спільна «оболонка» контролю: поле/селект/ціна */
.fk-field{height:44px;background:var(--field);border:1px solid var(--border-field);border-radius:var(--r-field);
  transition:border-color .15s,box-shadow .15s;}
.fk-field:focus-within,.fk-field.is-open{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-08);}

.fk-in{border:none;background:transparent;font-family:var(--font-base);font-size:var(--fs-base);letter-spacing:var(--ls-base);color:var(--dark);outline:none;}
.fk-in::placeholder{color:var(--muted);}
.fk-ic-cd{color:var(--muted);flex:none;}

/* 1. ЛОКАЦІЯ */
.fk-loc{position:relative;flex:2.4 1 360px;min-width:0;}
.fk-loc__field{display:flex;align-items:center;gap:8px;padding:0 14px;cursor:text;overflow:hidden;}
.fk-ic-pin{color:var(--muted);flex:none;}
.fk-loc__in{flex:1;min-width:90px;}
.fk-chips{display:inline-flex;align-items:center;gap:6px;flex:none;}
.fk-chip{display:inline-flex;align-items:center;background:var(--navy);overflow:hidden;white-space:nowrap;flex:none;}
.fk-chip__kind{font-size:9px;font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--white-60);background:var(--white-06);padding:6px 8px;}
.fk-chip__label{color:var(--white);font-weight:var(--fw-semibold);font-size:12.5px;padding:0 6px 0 8px;}
.fk-chip__x{border:none;background:var(--white-22);color:var(--white);cursor:pointer;margin-left:3px;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.fk-chip__x:hover{background:var(--white-55);}
.fk-chip-more{display:inline-flex;align-items:center;background:var(--chip-bg);color:var(--dark);font-size:12.5px;font-weight:var(--fw-bold);padding:7px 10px;white-space:nowrap;cursor:pointer;flex:none;}

/* дропдаун пікера */
.fk-pop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:50;background:var(--white);border:1px solid var(--line);border-radius:var(--r-field);box-shadow:0 16px 40px var(--ink-14);padding:10px;}
.fk-pop[hidden]{display:none;}
.fk-tabs{display:flex;gap:8px;margin-bottom:10px;}
.fk-tab{flex:1;height:36px;border:1px solid var(--border-field);border-radius:var(--r-field);background:var(--white);color:var(--dark);font-family:var(--font-base);font-size:12.5px;font-weight:var(--fw-semibold);cursor:pointer;}
.fk-tab.is-on{background:var(--navy);color:var(--white);border-color:var(--navy);}
.fk-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.fk-cats[hidden]{display:none;}
.fk-cat{cursor:pointer;font-family:var(--font-base);font-size:12.5px;font-weight:var(--fw-semibold);border:none;padding:8px 15px;border-radius:var(--r-pill);background:var(--pick-cat);color:var(--muted);transition:background .15s,color .15s;}
.fk-cat.is-on{background:var(--navy);color:var(--white);}
.fk-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:10px;}
.fk-crumbs[hidden]{display:none;}
.fk-crumb{font-size:12.5px;color:var(--muted);text-decoration:none;font-weight:var(--fw-semibold);cursor:pointer;}
.fk-crumb-sep{color:var(--ink-28);font-size:12.5px;}
.fk-list{max-height:340px;overflow:auto;margin:0 -4px;}
.fk-loc-head{padding:12px 10px 5px;font-size:11px;font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.fk-locrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-field);cursor:pointer;}
.fk-locrow:hover{background:var(--soft);}
.fk-box{width:18px;height:18px;border-radius:var(--r-field);flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--white);border:1.5px solid var(--ink-28);}
.fk-box.is-checked{background:var(--navy);border-color:var(--navy);}
.fk-box svg{color:var(--white);}
.fk-box img{display:block;}
.fk-locrow__label{flex:1;font-size:13.5px;color:var(--dark);font-weight:var(--fw-semibold);}
.fk-locrow__label .hl{background:var(--hl-bg);color:var(--hl-fg);border-radius:var(--r-field);padding:0 1px;}
.fk-locrow__label .sub{color:var(--muted);font-weight:var(--fw-regular);}
.fk-locrow__count{font-size:13px;color:var(--muted);}
.fk-locrow__drill{color:var(--muted);flex:none;}

/* 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:14px;font-weight:var(--fw-bold);}
.fk-sel-wrap--cur .fk-ic-cd{position:absolute;right:6px;top:50%;transform:translateY(-50%);pointer-events:none;}
.fk-div{width:1px;height:26px;background:var(--pick-div);flex:none;}
.fk-price__from,.fk-price__to{width:0;flex:1;min-width:0;padding:0 14px;font-size:14px;}

/* 4. ЗНАЙТИ */
.searchbar .fk-search{flex:0 0 auto;height:44px;padding:0 36px;border-radius:var(--r-field);font-weight:var(--fw-bold);}
.searchbar .fk-search:hover{background:var(--navy-hover);}

.hero__label{position:absolute;top:660px;left:50%;transform:translateX(-50%);height:48px;padding:0 28px;border-radius:100px;background:var(--chip-bg);display:inline-flex;align-items:center;font-size:var(--fs-base);letter-spacing:var(--ls-base);z-index:3;}
.hero__words{position:absolute;top:752px;left:0;right:0;text-align:center;z-index:3;}
.hw{display:block;color:var(--hero-word);line-height:var(--lh-tight);margin-bottom:20px;}
.hw sup{font-size:var(--fs-lg);letter-spacing:var(--ls-lg);color:var(--hero-sup);vertical-align:super;margin-left:10px;font-weight:var(--fw-regular);top:-1.3em;position:relative;}
.hw-img{display:inline-block;width:72px;height:50px;border-radius:var(--r-ctrl);background:var(--img-fallback) url("../img/photos/residential-complex-dusk.jpg") center/cover no-repeat;vertical-align:middle;margin:0 16px;}
.hw--1{transform:translateX(-22px);}
.hw--2{transform:translateX(-150px);color:var(--dark);}
.hw--3{transform:translateX(-19px);}
.hw--4{transform:translateX(47px);}

/* контент на фото: eyebrow + H1 + підзаголовок + CTA (ТЗ §3,5) */
.hero__content{position:absolute;left:0;right:0;top:80px;height:424px;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 24px;}
/* надзаголовок «Купівля · Продаж · Супровід»: декоративні лінії по боках + крапки-роздільники */
.hero__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px;font-size:var(--fs-sm);letter-spacing:.22em;text-transform:uppercase;color:var(--white-60);}
.hero__eyebrow::before,.hero__eyebrow::after{content:"";width:34px;height:1px;background:var(--white-60);}
.hero__eyebrow span{position:relative;}
.hero__eyebrow span+span{padding-left:30px;}
.hero__eyebrow span+span::before{content:"";position:absolute;left:13px;top:50%;width:3px;height:3px;border-radius:50%;background:var(--white-60);transform:translateY(-50%);}
.hero__h1{font-family:var(--font-brand);font-size:clamp(26px,3.7vw,50px);font-weight:var(--fw-bold);line-height:1.12;letter-spacing:-.015em;color:var(--white);}
.hero__sub{margin:18px auto 0;max-width:560px;font-size:var(--fs-lg);line-height:var(--lh-relaxed);color:var(--white-82);}
.hero__cta{margin-top:32px;display:flex;justify-content:center;gap:15px;}
.hero__btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 38px;border-radius:var(--r-pill);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);cursor:pointer;transition:opacity .2s;}
.hero__btn:hover{opacity:.92;}
.hero__btn--primary{background:var(--white);color:var(--navy);font-weight:var(--fw-bold);letter-spacing:.005em;}
.hero__btn--ghost{background:var(--white-06);color:var(--white);border:1.5px solid var(--white-60);}

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

/* суцільна картка (Новобудови / Забудовники) */
.card-solid{position:relative;height:var(--card-h);background:var(--soft);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;}
.card-solid .body{flex:1;}
.card-solid .img{position:relative;height:308px;background:var(--placeholder) var(--placeholder-img) center/cover no-repeat;}
.card-solid .body{padding:24px 16px;}
.card-titlerow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;}
.card-title{margin:0;}
.card-solid .card-title{font-size:var(--fs-h4);line-height:var(--lh-snug);letter-spacing:var(--ls-h4);max-width:235px;}
.card-sub{color:var(--muted);}
.card-price{margin-top:6px;}

/* картка новобудови — розширює .card-solid:
   рік на фото; у тілі — назва, район, далі компактний «підвал» (ціна + «грн/м²»
   в один рядок, розділювач, «Перший внесок» + «Детальніше»). Тіло — flex-колонка,
   підвал притиснутий донизу (margin-top:auto), тож ряди карток вирівняні попри
   різну висоту назв. Висота 505 підігнана під найвищий контент (дворядкова назва),
   щоб відступ над підвалом був мінімальним, а overflow:hidden нічого не обрізав. */
.card-solid--nb{display:flex;flex-direction:column;}
.card-solid--nb .img{flex:none;}
.card-solid--nb .body{flex:1;display:flex;flex-direction:column;padding:20px 16px;}
.card-solid--nb .card-titlerow{margin-bottom:8px;}

/* оверлеї на фото */
.nb-year{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:var(--r-badge);background:var(--white);color:var(--navy);font-size:var(--fs-base);letter-spacing:var(--ls-base);font-weight:var(--fw-semibold);box-shadow:0 4px 14px var(--ink-14);}
.nb-dev{position:absolute;top:16px;right:16px;z-index:2;width:64px;height:64px;border-radius:50%;background:var(--white);box-shadow:0 4px 14px var(--ink-14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;}
.nb-dev img{width:26px;height:26px;display:block;}
.nb-dev b{font-size:var(--fs-xs);line-height:var(--lh-none);letter-spacing:var(--ls-xs);font-weight:var(--fw-semibold);color:var(--navy);}

/* «підвал» картки новобудови — вертикальний стек: ціна + «грн/м²», тонкий
   горизонтальний розділювач, далі ряд «Перший внесок» (в один рядок, без переносу)
   і «Детальніше» дрібнішим кеглем праворуч. Притиснутий донизу (margin-top:auto),
   тож ряди карток вирівняні попри різну висоту назв. */
.nb-foot{margin-top:auto;padding-top:6px;display:flex;flex-direction:column;gap:12px;}
.nb-price-block{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;}
.nb-price{font-size:var(--fs-lg);line-height:var(--lh-snug);letter-spacing:var(--ls-lg);font-weight:var(--fw-semibold);color:var(--navy);white-space:nowrap;}
.nb-permeter{color:var(--muted);font-size:var(--fs-base);letter-spacing:var(--ls-base);white-space:nowrap;}
.nb-div{height:1px;background:var(--line);}
.nb-act{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.nb-pay{flex:none;display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:var(--r-pill);background:var(--pay-pill);white-space:nowrap;color:var(--navy);font-size:var(--fs-xs);line-height:var(--lh-snug);letter-spacing:var(--ls-xs);font-weight:var(--fw-medium);}
.nb-pay img{flex:none;width:18px;height:18px;display:block;}
.nb-detail{flex:none;display:inline-flex;align-items:center;gap:6px;color:var(--navy);font-size:var(--fs-sm);letter-spacing:var(--ls-sm);font-weight:var(--fw-medium);white-space:nowrap;}
.nb-detail img{width:14px;height:14px;display:block;transition:transform .2s;}
.nb-detail:hover img{transform:translateX(3px);}

/* лістинг (Квартири / Будинки) — зведена до спільної висоти (--card-h), як і
   суцільні картки: фіксоване фото зверху, тіло заповнює решту, ряд характеристик
   притиснутий донизу (margin-top:auto), тож усі картки рівні по висоті. */
.card-list{position:relative;height:var(--card-h);display:flex;flex-direction:column;}
/* Висота фото — 240px на повноцінних моніторах (≥1440), плавно нижча на
   менших (16.7vw ≈ 240 при 1440), з нижньою межею 200px. Картка стає трохи
   компактнішою на маленьких моніторах ПОВЕРХ загального zoom — без різких
   стрибків і без переходу на горизонтальну стрічку. */
.card-list .img{position:relative;flex:none;height:clamp(200px,16.7vw,240px);background:var(--placeholder) var(--placeholder-img) center/cover no-repeat;border-radius:var(--r-card);overflow:hidden;}
.card-row{display:flex;justify-content:space-between;align-items:center;margin-top:24px;}
.card-list .name{margin-top:14px;}
.card-list .addr{margin-top:8px;color:var(--muted);}
.card-list .specs{margin-top:auto;padding-top:18px;display:flex;gap:18px;}
.spec{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-lg);letter-spacing:var(--ls-lg);}
.spec img{width:20px;height:20px;display:block;}

/* =================== ЕКСКЛЮЗИВНІ =================== */
/* .excl завширшки рівно з .container (1344) і відцентрований — секція «в рамках
   контейнера», як решта. Координати стиснуто на 96px відносно старого 1440-макета:
   ліва частина (фото, ліва стрілка, крапки) лишилась на місці, права (інфо, праве
   прев'ю, права стрілка) підтягнута всередину. Бічні прев'ю визирають по 142px із
   КРАЇВ КОНТЕЙНЕРА; overflow:hidden обрізає їх локально саме по межах контейнера. */
/* .excl — слайдер на АБСОЛЮТНИХ координатах (left:227/748/1202px під 1344px).
   Ширину НЕ звужуємо (праві елементи вилізли б) — натомість стискаємо весь блок
   через transform:scale(--excl-scale), щоб він візуально зрівнявся з вужчою
   колонкою контенту на малих екранах, зберігши пропорції. scale не змінює
   зайнятий у потоці простір, тож від'ємним margin-bottom прибираємо порожнечу,
   що лишається під стиснутим блоком (620px × (1 − scale)). */
.excl{position:relative;width:var(--content-fixed);margin:48px auto 0;height:620px;overflow:hidden;
  transform:scale(var(--excl-scale));transform-origin:top center;
  margin-bottom:calc(620px * (var(--excl-scale) - 1));}
/* aspect-ratio тримає пропорцію фото при зміні height у max-height брейкпоінтах:
   ширина виводиться з висоти, тож фото не сплющується, а зменшується цілком */
.excl__img{position:absolute;top:0;left:227px;width:435px;height:568px;aspect-ratio:435/568;border-radius:var(--r-card);overflow:hidden;background:linear-gradient(135deg,var(--excl-ph-1),var(--excl-ph-2));}
.excl__thumb{position:absolute;top:151px;width:211px;height:266px;aspect-ratio:211/266;border-radius:var(--r-card);overflow:hidden;background:var(--placeholder);opacity:.7;}
.excl__img>img,.excl__thumb>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.excl__thumb--r{left:1202px;}
.excl__thumb--l{left:-69px;}
.excl__info{position:absolute;top:154px;left:748px;width:437px;}
.excl__tags{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.excl__tags .heart img{width:24px;height:24px;}
.excl__info .price-xl{margin-bottom:24px;}
.excl__name{margin-bottom:8px;}
.excl__addr{color:var(--muted);margin-bottom:24px;max-width:321px;}
.excl__specs{display:flex;gap:16px;margin-bottom:40px;}
.excl__arrow{position:absolute;top:260px;}
.excl__arrow--l{left:48px;}
.excl__arrow--r{left:1248px;}
.excl__dots{position:absolute;top:524px;left:444px;transform:translateX(-50%);}
.excl__dots i{background:var(--white-55);}
.excl__dots i.on{background:var(--white);width:6px;border-radius:50%;}

/* =================== ПІДБІР =================== */
.pick__head{text-align:center;max-width:664px;margin:0 auto 56px;}
.pick__head p{color:var(--muted);margin:12px auto 0;max-width:540px;}
.pick__cols{display:flex;justify-content:center;gap:130px;}
.pick__form{width:549px;}
.field{border-bottom:1px solid var(--border-soft);padding:14px 0 28px;margin-bottom:20px;}
.field label{display:block;color:var(--muted);}
.field .val{margin-top:10px;color:var(--dark);}
.pick__form .btn{margin-top:24px;padding:0 46px;}
.pick__contacts{width:320px;}
.pick__contacts h4{margin-bottom:10px;color:var(--muted);font-weight:var(--fw-regular);}
.pick__contacts a{display:block;margin-top:8px;}
.pick__contacts a.tg{color:var(--muted);text-decoration:underline;}
.pick__contacts a.wa{color:var(--dark);text-decoration:underline;font-weight:var(--fw-medium);}

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

/* =================== ФУТЕР =================== */
/* Розділювач + карта сайту вирівняні з рештою макета: колонки починаються
   від лівого краю .container (як секції вище і темний футер нижче), а не з
   відступом 114px. Вертикаль на ритмі секцій: 80px над лінією + 80px під нею
   = 160px до контенту (як проміжок між .section). Сітка — 5 рівних колонок на
   повну ширину .container (repeat(5,1fr)): однакові поля зліва й справа, а
   зайвий простір іде в ширші проміжки між колонками, а не в порожнечу праворуч. */
.footer-divider{height:1px;background:var(--line);margin:var(--sec-gap-half) 0 0;}
.sitemap{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:var(--sec-gap-half) 0 0;}
.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:890px;margin:0 auto;}
.seo__in h3{font-weight:var(--fw-medium);margin-bottom:12px;}
.seo__in p{color:var(--muted);}
.seo__more{color:var(--dark);font-weight:var(--fw-regular);margin-top:22px;display:inline-block;text-decoration:underline;text-underline-offset:3px;}

.dark{background:var(--navy);color:var(--white);padding:var(--sec-gap-half) 0 0;}
.dark .container{min-height:460px;display:flex;flex-direction:column;}
.dark__logo{margin-bottom:60px;}
.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 a{display:block;color:var(--white-55);margin-bottom:7px;font-size:var(--fs-base);letter-spacing:var(--ls-base);}
.dark__cols a:hover{color:var(--white);}
.dark__bottom{display:grid;grid-template-columns:227px 228px 228px 226px 228px 1fr;align-items:center;margin-top:auto;padding:40px 0 28px;font-size:var(--fs-base);letter-spacing:var(--ls-base);}
.dark__bottom .muted2{color:var(--white-55);white-space:nowrap;}
.dark__switch{justify-self:end;display:flex;gap:12px;}
.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;}

/* =================== ІНТЕРАКТИВ (JS) =================== */
/* слайдер у зображенні картки */
.card-solid .img,.card-list .img{overflow:hidden;}
.slides{display:flex;height:100%;transition:transform .45s cubic-bezier(.4,0,.2,1);}
.slide{flex:0 0 100%;height:100%;}
.arrow-circle{cursor:pointer;opacity:0;transition:opacity .2s,background .2s;}
.card-solid:hover .arrow-circle,.card-list:hover .arrow-circle{opacity:1;}
.img-dots{opacity:0;transition:opacity .2s;}
.card-solid:hover .img-dots,.card-list:hover .img-dots{opacity:1;}
.dots i{cursor:pointer;transition:width .25s,background .25s;}
.heart{cursor:pointer;}
.arrow-lg,.excl__arrow{cursor:pointer;}

/* тост */
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) 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:translateX(-50%) translateY(0);}

/* =================== КАТАЛОГ (сторінка лістингу) =================== */
.cat-header{position:relative;height:80px;}

.cat-crumbs{display:flex;align-items:center;gap:8px;margin-top:18px;color:var(--muted);font-size:var(--fs-sm);letter-spacing:var(--ls-sm);}
.cat-crumbs .crumb-home{display:inline-flex;align-items:center;opacity:.8;}
.cat-crumbs .crumb-home .logo{height:11px;width:auto;display:block;}
.cat-crumbs .sep{display:grid;place-items:center;color:var(--ink-40);}
.cat-crumbs .sep svg,.cat-crumbs .sep img{width:12px;height:12px;}
.cat-crumbs .cur{color:var(--dark);}

/* Заголовок, швидкі теги, панель фільтрів та обрані чипи каталогу — окремий
   самодостатній компонент .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;color:var(--dark);font-size:var(--fs-base);letter-spacing:var(--ls-base);cursor:pointer;}
.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 (нижче — планшет/моб., окрема історія) */

/* =================== ЕКСКЛЮЗИВНІ: АДАПТАЦІЯ ПО ВИСОТІ (13") ===================
   .excl зверстано в абсолютних координатах із фіксованою height:620px (центр-фото
   568px). zoom стискає лише ширину-композицію, тож на НИЗЬКИХ екранах (13" ноутбуки
   ~800px фізичної висоти) секція лишається завеликою по вертикалі й змушує зайвий
   скрол. Тригер max-height (а не max-width) реагує саме на коротке вікно — MacBook
   13", типові 1280×800 / 1366×768. Усю вертикальну геометрію стиснуто ~×0.79
   пропорційно (top/height/dots), горизонталь не чіпаємо. */
@media (max-height:820px){
  .excl{height:492px;margin-top:36px;}
  .excl__img{height:450px;width:auto;}      /* width:auto → пропорція з aspect-ratio */
  .excl__thumb{top:120px;height:211px;width:auto;}
  .excl__info{top:122px;}
  .excl__arrow{top:206px;}
  .excl__dots{top:416px;}
}
@media (max-height:720px){   /* 1366×768 та нижче — стискаємо ще щільніше */
  .excl{height:430px;margin-top:28px;}
  .excl__img{height:394px;width:auto;}
  .excl__thumb{top:105px;height:184px;width:auto;}
  .excl__info{top:106px;}
  .excl__arrow{top:180px;}
  .excl__dots{top:364px;}
  /* шрифти інфо-блоку фіксовані й zoom-ом не стискаються — на короткому фото
     підтискаємо внутрішні відступи, щоб кнопка не вилазила нижче знімка */
  .excl__info .price-xl{margin-bottom:16px;}
  .excl__addr{margin-bottom:16px;}
  .excl__specs{margin-bottom:24px;}
}

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

  /* фон-фото хедера — на всю ширину екрану (контент hero лишається в межах 1440) */
  .hero__bg{left:50%;right:auto;width:100vw;margin-left:-50vw;}

  /* темний футер: ФОН на всю ширину через псевдоелемент, колонки лишаються центровані в 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;}
}

/* >>> ТИМЧАСОВА ПІДСВІТКА КОНТЕЙНЕРА — щоб бачити межі й поля. Прибрати потім.
   Червона рамка = край .container; підпис показує його ширину. */
/*.container{outline:2px solid red !important; position:relative;}*/
/*.container::before{content:"container"; position:absolute; top:0; left:0;*/
/*  background:red; color:#fff; font:11px/1.4 monospace; padding:1px 5px; z-index:9999;}*/