/*
 * Theme — Main CSS
 * Only design tokens (CSS variables) + minimal base.
 * All project-specific styles are written per project.
 */

/* ── Design tokens ──────────────────────────────────────────────────────── */
/* Джерело істини — UI kit у Figma ( сторінка «01 · Foundations» ).
   Імена змінних повторюють імена змінних дизайнера, щоб макет і код
   можна було звіряти один в один. */
:root {
    /* Поверхні */
    --bg-canvas:    #042f5f; /* фон сторінки */
    --bg-elevated:  #0a3560; /* картки й підняті блоки */
    --bg-subtle:    #021f3f; /* фон секцій, темніший за полотно */
    --bg-card:      #22303e; /* підкладка картки-стопки */
    --bg-field:     #05233f; /* поле форми у спокої */
    --bg-field-alt: #072a4b; /* поле у фокусі / заповнене */
    --on-solid:     #01152c; /* текст на золотій заливці */

    /* Межі */
    --border-subtle: #0b4179;
    --border-strong: #145694;
    --border-field:  #1b4c7e;
    --border-field-hover: #3a6e9e;

    /* Текст */
    --text-primary:   #ffffff;
    --text-secondary: #c3d6e9;
    --text-muted:     #92b6d8;
    --text-soft:      rgba(255, 255, 255, .74); /* опис на темній картці */

    /* Золото */
    --gold-solid: #bd895f;
    --gold-text:  #ddbe93;
    --gold-line:  rgba(189, 137, 95, .4);
    --gold-line-soft: rgba(189, 137, 95, .2); /* межа картки-стопки */
    --gold-1:     #e3c79b; /* світла стопа градієнта */
    --gold-2:     #c4966a;
    --gold-3:     #a8784e; /* темна стопа */
    --gold-gradient:       linear-gradient(180deg, #e3c79b 0%, #c4966a 52%, #a8784e 100%);
    --gold-gradient-hover: linear-gradient(180deg, #f1dcbc 0%, #d6ac80 52%, #b98a5c 100%);
    --gold-glow:  0 8px 28px -6px rgba(189, 137, 95, .34), 0 0 48px 0 rgba(227, 199, 155, .18);
    --gold-sheen: linear-gradient(90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0) 42%,
                    rgba(255, 246, 230, .5) 50%,
                    rgba(255, 255, 255, 0) 58%,
                    rgba(255, 255, 255, 0) 100%);

    /* Орнамент надзаголовка: два контурні ромби 7×7, крок 7px.
       Використовується як маска, колір бере з --gold-solid. */
    --eyebrow-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14' viewBox='0 0 26 14'%3E%3Cpath fill='white' fill-rule='evenodd' d='M9.95 2.05 14.9 7 9.95 11.95 5 7Z M9.95 3.464 13.486 7 9.95 10.536 6.414 7Z M16.95 2.05 21.9 7 16.95 11.95 12 7Z M16.95 3.464 20.486 7 16.95 10.536 13.414 7Z'/%3E%3C/svg%3E");

    /* Статуси квартир */
    --status-available: #2e8b57;
    --status-reserved:  #c98a2e;
    --status-sold:      #a8a39a;

    /* Теракота — акцент в ілюстративних блоках */
    --terracotta-300: #dbb79e;
    --terracotta-400: #cca07e;

    --white: #ffffff;
    --black: #000000;

    /* Типографіка */
    --font-body:    'Manrope', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-heading: 'Manrope', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --line-height:  1.6;

    /* Розкладка: 1280 контенту в межах 1920 */
    --container-width:   1280px;  /* ширина КОНТЕНТУ, без бічних відступів */
    --container-padding: 20px;
    --section-gap:       110px;

    /* UI */
    --radius:      2px;  /* кнопки, поля, чипи, картки */
    --radius-pill: 999px;
    --transition:  .24s ease-out;
    --menu-duration: .38s;                             /* мобільне меню */
    --menu-motion: var(--menu-duration) cubic-bezier(.22, .61, .36, 1);

    /* Шапка / підвал.
       --viewport-offset рахується в js/main.js: шапка + адмінбар */
    --viewport-offset: 92px;
    --header-height:     70px;  /* стан Solid, після скролу */
    --header-height-top: 90px;  /* стан Transparent, над hero */
    --header-bg:     rgba(2, 21, 43, .58);
    --header-shadow: 0 10px 15px rgba(1, 21, 44, .4);
    --card-shadow:   0 -18px 52px 0 rgba(0, 8, 20, .25);
    --footer-bg:    #01152c;  /* фон футера з макета */
    --footer-color: #92b6d8;  /* приглушений текст: тег-лайн, копірайт */

    /* Z-indexes */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    400;

    --shadow:        0 8px 24px rgba(0, 0, 0, .22);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html {
    font-size: 16px;
    scroll-padding-top: var(--header-height);
}

body {
    font-family:      var(--font-body);
    font-size:        16px;
    line-height:      var(--line-height);
    color:            var(--text-primary);
    background-color: var(--bg-canvas);
    display:          flex;
    flex-direction:   column;
    min-height:       100vh;
    -webkit-font-smoothing: antialiased;
}

/* Заголовки: у дизайн-системі вони Medium/SemiBold, а не Bold */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.28;
    color:       var(--text-primary);
}
h1 { font-size: 44px; font-weight: 600; line-height: 1.18; letter-spacing: .02em; }
h2 { font-size: 34px; font-weight: 600; line-height: 1.24; letter-spacing: -.01em; }
h3 { font-size: 28px; line-height: 1.29; letter-spacing: -.018em; }
h4 { font-size: 22px; line-height: 1.36; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

a { color: inherit; transition: color var(--transition); }

.site      { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }

.container {
    width:     100%;
    /* --container-width — ширина контенту з макета. Відступи додаються
       поверх неї: інакше на широкому екрані контент виходить вужчим
       за макет на 2×--container-padding і верстка не збігається 1:1. */
    max-width: calc(var(--container-width) + var(--container-padding) * 2);
    padding:   0 var(--container-padding);
    margin:    0 auto;
}

/* Screen reader text — required by WordPress */
.screen-reader-text {
    clip:     rect(1px, 1px, 1px, 1px);
    height:   1px;
    overflow: hidden;
    position: absolute;
    width:    1px;
}
.screen-reader-text:focus {
    clip:       auto;
    height:     auto;
    left:       5px;
    top:        5px;
    padding:    15px 23px;
    background: #f1f1f1;
    color:      #21759b;
    display:    block;
    font-weight: 700;
    z-index:    100000;
}

/* Іконка соцмережі — самодостатній блок: розмір через font-size батька
   ( 1em ), а не вкладеність у чужий блок. Модифікатор --l — крупний варіант
   для футера ( 18px замість типових 16 ). */
.social-ico {
    width:  1em;
    height: 1em;
}
.social-ico--l { font-size: 18px; }

/* Socials */
.socials {
    display:    flex;
    gap:        10px;
    margin:     0;
    padding:    0;
    list-style: none;
}
.socials__link {
    position:        relative;
    display:         grid;
    place-items:     center;
    width:           34px;
    height:          34px;
    border-radius:   50%;
    border:          1px solid var(--gold-line);
    color:           var(--gold-solid);
    transition:      color var(--transition), background-color var(--transition), border-color var(--transition);
}
/* Видиме коло лишається 34px (так у макеті), а зона натискання
   доростає до 44px невидимим псевдоелементом — інакше на телефоні
   в іконку важко влучити. */
.socials__link::after {
    content:  "";
    position: absolute;
    inset:    -6px;
}

.socials__link:hover {
    color:            var(--on-solid);
    background-color: var(--gold-solid);
    border-color:     var(--gold-solid);
}

/* ── Перший екран внутрішньої сторінки ──────────────────────────────────── */
/* Спрощений родич .hero з головної: та сама схема (фото на всю ширину →
   скрим → надзаголовок → H1 → лід → текст → кнопки), але без відео,
   без смуги показників і нижчий — на внутрішній сторінці перший екран
   не має з'їдати весь viewport. Живе тут, а не в css/pages/*, бо
   розрахований на всі внутрішні сторінки (komertsiia — перша з них). */
.phero {
    position:   relative;
    display:    flex;
    align-items:flex-end;
    min-height: 620px;
    padding:    calc(var(--header-height-top) + 90px) 0 90px;
    overflow:   hidden;
    background: var(--bg-subtle);
    color:      var(--text-primary);
}
/* Без фото: сторінка може не мати кадру для першого екрана (поле порожнє).
   620px порожнього кольору з заголовком, притиснутим до низу, читаються як
   поламаний блок, тому режим без фото — це компактна шапка з контентом
   зверху й золотою волосяною лінією знизу, а не той самий бокс без картинки. */
.phero--flat {
    min-height:    0;
    align-items:   flex-start;
    padding:       calc(var(--header-height-top) + 76px) 0 70px;
    border-bottom: 1px solid var(--gold-line);
}
/* Підкладка під текстом потрібна лише поверх фото; на суцільному кольорі
   вона читається як пляма. */
.phero--flat .phero__headline::before { display: none; }

.phero__media {
    position:   absolute;
    inset:      0;
    z-index:    0;
    width:      100%;
    height:     100%;
    object-fit: cover;
}
/* Скрим прибитий зліва — там, де завжди текст, незалежно від висоти
   секції; вертикальний шар лише додає глибини знизу (та сама логіка,
   що й у .hero на головній). */
.phero__scrim {
    position: absolute;
    inset:    0;
    z-index:  1;
    /* Ті самі стопи, що в .hero на головній (css/pages/home.css) — щоб
       перший екран внутрішньої сторінки читався як той самий кадр. */
    background:
        linear-gradient(100deg,
          rgba(1, 21, 44, .64) 0%,
          rgba(1, 21, 44, .4)  35%,
          rgba(1, 21, 44, .14) 60%,
          rgba(1, 21, 44, 0)   78%),
        linear-gradient(180deg,
          rgba(1, 21, 44, .12) 0%,
          rgba(1, 21, 44, .22) 40%,
          rgba(1, 21, 44, .5)  75%,
          rgba(1, 21, 44, .58) 100%);
    pointer-events: none;
}
.phero__inner {
    position: relative;
    z-index:  2;
}
.phero__headline {
    position:       relative;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            26px;
}
/* Локальна підкладка під текстовим блоком.
   Загальний скрим секції взято з .hero головної — там під ним короткий
   заголовок і два рядки, а тут ще три абзаци тексту, і вони заходять на
   світлий фасад. Замість того щоб робити темнішим увесь кадр (і втратити
   фото), затемнюємо тільки зону тексту: радіальний градієнт, що згасає в
   нуль на краях, тому видимої межі панелі немає. Виступ за межі блоку
   (від'ємний inset) — щоб згасання відбувалось поза текстом. */
.phero__headline::before {
    content:  "";
    position: absolute;
    inset:    -64px -180px -48px;
    z-index:  -1;
    /* Радіуси рівно 50%/50% і центр 50% 50% — еліпс згасає в нуль точно на
       краях коробки. Будь-який більший радіус лишає на краю ненульове
       значення, і замість м'якої плями видно прямокутну панель. */
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(1, 21, 44, .74) 0%,
        rgba(1, 21, 44, .68) 45%,
        rgba(1, 21, 44, .38) 76%,
        rgba(1, 21, 44, 0)   100%);
    pointer-events: none;
}
.phero__title {
    margin:         0;
    font-size:      56px;
    font-weight:    500;
    line-height:    64px;
    letter-spacing: .56px;
    text-transform: uppercase;
    color:          var(--text-primary);
}
.phero__lead {
    margin:    0;
    max-width: 760px;
    color:     var(--gold-text);
}
.phero__text {
    margin:    0;
    max-width: 760px;
    /* Над фото, а не на суцільному фоні: приглушений --text-secondary
       тут з'їдає й без того невисокий контраст. */
    color:     var(--text-primary);
}
.phero__text p { margin: 0 0 14px; }
.phero__text p:last-child { margin: 0; }
.phero__actions {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         20px;
    margin-top:  6px;
}

@media (max-width: 1024px) {
    .phero        { min-height: 520px; padding: calc(var(--header-height-top) + 76px) 0 70px; }
    .phero--flat  { min-height: 0; padding: calc(var(--header-height-top) + 64px) 0 56px; }
    .phero__title { font-size: 40px; line-height: 48px; }
}
/* На вузькому екрані крихти лягають упритул до надзаголовка — верхній
   відступ рахуємо від шапки + висоти смуги крихт, а не від шапки. */
@media (max-width: 768px) {
    .phero        { min-height: 460px; padding: calc(var(--header-height) + 84px) 0 56px; }
    .phero--flat  { min-height: 0; padding: calc(var(--header-height) + 76px) 0 48px; }
    .phero__title { font-size: 30px; line-height: 38px; }
    /* Кнопки в стовпчик: дві поруч не вміщаються вже на ~640px контенту,
       а .btn--block нижче 768 і так розтягує кожну на всю ширину. */
    .phero__actions { gap: 12px; width: 100%; }
    /* Горизонтальний шар скриму розрахований на широкий екран: на 375px
       його 78% — це 292px, і кінці рядків лягають на голе фото. Нижче
       розтягуємо шар на всю ширину; вертикальний лишається як на головній. */
    .phero__scrim {
        background:
            linear-gradient(180deg,
              rgba(1, 21, 44, .5)  0%,
              rgba(1, 21, 44, .62) 40%,
              rgba(1, 21, 44, .72) 75%,
              rgba(1, 21, 44, .78) 100%);
    }
    /* Блок і так майже на всю ширину — виступ за краї зайвий, а сама
       підкладка слабша: вертикальний скрим вище вже темніший за десктопний. */
    .phero__headline::before {
        inset:      -40px -20px -28px;
        background: radial-gradient(50% 50% at 50% 50%,
            rgba(1, 21, 44, .5)  0%,
            rgba(1, 21, 44, .44) 55%,
            rgba(1, 21, 44, .24) 80%,
            rgba(1, 21, 44, 0)   100%);
    }
}
@media (max-width: 480px) {
    .phero        { min-height: 420px; padding: calc(var(--header-height) + 72px) 0 48px; }
    .phero--flat  { min-height: 0; padding: calc(var(--header-height) + 68px) 0 40px; }
    .phero__title { font-size: 26px; line-height: 34px; }
}

/* ── Хлібні крихти ──────────────────────────────────────────────────────── */
/* Виводяться в header.php на всіх сторінках, крім головної.

   Колір — --text-secondary, а не --text-muted: на фоні полотна ( #042f5f )
   приглушений дає 6.3:1 і при 14px / вазі 400 читається слабко, особливо
   поряд із білою поточною сторінкою; secondary — ≈9:1. Вага 500 і нижній
   відступ — теж із цього: раніше текст сидів упритул до краю темного героя,
   смуга крихт виглядала обрізаною. */
.breadcrumbs {
    padding:     22px 0 14px;
    color:       var(--text-secondary);
    font-weight: 500;
}
/* Сторінка з повноширинним першим екраном (.phero): крихти лягають поверх
   фото, під прозорою шапкою, — інакше вони вставляють між шапкою й фото
   смугу кольору полотна, і кадр перестає бути таким, як на головній.
   Прив'язка — до .site, тому він position: relative (див. нижче). */
.breadcrumbs--over {
    position: absolute;
    top:      var(--header-height-top);
    left:     0;
    right:    0;
    z-index:  3;
    padding:  18px 0 0;
}
.breadcrumbs__list {
    display:    flex;
    flex-wrap:  wrap;
    align-items:center;
    gap:        8px 12px;
    margin:     0;
    padding:    0;
    list-style: none;
    font-size:  14px;
}
.breadcrumbs__item {
    display:     flex;
    align-items: center;
    gap:         8px 12px;
    min-width:   0;
}
/* Роздільник — шеврон, намальований бордюрами */
.breadcrumbs__item + .breadcrumbs__item::before {
    content:      "";
    flex:         0 0 auto;
    width:        5px;
    height:       5px;
    border-top:   1px solid currentColor;
    border-right: 1px solid currentColor;
    transform:    rotate(45deg);
    opacity:      .8;
}
.breadcrumbs__link {
    color:           inherit;
    text-decoration: none;
    transition:      color var(--transition);
}
.breadcrumbs__link:hover { color: var(--gold-text); }
.breadcrumbs__current {
    overflow:      hidden;
    color:         var(--text-primary);
    font-weight:   600;
    text-overflow: ellipsis;
    white-space:   nowrap;
    max-width:     min(60vw, 460px);
}

/* Варіант від Yoast SEO: він віддає вкладені <span>, а не список */
.breadcrumbs--yoast > .container > span {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         8px 12px;
    font-size:   14px;
}
.breadcrumbs--yoast a {
    color:           inherit;
    text-decoration: none;
    transition:      color var(--transition);
}
.breadcrumbs--yoast a:hover { color: var(--gold-text); }
.breadcrumbs--yoast .breadcrumb_last { color: var(--text-primary); font-weight: 600; }

/* Роздільник Yoast підмінено фільтром на порожній span — малюємо шеврон */
.breadcrumbs__sep {
    flex:         0 0 auto;
    width:        5px;
    height:       5px;
    border-top:   1px solid currentColor;
    border-right: 1px solid currentColor;
    transform:    rotate(45deg);
    opacity:      .8;
}

@media (max-width: 768px) {
    .breadcrumbs        { padding-top: 16px; }
    .breadcrumbs__list  { font-size: 13px; gap: 6px 10px; }
    .breadcrumbs__item  { gap: 6px 10px; }
    .breadcrumbs__current { max-width: 100%; }
    .breadcrumbs--yoast > .container > span { font-size: 13px; gap: 6px 10px; }
}

/* ── JetFormBuilder — глобальні дефолти ─────────────────────────────────── */
/* Подвійний клас — щоб перебити стилі плагіна без !important */
.jet-form-builder-message.jet-form-builder-message {
    margin:     0;
    padding:    0;
    border:     0;
    text-align: inherit;
    font-size:  14px;
    line-height: 1.5;
}
.jet-form-builder-message--success.jet-form-builder-message--success { color: #7fd0a5; }
.jet-form-builder-message--error.jet-form-builder-message--error     { color: #f0a0a0; }

/* ── CTA — глобальна секція з формою «Запис на перегляд» ─────────────────── */
/* Фон завжди той самий (декоративний візерунок з теми, не з адмінки) —
   тому немає варіанту з фото, як був раніше: за новим макетом це не
   контент, а частина оформлення, однакова на кожній сторінці. */
.cta {
    position:         relative;
    overflow:         hidden;
    padding:          88px 0;
    background-color: var(--bg-elevated);
    color:            var(--text-primary);
    border-top:       1px solid var(--gold-line);
    border-bottom:    1px solid var(--gold-line);
}

/* Хвилястий візерунок — один SVG (img/cta-pattern.svg, viewBox 1920×445,
   ті самі 4 лінії, що складав окремими шарами раніше, тепер зведені в
   один файл з правильними transform у самому SVG). Один шар замість
   чотирьох по-різному розташованих і повернених — картинка завжди
   масштабується як ціле, тому на вужчих секціях (планшет, мобільний)
   лінії рівномірно зменшуються разом із секцією, а не розповзаються
   відносно одна одної. */
.cta__pattern {
    position:          absolute;
    inset:             0;
    overflow:          hidden;
    pointer-events:    none;
    background-image:  url("../img/cta-pattern.svg");
    background-repeat: no-repeat;
    background-size:   100% 100%;
}

.cta__container {
    position:        relative;
    z-index:         1;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             40px;
}

.cta__content {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    max-width:      480px;
}
.cta__title {
    margin:         0;
    font-size:      36px;
    font-weight:    600;
    line-height:    44px;
    text-transform: uppercase;
}
.cta__subtitle {
    margin:      0;
    font-size:   16px;
    line-height: 26px;
    color:       var(--text-secondary);
}

/* Картка форми */
.cta__card {
    flex:          0 0 auto;
    width:         692px;
    max-width:     100%;
    display:       flex;
    flex-direction: column;
    gap:           20px;
    padding:       40px 44px;
    background:    var(--bg-subtle);
    border:        1px solid var(--border-field);
    border-radius: var(--radius);
}
.cta__card-title {
    margin:      0;
    font-size:   22px;
    font-weight: 500;
    line-height: 30px;
    color:       var(--text-primary);
}

/* ── Вивід JetFormBuilder (форма 42) ──────────────────────────────────────
   Розмітку самих полів генерує плагін — стилізуємо через його класи й
   через class_name, який задано полям в адмінці форми (cta__field--name,
   cta__field--phone, cta__consent, і class btn btn--shine на кнопці —
   реюз готового компонента з ui.css замість дублювання стилів кнопки). */
/* max-width замість «нехай тягнеться на всю картку»: пара «згода +
   кнопка» порахована на ~604px (стільки й лишає картка 692px із макета
   мінус паддінги) — на ширшій картці (адаптив, картка на всю ширину
   контейнера) той самий margin-left: auto в .field-type-submit-field
   розтягував порожній розрив між чекбоксом і кнопкою. Простіше зафіксувати
   ширину самої форми, ніж підбирати нову розкладку під кожну ширину картки. */
.cta__form .jet-form-builder {
    display:   flex;
    flex-wrap: wrap;
    gap:       20px 24px;
    max-width: 604px;
}
.cta__form .jet-form-builder-row {
    margin: 0;
}
.cta__form .field-type-text-field {
    flex: 1 1 260px;
}
/* Скло-підкладка лише для текстових полів — той самий клас
   .jet-form-builder__field-wrap є і в чекбокса, де такий вигляд
   (висота 64px, рамка, розмиття) не потрібен. */
.cta__form .field-type-text-field .jet-form-builder__field-wrap {
    display:                 flex;
    align-items:             center;
    gap:                     14px;
    height:                  64px;
    padding:                 0 20px;
    background:              rgba(2, 21, 43, .5);
    border:                  1px solid rgba(189, 137, 95, .38);
    border-radius:           var(--radius);
    backdrop-filter:         blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
/* class_name з адмінки форми (cta__field--name / --phone) осідає прямо на
   <input>, а не на .jet-form-builder__field-wrap навколо нього — тому
   іконку малюємо через :has(), а не звичайним нащадком. Скопуємо на
   .field-type-text-field — інакше той самий ::before чіплявся б і на
   .jet-form-builder__field-wrap чекбокса (той самий клас, інше поле). */
.cta__form .field-type-text-field .jet-form-builder__field-wrap::before {
    content:      "";
    flex:         0 0 auto;
    width:        20px;
    height:       20px;
    background-color: rgba(255, 255, 255, .78);
    mask-repeat:  no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.cta__form .field-type-text-field .jet-form-builder__field-wrap:has(.cta__field--name)::before {
    mask-image: url("../img/cta-icon-user.svg");
    -webkit-mask-image: url("../img/cta-icon-user.svg");
}
.cta__form .field-type-text-field .jet-form-builder__field-wrap:has(.cta__field--phone)::before {
    mask-image: url("../img/cta-icon-phone.svg");
    -webkit-mask-image: url("../img/cta-icon-phone.svg");
}
/* JetFormBuilder друкує на кожне текстове поле власний inline <style> з
   кольором/фоном (селектор виду .cb-XXXXX .jet-form-builder__field-wrap
   input) — специфічність 2 класи + тег, вище за прості 2 класи. Три
   класи в ланцюжку тут — не примха, а мінімум, щоб перебити плагін без
   !important. */
.cta__form .jet-form-builder-row .jet-form-builder__field {
    flex:        1 1 0;
    min-width:   0;
    height:      100%;
    padding:     0;
    font-family: inherit;
    font-size:   16px;
    line-height: 24px;
    color:       var(--text-primary);
    background:  none;
    border:      0;
    outline:     none;
}
.cta__form .jet-form-builder-row .jet-form-builder__field::placeholder {
    color: rgba(255, 255, 255, .78);
}

/* Чекбокс згоди. JetFormBuilder ховає сам <input> (opacity:0,
   position:absolute) і малює візуальний квадрат через ::before на
   сусідньому <span> — .jet-form-builder__field-label.for-checkbox
   :checked+span::before. Стилізуємо той самий ::before, а не input:
   правити появу елемента, якого не видно, немає сенсу. Ланцюжок з
   5 класів — навмисно: рівно стільки й потрібно, щоб перебити власний
   селектор плагіна (3 класи + span::before) без !important. */
/* padding: 13px 0 — не косметика: сам квадрат чекбокса 20px замалий для
   тач-цілі (мінімум 44px), а лейбл огортає і квадрат, і текст, тож саме
   висота лейбла і є фактичною зоною дотику. */
.cta__form .jet-form-builder-row.field-type-checkbox-field .jet-form-builder__field-label.for-checkbox {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     13px 0;
    cursor:      pointer;
}
.cta__form .jet-form-builder-row.field-type-checkbox-field .jet-form-builder__field-label.for-checkbox > span::before {
    width:            20px;
    height:           20px;
    border:           1px solid var(--border-strong);
    border-radius:    var(--radius);
    background-color: transparent;
    background-size:  12px 12px;
    transition:       background-color var(--transition), border-color var(--transition);
}
.cta__form .jet-form-builder-row.field-type-checkbox-field .jet-form-builder__field-label.for-checkbox :checked + span::before {
    background-color: var(--gold-solid);
    border-color:      var(--gold-solid);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5L8.5 14L15 6.5' fill='none' stroke='%2301152c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cta__form .jet-form-builder-row.field-type-checkbox-field .jet-form-builder__field-label.for-checkbox :focus-visible + span::before {
    outline:        2px solid var(--gold-text);
    outline-offset: 2px;
}
/* 14px, а не 12: це згода на обробку даних, а не виноска. На мобільному
   12px у --text-muted виявились найдрібнішим і найблідішим текстом секції —
   поруч із підписом про захист даних (15px) згода читалась як дрібний шрифт,
   якого «не мали помітити». Лишаємо її візуально другорядною відносно полів,
   але легко читабельною. Правило спільне для обох CTA — вигляд згоди на
   сайті має бути один. */
.cta__form .jet-form-builder-row.field-type-checkbox-field .jet-form-builder__field-label.for-checkbox span {
    font-size:   14px;
    line-height: 20px;
    color:       var(--text-secondary);
}

.cta__form .field-type-submit-field {
    flex:        0 0 auto;
    margin-left: auto;
}
/* JetFormBuilder друкує на це поле власний inline <style> з
   justify-content:flex-start (і на обгортку, і на саму кнопку) — це
   лишок від верстки, де кнопка була не на всю ширину. Три класи в
   ланцюжку — щоб перебити 2-класовий інлайн-селектор плагіна. */
.cta__form .jet-form-builder-row .jet-form-builder__action-button-wrapper {
    margin:          0;
    justify-content: center;
}
.cta__form .jet-form-builder-row .cta__submit {
    justify-content: center;
}

/* CTA — адаптація */
/* Розкладка полів у 2 колонки (ім'я+телефон в один ряд, згода+кнопка —
   в другий) сама по собі трималась нормально й на ширшій картці —
   max-width: 604px на .jet-form-builder (вище) не дає їй розтягуватись
   ширше, ніж порахована ширина з макета, тому окремо перекладати поля
   в стовпчик на ≤1024 більше не треба.

   Брейкпоінт саме 1280, а не звичний 1024: рядкова розкладка (текст
   480px + gap 40 + картка 692 + відступи контейнера 40) потребує
   мінімум ~1252px. На ширинах 1024–1252 рядок не вимикався, але й не
   вміщався — колонку тексту стискало нижче її 480px, і заголовок
   ламався на зайвий рядок замість акуратних двох. */
@media (max-width: 1280px) {
    .cta            { padding: 64px 0; }
    /* Центрувати треба ВЕСЬ блок як одне ціле (текст+картка разом), а не
       щось одне з двох усередині нього — інакше або текст лишається на
       всю ширину контейнера, а картка сиротіє окремо по центру нижче
       (два різних вирівнювання в одному місці), або навпаки. Тут
       .cta__container сам стає тим самим блоком 692px і сам центрується —
       текст і картка всередині просто на 100% його ширини, без власних
       max-width чи margin. */
    .cta__container {
        flex-direction: column;
        align-items:    center;
        gap:            36px;
        max-width:      692px;
        margin:         0 auto;
    }
    .cta__card    { width: 100%; padding: 32px; }
    .cta__title   { font-size: 30px; line-height: 38px; }

    /* За запитом: текст у .cta__content теж центрований, не лише сам блок.
       .eyebrow--left ховає правий ромбик (там був варіант зліва в
       рядковій розкладці) — тут, по центру, повертаємо його назад, щоб
       напис був симетричним. */
    .cta__content {
        align-items: center;
        text-align:  center;
    }
    .cta__content .eyebrow { justify-content: center; }
    .cta__content .eyebrow--left::after { display: block; }
}
@media (max-width: 768px) {
    .cta             { padding: 48px 0; }
    /* Центрування з ≤1280 тут навмисно скидаємо назад до лівого краю —
       на мобільному так читається природніше. */
    .cta__container  { align-items: flex-start; }
    .cta__content    { align-items: flex-start; text-align: left; }
    .cta__content .eyebrow { justify-content: flex-start; }
    .cta__content .eyebrow--left::after { display: none; }
    .cta__title      { font-size: 26px; line-height: 34px; }
    .cta__card       { padding: 24px; gap: 16px; }
    .cta__card-title { font-size: 18px; line-height: 26px; }

    .cta__form .jet-form-builder { gap: 12px; }
    .cta__form .field-type-text-field .jet-form-builder__field-wrap {
        height: 56px;
    }
}
/* Нижче ~620px пари «ім'я + телефон» і «згода + кнопка» вже не влазять
   поруч у природну ширину — без цього кнопка з margin-left: auto просто
   спливала праворуч під чекбоксом окремим рядком з розривом. */
@media (max-width: 620px) {
    .cta__form .field-type-text-field     { flex-basis: 100%; }
    .cta__form .field-type-checkbox-field { flex-basis: 100%; }
    .cta__form .field-type-submit-field   { flex-basis: 100%; margin-left: 0; }
    .cta__form .jet-form-builder__submit  { width: 100%; }
}


/* ── CTA-final — глобальна секція «Підберемо квартиру» ───────────────────
   Друга глобальна CTA поруч із .cta вище: та сама форма (Theme Options
   `cta_form`), інша подача — картка поверх фото, переваги під формою.
   Живе в main.css, а не в стилях сторінки: підключається на будь-якій
   сторінці через Theme\component( 'global/cta-final' ). ── */
.final {
    position:   relative;
    overflow:   hidden;
    padding:    98px 0;
    background: var(--bg-canvas);
    color:      var(--text-primary);
}
.final__media {
    position:   absolute;
    inset:      0;
    z-index:    0;
    width:      100%;
    height:     100%;
    object-fit: cover;
}
.final__scrim {
    position:       absolute;
    inset:          0;
    z-index:        1;
    background:     linear-gradient(180deg,
                        rgba(1, 21, 44, .42) 0%,
                        rgba(1, 21, 44, .3) 50%,
                        rgba(1, 21, 44, .5) 100%);
    pointer-events: none;
}
.final__inner {
    position: relative;
    z-index:  2;
}

/* Матова картка поверх фото — саме вона несе всю секцію. */
.final__card {
    display:                 flex;
    flex-direction:          column;
    align-items:             center;
    gap:                     40px;
    padding:                 52px 64px;
    background:              rgba(2, 21, 43, .6);
    border:                  1px solid rgba(189, 137, 95, .42);
    border-radius:           3px;
    box-shadow:              0 28px 70px 0 rgba(0, 10, 26, .5);
    backdrop-filter:         blur(27px);
    -webkit-backdrop-filter: blur(27px);
}

.final__head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    width:          100%;
    text-align:     center;
}
/* Той самий орнамент, що в «03 · Я вдома»: дві згасаючі лінії й ромб. */
.final__ornament {
    display:     flex;
    align-items: center;
    gap:         14px;
}
.final__ornament::before,
.final__ornament::after {
    content: "";
    width:   96px;
    height:  1px;
}
.final__ornament::before { background: linear-gradient(90deg, rgba(189, 137, 95, 0) 0%, rgba(189, 137, 95, .75) 100%); }
.final__ornament::after  { background: linear-gradient(90deg, rgba(189, 137, 95, .75) 0%, rgba(189, 137, 95, 0) 100%); }
.final__diamond {
    flex:       0 0 auto;
    width:      7px;
    height:     7px;
    background: var(--gold-solid);
    transform:  rotate(45deg);
}
.final__title { margin: 0; }

/* ── Форма ──────────────────────────────────────────────────────────────
   Розмітку дає JetFormBuilder (та сама форма, що в CTA), тому базові
   стилі полів/кнопки успадковуються від .cta__form у main.css — тут лише
   інша розкладка: усе в один ряд, поля по 340px, кнопка поруч. */
.final__form {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            18px;
    width:          100%;
}
.final__form .jet-form-builder {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    max-width:       none;
}
.final__form .jet-form-builder-row {
    flex:      0 0 auto;
    margin:    0;
    max-width: 100%;
}
/* JetFormBuilder друкує рядки в порядку «імʼя → телефон → згода → кнопка»,
   а в макеті кнопка стоїть у тому самому ряду, що й поля. Порядок у DOM
   не чіпаємо (він же йде в лист і в список заявок) — міняємо лише
   візуальний через order. */
.final__form .field-type-text-field   { width: 340px; order: 1; }
.final__form .field-type-submit-field { margin-left: 0; order: 2; }
.final__form .field-type-text-field .jet-form-builder__field-wrap { height: 64px; }
.final__form .jet-form-builder__submit { height: 64px; }
/* Згоди на обробку даних у макеті немає, але це вимога, а не декор —
   лишаємо, просто окремим рядком під полями і по центру. */
.final__form .field-type-checkbox-field {
    order:           3;
    flex-basis:      100%;
    display:         flex;
    justify-content: center;
}
/* Обгортки, які малює плагін, тягнуться на всю ширину рядка — без цього
   центрування вище не спрацьовує, чекбокс лишається біля лівого краю.
   Останній у ланцюжку — сам <label>: саме він розтягувався на 1150px,
   через що галочка з текстом сиділа біля лівого краю картки. */
.final__form .field-type-checkbox-field .jet-form-builder__field-wrap,
.final__form .field-type-checkbox-field .jet-form-builder__fields-group {
    width:           auto;
    justify-content: center;
}
/* Ланцюжок класів тут не для краси: у main.css той самий <label> ловить
   правило з .cta__form на п'ять класів (стилі форми ми свідомо переюзали),
   і коротший селектор програє йому за специфічністю. */
.final__form .jet-form-builder-row.field-type-checkbox-field .jet-form-builder__field-label.for-checkbox {
    justify-content: center;
}

.final__note {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin:      0;
    font-size:   15px;
    line-height: 22px;
    color:       rgba(255, 255, 255, .78);
}
.final__note-icon {
    flex:   0 0 auto;
    width:  16px;
    height: 16px;
}

.final__divider {
    width:  100%;
    height: 1px;
    background: linear-gradient(90deg,
                    rgba(189, 137, 95, .05) 0%,
                    rgba(189, 137, 95, .55) 50%,
                    rgba(189, 137, 95, .05) 100%);
}

/* ── Переваги ───────────────────────────────────────────────────────────── */
.final__benefits {
    display:    flex;
    width:      100%;
    margin:     0;
    padding:    0;
    list-style: none;
}
.final-benefit {
    flex:           1 1 0;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            12px;
    padding:        0 22px;
    text-align:     center;
}
/* Вертикальні розділювачі — між пунктами, не по краях. */
.final-benefit + .final-benefit { border-left: 1px solid transparent; }
.final-benefit + .final-benefit {
    border-image: linear-gradient(180deg,
                      rgba(189, 137, 95, 0) 0%,
                      rgba(189, 137, 95, .45) 50%,
                      rgba(189, 137, 95, 0) 100%) 1;
}
.final-benefit__icon {
    width:  30px;
    height: 30px;
}
.final-benefit__title {
    margin:      0;
    font-size:   16px;
    line-height: 26px;
    font-weight: 600;
    color:       var(--text-primary);
}
.final-benefit__text {
    margin:      0;
    font-size:   15px;
    line-height: 22px;
    color:       rgba(255, 255, 255, .72);
}

@media (max-width: 1024px) {
    .final       { padding: 72px 0; }
    .final__card { gap: 32px; padding: 40px 32px; }
    .final__form .field-type-text-field { width: 280px; }
}
/* Ряд «два поля + кнопка» вимагає ~1030px разом із проміжками — нижче
   цього поля стають вужчими за власний плейсхолдер із іконкою, тому
   форма переходить у стовпчик на всю ширину картки. */
@media (max-width: 900px) {
    .final__form .jet-form-builder-row,
    .final__form .field-type-text-field { width: 100%; flex-basis: 100%; }
    .final__form .jet-form-builder__submit { width: 100%; }
    /* Чотири переваги в ряд на планшеті — по ~150px на пункт, назва
       ламається на 2–3 рядки; далі сітка 2×2. */
    .final__benefits {
        display:               grid;
        grid-template-columns: repeat(2, 1fr);
        gap:                   28px 0;
    }
    .final-benefit + .final-benefit { border-image: none; border-left: 0; }
    .final-benefit:nth-child(even)  { border-left: 1px solid var(--gold-line-soft); }
}
@media (max-width: 768px) {
    .final       { padding: 56px 0; }
    .final__card { padding: 32px 24px; gap: 28px; }
    .final__ornament::before,
    .final__ornament::after { width: 56px; }
}
@media (max-width: 560px) {
    .final__benefits { grid-template-columns: 1fr; gap: 24px; }
    .final-benefit:nth-child(even) { border-left: 0; }
    .final-benefit  { padding: 0; }
}
@media (max-width: 480px) {
    .final       { padding: 44px 0; }
    .final__card { padding: 28px 18px; }
}

/* ── Попап «Запис на перегляд» ─────────────────────────────────────────────
   Модифікатор .popup--open перемикає видимість і замикає скрол сторінки
   на body (js/main.js) — той самий принцип, що й .header__panel--open
   ( css/components/header.css ) для мобільного меню, а не клас .is-open,
   яким керує лайтбокс на «Ході будівництва»: там немає нащадка, стиль якого
   мав би змінюватись разом зі станом, тут є ( .popup__dialog ), а для
   такої вкладеності методологія БЕМ визнає лише state-модифікатор
   ( .block--state .block__elem ), не довільний клас.

   Форма — та сама, що в .cta ( Theme\opt('cta_form') ), тому базові стилі
   полів і кнопки успадковуються від .cta__form через мікс-клас (той самий
   прийом, що в .final__form) — тут лише розкладка самого діалогу.

   Поява — opacity + visibility, а не display:none↔flex (display в
   transition участі не бере, тож без цього появу неможливо анімувати):
   той самий прийом, що вже є в .header-nav__sub ( css/components/header.css )
   для випадної підказки над шапкою. */
.popup {
    position:        fixed;
    inset:           0;
    z-index:         9999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         24px;
    opacity:         0;
    visibility:      hidden;
    transition:      opacity var(--transition), visibility var(--transition);
}
.popup--open {
    opacity:    1;
    visibility: visible;
}
body.has-popup { overflow: hidden; }

.popup__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(1, 21, 44, .82);
}

.popup__dialog {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    gap:            16px;
    width:          460px;
    max-width:      100%;
    max-height:     calc(100vh - 48px);
    overflow-y:     auto;
    padding:        32px;
    background:     var(--bg-subtle);
    border:         1px solid var(--border-field);
    border-radius:  var(--radius);
    /* Легкий підйом+масштаб услід за появою оверлея — діалог не просто
       спалахує в центрі, а ніби підпливає з невеликої відстані. */
    transform:      translateY(16px) scale(.98);
    transition:     transform var(--transition);
}
.popup--open .popup__dialog { transform: translateY(0) scale(1); }

/* 44px — мінімальна тач-ціль; хрестик малюємо ::before/::after, а не
   символом шрифту, щоб товщина лінії не залежала від font-family. */
.popup__close {
    position:      absolute;
    top:           12px;
    right:         12px;
    z-index:       1;
    width:         44px;
    height:        44px;
    padding:       0;
    background:    transparent;
    border:        0;
    color:         var(--text-primary);
    cursor:        pointer;
    transition:    color var(--transition);
}
.popup__close:hover,
.popup__close:focus-visible { color: var(--gold-text); }
.popup__close::before,
.popup__close::after {
    content:    "";
    position:   absolute;
    top:        50%;
    left:       50%;
    width:      18px;
    height:     2px;
    background: currentColor;
}
.popup__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.popup__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.popup__title {
    margin:      0;
    padding-right: 32px;
    font-size:   22px;
    font-weight: 500;
    line-height: 30px;
    color:       var(--text-primary);
}

/* .cta__form ставить кнопці margin-left: auto — у широкій картці CTA вона
   так лягає в той самий ряд, що й поля, притиснута праворуч. У попапі
   поля в один стовпчик (396px контенту замість 604), кнопка на власному
   рядку сама, і правий притиск виглядає як помилка розкладки, а не намір —
   центруємо саме тут, .cta__form в інших місцях показу не займаємо. */
.popup__form .field-type-submit-field {
    margin-left:  auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .popup          { padding: 16px; }
    .popup__dialog  { padding: 32px 24px; gap: 16px; }
    .popup__title   { font-size: 18px; line-height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .popup,
    .popup__dialog { transition: none; }
}

/* ── Лайтбокс ──────────────────────────────────────────────────────────────
   Повнорозмірний перегляд зображення поверх сторінки. Розмітку створює JS
   ( js/main.js, lightbox() ) — на сторінці лишаються лише тригери
   [data-lightbox] з адресою повного файлу.

   Стан і поява — за тими самими правилами, що в .popup вище: модифікатор
   .lightbox--open (є нащадки, чий стиль змінюється разом зі станом, тож
   методологія вимагає саме state-модифікатора) і opacity + visibility
   замість display:none↔flex, інакше появу неможливо анімувати.

   На «Ході будівництва» поки лишається власний .bs-lightbox: він
   синхронізований зі Slick-слайдером під собою. Переводиться на цей
   компонент окремим кроком — подія lightbox:change для цього вже є. */
.lightbox {
    position:        fixed;
    inset:           0;
    z-index:         9999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         56px 24px;
    opacity:         0;
    visibility:      hidden;
    /* .97, а не .94 як у старого .bs-lightbox: на світлих кресленнях і
       золотих заголовках сторінки залишок у 6% ще читався крізь фон. */
    background:      rgba(1, 21, 44, .97);
    transition:      opacity var(--transition), visibility var(--transition);
}
.lightbox--open {
    opacity:    1;
    visibility: visible;
}
body.has-lightbox { overflow: hidden; }

.lightbox__image {
    max-width:     100%;
    max-height:    100%;
    object-fit:    contain;
    border-radius: var(--radius);
}

.lightbox__close,
.lightbox__nav {
    position:      absolute;
    display:       grid;
    place-items:   center;
    width:         48px;
    height:        48px;
    padding:       0;
    background:    rgba(255, 255, 255, .1);
    border:        1px solid var(--border-field-hover);
    border-radius: 50%;
    cursor:        pointer;
    transition:    background-color var(--transition), border-color var(--transition);
}
.lightbox__close:hover,
.lightbox__nav:hover {
    background:   var(--gold-solid);
    border-color: var(--gold-solid);
}
.lightbox__close { top: 24px; right: 24px; }
.lightbox__close::before,
.lightbox__close::after {
    content:    "";
    position:   absolute;
    width:      18px;
    height:     2px;
    background: var(--text-primary);
}
.lightbox__close::before { transform: rotate(45deg); }
.lightbox__close::after  { transform: rotate(-45deg); }

.lightbox__nav::before {
    content:      "";
    position:     absolute;
    width:        12px;
    height:       12px;
    border-top:   2px solid var(--text-primary);
    border-right: 2px solid var(--text-primary);
}
.lightbox__nav--prev { left:  24px; }
.lightbox__nav--next { right: 24px; }
.lightbox__nav--prev::before { transform: translateX(3px) rotate(-135deg); }
.lightbox__nav--next::before { transform: translateX(-3px) rotate(45deg); }

.lightbox__counter {
    position:       absolute;
    bottom:         20px;
    left:           50%;
    transform:      translateX(-50%);
    color:          var(--text-muted);
    font-size:      14px;
    letter-spacing: .5px;
}

@media (max-width: 768px) {
    .lightbox { padding: 72px 12px; }
    /* Стрілки переїжджають під низ: по боках вони лягали б на саме
       зображення, яке тут займає майже всю ширину екрана. */
    .lightbox__nav       { top: auto; bottom: 16px; }
    .lightbox__nav--prev { left:  calc(50% - 64px); }
    .lightbox__nav--next { right: calc(50% - 64px); }
    .lightbox__counter   { bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox { transition: none; }
}

/* ── Плаваюча кнопка запису ( тільки мобільний ) ────────────────────────────
   Розмітка — pages/global/mobile-cta.php, показом керує js/main.js,
   mobileCta(). Це другий тригер того самого попапу, не окрема форма.

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

   Висоту тримаємо в межах ~70px разом з відступами — нижче 768px віджет
   дзвінка Ringostat ( .rngst_phone_button, z-index 999990, не наш ) стоїть
   біля лівого краю і його видимий кружечок 60px закінчується приблизно за
   80px від низу екрана. Вищий блок заліз би під нього. */
.mcta {
    position:   fixed;
    inset:      auto 0 0 0;
    z-index:    var(--z-sticky);
    display:    none;
    padding:    0 var(--container-padding)
                calc(16px + env(safe-area-inset-bottom, 0px));
    /* Схована за замовчуванням — див. коментар у mobile-cta.php. */
    transform:  translateY(140%);
    opacity:    0;
    visibility: hidden;
    transition: transform var(--transition),
                opacity var(--transition),
                visibility var(--transition);
}

.mcta--shown {
    transform:  none;
    opacity:    1;
    visibility: visible;
}

/* Скрим під кнопкою — той самий прийом, що під текстом героя
   ( .phero__headline::before вище ): без нього кнопка лежить просто на
   фото й читається як частина сторінки, а не як елемент керування —
   контент видно і над нею, і під нею.

   Градієнт навмисно НЕ доходить до суцільного кольору: під кнопкою по
   черзі проходять і фотографії, і всі три фони секцій ( --bg-canvas,
   --bg-subtle, --bg-elevated ). Суцільна заливка одним із них дала б
   помітний шов на двох інших, а напівпрозора лише притемнює будь-який.
   Колір — той самий rgba(1, 21, 44), що в решти скримів проєкту. */
.mcta::before {
    content:        "";
    position:       absolute;
    inset:          -96px 0 0 0;
    background:     linear-gradient(180deg,
                      rgba(1, 21, 44, 0)   0%,
                      rgba(1, 21, 44, .45) 32%,
                      rgba(1, 21, 44, .82) 62%,
                      rgba(1, 21, 44, .95) 100%);
    pointer-events: none;
}

.mcta__btn {
    /* Тінь темна, а не --gold-glow: золоте сяйво над світлим фото
       зливалося з ним і кнопка не відділялась від фону. */
    box-shadow: 0 12px 28px -10px rgba(1, 12, 26, .8),
                0 2px 8px rgba(1, 12, 26, .45);
}

@media (max-width: 768px) {
    .mcta { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .mcta { transition: none; }
}